@krizaka/ui 2.6.0 → 2.9.0

package/dist/dashboard-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dashboard-layout/dashboard-layout.tsx"],"sourcesContent":["// Server-safe. A dashboard, read from the products' home screens (Orochia's creator studio, Orazaka's console for\n// Eric): the screen's heading with its actions and filters, then a responsive grid of widgets — one column on a phone,\n// two from `sm`, four from `xl`; a widget spans 1, 2, 3 columns or the full row, and keeps its order everywhere.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const dashboardLayout = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-6\",\n    head: \"flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between\",\n    text: \"flex min-w-0 flex-col gap-1\",\n    eyebrow: \"font-mono text-[11px] font-semibold uppercase tracking-[0.16em] text-fg-accent\",\n    title: \"font-display text-2xl font-extrabold tracking-tight text-fg sm:text-[1.75rem]\",\n    description: \"max-w-2xl text-sm text-fg-secondary\",\n    actions: \"flex shrink-0 flex-wrap items-center gap-2\",\n    toolbar: \"flex flex-wrap items-center gap-2\",\n    grid: \"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4\",\n    widget: \"flex min-w-0 flex-col gap-3 rounded-xl border border-border-default bg-surface-1 p-4 sm:p-5\",\n    widgetHead: \"flex items-start justify-between gap-3\",\n    widgetTitle: \"text-sm font-semibold text-fg\",\n    widgetDescription: \"mt-0.5 text-xs text-fg-secondary\",\n    widgetBody: \"min-w-0 flex-1\",\n  },\n  variants: {\n    span: {\n      1: { widget: \"\" },\n      2: { widget: \"sm:col-span-2\" },\n      3: { widget: \"sm:col-span-2 xl:col-span-3\" },\n      full: { widget: \"sm:col-span-2 xl:col-span-4\" },\n    },\n  },\n  defaultVariants: { span: 1 },\n});\nconst s = dashboardLayout();\n\nexport type DashboardLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The screen's title: `Good morning, Eric`. */\n  title: React.ReactNode;\n  /** A mono line above it (the workspace, the date). */\n  eyebrow?: React.ReactNode;\n  /** One sentence under it. */\n  description?: React.ReactNode;\n  /** The screen's actions (a primary Button, a DropdownMenu). */\n  actions?: React.ReactNode;\n  /** Under the heading: the period, the filters (Segmented tabs, a DateRangePicker, a FilterBar). */\n  toolbar?: React.ReactNode;\n  /**\n   * The heading's level: `h1` when the dashboard is the screen, `h2` inside an AppShell whose header holds the h1.\n   * @default \"h1\"\n   */\n  headingAs?: \"h1\" | \"h2\";\n  /** The widgets (`Widget`), in reading order. */\n  children: React.ReactNode;\n};\n\n/** A dashboard screen: heading, actions, filters, then the grid of widgets. */\nexport function DashboardLayout({ title, eyebrow, description, actions, toolbar, headingAs: H = \"h1\", className, children, ...props }: DashboardLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <div className={s.head()}>\n        <div className={s.text()}>\n          {eyebrow && <p className={s.eyebrow()}>{eyebrow}</p>}\n          <H className={s.title()}>{title}</H>\n          {description && <p className={s.description()}>{description}</p>}\n        </div>\n        {actions && <div className={s.actions()}>{actions}</div>}\n      </div>\n      {toolbar && <div className={s.toolbar()}>{toolbar}</div>}\n      <div className={s.grid()}>{children}</div>\n    </div>\n  );\n}\n\nexport type WidgetProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The widget's title: it names the region. */\n  title: React.ReactNode;\n  /** One line under the title (the period, the source). */\n  description?: React.ReactNode;\n  /** An action on the right of the title (`See all`). */\n  action?: React.ReactNode;\n  /**\n   * The columns it takes: 1, 2, 3 or the full row (from `sm`; one column on a phone).\n   * @default 1\n   */\n  span?: 1 | 2 | 3 | \"full\";\n  /**\n   * The title's level: one under the dashboard's heading — `2` under an `h1`, `3` inside an AppShell (`headingAs=\"h2\"`).\n   * @default 2\n   */\n  level?: 2 | 3;\n  /** The content: a Stat, a chart of @krizaka/charts, a DataTable, a list. */\n  children: React.ReactNode;\n};\n\n/** A widget of the dashboard: a titled region on a card. */\nexport function Widget({ title, description, action, span = 1, level = 2, className, children, id, ...props }: WidgetProps) {\n  const H = level === 2 ? \"h2\" : \"h3\";\n  const sv = dashboardLayout({ span });\n  const auto = React.useId();\n  const titleId = `${id ?? auto}-title`;\n  return (\n    <section className={sv.widget({ className })} aria-labelledby={titleId} id={id} {...props}>\n      <div className={s.widgetHead()}>\n        <div className=\"min-w-0\">\n          <H id={titleId} className={s.widgetTitle()}>\n            {title}\n          </H>\n          {description && <p className={s.widgetDescription()}>{description}</p>}\n        </div>\n        {action}\n      </div>\n      <div className={s.widgetBody()}>{children}</div>\n    </section>\n  );\n}\n"],"mappings":";AAGA,YAAY,WAAW;AACvB,SAAS,UAAU;AAwDX,SACc,KADd;AAtDD,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,mBAAmB;AAAA,IACnB,YAAY;AAAA,EACd;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,GAAG,EAAE,QAAQ,GAAG;AAAA,MAChB,GAAG,EAAE,QAAQ,gBAAgB;AAAA,MAC7B,GAAG,EAAE,QAAQ,8BAA8B;AAAA,MAC3C,MAAM,EAAE,QAAQ,8BAA8B;AAAA,IAChD;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,EAAE;AAC7B,CAAC;AACD,IAAM,IAAI,gBAAgB;AAuBnB,SAAS,gBAAgB,EAAE,OAAO,SAAS,aAAa,SAAS,SAAS,WAAW,IAAI,MAAM,WAAW,UAAU,GAAG,MAAM,GAAyB;AAC3J,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,yBAAC,SAAI,WAAW,EAAE,KAAK,GACrB;AAAA,2BAAC,SAAI,WAAW,EAAE,KAAK,GACpB;AAAA,mBAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,QAChD,oBAAC,KAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,QAC/B,eAAe,oBAAC,OAAE,WAAW,EAAE,YAAY,GAAI,uBAAY;AAAA,SAC9D;AAAA,MACC,WAAW,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,OACpD;AAAA,IACC,WAAW,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IAClD,oBAAC,SAAI,WAAW,EAAE,KAAK,GAAI,UAAS;AAAA,KACtC;AAEJ;AAwBO,SAAS,OAAO,EAAE,OAAO,aAAa,QAAQ,OAAO,GAAG,QAAQ,GAAG,WAAW,UAAU,IAAI,GAAG,MAAM,GAAgB;AAC1H,QAAM,IAAI,UAAU,IAAI,OAAO;AAC/B,QAAM,KAAK,gBAAgB,EAAE,KAAK,CAAC;AACnC,QAAM,OAAa,YAAM;AACzB,QAAM,UAAU,GAAG,MAAM,IAAI;AAC7B,SACE,qBAAC,aAAQ,WAAW,GAAG,OAAO,EAAE,UAAU,CAAC,GAAG,mBAAiB,SAAS,IAAS,GAAG,OAClF;AAAA,yBAAC,SAAI,WAAW,EAAE,WAAW,GAC3B;AAAA,2BAAC,SAAI,WAAU,WACb;AAAA,4BAAC,KAAE,IAAI,SAAS,WAAW,EAAE,YAAY,GACtC,iBACH;AAAA,QACC,eAAe,oBAAC,OAAE,WAAW,EAAE,kBAAkB,GAAI,uBAAY;AAAA,SACpE;AAAA,MACC;AAAA,OACH;AAAA,IACA,oBAAC,SAAI,WAAW,EAAE,WAAW,GAAI,UAAS;AAAA,KAC5C;AAEJ;","names":[]}

