@popcraft/kit 0.24.3 → 0.26.0

package/dist/chunks/chunk-4ZLRNUKR.js

@@ -0,0 +1,231 @@
+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 {
+  KONTOR,
+  drawLine,
+  extend,
+  fitGrid,
+  glideIn,
+  grot,
+  kontorWindow,
+  laneTable,
+  lockup,
+  routeMap,
+  rule,
+  swissBrand,
+  swissGrid
+} from "./chunk-WM7TGYRJ.js";
+import {
+  camera,
+  float,
+  reelCuts,
+  reelSheet,
+  section,
+  wideCut
+} from "./chunk-UD3JVCFG.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-C7BYFVZT.js";
+import {
+  cutOn
+} from "./chunk-PMVMC75G.js";
+import {
+  hide,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  pill
+} 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/motion/style-swiss-launch-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = section("launch", 4, 8);
+var { beat } = S;
+var NAME = "Swiss SaaS launch reel";
+var WIN = { w: 800, h: 560 };
+var GRID = { cols: 6, margin: 140, gutter: 24, row: 120, top: 250 };
+var WATCH = beat(1) + 100;
+var FLAG = beat(8);
+var REROUTE = beat(12);
+var DROP = beat(16);
+var CALL = beat(24);
+var FIELD_Y = 1468;
+var SHOTS = [
+  { t: FLAG + beat(1), duration: 420, zoom: 1.4, x: 230, y: 310 },
+  { t: DROP, duration: 420, zoom: 1 }
+];
+var cues = [
+  cutOn("Top row", 120),
+  { layer: "Hook side", preset: "slide-in", at: 200, params: { direction: "down", duration: 420 } },
+  { layer: "Step cell", preset: "slide-in", at: beat(1) + 120, stagger: { delay: 90, order: "selection" }, params: { direction: "left", duration: 380 } },
+  { layer: "Kpi", preset: "slide-in", at: WATCH + 250, stagger: { delay: 80, order: "selection" }, params: { direction: "up", duration: 380 } },
+  { layer: ["Lane head", "Late row", "Lane row"], preset: "slide-in", at: beat(4), stagger: { delay: 110, order: "selection" }, params: { direction: "left", duration: 380 } },
+  cutOn("Station", beat(3), 120),
+  { layer: "Flag", preset: "wipe-in", at: FLAG + beat(1) + 200, params: { direction: "right", duration: 360 } },
+  { layer: "Late forecast", preset: "flash", at: FLAG, params: { duration: 500, ease: ease.hold } },
+  { layer: "Call row", preset: "slide-in", at: CALL, params: { direction: "left", duration: 450 } }
+];
+var counts = [
+  { layer: "On time figure", at: DROP, duration: beat(4), counter: { from: KONTOR.before, to: KONTOR.after, decimals: 1, suffix: "%" } }
+];
+var swaps = [captionSwap(["Late shipments cost you customers.", "Kontor sees them coming early.", "Forty-eight hours before the delay.", "Reroute, and arrive on time."], 0, S.duration - 30, { stagger: 50, in: 220, out: 160, rise: 0 })];
+var style_swiss_launch_reel_default = defineTemplate({
+  id: "motion-saas-style-swiss-launch-reel",
+  meta: {
+    name: NAME,
+    description: "A 16-second launch video in the Swiss typographic style: a giant 48h slides into the first column, then a freight analytics window works on a visible grid. A route diagram draws itself, the late stretch turns red, the camera cuts in to the flag, a rail reroute draws in dashes and the on-time rate counts to 96.1 percent on the drop. One signal red, rules that extend, blocks that slide on the grid, music and burned-in captions. 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "swiss", "international typographic style", "grid", "minimal", "b2b", "analytics", "logistics", "launch", "reel", "counter", "diagram", "captions", "music", "audio", "tiktok", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "video"],
+    useCases: ["launch", "announcement"],
+    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;
+    swissBrand(k, {});
+    grot(k, "Brand 30", 30, { weight: 700, lead: 1.1, spacing: -0.02 });
+    grot(k, "Label 22", 22, { weight: 500, lead: 1.3 });
+    grot(k, "Label 24", 24, { weight: 600, lead: 1.3 });
+    grot(k, "Giant 330", 310, { weight: 700, lead: 0.84, spacing: -0.07 });
+    grot(k, "Giant 230", 230, { weight: 700, lead: 0.84, spacing: -0.07 });
+    grot(k, "Side 30", 30, { weight: 500, lead: 1.2, spacing: -0.01 });
+    grot(k, "Ui 21", 21, { weight: 500, lead: 1.25 });
+    grot(k, "Ui head 18", 18, { weight: 600, lead: 1.25 });
+    grot(k, "Figure 46", 46, { weight: 700, lead: 1, spacing: -0.04 });
+    grot(k, "Flag 18", 18, { weight: 700, lead: 1.2 });
+    grot(k, "Caption 34", 34, { weight: 600, lead: 1.3, spacing: -0.01 });
+    grot(k, "Button 30", 30, { weight: 700, lead: 1.2 });
+    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 30", label: "Start free for 14 days", pad: [20, 28], radius: 0 });
+    const sheet = reelSheet(k, S, { name: "Launch reel", gap: 18, justify: "MIN" });
+    swissGrid(k, sheet, GRID);
+    k.rect(sheet, 1080, 1920 - FIELD_Y, "primary", { name: "Field", absolute: { x: 0, y: FIELD_Y } });
+    const big = routeMap(k, sheet, { w: 800, h: 420, pad: 30, weight: 14, ink: "onPrimary", late: "text", ground: "primary", labels: false, name: "Field route", absolute: { x: 140, y: FIELD_Y + 30 } });
+    const top = k.stack(sheet, { gap: 14, name: "Top row" });
+    const bar = k.stack(top, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, bar, { size: 30, style: "Brand 30" });
+    k.text(bar, `${KONTOR.version}  ${KONTOR.feature}`, { style: "Label 22", color: "text", autoWidth: true, name: "Version" });
+    const topRule = rule(k, top, "FILL", { weight: 3, name: "Top rule" });
+    const hook = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, align: "MAX", name: "Hook" });
+    const giant = k.text(hook, "48h", { style: "Giant 330", color: "text", autoWidth: true, name: "Giant" });
+    const side = k.stack(hook, { gap: 12, width: 186, padding: { top: 0, right: 0, bottom: 26, left: 0 }, name: "Hook side" });
+    const tag = k.stack(side, { direction: "HORIZONTAL", width: "HUG", fill: "primary", padding: { top: 4, right: 10, bottom: 4, left: 10 }, name: "Hook tag" });
+    k.text(tag, KONTOR.feature, { style: "Label 24", color: "onPrimary", autoWidth: true, name: "Hook kicker" });
+    k.text(side, "before a shipment is late, Kontor tells you.", { style: "Side 30", color: "text", name: "Hook line" });
+    const steps = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, height: 52, name: "Steps" });
+    for (const [no, label] of [["01", "Watch"], ["02", "Flag"], ["03", "Reroute"]]) {
+      const c = k.stack(steps, { gap: 10, width: "FILL", name: "Step cell" });
+      rule(k, c, "FILL", { weight: 2, name: "Step rule" });
+      const r = k.stack(c, { direction: "HORIZONTAL", gap: 14, name: "Step words" });
+      k.text(r, no, { style: "Label 22", color: "onPaper", autoWidth: true, name: "Step no" });
+      k.text(r, label, { style: "Label 22", color: "text", autoWidth: true, name: "Step label" });
+    }
+    const cellW = Math.round((800 - 48) / 3);
+    const marker = k.rect(steps, cellW, 6, "primary", { name: "Step marker", absolute: { x: 0, y: -2 } });
+    const stage = k.stack(sheet, { width: WIN.w, height: WIN.h, clip: true, name: "Stage" });
+    const cam = k.frame(stage, { x: 0, y: 0, width: WIN.w, height: WIN.h }, { name: "Camera" });
+    const w = kontorWindow(k, cam, { w: WIN.w, h: WIN.h, title: "Lanes, week 40", right: "Forecast 48 h", style: "Ui head 18", absolute: { x: 0, y: 0 }, pad: 26, gap: 18 });
+    const kpis = k.stack(w.body, { direction: "HORIZONTAL", gap: 24, name: "Kpis" });
+    for (const [label, value, name] of [["On time, 30 days", `${KONTOR.after}%`, "On time figure"], ["Lanes", "1,240", "Lanes figure"], ["Flagged today", "3", "Flagged figure"]]) {
+      const c = k.stack(kpis, { gap: 6, width: name === "On time figure" ? 260 : "FILL", name: "Kpi" });
+      k.text(c, label, { style: "Ui head 18", color: "cardMuted", name: "Kpi label" });
+      k.text(c, value, { style: "Figure 46", color: name === "On time figure" ? "onCard" : "onCard", width: name === "On time figure" ? 240 : "FILL", name });
+    }
+    k.rect(w.body, "FILL", 2, "onCard", { name: "Kpi rule" });
+    const split = k.stack(w.body, { direction: "HORIZONTAL", gap: 24, name: "Split" });
+    const mapBox = k.stack(split, { width: 320, height: 330, name: "Map box" });
+    const map = routeMap(k, mapBox, { w: 320, h: 330, pad: 26, weight: 8, labels: "Ui head 18", name: "Route", absolute: { x: 0, y: 0 } });
+    const flag = k.stack(mapBox, { direction: "HORIZONTAL", width: "HUG", fill: "late", padding: { top: 6, right: 10, bottom: 6, left: 10 }, name: "Flag", absolute: { x: 0, y: 236 } });
+    const flagWords = k.text(flag, `${KONTOR.shipment}  +${KONTOR.slip} h`, { style: "Flag 18", color: "onPrimary", autoWidth: true, name: "Flag words" });
+    laneTable(k, split, { style: "Ui 21", head: "Ui head 18", cols: [150, 104], rowH: 52, show: ["lane", "onTime", "forecast"] });
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 34", fill: "text", ink: "paper", radius: 0, pad: [18, 24] });
+    const call = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Call row" });
+    k.instance(call, "Call", { Label: "Start free for 14 days" }, { name: "Call" });
+    k.text(call, "{{brand.site}}", { style: "Label 24", color: "text", autoWidth: true, name: "Site" });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    glideIn(k, w.win, 120, { dy: WIN.h, duration: 520 });
+    choreograph(k, sheet, { giant, topRule, marker, cellW, map, big, flagWords });
+    camera(k, cam, WIN.w, WIN.h, SHOTS);
+    k.variants(sheet, [...reelCuts({ post: 48, portrait: 60 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 16, counterAxisSpacing: 16, padding: { top: 48, right: 140, bottom: 48, left: 140 } });
+        fitGrid(kit, id, { ...GRID, top: 48 });
+        hide(kit, id, ["Field", "Field route", "Steps", "Hook side"]);
+        restyle(kit, id, "Giant", "Giant 230");
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { itemSpacing: 18, counterAxisSpacing: 18, padding: { top: 60, right: 140, bottom: 60, left: 140 } });
+        fitGrid(kit, id, { ...GRID, top: 60 });
+        hide(kit, id, ["Field", "Field route"]);
+        restyle(kit, id, "Giant", "Giant 230");
+      }
+    }), wideCut(640, (kit, id, right) => {
+      fitGrid(kit, id, { cols: 12, margin: 110, gutter: 24, row: 120, top: 80 });
+      hide(kit, id, ["Field", "Field route"]);
+      kit.patch(id, { primaryAxisAlignItems: "CENTER" });
+      for (const n of kit.named(id, "Hook")) kit.patch(n, { layoutMode: "VERTICAL", counterAxisAlignItems: "MIN" });
+      for (const n of kit.named(id, "Hook side")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 520 });
+      const scale = Math.min(right.width / WIN.w, (right.height - 76) / WIN.h);
+      const x = right.x + Math.round((right.width - WIN.w * scale) / 2);
+      float(kit, id, "Steps", x, right.y, { width: Math.round(WIN.w * scale) });
+      float(kit, id, "Stage", x, right.y + 76, { scale });
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+function choreograph(k, sheet, o) {
+  k.animate(o.giant, "translateX", [{ t: 0, v: -520, ease: ease.out("expo") }, { t: 520, v: 0, ease: ease.hold }, { t: DROP - 1, v: 0, ease: ease.out("expo") }, { t: DROP, v: -520, ease: ease.out("expo") }, { t: DROP + 520, v: 0 }]);
+  k.animate(o.giant, "text.content", [{ t: 0, v: "48h", ease: ease.hold }, { t: DROP, v: "96%" }]);
+  for (const id of k.named(sheet, "Hook kicker")) k.animate(id, "text.content", [{ t: 0, v: KONTOR.feature, ease: ease.hold }, { t: DROP, v: "Quarter 3" }]);
+  for (const id of k.named(sheet, "Hook line")) k.animate(id, "text.content", [{ t: 0, v: "before a shipment is late, Kontor tells you.", ease: ease.hold }, { t: DROP, v: "on time, up from 87 a quarter ago." }]);
+  k.animate(o.giant, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: 30, v: 1 }]);
+  extend(k, o.topRule, 80, 600);
+  const step = (i) => i * (o.cellW + 24);
+  k.animate(o.marker, "translateX", [
+    { t: FLAG, v: step(0), ease: ease.out("expo") },
+    { t: FLAG + 380, v: step(1), ease: ease.hold },
+    { t: REROUTE, v: step(1), ease: ease.out("expo") },
+    { t: REROUTE + 380, v: step(2) }
+  ]);
+  extend(k, o.marker, WATCH, 380);
+  const line = (root, name) => k.named(root, name)[0];
+  drawLine(k, line(o.map, "Road"), WATCH + 200, beat(3));
+  drawLine(k, line(o.map, "Late stretch"), FLAG, 500);
+  drawLine(k, line(o.map, "Rail"), REROUTE, beat(2));
+  k.animate(line(o.map, "Stops"), "opacity", [{ t: WATCH + 200, v: 0, ease: ease.linear }, { t: WATCH + 500, v: 1 }]);
+  for (const id of k.named(sheet, "Late forecast")) k.animate(id, "text.content", [{ t: 0, v: `+${KONTOR.slip} h`, ease: ease.hold }, { t: REROUTE + beat(2), v: "rail, on time" }]);
+  k.animate(o.flagWords, "text.content", [{ t: 0, v: `${KONTOR.shipment}  +${KONTOR.slip} h`, ease: ease.hold }, { t: REROUTE + beat(2), v: `${KONTOR.shipment}  by rail` }]);
+  drawLine(k, line(o.big, "Road"), 0, beat(6));
+  drawLine(k, line(o.big, "Late stretch"), FLAG, 600);
+  drawLine(k, line(o.big, "Rail"), REROUTE, beat(3));
+  k.animate(line(o.big, "Stops"), "opacity", [{ t: 200, v: 0, ease: ease.linear }, { t: 600, v: 1 }]);
+}
+
+export {
+  style_swiss_launch_reel_default
+};

