Command

Demoul e viu (_search.js, chrome de documentație): ↑ ↓ mută cursorul, textul filtrează rândurile, un grup rămas gol dispare. În producție comportamentul vine din cmdk, prin react/command.tsx.

.command              alb · 1px --c-rule-card · --r-lg · overflow hidden · FĂRĂ umbră
                      (nu plutește: e în flux sau într-un .modal, care are scrim)
.command-input        rândul de căutare · geometria lui .input-group: padding 4 16 · gap 8
                      border-bottom 1px --c-rule-soft · iconița `search` în fog
  > .input            controlul, fără chrome: border 0 · radius 0 · fundal transparent
                      · fără halo pe focus — carcasa ia bordura, controlul o pierde
                      (regula din .input-group); suprafața cu focus e comanda
.command-list         padding 6 · gap 2 · max-height 300 · overflow-y auto
.command-group        etichetă + rândurile ei · coloană cu gap 2
.popover-label        11px · 600 · 0.10em · uppercase · padding 8 10 4
.popover-item         8px 10px · --r-md · 14/20 ink · iconița din stânga fog
.command-shortcut     tasta de la capătul rândului — TEXT, mono 11 fog, margin-left auto
.typeahead-meta       rândul secundar (unde e rezultatul, un cod) — 12/16 fog
.popover-sep          1px --c-rule-soft · margin 4 0
.command-empty        14/20 fog · centrat · padding 14 10   (= .typeahead-empty)
.command-footer       legenda tastelor · padding 8 16 · border-top · 12/16 fog, tastele în ink

Rândul de căutare e un câmp, deci urmează Input group: 16 + icon 16 + gap 8 = textul la 40px, ca în orice căutare din sistem. Rândurile se aliniază pe coloana iconițelor: 6 (listă) + 10 (rând) = 16, sub iconița câmpului. Textul lor e la 42 — gap-ul rândului de meniu e 10, al câmpului 8; fiecare își ține regula. Lista e geometria popoverului — padding 6, deci rândul la --r-md: 20 − 6 = 14.

npm i cmdk @radix-ui/react-dialog
# copiezi react/command.tsx peste components/ui/command.tsx — e sursă de copiat, nu pachet

API-ul e cel din shadcn/ui, deci fișierul înlocuiește components/ui/command.tsx fără să atingi call-site-urile; ce se schimbă e stratul de stil — clase din bono-ds.css în loc de utilitare. cn nu are nevoie de tailwind-merge. Vezi react/README.md.

import {
  Command, CommandInput, CommandList, CommandEmpty,
  CommandGroup, CommandItem, CommandSeparator, CommandShortcut,
} from "@/components/ui/command"

<Command>
  <CommandInput placeholder="Scrie o comandă sau caută…" />
  <CommandList>
    <CommandEmpty>Nimic pentru căutarea asta.</CommandEmpty>
    <CommandGroup heading="Sugestii">
      <CommandItem><Receipt />Emite factură<CommandShortcut>⌘N</CommandShortcut></CommandItem>
      <CommandItem><FileUp />Încarcă document</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Cont">
      <CommandItem><User />Profil<CommandShortcut>⌘P</CommandShortcut></CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Atributele lui cmdk sunt alias-uri în bono-ds.css, nu reguli paralele — același mecanism ca [data-state="checked"] pentru .is-selected la select: cmdk nu lasă un className pe antetul grupului și își pune cursorul pe data-selected, deci fără alias forma React n-ar avea nici etichetă, nici cursor.

Comanda într-un .modal: scrimul canonic, X-ul din DS, Esc, focus trap, scroll-lock — toate ale modalului, nimic propriu. Modalul își pierde padding-ul și fundalul bej (suprafața e comanda) și stă în treimea de sus, nu la centru: lista crește și scade cu fiecare literă, iar un dialog centrat ar sări pe verticală la fiecare tastă. Câmpul e .input.lg, ca orice câmp din modal — și de aici lista se face mare singură.

<!-- HTML -->
<div class="modal-backdrop open">
  <div class="modal lg command-dialog" role="dialog" aria-modal="true" aria-label="Caută">
    <button class="btn outline sm icon-only" type="button" aria-label="Închide"><svg class="ic">…x…</svg></button>
    <div class="command">
      <div class="command-input"><svg class="ic">…search…</svg><input class="input lg" role="combobox" …></div>
      <div class="command-list" role="listbox">…</div>
      <div class="command-footer">…</div>
    </div>
  </div>
