anentrypoint-design 0.0.487 → 0.0.488

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.487",
+  "version": "0.0.488",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/content/fields.js

@@ -46,7 +46,9 @@ export function SearchInput({ value = '', placeholder = 'search…', onInput, on
     // has no way to morph one element type into another in place - it produced
     // a corrupted merged DOM node carrying attributes from both shapes.
     return h('span', { key, class: 'ds-search-input-wrap' },
-        input,
+        h('span', { key: 'fld', class: 'ds-search-field' },
+            h('span', { key: 'ic', class: 'ds-search-icon', 'aria-hidden': 'true' }, Icon('search', { size: 15 })),
+            input),
         clearBtn,
         resultCount != null ? h('span', { key: 'cnt', class: 'sr-only', role: 'status', 'aria-live': 'polite' }, resultCount) : null);
 }

package/src/components/content/panel.js

@@ -17,7 +17,7 @@ export function Panel({ title, count, right, style = '', class: className = '',
     return h('div', { class: cls, style, ...(id ? { id } : {}) },
         title != null ? h('div', { class: 'panel-head' },
             h(headingTag, { class: 'panel-title' }, title),
-            right != null ? right : (count != null ? h('span', {}, String(count)) : null)
+            right != null ? right : (count != null ? h('span', { class: 'ds-badge' }, String(count)) : null)
         ) : null,
         h('div', { class: 'panel-body' }, ...(Array.isArray(children) ? children : [children]))
     );

package/src/components/files/chrome.js

@@ -48,14 +48,16 @@ export function RootsPicker({ roots = [], selected, onSelect, label = 'roots' }
         }, r.label || r.id)));
 }
 
