@popcraft/kit 0.53.14 → 0.53.16

package/dist/chunks/chunk-J2GDWPKA.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-LFRZKQ3W.js";
-import {
-  END_CARD_PARTS,
-  captionParts,
-  column,
-  endCard,
-  rig,
-  size,
-  stage
-} from "./chunk-JHZS7LRC.js";
-import {
-  scrollingRows
-} from "./chunk-NFVIST36.js";
-import {
-  key
-} from "./chunk-EJH22D33.js";
-import {
-  BASE,
-  LID,
-  deviceShadow,
-  devices
-} from "./chunk-QRXII5WN.js";
-import {
-  DESKTOP_SCREEN
-} from "./chunk-UIKLJRYQ.js";
-import {
-  MONO
-} from "./chunk-MPRWXHPJ.js";
-import {
-  bed
-} from "./chunk-FFTCIDXB.js";
-import {
-  glow,
-  grain
-} from "./chunk-4MEFPCMF.js";
-import {
-  box
-} from "./chunk-U2KTX33N.js";
-import {
-  into,
-  playScenes,
-  sceneSheets
-} from "./chunk-6RSSQGFR.js";
-import {
-  defineTemplate
-} from "./chunk-UU6U4UDR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-FJACE5LJ.js";
-import {
-  ease
-} from "./chunk-5J6ZG7JO.js";
-import {
-  contextFrame,
-  init_scene3d,
-  sceneLayers
-} from "./chunk-DZHR24NY.js";
-import {
-  init_transform3d,
-  mul4,
-  transform4
-} from "./chunk-GHDFAWY2.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-63KP74KB.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-J2ILV2DS.js

