anentrypoint-design 0.0.207 → 0.0.209

package/src/components/freddie.js

@@ -211,7 +211,7 @@ export const sessions = makePage((ctx) => {
                 s.msgLoading ? loadingState('loading messages…')
                     : (s.messages || []).length ? (s.messages).map((m, i) => ChatMessage({ role: m.role, text: m.content || m.text || '', time: m.ts ? fmtTime(m.ts) : '', key: i }))
                         : emptyState('no messages')) : null,
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -249,13 +249,13 @@ export const projects = makePage((ctx) => {
                     active: p.name === activeName,
                     trailing: h('span', { class: 'fd-row-actions' },
                         p.name !== activeName ? Btn({ children: 'activate', onClick: () => activate(p.name) }) : Chip({ tone: 'ok', children: 'active' }),
-                        p.name !== 'default' ? Btn({ danger: true, children: 'delete', onClick: () => del(p.name) }) : null),
+                        p.name !== 'default' ? Btn({ variant: 'danger', children: 'delete', onClick: () => del(p.name) }) : null),
                 })) : emptyState('no projects')),
             section('new project',
                 TextField({ label: 'name', value: s.newName, onInput: (v) => { s.newName = v; }, placeholder: 'my-project' }),
                 TextField({ label: 'path (optional)', value: s.newPath, onInput: (v) => { s.newPath = v; }, placeholder: 'C:/path/to/dir' }),
-                Btn({ primary: true, disabled: s.busy, children: s.busy ? 'working…' : 'create', onClick: create })),
-        ];
+                Btn({ variant: 'primary', disabled: s.busy, children: s.busy ? 'working…' : 'create', onClick: create })),
+        ].filter(Boolean);
     };
 });
 
@@ -274,7 +274,7 @@ export const agents = makePage((ctx) => {
             s.error && s.data ? refreshError(s.error) : null,
             Kpi({ items: [[d.count ?? 0, 'active'], [d.turns ?? 0, 'total turns'], [d.last_activity ? fmtAgo(d.last_activity) : '—', 'last activity']] }),
             section('detail', Table({ headers: ['field', 'value'], rows: Object.entries(d).map(([k, v]) => [k, String(v)]) })),
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -303,7 +303,7 @@ export const analytics = makePage((ctx) => {
             s.error && (s.sampler || s.avail) ? refreshError(s.error) : null,
             Kpi({ items: [[ok + '/' + samp.length, 'providers up'], [sum.total_models ?? '—', 'models'], [sum.usable_in_any_mode ?? '—', 'usable']] }),
             section('sampler', samp.length ? Table({ headers: ['provider', 'available', 'fails'], rows: Object.entries(s.sampler.status).map(([k, v]) => [k, v.available === false ? 'no' : 'yes', String(v.failCount ?? 0)]) }) : emptyState('no sampler data')),
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -337,7 +337,7 @@ export const models = makePage((ctx) => {
         const cached = s.cached || {};
         const status = s.sampler?.status || {};
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'models', lede: providers.length + ' providers', right: Btn({ primary: true, disabled: s.discovering, children: s.discovering ? 'discovering…' : 'discover', onClick: discover }) }),
+            PageHeader({ eyebrow: 'freddie', title: 'models', lede: providers.length + ' providers', right: Btn({ variant: 'primary', disabled: s.discovering, children: s.discovering ? 'discovering…' : 'discover', onClick: discover }) }),
             liveRegion(s.discovering ? 'discovering models' : ''),
             section('providers', providers.length ? Table({
                 headers: ['provider', 'sampler', 'cached models'],
@@ -377,12 +377,12 @@ export const cron = makePage((ctx) => {
             noteAlert(s.note),
             section('jobs', list.length ? list.map((j, i) => Row({
                 key: i, code: j.enabled ? Icon('play') : Icon('pause'), title: j.cron, sub: trunc(j.prompt, TRUNC_SUB).text,
-                trailing: Btn({ danger: true, children: 'delete', onClick: () => del(j.id) }),
+                trailing: Btn({ variant: 'danger', children: 'delete', onClick: () => del(j.id) }),
             })) : emptyState('no cron jobs')),
             section('new job',
                 TextField({ label: 'cron expression', value: s.expr, onInput: (v) => { s.expr = v; }, placeholder: '0 9 * * *' }),
                 TextField({ label: 'prompt', value: s.prompt, multiline: true, onInput: (v) => { s.prompt = v; }, placeholder: 'what to run…' }),
-                Btn({ primary: true, disabled: s.busy, children: s.busy ? 'working…' : 'add job', onClick: add })),
+                Btn({ variant: 'primary', disabled: s.busy, children: s.busy ? 'working…' : 'add job', onClick: add })),
         ];
     };
 });
@@ -405,7 +405,7 @@ export const skills = makePage((ctx) => {
                     onClick: () => ctx.set({ open: s.open === i ? null : i }), active: s.open === i }),
                 s.open === i ? h('pre', { class: 'fd-pre fd-skill-body' }, sk.body || sk.content || '(no body)') : null,
             )) : emptyState('no skills')),
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -456,8 +456,8 @@ export const config = makePage((ctx) => {
             ) : emptyState('no scalar config keys')),
             section('raw', h('pre', { class: 'fd-pre' }, JSON.stringify(cfg, null, 2))),
             section('actions',
-                Btn({ primary: true, disabled: s.busy || !Object.keys(s.edited).length, children: s.busy ? 'saving…' : 'save changes', onClick: save })),
-        ];
+                Btn({ variant: 'primary', disabled: s.busy || !Object.keys(s.edited).length, children: s.busy ? 'saving…' : 'save changes', onClick: save })),
+        ].filter(Boolean);
     };
 });
 
