@krizaka/ui 3.34.0 → 3.36.0

package/dist/description-list.js

@@ -21,7 +21,7 @@ var descriptionList = tv({
       grid: {
         root: "grid grid-cols-[repeat(auto-fill,minmax(var(--kz-kv-min,10rem),1fr))] gap-3",
         pair: "rounded-xl border border-border-default bg-surface-1 px-4 py-3",
-        term: "uppercase tracking-wider",
+        term: "",
         details: "mt-1 font-display text-lg font-bold tabular-nums"
       }
     }

package/dist/description-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/description-list/description-list.tsx"],"sourcesContent":["// Server-safe. Facts about one thing, as term and value: a job's details, a payout's breakdown, a profile. A real\n// `<dl>` (each pair in a `<div>`, as HTML allows): stacked, inline (term beside its value) or a grid of cards\n// (`KeyValueGrid`). Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const descriptionList = tv({\n  slots: {\n    root: \"m-0 w-full\",\n    pair: \"min-w-0\",\n    term: \"text-xs font-semibold text-fg-secondary\",\n    details: \"m-0 min-w-0 break-words text-sm text-fg\",\n    hint: \"mt-0.5 block text-xs text-fg-secondary\",\n  },\n  variants: {\n    layout: {\n      stacked: { root: \"flex flex-col gap-4\", details: \"mt-1\" },\n      inline: {\n        root: \"divide-y divide-border-subtle\",\n        pair: \"flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1 py-2.5 first:pt-0 last:pb-0\",\n        term: \"text-sm font-normal\",\n        details: \"text-right font-medium tabular-nums\",\n      },\n      grid: {\n        root: \"grid grid-cols-[repeat(auto-fill,minmax(var(--kz-kv-min,10rem),1fr))] gap-3\",\n        pair: \"rounded-xl border border-border-default bg-surface-1 px-4 py-3\",\n        term: \"uppercase tracking-wider\",\n        details: \"mt-1 font-display text-lg font-bold tabular-nums\",\n      },\n    },\n  },\n  defaultVariants: { layout: \"stacked\" },\n});\n\nexport type DescriptionItem = {\n  /** The term (“Status”, “Credits”) — passed translated. */\n  term: React.ReactNode;\n  /** The value: text, a `Badge`, a link. */\n  details: React.ReactNode;\n  /** A line under the value (a date, a unit). */\n  hint?: React.ReactNode;\n  /** A stable key, when the terms are not unique strings. */\n  id?: string;\n};\n\nexport type DescriptionListProps = Omit<React.ComponentProps<\"dl\">, \"children\"> & {\n  /** The pairs, in reading order. */\n  items: readonly DescriptionItem[];\n  /** stacked (default: a details panel) · inline (term left, value right: a receipt, a summary) · grid (cards). */\n  layout?: \"stacked\" | \"inline\" | \"grid\";\n};\n\n/** Term and value pairs — a job's details, a payout's breakdown — stacked, inline like a receipt, or as cards. */\nexport function DescriptionList({ items, layout, className, ...props }: DescriptionListProps) {\n  const s = descriptionList({ layout });\n  return (\n    <dl className={s.root({ className })} {...props}>\n      {items.map((item, i) => (\n        <div key={item.id ?? (typeof item.term === \"string\" ? item.term : i)} className={s.pair()}>\n          <dt className={s.term()}>{item.term}</dt>\n          <dd className={s.details()}>\n            {item.details}\n            {item.hint ? <span className={s.hint()}>{item.hint}</span> : null}\n          </dd>\n        </div>\n      ))}\n    </dl>\n  );\n}\n\nexport type KeyValueGridProps = Omit<DescriptionListProps, \"layout\"> & {\n  /** The narrowest a card may be before the grid wraps, in rem. Default 10. */\n  minWidth?: number;\n};\n\n/** Key figures as a grid of cards that wraps with the width: a job's numbers, an account's limits. */\nexport function KeyValueGrid({ minWidth = 10, style, ...props }: KeyValueGridProps) {\n  return <DescriptionList layout=\"grid\" style={{ ...style, [\"--kz-kv-min\" as string]: `${minWidth}rem` }} {...props} />;\n}\n"],"mappings":";AAIA,SAAS,UAAU;AAuDT,cACA,YADA;AArDH,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS,EAAE,MAAM,uBAAuB,SAAS,OAAO;AAAA,MACxD,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,QAAQ,UAAU;AACvC,CAAC;AAqBM,SAAS,gBAAgB,EAAE,OAAO,QAAQ,WAAW,GAAG,MAAM,GAAyB;AAC5F,QAAM,IAAI,gBAAgB,EAAE,OAAO,CAAC;AACpC,SACE,oBAAC,QAAG,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACvC,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,SAAqE,WAAW,EAAE,KAAK,GACtF;AAAA,wBAAC,QAAG,WAAW,EAAE,KAAK,GAAI,eAAK,MAAK;AAAA,IACpC,qBAAC,QAAG,WAAW,EAAE,QAAQ,GACtB;AAAA,WAAK;AAAA,MACL,KAAK,OAAO,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,eAAK,MAAK,IAAU;AAAA,OAC/D;AAAA,OALQ,KAAK,OAAO,OAAO,KAAK,SAAS,WAAW,KAAK,OAAO,EAMlE,CACD,GACH;AAEJ;AAQO,SAAS,aAAa,EAAE,WAAW,IAAI,OAAO,GAAG,MAAM,GAAsB;AAClF,SAAO,oBAAC,mBAAgB,QAAO,QAAO,OAAO,EAAE,GAAG,OAAO,CAAC,aAAuB,GAAG,GAAG,QAAQ,MAAM,GAAI,GAAG,OAAO;AACrH;","names":[]}
+{"version":3,"sources":["../src/description-list/description-list.tsx"],"sourcesContent":["// Server-safe. Facts about one thing, as term and value: a job's details, a payout's breakdown, a profile. A real\n// `<dl>` (each pair in a `<div>`, as HTML allows): stacked, inline (term beside its value) or a grid of cards\n// (`KeyValueGrid`). Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const descriptionList = tv({\n  slots: {\n    root: \"m-0 w-full\",\n    pair: \"min-w-0\",\n    term: \"text-xs font-semibold text-fg-secondary\",\n    details: \"m-0 min-w-0 break-words text-sm text-fg\",\n    hint: \"mt-0.5 block text-xs text-fg-secondary\",\n  },\n  variants: {\n    layout: {\n      stacked: { root: \"flex flex-col gap-4\", details: \"mt-1\" },\n      inline: {\n        root: \"divide-y divide-border-subtle\",\n        pair: \"flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1 py-2.5 first:pt-0 last:pb-0\",\n        term: \"text-sm font-normal\",\n        details: \"text-right font-medium tabular-nums\",\n      },\n      grid: {\n        root: \"grid grid-cols-[repeat(auto-fill,minmax(var(--kz-kv-min,10rem),1fr))] gap-3\",\n        pair: \"rounded-xl border border-border-default bg-surface-1 px-4 py-3\",\n        term: \"\",\n        details: \"mt-1 font-display text-lg font-bold tabular-nums\",\n      },\n    },\n  },\n  defaultVariants: { layout: \"stacked\" },\n});\n\nexport type DescriptionItem = {\n  /** The term (“Status”, “Credits”) — passed translated. */\n  term: React.ReactNode;\n  /** The value: text, a `Badge`, a link. */\n  details: React.ReactNode;\n  /** A line under the value (a date, a unit). */\n  hint?: React.ReactNode;\n  /** A stable key, when the terms are not unique strings. */\n  id?: string;\n};\n\nexport type DescriptionListProps = Omit<React.ComponentProps<\"dl\">, \"children\"> & {\n  /** The pairs, in reading order. */\n  items: readonly DescriptionItem[];\n  /** stacked (default: a details panel) · inline (term left, value right: a receipt, a summary) · grid (cards). */\n  layout?: \"stacked\" | \"inline\" | \"grid\";\n};\n\n/** Term and value pairs — a job's details, a payout's breakdown — stacked, inline like a receipt, or as cards. */\nexport function DescriptionList({ items, layout, className, ...props }: DescriptionListProps) {\n  const s = descriptionList({ layout });\n  return (\n    <dl className={s.root({ className })} {...props}>\n      {items.map((item, i) => (\n        <div key={item.id ?? (typeof item.term === \"string\" ? item.term : i)} className={s.pair()}>\n          <dt className={s.term()}>{item.term}</dt>\n          <dd className={s.details()}>\n            {item.details}\n            {item.hint ? <span className={s.hint()}>{item.hint}</span> : null}\n          </dd>\n        </div>\n      ))}\n    </dl>\n  );\n}\n\nexport type KeyValueGridProps = Omit<DescriptionListProps, \"layout\"> & {\n  /** The narrowest a card may be before the grid wraps, in rem. Default 10. */\n  minWidth?: number;\n};\n\n/** Key figures as a grid of cards that wraps with the width: a job's numbers, an account's limits. */\nexport function KeyValueGrid({ minWidth = 10, style, ...props }: KeyValueGridProps) {\n  return <DescriptionList layout=\"grid\" style={{ ...style, [\"--kz-kv-min\" as string]: `${minWidth}rem` }} {...props} />;\n}\n"],"mappings":";AAIA,SAAS,UAAU;AAuDT,cACA,YADA;AArDH,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS,EAAE,MAAM,uBAAuB,SAAS,OAAO;AAAA,MACxD,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,QAAQ,UAAU;AACvC,CAAC;AAqBM,SAAS,gBAAgB,EAAE,OAAO,QAAQ,WAAW,GAAG,MAAM,GAAyB;AAC5F,QAAM,IAAI,gBAAgB,EAAE,OAAO,CAAC;AACpC,SACE,oBAAC,QAAG,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACvC,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,SAAqE,WAAW,EAAE,KAAK,GACtF;AAAA,wBAAC,QAAG,WAAW,EAAE,KAAK,GAAI,eAAK,MAAK;AAAA,IACpC,qBAAC,QAAG,WAAW,EAAE,QAAQ,GACtB;AAAA,WAAK;AAAA,MACL,KAAK,OAAO,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,eAAK,MAAK,IAAU;AAAA,OAC/D;AAAA,OALQ,KAAK,OAAO,OAAO,KAAK,SAAS,WAAW,KAAK,OAAO,EAMlE,CACD,GACH;AAEJ;AAQO,SAAS,aAAa,EAAE,WAAW,IAAI,OAAO,GAAG,MAAM,GAAsB;AAClF,SAAO,oBAAC,mBAAgB,QAAO,QAAO,OAAO,EAAE,GAAG,OAAO,CAAC,aAAuB,GAAG,GAAG,QAAQ,MAAM,GAAI,GAAG,OAAO;AACrH;","names":[]}

package/dist/detail-layout.js

@@ -8,7 +8,7 @@ var detailLayout = tv({
     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",
+    eyebrow: "font-mono text-[11px] font-semibold 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",

package/dist/detail-layout.js.map

@@ -1 +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":[]}
+{"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 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/dialog.js

@@ -10,7 +10,7 @@ import {
   Sheet,
   dialog,
   useReturnFocus
-} from "./chunk-NJFCSVPT.js";
+} from "./chunk-6EAHUURY.js";
 import {
   Button
 } from "./chunk-SJS6RJIT.js";

package/dist/docs-nav.js

@@ -9,7 +9,7 @@ function DocsNav({ label, groups, current, linkAs, className, ...props }) {
   return /* @__PURE__ */ jsx("nav", { "aria-label": label, className: cn("flex flex-col gap-1 text-sm", className), ...props, children: groups.map((g) => {
     const open = g.items.some((i) => i.href === current) || !current;
     return /* @__PURE__ */ jsxs("details", { open, className: "group py-1", children: [
-      /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between rounded-md px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-fg-muted marker:content-none hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden", children: [
+      /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between rounded-md px-3 py-1.5 text-xs font-semibold text-fg-muted marker:content-none hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden", children: [
         g.title,
         /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", className: "h-3.5 w-3.5 fill-none stroke-current stroke-2 transition-transform group-open:rotate-180 motion-reduce:transition-none", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) })
       ] }),

package/dist/docs-nav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/docs-nav/docs-nav.tsx"],"sourcesContent":["// Server-safe. The pages of a documentation, grouped: a quiet list of links, each group a native `details` (open when it\n// holds the current page), only the current page marked. No state: the app tells which page is current.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport type { LinkComponent } from \"../page-hero\";\n\nexport type DocsNavGroup = {\n  /** A stable key. */\n  id: string;\n  /** The group's name — one word or two. */\n  title: React.ReactNode;\n  /** Its pages: a short, one-line title each. */\n  items: readonly { href: string; label: React.ReactNode }[];\n};\n\nexport type DocsNavProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The navigation's accessible name (`Documentation`). */\n  label: string;\n  /** The groups, in order. */\n  groups: readonly DocsNavGroup[];\n  /** The `href` of the page being read. */\n  current?: string;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** The pages of the documentation in groups; the group of the current page is open, the others fold. */\nexport function DocsNav({ label, groups, current, linkAs, className, ...props }: DocsNavProps) {\n  const L = linkAs ?? \"a\";\n  return (\n    <nav aria-label={label} className={cn(\"flex flex-col gap-1 text-sm\", className)} {...props}>\n      {groups.map((g) => {\n        const open = g.items.some((i) => i.href === current) || !current;\n        return (\n          <details key={g.id} open={open} className=\"group py-1\">\n            <summary className=\"flex cursor-pointer list-none items-center justify-between rounded-md px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-fg-muted marker:content-none hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden\">\n              {g.title}\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\" className=\"h-3.5 w-3.5 fill-none stroke-current stroke-2 transition-transform group-open:rotate-180 motion-reduce:transition-none\">\n                <path d=\"m6 9 6 6 6-6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </summary>\n            <ul className=\"mt-1 flex flex-col gap-0.5 border-l border-border-subtle\">\n              {g.items.map((i) => (\n                <li key={i.href}>\n                  <L\n                    href={i.href}\n                    aria-current={i.href === current ? \"page\" : undefined}\n                    className=\"-ml-px block truncate border-l border-transparent px-3 py-1.5 text-fg-secondary no-underline transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-ring aria-[current=page]:border-accent aria-[current=page]:font-semibold aria-[current=page]:text-fg\"\n                  >\n                    {i.label}\n                  </L>\n                </li>\n              ))}\n            </ul>\n          </details>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":";;;;;AAoCY,SAGI,KAHJ;AARL,SAAS,QAAQ,EAAE,OAAO,QAAQ,SAAS,QAAQ,WAAW,GAAG,MAAM,GAAiB;AAC7F,QAAM,IAAI,UAAU;AACpB,SACE,oBAAC,SAAI,cAAY,OAAO,WAAW,GAAG,+BAA+B,SAAS,GAAI,GAAG,OAClF,iBAAO,IAAI,CAAC,MAAM;AACjB,UAAM,OAAO,EAAE,MAAM,KAAK,CAAC,MAAM,EAAE,SAAS,OAAO,KAAK,CAAC;AACzD,WACE,qBAAC,aAAmB,MAAY,WAAU,cACxC;AAAA,2BAAC,aAAQ,WAAU,ySAChB;AAAA,UAAE;AAAA,QACH,oBAAC,SAAI,SAAQ,aAAY,eAAY,QAAO,WAAU,SAAQ,WAAU,0HACtE,8BAAC,UAAK,GAAE,gBAAe,eAAc,SAAQ,gBAAe,SAAQ,GACtE;AAAA,SACF;AAAA,MACA,oBAAC,QAAG,WAAU,4DACX,YAAE,MAAM,IAAI,CAAC,MACZ,oBAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,EAAE;AAAA,UACR,gBAAc,EAAE,SAAS,UAAU,SAAS;AAAA,UAC5C,WAAU;AAAA,UAET,YAAE;AAAA;AAAA,MACL,KAPO,EAAE,IAQX,CACD,GACH;AAAA,SAnBY,EAAE,EAoBhB;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../src/docs-nav/docs-nav.tsx"],"sourcesContent":["// Server-safe. The pages of a documentation, grouped: a quiet list of links, each group a native `details` (open when it\n// holds the current page), only the current page marked. No state: the app tells which page is current.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport type { LinkComponent } from \"../page-hero\";\n\nexport type DocsNavGroup = {\n  /** A stable key. */\n  id: string;\n  /** The group's name — one word or two. */\n  title: React.ReactNode;\n  /** Its pages: a short, one-line title each. */\n  items: readonly { href: string; label: React.ReactNode }[];\n};\n\nexport type DocsNavProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The navigation's accessible name (`Documentation`). */\n  label: string;\n  /** The groups, in order. */\n  groups: readonly DocsNavGroup[];\n  /** The `href` of the page being read. */\n  current?: string;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** The pages of the documentation in groups; the group of the current page is open, the others fold. */\nexport function DocsNav({ label, groups, current, linkAs, className, ...props }: DocsNavProps) {\n  const L = linkAs ?? \"a\";\n  return (\n    <nav aria-label={label} className={cn(\"flex flex-col gap-1 text-sm\", className)} {...props}>\n      {groups.map((g) => {\n        const open = g.items.some((i) => i.href === current) || !current;\n        return (\n          <details key={g.id} open={open} className=\"group py-1\">\n            <summary className=\"flex cursor-pointer list-none items-center justify-between rounded-md px-3 py-1.5 text-xs font-semibold text-fg-muted marker:content-none hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden\">\n              {g.title}\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\" className=\"h-3.5 w-3.5 fill-none stroke-current stroke-2 transition-transform group-open:rotate-180 motion-reduce:transition-none\">\n                <path d=\"m6 9 6 6 6-6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </summary>\n            <ul className=\"mt-1 flex flex-col gap-0.5 border-l border-border-subtle\">\n              {g.items.map((i) => (\n                <li key={i.href}>\n                  <L\n                    href={i.href}\n                    aria-current={i.href === current ? \"page\" : undefined}\n                    className=\"-ml-px block truncate border-l border-transparent px-3 py-1.5 text-fg-secondary no-underline transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-ring aria-[current=page]:border-accent aria-[current=page]:font-semibold aria-[current=page]:text-fg\"\n                  >\n                    {i.label}\n                  </L>\n                </li>\n              ))}\n            </ul>\n          </details>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":";;;;;AAoCY,SAGI,KAHJ;AARL,SAAS,QAAQ,EAAE,OAAO,QAAQ,SAAS,QAAQ,WAAW,GAAG,MAAM,GAAiB;AAC7F,QAAM,IAAI,UAAU;AACpB,SACE,oBAAC,SAAI,cAAY,OAAO,WAAW,GAAG,+BAA+B,SAAS,GAAI,GAAG,OAClF,iBAAO,IAAI,CAAC,MAAM;AACjB,UAAM,OAAO,EAAE,MAAM,KAAK,CAAC,MAAM,EAAE,SAAS,OAAO,KAAK,CAAC;AACzD,WACE,qBAAC,aAAmB,MAAY,WAAU,cACxC;AAAA,2BAAC,aAAQ,WAAU,gRAChB;AAAA,UAAE;AAAA,QACH,oBAAC,SAAI,SAAQ,aAAY,eAAY,QAAO,WAAU,SAAQ,WAAU,0HACtE,8BAAC,UAAK,GAAE,gBAAe,eAAc,SAAQ,gBAAe,SAAQ,GACtE;AAAA,SACF;AAAA,MACA,oBAAC,QAAG,WAAU,4DACX,YAAE,MAAM,IAAI,CAAC,MACZ,oBAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,EAAE;AAAA,UACR,gBAAc,EAAE,SAAS,UAAU,SAAS;AAAA,UAC5C,WAAU;AAAA,UAET,YAAE;AAAA;AAAA,MACL,KAPO,EAAE,IAQX,CACD,GACH;AAAA,SAnBY,EAAE,EAoBhB;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/dropdown-menu.js

@@ -15,7 +15,7 @@ var menu = tv({
     content: cn(floating, "min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto overflow-x-hidden overscroll-contain p-1 origin-(--radix-dropdown-menu-content-transform-origin)"),
     item: "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 [&>svg]:text-fg-secondary",
     indicator: "ml-auto flex h-4 w-4 items-center justify-center text-fg-accent",
-    label: "px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary",
+    label: "px-2.5 pb-1 pt-2 text-[11px] font-semibold text-fg-secondary",
     separator: "-mx-1 my-1 h-px bg-border-subtle"
   },
   variants: {

package/dist/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto overflow-x-hidden overscroll-contain p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-fg-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The label reads in the danger text role (≥ 4.5:1 on the menu surface, both themes); the icon and the highlight\n    // carry the danger fill.\n    tone: { default: {}, danger: { item: \"text-fg-danger data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\n/** A submenu's trigger: an item that opens `DropdownMenu.SubContent`, with a chevron. */\nexport function DropdownMenuSubTrigger({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.SubTrigger>) {\n  return (\n    <MenuPrimitive.SubTrigger className={s.item({ className: cn(\"data-[state=open]:bg-surface-3\", className) })} {...props}>\n      {children}\n      <svg className=\"ml-auto !h-4 !w-4 text-fg-secondary\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    </MenuPrimitive.SubTrigger>\n  );\n}\n\n/** The submenu's panel (same material as the menu). */\nexport function DropdownMenuSubContent({ sideOffset = 4, collisionPadding = 8, className, ...props }: React.ComponentProps<typeof MenuPrimitive.SubContent>) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.SubContent sideOffset={sideOffset} collisionPadding={collisionPadding} className={s.content({ className: cn(\"max-h-(--radix-dropdown-menu-content-available-height)\", className) })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\n/** One choice among several (`DropdownMenu.RadioGroup` holds the value): a language, a sort order. */\nexport function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.RadioItem>) {\n  return (\n    <MenuPrimitive.RadioItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n  Sub: MenuPrimitive.Sub,\n  SubTrigger: DropdownMenuSubTrigger,\n  SubContent: DropdownMenuSubContent,\n  RadioGroup: MenuPrimitive.RadioGroup,\n  RadioItem: DropdownMenuRadioItem,\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto overflow-x-hidden overscroll-contain p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-fg-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The label reads in the danger text role (≥ 4.5:1 on the menu surface, both themes); the icon and the highlight\n    // carry the danger fill.\n    tone: { default: {}, danger: { item: \"text-fg-danger data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\n/** A submenu's trigger: an item that opens `DropdownMenu.SubContent`, with a chevron. */\nexport function DropdownMenuSubTrigger({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.SubTrigger>) {\n  return (\n    <MenuPrimitive.SubTrigger className={s.item({ className: cn(\"data-[state=open]:bg-surface-3\", className) })} {...props}>\n      {children}\n      <svg className=\"ml-auto !h-4 !w-4 text-fg-secondary\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    </MenuPrimitive.SubTrigger>\n  );\n}\n\n/** The submenu's panel (same material as the menu). */\nexport function DropdownMenuSubContent({ sideOffset = 4, collisionPadding = 8, className, ...props }: React.ComponentProps<typeof MenuPrimitive.SubContent>) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.SubContent sideOffset={sideOffset} collisionPadding={collisionPadding} className={s.content({ className: cn(\"max-h-(--radix-dropdown-menu-content-available-height)\", className) })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\n/** One choice among several (`DropdownMenu.RadioGroup` holds the value): a language, a sort order. */\nexport function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.RadioItem>) {\n  return (\n    <MenuPrimitive.RadioItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n  Sub: MenuPrimitive.Sub,\n  SubTrigger: DropdownMenuSubTrigger,\n  SubContent: DropdownMenuSubContent,\n  RadioGroup: MenuPrimitive.RadioGroup,\n  RadioItem: DropdownMenuRadioItem,\n};\n"],"mappings":"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","names":[]}

package/dist/filter-bar.js

@@ -5,7 +5,7 @@ import {
   filterBar,
   readFilterParams,
   writeFilterParams
-} from "./chunk-2PNLHZLT.js";
+} from "./chunk-YOTQD7JD.js";
 import "./chunk-7UCPGXKN.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-J3NC6ER4.js";

package/dist/footnote.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+type CaptionProps = React.HTMLAttributes<HTMLElement> & {
+    /** The figure's number, typed before the text: `fig. 2`. */
+    figure?: React.ReactNode;
+    /** `figcaption` inside a `<figure>`, `p` elsewhere. @default "figcaption" */
+    as?: "figcaption" | "p";
+};
+/** A caption in the typewriter face: the figure's number, a dash, what it shows. */
+declare function Caption({ figure, as: Tag, className, children, ...props }: CaptionProps): React.JSX.Element;
+type FootnoteRefProps = Omit<React.HTMLAttributes<HTMLElement>, "id"> & {
+    /** The note's number. */
+    n: number;
+    /** The prefix of the ids, when a page has several sets of notes. @default "fn" */
+    prefix?: string;
+};
+/** The superscript number in the text, linked to its note (and the note's link back lands here). */
+declare function FootnoteRef({ n, prefix, className, ...props }: FootnoteRefProps): React.JSX.Element;
+type FootnotesProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The notes, in order: the first is note 1. */
+    notes: readonly React.ReactNode[];
+    /** The prefix of the ids (the same as the refs'). @default "fn" */
+    prefix?: string;
+    /** The heading of the notes, for assistive technology (visually a rule). @default "Notes" */
+    label?: string;
+    /** The label of the way back to the text. @default "Back to the text" */
+    backLabel?: string;
+};
+/** The notes at the foot of a page: a short rule, numbered notes in small print, each with its way back to the text. */
+declare function Footnotes({ notes, prefix, label, backLabel, className, ...props }: FootnotesProps): React.JSX.Element;
+
+export { Caption, type CaptionProps, FootnoteRef, type FootnoteRefProps, Footnotes, type FootnotesProps };

package/dist/footnote.js

@@ -0,0 +1,29 @@
+import {
+  cn
+} from "./chunk-W675RFOA.js";
+
+// src/footnote/footnote.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Caption({ figure, as: Tag = "figcaption", className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(Tag, { className: cn("kz-caption", className), ...props, children: [
+    figure && /* @__PURE__ */ jsx("b", { className: "kz-caption-figure", children: figure }),
+    figure && " \u2014 ",
+    children
+  ] });
+}
+function FootnoteRef({ n, prefix = "fn", className, ...props }) {
+  return /* @__PURE__ */ jsx("sup", { id: `${prefix}-ref-${n}`, className: cn("kz-fnref", className), ...props, children: /* @__PURE__ */ jsx("a", { href: `#${prefix}-${n}`, "aria-label": `Note ${n}`, children: n }) });
+}
+function Footnotes({ notes, prefix = "fn", label = "Notes", backLabel = "Back to the text", className, ...props }) {
+  return /* @__PURE__ */ jsx("aside", { "aria-label": label, className: cn("kz-footnotes", className), ...props, children: /* @__PURE__ */ jsx("ol", { children: notes.map((note, i) => /* @__PURE__ */ jsxs("li", { id: `${prefix}-${i + 1}`, children: [
+    note,
+    " ",
+    /* @__PURE__ */ jsx("a", { href: `#${prefix}-ref-${i + 1}`, className: "kz-fn-back", "aria-label": `${backLabel} (${i + 1})`, children: "\u21A9" })
+  ] }, i)) }) });
+}
+export {
+  Caption,
+  FootnoteRef,
+  Footnotes
+};
+//# sourceMappingURL=footnote.js.map

package/dist/footnote.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/footnote/footnote.tsx"],"sourcesContent":["// Server-safe. The footnote and the caption of the Cahier (ADR-004, blocks.css): what a page says in small print. A\n// `Caption` names a figure (`fig. 2 — The owl reads every line`); a `FootnoteRef` is the superscript number in the text,\n// linked to its note; `Footnotes` lists the notes at the foot, each with its way back to the text.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type CaptionProps = React.HTMLAttributes<HTMLElement> & {\n  /** The figure's number, typed before the text: `fig. 2`. */\n  figure?: React.ReactNode;\n  /** `figcaption` inside a `<figure>`, `p` elsewhere. @default \"figcaption\" */\n  as?: \"figcaption\" | \"p\";\n};\n\n/** A caption in the typewriter face: the figure's number, a dash, what it shows. */\nexport function Caption({ figure, as: Tag = \"figcaption\", className, children, ...props }: CaptionProps) {\n  return (\n    <Tag className={cn(\"kz-caption\", className)} {...props}>\n      {figure && <b className=\"kz-caption-figure\">{figure}</b>}\n      {figure && \" — \"}\n      {children}\n    </Tag>\n  );\n}\n\nexport type FootnoteRefProps = Omit<React.HTMLAttributes<HTMLElement>, \"id\"> & {\n  /** The note's number. */\n  n: number;\n  /** The prefix of the ids, when a page has several sets of notes. @default \"fn\" */\n  prefix?: string;\n};\n\n/** The superscript number in the text, linked to its note (and the note's link back lands here). */\nexport function FootnoteRef({ n, prefix = \"fn\", className, ...props }: FootnoteRefProps) {\n  return (\n    <sup id={`${prefix}-ref-${n}`} className={cn(\"kz-fnref\", className)} {...props}>\n      <a href={`#${prefix}-${n}`} aria-label={`Note ${n}`}>\n        {n}\n      </a>\n    </sup>\n  );\n}\n\nexport type FootnotesProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The notes, in order: the first is note 1. */\n  notes: readonly React.ReactNode[];\n  /** The prefix of the ids (the same as the refs'). @default \"fn\" */\n  prefix?: string;\n  /** The heading of the notes, for assistive technology (visually a rule). @default \"Notes\" */\n  label?: string;\n  /** The label of the way back to the text. @default \"Back to the text\" */\n  backLabel?: string;\n};\n\n/** The notes at the foot of a page: a short rule, numbered notes in small print, each with its way back to the text. */\nexport function Footnotes({ notes, prefix = \"fn\", label = \"Notes\", backLabel = \"Back to the text\", className, ...props }: FootnotesProps) {\n  return (\n    <aside aria-label={label} className={cn(\"kz-footnotes\", className)} {...props}>\n      <ol>\n        {notes.map((note, i) => (\n          <li key={i} id={`${prefix}-${i + 1}`}>\n            {note}{\" \"}\n            <a href={`#${prefix}-ref-${i + 1}`} className=\"kz-fn-back\" aria-label={`${backLabel} (${i + 1})`}>\n              ↩\n            </a>\n          </li>\n        ))}\n      </ol>\n    </aside>\n  );\n}\n"],"mappings":";;;;;AAiBI,SACa,KADb;AAFG,SAAS,QAAQ,EAAE,QAAQ,IAAI,MAAM,cAAc,WAAW,UAAU,GAAG,MAAM,GAAiB;AACvG,SACE,qBAAC,OAAI,WAAW,GAAG,cAAc,SAAS,GAAI,GAAG,OAC9C;AAAA,cAAU,oBAAC,OAAE,WAAU,qBAAqB,kBAAO;AAAA,IACnD,UAAU;AAAA,IACV;AAAA,KACH;AAEJ;AAUO,SAAS,YAAY,EAAE,GAAG,SAAS,MAAM,WAAW,GAAG,MAAM,GAAqB;AACvF,SACE,oBAAC,SAAI,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OACvE,8BAAC,OAAE,MAAM,IAAI,MAAM,IAAI,CAAC,IAAI,cAAY,QAAQ,CAAC,IAC9C,aACH,GACF;AAEJ;AAcO,SAAS,UAAU,EAAE,OAAO,SAAS,MAAM,QAAQ,SAAS,YAAY,oBAAoB,WAAW,GAAG,MAAM,GAAmB;AACxI,SACE,oBAAC,WAAM,cAAY,OAAO,WAAW,GAAG,gBAAgB,SAAS,GAAI,GAAG,OACtE,8BAAC,QACE,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,QAAW,IAAI,GAAG,MAAM,IAAI,IAAI,CAAC,IAC/B;AAAA;AAAA,IAAM;AAAA,IACP,oBAAC,OAAE,MAAM,IAAI,MAAM,QAAQ,IAAI,CAAC,IAAI,WAAU,cAAa,cAAY,GAAG,SAAS,KAAK,IAAI,CAAC,KAAK,oBAElG;AAAA,OAJO,CAKT,CACD,GACH,GACF;AAEJ;","names":[]}

package/dist/genui.js

@@ -7,19 +7,19 @@ import {
 } from "./chunk-2DGLWTPS.js";
 import {
   DataTable
-} from "./chunk-KIBICUZK.js";
-import "./chunk-7Z4KHPFC.js";
+} from "./chunk-K2ZYB4HP.js";
+import "./chunk-YGIN2YIY.js";
 import "./chunk-JXLDUDTD.js";
 import "./chunk-3DHNN5V7.js";
 import "./chunk-KVDB4GXV.js";
-import "./chunk-2PNLHZLT.js";
+import "./chunk-YOTQD7JD.js";
 import "./chunk-7UCPGXKN.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-J3NC6ER4.js";
 import {
   cn
 } from "./chunk-NSLXEDIS.js";
-import "./chunk-REPTKUJ6.js";
+import "./chunk-7NRSPHAF.js";
 import "./chunk-ZIXB33X7.js";
 import "./chunk-FZBWEDQI.js";
 import "./chunk-CPA5CF35.js";

package/dist/geometry-DncHaYP8.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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), the lovebird that
+ * introduces (2026-10, with Yasakia: "l'inséparable présente") and the crane that listens (2026-10, with Yororis:
+ * "la grue écoute"), the magpie that keeps the score (2026-10, with Kachizaka: "la pie compte les points") and the
+ * beaver that builds the shop (2026-10, with Akinaza: "le castor artisan" — the one figure of the flock without
+ * feathers: its paws are drawn as wings, its paddle tail behind it), redrawn on one 120 × 120 grid so that any figure
+ * 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", "crane", "magpie", "beaver"];
+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, MascotMood as a, MascotTone as b };

package/dist/language-switch.js

@@ -2,7 +2,7 @@
 import {
   LanguageSwitch,
   languageSwitch
-} from "./chunk-3S4GHSPZ.js";
+} from "./chunk-63KCDMX2.js";
 
 // src/language-switch/href.ts
 var languageNames = {

package/dist/list.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Checkbox
-} from "./chunk-7Z4KHPFC.js";
+} from "./chunk-YGIN2YIY.js";
 import {
   useControllable
 } from "./chunk-FZBWEDQI.js";

