anentrypoint-design 1.0.10 → 1.0.12

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

@@ -80,7 +80,23 @@ body.canvas-host { background: transparent !important; }
 .app-topbar > .brand { flex: 0 0 auto; }
 .app-topbar > .app-search { flex: 1 1 auto; }
 .app-topbar > nav { margin-left: auto; }
-.app-topbar > .app-topbar-theme { flex: 0 0 auto; }
+/* Utility cluster grouping: the theme toggle sits after the repo-info nav
+   links with no visual separation between the two groups, so the row read
+   as one undifferentiated strip of controls. A thin inset rule plus extra
+   left gap reads as "these are a distinct utility group", matching the
+   subtle divider already used between .app-status segments. */
+.app-topbar > .app-topbar-theme {
+  flex: 0 0 auto;
+  margin-left: var(--space-2);
+  padding-left: var(--space-3);
+  position: relative;
+}
+.app-topbar > .app-topbar-theme::before {
+  content: ''; position: absolute; left: 0; top: 50%;
+  transform: translateY(-50%);
+  width: 1px; height: 18px;
+  background: var(--rule-strong);
+}
 .app-topbar nav { display: flex; gap: var(--space-1); font-size: var(--fs-sm); flex-wrap: wrap; }
 .app-topbar nav a { flex: 0 0 auto; }
 .app-topbar nav a {
@@ -171,6 +187,15 @@ body.canvas-host { background: transparent !important; }
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   min-width: 0; flex: 0 1 auto;
 }
+/* Ancestor trail segments previously had no rule of their own and simply
+   inherited .app-crumb's base --fg-3 — the same tone the separators sit on
+   top of (before their own 0.5 opacity dims them further). That leaves only
+   two visually distinct tiers in practice (dim separator, bold leaf) rather
+   than three, since the ancestor tone reads as "default text colour", not a
+   deliberate middle step. --fg-3 is the crumb bar's OWN base, so explicitly
+   restating it here is the anchor for the 3-tier read: separator (--fg-3 at
+   0.5 opacity, dimmest) < ancestor (--fg-3, mid) < leaf (--fg bold, brightest). */
+.app-crumb > span:not(.sep):not(.leaf):not(.crumb-right) { color: var(--fg-3); }
 .app-crumb .leaf { color: var(--fg); font-weight: 600; flex: 0 1 auto; }
 .app-crumb .crumb-right { margin-left: auto; color: var(--fg-3); flex: 0 0 auto; }
 
@@ -189,6 +214,15 @@ body.canvas-host { background: transparent !important; }
 .app-side-shell {
   background: var(--bg); overflow-y: auto; min-height: 0;
   scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
+  /* Bottom-edge fade: a rail longer than the viewport otherwise shows only
+     the thin scrollbar track as its sole "there is more below" cue. Mirrors
+     the horizontal fade already used by .os-instances (src/kits/os/theme.css)
+     for its own overflow edge, oriented top-to-bottom for this vertical
+     scroller. The top edge stays fully opaque (rows start flush under the
+     topbar with no need to hint upward scroll on initial load); only the
+     trailing 24px softens toward transparent. */
+  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
+  mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
 }
 .app-side-shell::-webkit-scrollbar { width: 8px; }
 .app-side-shell::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: var(--r-pill, 999px); }

package/src/kits/os/freddie/pages-core.js

@@ -44,6 +44,16 @@ export function makeCorePages(ctx) {
             const tools = h0.pi.tools.size;
             const skills = h0.pi.skills.size;
             const health = (typeof h0.pi.health === 'function') ? h0.pi.health() : { ok: true };
+            // Epoch-ms fields (ts, or any *At/*Time-suffixed key) render as raw
+            // 13-digit numbers otherwise -- unreadable and gives no sense of
+            // recency. Format as a locale timestamp; anything that doesn't
+            // parse as a plausible epoch-ms value falls through to String(v)
+            // unchanged so this never mangles a genuine small integer.
+            const isEpochMsKey = (k) => k === 'ts' || /(At|Time)$/.test(k);
+            const fmtHealthValue = (k, v) => {
+                if (isEpochMsKey(k) && typeof v === 'number' && v > 1e12) return new Date(v).toLocaleString();
+                return String(v);
+            };
             return [
                 Hero({ title: 'assistant', body: 'open js agent harness — in-page agent runtime.', accent: h0.version || 'web' }),
                 Kpi({ items: [[sessions.length, 'sessions'], [tools, 'tools'], [skills, 'skills']] }),
@@ -55,7 +65,7 @@ export function makeCorePages(ctx) {
                     ['set api key', 'keys tab -> click chip to set value'],
                     ['add cron',    'cron tab -> form'],
                 ] }) }),
