@popcraft/kit 0.26.0 → 0.27.0

package/dist/chunks/chunk-N3CQYI3B.js

@@ -0,0 +1,304 @@
+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 {
+  SHARD,
+  WEB_STEPS,
+  WEB_TYPE,
+  blinking,
+  blocks,
+  cell,
+  cursor,
+  fitGround,
+  ground,
+  marquee,
+  panel,
+  promptLine,
+  runnerGrid,
+  sectionHead,
+  spinner,
+  termBrand,
+  termLine,
+  termWindow
+} from "./chunk-3SXCX5CX.js";
+import {
+  portraitSlot
+} from "./chunk-3TBNWHDN.js";
+import {
+  CONTENT,
+  compactNav,
+  followTyping,
+  footer,
+  respond,
+  rule,
+  typeScale
+} from "./chunk-O7APDMKU.js";
+import {
+  buttons,
+  nav
+} from "./chunk-YKXCPYWJ.js";
+import {
+  cutOn,
+  hz
+} from "./chunk-RXG7T7TH.js";
+import {
+  box
+} from "./chunk-BNVLVZUT.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/style-terminal-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Terminal SaaS landing page";
+var DURATION = 6e3;
+var TYPING = { text: "Command", caret: "Command caret", at: 300, duration: 1e3 };
+var SPLIT = 1500;
+var UP = 2e3;
+var DONE = 4300;
+var CELLS = 24;
+var TEAMS = ["Halcyon Bank", "Tidewater", "Northpass", "Quillstack", "Ferro Labs", "Oakmesh"];
+var DAYS = Array.from({ length: 30 }, (_, i) => i < 12 ? 0.86 + i * 37 % 11 / 80 : 0.055 + i * 13 % 5 / 400);
+var CHART_H = 200;
+var PLANS = [
+  ["hobby", "4 runners", `${SHARD.freeMinutes} min a month`, "$0"],
+  ["team", "16 runners", "unlimited minutes", `$${SHARD.team} a seat`],
+  ["scale", "64 runners", "SSO, audit log, SLA", `$${SHARD.scale} a seat`]
+];
+var JSON_LINES = [
+  ['  "id": ', '"run_7Hq2"', "amber"],
+  ['  "status": ', '"passed"', "green"],
+  ['  "tests": ', "2418", "amber"],
+  ['  "runners": ', "64", "amber"],
+  ['  "duration_s": ', "52.3", "amber"],
+  ['  "slowest": ', '"checkout.spec.ts"', "amber"]
+];
+var cues = [
+  cutOn("Eyebrow", 120),
+  { layer: "Headline", preset: "typewriter", at: 0, params: { duration: 900 } },
+  { layer: "Command", preset: "typewriter", at: TYPING.at, params: { duration: TYPING.duration } },
+  cutOn("Split line", SPLIT),
+  cutOn("Up line", UP),
+  cutOn("Progress line", UP),
+  cutOn("Runners", UP),
+  cutOn("Block", UP + 80, Math.round((DONE - UP - 80) / CELLS)),
+  cutOn("Runner", UP + 200, Math.round((DONE - UP - 200) / 64)),
+  cutOn("Pass line", DONE),
+  { layer: "Pass", preset: "flash", at: DONE + 40, params: { duration: 400, ease: ease.hold } },
+  cutOn("Idle line", DONE + 500),
+  // Down the page: the diff lands, the bars draw, the JSON opens.
+  cutOn("Diff del", 900),
+  cutOn("Diff add", 1500),
+  { layer: "Before bars", preset: "wipe-in", at: 600, params: { duration: 1200, ease: ease.linear } },
+  { layer: "After bars", preset: "wipe-in", at: 1800, params: { duration: 1800, ease: ease.linear } },
+  cutOn("Json line", 1200, 220),
+  cutOn("Json close", 1200 + 220 * 6)
+];
+var counts = [
+  { layer: "Percent", at: UP + 80, duration: DONE - UP - 80, tick: Math.round((DONE - UP - 80) / 25), counter: { from: 0, to: 100, suffix: "%" } },
+  { layer: "Done count", at: UP + 80, duration: DONE - UP - 80, ease: ease.linear, counter: { from: 0, to: SHARD.tests, suffix: `/${SHARD.tests.toLocaleString("en-US")}` } },
+  { layer: "Saved figure", at: 1800, duration: 1800, tick: 60, counter: { from: 0, to: 212, suffix: " h" } }
+];
+function dayBars(w) {
+  const gap = 4, bw = (w - gap * 29) / 30;
+  const bar = (v, i) => box(Math.round(i * (bw + gap) * 10) / 10, Math.round(CHART_H * (1 - v)), Math.round(bw * 10) / 10, Math.round(CHART_H * v));
+  return { before: DAYS.slice(0, 12).map(bar), after: DAYS.map(bar).slice(12) };
+}
+var style_terminal_landing_default = defineTemplate({
+  id: "web-saas-style-terminal-landing",
+  meta: {
+    name: NAME,
+    description: "A full landing page in the terminal look: monospace throughout, near-black with a faint character grid, ANSI colour and box-drawn panels. The hero plays a real shell session on the page timeline (a typed command, a spinner, a progress bar of character cells, 64 runner cells, PASS in inverse video); under it a stepping logo strip, a ci.yml diff, a bar chart that draws with a counter, a JSON response that opens a line at a time, a customer quote with a photo slot, a plans table, a closing prompt with a blinking cursor and a footer. Desktop to phone",
+    category: "web",
+    tags: ["landing page", "saas", "terminal", "monospace", "cli", "developer tools", "api", "hero", "diff", "json", "chart", "counter", "marquee", "testimonial", "pricing", "animation", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, preset("web-desktop"));
+    k.quantizeGeometry = true;
+    termBrand(k, { tagline: "Your test suite, back in 52 seconds." });
+    const s = typeScale(k, { ...WEB_TYPE });
+    buttons(k, { style: s("Button 15"), pad: [11, 18], radius: 4 });
+    const term = s("Term 15"), CW = cell(15);
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 112, { top: 24, right: 120, bottom: 48, left: 120 }, "paper", "MIN", "MIN");
+    k.patch(sheet, { layoutSizingVertical: "HUG", minHeight: 1024, clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    ground(k, sheet, 1440, 6e3, { cw: 18, lh: 36 });
+    const top = k.stack(sheet, { gap: 72, name: "Top" });
+    nav(k, top, { links: ["Docs", "Pricing", "Changelog", "GitHub", "Sign in"], cta: "Start free", style: s("Nav 15"), brandStyle: s("Brand 18") });
+    const hero = k.stack(top, { direction: "HORIZONTAL", gap: 64, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { width: 520, gap: 24, name: "Copy" });
+    const eyebrow = k.stack(copy, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", padding: { top: 4, right: 10, bottom: 4, left: 10 }, stroke: { color: "edge", width: 2, align: "INSIDE" }, name: "Eyebrow" });
+    k.text(eyebrow, `v${SHARD.version} \xB7 now on every CI`, { style: s("Label 13"), color: "onPaper", autoWidth: true, name: "Eyebrow words" });
+    k.text(copy, "{{brand.tagline}}", { style: s("Display 60"), color: "text", name: "Headline" });
+    k.text(copy, "{{brand.name}} splits your suite over up to 64 machines by last run's timings, so every shard ends at once. Change one line in CI; keep your test runner.", { style: s("Lead 18"), color: "onPaper", name: "Lead" });
+    const install = k.stack(copy, { direction: "HORIZONTAL", gap: 12, align: "CENTER", wrap: true, name: "Install" });
+    const cmd = k.stack(install, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 0, fill: "card", padding: { top: 11, right: 16, bottom: 11, left: 16 }, stroke: { color: "edge", width: 2, align: "INSIDE" }, radius: 4, name: "Install command" });
+    k.text(cmd, "$ ", { style: s("Button 15"), color: "green", autoWidth: true, name: "Install sign" });
+    k.text(cmd, SHARD.install, { style: s("Button 15"), color: "onCard", autoWidth: true, name: "Install words" });
+    k.instance(install, "Button", { Label: "Start free" }, { name: "CTA primary" });
+    k.text(copy, `Free for ${SHARD.freeMinutes} runner minutes a month. Jest, Vitest, pytest, RSpec, Go.`, { style: s("Small 13"), color: "onPaper", name: "Terms" });
+    const t = termWindow(k, hero, { w: 616, h: 384, left: "~/acme/checkout", right: "zsh", style: s("Label 13"), bar: 42, pad: 20, gap: 6, name: "Hero terminal" });
+    for (const id of [t.win]) k.patch(id, { layoutSizingHorizontal: "FILL" });
+    termLine(k, t.body, [{ t: "$ ", c: "green" }, { t: SHARD.install, c: "onCard" }], { style: term, name: "Init line" });
+    termLine(k, t.body, [{ t: "  wrote .shard.toml, found ", c: "cardMuted" }, { t: "2,418 tests", c: "amber" }], { style: term, name: "Init done" });
+    promptLine(k, t.body, SHARD.run, { style: term, size: 15, width: Math.round(CW * 26) });
+    const split = termLine(k, t.body, [{ t: "[+]", c: "green", name: "Spin split", width: Math.ceil(3 * CW) }, { t: " splitting 2,418 tests by timing", c: "onCard" }], { style: term, name: "Split line" });
+    termLine(k, t.body, [{ t: "[+]", c: "green", width: Math.ceil(3 * CW), name: "Up mark" }, { t: " 64 runners up", c: "onCard" }, { t: ` ${SHARD.region}`, c: "cyan" }, { t: " 1.8s", c: "amber" }], { style: term, name: "Up line" });
+    const prog = k.stack(t.body, { direction: "HORIZONTAL", align: "CENTER", gap: Math.round(CW), padding: { top: 6, right: 0, bottom: 4, left: 0 }, name: "Progress line" });
+    blocks(k, prog, { cells: CELLS, cw: CW, h: 16 });
+    k.text(prog, "100%", { style: term, color: "amber", width: Math.ceil(4 * CW), align: "RIGHT", name: "Percent" });
+    k.text(prog, "2,418/2,418", { style: term, color: "cardMuted", width: Math.ceil(11 * CW), name: "Done count" });
+    runnerGrid(k, t.body, { n: 64, cols: 16, size: 12, gap: 4 });
+    termLine(k, t.body, [{ t: "PASS", c: "green", tag: "ink", name: "Pass" }, { t: " 2,418 passed", c: "green" }, { t: `  ${SHARD.after}`, c: "amber" }], { style: term, name: "Pass line" });
+    const idle = k.stack(t.body, { direction: "HORIZONTAL", align: "CENTER", name: "Idle line" });
+    k.text(idle, "$ ", { style: term, color: "green", autoWidth: true, name: "Prompt sign" });
+    blinking(k, cursor(k, idle, 15, { name: "Cursor" }), hz(9, DURATION));
+    const teams = k.stack(sheet, { gap: 16, name: "Teams" });
+    k.text(teams, "# teams whose CI got its afternoons back", { style: s("Label 13"), color: "onPaper", name: "Teams label" });
+    rule(k, teams, "edge", { name: "Teams rule" });
+    marquee(k, teams, { names: TEAMS, item: 240, height: 40, style: s("Brand 18"), duration: DURATION, every: 200, step: 48 });
+    rule(k, teams, "edge", { name: "Teams rule" });
+    const setup = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", name: "Setup" });
+    const setupCopy = k.stack(setup, { width: 440, gap: 20, name: "Setup copy" });
+    sectionHead(k, setupCopy, { label: "setup", title: "Change one line in CI.", body: "Keep your test runner and its config. Swap the test step for shard run, add a token and push. The first run learns each file's time; every run after is split by it.", s, name: "Setup head" });
+    const diff = panel(k, setup, { label: ".github/workflows/ci.yml", style: s("Label 13"), name: "Diff panel", gap: 2 });
+    for (const [line, c, name] of [
+      ["steps:", "cardMuted", "Diff line"],
+      ["  - uses: actions/checkout@v4", "cardMuted", "Diff line"],
+      ["  - run: npm ci", "cardMuted", "Diff line"],
+      ["- - run: npm test", "red", "Diff del"],
+      [`+ - run: npx ${SHARD.run}`, "green", "Diff add"],
+      ["    env:", "cardMuted", "Diff line"],
+      ["      SHARD_TOKEN: secrets.TOKEN", "cyan", "Diff line"]
+    ]) k.text(diff.body, line, { style: term, color: c, name });
+    const days = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", name: "Days" });
+    const chart = panel(k, days, { label: "minutes per push, 30 days", style: s("Label 13"), name: "Chart panel", gap: 14 });
+    const area = k.stack(chart.body, { height: CHART_H, name: "Chart area" });
+    const w0 = 1200 - 440 - 64 - 44, bars = dayBars(w0);
+    k.vector(area, w0, CHART_H, [0.25, 0.5, 0.75].map((f) => box(0, Math.round(CHART_H * f), w0, 1)), k.tint("cardMuted", 0.3), { name: "Chart levels", absolute: { x: 0, y: 0 } });
+    k.vector(area, w0, CHART_H, bars.before, k.tint("red", 0.45), { name: "Before bars", absolute: { x: 0, y: 0 } });
+    k.vector(area, w0, CHART_H, bars.after, "green", { name: "After bars", absolute: { x: 0, y: 0 } });
+    const axis = k.stack(chart.body, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Chart axis" });
+    for (const a of ["sep 02", "sep 14 shard on", "oct 01"]) k.text(axis, a, { style: s("Small 13"), color: "cardMuted", autoWidth: true, name: "Axis label" });
+    const daysCopy = k.stack(days, { width: 440, gap: 20, name: "Days copy" });
+    sectionHead(k, daysCopy, { label: "results", title: "From 14 minutes to under one.", body: "Halcyon Bank's monorepo, 24 engineers pushing about nine times a day each. This is what the switch looked like on main.", s, name: "Days head" });
+    const saved = k.stack(daysCopy, { gap: 4, name: "Saved" });
+    k.text(saved, "212 h", { style: s("Figure 64"), color: "text", width: 300, name: "Saved figure" });
+    k.text(saved, "of waiting saved in September", { style: s("Body 15"), color: "onPaper", name: "Saved label" });
+    const api = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", name: "Api" });
+    const apiCopy = k.stack(api, { width: 440, gap: 20, name: "Api copy" });
+    sectionHead(k, apiCopy, { label: "api", title: "Every run is JSON.", body: "Post a run to Slack, fail a deploy on a slow shard, chart your own suite. Every run, shard and test is one GET away, with a token scoped to a single repo.", s, name: "Api head" });
+    const json = panel(k, api, { label: "GET /v1/runs/run_7Hq2", style: s("Label 13"), name: "Json panel", gap: 2 });
+    k.text(json.body, "{", { style: term, color: "onCard", name: "Json open" });
+    for (const [key, value, c] of JSON_LINES) termLine(k, json.body, [{ t: key, c: "cyan" }, { t: value, c }, { t: ",", c: "cardMuted" }], { style: term, name: "Json line" });
+    const close = k.stack(json.body, { direction: "HORIZONTAL", align: "CENTER", name: "Json close" });
+    k.text(close, "} ", { style: term, color: "onCard", autoWidth: true, name: "Json brace" });
+    const quote = panel(k, sheet, { label: "cat testimonials/halcyon.txt", style: s("Label 13"), name: "Quote panel", pad: 36 });
+    const qrow = k.stack(quote.body, { direction: "HORIZONTAL", gap: 36, align: "CENTER", name: "Quote row" });
+    portraitSlot(k, qrow, 132, 132, { radius: 2, ground: "well", skin: "edge", top: "line", halo: "green", name: "Portrait", photo: "Customer photo" });
+    const words = k.stack(qrow, { gap: 16, name: "Quote words" });
+    k.text(words, '"Our CI went from nineteen minutes to seventy-one seconds. Nobody waits on a build any more; we merge before the coffee is poured."', { style: s("Quote 24"), color: "onCard", name: "Quote" });
+    k.text(words, "-- Dana Okafor, staff engineer, Halcyon Bank", { style: s("Label 13"), color: "cardMuted", name: "Quote by" });
+    const pricing = k.stack(sheet, { gap: 28, name: "Pricing" });
+    sectionHead(k, pricing, { label: "pricing", title: "Free until it is a habit.", s, name: "Pricing head" });
+    const table = k.stack(pricing, { name: "Plans" });
+    for (const [name, runners, what, price] of PLANS) {
+      rule(k, table, "edge", { name: "Plan rule" });
+      const row = k.stack(table, { direction: "HORIZONTAL", gap: 24, align: "CENTER", padding: { top: 18, right: 0, bottom: 18, left: 0 }, name: "Plan row" });
+      k.text(row, name, { style: s("Section 24"), color: "text", width: 160, name: "Plan name" });
+      k.text(row, runners, { style: term, color: "text", width: 160, name: "Plan runners" });
+      k.text(row, what, { style: s("Body 15"), color: "onPaper", name: "Plan what" });
+      k.text(row, price, { style: term, color: "text", width: 170, align: "RIGHT", name: "Plan price" });
+    }
+    rule(k, table, "edge", { name: "Plan rule" });
+    k.instance(pricing, "Button quiet", { Label: "Compare the plans" }, { name: "Plans link" });
+    const closing = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", name: "Close" });
+    const closeWords = k.stack(closing, { width: 620, gap: 28, name: "Close words" });
+    const big = k.stack(closeWords, { direction: "HORIZONTAL", align: "CENTER", gap: 16, wrap: true, name: "Close prompt" });
+    k.text(big, `$ ${SHARD.install}`, { style: s("Display 60"), color: "text", autoWidth: true, name: "Close title" });
+    blinking(k, k.rect(big, 36, 60, "primary", { name: "Close cursor" }), hz(9, DURATION));
+    const closeRow = k.stack(closeWords, { direction: "HORIZONTAL", gap: 20, align: "CENTER", wrap: true, name: "Close row" });
+    k.instance(closeRow, "Button", { Label: "Start free" }, { name: "Close button" });
+    k.text(closeWords, "Two minutes to the first split run. No card.", { style: s("Body 15"), color: "onPaper", name: "Close line" });
+    const init = panel(k, closing, { label: `~/checkout $ ${SHARD.install}`, style: s("Label 13"), name: "Init panel", gap: 4 });
+    for (const [mark, words2, c] of [["[+]", "found jest, 212 suites, 2,418 tests", "onCard"], ["[+]", "wrote shard.config.json", "onCard"], ["[+]", "added SHARD_TOKEN to ci.yml", "onCard"], ["==>", "push to learn each file's time", "amber"]]) {
+      termLine(k, init.body, [{ t: mark, c: mark === "==>" ? "amber" : "green" }, { t: ` ${words2}`, c }], { style: term, name: "Init line" });
+    }
+    const initIdle = k.stack(init.body, { direction: "HORIZONTAL", align: "CENTER", name: "Init idle" });
+    k.text(initIdle, "~/checkout ", { style: term, color: "cyan", autoWidth: true, name: "Init dir" });
+    k.text(initIdle, "$ ", { style: term, color: "green", autoWidth: true, name: "Init sign" });
+    footer(k, sheet, {
+      about: SHARD.pitch,
+      legal: "(c) 2026 {{brand.name}}. Built for teams who would rather be shipping than waiting.",
+      columns: [["product", ["Docs", "Pricing", "Changelog", "Status"]], ["cli", ["Install", "Runners", "API", "GitHub"]], ["company", ["Security", "Careers", "Contact"]]],
+      brandStyle: s("Brand 18"),
+      headStyle: s("Label 13"),
+      linkStyle: s("Small 13"),
+      ruleColor: "edge"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    spinner(k, k.named(split, "Spin split")[0], SPLIT, UP);
+    followTyping(k, sheet, TYPING);
+    respond(k, sheet, s, {
+      stack: ["Hero", "Setup", "Days", "Api", "Close", "Footer columns"],
+      stackMobile: ["Quote row", "Plan row"],
+      restyle: { ...WEB_STEPS, "Term 15": { mobile: "Term 13" } },
+      hide: { mobile: ["Nav links", "Done count"], tablet: [] },
+      gap: { tablet: 88, mobile: 72 },
+      typing: [TYPING],
+      tweak: (kit, id, size) => {
+        fitGround(kit, id, { cw: 18, lh: 36 });
+        const w = CONTENT[size];
+        const chartW = size === "tablet" || size === "mobile" ? w - 44 : w - 440 - 64 - 44;
+        const b = dayBars(chartW);
+        for (const n of kit.named(id, "Before bars")) kit.patch(n, { width: chartW, paths: b.before });
+        for (const n of kit.named(id, "After bars")) kit.patch(n, { width: chartW, paths: b.after });
+        for (const n of kit.named(id, "Chart levels")) kit.patch(n, { width: chartW, paths: [0.25, 0.5, 0.75].map((f) => box(0, Math.round(CHART_H * f), chartW, 1)) });
+        if (size === "laptop") {
+          for (const n of kit.named(id, "Copy")) kit.patch(n, { width: 480 });
+          for (const n of kit.named(id, "Close words")) kit.patch(n, { width: 560 });
+        }
+        if (size === "tablet" || size === "mobile") {
+          for (const name of ["Copy", "Setup copy", "Days copy", "Api copy", "Close words"]) for (const n of kit.named(id, name)) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const name of ["Top", "Hero", "Setup", "Days", "Api"]) for (const n of kit.named(id, name)) kit.patch(n, { itemSpacing: 40 });
+        }
+        if (size === "tablet") compactNav(kit, id, ["GitHub", "Sign in"], 20);
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Hero terminal")) kit.patch(n, { height: 372 });
+          for (const n of kit.named(id, "Quote panel")) for (const b2 of kit.named(n, "Panel body")) kit.patch(b2, { padding: { top: 24, right: 20, bottom: 24, left: 20 } });
+          for (const n of kit.named(id, "Plan row")) kit.patch(n, { itemSpacing: 4 });
+          for (const n of kit.named(id, "Plan price")) kit.patch(n, { textAlign: "LEFT" });
+          for (const n of kit.named(id, "Close cursor")) kit.patch(n, { width: 20, height: 34 });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  style_terminal_landing_default
+};

package/dist/chunks/chunk-N45J7SVZ.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-BDU2OUVJ.js";
+import {
+  aabbOf,
+  init_transform
+} from "./chunk-PSVLITJE.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.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
+};

package/dist/chunks/chunk-N5JKJXJX.js

@@ -0,0 +1,260 @@
+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 {
+  brackets,
+  buzz,
+  courierBox,
+  cyberBrand,
+  fitBrackets,
+  fitGlitch,
+  fitRulers,
+  fitStreet,
+  glitch,
+  hazard,
+  lift,
+  plate,
+  rulers,
+  split,
+  stampBeside,
+  street,
+  telemetry
+} from "./chunk-VCH5W7EW.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  score
+} from "./chunk-52GCV7N5.js";
+import {
+  HOLD,
+  appear,
+  blink,
+  cutOff,
+  cutOn
+} from "./chunk-RXG7T7TH.js";
+import {
+  bloom
+} from "./chunk-HVK5T4I5.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset,
+  swapTimes
+} from "./chunk-6QHAQLJ4.js";
+import {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/cyberpunk-lock-on-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SCORE = score("tension");
+var DURATION = SCORE.duration;
+var beat = SCORE.beat;
+var swaps = [
+  { layer: "Caption", words: ["02:14 a.m. Your support agent opens a poisoned ticket.", "It drafts an email with your live Stripe key in it.", "Every tool call is checked before it runs.", "Blocked in 38 ms. Nobody got paged."], at: beat(1), hold: 1500, stagger: 45, in: 300, out: 220, unit: "word", rise: 22 }
+];
+var CAPTIONS_END = swapTimes(swaps[0]).at(-1).gone;
+var counts = [
+  { layer: "Figure", at: beat(8), duration: beat(12), counter: { from: 1e4, to: 41208, separator: "," } }
+];
+var hit = (n) => ({ layer: "Glitch", preset: "impact-frame", at: beat(n), params: { duration: 170 } });
+var cues = [
+  // The clock ticks alone for a bar: the street's signs come on one colour at a time, and the hook is typed over them.
+  blink("Neon accent", 0, 420),
+  blink("Neon secondary", 140, 420),
+  blink("Neon primary", 300, 380),
+  { layer: "Hook", preset: "typewriter", at: 60, params: { duration: 640 } },
+  { layer: "Hud bar", preset: "fade-in", at: 200, params: { duration: 400 } },
+  cutOn("Caption plate", beat(1)),
+  // The rise: the brackets close on the courier, and lock on the drop.
+  cutOn("Lock", beat(2)),
+  blink("Lock", beat(4), 300),
+  hit(4),
+  cutOn("Tag", beat(5)),
+  { layer: "Tag value", preset: "typewriter", at: beat(5), params: { duration: 260 }, stagger: { delay: 250 } },
+  cutOn("Scope", beat(6.5)),
+  { layer: "Stat", preset: "rise-in", at: beat(7.5), params: { duration: 420 } },
+  // The tune comes in, and the gate comes down with it.
+  { layer: "Stamp", preset: "pop-in", at: beat(12), params: { duration: 240, amount: 0.5 } },
+  { layer: "Street", preset: "camera-shake", at: beat(12), params: { duration: 460, distance: 18, amount: 0.6 } },
+  hit(12),
+  hit(20),
+  cutOff("Caption plate", CAPTIONS_END + 120),
+  { layer: "Call", preset: "pop-in", at: beat(24), params: { duration: 360 } },
+  hit(24),
+  { layer: "Site", preset: "fade-in", at: beat(25), params: { duration: 400 } },
+  // The last hit, and the clock alone again.
+  hit(28),
+  { layer: "Call", preset: "pulse", at: beat(28), params: { duration: 700, amount: 0.06 } }
+];
+var LOG = ["BLK send_email   38ms", "ok  read_ticket   2ms", "ok  search_docs   4ms", "BLK http_post     31ms", "ok  draft_reply   3ms", "ok  read_ticket   2ms", "BLK shell_exec    29ms", "ok  update_crm    5ms"];
+var SCENE = {
+  vertical: { horizon: 0.468, figure: 0.12, holo: false },
+  post: { horizon: 0.527, figure: 0.25, holo: false },
+  portrait: { horizon: 0.55, figure: 0.235, holo: false }
+};
+var STAMP_W = 392;
+function hud(w, h, o, side) {
+  const c = courierBox(w, h, o);
+  const lock = { x: c.x - 38, y: c.y - 30, width: c.width + 76, height: c.height + 56 };
+  const plateW = Math.min(250, lock.x - side - 22);
+  return {
+    lock,
+    scope: { x: lock.x - 22 - plateW, y: lock.y + 6, width: plateW },
+    tag: { x: lock.x + lock.width + 22, y: lock.y + 6, width: plateW },
+    stamp: stampBeside(c, STAMP_W)
+  };
+}
+var cyberpunk_lock_on_reel_default = defineTemplate({
+  id: "motion-cyberpunk-lock-on-reel",
+  meta: {
+    name: "Cyberpunk lock-on reel",
+    description: "A 16-second launch reel on a rain-slick neon street: a clock ticks while the hook is typed with its colours split and the signs flicker on, a HUD\u2019s brackets close on a courier in the road (the rogue agent) and lock on the drop, captions tell the story a line at a time, BLOCKED is stamped beside him as a hazard gate slams shut across the road, and the month\u2019s count runs up beside scrolling telemetry, over a 120 BPM track that starts as a countdown (made by PopCraft, CC0) \u2014 9:16 with 1:1 and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "cyberpunk", "neon", "hud", "glitch", "rain", "night", "security", "ai agents", "dev tool", "launch", "saas", "reel", "captions", "music", "audio", "counter"],
+    platforms: ["instagram", "tiktok", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["launch", "announcement", "stats"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit("Cyberpunk lock-on reel", preset("ig-story"));
+    k.quantizeGeometry = true;
+    cyberBrand(k, { hook: "YOUR AGENT JUST TRIED TO LEAK A KEY." });
+    k.textStyle("Hud 20", { ...MONO, size: 20, fontWeight: 700, letterSpacing: 2, lineHeight: 26, textCase: "UPPER" });
+    k.textStyle("Hud 17", { ...MONO, size: 17, fontWeight: 700, letterSpacing: 1.5, lineHeight: 22, textCase: "UPPER" });
+    k.textStyle("Display 80", { size: 80, fontWeight: 900, letterSpacing: -2.4, lineHeight: 80 });
+    k.textStyle("Display 62", { size: 62, fontWeight: 900, letterSpacing: -1.8, lineHeight: 62 });
+    k.textStyle("Display 50", { size: 50, fontWeight: 900, letterSpacing: -1.4, lineHeight: 52 });
+    k.textStyle("Caption 36", { size: 36, fontWeight: 600, lineHeight: 46 });
+    k.textStyle("Caption 30", { size: 30, fontWeight: 600, lineHeight: 38 });
+    k.textStyle("Readout 22", { ...MONO, size: 22, fontWeight: 700, lineHeight: 28 });
+    k.textStyle("Risk 60", { ...MONO, size: 60, fontWeight: 800, letterSpacing: -2, lineHeight: 60 });
+    k.textStyle("Figure 96", { ...MONO, size: 96, fontWeight: 800, letterSpacing: -4, lineHeight: 96 });
+    k.textStyle("Figure 72", { ...MONO, size: 72, fontWeight: 800, letterSpacing: -3, lineHeight: 72 });
+    k.textStyle("Log 16", { ...MONO, size: 16, fontWeight: 500, lineHeight: 26 });
+    k.textStyle("Stamp 68", { size: 68, fontWeight: 900, letterSpacing: 3, lineHeight: 70 });
+    k.textStyle("Button 30", { size: 30, fontWeight: 800, lineHeight: 38 });
+    k.textStyle("Site 24", { ...MONO, size: 24, fontWeight: 700, lineHeight: 32 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 30", label: "Lock your agents", pad: [18, 30], radius: 0 });
+    const sheet = k.sheet;
+    const W = 1080, H = 1920;
+    const padding = verticalPadding();
+    k.nameSheet(sheet, "Lock-on reel");
+    k.flowSheet(sheet, 0, padding, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: SCORE.audio });
+    const st = street(k, sheet, W, H, { ...SCENE.vertical, rate: 690 });
+    buzz(k, st);
+    rulers(k, sheet, W, H);
+    const GX = 44, GY = 1612, GH = 46, half = (W - 2 * GX) / 2, back = half - 150;
+    const gateWet = k.rect(sheet, W - 2 * GX, 190, [k.gradient({ from: "primary", to: "primary", angle: 90, fromOpacity: 0.3, toOpacity: 0 })], { name: "Gate wet", absolute: { x: GX, y: GY + GH + 8 } });
+    const gateL = hazard(k, sheet, GH, { width: half, name: "Gate left", absolute: { x: GX, y: GY } });
+    const gateR = hazard(k, sheet, GH, { width: half, name: "Gate right", absolute: { x: W / 2, y: GY } });
+    for (const x of [0, W - 92]) {
+      const post = k.stack(sheet, { width: 92, height: 250, fill: "card", stroke: { color: "secondary", width: 1.5, align: "INSIDE", join: "MITER" }, name: "Gate post", absolute: { x, y: GY - 96 }, effects: [lift(k, 30, 0.8)] });
+      k.rect(post, 44, 10, "accent", { name: "Gate lamp", absolute: { x: 24, y: 22 }, effects: [bloom(k, "accent", 22, 0.9)] });
+      for (const y of [56, 68, 196, 208]) k.rect(post, 44, 3, "secondary", { name: "Gate rib", opacity: 0.5, absolute: { x: 24, y } });
+    }
+    const top = k.stack(sheet, { gap: 12, name: "Top" });
+    const bar = plate(k, top, { direction: "HORIZONTAL", gap: 16, padding: { top: 10, right: 16, bottom: 10, left: 16 }, align: "CENTER", tab: false, name: "Hud bar" });
+    k.text(bar, "{{brand.name}} // runtime guard", { style: "Hud 20", color: "onCard", name: "Hud name" });
+    k.text(bar, "REC 02:14:07", { style: "Hud 20", color: "onCard", autoWidth: true, name: "Hud clock" });
+    hazard(k, top, 18);
+    const hookPlate = plate(k, top, { padding: { top: 30, right: 32, bottom: 34, left: 32 }, tab: false, edge: "primary", name: "Hook plate", effects: [lift(k)] });
+    k.text(hookPlate, "{{brand.hook}}", { style: "Display 80", color: "onCard", name: "Hook", effects: split(k, 5) });
+    hazard(k, top, 18);
+    const bottom = k.stack(sheet, { gap: 14, name: "Bottom" });
+    const cap = plate(k, bottom, { padding: { top: 18, right: 24, bottom: 20, left: 24 }, edge: "accent", tab: "accent", name: "Caption plate", effects: [lift(k)] });
+    k.text(cap, swaps[0].words[0], { style: "Caption 36", color: "onCard", name: "Caption" });
+    const stat = plate(k, bottom, { direction: "HORIZONTAL", gap: 20, padding: { top: 20, right: 20, bottom: 20, left: 24 }, align: "CENTER", name: "Stat", effects: [lift(k)] });
+    const tally = k.stack(stat, { gap: 6, name: "Tally" });
+    k.text(tally, "Tool calls blocked", { style: "Hud 20", color: "onCard", name: "Figure label" });
+    k.text(tally, "41,208", { style: "Figure 96", color: "onCard", name: "Figure" });
+    k.text(tally, "this month \xB7 0 keys leaked", { style: "Hud 17", color: "onCard", name: "Figure note" });
+    telemetry(k, stat, 268, 168, { lines: LOG, style: "Log 16", lineHeight: 26, rate: 52 });
+    const foot = k.stack(bottom, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Foot" });
+    k.instance(foot, "Button", { Label: "Lock your agents" }, { name: "Call" });
+    const site = plate(k, foot, { width: "HUG", padding: { top: 15, right: 18, bottom: 15, left: 18 }, tab: false, name: "Site" });
+    k.text(site, "{{brand.site}}", { style: "Site 24", color: "onCard", autoWidth: true, name: "Site text" });
+    const at = hud(W, H, SCENE.vertical, padding.left);
+    const lock = brackets(k, sheet, at.lock.width, at.lock.height, { name: "Lock", len: 54, width: 6, absolute: { x: at.lock.x, y: at.lock.y } });
+    const scope = plate(k, sheet, { width: at.scope.width, gap: 2, padding: { top: 16, right: 14, bottom: 14, left: 16 }, name: "Scope", absolute: { x: at.scope.x, y: at.scope.y } });
+    k.text(scope, "Risk", { style: "Hud 17", color: "onCard", name: "Scope label" });
+    k.text(scope, "0.97", { style: "Risk 60", color: "onCard", name: "Scope figure" });
+    k.text(scope, "exfiltration", { style: "Hud 17", color: "onCard", name: "Scope kind" });
+    const tag = plate(k, sheet, { width: at.tag.width, gap: 2, padding: { top: 16, right: 12, bottom: 14, left: 16 }, edge: "accent", tab: "accent", name: "Tag", absolute: { x: at.tag.x, y: at.tag.y } });
+    for (const [label, value] of [["Agent", "support-bot-7"], ["Call", "send_email()"], ["Body", "sk_live_\u2022\u2022\u2022\u2022"]]) {
+      k.text(tag, label, { style: "Hud 17", color: "onCard", name: "Tag label" });
+      k.text(tag, value, { style: "Readout 22", color: "onCard", name: "Tag value" });
+    }
+    const stamp = k.stack(sheet, { direction: "HORIZONTAL", width: STAMP_W, justify: "CENTER", fill: "primary", padding: { top: 6, right: 26, bottom: 8, left: 26 }, stroke: { color: "onPrimary", width: 5, align: "INSIDE", join: "MITER" }, name: "Stamp", absolute: at.stamp, effects: [lift(k, 30, 0.8)] });
+    k.text(stamp, "BLOCKED", { style: "Stamp 68", color: "onPrimary", autoWidth: true, name: "Stamp words" });
+    k.patch(stamp, { rotation: -7 });
+    glitch(k, sheet, W, H);
+    if (CAPTIONS_END > beat(24)) throw new Error("cyberpunk reel: the captions run into the call to act");
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    const close = [1.7, 1.45, 1.25, 1.1, 1];
+    for (const axis of ["scaleX", "scaleY"]) k.animate(lock, axis, close.map((v, i) => ({ t: beat(2) + i * beat(2) / (close.length - 1), v, ease: HOLD })));
+    const slam = ease.named("expo", "in");
+    k.animate(gateL, "translateX", [{ t: 0, v: -back, ease: HOLD }, { t: beat(12) - 160, v: -back, ease: slam }, { t: beat(12), v: 0 }]);
+    k.animate(gateR, "translateX", [{ t: 0, v: back, ease: HOLD }, { t: beat(12) - 160, v: back, ease: slam }, { t: beat(12), v: 0 }]);
+    appear(k, gateWet, beat(12), 200);
+    for (const n of k.named(sheet, "Gate lamp")) k.behave(n, "opacity", [{ kind: "sine", amp: 0.4, freq: 1e3 / SCORE.beat(1) / 2 }, { kind: "clamp", min: 0.25, max: 1 }]);
+    k.behave(k.named(sheet, "Hud clock")[0], "opacity", [{ kind: "sine", amp: 0.25, freq: 1e3 / SCORE.beat(1) / 2 }, { kind: "clamp", min: 0.6, max: 1 }]);
+    const refit = (kit, id, size, side) => {
+      const f = kit.node(id);
+      fitStreet(kit, id, f.width, f.height, { ...SCENE[size], at: { x: 0, y: 0 } });
+      fitGlitch(kit, id, f.width, f.height);
+      fitRulers(kit, id, f.width, f.height);
+      const p = hud(f.width, f.height, SCENE[size], side);
+      for (const n of kit.named(id, "Lock")) {
+        fitBrackets(kit, n, p.lock.width, p.lock.height, 54);
+        kit.patch(n, { x: p.lock.x, y: p.lock.y });
+      }
+      for (const n of kit.named(id, "Scope")) kit.patch(n, { ...p.scope });
+      for (const n of kit.named(id, "Tag")) kit.patch(n, { ...p.tag });
+      for (const n of kit.named(id, "Stamp")) kit.patch(n, { ...p.stamp });
+      for (const name of ["Gate left", "Gate right", "Gate wet", "Gate post"]) for (const n of kit.named(id, name)) kit.patch(n, { visible: false });
+    };
+    k.variants(sheet, feedVariants({ post: 48, portrait: 60 }, {
+      post: (kit, id) => {
+        for (const n of kit.named(id, "Hook")) kit.restyle(n, "Display 50");
+        for (const n of kit.named(id, "Caption")) kit.restyle(n, "Caption 30");
+        for (const n of kit.named(id, "Figure")) kit.restyle(n, "Figure 72");
+        for (const n of kit.named(id, "Hook plate")) kit.patch(n, { padding: { top: 18, right: 24, bottom: 22, left: 24 } });
+        for (const n of [...kit.named(id, "Top"), ...kit.named(id, "Bottom")]) kit.patch(n, { itemSpacing: 8 });
+        refit(kit, id, "post", 48);
+      },
+      portrait: (kit, id) => {
+        for (const n of kit.named(id, "Hook")) kit.restyle(n, "Display 62");
+        refit(kit, id, "portrait", 60);
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  cyberpunk_lock_on_reel_default
+};