@lostgradient/cinder 0.2.0 → 0.4.0

package/src/components/command-menu/command-menu.svelte

@@ -29,12 +29,8 @@
 
   import { createAnchoredOverlay } from '../../_internal/anchored-overlay.svelte.ts';
   import { classNames } from '../../utilities/class-names.ts';
-  import { inDocumentOrder } from '../../utilities/document-order.ts';
-  import {
-    setCommandListContext,
-    type CommandItemRegistrationInput,
-    type CommandListContext,
-  } from '../_internal/command-list-context.ts';
+  import { setCommandListContext } from '../_internal/command-list-context.ts';
+  import { createCommandListState } from '../_internal/create-command-list-state.svelte.ts';
   import { createPortalAttachment } from '../portal/index.ts';
 
   const listboxId = $props.id();
@@ -55,7 +51,6 @@
     class: className,
   }: CommandMenuProps = $props();
 
-  type RegistrationRecord = CommandItemRegistrationInput & { id: string; node: HTMLElement };
   const portalAttachment = createPortalAttachment({
     target: () => document.body,
     inheritAttributes: true,
@@ -64,19 +59,11 @@
 
   let mounted = $state(false);
   let listElement: HTMLElement | undefined = $state();
-  let registrations = $state<RegistrationRecord[]>([]);
-  let activeItemId = $state<string | null>(null);
-  let itemCounter = 0;
-  let registrationsReady = $state(false);
-  let readyCycle = 0;
+  const commandList = createCommandListState(listboxId);
 
-  const enabledIds = $derived.by(() => {
-    return inDocumentOrder(registrations)
-      .filter((registration) => !registration.getDisabled())
-      .map((registration) => registration.id);
-  });
-
-  const showEmpty = $derived(mounted && open && registrationsReady && registrations.length === 0);
+  const showEmpty = $derived(
+    mounted && open && commandList.registrationsReady && commandList.registrations.length === 0,
+  );
   const caretAnchor = $derived.by<VirtualElement | null>(() => {
     const anchorElement = anchor;
     const currentCaretIndex = caretIndex;
@@ -104,76 +91,34 @@
   });
 
   $effect(() => {
-    const ids = enabledIds;
     if (!open) {
-      activeItemId = null;
+      commandList.resetActiveItem();
       return;
     }
-    if (activeItemId !== null && ids.includes(activeItemId)) return;
-    activeItemId = ids[0] ?? null;
   });
 
   $effect(() => {
     void query;
-    registrationsReady = false;
-    const cycle = ++readyCycle;
-    queueMicrotask(() => {
-      if (cycle === readyCycle) registrationsReady = true;
-    });
+    commandList.refreshRegistrationsReady();
   });
 
   $effect(() => {
-    onstatechange?.({ listboxId, activeItemId: open ? activeItemId : null });
+    onstatechange?.({ listboxId, activeItemId: open ? commandList.activeItemId : null });
   });
 
   $effect(() => {
-    if (activeItemId === null) return;
-    document.getElementById(activeItemId)?.scrollIntoView({ block: 'nearest' });
+    commandList.scrollActiveItemIntoView();
   });
 
   function activateItemById(id: string) {
-    const record = registrations.find((registration) => registration.id === id);
-    if (!record || record.getDisabled()) return;
-    // Fire the per-item `onselect` callback first (matching command-palette's
-    // shared-context contract), then the menu-level `onselect` prop. Without the
-    // first call, an item's own onselect is silently dropped on activation.
-    record.getOnselect()();
+    const record = commandList.activateItemById(id);
+    if (!record) return;
+    // The command list activates the item callback first; the menu-level
+    // `onselect` prop then receives the committed value and query.
     onselect?.({ value: record.getValue(), query });
   }
 
-  const context: CommandListContext = {
-    get listboxId() {
-      return listboxId;
-    },
-    get activeItemId() {
-      return activeItemId;
-    },
-    register(input: CommandItemRegistrationInput, node: HTMLElement) {
-      const id = `${listboxId}-item-${++itemCounter}`;
-      registrations = [
-        ...registrations,
-        {
-          id,
-          node,
-          getValue: input.getValue,
-          getOnselect: input.getOnselect,
-          getDisabled: input.getDisabled,
-        },
-      ];
-      return {
-        id,
-        unregister: () => {
-          registrations = registrations.filter((registration) => registration.id !== id);
-        },
-      };
-    },
-    setActiveById(id: string) {
-      activeItemId = id;
-    },
-    activateItemById,
-  };
-
-  setCommandListContext(context);
+  setCommandListContext(commandList.createContext(activateItemById));
 
   function dismiss() {
     if (!open) return;
@@ -183,38 +128,12 @@
 
   function handleKeydown(event: KeyboardEvent) {
     if (!open) return;
-    if (event.isComposing || event.keyCode === 229) return;
-    const ids = enabledIds;
-
-    if (event.key === 'ArrowDown') {
-      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
-      event.preventDefault();
-      if (ids.length === 0) return;
-      const index = activeItemId === null ? -1 : ids.indexOf(activeItemId);
-      activeItemId = ids[(index + 1) % ids.length] ?? null;
-    } else if (event.key === 'ArrowUp') {
-      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
-      event.preventDefault();
-      if (ids.length === 0) return;
-      const index = activeItemId === null ? 0 : ids.indexOf(activeItemId);
-      activeItemId = ids[index <= 0 ? ids.length - 1 : index - 1] ?? null;
-    } else if (event.key === 'Home') {
-      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
-      event.preventDefault();
-      activeItemId = ids[0] ?? null;
-    } else if (event.key === 'End') {
-      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
-      event.preventDefault();
-      activeItemId = ids[ids.length - 1] ?? null;
-    } else if (event.key === 'Enter' && activeItemId !== null) {
-      event.preventDefault();
-      event.stopPropagation();
-      activateItemById(activeItemId);
-    } else if (event.key === 'Escape') {
-      event.preventDefault();
-      event.stopPropagation();
-      dismiss();
-    }
+    commandList.handleKeydown({
+      event,
+      onEnter: activateItemById,
+      onEscape: dismiss,
+      ignoreModifiedNavigation: true,
+    });
   }
 
   function handleDocumentPointerdown(event: PointerEvent) {

package/src/components/command-palette/README.md

@@ -34,18 +34,18 @@ Command items register with the palette by DOM node, so grouped results can use
 
 <!-- generated:props:start -->
 
-| Prop          | Type       | Required | Default | Description                                                                                                                                                                                                                                         |
-| ------------- | ---------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `class`       | `string`   | no       | —       | Class merged onto the palette panel.                                                                                                                                                                                                                |
-| `label`       | `string`   | no       | —       | Accessible name for the dialog, wired via `aria-label`.                                                                                                                                                                                             |
-| `open`        | `boolean`  | yes      | —       | Bindable open state. The component mutates `open = false` on Escape, backdrop click, or any explicit close path, then fires `onclose`.                                                                                                              |
-| `placeholder` | `string`   | no       | —       | Placeholder rendered inside the search input.                                                                                                                                                                                                       |
-| `query`       | `string`   | no       | —       | Bindable search query. Mutated by the input's oninput handler. Exposed to the items snippet so consumers can filter. Note: query is NOT reset on close — consumers who want a fresh query on each open should reset it in their `onclose` callback. |
-| `empty`       | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                          |
-| `footer`      | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                          |
-| `items`       | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                          |
-| `onclose`     | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                          |
-| `triggerRef`  | `(opaque)` | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                             |
+| Prop          | Type       | Required | Default | Description                                                                                                                                                                |
+| ------------- | ---------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `class`       | `string`   | no       | —       | Class merged onto the palette panel.                                                                                                                                       |
+| `label`       | `string`   | no       | —       | Accessible name for the dialog, wired via `aria-label`.                                                                                                                    |
+| `open`        | `boolean`  | yes      | —       | Bindable open state. The component mutates `open = false` on Escape, backdrop click, or any explicit close path, then fires `onclose`.                                     |
+| `placeholder` | `string`   | no       | —       | Placeholder rendered inside the search input.                                                                                                                              |
+| `query`       | `string`   | no       | —       | Bindable search query. Mutated by the input's oninput handler. Exposed to the items snippet so consumers can filter. Reset to an empty string each time the palette opens. |
+| `empty`       | `(opaque)` | no       | —       | Rendered when zero items are registered after filtering. Not expressible in JSON Schema; see the component types for the signature.                                        |
+| `footer`      | `(opaque)` | no       | —       | Optional footer, e.g. for keybinding hints. Not part of the listbox. Not expressible in JSON Schema; see the component types for the signature.                            |
+| `items`       | `(opaque)` | yes      | —       | Receives the current query so consumers can filter. Not expressible in JSON Schema; see the component types for the signature.                                             |
+| `onclose`     | `(opaque)` | no       | —       | Fired after any close path routed through the palette close lifecycle. Not expressible in JSON Schema; see the component types for the signature.                          |
+| `triggerRef`  | `(opaque)` | no       | —       | Element to restore focus to on close. Falls back to `captureFocus()`. Not expressible in JSON Schema; see the component types for the signature.                           |
 
 <!-- generated:props:end -->
 

package/src/components/command-palette/command-palette.css

@@ -68,8 +68,30 @@
     gap: var(--cinder-space-3);
     min-block-size: 4.5rem;
     padding-inline: var(--cinder-space-5);
-    border-block-end: 1px solid var(--cinder-border);
+    /* Focus indication lives on this row, anchored to its visible bottom edge,
+       rather than a 3px box-shadow ring floating around the edgeless input. The
+       border is 2px AT REST so focusing only changes its COLOR — no width change,
+       so the option list below never shifts.
+
+       :focus-within (below) is correct here precisely because this row's ONLY
+       focusable child is the text <input> — there are no buttons in the search
+       row — and a text input always merits a visible focus indication regardless
+       of input modality (the UA's :focus-visible heuristic always matches a
+       focused text field). So :focus-within and :has(input:focus-visible) behave
+       identically for this row; :focus-within is the simpler, support-safe form. */
+    border-block-end: 2px solid var(--cinder-border);
     flex-shrink: 0;
+    transition: border-color var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  .cinder-command-palette__search:focus-within {
+    border-block-end-color: var(--cinder-ring-color);
+  }
+
+  @media (forced-colors: active) {
+    .cinder-command-palette__search:focus-within {
+      border-block-end-color: Highlight;
+    }
   }
 
   .cinder-command-palette__search-icon {
@@ -87,20 +109,12 @@
     font-size: var(--cinder-text-base);
     line-height: var(--cinder-leading-normal);
     padding-block: var(--cinder-space-4);
+    /* No ring on the input itself — the search row's :focus-within bottom border
+       is the focus indicator (the input is edgeless, so a box ring reads as a
+       stray floating box). */
     outline: none;
   }
 
-  .cinder-command-palette__input:focus-visible {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: var(--_cinder-focus-ring-shadow);
-  }
-
-  @media (forced-colors: active) {
-    .cinder-command-palette__input:focus-visible {
-      outline: var(--cinder-ring-width) solid ButtonText;
-    }
-  }
-
   .cinder-command-palette__input::placeholder {
     color: var(--cinder-text-muted);
   }

package/src/components/command-palette/command-palette.examples.json

@@ -7,19 +7,19 @@
       "id": "basic",
       "title": "Basic command palette",
       "description": "A minimal palette with three items opened by a button.",
-      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { CommandItem } from '@lostgradient/cinder/command-item';\n  import { CommandPalette } from '@lostgradient/cinder/command-palette';\n\n  let open = $state(false);\n  let triggerRef: HTMLElement | null = $state(null);\n  let lastSelected = $state('');\n\n  const commands = [\n    { value: 'new-file', label: 'New file' },\n    { value: 'open-settings', label: 'Open settings' },\n    { value: 'sign-out', label: 'Sign out' },\n  ];\n\n  function select(label: string) {\n    lastSelected = label;\n    open = false;\n  }\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;\">\n  <Button\n    label=\"Open palette\"\n    onclick={(event) => {\n      triggerRef = event.currentTarget as HTMLElement;\n      open = true;\n    }}\n  />\n\n  {#if lastSelected}\n    <p style=\"font-size: 0.875rem; color: var(--cinder-text-muted);\">\n      Selected: <strong>{lastSelected}</strong>\n    </p>\n  {/if}\n</div>\n\n<CommandPalette bind:open label=\"Basic palette\" {triggerRef}>\n  {#snippet items({ query })}\n    {@const filteredCommands = commands.filter((command) =>\n      command.label.toLowerCase().includes(query.toLowerCase()),\n    )}\n    {#each filteredCommands as command (command.value)}\n      <CommandItem value={command.value} onselect={() => select(command.label)}>\n        {command.label}\n      </CommandItem>\n    {/each}\n  {/snippet}\n\n  {#snippet empty()}\n    No commands found.\n  {/snippet}\n</CommandPalette>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { CommandItem } from '@lostgradient/cinder/command-item';\n  import { CommandPalette } from '@lostgradient/cinder/command-palette';\n\n  let open = $state(false);\n  let triggerRef: HTMLElement | null = $state(null);\n  let lastSelected = $state('');\n\n  const commands = [\n    { value: 'new-file', label: 'New file' },\n    { value: 'open-settings', label: 'Open settings' },\n    { value: 'sign-out', label: 'Sign out' },\n  ];\n\n  function select(label: string) {\n    lastSelected = label;\n    open = false;\n  }\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;\">\n  <Button\n    label=\"Open palette\"\n    onclick={(event) => {\n      triggerRef = event.currentTarget as HTMLElement;\n      open = true;\n    }}\n  />\n\n  {#if lastSelected}\n    <p style=\"font-size: 0.875rem; color: var(--cinder-text-muted);\">\n      Selected: <strong>{lastSelected}</strong>\n    </p>\n  {/if}\n</div>\n\n<CommandPalette bind:open label=\"Basic palette\" {triggerRef}>\n  {#snippet items({ query })}\n    {@const filteredCommands = commands.filter((command) =>\n      command.label.toLowerCase().includes(query.toLowerCase()),\n    )}\n    {#each filteredCommands as command (command.value)}\n      <CommandItem\n        value={command.value}\n        accessibleLabel={command.label}\n        onselect={() => select(command.label)}\n      >\n        {command.label}\n      </CommandItem>\n    {/each}\n  {/snippet}\n\n  {#snippet empty()}\n    No commands found.\n  {/snippet}\n</CommandPalette>\n"
     },
     {
       "id": "grouped",
       "title": "Grouped command palette",
       "description": "Command items grouped with named listbox sections.",
-      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { CommandItem } from '@lostgradient/cinder/command-item';\n  import { CommandPalette } from '@lostgradient/cinder/command-palette';\n\n  let open = $state(false);\n  let triggerRef: HTMLElement | null = $state(null);\n  let lastSelected = $state('');\n\n  const recentItems = [\n    { id: 'roadmap', label: 'Roadmap' },\n    { id: 'release-notes', label: 'Release notes' },\n  ];\n\n  const actions = [\n    { id: 'new-project', label: 'New project', description: 'Create a workspace project.' },\n    { id: 'invite-teammate', label: 'Invite teammate', description: 'Add a collaborator.' },\n    { id: 'open-settings', label: 'Open settings', description: 'Manage preferences.' },\n  ];\n\n  function select(label: string) {\n    lastSelected = label;\n    open = false;\n  }\n\n  function matchesQuery(label: string, query: string): boolean {\n    return label.toLowerCase().includes(query.toLowerCase());\n  }\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;\">\n  <Button\n    label=\"Open palette\"\n    onclick={(event) => {\n      triggerRef = event.currentTarget as HTMLElement;\n      open = true;\n    }}\n  />\n\n  {#if lastSelected}\n    <p style=\"margin: 0; color: var(--cinder-text-muted); font-size: var(--cinder-text-sm);\">\n      Selected: <strong>{lastSelected}</strong>\n    </p>\n  {/if}\n</div>\n\n<CommandPalette bind:open label=\"Grouped command palette\" {triggerRef}>\n  {#snippet items({ query })}\n    {@const filteredRecentItems = recentItems.filter((item) => matchesQuery(item.label, query))}\n    {@const filteredActions = actions.filter((action) => matchesQuery(action.label, query))}\n\n    {#if filteredRecentItems.length > 0}\n      <li role=\"presentation\" class=\"cinder-command-group\">\n        <span class=\"cinder-command-group__label\">Recent files</span>\n        <ul role=\"group\" aria-label=\"Recent files\">\n          {#each filteredRecentItems as item (item.id)}\n            <CommandItem value={item.id} onselect={() => select(item.label)}>\n              {item.label}\n            </CommandItem>\n          {/each}\n        </ul>\n      </li>\n    {/if}\n\n    {#if filteredActions.length > 0}\n      <li role=\"presentation\" class=\"cinder-command-group\">\n        <span class=\"cinder-command-group__label\">Actions</span>\n        <ul role=\"group\" aria-label=\"Actions\">\n          {#each filteredActions as action (action.id)}\n            <CommandItem\n              value={action.id}\n              description={action.description}\n              onselect={() => select(action.label)}\n            >\n              {action.label}\n            </CommandItem>\n          {/each}\n        </ul>\n      </li>\n    {/if}\n  {/snippet}\n\n  {#snippet empty()}\n    No commands found.\n  {/snippet}\n</CommandPalette>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { CommandItem } from '@lostgradient/cinder/command-item';\n  import { CommandPalette } from '@lostgradient/cinder/command-palette';\n\n  let open = $state(false);\n  let triggerRef: HTMLElement | null = $state(null);\n  let lastSelected = $state('');\n\n  const recentItems = [\n    { id: 'roadmap', label: 'Roadmap' },\n    { id: 'release-notes', label: 'Release notes' },\n  ];\n\n  const actions = [\n    { id: 'new-project', label: 'New project', description: 'Create a workspace project.' },\n    { id: 'invite-teammate', label: 'Invite teammate', description: 'Add a collaborator.' },\n    { id: 'open-settings', label: 'Open settings', description: 'Manage preferences.' },\n  ];\n\n  function select(label: string) {\n    lastSelected = label;\n    open = false;\n  }\n\n  function matchesQuery(label: string, query: string): boolean {\n    return label.toLowerCase().includes(query.toLowerCase());\n  }\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;\">\n  <Button\n    label=\"Open palette\"\n    onclick={(event) => {\n      triggerRef = event.currentTarget as HTMLElement;\n      open = true;\n    }}\n  />\n\n  {#if lastSelected}\n    <p style=\"margin: 0; color: var(--cinder-text-muted); font-size: var(--cinder-text-sm);\">\n      Selected: <strong>{lastSelected}</strong>\n    </p>\n  {/if}\n</div>\n\n<CommandPalette bind:open label=\"Grouped command palette\" {triggerRef}>\n  {#snippet items({ query })}\n    {@const filteredRecentItems = recentItems.filter((item) => matchesQuery(item.label, query))}\n    {@const filteredActions = actions.filter((action) => matchesQuery(action.label, query))}\n\n    {#if filteredRecentItems.length > 0}\n      <li role=\"presentation\" class=\"cinder-command-group\">\n        <span id=\"recent-files-heading\" class=\"cinder-command-group__label\">Recent files</span>\n        <ul role=\"group\" aria-labelledby=\"recent-files-heading\">\n          {#each filteredRecentItems as item (item.id)}\n            <CommandItem\n              value={item.id}\n              accessibleLabel={item.label}\n              onselect={() => select(item.label)}\n            >\n              {item.label}\n            </CommandItem>\n          {/each}\n        </ul>\n      </li>\n    {/if}\n\n    {#if filteredActions.length > 0}\n      <li role=\"presentation\" class=\"cinder-command-group\">\n        <span id=\"actions-heading\" class=\"cinder-command-group__label\">Actions</span>\n        <ul role=\"group\" aria-labelledby=\"actions-heading\">\n          {#each filteredActions as action (action.id)}\n            <CommandItem\n              value={action.id}\n              description={action.description}\n              accessibleLabel={action.label}\n              onselect={() => select(action.label)}\n            >\n              {action.label}\n            </CommandItem>\n          {/each}\n        </ul>\n      </li>\n    {/if}\n  {/snippet}\n\n  {#snippet empty()}\n    No commands found.\n  {/snippet}\n</CommandPalette>\n"
     },
     {
       "id": "search-recent-actions",
       "title": "Search, recent, and keyed actions",
       "description": "Cmd+K opens the palette. Three sections: filtered search results, recent items, and keyed actions separated by visual group headers.",
-      "code": "<script lang=\"ts\">\n  import { CommandItem } from '@lostgradient/cinder/command-item';\n  import { CommandPalette } from '@lostgradient/cinder/command-palette';\n  // ── State ──────────────────────────────────────────────────────────────\n  let open = $state(false);\n  let query = $state('');\n  let lastSelected = $state('');\n  let triggerRef: HTMLElement | null = $state(null);\n\n  // ── Data ──────────────────────────────────────────────────────────────\n  const allPages = [\n    { id: 'dashboard', label: 'Dashboard', description: 'View product and team metrics.' },\n    { id: 'settings', label: 'Settings', description: 'Manage workspace preferences.' },\n    { id: 'billing', label: 'Billing', description: 'Review invoices and payment methods.' },\n    { id: 'team', label: 'Team members', description: 'Invite or remove collaborators.' },\n    { id: 'api-keys', label: 'API keys', description: 'Create and rotate access tokens.' },\n    { id: 'integrations', label: 'Integrations', description: 'Connect external services.' },\n  ];\n\n  const recentItems = [\n    { id: 'recent-dashboard', label: 'Dashboard' },\n    { id: 'recent-billing', label: 'Billing' },\n  ];\n\n  const actions = [\n    {\n      id: 'action-new-project',\n      label: 'New project',\n      description: 'Create a blank project for a new body of work.',\n      icon: '+',\n      kbd: '⌘N',\n    },\n    {\n      id: 'action-invite',\n      label: 'Invite teammate',\n      description: 'Send an invitation to join this workspace.',\n      icon: '@',\n      kbd: '⌘I',\n    },\n    {\n      id: 'action-sign-out',\n      label: 'Sign out',\n      description: 'End this browser session.',\n      icon: '↪',\n      kbd: '',\n    },\n  ];\n\n  // ── Filtering ──────────────────────────────────────────────────────────\n  const filteredPages = $derived(\n    query ? allPages.filter((p) => p.label.toLowerCase().includes(query.toLowerCase())) : [],\n  );\n\n  const filteredActions = $derived(\n    query ? actions.filter((a) => a.label.toLowerCase().includes(query.toLowerCase())) : actions,\n  );\n\n  function select(label: string) {\n    lastSelected = label;\n    open = false;\n  }\n\n  // ── Cmd+K / Ctrl+K listener ────────────────────────────────────────────\n  function handleGlobalKeydown(event: KeyboardEvent) {\n    if ((event.metaKey || event.ctrlKey) && event.key === 'k') {\n      event.preventDefault();\n      open = true;\n    }\n  }\n</script>\n\n<svelte:window onkeydown={handleGlobalKeydown} />\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;\">\n  <button\n    bind:this={triggerRef}\n    type=\"button\"\n    onclick={() => (open = true)}\n    style=\"\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0.5rem 0.75rem;\n      border: 1px solid var(--cinder-border);\n      border-radius: var(--cinder-radius-md);\n      background: var(--cinder-surface);\n      color: var(--cinder-text-muted);\n      font-size: 0.875rem;\n      cursor: pointer;\n    \"\n  >\n    Search…\n    <kbd style=\"font-size: 0.75rem; opacity: 0.7;\">⌘K</kbd>\n  </button>\n\n  {#if lastSelected}\n    <p style=\"font-size: 0.875rem; color: var(--cinder-text-muted);\">\n      Selected: <strong>{lastSelected}</strong>\n    </p>\n  {/if}\n</div>\n\n<CommandPalette bind:open bind:query label=\"Command palette\" {triggerRef}>\n  {#snippet items({ query: paletteQuery })}\n    {@const headerBase =\n      'font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cinder-text-muted); pointer-events: none;'}\n    {@const headerFirst = 'padding: 0.625rem 1.25rem 0.375rem;'}\n    {@const headerWithDivider =\n      'padding: 0.625rem 1.25rem 0.375rem 1.25rem; padding-block-start: 0.625rem; margin-block-start: 0.25rem; border-block-start: 1px solid var(--cinder-border);'}\n    {@const showPages = filteredPages.length > 0}\n    {@const showRecent = !paletteQuery}\n    {@const showActions = filteredActions.length > 0}\n    <!--\n      Search results section — only shown while typing.\n      `paletteQuery` comes from the snippet parameter and mirrors CommandPalette's query.\n      using the snippet parameter keeps the pattern explicit for consumers.\n    -->\n    {#if showPages}\n      <li role=\"none\" style=\"{headerBase} {headerFirst}\">Pages</li>\n      {#each filteredPages as page (page.id)}\n        <CommandItem\n          value={page.id}\n          description={page.description}\n          onselect={() => select(page.label)}\n        >\n          {page.label}\n        </CommandItem>\n      {/each}\n    {/if}\n\n    <!--\n      Recent section — shown only when query is empty.\n      Uses `role=\"none\"` for the group label (purely visual; children remain in the AT).\n    -->\n    {#if showRecent}\n      <li role=\"none\" style=\"{headerBase} {showPages ? headerWithDivider : headerFirst}\">Recent</li>\n      {#each recentItems as item (item.id)}\n        <CommandItem value={item.id} onselect={() => select(item.label)}>\n          {item.label}\n        </CommandItem>\n      {/each}\n    {/if}\n\n    <!--\n      Actions section — always visible (filtered when typing).\n    -->\n    {#if showActions}\n      <li\n        role=\"none\"\n        style=\"{headerBase} {showPages || showRecent ? headerWithDivider : headerFirst}\"\n      >\n        Actions\n      </li>\n      {#each filteredActions as action (action.id)}\n        <CommandItem\n          value={action.id}\n          description={action.description}\n          onselect={() => select(action.label)}\n        >\n          {#snippet leading()}\n            <span style=\"font-size: 0.875rem; font-weight: 700; line-height: 1;\">{action.icon}</span\n            >\n          {/snippet}\n          {action.label}\n          {#snippet trailing()}\n            {#if action.kbd}\n              <kbd>{action.kbd}</kbd>\n            {/if}\n          {/snippet}\n        </CommandItem>\n      {/each}\n    {/if}\n  {/snippet}\n\n  {#snippet empty()}\n    No results for \"<strong>{query}</strong>\".\n  {/snippet}\n\n  {#snippet footer()}\n    <span>\n      <kbd>↑↓</kbd> navigate &nbsp; <kbd>↵</kbd> select &nbsp; <kbd>Esc</kbd> close\n    </span>\n  {/snippet}\n</CommandPalette>\n"
+      "code": "<script lang=\"ts\">\n  import { CommandItem } from '@lostgradient/cinder/command-item';\n  import { CommandPalette } from '@lostgradient/cinder/command-palette';\n  // ── State ──────────────────────────────────────────────────────────────\n  let open = $state(false);\n  let query = $state('');\n  let lastSelected = $state('');\n  let triggerRef: HTMLElement | null = $state(null);\n\n  // ── Data ──────────────────────────────────────────────────────────────\n  const allPages = [\n    { id: 'dashboard', label: 'Dashboard', description: 'View product and team metrics.' },\n    { id: 'settings', label: 'Settings', description: 'Manage workspace preferences.' },\n    { id: 'billing', label: 'Billing', description: 'Review invoices and payment methods.' },\n    { id: 'team', label: 'Team members', description: 'Invite or remove collaborators.' },\n    { id: 'api-keys', label: 'API keys', description: 'Create and rotate access tokens.' },\n    { id: 'integrations', label: 'Integrations', description: 'Connect external services.' },\n  ];\n\n  const recentItems = [\n    { id: 'recent-dashboard', label: 'Dashboard' },\n    { id: 'recent-billing', label: 'Billing' },\n  ];\n\n  const actions = [\n    {\n      id: 'action-new-project',\n      label: 'New project',\n      description: 'Create a blank project for a new body of work.',\n      icon: '+',\n      kbd: '⌘N',\n    },\n    {\n      id: 'action-invite',\n      label: 'Invite teammate',\n      description: 'Send an invitation to join this workspace.',\n      icon: '@',\n      kbd: '⌘I',\n    },\n    {\n      id: 'action-sign-out',\n      label: 'Sign out',\n      description: 'End this browser session.',\n      icon: '↪',\n      kbd: '',\n    },\n  ];\n\n  // ── Filtering ──────────────────────────────────────────────────────────\n  const filteredPages = $derived(\n    query ? allPages.filter((p) => p.label.toLowerCase().includes(query.toLowerCase())) : [],\n  );\n\n  const filteredActions = $derived(\n    query ? actions.filter((a) => a.label.toLowerCase().includes(query.toLowerCase())) : actions,\n  );\n\n  function select(label: string) {\n    lastSelected = label;\n    open = false;\n  }\n\n  // ── Cmd+K / Ctrl+K listener ────────────────────────────────────────────\n  function handleGlobalKeydown(event: KeyboardEvent) {\n    if ((event.metaKey || event.ctrlKey) && event.key === 'k') {\n      event.preventDefault();\n      open = true;\n    }\n  }\n</script>\n\n<svelte:window onkeydown={handleGlobalKeydown} />\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;\">\n  <button\n    bind:this={triggerRef}\n    type=\"button\"\n    onclick={() => (open = true)}\n    style=\"\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0.5rem 0.75rem;\n      border: 1px solid var(--cinder-border);\n      border-radius: var(--cinder-radius-md);\n      background: var(--cinder-surface);\n      color: var(--cinder-text-muted);\n      font-size: 0.875rem;\n      cursor: pointer;\n    \"\n  >\n    Search…\n    <kbd style=\"font-size: 0.75rem; opacity: 0.7;\">⌘K</kbd>\n  </button>\n\n  {#if lastSelected}\n    <p style=\"font-size: 0.875rem; color: var(--cinder-text-muted);\">\n      Selected: <strong>{lastSelected}</strong>\n    </p>\n  {/if}\n</div>\n\n<CommandPalette bind:open bind:query label=\"Command palette\" {triggerRef}>\n  {#snippet items({ query: paletteQuery })}\n    {@const headerBase =\n      'font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cinder-text-muted); pointer-events: none;'}\n    {@const headerFirst = 'padding: 0.625rem 1.25rem 0.375rem;'}\n    {@const headerWithDivider =\n      'padding: 0.625rem 1.25rem 0.375rem 1.25rem; padding-block-start: 0.625rem; margin-block-start: 0.25rem; border-block-start: 1px solid var(--cinder-border);'}\n    {@const showPages = filteredPages.length > 0}\n    {@const showRecent = !paletteQuery}\n    {@const showActions = filteredActions.length > 0}\n    <!--\n      Search results section — only shown while typing.\n      `paletteQuery` comes from the snippet parameter and mirrors CommandPalette's query.\n      using the snippet parameter keeps the pattern explicit for consumers.\n    -->\n    {#if showPages}\n      <li role=\"none\" style=\"{headerBase} {headerFirst}\">Pages</li>\n      {#each filteredPages as page (page.id)}\n        <CommandItem\n          value={page.id}\n          description={page.description}\n          accessibleLabel={page.label}\n          onselect={() => select(page.label)}\n        >\n          {page.label}\n        </CommandItem>\n      {/each}\n    {/if}\n\n    <!--\n      Recent section — shown only when query is empty.\n      Uses `role=\"none\"` for the group label (purely visual; children remain in the AT).\n    -->\n    {#if showRecent}\n      <li role=\"none\" style=\"{headerBase} {showPages ? headerWithDivider : headerFirst}\">Recent</li>\n      {#each recentItems as item (item.id)}\n        <CommandItem\n          value={item.id}\n          accessibleLabel={item.label}\n          onselect={() => select(item.label)}\n        >\n          {item.label}\n        </CommandItem>\n      {/each}\n    {/if}\n\n    <!--\n      Actions section — always visible (filtered when typing).\n    -->\n    {#if showActions}\n      <li\n        role=\"none\"\n        style=\"{headerBase} {showPages || showRecent ? headerWithDivider : headerFirst}\"\n      >\n        Actions\n      </li>\n      {#each filteredActions as action (action.id)}\n        <CommandItem\n          value={action.id}\n          description={action.description}\n          accessibleLabel={action.label}\n          keyboardShortcut={action.kbd === '⌘N'\n            ? 'Meta+N'\n            : action.kbd === '⌘I'\n              ? 'Meta+I'\n              : undefined}\n          onselect={() => select(action.label)}\n        >\n          {#snippet leading()}\n            <span style=\"font-size: 0.875rem; font-weight: 700; line-height: 1;\">{action.icon}</span\n            >\n          {/snippet}\n          {action.label}\n          {#snippet trailing()}\n            {#if action.kbd}\n              <kbd>{action.kbd}</kbd>\n            {/if}\n          {/snippet}\n        </CommandItem>\n      {/each}\n    {/if}\n  {/snippet}\n\n  {#snippet empty()}\n    No results for \"<strong>{query}</strong>\".\n  {/snippet}\n\n  {#snippet footer()}\n    <span>\n      <kbd>↑↓</kbd> navigate &nbsp; <kbd>↵</kbd> select &nbsp; <kbd>Esc</kbd> close\n    </span>\n  {/snippet}\n</CommandPalette>\n"
     }
   ]
 }

package/src/components/command-palette/command-palette.svelte

@@ -21,13 +21,9 @@
 
   import { captureFocus, pushEscapeHandler } from '../../_internal/overlay.ts';
   import { classNames } from '../../utilities/class-names.ts';
-  import { inDocumentOrder } from '../../utilities/document-order.ts';
   import { restoreFocusTo } from '../../utilities/focus.ts';
-  import {
-    setCommandListContext,
-    type CommandItemRegistrationInput,
-    type CommandListContext,
-  } from '../_internal/command-list-context.ts';
+  import { setCommandListContext } from '../_internal/command-list-context.ts';
+  import { createCommandListState } from '../_internal/create-command-list-state.svelte.ts';
 
   let {
     open = $bindable(false),
@@ -62,58 +58,12 @@
   // ── Focus capture ─────────────────────────────────────────────────────────
   let capturedFocus: HTMLElement | null = null;
 
-  // ── Item registration ─────────────────────────────────────────────────────
-  type RegistrationRecord = CommandItemRegistrationInput & { id: string; node: HTMLElement };
-  let registrations = $state<RegistrationRecord[]>([]);
-
-  // Stable incrementing counter for item ids within this palette instance.
-  let itemCounter = 0;
-
-  // ── Active item (virtual focus) ───────────────────────────────────────────
-  // `intendedActiveId` is the user's last navigation/hover intent. The resolved
-  // `activeItemId` clamps that intent to the currently-enabled set, so it is a
-  // pure function of intent + enabledIds rather than a value repaired one tick
-  // late inside an $effect. Keyboard/hover handlers write intent; everything
-  // downstream reads the resolved derived.
-  let intendedActiveId = $state<string | null>(null);
-
-  // Ordered list of non-disabled item ids. Derived so arrow-key navigation
-  // always walks the current set, including after prop changes (e.g. toggling
-  // disabled on a mounted item).
-  const enabledIds = $derived.by(() => {
-    return inDocumentOrder(registrations)
-      .filter((r) => !r.getDisabled())
-      .map((r) => r.id);
-  });
-
-  // Resolved active id: preserve the user's intent if it's still in the enabled
-  // set, otherwise fall back to the first enabled item (or null). This collapses
-  // the previous read-then-write $effect into a single synchronous derivation.
-  const activeItemId = $derived(
-    intendedActiveId !== null && enabledIds.includes(intendedActiveId)
-      ? intendedActiveId
-      : (enabledIds[0] ?? null),
-  );
-
-  // ── Empty-state flash prevention ─────────────────────────────────────────
-  // `registrationsReady` prevents the empty snippet from flashing on initial
-  // open or when a query change causes a full key-swap of items. It is set
-  // true after one microtask (giving children's $effect registrations time to
-  // settle), and reset on every query change.
-  //
-  // A cycle counter guards against stale microtasks: if the query changes
-  // twice in quick succession, only the most recent microtask sets ready=true.
-  let registrationsReady = $state(false);
-  let readyCycle = 0;
+  const commandList = createCommandListState(listboxId);
 
   $effect(() => {
     // Track query so this re-runs on every query change.
     void query;
-    registrationsReady = false;
-    const cycle = ++readyCycle;
-    queueMicrotask(() => {
-      if (cycle === readyCycle) registrationsReady = true;
-    });
+    commandList.refreshRegistrationsReady();
   });
 
   // ── Escape stack ──────────────────────────────────────────────────────────
@@ -155,6 +105,8 @@
   $effect(() => {
     if (!dialogElement) return;
     if (open && !dialogElement.open) {
+      query = '';
+      commandList.resetActiveItem();
       capturedFocus = captureFocus();
       dialogElement.showModal();
       inputElement?.focus();
@@ -193,40 +145,11 @@
 
   // ── Keyboard routing ──────────────────────────────────────────────────────
   function handleKeydown(event: KeyboardEvent) {
-    const ids = enabledIds;
-
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      if (ids.length === 0) return;
-      if (activeItemId === null) {
-        const firstId = ids[0];
-        if (firstId !== undefined) intendedActiveId = firstId;
-      } else {
-        const index = ids.indexOf(activeItemId);
-        const nextId = ids[(index + 1) % ids.length];
-        if (nextId !== undefined) intendedActiveId = nextId;
-      }
-    } else if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      if (ids.length === 0) return;
-      if (activeItemId === null) {
-        const lastId = ids[ids.length - 1];
-        if (lastId !== undefined) intendedActiveId = lastId;
-      } else {
-        const index = ids.indexOf(activeItemId);
-        const previousId = ids[index <= 0 ? ids.length - 1 : index - 1];
-        if (previousId !== undefined) intendedActiveId = previousId;
-      }
-    } else if (event.key === 'Home') {
-      event.preventDefault();
-      intendedActiveId = ids[0] ?? null;
-    } else if (event.key === 'End') {
-      event.preventDefault();
-      intendedActiveId = ids[ids.length - 1] ?? null;
-    } else if (event.key === 'Enter') {
-      event.preventDefault();
-      if (activeItemId !== null) context.activateItemById(activeItemId);
-    }
+    commandList.handleKeydown({
+      event,
+      onEnter: (id) => commandList.activateItemById(id),
+      preventDefaultOnEmptyEnter: true,
+    });
   }
 
   function handleInput(event: Event) {
@@ -235,55 +158,15 @@
   }
 
   $effect(() => {
-    if (activeItemId === null) return;
-    // Use the node captured at registration time rather than
-    // document.getElementById, which assumes globally-unique ids and breaks in
-    // shadow DOM, iframes, or multi-instance scenarios.
-    const record = registrations.find((r) => r.id === activeItemId);
-    record?.node.scrollIntoView({ block: 'nearest' });
+    commandList.scrollActiveItemIntoView();
   });
 
   // ── Context ───────────────────────────────────────────────────────────────
-  const context: CommandListContext = {
-    get listboxId() {
-      return listboxId;
-    },
-    get activeItemId() {
-      return activeItemId;
-    },
-    register(input: CommandItemRegistrationInput, node: HTMLElement) {
-      const id = `${listboxId}-item-${++itemCounter}`;
-      // Mutate in place: $state wraps the array in a deep reactive proxy that
-      // tracks push/splice, so we avoid allocating a fresh array per register.
-      registrations.push({
-        id,
-        node,
-        getValue: input.getValue,
-        getOnselect: input.getOnselect,
-        getDisabled: input.getDisabled,
-      });
-      return {
-        id,
-        unregister: () => {
-          const index = registrations.findIndex((r) => r.id === id);
-          if (index !== -1) registrations.splice(index, 1);
-        },
-      };
-    },
-    setActiveById(id: string) {
-      intendedActiveId = id;
-    },
-    activateItemById(id: string) {
-      const record = registrations.find((r) => r.id === id);
-      if (record && !record.getDisabled()) {
-        record.getOnselect()();
-      }
-    },
-  };
-
-  setCommandListContext(context);
+  setCommandListContext(commandList.createContext());
 
-  const showEmpty = $derived(mounted && registrationsReady && registrations.length === 0);
+  const showEmpty = $derived(
+    mounted && commandList.registrationsReady && commandList.registrations.length === 0,
+  );
 </script>
 
 {#if mounted || open}
@@ -327,7 +210,7 @@
             aria-autocomplete="list"
             aria-expanded="true"
             aria-controls={listboxId}
-            aria-activedescendant={activeItemId ?? undefined}
+            aria-activedescendant={commandList.activeItemId ?? undefined}
             oninput={handleInput}
             onkeydown={handleKeydown}
           />

package/src/components/command-palette/command-palette.types.ts

@@ -12,8 +12,7 @@ export type CommandPaletteProps = {
   /**
    * Bindable search query. Mutated by the input's oninput handler.
    * Exposed to the items snippet so consumers can filter.
-   * Note: query is NOT reset on close — consumers who want a fresh query on
-   * each open should reset it in their `onclose` callback.
+   * Reset to an empty string each time the palette opens.
    */
   query?: string;
   /** Fired after any close path routed through the palette close lifecycle. */

package/src/components/confirm-dialog/README.md

@@ -15,13 +15,13 @@ The key distinction between ConfirmDialog and AlertDialog is _who initiates_ the
 - ConfirmDialog is for user-initiated actions that need a safety gate ("You clicked Delete — are you sure?"). Escape is a safe exit; cancel is the default focus.
 - AlertDialog is for system-initiated or out-of-band urgency ("Your session expired", "This action affects others"). Escape is blocked; acknowledgement is mandatory.
 
-## When to use
+## Choosing this component
 
 - Asking the user to confirm before deleting, discarding, or publishing something that cannot easily be undone.
 - Any two-action flow where the only choices are "proceed" and "cancel" — ConfirmDialog saves you from composing Modal + two Buttons manually.
 - Destructive actions: set `destructive` to apply the danger variant to the confirm button.
 
-## When not to use
+## Choosing something else
 
 - When the dialog body needs rich content (lists, markup, multiple paragraphs) — compose [`Modal`](../modal/README.md) directly instead, since `aria-describedby` collapses to a single continuous string for screen readers.
 - When more than two actions are needed — use [`Modal`](../modal/README.md) with a custom `footer` snippet.
@@ -47,18 +47,18 @@ The key distinction between ConfirmDialog and AlertDialog is _who initiates_ the
 
 <!-- generated:props:start -->
 
-| Prop           | Type       | Required | Default | Description                                                                                                                                                                                                                                                                         |
-| -------------- | ---------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `cancelLabel`  | `string`   | no       | —       | Cancel button label. Defaults to "Cancel".                                                                                                                                                                                                                                          |
-| `class`        | `string`   | no       | —       | Optional extra class on the underlying <Modal>. Destructured as `class: className` per repo convention.                                                                                                                                                                             |
-| `confirmLabel` | `string`   | yes      | —       | Confirm button label. Required — no default. Name the action being confirmed: - Destructive: "Delete", "Discard changes", "Remove from organization". - Non-destructive: "Save", "Continue", "Publish". Never use "OK" or "Confirm" in production — they don't describe the action. |
-| `description`  | `string`   | no       | —       | Optional body description — short, plain text only. Rendered as a single <p> and wired to aria-describedby. For rich content (markup, lists, multiple paragraphs), compose <Modal> + <Button> directly — screen readers announce aria-describedby targets as one continuous run.    |
-| `destructive`  | `boolean`  | no       | —       | When true, the confirm button uses variant="danger". The cancel button still receives default focus regardless — color is never the sole destructive signal.                                                                                                                        |
-| `open`         | `boolean`  | yes      | —       | Controls visibility. Bindable.                                                                                                                                                                                                                                                      |
-| `title`        | `string`   | yes      | —       | Modal title; passed through to <Modal>.                                                                                                                                                                                                                                             |
-| `oncancel`     | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                          |
-| `onconfirm`    | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                          |
-| `triggerRef`   | `(opaque)` | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                             |
+| Prop           | Type       | Required | Default | Description                                                                                                                                                                                                                                                                                                                             |
+| -------------- | ---------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cancelLabel`  | `string`   | no       | —       | Cancel button label. Defaults to "Cancel".                                                                                                                                                                                                                                                                                              |
+| `class`        | `string`   | no       | —       | Optional extra class on the underlying <Modal>. Destructured as `class: className` per repo convention.                                                                                                                                                                                                                                 |
+| `confirmLabel` | `string`   | yes      | —       | Confirm button label. Required — no default. Name the action being confirmed: - Destructive: "Delete", "Discard changes", "Remove from organization". - Non-destructive: "Save", "Continue", "Publish". Never use "OK" or "Confirm" in production — they don't describe the action.                                                     |
+| `description`  | `string`   | no       | —       | Optional body description — short, plain text only. Rendered as a single <p> and wired to aria-describedby. For rich content (markup, lists, multiple paragraphs), compose <Modal> + <Button> directly — screen readers announce aria-describedby targets as one continuous run.                                                        |
+| `destructive`  | `boolean`  | no       | —       | When true, the confirm button uses variant="danger". The cancel button still receives default focus regardless — color is never the sole destructive signal.                                                                                                                                                                            |
+| `open`         | `boolean`  | yes      | —       | Controls visibility. Bindable.                                                                                                                                                                                                                                                                                                          |
+| `title`        | `string`   | yes      | —       | Modal title; passed through to <Modal>.                                                                                                                                                                                                                                                                                                 |
+| `oncancel`     | `(opaque)` | no       | —       | Fired when the user cancels via ANY dismissal affordance — cancel button, Escape, backdrop click, or the close-X button. Optional. Parent-driven `open = false` does NOT fire this callback. Callbacks are not awaited; thrown callbacks do not block close. Not expressible in JSON Schema; see the component types for the signature. |
+| `onconfirm`    | `(opaque)` | yes      | —       | Fired when the user activates the confirm button. Required. Component closes itself after. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                   |
+| `triggerRef`   | `(opaque)` | no       | —       | Forwarded to <Modal>; focus is restored here on close. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                       |
 
 <!-- generated:props:end -->