@popcraft/kit 0.53.7 → 0.53.9

package/dist/chunks/chunk-XRVPSPYO.js

@@ -0,0 +1,106 @@
+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,
+  grot,
+  lockup,
+  routeGeo,
+  routeMap,
+  routePaths,
+  rule,
+  swissBrand,
+  swissGrid
+} from "./chunk-VJU5LPAN.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-B43HWU3S.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit
+} from "./chunk-PN2PTI35.js";
+import {
+  ease
+} from "./chunk-ZGIMZ6SP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/email/style-swiss-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Swiss SaaS email header";
+var DURATION = 6e3;
+var MAP = { w: 240, h: 240, pad: 30, weight: 6 };
+var cues = [
+  { layer: "Open button", preset: "pulse", at: 2400, params: { duration: 400, amount: 0.05 } },
+  { layer: "Flag", preset: "flash", at: 4e3, params: { duration: 600, ease: ease.hold } }
+];
+var style_swiss_header_default = defineTemplate({
+  id: "email-saas-style-swiss-header",
+  meta: {
+    name: `${NAME} (animated GIF)`,
+    description: "A 600 \xD7 300 animated header for a launch email in the Swiss typographic style: the sender, the news, the button and a transit-style route diagram with its late stretch in red are all on the first frame (for Outlook), then a shipment marker travels the rail reroute and back, the flag blinks and the button nudges, all returning to where they began. A seamless 6-second GIF",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "saas", "swiss", "international typographic style", "grid", "b2b", "logistics", "launch", "announcement", "newsletter", "loop"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["announcement", "launch", "newsletter"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues },
+  build() {
+    const k = new Kit(NAME, HEADER);
+    k.quantizeGeometry = true;
+    swissBrand(k, { offer: "Late shipments, flagged 48 hours early.", when: "Kontor 3.0 forecasts every lane two days out and reroutes in two clicks." });
+    grot(k, "Brand 16", 16, { weight: 700, lead: 1.2, spacing: -0.02 });
+    grot(k, "Label 12", 12, { weight: 600, lead: 1.3 });
+    grot(k, "Offer 28", 28, { weight: 700, lead: 1.05, spacing: -0.035 });
+    grot(k, "When 13", 13, { weight: 400, lead: 1.4 });
+    grot(k, "Button 13", 13, { weight: 700, lead: 1.2 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 13", label: "See what is new", pad: [9, 14], radius: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 0, right: 28, bottom: 0, left: 28 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    swissGrid(k, sheet, { cols: 6, margin: 28, gutter: 12, row: 60, top: 30 });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, align: "CENTER", name: "Band" });
+    const words = k.stack(band, { width: 284, gap: 11, name: "Words" });
+    const top = k.stack(words, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, top, { size: 16, style: "Brand 16" });
+    k.text(top, `Release ${KONTOR.version}`, { style: "Label 12", color: "text", autoWidth: true, name: "Release" });
+    rule(k, words, "FILL", { weight: 2, name: "Top rule" });
+    k.text(words, "{{brand.offer}}", { style: "Offer 28", color: "text", name: "Offer" });
+    k.text(words, "{{brand.when}}", { style: "When 13", color: "onPaper", name: "When" });
+    k.instance(words, "Button", { Label: "See what is new" }, { name: "Open button" });
+    const map = routeMap(k, band, { ...MAP, labels: "Label 12", ink: "text", late: "primary", ground: "paper", labelInk: "text", name: "Route" });
+    const flag = k.stack(map, { direction: "HORIZONTAL", width: "HUG", fill: "primary", padding: { top: 2, right: 5, bottom: 2, left: 5 }, name: "Flag", absolute: { x: 118, y: 44 } });
+    k.text(flag, `+${KONTOR.slip} h`, { style: "Label 12", color: "onPrimary", autoWidth: true, name: "Flag words" });
+    const g = routeGeo(MAP.w, MAP.h, MAP.pad), p = routePaths(g, MAP.weight * 1.1);
+    const pts = [p.point("DUI"), ...p.rail[0].points.slice(1), p.point("MIL")];
+    const S = 12;
+    const dot = k.rect(map, S, S, "primary", { name: "Shipment", absolute: { x: Math.round(pts[0].x - S / 2), y: Math.round(pts[0].y - S / 2) } });
+    const there = [0, 700, 1300, 1700, 2600], back = [3400, 4300, 4700, 5300, DURATION];
+    const xs = [...pts.map((q, i) => ({ t: there[i], v: Math.round(q.x - pts[0].x) })), ...[...pts].reverse().map((q, i) => ({ t: back[i], v: Math.round(q.x - pts[0].x) }))];
+    const ys = [...pts.map((q, i) => ({ t: there[i], v: Math.round(q.y - pts[0].y) })), ...[...pts].reverse().map((q, i) => ({ t: back[i], v: Math.round(q.y - pts[0].y) }))];
+    const keyed = (a) => a.map((x, i) => i < a.length - 1 ? { ...x, ease: ease.inOut("sine") } : x);
+    k.animate(dot, "translateX", keyed(xs));
+    k.animate(dot, "translateY", keyed(ys));
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  style_swiss_header_default
+};

package/dist/chunks/chunk-XSAY6PDJ.js

@@ -0,0 +1,139 @@
+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 {
+  bat,
+  branch,
+  disc,
+  draw,
+  flourishComponent,
+  grass,
+  jackFace,
+  polyP,
+  printVariant,
+  pumpkin,
+  rectPath,
+  specksIn,
+  web
+} from "./chunk-YVN7SFQ7.js";
+import {
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  blurred
+} from "./chunk-YORIY3BT.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/print/holidays-halloween-party-invitation.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Halloween costume party invitation";
+var PAD = { top: 92, right: 44, bottom: 120, left: 44 };
+function art(w, h) {
+  const s = w / 480, B = 14 * s, cx = w / 2;
+  const moon = { x: cx, y: 160 * s, r: 132 * s };
+  const craters = [[-50, -60, 18], [40, -30, 12], [-20, 50, 22], [60, 60, 14], [-80, 20, 9]].map(([x, y, r]) => disc(moon.x + x * s, moon.y + y * s, r * s));
+  const bats = [[0.12, 0.08, 46, 0.4], [0.86, 0.06, 38, -0.2], [0.92, 0.33, 30, 0.2], [0.08, 0.34, 26, -0.4], [0.76, 0.42, 22, 0.1]].map(([x, y, sz, f]) => bat(w * x, h * y, sz * s, f));
+  const fence = Array.from({ length: 11 }, (_, i) => {
+    const x = w * 0.52 + i * 20 * s;
+    return polyP([{ x, y: h - 92 * s }, { x: x + 5 * s, y: h - 104 * s }, { x: x + 10 * s, y: h - 92 * s }, { x: x + 10 * s, y: h - 40 * s }, { x, y: h - 40 * s }]);
+  });
+  fence.push(rectPath(w * 0.52, h - 82 * s, 220 * s, 5 * s), rectPath(w * 0.52, h - 58 * s, 220 * s, 5 * s));
+  const tree = branch([{ x: 40 * s, y: h }, { x: 46 * s, y: h - 120 * s }, { x: 64 * s, y: h - 190 * s }, { x: 104 * s, y: h - 236 * s }], 8, 6, 46 * s);
+  const pk = [[0.2, 74, 60], [0.5, 104, 80], [0.8, 78, 62]].map(([x, pw, ph]) => ({ x: w * x, p: pumpkin(w * x, h - 22 * s, pw * s * 1.2, ph * s), face: jackFace(w * x, h - 22 * s - ph * s * 0.48, pw * s * 1) }));
+  return [
+    { name: "Stars", paths: specksIn({ x: -B, y: -B, w: 90 * s, h: 330 * s }, 300 * s * s, 4, 2 * s), color: "bone", o: { opacity: 0.5 } },
+    { name: "Stars", paths: specksIn({ x: w - 76 * s, y: -B, w: 90 * s, h: 330 * s }, 300 * s * s, 5, 2 * s), color: "bone", o: { opacity: 0.5 } },
+    { name: "Moon glow", paths: [disc(moon.x, moon.y, moon.r * 1.12)], color: "bone", o: { opacity: 0.22, effects: [blurred(18 * s)] } },
+    { name: "Moon", paths: [disc(moon.x, moon.y, moon.r)], color: "bone" },
+    { name: "Craters", paths: craters, color: "boneDeep", o: { opacity: 0.55 } },
+    { name: "Web", paths: web(-4 * s, -4 * s, 120 * s, 0, Math.PI / 2, 7, 6), color: "bone", o: { strokeWidth: 1 * s, opacity: 0.6 } },
+    ...bats.map((b) => ({ name: "Bat", paths: [b], color: "batPurple" })),
+    { name: "Hill", paths: [polyP([{ x: -B, y: h + B }, ...Array.from({ length: 13 }, (_, i) => ({ x: -B + (w + 2 * B) * i / 12, y: h - 96 * s + Math.sin(i * 0.7) * 10 * s })), { x: w + B, y: h + B }])], color: "hill" },
+    { name: "Fence", paths: fence, color: "hill" },
+    { name: "Tree", paths: tree.limb, color: "hill", o: { strokeWidth: 7 * s } },
+    { name: "Twigs", paths: tree.twigs, color: "hill", o: { strokeWidth: 3 * s } },
+    { name: "Pumpkin glow", paths: pk.map((p) => disc(p.x, h - 48 * s, 64 * s, 44 * s)), color: "pumpkin", o: { opacity: 0.35, effects: [blurred(22 * s)] } },
+    { name: "Pumpkins", paths: pk.flatMap((p) => p.p.lobes), color: "pumpkin" },
+    { name: "Pumpkin creases", paths: pk.flatMap((p) => p.p.creases), color: "pumpkinDeep", o: { strokeWidth: 1.6 * s } },
+    { name: "Pumpkin stems", paths: pk.flatMap((p) => p.p.stem), color: "stem" },
+    { name: "Faces", paths: pk.flatMap((p) => p.face), color: "candle" },
+    { name: "Grass", paths: grass(-B, w + B, h + B, 30 * s, 13, 60), color: "ink" }
+  ];
+}
+var holidays_halloween_party_invitation_default = defineTemplate({
+  id: "print-holidays-halloween-party-invitation",
+  meta: {
+    name: NAME,
+    description: "A printed invitation to a grown-ups\u2019 Halloween costume party: a full harvest moon fills the top of a night-black card with \u201CMonster Mash\u201D set heavy across its face, bats round its edge and a web in the corner, the details in bone and pumpkin orange, and three glowing jack-o\u2019-lanterns in the grass. 5 \xD7 7 inches with bleed, and an A6 copy",
+    category: "invitation",
+    tags: ["halloween", "costume party", "party", "monster mash", "pumpkins", "jack-o\u2019-lantern", "bats", "moon", "spooky", "invitation", "print", "card", "october"],
+    platforms: ["print"],
+    formats: ["card"],
+    useCases: ["invitation", "event"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("invitation-5x7"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#15121B", text: "#F1E6CF", onPaper: "#F08A2C", primary: "#F08A2C", onPrimary: "#15121B" },
+      { name: "the Hendersons" }
+    );
+    k.palette({ batPurple: "#5A3F86", hill: "#26202F", bone: "#F1E6CF", boneDeep: "#D8C7A3", ink: "#15121B", pumpkin: "#F08A2C", pumpkinDeep: "#B85A12", stem: "#5B6B3A", candle: "#FFD35C" });
+    k.textStyle("Kicker 12", { size: 12, fontWeight: 800, letterSpacing: 4, lineHeight: 16 });
+    k.textStyle("Title 64", { size: 56, fontWeight: 900, letterSpacing: -2.2, lineHeight: 50 });
+    k.textStyle("When 16", { ...SERIF, size: 16, fontWeight: 700, lineHeight: 22 });
+    k.textStyle("Body 12", { ...SERIF, size: 12, fontWeight: 400, lineHeight: 17 });
+    k.textStyle("Rsvp 10", { size: 10, fontWeight: 700, letterSpacing: 1.6, lineHeight: 15 });
+    const sheet = k.sheet;
+    const { width: W, height: H } = k.node(sheet);
+    k.flowSheet(sheet, 0, PAD, "paper", "MIN", "CENTER");
+    draw(k, sheet, art(W, H));
+    const c = { align: "CENTER", width: "FILL" };
+    k.text(sheet, "THE ANNUAL", { style: "Kicker 12", color: "ink", ...c, name: "Kicker" });
+    k.stack(sheet, { height: 6, name: "Gap" });
+    k.text(sheet, "MONSTER\nMASH", { style: "Title 64", color: "ink", ...c, name: "Title" });
+    k.stack(sheet, { height: 6, name: "Gap" });
+    k.text(sheet, "A COSTUME PARTY", { style: "Kicker 12", color: "ink", ...c, name: "Sub" });
+    k.stack(sheet, { height: 92, name: "Gap" });
+    k.text(sheet, "Saturday 31 October \xB7 8 pm till late", { style: "When 16", color: "onPaper", ...c, name: "When" });
+    k.text(sheet, "at {{brand.name}}\u2019, 77 Ravenwood Lane", { style: "Body 12", color: "text", ...c, name: "Where" });
+    k.stack(sheet, { height: 10, name: "Gap" });
+    flourishComponent(k, "Bat rule", "primary", bat(0, 0, 30), { rule: 30, size: 18 });
+    k.instance(sheet, "Bat rule", {}, { name: "Divider" });
+    k.stack(sheet, { height: 10, name: "Gap" });
+    k.text(sheet, "Costumes compulsory. Prizes for the scariest, the funniest and the most homemade. Witches\u2019 brew, a candy table and a DJ who takes requests.", { style: "Body 12", color: "text", ...c, name: "Body" });
+    k.stack(sheet, { height: 10, name: "Gap" });
+    k.text(sheet, "RSVP TO MEG \xB7 (614) 555-0131", { style: "Rsvp 10", color: "onPaper", ...c, name: "Rsvp" });
+    k.textStyle("Title 54", { size: 47, fontWeight: 900, letterSpacing: -1.8, lineHeight: 42 });
+    k.textStyle("When 13.5", { ...SERIF, size: 13.5, fontWeight: 700, lineHeight: 19 });
+    k.textStyle("Body 10.5", { ...SERIF, size: 10.5, fontWeight: 400, lineHeight: 15 });
+    k.textStyle("Rsvp 8.5", { size: 8.5, fontWeight: 700, letterSpacing: 1.2, lineHeight: 13 });
+    k.textStyle("Kicker 10", { size: 10, fontWeight: 800, letterSpacing: 3.4, lineHeight: 14 });
+    k.variants(sheet, [printVariant("a6", {
+      art,
+      pad: PAD,
+      masterWidth: W,
+      styles: [["Title", "Title 54"], ["When", "When 13.5"], ["Where", "Body 10.5"], ["Body", "Body 10.5"], ["Rsvp", "Rsvp 8.5"], ["Kicker", "Kicker 10"], ["Sub", "Kicker 10"]]
+    })]);
+    return k.finish();
+  }
+});
+
+export {
+  holidays_halloween_party_invitation_default
+};

package/dist/chunks/chunk-XST3DXFQ.js

@@ -0,0 +1,224 @@
+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,
+  camera,
+  float,
+  lineGrid,
+  redrawLines,
+  reelCuts,
+  reelSheet,
+  seenAt,
+  wideCut
+} from "./chunk-YXFPVZM3.js";
+import {
+  productWindow,
+  screenshotSlot
+} from "./chunk-MJ3CSPFJ.js";
+import {
+  clicks,
+  glide,
+  pointer
+} from "./chunk-PT7RVGFZ.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 {
+  logoBadge,
+  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 {
+  ease
+} from "./chunk-ZGIMZ6SP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/saas-screen-demo.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = score("tension");
+var { beat } = S;
+var STEP = [4, 12, 20, 28];
+var STAGE = { width: COLUMN, height: 620 };
+var GRID = { x: 196, y: 138, col: 112, row: 58, w: 104, h: 50 };
+var cell = (c, r) => ({ x: GRID.x + c * GRID.col, y: GRID.y + r * GRID.row });
+var OPEN = [[1, 0], [1, 1], [1, 2], [3, 2], [3, 3], [3, 4]];
+var BOOKED = cell(1, 1);
+var BAR = 56;
+var REST = { x: 640, y: 500 };
+var TARGETS = [{ x: cell(1, 0).x + 60, y: cell(1, 0).y + BAR + 30 }, { x: 706, y: BAR + 52 }, { x: BOOKED.x + 70, y: BOOKED.y + BAR + 32 }];
+var SHOTS = [
+  { t: beat(STEP[0]), zoom: 1.7, x: TARGETS[0].x + 100, y: TARGETS[0].y + 90 },
+  { t: beat(STEP[1]), zoom: 1.9, ...TARGETS[1] },
+  { t: beat(STEP[2]), zoom: 1.9, x: TARGETS[2].x - 40, y: TARGETS[2].y + 40 },
+  { t: beat(STEP[3]), zoom: 1 }
+];
+var GRID_LOOK = { step: 135, opacity: 0.55 };
+var swaps = [captionSwap(["Mark the hours you\u2019re free.", "Copy one link. Send it.", "They pick. Your week fills.", "Free for your first calendar."], beat(STEP[0]), S.duration - 30)];
+var counts = [{ layer: "Booked figure", at: beat(STEP[2] + 2.5), duration: beat(3), counter: { from: 0, to: 7 } }];
+var cues = [
+  { layer: "Brand row", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Hook", preset: "words-in", at: 0, params: { duration: 450, amount: 60 } },
+  { layer: "Stage", preset: "rise-in", at: 200, params: { duration: 600 } },
+  { layer: "Caption strip", preset: "fade-in", at: beat(3.5), params: { duration: 250 } },
+  ...STEP.slice(0, 3).map((b, i) => ({ layer: `Step fill ${i + 1}`, preset: "wipe-in", at: beat(b), params: { duration: beat(8), direction: "right", ease: ease.linear } })),
+  { layer: "Step bars", preset: "fade-in", at: beat(2), params: { duration: 300 } },
+  { layer: "Open slot", preset: "pop-in", at: beat(STEP[0] + 2), params: { duration: 300 }, stagger: { delay: 150 } },
+  { layer: "Toast", preset: "pop-in", at: beat(STEP[1] + 2), params: { duration: 350 } },
+  { layer: "Toast", preset: "fade-out", at: beat(STEP[1] + 6), params: { duration: 300 } },
+  { layer: "Booking", preset: "pop-in", at: beat(STEP[2] + 2.5), params: { duration: 400 } },
+  { layer: "Call", preset: "pop-in", at: beat(STEP[3]), params: { duration: 450 } },
+  { layer: "Call", preset: "pulse", at: beat(29.5), params: { duration: 600, amount: 0.05 } },
+  { layer: "Call", preset: "pulse", at: beat(31), params: { duration: 500, amount: 0.05 } }
+];
+var saas_screen_demo_default = defineTemplate({
+  id: "motion-saas-screen-demo",
+  meta: {
+    name: "SaaS short: screen demo with zoom",
+    description: "A 16-second product demo in the screen-recording-with-zoom style: a product window on a dark ruled ground, an enlarged pointer that clicks three times, and a camera that zooms to each click while the caption track says the step. Drop your own screenshot on the window\u2019s picture slot. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "demo", "screen recording", "zoom", "cursor", "product", "dark", "captions", "music", "audio", "reel", "tiktok", "shorts", "build in public"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "demo", "video"],
+    useCases: ["launch", "onboarding", "education"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit("SaaS short: screen demo with zoom", preset("ig-story"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#0A0B0D", text: "#F4F5F7", onPaper: "#A2A8B3", primary: "#FF5A1F", onPrimary: "#180700", card: "#14161A", onCard: "#F1F2F4" },
+      { name: "Slotwise", hook: "Three clicks. Fully booked.", site: "slotwise.example" }
+    );
+    k.palette({ line: "#23262D", side: "#0F1114", slot: "#1C1F25", faint: "#9299A6", toast: "#F4F5F7", onToastInk: "#101216" });
+    k.textStyle("Hook 100", { size: 100, fontWeight: 800, letterSpacing: -4.5, lineHeight: 98 });
+    k.textStyle("Hook 64", { size: 64, fontWeight: 800, letterSpacing: -2.6, lineHeight: 66 });
+    k.textStyle("Brand 30", { size: 30, fontWeight: 700, letterSpacing: -0.4, lineHeight: 36 });
+    k.textStyle("Caption 40", { size: 40, fontWeight: 700, letterSpacing: -0.8, lineHeight: 48 });
+    k.textStyle("Button 32", { size: 32, fontWeight: 700, letterSpacing: -0.4, lineHeight: 40 });
+    k.textStyle("UI title 26", { size: 26, fontWeight: 700, letterSpacing: -0.4, lineHeight: 32 });
+    k.textStyle("UI 18", { size: 18, fontWeight: 600, lineHeight: 24 });
+    k.textStyle("UI figure 52", { size: 52, fontWeight: 800, letterSpacing: -2, lineHeight: 56, fontFeatures: { tnum: 1 } });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "Start free at slotwise.example", pad: [20, 36], radius: 14 });
+    const sheet = reelSheet(k, S, { name: "Screen demo", gap: 24 });
+    lineGrid(k, sheet, k.tint("text", 0.15), GRID_LOOK);
+    const ghost = [], lit = [];
+    for (let r = 0; r < 4; r++) for (let c = 0; c < 6; c++) ((c * 3 + r * 5) % 7 === 0 ? lit : ghost).push(box(c * 150, r * 112, 138, 100));
+    k.vector(sheet, 900, 448, ghost, "slot", { name: "Next week", absolute: { x: 140, y: 1520 }, opacity: 0.55 });
+    k.vector(sheet, 900, 448, lit, "primary", { name: "Next week booked", absolute: { x: 140, y: 1520 }, opacity: 0.3 });
+    const brand = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Brand row" });
+    logoBadge(k, brand, { fill: "primary", size: 30, radius: 10 });
+    k.text(brand, "{{brand.name}}", { style: "Brand 30", color: "text", name: "Brand name" });
+    k.text(sheet, "{{brand.hook}}", { style: "Hook 100", color: "text", name: "Hook" });
+    const stage = k.stack(sheet, { width: STAGE.width, height: STAGE.height, clip: true, radius: 18, fill: "card", stroke: { color: "line", width: 2, align: "OUTSIDE" }, effects: [shadow(k, "paper", 0.6, 30, 70)], name: "Stage" });
+    const cam = k.frame(stage, { x: 0, y: 0, ...STAGE }, { name: "Camera" });
+    const look = { fill: "card", bar: "side", titleStyle: "UI 18", titleInk: "faint", dots: "slot", radius: 0, barHeight: BAR, rule: "line" };
+    const { win, body, bodyHeight } = productWindow(k, cam, { ...STAGE, title: "{{brand.site}} / hours", look });
+    k.patch(win, { layoutPositioning: "ABSOLUTE", x: 0, y: 0 });
+    screenshotSlot(k, body, STAGE.width, bodyHeight, "slot");
+    const ui = k.frame(body, { x: 0, y: 0, width: STAGE.width, height: bodyHeight }, { name: "Placeholder screen", fill: "card" });
+    k.rect(ui, 172, bodyHeight, "side", { name: "Sidebar", absolute: { x: 0, y: 0 } });
+    k.rect(ui, 2, bodyHeight, "line", { name: "Sidebar rule", absolute: { x: 172, y: 0 } });
+    k.rect(ui, 148, 44, "slot", { name: "Nav selected", radius: 10, absolute: { x: 12, y: 20 } });
+    ["Hours", "Links", "Bookings", "Team"].forEach((label, i) => {
+      k.rect(ui, 16, 16, i === 0 ? "primary" : "slot", { name: "Nav mark", radius: 5, absolute: { x: 26, y: 34 + i * 54 } });
+      k.text(ui, label, { style: "UI 18", color: i === 0 ? "onCard" : "faint", autoWidth: true, name: "Nav item", absolute: { x: 54, y: 30 + i * 54 } });
+    });
+    k.text(ui, "Booked", { style: "UI 18", color: "faint", autoWidth: true, name: "Booked label", absolute: { x: 26, y: 440 } });
+    k.text(ui, "7", { style: "UI figure 52", color: "onCard", autoWidth: true, name: "Booked figure", absolute: { x: 24, y: 466 } });
+    k.text(ui, "Your hours", { style: "UI title 26", color: "onCard", autoWidth: true, name: "Screen title", absolute: { x: GRID.x, y: 26 } });
+    const copy = k.stack(ui, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 10, padding: { top: 10, right: 18, bottom: 10, left: 18 }, name: "Copy link", absolute: { x: 632, y: 24 } });
+    k.text(copy, "Copy link", { style: "UI 18", color: "onPrimary", autoWidth: true, name: "Copy link label" });
+    ["Mon", "Tue", "Wed", "Thu", "Fri"].forEach((d, c) => k.text(ui, d, { style: "UI 18", color: "faint", autoWidth: true, name: "Day", absolute: { x: GRID.x + c * GRID.col + 4, y: 100 } }));
+    const slots = [];
+    for (let r = 0; r < 7; r++) for (let c = 0; c < 5; c++) slots.push(box(c * GRID.col, r * GRID.row, GRID.w, GRID.h));
+    k.vector(ui, 5 * GRID.col, 7 * GRID.row, slots, "slot", { name: "Slots", absolute: { x: GRID.x, y: GRID.y } });
+    for (const [c, r] of OPEN) k.rect(ui, GRID.w, GRID.h, k.tint("primary", 0.34), { name: "Open slot", stroke: { color: "primary", width: 2, align: "INSIDE" }, absolute: cell(c, r) });
+    const booking = k.stack(ui, { width: GRID.w, height: GRID.h, fill: "primary", justify: "CENTER", align: "CENTER", name: "Booking", absolute: BOOKED });
+    k.text(booking, "Dana 10:00", { style: "UI 18", color: "onPrimary", autoWidth: true, name: "Booking label" });
+    const toast = k.stack(ui, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", fill: "toast", radius: 10, padding: { top: 10, right: 16, bottom: 10, left: 14 }, effects: [shadow(k, "paper", 0.5, 10, 24)], name: "Toast", absolute: { x: 540, y: 78 } });
+    k.ellipse(toast, 14, "primary", { name: "Toast dot" });
+    k.text(toast, "Link copied", { style: "UI 18", color: "onToastInk", autoWidth: true, name: "Toast label" });
+    const p = pointer(k, stage, { ...REST, size: 104, fill: "toast", edge: "onToastInk", ring: "primary" });
+    const bars = k.stack(sheet, { direction: "HORIZONTAL", gap: 10, name: "Step bars" });
+    for (let i = 1; i <= 3; i++) {
+      const track = k.stack(bars, { width: "FILL", height: 8, fill: "slot", radius: 4, clip: true, name: "Step track" });
+      k.rect(track, "FILL", 8, "primary", { name: `Step fill ${i}` });
+    }
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 40", fill: "card", ink: "onCard", radius: 14, stroke: { color: "line", width: 2, align: "INSIDE" } });
+    k.instance(sheet, "Button", { Label: "Start free at {{brand.site}}" }, { name: "Call" });
+    camera(k, cam, STAGE.width, STAGE.height, SHOTS);
+    const to = (i) => {
+      const at = seenAt(STAGE.width, STAGE.height, SHOTS[i], TARGETS[i]);
+      return { dx: at.x - REST.x, dy: at.y - REST.y };
+    };
+    glide(k, p, [
+      { t: beat(STEP[0]), dx: 0, dy: 0 },
+      { t: beat(STEP[0] + 1.6), ...to(0) },
+      { t: beat(STEP[1]), ...to(0) },
+      { t: beat(STEP[1] + 1.6), ...to(1) },
+      { t: beat(STEP[2]), ...to(1) },
+      { t: beat(STEP[2] + 1.6), ...to(2) },
+      { t: beat(STEP[3]), ...to(2) },
+      { t: beat(STEP[3] + 2), dx: 60, dy: 40 }
+    ]);
+    clicks(k, p, [beat(STEP[0] + 2), beat(STEP[1] + 2), beat(STEP[2] + 2)]);
+    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: 22, counterAxisSpacing: 22, padding: { top: 44, right: 140, bottom: 44, left: 140 } });
+        hide(kit, id, ["Brand row", "Next week", "Next week booked"]);
+        patchAll(kit, id, "Stage", { height: 600 });
+        restyle(kit, id, "Hook", "Hook 64");
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { padding: { top: 70, right: 140, bottom: 70, left: 140 } });
+        patchAll(kit, id, "Next week", { y: 1290 });
+        patchAll(kit, id, "Next week booked", { y: 1290 });
+      }
+    }), wideCut(640, (kit, id, right) => {
+      const scale = right.width / STAGE.width, top = right.y + Math.round((right.height - STAGE.height * scale - 38) / 2);
+      redrawLines(kit, id, GRID_LOOK);
+      float(kit, id, "Stage", right.x, top, { scale });
+      float(kit, id, "Step bars", right.x, top + Math.round(STAGE.height * scale) + 30, { width: right.width });
+      hide(kit, id, ["Next week", "Next week booked"]);
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  saas_screen_demo_default
+};

package/dist/chunks/chunk-XSW5C25P.js

@@ -0,0 +1,63 @@
+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 {
+  caption,
+  comicMeta,
+  comicSetup,
+  pageGrid,
+  panel,
+  rectFrame,
+  rows,
+  say,
+  tier,
+  tierBox
+} from "./chunk-I6FKFMWZ.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/print/comic-modern-flashback.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function flashbackPage(k, sheet) {
+  const g = 12, { W, H } = pageGrid(k, sheet, 36, g);
+  const [h1, h2, h3] = rows(H, g, [34, 30, 36]);
+  const t1 = tierBox(k, sheet, W, h1, "Tier 1");
+  panel(k, t1, rectFrame(0, 0, W, h1), { art: "fb1", focus: [0.5, 0.4], tone: true }, { ground: "g4", name: "Forty years ago" });
+  caption(k, t1, "Forty years ago, the harbour board gave me the keys to this tower.", { x: 10, y: 10, width: 210 });
+  const t2 = tierBox(k, sheet, W, h2, "Tier 2");
+  const [a, b] = tier(W, h2, [1, 1], g);
+  panel(k, t2, a, { art: "fb2", focus: [0.4, 0.5] }, { ground: "g1", name: "Alone with the sky" });
+  panel(k, t2, b, { art: "fb3", focus: [0.5, 0.5], tone: true }, { ground: "g2", name: "The lantern" });
+  caption(k, t2, "One night a year, I pulled the lever, and sat up here alone.", { x: 10, y: h2 - 76, width: 150 });
+  caption(k, t2, "Nobody ever came up to see it with me.", { x: b.x + b.width - 160, y: 10, width: 150 });
+  const t3 = tierBox(k, sheet, W, h3, "Tier 3");
+  panel(k, t3, rectFrame(0, 0, W, h3), { art: "rad-lamp", focus: [0.5, 0.32] }, { ground: "g3", name: "Tonight" });
+  say(k, t3, "Until tonight. Ready?", { x: W * 0.6, y: 16, width: 110, to: { x: W * 0.54, y: h3 * 0.42 } });
+}
+var comic_modern_flashback_default = defineTemplate({
+  id: "comic-flashback",
+  meta: comicMeta("Flashback page", `Page six of "The Long Night": the Lamplighter's past years in warm sepia with a halftone screen on the memory, alone at the top of the tower with his lantern and the stars, then back to tonight in full colour`, ["flashback", "sepia", "halftone"]),
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Flashback page", preset("comic-page"));
+    comicSetup(k);
+    flashbackPage(k, k.sheet);
+    return k.finish();
+  }
+});
+
+export {
+  flashbackPage,
+  comic_modern_flashback_default
+};

package/dist/chunks/chunk-XVS63SJN.js

@@ -0,0 +1,106 @@
+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 {
+  DEAL,
+  backSlip,
+  line,
+  receipt,
+  tearLine,
+  tillBrand,
+  two
+} from "./chunk-DRYULC7V.js";
+import {
+  EMAIL_FPS,
+  HEADER,
+  ticker
+} from "./chunk-B43HWU3S.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit
+} from "./chunk-PN2PTI35.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/email/black-friday-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 6e3;
+var ITEM = 300;
+var RATE = ITEM * 1e3 / DURATION;
+var TICKS = 5;
+var cues = [
+  { layer: "Total", preset: "pulse", at: 600, params: { duration: 700, amount: 0.06 } },
+  { layer: "Open button", preset: "wobble", at: 2400, params: { duration: 700 } },
+  { layer: "Total", preset: "pulse", at: 4200, params: { duration: 700, amount: 0.06 } }
+];
+var counts = [
+  // Rests at the figure it starts from: the first frame, and a still, read the time left as it was set.
+  { layer: "Clock row amount", at: 0, duration: TICKS * 1e3, tick: 1e3, counter: { from: DEAL.seconds, to: DEAL.seconds - TICKS, value: DEAL.seconds, prefix: `${DEAL.days}D ${two(DEAL.hours)}:${two(DEAL.minutes)}:` } }
+];
+var black_friday_header_default = defineTemplate({
+  id: "email-black-friday-header",
+  meta: {
+    name: "Black Friday sale email header (animated GIF)",
+    description: "A 600 \xD7 300 animated header for a SaaS Black Friday email: the offer, the deadline, the button and a receipt with the old price struck through are all on the first frame (for Outlook), then a ticker runs, the sale clock ticks and the total swells. A 6-second GIF",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "black friday", "cyber monday", "sale", "saas", "receipt", "countdown"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["sale", "countdown"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("Black Friday sale email header", HEADER);
+    k.quantizeGeometry = true;
+    tillBrand(k, { name: DEAL.product, offer: "Half off every annual plan.", when: `Black Friday to Cyber Monday. Ends ${DEAL.ends}.` }, ["primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
+    const mono = { fontFamily: "JetBrains Mono" };
+    k.textStyle("Ticker 13", { ...mono, size: 13, fontWeight: 800, letterSpacing: 1, lineHeight: 16 });
+    k.textStyle("Offer 34", { size: 34, fontWeight: 900, letterSpacing: -1.2, lineHeight: 36 });
+    k.textStyle("When 14", { size: 14, fontWeight: 500, lineHeight: 20 });
+    k.textStyle("Button 15", { size: 15, fontWeight: 800, lineHeight: 18 });
+    k.textStyle("Shop 15", { ...mono, size: 15, fontWeight: 800, lineHeight: 20 });
+    k.textStyle("Slip 13", { ...mono, size: 13, fontWeight: 600, lineHeight: 18, fontFeatures: { tnum: 1 } });
+    k.textStyle("Total 40", { ...mono, size: 40, fontWeight: 800, letterSpacing: -1.2, lineHeight: 46, fontFeatures: { tnum: 1 } });
+    pill(k, "Button", { fill: "accent", ink: "onAccent", style: "Button 15", label: "Open the receipt", pad: [9, 18], radius: 4 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 30, right: 24, bottom: 0, left: 28 }, "primary", "MIN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    ticker(k, sheet, { label: "BLACK FRIDAY \xB7 50% OFF ANNUAL", item: ITEM, height: 30, fill: "accent", ink: "onAccent", style: "Ticker 13", rate: RATE });
+    backSlip(k, sheet, { x: 392, y: 78, width: 230, height: 300, rotation: 7, u: 0.36 });
+    const main = k.stack(sheet, { direction: "HORIZONTAL", height: "FILL", gap: 28, name: "Main" });
+    const copy = k.stack(main, { height: "FILL", gap: 10, justify: "CENTER", name: "Copy" });
+    k.text(copy, "{{brand.offer}}", { style: "Offer 34", color: "onPrimary", name: "Offer" });
+    k.text(copy, "{{brand.when}}", { style: "When 14", color: "onPrimary", name: "When" });
+    k.instance(copy, "Button", { Label: "Open the receipt" }, { name: "Open button" });
+    const { body } = receipt(k, main, { width: 252, pad: { top: 14, right: 16, bottom: 12, left: 16 }, gap: 6, tooth: 12, depth: 7, shadow: 0.4 });
+    k.text(body, "{{brand.name}}", { style: "Shop 15", color: "onCard", name: "Shop" });
+    line(k, body, "TEAM, 12 MONTHS", `$${DEAL.teamWas}`, { style: "Slip 13", amountColor: "cardMuted", struck: true, name: "Was row", gap: 6 });
+    line(k, body, "BLACK FRIDAY", "\u221250%", { style: "Slip 13", name: "Discount row", gap: 6 });
+    tearLine(k, body, { dash: 6, gap: 4, weight: 2 });
+    const total = k.stack(body, { name: "Total" });
+    k.text(total, "TOTAL, FOR THE YEAR", { style: "Slip 13", color: "cardMuted", name: "Total label" });
+    k.text(total, `$${DEAL.teamNow}`, { style: "Total 40", color: "onCard", name: "Total figure" });
+    tearLine(k, body, { dash: 6, gap: 4, weight: 2 });
+    line(k, body, "ENDS IN", `${DEAL.days}D ${two(DEAL.hours)}:${two(DEAL.minutes)}:${DEAL.seconds}`, { style: "Slip 13", name: "Clock row", gap: 6 });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  black_friday_header_default
+};