anentrypoint-design 0.0.121 → 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' }, '✕')
-    );
-}