@krizaka/ui 3.53.0 → 3.55.0

package/dist/anatomy-plate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/anatomy-plate/anatomy-plate.tsx"],"sourcesContent":["// Server-safe. The anatomy plate of the Cahier (ADR-004, blocks.css): a component drawn large in the middle of a plate,\n// its parts numbered and named on both sides, a hairline leading from each note to the specimen — the way a field guide\n// shows a bird's anatomy. The notes are real text in an ordered list: the plate is its own text version, and on a phone\n// it stacks (the specimen, then the list).\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport interface AnatomyPart {\n  /** The part's name: `the cut`. */\n  label: React.ReactNode;\n  /** Why it is there, in one sentence: `45°, the Krizaka chamfer; it points where the action goes.` */\n  note: React.ReactNode;\n  /** The side of the plate it is written on. @default alternates, left first */\n  side?: \"left\" | \"right\";\n}\n\nexport type AnatomyPlateProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The plate's title: `Anatomy`. */\n  title?: React.ReactNode;\n  /** One line under the title, or the scale: `to scale × 1.9`. */\n  subtitle?: React.ReactNode;\n  /** The parts, numbered in this order. */\n  parts: readonly AnatomyPart[];\n  /** The specimen: the live component, drawn large. */\n  children: React.ReactNode;\n  /** The specimen's scale on a wide screen (it is drawn at 1 on a phone). @default 1.6 */\n  scale?: number;\n};\n\n/** A component's anatomy as a naturalist's plate: the specimen in the middle, its numbered parts and their reasons around it. */\nexport function AnatomyPlate({ title, subtitle, parts, children, scale = 1.6, className, style, ...props }: AnatomyPlateProps) {\n  const numbered = parts.map((p, i) => ({ ...p, n: i + 1, side: p.side ?? (i % 2 === 0 ? \"left\" : \"right\") }));\n  const column = (side: \"left\" | \"right\") => (\n    <ol className=\"kz-anatomy-parts\" data-side={side}>\n      {numbered\n        .filter((p) => p.side === side)\n        .map((p) => (\n          <li key={p.n} value={p.n} className=\"kz-anatomy-part\">\n            <span className=\"kz-anatomy-n\" aria-hidden>\n              {p.n}\n            </span>\n            <span className=\"kz-anatomy-text\">\n              <b>{p.label}</b> {p.note}\n            </span>\n          </li>\n        ))}\n    </ol>\n  );\n  return (\n    <figure className={cn(\"kz-anatomy\", className)} style={{ [\"--kz-anatomy-scale\" as string]: scale, ...style }} {...props}>\n      {(title || subtitle) && (\n        <figcaption className=\"kz-anatomy-head\">\n          {title && <span className=\"kz-plate-title\">{title}</span>}\n          {subtitle && <span className=\"kz-plate-sub\">{subtitle}</span>}\n        </figcaption>\n      )}\n      <div className=\"kz-anatomy-stage\">\n        {column(\"left\")}\n        <div className=\"kz-anatomy-specimen\">\n          <div className=\"kz-anatomy-scale\">{children}</div>\n        </div>\n        {column(\"right\")}\n      </div>\n    </figure>\n  );\n}\n"],"mappings":";;;;;AAuCY,cAGA,YAHA;AARL,SAAS,aAAa,EAAE,OAAO,UAAU,OAAO,UAAU,QAAQ,KAAK,WAAW,OAAO,GAAG,MAAM,GAAsB;AAC7H,QAAM,WAAW,MAAM,IAAI,CAAC,GAAG,OAAO,EAAE,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,EAAE,SAAS,IAAI,MAAM,IAAI,SAAS,SAAS,EAAE;AAC3G,QAAM,SAAS,CAAC,SACd,oBAAC,QAAG,WAAU,oBAAmB,aAAW,MACzC,mBACE,OAAO,CAAC,MAAM,EAAE,SAAS,IAAI,EAC7B,IAAI,CAAC,MACJ,qBAAC,QAAa,OAAO,EAAE,GAAG,WAAU,mBAClC;AAAA,wBAAC,UAAK,WAAU,gBAAe,eAAW,MACvC,YAAE,GACL;AAAA,IACA,qBAAC,UAAK,WAAU,mBACd;AAAA,0BAAC,OAAG,YAAE,OAAM;AAAA,MAAI;AAAA,MAAE,EAAE;AAAA,OACtB;AAAA,OANO,EAAE,CAOX,CACD,GACL;AAEF,SACE,qBAAC,YAAO,WAAW,GAAG,cAAc,SAAS,GAAG,OAAO,EAAE,CAAC,oBAA8B,GAAG,OAAO,GAAG,MAAM,GAAI,GAAG,OAC9G;AAAA,cAAS,aACT,qBAAC,gBAAW,WAAU,mBACnB;AAAA,eAAS,oBAAC,UAAK,WAAU,kBAAkB,iBAAM;AAAA,MACjD,YAAY,oBAAC,UAAK,WAAU,gBAAgB,oBAAS;AAAA,OACxD;AAAA,IAEF,qBAAC,SAAI,WAAU,oBACZ;AAAA,aAAO,MAAM;AAAA,MACd,oBAAC,SAAI,WAAU,uBACb,8BAAC,SAAI,WAAU,oBAAoB,UAAS,GAC9C;AAAA,MACC,OAAO,OAAO;AAAA,OACjB;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/anatomy-plate/anatomy-plate.tsx"],"sourcesContent":["// Server-safe. The anatomy plate of the Cahier (ADR-004, blocks.css): a component drawn large in the middle of a plate,\n// its parts numbered and named on both sides, a hairline leading from each note to the specimen — the way a field guide\n// shows a bird's anatomy. The notes are real text in an ordered list: the plate is its own text version, and on a phone\n// it stacks (the specimen, then the list).\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { warnDeprecated } from \"../deprecated\";\n\nexport interface AnatomyPart {\n  /** The part's name: `the cut`. */\n  label: React.ReactNode;\n  /** Why it is there, in one sentence: `45°, the Krizaka chamfer; it points where the action goes.` */\n  note: React.ReactNode;\n  /** The side of the plate it is written on. @default alternates, left first */\n  side?: \"left\" | \"right\";\n}\n\nexport type AnatomyPlateProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The plate's title: `Anatomy`. */\n  title?: React.ReactNode;\n  /** One line under the title, or the scale: `to scale × 1.9`. */\n  subtitle?: React.ReactNode;\n  /** The parts, numbered in this order. */\n  parts: readonly AnatomyPart[];\n  /** The specimen: the live component, drawn large. */\n  children: React.ReactNode;\n  /** The specimen's scale on a wide screen (it is drawn at 1 on a phone). @default 1.6 */\n  scale?: number;\n};\n\n/**\n * A component's anatomy as a naturalist's plate: the specimen in the middle, its numbered parts and their reasons around it.\n * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.\n */\nexport function AnatomyPlate({ title, subtitle, parts, children, scale = 1.6, className, style, ...props }: AnatomyPlateProps) {\n  warnDeprecated(\"anatomy-plate\");\n  const numbered = parts.map((p, i) => ({ ...p, n: i + 1, side: p.side ?? (i % 2 === 0 ? \"left\" : \"right\") }));\n  const column = (side: \"left\" | \"right\") => (\n    <ol className=\"kz-anatomy-parts\" data-side={side}>\n      {numbered\n        .filter((p) => p.side === side)\n        .map((p) => (\n          <li key={p.n} value={p.n} className=\"kz-anatomy-part\">\n            <span className=\"kz-anatomy-n\" aria-hidden>\n              {p.n}\n            </span>\n            <span className=\"kz-anatomy-text\">\n              <b>{p.label}</b> {p.note}\n            </span>\n          </li>\n        ))}\n    </ol>\n  );\n  return (\n    <figure className={cn(\"kz-anatomy\", className)} style={{ [\"--kz-anatomy-scale\" as string]: scale, ...style }} {...props}>\n      {(title || subtitle) && (\n        <figcaption className=\"kz-anatomy-head\">\n          {title && <span className=\"kz-plate-title\">{title}</span>}\n          {subtitle && <span className=\"kz-plate-sub\">{subtitle}</span>}\n        </figcaption>\n      )}\n      <div className=\"kz-anatomy-stage\">\n        {column(\"left\")}\n        <div className=\"kz-anatomy-specimen\">\n          <div className=\"kz-anatomy-scale\">{children}</div>\n        </div>\n        {column(\"right\")}\n      </div>\n    </figure>\n  );\n}\n"],"mappings":";;;;;;;;AA4CY,cAGA,YAHA;AATL,SAAS,aAAa,EAAE,OAAO,UAAU,OAAO,UAAU,QAAQ,KAAK,WAAW,OAAO,GAAG,MAAM,GAAsB;AAC7H,iBAAe,eAAe;AAC9B,QAAM,WAAW,MAAM,IAAI,CAAC,GAAG,OAAO,EAAE,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,EAAE,SAAS,IAAI,MAAM,IAAI,SAAS,SAAS,EAAE;AAC3G,QAAM,SAAS,CAAC,SACd,oBAAC,QAAG,WAAU,oBAAmB,aAAW,MACzC,mBACE,OAAO,CAAC,MAAM,EAAE,SAAS,IAAI,EAC7B,IAAI,CAAC,MACJ,qBAAC,QAAa,OAAO,EAAE,GAAG,WAAU,mBAClC;AAAA,wBAAC,UAAK,WAAU,gBAAe,eAAW,MACvC,YAAE,GACL;AAAA,IACA,qBAAC,UAAK,WAAU,mBACd;AAAA,0BAAC,OAAG,YAAE,OAAM;AAAA,MAAI;AAAA,MAAE,EAAE;AAAA,OACtB;AAAA,OANO,EAAE,CAOX,CACD,GACL;AAEF,SACE,qBAAC,YAAO,WAAW,GAAG,cAAc,SAAS,GAAG,OAAO,EAAE,CAAC,oBAA8B,GAAG,OAAO,GAAG,MAAM,GAAI,GAAG,OAC9G;AAAA,cAAS,aACT,qBAAC,gBAAW,WAAU,mBACnB;AAAA,eAAS,oBAAC,UAAK,WAAU,kBAAkB,iBAAM;AAAA,MACjD,YAAY,oBAAC,UAAK,WAAU,gBAAgB,oBAAS;AAAA,OACxD;AAAA,IAEF,qBAAC,SAAI,WAAU,oBACZ;AAAA,aAAO,MAAM;AAAA,MACd,oBAAC,SAAI,WAAU,uBACb,8BAAC,SAAI,WAAU,oBAAoB,UAAS,GAC9C;AAAA,MACC,OAAO,OAAO;AAAA,OACjB;AAAA,KACF;AAEJ;","names":[]}

