@thomasfosterau/components 0.0.0-stage → 0.1.0

package/dist/links/EmailLink.svelte

@@ -0,0 +1,26 @@
+<!-- @component
+A `mailto:` link whose subject, body, cc and bcc are correctly encoded.
+-->
+<!--
+  EmailLink — a `mailto:` anchor, its query string (`subject`/`body`/`cc`/
+  `bcc`) built with `URLSearchParams` so every value is correctly encoded.
+
+  ARIA contract: none beyond the native `<a>` — the visible text (the address
+  by default, or `children` when given) is the accessible name.
+-->
+<script lang="ts">let { email, subject, body, cc, bcc, children, class: className, ...rest } = $props();
+const href = $derived.by(() => {
+	const params = new URLSearchParams();
+	if (subject) params.set("subject", subject);
+	if (body) params.set("body", body);
+	if (cc) params.set("cc", cc);
+	if (bcc) params.set("bcc", bcc);
+	const query = params.toString();
+	return `mailto:${email}${query ? `?${query}` : ""}`;
+});
+export {};
+</script>
+
+<a {...rest} {href} class={['link link-primary link-hover', className]}>
+  {#if children}{@render children()}{:else}{email}{/if}
+</a>

package/dist/links/EmailLink.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAnchorAttributes, 'children'> {
+    /** The address; also the link text unless `children` replaces it. */
+    email: string;
+    /** Pre-filled subject line. */
+    subject?: string | undefined;
+    /** Pre-filled message body. */
+    body?: string | undefined;
+    /** Address to copy. */
+    cc?: string | undefined;
+    /** Address to blind-copy. */
+    bcc?: string | undefined;
+    /** Replaces the link text; defaults to the address itself. */
+    children?: Snippet<[]> | undefined;
+}
+/** A `mailto:` link whose subject, body, cc and bcc are correctly encoded. */
+declare const EmailLink: import("svelte").Component<Props, {}, "">;
+type EmailLink = ReturnType<typeof EmailLink>;
+export default EmailLink;

package/dist/links/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * links — see the package README for the family reference.
+ *
+ * @module
+ */
+export { default as EmailLink } from './EmailLink.svelte';
+export { default as ContextLinks, type ContextLinkItem } from './ContextLinks.svelte';

package/dist/links/index.js

@@ -0,0 +1,7 @@
+/**
+ * links — see the package README for the family reference.
+ *
+ * @module
+ */
+export { default as EmailLink } from './EmailLink.svelte';
+export { default as ContextLinks } from './ContextLinks.svelte';

package/dist/media/Figure.svelte

@@ -0,0 +1,26 @@
+<!-- @component
+A `<figure>` with an optional `<figcaption>`, for media that needs a caption.
+-->
+<!--
+  Figure — a `<figure>` with an optional `<figcaption>`, for media that needs
+  a caption associated with it (an image, a video, a diagram).
+
+  ARIA contract: none beyond the native grouping — `<figure>`/`<figcaption>`
+  already associate the caption with its content for assistive technology.
+-->
+<script lang="ts">let { caption, children, class: className, ...rest } = $props();
+export {};
+</script>
+
+<figure {...rest} class={className}>
+  {@render children()}
+  {#if caption}
+    <figcaption>
+      {#if typeof caption === 'string'}
+        {caption}
+      {:else}
+        {@render caption()}
+      {/if}
+    </figcaption>
+  {/if}
+</figure>

package/dist/media/Figure.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** Rendered as `<figcaption>`; a plain string or a snippet for richer markup. */
+    caption?: string | Snippet<[]> | undefined;
+    /** The image, video or diagram the caption describes. */
+    children: Snippet<[]>;
+}
+/** A `<figure>` with an optional `<figcaption>`, for media that needs a caption. */
+declare const Figure: import("svelte").Component<Props, {}, "">;
+type Figure = ReturnType<typeof Figure>;
+export default Figure;

package/dist/media/Image.svelte

@@ -0,0 +1,76 @@
+<!-- @component
+A responsive `<img>` from a URL or an uploaded image id, optionally wrapped in `<picture>`. `decoding` defaults to `'async'`.
+-->
+<!--
+  Image — a responsive `<img>`, optionally wrapped in `<picture>`.
+
+  Two ways to get a `srcset`: pass `src` directly for a plain image, or pass
+  `id` (+ optionally `base`/`widths`) for a width-bucketed rendition served
+  by an image-transform route (`${base}/${id}?w=${w}`). Requesting an arbitrary width
+  would defeat that bucketing (every distinct width is a distinct transform
+  and a distinct cache entry), so `widths` is a fixed list, not a free number.
+
+  `sources` adds art-direction / format-negotiation `<source>` elements ahead
+  of the `<img>` fallback, wrapping everything in `<picture>` — each source's
+  own `srcset` is the caller's (e.g. an AVIF/WebP rendition list), unrelated
+  to the `id`-bucketing above.
+
+  `width`/`height` reserve the box before the bytes arrive — the single most
+  visible layout-shift regression a media-heavy page can ship — so pass them
+  whenever they are known.
+
+  ARIA contract: `alt` is required and not defaulted — a caller with no
+  meaningful text must pass `""` (decorative) explicitly, which is a
+  different, deliberate claim from having forgotten it.
+-->
+<script lang="ts">const DEFAULT_WIDTHS = [
+	320,
+	640,
+	960,
+	1280,
+	1920
+];
+let { alt, src, id, base = "/images", widths = DEFAULT_WIDTHS, sources, width, height, sizes = "100vw", eager = false, decoding = "async", ...rest } = $props();
+const bucketedHref = $derived(id === undefined ? undefined : `${base}/${id}`);
+const bucketedSrcset = $derived(bucketedHref === undefined ? undefined : widths.map((w) => `${bucketedHref}?w=${w} ${w}w`).join(", "));
+// The largest bucket as the plain `src`: the fallback a browser without
+// `srcset` support (and every crawler) fetches.
+const fallbackWidth = $derived(widths[widths.length - 1]);
+const resolvedSrc = $derived(src ?? (bucketedHref === undefined ? undefined : `${bucketedHref}?w=${fallbackWidth}`));
+const loading = $derived(eager ? "eager" : "lazy");
+const fetchpriority = $derived(eager ? "high" : undefined);
+export {};
+</script>
+
+{#if sources && sources.length > 0}
+  <picture>
+    {#each sources as source (source.srcset)}
+      <source srcset={source.srcset} type={source.type} media={source.media} />
+    {/each}
+    <img
+      {...rest}
+      src={resolvedSrc}
+      srcset={bucketedSrcset}
+      {sizes}
+      {alt}
+      {width}
+      {height}
+      {loading}
+      {fetchpriority}
+      {decoding}
+    />
+  </picture>
+{:else}
+  <img
+    {...rest}
+    src={resolvedSrc}
+    srcset={bucketedSrcset}
+    {sizes}
+    {alt}
+    {width}
+    {height}
+    {loading}
+    {fetchpriority}
+    {decoding}
+  />
+{/if}

package/dist/media/Image.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+interface ImageSource {
+    srcset: string;
+    type?: string | undefined;
+    media?: string | undefined;
+}
+interface Props extends HTMLImgAttributes {
+    /** Alternative text; `''` only where the image is decoration. */
+    alt: string;
+    /** A plain image URL. Mutually exclusive with `id`; `src` wins if both are given. */
+    src?: string | undefined;
+    /** An uploaded image's id — combined with `base`/`widths` into a bucketed `srcset`. */
+    id?: string | undefined;
+    /**
+     * Route prefix the bucketed rendition lives under.
+     * @defaultValue `'/images'`
+     */
+    base?: string | undefined;
+    /**
+     * The width buckets the transform route serves. Must match its own list.
+     * @defaultValue `[320, 640, 960, 1280, 1920]`
+     */
+    widths?: readonly number[] | undefined;
+    /** Extra `<source>` elements (art direction / format negotiation) ahead of the `<img>` fallback. Wraps everything in `<picture>`. */
+    sources?: readonly ImageSource[] | undefined;
+    /** Intrinsic width; reserves the box against layout shift. */
+    width?: number | string | undefined;
+    /** Intrinsic height; reserves the box against layout shift. */
+    height?: number | string | undefined;
+    /**
+     * The `sizes` hint.
+     * @defaultValue `'100vw'`
+     */
+    sizes?: string | undefined;
+    /** Eager-load this image. Use for the one image above the fold; everything else stays lazy. */
+    eager?: boolean | undefined;
+}
+/** A responsive `<img>` from a URL or an uploaded image id, optionally wrapped in `<picture>`. `decoding` defaults to `'async'`. */
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/media/Video.svelte

@@ -0,0 +1,65 @@
+<!-- @component
+An HLS video player (Cloudflare Stream shape) with a placeholder while the upload is still pending or processing.
+-->
+<!--
+  Video — the player for an HLS-served video (Cloudflare Stream shape:
+  manifest URL + poster + an upload lifecycle).
+
+  Deliberately a plain `<video>` with the HLS manifest as its source and the
+  generated thumbnail as its poster. That plays natively in Safari and on
+  iOS; everywhere else it needs an MSE shim (e.g. hls.js), which is an
+  app-side concern and stays out of this package — it is a real dependency
+  weight that must never land in the always-loaded closure of a package every
+  page imports. A caller that wants universal playback attaches the shim to
+  the element handed to `onReady`.
+
+  While the upload is still pending/processing there is no manifest at all,
+  so the component renders the poster (or a neutral placeholder) with the
+  state spelled out via `statusLabel` rather than an empty player that
+  silently fails.
+
+  ARIA contract: `title` is the player's accessible name (`aria-label`); the
+  non-playable placeholder's `statusLabel` is a `badge-neutral`, visible text,
+  not conveyed through colour alone.
+-->
+<script lang="ts">let { hlsUrl, posterUrl, title, width, height, uploadState = "ready", statusLabel, onReady, captionsSrc, class: className } = $props();
+let element = $state();
+const playable = $derived(uploadState === "ready" && hlsUrl !== undefined);
+$effect(() => {
+	if (element && playable) onReady?.(element);
+});
+</script>
+
+<div class={['bg-base-200 rounded-box overflow-hidden', className]}>
+  {#if playable}
+    <video
+      bind:this={element}
+      controls
+      preload="none"
+      poster={posterUrl}
+      {width}
+      {height}
+      aria-label={title}
+      class="aspect-video h-auto w-full max-w-full"
+    >
+      <source src={hlsUrl} type="application/x-mpegURL" />
+      {#if captionsSrc}
+        <track kind="captions" src={captionsSrc} />
+      {:else}
+        <!-- A `<track>` is required for a caption-less video to be valid; an
+             empty default track is the honest statement that none exists yet,
+             rather than silently shipping a video with no captions option. -->
+        <track kind="captions" />
+      {/if}
+    </video>
+  {:else}
+    <div class="aspect-video relative flex w-full items-center justify-center">
+      {#if posterUrl}
+        <img src={posterUrl} alt="" class="h-full w-full object-cover opacity-60" />
+      {/if}
+      {#if statusLabel}
+        <span class="badge badge-neutral absolute">{statusLabel}</span>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/media/Video.svelte.d.ts

@@ -0,0 +1,29 @@
+interface Props {
+    /** The HLS manifest URL; absent until the encode finishes. */
+    hlsUrl?: string | undefined;
+    /** The poster frame. */
+    posterUrl?: string | undefined;
+    /** Accessible name for the player. */
+    title: string;
+    /** Intrinsic dimensions, when known — reserves the box against layout shift. */
+    width?: number | undefined;
+    /** Intrinsic height, when known. */
+    height?: number | undefined;
+    /**
+     * Where the upload is in its lifecycle.
+     * @defaultValue `'ready'`
+     */
+    uploadState?: 'pending' | 'processing' | 'ready' | 'failed' | undefined;
+    /** Copy for the non-playable placeholder state, supplied by the app (this package holds no messages). */
+    statusLabel?: string | undefined;
+    /** Called with the mounted `<video>` element once it is playable, for a caller attaching an MSE shim. */
+    onReady?: ((element: HTMLVideoElement) => void) | undefined;
+    /** A captions track URL (WebVTT). When absent, an empty track is still rendered — see below. */
+    captionsSrc?: string | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** An HLS video player (Cloudflare Stream shape) with a placeholder while the upload is still pending or processing. */
+declare const Video: import("svelte").Component<Props, {}, "">;
+type Video = ReturnType<typeof Video>;
+export default Video;

package/dist/media/image-dimensions.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Reading an image file's intrinsic pixel dimensions in the browser.
+ *
+ * A form that uploads an image wants its `width` / `height` alongside the
+ * binary, so the page that later renders it can reserve the box on first
+ * paint instead of reflowing when it loads — and the browser can decode the
+ * file for free the moment it is chosen, where a server would have to.
+ * `fields/ImageInput` measures with this; a caller with its own file control
+ * uses it directly.
+ *
+ * @module
+ */
+/** An image's intrinsic size, in pixels. */
+export interface ImageDimensions {
+    readonly width: number;
+    readonly height: number;
+}
+/** Thrown by {@link imageDimensions} where there is no `createImageBitmap` (on a server). */
+export declare class ImageDimensionsUnavailable extends Error {
+    readonly name = "ImageDimensionsUnavailable";
+}
+/**
+ * Decode `file` with `createImageBitmap` and return its pixel size.
+ *
+ * Rejects with {@link ImageDimensionsUnavailable} outside a browser, and with
+ * the browser's own error when the file does not decode as an image.
+ */
+export declare function imageDimensions(file: Blob): Promise<ImageDimensions>;

package/dist/media/image-dimensions.js

@@ -0,0 +1,34 @@
+/**
+ * Reading an image file's intrinsic pixel dimensions in the browser.
+ *
+ * A form that uploads an image wants its `width` / `height` alongside the
+ * binary, so the page that later renders it can reserve the box on first
+ * paint instead of reflowing when it loads — and the browser can decode the
+ * file for free the moment it is chosen, where a server would have to.
+ * `fields/ImageInput` measures with this; a caller with its own file control
+ * uses it directly.
+ *
+ * @module
+ */
+/** Thrown by {@link imageDimensions} where there is no `createImageBitmap` (on a server). */
+export class ImageDimensionsUnavailable extends Error {
+    name = 'ImageDimensionsUnavailable';
+}
+/**
+ * Decode `file` with `createImageBitmap` and return its pixel size.
+ *
+ * Rejects with {@link ImageDimensionsUnavailable} outside a browser, and with
+ * the browser's own error when the file does not decode as an image.
+ */
+export async function imageDimensions(file) {
+    if (typeof globalThis.createImageBitmap !== 'function') {
+        throw new ImageDimensionsUnavailable('imageDimensions needs createImageBitmap, which only a browser has.');
+    }
+    const bitmap = await globalThis.createImageBitmap(file);
+    try {
+        return { width: bitmap.width, height: bitmap.height };
+    }
+    finally {
+        bitmap.close();
+    }
+}

package/dist/media/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * media — images, video and figures. See the package README for the family
+ * reference.
+ *
+ * @module
+ */
+export { default as Image } from './Image.svelte';
+export { default as Video } from './Video.svelte';
+export { default as Figure } from './Figure.svelte';
+export { imageDimensions, ImageDimensionsUnavailable, type ImageDimensions, } from './image-dimensions.ts';

package/dist/media/index.js

@@ -0,0 +1,10 @@
+/**
+ * media — images, video and figures. See the package README for the family
+ * reference.
+ *
+ * @module
+ */
+export { default as Image } from './Image.svelte';
+export { default as Video } from './Video.svelte';
+export { default as Figure } from './Figure.svelte';
+export { imageDimensions, ImageDimensionsUnavailable, } from "./image-dimensions.js";

package/dist/search/CommandPalette.svelte

@@ -0,0 +1,257 @@
+<!-- @component
+The ⌘K / Ctrl+K command palette: bits-ui’s `Command` inside this library’s `Dialog`.
+-->
+<!--
+  CommandPalette — the ⌘K / Ctrl+K palette: bits-ui's `Command` inside this
+  library's `Dialog`.
+
+  Two sources of rows, either of which may be absent:
+
+  - **The hotkey registry**, when one is mounted above. `paletteActions` is
+    already role-filtered and in registration order, and each row shows its
+    trigger as a `HotkeyBadge`, so the palette teaches the keyboard while it
+    is used with the mouse. The palette also binds its open state to the
+    registry's `paletteOpen`, which is what a registered `$mod+k` action
+    toggles.
+  - **`items` and `onSearch`**, which need no registry at all. That is what
+    makes this usable in an app that wants a palette but not a hotkey system.
+
+  The search lifecycle is `fields/Combobox`'s, for the same reasons: a
+  keystroke does not start a request, `debounceMs` of quiet does; each request
+  gets an `AbortController` and starting a new one aborts the last, so a slow
+  first response cannot overwrite a fast second one; and the previous rows
+  stay on screen while the next request is in flight, because clearing on
+  every keystroke makes the list strobe and costs the reader the row they were
+  about to pick.
+
+  `shouldFilter` is off exactly when `onSearch` is given: async rows are
+  already the server's answer to the query, and bits-ui re-filtering them
+  would hide rows whose match is in a field the label doesn't show. Without
+  `onSearch`, bits-ui's own scoring is better than anything here. Registry and
+  `items` rows are filtered locally by label in the async case, so they do not
+  outlive the query either.
+
+  ARIA contract: `Dialog`'s (bits-ui: `aria-modal`, the focus trap, Escape,
+  the focus return) plus `Command`'s — the input is a `combobox` owning a
+  `listbox`, each row an `option`, `aria-activedescendant` follows the arrow
+  keys and Enter selects. `label` names the command menu for assistive
+  technology and also titles the dialog. The pending row is
+  `Command.Loading`, named by `loadingLabel`, so a reader is told the list is
+  still settling instead of hearing an empty list.
+-->
+<script lang="ts">import { Command } from "bits-ui";
+import { untrack } from "svelte";
+import { getComponentsContext } from "../context.svelte.js";
+import Dialog from "../feedback/Dialog.svelte";
+import HotkeyBadge from "../hotkeys/HotkeyBadge.svelte";
+import { tryGetHotkeyRegistry } from "../hotkeys/context.svelte.js";
+import Badge from "../ui/Badge.svelte";
+import { defaultCommandGroups } from "./types.js";
+let { open = $bindable(false), label = "Command palette", placeholder = "Type a command or search…", loadingLabel = "Searching…", emptyLabel = "No results", closeLabel = "Close", groups = defaultCommandGroups, items, onSearch, debounceMs = 150, onSelect, item } = $props();
+const context = getComponentsContext();
+const registry = tryGetHotkeyRegistry();
+let query = $state("");
+const trimmedQuery = $derived(query.trim());
+// ── Open state ───────────────────────────────────────────────────
+//
+// With a registry, `paletteOpen` and `open` are two halves of one value:
+// the registered `$mod+k` action writes the registry, a caller may write
+// the prop, and both have to end up agreeing. The trackers below make the
+// sync converge — whichever side changed is copied to the other and both
+// trackers are updated, so the effect's own writes find nothing to do on
+// the re-run.
+let lastOpen = open;
+let lastPaletteOpen = registry?.paletteOpen ?? open;
+$effect(() => {
+	if (registry === undefined) return;
+	const fromProp = open;
+	const fromRegistry = registry.paletteOpen;
+	if (fromProp !== lastOpen) {
+		lastOpen = fromProp;
+		lastPaletteOpen = fromProp;
+		registry.paletteOpen = fromProp;
+	} else if (fromRegistry !== lastPaletteOpen) {
+		lastPaletteOpen = fromRegistry;
+		lastOpen = fromRegistry;
+		open = fromRegistry;
+	}
+});
+// bits-ui's `Dialog` moves focus to the first tabbable child as it opens,
+// which here is the dialog's own close button. A palette has to open with
+// the cursor in its query box — anything else costs the reader a Tab before
+// they can type, and leaves the arrow keys (which `Command` handles on the
+// input) doing nothing. Hence the frame's delay: focusing before the
+// dialog's own focus move would simply be undone.
+let input = $state(null);
+$effect(() => {
+	const element = input;
+	if (!open || element === null) return;
+	const frame = requestAnimationFrame(() => element.focus());
+	return () => cancelAnimationFrame(frame);
+});
+const setOpen = (next) => {
+	open = next;
+	// Closing clears the query: a palette that reopens on the last search is
+	// a palette that shows yesterday's answer to today's question.
+	if (!next) query = "";
+};
+/** In async mode this component owns filtering, so local rows filter here. */
+const matchesQuery = (candidate) => {
+	if (onSearch === undefined || trimmedQuery === "") return true;
+	return candidate.label.toLowerCase().includes(trimmedQuery.toLowerCase());
+};
+const registryRows = $derived((registry?.paletteActions ?? []).map((entry) => ({
+	item: {
+		id: entry.action.id,
+		label: entry.action.label,
+		group: entry.action.group,
+		run: entry.action.run
+	},
+	trigger: entry.action.trigger
+})));
+const staticRows = $derived((items ?? []).map((candidate) => ({
+	item: candidate,
+	trigger: undefined
+})));
+let results = $state([]);
+const resultRows = $derived(results.map((candidate) => ({
+	item: candidate,
+	trigger: undefined
+})));
+const rows = $derived([
+	...registryRows,
+	...staticRows,
+	...resultRows
+].filter((row) => matchesQuery(row.item)));
+const sections = $derived(groups.map((group) => ({
+	group,
+	rows: rows.filter((row) => row.item.group === group.id)
+})).filter((section) => section.rows.length > 0));
+// ── Async search ─────────────────────────────────────────────────
+let pending = $state(false);
+let timer;
+let inFlight;
+const search = (text) => {
+	if (onSearch === undefined) return;
+	inFlight?.abort();
+	const own = new AbortController();
+	inFlight = own;
+	pending = true;
+	void onSearch(text, own.signal).then((next) => {
+		// A superseded request must not write: `inFlight` is the identity
+		// check, `signal.aborted` catches the caller aborting its own work.
+		if (own.signal.aborted || inFlight !== own) return;
+		results = next;
+		pending = false;
+	}).catch(() => {
+		if (own.signal.aborted || inFlight !== own) return;
+		pending = false;
+	});
+};
+const cancel = () => {
+	if (timer !== undefined) clearTimeout(timer);
+	timer = undefined;
+	inFlight?.abort();
+	inFlight = undefined;
+};
+const emit = (text) => {
+	if (onSearch === undefined) return;
+	if (text === "") {
+		cancel();
+		pending = false;
+		results = [];
+		return;
+	}
+	if (timer !== undefined) clearTimeout(timer);
+	timer = setTimeout(() => {
+		timer = undefined;
+		search(text);
+	}, debounceMs);
+};
+// Emit only while the palette is open; closing it emits `''`, which resets
+// the rows and cancels anything in flight.
+$effect(() => {
+	const text = open ? trimmedQuery : "";
+	untrack(() => emit(text));
+});
+$effect(() => () => cancel());
+const isEmpty = $derived(trimmedQuery.length > 0 && !pending && sections.length === 0);
+// ── Activation ───────────────────────────────────────────────────
+const activate = (candidate) => {
+	setOpen(false);
+	onSelect?.(candidate);
+	if (candidate.run !== undefined) void candidate.run();
+	if (candidate.href !== undefined) void context.navigate(context.href(candidate.href));
+};
+</script>
+
+{#snippet row(entry: Row)}
+  <Command.Item
+    value={`${entry.item.group}:${entry.item.id}`}
+    keywords={[entry.item.label]}
+    onSelect={() => activate(entry.item)}
+    class="data-selected:bg-base-200 flex cursor-pointer items-center justify-between gap-4 rounded px-3 py-2"
+  >
+    {#if item}
+      {@render item(entry.item)}
+    {:else}
+      <span class="flex min-w-0 items-baseline gap-2">
+        <span class="truncate text-sm">{entry.item.label}</span>
+        {#if entry.item.hint !== undefined}
+          <span class="text-base-content/60 truncate text-xs">{entry.item.hint}</span>
+        {/if}
+      </span>
+      {#if entry.trigger !== undefined}
+        <HotkeyBadge trigger={entry.trigger} />
+      {:else if entry.item.badge !== undefined}
+        <Badge size="sm">{entry.item.badge}</Badge>
+      {/if}
+    {/if}
+  </Command.Item>
+{/snippet}
+
+<Dialog bind:open={() => open, setOpen} title={label} {closeLabel}>
+  <Command.Root shouldFilter={onSearch === undefined} loop {label} class="flex flex-col">
+    <Command.Input
+      bind:ref={input}
+      bind:value={query}
+      {placeholder}
+      class="input border-base-300 w-full rounded-none border-0 border-b focus:outline-none"
+    />
+    <Command.List class="max-h-96 overflow-x-hidden overflow-y-auto pt-2">
+      <Command.Viewport>
+        {#each sections as section (section.group.id)}
+          <Command.Group value={section.group.id}>
+            <Command.GroupHeading
+              class="text-base-content/70 px-3 pt-3 pb-1 text-xs font-semibold tracking-wide uppercase"
+            >
+              {section.group.label}
+            </Command.GroupHeading>
+            <Command.GroupItems>
+              {#each section.rows as entry (`${entry.item.group}:${entry.item.id}`)}
+                {@render row(entry)}
+              {/each}
+            </Command.GroupItems>
+          </Command.Group>
+        {/each}
+
+        {#if pending && trimmedQuery.length > 0}
+          <!-- Through `child` so `aria-label` lands AFTER bits-ui's own
+               props: `Command.Loading` hard-codes the English "Loading...",
+               and in this library the name of anything is a prop. -->
+          <Command.Loading>
+            {#snippet child({ props })}
+              <div {...props} aria-label={loadingLabel} class="text-base-content/60 px-3 py-2 text-sm">
+                {loadingLabel}
+              </div>
+            {/snippet}
+          </Command.Loading>
+        {/if}
+
+        {#if isEmpty}
+          <p class="text-base-content/60 px-3 py-6 text-center text-sm">{emptyLabel}</p>
+        {/if}
+      </Command.Viewport>
+    </Command.List>
+  </Command.Root>
+</Dialog>