anentrypoint-design 0.0.414 → 0.0.415

package/dist/src/components/chat.js

@@ -1,199 +1,47 @@
 // Chat surface — matches upstream signatures (parts, typing, reactions,
 // receipts, aicat). Pure factories — props in, vnode out.
 // Includes ChatMessage, ChatComposer, Chat, AICat, AICatPortrait.
-
-import * as webjsx from '../../vendor/webjsx/index.js';
-import { renderMarkdown, ensureReady as ensureMarkdownReady } from '../markdown.js';
-import { highlightAllUnder, ensurePrism } from '../highlight.js';
-import { register } from '../debug.js';
-
-const h = webjsx.createElement;
-let _stats = { messages: 0, lastKindCounts: {} };
-
-export function fmtBytes(n) {
-    if (n == null) return '';
-    if (n < 1024) return n + ' B';
-    if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB';
-    if (n < 1024 * 1024 * 1024) return (n / (1024 * 1024)).toFixed(1) + ' MB';
-    return (n / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
-}
-
-// Inline-only markdown subset; safe for chat bubbles.
-export function renderInline(text) {
-    if (text == null) return [];
-    const out = [];
-    const re = /(\*\*([^*]+)\*\*|\*([^*]+)\*|`([^`]+)`|\[([^\]]+)\]\(([^)]+)\))/g;
-    let last = 0; let m; let i = 0;
-    const push = (n) => out.push(n);
-    while ((m = re.exec(text)) !== null) {
-        if (m.index > last) push(h('span', { key: 's' + i + 'a' }, text.slice(last, m.index)));
-        if (m[2] != null) push(h('strong', { key: 's' + i }, m[2]));
-        else if (m[3] != null) push(h('em', { key: 's' + i }, m[3]));
-        else if (m[4] != null) push(h('code', { key: 's' + i, class: 'chat-tick' }, m[4]));
-        else if (m[5] != null) push(h('a', { key: 's' + i, href: m[6], target: '_blank', rel: 'noopener' }, m[5]));
-        last = m.index + m[0].length; i += 1;
-    }
-    if (last < text.length) push(h('span', { key: 's' + i + 'a' }, text.slice(last)));
-    return out;
-}
-
-const FILE_GLYPHS = { pdf: '▤', zip: '▦', tar: '▦', gz: '▦', mp4: '▶', mp3: '♪', wav: '♪', csv: '⊞', json: '{}', md: '§', txt: '§', default: '◫' };
-function fileGlyph(name) {
-    const ext = String(name || '').split('.').pop().toLowerCase();
-    return FILE_GLYPHS[ext] || FILE_GLYPHS.default;
-}
-
-function MdNode(p) {
-    const refSink = (el) => {
-        if (!el) return;
-        if (el.dataset.mdSrc === p.text) return;
-        el.dataset.mdSrc = p.text || '';
-        ensureMarkdownReady().then(() => renderMarkdown(p.text || '')).then((html) => { el.innerHTML = html; });
-    };
-    return h('div', { class: 'chat-bubble chat-md', ref: refSink });
-}
-
-function CodeNode(p) {
-    const refSink = (el) => {
-        if (!el) return;
-        if (el.dataset.codeKey === (p.lang || '') + '|' + (p.code || '').length) return;
-        el.dataset.codeKey = (p.lang || '') + '|' + (p.code || '').length;
-        ensurePrism().then(() => highlightAllUnder(el));
-    };
-    return h('div', { class: 'chat-bubble chat-code', ref: refSink },
-        h('div', { class: 'chat-code-head' },
-            h('span', { class: 'lang' }, p.lang || 'code'),
-            p.filename ? h('span', { class: 'name' }, p.filename) : null
-        ),
-        h('pre', {}, h('code', { class: p.lang ? 'lang-' + p.lang + ' language-' + p.lang : '' }, p.code || ''))
-    );
-}
-
-const PART_RENDERERS = {
-    text:  (p) => h('div', { class: 'chat-bubble' }, ...renderInline(p.text || '')),
-    md:    (p) => MdNode(p),
-    code:  (p) => CodeNode(p),
-    image: (p) => h('a', { class: 'chat-image', href: p.href || p.src, target: '_blank', rel: 'noopener' },
-        h('img', { src: p.src, alt: p.alt || '', loading: 'lazy' }),
-        p.caption ? h('span', { class: 'cap' }, p.caption) : null),
-    pdf:   (p) => h('div', { class: 'chat-pdf' },
-        h('div', { class: 'chat-pdf-head' },
-            h('span', { class: 'glyph' }, '▤'),
-            h('span', { class: 'name' }, p.name || 'document.pdf'),
-            p.size != null ? h('span', { class: 'size' }, fmtBytes(p.size)) : null,
-            h('a', { class: 'open', href: p.src, target: '_blank', rel: 'noopener' }, 'open ↗')
-        ),
-        h('embed', { src: p.src, type: 'application/pdf' })),
-    file:  (p) => h('a', { class: 'chat-file', href: p.src, target: '_blank', rel: 'noopener', download: p.name || true },
-        h('span', { class: 'glyph' }, fileGlyph(p.name)),
-        h('span', { class: 'meta' },
-            h('span', { class: 'name' }, p.name || 'attachment'),
-            h('span', { class: 'size' }, [p.kindLabel || (p.name || '').split('.').pop().toUpperCase(), p.size != null ? fmtBytes(p.size) : null].filter(Boolean).join(' · '))
-        ),
-        h('span', { class: 'go' }, '↓')),
-    link:  (p) => h('a', { class: 'chat-link', href: p.href, target: '_blank', rel: 'noopener' },
-        p.thumb ? h('img', { class: 'thumb', src: p.thumb, alt: '' }) : null,
-        h('span', { class: 'meta' },
-            h('span', { class: 'host' }, p.host || (() => { try { return new URL(p.href).host; } catch { return ''; } })()),
-            h('span', { class: 'title' }, p.title || p.href),
-            p.desc ? h('span', { class: 'desc' }, p.desc) : null
-        ))
+//
+// This module is a barrel: every component lives in a single-responsibility
+// submodule under ./chat/, and the public export surface here is unchanged
+// — no consumer import needs to move.
+
+import { fmtFileSize } from './files.js';
+import { safeUrl as sharedSafeUrl, renderInline as sharedRenderInline, injectCodeCopy as sharedInjectCodeCopy } from './chat-message-parts.js';
+import { hasSelectionInside, makeThreadAutoScroll } from './chat/thread-scroll.js';
+import { ChatMessage } from './chat/message.js';
+import { ChatComposer } from './chat/composer.js';
+import { flashComposerNote } from './chat/composer-affordances.js';
+import { Chat, AICat, AICatPortrait, ChatSuggestions, AICAT_FACE } from './chat/threads.js';
+// Imported for its side effect: registers the 'chat' snapshot into the single
+// window.__debug registry at module load, exactly as this file did before the
+// split. Nothing here consumes the symbol directly.
+import './chat/stats.js';
+
+// ONE byte format across the kit: fmtFileSize (files.js) is canonical; the old
+// divergent fmtBytes ('0.0 KB' for zero, no B tier) is gone — this alias keeps
+// existing imports working while rendering the same string as the Files grid.
+export const fmtBytes = fmtFileSize;
+
+// safeUrl / renderInline now live in chat-message-parts.js (the shared
+// message-part renderer both this file and agent-chat.js render parts
+// through) — re-exported here under their original names so every existing
+// consumer of chat.js's public API (components.js barrel, any host importing
+// directly from './components/chat.js') keeps working unchanged.
+export const safeUrl = sharedSafeUrl;
+export const renderInline = sharedRenderInline;
+
+// injectCodeCopy / MdNode / CodeNode / ToolCallNode / ThinkingNode /
+// PART_RENDERERS all now live in chat-message-parts.js — the one dispatch
+// table this file, agent-chat.js, and any future chat surface render message
+// parts through. injectCodeCopy stays exported here (re-exported, same
+// signature) since it was part of this file's public surface before the
+// extraction, even though nothing in-repo imports it directly today.
+export const injectCodeCopy = sharedInjectCodeCopy;
+
+export {
+    hasSelectionInside, makeThreadAutoScroll,
+    ChatMessage,
+    ChatComposer, flashComposerNote,
+    Chat, AICat, AICatPortrait, ChatSuggestions, AICAT_FACE,
 };
-
-function renderPart(p, key) {
-    const fn = PART_RENDERERS[p.kind] || PART_RENDERERS.text;
-    const node = fn(p);
-    if (node && typeof node === 'object') node.props = { ...(node.props || {}), key: 'p' + key };
-    _stats.lastKindCounts[p.kind] = (_stats.lastKindCounts[p.kind] || 0) + 1;
-    return node;
-}
-
-export function ChatMessage({ who = 'them', avatar, text, parts, time, typing, key, aicat, reactions, receipt, name }) {
-    _stats.messages += 1;
-    const cls = 'chat-msg ' + who + (aicat && who === 'them' ? ' aicat' : '');
-    const av = h('span', { class: 'chat-avatar' }, avatar || (who === 'you' ? 'u' : '?'));
-    let bodyNodes;
-    if (typing) bodyNodes = [h('span', { class: 'chat-typing', key: 'typ' }, h('span'), h('span'), h('span'))];
-    else if (parts && parts.length) bodyNodes = parts.map((p, i) => renderPart(p, i));
-    else bodyNodes = [h('div', { class: 'chat-bubble', key: 't' }, ...renderInline(text || ''))];
-    const reactionRow = reactions && reactions.length
-        ? h('div', { class: 'chat-reactions' },
-            ...reactions.map((r, i) => h('span', { class: 'rxn' + (r.you ? ' you' : ''), key: 'r' + i },
-                h('span', { class: 'e' }, r.emoji), h('span', { class: 'n' }, String(r.count)))))
-        : null;
-    const tickNode = who === 'you' && receipt
-        ? h('span', { class: 'tick' + (receipt === 'read' ? ' read' : '') }, receipt === 'read' ? '✓✓' : '✓')
-        : null;
-    const metaItems = [];
-    if (name && who === 'them') metaItems.push(h('span', { class: 'who', key: 'w' }, name));
-    if (time) metaItems.push(h('span', { class: 't', key: 'ti' }, time));
-    if (tickNode) metaItems.push(tickNode);
-    const meta = metaItems.length ? h('div', { class: 'chat-meta' }, ...metaItems) : null;
-    const stack = h('div', { class: 'chat-stack' }, ...bodyNodes, reactionRow, meta);
-    return h('div', { key, class: cls }, who === 'you' ? stack : av, who === 'you' ? av : stack);
-}
-
-export function ChatComposer({ value, onInput, onSend, placeholder = 'message…', disabled }) {
-    const send = () => {
-        const v = (value || '').trim();
-        if (!v || disabled) return;
-        if (onSend) onSend(v);
-    };
-    return h('div', { class: 'chat-composer' },
-        h('textarea', { value: value || '', placeholder, rows: 1,
-            oninput: (e) => onInput && onInput(e.target.value),
-            onkeydown: (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } } }),
-        h('button', { class: 'send', disabled: disabled || !(value && value.trim()), onclick: send }, '↑')
-    );
-}
-
-export function Chat({ title = 'chat', sub, messages = [], composer, header } = {}) {
-    return h('div', { class: 'chat' },
-        header || h('div', { class: 'chat-head' },
-            h('span', { class: 'dot' }),
-            h('span', {}, title),
-            sub ? h('span', { class: 'sub' }, ' · ' + sub) : null,
-            h('span', { class: 'spread' }),
-            h('span', { class: 'sub' }, String(messages.length).padStart(2, '0') + ' msgs')
-        ),
-        h('div', { class: 'chat-thread' },
-            ...messages.map((m, i) => ChatMessage({ ...m, key: m.key != null ? m.key : i }))
-        ),
-        composer || null
-    );
-}
-
-export const AICAT_FACE = ` /\\_/\\\n( o.o )\n > ^ <`;
-
-export function AICatPortrait({ name = 'aicat', status = 'idle', face } = {}) {
-    return h('div', { class: 'aicat-portrait' },
-        h('pre', { class: 'aicat-face' }, face || AICAT_FACE),
-        h('div', { class: 'aicat-meta' },
-            h('span', { class: 'name' }, name),
-            h('span', { class: 'status' }, h('span', { class: 'dot' }, '● '), status)
-        )
-    );
-}
-
-export function AICat({ name = 'aicat', messages = [], thinking, composer, status = 'online · purring' } = {}) {
-    const annotated = messages.map((m) =>
-        m.who === 'them' ? { ...m, aicat: true, avatar: m.avatar || '=^.^=' } : m);
-    const all = thinking
-        ? [...annotated, { who: 'them', aicat: true, avatar: '=^.^=', typing: true, key: '_thinking' }]
-        : annotated;
-    return h('div', { class: 'chat' },
-        h('div', { class: 'chat-head' },
-            h('span', { class: 'dot' }),
-            h('span', {}, name),
-            h('span', { class: 'sub' }, ' · ' + status),
-            h('span', { class: 'spread' }),
-            h('span', { class: 'sub' }, String(messages.length).padStart(2, '0') + ' turns')
-        ),
-        h('div', { class: 'chat-thread' },
-            ...all.map((m, i) => ChatMessage({ ...m, key: m.key != null ? m.key : i }))
-        ),
-        composer || null
-    );
-}
-
-register('chat', () => ({ messages: _stats.messages, lastKindCounts: { ..._stats.lastKindCounts } }));

package/dist/src/components/community.js

@@ -1,167 +1,19 @@
 // Community surface — matches upstream signatures.
-
-import * as webjsx from '../../vendor/webjsx/index.js';
-const h = webjsx.createElement;
-
-export function ServerIcon({ id, name, icon, active, badge, onClick } = {}) {
-    const initials = (name || '?').slice(0, 2).toUpperCase();
-    return h('div', { class: 'cm-server-icon' + (active ? ' active' : ''), onclick: onClick, title: name, 'data-id': id },
-        h('span', { class: 'cm-server-pill' }),
-        icon ? h('img', { src: icon, alt: name }) : h('span', {}, initials),
-        badge ? h('span', { class: 'cm-server-badge' }, badge > 99 ? '99+' : String(badge)) : null
-    );
-}
-
-export function ServerRail({ servers = [], activeId, onSelect, onAdd } = {}) {
-    return h('div', { class: 'cm-server-rail' },
-        h('a', { class: 'cm-server-back', href: '../', title: 'Back' }, '◰'),
-        h('div', { class: 'cm-server-sep' }),
-        ...servers.map(s => ServerIcon({ ...s, active: s.id === activeId, onClick: () => onSelect && onSelect(s.id) })),
-        onAdd ? h('button', { class: 'cm-server-add', onclick: onAdd, title: 'Add server' }, '+') : null
-    );
-}
-
-export function ChannelItem({ id, name, type = 'text', active, voiceActive, onClick, onContext } = {}) {
-    const icon = type === 'voice' ? '🔊' : type === 'forum' ? '◻' : '#';
-    return h('div', {
-        class: 'cm-channel-item' + (active ? ' active' : '') + (voiceActive ? ' voice-active' : ''),
-        'data-id': id,
-        onclick: onClick,
-        oncontextmenu: (e) => { e.preventDefault(); onContext && onContext(id, e.clientX, e.clientY); }
-    },
-        h('span', { class: 'cm-ch-icon' }, icon),
-        h('span', { class: 'cm-ch-name' }, name)
-    );
-}
-
-export function ChannelCategory({ id, name, channels = [], collapsed, activeId, onToggle, onAddChannel, onChannelClick, onChannelContext } = {}) {
-    return h('div', { class: 'cm-channel-category' },
-        h('div', {
-            class: 'cm-category-header' + (collapsed ? ' collapsed' : ''),
-            onclick: () => onToggle && onToggle(id)
-        },
-            h('svg', { class: 'cm-cat-arrow', viewBox: '0 0 24 24' }, h('path', { d: 'M7 10l5 5 5-5z' })),
-            h('span', { class: 'cm-cat-name' }, name),
-            onAddChannel ? h('button', { class: 'cm-cat-add', onclick: (e) => { e.stopPropagation(); onAddChannel(id); }, title: 'Add channel' }, '+') : null
-        ),
-        collapsed ? null : h('div', { class: 'cm-cat-channels' },
-            ...channels.map(c => ChannelItem({
-                ...c,
-                active: c.id === activeId,
-                onClick: () => onChannelClick && onChannelClick(c),
-                onContext: onChannelContext
-            }))
-        )
-    );
-}
-
-export function VoiceUser({ identity, speaking, color } = {}) {
-    const initial = (identity || '?').slice(0, 1).toUpperCase();
-    return h('div', { class: 'cm-voice-user' + (speaking ? ' speaking' : '') },
-        h('div', { class: 'cm-voice-user-avatar', style: color ? `background:${color}` : '' }, initial),
-        h('span', { class: 'cm-voice-user-name' }, identity)
-    );
-}
-
-export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen, onSettings } = {}) {
-    const initial = (name || '?').slice(0, 1).toUpperCase();
-    return h('div', { class: 'cm-user-panel' },
-        h('div', { class: 'cm-user-avatar', style: color ? `background:${color}` : '' },
-            h('span', { class: 'cm-user-status-dot' }),
-            initial
-        ),
-        h('div', { class: 'cm-user-info' },
-            h('div', { class: 'cm-user-name' }, name || 'You'),
-            tag ? h('div', { class: 'cm-user-tag' }, tag) : null
-        ),
-        h('div', { class: 'cm-user-controls' },
-            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' }, '⚙')
-        )
-    );
-}
-
-export function ChannelSidebar({ serverName, channels = [], categories = [], activeId, collapsedCats, onChannelClick, onCategoryToggle, onAddChannel, onChannelContext, userPanelProps } = {}) {
-    const collapsed = collapsedCats || new Set();
-    const uncategorized = channels.filter(c => !c.categoryId || !categories.find(cat => cat.id === c.categoryId));
-    const sorted = [...categories].sort((a, b) => (a.position || 0) - (b.position || 0));
-    return h('div', { class: 'cm-channel-sidebar' },
-        h('div', { class: 'cm-server-header' },
-            h('span', { class: 'cm-server-header-name' }, serverName || 'Server'),
-        ),
-        h('div', { class: 'cm-channel-list' },
-            ...sorted.map(cat => ChannelCategory({
-                id: cat.id,
-                name: cat.name,
-                channels: channels.filter(c => c.categoryId === cat.id).sort((a, b) => (a.position || 0) - (b.position || 0)),
-                collapsed: collapsed.has && collapsed.has(cat.id),
-                activeId,
-                onToggle: onCategoryToggle,
-                onAddChannel,
-                onChannelClick,
-                onChannelContext
-            })),
-            uncategorized.length ? ChannelCategory({
-                id: 'uncategorized',
-                name: 'CHANNELS',
-                channels: uncategorized,
-                activeId,
-                onChannelClick,
-                onChannelContext
-            }) : null
-        ),
-        userPanelProps ? UserPanel(userPanelProps) : null
-    );
-}
-
-export function MemberItem({ identity, name, color, status = 'online' } = {}) {
-    const initial = (name || identity || '?').slice(0, 1).toUpperCase();
-    return h('div', { class: 'cm-member-item' },
-        h('div', { class: 'cm-member-avatar', style: color ? `background:${color}` : '' },
-            h('span', { class: 'cm-member-status' + (status === 'online' ? ' online' : '') }),
-            initial
-        ),
-        h('span', { class: 'cm-member-name' }, name || identity)
-    );
-}
-
-export function MemberList({ categories = [], open } = {}) {
-    return h('div', { class: 'cm-member-list' + (open ? ' open' : '') },
-        ...categories.flatMap(cat => [
-            h('div', { class: 'cm-member-category', key: cat.label }, `${cat.label} — ${cat.members.length}`),
-            ...cat.members.map((m, i) => MemberItem({ ...m, key: m.identity || i }))
-        ])
-    );
-}
-
-export function ChatHeader({ icon = '#', name, topic, toolbar = [] } = {}) {
-    return h('div', { class: 'cm-chat-header' },
-        h('span', { class: 'cm-chat-header-icon' }, icon),
-        h('span', { class: 'cm-chat-header-name' }, name),
-        topic ? h('span', { class: 'cm-chat-header-topic' }, topic) : null,
-        h('div', { class: 'cm-chat-header-toolbar' }, ...toolbar)
-    );
-}
-
-export function VoiceStrip({ channelName, status, muted, deafened, onMute, onDeafen, onLeave, open } = {}) {
-    return h('div', { class: 'cm-voice-strip' + (open ? ' open' : '') },
-        h('div', { class: 'cm-vs-label' },
-            h('span', { class: 'cm-vs-channel' }, '🔊 ' + (channelName || 'voice')),
-            h('span', { class: 'cm-vs-status' }, status || 'connected')
-        ),
-        h('button', { class: 'cm-vs-btn', onclick: onMute, title: 'Mute' }, muted ? '🔇' : '🎤'),
-        h('button', { class: 'cm-vs-btn', onclick: onDeafen, title: 'Deafen' }, deafened ? '🔕' : '🎧'),
-        h('button', { class: 'cm-vs-btn danger', onclick: onLeave, title: 'Leave' }, '✕')
-    );
-}
-
-export function CommunityShell({ serverRailProps, sidebarProps, children, memberListProps, voiceStripProps } = {}) {
-    return h('div', { class: 'cm-shell' },
-        serverRailProps ? ServerRail(serverRailProps) : null,
-        sidebarProps ? ChannelSidebar(sidebarProps) : null,
-        h('div', { class: 'cm-main' }, ...(Array.isArray(children) ? children : [children])),
-        memberListProps ? MemberList(memberListProps) : null,
-        voiceStripProps ? VoiceStrip(voiceStripProps) : null
-    );
-}
+//
+// This module is a barrel: every component lives in a single-responsibility
+// submodule under ./community/, and the public export surface here is unchanged
+// — no consumer import needs to move.
+
+import { ServerIcon, ServerRail, ChannelItem, ChannelCategory, ChannelSidebar } from './community/navigation.js';
+import { VoiceUser, UserPanel, MemberItem, MemberList, VoiceStrip } from './community/presence.js';
+import { ChatHeader, MobileHeader, ReplyBar, Banner } from './community/chrome.js';
+import { ThreadPanel, ForumView, PageView } from './community/views.js';
+import { CommunityShell } from './community/shell.js';
+
+export {
+    ServerIcon, ServerRail, ChannelItem, ChannelCategory, ChannelSidebar,
+    VoiceUser, UserPanel, MemberItem, MemberList, VoiceStrip,
+    ChatHeader, MobileHeader, ReplyBar, Banner,
+    ThreadPanel, ForumView, PageView,
+    CommunityShell,
+};