anentrypoint-design 0.0.121 → 0.0.124

package/dist/slides/deck-stage.js

@@ -1,159 +0,0 @@
-import { STYLESHEET } from './deck-stage-style.js';
-import { buildOverlay, buildTapzones, handleDeckKey } from './deck-stage-overlay.js';
-import { loadNotes, restoreIndex, persistIndex, collectSlides, applyIndex, STORAGE_PREFIX } from './deck-stage-state.js';
-
-const DESIGN_W_DEFAULT = 1920;
-const DESIGN_H_DEFAULT = 1080;
-const OVERLAY_HIDE_MS = 1800;
-
-class DeckStage extends HTMLElement {
-    static get observedAttributes() { return ['width', 'height', 'noscale']; }
-
-    constructor() {
-        super();
-        this._root = this.attachShadow({ mode: 'open' });
-        this._index = 0;
-        this._slides = [];
-        this._notes = [];
-        this._hideTimer = null;
-        this._mouseIdleTimer = null;
-        this._storageKey = STORAGE_PREFIX + (location.pathname || '/');
-        this._onKey = this._onKey.bind(this);
-        this._onResize = this._onResize.bind(this);
-        this._onSlotChange = this._onSlotChange.bind(this);
-        this._onMouseMove = this._onMouseMove.bind(this);
-    }
-
-    get designWidth()  { return parseInt(this.getAttribute('width'), 10)  || DESIGN_W_DEFAULT; }
-    get designHeight() { return parseInt(this.getAttribute('height'), 10) || DESIGN_H_DEFAULT; }
-
-    connectedCallback() {
-        this._render();
-        this._notes = loadNotes(this);
-        this._syncPrintPageRule();
-        window.addEventListener('keydown', this._onKey);
-        window.addEventListener('resize', this._onResize);
-        window.addEventListener('mousemove', this._onMouseMove, { passive: true });
-    }
-
-    disconnectedCallback() {
-        window.removeEventListener('keydown', this._onKey);
-        window.removeEventListener('resize', this._onResize);
-        window.removeEventListener('mousemove', this._onMouseMove);
-        if (this._hideTimer) clearTimeout(this._hideTimer);
-        if (this._mouseIdleTimer) clearTimeout(this._mouseIdleTimer);
-    }
-
-    attributeChangedCallback() {
-        if (!this._canvas) return;
-        this._canvas.style.width = this.designWidth + 'px';
-        this._canvas.style.height = this.designHeight + 'px';
-        this._canvas.style.setProperty('--deck-design-w', this.designWidth + 'px');
-        this._canvas.style.setProperty('--deck-design-h', this.designHeight + 'px');
-        this._fit();
-        this._syncPrintPageRule();
-    }
-
-    _render() {
-        const style = document.createElement('style');
-        style.textContent = STYLESHEET;
-        const stage = document.createElement('div');
-        stage.className = 'stage';
-        const canvas = document.createElement('div');
-        canvas.className = 'canvas';
-        canvas.style.width = this.designWidth + 'px';
-        canvas.style.height = this.designHeight + 'px';
-        canvas.style.setProperty('--deck-design-w', this.designWidth + 'px');
-        canvas.style.setProperty('--deck-design-h', this.designHeight + 'px');
-        const slot = document.createElement('slot');
-        slot.addEventListener('slotchange', this._onSlotChange);
-        canvas.appendChild(slot);
-        stage.appendChild(canvas);
-
-        const tapzones = buildTapzones({
-            onBack: (e) => { e.preventDefault(); this._go(this._index - 1, 'tap'); },
-            onForward: (e) => { e.preventDefault(); this._go(this._index + 1, 'tap'); }
-        });
-        const overlay = buildOverlay({
-            onPrev: () => this._go(this._index - 1, 'click'),
-            onNext: () => this._go(this._index + 1, 'click'),
-            onReset: () => this._go(0, 'click')
-        });
-
-        this._root.append(style, stage, tapzones, overlay);
-        this._canvas = canvas;
-        this._slot = slot;
-        this._overlay = overlay;
-        this._countEl = overlay.querySelector('.current');
-        this._totalEl = overlay.querySelector('.total');
-    }
-
-    _syncPrintPageRule() {
-        const id = 'deck-stage-print-page';
-        let tag = document.getElementById(id);
-        if (!tag) {
-            tag = document.createElement('style');
-            tag.id = id;
-            document.head.appendChild(tag);
-        }
-        tag.textContent =
-            '@page { size: ' + this.designWidth + 'px ' + this.designHeight + 'px; margin: 0; } ' +
-            '@media print { html, body { margin: 0 !important; padding: 0 !important; background: none !important; overflow: visible !important; height: auto !important; } ' +
-            '* { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }';
-    }
-
-    _onSlotChange() {
-        this._slides = collectSlides(this, this._slot);
-        this._index = restoreIndex(this, this._slides);
-        applyIndex(this, {
-            index: this._index, prevIndex: this._prevIndex, slides: this._slides,
-            countEl: this._countEl, showOverlay: false, broadcast: true, reason: 'init',
-            flashFn: () => this._flashOverlay()
-        });
-        this._fit();
-    }
-
-
-    _flashOverlay() {
-        if (!this._overlay) return;
-        this._overlay.setAttribute('data-visible', '');
-        if (this._hideTimer) clearTimeout(this._hideTimer);
-        this._hideTimer = setTimeout(() => this._overlay.removeAttribute('data-visible'), OVERLAY_HIDE_MS);
-    }
-
-    _fit() {
-        if (!this._canvas) return;
-        if (this.hasAttribute('noscale')) { this._canvas.style.transform = 'none'; return; }
-        const s = Math.min(window.innerWidth / this.designWidth, window.innerHeight / this.designHeight);
-        this._canvas.style.transform = `scale(${s})`;
-    }
-
-    _onResize() { this._fit(); }
-    _onMouseMove() { this._flashOverlay(); }
-    _onKey(e) { if (handleDeckKey(this, e)) { e.preventDefault(); this._flashOverlay(); } }
-
-    _go(i, reason = 'api') {
-        if (!this._slides.length) return;
-        const clamped = Math.max(0, Math.min(this._slides.length - 1, i));
-        if (clamped === this._index) { this._flashOverlay(); return; }
-        this._index = clamped;
-        applyIndex(this, {
-            index: this._index, prevIndex: this._prevIndex, slides: this._slides,
-            countEl: this._countEl, showOverlay: true, broadcast: true, reason,
-            flashFn: () => this._flashOverlay()
-        });
-    }
-
-    get index() { return this._index; }
-    get length() { return this._slides.length; }
-    goTo(i) { this._go(i, 'api'); }
-    next()   { this._go(this._index + 1, 'api'); }
-    prev()   { this._go(this._index - 1, 'api'); }
-    reset()  { this._go(0, 'api'); }
-}
-
-if (typeof customElements !== 'undefined' && !customElements.get('deck-stage')) {
-    customElements.define('deck-stage', DeckStage);
-}
-
-export { DeckStage };

