atris 3.17.0 → 3.22.0

package/commands/theme.js

@@ -0,0 +1,217 @@
+// atris theme — brand themes for the whole design system. Define your colors and
+// fonts once in .atris/theme.json; every deck, HTML page, and site uses them.
+//
+//   atris theme create        guided interview -> your own theme (alias: new)
+//   atris theme edit <name>   re-run the interview to tweak an existing theme
+//   atris theme init          scaffold a starter .atris/theme.json
+//   atris theme list          list built-in + project themes
+//   atris theme show <name>   print a resolved theme
+
+const readline = require('readline');
+const {
+  mergedThemes, writeStarterTheme, loadProjectThemes, loadThemeRecipe, PROJECT_THEME_FILE,
+  MOODS, MOOD_NAMES, FONT_PERSONALITIES, buildTheme, themeWarnings, upsertProjectTheme,
+  resolveMode, isHex, normHex, hexToRgb,
+} = require('../lib/theme');
+const { THEMES: HTML_THEMES } = require('../lib/html-render');
+
+// ---------- small terminal helpers ----------
+function parseFlags(argv) {
+  const flags = {}; const pos = [];
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === '-y' || a === '--yes') { flags.yes = true; continue; }
+    if (a.startsWith('--')) {
+      const key = a.slice(2);
+      const next = argv[i + 1];
+      if (next != null && !next.startsWith('--')) { flags[key] = next; i++; }
+      else flags[key] = true;
+      continue;
+    }
+    pos.push(a);
+  }
+  return { flags, pos };
+}
+
+// a colored block when we're on a real terminal, two blank cells otherwise (clean pipes)
+function sw(hex) {
+  const c = hexToRgb(hex);
+  if (!c || !process.stdout.isTTY) return '  ';
+  return `\x1b[48;2;${c.r};${c.g};${c.b}m  \x1b[0m`;
+}
+
+function printPreview(name, answers, theme) {
+  const c = theme.color;
+  const mode = resolveMode(answers.mood || 'editorial', answers.mode);
+  console.log(`\n  ${name}  ·  ${answers.mood || 'editorial'} ${mode}`);
+  const row = (label, hex) => console.log(`   ${sw(hex)} ${label.padEnd(8)} ${hex}`);
+  row('bg', c.bg);
+  row('ink', c.ink);
+  row('accent', c.accent);
+  row('accent2', c.accent2);
+  console.log(`      ${theme.fonts.display} display, ${theme.fonts.body} body`);
+}
+
+// ---------- the guided interview (tasteful vocabulary) ----------
+async function interview(defaults = {}) {
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  const ask = (q) => new Promise((res) => rl.question(q, res));
+  const ans = {};
+  try {
+    console.log('\n  let\'s make your theme. five quick choices, all changeable later.\n');
+
+    const dn = defaults.name || 'brand';
+    ans.name = (await ask(`  1/5  name it [${dn}]: `)).trim() || dn;
+
+    console.log('\n  2/5  what should it feel like?');
+    MOOD_NAMES.forEach((m, i) => console.log(`     ${i + 1}. ${m.padEnd(10)} ${MOODS[m].blurb}`));
+    const dmIdx = Math.max(0, MOOD_NAMES.indexOf(defaults.mood || 'editorial'));
+    const moodPick = (await ask(`     pick 1-${MOOD_NAMES.length} [${dmIdx + 1}]: `)).trim();
+    ans.mood = MOOD_NAMES[(parseInt(moodPick, 10) - 1)] || MOOD_NAMES[dmIdx];
+    const mood = MOODS[ans.mood];
+
+    if (mood.forceMode) {
+      ans.mode = mood.forceMode;
+      console.log(`     (${ans.mood} is ${mood.forceMode}-only)`);
+    } else {
+      const dmode = defaults.mode || mood.defaultMode;
+      const mp = (await ask(`\n  3/5  light or dark? [${dmode[0]}]: `)).trim().toLowerCase();
+      ans.mode = mp.startsWith('l') ? 'light' : mp.startsWith('d') ? 'dark' : dmode;
+    }
+
+    console.log('\n  4/5  your accent — the one color that is unmistakably yours:');
+    mood.swatches.forEach((s, i) => console.log(`     ${i + 1}. ${sw(s)} ${s}`));
+    const dac = normHex(defaults.accent) || mood.swatches[0];
+    const ap = (await ask(`     pick 1-${mood.swatches.length}, or paste a hex [${dac}]: `)).trim();
+    if (!ap) ans.accent = dac;
+    else if (/^[1-9]$/.test(ap) && mood.swatches[parseInt(ap, 10) - 1]) ans.accent = mood.swatches[parseInt(ap, 10) - 1];
+    else if (isHex(ap)) ans.accent = normHex(ap);
+    else { console.log(`     '${ap}' is not 1-${mood.swatches.length} or a hex, keeping ${dac}`); ans.accent = dac; }
+
+    console.log('\n  5/5  type personality:');
+    const fontKeys = Object.keys(FONT_PERSONALITIES);
+    fontKeys.forEach((k, i) => console.log(`     ${i + 1}. ${k.padEnd(15)} ${FONT_PERSONALITIES[k].display} / ${FONT_PERSONALITIES[k].body}`));
+    const dfIdx = fontKeys.indexOf(typeof defaults.fonts === 'string' ? defaults.fonts : mood.fonts);
+    const fp = (await ask(`     pick 1-${fontKeys.length} [${(dfIdx < 0 ? 0 : dfIdx) + 1}]: `)).trim();
+    ans.fonts = fontKeys[(parseInt(fp, 10) - 1)] || fontKeys[dfIdx < 0 ? 0 : dfIdx];
+  } finally {
+    rl.close();
+  }
+  return ans;
+}
+
+function confirmSync(q) {
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((res) => rl.question(q, (a) => { rl.close(); res(!String(a).trim().toLowerCase().startsWith('n')); }));
+}
+
+// shared create/edit flow. defaults seed an edit; flags override anything; interactive
+// only when there's a TTY and no defining flags.
+async function createFlow({ name, defaults = {}, flags }) {
+  const answers = { ...defaults };
+  if (flags.mood) answers.mood = flags.mood;
+  if (flags.mode) answers.mode = flags.mode;
+  if (flags.accent) answers.accent = flags.accent;
+  if (flags.accent2) answers.accent2 = flags.accent2;
+  if (flags.fonts) answers.fonts = flags.fonts;
+  let themeName = name || flags.name || defaults.name || 'brand';
+
+  const hasDefiningFlag = Boolean(flags.mood || flags.mode || flags.accent || flags.accent2 || flags.fonts || flags.name);
+  const interactive = Boolean(process.stdin.isTTY) && !flags.yes && !hasDefiningFlag;
+
+  if (interactive) {
+    const r = await interview({ name: themeName, ...answers });
+    Object.assign(answers, r);
+    themeName = r.name || themeName;
+  }
+  themeName = String(themeName).trim() || 'brand';
+
+  if (answers.mood && !MOODS[answers.mood]) { console.error(`  unknown mood "${answers.mood}". try: ${MOOD_NAMES.join(', ')}`); return 2; }
+  if (answers.accent && !isHex(answers.accent)) { console.error(`  not a hex color: ${answers.accent}`); return 2; }
+  if (answers.accent2 && !isHex(answers.accent2)) { console.error(`  not a hex color: ${answers.accent2}`); return 2; }
+  if (answers.fonts && typeof answers.fonts === 'string' && !FONT_PERSONALITIES[answers.fonts]) {
+    console.error(`  unknown font personality "${answers.fonts}". try: ${Object.keys(FONT_PERSONALITIES).join(', ')}`); return 2;
+  }
+
+  const theme = buildTheme(answers);
+  printPreview(themeName, answers, theme);
+  const warns = themeWarnings(theme);
+  if (warns.length) { console.log('\n  heads up:'); warns.forEach((w) => console.log(`   ! ${w}`)); }
+
+  if (interactive) {
+    const ok = await confirmSync('\n  save this theme? [enter = yes, n = cancel] ');
+    if (!ok) { console.log('  cancelled, nothing written.\n'); return 0; }
+  }
+
+  const recipe = {
+    mood: answers.mood || 'editorial',
+    mode: resolveMode(answers.mood || 'editorial', answers.mode),
+    accent: theme.color.accent,
+    accent2: theme.color.accent2,
+    fonts: typeof answers.fonts === 'string' ? answers.fonts : (MOODS[answers.mood || 'editorial'].fonts),
+  };
+
+  let res;
+  try { res = upsertProjectTheme(themeName, theme, process.cwd(), recipe); }
+  catch (e) { console.error(`  ${e.message}`); return 1; }
+
+  console.log(`\n  ✓ ${res.action} theme "${res.name}" in ${PROJECT_THEME_FILE}  (${res.count} theme${res.count === 1 ? '' : 's'})`);
+  console.log('    use it anywhere:');
+  console.log(`      atris deck from doc.md --html --theme ${res.name}`);
+  console.log(`      atris site ./docs --theme ${res.name}`);
+  console.log(`    tweak it later:  atris theme edit ${res.name}\n`);
+  return 0;
+}
+
+async function run(argv) {
+  const sub = argv[0];
+  const rest = argv.slice(1);
+
+  if (sub === 'create' || sub === 'new') {
+    const { flags, pos } = parseFlags(rest);
+    return createFlow({ name: pos[0], flags });
+  }
+
+  if (sub === 'edit') {
+    const { flags, pos } = parseFlags(rest);
+    const name = pos[0] || flags.name;
+    if (!name) { console.error('  usage: atris theme edit <name>'); return 2; }
+    const existing = loadProjectThemes()[name];
+    if (!existing) { console.error(`  no project theme "${name}". make one with: atris theme create ${name}`); return 2; }
+    // prefer the saved recipe; otherwise seed from the resolved colors/fonts
+    const recipe = loadThemeRecipe(name);
+    const defaults = recipe || { accent: existing.color.accent, accent2: existing.color.accent2, fonts: existing.fonts };
+    defaults.name = name;
+    return createFlow({ name, defaults, flags });
+  }
+
+  if (sub === 'init') {
+    const { file, already } = writeStarterTheme();
+    console.log(already
+      ? `\n  already exists: ${file}\n  customize it with: atris theme edit brand\n`
+      : `\n  ✓ brand theme scaffolded: ${file}\n    or build one by feel:  atris theme create\n`);
+    return 0;
+  }
+
+  if (sub === 'show') {
+    const name = rest[0];
+    const t = mergedThemes(HTML_THEMES)[name];
+    if (!t) { console.error(`  unknown theme "${name}"`); return 2; }
+    console.log(JSON.stringify(t, null, 2));
+    return 0;
+  }
+
+  // list (default)
+  const project = loadProjectThemes();
+  const all = mergedThemes(HTML_THEMES);
+  console.log('\n  atris themes:\n');
+  for (const name of Object.keys(all)) {
+    const tag = project[name] ? 'project' : 'built-in';
+    console.log(`  ${sw(all[name].color.accent)} ${name.padEnd(12)} accent ${all[name].color.accent}  bg ${all[name].color.bg}  (${tag})`);
+  }
+  console.log(`\n  make your own by feel:  atris theme create`);
+  console.log(`  themes live in ${PROJECT_THEME_FILE}. Used by deck, html, and site.\n`);
+  return 0;
+}
+
+module.exports = { run };

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