-export function DropZone({ children, dragover, onDrop, onDragOver, onDragLeave, label = 'drop files here', onPick } = {}) {
+export function DropZone({ children, dragover, rejected, onDrop, onDragOver, onDragLeave, label = 'drop files here', onPick } = {}) {
     // With children the zone is a passive WRAPPER: content renders normally and
     // the dashed affordance appears only while a drag is over it (real file
     // managers never burn a permanent band on a maybe-drop). Without children
-    // it keeps the explicit picker-block look.
+    // it keeps the explicit picker-block look. `rejected` lets the host flag a
+    // drag whose payload fails a type/size guard with a distinct treatment
+    // (.rejected) instead of the normal accept-toned .dragover.
     const kids = Array.isArray(children) ? children : children ? [children] : [];
     return h('div', {
-        class: 'ds-dropzone' + (kids.length ? ' ds-dropzone--wrap' : '') + (dragover ? ' dragover' : ''),
+        class: 'ds-dropzone' + (kids.length ? ' ds-dropzone--wrap' : '') + (dragover ? ' dragover' : '') + (rejected ? ' rejected' : ''),
         ondragover: (e) => { e.preventDefault(); onDragOver && onDragOver(e); },
         ondragleave: (e) => { if (!e.currentTarget.contains(e.relatedTarget)) { onDragLeave && onDragLeave(e); } },
         ondrop: (e) => { e.preventDefault(); onDrop && onDrop(e.dataTransfer.files); }

package/src/components/overlay-primitives/floating.js

@@ -45,6 +45,7 @@ export function useFloating(anchorEl, contentEl, { placement = 'bottom-start', o
         contentEl.style.left = x + 'px';
         contentEl.style.top = y + 'px';
         finalPlacement = s + '-' + align;
+        contentEl.setAttribute('data-placement', finalPlacement);
     };
     compute();
     const cb = () => compute();

package/src/components/shell/workspace-columns.js

@@ -88,12 +88,14 @@ export function WsResizer(col) {
     const onDown = (e) => {
         e.preventDefault();
         const handleEl = e.currentTarget;
+        handleEl.classList.add('ws-resizer-active');
         let lastX = e.clientX;
         const move = (ev) => { const dx = ev.clientX - lastX; lastX = ev.clientX; wsResize(col, dx, false, handleEl); };
         const up = () => {
             document.removeEventListener('pointermove', move);
             document.removeEventListener('pointerup', up);
             document.body.style.cursor = '';
+            handleEl.classList.remove('ws-resizer-active');
             wsResize(col, 0, true, handleEl); // commit the settled width once
         };
         document.addEventListener('pointermove', move);

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

@@ -2,6 +2,21 @@
 html, body { margin: 0; padding: 0; }
 button, input, select, textarea { font: inherit; }
 
+/* Global reduced-motion safety net: catches any component transition/animation
+   that lacks its own per-file prefers-reduced-motion override (most components
+   already opt out locally; this is the backstop for the rest, e.g.
+   plugins-config.css, catalog-theme.css, sidebar-misc.css, row-print.css,
+   topbar.css, primitives.css, git-status.css, panel-row.css). Scroll-snap
+   carousels handle scroll-behavior themselves and are unaffected. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 .skip-link {
   --skip-link-preflight-translate-clear: -100%;
   position: absolute;
@@ -193,6 +208,13 @@ a.ds-link-accent, .ds-prose a {
   text-underline-offset: 4px;
   text-decoration-thickness: 2px;
 }
+/* Visited state was entirely absent -- a returning user had no way to tell an
+   already-read link from an unread one, the one link state browsers don't
+   fake for you. --purple-2 keeps it distinct from both the unvisited accent
+   and any hover/danger tone already in the palette. */
+a.ds-link-accent:visited, .ds-prose a:visited {
+  color: var(--purple-2);
+}
 a.ds-link-accent:hover, .ds-prose a:hover {
   background: var(--accent); color: var(--accent-fg); text-decoration-color: transparent;
 }

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

@@ -59,6 +59,7 @@
   text-transform: lowercase; letter-spacing: 0.02em; user-select: none;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
   position: relative;
+  box-shadow: inset 0 0 0 1px var(--rule);
 }
 .chat-msg:hover .chat-avatar { transform: scale(1.03); box-shadow: 0 1px 4px color-mix(in oklab, var(--fg) 6%, transparent); }
 .chat-msg.you .chat-avatar {
@@ -100,6 +101,13 @@
   min-width: 0;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
+/* Tail corner: the bubble edge nearest its own avatar (bottom-left for
+   'them', bottom-right for 'you') squares off slightly, matching bubble
+   position to the sender's avatar the way a speech-bubble tail would — a
+   consistent radius on all four corners reads as a generic card, not a
+   turn in a conversation. */
+.chat-msg:not(.you) .chat-bubble { border-bottom-left-radius: var(--r-0); }
+.chat-msg.you .chat-bubble { border-bottom-right-radius: var(--r-0); }
 .chat-msg:hover .chat-bubble { transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 6%, transparent); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
 /* Own bubble — calm tinted lead, not a full electric fill (chat stays readable). */
 .chat-msg.you .chat-bubble { background: var(--accent-tint); color: var(--fg); }
@@ -538,3 +546,160 @@
    fell back to the paper tone at 3.13:1 on ink. */
 .aicat-meta .name { color: var(--mascot-deep, var(--mascot)); font-weight: 600; }
 
+/* ============================================================
+   Composer attachment-detected badge, context line, hint, toolbar,
+   note strip, elapsed counter, dragover state — all referenced from
+   composer.js / composer-affordances.js but previously had no CSS at
+   all (unstyled DOM nodes / plain text falling through to block
+   defaults).
+   ============================================================ */
+.chat-composer-context {
+  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1);
+  width: 100%; order: -1;
+  padding: var(--space-1) var(--space-1) 0;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3);
+  letter-spacing: 0.01em;
+}
+button.chat-composer-context {
+  background: transparent; border: 0; cursor: pointer; text-align: left;
+  border-radius: var(--r-0);
+}
+button.chat-composer-context:hover { color: var(--fg-2); }
+button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+.chat-composer-context-sep { color: var(--fg-3); opacity: 0.6; }
+.chat-composer-context-bit {
+  background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
+  font: inherit; color: var(--fg-3); border-radius: var(--r-0);
+  transition: color var(--dur-snap, .15s) var(--ease, ease);
+}
+.chat-composer-context-bit:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
+.chat-composer-context-bit:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+.chat-composer-context-text { color: var(--fg-3); }
+
+.chat-composer-detected-badge {
+  display: flex; align-items: center; gap: var(--space-2);
+  width: 100%; order: -1;
+  padding: var(--space-1) var(--space-2-5);
+  margin: 0 0 var(--space-1);
+  background: color-mix(in oklab, var(--accent) 12%, var(--bg-2));
+  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
+  border-radius: var(--r-1);
+  font-size: var(--fs-xs); color: var(--fg);
+}
+.chat-composer-detected-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-composer-detected-dismiss {
+  flex-shrink: 0; width: 20px; height: 20px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: transparent; border: 0; cursor: pointer; border-radius: 50%;
+  color: var(--fg-3); font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1;
+  transition: background var(--dur-snap, .15s) var(--ease, ease), color var(--dur-snap, .15s) var(--ease, ease);
+}
+.chat-composer-detected-dismiss:hover { background: color-mix(in oklab, var(--fg) 10%, transparent); color: var(--fg); }
+.chat-composer-detected-dismiss:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+
+.chat-composer-hint {
+  width: 100%; order: 2;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3);
+  padding: 0 var(--space-1);
+}
+
+.chat-composer-toolbar {
+  display: flex; align-items: center; gap: var(--space-1);
+  flex-shrink: 0;
+}
+.chat-composer-toolbar .composer-btn {
+  width: 32px; height: 32px; border-radius: var(--r-1);
+}
+@media (pointer: coarse) {
+  .chat-composer-toolbar .composer-btn { width: 44px; height: 44px; }
+}
+
+.chat-composer-note {
+  width: 100%; order: 3;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3);
+  padding: var(--space-1) var(--space-1) 0;
+}
+
+.chat-composer-elapsed {
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3);
+  flex-shrink: 0; padding: 0 var(--space-1);
+}
+
+.chat-composer.dragover {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent);
+  background: color-mix(in oklab, var(--accent) 4%, var(--bg));
+}
+
+/* ============================================================
+   EmojiPicker (ov-emoji-*) — an anchored popover with search input,
+   category tabs, and an emoji grid; previously entirely unstyled.
+   Search input mirrors .ds-search-input's tonal-fill treatment so it
+   reads consistently with the rest of the system's search fields.
+   ============================================================ */
+.ov-emoji-root {
+  position: fixed;
+  display: flex; flex-direction: column; gap: var(--space-2);
+  width: 280px; max-height: 320px;
+  padding: var(--space-2-5);
+  background: var(--bg);
+  border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
+  border-radius: var(--r-2);
+  box-shadow: var(--shadow-overlay, var(--shadow-3));
+  z-index: var(--z-dropdown, var(--z-raised));
+}
+.ov-emoji-search {
+  width: 100%; box-sizing: border-box;
+  font: inherit; font-size: var(--fs-sm); color: var(--fg);
+  background: var(--bg-2); border: 0;
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule);
+  border-radius: var(--r-1);
+  height: var(--ctl-sm, 32px);
+  padding: 0 var(--space-2-5);
+  transition: box-shadow var(--dur-snap, .15s) var(--ease, ease);
+}
+.ov-emoji-search::placeholder { color: var(--fg-3); }
+.ov-emoji-search:focus-visible,
+.ov-emoji-search:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--accent), 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent);
+}
+.ov-emoji-tabs {
+  display: flex; gap: var(--space-1);
+  border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
+  padding-bottom: var(--space-1);
+}
+.ov-emoji-tab {
+  flex: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 30px; font-size: var(--fs-sm);
+  background: transparent; border: 0; border-radius: var(--r-1);
+  cursor: pointer;
+  transition: background var(--dur-snap, .15s) var(--ease, ease);
+}
+.ov-emoji-tab:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); }
+.ov-emoji-tab[aria-selected="true"] { background: color-mix(in oklab, var(--accent) 16%, transparent); }
+.ov-emoji-tab:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+.ov-emoji-grid { overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; }
+.ov-emoji-grid-inner {
+  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-1);
+}
+.ov-emoji-cell {
+  display: inline-flex; align-items: center; justify-content: center;
+  aspect-ratio: 1; font-size: var(--fs-lg); line-height: 1;
+  background: transparent; border: 0; border-radius: var(--r-1);
+  cursor: pointer;
+  transition: background var(--dur-snap, .15s) var(--ease, ease), transform 0.12s ease;
+}
+.ov-emoji-cell:hover { background: color-mix(in oklab, var(--fg) 10%, transparent); transform: scale(1.12); }
+.ov-emoji-cell:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; background: color-mix(in oklab, var(--fg) 10%, transparent); }
+.ov-emoji-empty {
+  grid-column: 1 / -1;
+  text-align: center; color: var(--fg-3); font-size: var(--fs-xs);
+  padding: var(--space-3) 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ov-emoji-cell { transition: background var(--dur-snap, .15s) var(--ease, ease); }
+  .ov-emoji-cell:hover { transform: none; }
+}
+

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

