@popcraft/kit 0.53.7 → 0.53.9

package/dist/chunks/chunk-INND6K6R.js

@@ -0,0 +1,145 @@
+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 {
+  acorn,
+  draw,
+  flourishComponent,
+  leaf,
+  maple,
+  mapleVeins,
+  pumpkin,
+  wheat
+} from "./chunk-YVN7SFQ7.js";
+import {
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/print/holidays-thanksgiving-dinner-menu.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Thanksgiving dinner menu";
+var PAD = { top: 266, right: 52, bottom: 36, left: 52 };
+var MENU = [
+  ["TO START", "Butternut squash soup with toasted pepitas\nGrandma Mai\u2019s spring rolls"],
+  ["THE TABLE", "Herb-roasted turkey and gravy\nCornbread and sausage stuffing"],
+  ["ON THE SIDE", "Garlic mashed potatoes \xB7 Green beans with crispy shallots\nCranberry-orange relish \xB7 Parker House rolls"],
+  ["SOMETHING SWEET", "Pumpkin pie and pecan pie, with whipped cream"]
+];
+function art(w, h) {
+  const s = w / 480, cx = w / 2, cy = 200 * s, R = 178 * s;
+  const leaves = [];
+  const golds = [], olives = [], rusts = [], wheatS = [], wheatG = [], nuts = [], caps = [];
+  const n = 21;
+  for (let i = 0; i < n; i++) {
+    const a = Math.PI * 0.96 + i * Math.PI * 1.08 / (n - 1), x = cx + Math.cos(a) * R, y = cy + Math.sin(a) * R * 0.92;
+    const turn = a + Math.PI / 2 + (i % 2 ? 0.45 : -0.45);
+    const kind = i % 4;
+    if (kind === 0) {
+      rusts.push(...maple(x, y, 62 * s, turn));
+      leaves.push({ m: [], v: mapleVeins(x, y, 62 * s, turn) });
+    } else if (kind === 2) {
+      golds.push(...maple(x, y, 50 * s, turn + 0.5));
+      leaves.push({ m: [], v: mapleVeins(x, y, 50 * s, turn + 0.5) });
+    } else if (kind === 1) {
+      const wh = wheat(x, y + 26 * s, 70 * s, Math.cos(a) * 0.35);
+      wheatS.push(...wh.stalk);
+      wheatG.push(...wh.grains);
+    } else {
+      olives.push(leaf({ x, y }, 46 * s, 18 * s, a + 0.9), leaf({ x, y }, 40 * s, 16 * s, a - 0.9));
+    }
+    if (i % 5 === 2) {
+      const ac = acorn(x - Math.cos(a) * 30 * s, y - Math.sin(a) * 30 * s, 26 * s, turn);
+      nuts.push(...ac.nut);
+      caps.push(...ac.cap);
+    }
+    olives.push(leaf({ x, y }, 34 * s, 13 * s, a + Math.PI + (i % 2 ? 0.7 : -0.7)));
+  }
+  const pk = pumpkin(cx - 14 * s, 186 * s, 96 * s, 70 * s), gd = pumpkin(cx + 50 * s, 186 * s, 54 * s, 40 * s);
+  const sprigs = [leaf({ x: cx - 50 * s, y: 182 * s }, 46 * s, 18 * s, Math.PI + 0.3), leaf({ x: cx + 74 * s, y: 182 * s }, 40 * s, 16 * s, -0.25)];
+  return [
+    { name: "Centre leaves", paths: sprigs, color: "olive" },
+    { name: "Centre pumpkin", paths: pk.lobes, color: "rust" },
+    { name: "Centre gourd", paths: gd.lobes, color: "mustard" },
+    { name: "Centre creases", paths: [...pk.creases, ...gd.creases], color: "rustDeep", o: { strokeWidth: 1.4 * s } },
+    { name: "Centre stems", paths: [...pk.stem, ...gd.stem], color: "bark" },
+    { name: "Olive leaves", paths: olives, color: "olive" },
+    { name: "Wheat stalks", paths: wheatS, color: "gold", o: { strokeWidth: 1.6 * s } },
+    { name: "Wheat", paths: wheatG, color: "gold" },
+    { name: "Gold maples", paths: golds, color: "mustard" },
+    { name: "Maple leaves", paths: rusts, color: "rust" },
+    { name: "Maple veins", paths: leaves.flatMap((l) => l.v), color: "rustDeep", o: { strokeWidth: 1.2 * s } },
+    { name: "Acorns", paths: nuts, color: "acorn" },
+    { name: "Acorn caps", paths: caps, color: "bark" }
+  ];
+}
+var holidays_thanksgiving_dinner_menu_default = defineTemplate({
+  id: "print-holidays-thanksgiving-dinner-menu",
+  meta: {
+    name: NAME,
+    description: "A menu card for a family Thanksgiving dinner: a half-wreath of maple and oak leaves, wheat and acorns in rust, gold and olive arches over the family\u2019s name and the date, then the meal course by course in a serif with small-capital headings and a line of thanks. 5 \xD7 7 inches with bleed",
+    category: "menu",
+    tags: ["thanksgiving", "menu", "dinner", "family", "autumn", "fall", "harvest", "leaves", "wreath", "friendsgiving", "place setting", "print", "card"],
+    platforms: ["print"],
+    formats: ["card"],
+    useCases: ["menu", "event"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("invitation-5x7"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FBF4E7", text: "#3B2416", onPaper: "#8A4B24", primary: "#A8481F", onPrimary: "#FFF8EE", line: "#E2CDB0" },
+      { name: "the Nguyen family" }
+    );
+    k.palette({ rust: "#B4512A", rustDeep: "#7E3216", mustard: "#D69A2D", gold: "#C9A04A", olive: "#7C8A4A", acorn: "#A86F3D", bark: "#5E3F26" });
+    k.textStyle("Kicker 10", { size: 10, fontWeight: 700, letterSpacing: 3, lineHeight: 14 });
+    k.textStyle("Title 40", { ...SERIF, size: 40, fontWeight: 600, fontStyle: "italic", letterSpacing: -0.8, lineHeight: 42 });
+    k.textStyle("Host 13", { ...SERIF, size: 13, fontWeight: 400, lineHeight: 18 });
+    k.textStyle("Course 9", { size: 9, fontWeight: 800, letterSpacing: 2.6, lineHeight: 12 });
+    k.textStyle("Dish 12.5", { ...SERIF, size: 12.5, fontWeight: 400, lineHeight: 18 });
+    k.textStyle("Thanks 12", { ...SERIF, size: 12, fontWeight: 400, fontStyle: "italic", lineHeight: 17 });
+    k.component("Course", { gap: 4, width: 376, align: "CENTER", props: { Course: "COURSE", Dishes: "What we are eating" } }, (id) => {
+      k.propText(id, "Course", { style: "Course 9", color: "onPaper", align: "CENTER", width: "FILL", name: "Course name" });
+      k.propText(id, "Dishes", { style: "Dish 12.5", color: "text", align: "CENTER", width: "FILL", name: "Dishes" });
+    });
+    flourishComponent(k, "Leaf rule", "primary", maple(0, 0, 20)[0], { rule: 34, size: 11 });
+    const sheet = k.sheet;
+    const { width: W, height: H } = k.node(sheet);
+    k.flowSheet(sheet, 0, PAD, "paper", "MIN", "CENTER");
+    draw(k, sheet, art(W, H));
+    const c = { align: "CENTER", width: "FILL" };
+    k.text(sheet, "THURSDAY 26 NOVEMBER", { style: "Kicker 10", color: "onPaper", ...c, name: "Kicker" });
+    k.stack(sheet, { height: 6, name: "Gap" });
+    k.text(sheet, "Thanksgiving", { style: "Title 40", color: "text", ...c, name: "Title" });
+    k.text(sheet, "at the table of {{brand.name}}", { style: "Host 13", color: "onPaper", ...c, name: "Host" });
+    k.stack(sheet, { height: 12, name: "Gap" });
+    for (const [i, [course, dishes]] of MENU.entries()) {
+      k.instance(sheet, "Course", { Course: course, Dishes: dishes }, { name: "Course", width: "FILL" });
+      if (i < MENU.length - 1) k.stack(sheet, { height: 9, name: "Gap" });
+    }
+    k.stack(sheet, { height: 16, name: "Gap" });
+    k.instance(sheet, "Leaf rule", {}, { name: "Divider" });
+    k.stack(sheet, { height: 10, name: "Gap" });
+    k.text(sheet, "For the hands that made it and the people round it, we give thanks.", { style: "Thanks 12", color: "onPaper", ...c, name: "Thanks" });
+    return k.finish();
+  }
+});
+
+export {
+  holidays_thanksgiving_dinner_menu_default
+};

package/dist/chunks/chunk-INW4TLF3.js

@@ -0,0 +1,63 @@
+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 {
+  SIZE,
+  bleedFrame,
+  caption,
+  comicMeta,
+  comicSetup,
+  display,
+  foot,
+  panel,
+  rectFrame,
+  say,
+  tierBox
+} from "./chunk-GRIFMD2V.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/print/comic-hero-cover-modern.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var comic_hero_cover_modern_default = defineTemplate({
+  id: "comic-cover-modern",
+  meta: comicMeta("Comic cover (modern)", 'The front cover of "Nightstar: Blackout" no. 1: full-bleed art of Nightstar bursting up through the rain with Voltrix looming in green lightning behind him, a red masthead band with the issue box, and the cover line at the foot', ["cover", "masthead", "full bleed"]),
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Comic cover (modern)", preset("comic-cover"));
+    comicSetup(k);
+    drawPage(k);
+    return k.finish();
+  }
+});
+function drawPage(k) {
+  const { w: W, h: H } = SIZE.cover;
+  k.flowSheet(k.sheet, 0, 0);
+  const t = tierBox(k, k.sheet, W, H, "Cover");
+  const b = bleedFrame(k, W, H);
+  panel(k, t, rectFrame(b.x, b.y, b.width, H - 96 - b.y), "cover", { ground: "heroG1", name: "Cover art", edge: false });
+  const band = k.stack(t, { direction: "HORIZONTAL", align: "CENTER", gap: 14, width: W - 64, padding: { top: 12, right: 16, bottom: 12, left: 16 }, fill: "primary", stroke: { color: "onPrimary", width: 3, align: "INSIDE", join: "MITER" }, name: "Masthead band", absolute: { x: 32, y: 34 } });
+  const box = k.stack(band, { width: 74, align: "CENTER", fill: "card", padding: { top: 6, right: 6, bottom: 6, left: 6 }, stroke: { color: "onCard", width: 2, align: "INSIDE", join: "MITER" }, name: "Issue box" });
+  k.text(box, "{{brand.issue}}", { style: display(k, "Title"), color: "onCard", align: "CENTER", width: "FILL", name: "Issue number" });
+  k.text(box, "OCT", { style: display(k, "Credit"), color: "onCard", align: "CENTER", width: "FILL", name: "Month" });
+  k.text(band, "{{brand.title}}", { style: display(k, "Masthead"), color: "onPrimary", width: "FILL", name: "Masthead" });
+  caption(k, t, "Harbour City's last light is a star.", { x: 20, y: Math.round(H * 0.6), width: 190, name: "Cover line" });
+  say(k, t, "Lights out, star boy!", { x: W - 180, y: H * 0.24, width: 128, to: { x: W * 0.62, y: H * 0.3 } });
+  foot(k, t, W, 96, "The night the city went dark, one star stayed lit.", "Cover line");
+}
+
+export {
+  comic_hero_cover_modern_default,
+  drawPage
+};

