@popcraft/kit 0.31.0 → 0.32.0

package/dist/chunks/chunk-FCQR5LL4.js

@@ -0,0 +1,134 @@
+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 {
+  bauble,
+  disc,
+  draw,
+  holly,
+  polyP,
+  printVariant,
+  snowflake,
+  specksIn,
+  starPath
+} from "./chunk-YAIUTBXU.js";
+import {
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/print/holidays-christmas-gift-tags.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Christmas gift tags sticker sheet";
+var PAD = { top: 54, right: 60, bottom: 40, left: 60 };
+var D = 196;
+var MOTIFS = ["Tree", "Bauble", "Snowflake", "Holly"];
+var LOOK = {
+  Tree: { ground: "tagGreen", ink: "cream", art: "pineLight", art2: "gold", words: "cream" },
+  Bauble: { ground: "tagRed", ink: "cream", art: "gold", art2: "cream", words: "cream" },
+  Snowflake: { ground: "tagCream", ink: "red", art: "red", art2: "green", words: "red" },
+  Holly: { ground: "tagCream", ink: "green", art: "green", art2: "red", words: "green" }
+};
+function motif(m, cx, cy) {
+  const L = LOOK[m];
+  if (m === "Tree") {
+    const tiers = [0, 1, 2].map((i) => polyP([{ x: cx, y: cy - 38 + i * 17 }, { x: cx + 22 + i * 10, y: cy - 8 + i * 19 }, { x: cx - 22 - i * 10, y: cy - 8 + i * 19 }]));
+    return [
+      { name: "Tree", paths: tiers, color: L.art },
+      { name: "Trunk", paths: [polyP([{ x: cx - 5, y: cy + 30 }, { x: cx + 5, y: cy + 30 }, { x: cx + 5, y: cy + 40 }, { x: cx - 5, y: cy + 40 }])], color: "bark" },
+      { name: "Top star", paths: [starPath(cx, cy - 40, 9, 3.8)], color: L.art2 },
+      { name: "Lights", paths: [[-8, -18], [9, -10], [-16, 2], [8, 8], [-4, 20], [20, 24], [-24, 26], [2, -2]].map(([x, y]) => disc(cx + x, cy + y, 2.8)), color: L.art2 },
+      { name: "Garland", paths: [[-14, -4, 16, -12], [-22, 14, 26, 6], [-30, 34, 32, 26]].map(([a, b, c, d]) => ({ closed: false, points: [{ x: cx + a, y: cy + b }, { x: cx + c, y: cy + d, handleIn: { x: cx + (a + c) / 2, y: cy + (b + d) / 2 + 7 } }] })), color: L.ink, o: { strokeWidth: 1.2, opacity: 0.8 } }
+    ];
+  }
+  if (m === "Bauble") {
+    const b = bauble(cx, cy - 48, 34, { string: 2 });
+    return [
+      { name: "Bauble", paths: b.body, color: L.art },
+      { name: "Bauble shade", paths: b.shade, color: "goldDeep", o: { opacity: 0.5 } },
+      { name: "Bauble bands", paths: b.band, color: L.art2, o: { strokeWidth: 2 } },
+      { name: "Bauble cap", paths: b.cap, color: "goldDeep" },
+      { name: "Bauble shine", paths: b.shine, color: L.art2, o: { opacity: 0.7 } }
+    ];
+  }
+  if (m === "Snowflake") return [
+    { name: "Snowflake", paths: snowflake(cx, cy, 40), color: L.art, o: { strokeWidth: 3.2 } },
+    { name: "Snow dots", paths: [0, 1, 2, 3, 4, 5].map((i) => disc(cx + Math.cos(i * Math.PI / 3 + Math.PI / 6) * 30, cy + Math.sin(i * Math.PI / 3 + Math.PI / 6) * 30, 2.6)), color: L.art2 },
+    { name: "Snowflake heart", paths: [disc(cx, cy, 5)], color: L.art2 }
+  ];
+  return [
+    { name: "Holly", paths: [holly({ x: cx - 4, y: cy + 4 }, 48, Math.PI + 0.45), holly({ x: cx + 4, y: cy + 4 }, 48, -0.45), holly({ x: cx, y: cy + 6 }, 34, Math.PI / 2 + 0.1)], color: L.art },
+    { name: "Berries", paths: [disc(cx - 7, cy - 2, 7), disc(cx + 7, cy - 3, 7), disc(cx, cy + 9, 7)], color: L.art2 }
+  ];
+}
+function paper(w, h) {
+  const B = 12;
+  return [0, 1, 2, 3].map((i) => {
+    const band = { x: -B, y: -B + (h + 2 * B) * i / 4, w: w + 2 * B, h: (h + 2 * B) / 4 };
+    return { name: "Fibre", paths: specksIn(band, 260, 21 + i, 2.2), color: "fibre", o: { opacity: 0.45 } };
+  });
+}
+var holidays_christmas_gift_tags_default = defineTemplate({
+  id: "print-holidays-christmas-gift-tags",
+  meta: {
+    name: NAME,
+    description: "Twelve round Christmas gift tags on one sheet, to print on sticker paper or card and cut out: a layered pine tree, a striped bauble, a snowflake and a sprig of holly in red, green and cream, each with a stitched ring and \u201CTo\u201D and \u201CFrom\u201D lines. One component set, so a colour change reaches every tag. US Letter on kraft paper with bleed, and an A4 copy",
+    category: "sticker",
+    tags: ["christmas", "gift tags", "labels", "stickers", "sticker sheet", "presents", "wrapping", "printable", "holly", "snowflake", "kraft", "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: "#E6D6BC", text: "#4A2B1E", onPaper: "#7A2E25", primary: "#A3312A", onPrimary: "#FFF6E8" },
+      { name: "From the Lindqvist house" }
+    );
+    k.palette({ tagRed: "#A3312A", tagGreen: "#2F5A43", tagCream: "#FBF4E6", red: "#A3312A", green: "#2F5A43", cream: "#FBF4E6", gold: "#D9B356", goldDeep: "#8E6C25", pineLight: "#7FAE86", bark: "#6B4A33", fibre: "#9C7F57" });
+    k.textStyle("Head 30", { ...SERIF, size: 30, fontWeight: 600, fontStyle: "italic", letterSpacing: -0.4, lineHeight: 34 });
+    k.textStyle("Note 11", { size: 11, fontWeight: 500, letterSpacing: 0.4, lineHeight: 16 });
+    k.textStyle("Tag 13", { ...SERIF, size: 13, fontWeight: 600, fontStyle: "italic", lineHeight: 17 });
+    k.textStyle("Tag word 9", { size: 9, fontWeight: 700, letterSpacing: 2.2, lineHeight: 12 });
+    k.variantSet("Gift tag", "Design", MOTIFS, { width: D, height: D, radius: D / 2, padding: { top: 110, right: 30, bottom: 18, left: 30 }, gap: 4, align: "CENTER", props: { Greeting: "Merry Christmas", To: "To: ____________", From: "From: __________" } }, (m, id) => {
+      const L = LOOK[m];
+      k.vector(id, D - 16, D - 16, [disc((D - 16) / 2, (D - 16) / 2, (D - 16) / 2)], [], { name: "Stitch", absolute: { x: 8, y: 8 }, stroke: { color: L.words, width: 1.4, dash: [5, 4] }, opacity: 0.8 });
+      draw(k, id, motif(m, D / 2, 64));
+      k.propText(id, "Greeting", { style: "Tag 13", color: L.words, align: "CENTER", width: "FILL", name: "Greeting" });
+      k.propText(id, "To", { style: "Tag word 9", color: L.words, align: "CENTER", width: "FILL", name: "To" });
+      k.propText(id, "From", { style: "Tag word 9", color: L.words, align: "CENTER", width: "FILL", name: "From" });
+    }, (m) => ({ fill: LOOK[m].ground }));
+    const sheet = k.sheet;
+    const { width: W, height: H } = k.node(sheet);
+    k.flowSheet(sheet, 18, PAD, "paper", "MIN", "CENTER");
+    draw(k, sheet, paper(W, H));
+    k.text(sheet, "Merry & bright gift tags", { style: "Head 30", color: "text", align: "CENTER", width: "FILL", name: "Title" });
+    const grid = k.stack(sheet, { direction: "HORIZONTAL", wrap: true, gap: 22, width: "FILL", justify: "CENTER", name: "Tags" });
+    k.patch(grid, { counterAxisSpacing: 22 });
+    const greet = ["Merry Christmas", "Joy to you", "Ho ho ho", "Season\u2019s greetings", "Peace & joy", "Merry Christmas", "With love", "Don\u2019t peek!", "Happy holidays", "Be merry", "Noel", "For you, with love"];
+    greet.forEach((g, i) => k.instance(grid, `Gift tag/${MOTIFS[i % 4]}`, { Greeting: g }, { name: "Gift tag" }));
+    k.text(sheet, "Print on full-sheet sticker paper or card and cut round the stitched ring \xB7 {{brand.name}}", { style: "Note 11", color: "text", align: "CENTER", width: "FILL", name: "Note" });
+    k.variants(sheet, [printVariant("a4", { art: paper, pad: PAD, masterWidth: W })]);
+    return k.finish();
+  }
+});
+
+export {
+  holidays_christmas_gift_tags_default
+};

package/dist/chunks/chunk-FFD46KYF.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-SRSUY2WG.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.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-FGJRVCXO.js

@@ -0,0 +1,303 @@
+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 {
+  TESSERA,
+  assemble,
+  avatarSlice,
+  bentoBrand,
+  calendarSlice,
+  cellBox,
+  chartSlice,
+  drawChart,
+  fillWeek,
+  fitCalendar,
+  flip,
+  grot,
+  lockup,
+  switchSlice,
+  tile,
+  tileLabel
+} from "./chunk-KOVMGESL.js";
+import {
+  camera,
+  section,
+  seenAt
+} from "./chunk-UA7OECXL.js";
+import {
+  clicks,
+  glide,
+  pointer
+} from "./chunk-F3TA2VS2.js";
+import {
+  captionSwap
+} from "./chunk-ERLSOXU6.js";
+import {
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/style-bento-feature-demo.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = section("launch", 0, 8);
+var { beat } = S;
+var NAME = "Bento SaaS feature demo short";
+var BOARD = { w: 876, h: 860 };
+var BG = { x: 0, y: 0, w: BOARD.w, h: BOARD.h, cols: 4, rows: 5, gap: 14 };
+var CELLS = {
+  "Week tile": { c: 0, r: 0, cw: 2, rh: 3 },
+  "Switch tile": { c: 2, r: 0, cw: 2, rh: 1 },
+  "Sources tile": { c: 2, r: 1, cw: 2, rh: 2 },
+  "Follow tile": { c: 0, r: 3, cw: 2, rh: 2 },
+  "Stat tile": { c: 2, r: 3, cw: 2, rh: 2 }
+};
+var TILES = Object.keys(CELLS);
+var box = (n) => cellBox(BG, CELLS[n]);
+var PAD = 24;
+var SW = 150;
+var STEP = [2, 8, 14, 20, 26];
+var CLICK1 = beat(4);
+var CLICK2 = beat(23);
+var centre = (n) => {
+  const b = box(n);
+  return { x: b.x + b.w / 2, y: b.y + b.h / 2 };
+};
+var SHOTS = [
+  { t: beat(STEP[0]), duration: 600, zoom: 1.9, ...centre("Switch tile") },
+  { t: beat(STEP[1]), duration: 600, zoom: 1.8, ...centre("Sources tile") },
+  { t: beat(STEP[2]), duration: 600, zoom: 1.55, ...centre("Week tile") },
+  { t: beat(STEP[3]), duration: 600, zoom: 1.8, ...centre("Follow tile") },
+  { t: beat(STEP[4]), duration: 700, zoom: 1 }
+];
+var REST = { x: BOARD.w - 40, y: BOARD.h - 30 };
+var sw = box("Switch tile");
+var fo = box("Follow tile");
+var TARGETS = [{ x: sw.x + sw.w - PAD - SW / 2, y: sw.y + sw.h / 2 }, { x: fo.x + fo.w - PAD - 64, y: fo.y + PAD + 20 }];
+var STEPS = ["Flip on Autoplan", "It reads meetings, docs, inbox", "Focus blocks land in the gaps", "Follow-ups drafted, sent in one click"];
+var SOURCES = [["Meetings", 14, 0.7], ["Docs", 6, 0.35], ["Inbox threads", 38, 1]];
+var FOLLOW = ["Dana: revised launch checklist", "Priya: Q4 hiring plan notes", "Marco: pricing page feedback", "Ops: vendor renewal, due Fri"];
+var cues = [
+  assemble(TILES, 0, 70, 600),
+  { layer: "Source row", preset: "slide-in", at: beat(STEP[1]) + 200, stagger: { delay: 160, order: "selection" }, params: { direction: "left", duration: 450 } },
+  { layer: "Follow row", preset: "slide-in", at: beat(STEP[3]) + 300, stagger: { delay: 260, order: "selection" }, params: { direction: "left", duration: 420 } },
+  { layer: "Check", preset: "pop-in", at: beat(STEP[3]) + 500, stagger: { delay: 260, order: "selection" }, params: { duration: 420, amount: 0.6 } },
+  { layer: "Send", preset: "pulse", at: CLICK2 + 120, params: { duration: 400, amount: 0.08 } },
+  { layer: [...TILES], preset: "pulse", at: beat(STEP[4]) + 700, stagger: { delay: 50, order: "selection" }, params: { duration: 600, amount: 0.02 } },
+  { layer: "Call row", preset: "slide-in", at: beat(28), params: { direction: "up", duration: 600 } },
+  { layer: "Face", preset: "pulse", at: beat(10), stagger: { delay: 80, order: "selection" }, params: { duration: 400, amount: 0.08 } }
+];
+var counts = [
+  ...SOURCES.map(([label, n], i) => ({ layer: `${label} count`, at: beat(STEP[1]) + 400 + i * 160, duration: beat(3), counter: { from: 0, to: n } })),
+  { layer: "Focus count", at: beat(STEP[2]) + 600, duration: beat(3), counter: { from: 0, to: TESSERA.focus, suffix: " focus blocks" } },
+  { layer: "Follow count", at: beat(STEP[3]) + 300, duration: beat(3), counter: { from: 0, to: TESSERA.followUps, suffix: " drafted" } },
+  { layer: "Stat figure", at: beat(STEP[4]) + 300, duration: beat(3), counter: { from: 0, to: TESSERA.saved, decimals: 1, suffix: " h" } }
+];
+var swaps = [captionSwap([
+  "Monday is a mess. Watch.",
+  "First, flip on Autoplan here.",
+  "It reads your whole week.",
+  "Focus lands in the gaps.",
+  "Follow-ups drafted. Send them all.",
+  "6.5 hours back. Every week."
+], 0, S.duration - 30, { stagger: 50, in: 240, out: 160, rise: 20 })];
+var CUTS = {
+  story: { top: { x: 64, y: 250, w: 876 }, stage: { x: 64, y: 472, scale: 1 }, call: { x: 64, y: 1356, w: 876 }, caption: "Caption 64" },
+  post: { top: { x: 146, y: 36, w: 788 }, stage: { x: 146, y: 176, scale: 0.9 }, call: { x: 146, y: 976, w: 788 }, caption: "Caption 52" },
+  wide: { top: { x: 110, y: 120, w: 640 }, stage: { x: 860, y: 110, scale: 1 }, call: { x: 110, y: 860, w: 640 }, caption: "Caption 72" }
+};
+var style_bento_feature_demo_default = defineTemplate({
+  id: "motion-saas-style-bento-feature-demo",
+  meta: {
+    name: NAME,
+    description: "A 16-second feature demo in the bento grid look: the camera flies across a board of rounded product tiles while a pointer works it. It flips the Autoplan switch, meetings, docs and inbox threads count up on extending bars, four focus blocks drop into the week, follow-ups draft themselves and Send all is clicked, then the camera pulls back as the lime tile counts to 6.5 hours back. Captions as the headline, one per step, music on the bar lines. 9:16 with square and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "bento", "bento grid", "dashboard", "tiles", "ai", "productivity", "calendar", "demo", "feature", "cursor", "zoom", "counter", "captions", "music", "audio", "reel", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "demo", "video"],
+    useCases: ["launch", "education", "onboarding"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    bentoBrand(k);
+    grot(k, "Brand 34", 34, { weight: 700, lead: 1.1, spacing: -0.02 });
+    grot(k, "Site 24", 24, { weight: 500, lead: 1.3 });
+    for (const [n, sz] of [["Caption 72", 72], ["Caption 64", 64], ["Caption 52", 52]]) grot(k, n, sz, { weight: 700, lead: 1.06, spacing: -0.035 });
+    grot(k, "Label 22", 22, { weight: 500, lead: 1.3 });
+    grot(k, "Ui 22", 22, { weight: 500, lead: 1.3 });
+    grot(k, "Ui strong 22", 22, { weight: 700, lead: 1.3 });
+    grot(k, "Day 20", 20, { weight: 600, lead: 1.3 });
+    grot(k, "Step 30", 30, { weight: 600, lead: 1.2, spacing: -0.01 });
+    grot(k, "State 30", 30, { weight: 700, lead: 1.15, spacing: -0.02 });
+    grot(k, "Stat 100", 100, { weight: 700, lead: 1, spacing: -0.05 });
+    grot(k, "Button 20", 20, { weight: 700, lead: 1.2 });
+    grot(k, "Button 26", 26, { weight: 700, lead: 1.2 });
+    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 26", label: "Start free", pad: [18, 30] });
+    pill(k, "Send", { fill: "primary", ink: "onPrimary", style: "Button 20", label: "Send all", pad: [10, 18] });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Feature demo");
+    k.flowSheet(sheet, 0, 0, "paper", "MIN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: S.duration, fps: 30, audio: S.audio });
+    const C = CUTS.story;
+    const top = k.stack(sheet, { width: C.top.w, gap: 22, name: "Top", absolute: { x: C.top.x, y: C.top.y } });
+    const bar = k.stack(top, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, bar, { size: 40, style: "Brand 34" });
+    k.text(bar, `${TESSERA.feature}, step by step`, { style: "Site 24", color: "onPaper", autoWidth: true, name: "Feature words" });
+    k.text(top, swaps[0].words[0], { style: C.caption, color: "text", width: "FILL", name: "Caption" });
+    const steps = k.stack(sheet, { width: 640, gap: 18, name: "Steps", absolute: { x: 110, y: 480 } });
+    STEPS.forEach((label, i) => {
+      const r = k.stack(steps, { direction: "HORIZONTAL", gap: 18, align: "CENTER", name: `Step ${i + 1}` });
+      const n = k.stack(r, { width: 52, height: 52, radius: 16, fill: "card", justify: "CENTER", align: "CENTER", name: "Step badge" });
+      k.text(n, String(i + 1), { style: "Ui strong 22", color: "onCard", autoWidth: true, name: "Step no" });
+      k.text(r, label, { style: "Step 30", color: "text", autoWidth: true, name: "Step words" });
+    });
+    k.patch(steps, { visible: false });
+    const stage = k.frame(sheet, { x: C.stage.x, y: C.stage.y, width: BOARD.w, height: BOARD.h }, { name: "Stage", clip: true, radius: 36 });
+    k.patch(stage, { layoutPositioning: "ABSOLUTE" });
+    const cam = k.frame(stage, { x: 0, y: 0, width: BOARD.w, height: BOARD.h }, { name: "Camera" });
+    const wk = box("Week tile");
+    const weekT = tile(k, cam, BG, CELLS["Week tile"], { name: "Week tile", surface: "card", pad: PAD, justify: "MIN", gap: 14 });
+    const wl = tileLabel(k, weekT, "This week", { style: "Label 22", surface: "card", size: 22, name: "Week label" });
+    k.text(wl, `${TESSERA.focus} focus blocks`, { style: "Ui strong 22", color: "onCard", width: 170, align: "RIGHT", name: "Focus count" });
+    calendarSlice(k, weekT, { w: 100, h: 100, day: "Day 20", ink: "onCard" });
+    fitCalendar(k, weekT, wk.w - 2 * PAD, wk.h - 2 * PAD - 30 - 26 - 12 - 28);
+    const swT = tile(k, cam, BG, CELLS["Switch tile"], { name: "Switch tile", surface: "mint", pad: PAD, direction: "HORIZONTAL", align: "CENTER" });
+    const swL = k.stack(swT, { width: "HUG", gap: 8, name: "Switch words" });
+    tileLabel(k, swL, TESSERA.feature, { style: "Label 22", surface: "mint", size: 22, name: "Switch label" });
+    const state = k.text(swL, "On all week", { style: "State 30", color: "onMint", width: 220, name: "Switch state" });
+    switchSlice(k, swT, { w: SW, ink: "onMint" });
+    const srcT = tile(k, cam, BG, CELLS["Sources tile"], { name: "Sources tile", surface: "sky", pad: PAD, justify: "MIN", gap: 22 });
+    tileLabel(k, srcT, "Reading", { style: "Label 22", surface: "sky", size: 22, right: "Mon to Fri", name: "Sources label" });
+    const bars = [];
+    for (const [label, n, frac] of SOURCES) {
+      const row = k.stack(srcT, { gap: 8, name: "Source row" });
+      const head = k.stack(row, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Source head" });
+      k.text(head, label, { style: "Ui strong 22", color: "onSky", autoWidth: true, name: "Source name" });
+      k.text(head, String(n), { style: "Ui strong 22", color: "onSky", width: 60, align: "RIGHT", name: `${label} count` });
+      const track = k.stack(row, { height: 14, fill: k.tint("onSky", 0.12), radius: 7, name: "Source track" });
+      bars.push(k.rect(track, Math.round((box("Sources tile").w - 2 * PAD) * frac), 14, "night", { radius: 7, name: "Source bar" }));
+    }
+    const folT = tile(k, cam, BG, CELLS["Follow tile"], { name: "Follow tile", surface: "rose", pad: PAD, justify: "MIN", gap: 16 });
+    const fl = k.stack(folT, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Follow head" });
+    k.text(fl, `${TESSERA.followUps} drafted`, { style: "Ui strong 22", color: "onRose", width: 160, name: "Follow count" });
+    k.instance(fl, "Send", { Label: "Send all" }, { name: "Send" });
+    for (const f of FOLLOW) {
+      const row = k.stack(folT, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Follow row" });
+      const check = k.stack(row, { width: 28, height: 28, radius: 14, fill: "night", justify: "CENTER", align: "CENTER", name: "Check" });
+      k.vector(check, 14, 10, [{ closed: false, points: [{ x: 1, y: 5 }, { x: 5, y: 9 }, { x: 13, y: 1 }] }], [], { name: "Tick", stroke: { color: "primary", width: 3, cap: "ROUND", join: "ROUND" } });
+      k.text(row, f, { style: "Ui 22", color: "onRose", width: "FILL", name: "Follow words" });
+    }
+    k.text(folT, "+ 5 more from Monday's calls", { style: "Ui 22", color: "onRose", width: "FILL", name: "Follow more" });
+    const statT = tile(k, cam, BG, CELLS["Stat tile"], { name: "Stat tile", surface: "primary", pad: PAD, justify: "SPACE_BETWEEN" });
+    tileLabel(k, statT, "Back this week", { style: "Label 22", surface: "primary", size: 22 });
+    const sb = k.stack(statT, { gap: 6, name: "Stat body" });
+    k.text(sb, `${TESSERA.saved} h`, { style: "Stat 100", color: "onPrimary", width: 300, name: "Stat figure" });
+    k.text(sb, "for you, and for each of your 12 teammates", { style: "Ui 22", color: "onPrimary", width: "FILL", name: "Stat line" });
+    const p = pointer(k, stage, { ...REST, size: 60, fill: "night", edge: "card", ring: "primary" });
+    const call = k.stack(sheet, { direction: "HORIZONTAL", width: C.call.w, gap: 22, align: "CENTER", name: "Call row", absolute: { x: C.call.x, y: C.call.y } });
+    k.instance(call, "Call", { Label: "Start free" }, { name: "Call" });
+    k.text(call, TESSERA.trial, { style: "Site 24", color: "onPaper", width: "FILL", name: "Call line" });
+    const foot = k.frame(sheet, { x: 64, y: 1474, width: 952, height: 380 }, { name: "Foot" });
+    k.patch(foot, { layoutPositioning: "ABSOLUTE" });
+    const FG = { x: 0, y: 0, w: 952, h: 380, cols: 4, rows: 2, gap: 16 };
+    const fc = k.stack(foot, { width: 10, height: 10, fill: "sand", radius: 26, padding: 28, justify: "CENTER", align: "CENTER", name: "Foot team", absolute: { x: 0, y: 0 } });
+    avatarSlice(k, fc, { d: 64, n: 3, ring: "sand", overlap: 0.3 });
+    const fch = k.stack(foot, { width: 10, height: 10, fill: "night", radius: 26, padding: 28, justify: "MAX", name: "Foot chart", absolute: { x: 0, y: 0 } });
+    const chB = cellBox(FG, { c: 1, r: 0, cw: 2, rh: 2 });
+    chartSlice(k, fch, { w: chB.w - 56, h: chB.h - 80, ink: "onNight", weight: 6, name: "Foot line" });
+    const fm = k.stack(foot, { width: 10, height: 10, fill: "mint", radius: 26, name: "Foot mint", absolute: { x: 0, y: 0 } });
+    const fr = k.stack(foot, { width: 10, height: 10, fill: "primary", radius: 26, name: "Foot lime", absolute: { x: 0, y: 0 } });
+    for (const [id, cell] of [[fc, { c: 0, r: 0, cw: 1, rh: 2 }], [fch, { c: 1, r: 0, cw: 2, rh: 2 }], [fm, { c: 3, r: 0, cw: 1, rh: 1 }], [fr, { c: 3, r: 1, cw: 1, rh: 1 }]]) {
+      const b = cellBox(FG, cell);
+      k.patch(id, { x: b.x, y: b.y, width: b.w, height: b.h, layoutSizingHorizontal: "FIXED", layoutSizingVertical: "FIXED" });
+    }
+    switchSlice(k, fm, { w: 120, ink: "onMint", name: "Foot switch" });
+    k.patch(fm, { primaryAxisAlignItems: "CENTER", counterAxisAlignItems: "CENTER" });
+    k.patch(fr, { primaryAxisAlignItems: "CENTER", counterAxisAlignItems: "CENTER" });
+    k.logo(fr, 64, 64);
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    flip(k, sheet, [CLICK1 + 60]);
+    k.animate(state, "text.content", [{ t: 0, v: "Off", ease: ease.hold }, { t: CLICK1 + 200, v: "On all week" }]);
+    bars.forEach((id, i) => {
+      k.patch(id, { anchorX: 0 });
+      k.animate(id, "scaleX", [{ t: beat(STEP[1]) + 400 + i * 160, v: 0, ease: ease.out("expo") }, { t: beat(STEP[1]) + 400 + i * 160 + beat(3), v: 1 }]);
+    });
+    fillWeek(k, weekT, beat(STEP[2]) + 600, 300, { kinds: ["focus"] });
+    drawChart(k, foot, 300, beat(12), "Foot line");
+    camera(k, cam, BOARD.w, BOARD.h, SHOTS);
+    STEPS.forEach((_, i) => {
+      for (const id of k.named(sheet, `Step ${i + 1}`)) k.animate(id, "opacity", [
+        { t: 0, v: 0.3, ease: ease.hold },
+        { t: beat(STEP[i]), v: 0.3, ease: ease.out("cubic") },
+        { t: beat(STEP[i]) + 300, v: 1, ease: ease.hold },
+        { t: beat(STEP[i + 1]), v: 1, ease: ease.out("cubic") },
+        { t: beat(STEP[i + 1]) + 300, v: 0.3, ease: ease.hold },
+        { t: beat(STEP[4]) + 600, v: 0.3, ease: ease.out("cubic") },
+        { t: beat(STEP[4]) + 900, v: 1 }
+      ]);
+    });
+    const to = (i, s) => {
+      const a = seenAt(BOARD.w, BOARD.h, SHOTS[s], TARGETS[i]);
+      return { dx: a.x - REST.x, dy: a.y - REST.y };
+    };
+    glide(k, p, [
+      { t: beat(STEP[0]) + 300, dx: 0, dy: 0 },
+      { t: CLICK1 - 150, ...to(0, 0) },
+      { t: beat(STEP[1]), ...to(0, 0) },
+      { t: beat(STEP[1]) + 500, dx: 0, dy: 0 },
+      { t: beat(STEP[3]) + 700, dx: 0, dy: 0 },
+      { t: CLICK2 - 150, ...to(1, 3) },
+      { t: beat(STEP[4]), ...to(1, 3) },
+      { t: beat(STEP[4]) + 600, dx: 0, dy: 0 }
+    ]);
+    clicks(k, p, [CLICK1, CLICK2]);
+    k.patch(p.arrow, { opacity: 0 });
+    k.animate(p.arrow, "opacity", [{ t: beat(STEP[0]), v: 0, ease: ease.out("cubic") }, { t: beat(STEP[0]) + 250, v: 1, ease: ease.hold }, { t: beat(STEP[4]) + 600, v: 1, ease: ease.out("cubic") }, { t: beat(STEP[4]) + 900, v: 0 }]);
+    const place = (kit, id, c) => {
+      for (const n of kit.named(id, "Top")) kit.patch(n, { x: c.top.x, y: c.top.y, width: c.top.w });
+      for (const n of kit.named(id, "Caption")) kit.restyle(n, c.caption);
+      for (const n of kit.named(id, "Stage")) kit.patch(n, { x: c.stage.x, y: c.stage.y, ...c.stage.scale !== 1 ? { scaleX: c.stage.scale, scaleY: c.stage.scale, anchorX: 0, anchorY: 0 } : {} });
+      for (const n of kit.named(id, "Call row")) kit.patch(n, { x: c.call.x, y: c.call.y, width: c.call.w });
+      for (const n of kit.named(id, "Foot")) kit.patch(n, { visible: false });
+      for (const n of kit.named(id, "Steps")) kit.patch(n, { x: 110, y: 470 });
+    };
+    k.variants(sheet, [
+      { preset: "ig-post", adjust: (kit, id) => {
+        place(kit, id, CUTS.post);
+        for (const n of kit.named(id, "Feature words")) kit.patch(n, { visible: false });
+      } },
+      { preset: "video-1080p", adjust: (kit, id) => {
+        place(kit, id, CUTS.wide);
+        for (const n of kit.named(id, "Steps")) kit.patch(n, { visible: true });
+      } }
+    ]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_bento_feature_demo_default
+};