@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-S23IRIYF.js

@@ -1,415 +0,0 @@
-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-MZODLFLE.js";
-import {
-  END_CARD_PARTS,
-  captionParts,
-  column,
-  endCard,
-  rig,
-  size,
-  stage
-} from "./chunk-ZPQYHYFA.js";
-import {
-  scrollingRows
-} from "./chunk-YHHFBEAC.js";
-import {
-  key
-} from "./chunk-FAAVZ2GX.js";
-import {
-  BASE,
-  LID,
-  deviceShadow,
-  devices
-} from "./chunk-SKMGZGNY.js";
-import {
-  DESKTOP_SCREEN
-} from "./chunk-7LNASDR7.js";
-import {
-  MONO
-} from "./chunk-X23ZWFW2.js";
-import {
-  bed
-} from "./chunk-52GCV7N5.js";
-import {
-  glow,
-  grain
-} from "./chunk-HVK5T4I5.js";
-import {
-  box
-} from "./chunk-BNVLVZUT.js";
-import {
-  into,
-  playScenes,
-  sceneSheets
-} from "./chunk-3HDJLLZM.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-T3SGRYUX.js";
-import {
-  ease
-} from "./chunk-6DWY3DOQ.js";
-import {
-  contextFrame,
-  init_scene3d,
-  sceneLayers
-} from "./chunk-MF4NUZBE.js";
-import {
-  init_transform3d,
-  mul4,
-  transform4
-} from "./chunk-7ECF2YL5.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.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-S3C6L5KF.js

@@ -1,45 +0,0 @@
-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 {
-  saas_store_panorama_default
-} from "./chunk-ZVMY6CV7.js";
-import {
-  saas_store_play_kit_default
-} from "./chunk-OOGCRXNV.js";
-import {
-  saas_store_story_default
-} from "./chunk-ECHHT5KG.js";
-import {
-  saas_store_b2b_ads_default
-} from "./chunk-7AKS6GMG.js";
-import {
-  saas_store_caption_set_default
-} from "./chunk-IHCLOKGO.js";
-import {
-  saas_store_chrome_kit_default
-} from "./chunk-X5RPTBKJ.js";
-import {
-  saas_store_ipad_set_default
-} from "./chunk-LUJ7T65D.js";
-import {
-  saas_store_install_ad_default
-} from "./chunk-S4H6L5V7.js";
-import {
-  saas_store_paywall_default
-} from "./chunk-SY2AWH4M.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/saas/stores.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var pack = [saas_store_caption_set_default, saas_store_ipad_set_default, saas_store_panorama_default, saas_store_story_default, saas_store_play_kit_default, saas_store_chrome_kit_default, saas_store_paywall_default, saas_store_install_ad_default, saas_store_b2b_ads_default];
-var stores_default = pack;
-
-export {
-  stores_default
-};

package/dist/chunks/chunk-S3IBBQ6X.js