@@ -449,6 +449,13 @@
   border-radius: var(--r-3); background: var(--bg);
   transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
 }
+/* Idle hover: a quiet pre-drag affordance (border firms up, faint tint) so a
+   pointer resting over the zone reads as "droppable" before a drag even
+   starts — distinct from and weaker than the .dragover treatment below. */
+.ds-dropzone:hover {
+  border-color: var(--fg-3);
+  background: var(--bg-2);
+}
 .ds-dropzone-inner {
   display: flex; align-items: center; justify-content: center;
   gap: var(--space-2); flex-wrap: wrap;
@@ -457,6 +464,9 @@
 /* Icon size, not type — see .ds-file-cell-media .ds-file-icon above. */
 .ds-dropzone-glyph { font-size: var(--icon-lg, 24px); color: var(--fg-3); }
 .ds-dropzone-label { font-size: var(--fs-sm); color: var(--fg-3); }
+.ds-dropzone:not(.dragover):not(.rejected):hover {
+  border-color: var(--fg-3);
+}
 .ds-dropzone.dragover {
   border-color: var(--accent);
   background: var(--accent-tint);
@@ -470,6 +480,26 @@
   0%, 100% { border-color: var(--accent); }
   50% { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
 }
+/* Rejected — an in-flight drag carrying a disallowed payload (wrong type,
+   over the size cap). Distinct from dragover: warn tone, not accent, so the
+   two "something is happening" states never read as the same affordance. */
+.ds-dropzone.rejected {
+  border-color: var(--warn);
+  background: color-mix(in oklab, var(--warn) 10%, var(--bg));
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-dropzone.rejected { animation: ds-dropzone-shake 0.4s var(--ease); }
+}
+.ds-dropzone.rejected .ds-dropzone-glyph,
+.ds-dropzone.rejected .ds-dropzone-label { color: var(--warn); }
+@keyframes ds-dropzone-shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-3px); }
+  75% { transform: translateX(3px); }
+}
+.ds-dropzone--wrap.rejected > .ds-dropzone-inner {
+  outline-color: var(--warn);
+}
 /* Wrapper form (has children): no permanent chrome - the content renders as if
    the zone were not there, and the dashed affordance overlays it ONLY while a
    drag is in flight. */