package/dist/app-header/search.d.ts

@@ -0,0 +1,63 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const appHeaderSearch: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            keys?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            glyph?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            keys?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            glyph?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    glyph: string;
+    label: string;
+    keys: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            keys?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            glyph?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    glyph: string;
+    label: string;
+    keys: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    glyph: string;
+    label: string;
+    keys: string;
+}>>;
+/** Whether a keydown is the shortcut: ⌘ or Ctrl with the key, no Alt. */
+declare function isSearchShortcut(event: Pick<KeyboardEvent, "key" | "metaKey" | "ctrlKey" | "altKey">, key: string): boolean;
+type AppHeaderSearchProps = Omit<React.ComponentProps<"button">, "children" | "onClick"> & {
+    /** What it searches (« Search files and checks ») — passed translated: the field's words from `md`, the button's name at every width. */
+    label: string;
+    /** Opens the palette: a click, Enter, and the shortcut. */
+    onOpen: () => void;
+    /**
+     * The shortcut's key with ⌘ (Apple) or Ctrl (elsewhere), global to the page; `false` for none. One per page.
+     * @default "k"
+     */
+    shortcut?: string | false;
+};
+/** The top bar's search trigger: a field from `md`, an icon below; it opens the host's palette, also on ⌘K. */
+declare function AppHeaderSearch({ label, onOpen, shortcut, className, type, ...props }: AppHeaderSearchProps): React.JSX.Element;
+
+export { AppHeaderSearch, type AppHeaderSearchProps, appHeaderSearch, isSearchShortcut };

package/dist/app-header/search.js

