anentrypoint-design 0.0.237 → 0.0.239

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.237",
+  "version": "0.0.239",
   "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/community-app.js

@@ -12,12 +12,13 @@
 //     isConnected, voiceConnected, voiceChannelName, voiceConnectionState,
 //     voiceParticipants, micMuted, voiceDeafened,
 //     audioQueueItems, audioQueueCurrentId, audioQueuePaused,
-//     showAuthModal, settingsOpen, voiceSettingsOpen, replyTarget
+//     showAuthModal, settingsOpen, voiceSettingsOpen, replyTarget,
+//     mobileMenuOpen   // drives the .ca-rail off-canvas drawer on narrow shells
 //   }
 //   adapter.subscribe(cb) -> unsubscribe   // cb fires when any snapshot field changes
 //   adapter.actions = {
 //     switchChannel(ch), send(text, opts), toggleMic(), toggleDeafen(),
-//     leaveVoice(), toggleMembers(), openMobileMenu(), openSettings(),
+//     leaveVoice(), toggleMembers(), openMobileMenu(), closeMobileMenu(), openSettings(),
 //     channelContext(id, x, y), serverContext(id, x, y), switchServer(id),
 //     goHome(), openServers(), memberMenu(id, name, x, y),
 //     replaySegment(id), skipSegment(), pauseQueue(), resumeQueue(),
@@ -202,9 +203,9 @@ export function mountCommunityApp(root, adapter = {}) {
             MobileHeader({ channelType: ch.type || 'text', channelName: ch.name || '', onMenu: () => A.openMobileMenu && A.openMobileMenu(), onMembers: () => A.toggleMembers && A.toggleMembers() }),
             Banner({ tone: 'warning', message: 'No relay connected. Reconnecting…', visible: s.isConnected === false }),
             Banner({ tone: 'success', visible: !!showVoiceBanner, message: showVoiceBanner ? ('In voice: ' + (s.voiceChannelName || '') + ' — click to return') : '', actionLabel: 'Leave', onAction: (e) => { if (e && e.stopPropagation) e.stopPropagation(); A.leaveVoice && A.leaveVoice(); }, onClick: () => A.returnToVoice && A.returnToVoice() }),
-            h('div', { class: 'app-body' },
-                h('aside', { class: 'app-side ca-rail' }, railView(s)),
-                h('main', { class: 'app-main' },
+            h('div', { class: 'app-body' + (s.mobileMenuOpen ? ' ca-rail-open' : '') },
+                h('aside', { class: 'app-side ca-rail' + (s.mobileMenuOpen ? ' open' : '') }, railView(s)),
+                h('main', { class: 'app-main', onclick: () => { if (s.mobileMenuOpen && A.closeMobileMenu) A.closeMobileMenu(); } },
                     !inVoiceChannel && s.voiceConnected ? VoiceStrip({ channelName: s.voiceChannelName, status: s.voiceConnectionState || 'connected', muted: !!s.micMuted, deafened: !!s.voiceDeafened, onMute: () => A.toggleMic && A.toggleMic(), onDeafen: () => A.toggleDeafen && A.toggleDeafen(), onLeave: () => A.leaveVoice && A.leaveVoice(), open: true }) : null,
                     UserPanel({ name: (s.currentUser && (s.currentUser.displayName || s.currentUser.username || s.currentUser.name)) || 'You', tag: s.currentUser && s.currentUser.tag, color: avatarColor(s.userId), muted: !!s.micMuted, deafened: !!s.voiceDeafened, onMute: () => A.toggleMic && A.toggleMic(), onDeafen: () => A.toggleDeafen && A.toggleDeafen(), onSettings: () => A.openSettings && A.openSettings() }),
                     bodyMain,

package/src/components/chat.js

@@ -480,7 +480,10 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
             autoGrowScheduled = true;
             requestAnimationFrame(() => {
                 ta.style.height = 'auto';
-                ta.style.height = Math.min(ta.scrollHeight, 200) + 'px';
+                // Respect the CSS max-height cap (120px in short-landscape via
+                // app-shell.css) instead of a hardcoded 200px.
+                const cap = parseFloat(getComputedStyle(ta).maxHeight) || 200;
+                ta.style.height = Math.min(ta.scrollHeight, cap) + 'px';
                 autoGrowScheduled = false;
             });
         }
@@ -493,7 +496,8 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
         const next = value || '';
         if (el.value !== next) el.value = next;
         el.style.height = 'auto';
-        el.style.height = Math.min(el.scrollHeight, 200) + 'px';
+        const cap = parseFloat(getComputedStyle(el).maxHeight) || 200;
+        el.style.height = Math.min(el.scrollHeight, cap) + 'px';
     };
     // Optional context line shown above the textarea: agent / model / cwd at the
     // point of typing (the way Claude-Desktop surfaces the active target inline).
@@ -541,10 +545,17 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
         }, joined);
     }
     const hasDraft = !!(value && value.trim());
