anentrypoint-design 0.0.121 → 0.0.124

package/dist/src/kits/os/wm.js

@@ -1,111 +0,0 @@
-// Window manager paint surface — pure DOM rendering, no state machine.
-// Consumer (thebird) owns z-order, focus stack, alt-tab, drag/resize math.
-// renderWindow returns a handle whose setBounds is called from pointermove.
-//
-// Visuals are bible-aligned: mac-less chip buttons (-+x in mono),
-// inset 4px rail for focus, low-opacity \25E2 glyph for resize affordance,
-// pointer-events:none on .wm-bar with auto on title+close so phone @media
-// auto-maximize can suppress drag without a JS branch.
-
-export function renderWindow(opts = {}) {
-    const {
-        title = 'window',
-        body = null,
-        bounds = { x: 60, y: 60, w: 480, h: 320 },
-        focused = false,
-        maximized = false,
-        minimized = false,
-        instanceId = '',
-        kind = 'div',
-        callbacks = {},
-    } = opts;
-
-    const el = document.createElement('div');
-    el.className = 'wm-win';
-    el.dataset.kind = kind;
-    if (instanceId) el.dataset.instanceId = instanceId;
-    el.style.left = bounds.x + 'px';
-    el.style.top = bounds.y + 'px';
-    el.style.width = bounds.w + 'px';
-    el.style.height = bounds.h + 'px';
-
-    const bar = document.createElement('div');
-    bar.className = 'wm-bar';
-    const titleEl = document.createElement('span');
-    titleEl.className = 'wm-title';
-    titleEl.textContent = title;
-    const btns = document.createElement('div');
-    btns.className = 'wm-btns';
-    const minBtn = mkBtn('-', 'minimize');
-    const maxBtn = mkBtn('+', 'maximize');
-    const closeBtn = mkBtn('x', 'close');
-    btns.append(minBtn, maxBtn, closeBtn);
-    bar.append(titleEl, btns);
-
-    const bodyEl = document.createElement('div');
-    bodyEl.className = 'wm-body';
-    setBodyContent(bodyEl, body);
-
-    const resize = document.createElement('div');
-    resize.className = 'wm-resize';
-
-    el.append(bar, bodyEl, resize);
-
-    minBtn.addEventListener('click', e => { e.stopPropagation(); callbacks.onMinimize && callbacks.onMinimize(); });
-    maxBtn.addEventListener('click', e => { e.stopPropagation(); callbacks.onMaximize && callbacks.onMaximize(); });
-    closeBtn.addEventListener('click', e => { e.stopPropagation(); callbacks.onClose && callbacks.onClose(); });
-
-    el.addEventListener('pointerdown', () => callbacks.onFocus && callbacks.onFocus());
-
-    bar.addEventListener('pointerdown', e => {
-        if (e.target.closest('.wm-btn')) return;
-        callbacks.onFocus && callbacks.onFocus();
-        if (callbacks.onDragStart) callbacks.onDragStart(e, { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight });
-    });
-
-    resize.addEventListener('pointerdown', e => {
-        callbacks.onFocus && callbacks.onFocus();
-        if (callbacks.onResizeStart) callbacks.onResizeStart(e, { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight });
-    });
-
-    applyFocused(el, focused);
-    applyMaximized(el, maximized);
-    applyMinimized(el, minimized);
-
-    return {
-        el,
-        setTitle(t) { titleEl.textContent = t; },
-        setBody(b) { setBodyContent(bodyEl, b); },
-        setBounds(b) {
-            if (typeof b.x === 'number') el.style.left = b.x + 'px';
-            if (typeof b.y === 'number') el.style.top = b.y + 'px';
-            if (typeof b.w === 'number') el.style.width = b.w + 'px';
-            if (typeof b.h === 'number') el.style.height = b.h + 'px';
-        },
-        setFocused(v) { applyFocused(el, v); },
-        setMaximized(v) { applyMaximized(el, v); },
-        setMinimized(v) { applyMinimized(el, v); },
-        setInstanceId(id) { if (id) el.dataset.instanceId = id; else delete el.dataset.instanceId; },
-        setZIndex(z) { el.style.zIndex = String(z); },
-        getBounds() { return { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight }; },
-        dispose() { el.remove(); },
-    };
-}
-
-function mkBtn(label, ttl) {
-    const b = document.createElement('button');
-    b.className = 'wm-btn';
-    b.textContent = label;
-    b.title = ttl;
-    return b;
-}
-
-function setBodyContent(host, body) {
-    while (host.firstChild) host.removeChild(host.firstChild);
-    if (body instanceof Node) host.appendChild(body);
-    else if (typeof body === 'string') host.innerHTML = body;
-}
-
-function applyFocused(el, v) { el.classList.toggle('wm-focused', !!v); }
-function applyMaximized(el, v) { el.classList.toggle('wm-max', !!v); }
-function applyMinimized(el, v) { el.classList.toggle('wm-min', !!v); }