@@ -506,11 +506,11 @@ export const env = makePage((ctx) => {
                     trailing: h('span', { class: 'fd-row-actions' },
                         a.set ? Chip({ tone: 'ok', children: 'set' }) : Chip({ tone: 'neutral', children: 'unset' }),
                         TextField({ type: 'password', value: s.draft[a.provider] || '', onInput: (v) => { s.draft[a.provider] = v; }, placeholder: 'paste key', 'aria-label': 'key for ' + a.provider }),
-                        Btn({ primary: true, disabled: s.busy === a.provider, children: s.busy === a.provider ? '…' : 'save', onClick: () => setKey(a.provider) }),
-                        (a.set && a.source === 'stored') ? Btn({ danger: true, disabled: s.busy === a.provider, children: 'remove', onClick: () => removeKey(a.provider) }) : null),
+                        Btn({ variant: 'primary', disabled: s.busy === a.provider, children: s.busy === a.provider ? '…' : 'save', onClick: () => setKey(a.provider) }),
+                        (a.set && a.source === 'stored') ? Btn({ variant: 'danger', disabled: s.busy === a.provider, children: 'remove', onClick: () => removeKey(a.provider) }) : null),
                 })) : emptyState('no providers')),
             otherRows.length ? section('other environment', Table({ headers: ['key', 'status'], rows: otherRows })) : null,
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -536,7 +536,7 @@ export const tools = makePage((ctx) => {
                 ctx.state.open === t.name ? h('pre', { class: 'fd-pre' }, JSON.stringify(t.schema || t, null, 2)) : null,
             )))),
             list.length ? null : emptyState('no tools match'),
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -560,7 +560,7 @@ export const batch = makePage((ctx) => {
             section('prompts',
                 TextField({ label: 'prompts (one per line)', value: s.prompts, multiline: true, rows: 6, onInput: (v) => { s.prompts = v; } }),
                 TextField({ label: 'concurrency', type: 'number', min: 1, 'aria-label': 'batch concurrency', value: String(s.concurrency), onInput: (v) => { s.concurrency = v; } }),
-                Btn({ primary: true, disabled: s.busy, children: s.busy ? 'running…' : 'run batch', onClick: run })),
+                Btn({ variant: 'primary', disabled: s.busy, children: s.busy ? 'running…' : 'run batch', onClick: run })),
             s.result ? section('result', (() => {
                 const r = s.result;
                 const items = Array.isArray(r.results) ? r.results : (Array.isArray(r) ? r : null);
@@ -572,7 +572,7 @@ export const batch = makePage((ctx) => {
                     }) }),
                 ];
             })()) : null,
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -592,7 +592,7 @@ export const gateway = makePage((ctx) => {
             PageHeader({ eyebrow: 'freddie', title: 'gateway', lede: 'messaging platform status' }),
             s.error && s.data ? refreshError(s.error) : null,
             section('platforms', rows.length ? Table({ headers: ['platform', 'status'], rows }) : emptyState('no platforms configured')),
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -632,14 +632,14 @@ export const chains = makePage((ctx) => {
             noteAlert(s.note),
             section('chains', Array.isArray(chainsList) && chainsList.length ? chainsList.map((c, i) => Row({
                 key: i, title: c.name || c, sub: Array.isArray(c.links) ? c.links.join(' -> ') : '',
-                trailing: Btn({ danger: true, children: 'delete', onClick: () => del(c.name || c) }),
+                trailing: Btn({ variant: 'danger', children: 'delete', onClick: () => del(c.name || c) }),
             })) : emptyState('no chains defined')),
             section('new chain',
                 TextField({ label: 'name', value: s.name, onInput: (v) => { s.name = v; } }),
                 TextField({ label: 'links (comma-separated models)', value: s.links, onInput: (v) => { s.links = v; }, placeholder: 'mistral/large, openrouter/auto' }),
-                Btn({ primary: true, disabled: s.busy, children: s.busy ? 'working…' : 'create chain', onClick: create })),
+                Btn({ variant: 'primary', disabled: s.busy, children: s.busy ? 'working…' : 'create chain', onClick: create })),
             s.cfg ? section('config', h('pre', { class: 'fd-pre' }, JSON.stringify(s.cfg, null, 2))) : null,
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -661,7 +661,7 @@ export const machines = makePage((ctx) => {
                 headers: ['kind', 'key', 'state'],
                 rows: list.map(m => [m.kind || '—', m.key || m.machine_id || '—', m.state || m.value || truncJson(m)]),
             }) : emptyState('no live machines')),
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -689,7 +689,7 @@ export const health = makePage((ctx) => {
             s.error && (s.health || s.providers) ? refreshError(s.error) : null,
             section('checks', Object.keys(hd).length ? Table({ headers: ['check', 'status'], rows: Object.entries(hd).map(([k, v]) => [k, typeof v === 'object' ? truncJson(v) : (v === true ? Chip({ tone: 'ok', children: 'ok' }) : v === false ? Chip({ tone: 'miss', children: 'no' }) : String(v))]) }) : emptyState('no health data')),
             provs.length ? section('providers', Table({ headers: ['provider', 'status'], rows: provs.map(p => { const n = typeof p === 'string' ? p : p.name || p.id; const ok = typeof p === 'object' ? (p.ok ?? p.available) : null; return [n, ok == null ? '—' : (ok ? Chip({ tone: 'ok', children: 'up' }) : Chip({ tone: 'miss', children: 'down' }))]; }) })) : null,
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -716,7 +716,7 @@ export const debug = makePage((ctx) => {
                 key: i, title: name, onClick: () => loadLogs(name), active: s.sub === name,
             })) : emptyState('no debug subsystems')),
             s.sub ? section('logs · ' + s.sub, h('pre', { class: 'fd-pre' }, JSON.stringify(s.logs, null, 2))) : null,
-        ];
+        ].filter(Boolean);
     };
 });
 

