@popcraft/kit 0.31.0 → 0.32.0

package/dist/chunks/chunk-CSW2CAUK.js

@@ -0,0 +1,112 @@
+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 {
+  bar,
+  card,
+  saasUi,
+  tickMark
+} from "./chunk-X4HN5LP7.js";
+import {
+  E
+} from "./chunk-SRSUY2WG.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/lottie/saas-ui-trial-timeline.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var saas_ui_trial_timeline_default = saasUi({
+  slug: "trial-timeline",
+  role: "explainer",
+  size: "spot",
+  duration: 6e3,
+  loop: true,
+  title: "trial timeline",
+  description: "How a free trial runs, for a pricing or checkout page: a traveller moves along the line from today, past the reminder bell, to the day the card is billed, and each stop lights and pops as it is reached \u2014 a six-second seamless loop, 800\xD7600",
+  useCases: ["pricing", "onboarding"],
+  tags: ["free trial", "timeline", "billing", "reminder", "checkout"],
+  build(l) {
+    l.circle(l.sheet, 400, 300, 258, "soft", { name: "Backdrop" });
+    const c = card(l, l.sheet, 60, 114, 680, 372, "Trial");
+    bar(l, c, 40, 38, 150, 18, "ink", { name: "Title" });
+    bar(l, c, 40, 68, 232, 12, "mute", { name: "Subtitle" });
+    l.rect(c, 548, 34, 92, 34, "soft", { radius: 17, name: "Plan" });
+    bar(l, c, 566, 46, 56, 10, "accent", { name: "Plan name" });
+    const Y = 202, X = [100, 340, 580], REACH = [500, 2100, 3700], OUT = 5200;
+    bar(l, c, X[0], Y - 5, X[2] - X[0], 10, "line", { name: "Track" });
+    const fill = bar(l, c, X[0], Y - 5, X[2] - X[0], 10, "accent", { name: "Track done" });
+    l.pivot(fill, 0, 0.5);
+    l.k.patch(fill, { scaleX: 0.5 });
+    l.keys(fill, "scaleX", [[0, 0, E.hold], [REACH[0] + 300, 0, E.inOut], [REACH[1], 0.5, E.hold], [REACH[1] + 300, 0.5, E.inOut], [REACH[2], 1, E.hold], [OUT + 450, 0, E.hold]]);
+    l.opacity(fill, [[0, 1, E.hold], [OUT, 1, E.inOut], [OUT + 400, 0, E.hold], [OUT + 500, 1, E.hold]]);
+    X.forEach((x, i) => {
+      const t = REACH[i];
+      const stop = l.box(c, x - 60, Y - 104, 120, 208, "Stop");
+      const sign = l.box(stop, 30, 0, 60, 60, "Sign", { fill: "paper", radius: 20 });
+      const lit = l.rect(sign, 0, 0, 60, 60, i === 2 ? "success" : "accent", { radius: 20, name: "Sign lit", opacity: i < 2 ? 1 : 0 });
+      l.opacity(lit, [[0, 0, E.hold], [t, 0, E.out], [t + 260, 1, E.hold], [OUT, 1, E.inOut], [OUT + 400, 0, E.hold]]);
+      if (i === 0) {
+        l.rect(sign, 13, 16, 34, 30, "mute", { radius: 8, name: "Calendar" });
+        const on = l.rect(sign, 13, 16, 34, 30, "white", { radius: 8, name: "Calendar lit", opacity: 1 });
+        for (const x2 of [21, 35]) bar(l, sign, x2, 11, 5, 11, "mute", { name: "Calendar ring" });
+        l.rect(sign, 25, 28, 10, 10, "paper", { radius: 3, name: "Calendar day" });
+        const dayOn = l.rect(sign, 25, 28, 10, 10, "accent", { radius: 3, name: "Calendar day lit", opacity: 1 });
+        for (const id of [on, dayOn]) l.opacity(id, [[0, 0, E.hold], [t, 0, E.out], [t + 260, 1, E.hold], [OUT, 1, E.inOut], [OUT + 400, 0, E.hold]]);
+      } else if (i === 1) {
+        const bell = l.box(sign, 10, 8, 40, 44, "Bell");
+        const dome = [{ x: 4, y: 30 }, { x: 8, y: 16, handleIn: { x: 8, y: 26 }, handleOut: { x: 8, y: 6 } }, { x: 20, y: 4, handleIn: { x: 12, y: 4 }, handleOut: { x: 28, y: 4 } }, { x: 32, y: 16, handleIn: { x: 32, y: 6 }, handleOut: { x: 32, y: 26 } }, { x: 36, y: 30 }];
+        l.shape(bell, dome, "mute", { name: "Bell dome" });
+        const domeOn = l.shape(bell, dome, "white", { name: "Bell dome lit", opacity: 1 });
+        l.circle(bell, 20, 36, 5, "mute", { name: "Bell clapper" });
+        const clapOn = l.circle(bell, 20, 36, 5, "white", { name: "Bell clapper lit", opacity: 1 });
+        for (const id of [domeOn, clapOn]) l.opacity(id, [[0, 0, E.hold], [t, 0, E.out], [t + 260, 1, E.hold], [OUT, 1, E.inOut], [OUT + 400, 0, E.hold]]);
+        l.pivot(bell, 0.5, 0.1);
+        l.keys(bell, "rotation", [[0, 0, E.hold], [t, 0, E.out], [t + 110, 20, E.inOut], [t + 260, -16, E.inOut], [t + 410, 11, E.inOut], [t + 560, -6, E.inOut], [t + 720, 0, E.hold]]);
+      } else {
+        l.rect(sign, 12, 18, 36, 26, "mute", { radius: 6, name: "Card" });
+        const on = l.rect(sign, 12, 18, 36, 26, "white", { radius: 6, name: "Card lit", opacity: 0 });
+        l.opacity(on, [[0, 0, E.hold], [t, 0, E.out], [t + 260, 1, E.hold], [OUT, 1, E.inOut], [OUT + 400, 0, E.hold]]);
+        l.rect(sign, 12, 24, 36, 6, "paper", { name: "Card stripe" });
+        fadeStripe(l.rect(sign, 12, 24, 36, 6, "success", { name: "Card stripe lit", opacity: 0 }), t);
+      }
+      l.scale(sign, [[0, 1, E.hold], [t, 1, E.pop], [t + 200, 1.18, E.inOut], [t + 560, 1, E.hold]]);
+      l.keys(sign, "translateY", [[0, 0, E.hold], [t, 0, E.out], [t + 200, -8, E.inOut], [t + 560, 0, E.hold]]);
+      const rip = l.ring(stop, 60, 104, 18, i === 2 ? "success" : "accent", 5, { name: "Stop ripple", opacity: 0 });
+      l.scale(rip, [[0, 1, E.hold], [t, 1, E.out], [t + 800, 2.3, E.hold]]);
+      l.opacity(rip, [[0, 0, E.hold], [t, 0, E.out], [t + 80, 0.7, E.in], [t + 800, 0, E.hold]]);
+      l.circle(stop, 60, 104, 15, "surface", { name: "Stop", stroke: { color: "mute", width: 5 } });
+      const dot = l.circle(stop, 60, 104, 17, i === 2 ? "success" : "accent", { name: "Stop reached", opacity: i < 2 ? 1 : 0 });
+      const o = [[0, 0, E.hold], [t, 0, E.out], [t + 200, 1, E.hold], [OUT, 1, E.inOut], [OUT + 400, 0, E.hold]];
+      l.opacity(dot, o);
+      l.scale(dot, [[0, 0.4, E.hold], [t, 0.4, E.pop], [t + 380, 1, E.hold]]);
+      l.opacity(l.circle(stop, 60, 104, 6, "white", { name: "Stop core", opacity: i < 2 ? 1 : 0 }), o);
+      bar(l, stop, 60 - [34, 46, 38][i], 144, [68, 92, 76][i], 14, "ink", { name: "Stop label" });
+      bar(l, stop, 60 - [24, 30, 42][i], 170, [48, 60, 84][i], 10, "mute", { name: "Stop date" });
+    });
+    bar(l, c, 40, 300, 600, 2, "line", { name: "Rule" });
+    l.circle(c, 52, 334, 12, "success", { name: "Promise" });
+    tickMark(l, c, 52, 334, 0.62, "white", 3.5, "Promise tick");
+    bar(l, c, 76, 328, 168, 12, "mute", { name: "Promise words" });
+    const cta = l.box(c, 500, 314, 140, 40, "Start", { fill: "accent", radius: 20 });
+    bar(l, cta, 34, 14, 72, 12, "white", { name: "Start label" });
+    l.scale(cta, [[0, 1, E.hold], [REACH[2] + 500, 1, E.out], [REACH[2] + 680, 1.07, E.inOut], [REACH[2] + 1100, 1, E.hold]]);
+    const trav = l.box(c, X[0] - 22, Y - 22, 44, 44, "Traveller");
+    l.circle(trav, 22, 22, 22, "accent", { name: "Traveller halo", opacity: 0.25 });
+    l.circle(trav, 22, 22, 13, "surface", { name: "Traveller", stroke: { color: "accent", width: 6 } });
+    l.k.patch(trav, { translateX: X[1] - X[0] });
+    const dx = (i) => X[i] - X[0];
+    l.keys(trav, "translateX", [[0, dx(0), E.hold], [REACH[0] + 300, dx(0), E.inOut], [REACH[1], dx(1), E.hold], [REACH[1] + 300, dx(1), E.inOut], [REACH[2], dx(2), E.hold], [5700, dx(2), E.hold], [5710, dx(0), E.hold], [6e3, dx(0)]]);
+    l.scale(trav, [[0, 0, E.pop], [REACH[0], 1, E.hold], [REACH[1], 1, E.out], [REACH[1] + 150, 1.25, E.inOut], [REACH[1] + 450, 1, E.hold], [REACH[2], 1, E.out], [REACH[2] + 150, 1.25, E.inOut], [REACH[2] + 450, 1, E.hold], [OUT, 1, E.in], [OUT + 400, 0, E.hold], [6e3, 0]]);
+    function fadeStripe(id, t) {
+      l.opacity(id, [[0, 0, E.hold], [t, 0, E.out], [t + 260, 1, E.hold], [OUT, 1, E.inOut], [OUT + 400, 0, E.hold]]);
+    }
+  }
+});
+
+export {
+  saas_ui_trial_timeline_default
+};