package/dist/src/markdown.js

@@ -1,39 +0,0 @@
-// Markdown — lazy-loads marked + DOMPurify on first call. Stub-safe:
-// if loading fails, we fall back to a simple escape-and-linebreak pass so
-// the chat doesn't go blank.
-
-let _ready = null;
-let _marked = null;
-let _purify = null;
-
-const MARKED_URL = 'https://cdn.jsdelivr.net/npm/marked@15/+esm';
-const PURIFY_URL = 'https://cdn.jsdelivr.net/npm/dompurify@3/+esm';
-
-export async function ensureReady() {
-    if (_ready) return _ready;
-    _ready = (async () => {
-        try {
-            const [{ marked }, DOMPurifyMod] = await Promise.all([import(MARKED_URL), import(PURIFY_URL)]);
-            _marked = marked;
-            _purify = DOMPurifyMod.default || DOMPurifyMod;
-            return true;
-        } catch (err) {
-            console.warn('[247420] markdown loader failed:', err);
-            return false;
-        }
-    })();
-    return _ready;
-}
-
-function escapeHtml(s) {
-    return String(s).replace(/[&<>"']/g, (c) => ({
-        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
-    })[c]);
-}
-
-export async function renderMarkdown(src) {
-    const ok = await ensureReady();
-    if (!ok) return escapeHtml(src).replace(/\n/g, '<br>');
-    const raw = _marked.parse(String(src));
-    return _purify.sanitize(raw);
-}

package/dist/src/motion.js

@@ -1,35 +0,0 @@
-// Minimal motion — the SDK historically wired animate.css for entry
-// flourishes. We tone this down: no animate.css, just a single GPU-friendly
-// fade-up on first paint. animateTree() walks once and marks rendered nodes
-// so it doesn't re-animate on every applyDiff.
-
-export function installMotion() {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById('ds-247420-motion')) return;
-    const style = document.createElement('style');
-    style.id = 'ds-247420-motion';
-    style.textContent = `
-@media (prefers-reduced-motion: no-preference) {
-  .ds-247420 [data-anim="in"] {
-    opacity: 0; transform: translateY(8px);
-    transition: opacity 320ms cubic-bezier(.2,0,0,1), transform 320ms cubic-bezier(.2,0,0,1);
-  }
-  .ds-247420 [data-anim="ready"] {
-    opacity: 1; transform: translateY(0);
-  }
-}`.trim();
-    document.head.appendChild(style);
-}
-
-export function animateTree(root) {
-    if (!root || typeof root.querySelectorAll !== 'function') return;
-    // Mark sections / hero / panels for entry.
-    const targets = root.querySelectorAll('.ds-hero,.panel,.ds-section,.app-main > *');
-    targets.forEach((el, i) => {
-        if (el.dataset.anim === 'ready') return;
-        el.dataset.anim = 'in';
-        // stagger up to 6 elements, then snap the rest in
-        const delay = Math.min(i, 6) * 30;
-        setTimeout(() => { el.dataset.anim = 'ready'; }, delay);
-    });
-}

package/dist/src/page-html.js

