anentrypoint-design 0.0.424 → 0.0.426

package/dist/247420.css

@@ -16,23 +16,33 @@
   --tree-indent: 12px;
   --tree-base-indent: 6px;
 
-  /* Paper / Ink — warm newsprint paper against near-black ink. The warmer
-     paper + deeper ink widen the tonal range so the electric lead reads as
-     printed, not glowing. */
-  --paper:       #F4F1E9;
-  --paper-2:     #EAE6DA;
-  --paper-3:     #DCD7C7;
-  --ink:         #0E0E12;
-  --ink-2:       #1F1F26;
-  --ink-3:       #52525A; /* WCAG AAA on --paper (~7.1:1) */
-  --ink-3-dark:  #464650; /* dark theme bg-3 (tier-3 surface) */
-  --paper-3-dark: #B4B4BC; /* dark theme fg-3 (tier-3 text)   */
-
-  /* Lore palette. --acid is the electric lead — a printed-ink lime that sits
-     forward of the heritage green; green/purple/mascot demote to print-ink
-     category roles. */
-  --acid:        #B6FF1B;
-  --acid-deep:   #4E4200; /* AA text tone of the lead on paper (WCAG-verified: #4E7A00 measured 4.21:1 against --accent-tint's own color-mix() output, which derives FROM --acid-deep -- so a small darkening shifts both foreground and background together and converges too slowly; #4E4200 is the minimal shade that actually clears 4.5:1 against its own self-referential tint background) */
+  /* Paper / Ink — RESTYLED to webjsx-toolkit's shadcn-neutral grayscale
+     palette (2026 restyle, replacing the prior "Acid Editorial" warm-paper/
+     electric-lime identity). Values below are HSL-equivalent-in-hex readings
+     of webjsx-toolkit's :root tokens (--background 0 0% 100%, --foreground
+     0 0% 10%, --muted 0 0% 95%, --border 0 0% 90%) so every downstream
+     color-mix()/oklch() derivation in this file keeps its formula and only
+     the ROOT input changes -- see restyle-tokens-webjsx-toolkit-look and
+     restyle-contrast-reverification-all-tokens for the swap rationale and
+     the re-verification this requires. */
+  --paper:       #FFFFFF;
+  --paper-2:     #F2F2F2;
+  --paper-3:     #E5E5E5;
+  --ink:         #1A1A1A;
+  --ink-2:       #333338;
+  --ink-3:       #525252; /* WCAG-verified 2026 restyle: npm run a11y caught 4.10:1 at #58585F against --paper-3 (#c6c5c5-equivalent surfaces); #525252 clears 4.54:1 there and 7.81:1 against pure paper */
+  --ink-3-dark:  #4D4D52; /* dark theme bg-3 (tier-3 surface) */
+  --paper-3-dark: #9B9B9B; /* dark theme fg-3 (tier-3 text); WCAG-verified: npm run a11y caught 4.41:1 at #999999 against --ink-2 (#333338); #9B9B9B clears 4.52:1 there */
+
+  /* Lore palette. --acid was the prior electric-lime lead; RESTYLED to a
+     neutral near-black accent matching webjsx-toolkit's grayscale --primary
+     (0 0% 15%), since the shadcn-neutral look has no saturated lead color at
+     all -- primary/accent are both neutral ink tones with hover-state
+     opacity, not a distinct hue. green/purple/mascot below stay as the
+     category/status palette (webjsx-toolkit has no opinion on multi-hue
+     category tagging, so these are kept rather than flattened). */
+  --acid:        #262626;
+  --acid-deep:   #171717; /* re-verify AA text tone under restyle-contrast-reverification-all-tokens */
   --green:       #247420;
   --green-2:     #3A9A34;
   --green-deep:  #133F10;
@@ -51,6 +61,14 @@
      need a tone chosen for ink rather than for the active theme. Same role
      --paper-3-dark plays for the tier-3 text ramp. */
   --mascot-on-ink: #FF5C9E;
+  /* Same always-dark-surface pattern, for .ds-cli-ok's success/OK text.
+     RESTYLED 2026: .ds-cli-ok previously used --acid directly (the bright
+     lime), which cleared contrast on --ink by construction; now that --acid
+     is a dark neutral, it fails 1.15:1 on the still-always-dark .cli card
+     (npm run a11y caught this on the terminal kit). Reuses the dark-theme
+     --green retune value (7.48:1 on --ink) rather than inventing a new hue,
+     since --green already carries the "success" semantic elsewhere. */
+  --success-on-ink: #5CBF52;
 
   /* Signals */
   --sun:         #F5C344;