package/dist/slides/index.html

@@ -1,276 +0,0 @@
-<!doctype html>
-<html lang="en" data-theme="auto" class="ds-247420"><head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)">
-  <meta name="color-scheme" content="light dark">
-  <title>deck / 247420</title>
-  <meta name="description" content="presentation deck template — title, content, quote, comparison, receipt, end.">
-  <meta name="author" content="247420 / AnEntrypoint">
-  <meta name="keywords" content="247420, anentrypoint, design system, webjsx, rippleui, creative collective">
-  <link rel="canonical" href="https://anentrypoint.github.io/design/slides/">
-  <link rel="icon" type="image/svg+xml" href="../favicon.svg">
-  <meta property="og:type" content="website">
-  <meta property="og:title" content="deck / 247420">
-  <meta property="og:description" content="presentation deck template — title, content, quote, comparison, receipt, end.">
-  <meta property="og:url" content="https://anentrypoint.github.io/design/slides/">
-  <meta property="og:site_name" content="247420 / design">
-  <meta property="og:image" content="https://anentrypoint.github.io/design/og-card.png">
-  <meta property="og:image:width" content="1200">
-  <meta property="og:image:height" content="630">
-  <meta property="og:image:alt" content="247420 design system">
-  <meta property="og:locale" content="en_US">
-  <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:title" content="deck / 247420">
-  <meta name="twitter:description" content="presentation deck template — title, content, quote, comparison, receipt, end.">
-  <meta name="twitter:image" content="https://anentrypoint.github.io/design/og-card.png">
-  <meta name="twitter:site" content="@AnEntrypoint">
-  <meta name="robots" content="index, follow">
-  <link rel="stylesheet" href="../colors_and_type.css">
-  <link rel="stylesheet" href="../app-shell.css">
-<style>
-  /* Slides consume panel tokens → auto light/dark */
-  body { background: var(--panel-0); margin: 0; }
-  deck-stage { display: block; }
-  section {
-    background: var(--panel-1);
-    color: var(--panel-text);
-    padding: 96px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-  /* Variant: elevated surface — deeper on light, lighter on dark */
-  section.s-elev { background: var(--panel-2); }
-  section.s-canvas { background: var(--panel-0); }
-  /* Variant: accent-filled slide — pairs bg with its contrast token
-     so light-theme (deep green) gets white text and dark-theme (mint)
-     gets ink text. Never hardcode #fff here — mint + white is invisible. */
-  section.s-accent {
-    background: var(--panel-accent);
-    color: var(--panel-accent-fg);
-  }
-  section.s-accent .s-label,
-  section.s-accent .s-footer,
-  section.s-accent .s-dateline { color: var(--panel-accent-fg); }
-
-  .s-dateline {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    gap: 24px;
-    font-family: var(--ff-mono);
-    font-size: 18px;
-    text-transform: uppercase;
-    letter-spacing: 0.14em;
-    padding-bottom: 12px;
-    color: var(--panel-text-2);
-  }
-  .s-dateline .spread { flex: 1; align-self: center; }
-
-  .s-hero {
-    font-family: var(--ff-display);
-    font-size: 240px;
-    line-height: 0.95;
-    letter-spacing: -0.03em;
-    font-weight: 700;
-    color: var(--panel-text);
-  }
-  .s-h1 {
-    font-family: var(--ff-display);
-    font-size: 160px;
-    line-height: 1;
-    letter-spacing: -0.02em;
-    font-weight: 700;
-    color: var(--panel-text);
-  }
-  .s-label {
-    font-family: var(--ff-mono);
-    font-size: 22px;
-    text-transform: uppercase;
-    letter-spacing: 0.14em;
-    color: var(--panel-accent);
-  }
-  .s-sub {
-    font-family: 'Inter', system-ui, sans-serif;
-    font-size: 34px;
-    line-height: 1.4;
-    margin-top: 32px;
-    max-width: 32ch;
-    color: var(--panel-text-2);
-    font-weight: 400;
-  }
-  .s-footer {
-    font-family: var(--ff-mono);
-    font-size: 18px;
-    text-transform: uppercase;
-    letter-spacing: 0.14em;
-    display: flex;
-    justify-content: space-between;
-    padding-top: 12px;
-    color: var(--panel-text-2);
-  }
-  .s-quote {
-    font-family: var(--ff-display);
-    font-size: 120px;
-    line-height: 1.05;
-    font-style: italic;
-    max-width: 22ch;
-    letter-spacing: -0.02em;
-    color: var(--panel-text);
-  }
-
-  .cmp {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 16px;
-    min-height: 640px;
-  }
-  .cmp > div {
-    padding: 48px;
-    border-radius: 12px;
-    box-shadow: var(--panel-shadow);
-  }
-  .cmp .cmp-before { background: var(--panel-2); }
-  .cmp .cmp-after { background: var(--panel-accent); color: var(--panel-accent-fg); }
-  .cmp .cmp-l {
-    font-family: var(--ff-mono);
-    font-size: 22px;
-    text-transform: uppercase;
-    letter-spacing: 0.14em;
-    margin-bottom: 24px;
-    color: var(--panel-text-3);
-  }
-  .cmp .cmp-after .cmp-l { color: var(--panel-accent-fg); opacity: 0.8; }
-  .cmp .cmp-h {
-    font-family: var(--ff-display);
-    font-size: 96px;
-    line-height: 1;
-    letter-spacing: -0.02em;
-    margin-bottom: 16px;
-    color: var(--panel-text-3);
-    font-weight: 700;
-  }
-  .cmp .cmp-after .cmp-h { color: var(--panel-accent-fg); }
-  .cmp .cmp-p {
-    font-family: 'Inter', system-ui, sans-serif;
-    font-size: 28px;
-    line-height: 1.45;
-    color: var(--panel-text-3);
-  }
-  .cmp .cmp-after .cmp-p { color: var(--panel-accent-fg); opacity: 0.92; }
-
-  .receipt {
-    font-family: var(--ff-mono);
-    font-size: 28px;
-    max-width: 900px;
-    background: var(--panel-2);
-    border-radius: 12px;
-    padding: 28px 36px;
-    box-shadow: var(--panel-shadow);
-  }
-  .receipt-row {
-    display: flex;
-    gap: 24px;
-    padding: 10px 0;
-    align-items: baseline;
-  }
-  .receipt-row > span:nth-child(1) {
-    text-transform: uppercase;
-    letter-spacing: 0.14em;
-    font-size: 22px;
-    width: 320px;
-    flex-shrink: 0;
-    color: var(--panel-text-2);
-  }
-  .receipt-row > span:nth-child(2) {
-    flex: 1;
-    text-align: right;
-    color: var(--panel-text);
-  }
-</style>
-<script type="module" src="deck-stage.js"></script>
-</head>
-<body>
-<deck-stage width="1920" height="1080">
-
-<section class="s-elev" data-label="Title">
-  <div class="s-dateline"><span>247420 // an entrypoint</span><span class="spread"></span><span>apr 20 · 2026 · live</span></div>
-  <div>
-    <div class="s-label" style="margin-bottom:24px">// internal · do not circulate</div>
-    <div class="s-hero">we fart in its<br/>general direction.</div>
-    <div class="s-sub">a short presentation about what comes next, delivered at 4:20 sharp.</div>
-  </div>
-  <div class="s-footer"><span>deck 001</span><span>247420 / mmxxvi</span></div>
-</section>
-
-<section data-label="Section Intro">
-  <div class="s-dateline"><span>247420</span><span>§ 01</span><span class="spread"></span><span>of 05</span></div>
-  <div>
-    <div class="s-label" style="margin-bottom:32px">chapter one</div>
-    <div class="s-h1">the problem<br/>with everything.</div>
-  </div>
-  <div class="s-footer"><span>chapter</span><span>the problem</span></div>
-</section>
-
-<section class="s-canvas" data-label="Big Quote">
-  <div class="s-dateline"><span>247420</span><span>§ quote</span><span class="spread"></span><span>overheard · 2am</span></div>
-  <div style="display:flex;align-items:center;height:100%">
-    <div>
-      <div style="font-family:var(--ff-display);font-size:240px;line-height:0.8;margin-bottom:-40px;color:var(--panel-accent)">&ldquo;</div>
-      <div class="s-quote">we make things. some of them work. a few become the future.</div>
-      <div class="s-label" style="margin-top:48px;color:var(--panel-text-3)">— the collective, probably</div>
-    </div>
-  </div>
-  <div class="s-footer"><span>quote</span><span>the collective</span></div>
-</section>
-
-<section class="s-elev" data-label="Receipt">
-  <div class="s-dateline"><span>247420</span><span>§ receipt · gm v0.4.1</span><span class="spread"></span><span>live</span></div>
-  <div>
-    <div class="s-label" style="margin-bottom:32px">// by the numbers</div>
-    <div class="receipt">
-      <div class="receipt-row"><span>stars</span><span>3,124</span></div>
-      <div class="receipt-row"><span>weekly downloads</span><span>47k</span></div>
-      <div class="receipt-row"><span>avg session length</span><span>4h 20m (of course)</span></div>
-      <div class="receipt-row"><span>runtime dependencies</span><span>0</span></div>
-      <div class="receipt-row"><span>lines of code</span><span>1,847</span></div>
-      <div class="receipt-row"><span>people who get it</span><span>enough</span></div>
-    </div>
-  </div>
-  <div class="s-footer"><span>receipt</span><span>gm</span></div>
-</section>
-
-<section data-label="Comparison">
-  <div class="s-dateline"><span>247420</span><span>§ a vs b</span><span class="spread"></span><span>it's not close</span></div>
-  <div>
-    <div class="cmp">
-      <div class="cmp-before">
-        <div class="cmp-l">before</div>
-        <div class="cmp-h" style="text-decoration:line-through">gradient ripple-ui demo</div>
-        <div class="cmp-p">purple to blue. glass cards. emoji rows. a "supercharge your workflow" somewhere in the fold.</div>
-      </div>
-      <div class="cmp-after">
-        <div class="cmp-l">after</div>
-        <div class="cmp-h">layered surfaces.<br/>loud content.</div>
-        <div class="cmp-p">quiet chrome. monospace labels. you can read it on a phone in direct sunlight. it looks good in dark mode too.</div>
-      </div>
-    </div>
-  </div>
-  <div class="s-footer"><span>comparison</span><span>before / after</span></div>
-</section>
-
-<section class="s-accent" data-label="End">
-  <div class="s-dateline"><span>247420 // an entrypoint</span><span class="spread"></span><span>end · q&amp;a</span></div>
-  <div style="display:flex;align-items:center;height:100%">
-    <div>
-      <div class="s-hero" style="font-size:280px;color:var(--panel-accent-fg)">gm.</div>
-      <div style="font-family:var(--ff-mono);font-size:32px;margin-top:32px;color:var(--panel-accent-fg);opacity:0.85">// questions? open a pr.</div>
-    </div>
-  </div>
-  <div class="s-footer"><span>fin</span><span>247420 / mmxxvi</span></div>
-</section>
-
-</deck-stage>
-</body></html>

package/dist/src/bootstrap.js

@@ -1,25 +0,0 @@
-// mountKit — single entry every ui_kit uses. Installs motion, runs
-// applyDiff, registers a debug snapshot.
-
-import * as webjsx from '../vendor/webjsx/index.js';
-import * as motion from './motion.js';
-import { register } from './debug.js';
-
-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 && typeof document !== 'undefined') document.body.dataset.screenLabel = screen;
-    motion.installMotion();
-    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/dist/src/components/chat.js

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