@popcraft/kit 0.53.7 → 0.53.9

package/dist/chunks/chunk-WPIPSDQW.js

@@ -0,0 +1,104 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  evaluatePose
+} from "./chunk-QPYM3AO2.js";
+import {
+  frameTimeline,
+  timelineDuration
+} from "./chunk-7LDAND6F.js";
+import {
+  playRange,
+  timelineFps
+} from "./chunk-HEQLOQAN.js";
+import {
+  compositionDuration,
+  compositionTimeline
+} from "./chunk-HUYCKP2F.js";
+import {
+  getWorldRenderBounds,
+  getWorldTransform,
+  init_scene_graph,
+  uprightBounds
+} from "./chunk-OVUOQJPW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// lib/motion/sampler.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+var frameTime = (i, fps, startMs = 0) => startMs + i * 1e3 / fps;
+function frameIndexAt(t, fps, startMs = 0) {
+  const i = Math.round((t - startMs) * fps / 1e3);
+  return i > 0 ? i : 0;
+}
+var snapToFrame = (t, fps) => frameTime(frameIndexAt(t, fps), fps);
+function frameCount(start, end, fps) {
+  return Math.max(1, Math.ceil((end - start) * fps / 1e3 - 1e-9));
+}
+function targetTimeline(doc, target) {
+  if (target.kind === "composition") {
+    const comp = doc.compositions?.[target.compositionId];
+    return comp ? { timeline: compositionTimeline(comp), duration: compositionDuration(comp), fps: comp.fps } : null;
+  }
+  const node = doc.nodes[target.frameId];
+  if (!node) return null;
+  return { timeline: frameTimeline(doc.nodes, target.frameId), duration: timelineDuration(doc.nodes, target.frameId), fps: timelineFps(node.timeline) };
+}
+function frameRange(doc, target, range, fps) {
+  const tl = targetTimeline(doc, target);
+  if (!tl) return null;
+  const rate = fps ?? tl.fps;
+  const [start, end] = range === "work" ? playRange(tl.timeline, tl.duration) : [0, tl.duration];
+  return { start, end, fps: rate, count: frameCount(start, end, rate) };
+}
+function poseAt(doc, target, t) {
+  return evaluatePose(doc.nodes, target, t, target.kind === "composition" ? { compositions: doc.compositions } : {});
+}
+var samplePose = (doc, target, range, i) => poseAt(doc, target, frameTime(i, range.fps, range.start));
+function frameSchedule(stretches, fps, hold) {
+  const out = [];
+  const delay = Math.round(1e3 / fps);
+  for (const [from, to] of stretches) {
+    for (let i = 0; frameTime(i, fps, from) < to; i++) out.push({ t: frameTime(i, fps, from), delay });
+    out.push({ t: to, delay: hold });
+  }
+  return out;
+}
+function motionBounds(doc, rootId, times) {
+  let b = null;
+  for (const t of times) {
+    const nodes = poseAt(doc, { kind: "frame", frameId: rootId }, t).nodes;
+    const n = nodes[rootId];
+    if (!n) continue;
+    const d = { ...doc, nodes };
+    const r = getWorldRenderBounds(d, rootId) ?? uprightBounds(getWorldTransform(d, rootId), n.width, n.height);
+    b = b ? { minX: Math.min(b.minX, r.minX), minY: Math.min(b.minY, r.minY), maxX: Math.max(b.maxX, r.maxX), maxY: Math.max(b.maxY, r.maxY) } : { ...r };
+  }
+  return b;
+}
+function targetSize(doc, target) {
+  if (target.kind === "composition") {
+    const comp = doc.compositions?.[target.compositionId];
+    return comp ? { width: comp.width, height: comp.height } : null;
+  }
+  const node = doc.nodes[target.frameId];
+  return node ? { width: node.width, height: node.height } : null;
+}
+
+export {
+  frameTime,
+  snapToFrame,
+  frameCount,
+  frameRange,
+  poseAt,
+  samplePose,
+  frameSchedule,
+  motionBounds,
+  targetSize
+};

package/dist/chunks/chunk-WR7ZI67T.js

