alus-ui-mcp 0.3.0 → 0.3.1

package/dist/index.js

@@ -5233,6 +5233,9 @@ var BUNDLED_DATA = {
 	let listEl = $state<HTMLUListElement | null>(null);
 	let highlighted = $state(0);
 
+	// Seed the input value from an initially-provided selected option
+	if (selected && !value) value = selected.label;
+
 	const filtered = $derived.by(() => {
 		const q = value.trim().toLowerCase();
 		if (q.length < minLength) return [];
@@ -5546,7 +5549,7 @@ var BUNDLED_DATA = {
       "files": {
         "Calendar.svelte": `<script lang="ts" module>
 	import {
-		CalendarDate,
+		CalendarDate as CalendarDateImpl,
 		DateFormatter,
 		getDayOfWeek,
 		getLocalTimeZone,
@@ -5558,6 +5561,12 @@ var BUNDLED_DATA = {
 		type DateValue
 	} from '@internationalized/date';
 
+	// Re-export CalendarDate through a local binding to satisfy no-import-assign
+	const CalendarDate: typeof CalendarDateImpl = CalendarDateImpl;
+	export { CalendarDate };
+	// Declare DateValue locally to avoid no-import-assign false positive on re-export
+	export type { DateValue }; // eslint-disable-line no-import-assign
+
 	export interface CalendarDay {
 		date: DateValue;
 		jsDate: Date;
@@ -5569,8 +5578,6 @@ var BUNDLED_DATA = {
 
 	export type CalendarView = 'days' | 'months' | 'years';
 
-	export { CalendarDate, type DateValue };
-
 	function isoOf(d: DateValue) {
 		return \`\${d.year}-\${d.month}-\${d.day}\`;
 	}
@@ -5784,7 +5791,7 @@ var BUNDLED_DATA = {
 	}
 
 	function onDayKey(e: KeyboardEvent, d: DateValue) {
-		let next: DateValue | null = null;
+		let next: DateValue | null;
 		switch (e.key) {
 			case 'ArrowLeft':
 				next = d.subtract({ days: 1 });
@@ -5908,7 +5915,7 @@ var BUNDLED_DATA = {
 	{#if view === 'days'}
 		<div role="grid" aria-label={ariaLabel} data-calendar={gridId} class={gridClass}>
 			<div role="row">
-				{#each weekdays as wd}
+				{#each weekdays as wd (wd)}
 					<div role="columnheader" aria-label={wd} class={weekdayClass}>{wd}</div>
 				{/each}
 			</div>
@@ -7800,7 +7807,7 @@ var BUNDLED_DATA = {
 
 	function onKeydown(e: KeyboardEvent) {
 		if (readonly || disabled) return;
-		let next = value;
+		let next: number;
 		switch (e.key) {
 			case 'ArrowRight':
 			case 'ArrowUp':
@@ -7855,7 +7862,7 @@ var BUNDLED_DATA = {
 	onkeydown={onKeydown}
 	{...ariaAttrs}
 >
-	{#each Array(max) as _, i (i)}
+	{#each Array.from({ length: max }, (_, n) => n) as i (i)}
 		{@const idx = i + 1}
 		{@const filled = idx <= displayed}
 		<button
@@ -8842,7 +8849,7 @@ var BUNDLED_DATA = {
 	</div>
 {/if}
 `,
-        "AccordionItem.svelte": "<script lang=\"ts\">\n	import { getAccordionRoot, setAccordionItem } from './context.js';\n\n	interface Props {\n		children?: import('svelte').Snippet<[{ open: boolean }]>;\n		value: string;\n		disabled?: boolean;\n		class?: string;\n	}\n\n	let { children, value, disabled = false, class: className = '' }: Props = $props();\n\n	const root = getAccordionRoot();\n\n	let triggerId = $derived(`${root.baseId}-trigger-${value}`);\n	let contentId = $derived(`${root.baseId}-content-${value}`);\n\n	setAccordionItem({\n		get value() {\n			return value;\n		},\n		disabled: () => disabled || root.disabled(),\n		open: () => root.isOpen(value),\n		get triggerId() {\n			return `${root.baseId}-trigger-${value}`;\n		},\n		get contentId() {\n			return `${root.baseId}-content-${value}`;\n		}\n	});\n\n	let open = $derived(root.isOpen(value));\n</script>\n\n<div\n	class={className}\n	data-state={open ? 'open' : 'closed'}\n	data-disabled={disabled || root.disabled() || undefined}\n>\n	{#if children}{@render children({ open })}{/if}\n</div>\n",
+        "AccordionItem.svelte": "<script lang=\"ts\">\n	import { getAccordionRoot, setAccordionItem } from './context.js';\n\n	interface Props {\n		children?: import('svelte').Snippet<[{ open: boolean }]>;\n		value: string;\n		disabled?: boolean;\n		class?: string;\n	}\n\n	let { children, value, disabled = false, class: className = '' }: Props = $props();\n\n	const root = getAccordionRoot();\n\n	setAccordionItem({\n		get value() {\n			return value;\n		},\n		disabled: () => disabled || root.disabled(),\n		open: () => root.isOpen(value),\n		get triggerId() {\n			return `${root.baseId}-trigger-${value}`;\n		},\n		get contentId() {\n			return `${root.baseId}-content-${value}`;\n		}\n	});\n\n	let open = $derived(root.isOpen(value));\n</script>\n\n<div\n	class={className}\n	data-state={open ? 'open' : 'closed'}\n	data-disabled={disabled || root.disabled() || undefined}\n>\n	{#if children}{@render children({ open })}{/if}\n</div>\n",
         "AccordionTrigger.svelte": `<script lang="ts">
 	import { getAccordionRoot, getAccordionItem } from './context.js';
 	import { interactiveStateAttrs, widgetAttrs, mergeAttrs } from '$utils/a11y/index.js';
@@ -9297,7 +9304,6 @@ var BUNDLED_DATA = {
 </script>
 
 {#if visible}
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<div
 		{id}
 		role="option"
@@ -9419,7 +9425,7 @@ var BUNDLED_DATA = {
 <a
 	{href}
 	target={newTab ? '_blank' : undefined}
-	rel={newTab ? 'noopener noreferrer' : undefined}
+	rel="external noopener noreferrer"
 	class={className}
 	aria-label={ariaLabel}
 	aria-describedby={ariaDescribedby}
@@ -9479,7 +9485,6 @@ var BUNDLED_DATA = {
 	}: Props = $props();
 
 	let isExternal = $derived(external ?? (typeof href === 'string' && /^https?:\\/\\//i.test(href)));
-
 	let computedTarget = $derived(target ?? (isExternal ? '_blank' : undefined));
 	let computedRel = $derived(rel ?? (isExternal ? 'noopener noreferrer' : undefined));
 
@@ -10245,9 +10250,9 @@ var BUNDLED_DATA = {
 			onkeydown={onPanelKey}
 			{@attach panelRef}
 		>
-			{#each items as it, i}
+			{#each items as it, i (i)}
 				{#if it.separator}
-					<div role="separator" class={separatorClass}></div>
+					<hr class={separatorClass} />
 				{:else if item}
 					<!-- svelte-ignore a11y_click_events_have_key_events -->
 					<div
@@ -10574,7 +10579,7 @@ var BUNDLED_DATA = {
 </script>
 
 {#if open}
-	<div
+	<section
 		{role}
 		aria-live={live ?? (role === 'alert' ? 'assertive' : role === 'status' ? 'polite' : undefined)}
 		data-variant={variant}
@@ -10591,7 +10596,7 @@ var BUNDLED_DATA = {
 		{#if dismissible}
 			<button type="button" aria-label="Dismiss banner" onclick={dismiss}>\xD7</button>
 		{/if}
-	</div>
+	</section>
 {/if}
 `,
         "index.ts": "export { default as Banner } from './Banner.svelte';\n"
@@ -10971,7 +10976,7 @@ var BUNDLED_DATA = {
       "slug": "tag",
       "files": {
         "Tag.svelte": `<script lang="ts">
-	import { labelAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from '$utils/a11y/index.js';
+	import { labelAttrs, interactiveStateAttrs, mergeAttrs } from '$utils/a11y/index.js';
 
 	interface Props {
 		children?: import('svelte').Snippet;
@@ -11498,7 +11503,6 @@ var BUNDLED_DATA = {
 	}
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <section
 	aria-roledescription="carousel"
 	class={className}
@@ -11569,7 +11573,7 @@ var BUNDLED_DATA = {
 	onkeydown={onKeydown}
 	bind:this={listEl}
 >
-	{#each Array(ctx.count()) as _, i (i)}
+	{#each Array.from({ length: ctx.count() }, (_, idx) => idx) as i (i)}
 		{@const active = ctx.index() === i}
 		<button
 			type="button"
@@ -11758,7 +11762,8 @@ var BUNDLED_DATA = {
 				class={lineNumbersClass}
 				aria-hidden="true"
 				data-line-numbers
-				>{#each lines as _, i}{i + 1}{#if i < lines.length - 1}{'\\n'}{/if}{/each}</span
+				>{#each Array.from({ length: lines.length }, (_, n) => n) as i (i)}{i +
+						1}{#if i < lines.length - 1}{/if}{/each}</span
 			><code class={codeClass}>{code}</code>{:else}<code class={codeClass}>{code}</code>{/if}</pre>
 </div>
 `,
@@ -11770,7 +11775,7 @@ var BUNDLED_DATA = {
       "category": "display",
       "slug": "compare",
       "files": {
-        "Compare.svelte": "<script lang=\"ts\">\n	import type { Attachment } from 'svelte/attachments';\n	import { labelAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from '$utils/a11y/index.js';\n\n	interface Props {\n		before: import('svelte').Snippet;\n		after: import('svelte').Snippet;\n		handle?: import('svelte').Snippet<[{ position: number; dragging: boolean }]>;\n		position?: number;\n		min?: number;\n		max?: number;\n		step?: number;\n		largeStep?: number;\n		orientation?: 'horizontal' | 'vertical';\n		disabled?: boolean;\n		class?: string;\n		beforeClass?: string;\n		afterClass?: string;\n		handleClass?: string;\n		'aria-label'?: string;\n		'aria-labelledby'?: string;\n		'aria-valuetext'?: string;\n		onChange?: (position: number) => void;\n	}\n\n	let {\n		before,\n		after,\n		handle,\n		position = $bindable(50),\n		min = 0,\n		max = 100,\n		step = 2,\n		largeStep = 10,\n		orientation = 'horizontal',\n		disabled = false,\n		class: className = '',\n		beforeClass = '',\n		afterClass = '',\n		handleClass = '',\n		'aria-label': ariaLabel = 'Before and after comparison',\n		'aria-labelledby': ariaLabelledby,\n		'aria-valuetext': ariaValuetext,\n		onChange\n	}: Props = $props();\n\n	let dragging = $state(false);\n	let containerEl: HTMLElement | null = $state(null);\n	let lastCoord = 0;\n	let containerSize = 0;\n\n	const horiz = $derived(orientation === 'horizontal');\n\n	function clamp(v: number): number {\n		return Math.min(max, Math.max(min, v));\n	}\n\n	function setPosition(v: number) {\n		const next = clamp(v);\n		if (next !== position) {\n			position = next;\n			onChange?.(next);\n		}\n	}\n\n	const attach: Attachment<HTMLDivElement> = (node) => {\n		containerEl = node;\n		return () => {\n			containerEl = null;\n		};\n	};\n\n	function refreshSize() {\n		if (!containerEl) {\n			containerSize = 0;\n			return;\n		}\n		const rect = containerEl.getBoundingClientRect();\n		containerSize = horiz ? rect.width : rect.height;\n	}\n\n	function pointFromEvent(e: PointerEvent): number {\n		return horiz ? e.clientX : e.clientY;\n	}\n\n	function pctFromAbsolute(e: PointerEvent): number {\n		if (!containerEl) return position;\n		const rect = containerEl.getBoundingClientRect();\n		const offset = horiz ? e.clientX - rect.left : e.clientY - rect.top;\n		const size = horiz ? rect.width : rect.height;\n		if (size <= 0) return position;\n		return (offset / size) * 100;\n	}\n\n	function onTrackPointerDown(e: PointerEvent) {\n		if (disabled) return;\n		e.preventDefault();\n		dragging = true;\n		refreshSize();\n		lastCoord = pointFromEvent(e);\n		setPosition(pctFromAbsolute(e));\n		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n	}\n\n	function onHandlePointerDown(e: PointerEvent) {\n		if (disabled) return;\n		e.preventDefault();\n		e.stopPropagation();\n		dragging = true;\n		refreshSize();\n		lastCoord = pointFromEvent(e);\n		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n	}\n\n	function onPointerMove(e: PointerEvent) {\n		if (!dragging || containerSize <= 0) return;\n		const cur = pointFromEvent(e);\n		const deltaPx = cur - lastCoord;\n		lastCoord = cur;\n		if (deltaPx === 0) return;\n		const deltaPct = (deltaPx / containerSize) * 100;\n		setPosition(position + deltaPct);\n	}\n\n	function onPointerUp(e: PointerEvent) {\n		if (!dragging) return;\n		dragging = false;\n		try {\n			(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);\n		} catch {\n			/* noop */\n		}\n	}\n\n	function onKeydown(e: KeyboardEvent) {\n		if (disabled) return;\n		const incKey = horiz ? 'ArrowRight' : 'ArrowDown';\n		const decKey = horiz ? 'ArrowLeft' : 'ArrowUp';\n		let delta = 0;\n		if (e.key === incKey) delta = step;\n		else if (e.key === decKey) delta = -step;\n		else if (e.key === 'PageDown') delta = largeStep;\n		else if (e.key === 'PageUp') delta = -largeStep;\n		else if (e.key === 'Home') {\n			e.preventDefault();\n			setPosition(min);\n			return;\n		} else if (e.key === 'End') {\n			e.preventDefault();\n			setPosition(max);\n			return;\n		} else {\n			return;\n		}\n		e.preventDefault();\n		setPosition(position + delta);\n	}\n\n	const afterClipStyle = $derived(\n		horiz\n			? `clip-path:inset(0 ${100 - position}% 0 0);`\n			: `clip-path:inset(0 0 ${100 - position}% 0);`\n	);\n\n	const handleStyle = $derived(\n		horiz\n			? `left:${position}%;top:0;bottom:0;transform:translateX(-50%);`\n			: `top:${position}%;left:0;right:0;transform:translateY(-50%);`\n	);\n</script>\n\n<!-- svelte-ignore a11y_no_static_element_interactions -->\n<div\n	{@attach attach}\n	class={className}\n	data-orientation={orientation}\n	data-dragging={dragging || undefined}\n	data-disabled={disabled || undefined}\n	style=\"position:relative;overflow:hidden;touch-action:none;\"\n	onpointerdown={onTrackPointerDown}\n	onpointermove={onPointerMove}\n	onpointerup={onPointerUp}\n	onpointercancel={onPointerUp}\n>\n	<div class={beforeClass} data-layer=\"before\" style=\"position:absolute;inset:0;\">\n		{@render before()}\n	</div>\n	<div class={afterClass} data-layer=\"after\" style={`position:absolute;inset:0;${afterClipStyle}`}>\n		{@render after()}\n	</div>\n\n	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->\n	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->\n	<div\n		role=\"slider\"\n		tabindex={disabled ? -1 : 0}\n		data-dragging={dragging || undefined}\n		data-orientation={orientation}\n		class={handleClass}\n		style={`position:absolute;${handleStyle}`}\n		onpointerdown={onHandlePointerDown}\n		onpointermove={onPointerMove}\n		onpointerup={onPointerUp}\n		onpointercancel={onPointerUp}\n		onkeydown={onKeydown}\n		{...mergeAttrs(\n			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }),\n			interactiveStateAttrs({ disabled }),\n			widgetAttrs({\n				orientation,\n				valuenow: Math.round(position),\n				valuemin: min,\n				valuemax: max,\n				valuetext: ariaValuetext\n			})\n		)}\n	>\n		{#if handle}\n			{@render handle({ position, dragging })}\n		{/if}\n	</div>\n</div>\n",
+        "Compare.svelte": "<script lang=\"ts\">\n	import type { Attachment } from 'svelte/attachments';\n	import { labelAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from '$utils/a11y/index.js';\n\n	interface Props {\n		before: import('svelte').Snippet;\n		after: import('svelte').Snippet;\n		handle?: import('svelte').Snippet<[{ position: number; dragging: boolean }]>;\n		position?: number;\n		min?: number;\n		max?: number;\n		step?: number;\n		largeStep?: number;\n		orientation?: 'horizontal' | 'vertical';\n		disabled?: boolean;\n		class?: string;\n		beforeClass?: string;\n		afterClass?: string;\n		handleClass?: string;\n		'aria-label'?: string;\n		'aria-labelledby'?: string;\n		'aria-valuetext'?: string;\n		onChange?: (position: number) => void;\n	}\n\n	let {\n		before,\n		after,\n		handle,\n		position = $bindable(50),\n		min = 0,\n		max = 100,\n		step = 2,\n		largeStep = 10,\n		orientation = 'horizontal',\n		disabled = false,\n		class: className = '',\n		beforeClass = '',\n		afterClass = '',\n		handleClass = '',\n		'aria-label': ariaLabel = 'Before and after comparison',\n		'aria-labelledby': ariaLabelledby,\n		'aria-valuetext': ariaValuetext,\n		onChange\n	}: Props = $props();\n\n	let dragging = $state(false);\n	let containerEl: HTMLElement | null = $state(null);\n	let lastCoord = 0;\n	let containerSize = 0;\n\n	const horiz = $derived(orientation === 'horizontal');\n\n	function clamp(v: number): number {\n		return Math.min(max, Math.max(min, v));\n	}\n\n	function setPosition(v: number) {\n		const next = clamp(v);\n		if (next !== position) {\n			position = next;\n			onChange?.(next);\n		}\n	}\n\n	const attach: Attachment<HTMLDivElement> = (node) => {\n		containerEl = node;\n		return () => {\n			containerEl = null;\n		};\n	};\n\n	function refreshSize() {\n		if (!containerEl) {\n			containerSize = 0;\n			return;\n		}\n		const rect = containerEl.getBoundingClientRect();\n		containerSize = horiz ? rect.width : rect.height;\n	}\n\n	function pointFromEvent(e: PointerEvent): number {\n		return horiz ? e.clientX : e.clientY;\n	}\n\n	function pctFromAbsolute(e: PointerEvent): number {\n		if (!containerEl) return position;\n		const rect = containerEl.getBoundingClientRect();\n		const offset = horiz ? e.clientX - rect.left : e.clientY - rect.top;\n		const size = horiz ? rect.width : rect.height;\n		if (size <= 0) return position;\n		return (offset / size) * 100;\n	}\n\n	function onTrackPointerDown(e: PointerEvent) {\n		if (disabled) return;\n		e.preventDefault();\n		dragging = true;\n		refreshSize();\n		lastCoord = pointFromEvent(e);\n		setPosition(pctFromAbsolute(e));\n		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n	}\n\n	function onHandlePointerDown(e: PointerEvent) {\n		if (disabled) return;\n		e.preventDefault();\n		e.stopPropagation();\n		dragging = true;\n		refreshSize();\n		lastCoord = pointFromEvent(e);\n		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n	}\n\n	function onPointerMove(e: PointerEvent) {\n		if (!dragging || containerSize <= 0) return;\n		const cur = pointFromEvent(e);\n		const deltaPx = cur - lastCoord;\n		lastCoord = cur;\n		if (deltaPx === 0) return;\n		const deltaPct = (deltaPx / containerSize) * 100;\n		setPosition(position + deltaPct);\n	}\n\n	function onPointerUp(e: PointerEvent) {\n		if (!dragging) return;\n		dragging = false;\n		try {\n			(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);\n		} catch {\n			/* noop */\n		}\n	}\n\n	function onKeydown(e: KeyboardEvent) {\n		if (disabled) return;\n		const incKey = horiz ? 'ArrowRight' : 'ArrowDown';\n		const decKey = horiz ? 'ArrowLeft' : 'ArrowUp';\n		if (e.key === 'Home') {\n			e.preventDefault();\n			setPosition(min);\n			return;\n		} else if (e.key === 'End') {\n			e.preventDefault();\n			setPosition(max);\n			return;\n		}\n		let delta;\n		if (e.key === incKey) delta = step;\n		else if (e.key === decKey) delta = -step;\n		else if (e.key === 'PageDown') delta = largeStep;\n		else if (e.key === 'PageUp') delta = -largeStep;\n		else return;\n		e.preventDefault();\n		setPosition(position + delta);\n	}\n\n	const afterClipStyle = $derived(\n		horiz\n			? `clip-path:inset(0 ${100 - position}% 0 0);`\n			: `clip-path:inset(0 0 ${100 - position}% 0);`\n	);\n\n	const handleStyle = $derived(\n		horiz\n			? `left:${position}%;top:0;bottom:0;transform:translateX(-50%);`\n			: `top:${position}%;left:0;right:0;transform:translateY(-50%);`\n	);\n</script>\n\n<!-- svelte-ignore a11y_no_static_element_interactions -->\n<div\n	{@attach attach}\n	class={className}\n	data-orientation={orientation}\n	data-dragging={dragging || undefined}\n	data-disabled={disabled || undefined}\n	style=\"position:relative;overflow:hidden;touch-action:none;\"\n	onpointerdown={onTrackPointerDown}\n	onpointermove={onPointerMove}\n	onpointerup={onPointerUp}\n	onpointercancel={onPointerUp}\n>\n	<div class={beforeClass} data-layer=\"before\" style=\"position:absolute;inset:0;\">\n		{@render before()}\n	</div>\n	<div class={afterClass} data-layer=\"after\" style={`position:absolute;inset:0;${afterClipStyle}`}>\n		{@render after()}\n	</div>\n\n	<div\n		role=\"slider\"\n		tabindex={disabled ? -1 : 0}\n		data-dragging={dragging || undefined}\n		data-orientation={orientation}\n		class={handleClass}\n		style={`position:absolute;${handleStyle}`}\n		onpointerdown={onHandlePointerDown}\n		onpointermove={onPointerMove}\n		onpointerup={onPointerUp}\n		onpointercancel={onPointerUp}\n		onkeydown={onKeydown}\n		{...mergeAttrs(\n			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }),\n			interactiveStateAttrs({ disabled }),\n			widgetAttrs({\n				orientation,\n				valuenow: Math.round(position),\n				valuemin: min,\n				valuemax: max,\n				valuetext: ariaValuetext\n			})\n		)}\n	>\n		{#if handle}\n			{@render handle({ position, dragging })}\n		{/if}\n	</div>\n</div>\n",
         "index.ts": "export { default as Compare } from './Compare.svelte';\n"
       }
     },
@@ -11972,7 +11977,7 @@ var BUNDLED_DATA = {
 
 {#if keys && keys.length > 0}
 	<kbd class={className} aria-label={ariaLabel ?? keys.join(' then ')}>
-		{#each keys as key, i}
+		{#each keys as key, i (i)}
 			<kbd>{key}</kbd>{#if i < keys.length - 1}<span aria-hidden="true">{separator}</span>{/if}
 		{/each}
 	</kbd>
@@ -12039,7 +12044,7 @@ var BUNDLED_DATA = {
       "category": "display",
       "slug": "stat-card",
       "files": {
-        "StatCard.svelte": "<script lang=\"ts\">\n	import { generateCounterId } from '$utils/a11y/id.js';\n	import { labelAttrs, mergeAttrs } from '$utils/a11y/index.js';\n\n	type Trend = 'up' | 'down' | 'flat';\n\n	interface Props {\n		label: string;\n		value: string | number;\n		valueClass?: string;\n		labelClass?: string;\n		hint?: string;\n		change?: string | number;\n		trend?: Trend;\n		icon?: import('svelte').Snippet;\n		actions?: import('svelte').Snippet;\n		change_snippet?: import('svelte').Snippet<[{ trend: Trend; change: string | number }]>;\n		class?: string;\n		hintClass?: string;\n		changeClass?: string;\n		'aria-label'?: string;\n		'aria-describedby'?: string;\n	}\n\n	let {\n		label,\n		value,\n		valueClass = '',\n		labelClass = '',\n		hint,\n		change,\n		trend,\n		icon,\n		actions,\n		change_snippet,\n		class: className = '',\n		hintClass = '',\n		changeClass = '',\n		'aria-label': ariaLabel,\n		'aria-describedby': ariaDescribedby\n	}: Props = $props();\n\n	const labelId = generateCounterId('stat-label');\n	const valueId = generateCounterId('stat-value');\n\n	const trendText = $derived(trend === 'up' ? ' increased' : trend === 'down' ? ' decreased' : '');\n	const inferredLabel = $derived(`${label}: ${value}${trendText}`);\n</script>\n\n<div\n	role=\"group\"\n	class={className}\n	data-trend={trend}\n	{...mergeAttrs(\n		labelAttrs({\n			label: ariaLabel,\n			labelledby: labelId,\n			describedby: ariaDescribedby ?? valueId\n		})\n	)}\n>\n	{#if icon}{@render icon()}{/if}\n	<div>\n		<div id={labelId} class={labelClass}>{label}</div>\n		<div id={valueId} class={valueClass} {...labelAttrs({ label: inferredLabel })}>{value}</div>\n		{#if change !== undefined}\n			{#if change_snippet}\n				{@render change_snippet({ trend: trend ?? 'flat', change })}\n			{:else}\n				<div class={changeClass} data-trend={trend}>{change}</div>\n			{/if}\n		{/if}\n		{#if hint}<div class={hintClass}>{hint}</div>{/if}\n	</div>\n	{#if actions}{@render actions()}{/if}\n</div>\n",
+        "StatCard.svelte": "<script lang=\"ts\">\n	import { generateCounterId } from '$utils/a11y/id.js';\n	import { labelAttrs, mergeAttrs } from '$utils/a11y/index.js';\n\n	type Trend = 'up' | 'down' | 'flat';\n\n	interface Props {\n		label: string;\n		value: string | number;\n		valueClass?: string;\n		labelClass?: string;\n		hint?: string;\n		change?: string | number;\n		trend?: Trend;\n		icon?: import('svelte').Snippet;\n		actions?: import('svelte').Snippet;\n		change_snippet?: import('svelte').Snippet<[{ trend: Trend; change: string | number }]>;\n		class?: string;\n		hintClass?: string;\n		changeClass?: string;\n		'aria-label'?: string;\n		'aria-describedby'?: string;\n	}\n\n	let {\n		label,\n		value,\n		valueClass = '',\n		labelClass = '',\n		hint,\n		change,\n		trend,\n		icon,\n		actions,\n		change_snippet,\n		class: className = '',\n		hintClass = '',\n		changeClass = '',\n		'aria-label': ariaLabel,\n		'aria-describedby': ariaDescribedby\n	}: Props = $props();\n\n	const labelId = generateCounterId('stat-label');\n	const valueId = generateCounterId('stat-value');\n\n	const trendText = $derived(trend === 'up' ? ' increased' : trend === 'down' ? ' decreased' : '');\n	const inferredLabel = $derived(`${label}: ${value}${trendText}`);\n</script>\n\n<article\n	class={className}\n	data-trend={trend}\n	{...mergeAttrs(\n		labelAttrs({\n			label: ariaLabel,\n			labelledby: labelId,\n			describedby: ariaDescribedby ?? valueId\n		})\n	)}\n>\n	{#if icon}{@render icon()}{/if}\n	<div>\n		<div id={labelId} class={labelClass}>{label}</div>\n		<div id={valueId} class={valueClass} {...labelAttrs({ label: inferredLabel })}>{value}</div>\n		{#if change !== undefined}\n			{#if change_snippet}\n				{@render change_snippet({ trend: trend ?? 'flat', change })}\n			{:else}\n				<div class={changeClass} data-trend={trend}>{change}</div>\n			{/if}\n		{/if}\n		{#if hint}<div class={hintClass}>{hint}</div>{/if}\n	</div>\n	{#if actions}{@render actions()}{/if}\n</article>\n",
         "index.ts": "export { default as StatCard } from './StatCard.svelte';\n"
       }
     },
@@ -12278,8 +12283,6 @@ var BUNDLED_DATA = {
 	const hasChildren = $derived(!!children);
 	const expanded = $derived(ctx.isExpanded(id));
 	const selected = $derived(ctx.isSelected(id));
-	const focused = $derived(ctx.focused() === id);
-
 	let itemEl = $state<HTMLLIElement | null>(null);
 
 	function onClick(e: MouseEvent) {
@@ -12302,7 +12305,6 @@ var BUNDLED_DATA = {
 	}
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
 <li
 	bind:this={itemEl}
 	role="treeitem"
@@ -12726,7 +12728,7 @@ var BUNDLED_DATA = {
 			onkeydown={onMenuKey}
 			{@attach menuRef}
 		>
-			{#each items as it, i}
+			{#each items as it, i (i)}
 				{#if it.separator}
 					<div role="separator" class={separatorClass}></div>
 				{:else if item}
@@ -13939,7 +13941,6 @@ var BUNDLED_DATA = {
 	}
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 {#if as === 'span'}
 	<span
 		class={className}
@@ -14240,7 +14241,7 @@ var BUNDLED_DATA = {
       "category": "interactive",
       "slug": "resizable",
       "files": {
-        "Resizable.svelte": "<script lang=\"ts\">\n	import { labelAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from '$utils/a11y/index.js';\n\n	type Side = 'right' | 'bottom' | 'left' | 'top';\n\n	interface Props {\n		children?: import('svelte').Snippet;\n		size?: number;\n		minSize?: number;\n		maxSize?: number;\n		side?: Side;\n		step?: number;\n		largeStep?: number;\n		disabled?: boolean;\n		class?: string;\n		handleClass?: string;\n		'aria-label'?: string;\n		'aria-labelledby'?: string;\n		onResize?: (size: number) => void;\n	}\n\n	let {\n		children,\n		size = $bindable(200),\n		minSize = 50,\n		maxSize = Number.POSITIVE_INFINITY,\n		side = 'right',\n		step = 8,\n		largeStep = 32,\n		disabled = false,\n		class: className = '',\n		handleClass = '',\n		'aria-label': ariaLabel = 'Resize',\n		'aria-labelledby': ariaLabelledby,\n		onResize\n	}: Props = $props();\n\n	const axis = $derived<'x' | 'y'>(side === 'left' || side === 'right' ? 'x' : 'y');\n	const orientation = $derived<'vertical' | 'horizontal'>(axis === 'x' ? 'vertical' : 'horizontal');\n\n	let dragging = $state(false);\n	let lastCoord = 0;\n\n	function clamp(v: number): number {\n		const max = Number.isFinite(maxSize) ? maxSize : v;\n		return Math.min(max, Math.max(minSize, v));\n	}\n\n	function commit(v: number) {\n		const next = clamp(v);\n		if (next !== size) {\n			size = next;\n			onResize?.(next);\n		}\n	}\n\n	function onPointerDown(e: PointerEvent) {\n		if (disabled) return;\n		e.preventDefault();\n		dragging = true;\n		lastCoord = axis === 'x' ? e.clientX : e.clientY;\n		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n	}\n\n	function onPointerMove(e: PointerEvent) {\n		if (!dragging) return;\n		const cur = axis === 'x' ? e.clientX : e.clientY;\n		let delta = cur - lastCoord;\n		if (side === 'left' || side === 'top') delta = -delta;\n		lastCoord = cur;\n		if (delta === 0) return;\n		commit(size + delta);\n	}\n\n	function onPointerUp(e: PointerEvent) {\n		if (!dragging) return;\n		dragging = false;\n		try {\n			(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);\n		} catch {\n			/* noop */\n		}\n	}\n\n	function onKeydown(e: KeyboardEvent) {\n		if (disabled) return;\n		const incKey = axis === 'x' ? 'ArrowRight' : 'ArrowDown';\n		const decKey = axis === 'x' ? 'ArrowLeft' : 'ArrowUp';\n		let delta = 0;\n\n		if (e.key === incKey) delta = step;\n		else if (e.key === decKey) delta = -step;\n		else if (e.key === 'PageDown') delta = largeStep;\n		else if (e.key === 'PageUp') delta = -largeStep;\n		else if (e.key === 'Home') {\n			e.preventDefault();\n			commit(minSize);\n			return;\n		} else if (e.key === 'End') {\n			e.preventDefault();\n			if (Number.isFinite(maxSize)) commit(maxSize);\n			return;\n		} else {\n			return;\n		}\n\n		e.preventDefault();\n		commit(size + delta);\n	}\n\n	const containerStyle = $derived(axis === 'x' ? `width:${size}px` : `height:${size}px`);\n</script>\n\n<div\n	class={className}\n	style={containerStyle}\n	data-side={side}\n	data-dragging={dragging || undefined}\n>\n	{#if children}{@render children()}{/if}\n	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->\n	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->\n	<div\n		role=\"separator\"\n		tabindex={disabled ? -1 : 0}\n		data-dragging={dragging || undefined}\n		data-side={side}\n		class={handleClass}\n		onpointerdown={onPointerDown}\n		onpointermove={onPointerMove}\n		onpointerup={onPointerUp}\n		onpointercancel={onPointerUp}\n		onkeydown={onKeydown}\n		{...mergeAttrs(\n			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }),\n			interactiveStateAttrs({ disabled }),\n			widgetAttrs({\n				orientation,\n				valuenow: size,\n				valuemin: minSize,\n				valuemax: Number.isFinite(maxSize) ? maxSize : undefined\n			})\n		)}\n	></div>\n</div>\n",
+        "Resizable.svelte": "<script lang=\"ts\">\n	import { labelAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from '$utils/a11y/index.js';\n\n	type Side = 'right' | 'bottom' | 'left' | 'top';\n\n	interface Props {\n		children?: import('svelte').Snippet;\n		size?: number;\n		minSize?: number;\n		maxSize?: number;\n		side?: Side;\n		step?: number;\n		largeStep?: number;\n		disabled?: boolean;\n		class?: string;\n		handleClass?: string;\n		'aria-label'?: string;\n		'aria-labelledby'?: string;\n		onResize?: (size: number) => void;\n	}\n\n	let {\n		children,\n		size = $bindable(200),\n		minSize = 50,\n		maxSize = Number.POSITIVE_INFINITY,\n		side = 'right',\n		step = 8,\n		largeStep = 32,\n		disabled = false,\n		class: className = '',\n		handleClass = '',\n		'aria-label': ariaLabel = 'Resize',\n		'aria-labelledby': ariaLabelledby,\n		onResize\n	}: Props = $props();\n\n	const axis = $derived<'x' | 'y'>(side === 'left' || side === 'right' ? 'x' : 'y');\n	const orientation = $derived<'vertical' | 'horizontal'>(axis === 'x' ? 'vertical' : 'horizontal');\n\n	let dragging = $state(false);\n	let lastCoord = 0;\n\n	function clamp(v: number): number {\n		const max = Number.isFinite(maxSize) ? maxSize : v;\n		return Math.min(max, Math.max(minSize, v));\n	}\n\n	function commit(v: number) {\n		const next = clamp(v);\n		if (next !== size) {\n			size = next;\n			onResize?.(next);\n		}\n	}\n\n	function onPointerDown(e: PointerEvent) {\n		if (disabled) return;\n		e.preventDefault();\n		dragging = true;\n		lastCoord = axis === 'x' ? e.clientX : e.clientY;\n		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n	}\n\n	function onPointerMove(e: PointerEvent) {\n		if (!dragging) return;\n		const cur = axis === 'x' ? e.clientX : e.clientY;\n		let delta = cur - lastCoord;\n		if (side === 'left' || side === 'top') delta = -delta;\n		lastCoord = cur;\n		if (delta === 0) return;\n		commit(size + delta);\n	}\n\n	function onPointerUp(e: PointerEvent) {\n		if (!dragging) return;\n		dragging = false;\n		try {\n			(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);\n		} catch {\n			/* noop */\n		}\n	}\n\n	function onKeydown(e: KeyboardEvent) {\n		if (disabled) return;\n		const incKey = axis === 'x' ? 'ArrowRight' : 'ArrowDown';\n		const decKey = axis === 'x' ? 'ArrowLeft' : 'ArrowUp';\n		if (e.key === 'Home') {\n			e.preventDefault();\n			commit(minSize);\n			return;\n		} else if (e.key === 'End') {\n			e.preventDefault();\n			if (Number.isFinite(maxSize)) commit(maxSize);\n			return;\n		}\n		let delta;\n		if (e.key === incKey) delta = step;\n		else if (e.key === decKey) delta = -step;\n		else if (e.key === 'PageDown') delta = largeStep;\n		else if (e.key === 'PageUp') delta = -largeStep;\n		else return;\n\n		e.preventDefault();\n		commit(size + delta);\n	}\n\n	const containerStyle = $derived(axis === 'x' ? `width:${size}px` : `height:${size}px`);\n</script>\n\n<div\n	class={className}\n	style={containerStyle}\n	data-side={side}\n	data-dragging={dragging || undefined}\n>\n	{#if children}{@render children()}{/if}\n	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->\n	<div\n		role=\"separator\"\n		tabindex={disabled ? -1 : 0}\n		data-dragging={dragging || undefined}\n		data-side={side}\n		class={handleClass}\n		onpointerdown={onPointerDown}\n		onpointermove={onPointerMove}\n		onpointerup={onPointerUp}\n		onpointercancel={onPointerUp}\n		onkeydown={onKeydown}\n		{...mergeAttrs(\n			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }),\n			interactiveStateAttrs({ disabled }),\n			widgetAttrs({\n				orientation,\n				valuenow: size,\n				valuemin: minSize,\n				valuemax: Number.isFinite(maxSize) ? maxSize : undefined\n			})\n		)}\n	></div>\n</div>\n",
         "index.ts": "export { default as Resizable } from './Resizable.svelte';\n"
       }
     },
@@ -14561,7 +14562,7 @@ var BUNDLED_DATA = {
 	{#if children}{@render children()}{/if}
 </div>
 `,
-        "SplitViewHandle.svelte": "<script lang=\"ts\">\n	import type { Attachment } from 'svelte/attachments';\n	import { getSplitViewContext } from './SplitView.svelte';\n	import { labelAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from '$utils/a11y/index.js';\n\n	interface Props {\n		class?: string;\n		step?: number;\n		largeStep?: number;\n		'aria-label'?: string;\n		'aria-labelledby'?: string;\n	}\n\n	let {\n		class: className = '',\n		step = 2,\n		largeStep = 10,\n		'aria-label': ariaLabel = 'Resize panes',\n		'aria-labelledby': ariaLabelledby\n	}: Props = $props();\n\n	const ctx = getSplitViewContext();\n	let handleEl: HTMLElement | null = $state(null);\n	let lastCoord = 0;\n	let containerSize = 0;\n\n	function findContainer(node: HTMLElement): HTMLElement {\n		return (node.parentElement as HTMLElement) ?? node;\n	}\n\n	const attach: Attachment<HTMLDivElement> = (node) => {\n		handleEl = node;\n		return () => {\n			handleEl = null;\n		};\n	};\n\n	function onPointerDown(e: PointerEvent) {\n		if (ctx.disabled()) return;\n		e.preventDefault();\n		ctx.setDragging(true);\n		const horiz = ctx.orientation() === 'horizontal';\n		lastCoord = horiz ? e.clientX : e.clientY;\n		const container = handleEl ? findContainer(handleEl) : null;\n		const rect = container?.getBoundingClientRect();\n		containerSize = rect ? (horiz ? rect.width : rect.height) : 0;\n		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n	}\n\n	function onPointerMove(e: PointerEvent) {\n		if (!ctx.dragging()) return;\n		if (containerSize <= 0) return;\n		const horiz = ctx.orientation() === 'horizontal';\n		const cur = horiz ? e.clientX : e.clientY;\n		const deltaPx = cur - lastCoord;\n		lastCoord = cur;\n		if (deltaPx === 0) return;\n		const deltaPct = (deltaPx / containerSize) * 100;\n		ctx.setSize(ctx.size() + deltaPct);\n	}\n\n	function onPointerUp(e: PointerEvent) {\n		if (!ctx.dragging()) return;\n		ctx.setDragging(false);\n		try {\n			(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);\n		} catch {\n			/* noop */\n		}\n	}\n\n	function onKeydown(e: KeyboardEvent) {\n		if (ctx.disabled()) return;\n		const horiz = ctx.orientation() === 'horizontal';\n		const incKey = horiz ? 'ArrowRight' : 'ArrowDown';\n		const decKey = horiz ? 'ArrowLeft' : 'ArrowUp';\n		let delta = 0;\n		if (e.key === incKey) delta = step;\n		else if (e.key === decKey) delta = -step;\n		else if (e.key === 'PageDown') delta = largeStep;\n		else if (e.key === 'PageUp') delta = -largeStep;\n		else if (e.key === 'Home') {\n			e.preventDefault();\n			ctx.setSize(ctx.min());\n			return;\n		} else if (e.key === 'End') {\n			e.preventDefault();\n			ctx.setSize(ctx.max());\n			return;\n		} else {\n			return;\n		}\n		e.preventDefault();\n		ctx.setSize(ctx.size() + delta);\n	}\n</script>\n\n<!-- svelte-ignore a11y_no_noninteractive_tabindex -->\n<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->\n<div\n	{@attach attach}\n	role=\"separator\"\n	tabindex={ctx.disabled() ? -1 : 0}\n	data-dragging={ctx.dragging() || undefined}\n	data-orientation={ctx.orientation()}\n	class={className}\n	onpointerdown={onPointerDown}\n	onpointermove={onPointerMove}\n	onpointerup={onPointerUp}\n	onpointercancel={onPointerUp}\n	onkeydown={onKeydown}\n	{...mergeAttrs(\n		labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }),\n		interactiveStateAttrs({ disabled: ctx.disabled() }),\n		widgetAttrs({\n			orientation: ctx.orientation() === 'horizontal' ? 'vertical' : 'horizontal',\n			valuenow: Math.round(ctx.size()),\n			valuemin: ctx.min(),\n			valuemax: ctx.max(),\n			controls: `${ctx.firstPaneId} ${ctx.secondPaneId}`\n		})\n	)}\n></div>\n",
+        "SplitViewHandle.svelte": "<script lang=\"ts\">\n	import type { Attachment } from 'svelte/attachments';\n	import { getSplitViewContext } from './SplitView.svelte';\n	import { labelAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from '$utils/a11y/index.js';\n\n	interface Props {\n		class?: string;\n		step?: number;\n		largeStep?: number;\n		'aria-label'?: string;\n		'aria-labelledby'?: string;\n	}\n\n	let {\n		class: className = '',\n		step = 2,\n		largeStep = 10,\n		'aria-label': ariaLabel = 'Resize panes',\n		'aria-labelledby': ariaLabelledby\n	}: Props = $props();\n\n	const ctx = getSplitViewContext();\n	let handleEl: HTMLElement | null = $state(null);\n	let lastCoord = 0;\n	let containerSize = 0;\n\n	function findContainer(node: HTMLElement): HTMLElement {\n		return (node.parentElement as HTMLElement) ?? node;\n	}\n\n	const attach: Attachment<HTMLDivElement> = (node) => {\n		handleEl = node;\n		return () => {\n			handleEl = null;\n		};\n	};\n\n	function onPointerDown(e: PointerEvent) {\n		if (ctx.disabled()) return;\n		e.preventDefault();\n		ctx.setDragging(true);\n		const horiz = ctx.orientation() === 'horizontal';\n		lastCoord = horiz ? e.clientX : e.clientY;\n		const container = handleEl ? findContainer(handleEl) : null;\n		const rect = container?.getBoundingClientRect();\n		containerSize = rect ? (horiz ? rect.width : rect.height) : 0;\n		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n	}\n\n	function onPointerMove(e: PointerEvent) {\n		if (!ctx.dragging()) return;\n		if (containerSize <= 0) return;\n		const horiz = ctx.orientation() === 'horizontal';\n		const cur = horiz ? e.clientX : e.clientY;\n		const deltaPx = cur - lastCoord;\n		lastCoord = cur;\n		if (deltaPx === 0) return;\n		const deltaPct = (deltaPx / containerSize) * 100;\n		ctx.setSize(ctx.size() + deltaPct);\n	}\n\n	function onPointerUp(e: PointerEvent) {\n		if (!ctx.dragging()) return;\n		ctx.setDragging(false);\n		try {\n			(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);\n		} catch {\n			/* noop */\n		}\n	}\n\n	function onKeydown(e: KeyboardEvent) {\n		if (ctx.disabled()) return;\n		const horiz = ctx.orientation() === 'horizontal';\n		const incKey = horiz ? 'ArrowRight' : 'ArrowDown';\n		const decKey = horiz ? 'ArrowLeft' : 'ArrowUp';\n		if (e.key === 'Home') {\n			e.preventDefault();\n			ctx.setSize(ctx.min());\n			return;\n		} else if (e.key === 'End') {\n			e.preventDefault();\n			ctx.setSize(ctx.max());\n			return;\n		}\n		let delta;\n		if (e.key === incKey) delta = step;\n		else if (e.key === decKey) delta = -step;\n		else if (e.key === 'PageDown') delta = largeStep;\n		else if (e.key === 'PageUp') delta = -largeStep;\n		else return;\n		e.preventDefault();\n		ctx.setSize(ctx.size() + delta);\n	}\n</script>\n\n<!-- svelte-ignore a11y_no_noninteractive_tabindex -->\n<div\n	{@attach attach}\n	role=\"separator\"\n	tabindex={ctx.disabled() ? -1 : 0}\n	data-dragging={ctx.dragging() || undefined}\n	data-orientation={ctx.orientation()}\n	class={className}\n	onpointerdown={onPointerDown}\n	onpointermove={onPointerMove}\n	onpointerup={onPointerUp}\n	onpointercancel={onPointerUp}\n	onkeydown={onKeydown}\n	{...mergeAttrs(\n		labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }),\n		interactiveStateAttrs({ disabled: ctx.disabled() }),\n		widgetAttrs({\n			orientation: ctx.orientation() === 'horizontal' ? 'vertical' : 'horizontal',\n			valuenow: Math.round(ctx.size()),\n			valuemin: ctx.min(),\n			valuemax: ctx.max(),\n			controls: `${ctx.firstPaneId} ${ctx.secondPaneId}`\n		})\n	)}\n></div>\n",
         "SplitViewPane.svelte": "<script lang=\"ts\">\n	import { getSplitViewContext } from './SplitView.svelte';\n	import { labelAttrs } from '$utils/a11y/index.js';\n\n	interface Props {\n		children?: import('svelte').Snippet;\n		side: 'first' | 'second';\n		class?: string;\n		'aria-label'?: string;\n		'aria-labelledby'?: string;\n	}\n\n	let {\n		children,\n		side,\n		class: className = '',\n		'aria-label': ariaLabel,\n		'aria-labelledby': ariaLabelledby\n	}: Props = $props();\n\n	const ctx = getSplitViewContext();\n\n	const paneStyle = $derived.by(() => {\n		const horiz = ctx.orientation() === 'horizontal';\n		const size = ctx.size();\n		const dim = horiz ? 'width' : 'height';\n		const value = side === 'first' ? `${size}%` : `${100 - size}%`;\n		return `${dim}:${value};flex:0 0 ${value};`;\n	});\n\n	const paneId = $derived(side === 'first' ? ctx.firstPaneId : ctx.secondPaneId);\n</script>\n\n<div\n	id={paneId}\n	role=\"group\"\n	data-side={side}\n	class={className}\n	style={paneStyle}\n	{...labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby })}\n>\n	{#if children}{@render children()}{/if}\n</div>\n",
         "index.ts": "export { default as SplitView } from './SplitView.svelte';\nexport { default as SplitViewPane } from './SplitViewPane.svelte';\nexport { default as SplitViewHandle } from './SplitViewHandle.svelte';\nexport { getSplitViewContext, setSplitViewContext } from './SplitView.svelte';\nexport type { SplitViewContext } from './SplitView.svelte';\n"
       }
@@ -14918,13 +14919,14 @@ var BUNDLED_DATA = {
   ],
   files: {
     "components/index.ts": "/**\n * UI Components\n * @module components\n */\n\n// Form Components\nexport { Button } from './form/button/index.js';\nexport { Input } from './form/input/index.js';\nexport { Checkbox } from './form/checkbox/index.js';\nexport { Radio } from './form/radio/index.js';\nexport { Textarea } from './form/textarea/index.js';\nexport {\n	Select,\n	SelectTrigger,\n	SelectContent,\n	SelectOption,\n	getSelectContext,\n	setSelectContext\n} from './form/select/index.js';\nexport type { SelectContext, SelectOptionEntry } from './form/select/index.js';\nexport { Fieldset } from './form/fieldset/index.js';\nexport { RadioGroup, getRadioGroup, setRadioGroup } from './form/radio-group/index.js';\nexport type { RadioGroupContext } from './form/radio-group/index.js';\nexport { Form } from './form/form/index.js';\nexport { FieldError } from './form/field-error/index.js';\nexport { Label } from './form/label/index.js';\nexport { Switch } from './form/switch/index.js';\nexport { Slider } from './form/slider/index.js';\nexport { FileInput } from './form/file-input/index.js';\nexport { SearchInput } from './form/search-input/index.js';\nexport { NumberInput } from './form/number-input/index.js';\nexport { InputGroup, InputAddon } from './form/input-group/index.js';\nexport { Rating } from './form/rating/index.js';\nexport { IconButton } from './form/icon-button/index.js';\nexport { ToggleButton } from './form/toggle-button/index.js';\nexport { AutoComplete } from './form/auto-complete/index.js';\nexport type { AutoCompleteOption } from './form/auto-complete/index.js';\nexport { Calendar } from './form/calendar/index.js';\nexport type { CalendarDay, CalendarView } from './form/calendar/index.js';\nexport { DatePicker } from './form/date-picker/index.js';\nexport { DateRange } from './form/date-range/index.js';\nexport type { DateRangeValue } from './form/date-range/index.js';\nexport { DateRangePicker } from './form/date-range-picker/index.js';\nexport { TimePicker } from './form/time-picker/index.js';\nexport type { Time } from './form/time-picker/index.js';\nexport { ColorPicker } from './form/color-picker/index.js';\n\n// Navigation Components\nexport {\n	Tabs,\n	TabList,\n	Tab,\n	TabPanel,\n	getTabsContext,\n	setTabsContext\n} from './navigation/tabs/index.js';\nexport type { TabsContext } from './navigation/tabs/index.js';\nexport {\n	Accordion,\n	AccordionItem,\n	AccordionTrigger,\n	AccordionContent,\n	getAccordionRoot,\n	setAccordionRoot,\n	getAccordionItem,\n	setAccordionItem\n} from './navigation/accordion/index.js';\nexport type {\n	AccordionRootContext,\n	AccordionItemContext,\n	AccordionType\n} from './navigation/accordion/index.js';\nexport { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from './navigation/breadcrumb/index.js';\nexport { Pagination } from './navigation/pagination/index.js';\nexport { Link } from './navigation/link/index.js';\nexport { ExternalLink } from './navigation/external-link/index.js';\nexport { Navigation } from './navigation/navigation/index.js';\nexport { SubMenu } from './navigation/sub-menu/index.js';\nexport type { SubMenuItem } from './navigation/sub-menu/index.js';\nexport {\n	Menu,\n	MenuTrigger,\n	MenuContent,\n	MenuItem,\n	getMenuContext,\n	setMenuContext\n} from './navigation/menu/index.js';\nexport type { MenuContext, MenuItemEntry } from './navigation/menu/index.js';\nexport {\n	Stepper,\n	StepperStep,\n	getStepperContext,\n	setStepperContext\n} from './navigation/stepper/index.js';\nexport type { StepperContext } from './navigation/stepper/index.js';\nexport {\n	CommandMenu,\n	CommandMenuTrigger,\n	CommandMenuContent,\n	CommandMenuInput,\n	CommandMenuList,\n	CommandMenuItem,\n	CommandMenuGroup,\n	CommandMenuEmpty,\n	getCommandMenuContext,\n	setCommandMenuContext\n} from './navigation/command-menu/index.js';\nexport type { CommandMenuContext, CommandItemEntry } from './navigation/command-menu/index.js';\n\n// Feedback Components\nexport { Badge } from './feedback/badge/index.js';\nexport { Tag } from './feedback/tag/index.js';\nexport { Spinner } from './feedback/spinner/index.js';\nexport { Skeleton } from './feedback/skeleton/index.js';\nexport { Progress } from './feedback/progress/index.js';\nexport { Alert } from './feedback/alert/index.js';\nexport { Callout } from './feedback/callout/index.js';\nexport { Banner } from './feedback/banner/index.js';\nexport { InlineMessage } from './feedback/inline-message/index.js';\nexport { LiveRegion } from './feedback/live-region/index.js';\nexport { NotificationBell } from './feedback/notification-bell/index.js';\nexport {\n	Toaster,\n	ToasterStore,\n	Toast,\n	createToaster,\n	getToasterContext,\n	setToasterContext\n} from './feedback/toast/index.js';\nexport type {\n	Placement as ToastPlacement,\n	ToasterProps,\n	AddToastArgs,\n	UpdateToastArgs,\n	ToastType,\n	HoverBehavior,\n	TabHiddenBehavior\n} from './feedback/toast/index.js';\n\n// Display Components\nexport { Divider } from './display/divider/index.js';\nexport { Kbd } from './display/kbd/index.js';\nexport { AspectRatio } from './display/aspect-ratio/index.js';\nexport { Frame } from './display/frame/index.js';\nexport { Timestamp } from './display/timestamp/index.js';\nexport { CodeBlock } from './display/code-block/index.js';\nexport { StatCard } from './display/stat-card/index.js';\nexport { Avatar } from './display/avatar/index.js';\nexport {\n	Card,\n	CardHeader,\n	CardTitle,\n	CardDescription,\n	CardContent,\n	CardFooter,\n	getCardContext,\n	setCardContext\n} from './display/card/index.js';\nexport type { CardContext } from './display/card/index.js';\nexport { Image } from './display/image/index.js';\nexport { List, ListItem } from './display/list/index.js';\nexport { DataList, DataListTerm, DataListDescription } from './display/data-list/index.js';\nexport {\n	Table,\n	TableCaption,\n	TableHead,\n	TableBody,\n	TableFoot,\n	TableRow,\n	TableHeader,\n	TableCell\n} from './display/table/index.js';\nexport {\n	TreeView,\n	TreeItem,\n	getTreeViewContext,\n	setTreeViewContext\n} from './display/tree-view/index.js';\nexport type { TreeViewContext } from './display/tree-view/index.js';\nexport { Timeline, TimelineItem } from './display/timeline/index.js';\nexport { Compare } from './display/compare/index.js';\nexport {\n	Carousel,\n	CarouselSlides,\n	CarouselSlide,\n	CarouselPrev,\n	CarouselNext,\n	CarouselIndicators,\n	getCarouselContext,\n	setCarouselContext\n} from './display/carousel/index.js';\nexport type { CarouselContext } from './display/carousel/index.js';\n\n// Overlay Components\nexport {\n	Modal,\n	ModalTrigger,\n	ModalContent,\n	ModalTitle,\n	ModalDescription,\n	ModalClose,\n	getModalContext,\n	setModalContext\n} from './overlay/modal/index.js';\nexport type { ModalContext } from './overlay/modal/index.js';\nexport {\n	Dialog,\n	DialogTrigger,\n	DialogContent,\n	DialogTitle,\n	DialogDescription,\n	DialogClose\n} from './overlay/dialog/index.js';\nexport {\n	Drawer,\n	DrawerTrigger,\n	DrawerContent,\n	DrawerTitle,\n	DrawerDescription,\n	DrawerClose\n} from './overlay/drawer/index.js';\nexport type { DrawerSide } from './overlay/drawer/index.js';\nexport {\n	Tooltip,\n	TooltipTrigger,\n	TooltipContent,\n	getTooltipContext,\n	setTooltipContext\n} from './overlay/tooltip/index.js';\nexport type { TooltipContext } from './overlay/tooltip/index.js';\nexport {\n	Popover,\n	PopoverTrigger,\n	PopoverContent,\n	getPopoverContext,\n	setPopoverContext\n} from './overlay/popover/index.js';\nexport type { PopoverContext } from './overlay/popover/index.js';\nexport {\n	Dropdown,\n	DropdownTrigger,\n	DropdownContent,\n	DropdownItem,\n	getDropdownContext,\n	setDropdownContext\n} from './overlay/dropdown/index.js';\nexport type { DropdownContext, DropdownItemEntry } from './overlay/dropdown/index.js';\nexport {\n	Sheet,\n	SheetContent,\n	SheetTrigger,\n	SheetTitle,\n	SheetDescription,\n	SheetClose\n} from './overlay/sheet/index.js';\nexport type { SheetSide } from './overlay/sheet/index.js';\nexport { Overlay } from './overlay/overlay/index.js';\nexport { Lightbox } from './overlay/lightbox/index.js';\nexport type { LightboxImage } from './overlay/lightbox/index.js';\nexport { ContextMenu } from './overlay/context-menu/index.js';\nexport type { ContextMenuItemEntry } from './overlay/context-menu/index.js';\n\n// Layout Components\nexport { Stack } from './layout/stack/index.js';\nexport { Flex } from './layout/flex/index.js';\nexport { Grid } from './layout/grid/index.js';\nexport { Container } from './layout/container/index.js';\nexport { Spacer } from './layout/spacer/index.js';\nexport { Columns } from './layout/columns/index.js';\n\n// Interactive Components\nexport { Sortable } from './interactive/sortable/index.js';\nexport { Swipeable } from './interactive/swipeable/index.js';\nexport type { SwipeDirection } from './interactive/swipeable/index.js';\nexport { Resizable } from './interactive/resizable/index.js';\nexport {\n	SplitView,\n	SplitViewPane,\n	SplitViewHandle,\n	getSplitViewContext,\n	setSplitViewContext\n} from './interactive/split-view/index.js';\nexport type { SplitViewContext } from './interactive/split-view/index.js';\nexport { Draggable } from './interactive/draggable/index.js';\nexport type { DraggableEvent } from './interactive/draggable/index.js';\nexport { Droppable } from './interactive/droppable/index.js';\nexport type { DroppableEvent } from './interactive/droppable/index.js';\nexport { InfiniteScroll } from './interactive/infinite-scroll/index.js';\nexport { VirtualList } from './interactive/virtual-list/index.js';\n\n// Utility Components\nexport { VisuallyHidden } from './utility/visually-hidden/index.js';\nexport { Portal } from './utility/portal/index.js';\nexport { FocusTrap } from './utility/focus-trap/index.js';\nexport { ScreenReaderOnly } from './utility/screen-reader-only/index.js';\nexport { Conditional } from './utility/conditional/index.js';\n",
-    "utils/a11y/aria.ts": "/**\n * ARIA attribute utilities for WCAG compliance\n */\nimport type {\n	LabelConfig,\n	ValidationConfig,\n	InteractiveStateConfig,\n	WidgetConfig,\n	AriaHaspopup,\n	AriaLive,\n	AriaOrientation\n} from '$types/index.js';\n\n/**\n * Builds ARIA attributes object from a partial record, filtering out undefined values\n * and converting boolean/number/undefined values to strings for HTML attributes\n *\n * @example\n * ```ts\n * const attrs = buildAriaAttrs({\n *   'aria-label': 'Close',\n *   'aria-expanded': false,\n *   'aria-valuenow': 50,\n *   'aria-hidden': undefined\n * });\n * // { 'aria-label': 'Close', 'aria-expanded': 'false', 'aria-valuenow': '50' }\n * ```\n */\nexport function buildAriaAttrs(\n	attrs: Record<string, string | number | boolean | undefined>\n): Record<string, string> {\n	const result: Record<string, string> = {};\n	for (const [key, value] of Object.entries(attrs)) {\n		if (value !== undefined) {\n			result[key] = String(value);\n		}\n	}\n	return result;\n}\n\n/**\n * Creates ARIA attributes for labeling and describing elements\n *\n * @example\n * ```svelte\n * <Input\n *   id=\"email\"\n *   {...labelAttrs({ label: 'Email address' })}\n * />\n * ```\n */\nexport function labelAttrs(options: LabelConfig = {}) {\n	return buildAriaAttrs({\n		'aria-label': options.label,\n		'aria-labelledby': options.labelledby,\n		'aria-describedby': options.describedby\n	});\n}\n\n/**\n * Creates ARIA attributes for form validation states\n *\n * @example\n * ```svelte\n * <Input\n *   bind:value={email}\n *   {...validationAttrs({ invalid: !isValid, errormessage: 'email-error' })}\n * />\n * <p id=\"email-error\" role=\"alert\">{error}</p>\n * ```\n */\nexport function validationAttrs(options: ValidationConfig = {}) {\n	return buildAriaAttrs({\n		'aria-invalid': options.invalid,\n		'aria-required': options.required,\n		'aria-errormessage': options.errormessage\n	});\n}\n\n/**\n * Creates ARIA attributes for interactive element states\n *\n * @example\n * ```svelte\n * <Button\n *   onclick={() => pressed = !pressed}\n *   {...interactiveStateAttrs({ pressed })}\n * >\n *   Toggle\n * </Button>\n * ```\n */\nexport function interactiveStateAttrs(options: InteractiveStateConfig = {}) {\n	return buildAriaAttrs({\n		'aria-pressed': options.pressed,\n		'aria-expanded': options.expanded,\n		'aria-checked': options.checked,\n		'aria-selected': options.selected,\n		'aria-disabled': options.disabled,\n		'aria-busy': options.busy,\n		'aria-current': options.current\n	});\n}\n\n/**\n * Creates ARIA attributes for complex widgets and roles\n *\n * @example\n * ```svelte\n * <div role=\"slider\" {...widgetAttrs({\n *   valuenow: value,\n *   valuemin: 0,\n *   valuemax: 100\n * })} />\n * ```\n */\nexport function widgetAttrs(options: WidgetConfig = {}) {\n	return buildAriaAttrs({\n		'aria-controls': options.controls,\n		'aria-haspopup': options.haspopup,\n		'aria-valuenow': options.valuenow,\n		'aria-valuetext': options.valuetext,\n		'aria-valuemin': options.valuemin,\n		'aria-valuemax': options.valuemax,\n		'aria-live': options.live,\n		'aria-activedescendant': options.activedescendant,\n		'aria-posinset': options.posinset,\n		'aria-setsize': options.setsize,\n		'aria-level': options.level,\n		'aria-orientation': options.orientation\n	});\n}\n\n/**\n * Combines multiple ARIA attribute objects into one\n * Useful for composing different accessibility patterns\n *\n * @example\n * ```svelte\n * <button {...mergeAttrs(\n *   labelAttrs({ label: 'Menu' }),\n *   interactiveStateAttrs({ expanded: isOpen }),\n *   widgetAttrs({ haspopup: 'menu', controls: 'menu-id' })\n * )}>\n *   Menu\n * </button>\n * ```\n */\nexport function mergeAttrs(...attrSets: Record<string, string>[]): Record<string, string> {\n	return Object.assign({}, ...attrSets);\n}\n",
+    "utils/a11y/aria.ts": "/**\n * ARIA attribute utilities for WCAG compliance\n */\nimport type {\n	LabelConfig,\n	ValidationConfig,\n	InteractiveStateConfig,\n	WidgetConfig\n} from '$types/index.js';\n\n/**\n * Builds ARIA attributes object from a partial record, filtering out undefined values\n * and converting boolean/number/undefined values to strings for HTML attributes\n *\n * @example\n * ```ts\n * const attrs = buildAriaAttrs({\n *   'aria-label': 'Close',\n *   'aria-expanded': false,\n *   'aria-valuenow': 50,\n *   'aria-hidden': undefined\n * });\n * // { 'aria-label': 'Close', 'aria-expanded': 'false', 'aria-valuenow': '50' }\n * ```\n */\nexport function buildAriaAttrs(\n	attrs: Record<string, string | number | boolean | undefined>\n): Record<string, string> {\n	const result: Record<string, string> = {};\n	for (const [key, value] of Object.entries(attrs)) {\n		if (value !== undefined) {\n			result[key] = String(value);\n		}\n	}\n	return result;\n}\n\n/**\n * Creates ARIA attributes for labeling and describing elements\n *\n * @example\n * ```svelte\n * <Input\n *   id=\"email\"\n *   {...labelAttrs({ label: 'Email address' })}\n * />\n * ```\n */\nexport function labelAttrs(options: LabelConfig = {}) {\n	return buildAriaAttrs({\n		'aria-label': options.label,\n		'aria-labelledby': options.labelledby,\n		'aria-describedby': options.describedby\n	});\n}\n\n/**\n * Creates ARIA attributes for form validation states\n *\n * @example\n * ```svelte\n * <Input\n *   bind:value={email}\n *   {...validationAttrs({ invalid: !isValid, errormessage: 'email-error' })}\n * />\n * <p id=\"email-error\" role=\"alert\">{error}</p>\n * ```\n */\nexport function validationAttrs(options: ValidationConfig = {}) {\n	return buildAriaAttrs({\n		'aria-invalid': options.invalid,\n		'aria-required': options.required,\n		'aria-errormessage': options.errormessage\n	});\n}\n\n/**\n * Creates ARIA attributes for interactive element states\n *\n * @example\n * ```svelte\n * <Button\n *   onclick={() => pressed = !pressed}\n *   {...interactiveStateAttrs({ pressed })}\n * >\n *   Toggle\n * </Button>\n * ```\n */\nexport function interactiveStateAttrs(options: InteractiveStateConfig = {}) {\n	return buildAriaAttrs({\n		'aria-pressed': options.pressed,\n		'aria-expanded': options.expanded,\n		'aria-checked': options.checked,\n		'aria-selected': options.selected,\n		'aria-disabled': options.disabled,\n		'aria-busy': options.busy,\n		'aria-current': options.current\n	});\n}\n\n/**\n * Creates ARIA attributes for complex widgets and roles\n *\n * @example\n * ```svelte\n * <div role=\"slider\" {...widgetAttrs({\n *   valuenow: value,\n *   valuemin: 0,\n *   valuemax: 100\n * })} />\n * ```\n */\nexport function widgetAttrs(options: WidgetConfig = {}) {\n	return buildAriaAttrs({\n		'aria-controls': options.controls,\n		'aria-haspopup': options.haspopup,\n		'aria-valuenow': options.valuenow,\n		'aria-valuetext': options.valuetext,\n		'aria-valuemin': options.valuemin,\n		'aria-valuemax': options.valuemax,\n		'aria-live': options.live,\n		'aria-activedescendant': options.activedescendant,\n		'aria-posinset': options.posinset,\n		'aria-setsize': options.setsize,\n		'aria-level': options.level,\n		'aria-orientation': options.orientation\n	});\n}\n\n/**\n * Combines multiple ARIA attribute objects into one\n * Useful for composing different accessibility patterns\n *\n * @example\n * ```svelte\n * <button {...mergeAttrs(\n *   labelAttrs({ label: 'Menu' }),\n *   interactiveStateAttrs({ expanded: isOpen }),\n *   widgetAttrs({ haspopup: 'menu', controls: 'menu-id' })\n * )}>\n *   Menu\n * </button>\n * ```\n */\nexport function mergeAttrs(...attrSets: Record<string, string>[]): Record<string, string> {\n	return Object.assign({}, ...attrSets);\n}\n",
     "utils/a11y/focus.ts": "/**\n * Focus management utilities for accessibility\n */\n\n/**\n * Traps focus within a container (for modals, dialogs, dropdowns)\n * Returns a cleanup function that removes the event listener\n *\n * @example\n * ```svelte\n * <script>\n *   import { focus } from 'alus-ui';\n *   let modalElement;\n *\n *   function openModal() {\n *     modalElement.showModal();\n *     const cleanup = focus.trap(modalElement);\n *     // Store cleanup to call when modal closes\n *   }\n * </script>\n *\n * <dialog bind:this={modalElement}>\n *   <!-- Content -->\n * </dialog>\n * ```\n */\nexport function trap(container: HTMLElement): () => void {\n	const focusableElements = container.querySelectorAll(\n		'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n	);\n	const firstElement = focusableElements[0] as HTMLElement;\n	const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;\n\n	const handleTabKey = (e: KeyboardEvent) => {\n		if (e.key !== 'Tab') return;\n\n		if (e.shiftKey) {\n			if (document.activeElement === firstElement) {\n				e.preventDefault();\n				lastElement?.focus();\n			}\n		} else {\n			if (document.activeElement === lastElement) {\n				e.preventDefault();\n				firstElement?.focus();\n			}\n		}\n	};\n\n	container.addEventListener('keydown', handleTabKey);\n	return () => container.removeEventListener('keydown', handleTabKey);\n}\n\n/**\n * Moves focus to first focusable element in container\n *\n * @example\n * ```svelte\n * <script>\n *   import { focus } from 'alus-ui';\n *   let dialogElement;\n *\n *   function open() {\n *     dialogElement.showModal();\n *     focus.focusFirst(dialogElement);\n *   }\n * </script>\n * ```\n */\nexport function focusFirst(container: HTMLElement): void {\n	const focusable = container.querySelector<HTMLElement>(\n		'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n	);\n	focusable?.focus();\n}\n\n/**\n * Moves focus to last focusable element in container\n */\nexport function focusLast(container: HTMLElement): void {\n	const focusable = container.querySelectorAll<HTMLElement>(\n		'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n	);\n	const last = focusable[focusable.length - 1];\n	last?.focus();\n}\n\n/**\n * Checks if an element can receive focus\n */\nexport function isFocusable(element: HTMLElement): boolean {\n	if (\n		element instanceof HTMLButtonElement ||\n		element instanceof HTMLInputElement ||\n		element instanceof HTMLSelectElement ||\n		element instanceof HTMLTextAreaElement\n	) {\n		return !element.disabled && element.tabIndex >= 0;\n	}\n\n	if (element instanceof HTMLAnchorElement) {\n		return element.href !== '';\n	}\n\n	return element.tabIndex >= 0;\n}\n",
     "utils/a11y/id.ts": "/**\n * ID generation utilities for accessibility associations\n */\n\nlet counter = 0;\n\n/**\n * Creates a unique ID for accessibility associations\n * Useful for generating IDs for aria-describedby, aria-labelledby, etc.\n *\n * @param prefix - Descriptive prefix for the ID (e.g., 'label', 'desc', 'error')\n * @returns A unique ID string\n *\n * @example\n * ```svelte\n * <script>\n *   import { generateId } from 'alus-ui';\n *\n *   const labelId = generateId('label');\n *   const errorId = generateId('error');\n * </script>\n *\n * <Input id=\"email\" {...labelAttrs({ labelledby: labelId, describedby: errorId })} />\n * <label {for}>Email</label>\n * <p id={errorId} role=\"alert\">{error}</p>\n * ```\n */\nexport function generateId(prefix: string): string {\n	return `alus-${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n}\n\n/**\n * Creates a sequential ID (useful for lists, radios, checkboxes)\n *\n * @param prefix - Descriptive prefix for the ID\n * @returns A sequential ID string\n *\n * @example\n * ```svelte\n * {#each items as item, i}\n *   <Radio id={generateSequentialId('option', i)} />\n * {/each}\n * ```\n */\nexport function generateSequentialId(prefix: string, index: number): string {\n	return `alus-${prefix}-${index}`;\n}\n\n/**\n * Creates a counter-based ID (guaranteed unique per session)\n *\n * @param prefix - Descriptive prefix for the ID\n * @returns A unique counter-based ID\n */\nexport function generateCounterId(prefix: string): string {\n	return `alus-${prefix}-${counter++}`;\n}\n\n/**\n * ID generation utilities object\n */\nexport const id = {\n	generate: generateId,\n	sequential: generateSequentialId,\n	counter: generateCounterId\n};\n",
     "utils/a11y/keyboard.ts": "/**\n * Keyboard event utilities for accessibility\n */\n\n/**\n * Checks if Enter or Space was pressed (for button-like behavior)\n *\n * @example\n * ```svelte\n * <script>\n *   import { keyboard } from 'alus-ui';\n *\n *   function handleKeydown(e: KeyboardEvent) {\n *     if (keyboard.isActivationKey(e)) {\n *       // Activate button\n *     }\n *   }\n * </script>\n * ```\n */\nexport function isActivationKey(event: KeyboardEvent): boolean {\n	return event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar';\n}\n\n/**\n * Checks if Escape was pressed\n */\nexport function isEscape(event: KeyboardEvent): boolean {\n	return event.key === 'Escape';\n}\n\n/**\n * Checks if Arrow key was pressed\n */\nexport function isArrow(event: KeyboardEvent): boolean {\n	return (\n		event.key === 'ArrowUp' ||\n		event.key === 'ArrowDown' ||\n		event.key === 'ArrowLeft' ||\n		event.key === 'ArrowRight'\n	);\n}\n\n/**\n * Checks if Home or End was pressed\n */\nexport function isHomeEnd(event: KeyboardEvent): boolean {\n	return event.key === 'Home' || event.key === 'End';\n}\n\n/**\n * Checks if Page Up or Page Down was pressed\n */\nexport function isPageUpDown(event: KeyboardEvent): boolean {\n	return event.key === 'PageUp' || event.key === 'PageDown';\n}\n\n/**\n * Prevents default behavior for activation keys (Space key scrolling)\n *\n * @example\n * ```svelte\n * <div\n *   role=\"button\"\n *   onkeydown={(e) => {\n *     keyboard.preventActivation(e);\n *     if (keyboard.isActivationKey(e)) {\n *       // Handle activation\n *     }\n *   }}\n * >\n *   Custom Button\n * </div>\n * ```\n */\nexport function preventActivation(event: KeyboardEvent): void {\n	if (event.key === ' ' || event.key === 'Spacebar') {\n		event.preventDefault();\n	}\n}\n\n/**\n * Gets the direction from an arrow key event\n */\nexport function getArrowDirection(event: KeyboardEvent): 'up' | 'down' | 'left' | 'right' | null {\n	switch (event.key) {\n		case 'ArrowUp':\n			return 'up';\n		case 'ArrowDown':\n			return 'down';\n		case 'ArrowLeft':\n			return 'left';\n		case 'ArrowRight':\n			return 'right';\n		default:\n			return null;\n	}\n}\n\n/**\n * Keyboard event handler utility object\n */\nexport const keyboard = {\n	isActivationKey,\n	isEscape,\n	isArrow,\n	isHomeEnd,\n	isPageUpDown,\n	preventActivation,\n	getArrowDirection\n};\n",
     "utils/a11y/index.ts": "/**\n * Accessibility utilities for WCAG compliance and ARIA attributes\n * @module a11y\n */\n\n// Export all ARIA utilities\nexport * from './aria.js';\n\n// Export focus management\nexport * from './focus.js';\n\n// Export keyboard utilities\nexport * from './keyboard.js';\n\n// Export ID generation\nexport * from './id.js';\n",
     "utils/form/state.ts": "/**\n * Form field state management\n * @module form/state\n */\n\n/**\n * Form field state interface\n */\nexport interface FormFieldState<T = string> {\n	value: T;\n	error: string | undefined;\n	touched: boolean;\n	dirty: boolean;\n}\n\n/**\n * Create a reactive form field state\n * @param initialValue - Initial value for the field\n * @returns Form field state object\n *\n * @example\n * ```svelte\n * <script>\n *   import { createFormField } from 'alus-ui/utils/form';\n *\n *   let email = createFormField('');\n * </script>\n *\n * <Input\n *   bind:value={email.value}\n *   aria-invalid={email.error !== undefined}\n *   onblur={() => email.touched = true}\n * />\n *\n * {#if email.error && email.touched}\n *   <p class=\"error\">{email.error}</p>\n * {/if}\n * ```\n */\nexport function createFormField<T = string>(initialValue: T): FormFieldState<T> {\n	return {\n		value: initialValue,\n		error: undefined,\n		touched: false,\n		dirty: false\n	};\n}\n\n/**\n * Form state manager for multiple fields\n */\nexport interface FormState<T extends Record<string, unknown>> {\n	values: T;\n	errors: Record<keyof T, string | undefined>;\n	touched: Record<keyof T, boolean>;\n	dirty: Record<keyof T, boolean>;\n}\n\n/**\n * Create a form state manager\n * @param initialValues - Initial values for all fields\n * @returns Form state object\n *\n * @example\n * ```svelte\n * <script>\n *   import { createFormState } from 'alus-ui/utils/form';\n *\n *   let form = createFormState({\n *     email: '',\n *     password: '',\n *     terms: false\n *   });\n * </script>\n *\n * <Input bind:value={form.values.email} />\n * <Input bind:value={form.values.password} />\n * ```\n */\nexport function createFormState<T extends Record<string, unknown>>(initialValues: T): FormState<T> {\n	const keys = Object.keys(initialValues) as Array<keyof T>;\n\n	const touched = {} as Record<keyof T, boolean>;\n	const dirty = {} as Record<keyof T, boolean>;\n	const errors = {} as Record<keyof T, string | undefined>;\n\n	for (const key of keys) {\n		touched[key] = false;\n		dirty[key] = false;\n		errors[key] = undefined;\n	}\n\n	return {\n		values: initialValues,\n		errors,\n		touched,\n		dirty\n	};\n}\n\n/**\n * Check if form has any errors\n * @param form - Form state object\n * @returns Whether any field has an error\n */\nexport function hasFormErrors<T extends Record<string, unknown>>(form: FormState<T>): boolean {\n	return Object.values(form.errors).some((error) => error !== undefined);\n}\n\n/**\n * Check if form is valid (no errors and all required fields touched)\n * @param form - Form state object\n * @returns Whether form is valid\n */\nexport function isFormValid<T extends Record<string, unknown>>(form: FormState<T>): boolean {\n	return !hasFormErrors(form) && Object.values(form.touched).every((t) => t);\n}\n\n/**\n * Reset form to initial state\n * @param form - Form state object\n * @param initialValues - Initial values to reset to\n */\nexport function resetForm<T extends Record<string, unknown>>(\n	form: FormState<T>,\n	initialValues: T\n): void {\n	for (const key of Object.keys(initialValues) as Array<keyof T>) {\n		(form.values as Record<keyof T, unknown>)[key] = initialValues[key];\n		form.errors[key] = undefined;\n		form.touched[key] = false;\n		form.dirty[key] = false;\n	}\n}\n",
     "demos/accordion/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, Plus } from 'phosphor-svelte';
 	import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -14949,7 +14951,7 @@ var BUNDLED_DATA = {
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -15006,7 +15008,7 @@ var BUNDLED_DATA = {
 
 		<div class="japanese-border bg-white/50 p-8 backdrop-blur-sm">
 			<Accordion type="multiple" bind:value={multi} class="divide-y divide-(--indigo-dye)/10">
-				{#each ['One', 'Two', 'Three'] as label, i}
+				{#each ['One', 'Two', 'Three'] as label, i (i)}
 					<AccordionItem value={\`m\${i}\`}>
 						<AccordionTrigger class="py-4 text-left text-(--ink) hover:text-(--vermilion)">
 							{label}
@@ -15066,6 +15068,7 @@ var BUNDLED_DATA = {
 </main>
 `,
     "demos/alert/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, Info, CheckCircle, Warning, XCircle } from 'phosphor-svelte';
 	import { Alert } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -15083,7 +15086,7 @@ var BUNDLED_DATA = {
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -15208,6 +15211,7 @@ var BUNDLED_DATA = {
 </main>
 `,
     "demos/aspect-ratio/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { AspectRatio } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -15230,7 +15234,7 @@ var BUNDLED_DATA = {
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -15258,7 +15262,7 @@ var BUNDLED_DATA = {
 		<div
 			class="japanese-border grid grid-cols-2 gap-6 bg-white/50 p-8 backdrop-blur-sm md:grid-cols-3 lg:grid-cols-5"
 		>
-			{#each ratios as r}
+			{#each ratios as r, i (i)}
 				<div class="flex flex-col items-center gap-2">
 					<AspectRatio
 						ratio={r.value}
@@ -15295,6 +15299,7 @@ var BUNDLED_DATA = {
 </main>
 `,
     "demos/auto-complete/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, MapPin, MagnifyingGlass, CircleNotch } from 'phosphor-svelte';
 	import { AutoComplete, type AutoCompleteOption } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -15377,7 +15382,7 @@ var BUNDLED_DATA = {
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -15552,6 +15557,7 @@ var BUNDLED_DATA = {
 </main>
 `,
     "demos/avatar/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Avatar } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -15572,7 +15578,7 @@ var BUNDLED_DATA = {
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -15730,6 +15736,7 @@ var BUNDLED_DATA = {
 </main>
 `,
     "demos/badge/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Badge } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -15748,7 +15755,7 @@ var BUNDLED_DATA = {
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -15890,6 +15897,7 @@ var BUNDLED_DATA = {
 </main>
 `,
     "demos/banner/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, Info, CheckCircle, Warning, XCircle, Megaphone } from 'phosphor-svelte';
 	import { Banner, Button } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -15914,7 +15922,7 @@ var BUNDLED_DATA = {
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -16027,6 +16035,7 @@ var BUNDLED_DATA = {
 </main>
 `,
     "demos/breadcrumb/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, CaretRight, House } from 'phosphor-svelte';
 	import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -16045,7 +16054,7 @@ var BUNDLED_DATA = {
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -16075,11 +16084,17 @@ var BUNDLED_DATA = {
 
 		<div class="japanese-border bg-white/50 p-8 backdrop-blur-sm">
 			<Breadcrumb listClass="flex flex-wrap items-center gap-2 text-sm">
-				<BreadcrumbItem href="/" linkClass="text-(--indigo-dye) hover:text-(--vermilion)">
+				<BreadcrumbItem
+					href={resolve('/')}
+					linkClass="text-(--indigo-dye) hover:text-(--vermilion)"
+				>
 					Home
 				</BreadcrumbItem>
 				<BreadcrumbSeparator class="text-(--charcoal)/30">/</BreadcrumbSeparator>
-				<BreadcrumbItem href="/components" linkClass="text-(--indigo-dye) hover:text-(--vermilion)">
+				<BreadcrumbItem
+					href={resolve('/components')}
+					linkClass="text-(--indigo-dye) hover:text-(--vermilion)"
+				>
 					Components
 				</BreadcrumbItem>
 				<BreadcrumbSeparator class="text-(--charcoal)/30">/</BreadcrumbSeparator>
@@ -16097,7 +16112,7 @@ var BUNDLED_DATA = {
 		<div class="japanese-border bg-white/50 p-8 backdrop-blur-sm">
 			<Breadcrumb listClass="flex flex-wrap items-center gap-2 text-sm">
 				<BreadcrumbItem
-					href="/"
+					href={resolve('/')}
 					linkClass="inline-flex items-center gap-1 text-(--indigo-dye) hover:text-(--vermilion)"
 				>
 					<House class="h-4 w-4" />
@@ -16106,7 +16121,10 @@ var BUNDLED_DATA = {
 				<BreadcrumbSeparator class="text-(--charcoal)/30">
 					<CaretRight class="h-3 w-3" />
 				</BreadcrumbSeparator>
-				<BreadcrumbItem href="/docs" linkClass="text-(--indigo-dye) hover:text-(--vermilion)">
+				<BreadcrumbItem
+					href={resolve('/docs')}
+					linkClass="text-(--indigo-dye) hover:text-(--vermilion)"
+				>
 					Docs
 				</BreadcrumbItem>
 				<BreadcrumbSeparator class="text-(--charcoal)/30">
@@ -16149,6 +16167,7 @@ var BUNDLED_DATA = {
 </main>
 `,
     "demos/button/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Button } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -16180,7 +16199,7 @@ var BUNDLED_DATA = {
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -16319,6 +16338,7 @@ var BUNDLED_DATA = {
 </main>
 `,
     "demos/calendar/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Calendar } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -16398,7 +16418,7 @@ var BUNDLED_DATA = {
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -16612,6 +16632,7 @@ var BUNDLED_DATA = {
 </main>
 `,
     "demos/callout/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, Info, CheckCircle, Warning, XCircle, Lightbulb, Note } from 'phosphor-svelte';
 	import { Callout } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -16672,7 +16693,7 @@ var BUNDLED_DATA = {
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -16698,7 +16719,7 @@ var BUNDLED_DATA = {
 		<h2 class="font-display mb-8 text-2xl text-(--ink)">Variants</h2>
 
 		<div class="japanese-border space-y-4 bg-white/50 p-8 backdrop-blur-sm">
-			{#each items as item}
+			{#each items as item, i (i)}
 				{@const Icon = icon(item.variant)}
 				<Callout
 					variant={item.variant}
@@ -16741,6 +16762,7 @@ var BUNDLED_DATA = {
 </main>
 `,
     "demos/card/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -16762,7 +16784,7 @@ var BUNDLED_DATA = {
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -16835,6 +16857,7 @@ var BUNDLED_DATA = {
 </main>
 `,
     "demos/carousel/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, CaretRight, ArrowLeft, ArrowRight } from 'phosphor-svelte';
 	import {
 		Carousel,
@@ -16876,7 +16899,7 @@ var BUNDLED_DATA = {
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -16982,6 +17005,7 @@ var BUNDLED_DATA = {
 </main>
 `,
     "demos/checkbox/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, Check } from 'phosphor-svelte';
 	import { Checkbox } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -17043,7 +17067,7 @@ var BUNDLED_DATA = {
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -17389,6 +17413,7 @@ var BUNDLED_DATA = {
 </main>
 `,
     "demos/code-block/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, Copy, Check } from 'phosphor-svelte';
 	import { CodeBlock } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -17424,7 +17449,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -17523,6 +17548,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/color-picker/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, Lock, Drop } from 'phosphor-svelte';
 	import { ColorPicker } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -17575,7 +17601,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -17758,6 +17784,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/command-menu/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import {
 		CaretLeft,
 		MagnifyingGlass,
@@ -17818,7 +17845,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -17876,127 +17903,111 @@ sum(1, 2);\`;
 						</CommandMenuEmpty>
 
 						<CommandMenuGroup class="mb-1">
-							{#snippet children()}
-								<div
-									class="font-display px-2 py-1 text-xs tracking-widest text-(--bamboo) uppercase"
-								>
-									Files
-								</div>
-								<CommandMenuItem
-									value="New file"
-									keywords="create document \u65B0\u898F \u30D5\u30A1\u30A4\u30EB \u4F5C\u6210"
-									onSelect={() => handle('New file')}
-									class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
-								>
-									<File class="h-4 w-4 text-(--indigo-dye)" />
-									<span>New file</span>
-									<kbd class="ml-auto font-mono text-xs text-(--charcoal)/50">\u2318N</kbd>
-								</CommandMenuItem>
-								<CommandMenuItem
-									value="Open folder"
-									keywords="directory browse \u30D5\u30A9\u30EB\u30C0 \u958B\u304F"
-									onSelect={() => handle('Open folder')}
-									class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
-								>
-									<Folder class="h-4 w-4 text-(--indigo-dye)" />
-									<span>Open folder</span>
-									<kbd class="ml-auto font-mono text-xs text-(--charcoal)/50">\u2318O</kbd>
-								</CommandMenuItem>
-							{/snippet}
+							<div class="font-display px-2 py-1 text-xs tracking-widest text-(--bamboo) uppercase">
+								Files
+							</div>
+							<CommandMenuItem
+								value="New file"
+								keywords="create document \u65B0\u898F \u30D5\u30A1\u30A4\u30EB \u4F5C\u6210"
+								onSelect={() => handle('New file')}
+								class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
+							>
+								<File class="h-4 w-4 text-(--indigo-dye)" />
+								<span>New file</span>
+								<kbd class="ml-auto font-mono text-xs text-(--charcoal)/50">\u2318N</kbd>
+							</CommandMenuItem>
+							<CommandMenuItem
+								value="Open folder"
+								keywords="directory browse \u30D5\u30A9\u30EB\u30C0 \u958B\u304F"
+								onSelect={() => handle('Open folder')}
+								class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
+							>
+								<Folder class="h-4 w-4 text-(--indigo-dye)" />
+								<span>Open folder</span>
+								<kbd class="ml-auto font-mono text-xs text-(--charcoal)/50">\u2318O</kbd>
+							</CommandMenuItem>
 						</CommandMenuGroup>
 
 						<CommandMenuGroup>
-							{#snippet children()}
-								<div
-									class="font-display px-2 py-1 text-xs tracking-widest text-(--bamboo) uppercase"
-								>
-									Account
-								</div>
-								<CommandMenuItem
-									value="Profile"
-									keywords="account user me \u30D7\u30ED\u30D5\u30A3\u30FC\u30EB \u81EA\u5206"
-									onSelect={() => handle('Profile')}
-									class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
-								>
-									<User class="h-4 w-4 text-(--indigo-dye)" />
-									<span>View profile</span>
-								</CommandMenuItem>
-								<CommandMenuItem
-									value="Settings"
-									keywords="preferences config gear \u8A2D\u5B9A \u74B0\u5883"
-									onSelect={() => handle('Settings')}
-									class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
-								>
-									<Gear class="h-4 w-4 text-(--indigo-dye)" />
-									<span>Settings</span>
-									<kbd class="ml-auto font-mono text-xs text-(--charcoal)/50">\u2318,</kbd>
-								</CommandMenuItem>
-							{/snippet}
+							<div class="font-display px-2 py-1 text-xs tracking-widest text-(--bamboo) uppercase">
+								Account
+							</div>
+							<CommandMenuItem
+								value="Profile"
+								keywords="account user me \u30D7\u30ED\u30D5\u30A3\u30FC\u30EB \u81EA\u5206"
+								onSelect={() => handle('Profile')}
+								class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
+							>
+								<User class="h-4 w-4 text-(--indigo-dye)" />
+								<span>View profile</span>
+							</CommandMenuItem>
+							<CommandMenuItem
+								value="Settings"
+								keywords="preferences config gear \u8A2D\u5B9A \u74B0\u5883"
+								onSelect={() => handle('Settings')}
+								class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
+							>
+								<Gear class="h-4 w-4 text-(--indigo-dye)" />
+								<span>Settings</span>
+								<kbd class="ml-auto font-mono text-xs text-(--charcoal)/50">\u2318,</kbd>
+							</CommandMenuItem>
 						</CommandMenuGroup>
 
 						<CommandMenuGroup>
-							{#snippet children()}
-								<div
-									class="font-display px-2 py-1 text-xs tracking-widest text-(--bamboo) uppercase"
-								>
-									Theme
-								</div>
-								<CommandMenuItem
-									value="Light theme"
-									keywords="day bright sun \u660E\u308B\u3044 \u592A\u967D \u663C"
-									onSelect={() => handle('Light theme')}
-									class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
-								>
-									<Sun class="h-4 w-4 text-(--muted-gold)" />
-									<span>Switch to light</span>
-								</CommandMenuItem>
-								<CommandMenuItem
-									value="Dark theme"
-									keywords="night moon \u6697\u3044 \u591C \u6708"
-									onSelect={() => handle('Dark theme')}
-									class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
-								>
-									<Moon class="h-4 w-4 text-(--indigo-dye)" />
-									<span>Switch to dark</span>
-								</CommandMenuItem>
-							{/snippet}
+							<div class="font-display px-2 py-1 text-xs tracking-widest text-(--bamboo) uppercase">
+								Theme
+							</div>
+							<CommandMenuItem
+								value="Light theme"
+								keywords="day bright sun \u660E\u308B\u3044 \u592A\u967D \u663C"
+								onSelect={() => handle('Light theme')}
+								class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
+							>
+								<Sun class="h-4 w-4 text-(--muted-gold)" />
+								<span>Switch to light</span>
+							</CommandMenuItem>
+							<CommandMenuItem
+								value="Dark theme"
+								keywords="night moon \u6697\u3044 \u591C \u6708"
+								onSelect={() => handle('Dark theme')}
+								class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
+							>
+								<Moon class="h-4 w-4 text-(--indigo-dye)" />
+								<span>Switch to dark</span>
+							</CommandMenuItem>
 						</CommandMenuGroup>
 
 						<CommandMenuGroup>
-							{#snippet children()}
-								<div
-									class="font-display px-2 py-1 text-xs tracking-widest text-(--bamboo) uppercase"
-								>
-									Actions
-								</div>
-								<CommandMenuItem
-									value="Open terminal"
-									keywords="shell command line cli \u7AEF\u672B \u30BF\u30FC\u30DF\u30CA\u30EB"
-									onSelect={() => handle('Open terminal')}
-									class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
-								>
-									<Terminal class="h-4 w-4 text-(--indigo-dye)" />
-									<span>Open terminal</span>
-								</CommandMenuItem>
-								<CommandMenuItem
-									value="Reload"
-									keywords="refresh restart \u66F4\u65B0 \u518D\u8AAD\u307F\u8FBC\u307F"
-									onSelect={() => handle('Reload')}
-									class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
-								>
-									<ArrowsClockwise class="h-4 w-4 text-(--indigo-dye)" />
-									<span>Reload window</span>
-								</CommandMenuItem>
-								<CommandMenuItem
-									value="Clear cache"
-									keywords="delete trash purge \u524A\u9664 \u6D88\u53BB \u30B4\u30DF\u7BB1"
-									onSelect={() => handle('Clear cache')}
-									class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
-								>
-									<Trash class="h-4 w-4 text-(--vermilion)" />
-									<span>Clear cache</span>
-								</CommandMenuItem>
-							{/snippet}
+							<div class="font-display px-2 py-1 text-xs tracking-widest text-(--bamboo) uppercase">
+								Actions
+							</div>
+							<CommandMenuItem
+								value="Open terminal"
+								keywords="shell command line cli \u7AEF\u672B \u30BF\u30FC\u30DF\u30CA\u30EB"
+								onSelect={() => handle('Open terminal')}
+								class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
+							>
+								<Terminal class="h-4 w-4 text-(--indigo-dye)" />
+								<span>Open terminal</span>
+							</CommandMenuItem>
+							<CommandMenuItem
+								value="Reload"
+								keywords="refresh restart \u66F4\u65B0 \u518D\u8AAD\u307F\u8FBC\u307F"
+								onSelect={() => handle('Reload')}
+								class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
+							>
+								<ArrowsClockwise class="h-4 w-4 text-(--indigo-dye)" />
+								<span>Reload window</span>
+							</CommandMenuItem>
+							<CommandMenuItem
+								value="Clear cache"
+								keywords="delete trash purge \u524A\u9664 \u6D88\u53BB \u30B4\u30DF\u7BB1"
+								onSelect={() => handle('Clear cache')}
+								class="flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-sm transition-colors data-highlighted:bg-(--cream)"
+							>
+								<Trash class="h-4 w-4 text-(--vermilion)" />
+								<span>Clear cache</span>
+							</CommandMenuItem>
 						</CommandMenuGroup>
 					</CommandMenuList>
 				</CommandMenuContent>
@@ -18057,6 +18068,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/compare/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, CaretLeft as Left, CaretRight as Right } from 'phosphor-svelte';
 	import { Compare } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -18075,7 +18087,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -18185,6 +18197,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/conditional/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Conditional, Button } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -18205,7 +18218,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -18285,6 +18298,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/context-menu/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, Copy, Scissors, Clipboard, Trash, ArrowsClockwise } from 'phosphor-svelte';
 	import { ContextMenu, type ContextMenuItemEntry } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -18336,7 +18350,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -18416,6 +18430,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/data-list/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { DataList, DataListTerm, DataListDescription } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -18433,7 +18448,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -18488,6 +18503,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/date-picker/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, Calendar as CalIcon, Lock } from 'phosphor-svelte';
 	import { DatePicker } from 'alus-ui';
 	import { type DateValue, getLocalTimeZone, today } from '@internationalized/date';
@@ -18545,7 +18561,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -18773,6 +18789,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/date-range/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { DateRange, type DateRangeValue } from 'alus-ui';
 	import { type DateValue, getLocalTimeZone, today } from '@internationalized/date';
@@ -18836,7 +18853,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -18951,9 +18968,10 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/date-range-picker/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, CalendarBlank } from 'phosphor-svelte';
 	import { DateRangePicker } from 'alus-ui';
-	import { type DateValue, getLocalTimeZone, today } from '@internationalized/date';
+	import { type DateValue } from '@internationalized/date';
 	import DemoFooter from '$components/DemoFooter.svelte';
 
 	const code = \`<script lang="ts">
@@ -18965,9 +18983,6 @@ sum(1, 2);\`;
 
 <DateRangePicker bind:start bind:end placeholder="Pick dates\u2026" aria-label="Trip dates" />\`;
 
-	const tz = getLocalTimeZone();
-	const now = today(tz);
-
 	let start = $state<DateValue | null>(null);
 	let end = $state<DateValue | null>(null);
 
@@ -19006,7 +19021,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -19104,6 +19119,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/dialog/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import {
 		Dialog,
@@ -19130,7 +19146,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -19199,6 +19215,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/divider/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Divider } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -19213,7 +19230,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -19287,6 +19304,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/draggable/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Draggable, Droppable } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -19333,7 +19351,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -19421,6 +19439,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/drawer/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, X } from 'phosphor-svelte';
 	import {
 		Drawer,
@@ -19449,7 +19468,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -19540,6 +19559,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/dropdown/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, CaretDown } from 'phosphor-svelte';
 	import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -19561,7 +19581,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -19645,8 +19665,9 @@ sum(1, 2);\`;
 	/>
 </main>
 `,
-    "demos/droppable/+page.svelte": "<script>\n	import { goto } from '$app/navigation';\n	import { onMount } from 'svelte';\n	onMount(() => goto('/components/draggable'));\n</script>\n\n<p>Redirecting\u2026</p>\n",
+    "demos/droppable/+page.svelte": "<script>\n	import { goto } from '$app/navigation';\n	import { resolve } from '$app/paths';\n	import { onMount } from 'svelte';\n	onMount(() => goto(resolve('/components/draggable')));\n</script>\n\n<p>Redirecting\u2026</p>\n",
     "demos/external-link/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, ArrowSquareOut } from 'phosphor-svelte';
 	import { ExternalLink } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -19661,7 +19682,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -19740,6 +19761,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/fieldset/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Fieldset, Input } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -19759,7 +19781,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -19862,6 +19884,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/file-input/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, UploadSimple } from 'phosphor-svelte';
 	import { FileInput, Label } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -19886,7 +19909,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -19945,7 +19968,7 @@ sum(1, 2);\`;
 					</button>
 					{#if f?.length}
 						<ul class="mt-3 space-y-1 text-sm text-(--charcoal)/70">
-							{#each Array.from(f) as file}
+							{#each Array.from(f) as file, i (i)}
 								<li>{file.name}</li>
 							{/each}
 						</ul>
@@ -19984,6 +20007,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/focus-trap/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { FocusTrap, Portal } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -20006,7 +20030,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -20114,6 +20138,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/form/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Form, Input, Textarea, Button, FieldError } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -20156,7 +20181,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -20304,6 +20329,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/frame/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Frame } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -20318,7 +20344,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -20402,6 +20428,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/icon-button/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, Heart, Bell, Gear, Trash, Plus, Star } from 'phosphor-svelte';
 	import { IconButton } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -20419,7 +20446,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -20534,6 +20561,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/image/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, ImageBroken } from 'phosphor-svelte';
 	import { Image } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -20552,7 +20580,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -20636,6 +20664,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/infinite-scroll/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, CircleNotch, WarningCircle, ArrowClockwise } from 'phosphor-svelte';
 	import { InfiniteScroll, Button } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -20699,7 +20728,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -20840,6 +20869,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/inline-message/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, Info, CheckCircle, Warning, XCircle } from 'phosphor-svelte';
 	import { InlineMessage, Input, Button } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -20862,7 +20892,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -20984,6 +21014,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/input/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, Warning, Check } from 'phosphor-svelte';
 	import { Input } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -21043,7 +21074,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -21503,6 +21534,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/input-group/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, At, MagnifyingGlass, CurrencyDollar } from 'phosphor-svelte';
 	import { InputGroup, Input } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -21519,7 +21551,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -21615,6 +21647,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/kbd/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Kbd } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -21629,7 +21662,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -21718,6 +21751,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/label/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Label, Input } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -21731,7 +21765,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -21811,6 +21845,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/layout/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Stack, Flex, Grid, Container, Spacer, Columns } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -21847,7 +21882,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -21874,7 +21909,7 @@ sum(1, 2);\`;
 		<h2 class="font-display mb-6 text-2xl text-(--ink)">Stack \u2014 vertical</h2>
 		<div class="japanese-border bg-white/50 p-8 backdrop-blur-sm">
 			<Stack gap="0.75rem" align="stretch">
-				{#each tiles.slice(0, 4) as n}
+				{#each tiles.slice(0, 4) as n, i (i)}
 					<div class="{card} h-12">{n}</div>
 				{/each}
 			</Stack>
@@ -21885,7 +21920,7 @@ sum(1, 2);\`;
 		<h2 class="font-display mb-6 text-2xl text-(--ink)">Stack \u2014 horizontal with wrap</h2>
 		<div class="japanese-border bg-white/50 p-8 backdrop-blur-sm">
 			<Stack direction="horizontal" gap="0.5rem" wrap>
-				{#each tiles as n}
+				{#each tiles as n, i (i)}
 					<div class="{card} h-12 w-24">{n}</div>
 				{/each}
 			</Stack>
@@ -21922,7 +21957,7 @@ sum(1, 2);\`;
 		<h2 class="font-display mb-6 text-2xl text-(--ink)">Grid \u2014 fixed columns</h2>
 		<div class="japanese-border bg-white/50 p-8 backdrop-blur-sm">
 			<Grid cols={4} gap="0.75rem">
-				{#each tiles as n}
+				{#each tiles as n, i (i)}
 					<div class="{card} h-20">{n}</div>
 				{/each}
 			</Grid>
@@ -21933,7 +21968,7 @@ sum(1, 2);\`;
 		<h2 class="font-display mb-6 text-2xl text-(--ink)">Grid \u2014 auto-fill with minColWidth</h2>
 		<div class="japanese-border bg-white/50 p-8 backdrop-blur-sm">
 			<Grid minColWidth="140px" gap="0.75rem">
-				{#each tiles as n}
+				{#each tiles as n, i (i)}
 					<div class="{card} h-20">{n}</div>
 				{/each}
 			</Grid>
@@ -21960,7 +21995,7 @@ sum(1, 2);\`;
 		<h2 class="font-display mb-6 text-2xl text-(--ink)">Columns \u2014 multi-column text flow</h2>
 		<div class="japanese-border bg-white/50 p-8 backdrop-blur-sm">
 			<Columns count={3} gap="2rem" class="text-sm text-(--charcoal)/80">
-				{#each paragraphs as p, i}
+				{#each paragraphs as p, i (i)}
 					<p class="mb-3" style={i === 0 ? '' : 'break-inside:avoid;'}>{p}</p>
 				{/each}
 			</Columns>
@@ -22019,6 +22054,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/lightbox/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, X, CaretLeft as Prev, CaretRight as Next } from 'phosphor-svelte';
 	import { Lightbox, type LightboxImage } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -22067,7 +22103,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -22091,7 +22127,7 @@ sum(1, 2);\`;
 	<section class="mb-16">
 		<div class="japanese-border bg-white/50 p-8 backdrop-blur-sm">
 			<div class="grid grid-cols-3 gap-2">
-				{#each images as img, i}
+				{#each images as img, i (i)}
 					<button
 						class="overflow-hidden rounded border border-(--charcoal)/15"
 						onclick={() => openAt(i)}
@@ -22170,6 +22206,7 @@ sum(1, 2);\`;
 </Lightbox>
 `,
     "demos/link/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, ArrowSquareOut } from 'phosphor-svelte';
 	import { Link } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -22183,7 +22220,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -22213,7 +22250,7 @@ sum(1, 2);\`;
 
 		<div class="japanese-border space-y-4 bg-white/50 p-8 backdrop-blur-sm">
 			<p>
-				<Link href="/" class="text-(--indigo-dye) underline hover:text-(--vermilion)">
+				<Link href={resolve('/')} class="text-(--indigo-dye) underline hover:text-(--vermilion)">
 					Internal link
 				</Link>
 				\u2014 points within the app.
@@ -22230,7 +22267,7 @@ sum(1, 2);\`;
 			</p>
 			<p>
 				<Link
-					href="/components"
+					href={resolve('/components')}
 					current="page"
 					class="text-(--vermilion) underline aria-[current=page]:font-semibold"
 				>
@@ -22268,6 +22305,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/list/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft, Circle } from 'phosphor-svelte';
 	import { List, ListItem } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -22287,7 +22325,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -22353,6 +22391,7 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/live-region/+page.svelte": `<script lang="ts">
+	import { resolve } from '$app/paths';
 	import { CaretLeft } from 'phosphor-svelte';
 	import { LiveRegion, Button } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
@@ -22379,7 +22418,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -22465,6 +22504,7 @@ sum(1, 2);\`;
 	import { CaretLeft, CaretDown, PencilSimple, Trash, Copy, Share } from 'phosphor-svelte';
 	import { Menu, MenuTrigger, MenuContent, MenuItem } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Menu>
 	<MenuTrigger>File</MenuTrigger>
@@ -22483,7 +22523,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -22607,6 +22647,7 @@ sum(1, 2);\`;
 		ModalClose
 	} from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Modal>
 	<ModalTrigger>Open</ModalTrigger>
@@ -22624,7 +22665,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -22724,6 +22765,7 @@ sum(1, 2);\`;
 	import { CaretLeft, House, Compass, BookOpen, Gear } from 'phosphor-svelte';
 	import { Navigation } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Navigation aria-label="Primary">
 	<a href="/" aria-current="page">Home</a>
@@ -22737,7 +22779,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -22767,26 +22809,26 @@ sum(1, 2);\`;
 				class="flex items-center gap-1 rounded border border-(--charcoal)/15 bg-white p-1"
 			>
 				<a
-					href="/"
+					href={resolve('/')}
 					aria-current="page"
 					class="inline-flex items-center gap-2 rounded px-3 py-1.5 text-sm text-(--ink) aria-[current=page]:bg-(--indigo-dye) aria-[current=page]:text-white"
 				>
 					<House class="h-4 w-4" />Home
 				</a>
 				<a
-					href="/components"
+					href={resolve('/components')}
 					class="inline-flex items-center gap-2 rounded px-3 py-1.5 text-sm text-(--ink) hover:bg-(--cream)"
 				>
 					<Compass class="h-4 w-4" />Components
 				</a>
 				<a
-					href="/docs"
+					href={resolve('/docs')}
 					class="inline-flex items-center gap-2 rounded px-3 py-1.5 text-sm text-(--ink) hover:bg-(--cream)"
 				>
 					<BookOpen class="h-4 w-4" />Docs
 				</a>
 				<a
-					href="/settings"
+					href={resolve('/settings')}
 					class="inline-flex items-center gap-2 rounded px-3 py-1.5 text-sm text-(--ink) hover:bg-(--cream)"
 				>
 					<Gear class="h-4 w-4" />Settings
@@ -22838,6 +22880,7 @@ sum(1, 2);\`;
 	import { CaretLeft, Bell, BellRinging } from 'phosphor-svelte';
 	import { NotificationBell, Button } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<NotificationBell count={3} max={99} onclick={open}>
 	{#snippet children({ hasUnread })}
@@ -22855,7 +22898,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -22920,9 +22963,7 @@ sum(1, 2);\`;
 					class="relative rounded-full border border-(--charcoal)/15 bg-white p-3 text-(--ink) hover:border-(--vermilion)"
 					badgeClass="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-(--vermilion) px-1 text-[10px] font-bold text-white"
 				>
-					{#snippet children()}
-						<BellRinging class="h-6 w-6" weight="duotone" />
-					{/snippet}
+					<BellRinging class="h-6 w-6" weight="duotone" />
 				</NotificationBell>
 				<span class="font-mono text-xs text-(--charcoal)/60">count: {big} (capped)</span>
 				<Button
@@ -22940,9 +22981,7 @@ sum(1, 2);\`;
 					class="relative rounded-full border border-(--charcoal)/15 bg-white p-3 text-(--charcoal)/50"
 					badgeClass="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-(--charcoal)/20 px-1 text-[10px] font-bold text-(--ink)"
 				>
-					{#snippet children()}
-						<Bell class="h-6 w-6" />
-					{/snippet}
+					<Bell class="h-6 w-6" />
 				</NotificationBell>
 				<span class="font-mono text-xs text-(--charcoal)/60">count: 0 (showZero)</span>
 			</div>
@@ -22982,9 +23021,11 @@ sum(1, 2);\`;
 	import { CaretLeft, Plus, Minus } from 'phosphor-svelte';
 	import { NumberInput, Label } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<script lang="ts">
 	import { NumberInput } from 'alus-ui';
+	import { resolve } from '$app/paths';
 	let qty = $state(1);
 <\\/script>
 
@@ -22999,7 +23040,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -23092,11 +23133,13 @@ sum(1, 2);\`;
 `,
     "demos/overlay/+page.svelte": `<script lang="ts">
 	import { CaretLeft } from 'phosphor-svelte';
+	import { resolve } from '$app/paths';
 	import { Overlay, Button } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
 
 	const code = \`<script lang="ts">
 	import { Overlay, Button } from 'alus-ui';
+	import { resolve } from '$app/paths';
 	let open = $state(false);
 <\\/script>
 
@@ -23115,7 +23158,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -23182,11 +23225,13 @@ sum(1, 2);\`;
 `,
     "demos/pagination/+page.svelte": `<script lang="ts">
 	import { CaretLeft, CaretRight, CaretDoubleLeft, CaretDoubleRight } from 'phosphor-svelte';
+	import { resolve } from '$app/paths';
 	import { Pagination } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
 
 	const code = \`<script lang="ts">
 	import { Pagination } from 'alus-ui';
+	import { resolve } from '$app/paths';
 	let page = $state(1);
 <\\/script>
 
@@ -23200,7 +23245,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -23249,7 +23294,7 @@ sum(1, 2);\`;
 						>
 							<CaretLeft class="h-4 w-4" />
 						</button>
-						{#each pages as item}
+						{#each pages as item, i (i)}
 							{#if item === 'ellipsis'}
 								<span class="px-2 text-(--charcoal)/40">\u2026</span>
 							{:else}
@@ -23322,6 +23367,7 @@ sum(1, 2);\`;
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Popover, PopoverTrigger, PopoverContent } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Popover>
 	<PopoverTrigger>Open</PopoverTrigger>
@@ -23336,7 +23382,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -23411,6 +23457,7 @@ sum(1, 2);\`;
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Portal } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`{#if open}
 	<Portal>
@@ -23427,7 +23474,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -23508,6 +23555,7 @@ sum(1, 2);\`;
 	import { Progress } from 'alus-ui';
 	import { onMount } from 'svelte';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Progress
 	value={45}
@@ -23531,7 +23579,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -23616,11 +23664,13 @@ sum(1, 2);\`;
 `,
     "demos/radio/+page.svelte": `<script lang="ts">
 	import { CaretLeft, Check } from 'phosphor-svelte';
+	import { resolve } from '$app/paths';
 	import { Radio } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
 
 	const code = \`<script lang="ts">
 	import { Radio } from 'alus-ui';
+	import { resolve } from '$app/paths';
 	let choice = $state('email');
 <\\/script>
 
@@ -23642,7 +23692,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -24137,11 +24187,13 @@ sum(1, 2);\`;
 `,
     "demos/radio-group/+page.svelte": `<script lang="ts">
 	import { CaretLeft } from 'phosphor-svelte';
+	import { resolve } from '$app/paths';
 	import { RadioGroup, Radio } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
 
 	const code = \`<script lang="ts">
 	import { RadioGroup, Radio } from 'alus-ui';
+	import { resolve } from '$app/paths';
 	let plan = $state('pro');
 <\\/script>
 
@@ -24161,7 +24213,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -24221,7 +24273,7 @@ sum(1, 2);\`;
 				aria-label="Size"
 				class="flex gap-6"
 			>
-				{#each ['s', 'm', 'l', 'xl'] as s}
+				{#each ['s', 'm', 'l', 'xl'] as s, i (i)}
 					<label class="flex items-center gap-2 text-(--charcoal) uppercase">
 						<Radio name="size" value={s} bind:group={size} class="accent-(--vermilion)" />
 						<span>{s}</span>
@@ -24254,11 +24306,13 @@ sum(1, 2);\`;
 `,
     "demos/rating/+page.svelte": `<script lang="ts">
 	import { CaretLeft, Star } from 'phosphor-svelte';
+	import { resolve } from '$app/paths';
 	import { Rating } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
 
 	const code = \`<script lang="ts">
 	import { Rating } from 'alus-ui';
+	import { resolve } from '$app/paths';
 	let score = $state(3);
 <\\/script>
 
@@ -24273,7 +24327,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -24367,9 +24421,10 @@ sum(1, 2);\`;
 </main>
 `,
     "demos/resizable/+page.svelte": `<script lang="ts">
-	import { CaretLeft, DotsSixVertical, DotsSix } from 'phosphor-svelte';
+	import { CaretLeft } from 'phosphor-svelte';
 	import { Resizable } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Resizable
 	bind:size={width}
@@ -24390,7 +24445,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -24479,6 +24534,7 @@ sum(1, 2);\`;
 	import { CaretLeft, Trash, MagnifyingGlass } from 'phosphor-svelte';
 	import { ScreenReaderOnly } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<button>
 	<Trash class="h-5 w-5" />
@@ -24491,7 +24547,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -24557,11 +24613,13 @@ sum(1, 2);\`;
 `,
     "demos/search-input/+page.svelte": `<script lang="ts">
 	import { CaretLeft, MagnifyingGlass, X } from 'phosphor-svelte';
+	import { resolve } from '$app/paths';
 	import { SearchInput, Label } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
 
 	const code = \`<script lang="ts">
 	import { SearchInput } from 'alus-ui';
+	import { resolve } from '$app/paths';
 	let q = $state('');
 <\\/script>
 
@@ -24576,7 +24634,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -24677,11 +24735,13 @@ sum(1, 2);\`;
 `,
     "demos/select/+page.svelte": `<script lang="ts">
 	import { CaretLeft, CaretDown, Check } from 'phosphor-svelte';
+	import { resolve } from '$app/paths';
 	import { Select, SelectTrigger, SelectContent, SelectOption } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
 
 	const code = \`<script lang="ts">
 	import { Select, SelectTrigger, SelectContent, SelectOption } from 'alus-ui';
+	import { resolve } from '$app/paths';
 	let value = $state('');
 <\\/script>
 
@@ -24728,7 +24788,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -24918,6 +24978,7 @@ sum(1, 2);\`;
 		SheetClose
 	} from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Sheet side="bottom">
 	<SheetTrigger>Open</SheetTrigger>
@@ -24935,7 +24996,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -25029,6 +25090,7 @@ sum(1, 2);\`;
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Skeleton } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Skeleton class="block h-4 w-1/3 animate-pulse rounded bg-gray-200" />
 <Skeleton class="block h-32 w-full animate-pulse bg-gray-200" />\`;
@@ -25039,7 +25101,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -25102,11 +25164,13 @@ sum(1, 2);\`;
 `,
     "demos/slider/+page.svelte": `<script lang="ts">
 	import { CaretLeft } from 'phosphor-svelte';
+	import { resolve } from '$app/paths';
 	import { Slider, Label } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
 
 	const code = \`<script lang="ts">
 	import { Slider } from 'alus-ui';
+	import { resolve } from '$app/paths';
 	let volume = $state(50);
 <\\/script>
 
@@ -25121,7 +25185,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -25193,6 +25257,7 @@ sum(1, 2);\`;
 	import { CaretLeft, DotsSixVertical } from 'phosphor-svelte';
 	import { Sortable } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Sortable bind:items={tasks} getKey={(t) => t.id} aria-label="Tasks">
 	{#snippet item({ value, grabbed, itemAttrs })}
@@ -25218,7 +25283,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -25340,6 +25405,7 @@ sum(1, 2);\`;
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Spinner } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Spinner
 	label="Loading content"
@@ -25352,7 +25418,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -25425,6 +25491,7 @@ sum(1, 2);\`;
 	import { CaretLeft } from 'phosphor-svelte';
 	import { SplitView, SplitViewPane, SplitViewHandle } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<SplitView bind:size={pct} min={20} max={80} orientation="horizontal" aria-label="Editor">
 	<SplitViewPane side="first">Left</SplitViewPane>
@@ -25441,7 +25508,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -25568,6 +25635,7 @@ sum(1, 2);\`;
 	} from 'phosphor-svelte';
 	import { StatCard } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<StatCard
 	label="Active users"
@@ -25591,7 +25659,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -25735,6 +25803,7 @@ sum(1, 2);\`;
 	import { CaretLeft, Check } from 'phosphor-svelte';
 	import { Stepper, StepperStep, Button } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Stepper value={1} steps={3}>
 	<StepperStep index={0}>Account</StepperStep>
@@ -25756,7 +25825,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -25782,7 +25851,7 @@ sum(1, 2);\`;
 
 		<div class="japanese-border bg-white/50 p-8 backdrop-blur-sm">
 			<Stepper bind:current aria-label="Onboarding" class="mb-8 flex items-center gap-2">
-				{#each steps as step, i}
+				{#each steps as step, i (i)}
 					<StepperStep index={i} class="flex flex-1 items-center gap-3">
 						{#snippet children({ status })}
 							<span
@@ -25867,6 +25936,7 @@ sum(1, 2);\`;
 	import { CaretLeft, CaretRight, File, Folder, Image, Code } from 'phosphor-svelte';
 	import { Menu, MenuTrigger, MenuContent, MenuItem, SubMenu, type SubMenuItem } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Menu>
 	<MenuTrigger>File</MenuTrigger>
@@ -25908,7 +25978,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -25956,10 +26026,8 @@ sum(1, 2);\`;
 						separatorClass="my-1 h-px bg-(--charcoal)/15"
 						class="flex items-center justify-between rounded px-3 py-1.5 text-sm text-(--ink) hover:bg-(--cream) data-highlighted:bg-(--indigo-dye) data-highlighted:text-white data-[state=open]:bg-(--indigo-dye)/10"
 					>
-						{#snippet children()}
-							<span>New</span>
-							<CaretRight class="h-3 w-3" />
-						{/snippet}
+						<span>New</span>
+						<CaretRight class="h-3 w-3" />
 						{#snippet item({ item })}
 							{#if item.label}
 								{@const Icon = iconMap[item.label]}
@@ -26015,6 +26083,7 @@ sum(1, 2);\`;
 	import { CaretLeft, ArrowLeft, ArrowRight, ArrowUp, ArrowDown } from 'phosphor-svelte';
 	import { Swipeable, type SwipeDirection } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Swipeable
 	onSwipe={(d) => handle(d)}
@@ -26046,7 +26115,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -26163,11 +26232,13 @@ sum(1, 2);\`;
 `,
     "demos/switch/+page.svelte": `<script lang="ts">
 	import { CaretLeft } from 'phosphor-svelte';
+	import { resolve } from '$app/paths';
 	import { Switch, Label } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
 
 	const code = \`<script lang="ts">
 	import { Switch } from 'alus-ui';
+	import { resolve } from '$app/paths';
 	let on = $state(true);
 <\\/script>
 
@@ -26187,7 +26258,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -26288,6 +26359,7 @@ sum(1, 2);\`;
 		TableCell
 	} from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Table>
 	<TableCaption>Team scoreboard</TableCaption>
@@ -26346,7 +26418,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -26377,7 +26449,7 @@ sum(1, 2);\`;
 				</TableCaption>
 				<TableHead>
 					<TableRow>
-						{#each [{ k: 'name', label: 'Name' }, { k: 'role', label: 'Role' }, { k: 'score', label: 'Score' }] as col}
+						{#each [{ k: 'name', label: 'Name' }, { k: 'role', label: 'Role' }, { k: 'score', label: 'Score' }] as col (col.k)}
 							<TableHeader
 								scope="col"
 								sort={sortKey === col.k ? sortDir : 'none'}
@@ -26453,6 +26525,7 @@ sum(1, 2);\`;
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Tabs, TabList, Tab, TabPanel } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Tabs value="overview">
 	<TabList>
@@ -26471,7 +26544,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -26564,6 +26637,7 @@ sum(1, 2);\`;
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Tag } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Tag removable onremove={() => remove(id)} aria-label="React tag">
 	React
@@ -26587,7 +26661,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -26698,11 +26772,13 @@ sum(1, 2);\`;
 `,
     "demos/textarea/+page.svelte": `<script lang="ts">
 	import { CaretLeft } from 'phosphor-svelte';
+	import { resolve } from '$app/paths';
 	import { Textarea } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
 
 	const code = \`<script lang="ts">
 	import { Textarea } from 'alus-ui';
+	import { resolve } from '$app/paths';
 	let bio = $state('');
 <\\/script>
 
@@ -26723,7 +26799,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -26813,11 +26889,13 @@ sum(1, 2);\`;
 `,
     "demos/time-picker/+page.svelte": `<script lang="ts">
 	import { CaretLeft, Lock, WarningCircle, CheckCircle } from 'phosphor-svelte';
+	import { resolve } from '$app/paths';
 	import { TimePicker, type Time } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
 
 	const code = \`<script lang="ts">
 	import { TimePicker, type Time } from 'alus-ui';
+	import { resolve } from '$app/paths';
 	let t = $state<Time | null>({ hour: 9, minute: 30 });
 <\\/script>
 
@@ -26843,7 +26921,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -27033,6 +27111,7 @@ sum(1, 2);\`;
 	import { CaretLeft, Check, Circle, CircleNotch } from 'phosphor-svelte';
 	import { Timeline, TimelineItem } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Timeline aria-label="Project milestones">
 	<TimelineItem status="completed" time="Q1" datetime="2026-01-01">
@@ -27050,7 +27129,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -27173,6 +27252,7 @@ sum(1, 2);\`;
 	import { CaretLeft } from 'phosphor-svelte';
 	import { Timestamp } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Timestamp value={Date.now() - 60_000} />
 <Timestamp value={ts} mode="absolute" />
@@ -27195,7 +27275,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -27222,7 +27302,7 @@ sum(1, 2);\`;
 		<h2 class="font-display mb-6 text-2xl text-(--ink)">Relative</h2>
 		<div class="japanese-border bg-white/50 p-8 backdrop-blur-sm">
 			<ul class="divide-y divide-(--charcoal)/10">
-				{#each samples as s}
+				{#each samples as s, i (i)}
 					<li class="flex items-center justify-between py-3">
 						<span class="text-(--ink)">{s.label}</span>
 						<Timestamp value={s.value} class="font-mono text-sm text-(--charcoal)/70" />
@@ -27292,11 +27372,13 @@ sum(1, 2);\`;
 `,
     "demos/toast/+page.svelte": `<script lang="ts">
 	import { CaretLeft, CheckCircle, Warning, XCircle, Info, X } from 'phosphor-svelte';
+	import { resolve } from '$app/paths';
 	import { Toaster, createToaster, Button, type ToastPlacement } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
 
 	const code = \`<script lang="ts">
 	import { Toaster, createToaster } from 'alus-ui';
+	import { resolve } from '$app/paths';
 	const tt = createToaster<{ title: string }>();
 <\\/script>
 
@@ -27373,7 +27455,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -27451,108 +27533,106 @@ sum(1, 2);\`;
 			</div>
 		{/snippet}
 
-		{#snippet children()}
-			<section class="mb-12">
-				<h2 class="font-display mb-6 text-2xl text-(--ink)">Placement</h2>
-				<div class="japanese-border bg-white/50 p-6 backdrop-blur-sm">
-					<div role="radiogroup" aria-label="Toast placement" class="grid grid-cols-3 gap-2">
-						{#each placements as p}
-							<button
-								type="button"
-								role="radio"
-								aria-checked={placement === p.value}
-								onclick={() => (placement = p.value)}
-								class="rounded border px-3 py-2 text-sm transition-colors"
-								style={placement === p.value
-									? 'background:var(--indigo-dye);border-color:var(--indigo-dye);color:white;'
-									: 'border-color:rgba(45,45,45,0.2);color:var(--ink);'}
-							>
-								{p.label}
-							</button>
-						{/each}
-					</div>
-					<p class="mt-3 font-mono text-xs text-(--charcoal)/60">
-						current: <code>{placement}</code>
-					</p>
+		<section class="mb-12">
+			<h2 class="font-display mb-6 text-2xl text-(--ink)">Placement</h2>
+			<div class="japanese-border bg-white/50 p-6 backdrop-blur-sm">
+				<div role="radiogroup" aria-label="Toast placement" class="grid grid-cols-3 gap-2">
+					{#each placements as p, i (i)}
+						<button
+							type="button"
+							role="radio"
+							aria-checked={placement === p.value}
+							onclick={() => (placement = p.value)}
+							class="rounded border px-3 py-2 text-sm transition-colors"
+							style={placement === p.value
+								? 'background:var(--indigo-dye);border-color:var(--indigo-dye);color:white;'
+								: 'border-color:rgba(45,45,45,0.2);color:var(--ink);'}
+						>
+							{p.label}
+						</button>
+					{/each}
 				</div>
-			</section>
+				<p class="mt-3 font-mono text-xs text-(--charcoal)/60">
+					current: <code>{placement}</code>
+				</p>
+			</div>
+		</section>
 
-			<section class="mb-16">
-				<h2 class="font-display mb-8 text-2xl text-(--ink)">Trigger variants</h2>
+		<section class="mb-16">
+			<h2 class="font-display mb-8 text-2xl text-(--ink)">Trigger variants</h2>
 
-				<div class="japanese-border flex flex-wrap gap-3 bg-white/50 p-8 backdrop-blur-sm">
-					<Button
-						onclick={() =>
-							tt.addToast({
-								data: {
-									title: 'Saved',
-									description: 'Settings synced to the cloud.',
-									variant: 'success'
-								}
-							})}
-						class="rounded border border-(--matcha) bg-(--matcha) px-4 py-2 text-sm text-white"
-					>
-						Success
-					</Button>
-					<Button
-						onclick={() =>
-							tt.addToast({
-								type: 'assertive',
-								data: {
-									title: 'Heads up',
-									description: 'Token expires in 5 minutes.',
-									variant: 'warning'
-								}
-							})}
-						class="rounded border border-(--muted-gold) bg-(--muted-gold) px-4 py-2 text-sm text-(--ink)"
-					>
-						Warning
-					</Button>
-					<Button
-						onclick={() =>
-							tt.addToast({
-								type: 'assertive',
-								data: {
-									title: 'Upload failed',
-									description: 'Could not reach the server.',
-									variant: 'error',
-									action: {
-										label: 'Retry',
-										onClick: () => tt.addToast({ data: { title: 'Retrying\u2026', variant: 'info' } })
-									}
-								}
-							})}
-						class="rounded border border-(--vermilion) bg-(--vermilion) px-4 py-2 text-sm text-white"
-					>
-						Error + action
-					</Button>
-					<Button
-						onclick={() =>
-							tt.addToast({
-								closeDelay: 0,
-								data: {
-									title: 'Persistent',
-									description: 'Stays until dismissed.',
-									variant: 'info'
+			<div class="japanese-border flex flex-wrap gap-3 bg-white/50 p-8 backdrop-blur-sm">
+				<Button
+					onclick={() =>
+						tt.addToast({
+							data: {
+								title: 'Saved',
+								description: 'Settings synced to the cloud.',
+								variant: 'success'
+							}
+						})}
+					class="rounded border border-(--matcha) bg-(--matcha) px-4 py-2 text-sm text-white"
+				>
+					Success
+				</Button>
+				<Button
+					onclick={() =>
+						tt.addToast({
+							type: 'assertive',
+							data: {
+								title: 'Heads up',
+								description: 'Token expires in 5 minutes.',
+								variant: 'warning'
+							}
+						})}
+					class="rounded border border-(--muted-gold) bg-(--muted-gold) px-4 py-2 text-sm text-(--ink)"
+				>
+					Warning
+				</Button>
+				<Button
+					onclick={() =>
+						tt.addToast({
+							type: 'assertive',
+							data: {
+								title: 'Upload failed',
+								description: 'Could not reach the server.',
+								variant: 'error',
+								action: {
+									label: 'Retry',
+									onClick: () => tt.addToast({ data: { title: 'Retrying\u2026', variant: 'info' } })
 								}
-							})}
-						class="rounded border border-(--indigo-dye) px-4 py-2 text-sm text-(--indigo-dye)"
-					>
-						Persistent
-					</Button>
-					<Button
-						onclick={() => tt.clear()}
-						class="rounded border border-(--charcoal)/30 px-4 py-2 text-sm text-(--charcoal)"
-					>
-						Clear all
-					</Button>
-				</div>
+							}
+						})}
+					class="rounded border border-(--vermilion) bg-(--vermilion) px-4 py-2 text-sm text-white"
+				>
+					Error + action
+				</Button>
+				<Button
+					onclick={() =>
+						tt.addToast({
+							closeDelay: 0,
+							data: {
+								title: 'Persistent',
+								description: 'Stays until dismissed.',
+								variant: 'info'
+							}
+						})}
+					class="rounded border border-(--indigo-dye) px-4 py-2 text-sm text-(--indigo-dye)"
+				>
+					Persistent
+				</Button>
+				<Button
+					onclick={() => tt.clear()}
+					class="rounded border border-(--charcoal)/30 px-4 py-2 text-sm text-(--charcoal)"
+				>
+					Clear all
+				</Button>
+			</div>
 
-				<p class="mt-4 font-mono text-sm text-(--charcoal)/60">
-					Hover any toast to pause its timer. Switch tabs to pause all.
-				</p>
-			</section>
-		{/snippet}
+			<p class="mt-4 font-mono text-sm text-(--charcoal)/60">
+				Hover any toast to pause its timer. Switch tabs to pause all.
+			</p>
+		</section>
 	</Toaster>
 
 	<DemoFooter
@@ -27586,11 +27666,13 @@ sum(1, 2);\`;
 `,
     "demos/toggle-button/+page.svelte": `<script lang="ts">
 	import { CaretLeft, TextB, TextItalic, TextUnderline, Sun, Moon } from 'phosphor-svelte';
+	import { resolve } from '$app/paths';
 	import { ToggleButton } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
 
 	const code = \`<script lang="ts">
 	import { ToggleButton } from 'alus-ui';
+	import { resolve } from '$app/paths';
 	let bold = $state(false);
 <\\/script>
 
@@ -27609,7 +27691,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -27699,6 +27781,7 @@ sum(1, 2);\`;
 	import { CaretLeft, Info } from 'phosphor-svelte';
 	import { Tooltip, TooltipTrigger, TooltipContent } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<Tooltip>
 	<TooltipTrigger>Hover me</TooltipTrigger>
@@ -27711,7 +27794,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -27787,6 +27870,7 @@ sum(1, 2);\`;
 	import { CaretLeft, CaretRight, Folder, FolderOpen, File } from 'phosphor-svelte';
 	import { TreeView, TreeItem } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<TreeView bind:selected aria-label="Project files">
 	<TreeItem id="src">
@@ -27805,7 +27889,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -27963,6 +28047,7 @@ sum(1, 2);\`;
 	import { CaretLeft, Plus, Trash, Shuffle } from 'phosphor-svelte';
 	import { VirtualList } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<VirtualList items={rows} itemHeight={56} overscan={4} aria-label="Rows">
 	{#snippet item({ item, index })}
@@ -28016,7 +28101,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -28176,6 +28261,7 @@ sum(1, 2);\`;
 	import { CaretLeft } from 'phosphor-svelte';
 	import { VisuallyHidden } from 'alus-ui';
 	import DemoFooter from '$components/DemoFooter.svelte';
+	import { resolve } from '$app/paths';
 
 	const code = \`<button>
 	<span aria-hidden="true">\xD7</span>
@@ -28189,7 +28275,7 @@ sum(1, 2);\`;
 </svelte:head>
 
 <a
-	href="/"
+	href={resolve('/')}
 	class="mb-8 inline-flex items-center gap-2 text-(--indigo-dye) transition-colors duration-300 hover:text-(--vermilion)"
 >
 	<CaretLeft class="h-5 w-5" />
@@ -28260,7 +28346,7 @@ sum(1, 2);\`;
 </main>
 `
   },
-  generated_at: "2026-05-31T12:31:38.888Z"
+  generated_at: "2026-05-31T14:52:05.218Z"
 };
 
 // ../mcp-server/src/lib/fs.ts
@@ -28327,9 +28413,7 @@ function truncate(text, hint) {
 
 // ../mcp-server/src/mcp/handlers/tools/list-components.ts
 var schema = object({
-  category: optional(
-    picklist(CATEGORIES, "Must be one of the alus-ui component categories")
-  ),
+  category: optional(picklist(CATEGORIES, "Must be one of the alus-ui component categories")),
   response_format: optional(picklist(["markdown", "json"]), "markdown")
 });
 async function list_components_handler(params) {
@@ -28398,9 +28482,7 @@ function get_component(server2) {
       try {
         const all = await list_all_components();
         const needle = name.toLowerCase().replace(/[-_\s]/g, "");
-        let matches = all.filter(
-          (c) => c.name.toLowerCase().replace(/[-_\s]/g, "") === needle
-        );
+        let matches = all.filter((c) => c.name.toLowerCase().replace(/[-_\s]/g, "") === needle);
         if (category) matches = matches.filter((c) => c.category === category);
         if (!matches.length) {
           const similar = all.filter(
@@ -28490,7 +28572,9 @@ function search_components(server2) {
             ""
           );
         }
-        return tool.text(truncate(lines.join("\n"), "Narrow with category or a more specific query."));
+        return tool.text(
+          truncate(lines.join("\n"), "Narrow with category or a more specific query.")
+        );
       } catch (e) {
         return tool.error(e.message);
       }
@@ -28503,7 +28587,9 @@ import { readFile as readFile3, readdir as readdir2 } from "fs/promises";
 var schema4 = object({
   name: pipe(
     string(),
-    description("Component route folder name, lowercase hyphenated (e.g. 'button', 'date-picker')")
+    description(
+      "Component route folder name, lowercase hyphenated (e.g. 'button', 'date-picker')"
+    )
   )
 });
 function get_component_demo(server2) {
@@ -28578,7 +28664,10 @@ ${content}
 import { readFile as readFile5 } from "fs/promises";
 var MODULES = ["aria", "focus", "id", "keyboard", "index", "form/state"];
 var schema5 = object({
-  module: picklist(MODULES, "Utility module \u2014 one of: aria, focus, id, keyboard, index, form/state")
+  module: picklist(
+    MODULES,
+    "Utility module \u2014 one of: aria, focus, id, keyboard, index, form/state"
+  )
 });
 function get_utils(server2) {
   server2.tool(