anentrypoint-design 0.0.211 → 0.0.213

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.211",
+  "version": "0.0.213",
   "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/chat.js

@@ -215,6 +215,19 @@ function ToolCallNode(p) {
     // collapse on success unless the caller explicitly overrides with open:true.
     const defaultOpen = p.open != null ? !!p.open : (status === 'running' || status === 'error');
     const iconName = status === 'running' ? 'refresh' : (status === 'error' ? 'warn' : 'check');
+    const copyText = (txt) => (e) => {
+        const b = e.currentTarget;
+        const done = () => {
+            b.textContent = 'copied';
+            b.classList.add('is-copied');
+            setTimeout(() => { b.textContent = 'copy'; b.classList.remove('is-copied'); }, 1600);
+        };
+        if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(txt).then(done).catch(() => {});
+        else { try { const t = document.createElement('textarea'); t.value = txt; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch {} }
+    };
+    const sectionLabel = (text, txt) => h('div', { class: 'chat-tool-section-label' },
+        h('span', {}, text),
+        h('button', { type: 'button', class: 'chat-code-copy chat-tool-copy', 'aria-label': 'copy ' + text, onclick: copyText(txt) }, 'copy'));
     return h('details', { class: 'chat-bubble chat-tool tool-' + status, open: defaultOpen },
         h('summary', { class: 'chat-tool-head' },
             h('span', { class: 'chat-tool-icon', 'aria-hidden': 'true' }, Icon(iconName, { size: 14 })),
@@ -224,10 +237,10 @@ function ToolCallNode(p) {
         ),
         h('div', { class: 'chat-tool-body' },
             h('div', { class: 'chat-tool-section' },
-                h('div', { class: 'chat-tool-section-label' }, 'args'),
+                sectionLabel('args', argsText),
                 h('pre', { class: 'chat-tool-pre' }, h('code', {}, argsText))),
             resultText ? h('div', { class: 'chat-tool-section' },
-                h('div', { class: 'chat-tool-section-label' }, p.error ? 'error' : 'result'),
+                sectionLabel(p.error ? 'error' : 'result', resultText),
                 h('pre', { class: 'chat-tool-pre' + (p.error ? ' is-error' : '') }, h('code', {}, resultText)))
                 // A finished tool with no output would otherwise render no result
                 // section, reading identically to a still-running tool. Show an

package/src/components/content.js

@@ -6,8 +6,8 @@ import * as webjsx from '../../vendor/webjsx/index.js';
 import { Btn, Heading, Lede, Dot, Icon } from './shell.js';
 const h = webjsx.createElement;
 
-export function Panel({ title, count, right, style = '', children, kind, id }) {
-    const cls = 'panel' + (kind ? ' panel-' + kind : '');
+export function Panel({ title, count, right, style = '', class: className = '', children, kind, id }) {
+    const cls = 'panel' + (kind ? ' panel-' + kind : '') + (className ? ' ' + className : '');
     return h('div', { class: cls, style, id: id || null },
         title != null ? h('div', { class: 'panel-head' },
             h('span', {}, title),
@@ -43,7 +43,7 @@ function highlightTitle(title, highlight) {
     return segs;
 }
 
-export function Row({ code, rank, title, sub, meta, active, state = 'default', onClick, key, style, href, kind, cols, leading, trailing, target, selected, rail, expanded, highlight, actions }) {
+export function Row({ code, rank, title, sub, meta, active, state = 'default', onClick, key, style, href, kind, cols, leading, trailing, target, selected, rail, expanded, highlight, actions, detail }) {
     // `rank` is an alias for `code` (the leading monospace index); callers use
     // either name. `rail` renders a thin colour bar at the row's leading edge as
     // a status indicator (tone: green | purple | flame | <any token>).
@@ -105,12 +105,15 @@ export function Row({ code, rank, title, sub, meta, active, state = 'default', o
     // state. green is the unremarkable default - announcing "ok" everywhere would
     // be AT noise - so it emits nothing.
     const railWord = rail === 'flame' ? 'error' : rail === 'purple' ? 'subagent' : null;
+    // `detail` renders as a sibling block AFTER the title/meta children (its own
+    // line via flex-basis:100% in .ds-row-detail), not inside the title span.
     return h(isLink ? 'a' : 'div', props,
         railWord ? h('span', { class: 'sr-only' }, railWord) : null,
         leading != null ? leading : (codeVal != null ? h('span', { class: 'code' }, codeVal) : null),
         h('span', { class: 'title' }, titleNode, sub ? h('span', { class: 'sub' }, sub) : null),
         trailing != null ? trailing : (meta != null ? h('span', { class: 'meta' }, meta) : null),
-        actionRow);
+        actionRow,
+        detail != null ? h('pre', { class: 'ds-row-detail' }, detail) : null);
 }
 
 export function RowLink({ code, title, sub, meta, href = '#', key, target }) {

package/src/components/files.js

@@ -4,10 +4,6 @@ import * as webjsx from '../../vendor/webjsx/index.js';
 import { Btn, Icon } from './shell.js';
 const h = webjsx.createElement;
 
-// Minimum column width for the responsive file grid (minmax floor). Named so
-// the magic 240px isn't buried in the gridTemplateColumns string.
-const FILE_GRID_MIN_COL = '240px';
-
 const FILE_TYPES = ['dir', 'image', 'video', 'audio', 'code', 'text', 'archive', 'document', 'symlink', 'other'];
 const TYPE_ICON = {
     dir: 'folder', image: 'file-image', video: 'file-video', audio: 'file-audio', code: 'file-code',
@@ -59,9 +55,12 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
     const noAccess = locked || permissions === 'EACCES' || (Array.isArray(permissions) && permissions.length === 0);
     const readOnly = !noAccess && Array.isArray(permissions) && permissions.indexOf('write') === -1 && permissions.indexOf('read') !== -1;
     const permTag = noAccess ? 'no access' : (readOnly ? 'read-only' : null);
-    const meta = [type === 'dir' ? null : fmtFileSize(size), modified || null, permTag].filter(Boolean).join(' · ');
+    // permTag is rendered as its own chip (a SHAPE channel, not folded into the
+    // muted meta text) - so drop it from the meta join, but keep it in the
+    // accessible label so AT still announces the restriction.
+    const meta = [type === 'dir' ? null : fmtFileSize(size), modified || null].filter(Boolean).join(' · ');
     const typeLabel = TYPE_LABELS[type] || 'file';
-    const accessibleLabel = `${typeLabel}: ${name}${meta ? ` (${meta})` : ''}`;
+    const accessibleLabel = `${typeLabel}: ${name}${meta ? ` (${meta})` : ''}${permTag ? ', ' + permTag : ''}`;
     const canOpen = onOpen && !noAccess && !busy;
     // Mutation actions on a read-only/no-access row render disabled (with a
     // 'read-only' title) instead of vanishing, so the affordance reads honestly.
@@ -113,10 +112,13 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
             'aria-pressed': active ? 'true' : 'false',
             disabled: canOpen ? null : true,
         },
-            code != null ? h('span', { class: 'code', 'aria-label': `code: ${code}` }, code) : null,
-            FileIcon({ type }),
-            h('span', { class: 'title' }, name),
-            h('span', { class: 'ds-file-meta meta', 'aria-label': meta ? `metadata: ${meta}` : null }, meta || '—')
+            ...[
+                code != null ? h('span', { class: 'code', 'aria-label': `code: ${code}` }, code) : null,
+                FileIcon({ type }),
+                h('span', { class: 'title' }, name),
+                h('span', { class: 'ds-file-meta meta', 'aria-label': meta ? `metadata: ${meta}` : null }, meta || '—'),
+                permTag ? h('span', { class: 'ds-file-perm-tag' + (noAccess ? ' is-noaccess' : ''), 'aria-hidden': 'true' }, permTag) : null,
+            ].filter(Boolean)
         ),
         actionBtns.length ? h('span', { key: 'acts', class: 'ds-file-actions', role: 'group', 'aria-label': `actions for ${name}` },
             ...actionBtns
@@ -125,6 +127,7 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
     return h('div', {
         key,
         class: 'ds-file-row row' + (active ? ' active' : '') + (noAccess ? ' is-locked' : '')
+            + (readOnly ? ' is-restricted' : '')
             + (marked ? ' is-marked' : '') + (selectable ? ' is-selectable' : ''),
         'data-file-type': type,
         'aria-busy': busy ? 'true' : null,
@@ -134,7 +137,7 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
 // FileSkeleton — placeholder shimmer rows shown while a directory loads, so the
 // grid does not flash from a bare spinner to a full list (predictable perceived
 // perf, the file-manager feel). `rows` controls how many ghost rows render.
-export function FileSkeleton({ rows = 8 } = {}) {
+export function FileSkeleton({ rows = 12 } = {}) {
     return h('div', { class: 'ds-file-grid ds-file-skeleton', 'aria-hidden': 'true' },
         ...Array.from({ length: Math.max(1, rows) }, (_, i) => h('div', { key: 'sk' + i, class: 'ds-file-row ds-file-row-skeleton' },
             h('span', { class: 'ds-skel ds-skel-icon' }),
@@ -177,8 +180,8 @@ export function sortFiles(files = [], sort = 'name', dir = 'asc') {
 // CAP and a "show N more" row, mirroring the History tab's "load N older".
 const FILE_GRID_CAP = 200;
 
-export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No files here yet',
-                          columns = 'auto', sort, filter, loading = false,
+export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No files here yet', emptyAction,
+                          sort, filter, loading = false,
                           shown, onShowMore, actions, busy,
                           // Canonical multi-select contract (shared with
                           // SessionDashboard): selected/onToggleSelect.
@@ -191,8 +194,14 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No f
     // delete / upload round-trip) keeps the rows on screen and dims them -
     // flashing the whole directory to shimmer rows on every mutation reads as
     // data loss.
-    if (loading && !files.length) return FileSkeleton({});
-    if (!files.length) return EmptyState({ text: emptyText });
+    if (loading && !files.length) return FileSkeleton({ rows: 12 });
+    // A filtered miss is NOT an empty directory: when the in-grid filter narrows
+    // to zero matches, the host still passes an empty `files` array - but we must
+    // keep the controls toolbar (the filter input that caused the miss) mounted so
+    // the user can clear/edit it to recover. Only a genuinely-empty directory (no
+    // active filter) gets the bare cold EmptyState early-return.
+    const hasFilter = !!(filter && (filter.value || '').length > 0);
+    if (!files.length && !hasFilter) return EmptyState({ text: emptyText, glyph: Icon('folder-open', { size: 28 }), action: emptyAction });
     const refreshing = loading && files.length > 0;
     // Cap the rendered rows. `shown` (host-controlled) overrides the default cap
     // so "show more" can grow it; otherwise default to FILE_GRID_CAP.
@@ -200,16 +209,11 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No f
     const capped = files.length > limit;
     const visible = capped ? files.slice(0, limit) : files;
     const isThumb = density === 'thumb';
+    // NOTE: the old `columns`-driven data-columns card-mode was removed - it placed
+    // flex list-rows into a 2-4 col grid (squashed rows, mis-sized actions) and was
+    // a half-wired third layout never exposed by the density radiogroup (list/
+    // compact/thumb). Thumb density is the canonical multi-column grid.
     const gridAttrs = {};
-    if (!isThumb && columns !== 'auto' && columns > 0) {
-        const col = Math.max(1, Math.min(4, Math.floor(columns)));
-        gridAttrs['data-columns'] = String(col);
-        gridAttrs.style = {
-            display: 'grid',
-            gridTemplateColumns: `repeat(${col}, minmax(${FILE_GRID_MIN_COL}, 1fr))`,
-            gap: 'var(--space-3)'
-        };
-    }
     // Multi-select bookkeeping. Entries are keyed by path (fallback name); a
     // locked/EACCES entry is never selectable — bulk mutations would fail on it.
     const entryKeyOf = (f) => f.path || f.name;
@@ -250,30 +254,49 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No f
     // it switches presentation of the same content, not panels.
     const densityCtl = onDensity
         ? h('div', { key: 'density', class: 'ds-density', role: 'radiogroup', 'aria-label': 'view density' },
-            ...DENSITIES.map(([k, label]) => h('button', {
+            ...DENSITIES.map(([k, label], idx) => h('button', {
                 key: 'd-' + k, type: 'button', role: 'radio',
                 class: 'ds-density-btn' + (density === k ? ' active' : ''),
                 'aria-checked': density === k ? 'true' : 'false',
+                // Icon-led, but the density name stays the accessible name
+                // (aria-label) + the native tooltip (title) so the control reads
+                // dense without losing its label.
+                'aria-label': label, title: label,
+                // Single tab stop: the checked radio is tabbable, the rest are
+                // roved. Arrow/Home/End move + select (selection follows focus).
+                tabindex: density === k ? '0' : '-1',
+                onkeydown: (e) => rovingRadio(e, idx, DENSITIES, (tk) => { if (density !== tk) onDensity(tk); }),
                 onclick: () => { if (density !== k) onDensity(k); },
-            }, label)))
+            }, Icon(DENSITY_ICONS[k], { size: 15 }))))
         : null;
-    const controlsKids = [selectAllCtl, head,
-        (selectAllCtl || head) && densityCtl ? h('span', { key: 'spread', class: 'spread' }) : null,
+    // One toolbar baseline: filter + select-all + sort sit left, density is
+    // pushed right by the spread. The filter used to be a separate right-aligned
+    // strip ABOVE controls, giving two strips with conflicting alignment.
+    const filterCtl = filter ? h('input', {
+        key: 'filter',
+        class: 'ds-file-filter-input', type: 'search',
+        value: filter.value || '', placeholder: filter.placeholder || 'Filter files',
+        'aria-label': filter.placeholder || 'Filter files in this directory',
+        oninput: (e) => filter.onInput && filter.onInput(e.target.value),
+    }) : null;
+    const leftKids = [filterCtl, selectAllCtl, head].filter(Boolean);
+    const controlsKids = [
+        ...leftKids,
+        (leftKids.length && densityCtl) ? h('span', { key: 'spread', class: 'spread' }) : null,
         densityCtl].filter(Boolean);
     const controls = controlsKids.length
         ? h('div', { class: 'ds-file-controls' }, ...controlsKids)
         : null;
-    const filterBar = filter ? h('div', { class: 'ds-file-filter' },
-        h('input', {
-            class: 'ds-file-filter-input', type: 'search',
-            value: filter.value || '', placeholder: filter.placeholder || 'Filter files',
-            'aria-label': filter.placeholder || 'Filter files in this directory',
-            oninput: (e) => filter.onInput && filter.onInput(e.target.value),
-        })) : null;
+    // A filtered miss (zero rows but an active filter) renders the EmptyState
+    // INSIDE the listing, below the controls toolbar, so the filter input stays
+    // mounted and editable - the user can clear/edit it to recover instead of
+    // being stranded with no toolbar (the early-return only fires for a genuinely
+    // empty directory). The host passes filter-aware copy via emptyText.
+    const filteredEmpty = !files.length && hasFilter;
     // role=group not listbox: the rows contain real <button> action controls, so
     // listbox/option semantics are invalid (an option can't host interactive
     // children). Keyboard nav still works via roving focus over the open buttons.
-    const grid = h('div', {
+    const grid = filteredEmpty ? EmptyState({ text: emptyText, glyph: Icon('folder-open', { size: 28 }) }) : h('div', {
         class: 'ds-file-grid' + (isThumb ? ' ds-file-grid-thumb' : '') + (refreshing ? ' is-refreshing' : ''),
         role: 'group', 'aria-label': 'files', tabindex: '0',
         'aria-busy': refreshing ? 'true' : 'false',
@@ -311,12 +334,31 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No f
                 onclick: () => onShowMore(Math.min(files.length, limit + FILE_GRID_CAP)) },
                 'show ' + Math.min(FILE_GRID_CAP, files.length - limit) + ' more') : null)
         : null;
-    return (controls || filterBar || more)
-        ? h('div', { class: 'ds-file-listing' }, filterBar, controls, grid, more)
+    return (controls || more)
+        ? h('div', { class: 'ds-file-listing' }, controls, grid, more)
         : grid;
 }
 
 const DENSITIES = [['list', 'list'], ['compact', 'compact'], ['thumb', 'thumbnails']];
+const DENSITY_ICONS = { list: 'rows', compact: 'rows-tight', thumb: 'grid' };
+
+// Roving-radiogroup keyboard helper (the WAI-ARIA radio pattern): a radiogroup
+// is a SINGLE tab stop where Arrow/Home/End move AND select among options, with
+// selection following focus. `items` is the ordered [[key, ...], ...] list;
+// `onSelect(targetKey)` is the same handler the onclick fires. Mouse path is
+// unchanged - this only adds keyboard navigation.
+function rovingRadio(e, idx, items, onSelect) {
+    let target = -1;
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') target = (idx - 1 + items.length) % items.length;
+    else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') target = (idx + 1) % items.length;
+    else if (e.key === 'Home') target = 0;
+    else if (e.key === 'End') target = items.length - 1;
+    else return;
+    e.preventDefault();
+    onSelect(items[target][0]);
+    const sib = e.currentTarget.parentNode && e.currentTarget.parentNode.children[target];
+    sib && sib.focus();
+}
 
 // FileCell — the thumbnail-density tile. Image entries show a real (lazy)
 // thumbnail through the host's confined thumbUrl; everything else keeps its
@@ -474,10 +516,20 @@ export function UploadProgress({ items = [], onDismiss } = {}) {
     );
 }
 
-export function EmptyState({ text = 'nothing here', glyph = Icon('circle') } = {}) {
+export function EmptyState({ text = 'nothing here', glyph = Icon('circle'), action } = {}) {
+    // action: { onClick, label } - an optional CTA (e.g. 'go up' / 'upload a
+    // file'), mirroring the SessionDashboard emptyAction contract so an empty
+    // directory is not a dead end. Children are built as an array + filtered so
+    // the keyed Btn never sits beside an unkeyed span (webjsx applyDiff 'key'
+    // crash on mixed keyed/unkeyed siblings).
     return h('div', { class: 'ds-file-empty', role: 'status' },
-        h('span', { class: 'ds-file-empty-glyph', 'aria-hidden': 'true' }, glyph),
-        h('span', { class: 'ds-file-empty-text' }, text)
+        ...[
+            h('span', { key: 'glyph', class: 'ds-file-empty-glyph', 'aria-hidden': 'true' }, glyph),
+            h('span', { key: 'text', class: 'ds-file-empty-text' }, text),
+            (action && action.onClick)
+                ? Btn({ key: 'ea', onClick: action.onClick, children: action.label || 'go up' })
+                : null,
+        ].filter(Boolean)
     );
 }
 

package/src/components/interaction-primitives.js

@@ -296,6 +296,13 @@ export function useKeyboardShortcut(map = {}, { scope = 'global', enabled = true
 
 export function ShortcutHint({ combo, kind = 'kbd' } = {}) { return h('kbd', { class: 'ds-kbd ds-kbd-' + kind }, formatShortcut(combo || '')); }
 
+export function ShortcutList({ shortcuts = [] } = {}) {
+    return h('div', { class: 'ds-shortcuts-hint' },
+        ...shortcuts.map(s => h('div', { class: 'ds-shortcut-row' },
+            h('kbd', { class: 'ds-kbd' }, s.keys || s.combo || ''),
+            h('span', { class: 'ds-kbd-label' }, s.desc || s.description || s.label || ''))));
+}
+
 export function useKeyboardShortcutHelp() { return { registry: Array.from(SHORTCUT_REGISTRY) }; }
 export function ShortcutHelpDialog({ open = false, onClose, registry } = {}) {
     if (!open) return null;

package/src/components/sessions.js

@@ -171,7 +171,9 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
   // sessions with no cost source (external tally rows) simply omit the segment.
   const tokText = s.tokens != null ? (typeof s.tokens === 'number' ? s.tokens.toLocaleString() : s.tokens) + ' tok' : null;
   const costText = s.cost != null ? (typeof s.cost === 'number' ? '$' + s.cost.toFixed(4) : String(s.cost)) : null;
-  const statBits = [elapsedText, s.counter != null ? s.counter : null, tokText, costText].filter((x) => x != null && x !== '');
+  // Cost is rendered as its own emphasized segment (not buried in the mono run)
+  // so the command-center cost-at-a-glance signal is scannable.
+  const statBits = [elapsedText, s.counter != null ? s.counter : null, tokText].filter((x) => x != null && x !== '');
   const activityBits = [
     s.currentTool ? 'running: ' + s.currentTool : null,
     s.lastActivity ? 'last ' + s.lastActivity : null,
@@ -195,7 +197,13 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
   ].filter(Boolean));
   const meta = h('div', { class: 'ds-dash-meta' }, ...[
     s.cwd ? h('span', { class: 'ds-dash-cwd', title: s.cwd }, s.cwd) : null,
-    statBits.length ? h('span', { class: 'ds-dash-stat' }, statBits.join(' · ')) : null,
+    (statBits.length || costText) ? h('span', { class: 'ds-dash-stat' },
+      ...[
+        statBits.length ? statBits.join(' · ') : null,
+        (statBits.length && costText) ? ' · ' : null,
+        costText ? h('span', { class: 'ds-dash-stat-cost' }, costText) : null,
+      ].filter(Boolean)
+    ) : null,
     activityBits.length ? h('span', { class: 'ds-dash-activity' }, activityBits.join(' · ')) : null,
   ].filter(Boolean));
   const actions = h('div', { class: 'ds-dash-actions', role: 'group', 'aria-label': 'session actions' }, ...[

package/src/components/shell.js

@@ -146,6 +146,10 @@ const ICON_PATHS = {
     // file-browser icons (replace folder/file emoji + arrow glyphs in fs apps)
     folder: '<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
     'folder-open': '<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2H5l-2 9z"/><path d="M3 18l2-9h17l-2 9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+    // density-picker icons (list / compact / thumbnail view modes)
+    rows: '<path d="M4 6h16M4 12h16M4 18h16"/>',
+    'rows-tight': '<path d="M4 5h16M4 9h16M4 13h16M4 17h16"/>',
+    grid: '<rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="4" y="13" width="7" height="7" rx="1"/><rect x="13" y="13" width="7" height="7" rx="1"/>',
     'file-image': '<path d="M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/><circle cx="9.5" cy="12.5" r="1.5"/><path d="M18 19l-4-4-3 3-2-2-3 3"/>',
     link: '<path d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1"/>',
     upload: '<path d="M12 16V4M7 9l5-5 5 5"/><path d="M5 20h14"/>',
@@ -318,8 +322,18 @@ function toggleWs(which) {
 
 // Column resize: read the current rendered track width and write a clamped inline
 // --ws-<col>-w on .ws-shell (inline overrides the fluid clamp base), persisted.
-const WS_RESIZE_CLAMP = { rail: [60, 360], sessions: [200, 520], pane: [240, 560] };
-function wsResize(col, dx) {
+// Floors match the CSS fluid clamp() floors in app-shell.css (--ws-rail-w
+// clamp(200,16vw,260); sessions clamp(248,22vw,360); pane clamp(288,24vw,420))
+// so a drag/arrow can never shrink a column below its designed minimum (the
+// collapsed rail is a SEPARATE class, not a resize target). The ceilings are
+// INTENTIONALLY raised above the fluid clamp() mid-term ceilings: on wide
+// viewports the 16/22/24vw mid term already pins each column to its clamp
+// ceiling, so a ceiling-equals-clamp bound made the outward drag inert there.
+// The higher resize ceilings let a deliberate drag/arrow grow a column past its
+// auto-fluid width (the inline --ws-<col>-w override pins the chosen width past
+// the clamp base).
+const WS_RESIZE_CLAMP = { rail: [200, 320], sessions: [248, 520], pane: [288, 640] };
+function wsResize(col, dx, persist = true) {
     const shell = document.querySelector('.ws-shell');
     if (!shell) return;
     const track = shell.querySelector('.ws-' + col);
@@ -327,7 +341,11 @@ function wsResize(col, dx) {
     const [lo, hi] = WS_RESIZE_CLAMP[col] || [120, 600];
     const next = Math.max(lo, Math.min(hi, Math.round(cur + dx)));
     shell.style.setProperty('--ws-' + col + '-w', next + 'px');
-    try { localStorage.setItem('ds.ws.w.' + col, String(next)); } catch (_) {}
+    const handle = shell.querySelector('.ws-resizer-' + col);
+    if (handle) handle.setAttribute('aria-valuenow', String(next));
+    // Commit to storage only on a settled move (pointerup / keyboard), not on
+    // every pointermove frame (that fired dozens of synchronous writes per drag).
+    if (persist) { try { localStorage.setItem('ds.ws.w.' + col, String(next)); } catch (_) {} }
 }
 function seedWsWidths(el) {
     if (!el) return;
@@ -340,22 +358,35 @@ function seedWsWidths(el) {
 }
 function WsResizer(col) {
     const onKey = (e) => {
-        if (e.key === 'ArrowLeft') { e.preventDefault(); wsResize(col, -16); }
-        else if (e.key === 'ArrowRight') { e.preventDefault(); wsResize(col, 16); }
+        if (e.key === 'ArrowLeft') { e.preventDefault(); wsResize(col, -16, true); }
+        else if (e.key === 'ArrowRight') { e.preventDefault(); wsResize(col, 16, true); }
     };
     const onDown = (e) => {
         e.preventDefault();
         let lastX = e.clientX;
-        const move = (ev) => { const dx = ev.clientX - lastX; lastX = ev.clientX; wsResize(col, dx); };
-        const up = () => { document.removeEventListener('pointermove', move); document.removeEventListener('pointerup', up); document.body.style.cursor = ''; };
+        const move = (ev) => { const dx = ev.clientX - lastX; lastX = ev.clientX; wsResize(col, dx, false); };
+        const up = () => {
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', up);
+            document.body.style.cursor = '';
+            wsResize(col, 0, true); // commit the settled width once
+        };
         document.addEventListener('pointermove', move);
         document.addEventListener('pointerup', up);
         document.body.style.cursor = 'col-resize';
     };
+    const [lo, hi] = WS_RESIZE_CLAMP[col] || [120, 600];
+    // Seed aria-valuenow from the rendered track width so AT announces real widths.
+    const seedNow = (el) => {
+        if (!el) return;
+        const track = el.closest('.ws-shell') && el.closest('.ws-shell').querySelector('.ws-' + col);
+        if (track) el.setAttribute('aria-valuenow', String(Math.round(track.getBoundingClientRect().width)));
+    };
     return h('div', {
         class: 'ws-resizer ws-resizer-' + col, role: 'separator', tabindex: '0',
         'aria-orientation': 'vertical', 'aria-label': 'resize ' + col + ' column (arrow keys)',
-        onpointerdown: onDown, onkeydown: onKey,
+        'aria-valuemin': String(lo), 'aria-valuemax': String(hi),
+        onpointerdown: onDown, onkeydown: onKey, ref: seedNow,
     });
 }
 
@@ -483,6 +514,15 @@ export function WorkspaceShell({ rail, sessions, main, pane, crumb, status, narr
                         'aria-expanded': 'true', onclick: () => toggleWs('sessions'),
                     }, Icon('chevron-left')) : null,
                     h('div', { class: 'ws-crumb-main' }, crumb),
+                    // Desktop-only context-pane collapse, on the same crumb-level
+                    // chrome idiom as the sessions toggle. Hidden on mobile via CSS.
+                    hasPane ? h('button', {
+                        class: 'ws-desktop-toggle ws-pane-toggle', type: 'button',
+                        'aria-label': paneIsCollapsed ? 'show context pane' : 'hide context pane',
+                        title: paneIsCollapsed ? 'show context pane' : 'hide context pane',
+                        'aria-expanded': paneIsCollapsed ? 'false' : 'true',
+                        onclick: () => toggleWs('pane'),
+                    }, Icon(paneIsCollapsed ? 'chevron-left' : 'chevron-right')) : null,
                     hasPane ? h('button', {
                         class: 'ws-drawer-toggle ws-pane-drawer-toggle', type: 'button',
                         'aria-label': 'toggle context pane', 'aria-expanded': 'false',
@@ -492,16 +532,10 @@ export function WorkspaceShell({ rail, sessions, main, pane, crumb, status, narr
             h('main', { class: 'ws-main' + (narrow ? ' narrow' : '') + (mainFlush ? ' ws-main--flush' : ''), id: 'ws-main', tabindex: '-1' },
                 ...(Array.isArray(main) ? main : [main])),
             status || null),
-        // Optional right context pane with its own collapse toggle.
+        // Optional right context pane. Its desktop collapse toggle now lives in
+        // the crumb cluster, alongside the sessions toggle.
         hasPane
             ? h('aside', { class: 'ws-pane', role: 'complementary', 'aria-label': paneLabel },
-                h('button', {
-                    class: 'ws-pane-toggle', type: 'button',
-                    'aria-label': paneIsCollapsed ? 'show context pane' : 'hide context pane',
-                    title: paneIsCollapsed ? 'show context pane' : 'hide context pane',
-                    'aria-expanded': paneIsCollapsed ? 'false' : 'true',
-                    onclick: () => toggleWs('pane'),
-                }, Icon(paneIsCollapsed ? 'chevron-left' : 'chevron-right')),
                 pane)
             : null,
         // Keyboard/pointer column resize handles (desktop only).
@@ -550,8 +584,8 @@ export function WorkspaceRail({ brand = '247420', action, items = [], footer } =
     );
 }
 
-export function Heading({ level = 1, children, style = '', 'aria-level': ariaLevel }) {
-    return h('h' + level, { style, 'aria-level': ariaLevel != null ? String(ariaLevel) : null }, children);
+export function Heading({ level = 1, children, style = '', class: className = '', 'aria-level': ariaLevel }) {
+    return h('h' + level, { class: className || null, style, 'aria-level': ariaLevel != null ? String(ariaLevel) : null }, children);
 }
 
 export function Lede({ children }) {

package/src/components.js

@@ -66,7 +66,7 @@ export {
 
 export {
     useDraggable, useDropTarget, useNumberScrub, usePointerDrag, Reorderable,
-    useKeyboardShortcut, formatShortcut, ShortcutHint,
+    useKeyboardShortcut, formatShortcut, ShortcutHint, ShortcutList,
     useKeyboardShortcutHelp, ShortcutHelpDialog
 } from './components/interaction-primitives.js';