@popcraft/kit 0.32.0 → 0.32.1

package/dist/chunks/chunk-XNIGSGRA.js

@@ -1,137 +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 {
-  androidVariant,
-  screen,
-  statusBar
-} from "./chunk-DFO4652V.js";
-import {
-  defineTemplate
-} from "./chunk-HLBQLOTA.js";
-import {
-  Kit,
-  preset
-} from "./chunk-2P7ISWIA.js";
-import {
-  ease
-} from "./chunk-YYQUCS6P.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/app/success-confetti.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var cues = [
-  { layer: "Badge", preset: "pop-in", at: 0, params: { duration: 600 } },
-  { layer: "Ring", preset: "scale-in", at: 100, params: { duration: 700 } },
-  { layer: "Ring", preset: "fade-out", at: 800, params: { duration: 500 } },
-  { layer: "Title", preset: "rise-in", at: 450 },
-  { layer: "Body", preset: "rise-in", at: 600 },
-  { layer: "Details", preset: "rise-in", at: 750 },
-  { layer: ["Primary action", "Quiet action"], preset: "rise-in", at: 900, stagger: { delay: 100 } }
-];
-var CONFETTI = 28;
-var BURST = { at: 120, out: 700, fall: 2600 };
-var rand = (i, salt) => {
-  const x = Math.sin(i * 12.9898 + salt * 78.233) * 43758.5453;
-  return x - Math.floor(x);
-};
-var success_confetti_default = defineTemplate({
-  id: "app-success-confetti",
-  meta: {
-    name: "Success with confetti",
-    description: "A booking-confirmed screen that celebrates: the tick pops with a ripple, confetti bursts out and drifts down, and the details and next steps rise in \u2014 iPhone with an Android copy",
-    category: "app",
-    tags: ["animation", "success", "confetti", "confirmation", "celebration", "booking", "app", "mobile", "ios", "android"],
-    platforms: ["ios", "android"],
-    formats: ["screen"],
-    useCases: ["announcement", "event"],
-    created: "2026-09-29",
-    updated: "2026-09-29"
-  },
-  breakpoints: true,
-  motion: { cues },
-  build() {
-    const k = new Kit("Success with confetti", preset("iphone-17"));
-    k.brand({ paper: "#FBF8F4", text: "#1F1A2E", onPaper: "#5B5568", primary: "#6A4FC7", onPrimary: "#FFFFFF", accent: "#F2A93B", card: "#FFFFFF", onCard: "#1F1A2E", cardMuted: "#696377", pink: "#E86A92", mint: "#4FB59A", sky: "#5B9BE6" }, { name: "Stillpoint Yoga" });
-    k.textStyle("Status 15", { size: 15, fontWeight: 600, lineHeight: 20 });
-    k.textStyle("Tick 52", { size: 52, fontWeight: 800, lineHeight: 56, textAlign: "CENTER" });
-    k.textStyle("Title 34", { size: 34, fontWeight: 800, letterSpacing: -0.8, lineHeight: 40, textAlign: "CENTER" });
-    k.textStyle("Body 17", { size: 17, fontWeight: 400, lineHeight: 25, textAlign: "CENTER" });
-    k.textStyle("Label 13", { size: 13, fontWeight: 600, letterSpacing: 0.3, lineHeight: 18 });
-    k.textStyle("Value 16", { size: 16, fontWeight: 600, lineHeight: 22 });
-    k.textStyle("Button 17", { size: 17, fontWeight: 700, lineHeight: 24 });
-    k.component("Detail", { gap: 2, width: 300, props: { Label: "When", Value: "Saturday 4 October, 9:00\u201310:15" } }, (id) => {
-      k.propText(id, "Label", { style: "Label 13", color: "cardMuted" });
-      k.propText(id, "Value", { style: "Value 16", color: "onCard" });
-    });
-    const btn = { direction: "HORIZONTAL", width: "HUG", radius: 14, align: "CENTER", padding: { top: 16, right: 28, bottom: 16, left: 28 } };
-    k.component("Button", { ...btn, fill: "primary", props: { Label: "Add to calendar" } }, (id) => {
-      k.propText(id, "Label", { style: "Button 17", color: "onPrimary", autoWidth: true });
-    });
-    k.component("Button quiet", { ...btn, props: { Label: "View my bookings" } }, (id) => {
-      k.propText(id, "Label", { style: "Button 17", color: "text", autoWidth: true });
-    });
-    const sheet = k.sheet;
-    k.nameSheet(sheet, "Booked");
-    screen(k, sheet, { gap: 20, align: "CENTER", justify: "SPACE_BETWEEN" });
-    k.timeline(sheet, { duration: 4e3, fps: 30 });
-    statusBar(k, sheet, { style: "Status 15" });
-    const hero = k.stack(sheet, { gap: 18, align: "CENTER", name: "Hero" });
-    const mark = k.stack(hero, { width: "HUG", align: "CENTER", padding: { top: 24, right: 0, bottom: 8, left: 0 }, name: "Mark" });
-    k.ellipse(mark, 150, [], { name: "Ring", stroke: { color: "accent", width: 3 }, absolute: { x: -19, y: 5 } });
-    const badge = k.stack(mark, { direction: "HORIZONTAL", width: 112, height: 112, radius: 56, fill: "primary", align: "CENTER", justify: "CENTER", name: "Badge" });
-    k.text(badge, "\u2714", { style: "Tick 52", color: "onPrimary", autoWidth: true, name: "Tick" });
-    k.text(hero, "You\u2019re booked!", { style: "Title 34", color: "text", name: "Title" });
-    k.text(hero, "Saturday Flow with Maya is waiting for you. We\u2019ve sent the details to your email.", { style: "Body 17", color: "onPaper", name: "Body" });
-    const details = k.stack(hero, { gap: 14, fill: "card", radius: 18, padding: 20, name: "Details" });
-    for (const [l, v] of [["When", "Saturday 4 October, 9:00\u201310:15"], ["Where", "Studio 2, 18 Alder Lane"], ["Teacher", "Maya Lindqvist"], ["Bring", "A mat and water \u2014 towels are on us"]]) k.instance(details, "Detail", { Label: l, Value: v }, { name: "Detail", width: "FILL" });
-    const actions = k.stack(sheet, { gap: 8, align: "CENTER", name: "Actions" });
-    k.instance(actions, "Button", { Label: "Add to calendar" }, { name: "Primary action" });
-    k.instance(actions, "Button quiet", { Label: "View my bookings" }, { name: "Quiet action" });
-    k.cues(sheet, cues);
-    const android = k.variants(sheet, [androidVariant("Booked")])[0];
-    k.finish();
-    for (const id of [sheet, android]) confetti(k, id);
-    return k.finish();
-  }
-});
-function confetti(k, sheet) {
-  const badge = k.named(sheet, "Badge")[0];
-  const W = k.node(sheet).width;
-  let bx = 0, by = 0;
-  for (let n = k.node(badge); n.id !== sheet; n = k.node(n.parentId)) {
-    bx += n.x;
-    by += n.y;
-  }
-  const origin = { x: bx + k.node(badge).width / 2, y: by + k.node(badge).height / 2 };
-  const layer = k.stack(sheet, { width: W, height: 560, name: "Confetti", absolute: { x: 0, y: 0 } });
-  const colours = ["accent", "pink", "mint", "sky", "primary"];
-  for (let i = 0; i < CONFETTI; i++) {
-    const round = i % 3 === 0;
-    const w = round ? 10 : 8 + Math.round(rand(i, 1) * 5), h = round ? 10 : 14 + Math.round(rand(i, 2) * 6);
-    const angle = i / CONFETTI * Math.PI * 2 + rand(i, 3) * 0.4;
-    const reach = 110 + rand(i, 4) * 150;
-    const x = Math.round(origin.x + Math.cos(angle) * reach - w / 2), y = Math.round(origin.y + Math.sin(angle) * reach * 0.8 - h / 2);
-    const colour = colours[i % colours.length];
-    const piece = round ? k.ellipse(layer, 10, colour, { name: "Confetti piece", absolute: { x, y } }) : k.rect(layer, w, h, colour, { radius: 2, name: "Confetti piece", absolute: { x, y } });
-    const turn = Math.round(rand(i, 5) * 180 - 90);
-    k.patch(piece, { rotation: turn });
-    const t0 = BURST.at + Math.round(rand(i, 6) * 120);
-    const dx = origin.x - (x + w / 2), dy = origin.y - (y + h / 2);
-    k.animate(piece, "translateX", [{ t: t0, v: dx, ease: ease.out("expo") }, { t: t0 + BURST.out, v: 0, ease: ease.inOut("sine") }, { t: t0 + BURST.fall, v: Math.round((rand(i, 7) - 0.5) * 40) }]);
-    k.animate(piece, "translateY", [{ t: t0, v: dy, ease: ease.out("expo") }, { t: t0 + BURST.out, v: 0, ease: ease.named("quad", "in") }, { t: t0 + BURST.fall, v: 160 + Math.round(rand(i, 8) * 80) }]);
-    k.animate(piece, "opacity", [{ t: t0, v: 0, ease: ease.linear }, { t: t0 + 60, v: 1 }, { t: t0 + 1800, v: 1, ease: ease.out("quad") }, { t: t0 + BURST.fall, v: 0 }]);
-    k.animate(piece, "rotation", [{ t: t0, v: turn, ease: ease.out("cubic") }, { t: t0 + BURST.fall, v: turn + (rand(i, 9) > 0.5 ? 1 : -1) * (180 + Math.round(rand(i, 10) * 360)) }]);
-  }
-}
-
-export {
-  CONFETTI,
-  BURST,
-  success_confetti_default
-};

package/dist/chunks/chunk-XNMDDRTY.js

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

package/dist/chunks/chunk-XNXQIO3C.js

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