@popcraft/kit 0.31.0 → 0.32.1

package/dist/chunks/chunk-V7UATVEF.js

@@ -0,0 +1,327 @@
+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 {
+  faceSlot
+} from "./chunk-UDE42EDS.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  compactNav,
+  footer,
+  linePath,
+  respond,
+  rule,
+  soft,
+  typeScale
+} from "./chunk-I2EYNBXR.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-TF2MO3UA.js";
+import {
+  board,
+  reboard
+} from "./chunk-YHBAWSDX.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/saas-case-study.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var RESULTS = [
+  ["Filled", "96%", "of shifts filled a week ahead", "It was 71% in March, by phone and group text."],
+  ["No-shows", "38%", "fewer no-shows", "Staff confirm in the app; a gap is offered on within the minute."],
+  ["Hours", "11 h", "a week back, for each practice manager", "Fourteen managers: 154 hours a week across the group."]
+];
+var GLANCE = [["Customer", "Northgate Dental Group"], ["Where", "Leeds and West Yorkshire"], ["Size", "14 practices, 212 staff"], ["On Stint since", "April 2026"], ["Replaced", "A spreadsheet per practice, and WhatsApp"], ["Works with", "Sage Payroll, Dentally"]];
+var STORY = [
+  ["The problem", "A rota held together by group text", ["Every practice kept its own spreadsheet. When a nurse called in sick at 7 am, the manager sent a message to forty people and waited. Some mornings a surgery opened an hour late; some it did not open.", "By March, managers were spending two hours a day on the rota, and agency cover was costing the group \xA39,400 a month."]],
+  ["What changed", "One rota, and gaps that fill themselves", ["Northgate moved all fourteen rotas into Stint over a fortnight. A gap is now offered to the people who are qualified, free and under their hours, nearest practice first. The first to accept gets it.", "Nobody phones round. The manager sees the gap open and close."]],
+  ["What happened next", "Agency cover fell by two thirds", ["Six months in, 96% of shifts are filled a week ahead. Agency spend is down to \xA33,100 a month, and the group opened its fourteenth practice without hiring a rota coordinator."]]
+];
+var BEFORE = ["1101121", "1011101", "1210110", "0111211"];
+var AFTER = ["1111111", "1111111", "1111101", "1111111"];
+var SETUP = [
+  ["Week 1", "The rotas come in", "Fourteen spreadsheets imported as they were. Roles, registrations and contracted hours matched to people."],
+  ["Week 2", "Staff get the app", "212 people invited by text. 198 had set their availability by Friday."],
+  ["Week 4", "Gaps fill themselves", "Rules switched on, practice by practice: who is offered a shift first, and when agency is the last resort."]
+];
+var NEXT = [["Calder Vets", "22 surgeries", "Out-of-hours cover planned a month ahead, not a day"], ["Wren Physio", "9 clinics", "Cancelled sessions refilled in 14 minutes, on average"]];
+var NO_SHOWS = [0.92, 0.88, 0.9, 0.78, 0.7, 0.62, 0.6, 0.5, 0.46, 0.4];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Story tag", preset: "fade-in", at: 100, params: { duration: 500 } },
+  { layer: "Headline", preset: "rise-in", at: 200, params: { duration: 800 } },
+  { layer: "Lead", preset: "rise-in", at: 400 },
+  { layer: "Byline", preset: "fade-in", at: 700, params: { duration: 500 } },
+  { layer: "Hero photo", preset: "scale-in", at: 200, params: { duration: 900, amount: 0.94 } },
+  { layer: "Filled card", preset: "rise-in", at: 900, params: { duration: 600 } },
+  { layer: "Trend card", preset: "rise-in", at: 1200, params: { duration: 600 } },
+  { layer: "Trend line", preset: "wipe-in", at: 1700, params: { duration: 1500 } },
+  { layer: "Trend dot", preset: "pop-in", at: 3200, params: { duration: 350 } },
+  { layer: "Result", preset: "rise-in", at: 1400, params: { duration: 600 }, stagger: { delay: 180 } },
+  { layer: "Pull quote", preset: "rise-in", at: 1800, params: { duration: 700 } },
+  { layer: "Cell after", preset: "fade-in", at: 2400, params: { duration: 250 }, stagger: { delay: 40 } },
+  { layer: "Filled card", preset: "pulse", at: 4600, params: { duration: 600, amount: 0.04 } }
+];
+var counts = [
+  { layer: "Filled figure", at: 1e3, duration: 2200, counter: { from: 71, to: 96, suffix: "%" } },
+  { layer: "Filled result", at: 1500, duration: 2e3, counter: { from: 71, to: 96, suffix: "%" } },
+  { layer: "No-shows result", at: 1700, duration: 2e3, counter: { from: 0, to: 38, suffix: "%" } },
+  { layer: "Hours result", at: 1900, duration: 2e3, counter: { from: 0, to: 11, suffix: " h" } }
+];
+var saas_case_study_default = defineTemplate({
+  id: "web-saas-case-study",
+  meta: {
+    name: "SaaS customer case study page",
+    description: "A customer story set like a magazine feature: a serif headline beside the customer\u2019s photograph with two result cards pinned over it (one counting up, one drawing its line), three results counted at poster size, the story in three parts beside an \u201Cat a glance\u201D card with a before-and-after grid, a pull quote with a portrait slot, the setup week by week, and the next stories. Desktop to phone",
+    category: "web",
+    tags: ["saas", "case study", "customer story", "testimonial", "results", "editorial", "serif", "pull quote", "b2b", "landing page", "website", "animation", "responsive"],
+    platforms: ["web"],
+    formats: ["page", "demo"],
+    useCases: ["case-study", "testimonial", "stats"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("SaaS customer case study page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F6F1E6", text: "#1A1D1A", onPaper: "#535850", primary: "#0E5A53", onPrimary: "#F6F1E6", card: "#FFFEFA", onCard: "#1A1D1A", cardMuted: "#5A5F57" },
+      { name: "Stint" }
+    );
+    k.palette({ hairline: "#DCD4C2", coral: "#E4603B", coralInk: "#B8421F", filled: "#0E5A53", agency: "#E9B949", gap: "#F0D9CF", photo: "#D9D0BC", photoInk: "#B9AE96", quoteLine: "#3C8079", mint: "#E1ECE7" });
+    const s = typeScale(k, {
+      "Nav 15": { size: 15, fontWeight: 600, lineHeight: 24 },
+      "Brand 22": { ...SERIF, size: 22, fontWeight: 700, letterSpacing: -0.4, lineHeight: 28 },
+      "Button 15": { size: 15, fontWeight: 700, lineHeight: 22 },
+      "Tag 12": { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.4, lineHeight: 16, textCase: "UPPER" },
+      "Display 62": { ...SERIF, size: 62, fontWeight: 600, letterSpacing: -2, lineHeight: 66 },
+      "Display 54": { ...SERIF, size: 54, fontWeight: 600, letterSpacing: -1.7, lineHeight: 58 },
+      "Display 44": { ...SERIF, size: 44, fontWeight: 600, letterSpacing: -1.3, lineHeight: 48 },
+      "Display 34": { ...SERIF, size: 34, fontWeight: 600, letterSpacing: -0.9, lineHeight: 38 },
+      "Lead 20": { size: 20, fontWeight: 400, lineHeight: 31 },
+      "Lead 17": { size: 17, fontWeight: 400, lineHeight: 27 },
+      "Fact 14": { size: 14, fontWeight: 600, lineHeight: 20 },
+      "Small 14": { size: 14, fontWeight: 400, lineHeight: 21 },
+      "Card figure 54": { ...SERIF, size: 54, fontWeight: 700, letterSpacing: -2, lineHeight: 56, fontFeatures: { tnum: 1 } },
+      "Result 120": { ...SERIF, size: 120, fontWeight: 600, letterSpacing: -5, lineHeight: 112, fontFeatures: { tnum: 1 } },
+      "Result 96": { ...SERIF, size: 96, fontWeight: 600, letterSpacing: -4, lineHeight: 92, fontFeatures: { tnum: 1 } },
+      "Result 72": { ...SERIF, size: 72, fontWeight: 600, letterSpacing: -3, lineHeight: 72, fontFeatures: { tnum: 1 } },
+      "Result label 19": { size: 19, fontWeight: 700, letterSpacing: -0.3, lineHeight: 26 },
+      "Section 34": { ...SERIF, size: 34, fontWeight: 600, letterSpacing: -0.9, lineHeight: 39 },
+      "Section 26": { ...SERIF, size: 26, fontWeight: 600, letterSpacing: -0.6, lineHeight: 31 },
+      "Body 18": { size: 18, fontWeight: 400, lineHeight: 30 },
+      "Body 16": { size: 16, fontWeight: 400, lineHeight: 26 },
+      "Quote 46": { ...SERIF, size: 46, fontWeight: 500, letterSpacing: -1.2, lineHeight: 56 },
+      "Quote 36": { ...SERIF, size: 36, fontWeight: 500, letterSpacing: -0.9, lineHeight: 45 },
+      "Quote 26": { ...SERIF, size: 26, fontWeight: 500, letterSpacing: -0.5, lineHeight: 34 },
+      "Name 18": { size: 18, fontWeight: 700, lineHeight: 24 },
+      "Step 24": { ...SERIF, size: 24, fontWeight: 600, letterSpacing: -0.5, lineHeight: 30 },
+      "Day 12": { ...MONO, size: 12, fontWeight: 600, lineHeight: 16, textAlign: "CENTER" },
+      "Foot head 14": { size: 14, fontWeight: 800, lineHeight: 22 }
+    });
+    buttons(k, { style: s("Button 15"), pad: [13, 22], radius: 999 });
+    k.component("Button light", { direction: "HORIZONTAL", width: "HUG", radius: 999, align: "CENTER", fill: "card", padding: { top: 13, right: 22, bottom: 13, left: 22 }, props: { Label: "Book a demo" } }, (id) => {
+      k.propText(id, "Label", { style: s("Button 15"), color: "onCard", autoWidth: true });
+    });
+    const tag = (parent, label, ink, name = "Tag") => k.text(parent, label, { style: s("Tag 12"), color: ink, name });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 96, top: 28 });
+    k.timeline(sheet, { duration: 6e3, fps: 30 });
+    nav(k, sheet, { links: ["Customers", "Product", "Pricing", "Guides"], cta: "Book a demo", style: s("Nav 15"), brandStyle: s("Brand 22") });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 24, name: "Hero copy" });
+    const tagRow = k.stack(copy, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", name: "Story tag" });
+    k.rect(tagRow, 28, 3, "coral", { name: "Tag rule" });
+    k.text(tagRow, "Customer story \xB7 Healthcare", { style: s("Tag 12"), color: "text", autoWidth: true, name: "Tag words" });
+    k.text(copy, "How Northgate Dental filled 96% of its shifts, and stopped texting round at 7 am.", { style: s("Display 62"), color: "text", name: "Headline" });
+    k.text(copy, "Fourteen practices, 212 people and a rota that used to live in fourteen spreadsheets. Six months after moving to Stint, gaps close before the manager has seen them.", { style: s("Lead 20"), color: "onPaper", name: "Lead" });
+    const byline = k.stack(copy, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Byline" });
+    const logoSlot = k.stack(byline, { width: 56, height: 56, radius: 14, fill: "card", align: "CENTER", justify: "CENTER", stroke: { color: "hairline", width: 1, align: "INSIDE" }, name: "Customer logo" });
+    k.photo(logoSlot, 36, 36, { radius: 8, ground: "photo", name: "Customer logo slot" });
+    const byWords = k.stack(byline, { gap: 0, name: "Byline words" });
+    k.text(byWords, "Northgate Dental Group", { style: s("Name 18"), color: "text", name: "Customer" });
+    k.text(byWords, "A nine-minute read \xB7 October 2026", { style: s("Small 14"), color: "onPaper", name: "Read time" });
+    const PW = 500, PH = 560;
+    const stage = board(k, hero, PW, PH, 1, "Hero stage");
+    const photo = k.photo(stage, PW - 40, PH, { radius: 28, ground: "photo", name: "Hero photo", absolute: { x: 40, y: 0 } });
+    faceSlot(k, photo, PW - 40, PH, "photoInk");
+    const filled = k.stack(stage, { width: 236, gap: 2, fill: "card", radius: 20, padding: { top: 18, right: 22, bottom: 20, left: 22 }, effects: [soft(0.16, 18, 40)], name: "Filled card", absolute: { x: 0, y: 64 } });
+    tag(filled, "Shifts filled", "cardMuted");
+    k.text(filled, "96%", { style: s("Card figure 54"), color: "onCard", name: "Filled figure" });
+    k.text(filled, "a week ahead. It was 71%.", { style: s("Small 14"), color: "cardMuted", name: "Filled note" });
+    const trend = k.stack(stage, { width: 280, gap: 10, fill: "card", radius: 20, padding: { top: 18, right: 20, bottom: 18, left: 20 }, effects: [soft(0.16, 18, 40)], name: "Trend card", absolute: { x: PW - 280, y: PH - 218 } });
+    const trendHead = k.stack(trend, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Trend head" });
+    k.text(trendHead, "No-shows", { style: s("Tag 12"), color: "cardMuted", autoWidth: true, name: "Tag" });
+    k.text(trendHead, "\u221238%", { style: s("Fact 14"), color: "coralInk", autoWidth: true, name: "Trend figure" });
+    const plot = k.stack(trend, { width: 240, height: 92, name: "Trend plot" });
+    k.vector(plot, 240, 92, [linePath(NO_SHOWS, 240, 92, true)], k.tint("coral", 0.14), { name: "Trend area", absolute: { x: 0, y: 0 } });
+    k.vector(plot, 240, 92, [linePath(NO_SHOWS, 240, 92)], "coral", { name: "Trend line", strokeWidth: 4, absolute: { x: 0, y: 0 } });
+    k.ellipse(plot, 16, "coral", { name: "Trend dot", stroke: { color: "card", width: 3, align: "OUTSIDE" }, absolute: { x: 232, y: 92 - 0.4 * 92 - 8 } });
+    const trendAxis = k.stack(trend, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Trend axis" });
+    for (const m of ["Apr", "Jun", "Aug", "Oct"]) k.text(trendAxis, m, { style: s("Day 12"), color: "cardMuted", autoWidth: true, name: "Trend month" });
+    const results = k.stack(sheet, { gap: 0, name: "Results" });
+    rule(k, results, "text", { weight: 2 });
+    const resRow = k.stack(results, { direction: "HORIZONTAL", gap: 40, padding: { top: 28, right: 0, bottom: 0, left: 0 }, name: "Results row" });
+    for (const [name, figure, label, note] of RESULTS) {
+      const r = k.stack(resRow, { gap: 8, name: "Result" });
+      k.text(r, figure, { style: s("Result 120"), color: name === "No-shows" ? "coralInk" : "text", name: `${name} result` });
+      k.text(r, label, { style: s("Result label 19"), color: "text", name: "Result label" });
+      k.text(r, note, { style: s("Body 16"), color: "onPaper", name: "Result note" });
+    }
+    const quote = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", fill: "primary", radius: 32, padding: 64, name: "Pull quote" });
+    const portrait = k.stack(quote, { width: 300, height: 360, radius: 24, fill: "photo", clip: true, name: "Portrait frame" });
+    faceSlot(k, portrait, 300, 360, "photoInk");
+    const said = k.stack(quote, { gap: 28, name: "Quote words" });
+    k.rect(said, 56, 4, "coral", { name: "Quote rule" });
+    k.text(said, "\u201CI used to start every day by finding out who was not coming in. Now I find out who already covered it.\u201D", { style: s("Quote 46"), color: "onPrimary", name: "Quote" });
+    const who = k.stack(said, { gap: 2, name: "Quote by" });
+    k.text(who, "Priya Nair", { style: s("Name 18"), color: "onPrimary", name: "Quote name" });
+    k.text(who, "Operations Director, Northgate Dental Group", { style: s("Body 16"), color: "onPrimary", name: "Quote role" });
+    const story = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, name: "Story" });
+    const glance = k.stack(story, { width: 340, gap: 0, fill: "card", radius: 24, padding: { top: 26, right: 28, bottom: 14, left: 28 }, stroke: { color: "hairline", width: 1, align: "INSIDE" }, name: "At a glance" });
+    tag(glance, "At a glance", "cardMuted");
+    k.stack(glance, { height: 12, name: "Glance space" });
+    for (const [what, value] of GLANCE) {
+      rule(k, glance, "hairline");
+      const row = k.stack(glance, { gap: 2, padding: { top: 12, right: 0, bottom: 12, left: 0 }, name: "Glance row" });
+      k.text(row, what, { style: s("Small 14"), color: "cardMuted", name: "Glance what" });
+      k.text(row, value, { style: s("Fact 14"), color: "onCard", name: "Glance value" });
+    }
+    const parts = k.stack(story, { gap: 44, name: "Story parts" });
+    STORY.forEach(([label, title, paras], i) => {
+      const part = k.stack(parts, { gap: 14, name: "Story part" });
+      tag(part, `0${i + 1} \xB7 ${label}`, "onPaper");
+      k.text(part, title, { style: s("Section 34"), color: "text", name: "Part title" });
+      for (const p of paras) k.text(part, p, { style: s("Body 18"), color: "text", name: "Part text" });
+      if (i === 1) {
+        const weeks = k.stack(part, { direction: "HORIZONTAL", gap: 28, fill: "card", radius: 20, padding: 24, stroke: { color: "hairline", width: 1, align: "INSIDE" }, name: "Weeks" });
+        for (const [title2, grid, after] of [["A week in March", BEFORE, false], ["The same week in September", AFTER, true]]) {
+          const w = k.stack(weeks, { gap: 10, name: "Week" });
+          k.text(w, title2, { style: s("Fact 14"), color: "onCard", name: "Week title" });
+          const days = k.stack(w, { direction: "HORIZONTAL", gap: 5, name: "Week days" });
+          for (const d of "MTWTFSS") k.text(days, d, { style: s("Day 12"), color: "cardMuted", name: "Week day" });
+          for (const rowBits of grid) {
+            const row = k.stack(w, { direction: "HORIZONTAL", gap: 5, name: "Week row" });
+            for (const c of rowBits) k.rect(row, "FILL", 30, c === "1" ? "filled" : c === "2" ? "agency" : "gap", { radius: 6, name: after ? "Cell after" : "Cell before" });
+          }
+          k.text(w, after ? "One gap, filled by 8:02 am" : "Seven gaps, five agency shifts", { style: s("Small 14"), color: "cardMuted", name: "Week note" });
+        }
+      }
+    });
+    const setup = k.stack(sheet, { gap: 32, name: "Setup" });
+    const setupHead = k.stack(setup, { direction: "HORIZONTAL", gap: 56, align: "MAX", name: "Setup head" });
+    k.text(setupHead, "The setup took four weeks, and no consultants.", { style: s("Display 44"), color: "text", name: "Setup title" });
+    k.text(setupHead, "Northgate ran the move itself, with one Stint onboarding lead on a weekly call.", { style: s("Body 18"), color: "onPaper", width: 400, name: "Setup lead" });
+    const steps = k.stack(setup, { direction: "HORIZONTAL", gap: 24, name: "Setup steps" });
+    for (const [week, title, text] of SETUP) {
+      const st = k.stack(steps, { gap: 10, name: "Setup step" });
+      rule(k, st, "text", { weight: 2 });
+      tag(st, week, "text");
+      k.text(st, title, { style: s("Step 24"), color: "text", name: "Step title" });
+      k.text(st, text, { style: s("Body 16"), color: "onPaper", name: "Step text" });
+    }
+    const stack = k.stack(setup, { direction: "HORIZONTAL", gap: 10, align: "CENTER", wrap: true, name: "Using" });
+    k.text(stack, "What they use:", { style: s("Fact 14"), color: "text", autoWidth: true, name: "Using label" });
+    for (const item of ["Stint Rota", "Stint Fill", "Staff app", "Payroll export to Sage", "Text reminders"]) {
+      const chip = k.stack(stack, { direction: "HORIZONTAL", width: "HUG", fill: "mint", radius: 999, padding: { top: 6, right: 14, bottom: 6, left: 14 }, name: "Using chip" });
+      k.text(chip, item, { style: s("Fact 14"), color: "onCard", autoWidth: true, name: "Using item" });
+    }
+    const end = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, name: "Next" });
+    const cta = k.stack(end, { gap: 16, fill: "card", radius: 28, padding: 40, stroke: { color: "text", width: 2, align: "INSIDE" }, name: "Call to action" });
+    k.text(cta, "See your own rota in Stint.", { style: s("Display 44"), color: "onCard", name: "CTA title" });
+    k.text(cta, "Send us one practice\u2019s spreadsheet. We will show you the same week, filled, on a 30-minute call.", { style: s("Body 18"), color: "cardMuted", name: "CTA text" });
+    k.instance(cta, "Button", { Label: "Book a demo" }, { name: "CTA button" });
+    const more = k.stack(end, { width: 460, gap: 16, name: "Read next" });
+    for (const [name, size, line] of NEXT) {
+      const card = k.stack(more, { gap: 6, fill: "mint", radius: 24, padding: 28, name: "Next story" });
+      tag(card, `${name} \xB7 ${size}`, "cardMuted");
+      k.text(card, line, { style: s("Section 26"), color: "onCard", name: "Next line" });
+      k.text(card, "Read the story", { style: s("Fact 14"), color: "onCard", name: "Next link" });
+    }
+    footer(k, sheet, {
+      about: "Shift scheduling for clinics and practices. Gaps offered, accepted and filled without a phone call.",
+      columns: [["Customers", ["All stories", "Dental", "Veterinary", "Physiotherapy"]], ["Product", ["Rota", "Fill", "Staff app", "Pricing"]], ["Company", ["About", "Security", "Contact"]]],
+      legal: "\xA9 2026 Stint Scheduling Ltd, Manchester. Figures supplied by Northgate Dental Group, April to September 2026.",
+      brandStyle: s("Brand 22"),
+      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", "Story", "Pull quote", "Setup head", "Setup steps", "Next", "Footer columns"],
+      stackMobile: ["Results row", "Weeks"],
+      restyle: {
+        "Display 62": { laptop: "Display 54", tablet: "Display 44", mobile: "Display 34" },
+        "Display 44": { tablet: "Display 34", mobile: "Display 34" },
+        "Result 120": { tablet: "Result 96", mobile: "Result 72" },
+        "Quote 46": { tablet: "Quote 36", mobile: "Quote 26" },
+        "Lead 20": { mobile: "Lead 17" },
+        "Section 34": { mobile: "Section 26" },
+        "Body 18": { mobile: "Body 16" }
+      },
+      gap: { tablet: 72, mobile: 56 },
+      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: 48 });
+          each("Story", { itemSpacing: 56 });
+          each("Pull quote", { padding: pad(52) });
+        }
+        if (size === "tablet") {
+          compactNav(kit, id, ["Guides"], 22);
+          each("Results row", { itemSpacing: 24 });
+        }
+        if (size === "tablet" || size === "mobile") {
+          each("Hero", { itemSpacing: 40, counterAxisAlignItems: "MIN" });
+          each("Story", { itemSpacing: 40 });
+          each("Pull quote", { itemSpacing: 32, padding: pad(40), counterAxisAlignItems: "MIN" });
+          each("Setup head", { itemSpacing: 12, counterAxisAlignItems: "MIN" });
+          each("Next", { itemSpacing: 16 });
+          each("Setup steps", { itemSpacing: 26 });
+          each("Portrait frame", { layoutSizingHorizontal: "FIXED" });
+        }
+        if (size === "mobile") {
+          reboard(kit, id, "Hero stage", 0.67);
+          each("Results row", { itemSpacing: 28 });
+          each("Pull quote", { padding: pad(28, 24), itemSpacing: 24 });
+          each("Call to action", { padding: pad(28, 24) });
+          each("Next story", { padding: pad(22) });
+          each("Weeks", { itemSpacing: 22, padding: pad(18) });
+          each("At a glance", { padding: { top: 22, right: 22, bottom: 10, left: 22 } });
+          each("Setup steps", { itemSpacing: 26 });
+          each("Story parts", { itemSpacing: 36 });
+          each("Footer lists", { itemSpacing: 16 });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  saas_case_study_default
+};

