atris 3.17.0 → 3.23.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/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 };