feat(eidos): port NavigationMenu (top-level site navigation w/ mega-menus)

#132. Eidos wrapper + types + recipe + canonical-depth demo. 7 parts:
Provider, List, Item, Trigger, Content, Link, Indicator. Soma owns
active-item state, hover delays (openDelay/skipDelayDuration/closeDelay),
hoverEnabled gate, loop arrow nav, data-motion directional swap,
Indicator rect CSS vars. Eidos paints the bar + trigger chrome +
Content panel + slide animations.

Reference parity (no air baseline — port directly from soma):

| Feature | soma | Radix | bits-ui | this port |
|---|---|---|---|---|
| Provider + List + Item + Trigger + Content + Link + Indicator | ✓ | ✓ | ✓ | ✓ |
| Hover open (openDelay/skipDelayDuration/closeDelay) | ✓ | ✓ | ✓ | ✓ |
| hoverEnabled (click-only mode) | ✓ | ⚠ | ✓ | ✓ |
| orientation horizontal + vertical | ✓ | ✓ | ⚠ | ✓ |
| dir / RTL | ✓ | ✓ | ✓ | ✓ |
| Indicator CSS vars (x/y/w/h rect) | ✓ | ✗ | ✗ | ✓ |
| data-motion directional swap (from-/to-start/end) | ✓ | ✓ | ⚠ | ✓ |
| forceMount on Content + Indicator | ✓ | ✓ | ✓ | ✓ |
| ARIA <nav> + translated aria-label | ✓ | ⚠ | ⚠ | ✓ |
| Keyboard nav (Arrow/Home/End/Enter/Space/Esc, ArrowDown → Content) | ✓ | ✓ | ✓ | ✓ |
| Sub (nested viewports) | ✗ | ✓ | ✓ | ⚠ deferred (matches soma) |
| Viewport (shared swap pane) | ✗ | ✓ | ✓ | ⚠ deferred |
| Modal variant (focus trap) | ✗ | ✓ | ✗ | ⚠ deferred |
| SafePolygon hover bridge | ✗ | ✗ | ✗ | ⚠ deferred |

Naming: matches soma's part names exactly. Both Trigger (button) and
Link (anchor) stay native — NOT routed through <Button> — because
top-nav has flat/borderless chrome distinct from action buttons. The
Link automatically picks up `aria-current="page"` styling for the
active route.

Variant set: only `size: 'sm' | 'md' | 'lg'` (no xs/xl). No
variant/color — NavigationMenu is chrome surface, not actionable
intent.

Fresh recipe — does NOT reuse dropdown-menu (floating click-driven)
or menubar (roving tabindex bar). NavigationMenu lives inline in the
page; per-item Content panels render via Floating but conceptually
attach to the bar. Indicator is a 2px underline that slides via CSS
vars (--navigation-menu-indicator-{x,y,w,h}) written by soma. Trigger
chevron rotates on [data-state='open']. Content animates via
data-motion directional slide on sibling swap.

Sidebar entry added under Navigation (between Pagination and a future
NavigationMenu entry).

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

src/uix/eidos/components/navigation-menu/index.ts

@@ -0,0 +1,71 @@
+// NavigationMenu — eidos compound API.
+//
+//   import { NavigationMenu } from '$uix/eidos/components/navigation-menu';
+//
+//   <NavigationMenu bind:value>
+//     <NavigationMenu.List>
+//       <NavigationMenu.Item value="products">
+//         <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
+//         <NavigationMenu.Content>
+//           <p>Mega-menu content for Products</p>
+//         </NavigationMenu.Content>
+//       </NavigationMenu.Item>
+//       <NavigationMenu.Item value="pricing">
+//         <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
+//       </NavigationMenu.Item>
+//     </NavigationMenu.List>
+//     <NavigationMenu.Indicator />
+//   </NavigationMenu>
+//
+// Soma owns active-item state, hover delays (`openDelay` /
+// `skipDelayDuration` / `closeDelay`), `hoverEnabled`, loop nav,
+// `data-motion` directional swap, indicator rect CSS vars. Eidos paints
+// the bar + trigger chrome + Content panel + slide animations.
+//
+// Naming: matches soma's part names exactly. Both `Trigger` (button)
+// and `Link` (anchor) stay native — NOT routed through `<Button>` —
+// because top-nav has its own flat/borderless chrome distinct from
+// action buttons.
+//
+// v1 scope: matches soma. Defer `Viewport`, `Sub` (nested), modal
+// variant, SafePolygon (also out-of-scope in soma v1).
+import NavigationMenuRoot from './navigation-menu.svelte';
+import List from './navigation-menu-list.svelte';
+import Item from './navigation-menu-item.svelte';
+import Trigger from './navigation-menu-trigger.svelte';
+import Content from './navigation-menu-content.svelte';
+import Link from './navigation-menu-link.svelte';
+import Indicator from './navigation-menu-indicator.svelte';
+
+type NavigationMenuNamespace = typeof NavigationMenuRoot & {
+	List: typeof List;
+	Item: typeof Item;
+	Trigger: typeof Trigger;
+	Content: typeof Content;
+	Link: typeof Link;
+	Indicator: typeof Indicator;
+};
+
+const NavigationMenu = NavigationMenuRoot as NavigationMenuNamespace;
+NavigationMenu.List = List;
+NavigationMenu.Item = Item;
+NavigationMenu.Trigger = Trigger;
+NavigationMenu.Content = Content;
+NavigationMenu.Link = Link;
+NavigationMenu.Indicator = Indicator;
+
+export { NavigationMenu };
+export default NavigationMenu;
+
+export type {
+	NavigationMenuProps,
+	NavigationMenuListProps as ListProps,
+	NavigationMenuItemProps as ItemProps,
+	NavigationMenuTriggerProps as TriggerProps,
+	NavigationMenuContentProps as ContentProps,
+	NavigationMenuLinkProps as LinkProps,
+	NavigationMenuIndicatorProps as IndicatorProps,
+	NavigationMenuSize,
+	NavigationMenuProviderSnippetProps,
+	NavigationMenuItemSnippetProps
+} from './types';

