anentrypoint-design 0.0.207 → 0.0.209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.207",
+  "version": "0.0.209",
   "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",
@@ -67,7 +67,9 @@
   ],
   "scripts": {
     "lint:tokens": "node scripts/lint-tokens.mjs",
-    "build": "node scripts/build.mjs"
+    "build": "node scripts/build.mjs",
+    "lint:null-children": "node scripts/lint-null-children.mjs",
+    "lint:classes": "node scripts/lint-classes.mjs"
   },
   "repository": {
     "type": "git",

package/src/components/agent-chat.js

@@ -14,6 +14,7 @@ import * as webjsx from '../../vendor/webjsx/index.js';
 import { ChatComposer, ChatMessage, makeThreadAutoScroll } from './chat.js';
 import { Select } from './content.js';
 import { Btn, Icon } from './shell.js';
+import { initializeCachesEagerly } from '../markdown-cache.js';
 
 const h = webjsx.createElement;
 
@@ -119,7 +120,7 @@ function CwdBar({ cwd, editing, draft, onEdit, onSave, onCancel, onClear, onDraf
         'aria-describedby': hint ? 'agentchat-cwd-hint' : null,
         'aria-invalid': error ? 'true' : null,
         oninput: (e) => onDraft && onDraft(e.target.value) }),
-      Btn({ key: 'save', primary: true, disabled: !!(error || checking), onClick: () => onSave && onSave(), children: 'save' }),
+      Btn({ key: 'save', variant: 'primary', disabled: !!(error || checking), onClick: () => onSave && onSave(), children: 'save' }),
       Btn({ key: 'cancel', onClick: () => onCancel && onCancel(), children: 'cancel' }),
       hint ? h('span', { key: 'hint', id: 'agentchat-cwd-hint', role: 'status', 'aria-live': 'polite',
         class: 'agentchat-cwd-hint' + (error ? ' is-error' : ' is-checking') }, hint) : null);
@@ -158,6 +159,11 @@ export function AgentChat(props = {}) {
     shownMessages, onShowEarlier,
   } = props;
 
+  // Warm the markdown/Prism stack the moment the surface mounts so the CDN
+  // round-trip never starts mid-first-response. Self-idempotent (internal
+  // _initPromise), so the per-render call is free after the first.
+  initializeCachesEagerly().catch((err) => console.warn('[247420] cache init error:', err));
+
   const name = agentName || (agents.find((a) => a.id === selectedAgent)?.name) || selectedAgent || 'agent';
   const lastIdx = messages.length - 1;
   const lastMsg = messages[lastIdx];
