CommandATM

@layer components {

  dialog.command {

    border: none;

    border-radius: var(--radius-xl);

    background: var(--popover);

    color: var(--popover-foreground);

    padding: 0;

    max-width: 32rem;

    width: calc(100% - 2rem);

    box-shadow: var(--shadow-lg);

    margin: auto;

    position: fixed;

    inset: 0;

    top: 15%;

    bottom: auto;

    overflow: hidden;

    opacity: 0;

    transform: scale(0.98);

    transition:

      opacity 150ms ease,

      transform 150ms ease,

      display 150ms allow-discrete;

    &[open] {

      opacity: 1;

      transform: scale(1);

    }

    &::backdrop {

      background: oklch(0 0 0 / 0);

      transition:

        all 150ms ease,

        display 150ms allow-discrete;

    }

    &[open]::backdrop {

      background: oklch(0 0 0 / 0.45);

    }

  }

  @starting-style {

    dialog.command[open] {

      opacity: 0;

      transform: scale(0.98);

    }

    dialog.command[open]::backdrop {

      background: oklch(0 0 0 / 0);

    }

  }

  /* -- Scroll lock ------------------------------------------- */

  /* Page behind stays put while the palette is modal (see dialog.css):

     `:modal` + overflow:hidden freezes the viewport at its current offset. */

  html:has(dialog.command:modal) {

    overflow: hidden;

    scrollbar-gutter: stable;

  }

  .command-input-wrapper {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1rem;

    border-bottom: 1px solid var(--border);

    & svg {

      width: 1rem;

      height: 1rem;

      color: var(--muted-foreground);

      flex-shrink: 0;

    }

  }

  .command-input {

    flex: 1;

    border: none;

    background: transparent;

    font-size: 0.875rem;

    color: var(--foreground);

    outline: none;

    font-family: inherit;

    &::placeholder {

      color: var(--muted-foreground);

    }

  }

  .command-list {

    max-height: 18rem;

    overflow-y: auto;

    overscroll-behavior: contain;

    padding: 0.25rem;

  }

  .command-group {

    padding: 0.25rem 0;

  }

  .command-group-heading {

    margin: 0;

    padding: 0.375rem 0.5rem;

    font-size: 0.75rem;

    font-weight: 500;

    color: var(--muted-foreground);

  }

  .command-item {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    width: 100%;

    padding: 0.5rem 0.5rem;

    border: none;

    border-radius: var(--radius-md);

    background: transparent;

    color: var(--foreground);

    font-size: 0.8125rem;

    font-family: inherit;

    text-align: left;

    cursor: pointer;

    outline: none;

    &:hover,

    &[data-highlighted] {

      background-color: var(--accent);

    }

    &:focus-visible {

      outline: 2px solid var(--ring);

      outline-offset: -2px;

    }

    &[aria-disabled="true"] {

      pointer-events: none;

      opacity: 0.5;

    }

    & svg {

      width: 1rem;

      height: 1rem;

      color: var(--muted-foreground);

      flex-shrink: 0;

    }

    /* Same as combobox-item: `display: flex` beats the UA [hidden] rule, and

       command.ts filter() hides non-matches via the hidden attribute. */

    &[hidden] {

      display: none;

    }

  }

  .command-separator {

    height: 1px;

    background-color: var(--border);

    margin: 0.25rem -0.25rem;

  }

  .command-shortcut {

    margin-inline-start: auto;

    font-size: 0.6875rem;

    color: var(--muted-foreground);

    font-family: var(--font-mono);

  }

  .command-empty {

    padding: 1.5rem;

    text-align: center;

    font-size: 0.875rem;

    color: var(--muted-foreground);

  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {

    dialog.command {

      transition: none;

      opacity: 1;

      transform: none;

    }

    dialog.command::backdrop {

      transition: none;

    }

  }

  @media (prefers-contrast: more) {

    dialog.command {

      border: 2px solid var(--border);

    }

    .command-item {

      &:hover,

      &[data-highlighted] {

        outline: 1px solid var(--foreground);

      }

    }

  }

  @media (forced-colors: active) {

    dialog.command {

      border: 2px solid CanvasText;

    }

    .command-item {

      &:hover,

      &[data-highlighted] {

        forced-color-adjust: none;

        background: Highlight;

        color: HighlightText;

      }

    }

    .command-separator {

      background-color: CanvasText;

    }

  }

  /* -- Density ----------------------------------------------------

     data-density on the dialog.command root scales the rows of the palette.

     comfortable == the unsized default. (0,2,1) beats the base (0,1,0). */

  dialog.command:where([data-density="compact"]) {

    & .command-input-wrapper {

      padding: 0.5rem 0.75rem;

    }

    & .command-item {

      padding: 0.375rem 0.5rem;

    }

    & .command-group-heading {

      padding: 0.25rem 0.5rem;

    }

  }

  dialog.command:where([data-density="comfortable"]) {

    & .command-input-wrapper {

      padding: 0.75rem 1rem;

    }

    & .command-item {

      padding: 0.5rem 0.5rem;

    }

    & .command-group-heading {

      padding: 0.375rem 0.5rem;

    }

  }

  dialog.command:where([data-density="spacious"]) {

    & .command-input-wrapper {

      padding: 1rem 1.25rem;

    }

    & .command-item {

      padding: 0.625rem 0.5rem;

    }

    & .command-group-heading {

      padding: 0.5rem 0.5rem;

    }

  }

}

// -- Command --------------------------------------------------

// Command palette dialog with search filtering, keyboard navigation, and

// Cmd/Ctrl+K shortcut, plus the named-state API so agents/tests can drive

// open/closed by name (AGENTS.md "State API").

// Shared preamble (AGENTS.md "State API"); the implementation lives in core.js —

// build.ts rewrites this import into a df$.shadcn.shared binding in dist/.

// defussQuery: the callable runtime - filtering flags + the move-highlight

// marker ride query scalar writes; membership stays authored (flag-based

// filtering, no renderer - §3 command row: keyed morph only once a data

// source drives the result set, which the docs palette may adopt later).

import {

  defussGlobals,

  defussQuery,

  componentState,

  bindComponent,

  bindGlobalKeys,

} from '../../../shared/state-api.js';

const df$ = defussGlobals();

const dfDollar = defussQuery();

const commandStates = ['default', 'open'];

// VERIFIED: (verify's API docs gate) the states below are exactly the declared ones, each

// described, and every config field typed, described and named in the code.

/** setState() configs per state - the command palette's states take none. */

export interface CommandStateConfigs {

  /** Closed. */

  default: {};

  /** Open as a modal, its search input focused. */

  open: {};

}

/**

 * The markup of a state: 'open' carries `open`. render() applies it to a

 * detached copy; on the live element showModal()/close() (the native

 * protocol: top layer, focus, inert background) produce exactly this

 * attribute - the e2e render round trip proves they agree.

 */

function applyMarkup(el, stateName) {

  dfDollar(el).attr('open', stateName === 'open' ? '' : null);

}

/**

 * UI side of setState: 'default' closes, 'open' opens modally and focuses

 * the search input (same affordance as the trigger/keyboard shortcut).

 */

function triggerStateChange(dialog, stateName, _config) {

  switch (stateName) {

    case 'default':

      if (dialog.open) dialog.close();

      break;

    case 'open':

      if (!dialog.open) dialog.showModal();

      {

        const input = dfDollar(dialog).find<HTMLInputElement>('.command-input').get(0);

        if (input) input.focus();

      }

      break;

  }

}

/** The state a dialog shows: its `open` - read back after every change, and the state it starts in. */

const shown = (dialog: HTMLDialogElement) => (dialog.open ? 'open' : 'default');

/** Registry-level API; pass the dialog element explicitly. Unknown names throw. */

export const commandApi = componentState<HTMLDialogElement>({

  component: 'command',

  states: commandStates,

  apply: (dialog, state) => triggerStateChange(dialog, state.name, state.config),

  // the state is the dialog's `open`, as the schema observes it: ⌘K and the

  // trigger open it natively, without setState, and getState() must see that

  read: (dialog, state) => ({ name: shown(dialog), config: state.config }),

  markup: (el, state) => applyMarkup(el, state.name),

});

df$.commandApi = commandApi;

df$.commandStates = commandStates;

/* Cmd/Ctrl+K toggles the palette - through the shared global-key listener

   (src/shared/keys.ts), opted in for editable targets: ⌘K must work while

   typing in a field (the palette's own input included, where it closes it). */

bindGlobalKeys(

  (e) => {

    if (!(e.metaKey || e.ctrlKey) || e.altKey || e.key.toLowerCase() !== 'k') return;

    const dialog = dfDollar<HTMLDialogElement>('dialog.command').get(0);

    if (!dialog) return;

    e.preventDefault();

    if (dialog.open) dialog.close();

    else {

      dialog.showModal();

      const input = dfDollar(dialog).find<HTMLInputElement>('.command-input').get(0);

      if (input) input.focus();

    }

    return true;

  },

  { editable: true },

);

function getVisibleItems(list) {

  return Array.from(dfDollar(list).find('.command-item:not([hidden]):not([aria-disabled="true"])'));

}

function highlightItem(list, index) {

  const visible = getVisibleItems(list);

  dfDollar(list).find('.command-item[data-highlighted]').data('highlighted', null);

  if (visible.length === 0) return -1;

  const clamped = ((index % visible.length) + visible.length) % visible.length;

  dfDollar(visible[clamped]).data('highlighted', '');

  visible[clamped].scrollIntoView({ block: 'nearest' }); // native scroll stays native

  return clamped;

}

function init() {

  dfDollar<HTMLDialogElement>('dialog.command:not([data-init])')

    .toArray()

    .forEach((dialog) => {

      dialog.dataset.init = '';

      // el.store + el.api (AGENTS.md "State through stores")

      bindComponent(dialog, commandApi, { name: shown(dialog), config: {} });

      const input = dfDollar(dialog).find<HTMLInputElement>('.command-input').get(0);

      const list = dfDollar(dialog).find('.command-list').get(0);

      const empty = dfDollar(dialog).find('.command-empty').get(0);

      if (!input || !list) return;

      let highlightIndex = -1;

      // query the LIVE list on every filter (KISS): item nodes may be replaced

      // after init (e.g. the docs palette feeds itself from a generated index),

      // a cached snapshot would silently keep filtering detached nodes

      const filter = (q) => {

        const query = q.toLowerCase();

        let hasVisible = false;

        const $items = dfDollar(list).find('.command-item');

        // flag-based filtering through query scalars: nodes keep identity (§3)

        $items.each(function (this: HTMLElement) {

          const match = !query || this.textContent.toLowerCase().includes(query);

          dfDollar(this).prop('hidden', !match);

          if (match) hasVisible = true;

        });

        dfDollar(list)

          .find('.command-group')

          .each(function (this: HTMLElement) {

            dfDollar(this).prop('hidden', dfDollar(this).find('.command-item:not([hidden])').length === 0);

          });

        dfDollar(list).find('.command-separator').prop('hidden', !!query);

        if (empty) dfDollar(empty).prop('hidden', hasVisible);

        highlightIndex = highlightItem(list, 0);

      };

      input.addEventListener('input', () => {

        filter(input.value);

      });

      input.addEventListener('keydown', (e) => {

        const visible = getVisibleItems(list);

        if (e.key === 'ArrowDown') {

          e.preventDefault();

          highlightIndex = highlightItem(list, highlightIndex + 1);

        } else if (e.key === 'ArrowUp') {

          e.preventDefault();

          highlightIndex = highlightItem(list, highlightIndex - 1);

        } else if (e.key === 'Enter') {

          e.preventDefault();

          if (visible[highlightIndex]) {

            visible[highlightIndex].click();

          }

        } else if (e.key === 'Home') {

          e.preventDefault();

          highlightIndex = highlightItem(list, 0);

        } else if (e.key === 'End') {

          e.preventDefault();

          highlightIndex = highlightItem(list, visible.length - 1);

        }

      });

      dialog.addEventListener('click', (e) => {

        if (e.target === dialog) dialog.close();

        if ((e.target as HTMLElement).closest('.command-item')) dialog.close();

      });

      dialog.addEventListener('close', () => {

        // `close` fires AFTER the exit transition (display allow-discrete), so a

        // fast re-open (setState/⌘K within 150ms) can beat the queued event - a

        // stale one must not clear an open palette. (Skipping the reset on

        // re-open keeps the last query, like macOS Spotlight.) The state itself

        // follows `open` through read().

        if (dialog.open) return;

        dfDollar(input).val('');

        filter('');

        dfDollar(list).find('.command-item[data-highlighted]').data('highlighted', null);

        highlightIndex = -1;

      });

    });

  dfDollar('[data-command-trigger]:not([data-init])')

    .toArray()

    .forEach((trigger) => {

      trigger.dataset.init = '';

      const dialog = dfDollar<HTMLDialogElement>('#' + CSS.escape(trigger.dataset.commandTrigger)).get(0);

      if (!dialog) return;

      trigger.addEventListener('click', () => {

        dialog.showModal();

        const input = dfDollar(dialog).find<HTMLInputElement>('.command-input')[0];

        if (input) (input as HTMLElement).focus(); // native focus protocol stays native

      });

    });

}

init();

new MutationObserver(init).observe(document, { childList: true, subtree: true });