anentrypoint-design 0.0.208 → 0.0.210

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', {
@@ -299,15 +305,60 @@ export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
 function toggleWs(which) {
     const shell = document.querySelector('.ws-shell');
     if (!shell) return;
-    const cls = which === 'pane' ? 'ws-pane-collapsed' : 'ws-rail-collapsed';
+    const cls = which === 'pane' ? 'ws-pane-collapsed'
+        : which === 'sessions' ? 'ws-sessions-collapsed'
+        : 'ws-rail-collapsed';
     const nowCollapsed = shell.classList.toggle(cls);
-    const btn = document.querySelector('.ws-' + which + '-toggle');
-    if (btn) btn.setAttribute('aria-expanded', nowCollapsed ? 'false' : 'true');
+    document.querySelectorAll('.ws-' + which + '-toggle').forEach((btn) =>
+        btn.setAttribute('aria-expanded', nowCollapsed ? 'false' : 'true'));
     try {
         localStorage.setItem('ds.ws.' + which, nowCollapsed ? 'collapsed' : 'open');
     } catch (_) {}
 }
 
+// Column resize: read the current rendered track width and write a clamped inline
+// --ws-<col>-w on .ws-shell (inline overrides the fluid clamp base), persisted.
+const WS_RESIZE_CLAMP = { rail: [60, 360], sessions: [200, 520], pane: [240, 560] };
+function wsResize(col, dx) {
+    const shell = document.querySelector('.ws-shell');
+    if (!shell) return;
+    const track = shell.querySelector('.ws-' + col);
+    const cur = track ? track.getBoundingClientRect().width : 0;
+    const [lo, hi] = WS_RESIZE_CLAMP[col] || [120, 600];
+    const next = Math.max(lo, Math.min(hi, Math.round(cur + dx)));
+    shell.style.setProperty('--ws-' + col + '-w', next + 'px');
+    try { localStorage.setItem('ds.ws.w.' + col, String(next)); } catch (_) {}
+}
+function seedWsWidths(el) {
+    if (!el) return;
+    ['rail', 'sessions', 'pane'].forEach((col) => {
+        try {
+            const v = localStorage.getItem('ds.ws.w.' + col);
+            if (v && /^\d+$/.test(v)) el.style.setProperty('--ws-' + col + '-w', v + 'px');
+        } catch (_) {}
+    });
+}
+function WsResizer(col) {
+    const onKey = (e) => {
+        if (e.key === 'ArrowLeft') { e.preventDefault(); wsResize(col, -16); }
+        else if (e.key === 'ArrowRight') { e.preventDefault(); wsResize(col, 16); }
+    };
+    const onDown = (e) => {
+        e.preventDefault();
+        let lastX = e.clientX;
+        const move = (ev) => { const dx = ev.clientX - lastX; lastX = ev.clientX; wsResize(col, dx); };
+        const up = () => { document.removeEventListener('pointermove', move); document.removeEventListener('pointerup', up); document.body.style.cursor = ''; };
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', up);
+        document.body.style.cursor = 'col-resize';
+    };
+    return h('div', {
+        class: 'ws-resizer ws-resizer-' + col, role: 'separator', tabindex: '0',
+        'aria-orientation': 'vertical', 'aria-label': 'resize ' + col + ' column (arrow keys)',
+        onpointerdown: onDown, onkeydown: onKey,
+    });
+}
+
 // Toggle a mobile WorkspaceShell DRAWER (sessions or pane). Distinct from the
 // desktop width-collapse (toggleWs): on mobile the columns are fixed overlays
 // revealed by .ws-sessions-open / .ws-pane-open. Opening one closes the other
@@ -388,7 +439,7 @@ export function WorkspaceShell({ rail, sessions, main, pane, crumb, status, narr
         + (((hasPane && paneIsCollapsed) || keepPaneTrack) ? ' ws-pane-collapsed' : '')
         + (hasSessions ? '' : ' ws-no-sessions')
         + (narrow ? ' narrow' : '');
-    return h('div', { class: shellCls },
+    return h('div', { class: shellCls, ref: seedWsWidths },
         h('a', { href: '#ws-main', class: 'skip-link' }, 'skip to main content'),
         // Left rail column. Its own toggle collapses it to icon-only.
         h('nav', { class: 'ws-rail', role: 'navigation', 'aria-label': railLabel },
@@ -424,6 +475,13 @@ export function WorkspaceShell({ rail, sessions, main, pane, crumb, status, narr
                         'aria-label': 'toggle conversations', 'aria-expanded': 'false',
                         onclick: () => toggleWsDrawer('sessions'),
                     }, Icon('thread')) : null,
+                    // Desktop-only sessions collapse (reclaims its width for a
+                    // full-width thread/grid). Hidden on mobile via CSS.
+                    hasSessions ? h('button', {
+                        class: 'ws-desktop-toggle ws-sessions-toggle', type: 'button',
+                        'aria-label': 'collapse conversations', title: 'collapse conversations',
+                        'aria-expanded': 'true', onclick: () => toggleWs('sessions'),
+                    }, Icon('chevron-left')) : null,
                     h('div', { class: 'ws-crumb-main' }, crumb),
                     hasPane ? h('button', {
                         class: 'ws-drawer-toggle ws-pane-drawer-toggle', type: 'button',
@@ -446,6 +504,10 @@ export function WorkspaceShell({ rail, sessions, main, pane, crumb, status, narr
                 }, Icon(paneIsCollapsed ? 'chevron-left' : 'chevron-right')),
                 pane)
             : null,
+        // Keyboard/pointer column resize handles (desktop only).
+        (!narrow && !railIsCollapsed) ? WsResizer('rail') : null,
+        (!narrow && hasSessions) ? WsResizer('sessions') : null,
+        (!narrow && hasPane && !paneIsCollapsed) ? WsResizer('pane') : null,
     );
 }
 

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', {