anentrypoint-design 0.0.381 → 0.0.382

package/src/components/overlay-primitives/approval-prompt.js

@@ -0,0 +1,38 @@
+// ApprovalPrompt — an inline, in-thread tool-permission card (as opposed to
+// PermissionMenu's settings-style dropdown): shows the tool name + an
+// optional args preview, an optional free-text note the user can attach to
+// their decision (auto-focused, since the note is usually the primary
+// reason to open this card at all), and up to four resolution actions
+// (once/session/all/deny). Mirrors docstudio's chat-approval-prompts.js
+// buildApprovalPrompt shape. The note textarea is entirely optional -
+// omitting `onDecision`'s use of the note arg keeps existing simpler
+// once/deny-only call sites unaffected.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from '../shell.js';
+const h = webjsx.createElement;
+
+export function ApprovalPrompt({ toolName, categoryLabel, argsPreview, onDecision, autoFocusNote = true } = {}) {
+    let noteEl = null;
+    const noteRef = (el) => {
+        if (!el || noteEl === el) return;
+        noteEl = el;
+        if (autoFocusNote) queueMicrotask(() => noteEl && noteEl.focus());
+    };
+    const decide = (kind) => { if (onDecision) onDecision(kind, (noteEl && noteEl.value || '').trim()); };
+    return h('div', { class: 'ov-approval', role: 'group', 'aria-label': toolName ? `Permission requested: ${toolName}` : 'Permission requested' },
+        h('div', { class: 'ov-approval-head' },
+            h('span', { class: 'ov-approval-icon' }, Icon('lock', { size: 16 })),
+            h('strong', { class: 'ov-approval-tool' }, toolName || ''),
+            categoryLabel ? h('span', { class: 'ov-approval-cat' }, '- ' + categoryLabel) : null),
+        argsPreview ? h('pre', { class: 'ov-approval-args' }, argsPreview) : null,
+        h('textarea', {
+            class: 'ov-approval-note', ref: noteRef,
+            placeholder: 'Add instructions for the assistant (optional)...',
+        }),
+        h('div', { class: 'ov-approval-actions' },
+            h('button', { type: 'button', class: 'ov-approval-btn ov-approval-btn-primary', onclick: () => decide('once') }, 'Allow once'),
+            h('button', { type: 'button', class: 'ov-approval-btn ov-approval-btn-soft', onclick: () => decide('session') }, 'Allow for session'),
+            h('button', { type: 'button', class: 'ov-approval-btn', onclick: () => decide('all') }, 'Allow all'),
+            h('button', { type: 'button', class: 'ov-approval-btn ov-approval-btn-deny', onclick: () => decide('deny') }, 'Deny')));
+}

package/src/components/overlay-primitives/auth-modal.js

