anentrypoint-design 0.0.145 → 0.0.146

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.145",
+  "version": "0.0.146",
   "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

@@ -279,6 +279,106 @@ export function Banner({ tone = 'info', message, visible, actionLabel, onAction,
     );
 }
 
+function fmtRelTime(ts) {
+    const t = Number(ts) || 0;
+    if (!t) return '';
+    const ms = t > 1e12 ? t : t * 1000;
+    const d = Math.max(0, Date.now() - ms);
+    const m = Math.floor(d / 60000);
+    if (m < 1) return 'now';
+    if (m < 60) return m + 'm';
+    const hr = Math.floor(m / 60);
+    if (hr < 24) return hr + 'h';
+    return Math.floor(hr / 24) + 'd';
+}
+
+export function ThreadPanel({ threads = [], activeId = null, title = 'Threads', onSelect, onCreate, onClose } = {}) {
+    const list = Array.isArray(threads) ? threads : [];
+    return h('div', { class: 'cm-thread-panel', role: 'complementary', 'aria-label': title },
+        h('div', { class: 'cm-tp-head' },
+            h('span', { class: 'cm-tp-title' }, title),
+            h('div', { class: 'cm-tp-head-actions' },
+                onCreate ? h('button', { type: 'button', class: 'cm-tp-new', 'aria-label': 'new thread', title: 'New thread', onclick: onCreate }, '+') : null,
+                onClose ? h('button', { type: 'button', class: 'cm-tp-close', 'aria-label': 'close', title: 'Close', onclick: onClose }, '✕') : null
+            )
+        ),
+        h('div', { class: 'cm-tp-list' },
+            list.length
+                ? list.map(t => h('button', {
+                    type: 'button', key: 'tp-' + t.id,
+                    class: 'cm-tp-item' + (t.id === activeId ? ' is-active' : '') + (t.unread ? ' is-unread' : ''),
+                    onclick: () => onSelect && onSelect(t.id)
+                },
+                    t.unread ? h('span', { class: 'cm-tp-dot', 'aria-hidden': 'true' }) : null,
+                    h('span', { class: 'cm-tp-item-title' }, t.title || '(untitled)'),
+                    t.lastMessage ? h('span', { class: 'cm-tp-item-snippet' }, t.lastMessage) : null,
+                    h('span', { class: 'cm-tp-item-meta' },
+                        t.author ? h('span', { class: 'cm-tp-item-author' }, t.author) : null,
+                        t.time ? h('span', { class: 'cm-tp-item-time' }, fmtRelTime(t.time)) : null
+                    )
+                ))
+                : h('div', { class: 'cm-tp-empty' }, 'No threads yet')
+        )
+    );
+}
+
+export function ForumView({ posts = [], onSearch, onSort, onSelect, onNewPost } = {}) {
+    const list = Array.isArray(posts) ? posts : [];
+    return h('div', { class: 'cm-forum', role: 'region', 'aria-label': 'forum' },
+        h('div', { class: 'cm-forum-toolbar' },
+            h('input', {
+                type: 'search', class: 'cm-forum-search', placeholder: 'Search posts…',
+                'aria-label': 'search posts',
+                oninput: onSearch ? (e) => onSearch(e.target.value) : null
+            }),
+            h('select', {
+                class: 'cm-forum-sort', 'aria-label': 'sort posts',
+                onchange: onSort ? (e) => onSort(e.target.value) : null
+            },
+                h('option', { value: 'recent' }, 'Recent'),
+                h('option', { value: 'replies' }, 'Most replies'),
+                h('option', { value: 'oldest' }, 'Oldest')
+            ),
+            onNewPost ? h('button', { type: 'button', class: 'cm-forum-new', onclick: onNewPost }, 'New post') : null
+        ),
+        h('div', { class: 'cm-forum-list' },
+            list.length
+                ? list.map(p => h('button', {
+                    type: 'button', key: 'fp-' + p.id, class: 'cm-forum-item',
+                    onclick: () => onSelect && onSelect(p.id)
+                },
+                    h('div', { class: 'cm-forum-item-head' },
+                        h('span', { class: 'cm-forum-item-title' }, p.title || '(untitled)'),
+                        h('span', { class: 'cm-forum-item-replies' }, (Number(p.replyCount) || 0) + ' ▸')
+                    ),
+                    p.snippet ? h('div', { class: 'cm-forum-item-snippet' }, p.snippet) : null,
+                    h('div', { class: 'cm-forum-item-meta' },
+                        p.author ? h('span', { class: 'cm-forum-item-author' }, p.author) : null,
+                        p.time ? h('span', { class: 'cm-forum-item-time' }, fmtRelTime(p.time)) : null,
+                        Array.isArray(p.tags) && p.tags.length
+                            ? h('span', { class: 'cm-forum-item-tags' }, ...p.tags.map((tag, i) =>
+                                h('span', { class: 'cm-forum-tag', key: 'tg-' + i }, tag)))
+                            : null
+                    )
+                ))
+                : h('div', { class: 'cm-forum-empty' }, 'No posts yet')
+        )
+    );
+}
+
+export function PageView({ title = '', html = '', isAdmin = false, onEdit } = {}) {
+    return h('div', { class: 'cm-page', role: 'document' },
+        h('div', { class: 'cm-page-head' },
+            h('h1', { class: 'cm-page-title' }, title || ''),
+            isAdmin && onEdit ? h('button', { type: 'button', class: 'cm-page-edit', onclick: onEdit }, 'Edit') : null
+        ),
+        h('div', {
+            class: 'cm-page-body',
+            ref: (el) => { if (el) el.innerHTML = html || '<p class="cm-page-empty">This page is empty.</p>'; }
+        })
+    );
+}
+
 export function CommunityShell({ serverRailProps, sidebarProps, children, memberListProps, voiceStripProps } = {}) {
     return h('div', { class: 'cm-shell' },
         serverRailProps ? ServerRail(serverRailProps) : null,

package/src/components/overlay-primitives.js

@@ -462,3 +462,91 @@ export function SettingsPopover({ title = 'Settings', open, anchorX = 0, anchorY
             }))
     );
 }