@@ -0,0 +1,70 @@
+"use client";
+import {
+  Kbd
+} from "../chunk-KID32IRJ.js";
+import {
+  SearchGlyph
+} from "../chunk-P7GZR5CU.js";
+
+// src/app-header/search/search.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var appHeaderSearch = tv({
+  slots: {
+    root: "inline-flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-lg text-fg-secondary transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none md:w-56 md:justify-start md:border md:border-border-default md:bg-surface-2/60 md:px-3 md:text-xs md:hover:border-border-strong lg:w-72",
+    glyph: "h-5 w-5 shrink-0 md:h-4 md:w-4",
+    // Hidden on a phone, still the button's name there (sr-only), so the name is the same at every width.
+    label: "sr-only md:not-sr-only md:flex-1 md:truncate md:text-left",
+    keys: "ml-auto hidden shrink-0 items-center gap-0.5 lg:flex"
+  }
+});
+var s = appHeaderSearch();
+var isApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+function isSearchShortcut(event, key) {
+  return event.key.toLowerCase() === key.toLowerCase() && (event.metaKey || event.ctrlKey) && !event.altKey;
+}
+function AppHeaderSearch({ label, onOpen, shortcut = "k", className, type, ...props }) {
+  const [apple, setApple] = React.useState(true);
+  const open = React.useRef(onOpen);
+  React.useEffect(() => {
+    open.current = onOpen;
+  }, [onOpen]);
+  React.useEffect(() => {
+    if (!shortcut) return;
+    setApple(isApple());
+    const onKey = (event) => {
+      if (!isSearchShortcut(event, shortcut)) return;
+      event.preventDefault();
+      open.current();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [shortcut]);
+  const key = shortcut ? shortcut.toUpperCase() : null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: type ?? "button",
+      "aria-haspopup": "dialog",
+      "aria-keyshortcuts": key ? `Meta+${key} Control+${key}` : void 0,
+      ...props,
+      onClick: () => onOpen(),
+      className: s.root({ className }),
+      children: [
+        /* @__PURE__ */ jsx(SearchGlyph, { className: s.glyph() }),
+        /* @__PURE__ */ jsx("span", { className: s.label(), children: label }),
+        key && /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: s.keys(), children: [
+          /* @__PURE__ */ jsx(Kbd, { size: "sm", children: apple ? "\u2318" : "Ctrl" }),
+          /* @__PURE__ */ jsx(Kbd, { size: "sm", children: key })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  AppHeaderSearch,
+  appHeaderSearch,
+  isSearchShortcut
+};
+//# sourceMappingURL=search.js.map

package/dist/app-header/search.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/app-header/search/search.tsx"],"sourcesContent":["// Client (a global shortcut). The top bar's search trigger: a field-like button (the glyph, the label, ⌘K) from `md`, an\n// icon below. It does not search: it opens the host's palette (`CommandDialog` of @krizaka/ui/command) — on a click, on\n// Enter, and on ⌘K / Ctrl+K from anywhere on the page.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { SearchGlyph } from \"../../glyphs\";\nimport { Kbd } from \"../../kbd/kbd\";\n\nexport const appHeaderSearch = tv({\n  slots: {\n    root:\n      \"inline-flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-lg text-fg-secondary transition-colors \" +\n      \"hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none \" +\n      \"md:w-56 md:justify-start md:border md:border-border-default md:bg-surface-2/60 md:px-3 md:text-xs md:hover:border-border-strong lg:w-72\",\n    glyph: \"h-5 w-5 shrink-0 md:h-4 md:w-4\",\n    // Hidden on a phone, still the button's name there (sr-only), so the name is the same at every width.\n    label: \"sr-only md:not-sr-only md:flex-1 md:truncate md:text-left\",\n    keys: \"ml-auto hidden shrink-0 items-center gap-0.5 lg:flex\",\n  },\n});\nconst s = appHeaderSearch();\n\nconst isApple = () => typeof navigator !== \"undefined\" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);\n\n/** Whether a keydown is the shortcut: ⌘ or Ctrl with the key, no Alt. */\nexport function isSearchShortcut(event: Pick<KeyboardEvent, \"key\" | \"metaKey\" | \"ctrlKey\" | \"altKey\">, key: string): boolean {\n  return event.key.toLowerCase() === key.toLowerCase() && (event.metaKey || event.ctrlKey) && !event.altKey;\n}\n\nexport type AppHeaderSearchProps = Omit<React.ComponentProps<\"button\">, \"children\" | \"onClick\"> & {\n  /** What it searches (« Search files and checks ») — passed translated: the field's words from `md`, the button's name at every width. */\n  label: string;\n  /** Opens the palette: a click, Enter, and the shortcut. */\n  onOpen: () => void;\n  /**\n   * The shortcut's key with ⌘ (Apple) or Ctrl (elsewhere), global to the page; `false` for none. One per page.\n   * @default \"k\"\n   */\n  shortcut?: string | false;\n};\n\n/** The top bar's search trigger: a field from `md`, an icon below; it opens the host's palette, also on ⌘K. */\nexport function AppHeaderSearch({ label, onOpen, shortcut = \"k\", className, type, ...props }: AppHeaderSearchProps) {\n  const [apple, setApple] = React.useState(true);\n  const open = React.useRef(onOpen);\n  React.useEffect(() => {\n    open.current = onOpen;\n  }, [onOpen]);\n\n  React.useEffect(() => {\n    if (!shortcut) return;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- the platform is only known in the browser (no hydration mismatch)\n    setApple(isApple());\n    const onKey = (event: KeyboardEvent) => {\n      if (!isSearchShortcut(event, shortcut)) return;\n      event.preventDefault();\n      open.current();\n    };\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [shortcut]);\n\n  const key = shortcut ? shortcut.toUpperCase() : null;\n  return (\n    <button\n      type={type ?? \"button\"}\n      aria-haspopup=\"dialog\"\n      aria-keyshortcuts={key ? `Meta+${key} Control+${key}` : undefined}\n      {...props}\n      onClick={() => onOpen()}\n      className={s.root({ className })}\n    >\n      <SearchGlyph className={s.glyph()} />\n      <span className={s.label()}>{label}</span>\n      {key && (\n        <span aria-hidden className={s.keys()}>\n          <Kbd size=\"sm\">{apple ? \"⌘\" : \"Ctrl\"}</Kbd>\n          <Kbd size=\"sm\">{key}</Kbd>\n        </span>\n      )}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;AAGA,YAAY,WAAW;AACvB,SAAS,UAAU;AAqEb,cAGE,YAHF;AAhEC,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MACE;AAAA,IAGF,OAAO;AAAA;AAAA,IAEP,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF,CAAC;AACD,IAAM,IAAI,gBAAgB;AAE1B,IAAM,UAAU,MAAM,OAAO,cAAc,eAAe,kBAAkB,KAAK,UAAU,YAAY,UAAU,SAAS;AAGnH,SAAS,iBAAiB,OAAsE,KAAsB;AAC3H,SAAO,MAAM,IAAI,YAAY,MAAM,IAAI,YAAY,MAAM,MAAM,WAAW,MAAM,YAAY,CAAC,MAAM;AACrG;AAeO,SAAS,gBAAgB,EAAE,OAAO,QAAQ,WAAW,KAAK,WAAW,MAAM,GAAG,MAAM,GAAyB;AAClH,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAS,IAAI;AAC7C,QAAM,OAAa,aAAO,MAAM;AAChC,EAAM,gBAAU,MAAM;AACpB,SAAK,UAAU;AAAA,EACjB,GAAG,CAAC,MAAM,CAAC;AAEX,EAAM,gBAAU,MAAM;AACpB,QAAI,CAAC,SAAU;AAEf,aAAS,QAAQ,CAAC;AAClB,UAAM,QAAQ,CAAC,UAAyB;AACtC,UAAI,CAAC,iBAAiB,OAAO,QAAQ,EAAG;AACxC,YAAM,eAAe;AACrB,WAAK,QAAQ;AAAA,IACf;AACA,WAAO,iBAAiB,WAAW,KAAK;AACxC,WAAO,MAAM,OAAO,oBAAoB,WAAW,KAAK;AAAA,EAC1D,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,MAAM,WAAW,SAAS,YAAY,IAAI;AAChD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ;AAAA,MACd,iBAAc;AAAA,MACd,qBAAmB,MAAM,QAAQ,GAAG,YAAY,GAAG,KAAK;AAAA,MACvD,GAAG;AAAA,MACJ,SAAS,MAAM,OAAO;AAAA,MACtB,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC;AAAA,MAE/B;AAAA,4BAAC,eAAY,WAAW,EAAE,MAAM,GAAG;AAAA,QACnC,oBAAC,UAAK,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,QAClC,OACC,qBAAC,UAAK,eAAW,MAAC,WAAW,EAAE,KAAK,GAClC;AAAA,8BAAC,OAAI,MAAK,MAAM,kBAAQ,WAAM,QAAO;AAAA,UACrC,oBAAC,OAAI,MAAK,MAAM,eAAI;AAAA,WACtB;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/app-header.d.ts

@@ -10,6 +10,7 @@ declare const appHeader: tailwind_variants.TVReturnType<{
             name?: tailwind_variants.ClassValue;
             chips?: tailwind_variants.ClassValue;
             actions?: tailwind_variants.ClassValue;
+            search?: tailwind_variants.ClassValue;
         };
     };
 } | {
@@ -21,6 +22,7 @@ declare const appHeader: tailwind_variants.TVReturnType<{
             name?: tailwind_variants.ClassValue;
             chips?: tailwind_variants.ClassValue;
             actions?: tailwind_variants.ClassValue;
+            search?: tailwind_variants.ClassValue;
         };
     };
 } | {}, {
@@ -30,6 +32,7 @@ declare const appHeader: tailwind_variants.TVReturnType<{
     name: string;
     chips: string;
     actions: string;
+    search: string;
 }, undefined, {
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
@@ -39,6 +42,7 @@ declare const appHeader: tailwind_variants.TVReturnType<{
             name?: tailwind_variants.ClassValue;
             chips?: tailwind_variants.ClassValue;
             actions?: tailwind_variants.ClassValue;
+            search?: tailwind_variants.ClassValue;
         };
     };
 } | {}, {
@@ -48,6 +52,7 @@ declare const appHeader: tailwind_variants.TVReturnType<{
     name: string;
     chips: string;
     actions: string;
+    search: string;
 }, tailwind_variants.TVReturnTypeLike<unknown, {
     root: string;
     brand: string;
@@ -55,6 +60,7 @@ declare const appHeader: tailwind_variants.TVReturnType<{
     name: string;
     chips: string;
     actions: string;
+    search: string;
 }>>;
 type AppHeaderProps = Omit<React.ComponentProps<"header">, "children"> & {
     /** The product's name, as text (`Orazaka`): the only brand element on a desktop. */
@@ -70,10 +76,88 @@ type AppHeaderProps = Omit<React.ComponentProps<"header">, "children"> & {
     }>;
     /** Status chips beside the name (`Badge`): « Local · Sovereign », « Dev », a version. */
     chips?: React.ReactNode;
-    /** On the right: theme, notifications, the account menu. */
+    /** The search trigger, first of the controls: `AppHeaderSearch` (`@krizaka/ui/app-header/search`) — a field from `md`, an icon below, ⌘K. */
+    search?: React.ReactNode;
+    /** The language: `LanguageSwitch` (`@krizaka/ui/language-switch`) — a globe and « FR », labelled. */
+    language?: React.ReactNode;
+    /** The host's own controls, after the language (a theme toggle). Alone, it is the whole right side, as before. */
     actions?: React.ReactNode;
+    /** Messages: an `AppHeaderCount` (an icon button or link with its unread count). Empty: hidden. */
+    messages?: React.ReactNode;
+    /** Notifications: an `AppHeaderCount` (or the trigger of the host's popover). Empty: hidden. */
+    notifications?: React.ReactNode;
+    /** The one primary action of the app (« New check », #588), before the account. */
+    primary?: React.ReactNode;
+    /** The account, last: `AccountMenu` with `showName` (the name from `sm`), or the visitor's Sign in. */
+    account?: React.ReactNode;
 };
-/** The app's top bar: the name next to the rail, the mark on a phone, chips, actions. */
-declare function AppHeader({ name, mark, href, homeLink, chips, actions, className, ...props }: AppHeaderProps): React.JSX.Element;
+/** The app's top bar: the name next to the rail, the mark on a phone, chips, then search · language · actions · messages · notifications · primary · account. */
+declare function AppHeader({ name, mark, href, homeLink, chips, search, language, actions, messages, notifications, primary, account, className, ...props }: AppHeaderProps): React.JSX.Element;
 
-export { AppHeader, type AppHeaderProps, appHeader };
+declare const appHeaderCount: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            count?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            count?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    icon: string;
+    count: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            count?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    icon: string;
+    count: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    icon: string;
+    count: string;
+}>>;
+type AppHeaderCountProps = Omit<React.ComponentProps<"button">, "children"> & {
+    /** What it is (« Notifications », « Messages ») — passed translated; its accessible name, with the count. */
+    label: string;
+    /** The icon (`<NotificationIcon />` of @krizaka/icons): decorative, the name is `label`. */
+    icon: React.ReactNode;
+    /** The unread count; 0 or absent draws no badge. */
+    count?: number;
+    /** The count in words, said after the label (« 3 new », « 3 nouvelles ») — passed translated, with its plural. Default: the number. */
+    countLabel?: string;
+    /**
+     * Above it the badge shows `max+`.
+     * @default 99
+     */
+    max?: number;
+    /** A link to the page (`/notifications`) instead of a button. */
+    href?: string;
+    /** Your router's link (Next's `Link`) for `href`; an `<a>` otherwise. */
+    linkAs?: React.ElementType;
+    /** The page is the one it leads to (`aria-current="page"`). */
+    current?: boolean;
+};
+/** An icon button or link of the top bar with an unread count, the count announced in its name. */
+declare function AppHeaderCount({ label, icon, count, countLabel, max, href, linkAs, current, className, type, ...props }: AppHeaderCountProps): React.JSX.Element;
+
+/** What the badge shows: the count, or `max+` above `max`; nothing at 0. */
+declare function countText(count: number | undefined, max?: number): string | null;
+/** The control's accessible name: the label alone, or the label and the count's words (« Notifications, 3 new »). */
+declare function countName(label: string, count: number | undefined, countLabel?: string): string;
+
+export { AppHeader, AppHeaderCount, type AppHeaderCountProps, type AppHeaderProps, appHeader, appHeaderCount, countName, countText };

package/dist/app-header.js

@@ -4,29 +4,87 @@ import { tv } from "tailwind-variants";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var appHeader = tv({
   slots: {
-    root: "sticky top-0 z-30 flex h-14 w-full shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-1 px-4 md:bg-surface-1 md:pl-3 md:pr-5",
+    root: "sticky top-0 z-30 flex h-14 w-full min-w-0 shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-1 px-4 md:bg-surface-1 md:pl-3 md:pr-5",
     // The rail's mark is 56 px tall and so is this bar: the word shares the mark's line, right after the rail.
     brand: "flex min-w-0 items-center gap-2 font-display text-sm font-bold tracking-tight text-fg no-underline",
     mark: "inline-flex shrink-0 md:hidden",
     name: "truncate",
     chips: "flex shrink-0 items-center gap-2",
-    actions: "ml-auto flex shrink-0 items-center gap-2"
+    // The controls: one row at the right, in the order of the slots. They keep their size; the name gives way.
+    actions: "ml-auto flex shrink-0 items-center gap-1 sm:gap-2",
+    search: "flex min-w-0 shrink-0"
   }
 });
 var s = appHeader();
-function AppHeader({ name, mark, href, homeLink, chips, actions, className, ...props }) {
+function AppHeader({ name, mark, href, homeLink, chips, search, language, actions, messages, notifications, primary, account, className, ...props }) {
   const brand = /* @__PURE__ */ jsxs(Fragment, { children: [
     mark && /* @__PURE__ */ jsx("span", { "data-brand-mark": true, className: s.mark(), children: mark }),
     /* @__PURE__ */ jsx("span", { className: s.name(), children: name })
   ] });
+  const hasControls = [search, language, actions, messages, notifications, primary, account].some(Boolean);
   return /* @__PURE__ */ jsxs("header", { className: s.root({ className }), ...props, children: [
     homeLink ? React.cloneElement(homeLink, { className: s.brand() }, brand) : href ? /* @__PURE__ */ jsx("a", { href, className: s.brand(), children: brand }) : /* @__PURE__ */ jsx("div", { className: s.brand(), children: brand }),
     chips && /* @__PURE__ */ jsx("div", { className: s.chips(), children: chips }),
-    actions && /* @__PURE__ */ jsx("div", { className: s.actions(), children: actions })
+    hasControls && /* @__PURE__ */ jsxs("div", { className: s.actions(), children: [
+      search && /* @__PURE__ */ jsx("div", { "data-slot": "search", className: s.search(), children: search }),
+      language,
+      actions,
+      messages,
+      notifications,
+      primary,
+      account
+    ] })
   ] });
 }
+
+// src/app-header/count.tsx
+import { tv as tv2 } from "tailwind-variants";
+
+// src/app-header/count-text.ts
+function countText(count, max = 99) {
+  if (!count || count <= 0 || !Number.isFinite(count)) return null;
+  return count > max ? `${max}+` : String(Math.floor(count));
+}
+function countName(label, count, countLabel) {
+  if (!countText(count, Number.POSITIVE_INFINITY)) return label;
+  return `${label}, ${countLabel ?? String(Math.floor(count))}`;
+}
+
+// src/app-header/count.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var appHeaderCount = tv2({
+  slots: {
+    root: "relative inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-fg-secondary no-underline transition-colors hover:bg-surface-2 hover:text-fg aria-expanded:bg-surface-2 aria-expanded:text-fg aria-[current=page]:bg-surface-2 aria-[current=page]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+    icon: "inline-flex h-5 w-5 items-center justify-center [&>svg]:h-5 [&>svg]:w-5",
+    count: "pointer-events-none absolute -right-0.5 -top-0.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-accent px-1 font-mono text-[10px] font-bold leading-none tabular-nums text-on-accent ring-2 ring-surface-1"
+  }
+});
+var s2 = appHeaderCount();
+function AppHeaderCount({ label, icon, count, countLabel, max = 99, href, linkAs, current, className, type, ...props }) {
+  const text = countText(count, max);
+  const shared = {
+    ...props,
+    "aria-label": countName(label, count, countLabel),
+    "aria-current": current ? "page" : void 0,
+    "data-unread": text ? "" : void 0,
+    className: s2.root({ className })
+  };
+  const children = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: s2.icon(), children: icon }),
+    text && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, "data-count": true, className: s2.count(), children: text })
+  ] });
+  if (href) {
+    const Link = linkAs ?? "a";
+    return /* @__PURE__ */ jsx2(Link, { href, ...shared, children });
+  }
+  return /* @__PURE__ */ jsx2("button", { type: type ?? "button", ...shared, children });
+}
 export {
   AppHeader,
-  appHeader
+  AppHeaderCount,
+  appHeader,
+  appHeaderCount,
+  countName,
+  countText
 };
 //# sourceMappingURL=app-header.js.map