@@ -0,0 +1,89 @@
+// AuthModal — centered login dialog: extension / generate / import (nsec) modes.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from '../shell.js';
+const h = webjsx.createElement;
+
+export function AuthModal({ mode = 'extension', error = '', busy = false, open = false, onModeChange, onConnectExtension, onGenerate, onImport, onClose } = {}) {
+    if (!open) return null;
+    const close = () => onClose && onClose();
+    const modes = [
+        { id: 'extension', label: 'Extension' },
+        { id: 'generate', label: 'Generate' },
+        { id: 'import', label: 'Import key' },
+    ];
+    let nsec = '';
+    const body = () => {
+        if (mode === 'generate') {
+            return [
+                h('p', { class: 'ov-auth-hint' }, 'Create a fresh Nostr identity. Back up the key after.'),
+                h('button', { type: 'button', class: 'ov-auth-primary', disabled: busy ? true : null,
+                    onclick: () => onGenerate && onGenerate() }, busy ? 'Working…' : 'Generate new key'),
+            ];
+        }
+        if (mode === 'import') {
+            return [
+                h('p', { class: 'ov-auth-hint' }, 'Paste an existing nsec / hex secret key.'),
+                h('input', {
+                    type: 'password', class: 'ov-auth-input', placeholder: 'nsec1…',
+                    'aria-label': 'secret key', disabled: busy ? true : null,
+                    oninput: (e) => { nsec = e.target.value; },
+                    onkeydown: (e) => { if (e.key === 'Enter') { e.preventDefault(); onImport && onImport(nsec); } },
+                }),
+                h('button', { type: 'button', class: 'ov-auth-primary', disabled: busy ? true : null,
+                    onclick: () => onImport && onImport(nsec) }, busy ? 'Working…' : 'Import'),
+            ];
+        }
+        return [
+            h('p', { class: 'ov-auth-hint' }, 'Connect a NIP-07 browser extension (Alby, nos2x…).'),
+            h('button', { type: 'button', class: 'ov-auth-primary', disabled: busy ? true : null,
+                onclick: () => onConnectExtension && onConnectExtension() }, busy ? 'Connecting…' : 'Connect extension'),
+        ];
+    };
+    return h('div', {
+        class: 'ov-auth-backdrop', role: 'presentation',
+        ref: (el) => {
+            if (!el || el._ovAuth) return; el._ovAuth = true;
+            el.addEventListener('mousedown', (e) => {
+                const panel = el.querySelector('.ov-auth-panel');
+                if (panel && !panel.contains(e.target)) close();
+            });
+        },
+    },
+        h('div', {
+            class: 'ov-auth-panel', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Sign in',
+            onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); } },
+        },
+            h('div', { class: 'ov-auth-head' },
+                h('h2', { class: 'ov-auth-title' }, 'Sign in'),
+                h('button', { type: 'button', class: 'ov-auth-x', 'aria-label': 'close', onclick: close }, Icon('x'))
+            ),
+            h('div', { class: 'ov-auth-tabs', role: 'tablist',
+                onkeydown: (e) => {
+                    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+                    const panel = e.currentTarget.closest('.ov-auth-panel');
+                    const tabs = panel ? [...panel.querySelectorAll('.ov-auth-tab')] : [];
+                    if (!tabs.length) return;
+                    const idx = tabs.indexOf(document.activeElement);
+                    if (idx < 0) return;
+                    e.preventDefault();
+                    const next = e.key === 'ArrowRight' ? (idx + 1) % tabs.length : (idx - 1 + tabs.length) % tabs.length;
+                    tabs[next].focus();
+                    onModeChange && onModeChange(modes[next].id);
+                },
+            },
+                ...modes.map(m => h('button', {
+                    type: 'button', role: 'tab', key: 'am-' + m.id,
+                    id: 'ov-auth-tab-' + m.id,
+                    class: 'ov-auth-tab' + (m.id === mode ? ' is-active' : ''),
+                    'aria-selected': m.id === mode ? 'true' : 'false',
+                    'aria-controls': 'ov-auth-panel',
+                    onclick: () => onModeChange && onModeChange(m.id),
+                }, m.label))
+            ),
+            h('div', { class: 'ov-auth-body', id: 'ov-auth-panel', role: 'tabpanel',
+                'aria-labelledby': 'ov-auth-tab-' + mode }, ...body()),
+            error ? h('div', { class: 'ov-auth-error', role: 'alert' }, String(error)) : null
+        )
+    );
+}

package/src/components/overlay-primitives/command-palette.js

