anentrypoint-design 1.0.19 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "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/agent-chat/empty-state.js

@@ -39,9 +39,14 @@ export function AgentEmptyState({ name, selectedAgent, suggestions, onSuggestion
                     'aria-label': 'copy install command for ' + c.agent, title: 'copy command',
                     onclick: (e) => {
                       const btn = e.currentTarget;
-                      navigator.clipboard && navigator.clipboard.writeText(c.command);
-                      btn.textContent = 'copied';
-                      setTimeout(() => { btn.textContent = 'copy'; }, 1200);
+                      const done = () => { btn.textContent = 'copied'; setTimeout(() => { btn.textContent = 'copy'; }, 1200); };
+                      // Falls back whenever the async Clipboard API is
+                      // absent OR its promise rejects (permission denied,
+                      // an unfocused document) instead of optimistically
+                      // claiming "copied" before the write is confirmed.
+                      const fallback = () => { try { const t = document.createElement('textarea'); t.value = c.command; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch { /* swallow: no copy mechanism available */ } };
+                      if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(c.command).then(done, fallback);
+                      else fallback();
                     },
                   }, 'copy'))))
             : null,

package/src/components/chat-message-parts/inline.js

@@ -56,14 +56,27 @@ export function fileIconName(name) {
 // this extraction. Same behavior in every caller: try the async Clipboard
 // API, fall back to a hidden textarea + execCommand('copy') when unavailable,
 // flip the trigger button's own label/class to "copied" for ~1.6s either way.
+function execCommandCopy(text) {
+    const t = document.createElement('textarea');
+    t.value = text; document.body.appendChild(t); t.select();
+    document.execCommand('copy'); document.body.removeChild(t);
+}
 export function copyToClipboardWithFeedback(text, btn) {
     const done = () => {
         btn.textContent = 'copied';
         btn.classList.add('is-copied');
         setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('is-copied'); }, 1600);
     };
-    if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).then(done).catch(() => {});
-    else { try { const t = document.createElement('textarea'); t.value = text; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch { /* swallow: legacy execCommand copy fallback unsupported, nothing more to try */ } }
+    // Falls back to execCommand whenever the async Clipboard API is either
+    // absent OR its promise rejects (permission denied, an unfocused
+    // document -- a real failure mode, not just an old-browser one). The
+    // prior version only fell back when navigator.clipboard didn't exist at
+    // all, so a live rejection silently did nothing -- no feedback, no copy.
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(done, () => { try { execCommandCopy(text); done(); } catch { /* swallow: no copy mechanism available */ } });
+    } else {
+        try { execCommandCopy(text); done(); } catch { /* swallow: no copy mechanism available */ }
+    }
 }
 
 // Inject a per-block copy button into every <pre> inside a rendered-markdown

package/src/components/content/lists.js

@@ -31,7 +31,7 @@ export function WorksList({ works = [], openedIndex = -1, onToggle }) {
                         h('p', { class: 'ds-work-body' }, w.body)
                     ),
                     h('div', { class: 'ds-work-actions' },
-                        Btn({ variant: 'primary', href: w.href || '#', children: 'open ->' }),
+                        Btn({ variant: 'primary', href: w.href || '#', 'aria-label': 'open ' + (w.title || 'project'), children: 'open ->' }),
                         Btn({ href: w.source || '#', children: 'source' })
                     )
                 ) : null

package/src/components/editor-primitives/json-viewer.js

@@ -90,11 +90,12 @@ function jsonCopyButton(text) {
                 btn.classList.toggle('copied', ok);
                 setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('copied'); }, 1200);
             };
-            try {
-                navigator.clipboard.writeText(text).then(() => show('copied', true), () => show('failed', false));
-            } catch {
-                show('failed', false);
-            }
+            const fallback = () => {
+                try { const t = document.createElement('textarea'); t.value = text; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); show('copied', true); }
+                catch { show('failed', false); }
+            };
+            if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).then(() => show('copied', true), fallback);
+            else fallback();
         },
     }, 'copy');
 }

package/src/components/files-modals/preview-bodies.js

