onboarding-kit 0.0.0-stage → 0.2.0

package/dist/render/index.js

@@ -0,0 +1,230 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.escapeHtml = void 0;
+exports.renderMissingPage = renderMissingPage;
+exports.renderErrorPage = renderErrorPage;
+exports.renderOnboarding = renderOnboarding;
+const brand_1 = require("../brand");
+const load_1 = require("../load");
+const template_1 = require("../template");
+const assets_1 = require("./assets");
+const copy_1 = require("./copy");
+const html_1 = require("./html");
+const slides_1 = require("./slides");
+var html_2 = require("./html");
+Object.defineProperty(exports, "escapeHtml", { enumerable: true, get: function () { return html_2.escapeHtml; } });
+const ICON_GRID = '<svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M3 3h5.5v5.5H3zM11.5 3H17v5.5h-5.5zM3 11.5h5.5V17H3zM11.5 11.5H17V17h-5.5z" opacity=".9"/></svg>';
+const ICON_THEME = '<svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M10 3a7 7 0 0 1 0 14z" fill="currentColor"/></svg>';
+const HUE_OFFSETS = [0, 18, -18, 36, -36];
+/**
+ * Tema a partir das cores da marca. Sem cores, mantém a paleta própria do kit.
+ * Com uma cor, os capítulos variam levemente em torno dela; com várias, se revezam entre elas.
+ * Marcas sem cor (preto/cinza) viram um tema monocromático.
+ */
+function themeFor(brand) {
+    const chromatic = brand.colors.filter((c) => !(0, brand_1.isAchromatic)(c)).map((c) => ({ ...c, h: Math.round(c.h) }));
+    const ref = chromatic[0] ?? (brand.colors[0] && { ...brand.colors[0], h: Math.round(brand.colors[0].h) });
+    if (!ref)
+        return { brand, hues: copy_1.CHAPTER_HUES, hue: copy_1.CHAPTER_HUES.welcome, css: "", mono: false };
+    const mono = chromatic.length === 0;
+    const hues = { ...copy_1.CHAPTER_HUES };
+    hues.welcome = hues.finale = ref.h;
+    slides_1.CHAPTERS.forEach(([id], i) => {
+        hues[id] = chromatic.length > 1 ? chromatic[i % chromatic.length].h : (ref.h + HUE_OFFSETS[i % HUE_OFFSETS.length] + 360) % 360;
+    });
+    const k = mono ? 0 : Math.round(Math.min(1, ref.s / 55) * 100) / 100;
+    const h2 = chromatic[1]?.h ?? (ref.h + 28) % 360;
+    const css = `:root{--brand-h:${ref.h};--h2:${h2};--k:${k};--brand-c:hsl(${ref.h} calc(var(--as) * ${k}) var(--al));--brand-on:var(--on-accent)}`;
+    return { brand, hues, hue: ref.h, css, mono };
+}
+function shell(lang, title, body, theme, opts = {}) {
+    const palette = theme.brand.colors.map(brand_1.toHex).join(" ");
+    return `<!doctype html>
+<html lang="${(0, html_1.escapeHtml)(lang)}"${theme.mono ? " data-mono" : ""}${palette ? ` data-palette="${palette}"` : ""}>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex">
+<title>${(0, html_1.escapeHtml)(title)}</title>
+${theme.brand.favicon ? `<link rel="icon" href="${(0, html_1.escapeHtml)(theme.brand.favicon)}">` : ""}
+${theme.brand.colors[0] ? `<meta name="theme-color" content="${(0, brand_1.toHex)(theme.brand.colors[0])}">` : ""}
+${assets_1.FONTS}
+<style>${assets_1.CSS}${theme.css}</style>
+</head>
+<body${opts.solo ? ' class="solo"' : ""}${opts.state ? ` data-ok-state="${opts.state}"` : ""}>
+<div class="backdrop" id="ok-backdrop" style="--bh:${theme.hue}" aria-hidden="true"><i></i><i></i><i></i></div>
+${body}
+<script>${assets_1.JS}</script>
+${opts.mermaid ? `<script src="${assets_1.MERMAID_URL}" onload="window.__okMermaid&&window.__okMermaid()"></script>` : ""}
+</body>
+</html>`;
+}
+function logoImg(theme, cls) {
+    return theme.brand.logo ? `<span class="${cls}"><img src="${(0, html_1.escapeHtml)(theme.brand.logo)}" alt=""></span>` : "";
+}
+function soloHead(theme, name, heading, body) {
+    const kicker = `<p class="kicker"><span class="num">👋</span>${(0, html_1.escapeHtml)(name ?? "onboarding-kit")}</p>`;
+    return `${logoImg(theme, "solo-logo")}${kicker}<h1>${(0, html_1.escapeHtml)(heading)}</h1>${body ? `<p>${(0, html_1.escapeHtml)(body)}</p>` : ""}`;
+}
+function promptBlock(t, prompt) {
+    return `<ol class="solo-steps">${t.pending.steps.map((step, i) => `<li><b>${i + 1}</b><span>${(0, html_1.escapeHtml)(step)}</span></li>`).join("")}</ol>
+<div class="prompt-box"><pre class="prompt-text">${(0, html_1.escapeHtml)(prompt)}</pre><button type="button" class="cta copy-cta" data-copy="${(0, html_1.escapeHtml)(prompt)}" data-done="✓ ${(0, html_1.escapeHtml)(t.pending.copied)}">${(0, html_1.escapeHtml)(t.pending.copy)}</button></div>`;
+}
+function waiting(t) {
+    return `<p class="waiting" aria-live="polite"><span class="pulse" aria-hidden="true"></span>${(0, html_1.escapeHtml)(t.pending.waiting)}</p>`;
+}
+/** Seções do JSON acompanhadas na tela de espera enquanto a IA preenche. */
+const PROGRESS_SECTIONS = ["project", "business", "features", "domain", "stack", "architecture", "gettingStarted", "conventions", "tours", "gotchas", "decisions", "firstTasks", "brand"];
+function progressBlock(data, t) {
+    const items = PROGRESS_SECTIONS.map((key) => ({ key, done: !(0, load_1.isBlank)(data[key]) }));
+    const done = items.filter((i) => i.done).length;
+    return `<div class="progress" id="ok-progress"><p class="mini-label">${(0, html_1.escapeHtml)(t.pending.progress.replace("{done}", String(done)).replace("{total}", String(items.length)))}</p><div class="progress-bar"><span style="width:${Math.round((done / items.length) * 100)}%"></span></div><ul class="progress-list">${items
+        .map((i) => `<li data-key="${i.key}"${i.done ? ' class="is-done"' : ""}>${(0, html_1.escapeHtml)(t.pending.sections[i.key])}</li>`)
+        .join("")}</ul></div>`;
+}
+function soloPage(lang, title, inner, theme, state) {
+    return shell(lang, title, `<div class="solo-wrap" style="--h:${theme.hue}"><div class="solo-card">${inner}</div></div>`, theme, { solo: true, state });
+}
+function renderMissingPage(root) {
+    const t = (0, copy_1.copyFor)("pt-BR");
+    const theme = themeFor((0, brand_1.resolveBrand)(undefined, root));
+    const name = (0, brand_1.packageName)(root);
+    const inner = `${soloHead(theme, name, t.missing.title, t.missing.body)}${promptBlock(t, (0, template_1.aiPrompt)(undefined, { init: true }))}${waiting(t)}<p class="manual">${(0, html_1.escapeHtml)(t.missing.manual)} <code>npx onboarding-kit init</code></p>`;
+    return soloPage("pt-BR", name ? `${name} · Onboarding` : "Onboarding", inner, theme, "missing");
+}
+function renderErrorPage(message, root) {
+    const t = (0, copy_1.copyFor)("pt-BR");
+    const theme = themeFor((0, brand_1.resolveBrand)(undefined, root));
+    const name = (0, brand_1.packageName)(root);
+    const inner = `${soloHead(theme, name, t.invalid.title, t.invalid.body)}<pre class="error-text">${(0, html_1.escapeHtml)(message)}</pre>${waiting(t)}`;
+    return soloPage("pt-BR", "Onboarding", inner, theme, "error");
+}
+function renderPendingPage(data, root, lang, t) {
+    const theme = themeFor((0, brand_1.resolveBrand)(data, root));
+    const name = data.project?.name?.trim() || (0, brand_1.packageName)(root);
+    const inner = `${soloHead(theme, name, t.pending.title, t.pending.body)}${promptBlock(t, (0, template_1.aiPrompt)())}${waiting(t)}${progressBlock(data, t)}`;
+    return soloPage(lang, name ? `${name} · Onboarding` : "Onboarding", inner, theme, "pending");
+}
+function welcomeSlide(data, t, chapters, minutes, theme) {
+    const p = data.project;
+    const name = p?.name?.trim() || "Onboarding";
+    const generated = data.meta?.generatedAt ? new Date(data.meta.generatedAt) : undefined;
+    const base = (0, html_1.repoBase)(data);
+    const meta = [
+        p?.status ? `<span class="badge">${(0, html_1.escapeHtml)(p.status)}</span>` : "",
+        `<span>⏱ ${minutes} ${t.ui.minutes}</span>`,
+        generated && !Number.isNaN(generated.getTime())
+            ? `<span>${t.ui.generated} ${(0, html_1.escapeHtml)(generated.toLocaleDateString(data.meta.language || "pt-BR"))}${data.meta.generatedBy ? ` ${t.ui.by} ${(0, html_1.escapeHtml)(data.meta.generatedBy)}` : ""}</span>`
+            : "",
+        base ? `<a href="${(0, html_1.escapeHtml)(base)}" target="_blank" rel="noopener">${(0, html_1.escapeHtml)(base.replace(/^https?:\/\//, ""))}</a>` : "",
+    ].filter(Boolean);
+    const journey = chapters
+        .filter((c) => c.id !== "welcome" && c.id !== "finale")
+        .map((c) => `<li><button type="button" data-go="${c.start}" style="--ch:${theme.hues[c.id]}"><span class="n">${c.num}</span>${(0, html_1.escapeHtml)(c.name)}</button></li>`)
+        .join("");
+    return {
+        chapter: "welcome",
+        kind: "welcome",
+        title: t.chapters.welcome,
+        html: `<div class="welcome">
+${logoImg(theme, "brand-logo")}
+<p class="hi"><span class="wave" aria-hidden="true">👋</span>${(0, html_1.escapeHtml)(t.welcome.hi)}</p>
+<h1 class="title">${(0, html_1.escapeHtml)(t.welcome.title("")).trim()} <span class="grad">${(0, html_1.escapeHtml)(name)}</span></h1>
+${p?.tagline ? `<p class="tagline">${(0, html_1.text)(p.tagline)}</p>` : ""}
+<p class="lede">${(0, html_1.escapeHtml)(t.welcome.intro(minutes))}</p>
+<button type="button" class="cta" data-next>${(0, html_1.escapeHtml)(t.welcome.start)} <span class="arrow" aria-hidden="true">→</span></button>
+<div class="meta">${meta.join("")}</div>
+${journey ? `<div class="journey-wrap"><p class="mini-label">${(0, html_1.escapeHtml)(t.welcome.journey)}</p><ul class="journey">${journey}</ul></div>` : ""}
+</div>`,
+    };
+}
+function finaleSlide(t, chapters, hasTasks, theme) {
+    const recap = chapters
+        .filter((c) => c.id !== "welcome" && c.id !== "finale")
+        .map((c) => `<li style="--ch:${theme.hues[c.id]}">${(0, html_1.escapeHtml)(c.name)}</li>`)
+        .join("");
+    return {
+        chapter: "finale",
+        kind: "finale",
+        title: t.finale.title,
+        html: `<div class="finale">
+<span class="party" aria-hidden="true">🎉</span>
+<h1 class="title">${(0, html_1.escapeHtml)(t.finale.title)}</h1>
+<p class="lede">${(0, html_1.escapeHtml)(t.finale.lede)}</p>
+${recap ? `<p class="mini-label">${(0, html_1.escapeHtml)(t.finale.recap)}</p><ul class="recap">${recap}</ul>` : ""}
+${hasTasks ? `<p class="task-count" data-task-count data-template="${(0, html_1.escapeHtml)(t.finale.tasks)}"></p>` : ""}
+<div class="actions"><button type="button" class="cta" data-go="0">↺ ${(0, html_1.escapeHtml)(t.finale.restart)}</button><button type="button" class="ghost" data-overview>${(0, html_1.escapeHtml)(t.finale.index)}</button></div>
+</div>`,
+    };
+}
+function renderOnboarding(data, options = {}) {
+    const lang = data.meta?.language || "pt-BR";
+    const t = (0, copy_1.copyFor)(lang);
+    const name = data.project?.name?.trim() || "Onboarding";
+    if (data.meta?.status !== "filled") {
+        return renderPendingPage(data, options.root, lang, t);
+    }
+    const theme = themeFor((0, brand_1.resolveBrand)(data, options.root));
+    // 1. capítulos do meio, numerados só quando têm conteúdo
+    const middle = [];
+    let num = 1;
+    for (const [id, build] of slides_1.CHAPTERS) {
+        const slides = build({ data, t, num });
+        if (slides.length) {
+            middle.push({ id, slides });
+            num++;
+        }
+    }
+    // 2. índice de capítulos com a posição de cada um no deck
+    const chapters = [];
+    let cursor = 1; // slide 0 é a boas-vindas
+    chapters.push({ id: "welcome", num: 0, name: t.chapters.welcome, start: 0, count: 1 });
+    middle.forEach((c, i) => {
+        chapters.push({ id: c.id, num: i + 1, name: t.chapters[c.id], start: cursor, count: c.slides.length });
+        cursor += c.slides.length;
+    });
+    chapters.push({ id: "finale", num: middle.length + 1, name: t.chapters.finale, start: cursor, count: 1 });
+    const total = cursor + 1;
+    const minutes = Math.max(3, Math.round(total * 0.4));
+    const hasTasks = middle.some((c) => c.id === "mission");
+    const slides = [welcomeSlide(data, t, chapters, minutes, theme), ...middle.flatMap((c) => c.slides), finaleSlide(t, chapters, hasTasks, theme)];
+    const chapterNum = (id) => (id === "welcome" ? "👋" : id === "finale" ? "🎉" : String(chapters.find((c) => c.id === id)?.num ?? ""));
+    const slideHtml = slides
+        .map((s, i) => `<section class="slide" data-kind="${(0, html_1.escapeHtml)(s.kind ?? s.chapter)}" data-chapter="${s.chapter}" data-chapter-name="${(0, html_1.escapeHtml)(t.chapters[s.chapter])}" data-chapter-num="${chapterNum(s.chapter)}" style="--h:${theme.hues[s.chapter]}" aria-roledescription="slide" aria-label="${i + 1} / ${total}" aria-hidden="true"><div class="slide-inner">${s.html}</div></section>`)
+        .join("\n");
+    const segments = chapters
+        .map((c) => `<button type="button" class="seg" data-go="${c.start}" data-start="${c.start}" data-count="${c.count}" style="--h:${theme.hues[c.id]};--w:${c.count}" title="${(0, html_1.escapeHtml)(c.name)}" aria-label="${(0, html_1.escapeHtml)(c.name)}"><span></span></button>`)
+        .join("");
+    let index = 0;
+    const overview = chapters
+        .map((c) => {
+        const items = slides
+            .slice(c.start, c.start + c.count)
+            .map((s) => `<button type="button" data-go="${index++}">${(0, html_1.escapeHtml)(s.title)}</button>`)
+            .join("");
+        return `<div class="ov-chapter" style="--ch:${theme.hues[c.id]}"><h3><span class="n">${chapterNum(c.id)}</span>${(0, html_1.escapeHtml)(c.name)}</h3>${items}</div>`;
+    })
+        .join("");
+    const body = `<div class="deck">
+<header class="topbar">
+<span class="brand">${logoImg(theme, "brand-mark")}<span class="brand-name">${(0, html_1.escapeHtml)(name)}</span></span>
+<nav class="segments" aria-label="${(0, html_1.escapeHtml)(t.ui.chapters)}">${segments}</nav>
+<button type="button" class="icon-btn" data-overview title="${(0, html_1.escapeHtml)(t.ui.overview)} (O)" aria-label="${(0, html_1.escapeHtml)(t.ui.overview)}">${ICON_GRID}</button>
+<button type="button" class="icon-btn" data-theme-toggle title="${(0, html_1.escapeHtml)(t.ui.theme)}" aria-label="${(0, html_1.escapeHtml)(t.ui.theme)}">${ICON_THEME}</button>
+</header>
+<main class="stage" id="ok-stage">
+${slideHtml}
+<div class="wipe" id="ok-wipe" aria-hidden="true"><span></span><strong></strong></div>
+</main>
+<footer class="controls">
+<button type="button" class="nav-btn" data-prev aria-label="${(0, html_1.escapeHtml)(t.ui.prev)}">← <span class="txt">${(0, html_1.escapeHtml)(t.ui.prev)}</span></button>
+<div class="where" aria-live="polite"><strong id="ok-chapter"></strong><span><span id="ok-count"></span><span class="hint" id="ok-hint"> · ${(0, html_1.escapeHtml)(t.ui.keys)}</span></span></div>
+<button type="button" class="nav-btn primary" data-next aria-label="${(0, html_1.escapeHtml)(t.ui.next)}"><span class="txt">${(0, html_1.escapeHtml)(t.ui.next)}</span> →</button>
+</footer>
+</div>
+<div class="overview" id="ok-overview" aria-hidden="true" role="dialog" aria-label="${(0, html_1.escapeHtml)(t.ui.overview)}">
+<div class="overview-inner"><div class="overview-head"><h2>${(0, html_1.escapeHtml)(t.ui.overview)}</h2><button type="button" class="icon-btn" data-close aria-label="${(0, html_1.escapeHtml)(t.ui.close)}">✕</button></div><div class="ov-grid">${overview}</div></div>
+</div>
+<div class="toast" id="ok-toast" data-template="${(0, html_1.escapeHtml)(t.ui.resume)}" role="status"><span></span><button type="button" class="yes" data-resume="0">${(0, html_1.escapeHtml)(t.ui.resumeYes)}</button><button type="button" data-dismiss>${(0, html_1.escapeHtml)(t.ui.resumeNo)}</button></div>`;
+    return shell(lang, `${name} · Onboarding`, body, theme, { mermaid: slides.some((s) => s.kind === "diagram") && !(0, load_1.isBlank)(data.architecture?.diagram) });
+}

