anentrypoint-design 0.0.384 → 0.0.385

package/src/components/shell/workspace-columns.js

@@ -0,0 +1,179 @@
+// Pure-DOM column state for WorkspaceShell: desktop collapse toggles, the
+// drag/keyboard resize handle and its clamps, the persisted-width seeder, and
+// the mobile drawer open/close (with Esc + focus-trap + viewport auto-close).
+// WorkspaceShell itself is stateless chrome, so all of this lives as classes
+// and inline --ws-*-w vars on .ws-shell rather than in a host store.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { trapTab } from '../overlay-primitives.js';
+const h = webjsx.createElement;
+
+// Toggle a named WorkspaceShell column (left rail or right pane). Pure-DOM like
+// toggleSide: WorkspaceShell is stateless chrome, the collapsed class lives on
+// .ws-shell and is read by both CSS and the toggle buttons' aria-expanded.
+export function toggleWs(which, fromEl) {
+    // Scope to the shell owning the clicked control, like toggleSide — the
+    // first-on-page querySelector toggles the WRONG shell with two instances.
+    const shell = (fromEl && fromEl.closest && fromEl.closest('.ws-shell')) || document.querySelector('.ws-shell');
+    if (!shell) return;
+    const cls = which === 'pane' ? 'ws-pane-collapsed'
+        : which === 'sessions' ? 'ws-sessions-collapsed'
+        : 'ws-rail-collapsed';
+    const nowCollapsed = shell.classList.toggle(cls);
+    // Inline --ws-*-w beats the collapsed-class rule in the cascade, so a
+    // persisted width would render a "collapsed" column 200-640px wide.
+    if (nowCollapsed) shell.style.removeProperty('--ws-' + which + '-w');
+    shell.querySelectorAll('.ws-' + which + '-toggle').forEach((btn) => {
+        btn.setAttribute('aria-expanded', nowCollapsed ? 'false' : 'true');
+        const nextLabel = nowCollapsed ? 'expand ' + which : 'collapse ' + which;
+        btn.setAttribute('aria-label', nextLabel);
+        btn.setAttribute('title', nextLabel);
+    });
+    try {
+        localStorage.setItem('ds.ws.' + which, nowCollapsed ? 'collapsed' : 'open');
+    } catch (_) { /* swallow: persistence is best-effort, collapse state still applies in-memory */ }
+    // Expanding restores the persisted width (seed skips collapsed columns, so
+    // it must run after the open flag is written).
+    if (!nowCollapsed) seedWsWidths(shell);
+}
+
+// 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.
+// Floors match the CSS fluid clamp() floors in app-shell.css (--ws-rail-w
+// clamp(200,16vw,260); sessions clamp(248,22vw,360); pane clamp(288,24vw,420))
+// so a drag/arrow can never shrink a column below its designed minimum (the
+// collapsed rail is a SEPARATE class, not a resize target). The ceilings are
+// INTENTIONALLY raised above the fluid clamp() mid-term ceilings: on wide
+// viewports the 16/22/24vw mid term already pins each column to its clamp
+// ceiling, so a ceiling-equals-clamp bound made the outward drag inert there.
+// The higher resize ceilings let a deliberate drag/arrow grow a column past its
+// auto-fluid width (the inline --ws-<col>-w override pins the chosen width past
+// the clamp base).
+const WS_RESIZE_CLAMP = { rail: [200, 320], sessions: [248, 520], pane: [288, 640] };
+function wsResize(col, dx, persist = true, fromEl) {
+    const shell = (fromEl && fromEl.closest && fromEl.closest('.ws-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');
+    const handle = shell.querySelector('.ws-resizer-' + col);
+    if (handle) { handle.setAttribute('aria-valuenow', String(next)); handle.setAttribute('aria-valuetext', next + ' pixels'); }
+    // Commit to storage only on a settled move (pointerup / keyboard), not on
+    // every pointermove frame (that fired dozens of synchronous writes per drag).
+    if (persist) { try { localStorage.setItem('ds.ws.w.' + col, String(next)); } catch (_) { /* swallow: persistence is best-effort, resize still applies in-memory */ } }
+}
+// Per-column viewport caps for persisted widths: a width dragged on a wide
+// monitor must not crush the content column when the page reloads on a
+// narrower screen (rail 320 + sessions 520 would leave ~180px of content).
+const WS_VW_CAP = { rail: '20vw', sessions: '30vw', pane: '32vw' };
+export function seedWsWidths(el) {
+    if (!el) return;
+    ['rail', 'sessions', 'pane'].forEach((col) => {
+        try {
+            // A persisted-collapsed column must stay collapsed: the inline var
+            // would beat the .ws-*-collapsed class rule in the cascade.
+            if (wsCollapsed(col, false)) return;
+            const v = localStorage.getItem('ds.ws.w.' + col);
+            if (v && /^\d+$/.test(v)) el.style.setProperty('--ws-' + col + '-w', `min(${v}px, ${WS_VW_CAP[col]})`);
+        } catch (_) { /* swallow: localStorage unavailable, seeding is best-effort */ }
+    });
+}
+export function WsResizer(col) {
+    const onKey = (e) => {
+        if (e.key === 'ArrowLeft') { e.preventDefault(); wsResize(col, -16, true, e.currentTarget); }
+        else if (e.key === 'ArrowRight') { e.preventDefault(); wsResize(col, 16, true, e.currentTarget); }
+    };
+    const onDown = (e) => {
+        e.preventDefault();
+        const handleEl = e.currentTarget;
+        let lastX = e.clientX;
+        const move = (ev) => { const dx = ev.clientX - lastX; lastX = ev.clientX; wsResize(col, dx, false, handleEl); };
+        const up = () => {
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', up);
+            document.body.style.cursor = '';
+            wsResize(col, 0, true, handleEl); // commit the settled width once
+        };
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', up);
+        document.body.style.cursor = 'col-resize';
+    };
+    const [lo, hi] = WS_RESIZE_CLAMP[col] || [120, 600];
+    // Seed aria-valuenow from the rendered track width so AT announces real widths.
+    const seedNow = (el) => {
+        if (!el) return;
+        const track = el.closest('.ws-shell') && el.closest('.ws-shell').querySelector('.ws-' + col);
+        if (track) { const w = Math.round(track.getBoundingClientRect().width); el.setAttribute('aria-valuenow', String(w)); el.setAttribute('aria-valuetext', w + ' pixels'); }
+    };
+    return h('div', {
+        class: 'ws-resizer ws-resizer-' + col, role: 'separator', tabindex: '0',
+        'aria-orientation': 'vertical', 'aria-label': 'resize ' + col + ' column (arrow keys)',
+        'aria-valuemin': String(lo), 'aria-valuemax': String(hi), 'aria-valuetext': String(hi) + ' pixels',
+        onpointerdown: onDown, onkeydown: onKey, ref: seedNow,
+    });
+}
+
+// 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
+// (only one drawer at a time over the content). Esc + scrim dismiss call this
+// with open=false. Pure-DOM, matching the AppShell toggleSide pattern.
+export function toggleWsDrawer(which, open, fromEl) {
+    const shell = (fromEl && fromEl.closest && fromEl.closest('.ws-shell')) || document.querySelector('.ws-shell');
+    if (!shell) return;
+    const cls = which === 'pane' ? 'ws-pane-open' : 'ws-sessions-open';
+    const other = which === 'pane' ? 'ws-sessions-open' : 'ws-pane-open';
+    const next = open != null ? open : !shell.classList.contains(cls);
+    shell.classList.toggle(cls, next);
+    if (next) shell.classList.remove(other);
+    const btn = shell.querySelector('.ws-' + which + '-drawer-toggle');
+    if (btn) btn.setAttribute('aria-expanded', next ? 'true' : 'false');
+    if (!next) { removeWsDrawerHandlers(shell); return; }
+    // When opening, move focus into the drawer, arm an Esc-to-close, and trap
+    // Tab/Shift+Tab inside the drawer (a real focus trap, matching the kit's
+    // own dialogs - Tab from inside an open drawer previously walked focus out
+    // into the scrim/background content behind it).
+    const drawer = shell.querySelector(which === 'pane' ? '.ws-pane' : '.ws-sessions');
+    const focusable = drawer && drawer.querySelector('button, a, input, [tabindex]');
+    if (focusable) try { focusable.focus(); } catch (_) { /* swallow: focus() can throw on a detached/hidden element, drawer still opens */ }
+    removeWsDrawerHandlers(shell); // replace, never stack (opening one drawer over the other)
+    const onKey = (e) => {
+        if (e.key === 'Escape') { toggleWsDrawer(which, false, shell); if (btn) try { btn.focus(); } catch (_) { /* swallow: focus() can throw on a detached/hidden element */ } return; }
+        if (drawer) trapTab(drawer, e);
+    };
+    shell._wsEscHandler = onKey;
+    document.addEventListener('keydown', onKey);
+    // The drawer CSS stops applying above its breakpoint; auto-close when the
+    // viewport grows past it so the open class and armed Esc/focus-trap
+    // handlers do not linger invisibly in desktop layout.
+    const mq = window.matchMedia('(max-width: 1480px)');
+    const onMq = () => { if (!mq.matches) closeWsDrawers(shell); };
+    shell._wsDrawerMq = { mq, onMq };
+    mq.addEventListener('change', onMq);
+}
+function removeWsDrawerHandlers(shell) {
+    // Remove Esc/focus-trap handler armed by toggleWsDrawer (prevents ghost
+    // close on next Esc) and the viewport-growth auto-close listener.
+    if (shell._wsEscHandler) { document.removeEventListener('keydown', shell._wsEscHandler); shell._wsEscHandler = null; }
+    if (shell._wsDrawerMq) { shell._wsDrawerMq.mq.removeEventListener('change', shell._wsDrawerMq.onMq); shell._wsDrawerMq = null; }
+}
+export function closeWsDrawers(fromEl) {
+    const shell = (fromEl && fromEl.closest && fromEl.closest('.ws-shell')) || document.querySelector('.ws-shell');
+    if (!shell) return;
+    shell.classList.remove('ws-sessions-open', 'ws-pane-open');
+    shell.querySelectorAll('.ws-sessions-drawer-toggle, .ws-pane-drawer-toggle').forEach((b) => b.setAttribute('aria-expanded', 'false'));
+    removeWsDrawerHandlers(shell);
+}
+
+// Read persisted collapse state for a WorkspaceShell column so the layout is
+// predictable across reloads (Claude-Desktop keeps the rail where you left it).
+export function wsCollapsed(which, fallback) {
+    try {
+        const v = localStorage.getItem('ds.ws.' + which);
+        if (v === 'collapsed') return true;
+        if (v === 'open') return false;
+    } catch (_) { /* swallow: localStorage unavailable, fall back to caller-supplied default */ }
+    return !!fallback;
+}

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

@@ -0,0 +1,181 @@
+// The Claude-Desktop / cowork multi-column app frame: WorkspaceShell (rail +
+// optional sessions + main + optional context pane) and WorkspaceRail (the
+// rail's own brand/action/nav contents). Both are pure stateless chrome —
+// every collapse/resize/drawer behaviour lives in ./workspace-columns.js.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from './icons.js';
+import { toggleWs, toggleWsDrawer, closeWsDrawers, wsCollapsed, seedWsWidths, WsResizer } from './workspace-columns.js';
+const h = webjsx.createElement;
+
+/**
+ * A Claude-Desktop / cowork three-(or four-)column app shell.
+ *
+ * Pure stateless chrome (props in, vnode out). Collapse is DOM-class + a
+ * persisted flag, so the host does not have to thread collapse state through
+ * its own store. Visual styling lives in app-shell.css (.ws-*).
+ *
+ * @param {Object} props
+ * @param {*} props.rail - the persistent left workspace nav (icon+label items, collapsible to icon-only). Pass the result of WorkspaceRail() or any vnode.
+ * @param {*} props.sessions - an OPTIONAL second column (a conversation/session list) shown between the rail and the main content. Null hides it.
+ * @param {*} props.main - the primary content column (chat thread, files view, dashboard...).
+ * @param {*} props.pane - an OPTIONAL right context pane (per-conversation context, file preview...). Null hides it; collapsible when present.
+ * @param {*} props.crumb - an optional thin top chrome bar (breadcrumb + status), spanning the content area only (the rail has its own header).
+ * @param {*} props.status - an optional footer.
+ * @param {boolean} props.narrow - caller's isNarrow() — drives the mobile single-column collapse.
+ * @param {boolean} props.railCollapsed - initial rail collapse (persisted state wins).
+ * @param {boolean} props.paneCollapsed - initial pane collapse (persisted state wins).
+ * @returns {*} webjsx vnode
+ */
+export function WorkspaceShell({ rail, sessions, main, pane, crumb, status, narrow,
+                                 railCollapsed = false, paneCollapsed = false,
+                                 railLabel = 'workspace navigation',
+                                 paneLabel = 'context', stableFrame = false, mainFlush = false } = {}) {
+    const hasSessions = Boolean(sessions);
+    const hasPane = Boolean(pane);
+    // Stable frame: keep the pane grid TRACK present even when this tab has no
+    // pane, so the shell does not re-flow its column count (4/3/2) on every tab
+    // switch - the loudest "separate pages" tell. The track collapses to width 0
+    // (ws-pane-collapsed) instead of being removed (ws-no-pane), so chat/history/
+    // files/live/settings all keep the same column geometry. The sessions column
+    // gets the identical treatment (ws-sessions-collapsed instead of ws-no-sessions)
+    // so files/live/settings do not shift the main column when sessions is null.
+    const keepPaneTrack = stableFrame && !hasPane;
+    const keepSessionsTrack = stableFrame && !hasSessions;
+    const railIsCollapsed = wsCollapsed('rail', railCollapsed);
+    const paneIsCollapsed = hasPane ? wsCollapsed('pane', paneCollapsed) : true;
+    const sessionsIsCollapsed = hasSessions ? wsCollapsed('sessions', false) : true;
+    const shellCls = 'ws-shell'
+        + (railIsCollapsed ? ' ws-rail-collapsed' : '')
+        + ((hasPane || keepPaneTrack) ? '' : ' ws-no-pane')
+        + (((hasPane && paneIsCollapsed) || keepPaneTrack) ? ' ws-pane-collapsed' : '')
+        + ((hasSessions || keepSessionsTrack) ? '' : ' ws-no-sessions')
+        + (((hasSessions && sessionsIsCollapsed) || keepSessionsTrack) ? ' ws-sessions-collapsed' : '')
+        + (narrow ? ' narrow' : '');
+    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 },
+            h('button', {
+                class: 'ws-rail-toggle', type: 'button',
+                // Label reflects the ACTION the click performs (expand when
+                // collapsed, collapse when expanded), not a static word - a
+                // stale "collapse navigation" on an already-collapsed rail
+                // mis-announces the control to AT.
+                'aria-label': railIsCollapsed ? 'expand navigation' : 'collapse navigation',
+                title: railIsCollapsed ? 'expand navigation' : 'collapse navigation',
+                'aria-expanded': railIsCollapsed ? 'false' : 'true',
+                onclick: (e) => toggleWs('rail', e.currentTarget),
+            }, Icon('menu')),
+            rail || null),
+        // Tap-scrim behind an open mobile drawer; click anywhere dismisses.
+        h('div', { class: 'ws-scrim', 'aria-hidden': 'true', onclick: (e) => closeWsDrawers(e.currentTarget) }),
+        // Optional sessions column. On mobile it is a drawer; selecting a row
+        // (any button click inside) auto-closes it, mirroring AppShell.
+        hasSessions
+            ? h('div', { id: 'ws-sessions-col', class: 'ws-sessions', role: 'complementary', 'aria-label': 'conversations',
+                // Drawer mode is detected by geometry (position:fixed only holds
+                // in drawer mode), not window.innerWidth - the shell may live in
+                // an embedded window narrower than the viewport.
+                onclick: (e) => {
+                    const col = e.currentTarget;
+                    if (getComputedStyle(col).position === 'fixed' && e.target.closest('button, a, [role="button"]')) closeWsDrawers(col);
+                } }, sessions)
+            : null,
+        // Primary content column, with an optional thin crumb bar on top. On
+        // mobile the crumb hosts the drawer toggles (sessions on the left, pane
+        // on the right) so both overlay columns are reachable - without them the
+        // conversation list and context pane are dead on <=900px.
+        h('div', { class: 'ws-content' },
+            crumb
+                ? h('div', { class: 'ws-crumb' },
+                    hasSessions ? h('button', {
+                        class: 'ws-drawer-toggle ws-sessions-drawer-toggle', type: 'button',
+                        'aria-label': 'toggle conversations', 'aria-expanded': 'false',
+                        'aria-controls': 'ws-sessions-col',
+                        onclick: (e) => toggleWsDrawer('sessions', null, e.currentTarget),
+                    }, 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': sessionsIsCollapsed ? 'expand conversations' : 'collapse conversations',
+                        title: sessionsIsCollapsed ? 'expand conversations' : 'collapse conversations',
+                        'aria-expanded': sessionsIsCollapsed ? 'false' : 'true', onclick: (e) => toggleWs('sessions', e.currentTarget),
+                    }, Icon(sessionsIsCollapsed ? 'chevron-right' : 'chevron-left')) : null,
+                    h('div', { class: 'ws-crumb-main' }, crumb),
+                    // Desktop-only context-pane collapse, on the same crumb-level
+                    // chrome idiom as the sessions toggle. Hidden on mobile via CSS.
+                    hasPane ? h('button', {
+                        class: 'ws-desktop-toggle ws-pane-toggle', type: 'button',
+                        'aria-label': paneIsCollapsed ? 'show context pane' : 'hide context pane',
+                        title: paneIsCollapsed ? 'show context pane' : 'hide context pane',
+                        'aria-expanded': paneIsCollapsed ? 'false' : 'true',
+                        onclick: (e) => toggleWs('pane', e.currentTarget),
+                    }, Icon(paneIsCollapsed ? 'chevron-left' : 'chevron-right')) : null,
+                    hasPane ? h('button', {
+                        class: 'ws-drawer-toggle ws-pane-drawer-toggle', type: 'button',
+                        'aria-label': 'toggle context pane', 'aria-expanded': 'false',
+                        'aria-controls': 'ws-pane-col',
+                        onclick: (e) => toggleWsDrawer('pane', null, e.currentTarget),
+                    }, Icon('page')) : null)
+                : null,
+            h('main', { class: 'ws-main' + (narrow ? ' narrow' : '') + (mainFlush ? ' ws-main--flush' : ''), id: 'ws-main', tabindex: '-1' },
+                ...(Array.isArray(main) ? main : [main])),
+            status || null),
+        // Optional right context pane. Its desktop collapse toggle now lives in
+        // the crumb cluster, alongside the sessions toggle.
+        hasPane
+            ? h('aside', { id: 'ws-pane-col', class: 'ws-pane', role: 'complementary', 'aria-label': paneLabel },
+                pane)
+            : null,
+        // Keyboard/pointer column resize handles (desktop only).
+        (!narrow && !railIsCollapsed) ? WsResizer('rail') : null,
+        (!narrow && (hasSessions || keepSessionsTrack) && !sessionsIsCollapsed) ? WsResizer('sessions') : null,
+        (!narrow && (hasPane || keepPaneTrack) && !paneIsCollapsed) ? WsResizer('pane') : null,
+    );
+}
+
+// WorkspaceRail — the contents of the WorkspaceShell left rail: a brand/header,
+// a primary action (New chat), and a list of nav items. Each item collapses to
+// an icon when the rail is collapsed (the label is kept in the DOM for AT and
+// shown via CSS when expanded).
+//
+//   brand   : short product name shown in the rail header.
+//   action  : { label, icon, onClick } a prominent primary button (New chat).
+//   items   : [{ key, label, icon, active, count, rail, onClick }] nav entries.
+//             `rail` (optional tone e.g. 'flame') paints an attention dot on the
+//             item — used when something in that surface needs the user's eyes
+//             even though they are looking at a different tab (e.g. a live
+//             session in error while the user is in Chat).
+//   footer  : optional vnode pinned to the rail bottom (e.g. settings/theme).
+export function WorkspaceRail({ brand = '247420', action, items = [], footer } = {}) {
+    return h('div', { class: 'ws-rail-inner' },
+        h('div', { class: 'ws-rail-head' },
+            h('span', { class: 'ws-rail-brand' }, brand)),
+        action
+            ? h('button', {
+                class: 'ws-rail-action', type: 'button',
+                'aria-label': action.label,
+                onclick: action.onClick || null,
+            }, action.icon ? Icon(action.icon) : null, h('span', { class: 'ws-rail-action-label' }, action.label))
+            : null,
+        h('ul', { class: 'ws-rail-nav', role: 'list' },
+            ...items.map((it) => h('li', { key: it.key || it.label, role: 'listitem' },
+                h('button', {
+                    type: 'button',
+                    class: 'ws-rail-item' + (it.active ? ' active' : '') + (it.rail ? ' has-rail-flag' : ''),
+                    'aria-current': it.active ? 'page' : null,
+                    'aria-label': it.label + (it.count ? ' (' + it.count + ')' : '') + (it.rail === 'flame' ? ', needs attention' : ''),
+                    title: it.label,
+                    onclick: it.onClick || null,
+                },
+                    it.icon ? Icon(it.icon) : h('span', { class: 'ws-rail-item-glyph', 'aria-hidden': 'true' }),
+                    h('span', { class: 'ws-rail-item-label' }, it.label),
+                    (it.count != null && it.count !== 0 && it.count !== '0')
+                        ? h('span', { class: 'ws-rail-item-count', 'aria-hidden': 'true' }, String(it.count))
+                        : null,
+                    it.rail ? h('span', { class: 'ws-rail-item-flag tone-' + it.rail, 'aria-hidden': 'true' }) : null)))),
+        footer ? h('div', { class: 'ws-rail-foot' }, footer) : null,
+    );
+}