@krizaka/ui 3.54.0 → 3.55.0

package/dist/blocks.css

@@ -94,6 +94,76 @@
 :is([data-surface="product"], .brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza) :is(.kz-heading-title, .kz-hero-title) {
   font-weight: 650; /* the serif had one weight; the sans carries the hierarchy with a semibold */
 }
+
+/* ─── The product register, 2027 (ADR-006, krizaka-ui#669) ─────────────────────────────────────────────────────────
+   The calm look of the products: slate ink, translucent hairlines, a visible edge on every field, radius 14 on cards, an
+   interactive card that answers the hand. Only here: the Cahier sites (www, the blog, ui., java., ts., motion) keep
+   ADR-004 (paper, square corners, the quiet hover). The register is a product's ROOT — `data-surface="product"`, or its
+   `.brand-<id>` on `<html>` / `<body>`; a `.brand-<id>` wrapper inside a Cahier page (www's product cards, the docs'
+   examples) only lends its accent and stays Cahier. Both themes in one rule: `light-dark()` follows the `color-scheme` the tokens pin on `:root`,
+   `html.light`, `.theme-dark` and `.theme-light`, so a dark island in a light product stays dark.
+   Text roles are ≥ 4.5:1 and the control edge ≥ 3:1 on surfaces 0–2 (product-register.test.ts); a hairline is a
+   decoration (1.16:1) and never a field's only edge. `:root:is()` outranks `html.light`; the second selector keeps the
+   register inside a theme island of a product. The card rules below read `--kz-card-*`, set here and nowhere else. */
+:is([data-surface="product"], :root:is(.brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza), body:is(.brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza)), :is([data-surface="product"], :root:is(.brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza), body:is(.brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza)) :is(.theme-dark, .theme-light) {
+  --kz-surface-0: light-dark(#fbfbfa, #111318);
+  --kz-surface-1: light-dark(#ffffff, #171a21);
+  --kz-surface-2: light-dark(#f4f4f2, #1e222b);
+  --kz-surface-3: light-dark(#f0f0ed, #272c37);
+  --kz-text-title: light-dark(#222a3a, #f3f5f9);
+  --kz-text-primary: light-dark(#242c3d, #e8ebf1);
+  --kz-text-secondary: light-dark(#576275, #a9b1bf);
+  --kz-text-muted: light-dark(#646d80, #959eae);
+  --kz-border-subtle: light-dark(rgb(28 40 65 / 0.04), rgb(255 255 255 / 0.04));
+  --kz-border-default: light-dark(rgb(28 40 65 / 0.08), rgb(255 255 255 / 0.08));
+  --kz-border-control: light-dark(#7d8799, #646d7e);
+  --kz-border-hover: light-dark(color-mix(in srgb, var(--kz-accent) 22%, transparent), color-mix(in srgb, var(--kz-accent) 30%, transparent));
+  --kz-shadow-hover: 0 10px 25px -5px light-dark(rgb(0 0 0 / 0.04), rgb(0 0 0 / 0.5));
+  --kz-radius-xs: 4px;
+  --kz-radius-sm: 8px;
+  --kz-radius-md: 8px;
+  --kz-radius-lg: 14px;
+  --kz-radius-xl: 14px;
+  --kz-radius-2xl: 14px;
+  --kz-card-radius: var(--kz-radius-lg);
+  --kz-card-hover-shadow: var(--kz-shadow-hover);
+  --kz-card-hover-transform: translateY(-1px);
+  /* The faces (ADR-006 §2, #670): Plus Jakarta Sans for the titles, Courier Prime for the identifiers and tabular meta
+     (« KZ-03 », a reference, a time); code keeps the system monospace and the pen (Krizaka Cahier) is never inside a
+     product. The display steps take 550 / 650 and the tracking of a large title (−0.015 em from 24 px, −0.022 em from 40 px);
+     the page title and a statistic's value take 700 below. Going back is one token: --kz-font-display: var(--kz-font-sans). */
+  --kz-font-display: var(--kz-font-product-display);
+  --kz-type-display-2xl-weight: 550;
+  --kz-type-display-xl-weight: 550;
+  --kz-type-display-lg-weight: 550;
+  --kz-type-display-md-weight: 650;
+  --kz-type-display-sm-weight: 650;
+  --kz-type-display-2xl-tracking: -0.022em;
+  --kz-type-display-xl-tracking: -0.022em;
+  --kz-type-display-lg-tracking: -0.022em;
+  --kz-type-display-md-tracking: -0.015em;
+  --kz-type-display-sm-tracking: -0.015em;
+}
+/* Titles at 700 (PageHeader's title, Stat's value) in the title ink. */
+:is([data-surface="product"], :root:is(.brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza), body:is(.brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza)) :is(.kz-page-title, .kz-stat-value) { font-weight: 700; color: var(--kz-text-title); }
+/* The hover of an INTERACTIVE card only (a link or a button; ADR-006 amends ADR-003 here): the brand border, a soft shadow
+   and a 1 px lift in 150 ms. A static card never moves, nothing moves under reduced motion (the border and the shadow
+   still answer), a button keeps its colour-only hover. The Cahier sets none of the `--kz-card-hover-*`: it stays quiet. */
+.kz-link-card, a.kz-block-card, button.kz-block-card, [data-interactive] {
+  transition: transform 150ms var(--kz-ease, ease), box-shadow 150ms var(--kz-ease, ease), border-color 150ms var(--kz-ease, ease), background-color 150ms var(--kz-ease, ease);
+}
+@media (hover: hover) {
+  .kz-link-card:hover, a.kz-block-card:hover, button.kz-block-card:hover, [data-interactive]:hover {
+    border-color: var(--kz-border-hover);
+    box-shadow: var(--kz-card-hover-shadow, none);
+    transform: var(--kz-card-hover-transform, none);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kz-link-card, a.kz-block-card, button.kz-block-card, [data-interactive] { transition: none; }
+  .kz-link-card:hover, a.kz-block-card:hover, button.kz-block-card:hover, [data-interactive]:hover { transform: none; }
+}
+
 /* Cahier (ADR-004, #417): the eyebrow is a note in the margin's voice — the typewriter face, lower case, untracked,
    inked in the margin red. No more uppercase tracked overline above every heading. */
 .kz-eyebrow {
@@ -429,12 +499,12 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-foundation { --kz-rail: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 50%, var(--kz-border-default)); display: grid; }
 .kz-foundation-base { position: relative; display: grid; min-width: 0; }
 .kz-foundation-base::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 28px; background: var(--kz-rail); }
-.kz-foundation-group { position: relative; margin-top: 28px; padding: 22px 14px 14px; border: 1px solid var(--kz-rail); border-radius: 0; }
+.kz-foundation-group { position: relative; margin-top: 28px; padding: 22px 14px 14px; border: 1px solid var(--kz-rail); border-radius: var(--kz-card-radius, 0); }
 .kz-foundation-label { position: absolute; top: -9px; left: 22px; padding: 0 8px; font: 500 11px/18px var(--kz-font-mono, ui-monospace, monospace); letter-spacing: 0; text-transform: none; color: var(--kz-hue-text, var(--kz-accent-text)); background: var(--kz-surface-0); }
 .kz-foundation[data-position="end"] .kz-foundation-base { order: 2; }
 .kz-foundation[data-position="end"] .kz-foundation-group { order: 1; margin-top: 0; margin-bottom: 28px; }
 .kz-foundation[data-position="end"] .kz-foundation-base::after { top: auto; bottom: 100%; }
-@media (max-width: 640px) { .kz-foundation-group { padding: 20px 8px 8px; border-radius: 0; } }
+@media (max-width: 640px) { .kz-foundation-group { padding: 20px 8px 8px; border-radius: var(--kz-card-radius, 0); } }
 
 /* The shared surface of the cards: a rail of the hue along the top, and one quiet hover (krizaka-ui#393) — the surface
    goes one step up and the hairline strengthens, in a short colour transition. Nothing moves, nothing follows the
@@ -443,7 +513,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   position: relative;
   isolation: isolate;
   overflow: hidden;
-  border-radius: 0;
+  border-radius: var(--kz-card-radius, 0);
   background: var(--kz-surface-1);
   border: 1px solid var(--kz-border-default);
   transition: background-color 150ms var(--kz-ease, ease), border-color 150ms var(--kz-ease, ease);
@@ -646,7 +716,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 
 /* ─── DecisionList: one card per decision — what was chosen, large; refused · because · what it costs, side by side ─── */
 .kz-decisions { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
-.kz-decision { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 20px 22px; border-radius: 0; background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
+.kz-decision { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 20px 22px; border-radius: var(--kz-card-radius, 0); background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
 .kz-decision-n { font-family: var(--kz-font-display); font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: var(--kz-figures, lining-nums tabular-nums); color: var(--kz-hue-text, var(--kz-accent-text)); }
 .kz-decision-body { display: grid; gap: 14px; min-width: 0; }
 .kz-decision-part p:not(.kz-label) { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--kz-text-secondary); }
@@ -664,7 +734,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 @media (max-width: 560px) { .kz-decision { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px; } .kz-decision-n { font-size: 22px; } }
 
 /* ─── CodeBlock · CodeTabs: a file name, code that scrolls sideways (never shrinks), a copy button ─── */
-.kz-code { margin: 0; min-width: 0; overflow: hidden; border-radius: 0; background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); box-shadow: inset 3px 0 0 var(--kz-hue, var(--kz-accent)); }
+.kz-code { margin: 0; min-width: 0; overflow: hidden; border-radius: var(--kz-card-radius, 0); background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); box-shadow: inset 3px 0 0 var(--kz-hue, var(--kz-accent)); }
 .kz-code-bar {
   display: flex;
   align-items: center;
@@ -707,7 +777,9 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-code .kz-line-dim, .kz-code pre[data-focus] .th-line:not(.kz-line-focus) { color: var(--kz-text-secondary); }
 .kz-code .kz-line-dim .th-token, .kz-code pre[data-focus] .th-line:not(.kz-line-focus) .th-token { color: inherit; font-weight: inherit; }
 /* Markdown (TanStack Markdown's AST on the tokens): reading text, nothing decorative. */
-.kz-md { min-width: 0; color: var(--kz-text-primary); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
+.kz-md { min-width: 0; color: var(--kz-text-primary); font-size: 15px; line-height: 1.7; overflow-wrap: break-word; }
+.kz-md :is(p, li, a, th, td) { overflow-wrap: break-word; }
+.kz-md pre { white-space: pre; overflow-wrap: normal; }
 .kz-md > * { margin-block: 0; }
 .kz-md > * + * { margin-top: 0.9em; }
 .kz-md h1, .kz-md h2, .kz-md h3, .kz-md h4, .kz-md h5, .kz-md h6 { font-family: var(--kz-font-display); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; }
@@ -725,9 +797,24 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-md :not(pre) > code { padding: 0.12em 0.4em; border-radius: 6px; font-family: var(--kz-font-mono); font-size: 0.88em; background: var(--kz-surface-3); }
 .kz-md hr { border: 0; border-top: 1px solid var(--kz-border-default); }
 .kz-md img { max-width: 100%; height: auto; border-radius: 0; }
-.kz-md-table { overflow-x: auto; }
-.kz-md-table table { width: 100%; border-collapse: collapse; font-size: 0.93em; }
+.kz-md-table {
+  overflow-x: auto;
+  border: 1px solid var(--kz-border-subtle);
+  background:
+    linear-gradient(to right, var(--kz-surface-1) 30%, transparent) left / 32px 100%,
+    linear-gradient(to left, var(--kz-surface-1) 30%, transparent) right / 32px 100%,
+    linear-gradient(to right, color-mix(in srgb, var(--kz-text-primary) 20%, transparent), transparent) left / 10px 100%,
+    linear-gradient(to left, color-mix(in srgb, var(--kz-text-primary) 20%, transparent), transparent) right / 10px 100%;
+  background-color: var(--kz-surface-1);
+  background-repeat: no-repeat;
+  background-attachment: local, local, scroll, scroll;
+}
+.kz-md-table:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: -2px; }
+.kz-md-table table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 0.93em; }
 .kz-md-table :is(th, td) { padding: 0.55em 0.8em; text-align: start; border-bottom: 1px solid var(--kz-border-subtle); }
+.kz-md-cell { display: inline-block; vertical-align: top; width: max-content; min-width: min-content; max-width: 36ch; }
+.kz-md-table :is(th, td):first-child { width: 1%; white-space: nowrap; }
+.kz-md-table :is(th, td) code { white-space: nowrap; }
 .kz-md-table th { font-weight: 700; color: var(--kz-text-secondary); background: var(--kz-surface-2); }
 .kz-md [data-footnotes] { font-size: 0.9em; color: var(--kz-text-secondary); border-top: 1px solid var(--kz-border-subtle); padding-top: 0.8em; }
 /* A text still arriving: a caret where it goes on (still under reduced motion). */
@@ -795,7 +882,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   justify-content: space-between;
   gap: 20px;
   padding: 24px 26px;
-  border-radius: 0;
+  border-radius: var(--kz-card-radius, 0);
   background: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 8%, var(--kz-surface-1));
   border: 1px solid color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 30%, var(--kz-border-default));
 }
@@ -837,7 +924,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-split[data-reverse] > :first-child { order: 2; }
 @media (max-width: 900px) { .kz-tpl-split { grid-template-columns: minmax(0, 1fr); } .kz-tpl-split[data-reverse] > :first-child { order: 0; } }
 .kz-tpl-stage {
-  position: relative; min-width: 0; overflow: hidden; border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1);
+  position: relative; min-width: 0; overflow: hidden; border-radius: var(--kz-card-radius, 0); border: 1px solid var(--kz-border-default); background: var(--kz-surface-1);
   box-shadow: var(--kz-shadow-md);
 }
 .kz-tpl-stage-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--kz-border-subtle); background: var(--kz-surface-2);
@@ -856,7 +943,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 
 /* A bento: features of different weights on a six-column grid (one column on a phone). */
 .kz-tpl-bento { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
-.kz-tpl-bento > li { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: 0;
+.kz-tpl-bento > li { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: var(--kz-card-radius, 0);
   background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
 .kz-tpl-bento > li[data-size="lg"] { grid-column: span 4; grid-row: span 2; background: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 7%, var(--kz-surface-1)); }
 .kz-tpl-bento > li[data-size="md"] { grid-column: span 3; }
@@ -888,7 +975,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 /* A gallery: media in columns of different heights, the featured one wide. */
 .kz-tpl-gallery { margin: 0; padding: 0; list-style: none; columns: 3 280px; column-gap: 14px; }
 .kz-tpl-gallery > li { break-inside: avoid; margin-bottom: 14px; }
-.kz-tpl-figure { margin: 0; overflow: hidden; border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+.kz-tpl-figure { margin: 0; overflow: hidden; border-radius: var(--kz-card-radius, 0); border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
 .kz-tpl-figure-media { overflow: hidden; background: var(--kz-media); }
 .kz-tpl-figure-media > :is(img, video) { display: block; width: 100%; height: auto; }
 .kz-tpl-figure figcaption { display: grid; gap: 4px; padding: 12px 14px; }
@@ -901,7 +988,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-hub-search > * { width: 100%; }
 .kz-tpl-hub-hints { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 13px; color: var(--kz-text-secondary); }
 .kz-tpl-collections { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
-.kz-tpl-collection { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px; border-radius: 0;
+.kz-tpl-collection { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px; border-radius: var(--kz-card-radius, 0);
   background: linear-gradient(160deg, color-mix(in srgb, var(--kz-accent) 14%, var(--kz-surface-1)), var(--kz-surface-1) 55%);
   border: 1px solid color-mix(in srgb, var(--kz-accent) 28%, var(--kz-border-default)); }
 .kz-tpl-collection-head { display: flex; align-items: center; gap: 10px; }
@@ -959,7 +1046,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-count { margin: 0; font-family: var(--kz-font-mono); font-size: 12px; color: var(--kz-text-secondary); }
 @media (max-width: 900px) {
   .kz-tpl-catalogue { grid-template-columns: minmax(0, 1fr); gap: 16px; }
-  .kz-tpl-catalogue-filters { position: static; border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+  .kz-tpl-catalogue-filters { position: static; border-radius: var(--kz-card-radius, 0); border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
   .kz-tpl-catalogue-filters > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none;
     font-size: 14px; font-weight: 650; color: var(--kz-text-primary); }
   .kz-tpl-catalogue-filters > summary::-webkit-details-marker { display: none; }
@@ -1017,7 +1104,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 /* Contact: the ways to reach us beside the form; what happens next under it. */
 .kz-tpl-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
 @media (max-width: 900px) { .kz-tpl-contact { grid-template-columns: minmax(0, 1fr); } }
-.kz-tpl-form { padding: clamp(18px, 3vw, 28px); border-radius: 0; background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
+.kz-tpl-form { padding: clamp(18px, 3vw, 28px); border-radius: var(--kz-card-radius, 0); background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
 .kz-tpl-next { margin: 0; padding: 0; list-style: none; counter-reset: next; display: grid; gap: 12px; }
 .kz-tpl-next li { counter-increment: next; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.6; color: var(--kz-text-secondary); }
 .kz-tpl-next li::before { content: counter(next); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
@@ -1025,7 +1112,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-next strong { display: block; color: var(--kz-text-primary); }
 
 /* Status: one line per service, its state in words and a dot; an incident log under it. */
-.kz-tpl-state { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; border-radius: 0; border: 1px solid var(--kz-border-default);
+.kz-tpl-state { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; border-radius: var(--kz-card-radius, 0); border: 1px solid var(--kz-border-default);
   background: var(--kz-surface-1); }
 .kz-tpl-state[data-state="operational"] { border-color: color-mix(in srgb, var(--kz-success) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-success) 7%, var(--kz-surface-1)); }
 .kz-tpl-state[data-state="degraded"] { border-color: color-mix(in srgb, var(--kz-warning) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-warning) 7%, var(--kz-surface-1)); }
@@ -1036,7 +1123,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 [data-state="degraded"] > .kz-tpl-dot, .kz-tpl-dot[data-state="degraded"] { background: var(--kz-warning); }
 [data-state="outage"] > .kz-tpl-dot, .kz-tpl-dot[data-state="outage"] { background: var(--kz-danger); }
 [data-state="building"] > .kz-tpl-dot, .kz-tpl-dot[data-state="building"] { background: var(--kz-info); }
-.kz-tpl-services { margin: 16px 0 0; padding: 0; list-style: none; border-radius: 0; border: 1px solid var(--kz-border-default); overflow: hidden; }
+.kz-tpl-services { margin: 16px 0 0; padding: 0; list-style: none; border-radius: var(--kz-card-radius, 0); border: 1px solid var(--kz-border-default); overflow: hidden; }
 .kz-tpl-services li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--kz-border-subtle);
   font-size: 14.5px; color: var(--kz-text-primary); background: var(--kz-surface-1); }
 .kz-tpl-services li:first-child { border-top: 0; }
@@ -1052,7 +1139,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 
 /* Pricing: plans side by side, the featured one lifted; a comparison under them. */
 .kz-tpl-plans { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; align-items: stretch; }
-.kz-tpl-plan { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 24px; border-radius: 0; background: var(--kz-surface-1);
+.kz-tpl-plan { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 24px; border-radius: var(--kz-card-radius, 0); background: var(--kz-surface-1);
   border: 1px solid var(--kz-border-default); }
 .kz-tpl-plan[data-featured] { border-color: var(--kz-accent); background: linear-gradient(170deg, color-mix(in srgb, var(--kz-accent) 12%, var(--kz-surface-1)), var(--kz-surface-1) 60%);
   box-shadow: var(--kz-shadow-md); }
@@ -1067,9 +1154,9 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-compare th, .kz-tpl-compare td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--kz-border-subtle); color: var(--kz-text-secondary); }
 .kz-tpl-compare thead th { font-family: var(--kz-font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; }
 .kz-tpl-compare tbody th { color: var(--kz-text-primary); font-weight: 600; }
-.kz-tpl-scroll { overflow-x: auto; border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+.kz-tpl-scroll { overflow-x: auto; border-radius: var(--kz-card-radius, 0); border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
 .kz-tpl-faq { display: grid; gap: 8px; }
-.kz-tpl-faq details { border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+.kz-tpl-faq details { border-radius: var(--kz-card-radius, 0); border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
 .kz-tpl-faq summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 650; color: var(--kz-text-primary); }
 .kz-tpl-faq summary::-webkit-details-marker { display: none; }
 .kz-tpl-faq summary:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; border-radius: 0; }
@@ -1175,23 +1262,71 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   --kz-tape-w: clamp(54px, 8vw, 92px); --kz-tape-h: clamp(17px, 2.4vw, 26px);
   padding: clamp(7px, 1.2vw, 14px); background: var(--kz-print); transform: rotate(var(--kz-taped-tilt, -1.6deg)); transform-origin: 50% 60%;
   box-shadow: 0 1px 0 hsl(30 20% 8% / 0.22), 2px 4px 0 hsl(30 20% 8% / 0.14), 4px 8px 0 -2px hsl(30 20% 8% / 0.08); }
+.kz-stuck-body { --kz-tape: hsl(46 58% 82% / 0.72); --kz-tape-w: clamp(54px, 8vw, 92px); --kz-tape-h: clamp(17px, 2.4vw, 26px); }
 :root:not(.light) .kz-taped { --kz-print: hsl(42 22% 88%); --kz-tape: hsl(46 40% 70% / 0.62); }
-.kz-taped::before, .kz-taped::after { content: ""; position: absolute; z-index: 1; width: var(--kz-tape-w); height: var(--kz-tape-h); background: var(--kz-tape);
+:root:not(.light) .kz-stuck-body { --kz-tape: hsl(46 40% 70% / 0.62); }
+/* Stuck's tape is this tape: the same strip, the same torn ends — one rule, two selectors. */
+.kz-taped::before, .kz-taped::after, .kz-stuck-body:is([data-hold="tape"], [data-hold="tape-corners"])::before, .kz-stuck-body:is([data-hold="tape"], [data-hold="tape-corners"])::after { content: ""; position: absolute; z-index: 1; width: var(--kz-tape-w); height: var(--kz-tape-h); background: var(--kz-tape);
   box-shadow: 0 1px 0 hsl(30 20% 8% / 0.2); pointer-events: none;
   clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 0, 96% 25%, 100% 50%, 96% 75%, 100% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%); }
-.kz-taped::before { top: calc(-0.55 * var(--kz-tape-h)); left: calc(-0.35 * var(--kz-tape-w)); transform: rotate(-34deg); }
-.kz-taped::after { bottom: calc(-0.55 * var(--kz-tape-h)); right: calc(-0.35 * var(--kz-tape-w)); transform: rotate(-34deg); }
-.kz-taped[data-tape="top"]::before { top: calc(-0.5 * var(--kz-tape-h)); left: calc(50% - var(--kz-tape-w) / 2); transform: rotate(-3deg); }
-.kz-taped[data-tape="top"]::after, .kz-taped[data-tape="none"]::before, .kz-taped[data-tape="none"]::after { display: none; }
+.kz-taped::before, .kz-stuck-body[data-hold="tape-corners"]::before { top: calc(-0.55 * var(--kz-tape-h)); left: calc(-0.35 * var(--kz-tape-w)); transform: rotate(-34deg); }
+.kz-taped::after, .kz-stuck-body[data-hold="tape-corners"]::after { bottom: calc(-0.55 * var(--kz-tape-h)); right: calc(-0.35 * var(--kz-tape-w)); transform: rotate(-34deg); }
+.kz-taped[data-tape="top"]::before, .kz-stuck-body[data-hold="tape"]::before { top: calc(-0.5 * var(--kz-tape-h)); left: calc(50% - var(--kz-tape-w) / 2); transform: rotate(-3deg); }
+.kz-taped[data-tape="top"]::after, .kz-taped[data-tape="none"]::before, .kz-taped[data-tape="none"]::after, .kz-stuck-body[data-hold="tape"]::after { display: none; }
 .kz-taped-picture { position: relative; overflow: hidden; }
 .kz-taped-picture > img, .kz-taped-picture > video { display: block; width: 100%; height: auto; }
 .kz-taped-caption { margin: 0; padding: 10px 4px 2px; font-family: var(--kz-font-mono); font-size: 13px; line-height: 20px; color: var(--kz-print-ink); }
 @media (max-width: 640px) {
   .kz-taped { transform: rotate(calc(var(--kz-taped-tilt, -1.6deg) * 0.6)); }
-  .kz-taped::before { left: -4px; } .kz-taped::after { right: -4px; }
-  .kz-taped[data-tape="top"]::before { left: calc(50% - var(--kz-tape-w) / 2); }
+  .kz-taped::before, .kz-stuck-body[data-hold="tape-corners"]::before { left: -4px; } .kz-taped::after, .kz-stuck-body[data-hold="tape-corners"]::after { right: -4px; }
+  .kz-taped[data-tape="top"]::before, .kz-stuck-body[data-hold="tape"]::before { left: calc(50% - var(--kz-tape-w) / 2); }
 }
 
+/* ─── Stuck (ADR-004): any block stuck into the notebook — held by tape (TapedPhoto's, above), a pin, photo corners or a
+   lifted edge. The outer element stays still (it carries the doodles); the body leans by `--kz-stuck-tilt` (a transform:
+   nothing shifts) on the hard paper shadow. A TapedPhoto or a SpecimenTag inside gives its own lean, shadow and tape up. ─── */
+.kz-stuck { position: relative; }
+.kz-stuck-body { position: relative; transform: rotate(var(--kz-stuck-tilt, 0deg)); transform-origin: 50% 60%; --kz-stuck-fold: var(--kz-paper-tag); --kz-stuck-metal: var(--kz-paper-tag-edge);
+  box-shadow: var(--kz-shadow-floating); }
+.kz-stuck-body > :is(.kz-taped, .kz-tag) { transform: none; box-shadow: none; }
+.kz-stuck-body > .kz-taped::before, .kz-stuck-body > .kz-taped::after { display: none; }
+.kz-stuck-pin { position: absolute; z-index: 2; top: -7px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 9999px; pointer-events: none;
+  background: var(--kz-paper-rule-margin); box-shadow: inset -2px -2px 0 var(--kz-edge-well), var(--kz-shadow-floating); }
+.kz-stuck-body[data-hold="corner"]::before { content: ""; position: absolute; z-index: 1; inset: -3px; pointer-events: none;
+  background:
+    linear-gradient(135deg, var(--kz-stuck-fold) 50%, transparent 50%) top left / 18px 18px no-repeat,
+    linear-gradient(225deg, var(--kz-stuck-fold) 50%, transparent 50%) top right / 18px 18px no-repeat,
+    linear-gradient(315deg, var(--kz-stuck-fold) 50%, transparent 50%) bottom right / 18px 18px no-repeat,
+    linear-gradient(45deg, var(--kz-stuck-fold) 50%, transparent 50%) bottom left / 18px 18px no-repeat; }
+.kz-stuck-body[data-hold="glue"]::after { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; width: 20px; height: 20px; pointer-events: none;
+  background: linear-gradient(135deg, transparent 50%, var(--kz-stuck-fold) 50%); box-shadow: -2px -2px 0 var(--kz-stuck-metal); }
+@media (max-width: 640px) { .kz-stuck-body { transform: rotate(calc(var(--kz-stuck-tilt, 0deg) * 0.6)); } }
+
+/* ─── Doodle (ADR-004): a margin doodle — in the margin ink, never over text. Beside the block only where the page's margin
+   is wide enough to hold it (1360 px and up); below that it is gone (`place="inline"` stays in the flow). ─── */
+.kz-doodle { display: none; position: relative; width: 56px; color: var(--kz-paper-rule-margin); pointer-events: none; transform: rotate(var(--kz-doodle-tilt, 0deg)); }
+.kz-doodle[data-place="inline"] { display: inline-block; }
+.kz-doodle svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.kz-doodle[data-side="right"] svg { transform: scaleX(-1); }
+.kz-doodle[data-kind="circle"] { width: 72px; }
+.kz-doodle-word { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--kz-font-cahier, var(--kz-font-display)); font-size: 18px; line-height: 24px; color: var(--kz-text-secondary); }
+@media (min-width: 1360px) {
+  .kz-doodle[data-place="margin"] { display: block; position: absolute; top: var(--kz-doodle-top, 0px); right: calc(100% + 16px); }
+  .kz-doodle[data-place="margin"][data-side="right"] { right: auto; left: calc(100% + 16px); }
+  .kz-stuck:has(> .kz-doodle[data-place="margin"][data-side="left"]) { margin-left: 96px; width: calc(100% - 96px); }
+  .kz-stuck:has(> .kz-doodle[data-place="margin"][data-side="right"]) { margin-right: 96px; width: calc(100% - 96px); }
+  .kz-stuck:has(> .kz-doodle[data-place="margin"][data-side="left"]):has(> .kz-doodle[data-place="margin"][data-side="right"]) { width: calc(100% - 192px); }
+}
+
+/* ─── Signature (ADR-004): the house signs the page — the mark as an ink stamp, the name in the notebook's pen, one ink
+   (the host's text role: chalk on slate, ink on paper), a slight grain from the SVG filter. Fixed sizes: nothing shifts. ─── */
+.kz-signature { position: relative; display: inline-flex; align-items: center; gap: 14px; color: var(--kz-text-primary); }
+.kz-signature-defs { position: absolute; width: 0; height: 0; }
+.kz-signature-stamp { flex: none; width: 48px; height: 48px; transform: rotate(-6deg); }
+.kz-signature-text { display: grid; gap: 2px; transform: rotate(-2deg); transform-origin: 0 100%; }
+.kz-signature-name { font-family: var(--kz-font-cahier, var(--kz-font-display)); font-size: 26px; line-height: 32px; white-space: nowrap; }
+.kz-signature-date { font-family: var(--kz-font-mono); font-size: 12px; line-height: 16px; color: var(--kz-text-secondary); }
+
 .kz-plate, .kz-anatomy {
   margin: 0;
   padding: 20px 24px 24px;

package/dist/chat.js

@@ -17,10 +17,10 @@ var chat = tv({
     typing: "inline-flex items-center gap-1 self-start rounded-2xl bg-surface-2 px-3.5 py-3",
     dot: "h-[7px] w-[7px] rounded-full bg-fg-secondary motion-safe:animate-[kz-typing_1.2s_ease-in-out_infinite]",
     composer: "flex items-end gap-2 border-t border-border-subtle bg-surface-0 px-3 py-2",
-    input: "max-h-32 min-h-10 flex-1 resize-none rounded-2xl border border-border-default bg-surface-1 px-3.5 py-2.5 text-sm text-fg placeholder:text-fg-muted focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    input: "max-h-32 min-h-10 flex-1 resize-none rounded-2xl border border-border-control bg-surface-1 px-3.5 py-2.5 text-sm text-fg placeholder:text-fg-muted focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
     send: "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent hover:bg-accent-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:bg-surface-3 disabled:text-fg-muted [&>svg]:h-[18px] [&>svg]:w-[18px]",
     pillRoot: "flex w-full flex-col gap-2",
-    pill: "flex items-end gap-1.5 rounded-[1.75rem] border border-border-default bg-surface-1 py-1.5 pl-2 pr-1.5 transition-colors focus-within:border-accent focus-within:ring-2 focus-within:ring-ring",
+    pill: "flex items-end gap-1.5 rounded-[1.75rem] border border-border-control bg-surface-1 py-1.5 pl-2 pr-1.5 transition-colors focus-within:border-accent focus-within:ring-2 focus-within:ring-ring",
     pillLeading: "flex min-h-9 shrink-0 items-center gap-1 self-end",
     pillInput: "max-h-32 min-h-9 min-w-0 flex-1 resize-none border-0 bg-transparent px-1.5 py-[7px] text-sm leading-snug text-fg placeholder:text-fg-muted focus:outline-hidden focus-visible:outline-hidden",
     pillSend: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent shadow-sm transition-colors hover:bg-accent-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1 disabled:cursor-not-allowed disabled:bg-surface-3 disabled:text-fg-muted disabled:shadow-none [&>svg]:h-4 [&>svg]:w-4",

package/dist/chat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chat/chat.tsx"],"sourcesContent":["// Client (the composer's draft). A conversation's parts — the bubble with its time and receipt, the typing dots, the\n// composer, a conversation in a list — the same API as React Native. Words are props.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Avatar } from \"../avatar\";\n\nexport const chat = tv({\n  slots: {\n    row: \"flex flex-col gap-0.5\",\n    bubble: \"max-w-[80%] rounded-2xl px-3 py-2 text-sm leading-snug\",\n    context: \"mb-0.5 block text-xs opacity-85\",\n    time: \"mt-0.5 block text-right text-[11px] tabular-nums\",\n    status: \"flex items-center gap-1 text-xs text-fg-secondary data-[status=failed]:text-fg-danger [&>svg]:h-3.5 [&>svg]:w-3.5\",\n    typing: \"inline-flex items-center gap-1 self-start rounded-2xl bg-surface-2 px-3.5 py-3\",\n    dot: \"h-[7px] w-[7px] rounded-full bg-fg-secondary motion-safe:animate-[kz-typing_1.2s_ease-in-out_infinite]\",\n    composer: \"flex items-end gap-2 border-t border-border-subtle bg-surface-0 px-3 py-2\",\n    input:\n      \"max-h-32 min-h-10 flex-1 resize-none rounded-2xl border border-border-default bg-surface-1 px-3.5 py-2.5 text-sm text-fg placeholder:text-fg-muted \" +\n      \"focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    send:\n      \"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent hover:bg-accent-hover focus-visible:outline-hidden \" +\n      \"focus-visible:ring-2 focus-visible:ring-ring disabled:bg-surface-3 disabled:text-fg-muted [&>svg]:h-[18px] [&>svg]:w-[18px]\",\n    pillRoot: \"flex w-full flex-col gap-2\",\n    pill:\n      \"flex items-end gap-1.5 rounded-[1.75rem] border border-border-default bg-surface-1 py-1.5 pl-2 pr-1.5 transition-colors \" +\n      \"focus-within:border-accent focus-within:ring-2 focus-within:ring-ring\",\n    pillLeading: \"flex min-h-9 shrink-0 items-center gap-1 self-end\",\n    pillInput:\n      \"max-h-32 min-h-9 min-w-0 flex-1 resize-none border-0 bg-transparent px-1.5 py-[7px] text-sm leading-snug text-fg placeholder:text-fg-muted \" +\n      \"focus:outline-hidden focus-visible:outline-hidden\",\n    pillSend:\n      \"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent shadow-sm transition-colors hover:bg-accent-hover \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1 \" +\n      \"disabled:cursor-not-allowed disabled:bg-surface-3 disabled:text-fg-muted disabled:shadow-none [&>svg]:h-4 [&>svg]:w-4\",\n    pillStatus: \"m-0 flex min-h-5 items-center gap-1.5 px-3 text-xs text-fg-secondary [&_svg]:h-3.5 [&_svg]:w-3.5 [&_svg]:shrink-0\",\n    item: \"flex w-full items-center gap-3 px-4 py-2.5 text-left hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\",\n    count: \"inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-xs font-extrabold text-on-accent\",\n  },\n});\n\nexport type MessageStatus = \"sending\" | \"sent\" | \"delivered\" | \"read\" | \"failed\";\n\nexport type MessageBubbleLabels = {\n  /** The words of each status, shown under the last message of yours. */\n  status?: Partial<Record<MessageStatus, string>>;\n  /** A failed message's retry button (“Retry”). */\n  retry?: string;\n};\n\nconst STATUS: Record<MessageStatus, string> = { sending: \"Sending\", sent: \"Sent\", delivered: \"Delivered\", read: \"Read\", failed: \"Not sent\" };\n\nexport type MessageBubbleProps = {\n  /** The text. */\n  text: string;\n  /** Yours (right, in the accent) or theirs (left). */\n  mine?: boolean;\n  /** The time, written by the app (“14:02”). */\n  time?: string;\n  /** Where a message of yours stands; shown when `showStatus`. */\n  status?: MessageStatus;\n  /** Show the status under the bubble (the last message of yours). */\n  showStatus?: boolean;\n  /** A line above the text: what it answers. */\n  context?: string;\n  /** Sends a failed message again (a button under it). */\n  onRetry?: () => void;\n  /** Part of a run of the same sender: the corner towards the next one is tighter. */\n  grouped?: \"first\" | \"middle\" | \"last\" | \"single\";\n  /** The words, passed translated. */\n  labels?: MessageBubbleLabels;\n  /** Classes merged on the row. */\n  className?: string;\n};\n\nconst CORNERS = {\n  mine: { first: \"rounded-br-md\", middle: \"rounded-r-md\", last: \"rounded-tr-md\", single: \"\" },\n  theirs: { first: \"rounded-bl-md\", middle: \"rounded-l-md\", last: \"rounded-tl-md\", single: \"\" },\n} as const;\n\n/** A message: yours in the accent on the right, theirs on the left, the time inside, the receipt under the last of yours. */\nexport function MessageBubble({ text, mine, time, status, showStatus, context, onRetry, grouped = \"single\", labels, className }: MessageBubbleProps) {\n  const s = chat();\n  const words = { ...STATUS, ...labels?.status };\n  return (\n    <div className={s.row({ className: [mine ? \"items-end\" : \"items-start\", className].filter(Boolean).join(\" \") })}>\n      <p\n        className={s.bubble({\n          className: [mine ? \"bg-accent text-on-accent\" : \"bg-surface-2 text-fg\", CORNERS[mine ? \"mine\" : \"theirs\"][grouped], status === \"failed\" ? \"ring-2 ring-danger\" : \"\", status === \"sending\" ? \"opacity-70\" : \"\"].join(\" \"),\n        })}\n      >\n        {context ? <span className={s.context()}>{context}</span> : null}\n        {text}\n        {time ? <span className={s.time()}>{time}</span> : null}\n      </p>\n      {showStatus && status ? (\n        <p className={s.status()} data-status={status}>\n          {status === \"sent\" || status === \"delivered\" || status === \"read\" ? (\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden className={status === \"read\" ? \"stroke-accent\" : \"stroke-fg-secondary\"}>\n              <path d={status === \"sent\" ? \"M5 12.5l4.5 4.5L19 7.5\" : \"M2 12.5l4.5 4.5L16 7.5M9 15l2 2 9.5-9.5\"} />\n            </svg>\n          ) : null}\n          {words[status]}\n          {status === \"failed\" && onRetry ? (\n            <button type=\"button\" onClick={onRetry} className=\"ml-1 font-semibold text-fg underline underline-offset-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\">\n              {labels?.retry ?? \"Retry\"}\n            </button>\n          ) : null}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\nexport type TypingIndicatorProps = {\n  /** What is read and shown beside the dots (“Elena is typing”) — passed translated. */\n  label: string;\n  /** Show the words beside the dots. */\n  showLabel?: boolean;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Three dots that breathe while the other person types, announced politely; still under reduced motion. */\nexport function TypingIndicator({ label, showLabel, className }: TypingIndicatorProps) {\n  const s = chat();\n  return (\n    <div role=\"status\" className={[\"flex items-center gap-2\", className].filter(Boolean).join(\" \")}>\n      <style href=\"krizaka-typing\" precedence=\"default\">{\"@keyframes kz-typing{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}\"}</style>\n      <span className={s.typing()} aria-hidden>\n        {[0, 1, 2].map((i) => (\n          <span key={i} className={s.dot()} style={{ animationDelay: `${i * 0.18}s` }} />\n        ))}\n      </span>\n      <span className={showLabel ? \"text-xs text-fg-secondary\" : \"sr-only\"}>{label}</span>\n    </div>\n  );\n}\n\nexport type MessageComposerProps = {\n  /** The draft (controlled). */\n  value: string;\n  /** Called on every key. */\n  onValueChange: (text: string) => void;\n  /** Sends the draft (Enter, or the button); Shift+Enter adds a line. */\n  onSend: () => void;\n  /** The input's name and placeholder (“Message”). */\n  placeholder: string;\n  /** The send button's name (“Send”). */\n  sendLabel: string;\n  /** Before the input: an attach button (`bar`), or the mode/model chip and attach, inside the field (`pill`). */\n  leading?: React.ReactNode;\n  /** Cannot write: the reason in its place. */\n  disabledReason?: string;\n  /** The longest message. Default 4000. */\n  maxLength?: number;\n  /** `bar`: a docked bar with a square-ish field. `pill`: one rounded field holding `leading`, the text and a round send button — no inner border. Default `bar`. */\n  variant?: \"bar\" | \"pill\";\n  /** `pill`: the quiet line under the field (privacy, cost estimate). Its row is always reserved, so a changing line never moves the field. Read politely. */\n  status?: React.ReactNode;\n  /** An answer is on its way: the send is held (and `aria-busy` is set) while the field stays where it is, size included. */\n  busy?: boolean;\n  /** Overrides “the draft has text” — e.g. an attachment alone can be sent. A busy composer never sends. */\n  canSend?: boolean;\n  /** Attributes (`data-testid`, `autoFocus`, `id`…) forwarded to the textarea. */\n  inputProps?: Omit<React.ComponentPropsWithoutRef<\"textarea\">, \"value\" | \"onChange\" | \"placeholder\" | \"maxLength\" | \"className\" | \"rows\">;\n  /** Attributes forwarded to the send button. */\n  sendProps?: Omit<React.ComponentPropsWithoutRef<\"button\">, \"type\" | \"disabled\" | \"className\" | \"aria-label\">;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Where a message is written: a growing textarea (Enter sends, Shift+Enter a new line), an attach slot, a send button. The `pill` variant is the one-field look of the Krizaka chat card. */\nexport function MessageComposer({\n  value,\n  onValueChange,\n  onSend,\n  placeholder,\n  sendLabel,\n  leading,\n  disabledReason,\n  maxLength = 4000,\n  variant = \"bar\",\n  status,\n  busy = false,\n  canSend,\n  inputProps,\n  sendProps,\n  className,\n}: MessageComposerProps) {\n  const s = chat();\n  const pill = variant === \"pill\";\n  const ready = !busy && (canSend ?? value.trim().length > 0);\n  const textarea = (\n    <textarea\n      aria-label={placeholder}\n      placeholder={placeholder}\n      rows={1}\n      maxLength={maxLength}\n      {...inputProps}\n      value={value}\n      onChange={(e) => onValueChange(e.target.value)}\n      onKeyDown={(e) => {\n        inputProps?.onKeyDown?.(e);\n        if (e.defaultPrevented) return;\n        if (e.key === \"Enter\" && !e.shiftKey && !e.nativeEvent.isComposing) {\n          e.preventDefault();\n          if (ready) onSend();\n        }\n      }}\n      className={pill ? s.pillInput() : s.input()}\n      style={{ fieldSizing: \"content\" } as React.CSSProperties}\n    />\n  );\n  const send = (\n    <button type=\"submit\" aria-label={sendLabel} {...sendProps} disabled={!ready} className={pill ? s.pillSend() : s.send()}>\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden>\n        <path d=\"M4 12l16-8-6 16-2.5-6.5L4 12z\" />\n      </svg>\n    </button>\n  );\n  const submit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (ready) onSend();\n  };\n  if (pill) {\n    return (\n      <form className={s.pillRoot({ className })} onSubmit={submit} aria-busy={busy || undefined}>\n        {disabledReason ? (\n          <p className=\"m-0 rounded-[1.75rem] border border-border-default bg-surface-1 px-4 py-2.5 text-sm text-fg-secondary\">{disabledReason}</p>\n        ) : (\n          <div className={s.pill()}>\n            {leading ? <div className={s.pillLeading()}>{leading}</div> : null}\n            {textarea}\n            {send}\n          </div>\n        )}\n        <p role=\"status\" aria-live=\"polite\" className={s.pillStatus()}>\n          {status}\n        </p>\n      </form>\n    );\n  }\n  return (\n    <form className={s.composer({ className })} onSubmit={submit} aria-busy={busy || undefined}>\n      {disabledReason ? (\n        <p className=\"m-0 flex-1 py-2 text-sm text-fg-secondary\">{disabledReason}</p>\n      ) : (\n        <>\n          {leading}\n          {textarea}\n          {send}\n        </>\n      )}\n    </form>\n  );\n}\n\nexport type ConversationItemProps = {\n  /** The other person's name. */\n  name: string;\n  /** Their avatar's URL. */\n  avatar?: string | null;\n  /** The last message, or “typing…”. */\n  preview: string;\n  /** The preview is the typing signal: in the accent. */\n  typing?: boolean;\n  /** When (“14:02”, “Mon”). */\n  time?: string;\n  /** Unread messages: a count, the name in bold. */\n  unread?: number;\n  /** The unread count in words (“3 unread”). */\n  unreadLabel?: string;\n  /** Before the name: a presence dot (online). */\n  online?: boolean;\n  /** The presence in words (“online”). */\n  onlineLabel?: string;\n  /** Opens the conversation (a link). */\n  href?: string;\n  /** Opens the conversation (a button). */\n  onSelect?: () => void;\n  /** Classes merged on the row. */\n  className?: string;\n};\n\n/** A conversation in the list: avatar, name, the last message or typing, the time, the unread count. */\nexport function ConversationItem({ name, avatar, preview, typing, time, unread = 0, unreadLabel, online, onlineLabel, href, onSelect, className }: ConversationItemProps) {\n  const s = chat();\n  const body = (\n    <>\n      <span className=\"relative shrink-0\">\n        <Avatar src={avatar ?? null} alt=\"\" fallback={name.charAt(0)} size=\"lg\" />\n        {online ? <span aria-hidden className=\"absolute bottom-0 right-0 h-3 w-3 rounded-full bg-success ring-2 ring-surface-0\" /> : null}\n      </span>\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        <span className=\"flex items-center gap-2\">\n          <span className={[\"min-w-0 flex-1 truncate text-sm text-fg\", unread > 0 ? \"font-extrabold\" : \"font-semibold\"].join(\" \")}>\n            {name}\n            {online && onlineLabel ? <span className=\"sr-only\">{`, ${onlineLabel}`}</span> : null}\n          </span>\n          {time ? <span className={[\"shrink-0 text-xs tabular-nums\", unread > 0 ? \"text-fg-accent\" : \"text-fg-secondary\"].join(\" \")}>{time}</span> : null}\n        </span>\n        <span className=\"flex items-center gap-2\">\n          <span className={[\"min-w-0 flex-1 truncate text-xs\", typing ? \"text-fg-accent\" : unread > 0 ? \"text-fg\" : \"text-fg-secondary\"].join(\" \")}>{preview}</span>\n          {unread > 0 ? (\n            <span className={s.count()}>\n              <span aria-hidden>{unread > 99 ? \"99+\" : unread}</span>\n              <span className=\"sr-only\">{unreadLabel ?? String(unread)}</span>\n            </span>\n          ) : null}\n        </span>\n      </span>\n    </>\n  );\n  return href ? (\n    <a href={href} className={s.item({ className })}>\n      {body}\n    </a>\n  ) : (\n    <button type=\"button\" onClick={onSelect} className={s.item({ className })}>\n      {body}\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/chat/chat.tsx"],"sourcesContent":["// Client (the composer's draft). A conversation's parts — the bubble with its time and receipt, the typing dots, the\n// composer, a conversation in a list — the same API as React Native. Words are props.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Avatar } from \"../avatar\";\n\nexport const chat = tv({\n  slots: {\n    row: \"flex flex-col gap-0.5\",\n    bubble: \"max-w-[80%] rounded-2xl px-3 py-2 text-sm leading-snug\",\n    context: \"mb-0.5 block text-xs opacity-85\",\n    time: \"mt-0.5 block text-right text-[11px] tabular-nums\",\n    status: \"flex items-center gap-1 text-xs text-fg-secondary data-[status=failed]:text-fg-danger [&>svg]:h-3.5 [&>svg]:w-3.5\",\n    typing: \"inline-flex items-center gap-1 self-start rounded-2xl bg-surface-2 px-3.5 py-3\",\n    dot: \"h-[7px] w-[7px] rounded-full bg-fg-secondary motion-safe:animate-[kz-typing_1.2s_ease-in-out_infinite]\",\n    composer: \"flex items-end gap-2 border-t border-border-subtle bg-surface-0 px-3 py-2\",\n    input:\n      \"max-h-32 min-h-10 flex-1 resize-none rounded-2xl border border-border-control bg-surface-1 px-3.5 py-2.5 text-sm text-fg placeholder:text-fg-muted \" +\n      \"focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    send:\n      \"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent hover:bg-accent-hover focus-visible:outline-hidden \" +\n      \"focus-visible:ring-2 focus-visible:ring-ring disabled:bg-surface-3 disabled:text-fg-muted [&>svg]:h-[18px] [&>svg]:w-[18px]\",\n    pillRoot: \"flex w-full flex-col gap-2\",\n    pill:\n      \"flex items-end gap-1.5 rounded-[1.75rem] border border-border-control bg-surface-1 py-1.5 pl-2 pr-1.5 transition-colors \" +\n      \"focus-within:border-accent focus-within:ring-2 focus-within:ring-ring\",\n    pillLeading: \"flex min-h-9 shrink-0 items-center gap-1 self-end\",\n    pillInput:\n      \"max-h-32 min-h-9 min-w-0 flex-1 resize-none border-0 bg-transparent px-1.5 py-[7px] text-sm leading-snug text-fg placeholder:text-fg-muted \" +\n      \"focus:outline-hidden focus-visible:outline-hidden\",\n    pillSend:\n      \"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent shadow-sm transition-colors hover:bg-accent-hover \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1 \" +\n      \"disabled:cursor-not-allowed disabled:bg-surface-3 disabled:text-fg-muted disabled:shadow-none [&>svg]:h-4 [&>svg]:w-4\",\n    pillStatus: \"m-0 flex min-h-5 items-center gap-1.5 px-3 text-xs text-fg-secondary [&_svg]:h-3.5 [&_svg]:w-3.5 [&_svg]:shrink-0\",\n    item: \"flex w-full items-center gap-3 px-4 py-2.5 text-left hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\",\n    count: \"inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-xs font-extrabold text-on-accent\",\n  },\n});\n\nexport type MessageStatus = \"sending\" | \"sent\" | \"delivered\" | \"read\" | \"failed\";\n\nexport type MessageBubbleLabels = {\n  /** The words of each status, shown under the last message of yours. */\n  status?: Partial<Record<MessageStatus, string>>;\n  /** A failed message's retry button (“Retry”). */\n  retry?: string;\n};\n\nconst STATUS: Record<MessageStatus, string> = { sending: \"Sending\", sent: \"Sent\", delivered: \"Delivered\", read: \"Read\", failed: \"Not sent\" };\n\nexport type MessageBubbleProps = {\n  /** The text. */\n  text: string;\n  /** Yours (right, in the accent) or theirs (left). */\n  mine?: boolean;\n  /** The time, written by the app (“14:02”). */\n  time?: string;\n  /** Where a message of yours stands; shown when `showStatus`. */\n  status?: MessageStatus;\n  /** Show the status under the bubble (the last message of yours). */\n  showStatus?: boolean;\n  /** A line above the text: what it answers. */\n  context?: string;\n  /** Sends a failed message again (a button under it). */\n  onRetry?: () => void;\n  /** Part of a run of the same sender: the corner towards the next one is tighter. */\n  grouped?: \"first\" | \"middle\" | \"last\" | \"single\";\n  /** The words, passed translated. */\n  labels?: MessageBubbleLabels;\n  /** Classes merged on the row. */\n  className?: string;\n};\n\nconst CORNERS = {\n  mine: { first: \"rounded-br-md\", middle: \"rounded-r-md\", last: \"rounded-tr-md\", single: \"\" },\n  theirs: { first: \"rounded-bl-md\", middle: \"rounded-l-md\", last: \"rounded-tl-md\", single: \"\" },\n} as const;\n\n/** A message: yours in the accent on the right, theirs on the left, the time inside, the receipt under the last of yours. */\nexport function MessageBubble({ text, mine, time, status, showStatus, context, onRetry, grouped = \"single\", labels, className }: MessageBubbleProps) {\n  const s = chat();\n  const words = { ...STATUS, ...labels?.status };\n  return (\n    <div className={s.row({ className: [mine ? \"items-end\" : \"items-start\", className].filter(Boolean).join(\" \") })}>\n      <p\n        className={s.bubble({\n          className: [mine ? \"bg-accent text-on-accent\" : \"bg-surface-2 text-fg\", CORNERS[mine ? \"mine\" : \"theirs\"][grouped], status === \"failed\" ? \"ring-2 ring-danger\" : \"\", status === \"sending\" ? \"opacity-70\" : \"\"].join(\" \"),\n        })}\n      >\n        {context ? <span className={s.context()}>{context}</span> : null}\n        {text}\n        {time ? <span className={s.time()}>{time}</span> : null}\n      </p>\n      {showStatus && status ? (\n        <p className={s.status()} data-status={status}>\n          {status === \"sent\" || status === \"delivered\" || status === \"read\" ? (\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden className={status === \"read\" ? \"stroke-accent\" : \"stroke-fg-secondary\"}>\n              <path d={status === \"sent\" ? \"M5 12.5l4.5 4.5L19 7.5\" : \"M2 12.5l4.5 4.5L16 7.5M9 15l2 2 9.5-9.5\"} />\n            </svg>\n          ) : null}\n          {words[status]}\n          {status === \"failed\" && onRetry ? (\n            <button type=\"button\" onClick={onRetry} className=\"ml-1 font-semibold text-fg underline underline-offset-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\">\n              {labels?.retry ?? \"Retry\"}\n            </button>\n          ) : null}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\nexport type TypingIndicatorProps = {\n  /** What is read and shown beside the dots (“Elena is typing”) — passed translated. */\n  label: string;\n  /** Show the words beside the dots. */\n  showLabel?: boolean;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Three dots that breathe while the other person types, announced politely; still under reduced motion. */\nexport function TypingIndicator({ label, showLabel, className }: TypingIndicatorProps) {\n  const s = chat();\n  return (\n    <div role=\"status\" className={[\"flex items-center gap-2\", className].filter(Boolean).join(\" \")}>\n      <style href=\"krizaka-typing\" precedence=\"default\">{\"@keyframes kz-typing{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}\"}</style>\n      <span className={s.typing()} aria-hidden>\n        {[0, 1, 2].map((i) => (\n          <span key={i} className={s.dot()} style={{ animationDelay: `${i * 0.18}s` }} />\n        ))}\n      </span>\n      <span className={showLabel ? \"text-xs text-fg-secondary\" : \"sr-only\"}>{label}</span>\n    </div>\n  );\n}\n\nexport type MessageComposerProps = {\n  /** The draft (controlled). */\n  value: string;\n  /** Called on every key. */\n  onValueChange: (text: string) => void;\n  /** Sends the draft (Enter, or the button); Shift+Enter adds a line. */\n  onSend: () => void;\n  /** The input's name and placeholder (“Message”). */\n  placeholder: string;\n  /** The send button's name (“Send”). */\n  sendLabel: string;\n  /** Before the input: an attach button (`bar`), or the mode/model chip and attach, inside the field (`pill`). */\n  leading?: React.ReactNode;\n  /** Cannot write: the reason in its place. */\n  disabledReason?: string;\n  /** The longest message. Default 4000. */\n  maxLength?: number;\n  /** `bar`: a docked bar with a square-ish field. `pill`: one rounded field holding `leading`, the text and a round send button — no inner border. Default `bar`. */\n  variant?: \"bar\" | \"pill\";\n  /** `pill`: the quiet line under the field (privacy, cost estimate). Its row is always reserved, so a changing line never moves the field. Read politely. */\n  status?: React.ReactNode;\n  /** An answer is on its way: the send is held (and `aria-busy` is set) while the field stays where it is, size included. */\n  busy?: boolean;\n  /** Overrides “the draft has text” — e.g. an attachment alone can be sent. A busy composer never sends. */\n  canSend?: boolean;\n  /** Attributes (`data-testid`, `autoFocus`, `id`…) forwarded to the textarea. */\n  inputProps?: Omit<React.ComponentPropsWithoutRef<\"textarea\">, \"value\" | \"onChange\" | \"placeholder\" | \"maxLength\" | \"className\" | \"rows\">;\n  /** Attributes forwarded to the send button. */\n  sendProps?: Omit<React.ComponentPropsWithoutRef<\"button\">, \"type\" | \"disabled\" | \"className\" | \"aria-label\">;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Where a message is written: a growing textarea (Enter sends, Shift+Enter a new line), an attach slot, a send button. The `pill` variant is the one-field look of the Krizaka chat card. */\nexport function MessageComposer({\n  value,\n  onValueChange,\n  onSend,\n  placeholder,\n  sendLabel,\n  leading,\n  disabledReason,\n  maxLength = 4000,\n  variant = \"bar\",\n  status,\n  busy = false,\n  canSend,\n  inputProps,\n  sendProps,\n  className,\n}: MessageComposerProps) {\n  const s = chat();\n  const pill = variant === \"pill\";\n  const ready = !busy && (canSend ?? value.trim().length > 0);\n  const textarea = (\n    <textarea\n      aria-label={placeholder}\n      placeholder={placeholder}\n      rows={1}\n      maxLength={maxLength}\n      {...inputProps}\n      value={value}\n      onChange={(e) => onValueChange(e.target.value)}\n      onKeyDown={(e) => {\n        inputProps?.onKeyDown?.(e);\n        if (e.defaultPrevented) return;\n        if (e.key === \"Enter\" && !e.shiftKey && !e.nativeEvent.isComposing) {\n          e.preventDefault();\n          if (ready) onSend();\n        }\n      }}\n      className={pill ? s.pillInput() : s.input()}\n      style={{ fieldSizing: \"content\" } as React.CSSProperties}\n    />\n  );\n  const send = (\n    <button type=\"submit\" aria-label={sendLabel} {...sendProps} disabled={!ready} className={pill ? s.pillSend() : s.send()}>\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden>\n        <path d=\"M4 12l16-8-6 16-2.5-6.5L4 12z\" />\n      </svg>\n    </button>\n  );\n  const submit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (ready) onSend();\n  };\n  if (pill) {\n    return (\n      <form className={s.pillRoot({ className })} onSubmit={submit} aria-busy={busy || undefined}>\n        {disabledReason ? (\n          <p className=\"m-0 rounded-[1.75rem] border border-border-default bg-surface-1 px-4 py-2.5 text-sm text-fg-secondary\">{disabledReason}</p>\n        ) : (\n          <div className={s.pill()}>\n            {leading ? <div className={s.pillLeading()}>{leading}</div> : null}\n            {textarea}\n            {send}\n          </div>\n        )}\n        <p role=\"status\" aria-live=\"polite\" className={s.pillStatus()}>\n          {status}\n        </p>\n      </form>\n    );\n  }\n  return (\n    <form className={s.composer({ className })} onSubmit={submit} aria-busy={busy || undefined}>\n      {disabledReason ? (\n        <p className=\"m-0 flex-1 py-2 text-sm text-fg-secondary\">{disabledReason}</p>\n      ) : (\n        <>\n          {leading}\n          {textarea}\n          {send}\n        </>\n      )}\n    </form>\n  );\n}\n\nexport type ConversationItemProps = {\n  /** The other person's name. */\n  name: string;\n  /** Their avatar's URL. */\n  avatar?: string | null;\n  /** The last message, or “typing…”. */\n  preview: string;\n  /** The preview is the typing signal: in the accent. */\n  typing?: boolean;\n  /** When (“14:02”, “Mon”). */\n  time?: string;\n  /** Unread messages: a count, the name in bold. */\n  unread?: number;\n  /** The unread count in words (“3 unread”). */\n  unreadLabel?: string;\n  /** Before the name: a presence dot (online). */\n  online?: boolean;\n  /** The presence in words (“online”). */\n  onlineLabel?: string;\n  /** Opens the conversation (a link). */\n  href?: string;\n  /** Opens the conversation (a button). */\n  onSelect?: () => void;\n  /** Classes merged on the row. */\n  className?: string;\n};\n\n/** A conversation in the list: avatar, name, the last message or typing, the time, the unread count. */\nexport function ConversationItem({ name, avatar, preview, typing, time, unread = 0, unreadLabel, online, onlineLabel, href, onSelect, className }: ConversationItemProps) {\n  const s = chat();\n  const body = (\n    <>\n      <span className=\"relative shrink-0\">\n        <Avatar src={avatar ?? null} alt=\"\" fallback={name.charAt(0)} size=\"lg\" />\n        {online ? <span aria-hidden className=\"absolute bottom-0 right-0 h-3 w-3 rounded-full bg-success ring-2 ring-surface-0\" /> : null}\n      </span>\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        <span className=\"flex items-center gap-2\">\n          <span className={[\"min-w-0 flex-1 truncate text-sm text-fg\", unread > 0 ? \"font-extrabold\" : \"font-semibold\"].join(\" \")}>\n            {name}\n            {online && onlineLabel ? <span className=\"sr-only\">{`, ${onlineLabel}`}</span> : null}\n          </span>\n          {time ? <span className={[\"shrink-0 text-xs tabular-nums\", unread > 0 ? \"text-fg-accent\" : \"text-fg-secondary\"].join(\" \")}>{time}</span> : null}\n        </span>\n        <span className=\"flex items-center gap-2\">\n          <span className={[\"min-w-0 flex-1 truncate text-xs\", typing ? \"text-fg-accent\" : unread > 0 ? \"text-fg\" : \"text-fg-secondary\"].join(\" \")}>{preview}</span>\n          {unread > 0 ? (\n            <span className={s.count()}>\n              <span aria-hidden>{unread > 99 ? \"99+\" : unread}</span>\n              <span className=\"sr-only\">{unreadLabel ?? String(unread)}</span>\n            </span>\n          ) : null}\n        </span>\n      </span>\n    </>\n  );\n  return href ? (\n    <a href={href} className={s.item({ className })}>\n      {body}\n    </a>\n  ) : (\n    <button type=\"button\" onClick={onSelect} className={s.item({ className })}>\n      {body}\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/checkbox.js

@@ -6,7 +6,7 @@ import { tv } from "tailwind-variants";
 import { jsx, jsxs } from "react/jsx-runtime";
 var checkbox = tv({
   slots: {
-    root: "peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-border-strong bg-surface-1 text-on-accent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent aria-invalid:border-danger aria-invalid:ring-danger/30",
+    root: "peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-border-control bg-surface-1 text-on-accent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent aria-invalid:border-danger aria-invalid:ring-danger/30",
     indicator: "flex items-center justify-center",
     label: "flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-70"
   }

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/checkbox/checkbox.tsx"],"sourcesContent":["// Client. Radix Checkbox: role=\"checkbox\", aria-checked (true · false · mixed), Space toggles, a hidden input inside a\n// form. It sits in a `Field` like the other controls: `<Field.Label htmlFor={id}>`, `invalid`, aria-describedby.\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const checkbox = tv({\n  slots: {\n    root:\n      \"peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-border-strong bg-surface-1 text-on-accent transition-colors \" +\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      \"hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent \" +\n      \"aria-invalid:border-danger aria-invalid:ring-danger/30\",\n    indicator: \"flex items-center justify-center\",\n    label: \"flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-70\",\n  },\n});\n\nfunction Check() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\nfunction Dash() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M5 12h14\" />\n    </svg>\n  );\n}\n\nexport type CheckboxProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, \"children\"> & {\n  /** Marks it invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby). */\n  invalid?: boolean;\n  /** The text next to the box, clickable: the box and its words in one `<label>`. Otherwise name it with\n   * `Field.Label htmlFor` or `aria-label`. */\n  children?: React.ReactNode;\n};\n\n/** A checkbox: `checked`/`defaultChecked` (`true` · `false` · `\"indeterminate\"`) + `onCheckedChange`. */\nexport function Checkbox({ invalid, className, children, ...props }: CheckboxProps) {\n  const s = checkbox();\n  const box = (\n    <CheckboxPrimitive.Root\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      className={s.root({ className: children ? \"mt-0.5\" : className })}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className={s.indicator()}>\n        {props.checked === \"indeterminate\" ? <Dash /> : <Check />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n  if (!children) return box;\n  return (\n    <label className={s.label({ className })}>\n      {box}\n      <span className=\"min-w-0\">{children}</span>\n    </label>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,YAAY,yBAAyB;AAE9C,SAAS,UAAU;AAkBb,cAsCF,YAtCE;AAhBC,IAAM,WAAW,GAAG;AAAA,EACzB,OAAO;AAAA,IACL,MACE;AAAA,IAKF,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF,CAAC;AAED,SAAS,QAAQ;AACf,SACE,oBAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACzJ,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAEJ;AAEA,SAAS,OAAO;AACd,SACE,oBAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,eAAW,MAClI,8BAAC,UAAK,GAAE,YAAW,GACrB;AAEJ;AAWO,SAAS,SAAS,EAAE,SAAS,WAAW,UAAU,GAAG,MAAM,GAAkB;AAClF,QAAM,IAAI,SAAS;AACnB,QAAM,MACJ;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,gBAAc,WAAW;AAAA,MACzB,gBAAc,UAAU,KAAK;AAAA,MAC7B,WAAW,EAAE,KAAK,EAAE,WAAW,WAAW,WAAW,UAAU,CAAC;AAAA,MAC/D,GAAG;AAAA,MAEJ,8BAAC,kBAAkB,WAAlB,EAA4B,WAAW,EAAE,UAAU,GACjD,gBAAM,YAAY,kBAAkB,oBAAC,QAAK,IAAK,oBAAC,SAAM,GACzD;AAAA;AAAA,EACF;AAEF,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,qBAAC,WAAM,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GACpC;AAAA;AAAA,IACD,oBAAC,UAAK,WAAU,WAAW,UAAS;AAAA,KACtC;AAEJ;","names":[]}
+{"version":3,"sources":["../src/checkbox/checkbox.tsx"],"sourcesContent":["// Client. Radix Checkbox: role=\"checkbox\", aria-checked (true · false · mixed), Space toggles, a hidden input inside a\n// form. It sits in a `Field` like the other controls: `<Field.Label htmlFor={id}>`, `invalid`, aria-describedby.\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const checkbox = tv({\n  slots: {\n    root:\n      \"peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-border-control bg-surface-1 text-on-accent transition-colors \" +\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      \"hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent \" +\n      \"aria-invalid:border-danger aria-invalid:ring-danger/30\",\n    indicator: \"flex items-center justify-center\",\n    label: \"flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-70\",\n  },\n});\n\nfunction Check() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\nfunction Dash() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M5 12h14\" />\n    </svg>\n  );\n}\n\nexport type CheckboxProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, \"children\"> & {\n  /** Marks it invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby). */\n  invalid?: boolean;\n  /** The text next to the box, clickable: the box and its words in one `<label>`. Otherwise name it with\n   * `Field.Label htmlFor` or `aria-label`. */\n  children?: React.ReactNode;\n};\n\n/** A checkbox: `checked`/`defaultChecked` (`true` · `false` · `\"indeterminate\"`) + `onCheckedChange`. */\nexport function Checkbox({ invalid, className, children, ...props }: CheckboxProps) {\n  const s = checkbox();\n  const box = (\n    <CheckboxPrimitive.Root\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      className={s.root({ className: children ? \"mt-0.5\" : className })}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className={s.indicator()}>\n        {props.checked === \"indeterminate\" ? <Dash /> : <Check />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n  if (!children) return box;\n  return (\n    <label className={s.label({ className })}>\n      {box}\n      <span className=\"min-w-0\">{children}</span>\n    </label>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,YAAY,yBAAyB;AAE9C,SAAS,UAAU;AAkBb,cAsCF,YAtCE;AAhBC,IAAM,WAAW,GAAG;AAAA,EACzB,OAAO;AAAA,IACL,MACE;AAAA,IAKF,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF,CAAC;AAED,SAAS,QAAQ;AACf,SACE,oBAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACzJ,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAEJ;AAEA,SAAS,OAAO;AACd,SACE,oBAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,eAAW,MAClI,8BAAC,UAAK,GAAE,YAAW,GACrB;AAEJ;AAWO,SAAS,SAAS,EAAE,SAAS,WAAW,UAAU,GAAG,MAAM,GAAkB;AAClF,QAAM,IAAI,SAAS;AACnB,QAAM,MACJ;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,gBAAc,WAAW;AAAA,MACzB,gBAAc,UAAU,KAAK;AAAA,MAC7B,WAAW,EAAE,KAAK,EAAE,WAAW,WAAW,WAAW,UAAU,CAAC;AAAA,MAC/D,GAAG;AAAA,MAEJ,8BAAC,kBAAkB,WAAlB,EAA4B,WAAW,EAAE,UAAU,GACjD,gBAAM,YAAY,kBAAkB,oBAAC,QAAK,IAAK,oBAAC,SAAM,GACzD;AAAA;AAAA,EACF;AAEF,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,qBAAC,WAAM,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GACpC;AAAA;AAAA,IACD,oBAAC,UAAK,WAAU,WAAW,UAAS;AAAA,KACtC;AAEJ;","names":[]}

package/dist/chip.js

@@ -1,103 +1,10 @@
 "use client";
 import {
-  useRouteBinding
-} from "./chunk-R3LTSMS5.js";
-import {
-  defineRecipe
-} from "./chunk-D3T54RSL.js";
-
-// src/chip/chip.tsx
-import { Toggle as TogglePrimitive, ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
-import * as React from "react";
-import { tv } from "tailwind-variants";
-
-// src/chip/recipe.ts
-var chipRecipe = defineRecipe({
-  slots: {
-    group: "flex flex-wrap items-center gap-2 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
-    base: "inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-sm border font-semibold transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 border-border-default bg-surface-1 text-fg-secondary hover:border-border-strong hover:text-fg data-[state=on]:border-accent data-[state=on]:bg-accent-soft data-[state=on]:text-fg",
-    remove: "-mr-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
-  },
-  variants: {
-    size: { sm: { base: "h-7 px-3 text-xs" }, md: { base: "h-9 px-3.5 text-xs" } }
-  },
-  defaultVariants: { size: "md" }
-});
-
-// src/chip/chip.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var chip = tv(chipRecipe);
-var ChipGroupContext = React.createContext(null);
-function RemoveIcon() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
-}
-function ChipBase(props) {
-  const group = React.useContext(ChipGroupContext);
-  if (props.removable) {
-    const { removable: _removable2, removeLabel, onRemove, disabled, size: size2, className: className2, children, ...rest2 } = props;
-    const s2 = chip({ size: size2 ?? group?.size });
-    return /* @__PURE__ */ jsxs("span", { "data-removable": "", className: s2.base({ className: className2 }), ...rest2, children: [
-      children,
-      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": removeLabel, title: removeLabel, disabled, onClick: onRemove, className: s2.remove(), children: /* @__PURE__ */ jsx(RemoveIcon, {}) })
-    ] });
-  }
-  const { removable: _removable, value, selected, defaultSelected, onSelectedChange, size, className, ...rest } = props;
-  const s = chip({ size: size ?? group?.size });
-  if (group) {
-    if (value === void 0) throw new Error("Chip: a chip inside Chip.Group needs a `value`.");
-    return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, { value, className: s.base({ className }), ...rest });
-  }
-  return /* @__PURE__ */ jsx(
-    TogglePrimitive.Root,
-    {
-      pressed: selected,
-      defaultPressed: defaultSelected,
-      onPressedChange: onSelectedChange,
-      className: s.base({ className }),
-      ...rest
-    }
-  );
-}
-function ChipGroup({ label, size, className, children, ...props }) {
-  const single = props.type === "single" ? props : void 0;
-  const routed = useRouteBinding(single?.routeKey, single?.routeValues, { value: single?.value, defaultValue: single?.defaultValue, onValueChange: single?.onValueChange });
-  const s = chip({ size });
-  const context = React.useMemo(() => ({ size }), [size]);
-  const common = { "aria-label": label, className: s.group({ className }) };
-  let group;
-  if (props.type === "single") {
-    const { type: _type, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, required, routeKey: _routeKey, routeValues: _routeValues, ...rest } = props;
-    group = /* @__PURE__ */ jsx(SingleGroup, { ...rest, ...common, value: routed.value, defaultValue: routed.defaultValue, onValueChange: routed.onValueChange, required, children });
-  } else {
-    const { type: _type, required: _required, ...rest } = props;
-    group = /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, { type: "multiple", ...rest, ...common, children });
-  }
-  return /* @__PURE__ */ jsx(ChipGroupContext.Provider, { value: context, children: group });
-}
-function SingleGroup({
-  value,
-  defaultValue,
-  onValueChange,
-  required,
-  ...props
-}) {
-  const [inner, setInner] = React.useState(defaultValue ?? "");
-  const current = value ?? inner;
-  return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Root,
-    {
-      type: "single",
-      value: current,
-      onValueChange: (next) => {
-        if (required && !next) return;
-        if (value === void 0) setInner(next);
-        onValueChange?.(next);
-      },
-      ...props
-    }
-  );
-}
-var Chip = Object.assign(ChipBase, { Group: ChipGroup });
+  Chip,
+  ChipGroup,
+  chip
+} from "./chunk-7U5TXA5Q.js";
+import "./chunk-D3T54RSL.js";
 export {
   Chip,
   ChipGroup,