package/dist/chunks/chunk-V7YMPP4A.js

@@ -0,0 +1,230 @@
+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 {
+  COMIC,
+  balloon,
+  benday,
+  caps,
+  captionBox,
+  comicBrand,
+  hero,
+  impact,
+  inkShadow,
+  panel,
+  rays,
+  restage,
+  stage,
+  streaks,
+  villain,
+  windowCard
+} from "./chunk-USSKVG6Z.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-TF2MO3UA.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/comic-book-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var VISUAL = { w: 580, h: 560 };
+var ROGUES = [
+  ["The Null Pointer", "Takes checkout down the moment a field comes back empty.", "Caught by the error-rate watch, 4 seconds after the deploy."],
+  ["The Slow Query", "Adds one join and three seconds to every page.", "Caught when p95 latency leaves the band it has kept all month."],
+  ["The Missing Env Var", "Works on your machine. Returns 500 everywhere else.", "Caught by the first health check, before traffic moves over."],
+  ["The Friday Migration", "Drops a column the old code still reads.", "Caught and held: Backstop will not roll a schema back without asking."]
+];
+var HOW = [
+  ["1", "It watches every deploy.", "Connect your host and your error tracker. Backstop learns what a normal hour looks like for each service."],
+  ["2", "It knows what broken looks like.", "Error rate, latency and failed payments are compared with the hour before. A spike after a deploy is a suspect."],
+  ["3", "It undoes it before you wake up.", "The last good version is back in 9 seconds. You get one message in the morning, with the diff that did it."]
+];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Eyebrow", preset: "pop-in", at: 100, params: { duration: 280 } },
+  { layer: "Headline", preset: "pop-in", at: 250, params: { duration: 300, amount: 1.15 } },
+  { layer: "Lead", preset: "rise-in", at: 600, params: { duration: 500 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 850, params: { duration: 450 }, stagger: { delay: 120 } },
+  { layer: "Proof", preset: "fade-in", at: 1300, params: { duration: 500 } },
+  { layer: "Panel one", preset: "pop-in", at: 500, params: { duration: 300, amount: 1.25 } },
+  { layer: "Bug says", preset: "pop-in", at: 900, params: { duration: 260 } },
+  { layer: "Panel two", preset: "pop-in", at: 1300, params: { duration: 300, amount: 1.25 } },
+  { layer: "Panel three", preset: "pop-in", at: 2100, params: { duration: 300, amount: 1.25 } },
+  { layer: "Hero", preset: "slide-in", at: 2350, params: { duration: 420, direction: "left" } },
+  { layer: "Rolled back", preset: "pop-in", at: 2700, params: { duration: 260, amount: 1.7 } },
+  { layer: "Stage", preset: "camera-shake", at: 2700, params: { duration: 450, distance: 14 } },
+  { layer: "Hero says", preset: "pop-in", at: 3200, params: { duration: 260 } },
+  { layer: "Rolled back", preset: "pulse", at: 4200, params: { duration: 600, amount: 0.06 } }
+];
+var comic_book_landing_default = defineTemplate({
+  id: "web-comic-book-landing",
+  meta: {
+    name: "Comic landing page",
+    description: "A landing page laid out as an issue of a comic: the promise in inked capitals beside a page of three panels that slam in (the bug, the alert, and the hit, with the hero breaking out of its panel and an impact burst), how it works as a three-panel strip, a rogues\u2019 gallery of the failures it catches, and the price in a caption box. At desktop, laptop, tablet and phone widths",
+    category: "web",
+    tags: ["comic book", "panels", "speech balloon", "halftone", "ben-day dots", "impact", "landing page", "hero", "website", "saas", "devtools", "animation", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["launch", "brand-intro", "comic"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("Comic landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    comicBrand(k);
+    k.textStyle("Nav 16", { size: 15, fontWeight: 800, lineHeight: 24, letterSpacing: 0.4 });
+    k.textStyle("Brand 22", { size: 24, fontWeight: 900, letterSpacing: -1, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Button 16", { size: 16, fontWeight: 900, lineHeight: 24, letterSpacing: 0.3 });
+    k.textStyle("Box 15", { size: 15, fontWeight: 800, letterSpacing: 0.4, lineHeight: 20 });
+    k.textStyle("Display 84", { size: 84, fontWeight: 900, letterSpacing: -3.8, lineHeight: 80 });
+    k.textStyle("Display 70", { size: 70, fontWeight: 900, letterSpacing: -3.2, lineHeight: 68 });
+    k.textStyle("Display 60", { size: 60, fontWeight: 900, letterSpacing: -2.6, lineHeight: 58 });
+    k.textStyle("Display 42", { size: 42, fontWeight: 900, letterSpacing: -1.8, lineHeight: 42 });
+    k.textStyle("Lead 20", { size: 20, fontWeight: 500, lineHeight: 32 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 500, lineHeight: 27 });
+    k.textStyle("Proof 15", { ...MONO, size: 15, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Section 52", { size: 52, fontWeight: 900, letterSpacing: -2.2, lineHeight: 52 });
+    k.textStyle("Section 34", { size: 34, fontWeight: 900, letterSpacing: -1.2, lineHeight: 36 });
+    k.textStyle("Entry 26", { size: 26, fontWeight: 900, letterSpacing: -0.8, lineHeight: 30 });
+    k.textStyle("Body 17", { size: 17, fontWeight: 500, lineHeight: 27 });
+    k.textStyle("Number 20", { size: 20, fontWeight: 900, lineHeight: 24 });
+    k.textStyle("Price 40", { size: 40, fontWeight: 900, letterSpacing: -1.6, lineHeight: 42 });
+    k.textStyle("Price 28", { size: 28, fontWeight: 900, letterSpacing: -1, lineHeight: 31 });
+    k.textStyle("Small 14", { ...MONO, size: 14, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Balloon 22", { size: 22, fontWeight: 800, letterSpacing: -0.3, lineHeight: 25, textAlign: "CENTER" });
+    k.textStyle("Window 15", { ...MONO, size: 15, fontWeight: 700, lineHeight: 21 });
+    k.textStyle("Error 64", { size: 64, fontWeight: 900, letterSpacing: -3, lineHeight: 60 });
+    k.textStyle("Sound 34", { size: 34, fontWeight: 900, letterSpacing: -1.2, lineHeight: 34, textAlign: "CENTER" });
+    k.textStyle("Sound 60", { size: 60, fontWeight: 900, letterSpacing: -2.4, lineHeight: 54, textAlign: "CENTER" });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 0 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 80, top: 32 });
+    k.timeline(sheet, { duration: 5e3, fps: 30 });
+    benday(k, sheet, 620, 620, { role: "accent", dot: 22, angle: 225, from: 0.05, to: 0.8, disc: true, name: "Hero dots", x: 1440 - 600, y: 96 });
+    nav(k, sheet, { links: ["HOW IT WORKS", "ROGUES\u2019 GALLERY", "PRICING", "CHANGELOG"], cta: "START FREE", style: "Nav 16", brandStyle: "Brand 22" });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", name: "Hero row" });
+    const copy = k.stack(top, { gap: 26, name: "Copy" });
+    captionBox(k, copy, `Issue no. ${COMIC.issue} \xB7 auto-rollback is here`, { style: "Box 15", name: "Eyebrow" });
+    k.text(copy, "THE BAD DEPLOY NEVER MAKES IT TO MORNING.", { style: "Display 84", color: "text", name: "Headline", effects: inkShadow(k, 5, "primary") });
+    k.text(copy, "{{brand.name}} watches every deploy. When errors spike it puts the last good version back in 9 seconds, then tells you which commit did it. No pager. No 3 a.m. No apology email.", { style: "Lead 20", color: "text", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "GUARD ONE SERVICE FREE" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "READ ISSUE NO. 12" }, { name: "CTA quiet" });
+    k.text(copy, "1,912 bad deploys undone this month \xB7 median 9.2 s", { style: "Proof 15", color: "onPaper", name: "Proof" });
+    const { art } = stage(k, top, VISUAL.w, VISUAL.h);
+    panel(k, art, { x: 0, y: 0, w: 300, h: 250 }, "night", (p) => {
+      benday(k, p, 300, 250, { role: "nightDeep", dot: 12, angle: 90, from: 0.1, to: 0.85 });
+      villain(k, p, 250, { name: "Bug", absolute: { x: 70, y: 56 }, deg: 6 });
+      captionBox(k, p, "3:07 a.m.", { style: "Box 15", name: "Clock", absolute: { x: 14, y: 14 }, shadow: 4 });
+      balloon(k, p, "Checkout is mine!", { style: "Balloon 22", width: 170, tail: "left", name: "Bug says", absolute: { x: 118, y: 12 }, line: 4, pad: [10, 14] });
+    }, { name: "Panel one", shadow: 7, line: 6 });
+    panel(k, art, { x: 320, y: 0, w: 260, h: 250 }, "sky", (p) => {
+      rays(k, p, 260, 250, { cx: 130, cy: 150, role: "skyDeep", n: 26, inner: 90, seed: 8 });
+      windowCard(k, p, 206, "checkout", (body) => {
+        k.text(body, "500", { style: "Error 64", color: "primary", name: "Error code" });
+        k.text(body, "errors up 40\xD7", { style: "Window 15", color: "onCard", name: "Error line" });
+      }, { style: "Window 15", name: "Checkout window", absolute: { x: 30, y: 62 }, deg: -4, gap: 2, pad: 12 });
+      captionBox(k, p, "Spotted in 4 s", { style: "Box 15", name: "Spotted", absolute: { x: 14, y: 14 }, shadow: 4 });
+    }, { name: "Panel two", shadow: 7, line: 6 });
+    panel(k, art, { x: 0, y: 270, w: 580, h: 290 }, "accent", (p) => {
+      rays(k, p, 580, 290, { cx: 340, cy: 150, role: "primary", n: 40, inner: 150, seed: 12, thick: 0.9 });
+      benday(k, p, 240, 290, { role: "primary", dot: 13, angle: 180, from: 0, to: 0.7 });
+      streaks(k, p, 150, 90, { role: "ink", n: 5, seed: 9, dir: -1, x: 420, y: 30 });
+      impact(k, p, 360, 210, "Rolled back!", { style: "Sound 60", fill: "primary", ink: "onPrimary", deg: -4, name: "Rolled back", seed: 21, points: 16, depth: 0.25, shadow: 8, line: 5, absolute: { x: 205, y: 70 } });
+    }, { name: "Panel three", shadow: 7, line: 6 });
+    hero(k, art, 330, { name: "Hero", absolute: { x: -10, y: 214 }, deg: 8 });
+    balloon(k, art, "Not on my watch.", { style: "Balloon 22", width: 170, tail: "left", name: "Hero says", absolute: { x: 250, y: 222 }, line: 4, pad: [10, 14] });
+    const how = k.stack(sheet, { gap: 32, name: "How" });
+    k.text(how, "HOW IT WORKS, IN THREE PANELS", { style: "Section 52", color: "text", name: "How title" });
+    const strip = k.stack(how, { direction: "HORIZONTAL", gap: 24, name: "Strip" });
+    HOW.forEach(([n, title, text], i) => {
+      const col = k.stack(strip, { gap: 14, name: "Strip panel" });
+      const pic = k.stack(col, { height: 220, fill: ["sky", "night", "accent"][i], clip: true, stroke: { color: "text", width: 6, align: "INSIDE", join: "MITER" }, effects: inkShadow(k, 7, "text"), name: "Strip picture" });
+      if (i === 0) {
+        streaks(k, pic, 700, 200, { role: "skyDeep", n: 12, seed: 3, x: 0, y: 10 });
+        windowCard(k, pic, 270, "deploys", (body) => {
+          for (const line of ["v4.10  ok", "v4.11  ok", "v4.12  watching\u2026"]) k.text(body, line, { style: "Window 15", color: "onCard", name: "Deploy line" });
+        }, { style: "Window 15", name: "Deploys window", absolute: { x: 28, y: 38 }, deg: -3, gap: 2, pad: 12 });
+      } else if (i === 1) {
+        benday(k, pic, 700, 220, { role: "nightDeep", dot: 12, angle: 0, from: 0.1, to: 0.85 });
+        villain(k, pic, 230, { name: "Strip bug", absolute: { x: 130, y: 16 }, deg: -6 });
+        impact(k, pic, 130, 100, "500!", { style: "Sound 34", fill: "primary", ink: "onPrimary", deg: -8, name: "Strip error", seed: 5, shadow: 5, line: 4, absolute: { x: 16, y: 40 } });
+      } else {
+        rays(k, pic, 700, 220, { cx: 180, cy: 110, role: "primary", n: 36, inner: 110, seed: 12, thick: 0.9 });
+        impact(k, pic, 300, 180, "Rolled back!", { style: "Sound 34", fill: "primary", ink: "onPrimary", deg: -4, name: "Strip hit", seed: 21, points: 16, depth: 0.25, shadow: 7, line: 5, absolute: { x: 24, y: 28 } });
+      }
+      const words = k.stack(col, { direction: "HORIZONTAL", gap: 14, name: "Strip words" });
+      const num = k.stack(words, { width: 40, height: 40, align: "CENTER", justify: "CENTER", fill: "accent", stroke: { color: "text", width: 4, align: "INSIDE", join: "MITER" }, name: "Strip number" });
+      k.text(num, n, { style: "Number 20", color: "onAccent", autoWidth: true, name: "Number" });
+      const say = k.stack(words, { gap: 6, name: "Strip copy" });
+      k.text(say, caps(title), { style: "Entry 26", color: "text", name: "Strip title" });
+      k.text(say, text, { style: "Body 17", color: "text", name: "Strip text" });
+    });
+    const rogues = k.stack(sheet, { gap: 0, name: "Rogues" });
+    k.text(rogues, "THE ROGUES\u2019 GALLERY", { style: "Section 52", color: "text", name: "Rogues title" });
+    k.stack(rogues, { height: 24, name: "Gap" });
+    for (const [name, crime, caught] of ROGUES) {
+      k.rect(rogues, "FILL", 5, "text", { name: "Rule" });
+      const row = k.stack(rogues, { direction: "HORIZONTAL", gap: 32, padding: { top: 22, right: 0, bottom: 22, left: 0 }, name: "Rogue" });
+      k.text(row, caps(name), { style: "Entry 26", color: "text", width: 340, name: "Rogue name" });
+      k.text(row, crime, { style: "Body 17", color: "text", name: "Rogue crime" });
+      k.text(row, caught, { style: "Body 17", color: "text", name: "Rogue caught" });
+    }
+    k.rect(rogues, "FILL", 5, "text", { name: "Rule" });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 40, align: "CENTER", justify: "SPACE_BETWEEN", fill: "accent", stroke: { color: "text", width: 6, align: "INSIDE", join: "MITER" }, effects: inkShadow(k, 10, "text"), padding: 44, name: "Band" });
+    const pitch = k.stack(band, { gap: 10, name: "Band copy" });
+    k.text(pitch, "FREE FOR ONE SERVICE. $29 A MONTH FOR THE WHOLE TEAM.", { style: "Price 40", color: "onAccent", name: "Band title" });
+    k.text(pitch, "Unlimited deploys, every environment, 90 days of history. Works with Vercel, Fly, Render and anything that takes a webhook.", { style: "Body 17", color: "onAccent", name: "Band text" });
+    k.instance(band, "Button", { Label: "GUARD ONE SERVICE FREE" }, { name: "Band button" });
+    k.text(sheet, "\xA9 2026 {{brand.name}} \xB7 Docs \xB7 Changelog \xB7 Status \xB7 Security. To be continued in issue no. 13.", { style: "Small 14", color: "onPaper", name: "Footer" });
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero row", "Band", "Rogue", "Strip"],
+      restyle: {
+        "Display 84": { laptop: "Display 70", tablet: "Display 60", mobile: "Display 42" },
+        "Lead 20": { mobile: "Lead 17" },
+        "Section 52": { mobile: "Section 34" },
+        "Price 40": { tablet: "Price 28", mobile: "Price 28" }
+      },
+      gap: { tablet: 56, mobile: 48 },
+      tweak: (kit, id, size) => {
+        if (size === "laptop") restage(kit, id, VISUAL.w, VISUAL.h, 0.86);
+        if (size === "tablet" || size === "mobile") {
+          for (const n of kit.named(id, "Hero row")) kit.patch(n, { itemSpacing: 40, counterAxisAlignItems: "MIN" });
+          for (const n of kit.named(id, "Band")) kit.patch(n, { itemSpacing: 24, padding: { top: 28, right: 24, bottom: 28, left: 24 } });
+          for (const n of kit.named(id, "Rogue")) kit.patch(n, { itemSpacing: 6 });
+          for (const n of kit.named(id, "Strip")) kit.patch(n, { itemSpacing: 36 });
+        }
+        if (size === "mobile") restage(kit, id, VISUAL.w, VISUAL.h, 0.56);
+        for (const n of kit.named(id, "Stage")) kit.patch(n, { layoutSizingHorizontal: "FIXED" });
+        for (const n of kit.named(id, "Hero dots")) kit.patch(n, size === "laptop" ? { x: 1280 - 560 } : { visible: false });
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  comic_book_landing_default
+};