@popcraft/kit 0.32.0 → 0.32.1

package/dist/chunks/chunk-LOGI6GZJ.js

@@ -0,0 +1,368 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  hz
+} from "./chunk-GLFOEPRY.js";
+import {
+  boxedPaths
+} from "./chunk-YHBAWSDX.js";
+import {
+  blurred,
+  halo
+} from "./chunk-M6VTXO6F.js";
+import {
+  box3,
+  poly3,
+  pt3,
+  r3,
+  rng,
+  smooth
+} from "./chunk-6RCDZU4R.js";
+import {
+  ease
+} from "./chunk-AY2VBUGS.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/winter-holidays-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function holidayBrand(k, fields = {}) {
+  k.brand(
+    { paper: "#103530", text: "#FBF3E4", onPaper: "#B7D0C6", accent: "#E8B64C", onAccent: "#241803", primary: "#E8B64C", onPrimary: "#241803", card: "#0A2521", onCard: "#FBF3E4" },
+    { name: "Fennel", site: "fennel.example", ...fields }
+  );
+  k.palette({
+    board: "#071B18",
+    boardEdge: "#2B5C50",
+    glow: "#FFD98A",
+    nicheDeep: "#B36A1E",
+    ink: "#3A1D08",
+    cranberry: "#C4383C",
+    cranberryDeep: "#8A1F2B",
+    cream: "#FBF3E4",
+    navy: "#1E3560",
+    gold: "#E8B64C",
+    goldDeep: "#A8771F",
+    ice: "#BFE0EE",
+    leaf: "#2E7D62",
+    blush: "#F3B9A6",
+    flake: "#FFFFFF",
+    snow: "#FFFFFF",
+    snowShade: "#D5E4EC",
+    snowDeep: "#9DB9C9",
+    pine: "#0B2A26",
+    wire: "#061512",
+    shade: "#04100E",
+    tag: "#FBF3E4",
+    tagInk: "#2A1A0C",
+    tagSoft: "#7A6650"
+  });
+}
+var cast = (u, a = 0.5) => ({ type: "DROP_SHADOW", color: { r: 0, g: 0.04, b: 0.03, a }, offset: { x: 0, y: r3(10 * u) }, blur: r3(26 * u), spread: 0, visible: true });
+var ngon = (cx, cy, r, n = 8) => poly3(Array.from({ length: n }, (_, j) => {
+  const a = Math.PI * 2 * (j + 0.5) / n;
+  return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };
+}));
+var PAPERS = [
+  { paper: "cranberry", pattern: "dot", mark: "cream", opacity: 0.9, disc: "cream", num: "tagInk" },
+  { paper: "cream", pattern: "stripe", mark: "cranberry", opacity: 0.9, disc: "cranberry", num: "cream" },
+  { paper: "navy", pattern: "star", mark: "gold", opacity: 1, disc: "cream", num: "tagInk" },
+  { paper: "gold", pattern: "knit", mark: "goldDeep", opacity: 0.9, disc: "cream", num: "tagInk" },
+  { paper: "ice", pattern: "flake", mark: "navy", opacity: 0.75, disc: "navy", num: "cream" },
+  { paper: "leaf", pattern: "plaid", mark: "cream", opacity: 0.3, disc: "cream", num: "tagInk" },
+  { paper: "blush", pattern: "dot", mark: "cranberry", opacity: 0.85, disc: "cranberryDeep", num: "cream" },
+  { paper: "navy", pattern: "flake", mark: "ice", opacity: 0.8, disc: "gold", num: "tagInk" }
+];
+function patternPaths(kind, w, h, u) {
+  const paths = [];
+  if (kind === "dot") {
+    const step2 = 30 * u;
+    for (let y = step2 / 2, row = 0; y < h + step2; y += step2 * 0.86, row++) for (let x = row % 2 ? step2 : step2 / 2; x < w + step2; x += step2) paths.push(ngon(x, y, 5.5 * u));
+    return { paths };
+  }
+  if (kind === "stripe") {
+    const band = 15 * u, step2 = 40 * u;
+    for (let x = -h; x < w; x += step2) paths.push(poly3([{ x, y: h }, { x: x + band, y: h }, { x: x + band + h, y: 0 }, { x: x + h, y: 0 }]));
+    return { paths };
+  }
+  if (kind === "star") {
+    const step2 = 46 * u;
+    for (let y = step2 * 0.45, row = 0; y < h + step2; y += step2 * 0.8, row++) for (let x = row % 2 ? step2 * 0.95 : step2 * 0.45, i = 0; x < w + step2; x += step2, i++) {
+      const s = ((row + i) % 2 ? 7 : 13) * u, q = s * 0.26;
+      paths.push(poly3([{ x, y: y - s }, { x: x + q, y: y - q }, { x: x + s, y }, { x: x + q, y: y + q }, { x, y: y + s }, { x: x - q, y: y + q }, { x: x - s, y }, { x: x - q, y: y - q }]));
+    }
+    return { paths };
+  }
+  if (kind === "knit") {
+    const rowH = 26 * u, half = 12 * u, amp = 8 * u;
+    for (let y = rowH * 0.6; y < h + rowH; y += rowH) {
+      const points = [];
+      for (let x = -half, i = 0; x < w + half * 2; x += half, i++) points.push({ x, y: y + (i % 2 ? -amp : amp) });
+      paths.push(poly3(points, false));
+    }
+    return { paths, line: 4 * u };
+  }
+  if (kind === "flake") {
+    const step2 = 58 * u, arm = 15 * u;
+    for (let y = step2 * 0.5, row = 0; y < h + step2; y += step2 * 0.82, row++) for (let x = row % 2 ? step2 : step2 * 0.5; x < w + step2; x += step2) {
+      for (let j = 0; j < 3; j++) {
+        const a = Math.PI * j / 3 + Math.PI / 6;
+        paths.push(poly3([{ x: x - arm * Math.cos(a), y: y - arm * Math.sin(a) }, { x: x + arm * Math.cos(a), y: y + arm * Math.sin(a) }], false));
+      }
+      for (let j = 0; j < 6; j++) {
+        const a = Math.PI * j / 3 + Math.PI / 6, bx = x + arm * 0.6 * Math.cos(a), by = y + arm * 0.6 * Math.sin(a);
+        paths.push(poly3([{ x: bx + arm * 0.32 * Math.cos(a + 0.9), y: by + arm * 0.32 * Math.sin(a + 0.9) }, { x: bx, y: by }, { x: bx + arm * 0.32 * Math.cos(a - 0.9), y: by + arm * 0.32 * Math.sin(a - 0.9) }], false));
+      }
+    }
+    return { paths, line: 2.4 * u };
+  }
+  const step = 52 * u;
+  for (let x = step * 0.3; x < w; x += step) {
+    paths.push(box3(x, 0, 13 * u, h));
+    paths.push(box3(x + 22 * u, 0, 3 * u, h));
+  }
+  for (let y = step * 0.3; y < h; y += step) {
+    paths.push(box3(0, y, w, 13 * u));
+    paths.push(box3(0, y + 22 * u, w, 3 * u));
+  }
+  return { paths };
+}
+function wrap(k, parent, paper, w, h, u) {
+  const p = patternPaths(paper.pattern, w, h, u);
+  k.vector(parent, w, h, p.paths, paper.mark, { name: "Paper pattern", opacity: paper.opacity, absolute: { x: 0, y: 0 }, ...p.line ? { strokeWidth: r3(p.line) } : {} });
+}
+function iconPaths(icon, s) {
+  const q = (pts) => poly3(pts.map(([x, y]) => ({ x: x * s, y: y * s })));
+  switch (icon) {
+    case "gift":
+      return [
+        q([[0.08, 0.3], [0.43, 0.3], [0.43, 0.46], [0.08, 0.46]]),
+        q([[0.57, 0.3], [0.92, 0.3], [0.92, 0.46], [0.57, 0.46]]),
+        q([[0.14, 0.52], [0.43, 0.52], [0.43, 0.94], [0.14, 0.94]]),
+        q([[0.57, 0.52], [0.86, 0.52], [0.86, 0.94], [0.57, 0.94]]),
+        q([[0.5, 0.27], [0.24, 0.06], [0.16, 0.2], [0.36, 0.27]]),
+        q([[0.5, 0.27], [0.76, 0.06], [0.84, 0.2], [0.64, 0.27]])
+      ];
+    case "star": {
+      const pts = [];
+      for (let i = 0; i < 16; i++) {
+        const a = Math.PI * 2 * i / 16 - Math.PI / 2, r = i % 2 ? 0.16 : i % 4 === 0 ? 0.48 : 0.3;
+        pts.push([0.5 + r * Math.cos(a), 0.5 + r * Math.sin(a)]);
+      }
+      return [q(pts)];
+    }
+    case "mug":
+      return [
+        q([[0.14, 0.4], [0.7, 0.4], [0.66, 0.92], [0.18, 0.92]]),
+        q([[0.72, 0.48], [0.92, 0.48], [0.92, 0.78], [0.7, 0.78], [0.7, 0.69], [0.83, 0.69], [0.83, 0.57], [0.72, 0.57]]),
+        q([[0.28, 0.08], [0.35, 0.08], [0.31, 0.19], [0.37, 0.3], [0.3, 0.3], [0.24, 0.19]]),
+        q([[0.48, 0.08], [0.55, 0.08], [0.51, 0.19], [0.57, 0.3], [0.5, 0.3], [0.44, 0.19]])
+      ];
+    case "candle":
+      return [
+        q([[0.36, 0.42], [0.64, 0.42], [0.64, 0.86], [0.36, 0.86]]),
+        q([[0.18, 0.88], [0.82, 0.88], [0.76, 0.96], [0.24, 0.96]]),
+        smooth([{ x: 0.5 * s, y: 0.04 * s }, { x: 0.61 * s, y: 0.24 * s }, { x: 0.5 * s, y: 0.36 * s }, { x: 0.39 * s, y: 0.24 * s }], 0.24)
+      ];
+    case "envelope":
+      return [q([[0.06, 0.3], [0.5, 0.62], [0.94, 0.3], [0.94, 0.86], [0.06, 0.86]]), q([[0.1, 0.18], [0.9, 0.18], [0.5, 0.5]])];
+    case "receipt":
+      return [
+        q([[0.2, 0.06], [0.8, 0.06], [0.8, 0.26], [0.2, 0.26]]),
+        q([[0.2, 0.32], [0.8, 0.32], [0.8, 0.4], [0.2, 0.4]]),
+        q([[0.2, 0.46], [0.62, 0.46], [0.62, 0.54], [0.2, 0.54]]),
+        q([[0.2, 0.6], [0.8, 0.6], [0.8, 0.86], [0.7, 0.96], [0.6, 0.86], [0.5, 0.96], [0.4, 0.86], [0.3, 0.96], [0.2, 0.86]])
+      ];
+    case "tree":
+      return [q([[0.5, 0.04], [0.7, 0.34], [0.3, 0.34]]), q([[0.5, 0.22], [0.8, 0.6], [0.2, 0.6]]), q([[0.5, 0.44], [0.9, 0.84], [0.1, 0.84]]), q([[0.44, 0.86], [0.56, 0.86], [0.56, 0.97], [0.44, 0.97]])];
+    case "heart":
+      return [smooth([{ x: 0.5 * s, y: 0.3 * s }, { x: 0.7 * s, y: 0.14 * s }, { x: 0.92 * s, y: 0.32 * s }, { x: 0.78 * s, y: 0.62 * s }, { x: 0.5 * s, y: 0.9 * s }, { x: 0.22 * s, y: 0.62 * s }, { x: 0.08 * s, y: 0.32 * s }, { x: 0.3 * s, y: 0.14 * s }], 0.16)];
+  }
+}
+var AJAR = 0.2;
+function door(k, parent, d, o = {}) {
+  const { w, h, u, n } = d, paper = PAPERS[d.paper % PAPERS.length], rad = r3(8 * u);
+  const id = k.stack(parent, { width: w, height: h, name: `Door ${n}`, ...o.absolute ? { absolute: o.absolute } : {} });
+  const m = 16 * u;
+  k.rect(id, r3(w + 2 * m), r3(h + 2 * m), k.tint("glow", 0.5), { name: `Spill ${n}`, radius: r3(24 * u), opacity: d.open ? 1 : 0, absolute: { x: r3(-m), y: r3(-m) }, effects: [blurred(14 * u)] });
+  const niche = k.frame(id, { x: 0, y: 0, width: w, height: h }, { name: `Niche ${n}`, fill: "glow", clip: true, radius: rad });
+  k.rect(niche, w, r3(h * 0.5), [k.gradient({ from: "nicheDeep", to: "nicheDeep", angle: 90, fromOpacity: 0.75, toOpacity: 0 })], { name: "Niche lintel", absolute: { x: 0, y: 0 } });
+  k.rect(niche, r3(w * 0.42), h, [k.gradient({ from: "nicheDeep", to: "nicheDeep", angle: 0, fromOpacity: 0.7, toOpacity: 0 })], { name: "Niche jamb", absolute: { x: 0, y: 0 } });
+  const left = w * AJAR;
+  if (d.figure !== void 0 && d.styles.figure && d.styles.label) {
+    const gift = k.stack(niche, { width: r3(w - left - 8 * u), height: h, gap: r3(4 * u), align: "CENTER", justify: "CENTER", padding: { top: 0, right: r3(8 * u), bottom: 0, left: r3(8 * u) }, name: `Gift ${n}`, absolute: { x: r3(left + 4 * u), y: 0 } });
+    k.text(gift, d.figure, { style: d.styles.figure, color: "ink", align: "CENTER", name: `Figure ${n}` });
+    if (d.label) k.text(gift, d.label, { style: d.styles.label, color: "ink", align: "CENTER", name: `Label ${n}` });
+  } else {
+    const s = Math.min(w - left, h) * 0.56;
+    k.vector(niche, r3(s), r3(s), iconPaths(d.icon ?? "star", s), "ink", { name: `Gift ${n}`, absolute: { x: r3(left + (w - left - s) / 2), y: r3((h - s) / 2) } });
+  }
+  const flap = k.frame(niche, { x: 0, y: 0, width: w, height: h }, { name: `Flap ${n}`, fill: paper.paper, clip: true, radius: rad });
+  k.patch(flap, { anchorX: 0, anchorY: 0.5, ...d.open ? { scaleX: AJAR } : {} });
+  wrap(k, flap, paper, w, h, u);
+  const disc = Math.round(Math.min(w, h) * 0.4);
+  const label = k.stack(flap, { width: disc, height: disc, radius: 999, fill: paper.disc, align: "CENTER", justify: "CENTER", name: "Number disc", absolute: { x: r3((w - disc) / 2), y: r3((h - disc) / 2) }, effects: [cast(u * 0.4, 0.35)] });
+  k.text(label, String(n), { style: d.styles.num, color: paper.num, autoWidth: true, name: "Number" });
+  k.ellipse(flap, r3(9 * u), "gold", { name: "Knob", absolute: { x: r3(w - 20 * u), y: r3(h / 2 - 4.5 * u) } });
+  k.rect(flap, w, h, k.tint("shade", 1), { name: `Flap shade ${n}`, opacity: d.open ? 0.36 : 0, absolute: { x: 0, y: 0 } });
+  return id;
+}
+function openDoor(k, root, n, at, ms = 520) {
+  for (const id of k.named(root, `Flap ${n}`)) k.animate(id, "scaleX", [{ t: at, v: 1, ease: ease.out("expo") }, { t: at + ms, v: AJAR }]);
+  for (const id of k.named(root, `Flap shade ${n}`)) k.animate(id, "opacity", [{ t: at, v: 0, ease: ease.out("cubic") }, { t: at + ms, v: 0.36 }]);
+  for (const id of k.named(root, `Spill ${n}`)) k.animate(id, "opacity", [{ t: at, v: 0, ease: ease.out("cubic") }, { t: at + ms + 200, v: 1 }]);
+  for (const id of k.named(root, `Gift ${n}`)) for (const axis of ["scaleX", "scaleY"]) k.animate(id, axis, [{ t: at, v: 0.6, ease: ease.back(2.2) }, { t: at + ms + 160, v: 1 }]);
+}
+function closeDoor(k, root, n, at, ms = 360) {
+  for (const id of k.named(root, `Flap ${n}`)) k.animate(id, "scaleX", [{ t: at, v: AJAR, ease: ease.inOut("cubic") }, { t: at + ms, v: 1 }]);
+  for (const id of k.named(root, `Flap shade ${n}`)) k.animate(id, "opacity", [{ t: at, v: 0.36, ease: ease.inOut("cubic") }, { t: at + ms, v: 0 }]);
+  for (const id of k.named(root, `Spill ${n}`)) k.animate(id, "opacity", [{ t: at, v: 1, ease: ease.inOut("cubic") }, { t: at + ms, v: 0 }]);
+}
+var titleH = (c) => c.title ? 44 * c.u : 0;
+var calendarSize = (c) => {
+  const rows = Math.ceil(c.doors.length / c.cols);
+  return { w: r3(c.pad * 2 + c.cols * c.w + (c.cols - 1) * c.gap), h: r3(c.pad * 2 + titleH(c) + rows * c.h + (rows - 1) * c.gap) };
+};
+var PAPER_ORDER = [0, 3, 4, 1, 2, 6, 5, 7, 1, 5, 0, 3, 6, 2, 7, 4];
+var paperAt = (i, cols) => PAPER_ORDER[(i + (cols % 4 ? Math.floor(i / cols) : 0)) % PAPER_ORDER.length];
+function calendar(k, parent, c, o = {}) {
+  const { w, h } = calendarSize(c), u = c.u;
+  const id = k.stack(parent, { width: w, height: h, name: o.name ?? "Calendar", ...o.absolute ? { absolute: o.absolute } : {} });
+  const hm = 70 * u;
+  k.rect(id, r3(w + 2 * hm), r3(h + 2 * hm), k.tint("glow", 0.16), { name: "Halo", radius: r3(120 * u), absolute: { x: r3(-hm), y: r3(-hm) }, effects: [blurred(60 * u)] });
+  const board = k.frame(id, { x: 0, y: 0, width: w, height: h }, { name: "Board", fill: "board", radius: r3(18 * u), stroke: { color: "gold", width: r3(Math.max(1.5, 3 * u)), align: "INSIDE" }, effects: [cast(u * 1.4, 0.6)] });
+  if (c.title && c.styles.title) {
+    const head = k.stack(board, { direction: "HORIZONTAL", width: w, height: r3(c.pad + titleH(c)), gap: r3(14 * u), align: "CENTER", justify: "CENTER", padding: { top: r3(c.pad * 0.5), right: 0, bottom: 0, left: 0 }, name: "Board title", absolute: { x: 0, y: 0 } });
+    k.star(head, r3(16 * u), "gold", { name: "Title star" });
+    k.text(head, c.title, { style: c.styles.title, color: "gold", autoWidth: true, name: "Title" });
+    k.star(head, r3(16 * u), "gold", { name: "Title star" });
+  }
+  c.doors.forEach((d, i) => {
+    const col = i % c.cols, row = Math.floor(i / c.cols);
+    door(k, board, { ...d, w: c.w, h: c.h, u, paper: paperAt(i, c.cols), styles: c.styles, open: c.open?.includes(d.n) }, { absolute: { x: r3(c.pad + col * (c.w + c.gap)), y: r3(c.pad + titleH(c) + row * (c.h + c.gap)) } });
+  });
+  if (c.title) bow(k, id, { cx: r3(34 * u), cy: r3(20 * u), size: r3(64 * u) });
+  return id;
+}
+function bow(k, parent, o) {
+  const s = o.size, W = s * 2.4, H = s * 1.8, cx = W / 2, cy = s * 0.6;
+  const id = k.frame(parent, { x: r3(o.cx - cx), y: r3(o.cy - cy), width: r3(W), height: r3(H) }, { name: o.name ?? "Bow" });
+  const loop = (dir, f) => smooth([[0, 0], [0.34, -0.36], [0.84, -0.42], [1.02, -0.04], [0.8, 0.3], [0.34, 0.2]].map(([x, y]) => ({ x: cx + dir * (0.5 + (x - 0.5) * f) * s, y: cy + (-0.04 + (y + 0.04) * f) * s })), 0.22);
+  const tail = (dir) => poly3([{ x: cx + dir * 0.02 * s, y: cy }, { x: cx + dir * 0.46 * s, y: cy + 1 * s }, { x: cx + dir * 0.3 * s, y: cy + 0.86 * s }, { x: cx + dir * 0.16 * s, y: cy + 1.08 * s }, { x: cx - dir * 0.12 * s, y: cy + 0.1 * s }]);
+  k.vector(id, r3(W), r3(H), [tail(-1), tail(1)], o.deep ?? "cranberryDeep", { name: "Bow tails", absolute: { x: 0, y: 0 } });
+  k.vector(id, r3(W), r3(H), [loop(-1, 1), loop(1, 1)], o.role ?? "cranberry", { name: "Bow loops", absolute: { x: 0, y: 0 }, effects: [cast(s / 90, 0.4)] });
+  k.vector(id, r3(W), r3(H), [loop(-1, 0.5), loop(1, 0.5)], o.deep ?? "cranberryDeep", { name: "Bow folds", absolute: { x: 0, y: 0 } });
+  k.vector(id, r3(W), r3(H), [smooth([{ x: cx - 0.17 * s, y: cy - 0.16 * s }, { x: cx + 0.17 * s, y: cy - 0.16 * s }, { x: cx + 0.2 * s, y: cy + 0.18 * s }, { x: cx - 0.2 * s, y: cy + 0.18 * s }], 0.12)], o.role ?? "cranberry", { name: "Bow knot", absolute: { x: 0, y: 0 } });
+  return id;
+}
+var HILLS = [
+  { name: "Hill far", role: "snowDeep", lift: 96, amp: 30, waves: 1.3, phase: 0.6 },
+  { name: "Hill mid", role: "snowShade", lift: 44, amp: 34, waves: 0.9, phase: 2.4 },
+  { name: "Hill near", role: "snow", lift: 0, amp: 20, waves: 1.6, phase: 4.3 }
+];
+var crest = (g, i, x) => g.top - HILLS[i].lift * g.u + HILLS[i].amp * g.u * Math.sin(x / g.w * Math.PI * 2 * HILLS[i].waves + HILLS[i].phase);
+function hillParts(g) {
+  const hills2 = HILLS.map((hill, i) => {
+    const points = [{ x: 0, y: g.h + 2 }];
+    for (let j = 0; j <= 36; j++) {
+      const x = g.w * j / 36;
+      points.push({ x, y: Math.min(g.h + 2, crest(g, i, x)) });
+    }
+    points.push({ x: g.w, y: g.h + 2 });
+    return boxedPaths(hill.name, [{ closed: true, points }]);
+  });
+  const rand = rng(41), firs = [], caps = [];
+  const n = Math.max(3, Math.round(g.w / (120 * g.u)));
+  for (let i = 0; i < n; i++) {
+    const x = (i + 0.15 + rand() * 0.7) / n * g.w, s = (56 + rand() * 56) * g.u, base = crest(g, 0, x) + 10 * g.u;
+    if (g.firs && (x < g.firs[0] * g.w || x > g.firs[1] * g.w)) continue;
+    for (let t = 0; t < 3; t++) {
+      const top = base - s + t * s * 0.24, bottom = base - s * 0.62 + t * s * 0.28, half = s * (0.17 + t * 0.085);
+      firs.push({ closed: true, points: [{ x, y: top }, { x: x + half, y: bottom }, { x: x - half, y: bottom }] });
+      const ch = (bottom - top) * 0.42, chalf = half * 0.42;
+      caps.push({ closed: true, points: [{ x, y: top }, { x: x + chalf, y: top + ch }, { x: x + chalf * 0.4, y: top + ch * 0.8 }, { x, y: top + ch * 1.1 }, { x: x - chalf * 0.5, y: top + ch * 0.82 }, { x: x - chalf, y: top + ch }] });
+    }
+    firs.push({ closed: true, points: [{ x: x - s * 0.035, y: base - s * 0.1 }, { x: x + s * 0.035, y: base - s * 0.1 }, { x: x + s * 0.035, y: base }, { x: x - s * 0.035, y: base }] });
+  }
+  return [hills2[0], boxedPaths("Firs", firs), boxedPaths("Fir snow", caps), hills2[1], hills2[2]];
+}
+var HILL_INK = { "Hill far": { role: "snowDeep", opacity: 0.55 }, Firs: { role: "pine" }, "Fir snow": { role: "snow", opacity: 0.9 }, "Hill mid": { role: "snowShade" }, "Hill near": { role: "snow" } };
+function hills(k, parent, g) {
+  for (const p of hillParts(g)) k.vector(parent, p.w, p.h, p.paths, HILL_INK[p.name].role, { name: p.name, absolute: { x: p.x, y: p.y }, ...HILL_INK[p.name].opacity !== void 0 ? { opacity: HILL_INK[p.name].opacity } : {} });
+}
+function fitHills(k, root, g) {
+  for (const p of hillParts(g)) for (const id of k.named(root, p.name)) k.patch(id, { x: p.x, y: p.y, width: p.w, height: p.h, paths: p.paths });
+}
+var BULBS = ["gold", "cranberry", "ice", "cream", "gold", "blush"];
+function lights(k, parent, o) {
+  const u = o.u, span = o.w / o.swags, sag = 54 * u, per = 5;
+  const at = (s, f) => ({ x: s * span + f * span, y: o.y + sag * 4 * f * (1 - f) });
+  const wire = [];
+  for (let s = 0; s < o.swags; s++) wire.push(poly3(Array.from({ length: 17 }, (_, j) => {
+    const p = at(s, j / 16);
+    return { x: p.x, y: p.y - o.y };
+  }), false));
+  k.vector(parent, o.w, r3(sag), wire, "wire", { name: "Wire", strokeWidth: r3(Math.max(1.5, 3 * u)), absolute: { x: 0, y: r3(o.y) } });
+  let i = 0;
+  for (let s = 0; s < o.swags; s++) for (let j = 0; j < per; j++, i++) {
+    const p = at(s, (j + 0.5) / per), role = BULBS[i % BULBS.length], d = 20 * u;
+    k.rect(parent, r3(8 * u), r3(9 * u), "wire", { name: "Bulb cap", radius: r3(2 * u), absolute: { x: r3(p.x - 4 * u), y: r3(p.y - 1 * u) } });
+    const bulb = k.ellipse(parent, r3(d), role, { name: "Bulb", absolute: { x: r3(p.x - d / 2), y: r3(p.y + 6 * u) }, effects: [halo(k, role, 0.85, 22 * u, 3 * u)] });
+    if (o.loopMs) k.behave(bulb, "opacity", [{ kind: "sine", amp: 0.35, freq: hz(Math.max(2, Math.round(o.loopMs / 1300)), o.loopMs), phase: r3(i % 5 / 5) }, { kind: "clamp", min: 0.3, max: 1 }]);
+  }
+}
+function parcels(k, parent, o) {
+  const u = o.u, W = 430 * u, H = 330 * u;
+  const id = k.frame(parent, { x: r3(o.x), y: r3(o.base - H), width: r3(W), height: r3(H) }, { name: o.name ?? "Parcels" });
+  const one = (ux, uw, uh, paper, ribbon, tied) => {
+    const x = ux * u, w = uw * u, h = uh * u;
+    const p = PAPERS[paper], px = o.flip ? W - x - w : x, y = H - h;
+    const b = k.frame(id, { x: r3(px), y: r3(y), width: r3(w), height: r3(h) }, { name: "Parcel", fill: p.paper, clip: true, radius: r3(6 * u), effects: [cast(u, 0.35)] });
+    wrap(k, b, p, w, h, u * 1.15);
+    k.rect(b, r3(w), r3(h), [k.gradient({ from: "shade", to: "shade", angle: 0, fromOpacity: 0, toOpacity: 0.3 })], { name: "Parcel side", absolute: { x: 0, y: 0 } });
+    k.rect(b, r3(26 * u), r3(h), ribbon, { name: "Ribbon", absolute: { x: r3(w / 2 - 13 * u), y: 0 } });
+    k.rect(b, r3(w), r3(22 * u), k.tint("shade", 0.22), { name: "Lid shadow", absolute: { x: 0, y: r3(30 * u) } });
+    k.rect(id, r3(w + 16 * u), r3(34 * u), p.paper, { name: "Lid", radius: r3(6 * u), absolute: { x: r3(px - 8 * u), y: r3(y - 6 * u) }, effects: [cast(u * 0.5, 0.3)] });
+    k.rect(id, r3(26 * u), r3(34 * u), ribbon, { name: "Lid ribbon", absolute: { x: r3(px + w / 2 - 13 * u), y: r3(y - 6 * u) } });
+    if (tied) bow(k, id, { cx: r3(px + w / 2), cy: r3(y - 12 * u), size: r3(52 * u), role: ribbon, deep: ribbon === "gold" ? "goldDeep" : "cranberryDeep", name: "Parcel bow" });
+  };
+  one(150, 200, 250, 2, "gold", true);
+  one(0, 190, 150, 0, "cream", false);
+  one(270, 160, 120, 4, "cranberry", true);
+  return id;
+}
+function giftTag(k, parent, o) {
+  const u = o.u, w = o.w;
+  const id = k.stack(parent, { width: w, gap: r3(8 * u), padding: { top: r3(74 * u), right: r3(34 * u), bottom: r3(34 * u), left: r3(34 * u) }, fill: "tag", radius: r3(16 * u), name: "Gift tag", effects: [cast(u, 0.45)], ...o.absolute ? { absolute: o.absolute } : {} });
+  k.vector(id, r3(120 * u), r3(150 * u), [{ closed: false, points: [{ ...pt3(60 * u, 150 * u), handleOut: pt3(40 * u, 90 * u) }, { ...pt3(96 * u, 40 * u), handleIn: pt3(110 * u, 80 * u), handleOut: pt3(84 * u, 10 * u) }, { ...pt3(30 * u, 0), handleIn: pt3(60 * u, 4 * u) }] }], "cranberry", { name: "Tag string", strokeWidth: r3(Math.max(2, 4 * u)), absolute: { x: r3(w / 2 - 60 * u), y: r3(-118 * u) } });
+  k.ellipse(id, r3(34 * u), "gold", { name: "Eyelet", absolute: { x: r3(w / 2 - 17 * u), y: r3(18 * u) } });
+  k.ellipse(id, r3(16 * u), "board", { name: "Eyelet hole", absolute: { x: r3(w / 2 - 8 * u), y: r3(27 * u) } });
+  k.text(id, "To", { style: o.styles.label, color: "tagSoft", name: "Tag label" });
+  k.text(id, o.to, { style: o.styles.name, color: "tagInk", name: "Tag to" });
+  k.rect(id, "FILL", r3(Math.max(1, 2 * u)), "tagSoft", { name: "Tag rule", opacity: 0.4 });
+  k.text(id, "From", { style: o.styles.label, color: "tagSoft", name: "Tag label" });
+  k.text(id, o.from, { style: o.styles.name, color: "tagInk", name: "Tag from" });
+  k.rect(id, "FILL", r3(Math.max(1, 2 * u)), "tagSoft", { name: "Tag rule", opacity: 0.4 });
+  k.text(id, o.note, { style: o.styles.note, color: "tagInk", name: "Tag note" });
+  return id;
+}
+
+export {
+  holidayBrand,
+  door,
+  openDoor,
+  closeDoor,
+  calendarSize,
+  calendar,
+  bow,
+  hills,
+  fitHills,
+  lights,
+  parcels,
+  giftTag
+};

