anentrypoint-design 0.0.425 → 0.0.426

package/src/components/shell/icons.js

@@ -86,7 +86,10 @@ export const ICON_PATHS = {
     // clipboard/copy — for the per-block code copy + message copy action, so the
     // copy affordance reads as copy, not the lined-document `page` glyph.
     copy: '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h8"/>',
-    clipboard: '<rect x="8" y="4" width="8" height="4" rx="1"/><path d="M8 6H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-2"/>'
+    clipboard: '<rect x="8" y="4" width="8" height="4" rx="1"/><path d="M8 6H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-2"/>',
+    // Live-cursor pointer arrow — collab.js's LiveCursorOverlay renders one
+    // per remote collaborator, filled with that collaborator's color.
+    cursor: '<path d="M5 3l14 8-6.5 1.5L11 20z"/>'
 };
 
 // The single SVG attribute contract (viewBox/stroke/linecap…) shared by both

package/src/components/slider.js

@@ -0,0 +1,66 @@
+// Slider — generic single-value range-input wrapper. Styling approach is
+// extracted from voice/capture.js's VadMeter (the original purpose-built
+// range-input precedent): a real <input type="range"> is layered invisible
+// (opacity:0, position:absolute, inset:0) directly over a custom track/fill
+// so the notoriously inconsistent native thumb/track chrome never renders,
+// while keyboard/pointer/a11y semantics stay on the real input.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+let _uid = 0;
+function uid(prefix) { _uid += 1; return prefix + '-' + _uid; }
+
+/**
+ * A single-value range slider (track + fill + thumb) built on a real,
+ * invisible native `<input type="range">` for keyboard/pointer/a11y
+ * semantics, matching the overlay approach voice/capture.js's VadMeter
+ * pioneered for its threshold handle.
+ *
+ * @param {Object} [props]
+ * @param {number} [props.value=0]
+ * @param {number} [props.min=0]
+ * @param {number} [props.max=100]
+ * @param {number} [props.step=1]
+ * @param {Function} [props.onChange] - called with (value:number, event) on input.
+ * @param {string} [props.label] - accessible name; also rendered visibly when given.
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.hint]
+ * @param {*} [props.key]
+ * @returns {*} webjsx vnode
+ */
+export function Slider({ value = 0, min = 0, max = 100, step = 1, onChange, label, disabled, hint, key } = {}) {
+    const lo = Number(min);
+    const hi = Number(max);
+    const v = Math.max(lo, Math.min(hi, Number(value) || 0));
+    const pct = hi > lo ? ((v - lo) / (hi - lo)) * 100 : 0;
+    const inputId = uid('ds-slider');
+    const hintId = hint != null ? inputId + '-hint' : null;
+    const range = h('input', {
+        key: 'i',
+        id: inputId,
+        type: 'range',
+        class: 'ds-slider-range',
+        min: String(lo), max: String(hi), step: String(step),
+        value: String(v),
+        disabled: disabled ? true : null,
+        'aria-label': label || null,
+        'aria-describedby': hintId,
+        oninput: onChange ? (e) => onChange(parseFloat(e.target.value), e) : null
+    });
+    // Position is written as a custom-property (--ds-slider-pct), not a raw
+    // width:/left: layout string, so this stays a whitelisted dynamic
+    // non-layout style per lint-inline-styles.mjs — the % math itself lives
+    // in slider.css via calc(var(--ds-slider-pct) * 1%).
+    const pctVar = '--ds-slider-pct:' + pct.toFixed(2);
+    const track = h('div', { key: 't', class: 'ds-slider-track', style: pctVar },
+        h('div', { key: 'f', class: 'ds-slider-fill' }),
+        h('div', { key: 'th', class: 'ds-slider-thumb', 'aria-hidden': 'true' }),
+        range
+    );
+    return h('div', { key, class: 'ds-slider' + (disabled ? ' is-disabled' : '') },
+        label != null ? h('label', { key: 'l', class: 'ds-field-label', for: inputId }, label) : null,
+        track,
+        hint != null ? h('span', { key: 'h', id: hintId, class: 'ds-field-hint' }, hint) : null
+    );
+}

