@popcraft/kit 0.26.0 → 0.27.0

package/dist/chunks/chunk-RXDPCSLD.js

@@ -0,0 +1,390 @@
+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 {
+  caption,
+  captionParts,
+  glow,
+  size,
+  stage,
+  typeStep
+} from "./chunk-GLVMSG3Z.js";
+import {
+  key
+} from "./chunk-FAAVZ2GX.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  boxModel,
+  contextFrame,
+  init_scene3d
+} from "./chunk-MF4NUZBE.js";
+import {
+  init_transform3d,
+  mul4,
+  transform4
+} from "./chunk-7ECF2YL5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion3d/burger-reveal.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene3d();
+init_transform3d();
+var DURATION = 1e4;
+var FPS = 30;
+var SIZE = "video-1080p";
+var BW = 520;
+var RH = 820;
+var GAP = 64;
+var TILT = -17;
+var FOCUS_Z = 190;
+var DIM = 0.38;
+var OPEN = 2200;
+var OPENED = 3300;
+var CLOSE = 7200;
+var CLOSED = 8400;
+var range = (n) => Array.from({ length: n }, (_, i) => i);
+var rand = (i) => {
+  const x = Math.sin(i * 12.9898 + 78.233) * 43758.5453;
+  return x - Math.floor(x);
+};
+var PARTS = [
+  {
+    name: "Bottom bun",
+    h: 52,
+    about: "The toasted heel of a brioche bun: sturdy enough to carry everything stacked on it.",
+    discs: (k) => [
+      ...range(9).map((i) => {
+        const yy = 6 + i * 5.5;
+        const round = Math.max(0, yy - 34);
+        return { yy, d: 470 - round * round * 0.28, fills: [...k.tint("bunShade", 0.1 + i * 0.05), ...k.paint("bun")], rim: "bunShade", rimWidth: 14 };
+      }),
+      { yy: 2, d: 466, fills: k.paint("bunCut"), rim: "bun", rimWidth: 12 }
+    ].sort((a, b) => b.yy - a.yy)
+  },
+  {
+    name: "Patty",
+    h: 46,
+    about: "Six ounces of chuck and brisket, smashed on a hot griddle for a deep, crusty sear.",
+    discs: (k) => [
+      ...range(8).map((i) => ({ yy: 8 + i * 5, d: 500 - (i === 7 ? 10 : 0), fills: k.paint("patty"), rim: "pattyShade", rimWidth: 18 })),
+      { yy: 3, d: 494, fills: k.paint("patty"), rim: "pattyShade", rimWidth: 10, deco: (kit, id, d) => {
+        for (const i of range(4)) kit.rect(id, d * 0.72, 14, "pattyShade", { radius: 7, name: "Grill mark", opacity: 0.8, absolute: { x: Math.round(d * 0.14), y: Math.round(d * (0.28 + i * 0.15)) } });
+        for (const i of range(26)) {
+          const a = rand(i) * Math.PI * 2, r = Math.sqrt(rand(i + 40)) * d * 0.44;
+          kit.ellipse(id, 10 + Math.round(rand(i + 80) * 12), "pattyShade", { name: "Speck", opacity: 0.7, absolute: { x: Math.round(d / 2 + Math.cos(a) * r - 8), y: Math.round(d / 2 + Math.sin(a) * r - 8) } });
+        }
+      } }
+    ].sort((a, b) => b.yy - a.yy)
+  },
+  {
+    name: "Cheese",
+    h: 8,
+    about: "A slice of American cheese, laid on the patty straight off the griddle so it melts into every corner.",
+    discs: (k) => [
+      { yy: 7, d: 400, fills: k.paint("cheeseShade"), turn: 45, square: true },
+      { yy: 3, d: 400, fills: k.paint("cheese"), turn: 45, square: true }
+    ]
+  },
+  {
+    name: "Lettuce",
+    h: 18,
+    about: "Crisp iceberg leaves: cool, crunchy, and a barrier that keeps the bun from going soggy.",
+    discs: (k) => [12, 7, 2].map((yy, i) => ({ yy, d: 486 - i * 6, fills: k.paint(i === 2 ? "lettuce" : "lettuceShade"), deco: (kit, id, d) => {
+      const n = 22;
+      for (const j of range(n)) {
+        const a = j / n * Math.PI * 2 + i * 0.3, b = 46 + Math.round(rand(j + i * 30) * 16);
+        kit.ellipse(id, b, i === 2 ? "lettuce" : "lettuceShade", { name: "Frill", absolute: { x: Math.round(d / 2 + Math.cos(a) * (d / 2 - 14) - b / 2), y: Math.round(d / 2 + Math.sin(a) * (d / 2 - 14) - b / 2) } });
+      }
+    } }))
+  },
+  {
+    name: "Tomato",
+    h: 22,
+    about: "A thick slice of ripe beefsteak tomato, seasoned with a pinch of flaky salt.",
+    discs: (k) => [
+      ...range(4).map((i) => ({ yy: 20 - i * 4, d: 420, fills: k.paint("tomato"), rim: "tomatoShade", rimWidth: 14 })),
+      { yy: 3, d: 420, fills: k.paint("tomato"), rim: "tomatoShade", rimWidth: 12, deco: (kit, id, d) => {
+        kit.ellipse(id, Math.round(d * 0.84), "tomatoFlesh", { name: "Flesh", absolute: { x: Math.round(d * 0.08), y: Math.round(d * 0.08) } });
+        kit.ellipse(id, Math.round(d * 0.3), "tomato", { name: "Core", absolute: { x: Math.round(d * 0.35), y: Math.round(d * 0.35) } });
+        for (const j of range(6)) {
+          const a = j / 6 * Math.PI * 2, w = Math.round(d * 0.16);
+          kit.ellipse(id, w, "tomato", { name: "Seed pocket", opacity: 0.85, absolute: { x: Math.round(d / 2 + Math.cos(a) * d * 0.27 - w / 2), y: Math.round(d / 2 + Math.sin(a) * d * 0.27 - w / 2) } });
+        }
+      } }
+    ]
+  },
+  {
+    name: "Onion",
+    h: 10,
+    about: "Rings of red onion, sliced thin, for a sharp, sweet crunch that cuts through the richness.",
+    discs: () => [7, 3].flatMap((yy) => [
+      { yy, d: 400, fills: [], rim: yy === 3 ? "onion" : "onionShade", rimWidth: 18 },
+      { yy, d: 260, fills: [], rim: yy === 3 ? "onion" : "onionShade", rimWidth: 16 }
+    ])
+  },
+  {
+    name: "Sauce",
+    h: 8,
+    about: "House burger sauce: mayonnaise, ketchup, mustard and chopped pickle, spread edge to edge.",
+    discs: (k) => [
+      { yy: 6, d: 436, fills: k.paint("sauceShade") },
+      { yy: 2, d: 430, fills: k.paint("sauce"), deco: (kit, id, d) => {
+        for (const j of range(12)) {
+          const a = j / 12 * Math.PI * 2 + 0.2, b = 30 + Math.round(rand(j + 200) * 22);
+          kit.ellipse(id, b, "sauce", { name: "Drip", absolute: { x: Math.round(d / 2 + Math.cos(a) * (d / 2 - 6) - b / 2), y: Math.round(d / 2 + Math.sin(a) * (d / 2 - 6) - b / 2) } });
+        }
+        kit.ellipse(id, Math.round(d * 0.5), "sauceShine", { name: "Sheen", opacity: 0.35, absolute: { x: Math.round(d * 0.18), y: Math.round(d * 0.16) } });
+      } }
+    ]
+  },
+  {
+    name: "Top bun",
+    h: 128,
+    about: "A soft brioche crown, glazed with egg wash and scattered with toasted sesame seeds.",
+    discs: (k) => {
+      const R = 236, band = 22, dome = 128 - band, steps = 22;
+      const at = (i) => 126 - i * 124 / steps;
+      const width = (yy) => {
+        const up = Math.min(1, Math.max(0, (128 - band - yy) / dome));
+        return Math.max(30, Math.round(2 * R * Math.sqrt(1 - up * up)));
+      };
+      const out = [];
+      let seed = 0;
+      for (let i = 0; i <= steps; i++) {
+        const yy = at(i), d = width(yy), dn = i < steps ? width(at(i + 1)) : 0;
+        const seeds = i >= 3 && i < steps - 2 ? Math.round((d - dn) / 10) : 0;
+        const first = seed;
+        seed += seeds;
+        out.push({
+          yy,
+          d,
+          fills: [...i > steps - 6 ? k.tint("bunGloss", 0.1 * (i - steps + 6)) : [], ...k.tint("bunShade", Math.round(0.62 * (1 - i / steps) ** 1.4 * 100) / 100), ...k.paint("bun")],
+          ...i < 4 ? { rim: "bunShade", rimWidth: 10 } : {},
+          ...seeds ? { deco: (kit, id, dd) => {
+            for (const j of range(seeds)) {
+              const a = rand(first + j) * Math.PI * 2, r = dn / 2 + (dd / 2 - dn / 2) * (0.3 + 0.4 * rand(first + j + 500));
+              const sd = kit.ellipse(id, 22, "sesame", { name: "Sesame seed", absolute: { x: Math.round(dd / 2 + Math.cos(a) * r - 11), y: Math.round(dd / 2 + Math.sin(a) * r - 6) } });
+              kit.patch(sd, { height: 12, rotation: Math.round(a * 180 / Math.PI + 90 + (rand(first + j + 900) - 0.5) * 60) });
+            }
+          } } : {}
+        });
+      }
+      return out;
+    }
+  }
+];
+function positions() {
+  const total = PARTS.reduce((s, p) => s + p.h, 0) - 6;
+  const together = [];
+  let y = RH / 2 + total / 2;
+  for (const p of PARTS) {
+    y -= p.h - (p.name === "Cheese" ? 6 : 0);
+    together.push(Math.round(y));
+  }
+  const mid = (PARTS.length - 1) / 2;
+  const apart = together.map((t, i) => Math.round(t - (i - mid) * GAP));
+  return { together, apart };
+}
+function parts(k) {
+  for (const p of PARTS) {
+    const set = `Layer / ${p.name}`;
+    const states = k.variantSet(set, "State", ["Idle", "Hover"], { width: BW, height: p.h, description: `${p.name}: ${p.about} Hover lifts and brightens it.` }, (state, id) => {
+      const hover = state === "Hover";
+      for (const disc of p.discs(k)) {
+        const fills = [...hover && disc.fills.length ? k.tint("highlight", 0.34) : [], ...disc.fills];
+        const rimRole = disc.rim && hover && !disc.fills.length ? "highlight" : disc.rim;
+        const at = { x: Math.round((BW - disc.d) / 2), y: Math.round(disc.yy - disc.d / 2 - (hover ? 14 : 0)) };
+        const radius = disc.square ? 18 : Math.round(disc.d / 2);
+        const stroke = rimRole ? { color: rimRole, width: disc.rimWidth ?? 10, align: "INSIDE" } : void 0;
+        const n = disc.deco ? k.stack(id, { width: disc.d, height: disc.d, fill: fills, radius, name: "Disc", absolute: at, ...stroke ? { stroke } : {} }) : disc.square ? k.rect(id, disc.d, disc.d, fills, { radius, name: "Disc", absolute: at, ...stroke ? { stroke } : {} }) : k.ellipse(id, disc.d, fills, { name: "Disc", absolute: at, ...stroke ? { stroke } : {} });
+        if (disc.deco) disc.deco(k, n, disc.d);
+        k.patch(n, { rotateX: 90, ...disc.turn ? { rotateY: disc.turn } : {} });
+      }
+    });
+    for (const id of Object.values(states)) k.patch(id, { preserve3d: true });
+    k.changeTo(`${set}/Idle`, "ON_HOVER", `${set}/Hover`, 180, "EASE_OUT");
+  }
+}
+function burger(k, sheet, s, ys, o = {}) {
+  glow(k, sheet, "primary", 1150, s.W * 0.6, s.H * 0.56, 0.32);
+  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 2400 });
+  const cx = Math.round(s.W * 0.6), cy = Math.round(s.H * 0.53);
+  const rig = k.group(scene, { x: cx - BW / 2, y: cy - RH / 2, width: BW, height: RH }, { name: "Rig" });
+  k.patch(rig, { rotateX: TILT });
+  const turn = k.group(rig, { x: 0, y: 0, width: BW, height: RH }, { name: "Turn" });
+  const spin = k.group(turn, { x: 0, y: 0, width: BW, height: RH }, { name: "Spin" });
+  const layers = PARTS.map((p, i) => {
+    const id = k.instance(spin, `Layer / ${p.name}/Idle`, {}, { name: p.name });
+    k.patch(id, { x: 0, y: ys[i], ...o.focus === i ? { z: FOCUS_Z } : o.focus !== void 0 ? { opacity: DIM } : {} });
+    return id;
+  });
+  return { scene, rig, turn, spin, layers };
+}
+function labels(k, sheet, s, b, o = {}) {
+  const doc = k.finish();
+  const frame = contextFrame(doc.nodes[b.scene]);
+  const style = typeStep(k, s, "label");
+  PARTS.forEach((p, i) => {
+    const m = boxModel(doc.nodes, b.layers[i]).model;
+    const see = (x, y, z) => {
+      const q = transform4(mul4(frame.projection, mul4(frame.view, m)), x, y, z);
+      return { x: q[0] / q[3], y: q[1] / q[3] };
+    };
+    const r = Math.max(...p.discs(k).map((d) => d.d)) / 2;
+    const pts = range(24).map((j) => {
+      const a = j / 24 * Math.PI * 2;
+      return see(BW / 2 + Math.cos(a) * r, p.h / 2, Math.sin(a) * r);
+    });
+    const rim = pts.reduce((a, q) => q.x > a.x ? q : a);
+    const x0 = Math.round(rim.x + 24), labelX = Math.round(s.W * 0.6 + 330);
+    const tag = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", name: `${p.name} label` });
+    const quiet = o.focus !== void 0 && o.focus !== i;
+    k.rect(tag, Math.max(24, labelX - x0), 3, "accent", { radius: 2, name: "Rule", ...quiet ? { opacity: 0 } : {} });
+    k.text(tag, p.name, { style, color: quiet ? "onBackground" : "text", autoWidth: true, name: "Label" });
+    const box = k.finish().nodes[tag];
+    k.patch(tag, { layoutPositioning: "ABSOLUTE", x: x0, y: Math.round(rim.y - box.height / 2) });
+  });
+}
+var CAPTION = { name: "Caption", kicker: "Inside the Classic", title: "Eight layers. One perfect bite.", body: "Hover a layer to lift it, click to look closer, drag to turn the burger." };
+var REEL_BODY = "Brioche, beef, cheese and five more: every layer, and what it brings.";
+function captionBlock(k, sheet, s, body = CAPTION.body) {
+  captionParts(k, s, { kicker: CAPTION.kicker, cta: "Take it apart" });
+  caption(k, sheet, s, { ...CAPTION, body, step: "subtitle", width: 600, at: { x: 130, y: 150 } });
+}
+var toggle = (k, sheet, s, label) => k.instance(sheet, `Button ${typeStep(k, s, "body")}`, { Label: label }, { name: "Toggle", absolute: { x: 130, y: 520 } });
+function detail(k, sheet, s, i) {
+  const p = PARTS[i];
+  const card = k.stack(sheet, { width: 660, gap: 12, fill: k.tint("text", 0.08), radius: 28, padding: 34, name: `${p.name} card`, absolute: { x: 130, y: 630 } });
+  k.text(card, `Layer ${i + 1} of ${PARTS.length}`, { style: typeStep(k, s, "label"), color: "accent", name: "Layer number" });
+  k.text(card, p.name, { style: typeStep(k, s, "subtitle"), color: "text", name: "Layer name" });
+  k.text(card, p.about, { style: typeStep(k, s, "body"), color: "onBackground", name: "About" });
+  const close = k.text(card, "Back to all layers", { style: typeStep(k, s, "label"), color: "accent", name: "Close" });
+  return { card, close };
+}
+var burger_reveal_default = defineTemplate({
+  id: "motion-3d-burger-reveal",
+  meta: {
+    name: "Burger reveal",
+    description: "A burger in real 3D \u2014 sesame bun, sauce, onion, tomato, lettuce, cheese, patty \u2014 turns slowly, comes apart into a labelled exploded view and stacks back up. A 10-second 16:9 loop at 30 fps, plus a working prototype: hover a layer, click it to read about it, take the burger apart with a button, drag to turn it. Exports to working HTML and React",
+    category: "animation",
+    tags: ["animation", "3d", "exploded", "food", "burger", "product", "interactive", "layers", "restaurant", "menu"],
+    platforms: ["youtube", "instagram", "linkedin", "x", "web"],
+    formats: ["video", "post", "ad"],
+    useCases: ["launch", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  // One file, not sizes to pick between: the showreel (its first sheet, what the card pictures) and the prototype.
+  sequence: true,
+  build() {
+    const k = new Kit("Burger reveal", preset(SIZE));
+    k.brand({
+      background: "#170E0A",
+      text: "#FFF4E6",
+      onBackground: "#CDB9A6",
+      accent: "#F4AE3F",
+      onAccent: "#2A1405",
+      primary: "#E4572E",
+      onPrimary: "#FFFFFF",
+      highlight: "#FFFFFF",
+      bun: "#D98E3E",
+      bunShade: "#7E4216",
+      bunCut: "#F2D7A4",
+      bunGloss: "#FFE3B0",
+      sesame: "#FFF3D6",
+      patty: "#5B2F1D",
+      pattyShade: "#2C140B",
+      cheese: "#F8BC2C",
+      cheeseShade: "#C98B0C",
+      lettuce: "#74C44A",
+      lettuceShade: "#3F8428",
+      tomato: "#DD3E2C",
+      tomatoShade: "#98221A",
+      tomatoFlesh: "#F4876C",
+      onion: "#EBD3F1",
+      onionShade: "#B484C6",
+      sauce: "#E9773C",
+      sauceShade: "#B24E1F",
+      sauceShine: "#FFD2A8"
+    }, { name: "Stackhouse", tagline: "Built layer by layer." });
+    parts(k);
+    const s = size(SIZE);
+    const { together, apart } = positions();
+    const reel = k.sheet;
+    k.nameSheet(reel, "Burger reveal");
+    const b = burger(k, reel, s, together);
+    k.behave(b.spin, "rotateY", [{ kind: "spin", rate: 360 / (DURATION / 1e3) }]);
+    b.layers.forEach((id, i) => {
+      const off = apart[i] - together[i];
+      const d = Math.abs(i - (PARTS.length - 1) / 2) * 70;
+      k.patch(id, { translateY: off });
+      key(k, id, "translateY", [[0, 0], [OPEN + d, 0, ease.back(1.3)], [OPENED + d, off, ease.hold], [CLOSE - d, off, ease.inOut("cubic")], [CLOSED - d, 0]]);
+    });
+    captionBlock(k, reel, s, REEL_BODY);
+    labels(k, reel, s, b);
+    PARTS.forEach((p, i) => {
+      const tag = k.named(reel, `${p.name} label`)[0];
+      const d = Math.abs(i - (PARTS.length - 1) / 2) * 70;
+      key(k, tag, "opacity", [[0, 0], [OPENED + d - 200, 0, ease.out("cubic")], [OPENED + d + 250, 1, ease.hold], [CLOSE - d - 400, 1, ease.out("cubic")], [CLOSE - d - 100, 0]]);
+      key(k, tag, "translateX", [[OPENED + d - 200, 30, ease.out("cubic")], [OPENED + d + 250, 0]]);
+    });
+    ["Caption kicker", "Caption title", "Caption body"].forEach((name, i) => {
+      const id = k.named(reel, name)[0], t0 = 200 + i * 120;
+      key(k, id, "opacity", [[t0, 0, ease.out("cubic")], [t0 + 500, 1]]);
+      key(k, id, "translateY", [[t0, 40, ease.out("cubic")], [t0 + 700, 0]]);
+    });
+    const screen = (name) => k.addScreen(name);
+    const assembled = screen("Assembled");
+    const exploded = screen("Exploded");
+    const focus = PARTS.map((p) => screen(`Focus \xB7 ${p.name}`));
+    const built = [];
+    const apartScene = burger(k, exploded, s, apart);
+    captionBlock(k, exploded, s);
+    labels(k, exploded, s, apartScene);
+    const explodedToggle = toggle(k, exploded, s, "Put it back together");
+    {
+      const bb = burger(k, assembled, s, together);
+      k.timeline(assembled, { duration: 12e3, fps: FPS });
+      k.behave(bb.spin, "rotateY", [{ kind: "spin", rate: 30 }]);
+      captionBlock(k, assembled, s);
+      built.push({ id: assembled, b: bb, toggle: toggle(k, assembled, s, "Take it apart") });
+    }
+    built.push({ id: exploded, b: apartScene, toggle: explodedToggle });
+    focus.forEach((id, i) => {
+      const bb = burger(k, id, s, apart, { focus: i });
+      captionBlock(k, id, s);
+      labels(k, id, s, apartScene, { focus: i });
+      const { close } = detail(k, id, s, i);
+      built.push({ id, b: bb, toggle: toggle(k, id, s, "Put it back together"), close });
+    });
+    const GLIDE = 650;
+    for (const [n, screenB] of built.entries()) {
+      const focused = n >= 2 ? n - 2 : void 0;
+      k.link(screenB.toggle, n === 0 ? exploded : assembled, "SMART_ANIMATE", { duration: n === 0 ? 900 : 800 });
+      screenB.b.layers.forEach((layer, i) => k.link(layer, focused === i ? exploded : focus[i], "SMART_ANIMATE", { duration: GLIDE }));
+      if (screenB.close) k.link(screenB.close, exploded, "SMART_ANIMATE", { duration: GLIDE });
+      k.orbit(screenB.b.scene, screenB.b.turn, { degreesPerPx: 0.35, tilt: true, tiltRange: [-14, 5], tiltLayerId: screenB.b.rig });
+    }
+    k.flowStart(assembled, "Burger reveal");
+    k.setCover(reel);
+    return k.finish();
+  }
+});
+
+export {
+  burger_reveal_default
+};

package/dist/chunks/chunk-RXG7T7TH.js

@@ -0,0 +1,51 @@
+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 {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+import {
+  __export
+} from "./chunk-LJSVREWM.js";
+
+// templates/src/shared/motion.ts
+var motion_exports = {};
+__export(motion_exports, {
+  HOLD: () => HOLD,
+  appear: () => appear,
+  blink: () => blink,
+  cutOff: () => cutOff,
+  cutOn: () => cutOn,
+  drawOn: () => drawOn,
+  hz: () => hz
+});
+init_define_POPCRAFT_COMPONENT_IDS();
+var hz = (cycles, loopMs) => cycles * 1e3 / loopMs;
+var HOLD = { kind: "hold" };
+var SNAP = 100;
+var cutOn = (layer, at, gap) => ({ layer, preset: "fade-in", at: at - SNAP, params: { duration: SNAP, ease: HOLD }, ...gap ? { stagger: { delay: gap, order: "selection" } } : {} });
+var cutOff = (layer, at, gap) => ({ layer, preset: "fade-out", at: at - SNAP, params: { duration: SNAP, ease: HOLD }, ...gap ? { stagger: { delay: gap, order: "selection" } } : {} });
+var blink = (layer, at, duration = 1e3) => ({ layer, preset: "flash", at, params: { duration, ease: HOLD } });
+function drawOn(k, id, at, duration) {
+  k.animate(id, "trim.end", [{ t: at, v: 0, ease: ease.inOut("cubic") }, { t: at + duration, v: 1 }]);
+}
+function appear(k, id, at, fade = 160, to = 1) {
+  k.animate(id, "opacity", [{ t: at, v: 0, ease: ease.linear }, { t: at + fade, v: to }]);
+}
+
+export {
+  hz,
+  HOLD,
+  cutOn,
+  cutOff,
+  blink,
+  drawOn,
+  appear,
+  motion_exports
+};

package/dist/chunks/chunk-RYCXNOJY.js

@@ -0,0 +1,100 @@
+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 {
+  E,
+  around,
+  lottieTemplate,
+  sparkle
+} from "./chunk-OUEUIBYB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/lottie/education.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var EDU = { paper: "#F3FAF7", ink: "#123C33", accent: "#FFB020", green: "#1FA37A", soft: "#D9F2E8", white: "#FFFFFF", page: "#FFFDF7", shade: "#E9E4D6" };
+var eduOpenBook = lottieTemplate({
+  slug: "open-book",
+  sector: "education",
+  role: "onboarding",
+  size: "spot",
+  duration: 3e3,
+  loop: true,
+  name: "Open book",
+  description: "An onboarding illustration for a learning app: an open book turns a page while sparkles rise from it \u2014 a three-second seamless loop, 800\xD7600",
+  colors: EDU,
+  useCases: ["onboarding", "education"],
+  tags: ["book", "learning", "reading", "illustration"],
+  build(l) {
+    l.circle(l.sheet, 400, 300, 240, "soft", { name: "Backdrop" });
+    l.shape(l.sheet, [[160, 250], [400, 290], [640, 250], [640, 450], [400, 490], [160, 450]], "green", { name: "Cover" });
+    const lines = (x0, dir) => {
+      for (let i = 0; i < 4; i++) l.rect(l.sheet, dir > 0 ? x0 + 30 : x0 - 30 - 150, 300 + i * 30, 150 - i * 10, 8, "shade", { radius: 4, name: "Text line" });
+    };
+    l.shape(l.sheet, [[180, 240], [400, 276], [400, 470], [180, 434]], "page", { name: "Left page" });
+    l.shape(l.sheet, [[400, 276], [620, 240], [620, 434], [400, 470]], "page", { name: "Right page" });
+    lines(400, -1);
+    lines(400, 1);
+    const leaf = l.box(l.sheet, 400, 240, 220, 230, "Turning page");
+    l.shape(leaf, [[0, 36], [220, 0], [220, 194], [0, 230]], "page", { name: "Leaf" });
+    for (let i = 0; i < 4; i++) l.rect(leaf, 30, 60 + i * 30, 150 - i * 10, 8, "shade", { radius: 4, name: "Leaf line" });
+    const shaded = l.shape(leaf, [[0, 36], [220, 0], [220, 194], [0, 230]], "shade", { name: "Leaf shade", opacity: 0 });
+    l.pivot(leaf, 0, 0.5);
+    l.keys(leaf, "scaleX", [[0, 1, E.hold], [600, 1, E.inOut], [1500, -1, E.hold], [2900, -1, E.hold], [3e3, 1]]);
+    l.opacity(shaded, [[0, 0, E.hold], [600, 0, E.in], [1050, 1, E.out], [1500, 0, E.hold], [3e3, 0]]);
+    l.opacity(leaf, [[0, 1, E.hold], [1500, 1, E.in], [1700, 0, E.hold], [2950, 0, E.hold], [3e3, 1]]);
+    for (const [x, t, r] of [[330, 1300, 16], [460, 1450, 22], [400, 1650, 12]]) {
+      const s = l.shape(l.sheet, sparkle(x, 230, r), "accent", { name: "Sparkle" });
+      l.keys(s, "translateY", [[0, 0, E.hold], [t, 0, E.out], [t + 1e3, -110]]);
+      l.scale(s, [[0, 0, E.hold], [t, 0, E.pop], [t + 300, 1, E.inOut], [t + 1e3, 0.3]]);
+      l.opacity(s, [[0, 0, E.hold], [t, 0, E.out], [t + 150, 1, E.hold], [t + 700, 1, E.in], [t + 1e3, 0]]);
+    }
+  }
+});
+var eduBadge = lottieTemplate({
+  slug: "lesson-badge",
+  sector: "education",
+  role: "success",
+  size: "icon",
+  duration: 1800,
+  loop: false,
+  name: "Lesson complete badge",
+  description: "The reward at the end of a lesson: a medal swings in on its ribbon, its star spins into place and rays burst behind it \u2014 1.8 seconds that rest on the earned badge, 512\xD7512",
+  colors: EDU,
+  useCases: ["education"],
+  tags: ["badge", "achievement", "reward", "gamification"],
+  build(l) {
+    const rays = l.box(l.sheet, 56, 76, 400, 400, "Rays");
+    for (let i = 0; i < 12; i++) {
+      const arm = l.box(rays, 0, 0, 400, 400, "Ray arm");
+      l.k.patch(arm, { rotation: i * 30 });
+      l.line(arm, [[200, 50], [200, 12]], "accent", 12, { name: "Ray" });
+    }
+    l.scale(rays, [[0, 0.6, E.hold], [500, 0.6, E.out], [1100, 1]]);
+    l.opacity(rays, [[0, 0, E.hold], [500, 0, E.out], [700, 1, E.hold], [1100, 1, E.in], [1500, 0]]);
+    l.keys(rays, "rotation", [[0, 0, E.hold], [500, 0, E.out], [1500, 30]]);
+    const medal = l.box(l.sheet, 136, 40, 240, 420, "Medal");
+    l.shape(medal, [[70, 0], [120, 0], [150, 150], [100, 170]], "green", { name: "Ribbon" });
+    l.shape(medal, [[170, 0], [120, 0], [90, 150], [140, 170]], "ink", { name: "Ribbon" });
+    l.circle(medal, 120, 276, 110, "accent", { name: "Medal disc" });
+    l.circle(medal, 120, 276, 84, "white", { name: "Medal face" });
+    const star = l.shape(medal, around(120, 280, 60, 5, 0, 26), "accent", { name: "Star" });
+    l.pivot(medal, 0.5, 0);
+    l.keys(medal, "rotation", [[0, -24, E.out], [500, 10, E.inOut], [850, -4, E.inOut], [1150, 0]]);
+    l.keys(medal, "translateY", [[0, -80, E.out], [450, 0]]);
+    l.opacity(medal, [[0, 0, E.out], [200, 1]]);
+    l.scale(star, [[0, 0, E.hold], [400, 0, E.pop], [800, 1]]);
+    l.keys(star, "rotation", [[0, -144, E.hold], [400, -144, E.out], [900, 0]]);
+  }
+});
+var EDUCATION_PACK = [eduOpenBook, eduBadge];
+
+export {
+  eduOpenBook,
+  eduBadge,
+  EDUCATION_PACK
+};

package/dist/chunks/chunk-RZ6BQ24D.js

@@ -0,0 +1,121 @@
+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,
+  disc,
+  draw,
+  eightStar,
+  fanous,
+  polyP,
+  printVariant,
+  starPath,
+  tilePattern
+} from "./chunk-AISWLDDO.js";
+import {
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/print/holidays-eid-gift-tags.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Eid gift tags sheet";
+var TW = 158;
+var TH = 256;
+var PAD = { top: 60, right: 48, bottom: 44, left: 48 };
+var DESIGNS = ["Lantern", "Crescent", "Star", "Arch"];
+var LOOK = {
+  Lantern: { tag: "mint", ink: "tealInk", art: "gold", art2: "tealInk" },
+  Crescent: { tag: "teal", ink: "sand", art: "gold", art2: "sand" },
+  Star: { tag: "lilac", ink: "plumInk", art: "gold", art2: "plumInk" },
+  Arch: { tag: "sand", ink: "tealInk", art: "teal", art2: "gold" }
+};
+var tagShape = () => polyP([{ x: 28, y: 0 }, { x: TW - 28, y: 0 }, { x: TW, y: 28 }, { x: TW, y: TH }, { x: 0, y: TH }, { x: 0, y: 28 }]);
+function picture(d, cx, cy) {
+  const L = LOOK[d];
+  if (d === "Lantern") {
+    const f = fanous(cx, cy - 46, 92);
+    return [{ name: "Lantern glass", paths: f.glass, color: "amber" }, { name: "Lantern frame", paths: f.frame, color: L.art2, o: { strokeWidth: 1.2 } }, { name: "Lantern", paths: f.metal, color: L.art }];
+  }
+  if (d === "Crescent") return [{ name: "Crescent", paths: [crescent(cx - 4, cy, 34, 0.5, 1, -0.5)], color: L.art }, { name: "Star", paths: [starPath(cx + 22, cy - 16, 9, 3.6)], color: L.art }, { name: "Little stars", paths: [starPath(cx - 30, cy + 30, 4, 1.6), starPath(cx + 30, cy + 26, 3, 1.2)], color: L.art2 }];
+  if (d === "Star") return [{ name: "Big star", paths: [eightStar(cx, cy, 36)], color: L.art }, { name: "Star heart", paths: [eightStar(cx, cy, 20)], color: L.tag }, { name: "Star dot", paths: [disc(cx, cy, 8)], color: L.art2 }];
+  return [{ name: "Window", paths: [archPath(cx, 64, cy + 40, cy - 6, cy - 50)], color: L.art }, { name: "Window light", paths: [archPath(cx, 44, cy + 32, cy, cy - 34)], color: "amber" }, { name: "Sill", paths: [polyP([{ x: cx - 40, y: cy + 40 }, { x: cx + 40, y: cy + 40 }, { x: cx + 34, y: cy + 48 }, { x: cx - 34, y: cy + 48 }])], color: L.art2 }];
+}
+function border(w, h) {
+  const B = 12, band = 30;
+  const place = (x0, y0, x1, y1) => {
+    const t = tilePattern(x1 - x0, y1 - y0, 30);
+    return t.stars.map((p) => ({ ...p, points: p.points.map((q) => ({ ...q, x: q.x + x0, y: q.y + y0 })) }));
+  };
+  return [
+    { name: "Border", paths: place(-B, -B, w + B, band), color: "border" },
+    { name: "Border", paths: place(-B, h - band, w + B, h + B), color: "border" }
+  ];
+}
+var holidays_eid_gift_tags_default = defineTemplate({
+  id: "print-holidays-eid-gift-tags",
+  meta: {
+    name: NAME,
+    description: "Twelve Eid gift tags for Eidi envelopes and presents on one sheet: tall tags with clipped corners and a ribbon hole in mint, lilac, sand and deep teal, each with a lantern, a crescent and star, an eight-pointed star or an arched window, a greeting and \u201CTo\u201D and \u201CFrom\u201D lines. One component set, so a colour change reaches every tag. US Letter with bleed, and an A4 copy",
+    category: "sticker",
+    tags: ["eid", "eid al-fitr", "eid al-adha", "eid mubarak", "eidi", "gift tags", "labels", "presents", "lantern", "crescent", "islamic geometric", "printable", "diy", "print"],
+    platforms: ["print"],
+    formats: ["card"],
+    useCases: ["greeting"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("us-letter"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FBF7EF", text: "#123F45", onPaper: "#5A6E6F", primary: "#1C5A63", onPrimary: "#FFFFFF" },
+      { name: "The Siddiqui family" }
+    );
+    k.palette({ mint: "#CFEAD9", teal: "#1C5A63", lilac: "#DCCDEE", sand: "#F1E2C4", gold: "#D9A93E", amber: "#F2B54A", tealInk: "#123F45", plumInk: "#40285E", border: "#E3D4AE" });
+    k.textStyle("Head 30", { ...SERIF, size: 30, fontWeight: 600, letterSpacing: -0.4, lineHeight: 34 });
+    k.textStyle("Note 11", { size: 11, fontWeight: 500, lineHeight: 16 });
+    k.textStyle("Greeting 17", { ...SERIF, size: 17, fontWeight: 700, lineHeight: 21 });
+    k.textStyle("Tag word 8.5", { size: 8.5, fontWeight: 700, letterSpacing: 1.8, lineHeight: 15 });
+    k.variantSet("Eid tag", "Design", DESIGNS, { width: TW, height: TH, padding: { top: 150, right: 14, bottom: 16, left: 14 }, gap: 4, align: "CENTER", props: { Greeting: "Eid Mubarak", To: "TO: ____________", From: "FROM: __________" } }, (d, id) => {
+      const L = LOOK[d];
+      k.vector(id, TW, TH, [tagShape()], L.tag, { name: "Tag", absolute: { x: 0, y: 0 } });
+      k.vector(id, 14, 14, [disc(7, 7, 7)], "paper", { name: "Ribbon hole", absolute: { x: TW / 2 - 7, y: 14 } });
+      k.vector(id, 20, 20, [disc(10, 10, 10)], [], { name: "Hole ring", absolute: { x: TW / 2 - 10, y: 11 }, stroke: { color: L.art, width: 1.4 } });
+      draw(k, id, picture(d, TW / 2, 92));
+      k.propText(id, "Greeting", { style: "Greeting 17", color: L.ink, align: "CENTER", width: "FILL", name: "Greeting" });
+      k.propText(id, "To", { style: "Tag word 8.5", color: L.ink, align: "CENTER", width: "FILL", name: "To" });
+      k.propText(id, "From", { style: "Tag word 8.5", color: L.ink, align: "CENTER", width: "FILL", name: "From" });
+    });
+    const sheet = k.sheet;
+    const { width: W, height: H } = k.node(sheet);
+    k.flowSheet(sheet, 18, PAD, "paper", "MIN", "CENTER");
+    draw(k, sheet, border(W, H));
+    k.text(sheet, "Eid gift tags", { style: "Head 30", color: "text", align: "CENTER", width: "FILL", name: "Title" });
+    const grid = k.stack(sheet, { direction: "HORIZONTAL", wrap: true, gap: 18, width: "FILL", justify: "CENTER", name: "Tags" });
+    k.patch(grid, { counterAxisSpacing: 18 });
+    const greet = ["Eid Mubarak", "Eid Saeed", "Your Eidi!", "With love", "Eid Mubarak", "For you", "Happy Eid", "Eid Mubarak", "Eid Saeed", "With love", "Your Eidi!", "Happy Eid"];
+    greet.forEach((g, i) => k.instance(grid, `Eid tag/${DESIGNS[(i + Math.floor(i / 4)) % 4]}`, { Greeting: g }, { name: "Eid tag" }));
+    k.text(sheet, "Print on card, cut round each tag, punch the hole and thread a ribbon. From {{brand.name}}", { style: "Note 11", color: "text", align: "CENTER", width: "FILL", name: "Note" });
+    k.variants(sheet, [printVariant("a4", { art: border, pad: PAD, masterWidth: W })]);
+    return k.finish();
+  }
+});
+
+export {
+  holidays_eid_gift_tags_default
+};