package/dist/render/slides.d.ts

@@ -0,0 +1,19 @@
+import type { OnboardingData } from "../types";
+import type { ChapterId, Copy } from "./copy";
+export interface Slide {
+    chapter: ChapterId;
+    /** Título curto, usado no índice. */
+    title: string;
+    html: string;
+    kind?: string;
+}
+export interface Ctx {
+    data: OnboardingData;
+    t: Copy;
+    /** Número do capítulo (só capítulos com conteúdo contam). */
+    num: number;
+}
+type Builder = (ctx: Ctx) => Slide[];
+/** Capítulos do meio, em ordem narrativa: do porquê ao código. */
+export declare const CHAPTERS: [ChapterId, Builder][];
+export {};

package/dist/render/slides.js

@@ -0,0 +1,232 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHAPTERS = void 0;
+const load_1 = require("../load");
+const html_1 = require("./html");
+function head(ctx, chapter, title, lede, page) {
+    const cont = page && page[1] > 1 ? ` <span class="cont">${page[0]}/${page[1]}</span>` : "";
+    return `<p class="kicker"><span class="num">${ctx.num}</span>${(0, html_1.escapeHtml)(ctx.t.chapters[chapter])}</p>
+<h1 class="title">${(0, html_1.escapeHtml)(title)}${cont}</h1>${lede && (!page || page[0] === 1) ? `<p class="lede">${(0, html_1.text)(lede)}</p>` : ""}`;
+}
+/** Monta uma sequência de slides paginando uma lista. */
+function paged(ctx, chapter, items, size, title, lede, body, kind) {
+    const pages = (0, html_1.chunk)(items, size);
+    return pages.map((page, i) => ({
+        chapter,
+        kind,
+        title: pages.length > 1 ? `${title} (${i + 1}/${pages.length})` : title,
+        html: `${head(ctx, chapter, title, lede, [i + 1, pages.length])}${body(page, i * size)}`,
+    }));
+}
+/* ───────────────────────── capítulos ───────────────────────── */
+const why = (ctx) => {
+    const p = ctx.data.project;
+    if (!p || (0, load_1.isBlank)(p.purpose))
+        return [];
+    const { t } = ctx;
+    const cards = [
+        !(0, load_1.isBlank)(p.audience) ? `<div class="card"><span class="label">${t.why.audience}</span><p class="strong">${(0, html_1.text)(p.audience)}</p></div>` : "",
+        !(0, load_1.isBlank)(p.status) ? `<div class="card"><span class="label">${t.why.status}</span><p class="strong">${(0, html_1.text)(p.status)}</p></div>` : "",
+    ].join("");
+    return [
+        {
+            chapter: "why",
+            title: t.why.title,
+            html: `${head(ctx, "why", t.why.title, t.why.lede)}<p class="statement">${(0, html_1.text)(p.purpose)}</p>${cards ? `<div class="grid-2 reveal">${cards}</div>` : ""}`,
+        },
+    ];
+};
+const business = (ctx) => {
+    const b = ctx.data.business;
+    if (!b)
+        return [];
+    const { t, data } = ctx;
+    const slides = [];
+    if (!(0, load_1.isBlank)(b.model) || !(0, load_1.isBlank)(b.valueProposition)) {
+        const cards = [
+            !(0, load_1.isBlank)(b.valueProposition)
+                ? `<div class="card big-card"><span class="emoji" aria-hidden="true">💎</span><span class="label">${t.business.value}</span><p>${(0, html_1.text)(b.valueProposition)}</p></div>`
+                : "",
+            !(0, load_1.isBlank)(b.model)
+                ? `<div class="card big-card"><span class="emoji" aria-hidden="true">🧭</span><span class="label">${t.business.model}</span><p>${(0, html_1.text)(b.model)}</p></div>`
+                : "",
+        ].join("");
+        slides.push({ chapter: "business", title: t.business.title, html: `${head(ctx, "business", t.business.title, t.business.lede)}<div class="grid-2 reveal">${cards}</div>` });
+    }
+    const actors = (0, load_1.filled)(b.actors);
+    slides.push(...paged(ctx, "business", actors, 6, t.business.actorsTitle, t.business.actorsLede, (page) => `<div class="grid reveal">${page
+        .map((a) => `<div class="card actor"><span class="avatar" style="--ah:${(0, html_1.hueFrom)(a.name)}">${(0, html_1.escapeHtml)((0, html_1.initials)(a.name))}</span><div><h3>${(0, html_1.escapeHtml)(a.name)}</h3><p>${(0, html_1.text)(a.description)}</p>${(0, html_1.evidenceList)(a.evidence, data)}</div></div>`)
+        .join("")}</div>`));
+    const flows = (0, load_1.filled)(b.flows);
+    slides.push(...paged(ctx, "business", flows, 2, t.business.flowsTitle, t.business.flowsLede, (page) => page
+        .map((f) => `<div class="flow"><h3>${(0, html_1.escapeHtml)(f.name)}</h3><ol class="chain reveal">${(0, load_1.filled)(f.steps)
+        .map((s, i) => `<li><span class="step"><b>${i + 1}</b>${(0, html_1.text)(s)}</span></li>`)
+        .join("")}</ol>${(0, html_1.evidenceList)(f.evidence, data)}</div>`)
+        .join("")));
+    return slides;
+};
+const product = (ctx) => {
+    const { t, data } = ctx;
+    return paged(ctx, "product", (0, load_1.filled)(data.features), 6, t.product.title, t.product.lede, (page) => `<div class="grid reveal">${page
+        .map((f) => `<div class="card feature"><div class="card-top"><h3>${(0, html_1.escapeHtml)(f.name)}</h3>${f.status ? `<span class="badge">${(0, html_1.escapeHtml)(f.status)}</span>` : ""}</div><p>${(0, html_1.text)(f.description)}</p>${(0, html_1.evidenceList)(f.entryPoints, data)}</div>`)
+        .join("")}</div>`);
+};
+const language = (ctx) => {
+    const { t, data } = ctx;
+    const terms = (0, load_1.filled)(data.domain?.glossary);
+    const slides = paged(ctx, "language", terms, 8, t.language.title, t.language.lede, (page) => `<div class="flips reveal">${page
+        .map((g) => `<button class="flip" type="button" aria-pressed="false"><span class="flip-inner"><span class="face front"><strong>${(0, html_1.escapeHtml)(g.term)}</strong><small>${t.language.tap} ↻</small></span><span class="face back">${(0, html_1.text)(g.definition)}</span></span></button>`)
+        .join("")}</div>`);
+    if (terms.length >= 3) {
+        const picks = [...new Set([0, Math.floor(terms.length / 2), terms.length - 1])];
+        const questions = picks
+            .map((idx, qi) => {
+            const right = terms[idx];
+            const wrong = [terms[(idx + 1) % terms.length], terms[(idx + 2) % terms.length]];
+            const options = [
+                { label: right.definition, correct: true },
+                ...wrong.map((w) => ({ label: w.definition, correct: false })),
+            ];
+            // embaralha de forma determinística, para a resposta certa não ficar sempre em primeiro
+            const shift = ((0, html_1.hueFrom)(right.term) + qi) % 3;
+            const rotated = options.slice(shift).concat(options.slice(0, shift));
+            return `<div class="quiz-q" data-quiz data-right="${(0, html_1.escapeHtml)(t.language.right)}" data-wrong="${(0, html_1.escapeHtml)(t.language.wrong)}"><p class="q">${(0, html_1.escapeHtml)(t.language.question(right.term))}</p><div class="opts">${rotated
+                .map((o) => `<button type="button" class="opt" data-correct="${o.correct ? 1 : 0}">${(0, html_1.text)(o.label)}</button>`)
+                .join("")}</div><p class="feedback" aria-live="polite"></p></div>`;
+        })
+            .join("");
+        slides.push({
+            chapter: "language",
+            kind: "quiz",
+            title: t.language.quizTitle,
+            html: `${head(ctx, "language", t.language.quizTitle, t.language.quizLede)}<div class="quiz reveal">${questions}</div><p class="score" data-quiz-score data-template="${(0, html_1.escapeHtml)(t.language.score)}" aria-live="polite"></p>`,
+        });
+    }
+    return slides;
+};
+const rules = (ctx) => {
+    const { t, data } = ctx;
+    return paged(ctx, "rules", (0, load_1.filled)(data.domain?.businessRules), 3, t.rules.title, t.rules.lede, (page, offset) => `<div class="rules reveal">${page
+        .map((r, i) => `<div class="card rule"><span class="rule-num" aria-label="${t.rules.rule} ${offset + i + 1}">${(0, html_1.pad)(offset + i + 1)}</span><div><h3>${(0, html_1.escapeHtml)(r.title)}</h3><p>${(0, html_1.text)(r.description)}</p>${(0, html_1.evidenceList)(r.evidence, data)}</div></div>`)
+        .join("")}</div>`);
+};
+const stack = (ctx) => {
+    const { t, data } = ctx;
+    const items = (0, load_1.filled)(data.stack).sort((a, b) => (a.category || "").localeCompare(b.category || ""));
+    return paged(ctx, "stack", items, 6, t.stack.title, t.stack.lede, (page) => `<div class="grid reveal">${page
+        .map((s) => `<div class="card tech"><div class="tech-head"><span class="logo" style="--th:${(0, html_1.hueFrom)(s.name)}">${(0, html_1.escapeHtml)((0, html_1.initials)(s.name))}</span><div><strong>${(0, html_1.escapeHtml)(s.name)}</strong><small>${(0, html_1.escapeHtml)([s.category, s.version].filter(Boolean).join(" · "))}</small></div></div><p>${(0, html_1.text)(s.why)}</p>${(0, html_1.evidenceList)(s.evidence, data)}</div>`)
+        .join("")}</div>`);
+};
+const architecture = (ctx) => {
+    const { t, data } = ctx;
+    const a = data.architecture;
+    if (!a)
+        return [];
+    const slides = [];
+    if (!(0, load_1.isBlank)(a.summary) || !(0, load_1.isBlank)(a.diagram)) {
+        const hasDiagram = !(0, load_1.isBlank)(a.diagram);
+        slides.push({
+            chapter: "architecture",
+            kind: hasDiagram ? "diagram" : undefined,
+            title: t.architecture.title,
+            html: `${head(ctx, "architecture", t.architecture.title, hasDiagram ? a.summary : undefined)}${hasDiagram ? `<div class="diagram reveal"><pre class="mermaid">${(0, html_1.escapeHtml)(a.diagram)}</pre></div>` : `<p class="statement">${(0, html_1.text)(a.summary)}</p>`}`,
+        });
+    }
+    slides.push(...paged(ctx, "architecture", (0, load_1.filled)(a.modules), 6, t.architecture.modulesTitle, t.architecture.modulesLede, (page) => `<div class="modules reveal">${page
+        .map((m) => `<div class="module"><div><strong>${(0, html_1.escapeHtml)(m.name)}</strong><code>${(0, html_1.escapeHtml)(m.path)}</code></div><p>${(0, html_1.text)(m.responsibility)}</p></div>`)
+        .join("")}</div>`));
+    return slides;
+};
+const setup = (ctx) => {
+    const { t, data } = ctx;
+    const gs = data.gettingStarted;
+    if (!gs)
+        return [];
+    const slides = [];
+    const prereq = (0, load_1.filled)(gs.prerequisites);
+    const steps = (0, load_1.filled)(gs.setup);
+    if (prereq.length || steps.length) {
+        slides.push({
+            chapter: "setup",
+            title: t.setup.title,
+            html: `${head(ctx, "setup", t.setup.title, t.setup.lede)}${prereq.length ? `<p class="mini-label">${t.setup.prereq}</p><ul class="pills reveal">${prereq.map((p) => `<li>${(0, html_1.text)(p)}</li>`).join("")}</ul>` : ""}${steps.length ? `<ol class="steps reveal">${steps.map((s) => `<li><span>${(0, html_1.text)(s)}</span></li>`).join("")}</ol>` : ""}`,
+        });
+    }
+    slides.push(...paged(ctx, "setup", (0, load_1.filled)(gs.commands), 6, t.setup.commandsTitle, t.setup.commandsLede, (page) => `<div class="terminal reveal"><div class="term-bar" aria-hidden="true"><i></i><i></i><i></i></div>${page
+        .map((c) => `<div class="cmd"><div><code>${(0, html_1.escapeHtml)(c.command)}</code>${c.description ? `<p>${(0, html_1.text)(c.description)}</p>` : ""}</div><button type="button" class="copy" data-copy="${(0, html_1.escapeHtml)(c.command)}" data-done="${(0, html_1.escapeHtml)(t.setup.copied)}">${t.setup.copy}</button></div>`)
+        .join("")}</div>`));
+    slides.push(...paged(ctx, "setup", (0, load_1.filled)(gs.envVars), 8, t.setup.envTitle, t.setup.envLede, (page) => `<div class="grid reveal">${page
+        .map((v) => `<div class="card env"><div class="card-top"><code>${(0, html_1.escapeHtml)(v.name)}</code><span class="badge ${v.required ? "badge-strong" : ""}">${v.required ? t.setup.required : t.setup.optional}</span></div><p>${(0, html_1.text)(v.description)}</p></div>`)
+        .join("")}</div>`));
+    return slides;
+};
+const conventions = (ctx) => {
+    const { t, data } = ctx;
+    return paged(ctx, "conventions", (0, load_1.filled)(data.conventions), 2, t.conventions.title, t.conventions.lede, (page) => `<div class="grid-2 reveal">${page
+        .map((c) => `<div class="card convention"><h3>${(0, html_1.escapeHtml)(c.title)}</h3><p>${(0, html_1.text)(c.description)}</p>${c.example?.trim() ? `<pre><code>${(0, html_1.escapeHtml)(c.example)}</code></pre>` : ""}${(0, html_1.evidenceList)(c.evidence, data)}</div>`)
+        .join("")}</div>`);
+};
+const tours = (ctx) => {
+    const { t, data } = ctx;
+    const slides = [];
+    for (const tour of (0, load_1.filled)(data.tours)) {
+        const steps = (0, load_1.filled)(tour.steps);
+        if (!steps.length)
+            continue;
+        slides.push({
+            chapter: "tours",
+            title: tour.title,
+            html: `<p class="kicker"><span class="num">${ctx.num}</span>${(0, html_1.escapeHtml)(t.tours.kicker)}</p><h1 class="title">${(0, html_1.escapeHtml)(tour.title)}</h1><p class="lede">${(0, html_1.text)(tour.description || t.tours.intro)}</p><p class="mini-label">${t.tours.stops}</p><ol class="route reveal">${steps
+                .map((s) => `<li><code>${(0, html_1.escapeHtml)(s.file)}</code></li>`)
+                .join("")}</ol>`,
+        });
+        steps.forEach((s, i) => {
+            slides.push({
+                chapter: "tours",
+                kind: "tour-step",
+                title: `${tour.title} · ${i + 1}`,
+                html: `<p class="kicker"><span class="num">${ctx.num}</span>${(0, html_1.escapeHtml)(tour.title)}</p><div class="tour-step"><span class="bignum" aria-hidden="true">${(0, html_1.pad)(i + 1)}</span><div><p class="mini-label">${(0, html_1.escapeHtml)(t.tours.stop(i + 1, steps.length))}</p>${(0, html_1.evidenceChip)(s.file, data, "ev-lg")}<p class="statement small">${(0, html_1.text)(s.explanation)}</p><div class="stops" aria-hidden="true">${steps
+                    .map((_, j) => `<i class="${j <= i ? "on" : ""}"></i>`)
+                    .join("")}</div></div></div>`,
+            });
+        });
+    }
+    return slides;
+};
+const gotchas = (ctx) => {
+    const { t, data } = ctx;
+    return paged(ctx, "gotchas", (0, load_1.filled)(data.gotchas), 3, t.gotchas.title, t.gotchas.lede, (page) => `<div class="stack-list reveal">${page
+        .map((g) => `<div class="card gotcha"><span class="emoji" aria-hidden="true">🍌</span><div><h3>${(0, html_1.escapeHtml)(g.title)}</h3><p>${(0, html_1.text)(g.description)}</p>${(0, html_1.evidenceList)(g.evidence, data)}</div></div>`)
+        .join("")}</div>`);
+};
+const decisions = (ctx) => {
+    const { t, data } = ctx;
+    return paged(ctx, "decisions", (0, load_1.filled)(data.decisions), 2, t.decisions.title, t.decisions.lede, (page) => `<div class="stack-list reveal">${page
+        .map((d) => `<div class="card decision"><h3>${(0, html_1.escapeHtml)(d.title)}</h3><div class="split">${d.context ? `<div><span class="label">${t.decisions.context}</span><p>${(0, html_1.text)(d.context)}</p></div>` : ""}${d.decision ? `<div><span class="label">${t.decisions.decision}</span><p>${(0, html_1.text)(d.decision)}</p></div>` : ""}</div>${(0, html_1.evidenceList)(d.evidence, data)}</div>`)
+        .join("")}</div>`);
+};
+const mission = (ctx) => {
+    const { t, data } = ctx;
+    return paged(ctx, "mission", (0, load_1.filled)(data.firstTasks), 5, t.mission.title, t.mission.lede, (page) => `<div class="tasks reveal">${page
+        .map((task) => {
+        const id = `task-${(0, html_1.hueFrom)(task.title)}-${task.title.length}`;
+        return `<label class="task"><input type="checkbox" data-task="${id}"><span><strong>${(0, html_1.escapeHtml)(task.title)}</strong><span class="task-desc">${(0, html_1.text)(task.description)}</span>${(0, html_1.evidenceList)(task.files, data)}</span></label>`;
+    })
+        .join("")}</div>`);
+};
+/** Capítulos do meio, em ordem narrativa: do porquê ao código. */
+exports.CHAPTERS = [
+    ["why", why],
+    ["business", business],
+    ["product", product],
+    ["language", language],
+    ["rules", rules],
+    ["stack", stack],
+    ["architecture", architecture],
+    ["setup", setup],
+    ["conventions", conventions],
+    ["tours", tours],
+    ["gotchas", gotchas],
+    ["decisions", decisions],
+    ["mission", mission],
+];

