@popcraft/kit 0.29.0 → 0.30.0

package/dist/chunks/chunk-UKZAWO4R.js

@@ -0,0 +1,464 @@
+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 {
+  burstPath
+} from "./chunk-UDE42EDS.js";
+import {
+  board
+} from "./chunk-YHBAWSDX.js";
+import {
+  RADIAL,
+  shadow
+} from "./chunk-M6VTXO6F.js";
+import {
+  line,
+  pt3,
+  r3,
+  rng
+} from "./chunk-6RCDZU4R.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/black-friday-scratch-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var OFFER = {
+  product: "Mintline",
+  pitch: "Invoices that chase themselves: send, remind and get paid without the awkward emails.",
+  site: "mintline.example",
+  link: "{{brand.site}}/scratch",
+  code: "SCRATCH50",
+  off: 50,
+  serial: "No. 2711-3011-0050",
+  starts: "Fri 27 Nov",
+  ends: "Mon 30 Nov, 23:59 PT",
+  /** The countdown as the pieces show it: what is left when the piece goes out. */
+  days: 2,
+  hours: 9,
+  minutes: 41,
+  seconds: 59
+};
+var PLANS = [
+  { id: "Solo", label: "SOLO", was: 144, now: 72, line: "1 seat, unlimited invoices" },
+  { id: "Studio", label: "STUDIO", was: 348, now: 174, line: "5 seats, recurring billing" },
+  { id: "Agency", label: "AGENCY", was: 708, now: 354, line: "20 seats, approvals, multi-currency" }
+];
+var two = (n) => String(n).padStart(2, "0");
+var COLORS = {
+  paper: "#26090F",
+  text: "#F6E9C6",
+  onPaper: "#D6C2A6",
+  primary: "#E3B341",
+  onPrimary: "#1C1403",
+  accent: "#D3222D",
+  onAccent: "#FFF4DA",
+  card: "#0D4A35",
+  onCard: "#F6E9C6",
+  cardMuted: "#A9C4B0"
+};
+function scratchBrand(k, fields, roles = Object.keys(COLORS)) {
+  k.brand(Object.fromEntries(roles.map((r) => [r, COLORS[r]])), fields);
+  k.palette({
+    foil: "#F0C860",
+    foilDeep: "#9A6F17",
+    foilLight: "#FFEDB0",
+    latex: "#B7BDC4",
+    latexDark: "#8B929A",
+    latexLight: "#E4E7EB",
+    stock: "#F8F0DA",
+    stockInk: "#15120A",
+    stockMuted: "#6A5F45",
+    cardLine: "#1E7556",
+    cardDeep: "#083425",
+    felt: "#5C1A28",
+    shade: "#050302"
+  });
+}
+var R = Math.round;
+var SPAN = 2400;
+function guillochePaths(w, h, lines = 6, wave = 96) {
+  const out = [];
+  const step = Math.max(4, wave / 14);
+  for (let i = 0; i < lines; i++) {
+    const phase = i / lines * Math.PI * 2;
+    const points = [];
+    for (let x = 0; x <= w + step; x += step) {
+      const swell = 0.62 + 0.38 * Math.cos(x / (wave * 3.5) * Math.PI * 2 + phase * 0.5);
+      points.push(pt3(x, h / 2 + (h / 2 - 1) * swell * Math.sin(x / wave * Math.PI * 2 + phase)));
+    }
+    out.push({ closed: false, points });
+  }
+  return out;
+}
+function rosettePaths(size, petals = 12, loops = 4, depth = 0.34) {
+  const c = size / 2, n = petals * 12;
+  return Array.from({ length: loops }, (_, j) => ({
+    closed: true,
+    points: Array.from({ length: n }, (_2, i) => {
+      const a = i / n * Math.PI * 2;
+      const r = (c - 1) * (1 - depth + depth * Math.cos(petals * a + j / loops * Math.PI * 2)) * (1 - j * 0.07);
+      return pt3(c + r * Math.cos(a), c + r * Math.sin(a));
+    })
+  }));
+}
+function guilloche(k, parent, h, role, o = {}) {
+  const strip = k.stack(parent, { direction: "HORIZONTAL", height: h, clip: true, name: o.name ?? "Guilloche" });
+  k.vector(strip, SPAN, h, guillochePaths(SPAN, h, o.lines ?? 6, o.wave ?? h * 3.2), [], { name: "Guilloche lines", opacity: o.opacity ?? 1, stroke: { color: role, width: o.weight ?? 1.25, cap: "NONE" } });
+  return strip;
+}
+function microprint(k, parent, role, o = {}) {
+  const rows = o.rows ?? 2, weight = o.weight ?? 2, h = rows * weight * 2 - weight;
+  const strip = k.stack(parent, { direction: "HORIZONTAL", height: h, clip: true, name: o.name ?? "Microprint" });
+  const r = rng(27);
+  const paths = [];
+  for (let row = 0; row < rows; row++) {
+    const y = row * weight * 2 + weight / 2;
+    for (let x = row * 3; x < SPAN; ) {
+      const len = weight * (1 + Math.floor(r() * 4));
+      paths.push(line(x, y, x + len, y));
+      x += len + weight * (r() < 0.2 ? 2.4 : 1);
+    }
+  }
+  k.vector(strip, SPAN, h, paths, [], { name: "Microprint lines", opacity: o.opacity ?? 1, stroke: { color: role, width: weight, cap: "NONE" } });
+  return strip;
+}
+function rosette(k, parent, size, role, o) {
+  return k.vector(parent, size, size, rosettePaths(size, o.petals, o.loops), [], { name: o.name ?? "Rosette", absolute: o.absolute, opacity: o.opacity ?? 1, stroke: { color: role, width: o.weight ?? 1.25 } });
+}
+function latticePaths(w, h, step) {
+  const out = [];
+  for (let x = -h; x < w; x += step) {
+    out.push(line(x, 0, x + h, h));
+    out.push(line(x + h, 0, x, h));
+  }
+  return out;
+}
+function pool(k, parent, name, x, y, d, role, alpha) {
+  return k.ellipse(parent, d, [k.gradient({ from: role, to: role, kind: "RADIAL", fromOpacity: alpha, toOpacity: 0, handles: RADIAL })], { name, absolute: { x: x - d / 2, y: y - d / 2 } });
+}
+function table(k, sheet, w, h, o = {}) {
+  k.vector(sheet, w, h, latticePaths(w, h, o.step ?? 72), [], { name: "Baize", absolute: { x: 0, y: 0 }, opacity: 0.5, stroke: { color: "felt", width: 2, cap: "NONE" } });
+  const d = Math.max(w, h) * 1.15;
+  pool(k, sheet, "Lamp", w * (o.fx ?? 0.5), h * (o.fy ?? 0.45), d, "foil", 0.26);
+  k.vector(sheet, w, h, crumbPaths(w, h, o.crumbs ?? 46, 61, Math.max(w, h) / 2200), [], { name: "Table crumbs", absolute: { x: 0, y: 0 }, opacity: 0.6, stroke: { color: "latex", width: Math.max(3, Math.max(w, h) / 360) } });
+}
+function fitTable(k, root, o = {}) {
+  const { width: w, height: h } = k.node(root);
+  for (const id of k.named(root, "Baize")) k.patch(id, { x: 0, y: 0, width: w, height: h, paths: latticePaths(w, h, o.step ?? 72) });
+  const d = Math.max(w, h) * 1.15;
+  for (const id of k.named(root, "Lamp")) k.patch(id, { x: w * (o.fx ?? 0.5) - d / 2, y: h * (o.fy ?? 0.45) - d / 2, width: d, height: d });
+  for (const id of k.named(root, "Table crumbs")) k.patch(id, { x: 0, y: 0, width: w, height: h, paths: crumbPaths(w, h, o.crumbs ?? 46, 61, Math.max(w, h) / 2200) });
+}
+function crumbPaths(w, h, n, seed, scale = 1) {
+  const r = rng(seed);
+  return Array.from({ length: n }, () => flake(r() * w, r() * h, (5 + r() * 11) * scale, r));
+}
+function flake(cx, cy, s, r) {
+  const n = 4 + Math.floor(r() * 3), a0 = r() * Math.PI * 2, squash = 0.45 + r() * 0.5;
+  return { closed: true, points: Array.from({ length: n }, (_, i) => {
+    const a = a0 + i / n * Math.PI * 2, d = s / 2 * (0.6 + r() * 0.4);
+    return pt3(cx + d * Math.cos(a), cy + d * squash * Math.sin(a));
+  }) };
+}
+function coin(k, parent, size, o) {
+  const frame = k.frame(parent, { x: o.absolute.x, y: o.absolute.y, width: size, height: size }, { name: o.name ?? "Coin", ...o.opacity !== void 0 ? { opacity: o.opacity } : {} });
+  const face = (name, visible, mark) => {
+    const f = k.frame(frame, { x: 0, y: 0, width: size, height: size }, { name, ...visible ? {} : { opacity: 0 } });
+    k.ellipse(f, size, "foil", { name: "Coin metal", absolute: { x: 0, y: 0 }, stroke: { color: "foilDeep", width: Math.max(1.5, size * 0.045), align: "INSIDE" }, effects: [shadow(k, "shade", 0.5, R(size * 0.07), R(size * 0.16))] });
+    k.ellipse(f, size, [k.gradient({ from: "foilLight", to: "foilDeep", angle: 60, fromOpacity: 0.85, toOpacity: 0.3 })], { name: "Coin light", absolute: { x: 0, y: 0 }, opacity: 0.7 });
+    const ring = size * 0.74;
+    k.ellipse(f, ring, [], { name: "Coin milling", absolute: { x: (size - ring) / 2, y: (size - ring) / 2 }, stroke: { color: "foilDeep", width: Math.max(1.5, size * 0.035), dash: [Math.max(1.5, size * 0.03), Math.max(1.5, size * 0.03)], cap: "NONE" } });
+    mark(f);
+    return f;
+  };
+  const heads = face("Coin head", true, (f) => {
+    const s = size * 0.44;
+    k.star(f, s, "foilDeep", { name: "Coin star", absolute: { x: (size - s) / 2, y: (size - s) / 2 } });
+  });
+  const tails = face("Coin tail", false, (f) => {
+    const s = size * 0.4, x = (size - s) / 2, r = s * 0.17;
+    const ringAt = (cx, cy) => ({ closed: true, points: Array.from({ length: 10 }, (_, i) => pt3(cx + r * Math.cos(i / 10 * Math.PI * 2), cy + r * Math.sin(i / 10 * Math.PI * 2))) });
+    k.vector(f, s, s, [ringAt(r + 1, r + 1), ringAt(s - r - 1, s - r - 1), line(s * 0.86, s * 0.06, s * 0.14, s * 0.94)], [], { name: "Coin per cent", absolute: { x, y: x }, stroke: { color: "foilDeep", width: Math.max(2, size * 0.055) } });
+  });
+  return { frame, heads, tails, size };
+}
+function flip(k, c, at, o = {}) {
+  const half = o.half ?? 160, halves = (o.turns ?? 1) * 2;
+  const spin = [];
+  const head = [{ t: 0, v: 1, ease: ease.hold }];
+  const tail = [{ t: 0, v: 0, ease: ease.hold }];
+  for (let i = 0; i <= halves; i++) {
+    const t = at + i * half;
+    spin.push({ t, v: 1, ...i < halves ? { ease: ease.named("sine", "in") } : {} });
+    if (i < halves) {
+      spin.push({ t: t + half / 2, v: 0.04, ease: ease.out("sine") });
+      head.push({ t: t + half / 2, v: i % 2 ? 1 : 0, ease: ease.hold });
+      tail.push({ t: t + half / 2, v: i % 2 ? 0 : 1, ease: ease.hold });
+    }
+  }
+  k.animate(c.frame, "scaleX", spin);
+  k.animate(c.heads, "opacity", head);
+  k.animate(c.tails, "opacity", tail);
+}
+function zigzag(w, h, n) {
+  const dx = w / n, weight = r3(dx * 2.3), over = weight * 0.2;
+  return { weight, verts: Array.from({ length: n + 1 }, (_, i) => pt3(i * dx, i % 2 ? h + over : -over)) };
+}
+function panel(k, parent, o) {
+  const { w, h } = o, radius = o.radius ?? R(h * 0.08);
+  const b = board(k, parent, w, h, o.scale ?? 1, o.name, o.absolute ? { absolute: o.absolute } : {});
+  const window = k.stack(b, { width: w, height: h, fill: "stock", radius, clip: true, align: "CENTER", justify: "CENTER", gap: o.gap ?? 0, padding: o.pad ?? 0, absolute: { x: 0, y: 0 }, name: `${o.name} paper` });
+  const rs = h * 1.5;
+  rosette(k, window, rs, "latex", { absolute: { x: (w - rs) / 2, y: (h - rs) / 2 }, petals: 10, loops: 3, opacity: 0.55, weight: Math.max(1, h / 160), name: "Paper rosette" });
+  o.build(window);
+  const z = zigzag(w, h, o.strokes ?? 10);
+  const path = { closed: false, points: z.verts };
+  const shifted = (dx) => ({ closed: false, points: z.verts.map((p) => pt3(p.x + dx, p.y)) });
+  const q = z.weight / 6;
+  const latex = [
+    k.vector(window, w, h, [path], [], { name: `${o.name} latex`, absolute: { x: 0, y: 0 }, opacity: 0, stroke: { color: "latex", width: z.weight, join: "ROUND", cap: "ROUND" } }),
+    k.vector(window, w, h, [shifted(-q * 2), shifted(0), shifted(q * 2)], [], { name: `${o.name} latex print`, absolute: { x: 0, y: 0 }, opacity: 0, stroke: { color: "latexDark", width: Math.max(1.5, h / 90), dash: [R(h / 22) || 2, R(h / 14) || 3], cap: "NONE" } }),
+    k.vector(window, w, h, [shifted(-q), shifted(q)], [], { name: `${o.name} latex gleam`, absolute: { x: 0, y: 0 }, opacity: 0, stroke: { color: "latexLight", width: Math.max(1.5, h / 70), dash: [R(h / 7) || 4, R(h / 5) || 6], cap: "NONE" } })
+  ];
+  const r = rng(o.seed ?? 5);
+  const shreds = [];
+  const many = Math.max(8, R(w / 26));
+  for (let i = 0; i < many; i++) {
+    const top = i % 2 === 0, x = r() * w, s = h * (0.035 + r() * 0.06);
+    shreds.push(flake(x, top ? s * 0.25 : h - s * 0.25, s * 2.2, r));
+  }
+  k.vector(window, w, h, shreds, "latex", { name: `${o.name} shreds`, absolute: { x: 0, y: 0 } });
+  k.rect(b, w, h, [], { name: `${o.name} rim`, radius, absolute: { x: 0, y: 0 }, stroke: { color: "foil", width: Math.max(2, R(h * 0.022)), align: "INSIDE" } });
+  const n = o.crumbs ?? 10;
+  const crumbs = Array.from({ length: n }, (_, j) => {
+    const at = along(z.verts, (j + 0.6) / n), s = h * (0.05 + r() * 0.06);
+    const y = Math.min(h - s, Math.max(0, at.y)) + (r() - 0.5) * h * 0.2;
+    return k.vector(b, s, s, [flake(s / 2, s / 2, s, r)], j % 3 ? "latex" : "latexDark", { name: `${o.name} crumb`, absolute: { x: at.x - s / 2, y: y - s / 2 }, opacity: 0 });
+  });
+  return { board: b, window, latex, crumbs, verts: z.verts, w, h };
+}
+function along(verts, f) {
+  const lens = verts.slice(1).map((p, i) => Math.hypot(p.x - verts[i].x, p.y - verts[i].y));
+  let d = Math.min(1, Math.max(0, f)) * lens.reduce((a, b) => a + b, 0);
+  for (let i = 0; i < lens.length; i++) {
+    if (d <= lens[i] || i === lens.length - 1) {
+      const t = lens[i] ? d / lens[i] : 0;
+      return { x: verts[i].x + (verts[i + 1].x - verts[i].x) * t, y: verts[i].y + (verts[i + 1].y - verts[i].y) * t };
+    }
+    d -= lens[i];
+  }
+  return verts[verts.length - 1];
+}
+function scratch(k, p, o) {
+  const { at, duration } = o, end = at + duration;
+  for (const id of p.latex) {
+    k.animate(id, "opacity", [{ t: 0, v: 1, ease: ease.hold }, { t: end, v: 0 }]);
+    k.animate(id, "trim.start", [{ t: 0, v: 0, ease: ease.hold }, { t: at, v: 0, ease: ease.linear }, { t: end, v: 1 }]);
+  }
+  const r = rng(o.seed ?? 17);
+  p.crumbs.forEach((id, j) => {
+    const t = R(at + duration * (j + 0.6) / p.crumbs.length), life = 520 + R(r() * 260);
+    const fall = R(p.h * (0.7 + r() * 0.7)), drift = R((r() - 0.3) * p.h * 0.5), turn = R((r() - 0.5) * 420);
+    k.animate(id, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t, v: 1, ease: ease.hold }, { t: t + R(life * 0.6), v: 1, ease: ease.linear }, { t: t + life, v: 0 }]);
+    k.animate(id, "translateY", [{ t, v: 0, ease: ease.named("quad", "in") }, { t: t + life, v: fall }]);
+    k.animate(id, "translateX", [{ t, v: 0, ease: ease.out("quad") }, { t: t + life, v: drift }]);
+    k.animate(id, "rotation", [{ t, v: 0, ease: ease.linear }, { t: t + life, v: turn }]);
+  });
+  if (!o.coin) return;
+  const c = o.coin, n = k.node(c.frame);
+  const n0 = p.verts.length - 1;
+  const dx = (v) => r3(v.x - c.size / 2 - n.x), dy = (v) => r3(Math.min(p.h, Math.max(0, v.y)) - c.size / 2 - n.y);
+  const xs = [{ t: 0, v: dx(p.verts[0]), ease: ease.hold }];
+  const ys = [{ t: 0, v: dy(p.verts[0]), ease: ease.hold }];
+  p.verts.forEach((v, i) => {
+    const t = R(at + duration * i / n0);
+    xs.push({ t, v: dx(v), ease: i < n0 ? ease.linear : ease.out("cubic") });
+    ys.push({ t, v: dy(v), ease: i < n0 ? ease.inOut("sine") : ease.out("cubic") });
+  });
+  xs.push({ t: end + 360, v: 0 });
+  ys.push({ t: end + 360, v: 0 });
+  k.animate(c.frame, "translateX", xs);
+  k.animate(c.frame, "translateY", ys);
+  if (o.show) k.animate(c.frame, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: Math.max(0, at - 120), v: 1, ease: ease.hold }, { t: end + 80, v: 1, ease: ease.linear }, { t: end + 300, v: 0 }]);
+}
+function ticket(k, parent, o) {
+  const u = o.u ?? 1;
+  const gloss = k.gradient({ from: "cardLine", to: "cardDeep", angle: 62, fromOpacity: 0.32, toOpacity: 0.45 });
+  const t = k.stack(parent, { width: o.width ?? "FILL", fill: [...k.paint("card"), gloss], radius: R(30 * u), clip: true, padding: R(11 * u), name: o.name ?? "Ticket", effects: [shadow(k, "shade", 0.55, R(22 * u), R(56 * u)), shadow(k, "shade", 0.4, R(3 * u), R(6 * u))], ...o.absolute ? { absolute: o.absolute } : {} });
+  const body = k.stack(t, { radius: R(20 * u), gap: o.gap, padding: o.pad, align: o.align ?? "CENTER", stroke: { color: "foil", width: Math.max(1.5, 3 * u), align: "INSIDE" }, name: "Ticket body" });
+  return { ticket: t, body };
+}
+function shine(k, t, o = {}) {
+  const bw = o.width ?? 150, lean = SPAN * 0.32;
+  const clear = k.color("foilLight", 0), lit = k.color("foilLight", 0.5);
+  const paint = { type: "GRADIENT_LINEAR", gradientStops: [{ position: 0.28, color: clear }, { position: 0.5, color: lit }, { position: 0.72, color: clear }], gradientHandlePositions: [{ x: 0, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0, y: 1 }], opacity: 1, visible: true };
+  return k.vector(t, bw + lean, SPAN, [{ closed: true, points: [pt3(lean, 0), pt3(lean + bw, 0), pt3(bw, SPAN), pt3(0, SPAN)] }], [paint], { name: o.name ?? "Shine", absolute: { x: -(bw + lean) - 40, y: -SPAN * 0.3 } });
+}
+function sweep(k, id, at, distance, duration = 900) {
+  const far = distance + k.node(id).width + 80;
+  k.animate(id, "translateX", [{ t: 0, v: 0, ease: ease.hold }, { t: at, v: 0, ease: ease.inOut("sine") }, { t: at + duration, v: far, ease: ease.hold }, { t: at + duration + 34, v: 0 }]);
+}
+function ticketHead(k, body, o) {
+  const head = k.stack(body, { gap: o.gap ?? 8, name: "Ticket head" });
+  const row = k.stack(head, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 12, name: "Ticket head row" });
+  k.text(row, o.left ?? "{{brand.name}} \xB7 BLACK FRIDAY", { style: o.style, color: "foil", autoWidth: true, name: "Game" });
+  k.text(row, o.right ?? OFFER.serial, { style: o.style, color: "cardMuted", autoWidth: true, name: "Serial" });
+  if (o.ribbon) guilloche(k, head, o.ribbon, "foil", { opacity: 0.7 });
+  return head;
+}
+function prizePanel(k, parent, o) {
+  const p = panel(k, parent, {
+    name: "Prize",
+    w: o.w,
+    h: o.h,
+    scale: o.scale,
+    strokes: o.strokes ?? 12,
+    gap: o.gap ?? 0,
+    crumbs: o.crumbs ?? 14,
+    seed: 5,
+    absolute: o.absolute,
+    pad: o.coin ? { top: 0, right: o.coin + R(o.h * 0.1), bottom: 0, left: 0 } : 0,
+    build: (win) => {
+      if (o.label !== null) k.text(win, o.label ?? "YOUR PRIZE", { style: o.styles.label, color: "stockMuted", autoWidth: true, name: "Prize label" });
+      k.text(win, `${OFFER.off}% OFF`, { style: o.styles.figure, color: "stockInk", name: "Prize figure", ...o.figureWidth ? { width: o.figureWidth } : { autoWidth: true } });
+      k.text(win, o.side ?? "EVERY ANNUAL PLAN", { style: o.styles.side, color: "stockInk", autoWidth: true, name: "Prize side" });
+    }
+  });
+  return { panel: p, ...o.coin ? { coin: coin(k, p.board, o.coin, { absolute: { x: o.w - o.coin - R(o.h * 0.1), y: R((o.h - o.coin) / 2) } }) } : {} };
+}
+function planPanel(k, parent, plan, o) {
+  return panel(k, parent, {
+    name: `${plan.id} window`,
+    w: o.w,
+    h: o.h,
+    scale: o.scale,
+    strokes: o.strokes ?? 6,
+    gap: o.gap ?? 0,
+    crumbs: o.crumbs ?? 6,
+    seed: plan.now,
+    build: (win) => {
+      k.text(win, plan.label, { style: o.styles.label, color: "stockMuted", autoWidth: true, name: `${plan.id} label` });
+      k.text(win, `$${plan.now}`, { style: o.styles.figure, color: "stockInk", name: `${plan.id} figure`, ...o.figureWidth ? { width: o.figureWidth } : { autoWidth: true } });
+      const was = k.stack(win, { width: "HUG", name: `${plan.id} was` });
+      const t = k.text(was, `WAS $${plan.was}${o.per ?? ""}`, { style: o.styles.side, color: "stockMuted", autoWidth: true, name: `${plan.id} was price` });
+      const n = k.node(t), weight = Math.max(2, R(n.height / 9));
+      k.rect(was, R(n.width + 6), weight, "accent", { name: "Strike", absolute: { x: -3, y: R(n.height / 2 - weight / 2) } });
+    }
+  });
+}
+function planPanels(k, parent, o) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", gap: o.gap, name: "Windows" });
+  return PLANS.map((p) => planPanel(k, row, p, { w: o.w, h: o.h, scale: o.scale, styles: o.styles, figureWidth: o.figureWidth, per: o.per, gap: o.inner }));
+}
+function burst(k, parent, size, lines, o = {}) {
+  const b = k.stack(parent, { width: size, height: size, align: "CENTER", justify: "CENTER", gap: o.gap ?? 0, name: o.name ?? "Burst", ...o.absolute ? { absolute: o.absolute } : {} });
+  k.vector(b, size, size, [burstPath(size, o.points ?? 20, 0.12)], "accent", { name: "Burst shape", absolute: { x: 0, y: 0 }, effects: [shadow(k, "shade", 0.5, R(size * 0.04), R(size * 0.1))] });
+  const ring = size * 0.76;
+  k.ellipse(b, ring, [], { name: "Burst ring", absolute: { x: (size - ring) / 2, y: (size - ring) / 2 }, stroke: { color: "onAccent", width: Math.max(1.5, size * 0.012), dash: [Math.max(2, size * 0.02), Math.max(2, size * 0.02)], cap: "NONE" } });
+  for (const [words, style, name] of lines) k.text(b, words, { style, color: "onAccent", autoWidth: true, name: name ?? "Burst words" });
+  if (o.rotation) k.patch(b, { rotation: o.rotation });
+  return b;
+}
+function codePlate(k, parent, o) {
+  const [v, h] = o.pad ?? [10, 22];
+  const plate = k.stack(parent, { direction: "HORIZONTAL", width: o.width ?? "HUG", fill: "primary", radius: o.radius ?? 8, align: "CENTER", justify: "CENTER", gap: o.gap ?? 14, padding: { top: v, right: h, bottom: v, left: h }, name: "Code plate" });
+  k.text(plate, o.label ?? "WINNING CODE", { style: o.labelStyle, color: "onPrimary", autoWidth: true, name: "Code label" });
+  k.text(plate, "{{brand.code}}", { style: o.codeStyle, color: "onPrimary", autoWidth: true, name: "Code" });
+  return plate;
+}
+function clock(k, parent, o) {
+  const u = o.u ?? 1;
+  const tiles = k.stack(parent, { direction: "HORIZONTAL", gap: o.gap, name: "Clock", ...o.width ? { width: o.width } : {} });
+  const units = o.units ?? ["DAYS", "HOURS", "MINUTES", "SECONDS"];
+  const figures = [["Days", OFFER.days], ["Hours", OFFER.hours], ["Minutes", OFFER.minutes], ["Seconds", o.seconds]];
+  const r = rng(88);
+  figures.forEach(([name, value], i) => {
+    const tile = k.stack(tiles, { gap: R(8 * u), align: "CENTER", name: "Tile" });
+    const face = k.stack(tile, { fill: "stock", radius: R(12 * u), clip: true, align: "CENTER", padding: { top: o.pad, right: 0, bottom: o.pad, left: 0 }, stroke: { color: "foil", width: Math.max(2, R(4 * u)), align: "INSIDE" }, effects: [shadow(k, "shade", 0.4, R(6 * u), R(14 * u))], name: "Tile paper" });
+    k.vector(face, 60 * u, 30 * u, [flake(18 * u, 8 * u, 26 * u, r), flake(44 * u, 4 * u, 14 * u, r)], "latex", { name: "Tile shred", absolute: { x: i % 2 ? 0 : R(60 * u), y: 0 } });
+    k.text(face, two(value), { style: o.style, color: "stockInk", name: `${name} figure` });
+    k.text(tile, units[i], { style: o.unitStyle, color: o.unitRole, name: `${name} unit` });
+  });
+  return tiles;
+}
+function spareTicket(k, parent, o) {
+  const { width: w, height: h } = o, u = o.u ?? 1;
+  const f = k.frame(parent, { x: o.x, y: o.y, width: w, height: h }, { name: o.name ?? "Spare card", fill: "card", radius: R(26 * u), clip: true, effects: [shadow(k, "shade", 0.5, R(14 * u), R(36 * u))] });
+  const m = R(12 * u);
+  k.vector(f, w, h, latticePaths(w, h, R(34 * u)), [], { name: "Spare back", absolute: { x: 0, y: 0 }, opacity: 0.8, stroke: { color: "cardLine", width: Math.max(1, 1.5 * u), cap: "NONE" } });
+  k.rect(f, w - m * 2, h - m * 2, [], { name: "Spare rule", radius: R(16 * u), absolute: { x: m, y: m }, stroke: { color: "foil", width: Math.max(1.5, 3 * u), align: "INSIDE" } });
+  const pw = w - m * 6, ph = R(h * 0.3);
+  k.vector(f, pw, R(h * 0.09), guillochePaths(pw, R(h * 0.09), 5, h * 0.3), [], { name: "Spare ribbon", absolute: { x: m * 3, y: R(h * 0.12) }, stroke: { color: "foil", width: Math.max(1, 1.25 * u), cap: "NONE" } });
+  k.rect(f, pw, ph, "latex", { name: "Spare latex", radius: R(10 * u), absolute: { x: m * 3, y: R(h * 0.28) } });
+  const cell = (pw - m * 2) / 3;
+  for (let i = 0; i < 3; i++) k.rect(f, cell, R(h * 0.2), "latex", { name: "Spare latex", radius: R(8 * u), absolute: { x: m * 3 + i * (cell + m), y: R(h * 0.66) } });
+  const hatch = [];
+  for (let y = R(h * 0.28) + R(9 * u); y < R(h * 0.28) + ph - 4 * u; y += R(13 * u)) hatch.push(line(m * 4, y, m * 2 + pw, y));
+  for (let i = 0; i < 3; i++) for (let y = R(h * 0.66) + R(9 * u); y < R(h * 0.66) + R(h * 0.2) - 4 * u; y += R(13 * u)) hatch.push(line(m * 4 + i * (cell + m), y, m * 2 + i * (cell + m) + cell, y));
+  k.vector(f, w, h, hatch, [], { name: "Spare print", absolute: { x: 0, y: 0 }, opacity: 0.55, stroke: { color: "latexDark", width: Math.max(1.5, 2.5 * u), dash: [R(9 * u), R(13 * u)], cap: "NONE" } });
+  k.patch(f, { rotation: o.rotation });
+  return f;
+}
+function sparkle(k, parent, s, o) {
+  const c = s / 2, p = s * 0.09;
+  const path = { closed: true, points: [pt3(c, 0), pt3(c + p, c - p), pt3(s, c), pt3(c + p, c + p), pt3(c, s), pt3(c - p, c + p), pt3(0, c), pt3(c - p, c - p)] };
+  return k.vector(parent, s, s, [path], "foilLight", { name: o.name ?? "Sparkle", absolute: o.absolute, ...o.opacity !== void 0 ? { opacity: o.opacity } : {} });
+}
+function twinkle(k, id, at, duration = 700) {
+  const mid = at + R(duration / 2), end = at + duration;
+  for (const path of ["scaleX", "scaleY"]) k.animate(id, path, [{ t: 0, v: 0, ease: ease.hold }, { t: at, v: 0, ease: ease.out("cubic") }, { t: mid, v: 1, ease: ease.named("cubic", "in") }, { t: end, v: 0 }]);
+}
+var CARD_ART = { w: 600, h: 640 };
+function cardArt(k, art, s) {
+  const card = ticket(k, art, { width: 560, u: 0.7, pad: 18, gap: 12, absolute: { x: 10, y: 40 } });
+  ticketHead(k, card.body, { style: s.head, ribbon: 16 });
+  const prize = prizePanel(k, card.body, { w: 498, h: 176, coin: 92, figureWidth: 380, styles: { label: s.label, figure: s.prize, side: s.prizeSide } });
+  k.text(card.body, "MATCH 3 PLANS \xB7 EVERY ONE IS A WINNER", { style: s.match, color: "foil", name: "Match line" });
+  const windows = planPanels(k, card.body, { w: 160, h: 118, gap: 9, figureWidth: 150, styles: { label: s.windowLabel, figure: s.window, side: s.was } });
+  codePlate(k, card.body, { labelStyle: s.codeLabel, codeStyle: s.code, pad: [6, 18], width: "FILL" });
+  const light = shine(k, card.ticket, { width: 110 });
+  burst(k, art, 170, [["WINNER", s.burst[0]], ["ODDS: 1 IN 1", s.burst[1]]], { rotation: 10, gap: 2, absolute: { x: 418, y: 0 } });
+  return { prize: prize.panel, coin: prize.coin, windows, light };
+}
+
+export {
+  OFFER,
+  PLANS,
+  two,
+  scratchBrand,
+  guillochePaths,
+  rosettePaths,
+  guilloche,
+  microprint,
+  rosette,
+  latticePaths,
+  table,
+  fitTable,
+  crumbPaths,
+  coin,
+  flip,
+  panel,
+  scratch,
+  ticket,
+  shine,
+  sweep,
+  ticketHead,
+  prizePanel,
+  planPanel,
+  planPanels,
+  burst,
+  codePlate,
+  clock,
+  spareTicket,
+  sparkle,
+  twinkle,
+  CARD_ART,
+  cardArt
+};

