@popcraft/kit 0.53.3 → 0.53.5

package/dist/chunks/chunk-HX5XUKLP.js

@@ -0,0 +1,589 @@
+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 {
+  motif
+} from "./chunk-PBABY4VV.js";
+import {
+  parsePathData,
+  pathBounds,
+  toVectorPaths
+} from "./chunk-7DATU5VX.js";
+import {
+  INTER,
+  MONO_BOLD,
+  SERIF_BOLD,
+  SERIF_ITALIC,
+  SIDE,
+  bob,
+  breathe,
+  deepen,
+  drawOnOff,
+  drift,
+  mix,
+  spin,
+  squash,
+  sway,
+  travel,
+  twinkle
+} from "./chunk-WG5KUTTX.js";
+import {
+  burstPath,
+  sparkPath
+} from "./chunk-2VFVKPUT.js";
+import {
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  bloom,
+  blurred,
+  hardShadow,
+  shadow
+} from "./chunk-YORIY3BT.js";
+import {
+  box,
+  line,
+  rng
+} from "./chunk-EJLCQVQK.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/cards/themes.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function cascade(layer, text, dir, o) {
+  const words = text.trim().split(/\s+/).length;
+  const unit = words > 1 ? "words" : "letters";
+  const n = words > 1 ? words : Math.max(text.length, "{{brand.message}}".length);
+  const stagger = Math.min(unit === "words" ? 90 : 35, Math.max(0, Math.floor((o.budget - o.duration) / Math.max(1, n - 1))));
+  const total = o.duration + (n - 1) * stagger;
+  const at = o.end !== void 0 ? o.end - total : o.at;
+  return { layer, preset: `${unit}-${dir}`, at, params: { duration: o.duration, amount: stagger } };
+}
+var pick = (r, xs) => xs[Math.floor(r() * xs.length) % xs.length];
+var tones = ["a", "b", "c"];
+var pictureOf = (ctx, i) => {
+  const all = [ctx.occ.motif, ...ctx.occ.more ?? []];
+  return all[i % all.length];
+};
+var kidsOf = (ctx, id) => ctx.k.node(id).childIds;
+var W = SIDE;
+var confetti = {
+  id: "confetti",
+  label: "Confetti",
+  blurb: "confetti tumbles round the words, the message hops and the occasion\u2019s picture wobbles over it",
+  paper: (c) => ({ paper: mix(c[0], "#FFFFFF", 0.9), text: "#1A1530" }),
+  type: INTER(900, { track: -2 }),
+  note: { ...INTER(700), size: 22, lead: 1.25 },
+  band: { top: 128, right: 36, bottom: 104, left: 36 },
+  draw(ctx) {
+    const { k, sheet, seed } = ctx, r = rng(seed);
+    const m = motif(k, sheet, ctx.occ.motif, 100, { roles: ctx.roles, absolute: { x: W / 2 - 50, y: 16 }, name: "Picture" });
+    bob(k, m, 5, 2);
+    const spots = [];
+    for (let i = 0; i < 24; i++) {
+      const top = i % 2 === 0;
+      const x = 8 + r() * (W - 30);
+      const y = top ? 6 + r() * 98 : 392 + r() * 76;
+      if (top && Math.abs(x - W / 2) < 72) continue;
+      spots.push([x, y]);
+    }
+    spots.forEach(([x, y], i) => {
+      const tone = tones[i % 3], kind = i % 4, s = 16 + r() * 14;
+      const id = kind === 0 ? k.ellipse(sheet, s * 0.8, tone, { name: "Confetti", absolute: { x, y } }) : kind === 1 ? k.star(sheet, s * 1.3, tone, { name: "Confetti", absolute: { x, y } }) : k.rect(sheet, s * 0.6, s * 1.4, tone, { name: "Confetti", radius: 2, absolute: { x, y } });
+      k.patch(id, { rotation: Math.round(r() * 180) });
+      if (i % 2) spin(k, id, i % 4 === 1 ? 1 : -1);
+      else bob(k, id, 4 + r() * 6, 1, r());
+    });
+  },
+  cues: () => [
+    { layer: "Message", preset: "bounce", at: 250, params: { duration: 900, distance: 18 } },
+    { layer: "Picture", preset: "wobble", at: 1800, params: { duration: 900 } }
+  ]
+};
+var kinetic = {
+  id: "kinetic",
+  label: "Kinetic type",
+  arrives: true,
+  blurb: "big bold words slam in one by one on a full-colour ground between two sliding bars, pulse, and clear for the next loop",
+  paper: (c) => {
+    const p = deepen(c[0]);
+    return { paper: p, text: "#FFFFFF" };
+  },
+  type: INTER(900, { upper: true, track: -3, lead: 0.98, max: 104 }),
+  note: { ...INTER(800, { upper: true, track: 6 }), size: 18, lead: 1.3 },
+  band: { top: 100, right: 30, bottom: 100, left: 30, gap: 18 },
+  draw(ctx) {
+    const { k, sheet } = ctx;
+    k.rect(sheet, 380, 26, "b", { name: "Bar top", absolute: { x: -20, y: 46 }, radius: 13 });
+    k.rect(sheet, 380, 26, "c", { name: "Bar bottom", absolute: { x: 120, y: 408 }, radius: 13 });
+    const m = motif(k, sheet, ctx.occ.motif, 54, { roles: ctx.roles, mono: "b", absolute: { x: 400, y: 32 }, name: "Picture" });
+    sway(k, m, 12, 2);
+  },
+  cues: (line2) => [
+    { layer: "Bar top", preset: "slide-in", at: 0, params: { duration: 500, direction: "left" } },
+    { layer: "Bar bottom", preset: "slide-in", at: 80, params: { duration: 500, direction: "right" } },
+    cascade("Message", line2.text, "in", { at: 150, duration: 600, budget: 1200 }),
+    ...line2.note ? [{ layer: "Note", preset: "fade-in", at: 1e3, params: { duration: 400 } }] : [],
+    { layer: "Message", preset: "pulse", at: 1700, params: { duration: 800, amount: 0.05 } },
+    cascade("Message", line2.text, "out", { end: 3900, duration: 400, budget: 700 }),
+    ...line2.note ? [{ layer: "Note", preset: "fade-out", at: 3300, params: { duration: 300 } }] : [],
+    { layer: "Bar top", preset: "slide-out", at: 3420, params: { duration: 450, direction: "left" } },
+    { layer: "Bar bottom", preset: "slide-out", at: 3420, params: { duration: 450, direction: "right" } }
+  ]
+};
+var elegant = {
+  id: "elegant",
+  label: "Elegant",
+  blurb: "serif italic words in a fine gold double frame on cream, a gold picture above them and sparkles that glint at the corners",
+  paper: () => ({ paper: "#FBF6EC", text: "#2A2320" }),
+  scenery: () => ({ gold: "#B8893A" }),
+  type: SERIF_ITALIC({ max: 76 }),
+  note: { ...INTER(600, { upper: true, track: 16 }), size: 16, lead: 1.4 },
+  band: { top: 128, right: 56, bottom: 92, left: 56, gap: 16 },
+  draw(ctx) {
+    const { k, sheet } = ctx;
+    k.rect(sheet, W - 32, W - 32, [], { name: "Frame", stroke: { color: "gold", width: 1.5 }, absolute: { x: 16, y: 16 } });
+    k.rect(sheet, W - 48, W - 48, [], { name: "Frame inner", stroke: { color: "gold", width: 0.75 }, absolute: { x: 24, y: 24 } });
+    motif(k, sheet, ctx.occ.motif, 70, { roles: ctx.roles, mono: "gold", absolute: { x: W / 2 - 35, y: 40 }, name: "Picture" });
+    const corners = [[12, 12], [W - 36, 12], [12, W - 36], [W - 36, W - 36]];
+    corners.forEach(([x, y], i) => {
+      const s = k.vector(sheet, 24, 24, [sparkPath(24, 0.12)], "gold", { name: "Glint", absolute: { x, y } });
+      k.patch(s, { scaleX: 0.8, scaleY: 0.8 });
+      breathe(k, s, 0.35, 2, i / 4);
+      spin(k, s, 0.25);
+    });
+    k.rect(sheet, 40, 1.5, "gold", { name: "Rule", absolute: { x: W / 2 - 20, y: W - 64 } });
+  },
+  cues: () => [
+    { layer: "Picture", preset: "pulse", at: 600, params: { duration: 1200, amount: 0.05 } },
+    { layer: "Message", preset: "pulse", at: 2200, params: { duration: 1200, amount: 0.025 } }
+  ]
+};
+var retro = {
+  id: "retro",
+  label: "Retro sunset",
+  blurb: "chunky italic words with a hot drop shadow over an eighties sunset, a scrolling neon grid and stars that blink",
+  paper: () => ({ paper: "#1B1035", text: "#FFF4E0" }),
+  scenery: (c) => ({ sunTop: "#FFD166", sunLow: "#FF4F8B", grid: c[0] === "#000000" ? "#FF4F8B" : mix(c[0], "#FF4F8B", 0.4) }),
+  type: INTER(900, { italic: true, upper: true, track: -2, max: 88 }),
+  note: { ...INTER(700, { upper: true, track: 14 }), size: 16, lead: 1.4 },
+  band: { top: 84, right: 34, bottom: 168, left: 34 },
+  wordsFx: (ctx) => [hardShadow(ctx.k, "sunLow", 0, 5)],
+  draw(ctx) {
+    const { k, sheet, seed } = ctx, r = rng(seed);
+    const sun = box2(k, sheet, W / 2 - 110, 300, 220, 110, "Sun", { clip: true });
+    k.ellipse(sun, 220, [k.gradient({ from: "sunTop", to: "sunLow", angle: 90 })], { name: "Sun disc", absolute: { x: 0, y: 0 } });
+    const cuts = box2(k, sun, 0, 0, 220, 220, "Sun cuts");
+    for (let i = 0; i < 8; i++) k.rect(cuts, 220, 3 + i * 1.2, "paper", { name: "Sun cut", absolute: { x: 0, y: 40 + i * 22 } });
+    travel(k, cuts, 22, 2);
+    const floor = box2(k, sheet, 0, 410, W, 70, "Grid", { clip: true });
+    const rays = Array.from({ length: 15 }, (_, i) => line(W / 2 + (i - 7) * 14, 0, W / 2 + (i - 7) * 90, 70));
+    k.vector(floor, W, 70, rays, "grid", { strokeWidth: 1.5, name: "Grid rays", absolute: { x: 0, y: 0 } });
+    const rungs = k.vector(floor, W, 140, Array.from({ length: 10 }, (_, i) => line(0, i * 14, W, i * 14)), "grid", { strokeWidth: 1.5, name: "Grid rungs", absolute: { x: 0, y: -70 } });
+    travel(k, rungs, 14, 4);
+    k.rect(sheet, W, 2, "sunLow", { name: "Horizon", absolute: { x: 0, y: 409 } });
+    for (let i = 0; i < 14; i++) {
+      const x = 10 + r() * (W - 20), y = 8 + r() * 66;
+      const s = k.vector(sheet, 10, 10, [sparkPath(10, 0.2)], i % 2 ? "sunTop" : "c", { name: "Star", absolute: { x, y } });
+      twinkle(k, s, 0.6, 0.4, 2, r());
+    }
+    const m = motif(k, sheet, ctx.occ.motif, 64, { roles: ctx.roles, absolute: { x: 22, y: 326 }, name: "Picture" });
+    bob(k, m, 4, 2);
+  },
+  cues: () => [
+    { layer: "Message", preset: "shake", at: 300, params: { duration: 500, distance: 8 } },
+    { layer: "Message", preset: "pulse", at: 2e3, params: { duration: 800, amount: 0.04 } }
+  ]
+};
+var SPRITES = {
+  heart: [".##..##.", "########", "########", "########", ".######.", "..####..", "...##...", "........"],
+  star: ["...##...", "...##...", "########", ".######.", "..####..", ".##..##.", "##....##", "........"],
+  coin: ["..####..", ".#....#.", "#..##..#", "#..##..#", "#..##..#", "#..##..#", ".#....#.", "..####.."],
+  gift: ["..#..#..", "########", "#...#..#", "########", "#...#..#", "#...#..#", "#...#..#", "########"]
+};
+var spriteFor = (m) => ["heart", "hearts", "lips", "envelope", "hug", "teddy", "ring", "rings"].includes(m) ? "heart" : ["gift", "cake", "cupcake", "party-hat", "balloon"].includes(m) ? "gift" : ["coin", "shopping", "trophy", "medal"].includes(m) ? "coin" : "star";
+function spritePaths(rows, px) {
+  const out = [];
+  rows.forEach((row, y) => [...row].forEach((ch, x) => {
+    if (ch === "#") out.push(box(x * px, y * px, px, px));
+  }));
+  return out;
+}
+var pixel = {
+  id: "pixel",
+  label: "Pixel",
+  arrives: true,
+  blurb: "eight-bit words type themselves out between rows of blinking pixel sprites, like a game\u2019s title screen",
+  paper: () => ({ paper: "#11112A", text: "#F4F4F8" }),
+  type: MONO_BOLD({ max: 58 }),
+  note: { ...MONO_BOLD({ max: 18 }), size: 16, lead: 1.4 },
+  band: { top: 120, right: 30, bottom: 120, left: 30, gap: 20 },
+  draw(ctx) {
+    const { k, sheet } = ctx;
+    const kind = spriteFor(ctx.occ.motif);
+    const sprite = (tone) => {
+      const name = `Sprite ${kind} ${tone}`;
+      if (!k.hasComponent(name)) k.component(name, { width: 40, height: 40 }, (c) => {
+        k.vector(c, 40, 40, spritePaths(SPRITES[kind], 5), tone, { name: "Pixels", absolute: { x: 0, y: 0 } });
+      });
+      return name;
+    };
+    for (let i = 0; i < 5; i++) {
+      const x = 28 + i * 88, top = k.instance(sheet, sprite(tones[i % 3]), {}, { name: "Sprite", absolute: { x, y: 40 } });
+      bob(k, top, 6, 2, i * 0.2);
+      const low = k.instance(sheet, sprite(tones[(i + 1) % 3]), {}, { name: "Sprite", absolute: { x: x + 20, y: 400 } });
+      bob(k, low, 6, 2, i * 0.2 + 0.5);
+    }
+    const checks = (y) => k.vector(sheet, W, 8, Array.from({ length: W / 8 }, (_, i) => box(i * 8, i % 2 ? 0 : 4, 8, 4)), "b", { name: "Checker", absolute: { x: 0, y } });
+    checks(10);
+    checks(462);
+  },
+  cues: (line2) => [
+    { layer: "Message", preset: "typewriter", at: 100, params: { duration: 1300 } },
+    ...line2.note ? [{ layer: "Note", preset: "flash", at: 1600, params: { duration: 1600, ease: { kind: "hold" } } }] : [],
+    { layer: "Sprite", preset: "flash", at: 1500, params: { duration: 800, ease: { kind: "hold" } }, stagger: { delay: 60 } },
+    // The words off again before the loop types them anew.
+    cascade("Message", line2.text, "out", { end: 3900, duration: 400, budget: 700 })
+  ]
+};
+var neon = {
+  id: "neon",
+  label: "Neon",
+  blurb: "glowing neon words and a neon-tube picture on a dark wall, with a tube frame that flickers like a sign warming up",
+  paper: () => ({ paper: "#0D0B17", text: "#FFFFFF" }),
+  type: INTER(800, { max: 80, track: -1 }),
+  note: { ...INTER(600, { track: 4 }), size: 20, lead: 1.3 },
+  band: { top: 140, right: 44, bottom: 84, left: 44 },
+  draw(ctx) {
+    const { k, sheet } = ctx;
+    const bricks = [];
+    for (let y = 0; y < W; y += 24) bricks.push(line(0, y, W, y));
+    k.vector(sheet, W, W, bricks, "ink", { strokeWidth: 1, name: "Bricks", absolute: { x: 0, y: 0 } });
+    k.rect(sheet, W - 40, W - 40, [], { name: "Tube", radius: 26, stroke: { color: "c", width: 3 }, effects: [bloom(k, "c", 14, 0.9)], absolute: { x: 20, y: 20 } });
+    const m = motif(k, sheet, ctx.occ.motif, 84, { roles: ctx.roles, line: 3.5, absolute: { x: W / 2 - 42, y: 40 }, name: "Picture", effects: [bloom(k, "b", 12, 0.9)] });
+    sway(k, m, 4, 1);
+  },
+  ink: () => "#1B1828",
+  cues: () => [
+    { layer: "Tube", preset: "flash", at: 200, params: { duration: 500, ease: { kind: "hold" } } },
+    { layer: "Message", preset: "flash", at: 900, params: { duration: 300, ease: { kind: "hold" } } },
+    { layer: "Picture", preset: "flash", at: 2400, params: { duration: 400, ease: { kind: "hold" } } },
+    { layer: "Message", preset: "pulse", at: 2900, params: { duration: 800, amount: 0.03 } }
+  ]
+};
+var papercut = {
+  id: "papercut",
+  label: "Paper cut",
+  blurb: "layers of cut paper \u2014 rolling hills below, a scalloped sky above \u2014 sway gently with their shadows while the picture bobs on top",
+  paper: (c) => ({ paper: mix(c[1], "#FFFFFF", 0.86), text: "#22202B" }),
+  type: INTER(900, { track: -2, max: 86 }),
+  note: { ...INTER(700), size: 20, lead: 1.3 },
+  band: { top: 104, right: 36, bottom: 140, left: 36 },
+  draw(ctx) {
+    const { k, sheet } = ctx;
+    const hill = (y, amp, phase, tone, name) => {
+      const pts = [];
+      for (let i = 0; i <= 12; i++) pts.push(`${-40 + i * 47} ${y + Math.sin(i * 0.9 + phase) * amp}`);
+      const d = `M-40 ${W + 10} L${pts.join(" L")} L${W + 40} ${W + 10} Z`;
+      const id = motifPath(k, sheet, d, tone, name);
+      k.patch(id, { effects: [shadow(k, "ink", 0.25, -4, 10)] });
+      return id;
+    };
+    const h1 = hill(372, 10, 0, "c", "Hill back"), h2 = hill(404, 12, 2, "b", "Hill middle"), h3 = hill(436, 9, 4, "a", "Hill front");
+    drift(k, h1, 8, 1);
+    drift(k, h2, 12, 1, 0.5);
+    drift(k, h3, 16, 1, 0.25);
+    const scallop = Array.from({ length: 9 }, (_, i) => `M${i * 60 - 30} 0 A30 30 0 0 0 ${i * 60 + 30} 0 Z`).join(" ");
+    const top = motifPath(k, sheet, scallop + ` M-30 -40 H${W + 30} V0 H-30 Z`, "a", "Scallops");
+    k.patch(top, { effects: [shadow(k, "ink", 0.25, 4, 8)] });
+    const m = motif(k, sheet, ctx.occ.motif, 74, { roles: ctx.roles, absolute: { x: W - 104, y: 318 }, name: "Picture", effects: [shadow(k, "ink", 0.3, 6, 10)] });
+    sway(k, m, 6, 1, 0.25);
+  },
+  cues: () => [
+    { layer: "Message", preset: "pulse", at: 400, params: { duration: 900, amount: 0.04 } },
+    { layer: "Picture", preset: "bounce", at: 2e3, params: { duration: 900, distance: 24 } }
+  ]
+};
+function motifPath(k, parent, d, role, name, o = {}) {
+  const raw = toVectorPaths(parsePathData(d));
+  const b = pathBounds(raw);
+  const pad = (o.stroke ?? 0) / 2;
+  const x0 = b.minX - pad, y0 = b.minY - pad;
+  const move = (p) => ({ x: p.x - x0, y: p.y - y0 });
+  const paths = raw.map((path) => ({ ...path, points: path.points.map((pt) => ({ ...pt, ...move(pt), ...pt.handleIn ? { handleIn: move(pt.handleIn) } : {}, ...pt.handleOut ? { handleOut: move(pt.handleOut) } : {} })) }));
+  return k.vector(parent, b.maxX - b.minX + 2 * pad, b.maxY - b.minY + 2 * pad, paths, role, { name, absolute: { x: x0, y: y0 }, ...o.stroke ? { strokeWidth: o.stroke } : {} });
+}
+function box2(k, parent, x, y, width, height, name, o = {}) {
+  return k.stack(parent, { width, height, name, absolute: { x, y }, ...o.clip ? { clip: true } : {}, ...o.fill ? { fill: o.fill } : {} });
+}
+var watercolor = {
+  id: "watercolor",
+  label: "Watercolour",
+  blurb: "soft washes of the occasion\u2019s colours bloom in the corners round serif words, specks of paint glint and the painted picture sways above",
+  paper: () => ({ paper: "#FFFDF8", text: "#2B2633" }),
+  type: SERIF_BOLD({ max: 74 }),
+  note: { ...SERIF_ITALIC({ weight: 500 }), size: 22, lead: 1.3 },
+  band: { top: 136, right: 40, bottom: 96, left: 40 },
+  draw(ctx) {
+    const { k, sheet, seed } = ctx, r = rng(seed);
+    const washes = [[-70, -60, 220, "a"], [W - 150, -80, 200, "b"], [-60, W - 110, 190, "c"], [W - 140, W - 120, 210, "a"]];
+    for (const [x, y, s, tone] of washes) k.ellipse(sheet, s, tone, { name: "Wash", opacity: 0.45, effects: [blurred(26)], absolute: { x, y } });
+    for (let i = 0; i < 16; i++) {
+      const top = i % 2 === 0, x = 20 + r() * (W - 40), y = top ? 10 + r() * 100 : W - 20 - r() * 70;
+      if (top && Math.abs(x - W / 2) < 60) continue;
+      const d = k.ellipse(sheet, 4 + r() * 6, pick(r, tones), { name: "Speck", opacity: 0.6, absolute: { x, y } });
+      twinkle(k, d, 0.55, 0.3, 1, r());
+    }
+    const m = motif(k, sheet, ctx.occ.motif, 86, { roles: ctx.roles, absolute: { x: W / 2 - 43, y: 32 }, name: "Picture" });
+    k.patch(m, { opacity: 0.92 });
+    sway(k, m, 5, 1);
+  },
+  cues: () => [
+    { layer: "Message", preset: "pulse", at: 1200, params: { duration: 1400, amount: 0.03 } }
+  ]
+};
+var minimal = {
+  id: "minimal",
+  label: "Minimal",
+  blurb: "a single line drawing of the occasion draws itself above quiet, well-spaced words, holds, and undraws for the next loop",
+  paper: () => ({ paper: "#FFFFFF", text: "#141414" }),
+  type: INTER(700, { track: -3, max: 66, em: 0.55 }),
+  note: { ...INTER(600, { upper: true, track: 18 }), size: 16, lead: 1.4 },
+  band: { top: 176, right: 60, bottom: 80, left: 60, gap: 22 },
+  draw(ctx) {
+    const { k, sheet } = ctx;
+    const m = motif(k, sheet, ctx.occ.motif, 110, { roles: ctx.roles, mono: "a", line: 2.5, absolute: { x: W / 2 - 55, y: 44 }, name: "Picture", loose: true });
+    kidsOf(ctx, m).forEach((id, i) => drawOnOff(k, id, 100 + i * 120, 1100));
+    if (!k.hasComponent("Rule")) k.component("Rule", { width: 28, height: 2, fill: "a" }, () => {
+    });
+    k.instance(sheet, "Rule", {}, { name: "Rule", absolute: { x: W / 2 - 14, y: W - 52 } });
+  },
+  cues: () => [
+    { layer: "Rule", preset: "pulse", at: 1600, params: { duration: 1e3, amount: 0.4 } }
+  ]
+};
+var buddy = {
+  id: "buddy",
+  label: "Cute buddy",
+  blurb: "a round little buddy bounces and squashes under the words, blinking, with the occasion\u2019s picture floating beside it",
+  paper: (c) => ({ paper: mix(c[0], "#FFFFFF", 0.88), text: "#2A1F2D" }),
+  type: INTER(900, { track: -2, max: 78 }),
+  note: { ...INTER(700), size: 20, lead: 1.3 },
+  band: { top: 34, right: 36, bottom: 196, left: 36 },
+  draw(ctx) {
+    const { k, sheet } = ctx;
+    const body = box2(k, sheet, W / 2 - 80, 318, 160, 150, "Buddy");
+    k.ellipse(body, 160, "b", { name: "Buddy body", absolute: { x: 0, y: 0 } });
+    k.rect(body, 160, 60, "b", { name: "Buddy base", absolute: { x: 0, y: 90 } });
+    const eyes = box2(k, body, 46, 52, 68, 26, "Eyes");
+    k.ellipse(eyes, 18, "ink", { name: "Eye", absolute: { x: 0, y: 0 } });
+    k.ellipse(eyes, 18, "ink", { name: "Eye", absolute: { x: 50, y: 0 } });
+    k.ellipse(eyes, 6, "paper", { name: "Eye light", absolute: { x: 9, y: 3 } });
+    k.ellipse(eyes, 6, "paper", { name: "Eye light", absolute: { x: 59, y: 3 } });
+    k.patch(eyes, { anchorY: 0.5 });
+    k.animate(eyes, "scaleY", [1400, 3200].flatMap((t) => [{ t, v: 1 }, { t: t + 80, v: 0.1 }, { t: t + 180, v: 1 }]));
+    k.ellipse(body, 22, "c", { name: "Cheek", opacity: 0.7, absolute: { x: 22, y: 82 } });
+    k.patch(eyes, { anchorY: 0.5 });
+    k.animate(eyes, "scaleY", [1400, 3200].flatMap((t) => [{ t, v: 1 }, { t: t + 80, v: 0.1 }, { t: t + 180, v: 1 }]));
+    k.ellipse(body, 22, "c", { name: "Cheek", opacity: 0.7, absolute: { x: 116, y: 82 } });
+    motifPath(k, body, "M66 92 C72 102 88 102 94 92", "ink", "Smile", { stroke: 4 });
+    squash(k, body, 0.05, 2);
+    bob(k, body, 6, 2, 0.25);
+    const m = motif(k, sheet, ctx.occ.motif, 70, { roles: ctx.roles, absolute: { x: W - 118, y: 300 }, name: "Picture" });
+    bob(k, m, 10, 1);
+    sway(k, m, 10, 1, 0.25);
+    const m2 = motif(k, sheet, pictureOf(ctx, 1), 46, { roles: ctx.roles, absolute: { x: 50, y: 330 }, name: "Picture small" });
+    bob(k, m2, 8, 1, 0.5);
+  },
+  cues: () => [
+    { layer: "Message", preset: "wobble", at: 600, params: { duration: 900 } }
+  ]
+};
+var balloons = {
+  id: "balloons",
+  label: "Balloons",
+  blurb: "balloons in the occasion\u2019s colours rise past both sides of the words, round and round without end",
+  paper: (c) => ({ paper: mix(c[2], "#FFFFFF", 0.9), text: "#1E1B2E" }),
+  type: INTER(900, { track: -2, max: 74 }),
+  note: { ...INTER(700), size: 20, lead: 1.3 },
+  band: { top: 60, right: 104, bottom: 60, left: 104 },
+  draw(ctx) {
+    const { k, sheet, seed } = ctx, r = rng(seed);
+    const lane = (x0, side) => {
+      for (let i = 0; i < 4; i++) {
+        const s = 54 + r() * 22, x = x0 + r() * (96 - s), y = i * 150 + r() * 40;
+        const b = motif(k, sheet, "balloon", s, { roles: { a: tones[(i + side) % 3], b: "ink", c: "paper", ink: "ink" }, absolute: { x, y }, name: "Balloon" });
+        travel(k, b, 600, -1);
+        sway(k, b, 6, 2, r());
+      }
+    };
+    lane(4, 0);
+    lane(W - 100, 1);
+  },
+  cues: () => [
+    { layer: "Message", preset: "bounce", at: 500, params: { duration: 900, distance: 14 } },
+    { layer: "Message", preset: "pulse", at: 2400, params: { duration: 800, amount: 0.04 } }
+  ]
+};
+var sparkle = {
+  id: "sparkle",
+  label: "Sparkle",
+  blurb: "a night of glitter: sparkles in the occasion\u2019s colours twinkle round glowing words, and one big star turns above them",
+  paper: () => ({ paper: "#150F2B", text: "#FFFFFF" }),
+  type: INTER(800, { track: -2, max: 80 }),
+  note: { ...SERIF_ITALIC({ weight: 500 }), size: 22, lead: 1.3 },
+  band: { top: 136, right: 40, bottom: 88, left: 40 },
+  ink: () => "#251D44",
+  draw(ctx) {
+    const { k, sheet, seed } = ctx, r = rng(seed);
+    for (let i = 0; i < 42; i++) {
+      const zone = i % 4;
+      const x = zone < 2 ? 8 + r() * (W - 30) : zone === 2 ? 4 + r() * 30 : W - 36 + r() * 30;
+      const y = zone === 0 ? 6 + r() * 112 : zone === 1 ? W - 82 + r() * 70 : 120 + r() * 260;
+      if (zone === 0 && Math.abs(x - W / 2) < 60) continue;
+      const s = 6 + r() * 14;
+      const id = k.vector(sheet, s, s, [sparkPath(s, 0.14)], pick(r, ["a", "b", "c", "paper"]), { name: "Sparkle", absolute: { x, y } });
+      breathe(k, id, 0.45, 1 + i % 3, r());
+    }
+    const m = motif(k, sheet, ctx.occ.motif, 84, { roles: ctx.roles, absolute: { x: W / 2 - 42, y: 30 }, name: "Picture", effects: [bloom(k, "c", 18, 0.6)] });
+    bob(k, m, 5, 1);
+    const big = k.vector(sheet, 44, 44, [sparkPath(44, 0.1)], "c", { name: "Big sparkle", absolute: { x: W / 2 + 36, y: 20 } });
+    spin(k, big, 0.25);
+    breathe(k, big, 0.25, 2);
+  },
+  cues: () => [
+    { layer: "Message", preset: "pulse", at: 900, params: { duration: 900, amount: 0.035 } },
+    { layer: "Message", preset: "pulse", at: 2900, params: { duration: 900, amount: 0.035 } }
+  ]
+};
+var doodle = {
+  id: "doodle",
+  label: "Doodle",
+  blurb: "a page of a notebook: the picture, hearts and stars doodle themselves in pen round the words, which wobble like a sticky note",
+  paper: () => ({ paper: "#FFFEF6", text: "#1D2433" }),
+  scenery: () => ({ rule: "#BFD7EA", margin: "#F2A0A0" }),
+  type: INTER(800, { track: -1, max: 78 }),
+  note: { ...SERIF_ITALIC({ weight: 500 }), size: 22, lead: 1.3 },
+  band: { top: 140, right: 44, bottom: 96, left: 60 },
+  draw(ctx) {
+    const { k, sheet } = ctx;
+    const rules = [];
+    for (let y = 36; y < W; y += 28) rules.push(line(0, y, W, y));
+    k.vector(sheet, W, W, rules, "rule", { strokeWidth: 1, name: "Ruled lines", absolute: { x: 0, y: 0 } });
+    k.vector(sheet, 2, W, [line(1, 0, 1, W)], "margin", { strokeWidth: 1.5, name: "Margin", absolute: { x: 44, y: 0 } });
+    const m = motif(k, sheet, ctx.occ.motif, 96, { roles: ctx.roles, mono: "a", line: 3.5, absolute: { x: W / 2 - 48, y: 26 }, name: "Picture", loose: true });
+    kidsOf(ctx, m).forEach((id, i) => drawOnOff(k, id, 100 + i * 140, 900));
+    const doodles = [["heart", 26, 52, 30, "b"], ["star", W - 92, 46, 34, "c"], ["sparkle", 70, W - 86, 30, "c"], ["heart", W - 98, W - 90, 36, "b"]];
+    doodles.forEach(([id, x, y, s, role], i) => {
+      const g = motif(k, sheet, id, s, { roles: ctx.roles, mono: role, line: 3, absolute: { x, y }, name: "Doodle" });
+      sway(k, g, 8, 1, i / 4);
+    });
+    const squiggle = motifPath(k, sheet, "M150 410 C170 398 190 422 210 410 C230 398 250 422 270 410 C290 398 310 422 330 410", "a", "Squiggle", { stroke: 3.5 });
+    drawOnOff(k, squiggle, 1100, 700);
+  },
+  cues: () => [
+    { layer: "Message", preset: "wobble", at: 1500, params: { duration: 1e3 } }
+  ]
+};
+var postcard = {
+  id: "postcard",
+  label: "Postcard",
+  blurb: "a vintage postcard in an airmail border: the stamp wiggles, the postmark thumps down, and the words are written large",
+  paper: () => ({ paper: "#F6EEDD", text: "#2C2420" }),
+  type: SERIF_BOLD({ max: 72 }),
+  note: { ...SERIF_ITALIC({ weight: 500 }), size: 21, lead: 1.3 },
+  band: { top: 142, right: 44, bottom: 64, left: 44 },
+  draw(ctx) {
+    const { k, sheet } = ctx;
+    k.rect(sheet, W - 16, W - 16, [], { name: "Airmail", stroke: { color: "b", width: 10 }, absolute: { x: 8, y: 8 } });
+    k.rect(sheet, W - 16, W - 16, [], { name: "Airmail stripes", stroke: { color: "a", width: 10, dash: [20, 20], cap: "NONE" }, absolute: { x: 8, y: 8 } });
+    const stamp = box2(k, sheet, W - 130, 30, 92, 106, "Stamp", { fill: "paper" });
+    k.patch(stamp, { rotation: -6, effects: [shadow(k, "ink", 0.2, 3, 6)] });
+    k.rect(stamp, 80, 94, "c", { name: "Stamp face", absolute: { x: 6, y: 6 } });
+    motif(k, stamp, ctx.occ.motif, 56, { roles: ctx.roles, absolute: { x: 18, y: 22 }, name: "Stamp picture" });
+    k.rect(stamp, 92, 106, [], { name: "Perforation", stroke: { color: "paper", width: 5, dash: [1, 8] }, absolute: { x: 0, y: 0 } });
+    const mark = box2(k, sheet, W - 236, 46, 150, 70, "Postmark");
+    motifPath(k, mark, "M8 35 A27 27 0 1 0 62 35 A27 27 0 1 0 8 35 Z", "ink", "Postmark ring", { stroke: 2.5 });
+    motifPath(k, mark, "M70 22 C85 14 100 30 115 22 C130 14 140 26 150 22 M70 35 C85 27 100 43 115 35 C130 27 140 39 150 35 M70 48 C85 40 100 56 115 48 C130 40 140 52 150 48", "ink", "Postmark waves", { stroke: 2.5 });
+    k.patch(mark, { opacity: 0.7 });
+    k.textStyle("Eyebrow", { ...SERIF, size: 18, fontWeight: 500, fontStyle: "italic", lineHeight: 24, letterSpacing: 2 });
+    k.text(sheet, "GREETINGS", { style: "Eyebrow", color: "text", name: "Eyebrow", autoWidth: true, absolute: { x: 40, y: 82 } });
+  },
+  ink: () => "#3A2E28",
+  cues: () => [
+    { layer: "Stamp", preset: "wobble", at: 300, params: { duration: 900 } },
+    { layer: "Postmark", preset: "pulse", at: 1200, params: { duration: 600, amount: 0.12 } }
+  ]
+};
+var popart = {
+  id: "popart",
+  label: "Pop art",
+  blurb: "comic-book pop art: a starburst spins behind the picture, halftone dots fill the corners and the words land with a shake",
+  paper: () => ({ paper: "#FFE14D", text: "#111111" }),
+  type: INTER(900, { upper: true, track: -2, max: 92 }),
+  note: { ...INTER(800, { upper: true, track: 8 }), size: 18, lead: 1.3 },
+  band: { top: 150, right: 34, bottom: 84, left: 34 },
+  wordsFx: (ctx) => [hardShadow(ctx.k, "a", 4, 5)],
+  draw(ctx) {
+    const { k, sheet } = ctx;
+    const dotsAt = (x0, y0, w, h) => {
+      const ps = [];
+      for (let y = 0; y < h; y += 14) for (let x = y / 14 % 2 ? 7 : 0; x < w; x += 14) {
+        const t = 1 - Math.hypot(x / w, y / h) / 1.4, r = Math.max(0.6, 5 * t);
+        ps.push(...toVectorPaths(parsePathData(`M${x - r} ${y} A${r} ${r} 0 1 0 ${x + r} ${y} A${r} ${r} 0 1 0 ${x - r} ${y} Z`)));
+      }
+      return k.vector(sheet, w, h, ps, "c", { name: "Halftone", absolute: { x: x0, y: y0 } });
+    };
+    dotsAt(0, 0, 150, 130);
+    const br = dotsAt(W - 150, W - 80, 150, 80);
+    k.patch(br, { rotation: 180 });
+    const burst = k.vector(sheet, 150, 150, [burstPath(150, 16, 0.2)], "b", { name: "Burst", absolute: { x: W / 2 - 75, y: -4 }, effects: [hardShadow(k, "ink", 4, 4)] });
+    spin(k, burst, 1 / 16);
+    motif(k, sheet, ctx.occ.motif, 82, { roles: ctx.roles, absolute: { x: W / 2 - 41, y: 30 }, name: "Picture" });
+  },
+  cues: () => [
+    { layer: "Message", preset: "shake", at: 250, params: { duration: 500, distance: 10 } },
+    { layer: "Picture", preset: "pulse", at: 1500, params: { duration: 700, amount: 0.12 } },
+    { layer: "Message", preset: "pulse", at: 2600, params: { duration: 700, amount: 0.05 } }
+  ]
+};
+var ornament = {
+  id: "ornament",
+  label: "Ornament",
+  blurb: "a rich ground with bands of turning rosettes above and below, gold work round the picture and the words in a festive serif",
+  paper: (c) => ({ paper: deepen(mix(c[1], "#140A2E", 0.72)), text: "#FFF6E2" }),
+  scenery: () => ({ gold: "#E2B655" }),
+  type: SERIF_BOLD({ max: 74 }),
+  note: { ...SERIF_ITALIC({ weight: 500 }), size: 22, lead: 1.3 },
+  band: { top: 146, right: 40, bottom: 104, left: 40 },
+  draw(ctx) {
+    const { k, sheet } = ctx;
+    const rosette = (x, y, s, i) => {
+      const g = motif(k, sheet, "flower", s, { roles: { a: i % 2 ? "gold" : "b", b: i % 2 ? "c" : "gold", c: "gold", ink: "gold" }, absolute: { x, y }, name: "Rosette" });
+      spin(k, g, (i % 2 ? 1 : -1) / 6);
+    };
+    for (let i = 0; i < 9; i++) {
+      rosette(i * 56 - 4, 6, 36, i);
+      rosette(i * 56 + 24, W - 42, 36, i + 1);
+    }
+    k.rect(sheet, W, 1.5, "gold", { name: "Gold line", absolute: { x: 0, y: 50 } });
+    k.rect(sheet, W, 1.5, "gold", { name: "Gold line", absolute: { x: 0, y: W - 52 } });
+    const halo = k.vector(sheet, 96, 96, [burstPath(96, 24, 0.08)], "gold", { name: "Halo", opacity: 0.5, absolute: { x: W / 2 - 48, y: 54 } });
+    spin(k, halo, 1 / 24);
+    const m = motif(k, sheet, ctx.occ.motif, 64, { roles: ctx.roles, absolute: { x: W / 2 - 32, y: 70 }, name: "Picture", effects: [bloom(k, "gold", 12, 0.5)] });
+    breathe(k, m, 0.05, 1);
+  },
+  cues: () => [
+    { layer: "Halo", preset: "pulse", at: 600, params: { duration: 1400, amount: 0.12 } },
+    { layer: "Message", preset: "pulse", at: 2200, params: { duration: 1200, amount: 0.03 } }
+  ]
+};
+var THEMES = Object.fromEntries([confetti, kinetic, elegant, retro, pixel, neon, papercut, watercolor, minimal, buddy, balloons, sparkle, doodle, postcard, popart, ornament].map((t) => [t.id, t]));
+
+export {
+  THEMES
+};