package/dist/app-header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/app-header/app-header.tsx"],"sourcesContent":["// Server-safe: no hook, no context. The top bar that sits next to a `RailNav`: the product's NAME as text (the mark is the\n// rail's), then optional chips, then the actions. Where the rail is a bottom tab bar (a phone) it has no room for the mark,\n// so the header shows it there and only there: exactly one brand mark is visible at every width.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const appHeader = tv({\n  slots: {\n    root: \"sticky top-0 z-30 flex h-14 w-full shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-1 px-4 md:bg-surface-1 md:pl-3 md:pr-5\",\n    // The rail's mark is 56 px tall and so is this bar: the word shares the mark's line, right after the rail.\n    brand: \"flex min-w-0 items-center gap-2 font-display text-sm font-bold tracking-tight text-fg no-underline\",\n    mark: \"inline-flex shrink-0 md:hidden\",\n    name: \"truncate\",\n    chips: \"flex shrink-0 items-center gap-2\",\n    actions: \"ml-auto flex shrink-0 items-center gap-2\",\n  },\n});\nconst s = appHeader();\n\nexport type AppHeaderProps = Omit<React.ComponentProps<\"header\">, \"children\"> & {\n  /** The product's name, as text (`Orazaka`): the only brand element on a desktop. */\n  name: string;\n  /** The product's mark (`<ProductLogo id=\"orazaka\" size={22} />`): shown below `md` only, where the rail (which carries it) is a bottom bar. */\n  mark?: React.ReactNode;\n  /** Makes the name (and the mark) a link home: pass your router's link as `homeLink` or give a `href`. */\n  href?: string;\n  /** Your router's link element for the home link; it receives the name and the mark as children. */\n  homeLink?: React.ReactElement<{ className?: string; children?: React.ReactNode }>;\n  /** Status chips beside the name (`Badge`): « Local · Sovereign », « Dev », a version. */\n  chips?: React.ReactNode;\n  /** On the right: theme, notifications, the account menu. */\n  actions?: React.ReactNode;\n};\n\n/** The app's top bar: the name next to the rail, the mark on a phone, chips, actions. */\nexport function AppHeader({ name, mark, href, homeLink, chips, actions, className, ...props }: AppHeaderProps) {\n  const brand = (\n    <>\n      {mark && <span data-brand-mark className={s.mark()}>{mark}</span>}\n      <span className={s.name()}>{name}</span>\n    </>\n  );\n  return (\n    <header className={s.root({ className })} {...props}>\n      {homeLink ? (\n        React.cloneElement(homeLink, { className: s.brand() }, brand)\n      ) : href ? (\n        <a href={href} className={s.brand()}>{brand}</a>\n      ) : (\n        <div className={s.brand()}>{brand}</div>\n      )}\n      {chips && <div className={s.chips()}>{chips}</div>}\n      {actions && <div className={s.actions()}>{actions}</div>}\n    </header>\n  );\n}\n"],"mappings":";AAGA,YAAY,WAAW;AACvB,SAAS,UAAU;AAiCf,mBACW,KADX;AA/BG,IAAM,YAAY,GAAG;AAAA,EAC1B,OAAO;AAAA,IACL,MAAM;AAAA;AAAA,IAEN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AACF,CAAC;AACD,IAAM,IAAI,UAAU;AAkBb,SAAS,UAAU,EAAE,MAAM,MAAM,MAAM,UAAU,OAAO,SAAS,WAAW,GAAG,MAAM,GAAmB;AAC7G,QAAM,QACJ,iCACG;AAAA,YAAQ,oBAAC,UAAK,mBAAe,MAAC,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,IAC1D,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,KACnC;AAEF,SACE,qBAAC,YAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC3C;AAAA,eACO,mBAAa,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,IAC1D,OACF,oBAAC,OAAE,MAAY,WAAW,EAAE,MAAM,GAAI,iBAAM,IAE5C,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAEnC,SAAS,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAC3C,WAAW,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,KACpD;AAEJ;","names":[]}
+{"version":3,"sources":["../src/app-header/app-header.tsx","../src/app-header/count.tsx","../src/app-header/count-text.ts"],"sourcesContent":["// Server-safe: no hook, no context. The family's top bar (#640): the product's NAME as text (the mark is the rail's), optional\n// chips, then the session's controls in a fixed order — search, language, the host's actions (a theme toggle), messages,\n// notifications, the primary action, the account. Every slot is the host's; a slot left empty draws nothing. Where the\n// rail is a bottom tab bar (a phone) it has no room for the mark, so the header shows it there and only there: exactly\n// one brand mark is visible at every width. At 360 px the name truncates first; the controls never clip.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const appHeader = tv({\n  slots: {\n    root: \"sticky top-0 z-30 flex h-14 w-full min-w-0 shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-1 px-4 md:bg-surface-1 md:pl-3 md:pr-5\",\n    // The rail's mark is 56 px tall and so is this bar: the word shares the mark's line, right after the rail.\n    brand: \"flex min-w-0 items-center gap-2 font-display text-sm font-bold tracking-tight text-fg no-underline\",\n    mark: \"inline-flex shrink-0 md:hidden\",\n    name: \"truncate\",\n    chips: \"flex shrink-0 items-center gap-2\",\n    // The controls: one row at the right, in the order of the slots. They keep their size; the name gives way.\n    actions: \"ml-auto flex shrink-0 items-center gap-1 sm:gap-2\",\n    search: \"flex min-w-0 shrink-0\",\n  },\n});\nconst s = appHeader();\n\nexport type AppHeaderProps = Omit<React.ComponentProps<\"header\">, \"children\"> & {\n  /** The product's name, as text (`Orazaka`): the only brand element on a desktop. */\n  name: string;\n  /** The product's mark (`<ProductLogo id=\"orazaka\" size={22} />`): shown below `md` only, where the rail (which carries it) is a bottom bar. */\n  mark?: React.ReactNode;\n  /** Makes the name (and the mark) a link home: pass your router's link as `homeLink` or give a `href`. */\n  href?: string;\n  /** Your router's link element for the home link; it receives the name and the mark as children. */\n  homeLink?: React.ReactElement<{ className?: string; children?: React.ReactNode }>;\n  /** Status chips beside the name (`Badge`): « Local · Sovereign », « Dev », a version. */\n  chips?: React.ReactNode;\n  /** The search trigger, first of the controls: `AppHeaderSearch` (`@krizaka/ui/app-header/search`) — a field from `md`, an icon below, ⌘K. */\n  search?: React.ReactNode;\n  /** The language: `LanguageSwitch` (`@krizaka/ui/language-switch`) — a globe and « FR », labelled. */\n  language?: React.ReactNode;\n  /** The host's own controls, after the language (a theme toggle). Alone, it is the whole right side, as before. */\n  actions?: React.ReactNode;\n  /** Messages: an `AppHeaderCount` (an icon button or link with its unread count). Empty: hidden. */\n  messages?: React.ReactNode;\n  /** Notifications: an `AppHeaderCount` (or the trigger of the host's popover). Empty: hidden. */\n  notifications?: React.ReactNode;\n  /** The one primary action of the app (« New check », #588), before the account. */\n  primary?: React.ReactNode;\n  /** The account, last: `AccountMenu` with `showName` (the name from `sm`), or the visitor's Sign in. */\n  account?: React.ReactNode;\n};\n\n/** The app's top bar: the name next to the rail, the mark on a phone, chips, then search · language · actions · messages · notifications · primary · account. */\nexport function AppHeader({ name, mark, href, homeLink, chips, search, language, actions, messages, notifications, primary, account, className, ...props }: AppHeaderProps) {\n  const brand = (\n    <>\n      {mark && <span data-brand-mark className={s.mark()}>{mark}</span>}\n      <span className={s.name()}>{name}</span>\n    </>\n  );\n  const hasControls = [search, language, actions, messages, notifications, primary, account].some(Boolean);\n  return (\n    <header className={s.root({ className })} {...props}>\n      {homeLink ? (\n        React.cloneElement(homeLink, { className: s.brand() }, brand)\n      ) : href ? (\n        <a href={href} className={s.brand()}>{brand}</a>\n      ) : (\n        <div className={s.brand()}>{brand}</div>\n      )}\n      {chips && <div className={s.chips()}>{chips}</div>}\n      {/* The order is the family's, not the host's: the same bar in every product. */}\n      {hasControls && (\n        <div className={s.actions()}>\n          {search && <div data-slot=\"search\" className={s.search()}>{search}</div>}\n          {language}\n          {actions}\n          {messages}\n          {notifications}\n          {primary}\n          {account}\n        </div>\n      )}\n    </header>\n  );\n}\n","// Server-safe: no hook. An icon control of the top bar with an unread count — messages, notifications. A link (`href`, your\n// router's `linkAs`) or a button (the trigger of the host's popover, through `asChild` of Radix: its props and ref are\n// spread here). The count is drawn as a small badge and said in the name: « Notifications, 3 new ».\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { countName, countText } from \"./count-text\";\n\nexport const appHeaderCount = tv({\n  slots: {\n    root:\n      \"relative inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-fg-secondary no-underline transition-colors \" +\n      \"hover:bg-surface-2 hover:text-fg aria-expanded:bg-surface-2 aria-expanded:text-fg aria-[current=page]:bg-surface-2 aria-[current=page]:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none\",\n    icon: \"inline-flex h-5 w-5 items-center justify-center [&>svg]:h-5 [&>svg]:w-5\",\n    count:\n      \"pointer-events-none absolute -right-0.5 -top-0.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-accent px-1 \" +\n      \"font-mono text-[10px] font-bold leading-none tabular-nums text-on-accent ring-2 ring-surface-1\",\n  },\n});\nconst s = appHeaderCount();\n\nexport type AppHeaderCountProps = Omit<React.ComponentProps<\"button\">, \"children\"> & {\n  /** What it is (« Notifications », « Messages ») — passed translated; its accessible name, with the count. */\n  label: string;\n  /** The icon (`<NotificationIcon />` of @krizaka/icons): decorative, the name is `label`. */\n  icon: React.ReactNode;\n  /** The unread count; 0 or absent draws no badge. */\n  count?: number;\n  /** The count in words, said after the label (« 3 new », « 3 nouvelles ») — passed translated, with its plural. Default: the number. */\n  countLabel?: string;\n  /**\n   * Above it the badge shows `max+`.\n   * @default 99\n   */\n  max?: number;\n  /** A link to the page (`/notifications`) instead of a button. */\n  href?: string;\n  /** Your router's link (Next's `Link`) for `href`; an `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /** The page is the one it leads to (`aria-current=\"page\"`). */\n  current?: boolean;\n};\n\n/** An icon button or link of the top bar with an unread count, the count announced in its name. */\nexport function AppHeaderCount({ label, icon, count, countLabel, max = 99, href, linkAs, current, className, type, ...props }: AppHeaderCountProps) {\n  const text = countText(count, max);\n  const shared = {\n    ...props,\n    \"aria-label\": countName(label, count, countLabel),\n    \"aria-current\": current ? (\"page\" as const) : undefined,\n    \"data-unread\": text ? \"\" : undefined,\n    className: s.root({ className }),\n  };\n  const children = (\n    <>\n      <span aria-hidden className={s.icon()}>{icon}</span>\n      {text && <span aria-hidden data-count className={s.count()}>{text}</span>}\n    </>\n  );\n  if (href) {\n    const Link = linkAs ?? \"a\";\n    return <Link href={href} {...shared}>{children}</Link>;\n  }\n  return <button type={type ?? \"button\"} {...shared}>{children}</button>;\n}\n","// Pure, no import: shared by the web's AppHeaderCount and the native one (src/native/app-header.tsx).\n\n/** What the badge shows: the count, or `max+` above `max`; nothing at 0. */\nexport function countText(count: number | undefined, max = 99): string | null {\n  if (!count || count <= 0 || !Number.isFinite(count)) return null;\n  return count > max ? `${max}+` : String(Math.floor(count));\n}\n\n/** The control's accessible name: the label alone, or the label and the count's words (« Notifications, 3 new »). */\nexport function countName(label: string, count: number | undefined, countLabel?: string): string {\n  if (!countText(count, Number.POSITIVE_INFINITY)) return label;\n  return `${label}, ${countLabel ?? String(Math.floor(count!))}`;\n}\n"],"mappings":";AAKA,YAAY,WAAW;AACvB,SAAS,UAAU;AA+Cf,mBACW,KADX;AA7CG,IAAM,YAAY,GAAG;AAAA,EAC1B,OAAO;AAAA,IACL,MAAM;AAAA;AAAA,IAEN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA;AAAA,IAEP,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AACF,CAAC;AACD,IAAM,IAAI,UAAU;AA8Bb,SAAS,UAAU,EAAE,MAAM,MAAM,MAAM,UAAU,OAAO,QAAQ,UAAU,SAAS,UAAU,eAAe,SAAS,SAAS,WAAW,GAAG,MAAM,GAAmB;AAC1K,QAAM,QACJ,iCACG;AAAA,YAAQ,oBAAC,UAAK,mBAAe,MAAC,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,IAC1D,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,KACnC;AAEF,QAAM,cAAc,CAAC,QAAQ,UAAU,SAAS,UAAU,eAAe,SAAS,OAAO,EAAE,KAAK,OAAO;AACvG,SACE,qBAAC,YAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC3C;AAAA,eACO,mBAAa,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,IAC1D,OACF,oBAAC,OAAE,MAAY,WAAW,EAAE,MAAM,GAAI,iBAAM,IAE5C,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAEnC,SAAS,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAE3C,eACC,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACvB;AAAA,gBAAU,oBAAC,SAAI,aAAU,UAAS,WAAW,EAAE,OAAO,GAAI,kBAAO;AAAA,MACjE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OACH;AAAA,KAEJ;AAEJ;;;AC/EA,SAAS,MAAAA,WAAU;;;ACDZ,SAAS,UAAU,OAA2B,MAAM,IAAmB;AAC5E,MAAI,CAAC,SAAS,SAAS,KAAK,CAAC,OAAO,SAAS,KAAK,EAAG,QAAO;AAC5D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,OAAO,KAAK,MAAM,KAAK,CAAC;AAC3D;AAGO,SAAS,UAAU,OAAe,OAA2B,YAA6B;AAC/F,MAAI,CAAC,UAAU,OAAO,OAAO,iBAAiB,EAAG,QAAO;AACxD,SAAO,GAAG,KAAK,KAAK,cAAc,OAAO,KAAK,MAAM,KAAM,CAAC,CAAC;AAC9D;;;AD2CI,qBAAAC,WACE,OAAAC,MADF,QAAAC,aAAA;AA/CG,IAAM,iBAAiBC,IAAG;AAAA,EAC/B,OAAO;AAAA,IACL,MACE;AAAA,IAGF,MAAM;AAAA,IACN,OACE;AAAA,EAEJ;AACF,CAAC;AACD,IAAMC,KAAI,eAAe;AAyBlB,SAAS,eAAe,EAAE,OAAO,MAAM,OAAO,YAAY,MAAM,IAAI,MAAM,QAAQ,SAAS,WAAW,MAAM,GAAG,MAAM,GAAwB;AAClJ,QAAM,OAAO,UAAU,OAAO,GAAG;AACjC,QAAM,SAAS;AAAA,IACb,GAAG;AAAA,IACH,cAAc,UAAU,OAAO,OAAO,UAAU;AAAA,IAChD,gBAAgB,UAAW,SAAmB;AAAA,IAC9C,eAAe,OAAO,KAAK;AAAA,IAC3B,WAAWA,GAAE,KAAK,EAAE,UAAU,CAAC;AAAA,EACjC;AACA,QAAM,WACJ,gBAAAF,MAAAF,WAAA,EACE;AAAA,oBAAAC,KAAC,UAAK,eAAW,MAAC,WAAWG,GAAE,KAAK,GAAI,gBAAK;AAAA,IAC5C,QAAQ,gBAAAH,KAAC,UAAK,eAAW,MAAC,cAAU,MAAC,WAAWG,GAAE,MAAM,GAAI,gBAAK;AAAA,KACpE;AAEF,MAAI,MAAM;AACR,UAAM,OAAO,UAAU;AACvB,WAAO,gBAAAH,KAAC,QAAK,MAAa,GAAG,QAAS,UAAS;AAAA,EACjD;AACA,SAAO,gBAAAA,KAAC,YAAO,MAAM,QAAQ,UAAW,GAAG,QAAS,UAAS;AAC/D;","names":["tv","Fragment","jsx","jsxs","tv","s"]}

