@popcraft/kit 0.53.7 → 0.53.8

package/dist/chunks/chunk-GUE5FHR3.js

@@ -0,0 +1,118 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  brand,
+  caption,
+  captionCues,
+  captionParts,
+  column,
+  glow,
+  rig,
+  sizes,
+  stage
+} from "./chunk-NO3QCKGC.js";
+import {
+  key
+} from "./chunk-LAPZ2X3J.js";
+import {
+  BASE,
+  LID,
+  PHONE,
+  deviceShadow,
+  devices
+} from "./chunk-WXWK2NO7.js";
+import {
+  DESKTOP_SCREEN,
+  appScreens
+} from "./chunk-2KFYCU3X.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  applyPreset
+} from "./chunk-5QUM6TXI.js";
+import {
+  ease
+} from "./chunk-ZGIMZ6SP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion3d/laptop-reveal.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 8e3;
+var FPS = 60;
+var SIZES = ["video-1080p"];
+var OPEN_AT = 700;
+var OPENED = 2300;
+var PHONE_AT = 4200;
+var CAPTION = { name: "Caption", kicker: "Fern for the web", title: "Your whole financial picture, on the big screen.", cta: "Open fern.app" };
+var CUES = captionCues(CAPTION, OPENED - 300);
+function build(k, sheet, s) {
+  k.nameSheet(sheet, `Laptop reveal \xB7 ${preset(s.preset).name}`);
+  glow(k, sheet, "primary", Math.round(1500 * s.u), s.W * 0.52, s.H * 0.62, 0.5);
+  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 2600 * s.u });
+  const laptop = rig(k, scene, s, "Laptop", LID.width, LID.height, s.W * 0.5, s.H * 0.66 - LID.height / 2);
+  k.patch(laptop, { scaleX: 0.47, scaleY: 0.47, rotateX: -16, rotateY: 10, anchorY: 1 });
+  const deck = k.instance(laptop, "Laptop base", {}, { name: "Keyboard deck" });
+  k.patch(deck, { x: Math.round((LID.width - BASE.width) / 2), y: LID.height, anchorY: 0, rotateX: 90, effects: [deviceShadow(0.45, 50, 90)] });
+  const hinge = k.group(laptop, { x: 0, y: 0, width: LID.width, height: LID.height }, { name: "Hinge" });
+  k.patch(hinge, { anchorY: 1, rotateX: 8 });
+  const display = k.instance(hinge, "Laptop lid", {}, { name: "Display" });
+  k.patch(display, { z: 2 });
+  const off = k.rect(hinge, DESKTOP_SCREEN.width, DESKTOP_SCREEN.height, "device", { radius: DESKTOP_SCREEN.radius, name: "Screen off" });
+  k.patch(off, { x: (LID.width - DESKTOP_SCREEN.width) / 2, y: 24, z: 4, opacity: 0 });
+  const outside = k.instance(hinge, "Laptop lid back", {}, { name: "Lid outside" });
+  k.patch(outside, { z: -2, rotateY: 180 });
+  key(k, hinge, "rotateX", [[OPEN_AT, -90, ease.out("expo")], [OPENED, 8]]);
+  key(k, off, "opacity", [[0, 1, ease.hold], [OPEN_AT + 500, 1, ease.out("cubic")], [OPENED + 200, 0]]);
+  key(k, laptop, "rotateY", [[0, 28, ease.inOut("cubic")], [OPENED + 400, 10, ease.inOut("sine")], [DURATION, 4]]);
+  key(k, laptop, "translateY", [[0, k.node(laptop).translateY + Math.round(160 * s.u), ease.out("expo")], [OPENED, k.node(laptop).translateY]]);
+  k.apply(scene, (n) => applyPreset(n, "push-in", { duration: DURATION, amount: 0.08 }));
+  const phone = rig(k, scene, s, "Phone", PHONE.width, PHONE.height, s.W * 0.75, s.H * 0.62);
+  k.patch(phone, { scaleX: 0.36, scaleY: 0.36, z: 240, rotateY: -16 });
+  const handset = k.instance(phone, "Phone", { Screen: { swap: "Screen / Home" } }, { name: "Handset" });
+  k.patch(handset, { effects: [deviceShadow(0.45, 40, 80)] });
+  key(k, phone, "translateY", [[PHONE_AT, k.node(phone).translateY + Math.round(700 * s.u), ease.out("expo")], [PHONE_AT + 1200, k.node(phone).translateY]]);
+  key(k, phone, "rotateY", [[PHONE_AT, -60, ease.out("expo")], [PHONE_AT + 1400, -16]]);
+  k.behave(phone, "translateY", [{ kind: "sine", amp: 10, freq: 0.3 }]);
+  captionParts(k, s, { kicker: CAPTION.kicker, cta: CAPTION.cta });
+  const col = column(s, 300);
+  caption(k, sheet, s, { ...CAPTION, step: "subtitle", width: col.width, align: "CENTER", at: { x: col.x, y: Math.round(64 * s.u) } });
+  k.cues(sheet, CUES);
+}
+var laptop_reveal_default = defineTemplate({
+  id: "motion-3d-laptop-reveal",
+  meta: {
+    name: "Laptop reveal",
+    description: "A closed laptop opens on its hinge in 3D, the screen wakes to your web app, the camera pushes in and a phone rises beside it \u2014 an 8-second, 60 fps 16:9 reveal for a web launch. Swap the display's screen, or drop in a screenshot",
+    category: "animation",
+    tags: ["animation", "3d", "laptop", "web app", "saas", "device", "mockup", "reveal", "launch"],
+    platforms: ["youtube", "linkedin", "x", "web"],
+    formats: ["video", "intro", "ad"],
+    useCases: ["launch", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  build() {
+    const k = new Kit("Laptop reveal", preset(SIZES[0]));
+    brand(k, "dark");
+    appScreens(k, ["Home", "Dashboard", "Screenshot"]);
+    devices(k, ["Phone", "Laptop lid", "Laptop lid back", "Laptop base"], { laptop: "Screen / Dashboard" });
+    const [cover] = sizes(k, SIZES, (sheet, s) => build(k, sheet, s));
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  laptop_reveal_default
+};

package/dist/chunks/chunk-GUUGKAMH.js

@@ -0,0 +1,42 @@
+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 {
+  MIN_TEXT_PX
+} from "./chunk-QTVM6KVR.js";
+import {
+  settlePayload
+} from "./chunk-JSTIX5CV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/migrations/min-type.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var minType = {
+  id: "min-type",
+  description: "type raised to its kind's minimum size",
+  apply(t) {
+    const floor = MIN_TEXT_PX[t.meta.kind];
+    const small = (n) => typeof n.fontSize === "number" && n.fontSize < floor - 1e-6;
+    const nodes = t.payload.nodes;
+    if (!Object.values(nodes).some((n) => n.type === "TEXT" && small(n))) return t;
+    const raised = {};
+    for (const [id, n] of Object.entries(nodes)) {
+      const tx = n;
+      raised[id] = n.type === "TEXT" && small(tx) ? { ...tx, fontSize: floor, ...typeof tx.lineHeight === "number" ? { lineHeight: Math.max(tx.lineHeight, Math.round(floor * tx.lineHeight / tx.fontSize)) } : {} } : n;
+    }
+    const styles = Object.fromEntries(Object.entries(t.payload.styles ?? {}).map(([id, st]) => {
+      const s = st;
+      return [id, s.type === "TEXT" && small(s) ? { ...s, fontSize: floor, ...typeof s.lineHeight === "number" ? { lineHeight: Math.max(s.lineHeight, Math.round(floor * s.lineHeight / s.fontSize)) } : {} } : st];
+    }));
+    return { ...t, payload: settlePayload({ ...t.payload, nodes: raised, styles }) };
+  }
+};
+
+export {
+  minType
+};

package/dist/chunks/chunk-GWQTUYCJ.js

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

package/dist/chunks/chunk-GXOQBGG2.js

@@ -0,0 +1,209 @@
+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,
+  lottieTemplate,
+  roundRect,
+  sparkle
+} from "./chunk-6HPECWAM.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/lottie/ai.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var AI = { paper: "#0E1022", surface: "#1A1D3A", line: "#2E3363", accent: "#8B7CFF", glow: "#B9A8FF", spark: "#5EE6D0", onAccent: "#0E1022", white: "#FFFFFF" };
+function thinkingMark(l, parent, cx, cy, r, ms, color = "glow") {
+  const s = l.shape(parent, sparkle(cx, cy, r), color, { name: "Sparkle" });
+  l.keys(s, "rotation", [[0, 0, E.inOut], [ms, 90]]);
+  l.scale(s, [[0, 1], [ms / 2, 0.82], [ms, 1]]);
+  return s;
+}
+var aiThinking = lottieTemplate({
+  slug: "thinking-shimmer",
+  sector: "ai",
+  role: "loader",
+  size: "spot",
+  duration: 2e3,
+  loop: true,
+  name: "AI thinking shimmer",
+  description: "The placeholder an assistant shows while it writes: a response card whose lines shimmer left to right under a turning sparkle \u2014 a two-second seamless loop, 800\xD7600",
+  colors: AI,
+  useCases: ["onboarding"],
+  tags: ["skeleton", "generating", "shimmer", "assistant"],
+  build(l) {
+    const card = l.box(l.sheet, 80, 110, 640, 380, "Response card", { fill: "surface", radius: 36 });
+    l.circle(card, 76, 76, 36, "line", { name: "Badge" });
+    thinkingMark(l, card, 76, 76, 22, 2e3);
+    const bars = [[140, 560], [194, 520], [248, 560], [302, 340]];
+    for (const [y, w] of bars) l.rect(card, 40, y, w, 24, "line", { radius: 12, name: "Line" });
+    const sheen = l.box(card, 0, 0, 640, 380, "Shimmer");
+    l.vector(sheen, bars.map(([y, w]) => ({ pts: roundRect(40, y, w, 24, 12), closed: true })), "white", { name: "Lines mask", mask: true });
+    const band = l.box(sheen, -300, 120, 260, 220, "Sheen");
+    l.rect(band, 0, 0, 130, 220, [l.k.gradient({ from: "glow", to: "glow", fromOpacity: 0, toOpacity: 0.9, angle: 0 })], { name: "Sheen in" });
+    l.rect(band, 130, 0, 130, 220, [l.k.gradient({ from: "glow", to: "glow", fromOpacity: 0.9, toOpacity: 0, angle: 0 })], { name: "Sheen out" });
+    l.keys(band, "translateX", [[0, 0, E.linear], [1900, 1e3, E.hold], [2e3, 0]]);
+  }
+});
+var aiNeuralPulse = lottieTemplate({
+  slug: "neural-pulse",
+  sector: "ai",
+  role: "hero",
+  size: "hero",
+  duration: 4e3,
+  loop: true,
+  ground: "paper",
+  name: "Neural net pulse",
+  description: "A hero loop for an AI product: signals race through a three-layer network, lighting each node they reach, over a soft glow \u2014 four seconds, seamless, 1600\xD7900",
+  colors: AI,
+  useCases: ["launch"],
+  tags: ["neural network", "hero", "background", "machine learning"],
+  build(l) {
+    l.circle(l.sheet, 800, 450, 520, [l.k.gradient({ from: "accent", to: "accent", kind: "RADIAL", fromOpacity: 0.28, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Glow" });
+    const cols = [[400, [240, 390, 510, 660]], [800, [180, 315, 450, 585, 720]], [1200, [300, 450, 600]]];
+    const at = (c, i) => [cols[c][0], cols[c][1][i]];
+    const wires = l.box(l.sheet, 0, 0, 1600, 900, "Wires");
+    for (let c = 0; c < 2; c++) for (let a = 0; a < cols[c][1].length; a++) for (let b = 0; b < cols[c + 1][1].length; b++) {
+      l.line(wires, [at(c, a), at(c + 1, b)], "line", 3, { name: "Wire" });
+    }
+    const routes = [[0, 1, 0], [2, 3, 1], [1, 2, 2], [3, 4, 0], [0, 0, 1], [2, 2, 2]];
+    const lit = /* @__PURE__ */ new Map();
+    routes.forEach(([a, b, c], i) => {
+      const t0 = i * 400;
+      const p = l.circle(l.sheet, ...at(0, a), 10, "spark", { name: "Signal" });
+      const [x0, y0] = at(0, a), [x1, y1] = at(1, b), [x2, y2] = at(2, c);
+      l.keys(p, "translateX", [[t0, 0, E.inOut], [t0 + 600, x1 - x0, E.inOut], [t0 + 1200, x2 - x0]]);
+      l.keys(p, "translateY", [[t0, 0, E.inOut], [t0 + 600, y1 - y0, E.inOut], [t0 + 1200, y2 - y0]]);
+      l.opacity(p, [[0, 0, E.hold], [t0, 0, E.out], [t0 + 120, 1, E.hold], [t0 + 1080, 1, E.in], [t0 + 1200, 0]]);
+      for (const [key, t] of [[`1:${b}`, t0 + 600], [`2:${c}`, t0 + 1200]]) lit.set(key, [...lit.get(key) ?? [], t]);
+    });
+    cols.forEach(([, ys], c) => ys.forEach((_, i) => {
+      const [x, y] = at(c, i);
+      const halo = l.circle(l.sheet, x, y, 30, "accent", { name: "Halo", opacity: 0 });
+      const flashes = (lit.get(`${c}:${i}`) ?? []).sort((p, q) => p - q);
+      if (flashes.length) {
+        const o = [[0, 0, E.hold]], s = [[0, 0.6, E.hold]];
+        for (const t of flashes) {
+          o.push([t - 1, 0, E.out], [t + 80, 0.55, E.out], [t + 600, 0, E.hold]);
+          s.push([t - 1, 0.6, E.out], [t + 600, 1.6, E.hold]);
+        }
+        l.opacity(halo, o);
+        l.scale(halo, s);
+      }
+      l.circle(l.sheet, x, y, 18, "surface", { name: "Node", stroke: { color: c === 1 ? "glow" : "accent", width: 5 } });
+    }));
+  }
+});
+var aiTyping = lottieTemplate({
+  slug: "chat-typing",
+  sector: "ai",
+  role: "loader",
+  size: "icon",
+  duration: 1200,
+  loop: true,
+  name: "Assistant typing",
+  description: 'The "assistant is typing" indicator: three dots rise and brighten in turn inside a chat bubble \u2014 a 1.2-second seamless loop, 512\xD7512',
+  colors: AI,
+  tags: ["chat", "typing", "indicator", "assistant"],
+  build(l) {
+    const box = roundRect(56, 116, 400, 240, 72);
+    l.shape(l.sheet, [...box.slice(0, 5), { x: 196, y: 356 }, { x: 104, y: 420 }, ...box.slice(5)], "surface", { name: "Bubble" });
+    for (let i = 0; i < 3; i++) {
+      const d = l.circle(l.sheet, 176 + i * 80, 236, 26, "accent", { name: "Dot", opacity: 0.45 });
+      const t = i * 160;
+      l.keys(d, "translateY", [[0, 0, E.hold], [t, 0, E.out], [t + 240, -34, E.inOut], [t + 520, 0, E.hold], [1200, 0]]);
+      l.opacity(d, [[0, 0.45, E.hold], [t, 0.45, E.out], [t + 240, 1, E.inOut], [t + 520, 0.45, E.hold], [1200, 0.45]]);
+    }
+  }
+});
+var aiGenerateButton = lottieTemplate({
+  slug: "generate-button",
+  sector: "ai",
+  role: "micro-interaction",
+  size: "button",
+  duration: 2400,
+  loop: true,
+  name: "Generate button",
+  description: "A Generate button that invites the click: a sheen sweeps the pill while its sparkle turns and two small stars twinkle \u2014 a 2.4-second seamless loop, 480\xD7160",
+  colors: AI,
+  tags: ["button", "generate", "sparkle", "cta"],
+  build(l) {
+    const k = l.k;
+    k.textStyle("Button 44", { size: 44, fontWeight: 700, lineHeight: 52, letterSpacing: -0.5 });
+    const pill = l.box(l.sheet, 40, 28, 400, 104, "Button", { fill: "accent", radius: 52, clip: true });
+    const band = l.box(pill, -200, 0, 160, 104, "Sheen");
+    l.rect(band, 0, 0, 80, 104, [k.gradient({ from: "white", to: "white", fromOpacity: 0, toOpacity: 0.45, angle: 0 })], { name: "Sheen in" });
+    l.rect(band, 80, 0, 80, 104, [k.gradient({ from: "white", to: "white", fromOpacity: 0.45, toOpacity: 0, angle: 0 })], { name: "Sheen out" });
+    l.keys(band, "translateX", [[0, 0, E.hold], [600, 0, E.inOut], [1800, 760, E.hold], [2400, 760]]);
+    thinkingMark(l, pill, 78, 52, 26, 2400, "onAccent");
+    for (const [cx, cy, r, t] of [[112, 26, 9, 300], [104, 80, 7, 1300]]) {
+      const s = l.shape(pill, sparkle(cx, cy, r), "onAccent", { name: "Twinkle" });
+      l.scale(s, [[0, 0, E.hold], [t, 0, E.pop], [t + 400, 1, E.in], [t + 900, 0, E.hold], [2400, 0]]);
+    }
+    k.text(pill, "Generate", { style: "Button 44", color: "onAccent", autoWidth: true, name: "Label", absolute: { x: 132, y: 26 } });
+  }
+});
+var aiModelRouting = lottieTemplate({
+  slug: "model-routing",
+  sector: "ai",
+  role: "explainer",
+  size: "hero",
+  duration: 6e3,
+  loop: true,
+  ground: "paper",
+  name: "Model routing",
+  description: "A feature explainer for a model router: each prompt travels to the hub, which picks the model that fits and lights it \u2014 three requests to three models in a six-second seamless loop, 1600\xD7900",
+  colors: AI,
+  useCases: ["pitch"],
+  tags: ["diagram", "router", "llm", "explainer"],
+  build(l) {
+    const prompt = l.box(l.sheet, 150, 330, 330, 240, "Prompt", { fill: "surface", radius: 28 });
+    for (const [y, w] of [[60, 240], [110, 200], [160, 250]]) l.rect(prompt, 40, y, w, 22, "line", { radius: 11, name: "Prompt line" });
+    const hub = [800, 450];
+    const models = [[1250, 210], [1250, 450], [1250, 690]];
+    l.line(l.sheet, [[480, 450], [hub[0] - 90, 450]], "line", 6, { name: "Wire in" });
+    for (const [x, y] of models) l.line(l.sheet, [[hub[0] + 90, 450], [x - 160, y]], "line", 6, { name: "Wire out" });
+    const ping = l.ring(l.sheet, hub[0], hub[1], 90, "glow", 6, { name: "Hub ping", opacity: 0 });
+    l.circle(l.sheet, hub[0], hub[1], 90, "surface", { name: "Hub", stroke: { color: "accent", width: 6 } });
+    const mark = l.shape(l.sheet, sparkle(hub[0], hub[1], 44), "glow", { name: "Hub mark" });
+    l.keys(mark, "rotation", [[0, 0, E.inOut], [2e3, 90, E.inOut], [4e3, 180, E.inOut], [6e3, 270]]);
+    const cards = models.map(([x, y], i) => {
+      const c = l.box(l.sheet, x - 160, y - 80, 320, 160, "Model", { fill: "surface", radius: 28 });
+      l.rect(c, 0, 0, 320, 160, "line", { radius: 28, name: "Model lit", opacity: 0 });
+      l.circle(c, 70, 80, 34, ["accent", "spark", "glow"][i], { name: "Model mark" });
+      l.rect(c, 130, 56, 150, 20, "line", { radius: 10, name: "Model line" });
+      l.rect(c, 130, 88, 100, 16, "line", { radius: 8, name: "Model line" });
+      return c;
+    });
+    const pingO = [[0, 0, E.hold]], pingS = [[0, 1, E.hold]];
+    models.forEach(([x, y], i) => {
+      const t0 = i * 2e3;
+      const p = l.circle(l.sheet, 480, 450, 14, "spark", { name: "Request" });
+      l.keys(p, "translateX", [[t0, 0, E.inOut], [t0 + 700, hub[0] - 480, E.hold], [t0 + 900, hub[0] - 480, E.inOut], [t0 + 1500, x - 160 - 480]]);
+      l.keys(p, "translateY", [[t0 + 900, 0, E.inOut], [t0 + 1500, y - 450]]);
+      l.opacity(p, [[0, 0, E.hold], [t0, 0, E.out], [t0 + 150, 1, E.hold], [t0 + 1400, 1, E.in], [t0 + 1550, 0]]);
+      pingO.push([t0 + 700, 0, E.out], [t0 + 760, 0.9, E.out], [t0 + 1300, 0, E.hold]);
+      pingS.push([t0 + 700, 1, E.out], [t0 + 1300, 1.7, E.hold]);
+      l.opacity(l.k.named(cards[i], "Model lit")[0], [[0, 0, E.hold], [t0 + 1450, 0, E.out], [t0 + 1650, 1, E.inOut], [t0 + 1950, 0, E.hold], [6e3, 0]]);
+      l.scale(cards[i], [[0, 1, E.hold], [t0 + 1450, 1, E.pop], [t0 + 1700, 1.05, E.inOut], [t0 + 1950, 1, E.hold], [6e3, 1]]);
+    });
+    pingO.push([6e3, 0]);
+    pingS.push([6e3, 1]);
+    l.opacity(ping, pingO);
+    l.scale(ping, pingS);
+  }
+});
+var AI_PACK = [aiThinking, aiNeuralPulse, aiTyping, aiGenerateButton, aiModelRouting];
+
+export {
+  aiThinking,
+  aiNeuralPulse,
+  aiTyping,
+  aiGenerateButton,
+  aiModelRouting,
+  AI_PACK
+};

package/dist/chunks/chunk-GZCHGKZP.js

@@ -0,0 +1,98 @@
+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 {
+  GRID,
+  ITALIC,
+  fitBorder,
+  fitPaper,
+  mapBorder,
+  mapPaper,
+  metroBrand,
+  nameplate,
+  network,
+  ticket
+} from "./chunk-7QJJCKK7.js";
+import {
+  MONO
+} from "./chunk-AXAAXHZF.js";
+import {
+  board
+} from "./chunk-LWSZATOL.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/social/transit-map-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var U = 80;
+var transit_map_link_preview_default = defineTemplate({
+  id: "social-transit-map-link-preview",
+  meta: {
+    name: "Transit map link preview",
+    description: "A link preview drawn as a metro map: the promise in heavy type on a folded pocket map with an atlas border, what the product is in one line and a ticket to ride, beside a four-line network crossing at an interchange with a river under it. 1200 \xD7 630, with a 1280 \xD7 640 GitHub social preview",
+    category: "social",
+    tags: ["transit map", "metro", "subway", "underground", "tube map", "stations", "ticket", "link preview", "open graph", "og image", "github", "integrations", "automation", "data pipeline", "saas"],
+    platforms: ["web", "x", "linkedin", "facebook", "github"],
+    formats: ["og-image"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Transit map link preview", preset("og-image"));
+    k.quantizeGeometry = true;
+    metroBrand(k, { promise: "Every app, one stop apart." });
+    k.textStyle("Plate 18", { size: 18, fontWeight: 800, letterSpacing: 0.4, lineHeight: 22 });
+    k.textStyle("Display 72", { size: 72, fontWeight: 800, letterSpacing: -3.2, lineHeight: 72 });
+    k.textStyle("Facts 23", { size: 23, fontWeight: 500, lineHeight: 32 });
+    k.textStyle("Stop 21", { size: 21, fontWeight: 600, letterSpacing: -0.2, lineHeight: 24 });
+    k.textStyle("Hub 25", { size: 25, fontWeight: 800, letterSpacing: -0.4, lineHeight: 28 });
+    k.textStyle("River 20", { ...ITALIC, size: 20, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Ticket 24", { size: 24, fontWeight: 800, letterSpacing: -0.5, lineHeight: 28 });
+    k.textStyle("Stub 16", { ...MONO, size: 16, fontWeight: 700, letterSpacing: 0.4, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Site 18", { ...MONO, size: 18, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Ref 16", { ...MONO, size: 16, fontWeight: 700, lineHeight: 16 });
+    pill(k, "Chip", { fill: "text", ink: "paper", style: "Site 18", label: "{{brand.site}}", pad: [8, 14], radius: 4 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 64, right: 56, bottom: 64, left: 72 }, "paper", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    mapPaper(k, sheet, 1200, 630, { folds: [3, 1], grain: 0.03 });
+    mapBorder(k, sheet, 1200, 630, { style: "Ref 16", margin: 16, cell: 130 });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, align: "CENTER", justify: "SPACE_BETWEEN", name: "Row" });
+    const copy = k.stack(row, { gap: 22, width: 500, name: "Copy" });
+    nameplate(k, copy, "{{brand.name}} \xB7 Network map", { style: "Plate 18", pad: [6, 12], textName: "Plate name" });
+    k.text(copy, "{{brand.promise}}", { style: "Display 72", color: "text", name: "Headline" });
+    k.text(copy, "Sync the tools your business runs on. A train leaves every 60 seconds.", { style: "Facts 23", color: "onPaper", name: "Facts" });
+    const foot = k.stack(copy, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Foot" });
+    ticket(k, foot, { big: "Ride free", stub: ["Admit one", "14 days"], bigStyle: "Ticket 24", stubStyle: "Stub 16", height: 60, stubWidth: 128, pad: 16, name: "Call" });
+    k.instance(foot, "Chip", { Label: "{{brand.site}}" }, { name: "Site" });
+    const bd = board(k, row, GRID.cols * U, Math.round(GRID.rows * U), 0.68, "Board");
+    network(k, bd, { u: U, label: "Stop 21", hub: "Hub 25", river: "River 20", west: -0.4, still: true });
+    k.variants(sheet, [{ preset: "github-social", adjust: (kit, id) => {
+      const f = kit.node(id);
+      fitPaper(kit, id, f.width, f.height, { folds: [3, 1] });
+      fitBorder(kit, id, f.width, f.height, { margin: 16, cell: 130 });
+      for (const n of kit.named(id, "Copy")) kit.patch(n, { width: 560 });
+    } }]);
+    return k.finish();
+  }
+});
+
+export {
+  transit_map_link_preview_default
+};

package/dist/chunks/chunk-H22RPQPG.js

@@ -0,0 +1,123 @@
+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 {
+  keyEverySize,
+  sourceLine
+} from "./chunk-UK7IIX64.js";
+import {
+  titleSafe
+} from "./chunk-3YBY6VW3.js";
+import {
+  donutSlice
+} from "./chunk-GG26TBBH.js";
+import {
+  logoBadge,
+  outro
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/data/donut.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SHARES = [
+  { name: "Meals", label: "Food on the table", pct: 64, color: "s1" },
+  { name: "Delivery", label: "Van runs to 38 pantries", pct: 17, color: "s2" },
+  { name: "Kitchen", label: "Community kitchen", pct: 11, color: "s3" },
+  { name: "Running", label: "Rent, fuel and admin", pct: 8, color: "s4" }
+];
+var D = 600;
+var SOURCE = "Harbor Food Bank annual accounts, 2025\u201326";
+var SLICE_AT = 500;
+var SLICE_GAP = 220;
+var counts = SHARES.map((s, i) => ({ layer: `${s.name} share`, at: SLICE_AT + 150 + i * SLICE_GAP, duration: 900, counter: { from: 0, to: s.pct, suffix: "%" } }));
+var cues = [
+  { layer: "Logo", preset: "pop-in", at: 0 },
+  { layer: "Title", preset: "words-in", at: 100, params: { duration: 600, amount: 70 } },
+  { layer: "Slice", preset: "pop-in", at: SLICE_AT, params: { duration: 650, amount: 0.4 }, stagger: { delay: SLICE_GAP } },
+  { layer: "Centre", preset: "fade-in", at: SLICE_AT + 300 },
+  { layer: "Row", preset: "slide-in", at: SLICE_AT + 150, params: { direction: "right", distance: 80 }, stagger: { delay: SLICE_GAP } },
+  { layer: "Source", preset: "fade-in", at: 2400 },
+  outro(["Logo", "Title", "Slice", "Centre", "Row", "Source"], 7400)
+];
+var donut_default = defineTemplate({
+  id: "motion-chart-donut",
+  meta: {
+    name: "Animated donut chart",
+    description: "Where a food bank\u2019s \xA310 goes: four slices burst out from the centre in turn while the legend slides in and each share counts to its percentage \u2014 8.5 seconds, 16:9 with a 4:5 cut",
+    category: "animation",
+    tags: ["animation", "data", "chart", "donut chart", "pie", "nonprofit", "counter"],
+    platforms: ["linkedin", "instagram", "facebook", "slides"],
+    formats: ["video", "portrait-post", "slide-deck"],
+    useCases: ["stats", "report"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Animated donut chart", preset("video-1080p"));
+    k.brand(
+      { paper: "#F3F7F4", text: "#10302A", onPaper: "#48625B", s1: "#1F7A5C", s2: "#F2B134", s3: "#E4572E", s4: "#6C8EAD", card: "#FFFFFF", onCard: "#10302A", badge: "#1F7A5C" },
+      { title: "Where your \xA310 goes" }
+    );
+    k.textStyle("Title 80", { size: 80, fontWeight: 900, letterSpacing: -2, lineHeight: 88 });
+    k.textStyle("Centre 96", { size: 96, fontWeight: 900, letterSpacing: -3, lineHeight: 100, textAlign: "CENTER" });
+    k.textStyle("Centre label 28", { size: 28, fontWeight: 600, lineHeight: 34, textAlign: "CENTER" });
+    k.textStyle("Share 56", { size: 56, fontWeight: 900, letterSpacing: -1, lineHeight: 64 });
+    k.textStyle("Row label 34", { size: 34, fontWeight: 600, lineHeight: 42 });
+    k.textStyle("Source 24", { size: 24, fontWeight: 500, lineHeight: 30 });
+    sourceLine(k, { dot: "s1", ink: "onPaper", style: "Source 24", text: SOURCE });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 48, titleSafe(), "paper", "SPACE_BETWEEN", "MIN");
+    k.timeline(sheet, { duration: 8500, fps: 30 });
+    const head = k.stack(sheet, { direction: "HORIZONTAL", gap: 28, align: "CENTER", name: "Header" });
+    logoBadge(k, head, { fill: "badge", size: 56, name: "Logo" });
+    k.text(head, "{{brand.title}}", { style: "Title 80", color: "text", name: "Title", width: "FILL" });
+    const body = k.stack(sheet, { direction: "HORIZONTAL", gap: 120, align: "CENTER", justify: "CENTER", name: "Body" });
+    const donut = k.stack(body, { width: D, height: D, justify: "CENTER", align: "CENTER", name: "Donut" });
+    const slices = k.stack(donut, { width: D, height: D, name: "Slices", absolute: { x: 0, y: 0 } });
+    let from = 0;
+    for (const s of SHARES) {
+      const to = from + s.pct / 100;
+      k.vector(slices, D, D, [donutSlice(D, from, to)], s.color, { name: "Slice", absolute: { x: 0, y: 0 } });
+      from = to;
+    }
+    const centre = k.stack(donut, { width: 340, height: 340, radius: 170, fill: "paper", gap: 4, align: "CENTER", justify: "CENTER", name: "Centre" });
+    k.text(centre, "\xA310", { style: "Centre 96", color: "text", name: "Gift" });
+    k.text(centre, "every gift", { style: "Centre label 28", color: "onPaper", name: "Gift label" });
+    const legend = k.stack(body, { width: 760, gap: 20, name: "Legend" });
+    for (const s of SHARES) {
+      const row = k.stack(legend, { direction: "HORIZONTAL", gap: 24, align: "CENTER", fill: "card", radius: 24, padding: { top: 18, right: 28, bottom: 18, left: 28 }, name: "Row" });
+      k.rect(row, 28, 28, s.color, { radius: 8, name: "Swatch" });
+      k.text(row, `${s.pct}%`, { style: "Share 56", color: "onCard", name: `${s.name} share`, width: 150 });
+      k.text(row, s.label, { style: "Row label 34", color: "onCard", name: `${s.name} label`, width: "FILL" });
+    }
+    k.instance(sheet, "Source line", { Source: SOURCE }, { name: "Source" });
+    keyEverySize(k, sheet, [{
+      preset: "ig-portrait",
+      adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 80, right: 72, bottom: 80, left: 72 }, primaryAxisAlignItems: "CENTER", itemSpacing: 40, counterAxisSpacing: 40 });
+        for (const b of kit.named(id, "Body")) kit.patch(b, { layoutMode: "VERTICAL", itemSpacing: 40, counterAxisSpacing: 40 });
+        for (const l of kit.named(id, "Legend")) kit.patch(l, { width: 936, itemSpacing: 12 });
+        for (const r of kit.named(id, "Row")) kit.patch(r, { padding: { top: 10, right: 24, bottom: 10, left: 24 } });
+        for (const d of kit.named(id, "Donut")) kit.patch(d, { scaleX: 1, scaleY: 1 });
+      }
+    }], cues, counts);
+    return k.finish();
+  }
+});
+
+export {
+  donut_default
+};