anentrypoint-design 0.0.478 → 0.0.481

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.478",
+  "version": "0.0.481",
   "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/community-app.js

@@ -15,7 +15,9 @@
 //     audioQueueItems, audioQueueCurrentId, audioQueuePaused,
 //     showAuthModal, settingsOpen, voiceSettingsOpen, replyTarget,
 //     mobileMenuOpen,  // drives the .ca-rail off-canvas drawer on narrow shells
-//     canManage        // gates the rail's "+ create channel" affordance
+//     canManage,       // gates the rail's "+ create channel" affordance
+//     forumPosts,      // ch.type==='forum': [{id,title,snippet,author,time,replyCount,tags?}]
+//     pageHtml, pageAuthor, pageUpdatedAt  // ch.type==='page': PageView content + attribution
 //   }
 //   adapter.subscribe(cb) -> unsubscribe   // cb fires when any snapshot field changes
 //   adapter.actions = {
@@ -223,7 +225,7 @@ export function mountCommunityApp(root, adapter = {}) {
         const inVoiceChannel = ch.type === 'voice';
         const bodyMain = inVoiceChannel ? voiceView(s)
             : ch.type === 'forum' ? ForumView({ posts: s.forumPosts || [], onSelect: (id) => A.openThread && A.openThread(id), onNewPost: () => A.newForumPost && A.newForumPost() })
-            : ch.type === 'page' ? PageView({ title: ch.name, html: s.pageHtml || '', isAdmin: !!s.canManage, onEdit: () => A.editPage && A.editPage() })
+            : ch.type === 'page' ? PageView({ title: ch.name, html: s.pageHtml || '', author: s.pageAuthor || '', updatedAt: s.pageUpdatedAt || 0, isAdmin: !!s.canManage, onEdit: () => A.editPage && A.editPage() })
             : chatView(s);
         const showVoiceBanner = s.voiceConnected && s.voiceChannelName && !(inVoiceChannel && s.voiceChannelName === ch.name);
         return h('div', { class: 'ca-app' },

package/src/components/community/navigation.js

@@ -4,7 +4,7 @@
 
 import * as webjsx from '../../../vendor/webjsx/index.js';
 import { Icon } from '../shell.js';
-import { Avatar, avatarInitial } from '../content.js';
+import { Avatar, avatarInitial, avatarContrastFg } from '../content.js';
 import { UserPanel } from './presence.js';
 const h = webjsx.createElement;
 
@@ -97,7 +97,7 @@ export function ChannelItem({ id, name, type = 'text', active, voiceActive, voic
         ),
         voiceActive && participants.length ? h('div', { class: 'cm-ch-voice-users' },
             ...participants.map(p => h('div', { class: 'cm-ch-voice-user' + (p.speaking ? ' speaking' : '') },
-                h('div', { class: 'cm-ch-voice-user-avatar', style: p.color ? `--avatar-bg:${p.color}` : null }, avatarInitial(p.identity)),
+                h('div', { class: 'cm-ch-voice-user-avatar', style: p.color ? (avatarContrastFg(p.color) ? `--avatar-bg:${p.color};--avatar-fg:${avatarContrastFg(p.color)}` : `--avatar-bg:${p.color}`) : null }, avatarInitial(p.identity)),
                 h('span', { class: 'cm-ch-voice-user-name' }, p.identity)
             ))
         ) : null

package/src/components/community/presence.js

@@ -4,13 +4,19 @@
 
 import * as webjsx from '../../../vendor/webjsx/index.js';
 import { Icon } from '../shell.js';
-import { avatarInitial } from '../content.js';
+import { avatarInitial, avatarContrastFg } from '../content.js';
 const h = webjsx.createElement;
 
+function avatarStyle(color) {
+    if (!color) return null;
+    const fg = avatarContrastFg(color);
+    return fg ? `--avatar-bg:${color};--avatar-fg:${fg}` : `--avatar-bg:${color}`;
+}
+
 export function VoiceUser({ identity, speaking, color } = {}) {
     const initial = avatarInitial(identity);
     return h('div', { class: 'cm-voice-user' + (speaking ? ' speaking' : '') },
-        h('div', { class: 'cm-voice-user-avatar', style: color ? `--avatar-bg:${color}` : null }, initial),
+        h('div', { class: 'cm-voice-user-avatar', style: avatarStyle(color) }, initial),
         h('span', { class: 'cm-voice-user-name' }, identity)
     );
 }
@@ -29,7 +35,7 @@ export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen,
         }
     };
     return h('div', { class: 'cm-user-panel' },
-        h('div', { class: 'cm-user-avatar', style: color ? `--avatar-bg:${color}` : null },
+        h('div', { class: 'cm-user-avatar', style: avatarStyle(color) },
             h('span', { class: 'cm-user-status-dot' }),
             initial
         ),
@@ -48,7 +54,7 @@ export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen,
 export function MemberItem({ identity, name, color, status = 'online' } = {}) {
     const initial = avatarInitial(name || identity);
     return h('div', { class: 'cm-member-item' },
-        h('div', { class: 'cm-member-avatar', style: color ? `--avatar-bg:${color}` : null },
+        h('div', { class: 'cm-member-avatar', style: avatarStyle(color) },
             h('span', { class: 'cm-member-status' + (status === 'online' ? ' online' : '') }),
             initial
         ),

package/src/components/community/views.js

@@ -111,10 +111,16 @@ export function ForumView({ posts = [], onSearch, onSort, onSelect, onNewPost, l
     );
 }
 
-export function PageView({ title = '', html = '', isAdmin = false, onEdit } = {}) {
+export function PageView({ title = '', html = '', author = '', updatedAt = 0, isAdmin = false, onEdit } = {}) {
     return h('div', { class: 'cm-page', role: 'document' },
         h('div', { class: 'cm-page-head' },
-            h('h1', { class: 'cm-page-title' }, title || ''),
+            h('div', { class: 'cm-page-head-title' },
+                h('h1', { class: 'cm-page-title' }, title || ''),
+                (author || updatedAt) ? h('div', { class: 'cm-page-meta' },
+                    author ? h('span', { class: 'cm-page-author' }, author) : null,
+                    updatedAt ? h('span', { class: 'cm-page-time' }, fmtRelTime(updatedAt)) : null
+                ) : null
+            ),
             isAdmin && onEdit ? h('button', { type: 'button', class: 'cm-page-edit', onclick: onEdit }, 'Edit') : null
         ),
         h('div', {

package/src/components/content/avatar.js

@@ -16,6 +16,36 @@ export function avatarInitial(name, count = 1) {
     return name ? String(name).trim().slice(0, count).toUpperCase() || '?' : '?';
 }
 
+// avatarContrastFg — picks black or white text against an arbitrary
+// per-user hashed --avatar-bg color, via WCAG relative luminance, so
+// initials clear 4.5:1 regardless of which hue the hash lands on (a
+// single fixed --fg-2 token can't: some hashed hues are light enough
+// that dark-on-dark or light-on-light both existed in the wild).
+// Returns null for an unparsable color so callers can omit the
+// inline style entirely and fall back to the CSS default.
+export function avatarContrastFg(color) {
+    if (!color) return null;
+    let r, g, b;
+    const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(String(color).trim());
+    if (hex) {
+        let h = hex[1];
+        if (h.length === 3) h = h.split('').map(c => c + c).join('');
+        r = parseInt(h.slice(0, 2), 16); g = parseInt(h.slice(2, 4), 16); b = parseInt(h.slice(4, 6), 16);
+    } else {
+        const rgb = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(String(color).trim());
+        if (!rgb) return null;
+        r = +rgb[1]; g = +rgb[2]; b = +rgb[3];
+    }
+    const lin = (c) => { const v = c / 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); };
+    const L = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+    // Contrast against pure black/white; pick whichever side clears more
+    // headroom (both landing >=4.5:1 is common, but some hues only clear
+    // one side, so max-headroom is the right tiebreak, not a 0.5 cutoff).
+    const contrastWhite = 1.05 / (L + 0.05);
+    const contrastBlack = (L + 0.05) / 0.05;
+    return contrastWhite >= contrastBlack ? '#fff' : '#000';
+}
+
 // Avatar — the single letter-fallback/image avatar primitive. `initialsCount`
 // (default 1) controls how many leading characters of `name` become the
 // fallback letters when no `src`/`fallback` is given (community.js's

package/src/components/content.js

@@ -6,7 +6,7 @@
 // submodule under ./content/, and the public export surface here is unchanged
 // — no consumer import needs to move.
 
-import { avatarInitial, Avatar } from './content/avatar.js';
+import { avatarInitial, avatarContrastFg, Avatar } from './content/avatar.js';
 import { Row, RowLink } from './content/row.js';
 import { Panel, Card, PanelFromItems, Section, Receipt, Changelog } from './content/panel.js';
 import { Hero, HeroFromPageData, Marquee, Manifesto, PageHeader } from './content/hero.js';
@@ -20,7 +20,7 @@ import { Spinner, Skeleton, Alert, FilterPills } from './content/feedback.js';
 import { HomeView, ProjectView } from './content/views.js';
 
 export {
-    avatarInitial, Avatar,
+    avatarInitial, avatarContrastFg, Avatar,
     Row, RowLink,
     Panel, Card, PanelFromItems, Section, Receipt, Changelog,
     Hero, HeroFromPageData, Marquee, Manifesto, PageHeader,

package/src/components/overlay-primitives/emoji-picker.js

@@ -44,12 +44,18 @@ const ALL_EMOJI = EMOJI_CATEGORIES.flatMap((c) => c.emoji);
 export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose, query = '' } = {}) {
     if (!open) return null;
     let cat = EMOJI_CATEGORIES[0].id;
-    let rootEl = null, gridEl = null;
+    let rootEl = null, gridEl = null, searchEl = null;
+    // Internal search state, seeded from the `query` prop so a consumer that
+    // already knows the typed ':smile' trigger text (e.g. a composer keydown
+    // handler) can still pre-fill it — but typing in the picker's own input
+    // (added here since no consumer previously had anywhere to route text
+    // into `query`) is the primary path now.
+    let search = query || '';
     const close = () => onClose && onClose();
 
     const renderGrid = () => {
         if (!gridEl) return;
-        const q = (query || '').trim().toLowerCase();
+        const q = (search || '').trim().toLowerCase();
         const cells = q
             ? ALL_EMOJI.filter(([, name]) => name.toLowerCase().includes(q))
             : (EMOJI_CATEGORIES.find(x => x.id === cat) || EMOJI_CATEGORIES[0]).emoji;
@@ -82,7 +88,13 @@ export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose,
             el._ovEmojiCleanup = _anchoredOverlayLifecycle(el, { anchorX, anchorY, fallbackW: 260, fallbackH: 240, close });
         },
     },
-        (query || '').trim() ? null : h('div', { class: 'ov-emoji-tabs', role: 'tablist' },
+        h('input', {
+            type: 'search', class: 'ov-emoji-search', placeholder: 'Search emoji…',
+            'aria-label': 'search emoji', value: search,
+            ref: (el) => { searchEl = el; },
+            oninput: (e) => { search = e.target.value; renderGrid(); },
+        }),
+        (search || '').trim() ? null : h('div', { class: 'ov-emoji-tabs', role: 'tablist' },
             ...EMOJI_CATEGORIES.map((c) => h('button', {
                 type: 'button', class: 'ov-emoji-tab', role: 'tab',
                 'aria-selected': c.id === cat ? 'true' : 'false',

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

@@ -173,7 +173,7 @@ export function WorkspaceRail({ brand = '247420', action, items = [], footer } =
                     it.icon ? Icon(it.icon) : h('span', { class: 'ws-rail-item-glyph', 'aria-hidden': 'true' }),
                     h('span', { class: 'ws-rail-item-label' }, it.label),
                     (it.count != null && it.count !== 0 && it.count !== '0')
-                        ? h('span', { class: 'ws-rail-item-count', 'aria-hidden': 'true' }, String(it.count))
+                        ? h('span', { class: 'ws-rail-item-count ds-badge ds-badge--sm', 'aria-hidden': 'true' }, String(it.count))
                         : null,
                     it.rail ? h('span', { class: 'ws-rail-item-flag tone-' + it.rail, 'aria-hidden': 'true' }) : null)))),
         footer ? h('div', { class: 'ws-rail-foot' }, footer) : null,

package/src/components/theme-toggle.js

@@ -67,11 +67,16 @@ export function ThemeToggle({ compact = false, onChange } = {}) {
                 el.setAttribute('title', titleFor(now));
                 const lab = el.querySelector('.ds-theme-toggle-label');
                 if (lab) lab.textContent = labelFor(now);
+                const disc = el.querySelector('.ds-theme-disc');
+                if (disc) disc.setAttribute('data-mode', now);
             })
         },
-        // CSS-drawn half-disc so the control still reads as the theme switch
-        // when the label is hidden (icon-only rail strip).
-        h('span', { class: 'ds-theme-disc', 'aria-hidden': 'true' }),
+        // CSS-drawn disc so the control still reads as the theme switch when
+        // the label is hidden (icon-only rail strip). data-mode selects a
+        // per-mode fill (solid light / solid dark / half-and-half for auto)
+        // so the icon itself — not just the title tooltip — shows current
+        // state at a glance.
+        h('span', { class: 'ds-theme-disc', 'data-mode': current, 'aria-hidden': 'true' }),
         h('span', { class: 'ds-theme-toggle-label' }, labelFor(current)));
     }
 

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

@@ -75,6 +75,24 @@ body {
   scrollbar-width: thin;
   scrollbar-color: var(--bg-3) transparent;
 }
+/* Firefox gets themed scrollbars via scrollbar-width/-color above; Chrome,
+   Safari, and Edge need the ::-webkit-scrollbar family too, or every
+   scrollable node in the app shell falls back to the raw OS scrollbar and
+   clashes with the dark UI. Same selector scope, same --bg-3 token. */
+.app::-webkit-scrollbar, .ds-stage::-webkit-scrollbar,
+.app *::-webkit-scrollbar, .ds-stage *::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.app::-webkit-scrollbar-track, .ds-stage::-webkit-scrollbar-track,
+.app *::-webkit-scrollbar-track, .ds-stage *::-webkit-scrollbar-track {
+  background: transparent;
+}
+.app::-webkit-scrollbar-thumb, .ds-stage::-webkit-scrollbar-thumb,
+.app *::-webkit-scrollbar-thumb, .ds-stage *::-webkit-scrollbar-thumb {
+  background: var(--bg-3);
+  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; }
 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; }

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

@@ -143,11 +143,23 @@
   font-family: var(--ff-mono); font-size: var(--fs-xs);
   display: inline-flex; align-items: center; gap: 6px;
 }
-/* CSS-drawn half-disc mark on the compact theme toggle: keeps the control
-   legible when its text label is hidden (icon-only rail strip). */
+/* CSS-drawn disc mark on the compact theme toggle: keeps the control
+   legible when its text label is hidden (icon-only rail strip). Per-mode
+   fill gives the icon itself a distinct look for auto/light/dark, so state
+   reads without relying on the title tooltip alone. */
 .ds-theme-disc {
   flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
   border: var(--bw-hair) solid var(--fg-3);
+  /* auto: half-and-half, matches default (no data-mode) for safety */
   background: linear-gradient(90deg, var(--fg-3) 0 50%, transparent 50% 100%);
 }
+.ds-theme-disc[data-mode="auto"] {
+  background: linear-gradient(90deg, var(--fg-3) 0 50%, transparent 50% 100%);
+}
+.ds-theme-disc[data-mode="paper"] {
+  background: var(--bg); border-color: var(--fg-3);
+}
+.ds-theme-disc[data-mode="ink"] {
+  background: var(--fg-3); border-color: var(--fg-3);
+}
 

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

@@ -69,6 +69,18 @@
   background: color-mix(in oklab, var(--mascot) 26%, var(--bg-2));
   color: var(--mascot-deep);
 }
+/* Plain assistant turns ('them', no aicat persona) previously fell through to
+   the bare .chat-avatar gray disc with no role identity at all — 'you' and
+   'aicat' both got a tinted background + ring, the default assistant got
+   nothing. Give it the same tinted-background treatment via --color-success
+   (the conventional assistant/bot association, distinct from the accent hue
+   'you' owns and the mascot hue 'aicat' owns) plus a thin identity ring so
+   role is readable from the avatar alone, not just bubble position/color. */
+.chat-msg.them:not(.aicat) .chat-avatar {
+  background: color-mix(in oklab, var(--color-success) 20%, var(--bg-3));
+  color: color-mix(in oklab, var(--color-success) 65%, var(--fg));
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-success) 35%, transparent);
+}
 
 .chat-stack {
   display: flex; flex-direction: column; gap: var(--space-1);

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

@@ -79,6 +79,11 @@
   border-radius: var(--r-pill);
   background: var(--bg-2);
 }
+/* .ds-collab-chip-avatar (24px identity circle) and .ds-collab-chip-status
+   (8px status dot) below are both circular via border-radius: 50% but are
+   intentionally distinct: different sizes, different content (initial vs.
+   plain fill), different positioning role (layout box vs. absolute badge).
+   Not extracting a shared class -- there's nothing substantive to share. */
 .ds-collab-chip-avatar {
   position: relative;
   width: 24px;

package/src/css/app-shell/data-density.css

@@ -14,6 +14,10 @@
 
 /* PhaseWalk */
 .ds-phasewalk { display: inline-flex; gap: var(--space-hair); vertical-align: middle; }
+/* NOTE: a second toggle-switch-shaped implementation exists in
+   plugins-config.css:91 (.ds-plugins-toggle) at a different scale (40x22 vs
+   this 18x10) — consider consolidating into a shared .ds-switch primitive
+   with a size modifier. */
 .ds-phasewalk-seg {
   width: 18px; height: 10px; border-radius: var(--r-hair);
   background: var(--bg-3); position: relative;

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

@@ -735,7 +735,7 @@
 .ds-preview-code::-webkit-scrollbar,
 .ds-preview-text::-webkit-scrollbar,
 .ds-preview-body::-webkit-scrollbar,
-.ds-modal-body::-webkit-scrollbar { width: 10px; height: 10px; }
+.ds-modal-body::-webkit-scrollbar { width: 8px; height: 8px; }
 .ds-preview-code::-webkit-scrollbar-thumb,
 .ds-preview-text::-webkit-scrollbar-thumb {
   background: color-mix(in oklab, var(--paper) 28%, transparent);

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

@@ -500,7 +500,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
    Form
    ============================================================ */
 .row-form {
-  display: grid; gap: 12px;
+  display: grid; gap: var(--space-2-75);
   padding: var(--space-5);
   background: var(--bg-2);
   border-radius: var(--r-3);

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

@@ -2,15 +2,16 @@
 /* ============================================================
    Spinner — animated loading indicator
    ============================================================ */
+/* Dots spinner — use for small inline/compact loading states. */
 .ds-spinner {
   display: inline-flex;
-  gap: 4px;
+  gap: var(--space-1);
   align-items: center;
   height: 16px;
 }
 .ds-spinner span {
-  width: 4px;
-  height: 4px;
+  width: var(--space-1);
+  height: var(--space-1);
   border-radius: 50%;
   background: var(--accent);
 }
@@ -21,17 +22,17 @@
   .ds-spinner span:nth-child(3) { animation-delay: 0.36s; }
 }
 
-.ds-spinner-lg { height: 24px; gap: 6px; }
-.ds-spinner-lg span { width: 6px; height: 6px; }
+.ds-spinner-lg { height: 24px; gap: var(--space-1-75); }
+.ds-spinner-lg span { width: var(--space-1-75); height: var(--space-1-75); }
 
-.ds-spinner-sm { height: 12px; gap: 2px; }
-.ds-spinner-sm span { width: 2px; height: 2px; }
+.ds-spinner-sm { height: 12px; gap: var(--space-hair); }
+.ds-spinner-sm span { width: var(--space-hair); height: var(--space-hair); }
 
 .ds-spinner-xs { height: 8px; gap: 1px; }
 .ds-spinner-xs span { width: 1.5px; height: 1.5px; }
 
-.ds-spinner-xl { height: 32px; gap: 8px; }
-.ds-spinner-xl span { width: 8px; height: 8px; }
+.ds-spinner-xl { height: 32px; gap: var(--space-2); }
+.ds-spinner-xl span { width: var(--space-2); height: var(--space-2); }
 
 @keyframes ds-bounce {
   0%, 80%, 100% { transform: translateY(0); }
@@ -81,7 +82,7 @@
   flex-shrink: 0;
   color: var(--alert-tone);
   font-weight: 600;
-  min-width: 20px;
+  min-width: var(--space-3-5);
   text-align: center;
 }
 
@@ -110,11 +111,12 @@
   cursor: pointer;
   color: var(--fg-3);
   padding: 0;
-  font-size: 14px;
+  font-size: var(--fs-xs);
   line-height: 1;
-  min-width: 20px;
+  min-width: var(--space-3-5);
   text-align: center;
   transition: color var(--dur-snap) var(--ease);
 }
 .ds-alert-dismiss:hover { color: var(--fg); }
+.ds-alert-dismiss:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 

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

@@ -17,11 +17,11 @@
 .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);
+  box-shadow: var(--focus-ring-inset);
 }
 .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-error:focus-visible { box-shadow: var(--focus-ring-inset); }
 .ds-otp-box:disabled { opacity: 0.5; cursor: default; }
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -87,6 +87,9 @@
 }
 .ds-plugins-version { font-size: var(--fs-micro); color: var(--fg-3); }
 
+/* NOTE: a second toggle-switch implementation exists in data-density.css:18
+   (.ds-phasewalk-seg) at a different scale (18x10 vs this 40x22) — consider
+   consolidating into a shared .ds-switch primitive with a size modifier. */
 .ds-plugins-toggle {
   flex: 0 0 auto; width: 40px; height: 22px; border-radius: 11px; border: none; padding: 0;
   background: var(--rule); position: relative; cursor: pointer;

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

@@ -22,7 +22,7 @@
 }
 .btn-primary:hover { background: var(--fg); color: var(--green); 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:hover { background: var(--fg); color: var(--bg); transform: translateY(-1px); }
+.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; }
 .btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible, .ds-icon-btn:focus-visible {
   outline: var(--focus-w) solid var(--focus-color);
@@ -54,7 +54,9 @@
   border-radius: var(--r-1, 6px);
   background: transparent; color: var(--fg);
   width: 32px; height: 32px;
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
+.ds-icon-btn:hover { background: var(--bg-2); }
 .ds-icon-btn-xs { width: 22px; height: 22px; }
 .ds-icon-btn-sm { width: 26px; height: 26px; }
 .ds-icon-btn-base { width: 32px; height: 32px; }
@@ -64,7 +66,10 @@
 .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); }
