anentrypoint-design 0.0.218 → 0.0.219

package/dist/src/components/community.js

@@ -0,0 +1,167 @@
+// 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
+    );
+}

package/dist/src/components/content.js

@@ -0,0 +1,213 @@
+// Content blocks: Panel, Row, RowLink, Section, Hero, Install, Receipt,
+// Changelog, WorksList, WritingList, Manifesto, Kpi, Table, HomeView,
+// ProjectView, Form. Pure factories.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Btn, Heading, Lede, Dot } from './shell.js';
+const h = webjsx.createElement;
+
+export function Panel({ title, count, right, style = '', children, kind }) {
+    const cls = 'panel' + (kind ? ' panel-' + kind : '');
+    return h('div', { class: cls, style },
+        title != null ? h('div', { class: 'panel-head' },
+            h('span', {}, title),
+            right != null ? right : (count != null ? h('span', {}, String(count)) : null)
+        ) : null,
+        h('div', { class: 'panel-body' }, ...(Array.isArray(children) ? children : [children]))
+    );
+}
+
+export function Row({ code, title, sub, meta, active, onClick, key, style, href, kind, cols, leading, trailing, target }) {
+    const isLink = kind === 'link' || (href != null && !onClick);
+    const cls = 'row' + (active ? ' active' : '') + (cols ? ' row-grid' : '');
+    const props = { key, class: cls, style: cols ? `${style ? style + ';' : ''}grid-template-columns:${cols}` : style };
+    if (isLink) { props.href = href || '#'; if (target) props.target = target; }
+    else if (onClick) { props.onclick = onClick; }
+    return h(isLink ? 'a' : 'div', props,
+        leading != null ? leading : (code != null ? h('span', { class: 'code' }, code) : null),
+        h('span', { class: 'title' }, title, sub ? h('span', { class: 'sub' }, sub) : null),
+        trailing != null ? trailing : (meta != null ? h('span', { class: 'meta' }, meta) : null));
+}
+
+export function RowLink({ code, title, sub, meta, href = '#', key, target }) {
+    return Row({ code, title, sub, meta, href, kind: 'link', key, target });
+}
+
+export function Section({ title, eyebrow, children }) {
+    return h('section', { class: 'ds-section' },
+        eyebrow ? h('span', { class: 'eyebrow' }, eyebrow) : null,
+        title ? h('h3', {}, title) : null,
+        ...(Array.isArray(children) ? children : [children])
+    );
+}
+
+export function Hero({ eyebrow, title, body, accent, badge, badgeCount, actions }) {
+    return h('div', { class: 'ds-hero' },
+        eyebrow ? h('span', { class: 'eyebrow' }, eyebrow) : null,
+        h('h1', { class: 'ds-hero-title' }, title),
+        body ? h('p', { class: 'ds-hero-body' },
+            body,
+            accent ? h('span', { class: 'ds-hero-accent' }, ' ' + accent) : null
+        ) : null,
+        actions ? h('div', { class: 'ds-hero-actions', style: 'display:flex;gap:10px;flex-wrap:wrap;margin-top:8px' }, ...(Array.isArray(actions) ? actions : [actions])) : null,
+        badge ? Panel({ title: badge, count: badgeCount, kind: 'inline', children: [] }) : null
+    );
+}
+
+export function Install({ cmd, copied, onCopy }) {
+    return h('div', { class: 'cli' },
+        h('span', { class: 'prompt' }, '$'),
+        h('span', { class: 'cmd' }, cmd),
+        h('span', { class: 'copy', onclick: () => onCopy && onCopy(cmd) }, copied ? 'copied' : 'copy')
+    );
+}
+
+export function Receipt({ rows = [] }) {
+    return h('table', { class: 'kv' },
+        h('tbody', {}, ...rows.map(([k, v], i) =>
+            h('tr', { key: i }, h('td', {}, k), h('td', {}, v))
+        ))
+    );
+}
+
+export function Changelog({ entries = [] }) {
+    return Panel({
+        kind: 'wide',
+        children: entries.map((e, i) =>
+            h('div', { key: i, class: 'row ds-changelog-row' },
+                h('span', { class: 'code' }, e.date),
+                h('span', { class: 'ds-changelog-ver' }, e.ver),
+                h('span', { class: 'title' }, e.msg)
+            )
+        )
+    });
+}
+
+export function WorksList({ works = [], openedIndex = -1, onToggle }) {
+    return Panel({
+        children: works.map((w, i) => {
+            const isOpen = openedIndex === i;
+            return h('div', { key: i },
+                Row({
+                    code: w.code,
+                    title: w.title, sub: w.sub,
+                    meta: w.meta + '  ' + (isOpen ? '−' : '+'),
+                    active: isOpen,
+                    onClick: () => onToggle && onToggle(isOpen ? -1 : i)
+                }),
+                isOpen ? h('div', { class: 'work-detail', 'data-work-index': String(i) },
+                    h('div', { class: 'ds-prose' },
+                        h('p', { class: 'ds-work-body' }, w.body)
+                    ),
+                    h('div', { class: 'ds-work-actions' },
+                        Btn({ primary: true, href: w.href || '#', children: 'open ↗' }),
+                        Btn({ href: w.source || '#', children: 'source' })
+                    )
+                ) : null
+            );
+        })
+    });
+}
+
+export function WritingList({ posts = [] }) {
+    return Panel({
+        children: posts.map((p, i) =>
+            RowLink({ key: i, code: p.date, title: p.title, meta: p.tag, href: p.href || '#' })
+        )
+    });
+}
+
+export function Manifesto({ paragraphs = [], maxWidth }) {
+    return h('div', {
+        class: 'ds-prose ds-manifesto',
+        'data-max-width': maxWidth ? String(maxWidth) : null
+    },
+        ...paragraphs.map((p, i) => h('p', {
+            key: i,
+            class: 'ds-manifesto-para' + (p.dim ? ' dim' : '')
+        }, p.text || p))
+    );
+}
+
+export function Kpi({ items = [] }) {
+    return h('div', { class: 'kpi' }, ...items.map(([n, l], i) =>
+        h('div', { key: i, class: 'kpi-card' },
+            h('div', { class: 'num' }, String(n)),
+            h('div', { class: 'lbl' }, l))));
+}
+
+export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothing here yet' }) {
+    if (!rows || rows.length === 0) return h('div', { class: 'empty' }, emptyText);
+    return h('table', {},
+        h('thead', {}, h('tr', {}, ...headers.map((hd, i) => h('th', { key: i }, hd)))),
+        h('tbody', {}, ...rows.map((row, i) => h('tr', {
+            key: i,
+            class: onRowClick ? 'clickable' : '',
+            onclick: onRowClick ? () => onRowClick(i) : null
+        }, ...row.map((c, j) => h('td', { key: j }, c == null ? '' : (typeof c === 'object' ? c : String(c))))))));
+}
+
+export function HomeView({ state = {}, onNav, onToggleWork, works = [], posts = [], manifesto = [], currentlyShipping } = {}) {
+    return [
+        Hero({
+            eyebrow: 'an entrypoint',
+            title: 'Small, weird, useful tools — built in public.',
+            body: '247420 is a creative collective of eight, scattered across three timezones. We have been shipping open-source tools for the web since 2018.',
+            accent: 'Some become the future. Most don\'t. That\'s the deal.'
+        }),
+        currentlyShipping ? Section({
+            eyebrow: 'currently shipping',
+            children: Panel({
+                kind: 'wide',
+                children: currentlyShipping.map((row, i) =>
+                    Row({
+                        key: i,
+                        code: Dot({ tone: row.live ? 'live' : 'idle' }),
+                        title: row.title, sub: row.sub, meta: row.meta
+                    })
+                )
+            })
+        }) : null,
+        works.length ? Section({
+            eyebrow: 'works', title: 'Everything else.',
+            children: WorksList({ works, openedIndex: state.opened ?? -1, onToggle: onToggleWork })
+        }) : null,
+        posts.length ? Section({
+            eyebrow: 'writing', title: 'When we have something to say.',
+            children: WritingList({ posts })
+        }) : null,
+        manifesto.length ? Section({
+            eyebrow: 'who\'s here', title: 'Eight people, three timezones, one ongoing conversation.',
+            children: Manifesto({ paragraphs: manifesto })
+        }) : null
+    ].filter(Boolean);
+}
+
+export function ProjectView({ project = {}, copied, onCopy } = {}) {
+    return [
+        h('div', { class: 'ds-prose' },
+            Heading({ level: 1, children: project.name }),
+            Lede({ children: project.tagline })
+        ),
+        project.install ? [
+            Heading({ level: 3, children: 'install' }),
+            Install({ cmd: project.install, copied, onCopy }),
+        ] : null,
+        project.receipt ? [
+            Heading({ level: 3, children: 'by the numbers' }),
+            Receipt({ rows: project.receipt }),
+        ] : null,
+        project.changelog ? [
+            Heading({ level: 3, children: 'recent releases' }),
+            Changelog({ entries: project.changelog })
+        ] : null
+    ].filter(Boolean).flat();
+}
+
+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'
+            ? h('textarea', { key: i, name: f.name, placeholder: f.placeholder || '', rows: f.rows || 4 })
+            : h('input', { key: i, name: f.name, type: f.type || 'text', placeholder: f.placeholder || '', value: f.value || '', required: f.required ? 'true' : null })),
+        h('button', { type: 'submit', class: 'btn-primary' }, submit));
+}

