TabbedDialog and the boxed tab strip, as Dip has them; the tally's comment describes the tally

TabbedDialog keeps its own backdrop here, since the template has no
shared one; a game that has one may drop it. The template's hall still
opens its about panel with About.svelte.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG

template/src/lib/components/TabbedDialog.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	// A dialog of tabs: the about panel, how to play, the rules. The address
+	// names it, so a plain link opens it: #rules opens the rules, #guide/notation
+	// how to play at its notation. It closes with its button, a click outside
+	// it, or Escape. The tab last read is the one it reopens on. `open` tells
+	// the page whether it is showing.
+	import { untrack, type Snippet } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import Tabs, { type Tab } from './Tabs.svelte';
+
+	let {
+		address,
+		title,
+		label = title,
+		tabs,
+		intro,
+		open = $bindable(false)
+	}: { address: string; title: string; label?: string; tabs: Tab[]; intro?: Snippet; open?: boolean } = $props();
+
+	let current = $state('');
+
+	// The router holds the address, and the dialog is open exactly while the address names it.
+	// Every change goes through the router too, so it never loses track of where the page is.
+	const [named, tab] = $derived.by(() => {
+		const [name, t] = page.url.hash.slice(1).split('/');
+		return [name === address, t] as const;
+	});
+	$effect(() => {
+		open = named;
+	});
+	$effect(() => {
+		if (named && tabs.some((t) => t.id === tab)) untrack(() => (current = tab));
+	});
+	// The address follows the chosen tab, so what is being read can be linked to.
+	$effect(() => {
+		if (named && current && current !== untrack(() => tab)) show(current);
+	});
+
+	const bare = () => `${location.pathname}${location.search}`;
+	const quietly = { replaceState: true, noScroll: true, keepFocus: true };
+	function show(id: string) {
+		goto(`${bare()}#${address}/${id}`, quietly);
+	}
+	function close() {
+		goto(bare(), quietly);
+	}
+
+	function onKey(e: KeyboardEvent) {
+		if (named && e.key === 'Escape') close();
+	}
+</script>
+
+<svelte:window onkeydown={onKey} />
+
+{#if named}
+	<div class="scrim" role="presentation" onclick={(ev) => ev.target === ev.currentTarget && close()}>
+		<div class="panel" role="dialog" aria-modal="true" aria-labelledby="{address}-title">
+			<header>
+				<h2 id="{address}-title">{title}</h2>
+				<button type="button" class="close" aria-label="Close" onclick={close}>×</button>
+			</header>
+			<div class="body">
+				{#if intro}<div class="intro">{@render intro()}</div>{/if}
+				<Tabs {tabs} {label} bind:current />
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	/* Its own backdrop: not every game has another dialog to share one with. */
+	.scrim {
+		position: fixed;
+		inset: 0;
+		z-index: 20;
+		background: rgba(0, 0, 0, 0.55);
+		display: grid;
+		place-items: center;
+		padding: 16px;
+	}
+	/* min-width 0 all the way down, so wide content (the notation's table) scrolls in place instead of widening the dialog past a phone's screen. */
+	.panel {
+		width: min(100%, 44rem);
+		min-width: 0;
+		max-height: 100%;
+		display: flex;
+		flex-direction: column;
+		background: var(--slate);
+		border: 1px solid var(--rule-strong);
+		border-radius: 6px;
+		padding: 1rem 1.4rem 1.2rem;
+	}
+	header {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+	h2 {
+		font-size: 1.3rem;
+		margin: 0 0 0.6rem;
+	}
+	.close {
+		background: none;
+		border: none;
+		color: inherit;
+		font-size: 1.5rem;
+		line-height: 1;
+		cursor: pointer;
+		padding: 0.2rem 0.4rem;
+	}
+	.body {
+		overflow: auto;
+		min-height: 12rem;
+		min-width: 0;
+	}
+	.intro {
+		color: var(--bone-dim);
+	}
+	.body :global(a) {
+		color: var(--frost);
+	}
+	.body :global(h3) {
+		font-size: 1rem;
+		font-style: italic;
+		margin: 0.9rem 0 0.2rem;
+		color: var(--bone);
+	}
+	.body :global(h3:first-child) {
+		margin-top: 0;
+	}
+	/* The tab strip stays in view while a long tab scrolls beneath it. */
+	.body :global([role='tablist']) {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+		background: var(--slate);
+	}
+</style>

template/src/lib/components/Tabs.svelte

@@ -10,40 +10,22 @@
 </script>
 
 <script lang="ts">
-	// A strip of tabs over one panel, for a page or a dialog that would
+	// A strip of tabs over one panel, for a dialog that would otherwise be one
-	// otherwise be one long read. Arrow keys walk the tabs, Home and End go to
+	// long read. Arrow keys walk the tabs, Home and End go to the ends.
-	// the ends. With `address`, the page's #fragment names the open tab, so a
-	// link to /rules#syntax opens that tab and choosing a tab can be linked to.
 	import { tick } from 'svelte';
 
-	let { tabs, label, current = $bindable(''), address = false }: { tabs: Tab[]; label: string; current?: string; address?: boolean } = $props();
+	let { tabs, label, current = $bindable('') }: { tabs: Tab[]; label: string; current?: string } = $props();
 
 	const uid = $props.id();
 	const shown = $derived(tabs.find((t) => t.id === current) ?? tabs[0]);
 	let tabButtons: HTMLButtonElement[] = $state([]);
 
-	$effect(() => {
-		if (!address) return;
-		const fromHash = () => {
-			const id = location.hash.slice(1);
-			if (tabs.some((t) => t.id === id)) current = id;
-		};
-		fromHash();
-		window.addEventListener('hashchange', fromHash);
-		return () => window.removeEventListener('hashchange', fromHash);
-	});
-
-	function choose(id: string) {
-		current = id;
-		if (address) history.replaceState(history.state, '', `${location.pathname}${location.search}#${id}`);
-	}
-
 	async function onKey(e: KeyboardEvent, i: number) {
 		const to = e.key === 'ArrowRight' ? i + 1 : e.key === 'ArrowLeft' ? i - 1 : e.key === 'Home' ? 0 : e.key === 'End' ? tabs.length - 1 : null;
 		if (to === null) return;
 		e.preventDefault();
 		const next = (to + tabs.length) % tabs.length;
-		choose(tabs[next].id);
+		current = tabs[next].id;
 		await tick();
 		tabButtons[next]?.focus();
 	}
@@ -60,7 +42,7 @@
 			tabindex={shown.id === t.id ? 0 : -1}
 			class:on={shown.id === t.id}
 			bind:this={tabButtons[i]}
-			onclick={() => choose(t.id)}
+			onclick={() => (current = t.id)}
 			onkeydown={(e) => onKey(e, i)}>{t.label}</button
 		>
 	{/each}
@@ -70,35 +52,36 @@
 </div>
 
 <style>
+	/* Small capitals in a row that may wrap, the open tab boxed: a second row reads as more buttons, not a broken line. */
 	.tabs {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 0.2rem 0.4rem;
+		gap: 0.3rem;
+		padding-bottom: 0.5rem;
 		border-bottom: 1px solid var(--rule-strong);
 		margin: 0.6rem 0 0.8rem;
 	}
 	.tabs button {
+		font-family: var(--font-ui);
+		font-size: 0.74rem;
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
 		background: none;
-		border: none;
+		border: 1.5px solid transparent;
-		border-bottom: 3px solid transparent;
+		border-radius: 3px;
-		color: inherit;
+		color: var(--bone-dim);
-		opacity: 0.75;
+		padding: 0.3rem 0.6rem;
-		font: inherit;
-		padding: 0.35rem 0.5rem 0.4rem;
 		cursor: pointer;
 	}
+	.tabs button:hover {
+		color: var(--bone);
+	}
 	.tabs button.on {
-		opacity: 1;
+		border-color: var(--bone);
-		border-bottom-color: currentColor;
+		color: var(--bone);
+		background: var(--slate-deep);
 	}
 	.panel :global(p + p) {
 		margin-top: 0.7rem;
 	}
-	.panel :global(h3) {
-		font-size: 1.05rem;
-		margin: 1rem 0 0.4rem;
-	}
-	.panel :global(h3:first-child) {
-		margin-top: 0;
-	}
 </style>

template/src/lib/components/Tally.svelte

@@ -7,9 +7,9 @@
 </script>
 
 <script lang="ts">
-	// What the ledgers add up to, told as Wiz-War tells it: a few counts that
+	// What the ledgers add up to: a few counts that are the game's own story,
-	// are the game's own story, large, on cards; then the rest in a column of
+	// large, on cards; then the rest in a column of figures; then the fine
-	// figures; then the fine print. Each game chooses its counts and words.
+	// print. Each game chooses its counts and words.
 	let { headline, details, note, title = 'How much love the table is getting' }: { headline: TallyLine[]; details: TallyLine[]; note?: string; title?: string } =
 		$props();