@popcraft/kit 0.53.3 → 0.53.5

package/dist/chunks/chunk-IC3VEUTZ.js

@@ -0,0 +1,197 @@
+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 {
+  bassKick,
+  beatFlash,
+  circularSpectrum,
+  pulseRing,
+  spectrumBars,
+  vuMeter,
+  waveform
+} from "./chunk-IO6NGFEM.js";
+import {
+  showcase,
+  showcaseStyles,
+  specimenRow
+} from "./chunk-RFA7ZX5N.js";
+import {
+  trackInfo
+} from "./chunk-JVSY2RRT.js";
+import {
+  MUSIC_HASH
+} from "./chunk-QYD2DX5P.js";
+import {
+  defineLibrary
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/libraries/audio-reactive.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var FPS = 30;
+var LOOP = { duration: 4e3, fps: FPS };
+var loopProp = { Loop: { motion: "loop", value: "loop" } };
+var audio_reactive_default = defineLibrary({
+  id: "lib-audio-reactive",
+  version: 1,
+  meta: {
+    name: "Audio reactive",
+    description: "Motion components that follow the music: waveforms, a spectrum equalizer, a circular spectrum, a pulse ring, a VU meter, a beat flash, a bass-kick badge and a podcast audiogram (1:1 and 9:16), with colour and text inputs",
+    tags: ["animation", "audio", "music", "audio reactive", "visualizer", "waveform", "spectrum", "equalizer", "audiogram", "podcast", "components"],
+    created: "2026-09-30",
+    updated: "2026-09-30"
+  },
+  build() {
+    const k = new Kit("Audio reactive", preset("web-desktop"));
+    k.brand({
+      paper: "#0E0B1A",
+      text: "#F6F3FF",
+      onPaper: "#B9B2D6",
+      card: "#1A1530",
+      accent: "#FF4FA3",
+      onAccent: "#1A0612",
+      cyan: "#3EE6FF",
+      meterLow: "#3DDC84",
+      meterMid: "#FFC247",
+      meterHigh: "#FF5A5F",
+      ring: "#3EE6FF",
+      cover: "#2B2350"
+    }, { show: "Signal & Noise", episode: "Ep. 12 \xB7 Designing for sound" });
+    showcaseStyles(k);
+    k.textStyle("Label 18", { size: 18, fontWeight: 800, lineHeight: 22, letterSpacing: 1, textCase: "UPPER" });
+    k.textStyle("Gram title 64", { size: 64, fontWeight: 800, lineHeight: 70, letterSpacing: -1.5 });
+    k.textStyle("Gram show 32", { size: 32, fontWeight: 600, lineHeight: 40 });
+    k.variantSet("Waveform", "Style", ["Bars", "Mirrored", "Line"], {
+      width: 480,
+      height: 120,
+      description: "The last two and a half seconds of the sound, flowing right to left: bars from the bottom, mirrored from the middle, or a line of dots. Colour sets it.",
+      props: { Colour: { color: "accent" }, ...loopProp }
+    }, (state, id) => {
+      waveform(k, id, { style: state === "Bars" ? "bars" : state === "Mirrored" ? "mirrored" : "line", width: 480, height: 120, color: "accent", colorProp: "Colour" });
+    }, () => ({ timeline: LOOP }));
+    k.component("Spectrum bars", {
+      width: 480,
+      height: 160,
+      timeline: LOOP,
+      description: "An equalizer: 32 bands of the spectrum, low on the left, rising fast and falling slowly. Colour sets it.",
+      props: { Colour: { color: "cyan" }, ...loopProp }
+    }, (id) => {
+      spectrumBars(k, id, { width: 480, height: 160, color: "cyan", colorProp: "Colour" });
+    });
+    k.component("Circular spectrum", {
+      width: 360,
+      height: 360,
+      timeline: LOOP,
+      description: "Bars standing round a ring, the bass at the bottom and the treble at the top, mirrored side to side. Colour sets the bars.",
+      props: { Colour: { color: "accent" }, ...loopProp }
+    }, (id) => {
+      const disc = k.ellipse(id, 200, "card", { name: "Disc", absolute: { x: 80, y: 80 } });
+      bassKick(k, disc, 0.06);
+      circularSpectrum(k, id, { radius: 110, length: 70, color: "accent", colorProp: "Colour", count: 56 });
+    });
+    k.component("Pulse ring", {
+      width: 240,
+      height: 240,
+      timeline: LOOP,
+      description: "A ring that swells with the bass, and an echo that flies out and fades on every beat. Colour sets both.",
+      props: { Colour: { color: "ring" }, ...loopProp }
+    }, (id) => {
+      pulseRing(k, id, { size: 240, color: "ring", colorProp: "Colour" });
+    });
+    k.component("VU meter", {
+      width: 360,
+      height: 28,
+      timeline: LOOP,
+      description: "Sixteen segments lit by the level with a quick rise and a slow fall: green, then amber, then red at the top.",
+      props: loopProp
+    }, (id) => {
+      vuMeter(k, id, { width: 360, height: 28, colors: ["meterLow", "meterMid", "meterHigh"] });
+    });
+    k.component("Beat flash", {
+      width: 320,
+      height: 180,
+      timeline: LOOP,
+      description: "A panel that flashes on every beat and dies away: put it over a scene, sized to fill. Colour sets the flash.",
+      props: { Colour: { color: "text" }, ...loopProp }
+    }, (id) => {
+      const flash = k.rect(id, 320, 180, "text", { radius: 12, name: "Flash", absolute: { x: 0, y: 0 } });
+      k.bindPath(flash, "fills[#0].color", "Colour");
+      beatFlash(k, flash, 0.9);
+    });
+    k.component("Bass kick", {
+      direction: "HORIZONTAL",
+      width: 180,
+      height: 180,
+      justify: "CENTER",
+      align: "CENTER",
+      timeline: LOOP,
+      description: "A badge that thumps with the kick. Label and Colour are inputs.",
+      props: { Label: "LIVE", Colour: { color: "accent" }, ...loopProp }
+    }, (id) => {
+      const badge = k.stack(id, { direction: "HORIZONTAL", width: 140, height: 140, justify: "CENTER", align: "CENTER", fill: "accent", radius: 70, name: "Badge" });
+      k.bindPath(badge, "fills[#0].color", "Colour");
+      k.propText(badge, "Label", { style: "Label 18", color: "onAccent", autoWidth: true });
+      bassKick(k, badge, 0.16);
+      k.animate(badge, "opacity", [{ t: 0, v: 0, ease: ease.out("quad") }, { t: 300, v: 1 }]);
+    });
+    k.variantSet("Audiogram", "Format", ["Square", "Story"], {
+      description: "A podcast audiogram: the cover art, the show and episode, and a live waveform of the voice. Square (1:1) for feeds, Story (9:16) for vertical video. Title and Show are inputs; drop your art on the cover.",
+      props: { Title: "{{brand.episode}}", Show: "{{brand.show}}", ...loopProp }
+    }, (state, id) => {
+      const square = state === "Square";
+      const W = 540;
+      k.patch(id, { layoutMode: "VERTICAL", primaryAxisAlignItems: "CENTER", counterAxisAlignItems: "CENTER", itemSpacing: square ? 20 : 36 });
+      const cover = k.photo(id, square ? 240 : 380, square ? 240 : 380, { radius: 24, ground: "cover", name: "Cover art" });
+      bassKick(k, cover, 0.03, 200);
+      k.propText(id, "Show", { style: "Gram show 32", color: "onPaper", width: W - 80, align: "CENTER" });
+      k.propText(id, "Title", { style: "Gram title 64", color: "text", width: W - 80, align: "CENTER" });
+      waveform(k, id, { style: "mirrored", width: W - 120, height: square ? 90 : 140, color: "accent", count: 40, history: 2e3, gain: 1.1 });
+    }, (state) => ({ width: 540, height: state === "Square" ? 540 : 960, fill: "paper", radius: 24, timeline: LOOP }));
+    const sheet = k.sheet;
+    const song = trackInfo("house");
+    const passes = 2;
+    k.nameSheet(sheet, "Audio reactive");
+    showcase(k, sheet, { title: "Audio reactive", intro: 'Components that follow the music the timeline plays: they read its loudness, its bass, mids and treble, its beats and its spectrum. Drop one on any animated frame with sound and it moves with it. This page plays "Main Stage", a house loop PopCraft made in code (CC0).', duration: Math.round(song.durationMs * passes) });
+    const audio = Array.from({ length: passes }, (_, p) => ({
+      id: `a${p + 1}`,
+      mediaHash: MUSIC_HASH.house,
+      name: `${song.title} (124 BPM, CC0)`,
+      start: p * song.durationMs,
+      in: 0,
+      out: song.durationMs,
+      lane: 0,
+      ...p === passes - 1 ? { fadeOut: 800 } : {}
+    }));
+    k.patch(sheet, { timeline: { ...k.node(sheet).timeline, audio } });
+    const waves = specimenRow(k, sheet, "Waveforms");
+    for (const style of ["Bars", "Mirrored", "Line"]) k.instance(waves, `Waveform/${style}`, {});
+    const spectra = specimenRow(k, sheet, "Spectrum");
+    k.instance(spectra, "Spectrum bars", {});
+    k.instance(spectra, "Circular spectrum", {});
+    k.instance(spectra, "Pulse ring", {});
+    const hits = specimenRow(k, sheet, "Level and beat");
+    k.instance(hits, "VU meter", {});
+    k.instance(hits, "Beat flash", {});
+    k.instance(hits, "Bass kick", { Label: "LIVE" });
+    const grams = specimenRow(k, sheet, "Audiogram", { align: "MIN" });
+    k.instance(grams, "Audiogram/Square", {});
+    k.instance(grams, "Audiogram/Story", {});
+    return k.finish();
+  }
+});
+
+export {
+  audio_reactive_default
+};

package/dist/chunks/chunk-IDS3CV4V.js

@@ -0,0 +1,334 @@
+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 {
+  chrome
+} from "./chunk-MJ3CSPFJ.js";
+import {
+  caret
+} from "./chunk-2VFVKPUT.js";
+import {
+  MONO
+} from "./chunk-AXAAXHZF.js";
+import {
+  compactNav,
+  footer,
+  respond,
+  rule,
+  soft,
+  typeScale
+} from "./chunk-YHF6LRMF.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-ZMD3C2YJ.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/web/saas-dev-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var MAN = [
+  ["branch create <name>", "A writable copy of any branch, data and all. Copy-on-write, so 1 GB and 500 GB take the same two seconds."],
+  ["diff <a> <b>", "Schema changes between two branches, with destructive ones called out before they reach review."],
+  ["merge <name>", "Replays the branch\u2019s migrations on its parent inside one transaction, or not at all."],
+  ["seed --mask <rules>", "Masks emails, names and card numbers on the way in, so previews never hold customer data."],
+  ["drop --merged", "Deletes every branch whose pull request has closed. Put it in cron and forget it."]
+];
+var YAML = [
+  [0, [["on:", "cardSignal"], [" pull_request", "onCard"]]],
+  [0, [["jobs:", "cardSignal"]]],
+  [1, [["preview:", "cardSignal"]]],
+  [2, [["runs-on:", "cardSignal"], [" ubuntu-latest", "onCard"]]],
+  [2, [["steps:", "cardSignal"]]],
+  [3, [["- uses:", "cardSignal"], [" actions/checkout@v4", "onCard"]]],
+  [3, [["- uses:", "cardSignal"], [" tern-db/branch@v2", "cardOk"]]],
+  [4, [["with:", "cardSignal"]]],
+  [5, [["name:", "cardSignal"], [" ${{ github.head_ref }}", "cardOk"]]],
+  [5, [["mask:", "cardSignal"], [" pii.yml", "cardOk"]]],
+  [3, [["# the action exports DATABASE_URL", "cardMuted"]]],
+  [3, [["- run:", "cardSignal"], [" npm run migrate", "onCard"]]],
+  [3, [["- run:", "cardSignal"], [" npm test", "onCard"]]]
+];
+var BENCH = [["1 GB", "1.6 s", 0.02, "48 s", 0.1], ["40 GB", "1.8 s", 0.02, "31 min", 0.46], ["500 GB", "2.1 s", 0.025, "6 h 40 min", 1]];
+var RUNS = ["GitHub Actions", "GitLab CI", "CircleCI", "Buildkite", "Docker Compose", "Kubernetes", "Prisma", "Drizzle", "Rails", "Django", "Alembic", "Flyway"];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Comment", preset: "typewriter", at: 100, params: { duration: 500 } },
+  { layer: "Headline", preset: "rise-in", at: 250, params: { duration: 700 } },
+  { layer: "Terminal", preset: "rise-in", at: 400, params: { duration: 700 } },
+  { layer: "Lead", preset: "rise-in", at: 550 },
+  { layer: "Install", preset: "rise-in", at: 700 },
+  { layer: "Proof", preset: "fade-in", at: 950, params: { duration: 500 } },
+  { layer: "Command one", preset: "typewriter", at: 1e3, params: { duration: 1e3 } },
+  { layer: "Out snapshot", preset: "fade-in", at: 2150, params: { duration: 150 } },
+  { layer: "Progress", preset: "fade-in", at: 2350, params: { duration: 150 } },
+  { layer: "Progress bar", preset: "wipe-in", at: 2400, params: { duration: 700, ease: { kind: "linear" } } },
+  { layer: "Out ready", preset: "fade-in", at: 3150, params: { duration: 150 } },
+  { layer: "Out url", preset: "fade-in", at: 3700, params: { duration: 150 } },
+  { layer: "Prompt two", preset: "fade-in", at: 4e3, params: { duration: 120 } },
+  { layer: "Command two", preset: "typewriter", at: 4150, params: { duration: 600 } },
+  { layer: "Diff line", preset: "fade-in", at: 4850, params: { duration: 150 }, stagger: { delay: 180 } },
+  { layer: "Out summary", preset: "fade-in", at: 5400, params: { duration: 150 } },
+  { layer: "Prompt idle", preset: "fade-in", at: 5650, params: { duration: 120 } },
+  { layer: "Commit", preset: "pop-in", at: 1400, params: { duration: 300 }, stagger: { delay: 120 } },
+  { layer: "Graph", preset: "wipe-in", at: 1500, params: { duration: 1600 } },
+  { layer: "Branch tag", preset: "pop-in", at: 2300, params: { duration: 350 }, stagger: { delay: 180 } }
+];
+var counts = [{ layer: "Out ready", at: 3150, duration: 500, counter: { from: 0, to: 1.8, decimals: 1, prefix: "  ready in ", suffix: " s" }, ease: { kind: "linear" } }];
+var saas_dev_landing_default = defineTemplate({
+  id: "web-saas-dev-landing",
+  meta: {
+    name: "SaaS developer tool landing page",
+    description: "A landing page for a developer tool or API, set in monospace: the hero is a terminal that types a command and prints its output line by line, with a progress bar and a counted time. Then a branch graph, the commands as a man page, a workflow file, a benchmark in bars and the install line. Amber on near-black, desktop to phone",
+    category: "web",
+    tags: ["saas", "developer tool", "api", "cli", "terminal", "monospace", "code sample", "landing page", "hero", "dark", "website", "animation", "responsive", "open source"],
+    platforms: ["web", "github"],
+    formats: ["page", "demo"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("SaaS developer tool landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#0C0D0B", text: "#ECE9DF", onPaper: "#A8A598", primary: "#FFB224", onPrimary: "#1A1300", card: "#161812", onCard: "#ECE9DF", cardMuted: "#9C998C", cardSignal: "#FFB224", cardOk: "#93D48C", hairline: "#30332A", wire: "#5F6355" },
+      { name: "Tern" }
+    );
+    const s = typeScale(k, {
+      "Nav 15": { ...MONO, size: 15, fontWeight: 500, lineHeight: 24 },
+      "Brand 20": { ...MONO, size: 20, fontWeight: 800, letterSpacing: -0.4, lineHeight: 28 },
+      "Button 15": { ...MONO, size: 15, fontWeight: 700, lineHeight: 24 },
+      "Comment 15": { ...MONO, size: 15, fontWeight: 500, lineHeight: 22 },
+      "Display 76": { ...MONO, size: 76, fontWeight: 800, letterSpacing: -4, lineHeight: 82 },
+      "Display 64": { ...MONO, size: 64, fontWeight: 800, letterSpacing: -3.2, lineHeight: 70 },
+      "Display 46": { ...MONO, size: 46, fontWeight: 800, letterSpacing: -2.2, lineHeight: 52 },
+      "Display 32": { ...MONO, size: 32, fontWeight: 800, letterSpacing: -1.4, lineHeight: 38 },
+      "Lead 19": { size: 19, fontWeight: 400, lineHeight: 30 },
+      "Lead 17": { size: 17, fontWeight: 400, lineHeight: 27 },
+      "Term 15": { ...MONO, size: 15, fontWeight: 500, lineHeight: 26 },
+      "Term 12": { ...MONO, size: 12, fontWeight: 500, lineHeight: 21 },
+      "Chrome 13": { ...MONO, size: 13, fontWeight: 500, lineHeight: 18 },
+      "Proof 14": { ...MONO, size: 14, fontWeight: 500, lineHeight: 22 },
+      "Tag 13": { ...MONO, size: 13, fontWeight: 600, lineHeight: 18 },
+      "Section 40": { ...MONO, size: 40, fontWeight: 800, letterSpacing: -1.8, lineHeight: 46 },
+      "Section 26": { ...MONO, size: 26, fontWeight: 800, letterSpacing: -1, lineHeight: 32 },
+      "Man head 14": { ...MONO, size: 14, fontWeight: 700, letterSpacing: 1.4, lineHeight: 26 },
+      "Man 17": { ...MONO, size: 17, fontWeight: 700, lineHeight: 26 },
+      "Body 17": { size: 17, fontWeight: 400, lineHeight: 27 },
+      "Code 14": { ...MONO, size: 14, fontWeight: 500, lineHeight: 25 },
+      "Code 12": { ...MONO, size: 12, fontWeight: 500, lineHeight: 22 },
+      "Bench 15": { ...MONO, size: 15, fontWeight: 600, lineHeight: 22, fontFeatures: { tnum: 1 } },
+      "Small 14": { size: 14, fontWeight: 400, lineHeight: 22 },
+      "Foot head 14": { ...MONO, size: 14, fontWeight: 700, lineHeight: 22 },
+      "Install 22": { ...MONO, size: 22, fontWeight: 600, letterSpacing: -0.4, lineHeight: 30 },
+      "Install 13": { ...MONO, size: 13, fontWeight: 600, lineHeight: 20 }
+    });
+    buttons(k, { style: s("Button 15"), pad: [13, 20], radius: 0 });
+    k.component("Chip", { direction: "HORIZONTAL", width: "HUG", stroke: { color: "hairline", width: 1.5 }, padding: { top: 10, right: 16, bottom: 10, left: 16 }, props: { Label: "Docker" } }, (id) => {
+      k.propText(id, "Label", { style: s("Proof 14"), color: "text", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 96, top: 28 });
+    k.timeline(sheet, { duration: 6e3, fps: 30 });
+    nav(k, sheet, { links: ["docs", "benchmarks", "pricing", "github"], cta: "brew install tern", style: s("Nav 15"), brandStyle: s("Brand 20"), quiet: true });
+    const hero = k.stack(sheet, { gap: 28, name: "Hero" });
+    k.text(hero, "# postgres branching, from the terminal you already have open", { style: s("Comment 15"), color: "onPaper", name: "Comment" });
+    k.text(hero, "A copy of production for every pull request. Ready in 1.8 seconds.", { style: s("Display 76"), color: "text", name: "Headline" });
+    const row = k.stack(hero, { direction: "HORIZONTAL", gap: 56, padding: { top: 12, right: 0, bottom: 0, left: 0 }, name: "Hero row" });
+    const term = k.stack(row, { fill: "card", stroke: { color: "hairline", width: 1.5 }, radius: 8, clip: true, effects: [soft(0.5, 28, 60)], name: "Terminal" });
+    chrome(k, term, { title: "~/api \xB7 zsh \xB7 96\xD724", style: s("Chrome 13"), fill: "hairline", ink: "onCard", light: "cardMuted" });
+    const out = k.stack(term, { padding: { top: 20, right: 24, bottom: 24, left: 24 }, name: "Lines" });
+    const prompt = (cmd2, name, promptName) => {
+      const l = k.stack(out, { direction: "HORIZONTAL", gap: 10, name: "Prompt line" });
+      k.text(l, "$", { style: s("Term 15"), color: "cardSignal", autoWidth: true, name: promptName });
+      k.text(l, cmd2, { style: s("Term 15"), color: "onCard", name });
+    };
+    prompt("tern branch create pr-482 --from main", "Command one", "Prompt one");
+    k.text(out, "  snapshot  main@a41f9c2 \xB7 41.3 GB \xB7 212 tables", { style: s("Term 15"), color: "cardMuted", name: "Out snapshot" });
+    const prog = k.stack(out, { direction: "HORIZONTAL", gap: 14, align: "CENTER", padding: { top: 0, right: 0, bottom: 0, left: 18 }, name: "Progress" });
+    k.text(prog, "copy-on-write", { style: s("Term 15"), color: "cardMuted", autoWidth: true, name: "Progress label" });
+    const track = k.stack(prog, { width: 120, height: 10, fill: "hairline", name: "Progress track" });
+    k.rect(track, 120, 10, "cardSignal", { name: "Progress bar" });
+    k.text(prog, "100%", { style: s("Term 15"), color: "onCard", autoWidth: true, name: "Progress figure" });
+    k.text(out, "  ready in 1.8 s", { style: s("Term 15"), color: "cardOk", name: "Out ready" });
+    k.text(out, "  postgres://pr-482.tern.example/api", { style: s("Term 15"), color: "onCard", name: "Out url" });
+    k.stack(out, { height: 14, name: "Blank line" });
+    prompt("tern diff main pr-482", "Command two", "Prompt two");
+    k.text(out, "  + orders.refunded_at   timestamptz", { style: s("Term 15"), color: "cardOk", name: "Diff line" });
+    k.text(out, "  ~ users.email          varchar to citext", { style: s("Term 15"), color: "cardSignal", name: "Diff line" });
+    k.text(out, "  + index orders_refunded_at_idx", { style: s("Term 15"), color: "cardOk", name: "Diff line" });
+    k.text(out, "  3 changes, 0 destructive", { style: s("Term 15"), color: "cardMuted", name: "Out summary" });
+    k.stack(out, { height: 14, name: "Blank line" });
+    const idle = k.stack(out, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Prompt idle" });
+    k.text(idle, "$", { style: s("Term 15"), color: "cardSignal", autoWidth: true, name: "Prompt three" });
+    caret(k, idle, 9, 18, "cardSignal");
+    const copy = k.stack(row, { width: 400, gap: 24, name: "Copy" });
+    k.text(copy, "Tern forks your database the way git forks your code. Each branch is a real Postgres with real data, masked on the way in, and it costs only the pages it changes.", { style: s("Lead 19"), color: "onPaper", name: "Lead" });
+    const install = k.stack(copy, { gap: 12, name: "Install" });
+    const box = k.stack(install, { direction: "HORIZONTAL", gap: 12, align: "CENTER", fill: "primary", padding: { top: 14, right: 18, bottom: 14, left: 18 }, name: "Install line" });
+    k.text(box, "$ brew install tern", { style: s("Button 15"), color: "onPrimary", name: "Install command" });
+    k.text(box, "copy", { style: s("Install 13"), color: "onPrimary", autoWidth: true, name: "Copy hint" });
+    k.instance(install, "Button quiet", { Label: "Read the five-minute guide" }, { name: "CTA quiet" });
+    const proof = k.stack(copy, { gap: 4, padding: { top: 8, right: 0, bottom: 0, left: 0 }, name: "Proof" });
+    rule(k, proof, "hairline", { weight: 2 });
+    for (const [a, b] of [["license", "MIT"], ["stars", "14,208"], ["postgres", "13 to 17"], ["runs on", "your cloud or ours"]]) {
+      const l = k.stack(proof, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 12, padding: { top: 6, right: 0, bottom: 0, left: 0 }, name: "Fact" });
+      k.text(l, a, { style: s("Proof 14"), color: "onPaper", autoWidth: true, name: "Fact name" });
+      k.text(l, b, { style: s("Proof 14"), color: "text", autoWidth: true, name: "Fact value" });
+    }
+    const strip = k.stack(sheet, { height: 150, clip: true, name: "Graph strip" });
+    const lineOf = (pts) => ({ closed: false, points: pts.map(([x, y]) => ({ x, y })) });
+    const forks = [[150, 480, 34, "pr-479 \xB7 merged"], [560, 930, 70, "pr-482 \xB7 3 changes"], [1010, 1200, 34, "staging"]];
+    k.vector(strip, 1200, 150, [lineOf([[0, 118], [1200, 118]]), ...forks.map(([a, b, y]) => lineOf([[a, 118], [a + 44, y], [b - 44, y], ...b < 1200 ? [[b, 118]] : []]))], "wire", { name: "Graph", strokeWidth: 2.5, absolute: { x: 0, y: 0 } });
+    for (const x of [60, 150, 300, 480, 560, 760, 930, 1010, 1130]) k.ellipse(strip, 12, "primary", { name: "Commit", absolute: { x: x - 6, y: 112 } });
+    for (const [a, , y, label] of forks) {
+      const tag = k.stack(strip, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", fill: "card", stroke: { color: "hairline", width: 1.5 }, padding: { top: 5, right: 10, bottom: 5, left: 10 }, name: "Branch tag", absolute: { x: a + 64, y: y - 15 } });
+      k.ellipse(tag, 8, "cardSignal", { name: "Tag dot" });
+      k.text(tag, label, { style: s("Tag 13"), color: "onCard", autoWidth: true, name: "Tag name" });
+    }
+    const man = k.stack(sheet, { gap: 0, name: "Manual" });
+    const manRow = (headName, build) => {
+      const r = k.stack(man, { direction: "HORIZONTAL", gap: 40, padding: { top: 0, right: 0, bottom: 32, left: 0 }, name: "Man section" });
+      k.text(r, headName, { style: s("Man head 14"), color: "onPaper", width: 160, name: "Man head" });
+      build(k.stack(r, { gap: 0, name: "Man body" }));
+    };
+    const manTop = k.stack(man, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", padding: { top: 0, right: 0, bottom: 36, left: 0 }, name: "Man top" });
+    for (const t of ["TERN(1)", "Tern Manual", "TERN(1)"]) k.text(manTop, t, { style: s("Man head 14"), color: "onPaper", autoWidth: true, name: "Man title" });
+    manRow("NAME", (b) => {
+      k.text(b, "tern \u2014 branch, diff and merge Postgres databases", { style: s("Section 40"), color: "text", name: "Man name" });
+    });
+    manRow("SYNOPSIS", (b) => {
+      k.text(b, "tern <command> [flags]", { style: s("Man 17"), color: "text", name: "Synopsis" });
+    });
+    manRow("COMMANDS", (b) => {
+      for (const [cmd2, what] of MAN) {
+        const c = k.stack(b, { direction: "HORIZONTAL", gap: 32, padding: { top: 0, right: 0, bottom: 20, left: 0 }, name: "Command" });
+        k.text(c, cmd2, { style: s("Man 17"), color: "text", width: 260, name: "Command name" });
+        k.text(c, what, { style: s("Body 17"), color: "onPaper", name: "Command text" });
+      }
+    });
+    const ci = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", name: "Workflow" });
+    const why = k.stack(ci, { width: 420, gap: 18, name: "Workflow copy" });
+    k.text(why, "Thirteen lines of YAML. No more shared staging database.", { style: s("Section 40"), color: "text", name: "Workflow title" });
+    k.text(why, "The action creates a branch named after the pull request, hands its URL to your tests and your preview deploy, and drops it when the PR closes. Migrations run against real row counts, so the slow one shows up in CI and not at 2 am.", { style: s("Body 17"), color: "onPaper", name: "Workflow text" });
+    const file = k.stack(ci, { fill: "card", stroke: { color: "hairline", width: 1.5 }, radius: 8, clip: true, name: "File" });
+    chrome(k, file, { title: ".github/workflows/preview.yml", style: s("Chrome 13"), fill: "hairline", ink: "onCard", light: "cardMuted" });
+    const code = k.stack(file, { padding: { top: 18, right: 20, bottom: 22, left: 0 }, name: "Code" });
+    YAML.forEach(([indent, toks], i) => {
+      const l = k.stack(code, { direction: "HORIZONTAL", gap: 0, name: "Code line" });
+      k.text(l, String(i + 1), { style: s("Code 14"), color: "cardMuted", width: 52, align: "RIGHT", name: "Line number" });
+      k.stack(l, { width: 20 + indent * 17, height: 1, name: "Indent" });
+      for (const [t, c] of toks) k.text(l, t, { style: s("Code 14"), color: c, autoWidth: true, name: "Token" });
+    });
+    const bench = k.stack(sheet, { gap: 28, name: "Benchmark" });
+    k.text(bench, "Branch time does not grow with the database.", { style: s("Section 40"), color: "text", width: 820, name: "Bench title" });
+    const chart = k.stack(bench, { name: "Bench chart" });
+    for (const [size, ours, a, theirs, b] of BENCH) {
+      rule(k, chart, "hairline", { weight: 1.5 });
+      const r = k.stack(chart, { direction: "HORIZONTAL", gap: 32, align: "CENTER", padding: { top: 18, right: 0, bottom: 18, left: 0 }, name: "Bench row" });
+      k.text(r, size, { style: s("Section 26"), color: "text", width: 128, name: "Bench size" });
+      const bars = k.stack(r, { gap: 8, name: "Bars" });
+      for (const [label, value, frac, fill] of [["tern branch", ours, a, "primary"], ["pg_dump | pg_restore", theirs, b, "hairline"]]) {
+        const line = k.stack(bars, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Bar line" });
+        k.text(line, label, { style: s("Bench 15"), color: "onPaper", width: 196, name: "Bar label" });
+        const lane = k.stack(line, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Lane" });
+        k.rect(lane, Math.round(620 * frac), 16, fill, { name: "Bar" });
+        k.text(lane, value, { style: s("Bench 15"), color: "text", autoWidth: true, name: "Bar value" });
+      }
+    }
+    rule(k, chart, "hairline", { weight: 1.5 });
+    k.text(bench, "Median of 20 runs on c7g.2xlarge with gp3 storage, Postgres 16.4. The script is in the repo: bench/branch.sh.", { style: s("Small 14"), color: "onPaper", name: "Bench note" });
+    const runs = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, name: "Runs" });
+    k.text(runs, "Fits the pipeline and the migration tool you have.", { style: s("Section 26"), color: "text", width: 320, name: "Runs title" });
+    const chips = k.stack(runs, { direction: "HORIZONTAL", gap: 10, wrap: true, name: "Chips" });
+    for (const r of RUNS) k.instance(chips, "Chip", { Label: r }, { name: "Chip" });
+    const band = k.stack(sheet, { gap: 20, fill: "card", stroke: { color: "primary", width: 2 }, padding: 48, name: "Band" });
+    k.text(band, "# free for one project, three branches. no card.", { style: s("Comment 15"), color: "cardMuted", name: "Band comment" });
+    const cmd = k.stack(band, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Band line" });
+    k.text(cmd, "$", { style: s("Install 22"), color: "cardSignal", autoWidth: true, name: "Band prompt" });
+    k.text(cmd, "curl -fsSL tern.example/install | sh", { style: s("Install 22"), color: "onCard", name: "Band command" });
+    k.text(band, "Or: brew install tern \xB7 npm i -g @tern/cli \xB7 docker pull tern/cli", { style: s("Proof 14"), color: "cardMuted", name: "Band others" });
+    footer(k, sheet, {
+      about: "Database branching for Postgres. Open source, made by four people who have all dropped the wrong table once.",
+      columns: [["docs", ["Quickstart", "CLI reference", "Masking rules", "Self-hosting"]], ["project", ["GitHub", "Changelog", "Benchmarks"]], ["company", ["Pricing", "Security", "Status"]]],
+      legal: "\xA9 2026 Tern Data, Inc. Postgres is a trademark of the PostgreSQL Community Association of Canada.",
+      brandStyle: s("Brand 20"),
+      headStyle: s("Foot head 14"),
+      linkStyle: s("Small 14"),
+      ruleColor: "hairline"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    respond(k, sheet, s, {
+      stack: ["Hero row", "Workflow", "Runs", "Command", "Footer columns"],
+      stackMobile: ["Man section", "Bench row", "Bar line"],
+      restyle: {
+        "Display 76": { laptop: "Display 64", tablet: "Display 46", mobile: "Display 32" },
+        "Section 40": { tablet: "Section 26", mobile: "Section 26" },
+        "Lead 19": { mobile: "Lead 17" },
+        "Term 15": { mobile: "Term 12" },
+        "Code 14": { mobile: "Code 12" },
+        "Install 22": { mobile: "Install 13" }
+      },
+      gap: { tablet: 72, mobile: 56 },
+      tweak: (kit, id, size) => {
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        if (size === "laptop") each("Hero row", { itemSpacing: 40 });
+        if (size === "tablet") compactNav(kit, id, ["benchmarks"], 24);
+        if (size === "tablet" || size === "mobile") {
+          each("Hero row", { itemSpacing: 36 });
+          each("Workflow", { itemSpacing: 32 });
+          each("Runs", { itemSpacing: 24 });
+          each("Bench title", { layoutSizingHorizontal: "FILL" });
+          each("Man section", { itemSpacing: 16 });
+          each("Command", { itemSpacing: 4 });
+          each("Band", { padding: { top: 28, right: 24, bottom: 28, left: 24 } });
+        }
+        if (size === "mobile") {
+          each("Lines", { padding: { top: 14, right: 14, bottom: 16, left: 14 } });
+          each("Command", { itemSpacing: 4 });
+          each("Man section", { itemSpacing: 8 });
+          each("Bench row", { itemSpacing: 10 });
+          each("Bar line", { itemSpacing: 4 });
+          each("Man top", { visible: false });
+          each("Line number", { width: 30 });
+          kit.named(id, "Indent").forEach((n, i) => kit.patch(n, { width: 8 + YAML[i][0] * 6 }));
+          each("Code", { padding: { top: 14, right: 8, bottom: 16, left: 0 } });
+          each("Band", { padding: { top: 22, right: 16, bottom: 22, left: 16 } });
+          each("Footer lists", { itemSpacing: 16 });
+        }
+        if (size === "mobile") kit.named(id, "Branch tag").slice(0, 1).forEach((n) => kit.patch(n, { x: 150 }));
+        if (size === "tablet" || size === "mobile") {
+          const bars = kit.named(id, "Bar");
+          BENCH.forEach(([, , a, , b], i) => {
+            kit.patch(bars[i * 2], { width: Math.round(200 * a) });
+            kit.patch(bars[i * 2 + 1], { width: Math.round(200 * b) });
+          });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  saas_dev_landing_default
+};

package/dist/chunks/chunk-IDSIBKTL.js

@@ -0,0 +1,121 @@
+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 {
+  brand,
+  caption,
+  captionCues,
+  captionParts,
+  column,
+  glow,
+  rig,
+  sizes,
+  stage
+} from "./chunk-TS3FI7DW.js";
+import {
+  scrollingRows
+} from "./chunk-PQNDFOQT.js";
+import {
+  key
+} from "./chunk-LAPZ2X3J.js";
+import {
+  deviceShadow
+} from "./chunk-WXWK2NO7.js";
+import {
+  PHONE_SCREEN,
+  appScreens
+} from "./chunk-2KFYCU3X.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion3d/screen-wall.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 1e4;
+var FPS = 30;
+var SIZES = ["video-1080p", "ig-story"];
+var SCREENS = ["Screen / Home", "Screen / Insights", "Screen / Goals", "Screen / Send"];
+var CAPTION = { name: "Caption", kicker: "Available now", title: "Everything about your money. One app.", body: "Accounts, budgets, goals and bills \u2014 on iPhone, iPad, Android and the web.", cta: "Get Fern free" };
+var CUES = [
+  { layer: "Caption", preset: "scale-in", at: 1400, params: { duration: 800, amount: 0.86 } },
+  ...captionCues(CAPTION, 1600)
+];
+function build(k, sheet, s) {
+  k.nameSheet(sheet, `Screen wall \xB7 ${preset(s.preset).name}`);
+  glow(k, sheet, "primary", Math.round(1500 * s.u), s.W * 0.5, s.H * 0.5, 0.5);
+  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 2e3 * s.u });
+  const rows = s.tall ? 6 : 4, perRow = s.tall ? 8 : 12, gap = 60;
+  const wall = rig(k, scene, s, "Wall", PHONE_SCREEN.width, PHONE_SCREEN.height, s.W / 2, s.H / 2);
+  k.patch(wall, { scaleX: 0.62, scaleY: 0.62, rotateX: 30 });
+  const turn = k.group(wall, { x: 0, y: 0, width: PHONE_SCREEN.width, height: PHONE_SCREEN.height }, { name: "Wall turn" });
+  k.patch(turn, { rotation: -20 });
+  const pitch = PHONE_SCREEN.width + gap;
+  scrollingRows(k, turn, {
+    rows,
+    perRow,
+    card: PHONE_SCREEN,
+    gap,
+    offset: true,
+    wrap: SCREENS.length,
+    // Centred on the wall: half the row to the left of it, the rows stacked about it.
+    x: () => Math.round(-(perRow * pitch) / 2 + PHONE_SCREEN.width / 2),
+    y: (r) => Math.round((r - (rows - 1) / 2) * (PHONE_SCREEN.height + gap)),
+    rate: (r) => (r % 2 ? 1 : -1) * (70 + r % 3 * 30),
+    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.4, 30, 60)] });
+      return card;
+    }
+  });
+  key(k, wall, "rotateX", [[0, 44, ease.out("expo")], [1600, 30, ease.inOut("sine")], [DURATION, 24]]);
+  key(k, wall, "translateY", [[0, k.node(wall).translateY + Math.round(420 * s.u), ease.out("expo")], [1600, k.node(wall).translateY]]);
+  key(k, scene, "scene3d.camera.z", [[0, 900, ease.inOut("sine")], [DURATION, -500]]);
+  key(k, scene, "scene3d.camera.x", [[0, -240, ease.inOut("sine")], [DURATION, 240]]);
+  k.rect(sheet, s.W, s.H, "background", { name: "Wash", opacity: 0.18, absolute: { x: 0, y: 0 } });
+  captionParts(k, s, { kicker: CAPTION.kicker, cta: CAPTION.cta });
+  const col = column(s, s.tall ? 96 : 360);
+  const block = caption(k, sheet, s, { ...CAPTION, width: col.width, align: "CENTER", panel: true, at: { x: col.x, y: 0 } });
+  const laid = k.finish().nodes[block];
+  k.patch(block, { y: Math.round((s.H - laid.height) / 2) });
+  k.cues(sheet, CUES);
+}
+var screen_wall_default = defineTemplate({
+  id: "motion-3d-screen-wall",
+  meta: {
+    name: "Screen wall",
+    description: "An endless 3D wall of your app's screens scrolls row against row while the camera flies in across it and a frosted caption comes up \u2014 a 10-second launch shot at 16:9 and 9:16, 30 fps. Every card is a screen component: edit one and the wall follows",
+    category: "animation",
+    tags: ["animation", "3d", "app", "screens", "wall", "screenshots", "launch", "promo", "fly-through"],
+    platforms: ["youtube", "instagram", "tiktok", "x", "linkedin", "web"],
+    formats: ["video", "ad", "reel", "intro"],
+    useCases: ["launch", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Screen wall", preset(SIZES[0]));
+    brand(k, "dark");
+    appScreens(k, ["Home", "Insights", "Goals", "Send", "Screenshot"]);
+    const [cover] = sizes(k, SIZES, (sheet, s) => build(k, sheet, s));
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  screen_wall_default
+};