@popcraft/kit 0.44.1 → 0.45.0

package/dist/chunks/chunk-LLX5YWST.js

@@ -0,0 +1,104 @@
+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 {
+  coverBorder,
+  coverGround,
+  gantry,
+  gantryBox,
+  layPad,
+  moon,
+  pad,
+  place,
+  planet,
+  planetBox,
+  rocket,
+  spaceBrand,
+  standRocket,
+  starfield
+} from "./chunk-USIWMRYW.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-5SHX6DFE.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-5OTEBTMU.js";
+import {
+  pill
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/email/space-opera-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 5e3;
+var counts = [{ layer: "Clock", at: 0, duration: 5e3, counter: { from: 59, to: 54, prefix: "T\u201371:59:", suffix: " and counting", value: 59 }, tick: 1e3 }];
+var cues = [{ layer: "Button", preset: "pulse", at: 3e3, params: { duration: 800, amount: 0.06 } }];
+var space_opera_header_default = defineTemplate({
+  id: "email-space-opera-header",
+  meta: {
+    name: "Space opera T-minus email header (animated GIF)",
+    description: "A 600 \xD7 300 animated header for a launch-notice email: \u201CT-minus 3 days\u201D, the date and the button are all on the first frame (for Outlook), beside a rocket on its pad under a ringed planet; then the clock under the headline ticks real seconds, the gantry\u2019s beacon blinks and the floodlights breathe \u2014 a five-second GIF loop in rust, mustard, teal and cream",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "space opera", "space", "rocket", "countdown", "launch", "retro", "pulp", "saas"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["launch", "countdown", "announcement", "newsletter"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Space opera T-minus email header", HEADER);
+    k.quantizeGeometry = true;
+    spaceBrand(k, { offer: "T-minus\n3 days." });
+    k.textStyle("Eyebrow 12", { size: 12, fontWeight: 700, letterSpacing: 2.2, lineHeight: 16, textCase: "UPPER" });
+    k.textStyle("Offer 42", { ...SERIF, size: 42, fontWeight: 900, letterSpacing: -1.4, lineHeight: 42 });
+    k.textStyle("Clock 13", { ...MONO, size: 13, fontWeight: 700, lineHeight: 18 });
+    k.textStyle("Account 14", { size: 14, fontWeight: 500, lineHeight: 20 });
+    k.textStyle("Button 14", { size: 14, fontWeight: 800, lineHeight: 20 });
+    pill(k, "Button pill", { fill: "primary", ink: "onPrimary", style: "Button 14", label: "Hold my seat", pad: [9, 20], radius: 5 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 8, { top: 22, right: 306, bottom: 22, left: 28 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    const view = k.frame(sheet, { x: 314, y: 14, width: 272, height: 272 }, { name: "View", clip: true });
+    coverGround(k, view, 272, 272, 10);
+    starfield(k, view, { w: 272, h: 272, loopMs: DURATION, density: 420, u: 0.5 });
+    moon(k, view, 30, 150, 18);
+    const pl = planet(k, view, { r: 62 });
+    place(k, pl, planetBox({ r: 62 }), 206, 86);
+    const PAD = { w: 272, depth: 34, u: 0.34 };
+    layPad(k, pad(k, view, { ...PAD, cx: 132, loopMs: DURATION }), PAD, 240);
+    const g = gantry(k, view, { h: 190, loopMs: DURATION });
+    place(k, g, gantryBox({ h: 190 }), 132 - 17 - gantryBox({ h: 190 }).w / 2, 237 - 95);
+    const rk = rocket(k, view, { h: 180, loopMs: DURATION });
+    standRocket(k, rk, { h: 180 }, 132, 237);
+    coverBorder(k, view, 272, 272, 10, 2);
+    k.text(sheet, "Launch notice \xB7 Mon 5 Oct", { style: "Eyebrow 12", color: "onPaper", name: "Eyebrow" });
+    k.text(sheet, "{{brand.offer}}", { style: "Offer 42", color: "text", name: "Offer" });
+    k.text(sheet, "T\u201371:59:59 and counting", { style: "Clock 13", color: "text", name: "Clock" });
+    k.text(sheet, "{{brand.name}} 1.0 lifts off on Monday. Your seat in mission control is held until then.", { style: "Account 14", color: "onPaper", name: "Account" });
+    k.instance(sheet, "Button pill", { Label: "Hold my seat" }, { name: "Button" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  space_opera_header_default
+};

package/dist/chunks/chunk-LNE4PXQ6.js

@@ -0,0 +1,93 @@
+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,
+  leaf,
+  sizes,
+  stripes
+} from "./chunk-TA54L6LN.js";
+import {
+  SERIF
+} from "./chunk-5OTEBTMU.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/print/printshop-flyer-yard-work.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var printshop_flyer_yard_work_default = defineTemplate({
+  id: "print-printshop-flyer-yard-work",
+  meta: {
+    name: "Yard work rack card",
+    description: "A DL rack card for a local yard-work, lawn-mowing or odd-jobs service: a freshly mown lawn in light and dark stripes with autumn leaves blowing across, the offer in heavy white capitals, the jobs and prices as a price list, when they work and the number on a big green tag. The price rows are one component. 99 \xD7 210 mm",
+    category: "flyer",
+    tags: ["flyer", "rack card", "dl", "yard work", "lawn mowing", "leaf raking", "odd jobs", "gardening", "handyman", "student", "local service", "print"],
+    platforms: ["print"],
+    formats: ["flyer"],
+    useCases: ["announcement", "pricing"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Yard work rack card", preset("dl-flyer"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FBF4E4", text: "#1F2A1A", onPaper: "#4A5240", primary: "#2E7D32", onPrimary: "#FFFFFF", accent: "#F28C28", onAccent: "#1F2A1A", lawn: "#2B6A2F", onLawn: "#FFFFFF" },
+      { name: "Sam & Theo\u2019s Yard Crew", phone: "(614) 555-0187", email: "samandtheo.yards@gmail.example", address: "Clintonville and Beechwold" }
+    );
+    k.palette({ mown: "#357A39", red: "#D9472B", orange: "#F28C28", yellow: "#F2C230", brown: "#A0522D" });
+    k.textStyle("Title 44", { size: 44, fontWeight: 900, letterSpacing: -1.6, lineHeight: 42 });
+    k.textStyle("Kicker 10", { size: 10, fontWeight: 800, letterSpacing: 2, lineHeight: 13 });
+    k.textStyle("Job 13", { size: 13, fontWeight: 700, lineHeight: 17 });
+    k.textStyle("Price 13", { size: 13, fontWeight: 900, lineHeight: 17 });
+    k.textStyle("Note 11", { ...SERIF, size: 11.5, fontWeight: 400, fontStyle: "italic", lineHeight: 16 });
+    k.textStyle("Phone 26", { size: 26, fontWeight: 900, letterSpacing: -0.8, lineHeight: 30 });
+    k.textStyle("Small 10", { size: 10, fontWeight: 600, lineHeight: 14 });
+    k.component("Job", { width: 318, gap: 6, props: { Job: "Mow, edge & blow", Price: "$35" } }, (id) => {
+      const row = k.stack(id, { direction: "HORIZONTAL", gap: 8, align: "MAX", name: "Row" });
+      k.propText(row, "Job", { style: "Job 13", color: "text", width: "FILL" });
+      k.propText(row, "Price", { style: "Price 13", color: "text", autoWidth: true });
+      k.rect(id, "FILL", 1, "onPaper", { name: "Rule" });
+    });
+    sizes(k, ["dl-flyer"], ({ sheet, W, H, B }) => {
+      const P = 28, LAWN = 330;
+      k.flowSheet(sheet, 12, { top: 40, right: P, bottom: 30, left: P }, "paper", "MIN", "MIN");
+      art(k, sheet, W, H, B, [{ closed: true, points: [{ x: -B, y: -B }, { x: W + B, y: -B }, { x: W + B, y: LAWN }, { x: -B, y: LAWN }] }], "lawn", { name: "Lawn" });
+      art(k, sheet, W, H, B, stripes(-B, -B, W + B, LAWN, 64, 32, 0.32), "mown", { name: "Mowing stripes" });
+      const leaves = [[W * 0.12, LAWN - 30, 26, 20, "red"], [W * 0.38, LAWN - 12, 22, -40, "yellow"], [W * 0.7, LAWN - 40, 30, 60, "orange"], [W * 0.9, LAWN - 8, 20, 140, "red"], [W * 0.55, LAWN - 70, 24, 200, "orange"], [W * 0.2, LAWN - 64, 18, -110, "yellow"]];
+      for (const role of ["red", "orange", "yellow"]) art(k, sheet, W, H, B, leaves.filter((l) => l[4] === role).map(([x, y, s, d]) => leaf(x, y, s, s * 0.6, d)), role, { name: `Leaves, ${role}` });
+      const head = k.stack(sheet, { gap: 10, height: LAWN - 40 - 48, justify: "MAX", name: "Head" });
+      k.text(head, "MOWING \xB7 LEAVES \xB7 GUTTERS", { style: "Kicker 10", color: "onLawn", width: "FILL", name: "Kicker" });
+      k.text(head, "Yard work\ndone right,\ndone this\nweekend.", { style: "Title 44", color: "onLawn", width: "FILL", name: "Title" });
+      const sp0 = k.stack(sheet, { height: 34, name: "Gap" });
+      void sp0;
+      k.text(sheet, "JOBS & PRICES", { style: "Kicker 10", color: "onPaper", width: "FILL", name: "Jobs title" });
+      const jobs = k.stack(sheet, { gap: 8, name: "Jobs" });
+      for (const [j, p] of [["Mow, edge & blow", "$35"], ["Rake & bag leaves", "$30/hr"], ["Clear the gutters", "$60"], ["Weed the beds", "$25/hr"], ["Snow, when it comes", "ask"]]) k.instance(jobs, "Job", { Job: j, Price: p }, { width: "FILL", name: "Job" });
+      k.text(sheet, "Two brothers, 17 and 19, saving for college. We bring our own mower and we clean up after.", { style: "Note 11", color: "onPaper", width: "FILL", name: "About" });
+      const sp = k.stack(sheet, { name: "Space" });
+      k.patch(sp, { layoutSizingVertical: "FILL" });
+      const tag = k.stack(sheet, { gap: 2, padding: 16, radius: 10, fill: "primary", name: "Call" });
+      k.text(tag, "CALL OR TEXT SAM", { style: "Kicker 10", color: "onPrimary", width: "FILL", name: "Call title" });
+      k.text(tag, "{{brand.phone}}", { style: "Phone 26", color: "onPrimary", width: "FILL", name: "Phone" });
+      k.text(tag, "After school and weekends \xB7 {{brand.address}}", { style: "Small 10", color: "onPrimary", width: "FILL", name: "When" });
+    });
+    return k.finish();
+  }
+});
+
+export {
+  printshop_flyer_yard_work_default
+};

package/dist/chunks/chunk-LOAPUC7E.js

@@ -0,0 +1,231 @@
+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 {
+  KONTOR,
+  drawLine,
+  extend,
+  fitGrid,
+  glideIn,
+  grot,
+  kontorWindow,
+  laneTable,
+  lockup,
+  routeMap,
+  rule,
+  swissBrand,
+  swissGrid
+} from "./chunk-T22A2IOW.js";
+import {
+  camera,
+  float,
+  reelCuts,
+  reelSheet,
+  section,
+  wideCut
+} from "./chunk-7LZFBGFD.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-WO4SSPCC.js";
+import {
+  cutOn
+} from "./chunk-FUYBBHPV.js";
+import {
+  hide,
+  restyle
+} from "./chunk-T3XFQJUI.js";
+import {
+  pill
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  ease
+} from "./chunk-6VIYCRKB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/motion/style-swiss-launch-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = section("launch", 4, 8);
+var { beat } = S;
+var NAME = "Swiss SaaS launch reel";
+var WIN = { w: 800, h: 560 };
+var GRID = { cols: 6, margin: 140, gutter: 24, row: 120, top: 250 };
+var WATCH = beat(1) + 100;
+var FLAG = beat(8);
+var REROUTE = beat(12);
+var DROP = beat(16);
+var CALL = beat(24);
+var FIELD_Y = 1468;
+var SHOTS = [
+  { t: FLAG + beat(1), duration: 420, zoom: 1.4, x: 230, y: 310 },
+  { t: DROP, duration: 420, zoom: 1 }
+];
+var cues = [
+  cutOn("Top row", 120),
+  { layer: "Hook side", preset: "slide-in", at: 200, params: { direction: "down", duration: 420 } },
+  { layer: "Step cell", preset: "slide-in", at: beat(1) + 120, stagger: { delay: 90, order: "selection" }, params: { direction: "left", duration: 380 } },
+  { layer: "Kpi", preset: "slide-in", at: WATCH + 250, stagger: { delay: 80, order: "selection" }, params: { direction: "up", duration: 380 } },
+  { layer: ["Lane head", "Late row", "Lane row"], preset: "slide-in", at: beat(4), stagger: { delay: 110, order: "selection" }, params: { direction: "left", duration: 380 } },
+  cutOn("Station", beat(3), 120),
+  { layer: "Flag", preset: "wipe-in", at: FLAG + beat(1) + 200, params: { direction: "right", duration: 360 } },
+  { layer: "Late forecast", preset: "flash", at: FLAG, params: { duration: 500, ease: ease.hold } },
+  { layer: "Call row", preset: "slide-in", at: CALL, params: { direction: "left", duration: 450 } }
+];
+var counts = [
+  { layer: "On time figure", at: DROP, duration: beat(4), counter: { from: KONTOR.before, to: KONTOR.after, decimals: 1, suffix: "%" } }
+];
+var swaps = [captionSwap(["Late shipments cost you customers.", "Kontor sees them coming early.", "Forty-eight hours before the delay.", "Reroute, and arrive on time."], 0, S.duration - 30, { stagger: 50, in: 220, out: 160, rise: 0 })];
+var style_swiss_launch_reel_default = defineTemplate({
+  id: "motion-saas-style-swiss-launch-reel",
+  meta: {
+    name: NAME,
+    description: "A 16-second launch video in the Swiss typographic style: a giant 48h slides into the first column, then a freight analytics window works on a visible grid. A route diagram draws itself, the late stretch turns red, the camera cuts in to the flag, a rail reroute draws in dashes and the on-time rate counts to 96.1 percent on the drop. One signal red, rules that extend, blocks that slide on the grid, music and burned-in captions. 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "swiss", "international typographic style", "grid", "minimal", "b2b", "analytics", "logistics", "launch", "reel", "counter", "diagram", "captions", "music", "audio", "tiktok", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "video"],
+    useCases: ["launch", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    swissBrand(k, {});
+    grot(k, "Brand 30", 30, { weight: 700, lead: 1.1, spacing: -0.02 });
+    grot(k, "Label 22", 22, { weight: 500, lead: 1.3 });
+    grot(k, "Label 24", 24, { weight: 600, lead: 1.3 });
+    grot(k, "Giant 330", 310, { weight: 700, lead: 0.84, spacing: -0.07 });
+    grot(k, "Giant 230", 230, { weight: 700, lead: 0.84, spacing: -0.07 });
+    grot(k, "Side 30", 30, { weight: 500, lead: 1.2, spacing: -0.01 });
+    grot(k, "Ui 21", 21, { weight: 500, lead: 1.25 });
+    grot(k, "Ui head 18", 18, { weight: 600, lead: 1.25 });
+    grot(k, "Figure 46", 46, { weight: 700, lead: 1, spacing: -0.04 });
+    grot(k, "Flag 18", 18, { weight: 700, lead: 1.2 });
+    grot(k, "Caption 34", 34, { weight: 600, lead: 1.3, spacing: -0.01 });
+    grot(k, "Button 30", 30, { weight: 700, lead: 1.2 });
+    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 30", label: "Start free for 14 days", pad: [20, 28], radius: 0 });
+    const sheet = reelSheet(k, S, { name: "Launch reel", gap: 18, justify: "MIN" });
+    swissGrid(k, sheet, GRID);
+    k.rect(sheet, 1080, 1920 - FIELD_Y, "primary", { name: "Field", absolute: { x: 0, y: FIELD_Y } });
+    const big = routeMap(k, sheet, { w: 800, h: 420, pad: 30, weight: 14, ink: "onPrimary", late: "text", ground: "primary", labels: false, name: "Field route", absolute: { x: 140, y: FIELD_Y + 30 } });
+    const top = k.stack(sheet, { gap: 14, name: "Top row" });
+    const bar = k.stack(top, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, bar, { size: 30, style: "Brand 30" });
+    k.text(bar, `${KONTOR.version}  ${KONTOR.feature}`, { style: "Label 22", color: "text", autoWidth: true, name: "Version" });
+    const topRule = rule(k, top, "FILL", { weight: 3, name: "Top rule" });
+    const hook = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, align: "MAX", name: "Hook" });
+    const giant = k.text(hook, "48h", { style: "Giant 330", color: "text", autoWidth: true, name: "Giant" });
+    const side = k.stack(hook, { gap: 12, width: 186, padding: { top: 0, right: 0, bottom: 26, left: 0 }, name: "Hook side" });
+    const tag = k.stack(side, { direction: "HORIZONTAL", width: "HUG", fill: "primary", padding: { top: 4, right: 10, bottom: 4, left: 10 }, name: "Hook tag" });
+    k.text(tag, KONTOR.feature, { style: "Label 24", color: "onPrimary", autoWidth: true, name: "Hook kicker" });
+    k.text(side, "before a shipment is late, Kontor tells you.", { style: "Side 30", color: "text", name: "Hook line" });
+    const steps = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, height: 52, name: "Steps" });
+    for (const [no, label] of [["01", "Watch"], ["02", "Flag"], ["03", "Reroute"]]) {
+      const c = k.stack(steps, { gap: 10, width: "FILL", name: "Step cell" });
+      rule(k, c, "FILL", { weight: 2, name: "Step rule" });
+      const r = k.stack(c, { direction: "HORIZONTAL", gap: 14, name: "Step words" });
+      k.text(r, no, { style: "Label 22", color: "onPaper", autoWidth: true, name: "Step no" });
+      k.text(r, label, { style: "Label 22", color: "text", autoWidth: true, name: "Step label" });
+    }
+    const cellW = Math.round((800 - 48) / 3);
+    const marker = k.rect(steps, cellW, 6, "primary", { name: "Step marker", absolute: { x: 0, y: -2 } });
+    const stage = k.stack(sheet, { width: WIN.w, height: WIN.h, clip: true, name: "Stage" });
+    const cam = k.frame(stage, { x: 0, y: 0, width: WIN.w, height: WIN.h }, { name: "Camera" });
+    const w = kontorWindow(k, cam, { w: WIN.w, h: WIN.h, title: "Lanes, week 40", right: "Forecast 48 h", style: "Ui head 18", absolute: { x: 0, y: 0 }, pad: 26, gap: 18 });
+    const kpis = k.stack(w.body, { direction: "HORIZONTAL", gap: 24, name: "Kpis" });
+    for (const [label, value, name] of [["On time, 30 days", `${KONTOR.after}%`, "On time figure"], ["Lanes", "1,240", "Lanes figure"], ["Flagged today", "3", "Flagged figure"]]) {
+      const c = k.stack(kpis, { gap: 6, width: name === "On time figure" ? 260 : "FILL", name: "Kpi" });
+      k.text(c, label, { style: "Ui head 18", color: "cardMuted", name: "Kpi label" });
+      k.text(c, value, { style: "Figure 46", color: name === "On time figure" ? "onCard" : "onCard", width: name === "On time figure" ? 240 : "FILL", name });
+    }
+    k.rect(w.body, "FILL", 2, "onCard", { name: "Kpi rule" });
+    const split = k.stack(w.body, { direction: "HORIZONTAL", gap: 24, name: "Split" });
+    const mapBox = k.stack(split, { width: 320, height: 330, name: "Map box" });
+    const map = routeMap(k, mapBox, { w: 320, h: 330, pad: 26, weight: 8, labels: "Ui head 18", name: "Route", absolute: { x: 0, y: 0 } });
+    const flag = k.stack(mapBox, { direction: "HORIZONTAL", width: "HUG", fill: "late", padding: { top: 6, right: 10, bottom: 6, left: 10 }, name: "Flag", absolute: { x: 0, y: 236 } });
+    const flagWords = k.text(flag, `${KONTOR.shipment}  +${KONTOR.slip} h`, { style: "Flag 18", color: "onPrimary", autoWidth: true, name: "Flag words" });
+    laneTable(k, split, { style: "Ui 21", head: "Ui head 18", cols: [150, 104], rowH: 52, show: ["lane", "onTime", "forecast"] });
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 34", fill: "text", ink: "paper", radius: 0, pad: [18, 24] });
+    const call = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Call row" });
+    k.instance(call, "Call", { Label: "Start free for 14 days" }, { name: "Call" });
+    k.text(call, "{{brand.site}}", { style: "Label 24", color: "text", autoWidth: true, name: "Site" });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    glideIn(k, w.win, 120, { dy: WIN.h, duration: 520 });
+    choreograph(k, sheet, { giant, topRule, marker, cellW, map, big, flagWords });
+    camera(k, cam, WIN.w, WIN.h, SHOTS);
+    k.variants(sheet, [...reelCuts({ post: 48, portrait: 60 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 16, counterAxisSpacing: 16, padding: { top: 48, right: 140, bottom: 48, left: 140 } });
+        fitGrid(kit, id, { ...GRID, top: 48 });
+        hide(kit, id, ["Field", "Field route", "Steps", "Hook side"]);
+        restyle(kit, id, "Giant", "Giant 230");
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { itemSpacing: 18, counterAxisSpacing: 18, padding: { top: 60, right: 140, bottom: 60, left: 140 } });
+        fitGrid(kit, id, { ...GRID, top: 60 });
+        hide(kit, id, ["Field", "Field route"]);
+        restyle(kit, id, "Giant", "Giant 230");
+      }
+    }), wideCut(640, (kit, id, right) => {
+      fitGrid(kit, id, { cols: 12, margin: 110, gutter: 24, row: 120, top: 80 });
+      hide(kit, id, ["Field", "Field route"]);
+      kit.patch(id, { primaryAxisAlignItems: "CENTER" });
+      for (const n of kit.named(id, "Hook")) kit.patch(n, { layoutMode: "VERTICAL", counterAxisAlignItems: "MIN" });
+      for (const n of kit.named(id, "Hook side")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 520 });
+      const scale = Math.min(right.width / WIN.w, (right.height - 76) / WIN.h);
+      const x = right.x + Math.round((right.width - WIN.w * scale) / 2);
+      float(kit, id, "Steps", x, right.y, { width: Math.round(WIN.w * scale) });
+      float(kit, id, "Stage", x, right.y + 76, { scale });
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+function choreograph(k, sheet, o) {
+  k.animate(o.giant, "translateX", [{ t: 0, v: -520, ease: ease.out("expo") }, { t: 520, v: 0, ease: ease.hold }, { t: DROP - 1, v: 0, ease: ease.out("expo") }, { t: DROP, v: -520, ease: ease.out("expo") }, { t: DROP + 520, v: 0 }]);
+  k.animate(o.giant, "text.content", [{ t: 0, v: "48h", ease: ease.hold }, { t: DROP, v: "96%" }]);
+  for (const id of k.named(sheet, "Hook kicker")) k.animate(id, "text.content", [{ t: 0, v: KONTOR.feature, ease: ease.hold }, { t: DROP, v: "Quarter 3" }]);
+  for (const id of k.named(sheet, "Hook line")) k.animate(id, "text.content", [{ t: 0, v: "before a shipment is late, Kontor tells you.", ease: ease.hold }, { t: DROP, v: "on time, up from 87 a quarter ago." }]);
+  k.animate(o.giant, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: 30, v: 1 }]);
+  extend(k, o.topRule, 80, 600);
+  const step = (i) => i * (o.cellW + 24);
+  k.animate(o.marker, "translateX", [
+    { t: FLAG, v: step(0), ease: ease.out("expo") },
+    { t: FLAG + 380, v: step(1), ease: ease.hold },
+    { t: REROUTE, v: step(1), ease: ease.out("expo") },
+    { t: REROUTE + 380, v: step(2) }
+  ]);
+  extend(k, o.marker, WATCH, 380);
+  const line = (root, name) => k.named(root, name)[0];
+  drawLine(k, line(o.map, "Road"), WATCH + 200, beat(3));
+  drawLine(k, line(o.map, "Late stretch"), FLAG, 500);
+  drawLine(k, line(o.map, "Rail"), REROUTE, beat(2));
+  k.animate(line(o.map, "Stops"), "opacity", [{ t: WATCH + 200, v: 0, ease: ease.linear }, { t: WATCH + 500, v: 1 }]);
+  for (const id of k.named(sheet, "Late forecast")) k.animate(id, "text.content", [{ t: 0, v: `+${KONTOR.slip} h`, ease: ease.hold }, { t: REROUTE + beat(2), v: "rail, on time" }]);
+  k.animate(o.flagWords, "text.content", [{ t: 0, v: `${KONTOR.shipment}  +${KONTOR.slip} h`, ease: ease.hold }, { t: REROUTE + beat(2), v: `${KONTOR.shipment}  by rail` }]);
+  drawLine(k, line(o.big, "Road"), 0, beat(6));
+  drawLine(k, line(o.big, "Late stretch"), FLAG, 600);
+  drawLine(k, line(o.big, "Rail"), REROUTE, beat(3));
+  k.animate(line(o.big, "Stops"), "opacity", [{ t: 200, v: 0, ease: ease.linear }, { t: 600, v: 1 }]);
+}
+
+export {
+  style_swiss_launch_reel_default
+};

package/dist/chunks/chunk-LPBWCWJE.js

@@ -0,0 +1,190 @@
+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 {
+  OFFER,
+  blankCoupon,
+  coupon,
+  couponBrand,
+  fitPinked,
+  fitRays,
+  heroCoupon,
+  pinked,
+  price,
+  rays,
+  scissors,
+  snip,
+  stamp,
+  sticker
+} from "./chunk-IYI4ERTY.js";
+import {
+  MONO
+} from "./chunk-5OTEBTMU.js";
+import {
+  cutOn
+} from "./chunk-FUYBBHPV.js";
+import {
+  hide,
+  patchAll,
+  restyle
+} from "./chunk-T3XFQJUI.js";
+import {
+  hardShadow
+} from "./chunk-PCZTQVV6.js";
+import {
+  feedVariants,
+  outro,
+  pill,
+  verticalPadding
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  ease
+} from "./chunk-6VIYCRKB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/motion/black-friday-coupons-last-day.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 8e3;
+var TICKS = 6;
+var CONTENT = ["Stamp", "Scissors", "Headline", "Timer", "Setup coupon", "Shop coupon", "Hero coupon", "Sticker", "Code line", "Button"];
+var FAN_AT = 1100;
+var cues = [
+  { layer: "Stamp", preset: "pop-in", at: 0, params: { duration: 260 } },
+  cutOn("Scissors", 300),
+  { layer: "Headline", preset: "drop-in", at: 150, params: { duration: 350 } },
+  { layer: "Timer", preset: "drop-in", at: 350, params: { duration: 350 } },
+  { layer: "Hero coupon", preset: "rise-in", at: 650, params: { duration: 400 } },
+  cutOn(["Shop coupon", "Setup coupon"], FAN_AT, 150),
+  { layer: "Sticker", preset: "pop-in", at: 1700, params: { duration: 300 } },
+  { layer: "Code line", preset: "fade-in", at: 1900, params: { duration: 300 } },
+  { layer: "Button", preset: "pop-in", at: 2100, params: { duration: 400 } },
+  { layer: "Timer figure", preset: "pulse", at: 3200, params: { duration: 600, amount: 0.04 } },
+  { layer: "Button", preset: "pulse", at: 5e3, params: { duration: 600, amount: 0.06 } },
+  outro(CONTENT, 6850)
+];
+var counts = [
+  // The time left: a second off every second.
+  { layer: "Timer figure", at: 1e3, duration: TICKS * 1e3, tick: 1e3, counter: { from: 59, to: 59 - TICKS, prefix: "23:59:" } }
+];
+var NAME = "Black Friday coupon last 24 hours story";
+var FAN = { w: 800, h: 416 };
+var black_friday_coupons_last_day_default = defineTemplate({
+  id: "motion-black-friday-coupons-last-day",
+  meta: {
+    name: NAME,
+    description: "The last-24-hours story for a SaaS Black Friday sale, drawn as a supermarket coupon circular: a LAST 24 HOURS rubber stamp, snipping scissors, the time left on one big yellow price-gun sticker that ticks a second at a time, and a stack of three clip-out coupons that fans out, on newsprint in flyer red. Eight seconds, looping, 9:16 with square and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "black friday", "cyber monday", "last chance", "urgency", "countdown", "timer", "sale", "saas", "coupon", "voucher", "promo code", "flyer", "story", "deadline"],
+    platforms: ["instagram", "tiktok", "facebook", "x", "linkedin"],
+    formats: ["story", "reel", "post", "portrait-post", "ad"],
+    useCases: ["countdown", "sale"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    couponBrand(k, { name: OFFER.product, site: OFFER.site, code: OFFER.code });
+    k.textStyle("Stamp 56", { ...MONO, size: 56, fontWeight: 800, letterSpacing: 3, lineHeight: 60 });
+    k.textStyle("Headline 128", { size: 128, fontWeight: 900, letterSpacing: -6, lineHeight: 112 });
+    k.textStyle("Headline 92", { size: 92, fontWeight: 900, letterSpacing: -4.4, lineHeight: 88 });
+    k.textStyle("Timer label 22", { ...MONO, size: 22, fontWeight: 800, letterSpacing: 2, lineHeight: 28 });
+    k.textStyle("Timer 150", { ...MONO, size: 150, fontWeight: 800, letterSpacing: -6, lineHeight: 150, textAlign: "CENTER", fontFeatures: { tnum: 1 } });
+    k.textStyle("Band 22", { ...MONO, size: 22, fontWeight: 800, letterSpacing: 1.4, lineHeight: 28 });
+    k.textStyle("Figure 136", { size: 136, fontWeight: 900, letterSpacing: -6, lineHeight: 126, fontFeatures: { tnum: 1 } });
+    k.textStyle("Side 26", { ...MONO, size: 26, fontWeight: 800, lineHeight: 32 });
+    k.textStyle("Fine 18", { ...MONO, size: 18, fontWeight: 600, letterSpacing: 0.4, lineHeight: 24 });
+    k.textStyle("Code 34", { ...MONO, size: 34, fontWeight: 800, letterSpacing: 1, lineHeight: 40 });
+    k.textStyle("Sticker 20", { ...MONO, size: 20, fontWeight: 800, letterSpacing: 1.4, lineHeight: 24 });
+    k.textStyle("Sticker 54", { ...MONO, size: 54, fontWeight: 800, letterSpacing: -2, lineHeight: 56 });
+    k.textStyle("Line 26", { ...MONO, size: 26, fontWeight: 800, letterSpacing: 0.6, lineHeight: 32, textAlign: "CENTER" });
+    k.textStyle("Button 34", { size: 34, fontWeight: 800, lineHeight: 42 });
+    pill(k, "Clip button", { fill: "primary", ink: "onPrimary", style: "Button 34", label: `Clip it at ${OFFER.link}`, pad: [22, 44], radius: 10 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 22, verticalPadding(), "paper", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    rays(k, sheet, 1080, 1920, { fy: 0.3 });
+    pinked(k, sheet, 1080, 170, { tooth: 40 });
+    blankCoupon(k, sheet, { x: -160, y: 1530, width: 700, height: 360, rotation: 8, name: "Fan left", seed: 21, kraft: true });
+    blankCoupon(k, sheet, { x: 540, y: 1490, width: 700, height: 360, rotation: -10, name: "Fan right", seed: 5 });
+    blankCoupon(k, sheet, { x: 150, y: 1620, width: 740, height: 380, rotation: -2, name: "Fan middle", seed: 30 });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top" });
+    const tilt = k.stack(top, { width: "HUG", padding: { top: 26, right: 0, bottom: 14, left: 6 }, name: "Stamp box" });
+    stamp(k, tilt, "LAST 24 HOURS", { style: "Stamp 56", pad: [8, 22], rotation: -4 });
+    const snipper = k.stack(top, { width: 190, height: 106, name: "Snipper" });
+    const cutter = scissors(k, snipper, 190, { absolute: { x: 0, y: 0 } });
+    k.text(sheet, "LAST DAY\nTO CLIP.", { style: "Headline 128", color: "text", name: "Headline" });
+    const timer = k.stack(sheet, { fill: "accent", radius: 12, align: "CENTER", gap: 0, padding: { top: 16, right: 20, bottom: 10, left: 20 }, stroke: { color: "onAccent", width: 5, align: "INSIDE" }, effects: [hardShadow(k, "shade", 8, 9, 0.45)], name: "Timer" });
+    const labels = k.stack(timer, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Timer labels" });
+    k.text(labels, "COUPON EXPIRES IN", { style: "Timer label 22", color: "onAccent", autoWidth: true, name: "Timer label" });
+    k.text(labels, "HRS : MIN : SEC", { style: "Timer label 22", color: "onAccent", autoWidth: true, name: "Timer units" });
+    k.text(timer, `23:59:${59 - TICKS}`, { style: "Timer 150", color: "onAccent", name: "Timer figure" });
+    const fan = k.stack(sheet, { width: FAN.w, height: FAN.h, name: "Fan" });
+    const back = (name, id, label, note, now, was, per, x, y) => {
+      const c = coupon(k, fan, { name, width: FAN.w - 40, pad: 24, gap: 8, absolute: { x, y }, band: { label, note, style: "Band 22" } });
+      price(k, c.body, { now, was, per, figureStyle: "Figure 136", sideStyle: "Side 26", name: id });
+      return c.cut;
+    };
+    const setup = back("Setup coupon", "Setup", "FREE SET-UP WITH ANY PLAN", `WAS $${OFFER.setupWorth}`, "FREE", `WAS $${OFFER.setupWorth}`, "SET-UP", 40, 0);
+    const shop = back("Shop coupon", "Shop", "MULTI-SHOP \xB7 ANNUAL", `$${OFFER.shopNow}, WAS $${OFFER.shopWas}`, `$${OFFER.shopNow}`, `WAS $${OFFER.shopWas}`, "A YEAR", 0, 62);
+    heroCoupon(k, fan, { width: FAN.w, pad: 24, gap: 8, stub: 216, bars: 92, pitch: null, absolute: { x: 0, y: 130 }, band: `STARTER \xB7 ANNUAL \xB7 ${OFFER.off}% OFF`, styles: { band: "Band 22", figure: "Figure 136", side: "Side 26", fine: "Fine 18", code: "Code 34" } });
+    sticker(k, fan, [["YOU SAVE", "Sticker 20"], [`$${OFFER.starterWas - OFFER.starterNow}`, "Sticker 54"]], { rotation: -8, pad: [10, 22], absolute: { x: 612, y: 318 } });
+    k.text(sheet, `CODE {{brand.code}} \xB7 ENDS ${OFFER.ends.toUpperCase()}`, { style: "Line 26", color: "text", name: "Code line" });
+    k.instance(sheet, "Clip button", { Label: `Clip it at ${OFFER.link}` }, { name: "Button" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    snip(k, cutter, { at: 1e3, steps: 10, every: 500, distance: 0 });
+    const notch = (id, to, at) => {
+      k.patch(id, { rotation: to });
+      k.animate(id, "rotation", [{ t: 0, v: 0, ease: ease.hold }, { t: at, v: to * 0.4, ease: ease.hold }, { t: at + 100, v: to * 0.75, ease: ease.hold }, { t: at + 200, v: to }]);
+    };
+    notch(setup, 4, FAN_AT + 250);
+    notch(shop, -3, FAN_AT + 100);
+    const feed = (kit, id, w, band) => {
+      fitRays(kit, id, 0.5, 0.3);
+      fitPinked(kit, id, w, band, 0, { tooth: 40 });
+      hide(kit, id, ["Fan left", "Fan right", "Fan middle"]);
+    };
+    k.variants(sheet, feedVariants({ post: 48, portrait: 72 }, {
+      // The square: the headline on one line, and the stamp beside the scissors over it.
+      post: (kit, id) => {
+        feed(kit, id, 1080, 44);
+        kit.patch(id, { padding: { top: 60, right: 140, bottom: 36, left: 140 }, itemSpacing: 12 });
+        patchAll(kit, id, "Headline", { characters: "LAST DAY TO CLIP." });
+        restyle(kit, id, "Headline", "Headline 92");
+        hide(kit, id, ["Code line", "Timer labels"]);
+        patchAll(kit, id, "Stamp box", { padding: { top: 16, right: 0, bottom: 6, left: 6 } });
+        patchAll(kit, id, "Timer", { padding: { top: 6, right: 20, bottom: 2, left: 20 } });
+      },
+      portrait: (kit, id) => {
+        feed(kit, id, 1080, 56);
+        kit.patch(id, { padding: { top: 84, right: 72, bottom: 44, left: 72 }, itemSpacing: 18 });
+        const wide = 936;
+        patchAll(kit, id, "Fan", { width: wide });
+        for (const name of ["Setup coupon", "Shop coupon"]) patchAll(kit, id, name, { width: wide - 40 });
+        patchAll(kit, id, "Hero coupon", { width: wide });
+        for (const n of kit.named(id, "Sticker")) kit.patch(n, { x: kit.node(n).x + (wide - FAN.w) });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  black_friday_coupons_last_day_default
+};