anentrypoint-design 0.0.438 → 0.0.440

package/dist/ui_kits/system_primer/app.js

@@ -1,5 +1,5 @@
 import * as webjsx from 'webjsx';
-import { Topbar, Crumb, Status, Side, AppShell, Panel, PageHeader, Chip, Btn, ThemeToggle } from 'ds/components.js';
+import { Topbar, Crumb, Status, Side, AppShell, Panel, PageHeader, Chip, Btn, ThemeToggle, Slider, Progress, InputOTP, HoverCard, DatePicker, formatDate, DateRangePicker, Carousel, Menubar, AspectRatio, LiveCursorOverlay, RemoteSelectionRings, RecentEditHighlightFlash, AgentPresenceChip, PresenceBar, ContextMeter, ContextTreemap, ContextXRayPanel } from 'ds/components.js';
 import { mountKit } from 'ds/bootstrap.js';
 const h = webjsx.createElement;
 
@@ -94,6 +94,50 @@ function TypeScalePanel() {
 // click, on the page whose whole job is showing how controls behave.
 const primState = { pressed: null };
 
+// Same interactive-demonstration standard as primState above, for the 2026
+// restyle's new primitives (Calendar/DatePicker/Slider/InputOTP/HoverCard):
+// each control is genuinely wired to state and re-renders on change, not a
+// static screenshot of the component.
+const restyleState = {
+    sliderValue: 40,
+    otpValue: '',
+    otpComplete: null,
+    datePickerValue: null,
+    datePickerOpen: false,
+    hoverCardOpen: false,
+};
+
+// The remaining backfilled primitives. Same live-wired standard: every control
+// that looks interactive owns real state and re-renders on change. The three
+// collab-ui overlays and the context-pane trio are DATA-driven rather than
+// input-driven, so their specimens supply representative fixture data — the
+// honest demonstration for a component whose input is a remote peer's cursor
+// position or a token accounting breakdown, neither of which a primer page can
+// manufacture by being clicked.
+const moreState = {
+    rangeValue: { from: null, to: null },
+    rangeOpen: false,
+    menuOpenIndex: null,
+    menuPicked: null,
+    xrayOpenId: null,
+};
+
+const COLLAB_USERS = [
+    { userId: 'u1', label: 'ana',    color: 'var(--purple)', status: 'active' },
+    { userId: 'u2', label: 'blake',  color: 'var(--green)',  status: 'idle' },
+    { userId: 'u3', label: 'agent',  color: 'var(--mascot)', status: 'active' },
+];
+
+// `value` (not `tokens`) and a `tone` class suffix are the real field names
+// ContextMeter/ContextTreemap/ContextXRayPanel all read — a `tokens` key renders
+// zero-width bars and an empty treemap rather than erroring, so it has to match.
+const CONTEXT_SEGMENTS = [
+    { id: 'sys',   label: 'system',    value: 1840, tone: 'system' },
+    { id: 'files', label: 'files',     value: 7320, tone: 'files' },
+    { id: 'chat',  label: 'chat',      value: 4210, tone: 'chat' },
+    { id: 'tools', label: 'tool defs', value: 1130, tone: 'other' },
+];
+
 function PrimitivesPanel() {
     return Panel({ id: 'primitives', title: 'primitives', class: 'ds-panel-gap', children:
         h('div', { class: 'ds-prim-panel' },
@@ -120,6 +164,144 @@ function PrimitivesPanel() {
     });
 }
 
+// New primitives added in the 2026 webjsx-toolkit-look restyle. Live-wired
+// (not static screenshots), same standard as PrimitivesPanel above.
+function RestylePanel() {
+    return Panel({ id: 'restyle', title: 'restyle 2026 — new primitives', class: 'ds-panel-gap', children:
+        h('div', { class: 'ds-prim-panel' },
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'slider'),
+                Slider({
+                    value: restyleState.sliderValue, min: 0, max: 100,
+                    onChange: (v) => { restyleState.sliderValue = v; kit.render(); },
+                    label: 'demo slider',
+                }),
+                h('span', { class: 'ds-prim-label' }, String(restyleState.sliderValue))
+            ),
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'progress'),
+                Progress({ value: restyleState.sliderValue, max: 100, label: 'demo progress' })
+            ),
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'otp input'),
+                InputOTP({
+                    length: 6, value: restyleState.otpValue,
+                    onChange: (v) => { restyleState.otpValue = v; kit.render(); },
+                    onComplete: (v) => { restyleState.otpComplete = v; kit.render(); },
+                    label: 'demo code',
+                }),
+                h('span', { class: 'ds-prim-label' },
+                    restyleState.otpComplete ? 'complete: ' + restyleState.otpComplete : 'type 6 digits')
+            ),
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'hover card'),
+                HoverCard({
+                    trigger: Btn({ children: 'hover me' }),
+                    content: h('div', {}, 'HoverCard content — composes Popover with a delayed hover trigger.'),
+                    open: restyleState.hoverCardOpen,
+                    onOpenChange: (v) => { restyleState.hoverCardOpen = v; kit.render(); },
+                })
+            ),
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'date picker'),
+                DatePicker({
+                    value: restyleState.datePickerValue,
+                    onChange: (v) => { restyleState.datePickerValue = v; kit.render(); },
+                    open: restyleState.datePickerOpen,
+                    onOpenChange: (v) => { restyleState.datePickerOpen = v; kit.render(); },
+                    placeholder: 'pick a date',
+                }),
+                h('span', { class: 'ds-prim-label' },
+                    restyleState.datePickerValue ? formatDate(restyleState.datePickerValue) : 'none selected')
+            )
+        )
+    });
+}
+
+// The rest of the backfilled surface: range picking, the two overlay
+// compositions, the aspect-ratio wrapper, the collab-ui overlays and the
+// context-pane trio. Split from RestylePanel rather than appended to it to keep
+// each function a single readable specimen group.
+function BackfillPanel() {
+    const totalTokens = CONTEXT_SEGMENTS.reduce((n, s) => n + s.value, 0);
+    return Panel({ id: 'backfill', title: 'backfill — range, overlays, collab, context', class: 'ds-panel-gap', children:
+        h('div', { class: 'ds-prim-panel' },
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'date range'),
+                DateRangePicker({
+                    value: moreState.rangeValue,
+                    onChange: (v) => { moreState.rangeValue = v; kit.render(); },
+                    open: moreState.rangeOpen,
+                    onOpenChange: (v) => { moreState.rangeOpen = v; kit.render(); },
+                    placeholder: 'pick a range',
+                    name: 'primer-drp',
+                }),
+                h('span', { class: 'ds-prim-label' },
+                    moreState.rangeValue.from
+                        ? formatDate(moreState.rangeValue.from) + ' -> ' + (moreState.rangeValue.to ? formatDate(moreState.rangeValue.to) : '...')
+                        : 'none selected')
+            ),
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'menubar'),
+                Menubar({
+                    openIndex: moreState.menuOpenIndex,
+                    onOpenIndexChange: (i) => { moreState.menuOpenIndex = i; kit.render(); },
+                    ariaLabel: 'primer demo menubar',
+                    menus: [
+                        { id: 'file', label: 'file', items: [{ id: 'new', label: 'new' }, { id: 'open', label: 'open' }], onSelect: (id) => { moreState.menuPicked = 'file/' + id; kit.render(); } },
+                        { id: 'edit', label: 'edit', items: [{ id: 'copy', label: 'copy' }, { separator: true }, { id: 'del', label: 'delete', danger: true }], onSelect: (id) => { moreState.menuPicked = 'edit/' + id; kit.render(); } },
+                    ],
+                }),
+                h('span', { class: 'ds-prim-label' },
+                    moreState.menuPicked ? 'chose: ' + moreState.menuPicked : 'nothing chosen yet')
+            ),
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'carousel'),
+                Carousel({
+                    label: 'primer demo carousel',
+                    items: ['one', 'two', 'three', 'four'],
+                    renderItem: (item) => h('div', { class: 'ds-prim-label' }, item),
+                })
+            ),
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'aspect ratio'),
+                AspectRatio({ ratio: '16 / 9', children: h('div', { class: 'ds-prim-label' }, '16 / 9') })
+            ),
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'presence'),
+                PresenceBar({ users: COLLAB_USERS }),
+                AgentPresenceChip({ userId: 'u9', label: 'solo agent', color: 'var(--purple-2)', status: 'active' })
+            ),
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'collab overlays'),
+                // LiveCursorOverlay takes flat x/y, but the ring and flash
+                // overlays read a NESTED `rect` ({top,left,width,height}) --
+                // passing flat coords there throws on `s.rect.left`, taking the
+                // whole kit's mount down rather than just blanking one specimen.
+                LiveCursorOverlay({ cursors: [{ userId: 'u1', label: 'ana', color: 'var(--purple)', x: 40, y: 18 }, { userId: 'u3', label: 'agent', color: 'var(--mascot)', x: 120, y: 44 }] }),
+                RemoteSelectionRings({ selections: [{ userId: 'u2', color: 'var(--green)', rect: { left: 20, top: 12, width: 90, height: 18 } }] }),
+                RecentEditHighlightFlash({ edits: [{ timestamp: 1, color: 'var(--purple)', rect: { left: 12, top: 60, width: 70, height: 16 } }] })
+            ),
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'context meter'),
+                ContextMeter({ used: totalTokens, total: 32000, segments: CONTEXT_SEGMENTS })
+            ),
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'context treemap'),
+                ContextTreemap({ items: CONTEXT_SEGMENTS, width: 280, height: 160 })
+            ),
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'context x-ray'),
+                ContextXRayPanel({
+                    segments: CONTEXT_SEGMENTS,
+                    openId: moreState.xrayOpenId,
+                    onOpenIdChange: (id) => { moreState.xrayOpenId = id; kit.render(); },
+                })
+            )
+        )
+    });
+}
+
 function App() {
     return AppShell({
         topbar: Topbar({
@@ -137,7 +319,9 @@ function App() {
                     { glyph: '-', label: 'palette',    key: 'p', href: '#palette' },
                     { glyph: '-', label: 'semantic',   key: 's', href: '#semantic' },
                     { glyph: '-', label: 'type scale', key: 't', href: '#type-scale' },
-                    { glyph: '-', label: 'primitives', key: 'r', href: '#primitives' }
+                    { glyph: '-', label: 'primitives', key: 'r', href: '#primitives' },
+                    { glyph: '-', label: 'restyle 2026', key: 'x', href: '#restyle' },
+                    { glyph: '-', label: 'backfill', key: 'b', href: '#backfill' }
                 ] }
             ]
         }),
@@ -156,7 +340,9 @@ function App() {
                 PaletteGrid(),
                 SemanticGrid(),
                 TypeScalePanel(),
-                PrimitivesPanel()
+                PrimitivesPanel(),
+                RestylePanel(),
+                BackfillPanel()
             )
         ],
         status: Status({

package/dist/ui_kits/terminal/app.js

@@ -1,6 +1,7 @@
 import * as webjsx from 'webjsx';
 import { Topbar, Crumb, Status, Side, AppShell, Panel, Heading, Lede, Chip, ThemeToggle } from 'ds/components.js';
 import { mountKit } from 'ds/bootstrap.js';
+import { run as runCommand, complete as completeLine } from 'ds/shell.js';
 const h = webjsx.createElement;
 
 const root = document.getElementById('root');
@@ -8,10 +9,15 @@ const root = document.getElementById('root');
 // Live terminal — instant output, no fake reveal animation. This is the
 // usable surface; anything typed appears immediately, anything emitted by
 // the (stubbed) backend appears immediately.
+// Seeded by really running the commands through the interpreter at load, not
+// by hand-writing their output. A canned transcript would go stale the moment
+// the filesystem or a command changed, and it would show a shell that cannot
+// be told apart from one that executes nothing -- which is exactly what this
+// kit used to be.
 const liveTranscript = [
-    { kind: 'cmt', text: '# live session · ~/dev/design' },
-    { kind: 'cmd', text: 'echo "ready"' },
-    { kind: 'out', text: 'ready' }
+    // No leading '#' in the text: Line() renders the cmt prompt mark itself,
+    // so writing one here produces a doubled '# #' on screen.
+    { kind: 'cmt', text: 'live shell — really executes. type `help` for commands.' },
 ];
 const live = { input: '', cwd: '~/dev/design', phase: 'ready' };
 const PHASES = ['ready', 'loading', 'empty', 'error'];
@@ -76,6 +82,28 @@ const demo = { visible: reduced ? demoScript.slice() : [], looping: !reduced };
 const history = [];
 let historyIdx = -1;
 
+// The interpreter's session state. cwd is an array of path segments owned here
+// and mutated in place by `cd`, so the prompt and the shell never disagree
+// about where the session is.
+const shellCwd = [];
+const shellPath = () => '~/' + shellCwd.join('/');
+const shellCtx = {
+    cwd: shellCwd,
+    clear: () => clearScrollback(),
+    // `theme dark` drives the same data-theme attribute ThemeToggle writes, so
+    // the command and the toggle stay one mechanism rather than two.
+    setTheme: (t) => document.documentElement.setAttribute('data-theme', t),
+};
+
+// Run a line for real and append both the command and its output, so the
+// opening scrollback is produced by the same path a typed command takes.
+function seed(line) {
+    liveTranscript.push({ kind: 'cmd', text: line });
+    for (const out of runCommand(line, shellCtx)) liveTranscript.push(out);
+}
+seed('whoami');
+seed('ls');
+
 // Empties the scrollback and drops the shell into its own empty state, which is
 // the honest reading of a cleared shell (the empty panel explains what lands
 // there). Both the sidebar item and Cmd/Ctrl+K call this.
@@ -149,7 +177,10 @@ function App() {
                 // rather than documenting a keystroke and doing nothing when
                 // clicked. Both are also bound to the keys they advertise.
                 { group: 'shortcuts', items: [
-                    { glyph: '·', label: 'clear (⌘k)', key: 'c',
+                    // The handler binds metaKey OR ctrlKey, so the label names
+                    // both. The Command symbol is also the one glyph the mono
+                    // stack has no coverage for -- it rendered as tofu here.
+                    { glyph: '·', label: 'clear (ctrl/cmd k)', key: 'c',
                       onClick: (e) => { e.preventDefault(); clearScrollback(); } },
                     { glyph: '·', label: 'history (up)', key: 'h',
                       onClick: (e) => { e.preventDefault(); recallHistory(); } }
@@ -162,7 +193,7 @@ function App() {
                     h('div', {}, Heading({ level: 1, children: 'terminal' })),
                     ThemeToggle()
                 ),
-                Lede({ children: 'two surfaces — a live shell (instant, no fake reveal) and a decorative demo loop that plays the .cli row primitives. respects prefers-reduced-motion.' }),
+                Lede({ children: 'a working shell — ls, cd, cat, echo, theme and more run against a real in-memory tree, with tab completion and history. below it, a decorative demo loop plays the .cli row primitives. respects prefers-reduced-motion.' }),
 
                 // Live terminal — usable, no reveal delays.
                 Panel({
@@ -179,17 +210,31 @@ function App() {
                             h('span', { class: 'prompt' }, '$'),
                             h('input', {
                                 value: live.input,
-                                placeholder: 'type a command and press enter…',
+                                placeholder: 'try `help`, `ls`, `cat readme.md`…',
                                 class: 'ds-term-input',
                                 oninput: (e) => { live.input = e.target.value; },
                                 onkeydown: (e) => {
                                     if (e.key === 'Enter' && live.input.trim()) {
-                                        liveTranscript.push({ kind: 'cmd', text: live.input });
-                                        liveTranscript.push({ kind: 'out', text: '(stub) ran: ' + live.input });
-                                        history.push(live.input);
+                                        const line = live.input;
+                                        liveTranscript.push({ kind: 'cmd', text: line });
+                                        // Real execution: the interpreter in
+                                        // ds/shell.js owns the filesystem and the
+                                        // command table, so an unknown command
+                                        // reports a genuine error instead of the
+                                        // old '(stub) ran: ...' echo that claimed
+                                        // success for anything typed.
+                                        for (const out of runCommand(line, shellCtx)) liveTranscript.push(out);
+                                        live.cwd = shellPath();
+                                        history.push(line);
                                         historyIdx = -1;
                                         live.input = '';
                                         kit.render();
+                                    } else if (e.key === 'Tab') {
+                                        // Completion has to pre-empt the browser's
+                                        // focus move, so preventDefault comes first.
+                                        e.preventDefault();
+                                        live.input = completeLine(live.input, shellCwd);
+                                        kit.render();
                                     } else if (e.key === 'ArrowUp') {
                                         // The sidebar advertises 'history (up)';
                                         // the key it names has to do it too.
@@ -216,7 +261,8 @@ function App() {
                 Panel({ title: 'about this kit', class: 'ds-panel-gap', children: h('div', { class: 'ds-pattern-notes' },
                     h('p', {}, '· ', Chip({ tone: 'accent', children: '.cli' }), ' rows pair ', h('code', {}, '.prompt'), ' + ', h('code', {}, '.cmd'), '.'),
                     h('p', {}, '· six line kinds: ', Chip({ tone: 'dim', children: 'cmt' }), ' ', Chip({ tone: 'dim', children: 'cmd' }), ' ', Chip({ tone: 'dim', children: 'out' }), ' ', Chip({ tone: 'accent', children: 'ok' }), ' ', Chip({ tone: '', children: 'warn' }), ' ', Chip({ tone: 'dim', children: 'log' }), '.'),
-                    h('p', {}, '· live panel is instant; demo panel reveals lines on a loop for the showcase only — never fake-animate output a user is waiting on.')
+                    h('p', {}, '· live panel is instant and really executes — ', h('code', {}, 'help'), ' lists the commands, tab completes, up walks history.'),
+                    h('p', {}, '· demo panel reveals lines on a loop for the showcase only — never fake-animate output a user is waiting on.')
                 ) })
             )
         ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.438",
+  "version": "0.0.440",
   "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/cli.js

@@ -5,13 +5,19 @@
 
 import * as webjsx from '../../../vendor/webjsx/index.js';
 import { Panel } from './panel.js';
+import { Btn } from '../shell.js';
 const h = webjsx.createElement;
 
 export function Install({ cmd, copied, onCopy }) {
     return h('div', { class: 'cli' },
         h('span', { class: 'prompt' }, '$'),
         h('span', { class: 'cmd' }, cmd),
-        h('span', { class: 'copy', onclick: () => onCopy && onCopy(cmd) }, copied ? 'copied' : 'copy')
+        Btn({
+            class: 'copy', size: 'sm',
+            onClick: () => onCopy && onCopy(cmd),
+            'aria-label': copied ? 'copied to clipboard' : 'copy install command',
+            children: h('span', { 'aria-live': 'polite' }, copied ? 'copied' : 'copy')
+        })
     );
 }
 

package/src/components/content/panel.js

@@ -7,11 +7,16 @@ import * as webjsx from '../../../vendor/webjsx/index.js';
 import { RowLink } from './row.js';
 const h = webjsx.createElement;
 
-export function Panel({ title, count, right, style = '', class: className = '', children, kind, id }) {
+export function Panel({ title, count, right, style = '', class: className = '', children, kind, id, headingLevel = 2 }) {
     const cls = 'panel' + (kind ? ' panel-' + kind : '') + (className ? ' ' + className : '');
+    // title renders as a real heading (h2 by default; `headingLevel` lets a
+    // caller nest a Panel under an existing h2/h3 without skipping a level) so
+    // a screen-reader heading-jump can actually find each section, not just
+    // the page's single top-level h1.
+    const headingTag = 'h' + headingLevel;
     return h('div', { class: cls, style, ...(id ? { id } : {}) },
         title != null ? h('div', { class: 'panel-head' },
-            h('span', {}, title),
+            h(headingTag, { class: 'panel-title' }, title),
             right != null ? right : (count != null ? h('span', {}, String(count)) : null)
         ) : null,
         h('div', { class: 'panel-body' }, ...(Array.isArray(children) ? children : [children]))

package/src/components/shell/app-shell.js

@@ -93,7 +93,7 @@ export function Side({ sections = [] } = {}) {
         return h('div', { class: 'app-side-group', key: sec.group, role: 'group', 'aria-labelledby': groupId },
             h('h2', { class: 'group', id: groupId }, sec.group),
             ...sec.items.map((item, i) => {
-                const { glyph, label, href, active, count, color, onClick } = item;
+                const { glyph, label, href, active, count, color, onClick, ariaLabel } = item;
                 const countLabel = (count != null && count !== 0 && count !== '0') ? ` (${count})` : '';
                 // An item with neither href nor onClick is not a control, and
                 // must not look like one. href used to default to '#', so a
@@ -118,7 +118,12 @@ export function Side({ sections = [] } = {}) {
                     ...(isControl ? { href: href != null ? href : '#' } : {}),
                     class: active ? 'active' : '',
                     'aria-current': active ? 'page' : null,
-                    'aria-label': label + countLabel,
+                    // ariaLabel lets a caller pass the untruncated source string
+                    // as the accessible name when `label` itself is a shortened
+                    // display string (e.g. a preset prompt cut to fit the row) —
+                    // otherwise screen-reader users lose the exact same
+                    // distinguishing text sighted users lose to the ellipsis.
+                    'aria-label': (ariaLabel != null ? ariaLabel : label) + countLabel,
                     onclick: onClick,
                     onkeydown: isControl ? onSideLinkKeyDown : null
                 },

package/src/components/shell/icons.js

@@ -89,7 +89,10 @@ export const ICON_PATHS = {
     clipboard: '<rect x="8" y="4" width="8" height="4" rx="1"/><path d="M8 6H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-2"/>',
     // Live-cursor pointer arrow — collab.js's LiveCursorOverlay renders one
     // per remote collaborator, filled with that collaborator's color.
-    cursor: '<path d="M5 3l14 8-6.5 1.5L11 20z"/>'
+    cursor: '<path d="M5 3l14 8-6.5 1.5L11 20z"/>',
+    // Password-visibility toggle — eye / eye-off pair.
+    eye: '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/>',
+    'eye-off': '<path d="M2 12s3.5-7 10-7c1.7 0 3.2.4 4.5 1.1M22 12s-3.5 7-10 7c-1.7 0-3.2-.4-4.5-1.1"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/><path d="m4 4 16 16"/>'
 };
 
 // The single SVG attribute contract (viewBox/stroke/linecap…) shared by both

package/src/css/app-shell/kits-appended.css

@@ -289,23 +289,12 @@
 .ds-gallery-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
 .ds-gallery-tile:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-gallery-tile--tight { min-height: clamp(96px, 14vw, 120px); }
-.ds-lightbox {
-  position: fixed; inset: 0; background: var(--scrim);
-  display: flex; align-items: center; justify-content: center;
-  padding: clamp(var(--space-2-75), 4vw, var(--space-5));
-  padding-bottom: max(clamp(var(--space-2-75), 4vw, var(--space-5)), env(safe-area-inset-bottom));
-  z-index: var(--z-modal);
-}
-.ds-lightbox-card {
-  /* 28px ceiling has no tier (--space-4 is 24, --space-5 is 32); it is the
-     lightbox card inset tuned against the min(520px,100%) card width. */
-  background: var(--panel-0); border-radius: var(--r-2); padding: clamp(var(--space-3), 4vw, 28px);
-  width: min(520px, 100%); min-width: 0;
-  max-height: calc(100vh - 24px);
-  max-height: calc(100dvh - 24px);
-  overflow: auto;
-  display: flex; flex-direction: column; gap: 14px; /* off-scale, matches the card inset above */
-}
+/* The lightbox scrim/card chrome itself is now Dialog's (.ds-ep-dialog /
+   .ds-ep-dialog-backdrop in editor-primitives.css) — Dialog already ships
+   role="dialog", aria-modal, Tab-trap and focus-restore-on-close, which the
+   former hand-rolled .ds-lightbox/.ds-lightbox-card overlay had none of. Only
+   the gallery-specific content rules (head row, tag, carousel sizing, tile
+   preview) remain here. */
 .ds-lightbox-preview {
   /* 36px ceiling has no tier (--space-5 is 32, --space-6 is 48). */
   padding: clamp(var(--space-3), 6vw, 36px); border-radius: var(--r-1); text-align: center;
@@ -511,11 +500,24 @@
 .ds-auth-otp-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
 .ds-auth-field { display: flex; flex-direction: column; gap: var(--space-1); }
 /* .ds-auth-field-label joins the kit small-label voice above, no overrides. */
+.ds-auth-field-input-row { position: relative; display: flex; align-items: center; }
+/* Reserves room for the absolutely-positioned toggle: its --space-1 inset plus
+   the --ds-icon-btn-sm 26px box, so the input text never sits under it. */
+.ds-auth-field-input-row .input { flex: 1 1 auto; padding-right: calc(26px + var(--space-2)); }
+.ds-auth-pw-toggle { position: absolute; right: var(--space-1); }
 .ds-auth-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
 .ds-auth-remember { display: flex; align-items: center; gap: var(--space-1-75); cursor: pointer; }
 .ds-auth-remember-text { color: var(--panel-text-2); font-size: var(--fs-tiny); }
 .ds-auth-forgot { font-size: var(--fs-tiny); }
-.ds-auth-error { padding: var(--space-2) var(--space-2-5); background: var(--panel-1); border-radius: var(--r-0); color: var(--danger); font-size: var(--fs-tiny); overflow-wrap: anywhere; }
+/* Error and status share layout but not color: a color-only distinction
+   between role="alert" (something is wrong) and role="status" (informational)
+   fails WCAG 1.4.1, so each also carries a distinct ASCII marker via ::before —
+   never rely on the reader noticing the role attribute alone. */
+.ds-auth-error, .ds-auth-status { padding: var(--space-2) var(--space-2-5); background: var(--panel-1); border-radius: var(--r-0); font-size: var(--fs-tiny); overflow-wrap: anywhere; display: flex; gap: var(--space-1-75); align-items: flex-start; }
+.ds-auth-error { color: var(--danger); }
+.ds-auth-error::before { content: '[!]'; flex: none; }
+.ds-auth-status { color: var(--panel-text-2); }
+.ds-auth-status::before { content: '[i]'; flex: none; }
 .ds-auth-providers { display: flex; gap: var(--space-2); flex-wrap: wrap; }
 .ds-auth-provider-btn { flex: 1 1 100px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2-5); }
 .ds-auth-provider-btn--loading { opacity: 0.7; pointer-events: none; }
@@ -541,8 +543,12 @@
 .ds-gal-swatch-meta { display: flex; justify-content: space-between; gap: var(--space-1-75); flex-wrap: wrap; font-family: var(--ff-mono); font-size: var(--fs-nano); min-width: 0; }
 .ds-gal-swatch-name { color: var(--panel-text); }
 .ds-gal-swatch-hint { color: var(--panel-text-3); overflow-wrap: anywhere; }
-.ds-lightbox-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
+.ds-lightbox-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2-75); }
 /* .ds-lightbox-tag joins the kit small-label voice above, no overrides. */
+/* Dialog's .ds-ep-dialog-body has no default child gap (unlike the former
+   hand-rolled .ds-lightbox-card, which was `display:flex; gap:14px`), so the
+   carousel block gets its own top gutter to keep head/carousel/hint spaced. */
+.ds-lightbox-card--carousel { margin-bottom: var(--space-2-75); }
 
 /* --- error_404 kit --- */
 .ds-err-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-top: var(--space-1-75); }
@@ -600,6 +606,20 @@
 .ds-term-input-row { margin-top: var(--space-1-75); }
 .ds-term-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--paper); caret-color: var(--acid); }
 .ds-term-input::placeholder { color: var(--paper-3-dark); }
+/* Adding type="text" (for the a11y fix below) makes the global
+   input[type="text"] rule in states-interactions.css match this element for
+   the first time, at equal-or-higher specificity than this file's load
+   order would otherwise win. Re-assert the borderless prompt-line chrome so
+   the shared form-control skin (bg, border, radius, fixed height) can't leak
+   onto what is a terminal prompt, not a form field. */
+.ds-term-input[type='text'] { background: transparent; border: 0; border-radius: 0; box-shadow: none; height: auto; }
+/* The row-level `outline: 0` above kills the browser default, so the control
+   needs its own :focus-visible ring back — otherwise a keyboard user gets no
+   visual confirmation focus landed on the one control they type into. */
+.ds-term-input:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
 /* The input itself is a prompt line, not a form control, so it is NOT floored
    to 44px (that would break the terminal's line rhythm). Instead the whole
    prompt ROW becomes the tap target, and the font goes to 16px so focusing it
@@ -622,8 +642,25 @@
 .ds-chat-layout > .chat { min-width: 0; }
 .ds-chat-detail { display: none; }
 @media (min-width: 1100px) {
-  .ds-chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: var(--space-4); }
-  .ds-chat-detail { display: block; position: sticky; top: 0; }
+  /* Two compounding grid quirks, not one:
+     1. align-items:start sizes the row to its tallest item's natural content
+        height instead of stretching items to fill it — align-items must stay
+        the grid default (stretch).
+     2. Even with stretch, an implicit row with no explicit sizing (the
+        default here) ALSO sizes itself to content first, then stretches
+        items to that content-derived height — which can exceed the row's
+        actual allotment from this grid's own flex parent (.chat-kit-page,
+        flex:1/min-height:0). .chat then renders taller than .ds-chat-layout's
+        own box, so it overflows past the grid container instead of being
+        clipped by .chat-thread's internal scroll — visually burying the
+        pattern-notes panel that follows this grid in the DOM. Explicit
+        `grid-template-rows: minmax(0, 1fr)` makes the row take exactly the
+        container's height (from the flex chain above) as the ceiling, so
+        .chat's min-height:0 has a real, smaller-than-content value to clip
+        against. .ds-chat-detail opts out via align-self so its own sticky
+        positioning still works without forcing the row back to content-sized. */
+  .ds-chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(0, 1fr); gap: var(--space-4); }
+  .ds-chat-detail { display: block; position: sticky; top: 0; align-self: start; }
 }
 
 /* Avatar — generic identity disc primitive (content.js Avatar). Sized

package/src/css/app-shell/panel-row.css

@@ -53,8 +53,22 @@
   font-weight: 500; color: var(--fg-3);
   font-family: var(--ff-mono); letter-spacing: 0;
 }
+/* Panel titles render as a real heading (h2 by default) for AT heading-jump
+   navigation, but must read identically to the old plain span — reset the
+   UA heading margin/size/weight so it inherits .panel-head's own type rules
+   instead of the browser's h2 stylesheet. */
+.panel-title {
+  margin: 0; font: inherit; font-size: inherit; font-weight: inherit;
+  letter-spacing: inherit; text-transform: inherit; color: inherit;
+}
 .panel-body { padding: var(--space-2) var(--space-3) var(--space-3); }
 .panel-body > * { margin: 0; }
+/* One-line explanatory caption under a panel's title — e.g. distinguishing
+   two visually-similar panels (lore palette vs semantic tokens) in words
+   instead of leaving the reader to infer it from the title alone. */
+.ds-panel-caption {
+  font-size: var(--fs-sm); color: var(--fg-3); margin: 0 0 var(--space-2);
+}
 /* Inner sibling rhythm scales with density like the outer panel rhythm, so a
    compact/spacious surface stays proportional instead of only its outer
    intervals moving while the panel interiors hold still. Kept strictly below

package/src/css/app-shell/responsive2-workspace.css

@@ -126,7 +126,11 @@
   /* Embedded shell (freddie WM window) fills its container, not the viewport. */
   .fd-root .app { height: 100%; overflow: visible; }
   .app-body { min-height: 0; flex: 1 1 auto; }
-  .app-side-shell { overflow-y: auto; min-height: 0; }
+  /* scrollbar-gutter mirrors .app-main's own (topbar.css) — without it the
+     thumb draws flush against the sidebar's nav text with zero breathing
+     room, reading as a mark stuck to the content rather than a scrollbar
+     anchored to the shell's own edge. */
+  .app-side-shell { overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-gutter: stable; }
   .app-main { overflow-y: auto; min-height: 0; }
 }
 

package/src/css/app-shell/topbar.css

@@ -164,7 +164,7 @@ body.canvas-host { background: transparent !important; }
 
 .app-side {
   display: flex; flex-direction: column; gap: var(--space-4);
-  padding: var(--space-5) var(--space-3);
+  padding: var(--space-5) var(--space-2) var(--space-5) var(--space-3);
   font-size: var(--fs-sm);
 }
 /* Sidebar section wrapper emitted by Side() (src/components/shell/app-shell.js).

package/src/kits/os/files-app.js

@@ -11,6 +11,13 @@ export function renderFilesApp(opts = {}) {
 
     let preview = null;
     let selected = null;
+    function renderError(err) {
+        node.innerHTML = '';
+        const errRow = document.createElement('div');
+        errRow.className = 'row-error';
+        errRow.textContent = 'could not load files: ' + (err && err.message ? err.message : String(err));
+        node.appendChild(errRow);
+    }
     async function refresh() {
         const items = await list();
         preview = null;
@@ -40,8 +47,8 @@ export function renderFilesApp(opts = {}) {
     }
 
     let timer = null;
-    refresh().catch(() => {});
-    if (pollMs > 0) timer = setInterval(() => refresh().catch(() => {}), pollMs);
+    refresh().catch(renderError);
+    if (pollMs > 0) timer = setInterval(() => refresh().catch(renderError), pollMs);
 
     return {
         node,