@krizaka/ui 3.8.0 → 3.9.0

package/README.md

@@ -185,7 +185,7 @@ light or a product's — is a set of tokens.
 | `@krizaka/ui/date-picker` | `DatePicker`, `DateRangePicker` (`presets`), `Calendar` — ISO dates, the locale's names through `@krizaka/intl`, `min`/`max`/`isDateDisabled`, the APG grid keyboard | client |
 | `@krizaka/ui/search-field` | `SearchField` (`onSearch` debounced, `onSubmit`, `shortcut` ⌘K, `suggestions`, `clearLabel`, `landmark`) | client |
 | `@krizaka/ui/video-player` | `VideoPlayer` (`src` or a signed-source function, `loadHls={() => import("hls.js")}` (optional peer, loaded only without native HLS), `tracks`, `playbackRates`, `preload`, `pauseWhenHidden`, `overlay` for a gate, `labels`; keyboard Space/K, J/L, arrows, M, F, C) | client |
-| `@krizaka/ui/file-upload` | `Dropzone` (`accept`, `maxSize`, `maxFiles`, refusals with reasons), `UploadList` (preview, progress, speed, pause/resume/retry/cancel), `useUploadQueue` (`upload(file, { signal, onProgress, resumed })`: Tus-ready without depending on it), `acceptsFile`, `formatBytes` | client |
+| `@krizaka/ui/file-upload` | `Dropzone` (`accept`, `maxSize`, `maxFiles`, refusals with reasons), `UploadList` (preview, progress, speed, pause/resume/retry/cancel), `useUploadQueue` (`upload(file, { signal, onProgress, resumed })`: Tus-ready without depending on it; `retries`, `backoff`, `shouldRetry` — a queue of `@krizaka/pacer`), `acceptsFile`, `formatBytes` | client |
 | `@krizaka/ui/media-capture` | `MediaCapture` (`mode` photo·video·both, `facing`, `maxDuration`, permission asked on a gesture, the file picker as the way out, `onCapture({ blob, kind, url })`) | client |
 | `@krizaka/ui/video-trimmer` | `VideoTrimmer` (`duration`, `value` [start, end], `minLength`, `step`/`largeStep`, `frames` or children, `time` + `onSeek`, `classNames` per part, `renderHandle`) | client |
 | `@krizaka/ui/audio-player` | `AudioPlayer` (a seekable waveform: `peaks` or `computePeaks`, `bars`, `playbackRates`, `duration`), `resamplePeaks`, `computeAudioPeaks` | client |
@@ -198,11 +198,13 @@ light or a product's — is a set of tokens.
 | `@krizaka/ui/argument-card` | `ArgumentCard` (compact: `icon`, `title`, `meta`, `facts`, `hook` — the trap in one line —, `more`, `actions`; in a panel: `points`, `rule`, `details`, `panelLabel`) | server |
 | `@krizaka/ui/mascot-quote` | `MascotQuote` (`bird`, `mood`, `label`, the sentence as children, `variant` inline·callout, `animated`) | client |
 | `@krizaka/ui/decision-list` | `DecisionList` (`decisions`: `chose`, `refused`, `because`, `cost`; `labels`, `reveal`) | server |