@@ -1,215 +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 {
-  ballPasses,
-  ballTravel,
-  burst,
-  clearConfetti,
-  confetti,
-  newYearBrand,
-  nightCity,
-  tickBox,
-  tower,
-  towerHeight
-} from "./chunk-G5MJQKQM.js";
-import {
-  MONO,
-  SERIF
-} from "./chunk-MPRWXHPJ.js";
-import {
-  buttons,
-  nav,
-  page,
-  webResponsive
-} from "./chunk-KLAIZ7BD.js";
-import {
-  defineTemplate
-} from "./chunk-UU6U4UDR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-FJACE5LJ.js";
-import {
-  ease
-} from "./chunk-5J6ZG7JO.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-63KP74KB.js";
-
-// templates/src/web/new-year-landing.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var LOOP = 8e3;
-var DROP = 1200;
-var MIDNIGHT = 4600;
-var BOARDS = [
-  { name: "Shipped", figure: "214", label: "features shipped", counter: { from: 0, to: 214 } },
-  { name: "Uptime", figure: "99.98%", label: "uptime, all year", counter: { from: 90, to: 99.98, decimals: 2, suffix: "%" } },
-  { name: "Hours", figure: "1,260,000", label: "hours handed back", counter: { from: 1e6, to: 126e4, separator: "," } }
-];
-var BOX = { w: 560, h: 620 };
-var TOWER = {
-  w: 500,
-  u: 0.64,
-  boards: BOARDS,
-  boardH: 78,
-  gap: 8,
-  signH: 112,
-  ball: 104,
-  figW: 198,
-  loopMs: LOOP,
-  mastRise: 60,
-  styles: { figure: "Figure 38", label: "Label 15", year: "Year 76", lastYear: "Last year 30", signLabel: "Sign label 13" }
-};
-var passes = BOARDS.map((_, i) => Math.round(DROP + (MIDNIGHT - 700 - DROP) * ballPasses(TOWER, i) / ballPasses(TOWER, BOARDS.length - 1)));
-var RESOLUTIONS = [
-  ["Stop chasing invoices by hand.", "Mainspring sends the reminder on day 1, 7 and 14, and stops the moment the payment lands.", "412,000 reminders sent"],
-  ["Send the Monday report on Monday.", "It pulls the numbers from your billing and CRM at 07:00 and posts the summary where your team already reads.", "96,300 reports, none late"],
-  ["Onboard every new account the same day.", "Signed contract in, workspace, seats and welcome call out. Nobody copies a name between tabs.", "median 4 min 12 s"],
-  ["Close the month without the spreadsheet.", "Every run is logged with who, what and when, so month-end is an export, not an archaeology dig.", "0 formulas to maintain"]
-];
-var counts = BOARDS.map((b, i) => ({ layer: `${b.name} figure`, at: passes[i], duration: 1200, counter: b.counter }));
-var cues = [
-  { layer: "Offer bar", preset: "drop-in", at: 0, params: { duration: 600 } },
-  { layer: "Nav", preset: "fade-in", at: 100, params: { duration: 700 } },
-  { layer: "Eyebrow", preset: "fade-in", at: 300, params: { duration: 700 } },
-  { layer: "Headline", preset: "blur-in", at: 350, params: { duration: 1e3, amount: 22 } },
-  { layer: "Visual", preset: "fade-in", at: 300, params: { duration: 800 } },
-  { layer: "Lead", preset: "rise-in", at: 900, params: { duration: 800 } },
-  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1300, params: { duration: 700 }, stagger: { delay: 140 } },
-  { layer: "Proof", preset: "fade-in", at: 2e3, params: { duration: 800 } },
-  ...BOARDS.map((b, i) => ({ layer: `${b.name} board`, preset: "pulse", at: passes[i], params: { duration: 500, amount: 0.035 } })),
-  { layer: "Tick", preset: "pop-in", at: 2200, params: { duration: 450 }, stagger: { delay: 350 } },
-  { layer: "Strike", preset: "wipe-in", at: MIDNIGHT, params: { duration: 300, direction: "right" } },
-  { layer: "Year", preset: "pop-in", at: MIDNIGHT, params: { duration: 500 } },
-  { layer: "Ball", preset: "pulse", at: MIDNIGHT, params: { duration: 700, amount: 0.12 } },
-  { layer: "Confetti", preset: "fade-in", at: MIDNIGHT, params: { duration: 500 } },
-  { layer: "Burst", preset: "scale-in", at: MIDNIGHT, params: { duration: 700 }, stagger: { delay: 280 } }
-];
-var new_year_landing_default = defineTemplate({
-  id: "web-new-year-landing",
-  meta: {
-    name: "New Year ball-drop landing page",
-    description: "A New Year landing page for a SaaS: an offer bar, a hero where a ball of gold light drops down a tower past sign boards whose figures count up (features shipped, uptime, hours saved), strikes out the old year and lights the new one under rockets and confetti; the resolutions the product keeps as a ruled checklist that ticks itself; and the annual-plan offer that ends at midnight \u2014 at desktop, laptop, tablet and phone widths",
-    category: "web",
-    tags: ["new year", "landing page", "hero", "website", "saas", "year in review", "ball drop", "countdown", "confetti", "counter", "resolutions", "annual plan", "offer", "animation", "responsive", "seasonal", "serif"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["sale", "stats", "launch"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  breakpoints: true,
-  motion: { cues, counts },
-  build() {
-    const k = new Kit("New Year ball-drop landing page", preset("web-desktop"));
-    k.quantizeGeometry = true;
-    newYearBrand(k);
-    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
-    k.textStyle("Brand 22", { ...SERIF, size: 22, fontWeight: 900, letterSpacing: -0.3, lineHeight: 28 });
-    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
-    k.textStyle("Bar 15", { size: 15, fontWeight: 700, lineHeight: 22, textAlign: "CENTER" });
-    k.textStyle("Eyebrow 14", { size: 14, fontWeight: 700, letterSpacing: 4, lineHeight: 20, textCase: "UPPER" });
-    k.textStyle("Display 92", { ...SERIF, size: 92, fontWeight: 900, letterSpacing: -3.2, lineHeight: 90 });
-    k.textStyle("Display 76", { ...SERIF, size: 76, fontWeight: 900, letterSpacing: -2.4, lineHeight: 78 });
-    k.textStyle("Display 64", { ...SERIF, size: 64, fontWeight: 900, letterSpacing: -1.8, lineHeight: 66 });
-    k.textStyle("Display 46", { ...SERIF, size: 46, fontWeight: 900, letterSpacing: -1.2, lineHeight: 50 });
-    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 32 });
-    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 27 });
-    k.textStyle("Proof 15", { ...MONO, size: 15, fontWeight: 500, lineHeight: 24 });
-    k.textStyle("Section 44", { ...SERIF, size: 44, fontWeight: 900, letterSpacing: -1.2, lineHeight: 50 });
-    k.textStyle("Section 32", { ...SERIF, size: 32, fontWeight: 900, letterSpacing: -0.8, lineHeight: 38 });
-    k.textStyle("Resolution 26", { ...SERIF, size: 26, fontWeight: 700, letterSpacing: -0.4, lineHeight: 32 });
-    k.textStyle("Body 18", { size: 18, fontWeight: 400, lineHeight: 29 });
-    k.textStyle("Kept 15", { ...MONO, size: 15, fontWeight: 600, lineHeight: 22 });
-    k.textStyle("Small 14", { size: 14, fontWeight: 500, lineHeight: 22 });
-    k.textStyle("Figure 38", { ...MONO, size: 38, fontWeight: 800, letterSpacing: -1.2, lineHeight: 44 });
-    k.textStyle("Label 15", { size: 15, fontWeight: 600, lineHeight: 19 });
-    k.textStyle("Year 76", { ...SERIF, size: 76, fontWeight: 900, letterSpacing: -2, lineHeight: 76 });
-    k.textStyle("Last year 30", { ...SERIF, size: 30, fontWeight: 700, letterSpacing: -0.6, lineHeight: 34 });
-    k.textStyle("Sign label 13", { size: 13, fontWeight: 700, letterSpacing: 2, lineHeight: 18, textCase: "UPPER" });
-    buttons(k, { style: "Button 16", pad: [15, 26], radius: 8 });
-    const sheet = k.sheet;
-    page(k, sheet, { gap: 64, top: 24 });
-    k.timeline(sheet, { duration: LOOP, fps: 30 });
-    const bar = k.stack(sheet, { fill: "primary", radius: 8, padding: { top: 10, right: 20, bottom: 10, left: 20 }, align: "CENTER", name: "Offer bar" });
-    k.text(bar, "Start {{brand.year}} on the annual plan: two months free, and your price is locked for the year. Ends at midnight, 1 January.", { style: "Bar 15", color: "onPrimary", name: "Offer bar text" });
-    nav(k, sheet, { links: ["Year in review", "Automations", "Pricing", "Changelog"], cta: "Start on annual", style: "Nav 16", brandStyle: "Brand 22" });
-    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", name: "Hero" });
-    const copy = k.stack(hero, { gap: 26, name: "Copy" });
-    k.text(copy, "{{brand.name}} \xB7 {{brand.lastYear}} in review", { style: "Eyebrow 14", color: "onPaper", name: "Eyebrow" });
-    k.text(copy, "New year, new stack.", { style: "Display 92", color: "text", name: "Headline" });
-    k.text(copy, "Mainspring chases the invoices, sends the Monday report and onboards the new account while you sleep. This year it handed 1.26 million hours back to 38,400 teams. Start the next one with the busywork already gone.", { style: "Lead 20", color: "onPaper", name: "Lead" });
-    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
-    k.instance(cta, "Button", { Label: "Start on annual" }, { name: "CTA primary" });
-    k.instance(cta, "Button quiet", { Label: "See the year in review" }, { name: "CTA quiet" });
-    k.text(copy, "2 months free on annual \xB7 price locked all year", { style: "Proof 15", color: "onPaper", name: "Proof" });
-    const holder = k.stack(hero, { width: BOX.w, height: BOX.h, name: "Visual holder" });
-    const visual = k.stack(holder, { width: BOX.w, height: BOX.h, fill: "card", radius: 24, clip: true, name: "Visual", absolute: { x: 0, y: 0 } });
-    nightCity(k, visual, { w: BOX.w, h: BOX.h, horizon: 520, u: 0.6, starsTop: 10, loopMs: LOOP });
-    burst(k, visual, { cx: 440, cy: 88, r: 84, u: 0.6 });
-    burst(k, visual, { cx: 120, cy: 70, r: 56, u: 0.6, role: "rose" });
-    burst(k, visual, { cx: 300, cy: 46, r: 40, u: 0.6, role: "ice" });
-    confetti(k, visual, { w: BOX.w, h: BOX.h, n: 40, u: 0.62, loopMs: LOOP });
-    const block = tower(k, visual, TOWER, { absolute: { x: 30, y: BOX.h - towerHeight(TOWER) - 84 } });
-    clearConfetti(k, visual, ["Tower"], { pad: 12 });
-    const travel = ballTravel(TOWER);
-    for (const b of k.named(block, "Ball")) k.animate(b, "translateY", [
-      { t: 0, v: -travel, ease: ease.hold },
-      ...BOARDS.map((_, i) => ({ t: passes[i], v: -travel * (1 - ballPasses(TOWER, i)), ease: ease.linear })),
-      { t: MIDNIGHT - 700, v: -travel * (1 - ballPasses(TOWER, BOARDS.length - 1)), ease: ease.out("bounce") },
-      { t: MIDNIGHT, v: 0 }
-    ]);
-    const list = k.stack(sheet, { gap: 0, name: "Resolutions" });
-    k.text(list, "Four resolutions, kept before breakfast", { style: "Section 44", color: "text", name: "Resolutions title" });
-    k.stack(list, { height: 28, name: "Gap" });
-    for (const [resolution, how, kept] of RESOLUTIONS) {
-      k.rect(list, "FILL", 1, "accent", { name: "Rule", opacity: 0.5 });
-      const row = k.stack(list, { direction: "HORIZONTAL", gap: 28, align: "CENTER", padding: { top: 24, right: 0, bottom: 24, left: 0 }, name: "Resolution" });
-      const head = k.stack(row, { direction: "HORIZONTAL", width: 440, gap: 18, align: "CENTER", name: "Resolution head" });
-      tickBox(k, head, { size: 40 });
-      k.text(head, resolution, { style: "Resolution 26", color: "text", name: "Resolution text" });
-      k.text(row, how, { style: "Body 18", color: "onPaper", name: "How" });
-      k.text(row, kept, { style: "Kept 15", color: "text", width: 240, align: "RIGHT", name: "Kept" });
-    }
-    k.rect(list, "FILL", 1, "accent", { name: "Rule", opacity: 0.5 });
-    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 40, align: "CENTER", justify: "SPACE_BETWEEN", fill: "card", radius: 12, stroke: { color: "accent", width: 1 }, padding: 48, name: "Band" });
-    const pitch = k.stack(band, { gap: 10, name: "Band copy" });
-    k.text(pitch, "Prices change when the ball lands.", { style: "Section 32", color: "onCard", name: "Band title" });
-    k.text(pitch, "Go annual before midnight on 1 January: two months free, and the price you pay today is the price you pay until next New Year. Monthly stays monthly; nothing else changes.", { style: "Body 18", color: "onCard", name: "Band text" });
-    k.instance(band, "Button", { Label: "Start {{brand.year}} on annual" }, { name: "Band button" });
-    k.text(sheet, "\xA9 {{brand.year}} Mainspring Labs \xB7 Security \xB7 Changelog \xB7 Status", { style: "Small 14", color: "onPaper", name: "Footer" });
-    k.counts(sheet, counts);
-    k.cues(sheet, cues);
-    webResponsive(k, sheet, {
-      stack: ["Hero", "Band", "Resolution"],
-      restyle: {
-        "Display 92": { laptop: "Display 76", tablet: "Display 64", mobile: "Display 46" },
-        "Lead 20": { mobile: "Lead 17" },
-        "Section 44": { mobile: "Section 32" }
-      },
-      gap: { tablet: 56, mobile: 44 },
-      tweak: (kit, id, size) => {
-        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48 });
-        if (size === "tablet" || size === "mobile") {
-          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 44, counterAxisAlignItems: "CENTER" });
-          for (const n of kit.named(id, "Band")) kit.patch(n, { itemSpacing: 24, padding: { top: 32, right: 24, bottom: 32, left: 24 } });
-          for (const n of kit.named(id, "Resolution")) kit.patch(n, { itemSpacing: 10, counterAxisAlignItems: "MIN" });
-          for (const n of kit.named(id, "Kept")) kit.patch(n, { textAlign: "LEFT" });
-        }
-        const s = size === "mobile" ? 335 / BOX.w : 1;
-        for (const n of kit.named(id, "Visual holder")) kit.patch(n, { layoutSizingHorizontal: "FIXED", layoutSizingVertical: "FIXED", width: Math.round(BOX.w * s), height: Math.round(BOX.h * s) });
-        for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: BOX.w, height: BOX.h, ...s === 1 ? {} : { anchorX: 0, anchorY: 0, scaleX: s, scaleY: s } });
-      }
-    });
-    return k.finish();
-  }
-});
-
-export {
-  new_year_landing_default
-};