@@ -251,7 +257,7 @@ export function AgentChat(props = {}) {
     }
     return ChatMessage({
       key: m.id || String(i),
-      who: isAssistant ? 'them' : 'you',
+      role: isAssistant ? 'assistant' : 'user',
       // Claude-Code-web layout: flat full-width turns (no avatar disc, no colored
       // bubble), distinguished by a role label + a faint assistant background.
       // aicat is left OFF so the mascot tint never reaches the agent surface.

package/src/components/chat.js

@@ -164,6 +164,11 @@ function MdNode(p) {
         const srcKey = (isMarkdownDegraded() ? '~degraded~' : '') + (p.text || '');
         if (el.dataset.mdSrc === srcKey) return;
         el.dataset.mdSrc = srcKey;
+        // Markdown stack still loading (or down): paint the raw text
+        // synchronously so streamed tokens are visible the same frame they
+        // arrive (an empty bubble until the CDN import resolves reads as a
+        // hang); the resolved render swaps in sanitized markdown in place.
+        if (isMarkdownDegraded()) el.textContent = p.text || '';
         renderMarkdownCached(p.text || '').then((html) => { el.innerHTML = html; injectCodeCopy(el); });
     };
     return h('div', { class: 'chat-bubble chat-md', ref: refSink });
@@ -446,25 +451,37 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
     // segment routes to the cwd editor WITHOUT making the whole line one giant
     // click target. Legacy whole-line context.onClick is honored only when no
     // bit carries its own handler. All children are keyed VElements.
-    const ctxBits = (context && context.bits) ? context.bits.filter(Boolean) : [];
-    const hasBitClicks = ctxBits.some((b) => b && typeof b === 'object' && b.onClick);
+    // Normalize FIRST (a bit may carry `text` or `label`), then drop empties -
+    // separators must only ever sit between bits that actually render. An
+    // object bit whose text resolved empty used to leave a dangling trailing
+    // middot AND an invisible zero-width button.
+    const ctxBits = ((context && context.bits) ? context.bits : [])
+        .map((b) => {
+            if (b == null) return null;
+            if (typeof b === 'object') {
+                const text = b.text || b.label || '';
+                return text ? { text, onClick: b.onClick, title: b.title } : null;
+            }
+            const text = String(b);
+            return text ? { text } : null;
+        })
+        .filter(Boolean);
+    const hasBitClicks = ctxBits.some((b) => b.onClick);
     let contextLine = null;
     if (ctxBits.length && hasBitClicks) {
         const kids = [];
         ctxBits.forEach((b, i) => {
             if (i) kids.push(h('span', { key: 'csep' + i, class: 'chat-composer-context-sep', 'aria-hidden': 'true' }, ' · '));
-            const isObj = b && typeof b === 'object';
-            const text = isObj ? (b.text || '') : String(b);
-            if (isObj && b.onClick) kids.push(h('button', {
+            if (b.onClick) kids.push(h('button', {
                 key: 'cbit' + i, type: 'button', class: 'chat-composer-context-bit',
-                title: b.title || null, 'aria-label': b.title || text,
+                title: b.title || null, 'aria-label': b.title || b.text,
                 onclick: (e) => { e.preventDefault(); b.onClick(e); },
-            }, text));
-            else kids.push(h('span', { key: 'cbit' + i, class: 'chat-composer-context-text' }, text));
+            }, b.text));
+            else kids.push(h('span', { key: 'cbit' + i, class: 'chat-composer-context-text' }, b.text));
         });
         contextLine = h('div', { class: 'chat-composer-context' }, ...kids);
     } else if (ctxBits.length) {
-        const joined = ctxBits.map((b) => (b && typeof b === 'object') ? (b.text || '') : String(b)).filter(Boolean).join(' · ');
+        const joined = ctxBits.map((b) => b.text).join(' · ');
         contextLine = h(context.onClick ? 'button' : 'div', {
             class: 'chat-composer-context', type: context.onClick ? 'button' : null,
             'aria-label': context.onClick ? ('change target: ' + joined) : null,

package/src/components/content.js

@@ -183,7 +183,7 @@ export function WorksList({ works = [], openedIndex = -1, onToggle }) {
                         h('p', { class: 'ds-work-body' }, w.body)
                     ),
                     h('div', { class: 'ds-work-actions' },
-                        Btn({ primary: true, href: w.href || '#', children: 'open ->' }),
+                        Btn({ variant: 'primary', href: w.href || '#', children: 'open ->' }),
                         Btn({ href: w.source || '#', children: 'source' })
                     )
                 ) : null
@@ -302,11 +302,24 @@ export function ProjectView({ project = {}, copied, onCopy } = {}) {
     ].filter(Boolean).flat();
 }
 
-export function PageHeader({ title, lede, eyebrow, right, compact, id }) {
+export function PageHeader({ title, lede, eyebrow, right, compact, dense, id }) {
     // `compact` drops the large leading/trailing section margins so a PageHeader
     // used as a page's first element top-aligns cleanly without the consumer
     // having to !important-override the .ds-section margin. `id` lands on the
     // outermost section so the header can serve as a deep-link anchor.
+    // `dense` is the content-first working-surface form: one row - a small
+    // heading with the lede beside it, clamped to a single muted line - instead
+    // of a display H1 over a paragraph. App surfaces (files, dashboards,
+    // settings) should not spend 150px of fold on an intro.
+    if (dense) {
+        return h('section', { class: 'ds-section ds-section-compact ds-page-header-dense', id: id || null },
+            h('div', { class: 'ds-page-header-dense-row' },
+                ...[
+                    title != null ? h('h1', { key: 'dh' }, title) : null,
+                    lede != null ? h('span', { key: 'dl', class: 'ds-page-header-dense-lede', title: typeof lede === 'string' ? lede : null }, lede) : null,
+                    right != null ? h('div', { key: 'dr', class: 'ds-page-header-right' }, ...(Array.isArray(right) ? right : [right])) : null,
+                ].filter(Boolean)));
+    }
     return h('section', { class: 'ds-section' + (compact ? ' ds-section-compact' : ''), id: id || null },
         eyebrow ? h('span', { class: 'eyebrow' }, eyebrow) : null,
         title != null ? h('h1', {}, title) : null,
@@ -379,8 +392,20 @@ export function Select({ label, value = '', options = [], onChange, name, key, p
     );
 }
 
-export function EventList({ items, events, emptyText = 'no events', rankPad = 3 }) {
+export function EventList({ items, events, emptyText = 'no events', rankPad = 3, loading = false, loadingText = 'loading events…' }) {
     const list = items || events || [];
+    // Shape-matched skeleton rows for the slow first events fetch (the ccsniff
+    // cold walk can take 30-90s) - a lone spinner collapses the whole pane.
+    // Keying discipline mirrors ConversationList: a single keyed wrapper with
+    // all-keyed siblings (webjsx applyDiff crashes on mixed keyed/unkeyed).
+    if (loading && !list.length) {
+        return h('section', { class: 'ds-section ds-event-list' },
+            h('div', { key: 'st', role: 'status', 'aria-live': 'polite', class: 'ds-event-state lede' }, loadingText),
+            ...Array.from({ length: 7 }, (_, i) => h('div', { key: 'sk' + i, class: 'ds-event-row-skeleton', 'aria-hidden': 'true' },
+                h('span', { key: 'r', class: 'ds-skel ds-skel-rank' }),
+                h('span', { key: 't', class: 'ds-skel ds-skel-title' }),
+                h('span', { key: 'm', class: 'ds-skel ds-skel-meta' }))));
+    }
     if (!list.length) return h('p', { class: 'lede' }, emptyText);
     return h('section', { class: 'ds-section ds-event-list' },
         ...list.map((it, i) => Row({

package/src/components/context-pane.js

@@ -59,6 +59,10 @@ export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session,
                     // Use the rail tone consistently with the GUI-wide semantics:
                     // green = active/ok. A default cwd carries no rail (neutral).
                     rail: cwd ? 'green' : null,
+                    // The change-cwd affordance belongs ON the working-dir fact,
+                    // not as a button floating under the panels.
+                    onClick: onSetCwd || undefined,
+                    meta: onSetCwd ? 'change' : undefined,
                 }),
                 Row({
                     title: 'running tools',
@@ -69,8 +73,9 @@ export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session,
         }),
     ];
     // Conversation block: whole-session totals (turn count + accumulated cost)
-    // between the context panel and the per-turn usage panel.
-    if (hasSession) {
+    // between the context panel and the per-turn usage panel. All-zero totals
+    // are noise, not context - hide the block until there is a conversation.
+    if (hasSession && (Number(session.turns) > 0 || Number(session.cost) > 0)) {
         const sesRows = [];
         if (session.turns != null) sesRows.push(Row({ title: 'turns', meta: String(session.turns) }));
         if (session.cost != null) sesRows.push(Row({ title: 'total cost', meta: '$' + Number(session.cost).toFixed(4) }));
@@ -88,11 +93,6 @@ export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session,
         if (usage.durationMs != null) tokRows.push(Row({ title: 'duration', meta: fmtDuration(usage.durationMs) }));
         panels.push(Panel({ title: 'last turn', children: tokRows }));
     }
-    return h('div', { class: 'ds-context' },
-        ...panels,
-        onSetCwd
-            ? h('div', { class: 'ds-context-actions' },
-                Btn({ onClick: onSetCwd, children: 'set working dir' }))
-            : null,
-    );
+    // The cwd action lives on the working-dir row above; no floating footer button.
+    return h('div', { class: 'ds-context' }, ...panels);
 }

package/src/components/files-modals.js

@@ -151,7 +151,7 @@ function modalError(error) {
 // `error` renders inside .ds-modal-body (role=alert, error tone). `busy`
 // disables both action buttons AND the Escape/backdrop close paths; the confirm
 // label flips to `busyLabel` (default 'working…') so the in-flight state reads.
-export function ConfirmDialog({ title = 'confirm', message, confirmLabel = 'confirm', cancelLabel = 'cancel', destructive, onConfirm, onCancel, error, busy = false, busyLabel = 'working…' } = {}) {
+export function ConfirmDialog({ title = 'Are you sure?', message, confirmLabel = 'confirm', cancelLabel = 'cancel', destructive, onConfirm, onCancel, error, busy = false, busyLabel = 'working…' } = {}) {
     return Modal({
         onClose: onCancel,
         kind: 'small',
@@ -160,12 +160,12 @@ export function ConfirmDialog({ title = 'confirm', message, confirmLabel = 'conf
         body: [message || '', modalError(error)].filter(Boolean),
         actions: [
             Btn({ onClick: onCancel, disabled: busy, children: cancelLabel }),
-            Btn({ primary: true, danger: !!destructive, disabled: busy, onClick: onConfirm, children: busy ? busyLabel : confirmLabel })
+            Btn({ variant: 'primary', disabled: busy, onClick: onConfirm, children: busy ? busyLabel : confirmLabel })
         ]
     });
 }
 
-export function PromptDialog({ title = 'name', value = '', placeholder = '', confirmLabel = 'ok', cancelLabel = 'cancel', onConfirm, onCancel, onInput, error, busy = false, busyLabel = 'working…' } = {}) {
+export function PromptDialog({ title = 'Enter a name', value = '', placeholder = '', confirmLabel = 'ok', cancelLabel = 'cancel', onConfirm, onCancel, onInput, error, busy = false, busyLabel = 'working…' } = {}) {
     return Modal({
         onClose: onCancel,
         kind: 'small',

package/src/components/files.js

@@ -51,7 +51,7 @@ export function FileIcon({ type = 'other' } = {}) {
 const FILE_ROW_ACTIONS = ['download', 'rename', 'delete'];
 
 export function FileRow({ name, type = 'other', size, modified, code, onOpen, onAction, active, key, permissions, locked,
-                          actions = FILE_ROW_ACTIONS, busy = false } = {}) {
+                          actions = FILE_ROW_ACTIONS, busy = false, selectable = false, marked = false, onMark } = {}) {
     // permissions: ['read','write'] | ['read'] | 'EACCES'. A no-access entry can
     // be listed (the dir stat saw it) but not opened — show an ASCII tag and
     // disable the open button so the row reads honestly instead of silently
@@ -85,17 +85,27 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
         actions.indexOf('delete') !== -1
             ? actBtn('delete', 'delete', `delete ${name}`, 'x', true) : null,
     ].filter(Boolean) : [];
+    // Multi-select checkbox — a sibling control before the open button so the
+    // row stays valid HTML (no interactive nesting). A no-access entry cannot
+    // be marked (bulk mutations would fail on it anyway).
+    const checkCtl = selectable ? h('button', {
+        key: 'mark',
+        type: 'button',
+        class: 'ds-file-check' + (marked ? ' is-marked' : ''),
+        role: 'checkbox',
+        'aria-checked': marked ? 'true' : 'false',
+        '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;
     // 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 +
     // semantics); the per-file action buttons sit alongside it as siblings.
-    return h('div', {
-        key,
-        class: 'ds-file-row row' + (active ? ' active' : '') + (noAccess ? ' is-locked' : ''),
-        'data-file-type': type,
-        'aria-busy': busy ? 'true' : null,
-    },
+    const rowKids = [
+        checkCtl,
         h('button', {
+            key: 'open',
             type: 'button',
             class: 'ds-file-open',
             onclick: canOpen ? onOpen : null,
@@ -108,10 +118,17 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
             h('span', { class: 'title' }, name),
             h('span', { class: 'ds-file-meta meta', 'aria-label': meta ? `metadata: ${meta}` : null }, meta || '—')
         ),
-        actionBtns.length ? h('span', { class: 'ds-file-actions', role: 'group', 'aria-label': `actions for ${name}` },
+        actionBtns.length ? h('span', { key: 'acts', class: 'ds-file-actions', role: 'group', 'aria-label': `actions for ${name}` },
             ...actionBtns
-        ) : null
-    );
+        ) : null,
+    ].filter(Boolean);
+    return h('div', {
+        key,
+        class: 'ds-file-row row' + (active ? ' active' : '') + (noAccess ? ' is-locked' : '')
+            + (marked ? ' is-marked' : '') + (selectable ? ' is-selectable' : ''),
+        'data-file-type': type,
+        'aria-busy': busy ? 'true' : null,
+    }, ...rowKids);
 }
 
 // FileSkeleton — placeholder shimmer rows shown while a directory loads, so the
@@ -162,16 +179,29 @@ const FILE_GRID_CAP = 200;
 
 export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No files here yet',
                           columns = 'auto', sort, filter, loading = false,
-                          shown, onShowMore, actions, busy } = {}) {
-    if (loading) return FileSkeleton({});
+                          shown, onShowMore, actions, busy,
+                          // Canonical multi-select contract (shared with
+                          // SessionDashboard): selected/onToggleSelect.
+                          // marked/onMark are accepted FileGrid aliases.
+                          selectable = false, selected, onToggleSelect,
+                          marked = selected, onMark = onToggleSelect,
+                          onSelectAll, onClearSelection,
+                          density = 'list', onDensity, thumbUrl } = {}) {
+    // Skeleton ONLY for a cold load. A refresh of a populated grid (rename /
+    // 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 });
+    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.
     const limit = shown != null ? shown : FILE_GRID_CAP;
     const capped = files.length > limit;
     const visible = capped ? files.slice(0, limit) : files;
+    const isThumb = density === 'thumb';
     const gridAttrs = {};
-    if (columns !== 'auto' && columns > 0) {
+    if (!isThumb && columns !== 'auto' && columns > 0) {
         const col = Math.max(1, Math.min(4, Math.floor(columns)));
         gridAttrs['data-columns'] = String(col);
         gridAttrs.style = {
@@ -180,19 +210,59 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No f
             gap: 'var(--space-3)'
         };
     }
-    // Keyboard: roving focus over the .ds-file-open buttons inside the grid.
+    // 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;
+    const isLockedEntry = (f) => f.locked || f.permissions === 'EACCES'
+        || (Array.isArray(f.permissions) && f.permissions.length === 0);
+    const selSet = marked instanceof Set ? marked : new Set(marked || []);
+    const selectableKeys = selectable ? visible.filter((f) => !isLockedEntry(f)).map(entryKeyOf) : [];
+    // Keyboard: roving focus over the open buttons inside the grid (rows and
+    // thumbnail cells share the pattern). Ctrl/Cmd+A selects all SHOWN rows.
     const onKeyDown = (e) => {
         const grid = e.currentTarget;
-        const opens = Array.from(grid.querySelectorAll('.ds-file-open:not([disabled])'));
-        if (!opens.length) return;
+        const opens = Array.from(grid.querySelectorAll('.ds-file-open:not([disabled]), .ds-file-cell-open:not([disabled])'));
         const cur = opens.indexOf(document.activeElement);
         if (e.key === 'ArrowDown') { e.preventDefault(); opens[Math.min(opens.length - 1, cur + 1)]?.focus(); }
         else if (e.key === 'ArrowUp') { e.preventDefault(); (cur <= 0 ? opens[0] : opens[cur - 1])?.focus(); }
         else if (e.key === 'Home') { e.preventDefault(); opens[0]?.focus(); }
         else if (e.key === 'End') { e.preventDefault(); opens[opens.length - 1]?.focus(); }
         else if (e.key === 'Backspace') { e.preventDefault(); onUp && onUp(); }
+        else if ((e.key === 'a' || e.key === 'A') && (e.ctrlKey || e.metaKey)
+                 && selectable && onSelectAll && selectableKeys.length) {
+            e.preventDefault(); onSelectAll(selectableKeys);
+        }
     };
     const head = sort ? FileSortHeader(sort) : null;
+    // Tri-state select-all over the selectable SHOWN rows (the cap label below
+    // already tells the user more rows exist beyond the window).
+    const selOfVisible = selectableKeys.filter((k) => selSet.has(k)).length;
+    const allState = selOfVisible === 0 ? 'false' : (selOfVisible === selectableKeys.length ? 'true' : 'mixed');
+    const selectAllCtl = (selectable && onSelectAll && selectableKeys.length)
+        ? h('button', { key: 'selall', type: 'button', class: 'ds-file-selectall', role: 'checkbox',
+            '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', {}, 'all'))
+        : null;
+    // Density picker — list / compact / thumbnails. A radiogroup, not tabs:
+    // 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', {
+                key: 'd-' + k, type: 'button', role: 'radio',
+                class: 'ds-density-btn' + (density === k ? ' active' : ''),
+                'aria-checked': density === k ? 'true' : 'false',
+                onclick: () => { if (density !== k) onDensity(k); },
+            }, label)))
+        : null;
+    const controlsKids = [selectAllCtl, head,
+        (selectAllCtl || head) && 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',
@@ -203,16 +273,33 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No f
     // 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', { class: 'ds-file-grid', role: 'group', 'aria-label': 'files', tabindex: '0', onkeydown: onKeyDown, ...gridAttrs },
-        ...visible.map((f, i) => FileRow({
-            key: f.path || f.name + i,
-            name: f.name, type: f.type, size: f.size, modified: f.modified, code: f.code, active: f.active,
-            permissions: f.permissions, locked: f.locked,
-            actions: actions != null ? actions : undefined,
-            busy: busy != null ? !!busy : !!f.busy,
-            onOpen: onOpen ? () => onOpen(f) : null,
-            onAction: onAction ? (act) => onAction(act, f) : null
-        }))
+    const grid = 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',
+        // Always concrete (webjsx's attribute diff can leave a null-valued
+        // attribute unset when toggling away from the default).
+        'data-density': density || 'list',
+        onkeydown: onKeyDown, ...gridAttrs },
+        ...visible.map((f, i) => isThumb
+            ? FileCell({
+                key: f.path || f.name + i, f,
+                selectable, marked: selSet.has(entryKeyOf(f)),
+                onMark: onMark ? (opts) => onMark(f, opts) : null,
+                onOpen,
+                thumb: (thumbUrl && f.type === 'image') ? thumbUrl(f) : null,
+            })
+            : FileRow({
+                key: f.path || f.name + i,
+                name: f.name, type: f.type, size: f.size, modified: f.modified, code: f.code, active: f.active,
+                permissions: f.permissions, locked: f.locked,
+                actions: actions != null ? actions : undefined,
+                busy: busy != null ? !!busy : !!f.busy,
+                selectable, marked: selSet.has(entryKeyOf(f)),
+                onMark: onMark ? (opts) => onMark(f, opts) : null,
+                onOpen: onOpen ? () => onOpen(f) : null,
+                onAction: onAction ? (act) => onAction(act, f) : null
+            }))
     );
     // A count + "show more" affordance so a capped large dir reads as "more
     // exist", not "this is everything". aria-live announces the shown/total.
@@ -224,11 +311,70 @@ 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 (head || filterBar || more)
-        ? h('div', { class: 'ds-file-listing' }, filterBar, head, grid, more)
+    return (controls || filterBar || more)
+        ? h('div', { class: 'ds-file-listing' }, filterBar, controls, grid, more)
         : grid;
 }
 
+const DENSITIES = [['list', 'list'], ['compact', 'compact'], ['thumb', 'thumbnails']];
+
+// FileCell — the thumbnail-density tile. Image entries show a real (lazy)
+// thumbnail through the host's confined thumbUrl; everything else keeps its
+// type icon. Same open/mark semantics as FileRow, same no-nesting rule.
+function FileCell({ key, f = {}, selectable = false, marked = false, onMark, onOpen, thumb } = {}) {
+    const noAccess = f.locked || f.permissions === 'EACCES'
+        || (Array.isArray(f.permissions) && f.permissions.length === 0);
+    const canOpen = onOpen && !noAccess;
+    const typeLabel = TYPE_LABELS[f.type] || 'file';
+    const kids = [
+        selectable ? h('button', {
+            key: 'mark', type: 'button',
+            class: 'ds-file-check ds-file-cell-check' + (marked ? ' is-marked' : ''),
+            role: 'checkbox', 'aria-checked': marked ? 'true' : 'false',
+            '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('button', {
+            key: 'open', type: 'button', class: 'ds-file-cell-open',
+            onclick: canOpen ? () => onOpen(f) : null,
+            disabled: canOpen ? null : true,
+            'aria-label': typeLabel + ': ' + f.name + (noAccess ? ' (no access)' : ''),
+        },
+            h('span', { class: 'ds-file-cell-media' },
+                thumb
+                    ? h('img', { class: 'ds-file-cell-thumb', src: thumb, alt: '', loading: 'lazy' })
+                    : FileIcon({ type: f.type })),
+            h('span', { class: 'ds-file-cell-name', title: f.name }, f.name),
+            h('span', { class: 'ds-file-cell-meta' }, f.type === 'dir' ? 'folder' : fmtFileSize(f.size))),
+    ].filter(Boolean);
+    return h('div', {
+        key,
+        class: 'ds-file-cell' + (marked ? ' is-marked' : '') + (f.active ? ' active' : '') + (noAccess ? ' is-locked' : ''),
+        'data-file-type': f.type,
+    }, ...kids);
+}
+
+// BulkBar — the act-on-selection strip shown while a multi-select is active.
+// Host renders it above the grid; `actions` are [{ label, onClick, danger,
+// disabled }]; `busy` disables everything while a bulk operation is in flight.
+export function BulkBar({ count = 0, noun = 'file', nounPlural, actions = [], onClear, busy = false } = {}) {
+    if (!count) return null;
+    // 'entry' pluralizes to 'entries', not 'entrys' - handle the -y noun class
+    // unless the host passes an explicit plural.
+    const plural = nounPlural || (/[^aeiou]y$/.test(noun) ? noun.slice(0, -1) + 'ies' : noun + 's');
+    const kids = [
+        h('span', { key: 'count', class: 'ds-bulkbar-count', role: 'status', 'aria-live': 'polite' },
+            count + ' ' + (count === 1 ? noun : plural) + ' selected'),
+        ...actions.map((a, i) => Btn({
+            key: 'bba' + i, danger: !!a.danger, disabled: busy || a.disabled,
+            onClick: a.onClick, children: a.label,
+        })),
+        onClear ? Btn({ key: 'bbclear', disabled: busy, onClick: onClear, children: 'clear selection' }) : null,
+    ].filter(Boolean);
+    return h('div', { class: 'ds-bulkbar', role: 'toolbar', 'aria-label': 'bulk file actions', 'aria-busy': busy ? 'true' : null }, ...kids);
+}
+
 // Clickable column headers for FileGrid sort. Active column shows its direction
 // as an ASCII caret word (asc/desc) - never a glyph arrow.
 function FileSortHeader({ key: active = 'name', dir = 'asc', onSort } = {}) {
@@ -266,8 +412,13 @@ export function RootsPicker({ roots = [], selected, onSelect, label = 'roots' }
 }
 
 export function DropZone({ children, dragover, onDrop, onDragOver, onDragLeave, label = 'drop files here', onPick } = {}) {
+    // With children the zone is a passive WRAPPER: content renders normally and
+    // the dashed affordance appears only while a drag is over it (real file
+    // managers never burn a permanent band on a maybe-drop). Without children
+    // it keeps the explicit picker-block look.
+    const kids = Array.isArray(children) ? children : children ? [children] : [];
     return h('div', {
-        class: 'ds-dropzone' + (dragover ? ' dragover' : ''),
+        class: 'ds-dropzone' + (kids.length ? ' ds-dropzone--wrap' : '') + (dragover ? ' dragover' : ''),
         ondragover: (e) => { e.preventDefault(); onDragOver && onDragOver(e); },
         ondragleave: (e) => { onDragLeave && onDragLeave(e); },
         ondrop: (e) => { e.preventDefault(); onDrop && onDrop(e.dataTransfer.files); }
@@ -277,7 +428,7 @@ export function DropZone({ children, dragover, onDrop, onDragOver, onDragLeave,
             h('span', { class: 'ds-dropzone-label' }, label),
             onPick ? Btn({ onClick: onPick, children: 'pick files' }) : null
         ),
-        ...(Array.isArray(children) ? children : children ? [children] : [])
+        ...kids
     );
 }