@popcraft/kit 0.26.0 → 0.27.0

package/dist/chunks/chunk-KUO2LZLS.js

@@ -0,0 +1,141 @@
+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 {
+  SALES,
+  body,
+  crossPaths,
+  edge,
+  figure,
+  hazard,
+  hazardPaths,
+  label,
+  shout,
+  slab,
+  sticker,
+  titleBar,
+  tollBrand
+} from "./chunk-4NHKI4IM.js";
+import {
+  each,
+  pattern,
+  put,
+  redraw,
+  restyle,
+  sizeOf
+} from "./chunk-QLV6445V.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/style-brutalist-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var crosses = (w, h) => crossPaths(w, h, 90, 8, 3);
+var BAND = 44;
+function furnish(k, sheet, o) {
+  const { w, h } = sizeOf(k, sheet);
+  const z = o.scale ?? 1;
+  redraw(k, sheet, "Crosses", crosses);
+  const x = Math.round(w - o.win * z + 70 * z), y = Math.round(h * 0.13);
+  put(k, sheet, "Window", x, y, { scaleX: z, scaleY: z, anchorX: 0, anchorY: 0 });
+  put(k, sheet, "Sticker", Math.round(x - 40 * z), Math.round(h * 0.6), { scaleX: z, scaleY: z, anchorX: 0, anchorY: 0 });
+  each(k, sheet, "Foot band", (n) => {
+    k.patch(n, { x: 0, y: h - BAND, width: w });
+    for (const c of k.node(n).childIds) k.patch(c, { width: w, paths: hazardPaths(w, BAND, 28) });
+  });
+}
+var style_brutalist_link_preview_default = defineTemplate({
+  id: "social-saas-style-brutalist-link-preview",
+  meta: {
+    name: "Brutalist SaaS link preview",
+    description: "The picture your link unfurls as, in the neo-brutalist look: the promise in heavy black type on acid lime, the terms on a tag, and the product\u2019s window cropped at the right with a tomato tally, four sales, a sticker over its corner and hazard stripes along the foot. 1200 \xD7 630 Open Graph, with GitHub social preview and X sizes",
+    category: "social",
+    tags: ["saas", "link preview", "open graph", "og image", "github", "social preview", "neo-brutalist", "brutalism", "bold", "creator tool", "product ui", "launch"],
+    platforms: ["web", "x", "linkedin", "github", "facebook"],
+    formats: ["og-image", "banner", "post"],
+    useCases: ["launch", "brand-intro", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Brutalist SaaS link preview", preset("og-image"));
+    k.quantizeGeometry = true;
+    tollBrand(k, ["paper", "text", "onText", "primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"], { promise: "PUT A PRICE ON YOUR FILES." });
+    k.textStyle("Brand 30", shout(30, { leading: 1.15 }));
+    k.textStyle("Shout 88", shout(88));
+    k.textStyle("Shout 124", shout(124));
+    k.textStyle("Terms 22", body(22, 700));
+    k.textStyle("Terms 30", body(30, 700));
+    k.textStyle("Chip 19", label(19));
+    k.textStyle("Window 16", label(16));
+    k.textStyle("Total 64", figure(64));
+    k.textStyle("Buyer 20", body(20, 800));
+    k.textStyle("Bought 16", body(16, 600));
+    k.textStyle("Toll 24", figure(24));
+    k.textStyle("Sticker 50", shout(50, { center: true }));
+    k.textStyle("Sticker 16", label(16, { center: true }));
+    pill(k, "Chip", { fill: "text", ink: "onText", style: "Chip 19", label: "tollbooth.example", pad: [9, 14], radius: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 52, right: 600, bottom: 52 + BAND, left: 60 }, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    pattern(k, sheet, "Crosses", "text", crosses, 0.16);
+    hazard(k, sheet, { width: 1200, height: BAND, stripe: 28, fill: "text", ink: "paper", rule: 0, name: "Foot band", absolute: { x: 0, y: 630 - BAND } });
+    const win = slab(k, sheet, { width: 620, fill: "card", shadow: 14, clip: true, name: "Window", absolute: { x: 0, y: 0 } });
+    for (const t of k.named(titleBar(k, win, { title: "{{brand.site}}/sales", style: "Window 16", height: 44 }), "Window title")) k.patch(t, { textAutoResize: "WIDTH_AND_HEIGHT", layoutSizingHorizontal: "HUG" });
+    const inner = k.stack(win, { gap: 14, padding: { top: 18, right: 90, bottom: 24, left: 18 }, name: "Window body" });
+    const tally = slab(k, inner, { fill: "primary", rule: 5, shadow: 7, gap: 2, padding: { top: 12, right: 18, bottom: 12, left: 18 }, name: "Tally" });
+    k.text(tally, "TOLLS COLLECTED, THIS WEEKEND", { style: "Window 16", color: "onPrimary", name: "Tally label" });
+    k.text(tally, "$1,216", { style: "Total 64", color: "onPrimary", name: "Total" });
+    SALES.forEach(([who, what, toll], i) => {
+      const row = slab(k, inner, { direction: "HORIZONTAL", fill: "card", rule: 4, shadow: 6, gap: 14, align: "CENTER", padding: { top: 10, right: 16, bottom: 10, left: 12 }, name: "Sale" });
+      const face = k.stack(row, { width: 44, height: 44, fill: ["accent", "paper", "primary", "accent"][i], stroke: edge(4), align: "CENTER", justify: "CENTER", name: "Buyer mark" });
+      k.text(face, who[0], { style: "Buyer 20", color: ["onAccent", "text", "onPrimary", "onAccent"][i], autoWidth: true, name: "Buyer initial" });
+      const words = k.stack(row, { gap: 0, name: "Sale words" });
+      k.text(words, who, { style: "Buyer 20", color: "onCard", name: "Buyer" });
+      k.text(words, what, { style: "Bought 16", color: "cardMuted", name: "Bought" });
+      k.text(row, `+$${toll}`, { style: "Toll 24", color: "onCard", autoWidth: true, name: "Toll" });
+    });
+    sticker(k, sheet, { size: 170, teeth: 16, fill: "accent", ink: "onAccent", big: "$0", small: "A MONTH\nTO OPEN", bigStyle: "Sticker 50", smallStyle: "Sticker 16", tilt: 10, shadow: 8, absolute: { x: 0, y: 0 } });
+    const brand = k.stack(sheet, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Brand" });
+    const tile = k.stack(brand, { width: "HUG", fill: "text", padding: 9, name: "Logo tile" });
+    k.logo(tile, 28, 28);
+    k.text(brand, "{{brand.name}}", { style: "Brand 30", color: "text", name: "Name" });
+    const copy = k.stack(sheet, { gap: 18, name: "Copy" });
+    k.text(copy, "{{brand.promise}}", { style: "Shout 88", color: "text", name: "Promise" });
+    k.text(copy, "One link takes the payment, sends the file and files the tax. $0 a month.", { style: "Terms 22", color: "text", name: "Terms" });
+    k.instance(sheet, "Chip", { Label: "{{brand.site}}" }, { name: "Site" });
+    furnish(k, sheet, { win: 620 });
+    k.variants(sheet, [
+      { preset: "github-social", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 52, right: 640, bottom: 52 + BAND, left: 64 } });
+        furnish(kit, id, { win: 660 });
+      } },
+      { preset: "x-post", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 76, right: 820, bottom: 76 + BAND, left: 88 } });
+        restyle(kit, id, "Promise", "Shout 124");
+        restyle(kit, id, "Terms", "Terms 30");
+        each(kit, id, "Copy", (n) => kit.patch(n, { itemSpacing: 26, counterAxisSpacing: 26 }));
+        furnish(kit, id, { win: 620, scale: 1.36 });
+      } }
+    ]);
+    return k.finish();
+  }
+});
+
+export {
+  style_brutalist_link_preview_default
+};