package/dist/detail-layout.d.ts

@@ -0,0 +1,126 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const detailLayout: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            text?: tailwind_variants.ClassValue;
+            eyebrow?: tailwind_variants.ClassValue;
+            titleRow?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            columns?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            aside?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            text?: tailwind_variants.ClassValue;
+            eyebrow?: tailwind_variants.ClassValue;
+            titleRow?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            columns?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            aside?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    back: string;
+    header: string;
+    media: string;
+    text: string;
+    eyebrow: string;
+    titleRow: string;
+    title: string;
+    meta: string;
+    actions: string;
+    columns: string;
+    main: string;
+    aside: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            text?: tailwind_variants.ClassValue;
+            eyebrow?: tailwind_variants.ClassValue;
+            titleRow?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            columns?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            aside?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    back: string;
+    header: string;
+    media: string;
+    text: string;
+    eyebrow: string;
+    titleRow: string;
+    title: string;
+    meta: string;
+    actions: string;
+    columns: string;
+    main: string;
+    aside: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    back: string;
+    header: string;
+    media: string;
+    text: string;
+    eyebrow: string;
+    titleRow: string;
+    title: string;
+    meta: string;
+    actions: string;
+    columns: string;
+    main: string;
+    aside: string;
+}>>;
+type DetailLayoutProps = Omit<React.ComponentProps<"div">, "title"> & {
+    /** The way back to the list: your router's link (`<Link href="/videos">Videos</Link>`), drawn with its arrow. */
+    back?: React.ReactNode;
+    /** A thumbnail, a cover or an avatar beside the name. */
+    media?: React.ReactNode;
+    /** A mono line above the name (the object's kind, its id). */
+    eyebrow?: React.ReactNode;
+    /** The object's name: the `h1`. */
+    title: React.ReactNode;
+    /** Beside the name: its status (a Badge). */
+    status?: React.ReactNode;
+    /** Under the name: its facts (the author, a date, a count — `Facts` or plain text). */
+    meta?: React.ReactNode;
+    /** The object's actions (edit, publish, a DropdownMenu). */
+    actions?: React.ReactNode;
+    /** Under the header: the object's tabs (`Tabs.List` of @krizaka/ui/tabs, inside your `Tabs.Root` around the layout). */
+    tabs?: React.ReactNode;
+    /** The side panel: details, related objects, activity (under the content on a phone). */
+    aside?: React.ReactNode;
+    /** The content (the current tab). */
+    children: React.ReactNode;
+};
+/** One object's page: header (back, media, name, status, facts, actions), tabs, content and a side panel. */
+declare function DetailLayout({ back, media, eyebrow, title, status, meta, actions, tabs, aside, className, children, ...props }: DetailLayoutProps): React.JSX.Element;
+
+export { DetailLayout, type DetailLayoutProps, detailLayout };

package/dist/detail-layout.js

