@poodle64/ui 2026.8.7

package/dist/components/ui/card/card-title.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+declare const CardTitle: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

package/dist/components/ui/card/card.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = 'default',
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: 'default' | 'sm' } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card"
+	data-size={size}
+	class={cn(
+		'ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/card/card.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    size?: 'default' | 'sm';
+};
+declare const Card: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/ui/card/index.d.ts

@@ -0,0 +1,8 @@
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+import Action from './card-action.svelte';
+export { Root, Content, Description, Footer, Header, Title, Action, Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction };

package/dist/components/ui/card/index.js

@@ -0,0 +1,10 @@
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+import Action from './card-action.svelte';
+export { Root, Content, Description, Footer, Header, Title, Action, 
+//
+Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction };

package/dist/components/ui/checkbox/checkbox.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import Check from '@lucide/svelte/icons/check';
+	import Minus from '@lucide/svelte/icons/minus';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> & { class?: string } = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="checkbox"
+	class={cn(
+		'peer border-border focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary size-4 shrink-0 rounded-sm border shadow-none transition-shadow focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked: isChecked, indeterminate: isIndeterminate })}
+		<span class="flex items-center justify-center text-current">
+			{#if isIndeterminate}
+				<Minus class="size-3" />
+			{:else if isChecked}
+				<Check class="size-3" />
+			{/if}
+		</span>
+	{/snippet}
+</CheckboxPrimitive.Root>

package/dist/components/ui/checkbox/checkbox.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+import { type WithoutChildrenOrChild } from '../../../utils';
+type $$ComponentProps = WithoutChildrenOrChild<CheckboxPrimitive.RootProps> & {
+    class?: string;
+};
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/ui/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import Checkbox from './checkbox.svelte';
+export { Checkbox, Checkbox as default };

package/dist/components/ui/checkbox/index.js

@@ -0,0 +1,2 @@
+import Checkbox from './checkbox.svelte';
+export { Checkbox, Checkbox as default };

package/dist/components/ui/command/command-dialog.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import Command from './command.svelte';
+	import * as Dialog from '../dialog/index.js';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+
+	let {
+		open = $bindable(false),
+		ref = $bindable(null),
+		value = $bindable(''),
+		title = 'Command Palette',
+		description = 'Search for a command to run...',
+		showCloseButton = false,
+		portalProps,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			portalProps?: DialogPrimitive.PortalProps;
+			children: Snippet;
+			title?: string;
+			description?: string;
+			showCloseButton?: boolean;
+			class?: string;
+		} = $props();
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Header class="sr-only">
+		<Dialog.Title>{title}</Dialog.Title>
+		<Dialog.Description>{description}</Dialog.Description>
+	</Dialog.Header>
+	<Dialog.Content
+		class={cn('top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0', className)}
+		{showCloseButton}
+		{portalProps}
+	>
+		<Command {...restProps} bind:value bind:ref {children} />
+	</Dialog.Content>
+</Dialog.Root>

package/dist/components/ui/command/command-dialog.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type WithoutChildrenOrChild } from '../../../utils.js';
+type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+    portalProps?: DialogPrimitive.PortalProps;
+    children: Snippet;
+    title?: string;
+    description?: string;
+    showCloseButton?: boolean;
+    class?: string;
+};
+declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "open">;
+type CommandDialog = ReturnType<typeof CommandDialog>;
+export default CommandDialog;

package/dist/components/ui/command/command-empty.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.EmptyProps = $props();
+</script>
+
+<CommandPrimitive.Empty
+	bind:ref
+	data-slot="command-empty"
+	class={cn('py-6 text-center text-sm', className)}
+	{...restProps}
+/>

package/dist/components/ui/command/command-empty.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandEmpty: import("svelte").Component<CommandPrimitive.EmptyProps, {}, "ref">;
+type CommandEmpty = ReturnType<typeof CommandEmpty>;
+export default CommandEmpty;

package/dist/components/ui/command/command-group.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Command as CommandPrimitive, useId } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		heading,
+		value,
+		...restProps
+	}: CommandPrimitive.GroupProps & {
+		heading?: string;
+	} = $props();
+</script>
+
+<CommandPrimitive.Group
+	bind:ref
+	data-slot="command-group"
+	class={cn(
+		'text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
+		className
+	)}
+	value={value ?? heading ?? `----${useId()}`}
+	{...restProps}
+>
+	{#if heading}
+		<CommandPrimitive.GroupHeading class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>

package/dist/components/ui/command/command-group.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+type $$ComponentProps = CommandPrimitive.GroupProps & {
+    heading?: string;
+};
+declare const CommandGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type CommandGroup = ReturnType<typeof CommandGroup>;
+export default CommandGroup;

package/dist/components/ui/command/command-input.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+	import * as InputGroup from '../input-group/index.js';
+	import SearchIcon from '@lucide/svelte/icons/search';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(''),
+		...restProps
+	}: CommandPrimitive.InputProps = $props();
+</script>
+
+<div data-slot="command-input-wrapper" class="p-1 pb-0">
+	<InputGroup.Root
+		class="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!"
+	>
+		<CommandPrimitive.Input
+			{value}
+			data-slot="command-input"
+			class={cn(
+				'w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+				className
+			)}
+			{...restProps}
+		>
+			{#snippet child({ props })}
+				<InputGroup.Input {...props} bind:value bind:ref />
+			{/snippet}
+		</CommandPrimitive.Input>
+		<InputGroup.Addon>
+			<SearchIcon class="size-4 shrink-0 opacity-50" />
+		</InputGroup.Addon>
+	</InputGroup.Root>
+</div>

package/dist/components/ui/command/command-input.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandInput: import("svelte").Component<CommandPrimitive.InputProps, {}, "ref" | "value">;
+type CommandInput = ReturnType<typeof CommandInput>;
+export default CommandInput;

package/dist/components/ui/command/command-item.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+	import CheckIcon from '@lucide/svelte/icons/check';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: CommandPrimitive.ItemProps = $props();
+</script>
+
+<CommandPrimitive.Item
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"group/command-item data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<CheckIcon
+		class="cn-command-item-indicator ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+	/>
+</CommandPrimitive.Item>

package/dist/components/ui/command/command-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandItem: import("svelte").Component<CommandPrimitive.ItemProps, {}, "ref">;
+type CommandItem = ReturnType<typeof CommandItem>;
+export default CommandItem;

package/dist/components/ui/command/command-link-item.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.LinkItemProps = $props();
+</script>
+
+<CommandPrimitive.LinkItem
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/command/command-link-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandLinkItem: import("svelte").Component<CommandPrimitive.LinkItemProps, {}, "ref">;
+type CommandLinkItem = ReturnType<typeof CommandLinkItem>;
+export default CommandLinkItem;

package/dist/components/ui/command/command-list.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ListProps = $props();
+</script>
+
+<CommandPrimitive.List
+	bind:ref
+	data-slot="command-list"
+	class={cn(
+		'no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/command/command-list.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandList: import("svelte").Component<CommandPrimitive.ListProps, {}, "ref">;
+type CommandList = ReturnType<typeof CommandList>;
+export default CommandList;

package/dist/components/ui/command/command-loading.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CommandPrimitive.LoadingProps = $props();
+</script>
+
+<CommandPrimitive.Loading bind:ref {...restProps} />

package/dist/components/ui/command/command-loading.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandLoading: import("svelte").Component<CommandPrimitive.LoadingProps, {}, "ref">;
+type CommandLoading = ReturnType<typeof CommandLoading>;
+export default CommandLoading;

package/dist/components/ui/command/command-separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.SeparatorProps = $props();
+</script>
+
+<CommandPrimitive.Separator
+	bind:ref
+	data-slot="command-separator"
+	class={cn('bg-border -mx-1 h-px', className)}
+	{...restProps}
+/>

package/dist/components/ui/command/command-separator.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandSeparator: import("svelte").Component<CommandPrimitive.SeparatorProps, {}, "ref">;
+type CommandSeparator = ReturnType<typeof CommandSeparator>;
+export default CommandSeparator;

package/dist/components/ui/command/command-shortcut.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="command-shortcut"
+	class={cn(
+		'text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/components/ui/command/command-shortcut.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CommandShortcut: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type CommandShortcut = ReturnType<typeof CommandShortcut>;
+export default CommandShortcut;

package/dist/components/ui/command/command.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn } from '../../../utils.js';
+	import { Command as CommandPrimitive } from 'bits-ui';
+
+	export type CommandRootApi = CommandPrimitive.Root;
+
+	let {
+		api = $bindable(null),
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: CommandPrimitive.RootProps & {
+		api?: CommandRootApi | null;
+	} = $props();
+</script>
+
+<CommandPrimitive.Root
+	bind:this={api}
+	bind:value
+	bind:ref
+	data-slot="command"
+	class={cn(
+		'bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/command/command.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+export type CommandRootApi = CommandPrimitive.Root;
+type $$ComponentProps = CommandPrimitive.RootProps & {
+    api?: CommandRootApi | null;
+};
+declare const Command: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "api">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/components/ui/command/index.d.ts

@@ -0,0 +1,12 @@
+import Root from './command.svelte';
+import Loading from './command-loading.svelte';
+import Dialog from './command-dialog.svelte';
+import Empty from './command-empty.svelte';
+import Group from './command-group.svelte';
+import Item from './command-item.svelte';
+import Input from './command-input.svelte';
+import List from './command-list.svelte';
+import Separator from './command-separator.svelte';
+import Shortcut from './command-shortcut.svelte';
+import LinkItem from './command-link-item.svelte';
+export { Root, Dialog, Empty, Group, Item, LinkItem, Input, List, Separator, Shortcut, Loading, Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading };

package/dist/components/ui/command/index.js

@@ -0,0 +1,14 @@
+import Root from './command.svelte';
+import Loading from './command-loading.svelte';
+import Dialog from './command-dialog.svelte';
+import Empty from './command-empty.svelte';
+import Group from './command-group.svelte';
+import Item from './command-item.svelte';
+import Input from './command-input.svelte';
+import List from './command-list.svelte';
+import Separator from './command-separator.svelte';
+import Shortcut from './command-shortcut.svelte';
+import LinkItem from './command-link-item.svelte';
+export { Root, Dialog, Empty, Group, Item, LinkItem, Input, List, Separator, Shortcut, Loading, 
+//
+Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading };

package/dist/components/ui/command-palette/command-palette.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	/**
+	 * The ⌘K palette, wired to the same navigation the shell renders.
+	 *
+	 * It ships beside AppShell because it had the identical coupling: the
+	 * reference implementation imported its app's navigation module directly, so
+	 * lifting the shell without it would have left the shell's search affordance
+	 * pointing at nothing. One nav config now feeds both.
+	 *
+	 * The shortcut is bound here rather than in the consuming layout — every app
+	 * that had a palette had re-typed the same `(metaKey || ctrlKey) && 'k'`
+	 * handler, and one of them then needed a synthetic-keydown hack to reach it
+	 * from the shell. Owning the binding removes both.
+	 *
+	 *     let paletteOpen = $state(false);
+	 *     <AppShell {nav} onSearch={() => (paletteOpen = true)}>…</AppShell>
+	 *     <CommandPalette bind:open={paletteOpen} {nav} onNavigate={goto} />
+	 */
+	import type { Snippet } from 'svelte';
+	import * as Command from '../command/index.js';
+	import { toItems, type NavSource } from '../app-shell/types.js';
+
+	let {
+		open = $bindable(false),
+		nav,
+		onNavigate,
+		placeholder = 'Search…',
+		navHeading = 'Navigate',
+		emptyText = 'No results.',
+		shortcut = true,
+		children
+	}: {
+		open?: boolean;
+		/** The same value passed to AppShell. Filter for permissions first. */
+		nav?: NavSource;
+		/**
+		 * How to go somewhere. Apps pass SvelteKit's `goto` for a client-side
+		 * transition; the default is a full navigation, so the palette works in an
+		 * app with no router rather than silently doing nothing.
+		 */
+		onNavigate?: (href: string) => void;
+		placeholder?: string;
+		navHeading?: string;
+		emptyText?: string;
+		/** Bind ⌘K / Ctrl-K to toggle. Turn off to drive `open` yourself. */
+		shortcut?: boolean;
+		/** Extra command groups: app-specific actions beneath the nav group. */
+		children?: Snippet;
+	} = $props();
+
+	const items = $derived(toItems(nav));
+
+	function go(href: string) {
+		open = false;
+		if (onNavigate) onNavigate(href);
+		else if (typeof window !== 'undefined') window.location.assign(href);
+	}
+</script>
+
+<!-- Top-level, with the opt-out inside the handler: a <svelte:document> may not
+     sit in a block, and an always-attached listener that returns immediately
+     costs nothing next to the dialog it opens. -->
+<svelte:document
+	onkeydown={(e) => {
+		if (!shortcut) return;
+		if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+			e.preventDefault();
+			open = !open;
+		}
+	}}
+/>
+
+<Command.Dialog bind:open title="Command palette" description={placeholder}>
+	<Command.Input {placeholder} />
+	<Command.List>
+		<Command.Empty>{emptyText}</Command.Empty>
+
+		{#if items.length > 0}
+			<Command.Group heading={navHeading}>
+				{#each items as item (item.href)}
+					<Command.Item onSelect={() => go(item.href)} value={item.label}>
+						{#if item.icon}<item.icon class="mr-2 size-4" />{/if}
+						{item.label}
+					</Command.Item>
+				{/each}
+			</Command.Group>
+		{/if}
+
+		{#if children}
+			{#if items.length > 0}<Command.Separator />{/if}
+			{@render children()}
+		{/if}
+	</Command.List>
+</Command.Dialog>