package/dist/chunks/chunk-LPUHGAAF.js

@@ -0,0 +1,172 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  brand,
+  caption,
+  captionCues,
+  captionParts,
+  column,
+  glow,
+  rig,
+  sizes,
+  stage,
+  typeStep
+} from "./chunk-MTEXY7UL.js";
+import {
+  key
+} from "./chunk-OTE5FUDA.js";
+import {
+  PHONE,
+  deviceShadow
+} from "./chunk-IGV5QPFA.js";
+import {
+  HOME_PARTS,
+  PHONE_SCREEN,
+  appScreens,
+  homePart
+} from "./chunk-MZVIWZ2V.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  ease
+} from "./chunk-AY2VBUGS.js";
+import {
+  contextFrame,
+  init_scene3d,
+  sceneLayers
+} from "./chunk-NMFXCSU4.js";
+import {
+  init_transform3d,
+  mul4,
+  transform4
+} from "./chunk-CK43FENV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion3d/exploded-ui.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene3d();
+init_transform3d();
+var DURATION = 8e3;
+var FPS = 30;
+var SIZES = ["video-square", "video-1080p"];
+var BEZEL = (PHONE.width - PHONE_SCREEN.width) / 2;
+var LIFT = 70;
+var PLATE = 10;
+var OPEN = 900;
+var OPENED = 2300;
+var CLOSE = 6300;
+var CLOSED = 7500;
+var LABELS = { Greeting: "Personal greeting", Balance: "Live balance", Shortcuts: "One-tap shortcuts", Activity: "Every transaction", "Tab bar": "Four tabs, that\u2019s all" };
+var CAPTION = { name: "Caption", kicker: "Inside Fern", title: "Everything you need. Nothing you don\u2019t.", body: "Your balance, shortcuts, activity and navigation \u2014 each one tap away." };
+var CUES = [
+  ...captionCues(CAPTION, 300),
+  { layer: "Caption", preset: "fade-out", at: CLOSED, params: { duration: 400 } }
+];
+function build(k, sheet, s) {
+  k.nameSheet(sheet, `Exploded UI \xB7 ${preset(s.preset).name}`);
+  glow(k, sheet, "primary", Math.round(1100 * s.u), s.wide ? s.W * 0.66 : s.W / 2, s.wide ? s.H * 0.55 : s.H * 0.64, 0.5);
+  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 3200 * s.u });
+  const iso = rig(k, scene, s, "Isometric", PHONE.width, PHONE.height, s.wide ? s.W * 0.7 : s.W * 0.61, s.wide ? s.H * 0.62 : s.H * 0.8);
+  const zoom = s.wide ? 0.8 : 0.54;
+  k.patch(iso, { rotateX: 58, scaleX: zoom, scaleY: zoom });
+  const turn = k.group(iso, { x: 0, y: 0, width: PHONE.width, height: PHONE.height }, { name: "Turn" });
+  k.patch(turn, { rotation: -42 });
+  const home = k.finish().nodes[k.componentIdOf("Screen / Home")];
+  const place = (name) => {
+    const n = Object.values(k.doc.nodes).find((x) => x.parentId === home.id && x.name === name);
+    return { x: BEZEL + n.x, y: BEZEL + n.y };
+  };
+  const layers = [];
+  layers.push({ id: k.rect(turn, PHONE.width, PHONE.height, "device", { radius: PHONE.radius, name: "Phone", stroke: { color: "deviceEdge", width: 3, align: "INSIDE" } }) });
+  const glass = k.rect(turn, PHONE_SCREEN.width, PHONE_SCREEN.height, "screen", { radius: PHONE_SCREEN.radius, name: "Screen" });
+  k.patch(glass, { x: BEZEL, y: BEZEL });
+  layers.push({ id: glass });
+  for (const part of HOME_PARTS) {
+    const card = k.stack(turn, { width: PHONE_SCREEN.width - 48 + 2 * PLATE, fill: "screen", radius: 18, padding: PLATE, name: `${part} layer`, effects: [deviceShadow(0.18, 12, 30)] });
+    homePart(k, card, part);
+    const at = place(part);
+    k.patch(card, { x: at.x - PLATE, y: at.y - PLATE });
+    layers.push({ id: card, label: LABELS[part] });
+  }
+  const tabs = k.instance(turn, "Tab bar/Home", {}, { name: "Tab bar" });
+  k.patch(tabs, { x: BEZEL, y: BEZEL + PHONE_SCREEN.height - 84 });
+  layers.push({ id: tabs, label: LABELS["Tab bar"] });
+  const RANK = [0, 1, 7, 6, 5, 4, 3, 2];
+  layers.forEach(({ id }, i) => {
+    const z = RANK[i] * LIFT, d = RANK[i] * 60;
+    k.patch(id, { z });
+    key(k, id, "z", [[OPEN + d, 0, ease.back(1.4)], [OPENED + d, z, ease.hold], [CLOSE - d, z, ease.inOut("cubic")], [CLOSED - d, 0]]);
+  });
+  const doc = k.finish();
+  const frame = contextFrame(doc.nodes[scene]);
+  const cards = sceneLayers(doc.nodes, scene);
+  const seen = (id, x, y) => {
+    const c = cards.find((l) => l.id === id);
+    const p = transform4(mul4(frame.projection, mul4(frame.view, c.model)), x, y, 0);
+    return { x: p[0] / p[3], y: p[1] / p[3] };
+  };
+  const phone = layers[0].id;
+  const left = Math.min(...[[0, 0], [PHONE.width, 0], [0, PHONE.height], [PHONE.width, PHONE.height]].map(([x, y]) => seen(phone, x, y).x));
+  const labelStyle = typeStep(k, s, "label");
+  const gap = Math.round(14 * s.u);
+  layers.forEach(({ id, label }, i) => {
+    if (!label) return;
+    const n = k.node(id);
+    const at = seen(id, 0, Math.min(n.height, 90) / 2);
+    const edge = Math.min(left, at.x) - Math.round(40 * s.u);
+    const tag = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap, align: "CENTER", name: `${label} label` });
+    k.text(tag, label, { style: labelStyle, color: "text", autoWidth: true, name: "Label" });
+    k.rect(tag, Math.max(Math.round(24 * s.u), Math.round(at.x - edge - gap)), 3, "accent", { radius: 2, name: "Rule" });
+    const box = k.finish().nodes[tag];
+    const text = k.node(k.node(tag).childIds[0]);
+    k.patch(tag, { layoutPositioning: "ABSOLUTE", x: Math.round(edge - text.width), y: Math.round(at.y - box.height / 2) });
+    const d = RANK[i] * 60;
+    key(k, tag, "opacity", [[OPENED + d - 200, 0, ease.out("cubic")], [OPENED + d + 200, 1, ease.hold], [CLOSE - d - 300, 1, ease.out("cubic")], [CLOSE - d, 0]]);
+    key(k, tag, "translateX", [[OPENED + d - 200, Math.round(-30 * s.u), ease.out("cubic")], [OPENED + d + 200, 0]]);
+  });
+  const col = column(s, s.wide ? 120 : 90);
+  captionParts(k, s, { kicker: CAPTION.kicker });
+  const width = s.wide ? Math.round(460 * s.u) : col.width;
+  const block = caption(k, sheet, s, { ...CAPTION, step: "subtitle", width, align: s.wide ? "LEFT" : "CENTER", at: { x: s.wide ? Math.round(130 * s.u) : col.x, y: 0 } });
+  const laid = k.finish().nodes[block];
+  k.patch(block, { y: Math.round(s.wide ? (s.H - laid.height) / 2 - 40 * s.u : 70 * s.u) });
+  k.cues(sheet, CUES);
+}
+var exploded_ui_default = defineTemplate({
+  id: "motion-3d-exploded-ui",
+  meta: {
+    name: "Exploded UI",
+    description: "An app screen seen from above in isometric 3D comes apart into its layers \u2014 screen, greeting, balance, shortcuts, activity, tab bar \u2014 each labelled, then snaps back together. An 8-second loop, square and 16:9 at 30 fps; the layers are your screen's own components",
+    category: "animation",
+    tags: ["animation", "3d", "app", "isometric", "exploded", "layers", "ui", "features", "case study"],
+    platforms: ["instagram", "linkedin", "x", "youtube", "web"],
+    formats: ["post", "video", "ad"],
+    useCases: ["launch", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Exploded UI", preset(SIZES[0]));
+    brand(k, "dark");
+    appScreens(k, ["Home"]);
+    const [cover] = sizes(k, SIZES, (sheet, s) => build(k, sheet, s));
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  exploded_ui_default
+};

package/dist/chunks/chunk-LQWU2X4X.js

@@ -0,0 +1,79 @@
+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 {
+  restyleAll,
+  storyCut,
+  titleSafe
+} from "./chunk-ZQ3NVLO2.js";
+import {
+  logoBadge,
+  outro,
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/kinetic/words.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var cues = [
+  { layer: "Logo", preset: "pop-in", at: 100 },
+  { layer: "Line", preset: "words-in", at: 350, params: { duration: 650, amount: 110 } },
+  { layer: "Where", preset: "rise-in", at: 1500 },
+  { layer: "Join", preset: "pop-in", at: 1850 },
+  { layer: "Join", preset: "pulse", at: 3e3, params: { amount: 0.05 } },
+  { layer: "Line", preset: "words-out", at: 5200, params: { duration: 450, amount: 60 } },
+  outro(["Logo", "Where", "Join"], 5500)
+];
+var words_default = defineTemplate({
+  id: "motion-kinetic-words",
+  meta: {
+    name: "Word-by-word line",
+    description: "A running club\u2019s invitation said one word at a time, the meeting point rising under it and a join button popping \u2014 7 seconds, 16:9 with a 9:16 story cut",
+    category: "animation",
+    tags: ["animation", "kinetic type", "words", "community", "running", "club", "invitation"],
+    platforms: ["instagram", "youtube", "facebook", "linkedin"],
+    formats: ["video", "story", "reel", "post"],
+    useCases: ["invitation", "event", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Word-by-word line", preset("video-1080p"));
+    k.brand(
+      { paper: "#FFE8D6", text: "#1F1B16", onPaper: "#6B4F3F", primary: "#1F1B16", onPrimary: "#FFE8D6", card: "#E4572E" },
+      { where: "Sundays at 8 \xB7 from the bandstand in Victoria Park" }
+    );
+    k.textStyle("Line 150", { size: 150, fontWeight: 900, letterSpacing: -5, lineHeight: 150, textAlign: "CENTER" });
+    k.textStyle("Line 112", { size: 112, fontWeight: 900, letterSpacing: -3, lineHeight: 116, textAlign: "CENTER" });
+    k.textStyle("Where 44", { size: 44, fontWeight: 600, lineHeight: 56, textAlign: "CENTER" });
+    k.textStyle("Button 38", { size: 38, fontWeight: 800, lineHeight: 46 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 38", label: "Run with us", pad: [22, 52] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 40, titleSafe(), "paper", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 7e3, fps: 30 });
+    logoBadge(k, sheet, { fill: "card", size: 72, name: "Logo" });
+    k.text(sheet, "Nobody runs alone on Sunday mornings.", { style: "Line 150", color: "text", name: "Line" });
+    k.text(sheet, "{{brand.where}}", { style: "Where 44", color: "onPaper", name: "Where" });
+    k.instance(sheet, "Button", { Label: "Run with us" }, { name: "Join" });
+    k.cues(sheet, cues);
+    k.variants(sheet, storyCut((kit, id) => restyleAll(kit, id, ["Line"], "Line 112")));
+    return k.finish();
+  }
+});
+
+export {
+  words_default
+};