@krizaka/ui 3.54.0 → 3.55.0

package/dist/detail-layout.d.ts

@@ -5,42 +5,45 @@ 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;
+            header?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            banner?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            columns?: 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;
+            header?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            banner?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            columns?: tailwind_variants.ClassValue;
         };
     };
 } | {}, {
     root: string;
     back: string;
     header: string;
+    banner: string;
     media: string;
     text: string;
     eyebrow: string;
@@ -55,24 +58,26 @@ 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;
+            header?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            banner?: tailwind_variants.ClassValue;
+            back?: tailwind_variants.ClassValue;
+            media?: tailwind_variants.ClassValue;
+            columns?: tailwind_variants.ClassValue;
         };
     };
 } | {}, {
     root: string;
     back: string;
     header: string;
+    banner: string;
     media: string;
     text: string;
     eyebrow: string;
@@ -87,6 +92,7 @@ declare const detailLayout: tailwind_variants.TVReturnType<{
     root: string;
     back: string;
     header: string;
+    banner: string;
     media: string;
     text: string;
     eyebrow: string;
@@ -101,8 +107,13 @@ declare const detailLayout: tailwind_variants.TVReturnType<{
 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. */
+    /** A thumbnail, a cover or an avatar beside the name; with `cover`, the avatar overlapping the cover. */
     media?: React.ReactNode;
+    /**
+     * A person's or a place's page (a client, a shop, a creator): the header becomes a `ProfileBanner` — this cover (an
+     * `<img alt="">`, or `true` for a tint of the brand's accent), `media` as the avatar overlapping it, then the name and the actions.
+     */
+    cover?: React.ReactNode;
     /** A mono line above the name (the object's kind, its id). */
     eyebrow?: React.ReactNode;
     /** The object's name: the `h1`. */
@@ -121,6 +132,6 @@ type DetailLayoutProps = Omit<React.ComponentProps<"div">, "title"> & {
     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;
+declare function DetailLayout({ back, media, cover, eyebrow, title, status, meta, actions, tabs, aside, className, children, ...props }: DetailLayoutProps): React.JSX.Element;
 
 export { DetailLayout, type DetailLayoutProps, detailLayout };

package/dist/detail-layout.js

@@ -1,11 +1,68 @@
+import {
+  cn
+} from "./chunk-S6NYGOJT.js";
+
 // src/detail-layout/detail-layout.tsx
+import { tv as tv2 } from "tailwind-variants";
+
+// src/profile-card/banner.tsx
 import { tv } from "tailwind-variants";
+
+// src/story-variant.ts
+var brandClass = (brand) => brand ? `brand-${brand}` : void 0;
+
+// src/profile-card/banner.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var detailLayout = tv({
+var profileBanner = tv({
+  slots: {
+    root: "relative flex w-full min-w-0 flex-col",
+    // The brand's accent, as a calm tint, when there is no picture; a picture fills it (`object-cover`).
+    cover: "relative h-28 w-full overflow-hidden rounded-xl bg-accent-soft bg-linear-to-br from-accent/30 via-accent-soft to-surface-2 sm:h-44 [&>img]:block [&>img]:h-full [&>img]:w-full [&>img]:object-cover",
+    scrim: "pointer-events-none absolute inset-0 bg-linear-to-t from-surface-0/70 via-transparent to-transparent",
+    body: "relative flex min-w-0 flex-col gap-3 px-1 sm:flex-row sm:items-end sm:justify-between sm:px-2",
+    identity: "flex min-w-0 items-end gap-4",
+    // The avatar overlaps the cover's lower edge by the same share at every width; the ring is the page's colour.
+    avatar: "relative -mt-10 h-20 w-20 shrink-0 overflow-hidden rounded-2xl bg-surface-3 ring-4 ring-surface-0 sm:-mt-14 sm:h-28 sm:w-28 [&>*]:h-full! [&>*]:w-full! [&_img]:h-full [&_img]:w-full [&_img]:object-cover",
+    text: "flex min-w-0 flex-1 flex-col gap-1 pb-1",
+    eyebrow: "font-mono text-[11px] font-semibold text-fg-accent",
+    titleRow: "flex min-w-0 flex-wrap items-center gap-2",
+    title: "min-w-0 font-display text-xl font-extrabold tracking-tight break-words text-fg sm:text-3xl",
+    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 sm:justify-end sm:pb-1"
+  }
+});
+var s = profileBanner();
+function ProfileBanner({ banner, avatar, eyebrow, title, titleAs: Title = "h1", status, meta, actions, brand, className, ...props }) {
+  return /* @__PURE__ */ jsxs("section", { className: s.root({ className: cn(brandClass(brand), className) }), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { "data-cover": "", className: s.cover(), children: [
+      banner,
+      banner ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.scrim() }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: s.body(), children: [
+      /* @__PURE__ */ jsxs("div", { className: s.identity(), children: [
+        /* @__PURE__ */ jsx("div", { "data-avatar": "", className: s.avatar(), children: avatar }),
+        /* @__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(Title, { className: s.title(), children: title }),
+            status
+          ] }),
+          meta && /* @__PURE__ */ jsx("div", { className: s.meta(), children: meta })
+        ] })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: s.actions(), children: actions })
+    ] })
+  ] });
+}
+
+// src/detail-layout/detail-layout.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var detailLayout = tv2({
   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",
+    banner: "border-b border-border-subtle pb-5",
     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 text-fg-accent",
@@ -18,26 +75,26 @@ var detailLayout = tv({
     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 }),