@@ -97,11 +115,16 @@
   --fg-2:        var(--ink-2);
   --fg-3:        var(--ink-3);
 
-  /* The electric lead. --accent is the FILL (sits behind ink text); --accent-ink
-     is the readable TEXT tone for links/eyebrows/accents on paper (the lime
-     itself is too light for text). --accent-fg is what sits ON an --accent fill. */
+  /* --accent is the FILL; --accent-ink is the readable TEXT tone for
+     links/eyebrows/accents on paper; --accent-fg is what sits ON an --accent
+     fill. RESTYLED: --accent (formerly the bright --acid lime, dark text on
+     top) is now a dark neutral (webjsx-toolkit's --primary: 0 0% 15%), so
+     --accent-fg flips to a LIGHT tone (webjsx-toolkit's --primary-foreground:
+     0 0% 100%) -- verified via npm run a11y after the initial restyle caught
+     this exact dark-on-dark 1.15:1 failure across every kit's .btn-primary/
+     .active nav item, both of which read --accent-fg as their text color. */
   --accent:      var(--acid);
-  --accent-fg:   var(--ink);
+  --accent-fg:   var(--paper);
   --accent-ink:  var(--acid-deep);
   --accent-bright: var(--acid); /* base value so var(--accent-bright) never falls back empty; ink + [data-accent] retune it */
   /* Blends --accent-ink (the readable/darker ink variant), not the raw
@@ -242,13 +265,19 @@
   --rule-strong: color-mix(in oklab, currentColor 28%, transparent);
 
   /* Micro rungs below --r-1 — chips, badges, scrollbar thumbs, tick marks
-     genuinely want a tighter corner than 10px; without these two tokens the
-     component sheets fell back to raw px literals bypassing the scale. */
+     genuinely want a tighter corner than the base radius; without these two
+     tokens the component sheets fell back to raw px literals bypassing the
+     scale. RESTYLED (webjsx-toolkit look): base --radius is 0.5rem (8px),
+     with radius-sm/md/lg at radius-4px/radius-2px/radius (4px/6px/8px) --
+     --r-1 below is retuned to that 8px base; --r-2/--r-3 keep proportional
+     headroom above it for large-surface corners (cards, dialogs) rather than
+     collapsing to a single flat rung, since webjsx-toolkit itself has no
+     opinion above its one --radius value. */
   --r-hair:      2px;
   --r-0:         4px;
-  --r-1:         10px;
-  --r-2:         14px;
-  --r-3:         22px;
+  --r-1:         8px;
+  --r-2:         10px;
+  --r-3:         14px;
   --r-pill:      999px;
 
   --dur-snap:    80ms;
@@ -257,14 +286,24 @@
   --dur-reveal:  560ms;
   --ease:        cubic-bezier(0.2, 0, 0, 1);
   /* Physical tier — a slight overshoot that reads as a printed stamp landing,
-     used by presses and signature reveals (not by routine UI fades). */
+     used by presses and signature reveals (not by routine UI fades). Kept
+     available post-restyle since some existing consumers still reference it;
+     new work should prefer the webjsx-toolkit-equivalent curves below. */
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-exit:   cubic-bezier(0.4, 0, 1, 1);
-
-  /* Print texture — the signature surface treatment. --grain is a tiled
-     fractal-noise data-URI, opt-in via the .ds-grain utility and tuned faint
-     so type stays crisp. */
-  --grain-opacity:    0.05;
+  /* RESTYLED (webjsx-toolkit look): its three named easing curves, ported
+     verbatim from webjsx-toolkit/src/styles.css's @theme inline block. */
+  --ease-drawer:     cubic-bezier(0.32, 0.72, 0, 1);
+  --ease-collapse:   cubic-bezier(0.2, 0, 0, 1);
+  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
+
+  /* Print texture — the prior "Acid Editorial" signature surface treatment.
+     RESTYLED: opacity zeroed so .ds-grain/.ds-halftone (currently applied by
+     no consumer, verified by grep across src/components and ui_kits) render
+     inert under the flat-surface webjsx-toolkit look, without deleting the
+     machinery in case a future editorial-mode consumer opts back in. --grain
+     itself (the data-URI) and --grain-blend are left defined for that reason. */
+  --grain-opacity:    0;
   --grain-blend:      multiply;
   --grain:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
   /* Offset-ink registration — the small print-mark offset used on editorial
@@ -434,12 +473,16 @@
   --panel-text:   var(--fg);
   --panel-text-2: var(--fg-2);
   --panel-text-3: var(--fg-3);
-  --accent:    var(--acid);
+  /* RESTYLED: webjsx-toolkit's dark --primary is a LIGHT neutral (0 0% 75%)
+     with a DARK --primary-foreground (0 0% 10%) -- the inverse of light mode,
+     matching shadcn's convention that dark-mode primary buttons read as a
+     light chip on the dark page, not a same-dark-as-bg chip. --accent no
+     longer aliases --acid here (a literal dark-on-dark 1.15:1 failure caught
+     by npm run a11y across every dark-rendered kit). */
+  --accent:    #BFBFBF;
   --accent-fg: var(--ink);