package/src/components.js

@@ -15,7 +15,7 @@ export {
     Hero, HeroFromPageData, Marquee, Install, CliBlock, Receipt, Changelog,
     WorksList, WritingList, Manifesto, Section, PageHeader,
     Kpi, Sparkline, BarChart, Table, HealthTable, ProcessRegistryTable, SearchInput, TextField, Select, EventList,
-    HomeView, ProjectView, Form,
+    HomeView, ProjectView, Form, InputOTP,
     Spinner, Skeleton, Alert, FilterPills, Avatar, avatarInitial
 } from './components/content.js';
 
@@ -33,7 +33,7 @@ export {
     ConversationList, SessionCard, SessionDashboard, SessionMeta, fmtDuration, fmtTime, fmtAgo, AgentListSkeleton
 } from './components/sessions.js';
 
-export { ContextPane } from './components/context-pane.js';
+export { ContextPane, ContextMeter, ContextTreemap, ContextXRayPanel } from './components/context-pane.js';
 
 export { SpreadsheetPreview } from './components/spreadsheet-preview.js';
 
@@ -49,7 +49,8 @@ export { ModelsConfig } from './components/models-config.js';
 
 export {
     DEFAULT_PHASES, PhaseWalk, TreeNode, BarRow, RateCell,
-    StatTile, StatsGrid, SubGrid, SessionRow, DevRow, LiveLogEntry, LiveLog
+    StatTile, StatsGrid, SubGrid, SessionRow, DevRow, LiveLogEntry, LiveLog,
+    Progress
 } from './components/data-density.js';
 
 export {
@@ -78,12 +79,21 @@ export {
     playCompletionCue
 } from './components/voice.js';
 
+export {
+    LiveCursorOverlay, RemoteSelectionRings, RecentEditHighlightFlash,
+    AgentPresenceChip, PresenceBar
+} from './components/collab.js';
+
 export { ThemeToggle } from './components/theme-toggle.js';
 
 export {
     Checkbox, Radio, RadioGroup, Toggle, Field, useFormValidation, focusFirstInvalidField
 } from './components/form-primitives.js';
 
+export { Slider } from './components/slider.js';
+
+export { Carousel } from './components/carousel.js';
+
 export {
     useDraggable, useDropTarget, useNumberScrub, usePointerDrag, Reorderable,
     useKeyboardShortcut, formatShortcut, ShortcutHint, ShortcutList,
@@ -103,7 +113,7 @@ export {
     Pager, JsonViewer,
     Grid, GridItem,
     Collapse, CollapseGroup,
-    Divider,
+    Divider, AspectRatio,
     useMediaQuery,
     BP_SM, BP_MD, BP_LG, BP_XL,
     InfoRow, InfoSection, DiagnosticsPanel,
@@ -114,7 +124,8 @@ export {
     Tooltip, Popover, Dropdown, useLongPress, useFloating,
     CommandPalette, EmojiPicker, BootOverlay, SettingsPopover,
     AuthModal, VideoLightbox, PermissionMenu, ApprovalPrompt, withBusy,
-    MenuButton
+    MenuButton,
+    HoverCard, Menubar
 } from './components/overlay-primitives.js';
 
 export {
@@ -129,3 +140,8 @@ export {
 } from './components/freddie/runtime.js';
 
 export { mountCommunityApp } from './community-app.js';
+
+export {
+    Calendar, DatePicker, DateRangePicker,
+    WEEKDAY_LABELS, buildMonthGrid, formatDate, monthLabel
+} from './components/calendar.js';

package/src/css/app-shell/base.css

@@ -74,6 +74,22 @@ button, input, select, textarea { font: inherit; }
   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-aspect {
+  aspect-ratio: var(--aspect, 16 / 9);
+  width: 100%;
+  overflow: hidden;
+}
+.ds-aspect > * { width: 100%; height: 100%; object-fit: cover; display: block; }
+.ds-aspect-square { --aspect: 1 / 1; }
+.ds-aspect-video { --aspect: 16 / 9; }
+.ds-aspect-portrait { --aspect: 3 / 4; }
+
 body {
   background: var(--bg);
   color: var(--fg);

package/src/css/app-shell/calendar.css

@@ -0,0 +1,131 @@
+/* ============================================================
+   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-cal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  width: max-content;
+  min-width: 264px;
+}
+.ds-cal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+.ds-cal-title {
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  color: var(--fg);
+  text-align: center;
+  flex: 1;
+}
+.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-cal-nav:hover { background: var(--bg-2); color: var(--fg); }
+.ds-cal-nav:focus-visible { box-shadow: var(--focus-ring-inset); outline: none; }
+.ds-cal-nav:active { transform: translateY(1px); }
+
+.ds-cal-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--space-1);
+}
+.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-cal-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--space-1);
+}
+.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-cal-day:hover { background: var(--bg-2); }
+.ds-cal-day:focus-visible { box-shadow: var(--focus-ring-inset); outline: none; }
+.ds-cal-day-outside { color: var(--fg-3); opacity: 0.55; }
+.ds-cal-day-today { font-weight: 700; box-shadow: inset 0 0 0 var(--bw-hair) var(--rule-strong); }
+.ds-cal-day-selected {
+  background: var(--accent);
+  color: var(--accent-fg);
+  font-weight: 600;
+}
+.ds-cal-day-selected:hover { background: var(--accent); }
+.ds-cal-day-in-range {
+  background: var(--accent-tint);
+  border-radius: var(--r-0);
+}
+.ds-cal-day-range-start { border-radius: var(--r-1) var(--r-0) var(--r-0) var(--r-1); }
+.ds-cal-day-range-end { border-radius: var(--r-0) var(--r-1) var(--r-1) var(--r-0); }
+.ds-cal-day-disabled {
+  color: var(--fg-3);
+  opacity: 0.35;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-cal-nav, .ds-cal-day { transition: none; }
+}
+
+/* -- DatePicker / DateRangePicker trigger -------------------------------- */
+.ds-dp { display: inline-flex; position: relative; }
+.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-dp-trigger:hover { background: var(--bg-3); }
+.ds-dp-trigger:focus-visible { box-shadow: var(--focus-ring-inset); outline: none; }
+.ds-dp-trigger-label { white-space: nowrap; }
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-dp-trigger { transition: none; }
+}

package/src/css/app-shell/carousel.css

@@ -0,0 +1,44 @@
+/* ============================================================
+   Carousel — horizontal (or vertical) scroll-snap content carousel
+   ============================================================ */
+.ds-carousel {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.ds-carousel--vertical { flex-direction: column; }
+
+.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-carousel-track--vertical {
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+  max-height: 480px;
+}
+
+.ds-carousel-item {
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+}
+
+.ds-carousel-prev,
+.ds-carousel-next {
+  flex: 0 0 auto;
+  border-radius: var(--r-pill);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-carousel-track {
+    scroll-behavior: auto;
+  }
+}

package/src/css/app-shell/chat-polish.css

@@ -44,7 +44,7 @@
   pointer-events: none;
 }
 .chat-empty-title { font-size: var(--fs-sm); margin: 0 0 var(--space-1); }
-.chat-empty-sub { font-size: var(--fs-tiny); margin: 0; opacity: .7; }
+.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 */
 
 .chat-msg { display: flex; gap: var(--space-2-75); align-items: flex-start; padding: var(--space-1-75) 0; position: relative; min-width: 0; }
 .chat-msg.you { flex-direction: row-reverse; }

package/src/css/app-shell/collab.css

@@ -0,0 +1,106 @@
+/* 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-collab-cursor-overlay,
+.ds-collab-selection-overlay,
+.ds-collab-flash-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: var(--z-raised);
+  overflow: hidden;
+}
+
+/* ---- LiveCursorOverlay -------------------------------------------------- */
+.ds-collab-cursor {
+  position: absolute;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-1);
+  transform: translate(-2px, -2px);
+}
+.ds-collab-cursor svg { filter: drop-shadow(0 1px 1px color-mix(in oklab, var(--ink) 30%, transparent)); }
+.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-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-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-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-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-collab-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+.ds-collab-bar-empty { color: var(--fg-3); font-size: var(--fs-sm); padding: var(--space-2) 0; }
+.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-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-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-collab-chip-status-active { background: var(--green-2); }
+.ds-collab-chip-status-idle { background: var(--sun); }
+.ds-collab-chip-status-offline { background: var(--fg-3); }
+.ds-collab-chip-name { font-size: var(--fs-tiny); color: var(--fg-2); white-space: nowrap; }

package/src/css/app-shell/hero-content.css

@@ -1,36 +1,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-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-hero-head { grid-area: title; display: grid; gap: var(--space-3); }
-.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-hero-head { display: grid; gap: var(--space-3); justify-items: center; }
+.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-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-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-hero-stats { display: flex; flex-direction: column; gap: var(--space-2); }
 .ds-hero-stat {
@@ -48,35 +54,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-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-hero-accent { color: var(--accent-ink); font-weight: 700; }
 .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-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-hero-aside {
-    border-radius: var(--r-2); flex-direction: row; flex-wrap: wrap;
-    justify-content: flex-start; align-items: center;
-  }
-  .ds-hero-stats { flex-direction: row; flex-wrap: wrap; }
-  .ds-hero-stat { border-bottom: 0; padding-bottom: 0; }
+  .ds-hero { padding: var(--space-7) 0 var(--space-6); }
 }
 .ds-chat-title { margin: 0; font-size: inherit; }
 

package/src/css/app-shell/kits-appended.css

@@ -549,7 +549,7 @@
    draws, applied to a surface that never follows the theme. */
 .ds-cli-cmt .cmd { color: var(--paper-3-dark); }
 .ds-cli-out .cmd { color: var(--paper-2); }
-.ds-cli-ok .prompt, .ds-cli-ok .cmd { color: var(--acid); }
+.ds-cli-ok .prompt, .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-cli-warn .prompt, .ds-cli-warn .cmd { color: var(--mascot-on-ink); }
 .ds-cli-log .prompt { color: var(--paper-3-dark); }
 .ds-cli-log .cmd { color: var(--paper-2); font-family: var(--ff-mono); }

package/src/css/app-shell/otp-input.css

@@ -0,0 +1,31 @@
+/* ============================================================
+   InputOTP — segmented PIN / one-time-code entry
+   ============================================================ */
+.ds-otp { display: inline-flex; gap: var(--space-2); }
+.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-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-otp-box-filled { border-color: var(--rule-strong); background: var(--bg-3); }
+.ds-otp-box-error { border-color: var(--red); }
+.ds-otp-box-error:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 40%, transparent); }
+.ds-otp-box:disabled { opacity: 0.5; cursor: default; }
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-otp-box {
+    transition: none !important;
+  }
+}

package/src/css/app-shell/slider.css

@@ -0,0 +1,53 @@
+/* ============================================================
+   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-slider { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; }
+.ds-slider.is-disabled { opacity: 0.5; pointer-events: none; }
+.ds-slider-track {
+  position: relative;
+  height: 12px;
+  margin: var(--space-2) 0;
+  border-radius: var(--r-pill);
+  background: var(--bg-3);
+  overflow: visible;
+}
+.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-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-slider-range {
+  position: absolute; inset: 0;
+  width: 100%; height: 100%;
+  margin: 0; opacity: 0;
+  cursor: pointer;
+}
+.ds-slider-range:focus-visible ~ .ds-slider-thumb,
+.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-slider-range:disabled { cursor: default; }
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-slider-fill,
+  .ds-slider-thumb {
+    transition: none !important;
+  }
+}