@@ -0,0 +1,48 @@
+// src/detail-layout/detail-layout.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var detailLayout = tv({
+  slots: {
+    root: "flex w-full flex-col gap-6",
+    back: "inline-flex w-fit items-center gap-1.5 rounded-md text-sm font-medium text-fg-secondary no-underline hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    header: "flex flex-col gap-4 border-b border-border-subtle pb-5 sm:flex-row sm:items-start",
+    media: "shrink-0 overflow-hidden rounded-xl [&>img]:block [&>img]:h-full [&>img]:w-full [&>img]:object-cover",
+    text: "flex min-w-0 flex-1 flex-col gap-2",
+    eyebrow: "font-mono text-[11px] font-semibold uppercase tracking-[0.16em] text-fg-accent",
+    titleRow: "flex flex-wrap items-center gap-2",
+    title: "min-w-0 font-display text-2xl font-extrabold tracking-tight text-fg break-words",
+    meta: "flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-fg-secondary",
+    actions: "flex shrink-0 flex-wrap items-center gap-2",
+    columns: "grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_20rem] lg:gap-8",
+    main: "flex min-w-0 flex-col gap-5",
+    aside: "flex min-w-0 flex-col gap-4 lg:sticky lg:top-20 lg:self-start"
+  }
+});
+var s = detailLayout();
+function DetailLayout({ back, media, eyebrow, title, status, meta, actions, tabs, aside, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
+    back && /* @__PURE__ */ jsx("div", { className: s.back(), children: back }),
+    /* @__PURE__ */ jsxs("div", { className: s.header(), children: [
+      media && /* @__PURE__ */ jsx("div", { className: s.media(), children: media }),
+      /* @__PURE__ */ jsxs("div", { className: s.text(), children: [
+        eyebrow && /* @__PURE__ */ jsx("p", { className: s.eyebrow(), children: eyebrow }),
+        /* @__PURE__ */ jsxs("div", { className: s.titleRow(), children: [
+          /* @__PURE__ */ jsx("h1", { className: s.title(), children: title }),
+          status
+        ] }),
+        meta && /* @__PURE__ */ jsx("div", { className: s.meta(), children: meta })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: s.actions(), children: actions })
+    ] }),
+    tabs,
+    /* @__PURE__ */ jsxs("div", { className: aside ? s.columns() : void 0, children: [
+      /* @__PURE__ */ jsx("div", { className: s.main(), children }),
+      aside && /* @__PURE__ */ jsx("aside", { className: s.aside(), children: aside })
+    ] })
+  ] });
+}
+export {
+  DetailLayout,
+  detailLayout
+};
+//# sourceMappingURL=detail-layout.js.map

package/dist/detail-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/detail-layout/detail-layout.tsx"],"sourcesContent":["// Server-safe. The page of one object, read from the products' detail screens (a video, a job, an account, a pack):\n// its header — the way back, a media or an avatar, the name, its facts and status, the actions — then its tabs, the\n// content, and a side panel (details, related, activity) that goes under the content on a phone.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const detailLayout = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-6\",\n    back: \"inline-flex w-fit items-center gap-1.5 rounded-md text-sm font-medium text-fg-secondary no-underline hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    header: \"flex flex-col gap-4 border-b border-border-subtle pb-5 sm:flex-row sm:items-start\",\n    media: \"shrink-0 overflow-hidden rounded-xl [&>img]:block [&>img]:h-full [&>img]:w-full [&>img]:object-cover\",\n    text: \"flex min-w-0 flex-1 flex-col gap-2\",\n    eyebrow: \"font-mono text-[11px] font-semibold uppercase tracking-[0.16em] text-fg-accent\",\n    titleRow: \"flex flex-wrap items-center gap-2\",\n    title: \"min-w-0 font-display text-2xl font-extrabold tracking-tight text-fg break-words\",\n    meta: \"flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-fg-secondary\",\n    actions: \"flex shrink-0 flex-wrap items-center gap-2\",\n    columns: \"grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_20rem] lg:gap-8\",\n    main: \"flex min-w-0 flex-col gap-5\",\n    aside: \"flex min-w-0 flex-col gap-4 lg:sticky lg:top-20 lg:self-start\",\n  },\n});\nconst s = detailLayout();\n\nexport type DetailLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The way back to the list: your router's link (`<Link href=\"/videos\">Videos</Link>`), drawn with its arrow. */\n  back?: React.ReactNode;\n  /** A thumbnail, a cover or an avatar beside the name. */\n  media?: React.ReactNode;\n  /** A mono line above the name (the object's kind, its id). */\n  eyebrow?: React.ReactNode;\n  /** The object's name: the `h1`. */\n  title: React.ReactNode;\n  /** Beside the name: its status (a Badge). */\n  status?: React.ReactNode;\n  /** Under the name: its facts (the author, a date, a count — `Facts` or plain text). */\n  meta?: React.ReactNode;\n  /** The object's actions (edit, publish, a DropdownMenu). */\n  actions?: React.ReactNode;\n  /** Under the header: the object's tabs (`Tabs.List` of @krizaka/ui/tabs, inside your `Tabs.Root` around the layout). */\n  tabs?: React.ReactNode;\n  /** The side panel: details, related objects, activity (under the content on a phone). */\n  aside?: React.ReactNode;\n  /** The content (the current tab). */\n  children: React.ReactNode;\n};\n\n/** One object's page: header (back, media, name, status, facts, actions), tabs, content and a side panel. */\nexport function DetailLayout({ back, media, eyebrow, title, status, meta, actions, tabs, aside, className, children, ...props }: DetailLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      {back && <div className={s.back()}>{back}</div>}\n      <div className={s.header()}>\n        {media && <div className={s.media()}>{media}</div>}\n        <div className={s.text()}>\n          {eyebrow && <p className={s.eyebrow()}>{eyebrow}</p>}\n          <div className={s.titleRow()}>\n            <h1 className={s.title()}>{title}</h1>\n            {status}\n          </div>\n          {meta && <div className={s.meta()}>{meta}</div>}\n        </div>\n        {actions && <div className={s.actions()}>{actions}</div>}\n      </div>\n      {tabs}\n      <div className={aside ? s.columns() : undefined}>\n        <div className={s.main()}>{children}</div>\n        {aside && <aside className={s.aside()}>{aside}</aside>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAAU;AAgDJ,cAKL,YALK;AA9CR,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF,CAAC;AACD,IAAM,IAAI,aAAa;AA0BhB,SAAS,aAAa,EAAE,MAAM,OAAO,SAAS,OAAO,QAAQ,MAAM,SAAS,MAAM,OAAO,WAAW,UAAU,GAAG,MAAM,GAAsB;AAClJ,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACxC;AAAA,YAAQ,oBAAC,SAAI,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,IACzC,qBAAC,SAAI,WAAW,EAAE,OAAO,GACtB;AAAA,eAAS,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,MAC5C,qBAAC,SAAI,WAAW,EAAE,KAAK,GACpB;AAAA,mBAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,QAChD,qBAAC,SAAI,WAAW,EAAE,SAAS,GACzB;AAAA,8BAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,UAChC;AAAA,WACH;AAAA,QACC,QAAQ,oBAAC,SAAI,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,SAC3C;AAAA,MACC,WAAW,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,OACpD;AAAA,IACC;AAAA,IACD,qBAAC,SAAI,WAAW,QAAQ,EAAE,QAAQ,IAAI,QACpC;AAAA,0BAAC,SAAI,WAAW,EAAE,KAAK,GAAI,UAAS;AAAA,MACnC,SAAS,oBAAC,WAAM,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,OAChD;AAAA,KACF;AAEJ;","names":[]}

