@popcraft/kit 0.53.4 → 0.53.6

package/dist/chunks/chunk-LFCWZCL4.js

@@ -0,0 +1,237 @@
+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 {
+  drawn,
+  soft
+} from "./chunk-LR5VYYFU.js";
+import {
+  flatPhone,
+  uiRoles
+} from "./chunk-PJVRLN6J.js";
+import {
+  stars
+} from "./chunk-2VFVKPUT.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  ground
+} from "./chunk-LWSZATOL.js";
+import {
+  glow
+} from "./chunk-YORIY3BT.js";
+import {
+  rng
+} from "./chunk-EJLCQVQK.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/social/saas-store-story.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var W = 1290;
+var H = 2796;
+var SCALE = 2.02;
+var PW = Math.round(426 * SCALE);
+var SCREENS = [
+  { name: "Score", tabs: [4, 0], blocks: [
+    { kind: "title", text: "Last night", note: "Thu 1 Oct" },
+    { kind: "ring", share: 0.61, figure: "61", label: "Sleep score" },
+    { kind: "tiles", items: [["In bed", "6h 12m"], ["Felt like", "4h 05m"]] },
+    { kind: "rows", card: true, rows: [{ title: "Woke 7 times", sub: "Longest stretch 1h 48m", glyph: "bolt" }, { title: "Deep sleep", sub: "38 min \xB7 low for you", glyph: "moon" }, { title: "Bedtime drifted", sub: "52 min later than usual", glyph: "bars" }] },
+    { kind: "button", label: "See what woke you" }
+  ] },
+  { name: "Night", tabs: [4, 1], blocks: [
+    { kind: "title", text: "Your night", note: "23:48\u20136:00" },
+    { kind: "bars", title: "Sleep depth", note: "Every 20 min", values: [2, 5, 8, 9, 6, 3, 7, 9, 4, 1, 5, 8, 6, 3, 6, 4, 2, 1], hi: 9, height: 150 },
+    { kind: "heading", text: "What woke you", note: "3 causes" },
+    { kind: "rows", card: true, rows: [
+      { title: "Noise, 58 dB", sub: "2:14 \xB7 a door, then traffic", value: "9 min", glyph: "bolt" },
+      { title: "Room at 24\xB0", sub: "3:40 \xB7 two degrees too warm", value: "14 min", glyph: "sun" },
+      { title: "Late coffee", sub: "16:30 \xB7 still active at 1:00", value: "31 min", glyph: "drop" }
+    ] },
+    { kind: "tiles", items: [["Lost to wake-ups", "54 min"], ["Fixable", "2 of 3"]] }
+  ] },
+  { name: "Wind down", tabs: [4, 2], blocks: [
+    { kind: "title", text: "Wind down", note: "Starts 22:40" },
+    { kind: "hero", label: "Tonight\u2019s bedtime", figure: "23:10", note: "For 7h 30m before your 6:40 alarm", share: 0.35 },
+    { kind: "checks", rows: [["Last coffee before 14:00", true], ["Dim the lights at 22:00", true], ["Phone down, 22:40", false], ["Ten-minute breathing", false]] },
+    { kind: "curve", title: "Heart rate, last hour", note: "bpm", values: [78, 76, 74, 70, 69, 66, 63, 61, 60, 58], height: 110 },
+    { kind: "button", label: "Start wind down" }
+  ] },
+  { name: "Wake", tabs: [4, 3], blocks: [
+    { kind: "title", text: "Smart alarm", note: "On" },
+    { kind: "hero", label: "Wake window", figure: "6:20\u20136:40", note: "Nocta picks your lightest minute", fill: "accent", ink: "onAccent" },
+    { kind: "curve", title: "Predicted sleep depth", note: "Tomorrow", values: [9, 8, 5, 7, 9, 6, 3, 5, 8, 4, 2, 1], mark: 10, height: 120 },
+    { kind: "rows", card: true, rows: [{ title: "Sunrise sound", sub: "Rises over 4 minutes", glyph: "sun" }, { title: "No snooze needed", sub: "11 mornings in a row", glyph: "check" }] },
+    { kind: "tiles", items: [["This week", "+47 min"], ["Score", "61 to 78"]] }
+  ] },
+  { name: "Week", tabs: [4, 0], blocks: [
+    { kind: "title", text: "Seven nights in", note: "Week 1" },
+    { kind: "ring", share: 0.84, figure: "84", label: "Sleep score" },
+    { kind: "bars", title: "Score by night", values: [61, 64, 70, 69, 76, 80, 84], hi: 6, labels: ["F", "S", "S", "M", "T", "W", "T"], height: 96 },
+    { kind: "tiles", items: [["Asleep", "7h 31m"], ["Wake-ups", "2"]] },
+    { kind: "button", label: "Keep going with Nocta Plus" }
+  ] }
+];
+var FRAMES = [
+  { name: "Hook", kicker: "Sound familiar?", title: "Six hours in bed. It felt like four.", screen: 0, phone: "centre" },
+  { name: "Journey: see", kicker: "Night one", title: "See exactly what woke you.", screen: 1, phone: "left", callouts: [
+    { text: "Every stir, to the minute", y: 1480, side: "right", at: 1560 },
+    { text: "The cause, not just the count", y: 1960, side: "right", at: 2040 },
+    { text: "What you can fix tonight", y: 2440, side: "right", at: 2500 }
+  ] },
+  { name: "Journey: change", kicker: "Night three", title: "A wind-down built from your own nights.", screen: 2, phone: "right", callouts: [
+    { text: "A bedtime that fits your alarm", y: 1500, side: "left", at: 1560 },
+    { text: "Four small habits, not forty", y: 1990, side: "left", at: 2050 },
+    { text: "Your pulse says when you\u2019re ready", y: 2420, side: "left", at: 2480 }
+  ] },
+  { name: "Journey: wake", kicker: "Night five", title: "Wake in light sleep, not out of deep.", screen: 3, phone: "left", callouts: [
+    { text: "A 20-minute window, never a jolt", y: 1500, side: "right", at: 1560 },
+    { text: "It learns your mornings", y: 2080, side: "right", at: 2140 }
+  ] },
+  { name: "Proof", kicker: "After a week", title: "From 61 to 84 in seven nights." },
+  { name: "Call", kicker: "Start tonight", title: "Your first seven nights are free.", note: "No band, no ring. Your phone on the bedside table is enough.", screen: 4, phone: "centre" }
+];
+var REVIEWS = [
+  ["\u201CIt told me my room was two degrees too warm. One fan later I sleep through.\u201D", "Renata V."],
+  ["\u201CFirst app that explained why I\u2019m tired instead of just telling me I am.\u201D", "Tom\xE1s K."],
+  ["\u201CThe alarm window is the feature. I have not hit snooze in a month.\u201D", "Bea L."]
+];
+function laurel(s, mirror) {
+  const out = [];
+  const c = s / 2, r = s * 0.42;
+  for (let i = 0; i < 10; i++) {
+    const a = (240 - i * 13) * Math.PI / 180;
+    const bx = c + r * Math.cos(a), by = c - r * Math.sin(a);
+    const dir = a - Math.PI / 2 + 0.62, len = s * (0.13 - i * 4e-3), wid = len * 0.3;
+    const tip = { x: bx + Math.cos(dir) * len, y: by - Math.sin(dir) * len };
+    const n = { x: Math.sin(dir) * wid, y: Math.cos(dir) * wid };
+    const mid = { x: (bx + tip.x) / 2, y: (by + tip.y) / 2 };
+    const pts = [{ x: bx, y: by }, { x: mid.x + n.x, y: mid.y + n.y }, tip, { x: mid.x - n.x, y: mid.y - n.y }];
+    out.push({ closed: true, points: pts.map((p) => ({ x: mirror ? s - p.x : p.x, y: p.y })) });
+  }
+  return out;
+}
+var saas_store_story_default = defineTemplate({
+  id: "social-saas-store-story",
+  meta: {
+    name: "SaaS store screenshots: story sequence",
+    description: "Six dark App Store screenshots (1290 \xD7 2796) that read as one argument: a hook, three journey frames with callouts pinned to the part of the screen they explain, a proof frame (laurel, rating, three reviews) and a call to install. A night ground, a star field and one amber light. Drop your own capture on each phone\u2019s screenshot slot",
+    category: "social",
+    tags: ["saas", "saas store", "app store", "screenshots", "story", "dark", "callouts", "reviews", "award", "iphone", "aso", "mobile app", "subscription app", "listing"],
+    platforms: ["app-store", "ios"],
+    formats: ["screenshot", "gallery"],
+    useCases: ["launch", "brand-intro", "testimonial"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  sequence: true,
+  build() {
+    const k = new Kit("SaaS store screenshots: story sequence", preset("appstore-iphone"));
+    k.quantizeGeometry = true;
+    k.brand(
+      {
+        paper: "#07080C",
+        text: "#F6F0E4",
+        primary: "#FFB23E",
+        onPrimary: "#1D1100",
+        accent: "#FF7A45",
+        onAccent: "#1F0A00",
+        ...uiRoles({ screen: "#0E1017", surface: "#191C27", onScreen: "#F6F0E4", onScreenMuted: "#B4B8C6", line: "#313646", track: "#2B2F3D", tile: "#2B2F3D", photo: "#2B2F3D", positive: "#7FD6A4", primary: "#FFB23E", onPrimary: "#1D1100", accent: "#FF7A45", onAccent: "#1F0A00", device: "#1A1C24", deviceEdge: "#4A4F60" })
+      },
+      { name: "Nocta" }
+    );
+    k.palette({ card: "#151823", onCard: "#F6F0E4", cardLine: "#3A3F52", star: "#F6F0E4" });
+    k.textStyle("Title 150", { ...SERIF, size: 150, fontWeight: 700, letterSpacing: -5, lineHeight: 148 });
+    k.textStyle("Kicker 36", { ...MONO, size: 36, fontWeight: 700, letterSpacing: 2.6, lineHeight: 44, textCase: "UPPER" });
+    k.textStyle("Callout 40", { size: 40, fontWeight: 700, letterSpacing: -0.8, lineHeight: 46 });
+    k.textStyle("Note 46", { size: 46, fontWeight: 500, letterSpacing: -0.6, lineHeight: 60 });
+    k.textStyle("Review 44", { ...SERIF, size: 44, fontWeight: 600, letterSpacing: -0.6, lineHeight: 56 });
+    k.textStyle("Who 32", { ...MONO, size: 32, fontWeight: 600, lineHeight: 40 });
+    k.textStyle("Award 60", { ...SERIF, size: 60, fontWeight: 700, letterSpacing: -1.4, lineHeight: 64, textAlign: "CENTER" });
+    k.textStyle("Rating 220", { ...SERIF, size: 220, fontWeight: 700, letterSpacing: -8, lineHeight: 200 });
+    k.component("Callout", { width: 400, fill: "card", radius: 28, padding: { top: 26, right: 30, bottom: 28, left: 30 }, stroke: { color: "primary", width: 3, align: "INSIDE" }, effects: [soft(k, "paper", 0.7, 20, 50)], description: "A callout pinned to a part of the screen.", props: { Text: "Every stir, to the minute" } }, (id) => {
+      k.propText(id, "Text", { style: "Callout 40", color: "onCard" });
+    });
+    let cover = "";
+    FRAMES.forEach((f, i) => {
+      const sheet = i === 0 ? k.sheet : k.addSheet(preset("appstore-iphone"));
+      ground(k, sheet, `${i + 1} \xB7 ${f.name}`, "paper");
+      k.patch(sheet, { x: i * (W + 120), y: 0 });
+      if (!cover) cover = sheet;
+      const r = rng(40 + i);
+      const bands = f.screen === void 0 ? [[20, 170], [760, 880]] : [[20, 170], [780, 1700]];
+      bands.forEach(([top, bottom], bi) => {
+        const dots = [];
+        for (let s = 0; s < (bottom - top) / 7; s++) {
+          const x = r() * W, y = top + r() * (bottom - top), d = 2 + r() * 5;
+          dots.push({ closed: true, points: [{ x, y: y - d }, { x: x + d, y }, { x, y: y + d }, { x: x - d, y }] });
+        }
+        drawn(k, sheet, dots, "star", { name: `Stars ${bi + 1}`, opacity: 0.55 });
+      });
+      glow(k, sheet, { role: i >= 4 ? "primary" : "accent", w: 2600, x: W / 2 + (i % 2 ? 260 : -260), y: H - 100, alpha: 0.26 + i * 0.03, name: "Light" });
+      glow(k, sheet, { role: "primary", w: 1300, x: W / 2, y: H - 200, alpha: 0.3, name: "Ember" });
+      const words = k.stack(sheet, { width: W - 192, gap: 34, name: "Words", absolute: { x: 96, y: 200 } });
+      const tag = k.stack(words, { direction: "HORIZONTAL", width: "HUG", gap: 20, align: "CENTER", name: "Kicker row" });
+      k.rect(tag, 12, 44, "primary", { radius: 6, name: "Kicker bar" });
+      k.text(tag, f.kicker, { style: "Kicker 36", color: "text", autoWidth: true, name: "Kicker" });
+      k.text(words, f.title, { style: "Title 150", color: "text", name: "Title" });
+      if (f.note) k.text(words, f.note, { style: "Note 46", color: "text", width: 980, name: "Note" });
+      if (f.screen !== void 0) {
+        const x = f.phone === "left" ? 16 : f.phone === "right" ? W - PW - 16 : (W - PW) / 2;
+        flatPhone(k, sheet, { spec: SCREENS[f.screen], scale: SCALE, x, y: 1080, name: "Phone", shadow: { type: "DROP_SHADOW", color: k.color("primary", 0.22), offset: { x: 0, y: 0 }, blur: 60, spread: 0, visible: true } });
+        for (const c of f.callouts ?? []) {
+          const cw = 400, cx = c.side === "right" ? W - cw - 24 : 24;
+          const dotX = c.side === "right" ? cx - 150 : cx + cw + 150;
+          k.rect(sheet, 150, 5, "primary", { name: "Leader", absolute: { x: c.side === "right" ? cx - 150 : cx + cw, y: c.at } });
+          k.ellipse(sheet, 34, "primary", { name: "Leader dot", stroke: { color: "paper", width: 8, align: "OUTSIDE" }, absolute: { x: dotX - 17, y: c.at - 15 } });
+          k.instance(sheet, "Callout", { Text: c.text }, { name: "Callout", absolute: { x: cx, y: c.y } });
+        }
+      } else {
+        const award = k.stack(sheet, { direction: "HORIZONTAL", width: W - 192, gap: 40, align: "CENTER", name: "Award", absolute: { x: 96, y: 900 } });
+        const wreath = k.stack(award, { width: 520, height: 420, align: "CENTER", justify: "CENTER", name: "Wreath" });
+        for (const side of [false, true]) drawn(k, wreath, laurel(520, side).map((p) => ({ ...p, points: p.points.map((q) => ({ x: q.x, y: q.y - 60 })) })), "primary", { name: "Laurel" });
+        k.text(wreath, "App of\nthe Day", { style: "Award 60", color: "text", width: 300, name: "Award name" });
+        const rating = k.stack(award, { gap: 14, name: "Rating" });
+        k.text(rating, "4.9", { style: "Rating 220", color: "text", name: "Rating figure" });
+        stars(k, rating, 56, "primary");
+        k.text(rating, "212,000 ratings", { style: "Who 32", color: "text", name: "Rating count" });
+        const list = k.stack(sheet, { width: W - 192, gap: 36, name: "Reviews", absolute: { x: 96, y: 1440 } });
+        REVIEWS.forEach(([quote, who], j) => {
+          const card = k.stack(list, { width: W - 192 - 80, gap: 22, fill: "card", radius: 36, padding: { top: 40, right: 46, bottom: 40, left: 46 }, stroke: { color: "cardLine", width: 3, align: "INSIDE" }, name: "Review" });
+          k.patch(card, { translateX: j % 2 ? 80 : 0 });
+          k.text(card, quote, { style: "Review 44", color: "onCard", name: "Review quote" });
+          const by = k.stack(card, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Review by" });
+          stars(k, by, 30, "primary");
+          k.text(by, who, { style: "Who 32", color: "onCard", autoWidth: true, name: "Reviewer" });
+        });
+        const nights = k.stack(sheet, { direction: "HORIZONTAL", width: W - 192, gap: 22, align: "MAX", name: "Nights", absolute: { x: 96, y: 2330 } });
+        [61, 64, 70, 69, 76, 80, 84].forEach((v, j) => {
+          const col = k.stack(nights, { width: 138, gap: 14, name: "Night" });
+          k.text(col, String(v), { style: "Who 32", color: "text", name: "Night score" });
+          k.rect(col, 138, Math.round((v - 50) * 11), j === 6 ? "primary" : "card", { radius: 20, name: "Night bar", ...j === 6 ? {} : { stroke: { color: "cardLine", width: 3, align: "INSIDE" } } });
+        });
+      }
+    });
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  saas_store_story_default
+};

package/dist/chunks/chunk-LGNJ44SO.js

@@ -0,0 +1,122 @@
+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,
+  flourishComponent,
+  heart,
+  leaf,
+  quad,
+  rose
+} from "./chunk-YVN7SFQ7.js";
+import {
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/print/holidays-valentines-dinner-menu.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Valentine\u2019s dinner menu";
+var PAD = { top: 214, right: 40, bottom: 40, left: 40 };
+var COURSES = [
+  ["APERITIVO", "Blood-orange spritz", "or a glass of Franciacorta ros\xE9"],
+  ["ANTIPASTO", "Burrata, roasted beets, pistachio", "with warm focaccia from our oven"],
+  ["PRIMO", "Heart-shaped ravioli of ricotta and lemon", "brown butter, sage, a little black pepper"],
+  ["SECONDO", "Slow-cooked short rib, soft polenta", "or wild mushroom and chestnut risotto"],
+  ["DOLCE", "Dark chocolate torta for two", "raspberries, vanilla mascarpone"]
+];
+function art(w, h) {
+  const s = w / 374, B = 12 * s;
+  const r1 = rose(w - 70 * s, 64 * s, 44 * s, 3), r2 = rose(w - 158 * s, 22 * s, 32 * s, 7), bud = rose(56 * s, 40 * s, 18 * s, 9);
+  const stem = [quad({ x: w + B, y: 150 * s }, { x: w - 130 * s, y: 128 * s }, { x: 40 * s, y: 50 * s }, 24)];
+  const leaves = [leaf({ x: w - 40 * s, y: 132 * s }, 40 * s, 16 * s, 2.7), leaf({ x: w - 110 * s, y: 118 * s }, 36 * s, 15 * s, 3.5), leaf({ x: w - 200 * s, y: 104 * s }, 34 * s, 14 * s, 2.6), leaf({ x: w - 250 * s, y: 92 * s }, 30 * s, 12 * s, 3.6), leaf({ x: 110 * s, y: 66 * s }, 28 * s, 11 * s, 2.7)];
+  const petal = (x, y, r, t) => heart(x, y, r * 2 * s, t);
+  return [
+    { name: "Stem", paths: stem, color: "leaf", o: { strokeWidth: 2.2 * s } },
+    { name: "Leaves", paths: leaves, color: "leaf" },
+    { name: "Rose petals outer", paths: [...r1.outer, ...r2.outer, ...bud.outer], color: "rose" },
+    { name: "Rose petals inner", paths: [...r1.inner, ...r2.inner, ...bud.inner], color: "roseDeep" },
+    { name: "Rose edges", paths: [...r1.outer, ...r2.outer], color: "roseDeep", o: { strokeWidth: 0.8 * s, opacity: 0.5 } },
+    { name: "Petals", paths: [petal(16 * s, h - 40 * s, 7, 0.4), petal(30 * s, h - 18 * s, 5, 1.2)], color: "rose", o: { opacity: 0.7 } },
+    { name: "Petals", paths: [petal(w - 18 * s, h - 30 * s, 6, -0.6), petal(w - 34 * s, h - 12 * s, 4, 0.2)], color: "rose", o: { opacity: 0.55 } },
+    { name: "Dots", paths: [disc(26 * s, 150 * s, 2 * s), disc(40 * s, 166 * s, 1.4 * s)], color: "primary" }
+  ];
+}
+var holidays_valentines_dinner_menu_default = defineTemplate({
+  id: "print-holidays-valentines-dinner-menu",
+  meta: {
+    name: NAME,
+    description: "A table menu for a small restaurant\u2019s Valentine\u2019s supper: roses seen from above climb in from the corner of a blush card, the five courses are set in a light serif with small-capital course names between hairlines, and the price and wine pairing sit at the foot. DL to stand on each table, with bleed",
+    category: "menu",
+    tags: ["valentine\u2019s day", "valentines", "menu", "restaurant", "dinner", "prix fixe", "tasting menu", "roses", "romantic", "italian", "small business", "print"],
+    platforms: ["print"],
+    formats: ["card"],
+    useCases: ["menu", "event"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("dl-flyer"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F8E9E4", text: "#4A1722", onPaper: "#7B3A44", primary: "#9E2B3E", onPrimary: "#FFF4F1", line: "#E3BFC0" },
+      { name: "Osteria Lina" }
+    );
+    k.palette({ rose: "#D9566E", roseDeep: "#A12E46", leaf: "#5F7A5A" });
+    k.textStyle("Kicker 9", { size: 9, fontWeight: 700, letterSpacing: 2.6, lineHeight: 13 });
+    k.textStyle("Title 34", { ...SERIF, size: 34, fontWeight: 300, fontStyle: "italic", letterSpacing: -0.6, lineHeight: 36 });
+    k.textStyle("Date 11", { ...SERIF, size: 11, fontWeight: 400, lineHeight: 15 });
+    k.textStyle("Course 8", { size: 8, fontWeight: 700, letterSpacing: 2.4, lineHeight: 11 });
+    k.textStyle("Dish 14", { ...SERIF, size: 14, fontWeight: 500, lineHeight: 18 });
+    k.textStyle("Note 10", { ...SERIF, size: 10, fontWeight: 400, fontStyle: "italic", lineHeight: 14 });
+    k.textStyle("Price 11", { size: 11, fontWeight: 600, letterSpacing: 0.4, lineHeight: 16 });
+    k.component("Course", { gap: 3, width: 294, align: "CENTER", props: { Course: "COURSE", Dish: "Dish", Note: "How it comes" } }, (id) => {
+      k.propText(id, "Course", { style: "Course 8", color: "onPaper", align: "CENTER", width: "FILL", name: "Course name" });
+      k.propText(id, "Dish", { style: "Dish 14", color: "text", align: "CENTER", width: "FILL", name: "Dish" });
+      k.propText(id, "Note", { style: "Note 10", color: "onPaper", align: "CENTER", width: "FILL", name: "Note" });
+    });
+    flourishComponent(k, "Heart rule", "primary", heart(0, 0, 10), { rule: 30, size: 8 });
+    const sheet = k.sheet;
+    const { width: W, height: H } = k.node(sheet);
+    k.flowSheet(sheet, 0, PAD, "paper", "MIN", "CENTER");
+    draw(k, sheet, art(W, H));
+    const c = { align: "CENTER", width: "FILL" };
+    k.text(sheet, "SATURDAY 13 & SUNDAY 14 FEBRUARY", { style: "Kicker 9", color: "onPaper", ...c, name: "Kicker" });
+    k.stack(sheet, { height: 8, name: "Gap" });
+    k.text(sheet, "A supper for two", { style: "Title 34", color: "text", ...c, name: "Title" });
+    k.text(sheet, "Valentine\u2019s at {{brand.name}}", { style: "Date 11", color: "onPaper", ...c, name: "Sub" });
+    k.stack(sheet, { height: 18, name: "Gap" });
+    for (const [i, [course, dish, note]] of COURSES.entries()) {
+      k.instance(sheet, "Course", { Course: course, Dish: dish, Note: note }, { name: "Course", width: "FILL" });
+      if (i < COURSES.length - 1) {
+        k.stack(sheet, { height: 10, name: "Gap" });
+        k.rect(sheet, 40, 1, "line", { name: "Hairline" });
+        k.stack(sheet, { height: 10, name: "Gap" });
+      }
+    }
+    k.stack(sheet, { height: 20, name: "Gap" });
+    k.instance(sheet, "Heart rule", {}, { name: "Divider" });
+    k.stack(sheet, { height: 10, name: "Gap" });
+    k.text(sheet, "$85 per person \xB7 wine pairing $40", { style: "Price 11", color: "text", ...c, name: "Price" });
+    k.text(sheet, "Please tell us about any allergies. Sittings at 6 and 8:30.", { style: "Note 10", color: "onPaper", ...c, name: "Allergies" });
+    return k.finish();
+  }
+});
+
+export {
+  holidays_valentines_dinner_menu_default
+};

package/dist/chunks/chunk-LH4EF7WS.js

@@ -0,0 +1,177 @@
+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 {
+  MONTHLY_SPANS,
+  MONTHS,
+  SPANWISE,
+  body,
+  code,
+  dataBrand,
+  display,
+  figure,
+  heatMap,
+  label,
+  lockup,
+  panel,
+  ts
+} from "./chunk-QMU6HJDZ.js";
+import {
+  drawOn
+} from "./chunk-CLQ3FUJI.js";
+import {
+  board,
+  hide,
+  reboard,
+  restyle
+} from "./chunk-LWSZATOL.js";
+import {
+  postVariants
+} from "./chunk-KOAJ6HD2.js";
+import {
+  pt3
+} from "./chunk-EJLCQVQK.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/social/style-data-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Data SaaS milestone post";
+var DURATION = 8e3;
+var CHART = { w: 888, h: 300 };
+var TOP = 1100;
+var BARS = 400;
+var STEP = 180;
+var cues = [
+  { layer: "Top row", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Unit", preset: "words-in", at: 200, params: { duration: 700 } },
+  { layer: "Month row", preset: "slide-in", at: 2400, stagger: { delay: 160, order: "selection" }, params: { direction: "left", distance: 40, duration: 420 } },
+  { layer: "Trillion line", preset: "fade-in", at: BARS + 8 * STEP + 300, params: { duration: 400 } },
+  { layer: "Thanks", preset: "fade-in", at: 3400, params: { duration: 600 } },
+  { layer: "Big figure", preset: "pulse", at: 3e3, params: { duration: 800, amount: 0.03 } }
+];
+var counts = [
+  { layer: "Big figure", at: 200, duration: 2600, counter: { from: 0, to: SPANWISE.trillion, decimals: 2 } }
+];
+var style_data_milestone_default = defineTemplate({
+  id: "social-saas-style-data-milestone",
+  meta: {
+    name: NAME,
+    description: "An animated milestone post in a data-dense enterprise look for an observability platform: 1.02 trillion spans in a month counts up in big tabular figures while the year's months rise as bars on a ruled console chart, a line draws through their tops and a dashed trillion line lights as September crosses it, over a small table of the last three months. Square with 4:5 and 9:16 cuts",
+    category: "social",
+    tags: ["social", "post", "milestone", "metric", "counter", "chart", "bar chart", "saas", "data", "dashboard", "enterprise", "observability", "animation", "instagram", "linkedin"],
+    platforms: ["instagram", "linkedin", "x", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "stats", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    dataBrand(k);
+    ts(k, "Brand 30", display(30));
+    ts(k, "Label 20", label(20));
+    ts(k, "Figure 190", figure(190));
+    ts(k, "Figure 220", figure(220));
+    ts(k, "Unit 42", display(42, { lead: 1.12 }));
+    ts(k, "Axis 18", figure(18, 500));
+    ts(k, "Tag 18", label(18));
+    ts(k, "Head 17", label(17));
+    ts(k, "Cell 24", figure(24, 500));
+    ts(k, "Mono 24", code(24));
+    ts(k, "Thanks 26", body(26, 500));
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Milestone");
+    k.flowSheet(sheet, 22, 72, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
+    lockup(k, top, { size: 48, style: "Brand 30" });
+    k.text(top, "SEPTEMBER 2026 \xB7 MILESTONE", { style: "Label 20", color: "onPaper", autoWidth: true, name: "Kicker" });
+    const fig = k.stack(sheet, { direction: "HORIZONTAL", gap: 28, align: "CENTER", name: "Figure row" });
+    k.text(fig, SPANWISE.trillion.toFixed(2), { style: "Figure 190", color: "text", width: 380, name: "Big figure" });
+    k.text(fig, "trillion spans indexed in one month. Every one kept.", { style: "Unit 42", color: "text", name: "Unit" });
+    const con = panel(k, sheet, { gap: 8, padding: { top: 20, right: 24, bottom: 16, left: 24 }, name: "Chart panel" });
+    const cb = board(k, con, CHART.w, CHART.h + 30, 1, "Chart board");
+    const plotH = CHART.h, x0 = 70, plotW = CHART.w - x0;
+    const yOf = (v) => Math.round(plotH - v / TOP * plotH);
+    for (const [v, t] of [[0, "0"], [500, "500 B"], [1e3, "1 T"]]) {
+      k.rect(cb, plotW, 1, "line", { name: "Grid line", absolute: { x: x0, y: yOf(v) } });
+      k.text(cb, t, { style: "Axis 18", color: "cardMuted", autoWidth: true, name: "Grid label", absolute: { x: 0, y: yOf(v) - 12 } });
+    }
+    const tl = k.vector(cb, plotW, 4, [{ closed: false, points: [pt3(0, 2), pt3(plotW, 2)] }], [], { name: "Trillion line", absolute: { x: x0, y: yOf(1e3) - 2 }, stroke: { color: "warn", width: 2, dash: [6, 10], cap: "ROUND" } });
+    void tl;
+    const slot = plotW / MONTHLY_SPANS.length, bw = Math.round(slot * 0.56);
+    const tops = [];
+    MONTHLY_SPANS.forEach((v, i) => {
+      const x = Math.round(x0 + slot * i + (slot - bw) / 2), h = plotH - yOf(v);
+      const last = i === MONTHLY_SPANS.length - 1;
+      const bar = k.rect(cb, bw, h, last ? "primary" : "cool", { name: last ? "Last bar" : "Bar", radius: 3, absolute: { x, y: yOf(v) } });
+      k.patch(bar, { anchorY: 1 });
+      k.animate(bar, "scaleY", [{ t: BARS + i * STEP, v: 0, ease: ease.out("cubic") }, { t: BARS + i * STEP + 520, v: 1 }]);
+      k.text(cb, MONTHS[i], { style: "Axis 18", color: last ? "onCard" : "cardMuted", width: Math.round(slot), align: "CENTER", name: "Month label", absolute: { x: Math.round(x0 + slot * i), y: plotH + 8 } });
+      tops.push({ x: x - x0 + bw / 2, y: yOf(v) });
+    });
+    const line = k.vector(cb, plotW, plotH, [{ closed: false, points: tops.map((p) => pt3(p.x, p.y)) }], [], { name: "Top line", absolute: { x: x0, y: 0 }, stroke: { color: "onCard", width: 2.5, cap: "ROUND", join: "ROUND" } });
+    drawOn(k, line, BARS + 200, 8 * STEP + 400);
+    const tag = k.stack(cb, { direction: "HORIZONTAL", width: "HUG", fill: "warn", radius: 4, padding: { top: 3, right: 8, bottom: 3, left: 8 }, name: "Trillion tag", absolute: { x: x0 + 8, y: yOf(1e3) - 34 } });
+    k.text(tag, "1 TRILLION", { style: "Tag 18", color: "well", autoWidth: true, name: "Tag words" });
+    k.animate(tag, "opacity", [{ t: BARS + 8 * STEP + 300, v: 0, ease: ease.out("cubic") }, { t: BARS + 8 * STEP + 700, v: 1 }]);
+    const tb = panel(k, sheet, { name: "Month table" });
+    const th = k.stack(tb, { direction: "HORIZONTAL", height: 38, align: "CENTER", padding: { top: 0, right: 24, bottom: 0, left: 24 }, fill: "well", name: "Month head" });
+    for (const [t, w] of [["MONTH", "FILL"], ["SPANS", 260], ["VS PRIOR", 200]]) k.text(th, t, { style: "Head 17", color: "cardMuted", width: w, align: w === "FILL" ? "LEFT" : "RIGHT", name: "Month col" });
+    for (const i of [6, 7, 8]) {
+      const v = MONTHLY_SPANS[i], prev = MONTHLY_SPANS[i - 1];
+      const r = k.stack(tb, { direction: "HORIZONTAL", height: 48, align: "CENTER", padding: { top: 0, right: 24, bottom: 0, left: 24 }, name: "Month row" });
+      k.text(r, `${MONTHS[i]} 2026`, { style: "Mono 24", color: "onCard", width: "FILL", name: "Month name" });
+      k.text(r, `${v.toLocaleString("en-US")} B`, { style: "Cell 24", color: "onCard", width: 260, align: "RIGHT", name: "Month spans" });
+      k.text(r, `\u2191 ${((v - prev) / prev * 100).toFixed(1)}%`, { style: "Cell 24", color: "up", width: 200, align: "RIGHT", name: "Month growth" });
+    }
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Thanks" });
+    k.text(foot, "Thank you to the 1,900 platform teams who sent them.", { style: "Thanks 26", color: "onPaper", autoWidth: true, name: "Thanks line" });
+    k.component("Site pill", { direction: "HORIZONTAL", width: "HUG", radius: 6, align: "CENTER", padding: { top: 8, right: 14, bottom: 8, left: 14 }, fill: "card", stroke: { color: "line", width: 1, align: "INSIDE" }, props: { Label: "{{brand.site}}" } }, (id) => {
+      k.propText(id, "Label", { style: "Mono 24", color: "onCard", autoWidth: true });
+    });
+    k.instance(foot, "Site pill", { Label: "{{brand.site}}" }, { name: "Site" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      portrait: (kit, id) => {
+        kit.patch(id, { itemSpacing: 30 });
+      },
+      vertical: (kit, id) => {
+        kit.patch(id, { primaryAxisAlignItems: "SPACE_BETWEEN", itemSpacing: 34 });
+        for (const f of kit.named(id, "Figure row")) kit.patch(f, { layoutMode: "VERTICAL", itemSpacing: 0 });
+        restyle(kit, id, "Big figure", "Figure 220");
+        for (const t of kit.named(id, "Big figure")) kit.patch(t, { width: 800 });
+        for (const t of kit.named(id, "Unit")) kit.patch(t, { layoutSizingHorizontal: "FILL" });
+        reboard(kit, id, "Chart board", (800 - 48) / CHART.w);
+        hide(kit, id, ["Thanks line"]);
+        heatMap(kit, id, { cols: 36, rows: 14, cell: 26, gap: 4, hotRow: 5, hotCol: 30, name: "Heat foot", absolute: { x: 2, y: 1474 }, dim: 0.85 });
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_data_milestone_default
+};

package/dist/chunks/chunk-LHZXBPGT.js

@@ -0,0 +1,69 @@
+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 {
+  FOLIO,
+  caption,
+  comicMeta,
+  comicSetup,
+  folio,
+  pageGrid,
+  panel,
+  rows,
+  say,
+  sfx,
+  slantTier,
+  tierBox,
+  tilted
+} from "./chunk-AGL7MNPF.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/print/comic-hero-manga-action.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var comic_hero_manga_action_default = defineTemplate({
+  id: "comic-manga-action",
+  meta: comicMeta("Manga action page", 'Page nine of "Nightstar: Blackout": the finishing blow on steep diagonal frames, Nightstar coming straight at the reader, Voltrix out of power, the punch through his armour with "KRAKKOOM!" and him flying through a truck', ["manga", "action", "diagonal", "speed", "sound effects"]),
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Manga action page", preset("comic-page"));
+    comicSetup(k);
+    drawPage(k);
+    return k.finish();
+  }
+});
+function drawPage(k) {
+  const g = 12, { W, H } = pageGrid(k, k.sheet, 36, g);
+  const [h1, h2, h3] = rows(H - FOLIO, g, [38, 34, 28]);
+  const t1 = tierBox(k, k.sheet, W, h1, "Tier 1");
+  const [a, b] = slantTier(W, h1, [3, 2], 44, g);
+  panel(k, t1, a, "manga-1", { ground: "heroG1", name: "Straight at him" });
+  panel(k, t1, b, "manga-2", { ground: "heroG2", name: "No power left" });
+  say(k, t1, "This one\u2019s for the city.", { x: 10, y: 10, width: 128, to: { x: a.width * 0.4, y: h1 * 0.3 } });
+  say(k, t1, "W-wait\u2014", { x: W - 108, y: h1 - 80, width: 96, to: { x: b.x + b.width * 0.6, y: h1 * 0.4 } });
+  const t2 = tierBox(k, k.sheet, W, h2, "Tier 2");
+  panel(k, t2, tilted(0, 0, W, h2, -30, 30), "manga-3", { ground: "heroG3", name: "The hit" });
+  sfx(k, t2, "Krakkoom!", { x: 20, y: h2 - 150, w: 480, h: 140, deg: -7, big: true, fill: "primary", seed: 23 });
+  const t3 = tierBox(k, k.sheet, W, h3, "Tier 3");
+  const [c, d] = slantTier(W, h3, [2, 3], -30, g);
+  panel(k, t3, c, "manga-4", { ground: "heroG1", name: "His eyes" });
+  panel(k, t3, d, "manga-5", { ground: "heroG2", name: "Through the truck" });
+  caption(k, t3, "Lights out, Voltrix.", { x: W - 170, y: h3 - 44, width: 160 });
+  folio(k, k.sheet, "Nightstar: Blackout \u2014 page 9");
+}
+
+export {
+  comic_hero_manga_action_default,
+  drawPage
+};