-                Panel({ title: 'host', children: Receipt({ rows: Object.entries(health).map(([k, v]) => [k, String(v)]) }) }),
+                Panel({ title: 'host', children: Receipt({ rows: Object.entries(health).map(([k, v]) => [k, fmtHealthValue(k, v)]) }) }),
             ];
         },
         async sessions(h0) {
@@ -79,7 +89,7 @@ export function makeCorePages(ctx) {
                 Kpi({ items: [[list.length, 'sessions']] }),
                 Panel({ title: 'recent sessions', count: list.length, children: list.length === 0
                     ? EmptyState({ text: 'no sessions yet — open chat and send a message', glyph: Icon('thread') })
-                    : Table({ headers: ['id', 'title', 'platform', 'model', 'cwd', 'skill', ''], rows }) }),
+                    : Table({ headers: ['id', 'title', 'platform', 'model', 'cwd', 'skill', ''], striped: true, rows }) }),
             ];
         },
         async agents(h0) {
@@ -88,7 +98,7 @@ export function makeCorePages(ctx) {
                 Kpi({ items: [[a.count || 0, 'active'], [a.turns || 0, 'turns']] }),
                 Panel({ title: 'agent overview', children: Receipt({ rows: [
                     ['total turns', String(a.turns || 0)],
-                    ['active session', a.active || '(none)'],
+                    ['active session', a.active || '—'],
                     ['last activity', a.last_activity ? new Date(a.last_activity).toLocaleString() : '—'],
                 ] }) }),
             ];

package/src/kits/os/freddie/pages-os.js

@@ -14,7 +14,7 @@ export function makeOsPages(ctx) {
                 Kpi({ items: [[list.length, 'instances'], [activeId || '—', 'active']] }),
                 Panel({ title: 'instances', count: list.length, children: list.length === 0
                     ? EmptyState({ text: 'no instances', glyph: Icon('square') })
-                    : Table({ headers: ['id', 'active', 'shells', 'windows'],
+                    : Table({ headers: ['id', 'active', 'shells', 'windows'], striped: true,
                         rows: list.map(i => [i.id, i.id === activeId ? Icon('circle') : '', String((i.shells || []).length), String((i.windows || []).length)]) }) }),
             ];
         },
@@ -25,7 +25,7 @@ export function makeOsPages(ctx) {
                 Kpi({ items: [[wins.length, 'windows'], [focused ? (focused.id || focused.title || '?') : '—', 'focused']] }),
                 Panel({ title: 'windows', count: wins.length, children: wins.length === 0
                     ? EmptyState({ text: 'no windows open', glyph: Icon('square') })
-                    : Table({ headers: ['id', 'title', 'min', 'max', 'pos'],
+                    : Table({ headers: ['id', 'title', 'min', 'max', 'pos'], striped: true,
                         rows: wins.map(w => [w.id || '?', w.title || '', w.min ? Icon('circle') : '', w.max ? Icon('circle') : '',
                             (w.el ? `${w.el.offsetLeft},${w.el.offsetTop} ${w.el.offsetWidth}×${w.el.offsetHeight}` : '')]) }) }),
             ];

package/src/kits/os/freddie-dashboard.js

@@ -19,6 +19,13 @@ export function createFreddieDashboard({ instance, bootHost, osSurfaces, loading
     const state = { active: 'home', ts: new Date().toLocaleTimeString(), body: null, error: null };
     let host = instance.host || null;
     const allRoutes = osSurfaces ? [...ROUTES, ...OS_ROUTE_DEFS] : ROUTES;
+    // Bumped on every setActive() and captured by loadActive() before its
+    // first await; a resolving page whose generation no longer matches the
+    // live one is a stale in-flight nav (user clicked a second page before
+    // the first's async page() resolved) and must not overwrite state.body —
+    // otherwise the crumb/side (synchronous) shows the new page while the
+    // main content silently keeps whichever page happened to resolve last.
+    let navGeneration = 0;
 
     async function ensureHost() {
         if (host) return host;
@@ -27,7 +34,7 @@ export function createFreddieDashboard({ instance, bootHost, osSurfaces, loading
         return host;
     }
 
-    function setActive(p) { state.active = p; rerender(); }
+    function setActive(p) { state.active = p; navGeneration++; rerender(); }
     if (typeof window !== 'undefined') window.__fd_nav = setActive;
 
     function rerender() { webjsx.applyDiff(root, view()); loadActive(); }
@@ -72,15 +79,19 @@ export function createFreddieDashboard({ instance, bootHost, osSurfaces, loading
     }
 
     async function loadActive() {
+        const myGeneration = navGeneration;
+        let body, error = null;
         try {
             const h0 = await ensureHost();
             const page = PAGES[state.active] || PAGES.home;
-            state.body = await page(h0, instance);
-            state.error = null;
+            body = await page(h0, instance);
         } catch (e) {
-            state.error = String(e && e.stack || e);
-            state.body = Panel({ title: 'error', children: pre(state.error) });
+            error = String(e && e.stack || e);
+            body = Panel({ title: 'error', children: pre(error) });
         }
+        if (myGeneration !== navGeneration) return; // superseded by a later nav click
+        state.body = body;
+        state.error = error;
         state.ts = new Date().toLocaleTimeString();
         webjsx.applyDiff(root, view());
     }

package/src/kits/os/theme.css

@@ -105,12 +105,24 @@ html, body {
  * (barely above the base tone, no imagery/texture asset to fetch or theme)
  * gives the desktop depth without competing with window chrome — scoped to
  * .ds-247420 .wm-root specifically (the actual desktop viewport BEHIND
- * windows), not the page background used by bare/non-OS surfaces. */
+ * windows), not the page background used by bare/non-OS surfaces.
+ * A faint repeating dot-grid is layered on top of the wash: the radial wash
+ * alone reads as a barely-perceptible tint over a large empty area (the
+ * reported "huge empty dark canvas" below a single default window), while a
+ * grid of low-opacity dots gives the eye actual anchor points across that
+ * space without competing with window chrome or requiring an image asset. */
 .ds-247420 .wm-root {
-    background:
+    /* Split into background-image/-color longhands, NOT the `background`
+       shorthand: some engines fail to parse a multi-layer gradient list
+       shorthand-form when any layer's color-stop uses color-mix() — the
+       whole declaration is dropped and the canvas silently renders flat.
+       The longhand form parses these same layers correctly. */
+    background-image:
+        radial-gradient(circle, color-mix(in oklab, var(--os-fg) 6%, transparent) 1px, transparent 1px),
         radial-gradient(ellipse 120% 80% at 20% -10%, color-mix(in oklab, var(--os-accent) 6%, transparent), transparent 60%),
-        radial-gradient(ellipse 100% 70% at 100% 100%, color-mix(in oklab, var(--os-accent) 4%, transparent), transparent 55%),
-        var(--os-bg-0);
+        radial-gradient(ellipse 100% 70% at 100% 100%, color-mix(in oklab, var(--os-accent) 4%, transparent), transparent 55%);
+    background-color: var(--os-bg-0);
+    background-size: 28px 28px, auto, auto;
 }
 @media (prefers-reduced-transparency: reduce) {
     .ds-247420 .wm-root { background: var(--os-bg-0); }
@@ -354,7 +366,65 @@ html, body {
     border-radius: var(--radius-lg, var(--r-3));
     box-shadow: var(--shadow-2);
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    /* Open/maximize/restore transitions: transform+opacity are interpolable
+     * (unlike wm-min's `display:none`, which cannot transition at all — a
+     * real minimize/restore animation needs wm.js to defer the display swap
+     * until this transition ends, tracked as its own follow-up). A freshly
+     * mounted .wm-win starts from CSS-animation-in via @starting-style so it
+     * scales/fades into place instead of snapping to full size, and every
+     * maximize/restore toggle (a real geometry change, not a display swap)
+     * eases instead of jumping. */
+    transition: opacity 160ms ease, transform 160ms cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 160ms ease;
+}
+@supports (transition-behavior: allow-discrete) {
+  .ds-247420 .wm-win {
+    transition: opacity 160ms ease, transform 160ms cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 160ms ease;
+    @starting-style {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .wm-win { transition: none; }
+}
+
+/* Minimize/restore/close: wm.js's animateMinimize()/animateClose() (wm.js)
+ * apply these classes BEFORE the real wm-min toggle / el.remove(), holding
+ * them for exactly the duration below so the display:none / DOM-removal
+ * that neither CSS nor `transition` can animate happens only after the
+ * visual scale+fade has actually played out. Direction: minimize collapses
+ * toward the taskbar (down+shrink); close shrinks in place; restore is the
+ * minimize keyframe in reverse. Not scoped to .ds-247420 -- these classes
+ * are always renderWindow()-authored, own their state fully. */
+.wm-win.wm-minimizing {
+  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.4, 0, 1, 1);
+  opacity: 0;
+  transform: scale(0.85) translateY(24px);
+  pointer-events: none;
+}
+.wm-win.wm-restoring {
+  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.3, 1);
+  animation: wm-restore-in 200ms cubic-bezier(0.2, 0.8, 0.3, 1);
+}
+@keyframes wm-restore-in {
+  from { opacity: 0; transform: scale(0.85) translateY(24px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
 }
+.wm-win.wm-closing {
+  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.4, 0, 1, 1);
+  opacity: 0;
+  transform: scale(0.92);
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wm-win.wm-minimizing, .wm-win.wm-restoring, .wm-win.wm-closing {
+    transition: none; animation: none; opacity: 1; transform: none;
+  }
+}
+
 .ds-247420 .wm-win.wm-focused {
     border-color: color-mix(in oklab, var(--os-fg) 28%, transparent);
     box-shadow: inset var(--space-1) 0 0 var(--os-accent), var(--shadow-3);
@@ -364,6 +434,8 @@ html, body {
     background: var(--os-bg-2);
     border: none;
     padding: var(--space-2) var(--space-2-75);
+    display: flex;
+    align-items: center;
     gap: var(--space-2-5);
     transition: background 120ms ease;
 }
@@ -380,7 +452,12 @@ html, body {
     letter-spacing: 0.005em;
     text-align: center;
     font-weight: 600;
-    opacity: 0.65;
+    /* 0.72, not 0.65: measured live against the unfocused titlebar's actual
+     * background (rgb(77,77,82)) the opacity-blended effective contrast at
+     * 0.65 was 4.25:1 -- below WCAG AA's 4.5:1 floor for normal text. 0.72
+     * clears it with margin (~4.8:1) while staying visually dimmer than the
+     * focused window's full-opacity title. */
+    opacity: 0.72;
     transition: opacity 120ms ease;
     /* No text-transform here: the titlebar renders the window's own dynamic
      * title (renderWindow({title}) / setTitle(t) in wm.js) — a user- or
@@ -442,7 +519,12 @@ html, body {
         linear-gradient(135deg, transparent 0 45%, currentColor 45% 55%, transparent 55% 100%),
         linear-gradient(135deg, transparent 0 70%, currentColor 70% 80%, transparent 80% 100%);
 }
-.ds-247420 .wm-body { background: var(--os-bg-1); }
+.ds-247420 .wm-body {
+    background: var(--os-bg-1);
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+}
 
 .os-side-rail {
     position: fixed;
@@ -593,6 +675,18 @@ html, body {
 .app-frame { width: 100%; height: 100%; border: 0; background: var(--os-bg-0); }
 .app-iframe { width: 100%; height: 100%; border: 0; display: block; }
 .app-iframe.web { background: #ffffff; } /* intentional: white canvas for embedded external web content that expects white */
+/* Browser-pane empty state (about:blank): a bare framed iframe with no
+ * content is a large dead rectangle -- this placeholder fills that space
+ * with a real affordance until a navigation lands. Hidden the instant the
+ * pane's own url stops being about:blank (docs/browser-pane.js). */
+.bp-empty {
+  width: 100%; height: 100%;
+  display: flex; align-items: center; justify-content: center;
+  color: var(--os-fg-3);
+  font: var(--fs-sm) var(--os-font);
+  background: var(--os-bg-1);
+  text-align: center;
+}
 .app-text-cursor { }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -936,7 +1030,11 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .tb-sess-badge {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 16px; height: 14px; padding: 0 var(--space-1);
-  border-radius: var(--radius-sm, var(--r-0));
+  /* A neutral window-COUNT chip, not a notification/alert badge -- a small
+   * corner radius (--r-0, 4px) reads as a rectangular count pill, distinct
+   * from the fully-round .tb-sess-dot presence indicator elsewhere in this
+   * chip, so the two don't get visually conflated. */
+  border-radius: var(--r-0);
   background: color-mix(in oklab, var(--fg) 14%, transparent);
   font-size: var(--fs-pico); font-weight: 600; line-height: 1;
 }
@@ -1071,6 +1169,10 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .tb-sessions-card-actions { display: flex; gap: var(--space-1-75); margin-top: var(--space-1); }
 .ds-247420 .tb-sessions-card-actions button { flex: 1; height: 24px; font-size: var(--fs-nano); padding: 0 var(--space-2); border-radius: var(--radius-sm, var(--r-0)); border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); background: transparent; color: inherit; cursor: pointer; font-family: inherit; }
 .ds-247420 .tb-sessions-card-actions button:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
+/* Baseline (non-hover) danger tint so the destructive action reads as
+ * distinct at rest, not only on hover -- otherwise Delete is visually
+ * identical to Active/Export until the pointer happens to land on it. */
+.ds-247420 .tb-sessions-card-actions button.danger { color: var(--color-danger); border-color: color-mix(in oklab, var(--color-danger) 40%, transparent); }
 .ds-247420 .tb-sessions-card-actions button.danger:hover { background: var(--color-danger); color: var(--on-color); border-color: var(--color-danger); }
 .ds-247420 .tb-sessions-empty-mid { padding: 40px; text-align: center; opacity: 0.6; font-size: var(--fs-tiny); }
 

package/src/kits/os/wm.js

@@ -226,11 +226,11 @@ export function renderWindow(opts = {}) {
         },
         setFocused(v) { applyFocused(el, v); },
         setMaximized(v) { applyMaximized(el, v); },
-        setMinimized(v) { applyMinimized(el, v); },
+        setMinimized(v) { animateMinimize(el, v); },
         setInstanceId(id) { if (id) el.dataset.instanceId = id; else delete el.dataset.instanceId; },
         setZIndex(z) { el.style.zIndex = String(z); },
         getBounds() { return { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight }; },
-        dispose() { if (closeArmTimer) clearTimeout(closeArmTimer); el.remove(); },
+        dispose() { if (closeArmTimer) clearTimeout(closeArmTimer); animateClose(el); },
     };
 }
 
@@ -252,3 +252,42 @@ function setBodyContent(host, body) {
 function applyFocused(el, v) { el.classList.toggle('wm-focused', !!v); }
 function applyMaximized(el, v) { el.classList.toggle('wm-max', !!v); }
 function applyMinimized(el, v) { el.classList.toggle('wm-min', !!v); }
+
+function reducedMotion() {
+    return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+// wm.css's `.wm-win.wm-min{display:none}` cannot be CSS-transitioned (display
+// has no interpolable intermediate value), so a real minimize animation needs
+// the display swap deferred until a scale+fade transition actually finishes.
+// `.wm-minimizing`/`.wm-restoring` (theme.css) carry the transform+opacity
+// keyframes; this only sequences when `wm-min` itself flips. 220ms fallback
+// timer guards against a transitionend that never fires (element removed
+// mid-transition, browser tab backgrounded and rAF/transitions paused, etc.)
+// so a window can never get stuck invisible-but-not-display:none.
+function animateMinimize(el, v) {
+    if (reducedMotion()) { applyMinimized(el, v); return; }
+    if (v) {
+        el.classList.add('wm-minimizing');
+        const done = () => { el.classList.remove('wm-minimizing'); applyMinimized(el, true); };
+        el.addEventListener('transitionend', done, { once: true });
+        setTimeout(done, 220);
+    } else {
+        applyMinimized(el, false);
+        el.classList.add('wm-restoring');
+        setTimeout(() => el.classList.remove('wm-restoring'), 220);
+    }
+}
+
+// Same display-can't-transition problem as minimize, but for the terminal
+// close path: el.remove() used to happen synchronously, so a window vanished
+// instantly with no close animation at all (the literal gap named in the
+// "no animation on open/close" request). Fade+scale out, then remove.
+function animateClose(el) {
+    if (!el.isConnected) return;
+    if (reducedMotion()) { el.remove(); return; }
+    el.classList.add('wm-closing');
+    const done = () => el.remove();
+    el.addEventListener('transitionend', done, { once: true });
+    setTimeout(done, 220);
+}

package/src/page-html/client-script.js

@@ -35,9 +35,15 @@ function heroNode(hero) {
       hero.body || hero.subheading,
       hero.accent ? h('span', { class: 'ds-hero-accent' }, ' ' + hero.accent) : null,
     ) : null,
+    // Every hero CTA is a plain <a href> that navigates away from this page
+    // (GitHub, the portfolio site, ...), never an in-page action -- so the
+    // trailing arrow is appended here once, at the render layer, rather than
+    // hand-typed per label in content yaml where it could drift out of sync
+    // with the "navigates away = arrow" rule used elsewhere (row ctas,
+    // signin's in-page submit buttons).
     Array.isArray(hero.ctas) && hero.ctas.length
       ? h('div', { class: 'ds-hero-actions' }, ...hero.ctas.map((c, i) =>
-          h('a', { key: i, class: i === 0 ? 'btn btn-accent' : 'btn btn-ghost', href: c.href || '#' }, c.label || c.cta || 'go')))
+          h('a', { key: i, class: i === 0 ? 'btn btn-accent' : 'btn btn-ghost', href: c.href || '#' }, (c.label || c.cta || 'go') + ' ->')))
       : null,
     badgeRow,
   );
@@ -56,8 +62,18 @@ function showcaseNode(showcase) {
     C.Btn({ key: 'b1', variant: 'primary', children: 'Primary' }),
     C.Btn({ key: 'b2', variant: 'default', children: 'Default' }),
     C.Btn({ key: 'b3', variant: 'ghost', children: 'Ghost' }),
-    C.Btn({ key: 'b4', variant: 'danger', children: 'Danger' }),
+    // .ds-showcase-btn-danger-group gives Danger its own visually separated
+    // cluster (extra leading gap + a hairline divider) instead of sitting in
+    // the same uniform-gap row as Primary -- two similarly-weighted filled
+    // buttons side by side otherwise compete for "the one action to take"
+    // with nothing marking Danger as the deliberately-set-apart one.
+    h('span', { key: 'b4-group', class: 'ds-showcase-btn-danger-group' },
+      C.Btn({ key: 'b4', variant: 'danger', children: 'Danger' })),
   );
+  // Hue documents STATUS, not decoration: green = shipping/live, blue = pre-
+  // release/in-flux, purple = newly added. Badge (not a bespoke pill) carries
+  // the '0 violations' count so every status indicator in this row is one of
+  // the two real chip-family components, never a one-off styled span.
   const chipRow = h('div', { class: 'ds-showcase-row' },
     C.Chip({ key: 'c1', tone: 'green', children: 'Live' }),
     C.Chip({ key: 'c2', tone: 'blue', children: 'Beta' }),

package/src/page-html/page-styles.js

@@ -106,6 +106,16 @@ a.row:hover .ds-row-arrow { opacity: 1 }
   letter-spacing: 0.06em; color: var(--fg-3, #6b6b6b);
 }
 .ds-showcase-row { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); align-items: center; }
+/* Sets Danger apart from Primary/Default/Ghost in the button showcase row: an
+   extra left margin beyond the row's own gap, plus a hairline divider, so a
+   danger action never reads as just one more same-weight choice beside the
+   primary action. */
+.ds-showcase-btn-danger-group {
+  display: inline-flex; align-items: center;
+  margin-left: var(--space-3, 16px);
+  padding-left: var(--space-3, 16px);
+  border-left: 1px solid var(--rule, rgba(0,0,0,.12));
+}
 /* Card-grid layout (panel.layout === 'cards'): a browsable gallery of tiles
    instead of a dense text-row list, opt-in per panel via home.yaml's
    kits.layout: cards. */

package/types/components.d.ts

@@ -267,7 +267,7 @@ export declare function Lede(props?: LedeProps): VNode;
  */
 export interface DotProps {
     /** @default 'on' */
-    tone?: 'on' | 'live' | (string & {});
+    tone?: 'on' | 'live' | 'warn' | (string & {});
 }
 export declare function Dot(props?: DotProps): VNode;