anentrypoint-design 0.0.121 → 0.0.122

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.121",
+  "version": "0.0.122",
   "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/surfaces.js

@@ -0,0 +1,399 @@
+// Surfaces — thread panel, forum view, page view, auth modal, settings popover, voice settings modal.
+// Pure factories: props → vnode. Render nothing when modals are not open.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+function timeAgo(t) {
+    if (!t) return '';
+    const d = typeof t === 'number' ? t : Date.parse(t);
+    if (!Number.isFinite(d)) return String(t);
+    const s = Math.max(0, Math.floor((Date.now() - d) / 1000));
+    if (s < 60) return s + 's';
+    if (s < 3600) return Math.floor(s / 60) + 'm';
+    if (s < 86400) return Math.floor(s / 3600) + 'h';
+    return Math.floor(s / 86400) + 'd';
+}
+
+export function ThreadPanel({ threads = [], activeId, onSelect, onCreate, onClose, open, title = 'Threads' } = {}) {
+    if (open !== true) return null;
+    return h('aside', { class: 'cm-thread-panel', role: 'complementary' },
+        h('div', { class: 'cm-tp-header' },
+            h('span', { class: 'cm-tp-title' }, title),
+            h('div', { class: 'cm-tp-header-actions' },
+                onCreate ? h('button', { class: 'cm-tp-new', onclick: onCreate, title: 'New thread' }, '+') : null,
+                onClose ? h('button', { class: 'cm-tp-close', onclick: onClose, title: 'Close' }, '✕') : null
+            )
+        ),
+        h('div', { class: 'cm-tp-list' },
+            ...threads.map(t => h('div', {
+                class: 'cm-tp-item' + (t.id === activeId ? ' active' : '') + (t.unread ? ' unread' : ''),
+                onclick: () => onSelect && onSelect(t.id),
+                'data-id': t.id
+            },
+                h('div', { class: 'cm-tp-item-row' },
+                    h('span', { class: 'cm-tp-item-title' }, t.title || '(untitled)'),
+                    h('span', { class: 'cm-tp-item-time' }, timeAgo(t.time))
+                ),
+                t.lastMessage ? h('div', { class: 'cm-tp-item-msg' },
+                    t.author ? h('span', { class: 'cm-tp-item-author' }, t.author + ': ') : null,
+                    t.lastMessage
+                ) : null,
+                t.unread ? h('span', { class: 'cm-tp-item-dot' }) : null
+            ))
+        )
+    );
+}
+
+export function ForumView({ posts = [], onSelect, onSearch, onNewPost, query, sortBy = 'recent', onSort } = {}) {
+    const sorts = [
+        { id: 'recent', label: 'Recent' },
+        { id: 'popular', label: 'Popular' },
+        { id: 'unanswered', label: 'Unanswered' }
+    ];
+    return h('div', { class: 'cm-forum-view' },
+        h('div', { class: 'cm-fv-toolbar' },
+            h('input', {
+                class: 'cm-fv-search',
+                type: 'search',
+                placeholder: 'Search posts…',
+                value: query || '',
+                oninput: (e) => onSearch && onSearch(e.target.value)
+            }),
+            h('select', {
+                class: 'cm-fv-sort',
+                value: sortBy,
+                onchange: (e) => onSort && onSort(e.target.value)
+            }, ...sorts.map(s => h('option', { value: s.id, selected: s.id === sortBy ? 'selected' : null }, s.label))),
+            onNewPost ? h('button', { class: 'cm-fv-new', onclick: onNewPost, title: 'New post' }, '+ New') : null
+        ),
+        h('div', { class: 'cm-fv-list' },
+            ...posts.map(p => h('div', {
+                class: 'cm-fv-post',
+                onclick: () => onSelect && onSelect(p.id),
+                'data-id': p.id
+            },
+                h('div', { class: 'cm-fv-post-head' },
+                    h('span', { class: 'cm-fv-post-title' }, p.title || '(untitled)'),
+                    h('span', { class: 'cm-fv-post-meta' },
+                        p.author ? h('span', { class: 'cm-fv-post-author' }, p.author) : null,
+                        h('span', { class: 'cm-fv-post-time' }, timeAgo(p.time)),
+                        h('span', { class: 'cm-fv-post-replies' }, (p.replyCount || 0) + ' replies')
+                    )
+                ),
+                p.snippet ? h('div', { class: 'cm-fv-post-snippet' }, p.snippet) : null,
+                p.tags && p.tags.length ? h('div', { class: 'cm-fv-post-tags' },
+                    ...p.tags.map(tg => h('span', { class: 'cm-fv-post-tag' }, tg))
+                ) : null
+            ))
+        )
+    );
+}
+
+export function PageView({ content, html, title, onEdit, isAdmin } = {}) {
+    const bodyAttrs = { class: 'cm-pv-content' };
+    if (html != null) {
+        bodyAttrs.ref = (el) => { if (el) el.innerHTML = String(html); };
+    }
+    return h('div', { class: 'cm-page-view' },
+        h('div', { class: 'cm-pv-head' },
+            title ? h('h1', { class: 'cm-pv-title' }, title) : null,
+            isAdmin && onEdit ? h('button', { class: 'cm-pv-edit', onclick: onEdit, title: 'Edit' }, 'Edit') : null
+        ),
+        html != null
+            ? h('div', bodyAttrs)
+            : h('div', bodyAttrs, content || null)
+    );
+}
+
+export function AuthModal({ mode = 'extension', error, onConnectExtension, onGenerate, onImport, onModeChange, open, onClose, busy } = {}) {
+    if (open !== true) return null;
+    const tabs = [
+        { id: 'extension', label: 'Extension' },
+        { id: 'generate', label: 'Generate' },
+        { id: 'import', label: 'Import' }
+    ];
+    let importRef = null;
+    return h('div', { class: 'cm-modal-backdrop', onclick: onClose },
+        h('div', {
+            class: 'cm-auth-modal',
+            onclick: (e) => e.stopPropagation(),
+            role: 'dialog'
+        },
+            h('div', { class: 'cm-am-head' },
+                h('span', { class: 'cm-am-title' }, 'Sign in'),
+                onClose ? h('button', { class: 'cm-am-close', onclick: onClose, title: 'Close' }, '✕') : null
+            ),
+            h('div', { class: 'cm-am-tabs', role: 'tablist' },
+                ...tabs.map(t => h('button', {
+                    class: 'cm-am-tab' + (mode === t.id ? ' active' : ''),
+                    onclick: () => onModeChange && onModeChange(t.id),
+                    'data-mode': t.id
+                }, t.label))
+            ),
+            mode === 'extension' ? h('div', { class: 'cm-am-pane' },
+                h('p', { class: 'cm-am-text' }, 'Connect using a NIP-07 browser extension (e.g. nos2x, Alby).'),
+                h('button', {
+                    class: 'cm-am-btn',
+                    onclick: onConnectExtension,
+                    disabled: busy ? 'disabled' : null
+                }, busy ? 'Connecting…' : 'Connect extension')
+            ) : null,
+            mode === 'generate' ? h('div', { class: 'cm-am-pane' },
+                h('p', { class: 'cm-am-text' }, 'Generate a fresh keypair. Keep your secret key safe — losing it means losing your identity.'),
+                h('div', { class: 'cm-am-warn' }, 'Warning: store the generated nsec somewhere safe before continuing.'),
+                h('button', {
+                    class: 'cm-am-btn',
+                    onclick: onGenerate,
+                    disabled: busy ? 'disabled' : null
+                }, busy ? 'Generating…' : 'Generate keypair')
+            ) : null,
+            mode === 'import' ? h('div', { class: 'cm-am-pane' },
+                h('p', { class: 'cm-am-text' }, 'Paste your nsec secret key to import an existing identity.'),
+                h('textarea', {
+                    class: 'cm-am-textarea',
+                    placeholder: 'nsec1…',
+                    rows: 3,
+                    ref: (el) => { importRef = el; }
+                }),
+                h('button', {
+                    class: 'cm-am-btn',
+                    onclick: () => onImport && onImport(importRef ? importRef.value.trim() : ''),
+                    disabled: busy ? 'disabled' : null
+                }, busy ? 'Importing…' : 'Import')
+            ) : null,
+            error ? h('div', { class: 'cm-am-error', role: 'alert' }, String(error)) : null
+        )
+    );
+}
+
+function renderSettingsItem(item) {
+    if (!item) return null;
+    if (item.kind === 'header') return h('div', { class: 'cm-sp-header' }, item.label || '');
+    if (item.kind === 'text') return h('div', { class: 'cm-sp-text' }, item.label || '');
+    if (item.kind === 'toggle') {
+        return h('label', { class: 'cm-sp-row cm-sp-toggle' },
+            h('span', { class: 'cm-sp-row-label' }, item.label || ''),
+            h('input', {
+                type: 'checkbox',
+                checked: item.value ? 'checked' : null,
+                onchange: (e) => item.onChange && item.onChange(e.target.checked)
+            })
+        );
+    }
+    if (item.kind === 'select') {
+        return h('label', { class: 'cm-sp-row cm-sp-select' },
+            h('span', { class: 'cm-sp-row-label' }, item.label || ''),
+            h('select', {
+                value: item.value,
+                onchange: (e) => item.onChange && item.onChange(e.target.value)
+            }, ...(item.options || []).map(o => h('option', {
+                value: o.value != null ? o.value : o.id,
+                selected: (o.value != null ? o.value : o.id) === item.value ? 'selected' : null
+            }, o.label)))
+        );
+    }
+    if (item.kind === 'button') {
+        return h('div', { class: 'cm-sp-row' },
+            h('button', {
+                class: 'cm-sp-btn' + (item.danger ? ' danger' : ''),
+                onclick: item.onClick
+            }, item.label || '')
+        );
+    }
+    return null;
+}
+
+export function SettingsPopover({ sections = [], open, onClose, anchorX, anchorY, title = 'Settings' } = {}) {
+    if (open !== true) return null;
+    const style = (anchorX != null && anchorY != null)
+        ? `left:${anchorX}px;top:${anchorY}px`
+        : null;
+    return h('div', { class: 'cm-modal-backdrop transparent', onclick: onClose },
+        h('div', {
+            class: 'cm-settings-popover',
+            style,
+            onclick: (e) => e.stopPropagation(),
+            role: 'dialog'
+        },
+            h('div', { class: 'cm-sp-head' },
+                h('span', { class: 'cm-sp-title' }, title),
+                onClose ? h('button', { class: 'cm-sp-close', onclick: onClose, title: 'Close' }, '✕') : null
+            ),
+            ...sections.map(sec => h('div', { class: 'cm-sp-section', 'data-id': sec.id },
+                sec.label ? h('div', { class: 'cm-sp-section-label' }, sec.label) : null,
+                ...(sec.items || []).map(renderSettingsItem)
+            ))
+        )
+    );
+}
+
+export function VoiceSettingsModal({
+    mode = 'ptt',
+    devices = { input: [], output: [] },
+    inputId,
+    outputId,
+    volume = 0.7,
+    bitrate = 64,
+    vadThreshold = 0.15,
+    rnnoise = true,
+    autoGain = true,
+    forceTurn = false,
+    isAdmin,
+    channelMode,
+    allowedRoles,
+    onModeChange,
+    onInputChange,
+    onOutputChange,
+    onVolumeChange,
+    onBitrateChange,
+    onVadChange,
+    onRnnoiseToggle,
+    onAutoGainToggle,
+    onForceTurnToggle,
+    onChannelModeChange,
+    onSave,
+    onCancel,
+    open
+} = {}) {
+    if (open !== true) return null;
+    const modes = [
+        { id: 'ptt', label: 'Push-to-talk' },
+        { id: 'realtime', label: 'Open mic (realtime)' }
+    ];
+    const channelModes = [
+        { id: 'ptt', label: 'PTT only' },
+        { id: 'realtime', label: 'Realtime' },
+        { id: 'free', label: 'User choice' }
+    ];
+    return h('div', { class: 'cm-modal-backdrop', onclick: onCancel },
+        h('div', {
+            class: 'cm-voice-settings-modal',
+            onclick: (e) => e.stopPropagation(),
+            role: 'dialog'
+        },
+            h('div', { class: 'cm-vsm-head' },
+                h('span', { class: 'cm-vsm-title' }, 'Voice settings'),
+                onCancel ? h('button', { class: 'cm-vsm-close', onclick: onCancel, title: 'Close' }, '✕') : null
+            ),
+
+            h('div', { class: 'cm-vsm-section' },
+                h('div', { class: 'cm-vsm-section-label' }, 'Audio devices'),
+                h('label', { class: 'cm-vsm-row' },
+                    h('span', { class: 'cm-vsm-row-label' }, 'Input'),
+                    h('select', {
+                        value: inputId,
+                        onchange: (e) => onInputChange && onInputChange(e.target.value)
+                    }, ...(devices.input || []).map(d => h('option', {
+                        value: d.deviceId || d.id,
+                        selected: (d.deviceId || d.id) === inputId ? 'selected' : null
+                    }, d.label || d.name || 'Unknown')))
+                ),
+                h('label', { class: 'cm-vsm-row' },
+                    h('span', { class: 'cm-vsm-row-label' }, 'Output'),
+                    h('select', {
+                        value: outputId,
+                        onchange: (e) => onOutputChange && onOutputChange(e.target.value)
+                    }, ...(devices.output || []).map(d => h('option', {
+                        value: d.deviceId || d.id,
+                        selected: (d.deviceId || d.id) === outputId ? 'selected' : null
+                    }, d.label || d.name || 'Unknown')))
+                ),
+                h('label', { class: 'cm-vsm-row' },
+                    h('span', { class: 'cm-vsm-row-label' }, 'Output volume'),
+                    h('input', {
+                        type: 'range', min: '0', max: '1', step: '0.01', value: String(volume),
+                        oninput: (e) => onVolumeChange && onVolumeChange(parseFloat(e.target.value))
+                    }),
+                    h('span', { class: 'cm-vsm-row-val' }, Math.round(volume * 100) + '%')
+                )
+            ),
+
+            h('div', { class: 'cm-vsm-section' },
+                h('div', { class: 'cm-vsm-section-label' }, 'Voice mode'),
+                h('div', { class: 'cm-vsm-radio' },
+                    ...modes.map(m => h('button', {
+                        class: 'cm-vsm-radio-btn' + (mode === m.id ? ' active' : ''),
+                        onclick: () => onModeChange && onModeChange(m.id),
+                        'data-mode': m.id
+                    }, m.label))
+                )
+            ),
+
+            h('div', { class: 'cm-vsm-section' },
+                h('div', { class: 'cm-vsm-section-label' }, 'Audio processing'),
+                h('label', { class: 'cm-vsm-row cm-vsm-toggle' },
+                    h('span', { class: 'cm-vsm-row-label' }, 'Noise suppression (RNNoise)'),
+                    h('input', {
+                        type: 'checkbox',
+                        checked: rnnoise ? 'checked' : null,
+                        onchange: (e) => onRnnoiseToggle && onRnnoiseToggle(e.target.checked)
+                    })
+                ),
+                h('label', { class: 'cm-vsm-row cm-vsm-toggle' },
+                    h('span', { class: 'cm-vsm-row-label' }, 'Auto gain control'),
+                    h('input', {
+                        type: 'checkbox',
+                        checked: autoGain ? 'checked' : null,
+                        onchange: (e) => onAutoGainToggle && onAutoGainToggle(e.target.checked)
+                    })
+                ),
+                h('label', { class: 'cm-vsm-row' },
+                    h('span', { class: 'cm-vsm-row-label' }, 'VAD threshold'),
+                    h('input', {
+                        type: 'range', min: '0', max: '1', step: '0.01', value: String(vadThreshold),
+                        oninput: (e) => onVadChange && onVadChange(parseFloat(e.target.value))
+                    }),
+                    h('span', { class: 'cm-vsm-row-val' }, vadThreshold.toFixed(2))
+                )
+            ),
+
+            h('div', { class: 'cm-vsm-section' },
+                h('div', { class: 'cm-vsm-section-label' }, 'Quality'),
+                h('label', { class: 'cm-vsm-row' },
+                    h('span', { class: 'cm-vsm-row-label' }, 'Bitrate'),
+                    h('input', {
+                        type: 'range', min: '8', max: '128', step: '1', value: String(bitrate),
+                        oninput: (e) => onBitrateChange && onBitrateChange(parseInt(e.target.value, 10))
+                    }),
+                    h('span', { class: 'cm-vsm-row-val' }, bitrate + ' kbps')
+                )
+            ),
+
+            h('div', { class: 'cm-vsm-section' },
+                h('div', { class: 'cm-vsm-section-label' }, 'Network'),
+                h('label', { class: 'cm-vsm-row cm-vsm-toggle' },
+                    h('span', { class: 'cm-vsm-row-label' }, 'Force TURN relay'),
+                    h('input', {
+                        type: 'checkbox',
+                        checked: forceTurn ? 'checked' : null,
+                        onchange: (e) => onForceTurnToggle && onForceTurnToggle(e.target.checked)
+                    })
+                )
+            ),
+
+            isAdmin ? h('div', { class: 'cm-vsm-section cm-vsm-admin' },
+                h('div', { class: 'cm-vsm-section-label' }, 'Channel admin'),
+                h('div', { class: 'cm-vsm-row' },
+                    h('span', { class: 'cm-vsm-row-label' }, 'Channel mode'),
+                    h('div', { class: 'cm-vsm-radio' },
+                        ...channelModes.map(m => h('button', {
+                            class: 'cm-vsm-radio-btn' + (channelMode === m.id ? ' active' : ''),
+                            onclick: () => onChannelModeChange && onChannelModeChange(m.id),
+                            'data-mode': m.id
+                        }, m.label))
+                    )
+                ),
+                allowedRoles != null ? h('div', { class: 'cm-vsm-row' },
+                    h('span', { class: 'cm-vsm-row-label' }, 'Allowed roles'),
+                    h('span', { class: 'cm-vsm-row-val' }, Array.isArray(allowedRoles) ? allowedRoles.join(', ') || '(any)' : String(allowedRoles))
+                ) : null
+            ) : null,
+
+            h('div', { class: 'cm-vsm-actions' },
+                h('button', { class: 'cm-vsm-cancel', onclick: onCancel }, 'Cancel'),
+                h('button', { class: 'cm-vsm-save', onclick: onSave }, 'Save')
+            )
+        )
+    );
+}

