anentrypoint-design 0.0.381 → 0.0.382

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

@@ -0,0 +1,131 @@
+// Trigger-anchored menus — Dropdown (role=menuitem action list),
+// PermissionMenu (role=menuitemcheckbox category toggles) and MenuButton
+// (role=menuitemradio single-select with a check mark). All three share the
+// open/close/outside-click/roving-nav/typeahead machine in ./roving-menu.js
+// and differ only in the DOM/roles they build for their own menu element.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from '../shell.js';
+import { useRovingMenu } from './roving-menu.js';
+const h = webjsx.createElement;
+
+// Dropdown — button trigger + portaled menu.
+export function Dropdown({ trigger, items = [], onSelect, placement = 'bottom-start', ariaLabel } = {}) {
+    const menu = useRovingMenu({ itemSelector: '[role="menuitem"]:not([aria-disabled="true"])', items, typeahead: true, placement });
+    const select = (it) => { if (it.disabled || it.separator) return; if (onSelect) onSelect(it.id, it); menu.close(); };
+    const buildMenuEl = () => {
+        const el = document.createElement('div');
+        el.className = 'ds-popover ds-dropdown-menu';
+        el.setAttribute('role', 'menu');
+        if (ariaLabel) el.setAttribute('aria-label', ariaLabel);
+        const tree = h('div', { class: 'ds-dropdown-list' },
+            ...items.map((it, i) => it.separator
+                ? h('div', { key: 'sep' + i, class: 'ds-dropdown-separator', role: 'separator' })
+                : h('button', {
+                    key: it.id || i, type: 'button', role: 'menuitem',
+                    class: 'ds-dropdown-item' + (it.danger ? ' is-danger' : ''),
+                    'aria-disabled': it.disabled ? 'true' : 'false',
+                    tabindex: '-1', onclick: () => select(it),
+                },
+                    it.glyph != null ? h('span', { class: 'ds-dropdown-glyph', 'aria-hidden': 'true' }, it.glyph) : null,
+                    h('span', { class: 'ds-dropdown-label' }, it.label)
+                )));
+        webjsx.applyDiff(el, tree);
+        return el;
+    };
+    const onTrigClick = () => menu.onTrigClick(buildMenuEl);
+    const onTrigKey = (e) => menu.onTrigKey(e, buildMenuEl);
+    const refFn = menu.refFn('_dsDropdown');
+    const child = (typeof trigger === 'function') ? trigger() : trigger;
+    const wireRef = (el) => { refFn(el); if (el) { el.addEventListener('click', onTrigClick); el.addEventListener('keydown', onTrigKey); } };
+    return (child && child.type)
+        ? webjsx.createElement(child.type, { ...(child.props || {}), ref: wireRef }, ...(child.children || []))
+        : h('button', { type: 'button', class: 'ds-dropdown-trigger', ref: wireRef }, child || 'Menu');
+}
+
+// PermissionMenu — a role=menu of role=menuitemcheckbox rows, one per
+// category, with roving tabindex + Arrow-up/down/Home/End navigation and
+// Escape-closes-and-restores-focus, plus "Approve all"/"Revoke all" actions.
+// Mirrors Dropdown's own open/close + outside-click wiring (a portaled menu
+// element, a document-level mousedown listener, focus restored to the
+// trigger on close) rather than reimplementing that plumbing.
+export function PermissionMenu({ trigger, categories = [], approved = [], onToggle, onToggleAll, placement = 'bottom-start', ariaLabel = 'Permissions' } = {}) {
+    const isApproved = (id) => approved.indexOf(id) !== -1;
+    const menu = useRovingMenu({ itemSelector: '[role="menuitemcheckbox"]', items: categories, getLabel: (cat) => cat.label || cat.id, typeahead: true, placement });
+    const toggle = (cat) => { if (onToggle) onToggle(cat.id, !isApproved(cat.id)); };
+    const buildMenuEl = () => {
+        const el = document.createElement('div');
+        el.className = 'ds-popover ov-perm-menu';
+        el.setAttribute('role', 'menu');
+        el.setAttribute('aria-label', ariaLabel);
+        const rows = categories.map((cat, i) => h('button', {
+            key: cat.id || i, type: 'button', role: 'menuitemcheckbox',
+            'aria-checked': isApproved(cat.id) ? 'true' : 'false',
+            class: 'ov-perm-item' + (isApproved(cat.id) ? ' is-approved' : ''),
+            tabindex: '-1',
+            onclick: () => toggle(cat),
+        }, h('span', { class: 'ov-perm-label' }, cat.label || cat.id)));
+        const actionsRow = h('div', { class: 'ov-perm-actions' },
+            h('button', { type: 'button', class: 'ov-perm-action', onclick: () => onToggleAll && onToggleAll(true) }, 'Approve all'),
+            h('button', { type: 'button', class: 'ov-perm-action', onclick: () => onToggleAll && onToggleAll(false) }, 'Revoke all'));
+        webjsx.applyDiff(el, h('div', { class: 'ov-perm-list' }, ...rows, actionsRow));
+        return el;
+    };
+    const onTrigClick = () => menu.onTrigClick(buildMenuEl);
+    const onTrigKey = (e) => menu.onTrigKey(e, buildMenuEl);
+    const refFn = menu.refFn('_dsPermMenu');
+    const child = (typeof trigger === 'function') ? trigger() : trigger;
+    const wireRef = (el) => { refFn(el); if (el) { el.addEventListener('click', onTrigClick); el.addEventListener('keydown', onTrigKey); } };
+    return (child && child.type)
+        ? webjsx.createElement(child.type, { ...(child.props || {}), ref: wireRef }, ...(child.children || []))
+        : h('button', { type: 'button', class: 'ov-perm-trigger', ref: wireRef }, child || 'Permissions');
+}
+
+// MenuButton — icon-trigger select menu: one option carries a checkmark
+// (the active selection), roving keyboard nav mirrors Dropdown's own
+// open/close/outside-click/typeahead wiring, plus a stale/unavailable
+// per-item state that renders as a muted "unavailable — retry" row instead
+// of a normal selectable item (ported from docstudio's model-picker menu,
+// which shows a retry affordance when its option list fails to load).
+// Zero-option and single-option lists degrade gracefully: an empty list
+// renders a static "No options available" row (no crash, no keyboard trap,
+// nothing focusable); roving nav on a single-option list simply refocuses
+// the same item on every Arrow press (wrap-to-self), never throws.
+export function MenuButton({ trigger, items = [], selected, onSelect, onRetry, placement = 'bottom-start', ariaLabel = 'Menu', emptyText = 'No options available' } = {}) {
+    const menu = useRovingMenu({ itemSelector: '[role="menuitemradio"]:not([aria-disabled="true"])', items, typeahead: true, placement });
+    const select = (it) => { if (it.disabled || it.unavailable) return; if (onSelect) onSelect(it.id, it); menu.close(); };
+    const buildMenuEl = () => {
+        const el = document.createElement('div');
+        el.className = 'ds-popover ov-menubutton-menu';
+        el.setAttribute('role', 'menu');
+        el.setAttribute('aria-label', ariaLabel);
+        const tree = items.length
+            ? h('div', { class: 'ov-menubutton-list' },
+                ...items.map((it, i) => it.unavailable
+                    ? h('div', { key: it.id || i, class: 'ov-menubutton-item is-unavailable' },
+                        h('span', { class: 'ov-menubutton-label' }, it.label || 'Unavailable'),
+                        h('button', { type: 'button', class: 'ov-menubutton-retry', onclick: () => onRetry && onRetry(it.id, it) }, 'Retry')
+                    )
+                    : h('button', {
+                        key: it.id || i, type: 'button', role: 'menuitemradio',
+                        'aria-checked': it.id === selected ? 'true' : 'false',
+                        class: 'ov-menubutton-item' + (it.disabled ? '' : ''),
+                        'aria-disabled': it.disabled ? 'true' : 'false',
+                        tabindex: '-1', onclick: () => select(it),
+                    },
+                        h('span', { class: 'ov-menubutton-check', 'aria-hidden': 'true' }, it.id === selected ? Icon('check', { size: 14 }) : ''),
+                        h('span', { class: 'ov-menubutton-label' }, it.label)
+                    )))
+            : h('div', { class: 'ov-menubutton-empty' }, emptyText);
+        webjsx.applyDiff(el, tree);
+        return el;
+    };
+    const onTrigClick = () => menu.onTrigClick(buildMenuEl);
+    const onTrigKey = (e) => menu.onTrigKey(e, buildMenuEl);
+    const refFn = menu.refFn('_ovMenuButton');
+    const child = (typeof trigger === 'function') ? trigger() : trigger;
+    const wireRef = (el) => { refFn(el); if (el) { el.addEventListener('click', onTrigClick); el.addEventListener('keydown', onTrigKey); } };
+    return (child && child.type)
+        ? webjsx.createElement(child.type, { ...(child.props || {}), ref: wireRef }, ...(child.children || []))
+        : h('button', { type: 'button', class: 'ov-menubutton-trigger', ref: wireRef }, child || 'Select');
+}

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