package/dist/chunks/chunk-KVQ7R7FV.js

@@ -0,0 +1,52 @@
+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 {
+  AI_LIMITS,
+  init_limits,
+  str
+} from "./chunk-TZHWIVE5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// lib/ai/context.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_limits();
+function joinWithin(lines, maxChars) {
+  let out = "";
+  for (const line of lines) {
+    const next = out ? `${out}
+${line}` : line;
+    if (next.length > maxChars) break;
+    out = next;
+  }
+  return out;
+}
+var hex = (c) => "#" + [c.r, c.g, c.b].map((v) => Math.round(Math.max(0, Math.min(1, v)) * 255).toString(16).padStart(2, "0")).join("");
+function buildDesignContext(doc, maxChars = AI_LIMITS.maxContextChars) {
+  const lines = [];
+  const paints = Object.values(doc.styles ?? {}).filter((s) => s.type === "PAINT").slice(0, 24);
+  const solid = paints.map((s) => {
+    const p = s.type === "PAINT" ? s.paints.find((x) => x.type === "SOLID" && x.color) : void 0;
+    return p?.color ? `${s.name} ${hex(p.color)}` : null;
+  }).filter(Boolean);
+  if (solid.length) lines.push(`Color styles: ${solid.join("; ")}`);
+  const texts = Object.values(doc.styles ?? {}).filter((s) => s.type === "TEXT").slice(0, 12);
+  if (texts.length) lines.push(`Text styles: ${texts.map((t) => `${t.name} ${t.fontFamily} ${t.fontWeight} ${t.fontSize}px`).join("; ")}`);
+  const colorVars = Object.values(doc.variables ?? {}).filter((v) => v.type === "COLOR").slice(0, 24).map((v) => {
+    const col = doc.variableCollections?.[v.variableCollectionId];
+    const val = col ? v.valuesByMode[col.defaultModeId] : Object.values(v.valuesByMode)[0];
+    return val && typeof val === "object" && "r" in val ? `${v.name} ${hex(val)}` : null;
+  }).filter(Boolean);
+  if (colorVars.length) lines.push(`Color variables: ${colorVars.join("; ")}`);
+  return joinWithin(lines.map((l) => str(l, maxChars)), maxChars);
+}
+
+export {
+  joinWithin,
+  buildDesignContext
+};