+var s2 = detailLayout();
+function DetailLayout({ back, media, cover, eyebrow, title, status, meta, actions, tabs, aside, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs2("div", { className: s2.root({ className }), ...props, children: [
+    back && /* @__PURE__ */ jsx2("div", { className: s2.back(), children: back }),
+    cover ? /* @__PURE__ */ jsx2(ProfileBanner, { className: s2.banner(), banner: cover === true ? void 0 : cover, avatar: media, eyebrow, title, status, meta, actions }) : /* @__PURE__ */ jsxs2("div", { className: s2.header(), children: [
+      media && /* @__PURE__ */ jsx2("div", { className: s2.media(), children: media }),
+      /* @__PURE__ */ jsxs2("div", { className: s2.text(), children: [
+        eyebrow && /* @__PURE__ */ jsx2("p", { className: s2.eyebrow(), children: eyebrow }),
+        /* @__PURE__ */ jsxs2("div", { className: s2.titleRow(), children: [
+          /* @__PURE__ */ jsx2("h1", { className: s2.title(), children: title }),
           status
         ] }),
-        meta && /* @__PURE__ */ jsx("div", { className: s.meta(), children: meta })
+        meta && /* @__PURE__ */ jsx2("div", { className: s2.meta(), children: meta })
       ] }),
-      actions && /* @__PURE__ */ jsx("div", { className: s.actions(), children: actions })
+      actions && /* @__PURE__ */ jsx2("div", { className: s2.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 })
+    /* @__PURE__ */ jsxs2("div", { className: aside ? s2.columns() : void 0, children: [
+      /* @__PURE__ */ jsx2("div", { className: s2.main(), children }),
+      aside && /* @__PURE__ */ jsx2("aside", { className: s2.aside(), children: aside })
     ] })
   ] });
 }

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 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","../src/profile-card/banner.tsx","../src/story-variant.ts"],"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\nimport { ProfileBanner } from \"../profile-card/banner\";\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    banner: \"border-b border-border-subtle pb-5\",\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; with `cover`, the avatar overlapping the cover. */\n  media?: React.ReactNode;\n  /**\n   * A person's or a place's page (a client, a shop, a creator): the header becomes a `ProfileBanner` — this cover (an\n   * `<img alt=\"\">`, or `true` for a tint of the brand's accent), `media` as the avatar overlapping it, then the name and the actions.\n   */\n  cover?: 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, cover, 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      {cover ? (\n        <ProfileBanner className={s.banner()} banner={cover === true ? undefined : cover} avatar={media} eyebrow={eyebrow} title={title} status={status} meta={meta} actions={actions} />\n      ) : (\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      )}\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","// Server-safe: no hook. The top of a page about one person or place — a client, a shop, a creator, a building\n// (extracted from Orochia's ProfileHero, #650, #515): a slim cover, the avatar overlapping its lower edge, then the\n// eyebrow, the name (the page's h1), its facts and the actions. No text ever sits on the cover: the words are under it,\n// so a photo never costs their contrast (a scrim fades the photo's foot into the page all the same).\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { brandClass } from \"../story-variant\";\n\nexport const profileBanner = tv({\n  slots: {\n    root: \"relative flex w-full min-w-0 flex-col\",\n    // The brand's accent, as a calm tint, when there is no picture; a picture fills it (`object-cover`).\n    cover:\n      \"relative h-28 w-full overflow-hidden rounded-xl bg-accent-soft bg-linear-to-br from-accent/30 via-accent-soft to-surface-2 sm:h-44 \" +\n      \"[&>img]:block [&>img]:h-full [&>img]:w-full [&>img]:object-cover\",\n    scrim: \"pointer-events-none absolute inset-0 bg-linear-to-t from-surface-0/70 via-transparent to-transparent\",\n    body: \"relative flex min-w-0 flex-col gap-3 px-1 sm:flex-row sm:items-end sm:justify-between sm:px-2\",\n    identity: \"flex min-w-0 items-end gap-4\",\n    // The avatar overlaps the cover's lower edge by the same share at every width; the ring is the page's colour.\n    avatar:\n      \"relative -mt-10 h-20 w-20 shrink-0 overflow-hidden rounded-2xl bg-surface-3 ring-4 ring-surface-0 sm:-mt-14 sm:h-28 sm:w-28 \" +\n      \"[&>*]:h-full! [&>*]:w-full! [&_img]:h-full [&_img]:w-full [&_img]:object-cover\",\n    text: \"flex min-w-0 flex-1 flex-col gap-1 pb-1\",\n    eyebrow: \"font-mono text-[11px] font-semibold text-fg-accent\",\n    titleRow: \"flex min-w-0 flex-wrap items-center gap-2\",\n    title: \"min-w-0 font-display text-xl font-extrabold tracking-tight break-words text-fg sm:text-3xl\",\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 sm:justify-end sm:pb-1\",\n  },\n});\nconst s = profileBanner();\n\nexport type ProfileBannerProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The cover: an `<img alt=\"\">` (decorative) or your framework's image. Absent: a tint of the brand's accent. */\n  banner?: React.ReactNode;\n  /** The avatar overlapping the cover: `Avatar` with the family's default (`defaultAvatar: { brand, seed }`, #598) when there is no photo. */\n  avatar: React.ReactNode;\n  /** A mono line above the name: what it is (« Client », « Shop »), an id. */\n  eyebrow?: React.ReactNode;\n  /** The name: the page's heading. */\n  title: React.ReactNode;\n  /**\n   * The level of the name.\n   * @default \"h1\"\n   */\n  titleAs?: \"h1\" | \"h2\";\n  /** Beside the name: a status (`Badge`), a verified mark. */\n  status?: React.ReactNode;\n  /** Under the name: its facts (a handle, a city, « client since 2024 »). */\n  meta?: React.ReactNode;\n  /** The actions (message, book, edit): at the right from `sm`, under the name on a phone. */\n  actions?: React.ReactNode;\n  /** A brand scope (`akinaza` → `.brand-akinaza`): the default cover takes that brand's accent. */\n  brand?: string;\n};\n\n/** A person's or a place's banner: cover, overlapping avatar, eyebrow, name (h1), facts and actions — the words never on the cover. */\nexport function ProfileBanner({ banner, avatar, eyebrow, title, titleAs: Title = \"h1\", status, meta, actions, brand, className, ...props }: ProfileBannerProps) {\n  return (\n    <section className={s.root({ className: cn(brandClass(brand), className) })} {...props}>\n      <div data-cover=\"\" className={s.cover()}>\n        {banner}\n        {banner ? <span aria-hidden className={s.scrim()} /> : null}\n      </div>\n      <div className={s.body()}>\n        <div className={s.identity()}>\n          <div data-avatar=\"\" className={s.avatar()}>\n            {avatar}\n          </div>\n          <div className={s.text()}>\n            {eyebrow && <p className={s.eyebrow()}>{eyebrow}</p>}\n            <div className={s.titleRow()}>\n              <Title className={s.title()}>{title}</Title>\n              {status}\n            </div>\n            {meta && <div className={s.meta()}>{meta}</div>}\n          </div>\n        </div>\n        {actions && <div className={s.actions()}>{actions}</div>}\n      </div>\n    </section>\n  );\n}\n","// The two looks of the storytelling kit (story.css), shared by its entries. Server-safe.\n\n/** The look of the storytelling kit: `default` (sober, for any app) or `arcade` (the opt-in cabinet flavour). */\nexport type StoryVariant = \"default\" | \"arcade\";\n\n/** The class a storytelling component adds for its look (`kzs-arcade` for the arcade flavour). */\nexport const storyVariantClass = (variant: StoryVariant | undefined) => (variant === \"arcade\" ? \"kzs-arcade\" : undefined);\n\n/** The class of a brand scope (`brand-orochia`): the accent and the gradient become that brand's. */\nexport const brandClass = (brand: string | undefined) => (brand ? `brand-${brand}` : undefined);\n"],"mappings":"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","names":["tv","jsx","jsxs","tv","s"]}

package/dist/doodle.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+type DoodleKind = "arrow" | "circle" | "star" | "wave" | "bird";
+type DoodleProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** What is drawn: `arrow` (points at the block), `circle` (rings a `word`), `star`, `wave` (an underline) or `bird` (a tiny sketch). */
+    kind: DoodleKind;
+    /** The word a `circle` rings (« ça ! »). It is decoration too: nothing that matters is said only here. */
+    word?: string;
+    /** Which margin it sits in: `left` (where the notebook's margin is) or `right`. It points at the block from either. @default "left" */
+    side?: "left" | "right";
+    /** `margin` hangs it beside the nearest positioned ancestor, on a wide screen only; `inline` keeps it in the flow. @default "margin" */
+    place?: "margin" | "inline";
+    /** How far from the top of the block it sits, as a CSS length. @default "0px" */
+    top?: string;
+    /** Where its slight tilt comes from: the same string always leans the same way (±8°). @default "" */
+    seed?: string;
+};
+/** A margin doodle: an arrow, a circled word, a star, a wavy underline or a tiny bird, in the margin ink. Decoration. */
+declare function Doodle({ kind, word, side, place, top, seed, className, style, ...props }: DoodleProps): React.JSX.Element;
+
+export { Doodle, type DoodleKind, type DoodleProps };

package/dist/doodle.js

@@ -0,0 +1,39 @@
+import {
+  seedUnit
+} from "./chunk-5VEVYDVC.js";
+import {
+  cn
+} from "./chunk-W675RFOA.js";
+
+// src/doodle/doodle.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var PATHS = {
+  arrow: { box: "0 0 56 36", d: ["M4 30 C 14 8, 32 6, 50 20", "M41 17 L50 20 L46 28"] },
+  circle: { box: "0 0 64 40", d: ["M9 22 C 6 8, 42 2, 54 14 C 62 26, 24 38, 11 29 C 4 23, 14 10, 34 8"] },
+  star: { box: "0 0 56 52", d: ["M28 4 L34 20 L52 21 L38 32 L43 48 L28 39 L13 48 L18 32 L4 21 L22 20 Z"] },
+  wave: { box: "0 0 56 16", d: ["M2 9 Q 8 1 14 9 T 26 9 T 38 9 T 50 9"] },
+  bird: { box: "0 0 56 44", d: ["M5 26 C 12 12, 28 12, 36 21 L 50 14 L 43 27 C 38 38, 18 39, 5 26 Z", "M20 38 L18 43 M27 38 L26 43", "M33 20 L33.5 20"] }
+};
+function Doodle({ kind, word, side = "left", place = "margin", top, seed = "", className, style, ...props }) {
+  const { box, d } = PATHS[kind];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("kz-doodle", className),
+      "data-kind": kind,
+      "data-side": side,
+      "data-place": place,
+      "aria-hidden": true,
+      style: { ...style, ["--kz-doodle-tilt"]: `${Math.round(seedUnit(`${kind}${seed}`) * 80) / 10}deg`, ...top ? { ["--kz-doodle-top"]: top } : {} },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("svg", { viewBox: box, focusable: "false", children: d.map((path) => /* @__PURE__ */ jsx("path", { d: path }, path)) }),
+        kind === "circle" && word ? /* @__PURE__ */ jsx("span", { className: "kz-doodle-word", children: word }) : null
+      ]
+    }
+  );
+}
+export {
+  Doodle
+};
+//# sourceMappingURL=doodle.js.map

