anentrypoint-design 0.0.118 → 0.0.121

package/package.json

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

@@ -78,15 +78,28 @@ export function ChannelCategory({ id, name, channels = [], collapsed, activeId,
     );
 }
 
-export function VoiceUser({ identity, speaking, color } = {}) {
+export function VoiceUser({ identity, speaking, color, quality, videoStream } = {}) {
     const initial = (identity || '?').slice(0, 1).toUpperCase();
+    const q = quality || null;
+    const videoRef = videoStream ? (el) => {
+        if (el && el.srcObject !== videoStream) el.srcObject = videoStream;
+    } : null;
     return h('div', { class: 'cm-voice-user' + (speaking ? ' speaking' : '') },
-        h('div', { class: 'cm-voice-user-avatar', style: color ? `background:${color}` : '' }, initial),
+        h('div', { class: 'cm-voice-user-avatar', style: color ? `background:${color}` : '' },
+            videoStream ? h('video', {
+                class: 'cm-voice-user-video',
+                autoplay: true,
+                muted: true,
+                playsinline: true,
+                ref: videoRef
+            }) : initial,
+            q ? h('span', { class: `cm-voice-user-quality q-${q}`, title: `Connection: ${q}` }) : null
+        ),
         h('span', { class: 'cm-voice-user-name' }, identity)
     );
 }
 
-export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen, onSettings } = {}) {
+export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen, onSettings, extraButtons = [] } = {}) {
     const initial = (name || '?').slice(0, 1).toUpperCase();
     return h('div', { class: 'cm-user-panel' },
         h('div', { class: 'cm-user-avatar', style: color ? `background:${color}` : '' },
@@ -98,6 +111,11 @@ export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen,
             tag ? h('div', { class: 'cm-user-tag' }, tag) : null
         ),
         h('div', { class: 'cm-user-controls' },
+            ...extraButtons.map(b => h('button', {
+                class: 'cm-user-btn extra' + (b.active ? ' active' : ''),
+                onclick: b.onClick,
+                title: b.title || ''
+            }, b.icon || '·')),
             h('button', { class: 'cm-user-btn' + (muted ? ' muted' : ''), onclick: onMute, title: muted ? 'Unmute' : 'Mute' }, muted ? '🔇' : '🎤'),
             h('button', { class: 'cm-user-btn' + (deafened ? ' deafened' : ''), onclick: onDeafen, title: deafened ? 'Undeafen' : 'Deafen' }, deafened ? '🔕' : '🎧'),
             h('button', { class: 'cm-user-btn', onclick: onSettings, title: 'Settings' }, '⚙')

package/src/components/content.js

@@ -204,6 +204,62 @@ export function ProjectView({ project = {}, copied, onCopy } = {}) {
     ].filter(Boolean).flat();
 }
 
+export function PageHeader({ title, lede, eyebrow, right }) {
+    return h('section', { class: 'ds-section' },
+        eyebrow ? h('span', { class: 'eyebrow' }, eyebrow) : null,
+        title != null ? h('h1', {}, title) : null,
+        lede != null ? h('p', { class: 'lede' }, lede) : null,
+        right != null ? h('div', { class: 'ds-page-header-right' }, ...(Array.isArray(right) ? right : [right])) : null
+    );
+}
+
+export function SearchInput({ value = '', placeholder = 'search…', onInput, onSubmit, name = 'q', key }) {
+    return h('input', {
+        key,
+        type: 'search',
+        name,
+        class: 'ds-search-input',
+        placeholder,
+        value,
+        oninput: onInput ? (e) => onInput(e.target.value, e) : null,
+        onkeydown: onSubmit ? (e) => { if (e.key === 'Enter') onSubmit(e.target.value, e); } : null
+    });
+}
+
+export function TextField({ label, value = '', type = 'text', placeholder = '', onInput, onChange, name, key, hint, multiline, rows = 4 }) {
+    const input = multiline
+        ? h('textarea', {
+            key: 'i', name, rows, placeholder, value,
+            oninput: onInput ? (e) => onInput(e.target.value, e) : null,
+            onchange: onChange ? (e) => onChange(e.target.value, e) : null
+        })
+        : h('input', {
+            key: 'i', type, name, placeholder, value,
+            oninput: onInput ? (e) => onInput(e.target.value, e) : null,
+            onchange: onChange ? (e) => onChange(e.target.value, e) : null
+        });
+    return h('label', { key, class: 'ds-field' },
+        label != null ? h('span', { key: 'l', class: 'ds-field-label' }, label) : null,
+        input,
+        hint != null ? h('span', { key: 'h', class: 'lede ds-field-hint' }, hint) : null
+    );
+}
+
+export function EventList({ items = [], emptyText = 'no events', rankPad = 3 }) {
+    if (!items || !items.length) return h('p', { class: 'lede' }, emptyText);
+    return h('section', { class: 'ds-section ds-event-list' },
+        ...items.map((it, i) => Row({
+            key: it.key || ('ev' + i),
+            code: String(i + 1).padStart(rankPad, '0'),
+            title: it.title || '(empty)',
+            sub: it.sub || '',
+            active: it.active,
+            onClick: it.onClick,
+            kind: it.kind
+        }))
+    );
+}
+
 export function Form({ fields = [], submit = 'submit', onSubmit }) {
     return h('form', { class: 'row-form', onsubmit: (ev) => { ev.preventDefault(); onSubmit && onSubmit(ev); } },
         ...fields.map((f, i) => f.kind === 'textarea'

package/src/components/overlays.js

@@ -0,0 +1,151 @@
+// 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.js

@@ -12,8 +12,8 @@ export {
 export {
     Panel, Row, RowLink,
     Hero, Install, Receipt, Changelog,
-    WorksList, WritingList, Manifesto, Section,
-    Kpi, Table,
+    WorksList, WritingList, Manifesto, Section, PageHeader,
+    Kpi, Table, SearchInput, TextField, EventList,
     HomeView, ProjectView, Form
 } from './components/content.js';
 
@@ -44,6 +44,11 @@ export {
 
 export { ThemeToggle } from './components/theme-toggle.js';
 
+export {
+    Toast, Banner, MobileHeader, DrawerOverlay, BootOverlay,
+    ContextMenu, CommandPalette, EmojiPicker, ReplyBar
+} from './components/overlays.js';
+
 export {
     FREDDIE_PAGES,
     home, chat, voice, sessions, projects, agents, analytics,