package/dist/app-shell.js

@@ -2,6 +2,9 @@
 import {
   SkipLink
 } from "./chunk-4QH6CP2Y.js";
+import {
+  Kbd
+} from "./chunk-KID32IRJ.js";
 import {
   ChevronGlyph,
   CloseGlyph,
@@ -14,19 +17,7 @@ import {
 // src/app-shell/app-shell.tsx
 import { Dialog as DialogPrimitive, Slot } from "radix-ui";
 import * as React3 from "react";
-import { tv as tv2 } from "tailwind-variants";
-
-// src/kbd/kbd.tsx
 import { tv } from "tailwind-variants";
-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";
@@ -126,8 +117,8 @@ function useShortcuts(map, { enabled = true, timeout = 900 } = {}) {
 }
 
 // src/app-shell/app-shell.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var appShell = tv2({
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var appShell = tv({
   slots: {
     root: "flex min-h-dvh w-full bg-surface-0 text-fg data-desktop:h-[var(--kz-window-height,100dvh)] data-desktop:overflow-hidden",
     sidebar: "sticky top-0 hidden h-dvh shrink-0 flex-col overflow-x-clip 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] [[data-desktop]_&]:static [[data-desktop]_&]:flex [[data-desktop]_&]:h-auto [[data-desktop]_&]:w-60 [[data-desktop]_&]:select-none [[data-desktop]_&]:data-collapsed:w-[4.75rem]",
@@ -176,8 +167,8 @@ function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onColla
   );
   const value = React3.useMemo(() => ({ collapsed, setCollapsed, open, setOpen, inDrawer: false, desktop }), [collapsed, setCollapsed, open, desktop]);
   useShortcuts(collapseShortcut ? { [collapseShortcut]: () => setCollapsed(!collapsed) } : {});
-  return /* @__PURE__ */ jsx2(ShellContext.Provider, { value, children: /* @__PURE__ */ jsxs("div", { "data-desktop": desktop ? "" : void 0, className: s.root({ className }), ...props, children: [
-    skipLabel && /* @__PURE__ */ jsx2(SkipLink, { href: "#content", children: skipLabel }),
+  return /* @__PURE__ */ jsx(ShellContext.Provider, { value, children: /* @__PURE__ */ jsxs("div", { "data-desktop": desktop ? "" : void 0, className: s.root({ className }), ...props, children: [
+    skipLabel && /* @__PURE__ */ jsx(SkipLink, { href: "#content", children: skipLabel }),
     children
   ] }) });
 }
@@ -185,17 +176,17 @@ function SidebarContent({ brand, children, footer, collapseLabels, closeLabel })
   const { collapsed, setCollapsed, inDrawer, desktop } = useShell();
   const drag = desktop ? { "data-tauri-drag-region": "" } : {};
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    desktop && /* @__PURE__ */ jsx2("div", { "aria-hidden": true, className: s.titlebar(), ...drag }),
+    desktop && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.titlebar(), ...drag }),
     /* @__PURE__ */ jsxs("div", { className: s.brand(), ...drag, children: [
       brand,
-      inDrawer && /* @__PURE__ */ jsx2(DialogPrimitive.Close, { className: cn(s.menuButton(), "ml-auto flex"), "aria-label": closeLabel, children: /* @__PURE__ */ jsx2(CloseGlyph, { className: "h-4 w-4" }) })
+      inDrawer && /* @__PURE__ */ jsx(DialogPrimitive.Close, { className: cn(s.menuButton(), "ml-auto flex"), "aria-label": closeLabel, children: /* @__PURE__ */ jsx(CloseGlyph, { className: "h-4 w-4" }) })
     ] }),
-    /* @__PURE__ */ jsx2("div", { className: s.nav(), children }),
+    /* @__PURE__ */ jsx("div", { className: s.nav(), children }),
     (footer || collapseLabels && !inDrawer) && /* @__PURE__ */ jsxs("div", { className: s.footer(), children: [
-      footer && /* @__PURE__ */ jsx2("div", { className: s.footerContent(), children: footer }),
+      footer && /* @__PURE__ */ jsx("div", { className: s.footerContent(), children: footer }),
       collapseLabels && !inDrawer && /* @__PURE__ */ jsxs("button", { type: "button", className: s.collapse(), "aria-expanded": !collapsed, onClick: () => setCollapsed(!collapsed), children: [
-        /* @__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] })
+        /* @__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] })
       ] })
     ] })
   ] });
@@ -204,18 +195,18 @@ function AppShellSidebar({ label, brand, children, footer, collapseLabels, close
   const shell = useShell();
   const content = { brand, children, footer, collapseLabels, closeLabel };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2("nav", { "aria-label": label, "data-collapsed": shell.collapsed ? "" : void 0, className: s.sidebar({ className }), ...props, children: /* @__PURE__ */ jsx2(SidebarContent, { ...content }) }),
-    !shell.desktop && /* @__PURE__ */ jsx2(DialogPrimitive.Root, { open: shell.open, onOpenChange: shell.setOpen, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
-      /* @__PURE__ */ jsx2(DialogPrimitive.Overlay, { className: s.overlay() }),
+    /* @__PURE__ */ jsx("nav", { "aria-label": label, "data-collapsed": shell.collapsed ? "" : void 0, className: s.sidebar({ className }), ...props, children: /* @__PURE__ */ jsx(SidebarContent, { ...content }) }),
+    !shell.desktop && /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: shell.open, onOpenChange: shell.setOpen, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+      /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: s.overlay() }),
       /* @__PURE__ */ jsxs(DialogPrimitive.Content, { className: s.drawer(), "aria-describedby": void 0, children: [
-        /* @__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 }) }) })
+        /* @__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 }) }) })
       ] })
     ] }) })
   ] });
 }
 function AppShellGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx2("p", { className: s.group({ className }), ...props });
+  return /* @__PURE__ */ jsx("p", { className: s.group({ className }), ...props });
 }
 function AppShellItem({ icon, label, current, badge, shortcut, asChild, children, className, ...props }) {
   const { collapsed, inDrawer } = useShell();
@@ -225,36 +216,36 @@ function AppShellItem({ icon, label, current, badge, shortcut, asChild, children
   const Comp = asChild ? Slot.Root : "a";
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon,
-    /* @__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
+    /* @__PURE__ */ jsx("span", { className: s.itemLabel(), children: label }),
+    badge != null && /* @__PURE__ */ jsx("span", { className: s.itemBadge(), children: badge }),
+    shortcut && !inDrawer ? /* @__PURE__ */ jsx("span", { className: s.itemHint(), "aria-hidden": true, children: formatShortcut(shortcut, apple).map((key) => /* @__PURE__ */ jsx(Kbd, { size: "sm", children: key }, key)) }) : null
   ] });
-  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 });
+  return /* @__PURE__ */ jsx(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__ */ jsx2("div", { className: s.body({ className }), ...props });
+  return /* @__PURE__ */ jsx("div", { className: s.body({ className }), ...props });
 }
 function AppShellHeader({ title, menuLabel, actions, className, children, ...props }) {
   const { open, setOpen, desktop } = useShell();
   const drag = desktop ? { "data-tauri-drag-region": "" } : {};
   return /* @__PURE__ */ jsxs("header", { className: s.header({ className }), ...drag, ...props, children: [
-    /* @__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(), ...drag, children: title }),
+    /* @__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(), ...drag, children: title }),
     children,
-    actions && /* @__PURE__ */ jsx2("div", { className: s.actions(), children: actions })
+    actions && /* @__PURE__ */ jsx("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)) })
+    /* @__PURE__ */ jsx(SearchGlyph, {}),
+    /* @__PURE__ */ jsx("span", { className: s.searchLabel(), children: label }),
+    /* @__PURE__ */ jsx("span", { className: s.searchKeys(), "aria-hidden": true, children: formatShortcut(shortcut, apple).map((key) => /* @__PURE__ */ jsx(Kbd, { size: "sm", children: key }, key)) })
   ] });
 }
 function AppShellMain({ className, ...props }) {
-  return /* @__PURE__ */ jsx2("main", { id: "content", tabIndex: -1, className: s.main({ className }), ...props });
+  return /* @__PURE__ */ jsx("main", { id: "content", tabIndex: -1, className: s.main({ className }), ...props });
 }
 var AppShell = {
   Root: AppShellRoot,