@@ -0,0 +1,101 @@
+// CommandPalette — centered Cmd+K palette with live filter + keyboard nav.
+// The result list is rendered imperatively (applyDiff into the list element)
+// so filter/active-index changes repaint only the list, not the whole page.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+export function CommandPalette({ open, items = [], onSelect, onClose } = {}) {
+    if (!open) return null;
+    const list = Array.isArray(items) ? items : [];
+    const labelOf = (it) => String(it.label || it.title || it.name || '');
+    let active = 0, filterText = '';
+
+    const matches = () => {
+        const q = filterText.trim().toLowerCase();
+        return q ? list.filter(it => labelOf(it).toLowerCase().includes(q)) : list.slice();
+    };
+
+    const rowsFor = (filtered) => {
+        const out = [];
+        let lastGroup = null, flatIdx = 0;
+        for (const it of filtered) {
+            const grp = it.group != null ? String(it.group) : null;
+            if (grp && grp !== lastGroup) {
+                out.push(h('div', { class: 'ov-cmd-group', role: 'presentation' }, grp));
+                lastGroup = grp;
+            }
+            const idx = flatIdx++;
+            const glyph = it.icon != null ? it.icon : (it.glyph != null ? it.glyph : null);
+            const hint = it.hint != null ? it.hint : (it.shortcut != null ? it.shortcut : null);
+            out.push(h('button', {
+                type: 'button', role: 'option',
+                id: 'ov-cmd-item-' + idx,
+                'data-idx': String(idx),
+                'aria-selected': idx === active ? 'true' : 'false',
+                class: 'ov-cmd-item' + (idx === active ? ' is-active' : ''),
+                onclick: () => choose(it),
+                onmousemove: () => { if (active !== idx) { active = idx; renderInner(); } },
+            },
+                glyph != null ? h('span', { class: 'ov-cmd-glyph', 'aria-hidden': 'true' }, glyph) : null,
+                h('span', { class: 'ov-cmd-label' }, labelOf(it)),
+                hint != null ? h('span', { class: 'ov-cmd-hint' }, hint) : null
+            ));
+        }
+        return out;
+    };
+
+    let rootEl = null, inputEl = null, listEl = null, flat = [];
+    // Remember the element focused before the palette opened so we can return
+    // focus there on close (the input steals focus on mount).
+    const prevFocus = (typeof document !== 'undefined') ? document.activeElement : null;
+    const restoreFocus = () => { if (prevFocus && prevFocus.focus && document.contains(prevFocus)) prevFocus.focus(); };
+    const close = () => { restoreFocus(); if (onClose) onClose(); };
+    const choose = (it) => { if (it && onSelect) onSelect(it); };
+
+    const renderInner = () => {
+        if (!listEl) return;
+        const filtered = matches();
+        flat = filtered;
+        if (active >= filtered.length) active = Math.max(0, filtered.length - 1);
+        webjsx.applyDiff(listEl, h('div', { class: 'ov-cmd-list-inner' },
+            filtered.length ? rowsFor(filtered) : h('div', { class: 'ov-cmd-empty' }, 'No results')));
+        const sel = listEl.querySelector('.ov-cmd-item.is-active');
+        if (sel && sel.scrollIntoView) sel.scrollIntoView({ block: 'nearest' });
+        if (inputEl) inputEl.setAttribute('aria-activedescendant', filtered.length ? 'ov-cmd-item-' + active : '');
+    };
+
+    const onKey = (e) => {
+        if (e.key === 'Escape') { e.preventDefault(); close(); }
+        else if (e.key === 'ArrowDown') { e.preventDefault(); if (flat.length) { active = (active + 1) % flat.length; renderInner(); } }
+        else if (e.key === 'ArrowUp') { e.preventDefault(); if (flat.length) { active = (active - 1 + flat.length) % flat.length; renderInner(); } }
+        else if (e.key === 'Enter') { e.preventDefault(); if (flat[active]) choose(flat[active]); }
+    };
+
+    return h('div', {
+        class: 'ov-cmd-backdrop', role: 'presentation',
+        ref: (el) => {
+            if (!el || el._ovCmd) return; el._ovCmd = true; rootEl = el;
+            el.addEventListener('mousedown', (e) => {
+                const panel = el.querySelector('.ov-cmd-panel');
+                if (panel && !panel.contains(e.target)) close();
+            });
+        },
+    },
+        h('div', { class: 'ov-cmd-panel', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Command palette', onkeydown: onKey },
+            h('input', {
+                type: 'text', class: 'ov-cmd-input', placeholder: 'Type a command…',
+                'aria-label': 'command search',
+                role: 'combobox',
+                'aria-autocomplete': 'list',
+                'aria-expanded': 'true',
+                'aria-controls': 'ov-cmd-list',
+                'aria-activedescendant': '',
+                oninput: (e) => { filterText = e.target.value; active = 0; renderInner(); },
+                ref: (el) => { if (!el || el._ovCmdIn) return; el._ovCmdIn = true; inputEl = el; queueMicrotask(() => el.focus()); },
+            }),
+            h('div', { class: 'ov-cmd-list', id: 'ov-cmd-list', role: 'listbox',
+                ref: (el) => { if (!el) return; listEl = el; queueMicrotask(renderInner); } })
+        )
+    );
+}

package/src/components/overlay-primitives/emoji-picker.js