@@ -577,6 +607,8 @@
            max(var(--space-3), env(safe-area-inset-bottom))
            max(var(--space-3), env(safe-area-inset-left));
   background: color-mix(in oklab, var(--ink) 55%, transparent);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
 }
 @media (prefers-reduced-motion: no-preference) {
   .ds-modal-backdrop { animation: ds-modal-fade var(--dur-base) var(--ease); }
@@ -651,10 +683,17 @@
    floor. --ink on the same fill measures 6.27:1. Same principle as the
    --accent/--accent-ink split the token layer documents: a light saturated fill
    takes the dark text tone. Measured in a live browser. */
+/* Severity is never color-alone (gd-14, color-blindness/grayscale-print safe):
+   the bold weight + widened letter-spacing is a shape cue that survives a
+   colorless render, matching how .btn-primary.danger differs from every
+   other .btn-primary at a glance even with color stripped out. */
 .btn-primary.danger {
   background: var(--warn);
   border-color: var(--warn);
   color: var(--ink);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) color-mix(in oklab, var(--ink) 25%, transparent);
+  font-weight: 700;
+  letter-spacing: 0.01em;
 }
 .btn-primary.danger:hover { filter: brightness(0.92); border-color: var(--warn); }
 

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

@@ -61,6 +61,12 @@
   padding-bottom: var(--space-2); border-bottom: var(--bw-hair) solid var(--bg-3);
 }
 .ds-hero-stat:last-child { border-bottom: 0; padding-bottom: 0; }