src/uix/eidos/components/navigation-menu/navigation-menu-content.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import * as NavigationMenu from '$soma/components/navigation-menu';
+	import type { NavigationMenuContentProps } from './types';
+	let { children, ...rest }: NavigationMenuContentProps = $props();
+</script>
+
+<NavigationMenu.Content {...rest}>{@render children?.()}</NavigationMenu.Content>

src/uix/eidos/components/navigation-menu/navigation-menu-indicator.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import * as NavigationMenu from '$soma/components/navigation-menu';
+	import type { NavigationMenuIndicatorProps } from './types';
+	let { children, ...rest }: NavigationMenuIndicatorProps = $props();
+</script>
+
+<NavigationMenu.Indicator {...rest}>{@render children?.()}</NavigationMenu.Indicator>

src/uix/eidos/components/navigation-menu/navigation-menu-item.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import * as NavigationMenu from '$soma/components/navigation-menu';
+	import type { NavigationMenuItemProps } from './types';
+	// Rename to dodge the `{#snippet children}` shadow trap.
+	let { children: bodyContent, ...rest }: NavigationMenuItemProps = $props();
+</script>
+
+<NavigationMenu.Item {...rest}>
+	{#snippet children(snippetProps)}
+		{@render bodyContent?.(snippetProps)}
+	{/snippet}
+</NavigationMenu.Item>

src/uix/eidos/components/navigation-menu/navigation-menu-link.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	/**
+	 * Eidos `NavigationMenu.Link` — one-shot anchor that doesn't open a
+	 * Content panel. Stays a plain `<a>` (NOT `<Button>`) — link semantics
+	 * + `aria-current`. The recipe paints the anchor as an in-bar
+	 * trigger (transparent bg + hover tint) so it visually aligns with
+	 * sibling Triggers.
+	 */
+	import * as NavigationMenu from '$soma/components/navigation-menu';
+	import type { NavigationMenuLinkProps } from './types';
+	let { children, ...rest }: NavigationMenuLinkProps = $props();
+</script>
+
+<NavigationMenu.Link {...rest}>{@render children?.()}</NavigationMenu.Link>

src/uix/eidos/components/navigation-menu/navigation-menu-list.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import * as NavigationMenu from '$soma/components/navigation-menu';
+	import type { NavigationMenuListProps } from './types';
+	let { children, ...rest }: NavigationMenuListProps = $props();
+</script>
+
+<NavigationMenu.List {...rest}>{@render children?.()}</NavigationMenu.List>

src/uix/eidos/components/navigation-menu/navigation-menu-trigger.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	/**
+	 * Eidos `NavigationMenu.Trigger` — flat in-bar trigger. Renders the
+	 * native `<button>` from soma directly (NOT `<Button>`) because
+	 * top-nav triggers need flat/borderless chrome distinct from action
+	 * buttons. Recipe paints transparent bg + hover/open tint + chevron
+	 * affordance.
+	 */
+	import * as NavigationMenu from '$soma/components/navigation-menu';
+	import type { NavigationMenuTriggerProps } from './types';
+	let { children, ...rest }: NavigationMenuTriggerProps = $props();
+</script>
+
+<NavigationMenu.Trigger {...rest}>{@render children?.()}</NavigationMenu.Trigger>

src/uix/eidos/components/navigation-menu/navigation-menu.css

@@ -0,0 +1,245 @@
+/*
+ * NavigationMenu recipe — top-level site navigation with mega-menus.
+ *
+ *   [data-navigation-menu]            → root bar
+ *   [data-navigation-menu-list]       → <ul> of items
+ *   [data-navigation-menu-item]       → wrapper for each trigger+content pair
+ *   [data-navigation-menu-trigger]    → in-bar button that opens Content
+ *   [data-navigation-menu-content]    → mega-menu panel (per Item)
+ *   [data-navigation-menu-link]       → one-shot anchor (no Content)
+ *   [data-navigation-menu-indicator]  → arrow / underline tracking the active trigger
+ *
+ * Sizes — sm | md | lg via `data-size` on the root.
+ *
+ * Distinct from dropdown-menu (floating click-driven) and menubar
+ * (roving tabindex bar). NavigationMenu is an INLINE list that
+ * persists in the page chrome; per-item Content panels render via
+ * Floating layer but are conceptually attached to the bar, not
+ * portaled away.
+ */
+
+[data-navigation-menu] {
+	--_navigation-menu-trigger-px: var(--space-3);
+	--_navigation-menu-list-gap: var(--space-1);
+	--_navigation-menu-font-size: var(--font-size-sm);
+	--_navigation-menu-radius: var(--radius-md);
+
+	position: relative;
+	display: inline-flex;
+	flex-direction: column;
+	align-items: stretch;
+	font-family: var(--font-ui);
+	font-size: var(--_navigation-menu-font-size);
+	line-height: var(--leading-ui);
+}
+
+[data-navigation-menu][data-size='sm'] {
+	--_navigation-menu-trigger-px: var(--space-2);
+	--_navigation-menu-list-gap: 0;
+	--_navigation-menu-font-size: var(--font-size-xs);
+	--_navigation-menu-radius: var(--radius-sm);
+}
+
+[data-navigation-menu][data-size='lg'] {
+	--_navigation-menu-trigger-px: var(--space-4);
+	--_navigation-menu-list-gap: var(--space-2);
+	--_navigation-menu-font-size: var(--font-size-md);
+	--_navigation-menu-radius: var(--radius-lg);
+}
+
+/* ── List ─ */
+[data-navigation-menu-list] {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--_navigation-menu-list-gap);
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+[data-navigation-menu][data-orientation='vertical'] [data-navigation-menu-list] {
+	flex-direction: column;
+	align-items: stretch;
+}
+
+/* ── Item ─ */
+[data-navigation-menu-item] {
+	position: relative;
+	display: inline-flex;
+	flex-direction: column;
+}
+
+/* ── Trigger (and Link share the same in-bar chrome) ─ */
+[data-navigation-menu-trigger],
+[data-navigation-menu-link] {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+	padding-block: var(--space-2);
+	padding-inline: var(--_navigation-menu-trigger-px);
+	border: none;
+	border-radius: var(--_navigation-menu-radius);
+	background: transparent;
+	color: var(--color-content-primary);
+	font: inherit;
+	text-decoration: none;
+	white-space: nowrap;
+	cursor: pointer;
+	outline: none;
+	transition:
+		background var(--duration-fast) var(--ease-default),
+		color var(--duration-fast) var(--ease-default);
+}
+
+[data-navigation-menu-trigger]:hover:not([data-disabled]),
+[data-navigation-menu-link]:hover:not([data-disabled]) {
+	background: var(--color-surface-overlay);
+}
+
+[data-navigation-menu-trigger][data-state='open'],
+[data-navigation-menu-trigger][data-state='open']:hover {
+	background: var(--color-primary-element);
+	color: var(--color-content-primary);
+}
+
+[data-navigation-menu-link][aria-current='page'],
+[data-navigation-menu-link][data-active] {
+	background: var(--color-primary-element);
+	color: var(--color-content-primary);
+}
+
+[data-navigation-menu-trigger]:focus-visible,
+[data-navigation-menu-link]:focus-visible {
+	outline: var(--focus-ring-width) solid var(--focus-ring-color);
+	outline-offset: 1px;
+}
+
+[data-navigation-menu-trigger][data-disabled],
+[data-navigation-menu-link][data-disabled] {
+	color: var(--color-content-muted);
+	pointer-events: none;
+	cursor: default;
+}
+
+/* Trigger chevron — points down by default, rotates when open. */
+[data-navigation-menu-trigger]::after {
+	content: '';
+	display: inline-block;
+	inline-size: 0.5rem;
+	block-size: 0.5rem;
+	margin-inline-start: var(--space-1);
+	border-block-end: 1.5px solid currentColor;
+	border-inline-end: 1.5px solid currentColor;
+	transform: translateY(-1px) rotate(45deg);
+	opacity: 0.65;
+	transition: transform var(--duration-fast) var(--ease-default);
+}
+
+[data-navigation-menu-trigger][data-state='open']::after {
+	transform: translateY(2px) rotate(-135deg);
+}
+
+/* ── Content panel (mega-menu) ─
+ *
+ * Soma renders Content via the Floating layer below the trigger. The
+ * recipe paints the panel chrome (border, shadow, padding) and the
+ * directional slide animation per `data-motion` (from / to).
+ */
+[data-navigation-menu-content] {
+	min-inline-size: 14rem;
+	padding: var(--space-4);
+	border: 1px solid var(--color-border-default);
+	border-radius: var(--radius-lg);
+	background: var(--color-surface-overlay);
+	color: var(--color-content-primary);
+	box-shadow: var(--shadow-floating);
+	outline: none;
+}
+
+[data-navigation-menu-content][data-state='open'] {
+	animation: navigation-menu-enter var(--duration-fast) var(--ease-out);
+}
+
+[data-navigation-menu-content][data-state='closed'] {
+	opacity: 0;
+	pointer-events: none;
+}
+
+@keyframes navigation-menu-enter {
+	from {
+		opacity: 0;
+		transform: translateY(-4px) scale(0.985);
+	}
+	to {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+/* `data-motion` — soma writes 'from-start' / 'from-end' / 'to-start' /
+ * 'to-end' when the active item swaps to a sibling. The directional
+ * slide makes the swap feel like a horizontal scroll, not a flicker. */
+[data-navigation-menu-content][data-motion='from-start'] {
+	animation: navigation-menu-from-start var(--duration-fast) var(--ease-out);
+}
+[data-navigation-menu-content][data-motion='from-end'] {
+	animation: navigation-menu-from-end var(--duration-fast) var(--ease-out);
+}
+[data-navigation-menu-content][data-motion='to-start'] {
+	animation: navigation-menu-to-start var(--duration-fast) var(--ease-default);
+}
+[data-navigation-menu-content][data-motion='to-end'] {
+	animation: navigation-menu-to-end var(--duration-fast) var(--ease-default);
+}
+
+@keyframes navigation-menu-from-start {
+	from { opacity: 0; transform: translateX(-12px); }
+}
+@keyframes navigation-menu-from-end {
+	from { opacity: 0; transform: translateX(12px); }
+}
+@keyframes navigation-menu-to-start {
+	to { opacity: 0; transform: translateX(-12px); }
+}
+@keyframes navigation-menu-to-end {
+	to { opacity: 0; transform: translateX(12px); }
+}
+
+/* ── Indicator (underline under active Trigger) ─
+ *
+ * Soma writes the active-trigger rect into CSS vars on the indicator:
+ *   --navigation-menu-indicator-x / -y / -w / -h
+ * The recipe consumes them to position a 2px underline that slides
+ * between triggers. The indicator itself stays inside the navigation
+ * bar; it's NOT in the floating layer.
+ */
+[data-navigation-menu-indicator] {
+	position: absolute;
+	inset-inline-start: 0;
+	inset-block-end: 0;
+	z-index: 1;
+	pointer-events: none;
+	inline-size: var(--navigation-menu-indicator-w, 0px);
+	block-size: 2px;
+	transform: translateX(var(--navigation-menu-indicator-x, 0px));
+	background: var(--color-primary-solid);
+	border-radius: 1px;
+	opacity: 0;
+	transition:
+		transform var(--duration-fast) var(--ease-default),
+		inline-size var(--duration-fast) var(--ease-default),
+		opacity var(--duration-fast) var(--ease-default);
+}
+
+[data-navigation-menu-indicator][data-state='visible'] {
+	opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	[data-navigation-menu-content],
+	[data-navigation-menu-indicator] {
+		animation: none !important;
+		transition: none !important;
+	}
+}

src/uix/eidos/components/navigation-menu/navigation-menu.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	/**
+	 * Eidos `<NavigationMenu>` — top-level site navigation with mega-menus.
+	 *
+	 *   <NavigationMenu bind:value>
+	 *     <NavigationMenu.List>
+	 *       <NavigationMenu.Item value="products">
+	 *         <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
+	 *         <NavigationMenu.Content>
+	 *           …rich content (links, cards, etc.)
+	 *         </NavigationMenu.Content>
+	 *       </NavigationMenu.Item>
+	 *       <NavigationMenu.Item value="pricing">
+	 *         <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
+	 *       </NavigationMenu.Item>
+	 *     </NavigationMenu.List>
+	 *     <NavigationMenu.Indicator />
+	 *   </NavigationMenu>
+	 *
+	 * Soma owns active-item state, hover open/close timing
+	 * (`openDelay` / `skipDelayDuration` / `closeDelay`), `hoverEnabled`
+	 * gate, loop arrow nav, `data-motion` direction marker, the Indicator
+	 * rect CSS vars (`--navigation-menu-indicator-{x,y,w,h}`), `forceMount`
+	 * + dismissal. Eidos paints the bar + trigger states + Content panel
+	 * chrome — fresh recipe (does not reuse dropdown-menu or menubar
+	 * since NavigationMenu lives inline in the page, not in a floating
+	 * panel and not as a roving tabindex bar).
+	 */
+	import { ActiveEidos } from '$uix/eidos';
+	import * as NavigationMenu from '$soma/components/navigation-menu';
+	import type { NavigationMenuProps } from './types';
+
+	let {
+		size = 'md',
+		value = $bindable(null as string | null),
+		children: bodyContent,
+		...rest
+	}: NavigationMenuProps = $props();
+
+	const eidos = ActiveEidos.require();
+	const resolvedSize = $derived(eidos.resolve(size, 'md'));
+</script>
+
+<NavigationMenu.Provider {...rest} bind:value data-size={resolvedSize}>
+	{#snippet children(snippetProps)}
+		{@render bodyContent?.(snippetProps)}
+	{/snippet}
+</NavigationMenu.Provider>

src/uix/eidos/components/navigation-menu/types.ts

@@ -0,0 +1,39 @@
+import type { ResponsiveProp, Size } from '$uix/eidos/lib/types';
+import type {
+	ProviderProps,
+	ListProps,
+	ItemProps,
+	TriggerProps,
+	ContentProps,
+	LinkProps,
+	IndicatorProps,
+	ProviderSnippetProps,
+	ItemSnippetProps
+} from '$soma/components/navigation-menu';
+
+/**
+ * NavigationMenu visual size — three-step subset. Top navigation is
+ * comfortable density by default; xs would crowd triggers, xl is rare
+ * for chrome bars.
+ */
+export type NavigationMenuSize = Extract<Size, 'sm' | 'md' | 'lg'>;
+
+export type NavigationMenuProps = ProviderProps & {
+	/**
+	 * Visual size — drives trigger padding, list gap, font-size.
+	 * @default 'md'
+	 */
+	size?: ResponsiveProp<NavigationMenuSize>;
+};
+
+export type NavigationMenuListProps = ListProps;
+export type NavigationMenuItemProps = ItemProps;
+export type NavigationMenuTriggerProps = TriggerProps;
+export type NavigationMenuContentProps = ContentProps;
+export type NavigationMenuLinkProps = LinkProps;
+export type NavigationMenuIndicatorProps = IndicatorProps;
+
+export type {
+	ProviderSnippetProps as NavigationMenuProviderSnippetProps,
+	ItemSnippetProps as NavigationMenuItemSnippetProps
+};

src/uix/eidos/index.css

@@ -97,6 +97,7 @@
 @import './components/menubar/menubar.css';
 @import './components/command/command.css';
 @import './components/listbox/listbox.css';
+@import './components/navigation-menu/navigation-menu.css';
 /* Shared menu-item indicator partial — must load AFTER the menu recipes
    so its `padding-inline-start` calc wins over the row rule's
    `padding-inline` shorthand at equal specificity. */

web/routes/uix/+layout@.svelte

@@ -173,7 +173,8 @@
 			heading: 'Navigation',
 			items: [
 				{ slug: '/uix/components/breadcrumb', label: 'Breadcrumb' },
-				{ slug: '/uix/components/pagination', label: 'Pagination' }
+				{ slug: '/uix/components/pagination', label: 'Pagination' },
+				{ slug: '/uix/components/navigation-menu', label: 'Navigation menu' }
 			]
 		},
 		{

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

@@ -0,0 +1,494 @@
+<script lang="ts">
+	import {
+		NavigationMenu,
+		type NavigationMenuSize
+	} from '$uix/eidos/components/navigation-menu';
+	import { compileMorfo } from '$uix/morfo';
+	import { navigationMenuMorfo } from '@/uix/morfo/components/navigation-menu';
+	import { getActiveUix } from '$active-uix';
+
+	const uix = getActiveUix();
+
+	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
+	let tab = $state<Tab>('live');
+
+	// ── Live state ────────────────────────────────────────────────────────
+	let value = $state<string | null>(null);
+	let size = $state<NavigationMenuSize>('md');
+	let orientation = $state<'horizontal' | 'vertical'>('horizontal');
+	let openDelay = $state(200);
+	let skipDelayDuration = $state(100);
+	let closeDelay = $state(300);
+	let hoverEnabled = $state(true);
+	let loop = $state(true);
+
+	type TraceEntry = { event: string; family: string; intent?: string; at: number };
+	let trace = $state<TraceEntry[]>([]);
+	let stageRef = $state<HTMLElement | null>(null);
+
+	$effect(() => {
+		const el = stageRef;
+		if (!el) return;
+		const obs = new MutationObserver((mutations) => {
+			for (const m of mutations) {
+				if (m.attributeName !== 'data-event') continue;
+				const target = m.target as Element;
+				const ev = target.getAttribute('data-event');
+				if (!ev) continue;
+				trace = [
+					{
+						event: ev,
+						family: target.getAttribute('data-event-family') ?? '—',
+						intent: target.getAttribute('data-event-intent') ?? undefined,
+						at: Date.now()
+					},
+					...trace
+				].slice(0, 6);
+			}
+		});
+		obs.observe(el, { attributes: true, subtree: true, attributeFilter: ['data-event'] });
+		return () => obs.disconnect();
+	});
+
+	const compiled = compileMorfo(navigationMenuMorfo);
+	const partsList = $derived([...compiled.parts.byKebab.values()]);
+	const events = $derived([...compiled.actions.byName.values()]);
+
+	function fmtTime(at: number): string {
+		const d = new Date(at);
+		return `${String(d.getSeconds()).padStart(2, '0')}.${String(d.getMilliseconds()).padStart(3, '0')}`;
+	}
+
+	const eidosSnippet = $derived(
+		[
+			"<script lang='ts'>",
+			"  import { NavigationMenu } from '$uix/eidos/components/navigation-menu';",
+			'  let value = $state<string | null>(null);',
+			'</' + 'script>',
+			'',
+			'<NavigationMenu',
+			'  bind:value',
+			size !== 'md' && `  size="${size}"`,
+			orientation !== 'horizontal' && `  orientation="${orientation}"`,
+			openDelay !== 200 && `  openDelay={${openDelay}}`,
+			closeDelay !== 300 && `  closeDelay={${closeDelay}}`,
+			!hoverEnabled && '  hoverEnabled={false}',
+			!loop && '  loop={false}',
+			'>',
+			'  <NavigationMenu.List>',
+			'    <NavigationMenu.Item value="products">',
+			'      <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>',
+			'      <NavigationMenu.Content>…</NavigationMenu.Content>',
+			'    </NavigationMenu.Item>',
+			'    <NavigationMenu.Item value="pricing">',
+			'      <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>',
+			'    </NavigationMenu.Item>',
+			'  </NavigationMenu.List>',
+			'  <NavigationMenu.Indicator />',
+			'</NavigationMenu>'
+		]
+			.filter(Boolean)
+			.join('\n')
+	);
+</script>
+
+<div data-uix-canvas-inner>
+	<header>
+		<div data-uix-eyebrow>Navigation · NavigationMenu</div>
+		<h1 data-uix-page-title>NavigationMenu</h1>
+		<p data-uix-page-lede>
+			Top-level site navigation with mega-menus — a horizontal bar of
+			Triggers, each potentially exposing a rich Content panel.
+			One submenu open at a time; hover or focus on a sibling Trigger
+			while another is open swaps Content without a close/re-open
+			cycle. Soma owns active-item state + hover delays
+			(<code>openDelay</code> / <code>skipDelayDuration</code> /
+			<code>closeDelay</code>) + the indicator rect CSS vars +
+			directional swap motion (<code>data-motion</code>).
+		</p>
+		<div data-uix-page-meta>
+			<span data-uix-meta-pill>
+				<span data-uix-meta-key>parts</span>{compiled.parts.order.length}
+			</span>
+			<span data-uix-meta-pill>
+				<span data-uix-meta-key>events</span>{events.length}
+			</span>
+			<span data-uix-meta-pill>
+				<span data-uix-meta-key>sizes</span>3
+			</span>
+			<span data-uix-meta-pill>
+				<span data-uix-meta-key>active</span> {value ?? '—'}
+			</span>
+		</div>
+	</header>
+
+	<div data-uix-stage>
+		<div data-uix-stage-area bind:this={stageRef} style="min-block-size: 18rem; padding: var(--uix-space-3); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--uix-space-3);">
+			<NavigationMenu
+				bind:value
+				{size}
+				{orientation}
+				{openDelay}
+				{skipDelayDuration}
+				{closeDelay}
+				{hoverEnabled}
+				{loop}
+			>
+				<NavigationMenu.List>
+					<NavigationMenu.Item value="products">
+						<NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
+						<NavigationMenu.Content>
+							<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uix-space-3); min-inline-size: 24rem;">
+								<a href="#" style="color: inherit; text-decoration: none;">
+									<strong style="display: block;">Analytics</strong>
+									<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Real-time insights from your data.</span>
+								</a>
+								<a href="#" style="color: inherit; text-decoration: none;">
+									<strong style="display: block;">Workflows</strong>
+									<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Automate repeating tasks.</span>
+								</a>
+								<a href="#" style="color: inherit; text-decoration: none;">
+									<strong style="display: block;">Integrations</strong>
+									<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Connect to your favourite tools.</span>
+								</a>
+								<a href="#" style="color: inherit; text-decoration: none;">
+									<strong style="display: block;">API</strong>
+									<span style="color: var(--color-content-secondary); font-size: var(--font-size-xs);">Build on the platform.</span>
+								</a>
+							</div>
+						</NavigationMenu.Content>
+					</NavigationMenu.Item>
+
+					<NavigationMenu.Item value="solutions">
+						<NavigationMenu.Trigger>Solutions</NavigationMenu.Trigger>
+						<NavigationMenu.Content>
+							<div style="display: flex; flex-direction: column; gap: var(--uix-space-2); min-inline-size: 18rem;">
+								<a href="#" style="color: inherit; text-decoration: none;">For startups</a>
+								<a href="#" style="color: inherit; text-decoration: none;">For enterprise</a>
+								<a href="#" style="color: inherit; text-decoration: none;">For agencies</a>
+								<a href="#" style="color: inherit; text-decoration: none;">For non-profits</a>
+							</div>
+						</NavigationMenu.Content>
+					</NavigationMenu.Item>
+
+					<NavigationMenu.Item value="pricing">
+						<NavigationMenu.Link href="#pricing">Pricing</NavigationMenu.Link>
+					</NavigationMenu.Item>
+
+					<NavigationMenu.Item value="docs">
+						<NavigationMenu.Link href="#docs">Docs</NavigationMenu.Link>
+					</NavigationMenu.Item>
+				</NavigationMenu.List>
+				<NavigationMenu.Indicator />
+			</NavigationMenu>
+		</div>
+		<div data-uix-stage-trace>
+			<span data-uix-stage-trace-key>trace</span>
+			{#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)}
+					<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}
+			{/if}
+			<span style="margin-inline-start: auto;">
+				<span data-uix-stage-trace-key>value</span> {value ?? '—'}
+			</span>
+		</div>
+	</div>
+
+	<div data-uix-tabs role="tablist">
+		<button data-uix-tab data-active={tab === 'live'} onclick={() => (tab = 'live')}>Live</button>
+		<button data-uix-tab data-active={tab === 'api'} onclick={() => (tab = 'api')}>
+			API <span data-uix-tab-count>7</span>
+		</button>
+		<button data-uix-tab data-active={tab === 'morfo'} onclick={() => (tab = 'morfo')}>
+			<span data-uix-layer-badge="morfo">morfo</span>
+			<span data-uix-tab-count>{partsList.length}p · {events.length}e</span>
+		</button>
+		<button data-uix-tab data-active={tab === 'sema'} onclick={() => (tab = 'sema')}>
+			<span data-uix-layer-badge="sema">sema</span>
+			<span data-uix-tab-count>{events.length}</span>
+		</button>
+		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button>
+		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
+	</div>
+
+	{#if tab === 'live'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>Controls</h2>
+
+			<div data-uix-subsection-head>
+				<span data-uix-layer-badge="soma">soma</span> Provider props
+			</div>
+			<div data-uix-controls>
+				<label data-uix-control>
+					<span data-uix-control-label>value <span data-uix-control-hint>open item</span></span>
+					<input type="text" value={value ?? ''} oninput={(e) => (value = e.currentTarget.value || null)} placeholder="(none)" />
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>orientation</span>
+					<span data-uix-chips role="radiogroup">
+						{#each ['horizontal', 'vertical'] as o (o)}
+							<button data-uix-chip data-active={orientation === o} onclick={() => (orientation = o as typeof orientation)}>{o}</button>
+						{/each}
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>openDelay <span data-uix-control-hint>{openDelay}ms</span></span>
+					<input type="range" min="0" max="1000" step="50" bind:value={openDelay} />
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>skipDelayDuration <span data-uix-control-hint>{skipDelayDuration}ms</span></span>
+					<input type="range" min="0" max="500" step="25" bind:value={skipDelayDuration} />
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>closeDelay <span data-uix-control-hint>{closeDelay}ms</span></span>
+					<input type="range" min="0" max="2000" step="50" bind:value={closeDelay} />
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>hoverEnabled</span>
+					<span data-uix-switch>
+						<input type="checkbox" bind:checked={hoverEnabled} />
+						<span data-uix-switch-label>{hoverEnabled ? 'on' : 'off'}</span>
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>loop</span>
+					<span data-uix-switch>
+						<input type="checkbox" bind:checked={loop} />
+						<span data-uix-switch-label>{loop ? 'on' : 'off'}</span>
+					</span>
+				</label>
+			</div>
+
+			<div data-uix-subsection-head>
+				<span data-uix-layer-badge="eidos">eidos</span> visual size
+			</div>
+			<div data-uix-controls>
+				<label data-uix-control>
+					<span data-uix-control-label>size</span>
+					<span data-uix-chips role="radiogroup">
+						{#each ['sm', 'md', 'lg'] as s (s)}
+							<button data-uix-chip data-active={size === s} onclick={() => (size = s as NavigationMenuSize)}>{s}</button>
+						{/each}
+					</span>
+				</label>
+			</div>
+
+			<div data-uix-code>
+				<div data-uix-code-head>
+					<span data-uix-layer-badge="eidos">eidos</span>
+					<span>visual · bar + trigger chrome + Content panel + directional motion</span>
+					<span data-uix-code-lang>svelte</span>
+				</div>
+				<pre><code>{eidosSnippet}</code></pre>
+			</div>
+		</section>
+	{/if}
+
+	{#if tab === 'api'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>API reference</h2>
+			<p data-uix-section-desc>7 parts: Provider, List, Item, Trigger, Content, Link, Indicator.</p>
+
+			<div data-uix-subsection-head>Provider</div>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
+					<tbody>
+						<tr><td class="name">value <span data-uix-tag data-kind="bindable">bindable</span></td><td class="type">string | null</td><td class="default">null</td><td>Currently open item value.</td></tr>
+						<tr><td class="name">orientation</td><td class="type">'horizontal' | 'vertical'</td><td class="default">'horizontal'</td><td>Bar layout axis.</td></tr>
+						<tr><td class="name">openDelay</td><td class="type">number</td><td class="default">200</td><td>Hover-to-open delay (ms).</td></tr>
+						<tr><td class="name">skipDelayDuration</td><td class="type">number</td><td class="default">100</td><td>Hover-swap delay between sibling triggers (ms).</td></tr>
+						<tr><td class="name">closeDelay</td><td class="type">number</td><td class="default">300</td><td>Close delay after pointer exit (ms).</td></tr>
+						<tr><td class="name">hoverEnabled</td><td class="type">boolean</td><td class="default">true</td><td>Disable to require click-only opening.</td></tr>
+						<tr><td class="name">loop</td><td class="type">boolean</td><td class="default">true</td><td>Wrap arrow nav between triggers.</td></tr>
+						<tr><td class="name">size <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">'sm' | 'md' | 'lg'</td><td class="default">'md'</td><td>Visual size — trigger padding + font.</td></tr>
+					</tbody>
+				</table>
+			</div>
+
+			<div data-uix-subsection-head>Item · Trigger · Content · Link · Indicator</div>
+			<p data-uix-section-desc style="margin-top: 0.25rem;">
+				<code>Item</code> is the wrapper around each trigger / content pair (gets <code>value</code> for routing in the bar's <code>value</code> binding). <code>Trigger</code> renders a native <code>&lt;button&gt;</code> with chevron affordance; <code>Link</code> renders <code>&lt;a&gt;</code> with <code>aria-current</code> support — both styled by the recipe with the same flat in-bar chrome, NOT routed through <code>&lt;Button&gt;</code>. <code>Indicator</code> is a 2px underline that slides between active triggers via CSS vars (<code>{`--navigation-menu-indicator-{x,y,w,h}`}</code>) written by soma.
+			</p>
+		</section>
+	{/if}
+
+	{#if tab === 'morfo'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>
+				<span data-uix-layer-badge="morfo">morfo</span>
+				· declarative contract
+			</h2>
+			<p data-uix-section-desc>Source: <code>src/uix/morfo/components/navigation-menu.ts</code>.</p>
+
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Field</th><th>Value</th></tr></thead>
+					<tbody>
+						<tr><td class="name">name</td><td class="type">"{navigationMenuMorfo.name}"</td></tr>
+						<tr><td class="name">kebab</td><td class="type">"{navigationMenuMorfo.kebab}"</td></tr>
+						<tr><td class="name">parts.length</td><td class="default">{navigationMenuMorfo.parts.length}</td></tr>
+						<tr><td class="name">events.length</td><td class="default">{events.length}</td></tr>
+					</tbody>
+				</table>
+			</div>
+
+			<div data-uix-subsection-head>Parts</div>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Part</th><th>Marker</th><th>Element</th><th>Role</th><th>Archetype</th><th>States</th><th>Optional</th></tr></thead>
+					<tbody>
+						{#each partsList as part (part.kebab)}
+							<tr>
+								<td class="name">{part.kebab}</td>
+								<td><code data-uix-part-marker>[{part.marker}]</code></td>
+								<td class="type">&lt;{part.defaultElement}&gt;</td>
+								<td class="type">{part.role ?? '—'}</td>
+								<td class="default">{part.archetype ?? '—'}</td>
+								<td class="default">{part.states.length ? part.states.join(' | ') : '—'}</td>
+								<td class="default">{part.optional ? 'yes' : 'no'}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+
+			<div data-uix-subsection-head>Events declaration</div>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>name</th><th>family</th><th>verb</th><th>sequence</th><th>intent</th><th>target</th></tr></thead>
+					<tbody>
+						{#each events as action (action.name)}
+							{@const sem = action.semantic}
+							{@const intentDecl = 'intent' in sem ? sem.intent : undefined}
+							{@const intentStr = typeof intentDecl === 'string' ? intentDecl : intentDecl ? `fromProp:${(intentDecl as { fromProp?: string }).fromProp ?? '?'}` : '—'}
+							<tr>
+								<td class="name">{action.name}</td>
+								<td class="type">{sem.family}</td>
+								<td>{sem.verb ?? '—'}</td>
+								<td>{sem.sequence ?? 'pre'}</td>
+								<td class="default">{intentStr}</td>
+								<td>{action.target}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</section>
+	{/if}
+
+	{#if tab === 'sema'}
+		<section data-uix-section id="sema">
+			<h2 data-uix-section-title>
+				<span data-uix-layer-badge="sema">sema</span>
+				· events
+			</h2>
+
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Name</th><th>Family</th><th>Verb</th><th>Sequence</th><th>Intent</th><th>Play</th></tr></thead>
+					<tbody>
+						{#each events as action (action.name)}
+							{@const intentDecl = 'intent' in action.semantic ? action.semantic.intent : undefined}
+							{@const effectiveIntent = typeof intentDecl === 'string' ? intentDecl : undefined}
+							<tr>
+								<td class="name">{action.name}</td>
+								<td class="type">{action.semantic.family}</td>
+								<td>{action.semantic.verb ?? '—'}</td>
+								<td>{action.semantic.sequence ?? 'pre'}</td>
+								<td class="default">{effectiveIntent ?? '—'}</td>
+								<td>
+									<button
+										data-uix-play
+										onclick={() => {
+											const target = (stageRef?.querySelector('[data-navigation-menu-item]') ?? stageRef) as HTMLElement | null;
+											if (!target) return;
+											void uix.events?.emit({
+												name: action.name,
+												family: action.semantic.family,
+												target,
+												...(effectiveIntent ? { intent: effectiveIntent } : {})
+											});
+										}}
+									>▶ play</button>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</section>
+	{/if}
+
+	{#if tab === 'recipe'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>Eidos recipe</h2>
+			<p data-uix-section-desc>Selectors at <code>src/uix/eidos/components/navigation-menu/navigation-menu.css</code>.</p>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Selector</th><th>Source</th><th>What it paints</th></tr></thead>
+					<tbody>
+						<tr><td class="name">[data-navigation-menu]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Root bar — inline-flex container with relative positioning.</td></tr>
+						<tr><td class="name">[data-navigation-menu][data-size]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Size scale — trigger padding + font + list gap.</td></tr>
+						<tr><td class="name">[data-navigation-menu-list]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Horizontal/vertical flex list of items.</td></tr>
+						<tr><td class="name">[data-navigation-menu-trigger], [data-navigation-menu-link]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Flat in-bar chrome — transparent bg, hover tint, focus ring.</td></tr>
+						<tr><td class="name">[data-navigation-menu-trigger][data-state='open']</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Open-state tint + chevron rotation.</td></tr>
+						<tr><td class="name">[data-navigation-menu-link][aria-current='page']</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Active-page accent.</td></tr>
+						<tr><td class="name">[data-navigation-menu-content]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Mega-menu panel chrome + entrance animation.</td></tr>
+						<tr><td class="name">[data-navigation-menu-content][data-motion]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Directional slide on trigger swap (from-start/end + to-start/end).</td></tr>
+						<tr><td class="name">[data-navigation-menu-indicator]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>2px underline that slides via CSS vars (<code>{`--navigation-menu-indicator-{x,y,w,h}`}</code>).</td></tr>
+					</tbody>
+				</table>
+			</div>
+		</section>
+	{/if}
+
+	{#if tab === 'a11y'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>Accessibility</h2>
+			<p data-uix-section-desc>
+				Root renders <code>&lt;nav&gt;</code> with translated <code>aria-label</code>
+				("Main"). Each Trigger has <code>aria-haspopup="menu"</code>,
+				<code>aria-expanded</code> and <code>aria-controls</code>; Content
+				is the labelled mega-menu region. Links use <code>aria-current="page"</code>
+				when the route matches.
+			</p>
+
+			<div data-uix-subsection-head>Keyboard</div>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Key</th><th>Action</th></tr></thead>
+					<tbody>
+						<tr><td><span data-uix-kbd>ArrowRight</span> / <span data-uix-kbd>ArrowLeft</span> on Trigger</td><td>Move focus to next/previous Trigger (horizontal orientation; RTL inverts).</td></tr>
+						<tr><td><span data-uix-kbd>ArrowDown</span> / <span data-uix-kbd>ArrowUp</span> on Trigger</td><td>Open the menu and move focus into the Content (vertical orientation: prev/next instead).</td></tr>
+						<tr><td><span data-uix-kbd>Enter</span> / <span data-uix-kbd>Space</span> on Trigger</td><td>Toggle the menu open/close.</td></tr>
+						<tr><td><span data-uix-kbd>Escape</span></td><td>Close the menu, focus stays on Trigger.</td></tr>
+						<tr><td><span data-uix-kbd>Home</span> / <span data-uix-kbd>End</span></td><td>First / last Trigger.</td></tr>
+						<tr><td><span data-uix-kbd>Tab</span></td><td>Move focus into the Content if open; otherwise advance past the bar.</td></tr>
+					</tbody>
+				</table>
+			</div>
+
+			<div data-uix-subsection-head>ARIA contract</div>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Part</th><th>Attribute</th><th>Value</th></tr></thead>
+					<tbody>
+						<tr><td class="name">navigation-menu</td><td>aria-label</td><td class="type">"Main" (translated)</td></tr>
+						<tr><td class="name">list</td><td>role</td><td class="type">"list"</td></tr>
+						<tr><td class="name">trigger</td><td>aria-haspopup</td><td class="type">"menu"</td></tr>
+						<tr><td class="name">trigger</td><td>aria-expanded</td><td class="type">"true" | "false"</td></tr>
+						<tr><td class="name">trigger</td><td>data-state</td><td class="type">"open" | "closed"</td></tr>
+						<tr><td class="name">content</td><td>role</td><td class="type">"menu"</td></tr>
+						<tr><td class="name">content</td><td>data-motion</td><td class="type">"from-start" | "from-end" | "to-start" | "to-end"</td></tr>
+						<tr><td class="name">link</td><td>aria-current</td><td class="type">"page" (active route only)</td></tr>
+					</tbody>
+				</table>
+			</div>
+		</section>
+	{/if}
+</div>