package/dist/chunks/chunk-KW2ZDLLT.js

@@ -0,0 +1,198 @@
+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 {
+  COLUMN,
+  float,
+  lineGrid,
+  redrawLines,
+  reelCuts,
+  reelSheet,
+  section,
+  wideCut
+} from "./chunk-3TBNWHDN.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-C7BYFVZT.js";
+import {
+  hide,
+  patchAll,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  shadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  box
+} from "./chunk-BNVLVZUT.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/saas-before-after.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = section("acoustic", 2, 6);
+var { beat } = S;
+var STAGE = { width: COLUMN, height: 640 };
+var SPLIT = 236;
+var AFTER = { width: STAGE.width - SPLIT, height: STAGE.height };
+var WIPE = { at: beat(8), duration: 1100 };
+var LEDGER = { only: "y", stepY: 64, weight: 2, opacity: 1, name: "Ledger rules" };
+var SCRAPS = ["Spreadsheet", "Email thread", "Sticky note", "Overdue"];
+var swaps = [captionSwap(["Sunday night. Three unpaid invoices.", "A spreadsheet. Notes. Awkward emails.", "Fennel sends each invoice itself.", "It reminds, then it reconciles.", "Paid in two days flat.", "Your Sunday is yours again."], beat(0.5), S.duration - 30, { stagger: 60 })];
+var counts = [{ layer: "Invoice total", at: WIPE.at + 500, duration: beat(2), counter: { from: 0, to: 4800, prefix: "$", separator: "," } }];
+var cues = [
+  { layer: "Kicker", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Hook", preset: "words-in", at: 0, params: { duration: 500, amount: 70 } },
+  { layer: "Stage", preset: "fade-in", at: 300, params: { duration: 450 } },
+  { layer: "Caption strip", preset: "fade-in", at: beat(0.5), params: { duration: 300 } },
+  ...SCRAPS.map((name, i) => ({ layer: name, preset: i === 3 ? "pop-in" : "drop-in", at: beat(1 + i * 1.5), params: { duration: 420 } })),
+  { layer: "Before", preset: "shake", at: beat(5.5) + 420, params: { duration: 400, distance: 8 } },
+  { layer: "After", preset: "wipe-in", at: WIPE.at, params: { duration: WIPE.duration, direction: "left", ease: ease.inOut("cubic") } },
+  { layer: "Step", preset: "fade-in", at: beat(12), params: { duration: 350 }, stagger: { delay: beat(1) } },
+  { layer: "Paid stamp", preset: "pop-in", at: beat(15), params: { duration: 380, amount: 0.5 } },
+  { layer: "Call", preset: "rise-in", at: beat(18), params: { duration: 500 } },
+  { layer: "Call", preset: "pulse", at: beat(20), params: { duration: 700, amount: 0.05 } }
+];
+var saas_before_after_default = defineTemplate({
+  id: "motion-saas-before-after",
+  meta: {
+    name: "SaaS short: before and after",
+    description: "A 15-second before-and-after reel in a warm editorial serif look: the old way piles up on the desk (spreadsheet, email thread, sticky note, an overdue stamp), a marigold slider is drawn across, and the new way is one calm invoice whose total counts up and is stamped paid, the pile still in view beside it. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "before after", "comparison", "editorial", "serif", "invoice", "wipe", "captions", "music", "audio", "reel", "tiktok", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "linkedin", "x"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "ad", "video"],
+    useCases: ["comparison", "launch", "case-study"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit("SaaS short: before and after", preset("ig-story"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F1ECE0", text: "#183326", onPaper: "#475A4D", primary: "#183326", onPrimary: "#F6F1E5", accent: "#E3A008", onAccent: "#1D1500", card: "#FCFAF4", onCard: "#183326" },
+      { name: "Fennel", hook: "Invoicing shouldn\u2019t take your Sunday." }
+    );
+    k.palette({ rule: "#CFC6AE", margin: "#C7533B", desk: "#DDD3BB", scrap: "#FFFFFF", onScrap: "#2A2A26", scrapMuted: "#5F5E57", note: "#F4D35E", onNote: "#3B2D00", overdue: "#A8281C", cell: "#D5E3D3", cardMuted: "#54655A", shade: "#3A3320", onShade: "#F6F1E5" });
+    const serif = { fontFamily: "Source Serif 4" }, mono = { fontFamily: "JetBrains Mono" };
+    k.textStyle("Hook 84", { ...serif, size: 84, fontWeight: 600, letterSpacing: -2.4, lineHeight: 86 });
+    k.textStyle("Hook 58", { ...serif, size: 58, fontWeight: 600, letterSpacing: -1.4, lineHeight: 62 });
+    k.textStyle("Kicker 22", { ...mono, size: 22, fontWeight: 600, letterSpacing: 2.4, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Caption 38", { ...serif, size: 38, fontWeight: 600, fontStyle: "italic", letterSpacing: -0.4, lineHeight: 46 });
+    k.textStyle("Button 32", { size: 32, fontWeight: 700, letterSpacing: -0.4, lineHeight: 40 });
+    k.textStyle("Scrap 22", { ...mono, size: 22, fontWeight: 500, lineHeight: 30 });
+    k.textStyle("Note 30", { ...serif, size: 30, fontWeight: 700, fontStyle: "italic", lineHeight: 34 });
+    k.textStyle("Stamp 52", { size: 52, fontWeight: 900, letterSpacing: 3, lineHeight: 56, textCase: "UPPER" });
+    k.textStyle("Stamp 40", { size: 40, fontWeight: 900, letterSpacing: 3, lineHeight: 44, textCase: "UPPER" });
+    k.textStyle("Invoice 38", { ...serif, size: 38, fontWeight: 700, letterSpacing: -0.8, lineHeight: 44 });
+    k.textStyle("Total 150", { ...serif, size: 150, fontWeight: 700, letterSpacing: -6, lineHeight: 144, fontFeatures: { tnum: 1 } });
+    k.textStyle("Row 26", { size: 26, fontWeight: 600, letterSpacing: -0.3, lineHeight: 34 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "Send your first invoice free", pad: [20, 36], radius: 6 });
+    const sheet = reelSheet(k, S, { name: "Before and after", gap: 22 });
+    lineGrid(k, sheet, k.tint("text", 0.13), LEDGER);
+    k.rect(sheet, 3, 1920, "margin", { name: "Margin rule", absolute: { x: 104, y: 0 }, opacity: 0.55 });
+    k.ellipse(sheet, 980, "accent", { name: "Sun", absolute: { x: 50, y: 1560 } });
+    k.text(sheet, "The freelancer\u2019s ledger \xB7 {{brand.name}}", { style: "Kicker 22", color: "onPaper", name: "Kicker" });
+    k.text(sheet, "{{brand.hook}}", { style: "Hook 84", color: "text", name: "Hook" });
+    const stage = k.stack(sheet, { ...STAGE, clip: true, radius: 6, fill: "desk", effects: [shadow(k, "shade", 0.22, 18, 44)], name: "Stage" });
+    const before = k.frame(stage, { x: 0, y: 0, ...STAGE }, { name: "Before", fill: "desk" });
+    const tag = (parent, label, fill, ink, name) => {
+      const t = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", fill, radius: 4, padding: { top: 8, right: 16, bottom: 8, left: 16 }, name, absolute: { x: 28, y: 28 } });
+      k.text(t, label, { style: "Kicker 22", color: ink, autoWidth: true, name: `${name} label` });
+    };
+    const paper = [shadow(k, "shade", 0.25, 8, 18)];
+    const sheetScrap = k.stack(before, { width: 610, fill: "scrap", padding: 26, gap: 12, effects: paper, name: "Spreadsheet", absolute: { x: 30, y: 120 } });
+    k.text(sheetScrap, "invoices_2026_FINAL(2).xlsx", { style: "Scrap 22", color: "onScrap", name: "File name" });
+    const cells = [];
+    for (let r = 0; r < 6; r++) for (let c = 0; c < 4; c++) cells.push(box(c * 141, r * 40, 135, 34));
+    k.vector(sheetScrap, 558, 234, cells, "cell", { name: "Cells" });
+    k.text(sheetScrap, "Acme   4,800   sent??   \u2014", { style: "Scrap 22", color: "scrapMuted", name: "Row note" });
+    k.patch(sheetScrap, { rotation: -4 });
+    const mail = k.stack(before, { width: 520, fill: "scrap", padding: 26, gap: 10, effects: paper, name: "Email thread", absolute: { x: 258, y: 372 } });
+    k.text(mail, "Re: Re: Fwd: invoice_v3.pdf", { style: "Scrap 22", color: "onScrap", name: "Subject" });
+    k.text(mail, "\u201CHi, just circling back on this\u2026\u201D", { style: "Scrap 22", color: "scrapMuted", name: "Body" });
+    k.vector(mail, 468, 46, [box(0, 0, 468, 10), box(0, 18, 410, 10), box(0, 36, 270, 10)], "cell", { name: "Quoted lines" });
+    k.patch(mail, { rotation: 3 });
+    const note = k.stack(before, { width: 204, fill: "note", padding: { top: 24, right: 20, bottom: 34, left: 20 }, effects: paper, name: "Sticky note", absolute: { x: 16, y: 318 } });
+    k.text(note, "Chase Acme!! (third time)", { style: "Note 30", color: "onNote", name: "Note words" });
+    k.patch(note, { rotation: -5 });
+    const over = k.stack(before, { width: "HUG", stroke: { color: "overdue", width: 6, align: "INSIDE" }, radius: 6, padding: { top: 10, right: 22, bottom: 10, left: 22 }, name: "Overdue", absolute: { x: 44, y: 530 } });
+    k.text(over, "Overdue 47 days", { style: "Stamp 52", color: "overdue", autoWidth: true, name: "Overdue words" });
+    k.patch(over, { rotation: -6 });
+    tag(before, "Before", "shade", "onShade", "Before tag");
+    const after = k.frame(stage, { x: SPLIT, y: 0, ...AFTER }, { name: "After", fill: "card", clip: true });
+    const inv = k.stack(after, { ...AFTER, padding: { top: 96, right: 36, bottom: 36, left: 40 }, gap: 20, name: "Invoice", absolute: { x: 0, y: 0 } });
+    k.text(inv, "Invoice 0042 \xB7 Acme Studio", { style: "Invoice 38", color: "onCard", name: "Invoice title" });
+    k.rect(inv, "FILL", 2, "rule", { name: "Invoice rule" });
+    k.text(inv, "$4,800", { style: "Total 150", color: "onCard", name: "Invoice total" });
+    k.rect(inv, "FILL", 2, "rule", { name: "Invoice rule" });
+    for (const [what, when] of [["Sent with a pay link", "Mon 09:02"], ["Reminder, written for you", "Tue 09:00"], ["Paid and reconciled", "Wed 14:10"]]) {
+      const row = k.stack(inv, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Step" });
+      k.ellipse(row, 16, "accent", { name: "Step dot" });
+      k.text(row, what, { style: "Row 26", color: "onCard", name: "Step what" });
+      k.text(row, when, { style: "Scrap 22", color: "cardMuted", autoWidth: true, name: "Step when" });
+    }
+    k.rect(inv, "FILL", 2, "rule", { name: "Invoice rule" });
+    k.text(inv, "The next one goes out Friday.", { style: "Scrap 22", color: "cardMuted", name: "Invoice foot" });
+    const paid = k.stack(after, { width: "HUG", fill: "accent", radius: 6, padding: { top: 10, right: 24, bottom: 10, left: 24 }, name: "Paid stamp", absolute: { x: 400, y: 244 } });
+    k.text(paid, "Paid", { style: "Stamp 40", color: "onAccent", autoWidth: true, name: "Paid words" });
+    k.patch(paid, { rotation: -8 });
+    tag(after, "After", "accent", "onAccent", "After tag");
+    const GRIP = 52;
+    const slider = k.frame(stage, { x: SPLIT - GRIP / 2, y: 0, width: GRIP, height: STAGE.height }, { name: "Slider" });
+    k.rect(slider, 8, STAGE.height, "accent", { name: "Slider rule", absolute: { x: GRIP / 2 - 4, y: 0 } });
+    k.ellipse(slider, GRIP, "accent", { name: "Slider grip", stroke: { color: "card", width: 5, align: "INSIDE" }, effects: [shadow(k, "shade", 0.3, 4, 12)], absolute: { x: 0, y: STAGE.height / 2 - GRIP / 2 } });
+    const chevron = (dir) => ({ closed: false, points: [{ x: 7 + 3.5 * dir, y: 0 }, { x: 7 - 3.5 * dir, y: 8 }, { x: 7 + 3.5 * dir, y: 16 }] });
+    k.vector(slider, 14, 16, [chevron(1)], "onAccent", { name: "Grip left", strokeWidth: 3.5, absolute: { x: GRIP / 2 - 17, y: STAGE.height / 2 - 8 } });
+    k.vector(slider, 14, 16, [chevron(-1)], "onAccent", { name: "Grip right", strokeWidth: 3.5, absolute: { x: GRIP / 2 + 3, y: STAGE.height / 2 - 8 } });
+    k.animate(slider, "translateX", [{ t: WIPE.at, v: AFTER.width + GRIP, ease: ease.inOut("cubic") }, { t: WIPE.at + WIPE.duration, v: 0 }]);
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 38", fill: "card", ink: "onCard", radius: 6, pad: [16, 26], stroke: { color: "rule", width: 2, align: "INSIDE" } });
+    k.instance(sheet, "Button", { Label: "Send your first invoice free" }, { name: "Call" });
+    k.counts(sheet, counts);
+    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: 36, right: 140, bottom: 36, left: 140 } });
+        hide(kit, id, ["Kicker", "Sun"]);
+        restyle(kit, id, "Hook", "Hook 58");
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { padding: { top: 70, right: 140, bottom: 70, left: 140 } });
+        patchAll(kit, id, "Sun", { y: 1250 });
+      }
+    }), wideCut(640, (kit, id, right) => {
+      const scale = right.width / STAGE.width;
+      redrawLines(kit, id, LEDGER);
+      patchAll(kit, id, "Margin rule", { height: 1080, x: 72 });
+      patchAll(kit, id, "Sun", { x: -330, y: 850 });
+      float(kit, id, "Stage", right.x, right.y + Math.round((right.height - STAGE.height * scale) / 2), { scale });
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  saas_before_after_default
+};

package/dist/chunks/chunk-KW5ALU56.js

@@ -0,0 +1,217 @@
+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 {
+  tickPath
+} from "./chunk-YNOCYFZ4.js";
+import {
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  androidVariant,
+  screen,
+  statusBar
+} from "./chunk-R3ZCDUHV.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/app/saas-store-paywall.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var STEPS = [
+  {
+    name: "Goal",
+    kicker: "Question 1 of 3",
+    title: "What brings you to Limber?",
+    note: "Pick the one that matters most. You can change it later.",
+    on: 0,
+    cta: "Continue",
+    options: [["Less back pain at my desk", "Hips, lower back, shoulders"], ["Touch my toes again", "Hamstrings and calves"], ["Move better when I run", "Ankles, hips, thoracic spine"], ["Just feel less stiff", "A bit of everything"]]
+  },
+  {
+    name: "Time",
+    kicker: "Question 2 of 3",
+    title: "How long can you give it?",
+    note: "Short and daily beats long and never. Most people pick ten.",
+    on: 1,
+    cta: "Continue",
+    options: [["5 minutes", "Three moves, done before the kettle"], ["10 minutes", "Six moves, the plan most people keep"], ["15 minutes", "Nine moves, with a long stretch"], ["20 minutes", "A full session, four days a week"]]
+  },
+  {
+    name: "Reminder",
+    kicker: "Question 3 of 3",
+    title: "When should we nudge you?",
+    note: "One quiet notification. Skip a day and nothing breaks.",
+    on: 0,
+    cta: "Build my plan",
+    options: [["With my morning coffee", "7:30, before the day starts"], ["At lunch", "12:30, away from the desk"], ["After my last call", "17:30, before you log off"], ["Before bed", "21:30, to wind down"]]
+  }
+];
+var TRIAL = [
+  ["Today", "Full access", "Your desk-back plan and all 140 sessions, free."],
+  ["Day 5", "We remind you", "An email and a notification, two days before any charge."],
+  ["Day 7", "Billed $39.99", "Only if you keep it. Cancel in two taps before then."]
+];
+var saas_store_paywall_default = defineTemplate({
+  id: "app-saas-store-paywall",
+  meta: {
+    name: "SaaS store paywall and onboarding quiz",
+    description: "The flow a subscription app earns its trial with: three goal-picker onboarding steps with a progress bar that glides on, then a paywall with a trial timeline (today, the day-5 reminder, the day-7 charge), two plan cards with a best-value badge, and the restore, terms and privacy row. A wired prototype for iPhone and Android: the chosen answer, Continue or a swipe moves on",
+    category: "app",
+    tags: ["saas", "saas store", "paywall", "onboarding", "quiz", "goal picker", "trial timeline", "subscription", "pricing", "prototype flow", "smart animate", "app", "mobile", "ios", "android"],
+    platforms: ["ios", "android", "app-store", "google-play"],
+    formats: ["screen"],
+    useCases: ["onboarding", "pricing", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  build() {
+    const k = new Kit("SaaS store paywall and onboarding quiz", preset("iphone-17"));
+    k.brand(
+      { paper: "#F1F2EC", text: "#13231C", onPaper: "#4C5A52", primary: "#1D5C46", onPrimary: "#FFFFFF", accent: "#F0C940", onAccent: "#1F1A04" },
+      { name: "Limber" }
+    );
+    k.palette({ card: "#FFFFFF", onCard: "#13231C", cardMuted: "#55635B", line: "#D5D9CE", chosen: "#E3EFE8", track: "#DCE0D5" });
+    k.textStyle("Status 15", { size: 15, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Kicker 13", { size: 13, fontWeight: 700, letterSpacing: 1, lineHeight: 18, textCase: "UPPER" });
+    k.textStyle("Question 32", { ...SERIF, size: 32, fontWeight: 700, letterSpacing: -0.9, lineHeight: 37 });
+    k.textStyle("Body 16", { size: 16, fontWeight: 400, lineHeight: 23 });
+    k.textStyle("Option 17", { size: 17, fontWeight: 700, letterSpacing: -0.2, lineHeight: 22 });
+    k.textStyle("Option note 14", { size: 14, fontWeight: 500, lineHeight: 19 });
+    k.textStyle("Button 17", { size: 17, fontWeight: 700, lineHeight: 24, textAlign: "CENTER" });
+    k.textStyle("Badge 12", { size: 12, fontWeight: 800, letterSpacing: 0.7, lineHeight: 16, textCase: "UPPER" });
+    k.textStyle("Price 20", { size: 20, fontWeight: 800, letterSpacing: -0.4, lineHeight: 24 });
+    k.textStyle("Legal 13", { size: 13, fontWeight: 600, lineHeight: 18 });
+    k.variantSet("Option", "State", ["Off", "On"], {
+      direction: "HORIZONTAL",
+      width: 354,
+      gap: 14,
+      align: "CENTER",
+      radius: 18,
+      padding: { top: 14, right: 16, bottom: 14, left: 16 },
+      description: "One answer of a question: Off, or On when it is the chosen one.",
+      props: { Label: "Less back pain at my desk", Note: "Hips, lower back, shoulders" }
+    }, (state, id) => {
+      const on = state === "On";
+      k.patch(id, { fills: k.paint(on ? "chosen" : "card") });
+      const radio = k.stack(id, { width: 26, height: 26, radius: 13, align: "CENTER", justify: "CENTER", name: "Radio", ...on ? { fill: "primary" } : { stroke: { color: "line", width: 2, align: "INSIDE" } } });
+      if (on) k.vector(radio, 12, 10, [tickPath(12, 10)], "onPrimary", { name: "Tick", strokeWidth: 2.5 });
+      const words = k.stack(id, { width: 282, gap: 2, name: "Words" });
+      k.propText(words, "Label", { style: "Option 17", color: "onCard" });
+      k.propText(words, "Note", { style: "Option note 14", color: "cardMuted" });
+    }, (state) => state === "On" ? { stroke: { color: "primary", width: 2, align: "INSIDE" } } : { stroke: { color: "line", width: 1, align: "INSIDE" } });
+    k.component("Button", { width: 354, fill: "primary", radius: 16, align: "CENTER", padding: { top: 16, right: 20, bottom: 16, left: 20 }, props: { Label: "Continue" } }, (id) => {
+      k.propText(id, "Label", { style: "Button 17", color: "onPrimary", align: "CENTER" });
+    });
+    const screens = [];
+    const add = (name) => {
+      const id = screens.length === 0 ? k.sheet : k.addScreen(name);
+      k.nameSheet(id, name);
+      screens.push(id);
+      screen(k, id, { gap: 18, justify: "SPACE_BETWEEN" });
+      return id;
+    };
+    STEPS.forEach((s, i) => {
+      const id = add(s.name);
+      const top2 = k.stack(id, { gap: 18, name: "Top" });
+      statusBar(k, top2, { style: "Status 15" });
+      const bar = k.stack(top2, { direction: "HORIZONTAL", height: 6, radius: 3, fill: "track", clip: true, name: "Progress" });
+      k.rect(bar, Math.round(354 * (i + 1) / 4), 6, "primary", { radius: 3, name: "Progress fill" });
+      const ask = k.stack(top2, { gap: 10, padding: { top: 10, right: 0, bottom: 4, left: 0 }, name: "Question" });
+      k.text(ask, s.kicker, { style: "Kicker 13", color: "onPaper", name: "Kicker" });
+      k.text(ask, s.title, { style: "Question 32", color: "text", name: "Title" });
+      k.text(ask, s.note, { style: "Body 16", color: "onPaper", name: "Note" });
+      const list = k.stack(top2, { gap: 10, name: "Answers" });
+      s.options.forEach(([label, note], j) => k.instance(list, j === s.on ? "Option/On" : "Option/Off", { Label: label, Note: note }, { name: j === s.on ? "Chosen answer" : "Answer" }));
+      const foot2 = k.stack(id, { gap: 14, align: "CENTER", name: "Foot" });
+      const week = k.stack(foot2, { direction: "HORIZONTAL", gap: 8, align: "MAX", fill: "card", radius: 18, padding: { top: 14, right: 16, bottom: 14, left: 16 }, stroke: { color: "line", width: 1, align: "INSIDE" }, name: "Plan preview" });
+      [5, 10, 10, 5, 10, 20, 10].forEach((m, d) => {
+        const col = k.stack(week, { width: 39, gap: 6, align: "CENTER", name: "Day" });
+        k.rect(col, 39, 8 + m * (i === 0 ? 1 : i === 1 ? 2 : 2.6), d <= i * 3 ? "primary" : "track", { radius: 8, name: "Day bar" });
+        k.text(col, "MTWTFSS"[d], { style: "Option note 14", color: "cardMuted", align: "CENTER", name: "Day letter" });
+      });
+      k.text(foot2, ["Your week takes shape as you answer.", "Ten minutes, seven days: 70 minutes a week.", "Plan ready. One tap to see it."][i], { style: "Option note 14", color: "onPaper", align: "CENTER", name: "Foot note" });
+      k.instance(foot2, "Button", { Label: s.cta }, { name: "Next" });
+    });
+    const pay = add("Paywall");
+    const top = k.stack(pay, { gap: 14, name: "Top" });
+    statusBar(k, top, { style: "Status 15" });
+    const head = k.stack(top, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Head" });
+    k.text(head, "Your plan is ready", { style: "Kicker 13", color: "onPaper", autoWidth: true, name: "Kicker" });
+    const close = k.stack(head, { width: 30, height: 30, radius: 15, fill: "track", align: "CENTER", justify: "CENTER", name: "Close" });
+    k.vector(close, 11, 11, [{ closed: false, points: [{ x: 0, y: 0 }, { x: 11, y: 11 }] }, { closed: false, points: [{ x: 11, y: 0 }, { x: 0, y: 11 }] }], "text", { name: "Close mark", strokeWidth: 2 });
+    k.text(top, "Ten minutes a day for a back that stops complaining.", { style: "Question 32", color: "text", name: "Title" });
+    const trial = k.stack(top, { fill: "card", radius: 20, padding: { top: 16, right: 16, bottom: 16, left: 16 }, stroke: { color: "line", width: 1, align: "INSIDE" }, name: "Trial timeline" });
+    TRIAL.forEach(([when, what, note], i) => {
+      const row = k.stack(trial, { direction: "HORIZONTAL", gap: 12, name: "Trial step" });
+      const rail = k.stack(row, { width: 26, align: "CENTER", name: "Rail" });
+      const dot = k.stack(rail, { width: 26, height: 26, radius: 13, fill: i === 0 ? "primary" : i === 1 ? "accent" : "track", align: "CENTER", justify: "CENTER", name: "Trial dot" });
+      if (i === 0) k.vector(dot, 12, 10, [tickPath(12, 10)], "onPrimary", { name: "Tick", strokeWidth: 2.5 });
+      else k.ellipse(dot, 8, i === 1 ? "onAccent" : "onCard", { name: "Dot mark" });
+      if (i < TRIAL.length - 1) k.rect(rail, 2, 40, "line", { name: "Rail line" });
+      const words = k.stack(row, { width: 284, gap: 1, padding: { top: 2, right: 0, bottom: i < TRIAL.length - 1 ? 12 : 0, left: 0 }, name: "Trial words" });
+      k.text(words, `${when} \xB7 ${what}`, { style: "Option 17", color: "onCard", name: "Trial when" });
+      k.text(words, note, { style: "Option note 14", color: "cardMuted", name: "Trial note" });
+    });
+    const plans = k.stack(top, { gap: 10, name: "Plans" });
+    for (const [i, [name, detail, price]] of [["Yearly", "7 days free, then $3.33/mo", "$39.99"], ["Monthly", "No trial, cancel any time", "$7.99"]].entries()) {
+      const on = i === 0;
+      const card = k.stack(plans, { direction: "HORIZONTAL", gap: 12, align: "CENTER", fill: on ? "chosen" : "card", radius: 18, padding: { top: 14, right: 16, bottom: 14, left: 16 }, stroke: { color: on ? "primary" : "line", width: on ? 2 : 1, align: "INSIDE" }, name: `${name} plan` });
+      const radio = k.stack(card, { width: 24, height: 24, radius: 12, align: "CENTER", justify: "CENTER", name: "Radio", ...on ? { fill: "primary" } : { stroke: { color: "line", width: 2, align: "INSIDE" } } });
+      if (on) k.ellipse(radio, 9, "onPrimary", { name: "Radio dot" });
+      const words = k.stack(card, { width: 196, gap: 1, name: "Plan words" });
+      k.text(words, name, { style: "Option 17", color: "onCard", name: "Plan name" });
+      k.text(words, detail, { style: "Option note 14", color: "cardMuted", name: "Plan detail" });
+      k.text(card, price, { style: "Price 20", color: "onCard", align: "RIGHT", name: "Plan price" });
+      if (on) {
+        const badge = k.stack(card, { direction: "HORIZONTAL", width: "HUG", fill: "accent", radius: 9, padding: { top: 3, right: 9, bottom: 3, left: 9 }, name: "Best value", absolute: { x: 214, y: -11 } });
+        k.text(badge, "Best value", { style: "Badge 12", color: "onAccent", autoWidth: true, name: "Badge text" });
+      }
+    }
+    const incl = k.stack(top, { gap: 8, padding: { top: 6, right: 4, bottom: 0, left: 4 }, name: "Included" });
+    for (const line of ["All 140 sessions, from day one", "Your plan adjusts every week", "Cancel in two taps, any time"]) {
+      const row = k.stack(incl, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Included row" });
+      k.vector(row, 14, 11, [tickPath(14, 11)], "primary", { name: "Tick", strokeWidth: 2.5 });
+      k.text(row, line, { style: "Option note 14", color: "text", name: "Included words" });
+    }
+    const foot = k.stack(pay, { gap: 12, align: "CENTER", name: "Foot" });
+    k.instance(foot, "Button", { Label: "Start my 7 days free" }, { name: "Start trial" });
+    const legal = k.stack(foot, { direction: "HORIZONTAL", width: "HUG", gap: 18, name: "Legal row" });
+    for (const l of ["Restore purchase", "Terms", "Privacy"]) k.text(legal, l, { style: "Legal 13", color: "onPaper", autoWidth: true, name: l });
+    const names = [...STEPS.map((s) => s.name), "Paywall"];
+    const androids = screens.map((id, i) => k.variants(id, [androidVariant(names[i])])[0]);
+    const iphone = k.node(screens[0]);
+    androids.forEach((id, i) => k.patch(id, { x: k.node(screens[i]).x, y: iphone.height + 200 }));
+    for (const set of [screens, androids]) {
+      set.forEach((id, i) => {
+        const next = set[i + 1];
+        if (!next) {
+          for (const c of k.named(id, "Close")) k.link(c, null, "DISSOLVE", { navigation: "BACK" });
+          return;
+        }
+        const how = i === set.length - 2 ? "SLIDE_FROM_BOTTOM" : "SMART_ANIMATE";
+        for (const from of [...k.named(id, "Next"), ...k.named(id, "Chosen answer")]) k.link(from, next, how, { duration: 450 });
+        k.link(id, next, how, { duration: 450, trigger: "ON_DRAG" });
+      });
+    }
+    k.flowStart(screens[0], "Quiz to paywall (iPhone)");
+    k.flowStart(androids[0], "Quiz to paywall (Android)");
+    return k.finish();
+  }
+});
+
+export {
+  saas_store_paywall_default
+};