@happyvertical/smrt-svelte 0.55.7 → 0.55.8

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

@@ -0,0 +1,406 @@
+<script lang="ts">
+/**
+ * CommandPaletteDialog - the palette itself: a modal with a search box and a
+ * grouped result list, driven by a {@link CommandPaletteController}.
+ *
+ * It follows the WAI-ARIA combobox pattern: focus stays in the search box,
+ * the highlighted row is `aria-activedescendant`, Up/Down move it, Enter
+ * chooses it and Escape closes. It also installs the global shortcut
+ * (`Mod+K` by default) that toggles the palette. The shortcut works in any
+ * field because it carries a modifier; a bare key such as `/` is ignored
+ * while the user is typing.
+ *
+ * The palette comes from the `palette` prop or the nearest
+ * `setCommandPalette()` context.
+ */
+import { Modal } from '@happyvertical/smrt-ui/feedback';
+import { Input } from '@happyvertical/smrt-ui/forms';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { onMount, tick } from 'svelte';
+import { M } from '../../i18n/strings.palette.js';
+import {
+  isShellIconName,
+  SHELL_ICON_PATHS,
+} from '../workspace/admin-shell/shell-icons.js';
+import { palettePicker } from './context.js';
+import type { CommandPaletteController } from './controller.svelte.js';
+import {
+  DEFAULT_PALETTE_HOTKEYS,
+  formatPaletteHotkey,
+  isApplePlatform,
+  isPaletteHotkeyEvent,
+  type PaletteHotkey,
+  parsePaletteHotkey,
+} from './hotkeys.js';
+import { highlightSegments } from './match.js';
+import type { PaletteResult } from './types.js';
+
+interface Props {
+  /** The palette to drive; default: the one on context. */
+  palette?: CommandPaletteController;
+  /**
+   * Shortcuts that toggle the palette, e.g. `['Mod+K', '/']`. `false` installs
+   * none (open it from your own control).
+   */
+  hotkeys?: readonly string[] | false;
+  /** Accessible name of the dialog. */
+  label?: string;
+  /** Search box placeholder. */
+  placeholder?: string;
+}
+
+let {
+  palette: paletteProp,
+  hotkeys = DEFAULT_PALETTE_HOTKEYS,
+  label,
+  placeholder,
+}: Props = $props();
+
+const { t } = useI18n();
+const pick = palettePicker(() => paletteProp);
+const palette = $derived(pick());
+const uid = $props.id();
+const listId = `smrt-palette-list-${uid}`;
+const optionId = (result: PaletteResult) =>
+  `smrt-palette-opt-${uid}-${result.key.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+
+const parsed: PaletteHotkey[] = $derived(
+  hotkeys === false
+    ? []
+    : hotkeys.flatMap((spec) => {
+        const hotkey = parsePaletteHotkey(spec);
+        return hotkey ? [hotkey] : [];
+      }),
+);
+
+let apple = $state(false);
+onMount(() => {
+  apple = isApplePlatform();
+});
+
+let input: { focus(): void } | undefined = $state();
+
+function onWindowKeydown(event: KeyboardEvent) {
+  if (!isPaletteHotkeyEvent(event, parsed)) return;
+  event.preventDefault();
+  palette.toggle();
+}
+
+$effect(() => {
+  if (!palette.isOpen) return;
+  void tick().then(() => input?.focus());
+});
+
+const active = $derived(palette.active);
+const hasRows = $derived(palette.results.length > 0);
+
+// Keep the highlighted row visible as the arrow keys move it.
+$effect(() => {
+  if (!active || typeof document === 'undefined') return;
+  const row = document.getElementById(optionId(active));
+  if (row && typeof row.scrollIntoView === 'function') {
+    row.scrollIntoView({ block: 'nearest' });
+  }
+});
+
+function onInputKeydown(event: KeyboardEvent) {
+  if (event.isComposing) return;
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault();
+      palette.moveActive(1);
+      break;
+    case 'ArrowUp':
+      event.preventDefault();
+      palette.moveActive(-1);
+      break;
+    case 'Enter':
+      event.preventDefault();
+      void palette.activate();
+      break;
+    case 'PageDown':
+      event.preventDefault();
+      palette.moveActive(5);
+      break;
+    case 'PageUp':
+      event.preventDefault();
+      palette.moveActive(-5);
+      break;
+  }
+}
+
+const statusText = $derived.by(() => {
+  if (!palette.isOpen) return '';
+  const query = palette.query.trim();
+  if (palette.busy && !hasRows) return t(M['ui.command_palette.searching']);
+  if (!hasRows) {
+    return query
+      ? t(M['ui.command_palette.empty'], { query })
+      : t(M['ui.command_palette.nothing']);
+  }
+  const count = palette.results.length;
+  const base =
+    count === 1
+      ? t(M['ui.command_palette.status_one'])
+      : t(M['ui.command_palette.status_many'], { count });
+  return palette.failedProviders.size > 0
+    ? `${base} ${t(M['ui.command_palette.partial'])}`
+    : base;
+});
+
+function iconPath(icon: string | undefined): string | null {
+  return icon && isShellIconName(icon) ? SHELL_ICON_PATHS[icon] : null;
+}
+
+const inputLabel = $derived(label ?? t(M['ui.command_palette.input_label']));
+</script>
+
+<svelte:window onkeydown={onWindowKeydown} />
+
+<Modal
+  bind:open={() => palette.isOpen, (next) => { if (!next) palette.close(); }}
+  ariaLabel={label ?? t(M['ui.command_palette.title'])}
+  showClose={false}
+  size="md"
+>
+  <div class="smrt-command-palette">
+    <div class="smrt-command-palette__field">
+      <svg class="smrt-command-palette__search-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>
+      <Input
+        bind:this={input}
+        type="text"
+        role="combobox"
+        aria-label={inputLabel}
+        aria-expanded={hasRows}
+        aria-controls={listId}
+        aria-autocomplete="list"
+        aria-activedescendant={active ? optionId(active) : undefined}
+        autocomplete="off"
+        autocapitalize="off"
+        spellcheck={false}
+        enterkeyhint="go"
+        placeholder={placeholder ?? t(M['ui.command_palette.placeholder'])}
+        interaction={false}
+        class="smrt-command-palette__input"
+        bind:value={() => palette.query, (next) => palette.setQuery(String(next))}
+        onkeydown={onInputKeydown}
+      />
+    </div>
+
+    <div
+      class="smrt-command-palette__list"
+      id={listId}
+      role="listbox"
+      aria-label={t(M['ui.command_palette.results'])}
+      aria-busy={palette.busy}
+    >
+      {#each palette.sections as section, sectionIndex (section.id)}
+        <div class="smrt-command-palette__group" role="group" aria-labelledby={`${listId}-g${sectionIndex}`}>
+          <div class="smrt-command-palette__heading" id={`${listId}-g${sectionIndex}`}>{section.label}</div>
+          {#each section.results as result (result.key)}
+            {@const path = iconPath(result.item.icon)}
+            {@const shortcut = result.item.shortcut ? formatPaletteHotkey(result.item.shortcut, apple) : ''}
+            <!-- The combobox input owns the keyboard (aria-activedescendant); rows are pointer targets. -->
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <div
+              class="smrt-command-palette__option"
+              id={optionId(result)}
+              role="option"
+              tabindex="-1"
+              aria-selected={active?.key === result.key}
+              aria-disabled={result.selectable ? undefined : true}
+              data-kind={result.item.kind}
+              data-active={active?.key === result.key ? '' : undefined}
+              title={typeof result.item.disabled === 'string' ? result.item.disabled : undefined}
+              onmousedown={(event) => event.preventDefault()}
+              onpointermove={() => palette.setActive(result.key)}
+              onclick={() => void palette.activate(result)}
+            >
+              <span class="smrt-command-palette__icon" aria-hidden="true">
+                {#if path}
+                  <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" focusable="false"><path d={path} /></svg>
+                {/if}
+              </span>
+              <span class="smrt-command-palette__text">
+                <span class="smrt-command-palette__title">
+                  {#each highlightSegments(result.item.title, result.titleRanges) as segment}
+                    {#if segment.match}<mark>{segment.text}</mark>{:else}{segment.text}{/if}
+                  {/each}
+                </span>
+                {#if result.item.subtitle}
+                  <span class="smrt-command-palette__subtitle">{result.item.subtitle}</span>
+                {/if}
+              </span>
+              {#if typeof result.item.disabled === 'string'}
+                <span class="smrt-command-palette__note">{t(M['ui.command_palette.unavailable'])}</span>
+              {:else if shortcut}
+                <kbd class="smrt-command-palette__shortcut">{shortcut}</kbd>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      {/each}
+    </div>
+    {#if !hasRows}
+      <p class="smrt-command-palette__empty">{statusText}</p>
+    {/if}
+
+    <div class="smrt-command-palette__hints" aria-hidden="true">
+      <span><kbd>↑</kbd><kbd>↓</kbd> {t(M['ui.command_palette.hint_move'])}</span>
+      <span><kbd>↵</kbd> {t(M['ui.command_palette.hint_select'])}</span>
+      <span><kbd>Esc</kbd> {t(M['ui.command_palette.hint_close'])}</span>
+    </div>
+
+    <div class="smrt-command-palette__live" role="status" aria-live="polite">{statusText}</div>
+  </div>
+</Modal>
+
+<style>
+  .smrt-command-palette {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    min-block-size: 0;
+  }
+
+  .smrt-command-palette__field {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .smrt-command-palette__search-icon {
+    position: absolute;
+    inset-inline-start: 0.75rem;
+    color: var(--smrt-color-on-surface-variant);
+    pointer-events: none;
+  }
+
+  .smrt-command-palette__field :global(.smrt-command-palette__input) {
+    padding-inline-start: 2.5rem;
+    /* 16px keeps iOS from zooming when the box takes focus. */
+    font-size: max(1rem, var(--smrt-typography-body-medium-size, 0.875rem));
+  }
+
+  .smrt-command-palette__list {
+    max-block-size: min(24rem, 55vh);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .smrt-command-palette__heading {
+    padding: 0.25rem 0.75rem;
+    font-size: var(--smrt-typography-label-small-size, 0.75rem);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .smrt-command-palette__option {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    min-block-size: max(2.5rem, var(--smrt-control-target-min, 0px));
+    padding: 0.375rem 0.75rem;
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    color: var(--smrt-color-on-surface);
+    cursor: pointer;
+  }
+
+  .smrt-command-palette__option[data-active] {
+    background: var(--smrt-color-surface-container-high);
+    box-shadow: inset 3px 0 0 var(--smrt-color-primary);
+  }
+
+  .smrt-command-palette__option[aria-disabled='true'] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  .smrt-command-palette__icon {
+    flex: 0 0 1.125rem;
+    inline-size: 1.125rem;
+    color: var(--smrt-color-on-surface-variant);
+    display: inline-grid;
+    place-items: center;
+  }
+
+  .smrt-command-palette__text {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .smrt-command-palette__title,
+  .smrt-command-palette__subtitle {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .smrt-command-palette__subtitle {
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .smrt-command-palette mark {
+    background: color-mix(in srgb, var(--smrt-color-primary) 18%, transparent);
+    color: inherit;
+    font-weight: var(--smrt-typography-weight-bold, 700);
+    border-radius: 0.125rem;
+  }
+
+  .smrt-command-palette__note {
+    font-size: var(--smrt-typography-label-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .smrt-command-palette kbd {
+    font: inherit;
+    font-size: var(--smrt-typography-label-small-size, 0.75rem);
+    padding: 0.0625rem 0.375rem;
+    border: 1px solid var(--smrt-color-outline-variant, var(--smrt-color-outline));
+    border-radius: var(--smrt-radius-small, 0.375rem);
+    color: var(--smrt-color-on-surface-variant);
+    background: var(--smrt-color-surface-container);
+  }
+
+  .smrt-command-palette__empty {
+    margin: 0;
+    padding: 1.5rem 0.75rem;
+    text-align: center;
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .smrt-command-palette__hints {
+    display: flex;
+    gap: 1rem;
+    padding: 0.25rem 0.75rem 0;
+    font-size: var(--smrt-typography-label-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .smrt-command-palette__hints kbd + kbd {
+    margin-inline-start: 0.125rem;
+  }
+
+  @media (max-width: 48rem) {
+    .smrt-command-palette__hints {
+      display: none;
+    }
+  }
+
+  .smrt-command-palette__live {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+</style>

package/dist/components/command-palette/CommandPaletteDialog.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { CommandPaletteController } from './controller.svelte.js';
+interface Props {
+    /** The palette to drive; default: the one on context. */
+    palette?: CommandPaletteController;
+    /**
+     * Shortcuts that toggle the palette, e.g. `['Mod+K', '/']`. `false` installs
+     * none (open it from your own control).
+     */
+    hotkeys?: readonly string[] | false;
+    /** Accessible name of the dialog. */
+    label?: string;
+    /** Search box placeholder. */
+    placeholder?: string;
+}
+declare const CommandPaletteDialog: import("svelte").Component<Props, {}, "">;
+type CommandPaletteDialog = ReturnType<typeof CommandPaletteDialog>;
+export default CommandPaletteDialog;
+//# sourceMappingURL=CommandPaletteDialog.svelte.d.ts.map

package/dist/components/command-palette/CommandPaletteDialog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/CommandPaletteDialog.svelte.ts"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAavE,UAAU,KAAK;IACb,yDAAyD;IACzD,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,KAAK,CAAC;IACpC,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAwLD,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

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

@@ -0,0 +1,91 @@
+<script lang="ts">
+/**
+ * CommandPaletteTrigger - the shell control that opens the palette: a search
+ * glyph, a label and the shortcut hint. Place it in a shell slot (the header
+ * center or end is the usual home) through `AppShell` `slotItems`. On narrow
+ * screens only the glyph shows; the accessible name stays the label.
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { onMount } from 'svelte';
+import { M } from '../../i18n/strings.palette.js';
+import { palettePicker } from './context.js';
+import type { CommandPaletteController } from './controller.svelte.js';
+import {
+  ariaKeyShortcuts,
+  DEFAULT_PALETTE_HOTKEYS,
+  formatPaletteHotkey,
+  isApplePlatform,
+} from './hotkeys.js';
+
+interface Props {
+  /** The palette to open; default: the one on context. */
+  palette?: CommandPaletteController;
+  /** Button text and accessible name (default "Search"). */
+  label?: string;
+  /** Hint shown after the label: the first shortcut. Match `hotkeys` on the dialog. */
+  hotkeys?: readonly string[];
+  /** Glyph only, at every width. */
+  compact?: boolean;
+  /** Extra class on the button. */
+  class?: string;
+}
+
+let {
+  palette: paletteProp,
+  label,
+  hotkeys = DEFAULT_PALETTE_HOTKEYS,
+  compact = false,
+  class: className = '',
+}: Props = $props();
+
+const { t } = useI18n();
+const pick = palettePicker(() => paletteProp);
+const palette = $derived(pick());
+const text = $derived(label ?? t(M['ui.command_palette.trigger']));
+
+let apple = $state(false);
+onMount(() => {
+  apple = isApplePlatform();
+});
+const hint = $derived(hotkeys[0] ? formatPaletteHotkey(hotkeys[0], apple) : '');
+</script>
+
+<Button
+  variant="ghost"
+  size="sm"
+  class={`smrt-command-palette-trigger ${className}`}
+  aria-label={text}
+  aria-haspopup="dialog"
+  aria-expanded={palette.isOpen}
+  aria-keyshortcuts={ariaKeyShortcuts(hotkeys)}
+  onclick={() => palette.open()}
+>
+  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>
+  {#if !compact}
+    <span class="smrt-command-palette-trigger__label">{text}</span>
+    {#if hint}<kbd class="smrt-command-palette-trigger__hint">{hint}</kbd>{/if}
+  {/if}
+</Button>
+
+<style>
+  :global(.smrt-command-palette-trigger) {
+    gap: 0.5rem;
+  }
+
+  .smrt-command-palette-trigger__hint {
+    font: inherit;
+    font-size: var(--smrt-typography-label-small-size, 0.75rem);
+    padding: 0.0625rem 0.375rem;
+    border: 1px solid var(--smrt-color-outline-variant, var(--smrt-color-outline));
+    border-radius: var(--smrt-radius-small, 0.375rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  @media (max-width: 48rem) {
+    .smrt-command-palette-trigger__label,
+    .smrt-command-palette-trigger__hint {
+      display: none;
+    }
+  }
+</style>

package/dist/components/command-palette/CommandPaletteTrigger.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { CommandPaletteController } from './controller.svelte.js';
+interface Props {
+    /** The palette to open; default: the one on context. */
+    palette?: CommandPaletteController;
+    /** Button text and accessible name (default "Search"). */
+    label?: string;
+    /** Hint shown after the label: the first shortcut. Match `hotkeys` on the dialog. */
+    hotkeys?: readonly string[];
+    /** Glyph only, at every width. */
+    compact?: boolean;
+    /** Extra class on the button. */
+    class?: string;
+}
+declare const CommandPaletteTrigger: import("svelte").Component<Props, {}, "">;
+type CommandPaletteTrigger = ReturnType<typeof CommandPaletteTrigger>;
+export default CommandPaletteTrigger;
+//# sourceMappingURL=CommandPaletteTrigger.svelte.d.ts.map

package/dist/components/command-palette/CommandPaletteTrigger.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteTrigger.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/CommandPaletteTrigger.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AASvE,UAAU,KAAK;IACb,wDAAwD;IACxD,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4CD,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/components/command-palette/context.d.ts

@@ -0,0 +1,18 @@
+import type { CommandPaletteController } from './controller.svelte.js';
+export declare const COMMAND_PALETTE_CONTEXT: unique symbol;
+/**
+ * Put a palette on context so descendants (recipe components, pages) can
+ * register providers with {@link useCommandPaletteProvider}. Call it in the
+ * layout that owns the palette, above the `AppShell`.
+ */
+export declare function setCommandPalette(controller: CommandPaletteController): CommandPaletteController;
+/** The nearest palette; throws when there is none. */
+export declare function useCommandPalette(): CommandPaletteController;
+/** The nearest palette, or null. */
+export declare function tryUseCommandPalette(): CommandPaletteController | null;
+/**
+ * The palette a component should drive: the explicit one, else the nearest on
+ * context. Throws when there is neither. Call during component initialization.
+ */
+export declare function palettePicker(explicit: () => CommandPaletteController | undefined): () => CommandPaletteController;
+//# sourceMappingURL=context.d.ts.map

package/dist/components/command-palette/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE,eAAO,MAAM,uBAAuB,eAAiC,CAAC;AAEtE;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,wBAAwB,GACnC,wBAAwB,CAG1B;AAED,sDAAsD;AACtD,wBAAgB,iBAAiB,IAAI,wBAAwB,CAU5D;AAED,oCAAoC;AACpC,wBAAgB,oBAAoB,IAAI,wBAAwB,GAAG,IAAI,CAKtE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,MAAM,wBAAwB,GAAG,SAAS,GACnD,MAAM,wBAAwB,CAWhC"}

package/dist/components/command-palette/context.js

@@ -0,0 +1,38 @@
+import { getContext, setContext } from 'svelte';
+export const COMMAND_PALETTE_CONTEXT = Symbol('smrt-command-palette');
+/**
+ * Put a palette on context so descendants (recipe components, pages) can
+ * register providers with {@link useCommandPaletteProvider}. Call it in the
+ * layout that owns the palette, above the `AppShell`.
+ */
+export function setCommandPalette(controller) {
+    setContext(COMMAND_PALETTE_CONTEXT, controller);
+    return controller;
+}
+/** The nearest palette; throws when there is none. */
+export function useCommandPalette() {
+    const controller = getContext(COMMAND_PALETTE_CONTEXT);
+    if (!controller) {
+        throw new Error('[useCommandPalette] No command palette found on context. Call setCommandPalette() in a parent layout.');
+    }
+    return controller;
+}
+/** The nearest palette, or null. */
+export function tryUseCommandPalette() {
+    return (getContext(COMMAND_PALETTE_CONTEXT) ??
+        null);
+}
+/**
+ * The palette a component should drive: the explicit one, else the nearest on
+ * context. Throws when there is neither. Call during component initialization.
+ */
+export function palettePicker(explicit) {
+    const fromContext = tryUseCommandPalette();
+    return () => {
+        const controller = explicit() ?? fromContext;
+        if (!controller) {
+            throw new Error('[command palette] Pass a `palette` prop or call setCommandPalette() in a parent layout.');
+        }
+        return controller;
+    };
+}

package/dist/components/command-palette/controller.svelte.d.ts

@@ -0,0 +1,70 @@
+import type { PaletteErrorContext, PaletteItem, PaletteProvider, PaletteResult, PaletteSection } from './types.js';
+export interface CommandPaletteOptions {
+    /** Providers registered at construction (more can be registered later). */
+    providers?: readonly PaletteProvider[];
+    /**
+     * Opens `href` for an item that has one. SvelteKit apps pass `goto`.
+     * Default: `window.location.assign`.
+     */
+    navigate?: (href: string, item?: PaletteItem) => void | Promise<void>;
+    /** Pause after the last keystroke before `search` providers run (ms). */
+    searchDebounceMs?: number;
+    /** Rows per group unless a provider sets `limit`. */
+    maxPerGroup?: number;
+    /**
+     * Called when a provider fails to load or search, or an item's `run`
+     * throws. The palette keeps working; default logs a warning.
+     */
+    onError?: (error: unknown, context: PaletteErrorContext) => void;
+}
+export declare class CommandPaletteController {
+    #private;
+    constructor(options?: CommandPaletteOptions);
+    /** Whether the palette is showing. */
+    get isOpen(): boolean;
+    /** The text in the search box. */
+    get query(): string;
+    /** Registered providers, in registration order. */
+    get providers(): readonly PaletteProvider[];
+    /** Whether any provider is still loading or searching. */
+    get busy(): boolean;
+    /** Ids of providers whose last load or search failed. */
+    get failedProviders(): ReadonlySet<string>;
+    /** Grouped, ranked rows for the current query. */
+    readonly sections: readonly PaletteSection[];
+    /** The rows in display order. */
+    readonly results: readonly PaletteResult[];
+    /** The highlighted row: the chosen one, else the first selectable row. */
+    readonly active: PaletteResult | null;
+    /**
+     * Register a provider; returns its disposer. Registering an id again
+     * replaces the earlier provider in place (so a re-rendering component does
+     * not stack duplicates); the disposer of a replaced registration is a no-op.
+     */
+    registerProvider(provider: PaletteProvider): () => void;
+    /** Show the palette with an empty query. */
+    open(): void;
+    /** Hide the palette and cancel work in flight. */
+    close(): void;
+    toggle(): void;
+    /** Set the search text; local rows update at once, `search` providers after a pause. */
+    setQuery(query: string): void;
+    /** Move the highlight by `delta` rows among selectable ones, wrapping. */
+    moveActive(delta: number): void;
+    /** Move the highlight to the first or last selectable row. */
+    moveActiveTo(edge: 'first' | 'last'): void;
+    /** Highlight a specific row (pointer hover). */
+    setActive(key: string): void;
+    /**
+     * Choose a row (default: the highlighted one): closes the palette, then runs
+     * the item or navigates to its `href`. Resolves once that has finished.
+     */
+    activate(result?: PaletteResult | null): Promise<void>;
+    /** Go to `href` with the host's `navigate` seam. */
+    navigate(href: string, item?: PaletteItem): void | Promise<void>;
+    /** Cancel timers and requests; call when the owner is destroyed. */
+    destroy(): void;
+}
+/** Create a palette controller. */
+export declare function createCommandPalette(options?: CommandPaletteOptions): CommandPaletteController;
+//# sourceMappingURL=controller.svelte.d.ts.map

package/dist/components/command-palette/controller.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/controller.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,mBAAmB,EACnB,WAAW,EACX,eAAe,EACf,aAAa,EACb,cAAc,EACf,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,qBAAqB;IACpC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,WAAW,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAClE;AAUD,qBAAa,wBAAwB;;gBAkBvB,OAAO,GAAE,qBAA0B;IAK/C,sCAAsC;IACtC,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,kCAAkC;IAClC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,mDAAmD;IACnD,IAAI,SAAS,IAAI,SAAS,eAAe,EAAE,CAE1C;IAED,0DAA0D;IAC1D,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,yDAAyD;IACzD,IAAI,eAAe,IAAI,WAAW,CAAC,MAAM,CAAC,CAEzC;IAED,kDAAkD;IAClD,QAAQ,CAAC,QAAQ,EAAE,SAAS,cAAc,EAAE,CAQ1C;IAEF,iCAAiC;IACjC,QAAQ,CAAC,OAAO,EAAE,SAAS,aAAa,EAAE,CAExC;IAEF,0EAA0E;IAC1E,QAAQ,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI,CAKlC;IAEH;;;;OAIG;IACH,gBAAgB,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,IAAI;IA2BvD,4CAA4C;IAC5C,IAAI,IAAI,IAAI;IAeZ,kDAAkD;IAClD,KAAK,IAAI,IAAI;IAcb,MAAM,IAAI,IAAI;IAKd,wFAAwF;IACxF,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAO7B,0EAA0E;IAC1E,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAgB/B,8DAA8D;IAC9D,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI;IAQ1C,gDAAgD;IAChD,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK5B;;;OAGG;IACG,QAAQ,CAAC,MAAM,GAAE,aAAa,GAAG,IAAkB,GAAG,OAAO,CAAC,IAAI,CAAC;IAoBzE,oDAAoD;IACpD,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAKhE,oEAAoE;IACpE,OAAO,IAAI,IAAI;CAkKhB;AAWD,mCAAmC;AACnC,wBAAgB,oBAAoB,CAClC,OAAO,GAAE,qBAA0B,GAClC,wBAAwB,CAE1B"}