package/dist/chunks/chunk-CT35IIMQ.js

@@ -0,0 +1,109 @@
+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 {
+  art,
+  businessCard,
+  cardParts,
+  contactLines,
+  disc,
+  qrCode
+} from "./chunk-7UZPG5OF.js";
+import {
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  circle3,
+  curve3,
+  pt3,
+  smooth
+} from "./chunk-6RCDZU4R.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/print/printshop-card-cafe.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function bean(x, y, r, deg) {
+  const a = deg * Math.PI / 180;
+  const pts = Array.from({ length: 12 }, (_, i) => {
+    const t = i / 12 * Math.PI * 2;
+    const u = Math.cos(t) * r, v = Math.sin(t) * r * 0.7;
+    return pt3(x + u * Math.cos(a) - v * Math.sin(a), y + u * Math.sin(a) + v * Math.cos(a));
+  });
+  const c = (u, v) => ({ x: x + u * Math.cos(a) - v * Math.sin(a), y: y + u * Math.sin(a) + v * Math.cos(a) });
+  return { body: smooth(pts, 0.17), crease: curve3([c(-r * 0.8, 0), c(-r * 0.2, r * 0.18), c(r * 0.3, -r * 0.18), c(r * 0.8, 0)], 0.2) };
+}
+var printshop_card_cafe_default = defineTemplate({
+  id: "print-printshop-card-cafe",
+  meta: {
+    name: "Caf\xE9 business card with QR code",
+    description: "A playful card for a coffee shop or bakery: a big flat-drawn cup on a terracotta front, steam curling off it and beans spilling off the edge, the caf\xE9\u2019s name in heavy lower case. The cream back has a QR code for the menu and hours (replace it with your own), the address and the brand kit\u2019s number, email and website. 85 \xD7 55 mm and US 3.5 \xD7 2 in, two-sided",
+    category: "business-card",
+    tags: ["business card", "caf\xE9", "cafe", "coffee", "coffee shop", "bakery", "qr code", "menu", "playful", "illustrated", "two-sided", "print"],
+    platforms: ["print"],
+    formats: ["card"],
+    useCases: ["brand-intro", "menu"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = businessCard("Caf\xE9 business card with QR code", {}, (k2) => {
+      k2.quantizeGeometry = true;
+      k2.brand(
+        { primary: "#C2562F", onPrimary: "#FFF4E6", paper: "#F8EDDD", text: "#3A2219", onPaper: "#7A4A35", accent: "#2F5D50", onAccent: "#FFF4E6" },
+        { name: "little ember", tagline: "Coffee, bakes and a good chair", email: "hello@littleember.cafe", phone: "(503) 555-0147", website: "littleember.cafe", address: "2214 SE Division St, Portland, OR 97202" }
+      );
+      k2.palette({ cup: "#FFF4E6", cupShade: "#EBD9C2", crema: "#8A4A2B", coffee: "#4A2716", beanDark: "#5B3020", steam: "#F2B48F", saucer: "#F3E2CC" });
+      k2.textStyle("Cafe 28", { size: 28, fontWeight: 900, letterSpacing: -1.4, lineHeight: 26 });
+      k2.textStyle("Tag 10", { ...SERIF, size: 10.5, fontWeight: 400, fontStyle: "italic", lineHeight: 14 });
+      k2.textStyle("Open 8", { size: 8, fontWeight: 700, letterSpacing: 1.2, lineHeight: 11 });
+      k2.textStyle("Scan 12", { size: 12, fontWeight: 900, letterSpacing: -0.3, lineHeight: 14 });
+      k2.textStyle("Host 8", { size: 8, fontWeight: 700, letterSpacing: 0.8, lineHeight: 11 });
+      k2.textStyle("Label 8", { size: 8, fontWeight: 900, lineHeight: 12 });
+      k2.textStyle("Value 8.5", { size: 8.5, fontWeight: 500, lineHeight: 12 });
+      cardParts(k2, { name: "Scan 12", title: "Host 8", nameColor: "text", titleColor: "onPaper", label: "Label 8", value: "Value 8.5", labelColor: "onPaper", valueColor: "text", gap: 6, labelWidth: 9 });
+    }, (k2, { front, back, size }) => {
+      const { W, H, B } = size;
+      k2.flowSheet(front, 6, { top: 24, right: 22, bottom: 22, left: W * 0.52 }, "primary", "CENTER", "MIN");
+      const cx = W * 0.2, top = H * 0.52, cw = H * 0.5;
+      art(k2, front, W, H, B, [smooth(circle3(cx + cw * 0.08, H + 4, cw * 0.95, 28), 0.08)], "saucer", { name: "Saucer" });
+      const cup = { closed: true, points: [pt3(cx - cw / 2, top), pt3(cx + cw / 2, top), { ...pt3(cx + cw * 0.38, H + 2), handleIn: pt3(cx + cw * 0.48, top + cw * 0.5) }, { ...pt3(cx - cw * 0.38, H + 2), handleOut: pt3(cx - cw * 0.48, top + cw * 0.5) }] };
+      art(k2, front, W, H, B, [smooth(circle3(cx + cw * 0.56, top + cw * 0.3, cw * 0.2, 20), 0.08)], "cupShade", { name: "Handle", strokeWidth: 7 });
+      art(k2, front, W, H, B, [cup], "cup", { name: "Cup" });
+      art(k2, front, W, H, B, [{ closed: true, points: [pt3(cx + cw * 0.18, top), pt3(cx + cw / 2, top), { ...pt3(cx + cw * 0.38, H + 2), handleIn: pt3(cx + cw * 0.48, top + cw * 0.5) }, pt3(cx + cw * 0.12, H + 2)] }], "cupShade", { name: "Cup shade" });
+      art(k2, front, W, H, B, [smooth(circle3(cx, top, cw / 2, 28).map((p) => ({ x: p.x, y: top + (p.y - top) * 0.22 })), 0.08)], "coffee", { name: "Coffee" });
+      art(k2, front, W, H, B, [smooth(circle3(cx, top, cw * 0.36, 24).map((p) => ({ x: p.x, y: top + (p.y - top) * 0.2 })), 0.08)], "crema", { name: "Crema" });
+      const steam = [0, 1, 2].map((i) => curve3([{ x: cx - 14 + i * 14, y: top - 8 }, { x: cx - 20 + i * 14, y: top - 22 }, { x: cx - 8 + i * 14, y: top - 36 }, { x: cx - 16 + i * 14, y: top - 52 - i * 4 }], 0.3));
+      art(k2, front, W, H, B, steam, "steam", { name: "Steam", strokeWidth: 3 });
+      const beans = [bean(10, 18, 9, 30), bean(W * 0.5, 14, 7, -20), bean(W - 8, H - 12, 9, 60), bean(W * 0.3, -2, 8, 80)];
+      art(k2, front, W, H, B, beans.map((b) => b.body), "beanDark", { name: "Beans" });
+      art(k2, front, W, H, B, beans.map((b) => b.crease), "primary", { name: "Bean creases", strokeWidth: 1.2 });
+      k2.text(front, "{{brand.name}}", { style: "Cafe 28", color: "onPrimary", width: "FILL", name: "Caf\xE9" });
+      k2.text(front, "coffee, bakes & a good chair", { style: "Tag 10", color: "onPrimary", width: "FILL", name: "Tagline" });
+      k2.text(front, "OPEN DAILY 7\u20134", { style: "Open 8", color: "onPrimary", width: "FILL", name: "Open" });
+      k2.flowSheet(back, 0, { top: 22, right: 22, bottom: 22, left: 22 }, "paper", "CENTER", "MIN");
+      art(k2, back, W, H, B, [disc(W - 6, -4, 26), disc(W + 4, 30, 10)], "steam", { name: "Crumbs" });
+      const row = k2.stack(back, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Row" });
+      const tile = k2.stack(row, { width: "HUG", padding: 7, fill: "onAccent", radius: 6, stroke: { color: "accent", width: 2 }, name: "QR tile" });
+      qrCode(k2, tile, H - 76, "https://littleember.example/menu", "accent");
+      const words = k2.stack(row, { gap: 8, name: "Words" });
+      k2.patch(words, { layoutSizingHorizontal: "FILL" });
+      k2.instance(words, "Person", { Name: "Scan for the menu", Title: "AND TODAY\u2019S BAKES" }, { name: "Scan" });
+      contactLines(k2, words, ["T", "E", "W"], 1);
+      k2.text(words, "{{brand.address}}", { style: "Value 8.5", color: "onPaper", width: "FILL", name: "Address" });
+    });
+    return k.finish();
+  }
+});
+
+export {
+  printshop_card_cafe_default
+};

package/dist/chunks/chunk-CU3KVW5H.js

@@ -0,0 +1,55 @@
+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-ZJS37D5Z.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/slideshow/holiday.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var story = {
+  id: "motion-slideshow-holiday",
+  song: "littleSteps",
+  meta: {
+    name: "Family holiday recap",
+    description: "A cosy fifty-second recap of the winter holidays: a title card with the family name, three parts (home, the snow, New Year\u2019s Eve), fourteen scenes cut on the beats of a music-box tune (made by PopCraft, CC0), gentle Ken Burns moves, dissolves, slides, dips and light leaks, and a closing card. Photos are CC0 from Wikimedia Commons; drop your own on any frame.",
+    tags: ["animation", "slideshow", "holiday", "christmas", "winter", "family", "recap", "photo", "music", "scenes", "ken burns", "video"],
+    platforms: ["instagram", "facebook", "youtube"],
+    formats: ["video", "reel", "post"],
+    useCases: ["event"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  brand: { paper: "#F6F2EA", onPaper: "#2B3A33", accent: "#B5453A", shade: "#141A17", onPhoto: "#FFFFFF", leak: "#FFB763" },
+  fields: { names: "The Carter family", date: "December 2025" },
+  scenes: [
+    { kind: "title", name: "Opening", photo: "holiday-00", kicker: "Our holidays", beats: 8, move: "in", focus: 0.35 },
+    { kind: "chapter", name: "Chapter 1", kicker: "Part one", title: "Home for the holidays", beats: 4 },
+    { kind: "photo", name: "The tree", photo: "holiday-01", caption: "The tree went up on the first", beats: 6, move: "left", focus: 0.8 },
+    { kind: "photo", name: "Gingerbread", photo: "holiday-02", layout: "matted", caption: "Grandma\u2019s gingerbread village", beats: 4, move: "in", into: "push" },
+    { kind: "photo", name: "Orange and clove", photo: "holiday-06", layout: "matted", caption: "The kitchen smelled of orange and clove", beats: 4, move: "right" },
+    { kind: "dip", name: "Dip 1", to: "paper", beats: 1 },
+    { kind: "chapter", name: "Chapter 2", kicker: "Part two", title: "Out in the snow", beats: 4 },
+    { kind: "photo", name: "The cabin", photo: "holiday-03", caption: "Two nights at the cabin", beats: 6, move: "up", into: "slide" },
+    { kind: "photo", name: "Choosing the tree", photo: "holiday-05", caption: "Choosing the tree", beats: 6, move: "in", focus: 0.45 },
+    { kind: "photo", name: "Cocoa", photo: "holiday-04", caption: "Cocoa, then more cocoa", beats: 4, move: "in" },
+    { kind: "dip", name: "Dip 2", to: "shade", beats: 1 },
+    { kind: "chapter", name: "Chapter 3", kicker: "Part three", title: "New Year\u2019s Eve", beats: 4 },
+    { kind: "photo", name: "By the fire", photo: "holiday-07", caption: "By the fire", beats: 6, move: "in", into: "leak" },
+    { kind: "photo", name: "Midnight", photo: "holiday-08", caption: "Midnight", beats: 6, move: "in", focus: 0.45, into: "leak" },
+    { kind: "photo", name: "The year ahead", photo: "holiday-09", caption: "Here\u2019s to the year ahead", beats: 8, move: "right" },
+    { kind: "end", name: "Ending", kicker: "Happy holidays, with love" }
+  ]
+};
+var holiday_default = slideshow(story);
+
+export {
+  story,
+  holiday_default
+};

package/dist/chunks/chunk-CUMWJVNP.js

@@ -0,0 +1,170 @@
+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 {
+  LOWER,
+  appear,
+  bauhausBrand,
+  block,
+  disc,
+  furnish,
+  grain,
+  move,
+  poster,
+  put,
+  rule,
+  triangle
+} from "./chunk-77B7LXYJ.js";
+import {
+  background
+} from "./chunk-HAK2G6YB.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  sizeOf
+} from "./chunk-YHBAWSDX.js";
+import {
+  outro,
+  pill,
+  postVariants
+} from "./chunk-LEKU2ZW3.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/social/bauhaus-pricing-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 7e3;
+var STEP = 500;
+var OUT = 6300;
+var PLANS = [
+  { shape: "circle", name: "solo", price: 0, per: "for one repo", line: "redrawn on every push", at: 500 },
+  { shape: "square", name: "team", price: 12, per: "a seat, a month", line: "every repo \xB7 drift check", at: 1e3 },
+  { shape: "triangle", name: "works", price: 29, per: "a seat, a month", line: "sso \xB7 your own runner", at: 1500 }
+];
+var counts = PLANS.filter((p) => p.price).map((p) => ({ layer: `Price ${p.name}`, at: p.at + STEP, duration: 900, counter: { from: 0, to: p.price, prefix: "$" } }));
+var WORDS = ["Masthead", "Headline", "Plan name", "Plan line", "Call", "Site"];
+var cues = [
+  { layer: "Masthead", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Headline", preset: "rise-in", at: 100, params: { duration: 500 } },
+  { layer: "Plan name", preset: "rise-in", at: 1e3, params: { duration: 400 }, stagger: { delay: STEP } },
+  { layer: "Plan line", preset: "fade-in", at: 1200, params: { duration: 400 }, stagger: { delay: STEP } },
+  { layer: "Call", preset: "pop-in", at: 3200, params: { duration: 300 } },
+  { layer: "Site", preset: "typewriter", at: 3600, params: { duration: 500 } },
+  { layer: "Call", preset: "pulse", at: 5e3, params: { duration: 800, amount: 0.05 } },
+  outro(WORDS, OUT, { duration: 300, gap: 30 })
+];
+var ROW = { width: 952, height: 400 };
+function rescale(k, root, scale) {
+  for (const s of k.named(root, "Plans stage")) k.patch(s, { width: Math.round(ROW.width * scale), height: Math.round(ROW.height * scale) });
+  for (const p of k.named(root, "Plans")) k.patch(p, { layoutPositioning: "ABSOLUTE", x: Math.round(-ROW.width / 2 * (1 - scale)), y: Math.round(-ROW.height / 2 * (1 - scale)), scaleX: scale, scaleY: scale });
+}
+function place(k, sheet) {
+  const { w, h } = sizeOf(k, sheet);
+  furnish(k, sheet);
+  if (h <= 1500) {
+    put(k, sheet, "Sun", w - 210, -470);
+    put(k, sheet, "Board rings", w - 520, h - 640);
+  }
+}
+var bauhaus_pricing_post_default = defineTemplate({
+  id: "motion-bauhaus-pricing-post",
+  meta: {
+    name: "Bauhaus pricing post (animated)",
+    description: "Three plans as the three primary shapes of a Bauhaus poster, the price set inside each: a red disc rolls in, a blue square turns as it drops, a yellow triangle swings up, and the prices count up as they land. A seven-second loop, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "bauhaus", "geometric", "primary colours", "circle square triangle", "lowercase", "pricing", "plans", "counter", "saas", "post"],
+    platforms: ["x", "linkedin", "instagram", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["pricing", "announcement", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Bauhaus pricing post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    bauhausBrand(k);
+    k.textStyle("Masthead 20", { ...MONO, ...LOWER, size: 20, fontWeight: 700, letterSpacing: 1, lineHeight: 26 });
+    k.textStyle("Display 120", { ...LOWER, size: 120, fontWeight: 900, letterSpacing: -5.2, lineHeight: 104 });
+    k.textStyle("Display 104", { ...LOWER, size: 104, fontWeight: 900, letterSpacing: -4.4, lineHeight: 92 });
+    k.textStyle("Price 92", { ...LOWER, size: 92, fontWeight: 900, letterSpacing: -4, lineHeight: 88, textAlign: "CENTER" });
+    k.textStyle("Per 16", { ...MONO, ...LOWER, size: 16, fontWeight: 700, lineHeight: 22, textAlign: "CENTER" });
+    k.textStyle("Plan 44", { ...LOWER, size: 44, fontWeight: 900, letterSpacing: -1.8, lineHeight: 46 });
+    k.textStyle("Line 17", { ...MONO, ...LOWER, size: 17, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Button 28", { ...LOWER, size: 28, fontWeight: 800, lineHeight: 36 });
+    k.textStyle("Site 24", { ...MONO, ...LOWER, size: 24, fontWeight: 700, lineHeight: 30 });
+    pill(k, "Button", { fill: "text", ink: "paper", style: "Button 28", label: "start on solo, free", pad: [16, 28], radius: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 20, 64, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    background(k, sheet, "paper", { effects: grain() });
+    poster(k, sheet);
+    const head = k.stack(sheet, { gap: 12, name: "Head" });
+    k.text(head, "{{brand.name}} \xB7 the pricing \xB7 all of it", { style: "Masthead 20", color: "text", name: "Masthead" });
+    rule(k, head, 10, "text", "Head rule");
+    k.text(sheet, "three shapes. three prices.", { style: "Display 120", color: "text", width: 800, name: "Headline" });
+    const stage = k.stack(sheet, { width: ROW.width, height: ROW.height, name: "Plans stage" });
+    const plans = k.stack(stage, { direction: "HORIZONTAL", gap: 26, width: ROW.width, height: ROW.height, name: "Plans" });
+    for (const p of PLANS) {
+      const plan = k.stack(plans, { gap: 10, width: 300, name: "Plan" });
+      const figure = k.stack(plan, { width: 300, height: 300, name: "Plan shape" });
+      const ink = p.shape === "circle" ? "onPrimary" : p.shape === "square" ? "onSecondary" : "onAccent";
+      const shape = p.shape === "circle" ? disc(k, figure, 300, "primary", { at: { x: 0, y: 0 }, name: "Plan circle", air: 0.34, shadow: 14 }) : p.shape === "square" ? block(k, figure, 280, 280, "secondary", { at: { x: 10, y: 10 }, name: "Plan square", air: 0.36, airAngle: 70, shadow: 14 }) : triangle(k, figure, 300, 290, "accent", { at: { x: 0, y: 5 }, name: "Plan triangle", shadow: 14 });
+      const low = p.shape === "triangle" ? 68 : 0;
+      const price = k.text(figure, `$${p.price}`, { style: "Price 92", color: ink, width: 300, align: "CENTER", name: `Price ${p.name}`, absolute: { x: 0, y: 92 + low } });
+      const per = k.text(figure, p.per, { style: "Per 16", color: ink, width: 300, align: "CENTER", name: "Plan per", absolute: { x: 0, y: 184 + low } });
+      k.text(plan, p.name, { style: "Plan 44", color: "text", name: "Plan name" });
+      k.text(plan, p.line, { style: "Line 17", color: "text", name: "Plan line" });
+      appear(k, figure, p.at, OUT);
+      const air = k.named(figure, `${k.node(shape).name} air`);
+      if (p.shape === "circle") move(k, figure, "translateX", -520, 0, p.at, STEP);
+      else if (p.shape === "square") {
+        move(k, figure, "translateY", -420, 0, p.at, STEP);
+        for (const s of [shape, ...air]) move(k, s, "rotation", 90, 0, p.at, STEP);
+      } else {
+        move(k, figure, "translateY", 420, 0, p.at, STEP);
+        for (const s of [shape, ...air]) move(k, s, "rotation", -120, 0, p.at, STEP);
+      }
+      for (const t of [price, per]) appear(k, t, p.at + STEP, void 0, 160);
+    }
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", gap: 22, align: "CENTER", name: "Foot" });
+    k.instance(foot, "Button", { Label: "start on solo, free" }, { name: "Call" });
+    k.text(foot, "{{brand.site}}/pricing", { style: "Site 24", color: "text", name: "Site" });
+    place(k, sheet);
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 72 }, {
+      portrait: (kit, id) => {
+        rescale(kit, id, 0.983);
+        place(kit, id);
+      },
+      vertical: (kit, id) => {
+        rescale(kit, id, 0.84);
+        for (const n of kit.named(id, "Headline")) {
+          kit.restyle(n, "Display 104");
+          kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        }
+        place(kit, id);
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  bauhaus_pricing_post_default
+};

package/dist/chunks/chunk-CV6QBO5D.js

@@ -0,0 +1,81 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  standardPortfolio
+} from "./chunk-ZGLXMJRC.js";
+import {
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/portfolio-sketchbook.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var WORK = [
+  { title: "Fox and the Map", client: "Little Owl Books", year: "2026", kind: "Picture book", cover: "sketch-00", summary: "A fox who reads maps under the lamp, from a picture book about getting lost on purpose.", story: "Thirty-two pages in gouache and ink, painted at the size they are printed so nothing is scaled.", credits: "Illustration \u2014 Pip Hollis \xB7 Words \u2014 Mara Gale" },
+  { title: "The Red Funicular", client: "Alpine Rail Museum", year: "2026", kind: "Poster", cover: "sketch-01", summary: "A cliffside village and its little red railway, for a museum\u2019s summer poster.", story: "Painted from sketches made on the funicular itself, which is slower than walking.", credits: "Illustration \u2014 Pip Hollis" },
+  { title: "Whale Weather", client: "Tidepool Magazine", year: "2025", kind: "Editorial", cover: "sketch-02", summary: "A girl and a whale sharing an umbrella, for a story about rainy days.", story: "A cover and two spots for the children\u2019s issue.", credits: "Illustration \u2014 Pip Hollis \xB7 Art direction \u2014 Tidepool" },
+  { title: "Frog\u2019s Market", client: "Little Owl Books", year: "2025", kind: "Picture book", cover: "sketch-03", summary: "A market of strange fruit, kept by a very serious frog.", story: "A counting book: every spread has one more fruit than the last.", credits: "Illustration and words \u2014 Pip Hollis" },
+  { title: "Keeper", client: "Coastline Trust", year: "2024", kind: "Print", cover: "sketch-04", summary: "A lighthouse keeper feeding gulls at sunset, sold to fund a lighthouse.", story: "An edition of 200 gicl\xE9e prints; every one sold the week it went up.", credits: "Illustration \u2014 Pip Hollis" },
+  { title: "Winter Scarf", client: "Woolly & Co.", year: "2024", kind: "Packaging", cover: "sketch-05", summary: "A bear knitting by the stove, for a yarn shop\u2019s gift boxes.", story: "Six bears, six patterns, printed on the inside of the lid.", credits: "Illustration \u2014 Pip Hollis" },
+  { title: "Night Train", client: "Northbound Rail", year: "2023", kind: "Campaign", cover: "sketch-06", summary: "A sleeper train on a viaduct under the stars.", story: "Posters for stations and the menu on board, which is now a postcard.", credits: "Illustration \u2014 Pip Hollis \xB7 Agency \u2014 Platform" },
+  { title: "Fish Kites", client: "Harbour Festival", year: "2023", kind: "Festival identity", cover: "sketch-07", summary: "Children flying kites shaped like fish, for a seaside festival.", story: "The kites were made for real and flown on the day.", credits: "Illustration \u2014 Pip Hollis" }
+];
+var portfolio_sketchbook_default = defineTemplate({
+  id: "web-portfolio-sketchbook",
+  meta: {
+    name: "Illustrator sketchbook",
+    description: "An illustrator\u2019s portfolio on warm paper: pictures on softly framed cards three across, a page per piece with how it was made, and an about page with commissions. The work is a collection you edit as a table. Desktop, tablet and phone",
+    category: "web",
+    tags: ["portfolio", "illustration", "illustrator", "picture books", "warm", "paper", "cms", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["portfolio"],
+    created: "2026-10-05",
+    updated: "2026-10-05"
+  },
+  breakpoints: true,
+  build: () => standardPortfolio({
+    name: "Sketchbook",
+    brand: { paper: "#F3E9D8", text: "#3A2A1E", onPaper: "#6F5A47", primary: "#C8553D", onPrimary: "#FFF8EE", card: "#FFF8EE", onCard: "#3A2A1E", cardMuted: "#6F5A47", line: "#E2D2B8" },
+    fields: { name: "Pip Hollis", email: "hello@piphollis.art" },
+    styles: {
+      "Wordmark 24": { size: 24, fontWeight: 700, letterSpacing: -0.3, lineHeight: 30, ...SERIF },
+      "Small 14": { size: 14, fontWeight: 600, lineHeight: 20 },
+      "Meta 14": { size: 14, fontWeight: 400, lineHeight: 20 },
+      "Title 20": { size: 20, fontWeight: 600, lineHeight: 26, ...SERIF },
+      "Lead 24": { size: 24, fontWeight: 400, lineHeight: 34, ...SERIF },
+      "Body 17": { size: 17, fontWeight: 400, lineHeight: 28 },
+      "Display 60": { size: 60, fontWeight: 600, letterSpacing: -1, lineHeight: 66, ...SERIF },
+      "Display 38": { size: 38, fontWeight: 600, letterSpacing: -0.5, lineHeight: 44, ...SERIF }
+    },
+    type: { wordmark: "Wordmark 24", small: "Small 14", meta: "Meta 14", title: "Title 20", lead: "Lead 24", body: "Body 17", display: "Display 60", displaySmall: "Display 38" },
+    projects: WORK,
+    links: [["work", "Pictures"], ["studio", "About & shop"]],
+    lead: { headline: "Pictures for books, walls and the people who read under lamps.", intro: "Pip Hollis paints in gouache and ink from a shed at the end of a garden in Bristol.", width: 900 },
+    grid: { cols: 4, gap: 24, ratio: 1, radius: 6, card: { fill: "card", pad: 16, radius: 10, stroke: "line" }, meta: "{{item.kind}}, {{item.year}}" },
+    project: { ratio: 1, split: true, kicker: "From the sketchbook", more: { cols: 4, ratio: 1, label: "More pictures" } },
+    studio: {
+      statement: "Hello, I\u2019m Pip. I paint small worlds with a lot of weather in them.",
+      about: "I illustrate picture books, magazines and the occasional train poster. Everything starts in a sketchbook and is painted by hand at the size it will be printed.",
+      picture: "sketch-06",
+      ratio: 0.5,
+      services: ["Picture books", "Editorial illustration", "Posters and packaging", "Prints in the shop"],
+      clients: "Little Owl Books, Tidepool Magazine, the Alpine Rail Museum, Woolly & Co. and Northbound Rail.",
+      contact: "Represented for books by the Hare Agency."
+    },
+    elsewhere: "Instagram \xB7 The print shop"
+  })
+});
+
+export {
+  portfolio_sketchbook_default
+};

package/dist/chunks/chunk-CVB5F7FJ.js

@@ -0,0 +1,92 @@
+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 {
+  drawPage as drawPage7
+} from "./chunk-CGNNKKW7.js";
+import {
+  drawPage as drawPage6
+} from "./chunk-APBRV4W6.js";
+import {
+  drawPage as drawPage8
+} from "./chunk-ZYNF7B6N.js";
+import {
+  drawPage as drawPage11
+} from "./chunk-P23KECK3.js";
+import {
+  drawPage as drawPage3
+} from "./chunk-M2LWLS56.js";
+import {
+  drawPage as drawPage5
+} from "./chunk-X4UI5JKC.js";
+import {
+  drawPage as drawPage2
+} from "./chunk-COJM27N2.js";
+import {
+  drawPage
+} from "./chunk-ZY3DR3P6.js";
+import {
+  drawPage as drawPage4
+} from "./chunk-ZBFR7DBR.js";
+import {
+  drawPage as drawPage10
+} from "./chunk-UJTTWR5P.js";
+import {
+  drawPage as drawPage9
+} from "./chunk-XQJ2VVC6.js";
+import {
+  comicMeta,
+  comicSetup
+} from "./chunk-UBT4DZYW.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/comic-hero-issue.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var PAGES = [
+  ["Page 1", drawPage2],
+  ["Page 2", drawPage3],
+  ["Page 3", drawPage4],
+  ["Page 4", drawPage5],
+  ["Page 5", drawPage6],
+  ["Page 6", drawPage7],
+  ["Page 7", drawPage8],
+  ["Page 8", drawPage9],
+  ["Page 9", drawPage10],
+  ["Back cover", drawPage11]
+];
+var comic_hero_issue_default = defineTemplate({
+  id: "comic-hero-issue",
+  meta: comicMeta("Whole comic issue (Nightstar)", '"Nightstar: Blackout", the whole action issue in one file: the cover, nine story pages in facing pages and the pin-up on the back, ready to print as a booklet', ["book", "issue", "story", "action"]),
+  sequence: true,
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Whole comic issue (Nightstar)", preset("comic-cover"));
+    comicSetup(k);
+    k.doc = { ...k.doc, settings: { ...k.doc.settings, facingPages: true } };
+    const front = k.sheet;
+    k.nameSheet(front, "Front cover");
+    drawPage(k);
+    k.setCover(front);
+    for (const [name, draw] of PAGES) {
+      k.addSheet(preset("comic-page"), name);
+      draw(k);
+    }
+    return k.finish();
+  }
+});
+
+export {
+  comic_hero_issue_default
+};