-  --accent-ink: var(--acid); /* on ink, the lime itself reads as bright text */
-  --accent-bright: var(--acid);
-  /* Preserves the prior --accent-based blend for dark; the :root light-theme
-     value above was retuned to blend --accent-ink instead. */
+  --accent-ink: var(--paper);
+  --accent-bright: #BFBFBF;
   --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
   --danger:    oklch(0.68 0.19 25);
   --flame:     #FF5A1F;
@@ -505,10 +548,10 @@
     --panel-text:   var(--fg);
     --panel-text-2: var(--fg-2);
     --panel-text-3: var(--fg-3);
-    --accent:    var(--acid);
+    --accent:    #BFBFBF; /* mirrors [data-theme=ink/dark] retune above */
     --accent-fg: var(--ink);
-    --accent-ink: var(--acid);
-    --accent-bright: var(--acid);
+    --accent-ink: var(--paper);
+    --accent-bright: #BFBFBF;
     --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
     --danger:    oklch(0.68 0.19 25);
     --flame:     #FF5A1F;
@@ -571,6 +614,7 @@
   --cat-purple-ink: inherit;
   --cat-mascot-ink: inherit;
   --mascot-on-ink: inherit;
+  --success-on-ink: inherit;
   --cat-sun: inherit;
   --cat-flame: inherit;
   --cat-sky: inherit;
@@ -594,7 +638,7 @@
   color-scheme: light;
   --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3);
   --fg: var(--ink);   --fg-2: var(--ink-2);   --fg-3: var(--ink-3);
-  --accent: var(--acid); --accent-fg: var(--ink); --accent-ink: var(--acid-deep);
+  --accent: var(--acid); --accent-fg: var(--paper); --accent-ink: var(--acid-deep);
   --accent-tint: color-mix(in oklab, var(--accent-ink) 22%, var(--bg));
   /* A paper island under a dark ancestor must not inherit the dark signal pair. */
   --flame: #C53E00; --amber: #7C570F; --warn: #C41C0C; --sky: #3A6EFF;
@@ -665,7 +709,7 @@
 .ds-247420[data-density="comfortable"] { --density: 1; }
 .ds-247420[data-density="spacious"]    { --density: 1.35; }
 
-.ds-247420[data-accent="acid"]   { --accent: var(--acid);   --accent-bright: var(--acid);     --accent-fg: var(--ink);   --accent-ink: var(--acid-deep); --panel-accent: var(--acid);   }
+.ds-247420[data-accent="acid"]   { --accent: var(--acid);   --accent-bright: var(--acid);     --accent-fg: var(--paper); --accent-ink: var(--acid-deep); --panel-accent: var(--acid);   }
 .ds-247420[data-accent="green"]  { --accent: var(--green);  --accent-bright: var(--green-2);  --accent-fg: var(--paper); --accent-ink: var(--green);     --panel-accent: var(--green);  }
 .ds-247420[data-accent="purple"] { --accent: var(--purple); --accent-bright: #C277FF;         --accent-fg: var(--paper); --accent-ink: var(--purple-2);  --panel-accent: var(--purple); }
 .ds-247420[data-accent="mascot"] { --accent: var(--mascot); --accent-bright: var(--mascot-2); --accent-fg: var(--ink);   --accent-ink: var(--mascot-deep);--panel-accent: var(--mascot); }
@@ -835,6 +879,22 @@
   white-space: nowrap;
   border: 0;
 }
