@popcraft/kit 0.29.0 → 0.31.0

package/dist/chunks/chunk-NRRHQ45H.js

@@ -0,0 +1,333 @@
+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-FF7Q4NVH.js";
+import {
+  caret
+} from "./chunk-UDE42EDS.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  compactNav,
+  footer,
+  respond,
+  rule,
+  soft,
+  typeScale
+} from "./chunk-DAF5SK5X.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-TF2MO3UA.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.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 === "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-NSF4CXZC.js

@@ -0,0 +1,132 @@
+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 {
+  hz
+} from "./chunk-WV6ZTKE7.js";
+import {
+  blurred
+} from "./chunk-M6VTXO6F.js";
+import {
+  lcg,
+  pt,
+  r3,
+  rng
+} from "./chunk-6RCDZU4R.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+import {
+  __export
+} from "./chunk-LJSVREWM.js";
+
+// templates/src/shared/overlays.ts
+var overlays_exports = {};
+__export(overlays_exports, {
+  RAIN_PERIOD: () => RAIN_PERIOD,
+  dots: () => dots,
+  fitRain: () => fitRain,
+  fitScanlines: () => fitScanlines,
+  fitSnow: () => fitSnow,
+  overprint: () => overprint,
+  rain: () => rain,
+  rainPaths: () => rainPaths,
+  scanPaths: () => scanPaths,
+  scanlines: () => scanlines,
+  snow: () => snow
+});
+init_define_POPCRAFT_COMPONENT_IDS();
+var SCAN_PERIOD = 6;
+var scan = (y, w, h) => ({ points: [{ x: 0, y }, { x: w, y }, { x: w, y: y + h }, { x: 0, y: y + h }], closed: true });
+var scanPaths = (w, h) => Array.from({ length: Math.ceil(h / SCAN_PERIOD) }, (_, i) => scan(i * SCAN_PERIOD, w, SCAN_PERIOD / 2));
+function scanlines(k, parent, o = {}) {
+  const f = k.node(parent);
+  return k.vector(parent, f.width, f.height, scanPaths(f.width, f.height), "scan", { name: "Scanlines", opacity: o.opacity ?? 0.14, absolute: { x: 0, y: 0 } });
+}
+function fitScanlines(k, sheetId) {
+  for (const id of k.named(sheetId, "Scanlines")) {
+    const p = k.node(k.node(id).parentId);
+    k.patch(id, { x: 0, y: 0, width: p.width, height: p.height, paths: scanPaths(p.width, p.height) });
+  }
+}
+var RAIN_PERIOD = 240;
+function rainPaths(w, h, seed, count, len, slant) {
+  const next = lcg(seed);
+  const drops = Array.from({ length: count }, () => ({ x: next() * (w + 60) - 30, y: next() * RAIN_PERIOD, l: len * (0.5 + next()) }));
+  const out = [];
+  for (let top = 0; top < h + RAIN_PERIOD; top += RAIN_PERIOD) for (const d of drops) out.push({ closed: false, points: [pt(d.x, top + d.y), pt(d.x - slant * d.l, top + d.y + d.l)] });
+  return out;
+}
+function rain(k, parent, w, h, o) {
+  const id = k.vector(parent, w, h + RAIN_PERIOD, rainPaths(w, h, o.seed, o.count, o.len ?? 46, 0.22), o.color, { name: o.name ?? "Rain", strokeWidth: o.width ?? 2, opacity: o.opacity, absolute: { x: 0, y: 0 } });
+  k.behave(id, "translateY", [{ kind: "spin", rate: o.rate }, { kind: "mod", period: RAIN_PERIOD, offset: -RAIN_PERIOD }]);
+  return id;
+}
+function fitRain(k, sheetId, o) {
+  for (const id of k.named(sheetId, o.name)) {
+    const p = k.node(k.node(id).parentId);
+    k.patch(id, { x: 0, y: 0, width: p.width, height: p.height + RAIN_PERIOD, paths: rainPaths(p.width, p.height, o.seed, o.count, o.len ?? 46, 0.22) });
+  }
+}
+var snowName = (o) => o.depth === "far" ? "Snow far" : "Snow near";
+function flakes(o) {
+  const rand = rng(o.seed ?? (o.depth === "far" ? 7 : 19));
+  return Array.from({ length: o.n }, () => {
+    const d = rand(), near = o.depth === "near";
+    const size = near ? (9 + d * d * 22) * o.u : (3 + d * 5) * o.u;
+    return { x: r3(rand() * o.w), y: r3(rand() * o.h), size: r3(Math.max(2, size)), opacity: r3(near ? 0.95 - d * 0.35 : 0.35 + d * 0.5), soft: near ? r3(size * (0.06 + d * 0.16)) : 0, speed: near ? 170 + d * 230 : 50 + d * 70, sway: rand(), turn: rand() };
+  });
+}
+function snow(k, parent, o) {
+  const id = k.frame(parent, { x: 0, y: 0, width: o.w, height: o.h }, { name: snowName(o) });
+  const margin = 40 * o.u, period = o.h + 2 * margin;
+  for (const f of flakes(o)) {
+    const flake = k.ellipse(id, f.size, "flake", { name: "Flake", opacity: f.opacity, absolute: { x: f.x, y: f.y }, ...f.soft > 0.6 ? { effects: [blurred(f.soft)] } : {} });
+    if (!o.loopMs) continue;
+    const secs = o.loopMs / 1e3, falls = Math.max(1, Math.round(secs * f.speed * o.u / period));
+    k.behave(flake, "translateY", [{ kind: "spin", rate: r3(falls * period / secs) }, { kind: "mod", period: r3(period), offset: r3(-f.y - margin) }]);
+    k.behave(flake, "translateX", [{ kind: "sine", amp: r3((10 + 34 * f.sway) * o.u), freq: hz(1 + Math.round(f.sway * 2), o.loopMs), phase: r3(f.turn) }]);
+  }
+  return id;
+}
+function fitSnow(k, root, o) {
+  for (const id of k.named(root, snowName(o))) {
+    k.patch(id, { x: 0, y: 0, width: o.w, height: o.h });
+    const all = flakes(o);
+    k.named(id, "Flake").forEach((flake, i) => {
+      const f = all[i];
+      if (f) k.patch(flake, { x: f.x, y: f.y, width: f.size, height: f.size });
+    });
+  }
+}
+function overprint(k, id) {
+  k.patch(id, { blendMode: "MULTIPLY" });
+  return id;
+}
+function dots(k, parent, o) {
+  const name = o.name ?? "Halftone", w = o.size, h = o.square ? o.height ?? o.size : o.size;
+  const from = o.from ?? 0.14, to = o.to ?? 0.86;
+  const fx = [{ id: "e1", type: "HALFTONE", angle: o.screen ?? 45, dotSize: o.dot ?? 18, contrast: to - from, colorMode: "SOURCE", shape: o.line ? "LINE" : "CIRCLE", layout: o.line ? "LINEAR" : "UNIFORM", toneSource: "LINEAR_GRADIENT", gradientAngle: o.angle ?? 90, center: { x: 0.5, y: 0.5 }, visible: true }];
+  const id = k.stack(parent, { width: w, height: h, name, ...o.absolute ? { absolute: o.absolute } : {} });
+  if (!o.square) k.ellipse(id, w, o.role ?? "accent", { name: `${name} cut`, mask: true, absolute: { x: 0, y: 0 } });
+  k.rect(id, w, h, o.role ?? "accent", { name: `${name} screen`, effects: fx, absolute: { x: 0, y: 0 } });
+  return o.over === false ? id : overprint(k, id);
+}
+
+export {
+  scanPaths,
+  scanlines,
+  fitScanlines,
+  RAIN_PERIOD,
+  rainPaths,
+  rain,
+  fitRain,
+  snow,
+  fitSnow,
+  overprint,
+  dots,
+  overlays_exports
+};