+    // Clamp the picker anchor to the visual viewport: with the on-screen
+    // keyboard open the composer sits near the visual-viewport bottom, and on
+    // narrow screens the picker width can overflow the right edge.
+    const anchorRect = (anchorEl && anchorEl.getBoundingClientRect) ? anchorEl.getBoundingClientRect() : null;
+    const vvWidth = (typeof window !== 'undefined')
+        ? ((window.visualViewport && window.visualViewport.width) || window.innerWidth)
+        : 0;
     const triggerPicker = triggerMatch ? EmojiPicker({
         open: true,
-        anchorX: (anchorEl && anchorEl.getBoundingClientRect) ? anchorEl.getBoundingClientRect().left : 0,
-        anchorY: (anchorEl && anchorEl.getBoundingClientRect) ? anchorEl.getBoundingClientRect().top : 0,
+        anchorX: anchorRect ? Math.max(0, Math.min(anchorRect.left, vvWidth - 280)) : 0,
+        anchorY: anchorRect ? Math.max(8, anchorRect.top - 8) : 0,
         query: triggerMatch[2] || '',
         onSelect: (ch) => insertEmoji(ch),
         onClose: () => { if (taEl) { const v = taEl.value.replace(EMOJI_TRIGGER_RE, (full, tail) => full.slice(0, full.length - tail.length)); if (onInput) onInput(v); taEl.value = v; taEl.focus(); } },

package/src/components/content.js

@@ -146,6 +146,9 @@ export function Hero({ eyebrow, title, body, accent, badge, badgeCount, actions
 }
 
 export function Marquee({ items = [], sep = '/' }) {
+    // No items -> no ticker: an empty marquee still paints its border-block
+    // rules as an unexplained full-width stripe.
+    if (!items.length) return null;
     // Two identical runs make the -50% translate loop seamless. Each text and
     // separator is a keyed span so webjsx applyDiff never sees a primitive
     // sibling beside a keyed VElement.
@@ -258,7 +261,9 @@ export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothin
     // Native <table>/<tr>/<th>/<td> already carry the correct implicit ARIA
     // roles — explicit role="table"/row/columnheader/cell is redundant and only
     // risks overriding native semantics, so it is omitted.
-    return h('table', {},
+    // Scroll containment lives on the component itself: a wide table used
+    // outside a Panel must never force page-level horizontal scroll.
+    return h('div', { class: 'ds-table-wrap' }, h('table', {},
         h('thead', {}, h('tr', {}, ...headers.map((hd, i) => h('th', { key: i, scope: 'col' }, hd)))),
         h('tbody', {}, ...rows.map((row, i) => h('tr', {
             key: i,
@@ -267,7 +272,7 @@ export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothin
             // Space scrolls by default — preventDefault on Space (and Enter) so
             // keyboard activation matches click without page jump.
             ...(onRowClick ? { tabindex: '0', role: 'button', 'aria-label': 'open ' + labelFor(row, i), onkeydown: (e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onRowClick(i); } } } : {})
-        }, ...row.map((c, j) => h('td', { key: j }, c == null ? '' : (typeof c === 'object' ? c : String(c))))))));
+        }, ...row.map((c, j) => h('td', { key: j }, c == null ? '' : (typeof c === 'object' ? c : String(c)))))))));
 }
 
 export function HomeView({ state = {}, onNav, onToggleWork, works = [], posts = [], manifesto = [], currentlyShipping } = {}) {

package/src/components/data-density.js

@@ -108,7 +108,13 @@ export function SessionRow({ sessId, phaseWalkProps, events, verbs, prd, muts, r
         muts != null ? muts + ' mut' : null,
         resid != null ? resid + ' resid' : null,
     ].filter(Boolean).join(' · ');
-    return h('div', { class: 'ds-session-row', onclick: onClick || null, role: onClick ? 'button' : null, tabindex: onClick ? '0' : null },
+    // Keyboard activation parity: role=button + tabindex without onkeydown is
+    // announced as a button but inert to Enter/Space (mirrors Table()).
+    return h('div', {
+        class: 'ds-session-row', onclick: onClick || null,
+        role: onClick ? 'button' : null, tabindex: onClick ? '0' : null,
+        onkeydown: onClick ? (e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onClick(e); } } : null,
+    },
         h('span', { class: 'ds-session-row-id' }, sessId),
         h('span', { class: 'ds-session-row-counts' }, counts),
         (deviations != null && deviations !== 0) ? h('span', { class: 'ds-session-row-devcnt' }, String(deviations) + ' dev') : null,

package/src/components/editor-primitives.js

@@ -333,7 +333,12 @@ export function ContextMenu({ items = [], anchor = { x: 0, y: 0 }, onClose } = {
             tabindex: '-1',
             onkeydown: onKey,
             ref: (el) => {
-                if (!el) return;
+                if (!el) {
+                    // Unmount: unhook the resize re-clamp bound on mount.
+                    if (rootEl && rootEl._dsCtxClampOff) { rootEl._dsCtxClampOff(); }
+                    rootEl = null;
+                    return;
+                }
                 rootEl = el;
                 // Position at the anchor immediately, then clamp once layout has
                 // settled — measuring synchronously in ref reads a zero-size box
@@ -341,16 +346,28 @@ export function ContextMenu({ items = [], anchor = { x: 0, y: 0 }, onClose } = {
                 const ax = anchor.x || 0, ay = anchor.y || 0;
                 el.style.left = ax + 'px';
                 el.style.top = ay + 'px';
+                const coarse = typeof matchMedia === 'function' && matchMedia('(pointer: coarse)').matches;
                 const clamp = () => {
                     const vw = window.innerWidth, vh = window.innerHeight;
                     const r = el.getBoundingClientRect();
                     let x = ax, y = ay;
+                    // Touch: keep the menu clear of the lifting finger — nudge
+                    // below the touch point, or open above when it fits and the
+                    // anchor sits in the lower half (lift-off would otherwise
+                    // activate the first item).
+                    if (coarse) {
+                        y = ay + 10;
+                        if (ay > vh / 2 && ay - r.height >= 4) y = ay - r.height;
+                    }
                     if (x + r.width > vw) x = Math.max(4, vw - r.width - 4);
                     if (y + r.height > vh) y = Math.max(4, vh - r.height - 4);
                     el.style.left = x + 'px';
                     el.style.top = y + 'px';
                 };
                 requestAnimationFrame(clamp);
+                // Re-clamp on resize/orientation change for the menu's lifetime.
+                window.addEventListener('resize', clamp);
+                el._dsCtxClampOff = () => { window.removeEventListener('resize', clamp); el._dsCtxClampOff = null; };
                 queueMicrotask(() => { el.querySelector('button[data-ix]')?.focus(); });
             }
         },
@@ -373,12 +390,18 @@ export function ContextMenu({ items = [], anchor = { x: 0, y: 0 }, onClose } = {
 // Helper: wires right-click + long-press to a target ref. Caller manages state.
 export function useContextMenu(targetEl, items, openCb) {
     if (!targetEl) return () => {};
-    let touchTimer = null;
-    const open = (x, y) => { if (openCb) openCb({ x, y, items }); };
+    let touchTimer = null, lastOpen = 0;
+    // Android fires the native contextmenu event on long-press AND our 500ms
+    // touch timer — dedupe so the menu opens once, not twice (open/flicker).
+    const open = (x, y) => {
+        if (Date.now() - lastOpen < 700) return;
+        lastOpen = Date.now();
+        if (openCb) openCb({ x, y, items });
+    };
     const onCtx = (e) => { e.preventDefault(); open(e.clientX, e.clientY); };
     const onTouchStart = (e) => {
         const t = e.touches && e.touches[0]; if (!t) return;
-        touchTimer = setTimeout(() => { open(t.clientX, t.clientY); }, 500);
+        touchTimer = setTimeout(() => { touchTimer = null; open(t.clientX, t.clientY); }, 500);
     };
     const cancel = () => { if (touchTimer) { clearTimeout(touchTimer); touchTimer = null; } };
     targetEl.addEventListener('contextmenu', onCtx);

package/src/components/files-modals.js

@@ -6,6 +6,10 @@ import { fileGlyph, fmtFileSize } from './files.js';
 import { highlightAllUnder } from '../highlight.js';
 const h = webjsx.createElement;
 
+// Full focusable set for the modal Tab trap — omitting textarea/select/a[href]
+// lets Tab escape behind the fixed backdrop (fully obscured at mobile sizes).
+const FOCUSABLE_SEL = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
 // Stable per-call-site id source for aria-labelledby: we want one fixed id per
 // logical dialog instance (rename, confirm, prompt, preview), NOT a monotonic
 // counter that advances on every render and leaves the old aria-labelledby
@@ -40,9 +44,7 @@ function Backdrop({ onClose, children, kind = '', labelledBy, busy = false } = {
             // disabled mid-flight (busy state) are excluded from the cycle and
             // do not break tab navigation.
             if (e.key === 'Tab') {
-                const focusables = modal.querySelectorAll(
-                    'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
-                );
+                const focusables = modal.querySelectorAll(FOCUSABLE_SEL);
                 if (focusables.length === 0) {
                     e.preventDefault();
                     return;
@@ -86,7 +88,7 @@ function Backdrop({ onClose, children, kind = '', labelledBy, busy = false } = {
         // Auto-focus on open - only when focus is not already inside the modal
         // (re-renders must not yank the caret around).
         if (!el.contains(document.activeElement)) {
-            const preferred = modal.querySelector('[autofocus]') || firstFocusable;
+            const preferred = modal.querySelector('[autofocus]') || modal.querySelector(FOCUSABLE_SEL);
             if (preferred) preferred.focus();
         }
     };
@@ -323,16 +325,41 @@ function previewKeyNav(onPrev, onNext) {
     };
 }
 
+// Touch stepping: horizontal swipe on the preview body steps prev/next. Skips
+// when the gesture starts inside a horizontally-scrollable child (code <pre>)
+// so panning wide code never flips files.
+function previewSwipe(onPrev, onNext) {
+    if (!onPrev && !onNext) return {};
+    let sx = null, sy = null;
+    return {
+        onpointerdown: (e) => {
+            const scroller = e.target.closest && e.target.closest('pre');
+            if (scroller && scroller.scrollWidth > scroller.clientWidth) { sx = null; return; }
+            sx = e.clientX; sy = e.clientY;
+        },
+        onpointerup: (e) => {
+            if (sx == null) return;
+            const dx = e.clientX - sx, dy = e.clientY - sy;
+            sx = null;
+            if (Math.abs(dx) < 48 || Math.abs(dy) > Math.abs(dx)) return;
+            if (dx < 0 && onNext) onNext();
+            else if (dx > 0 && onPrev) onPrev();
+        },
+        onpointercancel: () => { sx = null; },
+    };
+}
+
 export function FileViewer({ file, body, onClose, onAction, onPrev, onNext } = {}) {
     if (!file) return null;
+    const keyNav = previewKeyNav(onPrev, onNext);
     return Modal({
         onClose,
         kind: 'preview',
         headClass: 'ds-preview-head',
-        headAttrs: { 'data-file-type': file.type || 'other', onkeydown: previewKeyNav(onPrev, onNext) },
+        headAttrs: { 'data-file-type': file.type || 'other', onkeydown: keyNav },
         head: previewHead({ file, onClose, onAction, onPrev, onNext }),
         bodyClass: 'ds-preview-body',
-        bodyAttrs: { 'data-file-type': file.type || 'other' },
+        bodyAttrs: { 'data-file-type': file.type || 'other', onkeydown: keyNav, ...previewSwipe(onPrev, onNext) },
         body: Array.isArray(body) ? body : [body],
     });
 }

package/src/components/overlay-primitives.js

@@ -50,9 +50,13 @@ export function useFloating(anchorEl, contentEl, { placement = 'bottom-start', o
     const cb = () => compute();
     window.addEventListener('resize', cb);
     window.addEventListener('scroll', cb, true);
+    // Reposition when the content box itself resizes (async-loaded content
+    // grows the popover after initial positioning, pushing it off-viewport).
+    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(cb) : null;
+    if (ro) ro.observe(contentEl);
     return {
         update: compute,
-        dispose() { window.removeEventListener('resize', cb); window.removeEventListener('scroll', cb, true); },
+        dispose() { window.removeEventListener('resize', cb); window.removeEventListener('scroll', cb, true); if (ro) ro.disconnect(); },
         get finalPlacement() { return finalPlacement; }
     };
 }

package/src/components/shell.js

@@ -283,6 +283,40 @@ function toggleSide(open, fromEl) {
     body.classList.toggle('side-open', next);
     const btn = shell.querySelector('.app-side-toggle');
     if (btn) btn.setAttribute('aria-expanded', next ? 'true' : 'false');
+    // Keyboard parity with toggleWsDrawer: Esc dismisses the drawer and Tab is
+    // trapped inside it while it overlays the content behind the scrim.
+    if (body._dsSideKey) { document.removeEventListener('keydown', body._dsSideKey); body._dsSideKey = null; }
+    if (next) {
+        const drawer = shell.querySelector('.app-side-shell');
+        const focusable = drawer && drawer.querySelector('button, a, input, [tabindex]');
+        if (focusable) try { focusable.focus(); } catch (_) {}
+        const onKey = (e) => {
+            if (e.key === 'Escape') { toggleSide(false, btn || body); if (btn) try { btn.focus(); } catch (_) {} return; }
+            if (drawer) trapTab(drawer, e);
+        };
+        body._dsSideKey = onKey;
+        document.addEventListener('keydown', onKey);
+    }
+}
+
+// Ref on the .app root: re-sync the toggle's aria-expanded from the live
+// .side-open class (applyDiff re-renders reset the attribute to 'false'), and
+// arm a ResizeObserver that closes a stuck-open drawer when the shell grows
+// past the 900px container breakpoint (the drawer CSS stops applying there,
+// but the class would otherwise persist and reappear on the next shrink).
+function syncAppSide(el) {
+    if (!el) return;
+    const body = el.querySelector('.app-body');
+    const btn = el.querySelector('.app-side-toggle');
+    if (btn && body) btn.setAttribute('aria-expanded', body.classList.contains('side-open') ? 'true' : 'false');
+    if (!el._dsSideRO && typeof ResizeObserver !== 'undefined') {
+        el._dsSideRO = new ResizeObserver((entries) => {
+            const w = entries[0] && entries[0].contentRect.width;
+            const b = el.querySelector('.app-body');
+            if (w > 900 && b && b.classList.contains('side-open')) toggleSide(false, el);
+        });
+        el._dsSideRO.observe(el);
+    }
 }
 
 export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
@@ -296,17 +330,17 @@ export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
     const chrome = (topbar && crumb)
         ? h('div', { class: 'app-chrome' }, topbar, crumb)
         : (topbar || crumb || null);
-    return h('div', { class: 'app' },
+    return h('div', { class: 'app', ref: syncAppSide },
         h('a', { href: '#app-main', class: 'skip-link' }, 'skip to main content'),
         hasSide ? h('button', {
             class: 'app-side-toggle', type: 'button',
-            'aria-label': 'toggle navigation', 'aria-expanded': 'false', 'aria-controls': 'app-main',
+            'aria-label': 'toggle navigation', 'aria-expanded': 'false', 'aria-controls': 'app-side-shell',
             onclick: (e) => toggleSide(null, e.currentTarget),
         }, Icon('menu')) : null,
         chrome,
         h('div', { class: 'app-body' + (hasSide ? '' : ' no-side') },
             h('div', { class: 'app-side-scrim', 'aria-hidden': 'true', onclick: (e) => toggleSide(false, e.currentTarget) }),
-            h('div', { class: 'app-side-shell', onclick: (e) => { if (e.target.closest('a')) toggleSide(false, e.currentTarget); } }, sideNode),
+            h('div', { class: 'app-side-shell', id: 'app-side-shell', onclick: (e) => { if (e.target.closest('a')) toggleSide(false, e.currentTarget); } }, sideNode),
             // tabindex=-1 so the skip-link (href="#app-main") actually moves
             // keyboard focus into the main region, not just scroll to it.
             h('main', { class: 'app-main' + (narrow ? ' narrow' : ''), id: 'app-main', tabindex: '-1' }, ...(Array.isArray(main) ? main : [main]))
@@ -318,14 +352,19 @@ export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
 // 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.
-function toggleWs(which) {
-    const shell = document.querySelector('.ws-shell');
+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);
-    document.querySelectorAll('.ws-' + which + '-toggle').forEach((btn) => {
+    // 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);
@@ -334,6 +373,9 @@ function toggleWs(which) {
     try {
         localStorage.setItem('ds.ws.' + which, nowCollapsed ? 'collapsed' : 'open');
     } catch (_) {}
+    // 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
@@ -349,8 +391,8 @@ function toggleWs(which) {
 // 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) {
-    const shell = document.querySelector('.ws-shell');
+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;
@@ -363,29 +405,37 @@ function wsResize(col, dx, persist = true) {
     // every pointermove frame (that fired dozens of synchronous writes per drag).
     if (persist) { try { localStorage.setItem('ds.ws.w.' + col, String(next)); } catch (_) {} }
 }
+// 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' };
 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', v + 'px');
+            if (v && /^\d+$/.test(v)) el.style.setProperty('--ws-' + col + '-w', `min(${v}px, ${WS_VW_CAP[col]})`);
         } catch (_) {}
     });
 }
 function WsResizer(col) {
     const onKey = (e) => {
-        if (e.key === 'ArrowLeft') { e.preventDefault(); wsResize(col, -16, true); }
-        else if (e.key === 'ArrowRight') { e.preventDefault(); wsResize(col, 16, true); }
+        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); };
+        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); // commit the settled width once
+            wsResize(col, 0, true, handleEl); // commit the settled width once
         };
         document.addEventListener('pointermove', move);
         document.addEventListener('pointerup', up);
@@ -411,39 +461,51 @@ function WsResizer(col) {
 // 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.
-function toggleWsDrawer(which, open) {
-    const shell = document.querySelector('.ws-shell');
+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 = document.querySelector('.ws-' + which + '-drawer-toggle');
+    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).
-    if (next) {
-        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 (_) {}
-        const onKey = (e) => {
-            if (e.key === 'Escape') { toggleWsDrawer(which, false); document.removeEventListener('keydown', onKey); if (btn) try { btn.focus(); } catch (_) {} return; }
-            if (drawer) trapTab(drawer, e);
-        };
-        shell._wsEscHandler = onKey;
-        document.addEventListener('keydown', onKey);
-    }
+    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 (_) {}
+    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 (_) {} 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; }
 }
-function closeWsDrawers() {
-    const shell = document.querySelector('.ws-shell');
+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');
-    document.querySelectorAll('.ws-sessions-drawer-toggle, .ws-pane-drawer-toggle').forEach((b) => b.setAttribute('aria-expanded', 'false'));
-    // Remove Esc handler armed by toggleWsDrawer to prevent ghost close on next Esc.
-    if (shell._wsEscHandler) { document.removeEventListener('keydown', shell._wsEscHandler); shell._wsEscHandler = null; }
+    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
@@ -513,16 +575,22 @@ export function WorkspaceShell({ rail, sessions, main, pane, crumb, status, narr
                 'aria-label': railIsCollapsed ? 'expand navigation' : 'collapse navigation',
                 title: railIsCollapsed ? 'expand navigation' : 'collapse navigation',
                 'aria-expanded': railIsCollapsed ? 'false' : 'true',
-                onclick: () => toggleWs('rail'),
+                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: () => closeWsDrawers() }),
+        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',
-                onclick: (e) => { if (window.innerWidth <= 1100 && e.target.closest('button, a, [role="button"]')) closeWsDrawers(); } }, sessions)
+                // 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
@@ -535,7 +603,7 @@ export function WorkspaceShell({ rail, sessions, main, pane, crumb, status, narr
                         class: 'ws-drawer-toggle ws-sessions-drawer-toggle', type: 'button',
                         'aria-label': 'toggle conversations', 'aria-expanded': 'false',
                         'aria-controls': 'ws-sessions-col',
-                        onclick: () => toggleWsDrawer('sessions'),
+                        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.
@@ -543,7 +611,7 @@ export function WorkspaceShell({ rail, sessions, main, pane, crumb, status, narr
                         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: () => toggleWs('sessions'),
+                        '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
@@ -553,13 +621,13 @@ export function WorkspaceShell({ rail, sessions, main, pane, crumb, status, narr
                         'aria-label': paneIsCollapsed ? 'show context pane' : 'hide context pane',
                         title: paneIsCollapsed ? 'show context pane' : 'hide context pane',
                         'aria-expanded': paneIsCollapsed ? 'false' : 'true',
-                        onclick: () => toggleWs('pane'),
+                        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: () => toggleWsDrawer('pane'),
+                        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' },

package/src/kits/os/launcher.css

@@ -6,13 +6,14 @@
 .launcher-dock {
     position: fixed;
     left: 0; top: 0; bottom: 0;
-    width: var(--os-rail-w, 56px);
+    width: calc(var(--os-rail-w, 56px) + env(safe-area-inset-left, 0px));
     background: var(--os-bg-2);
     border: none;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: var(--space-2, 8px) 0;
+    padding-left: env(safe-area-inset-left, 0px);
     gap: var(--space-2, 8px);
     z-index: 10000;
     pointer-events: auto;
@@ -67,4 +68,10 @@
 .launcher-close { font-size: 11px; opacity: 0.7; width: 20px; height: 20px; color: var(--os-fg-3); }
 .launcher-close:hover { opacity: 1; color: var(--os-red); }
 
-.launcher-dock + .wm-root { left: var(--os-rail-w, 56px) !important; }
+.launcher-dock + .wm-root { left: calc(var(--os-rail-w, 56px) + env(safe-area-inset-left, 0px)) !important; }
+
+/* Touch tap-target floor for dock controls. */
+@media (pointer: coarse) {
+    .launcher-btn { width: 44px; height: 44px; }
+    .launcher-close { width: 44px; height: 44px; font-size: 13px; }
+}