@popcraft/kit 0.32.0 → 0.33.0

package/dist/chunks/chunk-ZPSYSDV2.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-UDE42EDS.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  compactNav,
+  footer,
+  linePath,
+  respond,
+  rule,
+  soft,
+  typeScale
+} from "./chunk-I2EYNBXR.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-TF2MO3UA.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.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-ZPWAYXXV.js

@@ -0,0 +1,79 @@
+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 {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  ease
+} from "./chunk-AY2VBUGS.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/smooth-loop.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SIZE = 1080;
+var LOOP = 4e3;
+var SWEEP = 260;
+var smooth_loop_default = defineTemplate({
+  id: "motion-smooth-loop",
+  meta: {
+    name: "Smooth loop",
+    description: "A seamless four-second loop made for 60 fps: three orbits turning at different speeds around a breathing mark, and a light sweeping the caption band \u2014 export it as MP4 or WebM at full size",
+    category: "animation",
+    tags: ["animation", "loop", "60fps", "orbit", "sweep", "seamless"],
+    platforms: ["instagram", "tiktok", "linkedin", "x"],
+    formats: ["post", "video"],
+    useCases: ["brand-intro", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  build() {
+    const k = new Kit("Smooth loop", preset("ig-post"));
+    k.brand({ primary: "#0B1020", onPrimary: "#FFFFFF", accent: "#7C5CFF", onAccent: "#FFFFFF", mint: "#35E0B0", sun: "#FFC247", ring: "#2A3354" });
+    k.textStyle("Display 200", { size: 200, fontWeight: 900, letterSpacing: -6, lineHeight: 200, textAlign: "CENTER" });
+    k.textStyle("Label 30", { size: 30, fontWeight: 800, letterSpacing: 6, lineHeight: 36, textAlign: "CENTER" });
+    k.textStyle("Caption 36", { size: 36, fontWeight: 700, letterSpacing: 2, lineHeight: 44, textAlign: "CENTER" });
+    k.component("Caption", { direction: "HORIZONTAL", width: "HUG", align: "CENTER", props: { Caption: "SIXTY FRAMES A SECOND  \xB7  SMOOTH AS GLASS" } }, (id) => {
+      k.propText(id, "Caption", { style: "Caption 36", color: "onAccent", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 8, 96, "primary", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: LOOP, fps: 60 });
+    const orbit = (name, d, dot, color) => {
+      const o = k.stack(sheet, { name, width: d, height: d, absolute: { x: (SIZE - d) / 2, y: (SIZE - d) / 2 } });
+      k.ellipse(o, d, [], { name: "Ring", stroke: { color: "ring", width: 3 }, absolute: { x: 0, y: 0 } });
+      k.ellipse(o, dot, color, { name: "Dot", absolute: { x: (d - dot) / 2, y: -dot / 2 } });
+      return o;
+    };
+    const outer = orbit("Outer orbit", 820, 44, "accent");
+    const middle = orbit("Middle orbit", 600, 34, "mint");
+    const inner = orbit("Inner orbit", 400, 26, "sun");
+    const mark = k.stack(sheet, { name: "Mark", width: "HUG", gap: 8, align: "CENTER" });
+    k.text(mark, "SMOOTH LOOP", { style: "Label 30", color: "onPrimary", autoWidth: true, name: "Label" });
+    k.text(mark, "60 fps", { style: "Display 200", color: "onPrimary", autoWidth: true, name: "Rate" });
+    const band = k.stack(sheet, { name: "Band", direction: "HORIZONTAL", width: SIZE, height: 72, fill: "accent", clip: true, justify: "CENTER", align: "CENTER", absolute: { x: 0, y: SIZE - 120 } });
+    const light = k.rect(band, SWEEP, 72, "onAccent", { name: "Sweep", opacity: 0.22, absolute: { x: -SWEEP, y: 0 } });
+    k.instance(band, "Caption");
+    const lin = ease.linear, sine = ease.inOut("sine");
+    k.animate(outer, "rotation", [{ t: 0, v: 0, ease: lin }, { t: LOOP, v: 360 }]);
+    k.animate(middle, "rotation", [{ t: 0, v: 0, ease: lin }, { t: LOOP, v: -360 }]);
+    k.animate(inner, "rotation", [{ t: 0, v: 0, ease: lin }, { t: LOOP, v: 720 }]);
+    for (const axis of ["scaleX", "scaleY"]) k.animate(mark, axis, [{ t: 0, v: 1, ease: sine }, { t: LOOP / 2, v: 1.06, ease: sine }, { t: LOOP, v: 1 }]);
+    const across = SIZE + SWEEP;
+    k.animate(light, "translateX", [{ t: 0, v: 0, ease: lin }, { t: LOOP / 2 - 1, v: across, ease: ease.hold }, { t: LOOP / 2, v: 0, ease: lin }, { t: LOOP, v: across }]);
+    return k.finish();
+  }
+});
+
+export {
+  smooth_loop_default
+};

package/dist/chunks/chunk-ZQRD4MUI.js

@@ -0,0 +1,164 @@
+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 {
+  SHARD,
+  blinking,
+  cursor,
+  fitGround,
+  ground,
+  lockup,
+  minimap,
+  mono,
+  panel,
+  scan,
+  termBrand
+} from "./chunk-NPH7WKTF.js";
+import {
+  cutOff,
+  cutOn,
+  hz
+} from "./chunk-GLFOEPRY.js";
+import {
+  pill,
+  postVariants
+} from "./chunk-LEKU2ZW3.js";
+import {
+  box
+} from "./chunk-6RCDZU4R.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  ease
+} from "./chunk-AY2VBUGS.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/style-terminal-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Terminal SaaS milestone post";
+var DURATION = 7e3;
+var OUT = 6e3;
+var WEEKS = Array.from({ length: 30 }, (_, i) => Math.round((0.6 + 6.4 * (i / 29) ** 1.6 + i * 7 % 5 * 0.12) * 100) / 100);
+var ROWS = 12;
+var MAX = 7.4;
+var CHART = { w: 888, h: 240 };
+var CONTENT = ["Top row", "Command", "Figure", "Figure label", "Chart panel", "Stats", "Foot"];
+var cues = [
+  cutOn("Top row", 100),
+  { layer: "Command", preset: "typewriter", at: 150, params: { duration: 600 } },
+  cutOn("Figure", 800),
+  cutOn("Figure label", 900),
+  cutOn("Chart panel", 900),
+  cutOn("Week column", 1100, 60),
+  cutOn("Stats", 3250),
+  cutOn("Stat", 3300, 200),
+  cutOn("Foot", 1200),
+  cutOff([...CONTENT].reverse(), OUT, 80)
+];
+var counts = [
+  { layer: "Figure", at: 900, duration: 2200, counter: { from: 0, to: 1e8 } }
+];
+function weekCells(w, h) {
+  const gap = 4, cw = (w - gap * (WEEKS.length - 1)) / WEEKS.length, ch = (h - gap * (ROWS - 1)) / ROWS;
+  const columns = WEEKS.map((v, i) => {
+    const n = Math.max(1, Math.round(v / MAX * ROWS));
+    return Array.from({ length: n }, (_, j) => box(Math.round(i * (cw + gap) * 10) / 10, Math.round((h - (j + 1) * ch - j * gap) * 10) / 10, Math.round(cw * 10) / 10, Math.round(ch * 10) / 10));
+  });
+  const line = { closed: false, points: WEEKS.map((v, i) => ({ x: Math.round((i * (cw + gap) + cw / 2) * 10) / 10, y: Math.round((h - v / MAX * h) * 10) / 10 })) };
+  return { columns, line };
+}
+var style_terminal_milestone_default = defineTemplate({
+  id: "motion-saas-style-terminal-milestone",
+  meta: {
+    name: NAME,
+    description: "An animated milestone post in the terminal look: a stats command is typed, a big monospace figure counts to 100,000,000 and a chart draws itself column by column in character cells with a line traced over the tops, then three figures print. It all cuts off to a blinking cursor, so it loops. Seven seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "terminal", "monospace", "cli", "developer tools", "milestone", "metric", "counter", "chart", "stats", "post", "loop"],
+    platforms: ["instagram", "x", "linkedin", "threads", "facebook"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "announcement", "stats"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    termBrand(k, {});
+    mono(k, "Brand 32", 32, { weight: 700, lead: 1.2 });
+    mono(k, "Label 24", 24, { weight: 500, lead: 1.4 });
+    mono(k, "Command 30", 30, { weight: 600, lead: 1.4 });
+    mono(k, "Figure 128", 128, { weight: 800, lead: 1, spacing: -6 });
+    mono(k, "Stat 40", 40, { weight: 800, lead: 1.1, spacing: -1 });
+    mono(k, "Stat 56", 56, { weight: 800, lead: 1.1, spacing: -1.5 });
+    mono(k, "Button 24", 24, { weight: 700, lead: 1.3 });
+    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 24", label: `$ ${SHARD.install}`, pad: [12, 20], radius: 4 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 22, 72, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    ground(k, sheet, 1080, 1080, { cw: 18, lh: 36 });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
+    lockup(k, top, { size: 32, style: "Brand 32" });
+    const tag = k.stack(top, { direction: "HORIZONTAL", width: "HUG", padding: { top: 4, right: 12, bottom: 4, left: 12 }, stroke: { color: "edge", width: 2, align: "INSIDE" }, name: "Date tag" });
+    k.text(tag, "oct 2026", { style: "Label 24", color: "onPaper", autoWidth: true, name: "Date words" });
+    const words = k.stack(sheet, { gap: 6, name: "Words" });
+    k.text(words, `$ ${SHARD.cli} stats --all-time`, { style: "Command 30", color: "onPaper", name: "Command" });
+    k.text(words, "100,000,000", { style: "Figure 128", color: "text", width: 936, name: "Figure" });
+    k.text(words, "tests split across runners since March. Thank you.", { style: "Label 24", color: "onPaper", name: "Figure label" });
+    const chart = panel(k, sheet, { label: "tests a week, millions", style: "Label 24", name: "Chart panel", pad: 24 });
+    const area = k.stack(chart.body, { height: CHART.h, name: "Chart area" });
+    const cells = weekCells(CHART.w, CHART.h);
+    k.vector(area, CHART.w, CHART.h, [0.25, 0.5, 0.75].map((f) => box(0, Math.round(CHART.h * f), CHART.w, 1)), k.tint("cardMuted", 0.25), { name: "Chart levels", absolute: { x: 0, y: 0 } });
+    cells.columns.forEach((col) => k.vector(area, CHART.w, CHART.h, col, "green", { name: "Week column", absolute: { x: 0, y: 0 } }));
+    const line = k.vector(area, CHART.w, CHART.h, [cells.line], [], { name: "Trend line", absolute: { x: 0, y: 0 }, stroke: { color: "cyan", width: 4, join: "MITER" } });
+    const stats = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Stats" });
+    for (const [value, label] of [["4.1M", "runs"], ["812k h", "of waiting saved"], ["3,200", "teams"]]) {
+      const st = k.stack(stats, { width: "HUG", gap: 2, name: "Stat" });
+      k.text(st, value, { style: "Stat 40", color: "text", autoWidth: true, name: "Stat value" });
+      k.text(st, label, { style: "Label 24", color: "onPaper", autoWidth: true, name: "Stat label" });
+    }
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Foot" });
+    k.instance(foot, "Call", { Label: `$ ${SHARD.install}` }, { name: "Call" });
+    const site = k.stack(foot, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 8, name: "Site row" });
+    k.text(site, "{{brand.site}}", { style: "Label 24", color: "onPaper", autoWidth: true, name: "Site" });
+    blinking(k, cursor(k, site, 24, { name: "Cursor" }), hz(14, DURATION));
+    scan(k, sheet);
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.animate(line, "trim.end", Array.from({ length: 31 }, (_, i) => ({ t: 1100 + i * 60, v: Math.round(i / 30 * 1e3) / 1e3, ...i < 30 ? { ease: ease.hold } : {} })));
+    k.animate(line, "opacity", [{ t: OUT + 400, v: 1, ease: ease.hold }, { t: OUT + 500, v: 0 }]);
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      portrait: (kit, id) => {
+        fitGround(kit, id, { cw: 18, lh: 36 });
+      },
+      vertical: (kit, id) => {
+        fitGround(kit, id, { cw: 18, lh: 36 });
+        for (const n of kit.named(id, "Figure")) kit.patch(n, { width: 800 });
+        const w = 800 - 48, h = Math.round(CHART.h * 1.6), c = weekCells(w, h);
+        for (const n of kit.named(id, "Chart area")) kit.patch(n, { height: h });
+        kit.named(id, "Week column").forEach((n, i) => kit.patch(n, { width: w, height: h, paths: c.columns[i] }));
+        for (const n of kit.named(id, "Trend line")) kit.patch(n, { width: w, height: h, paths: [c.line] });
+        for (const n of kit.named(id, "Chart levels")) kit.patch(n, { width: w, height: h, paths: [0.25, 0.5, 0.75].map((f) => box(0, Math.round(h * f), w, 1)) });
+        for (const n of kit.named(id, "Stat value")) kit.restyle(n, "Stat 56");
+        minimap(kit, id, { x: 140, y: 1500, width: 800, rows: 15, seed: 41, scroll: { duration: DURATION, every: 500 } });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  style_terminal_milestone_default
+};

package/dist/chunks/chunk-ZREXIEDB.js

@@ -0,0 +1,23 @@
+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 {
+  KILOVOLT
+} from "./chunk-OPBI7TS6.js";
+import {
+  reel
+} from "./chunk-YPDCDENL.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/festival-presale-electronic-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var festival_presale_electronic_reel_default = reel(KILOVOLT);
+
+export {
+  festival_presale_electronic_reel_default
+};