atris 3.25.2 → 3.26.0

package/lib/card.js

@@ -0,0 +1,120 @@
+// atris card — turn one line of text into a beautiful, on-brand image.
+// Pure: spec -> self-contained HTML string. Reuses the design system: the same
+// themes as deck/site/html (incl. your .atris/theme.json brand), one accent,
+// Fraunces display, restraint. Render to PNG with headless Chrome (commands/card.js).
+//
+// Kinds: statement (kicker + headline + sub), quote (quote + attribution),
+//        stat (big number + label). Sizes: og, wide, square, story.
+
+const { mergedThemes } = require('./theme');
+const { THEMES: HTML_THEMES, rich, esc } = require('./html-render');
+
+const SIZES = {
+  og: { w: 1200, h: 630 },      // OpenGraph / link card
+  wide: { w: 1920, h: 1080 },   // slide / banner
+  square: { w: 1080, h: 1080 }, // feed
+  story: { w: 1080, h: 1920 },  // story / reel
+};
+const KINDS = ['statement', 'quote', 'stat'];
+
+const plainLen = (s) => String(s == null ? '' : s).replace(/\*\*/g, '').length;
+const clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+
+// shrink a display line so long text still fits the card
+function fit(base, text, refChars) {
+  return Math.round(base * clamp(refChars / Math.max(plainLen(text), 1), 0.5, 1));
+}
+
+function fontStack(name, fallback) {
+  return `'${String(name || fallback).replace(/'/g, '')}', '${fallback}', ${fallback === 'Fraunces' ? 'Georgia, serif' : 'system-ui, sans-serif'}`;
+}
+
+function buildCard(spec = {}, opts = {}) {
+  const size = SIZES[spec.size] || SIZES.og;
+  const themes = opts.themes || mergedThemes(HTML_THEMES, opts.root || process.cwd());
+  const theme = themes[spec.theme] || HTML_THEMES.atris;
+  const c = theme.color;
+  const f = theme.fonts || {};
+  const kind = KINDS.includes(spec.kind) ? spec.kind : 'statement';
+  const u = Math.min(size.w, size.h);
+
+  const pad = Math.round(u * 0.088);
+  const px = {
+    kicker: Math.round(u * 0.030),
+    sub: Math.round(u * 0.040),
+    foot: Math.round(u * 0.028),
+    rule: Math.round(u * 0.010),
+    gap: Math.round(u * 0.030),
+  };
+
+  const brand = spec.brand || 'Atris';
+  const version = spec.version || '';
+  const display = fontStack(f.display, 'Fraunces');
+  const body = fontStack(f.body, 'Outfit');
+  const grotesk = "'Space Grotesk', system-ui, sans-serif";
+  const monoFont = "'IBM Plex Mono', ui-monospace, monospace";
+
+  const foot = `<div class="foot"><span class="mark">${esc(brand)}</span>${version ? `<span class="ver">${esc(version)}</span>` : ''}</div>`;
+  const kickerHtml = spec.kicker ? `<div class="kicker">${rich(spec.kicker)}</div>` : '';
+  const subHtml = spec.sub ? `<p class="sub">${rich(spec.sub)}</p>` : '';
+
+  let main = '';
+  let extraCss = '';
+  if (kind === 'quote') {
+    const text = spec.text || spec.headline || 'Your quote here';
+    const qSize = fit(Math.round(u * 0.090), text, 64);
+    main = `<div class="rule"></div>
+      <div class="qmark">&ldquo;</div>
+      <blockquote class="qtext">${rich(text)}</blockquote>
+      ${spec.by ? `<div class="by">${rich(spec.by)}</div>` : ''}`;
+    extraCss = `
+      .qmark{font-family:${display};color:${c.accent};font-size:${Math.round(u * 0.20)}px;line-height:.6;height:${Math.round(u * 0.10)}px}
+      .qtext{font-family:${display};font-weight:600;font-size:${qSize}px;line-height:1.08;letter-spacing:-1px;margin:${px.gap}px 0}
+      .by{font-family:${monoFont};font-size:${px.foot}px;color:${c.soft}}`;
+  } else if (kind === 'stat') {
+    const number = spec.number || spec.headline || '42';
+    const numSize = fit(Math.round(u * 0.34), number, 6);
+    main = `<div class="rule"></div>
+      ${kickerHtml}
+      <div class="big">${rich(number)}</div>
+      ${spec.label ? `<div class="statlabel">${rich(spec.label)}</div>` : ''}
+      ${subHtml}`;
+    extraCss = `
+      .big{font-family:${grotesk};font-weight:600;color:${c.accent};font-size:${numSize}px;line-height:.92;letter-spacing:-2px}
+      .statlabel{font-family:${display};font-weight:600;font-size:${Math.round(u * 0.058)}px;color:${c.ink};margin-top:${Math.round(px.gap * 0.5)}px}`;
+  } else {
+    const headline = spec.headline || spec.text || 'Your headline here';
+    const hSize = fit(Math.round(u * 0.135), headline, 34);
+    main = `<div class="rule"></div>
+      ${kickerHtml}
+      <h1 class="headline">${rich(headline)}</h1>
+      ${subHtml}`;
+    extraCss = `
+      .headline{font-family:${display};font-weight:600;font-size:${hSize}px;line-height:1.02;letter-spacing:-1.5px}`;
+  }
+
+  const html = `<!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Outfit:wght@400;500;600&family=Space+Grotesk:wght@500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  *{margin:0;padding:0;box-sizing:border-box}
+  html,body{width:${size.w}px;height:${size.h}px;overflow:hidden}
+  body{background:${c.bg};color:${c.ink};font-family:${body};-webkit-font-smoothing:antialiased}
+  .card{width:${size.w}px;height:${size.h}px;padding:${pad}px;display:flex;flex-direction:column;justify-content:center;position:relative}
+  .rule{width:${Math.round(u * 0.085)}px;height:${px.rule}px;background:${c.accent};border-radius:${px.rule}px;margin-bottom:${Math.round(px.gap * 0.9)}px}
+  .kicker{font-family:${monoFont};font-size:${px.kicker}px;letter-spacing:2px;color:${c.soft};margin-bottom:${Math.round(px.gap * 0.6)}px}
+  .sub{font-size:${px.sub}px;line-height:1.4;color:${c.soft};margin-top:${px.gap}px;max-width:88%}
+  .foot{position:absolute;left:${pad}px;right:${pad}px;bottom:${pad}px;display:flex;align-items:baseline;justify-content:space-between}
+  .mark{font-family:${display};font-weight:600;font-size:${Math.round(u * 0.034)}px}
+  .ver{font-family:${monoFont};font-size:${px.foot}px;color:${c.soft};letter-spacing:1px}
+  .accent{color:${c.accent}}
+  ${extraCss}
+</style></head>
+<body><div class="card">${main}${foot}</div></body></html>`;
+
+  return { html, width: size.w, height: size.h, kind, theme: spec.theme || 'atris', size: spec.size || 'og' };
+}
+
+module.exports = { buildCard, SIZES, KINDS };

