@popcraft/kit 0.53.15 → 0.53.17

package/dist/chunks/chunk-7N6XWDN7.js

@@ -0,0 +1,140 @@
+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 {
+  archPath,
+  crescent,
+  draw,
+  eightStar,
+  fanous,
+  flourishComponent,
+  printVariant,
+  starPath,
+  tilePattern
+} from "./chunk-LU3MUAJN.js";
+import {
+  SERIF
+} from "./chunk-MPRWXHPJ.js";
+import {
+  blurred
+} from "./chunk-4MEFPCMF.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/print/holidays-eid-dinner-invitation.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Eid dinner invitation";
+var PAD = { top: 318, right: 74, bottom: 66, left: 74 };
+function art(w, h) {
+  const s = w / 480, B = 14 * s, cx = w / 2;
+  const aw = w - 92 * s, base = h - 34 * s, spring = 196 * s, tip = 44 * s;
+  const outer = archPath(cx, aw, base, spring, tip), inner = archPath(cx, aw - 14 * s, base - 7 * s, spring + 4 * s, tip + 10 * s);
+  const tiles = (x0, y0, x1, y1) => {
+    const t = tilePattern(x1 - x0, y1 - y0, 34 * s);
+    const mv = (p) => ({ ...p, points: p.points.map((q) => ({ ...q, x: q.x + x0, y: q.y + y0 })) });
+    return { stars: t.stars.map(mv), joins: t.joins.map(mv) };
+  };
+  const parts = [tiles(-B, -B, 40 * s, h + B), tiles(w - 40 * s, -B, w + B, h + B), tiles(40 * s, -B, w * 0.3, 92 * s), tiles(w * 0.7, -B, w - 40 * s, 92 * s)];
+  const lanterns = [fanous(cx - 100 * s, 0, 104 * s), fanous(cx, 0, 136 * s), fanous(cx + 100 * s, 0, 94 * s)].map((l, i) => ({ l, drop: [92, 140, 70][i] * s }));
+  const lifted = lanterns.map(({ l, drop }) => {
+    const mv = (p) => ({ ...p, points: p.points.map((q) => ({ ...q, y: q.y + drop, ...q.handleIn ? { handleIn: { ...q.handleIn, y: q.handleIn.y + drop } } : {}, ...q.handleOut ? { handleOut: { ...q.handleOut, y: q.handleOut.y + drop } } : {} })) });
+    return { metal: l.metal.map(mv), glass: l.glass.map(mv), frame: l.frame.map(mv), glow: l.glow.map(mv) };
+  });
+  const chains = lanterns.map(({ drop }, i) => {
+    const x = [cx - 100 * s, cx, cx + 100 * s][i];
+    return { closed: false, points: [{ x, y: tip + 34 * s }, { x, y: drop + 3 * s }] };
+  });
+  return [
+    ...parts.map((p) => ({ name: "Tiles", paths: p.stars, color: "tile" })),
+    ...parts.map((p) => ({ name: "Tile joins", paths: p.joins, color: "tileDeep" })),
+    { name: "Arch", paths: [outer], color: "gold", o: { strokeWidth: 2 * s } },
+    { name: "Arch inner", paths: [inner], color: "gold", o: { strokeWidth: 0.8 * s, opacity: 0.8 } },
+    { name: "Crescent", paths: [crescent(cx - 4 * s, tip + 36 * s, 16 * s, 0.5, 1, -0.5)], color: "gold" },
+    { name: "Star", paths: [starPath(cx + 12 * s, tip + 28 * s, 5 * s, 2 * s)], color: "gold" },
+    { name: "Chains", paths: chains, color: "gold", o: { strokeWidth: 0.8 * s } },
+    { name: "Lantern glow", paths: lifted.flatMap((l) => l.glass), color: "amber", o: { opacity: 0.5, effects: [blurred(12 * s)] } },
+    { name: "Lantern glass", paths: lifted.flatMap((l) => l.glass), color: "amber" },
+    { name: "Lantern flames", paths: lifted.flatMap((l) => l.glow), color: "cream" },
+    { name: "Lantern frames", paths: lifted.flatMap((l) => l.frame), color: "goldDeep", o: { strokeWidth: 1.2 * s } },
+    { name: "Lanterns", paths: lifted.flatMap((l) => l.metal), color: "gold" },
+    { name: "Foot star", paths: [eightStar(cx, h - 52 * s, 8 * s)], color: "gold" }
+  ];
+}
+var holidays_eid_dinner_invitation_default = defineTemplate({
+  id: "print-holidays-eid-dinner-invitation",
+  meta: {
+    name: NAME,
+    description: "A printed invitation to an Eid al-Fitr dinner at home: a pointed arch in fine gold lines frames the card, eight-pointed stars tile the margins on deep midnight teal, a crescent and star sit in the arch\u2019s crown and three lanterns hang inside it over \u201CEid Mubarak\u201D in a gold serif and the details, the date given as the moon allows. 5 \xD7 7 inches with bleed, and an A6 copy",
+    category: "invitation",
+    tags: ["eid", "eid al-fitr", "eid mubarak", "ramadan", "iftar", "dinner", "family", "lantern", "fanous", "crescent", "islamic geometric", "muslim", "invitation", "print", "card"],
+    platforms: ["print"],
+    formats: ["card"],
+    useCases: ["invitation", "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: "#0B3B44", text: "#FFF6E2", onPaper: "#E7C77A", primary: "#E7C77A", onPrimary: "#0B3B44" },
+      { name: "the Rahman family" }
+    );
+    k.palette({ gold: "#E2BE6A", goldDeep: "#A88334", amber: "#F2A93B", cream: "#FFF6E2", tile: "#1C5A63", tileDeep: "#13474F" });
+    k.textStyle("Kicker 10.5", { size: 10.5, fontWeight: 700, letterSpacing: 3.2, lineHeight: 15 });
+    k.textStyle("Title 50", { ...SERIF, size: 50, fontWeight: 600, letterSpacing: -0.8, lineHeight: 52 });
+    k.textStyle("Sub 16", { ...SERIF, size: 16, fontWeight: 400, fontStyle: "italic", lineHeight: 22 });
+    k.textStyle("When 14", { size: 14, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Body 11.5", { ...SERIF, size: 11.5, fontWeight: 400, lineHeight: 16.5 });
+    k.textStyle("Rsvp 9.5", { size: 9.5, fontWeight: 700, letterSpacing: 1.4, lineHeight: 14 });
+    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, "WITH JOY, WE INVITE YOU", { style: "Kicker 10.5", color: "onPaper", ...c, name: "Kicker" });
+    k.stack(sheet, { height: 6, name: "Gap" });
+    k.text(sheet, "Eid Mubarak", { style: "Title 50", color: "onPaper", ...c, name: "Title" });
+    k.text(sheet, "to Eid al-Fitr dinner with {{brand.name}}", { style: "Sub 16", color: "text", ...c, name: "Sub" });
+    k.stack(sheet, { height: 12, name: "Gap" });
+    flourishComponent(k, "Star rule", "primary", eightStar(0, 0, 10), { rule: 26, size: 9 });
+    k.instance(sheet, "Star rule", {}, { name: "Divider" });
+    k.stack(sheet, { height: 12, name: "Gap" });
+    k.text(sheet, "Tuesday 9 March, after Maghrib", { style: "When 14", color: "text", ...c, name: "When" });
+    k.text(sheet, "or the evening Eid falls, as the moon decides", { style: "Body 11.5", color: "onPaper", ...c, name: "Moon" });
+    k.text(sheet, "12 Cedar Hollow Drive, Dearborn", { style: "Body 11.5", color: "text", ...c, name: "Where" });
+    k.stack(sheet, { height: 10, name: "Gap" });
+    k.text(sheet, "Biryani, sheer khurma and far too many sweets. Eidi bags for the children at the door.", { style: "Body 11.5", color: "text", ...c, name: "Body" });
+    k.stack(sheet, { height: 10, name: "Gap" });
+    k.text(sheet, "RSVP TO AMINA \xB7 (313) 555-0147", { style: "Rsvp 9.5", color: "onPaper", ...c, name: "Rsvp" });
+    k.textStyle("Title 42", { ...SERIF, size: 42, fontWeight: 600, letterSpacing: -0.6, lineHeight: 44 });
+    k.textStyle("Sub 13.5", { ...SERIF, size: 13.5, fontWeight: 400, fontStyle: "italic", lineHeight: 18 });
+    k.textStyle("When 12", { size: 12, fontWeight: 700, lineHeight: 17 });
+    k.textStyle("Body 10", { ...SERIF, size: 10, fontWeight: 400, lineHeight: 14 });
+    k.textStyle("Rsvp 8.5", { size: 8.5, fontWeight: 700, letterSpacing: 1.1, lineHeight: 13 });
+    k.textStyle("Kicker 9", { size: 9, fontWeight: 700, letterSpacing: 2.6, lineHeight: 13 });
+    k.variants(sheet, [printVariant("a6", {
+      art,
+      pad: PAD,
+      masterWidth: W,
+      styles: [["Title", "Title 42"], ["Sub", "Sub 13.5"], ["When", "When 12"], ["Where", "Body 10"], ["Moon", "Body 10"], ["Body", "Body 10"], ["Rsvp", "Rsvp 8.5"], ["Kicker", "Kicker 9"]]
+    })]);
+    return k.finish();
+  }
+});
+
+export {
+  holidays_eid_dinner_invitation_default
+};

package/dist/chunks/chunk-7NCPYQSS.js

@@ -0,0 +1,94 @@
+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 {
+  solarpunkBrand,
+  town
+} from "./chunk-7PZWSTRZ.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-MPRWXHPJ.js";
+import {
+  pill
+} from "./chunk-FYXK7W3C.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/social/solarpunk-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var TOWN = {
+  w: 1200,
+  h: 630,
+  base: 500,
+  bed: 574,
+  u: 0.62,
+  loopMs: 6e3,
+  seed: 41,
+  still: true,
+  sun: { x: 930, y: 250, size: 260 },
+  birdInk: "onPaper",
+  dawn: 330,
+  far: { from: 640, to: 1200 },
+  clouds: [{ x: 1060, y: 90, w: 190 }, { x: 800, y: 150, w: 130 }],
+  birds: [{ x: 700, y: 70, size: 10 }, { x: 730, y: 54, size: 8 }, { x: 668, y: 50, size: 7 }],
+  turbines: [{ x: 790, h: 300 }, { x: 1110, h: 340 }, { x: 664, h: 200 }],
+  blocks: [
+    { x: 1010, w: 150, h: 290, kind: "garden", vine: true },
+    { x: 830, w: 130, h: 250, kind: "terrace" },
+    { x: 690, w: 150, h: 170, kind: "garden", vine: true },
+    { x: 920, w: 150, h: 170, kind: "solar" },
+    { x: 1130, w: 140, h: 190, kind: "dome" }
+  ],
+  fronds: [{ x: 1150, y: 690, size: 190, lean: -0.3 }, { x: 40, y: 700, size: 170, lean: 0.3 }, { x: 560, y: 720, size: 150 }],
+  vines: [{ x: 600, y: 512, height: 250, sway: 22, lean: 30, curl: -1, leaves: 7, leaf: 44, weight: 6, bloom: true }]
+};
+var solarpunk_link_preview_default = defineTemplate({
+  id: "social-solarpunk-link-preview",
+  meta: {
+    name: "Solarpunk link preview",
+    description: "A 1200 \xD7 630 link preview for a climate, energy or calm-software product: the promise in an italic serif, the product in one mono line and the offer as a seal on a morning sky, beside a rooftop town whose roofline climbs toward the sun \u2014 gardens, a glasshouse and solar panels on the roofs, vines up the walls, turbines over them",
+    category: "social",
+    tags: ["solarpunk", "botanical", "art nouveau", "link preview", "open graph", "og image", "climate", "energy", "sustainability", "saas", "serif"],
+    platforms: ["web", "x", "linkedin", "facebook"],
+    formats: ["og-image"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Solarpunk link preview", preset("og-image"));
+    k.quantizeGeometry = true;
+    solarpunkBrand(k, { promise: "Software that grows on your building." });
+    k.textStyle("Eyebrow 20", { size: 20, fontWeight: 700, letterSpacing: 4, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Display 76", { ...SERIF, size: 76, fontWeight: 700, fontStyle: "italic", letterSpacing: -2.6, lineHeight: 76 });
+    k.textStyle("Facts 20", { ...MONO, size: 20, fontWeight: 500, lineHeight: 30 });
+    k.textStyle("Seal 20", { size: 20, fontWeight: 800, lineHeight: 26 });
+    pill(k, "Seal", { fill: "accent", ink: "onAccent", style: "Seal 20", label: "Free for your first building", pad: [10, 22] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 20, { top: 56, right: 600, bottom: 170, left: 72 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    town(k, sheet, TOWN);
+    k.text(sheet, "{{brand.name}} \xB7 calm energy software", { style: "Eyebrow 20", color: "onPaper", name: "Eyebrow" });
+    k.text(sheet, "{{brand.promise}}", { style: "Display 76", color: "text", name: "Headline" });
+    k.text(sheet, "Meters in. Idle watts and a roof plan out.", { style: "Facts 20", color: "onPaper", name: "Facts" });
+    k.instance(sheet, "Seal", { Label: "Free for your first building" }, { name: "Seal" });
+    return k.finish();
+  }
+});
+
+export {
+  solarpunk_link_preview_default
+};

package/dist/chunks/chunk-7OJY3L53.js

@@ -0,0 +1,345 @@
+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 {
+  rig
+} from "./chunk-YOY75SOE.js";
+import {
+  MONO
+} from "./chunk-MPRWXHPJ.js";
+import {
+  blackShadow
+} from "./chunk-4MEFPCMF.js";
+import {
+  box
+} from "./chunk-U2KTX33N.js";
+import {
+  contextFrame,
+  init_scene3d,
+  sceneLayers
+} from "./chunk-DZHR24NY.js";
+import {
+  init_transform3d,
+  mul4,
+  transform4,
+  zoomPx
+} from "./chunk-GHDFAWY2.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/themes/machined-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene3d();
+init_transform3d();
+var UNIT = { w: 840, h: 280, d: 460 };
+var PITCH = UNIT.h + 10;
+var FIELDS = { name: "Bulkhead", tagline: "The model gateway that stays up.", site: "bulkhead.example" };
+function machinedBrand(k, more = {}) {
+  k.brand(
+    { background: "#121416", text: "#F4F1EB", onBackground: "#B7B3AA", primary: "#FF5B1F", onPrimary: "#1C0A02", accent: "#B6F23A", onAccent: "#141A02", ...more },
+    FIELDS
+  );
+  k.palette({
+    metal: "#C3C6CA",
+    metalShade: "#9CA0A6",
+    metalDark: "#4E5258",
+    onMetal: "#15171A",
+    panel: "#0A0B0D",
+    panelFace: "#1D2024",
+    panelEdge: "#30343A",
+    onPanel: "#EEF6DA",
+    panelMuted: "#A3ABA0",
+    led: "#B6F23A",
+    fault: "#FF3B30",
+    route: "#FF5B1F",
+    board: "#12201B",
+    boardEdge: "#1F362D",
+    trace: "#D8A446",
+    chip: "#0B0D0E",
+    pin: "#C9CCD0"
+  });
+}
+var BRUSHED = `struct Params {
+  grain: f32,  // @range 0 1 @default 0.5
+  glint: f32,  // @range -0.6 1.6 @default 0.3
+  band: f32,   // @range 0.03 1 @default 0.22
+  sheen: f32,  // @range 0 1 @default 0.45
+  slant: f32,  // @range -1 1 @default 0.35
+}
+
+fn bm_hash(q: vec2<f32>) -> f32 { return fract(sin(dot(q, vec2<f32>(127.1, 311.7))) * 43758.5453); }
+
+// Value noise stretched along x: one row of streaks, each \`run\` px long.
+fn bm_row(px: vec2<f32>, rowH: f32, run: f32) -> f32 {
+  let row = floor(px.y / rowH);
+  let x = px.x / run + bm_hash(vec2<f32>(row, 7.0)) * 19.0;
+  let i = floor(x);
+  let f = fract(x);
+  let s = f * f * (3.0 - 2.0 * f);
+  return mix(bm_hash(vec2<f32>(i, row)), bm_hash(vec2<f32>(i + 1.0, row)), s);
+}
+
+fn shade(uv: vec2<f32>, res: vec2<f32>, time: f32) -> vec4<f32> {
+  let px = uv * res;
+  let n = 0.5 * bm_row(px, 1.0, 140.0) + 0.3 * bm_row(px, 2.0, 60.0) + 0.2 * bm_row(px, 5.0, 320.0);
+  let v = (n - 0.5) * 2.0 * p.grain;
+  let d = uv.x + (0.5 - uv.y) * p.slant * res.y / res.x - p.glint;
+  let g = exp(-(d * d) / (p.band * p.band)) * p.sheen * (0.75 + 0.5 * n);
+  let light = g + max(v, 0.0) * 0.4;
+  let dark = max(-v, 0.0) * 0.34;
+  let a = clamp(light + dark, 0.0, 1.0);
+  let c = light / max(light + dark, 0.0001);
+  return vec4<f32>(vec3<f32>(c), a);
+}`;
+var SHOP_LIGHT = `struct Params {
+  pool: vec2f,   // @default 0.5 0.4
+  reach: f32,    // @range 0.05 2 @default 0.6
+  glow: f32,     // @range 0 1 @default 0.16
+  shadow: f32,   // @range 0 1 @default 0.5
+  grain: f32,    // @range 0 1 @default 0.08
+  lamp: vec3f,   // @default 1 0.906 0.8
+}
+
+fn sl_hash(q: vec2<f32>) -> f32 { return fract(sin(dot(q, vec2<f32>(91.7, 263.3))) * 43758.5453); }
+
+fn shade(uv: vec2<f32>, res: vec2<f32>, time: f32) -> vec4<f32> {
+  let asp = vec2<f32>(res.x / res.y, 1.0);
+  let d = length((uv - p.pool) * asp);
+  let n = (sl_hash(floor(uv * res / 2.0)) - 0.5) * p.grain;
+  let light = p.glow * exp(-(d * d) / (p.reach * p.reach)) + max(n, 0.0);
+  let dark = p.shadow * smoothstep(0.3, 1.15, length((uv - vec2<f32>(0.5)) * asp)) + max(-n, 0.0);
+  let a = clamp(light + dark, 0.0, 1.0);
+  let c = p.lamp * (light / max(light + dark, 0.0001));
+  return vec4<f32>(c, a);
+}`;
+function finish(k, parent, w, h, o = {}) {
+  return k.rect(parent, w, h, k.shader("Brushed metal", { grain: o.grain ?? 0.5, glint: o.glint ?? 0.3, band: o.band ?? 0.22, sheen: o.sheen ?? 0.45, slant: o.slant ?? 0.35 }, BRUSHED), { name: o.name ?? "Finish", absolute: { x: 0, y: 0 } });
+}
+function shopLight(k, sheet, w, h, o = {}) {
+  return k.rect(sheet, w, h, k.shader("Shop light", { pool: { x: o.x ?? 0.5, y: o.y ?? 0.4 }, reach: o.reach ?? 0.6, glow: o.glow ?? 0.16, shadow: o.shadow ?? 0.5, grain: o.grain ?? 0, lamp: { x: 1, y: 0.906, z: 0.8 } }, SHOP_LIGHT), { name: "Shop light", absolute: { x: 0, y: 0 } });
+}
+function lights(s, o = {}) {
+  return [
+    { id: "fill", type: "AMBIENT", name: "Fill", color: { r: 0.9, g: 0.94, b: 1, a: 1 }, intensity: o.fill ?? 0.62, x: 0, y: 0, z: 0, targetX: 0, targetY: 0, targetZ: 0 },
+    { id: "key", type: "DIRECTIONAL", name: "Key", color: { r: 1, g: 0.96, b: 0.9, a: 1 }, intensity: o.key ?? 0.6, x: -s.W * 0.2, y: -s.H * 0.9, z: 1500, targetX: s.W / 2, targetY: s.H / 2, targetZ: 0 }
+  ];
+}
+var softShadow = (a, y, blur) => blackShadow(a, y, blur);
+function slots(cols, rows, sw, sh, gx, gy, x0 = 0, y0 = 0) {
+  const out = [];
+  for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) out.push(box(x0 + c * (sw + gx), y0 + r * (sh + gy), sw, sh));
+  return out;
+}
+function ear(k, parent, x, edge, hole) {
+  const e = k.stack(parent, { width: 44, height: UNIT.h, fill: k.tint(edge, 0.35), name: "Rack ear", absolute: { x, y: 0 } });
+  for (const y of [34, UNIT.h - 62]) k.rect(e, 18, 28, hole, { radius: 9, name: "Mounting slot", absolute: { x: 13, y } });
+}
+function faceStyles(k) {
+  k.textStyle("Engraved 28", { size: 28, fontWeight: 800, letterSpacing: 0.4, lineHeight: 32 });
+  k.textStyle("Engraved mono 16", { ...MONO, size: 16, fontWeight: 600, letterSpacing: 0.4, lineHeight: 20, textCase: "UPPER" });
+  k.textStyle("Display label 16", { ...MONO, size: 16, fontWeight: 500, letterSpacing: 1, lineHeight: 20, textCase: "UPPER" });
+  k.textStyle("Display value 22", { ...MONO, size: 22, fontWeight: 700, lineHeight: 26 });
+}
+var PORTS = 8;
+var FAILED = 1;
+var LIVE = 2;
+function face(k, parent, o = {}) {
+  faceStyles(k);
+  const id = k.stack(parent, { direction: "HORIZONTAL", width: UNIT.w, height: UNIT.h, fill: "metal", radius: 6, clip: true, gap: 22, align: "CENTER", padding: { top: 0, right: 64, bottom: 0, left: 64 }, name: "Face", stroke: { color: "metalShade", width: 2, align: "INSIDE" } });
+  const fin = finish(k, id, UNIT.w, UNIT.h, o);
+  ear(k, id, 0, "metalShade", "metalDark");
+  ear(k, id, UNIT.w - 44, "metalShade", "metalDark");
+  const left = k.stack(id, { width: 214, height: UNIT.h, justify: "SPACE_BETWEEN", padding: { top: 30, right: 0, bottom: 30, left: 0 }, name: "Nameplate" });
+  const plate = k.stack(left, { gap: 8, name: "Name" });
+  const mark = k.stack(plate, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Mark row" });
+  const tile = k.stack(mark, { width: "HUG", fill: "route", radius: 9, padding: 8, name: "Logo tile" });
+  k.logo(tile, 28, 28);
+  k.text(mark, "{{brand.name}}", { style: "Engraved 28", color: "onMetal", name: "Unit name" });
+  k.text(plate, "BH-1 \xB7 Model gateway", { style: "Engraved mono 16", color: "onMetal", name: "Model line" });
+  const controls = k.stack(left, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Controls" });
+  const knob = k.stack(controls, { width: 64, height: 64, radius: 32, fill: "metalShade", align: "CENTER", justify: "CENTER", name: "Knob", stroke: { color: "metalDark", width: 3, align: "INSIDE" }, effects: [softShadow(0.35, 4, 8)] });
+  const cap = k.stack(knob, { width: 44, height: 44, radius: 22, fill: "metal", align: "CENTER", name: "Knob cap", padding: { top: 5, right: 0, bottom: 0, left: 0 } });
+  k.rect(cap, 4, 14, "route", { radius: 2, name: "Knob mark" });
+  for (const [i, on] of [true, false].entries()) {
+    const sw = k.stack(controls, { width: 26, height: 52, radius: 6, fill: "panel", padding: 4, justify: on ? "MIN" : "MAX", name: `Switch ${i + 1}` });
+    k.rect(sw, 18, 22, "metal", { radius: 3, name: "Lever" });
+  }
+  const pwr = k.stack(controls, { width: "HUG", gap: 6, align: "CENTER", name: "Power" });
+  k.ellipse(pwr, 12, "led", { name: "Power lamp" });
+  k.text(pwr, "PWR", { style: "Engraved mono 16", color: "onMetal", autoWidth: true, name: "Power label" });
+  const mid = k.stack(id, { width: 256, gap: 12, name: "Middle" });
+  const display = k.stack(mid, { fill: "panel", radius: 8, gap: 8, padding: { top: 14, right: 16, bottom: 14, left: 16 }, name: "Display", stroke: { color: "metalDark", width: 3, align: "OUTSIDE" } });
+  const line = (label, value, name, ink = "onPanel") => {
+    const row = k.stack(display, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: `${name} row` });
+    k.text(row, label, { style: "Display label 16", color: "panelMuted", width: 62, name: `${name} label` });
+    return k.text(row, value, { style: "Display value 22", color: ink, name });
+  };
+  const route = line("Route", "upstream-03", "Route");
+  const latency = line("P95", "38 ms", "Latency");
+  const status = k.text(display, "Failover in 38 ms", { style: "Display label 16", color: "led", name: "Status" });
+  k.vector(mid, 256, 34, slots(14, 2, 12, 12, 6.77, 10), "metalDark", { name: "Vent" });
+  const ports = k.stack(id, { width: 196, gap: 12, name: "Ports" });
+  const faults = [], markers = [];
+  for (let r = 0; r < 2; r++) {
+    const row = k.stack(ports, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: `Port row ${r + 1}` });
+    for (let c = 0; c < 4; c++) {
+      const i = r * 4 + c;
+      const port = k.stack(row, { width: 40, gap: 5, align: "CENTER", name: `Port ${i + 1}` });
+      const lamp = k.stack(port, { width: 12, height: 12, name: "Lamp" });
+      k.ellipse(lamp, 12, "led", { name: "Lamp on" });
+      const fault = k.ellipse(lamp, 12, "fault", { name: "Lamp fault", absolute: { x: 0, y: 0 }, opacity: i === FAILED ? 1 : 0 });
+      const jack = k.stack(port, { width: 40, height: 30, radius: 4, fill: "panel", justify: "MAX", align: "CENTER", padding: 4, name: "Jack", stroke: { color: "metalDark", width: 2, align: "INSIDE" } });
+      const marker = k.rect(jack, 24, 5, "route", { radius: 2, name: "Route marker", opacity: i === LIVE ? 1 : 0 });
+      k.text(port, String(i + 1).padStart(2, "0"), { style: "Engraved mono 16", color: "onMetal", align: "CENTER", name: "Port number" });
+      faults.push(fault);
+      markers.push(marker);
+    }
+  }
+  return { id, finish: fin, route, latency, status, faults, markers };
+}
+function blankPanel(k) {
+  if (k.hasComponent("Blank panel")) return;
+  k.component("Blank panel", {
+    direction: "HORIZONTAL",
+    width: UNIT.w,
+    height: UNIT.h,
+    fill: "panelFace",
+    radius: 6,
+    clip: true,
+    align: "CENTER",
+    justify: "SPACE_BETWEEN",
+    padding: { top: 0, right: 72, bottom: 0, left: 72 },
+    stroke: { color: "panelEdge", width: 2, align: "INSIDE" },
+    description: "A blank panel closing an empty bay of the rack: ears, a vent and one lamp."
+  }, (id) => {
+    ear(k, id, 0, "panelEdge", "panel");
+    ear(k, id, UNIT.w - 44, "panelEdge", "panel");
+    k.vector(id, 520, 150, slots(20, 6, 16, 10, 10.526, 18), "panel", { name: "Vent" });
+    const side = k.stack(id, { width: "HUG", gap: 14, align: "CENTER", name: "Lamps" });
+    k.ellipse(side, 12, "led", { name: "Lamp" });
+    k.rect(side, 44, 70, "panel", { radius: 6, name: "Handle", stroke: { color: "panelEdge", width: 2, align: "INSIDE" } });
+  });
+}
+var BOARDS = ["Router", "Cache", "Guardrails", "Meter"];
+var BOARD_NAMES = BOARDS;
+var BOARD_W = UNIT.w - 96;
+var BOARD_D = UNIT.d - 60;
+var LIFT = 96;
+function board(k, parent, i) {
+  const W = BOARD_W, D = BOARD_D;
+  const id = k.stack(parent, { width: W, height: D, fill: "board", radius: 10, clip: true, name: `${BOARDS[i]} board`, stroke: { color: "boardEdge", width: 3, align: "INSIDE" } });
+  const traces = [];
+  for (let t = 0; t < 9; t++) {
+    const y = 60 + t * 34 + (t * 7 + i * 13) % 11, jog = 120 + (t * 53 + i * 97) % (W - 320), drop = (t + i) % 2 ? 22 : -22;
+    traces.push({ closed: false, points: [{ x: 30, y }, { x: jog, y }, { x: jog + Math.abs(drop), y: y + drop }, { x: W - 30, y: y + drop }] });
+  }
+  k.vector(id, W, D, traces, "trace", { name: "Traces", strokeWidth: 3, opacity: 0.75, absolute: { x: 0, y: 0 } });
+  const chips = [[60 + i * 40, D - 190, 150, 110], [300 + i * 30, D - 170, 96, 96], [470 + i % 2 * 60, D - 200, 190, 80]];
+  for (const [j, [x, y, w, h]] of chips.entries()) {
+    k.vector(id, w + 16, h, slots(1, Math.floor(h / 14), w + 16, 6, 0, 8, 0, 4), "pin", { name: `Pins ${j + 1}`, absolute: { x: x - 8, y } });
+    const chip = k.stack(id, { width: w, height: h, fill: "chip", radius: 6, padding: 10, name: `Chip ${j + 1}`, absolute: { x, y }, stroke: { color: "boardEdge", width: 2, align: "INSIDE" } });
+    k.ellipse(chip, 10, "trace", { name: "Pin one" });
+  }
+  k.vector(id, 360, 26, slots(24, 1, 9, 26, 6.26, 0), "trace", { name: "Edge connector", absolute: { x: (W - 360) / 2, y: D - 30 } });
+  k.rect(id, 54 + i * 26, 12, "route", { radius: 3, name: "Board flag", absolute: { x: 30, y: D - 58 } });
+  return id;
+}
+function framing(k, scene, id, p) {
+  const sc = k.node(scene);
+  const n = k.node(id);
+  const reach = zoomPx(sc.scene3d.camera.focalLength, sc.width);
+  const ox = (sc.scene3d.originX ?? 0.5) * sc.width, oy = (sc.scene3d.originY ?? 0.5) * sc.height;
+  return {
+    translateX: Math.round(ox + (p.cx - ox) / p.scale - (n.x + n.width / 2)),
+    translateY: Math.round(oy + (p.cy - oy) / p.scale - (n.y + n.height / 2)),
+    z: Math.round(reach * (1 - 1 / p.scale))
+  };
+}
+function rack(k, scene, s, o) {
+  blankPanel(k);
+  const { w: W, h: H, d: D } = UNIT;
+  const r = rig(k, scene, s, "Rack", W, H, o.cx, o.cy);
+  k.patch(r, { ...framing(k, scene, r, o), rotateX: o.rotateX ?? -14, rotateY: o.rotateY ?? -24 });
+  const above = o.above ?? 2, below = o.below ?? 2;
+  const top = -above * PITCH - 40, tall = (above + below + 1) * PITCH + 70;
+  const side = k.rect(r, D, tall, "panel", { name: "Cabinet side" });
+  k.patch(side, { x: W + 30 - D / 2, y: top, rotateY: 90, material3d: { diffuse: 0.9 } });
+  for (let i = -above; i <= below; i++) {
+    const y = i * PITCH;
+    const bay = k.rect(r, W + 60, PITCH + 2, "panel", { name: i === 0 ? "Bay" : "Bay back" });
+    k.patch(bay, { x: -30, y: y - 6, z: D / 2 - 30 });
+    for (const x of [-30, W - 40]) {
+      const post = k.stack(r, { width: 70, height: PITCH, fill: "panelEdge", name: "Rack post" });
+      k.vector(post, 70, PITCH, slots(1, 8, 16, 16, 0, 20.25, 27, 10), "panel", { name: "Post holes", absolute: { x: 0, y: 0 } });
+      k.patch(post, { x, y: y - 5, z: D / 2 - 8 });
+    }
+    if (i === 0) continue;
+    const blank = k.instance(r, "Blank panel", {}, { name: `Blank ${i < 0 ? "above" : "below"} ${Math.abs(i)}` });
+    k.patch(blank, { x: 0, y, z: D / 2 });
+  }
+  const unit = k.group(r, { x: 0, y: 0, width: W, height: H }, { name: "Unit" });
+  k.patch(unit, { z: o.out ?? 0 });
+  const back = k.rect(unit, W, H, "metalShade", { name: "Back" });
+  k.patch(back, { z: -D / 2, rotateY: 180 });
+  const floor = k.rect(unit, W, D, "metalDark", { name: "Floor" });
+  k.patch(floor, { y: H - D / 2, rotateX: 90 });
+  for (const [name, x, turn] of [["Left side", -D / 2, -90], ["Right side", W - D / 2, 90]]) {
+    const wall = k.stack(unit, { width: D, height: H, fill: "metalShade", name, clip: true });
+    finish(k, wall, D, H, { glint: 0.7, sheen: 0.25, grain: 0.4 });
+    k.vector(wall, 220, 120, slots(10, 5, 14, 8, 8.9, 20), "metalDark", { name: "Side vent", absolute: { x: (D - 220) / 2, y: 80 } });
+    k.patch(wall, { x, y: 0, rotateY: turn });
+  }
+  const rise = BOARDS.map((_, i) => -(i + 1) * LIFT - (H - 60 - i * 50));
+  const boards = BOARDS.map((_, i) => {
+    const b = board(k, unit, i);
+    k.patch(b, { x: (W - BOARD_W) / 2, y: H - 60 - i * 50 - BOARD_D / 2, rotateX: 90, translateY: o.open ? rise[i] : 0, opacity: o.open ? 1 : 0, effects: [softShadow(0.4, 10, 24)] });
+    return b;
+  });
+  const lidRise = -(BOARDS.length + 1) * LIFT - 20;
+  const lid = k.stack(unit, { width: W, height: D, fill: "metal", radius: 6, clip: true, name: "Lid", stroke: { color: "metalShade", width: 2, align: "INSIDE" } });
+  const lidFinish = finish(k, lid, W, D, { glint: o.glint ?? 0.3, sheen: 0.5 });
+  k.vector(lid, 520, 150, slots(13, 5, 30, 8, 10.83, 27.5), "metalDark", { name: "Louvres", absolute: { x: 60, y: 70 } });
+  for (const [x, y] of [[26, 26], [W - 44, 26], [26, D - 44], [W - 44, D - 44], [W / 2 - 9, 26], [W / 2 - 9, D - 44]]) k.ellipse(lid, 18, "metalDark", { name: "Screw", absolute: { x, y } });
+  k.rect(lid, 150, 96, "route", { radius: 4, name: "Lid plate", absolute: { x: W - 230, y: 90 } });
+  k.rect(lid, 110, 8, "onMetal", { radius: 2, name: "Rating line", absolute: { x: W - 210, y: 112 } });
+  k.rect(lid, 76, 8, "onMetal", { radius: 2, name: "Rating line", absolute: { x: W - 210, y: 132 } });
+  k.patch(lid, { x: 0, y: -D / 2, rotateX: 90, translateY: o.open ? lidRise : 0, material3d: { specular: 0.5, shininess: 30 } });
+  const f = face(k, unit, { glint: o.glint });
+  k.patch(f.id, { z: D / 2, material3d: { specular: 0.4, shininess: 36 } });
+  return { rack: r, unit, face: f, lid, lidFinish, boards, rise, lidRise };
+}
+function seen(k, scene, id, x, y) {
+  const doc = k.finish();
+  const frame = contextFrame(doc.nodes[scene]);
+  const card = sceneLayers(doc.nodes, scene).find((l) => l.id === id);
+  if (!card) throw new Error(`seen: ${id} is not a layer of the scene`);
+  const p = transform4(mul4(frame.projection, mul4(frame.view, card.model)), x, y, 0);
+  return { x: p[0] / p[3], y: p[1] / p[3] };
+}
+
+export {
+  UNIT,
+  PITCH,
+  FIELDS,
+  machinedBrand,
+  BRUSHED,
+  SHOP_LIGHT,
+  finish,
+  shopLight,
+  lights,
+  PORTS,
+  FAILED,
+  LIVE,
+  face,
+  blankPanel,
+  BOARD_NAMES,
+  BOARD_W,
+  BOARD_D,
+  framing,
+  rack,
+  seen
+};

package/dist/chunks/chunk-7OYXBOUF.js

@@ -0,0 +1,47 @@
+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 {
+  slideshow
+} from "./chunk-YCNIPOHW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/slideshow/graduation.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var story = {
+  id: "motion-slideshow-graduation",
+  song: "vows",
+  meta: {
+    name: "Graduation class slideshow",
+    description: "A proud graduation film for a class or a school: a title card with the class year, the ceremony and the graduates as chapters, each face with a name and what comes next, cut on the beats of a warm piano track (made by PopCraft, CC0), slow pushes and light leaks, and a closing card with the school\u2019s congratulations. Photos are CC0 from Wikimedia Commons; drop your own on any frame.",
+    tags: ["animation", "slideshow", "graduation", "class of", "school", "university", "commencement", "students", "celebration", "photo", "music", "video"],
+    platforms: ["instagram", "facebook", "youtube", "tiktok"],
+    formats: ["video", "reel", "post"],
+    useCases: ["event", "education"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  brand: { paper: "#F4EEDF", onPaper: "#1B2440", accent: "#B8892F", shade: "#0E1428", onPhoto: "#FFFFFF", leak: "#FFD27F" },
+  fields: { names: "Class of 2026", date: "Hartfield Academy \xB7 27 June 2026" },
+  scenes: [
+    { kind: "title", name: "Opening", photo: "grad-01", kicker: "Congratulations", beats: 8, move: "in", focus: 0.5 },
+    { kind: "chapter", name: "Chapter 1", kicker: "The day", title: "Commencement", beats: 3 },
+    { kind: "photo", name: "The hall", photo: "grad-00", caption: "Two hundred and twelve caps", beats: 4, move: "up" },
+    { kind: "chapter", name: "Chapter 2", kicker: "The graduates", title: "What\u2019s next", beats: 3 },
+    { kind: "photo", name: "Omar", photo: "grad-02", layout: "matted", caption: "Omar Siddiqui", place: "Engineering, Leeds", beats: 4, move: "in" },
+    { kind: "photo", name: "Lucia", photo: "grad-03", layout: "matted", caption: "Luc\xEDa Ferrer", place: "A gap year, then nursing", beats: 4, move: "right", into: "push" },
+    { kind: "photo", name: "Caps", photo: "grad-01", layout: "matted", caption: "And off they go", beats: 6, move: "in", into: "leak" },
+    { kind: "end", name: "Ending", kicker: "So proud of you all" }
+  ]
+};
+var graduation_default = slideshow(story);
+
+export {
+  story,
+  graduation_default
+};