anentrypoint-design 0.0.144 → 0.0.145

package/package.json

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

@@ -237,6 +237,48 @@ export function VoiceStrip({ channelName, status, muted, deafened, onMute, onDea
     );
 }
 
+export function MobileHeader({ title, onMenu, onMembers } = {}) {
+    return h('div', { class: 'cm-mobile-header', role: 'banner' },
+        h('button', {
+            class: 'cm-mh-btn', type: 'button', onclick: onMenu,
+            title: 'Menu', 'aria-label': 'open navigation menu'
+        }, '☰'),
+        h('span', { class: 'cm-mh-title' }, title || ''),
+        h('button', {
+            class: 'cm-mh-btn', type: 'button', onclick: onMembers,
+            title: 'Members', 'aria-label': 'show members'
+        }, '👥')
+    );
+}
+
+export function ReplyBar({ quotedMessage, quotedAuthor, onCancel } = {}) {
+    return h('div', { class: 'cm-reply-bar', role: 'status' },
+        h('span', { class: 'cm-rb-label' }, 'Replying to ',
+            h('strong', { class: 'cm-rb-author' }, quotedAuthor || 'unknown')
+        ),
+        h('span', { class: 'cm-rb-preview', title: quotedMessage || '' }, quotedMessage || ''),
+        h('button', {
+            class: 'cm-rb-cancel', type: 'button', onclick: onCancel,
+            title: 'Cancel reply', 'aria-label': 'cancel reply'
+        }, '✕')
+    );
+}
+
+export function Banner({ tone = 'info', message, visible, actionLabel, onAction, onClick } = {}) {
+    if (!visible || !message) return null;
+    return h('div', {
+        class: 'cm-banner tone-' + tone + (onClick ? ' clickable' : ''),
+        role: tone === 'error' || tone === 'warning' ? 'alert' : 'status',
+        onclick: onClick || null
+    },
+        h('span', { class: 'cm-banner-msg' }, message),
+        actionLabel ? h('button', {
+            class: 'cm-banner-action', type: 'button',
+            onclick: (e) => { e.stopPropagation(); onAction && onAction(e); }
+        }, actionLabel) : null
+    );
+}
+
 export function CommunityShell({ serverRailProps, sidebarProps, children, memberListProps, voiceStripProps } = {}) {
     return h('div', { class: 'cm-shell' },
         serverRailProps ? ServerRail(serverRailProps) : null,

package/src/components/files-modals.js

@@ -103,7 +103,17 @@ export function PromptDialog({ title = 'name', value = '', placeholder = '', con
             ),
             h('div', { class: 'ds-modal-actions' },
                 Btn({ onClick: onCancel, children: cancelLabel }),
-                h('button', { class: 'btn-primary', onclick: () => onConfirm && onConfirm(value) }, confirmLabel)
+                h('button', {
+                    class: 'btn-primary',
+                    // Read the live input value, not the closed-over `value` prop:
+                    // consumers update their state in oninput without re-rendering
+                    // (to avoid caret jump), so the prop is stale at click time.
+                    onclick: (e) => {
+                        if (!onConfirm) return;
+                        const inp = e.currentTarget.closest('.ds-modal')?.querySelector('.ds-modal-input');
+                        onConfirm(inp ? inp.value : value);
+                    }
+                }, confirmLabel)
             )
         ]
     });

package/src/components/overlay-primitives.js