package/src/components/sessions.js

@@ -199,11 +199,11 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
     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' }, ...[
-    onOpen ? Btn({ key: 'open', primary: true, 'aria-label': 'open session', onClick: () => onOpen(s),
+    onOpen ? Btn({ key: 'open', variant: 'primary', 'aria-label': 'open session', onClick: () => onOpen(s),
       children: [Icon('external-link', { size: 14 }), h('span', {}, 'open')] }) : null,
     onView ? Btn({ key: 'view', 'aria-label': s.external ? 'open in history' : 'view events', onClick: () => onView(s),
       children: [Icon('file-text', { size: 14 }), h('span', {}, s.external ? 'history' : 'events')] }) : null,
-    (onStop && !s.external) ? Btn({ key: 'stop', danger: true, disabled: !!s.stopping, 'aria-label': 'stop session',
+    (onStop && !s.external) ? Btn({ key: 'stop', variant: 'danger', disabled: !!s.stopping, 'aria-label': 'stop session',
       onClick: () => !s.stopping && onStop(s),
       children: [Icon('square', { size: 14 }), h('span', {}, s.stopping ? 'stopping…' : 'stop')] }) : null,
   ].filter(Boolean));
@@ -244,7 +244,7 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
                                    sort, filter, errorsOnly = false, onErrorsOnly,
                                    selectable = false, selected, onToggleSelect, onSelectAll, onClearSelection,
                                    activeSid, streamState,
-                                   emptyText = 'No live sessions', offline = false } = {}) {
+                                   emptyText = 'No live sessions', emptyAction, offline = false } = {}) {
   if (offline) {
     return h('div', { class: 'ds-dash-state ds-dash-state-error', role: 'status' }, 'Backend offline — live sessions unavailable');
   }
@@ -297,12 +297,11 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
         onErrorsOnly ? h('button', { key: 'eo', type: 'button', class: 'ds-dash-errors-toggle' + (errorsOnly ? ' active' : ''),
           'aria-pressed': errorsOnly ? 'true' : 'false', onclick: () => onErrorsOnly(!errorsOnly) }, 'errors only') : null)
     : null;
