@popcraft/kit 0.31.0 → 0.32.0

package/dist/chunks/chunk-XNMDDRTY.js

@@ -0,0 +1,48 @@
+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 {
+  slideshow
+} from "./chunk-ZJS37D5Z.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/slideshow/portfolio.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var story = {
+  id: "motion-slideshow-portfolio",
+  song: "keepsake",
+  meta: {
+    name: "Portfolio reel slideshow",
+    description: "A quiet portfolio reel for a maker or artist: a title card with the name, the process and the finished work as chapters, each piece held long on its own beat with its title and material, slow drifts and dissolves to a soft piano track (made by PopCraft, CC0), and a closing card with where to see more. Photos are CC0 from Wikimedia Commons; drop your own on any frame.",
+    tags: ["animation", "slideshow", "portfolio", "reel", "artist", "maker", "ceramics", "pottery", "craft", "showcase", "photo", "music", "video"],
+    platforms: ["instagram", "youtube", "linkedin"],
+    formats: ["video", "reel", "post"],
+    useCases: ["portfolio", "brand-intro"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  brand: { paper: "#ECE7DF", onPaper: "#2E2A26", accent: "#9A6B4F", shade: "#161412", onPhoto: "#FFFFFF", leak: "#F5C9A0" },
+  fields: { names: "Ines Okoro Ceramics", date: "Selected work \xB7 2024 \u2013 2026" },
+  scenes: [
+    { kind: "title", name: "Opening", photo: "pottery-04", kicker: "Selected work", beats: 8, move: "in" },
+    { kind: "chapter", name: "Chapter 1", kicker: "Part one", title: "The making", beats: 3 },
+    { kind: "photo", name: "Centring", photo: "pottery-00", caption: "Centring, the first ten minutes of everything", beats: 4, move: "in" },
+    { kind: "photo", name: "Throwing", photo: "pottery-01", layout: "matted", caption: "A bowl, pulled in three passes", beats: 4, move: "right" },
+    { kind: "photo", name: "Wedging", photo: "pottery-05", caption: "Stoneware from the Dorset pit", beats: 4, move: "left" },
+    { kind: "chapter", name: "Chapter 2", kicker: "Part two", title: "The work", beats: 3 },
+    { kind: "photo", name: "Bottles", photo: "pottery-03", layout: "matted", caption: "Celadon bottles", place: "Reduction-fired stoneware \xB7 2025", beats: 5, move: "in" },
+    { kind: "photo", name: "Terracotta", photo: "pottery-02", caption: "Market ware, by the hundred", place: "Earthenware \xB7 2024", beats: 5, move: "right", into: "leak" },
+    { kind: "end", name: "Ending", kicker: "Studio open by appointment" }
+  ]
+};
+var portfolio_default = slideshow(story);
+
+export {
+  story,
+  portfolio_default
+};

package/dist/chunks/chunk-XNXQIO3C.js

@@ -0,0 +1,415 @@
+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 {
+  sceneLengths,
+  type,
+  withSound
+} from "./chunk-FTDYIEB4.js";
+import {
+  END_CARD_PARTS,
+  captionParts,
+  column,
+  endCard,
+  rig,
+  size,
+  stage
+} from "./chunk-BJ7KIGYV.js";
+import {
+  scrollingRows
+} from "./chunk-R6UWMHJ2.js";
+import {
+  key
+} from "./chunk-OTE5FUDA.js";
+import {
+  BASE,
+  LID,
+  deviceShadow,
+  devices
+} from "./chunk-IGV5QPFA.js";
+import {
+  DESKTOP_SCREEN
+} from "./chunk-MZVIWZ2V.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  bed
+} from "./chunk-42LEBOKV.js";
+import {
+  glow,
+  grain
+} from "./chunk-M6VTXO6F.js";
+import {
+  box
+} from "./chunk-6RCDZU4R.js";
+import {
+  into,
+  playScenes,
+  sceneSheets
+} from "./chunk-L6NNGCPO.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  contextFrame,
+  init_scene3d,
+  sceneLayers
+} from "./chunk-NMFXCSU4.js";
+import {
+  init_transform3d,
+  mul4,
+  transform4
+} from "./chunk-CK43FENV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion3d/saas-film-cinematic-trailer.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene3d();
+init_transform3d();
+var B = bed("trailer", 50);
+var { beat } = B;
+var ON = [0, 16, 30, 42];
+var OPEN_AT = beat(1);
+var OPENED = beat(5);
+var LIFT = beat(1);
+var SETTLED = beat(5);
+var LAYERS = [[90, "Every project, one sidebar"], [210, "The deploy queue"], [340, "Live traffic, per second"], [470, "The figures that page you"], [600, "Rollback in one click"]];
+var scenes = [
+  { sheet: "Laptop", cues: [
+    { layer: "Stamp", preset: "typewriter", at: 100, params: { duration: 1e3 } },
+    { layer: "Title", preset: "words-in", at: beat(4), params: { duration: 700, amount: Math.round(beat(1)) } },
+    { layer: "Title note", preset: "fade-in", at: beat(9), params: { duration: 600 } }
+  ] },
+  { sheet: "Layers", transition: into("DISSOLVE", 600), cues: [
+    { layer: "Layers title", preset: "words-in", at: 300, params: { duration: 650, amount: 90 } },
+    { layer: "Leader", preset: "slide-in", at: SETTLED, params: { duration: 500, direction: "left", distance: 80 }, stagger: { delay: Math.round(beat(1)) } }
+  ] },
+  { sheet: "Wall", transition: into("DISSOLVE", 600), cues: [
+    { layer: "Plate", preset: "rise-in", at: beat(2), params: { duration: 700, distance: 70 } },
+    { layer: "Wall title", preset: "words-in", at: beat(2) + 200, params: { duration: 650, amount: 90 } }
+  ] },
+  { sheet: "End card", transition: into("DISSOLVE", 700), cues: [
+    { layer: [...END_CARD_PARTS], preset: "rise-in", at: 300, params: { duration: 700 }, stagger: { delay: 150, order: "selection" } },
+    { layer: "End button", preset: "pulse", at: beat(5), params: { duration: 700, amount: 0.06 } }
+  ] }
+];
+var LENGTHS = sceneLengths(ON.map((b) => beat(b)), B.duration, scenes);
+var SW = DESKTOP_SCREEN.width;
+var SH = DESKTOP_SCREEN.height;
+var SIDE = 230;
+var DEPLOYS = [
+  ["Add annual billing toggle", "main", "16:58", "ok"],
+  ["Fix webhook retry backoff", "main", "15:12", "ok"],
+  ["Try edge cache for /pricing", "preview/edge-cache", "14:40", "warn"],
+  ["Bump Node to 24", "main", "11:03", "ok"]
+];
+var REGIONS = [["fra1", "Frankfurt", "38 ms", 0.3], ["iad1", "Washington", "41 ms", 0.34], ["sfo1", "San Francisco", "52 ms", 0.42], ["sin1", "Singapore", "77 ms", 0.62], ["syd1", "Sydney", "96 ms", 0.78], ["gru1", "S\xE3o Paulo", "88 ms", 0.7], ["hnd1", "Tokyo", "61 ms", 0.5], ["lhr1", "London", "36 ms", 0.28]];
+var LOGS = [
+  ["16:58:02", "INFO", "build #482 started (main@9f3c2e1)", "scrFaint"],
+  ["16:58:31", "INFO", "compiled 214 routes in 28.4 s", "scrFaint"],
+  ["16:58:33", " OK ", "health check passed in fra1, iad1, sfo1", "ok"],
+  ["16:58:34", "INFO", "shifting 10% of traffic to #482", "scrFaint"],
+  ["16:59:04", " OK ", "error rate 0.02%, p95 184 ms", "ok"],
+  ["16:59:05", "INFO", "shifting 100% of traffic to #482", "scrFaint"],
+  ["16:59:36", "WARN", "sin1 p95 above 250 ms for 12 s", "warn"],
+  ["16:59:48", " OK ", "sin1 recovered, no rollback needed", "ok"],
+  ["17:00:00", " OK ", "deploy #482 is live in 8 regions", "ok"]
+];
+var saas_film_cinematic_trailer_default = defineTemplate({
+  id: "motion-saas-film-cinematic-trailer",
+  meta: {
+    name: "SaaS film: product trailer, cinematic 3D",
+    description: "A 30-second cinematic product trailer in real 3D, dark and premium: a laptop opens on your product while the camera pushes in, the UI comes apart into labelled layers, a wall of screens scrolls past the camera, and the end card lands. Four scenes dissolving into each other at 1920\xD71080, with music; the screens are components, with a picture slot for your own screenshot",
+    category: "animation",
+    tags: ["animation", "saas", "saas film", "trailer", "product trailer", "3d", "cinematic", "dark", "laptop", "exploded", "screen wall", "scenes", "music", "audio", "16:9", "launch"],
+    platforms: ["youtube", "x", "linkedin", "web", "product-hunt"],
+    formats: ["video", "ad", "intro", "demo"],
+    useCases: ["launch", "announcement", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { scenes },
+  build() {
+    const k = new Kit("SaaS film: product trailer, cinematic 3D", preset("video-1080p"));
+    k.quantizeGeometry = true;
+    k.brand(
+      {
+        background: "#05070B",
+        text: "#FFF9F0",
+        onBackground: "#C9CDD6",
+        primary: "#F2A257",
+        onPrimary: "#1A0F00",
+        accent: "#FFD3A1",
+        onAccent: "#1A0F00",
+        device: "#090B0F",
+        deviceEdge: "#C9B59B",
+        shell: "#3A3F49",
+        shellShade: "#23272E",
+        keys: "#12151A"
+      },
+      { name: "Halyard", tagline: "Deploys you can sleep through." }
+    );
+    k.palette({ scr: "#141B26", scrSide: "#0B1017", scrLine: "#2B3543", scrText: "#F1F3F6", scrFaint: "#98A1AF", ok: "#45DB98", warn: "#F2A257", onWarn: "#1A0F00", light: "#FFE3BD", cool: "#16233A", glowScreen: "#8FB4E8", rim: "#5B6676" });
+    const s = size("video-1080p");
+    const made = /* @__PURE__ */ new Set();
+    const T = (name, px, o = {}) => type(k, made, name, px, o);
+    const ui20 = () => T("UI", 20, { fontWeight: 500, leading: 1.3 });
+    const ui22 = () => T("UI strong", 22, { fontWeight: 600, leading: 1.3, tracking: -0.01 });
+    const mono18 = () => T("UI mono", 18, { fontWeight: 500, leading: 1.4, ...MONO });
+    const figure = () => T("UI figure", 46, { fontWeight: 700, leading: 1.1, tracking: -0.03, fontFeatures: { tnum: 1 } });
+    const sidebar = (parent, current, at) => {
+      const side = k.stack(parent, { width: SIDE, height: SH, fill: "scrSide", gap: 8, padding: { top: 30, right: 16, bottom: 28, left: 16 }, name: "Sidebar", ...at ? { absolute: at } : {} });
+      const mark = k.stack(side, { direction: "HORIZONTAL", gap: 12, align: "CENTER", padding: { top: 0, right: 0, bottom: 18, left: 10 }, name: "Console mark" });
+      k.ellipse(mark, 22, "warn", { name: "Mark" });
+      k.text(mark, "halyard", { style: T("UI brand", 24, { fontWeight: 700, leading: 1.2, ...MONO }), color: "scrText", autoWidth: true, name: "Console name" });
+      for (const item of ["Deploys", "Regions", "Logs", "Alerts", "Settings"]) {
+        const row = k.stack(side, { radius: 8, padding: { top: 9, right: 10, bottom: 9, left: 12 }, ...item === current ? { fill: "scrLine" } : {}, name: "Nav item" });
+        k.text(row, item, { style: item === current ? ui22() : ui20(), color: item === current ? "scrText" : "scrFaint", name: "Nav label" });
+      }
+      return side;
+    };
+    const tiles = (parent, o = {}) => {
+      const row = k.stack(parent, { direction: "HORIZONTAL", gap: 18, name: "Figures", ...o.width ? { width: o.width } : {}, ...o.at ? { absolute: o.at } : {} });
+      for (const [label, value, ink] of [["p95 latency", "184 ms", "scrText"], ["Error rate", "0.02%", "ok"], ["Deploys today", "14", "scrText"]]) {
+        const tile = k.stack(row, { gap: 4, fill: "scrSide", radius: 14, padding: { top: 18, right: 22, bottom: 20, left: 22 }, stroke: { color: "scrLine", width: 2, align: "INSIDE" }, name: "Figure tile" });
+        k.text(tile, label, { style: ui20(), color: "scrFaint", name: "Figure label" });
+        k.text(tile, value, { style: figure(), color: ink, name: "Figure value" });
+      }
+      return row;
+    };
+    const traffic = (parent, width, height, at) => {
+      const card = k.stack(parent, { width, height, fill: "scrSide", radius: 14, clip: true, stroke: { color: "scrLine", width: 2, align: "INSIDE" }, name: "Traffic", ...at ? { absolute: at } : {} });
+      const n = Math.floor((width - 40) / 16);
+      const bars = Array.from({ length: n }, (_, i) => {
+        const h = Math.round((height - 50) * (0.25 + 0.6 * Math.abs(Math.sin(i * 0.37) * Math.cos(i * 0.11 + 1)) + (i > n * 0.8 ? 0.12 : 0)));
+        return box(20 + i * 16, height - 20 - h, 9, h);
+      });
+      k.vector(card, width, height, bars, "warn", { name: "Requests", absolute: { x: 0, y: 0 } });
+      return card;
+    };
+    const queue = (parent, rows, o = {}) => {
+      const list = k.stack(parent, { gap: 10, name: "Deploy queue", ...o.width ? { width: o.width } : {}, ...o.at ? { absolute: o.at } : {} });
+      for (const [what, branch, when, state] of DEPLOYS.slice(0, rows)) {
+        const row = k.stack(list, { direction: "HORIZONTAL", gap: 16, align: "CENTER", fill: "scrSide", radius: 10, padding: { top: 14, right: 20, bottom: 14, left: 18 }, name: "Deploy" });
+        k.ellipse(row, 14, state, { name: "State" });
+        k.text(row, what, { style: ui22(), color: "scrText", name: "Deploy name" });
+        k.text(row, branch, { style: mono18(), color: "scrFaint", autoWidth: true, name: "Branch" });
+        k.text(row, when, { style: mono18(), color: "scrFaint", autoWidth: true, name: "Deployed at" });
+      }
+      return list;
+    };
+    const screen = (name, title2, description, build) => k.component(`Screen / ${name}`, { direction: "HORIZONTAL", width: SW, height: SH, fill: "scr", radius: DESKTOP_SCREEN.radius, clip: true, description }, (id) => {
+      sidebar(id, name);
+      const main = k.stack(id, { height: SH, gap: 22, padding: 36, name: "Main" });
+      const head = k.stack(main, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Head" });
+      k.text(head, title2, { style: T("UI title", 34, { fontWeight: 700, leading: 1.2, tracking: -0.025 }), color: "scrText", autoWidth: true, name: "Screen title" });
+      const env = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", fill: "scrLine", radius: 8, padding: { top: 6, right: 14, bottom: 6, left: 12 }, name: "Environment" });
+      k.ellipse(env, 12, "ok", { name: "Live dot" });
+      k.text(env, "production", { style: mono18(), color: "scrText", autoWidth: true, name: "Environment name" });
+      build(main);
+    });
+    const MAIN = SW - SIDE - 72;
+    screen("Deploys", "Deploys", "The deploy console: the figures, live traffic and the queue.", (main) => {
+      tiles(main);
+      traffic(main, MAIN, 170);
+      queue(main, 4);
+    });
+    screen("Regions", "Regions", "Latency in every region.", (main) => {
+      for (let r = 0; r < 2; r++) {
+        const row = k.stack(main, { direction: "HORIZONTAL", gap: 18, name: "Region row" });
+        for (const [code, city, ms, share] of REGIONS.slice(r * 4, r * 4 + 4)) {
+          const tile = k.stack(row, { gap: 8, fill: "scrSide", radius: 14, padding: 22, stroke: { color: "scrLine", width: 2, align: "INSIDE" }, name: "Region" });
+          k.text(tile, code, { style: T("UI brand", 24, { fontWeight: 700, leading: 1.2, ...MONO }), color: "scrText", name: "Region code" });
+          k.text(tile, city, { style: ui20(), color: "scrFaint", name: "Region city" });
+          k.text(tile, ms, { style: figure(), color: share > 0.6 ? "warn" : "scrText", name: "Region latency" });
+          const bar = k.stack(tile, { height: 10, fill: "scrLine", radius: 5, clip: true, name: "Region bar" });
+          k.rect(bar, Math.round(190 * share), 10, share > 0.6 ? "warn" : "ok", { name: "Region fill", radius: 5 });
+        }
+      }
+      queue(main, 2);
+    });
+    screen("Logs", "Logs", "The log of a deploy, line by line.", (main) => {
+      const lines = k.stack(main, { gap: 14, fill: "scrSide", radius: 14, padding: 26, stroke: { color: "scrLine", width: 2, align: "INSIDE" }, name: "Log" });
+      for (const [time, level, message, ink] of LOGS) {
+        const line = k.stack(lines, { direction: "HORIZONTAL", gap: 18, name: "Log line" });
+        k.text(line, time, { style: mono18(), color: "scrFaint", autoWidth: true, name: "Log time" });
+        k.text(line, level, { style: mono18(), color: ink, autoWidth: true, name: "Log level" });
+        k.text(line, message, { style: mono18(), color: "scrText", name: "Log message" });
+      }
+      tiles(main);
+    });
+    k.component("Screen / Your screenshot", { width: SW, height: SH, fill: "scr", radius: DESKTOP_SCREEN.radius, clip: true, description: "A picture slot the size of the laptop\u2019s screen: swap a display\u2019s Screen for this, and drop your screenshot on it." }, (id) => {
+      k.photo(id, SW, SH, { ground: "scrSide", name: "Your screenshot" });
+    });
+    devices(k, ["Laptop lid", "Laptop lid back", "Laptop base"], { laptop: "Screen / Deploys" });
+    const lit = (sheet, o) => {
+      k.rect(sheet, s.W, s.H, "background", { name: "Grain", effects: grain(0.07, 2, 23), absolute: { x: 0, y: 0 } });
+      glow(k, sheet, { x: o.x, y: o.y, w: o.pool * 2.1, h: o.pool * 1.3, role: "cool", alpha: 0.5, name: "Haze" });
+      glow(k, sheet, { x: o.x, y: o.y, w: o.pool, h: o.pool * 0.62, role: "light", alpha: 0.46, name: "Key light" });
+      if (o.shafts) for (const [x0, x1, a] of [[-0.34, -0.12, 0.1], [-0.08, 0.1, 0.14], [0.16, 0.36, 0.09]]) {
+        const top = o.x + 260, w = 900;
+        k.vector(sheet, s.W, o.horizon, [{ closed: true, points: [{ x: top - 30, y: 0 }, { x: top + 30, y: 0 }, { x: o.x + x1 * w, y: o.horizon }, { x: o.x + x0 * w, y: o.horizon }] }], [k.gradient({ from: "light", to: "light", fromOpacity: a, toOpacity: 0.015 })], { name: "Light shaft", absolute: { x: 0, y: 0 } });
+      }
+      k.rect(sheet, s.W, s.H - o.horizon, [k.gradient({ from: "light", to: "light", fromOpacity: 0.13, toOpacity: 0 })], { name: "Floor", absolute: { x: 0, y: o.horizon } });
+      glow(k, sheet, { x: o.x, y: o.horizon + 30, w: o.pool * 1.5, h: 150, role: "light", alpha: 0.3, name: "Floor pool" });
+      k.rect(sheet, s.W, 2, k.tint("text", 0.3), { name: "Horizon", absolute: { x: 0, y: o.horizon } });
+    };
+    const title = (px) => T("Title", px, { fontWeight: 800, leading: 0.98, tracking: -0.045 });
+    const lede = T("Lede", 34, { fontWeight: 500, leading: 1.35, tracking: -0.01 });
+    const sheets = sceneSheets(k, "video-1080p", scenes.map((x) => x.sheet));
+    const [open, layers, wallSheet, end] = sheets;
+    {
+      const CX = s.W * 0.665, HINGE = s.H * 0.7;
+      lit(open, { x: CX, y: HINGE - 250, pool: 1200, horizon: Math.round(HINGE + 40), shafts: true });
+      const halo = glow(k, open, { x: CX, y: HINGE - 300, w: 1300, h: 900, role: "glowScreen", alpha: 0.42, name: "Screen glow" });
+      const scene = stage(k, open, s, { duration: LENGTHS[0], fps: 30, perspective: 2400 });
+      const laptop = rig(k, scene, s, "Laptop", LID.width, LID.height, CX, HINGE - LID.height / 2);
+      k.patch(laptop, { scaleX: 0.64, scaleY: 0.64, rotateX: -13, rotateY: -14, anchorY: 1 });
+      const deck = k.instance(laptop, "Laptop base", {}, { name: "Keyboard deck" });
+      k.patch(deck, { x: Math.round((LID.width - BASE.width) / 2), y: LID.height, anchorY: 0, rotateX: 90, effects: [deviceShadow(0.7, 60, 110)] });
+      const spill = k.rect(laptop, BASE.width - 120, 420, [k.gradient({ from: "glowScreen", to: "glowScreen", fromOpacity: 0.5, toOpacity: 0 })], { name: "Screen spill" });
+      k.patch(spill, { x: Math.round((LID.width - BASE.width) / 2) + 60, y: LID.height, anchorY: 0, rotateX: 90, z: 3 });
+      const hinge = k.group(laptop, { x: 0, y: 0, width: LID.width, height: LID.height }, { name: "Hinge" });
+      k.patch(hinge, { anchorY: 1, rotateX: 10 });
+      const display = k.instance(hinge, "Laptop lid", {}, { name: "Display" });
+      k.patch(display, { z: 2 });
+      const off = k.rect(hinge, SW, SH, "device", { radius: DESKTOP_SCREEN.radius, name: "Screen off" });
+      k.patch(off, { x: (LID.width - SW) / 2, y: 24, z: 4, opacity: 0 });
+      const outside = k.instance(hinge, "Laptop lid back", {}, { name: "Lid outside" });
+      k.patch(outside, { z: -2, rotateY: 180 });
+      const wake = [OPEN_AT + 900, OPENED + 300];
+      key(k, hinge, "rotateX", [[OPEN_AT, -90, ease.out("expo")], [OPENED, 10]]);
+      key(k, off, "opacity", [[0, 1, ease.hold], [wake[0], 1, ease.out("cubic")], [wake[1], 0]]);
+      key(k, spill, "opacity", [[0, 0, ease.hold], [wake[0], 0, ease.out("cubic")], [wake[1], 1]]);
+      key(k, halo, "opacity", [[0, 0, ease.hold], [wake[0], 0, ease.out("cubic")], [wake[1], 1]]);
+      key(k, laptop, "rotateX", [[0, -3, ease.inOut("cubic")], [OPENED + 600, -13, ease.inOut("sine")], [LENGTHS[0], -16]]);
+      key(k, laptop, "rotateY", [[0, 12, ease.inOut("cubic")], [OPENED + 600, -8, ease.inOut("sine")], [LENGTHS[0], -18]]);
+      key(k, scene, "scene3d.camera.z", [[0, 320, ease.inOut("cubic")], [OPENED + 600, 60, ease.inOut("sine")], [LENGTHS[0], -160]]);
+      const words = k.stack(open, { width: 640, gap: 26, name: "Title card", absolute: { x: 110, y: 250 } });
+      k.text(words, "FRIDAY 16:58 \xB7 main to production", { style: T("Stamp", 26, { fontWeight: 700, leading: 1.3, tracking: 0.08, ...MONO }), color: "onBackground", name: "Stamp" });
+      k.text(words, "Ship on Friday. Sleep on Friday.", { style: title(128), color: "text", name: "Title" });
+      k.text(words, "Halyard rolls out in stages, watches every region, and rolls back on its own.", { style: lede, color: "onBackground", name: "Title note", width: 560 });
+    }
+    {
+      const CX = s.W * 0.66, CY = s.H * 0.64;
+      lit(layers, { x: CX, y: CY - 60, pool: 1300, horizon: 930 });
+      const scene = stage(k, layers, s, { duration: LENGTHS[1], fps: 30, perspective: 3e3 });
+      const iso = rig(k, scene, s, "Isometric", SW, SH, CX, CY);
+      k.patch(iso, { rotateX: 57, scaleX: 0.86, scaleY: 0.86 });
+      const turn = k.group(iso, { x: 0, y: 0, width: SW, height: SH }, { name: "Turn" });
+      k.patch(turn, { rotation: -34 });
+      const X = SIDE + 36;
+      const edge = { color: "rim", width: 2, align: "INSIDE" };
+      k.rect(turn, SW, SH, "scr", { radius: 16, name: "Window", stroke: edge, effects: [deviceShadow(0.7, 50, 110)] });
+      const side = sidebar(turn, "Deploys");
+      k.patch(side, { x: 0, y: 0, cornerRadius: 16 });
+      const q = queue(turn, 3, { width: MAIN });
+      k.patch(q, { x: X, y: 500 });
+      const tr = traffic(turn, MAIN, 190);
+      k.patch(tr, { x: X, y: 250 });
+      const ti = tiles(turn, { width: MAIN });
+      k.patch(ti, { x: X, y: 70 });
+      const toast = k.stack(turn, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", fill: "warn", radius: 12, padding: { top: 14, right: 22, bottom: 14, left: 18 }, name: "Rollback toast" });
+      k.ellipse(toast, 14, "onWarn", { name: "Toast dot" });
+      k.text(toast, "Rolled back to #481 in 4 s", { style: ui22(), color: "onWarn", autoWidth: true, name: "Toast words" });
+      k.patch(toast, { x: X + 40, y: SH - 110 });
+      const parts = [side, q, tr, ti, toast];
+      parts.forEach((id, i) => {
+        const z = LAYERS[i][0];
+        k.patch(id, { z, effects: [deviceShadow(0.55, 22, 46)], strokes: k.node(k.named(turn, "Window")[0]).strokes });
+        key(k, id, "z", [[LIFT + i * 200, 0, ease.back(1.2)], [LIFT + 1400 + i * 200, z]]);
+      });
+      key(k, turn, "rotation", [[0, -78, ease.inOut("cubic")], [SETTLED - 200, -34]]);
+      key(k, iso, "rotateX", [[0, 68, ease.inOut("cubic")], [SETTLED - 200, 57]]);
+      const doc = k.finish();
+      const frame = contextFrame(doc.nodes[scene]);
+      const cards = sceneLayers(doc.nodes, scene);
+      const seen = (id, x, y) => {
+        const card = cards.find((l) => l.id === id);
+        const p = transform4(mul4(frame.projection, mul4(frame.view, card.model)), x, y, 0);
+        return { x: p[0] / p[3], y: p[1] / p[3] };
+      };
+      const LX = 110;
+      const style = T("Leader", 36, { fontWeight: 700, leading: 1.2, tracking: -0.015 });
+      const ends = parts.map((id) => seen(id, 0, k.node(id).height / 2)).map((p, i) => ({ ...p, i })).sort((a, b) => a.y - b.y);
+      let last = 250;
+      for (const e of ends) {
+        const y = Math.max(last + 62, Math.min(820, Math.round(e.y)));
+        last = y;
+        const row = k.stack(layers, { direction: "HORIZONTAL", width: "HUG", gap: 16, align: "CENTER", name: "Leader", absolute: { x: LX, y: y - 22 } });
+        const words = k.text(row, LAYERS[e.i][1], { style, color: "text", autoWidth: true, name: "Leader name" });
+        const rule = k.rect(row, 20, 4, "primary", { name: "Leader rule", radius: 2 });
+        k.ellipse(row, 14, "primary", { name: "Leader end" });
+        k.patch(rule, { width: Math.max(40, Math.round(e.x - LX - k.finish().nodes[words].width - 16 * 2 - 14)) });
+      }
+      k.text(layers, "Nothing hidden. One layer deep.", { style: title(92), color: "text", width: 900, name: "Layers title", absolute: { x: LX, y: 70 } });
+    }
+    {
+      lit(wallSheet, { x: s.W * 0.6, y: s.H * 0.55, pool: 1700, horizon: 1200 });
+      const scene = stage(k, wallSheet, s, { duration: LENGTHS[2], fps: 30, perspective: 1500 });
+      const SCREENS = ["Screen / Deploys", "Screen / Regions", "Screen / Logs"];
+      const rows = 4, perRow = 9, gap = 90;
+      const wall = rig(k, scene, s, "Wall", SW, SH, s.W * 0.56, s.H * 0.5);
+      k.patch(wall, { scaleX: 0.5, scaleY: 0.5, rotateX: 48 });
+      const turn = k.group(wall, { x: 0, y: 0, width: SW, height: SH }, { name: "Wall turn" });
+      k.patch(turn, { rotation: -14 });
+      const pitch = SW + gap;
+      scrollingRows(k, turn, {
+        rows,
+        perRow,
+        card: DESKTOP_SCREEN,
+        gap,
+        offset: true,
+        wrap: SCREENS.length,
+        x: () => Math.round(-(perRow * pitch) / 2 + SW / 2),
+        y: (r) => Math.round((r - (rows - 1) / 2) * (SH + gap)),
+        rate: (r) => (r % 2 ? 1 : -1) * (260 + r % 3 * 90),
+        make: (row, r, i) => {
+          const card = k.instance(row, SCREENS[(i + r) % SCREENS.length], {}, { name: `Screen ${r + 1}.${i + 1}` });
+          k.patch(card, { effects: [deviceShadow(0.6, 30, 70)] });
+          return card;
+        }
+      });
+      key(k, wall, "rotateX", [[0, 58, ease.out("expo")], [1500, 48, ease.inOut("sine")], [LENGTHS[2], 44]]);
+      key(k, scene, "scene3d.camera.x", [[0, -620, ease.inOut("sine")], [LENGTHS[2], 620]]);
+      key(k, scene, "scene3d.camera.z", [[0, 500, ease.out("cubic")], [LENGTHS[2], -200]]);
+      k.rect(wallSheet, s.W, 460, [k.gradient({ from: "background", to: "background", fromOpacity: 0.8, toOpacity: 0 })], { name: "Distance", absolute: { x: 0, y: 0 } });
+      const plate = k.stack(wallSheet, { width: 860, gap: 22, fill: "background", radius: 28, padding: { top: 44, right: 52, bottom: 48, left: 52 }, stroke: { color: "rim", width: 2, align: "INSIDE" }, effects: [deviceShadow(0.7, 30, 80)], name: "Plate", absolute: { x: 110, y: 0 } });
+      k.text(plate, "Every deploy. Every region. Every log line.", { style: title(92), color: "text", name: "Wall title" });
+      k.text(plate, "Preview builds, staged rollouts and one-click rollback, for teams of one to fifty.", { style: lede, color: "onBackground", name: "Wall note" });
+      k.patch(plate, { y: Math.round(s.H - 96 - k.finish().nodes[plate].height) });
+    }
+    {
+      k.flowSheet(end, 0, 0, "background", "CENTER", "CENTER");
+      k.patch(end, { clipsContent: true });
+      k.timeline(end, { duration: LENGTHS[3], fps: 30 });
+      lit(end, { x: s.W / 2, y: 1040, pool: 1200, horizon: 900, shafts: false });
+      const col = column(s, 200);
+      const bigger = { ...s, u: 1.4 };
+      captionParts(k, bigger, { cta: "Start free at halyard.example" });
+      const card = endCard(k, end, bigger, { cta: "Start free at halyard.example", y: 0, width: col.width });
+      k.patch(card, { y: Math.max(70, Math.round((880 - k.finish().nodes[card].height) / 2)) });
+    }
+    playScenes(k, "comp-cinematic-trailer", "Product trailer, cinematic", sheets, scenes, "background");
+    k.setCover(open);
+    return withSound(k.finish(), { "comp-cinematic-trailer": B.audio });
+  }
+});
+
+export {
+  saas_film_cinematic_trailer_default
+};

package/dist/chunks/chunk-XQJ2VVC6.js

@@ -0,0 +1,69 @@
+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 {
+  FOLIO,
+  caption,
+  comicMeta,
+  comicSetup,
+  folio,
+  pageGrid,
+  panel,
+  rows,
+  say,
+  sfx,
+  slantTier,
+  tierBox,
+  tilted
+} from "./chunk-UBT4DZYW.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/print/comic-hero-manga-action.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var comic_hero_manga_action_default = defineTemplate({
+  id: "comic-manga-action",
+  meta: comicMeta("Manga action page", 'Page nine of "Nightstar: Blackout": the finishing blow on steep diagonal frames, Nightstar coming straight at the reader, Voltrix out of power, the punch through his armour with "KRAKKOOM!" and him flying through a truck', ["manga", "action", "diagonal", "speed", "sound effects"]),
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Manga action page", preset("comic-page"));
+    comicSetup(k);
+    drawPage(k);
+    return k.finish();
+  }
+});
+function drawPage(k) {
+  const g = 12, { W, H } = pageGrid(k, k.sheet, 36, g);
+  const [h1, h2, h3] = rows(H - FOLIO, g, [38, 34, 28]);
+  const t1 = tierBox(k, k.sheet, W, h1, "Tier 1");
+  const [a, b] = slantTier(W, h1, [3, 2], 44, g);
+  panel(k, t1, a, "manga-1", { ground: "heroG1", name: "Straight at him" });
+  panel(k, t1, b, "manga-2", { ground: "heroG2", name: "No power left" });
+  say(k, t1, "This one\u2019s for the city.", { x: 10, y: 10, width: 128, to: { x: a.width * 0.4, y: h1 * 0.3 } });
+  say(k, t1, "W-wait\u2014", { x: W - 108, y: h1 - 80, width: 96, to: { x: b.x + b.width * 0.6, y: h1 * 0.4 } });
+  const t2 = tierBox(k, k.sheet, W, h2, "Tier 2");
+  panel(k, t2, tilted(0, 0, W, h2, -30, 30), "manga-3", { ground: "heroG3", name: "The hit" });
+  sfx(k, t2, "Krakkoom!", { x: 20, y: h2 - 150, w: 480, h: 140, deg: -7, big: true, fill: "primary", seed: 23 });
+  const t3 = tierBox(k, k.sheet, W, h3, "Tier 3");
+  const [c, d] = slantTier(W, h3, [2, 3], -30, g);
+  panel(k, t3, c, "manga-4", { ground: "heroG1", name: "His eyes" });
+  panel(k, t3, d, "manga-5", { ground: "heroG2", name: "Through the truck" });
+  caption(k, t3, "Lights out, Voltrix.", { x: W - 170, y: h3 - 44, width: 160 });
+  folio(k, k.sheet, "Nightstar: Blackout \u2014 page 9");
+}
+
+export {
+  comic_hero_manga_action_default,
+  drawPage
+};

package/dist/chunks/chunk-XS6WFGSH.js

@@ -0,0 +1,110 @@
+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 {
+  FIGURES,
+  GRID,
+  LABEL,
+  LOW,
+  PEAK,
+  earthDayBrand,
+  fitGround,
+  fitMap,
+  groundContours,
+  legend,
+  reliefMap
+} from "./chunk-7QJUGD43.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/earth-day-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SPEC = {
+  days: 7,
+  tick: "Tick 16",
+  plate: "Plate 16",
+  plateHeight: 36,
+  marker: 24,
+  routeWeight: 4.5,
+  step: 8,
+  spots: [
+    { u: PEAK.u, d: PEAK.d, kind: "peak", label: `${GRID.peak} g \xB7 ${PEAK.day} ${PEAK.hour}`, side: "left", width: 196 },
+    { u: LOW.u, d: LOW.d, kind: "low", label: `${GRID.low} g \xB7 ${LOW.day} ${LOW.hour}`, side: "right", width: 186 }
+  ],
+  routes: [
+    { from: [0.76, 0.6], to: [0.55, 1.6], job: { label: "Nightly builds", at: [0.3, 1.1], width: 170 } },
+    { from: [0.76, 4.5], to: [LOW.u, LOW.d] }
+  ]
+};
+var earth_day_link_preview_default = defineTemplate({
+  id: "social-earth-day-link-preview",
+  meta: {
+    name: "Earth Day link preview",
+    description: "A link preview for a footprint or impact page, with no leaf on it: \u201CWe planted nothing.\u201D in a serif on survey paper, the two measured figures in one line, and a cut-paper relief map of a week of grid carbon running off the edge with its dirtiest and cleanest hours marked, a survey route and its key. 1200 \xD7 630, with a 1280 \xD7 640 GitHub social preview",
+    category: "social",
+    tags: ["earth day", "climate", "sustainability", "carbon", "footprint", "impact report", "topographic", "contour map", "relief", "cut paper", "serif", "link preview", "open graph", "og image", "github", "saas", "seasonal"],
+    platforms: ["web", "x", "linkedin", "facebook", "github"],
+    formats: ["og-image"],
+    useCases: ["announcement", "report"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Earth Day link preview", preset("og-image"));
+    k.quantizeGeometry = true;
+    earthDayBrand(k, { promise: "We planted nothing." });
+    k.textStyle("Eyebrow 16", { ...LABEL, size: 16, fontWeight: 700, letterSpacing: 1.6, lineHeight: 22 });
+    k.textStyle("Display 82", { ...SERIF, size: 82, fontWeight: 700, letterSpacing: -2.8, lineHeight: 80 });
+    k.textStyle("Facts 24", { size: 24, fontWeight: 500, lineHeight: 33 });
+    k.textStyle("Site 20", { ...MONO, size: 20, fontWeight: 700, lineHeight: 26 });
+    k.textStyle("Tick 16", { ...LABEL, size: 16, fontWeight: 700, letterSpacing: 0.8, lineHeight: 20 });
+    k.textStyle("Plate 16", { ...MONO, size: 16, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Legend 17", { size: 17, fontWeight: 700, lineHeight: 22 });
+    k.textStyle("Legend 16", { ...MONO, size: 16, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Label 18", { size: 18, fontWeight: 700, lineHeight: 24 });
+    pill(k, "Label", { fill: "primary", ink: "onPrimary", style: "Label 18", label: "Read the ledger", pad: [10, 18], radius: 6 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 22, { top: 56, right: 640, bottom: 56, left: 64 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    groundContours(k, sheet, 600, 630, { days: 4, opacity: 0.13 });
+    reliefMap(k, sheet, 620, 630, SPEC, { absolute: { x: 580, y: 0 } });
+    legend(k, sheet, { width: 250, title: "Legend 17", label: "Legend 16", swatch: 18, pad: 14, note: false, absolute: { x: 640, y: 486 } });
+    k.text(sheet, "{{brand.name}} \xB7 Earth Day 2026", { style: "Eyebrow 16", color: "onPaper", name: "Eyebrow" });
+    k.text(sheet, "{{brand.promise}}", { style: "Display 82", color: "text", name: "Headline" });
+    k.text(sheet, `Our footprint, measured: ${FIGURES.before} t down to ${FIGURES.after} t in a year. Here is what we changed.`, { style: "Facts 24", color: "onPaper", name: "Facts" });
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Foot" });
+    k.instance(foot, "Label", { Label: "Read the ledger" }, { name: "Call" });
+    k.text(foot, "{{brand.site}}/footprint", { style: "Site 20", color: "text", name: "Site" });
+    k.variants(sheet, [{ preset: "github-social", adjust: (kit, id) => {
+      kit.patch(id, { padding: { top: 56, right: 680, bottom: 56, left: 64 } });
+      for (const n of kit.named(id, "Map")) kit.patch(n, { x: 620, y: 0 });
+      fitMap(kit, id, 660, 640, SPEC);
+      fitGround(kit, id, 640, 640, { days: 4 });
+      for (const n of kit.named(id, "Legend")) kit.patch(n, { x: 700, y: 496 });
+    } }]);
+    return k.finish();
+  }
+});
+
+export {
+  earth_day_link_preview_default
+};