package/dist/src/components/files-modals.js

@@ -0,0 +1,107 @@
+// File modals — matches upstream signatures + class names.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Btn } from './shell.js';
+import { fileGlyph, fmtFileSize } from './files.js';
+const h = webjsx.createElement;
+
+function Backdrop({ onClose, children, kind = '' } = {}) {
+    return h('div', {
+        class: 'ds-modal-backdrop',
+        onclick: (e) => { if (e.target === e.currentTarget && onClose) onClose(); }
+    },
+        h('div', { class: 'ds-modal' + (kind ? ' ds-modal-' + kind : '') }, ...(Array.isArray(children) ? children : [children]))
+    );
+}
+
+export function ConfirmDialog({ title = 'confirm', message, confirmLabel = 'confirm', cancelLabel = 'cancel', destructive, onConfirm, onCancel } = {}) {
+    return Backdrop({
+        onClose: onCancel,
+        kind: 'small',
+        children: [
+            h('div', { class: 'ds-modal-head' }, title),
+            h('div', { class: 'ds-modal-body' }, message || ''),
+            h('div', { class: 'ds-modal-actions' },
+                Btn({ onClick: onCancel, children: cancelLabel }),
+                h('button', {
+                    class: destructive ? 'btn-primary danger' : 'btn-primary',
+                    onclick: onConfirm
+                }, confirmLabel)
+            )
+        ]
+    });
+}
+
+export function PromptDialog({ title = 'name', value = '', placeholder = '', confirmLabel = 'ok', cancelLabel = 'cancel', onConfirm, onCancel, onInput } = {}) {
+    return Backdrop({
+        onClose: onCancel,
+        kind: 'small',
+        children: [
+            h('div', { class: 'ds-modal-head' }, title),
+            h('div', { class: 'ds-modal-body' },
+                h('input', {
+                    class: 'input ds-modal-input',
+                    type: 'text',
+                    value,
+                    placeholder,
+                    autofocus: true,
+                    oninput: (e) => onInput && onInput(e.target.value),
+                    onkeydown: (e) => {
+                        if (e.key === 'Enter') { e.preventDefault(); onConfirm && onConfirm(e.target.value); }
+                        if (e.key === 'Escape') { e.preventDefault(); onCancel && onCancel(); }
+                    }
+                })
+            ),
+            h('div', { class: 'ds-modal-actions' },
+                Btn({ onClick: onCancel, children: cancelLabel }),
+                h('button', { class: 'btn-primary', onclick: () => onConfirm && onConfirm(value) }, confirmLabel)
+            )
+        ]
+    });
+}
+
+export function FilePreviewMedia({ src, type = 'other', name } = {}) {
+    if (type === 'image') return h('img', { class: 'ds-preview-media', src, alt: name || '' });
+    if (type === 'video') return h('video', { class: 'ds-preview-media', src, controls: true });
+    if (type === 'audio') return h('audio', { class: 'ds-preview-audio', src, controls: true });
+    return h('div', { class: 'ds-preview-fallback' },
+        h('span', { class: 'ds-preview-glyph' }, fileGlyph(type)),
+        h('span', {}, 'no inline preview for ' + (type || 'this file'))
+    );
+}
+
+export function FilePreviewCode({ content = '', lang } = {}) {
+    return h('pre', { class: 'ds-preview-code' + (lang ? ' lang-' + lang : '') },
+        h('code', { class: lang ? 'language-' + lang : '' }, content)
+    );
+}
+
+export function FilePreviewText({ content = '', truncated } = {}) {
+    return h('pre', { class: 'ds-preview-text' },
+        h('code', {}, content),
+        truncated ? h('div', { class: 'ds-preview-truncated' }, '… (truncated)') : null
+    );
+}
+
+export function FileViewer({ file, body, onClose, onAction } = {}) {
+    if (!file) return null;
+    const meta = [file.type, file.size != null ? fmtFileSize(file.size) : null, file.modified || null]
+        .filter(Boolean).join(' · ');
+    return Backdrop({
+        onClose,
+        kind: 'preview',
+        children: [
+            h('div', { class: 'ds-modal-head ds-preview-head', 'data-file-type': file.type || 'other' },
+                h('span', { class: 'ds-preview-name' }, file.name || ''),
+                h('span', { class: 'ds-preview-meta' }, meta),
+                h('span', { class: 'ds-preview-actions' },
+                    onAction ? h('button', { class: 'ds-file-act', title: 'download', onclick: () => onAction('download') }, '↓') : null,
+                    h('button', { class: 'ds-file-act', title: 'close', onclick: onClose }, '✕')
+                )
+            ),
+            h('div', { class: 'ds-preview-body', 'data-file-type': file.type || 'other' },
+                ...(Array.isArray(body) ? body : [body])
+            )
+        ]
+    });
+}

