anentrypoint-design 0.0.145 → 0.0.147

package/src/components/overlay-primitives.js

@@ -303,11 +303,12 @@ export function CommandPalette({ open, items = [], onSelect, onClose } = {}) {
         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',
+                'aria-label': 'command search',
+                'aria-controls': 'ov-cmd-list',
                 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',
+            h('div', { class: 'ov-cmd-list', id: 'ov-cmd-list', role: 'listbox',
                 ref: (el) => { if (!el) return; listEl = el; queueMicrotask(renderInner); } })
         )
     );
@@ -462,3 +463,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/shell.js

@@ -43,8 +43,26 @@ export function Btn({ href = '#', variant = 'default', children, onClick, 'aria-
     }, children);
 }
 
-export function Glyph({ children, color }) {
-    return h('span', { class: 'glyph', style: color ? `color:${color}` : '' }, children);
+export function IconButton({ icon, onClick, title, size = 'base', variant = 'ghost', disabled = false }) {
+    const cls = 'ds-icon-btn ds-icon-btn-' + variant + ' ds-icon-btn-' + size + (disabled ? ' is-disabled' : '');
+    return h('button', {
+        type: 'button',
+        class: cls,
+        title,
+        'aria-label': title,
+        disabled: disabled ? true : null,
+        onclick: (e) => { if (disabled) { e.preventDefault(); return; } if (onClick) onClick(e); }
+    }, Glyph({ children: icon, size }));
+}
+
+export function Badge({ children, variant = 'default', tone = 'neutral' }) {
+    return h('span', { class: 'ds-badge ds-badge-' + variant + ' tone-' + tone }, children);
+}
+
+export function Glyph({ children, color, size = 'base' }) {
+    const fontSize = size === 'sm' ? '11px' : (size === 'lg' ? '16px' : '13px');
+    const style = `font-size:${fontSize}` + (color ? `;color:${color}` : '');
+    return h('span', { class: 'glyph', style }, children);
 }
 
 export function Topbar({ brand = '247420', leaf = '', items = [], active = '', onNav, search } = {}) {
@@ -113,23 +131,40 @@ export function Status({ left = [], right = [] } = {}) {
     );
 }
 
+// Toggle the mobile sidebar drawer. Pure-DOM because AppShell is stateless
+// chrome; the class lives on .app-body and is read by the ≤900px media query.
+function toggleSide(open) {
+    const body = document.querySelector('.app-body');
+    if (!body) return;
+    const next = open != null ? open : !body.classList.contains('side-open');
+    body.classList.toggle('side-open', next);
+    const btn = document.querySelector('.app-side-toggle');
+    if (btn) btn.setAttribute('aria-expanded', next ? 'true' : 'false');
+}
+
 export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
     const hasSide = Boolean(side);
     const sideNode = hasSide ? side : h('aside', { class: 'app-side', 'aria-hidden': 'true' });
     return h('div', { class: 'app' },
         h('a', { href: '#app-main', class: 'skip-link' }, 'skip to main content'),
+        hasSide ? h('button', {
+            class: 'app-side-toggle', type: 'button',
+            'aria-label': 'toggle navigation', 'aria-expanded': 'false', 'aria-controls': 'app-main',
+            onclick: () => toggleSide(),
+        }, '☰') : null,
         topbar || null,
         crumb || null,
         h('div', { class: 'app-body' + (hasSide ? '' : ' no-side') },
-            h('div', { class: 'app-side-shell' }, sideNode),
+            h('div', { class: 'app-side-scrim', 'aria-hidden': 'true', onclick: () => toggleSide(false) }),
+            h('div', { class: 'app-side-shell', onclick: (e) => { if (e.target.closest('a')) toggleSide(false); } }, sideNode),
             h('main', { class: 'app-main' + (narrow ? ' narrow' : ''), id: 'app-main' }, ...(Array.isArray(main) ? main : [main]))
         ),
         status || null
     );
 }
 