-| `@krizaka/ui/code-block` | `CodeBlock` (`code`, `language`, `file`, `copyLabel`, `copiedLabel`, `highlight`), `CodeTabs` (`label`, `tabs`), `highlight` | client |
+| `@krizaka/ui/code-block` | `CodeBlock` (`code`, `language`, `file`, `lineNumbers`, `annotations` — highlight · added · removed · focus · dim · error · warning —, `copyLabel`, `copiedLabel`, `highlight`), `CodeTabs` (`label`, `tabs`), `highlight`, `normalizeCodeLanguage` — on TanStack Highlight (TS, TSX, JS, JSON, YAML, Bash, HTML, CSS, Java, Kotlin, diff) | client |
+| `@krizaka/ui/markdown` | `Markdown` (the source as children; `streaming`, `headingIds`, `codeLabels`, `linkAs`), `parseSource`, `healStreaming` — TanStack Markdown on the tokens, raw HTML never rendered; `@krizaka/ui/native/markdown`: the same AST in `Text` and `View` (`onLinkPress`) | server |
+| `@krizaka/ui/recipes` | `defineRecipe` (the variants of a component as classes of the tokens: `tv(recipe)` on the web), `nativeRecipe(recipe).resolve(props, theme)` (the phone's styles from the same classes), `ROLES`, `withAlpha` | server |
 | `@krizaka/ui/action-bar` | `ActionBar` (`actions`: `href`, `label`, `icon`; `variant` buttons·icons — the words in a CSS tooltip —, `primaryFirst`, `size`, `label`, `linkAs`) | server |
 | `@krizaka/ui/cta-panel` | `CtaPanel` (`id`, `title`, `body`, the actions as children, `level`, `reveal`) | server |
 | `@krizaka/ui/toc` | `Toc` (`label`, `items`; the section being read marked), `TocLayout` (`toc`, the sections as children) | client |
-| `@krizaka/ui/app-shell` | `AppShell.Root` (`defaultCollapsed`, `collapsed` + `onCollapsedChange`) `/Sidebar` (`label`, `brand`, `footer`, `collapseLabels`, `closeLabel`; a drawer on a phone) `/Group/Item` (`icon`, `label`, `current`, `badge`, `asChild`) `/Body/Header` (`title`, `menuLabel`, `actions`) `/Main` — see [Layouts and templates](#layouts-and-templates) | client |
+| `@krizaka/ui/app-shell` | `AppShell.Root` (`defaultCollapsed`, `collapsed` + `onCollapsedChange`) `/Sidebar` (`label`, `brand`, `footer`, `collapseLabels`, `closeLabel`; a drawer on a phone) `/Group/Item` (`icon`, `label`, `current`, `badge`, `shortcut`, `asChild`) `/Body/Header` (`title`, `menuLabel`, `actions`) `/Search` (`label`, `onOpen`, `shortcut` ⌘K — opens the app's `CommandDialog`) `/Main`; `collapseShortcut` (⌘B), `useShortcuts` — see [Layouts and templates](#layouts-and-templates) | client |
 | `@krizaka/ui/dashboard-layout` | `DashboardLayout` (`title`, `eyebrow`, `description`, `actions`, `toolbar`, `headingAs`), `Widget` (`title`, `description`, `action`, `span` 1·2·3·full, `level`) | server |
 | `@krizaka/ui/settings-layout` | `SettingsLayout` (`title`, `description`, `nav`, `navLabel`, `linkAs`), `SettingsSection` (`title`, `description`, `footer`) | server |
 | `@krizaka/ui/auth-layout` | `AuthLayout` (`brand`, `title`, `description`, `footer`, `legal`, `promise`, `aside`, `asideFooter`) | server |
@@ -250,7 +252,7 @@ applies it before the first paint (no flash), the provider reports it. A persist
 
 ## Page blocks
 
-> Category **blocks** of krizaka.com/docs/ui. The pieces every page of a Krizaka site is made of — one frame, one hero,
+> Category **blocks** of ui.krizaka.com. The pieces every page of a Krizaka site is made of — one frame, one hero,
 > sections on one rhythm, cards that lead or argue, decisions, code, calls to act — so every page reads the same.
 
 ```tsx
@@ -280,7 +282,7 @@ import { LinkCard } from "@krizaka/ui/link-card";
 
 ## Page templates
 
-> Category **templates** of krizaka.com/docs/ui: every page of a Krizaka site has its template.
+> Category **templates** of ui.krizaka.com: every page of a Krizaka site has its template.
 
 Fifteen templates, each a **distinct composition** of the blocks — not the same card grid everywhere: `LandingPage`
 (split hero with the product alive, a band of proofs, a bento), `ProductPage` (split hero in the product's brand,
@@ -300,7 +302,7 @@ boundary stays where it is: a template is a Server Component.
 
 ## Layouts and screens
 
-> Category **layouts** of krizaka.com/docs/ui, and **templates**: whole screens composed from the platform.
+> Category **layouts** of ui.krizaka.com, and **templates**: whole screens composed from the platform.
 
 The shells of the products' screens, read from their real screens (Orochia web, admin and mobile; Orazaka web-client,
 web-admin and mobile; krizaka.com): `AppShell` (sidebar that collapses, header, drawer on a phone), `DashboardLayout`
@@ -315,7 +317,7 @@ React Native shells are `@krizaka/ui/native`'s (DS4): same names where the conce
 
 ## Registry — the code drives the documentation
 
-Every component is also published as data: **[krizaka.com/docs/ui](https://www.krizaka.com/docs/ui)** is generated
+Every component is also published as data: **[ui.krizaka.com](https://ui.krizaka.com)** is generated
 from it at every build of the site (one page per component: when to use it, live examples with their code for the web
 and React Native, props, accessibility), and, later, a `npx @krizaka/cli add <name>` may copy a primitive into a
 product that forks it knowingly. Built by `scripts/build-registry.mjs` after tsup, from three sources in the code:
@@ -497,7 +499,7 @@ classes the components use are generated in your stylesheet.
 ```
 
 Every component, with when to use it, live examples and their code (web and React Native) and its props:
-[krizaka.com/docs/ui](https://www.krizaka.com/docs/ui).
+[ui.krizaka.com](https://ui.krizaka.com).
 
 ## Develop
 

package/dist/action-bar.js

@@ -7,7 +7,8 @@ import {
 } from "./chunk-XCBVFMNV.js";
 import {
   buttonVariants
-} from "./chunk-Z6FUPB3Q.js";
+} from "./chunk-2NB27LM7.js";
+import "./chunk-2VNYHG4E.js";
 import {
   cn
 } from "./chunk-4LOMIQVX.js";

package/dist/action-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/action-bar/action-bar.tsx"],"sourcesContent":["// Server-safe. A row of actions that leave or move on (blocks.css): discuss · propose · report, read the docs, see the\n// code. `buttons`: buttons with their words — the end of a page or a section. `icons`: icon buttons whose words are the\n// accessible name and a tooltip on hover and focus (CSS only: no script, no portal) — the foot of a card.\nimport type * as React from \"react\";\n\nimport { BlockLink, isExternal, type LinkComponent } from \"../block-link\";\nimport { buttonVariants } from \"../button/button\";\nimport { cn } from \"../cn\";\nimport { ExternalGlyph } from \"../glyphs\";\n\nexport interface Action {\n  /** Where it leads. An absolute URL opens in a new tab, with the external mark. */\n  href: string;\n  /** Its words (the accessible name, and the tooltip of an icon action). */\n  label: string;\n  /** Its icon (a signature icon): decorative. Required by `variant=\"icons\"`. */\n  icon?: React.ReactNode;\n}\n\nexport type ActionBarProps = React.HTMLAttributes<HTMLUListElement> & {\n  /** The actions, in order of importance. */\n  actions: readonly Action[];\n  /**\n   * `buttons` (with their words) or `icons` (icon buttons, the words in a tooltip).\n   * @default \"buttons\"\n   */\n  variant?: \"buttons\" | \"icons\";\n  /**\n   * The first action as the primary button (the one action a block is about); the others stay secondary.\n   * @default false\n   */\n  primaryFirst?: boolean;\n  /**\n   * The buttons' size: `sm` in a card, `md` in a section, `lg` on a hero or a closing call.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** What the actions are about (`Talk about Krizaka Java`): the list's accessible name. */\n  label?: string;\n  /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: LinkComponent;\n};\n\n/** A row of link actions: buttons with their words, or icon buttons with a tooltip. */\nexport function ActionBar({ actions, variant = \"buttons\", primaryFirst = false, size = \"md\", label, linkAs, className, ...props }: ActionBarProps) {\n  const icons = variant === \"icons\";\n  return (\n    <ul className={cn(\"kz-actions\", className)} data-variant={icons ? \"icons\" : undefined} aria-label={label} {...props}>\n      {actions.map((a, i) => {\n        const external = isExternal(a.href);\n        return (\n          <li key={a.href}>\n            {icons ? (\n              <BlockLink\n                href={a.href}\n                linkAs={linkAs}\n                external={external}\n                aria-label={a.label}\n                data-tip={a.label}\n                className={buttonVariants({ variant: \"ghost\", size: \"icon\", shape: \"cut\", className: size === \"sm\" ? \"h-9 w-9\" : undefined })}\n              >\n                {a.icon}\n              </BlockLink>\n            ) : (\n              <BlockLink\n                href={a.href}\n                linkAs={linkAs}\n                external={external}\n                className={buttonVariants({ variant: primaryFirst && i === 0 ? \"primary\" : \"secondary\", size, shape: \"cut\", className: \"gap-2\" })}\n              >\n                {a.icon}\n                {a.label}\n                {external && <ExternalGlyph className=\"h-3 w-3 opacity-70\" />}\n              </BlockLink>\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAqDc,cAWA,YAXA;AATP,SAAS,UAAU,EAAE,SAAS,UAAU,WAAW,eAAe,OAAO,OAAO,MAAM,OAAO,QAAQ,WAAW,GAAG,MAAM,GAAmB;AACjJ,QAAM,QAAQ,YAAY;AAC1B,SACE,oBAAC,QAAG,WAAW,GAAG,cAAc,SAAS,GAAG,gBAAc,QAAQ,UAAU,QAAW,cAAY,OAAQ,GAAG,OAC3G,kBAAQ,IAAI,CAAC,GAAG,MAAM;AACrB,UAAM,WAAW,WAAW,EAAE,IAAI;AAClC,WACE,oBAAC,QACE,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,EAAE;AAAA,QACR;AAAA,QACA;AAAA,QACA,cAAY,EAAE;AAAA,QACd,YAAU,EAAE;AAAA,QACZ,WAAW,eAAe,EAAE,SAAS,SAAS,MAAM,QAAQ,OAAO,OAAO,WAAW,SAAS,OAAO,YAAY,OAAU,CAAC;AAAA,QAE3H,YAAE;AAAA;AAAA,IACL,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,EAAE;AAAA,QACR;AAAA,QACA;AAAA,QACA,WAAW,eAAe,EAAE,SAAS,gBAAgB,MAAM,IAAI,YAAY,aAAa,MAAM,OAAO,OAAO,WAAW,QAAQ,CAAC;AAAA,QAE/H;AAAA,YAAE;AAAA,UACF,EAAE;AAAA,UACF,YAAY,oBAAC,iBAAc,WAAU,sBAAqB;AAAA;AAAA;AAAA,IAC7D,KAtBK,EAAE,IAwBX;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../src/action-bar/action-bar.tsx"],"sourcesContent":["// Server-safe. A row of actions that leave or move on (blocks.css): discuss · propose · report, read the docs, see the\n// code. `buttons`: buttons with their words — the end of a page or a section. `icons`: icon buttons whose words are the\n// accessible name and a tooltip on hover and focus (CSS only: no script, no portal) — the foot of a card.\nimport type * as React from \"react\";\n\nimport { BlockLink, isExternal, type LinkComponent } from \"../block-link\";\nimport { buttonVariants } from \"../button/button\";\nimport { cn } from \"../cn\";\nimport { ExternalGlyph } from \"../glyphs\";\n\nexport interface Action {\n  /** Where it leads. An absolute URL opens in a new tab, with the external mark. */\n  href: string;\n  /** Its words (the accessible name, and the tooltip of an icon action). */\n  label: string;\n  /** Its icon (a signature icon): decorative. Required by `variant=\"icons\"`. */\n  icon?: React.ReactNode;\n}\n\nexport type ActionBarProps = React.HTMLAttributes<HTMLUListElement> & {\n  /** The actions, in order of importance. */\n  actions: readonly Action[];\n  /**\n   * `buttons` (with their words) or `icons` (icon buttons, the words in a tooltip).\n   * @default \"buttons\"\n   */\n  variant?: \"buttons\" | \"icons\";\n  /**\n   * The first action as the primary button (the one action a block is about); the others stay secondary.\n   * @default false\n   */\n  primaryFirst?: boolean;\n  /**\n   * The buttons' size: `sm` in a card, `md` in a section, `lg` on a hero or a closing call.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** What the actions are about (`Talk about Krizaka Java`): the list's accessible name. */\n  label?: string;\n  /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: LinkComponent;\n};\n\n/** A row of link actions: buttons with their words, or icon buttons with a tooltip. */\nexport function ActionBar({ actions, variant = \"buttons\", primaryFirst = false, size = \"md\", label, linkAs, className, ...props }: ActionBarProps) {\n  const icons = variant === \"icons\";\n  return (\n    <ul className={cn(\"kz-actions\", className)} data-variant={icons ? \"icons\" : undefined} aria-label={label} {...props}>\n      {actions.map((a, i) => {\n        const external = isExternal(a.href);\n        return (\n          <li key={a.href}>\n            {icons ? (\n              <BlockLink\n                href={a.href}\n                linkAs={linkAs}\n                external={external}\n                aria-label={a.label}\n                data-tip={a.label}\n                className={buttonVariants({ variant: \"ghost\", size: \"icon\", shape: \"cut\", className: size === \"sm\" ? \"h-9 w-9\" : undefined })}\n              >\n                {a.icon}\n              </BlockLink>\n            ) : (\n              <BlockLink\n                href={a.href}\n                linkAs={linkAs}\n                external={external}\n                className={buttonVariants({ variant: primaryFirst && i === 0 ? \"primary\" : \"secondary\", size, shape: \"cut\", className: \"gap-2\" })}\n              >\n                {a.icon}\n                {a.label}\n                {external && <ExternalGlyph className=\"h-3 w-3 opacity-70\" />}\n              </BlockLink>\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqDc,cAWA,YAXA;AATP,SAAS,UAAU,EAAE,SAAS,UAAU,WAAW,eAAe,OAAO,OAAO,MAAM,OAAO,QAAQ,WAAW,GAAG,MAAM,GAAmB;AACjJ,QAAM,QAAQ,YAAY;AAC1B,SACE,oBAAC,QAAG,WAAW,GAAG,cAAc,SAAS,GAAG,gBAAc,QAAQ,UAAU,QAAW,cAAY,OAAQ,GAAG,OAC3G,kBAAQ,IAAI,CAAC,GAAG,MAAM;AACrB,UAAM,WAAW,WAAW,EAAE,IAAI;AAClC,WACE,oBAAC,QACE,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,EAAE;AAAA,QACR;AAAA,QACA;AAAA,QACA,cAAY,EAAE;AAAA,QACd,YAAU,EAAE;AAAA,QACZ,WAAW,eAAe,EAAE,SAAS,SAAS,MAAM,QAAQ,OAAO,OAAO,WAAW,SAAS,OAAO,YAAY,OAAU,CAAC;AAAA,QAE3H,YAAE;AAAA;AAAA,IACL,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,EAAE;AAAA,QACR;AAAA,QACA;AAAA,QACA,WAAW,eAAe,EAAE,SAAS,gBAAgB,MAAM,IAAI,YAAY,aAAa,MAAM,OAAO,OAAO,WAAW,QAAQ,CAAC;AAAA,QAE/H;AAAA,YAAE;AAAA,UACF,EAAE;AAAA,UACF,YAAY,oBAAC,iBAAc,WAAU,sBAAqB;AAAA;AAAA;AAAA,IAC7D,KAtBK,EAAE,IAwBX;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/app-shell.d.ts

@@ -9,6 +9,7 @@ declare const appShell: tailwind_variants.TVReturnType<{
             header?: tailwind_variants.ClassValue;
             main?: tailwind_variants.ClassValue;
             nav?: tailwind_variants.ClassValue;
+            search?: tailwind_variants.ClassValue;
             title?: tailwind_variants.ClassValue;
             group?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
@@ -16,6 +17,9 @@ declare const appShell: tailwind_variants.TVReturnType<{
             overlay?: tailwind_variants.ClassValue;
             brand?: tailwind_variants.ClassValue;
             itemLabel?: tailwind_variants.ClassValue;
+            itemHint?: tailwind_variants.ClassValue;
+            searchLabel?: tailwind_variants.ClassValue;
+            searchKeys?: tailwind_variants.ClassValue;
             actions?: tailwind_variants.ClassValue;
             sidebar?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
@@ -32,6 +36,7 @@ declare const appShell: tailwind_variants.TVReturnType<{
             header?: tailwind_variants.ClassValue;
             main?: tailwind_variants.ClassValue;
             nav?: tailwind_variants.ClassValue;
+            search?: tailwind_variants.ClassValue;
             title?: tailwind_variants.ClassValue;
             group?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
@@ -39,6 +44,9 @@ declare const appShell: tailwind_variants.TVReturnType<{
             overlay?: tailwind_variants.ClassValue;
             brand?: tailwind_variants.ClassValue;
             itemLabel?: tailwind_variants.ClassValue;
+            itemHint?: tailwind_variants.ClassValue;
+            searchLabel?: tailwind_variants.ClassValue;
+            searchKeys?: tailwind_variants.ClassValue;
             actions?: tailwind_variants.ClassValue;
             sidebar?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
@@ -57,6 +65,7 @@ declare const appShell: tailwind_variants.TVReturnType<{
     group: string;
     item: string;
     itemLabel: string;
+    itemHint: string;
     itemBadge: string;
     footer: string;
     collapse: string;
@@ -64,6 +73,9 @@ declare const appShell: tailwind_variants.TVReturnType<{
     header: string;
     menuButton: string;
     title: string;
+    search: string;
+    searchLabel: string;
+    searchKeys: string;
     actions: string;
     main: string;
 }, undefined, {
@@ -74,6 +86,7 @@ declare const appShell: tailwind_variants.TVReturnType<{
             header?: tailwind_variants.ClassValue;
             main?: tailwind_variants.ClassValue;
             nav?: tailwind_variants.ClassValue;
+            search?: tailwind_variants.ClassValue;
             title?: tailwind_variants.ClassValue;
             group?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
@@ -81,6 +94,9 @@ declare const appShell: tailwind_variants.TVReturnType<{
             overlay?: tailwind_variants.ClassValue;
             brand?: tailwind_variants.ClassValue;
             itemLabel?: tailwind_variants.ClassValue;
+            itemHint?: tailwind_variants.ClassValue;
+            searchLabel?: tailwind_variants.ClassValue;
+            searchKeys?: tailwind_variants.ClassValue;
             actions?: tailwind_variants.ClassValue;
             sidebar?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
@@ -99,6 +115,7 @@ declare const appShell: tailwind_variants.TVReturnType<{
     group: string;
     item: string;
     itemLabel: string;
+    itemHint: string;
     itemBadge: string;
     footer: string;
     collapse: string;
@@ -106,6 +123,9 @@ declare const appShell: tailwind_variants.TVReturnType<{
     header: string;
     menuButton: string;
     title: string;
+    search: string;
+    searchLabel: string;
+    searchKeys: string;
     actions: string;
     main: string;
 }, tailwind_variants.TVReturnTypeLike<unknown, {
@@ -118,6 +138,7 @@ declare const appShell: tailwind_variants.TVReturnType<{
     group: string;
     item: string;
     itemLabel: string;
+    itemHint: string;
     itemBadge: string;
     footer: string;
     collapse: string;
@@ -125,6 +146,9 @@ declare const appShell: tailwind_variants.TVReturnType<{
     header: string;
     menuButton: string;
     title: string;
+    search: string;
+    searchLabel: string;
+    searchKeys: string;
     actions: string;
     main: string;
 }>>;
@@ -137,9 +161,15 @@ type AppShellRootProps = React.ComponentProps<"div"> & {
     onCollapsedChange?: (collapsed: boolean) => void;
     /** The words of the "skip to content" link (`Skip to content`), the first tab stop; it lands on `AppShell.Main`. Without it, no link. */
     skipLabel?: string;
+    /**
+     * The shortcut that folds and unfolds the sidebar (a combination: `mod+b` is ⌘B on a Mac, Ctrl+B elsewhere), or `false`
+     * for none.
+     * @default "mod+b"
+     */
+    collapseShortcut?: string | false;
 };
 /** The shell: holds the collapse (desktop) and the drawer (phone) state. Children: Sidebar, then Body. */
-declare function AppShellRoot({ defaultCollapsed, collapsed: controlled, onCollapsedChange, skipLabel, className, children, ...props }: AppShellRootProps): React.JSX.Element;
+declare function AppShellRoot({ defaultCollapsed, collapsed: controlled, onCollapsedChange, skipLabel, collapseShortcut, className, children, ...props }: AppShellRootProps): React.JSX.Element;
 type AppShellSidebarProps = Omit<React.ComponentProps<"nav">, "children"> & {
     /** The navigation's accessible name (`Studio`, `Administration`). */
     label: string;
@@ -171,13 +201,18 @@ type AppShellItemProps = Omit<React.ComponentProps<"a">, "children"> & {
     current?: boolean;
     /** A count beside it (unread, pending): a number or a few characters. */
     badge?: React.ReactNode;
+    /**
+     * A keyboard shortcut that goes to it: a sequence (`g d`: G then D) or a combination (`mod+1`). It clicks the item, so a
+     * router link navigates. The keys are shown on hover and focus when the sidebar is open.
+     */
+    shortcut?: string;
     /** Renders your link (Next's `Link`) with the item's look: pass it as the only child. */
     asChild?: boolean;
     /** Your link element when `asChild`. */
     children?: React.ReactElement;
 };
 /** A destination of the sidebar: icon, words, a count. */
-declare function AppShellItem({ icon, label, current, badge, asChild, children, className, ...props }: AppShellItemProps): React.JSX.Element;
+declare function AppShellItem({ icon, label, current, badge, shortcut, asChild, children, className, ...props }: AppShellItemProps): React.JSX.Element;
 /** The column right of the sidebar: Header, then Main. */
 declare function AppShellBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 type AppShellHeaderProps = Omit<React.ComponentProps<"header">, "title"> & {
@@ -190,6 +225,19 @@ type AppShellHeaderProps = Omit<React.ComponentProps<"header">, "title"> & {
 };
 /** The top of the screen: the drawer's button (phone), the title, the actions. Sticky. */
 declare function AppShellHeader({ title, menuLabel, actions, className, children, ...props }: AppShellHeaderProps): React.JSX.Element;
+type AppShellSearchProps = Omit<React.ComponentProps<"button">, "children" | "onClick"> & {
+    /** The words ("Search", "Search creators"): the accessible name, shown beside the keys on a desktop. */
+    label: string;
+    /** Called when the button is pressed or the shortcut is typed: open your command palette (`CommandDialog`) here. */
+    onOpen: () => void;
+    /**
+     * The shortcut that opens it (a combination); shown on its keys.
+     * @default "mod+k"
+     */
+    shortcut?: string;
+};
+/** The header's search: a button that looks like a field (a magnifier, its words, ⌘K) and opens the app's command palette. */
+declare function AppShellSearch({ label, onOpen, shortcut, className, ...props }: AppShellSearchProps): React.JSX.Element;
 /** The screen's content. */
 declare function AppShellMain({ className, ...props }: React.ComponentProps<"main">): React.JSX.Element;
 declare const AppShell: {
@@ -199,7 +247,37 @@ declare const AppShell: {
     Item: typeof AppShellItem;
     Body: typeof AppShellBody;
     Header: typeof AppShellHeader;
+    Search: typeof AppShellSearch;
     Main: typeof AppShellMain;
 };
 
-export { AppShell, AppShellBody, AppShellGroup, type AppShellGroupProps, AppShellHeader, type AppShellHeaderProps, AppShellItem, type AppShellItemProps, AppShellMain, AppShellRoot, type AppShellRootProps, AppShellSidebar, type AppShellSidebarProps, appShell };
+type ShortcutMap = Readonly<Record<string, ((event: KeyboardEvent) => void) | undefined>>;
+type Combo = {
+    key: string;
+    mod: boolean;
+    ctrl: boolean;
+    alt: boolean;
+    shift: boolean;
+    meta: boolean;
+};
+/** `"mod+shift+k"` → its parts. A lone `+` key is written `plus`. */
+declare function parseCombo(combo: string): Combo;
+/** Whether a key event is this combination: its modifiers exactly (`mod` is ⌘ or Ctrl by platform), then its key. */
+declare function matchesCombo(event: Pick<KeyboardEvent, "key" | "metaKey" | "ctrlKey" | "altKey" | "shiftKey">, combo: string, apple?: boolean): boolean;
+/** The keys of a shortcut to show on a keycap: `["⌘", "K"]` on a Mac, `["Ctrl", "K"]` elsewhere; a sequence `g d` is `["G", "D"]`. */
+declare function formatShortcut(shortcut: string, apple?: boolean): string[];
+/** Whether the person is on an Apple device — `false` on the server and in the first client render (no mismatch), then right. */
+declare function useApple(): boolean;
+/** The `aria-keyshortcuts` of a combination (`Control+K`, `Meta+K` on a Mac); a sequence has none (it is not a chord). */
+declare function ariaKeyShortcuts(shortcut: string, apple?: boolean): string | undefined;
+/**
+ * Binds shortcuts for as long as the component lives (`enabled` turns them off). Each key is a combination or a sequence,
+ * each value runs when it is pressed; the handler may change on every render. A shortcut that fires is `preventDefault`ed.
+ * A sequence waits `timeout` ms for its next key.
+ */
+declare function useShortcuts(map: ShortcutMap, { enabled, timeout }?: {
+    enabled?: boolean;
+    timeout?: number;
+}): void;
+
+export { AppShell, AppShellBody, AppShellGroup, type AppShellGroupProps, AppShellHeader, type AppShellHeaderProps, AppShellItem, type AppShellItemProps, AppShellMain, AppShellRoot, type AppShellRootProps, AppShellSearch, type AppShellSearchProps, AppShellSidebar, type AppShellSidebarProps, type ShortcutMap, appShell, ariaKeyShortcuts, formatShortcut, matchesCombo, parseCombo, useApple, useShortcuts };

package/dist/app-shell.js

@@ -1,8 +1,9 @@
 "use client";
 import {
   ChevronGlyph,
-  CloseGlyph
-} from "./chunk-AZPKXP3O.js";
+  CloseGlyph,
+  SearchGlyph
+} from "./chunk-AFY35UCB.js";
 import {
   cn
 } from "./chunk-G3ETON2A.js";
@@ -12,10 +13,111 @@ import {
 
 // src/app-shell/app-shell.tsx
 import { Dialog as DialogPrimitive, Slot } from "radix-ui";
-import * as React from "react";
+import * as React3 from "react";
+import { tv as tv2 } from "tailwind-variants";
+
+// src/kbd/kbd.tsx
 import { tv } from "tailwind-variants";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var appShell = tv({
+import { jsx } from "react/jsx-runtime";
+var kbdVariants = tv({
+  base: "inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 font-mono font-semibold text-fg-secondary",
+  variants: { size: { sm: "h-5 min-w-5 px-1 text-[10px]", md: "h-6 min-w-6 px-1.5 text-xs" } },
+  defaultVariants: { size: "md" }
+});
+function Kbd({ size, className, ...props }) {
+  return /* @__PURE__ */ jsx("kbd", { className: kbdVariants({ size, className }), ...props });
+}
+
+// src/app-shell/shortcuts.ts
+import * as React2 from "react";
+
+// src/media.ts
+import * as React from "react";
+function useLatest(value) {
+  const ref = React.useRef(value);
+  React.useLayoutEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+
+// src/app-shell/shortcuts.ts
+var isApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+var ALIASES = { esc: "escape", return: "enter", space: " ", spacebar: " ", up: "arrowup", down: "arrowdown", left: "arrowleft", right: "arrowright", del: "delete", plus: "+" };
+function parseCombo(combo) {
+  const parts = combo.toLowerCase().split("+").filter(Boolean);
+  const key = ALIASES[parts.at(-1) ?? ""] ?? parts.at(-1) ?? "";
+  const has = (name) => parts.slice(0, -1).includes(name);
+  return { key, mod: has("mod"), ctrl: has("ctrl"), alt: has("alt"), shift: has("shift"), meta: has("meta") };
+}
+function matchesCombo(event, combo, apple = isApple()) {
+  const want = parseCombo(combo);
+  const meta = want.meta || want.mod && apple;
+  const ctrl = want.ctrl || want.mod && !apple;
+  if (event.metaKey !== meta || event.ctrlKey !== ctrl || event.altKey !== want.alt) return false;
+  if (want.shift && !event.shiftKey) return false;
+  return event.key.toLowerCase() === want.key;
+}
+function formatShortcut(shortcut, apple = isApple()) {
+  if (shortcut.includes(" ")) return shortcut.split(/\s+/).map((key2) => key2.toUpperCase());
+  const parts = shortcut.split("+").filter(Boolean);
+  const key = parts.at(-1) ?? "";
+  const names = { mod: ["\u2318", "Ctrl"], meta: ["\u2318", "Win"], ctrl: ["\u2303", "Ctrl"], alt: ["\u2325", "Alt"], shift: ["\u21E7", "Shift"] };
+  const shown = parts.slice(0, -1).map((part) => names[part.toLowerCase()]?.[apple ? 0 : 1] ?? part);
+  const glyph = { escape: "Esc", enter: "\u21B5", arrowup: "\u2191", arrowdown: "\u2193", arrowleft: "\u2190", arrowright: "\u2192", " ": "Space" };
+  const last = glyph[ALIASES[key.toLowerCase()] ?? key.toLowerCase()] ?? key.toUpperCase();
+  return [...shown, last];
+}
+var noop = () => () => void 0;
+function useApple() {
+  return React2.useSyncExternalStore(noop, isApple, () => false);
+}
+function ariaKeyShortcuts(shortcut, apple = isApple()) {
+  if (shortcut.includes(" ")) return void 0;
+  const parts = shortcut.split("+").filter(Boolean);
+  const names = { mod: apple ? "Meta" : "Control", meta: "Meta", ctrl: "Control", alt: "Alt", shift: "Shift" };
+  const key = parts.at(-1) ?? "";
+  return [...parts.slice(0, -1).map((part) => names[part.toLowerCase()] ?? part), key.length === 1 ? key.toUpperCase() : key.charAt(0).toUpperCase() + key.slice(1)].join("+");
+}
+function isEditable(target) {
+  const element = target instanceof HTMLElement ? target : null;
+  if (!element) return { field: false, rich: false };
+  const rich = element.isContentEditable;
+  return { field: rich || /^(input|textarea|select)$/i.test(element.tagName), rich };
+}
+function useShortcuts(map, { enabled = true, timeout = 900 } = {}) {
+  const latest = useLatest(map);
+  const names = Object.keys(map).sort().join("\n");
+  React2.useEffect(() => {
+    if (!enabled) return;
+    const bindings = names.split("\n").filter(Boolean);
+    let buffer = [];
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented || event.isComposing || event.repeat || !event.key) return;
+      const editing = isEditable(event.target);
+      const chord = event.metaKey || event.ctrlKey || event.altKey;
+      const now = Date.now();
+      buffer = [...buffer.filter((entry) => now - entry.at <= timeout), { key: event.key.toLowerCase(), at: now }].slice(-4);
+      for (const binding of bindings) {
+        const handler = latest.current[binding];
+        if (!handler) continue;
+        const keys = binding.toLowerCase().split(/\s+/).map((key) => ALIASES[key] ?? key);
+        const fired = keys.length > 1 ? !chord && !editing.field && buffer.length >= keys.length && keys.every((key, i) => buffer[buffer.length - keys.length + i]?.key === key) : matchesCombo(event, binding) && (chord ? !editing.rich : !editing.field);
+        if (!fired) continue;
+        event.preventDefault();
+        buffer = [];
+        handler(event);
+        return;
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [enabled, names, latest, timeout]);
+}
+
+// src/app-shell/app-shell.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var appShell = tv2({
   slots: {
     root: "flex min-h-dvh w-full bg-surface-0 text-fg",
     sidebar: "sticky top-0 hidden h-dvh shrink-0 flex-col border-r border-border-subtle bg-surface-1 transition-[width] duration-300 motion-reduce:transition-none md:flex w-64 data-collapsed:w-[4.25rem]",
@@ -26,6 +128,7 @@ var appShell = tv({
     group: "mt-3 mb-1 px-3 font-mono text-[10.5px] font-semibold uppercase tracking-[0.14em] text-fg-secondary [[data-collapsed]_&]:sr-only",
     item: "group/item relative flex h-10 items-center gap-3 rounded-lg px-3 text-sm font-medium text-fg-secondary no-underline transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-2 aria-[current=page]:before:w-1 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-accent [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0 [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0",
     itemLabel: "min-w-0 flex-1 truncate [[data-collapsed]_&]:sr-only",
+    itemHint: "ml-auto hidden items-center gap-0.5 text-fg-secondary group-hover/item:flex group-focus-visible/item:flex [[data-collapsed]_&]:!hidden",
     itemBadge: "ml-auto inline-flex min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold text-on-accent [[data-collapsed]_&]:absolute [[data-collapsed]_&]:right-1.5 [[data-collapsed]_&]:top-1 [[data-collapsed]_&]:min-w-4 [[data-collapsed]_&]:px-1 [[data-collapsed]_&]:text-[10px]",
     footer: "shrink-0 border-t border-border-subtle p-2",
     collapse: "hidden h-9 w-full items-center gap-2 rounded-lg px-3 text-xs font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg md:flex focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0",
@@ -33,31 +136,35 @@ var appShell = tv({
     header: "sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-0/85 px-4 backdrop-blur-xl md:px-6",
     menuButton: "inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border-subtle bg-surface-1 text-fg md:hidden focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
     title: "min-w-0 flex-1 truncate font-display text-base font-bold tracking-tight",
+    search: "inline-flex h-9 min-w-9 items-center justify-center gap-2 rounded-lg border border-border-subtle bg-surface-1 px-2.5 text-sm text-fg-secondary transition-colors hover:border-border-default hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring md:w-56 md:justify-start [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0",
+    searchLabel: "sr-only md:not-sr-only md:flex-1 md:truncate md:text-left",
+    searchKeys: "hidden items-center gap-0.5 md:flex",
     actions: "ml-auto flex shrink-0 items-center gap-2",
     main: "min-w-0 flex-1 px-4 py-6 md:px-6 md:py-8"
   }
 });
 var s = appShell();
-var ShellContext = React.createContext(null);
+var ShellContext = React3.createContext(null);
 var useShell = () => {
-  const ctx = React.useContext(ShellContext);
+  const ctx = React3.useContext(ShellContext);
   if (!ctx) throw new Error("AppShell parts must be inside <AppShell.Root>");
   return ctx;
 };
-function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onCollapsedChange, skipLabel, className, children, ...props }) {
-  const [own, setOwn] = React.useState(defaultCollapsed);
-  const [open, setOpen] = React.useState(false);
+function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onCollapsedChange, skipLabel, collapseShortcut = "mod+b", className, children, ...props }) {
+  const [own, setOwn] = React3.useState(defaultCollapsed);
+  const [open, setOpen] = React3.useState(false);
   const collapsed = controlled ?? own;
-  const setCollapsed = React.useCallback(
+  const setCollapsed = React3.useCallback(
     (value2) => {
       if (controlled === void 0) setOwn(value2);
       onCollapsedChange?.(value2);
     },
     [controlled, onCollapsedChange]
   );
-  const value = React.useMemo(() => ({ collapsed, setCollapsed, open, setOpen, inDrawer: false }), [collapsed, setCollapsed, open]);
-  return /* @__PURE__ */ jsx(ShellContext.Provider, { value, children: /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
-    skipLabel && /* @__PURE__ */ jsx(SkipLink, { href: "#content", children: skipLabel }),
+  const value = React3.useMemo(() => ({ collapsed, setCollapsed, open, setOpen, inDrawer: false }), [collapsed, setCollapsed, open]);
+  useShortcuts(collapseShortcut ? { [collapseShortcut]: () => setCollapsed(!collapsed) } : {});
+  return /* @__PURE__ */ jsx2(ShellContext.Provider, { value, children: /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
+    skipLabel && /* @__PURE__ */ jsx2(SkipLink, { href: "#content", children: skipLabel }),
     children
   ] }) });
 }
@@ -66,14 +173,14 @@ function SidebarContent({ brand, children, footer, collapseLabels, closeLabel })
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: s.brand(), children: [
       brand,
-      inDrawer && /* @__PURE__ */ jsx(DialogPrimitive.Close, { className: cn(s.menuButton(), "ml-auto flex"), "aria-label": closeLabel, children: /* @__PURE__ */ jsx(CloseGlyph, { className: "h-4 w-4" }) })
+      inDrawer && /* @__PURE__ */ jsx2(DialogPrimitive.Close, { className: cn(s.menuButton(), "ml-auto flex"), "aria-label": closeLabel, children: /* @__PURE__ */ jsx2(CloseGlyph, { className: "h-4 w-4" }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: s.nav(), children }),
+    /* @__PURE__ */ jsx2("div", { className: s.nav(), children }),
     (footer || collapseLabels && !inDrawer) && /* @__PURE__ */ jsxs("div", { className: s.footer(), children: [
       footer,
       collapseLabels && !inDrawer && /* @__PURE__ */ jsxs("button", { type: "button", className: s.collapse(), "aria-expanded": !collapsed, onClick: () => setCollapsed(!collapsed), children: [
-        /* @__PURE__ */ jsx(ChevronGlyph, { direction: collapsed ? "right" : "left", className: "h-4 w-4" }),
-        /* @__PURE__ */ jsx("span", { className: collapsed ? "sr-only" : void 0, children: collapsed ? collapseLabels[1] : collapseLabels[0] })
+        /* @__PURE__ */ jsx2(ChevronGlyph, { direction: collapsed ? "right" : "left", className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx2("span", { className: collapsed ? "sr-only" : void 0, children: collapsed ? collapseLabels[1] : collapseLabels[0] })
       ] })
     ] })
   ] });
@@ -82,43 +189,56 @@ function AppShellSidebar({ label, brand, children, footer, collapseLabels, close
   const shell = useShell();
   const content = { brand, children, footer, collapseLabels, closeLabel };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("nav", { "aria-label": label, "data-collapsed": shell.collapsed ? "" : void 0, className: s.sidebar({ className }), ...props, children: /* @__PURE__ */ jsx(SidebarContent, { ...content }) }),
-    /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: shell.open, onOpenChange: shell.setOpen, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
-      /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: s.overlay() }),
+    /* @__PURE__ */ jsx2("nav", { "aria-label": label, "data-collapsed": shell.collapsed ? "" : void 0, className: s.sidebar({ className }), ...props, children: /* @__PURE__ */ jsx2(SidebarContent, { ...content }) }),
+    /* @__PURE__ */ jsx2(DialogPrimitive.Root, { open: shell.open, onOpenChange: shell.setOpen, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+      /* @__PURE__ */ jsx2(DialogPrimitive.Overlay, { className: s.overlay() }),
       /* @__PURE__ */ jsxs(DialogPrimitive.Content, { className: s.drawer(), "aria-describedby": void 0, children: [
-        /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: label }),
-        /* @__PURE__ */ jsx(ShellContext.Provider, { value: { ...shell, collapsed: false, inDrawer: true }, children: /* @__PURE__ */ jsx("nav", { "aria-label": label, className: "flex min-h-0 flex-1 flex-col", onClick: (e) => e.target.closest("a") && shell.setOpen(false), children: /* @__PURE__ */ jsx(SidebarContent, { ...content }) }) })
+        /* @__PURE__ */ jsx2(DialogPrimitive.Title, { className: "sr-only", children: label }),
+        /* @__PURE__ */ jsx2(ShellContext.Provider, { value: { ...shell, collapsed: false, inDrawer: true }, children: /* @__PURE__ */ jsx2("nav", { "aria-label": label, className: "flex min-h-0 flex-1 flex-col", onClick: (e) => e.target.closest("a") && shell.setOpen(false), children: /* @__PURE__ */ jsx2(SidebarContent, { ...content }) }) })
       ] })
     ] }) })
   ] });
 }
 function AppShellGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx("p", { className: s.group({ className }), ...props });
+  return /* @__PURE__ */ jsx2("p", { className: s.group({ className }), ...props });
 }
-function AppShellItem({ icon, label, current, badge, asChild, children, className, ...props }) {
-  const { collapsed } = useShell();
+function AppShellItem({ icon, label, current, badge, shortcut, asChild, children, className, ...props }) {
+  const { collapsed, inDrawer } = useShell();
+  const element = React3.useRef(null);
+  const apple = useApple();
+  useShortcuts(shortcut && !inDrawer ? { [shortcut]: () => element.current?.click() } : {});
   const Comp = asChild ? Slot.Root : "a";
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon,
-    /* @__PURE__ */ jsx("span", { className: s.itemLabel(), children: label }),
-    badge != null && /* @__PURE__ */ jsx("span", { className: s.itemBadge(), children: badge })
+    /* @__PURE__ */ jsx2("span", { className: s.itemLabel(), children: label }),
+    badge != null && /* @__PURE__ */ jsx2("span", { className: s.itemBadge(), children: badge }),
+    shortcut && !inDrawer ? /* @__PURE__ */ jsx2("span", { className: s.itemHint(), "aria-hidden": true, children: formatShortcut(shortcut, apple).map((key) => /* @__PURE__ */ jsx2(Kbd, { size: "sm", children: key }, key)) }) : null
   ] });
-  return /* @__PURE__ */ jsx(Comp, { "aria-current": current ? "page" : void 0, title: collapsed ? label : void 0, className: s.item({ className }), ...props, children: asChild && children ? React.cloneElement(children, void 0, inner) : inner });
+  return /* @__PURE__ */ jsx2(Comp, { ref: element, "aria-current": current ? "page" : void 0, "aria-keyshortcuts": shortcut ? ariaKeyShortcuts(shortcut, apple) : void 0, title: collapsed ? label : void 0, className: s.item({ className }), ...props, children: asChild && children ? React3.cloneElement(children, void 0, inner) : inner });
 }
 function AppShellBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: s.body({ className }), ...props });
+  return /* @__PURE__ */ jsx2("div", { className: s.body({ className }), ...props });
 }
 function AppShellHeader({ title, menuLabel, actions, className, children, ...props }) {
   const { open, setOpen } = useShell();
   return /* @__PURE__ */ jsxs("header", { className: s.header({ className }), ...props, children: [
-    /* @__PURE__ */ jsx("button", { type: "button", className: s.menuButton(), "aria-label": menuLabel, "aria-expanded": open, "aria-haspopup": "dialog", onClick: () => setOpen(true), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4 7h16M4 12h16M4 17h10" }) }) }),
-    title && /* @__PURE__ */ jsx("h1", { className: s.title(), children: title }),
+    /* @__PURE__ */ jsx2("button", { type: "button", className: s.menuButton(), "aria-label": menuLabel, "aria-expanded": open, "aria-haspopup": "dialog", onClick: () => setOpen(true), children: /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx2("path", { d: "M4 7h16M4 12h16M4 17h10" }) }) }),
+    title && /* @__PURE__ */ jsx2("h1", { className: s.title(), children: title }),
     children,
-    actions && /* @__PURE__ */ jsx("div", { className: s.actions(), children: actions })
+    actions && /* @__PURE__ */ jsx2("div", { className: s.actions(), children: actions })
+  ] });
+}
+function AppShellSearch({ label, onOpen, shortcut = "mod+k", className, ...props }) {
+  const apple = useApple();
+  useShortcuts({ [shortcut]: () => onOpen() });
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: s.search({ className }), "aria-keyshortcuts": ariaKeyShortcuts(shortcut, apple), onClick: onOpen, ...props, children: [
+    /* @__PURE__ */ jsx2(SearchGlyph, {}),
+    /* @__PURE__ */ jsx2("span", { className: s.searchLabel(), children: label }),
+    /* @__PURE__ */ jsx2("span", { className: s.searchKeys(), "aria-hidden": true, children: formatShortcut(shortcut, apple).map((key) => /* @__PURE__ */ jsx2(Kbd, { size: "sm", children: key }, key)) })
   ] });
 }
 function AppShellMain({ className, ...props }) {
-  return /* @__PURE__ */ jsx("main", { id: "content", tabIndex: -1, className: s.main({ className }), ...props });
+  return /* @__PURE__ */ jsx2("main", { id: "content", tabIndex: -1, className: s.main({ className }), ...props });
 }
 var AppShell = {
   Root: AppShellRoot,
@@ -127,6 +247,7 @@ var AppShell = {
   Item: AppShellItem,
   Body: AppShellBody,
   Header: AppShellHeader,
+  Search: AppShellSearch,
   Main: AppShellMain
 };
 export {
@@ -137,7 +258,14 @@ export {
   AppShellItem,
   AppShellMain,
   AppShellRoot,
+  AppShellSearch,
   AppShellSidebar,
-  appShell
+  appShell,
+  ariaKeyShortcuts,
+  formatShortcut,
+  matchesCombo,
+  parseCombo,
+  useApple,
+  useShortcuts
 };
 //# sourceMappingURL=app-shell.js.map