@popcraft/kit 0.53.15 → 0.53.16

package/dist/chunks/chunk-2ZA7A2YO.js

@@ -0,0 +1,368 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  tick
+} from "./chunk-AGV72YOJ.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-MPRWXHPJ.js";
+import {
+  compactNav,
+  footer,
+  linePath,
+  respond,
+  rule,
+  soft,
+  typeScale
+} from "./chunk-TRJWKRQH.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-KLAIZ7BD.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/web/saas-data-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var KPIS = [
+  { id: "MRR", label: "MRR", value: "$1,284,300", delta: "+3.3% vs Aug", up: true, counter: { from: 118e4, to: 1284300, prefix: "$" } },
+  { id: "Net new", label: "Net new MRR", value: "+$41,200", delta: "+$6,900 vs Aug", up: true, counter: { from: 0, to: 41200, prefix: "+$" } },
+  { id: "NRR", label: "Net retention", value: "112%", delta: "+2 pts vs Q2", up: true, counter: { from: 100, to: 112, suffix: "%" } },
+  { id: "Churn", label: "Logo churn", value: "1.3%", delta: "\u22120.4 pts vs Q2", up: true, counter: { from: 2.4, to: 1.3, decimals: 1, suffix: "%" } }
+];
+var MRR = [0.3, 0.33, 0.37, 0.36, 0.43, 0.5, 0.49, 0.58, 0.66, 0.72, 0.83, 0.92];
+var MONTHS = ["Oct", "Dec", "Feb", "Apr", "Jun", "Aug", "Sep"];
+var PLANS = [["Enterprise", "84", "$612,400", 0.48], ["Growth", "412", "$438,900", 0.34], ["Starter", "1,960", "$233,000", 0.18]];
+var LOGOS = [
+  ["Northgate", { ...SERIF, fontWeight: 700, letterSpacing: -0.6 }],
+  ["HALCYON", { fontWeight: 800, letterSpacing: 5 }],
+  ["brightwell.", { fontWeight: 700, letterSpacing: -1.2 }],
+  ["Okapi Labs", { ...MONO, fontWeight: 700, letterSpacing: -0.8 }],
+  ["Meridian & Nine", { ...SERIF, fontWeight: 500, fontStyle: "italic" }],
+  ["FENNEL", { fontWeight: 900, letterSpacing: 1 }]
+];
+var SOURCES = [["Stripe", "Billing", "48,212 invoices", "02:04"], ["Chargebee", "Billing", "9,870 invoices", "02:06"], ["NetSuite", "General ledger", "131,440 lines", "02:11"], ["Salesforce", "CRM", "6,304 opportunities", "02:13"], ["Snowflake", "Warehouse", "14 models", "02:19"]];
+var WATERFALL = [["New", "+$62k", 124, "up"], ["Upgrade", "+$38k", 76, "up"], ["Shrink", "\u2212$21k", 42, "down"], ["Churn", "\u2212$38k", 76, "down"], ["Net new", "+$41k", 82, "accent"]];
+var RISK = [["Halden Freight", "$18,400", "Usage down 61%"], ["Pico Health", "$9,200", "Champion left"], ["Arbor Schools", "$6,750", "3 failed payments"]];
+var SEALS = [["SOC 2", "Type II"], ["ISO", "27001"], ["GDPR", "DPA"], ["SSO", "SCIM"]];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 100, params: { duration: 500 } },
+  { layer: "Headline", preset: "rise-in", at: 200, params: { duration: 700 } },
+  { layer: "Lead", preset: "rise-in", at: 350 },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 500, stagger: { delay: 100 } },
+  { layer: "Proof", preset: "fade-in", at: 800, params: { duration: 500 } },
+  { layer: "Dashboard", preset: "rise-in", at: 350, params: { duration: 800 } },
+  { layer: "KPI", preset: "fade-in", at: 900, params: { duration: 350 }, stagger: { delay: 140 } },
+  { layer: "Line", preset: "wipe-in", at: 1500, params: { duration: 1700, ease: { kind: "linear" } } },
+  { layer: "Area", preset: "fade-in", at: 3e3, params: { duration: 700 } },
+  { layer: "Mark", preset: "pop-in", at: 3200, params: { duration: 400 } },
+  { layer: "Plan row", preset: "fade-in", at: 3300, params: { duration: 300 }, stagger: { delay: 160 } },
+  { layer: "Delta", preset: "pop-in", at: 2500, params: { duration: 350 }, stagger: { delay: 100 } }
+];
+var counts = KPIS.map((kpi, i) => ({ layer: `${kpi.id} figure`, at: 1e3 + i * 140, duration: 1500, counter: kpi.counter }));
+var saas_data_landing_default = defineTemplate({
+  id: "web-saas-data-landing",
+  meta: {
+    name: "SaaS B2B data product landing page",
+    description: "A data-dense landing page for a B2B analytics product: the hero dashboard counts its KPIs up, draws a twelve-month revenue line and fills its plan table. Then a customer logo row, a reconciliation ledger, a waterfall chart, accounts at risk, security seals on a dark band, a case study in numbers and a demo band. Desktop to phone",
+    category: "web",
+    tags: ["saas", "b2b", "analytics", "dashboard", "data", "chart", "kpi", "enterprise", "security", "logos", "landing page", "hero", "website", "animation", "responsive"],
+    platforms: ["web"],
+    formats: ["page", "demo"],
+    useCases: ["launch", "brand-intro", "stats"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("SaaS B2B data product landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F5F5F1", text: "#14171A", onPaper: "#4D545B", primary: "#14171A", onPrimary: "#FFFFFF", accent: "#E8590C", card: "#FFFFFF", onCard: "#14171A", cardMuted: "#5B626A", cardUp: "#0B6B3A", cardDown: "#B42318", hairline: "#D6D7CF", panel: "#16191D", onPanel: "#F5F5F1", panelMuted: "#A9AEB4", panelLine: "#3A4047" },
+      { name: "Plumb" }
+    );
+    k.palette({ up: "#1E8E53", down: "#D4483B", wash: "#FBE3D2", band: "#ECECE6" });
+    const num = { fontFeatures: { tnum: 1 } };
+    const s = typeScale(k, {
+      "Nav 15": { size: 15, fontWeight: 500, lineHeight: 24 },
+      "Brand 20": { size: 20, fontWeight: 800, letterSpacing: -0.5, lineHeight: 28 },
+      "Button 15": { size: 15, fontWeight: 600, lineHeight: 22 },
+      "Eyebrow 12": { ...MONO, size: 12, fontWeight: 600, letterSpacing: 1.4, lineHeight: 18, textCase: "UPPER" },
+      "Display 60": { size: 60, fontWeight: 700, letterSpacing: -2.6, lineHeight: 62 },
+      "Display 52": { size: 52, fontWeight: 700, letterSpacing: -2.2, lineHeight: 54 },
+      "Display 44": { size: 44, fontWeight: 700, letterSpacing: -1.8, lineHeight: 48 },
+      "Display 34": { size: 34, fontWeight: 700, letterSpacing: -1.2, lineHeight: 38 },
+      "Lead 18": { size: 18, fontWeight: 400, lineHeight: 28 },
+      "Lead 16": { size: 16, fontWeight: 400, lineHeight: 25 },
+      "Proof 13": { size: 13, fontWeight: 500, lineHeight: 20 },
+      "Tab 13": { size: 13, fontWeight: 600, lineHeight: 18 },
+      "KPI label 12": { size: 12, fontWeight: 500, lineHeight: 16 },
+      "KPI 24": { size: 24, fontWeight: 700, letterSpacing: -0.8, lineHeight: 30, ...num },
+      "KPI 18": { size: 18, fontWeight: 700, letterSpacing: -0.4, lineHeight: 24, ...num },
+      "Delta 12": { ...MONO, size: 12, fontWeight: 600, lineHeight: 16 },
+      "Axis 12": { ...MONO, size: 12, fontWeight: 500, lineHeight: 16 },
+      "Cell 13": { size: 13, fontWeight: 500, lineHeight: 20, ...num },
+      "Logo 24": { size: 24, fontWeight: 700, lineHeight: 30 },
+      "Section 36": { size: 36, fontWeight: 700, letterSpacing: -1.4, lineHeight: 40 },
+      "Section 26": { size: 26, fontWeight: 700, letterSpacing: -0.8, lineHeight: 31 },
+      "Body 16": { size: 16, fontWeight: 400, lineHeight: 25 },
+      "Ledger 14": { size: 14, fontWeight: 500, lineHeight: 20, ...num },
+      "Ledger mono 13": { ...MONO, size: 13, fontWeight: 500, lineHeight: 20 },
+      "Cell title 20": { size: 20, fontWeight: 700, letterSpacing: -0.4, lineHeight: 26 },
+      "Bar 12": { ...MONO, size: 12, fontWeight: 600, lineHeight: 16, textAlign: "CENTER" },
+      "Seal 15": { size: 15, fontWeight: 800, letterSpacing: 0.4, lineHeight: 18, textAlign: "CENTER" },
+      "Seal 12": { ...MONO, size: 12, fontWeight: 500, lineHeight: 14, textAlign: "CENTER" },
+      "Stat 56": { size: 56, fontWeight: 700, letterSpacing: -2.4, lineHeight: 58, ...num },
+      "Stat 40": { size: 40, fontWeight: 700, letterSpacing: -1.6, lineHeight: 44, ...num },
+      "Quote 24": { ...SERIF, size: 24, fontWeight: 400, lineHeight: 35 },
+      "Quote 19": { ...SERIF, size: 19, fontWeight: 400, lineHeight: 29 },
+      "Small 14": { size: 14, fontWeight: 400, lineHeight: 22 },
+      "Foot head 14": { size: 14, fontWeight: 700, lineHeight: 22 }
+    });
+    buttons(k, { style: s("Button 15"), pad: [12, 20], radius: 6 });
+    k.component("Button light", { direction: "HORIZONTAL", width: "HUG", radius: 6, align: "CENTER", fill: "card", padding: { top: 12, right: 20, bottom: 12, left: 20 }, props: { Label: "Book a demo" } }, (id) => {
+      k.propText(id, "Label", { style: s("Button 15"), color: "onCard", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 80, top: 24 });
+    k.timeline(sheet, { duration: 6e3, fps: 30 });
+    nav(k, sheet, { links: ["Product", "Integrations", "Security", "Customers", "Pricing"], cta: "Book a demo", style: s("Nav 15"), brandStyle: s("Brand 20") });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { width: 520, gap: 22, name: "Copy" });
+    k.text(copy, "Revenue analytics for finance teams", { style: s("Eyebrow 12"), color: "onPaper", name: "Eyebrow" });
+    k.text(copy, "One MRR number, in every tab.", { style: s("Display 60"), color: "text", name: "Headline" });
+    k.text(copy, "Plumb reconciles billing, the ledger and the CRM every night, so the figure in the board deck matches the one in the bank. When it moves, you can see which invoices moved it.", { style: s("Lead 18"), color: "onPaper", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 10, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Book a 30-minute demo" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "See a sample close" }, { name: "CTA quiet" });
+    k.text(copy, "Connected in an afternoon. Read-only access, no engineering ticket.", { style: s("Proof 13"), color: "onPaper", name: "Proof" });
+    const dash = k.stack(hero, { fill: "card", radius: 10, stroke: { color: "hairline", width: 1 }, clip: true, effects: [soft(0.1, 24, 56)], name: "Dashboard" });
+    const tabs = k.stack(dash, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 12, padding: { top: 12, right: 18, bottom: 12, left: 18 }, name: "Tabs" });
+    const left = k.stack(tabs, { direction: "HORIZONTAL", width: "HUG", gap: 6, align: "CENTER", name: "Tab list" });
+    const on = k.stack(left, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 5, padding: { top: 5, right: 10, bottom: 5, left: 10 }, name: "Tab on" });
+    k.text(on, "Revenue", { style: s("Tab 13"), color: "onPrimary", autoWidth: true, name: "Tab name" });
+    for (const t of ["Retention", "Cash"]) {
+      const tab = k.stack(left, { direction: "HORIZONTAL", width: "HUG", padding: { top: 5, right: 10, bottom: 5, left: 10 }, name: "Tab" });
+      k.text(tab, t, { style: s("Tab 13"), color: "cardMuted", autoWidth: true, name: "Tab name" });
+    }
+    k.text(tabs, "Sep 2026 \xB7 closed", { style: s("Delta 12"), color: "cardMuted", autoWidth: true, name: "Period" });
+    rule(k, dash, "hairline");
+    const kpis = k.stack(dash, { direction: "HORIZONTAL", gap: 0, name: "KPIs" });
+    for (const kpi of KPIS) {
+      const tile = k.stack(kpis, { gap: 4, padding: { top: 16, right: 14, bottom: 16, left: 18 }, name: "KPI" });
+      k.text(tile, kpi.label, { style: s("KPI label 12"), color: "cardMuted", name: "KPI label" });
+      k.text(tile, kpi.value, { style: s("KPI 24"), color: "onCard", name: `${kpi.id} figure` });
+      k.text(tile, kpi.delta, { style: s("Delta 12"), color: "cardUp", name: "Delta" });
+    }
+    rule(k, dash, "hairline");
+    const plot = k.stack(dash, { gap: 8, padding: { top: 16, right: 18, bottom: 14, left: 18 }, name: "Plot" });
+    const plotHead = k.stack(plot, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 12, name: "Plot head" });
+    k.text(plotHead, "MRR, trailing 12 months", { style: s("Tab 13"), color: "onCard", autoWidth: true, name: "Plot title" });
+    k.text(plotHead, "$0.94M to $1.28M", { style: s("Delta 12"), color: "cardMuted", autoWidth: true, name: "Plot range" });
+    const W = 720, H = 170;
+    const win = k.stack(plot, { direction: "HORIZONTAL", height: H, justify: "MAX", clip: true, name: "Window" });
+    const layers = k.stack(win, { width: W, height: H, name: "Series" });
+    k.vector(layers, W, H, [0.25, 0.5, 0.75].map((f) => ({ closed: false, points: [{ x: 0, y: H * f }, { x: W, y: H * f }] })), "hairline", { name: "Gridlines", strokeWidth: 1, absolute: { x: 0, y: 0 } });
+    k.vector(layers, W, H, [linePath(MRR, W - 8, H - 8, true)], "wash", { name: "Area", absolute: { x: 0, y: 8 } });
+    k.vector(layers, W, H, [linePath(MRR, W - 8, H - 8)], "accent", { name: "Line", strokeWidth: 3, absolute: { x: 0, y: 8 } });
+    k.ellipse(layers, 12, "accent", { name: "Mark", stroke: { color: "card", width: 3 }, absolute: { x: W - 14, y: 8 + (1 - MRR[MRR.length - 1]) * (H - 8) - 6 } });
+    rule(k, plot, "hairline");
+    const axis = k.stack(plot, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Axis" });
+    for (const m of MONTHS) k.text(axis, m, { style: s("Axis 12"), color: "cardMuted", autoWidth: true, name: "Month" });
+    const table = k.stack(dash, { fill: "band", padding: { top: 6, right: 18, bottom: 8, left: 18 }, name: "Plan table" });
+    for (const [plan, n, mrr, share] of PLANS) {
+      const r = k.stack(table, { direction: "HORIZONTAL", gap: 14, align: "CENTER", padding: { top: 7, right: 0, bottom: 7, left: 0 }, name: "Plan row" });
+      k.text(r, plan, { style: s("Cell 13"), color: "onCard", name: "Plan name" });
+      k.text(r, `${n} accounts`, { style: s("Cell 13"), color: "cardMuted", width: 104, name: "Plan accounts" });
+      const lane = k.stack(r, { direction: "HORIZONTAL", width: 120, height: 6, fill: "hairline", radius: 3, name: "Share lane" });
+      k.rect(lane, Math.round(120 * share), 6, "primary", { radius: 3, name: "Share" });
+      k.text(r, mrr, { style: s("Cell 13"), color: "onCard", width: 70, align: "RIGHT", name: "Plan MRR" });
+    }
+    const logos = k.stack(sheet, { gap: 20, name: "Customers" });
+    rule(k, logos, "hairline");
+    const logoRow = k.stack(logos, { direction: "HORIZONTAL", gap: 28, align: "CENTER", justify: "SPACE_BETWEEN", wrap: true, name: "Logo row" });
+    k.text(logoRow, "Closing the books at", { style: s("Eyebrow 12"), color: "onPaper", autoWidth: true, name: "Logos label" });
+    LOGOS.forEach(([name, face], i) => {
+      k.textStyle(`Wordmark ${i + 1}`, { size: 24, lineHeight: 30, ...face });
+      k.text(logoRow, name, { style: `Wordmark ${i + 1}`, color: "onPaper", autoWidth: true, name: "Wordmark" });
+    });
+    rule(k, logos, "hairline");
+    const recon = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, name: "Reconciliation" });
+    const reconCopy = k.stack(recon, { width: 380, gap: 16, name: "Recon copy" });
+    k.text(reconCopy, "01 \xB7 Reconciliation", { style: s("Eyebrow 12"), color: "onPaper", name: "Recon label" });
+    k.text(reconCopy, "Every source, tied out to the cent by 02:30.", { style: s("Section 36"), color: "text", name: "Recon title" });
+    k.text(reconCopy, "Plumb matches each invoice to its ledger line and its opportunity. What does not match is listed with the reason, not averaged away. Last night there were four exceptions, all refunds issued after close.", { style: s("Body 16"), color: "onPaper", name: "Recon text" });
+    const ledger = k.stack(recon, { fill: "card", radius: 10, stroke: { color: "hairline", width: 1 }, clip: true, name: "Ledger" });
+    const cols = (parent, cells, head) => {
+      const r = k.stack(parent, { direction: "HORIZONTAL", gap: 16, align: "CENTER", padding: { top: head ? 10 : 13, right: 18, bottom: head ? 10 : 13, left: 18 }, ...head ? { fill: "band" } : {}, name: head ? "Ledger head" : "Ledger row" });
+      k.text(r, cells[0], { style: s(head ? "KPI label 12" : "Ledger 14"), color: head ? "cardMuted" : "onCard", name: "Source" });
+      k.text(r, cells[1], { style: s(head ? "KPI label 12" : "Ledger 14"), color: "cardMuted", width: 120, name: "Kind" });
+      k.text(r, cells[2], { style: s(head ? "KPI label 12" : "Ledger 14"), color: head ? "cardMuted" : "onCard", width: 150, name: "Records" });
+      k.text(r, cells[3], { style: s(head ? "KPI label 12" : "Ledger mono 13"), color: "cardMuted", width: 64, name: "Synced" });
+      const drift = k.stack(r, { direction: "HORIZONTAL", width: 86, gap: 6, align: "CENTER", name: "Drift" });
+      if (!head) tick(k, drift, 14, "up");
+      k.text(drift, head ? "Drift" : "$0.00", { style: s(head ? "KPI label 12" : "Ledger mono 13"), color: head ? "cardMuted" : "cardUp", autoWidth: true, name: "Drift figure" });
+    };
+    cols(ledger, ["Source", "Kind", "Records matched", "Synced", "Drift"], true);
+    for (const row of SOURCES) {
+      rule(k, ledger, "hairline");
+      cols(ledger, row, false);
+    }
+    rule(k, ledger, "hairline");
+    const exc = k.stack(ledger, { direction: "HORIZONTAL", gap: 12, justify: "SPACE_BETWEEN", padding: { top: 12, right: 18, bottom: 12, left: 18 }, name: "Exceptions" });
+    k.text(exc, "4 exceptions \xB7 $1,912.40 in refunds issued after close", { style: s("Ledger 14"), color: "onCard", name: "Exceptions text" });
+    k.text(exc, "Review", { style: s("Tab 13"), color: "onCard", autoWidth: true, name: "Review link" });
+    const ask = k.stack(sheet, { gap: 24, name: "Questions" });
+    k.text(ask, "02 \xB7 The questions finance gets asked", { style: s("Eyebrow 12"), color: "onPaper", name: "Questions label" });
+    const grid = k.stack(ask, { direction: "HORIZONTAL", gap: 20, name: "Grid" });
+    const wide = k.stack(grid, { gap: 18, fill: "card", radius: 10, stroke: { color: "hairline", width: 1 }, padding: 28, name: "Waterfall cell" });
+    k.text(wide, "Why did MRR move in September?", { style: s("Section 26"), color: "onCard", name: "Waterfall title" });
+    k.text(wide, "Every bar opens to the accounts behind it. Expansion was eleven seat upgrades; most of the churn was one logistics customer.", { style: s("Body 16"), color: "cardMuted", name: "Waterfall text" });
+    const fall = k.stack(wide, { direction: "HORIZONTAL", gap: 12, align: "MAX", height: 190, padding: { top: 8, right: 0, bottom: 0, left: 0 }, name: "Waterfall" });
+    for (const [name, value, h, tone] of WATERFALL) {
+      const col = k.stack(fall, { gap: 6, name: "Fall column" });
+      k.text(col, value, { style: s("Bar 12"), color: "onCard", name: "Fall value" });
+      k.rect(col, "FILL", h, tone, { radius: 3, name: "Fall bar" });
+      k.text(col, name, { style: s("Bar 12"), color: "cardMuted", name: "Fall name" });
+    }
+    const side = k.stack(grid, { width: 440, gap: 20, name: "Side cells" });
+    const risk = k.stack(side, { gap: 10, fill: "card", radius: 10, stroke: { color: "hairline", width: 1 }, padding: 24, name: "Risk cell" });
+    k.text(risk, "Who is about to leave?", { style: s("Cell title 20"), color: "onCard", name: "Risk title" });
+    for (const [account, mrr, why] of RISK) {
+      rule(k, risk, "hairline");
+      const r = k.stack(risk, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Risk row" });
+      k.ellipse(r, 8, "down", { name: "Risk dot" });
+      k.text(r, account, { style: s("Ledger 14"), color: "onCard", name: "Account" });
+      k.text(r, why, { style: s("Cell 13"), color: "cardDown", autoWidth: true, name: "Reason" });
+      k.text(r, mrr, { style: s("Ledger mono 13"), color: "cardMuted", width: 62, align: "RIGHT", name: "At risk" });
+    }
+    const board = k.stack(side, { gap: 10, fill: "primary", radius: 10, padding: 24, name: "Board cell" });
+    k.text(board, "What do we tell the board?", { style: s("Cell title 20"), color: "onPrimary", name: "Board title" });
+    k.text(board, "The pack writes itself on the first working day: twelve charts, the variance notes and the appendix, as slides or a PDF.", { style: s("Body 16"), color: "onPrimary", name: "Board text" });
+    const sec = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", fill: "panel", radius: 10, padding: 48, name: "Security" });
+    const secCopy = k.stack(sec, { gap: 14, name: "Security copy" });
+    k.text(secCopy, "03 \xB7 Security", { style: s("Eyebrow 12"), color: "panelMuted", name: "Security label" });
+    k.text(secCopy, "Read-only by design. Your numbers never leave your region.", { style: s("Section 36"), color: "onPanel", name: "Security title" });
+    k.text(secCopy, "Plumb never writes to a source system. Data is encrypted with keys you can revoke, stored in the EU or the US as you choose, and deleted within 30 days of a contract ending. The latest pen-test report is on the trust page.", { style: s("Body 16"), color: "panelMuted", name: "Security text" });
+    const seals = k.stack(sec, { direction: "HORIZONTAL", width: "HUG", gap: 16, name: "Seals" });
+    for (const [a, b] of SEALS) {
+      const seal = k.stack(seals, { width: 104, height: 104, radius: 52, stroke: { color: "onPanel", width: 1.5 }, align: "CENTER", justify: "CENTER", gap: 2, name: "Seal" });
+      k.ellipse(seal, 92, [], { name: "Seal ring", stroke: { color: "panelLine", width: 1 }, absolute: { x: 6, y: 6 } });
+      k.text(seal, a, { style: s("Seal 15"), color: "onPanel", name: "Seal name" });
+      k.text(seal, b, { style: s("Seal 12"), color: "panelMuted", name: "Seal kind" });
+    }
+    const story = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, name: "Story" });
+    const stats = k.stack(story, { width: 380, gap: 0, name: "Story stats" });
+    for (const [figure, what] of [["9 to 3 days", "Month-end close at Northgate, within two quarters"], ["$0", "Unexplained variance between billing and the ledger since March"]]) {
+      rule(k, stats, "text");
+      const st = k.stack(stats, { gap: 4, padding: { top: 14, right: 0, bottom: 24, left: 0 }, name: "Story stat" });
+      k.text(st, figure, { style: s("Stat 56"), color: "text", name: "Stat figure" });
+      k.text(st, what, { style: s("Small 14"), color: "onPaper", name: "Stat text" });
+    }
+    const quote = k.stack(story, { gap: 18, name: "Story quote" });
+    rule(k, quote, "text");
+    k.text(quote, "\u201CThe audit committee used to ask why the deck and the ledger disagreed by forty thousand dollars. They have stopped asking, because they no longer do. I got my first week of the month back.\u201D", { style: s("Quote 24"), color: "text", name: "Quote" });
+    k.text(quote, "Priya Raman, VP Finance, Northgate", { style: s("Proof 13"), color: "onPaper", name: "Quote name" });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 32, align: "CENTER", justify: "SPACE_BETWEEN", fill: "primary", radius: 10, padding: 40, name: "Band" });
+    const bandCopy = k.stack(band, { gap: 6, name: "Band copy" });
+    k.text(bandCopy, "Bring last month\u2019s close. We will reconcile it on the call.", { style: s("Section 26"), color: "onPrimary", name: "Band title" });
+    k.text(bandCopy, "Thirty minutes, your data, read-only. From $1,200 a month, by revenue under management.", { style: s("Body 16"), color: "onPrimary", name: "Band text" });
+    k.instance(band, "Button light", { Label: "Book a demo" }, { name: "Band button" });
+    footer(k, sheet, {
+      about: "Revenue analytics that ties out. Built in Toronto and Lisbon.",
+      columns: [["Product", ["Revenue", "Retention", "Cash", "Board pack"]], ["Trust", ["Security", "Sub-processors", "Status", "DPA"]], ["Company", ["Customers", "Pricing", "Careers", "Contact"]]],
+      legal: "\xA9 2026 Plumb Analytics Inc. SOC 2 Type II report available under NDA.",
+      brandStyle: s("Brand 20"),
+      headStyle: s("Foot head 14"),
+      linkStyle: s("Small 14"),
+      ruleColor: "hairline"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    respond(k, sheet, s, {
+      stack: ["Hero", "Reconciliation", "Grid", "Security", "Story", "Band", "Footer columns"],
+      stackMobile: ["KPIs"],
+      restyle: {
+        "Display 60": { laptop: "Display 52", tablet: "Display 44", mobile: "Display 34" },
+        "Section 36": { mobile: "Section 26" },
+        "Lead 18": { mobile: "Lead 16" },
+        "KPI 24": { laptop: "KPI 18", mobile: "KPI 18" },
+        "Stat 56": { mobile: "Stat 40" },
+        "Quote 24": { mobile: "Quote 19" }
+      },
+      gap: { tablet: 64, mobile: 52 },
+      tweak: (kit, id, size) => {
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        const pad = (v, h = v) => ({ top: v, right: h, bottom: v, left: h });
+        if (size === "laptop") {
+          each("Hero", { itemSpacing: 40 });
+          each("Copy", { width: 440 });
+          each("Side cells", { width: 400 });
+        }
+        if (size === "tablet") compactNav(kit, id, ["Integrations", "Customers"], 24);
+        if (size === "tablet" || size === "mobile") {
+          each("Hero", { itemSpacing: 36 });
+          each("Reconciliation", { itemSpacing: 28 });
+          each("Story", { itemSpacing: 28 });
+          each("Security", { itemSpacing: 32, padding: pad(32) });
+          each("Band", { itemSpacing: 20, padding: pad(28) });
+          each("Seals", { layoutSizingHorizontal: "HUG" });
+          each("Logo row", { primaryAxisAlignItems: "MIN" });
+        }
+        if (size === "mobile") {
+          each("KPI", { layoutMode: "HORIZONTAL", counterAxisAlignItems: "CENTER", itemSpacing: 10, padding: { top: 9, right: 16, bottom: 9, left: 16 } });
+          each("Delta", { visible: false });
+          each("Period", { visible: false });
+          for (const kpi of KPIS) each(`${kpi.id} figure`, { layoutSizingHorizontal: "HUG", textAutoResize: "WIDTH_AND_HEIGHT" });
+          each("Plan accounts", { visible: false });
+          each("Share lane", { visible: false });
+          each("Kind", { visible: false });
+          each("Synced", { visible: false });
+          each("Records", { width: 116 });
+          each("Plot", { padding: { top: 14, right: 16, bottom: 12, left: 16 } });
+          each("Plan table", { padding: { top: 6, right: 16, bottom: 8, left: 16 } });
+          each("Ledger head", { padding: pad(10, 14) });
+          each("Ledger row", { padding: pad(12, 14) });
+          each("Exceptions", { padding: pad(12, 14) });
+          each("Waterfall cell", { padding: pad(20, 16) });
+          each("Risk cell", { padding: pad(20, 16) });
+          each("Board cell", { padding: pad(20, 16) });
+          each("Waterfall", { itemSpacing: 6 });
+          each("Reason", { visible: false });
+          each("Security", { padding: pad(24, 20) });
+          each("Seals", { itemSpacing: 8 });
+          each("Seal", { width: 66, height: 66 });
+          each("Seal ring", { visible: false });
+          each("Seal kind", { visible: false });
+          each("Band", { padding: pad(24, 20) });
+          each("Footer lists", { itemSpacing: 16 });
+          each("Review link", { visible: false });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  saas_data_landing_default
+};

package/dist/chunks/chunk-32SDP3T6.js

@@ -0,0 +1,74 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  FOLIO,
+  caption,
+  comicMeta,
+  comicSetup,
+  folio,
+  pageGrid,
+  panel,
+  rows,
+  say,
+  sfx,
+  slantTier,
+  tier,
+  tierBox,
+  tilted
+} from "./chunk-P6FWZDKA.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/print/comic-hero-cascade.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var comic_hero_cascade_default = defineTemplate({
+  id: "comic-cascade",
+  meta: comicMeta("Cascade page", 'Page five of "Nightstar: Blackout": a surge sets a neon billboard falling down the page toward Rosa, Nightstar dives in to sweep her clear on a canted frame, and Voltrix laughs in the flames', ["cascade", "rescue", "falling", "sound effects"]),
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Cascade page", preset("comic-page"));
+    comicSetup(k);
+    drawPage(k);
+    return k.finish();
+  }
+});
+function drawPage(k) {
+  const g = 12, { W, H } = pageGrid(k, k.sheet, 36, g);
+  const [h1, h2, h3, h4] = rows(H - FOLIO, g, [24, 30, 24, 22]);
+  const t1 = tierBox(k, k.sheet, W, h1, "Tier 1");
+  panel(k, t1, tier(W, h1, [1], g)[0], "cascade-1", { ground: "heroG1", name: "The surge" });
+  sfx(k, t1, "Vzzzt!", { x: W - 220, y: h1 - 100, w: 190, h: 90, deg: -6, seed: 2 });
+  const t2 = tierBox(k, k.sheet, W, h2, "Tier 2");
+  const [a, b] = slantTier(W, h2, [2, 3], 26, g);
+  panel(k, t2, a, "cascade-2", { ground: "heroG2", name: "The billboard falls" });
+  panel(k, t2, b, "cascade-3", { ground: "heroG3", name: "Rosa looks up" });
+  caption(k, t2, "Twelve storeys of steel and neon.", { x: 10, y: 10, width: 170 });
+  say(k, t2, "Oh no\u2014", { x: W - 110, y: 12, width: 96, to: { x: b.x + b.width * 0.55, y: h2 * 0.4 } });
+  const t3 = tierBox(k, k.sheet, W, h3, "Tier 3");
+  panel(k, t3, tilted(0, 0, W, h3, -24, 24), "cascade-4", { ground: "heroG1", name: "The save" });
+  sfx(k, t3, "Kranng!", { x: W - 360, y: 18, w: 330, h: 120, deg: 8, big: true, fill: "primary", seed: 17 });
+  const t4 = tierBox(k, k.sheet, W, h4, "Tier 4");
+  const [c, d] = tier(W, h4, [2, 3], g);
+  panel(k, t4, c, "cascade-5", { ground: "heroG2", name: "Shielded" });
+  panel(k, t4, d, "cascade-6", { ground: "heroG3", name: "Voltrix laughs" });
+  say(k, t4, "Stay down. Stay behind me.", { x: 10, y: 10, width: 128, to: { x: c.width * 0.4, y: h4 * 0.35 } });
+  say(k, t4, "Ha! Saved the girl. Lost the city.", { x: W - 170, y: 10, width: 160, to: { x: d.x + d.width * 0.5, y: h4 * 0.3 } });
+  folio(k, k.sheet, "Nightstar: Blackout \u2014 page 5");
+}
+
+export {
+  comic_hero_cascade_default,
+  drawPage
+};

package/dist/chunks/chunk-34YKGTP4.js

@@ -0,0 +1,117 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  background,
+  refilled
+} from "./chunk-DGSE6IBW.js";
+import {
+  logoBadge,
+  pill,
+  verticalPadding
+} from "./chunk-FYXK7W3C.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  hex,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  ease
+} from "./chunk-UNF7OQKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/effects/glass-intro.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var GLASS_INTRO = {
+  duration: 6e3,
+  deep: "#0A1A3A",
+  foam: "#3563C9",
+  /** The glass at rest: clear (no bend), a little frost. */
+  frost: 24,
+  /** How far the glass bends the waves at its strongest (px), and where it settles. */
+  bend: 28,
+  settle: 14
+};
+var cues = [
+  { layer: "Glass panel", preset: "rise-in", at: 300, params: { duration: 900 } },
+  { layer: "Live chip", preset: "pop-in", at: 900 },
+  { layer: "Talk title", preset: "words-in", at: 1200, params: { duration: 600 } },
+  { layer: "When", preset: "fade-in", at: 2300 },
+  { layer: "Host", preset: "fade-in", at: 2500 },
+  { layer: "Logo badge", preset: "pop-in", at: 2800 },
+  { layer: "Live chip", preset: "pulse", at: 3600 }
+];
+var glass_intro_default = defineTemplate({
+  id: "motion-glass-intro",
+  meta: {
+    name: "Glass webinar intro",
+    description: "A 6-second webinar opener: a glass panel whose refraction, dispersion and frost are keyed rises over slow shader waves, and the talk title, date and host come in on it \u2014 16:9, with square and 9:16 cuts for the promo posts",
+    category: "animation",
+    tags: ["animation", "background", "glass", "shader", "waves", "webinar", "intro", "live", "talk"],
+    platforms: ["youtube", "linkedin", "x", "instagram"],
+    formats: ["intro", "title-card", "video", "post", "story"],
+    useCases: ["event", "livestream", "education"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues },
+  build() {
+    const G = GLASS_INTRO;
+    const k = new Kit("Glass webinar intro", preset("video-1080p"));
+    k.brand(
+      { paper: G.deep, glass: G.deep, headline: "#F4F7FF", caption: "#C9D6F2", primary: "#FFC857", onPrimary: "#0A1A3A" },
+      { company: "Tidewater Analytics", title: "Forecasting demand with the data you have", when: "Tuesday, October 21 \xB7 11 am ET", host: "Hosted by Priya Raman, head of data science" }
+    );
+    k.textStyle("Title 88", { size: 88, fontWeight: 800, letterSpacing: -2.5, lineHeight: 96 });
+    k.textStyle("Title 72", { size: 72, fontWeight: 800, letterSpacing: -2, lineHeight: 80 });
+    k.textStyle("Chip 26", { size: 26, fontWeight: 800, letterSpacing: 3, lineHeight: 30 });
+    k.textStyle("Meta 36", { size: 36, fontWeight: 600, lineHeight: 44 });
+    k.textStyle("Host 30", { size: 30, fontWeight: 500, lineHeight: 38 });
+    pill(k, "Chip", { fill: "primary", ink: "onPrimary", style: "Chip 26", label: "LIVE WEBINAR", pad: [12, 24] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 120, right: 160, bottom: 120, left: 160 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: G.duration, fps: 30 });
+    const bg = background(k, sheet, k.shader("Waves", { speed: 0.4, scale: 5, deep: hex(G.deep), foam: hex(G.foam) }));
+    const glassFx = [{ id: "e1", type: "GLASS", radius: G.frost, refraction: 0, dispersion: 0, rim: 0.55, depth: 0, visible: true }];
+    const panel = k.stack(sheet, { width: 1240, fill: k.tint("glass", 0.5), radius: 48, gap: 28, padding: { top: 64, right: 72, bottom: 64, left: 72 }, clip: true, effects: glassFx, name: "Glass panel" });
+    const top = k.stack(panel, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Panel top" });
+    k.instance(top, "Chip", { Label: "LIVE WEBINAR" }, { name: "Live chip" });
+    logoBadge(k, top, { fill: "primary", size: 56 });
+    k.text(panel, "{{brand.title}}", { style: "Title 88", color: "headline", name: "Talk title" });
+    k.text(panel, "{{brand.when}}", { style: "Meta 36", color: "headline", name: "When" });
+    k.text(panel, "{{brand.host}}", { style: "Host 30", color: "caption", name: "Host" });
+    k.animateShader(bg, "scale", [{ t: 0, v: 5, ease: ease.inOut("sine") }, { t: 3e3, v: 3.5, ease: ease.inOut("sine") }, { t: G.duration, v: 4.5 }]);
+    k.animate(panel, "effects[@e1].refraction", [{ t: 600, v: 0, ease: ease.out("expo") }, { t: 1800, v: G.bend, ease: ease.inOut("sine") }, { t: 4800, v: G.settle }]);
+    k.animate(panel, "effects[@e1].dispersion", [{ t: 600, v: 0, ease: ease.out("cubic") }, { t: 1800, v: 0.45, ease: ease.inOut("sine") }, { t: 4800, v: 0.2 }]);
+    k.animate(panel, "effects[@e1].radius", [{ t: 600, v: G.frost, ease: ease.out("cubic") }, { t: 1800, v: 6 }]);
+    k.animate(panel, "effects[@e1].depth", [{ t: 600, v: 0, ease: ease.out("cubic") }, { t: 1800, v: 0.8 }]);
+    k.cues(sheet, cues);
+    k.variants(sheet, refilled([
+      { preset: "ig-post", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 64, right: 64, bottom: 64, left: 64 }, primaryAxisAlignItems: "CENTER" });
+        for (const n of kit.named(id, "Glass panel")) kit.patch(n, { width: 952, padding: { top: 56, right: 56, bottom: 56, left: 56 } });
+        for (const n of kit.named(id, "Talk title")) kit.restyle(n, "Title 72");
+      } },
+      { preset: "ig-story", adjust: (kit, id) => {
+        kit.patch(id, { padding: verticalPadding(80), primaryAxisAlignItems: "CENTER" });
+        for (const n of kit.named(id, "Glass panel")) kit.patch(n, { width: 800, padding: { top: 48, right: 44, bottom: 48, left: 44 } });
+        for (const n of kit.named(id, "Talk title")) kit.restyle(n, "Title 72");
+      } }
+    ]));
+    return k.finish();
+  }
+});
+
+export {
+  GLASS_INTRO,
+  glass_intro_default
+};