anentrypoint-design 0.0.130 → 0.0.134

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.130",
+  "version": "0.0.134",
   "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",
@@ -42,6 +42,7 @@
     },
     "./src/page-html.js": "./src/page-html.js",
     "./web-components/ds-chat.js": "./src/web-components/ds-chat.js",
+    "./web-components/freddie-chat.js": "./src/web-components/freddie-chat.js",
     "./package.json": "./package.json"
   },
   "files": [

package/src/components/form-primitives.js

@@ -0,0 +1,168 @@
+// Form primitives — Checkbox, Radio, RadioGroup, Toggle, Field,
+// useFormValidation. Native inputs styled via CSS classes. No inline
+// styles. All visuals route through form-primitives rules appended to
+// editor-primitives.css. Theme-token driven; respects prefers-reduced-motion.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+let _uid = 0;
+function uid(prefix) { _uid += 1; return prefix + '-' + _uid; }
+
+function setIndeterminate(node, flag) {
+    if (node && typeof flag === 'boolean') node.indeterminate = flag;
+}
+
+export function Checkbox({ checked, indeterminate, disabled, label, hint, onChange, ariaLabel, key, name, id } = {}) {
+    const inputId = id || uid('ds-check');
+    const hintId = hint ? inputId + '-hint' : null;
+    const input = h('input', {
+        key: 'i', type: 'checkbox', id: inputId, name,
+        class: 'ds-check',
+        checked: checked ? true : null,
+        disabled: disabled ? true : null,
+        'aria-label': ariaLabel || null,
+        'aria-describedby': hintId,
+        ref: (node) => setIndeterminate(node, indeterminate),
+        onchange: onChange ? (e) => onChange(e.target.checked, e) : null
+    });
+    return h('label', { key, class: 'ds-check-row', for: inputId },
+        input,
+        label != null ? h('span', { key: 'l', class: 'ds-check-label' }, label) : null,
+        hint != null ? h('span', { key: 'h', id: hintId, class: 'ds-field-hint' }, hint) : null
+    );
+}
+
+export function Radio({ name, value, checked, disabled, label, hint, onChange, ariaLabel, key, id } = {}) {
+    const inputId = id || uid('ds-radio');
+    const hintId = hint ? inputId + '-hint' : null;
+    const input = h('input', {
+        key: 'i', type: 'radio', id: inputId, name, value,
+        class: 'ds-radio',
+        checked: checked ? true : null,
+        disabled: disabled ? true : null,
+        'aria-label': ariaLabel || null,
+        'aria-describedby': hintId,
+        onchange: onChange ? (e) => onChange(value, e) : null
+    });
+    return h('label', { key, class: 'ds-radio-row', for: inputId },
+        input,
+        label != null ? h('span', { key: 'l', class: 'ds-radio-label' }, label) : null,
+        hint != null ? h('span', { key: 'h', id: hintId, class: 'ds-field-hint' }, hint) : null
+    );
+}
+
+export function RadioGroup({ legend, name, value, options = [], onChange, orientation = 'vertical', key } = {}) {
+    const groupName = name || uid('ds-rg');
+    const isHoriz = orientation === 'horizontal';
+    const onKeyDown = (e) => {
+        const nextKey = isHoriz ? 'ArrowRight' : 'ArrowDown';
+        const prevKey = isHoriz ? 'ArrowLeft' : 'ArrowUp';
+        if (e.key !== nextKey && e.key !== prevKey && e.key !== 'Home' && e.key !== 'End') return;
+        e.preventDefault();
+        const idx = options.findIndex(o => (typeof o === 'string' ? o : o.value) === value);
+        let next = idx;
+        if (e.key === nextKey) next = (idx + 1) % options.length;
+        else if (e.key === prevKey) next = (idx - 1 + options.length) % options.length;
+        else if (e.key === 'Home') next = 0;
+        else if (e.key === 'End') next = options.length - 1;
+        const opt = options[next];
+        const v = typeof opt === 'string' ? opt : opt.value;
+        if (onChange) onChange(v, e);
+        const root = e.currentTarget;
+        const inputs = root.querySelectorAll('input[type="radio"]');
+        if (inputs[next]) inputs[next].focus();
+    };
+    return h('fieldset', { key, class: 'ds-radio-group ' + (isHoriz ? 'horiz' : 'vert'), role: 'radiogroup', onkeydown: onKeyDown },
+        legend != null ? h('legend', { key: 'lg', class: 'ds-field-label' }, legend) : null,
+        ...options.map((o, i) => {
+            const v = typeof o === 'string' ? o : o.value;
+            const lab = typeof o === 'string' ? o : o.label;
+            const dis = typeof o === 'object' && o.disabled;
+            return Radio({ key: 'r' + i, name: groupName, value: v, label: lab, disabled: dis, checked: v === value, onChange });
+        })
+    );
+}
+
+export function Toggle({ checked, disabled, label, hint, onChange, ariaLabel, kind = 'switch', key, id } = {}) {
+    const btnId = id || uid('ds-toggle');
+    const hintId = hint ? btnId + '-hint' : null;
+    const toggle = () => { if (!disabled && onChange) onChange(!checked); };
+    const btn = h('button', {
+        key: 'b', id: btnId, type: 'button', role: kind, class: 'ds-toggle',
+        'aria-checked': checked ? 'true' : 'false',
+        'aria-label': ariaLabel || (label == null ? 'toggle' : null),
+        'aria-describedby': hintId,
+        disabled: disabled ? true : null,
+        onclick: toggle,
+        onkeydown: (e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); toggle(); } }
+    }, h('span', { key: 'k', class: 'ds-toggle-knob', 'aria-hidden': 'true' }));
+    if (label == null && hint == null) return btn;
+    return h('label', { key, class: 'ds-toggle-row', for: btnId },
+        btn,
+        label != null ? h('span', { key: 'l', class: 'ds-toggle-label' }, label) : null,
+        hint != null ? h('span', { key: 'h', id: hintId, class: 'ds-field-hint' }, hint) : null
+    );
+}
+
+function cloneWithProps(node, extra) {
+    if (!node || typeof node !== 'object') return node;
+    return { ...node, props: { ...(node.props || {}), ...extra } };
+}
+
+export function Field({ label, hint, error, required, htmlFor, children, key } = {}) {
+    const autoId = htmlFor || uid('ds-field');
+    const hintId = hint != null ? autoId + '-hint' : null;
+    const errorId = error != null ? autoId + '-err' : null;
+    const describedBy = [hintId, errorId].filter(Boolean).join(' ') || null;
+    const list = Array.isArray(children) ? children : [children];
+    const decorated = list.map((c) => {
+        if (!c || typeof c !== 'object') return c;
+        const props = c.props || {};
+        const extra = { 'aria-describedby': describedBy };
+        if (error != null) extra['aria-invalid'] = 'true';
+        if (!props.id && !htmlFor) { /* leave id unset */ }
+        else if (!props.id) extra.id = autoId;
+        return cloneWithProps(c, extra);
+    });
+    return h('div', { key, class: 'ds-field-wrap' },
+        label != null ? h('label', { key: 'l', class: 'ds-field-label', for: autoId },
+            label,
+            required ? h('span', { key: 'r', class: 'ds-field-required', 'aria-hidden': 'true' }, ' *') : null
+        ) : null,
+        required ? h('span', { key: 'sr', class: 'sr-only' }, 'required') : null,
+        ...decorated,
+        error != null
+            ? h('div', { key: 'e', id: errorId, class: 'ds-field-error', role: 'alert' }, error)
+            : (hint != null ? h('div', { key: 'h', id: hintId, class: 'ds-field-hint' }, hint) : null)
+    );
+}
+
+const RULES = {
+    required: (v) => (v == null || v === '' || (Array.isArray(v) && v.length === 0)) ? 'required' : null,
+    email: (v) => (!v || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) ? null : 'invalid email',
+    pattern: (v, r) => (v == null || v === '' || new RegExp(r.value).test(v)) ? null : (r.message || 'invalid format'),
+    min: (v, r) => (v == null || Number(v) >= r.value) ? null : (r.message || `min ${r.value}`),
+    max: (v, r) => (v == null || Number(v) <= r.value) ? null : (r.message || `max ${r.value}`),
+    custom: (v, r) => r.fn ? r.fn(v) : null
+};
+
+export function useFormValidation(schema = {}) {
+    const errors = {};
+    const validateField = (name, value) => {
+        const rules = schema[name] || [];
+        for (const r of rules) {
+            const fn = RULES[r.rule];
+            if (!fn) continue;
+            const out = fn(value, r);
+            if (out) { errors[name] = r.message || out; return errors[name]; }
+        }
+        delete errors[name];
+        return null;
+    };
+    const validate = (values = {}) => {
+        for (const name of Object.keys(schema)) validateField(name, values[name]);
+        return { valid: Object.keys(errors).length === 0, errors: { ...errors } };
+    };
+    return { errors, validate, validateField };
+}

