@popcraft/kit 0.29.0 → 0.31.0

package/dist/chunks/chunk-W5AHXXYK.js

@@ -0,0 +1,166 @@
+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 {
+  dotGrid,
+  reelCuts,
+  reelSheet,
+  section
+} from "./chunk-UA7OECXL.js";
+import {
+  tickPath
+} from "./chunk-UDE42EDS.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-ERLSOXU6.js";
+import {
+  hide,
+  patchAll,
+  restyle
+} from "./chunk-YHBAWSDX.js";
+import {
+  hardShadow
+} from "./chunk-M6VTXO6F.js";
+import {
+  logoBadge,
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  box
+} from "./chunk-6RCDZU4R.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/saas-hook-features.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = section("launch", 11, 5);
+var { beat } = S;
+var FEATURES = [
+  { title: "One question at a time", note: "People finish what feels short.", fill: "card", ink: "onCard", from: "left" },
+  { title: "Every answer autosaves", note: "Close the tab. Nothing is lost.", fill: "mint", ink: "onMint", from: "right" },
+  { title: "Straight into your CRM", note: "HubSpot, Attio, Sheets. No Zap.", fill: "accent", ink: "onAccent", from: "left" }
+];
+var swaps = [captionSwap(["Long forms lose people.", "Ask one thing first.", "Every answer saves itself.", "Leads reach your CRM.", "Build yours in minutes."], beat(1), S.duration - 30)];
+var cues = [
+  { layer: "Hook top", preset: "pop-in", at: 0, params: { duration: 280 } },
+  { layer: "Hook block", preset: "drop-in", at: 250, params: { duration: 300 } },
+  { layer: "Hook end", preset: "pop-in", at: 520, params: { duration: 300 } },
+  { layer: "Burst", preset: "scale-in", at: 0, params: { duration: 500 } },
+  { layer: "Hook block", preset: "wobble", at: beat(2), params: { duration: 600, amount: 5 } },
+  { layer: "Caption strip", preset: "rise-in", at: beat(1), params: { duration: 300 } },
+  ...FEATURES.map((f, i) => ({ layer: `Feature ${i + 1}`, preset: "slide-in", at: beat(4 + i * 4), params: { duration: 380, direction: f.from } })),
+  ...FEATURES.map((_, i) => ({ layer: `Feature ${i + 1}`, preset: "shake", at: beat(4 + i * 4) + 380, params: { duration: 320, distance: 10 } })),
+  { layer: "Call row", preset: "pop-in", at: beat(16), params: { duration: 400 } },
+  { layer: "Call row", preset: "pulse", at: beat(17.5), params: { duration: 500, amount: 0.05 } },
+  { layer: "Call row", preset: "pulse", at: beat(19), params: { duration: 500, amount: 0.05 } }
+];
+var saas_hook_features_default = defineTemplate({
+  id: "motion-saas-hook-features",
+  meta: {
+    name: "SaaS short: hook and three features",
+    description: "A 10-second neo-brutalist reel: a blunt question lands in the first second, three feature blocks slam in on the downbeats (each its own colour and drawing), and the call to action pops. Music, burned-in captions, 9:16 with square and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "hook", "features", "neo-brutalist", "brutalism", "bold", "captions", "music", "audio", "reel", "tiktok", "shorts", "ad"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "ad"],
+    useCases: ["launch", "announcement", "tips"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, swaps },
+  build() {
+    const k = new Kit("SaaS short: hook and three features", preset("ig-story"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FFE03A", text: "#0D0D0D", primary: "#FF4F9A", onPrimary: "#0D0D0D", accent: "#2447F0", onAccent: "#FFFFFF", card: "#FFFFFF", onCard: "#0D0D0D" },
+      { name: "Punchform", site: "punchform.example" }
+    );
+    k.palette({ ink: "#0D0D0D", onInk: "#FFFFFF", mint: "#7CF2C0", onMint: "#0D0D0D", field: "#FFF6C2" });
+    k.textStyle("Hook 100", { size: 100, fontWeight: 900, letterSpacing: -4, lineHeight: 98, textCase: "UPPER" });
+    k.textStyle("Hook 76", { size: 76, fontWeight: 900, letterSpacing: -3, lineHeight: 74, textCase: "UPPER" });
+    k.textStyle("Feature 46", { size: 46, fontWeight: 900, letterSpacing: -1.6, lineHeight: 48 });
+    k.textStyle("Note 28", { size: 28, fontWeight: 600, lineHeight: 34 });
+    k.textStyle("Caption 40", { size: 40, fontWeight: 800, letterSpacing: -0.8, lineHeight: 48 });
+    k.textStyle("Button 34", { size: 34, fontWeight: 900, letterSpacing: -0.6, lineHeight: 42 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 34", label: "Build one free at punchform.example", pad: [20, 30], radius: 0 });
+    const rule = { color: "ink", width: 6, align: "INSIDE", join: "MITER" };
+    const sheet = reelSheet(k, S, { name: "Hook and features", gap: 22 });
+    dotGrid(k, sheet, "ink", { step: 36, size: 5, opacity: 0.1 });
+    const burst = k.star(sheet, 420, "accent", { name: "Burst", absolute: { x: 800, y: -40 } });
+    k.patch(burst, { rotation: 14, pointCount: 12, innerRadius: 0.72 });
+    const form = k.frame(sheet, { x: 140, y: 1500, width: 900, height: 440 }, { name: "Long form" });
+    [0, 1, 2].forEach((i) => {
+      k.rect(form, i === 2 ? 520 : 800, 96, "field", { name: "Empty field", stroke: rule, effects: [hardShadow(k, "ink", 10, 10)], absolute: { x: i * 34, y: i * 136 } });
+      k.rect(form, 6, 52, "ink", { name: "Caret", absolute: { x: i * 34 + 30, y: i * 136 + 22 }, opacity: i === 0 ? 1 : 0.25 });
+    });
+    const hook = k.stack(sheet, { gap: 8, name: "Hook" });
+    k.text(hook, "Still using a", { style: "Hook 100", color: "text", name: "Hook top" });
+    const block = k.stack(hook, { width: "HUG", fill: "primary", stroke: rule, effects: [hardShadow(k, "ink", 10, 10)], padding: { top: 6, right: 22, bottom: 12, left: 22 }, name: "Hook block" });
+    k.text(block, "23-field", { style: "Hook 100", color: "onPrimary", autoWidth: true, name: "Hook number" });
+    k.text(hook, "form?", { style: "Hook 100", color: "text", name: "Hook end" });
+    FEATURES.forEach((f, i) => {
+      const card = k.stack(sheet, { direction: "HORIZONTAL", gap: 22, align: "CENTER", fill: f.fill, stroke: rule, effects: [hardShadow(k, "ink", 10, 10)], padding: { top: 38, right: 28, bottom: 42, left: 30 }, name: `Feature ${i + 1}` });
+      const words = k.stack(card, { gap: 6, name: "Feature words" });
+      k.text(words, f.title, { style: "Feature 46", color: f.ink, name: "Feature title" });
+      k.text(words, f.note, { style: "Note 28", color: f.ink, name: "Feature note" });
+      const art = k.stack(card, { width: 170, height: 112, name: "Feature drawing" });
+      if (i === 0) {
+        k.rect(art, 170, 62, "field", { name: "Field", stroke: { ...rule, width: 5 }, absolute: { x: 0, y: 0 } });
+        k.rect(art, 5, 34, "ink", { name: "Field caret", absolute: { x: 18, y: 14 } });
+        k.vector(art, 170, 16, [0, 1, 2, 3, 4, 5, 6].map((n) => box(n * 25, 0, 20, 16)), "ink", { name: "Steps", absolute: { x: 0, y: 86 }, opacity: 0.22 });
+        k.vector(art, 170, 16, [0, 1, 2].map((n) => box(n * 25, 0, 20, 16)), "primary", { name: "Steps done", absolute: { x: 0, y: 86 } });
+      } else if (i === 1) {
+        ;
+        [0, 1, 2].forEach((n) => {
+          k.rect(art, 124, 26, "card", { name: "Answer", stroke: { ...rule, width: 4 }, absolute: { x: 0, y: n * 42 } });
+          k.vector(art, 30, 22, [tickPath(30, 22)], "ink", { name: "Saved tick", strokeWidth: 7, absolute: { x: 138, y: n * 42 + 2 } });
+        });
+      } else {
+        const cells = [];
+        for (let r = 0; r < 4; r++) for (let c = 0; c < 3; c++) cells.push(box(c * 58, r * 29, 52, 23));
+        k.vector(art, 170, 112, cells, "card", { name: "CRM rows", absolute: { x: 0, y: 0 }, opacity: 0.35 });
+        k.vector(art, 170, 23, [0, 1, 2].map((c) => box(c * 58, 0, 52, 23)), "primary", { name: "New row", absolute: { x: 0, y: 29 }, stroke: { ...rule, width: 3 } });
+      }
+    });
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 40", fill: "ink", ink: "onInk", pad: [16, 26] });
+    const call = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 0, align: "CENTER", stroke: { ...rule, align: "OUTSIDE" }, effects: [hardShadow(k, "ink", 10, 10)], name: "Call row" });
+    logoBadge(k, call, { fill: "ink", size: 42, pad: 20, radius: 0 });
+    k.instance(call, "Button", { Label: "Build one free at {{brand.site}}" }, { name: "Call" });
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.variants(sheet, reelCuts({ post: 40, portrait: 80 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 16, counterAxisSpacing: 16, padding: { top: 44, right: 72, bottom: 50, left: 72 } });
+        hide(kit, id, ["Long form"]);
+        patchAll(kit, id, "Hook", { itemSpacing: 4, counterAxisSpacing: 4 });
+        for (const n of ["Hook top", "Hook number", "Hook end"]) restyle(kit, id, n, "Hook 76");
+        patchAll(kit, id, "Hook block", { padding: { top: 4, right: 16, bottom: 8, left: 16 } });
+        patchAll(kit, id, "Burst", { x: 740, y: -110 });
+        for (let i = 1; i <= 3; i++) patchAll(kit, id, `Feature ${i}`, { padding: { top: 22, right: 28, bottom: 26, left: 30 } });
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { itemSpacing: 22, counterAxisSpacing: 22, padding: { top: 64, right: 140, bottom: 64, left: 140 } });
+        hide(kit, id, ["Long form"]);
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  saas_hook_features_default
+};

package/dist/chunks/chunk-W5HDW2AI.js

@@ -0,0 +1,196 @@
+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 {
+  blindsWindow,
+  castLight,
+  fitCastLight,
+  fitWindow,
+  noirBrand,
+  stamp,
+  typedRow
+} from "./chunk-LLOS2L3K.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-TF2MO3UA.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/noir-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SUSPECTS = [
+  ["Exhibit A", "The renewal nobody retried", "A card declines once and the subscription lapses without a sound. Gumshoe finds every one and queues the retry.", "$14,900"],
+  ["Exhibit B", "The coupon that never expired", "A launch discount from two winters ago, still taking 40% off sixty-one accounts.", "$9,300"],
+  ["Exhibit C", "The upgrade at the old price", "Seats were added in the app. The invoice never heard about it.", "$11,750"],
+  ["Exhibit D", "The trial that never ended", "A flag flipped by hand in March. The customer has been free ever since.", "$5,250"]
+];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 600 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 100, params: { duration: 700 } },
+  { layer: "Headline", preset: "typewriter", at: 200, params: { duration: 1100 } },
+  { layer: "Cast light", preset: "fade-in", at: 300, params: { duration: 1600 } },
+  { layer: "Window", preset: "fade-in", at: 600, params: { duration: 1200 } },
+  { layer: "Lead", preset: "rise-in", at: 1300, params: { duration: 800 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1700, params: { duration: 600 }, stagger: { delay: 140 } },
+  { layer: "Exhibit", preset: "drop-in", at: 2100, params: { duration: 600 } },
+  { layer: "Proof", preset: "fade-in", at: 2300, params: { duration: 800 } },
+  { layer: "Exhibit stamp", preset: "pop-in", at: 2900, params: { duration: 320, amount: 0.5 } },
+  { layer: "Exhibit", preset: "shake", at: 3020, params: { duration: 380, distance: 8 } }
+];
+var noir_landing_default = defineTemplate({
+  id: "web-noir-landing",
+  meta: {
+    name: "Noir landing page",
+    description: "A film-noir landing page for an analytics, security or billing product that plays detective: a hero where the headline is typed on, light falls through venetian blinds, a rainy office window comes out of the dark and the first exhibit is stamped; then the usual suspects as a ruled charge sheet and a case study as a closed file \u2014 at desktop, laptop, tablet and phone widths",
+    category: "web",
+    tags: ["noir", "film noir", "detective", "venetian blinds", "rain", "black and white", "landing page", "hero", "website", "saas", "animation", "serif", "typewriter", "responsive", "dark"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["launch", "brand-intro", "case-study"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("Noir landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    noirBrand(k);
+    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Brand 22", { ...SERIF, size: 22, fontWeight: 900, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Eyebrow 14", { ...MONO, size: 14, fontWeight: 700, letterSpacing: 3, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Display 74", { ...SERIF, size: 74, fontWeight: 900, letterSpacing: -2.4, lineHeight: 78 });
+    k.textStyle("Display 66", { ...SERIF, size: 66, fontWeight: 900, letterSpacing: -2.1, lineHeight: 70 });
+    k.textStyle("Display 38", { ...SERIF, size: 38, fontWeight: 900, letterSpacing: -1.2, lineHeight: 42 });
+    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 32 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 27 });
+    k.textStyle("Lead 19", { size: 19, fontWeight: 400, lineHeight: 30 });
+    k.textStyle("Proof 15", { ...MONO, size: 15, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Section 48", { ...SERIF, size: 48, fontWeight: 900, letterSpacing: -1.4, lineHeight: 52 });
+    k.textStyle("Section 34", { ...SERIF, size: 34, fontWeight: 900, letterSpacing: -0.8, lineHeight: 40 });
+    k.textStyle("Exhibit 15", { ...MONO, size: 15, fontWeight: 700, letterSpacing: 2, lineHeight: 30, textCase: "UPPER" });
+    k.textStyle("Suspect 28", { ...SERIF, size: 28, fontWeight: 700, fontStyle: "italic", lineHeight: 34 });
+    k.textStyle("Take 24", { ...MONO, size: 24, fontWeight: 700, lineHeight: 34, textAlign: "RIGHT" });
+    k.textStyle("Take 24 start", { ...MONO, size: 24, fontWeight: 700, lineHeight: 34 });
+    k.textStyle("Body 18", { size: 18, fontWeight: 400, lineHeight: 30 });
+    k.textStyle("Typed 14", { ...MONO, size: 14, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Typed 16", { ...MONO, size: 16, fontWeight: 500, lineHeight: 26 });
+    k.textStyle("Typed figure 34", { ...MONO, size: 34, fontWeight: 800, letterSpacing: -1, lineHeight: 40 });
+    k.textStyle("Stamp 18", { size: 18, fontWeight: 900, letterSpacing: 2, lineHeight: 22, textCase: "UPPER" });
+    k.textStyle("Stamp 30", { size: 30, fontWeight: 900, letterSpacing: 3, lineHeight: 34, textCase: "UPPER" });
+    k.textStyle("Small 14", { size: 14, fontWeight: 500, lineHeight: 22 });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 3 });
+    const shadow = { type: "DROP_SHADOW", color: k.color("shade", 0.7), offset: { x: 0, y: 18 }, blur: 40, spread: 0, visible: true };
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 88, top: 32 });
+    k.timeline(sheet, { duration: 5e3, fps: 30 });
+    castLight(k, sheet, 1440, 860, { bars: 9, opacity: 0.07, rise: 200 });
+    nav(k, sheet, { links: ["The method", "Closed files", "Pricing", "Changelog"], cta: "Open a case", style: "Nav 16", brandStyle: "Brand 22" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 28, name: "Copy" });
+    k.text(copy, "Revenue leak detection \xB7 private and discreet", { style: "Eyebrow 14", color: "onPaper", name: "Eyebrow" });
+    k.text(copy, "The case of the\nmissing revenue.", { style: "Display 74", color: "text", name: "Headline" });
+    k.text(copy, "Gumshoe reads every invoice, renewal and webhook in your billing account and comes back with names: the failed payments nobody retried, the coupons that never expired, the upgrades still billed at the old price. Evidence attached.", { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Open a case" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Read a closed file" }, { name: "CTA quiet" });
+    k.text(copy, "$18.4M recovered across 2,310 cases \xB7 median case closed in 9 days", { style: "Proof 15", color: "onPaper", name: "Proof" });
+    const visual = k.stack(hero, { width: 520, padding: { top: 0, right: 0, bottom: 56, left: 60 }, name: "Visual" });
+    blindsWindow(k, visual, 460, 520, { slats: 13 });
+    const exhibit = k.stack(visual, { width: 330, gap: 6, fill: "card", padding: { top: 18, right: 20, bottom: 20, left: 20 }, radius: 2, effects: [shadow], absolute: { x: 0, y: 330 }, name: "Exhibit" });
+    k.text(exhibit, "Exhibit A \xB7 no. 0417", { style: "Exhibit 15", color: "onCard", name: "Exhibit head" });
+    k.rect(exhibit, "FILL", 1, "onCard", { name: "Exhibit rule", opacity: 0.4 });
+    k.text(exhibit, "214 renewals failed.\n0 were retried.", { style: "Typed 16", color: "onCard", name: "Exhibit text" });
+    k.text(exhibit, "$41,200", { style: "Typed figure 34", color: "onCard", name: "Exhibit figure" });
+    stamp(k, exhibit, "Found", { style: "Stamp 18", turn: -9, pad: [5, 12], absolute: { x: 196, y: 112 }, name: "Exhibit stamp" });
+    k.patch(exhibit, { rotation: -4 });
+    const sheetOf = k.stack(sheet, { gap: 0, name: "Suspects" });
+    k.text(sheetOf, "Line-up \xB7 what we find, in the order we find it", { style: "Eyebrow 14", color: "onPaper", name: "Suspects eyebrow" });
+    k.stack(sheetOf, { height: 14, name: "Gap" });
+    k.text(sheetOf, "The usual suspects", { style: "Section 48", color: "text", name: "Suspects title" });
+    k.stack(sheetOf, { height: 32, name: "Gap" });
+    for (const [exhibitNo, name, account2, take] of SUSPECTS) {
+      k.rect(sheetOf, "FILL", 1, "text", { name: "Rule", opacity: 0.35 });
+      const row = k.stack(sheetOf, { direction: "HORIZONTAL", gap: 32, padding: { top: 26, right: 0, bottom: 26, left: 0 }, name: "Suspect" });
+      k.text(row, exhibitNo, { style: "Exhibit 15", color: "onPaper", width: 130, name: "Suspect exhibit" });
+      k.text(row, name, { style: "Suspect 28", color: "text", width: 300, name: "Suspect name" });
+      k.text(row, account2, { style: "Body 18", color: "onPaper", name: "Suspect account" });
+      const took = k.stack(row, { width: 170, gap: 0, name: "Suspect take" });
+      k.text(took, take, { style: "Take 24", color: "text", name: "Take figure" });
+      k.text(took, "a year, typical", { style: "Typed 14", color: "onPaper", align: "RIGHT", name: "Take note" });
+    }
+    k.rect(sheetOf, "FILL", 1, "text", { name: "Rule", opacity: 0.35 });
+    const file = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", fill: "card", radius: 2, padding: 56, effects: [shadow], name: "File" });
+    const account = k.stack(file, { gap: 18, name: "File copy" });
+    k.text(account, "Closed file no. 0389 \xB7 Tidewater Analytics", { style: "Exhibit 15", color: "onCard", name: "File head" });
+    k.text(account, "They suspected churn. It was the billing all along.", { style: "Section 34", color: "onCard", name: "File title" });
+    const typed = k.stack(account, { gap: 2, name: "File report" });
+    typedRow(k, typed, "LEAK", "Annual plans renewing at the 2023 price", { style: "Typed 16", labelWidth: 130 });
+    typedRow(k, typed, "FOUND", "Day 2, in 1,140 invoices", { style: "Typed 16", labelWidth: 130 });
+    typedRow(k, typed, "RECOVERED", "$212,400 in eleven days", { style: "Typed 16", labelWidth: 130 });
+    const close = k.stack(file, { width: 300, gap: 28, align: "CENTER", name: "File close" });
+    stamp(k, close, "Case closed", { style: "Stamp 30", turn: -6, name: "File stamp" });
+    k.instance(close, "Button", { Label: "Read the file" }, { name: "File button" });
+    k.text(sheet, "\xA9 2026 Gumshoe Investigations, Inc. \xB7 Security \xB7 Status \xB7 Read-only access, always", { style: "Small 14", color: "onPaper", name: "Footer" });
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "File", "Suspect"],
+      stackMobile: ["Typed row"],
+      restyle: {
+        "Display 74": { laptop: "Display 66", mobile: "Display 38" },
+        // A step smaller on the laptop, where the last line of the lead sat on the edge of wrapping.
+        "Lead 20": { laptop: "Lead 19", mobile: "Lead 17" },
+        "Section 48": { mobile: "Section 34" }
+      },
+      hide: { tablet: ["Nav links"] },
+      gap: { tablet: 64, mobile: 52 },
+      tweak: (kit, id, size) => {
+        const width = kit.node(id).width;
+        fitCastLight(kit, id, { bars: 9, rise: Math.round(width * 0.14), height: size === "mobile" ? 700 : 860 });
+        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 40 });
+        if (size === "tablet" || size === "mobile") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48 });
+          for (const n of kit.named(id, "File")) kit.patch(n, { itemSpacing: 32, padding: { top: 36, right: 28, bottom: 36, left: 28 } });
+          for (const n of kit.named(id, "Suspect")) kit.patch(n, { itemSpacing: 6 });
+          for (const n of kit.named(id, "Take figure")) {
+            kit.restyle(n, "Take 24 start");
+            kit.patch(n, { textAlign: "LEFT" });
+          }
+          for (const n of kit.named(id, "Take note")) kit.patch(n, { textAlign: "LEFT" });
+          for (const n of kit.named(id, "File close")) kit.patch(n, { counterAxisAlignItems: "MIN" });
+        }
+        if (size === "mobile") {
+          fitWindow(kit, id, 335, 380, { slats: 10 });
+          for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 335, padding: { top: 0, right: 0, bottom: 120, left: 0 } });
+          for (const n of kit.named(id, "Exhibit")) kit.patch(n, { x: 16, y: 300 });
+          for (const n of kit.named(id, "Typed row")) kit.patch(n, { itemSpacing: 0 });
+        } else for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: "FIXED" });
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  noir_landing_default
+};

