@krizaka/ui 3.45.0 → 3.48.0

package/dist/settings-layout.js

@@ -1,8 +1,182 @@
-// src/settings-layout/settings-layout.tsx
+import {
+  defineRecipe
+} from "./chunk-2VNYHG4E.js";
+import {
+  cn
+} from "./chunk-S6NYGOJT.js";
+
+// src/settings-layout/save-status.ts
 import * as React from "react";
+var SaveStatus = { Idle: "idle", Saving: "saving", Saved: "saved", Error: "error" };
+var SAVED_VISIBLE_MS = 4e3;
+function useSaveStatus() {
+  const [status, setStatus] = React.useState(SaveStatus.Idle);
+  const [error, setError] = React.useState(void 0);
+  const timer = React.useRef(void 0);
+  const clear = React.useCallback(() => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = void 0;
+  }, []);
+  React.useEffect(() => clear, [clear]);
+  const reset = React.useCallback(() => {
+    clear();
+    setStatus(SaveStatus.Idle);
+    setError(void 0);
+  }, [clear]);
+  const track = React.useCallback(
+    async (save) => {
+      clear();
+      setStatus(SaveStatus.Saving);
+      setError(void 0);
+      try {
+        await save();
+        setStatus(SaveStatus.Saved);
+        timer.current = setTimeout(() => setStatus(SaveStatus.Idle), SAVED_VISIBLE_MS);
+        return true;
+      } catch (failure) {
+        setError(failure);
+        setStatus(SaveStatus.Error);
+        return false;
+      }
+    },
+    [clear]
+  );
+  return { status, error, track, reset };
+}
+
+// src/settings-layout/settings-layout.tsx
+import * as React2 from "react";
+import { tv as tv2 } from "tailwind-variants";
+
+// src/button/button.tsx
+import { Slot } from "radix-ui";
 import { tv } from "tailwind-variants";
