@popcraft/kit 0.24.2 → 0.25.0

package/dist/chunks/chunk-4TPWXYGK.js

@@ -0,0 +1,263 @@
+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 {
+  LATCH,
+  WEB_STEPS,
+  WEB_TYPE,
+  card,
+  chip,
+  darkBrand,
+  fitHeroGround,
+  heroGround,
+  sectionHead
+} from "./chunk-M6QTK2HG.js";
+import {
+  tick
+} from "./chunk-YNOCYFZ4.js";
+import {
+  compactNav,
+  footer,
+  respond,
+  rule,
+  typeScale
+} from "./chunk-G5CURQ6H.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-YKXCPYWJ.js";
+import {
+  cutOn
+} from "./chunk-PMVMC75G.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/style-dark-pricing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Dark SaaS pricing page";
+var PLANS = [
+  { name: "Hobby", pitch: "For a side project, or a first rollout.", month: 0, steps: 1, cta: "Start free", features: ["One project, five flags", "One environment", "Staged rollouts", "Community forum"] },
+  { name: "Team", pitch: "For a product team that deploys daily.", month: LATCH.team, steps: 3, featured: true, cta: "Start a 14-day trial", features: ["Unlimited flags", "Three environments", "Guardrails and auto-rollback", "Ten seats", "90-day audit log"] },
+  { name: "Scale", pitch: "For a company with a security review.", month: LATCH.scale, steps: 4, cta: "Talk to us", features: ["Everything in Team", "Unlimited seats", "SSO and SCIM", "Audit log export", "99.99% uptime SLA"] }
+];
+var TABLE = [
+  ["Flags", "5", "Any", "Any"],
+  ["Environments", "1", "3", "Any"],
+  ["Seats", "1", "10", "Any"],
+  ["Flag checks", "Any", "Any", "Any"],
+  ["Guardrails", "no", "yes", "yes"],
+  ["Audit log", "7 d", "90 d", "1 yr"],
+  ["SSO", "no", "no", "yes"],
+  ["Uptime SLA", "no", "99.9%", "99.99%"]
+];
+var FAQ = [
+  ["Do you charge per flag check?", "No. Check a flag a billion times a day and the bill is the same. Plans differ by seats, environments and how long we keep the audit log."],
+  ["What counts as a seat?", "Anyone who can change a flag. People who only read the dashboards are free on every plan."],
+  ["What if we pass five flags on Hobby?", "Nothing breaks. Your flags keep working; you cannot add a sixth until you archive one or move to Team."],
+  ["Can we move between monthly and yearly?", "Any time. Moving to yearly credits what is left of the month. Moving back takes effect at renewal."]
+];
+var COL = { desktop: 190, laptop: 170, tablet: 120, mobile: 56 };
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Headline", preset: "words-in", at: 80, params: { duration: 420, amount: 50 } },
+  { layer: "Lead", preset: "rise-in", at: 320, params: { duration: 450 } },
+  { layer: "Switch row", preset: "rise-in", at: 440, params: { duration: 400 } },
+  { layer: "Plan", preset: "rise-in", at: 520, params: { duration: 450 }, stagger: { delay: 90 } },
+  { layer: "Plan step", preset: "wipe-in", at: 900, params: { duration: 260 }, stagger: { delay: 110 } },
+  cutOn("Table row", 1300, 110)
+];
+var counts = [
+  { layer: "Team amount", at: 620, duration: 900, counter: { from: 0, to: LATCH.team, prefix: "$" } },
+  { layer: "Scale amount", at: 710, duration: 900, counter: { from: 0, to: LATCH.scale, prefix: "$" } }
+];
+var style_dark_pricing_default = defineTemplate({
+  id: "web-saas-style-dark-pricing",
+  meta: {
+    name: NAME,
+    description: "A pricing page in the dark precision look whose monthly / yearly switch works in present mode: a variable toggle flips every price at once while the knob glides. Three plans with the middle one raised, a comparison table with drawn ticks, four questions, a closing call and a footer; the prices count up and the table fills in on load. Desktop to phone",
+    category: "web",
+    tags: ["pricing", "plans", "toggle", "interactive", "variables", "comparison table", "faq", "saas", "dark", "dark mode", "developer tools", "counter", "animation", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["pricing", "launch", "comparison"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, preset("web-desktop"));
+    k.quantizeGeometry = true;
+    darkBrand(k, { tagline: "One price per team. Not per flag." });
+    const monthly = k.variable("Billing", "monthly", "BOOLEAN", true);
+    const yearly = k.variable("Billing", "yearly", "BOOLEAN", false);
+    const s = typeScale(k, { ...WEB_TYPE, "Price 56": { size: 56, fontWeight: 700, letterSpacing: -2.6, lineHeight: 58, fontFeatures: { tnum: 1 } }, "Switch 15": { size: 15, fontWeight: 500, lineHeight: 22 }, "Switch on 15": { size: 15, fontWeight: 700, lineHeight: 22 } });
+    buttons(k, { style: s("Button 15"), pad: [11, 18], radius: 8 });
+    k.component("Button card", { direction: "HORIZONTAL", width: "HUG", radius: 8, align: "CENTER", stroke: { color: "edge", width: 1, align: "INSIDE" }, padding: { top: 11, right: 18, bottom: 11, left: 18 }, props: { Label: "Start free" } }, (id) => {
+      k.propText(id, "Label", { style: s("Button 15"), color: "onCard", autoWidth: true });
+    });
+    k.variantSet("Billing switch", "Billing", ["Monthly", "Yearly"], {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      gap: 12,
+      align: "CENTER",
+      padding: 4,
+      description: "Monthly or yearly billing: click to switch, and the knob glides across. On the pricing page the click also flips the billing variables every price is bound to.",
+      props: { Left: "Monthly", Right: "Yearly" }
+    }, (state, id) => {
+      k.propText(id, "Left", { style: s(state === "Monthly" ? "Switch on 15" : "Switch 15"), color: state === "Monthly" ? "text" : "onPaper", autoWidth: true });
+      const track = k.stack(id, { direction: "HORIZONTAL", width: 48, height: 26, radius: 13, padding: 3, align: "CENTER", justify: state === "Yearly" ? "MAX" : "MIN", fill: "primary", name: "Track" });
+      k.ellipse(track, 20, "onPrimary", { name: "Knob" });
+      k.propText(id, "Right", { style: s(state === "Yearly" ? "Switch on 15" : "Switch 15"), color: state === "Yearly" ? "text" : "onPaper", autoWidth: true });
+    });
+    k.changeTo("Billing switch/Monthly", "ON_CLICK", "Billing switch/Yearly", 200, "EASE_OUT");
+    k.changeTo("Billing switch/Yearly", "ON_CLICK", "Billing switch/Monthly", 200, "EASE_OUT");
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 96, top: 24 });
+    k.timeline(sheet, { duration: 6e3, fps: 30 });
+    heroGround(k, sheet, 1440, 560);
+    const top = k.stack(sheet, { gap: 64, name: "Top" });
+    nav(k, top, { links: ["Product", "Guardrails", "Pricing", "Docs", "Sign in"], cta: "Start free", style: s("Nav 15"), brandStyle: s("Brand 19") });
+    const head = k.stack(top, { direction: "HORIZONTAL", gap: 64, align: "MAX", name: "Header" });
+    const title = k.stack(head, { gap: 22, name: "Header title" });
+    const tag = k.stack(title, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Eyebrow" });
+    k.rect(tag, 8, 8, "primary", { radius: 2, name: "Label mark" });
+    k.text(tag, "PRICING", { style: s("Label 13"), color: "onPaper", name: "Eyebrow words" });
+    k.text(title, "{{brand.tagline}}", { style: s("Display 76"), color: "text", name: "Headline" });
+    const billing = k.stack(head, { width: 420, gap: 22, name: "Header billing" });
+    k.text(billing, `Every plan checks a flag in ${LATCH.p99} and none of them counts how often. Pay by the year and two months are free.`, { style: s("Lead 19"), color: "onPaper", name: "Lead" });
+    const sw = k.stack(billing, { direction: "HORIZONTAL", gap: 14, align: "CENTER", wrap: true, name: "Switch row" });
+    const toggle = k.instance(sw, "Billing switch", { Left: "Monthly", Right: "Yearly" }, { name: "Billing toggle" });
+    k.setVariable(toggle, monthly, { toggle: true });
+    k.setVariable(toggle, yearly, { toggle: true });
+    chip(k, sw, "TWO MONTHS FREE", { name: "Saving", ink: "onPaper" });
+    const plans = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, name: "Plans" });
+    for (const p of PLANS) {
+      const c = k.stack(plans, { gap: 18, fill: p.featured ? "raised" : "card", radius: 14, padding: 28, stroke: { color: p.featured ? "signal" : "line", width: 1, align: "INSIDE" }, name: "Plan" });
+      if (p.features.length < 5) k.patch(c, { layoutSizingVertical: "FILL" });
+      const planHead = k.stack(c, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Plan head" });
+      k.text(planHead, p.name, { style: s("Card title 22"), color: "onCard", autoWidth: true, name: "Plan name" });
+      const steps = k.stack(planHead, { direction: "HORIZONTAL", width: "HUG", gap: 4, name: "Plan steps" });
+      for (let i = 0; i < 4; i++) k.rect(steps, 22, 6, i < p.steps ? "signal" : "edge", { radius: 2, name: i < p.steps ? "Plan step" : "Plan step off" });
+      k.text(c, p.pitch, { style: s("Body 16"), color: "cardMuted", name: "Pitch" });
+      const price = k.stack(c, { name: "Price" });
+      const block = (which) => {
+        const b = k.stack(price, { gap: 4, name: `${which} price` });
+        k.text(b, which === "Monthly" ? `$${p.month}` : `$${p.month * 10}`, { style: s("Price 56"), color: "onCard", name: which === "Monthly" ? `${p.name} amount` : `${p.name} yearly amount` });
+        k.text(b, !p.month ? "free, for as long as you like" : which === "Monthly" ? "a month, billed monthly" : `a year: you save $${p.month * 2}`, { style: s("Mono 14"), color: "cardMuted", name: "Billed" });
+        return b;
+      };
+      k.bindVariable(block("Monthly"), "visible", monthly);
+      k.bindVariable(block("Yearly"), "visible", yearly);
+      k.instance(c, p.featured ? "Button" : "Button card", { Label: p.cta }, { name: "Plan button" });
+      rule(k, c, p.featured ? "edge" : "line", { name: "Plan rule" });
+      const list = k.stack(c, { gap: 10, name: "Features" });
+      for (const f of p.features) {
+        const row = k.stack(list, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Feature" });
+        tick(k, row, 16, "signal", { name: "Feature tick", weight: 2 });
+        k.text(row, f, { style: s("Body 16"), color: "onCard", name: "Feature label" });
+      }
+    }
+    const compare = k.stack(sheet, { gap: 32, name: "Compare" });
+    sectionHead(k, compare, { label: "COMPARE", title: "Plan by plan.", s, name: "Compare head" });
+    const table = card(k, compare, { name: "Table", pad: 28, gap: 0 });
+    const cell = (row, value, i) => {
+      const drawn = value === "yes" || value === "no";
+      const c = k.stack(row, { direction: "HORIZONTAL", width: COL.desktop, name: "Cell", ...drawn ? { height: 22, align: "CENTER" } : {} });
+      if (value === "yes") tick(k, c, 16, "signal", { name: "Cell tick", weight: 2 });
+      else if (value === "no") k.rect(c, 12, 2, "edge", { name: "Cell dash" });
+      else k.text(c, value, { style: s("Mono 14"), color: i === 1 ? "onCard" : "cardMuted", name: "Cell value" });
+    };
+    const headRow = k.stack(table, { direction: "HORIZONTAL", gap: 8, align: "CENTER", padding: { top: 0, right: 0, bottom: 14, left: 0 }, name: "Table head" });
+    k.text(headRow, "WHAT YOU GET", { style: s("Label 13"), color: "cardMuted", name: "Table corner" });
+    PLANS.forEach((p) => {
+      const c = k.stack(headRow, { direction: "HORIZONTAL", width: COL.desktop, name: "Cell" });
+      k.text(c, p.name.toUpperCase(), { style: s("Label 13"), color: p.featured ? "signal" : "cardMuted", name: "Column name" });
+    });
+    for (const [feature, ...values] of TABLE) {
+      const line = k.stack(table, { name: "Table row" });
+      rule(k, line, "line", { name: "Row rule" });
+      const row = k.stack(line, { direction: "HORIZONTAL", gap: 8, align: "CENTER", padding: { top: 13, right: 0, bottom: 13, left: 0 }, name: "Row cells" });
+      k.text(row, feature, { style: s("Body 16"), color: "onCard", name: "Row feature" });
+      values.forEach((v, i) => cell(row, v, i));
+    }
+    const faq = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, name: "FAQ" });
+    const faqHead = k.stack(faq, { width: 360, name: "FAQ side" });
+    sectionHead(k, faqHead, { label: "QUESTIONS", title: "Asked before buying.", s, name: "FAQ head" });
+    const qs = k.stack(faq, { name: "FAQ list" });
+    for (const [q, a] of FAQ) {
+      rule(k, qs, "line", { name: "Question rule" });
+      const item = k.stack(qs, { gap: 8, padding: { top: 20, right: 0, bottom: 24, left: 0 }, name: "Question" });
+      k.text(item, q, { style: s("Plan 18"), color: "text", name: "Q" });
+      k.text(item, a, { style: s("Body 16"), color: "onPaper", name: "A" });
+    }
+    const close = card(k, sheet, { name: "Close", direction: "HORIZONTAL", gap: 32, pad: 48, align: "CENTER" });
+    const closeWords = k.stack(close, { gap: 10, name: "Close words" });
+    k.text(closeWords, "Start on Hobby today.", { style: s("Display 64"), color: "onCard", name: "Close title" });
+    k.text(closeWords, "No card. Move up when a second person needs to flip a flag.", { style: s("Body 16"), color: "cardMuted", name: "Close line" });
+    const closeSide = k.stack(close, { width: 132, align: "MAX", name: "Close side" });
+    k.instance(closeSide, "Button", { Label: "Start free" }, { name: "Close button" });
+    footer(k, sheet, {
+      about: LATCH.pitch,
+      legal: "Prices in US dollars, before sales tax. Yearly plans are billed once, up front. \xA9 2026 {{brand.name}}.",
+      columns: [["Product", ["Rollouts", "Guardrails", "Audit log", "Changelog"]], ["Developers", ["Docs", "SDKs", "API", "Status"]], ["Company", ["Pricing", "Security", "Contact"]]],
+      brandStyle: s("Brand 19"),
+      headStyle: s("Label 13"),
+      linkStyle: s("Small 14"),
+      ruleColor: "line"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    respond(k, sheet, s, {
+      stack: ["Header", "Plans", "FAQ", "Footer columns"],
+      stackMobile: ["Close"],
+      restyle: WEB_STEPS,
+      hide: { mobile: ["Nav links"] },
+      gap: { tablet: 72, mobile: 56 },
+      tweak: (kit, id, size) => {
+        fitHeroGround(kit, id, size === "mobile" ? 640 : 560);
+        for (const n of kit.named(id, "Cell")) kit.patch(n, { width: COL[size] });
+        if (size === "tablet") compactNav(kit, id, ["Docs", "Sign in"], 20);
+        if (size === "tablet" || size === "mobile") {
+          for (const n of kit.named(id, "Plan")) kit.patch(n, { layoutSizingVertical: "HUG" });
+          for (const n of kit.named(id, "Header")) kit.patch(n, { itemSpacing: 24 });
+          for (const n of kit.named(id, "FAQ side")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const n of kit.named(id, "FAQ")) kit.patch(n, { itemSpacing: 28 });
+          for (const n of kit.named(id, "Top")) kit.patch(n, { itemSpacing: 44 });
+        }
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Table")) kit.patch(n, { padding: { top: 20, right: 16, bottom: 12, left: 16 } });
+          for (const n of kit.named(id, "Close")) kit.patch(n, { padding: { top: 28, right: 24, bottom: 28, left: 24 }, itemSpacing: 20 });
+          for (const n of kit.named(id, "Close side")) kit.patch(n, { counterAxisAlignItems: "MIN" });
+          for (const name of ["Table head", "Row cells"]) for (const n of kit.named(id, name)) kit.patch(n, { itemSpacing: 6 });
+        }
+      }
+    });
+    k.finish();
+    const prices = [...new Set(k.doc.pages.flatMap((p) => k.named(p, "Price")))];
+    for (const price of prices) k.patch(k.node(price).childIds[1], { visible: false });
+    k.finish();
+    for (const price of prices) {
+      const [m, y] = k.node(price).childIds;
+      k.patch(y, { x: k.node(m).x, y: k.node(m).y });
+    }
+    return k.doc;
+  }
+});
+
+export {
+  style_dark_pricing_default
+};