@@ -0,0 +1,51 @@
+// Popover — controlled, portaled to <body>. Unlike the other overlays in
+// this group it renders no VElement of its own: it imperatively creates,
+// positions and tears down a body-level element keyed off the anchor, and
+// always returns null.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { useFloating, FLOAT_OFFSET_POPOVER, FOCUSABLE_SEL, kids } from './floating.js';
+const h = webjsx.createElement;
+
+const _popovers = new WeakMap();
+
+export function Popover({ open, anchorEl, onClose, placement = 'bottom-start', children, ariaLabel } = {}) {
+    if (typeof document === 'undefined') return null;
+    const existing = anchorEl ? _popovers.get(anchorEl) : null;
+    if (!open) {
+        if (existing) { existing.dispose(); _popovers.delete(anchorEl); if (anchorEl && anchorEl.focus) anchorEl.focus(); }
+        return null;
+    }
+    if (existing || !anchorEl) return null;
+    const el = document.createElement('div');
+    el.className = 'ds-popover';
+    el.setAttribute('role', 'dialog');
+    el.setAttribute('aria-modal', 'true');
+    if (ariaLabel) el.setAttribute('aria-label', ariaLabel);
+    el.tabIndex = -1;
+    document.body.appendChild(el);
+    webjsx.applyDiff(el, h('div', { class: 'ds-popover-inner' }, ...kids(children)));
+    const floating = useFloating(anchorEl, el, { placement, offset: FLOAT_OFFSET_POPOVER });
+    const close = () => onClose && onClose();
+    const onDown = (e) => { if (el.contains(e.target) || anchorEl.contains(e.target)) return; close(); };
+    const onKey = (e) => {
+        if (e.key === 'Escape') { e.preventDefault(); close(); return; }
+        if (e.key !== 'Tab') return;
+        const nodes = el.querySelectorAll(FOCUSABLE_SEL); if (!nodes.length) { e.preventDefault(); return; }
+        const first = nodes[0], last = nodes[nodes.length - 1], a = document.activeElement;
+        if (e.shiftKey && a === first) { e.preventDefault(); last.focus(); }
+        else if (!e.shiftKey && a === last) { e.preventDefault(); first.focus(); }
+    };
+    el.addEventListener('keydown', onKey);
+    document.addEventListener('mousedown', onDown, true);
+    // setTimeout(0), not queueMicrotask — see _anchoredOverlayLifecycle's
+    // comment: the opening click's own default focus-on-click can otherwise
+    // win the race and leave focus outside el, breaking Escape/Tab-trap.
+    setTimeout(() => { const f = el.querySelector(FOCUSABLE_SEL); (f || el).focus(); }, 0);
+    _popovers.set(anchorEl, { dispose() {
+        document.removeEventListener('mousedown', onDown, true);
+        floating.dispose();
+        if (el.parentNode) el.parentNode.removeChild(el);
+    }});
+    return null;
+}

