@popcraft/kit 0.53.7 → 0.53.9

package/dist/chunks/chunk-PURLMWCR.js

@@ -0,0 +1,145 @@
+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 {
+  body,
+  brandRow,
+  clear,
+  dress,
+  drop,
+  edge,
+  label,
+  redress,
+  shout,
+  shove,
+  slab,
+  slam,
+  spinSticker,
+  stamp,
+  sticker,
+  thump,
+  ticketStub,
+  tollBrand,
+  verticalPost
+} from "./chunk-OZXTZXRU.js";
+import {
+  faceSlot
+} from "./chunk-2VFVKPUT.js";
+import {
+  patchAll
+} from "./chunk-LWSZATOL.js";
+import {
+  pill,
+  postVariants
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/social/style-brutalist-testimonial.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 7e3;
+var OUT = 6300;
+var TEETH = 16;
+var QUOTE = "\u201CI put a price on my presets on a Friday night. By Monday it had paid my rent.\u201D";
+var WORD_MS = 115;
+var PARTS = ["Top row", "Rating", "Quote card", "Person", "Sticker", "Call row"];
+var cues = [
+  shove("Top row", 0, "left", { duration: 260 }),
+  ...stamp("Star", 100, { gap: 90, from: 2, rock: 10 }),
+  { layer: "Rating words", preset: "fade-in", at: 500, params: { duration: 100 } },
+  ...slam("Quote card", 300, { distance: 300, shake: 14 }),
+  { layer: "Quote", preset: "words-in", at: 620, params: { duration: 260, amount: WORD_MS } },
+  shove("Person", 2900, "left", { duration: 300 }),
+  ...stamp("Sticker", 3400, { from: 1.9, rock: 9 }),
+  ...slam("Call row", 3900, { distance: 240, shake: 12 }),
+  thump("Call row", 4800, 0.06),
+  { layer: "Sticker", preset: "wobble", at: 5200, params: { duration: 600, amount: 9 } },
+  clear(PARTS, OUT)
+];
+var style_brutalist_testimonial_default = defineTemplate({
+  id: "motion-saas-style-brutalist-testimonial",
+  meta: {
+    name: "Brutalist SaaS testimonial post (animated)",
+    description: "A customer quote that loops, in the neo-brutalist look: five stars are stamped on, the quote card slams down and the quote arrives a word at a time, then the customer shoves in (a photo slot in a ruled frame, with a name and a role), a result sticker is stamped beside them and the button lands; then it all cuts off and starts again. Seven seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "testimonial", "quote", "customer", "review", "social proof", "photo", "loop", "neo-brutalist", "brutalism", "bold", "post"],
+    platforms: ["x", "linkedin", "instagram", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["testimonial", "quote", "case-study"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Brutalist SaaS testimonial post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    tollBrand(k, ["paper", "text", "onText", "primary", "onPrimary", "accent", "onAccent", "card", "onCard"], { customer: "Ana Reyes", role: "Sells Field Notes presets for Lightroom" });
+    k.textStyle("Quote 62", body(62, 800));
+    k.textStyle("Brand 40", shout(40, { leading: 1.1 }));
+    k.textStyle("Tag 22", label(22));
+    k.textStyle("Rating 24", label(24));
+    k.textStyle("Name 46", shout(46, { leading: 1.05 }));
+    k.textStyle("Role 28", body(28, 600));
+    k.textStyle("Sticker 40", shout(40, { center: true, leading: 0.95 }));
+    k.textStyle("Sticker 18", label(18, { center: true }));
+    k.textStyle("Button 34", shout(34, { leading: 1.25 }));
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 34", label: "OPEN YOURS: tollbooth.example", pad: [20, 26], radius: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 18, { top: 104, right: 64, bottom: 110, left: 64 }, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    dress(k, sheet);
+    k.patch(ticketStub(k, sheet, { x: 190, y: 1540 }), { visible: false });
+    brandRow(k, sheet, { nameStyle: "Brand 40", tagStyle: "Tag 22", tag: "SELLER NO. 212" });
+    const quote = slab(k, sheet, { fill: "card", shadow: 16, gap: 22, padding: { top: 34, right: 40, bottom: 40, left: 40 }, name: "Quote card" });
+    const rating = k.stack(quote, { direction: "HORIZONTAL", gap: 18, align: "CENTER", name: "Rating" });
+    const stars = k.stack(rating, { direction: "HORIZONTAL", width: "HUG", gap: 8, name: "Stars" });
+    for (let i = 0; i < 5; i++) k.star(stars, 44, "onCard", { name: "Star" });
+    k.text(rating, "FIRST WEEKEND, IN HER WORDS", { style: "Rating 24", color: "onCard", name: "Rating words" });
+    k.text(quote, QUOTE, { style: "Quote 62", color: "onCard", name: "Quote" });
+    const person = k.stack(sheet, { direction: "HORIZONTAL", gap: 26, align: "CENTER", name: "Person" });
+    const frame = k.stack(person, { width: 150, height: 150, stroke: edge(6), effects: drop(k, 10), name: "Face frame" });
+    faceSlot(k, k.photo(frame, 150, 150, { ground: "accent", name: "Face" }), 150, 150, "text");
+    k.rect(frame, 150, 150, [], { name: "Face rule", stroke: edge(6), absolute: { x: 0, y: 0 } });
+    const who = k.stack(person, { gap: 4, name: "Who" });
+    k.text(who, "{{brand.customer}}", { style: "Name 46", color: "text", name: "Customer name" });
+    k.text(who, "{{brand.role}}", { style: "Role 28", color: "text", name: "Customer role" });
+    const call = slab(k, sheet, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", fill: "primary", shadow: 12, gap: 0, name: "Call row" });
+    const tile = k.stack(call, { width: "HUG", fill: "text", padding: 24, name: "Call tile" });
+    k.logo(tile, 40, 40);
+    k.instance(call, "Button", { Label: "OPEN YOURS: {{brand.site}}" }, { name: "Call" });
+    const badge = sticker(k, sheet, { size: 230, teeth: TEETH, fill: "accent", ink: "onAccent", big: "$4,180", small: "IN HER FIRST\n30 DAYS", bigStyle: "Sticker 40", smallStyle: "Sticker 18", tilt: 9, shadow: 10, absolute: { x: 764, y: 690 } });
+    spinSticker(k, badge, 2 * 360 / TEETH * 1e3 / DURATION);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 64 }, {
+      portrait: (kit, id) => {
+        kit.patch(id, { padding: { top: 130, right: 64, bottom: 136, left: 64 } });
+        patchAll(kit, id, "Sticker", { x: 764, y: 920 });
+        redress(kit, id);
+      },
+      vertical: (kit, id) => {
+        patchAll(kit, id, "Date tag", { visible: false });
+        verticalPost(kit, id);
+        patchAll(kit, id, "Sticker", { x: 690, y: 300 });
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_brutalist_testimonial_default
+};

package/dist/chunks/chunk-PY4YZUAZ.js

@@ -0,0 +1,177 @@
+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 {
+  fitGraveyard,
+  graveyard,
+  halloweenBrand,
+  headstone,
+  middleRidge,
+  nearRidge,
+  nightSky,
+  plant,
+  recutStone,
+  ridgeY,
+  sheetGhost
+} from "./chunk-TMX5NGCD.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  score
+} from "./chunk-KHGNV7UQ.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset,
+  swapTimes
+} from "./chunk-PN2PTI35.js";
+import {
+  ease
+} from "./chunk-ZGIMZ6SP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/halloween-graveyard-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var MUSIC = score("spooky");
+var DURATION = MUSIC.duration;
+var beat = MUSIC.beat;
+var yard = (h, near, front, moon = 620, over = {}) => graveyard({ w: 1080, h, near, loopMs: DURATION, ...front ? { front } : {} }, { moon: { x: 640, y: near - 520 + (620 - moon), size: moon }, ...over });
+var STORY = yard(1920, 1140, 1600);
+var LINES = ["It ran payroll, pricing and the board deck.", "Then Plot imported it in four minutes.", "Typed tables. Permissions. An audit log.", "Give your spreadsheet a decent burial."];
+var CAPTION = { at: beat(4), every: beat(7), stagger: 50, in: 350, out: 250 };
+var swaps = [
+  // Word by word; the hold is what is left of seven beats after the longest line (eight words) has come and gone.
+  { layer: "Caption", words: LINES, at: CAPTION.at, hold: CAPTION.every - CAPTION.in - CAPTION.out - 2 * 7 * CAPTION.stagger + 100, stagger: CAPTION.stagger, in: CAPTION.in, out: CAPTION.out, unit: "word", rise: 30 }
+];
+var cues = [
+  { layer: "Eyebrow", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Hero stone", preset: "rise-in", at: 0, params: { duration: 600 } },
+  { layer: "Epitaph", preset: "fade-in", at: beat(2), params: { duration: 700 } },
+  { layer: "Back stone", preset: "rise-in", at: beat(7), params: { duration: 600 }, stagger: { delay: beat(1) } },
+  { layer: "Ghost", preset: "rise-in", at: beat(14), params: { duration: 1e3 } },
+  { layer: "Ghost", preset: "wobble", at: beat(23), params: { duration: 900 } },
+  { layer: "Call", preset: "rise-in", at: beat(24), params: { duration: 600 } },
+  { layer: "Site", preset: "fade-in", at: beat(25), params: { duration: 600 } },
+  { layer: "Call", preset: "pulse", at: beat(28), params: { duration: 900, amount: 0.05 } }
+];
+var halloween_graveyard_reel_default = defineTemplate({
+  id: "motion-halloween-graveyard-reel",
+  meta: {
+    name: "Halloween graveyard reel",
+    description: "An 18-second Halloween reel for a SaaS that kills a spreadsheet: a headstone for FINAL_v7_REAL.xlsx is up in the first half second, the ghost of the spread-sheet rises behind it, and the story is told in burned-in captions before the offer lands \u2014 a cut-paper graveyard under a rising harvest moon, cut to a tiptoeing pizzicato with a creaking door (made by PopCraft, CC0). 9:16 with 1:1 and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "halloween", "graveyard", "headstone", "ghost", "cut paper", "spreadsheet", "saas", "reel", "captions", "music", "audio", "seasonal"],
+    platforms: ["instagram", "tiktok", "youtube", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["launch", "sale", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, swaps },
+  build() {
+    const k = new Kit("Halloween graveyard reel", preset("ig-story"));
+    k.quantizeGeometry = true;
+    halloweenBrand(k);
+    k.textStyle("Eyebrow 26", { size: 26, fontWeight: 700, letterSpacing: 5, lineHeight: 34, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Lies 30", { size: 30, fontWeight: 800, letterSpacing: 10, lineHeight: 38, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Deceased 54", { ...MONO, size: 54, fontWeight: 800, letterSpacing: -1.5, lineHeight: 64, textAlign: "CENTER" });
+    k.textStyle("Dates 40", { ...SERIF, size: 40, fontWeight: 700, lineHeight: 48, textAlign: "CENTER" });
+    k.textStyle("Epitaph 36", { ...SERIF, size: 36, fontStyle: "italic", fontWeight: 500, lineHeight: 46, textAlign: "CENTER" });
+    k.textStyle("Lies 26", { size: 26, fontWeight: 800, letterSpacing: 9, lineHeight: 34, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Deceased 44", { ...MONO, size: 44, fontWeight: 800, letterSpacing: -1, lineHeight: 54, textAlign: "CENTER" });
+    k.textStyle("Deceased 36", { ...MONO, size: 36, fontWeight: 800, letterSpacing: -1, lineHeight: 44, textAlign: "CENTER" });
+    k.textStyle("Dates 34", { ...SERIF, size: 34, fontWeight: 700, lineHeight: 42, textAlign: "CENTER" });
+    k.textStyle("Epitaph 30", { ...SERIF, size: 30, fontStyle: "italic", fontWeight: 500, lineHeight: 40, textAlign: "CENTER" });
+    k.textStyle("Epitaph 26", { ...SERIF, size: 26, fontStyle: "italic", fontWeight: 500, lineHeight: 34, textAlign: "CENTER" });
+    k.textStyle("Rip 18", { size: 18, fontWeight: 800, letterSpacing: 5, lineHeight: 24, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Name 24", { ...SERIF, size: 24, fontWeight: 900, lineHeight: 28, textAlign: "CENTER" });
+    k.textStyle("Years 16", { ...MONO, size: 16, fontWeight: 600, lineHeight: 22, textAlign: "CENTER" });
+    k.textStyle("Ref 22", { ...MONO, size: 22, fontWeight: 800, lineHeight: 26 });
+    k.textStyle("Caption 40", { size: 40, fontWeight: 700, letterSpacing: -0.4, lineHeight: 50, textAlign: "CENTER" });
+    k.textStyle("Caption 32", { size: 32, fontWeight: 700, letterSpacing: -0.3, lineHeight: 40, textAlign: "CENTER" });
+    k.textStyle("Button 32", { size: 32, fontWeight: 800, lineHeight: 40 });
+    k.textStyle("Site 26", { size: 26, fontWeight: 600, letterSpacing: 1, lineHeight: 34, textAlign: "CENTER" });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "Bury yours: 31% off till Halloween", pad: [22, 40], radius: 8 });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Graveyard reel");
+    k.flowSheet(sheet, 0, verticalPadding(), "paper", "SPACE_BETWEEN", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: MUSIC.audio });
+    const g = STORY;
+    nightSky(k, sheet, g);
+    headstone(k, sheet, { w: 150, shape: "gothic", name: "Back stone", absolute: { x: 0, y: 0 }, foot: 70, tilt: -3, gap: 4, lines: [{ text: "R.I.P.", style: "Rip 18" }, { text: "Dave\u2019s macro", style: "Name 24" }, { text: "2021\u20132025", style: "Years 16" }] });
+    headstone(k, sheet, { w: 150, shape: "square", name: "Back stone", absolute: { x: 0, y: 0 }, foot: 70, tilt: 4, gap: 4, lines: [{ text: "R.I.P.", style: "Rip 18" }, { text: "Copy of Copy of Pricing", style: "Name 24" }, { text: "2023\u20132026", style: "Years 16" }] });
+    middleRidge(k, sheet, g);
+    headstone(k, sheet, {
+      w: 660,
+      name: "Hero stone",
+      absolute: { x: 0, y: 0 },
+      pad: 44,
+      gap: 16,
+      foot: 70,
+      rule: 2,
+      lines: [{ text: "Here lies", style: "Lies 30", name: "Here lies" }, { text: "FINAL_v7_REAL.xlsx", style: "Deceased 54", name: "Deceased" }, { text: "2019 \u2013 2026", style: "Dates 40", name: "Dates" }, { text: "Nobody knew which tab was true.", style: "Epitaph 36", name: "Epitaph" }]
+    });
+    sheetGhost(k, sheet, { w: 230, style: "Ref 22", absolute: { x: 0, y: 0 }, loopMs: DURATION, cycles: 6 });
+    nearRidge(k, sheet, g);
+    k.text(sheet, "{{brand.name}} \xB7 a Halloween notice", { style: "Eyebrow 26", color: "onPaper", name: "Eyebrow" });
+    const foot = k.stack(sheet, { gap: 26, align: "CENTER", name: "Foot" });
+    k.text(foot, swaps[0].words[0], { style: "Caption 40", color: "bone", name: "Caption" });
+    k.instance(foot, "Button", { Label: "Bury yours: 31% off till Halloween" }, { name: "Call" });
+    k.text(foot, "{{brand.site}}", { style: "Site 26", color: "bone", name: "Site" });
+    const stand = (kit, id, y, ghostMax = 810, backs = [112, 966]) => {
+      const [left, right] = kit.named(id, "Back stone");
+      plant(kit, left, backs[0], ridgeY(y, "mid", backs[0]), 60);
+      plant(kit, right, backs[1], ridgeY(y, "mid", backs[1]), 60);
+      for (const s of kit.named(id, "Hero stone")) plant(kit, s, 540, y.near, 40);
+      const stone = kit.node(kit.named(id, "Hero stone")[0]);
+      for (const gh of kit.named(id, "Ghost")) kit.patch(gh, { x: Math.min(ghostMax, stone.x + stone.width - 70), y: stone.y - 150 });
+    };
+    const smaller = (kit, id, w, deceased, epitaph) => {
+      for (const s of kit.named(id, "Hero stone")) recutStone(kit, s, "round", w, { pad: 40 });
+      for (const [name, style] of [["Here lies", "Lies 26"], ["Deceased", deceased], ["Dates", "Dates 34"], ["Epitaph", epitaph]]) for (const n of kit.named(id, name)) kit.restyle(n, style);
+    };
+    stand(k, sheet, g, 745, [150, 858]);
+    if (swapTimes(swaps[0]).at(-1).gone > DURATION + 40) throw new Error("halloween reel: the captions run past the music");
+    for (const m of k.named(sheet, "Moon")) k.animate(m, "translateY", [{ t: 0, v: 150, ease: ease.out("cubic") }, { t: DURATION, v: 0 }]);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.variants(sheet, feedVariants({ post: 56, portrait: 72 }, {
+      post: (kit, id) => {
+        for (const n of kit.named(id, "Foot")) kit.patch(n, { itemSpacing: 16 });
+        for (const n of kit.named(id, "Caption")) kit.restyle(n, "Caption 32");
+        smaller(kit, id, 540, "Deceased 36", "Epitaph 26");
+        const y = yard(1080, 800, void 0, 500, { clouds: [{ x: 250, y: 190, w: 460 }, { x: 900, y: 150, w: 300 }], bats: [{ x: 250, y: 130, size: 84 }, { x: 930, y: 60, size: 60 }, { x: 60, y: 60, size: 44 }, { x: 108, y: 300, size: 52 }] });
+        fitGraveyard(kit, id, y);
+        stand(kit, id, y);
+      },
+      portrait: (kit, id) => {
+        smaller(kit, id, 600, "Deceased 44", "Epitaph 30");
+        const y = yard(1350, 1010, void 0, 620, { bats: [{ x: 250, y: 210, size: 84 }, { x: 930, y: 150, size: 60 }, { x: 90, y: 130, size: 44 }, { x: 108, y: 370, size: 52 }] });
+        fitGraveyard(kit, id, y);
+        stand(kit, id, y);
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  halloween_graveyard_reel_default
+};

package/dist/chunks/chunk-PZY75VAV.js

@@ -0,0 +1,187 @@
+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,
+  wideCut
+} from "./chunk-YXFPVZM3.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-3YQOE5KZ.js";
+import {
+  score
+} from "./chunk-KHGNV7UQ.js";
+import {
+  hide,
+  patchAll,
+  restyle
+} from "./chunk-LWSZATOL.js";
+import {
+  shadow
+} from "./chunk-YORIY3BT.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  box
+} from "./chunk-EJLCQVQK.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/saas-vs-comparison.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = score("hiphop");
+var { beat } = S;
+var ROWS = [
+  ["Stock synced across channels", "Shopify, Etsy, Amazon, POS", "Copy-paste, nightly", "Live, on every sale"],
+  ["Low-stock alerts", "Per SKU, per warehouse", "You notice. Maybe.", "Before you run out"],
+  ["Purchase orders", "Supplier, quantity, lead time", "A second file", "One click, from an alert"],
+  ["Audit trail", "Who changed what, and when", "\u201CWho edited B14?\u201D", "Every edit, named"],
+  ["Time to set up", "From sign-up to first sync", "Two weeks", "Ten minutes"]
+];
+var FIRST = 3;
+var EVERY = 2;
+var W = { what: 306, old: 226 };
+var CELLS = { step: 180, stepY: 60, weight: 2, opacity: 1, name: "Cells" };
+var swaps = [captionSwap(["Stock that syncs itself.", "Alerts before you\u2019re out.", "Orders in one click.", "Set up in minutes."], beat(3), S.duration - 30)];
+var counts = [{ layer: "Score", at: beat(FIRST + 0.5 - EVERY), duration: beat(EVERY) * ROWS.length, tick: beat(EVERY), counter: { from: 0, to: ROWS.length, suffix: " \xB7 Spreadsheet 0" } }];
+var cues = [
+  { layer: "Kicker", preset: "fade-in", at: 0, params: { duration: 250 } },
+  { layer: "Hook", preset: "words-in", at: 0, params: { duration: 420, amount: 50 } },
+  { layer: "Table", preset: "rise-in", at: beat(1), params: { duration: 500 } },
+  { layer: "Caption strip", preset: "fade-in", at: beat(3) - 200, params: { duration: 200 } },
+  { layer: "Row", preset: "fade-in", at: beat(FIRST), params: { duration: 260 }, stagger: { delay: beat(EVERY) } },
+  { layer: "Cross", preset: "pop-in", at: beat(FIRST), params: { duration: 300 }, stagger: { delay: beat(EVERY) } },
+  { layer: "Tick", preset: "pop-in", at: beat(FIRST + 0.5), params: { duration: 320, amount: 0.3 }, stagger: { delay: beat(EVERY) } },
+  { layer: "Foot", preset: "fade-in", at: beat(FIRST), params: { duration: 300 } },
+  { layer: "Call", preset: "pop-in", at: beat(13), params: { duration: 420 } },
+  { layer: "Call", preset: "pulse", at: beat(14.5), params: { duration: 600, amount: 0.05 } }
+];
+var saas_vs_comparison_default = defineTemplate({
+  id: "motion-saas-vs-comparison",
+  meta: {
+    name: "SaaS short: vs comparison table",
+    description: "An 11-second \u201Cus vs the old way\u201D reel in a data-dense look: a comparison table fills a row every two beats, a cross landing in the old way\u2019s column and a tick in the product\u2019s, while the score in the table\u2019s foot ticks up. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "comparison", "vs", "versus", "alternative", "table", "data", "enterprise", "b2b", "captions", "music", "audio", "reel", "tiktok", "shorts"],
+    platforms: ["linkedin", "x", "tiktok", "instagram", "youtube"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "ad", "video"],
+    useCases: ["comparison", "launch", "pitch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit("SaaS short: vs comparison table", preset("ig-story"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F4F6F9", text: "#0F1B2D", onPaper: "#42526B", primary: "#0B7A75", onPrimary: "#FFFFFF", card: "#FFFFFF", onCard: "#0F1B2D" },
+      { name: "Shelfwise", hook: "Shelfwise vs the spreadsheet.", site: "shelfwise.example" }
+    );
+    k.palette({ head: "#0F1B2D", onHead: "#E8EEF6", line: "#D3DAE5", zebra: "#F2F5F9", cardMuted: "#55657D", yes: "#0B7A75", yesTint: "#DDF2F0", no: "#B93227", noTint: "#FBE7E4", shade: "#27384F" });
+    const mono = { fontFamily: "JetBrains Mono" };
+    k.textStyle("Hook 88", { size: 88, fontWeight: 800, letterSpacing: -3.6, lineHeight: 88 });
+    k.textStyle("Hook 76", { size: 76, fontWeight: 800, letterSpacing: -3, lineHeight: 78 });
+    k.textStyle("Hook 56", { size: 56, fontWeight: 800, letterSpacing: -2, lineHeight: 60 });
+    k.textStyle("Ref 20", { ...mono, size: 20, fontWeight: 600, letterSpacing: 1.2, lineHeight: 26, textCase: "UPPER" });
+    k.textStyle("Head 20", { size: 20, fontWeight: 700, letterSpacing: 1.4, lineHeight: 26, textCase: "UPPER" });
+    k.textStyle("What 28", { size: 28, fontWeight: 700, letterSpacing: -0.7, lineHeight: 32 });
+    k.textStyle("Detail 20", { size: 20, fontWeight: 500, lineHeight: 26 });
+    k.textStyle("Cell 23", { size: 23, fontWeight: 600, letterSpacing: -0.4, lineHeight: 28 });
+    k.textStyle("Score 22", { ...mono, size: 22, fontWeight: 700, letterSpacing: -0.2, lineHeight: 28, fontFeatures: { tnum: 1 } });
+    k.textStyle("Caption 40", { size: 40, fontWeight: 800, letterSpacing: -1, lineHeight: 48 });
+    k.textStyle("Button 32", { size: 32, fontWeight: 700, letterSpacing: -0.5, lineHeight: 40 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "Import your sheet: shelfwise.example", pad: [20, 32], radius: 8 });
+    const sheet = reelSheet(k, S, { name: "vs comparison", gap: 22 });
+    lineGrid(k, sheet, k.tint("text", 0.07), CELLS);
+    const H = [0.5, 0.62, 0.44, 0.7, 0.81, 0.58, 0.36, 0.49, 0.66, 0.9, 0.74, 0.52, 0.4, 0.31, 0.57, 0.69, 0.84, 0.95, 0.63, 0.47];
+    const stock = [], low = [];
+    for (let i = 0; i < 52; i++) {
+      const h = Math.round(300 * H[i * 7 % H.length]);
+      (h < 135 ? low : stock).push(box(i * 18, 320 - h, 12, h));
+    }
+    k.vector(sheet, 936, 320, stock, "line", { name: "Stock levels", absolute: { x: 140, y: 1560 } });
+    k.vector(sheet, 936, 320, low, "no", { name: "Stock low", absolute: { x: 140, y: 1560 }, opacity: 0.55 });
+    k.rect(sheet, 940, 3, "shade", { name: "Stock axis", absolute: { x: 140, y: 1880 }, opacity: 0.4 });
+    k.text(sheet, "Comparison \xB7 Ref SW-VS-01 \xB7 {{brand.name}}", { style: "Ref 20", color: "onPaper", name: "Kicker" });
+    k.text(sheet, "{{brand.hook}}", { style: "Hook 88", color: "text", name: "Hook" });
+    const table = k.stack(sheet, { fill: "card", radius: 10, clip: true, stroke: { color: "line", width: 2, align: "INSIDE" }, effects: [shadow(k, "shade", 0.14, 16, 40)], name: "Table" });
+    const cols = (parent, name, o) => k.stack(parent, { direction: "HORIZONTAL", align: "CENTER", gap: 14, fill: o.fill, padding: { top: o.pad, right: 22, bottom: o.pad, left: 22 }, name });
+    const head = cols(table, "Head", { fill: "head", pad: 14 });
+    k.text(head, "Capability", { style: "Head 20", color: "onHead", width: W.what, name: "Head what" });
+    k.text(head, "Spreadsheet", { style: "Head 20", color: "onHead", width: W.old, name: "Head old" });
+    k.text(head, "{{brand.name}}", { style: "Head 20", color: "onHead", name: "Head new" });
+    const mark = (parent, yes) => {
+      const m = k.stack(parent, { width: 30, height: 30, name: yes ? "Tick" : "Cross" });
+      k.ellipse(m, 30, yes ? "yes" : "no", { name: "Mark ground", absolute: { x: 0, y: 0 } });
+      const paths = yes ? [{ closed: false, points: [{ x: 0, y: 7 }, { x: 5, y: 12 }, { x: 14, y: 0 }] }] : [{ closed: false, points: [{ x: 0, y: 0 }, { x: 11, y: 11 }] }, { closed: false, points: [{ x: 11, y: 0 }, { x: 0, y: 11 }] }];
+      k.vector(m, yes ? 14 : 11, yes ? 12 : 11, paths, "card", { name: "Mark", strokeWidth: 3.5, absolute: yes ? { x: 8, y: 9 } : { x: 9.5, y: 9.5 } });
+    };
+    ROWS.forEach(([what, detail, old, now], i) => {
+      const row = cols(table, "Row", { fill: i % 2 ? "zebra" : "card", pad: 18 });
+      const left = k.stack(row, { width: W.what, gap: 2, name: "What" });
+      k.text(left, what, { style: "What 28", color: "onCard", name: "What title" });
+      k.text(left, detail, { style: "Detail 20", color: "cardMuted", name: "What detail" });
+      const was = k.stack(row, { direction: "HORIZONTAL", width: W.old, gap: 10, align: "CENTER", name: "Old way" });
+      mark(was, false);
+      k.text(was, old, { style: "Cell 23", color: "cardMuted", name: "Old words" });
+      const is = k.stack(row, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "New way" });
+      mark(is, true);
+      k.text(is, now, { style: "Cell 23", color: "onCard", name: "New words" });
+    });
+    k.rect(table, "FILL", 2, "line", { name: "Foot rule" });
+    const foot = k.stack(table, { direction: "HORIZONTAL", align: "CENTER", justify: "SPACE_BETWEEN", padding: { top: 14, right: 22, bottom: 14, left: 22 }, name: "Foot" });
+    const tally = k.stack(foot, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Tally" });
+    k.text(tally, "{{brand.name}}", { style: "Score 22", color: "onCard", autoWidth: true, name: "Score name" });
+    k.text(tally, "5 \xB7 Spreadsheet 0", { style: "Score 22", color: "onCard", name: "Score" });
+    k.text(foot, "5 of 5 rows", { style: "Ref 20", color: "cardMuted", autoWidth: true, name: "Row count" });
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 40", fill: "head", ink: "onHead", radius: 8, pad: [14, 22] });
+    k.instance(sheet, "Button", { Label: "Import your sheet: {{brand.site}}" }, { name: "Call" });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    const tableHeight = k.finish().nodes[table].height;
+    k.variants(sheet, [...reelCuts({ post: 40, portrait: 80 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 14, counterAxisSpacing: 14, padding: { top: 36, right: 140, bottom: 36, left: 140 } });
+        hide(kit, id, ["Kicker", "Stock levels", "Stock low", "Stock axis"]);
+        restyle(kit, id, "Hook", "Hook 56");
+        patchAll(kit, id, "Row", { padding: { top: 12, right: 22, bottom: 12, left: 22 } });
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { padding: { top: 70, right: 140, bottom: 70, left: 140 } });
+        hide(kit, id, ["Stock levels", "Stock low", "Stock axis"]);
+      }
+    }), wideCut(660, (kit, id, right) => {
+      const scale = right.width / COLUMN;
+      redrawLines(kit, id, CELLS);
+      restyle(kit, id, "Hook", "Hook 76");
+      hide(kit, id, ["Stock levels", "Stock low", "Stock axis"]);
+      float(kit, id, "Table", right.x, right.y + Math.round((right.height - tableHeight * scale) / 2), { scale, width: COLUMN });
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  saas_vs_comparison_default
+};

package/dist/chunks/chunk-Q2SI4IIA.js

@@ -0,0 +1,86 @@
+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 {
+  art
+} from "./chunk-2LKE64PM.js";
+import {
+  art as art2,
+  businessCard,
+  cardParts,
+  contactLines
+} from "./chunk-7D65RHAF.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/print/printshop-card-photographer.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var corners = (W, H, m, len) => [
+  [[m, m + len], [m, m], [m + len, m]],
+  [[W - m - len, m], [W - m, m], [W - m, m + len]],
+  [[W - m, H - m - len], [W - m, H - m], [W - m - len, H - m]],
+  [[m + len, H - m], [m, H - m], [m, H - m - len]]
+].map((pts) => ({ closed: false, points: pts.map(([x, y]) => ({ x, y })) }));
+var printshop_card_photographer_default = defineTemplate({
+  id: "print-printshop-card-photographer",
+  meta: {
+    name: "Photographer business card",
+    description: "A card for a photographer that is mostly photograph: one picture to the bleed on the front with viewfinder corner marks and the name on a small white tab; a white back with the name in a serif, the work taken, the brand kit\u2019s number, email and website, and a strip of frames running off the edge like a contact sheet. Every picture is an image to replace. 85 \xD7 55 mm and US 3.5 \xD7 2 in, two-sided",
+    category: "business-card",
+    tags: ["business card", "photographer", "photography", "wedding photographer", "portrait", "photo", "full bleed", "editorial", "contact sheet", "two-sided", "print"],
+    platforms: ["print"],
+    formats: ["card"],
+    useCases: ["brand-intro", "portfolio"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = businessCard("Photographer business card", {}, (k2) => {
+      k2.quantizeGeometry = true;
+      k2.brand(
+        { paper: "#FFFFFF", text: "#111111", onPaper: "#5F5F5F", primary: "#111111", onPrimary: "#FFFFFF", accent: "#E0452B" },
+        { name: "Mara Quint", tagline: "Weddings, portraits and editorial", email: "mara@maraquint.com", phone: "+1 (617) 555-0193", website: "maraquint.com", address: "Boston, MA" }
+      );
+      k2.palette({ mark: "#FFFFFF", film: "#1A1A1A" });
+      k2.textStyle("Tab 10", { ...SERIF, size: 10, fontWeight: 600, lineHeight: 13 });
+      k2.textStyle("Frame 8", { ...MONO, size: 8, fontWeight: 500, letterSpacing: 0.4, lineHeight: 10 });
+      k2.textStyle("Name 19", { ...SERIF, size: 19, fontWeight: 400, letterSpacing: -0.3, lineHeight: 22 });
+      k2.textStyle("Work 8", { size: 8, fontWeight: 600, letterSpacing: 1.4, lineHeight: 11 });
+      k2.textStyle("Label 8", { ...MONO, size: 8, fontWeight: 500, lineHeight: 12 });
+      k2.textStyle("Value 8.5", { size: 8.5, fontWeight: 400, lineHeight: 12 });
+      cardParts(k2, { name: "Name 19", title: "Work 8", nameColor: "text", titleColor: "onPaper", label: "Label 8", value: "Value 8.5", labelColor: "onPaper", valueColor: "text", gap: 7, labelWidth: 10, personGap: 4 });
+    }, (k2, { front, back, size }) => {
+      const { W, H, B } = size;
+      k2.flowSheet(front, 0, 30, "primary", "MAX", "MIN");
+      const img = k2.image(front, art("photo-00"), W + B * 2, H + B * 2, { name: "Photograph" });
+      k2.patch(img, { layoutPositioning: "ABSOLUTE", x: -B, y: -B });
+      art2(k2, front, W, H, B, corners(W, H, 12, 14), "mark", { name: "Viewfinder", strokeWidth: 1.25 });
+      const tab = k2.stack(front, { direction: "HORIZONTAL", gap: 8, width: "HUG", padding: { top: 6, right: 9, bottom: 6, left: 9 }, fill: "paper", align: "CENTER", name: "Name tab" });
+      k2.text(tab, "{{brand.name}}", { style: "Tab 10", color: "text", autoWidth: true, name: "Name" });
+      k2.text(tab, "FRAME 24A", { style: "Frame 8", color: "onPaper", autoWidth: true, name: "Frame" });
+      k2.flowSheet(back, 10, { top: 22, right: 22, bottom: 20, left: 22 }, "paper", "SPACE_BETWEEN", "MIN");
+      const fw = 58, fh = 39;
+      const strip = k2.stack(back, { gap: 4, padding: { top: 6, right: 6, bottom: 6, left: 6 }, fill: "film", width: fw + 12, height: H + B * 2, clip: true, justify: "CENTER", name: "Contact strip", absolute: { x: W - fw - 12 - 18, y: -B } });
+      for (const id of ["photo-08", "photo-10", "photo-04", "photo-02", "photo-06", "photo-00"]) k2.image(strip, art(id), fw, fh, { name: "Frame" });
+      k2.instance(back, "Person", { Name: "{{brand.name}}", Title: "WEDDINGS & PORTRAITS" }, { name: "Person" });
+      contactLines(k2, back, ["T", "E", "W"], 1);
+    });
+    return k.finish();
+  }
+});
+
+export {
+  printshop_card_photographer_default
+};