anentrypoint-design 0.0.218 → 0.0.219

package/dist/slides/deck-stage.js

@@ -0,0 +1,159 @@
+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

@@ -0,0 +1,276 @@
+<!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

@@ -0,0 +1,25 @@
+// 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

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