@popcraft/kit 0.53.4 → 0.53.6

package/dist/chunks/chunk-UV3SX27Q.js

@@ -1,200 +0,0 @@
-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 {
-  keyEverySize
-} from "./chunk-UK7IIX64.js";
-import {
-  chart,
-  gridPaths
-} from "./chunk-2VFVKPUT.js";
-import {
-  MONO
-} from "./chunk-AXAAXHZF.js";
-import {
-  each,
-  pattern,
-  put,
-  redraw,
-  sizeOf
-} from "./chunk-LWSZATOL.js";
-import {
-  glow
-} from "./chunk-YORIY3BT.js";
-import {
-  logoBadge,
-  outro,
-  pill,
-  postVariants
-} from "./chunk-KOAJ6HD2.js";
-import {
-  box
-} from "./chunk-EJLCQVQK.js";
-import {
-  defineTemplate
-} from "./chunk-KGT34R7C.js";
-import {
-  Kit,
-  preset
-} from "./chunk-L5DTT5DC.js";
-import {
-  ease
-} from "./chunk-PLZLKHOI.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-WKDVCZ45.js";
-
-// templates/src/social/saas-kit-mrr-card.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var DURATION = 1e4;
-var OUT = 9200;
-var MRR = [180, 420, 610, 940, 1380, 1720, 2400, 3150, 3900, 4800, 5950, 7100, 8600, 1e4];
-var MAX = 11e3;
-var CELL = 14;
-var FACTS = ["> 412 paying teams, 3.1% monthly churn", "> 0 ads \xB7 0 investors \xB7 2 founders", "> month 14 since the first commit"];
-var DRAW_AT = 1500;
-var DRAW_MS = 2200;
-var counts = [{ layer: "Figure", at: DRAW_AT, duration: DRAW_MS, counter: { from: 0, to: 1e4, prefix: "$", separator: "," } }];
-var cues = [
-  { layer: "Command", preset: "typewriter", at: 200, params: { duration: 1e3 } },
-  { layer: "Figure", preset: "fade-in", at: DRAW_AT - 100, params: { duration: 200 } },
-  { layer: "Unit", preset: "fade-in", at: DRAW_AT, params: { duration: 300 } },
-  { layer: "Axis", preset: "fade-in", at: 1300, params: { duration: 300 } },
-  { layer: "Columns", preset: "wipe-in", at: DRAW_AT, params: { duration: DRAW_MS, ease: ease.linear } },
-  { layer: "Line", preset: "wipe-in", at: DRAW_AT, params: { duration: DRAW_MS, ease: ease.linear } },
-  { layer: "Goal", preset: "fade-in", at: DRAW_AT + DRAW_MS - 300, params: { duration: 300 } },
-  { layer: "Peak", preset: "pop-in", at: DRAW_AT + DRAW_MS, params: { duration: 400 } },
-  { layer: "Figure", preset: "pulse", at: DRAW_AT + DRAW_MS + 100, params: { duration: 600, amount: 0.04 } },
-  { layer: "Fact", preset: "typewriter", at: 4300, params: { duration: 500 }, stagger: { delay: 600 } },
-  { layer: "Open", preset: "pop-in", at: 6300, params: { duration: 400 } },
-  outro(["Command", "Figure", "Unit", "Axis", "Columns", "Line", "Goal", "Peak", "Fact", "Open"], OUT, { gap: 30, duration: 350 })
-];
-function drawChart(k, root, w, h) {
-  const cols = MRR.length, pitch = w / cols;
-  const cells = [];
-  MRR.forEach((v, i) => {
-    const n = Math.max(1, Math.round(v / MAX * (h / CELL)));
-    for (let j = 0; j < n; j++) cells.push(box(i * pitch + 3, h - (j + 1) * CELL + 2, pitch - 6, CELL - 4));
-  });
-  const c = chart(MRR, w - pitch, h, MAX);
-  const goalY = h - 1e4 / MAX * h;
-  each(k, root, "Plot", (id) => k.patch(id, { width: w, height: h }));
-  each(k, root, "Columns", (id) => k.patch(id, { width: w, height: h, paths: cells }));
-  each(k, root, "Line", (id) => k.patch(id, { x: pitch / 2, width: w - pitch, height: h, paths: [c.line] }));
-  each(k, root, "Goal rule", (id) => k.patch(id, { width: w, y: goalY }));
-  each(k, root, "Goal label", (id) => k.patch(id, { x: 0, y: goalY - 30 }));
-  each(k, root, "Peak", (id) => k.patch(id, { x: w - pitch / 2 - 13, y: goalY - 13 }));
-}
-var scan = (w, h) => gridPaths(w, h, 6, 2, "y");
-var saas_kit_mrr_card_default = defineTemplate({
-  id: "motion-saas-kit-mrr-card",
-  meta: {
-    name: "SaaS launch MRR milestone card (animated)",
-    description: "A build-in-public revenue milestone as the output of a shell command, in the terminal look: the command types itself, \u201C$10,000\u201D counts up in amber while the chart draws itself column by column to the 10k line, and the facts print underneath. It holds on the whole card, which is also the still, then clears to the prompt. Ten seconds, looping, square with 4:5 and 9:16 cuts",
-    category: "animation",
-    tags: ["animation", "saas", "saas launch", "mrr", "revenue", "milestone", "build in public", "terminal", "monospace", "chart", "counter", "indie", "post"],
-    platforms: ["x", "linkedin", "instagram", "threads"],
-    formats: ["post", "portrait-post", "story"],
-    useCases: ["milestone", "stats", "announcement"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, loop: true },
-  build() {
-    const k = new Kit("SaaS launch MRR milestone card (animated)", preset("ig-post"));
-    k.quantizeGeometry = true;
-    k.brand(
-      { paper: "#100E09", text: "#FFC247", onPaper: "#C9A566", accent: "#FF7A1A", onAccent: "#1A0B00", primary: "#FFC247", onPrimary: "#1A1203" },
-      { name: "Tickrate", site: "tickrate.example/open" }
-    );
-    k.textStyle("Bar 20", { ...MONO, size: 20, fontWeight: 500, lineHeight: 26 });
-    k.textStyle("Command 30", { ...MONO, size: 30, fontWeight: 600, letterSpacing: -0.5, lineHeight: 38 });
-    k.textStyle("Figure 210", { ...MONO, size: 210, fontWeight: 800, letterSpacing: -14, lineHeight: 200 });
-    k.textStyle("Figure 170", { ...MONO, size: 170, fontWeight: 800, letterSpacing: -11, lineHeight: 170 });
-    k.textStyle("Unit 34", { ...MONO, size: 34, fontWeight: 700, lineHeight: 40 });
-    k.textStyle("Fact 28", { ...MONO, size: 28, fontWeight: 500, letterSpacing: -0.4, lineHeight: 40 });
-    k.textStyle("Axis 18", { ...MONO, size: 18, fontWeight: 500, lineHeight: 22 });
-    k.textStyle("Open 22", { ...MONO, size: 22, fontWeight: 800, lineHeight: 28 });
-    pill(k, "Open", { fill: "accent", ink: "onAccent", style: "Open 22", label: "tickrate.example/open", pad: [10, 16], radius: 4 });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 22, { top: 0, right: 64, bottom: 56, left: 64 }, "paper", "SPACE_BETWEEN", "MIN");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: 30 });
-    glow(k, sheet, { x: 0, y: 0, w: 1300, h: 900, role: "accent", alpha: 0.16, name: "Phosphor" });
-    pattern(k, sheet, "Scanlines", "text", scan, 0.035);
-    k.rect(sheet, 1040, 1048, [], { name: "Window edge", radius: 22, opacity: 0.45, stroke: { color: "onPaper", width: 2, align: "INSIDE" }, absolute: { x: 20, y: 16 } });
-    const bar = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 26, right: 0, bottom: 20, left: 0 }, name: "Title bar" });
-    const left = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", name: "Bar left" });
-    const dots = k.stack(left, { direction: "HORIZONTAL", width: "HUG", gap: 9, name: "Window dots" });
-    for (let i = 0; i < 3; i++) k.ellipse(dots, 15, [], { name: "Window dot", stroke: { color: "onPaper", width: 2, align: "INSIDE" } });
-    k.text(left, "~/tickrate \xB7 zsh \xB7 80\xD724", { style: "Bar 20", color: "onPaper", autoWidth: true, name: "Path" });
-    const who = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", name: "Who" });
-    logoBadge(k, who, { fill: "accent", size: 20, pad: 7, radius: 4 });
-    k.text(who, "{{brand.name}}", { style: "Bar 20", color: "text", autoWidth: true, name: "Name" });
-    k.rect(sheet, "FILL", 2, "onPaper", { name: "Bar rule", opacity: 0.4 });
-    const head = k.stack(sheet, { gap: 22, name: "Head" });
-    k.text(head, "$ stripe mrr --since launch", { style: "Command 30", color: "onPaper", name: "Command" });
-    const fig = k.stack(head, { direction: "HORIZONTAL", gap: 20, align: "MAX", name: "Figure row" });
-    k.text(fig, "$10,000", { style: "Figure 210", color: "text", autoWidth: true, name: "Figure" });
-    k.text(fig, "MRR", { style: "Unit 34", color: "onPaper", autoWidth: true, name: "Unit" });
-    const chartBox = k.stack(sheet, { gap: 8, name: "Chart" });
-    const plot = k.stack(chartBox, { height: 260, name: "Plot" });
-    const goal = k.frame(plot, { x: 0, y: 0, width: 952, height: 260 }, { name: "Goal" });
-    k.rect(goal, 952, 2, "accent", { name: "Goal rule", absolute: { x: 0, y: 0 } });
-    k.text(goal, "10k", { style: "Axis 18", color: "text", autoWidth: true, name: "Goal label", absolute: { x: 0, y: 0 } });
-    k.vector(plot, 10, 10, [], "primary", { name: "Columns", absolute: { x: 0, y: 0 }, opacity: 0.55 });
-    k.vector(plot, 10, 10, [], "text", { name: "Line", strokeWidth: 5, absolute: { x: 0, y: 0 } });
-    k.ellipse(plot, 26, "accent", { name: "Peak", absolute: { x: 0, y: 0 }, stroke: { color: "paper", width: 5 } });
-    const axis = k.stack(chartBox, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Axis" });
-    for (const m of ["Sep \u201925", "Jan \u201926", "May \u201926", "Oct \u201926"]) k.text(axis, m, { style: "Axis 18", color: "onPaper", autoWidth: true, name: "Month" });
-    drawChart(k, sheet, 952, 260);
-    const facts = k.stack(sheet, { gap: 0, name: "Facts" });
-    for (const f of FACTS) k.text(facts, f, { style: "Fact 28", color: "text", name: "Fact" });
-    const foot = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Foot" });
-    k.instance(foot, "Open", { Label: "{{brand.site}}" }, { name: "Open" });
-    k.rect(foot, 16, 32, "text", { name: "Cursor" });
-    const cursor = k.named(sheet, "Cursor")[0];
-    k.animate(cursor, "opacity", Array.from({ length: DURATION / 500 + 1 }, (_, i) => ({ t: i * 500, v: i % 2 ? 0 : 1, ...i < DURATION / 500 ? { ease: ease.hold } : {} })));
-    const fit = (kit, id) => {
-      const { w, h } = sizeOf(kit, id);
-      redraw(kit, id, "Scanlines", scan);
-      put(kit, id, "Phosphor", w / 2 - 650, h * 0.42 - 450);
-      const p = kit.node(id).padding;
-      const tall = p.top > 100;
-      const x = tall ? p.left - 44 : 20, y = tall ? p.top - 16 : 16;
-      put(kit, id, "Window edge", x, y, { width: w - 2 * x, height: (tall ? h - p.bottom + 44 : h - 16) - y });
-    };
-    fit(k, sheet);
-    keyEverySize(k, sheet, postVariants({ portrait: 64 }, {
-      portrait: (kit, id) => {
-        kit.patch(id, { padding: { top: 0, right: 64, bottom: 64, left: 64 } });
-        each(kit, id, "Plot", (n) => kit.patch(n, { height: 400 }));
-        drawChart(kit, id, 952, 400);
-        each(kit, id, "Goal", (n) => kit.patch(n, { height: 400 }));
-        fit(kit, id);
-      },
-      vertical: (kit, id) => {
-        const p = kit.node(id);
-        const w = 1080 - p.padding.left - p.padding.right;
-        each(kit, id, "Figure", (n) => kit.restyle(n, "Figure 170"));
-        each(kit, id, "Plot", (n) => kit.patch(n, { height: 380 }));
-        each(kit, id, "Goal", (n) => kit.patch(n, { width: w, height: 380 }));
-        drawChart(kit, id, w, 380);
-        fit(kit, id);
-        const x0 = p.padding.left - 44;
-        put(kit, id, "Window edge", x0, kit.node(kit.named(id, "Window edge")[0]).y, { height: 1840 - kit.node(kit.named(id, "Window edge")[0]).y });
-        const lens = [0.62, 0.44, 0.71, 0.3, 0.55, 0.66, 0.38, 0.5];
-        lens.forEach((l, i) => kit.rect(id, Math.round(w * l), 16, "text", { name: "Scrollback", radius: 2, opacity: i % 4 === 0 ? 0.32 : 0.16, absolute: { x: p.padding.left, y: 1500 + i * 40 } }));
-      }
-    }), cues, counts);
-    return k.finish();
-  }
-});
-
-export {
-  saas_kit_mrr_card_default
-};

package/dist/chunks/chunk-UVH2TCUQ.js

@@ -1,368 +0,0 @@
-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-2VFVKPUT.js";
-import {
-  MONO,
-  SERIF
-} from "./chunk-AXAAXHZF.js";
-import {
-  compactNav,
-  footer,
-  linePath,
-  respond,
-  rule,
-  soft,
-  typeScale
-} from "./chunk-YHF6LRMF.js";
-import {
-  buttons,
-  nav,
-  page
-} from "./chunk-ZMD3C2YJ.js";
-import {
-  defineTemplate
-} from "./chunk-KGT34R7C.js";
-import {
-  Kit,
-  preset
-} from "./chunk-L5DTT5DC.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-WKDVCZ45.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
-};