+/* HeroFromPageData's richer badge shape ({label, desc}) renders a strong
+   figure plus a muted descriptor inside the same .ds-hero-stat row — give
+   the pair a baseline-aligned inline layout instead of falling back to
+   unstyled default inline flow. */
+.ds-hero-stat-n { font-weight: 700; color: var(--fg); margin-right: var(--space-2); }
+.ds-hero-stat-l { color: var(--fg-3); font-size: var(--fs-xs); }
 .ds-hero-title {
   font-family: var(--ff-display); font-weight: 700;
   /* Bespoke display clamp, deliberately off the --fs-* ladder: --fs-hero is
@@ -173,6 +179,8 @@
   padding: var(--space-2) 0;
   font-family: var(--ff-display); font-weight: 600;
   text-transform: uppercase; letter-spacing: var(--tr-caps);
+  mask-image: linear-gradient(90deg, transparent 0, var(--fg) 28px, var(--fg) calc(100% - 28px), transparent 100%);
+  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--fg) 28px, var(--fg) calc(100% - 28px), transparent 100%);
 }
 .ds-marquee-track {
   display: inline-flex; gap: var(--space-5);
@@ -205,7 +213,7 @@
 .cli {
   display: flex; align-items: center; gap: 14px;
   overflow-x: auto;
-  padding: 20px 24px;
+  padding: var(--space-3-5) var(--space-4);
   background: var(--ink); color: var(--paper);
   border-radius: var(--r-3);
   font-family: var(--ff-mono); font-size: var(--fs-lg);
@@ -213,12 +221,13 @@
 .cli .prompt { color: var(--green-2); }
 .cli .cmd    { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--paper); }
 .cli .copy   {
-  padding: 8px 16px; background: transparent; color: var(--paper);
+  padding: var(--space-2) var(--space-3); background: transparent; color: var(--paper);
   font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tr-caps);
   cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule-strong);
   border-radius: var(--r-pill);
 }
 .cli .copy:hover { background: var(--fg-3); }
+.cli .copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* Multi-line CLI block: when .cli holds .ds-cli-row / .ds-cli-comment children
    (quickstart scripts, multi-command snippets — see CliBlock in
@@ -254,7 +263,7 @@
 .ds-quickstart-cli { flex-direction: column; align-items: stretch; gap: var(--space-2); }
 .ds-quickstart-copy {
   align-self: flex-end;
-  padding: 8px 16px; background: transparent; color: var(--paper);
+  padding: var(--space-2) var(--space-3); background: transparent; color: var(--paper);
   font-family: var(--ff-mono); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tr-caps);
   cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule-strong);
   border-radius: var(--r-pill); border: none;
@@ -450,7 +459,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   display: inline-flex; align-items: center; gap: var(--space-hair);
   font-size: var(--fs-xs); font-weight: 600;
 }
-.kpi-delta-up { color: var(--green); }
+.kpi-delta-up { color: var(--success); }
 .kpi-delta-down { color: var(--danger); }
 .ds-sparkline path { stroke: currentColor; }
 .ds-sparkline-up { color: var(--success); }

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

@@ -157,7 +157,17 @@
     aspect-ratio: auto;
   }
 }
-.ds-deck-slide { flex: 1; display: flex; min-width: 0; }
+.ds-deck-slide {
+  flex: 1; display: flex; min-width: 0;
+  animation: ds-deck-slide-in var(--dur-base) var(--ease);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-deck-slide { animation: none; }
+}
+@keyframes ds-deck-slide-in {
+  from { opacity: 0; transform: translateY(var(--space-1-75)); }
+  to { opacity: 1; transform: none; }
+}
 .ds-deck-controls {
   /* 14px sits between --space-2-75 (12) and --space-3 (16) with no tier; it is
      the deck control spacing tuned against the mono glyph run. */
@@ -168,6 +178,19 @@
 @media (pointer: coarse) {
   .ds-deck-controls .btn { min-height: 44px; min-width: 44px; }
 }
+/* Dot progress indicator: one dot per slide, current slide filled with
+   --accent (same fill token .ds-dot-on uses elsewhere in the system), rest
+   dim at --fg-3 so the row reads as a track, not a second counter. */
+.ds-deck-progress {
+  display: flex; align-items: center; justify-content: center;
+  gap: var(--space-1-5); padding-bottom: var(--space-2);
+}
+.ds-deck-dot {
+  width: var(--space-1-5); height: var(--space-1-5); border-radius: 50%;
+  background: var(--fg-3); flex: 0 0 auto;
+  transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
+}
+.ds-deck-dot--active { background: var(--accent); transform: scale(1.3); }
 /* Kit small-label voice — one local composition of the house `.t-label` recipe
    (base.css) for every eyebrow/label in the appended kit blocks below. These
    previously each restated the four declarations with drifted tracking
@@ -278,7 +301,12 @@
 }
 .ds-gallery-tile {
   cursor: pointer; display: flex; flex-direction: column; gap: var(--space-1-75);
-  padding: var(--space-2-75); border-radius: var(--r-1); min-height: clamp(120px, 18vw, 160px);
+  padding: var(--space-2-75); border-radius: var(--r-1);
+  /* Fixed aspect-ratio (not just a min-height floor) so every tile in the grid
+     occupies the same shape regardless of caption length — the ascii specimen
+     is centered inside via .ds-tile-cap's flex alignment, the equivalent of
+     object-fit: cover for a text tile with no bitmap to crop. */
+  aspect-ratio: 4 / 3;
   border: 0; text-align: left; font: inherit; color: inherit;
   background: var(--tile-tone, var(--panel-1));
   transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
@@ -288,7 +316,7 @@
    translateY + shadow idiom .chat-msg:hover .chat-bubble already uses. */
 .ds-gallery-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
 .ds-gallery-tile:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-.ds-gallery-tile--tight { min-height: clamp(96px, 14vw, 120px); }
+.ds-gallery-tile--tight { aspect-ratio: 3 / 2; }
 /* The lightbox scrim/card chrome itself is now Dialog's (.ds-ep-dialog /
    .ds-ep-dialog-backdrop in editor-primitives.css) — Dialog already ships
    role="dialog", aria-modal, Tab-trap and focus-restore-on-close, which the
@@ -312,13 +340,21 @@
 @media (max-width: 480px) {
   .ds-topbar-search { flex-basis: 100%; }
 }
-.ds-empty-state { padding: clamp(var(--space-3), 5vw, var(--space-4)); text-align: center; color: var(--panel-text-3); }
+/* Namespaced .ds-kit-empty-state (not .ds-empty-state) -- .ds-empty-state is
+   primitives.css's shared base (padding var(--space-6), color var(--fg-3));
+   this sheet loads after it in app-shell.css's import order, so reusing the
+   same class name silently overrode that base's padding/color for every
+   consumer, defeating the "shared base, one place" contract primitives.css
+   documents. This block is unused by any component today, but kept
+   namespaced so a future consumer gets this sheet's fluid clamp() treatment
+   deliberately rather than by cascade accident. */
+.ds-kit-empty-state { padding: clamp(var(--space-3), 5vw, var(--space-4)); text-align: center; color: var(--panel-text-3); }
 /* Fluid ICON size (empty-state mark), not a type tier: it scales with the
    viewport between 24 and 32px. Every fluid --fs-* tier is a heading clamp
    tuned to cqi + heading weight, so none of them substitutes here. */
-.ds-empty-state-glyph { font-size: clamp(24px, 6vw, 32px); }
-.ds-empty-state-msg { margin: var(--space-1-75) 0; }
-.ds-empty-state-hint { margin: 0; font-size: var(--fs-sm); }
+.ds-kit-empty-state-glyph { font-size: clamp(24px, 6vw, 32px); }
+.ds-kit-empty-state-msg { margin: var(--space-1-75) 0; }
+.ds-kit-empty-state-hint { margin: 0; font-size: var(--fs-sm); }
 
 /* --- system primer ------------------------------------------ */
 /* The three primer panels below share one fluid inset,
@@ -707,6 +743,7 @@
   border-radius: 50%; background: var(--bg-3); color: var(--fg);
   font-family: var(--ff-mono); font-weight: 600; text-transform: lowercase;
   letter-spacing: 0.02em; user-select: none; flex-shrink: 0; object-fit: cover;
+  box-shadow: inset 0 0 0 1px var(--rule);
 }
 .ds-avatar-sm { width: 24px; height: 24px; font-size: var(--fs-pico); }
 .ds-avatar-md { width: 36px; height: 36px; font-size: var(--fs-micro); }
@@ -834,6 +871,7 @@
   font-weight: 600;
   line-height: 1;
   user-select: none;
+  box-shadow: inset 0 0 0 1px var(--rule);
 }
 
 /* Body stack — name + time on one baseline, text beneath. .chat-stack's

package/src/css/app-shell/loading-alerts.css

@@ -55,9 +55,11 @@
 .ds-skeleton {
   background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
   background-size: 200% 100%;
-  animation: ds-shimmer 1.5s infinite;
   border-radius: var(--r-1);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .ds-skeleton { animation: ds-shimmer 1.5s infinite; }
+}
 
 @keyframes ds-shimmer {
   0% { background-position: 200% 0; }

package/src/css/app-shell/panel-row.css

@@ -59,9 +59,19 @@
   font-size: var(--fs-tiny); font-weight: 600;
   color: var(--fg-3);
   letter-spacing: var(--tr-caps); text-transform: uppercase;
+  /* A hairline divider is the header's only structural separator from the
+     body — without it, an uppercase caps label at fs-tiny/600 reads as just
+     another dim meta line once the eye drops past the top of the panel. */
+  border-bottom: var(--bw-hair) solid var(--rule);
+  margin-bottom: var(--space-1);
 }
 .panel.panel-wide .panel-head { padding-left: 0; padding-right: 0; }