package/dist/loader.js

@@ -23,13 +23,13 @@ var loader = tv({
       block: { box: "flex-col justify-center py-10 text-center text-sm", glyph: "h-9 w-9", mark: "h-9 w-9", text: "items-center" },
       overlay: {
         root: "absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] empty:hidden",
-        box: "flex-col rounded-xl border border-border-default bg-surface-1/90 px-6 py-5 text-center text-sm shadow-lg backdrop-blur-sm",
+        box: "flex-col rounded-xl border border-border-default bg-surface-1 px-6 py-5 text-center text-sm shadow-lg",
         glyph: "h-9 w-9",
         mark: "h-9 w-9",
         text: "items-center"
       },
       page: {
-        root: "fixed inset-0 z-50 flex items-center justify-center bg-surface-0/80 backdrop-blur-sm empty:hidden",
+        root: "fixed inset-0 z-50 flex items-center justify-center bg-surface-0 empty:hidden",
         box: "flex-col text-center",
         glyph: "h-14 w-14",
         mark: "h-14 w-14",

package/dist/loader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/loader/loader.tsx"],"sourcesContent":["// Client (timers). The whole life of a wait, done right once: nothing for the first instants (a fast answer never\n// flashes a spinner), then the Krizaka glyph with its words and an ETA, held long enough to be read, ending on a\n// check or a cross that is drawn and announced. `LoadingRegion` hands a region over from its content to a skeleton of\n// the same shape, then to words when the wait grows long, then back to the content.\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport const loader = tv({\n  slots: {\n    root: \"text-fg-secondary\",\n    box: \"kz-fade flex items-center gap-3\",\n    glyph: \"shrink-0 text-accent\",\n    mark: \"block shrink-0 [&>svg]:block [&>svg]:h-full [&>svg]:w-full\",\n    text: \"flex min-w-0 flex-col\",\n    label: \"font-medium text-fg\",\n    detail: \"text-xs text-fg-secondary tabular-nums\",\n  },\n  variants: {\n    variant: {\n      inline: { box: \"text-sm\", glyph: \"h-5 w-5\", mark: \"h-5 w-5\" },\n      block: { box: \"flex-col justify-center py-10 text-center text-sm\", glyph: \"h-9 w-9\", mark: \"h-9 w-9\", text: \"items-center\" },\n      overlay: {\n        root: \"absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] empty:hidden\",\n        box: \"flex-col rounded-xl border border-border-default bg-surface-1/90 px-6 py-5 text-center text-sm shadow-lg backdrop-blur-sm\",\n        glyph: \"h-9 w-9\", mark: \"h-9 w-9\",\n        text: \"items-center\",\n      },\n      page: {\n        root: \"fixed inset-0 z-50 flex items-center justify-center bg-surface-0/80 backdrop-blur-sm empty:hidden\",\n        box: \"flex-col text-center\",\n        glyph: \"h-14 w-14\", mark: \"h-14 w-14\",\n        text: \"items-center\",\n        label: \"font-display text-lg\",\n      },\n    },\n    ended: {\n      success: { glyph: \"text-fg-success\" },\n      error: { glyph: \"text-fg-danger\" },\n    },\n  },\n  defaultVariants: { variant: \"inline\" },\n});\n\nexport type LoaderVariants = VariantProps<typeof loader>;\n\n/**\n * `true` once `active` has lasted `delay` ms; then stays `true` at least `minDuration` ms — a wait that ends early never\n * shows, one that shows never blinks.\n */\nexport function useDelayedWait(active: boolean, delay = 250, minDuration = 600): boolean {\n  const [shown, setShown] = React.useState(false);\n  const since = React.useRef(0);\n  React.useEffect(() => {\n    if (active === shown) return;\n    const wait = active ? delay : Math.max(0, minDuration - (Date.now() - since.current));\n    const timer = setTimeout(() => {\n      since.current = Date.now();\n      setShown(active);\n    }, wait);\n    return () => clearTimeout(timer);\n  }, [active, shown, delay, minDuration]);\n  return shown;\n}\n\nexport interface LoaderProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** What is loading, in words (“Loading your invoices”) — passed translated; shown and announced. */\n  label: string;\n  /**\n   * loading · success · error. When the wait ends, the loader shows how it ended for `endDuration` ms, then disappears.\n   * @default \"loading\"\n   */\n  status?: \"loading\" | \"success\" | \"error\";\n  /** The words of a success (“Invoices loaded”) — passed translated. Default: nothing more than the check. */\n  successLabel?: string;\n  /** The words of a failure (“Could not load the invoices”) — passed translated. */\n  errorLabel?: string;\n  /** Between 0 and 1: a determinate wait — the trace grows to it and the percentage shows. */\n  value?: number | null;\n  /** The time left, in words (“About 20 s left”) — passed translated (`@krizaka/intl` formats durations). */\n  eta?: string;\n  /**\n   * Milliseconds before anything shows: a wait shorter than this never flashes.\n   * @default 250\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds it stays: it never blinks.\n   * @default 600\n   */\n  minDuration?: number;\n  /**\n   * Milliseconds the ending (check or cross) stays before the loader disappears; `0` never shows it, `Infinity` keeps it.\n   * @default 1600\n   */\n  endDuration?: number;\n  /**\n   * inline (beside the content) · block (a region's centre) · overlay (over a `relative` parent, frosted) · page (the\n   * whole screen).\n   * @default \"inline\"\n   */\n  variant?: LoaderVariants[\"variant\"];\n  /**\n   * The product's mark in place of the Krizaka glyph while it waits — `<OrochiaLogo animated />` (or `ProductLogo`) of\n   * `@krizaka/ui`; it takes the loader's size. The ending (check or cross) stays the glyph's. Decorative: leave `title` off.\n   */\n  mark?: React.ReactNode;\n}\n\n/**\n * A wait, from start to end. `role=\"status\"` (polite): its words are announced when it shows and when it ends. Under\n * prefers-reduced-motion the glyph rests on a still frame; the delay and the ending stay.\n */\nexport function Loader({\n  label,\n  status = \"loading\",\n  successLabel,\n  errorLabel,\n  value,\n  eta,\n  delay = 250,\n  minDuration = 600,\n  endDuration = 1600,\n  variant,\n  mark,\n  className,\n  ...props\n}: LoaderProps) {\n  const waiting = useDelayedWait(status === \"loading\", delay, minDuration);\n  // Rendered already ended (a result to show), it shows its ending; otherwise only a wait that was seen ends visibly.\n  const [ending, setEnding] = React.useState<\"success\" | \"error\" | null>(() => (status !== \"loading\" && endDuration > 0 ? status : null));\n  const wasWaiting = React.useRef(false);\n  React.useEffect(() => {\n    if (!Number.isFinite(endDuration)) return;\n    const hide = setTimeout(() => setEnding((e) => (wasWaiting.current ? e : null)), endDuration);\n    return () => clearTimeout(hide);\n    // Only the ending a loader was mounted with: later endings have their own timer below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  React.useEffect(() => {\n    if (waiting) {\n      wasWaiting.current = true;\n      return;\n    }\n    if (!wasWaiting.current || status === \"loading\") return;\n    wasWaiting.current = false;\n    const end = status;\n    const show = setTimeout(() => setEnding(endDuration > 0 ? end : null), 0);\n    const hide = Number.isFinite(endDuration) ? setTimeout(() => setEnding(null), endDuration) : undefined;\n    return () => {\n      clearTimeout(show);\n      clearTimeout(hide);\n    };\n  }, [waiting, status, endDuration]);\n\n  const phase = waiting ? \"loading\" : ending;\n  const s = loader({ variant, ended: phase === \"success\" || phase === \"error\" ? phase : undefined });\n  const known = phase === \"loading\" && typeof value === \"number\" && Number.isFinite(value);\n  const words = phase === \"success\" ? (successLabel ?? label) : phase === \"error\" ? (errorLabel ?? label) : label;\n  const detail = phase === \"loading\" ? [known ? `${Math.round(Math.min(1, Math.max(0, value)) * 100)} %` : null, eta].filter(Boolean).join(\" · \") : \"\";\n  return (\n    <div role=\"status\" aria-live=\"polite\" data-phase={phase ?? \"idle\"} className={s.root({ className })} {...props}>\n      {phase && (\n        <div className={s.box()}>\n          {mark && phase === \"loading\" ? (\n            <span aria-hidden className={s.mark()} data-mark=\"\">\n              {mark}\n            </span>\n          ) : (\n            <LoaderGlyph state={phase} value={known ? value : null} className={s.glyph()} />\n          )}\n          <span className={s.text()}>\n            <span className={s.label()}>{words}</span>\n            {detail && <span className={s.detail()}>{detail}</span>}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface LoadingRegionProps extends React.ComponentProps<\"div\"> {\n  /** Whether the content is on its way. */\n  loading: boolean;\n  /** What stands in while it loads: skeletons the shape of the content (no layout shift when it arrives). */\n  skeleton: React.ReactNode;\n  /** What is loading, in words — passed translated; announced when the wait shows. */\n  label: string;\n  /** The words when the wait grows long (“Still loading — the server is busy”) — passed translated. */\n  slowLabel?: string;\n  /**\n   * Milliseconds of skeleton before the words of a long wait appear over it.\n   * @default 4000\n   */\n  slowAfter?: number;\n  /**\n   * Milliseconds before the skeleton shows: a fast answer goes straight to the content.\n   * @default 200\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds the skeleton stays.\n   * @default 500\n   */\n  minDuration?: number;\n}\n\n/**\n * A region that hands over: its content → (after `delay`) a skeleton of the same shape → (after `slowAfter`) words over\n * the skeleton → its content again, fading in. `aria-busy` while it waits; the wait is announced once.\n */\nexport function LoadingRegion({\n  loading,\n  skeleton,\n  label,\n  slowLabel,\n  slowAfter = 4000,\n  delay = 200,\n  minDuration = 500,\n  className,\n  children,\n  ...props\n}: LoadingRegionProps) {\n  const waiting = useDelayedWait(loading, delay, minDuration);\n  const slow = useDelayedWait(waiting && loading, slowAfter, 0);\n  const busy = loading || waiting;\n  return (\n    <div aria-busy={busy} data-phase={waiting ? (slow ? \"slow\" : \"skeleton\") : busy ? \"pending\" : \"ready\"} className={[\"relative\", className].filter(Boolean).join(\" \")} {...props}>\n      <span role=\"status\" className=\"sr-only\">\n        {waiting ? (slow ? (slowLabel ?? label) : label) : \"\"}\n      </span>\n      {waiting ? (\n        <div aria-hidden className=\"kz-fade\">\n          {skeleton}\n        </div>\n      ) : busy ? (\n        // Within the delay: the skeleton holds the place, invisible — nothing flashes, nothing jumps.\n        <div aria-hidden className=\"invisible\">\n          {skeleton}\n        </div>\n      ) : (\n        <div className=\"kz-fade\">{children}</div>\n      )}\n      {waiting && slow && <Loader label={slowLabel ?? label} variant=\"overlay\" delay={0} minDuration={0} endDuration={0} aria-live=\"off\" role=\"presentation\" />}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/loader/loader.tsx"],"sourcesContent":["// Client (timers). The whole life of a wait, done right once: nothing for the first instants (a fast answer never\n// flashes a spinner), then the Krizaka glyph with its words and an ETA, held long enough to be read, ending on a\n// check or a cross that is drawn and announced. `LoadingRegion` hands a region over from its content to a skeleton of\n// the same shape, then to words when the wait grows long, then back to the content.\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport const loader = tv({\n  slots: {\n    root: \"text-fg-secondary\",\n    box: \"kz-fade flex items-center gap-3\",\n    glyph: \"shrink-0 text-accent\",\n    mark: \"block shrink-0 [&>svg]:block [&>svg]:h-full [&>svg]:w-full\",\n    text: \"flex min-w-0 flex-col\",\n    label: \"font-medium text-fg\",\n    detail: \"text-xs text-fg-secondary tabular-nums\",\n  },\n  variants: {\n    variant: {\n      inline: { box: \"text-sm\", glyph: \"h-5 w-5\", mark: \"h-5 w-5\" },\n      block: { box: \"flex-col justify-center py-10 text-center text-sm\", glyph: \"h-9 w-9\", mark: \"h-9 w-9\", text: \"items-center\" },\n      overlay: {\n        root: \"absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] empty:hidden\",\n        box: \"flex-col rounded-xl border border-border-default bg-surface-1 px-6 py-5 text-center text-sm shadow-lg\",\n        glyph: \"h-9 w-9\", mark: \"h-9 w-9\",\n        text: \"items-center\",\n      },\n      page: {\n        root: \"fixed inset-0 z-50 flex items-center justify-center bg-surface-0 empty:hidden\",\n        box: \"flex-col text-center\",\n        glyph: \"h-14 w-14\", mark: \"h-14 w-14\",\n        text: \"items-center\",\n        label: \"font-display text-lg\",\n      },\n    },\n    ended: {\n      success: { glyph: \"text-fg-success\" },\n      error: { glyph: \"text-fg-danger\" },\n    },\n  },\n  defaultVariants: { variant: \"inline\" },\n});\n\nexport type LoaderVariants = VariantProps<typeof loader>;\n\n/**\n * `true` once `active` has lasted `delay` ms; then stays `true` at least `minDuration` ms — a wait that ends early never\n * shows, one that shows never blinks.\n */\nexport function useDelayedWait(active: boolean, delay = 250, minDuration = 600): boolean {\n  const [shown, setShown] = React.useState(false);\n  const since = React.useRef(0);\n  React.useEffect(() => {\n    if (active === shown) return;\n    const wait = active ? delay : Math.max(0, minDuration - (Date.now() - since.current));\n    const timer = setTimeout(() => {\n      since.current = Date.now();\n      setShown(active);\n    }, wait);\n    return () => clearTimeout(timer);\n  }, [active, shown, delay, minDuration]);\n  return shown;\n}\n\nexport interface LoaderProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** What is loading, in words (“Loading your invoices”) — passed translated; shown and announced. */\n  label: string;\n  /**\n   * loading · success · error. When the wait ends, the loader shows how it ended for `endDuration` ms, then disappears.\n   * @default \"loading\"\n   */\n  status?: \"loading\" | \"success\" | \"error\";\n  /** The words of a success (“Invoices loaded”) — passed translated. Default: nothing more than the check. */\n  successLabel?: string;\n  /** The words of a failure (“Could not load the invoices”) — passed translated. */\n  errorLabel?: string;\n  /** Between 0 and 1: a determinate wait — the trace grows to it and the percentage shows. */\n  value?: number | null;\n  /** The time left, in words (“About 20 s left”) — passed translated (`@krizaka/intl` formats durations). */\n  eta?: string;\n  /**\n   * Milliseconds before anything shows: a wait shorter than this never flashes.\n   * @default 250\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds it stays: it never blinks.\n   * @default 600\n   */\n  minDuration?: number;\n  /**\n   * Milliseconds the ending (check or cross) stays before the loader disappears; `0` never shows it, `Infinity` keeps it.\n   * @default 1600\n   */\n  endDuration?: number;\n  /**\n   * inline (beside the content) · block (a region's centre) · overlay (over a `relative` parent, frosted) · page (the\n   * whole screen).\n   * @default \"inline\"\n   */\n  variant?: LoaderVariants[\"variant\"];\n  /**\n   * The product's mark in place of the Krizaka glyph while it waits — `<OrochiaLogo animated />` (or `ProductLogo`) of\n   * `@krizaka/ui`; it takes the loader's size. The ending (check or cross) stays the glyph's. Decorative: leave `title` off.\n   */\n  mark?: React.ReactNode;\n}\n\n/**\n * A wait, from start to end. `role=\"status\"` (polite): its words are announced when it shows and when it ends. Under\n * prefers-reduced-motion the glyph rests on a still frame; the delay and the ending stay.\n */\nexport function Loader({\n  label,\n  status = \"loading\",\n  successLabel,\n  errorLabel,\n  value,\n  eta,\n  delay = 250,\n  minDuration = 600,\n  endDuration = 1600,\n  variant,\n  mark,\n  className,\n  ...props\n}: LoaderProps) {\n  const waiting = useDelayedWait(status === \"loading\", delay, minDuration);\n  // Rendered already ended (a result to show), it shows its ending; otherwise only a wait that was seen ends visibly.\n  const [ending, setEnding] = React.useState<\"success\" | \"error\" | null>(() => (status !== \"loading\" && endDuration > 0 ? status : null));\n  const wasWaiting = React.useRef(false);\n  React.useEffect(() => {\n    if (!Number.isFinite(endDuration)) return;\n    const hide = setTimeout(() => setEnding((e) => (wasWaiting.current ? e : null)), endDuration);\n    return () => clearTimeout(hide);\n    // Only the ending a loader was mounted with: later endings have their own timer below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  React.useEffect(() => {\n    if (waiting) {\n      wasWaiting.current = true;\n      return;\n    }\n    if (!wasWaiting.current || status === \"loading\") return;\n    wasWaiting.current = false;\n    const end = status;\n    const show = setTimeout(() => setEnding(endDuration > 0 ? end : null), 0);\n    const hide = Number.isFinite(endDuration) ? setTimeout(() => setEnding(null), endDuration) : undefined;\n    return () => {\n      clearTimeout(show);\n      clearTimeout(hide);\n    };\n  }, [waiting, status, endDuration]);\n\n  const phase = waiting ? \"loading\" : ending;\n  const s = loader({ variant, ended: phase === \"success\" || phase === \"error\" ? phase : undefined });\n  const known = phase === \"loading\" && typeof value === \"number\" && Number.isFinite(value);\n  const words = phase === \"success\" ? (successLabel ?? label) : phase === \"error\" ? (errorLabel ?? label) : label;\n  const detail = phase === \"loading\" ? [known ? `${Math.round(Math.min(1, Math.max(0, value)) * 100)} %` : null, eta].filter(Boolean).join(\" · \") : \"\";\n  return (\n    <div role=\"status\" aria-live=\"polite\" data-phase={phase ?? \"idle\"} className={s.root({ className })} {...props}>\n      {phase && (\n        <div className={s.box()}>\n          {mark && phase === \"loading\" ? (\n            <span aria-hidden className={s.mark()} data-mark=\"\">\n              {mark}\n            </span>\n          ) : (\n            <LoaderGlyph state={phase} value={known ? value : null} className={s.glyph()} />\n          )}\n          <span className={s.text()}>\n            <span className={s.label()}>{words}</span>\n            {detail && <span className={s.detail()}>{detail}</span>}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface LoadingRegionProps extends React.ComponentProps<\"div\"> {\n  /** Whether the content is on its way. */\n  loading: boolean;\n  /** What stands in while it loads: skeletons the shape of the content (no layout shift when it arrives). */\n  skeleton: React.ReactNode;\n  /** What is loading, in words — passed translated; announced when the wait shows. */\n  label: string;\n  /** The words when the wait grows long (“Still loading — the server is busy”) — passed translated. */\n  slowLabel?: string;\n  /**\n   * Milliseconds of skeleton before the words of a long wait appear over it.\n   * @default 4000\n   */\n  slowAfter?: number;\n  /**\n   * Milliseconds before the skeleton shows: a fast answer goes straight to the content.\n   * @default 200\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds the skeleton stays.\n   * @default 500\n   */\n  minDuration?: number;\n}\n\n/**\n * A region that hands over: its content → (after `delay`) a skeleton of the same shape → (after `slowAfter`) words over\n * the skeleton → its content again, fading in. `aria-busy` while it waits; the wait is announced once.\n */\nexport function LoadingRegion({\n  loading,\n  skeleton,\n  label,\n  slowLabel,\n  slowAfter = 4000,\n  delay = 200,\n  minDuration = 500,\n  className,\n  children,\n  ...props\n}: LoadingRegionProps) {\n  const waiting = useDelayedWait(loading, delay, minDuration);\n  const slow = useDelayedWait(waiting && loading, slowAfter, 0);\n  const busy = loading || waiting;\n  return (\n    <div aria-busy={busy} data-phase={waiting ? (slow ? \"slow\" : \"skeleton\") : busy ? \"pending\" : \"ready\"} className={[\"relative\", className].filter(Boolean).join(\" \")} {...props}>\n      <span role=\"status\" className=\"sr-only\">\n        {waiting ? (slow ? (slowLabel ?? label) : label) : \"\"}\n      </span>\n      {waiting ? (\n        <div aria-hidden className=\"kz-fade\">\n          {skeleton}\n        </div>\n      ) : busy ? (\n        // Within the delay: the skeleton holds the place, invisible — nothing flashes, nothing jumps.\n        <div aria-hidden className=\"invisible\">\n          {skeleton}\n        </div>\n      ) : (\n        <div className=\"kz-fade\">{children}</div>\n      )}\n      {waiting && slow && <Loader label={slowLabel ?? label} variant=\"overlay\" delay={0} minDuration={0} endDuration={0} aria-live=\"off\" role=\"presentation\" />}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}