atris 3.25.2 → 3.27.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/clarity.js

@@ -0,0 +1,97 @@
+'use strict';
+
+// The clarity interview. The front door of the product: draw out how the human
+// works, write it down once, and let every agent read it so they prompt
+// themselves well. A small, high-signal profile, not a survey.
+
+const fs = require('fs');
+const path = require('path');
+
+// One or two ideas at a time, plain English. Each answer is free text; the
+// parenthetical is a nudge, not a fixed menu.
+const QUESTIONS = [
+  { key: 'focus', q: 'what are you building, and who is it for?' },
+  { key: 'voice', q: 'how should output sound? (plain, terse, warm, formal)' },
+  { key: 'cadence', q: 'how do you like to work? (one idea at a time, batch, overnight autonomous)' },
+  { key: 'done', q: 'what does "done" mean to you? (tests green, shipped, you reviewed it)' },
+  { key: 'leash', q: 'how much should agents do without asking? (ask first, proceed and report, full auto)' },
+];
+
+const KEYS = QUESTIONS.map((x) => x.key);
+
+function isEmptyProfile(profile) {
+  return !profile || !KEYS.some((k) => profile[k]);
+}
+
+function renderClarityMd(profile = {}) {
+  const labels = {
+    focus: 'Focus',
+    voice: 'Voice',
+    cadence: 'Cadence',
+    done: 'Done means',
+    leash: 'Leash',
+  };
+  const lines = [
+    '# Clarity profile',
+    '',
+    'How the operator works. Agents read this to prompt themselves well,',
+    'so the human does not have to repeat themselves.',
+    '',
+  ];
+  for (const key of KEYS) {
+    if (profile[key]) lines.push(`- ${labels[key]}: ${profile[key]}`);
+  }
+  if (isEmptyProfile(profile)) {
+    lines.push('- (not set yet, run `atris clarity` to fill this in)');
+  }
+  lines.push('');
+  if (profile.updated_at) lines.push(`Updated: ${profile.updated_at}`);
+  lines.push('');
+  return lines.join('\n');
+}
+
+function profilePaths(root = process.cwd()) {
+  return {
+    json: path.join(root, '.atris', 'clarity.json'),
+    md: path.join(root, 'atris', 'CLARITY.md'),
+  };
+}
+
+function readProfile(root = process.cwd()) {
+  const { json } = profilePaths(root);
+  try {
+    return JSON.parse(fs.readFileSync(json, 'utf8'));
+  } catch {
+    return {};
+  }
+}
+
+function writeProfile(root, profile) {
+  const { json, md } = profilePaths(root);
+  fs.mkdirSync(path.dirname(json), { recursive: true });
+  fs.mkdirSync(path.dirname(md), { recursive: true });
+  fs.writeFileSync(json, `${JSON.stringify(profile, null, 2)}\n`, 'utf8');
+  fs.writeFileSync(md, renderClarityMd(profile), 'utf8');
+  return { json, md };
+}
+
+// Merge new answers over an existing profile (so --set is incremental).
+function mergeProfile(existing, answers, stamp) {
+  const merged = { ...existing };
+  for (const key of KEYS) {
+    if (typeof answers[key] === 'string' && answers[key].trim()) merged[key] = answers[key].trim();
+  }
+  merged.updated_at = stamp || merged.updated_at || null;
+  return merged;
+}
+
+module.exports = {
+  QUESTIONS,
+  KEYS,
+  mergeProfile,
+  isEmptyProfile,
+  renderClarityMd,
+  profilePaths,
+  readProfile,
+  writeProfile,
+};

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 };