package/dist/chunks/chunk-4UXEXYYZ.js

@@ -0,0 +1,239 @@
+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 {
+  SLIDE,
+  deckType,
+  founderCues,
+  founderDeck,
+  levelRows
+} from "./chunk-NHOHED2C.js";
+import {
+  chart,
+  dotPaths
+} from "./chunk-YNOCYFZ4.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  glow
+} from "./chunk-HVK5T4I5.js";
+import {
+  box
+} from "./chunk-BNVLVZUT.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  LOGO_PLACEHOLDERS,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/slides/saas-mail-investor-update.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var MRR = [61, 66, 70, 77, 83, 88, 94, 101, 107, 112, 117, 128];
+var RUNWAY = { months: 24, left: 19, breakEven: 11 };
+var TILES = [
+  { name: "MRR", label: "MONTHLY REVENUE (MRR)", figure: "$128k", note: "Up 9.4% on August", good: true, counter: { from: 117, to: 128, prefix: "$", suffix: "k" } },
+  { name: "Customers", label: "PAYING CUSTOMERS", figure: "412", note: "35 new, 4 lost", good: true, counter: { from: 381, to: 412 } },
+  { name: "Churn", label: "NET REVENUE CHURN", figure: "0.4%", note: "Down from 2.1% in August", good: true, counter: { from: 2.1, to: 0.4, decimals: 1, suffix: "%" } },
+  { name: "Cash", label: "CASH IN THE BANK", figure: "$1.9M", note: "Net burn of $98k this month", good: false, counter: { from: 2, to: 1.9, decimals: 1, prefix: "$", suffix: "M" } }
+];
+var page = (k, sheet) => {
+  k.vector(sheet, SLIDE.full.w, SLIDE.full.h, dotPaths(SLIDE.full.w, SLIDE.full.h, 48, 4), "text", { name: "Dot grid", absolute: { x: 0, y: 0 }, opacity: 0.09 });
+  k.vector(sheet, 60, 60, [box(0, 0, 60, 6), box(0, 0, 6, 60)], "accent", { name: "Corner mark", absolute: { x: 72, y: 64 } });
+  k.vector(sheet, 60, 60, [box(0, 54, 60, 6), box(54, 0, 6, 60)], "accent", { name: "Corner mark", absolute: { x: SLIDE.full.w - 132, y: SLIDE.full.h - 124 }, opacity: 0.5 });
+};
+var opening = (k, sheet) => {
+  k.vector(sheet, SLIDE.full.w, SLIDE.full.h, dotPaths(SLIDE.full.w, SLIDE.full.h, 48, 4), "text", { name: "Dot grid", absolute: { x: 0, y: 0 }, opacity: 0.09 });
+  glow(k, sheet, { x: 1700, y: 760, w: 1100, role: "accent", alpha: 0.14, name: "Glow" });
+  const c = chart(MRR, SLIDE.full.w, 360, 140);
+  k.vector(sheet, SLIDE.full.w, 360, [c.area], "accent", { name: "MRR area", opacity: 0.1, absolute: { x: 0, y: 720 } });
+  k.vector(sheet, SLIDE.full.w, 360, [c.line], "accent", { name: "MRR line", strokeWidth: 6, absolute: { x: 0, y: 720 } });
+  const last = c.pts[c.pts.length - 2];
+  k.ellipse(sheet, 26, "accent", { name: "MRR dot", absolute: { x: last.x - 13, y: 720 + last.y - 13 } });
+};
+function numbers(k, area) {
+  const grid = k.stack(area, { height: SLIDE.area, gap: 28, name: "Numbers" });
+  for (const pair of [TILES.slice(0, 2), TILES.slice(2)]) {
+    const row = k.stack(grid, { direction: "HORIZONTAL", height: "FILL", gap: 28, name: "Tile row" });
+    for (const t of pair) {
+      const tile = k.stack(row, { width: "FILL", height: "FILL", fill: "tint", radius: 18, stroke: { color: "edge", width: 2, align: "INSIDE" }, padding: { top: 30, right: 40, bottom: 30, left: 40 }, justify: "SPACE_BETWEEN", name: "Tile" });
+      const head = k.stack(tile, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Tile head" });
+      k.text(head, t.label, { style: "Memo 26", color: "dim", autoWidth: true, name: "Tile label" });
+      k.text(tile, t.figure, { style: "Tile 130", color: "onTint", name: `${t.name} figure` });
+      const chip = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", fill: t.good ? "accent" : "edge", radius: 999, padding: { top: 10, right: 22, bottom: 10, left: 22 }, name: "Tile note" });
+      k.text(chip, t.note, { style: "Note 26", color: t.good ? "onAccent" : "onEdge", autoWidth: true, name: "Note words" });
+    }
+  }
+}
+function runway(k, area) {
+  const col = k.stack(area, { height: SLIDE.area, justify: "SPACE_BETWEEN", name: "Runway" });
+  const top = k.stack(col, { direction: "HORIZONTAL", gap: 56, align: "MAX", name: "Runway top" });
+  k.text(top, "19", { style: "Runway 260", color: "accent", autoWidth: true, name: "Months figure" });
+  const facts = k.stack(top, { width: "FILL", gap: 14, padding: { top: 0, right: 0, bottom: 34, left: 0 }, name: "Runway facts" });
+  for (const [label, value] of [["CASH", "$1.9M after September"], ["NET BURN", "$98k a month, flat for three months"], ["BREAK-EVEN", "$210k MRR: August 2027 on plan, eight months before the cash ends"]]) {
+    const row = k.stack(facts, { direction: "HORIZONTAL", gap: 28, align: "CENTER", name: "Runway fact" });
+    k.text(row, label, { style: "Memo 26", color: "onPaper", width: 260, name: "Fact label" });
+    k.text(row, value, { style: "Body 36", color: "text", name: "Fact value" });
+  }
+  const strip = k.stack(col, { gap: 16, name: "Runway strip" });
+  const pitch = (SLIDE.width + 10) / RUNWAY.months;
+  const marks = k.stack(strip, { height: 60, name: "Runway marks" });
+  for (const [name, label, month, ink] of [["Break-even mark", "BREAK-EVEN \xB7 AUG 2027", RUNWAY.breakEven, "text"], ["Cash-out mark", "CASH OUT \xB7 APR 2028", RUNWAY.left, "accent"]]) {
+    const x = Math.round(month * pitch - 7);
+    const mark = k.stack(marks, { width: 480, height: 60, align: "MAX", justify: "SPACE_BETWEEN", name, absolute: { x: x - 476, y: 0 } });
+    k.text(mark, label, { style: "Memo 26", color: ink, align: "RIGHT", name: "Mark label" });
+    k.rect(mark, 4, 20, ink, { name: "Mark tick" });
+  }
+  const cells = k.stack(strip, { direction: "HORIZONTAL", gap: 10, name: "Months" });
+  for (let m = 0; m < RUNWAY.months; m++) k.stack(cells, { width: "FILL", height: 150, fill: m < RUNWAY.left ? "accent" : "tint", radius: 8, clip: true, ...m < RUNWAY.left ? {} : { stroke: { color: "edge", width: 2, align: "INSIDE" } }, name: m < RUNWAY.left ? "Month" : "Month after" });
+  const legend = k.stack(strip, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Runway legend" });
+  k.text(legend, "OCT 2026", { style: "Memo 26", color: "onPaper", autoWidth: true, name: "From" });
+  k.text(legend, "SEP 2028", { style: "Memo 26", color: "onPaper", autoWidth: true, name: "To" });
+}
+function winQuote(k, sheet) {
+  const card = k.stack(sheet, { direction: "HORIZONTAL", fill: "tint", radius: 18, stroke: { color: "edge", width: 2, align: "INSIDE" }, padding: { top: 32, right: 40, bottom: 34, left: 0 }, gap: 34, name: "Win quote" });
+  k.rect(card, 8, 120, "accent", { name: "Quote mark" });
+  const words = k.stack(card, { width: "FILL", gap: 10, name: "Quote words" });
+  k.text(words, "\u201CWe took forty more calls a week without hiring another dispatcher.\u201D", { style: "Body 36", color: "onTint", name: "Quote" });
+  k.text(words, "RUI CASTELLANOS \xB7 BRIGHTWATER PLUMBING, 140 VANS", { style: "Memo 26", color: "dim", name: "Quote by" });
+}
+function changes(k, sheet) {
+  const card = k.stack(sheet, { fill: "tint", radius: 18, stroke: { color: "edge", width: 2, align: "INSIDE" }, padding: { top: 28, right: 40, bottom: 32, left: 40 }, gap: 10, name: "What changes" });
+  k.text(card, "WHAT CHANGES", { style: "Memo 26", color: "dim", name: "Changes label" });
+  k.text(card, "The sync goes to five customers behind a flag on 12 October. The outbound budget moves to the two trade shows that produced 19 of our last 40 deals.", { style: "Body 36", color: "onTint", name: "Changes words" });
+}
+function weeks(k, sheet) {
+  const row = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, padding: { top: 30, right: 0, bottom: 0, left: 0 }, name: "Weeks" });
+  for (const [week, date, what, hot] of [["WEEK OF 5 OCT", "8", "Finalist interviews", false], ["WEEK OF 12 OCT", "12", "Sync to five customers", true], ["WEEK OF 19 OCT", "20", "Sync to everyone", true], ["WEEK OF 26 OCT", "28", "First read on per-van pricing", false]]) {
+    const cell = k.stack(row, { width: "FILL", fill: "tint", radius: 18, stroke: { color: "edge", width: 2, align: "INSIDE" }, padding: { top: 26, right: 30, bottom: 30, left: 30 }, gap: 6, name: "Week" });
+    k.text(cell, week, { style: "Memo 26", color: "dim", name: "Week label" });
+    k.text(cell, date, { style: "Date 120", color: hot ? "accent" : "onTint", name: "Week date" });
+    k.text(cell, what, { style: "Note 26", color: "onTint", name: "Week words" });
+  }
+}
+function lastAsks(k, sheet) {
+  const card = k.stack(sheet, { direction: "HORIZONTAL", gap: 40, align: "CENTER", padding: { top: 34, right: 0, bottom: 0, left: 0 }, name: "Last asks" });
+  k.text(card, "6", { style: "Date 120", color: "accent", autoWidth: true, name: "Intros figure" });
+  const words = k.stack(card, { width: "FILL", gap: 6, name: "Intros words" });
+  k.text(words, "WHAT SEPTEMBER\u2019S ASKS BECAME", { style: "Memo 26", color: "onPaper", name: "Intros label" });
+  k.text(words, "Six introductions from you. Two are customers already: Kessler Heating, 22 vans, and Orchard Drainage, 9.", { style: "Body 36", color: "text", name: "Intros line" });
+}
+var click = (layer, preset2, at, params) => ({ layer, preset: preset2, at, onClick: true, ...params ? { params } : {} });
+var SLIDES = [
+  {
+    spec: { kind: "title", name: "Title slide", kicker: "INVESTOR UPDATE \xB7 SEPTEMBER 2026", title: "{{brand.title}}", lead: "{{brand.company}} \xB7 sent 2 October 2026 \xB7 a four-minute read", ground: "paper" },
+    dress: opening,
+    duration: 2400,
+    extra: [{ layer: "MRR line", preset: "wipe-in", at: 500, params: { duration: 1400 } }, { layer: "MRR area", preset: "fade-in", at: 1200, params: { duration: 700 } }, { layer: "MRR dot", preset: "pop-in", at: 1700 }]
+  },
+  {
+    canvas: { name: "Numbers", heading: "September in four numbers" },
+    draw: numbers,
+    dress: page,
+    duration: 3e3,
+    extra: [{ layer: "Tile", preset: "pop-in", at: 700, stagger: { delay: 150 }, onClick: true }],
+    counts: TILES.map((t, i) => ({ layer: `${t.name} figure`, at: 800 + i * 150, duration: 1500, counter: t.counter }))
+  },
+  {
+    spec: { kind: "points", name: "Wins", heading: "Wins", points: ["The crew app shipped on Android: 38% of jobs now start on a phone", "Brightwater Plumbing signed for 140 vans, our largest account", "First reply in support fell from four hours to 35 minutes"] },
+    dress: page,
+    more: winQuote,
+    duration: 3600,
+    extra: [click("Win quote", "rise-in", 2800)]
+  },
+  {
+    spec: { kind: "points", name: "Lowlights", heading: "Lowlights, said plainly", points: ["The QuickBooks sync slipped again, to 20 October. Two deals wait on it", "Outbound email: 900 sent, three demos. We are stopping it", "Our only senior backend engineer leaves on 31 October"] },
+    dress: page,
+    more: changes,
+    duration: 3600,
+    extra: [click("What changes", "rise-in", 2800)]
+  },
+  {
+    canvas: { name: "Runway", heading: "Nineteen months of runway" },
+    draw: runway,
+    dress: page,
+    duration: 3400,
+    extra: [{ layer: "Runway top", preset: "fade-in", at: 300 }, { layer: "Month", preset: "rise-in", at: 800, params: { duration: 400 }, stagger: { delay: 70 }, onClick: true }, { layer: "Month after", preset: "fade-in", at: 2200, stagger: { delay: 60 } }, { layer: ["Break-even mark", "Cash-out mark"], preset: "drop-in", at: 2500, stagger: { delay: 200 } }],
+    counts: [{ layer: "Months figure", at: 800, duration: 1500, counter: { from: 10, to: 19 } }]
+  },
+  {
+    spec: { kind: "steps", name: "October", heading: "October, in order", steps: [{ title: "Ship the sync", body: "QuickBooks, behind a flag on the 12th, to everyone on the 20th" }, { title: "Hire a backend lead", body: "Three finalists; an offer goes out by the 16th" }, { title: "Price by the van", body: "New pricing page live for half of sign-ups" }] },
+    dress: page,
+    more: weeks,
+    duration: 3e3,
+    extra: [{ layer: "Week", preset: "rise-in", at: 1800, stagger: { delay: 140 }, onClick: true }]
+  },
+  {
+    spec: { kind: "panels", name: "Asks", heading: "Three asks", filled: true, panels: [{ title: "A backend lead", body: "Go or Elixir, has run a sync product. Remote, Americas time zones." }, { title: "One introduction", body: "To the partnerships team at any field-service platform you know." }, { title: "Ten minutes", body: "On our new pricing page. Tell us where you would hesitate." }] },
+    dress: page,
+    more: lastAsks,
+    duration: 3600,
+    extra: [click("Last asks", "fade-in", 2900)]
+  },
+  {
+    spec: { kind: "closing", name: "Thanks", title: "Thank you for backing us.", line: "Reply to this deck, or write to {{brand.email}}. Next update: 3 November.", ground: "paper" },
+    dress: opening,
+    duration: 2400,
+    extra: [{ layer: "MRR line", preset: "wipe-in", at: 300, params: { duration: 1400 } }]
+  }
+];
+var saas_mail_investor_update_default = defineTemplate({
+  id: "slides-saas-mail-investor-update",
+  meta: {
+    name: "SaaS founder deck: monthly investor update",
+    description: "An eight-slide 16:9 monthly investor update in a dark monospaced-memo look: four headline numbers that count up, wins, lowlights said plainly, the runway as a strip of months with its figure counting, the month ahead, three asks and a thank-you. Every slide has a transition and click builds",
+    category: "presentation",
+    tags: ["investor update", "deck", "slides", "monthly", "founder", "saas", "startup", "runway", "metrics", "mrr", "builds", "dark", "monospace"],
+    platforms: ["slides"],
+    formats: ["slide-deck"],
+    useCases: ["report", "stats"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { slides: founderCues(SLIDES) },
+  build() {
+    const k = new Kit("SaaS founder deck: monthly investor update", preset("slide-16x9"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#101311", text: "#EEF2EA", onPaper: "#C3CCBF", accent: "#C4F04D", onAccent: "#11150C", tint: "#181D19", onTint: "#EEF2EA" },
+      { company: "Vanboard", title: "The month churn stopped.", email: "nadia@vanboard.co" }
+    );
+    k.palette({ grid: "#1C221D", edge: "#2A322B", onEdge: "#EEF2EA", dim: "#AEB8AA" });
+    deckType(k, {
+      "Slide title 112": { ...MONO, fontWeight: 800, letterSpacing: -5, lineHeight: 118 },
+      "Slide heading 72": { ...MONO, fontWeight: 800, letterSpacing: -3, lineHeight: 81 },
+      "Slide kicker 24": { ...MONO, fontWeight: 700, letterSpacing: 2.4, lineHeight: 30 },
+      "Slide subhead 44": { ...MONO, fontWeight: 700, letterSpacing: -1.6, lineHeight: 52 },
+      "Slide footer 22": { ...MONO, fontWeight: 500, lineHeight: 28 },
+      "Slide lead 44": { fontWeight: 500, lineHeight: 56 }
+    });
+    k.textStyle("Memo 26", { ...MONO, size: 26, fontWeight: 700, letterSpacing: 2, lineHeight: 32 });
+    k.textStyle("Note 26", { size: 26, fontWeight: 700, lineHeight: 32 });
+    k.textStyle("Body 36", { size: 40, fontWeight: 500, lineHeight: 52 });
+    k.textStyle("Tile 130", { ...MONO, size: 170, fontWeight: 800, letterSpacing: -9, lineHeight: 170 });
+    k.textStyle("Date 120", { ...MONO, size: 120, fontWeight: 800, letterSpacing: -6, lineHeight: 120 });
+    k.textStyle("Runway 260", { ...MONO, size: 260, fontWeight: 800, letterSpacing: -14, lineHeight: 230 });
+    founderDeck(k, SLIDES, {});
+    for (const n of Object.values(k.doc.nodes)) if (n.name === "Footer") k.patch(n.id, { fills: k.paint("paper") });
+    for (const n of Object.values(k.doc.nodes)) {
+      if (n.type === "TEXT" && n.name === "Title") k.patch(n.id, { fills: k.paint("text") });
+      if (n.type === "IMAGE" && n.name === "{{brand.logo}}") k.patch(n.id, { imageUrl: LOGO_PLACEHOLDERS.tile });
+    }
+    levelRows(k, ["Week", "Panel 1", "Panel 2", "Panel 3"]);
+    return k.finish();
+  }
+});
+
+export {
+  saas_mail_investor_update_default
+};