+
+/* .ds-aspect — generic aspect-ratio utility. Native `aspect-ratio` property
+   (broadly supported for years) rather than the padding-bottom hack: no
+   extra wrapper markup, no absolutely-positioned inner layer needed just to
+   fill the box. `--aspect` defaults to 16/9; a caller overrides it inline
+   (e.g. style="--aspect:1/1") or via a ratio-named modifier class below. */
+.ds-247420 .ds-aspect {
+  aspect-ratio: var(--aspect, 16 / 9);
+  width: 100%;
+  overflow: hidden;
+}
+.ds-247420 .ds-aspect > * { width: 100%; height: 100%; object-fit: cover; display: block; }
+.ds-247420 .ds-aspect-square { --aspect: 1 / 1; }
+.ds-247420 .ds-aspect-video { --aspect: 16 / 9; }
+.ds-247420 .ds-aspect-portrait { --aspect: 3 / 4; }
+
 .ds-247420 body {
   background: var(--bg);
   color: var(--fg);
@@ -1813,36 +1873,42 @@
 /* ============================================================
    Hero
    ============================================================ */
-/* Signature hero — asymmetric editorial header. Title spans wide; the body +
-   actions sit offset in a narrower right column on desktop, stacked on mobile.
-   No centered stack. */
+/* RESTYLED 2026 (webjsx-toolkit look): centered-stack hero, replacing the
+   prior asymmetric two-column editorial grid (title-wide / body+aside-offset)
+   per a deliberate house-rule reversal -- shadcn/webjsx-toolkit itself has no
+   asymmetric-grid opinion, and the prior "no centered stack, ever" rule was
+   specific to the retired Acid Editorial identity. All child classes/markup
+   are UNCHANGED (no JS component edit needed) -- only the grid arrangement
+   and each part's own layout (aside becomes a full-width card below the body
+   instead of a right-column card) changed. Centered text, capped measure. */
 .ds-247420 .ds-hero {
   padding: var(--space-9) 0 var(--space-8);
-  display: grid; gap: var(--space-5) var(--space-5);
-  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
-  grid-template-areas: 'title title' 'body aside';
-  align-items: start;
+  display: flex; flex-direction: column; align-items: center;
+  gap: var(--space-5);
   max-width: var(--stage-wide);
+  text-align: center;
   position: relative; isolation: isolate;
 }
-.ds-247420 .ds-hero-head { grid-area: title; display: grid; gap: var(--space-3); }
-.ds-247420 .ds-hero-body  { grid-area: body; }
-/* The right column carries its own visual weight — a spined, halftone-
-   textured card holding the badge/stat cluster and the CTAs — so the
-   asymmetric grid reads as a deliberate composition, not leftover space
-   beside the narrow body copy. Stretches to the body column's height. */
+.ds-247420 .ds-hero-head { display: grid; gap: var(--space-3); justify-items: center; }
+.ds-247420 .ds-hero-body  { margin-inline: auto; }
+/* The stat/badge/CTA cluster now sits as a full-width card BELOW the body
+   copy, centered, rather than a right-offset column -- still carries its own
+   visual weight via the top accent bar (rotated from the former left spine)
+   so it still reads as a deliberate block, not an afterthought. */
 .ds-247420 .ds-hero-aside {
-  grid-area: aside; position: relative; isolation: isolate;
-  align-self: stretch; display: flex; flex-direction: column;
+  position: relative; isolation: isolate;
+  width: 100%; max-width: 46ch;
+  display: flex; flex-direction: column;
   justify-content: space-between; gap: var(--space-5);
   background: var(--bg-2);
-  border-radius: 0 var(--r-2) var(--r-2) 0;
-  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-4) + var(--bw-chunk));
+  border-radius: var(--r-2);
+  padding: calc(var(--space-4) + var(--bw-chunk)) var(--space-5) var(--space-5);
+  text-align: left;
 }
 .ds-247420 .ds-hero-aside::before {
-  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
-  width: var(--bw-chunk); background: var(--accent);
-  border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
+  content: ''; position: absolute; left: 0; right: 0; top: 0;
+  height: var(--bw-chunk); background: var(--accent);
+  border-radius: var(--bw-chunk) var(--bw-chunk) 0 0;
 }
 .ds-247420 .ds-hero-stats { display: flex; flex-direction: column; gap: var(--space-2); }
 .ds-247420 .ds-hero-stat {
@@ -1860,35 +1926,25 @@
      Snapping to either changes the hero's whole optical weight. */
   font-size: clamp(40px, 9cqi, 116px);
   line-height: 0.96; letter-spacing: var(--tr-tighter);
-  margin: 0; max-width: 16ch; text-wrap: balance;
+  margin: 0 auto; max-width: 20ch; text-wrap: balance;
 }
 .ds-247420 .ds-hero-body {
   font-family: var(--ff-body); font-size: var(--fs-xl);
-  line-height: 1.45; margin: 0; max-width: 46ch;
+  line-height: 1.45; margin: 0 auto; max-width: 46ch;
   color: var(--fg-2);
 }
 /* The lead phrase in the title — printed in the electric lead, not glowing. */
 .ds-247420 .ds-hero-accent { color: var(--accent-ink); font-weight: 700; }
 .ds-247420 .ds-hero-actions {
   display: flex; gap: var(--space-2, 10px); flex-wrap: wrap;
-  align-self: start; margin-top: var(--space-hair, 4px);
+  justify-content: center; margin-top: var(--space-hair, 4px);
 }