package/dist/chunks/chunk-IP6EO42J.js

@@ -0,0 +1,443 @@
+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 {
+  MONO
+} from "./chunk-AXAAXHZF.js";
+import {
+  pt3,
+  r3
+} from "./chunk-EJLCQVQK.js";
+import {
+  ease
+} from "./chunk-ZGIMZ6SP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/saas/style-gradient-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SPOOL = {
+  name: "Spool",
+  site: "spool.example",
+  version: "Spool 3",
+  feature: "Batch renders",
+  tagline: "Send JSON. Get video.",
+  pitch: "A video rendering API. Send a template and a row of JSON; get a finished MP4 back in seconds.",
+  /** A 60-second 1080p video, rendered on Spool 3's edge workers; and the same video on Spool 2. */
+  render: 4.2,
+  before: 38,
+  clip: "1 min \xB7 1080p",
+  region: "Edge \xB7 fra1",
+  template: "weekly-recap",
+  /** The batch every demo runs: rows in the CSV, and how long all of them took. */
+  rows: 2400,
+  batchTime: "3 min 12 s",
+  /** Videos rendered since launch, and in September (the milestone). */
+  total: 1e7,
+  before10m: 942e4,
+  september: "1.8M",
+  /** Plans: a month, and a month billed yearly. */
+  studio: 49,
+  studioYear: 39,
+  scale: 299,
+  scaleYear: 239,
+  minutes: 200,
+  overage: "$0.04",
+  trial: "200 render minutes free. No card."
+};
+var JOBS = [
+  { file: "recap-ana-ruiz.mp4", meta: "60 s \xB7 1080p", time: "4.2 s" },
+  { file: "recap-tom-hale.mp4", meta: "60 s \xB7 1080p", time: "4.0 s" },
+  { file: "recap-li-wei.mp4", meta: "45 s \xB7 1080p", time: "3.1 s" },
+  { file: "recap-sam-ode.mp4", meta: "60 s \xB7 4K", time: "9.8 s" }
+];
+var BRAND = {
+  night: "#041A24",
+  onNight: "#FFF6EE",
+  nightMuted: "#BDD3D6",
+  plate: "#08222D",
+  onPlate: "#FFFFFF",
+  plateMuted: "#A3C2C8",
+  primary: "#D4FF4F",
+  onPrimary: "#0B1F14"
+};
+var SCENERY = {
+  abyss: "#03141C",
+  ocean: "#0A3D50",
+  kelp: "#0D4A52",
+  coral: "#FF6B4A",
+  apricot: "#FFB07A",
+  lagoon: "#14A3A0",
+  haze: "#FFE2C4",
+  rim: "#FFFFFF",
+  shade: "#010A0E",
+  clipA: "#FF8A66",
+  clipB: "#2CC4BC",
+  clipC: "#FFC48F"
+};
+function gradientBrand(k, fields = {}) {
+  k.brand({ ...BRAND }, { name: SPOOL.name, site: SPOOL.site, ...fields });
+  k.palette({ ...SCENERY });
+}
+var tenth = (v) => Math.round(v * 10) / 10 + 0;
+var display = (size, o = {}) => ({ size, fontWeight: o.weight ?? 700, letterSpacing: tenth(-size * 0.045), lineHeight: Math.round(size * (o.lead ?? 1.02)), ...o.center ? { textAlign: "CENTER" } : {} });
+var body = (size, weight = 400) => ({ size, fontWeight: weight, lineHeight: Math.round(size * 1.45), letterSpacing: size >= 24 ? tenth(-size * 0.012) : 0 });
+var label = (size) => ({ size, fontWeight: 600, letterSpacing: tenth(size * 0.1), lineHeight: Math.round(size * 1.3) });
+var code = (size, weight = 500) => ({ ...MONO, size, fontWeight: weight, lineHeight: Math.round(size * 1.4) });
+var figure = (size, weight = 700) => ({ size, fontWeight: weight, letterSpacing: tenth(-size * 0.05), lineHeight: Math.round(size * 1), fontFeatures: { tnum: 1 } });
+function ts(k, name, def) {
+  k.textStyle(name, def);
+  return name;
+}
+var DEEP = `struct Params {
+  phase: f32,   // @range 0 31.415927 @default 0
+  grain: f32,   // @range 0 0.2 @default 0.05
+  abyss: vec4f, // @default #03141c
+  ocean: vec4f, // @default #0a3d50
+  kelp: vec4f,  // @default #0d4a52
+}
+
+fn dp_hash(q: vec2<f32>) -> f32 { return fract(sin(dot(q, vec2<f32>(127.1, 311.7))) * 43758.5453); }
+
+fn shade(uv: vec2<f32>, res: vec2<f32>, time: f32) -> vec4<f32> {
+  let asp = res.x / max(res.y, 1.0);
+  let q = vec2<f32>(uv.x * asp, uv.y);
+  let ph = p.phase;
+  let a = 0.5 + 0.5 * sin(q.x * 1.7 + q.y * 2.3 + ph);
+  let b = 0.5 + 0.5 * sin(q.x * -2.1 + q.y * 1.3 - ph + 1.7);
+  let c = 0.5 + 0.5 * sin(length(q - vec2<f32>(0.3 * asp + 0.2 * sin(ph), 0.7)) * 3.1 - ph);
+  var col = p.abyss.rgb;
+  col = mix(col, p.ocean.rgb, clamp(a * b * 1.3, 0.0, 1.0));
+  col = mix(col, p.kelp.rgb, clamp(c * c * 0.75, 0.0, 1.0));
+  let v = length((uv - vec2<f32>(0.5, 0.45)) * vec2<f32>(1.0, 1.2));
+  col = mix(col, p.abyss.rgb, smoothstep(0.35, 0.95, v) * 0.7);
+  let n = (dp_hash(floor(uv * res / 1.5)) - 0.5) * p.grain;
+  return vec4<f32>(col + vec3<f32>(n), 1.0);
+}`;
+function deep(k, sheet, o = {}) {
+  const { width: w, height: h } = k.node(sheet);
+  const id = k.rect(sheet, w, h, k.shader("Deep ocean", { phase: 0, grain: 0, abyss: k.color("abyss"), ocean: k.color("ocean"), kelp: k.color("kelp") }, DEEP), { name: o.name ?? "Deep", absolute: { x: 0, y: 0 } });
+  if (o.duration) k.animateShader(id, "phase", [{ t: 0, v: 0, ease: ease.linear }, { t: o.duration, v: r3(Math.PI * 2 * (o.turns ?? 1)) }]);
+  return id;
+}
+var MESH = `struct Params {
+  phase: f32,    // @range 0 31.415927 @default 0
+  bloom: f32,    // @range 0 1 @default 0
+  grain: f32,    // @range 0 0.2 @default 0.06
+  coral: vec4f,  // @default #ff6b4a
+  apricot: vec4f,// @default #ffb07a
+  lagoon: vec4f, // @default #14a3a0
+  ocean: vec4f,  // @default #0a3d50
+}
+
+fn ms_hash(q: vec2<f32>) -> f32 { return fract(sin(dot(q, vec2<f32>(269.5, 183.3))) * 43758.5453); }
+fn ms_blob(q: vec2<f32>, c: vec2<f32>, r: f32) -> f32 { let d = length(q - c) / r; return exp(-d * d); }
+
+fn shade(uv: vec2<f32>, res: vec2<f32>, time: f32) -> vec4<f32> {
+  let asp = res.x / max(res.y, 1.0);
+  let q = vec2<f32>(uv.x * asp, uv.y);
+  let ph = p.phase;
+  let c1 = vec2<f32>((0.32 + 0.1 * sin(ph)) * asp, 0.55 + 0.08 * cos(ph * 1.0 + 0.4));
+  let c2 = vec2<f32>((0.66 + 0.09 * cos(ph + 1.2)) * asp, 0.42 + 0.1 * sin(ph + 2.0));
+  let c3 = vec2<f32>((0.52 + 0.12 * sin(ph + 3.4)) * asp, 0.7 + 0.06 * sin(ph * 2.0));
+  let c4 = vec2<f32>((0.18 + 0.08 * cos(ph + 4.1)) * asp, 0.32 + 0.07 * cos(ph + 1.0));
+  let s = min(asp, 1.0);
+  let w1 = ms_blob(q, c1, 0.34 * s + 0.12);
+  let w2 = ms_blob(q, c2, 0.3 * s + 0.12);
+  let w3 = ms_blob(q, c3, 0.26 * s + 0.1);
+  let w4 = ms_blob(q, c4, 0.28 * s + 0.1);
+  var col = p.ocean.rgb;
+  let tot = w1 + w2 + w3 + w4 + 0.0001;
+  col = (p.coral.rgb * w1 + p.lagoon.rgb * w2 + p.apricot.rgb * w3 + p.ocean.rgb * w4) / tot;
+  let e = smoothstep(0.0, 0.32, uv.x) * smoothstep(0.0, 0.32, 1.0 - uv.x) * smoothstep(0.0, 0.3, uv.y) * smoothstep(0.0, 0.3, 1.0 - uv.y);
+  let a = clamp(max(max(w1, w2), max(w3, w4)) * 1.15, 0.0, 1.0) * e * (0.78 + 0.22 * p.bloom);
+  let n = (ms_hash(floor(uv * res / 1.5)) - 0.5) * p.grain;
+  return vec4<f32>(col + vec3<f32>(n), a);
+}`;
+function mesh(k, parent, o) {
+  const id = k.rect(parent, Math.round(o.w), Math.round(o.h), k.shader("Sunrise mesh", { phase: o.phase ?? 0, bloom: o.bloom ?? 0, grain: 0, coral: k.color("coral"), apricot: k.color("apricot"), lagoon: k.color("lagoon"), ocean: k.color("ocean") }, MESH), { name: o.name ?? "Mesh", absolute: { x: Math.round(o.x), y: Math.round(o.y) } });
+  if (o.duration) {
+    const p0 = o.phase ?? 0;
+    k.animateShader(id, "phase", [{ t: 0, v: p0, ease: ease.linear }, { t: o.duration, v: r3(p0 + Math.PI * 2 * (o.turns ?? 1)) }]);
+  }
+  return id;
+}
+function bloomAt(k, id, at, rise = 700, fall = 2600) {
+  k.animateShader(id, "bloom", [{ t: at, v: 0, ease: ease.out("cubic") }, { t: at + rise, v: 1, ease: ease.inOut("sine") }, { t: at + rise + fall, v: 0 }]);
+}
+var GRAIN = `struct Params {
+  amount: f32, // @range 0 0.3 @default 0.07
+  size: f32,   // @range 1 4 @default 1.5
+}
+
+fn gr_hash(q: vec2<f32>) -> f32 { return fract(sin(dot(q, vec2<f32>(12.9898, 78.233))) * 43758.5453); }
+
+fn shade(uv: vec2<f32>, res: vec2<f32>, time: f32) -> vec4<f32> {
+  let n = gr_hash(floor(uv * res / p.size));
+  let v = select(0.0, 1.0, n > 0.5);
+  return vec4<f32>(vec3<f32>(v), abs(n - 0.5) * 2.0 * p.amount);
+}`;
+function grainOver(k, sheet, amount = 0.06) {
+  const { width: w, height: h } = k.node(sheet);
+  return k.rect(sheet, w, h, k.shader("Film grain", { amount, size: 1.5 }, GRAIN), { name: "Grain", absolute: { x: 0, y: 0 } });
+}
+function fitFull(k, sheet, names = ["Deep", "Grain"]) {
+  const { width: w, height: h } = k.node(sheet);
+  for (const n of names) for (const id of k.named(sheet, n)) k.patch(id, { x: 0, y: 0, width: w, height: h });
+}
+var longShadow = (k, a = 0.55, y = 48, blur = 90) => ({ type: "DROP_SHADOW", color: k.color("shade", a), offset: { x: 0, y }, blur, spread: 0, visible: true });
+var rimLight = (k, a = 0.14) => [
+  { type: "INNER_SHADOW", color: k.color("rim", a), offset: { x: 0, y: 0 }, blur: 0, spread: 1, visible: true },
+  { type: "INNER_SHADOW", color: k.color("rim", a * 2.4), offset: { x: 0, y: 1.5 }, blur: 0, spread: 0, visible: true }
+];
+var linear = (stops, from, to) => ({ type: "GRADIENT_LINEAR", gradientStops: stops.map(([position, color]) => ({ position, color })), gradientHandlePositions: [from, to, { x: from.x + (to.y - from.y), y: from.y - (to.x - from.x) }], opacity: 1, visible: true });
+function specular(k, plate, w, h, sweeps, o = {}) {
+  const bw = o.width ?? Math.max(140, Math.round(w * 0.24)), d = o.duration ?? 1500;
+  const paint = linear([[0, k.color("rim", 0)], [0.5, k.color("rim", o.alpha ?? 0.16)], [1, k.color("rim", 0)]], { x: 0, y: 0.5 }, { x: 1, y: 0.5 });
+  const hh = Math.round(h * 1.6), x0 = -bw * 2;
+  const id = k.rect(plate, bw, hh, [paint], { name: "Specular", absolute: { x: x0, y: Math.round(-h * 0.3) } });
+  k.patch(id, { rotation: 20 });
+  if (sweeps.length) {
+    const keys = [];
+    for (const t of sweeps) keys.push({ t, v: 0, ease: ease.inOut("sine") }, { t: t + d, v: w + bw * 3, ease: ease.hold }, { t: t + d + 1, v: 0, ease: ease.hold });
+    keys[keys.length - 1] = { t: keys[keys.length - 1].t, v: 0 };
+    k.animate(id, "translateX", keys);
+  }
+  return id;
+}
+var WIN = { w: 960, h: 640 };
+function spoolWindow(k, parent, o) {
+  const s = o.styles;
+  const W = o.width ?? WIN.w, f = W / WIN.w, PWD = W - 642;
+  const win = k.stack(parent, { width: W, height: WIN.h, fill: "plate", radius: 26, clip: true, name: o.name ?? "Window", effects: rimLight(k), ...o.absolute ? { absolute: o.absolute } : {} });
+  const top = k.stack(win, { direction: "HORIZONTAL", align: "CENTER", justify: "SPACE_BETWEEN", height: 64, padding: { top: 0, right: 22, bottom: 0, left: 24 }, name: "Title bar" });
+  const left = k.stack(top, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 18, name: "Title left" });
+  const lights = k.stack(left, { direction: "HORIZONTAL", width: "HUG", gap: 9, name: "Lights" });
+  for (const role of ["coral", "apricot", "lagoon"]) k.ellipse(lights, 14, role, { name: "Light" });
+  k.text(left, `${SPOOL.template}.json`, { style: s.title, color: "onPlate", autoWidth: true, name: "Window title" });
+  const chip = k.stack(top, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 8, radius: 999, fill: k.tint("rim", 0.08), padding: { top: 7, right: 14, bottom: 7, left: 12 }, name: "Region chip" });
+  k.ellipse(chip, 10, "primary", { name: "Region dot" });
+  k.text(chip, SPOOL.region, { style: s.small, color: "onPlate", autoWidth: true, name: "Region" });
+  k.rect(win, "FILL", 1, k.tint("rim", 0.1), { name: "Title rule" });
+  const mid = k.stack(win, { direction: "HORIZONTAL", gap: 22, padding: { top: 22, right: 24, bottom: 0, left: 24 }, name: "Middle" });
+  const pv = k.stack(mid, { width: 548, gap: 12, name: "Preview column" });
+  const PW = 548, PH = 308;
+  const preview = k.stack(pv, { width: PW, height: PH, name: "Preview", fill: "ocean", clip: true, radius: 16 });
+  mesh(k, preview, { x: 0, y: 0, w: PW, h: PH, duration: o.duration, phase: 1.2, name: "Preview light" });
+  const route = { closed: false, points: [pt3(60, 236), pt3(120, 190), pt3(176, 214), pt3(236, 150), pt3(300, 168), pt3(352, 104), pt3(420, 126), pt3(488, 74)].map((p, i, a) => {
+    const prev = a[i - 1] ?? p, next = a[i + 1] ?? p;
+    return { ...p, ...i > 0 ? { handleIn: pt3(p.x - (next.x - prev.x) / 6, p.y - (next.y - prev.y) / 6) } : {}, ...i < a.length - 1 ? { handleOut: pt3(p.x + (next.x - prev.x) / 6, p.y + (next.y - prev.y) / 6) } : {} };
+  }) };
+  k.vector(preview, PW, PH, [route], [], { name: "Route", absolute: { x: 0, y: 0 }, stroke: { color: "rim", width: 6, cap: "ROUND", join: "ROUND" } });
+  k.ellipse(preview, 22, "rim", { name: "Route end", absolute: { x: 477, y: 63 }, stroke: { color: "coral", width: 5, align: "INSIDE" } });
+  const tag = k.stack(preview, { width: "HUG", gap: 2, radius: 14, fill: "plate", padding: { top: 12, right: 18, bottom: 12, left: 18 }, name: "Preview tag", absolute: { x: 20, y: PH - 98 } });
+  k.text(tag, "Ana \xB7 week 39", { style: s.small, color: "plateMuted", autoWidth: true, name: "Preview who" });
+  k.text(tag, "42.6 km", { style: s.big, color: "onPlate", autoWidth: true, name: "Preview distance" });
+  const scrubRow = k.stack(pv, { direction: "HORIZONTAL", align: "CENTER", gap: 14, name: "Scrub row" });
+  const scrub = k.stack(scrubRow, { width: 380, height: 8, name: "Scrub", fill: k.tint("rim", 0.12), radius: 4 });
+  const played = k.rect(scrub, 380, 8, "primary", { name: "Played", radius: 4, absolute: { x: 0, y: 0 } });
+  k.patch(played, { anchorX: 0 });
+  k.text(scrubRow, "0:12 / 1:00", { style: s.small, color: "plateMuted", autoWidth: true, name: "Scrub time" });
+  const panel = k.stack(mid, { width: "FILL", gap: 10, name: "Render panel" });
+  k.text(panel, "RENDERED IN", { style: s.label, color: "plateMuted", name: "Render label" });
+  const fig = k.text(panel, `${SPOOL.render} s`, { style: s.figure, color: "onPlate", width: Math.min(300, PWD), name: "Render figure" });
+  k.text(panel, SPOOL.clip, { style: s.small, color: "plateMuted", name: "Render clip" });
+  const track = k.stack(panel, { width: PWD, height: 10, name: "Progress", fill: k.tint("rim", 0.12), radius: 5 });
+  const bar = k.rect(track, PWD, 10, "primary", { name: "Progress bar", radius: 5, absolute: { x: 0, y: 0 } });
+  k.patch(bar, { anchorX: 0 });
+  const status = k.text(panel, "Done \xB7 MP4 ready", { style: s.small, color: "onPlate", name: "Render status" });
+  const queue = k.stack(panel, { gap: 0, name: "Queue" });
+  const jobs = [];
+  JOBS.slice(0, o.jobs ?? 3).forEach((j) => {
+    k.rect(queue, "FILL", 1, k.tint("rim", 0.09), { name: "Job rule" });
+    const r = k.stack(queue, { direction: "HORIZONTAL", align: "CENTER", justify: "SPACE_BETWEEN", height: 44, name: "Job" });
+    k.text(r, j.file.replace(".mp4", ""), { style: s.small, color: "onPlate", autoWidth: true, name: "Job file" });
+    k.text(r, j.time, { style: s.small, color: "onPlate", autoWidth: true, name: "Job time" });
+    jobs.push(r);
+  });
+  const tl = k.frame(win, { x: 0, y: 0, width: W, height: 150 }, { name: "Timeline" });
+  k.patch(tl, { layoutPositioning: "ABSOLUTE", x: 0, y: WIN.h - 150 });
+  k.rect(tl, W, 150, k.tint("shade", 0.35), { name: "Timeline ground", absolute: { x: 0, y: 0 } });
+  k.rect(tl, W, 1, k.tint("rim", 0.1), { name: "Timeline rule", absolute: { x: 0, y: 0 } });
+  const CLIPS = [
+    [0, 24, 250, "clipA"],
+    [0, 286, 210, "clipC"],
+    [0, 508, 300, "clipA"],
+    [0, 820, 116, "clipC"],
+    [1, 24, 180, "clipB"],
+    [1, 216, 360, "clipB"],
+    [1, 588, 220, "clipB"],
+    [2, 24, 912, "kelp"]
+  ];
+  const clips = [];
+  for (const [row, x, w, role] of CLIPS) clips.push(k.rect(tl, Math.round(w * f), 28, k.tint(role, row === 2 ? 1 : 0.85), { name: "Clip", radius: 7, absolute: { x: Math.round(x * f), y: 22 + row * 40 } }));
+  const wave = [];
+  for (let i = 0; i < Math.floor((W - 60) / 10); i++) {
+    const x = 30 + i * 10, hh = 4 + Math.abs(Math.sin(i * 0.7) * 9 + Math.sin(i * 0.23) * 6);
+    wave.push({ closed: true, points: [pt3(x, 14 - hh / 2), pt3(x + 4, 14 - hh / 2), pt3(x + 4, 14 + hh / 2), pt3(x, 14 + hh / 2)] });
+  }
+  k.vector(tl, W, 28, wave, k.tint("lagoon", 0.9), { name: "Waveform", absolute: { x: 0, y: 102 } });
+  const playhead = k.stack(tl, { width: 4, height: 150, fill: "primary", radius: 2, name: "Playhead", absolute: { x: 300, y: 0 } });
+  return { win, preview, playhead, bar, figure: fig, status, jobs, clips, scrub: played };
+}
+function winStyles(k) {
+  return {
+    title: ts(k, "Win title 22", code(22)),
+    small: ts(k, "Win small 20", code(20)),
+    big: ts(k, "Win big 34", display(34)),
+    label: ts(k, "Win label 18", label(18)),
+    figure: ts(k, "Win figure 96", figure(96))
+  };
+}
+function renderRun(k, w, at, run, o = {}) {
+  const end = at + run;
+  k.animate(w.playhead, "translateX", [{ t: at, v: -276, ease: ease.inOut("sine") }, { t: end, v: 600, ...o.loopEnd ? { ease: ease.inOut("sine") } : {} }, ...o.loopEnd ? [{ t: o.loopEnd, v: -276 }] : []]);
+  for (const id of [w.bar, w.scrub]) k.animate(id, "scaleX", [{ t: at, v: 0.02, ease: ease.inOut("cubic") }, { t: end, v: 1, ...o.loopEnd ? { ease: ease.inOut("sine") } : {} }, ...o.loopEnd ? [{ t: o.loopEnd, v: 0.02 }] : []]);
+  k.animate(w.status, "text.content", [{ t: 0, v: "Rendering\u2026", ease: ease.hold }, { t: end, v: "Done \xB7 MP4 ready", ...o.loopEnd ? { ease: ease.hold } : {} }, ...o.loopEnd ? [{ t: o.loopEnd - 300, v: "Rendering\u2026" }] : []]);
+}
+function tilted(k, parent, o) {
+  const scene = k.group(parent, { x: Math.round(o.x), y: Math.round(o.y), width: Math.round(o.w), height: Math.round(o.h) }, { name: o.name ?? "Scene", absolute: true });
+  k.scene3d(scene, { camera: { focalLength: r3(36 * (o.perspective ?? 1800) / Math.max(1, o.w)) } });
+  const s = o.scale;
+  const WW = o.width ?? WIN.w, HH = o.height ?? WIN.h;
+  const gx = Math.round((o.w - WW) / 2), gy = Math.round((o.h - HH) / 2);
+  const fx = o.safe ? Math.round(o.safe.x - o.x + (o.safe.w - WW) / 2) : gx, fy = o.safe ? Math.round(o.safe.y - o.y + (o.safe.h - HH) / 2) : gy;
+  const rig = k.group(scene, { x: fx, y: fy, width: WW, height: HH }, { name: "Rig" });
+  if (fx !== gx || fy !== gy) k.patch(rig, { translateX: gx - fx, translateY: gy - fy });
+  k.patch(rig, { rotateY: o.rotateY ?? -24, rotateX: o.rotateX ?? 12, scaleX: s, scaleY: s });
+  const planes = [];
+  if (o.planes !== false) {
+    const codePlane = k.stack(rig, { width: 520, height: 330, fill: "plate", radius: 22, padding: 30, gap: 16, clip: true, name: "Code plane", effects: rimLight(k, 0.1) });
+    k.patch(codePlane, { x: -240, y: -150, z: -260 });
+    for (const [indent, segs] of [[0, [["primary", 150], ["plateMuted", 120]]], [0, [["plateMuted", 20]]], [1, [["clipB", 130], ["clipC", 170]]], [1, [["clipB", 80], ["clipC", 110], ["clipB", 60]]], [2, [["clipB", 60], ["clipA", 70]]], [1, [["clipB", 100], ["clipC", 70]]], [0, [["plateMuted", 20]]]]) {
+      const ln = k.stack(codePlane, { direction: "HORIZONTAL", gap: 10, padding: { top: 0, right: 0, bottom: 0, left: indent * 32 }, name: "Code line" });
+      for (const [role, w] of segs) k.rect(ln, w, 14, k.tint(role, 0.8), { radius: 7, name: "Code token" });
+    }
+    const queuePlane = k.stack(rig, { width: 400, height: 250, fill: "plate", radius: 22, padding: 28, gap: 18, clip: true, name: "Queue plane", effects: rimLight(k, 0.1) });
+    k.patch(queuePlane, { x: WW - 40, y: 330, z: -220 });
+    k.rect(queuePlane, 120, 12, k.tint("plateMuted", 0.7), { radius: 6, name: "Plane label" });
+    const bars = k.stack(queuePlane, { direction: "HORIZONTAL", gap: 10, align: "MAX", height: 140, name: "Plane bars" });
+    for (const v of [52, 70, 62, 92, 84, 124, 110]) k.rect(bars, 36, v, k.tint("lagoon", 0.9), { name: "Plane bar", radius: 6 });
+    planes.push(codePlane, queuePlane);
+  }
+  const shadow = k.rect(rig, WW, HH, "shade", { radius: 30, name: "Cast shadow", opacity: 0.6, effects: [{ type: "LAYER_BLUR", radius: 60, visible: true }] });
+  k.patch(shadow, { z: -120, x: 40, y: 70 });
+  let reflection = "";
+  if (o.reflection !== false) {
+    const paint = linear([[0, k.color("lagoon", 0.28)], [0.35, k.color("coral", 0.1)], [1, k.color("ocean", 0)]], { x: 0.5, y: 0 }, { x: 0.5, y: 1 });
+    reflection = k.rect(rig, WW, Math.round(HH * 0.42), [paint], { radius: 26, name: "Reflection", opacity: 0.9 });
+    k.patch(reflection, { x: 0, y: HH + 18 });
+  }
+  if (o.make) {
+    const id = o.make(rig);
+    return { scene, rig, win: { win: id }, shadow, reflection, planes, sweep: specular(k, id, WW, HH, o.sweeps ?? []) };
+  }
+  const win = spoolWindow(k, rig, { styles: o.styles, width: WW, jobs: o.jobs, duration: o.duration, absolute: { x: 0, y: 0 } });
+  const sweep = specular(k, win.win, WW, HH, o.sweeps ?? []);
+  return { scene, rig, win, shadow, reflection, planes, sweep };
+}
+function orbitCam(k, scene, o) {
+  const io = ease.inOut("sine");
+  k.animate(scene, "scene3d.camera.orbit", [{ t: o.at, v: o.from, ease: io }, { t: o.until, v: o.to, ...o.back ? { ease: io } : {} }, ...o.back ? [{ t: o.back, v: o.from }] : []]);
+  if (o.z0 !== void 0 && o.z1 !== void 0) k.animate(scene, "scene3d.camera.z", [{ t: o.at, v: o.z0, ease: io }, { t: o.until, v: o.z1, ...o.back ? { ease: io } : {} }, ...o.back ? [{ t: o.back, v: o.z0 }] : []]);
+}
+function parallax(k, t, loop, amp = 18) {
+  t.planes.forEach((id, i) => {
+    k.behave(id, "translateY", [{ kind: "sine", amp: r3(amp * (i ? -1 : 1)), freq: r3(1e3 / loop), phase: r3(i * 0.3) }]);
+  });
+}
+function lockup(k, parent, o) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: Math.round(o.size * 0.36), name: o.name ?? "Lockup", ...o.absolute ? { absolute: o.absolute } : {} });
+  const tile = k.stack(row, { width: "HUG", fill: "primary", radius: Math.round(o.size * 0.3), padding: Math.round(o.size * 0.2), name: "Logo tile" });
+  k.logo(tile, Math.round(o.size * 0.6), Math.round(o.size * 0.6));
+  k.text(row, "{{brand.name}}", { style: o.style, color: "onNight", autoWidth: true, name: "Brand name" });
+  return row;
+}
+function button(k, name, o) {
+  const [v, h] = o.pad ?? [20, 34];
+  k.component(name, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 999, align: "CENTER", padding: { top: v, right: h, bottom: v, left: h }, props: { Label: o.label }, effects: [longShadow(k, 0.5, 18, 40)] }, (id) => {
+    k.propText(id, "Label", { style: o.style, color: "onPrimary", autoWidth: true });
+  });
+}
+function plateChip(k, parent, words, o) {
+  const [v, h] = o.pad ?? [10, 18];
+  const c = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: Math.round(h * 0.6), radius: 999, fill: "plate", padding: { top: v, right: h, bottom: v, left: h }, name: o.name ?? "Chip", effects: rimLight(k, 0.12), ...o.absolute ? { absolute: o.absolute } : {} });
+  if (o.dot) k.ellipse(c, Math.round(v * 1.1), o.dot, { name: "Chip dot" });
+  k.text(c, words, { style: o.style, color: o.ink ?? "onPlate", autoWidth: true, name: `${o.name ?? "Chip"} words` });
+  return c;
+}
+var MONTHLY = [310, 420, 560, 690, 840, 1020, 1240, 1510, 1800];
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"];
+function monthlyLine(w, h, top = 2e3) {
+  const pts = MONTHLY.map((v, i) => ({ x: i / (MONTHLY.length - 1) * w, y: h - v / top * h }));
+  return { closed: false, points: pts.map((p, i) => {
+    const prev = pts[i - 1] ?? p, next = pts[i + 1] ?? p, dx = (next.x - prev.x) / 6, dy = (next.y - prev.y) / 6;
+    return { ...pt3(p.x, p.y), ...i > 0 ? { handleIn: pt3(p.x - dx, p.y - dy) } : {}, ...i < pts.length - 1 ? { handleOut: pt3(p.x + dx, p.y + dy) } : {} };
+  }) };
+}
+function monthlyArea(w, h, top = 2e3) {
+  const l = monthlyLine(w, h, top);
+  return { closed: true, points: [...l.points, pt3(w, h), pt3(0, h)] };
+}
+var areaPaint = (k) => [linear([[0, k.color("lagoon", 0.45)], [1, k.color("lagoon", 0)]], { x: 0.5, y: 0 }, { x: 0.5, y: 1 })];
+function sitePill(k, o) {
+  const [v, h] = o.pad ?? [14, 22];
+  k.component("Site pill", { direction: "HORIZONTAL", width: "HUG", radius: 999, align: "CENTER", fill: "plate", padding: { top: v, right: h, bottom: v, left: h }, effects: rimLight(k, 0.14), props: { Label: o.label ?? SPOOL.site } }, (id) => {
+    k.propText(id, "Label", { style: o.style, color: "onPlate", autoWidth: true });
+  });
+}
+function videoFoot(k, sheet, y, o = {}) {
+  const n = o.n ?? 6, w = o.w ?? 160, gap = o.gap ?? 28, h = Math.round(w * 16 / 9);
+  const x0 = Math.round((k.node(sheet).width - (n * w + (n - 1) * gap)) / 2);
+  const row = k.frame(sheet, { x: 0, y, width: k.node(sheet).width, height: h }, { name: "Video foot" });
+  k.patch(row, { opacity: o.opacity ?? 0.6 });
+  for (let i = 0; i < n; i++) {
+    const tile = k.stack(row, { width: w, height: h, radius: 16, clip: true, fill: [k.gradient({ from: ["lagoon", "coral", "apricot"][i % 3], to: "ocean", angle: 64 + i * 14 })], name: "Foot video", absolute: { x: x0 + i * (w + gap), y: 0 } });
+    k.vector(tile, w, h, [{ closed: false, points: [pt3(w * 0.16, h * 0.74), pt3(w * 0.4, h * 0.52), pt3(w * 0.6, h * 0.6), pt3(w * 0.86, h * 0.28)] }], [], { name: "Foot route", absolute: { x: 0, y: 0 }, stroke: { color: "rim", width: 3, cap: "ROUND", join: "ROUND" } });
+  }
+  return row;
+}
+
+export {
+  SPOOL,
+  JOBS,
+  gradientBrand,
+  display,
+  body,
+  label,
+  code,
+  figure,
+  ts,
+  DEEP,
+  deep,
+  MESH,
+  mesh,
+  bloomAt,
+  GRAIN,
+  grainOver,
+  fitFull,
+  longShadow,
+  rimLight,
+  specular,
+  WIN,
+  spoolWindow,
+  winStyles,
+  renderRun,
+  tilted,
+  orbitCam,
+  parallax,
+  lockup,
+  button,
+  plateChip,
+  MONTHLY,
+  MONTHS,
+  monthlyLine,
+  monthlyArea,
+  areaPaint,
+  sitePill,
+  videoFoot
+};