@womp/kookie-ui 0.33.0 → 0.34.1

package/dist/esm/index.js

@@ -1,3 +1,3 @@
 "use client";
-import"./chunk-AYKOOEZR.js";import{a as Eo,b as Fo,c as Go,d as Ho}from"./chunk-3LIF53YY.js";import{a as Do}from"./chunk-RIHTVZVJ.js";import{a as Co}from"./chunk-WTP2KIK3.js";import"./chunk-RSG4XWHU.js";import{a as mo}from"./chunk-ZLGOZKB3.js";import{a as wo}from"./chunk-7QBNXNEN.js";import{a as $}from"./chunk-VBF3XALY.js";import{h as oo}from"./chunk-XF6Z5NKE.js";import{e as ro}from"./chunk-QBONJMSE.js";import{a as eo}from"./chunk-D42VCLKH.js";import{d as fo}from"./chunk-Y44DYJA5.js";import{g as Ao}from"./chunk-K35JUIUT.js";import{h as zo}from"./chunk-NO2JCJWI.js";import"./chunk-INGT6DB6.js";import"./chunk-B447PNRD.js";import{l as yo}from"./chunk-J6B7UCZN.js";import{a as Z}from"./chunk-COLJWVN7.js";import{a as _}from"./chunk-VYF6KKYM.js";import{c as X}from"./chunk-5VYQDA5S.js";import{h as Y}from"./chunk-TMINGBSQ.js";import{a as S}from"./chunk-AXODGYRY.js";import{a as T}from"./chunk-LFAUMDU5.js";import{c as U}from"./chunk-26O4RBOJ.js";import{a as V}from"./chunk-OPYTQ34H.js";import{a as W}from"./chunk-L66IUPDW.js";import{a as P}from"./chunk-AKSAKP35.js";import{a as Q}from"./chunk-3H33S3UA.js";import{i as Bo}from"./chunk-YOTTLPJ3.js";import{e as R}from"./chunk-EERKYRYI.js";import{a as ko,b as lo,c as no,d as qo,e as so,f as uo,g as vo}from"./chunk-XKYPJTRN.js";import{a as po,c as to,d as xo,e as ao,f as bo,g as co,h as go,i as ho,j as io}from"./chunk-BR6Z2CAE.js";import{a as jo}from"./chunk-65URNXF2.js";import{a as I}from"./chunk-NYIYRILR.js";import{l as K}from"./chunk-BQOFHLDP.js";import{g as J}from"./chunk-TUZ665BA.js";import{n as L}from"./chunk-TRJAVWCK.js";import{g as M}from"./chunk-W35ZKQMQ.js";import{o as N}from"./chunk-KBSH6CBD.js";import"./chunk-2ACVWLFA.js";import{a as O}from"./chunk-Q5SANVIW.js";import{a as u}from"./chunk-XD3C3GVF.js";import{a as A}from"./chunk-X7DGYRAY.js";import{m as E}from"./chunk-LG5DPQ46.js";import{b as B,c as C}from"./chunk-7YXHLU4C.js";import{a as D}from"./chunk-WUCBFB25.js";import{a as z}from"./chunk-JQMWNI62.js";import{a as y}from"./chunk-Y2DBXOLT.js";import{c as F}from"./chunk-3M5ZM67R.js";import"./chunk-2VSRZ4IT.js";import{a as G}from"./chunk-HVMRB3AH.js";import"./chunk-4KIZRO52.js";import{a as H}from"./chunk-JFJV4HL3.js";import{a as v,b as w}from"./chunk-NJ7RQYLX.js";import"./chunk-KDJM4NQQ.js";import{a as h}from"./chunk-B6YGNB3V.js";import{f as i}from"./chunk-OMPLFDS6.js";import{h as n}from"./chunk-6WHKGVWY.js";import"./chunk-FATCGZZE.js";import{a as l}from"./chunk-7VJF6EXN.js";import"./chunk-TGRHRMQI.js";import{a as j}from"./chunk-OBSZOD5M.js";import{a as k}from"./chunk-FICBVI4M.js";import"./chunk-BQC2P3SN.js";import{a as q}from"./chunk-L7PRLW6A.js";import{a as s}from"./chunk-IFHBMTFX.js";import"./chunk-UJ7JERJ5.js";import"./chunk-HGF4CKRY.js";import{a as c,b as d,c as g}from"./chunk-FVRVBB6O.js";import"./chunk-GHUAUFG7.js";import"./chunk-UMQOTGJC.js";import"./chunk-XD676L6S.js";import"./chunk-XUCR7L4G.js";import"./chunk-3QWGSRYC.js";import"./chunk-KGCGT4MJ.js";import"./chunk-QKCNGEX4.js";import"./chunk-WEBNIUEX.js";import"./chunk-SGKLJDA3.js";import{a as f}from"./chunk-BUXK5VGR.js";import{a as e}from"./chunk-KVVRFWGQ.js";import"./chunk-YCLPURTD.js";import"./chunk-CR65RYGM.js";import"./chunk-7N2Q5WOM.js";import"./chunk-OAJ5DARR.js";import{b as o,c as r}from"./chunk-5KMEUZWN.js";import{a as m,b as p,c as t,d as x}from"./chunk-GKDGNPBD.js";import"./chunk-5ON3XLRD.js";import"./chunk-HBWBPBSA.js";import"./chunk-5JYSYTHA.js";import"./chunk-ISCZ57VL.js";import"./chunk-EB4AG3OL.js";import{a}from"./chunk-QPRUTOLI.js";import"./chunk-G66WDIIV.js";import"./chunk-4KBKS3ZE.js";import"./chunk-VWRPVM5K.js";import"./chunk-ODHCDJ3Y.js";import{a as b}from"./chunk-DFQIIYLD.js";import"./chunk-KOAWATCI.js";import"./chunk-5KJIPH2N.js";import"./chunk-YOSLXJI5.js";import"./chunk-QEDKL23P.js";import"./chunk-5BXCPANF.js";import"./chunk-LPLW7OWA.js";import"./chunk-L54FWKJE.js";import"./chunk-XU74PNM2.js";import"./chunk-MAA6LEE2.js";import"./chunk-OKQAVYW4.js";import"./chunk-CLJ6SEGP.js";import"./chunk-ANQLWGFN.js";import"./chunk-VQPANPMI.js";export{Eo as APPEARANCE_STORAGE_KEY,h as AccessibleIcon,i as Accordion,n as AlertDialog,q as Avatar,s as Blockquote,u as Box,z as Button,A as Card,E as Chatbar,G as Checkbox,F as CheckboxGroup,t as ChevronDownIcon,H as Chip,I as Code,K as Combobox,C as Confirmation,L as ContextMenu,M as Dialog,N as DropdownMenu,e as Flex,O as Grid,j as Heading,P as Image,a as Kbd,Q as Link,Bo as MessageScroller,R as Navbar,ko as Navigator,qo as NavigatorBack,vo as NavigatorLink,lo as NavigatorOutlet,uo as NavigatorScreen,so as NavigatorTitle,B as Notice,jo as Page,J as Popover,S as Portal,T as Progress,V as Radio,U as RadioGroup,W as Reset,b as ScrollArea,X as SegmentedControl,Y as Select,Z as Separator,Ao as Sheet,zo as Shell,yo as Sidebar,_ as Slider,o as Slot,r as Slottable,f as Spinner,$ as Switch,oo as Table,ro as Tabs,k as Text,eo as TextArea,fo as TextField,g as Theme,c as ThemeContext,p as ThickCheckIcon,x as ThickChevronRightIcon,m as ThickDividerHorizontalIcon,mo as Toggle,io as Toolbar,xo as ToolbarButton,co as ToolbarFill,to as ToolbarGroup,ao as ToolbarOverflow,go as ToolbarSeparator,bo as ToolbarSlot,ho as ToolbarTitle,w as Tooltip,v as TooltipProvider,wo as VirtualMenu,D as VisuallyHidden,Fo as appearanceScript,Go as setAppearance,Ho as useAppearance,l as useBodyPointerEventsCleanup,Co as useLiveAnnouncer,no as useNavigator,d as useThemeContext,Do as useToggleState,po as useToolbarOverflow,y as useTooltipWrapper};
+import"./chunk-AYKOOEZR.js";import{a as No}from"./chunk-RIHTVZVJ.js";import{a as Oo,b as Po,c as Qo,d as Ro}from"./chunk-3LIF53YY.js";import{a as Mo}from"./chunk-WTP2KIK3.js";import"./chunk-SHKPQ3RI.js";import{a as jo}from"./chunk-ZLGOZKB3.js";import{a as Ho}from"./chunk-7QBNXNEN.js";import{a as ao}from"./chunk-VYF6KKYM.js";import{a as bo}from"./chunk-VBF3XALY.js";import{h as co}from"./chunk-XF6Z5NKE.js";import{e as go}from"./chunk-QBONJMSE.js";import{a as ho}from"./chunk-D42VCLKH.js";import{d as io}from"./chunk-YLGIP3A5.js";import{h as to}from"./chunk-TMINGBSQ.js";import{g as Ko}from"./chunk-API4DAPY.js";import{h as Jo}from"./chunk-NO2JCJWI.js";import"./chunk-INGT6DB6.js";import"./chunk-B447PNRD.js";import{l as Io}from"./chunk-J6B7UCZN.js";import{a as xo}from"./chunk-COLJWVN7.js";import{a as mo}from"./chunk-L66IUPDW.js";import{c as po}from"./chunk-5VYQDA5S.js";import{a as Ao,b as Bo,c as Co,d as Do,e as Eo,f as Fo,g as Go}from"./chunk-XKYPJTRN.js";import{a as ko,c as lo,d as no,e as qo,f as so,g as uo,h as vo,i as wo,j as yo}from"./chunk-BR6Z2CAE.js";import{a as zo}from"./chunk-65URNXF2.js";import{a as oo}from"./chunk-AXODGYRY.js";import{a as ro}from"./chunk-LFAUMDU5.js";import{c as eo}from"./chunk-26O4RBOJ.js";import{a as fo}from"./chunk-OPYTQ34H.js";import{a as Z}from"./chunk-AKSAKP35.js";import{a as _}from"./chunk-3H33S3UA.js";import{i as Lo}from"./chunk-YOTTLPJ3.js";import{e as $}from"./chunk-EERKYRYI.js";import{a as I}from"./chunk-NYIYRILR.js";import{l as K}from"./chunk-BQOFHLDP.js";import{g as J}from"./chunk-TUZ665BA.js";import{b as L,c as M,d as N,e as O,f as P,g as Q,h as R,i as S,j as T,k as U}from"./chunk-GZPB6MRQ.js";import{n as V}from"./chunk-TRJAVWCK.js";import{g as W}from"./chunk-CAM66IXC.js";import{o as X}from"./chunk-KBSH6CBD.js";import"./chunk-2ACVWLFA.js";import{a as Y}from"./chunk-Q5SANVIW.js";import{a as u}from"./chunk-XD3C3GVF.js";import{a as A}from"./chunk-X7DGYRAY.js";import{m as E}from"./chunk-LG5DPQ46.js";import{b as B,c as C}from"./chunk-7YXHLU4C.js";import{a as D}from"./chunk-WUCBFB25.js";import{a as z}from"./chunk-JQMWNI62.js";import{a as y}from"./chunk-Y2DBXOLT.js";import{c as F}from"./chunk-3M5ZM67R.js";import"./chunk-2VSRZ4IT.js";import{a as G}from"./chunk-HVMRB3AH.js";import"./chunk-4KIZRO52.js";import{a as H}from"./chunk-JFJV4HL3.js";import{a as v,b as w}from"./chunk-NJ7RQYLX.js";import"./chunk-KDJM4NQQ.js";import{a as h}from"./chunk-B6YGNB3V.js";import{f as i}from"./chunk-OMPLFDS6.js";import{h as n}from"./chunk-NZJRXZYX.js";import"./chunk-FATCGZZE.js";import{a as j}from"./chunk-OBSZOD5M.js";import{a as l}from"./chunk-7VJF6EXN.js";import"./chunk-TGRHRMQI.js";import{a as k}from"./chunk-FICBVI4M.js";import"./chunk-BQC2P3SN.js";import{a as q}from"./chunk-L7PRLW6A.js";import{a as s}from"./chunk-IFHBMTFX.js";import"./chunk-UJ7JERJ5.js";import"./chunk-HGF4CKRY.js";import{a as c,b as d,c as g}from"./chunk-FVRVBB6O.js";import"./chunk-GHUAUFG7.js";import"./chunk-UMQOTGJC.js";import"./chunk-XD676L6S.js";import"./chunk-XUCR7L4G.js";import"./chunk-3QWGSRYC.js";import"./chunk-KGCGT4MJ.js";import"./chunk-QKCNGEX4.js";import"./chunk-WEBNIUEX.js";import"./chunk-SGKLJDA3.js";import{a as f}from"./chunk-BUXK5VGR.js";import{a as e}from"./chunk-KVVRFWGQ.js";import"./chunk-YCLPURTD.js";import"./chunk-CR65RYGM.js";import"./chunk-7N2Q5WOM.js";import"./chunk-OAJ5DARR.js";import{b as o,c as r}from"./chunk-5KMEUZWN.js";import{a as m,b as p,c as t,d as x}from"./chunk-GKDGNPBD.js";import"./chunk-5ON3XLRD.js";import"./chunk-HBWBPBSA.js";import"./chunk-5JYSYTHA.js";import"./chunk-ISCZ57VL.js";import"./chunk-EB4AG3OL.js";import{a}from"./chunk-QPRUTOLI.js";import"./chunk-G66WDIIV.js";import"./chunk-4KBKS3ZE.js";import"./chunk-VWRPVM5K.js";import"./chunk-ODHCDJ3Y.js";import{a as b}from"./chunk-DFQIIYLD.js";import"./chunk-KOAWATCI.js";import"./chunk-5KJIPH2N.js";import"./chunk-YOSLXJI5.js";import"./chunk-QEDKL23P.js";import"./chunk-5BXCPANF.js";import"./chunk-LPLW7OWA.js";import"./chunk-L54FWKJE.js";import"./chunk-XU74PNM2.js";import"./chunk-MAA6LEE2.js";import"./chunk-OKQAVYW4.js";import"./chunk-CLJ6SEGP.js";import"./chunk-ANQLWGFN.js";import"./chunk-VQPANPMI.js";export{Oo as APPEARANCE_STORAGE_KEY,h as AccessibleIcon,i as Accordion,n as AlertDialog,q as Avatar,s as Blockquote,u as Box,z as Button,A as Card,E as Chatbar,G as Checkbox,F as CheckboxGroup,t as ChevronDownIcon,H as Chip,I as Code,K as Combobox,L as Command,S as CommandCollection,N as CommandContent,U as CommandEmpty,Q as CommandGroup,R as CommandGroupLabel,O as CommandInput,T as CommandItem,P as CommandList,M as CommandTrigger,C as Confirmation,V as ContextMenu,W as Dialog,X as DropdownMenu,e as Flex,Y as Grid,j as Heading,Z as Image,a as Kbd,_ as Link,Lo as MessageScroller,$ as Navbar,Ao as Navigator,Do as NavigatorBack,Go as NavigatorLink,Bo as NavigatorOutlet,Fo as NavigatorScreen,Eo as NavigatorTitle,B as Notice,zo as Page,J as Popover,oo as Portal,ro as Progress,fo as Radio,eo as RadioGroup,mo as Reset,b as ScrollArea,po as SegmentedControl,to as Select,xo as Separator,Ko as Sheet,Jo as Shell,Io as Sidebar,ao as Slider,o as Slot,r as Slottable,f as Spinner,bo as Switch,co as Table,go as Tabs,k as Text,ho as TextArea,io as TextField,g as Theme,c as ThemeContext,p as ThickCheckIcon,x as ThickChevronRightIcon,m as ThickDividerHorizontalIcon,jo as Toggle,yo as Toolbar,no as ToolbarButton,uo as ToolbarFill,lo as ToolbarGroup,qo as ToolbarOverflow,vo as ToolbarSeparator,so as ToolbarSlot,wo as ToolbarTitle,w as Tooltip,v as TooltipProvider,Ho as VirtualMenu,D as VisuallyHidden,Po as appearanceScript,Qo as setAppearance,Ro as useAppearance,l as useBodyPointerEventsCleanup,Mo as useLiveAnnouncer,Co as useNavigator,d as useThemeContext,No as useToggleState,ko as useToolbarOverflow,y as useTooltipWrapper};
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.33.0",
+  "version": "0.34.1",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",

