@popcraft/kit 0.24.2 → 0.25.0

package/dist/chunks/chunk-CSIACK6R.js

@@ -0,0 +1,108 @@
+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 {
+  draw,
+  redraw,
+  weddingArt
+} from "./chunk-AKVVLQZU.js";
+import {
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  poly
+} from "./chunk-BNVLVZUT.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/print/everyday-save-the-date.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Save the date card: orchard wedding";
+var everyday_save_the_date_default = defineTemplate({
+  id: "print-everyday-save-the-date",
+  meta: {
+    name: NAME,
+    description: "A save-the-date card for a wedding, ready for the printer: a crown of olive and bay over the couple\u2019s names in a large serif with a gold italic ampersand, the date, the venue and town, and \u201Cformal invitation to follow\u201D, inside a fine gold double rule. 5 \xD7 7 inches with bleed, and an A6 copy",
+    category: "invitation",
+    tags: ["wedding", "save the date", "invitation", "botanical", "olive", "serif", "elegant", "print", "card", "stationery"],
+    platforms: ["print"],
+    formats: ["card"],
+    useCases: ["invitation", "event"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("invitation-5x7"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F6F1E6", text: "#22352B", onPaper: "#85622A", primary: "#A07A34", onPrimary: "#FFFFFF" },
+      { name: "Iris & Tom\xE1s" }
+    );
+    k.palette({ leaf: "#4F6B4A", leafLight: "#8EA383", stem: "#5E6F4F", berry: "#7A3E3A", blossom: "#EBD5C6" });
+    k.textStyle("Kicker 11", { size: 11, fontWeight: 600, letterSpacing: 4.4, lineHeight: 16 });
+    k.textStyle("Names 56", { ...SERIF, size: 56, fontWeight: 400, letterSpacing: -1, lineHeight: 58 });
+    k.textStyle("Amp 40", { ...SERIF, size: 40, fontWeight: 400, fontStyle: "italic", lineHeight: 40 });
+    k.textStyle("Date 20", { ...SERIF, size: 20, fontWeight: 600, letterSpacing: 0.4, lineHeight: 26 });
+    k.textStyle("Place 14", { ...SERIF, size: 14, fontWeight: 400, lineHeight: 20 });
+    k.textStyle("Note 12", { ...SERIF, size: 12, fontWeight: 400, fontStyle: "italic", lineHeight: 17 });
+    const sheet = k.sheet;
+    const { width: W, height: H } = k.node(sheet);
+    k.flowSheet(sheet, 0, { top: 196, right: 56, bottom: 104, left: 56 }, "paper", "CENTER", "CENTER");
+    draw(k, sheet, weddingArt(W, H));
+    const c = { align: "CENTER", width: "FILL" };
+    k.component("Flourish", { direction: "HORIZONTAL", width: "HUG", gap: 4, align: "CENTER" }, (id) => {
+      k.rect(id, 16, 1, "primary", { name: "Flourish rule" });
+      k.vector(id, 7, 7, [poly([[3.5, 0], [7, 3.5], [3.5, 7], [0, 3.5]])], "primary", { name: "Flourish lozenge" });
+      k.rect(id, 16, 1, "primary", { name: "Flourish rule" });
+    });
+    const kick = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", name: "Kicker row" });
+    k.instance(kick, "Flourish");
+    k.text(kick, "SAVE THE DATE", { style: "Kicker 11", color: "onPaper", autoWidth: true, name: "Kicker" });
+    k.instance(kick, "Flourish");
+    k.rect(sheet, 1, 22, [], { name: "Gap" });
+    k.text(sheet, "Iris Calloway", { style: "Names 56", color: "text", ...c, name: "Name one" });
+    k.text(sheet, "&", { style: "Amp 40", color: "onPaper", ...c, name: "Ampersand" });
+    k.text(sheet, "Tom\xE1s Reyes", { style: "Names 56", color: "text", ...c, name: "Name two" });
+    k.rect(sheet, 1, 26, [], { name: "Gap" });
+    k.rect(sheet, 64, 1, "primary", { name: "Divider" });
+    k.rect(sheet, 1, 20, [], { name: "Gap" });
+    k.text(sheet, "Saturday 19 June 2027", { style: "Date 20", color: "text", ...c, name: "Date" });
+    k.rect(sheet, 1, 6, [], { name: "Gap" });
+    k.text(sheet, "Hartwell Orchard, Healdsburg, California", { style: "Place 14", color: "text", ...c, name: "Place" });
+    k.rect(sheet, 1, 18, [], { name: "Gap" });
+    k.text(sheet, "Formal invitation to follow\nirisandtomas.com", { style: "Note 12", color: "text", ...c, name: "Note" });
+    k.textStyle("Names 46", { ...SERIF, size: 46, fontWeight: 400, letterSpacing: -0.8, lineHeight: 48 });
+    k.textStyle("Amp 32", { ...SERIF, size: 32, fontWeight: 400, fontStyle: "italic", lineHeight: 32 });
+    k.textStyle("Date 17", { ...SERIF, size: 17, fontWeight: 600, letterSpacing: 0.3, lineHeight: 22 });
+    k.textStyle("Place 12", { ...SERIF, size: 12, fontWeight: 400, lineHeight: 17 });
+    k.textStyle("Note 10", { ...SERIF, size: 10, fontWeight: 400, fontStyle: "italic", lineHeight: 14 });
+    k.variants(sheet, [{
+      preset: "a6",
+      adjust: (kit, id) => {
+        const { width: w, height: h } = kit.node(id);
+        redraw(kit, id, weddingArt(w, h));
+        const s = w / 480;
+        kit.patch(id, { padding: { top: Math.round(196 * s), right: Math.round(46 * s), bottom: Math.round(104 * s), left: Math.round(46 * s) } });
+        for (const [layer, style] of [["Name one", "Names 46"], ["Name two", "Names 46"], ["Ampersand", "Amp 32"], ["Date", "Date 17"], ["Place", "Place 12"], ["Note", "Note 10"]]) for (const n of kit.named(id, layer)) kit.restyle(n, style);
+        for (const n of kit.named(id, "Gap")) kit.patch(n, { height: Math.round(kit.node(n).height * s) });
+      }
+    }]);
+    return k.finish();
+  }
+});
+
+export {
+  everyday_save_the_date_default
+};

package/dist/chunks/chunk-CTKQX7PC.js

@@ -0,0 +1,225 @@
+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 {
+  DEAL,
+  MARQUEE,
+  fitShopfront,
+  liftShutter,
+  marquee,
+  neonBrand,
+  neonWord,
+  puddle,
+  sheen,
+  shopfront,
+  shutter,
+  spark,
+  two,
+  wash
+} from "./chunk-GBUMWUHN.js";
+import {
+  fitRain,
+  rain
+} from "./chunk-57PXFTSD.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-C7BYFVZT.js";
+import {
+  bed
+} from "./chunk-52GCV7N5.js";
+import {
+  board,
+  patchAll,
+  put,
+  reboard,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  halo
+} from "./chunk-HVK5T4I5.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/black-friday-neon-deal-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var { beat, duration: DURATION, audio: music } = bed("tension", 28);
+var TICKS = 6;
+var WINDOW = { w: 800, h: 300 };
+var RAIN = { color: "ice", opacity: 0.13, rate: 960, seed: 9, count: 22, len: 90 };
+var cues = [
+  { layer: "Headline", preset: "rise-in", at: beat(0), params: { duration: 450 } },
+  { layer: "Sign board", preset: "shake", at: beat(4), params: { duration: 400, distance: 10 } },
+  { layer: "Solo row", preset: "rise-in", at: beat(8), params: { duration: 350 } },
+  { layer: "Clock row", preset: "rise-in", at: beat(12), params: { duration: 350 } },
+  { layer: "Button", preset: "pop-in", at: beat(16), params: { duration: 450 } },
+  { layer: "Team figure", preset: "pulse", at: beat(22), params: { duration: 500, amount: 0.06 } },
+  { layer: "Button", preset: "pulse", at: beat(24), params: { duration: 500, amount: 0.06 } }
+];
+var counts = [
+  // The price falls over two beats once the shutter is up.
+  { layer: "Team figure", at: beat(5), duration: beat(2), counter: { from: DEAL.teamWas, to: DEAL.teamNow, prefix: "$" } },
+  { layer: "Solo figure", at: beat(8), duration: beat(2), counter: { from: DEAL.soloWas, to: DEAL.soloNow, prefix: "$" } },
+  // The clock: a second off every two beats.
+  { layer: "Clock figure", at: beat(12), duration: TICKS * 1e3, tick: 1e3, counter: { from: DEAL.seconds, to: DEAL.seconds - TICKS, prefix: `${DEAL.days}D ${two(DEAL.hours)}:${two(DEAL.minutes)}:` } }
+];
+var swaps = [captionSwap(["Shutter's up. The sale's on.", `Every annual plan, ${DEAL.off}% off.`, `Use code ${DEAL.code} at checkout.`, "Shutter drops Monday at midnight."], 0, DURATION, { stagger: 60, in: 300, out: 250, rise: 30 })];
+var NAME = "Black Friday neon deal reel";
+function planRow(k, parent, id, label, was, now) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 16, name: `${id} row` });
+  k.text(row, label, { style: "Row 30", color: "onCard", autoWidth: true, name: `${id} label` });
+  const right = k.stack(row, { direction: "HORIZONTAL", width: "HUG", gap: 20, align: "CENTER", name: `${id} prices` });
+  const struck = k.stack(right, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", name: `${id} was` });
+  k.text(struck, `$${was}`, { style: "Was 30", color: "cardMuted", autoWidth: true, name: `${id} list` });
+  k.rect(struck, 84, 3, "red", { name: "Strike", absolute: { x: -4, y: 19 } });
+  k.text(right, `$${now}`, { style: "Figure 60", color: "amber", width: 178, align: "RIGHT", name: `${id} figure` });
+}
+var black_friday_neon_deal_reel_default = defineTemplate({
+  id: "motion-black-friday-neon-deal-reel",
+  meta: {
+    name: NAME,
+    description: "A 14-second vertical sale video as a shopfront at night: a neon SALE sign stutters on letter by letter on a wet brick wall, the discount lights tube by tube, an arrow of bulbs chases, and on the beat a roller shutter lifts to show the annual prices counting down to half. One letter buzzes and relights; the signs lie in the puddles. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 layouts",
+    category: "animation",
+    tags: ["animation", "black friday", "cyber monday", "sale", "saas", "neon", "neon sign", "shopfront", "night", "rain", "flicker", "price drop", "counter", "countdown", "audio", "music", "captions", "reel", "discount code"],
+    platforms: ["instagram", "tiktok", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "video", "ad"],
+    useCases: ["sale", "countdown", "pricing"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    neonBrand(k, { name: DEAL.product, site: DEAL.site });
+    k.textStyle("Headline 88", { size: 88, fontWeight: 900, letterSpacing: -3.2, lineHeight: 88, textAlign: "CENTER" });
+    k.textStyle("Headline 72", { size: 72, fontWeight: 900, letterSpacing: -2.6, lineHeight: 74 });
+    k.textStyle("Label 20", { ...MONO, size: 20, fontWeight: 700, letterSpacing: 2, lineHeight: 26 });
+    k.textStyle("Row 30", { size: 30, fontWeight: 700, letterSpacing: -0.4, lineHeight: 38 });
+    k.textStyle("Row 24", { size: 24, fontWeight: 700, letterSpacing: -0.3, lineHeight: 30 });
+    k.textStyle("Was 30", { ...MONO, size: 30, fontWeight: 600, lineHeight: 38, fontFeatures: { tnum: 1 } });
+    k.textStyle("Figure 60", { ...MONO, size: 60, fontWeight: 800, letterSpacing: -2, lineHeight: 64, fontFeatures: { tnum: 1 } });
+    k.textStyle("Clock 40", { ...MONO, size: 40, fontWeight: 800, letterSpacing: -1, lineHeight: 46, fontFeatures: { tnum: 1 } });
+    k.textStyle("Caption 38", { size: 38, fontWeight: 800, letterSpacing: -0.6, lineHeight: 46, textAlign: "CENTER" });
+    k.textStyle("Button 34", { size: 34, fontWeight: 800, lineHeight: 42 });
+    pill(k, "Buy button", { fill: "primary", ink: "onPrimary", style: "Button 34", label: DEAL.link, pad: [20, 44], radius: 12 });
+    const sheet = k.sheet;
+    const pad = verticalPadding();
+    k.flowSheet(sheet, 18, pad, "paper", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: music });
+    const STREET = 1492;
+    shopfront(k, sheet, { street: STREET });
+    wash(k, sheet, "red", { x: 540, y: STREET + 150, w: 1100, h: 420, alpha: 0.3, name: "Road light" });
+    rain(k, sheet, 1080, 1920, RAIN);
+    const layout = k.stack(sheet, { gap: 18, align: "CENTER", name: "Layout" });
+    const top = k.stack(layout, { gap: 18, align: "CENTER", name: "Top" });
+    const sign = marquee(k, board(k, top, MARQUEE.w, MARQUEE.h, 1, "Sign board"), { loopMs: DURATION, laps: 14 });
+    const mid = k.stack(top, { gap: 18, align: "CENTER", name: "Mid" });
+    k.text(mid, "Lights on.\nPrices down.", { style: "Headline 88", color: "text", name: "Headline" });
+    const win = k.stack(mid, { height: WINDOW.h, fill: "card", radius: 10, clip: true, padding: { top: 22, right: 30, bottom: 22, left: 30 }, justify: "SPACE_BETWEEN", stroke: { color: "steelEdge", width: 5, align: "INSIDE" }, name: "Window" });
+    const head = k.stack(win, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Window head" });
+    k.text(head, `ANNUAL PLANS \xB7 CODE ${DEAL.code}`, { style: "Label 20", color: "cardMuted", autoWidth: true, name: "Window label" });
+    const open = neonWord(k, head, "OPEN", "ice", { cap: 24, t: 3.5, name: "Open", flow: true, strength: 0.8 });
+    planRow(k, win, "Team", "Team, a year", DEAL.teamWas, DEAL.teamNow);
+    planRow(k, win, "Solo", "Solo, a year", DEAL.soloWas, DEAL.soloNow);
+    const clock = k.stack(win, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 16, name: "Clock row" });
+    k.text(clock, "Shutter drops in", { style: "Row 30", color: "onCard", autoWidth: true, name: "Clock label" });
+    k.text(clock, `${DEAL.days}D ${two(DEAL.hours)}:${two(DEAL.minutes)}:${DEAL.seconds - TICKS}`, { style: "Clock 40", color: "ice", width: 300, align: "RIGHT", name: "Clock figure" });
+    sheen(k, win, WINDOW.w, WINDOW.h);
+    const roller = shutter(k, win, WINDOW.w, WINDOW.h);
+    const foot = k.stack(layout, { gap: 18, align: "CENTER", name: "Foot" });
+    captionStrip(k, foot, swaps[0].words[0], { style: "Caption 38", fill: "accent", ink: "onAccent", radius: 10, pad: [18, 24], effects: [halo(k, "amber", 0.45, 34)] });
+    k.instance(foot, "Buy button", { Label: DEAL.link }, { name: "Button" });
+    const saleNode = k.node(sign.sale.frame), offNode = k.node(sign.off.frame);
+    const salePool = puddle(k, sheet, sign.sale.w, sign.sale.h, sign.sale.paths, "red", { t: 19, name: "Sale puddle", absolute: { x: pad.left + saleNode.x, y: STREET + 36 }, squash: 0.62, opacity: 0.5, blur: 9 });
+    const offPool = puddle(k, sheet, sign.off.w, sign.off.h, sign.off.paths, "amber", { t: 10, name: "Off puddle", absolute: { x: pad.left + offNode.x, y: STREET + 232 }, squash: 0.62, opacity: 0.4, blur: 7 });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    spark(k, [k.named(sign.border, "Border tube")[0]], [{ on: 0 }]);
+    sign.sale.tubes.forEach((id, i) => spark(k, [id], i === 1 ? [{ on: 120 + i * 170 }, { buzz: beat(20) }] : [{ on: 120 + i * 170 }]));
+    spark(k, [salePool], [{ on: 460 }], [0.5]);
+    sign.off.tubes.forEach((id, i) => spark(k, [id], [{ on: beat(1) + i * 220 }]));
+    spark(k, [offPool], [{ on: beat(2.5) }], [0.4]);
+    open.tubes.forEach((id) => spark(k, [id], [{ on: beat(4) + 300 }]));
+    liftShutter(k, roller, WINDOW.h, beat(4), 650);
+    const night = (kit, id, street, u = 1) => {
+      fitShopfront(kit, id, { street, u });
+      fitRain(kit, id, { name: "Rain", seed: RAIN.seed, count: RAIN.count, len: RAIN.len });
+    };
+    const glaze = (kit, id, w) => {
+      patchAll(kit, id, "Window", { layoutSizingHorizontal: "FIXED", width: w });
+      patchAll(kit, id, "Sheen", { visible: false });
+      patchAll(kit, id, "Shutter", { x: 0, y: 0, scaleX: w / WINDOW.w, anchorX: 0 });
+    };
+    k.variants(sheet, [
+      ...feedVariants({ post: 44, portrait: 60 }, {
+        // The square: the sign across the top, the words beside the window, the caption beside the button.
+        post: (kit, id) => {
+          night(kit, id, void 0);
+          patchAll(kit, id, "Street", { visible: false });
+          patchAll(kit, id, "Mid", { layoutMode: "HORIZONTAL", itemSpacing: 28, counterAxisAlignItems: "CENTER" });
+          restyle(kit, id, "Headline", "Headline 72");
+          patchAll(kit, id, "Headline", { layoutSizingHorizontal: "FIXED", width: 440 });
+          glaze(kit, id, 524);
+          for (const n of ["Team label", "Solo label", "Clock label"]) restyle(kit, id, n, "Row 24");
+          patchAll(kit, id, "Clock figure", { width: 270 });
+          for (const n of ["Road light", "Sale puddle", "Off puddle"]) patchAll(kit, id, n, { visible: false });
+        },
+        portrait: (kit, id) => {
+          night(kit, id, 1262);
+          kit.patch(id, { padding: { top: 44, right: 60, bottom: 104, left: 60 } });
+          reboard(kit, id, "Sign board", 1.1);
+          glaze(kit, id, 960);
+          put(kit, id, "Road light", 540 - 550, 1262 - 60);
+          put(kit, id, "Sale puddle", 190, 1276, { scaleX: 1, scaleY: 0.5, anchorY: 0 });
+          patchAll(kit, id, "Off puddle", { visible: false });
+        }
+      }),
+      {
+        // 16:9: the sign on the left, the words and the window beside it, the caption and the button along the foot.
+        preset: "video-1080p",
+        adjust: (kit, id) => {
+          night(kit, id, 946);
+          kit.patch(id, { padding: { top: 54, right: 160, bottom: 150, left: 112 }, itemSpacing: 22 });
+          patchAll(kit, id, "Layout", { itemSpacing: 26 });
+          patchAll(kit, id, "Top", { layoutMode: "HORIZONTAL", itemSpacing: 64, counterAxisAlignItems: "CENTER" });
+          reboard(kit, id, "Sign board", 1.24);
+          patchAll(kit, id, "Mid", { itemSpacing: 26, counterAxisAlignItems: "MIN" });
+          restyle(kit, id, "Headline", "Headline 72");
+          glaze(kit, id, 672);
+          patchAll(kit, id, "Foot", { layoutMode: "HORIZONTAL", itemSpacing: 24, counterAxisAlignItems: "CENTER" });
+          put(kit, id, "Road light", 590 - 550, 946 - 100);
+          put(kit, id, "Sale puddle", 170, 960, { scaleX: 1.24, scaleY: 0.6, anchorX: 0, anchorY: 0 });
+          put(kit, id, "Off puddle", 1100, 990, { scaleX: 1, scaleY: 0.7, anchorX: 0, anchorY: 0 });
+        }
+      }
+    ]);
+    return k.finish();
+  }
+});
+
+export {
+  black_friday_neon_deal_reel_default
+};