-.panel-head > :last-child {
+/* A borderless .panel-wide (no card edge to lean on) would otherwise show a
+   divider floating with nothing to visually anchor it — drop it there and
+   rely on spacing alone, matching panel-wide's already-transparent chrome. */
+.panel.panel-wide .panel-head { border-bottom: none; margin-bottom: 0; }
+.panel.panel--dense .panel-head { border-bottom: var(--bw-hair) solid var(--rule); margin-bottom: 0; }
+.panel-head > :last-child:not(.ds-badge) {
   font-weight: 500; color: var(--fg-3);
   font-family: var(--ff-mono); letter-spacing: 0;
 }

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

@@ -65,6 +65,10 @@
 .ds-icon-btn-base { width: 32px; height: 32px; }
 .ds-icon-btn-lg { width: 40px; height: 40px; }
 .ds-icon-btn-xl { width: 48px; height: 48px; }
+@media (pointer: coarse) {
+  .ds-icon-btn-xs { width: 32px; height: 32px; }
+  .ds-icon-btn-sm { width: 32px; height: 32px; }
+}
 .ds-icon-btn-ghost { background: transparent; }
 .ds-icon-btn-ghost:hover { background: var(--fg); color: var(--bg); }
 .ds-icon-btn-primary { background: var(--accent); color: var(--accent-fg); }
@@ -86,7 +90,11 @@
   border-radius: var(--r-pill);
   background: var(--bg-3); color: var(--fg-2);
 }
