@popcraft/kit 0.26.0 → 0.27.0

package/dist/chunks/chunk-2EYOEOXD.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-YNOCYFZ4.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  compactNav,
+  footer,
+  linePath,
+  respond,
+  rule,
+  soft,
+  typeScale
+} from "./chunk-O7APDMKU.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-YKXCPYWJ.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.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-2FHRHPFL.js

@@ -0,0 +1,187 @@
+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 {
+  CLAY_FPS,
+  arrives,
+  clayBall,
+  clayBrand,
+  clayCloud,
+  clayFx,
+  claySet,
+  claySun,
+  fitClaySet,
+  fitLooseClay,
+  hop,
+  land,
+  looseClay,
+  pip,
+  pipBox,
+  scaleAt,
+  weekBeads
+} from "./chunk-5EHNTSDZ.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  outro,
+  pill,
+  postVariants
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/claymation-streak-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 7e3;
+var OUT = 5800;
+var EVERY = 400;
+var SCENE = { w: 700, h: 470, ground: 440 };
+var WEEK = { bead: 96, step: 140 };
+var PIP = 300;
+var MEDAL = 216;
+var SQUARE = {
+  set: { w: 1080, h: 1080, horizon: 600, u: 1 },
+  scene: { x: 384, ground: 828, f: 1 },
+  week: { x: 72, y: 884, f: 1 },
+  sun: { x: 850, y: 60, f: 1.1 },
+  cloud: { x: 884, y: 318, f: 0.7 },
+  loose: [[60, 690, 30, "clayPink"], [230, 770, 44, "clayGreen"], [1040, 850, 36, "clayBlue"], [330, 650, 22, "clayYellow"], [150, 840, 26, "clayBlue"], [1030, 660, 24, "clayGreen"]]
+};
+var PORTRAIT = {
+  set: { w: 1080, h: 1350, horizon: 780, u: 1 },
+  scene: { x: 300, ground: 1030, f: 1.1 },
+  week: { x: 72, y: 1120, f: 1 },
+  sun: { x: 868, y: 40, f: 1 },
+  cloud: { x: 50, y: 650, f: 1 },
+  loose: [[60, 890, 30, "clayPink"], [200, 990, 44, "clayGreen"], [1030, 1090, 36, "clayBlue"], [300, 850, 22, "clayYellow"], [120, 1080, 26, "clayBlue"], [1020, 850, 24, "clayGreen"]]
+};
+var STORY = {
+  set: { w: 1080, h: 1920, horizon: 1010, u: 1 },
+  scene: { x: 100, ground: 1250, f: 1.28 },
+  week: { x: 146, y: 1310, f: 0.842 },
+  sun: { x: 60, y: 46, f: 1 },
+  cloud: { x: 800, y: 560, f: 1 },
+  // Under the week the table runs on to the near edge (where the apps lay their own buttons): clay waiting for next week.
+  loose: [[60, 1100, 30, "clayPink"], [90, 1270, 44, "clayGreen"], [1030, 1280, 36, "clayBlue"], [1e3, 1080, 22, "clayYellow"], [330, 1650, 90, "clayBlue"], [700, 1760, 110, "clayYellow"], [560, 1570, 50, "clayGreen"], [880, 1590, 40, "clayPink"], [200, 1540, 34, "clayYellow"]],
+  near: [{ x: -100, y: 1690 }, { x: 850, y: 1720 }]
+};
+function arrange(k, id, l) {
+  fitClaySet(k, id, l.set);
+  for (const s of k.named(id, "Scene")) scaleAt(k, s, l.scene.x, l.scene.ground - SCENE.ground * l.scene.f, l.scene.f);
+  for (const s of k.named(id, "Week")) scaleAt(k, s, l.week.x, l.week.y, l.week.f);
+  for (const s of k.named(id, "Sun")) scaleAt(k, s, l.sun.x, l.sun.y, l.sun.f);
+  for (const s of k.named(id, "Cloud")) scaleAt(k, s, l.cloud.x, l.cloud.y, l.cloud.f);
+  fitLooseClay(k, id, l.loose);
+  k.named(id, "Near clay").forEach((c, i) => k.patch(c, l.near?.[i] ? { ...l.near[i], visible: true } : { visible: false }));
+}
+var DAYS = Array.from({ length: 7 }, (_, i) => `Bead ${i + 1}`);
+var counts = [{ layer: "Medal figure", at: 0, duration: EVERY * 6, counter: { from: 1, to: 7 }, tick: EVERY }];
+var cues = [
+  { layer: "Eyebrow", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Headline", preset: "pop-in", at: 0, params: { duration: 420 } },
+  // The figure is pressed in with the first bead, so it can be smoothed away at the end instead of snapping 7 to 1.
+  { layer: "Medal figure", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Says", preset: "rise-in", at: 500, params: { duration: 500 } },
+  { layer: "Call", preset: "pop-in", at: 900, params: { duration: 450 } },
+  { layer: "Medal", preset: "wobble", at: 3300, params: { duration: 900 } },
+  { layer: "Headline", preset: "pulse", at: 4400, params: { duration: 700, amount: 0.04 } },
+  // Stop motion: Monday's bead is on the table from the first frame; the other six are put down one by one.
+  { ...arrives(DAYS.slice(1), EVERY), stagger: { delay: EVERY, order: "selection" } },
+  // The loop: the words leave, and the beads are picked back up, Sunday first.
+  outro(["Eyebrow", "Headline", "Says", "Call", "Medal figure"], OUT),
+  outro(DAYS.slice(1), OUT + 100, { preset: "pop-out", gap: 100, duration: 300 })
+];
+var claymation_streak_post_default = defineTemplate({
+  id: "motion-claymation-streak-post",
+  meta: {
+    name: "Clay streak post (animated)",
+    description: "A seven-second looping stop-motion post modelled in clay about the day a habit usually dies: seven beads land along a table one by one, the figure pressed into a clay medal counts with them to 7, and the mascot hops \u2014 held poses, squash and stretch, thumbprints. Square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "claymation", "clay", "plasticine", "stop motion", "mascot", "streak", "habit tracker", "onboarding", "encouragement", "counter", "family", "saas", "post", "playful"],
+    platforms: ["instagram", "threads", "linkedin", "x", "tiktok"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["onboarding", "milestone", "tips"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Clay streak post", preset("ig-post"));
+    k.quantizeGeometry = true;
+    clayBrand(k);
+    k.textStyle("Eyebrow 24", { size: 24, fontWeight: 800, letterSpacing: 4, lineHeight: 30, textCase: "UPPER" });
+    k.textStyle("Display 112", { size: 112, fontWeight: 900, letterSpacing: -5, lineHeight: 104 });
+    k.textStyle("Display 96", { size: 96, fontWeight: 900, letterSpacing: -4, lineHeight: 92 });
+    k.textStyle("Says 32", { ...SERIF, size: 32, fontStyle: "italic", fontWeight: 500, lineHeight: 42 });
+    k.textStyle("Medal 110", { size: 110, fontWeight: 900, letterSpacing: -4, lineHeight: 110, textAlign: "CENTER" });
+    k.textStyle("Day 26", { ...MONO, size: 26, fontWeight: 800, lineHeight: 30, textAlign: "CENTER" });
+    k.textStyle("Chip 26", { size: 26, fontWeight: 800, lineHeight: 32 });
+    pill(k, "Chip", { fill: "primary", ink: "onPrimary", style: "Chip 26", label: "Start a streak, free", pad: [14, 30] });
+    k.patch(k.componentIdOf("Chip"), { effects: clayFx(60) });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Streak post");
+    k.flowSheet(sheet, 0, 72, "paper", "MIN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: CLAY_FPS });
+    claySet(k, sheet, SQUARE.set);
+    claySun(k, sheet, 100, { x: 0, y: 0 }, { boil: 1e3 });
+    clayCloud(k, sheet, 220, { x: 0, y: 0 }, { seed: 1, boil: 1e3 });
+    looseClay(k, sheet, STORY.loose);
+    const scene = k.frame(sheet, { x: 0, y: 0, width: SCENE.w, height: SCENE.h }, { name: "Scene" });
+    const mascot = pip(k, scene, { s: PIP, absolute: { x: SCENE.w - pipBox(PIP).w, y: SCENE.ground - pipBox(PIP).footY }, look: -0.9, lookY: 0.9, loopMs: DURATION, blinkAt: [1500, 5e3] });
+    const medal = k.frame(scene, { x: 20, y: SCENE.ground - MEDAL - 62, width: MEDAL + 20, height: MEDAL + 70 }, { name: "Medal" });
+    const ribbon = (x, lean) => ({ closed: true, points: [{ x, y: 0 }, { x: x + 46, y: 0 }, { x: x + 46 + lean, y: 96 }, { x: x + lean, y: 96 }] });
+    k.vector(medal, MEDAL + 20, 100, [ribbon(50, 34), ribbon(140, -34)], "clayBlue", { name: "Ribbon", absolute: { x: 0, y: 0 }, effects: clayFx(46) });
+    const disc = k.frame(medal, { x: 10, y: 62, width: MEDAL, height: MEDAL }, { name: "Medal disc" });
+    clayBall(k, disc, MEDAL, "clayYellow", { name: "Medal clay", seed: 91, absolute: { x: 0, y: 0 } });
+    k.ellipse(disc, MEDAL - 44, k.tint("shine", 1e-3), { name: "Medal ring", stroke: { color: "dent", width: 5 }, opacity: 0.22, absolute: { x: 22, y: 22 } });
+    const figure = k.stack(disc, { width: MEDAL, height: MEDAL, align: "CENTER", justify: "CENTER", name: "Medal face", absolute: { x: 0, y: 0 } });
+    k.text(figure, "7", { style: "Medal 110", color: "clayInk", autoWidth: true, name: "Medal figure" });
+    const { beads } = weekBeads(k, sheet, { bead: WEEK.bead, step: WEEK.step, style: "Day 26", absolute: { x: 0, y: 0 } });
+    for (const [d, color, seed] of [[330, "clayPink", 71], [300, "clayGreen", 72]]) k.patch(clayBall(k, sheet, d, color, { name: "Near clay", h: d * 0.82, seed, absolute: { x: 0, y: 0 } }), { effects: clayFx(d) });
+    const top = k.stack(sheet, { gap: 18, name: "Top" });
+    k.text(top, "{{brand.site}} \xB7 streaks made of clay", { style: "Eyebrow 24", color: "onPaper", name: "Eyebrow" });
+    k.text(top, "Day 7 is the hard one.", { style: "Display 112", color: "text", width: 760, name: "Headline" });
+    k.text(top, "So on day seven Pip presses your kid a medal. No guilt, no red crosses: a missed day just leaves a gap to fill.", { style: "Says 32", color: "onPaper", width: 560, name: "Says" });
+    k.instance(top, "Chip", { Label: "Start a streak, free" }, { name: "Call" });
+    arrange(k, sheet, SQUARE);
+    beads.forEach((b, i) => {
+      if (i) land(k, b, i * EVERY, { from: 80 });
+    });
+    hop(k, k.named(mascot, "Pip body")[0], EVERY * 6 + 300, 64);
+    hop(k, k.named(mascot, "Pip body")[0], EVERY * 6 + 1300, 40);
+    land(k, disc, EVERY * 6 + 100);
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 72 }, {
+      portrait: (kit, id) => arrange(kit, id, PORTRAIT),
+      vertical: (kit, id) => {
+        for (const n of kit.named(id, "Headline")) {
+          kit.restyle(n, "Display 96");
+          kit.patch(n, { width: 640 });
+        }
+        arrange(kit, id, STORY);
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  claymation_streak_post_default
+};