package/dist/src/components/files.js

@@ -0,0 +1,118 @@
+// File primitives — matches upstream signatures.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Btn } from './shell.js';
+const h = webjsx.createElement;
+
+const FILE_TYPES = ['dir', 'image', 'video', 'audio', 'code', 'text', 'archive', 'document', 'symlink', 'other'];
+const TYPE_GLYPH = {
+    dir: '▣', image: '◰', video: '▰', audio: '◎', code: '⌘',
+    text: '§', archive: '◐', document: '▢', symlink: '↗', other: '◌'
+};
+
+export function fileGlyph(type) {
+    return TYPE_GLYPH[type] || TYPE_GLYPH.other;
+}
+
+export function fmtFileSize(bytes) {
+    if (bytes == null || bytes === 0) return '—';
+    const u = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let i = 0, n = bytes;
+    while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; }
+    return n.toFixed(i === 0 ? 0 : 1) + ' ' + u[i];
+}
+
+export function FileIcon({ type = 'other' } = {}) {
+    return h('span', { class: 'ds-file-icon', 'data-file-type': type }, fileGlyph(type));
+}
+
+export function FileRow({ name, type = 'other', size, modified, code, onOpen, onAction, active, key } = {}) {
+    const meta = [type === 'dir' ? null : fmtFileSize(size), modified || null].filter(Boolean).join(' · ');
+    return h('div', {
+        key,
+        class: 'ds-file-row row' + (active ? ' active' : ''),
+        'data-file-type': type,
+        onclick: onOpen
+    },
+        code != null ? h('span', { class: 'code' }, code) : null,
+        FileIcon({ type }),
+        h('span', { class: 'title' }, name),
+        h('span', { class: 'ds-file-meta meta' }, meta || '—'),
+        onAction ? h('span', { class: 'ds-file-actions', onclick: (e) => e.stopPropagation() },
+            h('button', { class: 'ds-file-act', title: 'download', onclick: () => onAction('download') }, '↓'),
+            h('button', { class: 'ds-file-act', title: 'rename', onclick: () => onAction('rename') }, '✎'),
+            h('button', { class: 'ds-file-act ds-file-act-warn', title: 'delete', onclick: () => onAction('delete') }, '✕')
+        ) : null
+    );
+}
+
+export function FileGrid({ files = [], onOpen, onAction, emptyText = 'no files here yet' } = {}) {
+    if (!files.length) return EmptyState({ text: emptyText });
+    return h('div', { class: 'ds-file-grid' },
+        ...files.map((f, i) => FileRow({
+            key: f.path || f.name + i,
+            name: f.name, type: f.type, size: f.size, modified: f.modified, code: f.code, active: f.active,
+            onOpen: onOpen ? () => onOpen(f) : null,
+            onAction: onAction ? (act) => onAction(act, f) : null
+        }))
+    );
+}
+
+export function FileToolbar({ left = [], right = [] } = {}) {
+    return h('div', { class: 'ds-file-toolbar' },
+        h('div', { class: 'ds-file-toolbar-left' }, ...left),
+        h('div', { class: 'ds-file-toolbar-right' }, ...right)
+    );
+}
+
+export function DropZone({ children, dragover, onDrop, onDragOver, onDragLeave, label = 'drop files here', onPick } = {}) {
+    return h('div', {
+        class: 'ds-dropzone' + (dragover ? ' dragover' : ''),
+        ondragover: (e) => { e.preventDefault(); onDragOver && onDragOver(e); },
+        ondragleave: (e) => { onDragLeave && onDragLeave(e); },
+        ondrop: (e) => { e.preventDefault(); onDrop && onDrop(e.dataTransfer.files); }
+    },
+        h('div', { class: 'ds-dropzone-inner' },
+            h('span', { class: 'ds-dropzone-glyph' }, '⇪'),
+            h('span', { class: 'ds-dropzone-label' }, label),
+            onPick ? Btn({ onClick: onPick, children: 'pick files' }) : null
+        ),
+        ...(Array.isArray(children) ? children : children ? [children] : [])
+    );
+}
+
+export function UploadProgress({ items = [] } = {}) {
+    if (!items.length) return null;
+    return h('div', { class: 'ds-upload-progress' },
+        ...items.map((it, i) => h('div', {
+            key: it.name + i,
+            class: 'ds-upload-item' + (it.done ? ' done' : '') + (it.error ? ' error' : '')
+        },
+            h('span', { class: 'ds-upload-name' }, it.name),
+            h('span', { class: 'ds-upload-bar' },
+                h('span', { class: 'ds-upload-fill', 'data-pct': String(Math.max(0, Math.min(100, it.pct || 0))) })
+            ),
+            h('span', { class: 'ds-upload-pct' }, (it.error ? 'err' : (it.done ? 'ok' : (it.pct || 0) + '%')))
+        ))
+    );
+}
+
+export function EmptyState({ text = 'nothing here', glyph = '◌' } = {}) {
+    return h('div', { class: 'ds-file-empty' },
+        h('span', { class: 'ds-file-empty-glyph' }, glyph),
+        h('span', { class: 'ds-file-empty-text' }, text)
+    );
+}
+
+export function BreadcrumbPath({ segments = [], onNav, root = 'root' } = {}) {
+    const parts = [h('button', { key: 'root', class: 'ds-crumb-seg', onclick: () => onNav && onNav(0) }, root)];
+    segments.forEach((seg, i) => {
+        parts.push(h('span', { key: 'sep' + i, class: 'ds-crumb-sep' }, '›'));
+        parts.push(h('button', {
+            key: 'seg' + i,
+            class: 'ds-crumb-seg' + (i === segments.length - 1 ? ' leaf' : ''),
+            onclick: () => onNav && onNav(i + 1)
+        }, seg));
+    });
+    return h('div', { class: 'ds-crumb-path' }, ...parts);
+}