@@ -217,3 +217,248 @@ export function Dropdown({ trigger, items = [], onSelect, placement = 'bottom-st
         ? webjsx.createElement(child.type, { ...(child.props || {}), ref: refFn }, ...(child.children || []))
         : h('button', { type: 'button', class: 'ds-dropdown-trigger', ref: refFn }, child || 'Menu');
 }
+
+// Clamp a fixed-position box to the viewport given desired top-left coords.
+function _clampToViewport(x, y, w, h, margin = 8) {
+    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)),
+    };
+}
+
+// CommandPalette — centered Cmd+K palette with live filter + keyboard nav.
+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',
+                '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 = [];
+    const close = () => 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' });
+    };
+
+    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-label': 'Command palette', onkeydown: onKey },
+            h('input', {
+                type: 'text', class: 'ov-cmd-input', placeholder: 'Type a command…',
+                'aria-label': 'Filter commands',
+                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', role: 'listbox',
+                ref: (el) => { if (!el) return; listEl = el; queueMicrotask(renderInner); } })
+        )
+    );
+}
+
+const EMOJI_CATEGORIES = [
+    { id: 'smileys', label: '😀', emoji: ['😀','😁','😂','🤣','😊','😍','😘','😎','🤔','😅','😉','🙂','😇','🥳','😴','🤩','😜','😢','😭','😡','😱','🥺','😤','😬'] },
+    { id: 'gestures', label: '👍', emoji: ['👍','👎','👌','✌️','🤞','🙏','👏','🙌','💪','👀','🤝','✋','🤙','👋','🤟','☝️'] },
+    { id: 'hearts', label: '❤️', emoji: ['❤️','🧡','💛','💚','💙','💜','🖤','🤍','💔','💕','💖','💗'] },
+    { id: 'symbols', label: '✅', emoji: ['🔥','💯','✅','❌','⭐','🎉','🎊','✨','💡','⚡','💢','💀','🚀','🏆'] },
+];
+
+// EmojiPicker — fixed popover near (anchorX, anchorY) with category tabs + grid.
+export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose } = {}) {
+    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 c = EMOJI_CATEGORIES.find(x => x.id === cat) || EMOJI_CATEGORIES[0];
+        webjsx.applyDiff(gridEl, h('div', { class: 'ov-emoji-grid-inner' },
+            ...c.emoji.map((ch) => h('button', {
+                type: 'button', class: 'ov-emoji-cell', 'aria-label': ch,
+                onclick: () => { if (onSelect) onSelect(ch); },
+            }, ch))));
+    };
+
+    return h('div', {
+        class: 'ov-emoji-root', role: 'dialog', 'aria-label': 'Emoji picker',
+        tabindex: '-1',
+        onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); } },
+        ref: (el) => {
+            if (!el || el._ovEmoji) return; el._ovEmoji = true; rootEl = el;
+            const place = () => {
+                const r = el.getBoundingClientRect();
+                const { left, top } = _clampToViewport(anchorX, anchorY, r.width || 260, r.height || 240);
+                el.style.left = left + 'px'; el.style.top = top + 'px';
+            };
+            queueMicrotask(() => { place(); el.focus(); });
+            const onDown = (e) => { if (!el.contains(e.target)) close(); };
+            queueMicrotask(() => document.addEventListener('mousedown', onDown, true));
+            el._ovEmojiCleanup = () => document.removeEventListener('mousedown', onDown, true);
+        },
+    },
+        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',
+                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',
+            ref: (el) => { if (!el) return; gridEl = el; queueMicrotask(renderGrid); } })
+    );
+}
+
+// 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' }, '⚠')
+                : 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…')))
+        )
+    );
+}
+
+// SettingsPopover — fixed popover with generic section/row control rendering.
+export function SettingsPopover({ title = 'Settings', open, anchorX = 0, anchorY = 0, sections = [], onClose } = {}) {
+    if (!open) return 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;
+        const labelNode = h('span', { class: 'ov-set-row-label' }, String(label));
+        let control = null;
+        if (kind === 'select') {
+            const opts = Array.isArray(row.options) ? row.options : [];
+            control = h('select', {
+                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), selected: String(v) === String(row.value) ? 'selected' : undefined }, String(l));
+            }));
+        } else if (kind === 'toggle') {
+            control = h('input', {
+                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', {
+                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 : ''));
+        }
+        return h('div', { class: 'ov-set-row', key: i }, labelNode, control);
+    };
+
+    return h('div', {
+        class: 'ov-set-root', role: 'dialog', 'aria-label': String(title), tabindex: '-1',
+        onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); } },
+        ref: (el) => {
+            if (!el || el._ovSet) return; el._ovSet = true;
+            const place = () => {
+                const r = el.getBoundingClientRect();
+                const { left, top } = _clampToViewport(anchorX, anchorY, r.width || 280, r.height || 200);
+                el.style.left = left + 'px'; el.style.top = top + 'px';
+            };
+            queueMicrotask(() => { place(); el.focus(); });
+            const onDown = (e) => { if (!el.contains(e.target)) close(); };
+            queueMicrotask(() => document.addEventListener('mousedown', onDown, true));
+        },
+    },
+        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/voice.js