package/dist/docs-layout.d.ts

@@ -0,0 +1,78 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const docsLayout: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            sidebar?: tailwind_variants.ClassValue;
+            mobileNav?: tailwind_variants.ClassValue;
+            mobileBody?: tailwind_variants.ClassValue;
+            article?: tailwind_variants.ClassValue;
+            toc?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            mobileSummary?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            sidebar?: tailwind_variants.ClassValue;
+            mobileNav?: tailwind_variants.ClassValue;
+            mobileBody?: tailwind_variants.ClassValue;
+            article?: tailwind_variants.ClassValue;
+            toc?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            mobileSummary?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    sidebar: string;
+    mobileNav: string;
+    mobileSummary: string;
+    mobileBody: string;
+    article: string;
+    toc: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            sidebar?: tailwind_variants.ClassValue;
+            mobileNav?: tailwind_variants.ClassValue;
+            mobileBody?: tailwind_variants.ClassValue;
+            article?: tailwind_variants.ClassValue;
+            toc?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            mobileSummary?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    sidebar: string;
+    mobileNav: string;
+    mobileSummary: string;
+    mobileBody: string;
+    article: string;
+    toc: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    sidebar: string;
+    mobileNav: string;
+    mobileSummary: string;
+    mobileBody: string;
+    article: string;
+    toc: string;
+}>>;
+type DocsLayoutProps = React.ComponentProps<"div"> & {
+    /** The pages of the documentation (a nav of links, grouped). */
+    sidebar: React.ReactNode;
+    /** On a phone the sidebar is folded: the words that open it (`Pages of the documentation`). */
+    sidebarLabel: string;
+    /** The page's table of contents (a `Toc` of @krizaka/ui/toc): beside the article from `xl`. */
+    toc?: React.ReactNode;
+    /** The article: its title, its body. */
+    children: React.ReactNode;
+};
+/** A documentation page: pages · article · contents, in the site's frame. */
+declare function DocsLayout({ sidebar, sidebarLabel, toc, className, children, ...props }: DocsLayoutProps): React.JSX.Element;
+
+export { DocsLayout, type DocsLayoutProps, docsLayout };

package/dist/docs-layout.js

@@ -0,0 +1,60 @@
+// src/docs-layout/docs-layout.tsx
+import { tv } from "tailwind-variants";
+
+// src/glyphs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Glyph({ className = "h-4 w-4", fill, children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className,
+      fill: fill ? "currentColor" : "none",
+      stroke: fill ? "none" : "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      focusable: "false",
+      children
+    }
+  );
+}
+var ChevronGlyph = ({ direction = "down", ...p }) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: { left: "m15 6-6 6 6 6", right: "m9 6 6 6-6 6", up: "m6 15 6-6 6 6", down: "m6 9 6 6 6-6" }[direction] }) });
+
+// src/docs-layout/docs-layout.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var docsLayout = tv({
+  slots: {
+    root: "mx-auto grid w-full max-w-[calc(var(--kz-page-max-docs,88rem)+2*var(--kz-page-gutter,24px))] grid-cols-1 gap-8 px-(--kz-page-gutter,16px) pt-(--kz-hero-top,6rem) pb-16 lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_13rem]",
+    sidebar: "hidden lg:block lg:sticky lg:top-24 lg:max-h-[calc(100dvh-7rem)] lg:self-start lg:overflow-y-auto",
+    mobileNav: "rounded-xl border border-border-default bg-surface-1 lg:hidden",
+    mobileSummary: "flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 px-4 text-sm font-semibold text-fg [&::-webkit-details-marker]:hidden rounded-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[open]>&>svg]:rotate-180",
+    mobileBody: "border-t border-border-subtle px-2 py-2",
+    article: "min-w-0 max-w-3xl",
+    toc: "hidden xl:block xl:sticky xl:top-24 xl:self-start"
+  }
+});
+var s = docsLayout();
+function DocsLayout({ sidebar, sidebarLabel, toc, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs2("div", { className: s.root({ className }), ...props, children: [
+    /* @__PURE__ */ jsx2("div", { className: s.sidebar(), children: sidebar }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col gap-6", children: [
+      /* @__PURE__ */ jsxs2("details", { className: s.mobileNav(), children: [
+        /* @__PURE__ */ jsxs2("summary", { className: s.mobileSummary(), children: [
+          sidebarLabel,
+          " ",
+          /* @__PURE__ */ jsx2(ChevronGlyph, { className: "h-4 w-4 transition-transform motion-reduce:transition-none" })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: s.mobileBody(), children: sidebar })
+      ] }),
+      /* @__PURE__ */ jsx2("article", { className: s.article(), children })
+    ] }),
+    toc && /* @__PURE__ */ jsx2("div", { className: s.toc(), children: toc })
+  ] });
+}
+export {
+  DocsLayout,
+  docsLayout
+};
+//# sourceMappingURL=docs-layout.js.map