package/dist/doodle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/doodle/doodle.tsx"],"sourcesContent":["// Server-safe. A margin doodle of the Cahier (ADR-004, blocks.css): an arrow, a circled word, a star, a wavy underline, a\n// tiny bird, drawn in the margin ink beside a block. Decoration only: hidden from assistive technology, never over\n// text, and gone below the width where the page's margin disappears (blocks.css: 1360 px).\nimport type * as React from \"react\";\n\nimport { seedUnit } from \"../cahier-seed\";\nimport { cn } from \"../cn\";\n\nexport type DoodleKind = \"arrow\" | \"circle\" | \"star\" | \"wave\" | \"bird\";\n\nexport type DoodleProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\"> & {\n  /** What is drawn: `arrow` (points at the block), `circle` (rings a `word`), `star`, `wave` (an underline) or `bird` (a tiny sketch). */\n  kind: DoodleKind;\n  /** The word a `circle` rings (« ça ! »). It is decoration too: nothing that matters is said only here. */\n  word?: string;\n  /** Which margin it sits in: `left` (where the notebook's margin is) or `right`. It points at the block from either. @default \"left\" */\n  side?: \"left\" | \"right\";\n  /** `margin` hangs it beside the nearest positioned ancestor, on a wide screen only; `inline` keeps it in the flow. @default \"margin\" */\n  place?: \"margin\" | \"inline\";\n  /** How far from the top of the block it sits, as a CSS length. @default \"0px\" */\n  top?: string;\n  /** Where its slight tilt comes from: the same string always leans the same way (±8°). @default \"\" */\n  seed?: string;\n};\n\nconst PATHS: Record<DoodleKind, { box: string; d: string[] }> = {\n  arrow: { box: \"0 0 56 36\", d: [\"M4 30 C 14 8, 32 6, 50 20\", \"M41 17 L50 20 L46 28\"] },\n  circle: { box: \"0 0 64 40\", d: [\"M9 22 C 6 8, 42 2, 54 14 C 62 26, 24 38, 11 29 C 4 23, 14 10, 34 8\"] },\n  star: { box: \"0 0 56 52\", d: [\"M28 4 L34 20 L52 21 L38 32 L43 48 L28 39 L13 48 L18 32 L4 21 L22 20 Z\"] },\n  wave: { box: \"0 0 56 16\", d: [\"M2 9 Q 8 1 14 9 T 26 9 T 38 9 T 50 9\"] },\n  bird: { box: \"0 0 56 44\", d: [\"M5 26 C 12 12, 28 12, 36 21 L 50 14 L 43 27 C 38 38, 18 39, 5 26 Z\", \"M20 38 L18 43 M27 38 L26 43\", \"M33 20 L33.5 20\"] },\n};\n\n/** A margin doodle: an arrow, a circled word, a star, a wavy underline or a tiny bird, in the margin ink. Decoration. */\nexport function Doodle({ kind, word, side = \"left\", place = \"margin\", top, seed = \"\", className, style, ...props }: DoodleProps) {\n  const { box, d } = PATHS[kind];\n  return (\n    <span\n      className={cn(\"kz-doodle\", className)}\n      data-kind={kind}\n      data-side={side}\n      data-place={place}\n      aria-hidden\n      style={{ ...style, [\"--kz-doodle-tilt\" as string]: `${Math.round(seedUnit(`${kind}${seed}`) * 80) / 10}deg`, ...(top ? { [\"--kz-doodle-top\" as string]: top } : {}) }}\n      {...props}\n    >\n      <svg viewBox={box} focusable=\"false\">\n        {d.map((path) => (\n          <path key={path} d={path} />\n        ))}\n      </svg>\n      {kind === \"circle\" && word ? <span className=\"kz-doodle-word\">{word}</span> : null}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;AAqCI,SAWM,KAXN;AAZJ,IAAM,QAA0D;AAAA,EAC9D,OAAO,EAAE,KAAK,aAAa,GAAG,CAAC,6BAA6B,sBAAsB,EAAE;AAAA,EACpF,QAAQ,EAAE,KAAK,aAAa,GAAG,CAAC,oEAAoE,EAAE;AAAA,EACtG,MAAM,EAAE,KAAK,aAAa,GAAG,CAAC,uEAAuE,EAAE;AAAA,EACvG,MAAM,EAAE,KAAK,aAAa,GAAG,CAAC,sCAAsC,EAAE;AAAA,EACtE,MAAM,EAAE,KAAK,aAAa,GAAG,CAAC,sEAAsE,+BAA+B,iBAAiB,EAAE;AACxJ;AAGO,SAAS,OAAO,EAAE,MAAM,MAAM,OAAO,QAAQ,QAAQ,UAAU,KAAK,OAAO,IAAI,WAAW,OAAO,GAAG,MAAM,GAAgB;AAC/H,QAAM,EAAE,KAAK,EAAE,IAAI,MAAM,IAAI;AAC7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,aAAa,SAAS;AAAA,MACpC,aAAW;AAAA,MACX,aAAW;AAAA,MACX,cAAY;AAAA,MACZ,eAAW;AAAA,MACX,OAAO,EAAE,GAAG,OAAO,CAAC,kBAA4B,GAAG,GAAG,KAAK,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,GAAI,MAAM,EAAE,CAAC,iBAA2B,GAAG,IAAI,IAAI,CAAC,EAAG;AAAA,MACnK,GAAG;AAAA,MAEJ;AAAA,4BAAC,SAAI,SAAS,KAAK,WAAU,SAC1B,YAAE,IAAI,CAAC,SACN,oBAAC,UAAgB,GAAG,QAAT,IAAe,CAC3B,GACH;AAAA,QACC,SAAS,YAAY,OAAO,oBAAC,UAAK,WAAU,kBAAkB,gBAAK,IAAU;AAAA;AAAA;AAAA,EAChF;AAEJ;","names":[]}

package/dist/drop-overlay.d.ts

@@ -18,14 +18,22 @@ type DropOverlayProps = Omit<React.ComponentProps<"div">, "children" | "onDrop">
     label: string;
     /** One line under it (“PDF or text”). */
     hint?: string;
-    /** The files dropped: the accepted ones, then the ones `accept` refused. */
-    onFiles: (accepted: File[], rejected: File[]) => void;
     /** What is accepted: MIME types, families (`image/*`) or extensions (`.pdf`). */
     accept?: readonly AcceptRule[];
     /** Turns the window back into a plain page (while a modal is open, signed out). */
     disabled?: boolean;
-};
+} & ({
+    /** Controlled form (a desktop app's native drops, which arrive as paths): shown while true, the DOM listeners are off. */
+    active: boolean;
+    /** Not called in the controlled form. */
+    onFiles?: (accepted: File[], rejected: File[]) => void;
+} | {
+    /** Leave undefined to handle DOM drops. */
+    active?: undefined;
+    /** The files dropped: the accepted ones, then the ones `accept` refused. */
+    onFiles: (accepted: File[], rejected: File[]) => void;
+});
 /** Drag a file anywhere on the page: a full-window overlay accepts it. */
-declare function DropOverlay({ label, hint, onFiles, accept, disabled, className, ...props }: DropOverlayProps): React.JSX.Element | null;
+declare function DropOverlay({ label, hint, onFiles, accept, disabled, active: controlled, className, ...props }: DropOverlayProps): React.JSX.Element | null;
 
 export { type AcceptRule, DropOverlay, type DropOverlayProps, type DropSplit, dragHasFiles, splitDropped };

package/dist/drop-overlay.js