package/dist/src/components/freddie/helpers.js

@@ -0,0 +1,50 @@
+// Freddie helpers — minimal stubs. Real freddie surfaces ship downstream
+// (gm-cc, foph, hermes-fork). The SDK exposes the registry shape and
+// localStorage helpers so consumer pages can wire to existing patterns.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+export function renderPageStub({ id, title }) {
+    return h('div', { class: 'ds-freddie-stub' },
+        h('span', { class: 'eyebrow' }, 'freddie · ' + id),
+        h('h2', {}, title || id),
+        h('p', { class: 'dim' }, 'this page renderer is a stub. consumers override it on their own freddie router.')
+    );
+}
+
+const SKILL_LABELS = {
+    transcribe: 'transcribe',
+    summarize:  'summarize',
+    translate:  'translate',
+    extract:    'extract',
+    classify:   'classify',
+};
+
+export function skillLabel(slug) {
+    return SKILL_LABELS[slug] || slug;
+}
+
+const RECENT_KEY = 'ds247420.recent.paths';
+
+export function getRecentPaths() {
+    if (typeof localStorage === 'undefined') return [];
+    try { return JSON.parse(localStorage.getItem(RECENT_KEY) || '[]'); }
+    catch { return []; }
+}
+
+export function saveRecentPath(path) {
+    if (typeof localStorage === 'undefined' || !path) return;
+    const list = getRecentPaths().filter(p => p !== path);
+    list.unshift(path);
+    try { localStorage.setItem(RECENT_KEY, JSON.stringify(list.slice(0, 10))); } catch {}
+}
+
+// Helper used by consumers that want to render chat-message arrays with
+// our ChatMessage factory but pre-formatted for freddie's data shape.
+export function renderChatMessages(messages = [], opts = {}) {
+    // Import lazily to keep this module light.
+    return import('../chat.js').then(({ ChatMessage }) =>
+        messages.map((m, i) => ChatMessage({ ...m, key: m.key != null ? m.key : i, ...opts }))
+    );
+}