-export function Heading({ level = 1, children, style = '' }) {
-    return h('h' + level, { style }, children);
+export function Heading({ level = 1, children, style = '', 'aria-level': ariaLevel }) {
+    return h('h' + level, { style, 'aria-level': ariaLevel != null ? String(ariaLevel) : null }, children);
 }
 
 export function Lede({ children }) {

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

@@ -4,13 +4,13 @@ import * as webjsx from '../vendor/webjsx/index.js';
 export const h = webjsx.createElement;
 
 export {
-    Brand, Chip, Btn, Glyph,
+    Brand, Chip, Btn, Glyph, IconButton, Badge,
     Topbar, Crumb, Side, Status, AppShell,
     Heading, Lede, Dot, Rail
 } from './components/shell.js';
 
 export {
-    Panel, Row, RowLink,
+    Panel, Card, Row, RowLink,
     Hero, Install, Receipt, Changelog,
     WorksList, WritingList, Manifesto, Section, PageHeader,
     Kpi, Table, SearchInput, TextField, Select, EventList,
@@ -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 {

package/src/kits/os/freddie/pages-chat.js

@@ -134,7 +134,7 @@ export function makeChatPage(ctx) {
                 ? Panel({ title: 'no providers configured', children: Receipt({ rows: [
                     ['set API key', 'go to keys tab, click a provider chip to set its key'],
                     ['then reload', 'refresh this page to see providers here'],
-                    ['or use acptoapi', 'run acptoapi server on localhost:4800 for local LLMs'],
+                    ['or use a gateway', 'run a gateway server on localhost:4800 for local LLMs'],
                 ] }) })
                 : Panel({ title: 'configured providers', children: h('div', { class: 'fd-chip-wrap' },
                     ...providers.map(p => Chip({ tone: p.configured ? (p.available ? 'ok' : 'warn') : 'miss', children: p.name + (p.configured ? (p.available ? ' ●' : ' ○') : '') }))) }),

package/src/kits/os/freddie/pages-core.js

@@ -45,7 +45,7 @@ export function makeCorePages(ctx) {
             const skills = h0.pi.skills.size;
             const health = (typeof h0.pi.health === 'function') ? h0.pi.health() : { ok: true };
             return [
-                Hero({ title: 'freddie', body: 'open js agent harness — pi-mono · xstate · floosie · anentrypoint-design.', accent: h0.version || 'web' }),
+                Hero({ title: 'assistant', body: 'open js agent harness — in-page agent runtime.', accent: h0.version || 'web' }),
                 Kpi({ items: [[sessions.length, 'sessions'], [tools, 'tools'], [skills, 'skills']] }),
                 Panel({ title: 'quick start', children: Receipt({ rows: [
                     ['open chat',   "click 'chat' in sidebar — set a working directory and pick a skill"],

package/src/kits/os/freddie-dashboard.js

@@ -42,7 +42,7 @@ export function createFreddieDashboard({ instance, bootHost, osSurfaces, loading
 
     function buildSide() {
         const sections = [{
-            group: 'FREDDIE',
+            group: 'ASSISTANT',
             items: ROUTES.map(r => ({
                 glyph: r.glyph, label: r.label, href: '#fd-' + r.path,
                 active: state.active === r.path,
@@ -63,8 +63,8 @@ export function createFreddieDashboard({ instance, bootHost, osSurfaces, loading
     function view() {
         const route = allRoutes.find(r => r.path === state.active) || ROUTES[1];
         return AppShell({
-            topbar: Topbar({ brand: 'freddie', leaf: 'dashboard', items: [], active: '' }),
-            crumb: Crumb({ trail: ['freddie', instance.id], leaf: route.path, right: state.error ? Chip({ tone: 'miss', children: 'error' }) : Chip({ tone: 'ok', children: 'live' }) }),
+            topbar: Topbar({ brand: 'assistant', leaf: 'dashboard', items: [], active: '' }),
+            crumb: Crumb({ trail: ['assistant', instance.id], leaf: route.path, right: state.error ? Chip({ tone: 'miss', children: 'error' }) : Chip({ tone: 'ok', children: 'live' }) }),
             side: buildSide(),
             main: state.body || EmptyState({ text: loadingText || 'loading…', glyph: '◌' }),
             status: Status({ left: ['ds-247420 · webjsx · ' + allRoutes.length + ' routes', 'instance=' + instance.id], right: [state.ts] }),

package/src/kits/os/shell.js

@@ -39,6 +39,8 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
 
     const menubar = document.createElement('div');
     menubar.className = 'os-menubar';
+    menubar.setAttribute('role', 'menubar');
+    menubar.setAttribute('aria-label', 'Desktop menu bar');
 
     const homeBtn = makeBtn(icons.home, '', 'home');
     homeBtn.title = 'apps';