package/dist/chunks/chunk-NSMERQO5.js

@@ -0,0 +1,78 @@
+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 {
+  standardPortfolio
+} from "./chunk-YWQVS363.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/portfolio-depth-tunnel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var WORK = [
+  { title: "Spin Cycle", client: "Low Hum Pictures", year: "2026", kind: "Feature film \xB7 Director of photography", cover: "depth-00", summary: "A night-shift drama that lives in one laundromat from midnight to dawn.", story: "Shot on anamorphic lenses with practical light only: the dryers and the vending machine. Premiered at Rotterdam.", credits: "Director \u2014 Ana Liu \xB7 DP \u2014 Theo Marsh \xB7 Colour \u2014 Grade Room" },
+  { title: "Keeper of the Light", client: "North Sea Films", year: "2025", kind: "Short film \xB7 DP", cover: "depth-01", summary: "A lighthouse in a storm and the woman who will not leave it.", story: "Two nights of rain towers on a real headland; the beam is the lighthouse\u2019s own.", credits: "Director \u2014 Ruth Ward \xB7 DP \u2014 Theo Marsh" },
+  { title: "Blue Hour", client: "Arcadia Records", year: "2025", kind: "Music video \xB7 DP", cover: "depth-02", summary: "Two silhouettes on a rooftop for the twenty minutes the city is blue.", story: "One take a night, five nights, the best of the five.", credits: "Director \u2014 Kemi Ade \xB7 DP \u2014 Theo Marsh" },
+  { title: "Room 214", client: "Halcyon Hotels", year: "2024", kind: "Commercial \xB7 DP", cover: "depth-03", summary: "A green-carpeted corridor and the one door left open.", story: "A hotel brand film that plays like the first minute of a thriller.", credits: "Director \u2014 Ana Liu \xB7 DP \u2014 Theo Marsh \xB7 Agency \u2014 Doorman" },
+  { title: "Leaf Tunnel", client: "Vellum Motors", year: "2024", kind: "Commercial \xB7 DP", cover: "depth-04", summary: "A car through a tunnel of autumn trees, headlights on at four in the afternoon.", story: "A car-to-car rig and a week of waiting for the leaves to turn.", credits: "Director \u2014 Oskar Lind \xB7 DP \u2014 Theo Marsh" },
+  { title: "Solo", client: "City Ballet", year: "2023", kind: "Dance film \xB7 DP", cover: "depth-05", summary: "One dancer, one spotlight, an empty theatre.", story: "Filmed in the hour between the matinee and the evening show.", credits: "Director, choreography \u2014 Mira Sol \xB7 DP \u2014 Theo Marsh" }
+];
+var portfolio_depth_tunnel_default = defineTemplate({
+  id: "web-portfolio-depth-tunnel",
+  meta: {
+    name: "Depth push portfolio",
+    description: "A cinematographer\u2019s portfolio where pages travel in depth: open a film and the page recedes into the dark as the next arrives from in front; go back and it pulls the other way. Wide frame grabs two across on black, a page per film and a bio. The move is drawn on the GPU with WebGPU, in CSS 3D elsewhere. The films are a collection you edit as a table. Desktop, tablet and phone",
+    category: "web",
+    tags: ["portfolio", "3d", "depth", "transition", "webgpu", "cinematography", "film", "dark", "cms", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["portfolio"],
+    created: "2026-10-05",
+    updated: "2026-10-05"
+  },
+  breakpoints: true,
+  build: () => standardPortfolio({
+    name: "Depth push",
+    brand: { paper: "#0B0C0E", text: "#ECE8E1", onPaper: "#959089", primary: "#E5B560", onPrimary: "#0B0C0E", card: "#0B0C0E", line: "#24262A" },
+    fields: { name: "Theo Marsh", email: "theo@theomarsh.film" },
+    styles: {
+      "Wordmark 18": { size: 18, fontWeight: 600, letterSpacing: 2, lineHeight: 24 },
+      "Small 13": { size: 13, fontWeight: 500, letterSpacing: 1.2, lineHeight: 18 },
+      "Meta 14": { size: 14, fontWeight: 400, lineHeight: 20 },
+      "Title 20": { size: 20, fontWeight: 500, letterSpacing: -0.2, lineHeight: 28 },
+      "Lead 24": { size: 24, fontWeight: 400, lineHeight: 34 },
+      "Body 17": { size: 17, fontWeight: 400, lineHeight: 28 },
+      "Display 72": { size: 72, fontWeight: 500, letterSpacing: -2, lineHeight: 76 },
+      "Display 40": { size: 40, fontWeight: 500, letterSpacing: -1, lineHeight: 46 }
+    },
+    type: { wordmark: "Wordmark 18", small: "Small 13", meta: "Meta 14", title: "Title 20", lead: "Lead 24", body: "Body 17", display: "Display 72", displaySmall: "Display 40" },
+    projects: WORK,
+    go: "DEPTH_PUSH",
+    back: "DEPTH_PULL",
+    links: [["work", "FILMS"], ["studio", "BIO"]],
+    lead: { kicker: "DIRECTOR OF PHOTOGRAPHY \xB7 LONDON", headline: "Light for stories told at night.", intro: "Theo Marsh shoots features, shorts, music videos and commercials, mostly after dark." },
+    grid: { cols: 2, gap: 24, ratio: 0.5625, radius: 4, meta: "{{item.client}} \xB7 {{item.year}}", tablet: 1 },
+    project: { ratio: 0.5625, kicker: "FILM", more: { cols: 3, ratio: 0.5625, label: "MORE FILMS" } },
+    studio: {
+      statement: "I make pictures with whatever light is already there, and a little more.",
+      about: "Twelve years behind the camera: assistant on features in London, then DP on shorts that went to Berlin, Rotterdam and Sundance. I own a full anamorphic package and work with the same gaffer on everything.",
+      picture: "depth-02",
+      ratio: 0.42,
+      services: ["Features and shorts", "Music videos", "Commercials", "Camera package with crew"],
+      clients: "Low Hum Pictures, North Sea Films, Arcadia Records, Halcyon Hotels, Vellum Motors and City Ballet.",
+      contact: "Represented by Frame Agency."
+    },
+    elsewhere: "VIMEO \xB7 IMDB \xB7 INSTAGRAM"
+  })
+});
+
+export {
+  portfolio_depth_tunnel_default
+};

package/dist/chunks/chunk-NSRTHXIZ.js

@@ -0,0 +1,41 @@
+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 {
+  createWorldMatrixResolver,
+  getWorldMatrix,
+  init_scene_graph
+} from "./chunk-MQ66HDKC.js";
+import {
+  aabbOf,
+  init_transform
+} from "./chunk-X53QDCNX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// lib/editor/selection-bounds.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+init_transform();
+function selectionWorldBounds(nodes, ids, scrollState) {
+  const matrixOf = scrollState ? createWorldMatrixResolver(nodes, scrollState) : (id) => getWorldMatrix({ nodes }, id);
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const id of ids) {
+    const n = nodes[id];
+    if (!n) continue;
+    const b = aabbOf(matrixOf(id), n.width, n.height);
+    minX = Math.min(minX, b.minX);
+    maxX = Math.max(maxX, b.maxX);
+    minY = Math.min(minY, b.minY);
+    maxY = Math.max(maxY, b.maxY);
+  }
+  return minX === Infinity ? null : { minX, minY, maxX, maxY };
+}
+
+export {
+  selectionWorldBounds
+};