@krizaka/ui 2.6.0 → 2.9.0

package/README.md

@@ -9,7 +9,7 @@
 
 **The Krizaka front-end platform's components, shared by every product.**
 The primitives (button, badge, avatar, field, theme, countdown…) on the semantic `--kz-*` tokens, the animated marks
-of Krizaka, Orazaka and Orochia, and the Krizaka motion signature — one easing, one way to enter, reveal, roll, shine
+of Krizaka, Orazaka, Orochia and Yazakia, and the Krizaka motion signature — one easing, one way to enter, reveal, roll, shine
 and open.
 
 [![npm](https://img.shields.io/npm/v/@krizaka/ui?color=196df5&label=npm)](https://www.npmjs.com/package/@krizaka/ui)
@@ -160,10 +160,19 @@ light or a product's — is a set of tokens.
 | `@krizaka/ui/stepper` | `Stepper` (`steps`: `title`, `description`, `status`, `value`, `content`; `current`, `labels` of the states, `orientation`) | server |
 | `@krizaka/ui/number-ticker` | `NumberTicker` (`value`, `locale`, `format`, `trigger` view·change, `duration`, `announce`, `align`) | client |
 | `@krizaka/ui/terminal-replay` | `TerminalReplay` (`steps` command + output lines with a tone, `label`, `title`, `prompt`, `playLabel`/`pauseLabel`/`replayLabel`, `copyLabel`/`copiedLabel`, `typingSpeed`, `lineDelay`, `stepDelay`, `rows`, `autoPlay`) | client |
+| `@krizaka/ui/scroll-stage` | `ScrollStage` (`variant`, `threshold`, `as`) and `Scene` (`brand`, `as`): chapters played once as they scroll in, one loop each while on screen — the storytelling kit, styles in `@krizaka/ui/story.css` | client |
+| `@krizaka/ui/choice-grid` | `ChoiceGrid` (`items` with `badge`/`eyebrow`/`extra`/`meta`/`href`, `label`, `tag`, `caption`, `prompt`, `value`/`defaultValue`/`onValueChange`, `linkAs`, `columns`, `variant`, `brand`): choices as tiles — a radio group when selectable, links with `href` | client |
+| `@krizaka/ui/profile-card` | `ProfileCard` (`visual`, `name`, `statLabel`/`value`/`figure`, `stats`, `caption`, `variant`, `brand`): a profile at a glance; `StatGauge` (`label`, `value`, `max`, `valueText`, `figure`): one measured strength; native too | server |
+| `@krizaka/ui/stage-banner` | `StageBanner` (`stage`, `name`, `size="lg"` with `title`/`subtitle`, `variant`) | server |
+| `@krizaka/ui/goal-gauge` | `GoalGauge` (`label`, `segments`, `value`, `mode` fill · drain, `variant`): a goal in steps, a meter; native too | server |
+| `@krizaka/ui/promise-card` | `PromiseCard` (`label`, `promise`, `keys`, `bearer`, `bearerLabel`, `bearerName`, `variant`): a promise, the keys that call it, who carries it | server |
+| `@krizaka/ui/continue-prompt` | `ContinuePrompt` (`title`, `count`/`countdown`, children, `actionLabel`, `onAction`/`href`, `actionKey`, `highlight`, `hint`, `status`, `variant`) | server |
+| `@krizaka/ui/achievement` | `Achievement` (`title`, `eyebrow`, `badge`, `replaced`, `locked`), `AchievementList`, `Emblem` (`sword` · `mirror` · `jewel`) | server |
+| `@krizaka/ui/landscape` | `Landscape` (`tone` own · brand, `flock`, `phoenix`, `animated`, `position`, `fade`): the Krizaka valley at dusk, decorative | client |
 | `@krizaka/ui/glow-card` | `GlowCard` (`glow` border·spotlight·both, `alive`, `asChild`) | client |
 | `@krizaka/ui/marquee` | `Marquee` (`label`, `pauseLabel`, `playLabel`, `speed` px/s, `direction`, `fade`, `defaultPaused`) | client |
 | `@krizaka/ui/section-backdrop` | `SectionBackdrop` (`as`, `direction` down·up, `dome`, `grid`, `media` blurred for depth of field, `animated`): a page section on the brand's section gradient — see `@krizaka/tokens` BRAND.md, "Visual language" | server |
-| `@krizaka/ui/mascots` | `Mascot` (`bird` falcon·owl·duck·flamingo·pigeon, `mood` welcome·thinking·success·empty·error, `tone` brand·own, `size`, `animated`, `title`), `MASCOT_BIRDS`, `MASCOT_MOODS`: the Krizaka flock, in the host brand's accent — one bird at a moment that matters (onboarding, a long wait, a success, an empty list, an error); native `Mascot` in `/native` | client |
+| `@krizaka/ui/mascots` | `Mascot` (`bird` falcon·owl·duck·flamingo·pigeon·lovebird, `mood` welcome·thinking·success·empty·error, `tone` brand·own, `size`, `animated`, `title`), `MASCOT_BIRDS`, `MASCOT_MOODS`: the Krizaka flock, in the host brand's accent — one bird at a moment that matters (onboarding, a long wait, a success, an empty list, an error); native `Mascot` in `/native` | client |
 | `@krizaka/ui/iso` | the isometric kit: `IsoHub` (a hero driven by data: `layers`, `dome`, `satellites`, `highlight`), `IsoScene`, `IsoPrism`, `IsoStack`, `IsoDome`, `IsoTile`, `IsoLink`, `IsoNode`, `IsoLabel`, the projection helpers — static SVG animated by motion.css | server |
 | `@krizaka/ui/motion` | `MotionObserver` (reveal, off-screen pause, settle, spotlight, magnetism) and `RotatingWord` (no layout shift) | client |
 | `@krizaka/ui/pagination` | `Pagination` (pages: `page`, `pageCount`, `onPageChange` or `getHref` for links; cursor: `hasPrevious`/`hasNext`, `onPrevious`/`onNext`; `status`, `pageSize` + `pageSizeOptions`, `siblings`, `boundaries`, `labels`; folds into "Page 3 of 12" in a narrow container), `pageRange` | server |
@@ -191,6 +200,14 @@ light or a product's — is a set of tokens.
 | `@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/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 |
+| `@krizaka/ui/detail-layout` | `DetailLayout` (`back`, `media`, `eyebrow`, `title`, `status`, `meta`, `actions`, `tabs`, `aside`) | server |
+| `@krizaka/ui/split-view` | `SplitView` (`listTitle`, `listActions`, `list`, `detailHead`, `detail`, `empty`, `showDetail`, `back`) | server |
+| `@krizaka/ui/marketing-layout` | `MarketingLayout` (`header`, `footer`, `skipLabel`) | server |
+| `@krizaka/ui/docs-layout` | `DocsLayout` (`sidebar`, `sidebarLabel`, `toc`) | server |
 | `@krizaka/ui/native/video-player` | React Native `VideoPlayer` on expo-video (optional peer) | native |
 | `@krizaka/ui/native/media-capture` | React Native `MediaCapture` on expo-camera (optional peer) | native |
 | `@krizaka/ui` | the marks, `MotionObserver`, `RotatingWord`, `cx` (unchanged) | client |
@@ -243,6 +260,21 @@ import { LinkCard } from "@krizaka/ui/link-card";
 - **Motion.** `reveal` uses `[data-reveal]` (MotionObserver): never on the first screen. The pointer's light, the lifts
   and the hops stop under `prefers-reduced-motion`; nothing loops.
 
+## Layouts and templates
+
+> Category **layouts** of krizaka.com/docs/ui, 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`
+(a grid of widgets), `SettingsLayout`, `AuthLayout`, `DetailLayout`, `SplitView`, and for a site `MarketingLayout` and
+`DocsLayout`. Every layout is responsive by construction — one column, a drawer, chips or a disclosure on a phone.
+
+A **template** is an example flagged `template: true` in its layout's `meta.ts` (≤ 160 lines): a complete screen with
+real words — Orochia's creator studio, Orazaka's console for Eric, an administration console, sign-in, onboarding,
+settings, a video's page, messages, a product page, pricing and credits, a documentation hub. Each has a phone story
+(`parameters.phone`: captured at 390 × 844). Copy one into the product, keep its structure, change the words. The
+React Native shells are `@krizaka/ui/native`'s (DS4): same names where the concept is the same.
+
 ## 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
@@ -335,7 +367,7 @@ const { theme, scheme, mode, setMode, radius } = useTheme(); // theme.surface1,
 | `Segmented` | `options` (`value`, `label`, `disabled`), `value`, `onValueChange`, `size` | The web `Tabs variant="segmented"` (a tab list). To filter, `Chip.Group`. |
 | `Progress` | `variant` bar·ring, `size`, `value`/`max`, `label`, `valueText`, a ring's centre as children | The fill is the `accent` → `accent2` gradient (react-native-svg); it animates to each new value. |
 | `Toaster`, `toast` | `toast(title, { description, tone, icon, action, onPress, id, duration, onDismiss })`, `toast.success/warning/error/info`, `toast.dismiss(id?)`; `Toaster closeLabel position offset duration max` | No sonner: a light queue of its own. `offset` takes the safe-area inset (no safe-area dependency). |
-| `KrizakaMark`, `OrazakaMark`, `OrochiaMark`, `ProductMark` (`id`) | `size`, `animated`, `title`, `neutral` (default `theme.textMuted`) | The brand marks, drawn with react-native-svg from the web marks' geometry. |
+| `KrizakaMark`, `OrazakaMark`, `OrochiaMark`, `YazakiaMark`, `ProductMark` (`id`) | `size`, `animated`, `title`, `neutral` (default `theme.textMuted`) | The brand marks, drawn with react-native-svg from the web marks' geometry. |
 
 Every animation (skeleton, badge dot, urgent countdown, progress, toast entrance, the marks) stops when the system
 asks to reduce motion (`useReducedMotion()`). Accessibility goes through `role` and `aria-*` (RN ≥ 0.71): headings,
@@ -365,11 +397,12 @@ Testing Library (`src/native/*.test.tsx`); `scripts/native-dist.mjs` checks that
 ## The marks
 
 ```tsx
-import { KrizakaLogo, OrazakaLogo, OrochiaLogo, ProductLogo } from "@krizaka/ui";
+import { KrizakaLogo, OrazakaLogo, OrochiaLogo, ProductLogo, YazakiaLogo } from "@krizaka/ui";
 
 <OrochiaLogo size={36} />                       // decorative (aria-hidden)
 <KrizakaLogo size={48} title="Krizaka" />       // an image with an accessible name
 <ProductLogo id="orazaka" animated={false} />   // by id, still
+<YazakiaLogo size={32} />                       // Yazakia: emerald → turquoise, two voices that meet
 ```
 
 Neutral strokes follow the host's `--kz-*` tokens when they exist (`--kz-border-strong`, `--kz-text-muted`…) and the

package/dist/achievement.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { S as StoryVariant } from './story-variant-CLn4H5Nt.js';
+
+type AchievementProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** What was achieved: the outcome, in a few words. */
+    title: React.ReactNode;
+    /** A small line above: its number, its kind (“Milestone 03”). */
+    eyebrow?: React.ReactNode;
+    /** A glyph before the eyebrow (an `Emblem`, an icon). Decorative. */
+    icon?: React.ReactNode;
+    /** The badge in the corner (“Done”, “Unlocked”, arcade “Sealed”). */
+    badge?: React.ReactNode;
+    /** What it replaced or overcame, struck through above the title (“Paying 30 % to a platform”). */
+    replaced?: React.ReactNode;
+    /** Not reached yet: muted, its badge neutral. Say it in the badge too (“Locked”). */
+    locked?: boolean;
+    /**
+     * `default`: a calm badge. `arcade`: a mono stamp that slams onto the card.
+     * @default "default"
+     */
+    variant?: StoryVariant;
+    /** A brand scope (`orochia` → `.brand-orochia`). */
+    brand?: string;
+};
+/** Something done: an eyebrow, a badge, what it replaced (struck through) and the outcome. */
+declare function Achievement({ title, eyebrow, icon, badge, replaced, locked, variant, brand, className, ...props }: AchievementProps): React.JSX.Element;
+type AchievementListProps = React.OlHTMLAttributes<HTMLOListElement> & {
+    /** The `Achievement`s, in order: each one becomes an item of the list (its badge arrives after the previous one's). */
+    children: React.ReactNode;
+    /**
+     * The narrowest a card gets before the grid drops a column.
+     * @default "220px"
+     */
+    minWidth?: string;
+    /** The look of every card: `default` or `arcade`. */
+    variant?: StoryVariant;
+    /** A brand scope (`orochia` → `.brand-orochia`). */
+    brand?: string;
+};
+/** An ordered list of `Achievement`s on one grid of hairlines. */
+declare function AchievementList({ children, minWidth, variant, brand, className, style, ...props }: AchievementListProps): React.JSX.Element;
+type EmblemProps = Omit<React.SVGProps<SVGSVGElement>, "children"> & {
+    /** The emblem: `sword` (courage, the first step), `mirror` (clarity, honesty), `jewel` (care, what is kept). */
+    kind: "sword" | "mirror" | "jewel";
+    /**
+     * Width and height in pixels.
+     * @default 20
+     */
+    size?: number;
+};
+/** Three line emblems for achievements and choices (`currentColor`, decorative). */
+declare function Emblem({ kind, size, ...props }: EmblemProps): React.JSX.Element;
+
+export { Achievement, AchievementList, type AchievementListProps, type AchievementProps, Emblem, type EmblemProps };

package/dist/achievement.js

@@ -0,0 +1,73 @@
+import {
+  brandClass,
+  cn,
+  storyVariantClass
+} from "./chunk-VCAAHCHL.js";
+
+// src/achievement/achievement.tsx
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Achievement({ title, eyebrow, icon, badge, replaced, locked, variant, brand, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { "data-locked": locked ? "" : void 0, className: cn("kzs-achievement", storyVariantClass(variant), brandClass(brand), className), ...props, children: [
+    (eyebrow || badge || icon) && /* @__PURE__ */ jsxs("div", { className: "kzs-achievement-head", children: [
+      /* @__PURE__ */ jsxs("span", { className: "kzs-achievement-eyebrow", children: [
+        icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: icon }),
+        eyebrow
+      ] }),
+      badge && /* @__PURE__ */ jsx("span", { className: "kzs-achievement-badge", children: badge })
+    ] }),
+    replaced && /* @__PURE__ */ jsx("del", { className: "kzs-achievement-replaced", style: { textDecorationLine: "line-through" }, children: replaced }),
+    /* @__PURE__ */ jsx("p", { className: "kzs-achievement-title", children: title })
+  ] });
+}
+function AchievementList({ children, minWidth, variant, brand, className, style, ...props }) {
+  const items = React.Children.toArray(children);
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: cn("kzs-achievements", storyVariantClass(variant), brandClass(brand), className),
+      style: minWidth ? { "--kzs-min": minWidth, ...style } : style,
+      ...props,
+      children: items.map((child, i) => /* @__PURE__ */ jsx("li", { style: { "--i": i }, children: child }, React.isValidElement(child) && child.key != null ? child.key : i))
+    }
+  );
+}
+function Emblem({ kind, size = 20, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 48 48",
+      width: size,
+      height: size,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.4,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      focusable: "false",
+      ...props,
+      children: [
+        kind === "sword" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("path", { d: "M24 3 L27 28 L24 36 L21 28 Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M15 30 H33 M24 36 V45" })
+        ] }),
+        kind === "mirror" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "17" }),
+          /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "9" }),
+          /* @__PURE__ */ jsx("path", { d: "M24 2 V6 M24 42 V46 M2 24 H6 M42 24 H46" })
+        ] }),
+        kind === "jewel" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("path", { d: "M31 10 a13 13 0 1 1 -15 19 a8 8 0 0 0 8 -9 a8 8 0 0 1 7 -10 Z" }),
+          /* @__PURE__ */ jsx("circle", { cx: "29", cy: "17", r: "2.6", fill: "currentColor", stroke: "none" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Achievement,
+  AchievementList,
+  Emblem
+};
+//# sourceMappingURL=achievement.js.map

package/dist/achievement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/achievement/achievement.tsx"],"sourcesContent":["// Server-safe. Something done, and what it replaced (story.css): a milestone reached, a dare completed, a problem out of\n// the way. A list of them shares one grid of hairlines; in a `Scene` of a `ScrollStage` their badges arrive one by one.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport type AchievementProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> & {\n  /** What was achieved: the outcome, in a few words. */\n  title: React.ReactNode;\n  /** A small line above: its number, its kind (“Milestone 03”). */\n  eyebrow?: React.ReactNode;\n  /** A glyph before the eyebrow (an `Emblem`, an icon). Decorative. */\n  icon?: React.ReactNode;\n  /** The badge in the corner (“Done”, “Unlocked”, arcade “Sealed”). */\n  badge?: React.ReactNode;\n  /** What it replaced or overcame, struck through above the title (“Paying 30 % to a platform”). */\n  replaced?: React.ReactNode;\n  /** Not reached yet: muted, its badge neutral. Say it in the badge too (“Locked”). */\n  locked?: boolean;\n  /**\n   * `default`: a calm badge. `arcade`: a mono stamp that slams onto the card.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /** A brand scope (`orochia` → `.brand-orochia`). */\n  brand?: string;\n};\n\n/** Something done: an eyebrow, a badge, what it replaced (struck through) and the outcome. */\nexport function Achievement({ title, eyebrow, icon, badge, replaced, locked, variant, brand, className, ...props }: AchievementProps) {\n  return (\n    <div data-locked={locked ? \"\" : undefined} className={cn(\"kzs-achievement\", storyVariantClass(variant), brandClass(brand), className)} {...props}>\n      {(eyebrow || badge || icon) && (\n        <div className=\"kzs-achievement-head\">\n          <span className=\"kzs-achievement-eyebrow\">\n            {icon && <span aria-hidden>{icon}</span>}\n            {eyebrow}\n          </span>\n          {badge && <span className=\"kzs-achievement-badge\">{badge}</span>}\n        </div>\n      )}\n      {replaced && (\n        <del className=\"kzs-achievement-replaced\" style={{ textDecorationLine: \"line-through\" }}>\n          {replaced}\n        </del>\n      )}\n      <p className=\"kzs-achievement-title\">{title}</p>\n    </div>\n  );\n}\n\nexport type AchievementListProps = React.OlHTMLAttributes<HTMLOListElement> & {\n  /** The `Achievement`s, in order: each one becomes an item of the list (its badge arrives after the previous one's). */\n  children: React.ReactNode;\n  /**\n   * The narrowest a card gets before the grid drops a column.\n   * @default \"220px\"\n   */\n  minWidth?: string;\n  /** The look of every card: `default` or `arcade`. */\n  variant?: StoryVariant;\n  /** A brand scope (`orochia` → `.brand-orochia`). */\n  brand?: string;\n};\n\n/** An ordered list of `Achievement`s on one grid of hairlines. */\nexport function AchievementList({ children, minWidth, variant, brand, className, style, ...props }: AchievementListProps) {\n  const items = React.Children.toArray(children);\n  return (\n    <ol\n      className={cn(\"kzs-achievements\", storyVariantClass(variant), brandClass(brand), className)}\n      style={minWidth ? ({ \"--kzs-min\": minWidth, ...style } as React.CSSProperties) : style}\n      {...props}\n    >\n      {items.map((child, i) => (\n        <li key={React.isValidElement(child) && child.key != null ? child.key : i} style={{ \"--i\": i } as React.CSSProperties}>\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n}\n\nexport type EmblemProps = Omit<React.SVGProps<SVGSVGElement>, \"children\"> & {\n  /** The emblem: `sword` (courage, the first step), `mirror` (clarity, honesty), `jewel` (care, what is kept). */\n  kind: \"sword\" | \"mirror\" | \"jewel\";\n  /**\n   * Width and height in pixels.\n   * @default 20\n   */\n  size?: number;\n};\n\n/** Three line emblems for achievements and choices (`currentColor`, decorative). */\nexport function Emblem({ kind, size = 20, ...props }: EmblemProps) {\n  return (\n    <svg\n      viewBox=\"0 0 48 48\"\n      width={size}\n      height={size}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2.4}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n      {...props}\n    >\n      {kind === \"sword\" && (\n        <>\n          <path d=\"M24 3 L27 28 L24 36 L21 28 Z\" />\n          <path d=\"M15 30 H33 M24 36 V45\" />\n        </>\n      )}\n      {kind === \"mirror\" && (\n        <>\n          <circle cx=\"24\" cy=\"24\" r=\"17\" />\n          <circle cx=\"24\" cy=\"24\" r=\"9\" />\n          <path d=\"M24 2 V6 M24 42 V46 M2 24 H6 M42 24 H46\" />\n        </>\n      )}\n      {kind === \"jewel\" && (\n        <>\n          <path d=\"M31 10 a13 13 0 1 1 -15 19 a8 8 0 0 0 8 -9 a8 8 0 0 1 7 -10 Z\" />\n          <circle cx=\"29\" cy=\"17\" r=\"2.6\" fill=\"currentColor\" stroke=\"none\" />\n        </>\n      )}\n    </svg>\n  );\n}\n"],"mappings":";;;;;;;AAEA,YAAY,WAAW;AAiCb,SA4EF,UA3Ea,KADX;AALH,SAAS,YAAY,EAAE,OAAO,SAAS,MAAM,OAAO,UAAU,QAAQ,SAAS,OAAO,WAAW,GAAG,MAAM,GAAqB;AACpI,SACE,qBAAC,SAAI,eAAa,SAAS,KAAK,QAAW,WAAW,GAAG,mBAAmB,kBAAkB,OAAO,GAAG,WAAW,KAAK,GAAG,SAAS,GAAI,GAAG,OACvI;AAAA,gBAAW,SAAS,SACpB,qBAAC,SAAI,WAAU,wBACb;AAAA,2BAAC,UAAK,WAAU,2BACb;AAAA,gBAAQ,oBAAC,UAAK,eAAW,MAAE,gBAAK;AAAA,QAChC;AAAA,SACH;AAAA,MACC,SAAS,oBAAC,UAAK,WAAU,yBAAyB,iBAAM;AAAA,OAC3D;AAAA,IAED,YACC,oBAAC,SAAI,WAAU,4BAA2B,OAAO,EAAE,oBAAoB,eAAe,GACnF,oBACH;AAAA,IAEF,oBAAC,OAAE,WAAU,yBAAyB,iBAAM;AAAA,KAC9C;AAEJ;AAiBO,SAAS,gBAAgB,EAAE,UAAU,UAAU,SAAS,OAAO,WAAW,OAAO,GAAG,MAAM,GAAyB;AACxH,QAAM,QAAc,eAAS,QAAQ,QAAQ;AAC7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,oBAAoB,kBAAkB,OAAO,GAAG,WAAW,KAAK,GAAG,SAAS;AAAA,MAC1F,OAAO,WAAY,EAAE,aAAa,UAAU,GAAG,MAAM,IAA4B;AAAA,MAChF,GAAG;AAAA,MAEH,gBAAM,IAAI,CAAC,OAAO,MACjB,oBAAC,QAA0E,OAAO,EAAE,OAAO,EAAE,GAC1F,mBADY,qBAAe,KAAK,KAAK,MAAM,OAAO,OAAO,MAAM,MAAM,CAExE,CACD;AAAA;AAAA,EACH;AAEJ;AAaO,SAAS,OAAO,EAAE,MAAM,OAAO,IAAI,GAAG,MAAM,GAAgB;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MACX,WAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA,iBAAS,WACR,iCACE;AAAA,8BAAC,UAAK,GAAE,gCAA+B;AAAA,UACvC,oBAAC,UAAK,GAAE,yBAAwB;AAAA,WAClC;AAAA,QAED,SAAS,YACR,iCACE;AAAA,8BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,UAC/B,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI;AAAA,UAC9B,oBAAC,UAAK,GAAE,2CAA0C;AAAA,WACpD;AAAA,QAED,SAAS,WACR,iCACE;AAAA,8BAAC,UAAK,GAAE,iEAAgE;AAAA,UACxE,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM,MAAK,gBAAe,QAAO,QAAO;AAAA,WACpE;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/app-shell.d.ts

@@ -0,0 +1,203 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const appShell: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            drawer?: tailwind_variants.ClassValue;
+            overlay?: tailwind_variants.ClassValue;
+            brand?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            itemLabel?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            sidebar?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            itemBadge?: tailwind_variants.ClassValue;
+            collapse?: tailwind_variants.ClassValue;
+            menuButton?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            drawer?: tailwind_variants.ClassValue;
+            overlay?: tailwind_variants.ClassValue;
+            brand?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            itemLabel?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            sidebar?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            itemBadge?: tailwind_variants.ClassValue;
+            collapse?: tailwind_variants.ClassValue;
+            menuButton?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    sidebar: string;
+    drawer: string;
+    overlay: string;
+    brand: string;
+    nav: string;
+    group: string;
+    item: string;
+    itemLabel: string;
+    itemBadge: string;
+    footer: string;
+    collapse: string;
+    body: string;
+    header: string;
+    menuButton: string;
+    title: string;
+    actions: string;
+    main: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            drawer?: tailwind_variants.ClassValue;
+            overlay?: tailwind_variants.ClassValue;
+            brand?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            itemLabel?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            sidebar?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            itemBadge?: tailwind_variants.ClassValue;
+            collapse?: tailwind_variants.ClassValue;
+            menuButton?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    sidebar: string;
+    drawer: string;
+    overlay: string;
+    brand: string;
+    nav: string;
+    group: string;
+    item: string;
+    itemLabel: string;
+    itemBadge: string;
+    footer: string;
+    collapse: string;
+    body: string;
+    header: string;
+    menuButton: string;
+    title: string;
+    actions: string;
+    main: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    sidebar: string;
+    drawer: string;
+    overlay: string;
+    brand: string;
+    nav: string;
+    group: string;
+    item: string;
+    itemLabel: string;
+    itemBadge: string;
+    footer: string;
+    collapse: string;
+    body: string;
+    header: string;
+    menuButton: string;
+    title: string;
+    actions: string;
+    main: string;
+}>>;
+type AppShellRootProps = React.ComponentProps<"div"> & {
+    /** The sidebar starts collapsed to its icons (desktop). */
+    defaultCollapsed?: boolean;
+    /** Controlled collapse (desktop): pair with `onCollapsedChange` to persist the choice. */
+    collapsed?: boolean;
+    /** Called when the sidebar collapses or expands. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+};
+/** The shell: holds the collapse (desktop) and the drawer (phone) state. Children: Sidebar, then Body. */
+declare function AppShellRoot({ defaultCollapsed, collapsed: controlled, onCollapsedChange, className, ...props }: AppShellRootProps): React.JSX.Element;
+type AppShellSidebarProps = Omit<React.ComponentProps<"nav">, "children"> & {
+    /** The navigation's accessible name (`Studio`, `Administration`). */
+    label: string;
+    /** The brand at the top: the product's mark and name (a link home through `asChild` of your router, or plain). */
+    brand?: React.ReactNode;
+    /** The sections: `AppShell.Group` and `AppShell.Item`. */
+    children: React.ReactNode;
+    /** At the bottom, above the collapse button: the account, a plan, the version. */
+    footer?: React.ReactNode;
+    /** The collapse button's words, `[collapse, expand]` (desktop only). Without it the sidebar cannot collapse. */
+    collapseLabels?: readonly [string, string];
+    /** The drawer's close button words (phone). */
+    closeLabel: string;
+};
+/** The sidebar: on a desktop a column that collapses to its icons; on a phone the same content in a drawer. */
+declare function AppShellSidebar({ label, brand, children, footer, collapseLabels, closeLabel, className, ...props }: AppShellSidebarProps): React.JSX.Element;
+type AppShellGroupProps = React.ComponentProps<"p"> & {
+    /** The group's name, above its items (hidden when the sidebar is collapsed). */
+    children: React.ReactNode;
+};
+/** A heading between groups of items. */
+declare function AppShellGroup({ className, ...props }: AppShellGroupProps): React.JSX.Element;
+type AppShellItemProps = Omit<React.ComponentProps<"a">, "children"> & {
+    /** The item's icon (a signature icon): it stays when the sidebar collapses. */
+    icon?: React.ReactNode;
+    /** Its words: the accessible name, hidden visually when collapsed (the icon carries a tooltip through `title`). */
+    label: string;
+    /** The screen it opens is the current one: `aria-current="page"`. */
+    current?: boolean;
+    /** A count beside it (unread, pending): a number or a few characters. */
+    badge?: React.ReactNode;
+    /** 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;
+/** 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"> & {
+    /** The screen's title (an `h1`). */
+    title?: React.ReactNode;
+    /** The button that opens the drawer on a phone: its words. */
+    menuLabel: string;
+    /** The screen's actions, on the right. */
+    actions?: React.ReactNode;
+};
+/** 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;
+/** The screen's content. */
+declare function AppShellMain({ className, ...props }: React.ComponentProps<"main">): React.JSX.Element;
+declare const AppShell: {
+    Root: typeof AppShellRoot;
+    Sidebar: typeof AppShellSidebar;
+    Group: typeof AppShellGroup;
+    Item: typeof AppShellItem;
+    Body: typeof AppShellBody;
+    Header: typeof AppShellHeader;
+    Main: typeof AppShellMain;
+};
+
+export { AppShell, AppShellBody, AppShellGroup, type AppShellGroupProps, AppShellHeader, type AppShellHeaderProps, AppShellItem, type AppShellItemProps, AppShellMain, AppShellRoot, type AppShellRootProps, AppShellSidebar, type AppShellSidebarProps, appShell };

package/dist/app-shell.js

@@ -0,0 +1,137 @@
+"use client";
+import {
+  ChevronGlyph,
+  CloseGlyph
+} from "./chunk-AZPKXP3O.js";
+import {
+  cn
+} from "./chunk-5AXLA4LK.js";
+
+// src/app-shell/app-shell.tsx
+import { Dialog as DialogPrimitive, Slot } from "radix-ui";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var appShell = tv({
+  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]",
+    drawer: "kz-dialog fixed inset-y-0 left-0 z-50 flex w-[min(20rem,88vw)] flex-col border-r border-border-default bg-surface-1 pl-[env(safe-area-inset-left)] shadow-lg focus:outline-hidden",
+    overlay: "kz-overlay fixed inset-0 z-50 bg-overlay backdrop-blur-xs",
+    brand: "flex h-14 shrink-0 items-center gap-2.5 px-4 font-display text-[15px] font-bold tracking-tight [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0",
+    nav: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2",
+    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",
+    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",
+    body: "flex min-w-0 flex-1 flex-col",
+    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",
+    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 useShell = () => {
+  const ctx = React.useContext(ShellContext);
+  if (!ctx) throw new Error("AppShell parts must be inside <AppShell.Root>");
+  return ctx;
+};
+function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onCollapsedChange, className, ...props }) {
+  const [own, setOwn] = React.useState(defaultCollapsed);
+  const [open, setOpen] = React.useState(false);
+  const collapsed = controlled ?? own;
+  const setCollapsed = React.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__ */ jsx("div", { className: s.root({ className }), ...props }) });
+}
+function SidebarContent({ brand, children, footer, collapseLabels, closeLabel }) {
+  const { collapsed, setCollapsed, inDrawer } = useShell();
+  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" }) })
+    ] }),
+    /* @__PURE__ */ jsx("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] })
+      ] })
+    ] })
+  ] });
+}
+function AppShellSidebar({ label, brand, children, footer, collapseLabels, closeLabel, className, ...props }) {
+  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__ */ 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 }) }) })
+      ] })
+    ] }) })
+  ] });
+}
+function AppShellGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: s.group({ className }), ...props });
+}
+function AppShellItem({ icon, label, current, badge, asChild, children, className, ...props }) {
+  const { collapsed } = useShell();
+  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 })
+  ] });
+  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 });
+}
+function AppShellBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx("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 }),
+    children,
+    actions && /* @__PURE__ */ jsx("div", { className: s.actions(), children: actions })
+  ] });
+}
+function AppShellMain({ className, ...props }) {
+  return /* @__PURE__ */ jsx("main", { className: s.main({ className }), ...props });
+}
+var AppShell = {
+  Root: AppShellRoot,
+  Sidebar: AppShellSidebar,
+  Group: AppShellGroup,
+  Item: AppShellItem,
+  Body: AppShellBody,
+  Header: AppShellHeader,
+  Main: AppShellMain
+};
+export {
+  AppShell,
+  AppShellBody,
+  AppShellGroup,
+  AppShellHeader,
+  AppShellItem,
+  AppShellMain,
+  AppShellRoot,
+  AppShellSidebar,
+  appShell
+};
+//# sourceMappingURL=app-shell.js.map