@@ -25,15 +25,25 @@ function splitDropped(files, accept) {
 
 // src/drop-overlay/drop-overlay.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function DropOverlay({ label, hint, onFiles, accept, disabled, className, ...props }) {
-  const [active, setActive] = React.useState(false);
+function DropOverlay({
+  label,
+  hint,
+  onFiles,
+  accept,
+  disabled,
+  active: controlled,
+  className,
+  ...props
+}) {
+  const isControlled = controlled !== void 0;
+  const [dragging, setActive] = React.useState(false);
   const depth = React.useRef(0);
   const latest = React.useRef({ onFiles, accept });
   React.useEffect(() => {
     latest.current = { onFiles, accept };
   });
   React.useEffect(() => {
-    if (disabled) return;
+    if (disabled || isControlled) return;
     const reset = () => {
       depth.current = 0;
       setActive(false);
@@ -58,7 +68,7 @@ function DropOverlay({ label, hint, onFiles, accept, disabled, className, ...pro
       const files = Array.from(event.dataTransfer?.files ?? []);
       reset();
       const { accepted, rejected } = splitDropped(files, latest.current.accept);
-      latest.current.onFiles(accepted, rejected);
+      latest.current.onFiles?.(accepted, rejected);
     };
     window.addEventListener("dragenter", enter);
     window.addEventListener("dragover", over);
@@ -71,8 +81,8 @@ function DropOverlay({ label, hint, onFiles, accept, disabled, className, ...pro
       window.removeEventListener("drop", drop);
       reset();
     };
-  }, [disabled]);
-  if (!active) return null;
+  }, [disabled, isControlled]);
+  if (!(isControlled ? controlled && !disabled : dragging)) return null;
   return /* @__PURE__ */ jsx("div", { role: "status", "data-state": "open", className: cn("kz-drop-overlay", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "kz-drop-overlay-card", children: [
     /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-fg", children: label }),
     hint ? /* @__PURE__ */ jsx("span", { className: "text-sm text-fg-secondary", children: hint }) : null

package/dist/drop-overlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/drop-overlay/drop-overlay.tsx","../src/drop-overlay/files.ts"],"sourcesContent":["// Client (window listeners). The whole window is the drop target: while files are dragged over the page a full-window overlay\n// says so, and the dropped files go to `onFiles` (accepted, rejected). No dashed box in the page; the product keeps a real\n// file input behind its primary action for the keyboard and for phones. Motion: motion.css (« DROP OVERLAY »).\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { type AcceptRule, dragHasFiles, splitDropped } from \"./files\";\n\nexport type DropOverlayProps = Omit<React.ComponentProps<\"div\">, \"children\" | \"onDrop\"> & {\n  /** What the overlay says (“Drop to check”) — passed translated. */\n  label: string;\n  /** One line under it (“PDF or text”). */\n  hint?: string;\n  /** The files dropped: the accepted ones, then the ones `accept` refused. */\n  onFiles: (accepted: File[], rejected: File[]) => void;\n  /** What is accepted: MIME types, families (`image/*`) or extensions (`.pdf`). */\n  accept?: readonly AcceptRule[];\n  /** Turns the window back into a plain page (while a modal is open, signed out). */\n  disabled?: boolean;\n};\n\n/** Drag a file anywhere on the page: a full-window overlay accepts it. */\nexport function DropOverlay({ label, hint, onFiles, accept, disabled, className, ...props }: DropOverlayProps) {\n  const [active, setActive] = React.useState(false);\n  const depth = React.useRef(0);\n  const latest = React.useRef({ onFiles, accept });\n  React.useEffect(() => {\n    latest.current = { onFiles, accept };\n  });\n\n  React.useEffect(() => {\n    if (disabled) return;\n    const reset = () => {\n      depth.current = 0;\n      setActive(false);\n    };\n    const carrying = (event: Event) => dragHasFiles((event as DragEvent).dataTransfer);\n    const enter = (event: Event) => {\n      if (!carrying(event)) return;\n      depth.current += 1;\n      setActive(true);\n    };\n    const over = (event: Event) => {\n      if (carrying(event)) event.preventDefault();\n    };\n    const leave = (event: Event) => {\n      if (!carrying(event)) return;\n      depth.current = Math.max(0, depth.current - 1);\n      if (depth.current === 0) setActive(false);\n    };\n    const drop = (event: Event) => {\n      if (!carrying(event)) return;\n      event.preventDefault();\n      const files = Array.from((event as DragEvent).dataTransfer?.files ?? []);\n      reset();\n      const { accepted, rejected } = splitDropped(files, latest.current.accept);\n      latest.current.onFiles(accepted, rejected);\n    };\n    window.addEventListener(\"dragenter\", enter);\n    window.addEventListener(\"dragover\", over);\n    window.addEventListener(\"dragleave\", leave);\n    window.addEventListener(\"drop\", drop);\n    return () => {\n      window.removeEventListener(\"dragenter\", enter);\n      window.removeEventListener(\"dragover\", over);\n      window.removeEventListener(\"dragleave\", leave);\n      window.removeEventListener(\"drop\", drop);\n      reset();\n    };\n  }, [disabled]);\n\n  if (!active) return null;\n  return (\n    <div role=\"status\" data-state=\"open\" className={cn(\"kz-drop-overlay\", className)} {...props}>\n      <div className=\"kz-drop-overlay-card\">\n        <span className=\"text-lg font-semibold text-fg\">{label}</span>\n        {hint ? <span className=\"text-sm text-fg-secondary\">{hint}</span> : null}\n      </div>\n    </div>\n  );\n}\n","// Headless: what a drag carries and which of the dropped files a product accepts.\n\n/** True while the drag carries files (not text or a link): the only drag that should raise the overlay. */\nexport function dragHasFiles(transfer: { types?: readonly string[] | DOMStringList } | null | undefined): boolean {\n  return Array.from(transfer?.types ?? []).includes(\"Files\");\n}\n\n/** One accepted kind: a MIME type (`application/pdf`), a family (`image/*`) or an extension (`.pdf`). */\nexport type AcceptRule = string;\n\nfunction matches(file: Pick<File, \"name\" | \"type\">, rule: AcceptRule): boolean {\n  const wanted = rule.trim().toLowerCase();\n  if (wanted.startsWith(\".\")) return file.name.toLowerCase().endsWith(wanted);\n  if (wanted.endsWith(\"/*\")) return file.type.toLowerCase().startsWith(wanted.slice(0, -1));\n  return file.type.toLowerCase() === wanted;\n}\n\nexport interface DropSplit<F> {\n  accepted: F[];\n  rejected: F[];\n}\n\n/** Splits dropped files by `accept` (no rule: everything is accepted). */\nexport function splitDropped<F extends Pick<File, \"name\" | \"type\">>(files: readonly F[], accept?: readonly AcceptRule[]): DropSplit<F> {\n  if (!accept || accept.length === 0) return { accepted: [...files], rejected: [] };\n  const accepted: F[] = [];\n  const rejected: F[] = [];\n  for (const file of files) (accept.some((rule) => matches(file, rule)) ? accepted : rejected).push(file);\n  return { accepted, rejected };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/drop-overlay/drop-overlay.tsx","../src/drop-overlay/files.ts"],"sourcesContent":["// Client (window listeners). The whole window is the drop target: while files are dragged over the page a full-window overlay\n// says so, and the dropped files go to `onFiles` (accepted, rejected). No dashed box in the page; the product keeps a real\n// file input behind its primary action for the keyboard and for phones. Motion: motion.css (« DROP OVERLAY »).\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { type AcceptRule, dragHasFiles, splitDropped } from \"./files\";\n\nexport type DropOverlayProps = Omit<React.ComponentProps<\"div\">, \"children\" | \"onDrop\"> & {\n  /** What the overlay says (“Drop to check”) — passed translated. */\n  label: string;\n  /** One line under it (“PDF or text”). */\n  hint?: string;\n  /** What is accepted: MIME types, families (`image/*`) or extensions (`.pdf`). */\n  accept?: readonly AcceptRule[];\n  /** Turns the window back into a plain page (while a modal is open, signed out). */\n  disabled?: boolean;\n} & (\n  | {\n      /** Controlled form (a desktop app's native drops, which arrive as paths): shown while true, the DOM listeners are off. */\n      active: boolean;\n      /** Not called in the controlled form. */\n      onFiles?: (accepted: File[], rejected: File[]) => void;\n    }\n  | {\n      /** Leave undefined to handle DOM drops. */\n      active?: undefined;\n      /** The files dropped: the accepted ones, then the ones `accept` refused. */\n      onFiles: (accepted: File[], rejected: File[]) => void;\n    }\n);\n\n/** Drag a file anywhere on the page: a full-window overlay accepts it. */\nexport function DropOverlay({\n  label,\n  hint,\n  onFiles,\n  accept,\n  disabled,\n  active: controlled,\n  className,\n  ...props\n}: DropOverlayProps) {\n  const isControlled = controlled !== undefined;\n  const [dragging, setActive] = React.useState(false);\n  const depth = React.useRef(0);\n  const latest = React.useRef({ onFiles, accept });\n  React.useEffect(() => {\n    latest.current = { onFiles, accept };\n  });\n\n  React.useEffect(() => {\n    if (disabled || isControlled) return;\n    const reset = () => {\n      depth.current = 0;\n      setActive(false);\n    };\n    const carrying = (event: Event) => dragHasFiles((event as DragEvent).dataTransfer);\n    const enter = (event: Event) => {\n      if (!carrying(event)) return;\n      depth.current += 1;\n      setActive(true);\n    };\n    const over = (event: Event) => {\n      if (carrying(event)) event.preventDefault();\n    };\n    const leave = (event: Event) => {\n      if (!carrying(event)) return;\n      depth.current = Math.max(0, depth.current - 1);\n      if (depth.current === 0) setActive(false);\n    };\n    const drop = (event: Event) => {\n      if (!carrying(event)) return;\n      event.preventDefault();\n      const files = Array.from((event as DragEvent).dataTransfer?.files ?? []);\n      reset();\n      const { accepted, rejected } = splitDropped(files, latest.current.accept);\n      latest.current.onFiles?.(accepted, rejected);\n    };\n    window.addEventListener(\"dragenter\", enter);\n    window.addEventListener(\"dragover\", over);\n    window.addEventListener(\"dragleave\", leave);\n    window.addEventListener(\"drop\", drop);\n    return () => {\n      window.removeEventListener(\"dragenter\", enter);\n      window.removeEventListener(\"dragover\", over);\n      window.removeEventListener(\"dragleave\", leave);\n      window.removeEventListener(\"drop\", drop);\n      reset();\n    };\n  }, [disabled, isControlled]);\n\n  if (!(isControlled ? controlled && !disabled : dragging)) return null;\n  return (\n    <div role=\"status\" data-state=\"open\" className={cn(\"kz-drop-overlay\", className)} {...props}>\n      <div className=\"kz-drop-overlay-card\">\n        <span className=\"text-lg font-semibold text-fg\">{label}</span>\n        {hint ? <span className=\"text-sm text-fg-secondary\">{hint}</span> : null}\n      </div>\n    </div>\n  );\n}\n","// Headless: what a drag carries and which of the dropped files a product accepts.\n\n/** True while the drag carries files (not text or a link): the only drag that should raise the overlay. */\nexport function dragHasFiles(transfer: { types?: readonly string[] | DOMStringList } | null | undefined): boolean {\n  return Array.from(transfer?.types ?? []).includes(\"Files\");\n}\n\n/** One accepted kind: a MIME type (`application/pdf`), a family (`image/*`) or an extension (`.pdf`). */\nexport type AcceptRule = string;\n\nfunction matches(file: Pick<File, \"name\" | \"type\">, rule: AcceptRule): boolean {\n  const wanted = rule.trim().toLowerCase();\n  if (wanted.startsWith(\".\")) return file.name.toLowerCase().endsWith(wanted);\n  if (wanted.endsWith(\"/*\")) return file.type.toLowerCase().startsWith(wanted.slice(0, -1));\n  return file.type.toLowerCase() === wanted;\n}\n\nexport interface DropSplit<F> {\n  accepted: F[];\n  rejected: F[];\n}\n\n/** Splits dropped files by `accept` (no rule: everything is accepted). */\nexport function splitDropped<F extends Pick<File, \"name\" | \"type\">>(files: readonly F[], accept?: readonly AcceptRule[]): DropSplit<F> {\n  if (!accept || accept.length === 0) return { accepted: [...files], rejected: [] };\n  const accepted: F[] = [];\n  const rejected: F[] = [];\n  for (const file of files) (accept.some((rule) => matches(file, rule)) ? accepted : rejected).push(file);\n  return { accepted, rejected };\n}\n"],"mappings":"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","names":[]}

package/dist/elephant.d.ts

@@ -15,9 +15,11 @@ interface ElephantProps extends Omit<SVGProps<SVGSVGElement>, "width" | "height"
  * The elephant: a small, playful mark from the neighbour joke — « the elephant with those ears can fly ». Not a product
  * logo: a quiet figure for the hero of a page or the closing of a chat. Sage body, sand ear, flat colours that read on
  * both themes; decorative by default.
+ * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.
  */
 declare function Elephant({ pose, size, animated, title, className, ...rest }: ElephantProps): React.JSX.Element;
 
+/** @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0. */
 declare const ELEPHANT: {
     readonly viewBox: "0 0 200 200";
     readonly stroke: 8;

package/dist/elephant.js

@@ -1,4 +1,7 @@
 "use client";
+import {
+  warnDeprecated
+} from "./chunk-BDIU5LZB.js";
 
 // src/elephant/geometry.ts
 import { marks } from "@krizaka/tokens/native";
@@ -41,6 +44,7 @@ var CSS = `
 `;
 var line = { strokeWidth: ELEPHANT.stroke, strokeLinecap: "square", strokeLinejoin: "miter", fill: "none" };
 function Elephant({ pose = "standing", size = 64, animated = true, title, className, ...rest }) {
+  warnDeprecated("elephant");
   const flying = pose === "flying";
   const p = flying ? ELEPHANT.flying : ELEPHANT.standing;
   const a11y = title ? { role: "img", "aria-label": title } : { "aria-hidden": true };

package/dist/elephant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/elephant/geometry.ts","../src/elephant/elephant.tsx"],"sourcesContent":["import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The elephant's geometry (200 × 200 view box, a pen line of 8, square caps, mitred joins — the Cahier grammar of the\n * marks and of @krizaka/icons: straight runs and 45° cuts, no rounded outline). It faces right. Two poses of one\n * animal: `standing`, the ear folded down beside the head, and `flying`, the ear spread up like a wing (the darija\n * joke: « l'éléphant avec ses oreilles, il peut voler »), the legs tucked, three lines of wind behind.\n *\n * The body and the trunk are sage, the ear and the wing sand: the two stops of Yororis' mark gradient (`marks.yororis`\n * of @krizaka/tokens), each ≥ 3:1 on the page surfaces of both themes. Flat colours: no glow, no gradient.\n */\nexport const SAND = marks.yororis[0]![1];\nexport const SAGE = marks.yororis[marks.yororis.length - 1]![1];\n\nexport const ELEPHANT = {\n  viewBox: \"0 0 200 200\",\n  stroke: 8,\n  sand: SAND,\n  sage: SAGE,\n  /** The eye: one node, a filled dot. */\n  eye: { cx: 154, cy: 66, r: 5 },\n  standing: {\n    /** Body, head and the two legs, one closed outline: straight runs and 45° cuts. */\n    body: \"M30 88 L44 74 H112 V54 L126 40 H158 L176 56 V100 L168 108 H132 V168 H108 V138 H62 V168 H38 V138 H30 Z\",\n    /** The trunk: down from the head's front, curling up at its tip. */\n    trunk: \"M164 108 V146 L172 158 H184 V144\",\n    /** The ear, folded down over the shoulder. */\n    ear: \"M116 52 L92 56 L84 100 L104 124 L128 112 Z\",\n    tail: \"M30 90 L20 108 V118\",\n  },\n  flying: {\n    body: \"M30 88 L44 74 H112 V54 L126 40 H158 L176 56 V100 L168 108 H132 V140 H108 V128 H62 V140 H38 V128 H30 Z\",\n    trunk: \"M164 108 V142 L172 154 H184 V140\",\n    /** The ear, spread up and back: the wing. */\n    ear: \"M116 78 L120 30 L90 10 L78 34 L52 24 L56 52 L30 60 L66 84 Z\",\n    tail: \"M30 90 L18 102 V112\",\n    wind: \"M22 150 H50 M12 166 H44 M32 180 H58\",\n  },\n  /** The flap: a few degrees around the shoulder, 1.6 s. */\n  motion: { flap: 1.6, origin: \"114px 80px\", angle: 7 },\n} as const;\n","import type { SVGProps } from \"react\";\n\nimport { ELEPHANT as G } from \"./geometry\";\n\nexport interface ElephantProps extends Omit<SVGProps<SVGSVGElement>, \"width\" | \"height\" | \"title\"> {\n  /** `standing` with the ear folded down, or `flying` with the ear spread like a wing. */\n  pose?: \"standing\" | \"flying\";\n  /** Width and height in pixels. */\n  size?: number;\n  /** The wing flaps gently (a flying elephant only). Off with `false`; always off under prefers-reduced-motion. */\n  animated?: boolean;\n  /** An accessible name (the mark becomes an image); without it the mark is decorative. */\n  title?: string;\n}\n\nconst CSS = `\n.kz-elephant-flap { transform-box: view-box; transform-origin: ${G.motion.origin}; animation: kz-elephant-flap ${G.motion.flap}s ease-in-out infinite; }\n@keyframes kz-elephant-flap { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-${G.motion.angle}deg); } }\n@media (prefers-reduced-motion: reduce) { .kz-elephant-flap { animation: none; } }\n`;\n\nconst line = { strokeWidth: G.stroke, strokeLinecap: \"square\", strokeLinejoin: \"miter\", fill: \"none\" } as const;\n\n/**\n * The elephant: a small, playful mark from the neighbour joke — « the elephant with those ears can fly ». Not a product\n * logo: a quiet figure for the hero of a page or the closing of a chat. Sage body, sand ear, flat colours that read on\n * both themes; decorative by default.\n */\nexport function Elephant({ pose = \"standing\", size = 64, animated = true, title, className, ...rest }: ElephantProps) {\n  const flying = pose === \"flying\";\n  const p = flying ? G.flying : G.standing;\n  const a11y = title ? { role: \"img\" as const, \"aria-label\": title } : { \"aria-hidden\": true as const };\n  return (\n    <svg width={size} height={size} viewBox={G.viewBox} xmlns=\"http://www.w3.org/2000/svg\" className={className} data-pose={pose} {...a11y} {...rest}>\n      {flying && animated ? <style>{CSS}</style> : null}\n      {flying ? <path d={G.flying.wind} stroke={G.sage} opacity=\".45\" {...line} /> : null}\n      <path d={p.body} stroke={G.sage} {...line} />\n            <path d={p.trunk} stroke={G.sage} {...line} />\n      <path d={p.tail} stroke={G.sage} {...line} />\n      <g className={flying && animated ? \"kz-elephant-flap\" : undefined}>\n        <path d={p.ear} stroke={G.sand} {...line} />\n      </g>\n      <circle cx={G.eye.cx} cy={G.eye.cy} r={G.eye.r} fill={G.sage} />\n    </svg>\n  );\n}\n"],"mappings":";;;AAAA,SAAS,aAAa;AAWf,IAAM,OAAO,MAAM,QAAQ,CAAC,EAAG,CAAC;AAChC,IAAM,OAAO,MAAM,QAAQ,MAAM,QAAQ,SAAS,CAAC,EAAG,CAAC;AAEvD,IAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA;AAAA,EAEN,KAAK,EAAE,IAAI,KAAK,IAAI,IAAI,GAAG,EAAE;AAAA,EAC7B,UAAU;AAAA;AAAA,IAER,MAAM;AAAA;AAAA,IAEN,OAAO;AAAA;AAAA,IAEP,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA;AAAA,IAEP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA;AAAA,EAEA,QAAQ,EAAE,MAAM,KAAK,QAAQ,cAAc,OAAO,EAAE;AACtD;;;ACPI,SACwB,KADxB;AAlBJ,IAAM,MAAM;AAAA,iEACqD,SAAE,OAAO,MAAM,iCAAiC,SAAE,OAAO,IAAI;AAAA,+FAC/B,SAAE,OAAO,KAAK;AAAA;AAAA;AAI7G,IAAM,OAAO,EAAE,aAAa,SAAE,QAAQ,eAAe,UAAU,gBAAgB,SAAS,MAAM,OAAO;AAO9F,SAAS,SAAS,EAAE,OAAO,YAAY,OAAO,IAAI,WAAW,MAAM,OAAO,WAAW,GAAG,KAAK,GAAkB;AACpH,QAAM,SAAS,SAAS;AACxB,QAAM,IAAI,SAAS,SAAE,SAAS,SAAE;AAChC,QAAM,OAAO,QAAQ,EAAE,MAAM,OAAgB,cAAc,MAAM,IAAI,EAAE,eAAe,KAAc;AACpG,SACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAS,SAAE,SAAS,OAAM,8BAA6B,WAAsB,aAAW,MAAO,GAAG,MAAO,GAAG,MACzI;AAAA,cAAU,WAAW,oBAAC,WAAO,eAAI,IAAW;AAAA,IAC5C,SAAS,oBAAC,UAAK,GAAG,SAAE,OAAO,MAAM,QAAQ,SAAE,MAAM,SAAQ,OAAO,GAAG,MAAM,IAAK;AAAA,IAC/E,oBAAC,UAAK,GAAG,EAAE,MAAM,QAAQ,SAAE,MAAO,GAAG,MAAM;AAAA,IACrC,oBAAC,UAAK,GAAG,EAAE,OAAO,QAAQ,SAAE,MAAO,GAAG,MAAM;AAAA,IAClD,oBAAC,UAAK,GAAG,EAAE,MAAM,QAAQ,SAAE,MAAO,GAAG,MAAM;AAAA,IAC3C,oBAAC,OAAE,WAAW,UAAU,WAAW,qBAAqB,QACtD,8BAAC,UAAK,GAAG,EAAE,KAAK,QAAQ,SAAE,MAAO,GAAG,MAAM,GAC5C;AAAA,IACA,oBAAC,YAAO,IAAI,SAAE,IAAI,IAAI,IAAI,SAAE,IAAI,IAAI,GAAG,SAAE,IAAI,GAAG,MAAM,SAAE,MAAM;AAAA,KAChE;AAEJ;","names":[]}
+{"version":3,"sources":["../src/elephant/geometry.ts","../src/elephant/elephant.tsx"],"sourcesContent":["import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The elephant's geometry (200 × 200 view box, a pen line of 8, square caps, mitred joins — the Cahier grammar of the\n * marks and of @krizaka/icons: straight runs and 45° cuts, no rounded outline). It faces right. Two poses of one\n * animal: `standing`, the ear folded down beside the head, and `flying`, the ear spread up like a wing (the darija\n * joke: « l'éléphant avec ses oreilles, il peut voler »), the legs tucked, three lines of wind behind.\n *\n * The body and the trunk are sage, the ear and the wing sand: the two stops of Yororis' mark gradient (`marks.yororis`\n * of @krizaka/tokens), each ≥ 3:1 on the page surfaces of both themes. Flat colours: no glow, no gradient.\n */\nexport const SAND = marks.yororis[0]![1];\nexport const SAGE = marks.yororis[marks.yororis.length - 1]![1];\n\n/** @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0. */\nexport const ELEPHANT = {\n  viewBox: \"0 0 200 200\",\n  stroke: 8,\n  sand: SAND,\n  sage: SAGE,\n  /** The eye: one node, a filled dot. */\n  eye: { cx: 154, cy: 66, r: 5 },\n  standing: {\n    /** Body, head and the two legs, one closed outline: straight runs and 45° cuts. */\n    body: \"M30 88 L44 74 H112 V54 L126 40 H158 L176 56 V100 L168 108 H132 V168 H108 V138 H62 V168 H38 V138 H30 Z\",\n    /** The trunk: down from the head's front, curling up at its tip. */\n    trunk: \"M164 108 V146 L172 158 H184 V144\",\n    /** The ear, folded down over the shoulder. */\n    ear: \"M116 52 L92 56 L84 100 L104 124 L128 112 Z\",\n    tail: \"M30 90 L20 108 V118\",\n  },\n  flying: {\n    body: \"M30 88 L44 74 H112 V54 L126 40 H158 L176 56 V100 L168 108 H132 V140 H108 V128 H62 V140 H38 V128 H30 Z\",\n    trunk: \"M164 108 V142 L172 154 H184 V140\",\n    /** The ear, spread up and back: the wing. */\n    ear: \"M116 78 L120 30 L90 10 L78 34 L52 24 L56 52 L30 60 L66 84 Z\",\n    tail: \"M30 90 L18 102 V112\",\n    wind: \"M22 150 H50 M12 166 H44 M32 180 H58\",\n  },\n  /** The flap: a few degrees around the shoulder, 1.6 s. */\n  motion: { flap: 1.6, origin: \"114px 80px\", angle: 7 },\n} as const;\n","import type { SVGProps } from \"react\";\n\nimport { warnDeprecated } from \"../deprecated\";\nimport { ELEPHANT as G } from \"./geometry\";\n\nexport interface ElephantProps extends Omit<SVGProps<SVGSVGElement>, \"width\" | \"height\" | \"title\"> {\n  /** `standing` with the ear folded down, or `flying` with the ear spread like a wing. */\n  pose?: \"standing\" | \"flying\";\n  /** Width and height in pixels. */\n  size?: number;\n  /** The wing flaps gently (a flying elephant only). Off with `false`; always off under prefers-reduced-motion. */\n  animated?: boolean;\n  /** An accessible name (the mark becomes an image); without it the mark is decorative. */\n  title?: string;\n}\n\nconst CSS = `\n.kz-elephant-flap { transform-box: view-box; transform-origin: ${G.motion.origin}; animation: kz-elephant-flap ${G.motion.flap}s ease-in-out infinite; }\n@keyframes kz-elephant-flap { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-${G.motion.angle}deg); } }\n@media (prefers-reduced-motion: reduce) { .kz-elephant-flap { animation: none; } }\n`;\n\nconst line = { strokeWidth: G.stroke, strokeLinecap: \"square\", strokeLinejoin: \"miter\", fill: \"none\" } as const;\n\n/**\n * The elephant: a small, playful mark from the neighbour joke — « the elephant with those ears can fly ». Not a product\n * logo: a quiet figure for the hero of a page or the closing of a chat. Sage body, sand ear, flat colours that read on\n * both themes; decorative by default.\n * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.\n */\nexport function Elephant({ pose = \"standing\", size = 64, animated = true, title, className, ...rest }: ElephantProps) {\n  warnDeprecated(\"elephant\");\n  const flying = pose === \"flying\";\n  const p = flying ? G.flying : G.standing;\n  const a11y = title ? { role: \"img\" as const, \"aria-label\": title } : { \"aria-hidden\": true as const };\n  return (\n    <svg width={size} height={size} viewBox={G.viewBox} xmlns=\"http://www.w3.org/2000/svg\" className={className} data-pose={pose} {...a11y} {...rest}>\n      {flying && animated ? <style>{CSS}</style> : null}\n      {flying ? <path d={G.flying.wind} stroke={G.sage} opacity=\".45\" {...line} /> : null}\n      <path d={p.body} stroke={G.sage} {...line} />\n            <path d={p.trunk} stroke={G.sage} {...line} />\n      <path d={p.tail} stroke={G.sage} {...line} />\n      <g className={flying && animated ? \"kz-elephant-flap\" : undefined}>\n        <path d={p.ear} stroke={G.sand} {...line} />\n      </g>\n      <circle cx={G.eye.cx} cy={G.eye.cy} r={G.eye.r} fill={G.sage} />\n    </svg>\n  );\n}\n"],"mappings":";;;;;;AAAA,SAAS,aAAa;AAWf,IAAM,OAAO,MAAM,QAAQ,CAAC,EAAG,CAAC;AAChC,IAAM,OAAO,MAAM,QAAQ,MAAM,QAAQ,SAAS,CAAC,EAAG,CAAC;AAGvD,IAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA;AAAA,EAEN,KAAK,EAAE,IAAI,KAAK,IAAI,IAAI,GAAG,EAAE;AAAA,EAC7B,UAAU;AAAA;AAAA,IAER,MAAM;AAAA;AAAA,IAEN,OAAO;AAAA;AAAA,IAEP,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA;AAAA,IAEP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA;AAAA,EAEA,QAAQ,EAAE,MAAM,KAAK,QAAQ,cAAc,OAAO,EAAE;AACtD;;;ACLI,SACwB,KADxB;AApBJ,IAAM,MAAM;AAAA,iEACqD,SAAE,OAAO,MAAM,iCAAiC,SAAE,OAAO,IAAI;AAAA,+FAC/B,SAAE,OAAO,KAAK;AAAA;AAAA;AAI7G,IAAM,OAAO,EAAE,aAAa,SAAE,QAAQ,eAAe,UAAU,gBAAgB,SAAS,MAAM,OAAO;AAQ9F,SAAS,SAAS,EAAE,OAAO,YAAY,OAAO,IAAI,WAAW,MAAM,OAAO,WAAW,GAAG,KAAK,GAAkB;AACpH,iBAAe,UAAU;AACzB,QAAM,SAAS,SAAS;AACxB,QAAM,IAAI,SAAS,SAAE,SAAS,SAAE;AAChC,QAAM,OAAO,QAAQ,EAAE,MAAM,OAAgB,cAAc,MAAM,IAAI,EAAE,eAAe,KAAc;AACpG,SACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAS,SAAE,SAAS,OAAM,8BAA6B,WAAsB,aAAW,MAAO,GAAG,MAAO,GAAG,MACzI;AAAA,cAAU,WAAW,oBAAC,WAAO,eAAI,IAAW;AAAA,IAC5C,SAAS,oBAAC,UAAK,GAAG,SAAE,OAAO,MAAM,QAAQ,SAAE,MAAM,SAAQ,OAAO,GAAG,MAAM,IAAK;AAAA,IAC/E,oBAAC,UAAK,GAAG,EAAE,MAAM,QAAQ,SAAE,MAAO,GAAG,MAAM;AAAA,IACrC,oBAAC,UAAK,GAAG,EAAE,OAAO,QAAQ,SAAE,MAAO,GAAG,MAAM;AAAA,IAClD,oBAAC,UAAK,GAAG,EAAE,MAAM,QAAQ,SAAE,MAAO,GAAG,MAAM;AAAA,IAC3C,oBAAC,OAAE,WAAW,UAAU,WAAW,qBAAqB,QACtD,8BAAC,UAAK,GAAG,EAAE,KAAK,QAAQ,SAAE,MAAO,GAAG,MAAM,GAC5C;AAAA,IACA,oBAAC,YAAO,IAAI,SAAE,IAAI,IAAI,IAAI,SAAE,IAAI,IAAI,GAAG,SAAE,IAAI,GAAG,MAAM,SAAE,MAAM;AAAA,KAChE;AAEJ;","names":[]}

package/dist/field.js

@@ -9,7 +9,7 @@ var field = tv({
   slots: {
     root: "flex flex-col gap-1.5",
     label: "text-xs font-semibold text-fg-secondary",
-    control: "flex h-11 w-full rounded-lg border border-border-default bg-surface-2 px-3 text-sm text-fg placeholder:text-fg-muted transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/30",
+    control: "flex h-11 w-full rounded-lg border border-border-control bg-surface-2 px-3 text-sm text-fg placeholder:text-fg-muted transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/30",
     hint: "text-xs text-fg-secondary",
     // The message reads in the danger text role (≥ 4.5:1 on every surface, both themes); the dot is the danger fill.
     error: "flex items-center gap-1.5 text-xs font-medium text-fg-danger before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger",

package/dist/field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/field/field.tsx"],"sourcesContent":["// Server-safe. The label ↔ control wiring is HTML (htmlFor / id, aria-describedby): no context.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\n\nexport const field = tv({\n  slots: {\n    root: \"flex flex-col gap-1.5\",\n    label: \"text-xs font-semibold text-fg-secondary\",\n    control:\n      \"flex h-11 w-full rounded-lg border border-border-default bg-surface-2 px-3 text-sm text-fg placeholder:text-fg-muted \" +\n      \"transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/30\",\n    hint: \"text-xs text-fg-secondary\",\n    // The message reads in the danger text role (≥ 4.5:1 on every surface, both themes); the dot is the danger fill.\n    error: \"flex items-center gap-1.5 text-xs font-medium text-fg-danger before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger\",\n    selectWrap: \"relative flex w-full\",\n    chevron: \"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-secondary\",\n  },\n});\nconst s = field();\n\nexport const Field = {\n  Root: ({ className, ...props }: React.ComponentProps<\"div\">) => <div className={s.root({ className })} {...props} />,\n  Label: ({ className, ...props }: React.ComponentProps<\"label\">) => <label className={s.label({ className })} {...props} />,\n  Hint: ({ className, ...props }: React.ComponentProps<\"p\">) => <p className={s.hint({ className })} {...props} />,\n  Error: ({ className, ...props }: React.ComponentProps<\"p\">) => <p role=\"alert\" className={s.error({ className })} {...props} />,\n};\n\ntype ControlProps = {\n  /** Marks the control invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby). */\n  invalid?: boolean;\n};\n\nconst invalidProps = (invalid?: boolean) => (invalid ? { \"aria-invalid\": true as const, \"data-invalid\": \"\" } : {});\n\nexport function Input({ invalid, className, ...props }: React.ComponentProps<\"input\"> & ControlProps) {\n  return <input {...invalidProps(invalid)} className={s.control({ className })} {...props} />;\n}\n\nexport function Textarea({ invalid, className, ...props }: React.ComponentProps<\"textarea\"> & ControlProps) {\n  return <textarea {...invalidProps(invalid)} className={s.control({ className: cn(\"h-auto min-h-24 py-2\", className) })} {...props} />;\n}\n\n/** A native <select>, styled like the other controls (the platform's menu: accessible and right on phones). */\nexport function Select({ invalid, className, ...props }: React.ComponentProps<\"select\"> & ControlProps) {\n  return (\n    <span className={s.selectWrap()}>\n      <select {...invalidProps(invalid)} className={s.control({ className: cn(\"appearance-none pr-9\", className) })} {...props} />\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden className={s.chevron()}>\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </span>\n  );\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AAsB+C,cAwB9D,YAxB8D;AAlB3D,IAAM,QAAQ,GAAG;AAAA,EACtB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SACE;AAAA,IAGF,MAAM;AAAA;AAAA,IAEN,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,SAAS;AAAA,EACX;AACF,CAAC;AACD,IAAM,IAAI,MAAM;AAET,IAAM,QAAQ;AAAA,EACnB,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,MAAmC,oBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAAA,EAClH,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,MAAqC,oBAAC,WAAM,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAAA,EACxH,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,MAAiC,oBAAC,OAAE,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAAA,EAC9G,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,MAAiC,oBAAC,OAAE,MAAK,SAAQ,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC/H;AAOA,IAAM,eAAe,CAAC,YAAuB,UAAU,EAAE,gBAAgB,MAAe,gBAAgB,GAAG,IAAI,CAAC;AAEzG,SAAS,MAAM,EAAE,SAAS,WAAW,GAAG,MAAM,GAAiD;AACpG,SAAO,oBAAC,WAAO,GAAG,aAAa,OAAO,GAAG,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3F;AAEO,SAAS,SAAS,EAAE,SAAS,WAAW,GAAG,MAAM,GAAoD;AAC1G,SAAO,oBAAC,cAAU,GAAG,aAAa,OAAO,GAAG,WAAW,EAAE,QAAQ,EAAE,WAAW,GAAG,wBAAwB,SAAS,EAAE,CAAC,GAAI,GAAG,OAAO;AACrI;AAGO,SAAS,OAAO,EAAE,SAAS,WAAW,GAAG,MAAM,GAAkD;AACtG,SACE,qBAAC,UAAK,WAAW,EAAE,WAAW,GAC5B;AAAA,wBAAC,YAAQ,GAAG,aAAa,OAAO,GAAG,WAAW,EAAE,QAAQ,EAAE,WAAW,GAAG,wBAAwB,SAAS,EAAE,CAAC,GAAI,GAAG,OAAO;AAAA,IAC1H,oBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MAAC,WAAW,EAAE,QAAQ,GACvJ,8BAAC,UAAK,GAAE,gBAAe,GACzB;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/field/field.tsx"],"sourcesContent":["// Server-safe. The label ↔ control wiring is HTML (htmlFor / id, aria-describedby): no context.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\n\nexport const field = tv({\n  slots: {\n    root: \"flex flex-col gap-1.5\",\n    label: \"text-xs font-semibold text-fg-secondary\",\n    control:\n      \"flex h-11 w-full rounded-lg border border-border-control bg-surface-2 px-3 text-sm text-fg placeholder:text-fg-muted \" +\n      \"transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/30\",\n    hint: \"text-xs text-fg-secondary\",\n    // The message reads in the danger text role (≥ 4.5:1 on every surface, both themes); the dot is the danger fill.\n    error: \"flex items-center gap-1.5 text-xs font-medium text-fg-danger before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger\",\n    selectWrap: \"relative flex w-full\",\n    chevron: \"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-secondary\",\n  },\n});\nconst s = field();\n\nexport const Field = {\n  Root: ({ className, ...props }: React.ComponentProps<\"div\">) => <div className={s.root({ className })} {...props} />,\n  Label: ({ className, ...props }: React.ComponentProps<\"label\">) => <label className={s.label({ className })} {...props} />,\n  Hint: ({ className, ...props }: React.ComponentProps<\"p\">) => <p className={s.hint({ className })} {...props} />,\n  Error: ({ className, ...props }: React.ComponentProps<\"p\">) => <p role=\"alert\" className={s.error({ className })} {...props} />,\n};\n\ntype ControlProps = {\n  /** Marks the control invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby). */\n  invalid?: boolean;\n};\n\nconst invalidProps = (invalid?: boolean) => (invalid ? { \"aria-invalid\": true as const, \"data-invalid\": \"\" } : {});\n\nexport function Input({ invalid, className, ...props }: React.ComponentProps<\"input\"> & ControlProps) {\n  return <input {...invalidProps(invalid)} className={s.control({ className })} {...props} />;\n}\n\nexport function Textarea({ invalid, className, ...props }: React.ComponentProps<\"textarea\"> & ControlProps) {\n  return <textarea {...invalidProps(invalid)} className={s.control({ className: cn(\"h-auto min-h-24 py-2\", className) })} {...props} />;\n}\n\n/** A native <select>, styled like the other controls (the platform's menu: accessible and right on phones). */\nexport function Select({ invalid, className, ...props }: React.ComponentProps<\"select\"> & ControlProps) {\n  return (\n    <span className={s.selectWrap()}>\n      <select {...invalidProps(invalid)} className={s.control({ className: cn(\"appearance-none pr-9\", className) })} {...props} />\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden className={s.chevron()}>\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </span>\n  );\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AAsB+C,cAwB9D,YAxB8D;AAlB3D,IAAM,QAAQ,GAAG;AAAA,EACtB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SACE;AAAA,IAGF,MAAM;AAAA;AAAA,IAEN,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,SAAS;AAAA,EACX;AACF,CAAC;AACD,IAAM,IAAI,MAAM;AAET,IAAM,QAAQ;AAAA,EACnB,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,MAAmC,oBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAAA,EAClH,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,MAAqC,oBAAC,WAAM,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAAA,EACxH,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,MAAiC,oBAAC,OAAE,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAAA,EAC9G,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,MAAiC,oBAAC,OAAE,MAAK,SAAQ,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC/H;AAOA,IAAM,eAAe,CAAC,YAAuB,UAAU,EAAE,gBAAgB,MAAe,gBAAgB,GAAG,IAAI,CAAC;AAEzG,SAAS,MAAM,EAAE,SAAS,WAAW,GAAG,MAAM,GAAiD;AACpG,SAAO,oBAAC,WAAO,GAAG,aAAa,OAAO,GAAG,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3F;AAEO,SAAS,SAAS,EAAE,SAAS,WAAW,GAAG,MAAM,GAAoD;AAC1G,SAAO,oBAAC,cAAU,GAAG,aAAa,OAAO,GAAG,WAAW,EAAE,QAAQ,EAAE,WAAW,GAAG,wBAAwB,SAAS,EAAE,CAAC,GAAI,GAAG,OAAO;AACrI;AAGO,SAAS,OAAO,EAAE,SAAS,WAAW,GAAG,MAAM,GAAkD;AACtG,SACE,qBAAC,UAAK,WAAW,EAAE,WAAW,GAC5B;AAAA,wBAAC,YAAQ,GAAG,aAAa,OAAO,GAAG,WAAW,EAAE,QAAQ,EAAE,WAAW,GAAG,wBAAwB,SAAS,EAAE,CAAC,GAAI,GAAG,OAAO;AAAA,IAC1H,oBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MAAC,WAAW,EAAE,QAAQ,GACvJ,8BAAC,UAAK,GAAE,gBAAe,GACzB;AAAA,KACF;AAEJ;","names":[]}

package/dist/filter-bar.js

@@ -5,8 +5,8 @@ import {
   filterBar,
   readFilterParams,
   writeFilterParams
-} from "./chunk-ZQW7LF4Y.js";
-import "./chunk-HHFWK2HH.js";
+} from "./chunk-OIMXKRXF.js";
+import "./chunk-VIPSZXO4.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-J3NC6ER4.js";
 import "./chunk-NSLXEDIS.js";

package/dist/force-update-screen.d.ts

@@ -1,6 +1,7 @@
 import * as tailwind_variants from 'tailwind-variants';
 import * as React from 'react';
 
+/** @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0. */
 declare const forceUpdateScreen: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
@@ -74,7 +75,10 @@ type ForceUpdateScreenProps = Omit<React.ComponentProps<"main">, "title"> & {
     /** Checks the backend again. */
     onRetry?: () => void;
 };
-/** The forced update: one thing to do, and the way to do it. */
+/**
+ * The forced update: one thing to do, and the way to do it.
+ * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.
+ */
 declare function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, onUpdate, retryLabel, onRetry, className, ...props }: ForceUpdateScreenProps): React.JSX.Element;
 
 export { ForceUpdateScreen, type ForceUpdateScreenProps, forceUpdateScreen };

package/dist/force-update-screen.js

@@ -1,3 +1,6 @@
+import {
+  warnDeprecated
+} from "./chunk-KGLRZMCY.js";
 import "./chunk-TDG7ED2W.js";
 import {
   Button
@@ -20,6 +23,7 @@ var forceUpdateScreen = tv({
   }
 });
 function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, onUpdate, retryLabel, onRetry, className, ...props }) {
+  warnDeprecated("force-update-screen");
   const s = forceUpdateScreen();
   return /* @__PURE__ */ jsxs("main", { "data-kind": "update-force", className: s.root({ className }), ...props, children: [
     mark && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.mark(), children: mark }),