package/src/components/overlay-primitives/roving-menu.js

@@ -0,0 +1,73 @@
+// useRovingMenu — the shared open/close/outside-click/roving-nav/typeahead
+// state machine behind Dropdown, PermissionMenu, and MenuButton (all three in
+// ./menus.js). All three previously reimplemented an identical ~70-line
+// skeleton (byte-identical close() teardown, near-identical onMenuKey); this
+// factors it into one place so a fix/feature (e.g. typeahead) lands for every
+// consumer instead of drifting per-copy. `itemSelector` picks the live
+// focusable items inside the rendered menu (each consumer uses a different
+// role: menuitem / menuitemcheckbox / menuitemradio); `getLabel(item)` +
+// `items` enable typeahead when `typeahead` is true (Dropdown/MenuButton have
+// it, PermissionMenu's categories aren't typically typeahead-searched so it
+// defaults off but can opt in). Returns { refFn, onTrigClick, onTrigKey,
+// openMenu, close, focusItem, isOpen } — the caller still owns rendering the
+// menu's DOM/CSS (role/class per consumer stays distinct) and wires
+// `menuEl.addEventListener('keydown', onMenuKey)` itself via the returned
+// `onMenuKey`, since only the caller knows when its menuEl exists.
+
+import { useFloating, FLOAT_OFFSET_DROPDOWN } from './floating.js';
+
+export function useRovingMenu({ itemSelector, items = [], getLabel = (it) => it.label, typeahead = false, placement = 'bottom-start', onOpenChange } = {}) {
+    let triggerEl = null, open = false, menuEl = null, floating = null, typeBuf = '', typeTimer = null;
+    const liveItems = () => menuEl ? [...menuEl.querySelectorAll(itemSelector)] : [];
+    const focusItem = (idx) => { const b = liveItems(); if (!b.length) return; b[((idx % b.length) + b.length) % b.length].focus(); };
+    const onDown = (e) => { if (menuEl && menuEl.contains(e.target)) return; if (triggerEl && triggerEl.contains(e.target)) return; close(false); };
+    const close = (restore = true) => {
+        if (!open) return; open = false;
+        if (floating) { floating.dispose(); floating = null; }
+        if (menuEl && menuEl.parentNode) menuEl.parentNode.removeChild(menuEl);
+        menuEl = null;
+        document.removeEventListener('mousedown', onDown, true);
+        if (triggerEl) triggerEl.setAttribute('aria-expanded', 'false');
+        if (restore && triggerEl) triggerEl.focus();
+        if (onOpenChange) onOpenChange(false);
+    };
+    const onMenuKey = (e) => {
+        const b = liveItems(), idx = b.indexOf(document.activeElement);
+        if (e.key === 'Escape') { e.preventDefault(); close(); }
+        else if (e.key === 'ArrowDown') { e.preventDefault(); focusItem(idx + 1); }
+        else if (e.key === 'ArrowUp') { e.preventDefault(); focusItem(idx - 1); }
+        else if (e.key === 'Home') { e.preventDefault(); focusItem(0); }
+        else if (e.key === 'End') { e.preventDefault(); focusItem(b.length - 1); }
+        else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (idx >= 0) b[idx].click(); }
+        else if (typeahead && e.key.length === 1 && /\S/.test(e.key)) {
+            typeBuf += e.key.toLowerCase();
+            if (typeTimer) clearTimeout(typeTimer);
+            typeTimer = setTimeout(() => { typeBuf = ''; }, 600);
+            const selectable = items.filter(it => !it.separator && !it.disabled && !it.unavailable);
+            const m = selectable.findIndex(it => (getLabel(it) || '').toLowerCase().startsWith(typeBuf));
+            if (m >= 0) focusItem(m);
+        }
+    };
+    const openMenu = (buildMenuEl, focusFirst = true) => {
+        if (open || !triggerEl) return;
+        open = true;
+        menuEl = buildMenuEl();
+        menuEl.tabIndex = -1;
+        document.body.appendChild(menuEl);
+        menuEl.addEventListener('keydown', onMenuKey);
+        floating = useFloating(triggerEl, menuEl, { placement, offset: FLOAT_OFFSET_DROPDOWN });
+        document.addEventListener('mousedown', onDown, true);
+        triggerEl.setAttribute('aria-expanded', 'true');
+        if (focusFirst && liveItems().length) queueMicrotask(() => focusItem(0));
+        if (onOpenChange) onOpenChange(true);
+    };
+    const onTrigClick = (buildMenuEl) => { if (open) close(false); else openMenu(buildMenuEl, true); };
+    const onTrigKey = (e, buildMenuEl) => { if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (!open) openMenu(buildMenuEl, true); else focusItem(0); } };
+    const refFn = (dsFlag) => (el) => {
+        if (!el || el[dsFlag]) return;
+        el[dsFlag] = true; triggerEl = el;
+        el.setAttribute('aria-haspopup', 'menu');
+        el.setAttribute('aria-expanded', 'false');
+    };
+    return { refFn, onTrigClick, onTrigKey, openMenu, close, focusItem, isOpen: () => open };
+}