package/src/components/voice.js

@@ -0,0 +1,132 @@
+// Voice / audio / video surface — pure factories.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+export function PttButton({ state = 'idle', mode = 'ptt', onHoldStart, onHoldEnd, onClick, label } = {}) {
+    const cls = 'cm-ptt-button mode-' + mode + ' ' + state;
+    const hold = (fn) => fn ? (e) => { e.preventDefault(); fn(e); } : null;
+    return h('button', {
+        class: cls,
+        'data-state': state,
+        'data-mode': mode,
+        onmousedown: hold(onHoldStart),
+        onmouseup: hold(onHoldEnd),
+        onmouseleave: hold(onHoldEnd),
+        ontouchstart: hold(onHoldStart),
+        ontouchend: hold(onHoldEnd),
+        ontouchcancel: hold(onHoldEnd),
+        onclick: onClick
+    },
+        h('span', { class: 'cm-ptt-dot' }),
+        h('span', { class: 'cm-ptt-label' }, label || (mode === 'realtime' ? (state === 'realtime' ? 'Live' : 'Go live') : (state === 'live' ? 'Talking' : 'Hold to talk')))
+    );
+}
+
+export function VadMeter({ level = 0, threshold = 0.15, onThresholdChange, height = 24, width = 200 } = {}) {
+    const clamp = (n) => Math.max(0, Math.min(1, n));
+    const lv = clamp(level);
+    const th = clamp(threshold);
+    const onPick = onThresholdChange ? (e) => {
+        const r = e.currentTarget.getBoundingClientRect();
+        const x = (e.clientX - r.left) / r.width;
+        onThresholdChange(clamp(x));
+    } : null;
+    return h('div', { class: 'cm-vad-meter', style: `width:${width}px;height:${height}px;` },
+        h('div', { class: 'cm-vad-track' },
+            h('div', { class: 'cm-vad-bar' + (lv >= th ? ' active' : ''), style: `width:${lv * 100}%;` }),
+            h('div', { class: 'cm-vad-threshold', style: `left:${th * 100}%;` }),
+            h('div', { class: 'cm-vad-hit', onclick: onPick, onmousedown: onPick })
+        )
+    );
+}
+
+export function WebcamPreview({ videoStream, resolution = '320x240', fps = 15, resolutions = [], fpsOptions = [], onResolutionChange, onFpsChange, onToggle, enabled } = {}) {
+    const ref = (el) => { if (el && videoStream && el.srcObject !== videoStream) el.srcObject = videoStream; };
+    return h('div', { class: 'cm-webcam-preview' + (enabled ? ' enabled' : ' disabled') },
+        h('video', { class: 'cm-wc-video', autoplay: true, muted: true, playsinline: true, ref }),
+        h('div', { class: 'cm-wc-controls' },
+            h('select', {
+                class: 'cm-wc-select',
+                value: resolution,
+                onchange: (e) => onResolutionChange && onResolutionChange(e.currentTarget.value)
+            }, ...resolutions.map(r => h('option', { value: r, selected: r === resolution }, r))),
+            h('select', {
+                class: 'cm-wc-select',
+                value: String(fps),
+                onchange: (e) => onFpsChange && onFpsChange(Number(e.currentTarget.value))
+            }, ...fpsOptions.map(f => h('option', { value: String(f), selected: Number(f) === Number(fps) }, `${f} fps`))),
+            h('button', {
+                class: 'cm-wc-toggle' + (enabled ? ' on' : ''),
+                onclick: onToggle,
+                title: enabled ? 'Disable camera' : 'Enable camera'
+            }, enabled ? '📷 On' : '📷 Off')
+        )
+    );
+}
+
+export function AudioQueue({ segments = [], currentSegmentId, onReplay, onSkip, onResume, onPause, paused } = {}) {
+    return h('div', { class: 'cm-audio-queue' },
+        h('div', { class: 'cm-aq-header' },
+            h('span', { class: 'cm-aq-title' }, `Queue (${segments.length})`),
+            h('button', {
+                class: 'cm-aq-pause',
+                onclick: paused ? onResume : onPause,
+                title: paused ? 'Resume' : 'Pause'
+            }, paused ? '▶' : '❚❚')
+        ),
+        h('div', { class: 'cm-aq-list' },
+            ...segments.map(seg => h('div', {
+                class: 'cm-aq-item' + (seg.id === currentSegmentId ? ' current' : '') + (seg.isLive ? ' live' : ''),
+                key: seg.id,
+                'data-id': seg.id
+            },
+                h('span', { class: 'cm-aq-dot', style: seg.color ? `background:${seg.color}` : '' }),
+                h('span', { class: 'cm-aq-speaker' }, seg.speaker || '?'),
+                h('span', { class: 'cm-aq-dur' }, seg.duration != null ? `${Number(seg.duration).toFixed(1)}s` : ''),
+                seg.isLive ? h('span', { class: 'cm-aq-live-tag' }, 'LIVE') : null,
+                h('button', { class: 'cm-aq-replay', onclick: () => onReplay && onReplay(seg.id), title: 'Replay' }, '↺'),
+                h('button', { class: 'cm-aq-skip', onclick: () => onSkip && onSkip(seg.id), title: 'Skip' }, '⏭')
+            ))
+        )
+    );
+}
+
+export function VoiceControls({ muted, deafened, cameraOn, screenShareOn, onMic, onDeafen, onCamera, onScreenShare, onSettings, onLeave } = {}) {
+    return h('div', { class: 'cm-voice-controls' },
+        h('button', { class: 'cm-vc-btn' + (muted ? ' muted' : ''), onclick: onMic, title: muted ? 'Unmute' : 'Mute' }, muted ? '🔇' : '🎤'),
+        h('button', { class: 'cm-vc-btn' + (deafened ? ' deafened' : ''), onclick: onDeafen, title: deafened ? 'Undeafen' : 'Deafen' }, deafened ? '🔕' : '🎧'),
+        h('button', { class: 'cm-vc-btn' + (cameraOn ? ' active' : ''), onclick: onCamera, title: cameraOn ? 'Camera off' : 'Camera on' }, '📷'),
+        h('button', { class: 'cm-vc-btn' + (screenShareOn ? ' active' : ''), onclick: onScreenShare, title: screenShareOn ? 'Stop share' : 'Share screen' }, '🖥'),
+        h('button', { class: 'cm-vc-btn', onclick: onSettings, title: 'Voice settings' }, '⚙'),
+        h('button', { class: 'cm-vc-btn danger', onclick: onLeave, title: 'Leave voice' }, '✕')
+    );
+}
+
+export function MicMonitor({ rawLevel = 0, processedLevel = 0, label } = {}) {
+    const clamp = (n) => Math.max(0, Math.min(1, n));
+    const r = clamp(rawLevel), p = clamp(processedLevel);
+    return h('div', { class: 'cm-mic-monitor' },
+        label ? h('div', { class: 'cm-mm-label' }, label) : null,
+        h('div', { class: 'cm-mm-row' },
+            h('span', { class: 'cm-mm-cap' }, 'raw'),
+            h('div', { class: 'cm-mm-bar raw', style: `width:${r * 100}%;` })
+        ),
+        h('div', { class: 'cm-mm-row' },
+            h('span', { class: 'cm-mm-cap' }, 'proc'),
+            h('div', { class: 'cm-mm-bar processed', style: `width:${p * 100}%;` })
+        )
+    );
+}
+
+export function VideoLightbox({ src, label, open, onClose } = {}) {
+    if (!open) return null;
+    return h('div', { class: 'cm-video-lightbox' },
+        h('div', { class: 'cm-vl-backdrop', onclick: onClose }),
+        h('div', { class: 'cm-vl-content' },
+            h('button', { class: 'cm-vl-close', onclick: onClose, title: 'Close' }, '✕'),
+            label ? h('div', { class: 'cm-vl-label' }, label) : null,
+            h('video', { class: 'cm-vl-video', src, controls: true, autoplay: true, playsinline: true })
+        )
+    );
+}

package/src/components.js

@@ -42,6 +42,11 @@ export {
     ChatHeader, VoiceStrip, CommunityShell
 } from './components/community.js';
 
+export {
+    PttButton, VadMeter, WebcamPreview, AudioQueue,
+    VoiceControls, MicMonitor, VideoLightbox
+} from './components/voice.js';
+
 export { ThemeToggle } from './components/theme-toggle.js';
 
 export {
@@ -49,6 +54,11 @@ export {
     ContextMenu, CommandPalette, EmojiPicker, ReplyBar
 } from './components/overlays.js';
 
+export {
+    ThreadPanel, ForumView, PageView,
+    AuthModal, SettingsPopover, VoiceSettingsModal
+} from './components/surfaces.js';
+
 export {
     FREDDIE_PAGES,
     home, chat, voice, sessions, projects, agents, analytics,