+
+// src/spinner/glyph.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var settingsLayout = tv({
+var HEX = "M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z";
+function LoaderGlyph({ state = "loading", value, ...props }) {
+  const known = typeof value === "number" && Number.isFinite(value);
+  const fill = state !== "loading" ? 100 : known ? Math.round(Math.min(1, Math.max(0, value)) * 100) : null;
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, "data-state": state, "data-progress": fill === null ? void 0 : fill, ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: HEX, stroke: "currentColor", strokeOpacity: "0.22", strokeWidth: "2.2", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: HEX,
+        pathLength: 100,
+        stroke: "currentColor",
+        strokeWidth: "2.2",
+        strokeLinejoin: "round",
+        strokeLinecap: "round",
+        className: "kz-loader-trace",
+        strokeDasharray: fill === null ? void 0 : `${fill} ${100 - fill}`
+      }
+    ),
+    state === "loading" && /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2.6", fill: "currentColor", className: "kz-loader-node" }),
+    state === "success" && /* @__PURE__ */ jsx("path", { d: "M8.3 12.3l2.6 2.6 4.9-5.3", pathLength: 20, stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", className: "kz-loader-mark" }),
+    state === "error" && /* @__PURE__ */ jsx("path", { d: "M9.4 9.4l5.2 5.2M14.6 9.4l-5.2 5.2", pathLength: 20, stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", className: "kz-loader-mark" })
+  ] });
+}
+
+// src/button/recipe.ts
+var buttonRecipe = defineRecipe({
+  base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition duration-150 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] [&[data-loading]]:opacity-100",
+  variants: {
+    variant: {
+      primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover",
+      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).
+      gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110",
+      secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3",
+      outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent",
+      ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg",
+      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest
+      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).
+      danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20"
+    },
+    size: { sm: "h-8 px-3 text-xs", md: "h-10 px-4 text-sm", lg: "h-12 px-6 text-sm", icon: "h-10 w-10" },
+    // One clean shape (krizaka-ui#393): an 8 px radius (`--kz-radius-sm`, the radius of a field — a button beside an
+    // input lines up with it), the pill on demand. `cut` (the retired chamfer) is a deprecated alias of `rounded`.
+    shape: { rounded: "rounded-sm", pill: "rounded-full", cut: "rounded-sm" }
+  },
+  defaultVariants: { variant: "secondary", size: "md", shape: "rounded" }
+});
+
+// src/button/button.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var buttonVariants = tv(buttonRecipe);
+var STATUS_TEXT = { success: "text-fg-success", error: "text-fg-danger" };
+var warnedCut = false;
+function warnCut() {
+  if (warnedCut || typeof process === "undefined" || process.env.NODE_ENV === "production") return;
+  warnedCut = true;
+  console.warn('@krizaka/ui/button: shape="cut" is deprecated (krizaka-ui#393) and now draws the default rounded shape. Remove the prop.');
+}
+function Button({
+  asChild,
+  loading,
+  progress,
+  status,
+  announce,
+  indicator = true,
+  shimmer: _shimmer,
+  magnetic: _magnetic,
+  variant,
+  size,
+  shape,
+  className,
+  disabled,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  if (shape === "cut") warnCut();
+  const known = loading && typeof progress === "number" && Number.isFinite(progress);
+  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;
+  const glyph = indicator && !asChild && (loading || status) ? status ?? "loading" : null;
+  const filled = variant === "primary" || variant === "gradient";
+  const button = /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      type: asChild ? void 0 : "button",
+      "aria-busy": loading || void 0,
+      "data-loading": loading ? "" : void 0,
+      "data-variant": variant ?? "secondary",
+      "data-kz-status": status ?? void 0,
+      disabled: asChild ? void 0 : disabled || loading,
+      "aria-disabled": asChild && (disabled || loading) ? true : void 0,
+      className: buttonVariants({
+        variant,
+        size,
+        shape,
+        className: cn(known && "relative isolate overflow-hidden", className)
+      }),
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        known && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500", style: { width: `${ratio * 100}%` } }),
+        glyph && /* @__PURE__ */ jsx2(
+          "span",
+          {
+            "aria-hidden": true,
+            "data-slot": "indicator",
+            className: "-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0",
+            children: /* @__PURE__ */ jsx2("span", { className: "overflow-hidden", children: /* @__PURE__ */ jsx2(LoaderGlyph, { state: glyph, value: known ? ratio : null, className: cn("h-4 w-4", glyph !== "loading" && !filled && STATUS_TEXT[glyph]) }) })
+          }
+        ),
+        children
+      ] })
+    }
+  );
+  if (announce === void 0 || asChild) return button;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    button,
+    /* @__PURE__ */ jsx2("span", { role: "status", className: "sr-only", children: announce })
+  ] });
+}
+
+// src/settings-layout/settings-layout.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var settingsLayout = tv2({
   slots: {
     root: "flex w-full flex-col gap-6",
     head: "flex flex-col gap-1",
@@ -43,48 +217,79 @@ var settingsLayout = tv({
 });
 function SettingsLayout({ title, description, nav, navLabel, linkAs: Link = "a", variant = "card", className, children, ...props }) {
   const s = settingsLayout({ variant });
-  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
-    (title || description) && /* @__PURE__ */ jsxs("div", { className: s.head(), children: [
-      title && /* @__PURE__ */ jsx("h1", { className: s.title(), children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: s.description(), children: description })
+  return /* @__PURE__ */ jsxs3("div", { className: s.root({ className }), ...props, children: [
+    (title || description) && /* @__PURE__ */ jsxs3("div", { className: s.head(), children: [
+      title && /* @__PURE__ */ jsx3("h1", { className: s.title(), children: title }),
+      description && /* @__PURE__ */ jsx3("p", { className: s.description(), children: description })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: s.columns(), children: [
-      /* @__PURE__ */ jsx("nav", { "aria-label": navLabel, className: s.nav(), children: /* @__PURE__ */ jsx("ul", { className: s.navList(), children: nav.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Link, { href: item.href, className: s.navLink(), "aria-current": item.current ? item.href.startsWith("#") ? "location" : "page" : void 0, children: [
+    /* @__PURE__ */ jsxs3("div", { className: s.columns(), children: [
+      /* @__PURE__ */ jsx3("nav", { "aria-label": navLabel, className: s.nav(), children: /* @__PURE__ */ jsx3("ul", { className: s.navList(), children: nav.map((item) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsxs3(Link, { href: item.href, className: s.navLink(), "aria-current": item.current ? item.href.startsWith("#") ? "location" : "page" : void 0, children: [
         item.icon,
         item.label
       ] }) }, item.id)) }) }),
-      /* @__PURE__ */ jsx("div", { className: s.content(), children })
+      /* @__PURE__ */ jsx3("div", { className: s.content(), children })
     ] })
   ] });
 }
-function SettingsSection({ title, description, footer, variant = "card", id, className, children, ...props }) {
+function SettingsSection({ title, description, footer, save, variant = "card", id, className, children, ...props }) {
   const s = settingsLayout({ variant });
-  const auto = React.useId();
+  const auto = React2.useId();
   const titleId = `${id ?? auto}-title`;
-  return /* @__PURE__ */ jsxs("section", { id, "aria-labelledby": titleId, className: s.section({ className }), ...props, children: [
-    /* @__PURE__ */ jsxs("div", { className: s.sectionHead(), children: [
-      /* @__PURE__ */ jsx("h2", { id: titleId, className: s.sectionTitle(), children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: s.sectionDescription(), children: description })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: variant === "flat" ? s.rows() : s.sectionBody(), "data-settings-rows": variant === "flat" ? "" : void 0, children }),
-    footer && /* @__PURE__ */ jsx("div", { className: s.sectionFooter(), children: footer })
+  const head = /* @__PURE__ */ jsxs3("div", { className: s.sectionHead(), children: [
+    /* @__PURE__ */ jsx3("h2", { id: titleId, className: s.sectionTitle(), children: title }),
+    description && /* @__PURE__ */ jsx3("p", { className: s.sectionDescription(), children: description })
+  ] });
+  const body = children === void 0 ? null : /* @__PURE__ */ jsx3("div", { className: variant === "flat" ? s.rows() : s.sectionBody(), "data-settings-rows": variant === "flat" ? "" : void 0, children });
+  return /* @__PURE__ */ jsx3("section", { id, "aria-labelledby": titleId, "data-dirty": save?.dirty ? "" : void 0, className: s.section({ className }), ...props, children: save ? /* @__PURE__ */ jsxs3(
+    "form",
+    {
+      noValidate: true,
+      onSubmit: (event) => {
+        event.preventDefault();
+        if (save.dirty && save.status !== SaveStatus.Saving) save.onSave();
+      },
+      children: [
+        head,
+        body,
+        /* @__PURE__ */ jsxs3("div", { className: s.sectionFooter(), children: [
+          /* @__PURE__ */ jsx3(SaveFeedback, { save }),
+          save.onDiscard && save.dirty ? /* @__PURE__ */ jsx3(Button, { type: "button", variant: "ghost", onClick: save.onDiscard, children: save.labels.discard }) : null,
+          /* @__PURE__ */ jsx3(Button, { type: "submit", variant: "primary", disabled: !save.dirty || save.status === SaveStatus.Saving, loading: save.status === SaveStatus.Saving, children: save.labels.save })
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    head,
+    body,
+    footer && /* @__PURE__ */ jsx3("div", { className: s.sectionFooter(), children: footer })
+  ] }) });
+}
+function SaveFeedback({ save }) {
+  const failed = save.status === SaveStatus.Error;
+  const saved = save.status === SaveStatus.Saved;
+  return /* @__PURE__ */ jsxs3("div", { className: "mr-auto flex min-w-0 items-center gap-2 text-sm", children: [
+    /* @__PURE__ */ jsx3("span", { role: failed ? "alert" : "status", "aria-live": failed ? "assertive" : "polite", className: failed ? "text-danger-text" : "text-fg-secondary", children: failed ? save.labels.error : saved ? save.labels.saved : save.status === SaveStatus.Saving ? save.labels.saving : "" }),
+    saved && save.onUndo ? /* @__PURE__ */ jsx3(Button, { type: "button", variant: "ghost", size: "sm", onClick: save.onUndo, children: save.labels.undo }) : null
   ] });
 }
 function SettingsRow({ label, description, htmlFor, className, children, ...props }) {
   const s = settingsLayout();
   const Label = htmlFor ? "label" : "span";
-  return /* @__PURE__ */ jsxs("div", { className: s.row({ className }), ...props, children: [
-    /* @__PURE__ */ jsxs("div", { className: s.rowText(), children: [
-      /* @__PURE__ */ jsx(Label, { className: s.rowLabel(), ...htmlFor ? { htmlFor } : {}, children: label }),
-      description && /* @__PURE__ */ jsx("span", { className: s.rowDescription(), children: description })
+  return /* @__PURE__ */ jsxs3("div", { className: s.row({ className }), ...props, children: [
+    /* @__PURE__ */ jsxs3("div", { className: s.rowText(), children: [
+      /* @__PURE__ */ jsx3(Label, { className: s.rowLabel(), ...htmlFor ? { htmlFor } : {}, children: label }),
+      description && /* @__PURE__ */ jsx3("span", { className: s.rowDescription(), children: description })
     ] }),
-    children !== void 0 && /* @__PURE__ */ jsx("div", { className: s.rowControl(), children })
+    children !== void 0 && /* @__PURE__ */ jsx3("div", { className: s.rowControl(), children })
   ] });
 }
 export {
+  SAVED_VISIBLE_MS,
+  SaveStatus,
   SettingsLayout,
   SettingsRow,
   SettingsSection,
-  settingsLayout
+  settingsLayout,
+  useSaveStatus
 };
 //# sourceMappingURL=settings-layout.js.map

package/dist/settings-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/settings-layout/settings-layout.tsx"],"sourcesContent":["// Server-safe. Settings, read from the products' account and administration screens: a list of sections on the left\n// (a row of chips that scrolls on a phone), the current section's forms on the right, each form a titled card with its\n// own save at the foot. The sections are links (one page each) or anchors (one long page).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const settingsLayout = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-6\",\n    head: \"flex flex-col gap-1\",\n    title: \"font-display text-2xl font-extrabold tracking-tight text-fg\",\n    description: \"max-w-2xl text-sm text-fg-secondary\",\n    columns: \"grid grid-cols-1 gap-6 lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-10\",\n    nav: \"-mx-4 overflow-x-auto overflow-y-hidden px-4 py-1 -my-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:mx-0 lg:overflow-visible lg:px-0 lg:py-0 lg:my-0\",\n    navList: \"flex w-max gap-2 lg:sticky lg:top-20 lg:w-auto lg:flex-col lg:gap-0.5\",\n    navLink:\n      \"flex h-9 items-center gap-2.5 whitespace-nowrap rounded-sm border border-border-default bg-surface-1 px-3.5 text-sm font-medium text-fg-secondary no-underline \" +\n      \"hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current]:border-accent aria-[current]:text-fg \" +\n      \"lg:rounded-lg lg:border-transparent lg:bg-transparent lg:px-3 lg:hover:bg-surface-2 lg:aria-[current]:bg-accent-soft [&>svg]:h-4 [&>svg]:w-4\",\n    content: \"flex min-w-0 flex-col gap-6\",\n    section: \"rounded-xl border border-border-default bg-surface-1\",\n    sectionHead: \"flex flex-col gap-1 px-5 pt-5\",\n    sectionTitle: \"text-base font-bold text-fg\",\n    sectionDescription: \"text-sm text-fg-secondary\",\n    sectionBody: \"flex flex-col gap-4 px-5 py-5\",\n    sectionFooter: \"flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle bg-surface-2/40 px-5 py-3 rounded-b-xl\",\n    // The flat look: no card, hairline-divided rows (Linear / Vercel / GitHub settings).\n    rows: \"flex flex-col divide-y divide-border-subtle border-y border-border-subtle\",\n    row: \"flex flex-col gap-2 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6\",\n    rowText: \"flex min-w-0 flex-col gap-0.5\",\n    rowLabel: \"text-sm font-medium text-fg\",\n    rowDescription: \"text-sm text-fg-secondary\",\n    rowControl: \"flex min-w-0 shrink-0 items-center gap-2 text-sm text-fg sm:max-w-[60%] sm:justify-end\",\n  },\n  variants: {\n    variant: {\n      card: {},\n      flat: {\n        content: \"max-w-[45rem] gap-10\",\n        section: \"rounded-none border-0 bg-transparent\",\n        sectionHead: \"gap-0.5 px-0 pb-3 pt-0\",\n        sectionBody: \"gap-0 px-0 py-0\",\n        sectionFooter: \"justify-start border-t-0 bg-transparent px-0 pb-0 pt-4\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"card\" },\n});\n\nexport interface SettingsNavItem {\n  /** Its id (the anchor of a section on one long page). */\n  id: string;\n  /** Its words. */\n  label: string;\n  /** Where it leads: a page (`/settings/billing`) or an anchor (`#billing`). */\n  href: string;\n  /** Its icon (a signature icon). */\n  icon?: React.ReactNode;\n  /** The section shown now: `aria-current`. */\n  current?: boolean;\n}\n\nexport type SettingsLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The screen's title (`Settings`). */\n  title?: React.ReactNode;\n  /** One sentence under it. */\n  description?: React.ReactNode;\n  /** The sections. */\n  nav: readonly SettingsNavItem[];\n  /** The navigation's accessible name (`Settings sections`). */\n  navLabel: string;\n  /** The app's link component for the sections (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /**\n   * `card` (each form a titled card) or `flat` (one calm column of at most 45rem, rows divided by hairlines).\n   * @default \"card\"\n   */\n  variant?: \"card\" | \"flat\";\n  /** The current section's forms (`SettingsSection`). */\n  children: React.ReactNode;\n};\n\n/** A settings screen: sections on the left (chips on a phone), forms on the right. */\nexport function SettingsLayout({ title, description, nav, navLabel, linkAs: Link = \"a\", variant = \"card\", className, children, ...props }: SettingsLayoutProps) {\n  const s = settingsLayout({ variant });\n  return (\n    <div className={s.root({ className })} {...props}>\n      {(title || description) && (\n        <div className={s.head()}>\n          {title && <h1 className={s.title()}>{title}</h1>}\n          {description && <p className={s.description()}>{description}</p>}\n        </div>\n      )}\n      <div className={s.columns()}>\n        <nav aria-label={navLabel} className={s.nav()}>\n          <ul className={s.navList()}>\n            {nav.map((item) => (\n              <li key={item.id}>\n                <Link href={item.href} className={s.navLink()} aria-current={item.current ? (item.href.startsWith(\"#\") ? \"location\" : \"page\") : undefined}>\n                  {item.icon}\n                  {item.label}\n                </Link>\n              </li>\n            ))}\n          </ul>\n        </nav>\n        <div className={s.content()}>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport type SettingsSectionProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The section's title: it names the region (and is its anchor's target when `id` is set). */\n  title: React.ReactNode;\n  /** What these settings change, in one sentence. */\n  description?: React.ReactNode;\n  /** At the foot: the section's own save (a Button), a note. */\n  footer?: React.ReactNode;\n  /**\n   * `card` (a titled card) or `flat` (no card: a title, then hairline-divided `SettingsRow`s).\n   * @default \"card\"\n   */\n  variant?: \"card\" | \"flat\";\n  /** The fields (or, flat, the `SettingsRow`s). */\n  children: React.ReactNode;\n};\n\n/** A group of settings: a titled card with its fields and its own save, or flat rows under a title. */\nexport function SettingsSection({ title, description, footer, variant = \"card\", id, className, children, ...props }: SettingsSectionProps) {\n  const s = settingsLayout({ variant });\n  const auto = React.useId();\n  const titleId = `${id ?? auto}-title`;\n  return (\n    <section id={id} aria-labelledby={titleId} className={s.section({ className })} {...props}>\n      <div className={s.sectionHead()}>\n        <h2 id={titleId} className={s.sectionTitle()}>\n          {title}\n        </h2>\n        {description && <p className={s.sectionDescription()}>{description}</p>}\n      </div>\n      <div className={variant === \"flat\" ? s.rows() : s.sectionBody()} data-settings-rows={variant === \"flat\" ? \"\" : undefined}>\n        {children}\n      </div>\n      {footer && <div className={s.sectionFooter()}>{footer}</div>}\n    </section>\n  );\n}\n\nexport type SettingsRowProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** What the setting is (`Username`). */\n  label: React.ReactNode;\n  /** The help text under it, one sentence. */\n  description?: React.ReactNode;\n  /** The id of the control, so the label names it (a `<label htmlFor>`). Leave out for a plain value. */\n  htmlFor?: string;\n  /** The control or the value, on the right (stacked under the label on a phone). */\n  children?: React.ReactNode;\n};\n\n/** One setting: its label and help on the left, its control or value on the right. Put rows in a flat `SettingsSection`. */\nexport function SettingsRow({ label, description, htmlFor, className, children, ...props }: SettingsRowProps) {\n  const s = settingsLayout();\n  const Label = htmlFor ? \"label\" : \"span\";\n  return (\n    <div className={s.row({ className })} {...props}>\n      <div className={s.rowText()}>\n        <Label className={s.rowLabel()} {...(htmlFor ? { htmlFor } : {})}>\n          {label}\n        </Label>\n        {description && <span className={s.rowDescription()}>{description}</span>}\n      </div>\n      {children !== undefined && <div className={s.rowControl()}>{children}</div>}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/settings-layout/save-status.ts","../src/settings-layout/settings-layout.tsx","../src/button/button.tsx","../src/spinner/glyph.tsx","../src/button/recipe.ts"],"sourcesContent":["import * as React from \"react\";\n\n/** Where an inline save is: nothing to say, in flight, done (for a moment), or failed. */\nexport const SaveStatus = { Idle: \"idle\", Saving: \"saving\", Saved: \"saved\", Error: \"error\" } as const;\nexport type SaveStatus = (typeof SaveStatus)[keyof typeof SaveStatus];\n\n/** How long « Saved » stays before the section goes quiet again. */\n// @fixed: an interface timing (how long a confirmation reads), not a business setting.\nexport const SAVED_VISIBLE_MS = 4000;\n\nexport interface SaveTracker {\n  status: SaveStatus;\n  /** The failure of the last try, for the message beside the button. */\n  error: unknown;\n  /** Runs a save: `saving`, then `saved` (back to `idle` after a moment) or `error`. Never rejects. */\n  track: (save: () => Promise<unknown>) => Promise<boolean>;\n  /** Clears the status (the form was edited again, or the save was undone). */\n  reset: () => void;\n}\n\n/** The status of one section's save. Feed it to `SettingsSection`'s `save.status`. */\nexport function useSaveStatus(): SaveTracker {\n  const [status, setStatus] = React.useState<SaveStatus>(SaveStatus.Idle);\n  const [error, setError] = React.useState<unknown>(undefined);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const clear = React.useCallback(() => {\n    if (timer.current) clearTimeout(timer.current);\n    timer.current = undefined;\n  }, []);\n  React.useEffect(() => clear, [clear]);\n  const reset = React.useCallback(() => {\n    clear();\n    setStatus(SaveStatus.Idle);\n    setError(undefined);\n  }, [clear]);\n  const track = React.useCallback(\n    async (save: () => Promise<unknown>) => {\n      clear();\n      setStatus(SaveStatus.Saving);\n      setError(undefined);\n      try {\n        await save();\n        setStatus(SaveStatus.Saved);\n        timer.current = setTimeout(() => setStatus(SaveStatus.Idle), SAVED_VISIBLE_MS);\n        return true;\n      } catch (failure) {\n        setError(failure);\n        setStatus(SaveStatus.Error);\n        return false;\n      }\n    },\n    [clear],\n  );\n  return { status, error, track, reset };\n}\n","// Server-safe. Settings, read from the products' account and administration screens: a list of sections on the left\n// (a row of chips that scrolls on a phone), the current section's forms on the right, each form a titled card with its\n// own save at the foot. The sections are links (one page each) or anchors (one long page).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Button } from \"../button/button\";\nimport { SaveStatus } from \"./save-status\";\n\nexport const settingsLayout = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-6\",\n    head: \"flex flex-col gap-1\",\n    title: \"font-display text-2xl font-extrabold tracking-tight text-fg\",\n    description: \"max-w-2xl text-sm text-fg-secondary\",\n    columns: \"grid grid-cols-1 gap-6 lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-10\",\n    nav: \"-mx-4 overflow-x-auto overflow-y-hidden px-4 py-1 -my-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:mx-0 lg:overflow-visible lg:px-0 lg:py-0 lg:my-0\",\n    navList: \"flex w-max gap-2 lg:sticky lg:top-20 lg:w-auto lg:flex-col lg:gap-0.5\",\n    navLink:\n      \"flex h-9 items-center gap-2.5 whitespace-nowrap rounded-sm border border-border-default bg-surface-1 px-3.5 text-sm font-medium text-fg-secondary no-underline \" +\n      \"hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current]:border-accent aria-[current]:text-fg \" +\n      \"lg:rounded-lg lg:border-transparent lg:bg-transparent lg:px-3 lg:hover:bg-surface-2 lg:aria-[current]:bg-accent-soft [&>svg]:h-4 [&>svg]:w-4\",\n    content: \"flex min-w-0 flex-col gap-6\",\n    section: \"rounded-xl border border-border-default bg-surface-1\",\n    sectionHead: \"flex flex-col gap-1 px-5 pt-5\",\n    sectionTitle: \"text-base font-bold text-fg\",\n    sectionDescription: \"text-sm text-fg-secondary\",\n    sectionBody: \"flex flex-col gap-4 px-5 py-5\",\n    sectionFooter: \"flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle bg-surface-2/40 px-5 py-3 rounded-b-xl\",\n    // The flat look: no card, hairline-divided rows (Linear / Vercel / GitHub settings).\n    rows: \"flex flex-col divide-y divide-border-subtle border-y border-border-subtle\",\n    row: \"flex flex-col gap-2 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6\",\n    rowText: \"flex min-w-0 flex-col gap-0.5\",\n    rowLabel: \"text-sm font-medium text-fg\",\n    rowDescription: \"text-sm text-fg-secondary\",\n    rowControl: \"flex min-w-0 shrink-0 items-center gap-2 text-sm text-fg sm:max-w-[60%] sm:justify-end\",\n  },\n  variants: {\n    variant: {\n      card: {},\n      flat: {\n        content: \"max-w-[45rem] gap-10\",\n        section: \"rounded-none border-0 bg-transparent\",\n        sectionHead: \"gap-0.5 px-0 pb-3 pt-0\",\n        sectionBody: \"gap-0 px-0 py-0\",\n        sectionFooter: \"justify-start border-t-0 bg-transparent px-0 pb-0 pt-4\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"card\" },\n});\n\nexport interface SettingsNavItem {\n  /** Its id (the anchor of a section on one long page). */\n  id: string;\n  /** Its words. */\n  label: string;\n  /** Where it leads: a page (`/settings/billing`) or an anchor (`#billing`). */\n  href: string;\n  /** Its icon (a signature icon). */\n  icon?: React.ReactNode;\n  /** The section shown now: `aria-current`. */\n  current?: boolean;\n}\n\nexport type SettingsLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The screen's title (`Settings`). */\n  title?: React.ReactNode;\n  /** One sentence under it. */\n  description?: React.ReactNode;\n  /** The sections. */\n  nav: readonly SettingsNavItem[];\n  /** The navigation's accessible name (`Settings sections`). */\n  navLabel: string;\n  /** The app's link component for the sections (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /**\n   * `card` (each form a titled card) or `flat` (one calm column of at most 45rem, rows divided by hairlines).\n   * @default \"card\"\n   */\n  variant?: \"card\" | \"flat\";\n  /** The current section's forms (`SettingsSection`). */\n  children: React.ReactNode;\n};\n\n/** A settings screen: sections on the left (chips on a phone), forms on the right. */\nexport function SettingsLayout({ title, description, nav, navLabel, linkAs: Link = \"a\", variant = \"card\", className, children, ...props }: SettingsLayoutProps) {\n  const s = settingsLayout({ variant });\n  return (\n    <div className={s.root({ className })} {...props}>\n      {(title || description) && (\n        <div className={s.head()}>\n          {title && <h1 className={s.title()}>{title}</h1>}\n          {description && <p className={s.description()}>{description}</p>}\n        </div>\n      )}\n      <div className={s.columns()}>\n        <nav aria-label={navLabel} className={s.nav()}>\n          <ul className={s.navList()}>\n            {nav.map((item) => (\n              <li key={item.id}>\n                <Link href={item.href} className={s.navLink()} aria-current={item.current ? (item.href.startsWith(\"#\") ? \"location\" : \"page\") : undefined}>\n                  {item.icon}\n                  {item.label}\n                </Link>\n              </li>\n            ))}\n          </ul>\n        </nav>\n        <div className={s.content()}>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport interface SectionSaveLabels {\n  /** “Save”. */\n  save: string;\n  /** “Saving…”. */\n  saving: string;\n  /** “Saved”. */\n  saved: string;\n  /** What failed, one sentence (“Could not save. Try again.”). */\n  error: string;\n  /** “Undo” — only shown after a save, when `onUndo` is given. */\n  undo: string;\n  /** “Discard changes” — only shown while dirty, when `onDiscard` is given. */\n  discard: string;\n}\n\n/** The one save of a section: its dirty state, its status, its words. */\nexport interface SectionSave {\n  /** Whether a field differs from what is saved: the save is enabled only then. */\n  dirty: boolean;\n  /** Where the save is (`useSaveStatus().status`). */\n  status: SaveStatus;\n  /** Saves the section (the form's submit, Enter included). */\n  onSave: () => void;\n  /** Puts the previous values back after a save, optimistic update included. */\n  onUndo?: () => void;\n  /** Throws the edits away while dirty. */\n  onDiscard?: () => void;\n  labels: SectionSaveLabels;\n}\n\nexport type SettingsSectionProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /**\n   * One save for the whole section: the section becomes a form, the foot shows the Save (enabled while dirty), the\n   * result in a live region (saved, or the error as an alert) and an undo after a save. Replaces `footer`.\n   */\n  save?: SectionSave;\n  /** The section's title: it names the region (and is its anchor's target when `id` is set). */\n  title: React.ReactNode;\n  /** What these settings change, in one sentence. */\n  description?: React.ReactNode;\n  /** At the foot: the section's own save (a Button), a note. */\n  footer?: React.ReactNode;\n  /**\n   * `card` (a titled card) or `flat` (no card: a title, then hairline-divided `SettingsRow`s).\n   * @default \"card\"\n   */\n  variant?: \"card\" | \"flat\";\n  /** The fields (or, flat, the `SettingsRow`s). A section of a title, a sentence and a foot action has none. */\n  children?: React.ReactNode;\n};\n\n/** A group of settings: a titled card with its fields and its own save, or flat rows under a title. */\nexport function SettingsSection({ title, description, footer, save, variant = \"card\", id, className, children, ...props }: SettingsSectionProps) {\n  const s = settingsLayout({ variant });\n  const auto = React.useId();\n  const titleId = `${id ?? auto}-title`;\n  const head = (\n    <div className={s.sectionHead()}>\n      <h2 id={titleId} className={s.sectionTitle()}>\n        {title}\n      </h2>\n      {description && <p className={s.sectionDescription()}>{description}</p>}\n    </div>\n  );\n  const body = children === undefined ? null : (\n    <div className={variant === \"flat\" ? s.rows() : s.sectionBody()} data-settings-rows={variant === \"flat\" ? \"\" : undefined}>\n      {children}\n    </div>\n  );\n  return (\n    <section id={id} aria-labelledby={titleId} data-dirty={save?.dirty ? \"\" : undefined} className={s.section({ className })} {...props}>\n      {save ? (\n        <form\n          noValidate\n          onSubmit={(event) => {\n            event.preventDefault();\n            if (save.dirty && save.status !== SaveStatus.Saving) save.onSave();\n          }}\n        >\n          {head}\n          {body}\n          <div className={s.sectionFooter()}>\n            <SaveFeedback save={save} />\n            {save.onDiscard && save.dirty ? (\n              <Button type=\"button\" variant=\"ghost\" onClick={save.onDiscard}>\n                {save.labels.discard}\n              </Button>\n            ) : null}\n            <Button type=\"submit\" variant=\"primary\" disabled={!save.dirty || save.status === SaveStatus.Saving} loading={save.status === SaveStatus.Saving}>\n              {save.labels.save}\n            </Button>\n          </div>\n        </form>\n      ) : (\n        <>\n          {head}\n          {body}\n          {footer && <div className={s.sectionFooter()}>{footer}</div>}\n        </>\n      )}\n    </section>\n  );\n}\n\n/** The result of the last save: « Saved » (with Undo) in a polite live region, a failure as an alert. The region stays mounted so the change is announced. */\nfunction SaveFeedback({ save }: { save: SectionSave }) {\n  const failed = save.status === SaveStatus.Error;\n  const saved = save.status === SaveStatus.Saved;\n  return (\n    <div className=\"mr-auto flex min-w-0 items-center gap-2 text-sm\">\n      <span role={failed ? \"alert\" : \"status\"} aria-live={failed ? \"assertive\" : \"polite\"} className={failed ? \"text-danger-text\" : \"text-fg-secondary\"}>\n        {failed ? save.labels.error : saved ? save.labels.saved : save.status === SaveStatus.Saving ? save.labels.saving : \"\"}\n      </span>\n      {saved && save.onUndo ? (\n        <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={save.onUndo}>\n          {save.labels.undo}\n        </Button>\n      ) : null}\n    </div>\n  );\n}\n\nexport type SettingsRowProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** What the setting is (`Username`). */\n  label: React.ReactNode;\n  /** The help text under it, one sentence. */\n  description?: React.ReactNode;\n  /** The id of the control, so the label names it (a `<label htmlFor>`). Leave out for a plain value. */\n  htmlFor?: string;\n  /** The control or the value, on the right (stacked under the label on a phone). */\n  children?: React.ReactNode;\n};\n\n/** One setting: its label and help on the left, its control or value on the right. Put rows in a flat `SettingsSection`. */\nexport function SettingsRow({ label, description, htmlFor, className, children, ...props }: SettingsRowProps) {\n  const s = settingsLayout();\n  const Label = htmlFor ? \"label\" : \"span\";\n  return (\n    <div className={s.row({ className })} {...props}>\n      <div className={s.rowText()}>\n        <Label className={s.rowLabel()} {...(htmlFor ? { htmlFor } : {})}>\n          {label}\n        </Label>\n        {description && <span className={s.rowDescription()}>{description}</span>}\n      </div>\n      {children !== undefined && <div className={s.rowControl()}>{children}</div>}\n    </div>\n  );\n}\n","// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { LoaderGlyph } from \"../spinner/glyph\";\nimport { buttonRecipe } from \"./recipe\";\n\nexport const buttonVariants = tv(buttonRecipe);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n  ButtonVariants & {\n    /**\n     * The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,\n     * `ghost`, `danger`.\n     * @default \"secondary\"\n     */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * sm · md · lg, or `icon` (a square).\n     * @default \"md\"\n     */\n    size?: ButtonVariants[\"size\"];\n    /**\n     * `rounded` (an 8 px radius, the radius of a field) · `pill`. `cut` is deprecated (krizaka-ui#393: the chamfer is\n     * retired) — it draws `rounded` and warns in development; it will be removed in 4.0.\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /**\n     * Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the\n     * button keeps its colour.\n     */\n    loading?: boolean;\n    /**\n     * Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an\n     * upload, an export).\n     */\n    progress?: number | null;\n    /**\n     * How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of\n     * the status colour opens around it. Clear it to return to rest.\n     */\n    status?: \"success\" | \"error\" | null;\n    /** A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated. */\n    announce?: string;\n    /**\n     * Shows the glyph while `loading` / with a `status`. `false`: you draw your own.\n     * @default true\n     */\n    indicator?: boolean;\n    /** @deprecated Since 3.31 (krizaka-ui#393): does nothing — the hover is quiet. Removed in 4.0. */\n    shimmer?: boolean;\n    /** @deprecated Since 3.31 (krizaka-ui#393): does nothing — a button never moves under the pointer. Removed in 4.0. */\n    magnetic?: boolean;\n  };\n\nconst STATUS_TEXT = { success: \"text-fg-success\", error: \"text-fg-danger\" } as const;\n\nlet warnedCut = false;\n/** `shape=\"cut\"` (the chamfer) is retired: one warning per page in development, never in production. */\nfunction warnCut() {\n  if (warnedCut || typeof process === \"undefined\" || process.env.NODE_ENV === \"production\") return;\n  warnedCut = true;\n  console.warn('@krizaka/ui/button: shape=\"cut\" is deprecated (krizaka-ui#393) and now draws the default rounded shape. Remove the prop.');\n}\n\nexport function Button({\n  asChild,\n  loading,\n  progress,\n  status,\n  announce,\n  indicator = true,\n  shimmer: _shimmer,\n  magnetic: _magnetic,\n  variant,\n  size,\n  shape,\n  className,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  if (shape === \"cut\") warnCut();\n  const known = loading && typeof progress === \"number\" && Number.isFinite(progress);\n  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;\n  const glyph = indicator && !asChild && (loading || status) ? (status ?? \"loading\") : null;\n  // On a filled variant the glyph stays in the label's colour; on the others it takes the status colour.\n  const filled = variant === \"primary\" || variant === \"gradient\";\n  const button = (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      data-kz-status={status ?? undefined}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({\n        variant,\n        size,\n        shape,\n        className: cn(known && \"relative isolate overflow-hidden\", className),\n      })}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {known && (\n            <span aria-hidden className=\"absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n          )}\n          {glyph && (\n            <span\n              aria-hidden\n              data-slot=\"indicator\"\n              className=\"-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0\"\n            >\n              <span className=\"overflow-hidden\">\n                <LoaderGlyph state={glyph} value={known ? ratio : null} className={cn(\"h-4 w-4\", glyph !== \"loading\" && !filled && STATUS_TEXT[glyph])} />\n              </span>\n            </span>\n          )}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n  if (announce === undefined || asChild) return button;\n  return (\n    <>\n      {button}\n      <span role=\"status\" className=\"sr-only\">\n        {announce}\n      </span>\n    </>\n  );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"size\"> & {\n  /** The accessible name (and tooltip) of the button — required, passed translated. */\n  label: string;\n  /**\n   * sm · md · lg, or `icon` (a square).\n   * @default \"icon\"\n   */\n  size?: ButtonProps[\"size\"];\n};\n\n/** An icon-only button: `label` is required, it is its accessible name. Loading or with a status, the glyph takes the icon's place. */\nexport function IconButton({ label, size = \"icon\", children, ...props }: IconButtonProps) {\n  const swap = props.indicator !== false && !props.asChild && (props.loading || props.status);\n  return (\n    <Button aria-label={label} title={label} size={size} {...props}>\n      {swap ? null : children}\n    </Button>\n  );\n}\n","// The Krizaka loader glyph, server-safe: a hexagon (the marks' shape) traced by a segment of light around a node that\n// breathes; determinate, it fills to its value; done, the trace closes and a check (or a cross) draws itself. Animated by\n// motion.css (`kz-loader-*`); still under prefers-reduced-motion — a segment at rest and the node lit, never blank.\nimport type * as React from \"react\";\n\n/** The hexagon, pointy top, radius 9 around (12, 12). */\nconst HEX = \"M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z\";\n\n/** What the glyph shows: a wait (with an optional value), or how it ended. */\nexport type LoaderGlyphState = \"loading\" | \"success\" | \"error\";\n\nexport interface LoaderGlyphProps extends Omit<React.ComponentProps<\"svg\">, \"children\"> {\n  /** loading · success · error. */\n  state?: LoaderGlyphState;\n  /** Between 0 and 1: a determinate wait, the trace grows to it. Absent: indeterminate. */\n  value?: number | null;\n}\n\n/** The glyph alone (decorative): the Spinner, the Loader and the Button's `loading` draw it. */\nexport function LoaderGlyph({ state = \"loading\", value, ...props }: LoaderGlyphProps) {\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const fill = state !== \"loading\" ? 100 : known ? Math.round(Math.min(1, Math.max(0, value)) * 100) : null;\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden data-state={state} data-progress={fill === null ? undefined : fill} {...props}>\n      <path d={HEX} stroke=\"currentColor\" strokeOpacity=\"0.22\" strokeWidth=\"2.2\" strokeLinejoin=\"round\" />\n      <path\n        d={HEX}\n        pathLength={100}\n        stroke=\"currentColor\"\n        strokeWidth=\"2.2\"\n        strokeLinejoin=\"round\"\n        strokeLinecap=\"round\"\n        className=\"kz-loader-trace\"\n        strokeDasharray={fill === null ? undefined : `${fill} ${100 - fill}`}\n      />\n      {state === \"loading\" && <circle cx=\"12\" cy=\"12\" r=\"2.6\" fill=\"currentColor\" className=\"kz-loader-node\" />}\n      {state === \"success\" && <path d=\"M8.3 12.3l2.6 2.6 4.9-5.3\" pathLength={20} stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"kz-loader-mark\" />}\n      {state === \"error\" && <path d=\"M9.4 9.4l5.2 5.2M14.6 9.4l-5.2 5.2\" pathLength={20} stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" className=\"kz-loader-mark\" />}\n    </svg>\n  );\n}\n","// The button's variants, written once as classes of the Krizaka tokens: the web wears them with `tv(buttonRecipe)`\n// (button.tsx), React Native reads the same classes into styles (native/button.tsx, `nativeRecipe`).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const buttonRecipe = defineRecipe({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition duration-150 \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n    \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] \" +\n    // Busy is not unavailable: a loading button keeps its colour (it is disabled only so it is not pressed twice).\n    \"[&[data-loading]]:opacity-100\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).\n      gradient: \"bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110\",\n      secondary: \"border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3\",\n      outline: \"border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest\n      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).\n      danger: \"border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20\",\n    },\n    size: { sm: \"h-8 px-3 text-xs\", md: \"h-10 px-4 text-sm\", lg: \"h-12 px-6 text-sm\", icon: \"h-10 w-10\" },\n    // One clean shape (krizaka-ui#393): an 8 px radius (`--kz-radius-sm`, the radius of a field — a button beside an\n    // input lines up with it), the pill on demand. `cut` (the retired chamfer) is a deprecated alias of `rounded`.\n    shape: { rounded: \"rounded-sm\", pill: \"rounded-full\", cut: \"rounded-sm\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n"],"mappings":"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","names":["React","tv","jsx","jsxs","Fragment","jsx","jsxs","tv"]}

package/dist/upload-queue.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+/** Where a file is: waiting, being read, being checked, finished well, or not. */
+declare const QueueStatus: {
+    readonly Queued: "queued";
+    readonly Reading: "reading";
+    readonly Checking: "checking";
+    readonly Done: "done";
+    readonly Failed: "failed";
+};
+type QueueStatus = (typeof QueueStatus)[keyof typeof QueueStatus];
+/** A row while it works: the shimmer and the live progress belong to these states only. */
+declare function isWorking(status: QueueStatus): boolean;
+interface QueueTally {
+    total: number;
+    working: number;
+    queued: number;
+    done: number;
+    failed: number;
+}
+/** What the tray's header says: how many are working, finished, failed. */
+declare function tally(items: readonly {
+    status: QueueStatus;
+}[]): QueueTally;
+/** The progress of a row clamped to 0–1, or `undefined` when it has none (an indeterminate wait). */
+declare function progressOf(value: number | undefined): number | undefined;
+
+interface UploadQueueItem {
+    /** Its key: stable while the row updates. */
+    id: string;
+    /** The file's name. */
+    name: string;
+    /** Where it is: queued, reading, checking, done, failed. */
+    status: QueueStatus;
+    /** What it is doing, in words (“Reading…”, “Checking the rules…”) — passed translated, from the live events. */
+    statusText: string;
+    /** 0–1 while the work reports it; absent for an indeterminate wait. */
+    progress?: number;
+    /** The result, when done: a chip (`Chip`, `Badge`) or a line. */
+    result?: React.ReactNode;
+    /** The row's one quiet action: a « keep » toggle, a retry, a dismiss. */
+    trailing?: React.ReactNode;
+}
+type UploadQueueProps = Omit<React.ComponentProps<"div">, "children"> & {
+    /** The list's accessible name (“Checks in progress”) — passed translated. */
+    label: string;
+    /** The rows, in the order they were added. */
+    items: readonly UploadQueueItem[];
+};
+/** The files being checked, one row each. Changes are announced politely. */
+declare function UploadQueue({ label, items, className, ...props }: UploadQueueProps): React.JSX.Element;
+type TaskTrayProps = Omit<React.ComponentProps<"section">, "title"> & {
+    /** The tray's name (“Checks”). */
+    title: string;
+    /** The tally in words (“1 running · 2 done”). */
+    summary: string;
+    /** The fold button's name while open (“Collapse”). */
+    toggleLabel: string;
+    /** … and while folded (“Show”). */
+    openLabel: string;
+    /** Starts open. @default true */
+    defaultOpen?: boolean;
+};
+/** A non-blocking tray for a queue: the user keeps browsing. Bottom edge on a phone, bottom-right from `sm`. */
+declare function TaskTray({ title, summary, toggleLabel, openLabel, defaultOpen, className, children, ...props }: TaskTrayProps): React.JSX.Element;
+
+export { QueueStatus, type QueueTally, TaskTray, type TaskTrayProps, UploadQueue, type UploadQueueItem, type UploadQueueProps, isWorking, progressOf, tally };

package/dist/upload-queue.js

@@ -0,0 +1,76 @@
+import {
+  cn
+} from "./chunk-S6NYGOJT.js";
+
+// src/upload-queue/model.ts
+var QueueStatus = { Queued: "queued", Reading: "reading", Checking: "checking", Done: "done", Failed: "failed" };
+function isWorking(status) {
+  return status === QueueStatus.Reading || status === QueueStatus.Checking;
+}
+function tally(items) {
+  const count = (test) => items.filter((item) => test(item.status)).length;
+  return {
+    total: items.length,
+    working: count(isWorking),
+    queued: count((s) => s === QueueStatus.Queued),
+    done: count((s) => s === QueueStatus.Done),
+    failed: count((s) => s === QueueStatus.Failed)
+  };
+}
+function progressOf(value) {
+  return value === void 0 || Number.isNaN(value) ? void 0 : Math.min(1, Math.max(0, value));
+}
+
+// src/upload-queue/upload-queue.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function UploadQueue({ label, items, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "aria-live": "polite", className, ...props, children: /* @__PURE__ */ jsx("ul", { "aria-label": label, className: "m-0 flex list-none flex-col divide-y divide-border-subtle p-0", children: items.map((item) => {
+    const working = isWorking(item.status);
+    const progress = progressOf(item.progress);
+    return /* @__PURE__ */ jsxs("li", { "data-status": item.status, "data-working": working ? "" : void 0, className: "kz-queue-row flex flex-col gap-1.5 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-fg", children: item.name }),
+        item.result ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.result }) : null,
+        item.trailing ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.trailing }) : null
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: cn("text-xs", item.status === QueueStatus.Failed ? "text-fg-danger" : "text-fg-secondary"), children: item.statusText }),
+      working && progress !== void 0 ? /* @__PURE__ */ jsx("div", { role: "progressbar", "aria-label": item.name, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(progress * 100), className: "h-1 overflow-hidden rounded-full bg-surface-3", children: /* @__PURE__ */ jsx("div", { className: "kz-working h-full rounded-full bg-accent", style: { width: `${progress * 100}%` } }) }) : null
+    ] }, item.id);
+  }) }) });
+}
+function TaskTray({ title, summary, toggleLabel, openLabel, defaultOpen = true, className, children, ...props }) {
+  const [open, setOpen] = React.useState(defaultOpen);
+  const id = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": `${id}-title`,
+      "data-state": open ? "open" : "closed",
+      className: cn(
+        "kz-tray fixed inset-x-0 bottom-0 z-40 flex max-h-[70dvh] flex-col rounded-t-2xl border border-border-default bg-surface-1 shadow-lg sm:inset-x-auto sm:bottom-4 sm:right-4 sm:w-96 sm:rounded-2xl",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center gap-3 px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("h2", { id: `${id}-title`, className: "m-0 text-sm font-semibold text-fg", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "m-0 truncate text-xs text-fg-secondary", children: summary })
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", "aria-expanded": open, "aria-controls": `${id}-body`, onClick: () => setOpen(!open), className: "rounded-md px-2 py-1 text-sm text-fg-secondary hover:text-fg focus-visible:focus-ring", children: open ? toggleLabel : openLabel })
+        ] }),
+        open ? /* @__PURE__ */ jsx("div", { id: `${id}-body`, className: "kz-tray-body min-h-0 overflow-y-auto px-4 pb-2", children }) : null
+      ]
+    }
+  );
+}
+export {
+  QueueStatus,
+  TaskTray,
+  UploadQueue,
+  isWorking,
+  progressOf,
+  tally
+};
+//# sourceMappingURL=upload-queue.js.map

package/dist/upload-queue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/upload-queue/model.ts","../src/upload-queue/upload-queue.tsx"],"sourcesContent":["// Headless: the vocabulary and the arithmetic of an upload queue (what each row is doing, what the tray says).\n\n/** Where a file is: waiting, being read, being checked, finished well, or not. */\nexport const QueueStatus = { Queued: \"queued\", Reading: \"reading\", Checking: \"checking\", Done: \"done\", Failed: \"failed\" } as const;\nexport type QueueStatus = (typeof QueueStatus)[keyof typeof QueueStatus];\n\n/** A row while it works: the shimmer and the live progress belong to these states only. */\nexport function isWorking(status: QueueStatus): boolean {\n  return status === QueueStatus.Reading || status === QueueStatus.Checking;\n}\n\nexport interface QueueTally {\n  total: number;\n  working: number;\n  queued: number;\n  done: number;\n  failed: number;\n}\n\n/** What the tray's header says: how many are working, finished, failed. */\nexport function tally(items: readonly { status: QueueStatus }[]): QueueTally {\n  const count = (test: (status: QueueStatus) => boolean) => items.filter((item) => test(item.status)).length;\n  return {\n    total: items.length,\n    working: count(isWorking),\n    queued: count((s) => s === QueueStatus.Queued),\n    done: count((s) => s === QueueStatus.Done),\n    failed: count((s) => s === QueueStatus.Failed),\n  };\n}\n\n/** The progress of a row clamped to 0–1, or `undefined` when it has none (an indeterminate wait). */\nexport function progressOf(value: number | undefined): number | undefined {\n  return value === undefined || Number.isNaN(value) ? undefined : Math.min(1, Math.max(0, value));\n}\n","// Client (the tray's fold). A queue of files that stays on screen: each row appears at once, says in words what it is doing,\n// shows live progress while it works (a shimmer only then), and ends in a result chip; a row may carry one quiet action (a\n// « keep » toggle). `TaskTray` is the non-blocking container: bottom-right on a desktop, a sheet on a phone's bottom edge.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { isWorking, progressOf, QueueStatus } from \"./model\";\n\nexport interface UploadQueueItem {\n  /** Its key: stable while the row updates. */\n  id: string;\n  /** The file's name. */\n  name: string;\n  /** Where it is: queued, reading, checking, done, failed. */\n  status: QueueStatus;\n  /** What it is doing, in words (“Reading…”, “Checking the rules…”) — passed translated, from the live events. */\n  statusText: string;\n  /** 0–1 while the work reports it; absent for an indeterminate wait. */\n  progress?: number;\n  /** The result, when done: a chip (`Chip`, `Badge`) or a line. */\n  result?: React.ReactNode;\n  /** The row's one quiet action: a « keep » toggle, a retry, a dismiss. */\n  trailing?: React.ReactNode;\n}\n\nexport type UploadQueueProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** The list's accessible name (“Checks in progress”) — passed translated. */\n  label: string;\n  /** The rows, in the order they were added. */\n  items: readonly UploadQueueItem[];\n};\n\n/** The files being checked, one row each. Changes are announced politely. */\nexport function UploadQueue({ label, items, className, ...props }: UploadQueueProps) {\n  return (\n    <div aria-live=\"polite\" className={className} {...props}>\n      <ul aria-label={label} className=\"m-0 flex list-none flex-col divide-y divide-border-subtle p-0\">\n        {items.map((item) => {\n          const working = isWorking(item.status);\n          const progress = progressOf(item.progress);\n          return (\n            <li key={item.id} data-status={item.status} data-working={working ? \"\" : undefined} className=\"kz-queue-row flex flex-col gap-1.5 py-3\">\n              <div className=\"flex items-center gap-3\">\n                <span className=\"min-w-0 flex-1 truncate text-sm font-medium text-fg\">{item.name}</span>\n                {item.result ? <span className=\"shrink-0\">{item.result}</span> : null}\n                {item.trailing ? <span className=\"shrink-0\">{item.trailing}</span> : null}\n              </div>\n              <span className={cn(\"text-xs\", item.status === QueueStatus.Failed ? \"text-fg-danger\" : \"text-fg-secondary\")}>{item.statusText}</span>\n              {working && progress !== undefined ? (\n                <div role=\"progressbar\" aria-label={item.name} aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(progress * 100)} className=\"h-1 overflow-hidden rounded-full bg-surface-3\">\n                  <div className=\"kz-working h-full rounded-full bg-accent\" style={{ width: `${progress * 100}%` }} />\n                </div>\n              ) : null}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n}\n\nexport type TaskTrayProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The tray's name (“Checks”). */\n  title: string;\n  /** The tally in words (“1 running · 2 done”). */\n  summary: string;\n  /** The fold button's name while open (“Collapse”). */\n  toggleLabel: string;\n  /** … and while folded (“Show”). */\n  openLabel: string;\n  /** Starts open. @default true */\n  defaultOpen?: boolean;\n};\n\n/** A non-blocking tray for a queue: the user keeps browsing. Bottom edge on a phone, bottom-right from `sm`. */\nexport function TaskTray({ title, summary, toggleLabel, openLabel, defaultOpen = true, className, children, ...props }: TaskTrayProps) {\n  const [open, setOpen] = React.useState(defaultOpen);\n  const id = React.useId();\n  return (\n    <section\n      aria-labelledby={`${id}-title`}\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(\n        \"kz-tray fixed inset-x-0 bottom-0 z-40 flex max-h-[70dvh] flex-col rounded-t-2xl border border-border-default bg-surface-1 shadow-lg sm:inset-x-auto sm:bottom-4 sm:right-4 sm:w-96 sm:rounded-2xl\",\n        className,\n      )}\n      {...props}\n    >\n      <header className=\"flex items-center gap-3 px-4 py-3\">\n        <div className=\"min-w-0 flex-1\">\n          <h2 id={`${id}-title`} className=\"m-0 text-sm font-semibold text-fg\">\n            {title}\n          </h2>\n          <p className=\"m-0 truncate text-xs text-fg-secondary\">{summary}</p>\n        </div>\n        <button type=\"button\" aria-expanded={open} aria-controls={`${id}-body`} onClick={() => setOpen(!open)} className=\"rounded-md px-2 py-1 text-sm text-fg-secondary hover:text-fg focus-visible:focus-ring\">\n          {open ? toggleLabel : openLabel}\n        </button>\n      </header>\n      {open ? (\n        <div id={`${id}-body`} className=\"kz-tray-body min-h-0 overflow-y-auto px-4 pb-2\">\n          {children}\n        </div>\n      ) : null}\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}