@popcraft/kit 0.29.0 → 0.30.0

package/dist/chunks/chunk-5DV2UDUS.js

@@ -0,0 +1,143 @@
+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 {
+  disc,
+  draw,
+  maple,
+  mapleVeins,
+  polyP,
+  rectPath,
+  redraw,
+  restyleAll,
+  scaleGaps
+} from "./chunk-YAIUTBXU.js";
+import {
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  verticalPadding
+} 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/holidays-thanksgiving-pie-orders-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Thanksgiving pie orders post";
+function pie(cx, cy, r) {
+  const crimp = polyP(Array.from({ length: 72 }, (_, i) => {
+    const a = i * Math.PI / 36, rr = r * (i % 2 ? 0.93 : 1);
+    return { x: cx + Math.cos(a) * rr, y: cy + Math.sin(a) * rr };
+  }));
+  const strips = [], under = [];
+  const inner = r * 0.8, sw = r * 0.11;
+  for (let i = -3; i <= 3; i++) {
+    const o = i * inner / 3.6, half = Math.sqrt(Math.max(0, inner * inner - o * o));
+    strips.push(rectPath(cx + o - sw / 2, cy - half, sw, half * 2));
+    under.push(rectPath(cx - half, cy + o - sw / 2, half * 2, sw));
+  }
+  const vents = [0, 1, 2, 3].map((i) => disc(cx + Math.cos(i * Math.PI / 2 + 0.78) * r * 0.42, cy + Math.sin(i * Math.PI / 2 + 0.78) * r * 0.42, r * 0.03));
+  return { tin: [disc(cx, cy, r * 1.08)], crust: [crimp], filling: [disc(cx, cy, inner)], under, strips, vents };
+}
+function art(w, h, safe = { top: 0, bottom: 0 }) {
+  const s = w / 1080, B = 0;
+  const clothTop = h - 230 * s - safe.bottom;
+  const checks = [], checks2 = [];
+  const sz = 46 * s;
+  for (let y = clothTop, row = 0; y < h + sz; y += sz, row++) for (let x = -B, col = 0; x < w + sz; x += sz, col++) {
+    if ((row + col) % 2 === 0) checks.push(rectPath(x, y, sz, sz));
+    if (row % 2 === 0 && col % 2 === 0) checks2.push(rectPath(x, y, sz, sz));
+  }
+  const p = pie(w - 250 * s, clothTop + 20 * s, 230 * s);
+  const leaves = [[0.06, 0.05, 80, 0.4], [0.88, 0.09, 140, -0.6], [0.76, 0.24, 96, 1.4], [0.95, 0.33, 110, 2.4], [0.8, 0.45, 84, -1], [0.93, 0.56, 70, 0.9], [0.74, 0.62, 56, 2], [0.42, 0.04, 54, -0.3]].map(([x, y, sz2, t]) => ({ m: maple(w * x, safe.top * 0.4 + h * y, sz2 * s, t), v: mapleVeins(w * x, safe.top * 0.4 + h * y, sz2 * s, t) }));
+  return [
+    { name: "Cloth", paths: checks, color: "gingham", o: { opacity: 0.55 } },
+    { name: "Cloth weave", paths: checks2, color: "gingham", o: { opacity: 0.5 } },
+    { name: "Pie shadow", paths: [disc(w - 236 * s, clothTop + 44 * s, 250 * s)], color: "shadow", o: { opacity: 0.25 } },
+    { name: "Pie tin", paths: p.tin, color: "tin" },
+    { name: "Pie crust", paths: p.crust, color: "crust" },
+    { name: "Pie filling", paths: p.filling, color: "filling" },
+    { name: "Lattice under", paths: p.under, color: "crustDeep" },
+    { name: "Lattice", paths: p.strips, color: "crust" },
+    { name: "Lattice edges", paths: p.strips, color: "crustDeep", o: { strokeWidth: 2 * s, opacity: 0.6 } },
+    ...leaves.map((l) => ({ name: "Leaf", paths: l.m, color: "rust" })),
+    ...leaves.map((l) => ({ name: "Leaf veins", paths: l.v, color: "rustDeep", o: { strokeWidth: 2 * s } }))
+  ];
+}
+var holidays_thanksgiving_pie_orders_post_default = defineTemplate({
+  id: "social-holidays-thanksgiving-pie-orders-post",
+  meta: {
+    name: NAME,
+    description: "A neighbourhood bakery\u2019s Thanksgiving pie-order post in a warm retro style: a lattice pie from above on a gingham cloth, maple leaves blowing across a mustard ground, \u201CPie orders close Sunday\u201D in a heavy serif, four pies with prices and the pick-up day. 4:5 for the feed and 9:16 for stories",
+    category: "social",
+    tags: ["thanksgiving", "bakery", "pie", "pre-order", "pumpkin pie", "small business", "autumn", "fall", "retro", "gingham", "instagram", "story", "post"],
+    platforms: ["instagram", "facebook"],
+    formats: ["portrait-post", "story"],
+    useCases: ["sale", "announcement"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("ig-portrait"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#E9B44C", text: "#3A1F10", onPaper: "#8A3412", primary: "#9C3D17", onPrimary: "#FFF6E5", line: "#C98F2C" },
+      { name: "Rise & Shine Bakery", site: "riseandshinebakes.com" }
+    );
+    k.palette({ gingham: "#B5442A", tin: "#B9B3A8", crust: "#F3C77A", crustDeep: "#C98A3A", filling: "#A94A1E", shadow: "#5E3518", rust: "#B4512A", rustDeep: "#7E3216" });
+    k.textStyle("Kicker 26", { size: 26, fontWeight: 800, letterSpacing: 5, lineHeight: 34 });
+    k.textStyle("Title 100", { ...SERIF, size: 100, fontWeight: 800, letterSpacing: -2.6, lineHeight: 96 });
+    k.textStyle("Pie 32", { ...SERIF, size: 32, fontWeight: 600, lineHeight: 40 });
+    k.textStyle("Price 32", { size: 32, fontWeight: 800, lineHeight: 40, fontFeatures: { tnum: 1 } });
+    k.textStyle("Body 27", { size: 27, fontWeight: 500, lineHeight: 36 });
+    k.component("Pie line", { direction: "HORIZONTAL", gap: 20, width: 620, justify: "SPACE_BETWEEN", padding: { top: 10, right: 0, bottom: 10, left: 0 }, props: { Pie: "Pie", Price: "$0" } }, (id) => {
+      k.propText(id, "Pie", { style: "Pie 32", color: "text", autoWidth: true, name: "Pie name" });
+      k.propText(id, "Price", { style: "Price 32", color: "onPaper", autoWidth: true, name: "Pie price" });
+    });
+    const sheet = k.sheet;
+    const { width: W, height: H } = k.node(sheet);
+    k.flowSheet(sheet, 0, { top: 150, right: 376, bottom: 260, left: 84 }, "paper", "MIN", "MIN");
+    draw(k, sheet, art(W, H));
+    k.text(sheet, "THANKSGIVING PIES", { style: "Kicker 26", color: "onPaper", width: "FILL", name: "Kicker" });
+    k.stack(sheet, { height: 16, name: "Gap" });
+    k.text(sheet, "Pie orders close Sunday", { style: "Title 100", color: "text", width: "FILL", name: "Title" });
+    k.stack(sheet, { height: 28, name: "Gap" });
+    const list = k.stack(sheet, { width: 620, name: "Pies" });
+    for (const [i, [n, p]] of [["Classic pumpkin", "$28"], ["Apple crumble", "$30"], ["Bourbon pecan", "$34"], ["Sweet potato", "$28"]].entries()) {
+      k.instance(list, "Pie line", { Pie: n, Price: p }, { name: "Pie line", width: "FILL" });
+      if (i < 3) k.rect(list, "FILL", 2, "line", { name: "Rule" });
+    }
+    k.stack(sheet, { height: 24, name: "Gap" });
+    k.text(sheet, "Order by Sunday 22 November, pick up Wednesday 25th, 7 am \u2013 6 pm. {{brand.site}}", { style: "Body 27", color: "text", width: "FILL", name: "Body" });
+    k.textStyle("Title 112", { ...SERIF, size: 112, fontWeight: 800, letterSpacing: -3, lineHeight: 106 });
+    const story = {
+      preset: "ig-story",
+      adjust: (kit, id) => {
+        const { width: w, height: h } = kit.node(id);
+        const safe = verticalPadding(84);
+        redraw(kit, id, art(w, h, { top: safe.top - 84, bottom: 0 }));
+        kit.patch(id, { padding: { top: safe.top + 120, right: w - safe.left - 620, bottom: safe.bottom, left: safe.left } });
+        restyleAll(kit, id, [["Title", "Title 112"]]);
+        scaleGaps(kit, id, 1.3);
+      }
+    };
+    k.variants(sheet, [story]);
+    return k.finish();
+  }
+});
+
+export {
+  holidays_thanksgiving_pie_orders_post_default
+};

package/dist/chunks/chunk-5EHU4XFD.js

@@ -0,0 +1,106 @@
+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 {
+  clouds,
+  envelope,
+  hangings,
+  lunarBrand,
+  reburst,
+  sky
+} from "./chunk-FGHIWBN5.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-K3QP3IUF.js";
+import {
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/email/lunar-new-year-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 4800;
+var cues = [
+  { layer: "Envelope", preset: "wobble", at: 1200, params: { duration: 800 } },
+  { layer: "Button", preset: "pulse", at: 3e3, params: { duration: 800, amount: 0.06 } }
+];
+var lunar_new_year_header_default = defineTemplate({
+  id: "email-lunar-new-year-header",
+  meta: {
+    name: "Lunar New Year email header (animated GIF)",
+    description: "A 600 \xD7 300 animated header for a Lunar New Year email: the gift, the code and the button are all on the first frame (for Outlook), beside a cut-paper night where a red envelope shows its voucher before a paper moon; then lanterns sway and fireworks burst again \u2014 a seamless 4.8-second GIF loop with no zodiac animal, so it works every year",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "lunar new year", "chinese new year", "spring festival", "red envelope", "lantern", "fireworks", "offer", "saas", "seasonal"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["sale", "newsletter", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Lunar New Year email header", HEADER);
+    k.quantizeGeometry = true;
+    lunarBrand(k, { offer: "Your red envelope: 88 days free." });
+    k.textStyle("Eyebrow 12", { size: 12, fontWeight: 700, letterSpacing: 2.4, lineHeight: 16, textCase: "UPPER" });
+    k.textStyle("Offer 30", { ...SERIF, size: 30, fontWeight: 900, letterSpacing: -0.9, lineHeight: 33 });
+    k.textStyle("Account 14", { size: 14, fontWeight: 500, lineHeight: 21 });
+    k.textStyle("Button 14", { size: 14, fontWeight: 800, lineHeight: 20 });
+    k.textStyle("Figure 36", { ...SERIF, size: 36, fontWeight: 900, letterSpacing: -1, lineHeight: 34, textAlign: "CENTER" });
+    k.textStyle("Days 12", { ...SERIF, size: 12, fontWeight: 700, lineHeight: 14, textAlign: "CENTER" });
+    pill(k, "Button pill", { fill: "primary", ink: "onPrimary", style: "Button 14", label: "Open the envelope", pad: [9, 20], radius: 6 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 9, { top: 20, right: 292, bottom: 60, left: 30 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    const s = {
+      w: 600,
+      h: 300,
+      u: 0.4,
+      loopMs: DURATION,
+      moon: { x: 468, y: 128, size: 180 },
+      lanterns: [{ x: 352, drop: 8, size: 44 }, { x: 566, drop: 20, size: 56 }],
+      fireworks: [{ x: 366, y: 150, r: 46 }, { x: 562, y: 176, r: 38 }, { x: 428, y: 44, r: 26 }],
+      clouds: [246, 262, 276, 288, 400, 400],
+      dust: { top: 10, bottom: 220 }
+    };
+    sky(k, sheet, s);
+    clouds(k, sheet, s, 0, 3);
+    envelope(k, sheet, {
+      w: 124,
+      u: 0.5,
+      tilt: 5,
+      absolute: { x: 406, y: 44 },
+      lines: [{ text: "88", style: "Figure 36", name: "Figure" }, { text: "days free", style: "Days 12", name: "Days" }]
+    });
+    clouds(k, sheet, s, 3, 6);
+    hangings(k, sheet, s);
+    k.named(sheet, "Firework").forEach((f, i) => reburst(k, f, [1500, 2600, 3500][i], s.u));
+    k.text(sheet, "Lunar New Year \xB7 a gift inside", { style: "Eyebrow 12", color: "onPaper", name: "Eyebrow" });
+    k.text(sheet, "{{brand.offer}}", { style: "Offer 30", color: "text", name: "Offer" });
+    k.text(sheet, "Start the new year square: {{brand.name}} chases your unpaid invoices. Code FRESH88, until the Lantern Festival.", { style: "Account 14", color: "onPaper", name: "Account" });
+    k.instance(sheet, "Button pill", { Label: "Open the envelope" }, { name: "Button" });
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  lunar_new_year_header_default
+};

package/dist/chunks/chunk-5FD2PC5J.js

@@ -0,0 +1,156 @@
+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 {
+  FIGURES,
+  LABEL,
+  board,
+  earthDayBrand,
+  fall,
+  fitGround,
+  flag,
+  groundContours,
+  intensity,
+  laySection,
+  plate,
+  section
+} from "./chunk-7QJUGD43.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  reboard
+} 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/motion/earth-day-pledge-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 9200;
+var OUT = 8200;
+var DAY = 1.5;
+var WAS = 0.75;
+var NOW = 0.55;
+var grams = (u) => Math.round(intensity(u, DAY));
+var BOARD = { width: 952, height: 478 };
+var SECTION = { width: 912, height: 392 };
+var counts = [
+  { layer: "After figure", at: 4300, duration: 1400, counter: { from: FIGURES.before, to: FIGURES.after, suffix: " t" } }
+];
+var cues = [
+  { layer: "Strip", preset: "fade-in", at: 0, params: { duration: 400 } },
+  // The board and the counted figure come up under their own animation, so the outro can take them away whole.
+  { layer: "Board", preset: "fade-in", at: 0, params: { duration: 200 } },
+  { layer: "After figure", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Was plate", preset: "pop-in", at: 1500, params: { duration: 300 } },
+  { layer: ["Flag 1", "Flag 2", "Flag 3"], preset: "drop-in", at: 1700, params: { duration: 380, distance: 60 }, stagger: { delay: 130, order: "selection" } },
+  { layer: "Now plate", preset: "pop-in", at: 4e3, params: { duration: 300 } },
+  { layer: "Note", preset: "fade-in", at: 5e3, params: { duration: 500 } },
+  { layer: "Pledge cell", preset: "pulse", at: 5900, params: { duration: 700, amount: 0.05 } },
+  { layer: "Call", preset: "pulse", at: 6500, params: { duration: 700, amount: 0.06 } },
+  outro(["Strip", "Board", "After figure", "Note"], OUT, { gap: 80 })
+];
+var earth_day_pledge_post_default = defineTemplate({
+  id: "motion-earth-day-pledge-post",
+  meta: {
+    name: "Earth Day pledge post (animated)",
+    description: "A climate pledge with a date on it and the working under it: the headline is the target, and under it a day of grid carbon is cut in section as a hillside whose strata build from the clean valley floor up to the dirty evening ridge; three survey flags walk down the slope from where the jobs used to run to where they run now, and the footprint counts down from 412 t to 287 beside the pledge. Just over nine seconds, looping, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "earth day", "climate", "sustainability", "pledge", "carbon", "footprint", "strata", "cross-section", "topographic", "cut paper", "counter", "data", "saas", "post", "seasonal"],
+    platforms: ["linkedin", "x", "instagram", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["announcement", "stats", "report"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Earth Day pledge post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    earthDayBrand(k, { hook: "Under 200 t by Earth Day 2027." });
+    k.textStyle("Strip 20", { ...LABEL, size: 20, fontWeight: 700, letterSpacing: 1.5, lineHeight: 26 });
+    k.textStyle("Hook 88", { ...SERIF, size: 88, fontWeight: 700, letterSpacing: -2.8, lineHeight: 88 });
+    k.textStyle("Tick 16", { ...LABEL, size: 16, fontWeight: 700, letterSpacing: 1, lineHeight: 20 });
+    k.textStyle("Scale 16", { ...MONO, size: 16, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Plate 18", { ...MONO, size: 18, fontWeight: 700, lineHeight: 22 });
+    k.textStyle("Cell 16", { ...LABEL, size: 16, fontWeight: 700, letterSpacing: 1, lineHeight: 20 });
+    k.textStyle("Cell 44", { ...MONO, size: 44, fontWeight: 800, letterSpacing: -1.5, lineHeight: 46 });
+    k.textStyle("Note 24", { size: 24, fontWeight: 500, lineHeight: 32 });
+    k.textStyle("Button 22", { size: 22, fontWeight: 700, lineHeight: 28 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 22", label: "Read the numbers", pad: [18, 24], radius: 8 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 16, 64, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    groundContours(k, sheet, 1080, 1080, { days: 5, opacity: 0.13 });
+    const top = k.stack(sheet, { gap: 10, name: "Top" });
+    const strip = k.stack(top, { direction: "HORIZONTAL", gap: 16, justify: "SPACE_BETWEEN", name: "Strip" });
+    k.text(strip, "{{brand.name}} \xB7 Earth Day 2026 \xB7 the pledge", { style: "Strip 20", color: "onPaper", name: "Strip name" });
+    k.text(strip, "Section A\u2013B", { style: "Strip 20", color: "onPaper", autoWidth: true, name: "Strip sheet" });
+    k.text(top, "{{brand.hook}}", { style: "Hook 88", color: "text", name: "Hook" });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", justify: "CENTER", name: "Drawing row" });
+    const bd = board(k, row, BOARD.width, BOARD.height, "Board");
+    const sheetOfCard = k.stack(bd, { width: BOARD.width, height: BOARD.height, gap: 10, padding: { top: 18, right: 20, bottom: 18, left: 20 }, fill: "card", radius: 8, effects: [fall(k, 40, 0.3, 16, 0)], name: "Section plate", absolute: { x: 0, y: 0 } });
+    k.text(sheetOfCard, "One Tuesday of our grid, in section \xB7 g CO2 per kWh", { style: "Tick 16", color: "onCard", name: "Section title" });
+    const sec = section(k, sheetOfCard, SECTION.width, SECTION.height, { d: DAY, left: 54, bottom: 40, top: 780 }, { label: "Scale 16" });
+    const [wx, wy] = sec.at(WAS), [nx, ny] = sec.at(NOW);
+    plate(k, sec.id, `Was ${grams(WAS)} g at 18:00`, { width: 226, height: 38, style: "Plate 18", name: "Was plate", absolute: { x: Math.min(Math.round(wx - 113), SECTION.width - 232), y: Math.round(wy - 104) } });
+    plate(k, sec.id, `Now ${grams(NOW)} g at 13:00`, { width: 226, height: 38, style: "Plate 18", name: "Now plate", absolute: { x: Math.round(nx - 113), y: Math.round(ny - 150) } });
+    const flags = [-0.022, 0, 0.022].map((off, i) => flag(k, sec, WAS + off, { name: `Flag ${i + 1}`, size: 50, move: { to: NOW + off * 1.6, at: 2500 + i * 170, duration: 1300 } }));
+    const bottom = k.stack(sheet, { gap: 14, name: "Bottom" });
+    const ledger = k.stack(bottom, { direction: "HORIZONTAL", height: 96, stroke: { color: "text", width: 2, align: "INSIDE", join: "MITER" }, name: "Ledger strip" });
+    const cell = (label, value, name, fill) => {
+      const c = k.stack(ledger, { height: "FILL", gap: 2, justify: "CENTER", padding: { top: 6, right: 18, bottom: 6, left: 18 }, stroke: { color: "text", width: 1, align: "INSIDE", join: "MITER" }, ...fill ? { fill } : {}, name: fill ? "Pledge cell" : "Ledger cell" });
+      k.text(c, label, { style: "Cell 16", color: fill ? "onPrimary" : "onPaper", name: "Cell label" });
+      k.text(c, value, { style: "Cell 44", color: fill ? "onPrimary" : "text", name });
+    };
+    cell("2024, measured", `${FIGURES.before} t`, "Before figure");
+    cell("2025, measured", `${FIGURES.after} t`, "After figure");
+    cell("2027, pledged", `<${FIGURES.pledge} t`, "Pledge figure", "primary");
+    const foot = k.stack(bottom, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Foot" });
+    k.text(foot, "No offsets, no trees. If we miss, the page will say so.", { style: "Note 24", color: "onPaper", name: "Note" });
+    k.instance(foot, "Button", { Label: "Read the numbers" }, { name: "Call" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    laySection(k, sec, 150, 130);
+    void flags;
+    const refit = (kit, id) => {
+      const f = kit.node(id);
+      fitGround(kit, id, f.width, f.height, { days: 5 * f.height / 1080 });
+    };
+    k.variants(sheet, postVariants({ portrait: 72 }, {
+      portrait: (kit, id) => {
+        reboard(kit, id, "Board", 0.98);
+        refit(kit, id);
+      },
+      vertical: (kit, id) => {
+        reboard(kit, id, "Board", 0.84);
+        for (const n of kit.named(id, "Foot")) kit.patch(n, { layoutMode: "VERTICAL", counterAxisAlignItems: "MIN", itemSpacing: 14 });
+        refit(kit, id);
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  earth_day_pledge_post_default
+};

package/dist/chunks/chunk-5FPICOLV.js

@@ -0,0 +1,89 @@
+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 {
+  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/instagram-promo.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var back = ease.back(1.9);
+var CUES = [
+  { layer: "Kicker", preset: "fade-in", at: 0 },
+  { layer: "Headline", preset: "rise-in", at: 100, params: { duration: 700 } },
+  { layer: "Products", preset: "drift", at: 0, params: { duration: 5200, distance: 18, amount: 0.02 } },
+  { layer: "Product card", preset: "pop-in", at: 600, params: { duration: 600, ease: back, amount: 0.6 }, stagger: { delay: 140 } },
+  { layer: "Shop button", preset: "pop-in", at: 1300, params: { duration: 500, ease: back, amount: 0 } },
+  { layer: "Handle", preset: "fade-in", at: 1700 },
+  { layer: "Shop button", preset: "pulse", at: 2400, params: { duration: 900, amount: 0.06 } },
+  { layer: "Kicker", preset: "rise-out", at: 4300, params: { duration: 450, distance: 60 } },
+  { layer: "Headline", preset: "rise-out", at: 4360, params: { duration: 450, distance: 60 } },
+  { layer: "Product card", preset: "drop-out", at: 4200, params: { duration: 450, distance: 90 }, stagger: { delay: 80, order: "reverse" } },
+  { layer: "Shop button", preset: "pop-out", at: 4450, params: { duration: 350 } },
+  { layer: "Handle", preset: "fade-out", at: 4500, params: { duration: 300 } }
+];
+var instagram_promo_default = defineTemplate({
+  id: "motion-instagram-promo",
+  meta: {
+    name: "Instagram promo",
+    description: "A five-second product post built from motion presets: the headline rises, three product cards pop in on a stagger, the button pulses, then everything leaves \u2014 1080\xD71350 at 30 fps",
+    category: "animation",
+    tags: ["animation", "instagram", "product", "promo", "presets"],
+    platforms: ["instagram", "facebook"],
+    formats: ["portrait-post", "ad"],
+    useCases: ["launch", "sale"],
+    created: "2026-09-28",
+    updated: "2026-09-29"
+  },
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Instagram promo", preset("ig-portrait"));
+    k.brand({ primary: "#1F1A17", accent: "#E2572B", paper: "#F6F1EA", sand: "#DCC9AE", sage: "#A9B69A", clay: "#C98B6B", muted: "#6F665E", text: "#1F1A17", onPrimary: "#F6F1EA" }, { handle: "@northwind.studio" });
+    k.textStyle("Kicker 28", { size: 28, fontWeight: 700, lineHeight: 36, letterSpacing: 4 });
+    k.textStyle("Headline 92", { size: 92, fontWeight: 800, lineHeight: 96, letterSpacing: -2 });
+    k.textStyle("Price 26", { size: 26, fontWeight: 500, lineHeight: 32 });
+    k.textStyle("Product 30", { size: 30, fontWeight: 600, lineHeight: 38 });
+    k.textStyle("Button 32", { size: 32, fontWeight: 700, lineHeight: 40 });
+    const lift = { type: "DROP_SHADOW", color: { r: 0.12, g: 0.1, b: 0.09, a: 0.12 }, offset: { x: 0, y: 12 }, blur: 32, spread: 0, visible: true };
+    k.component("Product card", { width: 280, gap: 14, fill: "paper", radius: 28, effects: [lift], padding: { top: 14, right: 14, bottom: 22, left: 14 }, props: { Name: "Linen shirt", Price: "$68" } }, (id) => {
+      k.rect(id, "FILL", 300, "sand", { radius: 18, name: "Swatch" });
+      k.propText(id, "Name", { style: "Product 30", color: "text" });
+      k.propText(id, "Price", { style: "Price 26", color: "muted" });
+    });
+    k.component("Button", { direction: "HORIZONTAL", width: "HUG", justify: "CENTER", align: "CENTER", fill: "primary", radius: 999, padding: { top: 24, right: 56, bottom: 24, left: 56 }, props: { Label: "Shop the drop \u2192" } }, (id) => {
+      k.propText(id, "Label", { style: "Button 32", color: "onPrimary", align: "CENTER", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 36, { top: 96, right: 72, bottom: 96, left: 72 }, "paper", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 5200, fps: 30 });
+    k.text(sheet, "SUMMER DROP \xB7 03", { style: "Kicker 28", color: "accent", align: "CENTER", name: "Kicker" });
+    k.text(sheet, "Linen, for the long days", { style: "Headline 92", color: "text", width: 820, align: "CENTER", name: "Headline" });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 24, name: "Products" });
+    const swatch = k.named(k.componentIdOf("Product card"), "Swatch")[0];
+    for (const [name, price, tone] of [["Linen shirt", "$68", "sand"], ["Wide trousers", "$84", "sage"], ["Market tote", "$32", "clay"]]) {
+      const card = k.instance(row, "Product card", { Name: name, Price: price });
+      k.patch(card, { overrides: { [swatch]: { fills: k.paint(tone) } } });
+    }
+    k.instance(sheet, "Button", { Label: "Shop the drop \u2192" }, { name: "Shop button" });
+    k.text(sheet, "{{brand.handle}}", { style: "Price 26", color: "muted", align: "CENTER", name: "Handle" });
+    k.cues(sheet, CUES);
+    return k.finish();
+  }
+});
+
+export {
+  instagram_promo_default
+};

package/dist/chunks/chunk-5FWRLBAW.js

@@ -0,0 +1,138 @@
+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 {
+  WRECK,
+  caseBrand,
+  caseLid,
+  caseType,
+  fitCaseLid,
+  handle,
+  placeTapeList,
+  tapeList,
+  tapeRoll
+} from "./chunk-J6A6EC5V.js";
+import {
+  mover,
+  pruneStyles
+} from "./chunk-NQEPYDMT.js";
+import {
+  hardShadow
+} from "./chunk-M6VTXO6F.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/motion/tour-tickets-wreck-dates.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var T = WRECK;
+var LOOP = 9e3;
+var plain = T.dates.filter((d) => d.status !== "new").length;
+var cues = [
+  { layer: "Strip", preset: "drop-in", at: 300, params: { duration: 240, distance: 40 }, stagger: { delay: 330 } },
+  { layer: "Sold stamp", preset: "drop-in", at: 300 + plain * 330 + 250, params: { duration: 170, distance: 22 }, stagger: { delay: 260 } },
+  { layer: "Lid", preset: "shake", at: 300 + plain * 330 + 250, params: { duration: 600, distance: 7 } },
+  { layer: "New strip", preset: "drop-in", at: 4300, params: { duration: 240, distance: 56 }, stagger: { delay: 400 } },
+  { layer: "Strip tag", preset: "pulse", at: 5600, params: { duration: 520, amount: 0.12 }, stagger: { delay: 80 } },
+  // The crew peels everything off, last laid first, so the loop comes back to the bare lid.
+  { layer: ["Sold stamp", "New strip", "Strip"], preset: "rise-out", at: 8100, params: { duration: 260, distance: 30 }, stagger: { delay: 45, order: "selection" } }
+];
+var NAME = `Tour tickets date list post: ${T.act}`;
+function lay(k, id, w, h) {
+  const { at, scaled } = mover(k, id);
+  let list;
+  if (w === h) {
+    at("Head", 74, 58, { width: 932 });
+    list = { x: 136, y: 236, scale: 0.98, gap: 10 };
+    at("Foot", 74, 1020, { width: 932, visible: false });
+    at("Roll cream", 950, -96);
+    at("Roll orange", -70, 980);
+    at("Handle", 0, 0, { visible: false });
+  } else if (h === 1350) {
+    at("Head", 74, 70, { width: 932 });
+    list = { x: 86, y: 300, scale: 1.1, gap: 16 };
+    at("Foot", 74, 1200, { width: 932, visible: true });
+    at("Roll cream", 900, -40);
+    at("Roll orange", -70, 1220);
+    at("Handle", 0, 0, { visible: false });
+  } else {
+    at("Head", 140, 250, { width: 800 });
+    list = { x: 146, y: 516, scale: 0.97, gap: 30 };
+    at("Foot", 140, 1336, { width: 800, visible: false });
+    scaled("Handle", 300, 1560, 1.2, { visible: true });
+    at("Roll cream", 60, 1620);
+    at("Roll orange", 830, 1660);
+  }
+  placeTapeList(k, id, T.dates, list);
+}
+var tour_tickets_wreck_dates_default = defineTemplate({
+  id: "motion-tour-tickets-wreck-dates",
+  meta: {
+    name: NAME,
+    description: "An animated tour date list for an arena rock band, on the lid of a flight case: ten cities on strips of console tape slap down in date order, SOLD OUT is sprayed across three nights, two fluorescent NEW DATE strips are added, then the strips are peeled off and the loop begins again. Nine seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "tour", "tour dates", "tickets", "concert", "arena", "rock", "band", "sold out", "new date", "road case", "post", "loop"],
+    platforms: ["instagram", "facebook", "threads", "x"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["announcement", "event"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    caseBrand(k, { name: "HALCYON WRECK" });
+    caseType(k);
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, 0, "paper", "MIN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    const lid = k.frame(sheet, { x: 0, y: 0, width: 1080, height: 1080 }, { name: "Lid" });
+    k.patch(lid, { layoutPositioning: "ABSOLUTE" });
+    caseLid(k, lid, 1080, 1080);
+    handle(k, lid, 400);
+    tapeRoll(k, lid, 200, "card", { x: 0, y: 0, name: "Roll cream" });
+    tapeRoll(k, lid, 170, "primary", { x: 0, y: 0, name: "Roll orange" });
+    const head = k.stack(lid, { width: 932, gap: 10, name: "Head", absolute: { x: 0, y: 0 } });
+    k.text(head, "{{brand.name}}", { style: "Stencil 92", color: "text", width: "FILL", name: "Title", effects: [hardShadow(k, "primary", 6, 6)] });
+    k.text(head, `${T.tour.toUpperCase()} \xB7 LEG 1 \xB7 MARCH ${T.year}`, { style: "Tour 22", color: "onPaper", autoWidth: true, name: "Tour line" });
+    tapeList(k, lid, T.dates, { x: 0, y: 0, scale: 1, gap: 12 });
+    const foot = k.stack(lid, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 16, wrap: true, name: "Foot", absolute: { x: 0, y: 0 } });
+    k.text(foot, `${T.presale.club.toUpperCase()} PRESALE ${T.presale.opens}`, { style: "Label 18", color: "text", autoWidth: true, name: "Foot presale" });
+    k.text(foot, `CODE ${T.presale.code}`, { style: "Label 18", color: "text", autoWidth: true, name: "Foot code" });
+    lay(k, lid, 1080, 1080);
+    k.cues(sheet, cues);
+    const size = (kit, id, w, h) => {
+      for (const l of kit.named(id, "Lid")) {
+        kit.patch(l, { x: 0, y: 0, width: w, height: h });
+        fitCaseLid(kit, l, w, h);
+        lay(kit, l, w, h);
+      }
+    };
+    k.variants(sheet, [
+      { preset: "ig-portrait", adjust: (kit, id) => size(kit, id, 1080, 1350) },
+      { preset: "ig-story", adjust: (kit, id) => {
+        for (const t of kit.named(id, "Title")) kit.restyle(t, "Stencil 118");
+        size(kit, id, 1080, 1920);
+      } }
+    ]);
+    pruneStyles(k);
+    return k.finish();
+  }
+});
+
+export {
+  tour_tickets_wreck_dates_default
+};