anentrypoint-design 0.0.28 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "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",
@@ -20,7 +20,8 @@
     "README.md"
   ],
   "scripts": {
-    "build": "node scripts/build.mjs"
+    "build": "node scripts/build.mjs",
+    "test": "node test.js"
   },
   "repository": {
     "type": "git",

package/src/bootstrap.js

@@ -0,0 +1,38 @@
+import * as webjsx from '../vendor/webjsx/index.js';
+import * as motion from './motion.js';
+import { register } from './debug.js';
+
+const ANIMATE_HREF = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';
+const PRISM_CSS = 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/themes/prism-tomorrow.min.css';
+
+export function ensureCdnLink(id, href) {
+    if (document.getElementById(id)) return;
+    const link = document.createElement('link');
+    link.id = id;
+    link.rel = 'stylesheet';
+    link.href = href;
+    document.head.appendChild(link);
+}
+
+export function ensureMotionCss() { ensureCdnLink('animate-style-cdn', ANIMATE_HREF); }
+export function ensurePrismCss()  { ensureCdnLink('prism-style-cdn', PRISM_CSS); }
+
+export function mountKit({ root, view, screen, animateOnMount = true } = {}) {
+    if (!root) throw new Error('mountKit: root required');
+    if (typeof view !== 'function') throw new Error('mountKit: view fn required');
+    if (screen) document.body.dataset.screenLabel = screen;
+    ensureMotionCss();
+    ensurePrismCss();
+    let scheduled = false;
+    const render = () => {
+        scheduled = false;
+        webjsx.applyDiff(root, view());
+        if (animateOnMount) requestAnimationFrame(() => motion.animateTree(root));
+    };
+    const schedule = () => { if (scheduled) return; scheduled = true; queueMicrotask(render); };
+    register('bootstrap', () => ({ screen: screen || null, mounted: !!root.firstChild, root: root.id || root.tagName }));
+    render();
+    return { render, schedule };
+}
+
+export { webjsx };

package/src/components/chat.js

@@ -0,0 +1,199 @@
+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';
+}
+
+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
+        )
+    )
+};
+
+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/src/components/content.js

@@ -0,0 +1,171 @@
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Btn, Heading, Lede } 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 }) {
+    return h('div', {
+        key,
+        class: 'row' + (active ? ' active' : ''),
+        onclick: onClick,
+        style
+    },
+        code != null ? h('span', { class: 'code' }, code) : null,
+        h('span', { class: 'title' }, title, sub ? h('span', { class: 'sub' }, sub) : null),
+        meta != null ? h('span', { class: 'meta' }, meta) : null
+    );
+}
+
+export function RowLink({ code, title, sub, meta, href = '#', key }) {
+    return h('a', { key, class: 'row', href },
+        code != null ? h('span', { class: 'code' }, code) : null,
+        h('span', { class: 'title' }, title, sub ? h('span', { class: 'sub' }, sub) : null),
+        meta != null ? h('span', { class: 'meta' }, meta) : null
+    );
+}
+
+export function Hero({ title, body, accent, badge, badgeCount }) {
+    return h('div', { class: 'ds-hero' },
+        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,
+        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({
+        title: `works · ${String(works.length).padStart(2, '0')} of ~${works.length}`,
+        right: h('a', { class: 'ds-link-accent', href: 'https://github.com/AnEntrypoint' }, 'all repos ↗'),
+        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('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 = 820 }) {
+    return Panel({
+        kind: 'manifesto',
+        style: `max-width:${maxWidth}px`,
+        children: h('div', { class: 'ds-manifesto' },
+            ...paragraphs.map((p, i) => h('p', {
+                key: i,
+                class: 'ds-manifesto-para' + (p.dim ? ' dim' : '')
+            }, p.text || p))
+        )
+    });
+}
+
+export function Section({ title, children }) {
+    return h('div', { class: 'ds-section' },
+        title ? h('h3', {}, title) : null,
+        ...(Array.isArray(children) ? children : [children])
+    );
+}
+
+export function HomeView({ state, onNav, onToggleWork, works, posts, manifesto, currentlyShipping }) {
+    return [
+        Hero({
+            title: 'the creative department of the internet.',
+            body: '247420 is a collective of mercurials. we ship fast, break things on purpose, and document honestly.',
+            accent: 'humor is load-bearing.'
+        }),
+        currentlyShipping ? h('div', { class: 'ds-section' },
+            Panel({
+                title: 'currently shipping',
+                count: currentlyShipping.length,
+                kind: 'inline',
+                children: currentlyShipping.map((row, i) =>
+                    Row({
+                        key: i,
+                        code: h('span', { class: row.live ? 'ds-dot-live' : 'ds-dot-idle' }, row.live ? '●' : '○'),
+                        title: row.title, sub: row.sub, meta: row.meta
+                    })
+                )
+            })
+        ) : null,
+        Section({ title: '// works', children: WorksList({ works, openedIndex: state.opened, onToggle: onToggleWork }) }),
+        Section({ title: '// recent writing', children: WritingList({ posts }) }),
+        Section({ title: '// manifesto · rough draft', children: Manifesto({ paragraphs: manifesto }) })
+    ];
+}
+
+export function ProjectView({ project, copied, onCopy }) {
+    return [
+        Heading({ level: 1, children: project.name }),
+        Lede({ children: project.tagline }),
+        Heading({ level: 3, children: 'install' }),
+        Install({ cmd: project.install, copied, onCopy }),
+        Heading({ level: 3, children: 'receipt' }),
+        Receipt({ rows: project.receipt }),
+        Heading({ level: 3, children: 'changelog' }),
+        Changelog({ entries: project.changelog })
+    ];
+}

package/src/components/files-modals.js

@@ -0,0 +1,105 @@
+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-stamp flame' : 'btn-stamp green',
+                    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-stamp green', 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/src/components/files.js

@@ -0,0 +1,126 @@
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Btn, Glyph } 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);
+}