anentrypoint-design 0.0.210 → 0.0.212

package/package.json

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

package/src/components/content.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),
@@ -100,7 +100,13 @@ export function Row({ code, rank, title, sub, meta, active, state = 'default', o
                 onkeydown: (e) => { e.stopPropagation(); },
             }, a.label)))
         : null;
+    // Color is not the only status channel: emit a visually-hidden word for the
+    // meaningful rail tones (error/subagent) so AT and color-blind users get the
+    // 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;
     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),

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',
@@ -97,7 +93,7 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
         'aria-label': (marked ? 'unselect ' : 'select ') + name,
         disabled: (noAccess || busy) ? true : null,
         onclick: onMark ? (e) => onMark({ range: !!e.shiftKey }) : null,
-    }, h('span', { 'aria-hidden': 'true' }, marked ? '[x]' : '[ ]')) : null;
+    }, h('span', { class: 'ds-check-box', 'aria-hidden': 'true' })) : null;
     // A role=button row containing real <button> action controls is invalid
     // HTML (interactive nesting). Instead the row is a plain container and the
     // primary "open" affordance is itself a real <button> (native keyboard +
@@ -178,7 +174,7 @@ export function sortFiles(files = [], sort = 'name', dir = 'asc') {
 const FILE_GRID_CAP = 200;
 
 export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No files here yet',
-                          columns = 'auto', sort, filter, loading = false,
+                          sort, filter, loading = false,
                           shown, onShowMore, actions, busy,
                           // Canonical multi-select contract (shared with
                           // SessionDashboard): selected/onToggleSelect.
@@ -200,16 +196,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;
@@ -243,7 +234,7 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No f
             'aria-checked': allState,
             'aria-label': allState === 'true' ? 'clear selection' : 'select all ' + selectableKeys.length + ' shown files',
             onclick: () => (allState === 'true' && onClearSelection) ? onClearSelection() : onSelectAll(selectableKeys) },
-            h('span', { 'aria-hidden': 'true' }, allState === 'true' ? '[x]' : allState === 'mixed' ? '[-]' : '[ ]'),
+            h('span', { class: 'ds-check-box', 'aria-hidden': 'true' }),
             h('span', {}, 'all'))
         : null;
     // Density picker — list / compact / thumbnails. A radiogroup, not tabs:
@@ -257,19 +248,24 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No f
                 onclick: () => { if (density !== k) onDensity(k); },
             }, label)))
         : 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;
     // 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.
@@ -311,8 +307,8 @@ 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;
 }
 
@@ -334,7 +330,7 @@ function FileCell({ key, f = {}, selectable = false, marked = false, onMark, onO
             'aria-label': (marked ? 'unselect ' : 'select ') + f.name,
             disabled: noAccess ? true : null,
             onclick: onMark ? (e) => onMark({ range: !!e.shiftKey }) : null,
-        }, h('span', { 'aria-hidden': 'true' }, marked ? '[x]' : '[ ]')) : null,
+        }, h('span', { class: 'ds-check-box', 'aria-hidden': 'true' })) : null,
         h('button', {
             key: 'open', type: 'button', class: 'ds-file-cell-open',
             onclick: canOpen ? () => onOpen(f) : 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,
@@ -186,7 +188,7 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
       'aria-checked': selected ? 'true' : 'false',
       'aria-label': (selected ? 'deselect' : 'select') + ' session ' + (s.title || s.agent || s.sid),
       onclick: () => onToggleSelect && onToggleSelect(s),
-    }, selected ? '[x]' : '[ ]') : null,
+    }, h('span', { class: 'ds-check-box', 'aria-hidden': 'true' })) : null,
     h('span', { class: 'status-dot-disc ' + STATUS_DISC[st], 'aria-hidden': 'true' }),
     h('span', { class: 'ds-dash-status is-' + st }, STATUS_WORD[st]),
     s.external ? h('span', { class: 'ds-dash-external' }, 'external') : null,
@@ -195,7 +197,10 @@ 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.join(' · '),
+      costText ? h('span', { class: 'ds-dash-stat-cost' }, (statBits.length ? ' · ' : '') + costText) : null
+    ) : 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' }, ...[
@@ -310,7 +315,7 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
     ? h('button', { key: 'selall', type: 'button', class: 'ds-dash-selectall', role: 'checkbox',
         'aria-checked': allState, 'aria-label': allState === 'true' ? 'clear selection' : 'select all sessions',
         onclick: () => (allState === 'true' && onClearSelection) ? onClearSelection() : onSelectAll(selectableSids) },
-        h('span', { 'aria-hidden': 'true' }, allState === 'true' ? '[x]' : allState === 'mixed' ? '[-]' : '[ ]'),
+        h('span', { class: 'ds-check-box', 'aria-hidden': 'true' }),
         h('span', {}, 'all'))
     : null;
   const clearCtl = (selectable && selCount && onClearSelection)

package/src/components/shell.js

@@ -318,8 +318,13 @@ 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) {
+// Bounds are derived from the CSS fluid clamp() floors/ceilings 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 floor (the collapsed rail is a SEPARATE class, not a resize target)
+// nor grow past the ultrawide ceiling.
+const WS_RESIZE_CLAMP = { rail: [200, 260], sessions: [248, 360], pane: [288, 420] };
+function wsResize(col, dx, persist = true) {
     const shell = document.querySelector('.ws-shell');
     if (!shell) return;
     const track = shell.querySelector('.ws-' + col);
@@ -327,7 +332,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 +349,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,
     });
 }
 
@@ -550,8 +572,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 }) {