package/dist/docs-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs-layout/docs-layout.tsx","../src/glyphs.tsx"],"sourcesContent":["// Server-safe. A documentation page in the site's frame (--kz-page-max-docs): the sidebar of pages, the article, the\n// table of contents — the three columns of the frame on a wide screen, the sidebar folded into a disclosure above the\n// article on a phone, the contents under the title as chips (a `Toc`). Its edges are the bar's: no column runs to the\n// window's edge.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronGlyph } from \"../glyphs\";\n\nexport const docsLayout = tv({\n  slots: {\n    root:\n      \"mx-auto grid w-full max-w-[calc(var(--kz-page-max-docs,88rem)+2*var(--kz-page-gutter,24px))] grid-cols-1 gap-8 px-(--kz-page-gutter,16px) \" +\n      \"pt-(--kz-hero-top,6rem) pb-16 lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_13rem]\",\n    sidebar: \"hidden lg:block lg:sticky lg:top-24 lg:max-h-[calc(100dvh-7rem)] lg:self-start lg:overflow-y-auto\",\n    mobileNav: \"rounded-xl border border-border-default bg-surface-1 lg:hidden\",\n    mobileSummary:\n      \"flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 px-4 text-sm font-semibold text-fg [&::-webkit-details-marker]:hidden \" +\n      \"rounded-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[open]>&>svg]:rotate-180\",\n    mobileBody: \"border-t border-border-subtle px-2 py-2\",\n    article: \"min-w-0 max-w-3xl\",\n    toc: \"hidden xl:block xl:sticky xl:top-24 xl:self-start\",\n  },\n});\nconst s = docsLayout();\n\nexport type DocsLayoutProps = React.ComponentProps<\"div\"> & {\n  /** The pages of the documentation (a nav of links, grouped). */\n  sidebar: React.ReactNode;\n  /** On a phone the sidebar is folded: the words that open it (`Pages of the documentation`). */\n  sidebarLabel: string;\n  /** The page's table of contents (a `Toc` of @krizaka/ui/toc): beside the article from `xl`. */\n  toc?: React.ReactNode;\n  /** The article: its title, its body. */\n  children: React.ReactNode;\n};\n\n/** A documentation page: pages · article · contents, in the site's frame. */\nexport function DocsLayout({ sidebar, sidebarLabel, toc, className, children, ...props }: DocsLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <div className={s.sidebar()}>{sidebar}</div>\n      <div className=\"flex min-w-0 flex-col gap-6\">\n        <details className={s.mobileNav()}>\n          <summary className={s.mobileSummary()}>\n            {sidebarLabel} <ChevronGlyph className=\"h-4 w-4 transition-transform motion-reduce:transition-none\" />\n          </summary>\n          <div className={s.mobileBody()}>{sidebar}</div>\n        </details>\n        <article className={s.article()}>{children}</article>\n      </div>\n      {toc && <div className={s.toc()}>{toc}</div>}\n    </div>\n  );\n}\n","// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\nexport const ArrowGlyph = ({ direction = \"right\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" }) => (\n  <Glyph {...p}>\n    <path d={direction === \"left\" ? \"M19 12H5m0 0 6-6m-6 6 6 6\" : \"M5 12h14m0 0-6-6m6 6-6 6\"} />\n  </Glyph>\n);\nexport const ExternalGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 4h6v6M20 4l-9 9\" />\n    <path d=\"M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4\" />\n  </Glyph>\n);\nexport const WarningGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 4 2.5 20h19L12 4Z\" />\n    <path d=\"M12 10v4M12 17.2v.1\" />\n  </Glyph>\n);\nexport const CopyGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n    <path d=\"M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3\" />\n  </Glyph>\n);\n"],"mappings":";AAKA,SAAS,UAAU;;;ACIf,cAsBF,YAtBE;AAFJ,SAAS,MAAM,EAAE,YAAY,WAAW,MAAM,SAAS,GAA+D;AACpH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA,MAAM,OAAO,iBAAiB;AAAA,MAC9B,QAAQ,OAAO,SAAS;AAAA,MACxB,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MACX,WAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;AA+CO,IAAM,eAAe,CAAC,EAAE,YAAY,QAAQ,GAAG,EAAE,MACtD,oBAAC,SAAO,GAAG,GACT,8BAAC,UAAK,GAAG,EAAE,MAAM,iBAAiB,OAAO,gBAAgB,IAAI,iBAAiB,MAAM,eAAe,EAAE,SAAS,GAAG,GACnH;;;ADhCI,gBAAAA,MAGI,QAAAC,aAHJ;AAhCC,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MACE;AAAA,IAEF,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eACE;AAAA,IAEF,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AACF,CAAC;AACD,IAAM,IAAI,WAAW;AAcd,SAAS,WAAW,EAAE,SAAS,cAAc,KAAK,WAAW,UAAU,GAAG,MAAM,GAAoB;AACzG,SACE,gBAAAA,MAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,oBAAAD,KAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IACtC,gBAAAC,MAAC,SAAI,WAAU,+BACb;AAAA,sBAAAA,MAAC,aAAQ,WAAW,EAAE,UAAU,GAC9B;AAAA,wBAAAA,MAAC,aAAQ,WAAW,EAAE,cAAc,GACjC;AAAA;AAAA,UAAa;AAAA,UAAC,gBAAAD,KAAC,gBAAa,WAAU,8DAA6D;AAAA,WACtG;AAAA,QACA,gBAAAA,KAAC,SAAI,WAAW,EAAE,WAAW,GAAI,mBAAQ;AAAA,SAC3C;AAAA,MACA,gBAAAA,KAAC,aAAQ,WAAW,EAAE,QAAQ,GAAI,UAAS;AAAA,OAC7C;AAAA,IACC,OAAO,gBAAAA,KAAC,SAAI,WAAW,EAAE,IAAI,GAAI,eAAI;AAAA,KACxC;AAEJ;","names":["jsx","jsxs"]}

