@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/card/Card.svelte

@@ -0,0 +1,65 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { shared } from '../../internal/shared.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, radius, space } from '../../tokens.stylex.js';
+
+	export type CardVariant = 'raised' | 'outlined' | 'filled';
+	export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+
+	export type CardProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		variant?: CardVariant;
+		padding?: CardPadding;
+		sx?: Sx;
+		ref?: HTMLDivElement | null;
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		base: {
+			boxSizing: 'border-box',
+			minWidth: 0,
+			borderRadius: radius.xl,
+			color: colors.text,
+			fontFamily: font.body
+		},
+		raised: {
+			backgroundColor: colors.bgRaised,
+			boxShadow: `inset 0 0 0 1px ${colors.line}, 0 1px 2px ${colors.shade}, 0 12px 24px -16px ${colors.shade}`
+		},
+		outlined: {
+			backgroundColor: colors.bgRaised,
+			boxShadow: `inset 0 0 0 1px ${colors.line}`
+		},
+		filled: {
+			backgroundColor: colors.well,
+			boxShadow: `inset 0 0 0 1px ${colors.line}, inset 0 1px 2px ${colors.shade}`
+		},
+		none: { padding: 0 },
+		sm: { padding: space.x3 },
+		md: { padding: '1.125rem' },
+		lg: { padding: space.x6 }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		variant = 'raised',
+		padding = 'md',
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: CardProps = $props();
+</script>
+
+<div
+	bind:this={ref}
+	{...rest}
+	{...attrs([styles.base, shared.edged, styles[variant], styles[padding], sx], className)}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type CardVariant = 'raised' | 'outlined' | 'filled';
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+export type CardProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    variant?: CardVariant;
+    padding?: CardPadding;
+    sx?: Sx;
+    ref?: HTMLDivElement | null;
+    children?: Snippet;
+};
+declare const Card: import("svelte").Component<CardProps, {}, "ref">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/change-stats/ChangeStats.svelte