@@ -0,0 +1,228 @@
+// Voice surfaces — PTT, VAD meter, webcam preview, voice settings, audio queue.
+// Pure factories returning webjsx vnodes. Class prefix: vx-*.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+function fmtDur(s) {
+    s = Math.max(0, Math.round(Number(s) || 0));
+    if (s < 60) return s + 's';
+    const m = Math.floor(s / 60);
+    const r = s % 60;
+    return m + ':' + String(r).padStart(2, '0');
+}
+
+export function PttButton({ state = 'idle', mode = 'ptt', onHoldStart, onHoldEnd, onClick, label = 'Hold to talk' } = {}) {
+    const active = state === 'live' || state === 'recording' || state === 'vad';
+    const start = (e) => { onHoldStart && onHoldStart(e); };
+    const end = (e) => { onHoldEnd && onHoldEnd(e); };
+    return h('button', {
+        type: 'button',
+        class: 'vx-ptt vx-ptt-' + state + ' vx-ptt-mode-' + mode,
+        'data-state': state,
+        'data-mode': mode,
+        'aria-pressed': active ? 'true' : 'false',
+        'aria-label': label,
+        onclick: onClick ? (e) => onClick(e) : null,
+        onpointerdown: (e) => { e.preventDefault(); start(e); },
+        onpointerup: (e) => { e.preventDefault(); end(e); },
+        onpointerleave: (e) => end(e),
+        oncontextmenu: (e) => e.preventDefault(),
+        ontouchstart: (e) => start(e),
+        ontouchend: (e) => { e.preventDefault(); end(e); }
+    },
+        h('span', { class: 'vx-ptt-glow', 'aria-hidden': 'true' }),
+        h('span', { class: 'vx-ptt-icon', 'aria-hidden': 'true' }, state === 'idle' ? '🎙' : '●'),
+        h('span', { class: 'vx-ptt-label' }, label)
+    );
+}
+
+export function VadMeter({ level = 0, threshold = 0.5, onThresholdChange } = {}) {
+    const lvl = Math.max(0, Math.min(1, Number(level) || 0));
+    const thr = Math.max(0, Math.min(1, Number(threshold) || 0));
+    const over = lvl >= thr;
+    return h('div', { class: 'vx-vad', role: 'group', 'aria-label': 'voice activity meter' },
+        h('div', { class: 'vx-vad-track' },
+            h('div', { class: 'vx-vad-fill' + (over ? ' vx-vad-fill-over' : ''), style: 'width:' + (lvl * 100).toFixed(1) + '%' }),
+            h('div', { class: 'vx-vad-marker', style: 'left:' + (thr * 100).toFixed(1) + '%', 'aria-hidden': 'true' }),
+            h('input', {
+                class: 'vx-vad-range',
+                type: 'range', min: '0', max: '1', step: '0.01',
+                value: String(thr),
+                'aria-label': 'VAD threshold',
+                oninput: onThresholdChange ? (e) => onThresholdChange(parseFloat(e.target.value)) : null
+            })
+        ),
+        h('div', { class: 'vx-vad-readout' },
+            h('span', {}, 'lvl ' + Math.round(lvl * 100)),
+            h('span', {}, 'thr ' + Math.round(thr * 100))
+        )
+    );
+}
+
+export function WebcamPreview({ videoStream = null, resolution = '640x480', fps = 30, enabled = true, resolutions = [], fpsOptions = [], onResolutionChange, onFpsChange, onToggle } = {}) {
+    const videoRef = (el) => {
+        if (!el) return;
+        if (el.srcObject !== videoStream) el.srcObject = videoStream || null;
+    };
+    const resOpts = (resolutions.length ? resolutions : [resolution]).map(r =>
+        h('option', { key: 'r-' + r, value: r, selected: r === resolution }, r));
+    const fpsList = fpsOptions.length ? fpsOptions : [fps];
+    const fpsOpts = fpsList.map(f =>
+        h('option', { key: 'f-' + f, value: String(f), selected: Number(f) === Number(fps) }, f + ' fps'));
+    return h('div', { class: 'vx-cam' + (enabled ? '' : ' vx-cam-off') },
+        h('div', { class: 'vx-cam-stage' },
+            enabled
+                ? h('video', { class: 'vx-cam-video', ref: videoRef, autoplay: true, muted: true, playsinline: true })
+                : h('div', { class: 'vx-cam-placeholder' }, h('span', {}, '📷'), h('span', {}, 'Camera off'))
+        ),
+        h('div', { class: 'vx-cam-controls' },
+            h('select', {
+                class: 'vx-select', 'aria-label': 'resolution',
+                onchange: onResolutionChange ? (e) => onResolutionChange(e.target.value) : null
+            }, ...resOpts),
+            h('select', {
+                class: 'vx-select', 'aria-label': 'frame rate',
+                onchange: onFpsChange ? (e) => onFpsChange(Number(e.target.value)) : null
+            }, ...fpsOpts),
+            h('button', {
+                type: 'button',
+                class: 'vx-btn' + (enabled ? ' vx-btn-on' : ''),
+                'aria-pressed': enabled ? 'true' : 'false',
+                onclick: onToggle ? () => onToggle() : null
+            }, enabled ? 'Disable' : 'Enable')
+        )
+    );
+}
+
+function seg({ label, children, className = '' }) {
+    return h('div', { class: 'vx-section ' + className },
+        label != null ? h('div', { class: 'vx-section-label' }, label) : null,
+        ...(Array.isArray(children) ? children : [children])
+    );
+}
+
+function devSelect(value, devices, onChange, aria) {
+    return h('select', {
+        class: 'vx-select', 'aria-label': aria,
+        onchange: onChange ? (e) => onChange(e.target.value) : null
+    }, ...(devices || []).map(d =>
+        h('option', { key: 'd-' + d.value, value: d.value, selected: d.value === value }, d.label)));
+}
+
+function toggleRow(label, checked, onToggle) {
+    return h('label', { class: 'vx-toggle-row' },
+        h('span', {}, label),
+        h('input', {
+            type: 'checkbox', class: 'vx-toggle',
+            checked: checked ? true : null,
+            onchange: onToggle ? (e) => onToggle(e.target.checked) : null
+        })
+    );
+}
+
+export function VoiceSettingsModal({ open = false, mode = 'ptt', inputId, outputId, inputDevices = [], outputDevices = [], vadThreshold = 0.5, rnnoise = false, autoGain = false, forceTurn = false, bitrate = 64, volume, onChange, onSave, onCancel, onClose } = {}) {
+    if (!open) return null;
+    const patch = (p) => onChange && onChange(p);
+    const modes = ['ptt', 'vad', 'live'];
+    const vol = volume == null ? 1 : volume;
+    return h('div', {
+        class: 'vx-modal-backdrop',
+        onclick: (e) => { if (e.target === e.currentTarget) onClose && onClose(); },
+        onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); onClose && onClose(); } }
+    },
+        h('div', { class: 'vx-modal', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Voice settings' },
+            h('div', { class: 'vx-modal-head' },
+                h('h2', { class: 'vx-modal-title' }, 'Voice settings'),
+                h('button', { type: 'button', class: 'vx-modal-x', 'aria-label': 'close', onclick: () => onClose && onClose() }, '×')
+            ),
+            h('div', { class: 'vx-modal-body' },
+                seg({ label: 'Mode', children:
+                    h('div', { class: 'vx-segmented', role: 'group', 'aria-label': 'mode' },
+                        ...modes.map(m => h('button', {
+                            key: 'm-' + m, type: 'button',
+                            class: 'vx-seg' + (m === mode ? ' vx-seg-on' : ''),
+                            'aria-pressed': m === mode ? 'true' : 'false',
+                            onclick: () => patch({ mode: m })
+                        }, m.toUpperCase())))
+                }),
+                seg({ label: 'Input device', children: devSelect(inputId, inputDevices, (v) => patch({ inputId: v }), 'input device') }),
+                seg({ label: 'Output device', children: devSelect(outputId, outputDevices, (v) => patch({ outputId: v }), 'output device') }),
+                mode === 'vad' ? seg({ label: 'VAD threshold', children:
+                    h('div', { class: 'vx-range-row' },
+                        h('input', {
+                            type: 'range', class: 'vx-range', min: '0', max: '1', step: '0.01',
+                            value: String(vadThreshold), 'aria-label': 'VAD threshold',
+                            oninput: (e) => patch({ vadThreshold: parseFloat(e.target.value) })
+                        }),
+                        h('span', { class: 'vx-range-val' }, Math.round((Number(vadThreshold) || 0) * 100) + '%')
+                    )
+                }) : null,
+                seg({ label: 'Processing', children: [
+                    toggleRow('RNNoise', rnnoise, (v) => patch({ rnnoise: v })),
+                    toggleRow('Auto gain', autoGain, (v) => patch({ autoGain: v })),
+                    toggleRow('Force TURN', forceTurn, (v) => patch({ forceTurn: v }))
+                ]}),
+                seg({ label: 'Bitrate', children:
+                    h('div', { class: 'vx-range-row' },
+                        h('input', {
+                            type: 'range', class: 'vx-range', min: '8', max: '256', step: '8',
+                            value: String(bitrate), 'aria-label': 'bitrate',
+                            oninput: (e) => patch({ bitrate: parseInt(e.target.value, 10) })
+                        }),
+                        h('span', { class: 'vx-range-val' }, (Number(bitrate) || 0) + ' kbps')
+                    )
+                }),
+                seg({ label: 'Master volume', children:
+                    h('div', { class: 'vx-range-row' },
+                        h('input', {
+                            type: 'range', class: 'vx-range', min: '0', max: '1', step: '0.01',
+                            value: String(vol), 'aria-label': 'master volume',
+                            oninput: (e) => patch({ volume: parseFloat(e.target.value) })
+                        }),
+                        h('span', { class: 'vx-range-val' }, Math.round(vol * 100) + '%')
+                    )
+                })
+            ),
+            h('div', { class: 'vx-modal-foot' },
+                h('button', { type: 'button', class: 'vx-btn', onclick: () => onCancel && onCancel() }, 'Cancel'),
+                h('button', { type: 'button', class: 'vx-btn vx-btn-primary', onclick: () => onSave && onSave() }, 'Save')
+            )
+        )
+    );
+}
+
+export function AudioQueue({ segments = [], currentSegmentId = null, paused = false, onReplay, onSkip, onResume, onPause } = {}) {
+    if (!segments || !segments.length) {
+        return h('div', { class: 'vx-queue vx-queue-empty' },
+            h('span', { class: 'vx-queue-empty-text' }, 'No audio queued'));
+    }
+    return h('div', { class: 'vx-queue', role: 'group', 'aria-label': 'audio queue' },
+        h('div', { class: 'vx-queue-ctrls' },
+            h('button', {
+                type: 'button', class: 'vx-queue-btn',
+                'aria-label': paused ? 'resume' : 'pause',
+                onclick: () => paused ? (onResume && onResume()) : (onPause && onPause())
+            }, paused ? '▶' : '⏸'),
+            h('button', {
+                type: 'button', class: 'vx-queue-btn',
+                'aria-label': 'skip', onclick: () => onSkip && onSkip()
+            }, '⏭')
+        ),
+        h('div', { class: 'vx-queue-strip' },
+            ...segments.map(s => h('button', {
+                key: 'q-' + s.id,
+                type: 'button',
+                class: 'vx-chip' + (s.id === currentSegmentId ? ' vx-chip-current' : '') + (s.isLive ? ' vx-chip-live' : ''),
+                'data-id': s.id,
+                onclick: () => onReplay && onReplay(s.id)
+            },
+                h('span', { class: 'vx-chip-dot', style: s.color ? 'background:' + s.color : null, 'aria-hidden': 'true' }),
+                h('span', { class: 'vx-chip-name' }, s.speaker || '—'),
+                s.isLive
+                    ? h('span', { class: 'vx-chip-tag' }, 'LIVE')
+                    : h('span', { class: 'vx-chip-dur' }, fmtDur(s.duration))
+            ))
+        )
+    );
+}

