svelte-kit-vice/web/routes/uix/+layout@.svelte

<script lang="ts">
	import { onDestroy } from 'svelte';
	import { createActiveUix, setActiveUix } from '$active-uix';
	import { readActivePrefsSlot, standardPrefsDimensions } from '$prefs';
	import { page } from '$app/state';
	import { Soma } from '$soma/core/soma.svelte';
	import { siumLangs } from '$sium/langs/langs';
	import { secsLangs } from '$libs/secs';
	import { ActiveEidos } from '$uix/eidos';
	import type { Gradient } from '$libs/gradient';
	import { dialogSema } from '$uix/sema/components/dialog';
	import { drawerSema } from '$uix/sema/components/drawer';
	import { editableSema } from '$uix/sema/components/editable';
	import { fileUploadSema } from '$uix/sema/components/file-upload';
	import { floatPanelSema } from '$uix/sema/components/float-panel';
	import { formSema } from '$uix/sema/components/form';
	import { gradientBuilderSema } from '$uix/sema/components/gradient-builder';
	import { gradientPickerSema } from '$uix/sema/components/gradient-picker';
	import { imageAdjustmentsSema } from '$uix/sema/components/image-adjustments';
	import { imagePickerSema } from '$uix/sema/components/image-picker';
	import { knobSema } from '$uix/sema/components/knob';
	import { maskFieldSema } from '$uix/sema/components/mask-field';
	import type { SemaPreferences } from '$uix/sema';
	import { navTreeSema } from '$uix/sema/components/nav-tree';
	import { sidebarSema } from '$uix/sema/components/sidebar';
	import { numberFieldSema } from '$uix/sema/components/number-field';
	import { paginationSema } from '$uix/sema/components/pagination';
	import { passwordFieldSema } from '$uix/sema/components/password-field';
	import { popoverSema } from '$uix/sema/components/popover';
	import { radioGroupSema } from '$uix/sema/components/radio-group';
	import { ratingGroupSema } from '$uix/sema/components/rating-group';
	import { searchFieldSema } from '$uix/sema/components/search-field';
	import { selectSema } from '$uix/sema/components/select';
	import { sliderSema } from '$uix/sema/components/slider';
	import { splitterSema } from '$uix/sema/components/splitter';
	import { stepperSema } from '$uix/sema/components/stepper';
	import { tabsSema } from '$uix/sema/components/tabs';
	import { tagGroupSema } from '$uix/sema/components/tag-group';
	import { tagsInputSema } from '$uix/sema/components/tags-input';
	import { textareaSema } from '$uix/sema/components/textarea';
	import { mediaPlayerSema } from '$uix/sema/components/media-player';
	import { timelineSema } from '$uix/sema/components/timeline';
	import { toastSema } from '$uix/sema/components/toast';
	import { toolbarSema } from '$uix/sema/components/toolbar';
	import { accordionSema } from '$uix/sema/components/accordion';
	import { chatComposerSema } from '$uix/sema/components/chat-composer';
	import { chatLogSema } from '$uix/sema/components/chat-log';
	import { chatMessageSema } from '$uix/sema/components/chat-message';
	import { checkboxSema } from '$uix/sema/components/checkbox';
	import { calendarSema } from '$uix/sema/components/calendar';
	import { colorPickerSema } from '$uix/sema/components/color-picker';
	import { comboboxSema } from '$uix/sema/components/combobox';
	import { cropperSema } from '$uix/sema/components/cropper';
	import { cssFieldSema } from '$uix/sema/components/css-field';
	import { dateFieldSema } from '$uix/sema/components/date-field';
	// The rest of the pack index, loaded 2026-07-31. The media-player report
	// (63f20f345) exposed the class: packs are OPT-IN per app, and every demo
	// whose pack was missing here played raw family defaults instead of its
	// authored signature.
	import { chronosSema } from '$uix/sema/components/chronos';
	import { clipboardSema } from '$uix/sema/components/clipboard';
	import { collapsibleSema } from '$uix/sema/components/collapsible';
	import { colorFieldSema } from '$uix/sema/components/color-field';
	import { contextMenuSema } from '$uix/sema/components/context-menu';
	import { dragDropSema } from '$uix/sema/components/drag-drop';
	import { dropdownMenuSema } from '$uix/sema/components/dropdown-menu';
	import { listboxSema } from '$uix/sema/components/listbox';
	import { menubarSema } from '$uix/sema/components/menubar';
	import { menuDialSema } from '$uix/sema/components/menu-dial';
	import { monthGridSema } from '$uix/sema/components/month-grid';
	import { navigationMenuSema } from '$uix/sema/components/navigation-menu';
	import { onionMenuSema } from '$uix/sema/components/onion-menu';
	import { pathTraceSema } from '$uix/sema/components/path-trace';
	import { proofOfHumanSema } from '$uix/sema/components/proof-of-human';
	import { rangeCalendarSema } from '$uix/sema/components/range-calendar';
	import { rotateAlignSema } from '$uix/sema/components/rotate-align';
	import { switchSema } from '$uix/sema/components/switch';
	import { timeFieldSema } from '$uix/sema/components/time-field';
	import { toggleSema } from '$uix/sema/components/toggle';
	import { toggleGroupSema } from '$uix/sema/components/toggle-group';
	import { tooltipSema } from '$uix/sema/components/tooltip';
	import { treeViewSema } from '$uix/sema/components/tree-view';
	import { treeGridSema } from '$uix/sema/components/tree-grid';
	import { yearGridSema } from '$uix/sema/components/year-grid';
	import { Popover } from '$uix/eidos/components/popover';
	import '@/uix/eidos/index.css';
	// Opt-in full 31-scale donor palette — lets component `color="teal"` /
	// `color="plum"` (THEMING §25.5, the Radix per-instance override) resolve
	// the raw `--scale-{name}-*` tokens in the docs. The slim foundation
	// (`generated/base.css`) ships only role-referenced scales; the demos need
	// the whole palette so the System axis can exercise every scale.
	import '@/uix/eidos/generated/palette.css';
	import './uix.css';

	let { children } = $props();

	type Language = 'es' | 'en' | 'fr' | 'de' | 'ar';
	type Currency = 'EUR' | 'USD' | 'GBP' | 'JPY';
	type UnitSystem = 'metric' | 'imperial';
	type NumberFormat = 'es-ES' | 'en-US' | 'en-GB' | 'de-DE';

	const docsPrefsSchema = standardPrefsDimensions({
		// `ar` is here to make the language→direction derivation exercisable:
		// picking it flips `prefs.direction` to rtl with no direction intent set.
		// Untranslated keys fall back to the default locale (engine-langs.ts:51-56),
		// so it degrades to Spanish copy rather than breaking.
		languages: ['es', 'en', 'fr', 'de', 'ar'] satisfies readonly Language[],
		locales: ['es-ES', 'en-US', 'en-GB', 'de-DE'] satisfies readonly NumberFormat[],
		currencies: ['EUR', 'USD', 'GBP', 'JPY'] satisfies readonly Currency[],
		defaults: {
			language: 'es',
			locale: 'es-ES',
			currency: 'EUR'
		}
	});

	/**
	 * The perceptual reduction levels the sema channels read. A LIVE object:
	 * both channels read `preferences.{sound,haptic}` on every emit, so
	 * mutating it silences immediately with no channel re-registration.
	 *
	 * Until 2026-08-06 this was not passed at all, so the channels defaulted to
	 * `'full'` and the topbar's Sound switch silenced NOTHING — it set the prefs
	 * intent (which drives the visual/CSS side) and stopped there. A mute that
	 * does not mute is worse on a page that teaches sound than no mute at all.
	 */
	const semaPreferences: SemaPreferences = $state({ sound: 'full', haptic: 'full' });

	const uix = createActiveUix({
		langs: { schema: { sium: siumLangs, secs: secsLangs }, defaultLocale: 'es' as const },
		prefs: { schema: docsPrefsSchema },
		events: {
			sound: true,
			haptic: true,
			preferences: semaPreferences,
			components: [
				accordionSema,
				calendarSema,
				chatComposerSema,
				chatLogSema,
				chatMessageSema,
				checkboxSema,
				colorPickerSema,
				comboboxSema,
				cropperSema,
				cssFieldSema,
				dateFieldSema,
				dialogSema,
				drawerSema,
				editableSema,
				fileUploadSema,
				floatPanelSema,
				formSema,
				gradientBuilderSema,
				gradientPickerSema,
				imageAdjustmentsSema,
				imagePickerSema,
				knobSema,
				maskFieldSema,
				mediaPlayerSema,
				navTreeSema,
				sidebarSema,
				numberFieldSema,
				paginationSema,
				passwordFieldSema,
				popoverSema,
				radioGroupSema,
				ratingGroupSema,
				searchFieldSema,
				selectSema,
				sliderSema,
				splitterSema,
				stepperSema,
				tabsSema,
				tagGroupSema,
				tagsInputSema,
				textareaSema,
				timelineSema,
				toastSema,
				toolbarSema,
				// The rest of the index (2026-07-31) — see the import note above.
				chronosSema,
				clipboardSema,
				collapsibleSema,
				colorFieldSema,
				contextMenuSema,
				dragDropSema,
				dropdownMenuSema,
				listboxSema,
				menubarSema,
				menuDialSema,
				monthGridSema,
				navigationMenuSema,
				onionMenuSema,
				pathTraceSema,
				proofOfHumanSema,
				rangeCalendarSema,
				rotateAlignSema,
				switchSema,
				timeFieldSema,
				toggleSema,
				toggleGroupSema,
				tooltipSema,
				treeViewSema,
				treeGridSema,
				yearGridSema
			]
		}
	});

	setActiveUix(uix);
	Soma.create();

	type Section =
		| { kind: 'top'; slug: string; label: string }
		| { kind: 'group'; heading: string; items: { slug: string; label: string; tag?: string }[] };

	// Information architecture — single source of truth for sidebar +
	// breadcrumb. Each leaf maps to a route under `/uix/...`.
	const nav: Section[] = [
		{
			kind: 'group',
			heading: 'Get started',
			items: [
				{ slug: '/uix', label: 'Overview' },
				{ slug: '/uix/architecture', label: 'Architecture' },
				{ slug: '/uix/getting-started', label: 'Installation' }
			]
		},
		{
			kind: 'group',
			heading: 'Foundations',
			items: [
				{ slug: '/uix/tokens', label: 'Design tokens' },
				{ slug: '/uix/morfo', label: 'Morfo · contracts' },
				{ slug: '/uix/sema', label: 'Sema · perception' },
				{ slug: '/uix/eidos', label: 'Eidos · visual layer' }
			]
		},
		{
			kind: 'group',
			heading: 'El sonido',
			items: [
				{ slug: '/uix/docs/sound', label: 'Cómo suena una interfaz' },
				{ slug: '/uix/docs/sound/catalogo', label: 'El catálogo' },
				{ slug: '/uix/docs/sound/packs', label: 'Sound packs' },
				{ slug: '/uix/docs/sound/gestos', label: 'Gestos' }
			]
		},
		{
			kind: 'group',
			heading: 'Controls',
			items: [
				{ slug: '/uix/components/toggle', label: 'Toggle' },
				{ slug: '/uix/components/toggle-group', label: 'Toggle group' },
				{ slug: '/uix/components/switch', label: 'Switch' },
				{ slug: '/uix/components/checkbox', label: 'Checkbox' },
				{ slug: '/uix/components/radio-group', label: 'Radio group' },
				{ slug: '/uix/components/radio-cards', label: 'Radio cards' },
				{ slug: '/uix/components/rating-group', label: 'Rating group' },
				{ slug: '/uix/components/slider', label: 'Slider' },
				{ slug: '/uix/components/collapsible', label: 'Collapsible' },
				{ slug: '/uix/components/accordion', label: 'Accordion' },
				{ slug: '/uix/components/tabs', label: 'Tabs' },
				{ slug: '/uix/components/toolbar', label: 'Toolbar' },
				{ slug: '/uix/components/button', label: 'Button' },
				{ slug: '/uix/components/button-group', label: 'Button group' },
				{ slug: '/uix/components/split-button', label: 'Split button' },
				{ slug: '/uix/components/fab', label: 'Fab' }
			]
		},
		{
			kind: 'group',
			heading: 'Forms',
			items: [
				{ slug: '/uix/components/form', label: 'Form' },
				{ slug: '/uix/components/field', label: 'Field' },
				{ slug: '/uix/components/field-langs', label: 'Field langs' },
				{ slug: '/uix/components/label', label: 'Label' },
				{ slug: '/uix/components/editable', label: 'Editable' },
				{ slug: '/uix/components/palabras', label: 'Palabras' },
				{ slug: '/uix/components/number-field', label: 'Number field' },
				{ slug: '/uix/components/css-field', label: 'CSS field' },
				{ slug: '/uix/components/search-field', label: 'Search field' },
				{ slug: '/uix/components/password-field', label: 'Password field' },
				{ slug: '/uix/components/mask-field', label: 'Mask field' },
				{ slug: '/uix/components/prose', label: 'Prose' },
				{ slug: '/uix/components/textarea', label: 'Text area' },
				{ slug: '/uix/components/select', label: 'Select' },
				{ slug: '/uix/components/combobox', label: 'Combobox' },
				{ slug: '/uix/components/listbox', label: 'Listbox' },
				{ slug: '/uix/components/grid-list', label: 'Grid list' },
				{ slug: '/uix/components/calendar', label: 'Calendar' },
				{ slug: '/uix/components/range-calendar', label: 'Range calendar' },
				{ slug: '/uix/components/month-grid', label: 'Month grid' },
				{ slug: '/uix/components/year-grid', label: 'Year grid' },
				{ slug: '/uix/components/date-field', label: 'Date field' },
				{ slug: '/uix/components/date-range-field', label: 'Date range field' },
				{ slug: '/uix/components/date-picker', label: 'Date picker' },
				{ slug: '/uix/components/date-range-picker', label: 'Date range picker' },
				{ slug: '/uix/components/time-field', label: 'Time field' },
				{ slug: '/uix/components/time-range-field', label: 'Time range field' },
				{ slug: '/uix/components/time-picker', label: 'Time picker' },
				{ slug: '/uix/components/time-range-picker', label: 'Time range picker' },
				{ slug: '/uix/components/color-field', label: 'Color field' },
				{ slug: '/uix/components/color-picker', label: 'Color picker' },
				{ slug: '/uix/components/picker', label: 'Picker (deferValue)' },
				{ slug: '/uix/components/natural-time-picker', label: 'Natural time picker' },
				{ slug: '/uix/components/stepper', label: 'Stepper' },
				{ slug: '/uix/components/tag-group', label: 'Tag group' },
				{ slug: '/uix/components/tags-input', label: 'Tags input' },
				{ slug: '/uix/components/pin-input', label: 'Pin input' },
				{ slug: '/uix/components/file-upload', label: 'File upload' }
			]
		},
		{
			kind: 'group',
			heading: 'Navigation',
			items: [
				{ slug: '/uix/components/anchor-nav', label: 'Anchor nav' },
				{ slug: '/uix/components/breadcrumb', label: 'Breadcrumb' },
				{ slug: '/uix/components/pagination', label: 'Pagination' },
				{ slug: '/uix/components/navigation-menu', label: 'Navigation menu' },
				{ slug: '/uix/components/nav-tree', label: 'Nav tree' },
				{ slug: '/uix/components/sidebar', label: 'Sidebar' },
				{ slug: '/uix/components/skip-link', label: 'Skip link' }
			]
		},
		{
			kind: 'group',
			heading: 'Media',
			items: [
				{ slug: '/uix/components/avatar', label: 'Avatar' },
				{ slug: '/uix/components/avatar-group', label: 'AvatarGroup' },
				{ slug: '/uix/components/icon', label: 'Icon' },
				{ slug: '/uix/components/image', label: 'Image' },
				{ slug: '/uix/components/image-adjustments', label: 'Image adjustments' },
				{ slug: '/uix/components/image-picker', label: 'Image picker' },
				{ slug: '/uix/components/cropper', label: 'Cropper' },
				{ slug: '/uix/components/carousel', label: 'Carousel' },
				{ slug: '/uix/components/qr-code', label: 'QR code' },
				{ slug: '/uix/components/barcode', label: 'Barcode' },
				{ slug: '/uix/components/media-player', label: 'Media player' },
				{ slug: '/uix/components/skin-media-player', label: 'Media player skin' }
			]
		},
		{
			kind: 'group',
			heading: 'Status',
			items: [
				{ slug: '/uix/components/badge', label: 'Badge' },
				{ slug: '/uix/components/empty-state', label: 'Empty state' },
				{ slug: '/uix/components/result', label: 'Result' },
				{ slug: '/uix/components/callout', label: 'Callout' },
				{ slug: '/uix/components/progress', label: 'Progress' },
				{ slug: '/uix/components/meter', label: 'Meter' },
				{ slug: '/uix/components/spinner', label: 'Spinner' },
				{ slug: '/uix/components/skeleton', label: 'Skeleton' }
			]
		},
		{
			kind: 'group',
			heading: 'Data',
			items: [
				{ slug: '/uix/components/metrics', label: 'Metrics' },
				{ slug: '/uix/components/table', label: 'Table' },
				{ slug: '/uix/components/tree-view', label: 'Tree view' },
				{ slug: '/uix/components/tree-grid', label: 'Tree grid' },
				{ slug: '/uix/components/chat-composer', label: 'Chat composer' },
				{ slug: '/uix/components/chat-list', label: 'Chat list' },
				{ slug: '/uix/components/chat-log', label: 'Chat log' },
				{ slug: '/uix/components/chat-message', label: 'Chat message' },
				{ slug: '/uix/components/chat-typing', label: 'Chat typing' },
				{ slug: '/uix/components/emoji-picker', label: 'Emoji picker' },
				{ slug: '/uix/components/feed', label: 'Feed' },
				{ slug: '/uix/components/timeline', label: 'Timeline' },
				{ slug: '/uix/components/virtual-list', label: 'Virtual list' },
				{ slug: '/uix/components/virtual-grid', label: 'Virtual grid' }
			]
		},
		{
			kind: 'group',
			heading: 'Charts',
			items: [
				{ slug: '/uix/components/chart', label: 'Chart · overview' },
				{ slug: '/uix/components/line-chart', label: 'Line chart' },
				{ slug: '/uix/components/area-chart', label: 'Area chart' },
				{ slug: '/uix/components/bar-chart', label: 'Bar chart' },
				{ slug: '/uix/components/scatter-chart', label: 'Scatter chart' },
				{ slug: '/uix/components/sparkline', label: 'Sparkline' },
				{ slug: '/uix/components/pie-chart', label: 'Pie chart' },
				{ slug: '/uix/components/bar-list', label: 'Bar list' },
				{ slug: '/uix/components/bar-segment', label: 'Bar segment' },
				{ slug: '/uix/components/radar-chart', label: 'Radar chart' },
				{ slug: '/uix/components/gauge', label: 'Gauge' },
				{ slug: '/uix/components/funnel', label: 'Funnel' },
				{ slug: '/uix/components/bubble-chart', label: 'Bubble chart' },
				{ slug: '/uix/components/polar-area', label: 'Polar area' },
				{ slug: '/uix/components/heatmap', label: 'Heatmap' },
				{ slug: '/uix/components/smith-chart', label: 'Smith chart' }
			]
		},
		{
			kind: 'group',
			heading: 'Utilities',
			items: [
				{ slug: '/uix/components/announce', label: 'Announce' },
				{ slug: '/uix/components/clipboard', label: 'Clipboard' },
				{ slug: '/uix/components/drag-drop', label: 'Drag & drop' },
				{ slug: '/uix/components/proof-of-human', label: 'Proof of human' },
				{ slug: '/uix/components/trans', label: 'Trans' },
				{ slug: '/uix/components/format-number', label: 'FormatNumber' },
				{ slug: '/uix/components/format-date', label: 'FormatDate' },
				{ slug: '/uix/components/relative-time', label: 'RelativeTime' }
			]
		},
		{
			kind: 'group',
			heading: 'Overlays',
			items: [
				{ slug: '/uix/components/dialog', label: 'Dialog' },
				{ slug: '/uix/components/alert-dialog', label: 'Alert dialog' },
				{ slug: '/uix/components/drawer', label: 'Drawer' },
				{ slug: '/uix/components/popover', label: 'Popover' },
				{ slug: '/uix/components/float-panel', label: 'Float panel' },
				{ slug: '/uix/components/dropdown-menu', label: 'Dropdown menu' },
				{ slug: '/uix/components/context-menu', label: 'Context menu' },
				{ slug: '/uix/components/menubar', label: 'Menubar' },
				{ slug: '/uix/components/onion-menu', label: 'Onion menu' },
				{ slug: '/uix/components/menu-dial', label: 'Menu dial' },
				{ slug: '/uix/components/command', label: 'Command' },
				{ slug: '/uix/components/link-preview', label: 'Link preview' },
				{ slug: '/uix/components/toast', label: 'Toast' },
				{ slug: '/uix/components/tooltip', label: 'Tooltip' }
			]
		},
		{
			kind: 'group',
			heading: 'Typography',
			items: [
				{ slug: '/uix/components/text', label: 'Text' },
				{ slug: '/uix/components/s-text', label: 'SText' },
				{ slug: '/uix/components/s-text-virtual-list', label: 'STextVirtualList' },
				{ slug: '/uix/components/heading', label: 'Heading' },
				{ slug: '/uix/components/display', label: 'Display' },
				{ slug: '/uix/components/code', label: 'Code' },
				{ slug: '/uix/components/code-block', label: 'CodeBlock' },
				{ slug: '/uix/components/kbd', label: 'Kbd' },
				{ slug: '/uix/components/mark', label: 'Mark' },
				{ slug: '/uix/components/highlight', label: 'Highlight' },
				{ slug: '/uix/components/link', label: 'Link' }
			]
		},
		{
			kind: 'group',
			heading: 'Text effects',
			items: [
				{ slug: '/uix/components/count-up', label: 'CountUp' },
				{ slug: '/uix/components/text-gradient', label: 'TextGradient' },
				{ slug: '/uix/components/text-circular', label: 'TextCircular' },
				{ slug: '/uix/components/text-blur', label: 'TextBlur' },
				{ slug: '/uix/components/text-focus', label: 'TextFocus' },
				{ slug: '/uix/components/text-scramble', label: 'TextScramble' }
			]
		},
		{
			kind: 'group',
			heading: 'Packs',
			items: [{ slug: '/uix/packs/ambient', label: 'Ambient · backgrounds', tag: 'pack' }]
		},
		{
			kind: 'group',
			heading: 'Layout',
			items: [
				{ slug: '/uix/components/box', label: 'Box' },
				{ slug: '/uix/components/flex', label: 'Flex' },
				{ slug: '/uix/components/grid', label: 'Grid' },
				{ slug: '/uix/components/stack', label: 'Stack' },
				{ slug: '/uix/components/group', label: 'Group' },
				{ slug: '/uix/components/wrap', label: 'Wrap' },
				{ slug: '/uix/components/container', label: 'Container' },
				{ slug: '/uix/components/section', label: 'Section' },
				{ slug: '/uix/components/aspect-ratio', label: 'AspectRatio' },
				{ slug: '/uix/components/auto-grid', label: 'AutoGrid' },
				{ slug: '/uix/components/background', label: 'Background' },
				{ slug: '/uix/components/banner', label: 'Banner' },
				{ slug: '/uix/components/card', label: 'Card' },
				{ slug: '/uix/components/card-group', label: 'CardGroup' },
				{ slug: '/uix/components/float', label: 'Float' },
				{ slug: '/uix/components/scroll-area', label: 'ScrollArea' },
				{ slug: '/uix/components/separator', label: 'Separator' },
				{ slug: '/uix/components/splitter', label: 'Splitter' },
				{ slug: '/uix/components/sticky', label: 'Sticky' },
				{ slug: '/uix/components/affix', label: 'Affix' }
			]
		}
	];

	const componentCount = $derived(
		nav
			.filter((s): s is Extract<Section, { kind: 'group' }> => s.kind === 'group')
			.filter((g) => ['Controls', 'Media', 'Overlays'].includes(g.heading))
			.reduce((acc, g) => acc + g.items.length, 0)
	);

	const current = $derived(page.url.pathname.replace(/\/$/, '') || '/uix');

	// ── Theme ─────────────────────────────────────────────────────────────
	let theme = $state<'light' | 'dark'>('light');
	const eidosModeListeners = new Set<(value: 'light' | 'dark') => void>();
	const activeEidos = ActiveEidos.create({
		applyDom: true,
		theme: 'base',
		modeSource: {
			get: () => theme,
			onChange(handler) {
				eidosModeListeners.add(handler);
				return () => eidosModeListeners.delete(handler);
			}
		}
	});

	// A small canonical named-gradient set for the docs site — role-derived, so
	// they re-tint with the seed and flip light/dark for free (the whole point of
	// the gradient axis). Components name them: `<TextGradient colors="brand">`,
	// `background: var(--gradient-brand)`. Both are LINEAR (a single `<image>`),
	// so they're valid `background-image` values and paint through `background-clip:
	// text` — a role-derived MESH (aurora) carries a base color and would not.
	const brandGradient: Gradient = {
		kind: 'linear',
		angle: 110,
		interpolation: { space: 'oklch' },
		stops: [
			{ color: { kind: 'role', role: 'primary', slot: 'solid' } },
			{ color: { kind: 'role', role: 'secondary', slot: 'solid' } },
			{ color: { kind: 'role', role: 'tertiary', slot: 'solid' } }
		]
	};
	const spectrumGradient: Gradient = {
		kind: 'linear',
		angle: 90,
		interpolation: { space: 'oklch', hue: 'longer' },
		stops: [
			{ color: { kind: 'role', role: 'primary', slot: 'solid' } },
			{ color: { kind: 'role', role: 'affirm', slot: 'solid' } },
			{ color: { kind: 'role', role: 'secondary', slot: 'solid' } },
			{ color: { kind: 'role', role: 'risk', slot: 'solid' } },
			{ color: { kind: 'role', role: 'loss', slot: 'solid' } }
		]
	};
	activeEidos.applyGradients({ brand: brandGradient, spectrum: spectrumGradient });

	onDestroy(() => {
		activeEidos.dispose();
		uix.dispose();
	});

	$effect(() => {
		if (typeof document === 'undefined') return;
		const stored = localStorage.getItem('uix-docs-theme');
		if (stored === 'dark' || stored === 'light') {
			theme = stored;
			return;
		}
		const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
		theme = prefersDark ? 'dark' : 'light';
	});

	$effect(() => {
		if (typeof localStorage === 'undefined') return;
		localStorage.setItem('uix-docs-theme', theme);
	});

	$effect(() => {
		const currentTheme = theme;
		for (const listener of eidosModeListeners) listener(currentTheme);
	});

	let search = $state('');

	// ── Topbar prefs ──────────────────────────────────────────────────────
	// All persisted to localStorage. The sema toggles will wire to the
	// engine's channels once those expose runtime setEnabled APIs; today
	// they store preference + reflect it in the UI.

	// Three states, not two. `auto` CLEARS the direction intent so the built-in
	// `directionDimension` can derive it from `language` — the chain the
	// architecture documents ("if the user sets no intent, it derives from
	// prefs.language"). With a two-state toggle the shell set an intent from the
	// first frame, which permanently masked that derivation: picking Arabic
	// would have changed nothing.
	let dirMode = $state<'auto' | 'ltr' | 'rtl'>('auto');
	/** Effective direction after prefs resolves intent → derivation → default. */
	const dirSlot = readActivePrefsSlot<'ltr' | 'rtl'>(uix.prefs, 'direction');
	const effectiveDir = $derived(dirSlot?.get() ?? 'ltr');
	let language = $state<Language>('es');
	let currency = $state<Currency>('EUR');
	let units = $state<UnitSystem>('metric');
	let numberFormat = $state<NumberFormat>('es-ES');
	let soundOn = $state(true);
	let motionOn = $state(true);
	let hapticOn = $state(true);

	// ── Display axes — the interrelated theming knobs (density · scaling · border
	// width). Projected onto :root (below) via a managed stylesheet so EVERY demo —
	// including portaled overlays (dialog/popover) — reflects the change live.
	type Density = 'compact' | 'comfortable' | 'spacious';
	const DENSITIES: readonly Density[] = ['compact', 'comfortable', 'spacious'];
	const DENSITY_SCALES: Record<Density, { space: number; control: number }> = {
		compact: { space: 0.84, control: 0.9 },
		comfortable: { space: 1, control: 1 },
		spacious: { space: 1.16, control: 1.12 }
	};
	let density = $state<Density>('comfortable');
	let scaling = $state(1);
	let borderWidth = $state(1);

	const LANGUAGE_LABELS: Record<Language, string> = {
		es: 'Español',
		en: 'English',
		fr: 'Français',
		de: 'Deutsch',
		ar: 'العربية'
	};
	const CURRENCY_LABELS: Record<Currency, string> = {
		EUR: 'Euro',
		USD: 'US Dollar',
		GBP: 'British Pound',
		JPY: 'Japanese Yen'
	};
	const UNIT_LABELS: Record<UnitSystem, string> = { metric: 'Metric', imperial: 'Imperial' };
	const NUMBER_LABELS: Record<NumberFormat, string> = {
		'es-ES': 'Spain · 1.234,56',
		'en-US': 'US · 1,234.56',
		'en-GB': 'UK · 1,234.56',
		'de-DE': 'Germany · 1.234,56'
	};

	// Persist all topbar prefs in one bag.
	$effect(() => {
		if (typeof localStorage === 'undefined') return;
		const stored = localStorage.getItem('uix-docs-prefs');
		if (!stored) return;
		try {
			const p = JSON.parse(stored);
			if (p.dir === 'auto' || p.dir === 'ltr' || p.dir === 'rtl') dirMode = p.dir;
			if (p.language) language = p.language;
			if (p.currency) currency = p.currency;
			if (p.units) units = p.units;
			if (p.numberFormat) numberFormat = p.numberFormat;
			if (typeof p.soundOn === 'boolean') soundOn = p.soundOn;
			if (typeof p.motionOn === 'boolean') motionOn = p.motionOn;
			if (typeof p.hapticOn === 'boolean') hapticOn = p.hapticOn;
			if (p.density === 'compact' || p.density === 'comfortable' || p.density === 'spacious')
				density = p.density;
			if (typeof p.scaling === 'number') scaling = p.scaling;
			if (typeof p.borderWidth === 'number') borderWidth = p.borderWidth;
		} catch {
			/* ignore corrupt prefs blob */
		}
	});

	$effect(() => {
		if (typeof localStorage === 'undefined') return;
		const blob = {
			dir: dirMode,
			language,
			currency,
			units,
			numberFormat,
			soundOn,
			motionOn,
			hapticOn,
			density,
			scaling,
			borderWidth
		};
		localStorage.setItem('uix-docs-prefs', JSON.stringify(blob));
	});

	$effect(() => {
		uix.prefs.setIntent('language', language);
		// `auto` must CLEAR, not set: intent beats derivation, so setting any
		// value here would stop `direction` from following `language`.
		if (dirMode === 'auto') uix.prefs.clearIntent('direction');
		else uix.prefs.setIntent('direction', dirMode);
		uix.prefs.setIntent('locale', numberFormat);
		uix.prefs.setIntent('currency', currency);
		uix.prefs.setIntent('unitSystem', units);
		uix.prefs.setIntent('sound', soundOn ? 'allow' : 'reduce');
		uix.prefs.setIntent('motion', motionOn ? 'allow' : 'reduce');
		uix.prefs.setIntent('haptic', hapticOn ? 'allow' : 'reduce');
		// And the channels themselves: the prefs intent drives the visual side,
		// this drives whether anything is heard or felt at all.
		semaPreferences.sound = soundOn ? 'full' : 'off';
		semaPreferences.haptic = hapticOn ? 'full' : 'off';
	});

	// Project the display axes onto :root through a managed <style> (id-keyed, so
	// it replaces in place). :root — not the docs shell — so portaled overlays,
	// which render outside the shell, inherit the same density/scaling/border.
	$effect(() => {
		const d = DENSITY_SCALES[density];
		uix.dom.writeStyle(
			'uix-docs-display',
			`:root{--density-space-scale:${d.space};--density-control-scale:${d.control};--scaling:${scaling};--border-width:${borderWidth}px;}`
		);
	});

	const filteredNav = $derived.by(() => {
		const q = search.trim().toLowerCase();
		if (!q) return nav;
		return nav
			.map((s) => {
				if (s.kind !== 'group') return s;
				const items = s.items.filter((i) => i.label.toLowerCase().includes(q));
				return items.length ? { ...s, items } : null;
			})
			.filter((s): s is Section => s !== null);
	});

	const currentBreakpoint = $derived(uix.dom.currentBreakpoint.current);
	const compactShell = $derived(
		currentBreakpoint === 'base' || currentBreakpoint === 'sm' || currentBreakpoint === 'md'
	);
	const phoneShell = $derived(currentBreakpoint === 'base');