+
+// AuthModal — centered login dialog: extension / generate / import (nsec) modes.
+export function AuthModal({ mode = 'extension', error = '', busy = false, open = false, onModeChange, onConnectExtension, onGenerate, onImport, onClose } = {}) {
+    if (!open) return null;
+    const close = () => onClose && onClose();
+    const modes = [
+        { id: 'extension', label: 'Extension' },
+        { id: 'generate', label: 'Generate' },
+        { id: 'import', label: 'Import key' },
+    ];
+    let nsec = '';
+    const body = () => {
+        if (mode === 'generate') {
+            return [
+                h('p', { class: 'ov-auth-hint' }, 'Create a fresh Nostr identity. Back up the key after.'),
+                h('button', { type: 'button', class: 'ov-auth-primary', disabled: busy ? true : null,
+                    onclick: () => onGenerate && onGenerate() }, busy ? 'Working…' : 'Generate new key'),
+            ];
+        }
+        if (mode === 'import') {
+            return [
+                h('p', { class: 'ov-auth-hint' }, 'Paste an existing nsec / hex secret key.'),
+                h('input', {
+                    type: 'password', class: 'ov-auth-input', placeholder: 'nsec1…',
+                    'aria-label': 'secret key', disabled: busy ? true : null,
+                    oninput: (e) => { nsec = e.target.value; },
+                    onkeydown: (e) => { if (e.key === 'Enter') { e.preventDefault(); onImport && onImport(nsec); } },
+                }),
+                h('button', { type: 'button', class: 'ov-auth-primary', disabled: busy ? true : null,
+                    onclick: () => onImport && onImport(nsec) }, busy ? 'Working…' : 'Import'),
+            ];
+        }
+        return [
+            h('p', { class: 'ov-auth-hint' }, 'Connect a NIP-07 browser extension (Alby, nos2x…).'),
+            h('button', { type: 'button', class: 'ov-auth-primary', disabled: busy ? true : null,
+                onclick: () => onConnectExtension && onConnectExtension() }, busy ? 'Connecting…' : 'Connect extension'),
+        ];
+    };
+    return h('div', {
+        class: 'ov-auth-backdrop', role: 'presentation',
+        ref: (el) => {
+            if (!el || el._ovAuth) return; el._ovAuth = true;
+            el.addEventListener('mousedown', (e) => {
+                const panel = el.querySelector('.ov-auth-panel');
+                if (panel && !panel.contains(e.target)) close();
+            });
+        },
+    },
+        h('div', {
+            class: 'ov-auth-panel', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Sign in',
+            onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); } },
+        },
+            h('div', { class: 'ov-auth-head' },
+                h('h2', { class: 'ov-auth-title' }, 'Sign in'),
+                h('button', { type: 'button', class: 'ov-auth-x', 'aria-label': 'close', onclick: close }, '×')
+            ),
+            h('div', { class: 'ov-auth-tabs', role: 'tablist' },
+                ...modes.map(m => h('button', {
+                    type: 'button', role: 'tab', key: 'am-' + m.id,
+                    class: 'ov-auth-tab' + (m.id === mode ? ' is-active' : ''),
+                    'aria-selected': m.id === mode ? 'true' : 'false',
+                    onclick: () => onModeChange && onModeChange(m.id),
+                }, m.label))
+            ),
+            h('div', { class: 'ov-auth-body' }, ...body()),
+            error ? h('div', { class: 'ov-auth-error', role: 'alert' }, String(error)) : null
+        )
+    );
+}
+
+// VideoLightbox — fullscreen video player overlay with backdrop dismiss.
+export function VideoLightbox({ src, label = '', open = false, onClose } = {}) {
+    if (!open || !src) return null;
+    const close = () => onClose && onClose();
+    return h('div', {
+        class: 'ov-lightbox-backdrop', role: 'dialog', 'aria-modal': 'true', 'aria-label': label || 'Video',
+        tabindex: '-1',
+        onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); } },
+        ref: (el) => { if (el && !el._ovLb) { el._ovLb = true; queueMicrotask(() => el.focus()); } },
+        onmousedown: (e) => { if (e.target === e.currentTarget) close(); },
+    },
+        h('button', { type: 'button', class: 'ov-lightbox-x', 'aria-label': 'close', onclick: close }, '×'),
+        h('div', { class: 'ov-lightbox-stage' },
+            h('video', { class: 'ov-lightbox-video', src, controls: true, autoplay: true, playsinline: true }),
+            label ? h('div', { class: 'ov-lightbox-label' }, label) : null
+        )
+    );
+}