@@ -61,8 +61,12 @@ export function FilePreviewCode({ content = '', lang, filename, wrap, onWrapTogg
     const onCopy = (e) => {
         const btn = e.currentTarget;
         const done = () => { btn.textContent = 'copied'; btn.classList.add('is-copied'); setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('is-copied'); }, 1600); };
-        if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(content).then(done).catch(() => {});
-        else { try { const t = document.createElement('textarea'); t.value = content; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch { /* swallow: legacy execCommand copy fallback unsupported, nothing more to try */ } }
+        const fallback = () => { try { const t = document.createElement('textarea'); t.value = content; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch { /* swallow: no copy mechanism available */ } };
+        // Falls back whenever the async Clipboard API is absent OR its
+        // promise rejects (permission denied, an unfocused document) --
+        // was previously only reached when navigator.clipboard didn't exist.
+        if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(content).then(done, fallback);
+        else fallback();
     };
     const hasPreview = previewHtml != null && onModeChange;
     const activeMode = hasPreview ? (mode || 'source') : 'source';

package/src/components/shell/app-shell.js

@@ -43,6 +43,12 @@ export function Topbar({ brand = '247420', leaf = '', items = [], active = '', o
                 href,
                 class: active === cleanLabel ? 'active' : '',
                 'aria-current': active === cleanLabel ? 'page' : null,
+                // The visible label keeps its ' ->' ASCII arrow (sanctioned
+                // per AGENTS.md's icon policy), but a screen reader spelling
+                // that out literally ("source dash greater-than") is noise --
+                // aria-label gives the same cleaned text the active-state
+                // comparison already computes, read once, without the arrow.
+                'aria-label': cleanLabel !== String(label) ? cleanLabel : null,
                 onclick: (e) => {
                     if (!String(href).startsWith('http') && onNav) {
                         e.preventDefault();

package/src/components/shell/atoms.js

@@ -65,7 +65,7 @@ export function Btn({ href, variant = 'default', size = 'md', children, onClick,
     // modifier that snaps height/padding/font to the --ctl-* ladder. Unknown
     // sizes fall back to md so a typo never drops the button's base styling.
     const sizeCls = size === 'sm' ? ' btn-sm' : (size === 'lg' ? ' btn-lg' : '');
-    const cls = (resolvedVariant === 'primary' ? 'btn-primary' : (resolvedVariant === 'ghost' ? 'btn-ghost' : (resolvedVariant === 'danger' ? 'btn-primary danger' : 'btn')))
+    const cls = (resolvedVariant === 'primary' ? 'btn-primary' : (resolvedVariant === 'ghost' ? 'btn-ghost' : (resolvedVariant === 'danger' ? 'btn-primary danger' : (resolvedVariant === 'link' ? 'btn-link' : 'btn'))))
         + sizeCls
         + (disabled ? ' is-disabled' : '')
         + (className ? ' ' + className : '');

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

@@ -109,14 +109,14 @@ body {
   border-radius: var(--r-pill, 999px);
 }
 
-h1, .t-h1 { font-family: var(--ff-display); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
+h1, .t-h1 { font-family: var(--ff-display); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: var(--fw-semibold); margin: 0; }
 h2, .t-h2 { font-family: var(--ff-display); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
 h3, .t-h3 { font-family: var(--ff-display); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em;          font-weight: 600; margin: 0; }
 h4, .t-h4 { font-family: var(--ff-display); font-size: var(--fs-h4); line-height: var(--lh-snug);                                  font-weight: 600; margin: 0; }
 
-[data-typescale="app"] h1, [data-typescale="app"] .t-h1 { font-size: var(--fs-h1-app); line-height: 1.15; }
-[data-typescale="app"] h2, [data-typescale="app"] .t-h2 { font-size: var(--fs-h2-app); }
-[data-typescale="app"] h3, [data-typescale="app"] .t-h3 { font-size: var(--fs-h3-app); }
+[data-typescale="app"] h1, [data-typescale="app"] .t-h1 { font-size: var(--fs-h1-app); line-height: 1.15; font-weight: var(--fw-medium); }
+[data-typescale="app"] h2, [data-typescale="app"] .t-h2 { font-size: var(--fs-h2-app); font-weight: var(--fw-medium); }
+[data-typescale="app"] h3, [data-typescale="app"] .t-h3 { font-size: var(--fs-h3-app); font-weight: var(--fw-medium); }
 [data-typescale="app"] h4, [data-typescale="app"] .t-h4 { font-size: var(--fs-h4-app); }
 
 .t-hero    { font-family: var(--ff-display); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); font-weight: 700; margin: 0; }
@@ -126,8 +126,8 @@ h4, .t-h4 { font-family: var(--ff-display); font-size: var(--fs-h4); line-height
 .t-mono    { font-family: var(--ff-mono); font-weight: 400; }
 .t-body    { font-family: var(--ff-body); }
 
-.t-label   { font-family: var(--ff-mono); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tr-label); font-weight: 500; }
-.t-micro   { font-family: var(--ff-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--fg-3); }
+.t-label   { font-family: var(--ff-body); font-size: var(--fs-tiny); letter-spacing: 0; font-weight: 600; }
+.t-micro   { font-family: var(--ff-body); font-size: var(--fs-micro); letter-spacing: 0; color: var(--fg-3); font-weight: 600; }
 .t-meta    { font-family: var(--ff-body); font-size: var(--fs-sm); color: var(--fg-3); }
 
 .lede, .t-lede {

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

@@ -50,8 +50,7 @@
 .ds-cal-weekday-label {
   font-size: var(--fs-micro);
   font-weight: 600;
-  letter-spacing: var(--tr-caps);
-  text-transform: uppercase;
+  letter-spacing: 0;
   color: var(--fg-3);
   text-align: center;
   padding-block: var(--space-1);

package/src/css/app-shell/catalog-theme.css

@@ -16,7 +16,7 @@
 .ds-catalog-side h1 { font-size: var(--fs-lg); margin: 0 0 var(--space-1); }
 .ds-catalog-side .subtitle { font-size: var(--fs-micro); color: var(--fg-3); margin: 0 0 var(--space-4); }
 .ds-catalog-side nav h4 {
-  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tr-label);
+  font-size: var(--fs-micro); letter-spacing: var(--tr-tight); font-weight: 600;
   color: var(--fg-3); margin: var(--space-3) 0 var(--space-1);
 }
 .ds-catalog-side nav a {

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

@@ -55,7 +55,7 @@
   width: 36px; height: 36px; flex-shrink: 0;
   border-radius: 50%; background: var(--bg-3); color: var(--fg);
   display: inline-flex; align-items: center; justify-content: center;
-  font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 600;
+  font-family: var(--ff-body); font-size: var(--fs-micro); font-weight: 600;
   text-transform: lowercase; letter-spacing: 0.02em; user-select: none;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
   position: relative;
@@ -355,7 +355,7 @@
 .chat-link .thumb,
 .chat-link img.thumb { width: 80px; height: 80px; border-radius: var(--r-0); object-fit: cover; background: var(--bg-3) center/cover no-repeat; }
 .chat-link .meta { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
-.chat-link .host { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); text-transform: lowercase; }
+.chat-link .host { font-family: var(--ff-body); font-size: var(--fs-xs); color: var(--fg-3); text-transform: lowercase; }
 .chat-link .title { font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .chat-link .desc { font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 
@@ -367,7 +367,7 @@
 .chat-meta .who { font-weight: 600; color: var(--fg-2); }
 .chat-meta .who::after { content: ' ·'; color: var(--fg-3); font-weight: 400; }
 .chat-meta .t { color: var(--fg-3); }
-.chat-meta .tick { color: var(--fg-3); margin-left: var(--space-hair); letter-spacing: -2px; font-family: var(--ff-mono); }
+.chat-meta .tick { color: var(--fg-3); margin-left: var(--space-hair); letter-spacing: -2px; font-family: var(--ff-body); }
 .chat-meta .tick.read { color: var(--accent-ink); }
 
 .chat-reactions {

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

@@ -690,8 +690,8 @@
 .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);
+  color: var(--warn-fg);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) color-mix(in oklab, var(--warn-fg) 25%, transparent);
   font-weight: 700;
   letter-spacing: 0.01em;
 }

package/src/css/app-shell/git-status.css

@@ -20,7 +20,7 @@
 .ds-git-status-chip {
   display: inline-flex; align-items: center; justify-content: center;
   flex: 0 0 auto; width: 18px; height: 18px;
-  font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 700;
+  font-family: var(--ff-body); font-size: var(--fs-micro); font-weight: 700;
   border-radius: var(--r-1);
 }
 .ds-git-status-chip.tone-add { color: var(--green-2); background: color-mix(in oklab, var(--green-2) 16%, transparent); }
@@ -38,7 +38,7 @@
   flex: 0 0 auto; font-size: var(--fs-micro); color: var(--fg-3);
   border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1); padding: 1px 6px;
 }
-.ds-git-row-stats { flex: 0 0 auto; display: inline-flex; gap: 6px; font-family: var(--ff-mono); font-size: var(--fs-micro); }
+.ds-git-row-stats { flex: 0 0 auto; display: inline-flex; gap: 6px; font-family: var(--ff-body); font-size: var(--fs-micro); }
 .ds-git-stat-add { color: var(--green-2); }
 .ds-git-stat-del { color: var(--flame); }
 

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

@@ -218,11 +218,15 @@
   border-radius: var(--r-3);
   font-family: var(--ff-mono); font-size: var(--fs-lg);
 }
-.cli .prompt { color: var(--green-2); }
+/* user-select:none (matching .ds-cli-row .prompt below) so selecting/copying
+   a command line grabs only the command text, not the prompt mark itself --
+   otherwise every copy-pasted line carries a leading '$ ' that has to be
+   stripped by hand before it can be re-run. */
+.cli .prompt { color: var(--green-2); user-select: none; }
 .cli .cmd    { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--paper); }
 .cli .copy   {
   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);
+  font-size: var(--fs-tiny); letter-spacing: var(--tr-tight); font-weight: 500;
   cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule-strong);
   border-radius: var(--r-pill);
 }
@@ -264,7 +268,7 @@
 .ds-quickstart-copy {
   align-self: flex-end;
   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);
+  font-family: var(--ff-body); font-size: var(--fs-tiny); letter-spacing: var(--tr-tight); font-weight: 500;
   cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule-strong);
   border-radius: var(--r-pill); border: none;
 }
@@ -431,7 +435,11 @@ table td.is-num, table th.is-num { text-align: right; font-variant-numeric: tabu
    ============================================================ */
 .ds-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; vertical-align: middle; }
 .ds-dot-on  { color: var(--green-2); }
-.ds-dot-off { color: var(--fg-3); }
+/* Off/idle reads as a HOLLOW ring (transparent fill, currentColor outline)
+   instead of a solid dot in a dimmer color -- filled-vs-outline is a shape
+   cue that survives grayscale/colorblind simulation, where a solid green dot
+   and a solid gray dot at the same size can look identical in luminance. */
+.ds-dot-off { color: var(--fg-3); background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
 /* live is a distinct hue from a plain "on" dot — see .chip.tone-live's
    comment for the success-vs-live rationale. */
 .ds-dot-live { color: var(--sky); }
@@ -496,7 +504,7 @@ table td.is-num, table th.is-num { text-align: right; font-variant-numeric: tabu
 .kpi-card .lbl {
   font-size: var(--fs-xs); color: var(--fg-3);
   font-weight: 600; margin-top: 8px;
-  letter-spacing: var(--tr-caps); text-transform: uppercase;
+  letter-spacing: var(--tr-tight);
 }
 .kpi-foot {
   display: flex; align-items: center; justify-content: space-between;

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

@@ -487,8 +487,13 @@
 /* .ds-field-eyebrow joins the kit small-label voice above with no overrides. */
 .ds-hint-sm { font-size: var(--fs-xs); color: var(--panel-text-2); }
 .ds-note-quiet { margin: 0; color: var(--panel-text-2); }
-.ds-btn-row { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
+.ds-btn-row { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; align-items: center; }
 .ds-btn-row-tight { gap: var(--space-1-75, 6px); }
+/* Size-ladder demo group: each size's caption+button pair stacks and the
+   group aligns at the BOTTOM so buttons of different heights share one
+   visual baseline instead of centering on their own mismatched midpoints. */
+.ds-btn-size-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
+.ds-btn-size-col { display: flex; flex-direction: column; gap: var(--space-1-75); align-items: flex-start; }
 .ds-key-input { flex: 1 1 160px; min-width: 0; font-family: var(--ff-mono); }
 .ds-toggle-btn { min-width: 78px; }
 /* Side-by-side checked/unchecked reference pair (settings kit theme panel) --
@@ -799,7 +804,7 @@
 .ds-avatar {
   display: inline-flex; align-items: center; justify-content: center;
   border-radius: 50%; background: var(--bg-3); color: var(--fg);
-  font-family: var(--ff-mono); font-weight: 600; text-transform: lowercase;
+  font-family: var(--ff-body); 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);
 }
@@ -1024,8 +1029,7 @@
   color: var(--fg-3);
   font-family: var(--ff-mono);
   font-size: var(--fs-xs);
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
+  letter-spacing: 0;
 }
 .panel.panel-docs .panel-title::before {
   content: 'docs · ';

package/src/css/app-shell/models-config.css

@@ -52,7 +52,7 @@
   display: flex; align-items: center; gap: var(--space-2);
   margin-bottom: var(--space-2);
 }
-.ds-mc-detail-title { font-family: var(--ff-mono); font-size: var(--fs-base); font-weight: 700; }
+.ds-mc-detail-title { font-family: var(--ff-body); font-size: var(--fs-base); font-weight: 700; }
 
 .ds-mc-discovery-error {
   display: flex; align-items: center; gap: var(--space-1-75);

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

@@ -2,18 +2,40 @@
    Panel — soft tonal container, no border decoration
    ============================================================ */
 .panel {
-  background: var(--panel-1, var(--bg-2));
-  border: var(--bw-hair) solid var(--rule);
+  /* PilotDeck-parity: the reference canvas has NO visible container edge
+     anywhere except a single hairline (sidebar only) — page bg and panel
+     fill read as the same tone. Stacking a tonal fill + a border + a shadow
+     (the previous three-layer treatment) is what critics independently
+     flagged as "every card reads as a boxed gray tile" / "grid of gray
+     cards" — the single most-repeated, highest-impact gap. Panels are now
+     flat (transparent, no border): content groups are separated by
+     whitespace and an optional --panel-shadow-1 whisper only, never a fill.
+     Use .panel-tonal to opt back into the filled/bordered look for surfaces
+     that genuinely need a floating card (e.g. dropdowns, dialogs already
+     have their own elevation scale and are unaffected). */
+  background: transparent;
+  border: none;
   border-radius: var(--r-2);
-  margin: 0 0 var(--space-4);
-  padding: var(--space-3);
+  /* AGENTS.md "outer 2:1 inner": outer separation is --space-6, inner
+     sibling gap --space-4 (48:24 = 2:1), matching .ds-panel-trio/
+     .ds-panel-duo. Bumped up one rung from --space-5/--space-3 for more
+     PilotDeck-style airy whitespace while preserving the 2:1 ratio. */
+  margin: 0 0 var(--space-6);
+  padding: var(--space-4);
   position: relative;
-  /* Crisp, restrained elevation — a hairline border does the edge definition;
-     the shadow only adds a whisper of lift, not a soft glow-card float. */
-  box-shadow: var(--shadow-1);
   transition: box-shadow var(--dur-base) var(--ease-spring), border-color var(--dur-snap) var(--ease),
     transform var(--dur-base) var(--ease-spring);
 }
+/* Opt-in tonal/bordered card — the pre-restyle .panel look, kept for
+   surfaces that need to read as a discrete floating card rather than a
+   text grouping on flat canvas (e.g. a composer input, which PilotDeck
+   itself DOES give a faint 1px border+no fill — see .panel-inline below
+   for that exact treatment). */
+.panel.panel-tonal {
+  background: var(--panel-1, var(--bg-2));
+  border: var(--bw-hair) solid var(--rule);
+  box-shadow: var(--panel-shadow-1);
+}
 /* Editorial accent spine — an opt-in printed-ink rule down the left edge that
    reads as a magazine pull-quote bar, not a glow card. */
 .panel.panel-spine {
@@ -25,7 +47,9 @@
   width: var(--bw-chunk); background: var(--accent);
   border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
 }
-.panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
+/* PilotDeck's composer is the ONE element with a visible edge on an
+   otherwise flat canvas — a faint 1px border, no tonal fill. */
+.panel.panel-inline { background: transparent; border: var(--bw-hair) solid var(--rule); padding: var(--space-3) var(--space-3); }
 .panel.panel-wide   { background: transparent; box-shadow: none; border: none; }
 /* Changelog (and any other panel-wide content) needs its OWN container-query
    context: the existing `@container (max-width: 760px) .ds-changelog-row`
@@ -56,11 +80,11 @@
      rows sit on ONE left axis (the old 24/32 padding was authored for the
      pre-padding .panel-wide era and indented the label 16px past its content). */
   padding: var(--space-2) var(--space-3);
-  font-size: var(--fs-tiny); font-weight: 600;
-  color: var(--fg-3);
-  letter-spacing: var(--tr-caps); text-transform: uppercase;
+  font-size: var(--fs-sm); font-weight: 600;
+  color: var(--fg-2);
+  letter-spacing: 0;
   /* 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
+     body — without it, a sentence-case label at fs-sm/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);

package/src/css/app-shell/plugins-config.css

@@ -53,7 +53,7 @@
 
 .ds-plugins-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
 .ds-plugins-row-name {
-  font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--fg);
+  font-family: var(--ff-body); font-size: var(--fs-sm); color: var(--fg);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .ds-plugins-row-meta {
@@ -82,7 +82,7 @@
 }
 .ds-plugins-detail-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .ds-plugins-detail-title .name {
-  font-family: var(--ff-mono); font-size: var(--fs-md); font-weight: 600; color: var(--fg);
+  font-family: var(--ff-body); font-size: var(--fs-md); font-weight: 600; color: var(--fg);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .ds-plugins-version { font-size: var(--fs-micro); color: var(--fg-3); }
@@ -118,7 +118,7 @@
 
 .ds-plugins-group-label {
   font-size: var(--fs-micro); font-weight: 600; color: var(--fg-3);
-  text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px;
+  letter-spacing: 0; margin-bottom: 6px;
 }
 .ds-plugins-requires-list { display: flex; flex-wrap: wrap; gap: 6px; }
 .ds-plugins-chip {

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

@@ -21,9 +21,18 @@
   font-weight: 700;
 }
 .btn-primary:hover { background: var(--fg); color: var(--bg); transform: translateY(-1px); box-shadow: var(--shadow-2); }
-.btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
+.btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 var(--bw-hair) var(--fg); }
 .btn-ghost:hover { background: color-mix(in oklab, var(--fg) 12%, transparent); transform: translateY(-1px); }
 .btn:active, .btn-primary:active, .btn-ghost:active { transform: translateY(1px); box-shadow: none; }
+/* Disabled state: --fg-3 (the tuned tertiary-text token, AA-clear against
+   every panel tier) instead of a blind opacity halving -- opacity multiplies
+   the SURROUNDING contrast too, so a light-on-dark button can drop under 3:1
+   even though "disabled" only needs to stay legible, not full-strength. */
+.btn:disabled, .btn-primary:disabled, .btn-ghost:disabled,
+.btn.is-disabled, .btn-primary.is-disabled, .btn-ghost.is-disabled {
+  background: var(--bg-2); color: var(--fg-3); border-color: var(--rule);
+  box-shadow: none; cursor: not-allowed; pointer-events: none;
+}
 .btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible, .ds-icon-btn:focus-visible {
   outline: var(--focus-w) solid var(--focus-color);
   outline-offset: var(--focus-offset);
@@ -33,6 +42,23 @@
   height: var(--ctl-sm); min-height: var(--ctl-sm);
   padding: 0 var(--space-2); font-size: var(--fs-tiny); gap: var(--space-1);
 }
+
+/* Link-styled button: an underline (not just color) is the affordance that
+   separates "this navigates" from "this triggers an action" -- .btn-ghost's
+   outline reads as a secondary ACTION button, not a link, at a glance. */
+.btn-link {
+  display: inline-flex; align-items: center; gap: var(--space-1);
+  background: none; border: none; box-shadow: none; padding: 0;
+  height: auto; min-height: 0;
+  font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-sm);
+  color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px;
+  cursor: pointer;
+}
+.btn-link:hover { color: var(--fg); }
+.btn-link:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
 .btn-lg, .btn-lg.btn-primary, .btn-lg.btn-ghost {
   height: var(--ctl-lg); min-height: var(--ctl-lg);
   padding: 0 var(--space-4); font-size: var(--fs-body); gap: var(--space-2);
@@ -73,10 +99,13 @@
 .ds-icon-btn-ghost:hover { background: var(--fg); color: var(--bg); }
 .ds-icon-btn-primary { background: var(--accent); color: var(--accent-fg); }
 .ds-icon-btn-primary:hover { background: var(--fg); color: var(--accent-ink); }
-/* --ink, not --on-color: --on-color is a fixed #fff, which measures 3.07:1 on
-   --warn (#FF5A52) -- below the 4.5:1 AA floor. --ink measures 6.27:1. Same
-   fix as .btn-primary.danger in app-shell/files.css. */
-.ds-icon-btn-danger { background: var(--warn); color: var(--ink); }
+/* --warn-fg (not a bare --ink/--on-color literal): --ink only clears AA
+   against dark theme's lighter --warn (#FF5A52, 6.27:1); light theme's
+   --warn is a darker red (#C41C0C) where --ink measures just 2.92:1, well
+   under the 4.5:1 floor. --warn-fg is the theme-paired token (light: paper
+   text 5.97:1, dark: ink text 6.27:1) -- same fix as .btn-primary.danger in
+   app-shell/files.css, which had this exact light-theme regression live. */
+.ds-icon-btn-danger { background: var(--warn); color: var(--warn-fg); }
 .ds-icon-btn-danger:hover { filter: brightness(0.92); }
 .ds-icon-btn:active { transform: translateY(1px); }
 .ds-icon-btn:disabled, .ds-icon-btn.is-disabled {
@@ -282,7 +311,7 @@
 .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 { background: var(--warn); color: var(--warn-fg); }
 .ds-tooltip.kind-danger::after { background: var(--warn); }
 @media (prefers-reduced-motion: reduce) {
   .ds-tooltip { transition: none; }

package/src/css/app-shell/responsive2-workspace.css

@@ -245,11 +245,14 @@
 @media (prefers-reduced-motion: no-preference) {
   .ws-shell { transition: grid-template-columns var(--dur-base) var(--ease); }
 }
-/* Ultrawide: cap the shell so the 1fr content track doesn't stretch to
-   unreadable measures while the fixed side columns pin to their clamps. */
-@media (min-width: 1920px) {
-  .ws-shell { max-width: 1920px; margin-inline: auto; }
-}
+/* Ultrawide: .ws-shell itself stays full-width (fills the real screen edges
+   at any viewport, matching .app's own unbounded-width rule in topbar.css) --
+   only the 1fr content track's OWN inner measure is capped, so rail/sessions/
+   pane keep their fixed/clamped widths and only the middle content column's
+   text gets a readability ceiling, instead of the whole grid (and its side
+   columns) shrinking together and leaving dead margin on either side of the
+   shell. */
+.ws-content { max-width: var(--measure-wide, 1200px); margin-inline: auto; width: 100%; }
 
 /* Rail (left nav) */
 .ws-rail {

package/src/css/app-shell/sidebar-misc.css

@@ -19,12 +19,12 @@
 
 .app-side .count {
   padding: 1px 8px; font-size: var(--fs-micro); font-weight: 700;
-  font-family: var(--ff-mono); letter-spacing: 0.04em;
+  font-family: var(--ff-body); letter-spacing: 0.04em;
   min-width: 18px; text-align: center;
 }
 .app-side a:has(> .count:empty) > .count,
 .app-side .count:empty { display: none; }
-.app-side a .glyph { font-family: var(--ff-mono); font-size: 13px; font-weight: 600; color: var(--fg-3); text-align: center; }
+.app-side a .glyph { font-family: var(--ff-body); font-size: 13px; font-weight: 600; color: var(--fg-3); text-align: center; }
 .app-side a.active .glyph { color: var(--accent-ink); }
 
 /* -- select primitive --------------------------------------------------- */

package/src/css/app-shell/skills-config.css

@@ -14,7 +14,7 @@
 .ds-skills-group-label {
   padding: var(--space-2) var(--space-2) 3px;
   font-size: var(--fs-micro); font-weight: 600; color: var(--fg-3);
-  text-transform: uppercase; letter-spacing: 0.06em;
+  letter-spacing: 0;
 }
 
 .ds-skills-description { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.5; }