anentrypoint-design 0.0.212 → 0.0.213

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.212",
+  "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

@@ -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

@@ -55,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.
@@ -109,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
@@ -121,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,
@@ -130,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' }),
@@ -173,7 +180,7 @@ 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',
+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
@@ -187,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.
@@ -241,12 +254,20 @@ 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;
     // 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
@@ -266,10 +287,16 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No f
     const controls = controlsKids.length
         ? h('div', { class: 'ds-file-controls' }, ...controlsKids)
         : 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',
@@ -313,6 +340,25 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No f
 }
 
 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
@@ -470,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

@@ -198,8 +198,11 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
   const meta = h('div', { class: 'ds-dash-meta' }, ...[
     s.cwd ? h('span', { class: 'ds-dash-cwd', title: s.cwd }, s.cwd) : null,
     (statBits.length || costText) ? h('span', { class: 'ds-dash-stat' },
-      statBits.join(' · '),
-      costText ? h('span', { class: 'ds-dash-stat-cost' }, (statBits.length ? ' · ' : '') + costText) : null
+      ...[
+        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));

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,12 +322,17 @@ 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.
-// 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] };
+// 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;
@@ -505,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',
@@ -514,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).

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';