@popcraft/kit 0.26.0 → 0.27.0

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

package/dist/chunks/chunk-37SP4EL7.js

@@ -0,0 +1,200 @@
+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 {
+  soft
+} from "./chunk-KQT2UCKL.js";
+import {
+  gridPaths
+} from "./chunk-YNOCYFZ4.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  ground
+} from "./chunk-QLV6445V.js";
+import {
+  logoBadge
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/saas-store-chrome-kit.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var ARTICLE = [
+  "For most of its history the web was read, not scrolled. A page had an author, a date and an end.",
+  { mark: "What we call reading online is now mostly triage: deciding, in seconds, what not to read." },
+  "The cost is not attention, which recovers. It is memory. We finish forty tabs a day and can quote none of them a week later.",
+  { mark: "A highlight is a promise to your future self that this sentence mattered." },
+  "Readers who mark a text recall it roughly twice as well as readers who do not, and the effect holds whether the pen is real or not."
+];
+var SHOTS = [
+  { key: "Highlight", claim: "Mark it once. Keep it for good.", note: "Select any sentence on any page. Margin saves it with the source and the date.", popup: "highlights" },
+  { key: "Summarise", claim: "Five lines, from your own highlights.", note: "A summary built only from what you marked, so it says what you thought mattered.", popup: "summary" },
+  { key: "Export", claim: "Send it where you write.", note: "Notion, Obsidian, Readwise or plain Markdown. One click, no account needed.", popup: "export" }
+];
+var saas_store_chrome_kit_default = defineTemplate({
+  id: "social-saas-store-chrome-kit",
+  meta: {
+    name: "SaaS store Chrome Web Store kit",
+    description: "A whole Chrome Web Store listing in the Swiss typographic look: the 440 \xD7 280 small tile, the 1400 \xD7 560 marquee and three 1280 \xD7 800 screenshots, each showing the extension\u2019s popup hanging from its toolbar button over an article in a browser window, with the claim set large beside it. Drop your own page capture on the browser\u2019s picture slot; the popup is auto layout you can retype",
+    category: "social",
+    tags: ["saas", "saas store", "chrome web store", "extension", "browser extension", "tile", "marquee", "screenshots", "popup", "swiss", "listing", "plugin"],
+    platforms: ["chrome-web-store", "web", "desktop"],
+    formats: ["screenshot", "banner", "thumbnail", "gallery"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  sequence: true,
+  build() {
+    const k = new Kit("SaaS store Chrome Web Store kit", preset("cws-marquee"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F1F0EB", text: "#111111", primary: "#D4201A", onPrimary: "#FFFFFF" },
+      { name: "Margin", tagline: "Read once. Keep the good parts." }
+    );
+    k.palette({ card: "#FFFFFF", onCard: "#141414", cardMuted: "#5B5B57", chrome: "#E4E3DD", onChrome: "#3A3A37", rule: "#CFCDC4", mark: "#FFD6D2", ink: "#111111", onInk: "#F1F0EB" });
+    k.textStyle("Claim 66", { size: 66, fontWeight: 800, letterSpacing: -3, lineHeight: 67 });
+    k.textStyle("Note 24", { size: 24, fontWeight: 500, letterSpacing: -0.2, lineHeight: 34 });
+    k.textStyle("Label 18", { ...MONO, size: 18, fontWeight: 700, letterSpacing: 1.2, lineHeight: 24, textCase: "UPPER" });
+    k.textStyle("Url 16", { ...MONO, size: 16, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Article title 40", { ...SERIF, size: 40, fontWeight: 700, letterSpacing: -1, lineHeight: 46 });
+    k.textStyle("Article 20", { ...SERIF, size: 20, fontWeight: 400, lineHeight: 31 });
+    k.textStyle("Popup title 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 26 });
+    k.textStyle("Popup 16", { size: 16, fontWeight: 500, lineHeight: 23 });
+    k.textStyle("Popup strong 16", { size: 16, fontWeight: 700, lineHeight: 23 });
+    k.textStyle("Name 150", { size: 150, fontWeight: 900, letterSpacing: -8, lineHeight: 140 });
+    k.textStyle("Tagline 40", { size: 40, fontWeight: 700, letterSpacing: -1.2, lineHeight: 46 });
+    k.textStyle("Tile name 64", { size: 64, fontWeight: 900, letterSpacing: -3, lineHeight: 64 });
+    k.textStyle("Tile note 20", { size: 20, fontWeight: 700, letterSpacing: -0.3, lineHeight: 26 });
+    k.component("Popup button", { width: 340, fill: "primary", radius: 10, align: "CENTER", padding: { top: 12, right: 16, bottom: 12, left: 16 }, description: "The popup\u2019s one action.", props: { Label: "Summarise this page" } }, (id) => {
+      k.propText(id, "Label", { style: "Popup strong 16", color: "onPrimary", align: "CENTER" });
+    });
+    const browser = (sheet, x, y, w, h) => {
+      const win = k.stack(sheet, { width: w, height: h, fill: "card", radius: 14, clip: true, stroke: { color: "rule", width: 2, align: "INSIDE" }, effects: [soft(k, "ink", 0.18, 24, 60)], name: "Browser", absolute: { x, y } });
+      const tabs = k.stack(win, { direction: "HORIZONTAL", height: 44, fill: "chrome", gap: 12, align: "MAX", padding: { top: 0, right: 16, bottom: 0, left: 16 }, name: "Tab strip" });
+      const dots = k.stack(tabs, { direction: "HORIZONTAL", width: "HUG", height: 44, gap: 8, align: "CENTER", name: "Window dots" });
+      for (let i = 0; i < 3; i++) k.ellipse(dots, 12, "rule", { name: "Window dot" });
+      const tab = k.stack(tabs, { direction: "HORIZONTAL", width: 260, height: 34, fill: "card", gap: 10, align: "CENTER", padding: { top: 0, right: 14, bottom: 0, left: 14 }, name: "Tab" });
+      k.patch(tab, { cornerRadius: [10, 10, 0, 0] });
+      k.rect(tab, 14, 14, "ink", { radius: 3, name: "Favicon" });
+      k.text(tab, "The quiet web", { style: "Url 16", color: "onCard", name: "Tab title" });
+      const bar = k.stack(win, { direction: "HORIZONTAL", height: 52, gap: 14, align: "CENTER", padding: { top: 0, right: 16, bottom: 0, left: 16 }, name: "Toolbar" });
+      for (let i = 0; i < 2; i++) k.rect(bar, 18, 18, "rule", { radius: 9, name: "Nav button" });
+      const url = k.stack(bar, { direction: "HORIZONTAL", height: 34, fill: "chrome", radius: 17, align: "CENTER", padding: { top: 0, right: 16, bottom: 0, left: 16 }, name: "Address" });
+      k.text(url, "longreads.example/the-quiet-web", { style: "Url 16", color: "onChrome", name: "Url" });
+      k.rect(bar, 22, 22, "rule", { radius: 6, name: "Other extension" });
+      const button = k.stack(bar, { width: 34, height: 34, fill: "primary", radius: 9, align: "CENTER", justify: "CENTER", name: "Extension button" });
+      k.rect(button, 6, 18, "onPrimary", { radius: 2, name: "Extension mark" });
+      k.rect(bar, 22, 22, "rule", { radius: 11, name: "Profile" });
+      k.rect(win, "FILL", 2, "rule", { name: "Toolbar rule" });
+      const bodyH = h - 44 - 52 - 2;
+      const body = k.stack(win, { height: bodyH, clip: true, name: "Page" });
+      k.photo(body, w, bodyH, { ground: "chrome", name: "Your page", absolute: { x: 0, y: 0 } });
+      const page = k.frame(body, { x: 0, y: 0, width: w, height: bodyH }, { name: "Placeholder page", fill: "card" });
+      const col = k.stack(page, { width: w - 56 - 300, gap: 18, name: "Article", absolute: { x: 56, y: 44 } });
+      k.text(col, "Essay \xB7 9 min read", { style: "Label 18", color: "cardMuted", name: "Article meta" });
+      k.text(col, "The quiet web, and how we stopped reading it", { style: "Article title 40", color: "onCard", name: "Article title" });
+      k.rect(col, 80, 4, "ink", { name: "Article rule" });
+      for (const p of ARTICLE) {
+        if (typeof p === "string") k.text(col, p, { style: "Article 20", color: "onCard", name: "Paragraph" });
+        else {
+          const m = k.stack(col, { fill: "mark", padding: { top: 4, right: 8, bottom: 6, left: 8 }, name: "Highlight" });
+          k.text(m, p.mark, { style: "Article 20", color: "onCard", name: "Highlighted" });
+        }
+      }
+      return win;
+    };
+    const popup = (sheet, x, y, kind) => {
+      k.rect(sheet, 22, 22, "card", { name: "Popup tail", absolute: { x: x + 306, y: y - 9 }, stroke: { color: "rule", width: 2, align: "INSIDE" } });
+      for (const id of k.named(sheet, "Popup tail")) k.patch(id, { rotation: 45 });
+      const pop = k.stack(sheet, { width: 380, gap: 14, fill: "card", radius: 16, padding: 20, stroke: { color: "rule", width: 2, align: "INSIDE" }, effects: [soft(k, "ink", 0.3, 26, 60)], name: "Popup", absolute: { x, y } });
+      const head = k.stack(pop, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Popup head" });
+      logoBadge(k, head, { fill: "primary", size: 20, pad: 7, radius: 9 });
+      k.text(head, kind === "highlights" ? "On this page" : kind === "summary" ? "Summary" : "Send 2 highlights", { style: "Popup title 20", color: "onCard", name: "Popup title" });
+      k.rect(pop, "FILL", 2, "rule", { name: "Popup rule" });
+      if (kind === "highlights") {
+        for (const [quote, when] of [["\u201CWhat we call reading online is now mostly triage\u2026\u201D", "Saved just now"], ["\u201CA highlight is a promise to your future self\u2026\u201D", "Saved 1 min ago"]]) {
+          const item = k.stack(pop, { direction: "HORIZONTAL", gap: 12, name: "Saved highlight" });
+          k.rect(item, 5, 74, "primary", { radius: 2, name: "Highlight bar" });
+          const w = k.stack(item, { gap: 4, name: "Saved words" });
+          k.text(w, quote, { style: "Popup 16", color: "onCard", name: "Saved quote" });
+          k.text(w, when, { style: "Url 16", color: "cardMuted", name: "Saved when" });
+        }
+        const count = k.stack(pop, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", fill: "chrome", radius: 10, padding: { top: 10, right: 14, bottom: 10, left: 14 }, name: "Library row" });
+        k.text(count, "In your library", { style: "Popup 16", color: "onChrome", autoWidth: true, name: "Library label" });
+        k.text(count, "1,284 highlights", { style: "Popup strong 16", color: "onChrome", autoWidth: true, name: "Library count" });
+      } else if (kind === "summary") {
+        for (const [i, line] of ["Online reading has become triage, not reading.", "The loss is memory rather than attention.", "Marking a sentence roughly doubles recall.", "A highlight is a note to your future self.", "The fix is small: mark, then revisit."].entries()) {
+          const row = k.stack(pop, { direction: "HORIZONTAL", gap: 12, name: "Summary line" });
+          k.text(row, `0${i + 1}`, { style: "Url 16", color: "cardMuted", autoWidth: true, name: "Line number" });
+          k.text(row, line, { style: "Popup 16", color: "onCard", name: "Line" });
+        }
+      } else {
+        for (const [i, dest] of ["Notion \xB7 Reading notes", "Obsidian \xB7 Vault/Inbox", "Readwise", "Copy as Markdown"].entries()) {
+          const row = k.stack(pop, { direction: "HORIZONTAL", gap: 12, align: "CENTER", radius: 10, padding: { top: 10, right: 12, bottom: 10, left: 12 }, name: "Destination", ...i === 0 ? { fill: "mark" } : {} });
+          k.rect(row, 20, 20, i === 0 ? "primary" : "rule", { radius: 5, name: "Destination icon" });
+          k.text(row, dest, { style: i === 0 ? "Popup strong 16" : "Popup 16", color: "onCard", name: "Destination name" });
+        }
+      }
+      k.instance(pop, "Popup button", { Label: kind === "highlights" ? "Summarise this page" : kind === "summary" ? "Copy summary" : "Send to Notion" }, { name: "Popup button" });
+    };
+    const grid = (sheet, w, h, step) => k.vector(sheet, w, h, gridPaths(w, h, step, 2), k.tint("text", 0.09), { name: "Grid", absolute: { x: 0, y: 0 } });
+    const marquee = k.sheet;
+    ground(k, marquee, "Marquee 1400 \xD7 560", "paper");
+    grid(marquee, 1400, 560, 70);
+    k.rect(marquee, 24, 560, "primary", { name: "Margin rule", absolute: { x: 0, y: 0 } });
+    const mw = k.stack(marquee, { width: 600, gap: 20, name: "Marquee words", absolute: { x: 84, y: 76 } });
+    const mb = k.stack(mw, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Brand row" });
+    logoBadge(k, mb, { fill: "primary", size: 30, pad: 9, radius: 11 });
+    k.text(mb, "Extension for Chrome", { style: "Label 18", color: "text", name: "Kind" });
+    k.text(mw, "{{brand.name}}", { style: "Name 150", color: "text", name: "Name" });
+    k.text(mw, "{{brand.tagline}}", { style: "Tagline 40", color: "text", width: 520, name: "Tagline" });
+    browser(marquee, 650, 70, 720, 640);
+    popup(marquee, 984, 180, "highlights");
+    const tile = k.addSheet(preset("cws-tile"));
+    ground(k, tile, "Small tile 440 \xD7 280", "primary");
+    k.patch(tile, { x: 1400 + 120, y: 0 });
+    k.rect(tile, 300, 34, k.tint("onPrimary", 0.22), { name: "Tile mark", absolute: { x: 170, y: 196 } });
+    k.rect(tile, 200, 34, k.tint("onPrimary", 0.22), { name: "Tile mark", absolute: { x: 270, y: 30 } });
+    const tw = k.stack(tile, { width: 380, gap: 10, name: "Tile words", absolute: { x: 30, y: 30 } });
+    logoBadge(k, tw, { fill: "ink", size: 34, pad: 10, radius: 13 });
+    k.rect(tw, 10, 26, k.tint("onPrimary", 1e-3), { name: "Tile space" });
+    k.text(tw, "{{brand.name}}", { style: "Tile name 64", color: "onPrimary", name: "Tile name" });
+    k.text(tw, "Highlight and summarise any page", { style: "Tile note 20", color: "onPrimary", name: "Tile note" });
+    SHOTS.forEach((s, i) => {
+      const sheet = k.addSheet(preset("cws-screenshot"));
+      ground(k, sheet, `Screenshot ${i + 1} \xB7 ${s.key}`, "paper");
+      k.patch(sheet, { x: 1400 + 120 + 440 + 120 + i * (1280 + 120), y: 0 });
+      grid(sheet, 1280, 800, 80);
+      k.rect(sheet, 16, 800, "primary", { name: "Margin rule", absolute: { x: 0, y: 0 } });
+      const words = k.stack(sheet, { width: 350, gap: 22, name: "Claim block", absolute: { x: 64, y: 84 } });
+      k.text(words, `0${i + 1} / 03 \xB7 ${s.key}`, { style: "Label 18", color: "text", name: "Step" });
+      k.text(words, s.claim, { style: "Claim 66", color: "text", name: "Claim" });
+      k.rect(words, 96, 8, "primary", { name: "Claim rule" });
+      k.text(words, s.note, { style: "Note 24", color: "text", name: "Claim note" });
+      browser(sheet, 470, 84, 770, 800);
+      popup(sheet, 854, 194, s.popup);
+    });
+    k.setCover(marquee);
+    return k.finish();
+  }
+});
+
+export {
+  saas_store_chrome_kit_default
+};