package/src/components/command.css

@@ -0,0 +1,197 @@
+@import './_internal/base-menu.css';
+
+/* Command (from v2, 2026-11-03): a command palette. The dialog's panel paints nothing; it is a
+ * column of two panes, the search bar and the results, anchored to the top at every width so a
+ * result count never moves the field. Rows are menu rows. No motion. */
+
+.kui-CommandOverlay {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: max(var(--space-9), 12vh) var(--space-4) var(--space-4);
+}
+
+.kui-CommandContent {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  width: 100%;
+  max-width: var(--overlay-w);
+  max-height: 100%;
+  outline: none;
+}
+
+.kui-CommandContent:where(.kui-r-size-1) {
+  --overlay-w: var(--overlay-w-1);
+}
+
+.kui-CommandContent:where(.kui-r-size-2) {
+  --overlay-w: var(--overlay-w-2);
+}
+
+.kui-CommandContent:where(.kui-r-size-3) {
+  --overlay-w: var(--overlay-w-3);
+}
+
+.kui-CommandContent:where(.kui-r-size-4) {
+  --overlay-w: var(--overlay-w-4);
+}
+
+.kui-CommandRoot {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-height: 0;
+}
+
+/* The search bar: a pane of its own, with type one step above the rows it filters. It pads by the
+   panel ladder at its index, one rung wider along the line than above and below it. */
+.kui-CommandSearch {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  background-color: var(--color-surface);
+  box-shadow: var(--floating-chrome);
+  cursor: text;
+}
+
+.kui-CommandSearch:where(.kui-r-size-1) {
+  gap: var(--space-2);
+  padding: var(--panel-p-1) var(--panel-p-2);
+  border-radius: var(--radius-panel-1);
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+}
+
+.kui-CommandSearch:where(.kui-r-size-2) {
+  gap: var(--space-3);
+  padding: var(--panel-p-2) var(--panel-p-3);
+  border-radius: var(--radius-panel-2);
+  font-size: var(--font-size-4);
+  line-height: var(--line-height-4);
+}
+
+.kui-CommandSearch:where(.kui-r-size-3) {
+  gap: var(--space-3);
+  padding: var(--panel-p-3) var(--panel-p-4);
+  border-radius: var(--radius-panel-3);
+  font-size: var(--font-size-5);
+  line-height: var(--line-height-5);
+}
+
+.kui-CommandSearch:where(.kui-r-size-4) {
+  gap: var(--space-4);
+  padding: var(--panel-p-4) var(--panel-p-4);
+  border-radius: var(--radius-panel-4);
+  font-size: var(--font-size-6);
+  line-height: var(--line-height-6);
+}
+
+.kui-CommandSearchSlot {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--neutral-a10);
+}
+
+.kui-CommandSearchSlot > :where(*) {
+  width: 1em;
+  height: 1em;
+}
+
+.kui-CommandInput {
+  flex: 1;
+  min-width: 0;
+  font: inherit;
+  color: var(--neutral-12);
+  background: none;
+  outline: none;
+}
+
+.kui-CommandInput::placeholder {
+  color: var(--neutral-a10);
+}
+
+/* The results: a menu pane whose height is its rows, up to what the window leaves. */
+.kui-CommandPanel {
+  min-height: 0;
+  flex-shrink: 1;
+}
+
+.kui-CommandList {
+  max-height: min(60vh, calc(480px * var(--scale)));
+  overflow: auto;
+  overscroll-behavior: contain;
+  outline: 0;
+}
+
+/* A pane with nothing in it (no rows, no empty state) shows nothing. */
+.kui-CommandPanel:where(:not(:has(.kui-CommandItem, .kui-CommandEmpty))) {
+  display: none;
+}
+
+.kui-CommandSeat:where(:empty) {
+  display: none;
+}
+
+/* cmdk marks every enabled row data-disabled="false"; base-menu.css reads any [data-disabled]. */
+.kui-CommandItem:where([data-disabled='false']) {
+  color: inherit;
+  cursor: var(--cursor-menu-item);
+}
+
+/* The highlighted row: cmdk's [data-selected='true'], from the pointer and the keyboard. */
+.kui-CommandItem:where([data-selected='true']) {
+  background-color: var(--accent-4);
+}
+
+.kui-CommandItem:where([data-tone='destructive']) {
+  color: var(--red-11);
+}
+
+.kui-CommandItem:where([data-disabled='true']) {
+  color: var(--neutral-a8);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* A link row takes the row's look, not a link's. */
+.kui-CommandItem:where(:any-link) {
+  text-decoration: none;
+}
+
+.kui-CommandItemLabel {
+  flex: 1;
+  min-width: 0;
+}
+
+.kui-CommandItemSlot {
+  display: flex;
+  flex-shrink: 0;
+}
+
+.kui-CommandItemSlot:where([data-slot='leading']) {
+  color: var(--neutral-a11);
+}
+
+.kui-CommandItemSlot:where([data-slot='trailing']) {
+  color: var(--neutral-a10);
+}
+
+.kui-CommandEmpty {
+  padding: var(--space-5);
+  text-align: center;
+  color: var(--neutral-a11);
+}
+
+@media (forced-colors: active) {
+  .kui-CommandItem:where([data-selected='true']) {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+
+  .kui-CommandSearch {
+    border: 1px solid CanvasText;
+  }
+}

package/src/components/command.tsx

@@ -0,0 +1,432 @@
+'use client';
+
+/**
+ * Command, from v2 (2026-11-03): a command palette, one field over everything the app can do.
+ *
+ * It is a Dialog: it covers the app, traps focus, locks the page and leaves on Escape. Inside are
+ * two panes in a column anchored to the top, the search bar and the results, so a result count
+ * never moves the field. The keyboard model is the package's: a row is highlighted from the first
+ * frame and after every keystroke, the arrows move it, Enter runs it, and running a row closes the
+ * palette. What rows exist and what they do is the app's.
+ *
+ * Filtering keeps the order of `items`: a palette is used by muscle memory, so typing never
+ * reorders it. Pass `filter={null}` to narrow and rank `items` yourself.
+ *
+ * Differs from v2 in its machine only: v1 builds on cmdk where v2 builds on Base UI's Autocomplete.
+ * A row that should be a link takes `asChild` around the app's link, where v2 takes `render`.
+ */
+
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+
+import { PortalTheme } from './_internal/portal-theme.js';
+import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
+import { useThemeSize } from '../hooks/theme-size.js';
+
+type Size = '1' | '2' | '3' | '4';
+
+/** The rows stand one step above the palette: it is the one object on screen, read from a distance. */
+const ROW_STEP: Record<Size, Size> = { '1': '2', '2': '3', '3': '4', '4': '4' };
+
+type CommandOpenChangeReason = 'item-press' | 'dismiss';
+type CommandOpenChangeDetails = { reason: CommandOpenChangeReason };
+
+type Filter = (item: unknown, query: string, itemToString: (item: unknown) => string) => boolean;
+
+const SIZE_DEF = { values: ['1', '2', '3', '4'], default: '2' } as const;
+
+const CommandSizeContext = React.createContext<Size>('2');
+const CommandQueryContext = React.createContext<(query: string) => void>(() => {});
+const CommandItemsContext = React.createContext<readonly unknown[]>([]);
+const CommandCloseContext = React.createContext<(() => void) | null>(null);
+const CommandListContext = React.createContext<{ query: string; filter: Filter | null; itemToString: (item: unknown) => string }>({
+  query: '',
+  filter: null,
+  itemToString: String,
+});
+const CommandSeatContext = React.createContext<{ seat: HTMLElement | null; setSeat: (node: HTMLElement | null) => void } | null>(null);
+
+/** What an item says, for the default filter: a string as itself, an object by its label, title or value. */
+function defaultItemToString(item: unknown): string {
+  if (typeof item === 'string' || typeof item === 'number') return String(item);
+  if (item && typeof item === 'object') {
+    const record = item as Record<string, unknown>;
+    for (const key of ['label', 'title', 'value', 'name']) {
+      if (typeof record[key] === 'string') return record[key] as string;
+    }
+  }
+  return '';
+}
+
+const defaultFilter: Filter = (item, query, itemToString) => itemToString(item).toLowerCase().includes(query.trim().toLowerCase());
+
+/** A group is an item that carries its own `items`; it stays while any of them matches. */
+function isGroup(item: unknown): item is { items: readonly unknown[] } {
+  return Boolean(item && typeof item === 'object' && Array.isArray((item as { items?: unknown }).items));
+}
+
+function narrow(items: readonly unknown[], query: string, filter: Filter | null, itemToString: (item: unknown) => string): unknown[] {
+  if (filter === null || query.trim() === '') return [...items];
+  const out: unknown[] = [];
+  for (const item of items) {
+    if (isGroup(item)) {
+      const kept = item.items.filter((member) => filter(member, query, itemToString));
+      if (kept.length > 0) out.push({ ...item, items: kept });
+    } else if (filter(item, query, itemToString)) {
+      out.push(item);
+    }
+  }
+  return out;
+}
+
+interface CommandProps {
+  /**
+   * The size step of the palette, from `"1"` to `"4"`. The rows are one step larger than the
+   * app's controls at the same step, and the search text larger again. The default comes from
+   * the theme.
+   */
+  size?: Size;
+  /**
+   * Every item the palette can show, before filtering. `CommandList` takes a function that turns
+   * an item into a row. An item with its own `items` array is a group. Keep the array stable.
+   */
+  items: readonly unknown[];
+  /** Whether the palette is open, for a controlled palette. Most are, because a key handler opens them. */
+  open?: boolean;
+  /** Whether the palette is open at the start, for an uncontrolled palette. */
+  defaultOpen?: boolean;
+  /** Called each time the palette opens or closes. `reason` is `"item-press"` when a row ran. */
+  onOpenChange?: (open: boolean, details: CommandOpenChangeDetails) => void;
+  /** A `CommandTrigger`, if there is one, and a `CommandContent`. */
+  children: React.ReactNode;
+}
+
+/** A command palette: a field over a list of rows, in a dialog. Running a row closes it. */
+function Command({ size: sizeProp, items, open, defaultOpen, onOpenChange, children }: CommandProps) {
+  const size = useThemeSize<Size>(sizeProp, SIZE_DEF);
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+  const controlled = open !== undefined;
+  const isOpen = controlled ? open : internalOpen;
+
+  const change = React.useCallback(
+    (next: boolean, reason: CommandOpenChangeReason) => {
+      onOpenChange?.(next, { reason });
+      if (!controlled) setInternalOpen(next);
+    },
+    [onOpenChange, controlled],
+  );
+  const close = React.useCallback(() => change(false, 'item-press'), [change]);
+
+  return (
+    <CommandSizeContext.Provider value={size}>
+      <CommandItemsContext.Provider value={items}>
+        <CommandCloseContext.Provider value={close}>
+          <DialogPrimitive.Root open={isOpen} onOpenChange={(next) => change(next, 'dismiss')} modal>
+            {children}
+          </DialogPrimitive.Root>
+        </CommandCloseContext.Provider>
+      </CommandItemsContext.Provider>
+    </CommandSizeContext.Provider>
+  );
+}
+
+interface CommandTriggerProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger> {}
+
+/** Opens the palette. Most palettes open from a key handler instead, and render none. */
+function CommandTrigger({ children, ...props }: CommandTriggerProps) {
+  return (
+    <DialogPrimitive.Trigger asChild {...props}>
+      {children}
+    </DialogPrimitive.Trigger>
+  );
+}
+
+interface CommandContentProps {
+  /** The palette's accessible name, such as "Search the documentation". */
+  'aria-label': string;
+  /**
+   * How an item matches the query. The default keeps an item whose text contains the query.
+   * `null` turns filtering off, for an app that narrows and ranks `items` itself.
+   */
+  filter?: Filter | null;
+  /** What an item says, for the filter. The default reads a string, or an object's label, title or value. */
+  itemToString?: (item: unknown) => string;
+  /** Called with the query on every keystroke, and with `""` when the palette closes. */
+  onQueryChange?: (query: string) => void;
+  /** Keep the portal in a container of your own. */
+  container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>['container'];
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/** The palette: a column of the search bar over the results, anchored to the top of the window. */
+function CommandContent({ 'aria-label': label, filter = defaultFilter, itemToString = defaultItemToString, onQueryChange, container, children, className, style }: CommandContentProps) {
+  const size = React.useContext(CommandSizeContext);
+  const [query, setQuery] = React.useState('');
+  const [seat, setSeat] = React.useState<HTMLElement | null>(null);
+  const report = React.useRef(onQueryChange);
+  React.useEffect(() => {
+    report.current = onQueryChange;
+  });
+
+  // Closing clears the query, so the palette opens fresh.
+  React.useEffect(() => () => report.current?.(''), []);
+  useBodyPointerEventsCleanup();
+
+  const changeQuery = React.useCallback((next: string) => {
+    setQuery(next);
+    report.current?.(next);
+  }, []);
+  const listValue = React.useMemo(() => ({ query, filter, itemToString }), [query, filter, itemToString]);
+  const seatValue = React.useMemo(() => ({ seat, setSeat }), [seat]);
+
+  return (
+    <DialogPrimitive.Portal container={container}>
+      <PortalTheme asChild>
+        <DialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-CommandOverlay">
+          <DialogPrimitive.Content
+            aria-label={label}
+            aria-describedby={undefined}
+            className={classNames('kui-CommandContent', `kui-r-size-${size}`, className)}
+            style={style}
+            onCloseAutoFocus={() => {
+              document.body.style.pointerEvents = '';
+            }}
+          >
+            <DialogPrimitive.Title className="kui-sr-only">{label}</DialogPrimitive.Title>
+            {/* cmdk owns the highlight and Enter; this file owns the filter, so order never changes. */}
+            <CommandPrimitive label={label} shouldFilter={false} loop className="kui-CommandRoot">
+              <CommandListContext.Provider value={listValue}>
+                <CommandQueryContext.Provider value={changeQuery}>
+                  <CommandSeatContext.Provider value={seatValue}>{children}</CommandSeatContext.Provider>
+                </CommandQueryContext.Provider>
+              </CommandListContext.Provider>
+            </CommandPrimitive>
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Overlay>
+      </PortalTheme>
+    </DialogPrimitive.Portal>
+  );
+}
+
+interface CommandInputProps extends Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, 'value' | 'onValueChange' | 'aria-label'> {
+  /** The field's accessible name. */
+  'aria-label': string;
+  /** An icon before the text, such as a search glyph. */
+  leading?: React.ReactNode;
+}
+
+/** The search bar, a pane of its own. The palette opens with the caret in it. */
+function CommandInput({ leading, className, ...props }: CommandInputProps) {
+  const size = React.useContext(CommandSizeContext);
+  const setQuery = React.useContext(CommandQueryContext);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  return (
+    // A press anywhere on the bar puts the caret in the field.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      className={classNames('kui-CommandSearch', `kui-r-size-${size}`)}
+      onMouseDown={(event) => {
+        if (event.target === inputRef.current) return;
+        event.preventDefault();
+        inputRef.current?.focus();
+      }}
+    >
+      {leading ? (
+        <span className="kui-CommandSearchSlot" aria-hidden>
+          {leading}
+        </span>
+      ) : null}
+      {/* `autoFocus` focuses inside the tap's own task, which is what raises the keyboard on iOS. */}
+      <CommandPrimitive.Input
+        ref={inputRef}
+        // The palette is the field: it opens to type into, the one place autofocus is the design.
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus
+        {...props}
+        onValueChange={setQuery}
+        className={classNames('kui-reset', 'kui-CommandInput', className)}
+      />
+    </div>
+  );
+}
+
+interface CommandListProps<T> {
+  /** Turns an item into a row (a `CommandItem`) or a group (a `CommandGroup`). */
+  children: (item: T) => React.ReactNode;
+  className?: string;
+}
+
+/** The results, a pane of their own under the search bar. Its height follows the results. */
+function CommandList<T>({ children, className }: CommandListProps<T>) {
+  const size = React.useContext(CommandSizeContext);
+  const items = React.useContext(CommandItemsContext);
+  const { query, filter, itemToString } = React.useContext(CommandListContext);
+  const seat = React.useContext(CommandSeatContext);
+  const shown = React.useMemo(() => narrow(items, query, filter, itemToString), [items, query, filter, itemToString]);
+  return (
+    <div className={classNames('kui-BaseMenuContent', 'kui-variant-soft', `kui-r-size-${ROW_STEP[size]}`, 'kui-CommandPanel', className)}>
+      <CommandPrimitive.List className={classNames('kui-BaseMenuViewport', 'kui-CommandList')}>
+        {shown.map((item) => children(item as T))}
+        {/* The empty state's seat, inside this pane, so it is the same box as the results. */}
+        <div className="kui-CommandSeat" ref={seat ? seat.setSeat : undefined} />
+      </CommandPrimitive.List>
+    </div>
+  );
+}
+
+const CommandGroupItemsContext = React.createContext<readonly unknown[]>([]);
+
+interface CommandGroupProps {
+  /** The group's own items, after filtering. Render them with `CommandCollection`. */
+  items: readonly unknown[];
+  children: React.ReactNode;
+  className?: string;
+}
+
+/** A labelled run of rows. A group with no matching rows is left out. */
+function CommandGroup({ items, children, className }: CommandGroupProps) {
+  return (
+    <CommandGroupItemsContext.Provider value={items}>
+      <CommandPrimitive.Group className={classNames('kui-BaseMenuGroup', 'kui-CommandGroup', className)}>{children}</CommandPrimitive.Group>
+    </CommandGroupItemsContext.Provider>
+  );
+}
+
+interface CommandGroupLabelProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/** The group's name, above its rows. */
+function CommandGroupLabel({ children, className }: CommandGroupLabelProps) {
+  return (
+    <div className={classNames('kui-BaseMenuLabel', 'kui-CommandGroupLabel', className)} aria-hidden>
+      {children}
+    </div>
+  );
+}
+
+interface CommandCollectionProps<T> {
+  /** Turns one of the group's items into a row. */
+  children: (item: T) => React.ReactNode;
+}
+
+/** The group's rows. */
+function CommandCollection<T>({ children }: CommandCollectionProps<T>) {
+  const items = React.useContext(CommandGroupItemsContext);
+  return <>{items.map((item) => children(item as T))}</>;
+}
+
+interface CommandItemProps extends Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>, 'value' | 'onSelect'> {
+  /** The item this row shows. A string is also the row's identity for the highlight. */
+  value?: unknown;
+  /** Runs when the row is pressed or Enter is pressed on it. The palette then closes. */
+  onSelect?: () => void;
+  /** An icon before the label. */
+  leading?: React.ReactNode;
+  /** Something after the label, such as a shortcut. */
+  trailing?: React.ReactNode;
+  /** Set when running the row destroys something. */
+  tone?: 'destructive';
+  /** Renders the child, such as your router's link, as the row. Enter follows the link. */
+  asChild?: boolean;
+}
+
+/** One row. Running it, by press or by Enter, runs `onSelect` and closes the palette. */
+function CommandItem({ value, onSelect, leading, trailing, tone, asChild, children, className, ...props }: CommandItemProps) {
+  const close = React.useContext(CommandCloseContext);
+  const id = React.useId();
+  const element = React.useRef<HTMLDivElement>(null);
+  const clicked = React.useRef(false);
+  const itemValue = typeof value === 'string' ? value : id;
+
+  const run = () => {
+    onSelect?.();
+    close?.();
+  };
+
+  // cmdk runs a row from Enter without a click. A link has to be clicked to navigate, so Enter
+  // clicks it, and the click comes back through here as the run.
+  const handleSelect = () => {
+    if (clicked.current) {
+      clicked.current = false;
+      run();
+      return;
+    }
+    // Found by attribute, not by ref: an app's link component need not forward a ref.
+    const node = element.current ?? document.querySelector(`[data-kui-command-item="${CSS.escape(id)}"]`);
+    if (asChild && node instanceof HTMLAnchorElement) {
+      node.click();
+      return;
+    }
+    run();
+  };
+
+  const child = asChild && React.isValidElement<{ children?: React.ReactNode }>(children) ? children : null;
+  const inner = (label: React.ReactNode) => (
+    <>
+      {leading ? (
+        <span className="kui-CommandItemSlot" data-slot="leading" aria-hidden>
+          {leading}
+        </span>
+      ) : null}
+      <span className="kui-CommandItemLabel">{label}</span>
+      {trailing ? (
+        <span className="kui-CommandItemSlot" data-slot="trailing">
+          {trailing}
+        </span>
+      ) : null}
+    </>
+  );
+
+  return (
+    <CommandPrimitive.Item
+      {...props}
+      ref={element}
+      data-kui-command-item={id}
+      value={itemValue}
+      asChild={Boolean(child)}
+      onSelect={handleSelect}
+      onClickCapture={() => {
+        clicked.current = true;
+      }}
+      data-tone={tone}
+      className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-CommandItem', className)}
+    >
+      {child ? React.cloneElement(child, undefined, inner(child.props.children)) : inner(children)}
+    </CommandPrimitive.Item>
+  );
+}
+
+interface CommandEmptyProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/** What the results pane says when nothing matches. It renders inside that pane. */
+function CommandEmpty({ children, className }: CommandEmptyProps) {
+  const seat = React.useContext(CommandSeatContext);
+  if (!seat?.seat) return null;
+  return createPortal(<CommandPrimitive.Empty className={classNames('kui-CommandEmpty', className)}>{children}</CommandPrimitive.Empty>, seat.seat);
+}
+
+export { Command, CommandTrigger, CommandContent, CommandInput, CommandList, CommandGroup, CommandGroupLabel, CommandCollection, CommandItem, CommandEmpty, ROW_STEP as COMMAND_ROW_STEP };
+export type {
+  CommandProps,
+  CommandTriggerProps,
+  CommandContentProps,
+  CommandInputProps,
+  CommandListProps,
+  CommandGroupProps,
+  CommandGroupLabelProps,
+  CommandCollectionProps,
+  CommandItemProps,
+  CommandEmptyProps,
+  CommandOpenChangeDetails,
+  CommandOpenChangeReason,
+};

package/src/components/index.css

@@ -16,6 +16,7 @@
 @import './checkbox.css';
 @import './code.css';
 @import './context-menu.css';
+@import './command.css';
 @import './dialog.css';
 @import './dropdown-menu.css';
 @import './combobox.css';