package/dist/geometry-CXrAW34x.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one
+ * (`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,
+ * the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon) and the lovebird that
+ * introduces (2026-10, with Yazakia: "l'inséparable présente"), redrawn on one 120 × 120 grid so that any bird can
+ * wear any mood.
+ *
+ * Colours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,
+ * `--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives
+ * each bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades
+ * and highlights are black and white at a low opacity over the role, so they hold in both themes.
+ */
+declare const MASCOT_BIRDS: readonly ["falcon", "owl", "duck", "flamingo", "pigeon", "lovebird"];
+type MascotBird = (typeof MASCOT_BIRDS)[number];
+declare const MASCOT_MOODS: readonly ["welcome", "thinking", "success", "empty", "error"];
+type MascotMood = (typeof MASCOT_MOODS)[number];
+type MascotTone = "brand" | "own";
+
+export { type MascotBird as M, type MascotMood as a, type MascotTone as b, MASCOT_BIRDS as c, MASCOT_MOODS as d };

package/dist/goal-gauge.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { S as StoryVariant } from './story-variant-CLn4H5Nt.js';
+
+type GoalGaugeProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** What the gauge counts (“Backers”, “Dares completed”) — passed translated; the meter's accessible name. */
+    label: string;
+    /** The number of steps of the goal (2–24). */
+    segments: number;
+    /**
+     * The steps reached (lit), from 0 to `segments`.
+     * @default segments
+     */
+    value?: number;
+    /** The value in words (“6 of 10”, “€420 raised”); default `value / segments`. */
+    valueText?: string;
+    /**
+     * How the scene plays it: `fill` lights the reached steps one by one; `drain` empties the spent ones (a countdown of
+     * what is left: tickets, lives, problems still standing).
+     * @default "fill"
+     */
+    mode?: "fill" | "drain";
+    /**
+     * Shows the label and the value above the segments.
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * `default`: rounded segments. `arcade`: the boss gauge — a skewed frame, gradient cells, a centred mono label.
+     * @default "default"
+     */
+    variant?: StoryVariant;
+    /** A brand scope (`orochia` → `.brand-orochia`). */
+    brand?: string;
+};
+/** A goal in steps: `role="meter"`, the reached steps lit, the value in words beside the label. */
+declare function GoalGauge({ label, segments, value, valueText, mode, showLabel, variant, brand, className, style, ...props }: GoalGaugeProps): React.JSX.Element;
+
+export { GoalGauge, type GoalGaugeProps };

package/dist/goal-gauge.js

@@ -0,0 +1,53 @@
+import {
+  brandClass,
+  cn,
+  storyVariantClass
+} from "./chunk-VCAAHCHL.js";
+
+// src/goal-gauge/goal-gauge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function GoalGauge({ label, segments, value, valueText, mode = "fill", showLabel = true, variant, brand, className, style, ...props }) {
+  const total = Math.max(1, Math.round(segments));
+  const lit = Math.min(total, Math.max(0, Math.round(value ?? total)));
+  const words = valueText ?? `${lit} / ${total}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "meter",
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": total,
+      "aria-valuenow": lit,
+      "aria-valuetext": words,
+      "data-mode": mode,
+      className: cn("kzs-gauge", storyVariantClass(variant), brandClass(brand), className),
+      style: { "--kzs-segments": total, ...style },
+      ...props,
+      children: [
+        showLabel && /* @__PURE__ */ jsxs("div", { className: "kzs-gauge-head", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("span", { className: "kzs-gauge-label", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "kzs-gauge-value", children: words })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "kzs-gauge-cells", "aria-hidden": true, children: Array.from({ length: total }, (_, i) => {
+          const on = i < lit;
+          const animate = mode === "fill" ? on : !on;
+          const order = mode === "fill" ? i : i - lit;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "kzs-gauge-cell",
+              "data-lit": on ? "" : void 0,
+              "data-animate": animate ? "" : void 0,
+              style: animate ? { "--i": order } : void 0
+            },
+            i
+          );
+        }) })
+      ]
+    }
+  );
+}
+export {
+  GoalGauge
+};
+//# sourceMappingURL=goal-gauge.js.map

package/dist/goal-gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/goal-gauge/goal-gauge.tsx"],"sourcesContent":["// Server-safe. A goal counted in steps (story.css): 6 of 10 backers, 3 of 5 dares done, 8 problems out of the way. A\n// `meter` with its value in words; in a `Scene` of a `ScrollStage` the segments light (or drain) one by one, once.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport type GoalGaugeProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> & {\n  /** What the gauge counts (“Backers”, “Dares completed”) — passed translated; the meter's accessible name. */\n  label: string;\n  /** The number of steps of the goal (2–24). */\n  segments: number;\n  /**\n   * The steps reached (lit), from 0 to `segments`.\n   * @default segments\n   */\n  value?: number;\n  /** The value in words (“6 of 10”, “€420 raised”); default `value / segments`. */\n  valueText?: string;\n  /**\n   * How the scene plays it: `fill` lights the reached steps one by one; `drain` empties the spent ones (a countdown of\n   * what is left: tickets, lives, problems still standing).\n   * @default \"fill\"\n   */\n  mode?: \"fill\" | \"drain\";\n  /**\n   * Shows the label and the value above the segments.\n   * @default true\n   */\n  showLabel?: boolean;\n  /**\n   * `default`: rounded segments. `arcade`: the boss gauge — a skewed frame, gradient cells, a centred mono label.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /** A brand scope (`orochia` → `.brand-orochia`). */\n  brand?: string;\n};\n\n/** A goal in steps: `role=\"meter\"`, the reached steps lit, the value in words beside the label. */\nexport function GoalGauge({ label, segments, value, valueText, mode = \"fill\", showLabel = true, variant, brand, className, style, ...props }: GoalGaugeProps) {\n  const total = Math.max(1, Math.round(segments));\n  const lit = Math.min(total, Math.max(0, Math.round(value ?? total)));\n  const words = valueText ?? `${lit} / ${total}`;\n  return (\n    <div\n      role=\"meter\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={total}\n      aria-valuenow={lit}\n      aria-valuetext={words}\n      data-mode={mode}\n      className={cn(\"kzs-gauge\", storyVariantClass(variant), brandClass(brand), className)}\n      style={{ \"--kzs-segments\": total, ...style } as React.CSSProperties}\n      {...props}\n    >\n      {showLabel && (\n        <div className=\"kzs-gauge-head\" aria-hidden>\n          <span className=\"kzs-gauge-label\">{label}</span>\n          <span className=\"kzs-gauge-value\">{words}</span>\n        </div>\n      )}\n      <div className=\"kzs-gauge-cells\" aria-hidden>\n        {Array.from({ length: total }, (_, i) => {\n          const on = i < lit;\n          const animate = mode === \"fill\" ? on : !on;\n          const order = mode === \"fill\" ? i : i - lit;\n          return (\n            <span\n              key={i}\n              className=\"kzs-gauge-cell\"\n              data-lit={on ? \"\" : undefined}\n              data-animate={animate ? \"\" : undefined}\n              style={animate ? ({ \"--i\": order } as React.CSSProperties) : undefined}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA0DQ,SACE,KADF;AAlBD,SAAS,UAAU,EAAE,OAAO,UAAU,OAAO,WAAW,OAAO,QAAQ,YAAY,MAAM,SAAS,OAAO,WAAW,OAAO,GAAG,MAAM,GAAmB;AAC5J,QAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,CAAC;AAC9C,QAAM,MAAM,KAAK,IAAI,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,SAAS,KAAK,CAAC,CAAC;AACnE,QAAM,QAAQ,aAAa,GAAG,GAAG,MAAM,KAAK;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,kBAAgB;AAAA,MAChB,aAAW;AAAA,MACX,WAAW,GAAG,aAAa,kBAAkB,OAAO,GAAG,WAAW,KAAK,GAAG,SAAS;AAAA,MACnF,OAAO,EAAE,kBAAkB,OAAO,GAAG,MAAM;AAAA,MAC1C,GAAG;AAAA,MAEH;AAAA,qBACC,qBAAC,SAAI,WAAU,kBAAiB,eAAW,MACzC;AAAA,8BAAC,UAAK,WAAU,mBAAmB,iBAAM;AAAA,UACzC,oBAAC,UAAK,WAAU,mBAAmB,iBAAM;AAAA,WAC3C;AAAA,QAEF,oBAAC,SAAI,WAAU,mBAAkB,eAAW,MACzC,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MAAM;AACvC,gBAAM,KAAK,IAAI;AACf,gBAAM,UAAU,SAAS,SAAS,KAAK,CAAC;AACxC,gBAAM,QAAQ,SAAS,SAAS,IAAI,IAAI;AACxC,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,WAAU;AAAA,cACV,YAAU,KAAK,KAAK;AAAA,cACpB,gBAAc,UAAU,KAAK;AAAA,cAC7B,OAAO,UAAW,EAAE,OAAO,MAAM,IAA4B;AAAA;AAAA,YAJxD;AAAA,UAKP;AAAA,QAEJ,CAAC,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/index.d.ts