@@ -0,0 +1,103 @@
+// EmojiPicker — fixed popover near (anchorX, anchorY) with category tabs +
+// grid, plus the emoji dataset it presents.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { trapTab, _anchoredOverlayLifecycle } from './floating.js';
+const h = webjsx.createElement;
+
+// Sanctioned literal-emoji exception: an emoji picker's whole purpose is to
+// present emoji, so the glyph ban does not apply to this data table or the
+// per-emoji <button> labels below. This is intentional product content, not
+// decorative chrome.
+const EMOJI_CATEGORIES = [
+    { id: 'smileys', label: '😀', emoji: [
+        ['😀', 'grinning smile'], ['😁', 'grinning smile happy'], ['😂', 'joy tears laugh'], ['🤣', 'rofl laugh'],
+        ['😊', 'smile blush happy'], ['😍', 'heart eyes love'], ['😘', 'kiss'], ['😎', 'cool sunglasses'],
+        ['🤔', 'thinking'], ['😅', 'sweat smile'], ['😉', 'wink'], ['🙂', 'smile slight'],
+        ['😇', 'angel innocent'], ['🥳', 'party'], ['😴', 'sleep'], ['🤩', 'starstruck'],
+        ['😜', 'wink tongue'], ['😢', 'cry sad'], ['😭', 'sob cry'], ['😡', 'angry mad'],
+        ['😱', 'scream shock'], ['🥺', 'pleading'], ['😤', 'huff'], ['😬', 'grimace'],
+    ] },
+    { id: 'gestures', label: '👍', emoji: [
+        ['👍', 'thumbsup yes good'], ['👎', 'thumbsdown no bad'], ['👌', 'ok'], ['✌️', 'peace'],
+        ['🤞', 'fingers crossed'], ['🙏', 'pray thanks'], ['👏', 'clap'], ['🙌', 'raised hands'],
+        ['💪', 'muscle strong'], ['👀', 'eyes look'], ['🤝', 'handshake'], ['✋', 'hand stop'],
+        ['🤙', 'call'], ['👋', 'wave hi bye'], ['🤟', 'love you'], ['☝️', 'point up'],
+    ] },
+    { id: 'hearts', label: '❤️', emoji: [
+        ['❤️', 'heart love red'], ['🧡', 'heart orange'], ['💛', 'heart yellow'], ['💚', 'heart green'],
+        ['💙', 'heart blue'], ['💜', 'heart purple'], ['🖤', 'heart black'], ['🤍', 'heart white'],
+        ['💔', 'broken heart'], ['💕', 'hearts'], ['💖', 'sparkling heart'], ['💗', 'growing heart'],
+    ] },
+    { id: 'symbols', label: '✅', emoji: [
+        ['🔥', 'fire lit'], ['💯', 'hundred'], ['✅', 'check yes done'], ['❌', 'cross no'],
+        ['⭐', 'star'], ['🎉', 'party tada'], ['🎊', 'confetti'], ['✨', 'sparkles'],
+        ['💡', 'idea lightbulb'], ['⚡', 'zap lightning'], ['💢', 'anger'], ['💀', 'skull dead'],
+        ['🚀', 'rocket launch'], ['🏆', 'trophy win'],
+    ] },
+];
+const ALL_EMOJI = EMOJI_CATEGORIES.flatMap((c) => c.emoji);
+
+// EmojiPicker — fixed popover near (anchorX, anchorY) with category tabs + grid.
+// `query`, when non-empty, filters across all categories by name/keyword
+// substring match (case-insensitive) instead of showing the active tab.
+export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose, query = '' } = {}) {
+    if (!open) return null;
+    let cat = EMOJI_CATEGORIES[0].id;
+    let rootEl = null, gridEl = null;
+    const close = () => onClose && onClose();
+
+    const renderGrid = () => {
+        if (!gridEl) return;
+        const q = (query || '').trim().toLowerCase();
+        const cells = q
+            ? ALL_EMOJI.filter(([, name]) => name.toLowerCase().includes(q))
+            : (EMOJI_CATEGORIES.find(x => x.id === cat) || EMOJI_CATEGORIES[0]).emoji;
+        webjsx.applyDiff(gridEl, h('div', { class: 'ov-emoji-grid-inner' },
+            cells.length ? cells.map(([ch, name]) => h('button', {
+                type: 'button', class: 'ov-emoji-cell', 'aria-label': name || ch, title: name || ch,
+                onclick: () => { if (onSelect) onSelect(ch); },
+            }, ch)) : h('div', { class: 'ov-emoji-empty' }, 'no emoji found')));
+    };
+
+    const tabNavKey = (e) => {
+        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+        const tabs = rootEl ? [...rootEl.querySelectorAll('.ov-emoji-tab')] : [];
+        if (!tabs.length) return;
+        const idx = tabs.indexOf(document.activeElement);
+        if (idx < 0) return;
+        e.preventDefault();
+        const next = e.key === 'ArrowRight' ? (idx + 1) % tabs.length : (idx - 1 + tabs.length) % tabs.length;
+        tabs[next].focus();
+        tabs[next].click();
+    };
+
+    return h('div', {
+        class: 'ov-emoji-root', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Emoji picker',
+        tabindex: '-1',
+        onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); return; } tabNavKey(e); if (rootEl) trapTab(rootEl, e); },
+        ref: (el) => {
+            if (!el) { if (rootEl && rootEl._ovEmojiCleanup) rootEl._ovEmojiCleanup(); return; }
+            if (el._ovEmoji) return; el._ovEmoji = true; rootEl = el;
+            el._ovEmojiCleanup = _anchoredOverlayLifecycle(el, { anchorX, anchorY, fallbackW: 260, fallbackH: 240, close });
+        },
+    },
+        (query || '').trim() ? null : h('div', { class: 'ov-emoji-tabs', role: 'tablist' },
+            ...EMOJI_CATEGORIES.map((c) => h('button', {
+                type: 'button', class: 'ov-emoji-tab', role: 'tab',
+                'aria-selected': c.id === cat ? 'true' : 'false',
+                'aria-controls': 'ov-emoji-panel',
+                onclick: (e) => {
+                    cat = c.id;
+                    const tabs = rootEl.querySelectorAll('.ov-emoji-tab');
+                    tabs.forEach(t => t.setAttribute('aria-selected', 'false'));
+                    e.currentTarget.setAttribute('aria-selected', 'true');
+                    renderGrid();
+                },
+            }, c.label))),
+        h('div', {
+            class: 'ov-emoji-grid', id: 'ov-emoji-panel', role: 'tabpanel',
+            'aria-label': EMOJI_CATEGORIES.find(c => c.id === cat)?.label || EMOJI_CATEGORIES[0].label,
+            ref: (el) => { if (!el) return; gridEl = el; queueMicrotask(renderGrid); } })
+    );
+}