package/src/components/overlay-primitives/settings-popover.js

@@ -0,0 +1,85 @@
+// SettingsPopover — fixed popover with generic section/row control rendering.
+// Rows are data-driven: `kind` picks the control (select/toggle/range/button,
+// or a non-interactive value row), and every interactive control gets a
+// stable id so the visible row label is its accessible name.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { trapTab, _anchoredOverlayLifecycle } from './floating.js';
+const h = webjsx.createElement;
+
+export function SettingsPopover({ title = 'Settings', open, anchorX = 0, anchorY = 0, sections = [], onClose } = {}) {
+    if (!open) return null;
+    let rootEl = null;
+    const close = () => onClose && onClose();
+    const secs = Array.isArray(sections) ? sections : [];
+
+    const renderRow = (row, i) => {
+        const label = row.label != null ? row.label : (row.title != null ? row.title : '');
+        const kind = row.kind;
+        // Give every interactive control a stable id and point the row label's
+        // `for` at it, so the visible label is the control's accessible name.
+        const ctrlId = 'ov-set-' + i + '-' + kind;
+        const labelNode = h('label', { class: 'ov-set-row-label', for: ctrlId }, String(label));
+        let control = null;
+        if (kind === 'select') {
+            const opts = Array.isArray(row.options) ? row.options : [];
+            // Controlled via the `value` prop only — per-option `selected` is
+            // dropped so the two don't fight (value wins).
+            control = h('select', {
+                id: ctrlId,
+                class: 'ov-set-control', value: row.value != null ? String(row.value) : undefined,
+                onchange: (e) => row.onChange && row.onChange(e.target.value),
+            }, ...opts.map(o => {
+                const v = (o && typeof o === 'object') ? o.value : o;
+                const l = (o && typeof o === 'object') ? (o.label != null ? o.label : o.value) : o;
+                return h('option', { value: String(v) }, String(l));
+            }));
+        } else if (kind === 'toggle') {
+            control = h('input', {
+                id: ctrlId,
+                type: 'checkbox', class: 'ov-set-toggle',
+                checked: row.value ? 'checked' : undefined,
+                onchange: (e) => row.onChange && row.onChange(e.target.checked),
+            });
+        } else if (kind === 'range') {
+            control = h('input', {
+                id: ctrlId,
+                type: 'range', class: 'ov-set-control',
+                min: String(row.min != null ? row.min : 0),
+                max: String(row.max != null ? row.max : 100),
+                step: String(row.step != null ? row.step : 1),
+                value: String(row.value != null ? row.value : 0),
+                oninput: (e) => row.onChange && row.onChange(Number(e.target.value)),
+            });
+        } else if (kind === 'button') {
+            control = h('button', { type: 'button', class: 'ov-set-btn',
+                onclick: () => row.onClick && row.onClick() }, String(label || 'Action'));
+            return h('div', { class: 'ov-set-row', key: i }, control);
+        } else {
+            control = h('span', { class: 'ov-set-row-value' }, String(row.value != null ? row.value : ''));
+            // Non-interactive value row: a plain span label (no `for` target).
+            return h('div', { class: 'ov-set-row', key: i }, h('span', { class: 'ov-set-row-label' }, String(label)), control);
+        }
+        return h('div', { class: 'ov-set-row', key: i }, labelNode, control);
+    };
+
+    return h('div', {
+        class: 'ov-set-root', role: 'dialog', 'aria-modal': 'true', 'aria-label': String(title), tabindex: '-1',
+        onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); return; } if (rootEl) trapTab(rootEl, e); },
+        ref: (el) => {
+            if (!el) { if (rootEl && rootEl._ovSetCleanup) rootEl._ovSetCleanup(); return; }
+            if (el._ovSet) return; el._ovSet = true; rootEl = el;
+            el._ovSetCleanup = _anchoredOverlayLifecycle(el, { anchorX, anchorY, fallbackW: 280, fallbackH: 200, close });
+        },
+    },
+        h('div', { class: 'ov-set-head' }, String(title)),
+        h('div', { class: 'ov-set-body' },
+            ...secs.map((sec, si) => {
+                const slabel = sec.label != null ? sec.label : (sec.title != null ? sec.title : '');
+                const rows = Array.isArray(sec.rows) ? sec.rows : (Array.isArray(sec.items) ? sec.items : []);
+                return h('div', { class: 'ov-set-section', key: si },
+                    slabel ? h('div', { class: 'ov-set-section-head' }, String(slabel)) : null,
+                    ...rows.map((r, ri) => renderRow(r, ri)));
+            }))
+    );
+}

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