@@ -34,10 +34,19 @@ declare function OrazakaLogo({ size, animated, title, className }: MarkProps): R
  */
 declare function OrochiaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
-type BrandId = "krizaka" | "orazaka" | "orochia";
+type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia";
 /** The mark of a Krizaka brand by id — for navigation, cards and lists driven by data. */
 declare function ProductLogo({ id, ...props }: MarkProps & {
     id: BrandId;
 }): React.JSX.Element;
 
-export { type BrandId, KrizakaLogo, type MarkProps, OrazakaLogo, OrochiaLogo, ProductLogo, cx };
+/**
+ * The Yazakia mark: two voices — two solid speech bubbles that overlap, the left a shade deeper — in the Yazakia
+ * gradient (emerald → turquoise, the brand's mark gradient of @krizaka/tokens, the same in dark and light). Where they
+ * overlap, what the two share, is the bright core: a lens lit from above that breathes. The pair, two nodes on the
+ * dashed orbit, turns slowly around it — the family's grammar (orbit, ring, bold emblem, bright core). Below 48 px it
+ * crops to the emblem.
+ */
+declare function YazakiaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
+
+export { type BrandId, KrizakaLogo, type MarkProps, OrazakaLogo, OrochiaLogo, ProductLogo, YazakiaLogo, cx };

package/dist/index.js

@@ -42,6 +42,16 @@ var marks = /* @__PURE__ */ Object.freeze({
       "100%",
       "#f472b6"
     ]
+  ],
+  "yazakia": [
+    [
+      "0%",
+      "#079d61"
+    ],
+    [
+      "100%",
+      "#089b96"
+    ]
   ]
 });
 
@@ -247,12 +257,86 @@ function OrochiaLogo({ size = 36, animated = true, title, className }) {
   ] });
 }
 