package/src/components/voice.js

@@ -192,6 +192,31 @@ export function VoiceSettingsModal({ open = false, mode = 'ptt', inputId, output
     );
 }
 
+export function VoiceControls({ muted = false, deafened = false, cameraOn = false, screenShareOn = false, onMic, onDeafen, onCamera, onScreenShare, onSettings, onLeave } = {}) {
+    const btn = (cls, on, label, glyph, handler) => h('button', {
+        type: 'button',
+        class: 'vx-vc-btn ' + cls + (on ? ' vx-vc-on' : '') + (handler ? '' : ' vx-vc-disabled'),
+        'aria-pressed': on ? 'true' : 'false',
+        'aria-label': label,
+        title: label,
+        disabled: handler ? null : true,
+        onclick: handler ? (e) => handler(e) : null
+    },
+        h('span', { class: 'vx-vc-glyph', 'aria-hidden': 'true' }, glyph)
+    );
+    return h('div', { class: 'vx-vc', role: 'toolbar', 'aria-label': 'voice controls' },
+        btn('vx-vc-mic', !muted, muted ? 'Unmute' : 'Mute', muted ? '🔇' : '🎙', onMic),
+        btn('vx-vc-deafen', !deafened, deafened ? 'Undeafen' : 'Deafen', deafened ? '🔕' : '🔊', onDeafen),
+        btn('vx-vc-camera', cameraOn, cameraOn ? 'Stop camera' : 'Start camera', '📷', onCamera),
+        btn('vx-vc-screen', screenShareOn, screenShareOn ? 'Stop sharing' : 'Share screen', '🖥', onScreenShare),
+        btn('vx-vc-settings', false, 'Voice settings', '⚙', onSettings),
+        h('button', {
+            type: 'button', class: 'vx-vc-btn vx-vc-leave', 'aria-label': 'Leave voice', title: 'Leave voice',
+            onclick: onLeave ? (e) => onLeave(e) : null
+        }, h('span', { class: 'vx-vc-glyph', 'aria-hidden': 'true' }, '📞'))
+    );
+}
+
 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' },

package/src/components.js

@@ -41,11 +41,12 @@ export {
     VoiceUser, UserPanel, ChannelSidebar,
     MemberItem, MemberList,
     ChatHeader, VoiceStrip, CommunityShell,
-    MobileHeader, ReplyBar, Banner
+    MobileHeader, ReplyBar, Banner,
+    ThreadPanel, ForumView, PageView
 } from './components/community.js';
 
 export {
-    PttButton, VadMeter, WebcamPreview, VoiceSettingsModal, AudioQueue
+    PttButton, VadMeter, WebcamPreview, VoiceSettingsModal, AudioQueue, VoiceControls
 } from './components/voice.js';
 
 export { ThemeToggle } from './components/theme-toggle.js';
@@ -75,7 +76,8 @@ export {
 
 export {
     Tooltip, Popover, Dropdown, useLongPress, useFloating,
-    CommandPalette, EmojiPicker, BootOverlay, SettingsPopover
+    CommandPalette, EmojiPicker, BootOverlay, SettingsPopover,
+    AuthModal, VideoLightbox
 } from './components/overlay-primitives.js';
 
 export {