package/src/components/overlay-primitives/floating.js

@@ -0,0 +1,146 @@
+// Overlay positioning core — the shared geometry/lifecycle every overlay in
+// this group builds on: useFloating (anchored placement with auto-flip +
+// viewport clamp), useLongPress, withBusy, trapTab, plus the internal
+// _clampToViewport / _anchoredOverlayLifecycle helpers used by the fixed
+// anchored popovers (EmojiPicker, SettingsPopover). No inline styles except
+// runtime left/top. CSS classes scoped to .ds-247420 (see
+// editor-primitives.css).
+
+export const FOCUSABLE_SEL = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+export const kids = (c) => c == null ? [] : (Array.isArray(c) ? c : [c]);
+
+// Shared viewport-clamp margins (px). Previously scattered as bare 8/4/6
+// literals across useFloating + _clampToViewport. CLAMP_MARGIN is the gap a
+// fixed box keeps from the viewport edge; FLOAT_EDGE is the useFloating edge
+// gap; FLOAT_OFFSET_* are anchor-to-content offsets per overlay kind.
+const CLAMP_MARGIN = 8;
+const FLOAT_EDGE = 4;
+export const FLOAT_OFFSET_TOOLTIP = 6;
+export const FLOAT_OFFSET_POPOVER = 6;
+export const FLOAT_OFFSET_DROPDOWN = 4;
+
+// useFloating — compute left/top + auto-flip; re-runs on resize/scroll.
+export function useFloating(anchorEl, contentEl, { placement = 'bottom-start', offset = 8 } = {}) {
+    if (!anchorEl || !contentEl) return { update() {}, dispose() {}, finalPlacement: placement };
+    let finalPlacement = placement;
+    const compute = () => {
+        const a = anchorEl.getBoundingClientRect(), c = contentEl.getBoundingClientRect();
+        const vw = window.innerWidth, vh = window.innerHeight;
+        const [side, align = 'start'] = placement.split('-');
+        let s = side;
+        if (s === 'bottom' && a.bottom + offset + c.height > vh && a.top - offset - c.height >= 0) s = 'top';
+        else if (s === 'top' && a.top - offset - c.height < 0 && a.bottom + offset + c.height <= vh) s = 'bottom';
+        else if (s === 'right' && a.right + offset + c.width > vw && a.left - offset - c.width >= 0) s = 'left';
+        else if (s === 'left' && a.left - offset - c.width < 0 && a.right + offset + c.width <= vw) s = 'right';
+        let x = 0, y = 0;
+        if (s === 'bottom' || s === 'top') {
+            y = s === 'bottom' ? a.bottom + offset : a.top - offset - c.height;
+            x = align === 'start' ? a.left : align === 'end' ? a.right - c.width : a.left + (a.width - c.width) / 2;
+        } else {
+            x = s === 'right' ? a.right + offset : a.left - offset - c.width;
+            y = align === 'start' ? a.top : align === 'end' ? a.bottom - c.height : a.top + (a.height - c.height) / 2;
+        }
+        x = Math.max(FLOAT_EDGE, Math.min(vw - c.width - FLOAT_EDGE, x));
+        y = Math.max(FLOAT_EDGE, Math.min(vh - c.height - FLOAT_EDGE, y));
+        contentEl.style.left = x + 'px';
+        contentEl.style.top = y + 'px';
+        finalPlacement = s + '-' + align;
+    };
+    compute();
+    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); if (ro) ro.disconnect(); },
+        get finalPlacement() { return finalPlacement; }
+    };
+}
+
+// useLongPress — fire callback after ms held without movement.
+export function useLongPress(targetEl, callback, { ms = 500 } = {}) {
+    if (!targetEl) return () => {};
+    let timer = null, sx = 0, sy = 0;
+    const cancel = () => { if (timer) { clearTimeout(timer); timer = null; } };
+    const onDown = (e) => { sx = e.clientX || 0; sy = e.clientY || 0; cancel(); timer = setTimeout(() => { timer = null; callback(e); }, ms); };
+    const onMove = (e) => { if (!timer) return; const dx = (e.clientX || 0) - sx, dy = (e.clientY || 0) - sy; if (dx * dx + dy * dy > 64) cancel(); };
+    const evts = [['pointerdown', onDown], ['pointermove', onMove], ['pointerup', cancel], ['pointerleave', cancel], ['pointercancel', cancel]];
+    evts.forEach(([k, fn]) => targetEl.addEventListener(k, fn));
+    return () => { cancel(); evts.forEach(([k, fn]) => targetEl.removeEventListener(k, fn)); };
+}
+
+// withBusy — run an async action with its triggering button disabled +
+// busy-labelled, so a double-click/double-tap can't fire it twice and the
+// user sees progress. Restores the button (label, disabled state,
+// aria-busy) when the action settles, including on throw. Re-entry while
+// already busy is dropped silently rather than queued. Mirrors docstudio's
+// dom-busy.js withButtonBusy — agentgui's app.js has no equivalent anywhere,
+// so every async-click handler (share/delete/retry/approve-deny) is
+// currently unguarded against rapid repeat clicks firing the same mutating
+// request twice.
+export async function withBusy(btn, fn, busyLabel = '...') {
+    if (!btn) return fn();
+    if (btn.disabled) return;                 // already in flight -> drop the repeat
+    const prevHtml = btn.innerHTML;
+    const prevDisabled = btn.disabled;
+    btn.disabled = true;
+    btn.setAttribute('aria-busy', 'true');
+    if (busyLabel != null) btn.textContent = busyLabel;
+    try {
+        return await fn();
+    } finally {
+        btn.disabled = prevDisabled;
+        btn.removeAttribute('aria-busy');
+        btn.innerHTML = prevHtml;
+    }
+}
+
+// Clamp a fixed-position box to the viewport given desired top-left coords.
+function _clampToViewport(x, y, w, h, margin = CLAMP_MARGIN) {
+    const vw = (typeof window !== 'undefined' ? window.innerWidth : 1024);
+    const vh = (typeof window !== 'undefined' ? window.innerHeight : 768);
+    return {
+        left: Math.max(margin, Math.min(vw - w - margin, x)),
+        top: Math.max(margin, Math.min(vh - h - margin, y)),
+    };
+}
+
+// Tab focus trap for a dialog root — keeps Tab/Shift+Tab cycling inside `el`.
+// Call from an onkeydown handler; returns true if it handled the event.
+export function trapTab(el, e) {
+    if (e.key !== 'Tab') return false;
+    const nodes = el.querySelectorAll(FOCUSABLE_SEL);
+    if (!nodes.length) { e.preventDefault(); return true; }
+    const first = nodes[0], last = nodes[nodes.length - 1], a = document.activeElement;
+    if (e.shiftKey && a === first) { e.preventDefault(); last.focus(); return true; }
+    if (!e.shiftKey && a === last) { e.preventDefault(); first.focus(); return true; }
+    return false;
+}
+
+// Shared lifecycle for fixed anchor-positioned popovers (EmojiPicker,
+// SettingsPopover): on mount, place+clamp near (anchorX, anchorY), focus the
+// root, and wire an outside-mousedown close. Returns a cleanup fn the ref(null)
+// branch must call. Both consumers deduped through this so the
+// queueMicrotask/place/clamp/outside-close dance is authored once.
+export function _anchoredOverlayLifecycle(el, { anchorX, anchorY, fallbackW, fallbackH, close }) {
+    const place = () => {
+        const r = el.getBoundingClientRect();
+        const { left, top } = _clampToViewport(anchorX, anchorY, r.width || fallbackW, r.height || fallbackH);
+        el.style.left = left + 'px'; el.style.top = top + 'px';
+    };
+    // setTimeout(0), not queueMicrotask: the triggering click's own default
+    // focus-on-click (moving focus to the clicked <button>) can run AFTER a
+    // same-tick microtask, so a queueMicrotask focus() call here was losing
+    // the race and leaving focus on the trigger button instead of the
+    // dialog -- breaking Escape-to-close (keydown only bubbles from the
+    // focused element) for any keyboard user. A macrotask reliably runs
+    // after the click's focus settles.
+    setTimeout(() => { place(); el.focus(); }, 0);
+    const onDown = (e) => { if (!el.contains(e.target)) close(); };
+    queueMicrotask(() => document.addEventListener('mousedown', onDown, true));
+    return () => document.removeEventListener('mousedown', onDown, true);
+}