@@ -0,0 +1,95 @@
+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 {
+  sparkPath
+} from "./chunk-2VFVKPUT.js";
+import {
+  shadow
+} from "./chunk-YORIY3BT.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  ease
+} from "./chunk-ZGIMZ6SP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/social/saas-kit-ph-thumb.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 3600;
+var cues = [
+  { layer: "Pillow", preset: "pulse", at: 200, params: { duration: 900, amount: 0.07 } },
+  { layer: "Spark", preset: "pop-in", at: 500, params: { duration: 380 }, stagger: { delay: 220 } },
+  { layer: "Live", preset: "pulse", at: 1300, params: { duration: 700, amount: 0.12 } },
+  { layer: "Pillow", preset: "wobble", at: 1900, params: { duration: 900, amount: 6 } },
+  { layer: "Spark", preset: "pop-out", at: 2500, params: { duration: 320 }, stagger: { delay: 160 } }
+];
+var saas_kit_ph_thumb_default = defineTemplate({
+  id: "motion-saas-kit-ph-thumb",
+  meta: {
+    name: "SaaS launch Product Hunt thumbnail (animated)",
+    description: "A 240 \xD7 240 Product Hunt thumbnail that moves on hover, in the pastel soft UI look: your logo pillowed on a soft tile with a \u201CLive\u201D chip. Frame one is the whole mark (Product Hunt shows a still until hover); then the lights drift, the tile breathes and two sparks pop. A seamless 3.6-second loop to export as a GIF",
+    category: "animation",
+    tags: ["animation", "saas", "saas launch", "product hunt", "thumbnail", "logo", "logo sting", "gif", "pastel", "soft ui", "loop"],
+    platforms: ["product-hunt", "web"],
+    formats: ["thumbnail", "logo-sting"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("SaaS launch Product Hunt thumbnail (animated)", preset("ph-thumb"));
+    k.quantizeGeometry = true;
+    k.brand({ paper: "#FFE7D6", text: "#2B2440", primary: "#6FCBA8", onPrimary: "#FFFFFF", accent: "#FF8FA3", onAccent: "#3A0B16", card: "#FFFFFF", onCard: "#2B2440" }, { name: "Pebble" });
+    k.palette({ butter: "#FFD98A", sky: "#9FD4F5", rose: "#FFB3C0" });
+    k.textStyle("Chip 16", { size: 16, fontWeight: 800, letterSpacing: 0.4, lineHeight: 18, textCase: "UPPER" });
+    pill(k, "Chip", { fill: "accent", ink: "onAccent", style: "Chip 16", label: "Live", pad: [5, 10] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, 0, "paper", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    const blur = [{ type: "LAYER_BLUR", radius: 22, visible: true }];
+    const lights = [
+      ["Light butter", "butter", 150, -30, 120, 26, -18],
+      ["Light sky", "sky", 130, 130, -34, -22, 20],
+      ["Light rose", "rose", 120, 18, -36, 18, 22]
+    ];
+    for (const [name, role, size, x, y, dx, dy] of lights) {
+      const id = k.ellipse(sheet, size, role, { name, absolute: { x, y }, effects: blur, opacity: 0.9 });
+      const drift = (d) => [{ t: 0, v: 0, ease: ease.inOut("sine") }, { t: DURATION / 2, v: d, ease: ease.inOut("sine") }, { t: DURATION, v: 0 }];
+      k.animate(id, "translateX", drift(dx));
+      k.animate(id, "translateY", drift(dy));
+    }
+    const pillow = k.stack(sheet, { width: 156, height: 156, radius: 50, fill: "card", align: "CENTER", justify: "CENTER", name: "Pillow", effects: [shadow(k, "text", 0.16, 14, 28), shadow(k, "accent", 0.22, 4, 10)] });
+    const tile = k.stack(pillow, { width: 116, height: 116, radius: 36, fill: "primary", align: "CENTER", justify: "CENTER", name: "Mark tile", effects: [
+      // A crisp lit rim at the top and a shaded one at the foot: the tile reads as pressed from one piece.
+      { type: "INNER_SHADOW", color: k.color("onPrimary", 0.8), offset: { x: 0, y: 3 }, blur: 2, spread: 0, visible: true },
+      { type: "INNER_SHADOW", color: k.color("text", 0.22), offset: { x: 0, y: -4 }, blur: 5, spread: 0, visible: true }
+    ] });
+    k.logo(tile, 72, 72);
+    k.instance(sheet, "Chip", { Label: "Live" }, { name: "Live", absolute: { x: 150, y: 28 } });
+    k.vector(sheet, 28, 28, [sparkPath(28)], "accent", { name: "Spark", absolute: { x: 18, y: 50 } });
+    k.vector(sheet, 22, 22, [sparkPath(22)], "primary", { name: "Spark", absolute: { x: 196, y: 178 } });
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  saas_kit_ph_thumb_default
+};

package/dist/chunks/chunk-WRH7O3SO.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-6KMAJZO7.js";
+import {
+  END_CARD_PARTS,
+  captionParts,
+  column,
+  endCard,
+  rig,
+  size,
+  stage
+} from "./chunk-NO3QCKGC.js";
+import {
+  scrollingRows
+} from "./chunk-PQNDFOQT.js";
+import {
+  key
+} from "./chunk-LAPZ2X3J.js";
+import {
+  BASE,
+  LID,
+  deviceShadow,
+  devices
+} from "./chunk-WXWK2NO7.js";
+import {
+  DESKTOP_SCREEN
+} from "./chunk-2KFYCU3X.js";
+import {
+  MONO
+} from "./chunk-AXAAXHZF.js";
+import {
+  bed
+} from "./chunk-KHGNV7UQ.js";
+import {
+  glow,
+  grain
+} from "./chunk-YORIY3BT.js";
+import {
+  box
+} from "./chunk-EJLCQVQK.js";
+import {
+  into,
+  playScenes,
+  sceneSheets
+} from "./chunk-NTOTXPPO.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  ease
+} from "./chunk-ZGIMZ6SP.js";
+import {
+  contextFrame,
+  init_scene3d,
+  sceneLayers
+} from "./chunk-NWNYARD6.js";
+import {
+  init_transform3d,
+  mul4,
+  transform4
+} from "./chunk-T2SCC6PU.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.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
+};