-/* Container-queried (the whole shell is; a 500px pane on a wide viewport
-   would keep the two-column grid under a width @media). Left-aligned stack —
-   no centering — preserving the asymmetric intent. */
+/* Below this width the aside card's own internal rhythm (stat rows still
+   stacked vertically at full width) is already correct for a narrow column —
+   no separate breakpoint override needed now that .ds-hero is always a
+   single-column centered stack at every width. */
 @container (max-width: 900px) {
-  .ds-247420 .ds-hero {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: 'title' 'body' 'aside';
-    align-items: start;
-    padding: var(--space-7) 0 var(--space-6);
-  }
-  .ds-247420 .ds-hero-aside {
-    border-radius: var(--r-2); flex-direction: row; flex-wrap: wrap;
-    justify-content: flex-start; align-items: center;
-  }
-  .ds-247420 .ds-hero-stats { flex-direction: row; flex-wrap: wrap; }
-  .ds-247420 .ds-hero-stat { border-bottom: 0; padding-bottom: 0; }
+  .ds-247420 .ds-hero { padding: var(--space-7) 0 var(--space-6); }
 }
 .ds-247420 .ds-chat-title { margin: 0; font-size: inherit; }
 
@@ -3499,7 +3555,7 @@
   pointer-events: none;
 }
 .ds-247420 .chat-empty-title { font-size: var(--fs-sm); margin: 0 0 var(--space-1); }
-.ds-247420 .chat-empty-sub { font-size: var(--fs-tiny); margin: 0; opacity: .7; }
+.ds-247420 .chat-empty-sub { font-size: var(--fs-tiny); margin: 0; opacity: .82; } /* WCAG-verified 2026 restyle: .7 blended --fg-3 to 3.72:1 on dark --bg (#1a1a1a); .82 clears 4.53:1 */
 
 .ds-247420 .chat-msg { display: flex; gap: var(--space-2-75); align-items: flex-start; padding: var(--space-1-75) 0; position: relative; min-width: 0; }
 .ds-247420 .chat-msg.you { flex-direction: row-reverse; }
@@ -6196,7 +6252,7 @@
    draws, applied to a surface that never follows the theme. */
 .ds-247420 .ds-cli-cmt .cmd { color: var(--paper-3-dark); }
 .ds-247420 .ds-cli-out .cmd { color: var(--paper-2); }
-.ds-247420 .ds-cli-ok .prompt, .ds-247420 .ds-cli-ok .cmd { color: var(--acid); }
+.ds-247420 .ds-cli-ok .prompt, .ds-247420 .ds-cli-ok .cmd { color: var(--success-on-ink); } /* WCAG-verified 2026 restyle: --acid alone is now a dark neutral and fails on this always-dark .cli surface (npm run a11y) */
 .ds-247420 .ds-cli-warn .prompt, .ds-247420 .ds-cli-warn .cmd { color: var(--mascot-on-ink); }
 .ds-247420 .ds-cli-log .prompt { color: var(--paper-3-dark); }
 .ds-247420 .ds-cli-log .cmd { color: var(--paper-2); font-family: var(--ff-mono); }
@@ -6892,6 +6948,371 @@
   background: var(--bg-2); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
   padding: var(--space-3); overflow: auto; max-height: 260px; white-space: pre-wrap; word-break: break-word;
 }