package/src/components/interaction-primitives.js

@@ -0,0 +1,217 @@
+// Interaction primitives — pointer drag/drop + keyboard shortcuts.
+// Pointer Events only (touch+mouse). Visuals via editor-primitives.css.
+import * as webjsx from '../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+const DRAG_THRESHOLD = 5;
+const IS_MAC = (typeof navigator !== 'undefined') && /Mac|iPhone|iPad/.test(navigator.platform || '');
+const SHORTCUT_REGISTRY = new Set();
+function dispatchDrag(el, detail) {
+    el.dispatchEvent(new CustomEvent('ds-drag', { detail, bubbles: true, composed: true }));
+}
+
+export function useDraggable(el, { data, kind, onDragStart, onDragEnd } = {}) {
+    if (!el) return { destroy() {} };
+    let startX = 0, startY = 0, active = false, started = false, pid = null;
+    let kbMode = false, kbTargets = [], kbIdx = 0;
+
+    const onMove = (e) => {
+        if (!active) return;
+        if (!started) {
+            const dx = e.clientX - startX, dy = e.clientY - startY;
+            if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+            started = true;
+            el.setAttribute('data-dragging', 'true');
+            if (onDragStart) onDragStart({ data, kind, pointerEvent: e });
+        }
+        const hit = document.elementFromPoint(e.clientX, e.clientY);
+        const target = hit && hit.closest('[data-drop-target]');
+        dispatchDrag(el, { phase: 'move', data, kind, pointerEvent: e, target });
+    };
+    const onUp = (e) => {
+        if (!active) return;
+        const wasStarted = started;
+        active = false; started = false;
+        try { if (pid != null) el.releasePointerCapture(pid); } catch {}
+        pid = null;
+        el.removeAttribute('data-dragging');
+        const hit = document.elementFromPoint(e.clientX, e.clientY);
+        const target = hit && hit.closest('[data-drop-target]');
+        dispatchDrag(el, { phase: 'end', data, kind, pointerEvent: e, target });
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', onUp);
+        window.removeEventListener('pointercancel', onUp);
+        if (wasStarted && onDragEnd) onDragEnd({ drop: target, data, kind });
+    };
+    const onDown = (e) => {
+        if (e.button != null && e.button !== 0) return;
+        active = true; started = false;
+        startX = e.clientX; startY = e.clientY; pid = e.pointerId;
+        try { el.setPointerCapture(e.pointerId); } catch {}
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        window.addEventListener('pointercancel', onUp);
+    };
+    const clearActive = () => kbTargets.forEach(n => n.removeAttribute('data-drop-target-active'));
+    const onKey = (e) => {
+        if (e.key === ' ' || e.code === 'Space') {
+            e.preventDefault();
+            if (!kbMode) {
+                kbMode = true; kbIdx = 0;
+                kbTargets = Array.from(document.querySelectorAll('[data-drop-target]'));
+                el.setAttribute('data-dragging', 'true');
+                if (onDragStart) onDragStart({ data, kind, pointerEvent: null });
+                if (kbTargets[0]) kbTargets[0].setAttribute('data-drop-target-active', 'true');
+            } else {
+                const t = kbTargets[kbIdx];
+                kbMode = false; el.removeAttribute('data-dragging'); clearActive();
+                if (t) dispatchDrag(el, { phase: 'end', data, kind, pointerEvent: null, target: t });
+                if (onDragEnd) onDragEnd({ drop: t, data, kind });
+            }
+        } else if (kbMode && /^Arrow/.test(e.key)) {
+            e.preventDefault();
+            const dir = (e.key === 'ArrowDown' || e.key === 'ArrowRight') ? 1 : -1;
+            clearActive();
+            kbIdx = (kbIdx + dir + kbTargets.length) % kbTargets.length;
+            if (kbTargets[kbIdx]) kbTargets[kbIdx].setAttribute('data-drop-target-active', 'true');
+        } else if (kbMode && e.key === 'Escape') {
+            e.preventDefault(); kbMode = false; el.removeAttribute('data-dragging'); clearActive();
+        }
+    };
+    el.addEventListener('pointerdown', onDown);
+    el.addEventListener('keydown', onKey);
+    return { destroy() {
+        el.removeEventListener('pointerdown', onDown);
+        el.removeEventListener('keydown', onKey);
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', onUp);
+        window.removeEventListener('pointercancel', onUp);
+    }};
+}
+
+export function useDropTarget(el, { accepts = [], onDrop, onDragOver } = {}) {
+    if (!el) return { destroy() {} };
+    el.setAttribute('data-drop-target', '');
+    const handler = (e) => {
+        const d = e.detail; if (!d) return;
+        if (accepts.length && !accepts.includes(d.kind)) return;
+        if (d.target !== el) {
+            el.removeAttribute('data-drop-target-active');
+            return;
+        }
+        if (d.phase === 'move') {
+            el.setAttribute('data-drop-target-active', 'true');
+            if (onDragOver) onDragOver({ data: d.data, kind: d.kind, pointerEvent: d.pointerEvent });
+        } else if (d.phase === 'end') {
+            el.removeAttribute('data-drop-target-active');
+            if (onDrop) onDrop({ data: d.data, kind: d.kind, pointerEvent: d.pointerEvent });
+        }
+    };
+    document.addEventListener('ds-drag', handler, true);
+    return { destroy() {
+        document.removeEventListener('ds-drag', handler, true);
+        el.removeAttribute('data-drop-target');
+        el.removeAttribute('data-drop-target-active');
+    }};
+}
+
+export function Reorderable({ items = [], getKey, renderItem, onReorder, axis = 'vertical', kind = 'reorder' } = {}) {
+    const order = items.map((_, i) => i);
+    const cls = 'ds-reorderable ds-reorderable-' + axis;
+    return h('div', { class: cls, role: 'list' },
+        ...items.map((item, i) => {
+            const key = getKey ? getKey(item, i) : i;
+            const onRef = (el) => {
+                if (!el || el._dsReorder) return;
+                el._dsReorder = true;
+                const handle = el.querySelector('.ds-reorder-handle') || el;
+                const drag = useDraggable(handle, {
+                    data: { index: i }, kind,
+                    onDragEnd: ({ drop }) => {
+                        if (!drop) return;
+                        const toIdx = Number(drop.getAttribute('data-reorder-index'));
+                        if (Number.isNaN(toIdx) || toIdx === i) return;
+                        const next = order.slice();
+                        const [m] = next.splice(i, 1);
+                        next.splice(toIdx, 0, m);
+                        if (onReorder) onReorder(next);
+                    },
+                });
+                const drop = useDropTarget(el, { accepts: [kind] });
+                el._dsReorderDestroy = () => { drag.destroy(); drop.destroy(); };
+            };
+            return h('div', {
+                key, ref: onRef, class: 'ds-reorder-item',
+                'data-reorder-index': String(i), role: 'listitem',
+            },
+                h('button', {
+                    type: 'button', class: 'ds-reorder-handle',
+                    'aria-label': 'Reorder', tabindex: '0',
+                }, '⋮⋮'),
+                renderItem ? renderItem(item, i) : null
+            );
+        })
+    );
+}
+
+function parseCombo(combo) {
+    const parts = combo.split('+').map(s => s.trim());
+    const key = parts.pop();
+    const mods = new Set(parts.map(s => s.toLowerCase()));
+    return { key: key.length === 1 ? key.toLowerCase() : key, mod: mods.has('mod'), shift: mods.has('shift'), alt: mods.has('alt'), ctrl: mods.has('ctrl') };
+}
+function matchEvent(e, spec) {
+    const k = e.key.length === 1 ? e.key.toLowerCase() : e.key;
+    if (k !== spec.key) return false;
+    const modOk = spec.mod ? (IS_MAC ? e.metaKey : e.ctrlKey) : true;
+    if (!modOk) return false;
+    if (spec.shift !== !!e.shiftKey) return false;
+    if (spec.alt !== !!e.altKey) return false;
+    if (spec.ctrl && !e.ctrlKey) return false;
+    return true;
+}
+
+export function formatShortcut(combo) {
+    const s = parseCombo(combo);
+    const mod = s.mod ? (IS_MAC ? '⌘' : 'Ctrl+') : '';
+    const shift = s.shift ? (IS_MAC ? '⇧' : 'Shift+') : '';
+    const alt = s.alt ? (IS_MAC ? '⌥' : 'Alt+') : '';
+    const key = s.key.length === 1 ? s.key.toUpperCase() : s.key;
+    return mod + alt + shift + key;
+}
+
+export function useKeyboardShortcut(map = {}, { scope = 'global', enabled = true } = {}) {
+    if (!enabled) return { destroy() {}, trigger() {} };
+    const target = scope === 'global' ? (typeof document !== 'undefined' ? document : null) : scope;
+    if (!target) return { destroy() {}, trigger() {} };
+    const specs = Object.entries(map).map(([combo, fn]) => ({ combo, spec: parseCombo(combo), fn }));
+    specs.forEach(s => SHORTCUT_REGISTRY.add({ combo: s.combo, scope: scope === 'global' ? 'global' : 'local' }));
+    const onKey = (e) => {
+        for (const s of specs) if (matchEvent(e, s.spec)) { e.preventDefault(); s.fn(e); return; }
+    };
+    target.addEventListener('keydown', onKey);
+    return {
+        destroy() { target.removeEventListener('keydown', onKey); },
+        trigger(combo) { const s = specs.find(x => x.combo === combo); if (s) s.fn(); },
+    };
+}
+
+export function ShortcutHint({ combo, kind = 'kbd' } = {}) { return h('kbd', { class: 'ds-kbd ds-kbd-' + kind }, formatShortcut(combo || '')); }
+
+export function useKeyboardShortcutHelp() { return { registry: Array.from(SHORTCUT_REGISTRY) }; }
+export function ShortcutHelpDialog({ open = false, onClose, registry } = {}) {
+    if (!open) return null;
+    const list = registry || Array.from(SHORTCUT_REGISTRY);
+    const groups = {};
+    list.forEach(r => { (groups[r.scope] = groups[r.scope] || []).push(r); });
+    return h('div', { class: 'ds-ep-dialog-backdrop', onmousedown: (e) => { if (e.target === e.currentTarget && onClose) onClose(); } },
+        h('div', { class: 'ds-ep-dialog', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Keyboard shortcuts' },
+            h('h2', null, 'Keyboard shortcuts'),
+            ...Object.entries(groups).map(([scope, rows]) =>
+                h('section', { class: 'ds-kbd-group' },
+                    h('h3', null, scope),
+                    h('ul', null, ...rows.map(r => h('li', null, h(ShortcutHint, { combo: r.combo }))))
+                )
+            )
+        )
+    );
+}

package/src/components/overlay-primitives.js

@@ -0,0 +1,219 @@
+// Overlay primitives — Tooltip, Popover, Dropdown + useLongPress, useFloating.
+// Shared positioning (auto-flip + viewport clamp) in useFloating; consumed by
+// all three. No inline styles except runtime left/top. CSS classes scoped to
+// .ds-247420 (see editor-primitives.css).
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+const kids = (c) => c == null ? [] : (Array.isArray(c) ? c : [c]);
+const FOCUSABLE_SEL = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+// 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(4, Math.min(vw - c.width - 4, x));
+        y = Math.max(4, Math.min(vh - c.height - 4, 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);
+    return {
+        update: compute,
+        dispose() { window.removeEventListener('resize', cb); window.removeEventListener('scroll', cb, true); },
+        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)); };
+}
+
+// Tooltip — single shared bubble appended to <body>.
+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'; }
+}
+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: 6 });
+}
+
+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(); });
+        window.addEventListener('scroll', _hideTip, true);
+        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 || []));
+}
+
+// Popover — controlled, portaled to <body>.
+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');
+    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: 6 });
+    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);
+    queueMicrotask(() => { const f = el.querySelector(FOCUSABLE_SEL); (f || el).focus(); });
+    _popovers.set(anchorEl, { dispose() {
+        document.removeEventListener('mousedown', onDown, true);
+        floating.dispose();
+        if (el.parentNode) el.parentNode.removeChild(el);
+    }});
+    return null;
+}
+
+// Dropdown — button trigger + portaled menu.
+export function Dropdown({ trigger, items = [], onSelect, placement = 'bottom-start', ariaLabel } = {}) {
+    let triggerEl = null, open = false, menuEl = null, floating = null, typeBuf = '', typeTimer = null;
+    const liveBtns = () => menuEl ? [...menuEl.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')] : [];
+    const focusItem = (idx) => { const b = liveBtns(); 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();
+    };
+    const select = (it) => { if (it.disabled || it.separator) return; if (onSelect) onSelect(it.id, it); close(); };
+    const onMenuKey = (e) => {
+        const b = liveBtns(), 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 (e.key.length === 1 && /\S/.test(e.key)) {
+            typeBuf += e.key.toLowerCase();
+            if (typeTimer) clearTimeout(typeTimer);
+            typeTimer = setTimeout(() => { typeBuf = ''; }, 600);
+            const m = items.findIndex(it => !it.separator && !it.disabled && (it.label || '').toLowerCase().startsWith(typeBuf));
+            if (m >= 0) focusItem(items.slice(0, m).filter(it => !it.separator && !it.disabled).length);
+        }
+    };
+    const openMenu = (focusFirst = true) => {
+        if (open || !triggerEl) return;
+        open = true;
+        menuEl = document.createElement('div');
+        menuEl.className = 'ds-popover ds-dropdown-menu';
+        menuEl.setAttribute('role', 'menu');
+        if (ariaLabel) menuEl.setAttribute('aria-label', ariaLabel);
+        menuEl.tabIndex = -1;
+        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(menuEl, tree);
+        document.body.appendChild(menuEl);
+        menuEl.addEventListener('keydown', onMenuKey);
+        floating = useFloating(triggerEl, menuEl, { placement, offset: 4 });
+        document.addEventListener('mousedown', onDown, true);
+        triggerEl.setAttribute('aria-expanded', 'true');
+        if (focusFirst) queueMicrotask(() => focusItem(0));
+    };
+    const onTrigClick = () => { if (open) close(false); else openMenu(true); };
+    const onTrigKey = (e) => { if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (!open) openMenu(true); else focusItem(0); } };
+    const refFn = (el) => {
+        if (!el || el._dsDropdown) return;
+        el._dsDropdown = true; triggerEl = el;
+        el.addEventListener('click', onTrigClick);
+        el.addEventListener('keydown', onTrigKey);
+        el.setAttribute('aria-haspopup', 'menu');
+        el.setAttribute('aria-expanded', 'false');
+    };
+    const child = (typeof trigger === 'function') ? trigger() : trigger;
+    return (child && child.type)
+        ? webjsx.createElement(child.type, { ...(child.props || {}), ref: refFn }, ...(child.children || []))
+        : h('button', { type: 'button', class: 'ds-dropdown-trigger', ref: refFn }, child || 'Menu');
+}

package/src/components.js

@@ -45,6 +45,16 @@ export {
 
 export { ThemeToggle } from './components/theme-toggle.js';
 
+export {
+    Checkbox, Radio, RadioGroup, Toggle, Field, useFormValidation
+} from './components/form-primitives.js';
+
+export {
+    useDraggable, useDropTarget, Reorderable,
+    useKeyboardShortcut, formatShortcut, ShortcutHint,
+    useKeyboardShortcutHelp, ShortcutHelpDialog
+} from './components/interaction-primitives.js';
+
 export {
     Toolbar, Tabs,
     TreeView, TreeItem,
@@ -58,6 +68,10 @@ export {
     BP_SM, BP_MD, BP_LG, BP_XL
 } from './components/editor-primitives.js';
 
+export {
+    Tooltip, Popover, Dropdown, useLongPress, useFloating
+} from './components/overlay-primitives.js';
+
 export {
     FREDDIE_PAGES,
     home, chat, voice, sessions, projects, agents, analytics,