+// src/marks/yazakia-geometry.ts
+var turquoise = marks.yazakia[marks.yazakia.length - 1][1];
+var YAZAKIA = {
+  viewBox: "0 0 400 400",
+  croppedViewBox: "80 80 240 240",
+  center: 200,
+  /** The two voices, left then right: each a bubble (cut around the lens) and its tail. */
+  voices: [
+    { body: "M191.9 109 A80 80 0 1 0 191.9 259 A87 87 0 0 1 191.9 109 Z", tail: "M98 230 Q104 268 88 294 Q122 288 144 262 L130 200 Z" },
+    { body: "M208.1 109 A80 80 0 1 1 208.1 259 A87 87 0 0 0 208.1 109 Z", tail: "M302 230 Q296 268 312 294 Q278 288 256 262 L270 200 Z" }
+  ],
+  /** The left voice, a shade deeper: the depth between the two. */
+  shade: { color: "#000", opacity: 0.22 },
+  /** Where the bubbles overlap: the core, lit from above. */
+  lens: { d: "M200 112.6 A80 80 0 0 1 200 255.4 A80 80 0 0 1 200 112.6 Z", y1: 112.6, y2: 255.4 },
+  gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yazakia },
+  /** The light on the lens: bright at the top, fading down. */
+  highlight: { color: "#f0fdfa", from: 0.75, to: 0.2 },
+  /** The pair: two nodes on the orbit, opposite each other, that turn with it. */
+  pair: { r: 8, at: [[40, 200], [360, 200]] },
+  glow: { color: turquoise, opacity: 0.16 },
+  /** The core's breathing shadow (web), in the mark's turquoise. */
+  pulse: { color: turquoise, low: 0.3, high: 0.6 },
+  orbit: { r: 160, dash: "8 8", width: 1.5 },
+  ring: { r: 134, width: 1 }
+};
+
+// src/marks/YazakiaLogo.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var CSS4 = `
+.yzm-orbit { transform-origin: 200px 200px; animation: yzm-orbit 30s linear infinite; }
+.yzm-core { transform-box: fill-box; transform-origin: center; animation: yzm-core 3.2s ease-in-out infinite; }
+@keyframes yzm-orbit { to { transform: rotate(360deg); } }
+@keyframes yzm-core {
+  0%, 100% { filter: drop-shadow(0 0 6px ${withAlpha(YAZAKIA.pulse.color, YAZAKIA.pulse.low)}); opacity: .9; }
+  50% { filter: drop-shadow(0 0 14px ${withAlpha(YAZAKIA.pulse.color, YAZAKIA.pulse.high)}); opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) { .yzm-orbit, .yzm-core { animation: none; } }
+`;
+function YazakiaLogo({ size = 32, animated = true, title, className }) {
+  const id = useIds("yzm", ["gradient", "light", "glow"]);
+  const fill = `url(#${id.gradient})`;
+  return /* @__PURE__ */ jsxs4("svg", { width: size, height: size, viewBox: size < 48 ? YAZAKIA.croppedViewBox : YAZAKIA.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", className, ...a11y(title), children: [
+    /* @__PURE__ */ jsx4("style", { children: CSS4 }),
+    /* @__PURE__ */ jsxs4("defs", { children: [
+      /* @__PURE__ */ jsx4("linearGradient", { id: id.gradient, gradientUnits: "userSpaceOnUse", x1: YAZAKIA.gradient.x1, y1: YAZAKIA.gradient.y1, x2: YAZAKIA.gradient.x2, y2: YAZAKIA.gradient.y2, children: YAZAKIA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx4("stop", { offset, stopColor: color }, offset)) }),
+      /* @__PURE__ */ jsxs4("linearGradient", { id: id.light, gradientUnits: "userSpaceOnUse", x1: "0", y1: YAZAKIA.lens.y1, x2: "0", y2: YAZAKIA.lens.y2, children: [
+        /* @__PURE__ */ jsx4("stop", { offset: "0%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.from }),
+        /* @__PURE__ */ jsx4("stop", { offset: "100%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.to })
+      ] }),
+      /* @__PURE__ */ jsxs4("radialGradient", { id: id.glow, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx4("stop", { offset: "0%", stopColor: YAZAKIA.glow.color, stopOpacity: YAZAKIA.glow.opacity }),
+        /* @__PURE__ */ jsx4("stop", { offset: "100%", stopColor: YAZAKIA.glow.color, stopOpacity: "0" })
+      ] })
+    ] }),
+    size >= 48 ? /* @__PURE__ */ jsx4("circle", { cx: YAZAKIA.center, cy: YAZAKIA.center, r: "190", fill: `url(#${id.glow})` }) : null,
+    /* @__PURE__ */ jsx4("circle", { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.ring.r, stroke: neutral("--kz-border-default", 30), strokeWidth: YAZAKIA.ring.width, opacity: ".35" }),
+    /* @__PURE__ */ jsxs4("g", { className: animated ? "yzm-orbit" : void 0, children: [
+      /* @__PURE__ */ jsx4("circle", { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.orbit.r, stroke: neutral("--kz-border-strong", 40), strokeWidth: YAZAKIA.orbit.width, strokeDasharray: YAZAKIA.orbit.dash, opacity: ".6" }),
+      YAZAKIA.pair.at.map(([cx2, cy]) => /* @__PURE__ */ jsx4("circle", { cx: cx2, cy, r: YAZAKIA.pair.r, fill }, cx2))
+    ] }),
+    YAZAKIA.voices.map((v, i) => /* @__PURE__ */ jsxs4("g", { children: [
+      /* @__PURE__ */ jsx4("path", { d: v.body, fill }),
+      /* @__PURE__ */ jsx4("path", { d: v.tail, fill }),
+      i === 0 ? /* @__PURE__ */ jsx4("path", { d: `${v.body} ${v.tail}`, fill: YAZAKIA.shade.color, opacity: YAZAKIA.shade.opacity }) : null
+    ] }, v.body)),
+    /* @__PURE__ */ jsxs4("g", { className: animated ? "yzm-core" : void 0, children: [
+      /* @__PURE__ */ jsx4("path", { d: YAZAKIA.lens.d, fill }),
+      /* @__PURE__ */ jsx4("path", { d: YAZAKIA.lens.d, fill: `url(#${id.light})` })
+    ] })
+  ] });
+}
+
 // src/marks/ProductLogo.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function ProductLogo({ id, ...props }) {
-  if (id === "krizaka") return /* @__PURE__ */ jsx4(KrizakaLogo, { ...props });
-  if (id === "orazaka") return /* @__PURE__ */ jsx4(OrazakaLogo, { ...props });
-  return /* @__PURE__ */ jsx4(OrochiaLogo, { ...props });
+  if (id === "krizaka") return /* @__PURE__ */ jsx5(KrizakaLogo, { ...props });
+  if (id === "orazaka") return /* @__PURE__ */ jsx5(OrazakaLogo, { ...props });
+  if (id === "yazakia") return /* @__PURE__ */ jsx5(YazakiaLogo, { ...props });
+  return /* @__PURE__ */ jsx5(OrochiaLogo, { ...props });
 }
 export {
   KrizakaLogo,
@@ -261,6 +345,7 @@ export {
   OrochiaLogo,
   ProductLogo,
   RotatingWord,
+  YazakiaLogo,
   cx
 };
 //# sourceMappingURL=index.js.map