package/dist/chunks/chunk-55L54JVS.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-reel-carousel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var WORK = [
+  { title: "The Tide Giant", client: "Meridian Pictures", year: "2026", kind: "Feature film \xB7 140 shots", cover: "reel-00", summary: "A stone giant rising from the sea beside a lighthouse, for the third act of a fantasy feature.", story: "A full-CG creature with a water simulation for every step; the lighthouse is a plate shot on the Cornish coast.", credits: "VFX supervision, CG, compositing \u2014 Parallax Works" },
+  { title: "Sunflower Landing", client: "Orbital Series", year: "2026", kind: "Streaming series \xB7 62 shots", cover: "reel-01", summary: "A ship setting down in a field of sunflowers at golden hour.", story: "Two days of plates in a real field, the ship and its downdraft added after; every flower bends.", credits: "VFX \u2014 Parallax Works \xB7 Production \u2014 Orbital" },
+  { title: "Blue Flood", client: "Aqualux", year: "2025", kind: "Commercial", cover: "reel-02", summary: "A city street flooding with luminous water in slow motion.", story: "Shot at 1,000 frames a second on a closed street; the water is simulated to match the speed.", credits: "Direction, VFX \u2014 Parallax Works" },
+  { title: "Smoke Dragon", client: "Ironside Games", year: "2025", kind: "Game cinematic", cover: "reel-03", summary: "A dragon of smoke coiling round a tower at night.", story: "The reveal trailer for a game, rendered from the game\u2019s own creature rig.", credits: "Cinematic, CG \u2014 Parallax Works" },
+  { title: "Crystal Canyon", client: "Meridian Pictures", year: "2024", kind: "Feature film \xB7 88 shots", cover: "reel-04", summary: "An astronaut walking a canyon of crystal on another world.", story: "A virtual-production set on an LED stage, extended in post for the wide shots.", credits: "VFX, virtual production \u2014 Parallax Works" },
+  { title: "Fibre Forest", client: "Lightline Telecom", year: "2024", kind: "Brand film", cover: "reel-05", summary: "A forest whose trees are made of glowing fibre optics.", story: "Every strand is a curve that carries a pulse of light timed to the music.", credits: "Direction, CG \u2014 Parallax Works" }
+];
+var portfolio_reel_carousel_default = defineTemplate({
+  id: "web-portfolio-reel-carousel",
+  meta: {
+    name: "Carousel reel portfolio",
+    description: "A visual effects studio\u2019s portfolio whose pages are panels on a 3D ring: open a show and the ring turns to it, go home and it turns back. Wide frames two across on black, a page per show and a studio page. Drawn on the GPU with WebGPU, in CSS 3D elsewhere. The shows are a collection you edit as a table. Desktop, tablet and phone",
+    category: "web",
+    tags: ["portfolio", "3d", "carousel", "transition", "webgpu", "vfx", "film", "reel", "dark", "cms", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["portfolio"],
+    created: "2026-10-05",
+    updated: "2026-10-05"
+  },
+  breakpoints: true,
+  build: () => standardPortfolio({
+    name: "Carousel reel",
+    brand: { paper: "#050608", text: "#F2F4F7", onPaper: "#8E96A3", primary: "#3DDCFF", onPrimary: "#050608", card: "#0E1117", onCard: "#F2F4F7", cardMuted: "#8E96A3", line: "#1C212B" },
+    fields: { name: "Parallax Works", email: "bids@parallax.works" },
+    styles: {
+      "Wordmark 18": { size: 18, fontWeight: 800, letterSpacing: 4, lineHeight: 24 },
+      "Small 13": { size: 13, fontWeight: 600, letterSpacing: 1.6, lineHeight: 18 },
+      "Meta 14": { size: 14, fontWeight: 400, lineHeight: 20 },
+      "Title 20": { size: 20, fontWeight: 700, letterSpacing: -0.3, lineHeight: 26 },
+      "Lead 24": { size: 24, fontWeight: 500, lineHeight: 32 },
+      "Body 17": { size: 17, fontWeight: 400, lineHeight: 28 },
+      "Display 84": { size: 84, fontWeight: 800, letterSpacing: -3, lineHeight: 84 },
+      "Display 44": { size: 44, fontWeight: 800, letterSpacing: -1.4, lineHeight: 48 }
+    },
+    type: { wordmark: "Wordmark 18", small: "Small 13", meta: "Meta 14", title: "Title 20", lead: "Lead 24", body: "Body 17", display: "Display 84", displaySmall: "Display 44" },
+    projects: WORK,
+    go: "CAROUSEL_FROM_RIGHT",
+    back: "CAROUSEL_FROM_LEFT",
+    links: [["work", "REEL"], ["studio", "STUDIO"]],
+    lead: { kicker: "VISUAL EFFECTS \xB7 LONDON \xB7 MONTR\xC9AL", headline: "Impossible shots, delivered on time.", intro: "Parallax Works makes visual effects for features, series, games and commercials: 140 artists across two studios." },
+    grid: { cols: 2, gap: 16, ratio: 0.5625, radius: 0, card: { fill: "card", pad: 0 }, meta: "{{item.client}} \u2014 {{item.kind}}", tablet: 1 },
+    project: { ratio: 0.42, kicker: "SHOW", more: { cols: 3, ratio: 0.5625, label: "MORE FROM THE REEL" } },
+    studio: {
+      statement: "Two studios, one pipeline, and a habit of saying yes to the hard shot.",
+      about: "We started in a London basement in 2011 with three artists and a render farm under a desk. Now we deliver end to end \u2014 supervision on set, CG, simulation and compositing \u2014 from London and Montr\xE9al.",
+      picture: "reel-04",
+      ratio: 0.42,
+      services: ["VFX supervision", "Creatures and simulation", "Virtual production", "Compositing and finishing"],
+      clients: "Meridian Pictures, Orbital Series, Aqualux, Ironside Games and Lightline Telecom.",
+      contact: "Send scripts and storyboards for a bid within five days."
+    },
+    elsewhere: "VIMEO \xB7 LINKEDIN \xB7 INSTAGRAM"
+  })
+});
+
+export {
+  portfolio_reel_carousel_default
+};

package/dist/chunks/chunk-57MSU3KE.js

@@ -0,0 +1,161 @@
+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 {
+  PARTS,
+  STENCIL,
+  blueprintBrand,
+  dimension,
+  drawingSheet,
+  extend,
+  fitSheet,
+  revStamp,
+  shaft,
+  titleBlock
+} from "./chunk-OKDZILNK.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  appear,
+  drawOn
+} from "./chunk-PMVMC75G.js";
+import {
+  board,
+  reboard
+} from "./chunk-QLV6445V.js";
+import {
+  outro,
+  pill,
+  postVariants
+} 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/social/blueprint-dimension-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 8800;
+var OUT = 7800;
+var STATIONS = [{ w: 3, h: 0.62 }, { w: 2.3, h: 0.86 }, { w: 1.9, h: 0.5 }, { w: 3.2, h: 0.74 }, { w: 4.6, h: 1 }];
+var BOARD = { width: 952, height: 600 };
+var SHAFT = { y: 150, height: 290 };
+var nth = (name) => PARTS.map((_, i) => `${name} ${i + 1}`);
+var counts = [
+  ...PARTS.map((p, i) => ({ layer: `Seg figure ${i + 1}`, at: 1700 + i * 260, duration: 800, counter: { from: 0, to: p.ms, decimals: 1 } })),
+  { layer: "Total figure", at: 3500, duration: 1400, counter: { from: 38, to: 19, suffix: " ms p99" } }
+];
+var cues = [
+  { layer: "Strip", preset: "fade-in", at: 0, params: { duration: 400 } },
+  // The board's own parts draw themselves in; the board fades in under them so the outro can take it away whole.
+  { layer: "Board", preset: "fade-in", at: 0, params: { duration: 200 } },
+  { layer: nth("Balloon"), preset: "pop-in", at: 900, params: { duration: 300 }, stagger: { delay: 150, order: "selection" } },
+  { layer: nth("Station"), preset: "fade-in", at: 1e3, params: { duration: 300 }, stagger: { delay: 150, order: "selection" } },
+  { layer: "Note", preset: "rise-in", at: 3300, params: { duration: 500 } },
+  { layer: "Stamp", preset: "pop-in", at: 5e3, params: { duration: 260, amount: 0.5 } },
+  { layer: "Shaft", preset: "shake", at: 5090, params: { duration: 380, distance: 10 } },
+  { layer: "Call", preset: "pulse", at: 5900, params: { duration: 700, amount: 0.06 } },
+  outro(["Strip", "Board", "Note", "Stamp"], OUT, { gap: 80 })
+];
+var blueprint_dimension_post_default = defineTemplate({
+  id: "motion-blueprint-dimension-post",
+  meta: {
+    name: "Blueprint dimension post (animated)",
+    description: "A performance or changelog post drawn as an engineering section: the product\u2019s five parts as a hatched, stepped shaft whose outline draws itself, the request running down its bore, numbered balloons, a chain of dimensions that extend while each part\u2019s milliseconds count up, an overall dimension counting 38 ms down to 19, and a REV B stamp, held and then lifted off so it loops. Under nine seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "blueprint", "engineering drawing", "cyanotype", "section", "hatching", "dimension", "counter", "performance", "latency", "api", "infrastructure", "changelog", "saas", "post"],
+    platforms: ["x", "linkedin", "instagram", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["changelog", "stats", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Blueprint dimension post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    blueprintBrand(k, { hook: "Half the latency. Same API." });
+    k.textStyle("Strip 20", { ...STENCIL, size: 20, fontWeight: 700, letterSpacing: 1.5, lineHeight: 26 });
+    k.textStyle("Hook 76", { ...STENCIL, size: 76, fontWeight: 800, letterSpacing: -3, lineHeight: 76 });
+    k.textStyle("Hook 62", { ...STENCIL, size: 62, fontWeight: 800, letterSpacing: -2.4, lineHeight: 64 });
+    k.textStyle("Balloon 22", { ...MONO, size: 22, fontWeight: 800, lineHeight: 26 });
+    k.textStyle("Station 18", { ...STENCIL, size: 18, fontWeight: 800, lineHeight: 22, textAlign: "CENTER" });
+    k.textStyle("Dim 20", { ...MONO, size: 20, fontWeight: 800, lineHeight: 24 });
+    k.textStyle("Dim 30", { ...STENCIL, size: 30, fontWeight: 800, lineHeight: 34 });
+    k.textStyle("Note 26", { size: 26, fontWeight: 500, lineHeight: 34 });
+    k.textStyle("Cell 16", { ...STENCIL, size: 16, fontWeight: 700, letterSpacing: 1.2, lineHeight: 20 });
+    k.textStyle("Cell 22", { ...MONO, size: 22, fontWeight: 800, lineHeight: 26 });
+    k.textStyle("Stamp 46", { ...STENCIL, size: 46, fontWeight: 800, letterSpacing: 2, lineHeight: 48 });
+    k.textStyle("Stamp 16", { ...STENCIL, size: 16, fontWeight: 800, letterSpacing: 1.5, lineHeight: 20 });
+    k.textStyle("Button 22", { ...STENCIL, size: 22, fontWeight: 800, letterSpacing: 0.5, lineHeight: 28 });
+    pill(k, "Button", { fill: "text", ink: "paper", style: "Button 22", label: "Read Rev B", pad: [22, 22], radius: 0 });
+    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 });
+    drawingSheet(k, sheet, 1080, 1080);
+    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 section A\u2013A \xB7 the request path", { style: "Strip 20", color: "onPaper", name: "Strip name" });
+    k.text(strip, "Sheet 2 of 4", { style: "Strip 20", color: "onPaper", autoWidth: true, name: "Strip sheet" });
+    k.text(top, "{{brand.hook}}", { style: "Hook 76", color: "text", name: "Hook" });
+    revStamp(k, top, { big: "Rev B", small: "Released 02 Oct 2026", bigStyle: "Stamp 46", smallStyle: "Stamp 16", turn: -7, absolute: { x: 610, y: 124 } });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", justify: "CENTER", name: "Drawing row" });
+    const bd = board(k, row, BOARD.width, BOARD.height, 1, "Board");
+    const sh = shaft(k, bd, BOARD.width, SHAFT.height, { at: { x: 0, y: SHAFT.y }, stations: STATIONS });
+    const total = dimension(k, bd, { at: { x: sh.xs[0], y: 34 }, length: BOARD.width - 2 * sh.xs[0], ext: -70, label: "19 ms p99", style: "Dim 30", labelWidth: 230, labelHeight: 44, name: "Total dim", labelName: "Total figure", weight: 2.5 });
+    const segs = PARTS.map((p, i) => {
+      const cx = sh.xs[i] + sh.ws[i] / 2;
+      const balloon = k.stack(bd, { width: 44, height: 44, radius: 22, fill: "paper", stroke: { color: "text", width: 2.5, align: "INSIDE" }, align: "CENTER", justify: "CENTER", name: `Balloon ${i + 1}`, absolute: { x: cx - 22, y: 84 } });
+      k.text(balloon, String(i + 1), { style: "Balloon 22", color: "text", autoWidth: true, name: "Balloon number" });
+      k.vector(bd, 4, 40, [{ closed: false, points: [{ x: 2, y: 0 }, { x: 2, y: SHAFT.y + sh.tops[i] - 128 + 14 }] }], "text", { name: "Balloon leader", strokeWidth: 2, absolute: { x: cx - 2, y: 128 } });
+      k.text(bd, p.name, { style: "Station 18", color: "text", width: Math.max(96, sh.ws[i]), align: "CENTER", name: `Station ${i + 1}`, absolute: { x: cx - Math.max(96, sh.ws[i]) / 2, y: 536 } });
+      return dimension(k, bd, { at: { x: sh.xs[i], y: 492 }, length: sh.ws[i], ext: 40, label: p.ms.toFixed(1), style: "Dim 20", labelWidth: 54, labelHeight: 28, name: "Seg dim", labelName: `Seg figure ${i + 1}` });
+    });
+    const bottom = k.stack(sheet, { gap: 16, name: "Bottom" });
+    k.text(bottom, "Rev B rebuilt the router. That one part went from 28.3 ms to 9.3.", { style: "Note 26", color: "onPaper", name: "Note" });
+    const foot = k.stack(bottom, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Foot" });
+    titleBlock(k, foot, [{ label: "Drawing", value: "{{brand.site}}/rev-b" }, { label: "Units", value: "ms, p99", width: 150 }, { label: "Rev", value: "B", width: 80, fill: "primary", name: "Rev cell" }], { label: "Cell 16", value: "Cell 22", height: 72 });
+    k.instance(foot, "Button", { Label: "Read Rev B" }, { name: "Call" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    drawOn(k, sh.edges, 0, 1100);
+    for (const name of ["Shaft hatch", "Shaft hatch back", "Shaft fittings"]) for (const id of k.named(sh.id, name)) appear(k, id, 700, 500, k.node(id).opacity ?? 1);
+    appear(k, sh.flow, 500, 60);
+    drawOn(k, sh.flow, 500, 1500);
+    segs.forEach((d, i) => extend(k, d, 1600 + i * 260, 500));
+    extend(k, total, 3300, 800);
+    const refit = (kit, id) => {
+      const f = kit.node(id);
+      fitSheet(kit, id, f.width, f.height);
+    };
+    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, "Hook")) kit.restyle(n, "Hook 62");
+        for (const n of kit.named(id, "Stamp")) kit.patch(n, { x: 470, y: 112 });
+        refit(kit, id);
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  blueprint_dimension_post_default
+};

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

@@ -0,0 +1,126 @@
+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 {
+  LATCH,
+  QUIET,
+  darkBrand,
+  lamp,
+  lift,
+  lockup
+} from "./chunk-M6QTK2HG.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-O24FY473.js";
+import {
+  chart,
+  gridPaths
+} from "./chunk-YNOCYFZ4.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  hz
+} from "./chunk-PMVMC75G.js";
+import {
+  glow
+} from "./chunk-HVK5T4I5.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/email/style-dark-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Dark SaaS email header";
+var DURATION = 6e3;
+var CARD = { w: 250, pad: 16 };
+var INNER = CARD.w - CARD.pad * 2;
+var CHART_H = 64;
+var cues = [
+  { layer: "Last point", preset: "pulse", at: 500, params: { duration: 600, amount: 0.5 } },
+  { layer: "Open button", preset: "pulse", at: 2400, params: { duration: 600, amount: 0.05 } },
+  { layer: "Last point", preset: "pulse", at: 3500, params: { duration: 600, amount: 0.5 } },
+  { layer: "Share figure", preset: "pulse", at: 4600, params: { duration: 600, amount: 0.04 } }
+];
+var style_dark_header_default = defineTemplate({
+  id: "email-saas-style-dark-header",
+  meta: {
+    name: `${NAME} (animated GIF)`,
+    description: "A 600 \xD7 300 animated header for a product-news email in the dark precision look: the sender, the news, the button and a product card are all on the first frame (for Outlook), then a glint runs along the rollout steps, a scan line crosses the chart, a lamp breathes and the button nudges, all returning to where they began. A seamless 6-second GIF",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "saas", "dark", "dark mode", "announcement", "feature", "newsletter", "developer tools", "loop"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["announcement", "newsletter", "changelog"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues },
+  build() {
+    const k = new Kit(NAME, HEADER);
+    k.quantizeGeometry = true;
+    darkBrand(k, { offer: "Auto-rollback is live.", when: "Set a line for your error rate. Cross it, and the old code is back in four seconds." });
+    k.textStyle("Brand 16", { size: 16, fontWeight: 600, letterSpacing: -0.3, lineHeight: 20 });
+    k.textStyle("Offer 40", { size: 40, fontWeight: 700, letterSpacing: -1.9, lineHeight: 40 });
+    k.textStyle("When 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    k.textStyle("Button 14", { size: 14, fontWeight: 600, lineHeight: 18 });
+    k.textStyle("Label 12", { ...MONO, size: 12, fontWeight: 500, letterSpacing: 0.4, lineHeight: 16 });
+    k.textStyle("Figure 52", { size: 52, fontWeight: 700, letterSpacing: -2.4, lineHeight: 52, fontFeatures: { tnum: 1 } });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 14", label: "See it roll back", pad: [9, 16], radius: 7 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 0, right: 26, bottom: 0, left: 30 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    k.vector(sheet, 600, 300, gridPaths(600, 300, 50, 1), k.tint("text", 0.07), { name: "Grid", absolute: { x: 0, y: 0 } });
+    glow(k, sheet, { x: 470, y: 20, w: 620, role: "light", alpha: 0.08, name: "Light" });
+    const main = k.stack(sheet, { direction: "HORIZONTAL", gap: 26, align: "CENTER", name: "Main" });
+    const copy = k.stack(main, { gap: 12, name: "Copy" });
+    lockup(k, copy, { size: 16, style: "Brand 16", name: "Lockup" });
+    k.text(copy, "{{brand.offer}}", { style: "Offer 40", color: "text", name: "Offer" });
+    k.text(copy, "{{brand.when}}", { style: "When 14", color: "onPaper", name: "When" });
+    k.instance(copy, "Button", { Label: "See it roll back" }, { name: "Open button" });
+    const card = k.stack(main, { width: CARD.w, fill: "card", radius: 12, padding: CARD.pad, gap: 10, stroke: { color: "edge", width: 1, align: "INSIDE" }, effects: [lift(12, 30, 0.6)], name: "Card" });
+    const head = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Card head" });
+    k.text(head, LATCH.flag, { style: "Label 12", color: "onCard", autoWidth: true, name: "Flag name" });
+    const status = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 6, align: "CENTER", name: "Status" });
+    lamp(k, status, 7, "signal", { name: "Status lamp", breathe: hz(3, DURATION) });
+    k.text(status, "HEALTHY", { style: "Label 12", color: "cardMuted", autoWidth: true, name: "Status label" });
+    k.text(card, "100%", { style: "Figure 52", color: "onCard", autoWidth: true, name: "Share figure" });
+    const steps = k.stack(card, { direction: "HORIZONTAL", width: INNER, height: 6, gap: 4, clip: true, name: "Steps" });
+    for (let i = 0; i < 4; i++) k.rect(steps, (INNER - 12) / 4, 6, "signal", { radius: 2, name: "Step" });
+    const glint = k.rect(steps, 28, 6, "onCard", { name: "Glint", opacity: 0.85, absolute: { x: -28, y: 0 } });
+    k.behave(glint, "translateX", [{ kind: "spin", rate: (INNER + 28) * 2 / (DURATION / 1e3) }, { kind: "mod", period: INNER + 28 }]);
+    const well = k.stack(card, { width: INNER, height: CHART_H, fill: "well", radius: 6, clip: true, stroke: { color: "line", width: 1, align: "INSIDE" }, name: "Chart" });
+    k.vector(well, INNER, 2, [{ closed: false, points: [{ x: 0, y: 1 }, { x: INNER, y: 1 }] }], [], { name: "Limit", stroke: { color: "warn", width: 1.5, dash: [5, 4], cap: "NONE" }, absolute: { x: 0, y: 16 } });
+    const c = chart(QUIET, INNER - 10, CHART_H, 0.62);
+    k.vector(well, INNER - 10, CHART_H, [c.area], k.tint("signal", 0.12), { name: "Rate area", absolute: { x: 0, y: 0 } });
+    k.vector(well, INNER - 10, CHART_H, [c.line], [], { name: "Rate line", stroke: { color: "signal", width: 2, join: "ROUND" }, absolute: { x: 0, y: 0 } });
+    const end = c.pts[c.pts.length - 1];
+    k.ellipse(well, 8, "signal", { name: "Last point", absolute: { x: end.x - 4, y: end.y - 4 } });
+    const scan = k.rect(well, 1, CHART_H, "onCard", { name: "Scan", opacity: 0.35, absolute: { x: -1, y: 0 } });
+    k.behave(scan, "translateX", [{ kind: "spin", rate: (INNER + 1) * 2 / (DURATION / 1e3) }, { kind: "mod", period: INNER + 1 }]);
+    const foot = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Card foot" });
+    k.text(foot, "GUARDRAIL ON", { style: "Label 12", color: "signal", autoWidth: true, name: "Guardrail" });
+    k.text(foot, `ERRORS ${LATCH.errors}`, { style: "Label 12", color: "cardMuted", autoWidth: true, name: "Errors" });
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  style_dark_header_default
+};