@@ -0,0 +1,52 @@
+<!-- Lines added and removed, as +12 −3, in figures that line up. -->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font } from '../../tokens.stylex.js';
+
+	export type ChangeStatsProps = {
+		additions: number;
+		deletions: number;
+		/** Leaves out a side that is zero. */
+		hideZero?: boolean;
+		/** How the change is said to assistive technology. */
+		label?: (additions: number, deletions: number) => string;
+		sx?: Sx;
+		class?: string;
+	};
+
+	const styles = stylex.create({
+		stats: {
+			display: 'inline-flex',
+			gap: '0.375rem',
+			fontFamily: font.mono,
+			fontSize: font.sizeXs,
+			fontVariantNumeric: 'tabular-nums',
+			whiteSpace: 'nowrap'
+		},
+		added: { color: colors.success },
+		removed: { color: colors.danger }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		additions,
+		deletions,
+		hideZero = false,
+		label = (a, d) => `${a} ${a === 1 ? 'line' : 'lines'} added, ${d} removed`,
+		sx,
+		class: className
+	}: ChangeStatsProps = $props();
+</script>
+
+<span
+	role="img"
+	aria-label={label(additions, deletions)}
+	data-slot="change-stats"
+	{...attrs([styles.stats, sx], className)}
+>
+	{#if !(hideZero && additions === 0)}<span {...stylex.attrs(styles.added)}>+{additions}</span>{/if}
+	{#if !(hideZero && deletions === 0)}<span {...stylex.attrs(styles.removed)}>−{deletions}</span
+		>{/if}
+</span>

package/dist/components/change-stats/ChangeStats.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type Sx } from '../../internal/sx.js';
+export type ChangeStatsProps = {
+    additions: number;
+    deletions: number;
+    /** Leaves out a side that is zero. */
+    hideZero?: boolean;
+    /** How the change is said to assistive technology. */
+    label?: (additions: number, deletions: number) => string;
+    sx?: Sx;
+    class?: string;
+};
+declare const ChangeStats: import("svelte").Component<ChangeStatsProps, {}, "">;
+type ChangeStats = ReturnType<typeof ChangeStats>;
+export default ChangeStats;

package/dist/components/changes-summary/ChangesSummary.svelte

@@ -0,0 +1,152 @@
+<!-- What a turn changed: how many files, how many lines, which, and a way into the diff. -->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, radius } from '../../tokens.stylex.js';
+	import Button from '../button/Button.svelte';
+	import ChangeStats from '../change-stats/ChangeStats.svelte';
+
+	export type ChangedFile = {
+		path: string;
+		additions: number;
+		deletions: number;
+		status?: 'added' | 'modified' | 'deleted' | 'renamed';
+	};
+
+	export type ChangesSummaryProps = {
+		files: ChangedFile[];
+		/** Opens the diff, at a file when one is given. */
+		onopen?: (path?: string) => void;
+		openLabel?: string;
+		/** How the count is said: "3 files changed". */
+		title?: (count: number) => string;
+		sx?: Sx;
+		class?: string;
+	};
+
+	const STATUS = { added: 'A', modified: 'M', deleted: 'D', renamed: 'R' } as const;
+
+	const styles = stylex.create({
+		card: {
+			display: 'flex',
+			flexDirection: 'column',
+			overflow: 'hidden',
+			borderRadius: radius.lg,
+			backgroundColor: colors.surface,
+			boxShadow: `inset 0 0 0 1px ${colors.line}`
+		},
+		head: {
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.75rem',
+			minHeight: '2.5rem',
+			paddingInlineStart: '0.75rem',
+			paddingInlineEnd: '0.375rem',
+			borderBottomWidth: '1px',
+			borderBottomStyle: 'solid',
+			borderBottomColor: colors.line
+		},
+		title: { flexGrow: 1, margin: 0, fontSize: font.sizeMd, fontWeight: font.weightMedium },
+		list: { margin: 0, padding: '0.25rem', listStyleType: 'none' },
+		file: {
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.5rem',
+			width: '100%',
+			minHeight: '1.875rem',
+			margin: 0,
+			paddingInline: '0.5rem',
+			borderWidth: 0,
+			borderRadius: radius.md,
+			backgroundColor: {
+				default: 'transparent',
+				':hover': { default: null, '@media (hover: hover)': colors.hover }
+			},
+			color: colors.textMuted,
+			fontFamily: font.mono,
+			fontSize: font.sizeXs,
+			textAlign: 'start',
+			cursor: 'pointer',
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, ':focus-visible': '2px' },
+			outlineColor: colors.focusRing,
+			outlineOffset: '-2px'
+		},
+		// The change, as a letter on a wash of its colour: added in green, deleted
+		// in red, modified and renamed in amber
+		mark: {
+			display: 'grid',
+			placeItems: 'center',
+			flexShrink: 0,
+			width: '1.125rem',
+			height: '1.125rem',
+			borderRadius: radius.xs,
+			fontSize: '0.6875rem',
+			fontWeight: font.weightSemibold
+		},
+		added: { backgroundColor: colors.successSoft, color: colors.successInk },
+		modified: { backgroundColor: colors.warningSoft, color: colors.warningInk },
+		renamed: { backgroundColor: colors.warningSoft, color: colors.warningInk },
+		deleted: { backgroundColor: colors.dangerSoft, color: colors.dangerInk },
+		// The file name, the part to read first
+		name: { color: colors.text },
+		// Long paths lose their start, which matters least, not their file name
+		path: {
+			flexGrow: 1,
+			minWidth: 0,
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+			whiteSpace: 'nowrap',
+			direction: 'rtl',
+			textAlign: 'left'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		files,
+		onopen,
+		openLabel = 'Open diff',
+		title = (count) => `${count} ${count === 1 ? 'file' : 'files'} changed`,
+		sx,
+		class: className
+	}: ChangesSummaryProps = $props();
+
+	const additions = $derived(files.reduce((sum, file) => sum + file.additions, 0));
+	const deletions = $derived(files.reduce((sum, file) => sum + file.deletions, 0));
+</script>
+
+<section
+	aria-label={title(files.length)}
+	data-slot="changes-summary"
+	{...attrs([styles.card, sx], className)}
+>
+	<div {...stylex.attrs(styles.head)}>
+		<p {...stylex.attrs(styles.title)}>{title(files.length)}</p>
+		<ChangeStats {additions} {deletions} />
+		{#if onopen}<Button size="sm" variant="ghost" onclick={() => onopen?.()}>{openLabel}</Button
+			>{/if}
+	</div>
+	<ul {...stylex.attrs(styles.list)}>
+		{#each files as file (file.path)}
+			{@const cut = file.path.lastIndexOf('/') + 1}
+			<li>
+				<button type="button" {...stylex.attrs(styles.file)} onclick={() => onopen?.(file.path)}>
+					{#if file.status}<span
+							aria-hidden="true"
+							{...stylex.attrs(styles.mark, styles[file.status])}>{STATUS[file.status]}</span
+						>{/if}
+					<span {...stylex.attrs(styles.path)}
+						><bdi
+							>{file.path.slice(0, cut)}<span {...stylex.attrs(styles.name)}
+								>{file.path.slice(cut)}</span
+							></bdi
+						></span
+					>
+					<ChangeStats additions={file.additions} deletions={file.deletions} hideZero />
+				</button>
+			</li>
+		{/each}
+	</ul>
+</section>

package/dist/components/changes-summary/ChangesSummary.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type Sx } from '../../internal/sx.js';
+export type ChangedFile = {
+    path: string;
+    additions: number;
+    deletions: number;
+    status?: 'added' | 'modified' | 'deleted' | 'renamed';
+};
+export type ChangesSummaryProps = {
+    files: ChangedFile[];
+    /** Opens the diff, at a file when one is given. */
+    onopen?: (path?: string) => void;
+    openLabel?: string;
+    /** How the count is said: "3 files changed". */
+    title?: (count: number) => string;
+    sx?: Sx;
+    class?: string;
+};
+declare const ChangesSummary: import("svelte").Component<ChangesSummaryProps, {}, "">;
+type ChangesSummary = ReturnType<typeof ChangesSummary>;
+export default ChangesSummary;

package/dist/components/checkbox/Checkbox.svelte

@@ -0,0 +1,178 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+
+	export type CheckboxProps = Omit<HTMLInputAttributes, 'type' | 'children'> & {
+		checked?: boolean;
+		/** Shows a dash for a partially selected group. Cleared when the user toggles the box. */
+		indeterminate?: boolean;
+		disabled?: boolean;
+		/** A second, quieter line under the label. */
+		description?: string;
+		/** Applied to the outermost element: the label when there is one, else the input. */
+		sx?: Sx;
+		ref?: HTMLInputElement | null;
+		/** Label content. Without it, give the checkbox an `aria-label`. */
+		children?: Snippet;
+	};
+
+	// StyleX needs these in the same file to evaluate them at build time
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+	const FORCED = '@media (forced-colors: active)';
+
+	const CHECK = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-6'/%3E%3C/svg%3E")`;
+	const DASH = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2.5 6h7'/%3E%3C/svg%3E")`;
+
+	const styles = stylex.create({
+		root: {
+			display: 'inline-flex',
+			alignItems: 'flex-start',
+			gap: '0.625rem',
+			color: colors.text,
+			fontFamily: font.body,
+			fontSize: font.sizeMd,
+			lineHeight: '1.25rem',
+			cursor: 'pointer',
+			WebkitTapHighlightColor: 'transparent'
+		},
+		rootDisabled: {
+			color: colors.textSubtle,
+			cursor: 'not-allowed'
+		},
+		description: {
+			display: 'block',
+			color: colors.textSubtle,
+			fontSize: font.sizeXs,
+			lineHeight: font.leadingSnug
+		},
+		input: {
+			position: 'relative',
+			display: 'inline-grid',
+			placeContent: 'center',
+			flexShrink: 0,
+			boxSizing: 'border-box',
+			width: '1rem',
+			height: '1rem',
+			margin: 0,
+			// Centre the 16px box on the label's 20px first line
+			marginBlock: '2px',
+			borderWidth: '1px',
+			borderStyle: 'solid',
+			borderRadius: radius.xs,
+			borderColor: {
+				default: colors.edge,
+				':hover': { default: null, [HOVER]: colors.edgeHover },
+				':checked': 'transparent',
+				':indeterminate': 'transparent',
+				[FORCED]: 'ButtonText'
+			},
+			backgroundColor: { default: colors.well, [FORCED]: 'Canvas' },
+			backgroundOrigin: 'border-box',
+			backgroundImage: {
+				default: 'none',
+				':checked': `linear-gradient(180deg, ${colors.ithil}, ${colors.ithilStrong})`,
+				':indeterminate': `linear-gradient(180deg, ${colors.ithil}, ${colors.ithilStrong})`,
+				[FORCED]: {
+					default: 'none',
+					':checked': 'linear-gradient(Highlight, Highlight)',
+					':indeterminate': 'linear-gradient(Highlight, Highlight)'
+				}
+			},
+			boxShadow: {
+				default: `inset 0 1px 2px ${colors.shade}`,
+				':checked': `inset 0 1px 0 rgb(255 255 255 / 0.4), 0 0 6px ${colors.glow}`,
+				':indeterminate': `inset 0 1px 0 rgb(255 255 255 / 0.4), 0 0 6px ${colors.glow}`
+			},
+			forcedColorAdjust: 'none',
+			appearance: 'none',
+			cursor: { default: 'pointer', ':disabled': 'not-allowed' },
+			opacity: { default: 1, ':disabled': 0.5 },
+			outlineStyle: 'solid',
+			outlineWidth: { default: 0, ':focus-visible': '2px' },
+			outlineColor: colors.focusRing,
+			outlineOffset: '2px',
+			transitionProperty: 'border-color',
+			transitionDuration: motion.base,
+			transitionTimingFunction: 'ease',
+			'::before': {
+				content: '""',
+				width: '0.625rem',
+				height: '0.625rem',
+				backgroundColor: { default: colors.onIthil, [FORCED]: 'HighlightText' },
+				maskImage: { default: CHECK, ':indeterminate': DASH },
+				maskSize: 'contain',
+				maskRepeat: 'no-repeat',
+				maskPosition: 'center',
+				opacity: { default: 0, ':checked': 1, ':indeterminate': 1 },
+				// The mark settles in from just under full size, with a touch of blur to
+				// soften the swap. It never grows from nothing, and it is quick: boxes
+				// get ticked many times a day.
+				scale: { default: null, [MOTION]: { default: 0.9, ':checked': 1, ':indeterminate': 1 } },
+				filter: {
+					default: null,
+					[MOTION]: { default: 'blur(2px)', ':checked': 'blur(0px)', ':indeterminate': 'blur(0px)' }
+				},
+				transitionProperty: { default: 'opacity', [MOTION]: 'opacity, scale, filter' },
+				transitionDuration: motion.fast,
+				transitionTimingFunction: motion.easeOut
+			}
+		},
+		// Without a label, extend the hit area to 40px
+		standalone: {
+			marginBlock: 0,
+			'::after': {
+				content: '""',
+				position: 'absolute',
+				inset: '-13px'
+			}
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		disabled = false,
+		description,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: CheckboxProps = $props();
+</script>
+
+{#if children}
+	<label {...attrs([styles.root, disabled && styles.rootDisabled, sx], className)}>
+		<input
+			bind:this={ref}
+			bind:checked
+			bind:indeterminate
+			type="checkbox"
+			{disabled}
+			{...rest}
+			{...stylex.attrs(styles.input)}
+		/>
+		<span>
+			{@render children()}
+			{#if description}
+				<span {...stylex.attrs(styles.description)}>{description}</span>
+			{/if}
+		</span>
+	</label>
+{:else}
+	<input
+		bind:this={ref}
+		bind:checked
+		bind:indeterminate
+		type="checkbox"
+		{disabled}
+		{...rest}
+		{...attrs([styles.input, styles.standalone, sx], className)}
+	/>
+{/if}

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type CheckboxProps = Omit<HTMLInputAttributes, 'type' | 'children'> & {
+    checked?: boolean;
+    /** Shows a dash for a partially selected group. Cleared when the user toggles the box. */
+    indeterminate?: boolean;
+    disabled?: boolean;
+    /** A second, quieter line under the label. */
+    description?: string;
+    /** Applied to the outermost element: the label when there is one, else the input. */
+    sx?: Sx;
+    ref?: HTMLInputElement | null;
+    /** Label content. Without it, give the checkbox an `aria-label`. */
+    children?: Snippet;
+};
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "ref" | "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/code/Code.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font } from '../../tokens.stylex.js';
+
+	export type CodeProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		base: {
+			paddingBlock: '0.125em',
+			paddingInline: '0.35em',
+			borderRadius: '0.35em',
+			backgroundColor: colors.surfaceRaised,
+			boxShadow: `inset 0 0 0 1px ${colors.line}`,
+			color: colors.text,
+			fontFamily: font.mono,
+			fontSize: '0.875em',
+			fontVariantLigatures: 'none',
+			overflowWrap: 'break-word'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: CodeProps = $props();
+</script>
+
+<code {...rest} {...attrs([styles.base, sx], className)}>{@render children?.()}</code>

package/dist/components/code/Code.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type CodeProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const Code: import("svelte").Component<CodeProps, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;

package/dist/components/command/CommandDialog.svelte

@@ -0,0 +1,37 @@
+<!--
+	The command palette: a search field over everything the app can do, in a
+	dialog of its own. Wire the shortcut that opens it, usually ⌘K, in your app.
+-->
+<script lang="ts" module>
+	import { Dialog } from 'bits-ui';
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import { command } from './styles.js';
+
+	export type CommandDialogProps = {
+		/** Whether it is open. Bindable. */
+		open?: boolean;
+		/** What the palette is, for assistive technology. */
+		label?: string;
+		/** A Command.Root with its Input, List and Footer. */
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		open = $bindable(false),
+		label = 'Command palette',
+		children
+	}: CommandDialogProps = $props();
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Portal>
+		<Dialog.Overlay {...stylex.attrs(command.overlay)} />
+		<Dialog.Content data-slot="command-dialog" {...stylex.attrs(command.dialog)}>
+			<Dialog.Title {...stylex.attrs(command.hidden)}>{label}</Dialog.Title>
+			{@render children?.()}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+export type CommandDialogProps = {
+    /** Whether it is open. Bindable. */
+    open?: boolean;
+    /** What the palette is, for assistive technology. */
+    label?: string;
+    /** A Command.Root with its Input, List and Footer. */
+    children?: Snippet;
+};
+declare const CommandDialog: import("svelte").Component<CommandDialogProps, {}, "open">;
+type CommandDialog = ReturnType<typeof CommandDialog>;
+export default CommandDialog;

package/dist/components/command/CommandEmpty.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+	import { Command } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { command } from './styles.js';
+
+	export type CommandEmptyProps = Omit<Command.EmptyProps, 'children' | 'child'> & {
+		sx?: Sx;
+		/** What to say when nothing matches. Say what was searched for, and what to try. */
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: CommandEmptyProps = $props();
+</script>
+
+<Command.Empty data-slot="command-empty" {...rest} {...attrs([command.empty, sx], className)}>
+	{#if children}{@render children()}{:else}Nothing matches.{/if}
+</Command.Empty>

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

@@ -0,0 +1,11 @@
+import { Command } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type CommandEmptyProps = Omit<Command.EmptyProps, 'children' | 'child'> & {
+    sx?: Sx;
+    /** What to say when nothing matches. Say what was searched for, and what to try. */
+    children?: Snippet;
+};
+declare const CommandEmpty: import("svelte").Component<CommandEmptyProps, {}, "">;
+type CommandEmpty = ReturnType<typeof CommandEmpty>;
+export default CommandEmpty;

package/dist/components/command/CommandFooter.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { command } from './styles.js';
+
+	export type CommandFooterProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		sx?: Sx;
+		/** Hints for the keys, such as "↑↓ to move". */
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: CommandFooterProps = $props();
+</script>
+
+<div
+	data-slot="command-footer"
+	aria-hidden="true"
+	{...rest}
+	{...attrs([command.footer, sx], className)}
+>
+	{@render children?.()}
+</div>