package/src/components/overlay-primitives/full-screen.js

@@ -0,0 +1,45 @@
+// Full-screen overlays — BootOverlay (brand/progress splash with an error
+// state) and VideoLightbox (fullscreen video player with backdrop dismiss).
+// Both cover the whole viewport rather than anchoring to a trigger.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from '../shell.js';
+const h = webjsx.createElement;
+
+// BootOverlay — full-screen brand/progress overlay with error state.
+export function BootOverlay({ progress = 0, phase = '', errored = false, visible = false } = {}) {
+    if (!visible) return null;
+    let pct = Number(progress) || 0;
+    if (pct <= 1) pct = pct * 100;
+    pct = Math.max(0, Math.min(100, pct));
+    return h('div', { class: 'ov-boot' + (errored ? ' is-error' : ''), role: errored ? 'alert' : 'status', 'aria-live': 'polite' },
+        h('div', { class: 'ov-boot-inner' },
+            errored
+                ? h('div', { class: 'ov-boot-mark ov-boot-mark-error', 'aria-hidden': 'true' }, Icon('warn'))
+                : h('div', { class: 'ov-boot-spinner', 'aria-hidden': 'true' }),
+            !errored ? h('div', { class: 'ov-boot-bar', role: 'progressbar',
+                'aria-valuenow': String(Math.round(pct)), 'aria-valuemin': '0', 'aria-valuemax': '100' },
+                h('div', { class: 'ov-boot-bar-fill', style: 'width:' + pct + '%' })) : null,
+            h('div', { class: 'ov-boot-phase' }, String(phase || (errored ? 'Error' : 'Loading…')))
+        )
+    );
+}
+
+// VideoLightbox — fullscreen video player overlay with backdrop dismiss.
+export function VideoLightbox({ src, label = '', open = false, onClose } = {}) {
+    if (!open || !src) return null;
+    const close = () => onClose && onClose();
+    return h('div', {
+        class: 'ov-lightbox-backdrop', role: 'dialog', 'aria-modal': 'true', 'aria-label': label || 'Video',
+        tabindex: '-1',
+        onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); } },
+        ref: (el) => { if (el && !el._ovLb) { el._ovLb = true; setTimeout(() => el.focus(), 0); } },
+        onmousedown: (e) => { if (e.target === e.currentTarget) close(); },
+    },
+        h('button', { type: 'button', class: 'ov-lightbox-x', 'aria-label': 'close', onclick: close }, Icon('x')),
+        h('div', { class: 'ov-lightbox-stage' },
+            h('video', { class: 'ov-lightbox-video', src, controls: true, autoplay: true, playsinline: true }),
+            label ? h('div', { class: 'ov-lightbox-label' }, label) : null
+        )
+    );
+}