package/src/components.js

@@ -40,9 +40,14 @@ export {
     ChannelItem, ChannelCategory,
     VoiceUser, UserPanel, ChannelSidebar,
     MemberItem, MemberList,
-    ChatHeader, VoiceStrip, CommunityShell
+    ChatHeader, VoiceStrip, CommunityShell,
+    MobileHeader, ReplyBar, Banner
 } from './components/community.js';
 
+export {
+    PttButton, VadMeter, WebcamPreview, VoiceSettingsModal, AudioQueue
+} from './components/voice.js';
+
 export { ThemeToggle } from './components/theme-toggle.js';
 
 export {
@@ -69,7 +74,8 @@ export {
 } from './components/editor-primitives.js';
 
 export {
-    Tooltip, Popover, Dropdown, useLongPress, useFloating
+    Tooltip, Popover, Dropdown, useLongPress, useFloating,
+    CommandPalette, EmojiPicker, BootOverlay, SettingsPopover
 } from './components/overlay-primitives.js';
 
 export {

package/src/kits/os/about-app.js

@@ -34,7 +34,7 @@ export function renderAboutApp(opts = {}) {
         ul.appendChild(li);
     }
     const foot = document.createElement('p');
-    foot.innerHTML = footer;
+    foot.textContent = footer;
     const meta = document.createElement('p');
     meta.className = 'meta';
     links.forEach((l, i) => {