-  if (!sessions.length) {
-    return h('div', { class: 'ds-dash' },
-      h('div', { class: 'ds-dash-header', role: 'group', 'aria-label': 'live session controls' },
-        ...[h('span', { key: 'cnt', class: 'ds-dash-count', role: 'status', 'aria-live': 'polite' }, '0 running'), streamLine].filter(Boolean)),
-      h('div', { class: 'ds-dash-state', role: 'status' }, emptyText));
-  }
+  // NOTE: no separate empty-branch return. The empty state renders as a KEYED
+  // child of the same stable body wrapper the populated states use - swapping
+  // an unkeyed .ds-dash-state for keyed group children used to crash webjsx
+  // applyDiff (reading 'key') the moment the first session appeared, leaving a
+  // half-applied DOM ('1 running' header over 'No live sessions' body).
   // Tri-state select-all over the selectable (non-external) sessions.
   const selectableSids = sessions.filter((s) => !s.external).map((s) => s.sid);
   const selOfVisible = selectableSids.filter((sid) => selSet.has(sid)).length;
@@ -318,16 +317,16 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
     ? h('button', { key: 'selclr', type: 'button', class: 'ds-dash-clear', onclick: () => onClearSelection() }, 'clear')
     : null;
   const stopBtn = stoppingCount > 0 && (onStopSelected || onStopAll)