</script>

<div
	data-uix-docs
	data-theme={theme}
	data-mode={theme}
	data-uix-breakpoint={currentBreakpoint}
	data-uix-compact={compactShell ? 'true' : 'false'}
	data-uix-phone={phoneShell ? 'true' : 'false'}
>
	<div data-uix-shell>
		<header data-uix-topbar>
			<a
				href="/uix"
				data-uix-brand
				data-sveltekit-preload-code="hover"
				data-sveltekit-preload-data="hover"
			>
				<span data-uix-brand-mark>U</span>
				<span>UIX</span>
				<span data-uix-brand-version>v0.1</span>
			</a>

			<nav data-uix-topbar-nav aria-label="Primary">
				<a
					href="/uix"
					data-sveltekit-preload-code="hover"
					data-sveltekit-preload-data="hover"
					data-active={current === '/uix' ||
					current.startsWith('/uix/architecture') ||
					current.startsWith('/uix/getting-started')
						? 'true'
						: 'false'}>Docs</a
				>
				<a
					href="/uix/components"
					data-sveltekit-preload-code="hover"
					data-sveltekit-preload-data="hover"
					data-active={current.startsWith('/uix/components') ? 'true' : 'false'}>Components</a
				>
				<a href="https://github.com/" target="_blank" rel="noreferrer">GitHub ↗</a>
			</nav>

			<div data-uix-topbar-tools>
				<!-- DIR: simple toggle. RTL flips the entire document direction
					     so all eidos components (which use logical properties)
					     reverse correctly. -->
				<!-- Instrumented for `perm:check`: this is the ONLY control in the
					     shell that commits a preference, so without it the permutation
					     runner exercises component state transitions but never a prefs
					     commit — and the reactive path from `uix.prefs` into the ~64
					     components that resolve `dir` from it stays untested.
					     Index 90 so it runs AFTER each demo's own steps (0..N).
					     Two consequences a future reader should know: the runner shares
					     one browser context across routes, so this flip persists via
					     localStorage and routes alternate ltr/rtl through a run; and
					     because the scan is page-wide, EVERY route under this layout now
					     carries a step, so the runner no longer skips uninstrumented
					     demos. Both are deliberate — morfo contracts are direction
					     agnostic, and a prefs commit on every route is the coverage
					     this instrumentation exists for. -->
				<button
					type="button"
					data-uix-icon-btn
					data-perm-step="90"
					data-perm-label="prefs: flip direction"
					data-perm-settle="600"
					title="Direction: {dirMode}{dirMode === 'auto'
						? ` (from language → ${effectiveDir})`
						: ''} — click to cycle auto → ltr → rtl"
					aria-label="Toggle direction"
					onclick={() =>
						(dirMode = dirMode === 'auto' ? 'ltr' : dirMode === 'ltr' ? 'rtl' : 'auto')}
				>
					{#if effectiveDir === 'ltr'}
						<svg
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
							aria-hidden="true"
						>
							<path d="M5 12h14M13 6l6 6-6 6" />
						</svg>
					{:else}
						<svg
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
							aria-hidden="true"
						>
							<path d="M19 12H5M11 6l-6 6 6 6" />
						</svg>
					{/if}
				</button>

				<!-- LANG: short uppercase code + popover with full language list -->
				<Popover>
					<Popover.Trigger>
						<span data-uix-label-btn>
							<svg
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
								stroke-linecap="round"
								stroke-linejoin="round"
								aria-hidden="true"
							>
								<circle cx="12" cy="12" r="10" />
								<path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20" />
							</svg>
							{language.toUpperCase()}
							<svg
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
								stroke-linecap="round"
								stroke-linejoin="round"
								data-caret
								aria-hidden="true"
							>
								<path d="m6 9 6 6 6-6" />
							</svg>
						</span>
					</Popover.Trigger>
					<Popover.Content side="bottom" align="end" sideOffset={6}>
						<div data-uix-menu>
							<div data-uix-menu-section>
								<div data-uix-menu-label>Language</div>
								{#each Object.entries(LANGUAGE_LABELS) as [code, label]}
									<button
										type="button"
										data-uix-menu-item
										data-checked={language === code ? 'true' : 'false'}
										onclick={() => (language = code as Language)}
									>
										<span>{label}</span>
										<span data-uix-menu-item-meta>{code.toUpperCase()}</span>
									</button>
								{/each}
							</div>
						</div>
					</Popover.Content>
				</Popover>

				<!-- FORMATS: currency + units + number formatting in one popover -->
				<Popover>
					<Popover.Trigger>
						<span data-uix-label-btn>
							<svg
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
								stroke-linecap="round"
								stroke-linejoin="round"
								aria-hidden="true"
							>
								<path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
							</svg>
							Formats
							<svg
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
								stroke-linecap="round"
								stroke-linejoin="round"
								data-caret
								aria-hidden="true"
							>
								<path d="m6 9 6 6 6-6" />
							</svg>
						</span>
					</Popover.Trigger>
					<Popover.Content side="bottom" align="end" sideOffset={6}>
						<div data-uix-menu style="min-inline-size: 240px;">
							<div data-uix-menu-section>
								<div data-uix-menu-label>Currency</div>
								{#each Object.entries(CURRENCY_LABELS) as [code, label]}
									<button
										type="button"
										data-uix-menu-item
										data-checked={currency === code ? 'true' : 'false'}
										onclick={() => (currency = code as Currency)}
									>
										<span>{label}</span>
										<span data-uix-menu-item-meta>{code}</span>
									</button>
								{/each}
							</div>
							<div data-uix-menu-section>
								<div data-uix-menu-label>Units</div>
								{#each Object.entries(UNIT_LABELS) as [code, label]}
									<button
										type="button"
										data-uix-menu-item
										data-checked={units === code ? 'true' : 'false'}
										onclick={() => (units = code as UnitSystem)}
									>
										<span>{label}</span>
										<span data-uix-menu-item-meta
											>{code === 'metric' ? 'KM · KG · °C' : 'MI · LB · °F'}</span
										>
									</button>
								{/each}
							</div>
							<div data-uix-menu-section>
								<div data-uix-menu-label>Numbers</div>
								{#each Object.entries(NUMBER_LABELS) as [code, label]}
									<button
										type="button"
										data-uix-menu-item
										data-checked={numberFormat === code ? 'true' : 'false'}
										onclick={() => (numberFormat = code as NumberFormat)}
									>
										<span>{label}</span>
									</button>
								{/each}
							</div>
						</div>
					</Popover.Content>
				</Popover>

				<!-- DISPLAY: density / scaling / border width — the interrelated
					     theming axes, applied to :root so every demo (including
					     portaled overlays) reflects the change live. -->
				<Popover>
					<Popover.Trigger>
						<span data-uix-label-btn>
							<svg
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
								stroke-linecap="round"
								stroke-linejoin="round"
								aria-hidden="true"
							>
								<line x1="4" y1="7" x2="20" y2="7" />
								<circle cx="9" cy="7" r="2.5" />
								<line x1="4" y1="17" x2="20" y2="17" />
								<circle cx="15" cy="17" r="2.5" />
							</svg>
							Display
							<svg
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
								stroke-linecap="round"
								stroke-linejoin="round"
								data-caret
								aria-hidden="true"
							>
								<path d="m6 9 6 6 6-6" />
							</svg>
						</span>
					</Popover.Trigger>
					<Popover.Content side="bottom" align="end" sideOffset={6}>
						<div data-uix-menu style="min-inline-size: 252px;">
							<div data-uix-menu-section>
								<div data-uix-menu-label>Density</div>
								{#each DENSITIES as d}
									<button
										type="button"
										data-uix-menu-item
										data-checked={density === d ? 'true' : 'false'}
										onclick={() => (density = d)}
									>
										<span style="text-transform: capitalize;">{d}</span>
										<span data-uix-menu-item-meta
											>{DENSITY_SCALES[d].space}× · {DENSITY_SCALES[d].control}×</span
										>
									</button>
								{/each}
							</div>
							<div data-uix-menu-section>
								<div data-uix-menu-label>Scaling · {scaling.toFixed(2)}×</div>
								<input
									data-uix-range
									type="range"
									min="0.85"
									max="1.25"
									step="0.05"
									bind:value={scaling}
									aria-label="Scaling factor"
								/>
							</div>
							<div data-uix-menu-section>
								<div data-uix-menu-label>Border width · {borderWidth}px</div>
								<input
									data-uix-range
									type="range"
									min="0"
									max="4"
									step="0.5"
									bind:value={borderWidth}
									aria-label="Border width"
								/>
							</div>
							<div data-uix-menu-section>
								<button
									type="button"
									data-uix-menu-item
									onclick={() => {
										density = 'comfortable';
										scaling = 1;
										borderWidth = 1;
									}}
								>
									<span>Reset</span>
									<span data-uix-menu-item-meta>comfortable · 1× · 1px</span>
								</button>
							</div>
						</div>
					</Popover.Content>
				</Popover>

				<!-- SEMANTICS: sound / motion / haptic toggles. These will hook
					     into the sema engine channels' enabled state once the
					     channels expose runtime setEnabled APIs; today they
					     persist preference + reflect in the UI. -->
				<Popover>
					<Popover.Trigger>
						<span data-uix-label-btn>
							<svg
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
								stroke-linecap="round"
								stroke-linejoin="round"
								aria-hidden="true"
							>
								<path
									d="M12 2a4 4 0 0 1 4 4v6a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4zM19 10v2a7 7 0 0 1-14 0v-2M12 19v3"
								/>
							</svg>
							Semantics
							<svg
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
								stroke-linecap="round"
								stroke-linejoin="round"
								data-caret
								aria-hidden="true"
							>
								<path d="m6 9 6 6 6-6" />
							</svg>
						</span>
					</Popover.Trigger>
					<Popover.Content side="bottom" align="end" sideOffset={6}>
						<div data-uix-menu style="min-inline-size: 240px;">
							<div data-uix-menu-section>
								<div data-uix-menu-label>Perceptual channels</div>
								<label data-uix-menu-toggle>
									<input type="checkbox" bind:checked={soundOn} />
									Sound
									<span data-uix-menu-toggle-meta>{soundOn ? 'on' : 'off'}</span>
								</label>
								<label data-uix-menu-toggle>
									<input type="checkbox" bind:checked={motionOn} />
									Motion
									<span data-uix-menu-toggle-meta>{motionOn ? 'on' : 'off'}</span>
								</label>
								<label data-uix-menu-toggle>
									<input type="checkbox" bind:checked={hapticOn} />
									Haptic
									<span data-uix-menu-toggle-meta>{hapticOn ? 'on' : 'off'}</span>
								</label>
							</div>
						</div>
					</Popover.Content>
				</Popover>

				<!-- THEME -->
				<button
					type="button"
					data-uix-icon-btn
					title={theme === 'light' ? 'Switch to dark theme' : 'Switch to light theme'}
					aria-label="Toggle theme"
					onclick={() => (theme = theme === 'light' ? 'dark' : 'light')}
				>
					{#if theme === 'light'}
						<svg
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
							aria-hidden="true"
						>
							<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
						</svg>
					{:else}
						<svg
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
							aria-hidden="true"
						>
							<circle cx="12" cy="12" r="4" />
							<path
								d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
							/>
						</svg>
					{/if}
				</button>
			</div>
		</header>

		<aside data-uix-rail>
			<div data-uix-rail-search>
				<input type="search" placeholder="Search…" bind:value={search} />
			</div>

			{#each filteredNav as section}
				{#if section.kind === 'group'}
					<div data-uix-rail-group>
						<div data-uix-rail-group-head>
							<span>{section.heading}</span>
							<span data-uix-rail-group-count>{section.items.length}</span>
						</div>
						<ul>
							{#each section.items as item}
								<li>
									<a
										href={item.slug}
										data-uix-rail-link
										data-sveltekit-preload-code="hover"
										data-sveltekit-preload-data="hover"
										data-active={current === item.slug ? 'true' : 'false'}
									>
										{item.label}
										{#if item.tag}
											<span data-uix-rail-link-tag>{item.tag}</span>
										{/if}
									</a>
								</li>
							{/each}
						</ul>
					</div>
				{/if}
			{/each}

			{#if filteredNav.length === 0}
				<div data-uix-rail-group-head>No matches for "{search}"</div>
			{/if}
		</aside>

		<!-- The docs copy is written in English, so it is DECLARED as English via
			   `lang` — but NOT via `dir`. A `dir="ltr"` here used to pin the prose
			   against the bidi artefact ("What is morfo?" rendering as "?What is
			   morfo"), and it worked, but it pinned the DEMOS too: a component in
			   `auto` mode passes no `dir` prop, so it stamps no attribute and
			   resolves its direction by INHERITANCE from the DOM. This container
			   was that inheritance, so the shell's RTL switch — and picking
			   Arabic — reached `<html>` and stopped here, leaving all 51 demos
			   frozen in LTR. Measured on the sidebar: `html dir="rtl"` with the
			   panel still on the left, and dropping this attribute alone moved it.
			   The prose artefact is cosmetic and only shows in RTL, which is an
			   inspection mode; demos that cannot demonstrate are not. If the
			   prose needs pinning again, it has to happen AROUND THE PROSE, not
			   around the canvas that also holds the live examples. -->
		<main data-uix-canvas lang="en">
			{@render children?.()}
		</main>
	</div>
</div>