-.ds-badge.ds-badge--sm { min-width: var(--icon-xs); height: var(--icon-xs); padding: 0 var(--space-1); font-size: var(--fs-pico); }
+/* --fs-nano (11px), not --fs-pico (10px): --fs-pico sits below the 11px
+   legibility floor other small-scale labels in this system respect (see
+   .ds-stat-lbl, .ds-session-row-id), and this size is used live for the
+   workspace rail item-count badge (atoms.js Badge size="sm"). */
+.ds-badge.ds-badge--sm { min-width: var(--icon-xs); height: var(--icon-xs); padding: 0 var(--space-1); font-size: var(--fs-nano); }
 .ds-badge.ds-badge--lg { min-width: 22px; height: 22px; padding: 0 var(--space-2); font-size: var(--fs-tiny); }
 .ds-badge.tone-green, .ds-badge.tone-live, .ds-badge.tone-success {
   background: var(--green-tint); color: var(--green-deep);
@@ -143,7 +151,6 @@
 .chip.tone-disabled { background: var(--bg-3);        color: var(--fg-3); }
 .chip.tone-blue     { background: var(--accent-tint); color: var(--accent-ink); }
 .chip.tone-orange   { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
-.chip.tone-yellow   { background: var(--sun);         color: var(--ink); }
 
 .chip.ds-chip-removable { padding-right: var(--space-1); }
 .ds-chip-remove-btn {
@@ -183,6 +190,7 @@
 }
 .glyph { --glyph-size-sm: var(--fs-nano); --glyph-size-base: var(--fs-tiny); --glyph-size-lg: var(--fs-body); }
 .glyph-sm { width: var(--icon-xs); height: var(--icon-xs); }
+.glyph-base { width: 18px; height: 18px; }
 .glyph-lg { width: 22px; height: 22px; }
 
 /* Shared empty-state base -- hero-content.css's .empty and community.css's
@@ -201,3 +209,41 @@
 .ds-empty-state--panel { background: var(--bg-2); border-radius: var(--r-1); }
 .ds-empty-state--compact { padding: var(--space-5) var(--space-3); }
 
+/* .ds-tooltip — shared floating bubble (overlay-primitives/tooltip.js appends
+   one instance to <body> and repositions it via useFloating). Fade timing
+   matches the component's own 350ms hover-intent delay. */
+.ds-tooltip {
+  position: fixed;
+  z-index: var(--z-top);
+  max-width: 240px;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--r-1);
+  background: var(--fg);
+  color: var(--bg);
+  font-size: var(--fs-xs);
+  line-height: 1.35;
+  box-shadow: var(--shadow-2);
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.96);
+  transition: opacity var(--dur-snap) var(--ease), transform var(--dur-snap) var(--ease);
+}
+.ds-tooltip:not([hidden]) { opacity: 1; transform: scale(1); }
+.ds-tooltip::after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: var(--fg);
+  transform: rotate(45deg);
+}
+.ds-tooltip[data-placement^="top"]::after    { bottom: -3px; left: 50%; margin-left: -3px; }
+.ds-tooltip[data-placement^="bottom"]::after { top: -3px; left: 50%; margin-left: -3px; }
+.ds-tooltip[data-placement^="left"]::after   { right: -3px; top: 50%; margin-top: -3px; }
+.ds-tooltip[data-placement^="right"]::after  { left: -3px; top: 50%; margin-top: -3px; }
+.ds-tooltip.kind-danger { background: var(--warn); color: var(--ink); }
+.ds-tooltip.kind-danger::after { background: var(--warn); }
+@media (prefers-reduced-motion: reduce) {
+  .ds-tooltip { transition: none; }
+}
+