package/dist/app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app-shell/app-shell.tsx"],"sourcesContent":["// Client (the collapse, the drawer). The shell of an application screen, read from the products' consoles (Orochia\n// admin and studio, Orazaka web-admin and web-client): a sidebar of sections that collapses to its icons on a desktop,\n// a header with the screen's title and actions, the content — and below `md` the sidebar becomes a drawer opened from\n// the header (Radix Dialog: focus trap, Escape, focus return). Words arrive as props; links through `asChild`.\nimport { Dialog as DialogPrimitive, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { ChevronGlyph, CloseGlyph } from \"../glyphs\";\n\nexport const appShell = tv({\n  slots: {\n    root: \"flex min-h-dvh w-full bg-surface-0 text-fg\",\n    sidebar:\n      \"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 \" +\n      \"w-64 data-collapsed:w-[4.25rem]\",\n    drawer:\n      \"kz-dialog fixed inset-y-0 left-0 z-50 flex w-[min(20rem,88vw)] flex-col border-r border-border-default bg-surface-1 pl-[env(safe-area-inset-left)] shadow-lg focus:outline-hidden\",\n    overlay: \"kz-overlay fixed inset-0 z-50 bg-overlay backdrop-blur-xs\",\n    brand: \"flex h-14 shrink-0 items-center gap-2.5 px-4 font-display text-[15px] font-bold tracking-tight [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    nav: \"flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2\",\n    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\",\n    item:\n      \"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 \" +\n      \"hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg \" +\n      \"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 \" +\n      \"[[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0 [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0\",\n    itemLabel: \"min-w-0 flex-1 truncate [[data-collapsed]_&]:sr-only\",\n    itemBadge:\n      \"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 \" +\n      \"[[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]\",\n    footer: \"shrink-0 border-t border-border-subtle p-2\",\n    collapse:\n      \"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 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    body: \"flex min-w-0 flex-1 flex-col\",\n    header:\n      \"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\",\n    menuButton:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border-subtle bg-surface-1 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    title: \"min-w-0 flex-1 truncate font-display text-base font-bold tracking-tight\",\n    actions: \"ml-auto flex shrink-0 items-center gap-2\",\n    main: \"min-w-0 flex-1 px-4 py-6 md:px-6 md:py-8\",\n  },\n});\nconst s = appShell();\n\ninterface ShellState {\n  collapsed: boolean;\n  setCollapsed: (value: boolean) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n  inDrawer: boolean;\n}\nconst ShellContext = React.createContext<ShellState | null>(null);\nconst useShell = () => {\n  const ctx = React.useContext(ShellContext);\n  if (!ctx) throw new Error(\"AppShell parts must be inside <AppShell.Root>\");\n  return ctx;\n};\n\nexport type AppShellRootProps = React.ComponentProps<\"div\"> & {\n  /** The sidebar starts collapsed to its icons (desktop). */\n  defaultCollapsed?: boolean;\n  /** Controlled collapse (desktop): pair with `onCollapsedChange` to persist the choice. */\n  collapsed?: boolean;\n  /** Called when the sidebar collapses or expands. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n};\n\n/** The shell: holds the collapse (desktop) and the drawer (phone) state. Children: Sidebar, then Body. */\nexport function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onCollapsedChange, className, ...props }: AppShellRootProps) {\n  const [own, setOwn] = React.useState(defaultCollapsed);\n  const [open, setOpen] = React.useState(false);\n  const collapsed = controlled ?? own;\n  const setCollapsed = React.useCallback(\n    (value: boolean) => {\n      if (controlled === undefined) setOwn(value);\n      onCollapsedChange?.(value);\n    },\n    [controlled, onCollapsedChange],\n  );\n  const value = React.useMemo(() => ({ collapsed, setCollapsed, open, setOpen, inDrawer: false }), [collapsed, setCollapsed, open]);\n  return (\n    <ShellContext.Provider value={value}>\n      <div className={s.root({ className })} {...props} />\n    </ShellContext.Provider>\n  );\n}\n\nexport type AppShellSidebarProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** The navigation's accessible name (`Studio`, `Administration`). */\n  label: string;\n  /** The brand at the top: the product's mark and name (a link home through `asChild` of your router, or plain). */\n  brand?: React.ReactNode;\n  /** The sections: `AppShell.Group` and `AppShell.Item`. */\n  children: React.ReactNode;\n  /** At the bottom, above the collapse button: the account, a plan, the version. */\n  footer?: React.ReactNode;\n  /** The collapse button's words, `[collapse, expand]` (desktop only). Without it the sidebar cannot collapse. */\n  collapseLabels?: readonly [string, string];\n  /** The drawer's close button words (phone). */\n  closeLabel: string;\n};\n\nfunction SidebarContent({ brand, children, footer, collapseLabels, closeLabel }: Pick<AppShellSidebarProps, \"brand\" | \"children\" | \"footer\" | \"collapseLabels\" | \"closeLabel\">) {\n  const { collapsed, setCollapsed, inDrawer } = useShell();\n  return (\n    <>\n      <div className={s.brand()}>\n        {brand}\n        {inDrawer && (\n          <DialogPrimitive.Close className={cn(s.menuButton(), \"ml-auto flex\")} aria-label={closeLabel}>\n            <CloseGlyph className=\"h-4 w-4\" />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n      <div className={s.nav()}>{children}</div>\n      {(footer || (collapseLabels && !inDrawer)) && (\n        <div className={s.footer()}>\n          {footer}\n          {collapseLabels && !inDrawer && (\n            <button type=\"button\" className={s.collapse()} aria-expanded={!collapsed} onClick={() => setCollapsed(!collapsed)}>\n              <ChevronGlyph direction={collapsed ? \"right\" : \"left\"} className=\"h-4 w-4\" />\n              <span className={collapsed ? \"sr-only\" : undefined}>{collapsed ? collapseLabels[1] : collapseLabels[0]}</span>\n            </button>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n\n/** The sidebar: on a desktop a column that collapses to its icons; on a phone the same content in a drawer. */\nexport function AppShellSidebar({ label, brand, children, footer, collapseLabels, closeLabel, className, ...props }: AppShellSidebarProps) {\n  const shell = useShell();\n  const content = { brand, children, footer, collapseLabels, closeLabel };\n  return (\n    <>\n      <nav aria-label={label} data-collapsed={shell.collapsed ? \"\" : undefined} className={s.sidebar({ className })} {...props}>\n        <SidebarContent {...content} />\n      </nav>\n      <DialogPrimitive.Root open={shell.open} onOpenChange={shell.setOpen}>\n        <DialogPrimitive.Portal>\n          <DialogPrimitive.Overlay className={s.overlay()} />\n          <DialogPrimitive.Content className={s.drawer()} aria-describedby={undefined}>\n            <DialogPrimitive.Title className=\"sr-only\">{label}</DialogPrimitive.Title>\n            <ShellContext.Provider value={{ ...shell, collapsed: false, inDrawer: true }}>\n              <nav aria-label={label} className=\"flex min-h-0 flex-1 flex-col\" onClick={(e) => (e.target as Element).closest(\"a\") && shell.setOpen(false)}>\n                <SidebarContent {...content} />\n              </nav>\n            </ShellContext.Provider>\n          </DialogPrimitive.Content>\n        </DialogPrimitive.Portal>\n      </DialogPrimitive.Root>\n    </>\n  );\n}\n\nexport type AppShellGroupProps = React.ComponentProps<\"p\"> & {\n  /** The group's name, above its items (hidden when the sidebar is collapsed). */\n  children: React.ReactNode;\n};\n\n/** A heading between groups of items. */\nexport function AppShellGroup({ className, ...props }: AppShellGroupProps) {\n  return <p className={s.group({ className })} {...props} />;\n}\n\nexport type AppShellItemProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The item's icon (a signature icon): it stays when the sidebar collapses. */\n  icon?: React.ReactNode;\n  /** Its words: the accessible name, hidden visually when collapsed (the icon carries a tooltip through `title`). */\n  label: string;\n  /** The screen it opens is the current one: `aria-current=\"page\"`. */\n  current?: boolean;\n  /** A count beside it (unread, pending): a number or a few characters. */\n  badge?: React.ReactNode;\n  /** Renders your link (Next's `Link`) with the item's look: pass it as the only child. */\n  asChild?: boolean;\n  /** Your link element when `asChild`. */\n  children?: React.ReactElement;\n};\n\n/** A destination of the sidebar: icon, words, a count. */\nexport function AppShellItem({ icon, label, current, badge, asChild, children, className, ...props }: AppShellItemProps) {\n  const { collapsed } = useShell();\n  const Comp = asChild ? Slot.Root : \"a\";\n  const inner = (\n    <>\n      {icon}\n      <span className={s.itemLabel()}>{label}</span>\n      {badge != null && <span className={s.itemBadge()}>{badge}</span>}\n    </>\n  );\n  return (\n    <Comp aria-current={current ? \"page\" : undefined} title={collapsed ? label : undefined} className={s.item({ className })} {...props}>\n      {asChild && children ? React.cloneElement(children, undefined, inner) : inner}\n    </Comp>\n  );\n}\n\n/** The column right of the sidebar: Header, then Main. */\nexport function AppShellBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport type AppShellHeaderProps = Omit<React.ComponentProps<\"header\">, \"title\"> & {\n  /** The screen's title (an `h1`). */\n  title?: React.ReactNode;\n  /** The button that opens the drawer on a phone: its words. */\n  menuLabel: string;\n  /** The screen's actions, on the right. */\n  actions?: React.ReactNode;\n};\n\n/** The top of the screen: the drawer's button (phone), the title, the actions. Sticky. */\nexport function AppShellHeader({ title, menuLabel, actions, className, children, ...props }: AppShellHeaderProps) {\n  const { open, setOpen } = useShell();\n  return (\n    <header className={s.header({ className })} {...props}>\n      <button type=\"button\" className={s.menuButton()} aria-label={menuLabel} aria-expanded={open} aria-haspopup=\"dialog\" onClick={() => setOpen(true)}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"M4 7h16M4 12h16M4 17h10\" />\n        </svg>\n      </button>\n      {title && <h1 className={s.title()}>{title}</h1>}\n      {children}\n      {actions && <div className={s.actions()}>{actions}</div>}\n    </header>\n  );\n}\n\n/** The screen's content. */\nexport function AppShellMain({ className, ...props }: React.ComponentProps<\"main\">) {\n  return <main className={s.main({ className })} {...props} />;\n}\n\nexport const AppShell = {\n  Root: AppShellRoot,\n  Sidebar: AppShellSidebar,\n  Group: AppShellGroup,\n  Item: AppShellItem,\n  Body: AppShellBody,\n  Header: AppShellHeader,\n  Main: AppShellMain,\n};\n"],"mappings":"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","names":["value"]}