fix(demos): eliminate each_key_duplicate crash in 22 component demos

The event-trace inspector in each demo keyed its `{#each}` by a
`Date.now()` timestamp (`entry.at` / `h.at`). A single interaction can
stamp `data-event` on several elements within the same millisecond, so
two trace entries share the key and Svelte throws `each_key_duplicate`
(reported on dropdown-menu).

The trace is an ephemeral, 3-item, text-only log with no transitions or
stateful children, so positional reconciliation is correct: drop the
timestamp key (the each becomes unkeyed). The `fmtTime(...at)` display is
left intact.

Swept all 22 demos carrying the pattern (21 keyed by `entry.at` + announce
by `h.at`): dropdown-menu, context-menu, menubar, navigation-menu, listbox,
grid-list, table, tree-view, tree-grid, feed, command, carousel, drag-drop,
clipboard, announce, alert-dialog, button, color-field, link-preview,
range-calendar, time-field, time-range-field.

Verified: `as \w+ (\w+.at)` -> 0 occurrences site-wide; `npm run check`
0 errors; browser repro on dropdown-menu + table (burst of events, no
each_key_duplicate, console clean).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/routes/uix/components/alert-dialog/+page.svelte

@@ -280,7 +280,7 @@
 			{#if trace.length === 0}
 				<span>open the dialog, click Cancel/Action to see Dialog events</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/announce/+page.svelte

@@ -265,7 +265,7 @@
 					{#if history.length === 0}
 						<span>type a message and Enter, or pick a scenario — the live region inspector above shows what the AT receives</span>
 					{:else}
-						{#each history.slice(0, 3) as h (h.at)}
+						{#each history.slice(0, 3) as h}
 							<span><strong>{h.priority}</strong> · "{h.msg}"</span>
 							<span style="color: var(--uix-text-faint)">{fmtTime(h.at)}</span>
 						{/each}

web/routes/uix/components/button/+page.svelte

@@ -225,7 +225,7 @@
 			{#if trace.length === 0}
 				<span>click the button to fire commit-action</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/carousel/+page.svelte

@@ -328,7 +328,7 @@
 			{#if trace.length === 0}
 				<span>arrow keys · drag · click indicators</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/clipboard/+page.svelte

@@ -210,7 +210,7 @@
 			{#if log.length === 0}
 				<span>type a value above, click Copy — the Indicator chip pops for {timeout}ms; <code>onCopy</code> / <code>onError</code> entries land here.</span>
 			{:else}
-				{#each log.slice(0, 3) as entry (entry.at)}
+				{#each log.slice(0, 3) as entry}
 					<span style="color: {entry.kind === 'err' ? 'var(--color-threat-solid)' : 'inherit'}"><strong>{entry.kind}</strong> · {entry.msg}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/color-field/+page.svelte

@@ -292,7 +292,7 @@
 			{#if trace.length === 0}
 				<span>edit a segment or play an event to see sema stamps</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/command/+page.svelte

@@ -275,7 +275,7 @@
 			{#if trace.length === 0}
 				<span>type or arrow-nav to highlight, Enter to invoke</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/context-menu/+page.svelte

@@ -296,7 +296,7 @@
 			{#if trace.length === 0}
 				<span>right-click the area to summon the menu</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/drag-drop/+page.svelte

@@ -200,7 +200,7 @@
 					{:else if trace.length === 0}
 						<span>drag cards across columns · keyboard: Tab → Space → arrows → Enter / Escape</span>
 					{:else}
-						{#each trace.slice(0, 3) as entry (entry.at)}
+						{#each trace.slice(0, 3) as entry}
 							<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 							<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 						{/each}

web/routes/uix/components/dropdown-menu/+page.svelte

@@ -325,7 +325,7 @@
 			{#if trace.length === 0}
 				<span>click the trigger to summon the menu</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/feed/+page.svelte

@@ -221,7 +221,7 @@
 			{#if trace.length === 0}
 				<span>focus an article + PageDown to navigate; scroll to fire sentinel…</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/grid-list/+page.svelte

@@ -190,7 +190,7 @@
 			{#if trace.length === 0}
 				<span>click row body to select; Tab into row to reach inner button</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/link-preview/+page.svelte

@@ -195,7 +195,7 @@
 			{#if trace.length === 0}
 				<span>hover the link to see events</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/listbox/+page.svelte

@@ -225,7 +225,7 @@
 			{#if trace.length === 0}
 				<span>focus the listbox + arrow / type to highlight</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/menubar/+page.svelte

@@ -249,7 +249,7 @@
 			{#if trace.length === 0}
 				<span>click a trigger or arrow-nav between menus</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/navigation-menu/+page.svelte

@@ -187,7 +187,7 @@
 			{#if trace.length === 0}
 				<span>hover or focus a trigger to open a mega-menu</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/range-calendar/+page.svelte

@@ -316,7 +316,7 @@
 			{#if trace.length === 0}
 				<span>click a day to start; hover to preview; click second to commit</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/table/+page.svelte

@@ -435,7 +435,7 @@
 			{#if trace.length === 0}
 				<span>click sort, select a row, expand a detail panel…</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/time-field/+page.svelte

@@ -298,7 +298,7 @@
 			{#if trace.length === 0}
 				<span>edit a segment or play an event to see sema stamps</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/time-range-field/+page.svelte

@@ -210,7 +210,7 @@
 			{#if trace.length === 0}
 				<span>tab into a segment and arrow up/down to edit</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/tree-grid/+page.svelte

@@ -301,7 +301,7 @@
 			{#if trace.length === 0}
 				<span>click a row, expand a branch, arrow keys to navigate…</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}

web/routes/uix/components/tree-view/+page.svelte

@@ -262,7 +262,7 @@
 			{#if trace.length === 0}
 				<span>arrow keys to navigate, Enter/Space to select, * to expand siblings…</span>
 			{:else}
-				{#each trace.slice(0, 3) as entry (entry.at)}
+				{#each trace.slice(0, 3) as entry}
 					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}