@@ -1,196 +0,0 @@
-// Static-site page HTML renderer. Emits a thin SDK-shell document that mounts
-// the page using the SDK's own kit components (Hero, Section, Panel, Row, etc.)
-// — the kit is the single source of truth for visual design; this file only
-// declares the data shape and the mount entry point.
-//
-// Consumer contract:
-//   renderPageHtml({
-//     title, slug, siteName,
-//     navItems: [[label, href], ...],          // hrefs are joined with basePath
-//     basePath: '/freddie/',                    // prefix for relative nav hrefs
-//     hero: { heading, body, accent, badges, ctas },
-//     sections: [{ id, name, lede, body, features: [{name, desc, benefit}] }, ...],
-//     examples: [{ label, desc, href }, ...],
-//     body: markdown-string,
-//     theme: 'auto' | 'light' | 'ink',
-//     cssHref, headExtra,
-//   })
-
-export function escape(s) {
-    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}
-
-export function inlineMd(s) {
-    return s
-        .replace(/`([^`]+)`/g, '<code>$1</code>')
-        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
-        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
-}
-
-export function renderMarkdown(md) {
-    const lines = String(md || '').split('\n');
-    const out = [];
-    let inCode = false, inList = false;
-    for (const line of lines) {
-        if (line.startsWith('```')) { if (inCode) { out.push('</pre>'); inCode = false; } else { out.push('<pre>'); inCode = true; } continue; }
-        if (inCode) { out.push(escape(line)); continue; }
-        if (line.startsWith('# ')) out.push(`<h1>${escape(line.slice(2))}</h1>`);
-        else if (line.startsWith('## ')) out.push(`<h2>${escape(line.slice(3))}</h2>`);
-        else if (line.startsWith('### ')) out.push(`<h3>${escape(line.slice(4))}</h3>`);
-        else if (line.startsWith('- ')) { if (!inList) { out.push('<ul>'); inList = true; } out.push(`<li>${inlineMd(escape(line.slice(2)))}</li>`); }
-        else { if (inList) { out.push('</ul>'); inList = false; } if (line.trim()) out.push(`<p>${inlineMd(escape(line))}</p>`); }
-    }
-    if (inList) out.push('</ul>');
-    if (inCode) out.push('</pre>');
-    return out.join('\n');
-}
-
-// Join a basePath prefix to a nav href. Absolute URLs and hash links pass
-// through unchanged; leading-slash paths get the prefix.
-function joinHref(basePath, href) {
-    if (!href) return '#';
-    const h = String(href);
-    if (/^([a-z]+:|#|\/\/)/i.test(h)) return h;
-    if (!basePath) return h;
-    const base = basePath.replace(/\/+$/, '');
-    if (h.startsWith('/')) return base + h;
-    return base + '/' + h.replace(/^\.?\//, '');
-}
-
-export function renderPageHtml({
-    title = '247420', slug = 'index', siteName = '247420',
-    navItems = [], basePath = '',
-    hero, sections, examples, body,
-    theme = 'auto', cssHref, headExtra = ''
-} = {}) {
-    const cssLink = cssHref
-        ? `<link rel="stylesheet" href="${cssHref}">`
-        : `<link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">`;
-
-    // Resolve nav hrefs server-side against basePath. Client receives final URLs.
-    const navResolved = (Array.isArray(navItems) ? navItems : []).map(([label, href]) =>
-        [label, joinHref(basePath, href)]
-    );
-
-    // Data the client mount needs. Markdown body is parsed server-side into
-    // HTML so the client can innerHTML it inside a Section.
-    const pageData = {
-        title, slug, siteName, navItems: navResolved, theme,
-        hero: hero || null,
-        sections: Array.isArray(sections) ? sections : [],
-        examples: Array.isArray(examples) ? examples : [],
-        bodyHtml: body ? renderMarkdown(body) : '',
-    };
-
-    return `<!doctype html>
-<html lang="en" class="ds-247420" data-theme="${theme}">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${escape(title)} — ${escape(siteName)}</title>
-${cssLink}
-<script type="importmap">
-{ "imports": { "anentrypoint-design": "https://unpkg.com/anentrypoint-design@latest/dist/247420.js" } }
-</script>
-<style>
-.app-stage { max-width: 1100px; margin: 0 auto; padding: 24px; display: grid; gap: 24px }
-.page-body h1 { margin-top: 0 } .page-body h2 { margin-top: 32px } .page-body h3 { margin-top: 24px }
-.page-body pre { margin: 12px 0; background: var(--panel-2); padding: 12px; border-radius: 8px; overflow-x: auto }
-</style>
-<script id="__site__" type="application/json">${JSON.stringify(pageData).replace(/</g, '\\u003c')}</script>
-${headExtra}
-</head>
-<body>
-<div id="app"></div>
-<script type="module">
-import { mount, components as C, h } from 'anentrypoint-design';
-const data = JSON.parse(document.getElementById('__site__').textContent);
-const RAILS = ['rail-green', 'rail-purple', 'rail-mascot', 'rail-sun', 'rail-flame', 'rail-sky'];
-
-function heroNode(hero) {
-  if (!hero) return null;
-  return C.Hero({
-    eyebrow: hero.eyebrow,
-    title: hero.heading || hero.title || data.title,
-    body: hero.body || hero.subheading || '',
-    accent: hero.accent,
-    badge: Array.isArray(hero.badges) && hero.badges[0] ? hero.badges[0].label : undefined,
-    actions: Array.isArray(hero.ctas) ? hero.ctas.map((c, i) => h('a', { key: i, class: i === 0 ? 'btn btn-accent' : 'btn btn-ghost', href: c.href || '#' }, c.label || c.cta || 'go')) : null,
-  });
-}
-
-function sectionNode(sec, idx) {
-  const rail = RAILS[idx % RAILS.length];
-  const features = sec.features || sec.items || [];
-  const rows = features.map((f, i) => {
-    const kids = [h('span', { key: 't', class: 'title' }, String(f.name || ''))];
-    if (f.desc) kids.push(h('div', { key: 'd', class: 'sub', innerHTML: String(f.desc).replace(/\`([^\`]+)\`/g, '<code>$1</code>') }));
-    if (f.benefit) kids.push(h('div', { key: 'b', class: 'row-benefit' }, String(f.benefit)));
-    return h('div', { key: i, class: 'row ' + rail }, ...kids);
-  });
-  return C.Section({
-    title: sec.name || sec.title || sec.id,
-    children: [
-      sec.lede ? h('p', { class: 'ds-lede' }, sec.lede) : null,
-      ...rows,
-      sec.body && sec.body.length >= 240 ? h('div', { class: 'page-body', innerHTML: __md(sec.body) }) : null,
-    ].filter(Boolean),
-  });
-}
-
-function examplesNode(examples) {
-  if (!examples || !examples.length) return null;
-  return C.Section({
-    title: 'explore',
-    children: examples.map((e, i) => {
-      const rail = RAILS[(i + 1) % RAILS.length];
-      const kids = [
-        h('span', { key: 'c', class: 'code' }, String(i + 1).padStart(2, '0')),
-        h('span', { key: 't', class: 'title' }, String(e.label || e.name || e.href || '')),
-      ];
-      if (e.desc) kids.push(h('span', { key: 'm', class: 'meta dim' }, ' — ' + e.desc));
-      kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, '↗'));
-      return h('a', { key: i, class: 'row ' + rail, href: e.href || '#' }, ...kids);
-    }),
-  });
-}
-
-// minimal client-side markdown renderer matching server-side renderer (idempotent for already-html bodies)
-function __md(md) {
-  const lines = String(md || '').split('\\n');
-  const out = []; let inCode = false, inList = false;
-  const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-  const inl = (s) => s.replace(/\`([^\`]+)\`/g, '<code>$1</code>').replace(/\\*\\*([^*]+)\\*\\*/g, '<strong>$1</strong>').replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, '<a href="$2">$1</a>');
-  for (const line of lines) {
-    if (line.startsWith('\`\`\`')) { if (inCode) { out.push('</pre>'); inCode = false; } else { out.push('<pre>'); inCode = true; } continue; }
-    if (inCode) { out.push(esc(line)); continue; }
-    if (line.startsWith('# ')) out.push('<h1>' + esc(line.slice(2)) + '</h1>');
-    else if (line.startsWith('## ')) out.push('<h2>' + esc(line.slice(3)) + '</h2>');
-    else if (line.startsWith('### ')) out.push('<h3>' + esc(line.slice(4)) + '</h3>');
-    else if (line.startsWith('- ')) { if (!inList) { out.push('<ul>'); inList = true; } out.push('<li>' + inl(esc(line.slice(2))) + '</li>'); }
-    else { if (inList) { out.push('</ul>'); inList = false; } if (line.trim()) out.push('<p>' + inl(esc(line)) + '</p>'); }
-  }
-  if (inList) out.push('</ul>');
-  if (inCode) out.push('</pre>');
-  return out.join('\\n');
-}
-
-const bodyNode = data.bodyHtml ? C.Section({ children: h('div', { class: 'page-body', innerHTML: data.bodyHtml }) }) : null;
-
-const mainChildren = [
-  heroNode(data.hero),
-  ...data.sections.map(sectionNode),
-  examplesNode(data.examples),
-  bodyNode,
-].filter(Boolean);
-
-mount(document.getElementById('app'), () => C.AppShell({
-  topbar: C.Topbar({ brand: data.siteName, items: data.navItems, active: data.title }),
-  crumb: C.Crumb({ leaf: data.title }),
-  main: h('div', { class: 'app-stage' }, ...mainChildren),
-  status: C.Status({ left: [data.siteName.toLowerCase(), data.slug], right: ['live'] }),
-}));
-</script>
-</body>
-</html>`;
-}

package/dist/src/styles.js

@@ -1,25 +0,0 @@
-// 247420 design system — styles
-// Loads the prefixed CSS bundle (./247420.css alongside this file) and
-// exposes the scope class consumers add to their wrapping element.
-
-export const scope = '.ds-247420';
-
-let _cssPromise = null;
-
-export function loadCss() {
-    if (_cssPromise) return _cssPromise;
-    _cssPromise = (async () => {
-        // Resolve relative to this module so it works whether loaded from
-        // unpkg, jsdelivr, or a local copy.
-        const url = new URL('../dist/247420.css', import.meta.url);
-        const res = await fetch(url);
-        if (!res.ok) throw new Error('247420: failed to load css ' + res.status);
-        return await res.text();
-    })();
-    return _cssPromise;
-}
-
-// Back-compat: code that read `css` directly after a `loadCss()` call gets
-// the populated string. New code should `await loadCss()`.
-export let css = '';
-loadCss().then((s) => { css = s; }).catch(() => {});

package/dist/src/theme.js

@@ -1,99 +0,0 @@
-// 247420 design system — theme controller.
-//
-// Three modes:
-//   'auto'  — follow OS (prefers-color-scheme). Live-updates on OS change.
-//   'paper' — force light.
-//   'ink'   — force dark.
-//
-// Writes the chosen mode to <html data-theme="..."> so CSS rules in
-// system.css / colors_and_type.css resolve correctly. Persists to
-// localStorage under '247420:theme'. Auto-initializes on import in a
-// browser context; safe no-op on server.
-
-const KEY = '247420:theme';
-const VALID = new Set(['auto', 'paper', 'ink']);
-const listeners = new Set();
-let _mq = null;
-let _current = 'auto';
-
-function isBrowser() {
-    return typeof document !== 'undefined' && typeof window !== 'undefined';
-}
-
-function readStored() {
-    try {
-        const v = window.localStorage.getItem(KEY);
-        return VALID.has(v) ? v : null;
-    } catch { return null; }
-}
-
-function writeStored(mode) {
-    try { window.localStorage.setItem(KEY, mode); } catch {}
-}
-
-function writeAttr(mode) {
-    if (!isBrowser()) return;
-    document.documentElement.setAttribute('data-theme', mode);
-}
-
-function ensureMq() {
-    if (_mq || !isBrowser() || !window.matchMedia) return;
-    _mq = window.matchMedia('(prefers-color-scheme: dark)');
-    const onChange = () => {
-        if (_current === 'auto') {
-            // Re-emit so listeners can re-render derived UI even though
-            // data-theme stays "auto" — the CSS @media handles the swap.
-            for (const cb of listeners) {
-                try { cb({ mode: 'auto', resolved: _mq.matches ? 'ink' : 'paper' }); } catch {}
-            }
-        }
-    };
-    if (_mq.addEventListener) _mq.addEventListener('change', onChange);
-    else if (_mq.addListener) _mq.addListener(onChange);
-}
-
-export function applyTheme(mode) {
-    if (!VALID.has(mode)) mode = 'auto';
-    _current = mode;
-    writeAttr(mode);
-    writeStored(mode);
-    ensureMq();
-    const resolved = mode === 'auto'
-        ? (_mq && _mq.matches ? 'ink' : 'paper')
-        : mode;
-    for (const cb of listeners) {
-        try { cb({ mode, resolved }); } catch {}
-    }
-    return mode;
-}
-
-export function getTheme() {
-    return _current;
-}
-
-export function resolvedTheme() {
-    if (_current !== 'auto') return _current;
-    ensureMq();
-    return _mq && _mq.matches ? 'ink' : 'paper';
-}
-
-export function onThemeChange(cb) {
-    listeners.add(cb);
-    return () => listeners.delete(cb);
-}
-
-// Auto-init on browser import. Picks stored value, else falls back to
-// whatever data-theme is already on <html> (set by page-html.js), else 'auto'.
-export function initTheme() {
-    if (!isBrowser()) return 'auto';
-    const stored = readStored();
-    const fromAttr = document.documentElement.getAttribute('data-theme');
-    const initial = stored || (VALID.has(fromAttr) ? fromAttr : 'auto');
-    applyTheme(initial);
-    return initial;
-}
-
-if (isBrowser()) {
-    // Run on next microtask so SSR-injected attributes settle first.
-    Promise.resolve().then(() => { try { initTheme(); } catch {} });
-}

package/dist/src/web-components/ds-chat.js

@@ -1,45 +0,0 @@
-// <ds-chat> custom element — auto-registers when SDK loads in a browser.
-// Properties: el.messages = [{role,text}, ...]; el.placeholder = string.
-// Emits a bubbling, composed 'send' event with { detail: { text } }.
-
-import * as webjsx from '../../vendor/webjsx/index.js';
-import { Chat } from '../components/chat.js';
-
-class DsChat extends HTMLElement {
-    constructor() {
-        super();
-        this._messages = [];
-        this._placeholder = 'type, then ⏎';
-    }
-    static get observedAttributes() { return ['messages', 'placeholder']; }
-    attributeChangedCallback(name, _old, val) {
-        if (name === 'messages') {
-            try { this._messages = JSON.parse(val); } catch { this._messages = []; }
-        } else if (name === 'placeholder') {
-            this._placeholder = val || '';
-        }
-        this._render();
-    }
-    set messages(v) { this._messages = Array.isArray(v) ? v : []; this._render(); }
-    get messages() { return this._messages; }
-    set placeholder(v) { this._placeholder = v || ''; this._render(); }
-    get placeholder() { return this._placeholder; }
-    connectedCallback() { this.classList.add('ds-247420'); this._render(); }
-    _send(text) { this.dispatchEvent(new CustomEvent('send', { detail: { text }, bubbles: true, composed: true })); }
-    _render() {
-        if (!this.isConnected) return;
-        const node = Chat({ messages: this._messages, onSend: (t) => this._send(t) });
-        webjsx.applyDiff(this, node);
-    }
-}
-
-export { DsChat };
-
-let _registered = false;
-export function registerChatElement() {
-    if (_registered) return;
-    if (typeof customElements === 'undefined') return;
-    if (customElements.get('ds-chat')) { _registered = true; return; }
-    customElements.define('ds-chat', DsChat);
-    _registered = true;
-}

package/dist/ui_kits/aicat/README.md

@@ -1,7 +0,0 @@
-# AICat UI Kit
-
-AI assistant chat with a cat persona. ASCII portrait that swaps with mood, thinking-dot bubble, deterministic canned replies you can swap for any model.
-
-Components used: `AICat`, `AICatPortrait`, `ChatComposer`, plus the shell primitives (`AppShell`, `Topbar`, `Crumb`, `Side`, `Status`, `Panel`, `Heading`, `Lede`, `Chip`).
-
-Wire `reply(text)` in `app.js` to your model of choice — the surface is unchanged.