+/* ============================================================
+   Slider — generic single-value range input
+   Same overlay approach as .vx-vad-range (community.css): a real, fully
+   transparent <input type="range"> sits on top of a custom track/fill/thumb
+   so no browser's native thumb chrome ever paints, while pointer/keyboard/
+   a11y semantics stay on the real input underneath.
+   ============================================================ */
+.ds-247420 .ds-slider { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; }
+.ds-247420 .ds-slider.is-disabled { opacity: 0.5; pointer-events: none; }
+.ds-247420 .ds-slider-track {
+  position: relative;
+  height: 12px;
+  margin: var(--space-2) 0;
+  border-radius: var(--r-pill);
+  background: var(--bg-3);
+  overflow: visible;
+}
+.ds-247420 .ds-slider-fill {
+  position: absolute; left: 0; top: 0; bottom: 0;
+  width: calc(var(--ds-slider-pct, 0) * 1%);
+  border-radius: var(--r-pill);
+  background: var(--accent);
+  transition: width var(--dur-snap) linear;
+}
+.ds-247420 .ds-slider-thumb {
+  position: absolute; top: 50%; left: calc(var(--ds-slider-pct, 0) * 1%);
+  width: 18px; height: 18px;
+  border-radius: var(--r-pill);
+  background: var(--bg-1);
+  border: var(--bw-rule) solid var(--accent);
+  box-shadow: var(--shadow-1);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  transition: box-shadow var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-slider-range {
+  position: absolute; inset: 0;
+  width: 100%; height: 100%;
+  margin: 0; opacity: 0;
+  cursor: pointer;
+}
+.ds-247420 .ds-slider-range:focus-visible ~ .ds-slider-thumb,
+.ds-247420 .ds-slider-track:has(.ds-slider-range:focus-visible) .ds-slider-thumb {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent), var(--shadow-1);
+}
+.ds-247420 .ds-slider-range:disabled { cursor: default; }
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .ds-slider-fill,
+  .ds-247420 .ds-slider-thumb {
+    transition: none !important;
+  }
+}
+/* ============================================================
+   InputOTP — segmented PIN / one-time-code entry
+   ============================================================ */
+.ds-247420 .ds-otp { display: inline-flex; gap: var(--space-2); }
+.ds-247420 .ds-otp-box {
+  width: var(--ctl-md); height: var(--ctl-md);
+  text-align: center;
+  font-family: var(--ff-mono);
+  font-size: var(--fs-lg);
+  font-weight: 600;
+  color: var(--fg);
+  background: var(--bg-2);
+  border: var(--bw-rule) solid var(--rule);
+  border-radius: var(--r-1);
+  transition: border-color var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-otp-box:focus-visible {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent);
+}
+.ds-247420 .ds-otp-box-filled { border-color: var(--rule-strong); background: var(--bg-3); }
+.ds-247420 .ds-otp-box-error { border-color: var(--red); }
+.ds-247420 .ds-otp-box-error:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 40%, transparent); }
+.ds-247420 .ds-otp-box:disabled { opacity: 0.5; cursor: default; }
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .ds-otp-box {
+    transition: none !important;
+  }
+}
+/* ============================================================
+   Carousel — horizontal (or vertical) scroll-snap content carousel
+   ============================================================ */
+.ds-247420 .ds-carousel {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.ds-247420 .ds-carousel--vertical { flex-direction: column; }
+
+.ds-247420 .ds-carousel-track {
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--space-3);
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+.ds-247420 .ds-carousel-track--vertical {
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+  max-height: 480px;
+}
+
+.ds-247420 .ds-carousel-item {
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+}
+
+.ds-247420 .ds-carousel-prev,
+.ds-247420 .ds-carousel-next {
+  flex: 0 0 auto;
+  border-radius: var(--r-pill);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .ds-carousel-track {
+    scroll-behavior: auto;
+  }
+}
+/* ============================================================
+   Calendar / DatePicker / DateRangePicker — month date-grid
+   primitive plus its trigger+popover shells. Tokens only: no raw
+   color/radius/z-index literal anywhere below (lint-tokens /
+   lint-radius / lint-zindex hard gates).
+   ============================================================ */
+.ds-247420 .ds-cal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  width: max-content;
+  min-width: 264px;
+}
+.ds-247420 .ds-cal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+.ds-247420 .ds-cal-title {
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  color: var(--fg);
+  text-align: center;
+  flex: 1;
+}
+.ds-247420 .ds-cal-nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: var(--r-1);
+  background: transparent;
+  color: var(--fg-3);
+  cursor: pointer;
+  transition: background-color var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-cal-nav:hover { background: var(--bg-2); color: var(--fg); }
+.ds-247420 .ds-cal-nav:focus-visible { box-shadow: var(--focus-ring-inset); outline: none; }
+.ds-247420 .ds-cal-nav:active { transform: translateY(1px); }
+
+.ds-247420 .ds-cal-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--space-1);
+}
+.ds-247420 .ds-cal-weekday-label {
+  font-size: var(--fs-micro);
+  font-weight: 600;
+  letter-spacing: var(--tr-caps);
+  text-transform: uppercase;
+  color: var(--fg-3);
+  text-align: center;
+  padding-block: var(--space-1);
+}
+
+.ds-247420 .ds-cal-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--space-1);
+}
+.ds-247420 .ds-cal-day {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: var(--r-1);
+  background: transparent;
+  color: var(--fg);
+  font-size: var(--fs-sm);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background-color var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-cal-day:hover { background: var(--bg-2); }
+.ds-247420 .ds-cal-day:focus-visible { box-shadow: var(--focus-ring-inset); outline: none; }
+.ds-247420 .ds-cal-day-outside { color: var(--fg-3); opacity: 0.55; }
+.ds-247420 .ds-cal-day-today { font-weight: 700; box-shadow: inset 0 0 0 var(--bw-hair) var(--rule-strong); }
+.ds-247420 .ds-cal-day-selected {
+  background: var(--accent);
+  color: var(--accent-fg);
+  font-weight: 600;
+}
+.ds-247420 .ds-cal-day-selected:hover { background: var(--accent); }
+.ds-247420 .ds-cal-day-in-range {
+  background: var(--accent-tint);
+  border-radius: var(--r-0);
+}
+.ds-247420 .ds-cal-day-range-start { border-radius: var(--r-1) var(--r-0) var(--r-0) var(--r-1); }
+.ds-247420 .ds-cal-day-range-end { border-radius: var(--r-0) var(--r-1) var(--r-1) var(--r-0); }
+.ds-247420 .ds-cal-day-disabled {
+  color: var(--fg-3);
+  opacity: 0.35;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .ds-cal-nav, .ds-247420 .ds-cal-day { transition: none; }
+}
+
+/* -- DatePicker / DateRangePicker trigger -------------------------------- */
+.ds-247420 .ds-dp { display: inline-flex; position: relative; }
+.ds-247420 .ds-dp-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1-5);
+  min-height: 32px;
+  padding: var(--space-1-5) var(--space-2-5);
+  border: 0;
+  border-radius: var(--r-2);
+  background: var(--bg-2);
+  color: var(--fg);
+  font-family: inherit;
+  font-size: var(--fs-sm);
+  cursor: pointer;
+  transition: background-color var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-dp-trigger:hover { background: var(--bg-3); }
+.ds-247420 .ds-dp-trigger:focus-visible { box-shadow: var(--focus-ring-inset); outline: none; }
+.ds-247420 .ds-dp-trigger-label { white-space: nowrap; }
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .ds-dp-trigger { transition: none; }
+}
+/* collab.css — LiveCursorOverlay / RemoteSelectionRings /
+   RecentEditHighlightFlash / AgentPresenceChip / PresenceBar. Real-time
+   multiplayer co-editing UI: remote pointers, selection rings, edit flashes,
+   and a generalized collaborator presence chip row. `ds-collab-*` prefix,
+   distinct from community.js's `cm-*` voice/member chips even though the
+   presence chip visual language matches. */
+
+.ds-247420 .ds-collab-cursor-overlay,
+.ds-247420 .ds-collab-selection-overlay,
+.ds-247420 .ds-collab-flash-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: var(--z-raised);
+  overflow: hidden;
+}
+
+/* ---- LiveCursorOverlay -------------------------------------------------- */
+.ds-247420 .ds-collab-cursor {
+  position: absolute;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-1);
+  transform: translate(-2px, -2px);
+}
+.ds-247420 .ds-collab-cursor svg { filter: drop-shadow(0 1px 1px color-mix(in oklab, var(--ink) 30%, transparent)); }
+.ds-247420 .ds-collab-cursor-label {
+  font-size: var(--fs-pico);
+  font-weight: 600;
+  line-height: 1.6;
+  padding: 0 var(--space-1);
+  border-radius: var(--r-hair);
+  color: var(--on-color);
+  white-space: nowrap;
+  transform: translateY(2px);
+}
+
+/* ---- RemoteSelectionRings ------------------------------------------------ */
+.ds-247420 .ds-collab-selection-ring {
+  position: absolute;
+  border: var(--bw-hair) solid var(--ring-color, var(--accent));
+  background: color-mix(in oklab, var(--ring-color, var(--accent)) 14%, transparent);
+  border-radius: var(--r-hair);
+}
+
+/* ---- RecentEditHighlightFlash -------------------------------------------
+   Reduced-motion users get an instant flash with no animation (the fade-out
+   keyframe lives only inside the no-preference query) rather than a fade. */
+.ds-247420 .ds-collab-flash {
+  position: absolute;
+  background: color-mix(in oklab, var(--flash-color, var(--accent)) 35%, transparent);
+  border-radius: var(--r-hair);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ds-collab-flash { animation: ds-collab-flash-fade var(--dur-reveal) var(--ease-exit) forwards; }
+  @keyframes ds-collab-flash-fade {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .ds-collab-flash { opacity: 1; }
+}
+
+/* ---- AgentPresenceChip / PresenceBar -------------------------------------
+   Visual language matches community.js's cm-voice-user/cm-member-item chips
+   (avatar circle + --avatar-bg custom property + initial + name), reused
+   here under a distinct prefix since this is a different feature. */
+.ds-247420 .ds-collab-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+.ds-247420 .ds-collab-bar-empty { color: var(--fg-3); font-size: var(--fs-sm); padding: var(--space-2) 0; }
+.ds-247420 .ds-collab-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1-75);
+  padding: var(--space-1) var(--space-2-5) var(--space-1) var(--space-1);
+  border-radius: var(--r-pill);
+  background: var(--bg-2);
+}
+.ds-247420 .ds-collab-chip-avatar {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--avatar-bg, var(--bg-3));
+  color: var(--fg-2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--fs-pico);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.ds-247420 .ds-collab-chip-status {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: var(--bw-hair) solid var(--bg-2);
+  background: var(--fg-3);
+}
+.ds-247420 .ds-collab-chip-status-active { background: var(--green-2); }
+.ds-247420 .ds-collab-chip-status-idle { background: var(--sun); }
+.ds-247420 .ds-collab-chip-status-offline { background: var(--fg-3); }
+.ds-247420 .ds-collab-chip-name { font-size: var(--fs-tiny); color: var(--fg-2); white-space: nowrap; }
 
 /* community.css */
 /* ============================================================
@@ -9321,6 +9742,47 @@
 }
 .ds-247420 .ds-context-group .row + .row { margin-top: var(--space-hair); }
 
+/* ----------------------------------------------------------------------------
+   ContextMeter / ContextTreemap / ContextXRayPanel — token/cost breakdown
+   surfaces added alongside ContextPane. Tone classes share one small
+   vocabulary (system/user/assistant/other) across all three components so a
+   segment's color pairs up wherever it appears.
+---------------------------------------------------------------------------- */
+.ds-247420 .ds-context-meter { display: flex; flex-direction: column; gap: var(--space-1); }
+.ds-247420 .ds-context-meter-track {
+  display: flex; width: 100%; height: 8px; border-radius: var(--r-hair);
+  overflow: hidden; background: var(--bg-3);
+}
+.ds-247420 .ds-context-meter-seg { display: block; height: 100%; }
+.ds-247420 .ds-context-meter-seg-system { background: var(--sky); }
+.ds-247420 .ds-context-meter-seg-user { background: var(--green-2); }
+.ds-247420 .ds-context-meter-seg-assistant { background: var(--purple-2); }
+.ds-247420 .ds-context-meter-seg-other { background: var(--fg-3); }
+.ds-247420 .ds-context-meter-foot {
+  display: flex; justify-content: space-between; font-size: var(--fs-tiny); color: var(--fg-3);
+}
+
+.ds-247420 .ds-context-treemap { display: block; width: 100%; height: auto; border-radius: var(--r-1); }
+.ds-247420 .ds-context-treemap-rect { stroke: var(--bg); stroke-width: 1; }
+.ds-247420 .ds-context-treemap-rect-system { fill: var(--sky); }
+.ds-247420 .ds-context-treemap-rect-user { fill: var(--green-2); }
+.ds-247420 .ds-context-treemap-rect-assistant { fill: var(--purple-2); }
+.ds-247420 .ds-context-treemap-rect-other { fill: var(--fg-3); }
+.ds-247420 .ds-context-treemap-label { font-size: var(--fs-pico); fill: var(--on-accent); font-family: var(--ff-body); }
+.ds-247420 .ds-context-treemap-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-sm); }
+
+.ds-247420 .ds-context-xray-head { display: flex; align-items: center; gap: var(--space-1-75); width: 100%; }
+.ds-247420 .ds-context-xray-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.ds-247420 .ds-context-xray-dot-system { background: var(--sky); }
+.ds-247420 .ds-context-xray-dot-user { background: var(--green-2); }
+.ds-247420 .ds-context-xray-dot-assistant { background: var(--purple-2); }
+.ds-247420 .ds-context-xray-dot-other { background: var(--fg-3); }
+.ds-247420 .ds-context-xray-label { flex: 1; }
+.ds-247420 .ds-context-xray-value { color: var(--fg-3); font-family: var(--ff-mono); font-size: var(--fs-xs); }
+.ds-247420 .ds-context-xray-body { display: flex; flex-direction: column; gap: var(--space-1); }
+.ds-247420 .ds-context-xray-row { display: flex; justify-content: space-between; font-size: var(--fs-tiny); color: var(--fg-2); }
+.ds-247420 .ds-context-xray-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-sm); }
+
 /* ============================================================================
    Cohesion sweep (gui-cohesion.js): one-product polish across surfaces.
 ============================================================================ */