-      ? Btn({ key: 'stopbusy', danger: true, disabled: true, children: 'stopping ' + stoppingCount + '…' })
+      ? Btn({ key: 'stopbusy', variant: 'danger', disabled: true, children: 'stopping ' + stoppingCount + '…' })
       : (selectable && selCount && onStopSelected
       ? (onArmStopSelected && !confirmingStopSelected
-          ? Btn({ key: 'stopsel', danger: true, onClick: () => onArmStopSelected([...selSet]), children: 'stop selected' })
-          : Btn({ key: 'stopsel', danger: true, className: confirmingStopSelected ? 'is-armed' : null, onClick: () => onStopSelected([...selSet]),
+          ? Btn({ key: 'stopsel', variant: 'danger', onClick: () => onArmStopSelected([...selSet]), children: 'stop selected' })
+          : Btn({ key: 'stopsel', variant: 'danger', className: confirmingStopSelected ? 'is-armed' : null, onClick: () => onStopSelected([...selSet]),
                   children: confirmingStopSelected ? 'stop ' + selCount + ' sessions - press again' : 'stop selected' }))
       : (onStopAll
           ? (onArmStopAll && !confirmingStopAll
-              ? Btn({ key: 'stopall', danger: true, onClick: () => onArmStopAll(sessions), children: 'stop all' })
-              : Btn({ key: 'stopall', danger: true, className: confirmingStopAll ? 'is-armed' : null, onClick: () => onStopAll(sessions),
+              ? Btn({ key: 'stopall', variant: 'danger', onClick: () => onArmStopAll(sessions), children: 'stop all' })
+              : Btn({ key: 'stopall', variant: 'danger', className: confirmingStopAll ? 'is-armed' : null, onClick: () => onStopAll(sessions),
                       children: confirmingStopAll ? 'stop ' + sessions.length + ' sessions - press again' : 'stop all' }))
           : null));
   // Build header children as a filtered array: webjsx applyDiff crashes
@@ -336,10 +335,14 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
   const headerKids = [
     selectable && selCount
       ? h('span', { key: 'cnt', class: 'ds-dash-count', role: 'status', 'aria-live': 'polite' }, selCount + ' selected')
-      : (breakdown || h('span', { key: 'cnt', class: 'ds-dash-count', role: 'status', 'aria-live': 'polite' }, sessions.length + ' running')),
+      : (breakdown || h('span', { key: 'cnt', class: 'ds-dash-count', role: 'status', 'aria-live': 'polite' },
+          sessions.length ? sessions.length + ' running' : '0 running')),
     selectAllCtl, clearCtl, streamLine,
     h('span', { key: 'spread', class: 'spread' }),
-    stopBtn, toolbar,
+    // No stop control without a session to stop; the empty dashboard keeps
+    // only the count, heartbeat, and (when wired) filter/sort chrome.
+    sessions.length ? stopBtn : null,
+    toolbar,
   ].filter(Boolean);
   const header = h('div', { class: 'ds-dash-header', role: 'group', 'aria-label': 'live session controls' }, ...headerKids);
   // Status-bucketed command center: when sorting by status (the default), the
@@ -350,20 +353,31 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
   const cardOf = (s) => h('div', { key: s.sid, role: 'listitem' },
     SessionCard({ session: s, onStop, onOpen, onView, active: s.sid === activeSid,
                   selectable, selected: selSet.has(s.sid), onToggleSelect }));
-  let body;
-  if (grouped) {
+  // ONE stable body wrapper across every state (empty / grouped / flat), with
+  // KEYED children - the ConversationList stable-keyed-body rule. Diffing
+  // happens on the children, never by swapping the container's shape.
+  let bodyKids;
+  if (!sessions.length) {
+    bodyKids = [h('div', { key: 'empty', class: 'ds-dash-state', role: 'status' },
+      ...[
+        h('span', { key: 'et' }, emptyText),
+        (emptyAction && emptyAction.onClick)
+          ? Btn({ key: 'ea', onClick: emptyAction.onClick, children: emptyAction.label || 'start a chat' })
+          : null,
+      ].filter(Boolean))];
+  } else if (grouped) {
     const buckets = [
       { key: 'error', label: 'Errored', rows: sessions.filter((s) => !s.external && s.status === 'error') },
       { key: 'running', label: 'Running', rows: sessions.filter((s) => !s.external && s.status !== 'error' && s.status !== 'stale') },
       { key: 'idle', label: 'Idle', rows: sessions.filter((s) => !s.external && s.status === 'stale') },
       { key: 'external', label: 'External', rows: sessions.filter((s) => s.external) },
     ].filter((b) => b.rows.length);
-    body = h('div', { class: 'ds-dash-groups' },
-      ...buckets.map((b) => h('div', { key: 'grp' + b.key, class: 'ds-dash-group', role: 'group', 'aria-label': b.label + ' sessions' },
-        h('div', { class: 'ds-dash-group-label' }, b.label + ' · ' + b.rows.length),
-        h('div', { class: 'ds-dash-grid', role: 'list', 'aria-label': b.label + ' sessions' }, ...b.rows.map(cardOf)))));
+    bodyKids = buckets.map((b) => h('div', { key: 'grp' + b.key, class: 'ds-dash-group', role: 'group', 'aria-label': b.label + ' sessions' },
+      h('div', { key: 'gl', class: 'ds-dash-group-label' }, b.label + ' · ' + b.rows.length),
+      h('div', { key: 'gg', class: 'ds-dash-grid', role: 'list', 'aria-label': b.label + ' sessions' }, ...b.rows.map(cardOf))));
   } else {
-    body = h('div', { class: 'ds-dash-grid', role: 'list', 'aria-label': 'live sessions' }, ...sessions.map(cardOf));
+    bodyKids = [h('div', { key: 'flat', class: 'ds-dash-grid', role: 'list', 'aria-label': 'live sessions' }, ...sessions.map(cardOf))];
   }
+  const body = h('div', { key: 'body', class: 'ds-dash-groups' }, ...bodyKids);
   return h('div', { class: 'ds-dash' }, header, body);
 }

package/src/components/shell.js

@@ -15,7 +15,7 @@ export function Chip({ tone = '', children }) {
     return h('span', { class: 'chip' + (tone ? ' tone-' + tone : '') }, children);
 }
 
-export function Btn({ href, variant = 'default', children, onClick, 'aria-label': ariaLabel, primary, ghost, danger, disabled, className }) {
+export function Btn({ href, variant = 'default', children, onClick, 'aria-label': ariaLabel, primary, ghost, danger, disabled, className, key }) {
     // Support legacy primary/ghost props for backward compatibility, but prefer variant
     const resolvedVariant = variant !== 'default' ? variant : (primary ? 'primary' : (ghost ? 'ghost' : (danger ? 'danger' : 'default')));
     const cls = (resolvedVariant === 'primary' ? 'btn-primary' : (resolvedVariant === 'ghost' ? 'btn-ghost' : (resolvedVariant === 'danger' ? 'btn-primary danger' : 'btn')))
@@ -37,6 +37,7 @@ export function Btn({ href, variant = 'default', children, onClick, 'aria-label'
     const isLink = href != null && href !== '' && href !== '#';
     if (isLink) {
         return h('a', {
+            key,
             class: cls, href,
             'aria-label': ariaName,
             'aria-disabled': disabled ? 'true' : null,
@@ -45,6 +46,7 @@ export function Btn({ href, variant = 'default', children, onClick, 'aria-label'
         }, ...kids);
     }
     return h('button', {
+        key,
         type: 'button', class: cls,
         disabled: disabled ? true : null,
         'aria-label': ariaName,
@@ -159,6 +161,9 @@ const ICON_PATHS = {
 // Icon(); use innerHTML = iconMarkup(name). Keeps the icon paths upstream so
 // raw-DOM call sites never reintroduce decorative glyph literals.
 export function iconMarkup(name, { size = 16 } = {}) {
+    // Accept the props-object shape too - every sibling component takes a
+    // single object, so Icon({name}) is what the barrel trains consumers to try.
+    if (name && typeof name === 'object') ({ name, size = 16 } = name);
     const inner = ICON_PATHS[name];
     if (!inner) return '';
     return '<svg class="ds-icon ds-icon-' + name + '" width="' + size + '" height="' + size +
@@ -166,6 +171,7 @@ export function iconMarkup(name, { size = 16 } = {}) {
         ' stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + inner + '</svg>';
 }
 export function Icon(name, { size = 16 } = {}) {
+    if (name && typeof name === 'object') ({ name, size = 16 } = name);
     const inner = ICON_PATHS[name];
     if (!inner) return h('span', { class: 'glyph', 'aria-hidden': 'true' }, '');
     return h('svg', {

package/src/components/theme-toggle.js

@@ -34,19 +34,26 @@ export function ThemeToggle({ compact = false, onChange } = {}) {
     const current = getTheme();
 
     if (compact) {
-        const resolved = resolvedTheme();
-        const label = current === 'auto' ? `auto (${resolved})` : (current === 'ink' ? 'dark' : 'light');
+        // Plain words only - 'ink'/'paper' are internal theme codenames a user
+        // never chose; the resolved scheme rides in the title, not the label.
+        const resolvedWord = resolvedTheme() === 'ink' ? 'dark' : 'light';
+        const word = current === 'auto' ? 'auto' : (current === 'ink' ? 'dark' : 'light');
+        const label = 'theme: ' + word;
         return h('button', {
             class: 'btn ds-theme-toggle',
             type: 'button',
-            'aria-label': 'theme: ' + label,
-            title: 'theme: ' + label + ' — click to cycle',
+            'aria-label': label,
+            title: label + (current === 'auto' ? ' (currently ' + resolvedWord + ')' : '') + ' — click to cycle',
             onclick: () => {
                 const next = current === 'auto' ? 'paper' : (current === 'paper' ? 'ink' : 'auto');
                 applyTheme(next);
                 if (onChange) try { onChange(next); } catch {}
             }
-        }, label);
+        },
+        // CSS-drawn half-disc so the control still reads as the theme switch
+        // when the label is hidden (icon-only rail strip).
+        h('span', { class: 'ds-theme-disc', 'aria-hidden': 'true' }),
+        h('span', { class: 'ds-theme-toggle-label' }, label));
     }
 
     return h('div', {

package/src/components.js

@@ -36,7 +36,7 @@ export { ContextPane } from './components/context-pane.js';
 export {
     fileGlyph, fmtFileSize,
     FileIcon, FileRow, FileGrid, FileSkeleton, sortFiles, FileToolbar, RootsPicker,
-    DropZone, UploadProgress, EmptyState, BreadcrumbPath
+    DropZone, UploadProgress, EmptyState, BreadcrumbPath, BulkBar
 } from './components/files.js';
 
 export {