</div>

// React — Radix Dialog în clasele de mai sus, câmpul .lg prin context
const [open, setOpen] = useState(false)
useEffect(() => {
  const down = (e) => { if (e.key === "k" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); setOpen(o => !o) } }
  document.addEventListener("keydown", down)
  return () => document.removeEventListener("keydown", down)
}, [])

<CommandDialog open={open} onOpenChange={setOpen} title="Caută" description="Scrie ca să cauți…">
  <CommandInput placeholder="Caută o componentă…" />
  <CommandList>…</CommandList>
</CommandDialog>

Intrarea în paletă are rolul unui câmp — „aici cauți" — deci poartă câmpul: exact căutarea din Input group, cu iconița search și scurtătura — un badge alb, .badge.sm.outline — în addon-uri. Controlul însă e un <button class="input">, nu un <input>: aici nu se scrie, click-ul (sau ⌘K) deschide dialogul, unde se scrie. Textul butonului e placeholder-ul — --c-mist, la stânga, tăiat cu elipsă.

<div class="input-group command-trigger">
  <button class="input" type="button" aria-haspopup="dialog"
          aria-keyshortcuts="Meta+K Control+K">Caută…</button>
  <span class="input-group-addon" aria-hidden="true"><svg class="ic">…search…</svg></span>
  <span class="input-group-addon inline-end" aria-hidden="true"><kbd class="badge sm outline">⌘K</kbd></span>
</div>

Nu există .command.lg scris de mână. Scrii .input.lg în rândul de căutare și lista îl urmează — .command:has(> .command-input > .input.lg) — exact cum lista unui select se deduce din .select-trigger.lg. O singură decizie, luată de câmp. Într-un .modal câmpul e oricum .input.lg (modal.md), deci dialogul e mare fără să mai spună nimeni. În React, CommandDialog pune size="lg" pe CommandInput prin context.

Aceeași aritmetică ca la .popover.lg: raza suprafeței minus padding-ul listei = raza rândului (24 − 10 = 14, cum 20 − 6 = 14 la implicit). Rândul mare își ține treapta (16/24) dar padding-ul lateral al rândului implicit (10), ca iconițele să cadă sub iconița câmpului, care stă la 20 după regula lui .input-group.lg. Nicio cifră nouă.

input       role="combobox" aria-expanded="true" aria-controls=<listă> aria-activedescendant=<rând activ>
            aria-autocomplete="list" autocomplete="off"
lista       role="listbox"  ·  grupul role="group" aria-labelledby=<etichetă>  ·  rândul role="option"
dialog      role="dialog" aria-modal="true" aria-label (sau un titlu .sr-only — Radix îl cere)
tastatură   ↑ ↓ mută cursorul · Home/End · Enter execută rândul activ (sau primul)
            Esc închide dialogul ȘI întoarce focusul în declanșator · Tab rămâne în dialog
declanșator aria-haspopup="dialog" aria-keyshortcuts="Meta+K Control+K"

Focusul rămâne în .input tot timpul — altfel utilizatorul nu mai poate scrie. Rândul de sub săgeată se marchează cu .is-active plus aria-activedescendant, nu prin mutarea focusului. În React toate astea vin din cmdk și Radix; forma scrisă de mână le reproduce în _search.js doar pentru acest sit.

Primul consumator al componentei e câmpul Caută din bară — declanșatorul, deasupra „Referințe" (⌘K). Indexul — components/_search-index.json — e generat de scripts/build-catalog.py din paginile catalogului: titlul, lede-ul și, pe fiecare bloc, antetul și textul vizibil. Nu se editează; o pagină schimbată fără rebuild pică --check, ca index.json.

Canalele sunt pe trepte care nu se amestecă (100 / 20 / 5): oricâte potriviri în text nu pot urca peste una în titlu. Toți tokenii trebuie să existe undeva; fără text, lista e catalogul pe secțiuni, în ordinea din sidebar — aceeași listă (_nav.js), nu o a doua. Diacriticele nu contează: „cautare" găsește „căutare".

2026-10-07 — adăugat, din shadcn/ui (cmdk). Primul consumator: căutarea din catalog. Alias-uri noi în bono-ds.css: [data-selected="true"] → .is-active, [data-disabled="true"] → :disabled, [cmdk-group-heading] → .popover-label, .command-empty → .typeahead-empty; utilitarul .sr-only.