@@ -0,0 +1,55 @@
+// Tooltip — single shared bubble appended to <body>. One module-scope
+// element and one module-scope scroll listener serve every trigger on the
+// page (per-trigger bubbles/listeners leaked one per element).
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { useFloating, useLongPress, FLOAT_OFFSET_TOOLTIP, kids } from './floating.js';
+
+let _tipEl = null, _tipFloat = null, _tipTimer = null, _tipId = 0;
+function _hideTip() {
+    if (_tipTimer) { clearTimeout(_tipTimer); _tipTimer = null; }
+    if (_tipFloat) { _tipFloat.dispose(); _tipFloat = null; }
+    if (_tipEl) { _tipEl.hidden = true; _tipEl.className = 'ds-tooltip'; }
+}
+// One module-scope scroll listener hides the shared bubble on any scroll —
+// registered once, never per-trigger (per-trigger leaked a listener per element).
+if (typeof window !== 'undefined' && !window.__dsTipScrollBound) {
+    window.__dsTipScrollBound = true;
+    window.addEventListener('scroll', _hideTip, true);
+}
+function _showTip(trigger, label, placement, kind) {
+    if (typeof document === 'undefined') return;
+    if (!_tipEl || !document.body.contains(_tipEl)) {
+        _tipEl = document.createElement('div');
+        _tipEl.className = 'ds-tooltip';
+        _tipEl.setAttribute('role', 'tooltip');
+        document.body.appendChild(_tipEl);
+    }
+    _tipEl.textContent = label;
+    _tipEl.className = 'ds-tooltip kind-' + (kind || 'default');
+    _tipEl.hidden = false;
+    _tipEl.id = 'ds-tip-' + (++_tipId);
+    trigger.setAttribute('aria-describedby', _tipEl.id);
+    if (_tipFloat) _tipFloat.dispose();
+    _tipFloat = useFloating(trigger, _tipEl, { placement, offset: FLOAT_OFFSET_TOOLTIP });
+}
+
+export function Tooltip({ children, label, placement = 'top', delay = 350, kind = 'default' } = {}) {
+    const child = kids(children)[0];
+    if (!child || !label) return child || null;
+    const refFn = (el) => {
+        if (!el || el._dsTip) return;
+        el._dsTip = true;
+        const schedule = () => { if (_tipTimer) clearTimeout(_tipTimer); _tipTimer = setTimeout(() => _showTip(el, label, placement, kind), delay); };
+        const show = () => _showTip(el, label, placement, kind);
+        el.addEventListener('pointerenter', schedule);
+        el.addEventListener('pointerleave', _hideTip);
+        el.addEventListener('focus', show);
+        el.addEventListener('blur', _hideTip);
+        el.addEventListener('keydown', (e) => { if (e.key === 'Escape') _hideTip(); });
+        useLongPress(el, show, { ms: 500 });
+    };
+    const prevRef = child.props && child.props.ref;
+    const wrap = (el) => { refFn(el); if (typeof prevRef === 'function') prevRef(el); };
+    return webjsx.createElement(child.type, { ...(child.props || {}), ref: wrap }, ...(child.children || []));
+}