package/dist/chunks/chunk-W5NLTWEG.js

@@ -0,0 +1,237 @@
+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 {
+  drawn,
+  soft
+} from "./chunk-3QM22WL7.js";
+import {
+  flatPhone,
+  uiRoles
+} from "./chunk-SCE4YRSR.js";
+import {
+  stars
+} from "./chunk-UDE42EDS.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  ground
+} from "./chunk-YHBAWSDX.js";
+import {
+  glow
+} from "./chunk-M6VTXO6F.js";
+import {
+  rng
+} from "./chunk-6RCDZU4R.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/saas-store-story.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var W = 1290;
+var H = 2796;
+var SCALE = 2.02;
+var PW = Math.round(426 * SCALE);
+var SCREENS = [
+  { name: "Score", tabs: [4, 0], blocks: [
+    { kind: "title", text: "Last night", note: "Thu 1 Oct" },
+    { kind: "ring", share: 0.61, figure: "61", label: "Sleep score" },
+    { kind: "tiles", items: [["In bed", "6h 12m"], ["Felt like", "4h 05m"]] },
+    { kind: "rows", card: true, rows: [{ title: "Woke 7 times", sub: "Longest stretch 1h 48m", glyph: "bolt" }, { title: "Deep sleep", sub: "38 min \xB7 low for you", glyph: "moon" }, { title: "Bedtime drifted", sub: "52 min later than usual", glyph: "bars" }] },
+    { kind: "button", label: "See what woke you" }
+  ] },
+  { name: "Night", tabs: [4, 1], blocks: [
+    { kind: "title", text: "Your night", note: "23:48\u20136:00" },
+    { kind: "bars", title: "Sleep depth", note: "Every 20 min", values: [2, 5, 8, 9, 6, 3, 7, 9, 4, 1, 5, 8, 6, 3, 6, 4, 2, 1], hi: 9, height: 150 },
+    { kind: "heading", text: "What woke you", note: "3 causes" },
+    { kind: "rows", card: true, rows: [
+      { title: "Noise, 58 dB", sub: "2:14 \xB7 a door, then traffic", value: "9 min", glyph: "bolt" },
+      { title: "Room at 24\xB0", sub: "3:40 \xB7 two degrees too warm", value: "14 min", glyph: "sun" },
+      { title: "Late coffee", sub: "16:30 \xB7 still active at 1:00", value: "31 min", glyph: "drop" }
+    ] },
+    { kind: "tiles", items: [["Lost to wake-ups", "54 min"], ["Fixable", "2 of 3"]] }
+  ] },
+  { name: "Wind down", tabs: [4, 2], blocks: [
+    { kind: "title", text: "Wind down", note: "Starts 22:40" },
+    { kind: "hero", label: "Tonight\u2019s bedtime", figure: "23:10", note: "For 7h 30m before your 6:40 alarm", share: 0.35 },
+    { kind: "checks", rows: [["Last coffee before 14:00", true], ["Dim the lights at 22:00", true], ["Phone down, 22:40", false], ["Ten-minute breathing", false]] },
+    { kind: "curve", title: "Heart rate, last hour", note: "bpm", values: [78, 76, 74, 70, 69, 66, 63, 61, 60, 58], height: 110 },
+    { kind: "button", label: "Start wind down" }
+  ] },
+  { name: "Wake", tabs: [4, 3], blocks: [
+    { kind: "title", text: "Smart alarm", note: "On" },
+    { kind: "hero", label: "Wake window", figure: "6:20\u20136:40", note: "Nocta picks your lightest minute", fill: "accent", ink: "onAccent" },
+    { kind: "curve", title: "Predicted sleep depth", note: "Tomorrow", values: [9, 8, 5, 7, 9, 6, 3, 5, 8, 4, 2, 1], mark: 10, height: 120 },
+    { kind: "rows", card: true, rows: [{ title: "Sunrise sound", sub: "Rises over 4 minutes", glyph: "sun" }, { title: "No snooze needed", sub: "11 mornings in a row", glyph: "check" }] },
+    { kind: "tiles", items: [["This week", "+47 min"], ["Score", "61 to 78"]] }
+  ] },
+  { name: "Week", tabs: [4, 0], blocks: [
+    { kind: "title", text: "Seven nights in", note: "Week 1" },
+    { kind: "ring", share: 0.84, figure: "84", label: "Sleep score" },
+    { kind: "bars", title: "Score by night", values: [61, 64, 70, 69, 76, 80, 84], hi: 6, labels: ["F", "S", "S", "M", "T", "W", "T"], height: 96 },
+    { kind: "tiles", items: [["Asleep", "7h 31m"], ["Wake-ups", "2"]] },
+    { kind: "button", label: "Keep going with Nocta Plus" }
+  ] }
+];
+var FRAMES = [
+  { name: "Hook", kicker: "Sound familiar?", title: "Six hours in bed. It felt like four.", screen: 0, phone: "centre" },
+  { name: "Journey: see", kicker: "Night one", title: "See exactly what woke you.", screen: 1, phone: "left", callouts: [
+    { text: "Every stir, to the minute", y: 1480, side: "right", at: 1560 },
+    { text: "The cause, not just the count", y: 1960, side: "right", at: 2040 },
+    { text: "What you can fix tonight", y: 2440, side: "right", at: 2500 }
+  ] },
+  { name: "Journey: change", kicker: "Night three", title: "A wind-down built from your own nights.", screen: 2, phone: "right", callouts: [
+    { text: "A bedtime that fits your alarm", y: 1500, side: "left", at: 1560 },
+    { text: "Four small habits, not forty", y: 1990, side: "left", at: 2050 },
+    { text: "Your pulse says when you\u2019re ready", y: 2420, side: "left", at: 2480 }
+  ] },
+  { name: "Journey: wake", kicker: "Night five", title: "Wake in light sleep, not out of deep.", screen: 3, phone: "left", callouts: [
+    { text: "A 20-minute window, never a jolt", y: 1500, side: "right", at: 1560 },
+    { text: "It learns your mornings", y: 2080, side: "right", at: 2140 }
+  ] },
+  { name: "Proof", kicker: "After a week", title: "From 61 to 84 in seven nights." },
+  { name: "Call", kicker: "Start tonight", title: "Your first seven nights are free.", note: "No band, no ring. Your phone on the bedside table is enough.", screen: 4, phone: "centre" }
+];
+var REVIEWS = [
+  ["\u201CIt told me my room was two degrees too warm. One fan later I sleep through.\u201D", "Renata V."],
+  ["\u201CFirst app that explained why I\u2019m tired instead of just telling me I am.\u201D", "Tom\xE1s K."],
+  ["\u201CThe alarm window is the feature. I have not hit snooze in a month.\u201D", "Bea L."]
+];
+function laurel(s, mirror) {
+  const out = [];
+  const c = s / 2, r = s * 0.42;
+  for (let i = 0; i < 10; i++) {
+    const a = (240 - i * 13) * Math.PI / 180;
+    const bx = c + r * Math.cos(a), by = c - r * Math.sin(a);
+    const dir = a - Math.PI / 2 + 0.62, len = s * (0.13 - i * 4e-3), wid = len * 0.3;
+    const tip = { x: bx + Math.cos(dir) * len, y: by - Math.sin(dir) * len };
+    const n = { x: Math.sin(dir) * wid, y: Math.cos(dir) * wid };
+    const mid = { x: (bx + tip.x) / 2, y: (by + tip.y) / 2 };
+    const pts = [{ x: bx, y: by }, { x: mid.x + n.x, y: mid.y + n.y }, tip, { x: mid.x - n.x, y: mid.y - n.y }];
+    out.push({ closed: true, points: pts.map((p) => ({ x: mirror ? s - p.x : p.x, y: p.y })) });
+  }
+  return out;
+}
+var saas_store_story_default = defineTemplate({
+  id: "social-saas-store-story",
+  meta: {
+    name: "SaaS store screenshots: story sequence",
+    description: "Six dark App Store screenshots (1290 \xD7 2796) that read as one argument: a hook, three journey frames with callouts pinned to the part of the screen they explain, a proof frame (laurel, rating, three reviews) and a call to install. A night ground, a star field and one amber light. Drop your own capture on each phone\u2019s screenshot slot",
+    category: "social",
+    tags: ["saas", "saas store", "app store", "screenshots", "story", "dark", "callouts", "reviews", "award", "iphone", "aso", "mobile app", "subscription app", "listing"],
+    platforms: ["app-store", "ios"],
+    formats: ["screenshot", "gallery"],
+    useCases: ["launch", "brand-intro", "testimonial"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  sequence: true,
+  build() {
+    const k = new Kit("SaaS store screenshots: story sequence", preset("appstore-iphone"));
+    k.quantizeGeometry = true;
+    k.brand(
+      {
+        paper: "#07080C",
+        text: "#F6F0E4",
+        primary: "#FFB23E",
+        onPrimary: "#1D1100",
+        accent: "#FF7A45",
+        onAccent: "#1F0A00",
+        ...uiRoles({ screen: "#0E1017", surface: "#191C27", onScreen: "#F6F0E4", onScreenMuted: "#B4B8C6", line: "#313646", track: "#2B2F3D", tile: "#2B2F3D", photo: "#2B2F3D", positive: "#7FD6A4", primary: "#FFB23E", onPrimary: "#1D1100", accent: "#FF7A45", onAccent: "#1F0A00", device: "#1A1C24", deviceEdge: "#4A4F60" })
+      },
+      { name: "Nocta" }
+    );
+    k.palette({ card: "#151823", onCard: "#F6F0E4", cardLine: "#3A3F52", star: "#F6F0E4" });
+    k.textStyle("Title 150", { ...SERIF, size: 150, fontWeight: 700, letterSpacing: -5, lineHeight: 148 });
+    k.textStyle("Kicker 36", { ...MONO, size: 36, fontWeight: 700, letterSpacing: 2.6, lineHeight: 44, textCase: "UPPER" });
+    k.textStyle("Callout 40", { size: 40, fontWeight: 700, letterSpacing: -0.8, lineHeight: 46 });
+    k.textStyle("Note 46", { size: 46, fontWeight: 500, letterSpacing: -0.6, lineHeight: 60 });
+    k.textStyle("Review 44", { ...SERIF, size: 44, fontWeight: 600, letterSpacing: -0.6, lineHeight: 56 });
+    k.textStyle("Who 32", { ...MONO, size: 32, fontWeight: 600, lineHeight: 40 });
+    k.textStyle("Award 60", { ...SERIF, size: 60, fontWeight: 700, letterSpacing: -1.4, lineHeight: 64, textAlign: "CENTER" });
+    k.textStyle("Rating 220", { ...SERIF, size: 220, fontWeight: 700, letterSpacing: -8, lineHeight: 200 });
+    k.component("Callout", { width: 400, fill: "card", radius: 28, padding: { top: 26, right: 30, bottom: 28, left: 30 }, stroke: { color: "primary", width: 3, align: "INSIDE" }, effects: [soft(k, "paper", 0.7, 20, 50)], description: "A callout pinned to a part of the screen.", props: { Text: "Every stir, to the minute" } }, (id) => {
+      k.propText(id, "Text", { style: "Callout 40", color: "onCard" });
+    });
+    let cover = "";
+    FRAMES.forEach((f, i) => {
+      const sheet = i === 0 ? k.sheet : k.addSheet(preset("appstore-iphone"));
+      ground(k, sheet, `${i + 1} \xB7 ${f.name}`, "paper");
+      k.patch(sheet, { x: i * (W + 120), y: 0 });
+      if (!cover) cover = sheet;
+      const r = rng(40 + i);
+      const bands = f.screen === void 0 ? [[20, 170], [760, 880]] : [[20, 170], [780, 1700]];
+      bands.forEach(([top, bottom], bi) => {
+        const dots = [];
+        for (let s = 0; s < (bottom - top) / 7; s++) {
+          const x = r() * W, y = top + r() * (bottom - top), d = 2 + r() * 5;
+          dots.push({ closed: true, points: [{ x, y: y - d }, { x: x + d, y }, { x, y: y + d }, { x: x - d, y }] });
+        }
+        drawn(k, sheet, dots, "star", { name: `Stars ${bi + 1}`, opacity: 0.55 });
+      });
+      glow(k, sheet, { role: i >= 4 ? "primary" : "accent", w: 2600, x: W / 2 + (i % 2 ? 260 : -260), y: H - 100, alpha: 0.26 + i * 0.03, name: "Light" });
+      glow(k, sheet, { role: "primary", w: 1300, x: W / 2, y: H - 200, alpha: 0.3, name: "Ember" });
+      const words = k.stack(sheet, { width: W - 192, gap: 34, name: "Words", absolute: { x: 96, y: 200 } });
+      const tag = k.stack(words, { direction: "HORIZONTAL", width: "HUG", gap: 20, align: "CENTER", name: "Kicker row" });
+      k.rect(tag, 12, 44, "primary", { radius: 6, name: "Kicker bar" });
+      k.text(tag, f.kicker, { style: "Kicker 36", color: "text", autoWidth: true, name: "Kicker" });
+      k.text(words, f.title, { style: "Title 150", color: "text", name: "Title" });
+      if (f.note) k.text(words, f.note, { style: "Note 46", color: "text", width: 980, name: "Note" });
+      if (f.screen !== void 0) {
+        const x = f.phone === "left" ? 16 : f.phone === "right" ? W - PW - 16 : (W - PW) / 2;
+        flatPhone(k, sheet, { spec: SCREENS[f.screen], scale: SCALE, x, y: 1080, name: "Phone", shadow: { type: "DROP_SHADOW", color: k.color("primary", 0.22), offset: { x: 0, y: 0 }, blur: 60, spread: 0, visible: true } });
+        for (const c of f.callouts ?? []) {
+          const cw = 400, cx = c.side === "right" ? W - cw - 24 : 24;
+          const dotX = c.side === "right" ? cx - 150 : cx + cw + 150;
+          k.rect(sheet, 150, 5, "primary", { name: "Leader", absolute: { x: c.side === "right" ? cx - 150 : cx + cw, y: c.at } });
+          k.ellipse(sheet, 34, "primary", { name: "Leader dot", stroke: { color: "paper", width: 8, align: "OUTSIDE" }, absolute: { x: dotX - 17, y: c.at - 15 } });
+          k.instance(sheet, "Callout", { Text: c.text }, { name: "Callout", absolute: { x: cx, y: c.y } });
+        }
+      } else {
+        const award = k.stack(sheet, { direction: "HORIZONTAL", width: W - 192, gap: 40, align: "CENTER", name: "Award", absolute: { x: 96, y: 900 } });
+        const wreath = k.stack(award, { width: 520, height: 420, align: "CENTER", justify: "CENTER", name: "Wreath" });
+        for (const side of [false, true]) drawn(k, wreath, laurel(520, side).map((p) => ({ ...p, points: p.points.map((q) => ({ x: q.x, y: q.y - 60 })) })), "primary", { name: "Laurel" });
+        k.text(wreath, "App of\nthe Day", { style: "Award 60", color: "text", width: 300, name: "Award name" });
+        const rating = k.stack(award, { gap: 14, name: "Rating" });
+        k.text(rating, "4.9", { style: "Rating 220", color: "text", name: "Rating figure" });
+        stars(k, rating, 56, "primary");
+        k.text(rating, "212,000 ratings", { style: "Who 32", color: "text", name: "Rating count" });
+        const list = k.stack(sheet, { width: W - 192, gap: 36, name: "Reviews", absolute: { x: 96, y: 1440 } });
+        REVIEWS.forEach(([quote, who], j) => {
+          const card = k.stack(list, { width: W - 192 - 80, gap: 22, fill: "card", radius: 36, padding: { top: 40, right: 46, bottom: 40, left: 46 }, stroke: { color: "cardLine", width: 3, align: "INSIDE" }, name: "Review" });
+          k.patch(card, { translateX: j % 2 ? 80 : 0 });
+          k.text(card, quote, { style: "Review 44", color: "onCard", name: "Review quote" });
+          const by = k.stack(card, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Review by" });
+          stars(k, by, 30, "primary");
+          k.text(by, who, { style: "Who 32", color: "onCard", autoWidth: true, name: "Reviewer" });
+        });
+        const nights = k.stack(sheet, { direction: "HORIZONTAL", width: W - 192, gap: 22, align: "MAX", name: "Nights", absolute: { x: 96, y: 2330 } });
+        [61, 64, 70, 69, 76, 80, 84].forEach((v, j) => {
+          const col = k.stack(nights, { width: 138, gap: 14, name: "Night" });
+          k.text(col, String(v), { style: "Who 32", color: "text", name: "Night score" });
+          k.rect(col, 138, Math.round((v - 50) * 11), j === 6 ? "primary" : "card", { radius: 20, name: "Night bar", ...j === 6 ? {} : { stroke: { color: "cardLine", width: 3, align: "INSIDE" } } });
+        });
+      }
+    });
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  saas_store_story_default
+};