-.ds-icon-btn-danger { background: var(--warn); color: var(--on-color); }
+/* --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); }
 .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 {
@@ -78,7 +83,7 @@
   border-radius: var(--r-pill);
   background: var(--bg-3); color: var(--fg-2);
 }
-.ds-badge.ds-badge--sm { min-width: 14px; height: 14px; padding: 0 var(--space-1); font-size: 10px; }
+.ds-badge.ds-badge--sm { min-width: 14px; height: 14px; padding: 0 var(--space-1); font-size: var(--fs-pico); }
 .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);
@@ -95,7 +100,7 @@
   background: var(--sun); color: var(--ink);
 }
 .ds-badge.tone-blue    { background: var(--accent-tint); color: var(--accent-ink); }
-.ds-badge.tone-orange  { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
+.ds-badge.tone-orange  { background: color-mix(in oklab, var(--flame) 22%, var(--bg)); color: color-mix(in oklab, var(--flame) 65%, black); }
 
 .chip {
   display: inline-flex; align-items: center; gap: var(--space-1-75);
@@ -163,6 +168,10 @@
 .ds-pill.tone-accent { background: var(--accent-tint); color: var(--accent-ink); }
 .ds-pill.tone-muted  { background: transparent; color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--rule); }
 
+/* .glyph-* sizes (14/18/22px) are for small inline text-adjacent glyphs
+   (single characters/icons sitting in a text flow), a different scale and
+   purpose than the .ds-icon-btn-* tap-target scale (22/26/32/40/48px) below --
+   the -sm/-lg naming overlap is coincidental, not a shared system. */
 .glyph {
   display: inline-flex; align-items: center; justify-content: center;
   width: 18px; height: 18px;

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

@@ -3,6 +3,19 @@
    Responsive Design — Mobile (480px), Tablet (1024px), Desktop (1440px+)
    ============================================================ */
 
+/* Breakpoint reference (CSS custom properties can't be used in @media queries,
+   so these are documented here for consistency — always use these exact values):
+   - Mobile/tablet boundary: 768px (max-width) — used for compact nav/sidebar
+     collapse (catalog-theme.css, sidebar-misc.css). Note: kits-appended.css
+     uses 760px for the same kind of collapse in a few places — a near-miss
+     of this value, worth aligning to 768px when touched.
+   - Tablet/desktop boundary: 900px (max-width) / 901px (min-width) — used for
+     main layout reflow (hero-content.css, responsive2-workspace.css)
+   - Legacy tablet band: 481px–1024px (min-width 481px / max-width 1025px) —
+     used in this file (responsive.css) for a specific tablet treatment,
+     consider migrating to the 768/900 pair
+*/
+
 /* --------------------------------------------------------------------
    Mobile Portrait Breakpoint (480px and below)
    ---------------------------------------------------------------------- */

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

@@ -281,7 +281,9 @@
 .ws-rail-item:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
 .ws-rail-item.active { background: var(--accent-tint); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
 .ws-rail-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
-.ws-rail-item-count { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
+/* Shape/color come from the shared .ds-badge component (see app-shell/primitives.css);
+   this class is now just the rail-item layout hook (spacing, collapsed-state targeting). */
+.ws-rail-item-count { flex: none; margin-inline-start: var(--space-1); }
 .ws-rail-item-flag { width: 6px; height: 6px; border-radius: 50%; flex: none; }
 .ws-rail-item-flag.tone-flame { background: var(--flame); box-shadow: 0 0 0 2px color-mix(in oklab, var(--flame) 38%, transparent); }
 .ws-rail-foot { margin-top: auto; padding-top: var(--space-2); border-top: var(--bw-hair) solid var(--bg-3); }
@@ -324,6 +326,7 @@
    because the chat thread carries its own --measure gutter. */
 .ws-main { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); }
 .ws-main.ws-main--flush { padding: 0; }
+/* Non-interactive scroll region (content column), not a focusable control — outline intentionally suppressed. */
 .ws-main:focus { outline: none; }
 
 /* Right context pane */

package/src/css/app-shell/states-interactions.css

@@ -34,12 +34,26 @@ tr.clickable:focus-visible {
 .btn:disabled, .btn-primary:disabled, .btn-ghost:disabled,
 .btn.is-disabled, .btn-primary.is-disabled, .btn-ghost.is-disabled,
 button:disabled, [disabled] {
-  opacity: 0.45;
+  opacity: 0.5;
   filter: grayscale(60%);
   cursor: not-allowed;
   pointer-events: none;
 }
 
+/* Systemic hover fallback — button-like elements with no design-system class
+   (a bare <button>, [role="button"], or a generic .row/.chip usage) get a
+   `transition` declared above (line ~106) but nothing to transition to, so
+   they look inert until clicked. This is a low-specificity (0,0,1)/(0,1,1)
+   catch-all: any element that also carries `.btn`/`.btn-primary`/`.btn-ghost`/
+   `.ds-icon-btn`/etc. keeps its own component `:hover` (those selectors are
+   equal-or-higher specificity and, for the shared ones, declared later in
+   the cascade), so this never overrides a deliberate per-component hover —
+   it only fills the gap for elements that don't have one. */
+button:not(:disabled):hover,
+[role="button"]:not([aria-disabled="true"]):hover {
+  background-color: var(--panel-hover, var(--bg-3));
+}
+
 /* Loading state — spinning indicator */
 @keyframes spinner-rotate {
   from { transform: rotate(0deg); }
@@ -47,10 +61,12 @@ button:disabled, [disabled] {
 }
 /* Reusable spin utility: rotates the element (e.g. a refresh Icon used as a
    busy indicator) via the shared spinner-rotate keyframe. Respects reduced
-   motion. Use instead of a decorative rotation glyph. */
+   motion. Use instead of a decorative rotation glyph.
+   Ring spinner — use for larger blocking/full-region loading states. */
 .ds-spin { animation: spinner-rotate 0.8s linear infinite; transform-origin: center; }
 @media (prefers-reduced-motion: reduce) { .ds-spin { animation: none; } }
 
+/* Ring spinner — use for larger blocking/full-region loading states. */
 .loading { position: relative; }
 .loading::after {
   content: '';
@@ -477,7 +493,7 @@ hr.rule-dotted { border-top: 2px dotted var(--rule-strong); }
   background: var(--accent-ink); border-color: var(--accent-ink);
 }
 .ds-toggle[aria-checked="true"] .ds-toggle-knob {
-  background: var(--panel-0, #fff);
+  background: var(--panel-0, var(--bg));
   transform: translateX(18px);
 }
 .ds-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
@@ -611,7 +627,7 @@ hr.rule-dotted { border-top: 2px dotted var(--rule-strong); }
 .ds-field input:not(.input):disabled,
 .ds-field textarea:not(.input):disabled,
 .ds-field .ds-select:disabled {
-  opacity: .55;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 .ds-field input:not(.input)[aria-invalid="true"],

package/src/kits/os/app-panes.css

@@ -17,6 +17,7 @@
     gap: var(--space-2);
     padding: var(--space-1) var(--space-2);
     background: var(--os-bg-2);
+    border-bottom: 1px solid color-mix(in oklab, var(--os-accent) 35%, transparent);
     font-family: var(--os-mono);
     font-size: 11px;
     color: var(--os-fg-2);
@@ -32,7 +33,7 @@
 }
 .terminal-app-status {
     font-family: var(--os-mono);
-    color: var(--os-fg-3);
+    color: var(--os-accent);
     flex: 0 0 auto;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -43,7 +44,7 @@
     min-width: 0;
     min-height: 0;
     overflow: hidden;
-    background: var(--os-bg-0);
+    background: var(--os-bg-1);
     position: relative;
 }
 .terminal-app-slot > * { width: 100%; height: 100%; }