package/dist/template.d.ts

@@ -0,0 +1,14 @@
+import type { Framework, OnboardingData } from "./types";
+export declare const SCHEMA_VERSION = "1";
+export interface TemplateOptions {
+    framework: Framework;
+    language?: string;
+}
+export declare function createTemplate({ framework, language }: TemplateOptions): OnboardingData;
+/**
+ * Frase para colar na IA local. Com `init`, pede para a IA criar o arquivo antes
+ * (usado quando o onboarding.json ainda não existe).
+ */
+export declare function aiPrompt(file?: string, options?: {
+    init?: boolean;
+}): string;

package/dist/template.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SCHEMA_VERSION = void 0;
+exports.createTemplate = createTemplate;
+exports.aiPrompt = aiPrompt;
+exports.SCHEMA_VERSION = "1";
+const FRAMEWORK_HINTS = {
+    next: "Projeto Next.js. Identifique se usa App Router (app/) ou Pages Router (pages/), as rotas e layouts, Server Components e Client Components ('use client'), Server Actions, route handlers (app/**/route.ts), middleware.ts, estratégia de fetch e cache, autenticação, estilização (Tailwind, CSS Modules etc.) e onde fica o acesso a dados. Use as rotas principais como base para features e tours. Ignore a rota app/onboarding criada pelo onboarding-kit.",
+    nest: "Projeto NestJS. Mapeie os módulos (*.module.ts) e as dependências entre eles para architecture.modules e o diagrama. Levante controllers e rotas, providers e services, guards, interceptors, pipes, DTOs e validação (class-validator), entidades e ORM (TypeORM, Prisma, Mongoose), filas, jobs agendados e configuração (ConfigModule). As regras de negócio costumam estar nos services. Ignore o OnboardingModule do onboarding-kit.",
+    node: "Projeto Node.js. Identifique o ponto de entrada (main e scripts do package.json), o framework HTTP (Express, Fastify, Koa ou http nativo), a organização de rotas e middlewares, o acesso a dados, jobs/workers e scripts utilitários.",
+};
+const SECTION_INSTRUCTIONS = {
+    project: "name: nome do projeto. tagline: uma frase que resume o projeto. purpose: 2 a 4 frases sobre o problema que ele resolve e para quem. audience: quem usa o produto (usuários finais, não devs). status: fase do projeto (ex.: em produção, MVP, em migração). repoUrl: URL do repositório (git remote get-url origin, convertida para https), vazio se não houver.",
+    business: "Explique o negócio para alguém que nunca ouviu falar do produto. model: como o produto gera valor ou receita (assinatura, comissão, venda, uso interno...). Baseie-se em planos, pagamentos, roles e docs do repositório; se não der para inferir a receita, descreva o valor gerado sem inventar. valueProposition: o que o produto resolve para quem usa, em 1 ou 2 frases. actors: os perfis que participam (tipos de usuário, roles, sistemas parceiros), com evidence de onde aparecem no código. flows: 1 a 3 jornadas principais (ex.: 'Do cadastro à primeira compra'), cada uma com 3 a 6 passos curtos e evidence.",
+    gettingStarted: "prerequisites: o que precisa estar instalado (versão do Node, banco, Docker...). setup: passos em ordem para rodar localmente pela primeira vez. commands: scripts úteis do package.json com o comando exato e o que fazem. envVars: variáveis de ambiente (de .env.example, código ou docs) com nome, para que servem e se são obrigatórias. NUNCA inclua valores.",
+    stack: "Uma entrada por tecnologia relevante (linguagem, framework, banco, ORM, auth, testes, lint, deploy, filas, libs centrais). category: ex. framework, database, orm, testing, styling, infra. version: do package.json/lockfile. why: para que é usada NESTE projeto. evidence: onde aparece (package.json, arquivo de config ou de uso).",
+    architecture: "summary: como o código está organizado e como uma requisição/ação flui pelo sistema. diagram: diagrama Mermaid (graph TD ou flowchart) com os principais módulos e integrações externas, sem cercas ```. modules: pastas ou módulos principais com path e responsibility.",
+    conventions: "Padrões de código que alguém novo precisa seguir: nomenclatura, estrutura de pastas, tratamento de erro, validação, padrões de componentes, testes, commits, lint/format. example: trecho curto real ou ilustrativo. evidence obrigatória.",
+    domain: "glossary: termos do negócio que aparecem no código e nas telas, com definição em linguagem simples. businessRules: regras de negócio macro (ex.: quem pode fazer o quê, limites, cálculos, estados de um pedido), com evidence apontando onde a regra está implementada.",
+    features: "Funcionalidades do produto do ponto de vista do usuário. entryPoints: arquivos onde a feature começa (página, controller, rota). status: ex. estável, beta, em desenvolvimento, descontinuada.",
+    tours: "1 a 3 tours guiados pelo código, ex.: 'Como uma requisição é atendida', 'Ciclo de vida de um pedido'. Cada step aponta um arquivo (com linha quando ajudar) e explica o que olhar ali. Ordene os steps na sequência de leitura.",
+    gotchas: "Armadilhas e cuidados: comportamentos não óbvios, partes frágeis, workarounds, TODOs/FIXMEs importantes, coisas que costumam quebrar. Só inclua o que tiver evidence.",
+    decisions: "Decisões de arquitetura perceptíveis no código ou na documentação (ex.: por que tal ORM, monorepo, cache, autenticação). context: o problema. decision: o que foi escolhido. Não invente motivos: se o motivo não está documentado, descreva só a decisão.",
+    brand: "Identidade visual, usada para a apresentação ter a cara da plataforma. primaryColor: a cor principal da marca em hex (#RRGGBB). Procure em tailwind.config (theme.extend.colors: brand, primary), no @theme do Tailwind v4 (--color-primary, --color-brand), em variáveis CSS de globals.css/index.css (--primary, --brand; converta HSL/OKLCH para hex), em temas de MUI/Chakra/styled-components (palette.primary.main) e no theme_color do manifest. palette: 1 a 4 outras cores da marca em hex (secundária, destaque). Ignore branco, preto e cinzas quando houver uma cor de verdade. logo: caminho do logo do projeto (procure em public/, assets/, src/assets/, app/icon.*); prefira SVG e a versão para fundo claro; ignore os arquivos de exemplo do framework (next.svg, vercel.svg, vite.svg, react.svg). favicon: caminho do favicon (public/favicon.ico, app/favicon.ico, app/icon.png). evidence: arquivos de onde tirou as cores. Deixe vazio o que não encontrar: o onboarding-kit tenta detectar sozinho.",
+    firstTasks: "3 a 5 tarefas pequenas e seguras para alguém novo começar (ex.: um teste faltando, um TODO simples, uma melhoria de mensagem de erro), com os arquivos envolvidos.",
+};
+function createTemplate({ framework, language = "pt-BR" }) {
+    return {
+        _instructions: {
+            readme: "Você é a IA local deste projeto. Sua tarefa é preencher este arquivo analisando o código do repositório. O resultado será exibido em /onboarding para quem está chegando no projeto.",
+            steps: [
+                "1. Leia este arquivo inteiro antes de começar, incluindo _instructions.sections.",
+                "2. Explore o repositório: package.json e lockfile, README e docs, arquivos de config (tsconfig, eslint, prettier, next.config, nest-cli.json, docker, CI), código-fonte, testes e .env.example.",
+                "3. Preencha cada seção seguindo _instructions.sections.<seção> e _instructions.framework. Os arrays vêm com um item modelo em branco: substitua-o por itens reais, quantos forem necessários. Se não houver nada real para a seção, deixe o array vazio ([]).",
+                "4. Preencha meta: status = \"filled\", generatedAt = data e hora atuais em ISO 8601, generatedBy = nome da ferramenta e do modelo, commit = saída de `git rev-parse HEAD` (vazio se não houver git).",
+                "5. Rode `npx onboarding-kit validate` e corrija tudo o que ele apontar até passar sem erros.",
+            ],
+            rules: [
+                "Escreva todo o conteúdo no idioma de meta.language.",
+                "Nunca invente. Toda afirmação sobre stack, convenções, regras, decisões e armadilhas precisa de evidence com arquivos reais, no formato caminho/relativo ou caminho/relativo:linha. Se não encontrar evidência, não inclua o item.",
+                "Caminhos são relativos à raiz do repositório e usam '/'.",
+                "Nunca copie segredos: valores de .env, tokens, chaves de API, senhas ou URLs com credenciais. Em envVars descreva apenas o nome e a finalidade.",
+                "Mantenha o JSON válido. Não renomeie nem remova chaves e não apague _instructions: ele é usado nas próximas atualizações.",
+                "Escreva de forma curta, direta e humana, como um colega explicando o projeto: quem lê é uma pessoa no primeiro dia. O conteúdo vira slides, então prefira frases curtas a parágrafos longos.",
+                "Se meta.status já for \"filled\", você está ATUALIZANDO: use `git diff <meta.commit>..HEAD` para revisar apenas o que mudou, mantenha o restante e atualize meta.commit e meta.generatedAt.",
+            ],
+            framework: FRAMEWORK_HINTS[framework],
+            sections: SECTION_INSTRUCTIONS,
+        },
+        meta: {
+            schemaVersion: exports.SCHEMA_VERSION,
+            status: "pending",
+            language,
+            framework,
+            generatedAt: "",
+            generatedBy: "",
+            commit: "",
+        },
+        project: { name: "", tagline: "", purpose: "", audience: "", status: "", repoUrl: "" },
+        business: {
+            model: "",
+            valueProposition: "",
+            actors: [{ name: "", description: "", evidence: [""] }],
+            flows: [{ name: "", steps: [""], evidence: [""] }],
+        },
+        gettingStarted: {
+            prerequisites: [""],
+            setup: [""],
+            commands: [{ name: "", command: "", description: "" }],
+            envVars: [{ name: "", description: "", required: false }],
+        },
+        stack: [{ name: "", category: "", version: "", why: "", evidence: [""] }],
+        architecture: { summary: "", diagram: "", modules: [{ name: "", path: "", responsibility: "" }] },
+        conventions: [{ title: "", description: "", example: "", evidence: [""] }],
+        domain: {
+            glossary: [{ term: "", definition: "" }],
+            businessRules: [{ title: "", description: "", evidence: [""] }],
+        },
+        features: [{ name: "", description: "", entryPoints: [""], status: "" }],
+        tours: [{ title: "", description: "", steps: [{ file: "", explanation: "" }] }],
+        gotchas: [{ title: "", description: "", evidence: [""] }],
+        decisions: [{ title: "", context: "", decision: "", evidence: [""] }],
+        firstTasks: [{ title: "", description: "", files: [""] }],
+        brand: { primaryColor: "", palette: [""], logo: "", favicon: "", evidence: [""] },
+    };
+}
+/**
+ * Frase para colar na IA local. Com `init`, pede para a IA criar o arquivo antes
+ * (usado quando o onboarding.json ainda não existe).
+ */
+function aiPrompt(file = "onboarding.json", options = {}) {
+    if (options.init) {
+        return `Rode "npx onboarding-kit init" na raiz deste projeto para criar o ${file}. Depois leia o arquivo e siga as instruções em "_instructions" para preenchê-lo com base neste repositório. No final, rode "npx onboarding-kit validate" e corrija o que ele apontar.`;
+    }
+    return `Leia o arquivo ${file} e siga as instruções em "_instructions" para preenchê-lo com base neste repositório. No final, rode "npx onboarding-kit validate" e corrija o que ele apontar.`;
+}