anentrypoint-design 0.0.122 → 0.0.124

package/src/components/overlays.js

@@ -1,151 +0,0 @@
-// Overlay surface — toast, banner, mobile header, drawer, boot splash,
-// context menu, command palette, emoji picker, reply bar.
-// All factories: props → vnode. No internal state, no lifecycle (refs OK).
-
-import * as webjsx from '../../vendor/webjsx/index.js';
-const h = webjsx.createElement;
-
-export function Toast({ message, tone = 'info', visible } = {}) {
-    if (!visible) return null;
-    return h('div', { class: `cm-toast tone-${tone}`, role: 'status' },
-        h('span', { class: 'cm-toast-msg' }, message || '')
-    );
-}
-
-export function Banner({ tone = 'info', message, action, onAction, visible, dismissable, onDismiss } = {}) {
-    if (!visible) return null;
-    return h('div', { class: `cm-banner tone-${tone}`, role: 'alert' },
-        h('span', { class: 'cm-banner-msg' }, message || ''),
-        action ? h('button', {
-            class: 'cm-banner-action',
-            onclick: onAction,
-            title: action.label || ''
-        }, action.icon ? h('span', { class: 'cm-banner-action-icon' }, action.icon) : null, action.label || '') : null,
-        dismissable ? h('button', { class: 'cm-banner-dismiss', onclick: onDismiss, title: 'Dismiss' }, '✕') : null
-    );
-}
-
-export function MobileHeader({ title, onMenu, onMembers } = {}) {
-    return h('div', { class: 'cm-mobile-header' },
-        h('button', { class: 'cm-mh-btn', onclick: onMenu, title: 'Menu' }, '☰'),
-        h('span', { class: 'cm-mh-title' }, title || ''),
-        h('button', { class: 'cm-mh-btn', onclick: onMembers, title: 'Members' }, '👥')
-    );
-}
-
-export function DrawerOverlay({ open, onClose, children, side = 'left' } = {}) {
-    if (!open) return null;
-    return h('div', { class: 'cm-drawer-overlay' },
-        h('div', { class: 'cm-drawer-backdrop', onclick: onClose }),
-        h('div', {
-            class: `cm-drawer-content side-${side}`,
-            onclick: (e) => e.stopPropagation()
-        }, ...(Array.isArray(children) ? children : [children]))
-    );
-}
-
-export function BootOverlay({ progress = 0, phase, error, visible } = {}) {
-    if (!visible) return null;
-    const pct = Math.max(0, Math.min(1, progress)) * 100;
-    return h('div', { class: 'cm-boot-overlay', role: 'dialog' },
-        h('div', { class: 'cm-boot-spinner' }),
-        h('div', { class: 'cm-boot-phase' }, phase || 'Loading…'),
-        h('div', { class: 'cm-boot-progress' },
-            h('div', { class: 'cm-boot-bar', style: `width:${pct}%` })
-        ),
-        error ? h('div', { class: 'cm-boot-error' }, String(error)) : null
-    );
-}
-
-export function ContextMenu({ items = [], x = 0, y = 0, open, onClose } = {}) {
-    if (!open) return null;
-    return h('div', {
-        class: 'cm-context-menu',
-        style: `left:${x}px;top:${y}px`,
-        onclick: (e) => e.stopPropagation()
-    },
-        h('div', { class: 'cm-cm-list' },
-            ...items.map(it => it.separator
-                ? h('div', { class: 'cm-cm-sep', key: it.id || 'sep' })
-                : h('button', {
-                    class: 'cm-cm-item' + (it.danger ? ' danger' : ''),
-                    'data-id': it.id || '',
-                    onclick: (e) => { e.stopPropagation(); it.onClick && it.onClick(e); onClose && onClose(); }
-                },
-                    it.icon ? h('span', { class: 'cm-cm-icon' }, it.icon) : null,
-                    h('span', { class: 'cm-cm-label' }, it.label || '')
-                )
-            )
-        )
-    );
-}
-
-export function CommandPalette({ items = [], query = '', onQuery, onSelect, open, onClose } = {}) {
-    if (!open) return null;
-    return h('div', { class: 'cm-command-palette-wrap' },
-        h('div', { class: 'cm-command-palette-backdrop', onclick: onClose }),
-        h('div', { class: 'cm-command-palette', onclick: (e) => e.stopPropagation() },
-            h('input', {
-                class: 'cm-cp-input',
-                type: 'text',
-                placeholder: 'Type a command…',
-                value: query,
-                oninput: (e) => onQuery && onQuery(e.target.value),
-                autofocus: true
-            }),
-            h('div', { class: 'cm-cp-list' },
-                ...items.map((it, i) => h('button', {
-                    class: 'cm-cp-item' + (it.selected ? ' selected' : ''),
-                    'data-id': it.id || '',
-                    onclick: () => onSelect && onSelect(it, i)
-                },
-                    it.icon ? h('span', { class: 'cm-cp-icon' }, it.icon) : null,
-                    h('span', { class: 'cm-cp-label' }, it.label || ''),
-                    it.hint ? h('span', { class: 'cm-cp-hint' }, it.hint) : null
-                ))
-            )
-        )
-    );
-}
-
-const DEFAULT_EMOJI_CATEGORIES = [
-    { id: 'smileys', name: 'Smileys', emojis: ['😀','😃','😄','😁','😆','😅','🤣','😂','🙂','🙃','😉','😊','😇','🥰','😍','🤩','😘','😗','😚','😙','🥲','😋','😛','😜','🤪','😝','🤑','🤗','🤭','🤫'] },
-    { id: 'hearts', name: 'Hearts', emojis: ['❤️','🧡','💛','💚','💙','💜','🖤','🤍','🤎','💔','❣️','💕','💞','💓','💗','💖','💘','💝','💟','♥️','💌','💋','💍','💎','🌹','🌷','🌻','🌸','🌺','💐'] },
-    { id: 'animals', name: 'Animals', emojis: ['🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐨','🐯','🦁','🐮','🐷','🐸','🐵','🐔','🐧','🐦','🐤','🦆','🦅','🦉','🦇','🐺','🐗','🐴','🦄','🐝','🐛','🦋'] },
-    { id: 'food', name: 'Food', emojis: ['🍏','🍎','🍐','🍊','🍋','🍌','🍉','🍇','🍓','🫐','🍈','🍒','🍑','🥭','🍍','🥥','🥝','🍅','🍆','🥑','🥦','🥬','🥒','🌶️','🌽','🥕','🧄','🧅','🥔','🍞'] },
-    { id: 'activities', name: 'Activities', emojis: ['⚽','🏀','🏈','⚾','🥎','🎾','🏐','🏉','🎱','🪀','🏓','🏸','🥅','🏒','🏑','🥍','🏏','🪃','⛳','🪁','🏹','🎣','🤿','🥊','🥋','🎽','🛹','🛼','🛷','⛸️'] },
-    { id: 'symbols', name: 'Symbols', emojis: ['✅','❌','⭕','🚫','♻️','✳️','❇️','⚠️','🔱','⚜️','🔰','✴️','🆚','🆗','🆙','🆒','🆕','🆓','0️⃣','1️⃣','2️⃣','3️⃣','4️⃣','5️⃣','6️⃣','7️⃣','8️⃣','9️⃣','🔟','💯'] }
-];
-
-export function EmojiPicker({ recent = [], categories, onSelect, onClose, open } = {}) {
-    if (!open) return null;
-    const cats = categories && categories.length ? categories : DEFAULT_EMOJI_CATEGORIES;
-    return h('div', { class: 'cm-emoji-picker', onclick: (e) => e.stopPropagation() },
-        h('input', { class: 'cm-ep-search', type: 'text', placeholder: 'Search emoji…' }),
-        h('div', { class: 'cm-ep-grid' },
-            recent.length ? h('div', { class: 'cm-ep-category' }, 'Recent') : null,
-            ...recent.map((e, i) => h('button', {
-                class: 'cm-ep-btn', key: 'r' + i,
-                onclick: () => onSelect && onSelect(e)
-            }, e)),
-            ...cats.flatMap(cat => [
-                h('div', { class: 'cm-ep-category', key: 'c-' + cat.id }, cat.name),
-                ...cat.emojis.map((e, i) => h('button', {
-                    class: 'cm-ep-btn', key: cat.id + '-' + i,
-                    onclick: () => onSelect && onSelect(e)
-                }, e))
-            ])
-        )
-    );
-}
-
-export function ReplyBar({ quotedMessage, quotedAuthor, onCancel } = {}) {
-    return h('div', { class: 'cm-reply-bar' },
-        h('div', { class: 'cm-rb-quote' },
-            h('span', { class: 'cm-rb-label' }, 'Replying to '),
-            h('span', { class: 'cm-rb-author' }, quotedAuthor || ''),
-            h('span', { class: 'cm-rb-msg' }, quotedMessage ? ': ' + String(quotedMessage).slice(0, 80) : '')
-        ),
-        h('button', { class: 'cm-rb-cancel', onclick: onCancel, title: 'Cancel reply' }, '✕')
-    );
-}

package/src/components/surfaces.js

@@ -1,399 +0,0 @@
-// 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')
-            )
-        )
-    );
-}