package/dist/chunks/chunk-ULNC47JX.js

@@ -0,0 +1,78 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  standardPortfolio
+} from "./chunk-ZGLXMJRC.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/portfolio-reel-carousel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var WORK = [
+  { title: "The Tide Giant", client: "Meridian Pictures", year: "2026", kind: "Feature film \xB7 140 shots", cover: "reel-00", summary: "A stone giant rising from the sea beside a lighthouse, for the third act of a fantasy feature.", story: "A full-CG creature with a water simulation for every step; the lighthouse is a plate shot on the Cornish coast.", credits: "VFX supervision, CG, compositing \u2014 Parallax Works" },
+  { title: "Sunflower Landing", client: "Orbital Series", year: "2026", kind: "Streaming series \xB7 62 shots", cover: "reel-01", summary: "A ship setting down in a field of sunflowers at golden hour.", story: "Two days of plates in a real field, the ship and its downdraft added after; every flower bends.", credits: "VFX \u2014 Parallax Works \xB7 Production \u2014 Orbital" },
+  { title: "Blue Flood", client: "Aqualux", year: "2025", kind: "Commercial", cover: "reel-02", summary: "A city street flooding with luminous water in slow motion.", story: "Shot at 1,000 frames a second on a closed street; the water is simulated to match the speed.", credits: "Direction, VFX \u2014 Parallax Works" },
+  { title: "Smoke Dragon", client: "Ironside Games", year: "2025", kind: "Game cinematic", cover: "reel-03", summary: "A dragon of smoke coiling round a tower at night.", story: "The reveal trailer for a game, rendered from the game\u2019s own creature rig.", credits: "Cinematic, CG \u2014 Parallax Works" },
+  { title: "Crystal Canyon", client: "Meridian Pictures", year: "2024", kind: "Feature film \xB7 88 shots", cover: "reel-04", summary: "An astronaut walking a canyon of crystal on another world.", story: "A virtual-production set on an LED stage, extended in post for the wide shots.", credits: "VFX, virtual production \u2014 Parallax Works" },
+  { title: "Fibre Forest", client: "Lightline Telecom", year: "2024", kind: "Brand film", cover: "reel-05", summary: "A forest whose trees are made of glowing fibre optics.", story: "Every strand is a curve that carries a pulse of light timed to the music.", credits: "Direction, CG \u2014 Parallax Works" }
+];
+var portfolio_reel_carousel_default = defineTemplate({
+  id: "web-portfolio-reel-carousel",
+  meta: {
+    name: "Carousel reel portfolio",
+    description: "A visual effects studio\u2019s portfolio whose pages are panels on a 3D ring: open a show and the ring turns to it, go home and it turns back. Wide frames two across on black, a page per show and a studio page. Drawn on the GPU with WebGPU, in CSS 3D elsewhere. The shows are a collection you edit as a table. Desktop, tablet and phone",
+    category: "web",
+    tags: ["portfolio", "3d", "carousel", "transition", "webgpu", "vfx", "film", "reel", "dark", "cms", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["portfolio"],
+    created: "2026-10-05",
+    updated: "2026-10-05"
+  },
+  breakpoints: true,
+  build: () => standardPortfolio({
+    name: "Carousel reel",
+    brand: { paper: "#050608", text: "#F2F4F7", onPaper: "#8E96A3", primary: "#3DDCFF", onPrimary: "#050608", card: "#0E1117", onCard: "#F2F4F7", cardMuted: "#8E96A3", line: "#1C212B" },
+    fields: { name: "Parallax Works", email: "bids@parallax.works" },
+    styles: {
+      "Wordmark 18": { size: 18, fontWeight: 800, letterSpacing: 4, lineHeight: 24 },
+      "Small 13": { size: 13, fontWeight: 600, letterSpacing: 1.6, lineHeight: 18 },
+      "Meta 14": { size: 14, fontWeight: 400, lineHeight: 20 },
+      "Title 20": { size: 20, fontWeight: 700, letterSpacing: -0.3, lineHeight: 26 },
+      "Lead 24": { size: 24, fontWeight: 500, lineHeight: 32 },
+      "Body 17": { size: 17, fontWeight: 400, lineHeight: 28 },
+      "Display 84": { size: 84, fontWeight: 800, letterSpacing: -3, lineHeight: 84 },
+      "Display 44": { size: 44, fontWeight: 800, letterSpacing: -1.4, lineHeight: 48 }
+    },
+    type: { wordmark: "Wordmark 18", small: "Small 13", meta: "Meta 14", title: "Title 20", lead: "Lead 24", body: "Body 17", display: "Display 84", displaySmall: "Display 44" },
+    projects: WORK,
+    go: "CAROUSEL_FROM_RIGHT",
+    back: "CAROUSEL_FROM_LEFT",
+    links: [["work", "REEL"], ["studio", "STUDIO"]],
+    lead: { kicker: "VISUAL EFFECTS \xB7 LONDON \xB7 MONTR\xC9AL", headline: "Impossible shots, delivered on time.", intro: "Parallax Works makes visual effects for features, series, games and commercials: 140 artists across two studios." },
+    grid: { cols: 2, gap: 16, ratio: 0.5625, radius: 0, card: { fill: "card", pad: 0 }, meta: "{{item.client}} \u2014 {{item.kind}}", tablet: 1 },
+    project: { ratio: 0.42, kicker: "SHOW", more: { cols: 3, ratio: 0.5625, label: "MORE FROM THE REEL" } },
+    studio: {
+      statement: "Two studios, one pipeline, and a habit of saying yes to the hard shot.",
+      about: "We started in a London basement in 2011 with three artists and a render farm under a desk. Now we deliver end to end \u2014 supervision on set, CG, simulation and compositing \u2014 from London and Montr\xE9al.",
+      picture: "reel-04",
+      ratio: 0.42,
+      services: ["VFX supervision", "Creatures and simulation", "Virtual production", "Compositing and finishing"],
+      clients: "Meridian Pictures, Orbital Series, Aqualux, Ironside Games and Lightline Telecom.",
+      contact: "Send scripts and storyboards for a bid within five days."
+    },
+    elsewhere: "VIMEO \xB7 LINKEDIN \xB7 INSTAGRAM"
+  })
+});
+
+export {
+  portfolio_reel_carousel_default
+};

package/dist/chunks/chunk-ULOS6YOR.js

@@ -0,0 +1,36 @@
+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 {
+  black_friday_scratch_landing_default
+} from "./chunk-M6EOYUH3.js";
+import {
+  black_friday_scratch_ads_default
+} from "./chunk-VIDB76SW.js";
+import {
+  black_friday_scratch_countdown_default
+} from "./chunk-GIVNETXM.js";
+import {
+  black_friday_scratch_deal_reel_default
+} from "./chunk-HLOF7XSN.js";
+import {
+  black_friday_scratch_last_day_default
+} from "./chunk-RH7SANM5.js";
+import {
+  black_friday_scratch_header_default
+} from "./chunk-ALGPGOMJ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/black-friday-scratch.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var pack = [black_friday_scratch_deal_reel_default, black_friday_scratch_landing_default, black_friday_scratch_countdown_default, black_friday_scratch_last_day_default, black_friday_scratch_header_default, black_friday_scratch_ads_default];
+var black_friday_scratch_default = pack;
+
+export {
+  black_friday_scratch_default
+};