package/lib/deck-from-md.js

@@ -0,0 +1,110 @@
+// Markdown -> deck spec. Lets a PM write an ordinary doc and get a designed deck.
+// Pure: a markdown string in, a { theme, brand, slides } spec out (fed to buildDeck).
+//
+// Mapping (predictable on purpose):
+//   --- front matter ---   theme / brand / accent
+//   # H1 (first)           -> title slide (sub = the paragraph under it)
+//   ## H2 with 2-4 bullets -> columns slide (each bullet "**Lead** rest" -> a column)
+//   ## H2 with "**X** label" only -> bignumber slide
+//   ## H2 titled Close/CTA/Thanks -> close slide
+//   ## H2 otherwise        -> statement slide (sub = the paragraph under it)
+// Emphasis (**bold**) is preserved and rendered in the accent by the engine.
+
+function parseFrontMatter(md) {
+  const out = { theme: null, brand: null, accent: null };
+  const m = md.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/);
+  if (!m) return { body: md, fm: out };
+  for (const line of m[1].split(/\r?\n/)) {
+    const kv = line.match(/^([A-Za-z_]+):\s*(.+?)\s*$/);
+    if (!kv) continue;
+    const k = kv[1].toLowerCase();
+    const v = kv[2].trim().replace(/^["']|["']$/g, '');
+    if (k === 'theme') out.theme = v;
+    else if (k === 'brand') out.brand = v;
+    else if (k === 'accent') out.accent = v;
+  }
+  return { body: md.slice(m[0].length), fm: out };
+}
+
+// group a section's lines into bullets[] and paragraphs[]
+function splitBody(lines) {
+  const bullets = [];
+  const paras = [];
+  let buf = [];
+  const flush = () => { if (buf.length) { paras.push(buf.join(' ').trim()); buf = []; } };
+  for (const raw of lines) {
+    const line = raw.replace(/\s+$/, '');
+    if (/^\s*[-*+]\s+/.test(line)) { flush(); bullets.push(line.replace(/^\s*[-*+]\s+/, '').trim()); }
+    else if (/^\s*$/.test(line)) flush();
+    else if (/^\s*>\s+/.test(line)) { flush(); paras.push(line.replace(/^\s*>\s+/, '').trim()); }
+    else buf.push(line.trim());
+  }
+  flush();
+  return { bullets, paras: paras.filter(Boolean) };
+}
+
+// "**Lead** rest" / "Lead: rest" / "Lead - rest" -> { h, b }
+function toColumn(bullet) {
+  let m = bullet.match(/^\*\*(.+?)\*\*[\s:.-]*(.*)$/);
+  if (m) return { h: m[1].trim(), b: m[2].trim() };
+  m = bullet.match(/^([^:]{2,48}):\s+(.+)$/);
+  if (m) return { h: m[1].trim(), b: m[2].trim() };
+  return { h: bullet.trim(), b: '' };
+}
+
+// a single "**value** label" paragraph -> big number slide
+function asBigNumber(paras, bullets) {
+  if (bullets.length || paras.length !== 1) return null;
+  const m = paras[0].match(/^\*\*([^*]{1,18})\*\*\s+(.+)$/);
+  if (!m) return null;
+  return { type: 'bignumber', number: m[1].trim(), label: m[2].trim() };
+}
+
+const CLOSE_TITLES = /^(close|thanks|thank you|cta|call to action|get started|wrap up|next steps?)$/i;
+
+function parseMarkdownToSpec(md, opts = {}) {
+  const { body, fm } = parseFrontMatter(String(md || ''));
+  const theme = opts.theme || fm.theme || 'terminal';
+  const brand = {
+    name: opts.brandName || fm.brand || 'Atris',
+    accent: opts.accent || fm.accent || '.',
+  };
+
+  // collect sections by heading
+  const sections = [];
+  let cur = null;
+  for (const raw of body.split(/\r?\n/)) {
+    const h1 = raw.match(/^#\s+(.+)/);
+    const h2 = raw.match(/^##\s+(.+)/);
+    if (h1) { cur = { level: 1, title: h1[1].trim(), lines: [] }; sections.push(cur); }
+    else if (h2) { cur = { level: 2, title: h2[1].trim(), lines: [] }; sections.push(cur); }
+    else if (cur) cur.lines.push(raw);
+  }
+
+  const slides = [];
+  sections.forEach((sec, idx) => {
+    const { bullets, paras } = splitBody(sec.lines);
+    const firstPara = paras[0] || '';
+
+    if (sec.level === 1 && slides.length === 0) {
+      slides.push({ type: 'title', headline: sec.title, sub: firstPara || undefined });
+      return;
+    }
+    if (CLOSE_TITLES.test(sec.title)) {
+      slides.push({ type: 'close', tagline: firstPara || sec.title, footer: bullets[0] || undefined });
+      return;
+    }
+    const big = asBigNumber(paras, bullets);
+    if (big) { slides.push(big); return; }
+    if (bullets.length >= 2 && bullets.length <= 4 && bullets.every((b) => b.length <= 160)) {
+      slides.push({ type: 'columns', heading: sec.title, columns: bullets.map(toColumn) });
+      return;
+    }
+    slides.push({ type: 'statement', text: sec.title, sub: firstPara || undefined });
+  });
+
+  if (!slides.length) slides.push({ type: 'statement', text: brand.name });
+  return { theme, brand, slides };
+}
+
+module.exports = { parseMarkdownToSpec, parseFrontMatter, splitBody, toColumn };

package/lib/html-render.js

@@ -0,0 +1,257 @@
+// Atris HTML renderer — same content model as the deck engine, rendered to
+// beautiful, anti-slop HTML made of semantic blocks. Pure: spec -> HTML string.
+//
+// Connects with the web apps: the `atris` theme matches atrisos-web tokens
+// (amber #f59e0b on warm dark, --brand-* CSS variables), every section carries
+// data-atris-block="<type>", and renderBlock() emits the AppBlock html shape
+// ({ type:'html', config:{ html } }) so the output drops into an Atris app.
+//
+// Anti-slop by construction: one accent, fluid type, restraint, no gradient
+// text, no glassmorphism, em dashes sanitized (shares slides-deck helpers).
+
+const { THEMES: DECK_THEMES, sanitize, parseEmph } = require('./slides-deck');
+
+// HTML themes reuse the deck design-system shape, plus `atris` (matches the web app).
+const THEMES = {
+  atris: { // warm dark, amber accent, matches atrisos-web (--brand-* tokens, TWKLausanne)
+    fonts: { display: 'TWKLausanne', body: 'TWKLausanne', mono: 'ui-monospace, SFMono-Regular, monospace' },
+    color: { bg: '#141110', panel: '#1E1915', panelAlt: '#2C2520', line: '#3D332D',
+      ink: '#EAE3D9', soft: '#A39B92', faint: '#7C736B',
+      accent: '#F59E0B', accent2: '#FBBF24', onAccent: '#141110',
+      sev: ['#F59E0B', '#FBBF24', '#7F97A4'] },
+  },
+  terminal: DECK_THEMES.terminal,
+  paper: DECK_THEMES.paper,
+};
+
+function esc(s) {
+  return String(s == null ? '' : s)
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+// **emphasis** -> <span class="accent">; everything else escaped. Sanitized first.
+function rich(markup) {
+  const { plain, ranges } = parseEmph(sanitize(markup));
+  if (!ranges.length) return esc(plain);
+  let out = '', i = 0;
+  for (const r of ranges) {
+    out += esc(plain.slice(i, r.start));
+    out += `<span class="accent">${esc(plain.slice(r.start, r.end))}</span>`;
+    i = r.end;
+  }
+  out += esc(plain.slice(i));
+  return out;
+}
+
+function wordmark(brand) {
+  const name = esc((brand && brand.name) || 'Atris');
+  const ac = (brand && brand.accent) || '';
+  return `<div class="mark">${name}${ac ? `<b>${esc(ac)}</b>` : ''}</div>`;
+}
+
+function panelHtml(p) {
+  const rows = (p.rows || []).map((r, i) => `
+        <div class="row${r.active ? ' active' : ''}">
+          <span class="sev s${(r.sev != null ? r.sev : 0) % 3}"></span>
+          <div class="name">${rich(r.title || '')}${r.sub ? `<small>${rich(r.sub)}</small>` : ''}</div>
+          ${r.value != null ? `<div class="val"><b>${rich(String(r.value))}</b>${r.valueSub ? `<small>${rich(r.valueSub)}</small>` : ''}</div>` : ''}
+        </div>`).join('');
+  return `<div class="panel">
+        ${p.header ? `<div class="panel-head"><span>${rich(p.header.title || '')}</span>${p.header.meta ? `<span class="meta">${rich(p.header.meta)}</span>` : ''}</div>` : ''}
+        ${rows}
+        ${p.footer ? `<div class="panel-foot"><span>${rich(p.footer.left || '')}</span>${p.footer.right ? `<a>${rich(p.footer.right)}</a>` : ''}</div>` : ''}
+      </div>`;
+}
+
+const BLOCKS = {
+  title(s, spec) {
+    return `<section class="block hero" data-atris-block="hero">
+      <div class="lede">
+        ${wordmark(spec.brand)}
+        <div class="rule"></div>
+        <h1>${rich(s.headline || s.title || '')}</h1>
+        ${s.sub ? `<p class="sub">${rich(s.sub)}</p>` : ''}
+      </div>
+      ${s.panel ? panelHtml(s.panel) : ''}
+    </section>`;
+  },
+  statement(s) {
+    return `<section class="block statement" data-atris-block="statement">
+      <h2 class="big">${rich(s.text || s.headline || '')}</h2>
+      ${s.sub ? `<p class="sub">${rich(s.sub)}</p>` : ''}
+    </section>`;
+  },
+  columns(s) {
+    const cols = (s.columns || []).map((c) => `
+        <div class="col"><h3>${rich(c.h || c.title || '')}</h3>${(c.b || c.body) ? `<p>${rich(c.b || c.body)}</p>` : ''}</div>`).join('');
+    return `<section class="block columns" data-atris-block="columns">
+      ${s.heading ? `<h2 class="heading">${rich(s.heading)}</h2>` : ''}
+      <div class="cols c${Math.min((s.columns || []).length, 4)}">${cols}</div>
+    </section>`;
+  },
+  panel(s) {
+    return `<section class="block panel-block" data-atris-block="panel">
+      <div class="panel-lede">${s.heading ? `<h2>${rich(s.heading)}</h2>` : ''}${s.sub ? `<p>${rich(s.sub)}</p>` : ''}</div>
+      ${panelHtml(s.panel || { rows: [] })}
+    </section>`;
+  },
+  bignumber(s) {
+    return `<section class="block bignumber" data-atris-block="bignumber">
+      <div class="num">${rich(String(s.number || s.value || ''))}</div>
+      ${s.label ? `<div class="num-label">${rich(s.label)}</div>` : ''}
+      ${s.sub ? `<p class="sub">${rich(s.sub)}</p>` : ''}
+    </section>`;
+  },
+  quote(s) {
+    return `<section class="block quote" data-atris-block="quote">
+      <blockquote>${rich(s.text || s.quote || '')}</blockquote>
+      ${s.by ? `<cite>${rich(s.by)}</cite>` : ''}
+    </section>`;
+  },
+  toc(s) {
+    const items = (s.items || []).map((it) =>
+      `<a class="toc-item" href="${esc(it.href)}"><h3>${rich(it.title || it.href)}</h3>${it.summary ? `<p>${rich(it.summary)}</p>` : ''}</a>`).join('');
+    return `<section class="block toc" data-atris-block="toc">
+      ${s.heading ? `<h2 class="heading">${rich(s.heading)}</h2>` : ''}
+      <div class="toc-grid">${items}</div>
+    </section>`;
+  },
+  close(s, spec) {
+    const btns = (s.buttons || []).map((b) => `<a class="btn${b.primary ? ' primary' : ''}">${rich(b.label || 'Open')}</a>`).join('');
+    return `<section class="block close" data-atris-block="close">
+      <div class="rule center"></div>
+      ${wordmark(spec.brand)}
+      ${s.tagline ? `<p class="tagline">${rich(s.tagline)}</p>` : ''}
+      ${btns ? `<div class="btns">${btns}</div>` : ''}
+      ${s.footer ? `<p class="footer">${rich(s.footer)}</p>` : ''}
+    </section>`;
+  },
+};
+
+function css(theme) {
+  const c = theme.color, f = theme.fonts;
+  const gFonts = (f.display === 'Fraunces' || f.body === 'Outfit')
+    ? `<link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">`
+    : '';
+  const style = `:root{
+  --brand-bg:${c.bg};--brand-card:${c.panel};--brand-surface:${c.panelAlt || c.panel};--brand-line:${c.line};
+  --brand-text:${c.ink};--brand-text-secondary:${c.soft};--brand-faint:${c.faint};
+  --brand-primary:${c.accent};--brand-primary-2:${c.accent2};
+  --font-display:${f.display === 'TWKLausanne' ? "'TWKLausanne',system-ui,sans-serif" : `'${f.display}',serif`};
+  --font-body:${f.body === 'TWKLausanne' ? "'TWKLausanne',system-ui,sans-serif" : `'${f.body}',sans-serif`};
+  --ease:cubic-bezier(.25,1,.5,1);--measure:60ch;
+}
+*{margin:0;box-sizing:border-box}
+html{-webkit-font-smoothing:antialiased}
+body{font-family:var(--font-body);color:var(--brand-text);background:
+  radial-gradient(120% 80% at 88% -8%, ${c.accent}1f, transparent 56%),
+  radial-gradient(70% 60% at -6% 4%, ${c.soft}14, transparent 52%), var(--brand-bg);
+  line-height:1.5;font-variant-numeric:tabular-nums}
+.wrap{max-width:1140px;margin:0 auto;padding:clamp(28px,5vw,72px) clamp(20px,5vw,56px)}
+.block{padding:clamp(40px,7vw,96px) 0;border-bottom:1px solid var(--brand-line)}
+.block:last-child{border-bottom:0}
+.mark{font-family:var(--font-display);font-weight:500;font-size:20px;letter-spacing:-.01em}
+.mark b{color:var(--brand-primary);font-weight:500}
+.rule{width:40px;height:2px;background:var(--brand-primary);margin:22px 0}.rule.center{margin:0 auto 22px}
+.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,80px);align-items:center;border-bottom:0;padding-top:clamp(24px,4vw,48px)}
+@media(max-width:860px){.hero{grid-template-columns:1fr}}
+h1{font-family:var(--font-display);font-weight:300;font-size:clamp(2.6rem,6vw,4.6rem);line-height:.99;letter-spacing:-.02em}
+.accent{color:var(--brand-primary-2);font-style:italic}
+.sub{max-width:var(--measure);color:var(--brand-text-secondary);font-size:clamp(1rem,1.4vw,1.15rem);margin-top:22px}
+.big{font-family:var(--font-display);font-weight:300;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02;letter-spacing:-.02em}
+.heading{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,3vw,2rem);margin-bottom:34px}
+.cols{display:grid;gap:clamp(20px,4vw,48px)}.cols.c2{grid-template-columns:repeat(2,1fr)}.cols.c3{grid-template-columns:repeat(3,1fr)}.cols.c4{grid-template-columns:repeat(4,1fr)}
+@media(max-width:720px){.cols{grid-template-columns:1fr!important}}
+.col{border-top:1px solid var(--brand-line);padding-top:18px}
+.col h3{font-family:var(--font-display);font-weight:400;font-size:1.25rem;margin-bottom:8px}
+.col p{color:var(--brand-text-secondary);font-size:.97rem;max-width:36ch}
+.panel-block{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,5vw,64px);align-items:center}
+@media(max-width:760px){.panel-block{grid-template-columns:1fr}}
+.panel-lede h2{font-family:var(--font-display);font-weight:400;font-size:1.7rem;margin-bottom:14px}
+.panel-lede p{color:var(--brand-text-secondary);max-width:34ch}
+.panel{background:var(--brand-card);border:1px solid var(--brand-line);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.18)}
+.panel-head{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--brand-line);font-size:14px}
+.panel-head .meta{color:var(--brand-faint);font-size:12.5px}
+.row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--brand-surface)}
+.row:last-child{border-bottom:0}.row.active{border-left:2px solid var(--brand-primary);padding-left:16px}
+.sev{width:8px;height:8px;border-radius:50%}.sev.s0{background:var(--brand-primary)}.sev.s1{background:var(--brand-primary-2)}.sev.s2{background:#7f97a4}
+.name{font-size:14.5px}.name small{display:block;color:var(--brand-faint);font-size:12.5px;margin-top:3px}
+.val{text-align:right;font-size:12.5px;color:var(--brand-faint)}.val b{display:block;color:var(--brand-text);font-size:15px}
+.panel-foot{display:flex;justify-content:space-between;padding:13px 18px;font-size:13px;color:var(--brand-faint)}
+.panel-foot a{color:var(--brand-primary-2);text-decoration:none}
+.bignumber .num{font-family:var(--font-display);font-weight:300;font-size:clamp(3.5rem,11vw,7rem);line-height:1;color:var(--brand-primary-2)}
+.num-label{font-size:1.05rem;margin-top:18px}
+.quote blockquote{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.25;max-width:24ch;quotes:'\\201C''\\201D'}
+.quote blockquote::before{content:open-quote;color:var(--brand-primary)}.quote blockquote::after{content:close-quote;color:var(--brand-primary)}
+.quote cite{display:block;margin-top:20px;color:var(--brand-text-secondary);font-style:normal;font-size:.95rem}
+.close{text-align:center;border-bottom:0}
+.close .mark{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,3.4rem);font-weight:400}
+.tagline{color:var(--brand-text-secondary);margin-top:10px}
+.btns{display:flex;gap:12px;justify-content:center;margin-top:28px}
+.btn{padding:12px 22px;border-radius:11px;border:1px solid var(--brand-line);color:var(--brand-text);text-decoration:none;font-weight:500;font-size:15px;transition:transform 160ms var(--ease),background-color 160ms var(--ease)}
+.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--brand-text);color:var(--brand-bg);border-color:var(--brand-text)}
+.footer{margin-top:30px;color:var(--brand-faint);font-size:13px}
+.sitenav{display:flex;justify-content:space-between;align-items:baseline;max-width:1140px;margin:0 auto;padding:20px clamp(20px,5vw,56px);border-bottom:1px solid var(--brand-line)}
+.sitenav .mark{font-size:18px;text-decoration:none;color:var(--brand-text)}
+.sitenav .nav-links{display:flex;gap:24px;font-size:14px;color:var(--brand-text-secondary)}
+.sitenav .nav-links a{color:inherit;text-decoration:none;transition:color 160ms var(--ease)}
+.sitenav .nav-links a:hover{color:var(--brand-text)}
+.toc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(16px,3vw,32px)}
+.toc-item{display:block;border-top:1px solid var(--brand-line);padding-top:16px;text-decoration:none;color:inherit;transition:border-color 160ms var(--ease)}
+.toc-item:hover{border-color:var(--brand-primary)}
+.toc-item h3{font-family:var(--font-display);font-weight:400;font-size:1.15rem;margin-bottom:6px}
+.toc-item p{color:var(--brand-text-secondary);font-size:.92rem;max-width:40ch}
+@media(prefers-reduced-motion:reduce){*{transition:none!important}}`;
+  return { gFonts, style };
+}
+
+function renderBody(spec, opts = {}) {
+  const themes = opts.themes || THEMES;
+  const theme = themes[spec.theme] || THEMES.atris;
+  const blocks = (spec.slides || spec.blocks || [])
+    .map((s) => (BLOCKS[s.type] || BLOCKS.statement)(s, spec))
+    .join('\n      ');
+  return { theme, html: `<div class="wrap">\n      ${blocks}\n    </div>` };
+}
+
+function renderNav(nav) {
+  const links = (nav.links || []).map((l) => `<a href="${esc(l.href)}">${esc(l.label)}</a>`).join('');
+  return `<nav class="sitenav"><a class="mark" href="${esc(nav.home || 'index.html')}">${esc(nav.label || 'Atris')}${nav.accent ? `<b>${esc(nav.accent)}</b>` : ''}</a>${links ? `<div class="nav-links">${links}</div>` : ''}</nav>`;
+}
+
+// full standalone page (opts.nav renders a site header, opts.themes injects brand themes)
+function renderHtml(spec, opts = {}) {
+  const { theme, html } = renderBody(spec, opts);
+  const { gFonts, style } = css(theme);
+  const title = esc(sanitize(opts.title || (spec.brand && spec.brand.name) || 'Atris'));
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${title}</title>
+${gFonts}
+<style>${style}</style>
+</head>
+<body data-atris-theme="${esc(spec.theme || 'atris')}">
+    ${opts.nav ? renderNav(opts.nav) : ''}
+    ${html}
+</body>
+</html>`;
+}
+
+// AppBlock html shape, ready to embed in an Atris app (ui_template 'html'/'block')
+function renderBlock(spec, opts = {}) {
+  return {
+    type: 'html',
+    title: opts.title || (spec.brand && spec.brand.name) || 'Atris',
+    config: {
+      block_type: 'html',
+      title: opts.title || (spec.brand && spec.brand.name) || 'Atris',
+      html: renderHtml(spec, opts),
+      theme: spec.theme || 'atris',
+    },
+  };
+}
+
+module.exports = { renderHtml, renderBlock, renderBody, THEMES, BLOCKS, rich, esc };

package/lib/memory-view.js

@@ -0,0 +1,95 @@
+// Memory view — another way to look at memory updates. Reads the workspace's
+// compounding memory (lessons.md, learnings.jsonl, task projection) and builds a
+// content spec rendered as a beautiful HTML page by lib/html-render.
+//
+// Pure-ish: file reads in, a { theme, brand, slides } spec out. Anti-slop by
+// construction (the renderer sanitizes, so em dashes in the raw lessons file
+// never reach the page).
+
+const fs = require('fs');
+const path = require('path');
+
+// "- **[2026-06-18] some-id** — pass — text..." -> { date, id, status, text }
+function parseLessons(text) {
+  const out = [];
+  for (const line of String(text || '').split('\n')) {
+    const m = line.match(/^-\s*\*\*\[([^\]]+)\]\s*([^*]+?)\*\*\s*[—:-]*\s*(pass|fail)?\s*[—:-]*\s*(.*)$/i);
+    if (!m) continue;
+    out.push({ date: m[1].trim(), id: m[2].trim(), status: (m[3] || '').toLowerCase(), text: m[4].trim() });
+  }
+  return out; // append-only file: oldest first
+}
+
+function parseLearnings(text) {
+  const out = [];
+  for (const line of String(text || '').split('\n')) {
+    if (!line.trim()) continue;
+    try { const j = JSON.parse(line); out.push({ ts: j.ts, type: j.type, key: j.key, insight: j.insight }); } catch {}
+  }
+  return out;
+}
+
+function readFileSafe(p) { try { return fs.readFileSync(p, 'utf8'); } catch { return ''; } }
+
+function readTaskCounts(root) {
+  try {
+    const j = JSON.parse(readFileSafe(path.join(root, '.atris', 'state', 'tasks.projection.json')));
+    const tasks = Array.isArray(j.tasks) ? j.tasks : [];
+    const by = (s) => tasks.filter((t) => (t.status || '').toLowerCase() === s).length;
+    return { total: tasks.length, done: by('done') + by('accepted'), active: by('active') + by('in_progress'), review: by('review') + by('ready') };
+  } catch { return null; }
+}
+
+function gatherMemory(root = process.cwd()) {
+  const lessons = parseLessons(readFileSafe(path.join(root, 'atris', 'lessons.md')));
+  const learnings = parseLearnings(readFileSafe(path.join(root, 'atris', 'learnings.jsonl')));
+  const tasks = readTaskCounts(root);
+  return { lessons, learnings, tasks };
+}
+
+function clip(s, n) { s = String(s || ''); return s.length > n ? s.slice(0, n - 1).trimEnd() + '…' : s; }
+function titleize(id) { return String(id || '').replace(/[-_]+/g, ' ').trim(); }
+function plural(n, word) { return `${n} ${word}${n === 1 ? '' : 's'}`; }
+
+function buildMemorySpec(root = process.cwd(), opts = {}) {
+  const theme = opts.theme || 'atris';
+  const brand = { name: opts.brand || 'Atris', accent: '.' };
+  const { lessons, learnings, tasks } = gatherMemory(root);
+  const recent = lessons.slice(-8).reverse(); // newest first
+
+  const slides = [];
+  slides.push({
+    type: 'title',
+    headline: 'What the workspace **learned**',
+    sub: `${plural(lessons.length, 'lesson')} and ${plural(learnings.length, 'note')} compounded into memory${tasks ? `, ${plural(tasks.done, 'task')} done` : ''}.`,
+  });
+  slides.push({ type: 'bignumber', number: String(lessons.length), label: 'lessons compounded into the workspace' });
+
+  if (recent.length) {
+    slides.push({
+      type: 'columns', heading: 'Most recent lessons',
+      columns: recent.slice(0, 3).map((l) => ({ h: titleize(l.id), b: clip(l.text, 150) })),
+    });
+    slides.push({
+      type: 'panel', heading: 'Memory updates', sub: 'Lessons and notes, newest first.',
+      panel: {
+        header: { title: 'Recent updates', meta: `${recent.length} shown` },
+        rows: recent.map((l, i) => ({
+          title: titleize(l.id), sub: l.date,
+          value: l.status || 'note', sev: l.status === 'fail' ? 0 : (l.status === 'pass' ? 2 : 1),
+          active: i === 0,
+        })),
+      },
+    });
+  }
+  if (learnings.length) {
+    slides.push({
+      type: 'columns', heading: 'Notes from the field',
+      columns: learnings.slice(-3).reverse().map((n) => ({ h: titleize(n.key || n.type || 'note'), b: clip(n.insight, 150) })),
+    });
+  }
+  slides.push({ type: 'close', tagline: 'Memory lives in the filesystem, not the model.', footer: `${brand.name} workspace memory` });
+  return { theme, brand, slides };
+}
+
+module.exports = { buildMemorySpec, gatherMemory, parseLessons, parseLearnings, readTaskCounts };

package/lib/reel.js

@@ -0,0 +1,52 @@
+// atris reel — a card, animated. A reel is the card from lib/card.js rendered at
+// progress t in [0,1]: each element fades and rises in on a staggered schedule.
+// Pure: (spec, t) -> HTML for that single frame. commands/reel.js screenshots the
+// frames (same Chrome as card) and ffmpeg-encodes them. No new dependency.
+
+const { buildCard } = require('./card');
+
+const clamp01 = (x) => Math.max(0, Math.min(1, x));
+const easeOutCubic = (p) => 1 - Math.pow(1 - clamp01(p), 3);
+// reveal progress of an element whose window is [a,b], at global time t
+const win = (t, a, b) => easeOutCubic((t - a) / (b - a));
+
+// staggered reveal windows by element class. A kind only has some of these;
+// overriding a class that isn't present is harmless.
+const STAGGER = [
+  ['.rule', 0.00, 0.16],
+  ['.kicker', 0.10, 0.30],
+  ['.qmark', 0.10, 0.30],
+  ['.headline', 0.18, 0.46],
+  ['.qtext', 0.20, 0.50],
+  ['.big', 0.16, 0.46],
+  ['.statlabel', 0.34, 0.58],
+  ['.sub', 0.40, 0.62],
+  ['.by', 0.46, 0.66],
+  ['.foot', 0.58, 0.80],
+];
+
+// CSS that places every element at its reveal state for time t (one-shot, no loops)
+function revealCss(t, dist = 16) {
+  const tt = clamp01(t);
+  let css = '';
+  for (const [sel, a, b] of STAGGER) {
+    const p = win(tt, a, b);
+    css += `${sel}{opacity:${p.toFixed(3)};transform:translateY(${((1 - p) * dist).toFixed(2)}px)}`;
+  }
+  return css;
+}
+
+// HTML for a single reel frame at time t. Reuses the card, appends the reveal styles.
+function buildReelFrame(spec, t, opts = {}) {
+  const card = buildCard(spec, opts);
+  const overrides = `<style id="reel">${revealCss(t)}</style>`;
+  return { html: card.html.replace('</head>', `${overrides}</head>`), width: card.width, height: card.height };
+}
+
+// the list of t values for a reel of `seconds` at `fps` (>=2 frames)
+function reelFrames(seconds = 2.6, fps = 20) {
+  const n = Math.max(2, Math.round(seconds * fps));
+  return Array.from({ length: n }, (_, i) => i / (n - 1));
+}
+
+module.exports = { buildReelFrame, revealCss, reelFrames, win, STAGGER };