@@ -1,178 +0,0 @@
-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 {
-  FLAP_HOWTO,
-  apron,
-  boardBrand,
-  bolts,
-  chevrons,
-  flaps,
-  flipIn,
-  housing,
-  lamps,
-  picto,
-  rods,
-  sign
-} from "./chunk-JL5YRMNU.js";
-import {
-  MONO
-} from "./chunk-X23ZWFW2.js";
-import {
-  score
-} from "./chunk-52GCV7N5.js";
-import {
-  put
-} from "./chunk-QLV6445V.js";
-import {
-  feedVariants,
-  pill,
-  verticalPadding
-} from "./chunk-EK5CFFJO.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset,
-  swapTimes
-} from "./chunk-T3SGRYUX.js";
-import {
-  ease
-} from "./chunk-6DWY3DOQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/motion/departure-board-reel.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var MUSIC = score("tension");
-var DURATION = MUSIC.duration;
-var beat = MUSIC.beat;
-var HOOK = ["SPEAK IT", "BEFORE", "YOU LAND"];
-var PHRASES = [["BOM DIA", "READY", true], ["OBRIGADO", "READY", true], ["A CONTA", "NEXT", false]];
-var CELL = 92;
-var SMALL = 46;
-var SIGN_W = 800;
-var swaps = [
-  { layer: "Caption", words: ["You booked Lisbon. You have 19 days.", "Layover picks the 300 phrases that trip needs.", "Ten minutes a day, at the gate or on the train.", "Land already knowing how to order dinner."], at: beat(4), hold: 2100, stagger: 50, in: 350, out: 250, unit: "word", rise: 30 }
-];
-var counts = [{ layer: "Ready count", at: beat(6), duration: beat(8), counter: { from: 198, to: 214 }, tick: 250 }];
-var cues = [
-  { layer: "Sign", preset: "drop-in", at: 0, params: { duration: 500 } },
-  { layer: "Board head", preset: "fade-in", at: 200, params: { duration: 500 } },
-  { layer: "Today", preset: "fade-in", at: beat(4), params: { duration: 500 } },
-  { layer: "Status 1", preset: "pop-in", at: beat(8), params: { duration: 400 } },
-  { layer: "Status 2", preset: "pop-in", at: beat(12), params: { duration: 400 } },
-  { layer: "Status 3", preset: "pop-in", at: beat(16), params: { duration: 400 } },
-  { layer: "Parked plane", preset: "slide-in", at: beat(4), params: { duration: 3e3, direction: "right", distance: 700 } },
-  { layer: "Call", preset: "rise-in", at: beat(24), params: { duration: 600 } },
-  { layer: "Site", preset: "fade-in", at: beat(25), params: { duration: 600 } },
-  { layer: "Call", preset: "pulse", at: beat(28), params: { duration: 900, amount: 0.05 } }
-];
-var departure_board_reel_default = defineTemplate({
-  id: "motion-departure-board-reel",
-  meta: {
-    name: "Departure board app launch reel",
-    description: "A 16-second launch reel for a mobile subscription app, drawn as an airport departure hall: the hook is spelled on a split-flap board in the first second, tile by flipping tile, under a yellow wayfinding sign; the lower rows flip to today\u2019s phrases and turn to a lit READY, an airliner taxis in along the floor, and the offer rises \u2014 with the story in burned-in captions over a ticking countdown track (made by PopCraft, CC0), every flip on a beat. 9:16 with 1:1 and 4:5 cuts. " + FLAP_HOWTO,
-    category: "animation",
-    tags: ["animation", "departure board", "split-flap", "airport", "wayfinding", "boarding pass", "travel", "language app", "mobile app", "subscription app", "reel", "captions", "music", "audio", "launch"],
-    platforms: ["tiktok", "instagram", "youtube"],
-    formats: ["reel", "short", "story", "post", "portrait-post"],
-    useCases: ["launch", "announcement", "brand-intro"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, swaps },
-  build() {
-    const k = new Kit("Departure board app launch reel", preset("ig-story"));
-    k.quantizeGeometry = true;
-    boardBrand(k);
-    k.textStyle("Sign 44", { size: 44, fontWeight: 800, letterSpacing: -1.2, lineHeight: 46 });
-    k.textStyle("Sign note 22", { ...MONO, size: 22, fontWeight: 700, letterSpacing: 1.2, lineHeight: 28, textCase: "UPPER" });
-    k.textStyle("Board label 20", { ...MONO, size: 20, fontWeight: 700, letterSpacing: 2.4, lineHeight: 26, textCase: "UPPER" });
-    k.textStyle("Caption 40", { size: 40, fontWeight: 700, letterSpacing: -0.6, lineHeight: 48, textAlign: "CENTER" });
-    k.textStyle("Caption 34", { size: 34, fontWeight: 700, letterSpacing: -0.4, lineHeight: 42, textAlign: "CENTER" });
-    k.textStyle("Button 32", { size: 32, fontWeight: 800, letterSpacing: -0.4, lineHeight: 40 });
-    k.textStyle("Site 24", { ...MONO, size: 24, fontWeight: 600, lineHeight: 32, textAlign: "CENTER" });
-    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "Get {{brand.name}} free", pad: [22, 44], radius: 14 });
-    const sheet = k.sheet;
-    k.nameSheet(sheet, "Launch reel");
-    k.flowSheet(sheet, 0, verticalPadding(), "paper", "SPACE_BETWEEN", "CENTER");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: 30, audio: MUSIC.audio });
-    lamps(k, sheet, 1080, 0, 3, 1, 520);
-    const plane = picto(k, sheet, "plane", 72, "primary", { deg: 90, name: "Overflight", absolute: { x: -120, y: 96 } });
-    rods(k, sheet, (1080 - SIGN_W) / 2, 250, SIGN_W, 1);
-    apron(k, sheet, 1080, 1490);
-    chevrons(k, sheet, 1080, 40, { x: 0, y: 1880 });
-    sign(k, sheet, "Departures", { style: "Sign 44", u: 1, width: SIGN_W, note: "Lisbon LIS \xB7 gate closes in 19 days", noteStyle: "Sign note 22" });
-    const board = housing(k, sheet, { width: 880, pad: 40, gap: 14, name: "Board" });
-    const head = k.stack(board, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Board head" });
-    const live = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", name: "Live" });
-    k.ellipse(live, 14, "go", { name: "Live lamp" });
-    k.text(live, "Now boarding", { style: "Board label 20", color: "flapInk", autoWidth: true, name: "Live label" });
-    k.text(head, "TP 1351 \xB7 LIS", { style: "Board label 20", color: "flapDim", autoWidth: true, name: "Flight" });
-    const hook = k.stack(board, { gap: 14, name: "Hook" });
-    HOOK.forEach((line, i) => flaps(k, hook, line, { cell: CELL, cols: 8, name: `Hook row ${i + 1}` }));
-    const today = k.stack(board, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 10, right: 0, bottom: 0, left: 0 }, name: "Today" });
-    k.text(today, "Today\u2019s phrases", { style: "Board label 20", color: "flapDim", autoWidth: true, name: "Today label" });
-    const ready = k.stack(today, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", name: "Ready" });
-    const cell = k.stack(ready, { width: 44, align: "MAX", name: "Ready cell" });
-    k.text(cell, "214", { style: "Board label 20", color: "flapInk", align: "RIGHT", name: "Ready count" });
-    k.text(ready, "of 300 ready", { style: "Board label 20", color: "flapDim", autoWidth: true, name: "Ready label" });
-    const phrases = k.stack(board, { gap: 10, name: "Phrases" });
-    PHRASES.forEach(([phrase, status, hot], i) => {
-      const row = k.stack(phrases, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: `Phrase ${i + 1}` });
-      flaps(k, row, phrase, { cell: SMALL, cols: 10, name: `Phrase row ${i + 1}` });
-      flaps(k, row, status, { cell: SMALL, cols: 5, hot, name: `Status ${i + 1}` });
-    });
-    const foot = k.stack(sheet, { gap: 16, align: "CENTER", name: "Foot" });
-    const says = k.stack(foot, { height: 96, justify: "CENTER", name: "Caption box" });
-    k.text(says, swaps[0].words[0], { style: "Caption 40", color: "text", name: "Caption" });
-    const side = verticalPadding();
-    k.instance(foot, "Button", { Label: "Get {{brand.name}} free" }, { name: "Call" });
-    k.text(foot, "First trip free \xB7 {{brand.site}}", { style: "Site 24", color: "onPaper", name: "Site" });
-    if (swapTimes(swaps[0]).at(-1).gone > DURATION) throw new Error("departure reel: the captions run past the music");
-    k.counts(sheet, counts);
-    k.swaps(sheet, swaps);
-    k.cues(sheet, cues);
-    bolts(k, board, 40);
-    k.animate(plane, "translateX", [{ t: 0, v: 0, ease: ease.linear }, { t: DURATION, v: 1320 }]);
-    HOOK.forEach((_, i) => {
-      for (const r of k.named(sheet, `Hook row ${i + 1}`)) flipIn(k, r, i * 240, { seed: 3 + i, flips: 5, stagger: 30 });
-    });
-    PHRASES.forEach((_, i) => {
-      const at = beat(6 + i * 4);
-      for (const r of k.named(sheet, `Phrase row ${i + 1}`)) flipIn(k, r, at, { seed: 11 + i });
-      for (const r of k.named(sheet, `Status ${i + 1}`)) flipIn(k, r, at + beat(2), { seed: 17 + i, flips: 3 });
-    });
-    const feed = (kit, id, h, signY) => {
-      for (const name of ["Apron", "Overflight"]) for (const n of kit.named(id, name)) kit.patch(n, { visible: false });
-      put(kit, id, "Chevrons", 0, h - 28, { width: 1080, height: 28, scaleX: 1, scaleY: 1 });
-      for (const n of kit.named(id, "Rod")) kit.patch(n, { y: 0, height: signY + 4 });
-      for (const n of kit.named(id, "Board")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 880 });
-      for (const n of kit.named(id, "Foot")) kit.patch(n, { itemSpacing: 14 });
-      for (const n of kit.named(id, "Caption")) kit.restyle(n, "Caption 34");
-      for (const n of kit.named(id, "Caption box")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 880 });
-    };
-    k.variants(sheet, feedVariants({ post: 40, portrait: 56 }, {
-      post: (kit, id) => {
-        feed(kit, id, 1080, 40);
-        for (const name of ["Today", "Phrases"]) for (const n of kit.named(id, name)) kit.patch(n, { visible: false });
-        kit.named(id, "Bolt").slice(2).forEach((n) => kit.patch(n, { y: kit.node(n).y - 276 }));
-      },
-      portrait: (kit, id) => feed(kit, id, 1350, 56)
-    }));
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-
-export {
-  departure_board_reel_default
-};