package/dist/chunks/chunk-CWIB2O47.js

@@ -0,0 +1,78 @@
+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-GCZNQTN6.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/portfolio-depth-tunnel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var WORK = [
+  { title: "Spin Cycle", client: "Low Hum Pictures", year: "2026", kind: "Feature film \xB7 Director of photography", cover: "depth-00", summary: "A night-shift drama that lives in one laundromat from midnight to dawn.", story: "Shot on anamorphic lenses with practical light only: the dryers and the vending machine. Premiered at Rotterdam.", credits: "Director \u2014 Ana Liu \xB7 DP \u2014 Theo Marsh \xB7 Colour \u2014 Grade Room" },
+  { title: "Keeper of the Light", client: "North Sea Films", year: "2025", kind: "Short film \xB7 DP", cover: "depth-01", summary: "A lighthouse in a storm and the woman who will not leave it.", story: "Two nights of rain towers on a real headland; the beam is the lighthouse\u2019s own.", credits: "Director \u2014 Ruth Ward \xB7 DP \u2014 Theo Marsh" },
+  { title: "Blue Hour", client: "Arcadia Records", year: "2025", kind: "Music video \xB7 DP", cover: "depth-02", summary: "Two silhouettes on a rooftop for the twenty minutes the city is blue.", story: "One take a night, five nights, the best of the five.", credits: "Director \u2014 Kemi Ade \xB7 DP \u2014 Theo Marsh" },
+  { title: "Room 214", client: "Halcyon Hotels", year: "2024", kind: "Commercial \xB7 DP", cover: "depth-03", summary: "A green-carpeted corridor and the one door left open.", story: "A hotel brand film that plays like the first minute of a thriller.", credits: "Director \u2014 Ana Liu \xB7 DP \u2014 Theo Marsh \xB7 Agency \u2014 Doorman" },
+  { title: "Leaf Tunnel", client: "Vellum Motors", year: "2024", kind: "Commercial \xB7 DP", cover: "depth-04", summary: "A car through a tunnel of autumn trees, headlights on at four in the afternoon.", story: "A car-to-car rig and a week of waiting for the leaves to turn.", credits: "Director \u2014 Oskar Lind \xB7 DP \u2014 Theo Marsh" },
+  { title: "Solo", client: "City Ballet", year: "2023", kind: "Dance film \xB7 DP", cover: "depth-05", summary: "One dancer, one spotlight, an empty theatre.", story: "Filmed in the hour between the matinee and the evening show.", credits: "Director, choreography \u2014 Mira Sol \xB7 DP \u2014 Theo Marsh" }
+];
+var portfolio_depth_tunnel_default = defineTemplate({
+  id: "web-portfolio-depth-tunnel",
+  meta: {
+    name: "Depth push portfolio",
+    description: "A cinematographer\u2019s portfolio where pages travel in depth: open a film and the page recedes into the dark as the next arrives from in front; go back and it pulls the other way. Wide frame grabs two across on black, a page per film and a bio. The move is drawn on the GPU with WebGPU, in CSS 3D elsewhere. The films are a collection you edit as a table. Desktop, tablet and phone",
+    category: "web",
+    tags: ["portfolio", "3d", "depth", "transition", "webgpu", "cinematography", "film", "dark", "cms", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["portfolio"],
+    created: "2026-10-05",
+    updated: "2026-10-05"
+  },
+  breakpoints: true,
+  build: () => standardPortfolio({
+    name: "Depth push",
+    brand: { paper: "#0B0C0E", text: "#ECE8E1", onPaper: "#959089", primary: "#E5B560", onPrimary: "#0B0C0E", card: "#0B0C0E", line: "#24262A" },
+    fields: { name: "Theo Marsh", email: "theo@theomarsh.film" },
+    styles: {
+      "Wordmark 18": { size: 18, fontWeight: 600, letterSpacing: 2, lineHeight: 24 },
+      "Small 13": { size: 13, fontWeight: 500, letterSpacing: 1.2, lineHeight: 18 },
+      "Meta 14": { size: 14, fontWeight: 400, lineHeight: 20 },
+      "Title 20": { size: 20, fontWeight: 500, letterSpacing: -0.2, lineHeight: 28 },
+      "Lead 24": { size: 24, fontWeight: 400, lineHeight: 34 },
+      "Body 17": { size: 17, fontWeight: 400, lineHeight: 28 },
+      "Display 72": { size: 72, fontWeight: 500, letterSpacing: -2, lineHeight: 76 },
+      "Display 40": { size: 40, fontWeight: 500, letterSpacing: -1, lineHeight: 46 }
+    },
+    type: { wordmark: "Wordmark 18", small: "Small 13", meta: "Meta 14", title: "Title 20", lead: "Lead 24", body: "Body 17", display: "Display 72", displaySmall: "Display 40" },
+    projects: WORK,
+    go: "DEPTH_PUSH",
+    back: "DEPTH_PULL",
+    links: [["work", "FILMS"], ["studio", "BIO"]],
+    lead: { kicker: "DIRECTOR OF PHOTOGRAPHY \xB7 LONDON", headline: "Light for stories told at night.", intro: "Theo Marsh shoots features, shorts, music videos and commercials, mostly after dark." },
+    grid: { cols: 2, gap: 24, ratio: 0.5625, radius: 4, meta: "{{item.client}} \xB7 {{item.year}}", tablet: 1 },
+    project: { ratio: 0.5625, kicker: "FILM", more: { cols: 3, ratio: 0.5625, label: "MORE FILMS" } },
+    studio: {
+      statement: "I make pictures with whatever light is already there, and a little more.",
+      about: "Twelve years behind the camera: assistant on features in London, then DP on shorts that went to Berlin, Rotterdam and Sundance. I own a full anamorphic package and work with the same gaffer on everything.",
+      picture: "depth-02",
+      ratio: 0.42,
+      services: ["Features and shorts", "Music videos", "Commercials", "Camera package with crew"],
+      clients: "Low Hum Pictures, North Sea Films, Arcadia Records, Halcyon Hotels, Vellum Motors and City Ballet.",
+      contact: "Represented by Frame Agency."
+    },
+    elsewhere: "VIMEO \xB7 IMDB \xB7 INSTAGRAM"
+  })
+});
+
+export {
+  portfolio_depth_tunnel_default
+};

package/dist/chunks/chunk-CXUXO5UA.js

@@ -0,0 +1,151 @@
+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 {
+  QUIRE,
+  editorialBrand,
+  editorialType,
+  fitGround,
+  inkButton,
+  lockup,
+  maskedLines,
+  pageBelow,
+  paperGround,
+  riseLines,
+  runningHead
+} from "./chunk-SBYU2I6M.js";
+import {
+  chart
+} from "./chunk-YNOCYFZ4.js";
+import {
+  board,
+  reboard,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  outro,
+  postVariants,
+  verticalPadding
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  ease
+} from "./chunk-6DWY3DOQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/style-editorial-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Editorial SaaS milestone post";
+var DURATION = 8e3;
+var OUT = 6600;
+var COLS = [80, 420, 1e3];
+var CARD = { w: 920, h: 330 };
+var PLOT = { w: CARD.w - 60, h: 160 };
+var MONTHS = [150, 180, 200, 230, 260, 290, 320, 350, 380, 420, 520, 700];
+var LETTERS = "ONDJFMAMJJAS";
+var CONTENT = ["Running head words", "Line", "Year card", "Foot"];
+var cues = [
+  { layer: "Running head rule", preset: "wipe-in", at: 0, params: { duration: 900 } },
+  { layer: "Running head words", preset: "fade-in", at: 150, params: { duration: 500 } },
+  { layer: "Line", preset: "fade-in", at: 1200, params: { duration: 700 } },
+  { layer: "Year card", preset: "rise-in", at: 900, params: { duration: 900, distance: 40 } },
+  { layer: "Bar", preset: "wipe-in", at: 1300, params: { duration: 500, direction: "up" }, stagger: { delay: 110 } },
+  { layer: "Total dot", preset: "scale-in", at: 3600, params: { duration: 400 } },
+  { layer: "Foot", preset: "fade-in", at: 1800, params: { duration: 600 } },
+  { layer: "Total dot", preset: "pulse", at: 4800, params: { duration: 800, amount: 0.4 } },
+  { layer: "Button", preset: "pulse", at: 5400, params: { duration: 800, amount: 0.03 } },
+  outro(CONTENT, OUT + 200, { gap: 90, duration: 500 }),
+  { layer: "Running head rule", preset: "wipe-out", at: OUT + 500, params: { duration: 600 } }
+];
+var counts = [
+  { layer: "Figure line", at: 300, duration: 3e3, ease: ease.inOut("cubic"), counter: { from: 0, to: QUIRE.paidOut, prefix: "$" } }
+];
+var style_editorial_milestone_default = defineTemplate({
+  id: "motion-saas-style-editorial-milestone",
+  meta: {
+    name: NAME,
+    description: "An animated milestone post in the warm editorial look: on book paper ruled in columns one large serif figure rises from its baseline counting to four million, and a figure card draws the year behind it, twelve monthly bars rising in turn while the running total draws over them. Eight seconds, looping, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "editorial", "serif", "magazine", "paper", "milestone", "metric", "counter", "chart", "bar chart", "growth", "build in public", "newsletter", "publishing", "post", "loop"],
+    platforms: ["instagram", "x", "linkedin", "threads", "facebook"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "stats", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    editorialBrand(k, { line: "paid to writers through Quire in twelve months. Our share of it: nothing." });
+    const t = editorialType(k);
+    inkButton(k, "Call", { style: t.strong(26), label: "Keep yours", pad: [16, 24], arrow: 22 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 30, 80, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    paperGround(k, sheet, 1080, COLS);
+    const head = runningHead(k, sheet, { words: [], style: t.label(20), weight: 3 });
+    const words = k.named(head, "Running head words")[0];
+    lockup(k, words, { size: 30, style: t.serif(34) });
+    k.text(words, "OCT 2025 \u2013 SEP 2026", { style: t.label(20), color: "onPaper", autoWidth: true, name: "Span" });
+    const said = k.stack(sheet, { gap: 18, name: "Said" });
+    maskedLines(k, said, [`$${QUIRE.paidOut.toLocaleString("en-US")}`], { style: t.figure(170), name: "Figure" });
+    k.text(said, "{{brand.line}}", { style: t.serif(32), color: "text", width: 760, name: "Line" });
+    const stage = board(k, sheet, CARD.w, CARD.h, 1, "Year board");
+    const card = k.stack(stage, { width: CARD.w, height: CARD.h, fill: "card", padding: 30, gap: 16, stroke: { color: "cardRule", width: 1, align: "INSIDE" }, absolute: { x: 0, y: 0 }, name: "Year card" });
+    const ch = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Card head" });
+    k.text(ch, "FIG. 1 \xB7 PAID OUT A MONTH", { style: t.label(17), color: "cardMuted", autoWidth: true, name: "Card title" });
+    k.text(ch, "RUNNING TOTAL \u2014", { style: t.label(17), color: "onCard", autoWidth: true, name: "Card key" });
+    const max = Math.max(...MONTHS), gap = 12, bw = (PLOT.w - gap * 11) / 12;
+    const plot = k.stack(card, { direction: "HORIZONTAL", width: PLOT.w, height: PLOT.h, gap, align: "MAX", name: "Plot" });
+    MONTHS.forEach((v, i) => k.rect(plot, bw, Math.round(v / max * PLOT.h * 0.92), i === 11 ? "mark" : k.tint("mark", 0.28), { name: "Bar" }));
+    let sum = 0;
+    const totals = MONTHS.map((v) => sum += v);
+    const c = chart(totals, PLOT.w - bw, PLOT.h - 14, sum);
+    const line = k.vector(plot, PLOT.w - bw, PLOT.h - 14, [c.line], [], { name: "Total line", stroke: { color: "onCard", width: 3, join: "ROUND" }, absolute: { x: bw / 2, y: 7 } });
+    const end = c.pts[c.pts.length - 1];
+    k.ellipse(plot, 16, "onCard", { name: "Total dot", absolute: { x: bw / 2 + end.x - 8, y: 7 + end.y - 8 }, stroke: { color: "card", width: 3, align: "OUTSIDE" } });
+    const axis = k.stack(card, { direction: "HORIZONTAL", gap, name: "Axis" });
+    for (const l of LETTERS) k.text(axis, l, { style: t.label(16), color: "cardMuted", align: "CENTER", name: "Month" });
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Foot" });
+    k.instance(foot, "Call", { Label: "Keep yours" }, { name: "Button" });
+    k.text(foot, `THANK YOU, ${QUIRE.publications.toLocaleString("en-US")} PUBLICATIONS`, { style: t.label(20), color: "onPaper", autoWidth: true, name: "Thanks" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    riseLines(k, sheet, "Figure", 200, { duration: 1e3, out: OUT });
+    k.animate(line, "trim.end", [{ t: 1300, v: 0, ease: ease.inOut("cubic") }, { t: 3600, v: 1 }]);
+    k.variants(sheet, postVariants({ portrait: 80, vertical: 96 }, {
+      portrait: (kit, id) => {
+        fitGround(kit, id, COLS);
+        kit.patch(id, { primaryAxisAlignItems: "SPACE_BETWEEN" });
+        restyle(kit, id, "Figure line", t.figure(180));
+      },
+      vertical: (kit, id) => {
+        fitGround(kit, id, [140, 940]);
+        kit.patch(id, { primaryAxisAlignItems: "SPACE_BETWEEN", itemSpacing: 48, counterAxisSpacing: 48, padding: { ...verticalPadding(), bottom: 1920 - 1360 } });
+        for (const n of kit.named(id, "Line")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        restyle(kit, id, "Figure line", t.figure(150));
+        reboard(kit, id, "Year board", 800 / CARD.w);
+        pageBelow(kit, id, { x: 140, y: 1400, width: 800, height: 520 });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  style_editorial_milestone_default
+};