@popcraft/kit 0.31.0 → 0.32.0

package/dist/chunks/chunk-CR7Q7NTM.js

@@ -0,0 +1,213 @@
+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 {
+  bust,
+  checker,
+  fitChecker,
+  mall,
+  osButtons,
+  osField,
+  osWindow,
+  tag,
+  vaporBrand
+} from "./chunk-2JGBSXGD.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-TF2MO3UA.js";
+import {
+  hardShadow
+} from "./chunk-M6VTXO6F.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/vaporwave-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var LOOP = 6e3;
+var VIEW = {
+  desktop: { w: 600, h: 540, mallX: 0, results: { x: 28, y: 36, width: 400 }, notice: { x: 250, y: 300, width: 322 } },
+  laptop: { w: 520, h: 540, mallX: -40, results: { x: 20, y: 36, width: 390 }, notice: { x: 180, y: 300, width: 320 } },
+  // The tablet's window is wider than the scene, so the scene is drawn that much larger (and stands on the same foot).
+  tablet: { w: 654, h: 540, mallX: 0, mallY: -48.6, mallScale: 1.09, results: { x: 40, y: 36, width: 400 }, notice: { x: 300, y: 300, width: 322 } },
+  // On the phone the results open at the top and the scene sits lower, so the sun's bands, the palms and the bust show under them.
+  mobile: { w: 317, h: 440, mallX: -60, mallY: 0, results: { x: 10, y: 12, width: 297 }, notice: null }
+};
+var FRAME = 18;
+var PRICES = [
+  [".com", "$9.80", "$9.80", "The anchor store"],
+  [".dev", "$12.00", "$12.00", "HTTPS only, by registry rule"],
+  [".fm", "$11.40", "$11.40", "Podcasts, radio, music tools"],
+  [".studio", "$14.00", "$14.00", "Free WHOIS privacy, like all of them"],
+  [".io", "$34.00", "$34.00", "The registry\u2019s price, not ours"]
+];
+var RESULTS = [[".com", "$9.80"], [".fm", "$11.40"], [".studio", "$14.00"]];
+var cues = [
+  { layer: "Leasing text", preset: "typewriter", at: 100, params: { duration: 500 } },
+  { layer: "Lead", preset: "fade-in", at: 600, params: { duration: 600 } },
+  { layer: "Query", preset: "typewriter", at: 1e3, params: { duration: 600 } },
+  { layer: "Window results", preset: "pop-in", at: 1700, params: { duration: 320, amount: 0.82 } },
+  { layer: "Result", preset: "rise-in", at: 2e3, params: { duration: 300, distance: 12 }, stagger: { delay: 220 } },
+  { layer: "Window notice", preset: "pop-in", at: 3e3, params: { duration: 320, amount: 0.82 } },
+  { layer: "Search button", preset: "pulse", at: 1500, params: { duration: 400, amount: 0.06 } },
+  { layer: "Proof", preset: "fade-in", at: 1200, params: { duration: 500 } }
+];
+function arrange(k, sheet, size) {
+  const v = VIEW[size];
+  for (const id of k.named(sheet, "Monitor")) k.patch(id, { width: v.w + FRAME, layoutSizingHorizontal: "FIXED" });
+  for (const id of k.named(sheet, "View")) k.patch(id, { height: v.h });
+  for (const id of k.named(sheet, "Mall")) k.patch(id, { x: v.mallX, y: v.mallY ?? v.h - 540, width: 600, height: 540, ...v.mallScale ? { scaleX: v.mallScale, scaleY: v.mallScale, anchorX: 0, anchorY: 0 } : {} });
+  for (const id of k.named(sheet, "Bust")) k.patch(id, { x: v.mallX + 96, y: v.h - 222 });
+  for (const id of k.named(sheet, "Window results")) k.patch(id, { ...v.results, layoutSizingHorizontal: "FIXED" });
+  for (const id of k.named(sheet, "Window notice")) k.patch(id, v.notice ? { ...v.notice, layoutSizingHorizontal: "FIXED" } : { visible: false });
+}
+var vaporwave_landing_default = defineTemplate({
+  id: "web-vaporwave-landing",
+  meta: {
+    name: "Vaporwave mall landing page",
+    description: "A SaaS landing page as the desktop of a dead mall: hero copy beside a window onto a banded sun, palms, a marble bust and a grid floor scrolling toward you, where a search types a name and result and renewal dialogs open and stack; a price list as the mall directory in a window of its own, and a closing band on checkerboard tile. Desktop, laptop, tablet and phone",
+    category: "web",
+    tags: ["vaporwave", "retro", "90s", "windows", "desktop", "synthwave", "grid", "sunset", "landing page", "hero", "saas", "domains", "pricing", "animation", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["launch", "brand-intro", "pricing"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("Vaporwave mall landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    vaporBrand(k);
+    k.textStyle("Nav 15", { size: 15, fontWeight: 600, lineHeight: 24, ...MONO });
+    k.textStyle("Brand 20", { size: 20, fontWeight: 800, lineHeight: 28, ...MONO });
+    k.textStyle("Button 15", { size: 15, fontWeight: 800, lineHeight: 24, ...MONO });
+    k.textStyle("Tag 13", { size: 13, fontWeight: 800, letterSpacing: 2, lineHeight: 18, ...MONO });
+    k.textStyle("Display 76", { size: 76, fontWeight: 900, letterSpacing: -2.4, lineHeight: 76, ...SERIF });
+    k.textStyle("Display 60", { size: 60, fontWeight: 900, letterSpacing: -1.8, lineHeight: 62, ...SERIF });
+    k.textStyle("Display 42", { size: 42, fontWeight: 900, letterSpacing: 0, lineHeight: 46, ...SERIF });
+    k.textStyle("Lead 19", { size: 19, fontWeight: 400, lineHeight: 30 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Query 18", { size: 18, fontWeight: 700, lineHeight: 26, ...MONO });
+    k.textStyle("Proof 14", { size: 14, fontWeight: 600, lineHeight: 22, ...MONO });
+    k.textStyle("Title 14", { size: 14, fontWeight: 700, lineHeight: 20, ...MONO });
+    k.textStyle("Row 15", { size: 15, fontWeight: 700, lineHeight: 22, ...MONO });
+    k.textStyle("Body 16", { size: 16, fontWeight: 600, lineHeight: 24 });
+    k.textStyle("Section 44", { size: 44, fontWeight: 900, letterSpacing: -1.4, lineHeight: 48, ...SERIF });
+    k.textStyle("Section 36", { size: 36, fontWeight: 900, letterSpacing: -1, lineHeight: 40, ...SERIF });
+    k.textStyle("Section 30", { size: 30, fontWeight: 900, letterSpacing: -0.8, lineHeight: 34, ...SERIF });
+    k.textStyle("Head 13", { size: 13, fontWeight: 800, letterSpacing: 1.5, lineHeight: 18, textCase: "UPPER", ...MONO });
+    k.textStyle("Cell 18", { size: 18, fontWeight: 700, lineHeight: 26, ...MONO });
+    k.textStyle("Cell 15", { size: 15, fontWeight: 700, lineHeight: 22, ...MONO });
+    k.textStyle("Note 16", { size: 16, fontWeight: 400, lineHeight: 24 });
+    buttons(k, { style: "Button 15", pad: [13, 22], radius: 0 });
+    osButtons(k, "Button 15", [9, 18]);
+    k.component("Button on band", { direction: "HORIZONTAL", width: "HUG", fill: "onPrimary", align: "CENTER", padding: { top: 16, right: 26, bottom: 16, left: 26 }, props: { Label: "Start a transfer" } }, (id) => {
+      k.propText(id, "Label", { style: "Button 15", color: "primary", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 72, top: 28 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    nav(k, sheet, { links: ["Search", "Directory", "Transfers", "Docs"], cta: "Open an account", style: "Nav 15", brandStyle: "Brand 20" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 22, name: "Copy" });
+    tag(k, copy, "NOW LEASING \xB7 400 ENDINGS", { style: "Tag 13", fill: "accent", ink: "onAccent", name: "Leasing" });
+    k.text(copy, "The name you want is still vacant.", { style: "Display 76", color: "text", name: "Headline", effects: [hardShadow(k, "primary", 3, 3, 0.9)] });
+    k.text(copy, "{{brand.name}} is a domain registrar with one flat price per ending and the same price at renewal. No upsell at checkout, no surprise in year two, and no phone call to transfer out.", { style: "Lead 19", color: "onPaper", name: "Lead" });
+    const searchRow = k.stack(copy, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Search row" });
+    const field = osField(k, searchRow, { pad: [11, 16], name: "Search field" });
+    k.text(field, "sundaze", { style: "Query 18", color: "text", name: "Query" });
+    k.instance(searchRow, "Button", { Label: "Search 400 endings" }, { name: "Search button" });
+    k.text(copy, ".com $9.80 \xB7 renews at $9.80 \xB7 WHOIS privacy included", { style: "Proof 14", color: "onPaper", name: "Proof" });
+    const v = VIEW.desktop;
+    const monitor = osWindow(k, hero, { title: "mall.exe", titleStyle: "Title 14", width: v.w + FRAME, bar: 36, pad: 0, gap: 0, name: "Monitor", shadow: 14 });
+    const view = k.stack(monitor.body, { height: v.h, clip: true, fill: "dusk", name: "View" });
+    mall(k, view, 600, 540, { horizon: 318, sun: { d: 300, cy: 196, sink: 46, returns: true }, loopMs: LOOP, cellMs: 1e3, palms: [{ h: 300, x: 44, base: 372 }, { h: 220, x: 566, flip: true, base: 362 }] });
+    bust(k, view, 210, { x: 172, base: 528 });
+    const results = osWindow(k, view, { title: "Search: sundaze", titleStyle: "Title 14", width: v.results.width, bar: 36, absolute: v.results, name: "Window results", gap: 10 });
+    for (const [name, price] of RESULTS) {
+      const row = k.stack(results.body, { direction: "HORIZONTAL", align: "CENTER", gap: 10, name: "Result" });
+      k.text(row, name, { style: "Row 15", color: "onCard", name: "Domain" });
+      k.text(row, price, { style: "Row 15", color: "onCard", autoWidth: true, name: "Price" });
+      tag(k, row, "VACANT", { style: "Tag 13", fill: "secondary", ink: "onSecondary", name: "Vacant", pad: [3, 8] });
+    }
+    const notice = osWindow(k, view, { title: "Renewal notice", titleStyle: "Title 14", width: v.notice.width, bar: 36, absolute: v.notice, name: "Window notice", gap: 12 });
+    k.text(notice.body, "Renews at $9.80. The same price, every year.", { style: "Body 16", color: "onCard", name: "Notice" });
+    k.instance(notice.body, "OS button hot", { Label: "OK" }, { name: "OK button" });
+    const directory = k.stack(sheet, { gap: 22, name: "Directory" });
+    k.text(directory, "The directory: one price per ending, and the same one next year.", { style: "Section 44", color: "text", name: "Directory title" });
+    const board = osWindow(k, directory, { title: "directory.txt", titleStyle: "Title 14", width: "FILL", bar: 36, pad: 8, gap: 0, name: "Board", shadow: 14 });
+    const head = k.stack(board.body, { direction: "HORIZONTAL", gap: 20, align: "CENTER", fill: "secondary", padding: { top: 10, right: 20, bottom: 10, left: 20 }, name: "Board head" });
+    k.text(head, "Ending", { style: "Head 13", color: "onSecondary", width: 120, name: "Head ending" });
+    k.text(head, "Year one", { style: "Head 13", color: "onSecondary", width: 130, name: "Head first" });
+    k.text(head, "Renewal", { style: "Head 13", color: "onSecondary", width: 130, name: "Head renewal" });
+    k.text(head, "On the sign", { style: "Head 13", color: "onSecondary", name: "Cell note" });
+    for (const [ending, first, renewal, note] of PRICES) {
+      const row = k.stack(board.body, { direction: "HORIZONTAL", gap: 20, align: "CENTER", padding: { top: 12, right: 20, bottom: 12, left: 20 }, name: "Price row" });
+      k.text(row, ending, { style: "Cell 18", color: "onCard", width: 120, name: "Cell ending" });
+      k.text(row, first, { style: "Cell 18", color: "onCard", width: 130, name: "Cell first" });
+      k.text(row, renewal, { style: "Cell 18", color: "onCard", width: 130, name: "Cell renewal" });
+      k.text(row, note, { style: "Note 16", color: "onCard", name: "Cell note" });
+    }
+    const band = k.stack(sheet, { fill: "primary", effects: [hardShadow(k, "shade", 14, 14, 0.42)], name: "Band" });
+    checker(k, band, 1200, 24, 12, "onPrimary", { name: "Tile" });
+    const inner = k.stack(band, { direction: "HORIZONTAL", gap: 32, align: "CENTER", padding: { top: 36, right: 44, bottom: 40, left: 44 }, name: "Band row" });
+    const pitch = k.stack(inner, { gap: 8, name: "Band copy" });
+    k.text(pitch, "Moving in? Keep the years you paid for.", { style: "Section 44", color: "onPrimary", name: "Band title" });
+    k.text(pitch, "Transfer a domain to {{brand.name}} and every year left on it comes with you. One auth code, about five minutes, and we add a year at the flat price.", { style: "Lead 19", color: "onPrimary", name: "Band lead" });
+    k.instance(inner, "Button on band", { Label: "Start a transfer" }, { name: "Band button" });
+    k.text(sheet, "\xA9 2026 {{brand.name}} Registrar, Inc. \xB7 ICANN accredited \xB7 Status \xB7 Docs \xB7 Abuse", { style: "Proof 14", color: "onPaper", name: "Footer" });
+    arrange(k, sheet, "desktop");
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Band row"],
+      stackMobile: ["Search row"],
+      restyle: { "Display 76": { laptop: "Display 60", tablet: "Display 60", mobile: "Display 42" }, "Lead 19": { mobile: "Lead 17" }, "Section 44": { tablet: "Section 36", mobile: "Section 30" }, "Cell 18": { mobile: "Cell 15" } },
+      hide: { mobile: ["Nav links", "Cell note", "Vacant"] },
+      gap: { tablet: 56, mobile: 44 },
+      tweak: (kit, id, size) => {
+        arrange(kit, id, size);
+        const w = kit.node(id).width - 2 * { desktop: 120, laptop: 80, tablet: 48, mobile: 20 }[size];
+        for (const n of kit.named(id, "Tile")) fitChecker(kit, n, w, 24, 12);
+        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48 });
+        if (size === "tablet") {
+          for (const n of kit.named(id, "Nav links")) kit.patch(n, { itemSpacing: 16 });
+          for (const n of kit.named(id, "Nav right")) kit.patch(n, { itemSpacing: 18 });
+          for (const name of ["Cell ending", "Head ending", "Cell first", "Head first", "Cell renewal", "Head renewal"]) for (const n of kit.named(id, name)) kit.patch(n, { width: 100 });
+          for (const n of kit.named(id, "Band row")) kit.patch(n, { itemSpacing: 24, counterAxisAlignItems: "MIN" });
+        }
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Headline")) kit.patch(n, { effects: [hardShadow(kit, "primary", 2, 2, 1)] });
+          for (const n of kit.named(id, "Band row")) kit.patch(n, { padding: { top: 24, right: 20, bottom: 26, left: 20 }, itemSpacing: 20, counterAxisAlignItems: "MIN" });
+          for (const name of ["Cell ending", "Head ending"]) for (const n of kit.named(id, name)) kit.patch(n, { width: 84 });
+          for (const name of ["Cell first", "Head first", "Cell renewal", "Head renewal"]) for (const n of kit.named(id, name)) kit.patch(n, { width: 92 });
+          for (const name of ["Price row", "Board head"]) for (const n of kit.named(id, name)) kit.patch(n, { itemSpacing: 10, padding: { top: 10, right: 10, bottom: 10, left: 10 } });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  vaporwave_landing_default
+};

package/dist/chunks/chunk-CRTQZXSF.js

@@ -0,0 +1,224 @@
+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 {
+  FIZZ,
+  burst,
+  burstSticker,
+  chromeText,
+  confetti,
+  display,
+  halftone,
+  marquee,
+  maxBrand,
+  mono,
+  plate,
+  slap,
+  spark,
+  spin,
+  sticker,
+  wobble
+} from "./chunk-JHYGD5FH.js";
+import {
+  ground
+} from "./chunk-YHBAWSDX.js";
+import {
+  logoBadge,
+  outro
+} from "./chunk-LEKU2ZW3.js";
+import {
+  curve3
+} from "./chunk-6RCDZU4R.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/style-maximal-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Maximal SaaS milestone post";
+var LOOP = 8e3;
+var LAND = 3e3;
+var OUT = 6800;
+var LAYOUT = {
+  post: {
+    lockup: { x: 48, y: 140 },
+    fig: { x: 48, y: 220, w: 984 },
+    chart: { x: 48, y: 520, w: 760, h: 420 },
+    thanks: { x: 760, y: 560 },
+    since: { x: 790, y: 830 },
+    top: { x: -60, y: 26, w: 1200 },
+    foot: { x: -60, y: 990, w: 1200 },
+    burst: { x: 720, y: 600 },
+    dots: { x: 820, y: 120 }
+  },
+  portrait: {
+    lockup: { x: 48, y: 150 },
+    fig: { x: 48, y: 236, w: 984 },
+    chart: { x: 48, y: 560, w: 984, h: 470 },
+    thanks: { x: 560, y: 1050 },
+    since: { x: 48, y: 1100 },
+    top: { x: -60, y: 30, w: 1200 },
+    foot: { x: -60, y: 1250, w: 1200 },
+    burst: { x: 700, y: 980 },
+    dots: { x: 820, y: 120 }
+  },
+  // Words inside x 64–940, y 250–1440.
+  story: {
+    lockup: { x: 64, y: 262 },
+    fig: { x: 64, y: 350, w: 876 },
+    chart: { x: 64, y: 680, w: 876, h: 640 },
+    thanks: { x: 500, y: 1346 },
+    since: { x: 90, y: 1250 },
+    top: { x: -100, y: 92, w: 1280 },
+    foot: { x: -100, y: 1700, w: 1280 },
+    burst: { x: 560, y: 1380 },
+    dots: { x: -160, y: 1400 }
+  }
+};
+var cues = [
+  slap("Figure plate", 0, { from: 0.3 }),
+  { layer: "Bar", preset: "scale-in", at: 300, stagger: { delay: 220, order: "selection" }, params: { duration: 600, amount: 0, ease: ease.back(1.8) } },
+  slap("Million burst", LAND, { from: 0.1, duration: 460 }),
+  slap(["Thanks sticker", "Since sticker"], LAND + 300, { gap: 300 }),
+  { layer: "Figure plate", preset: "shake", at: LAND, params: { duration: 500, distance: 16 } },
+  // After the land it keeps living on the beat: a wave runs along the bars, the figure kicks, the stickers rock.
+  { layer: "Bar", preset: "pulse", at: 4e3, stagger: { delay: 120, order: "selection" }, params: { duration: 600, amount: 0.16 } },
+  { layer: "Figure plate", preset: "shake", at: 4500, params: { duration: 400, distance: 8 } },
+  wobble(["Million burst", "Thanks sticker", "Since sticker"], 5e3, { gap: 250, angle: 8 }),
+  { layer: "Bar", preset: "pulse", at: 5600, stagger: { delay: 120, order: "selection" }, params: { duration: 600, amount: 0.16 } },
+  wobble(["Million burst", "Thanks sticker", "Since sticker"], 6e3, { gap: 200, angle: 6 }),
+  { layer: "Figure plate", preset: "pulse", at: 6100, params: { duration: 600, amount: 0.03 } },
+  // The loop: the stickers peel off, the bars pop away, and the figure goes.
+  outro(["Figure plate", "Million burst", "Thanks sticker", "Since sticker"], OUT, { gap: 80, duration: 400 }),
+  { layer: "Bar", preset: "pop-out", at: OUT + 100, stagger: { delay: 60, order: "selection" }, params: { duration: 400 } }
+];
+var counts = [{ layer: "Figure", at: 200, duration: LAND - 200, counter: { from: 0, to: FIZZ.september, separator: "," } }];
+var style_maximal_milestone_default = defineTemplate({
+  id: "motion-saas-style-maximal-milestone",
+  meta: {
+    name: NAME,
+    description: 'An eight-second milestone post in a maximalist Y2K look for an AI clip maker: "1,000,000" counts up in chrome on a black plate while six months of bars bounce up and a lime line draws across their tops; as the count lands a MILLION! burst slaps onto September, confetti bursts and the thank-you stickers slap on, then everything keeps rocking on the beat before it clears to loop. Square with 4:5 and 9:16 cuts',
+    category: "animation",
+    tags: ["animation", "saas", "maximalist", "y2k", "chrome", "stickers", "starburst", "creator", "video", "ai", "milestone", "metric", "counter", "chart", "confetti", "post", "instagram"],
+    platforms: ["instagram", "linkedin", "x", "threads", "tiktok"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "stats"],
+    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;
+    maxBrand(k);
+    display(k, "Figure 150", 150, 0.95);
+    display(k, "Brand 36", 36, 1);
+    display(k, "Line 30", 30, 1.15);
+    display(k, "Burst 56", 56, 0.92);
+    display(k, "Thanks 34", 34, 1.05);
+    mono(k, "Tag 22", 22);
+    const sheet = k.sheet;
+    ground(k, sheet, "Milestone", "paper");
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    const L = LAYOUT.post;
+    halftone(k, sheet, 460, "pinkDeep", { name: "Dots", absolute: L.dots });
+    const big = burst(k, sheet, 520, "accent", { name: "Big burst", points: 24, depth: 0.12, absolute: L.burst });
+    spin(k, big, 1 / 24, LOOP);
+    const band = (name, at, fill, rotate, right) => marquee(k, sheet, {
+      name,
+      width: at.w,
+      height: 92,
+      w: 160,
+      fill,
+      loop: LOOP,
+      cells: 8,
+      rotate,
+      right,
+      absolute: { x: at.x, y: at.y },
+      cell: (c) => {
+        spark(k, c, 46, fill === "night" ? "primary" : "night", { name: "Band spark" });
+        k.ellipse(c, 28, fill === "night" ? "accent" : "secondary", { name: "Band dot", stroke: { color: "night", width: 3, align: "INSIDE" } });
+      }
+    });
+    band("Top band", L.top, "primary", -3, false);
+    band("Foot band", L.foot, "night", 3, true);
+    k.component("Lockup", { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", fill: "card", radius: 999, padding: { top: 8, right: 22, bottom: 8, left: 8 }, stroke: { color: "night", width: 4, align: "INSIDE" } }, (id) => {
+      logoBadge(k, id, { fill: "night", size: 34, pad: 9, radius: 999 });
+      k.text(id, "{{brand.name}}", { style: "Brand 36", color: "onCard", autoWidth: true, name: "Brand name" });
+    });
+    k.instance(sheet, "Lockup", {}, { name: "Lockup", absolute: L.lockup });
+    const fp = plate(k, sheet, { name: "Figure plate", width: L.fig.w, rotate: -2, absolute: L.fig, pad: [22, 32], gap: 6 });
+    chromeText(k, fp, "1,000,000", { style: "Figure 150", name: "Figure", width: "FILL", size: 150 });
+    k.text(fp, "clips cut on the beat in September", { style: "Line 30", color: "onNight", width: "FILL", name: "Figure line" });
+    const ch = k.stack(sheet, { width: L.chart.w, height: L.chart.h, fill: "card", radius: 28, padding: 28, stroke: { color: "night", width: 4, align: "INSIDE" }, effects: [{ type: "DROP_SHADOW", color: k.color("night"), offset: { x: 10, y: 10 }, blur: 0, spread: 0, visible: true }], name: "Chart", absolute: L.chart });
+    k.patch(ch, { rotation: 1.5 });
+    const bars = k.stack(ch, { direction: "HORIZONTAL", gap: 14, align: "MAX", name: "Bars" });
+    k.patch(bars, { layoutSizingVertical: "FILL" });
+    FIZZ.monthly.forEach((v, i) => {
+      const col = k.stack(bars, { gap: 8, align: "CENTER", justify: "MAX", name: "Month" });
+      k.patch(col, { layoutSizingVertical: "FILL" });
+      k.text(col, v >= 1e3 ? "1M" : `${v}K`, { style: "Tag 22", color: "onCard", autoWidth: true, name: "Month value" });
+      const b = k.rect(col, "FILL", 40, ["secondary", "secondary", "accent", "accent", "night", "primary"][i], { radius: 10, name: "Bar", stroke: { color: "night", width: 3, align: "INSIDE" } });
+      k.patch(b, { anchorY: 1 });
+      k.text(col, FIZZ.months[i], { style: "Tag 22", color: "onCard", autoWidth: true, name: "Month name" });
+    });
+    k.vector(ch, 10, 10, [curve3([{ x: 0, y: 9 }, { x: 10, y: 0 }])], [], { name: "Trend", absolute: { x: 0, y: 0 }, stroke: { color: "night", width: 6, cap: "ROUND" } });
+    burstSticker(k, ch, [{ text: "1M!", style: "Burst 56" }], { size: 170, fill: "primary", ink: "onPrimary", name: "Million burst", rotate: 10, absolute: { x: 0, y: 0 } });
+    sticker(k, sheet, `THANK YOU, ${FIZZ.creators} CREATORS`, { fill: "secondary", ink: "onSecondary", style: "Tag 22", rotate: -6, pad: [14, 20], name: "Thanks sticker", absolute: L.thanks, width: 260 });
+    burstSticker(k, sheet, [{ text: FIZZ.clips, style: "Thanks 34" }, { text: "SINCE LAUNCH", style: "Tag 22" }], { size: 220, fill: "accent", ink: "onAccent", name: "Since sticker", points: 30, depth: 0.07, rotate: 8, absolute: L.since });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    confetti(k, sheet, { x: 0, y: 0, at: LAND, n: 40, spread: 520, seed: 11, life: 1900, name: "Confetti" });
+    const lay = (kit, root, l) => {
+      const at = (name, p) => {
+        for (const id of kit.named(root, name)) kit.patch(id, { x: p.x, y: p.y });
+      };
+      at("Lockup", l.lockup);
+      at("Big burst", l.burst);
+      at("Dots", l.dots);
+      at("Thanks sticker", l.thanks);
+      at("Since sticker", l.since);
+      for (const id of kit.named(root, "Figure plate")) kit.patch(id, { x: l.fig.x, y: l.fig.y, width: l.fig.w });
+      for (const id of kit.named(root, "Chart")) kit.patch(id, { x: l.chart.x, y: l.chart.y, width: l.chart.w, height: l.chart.h });
+      for (const id of kit.named(root, "Top band")) kit.patch(id, l.top ? { x: l.top.x, y: l.top.y, width: l.top.w } : { visible: false });
+      for (const id of kit.named(root, "Foot band")) kit.patch(id, { x: l.foot.x, y: l.foot.y, width: l.foot.w });
+      const inW = l.chart.w - 56, inH = l.chart.h - 56, colW = (inW - 14 * 5) / 6, label = 30 + 8, barMax = inH - 2 * label - 70;
+      const tops = FIZZ.monthly.map((v, i) => ({ x: 28 + i * (colW + 14) + colW / 2, y: 28 + inH - label - Math.round(28 + v / 1e3 * barMax) }));
+      kit.named(root, "Bar").forEach((id, i) => kit.patch(id, { height: Math.round(28 + FIZZ.monthly[i] / 1e3 * barMax), layoutSizingVertical: "FIXED" }));
+      const x0 = tops[0].x, y0 = Math.min(...tops.map((t) => t.y));
+      for (const id of kit.named(root, "Trend")) {
+        const pts = tops.map((t) => ({ x: t.x - x0, y: t.y - y0 }));
+        const w = pts[pts.length - 1].x, h = Math.max(...pts.map((p) => p.y));
+        kit.patch(id, { x: x0, y: y0, width: w, height: h, paths: [curve3(pts, 0.18)] });
+      }
+      for (const id of kit.named(root, "Million burst")) kit.patch(id, { x: Math.round(tops[5].x - 200), y: Math.max(-40, Math.round(tops[5].y - 190)) });
+      for (const id of kit.named(root, "Confetti")) kit.patch(id, { x: Math.round(l.chart.x + tops[5].x), y: Math.round(l.chart.y + tops[5].y) });
+    };
+    lay(k, sheet, L);
+    for (const id of k.named(sheet, "Trend")) k.animate(id, "trim.end", [{ t: 1200, v: 0, ease: ease.inOut("cubic") }, { t: LAND, v: 1, ease: ease.hold }, { t: OUT, v: 1, ease: ease.inOut("cubic") }, { t: OUT + 500, v: 0 }]);
+    k.variants(sheet, [
+      { preset: "ig-portrait", adjust: (kit, id) => lay(kit, id, LAYOUT.portrait) },
+      { preset: "ig-story", adjust: (kit, id) => lay(kit, id, LAYOUT.story) }
+    ]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_maximal_milestone_default
+};

package/dist/chunks/chunk-CSS3B3N4.js

@@ -0,0 +1,165 @@
+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 {
+  finish,
+  lights,
+  machinedBrand,
+  shopLight
+} from "./chunk-UWAMU3QI.js";
+import {
+  column,
+  rig,
+  sizes,
+  stage
+} from "./chunk-BJ7KIGYV.js";
+import {
+  key
+} from "./chunk-OTE5FUDA.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  outro
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/machined-plate-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 8e3;
+var FPS = 30;
+var SIZES = ["ig-post", "ig-portrait", "ig-story"];
+var PLATE = { w: 860, h: 640 };
+var OUT = 6200;
+var DAYS = 30;
+var OUTAGES = [6, 17, 25];
+var FACTS = [["Upstream outages", "3"], ["Requests dropped", "0"], ["Slowest failover", "41 ms"]];
+var cues = [
+  { layer: "Day lamp", preset: "pop-in", at: 500, params: { duration: 260 }, stagger: { delay: 45 } },
+  { layer: "Fact", preset: "rise-in", at: 1500, params: { duration: 500 }, stagger: { delay: 160 } },
+  { layer: "Footnote", preset: "rise-in", at: 2600, params: { duration: 600 } },
+  // The figure comes up as it starts counting, so it can be taken off at the end rather than snap back.
+  { layer: "Figure", preset: "fade-in", at: 0, params: { duration: 300 } },
+  // The loop: the finished plate holds from 3.2 s; then the readings lift off and the lamps go out, last day first.
+  outro(["Figure", "Fact", "Footnote"], OUT, { gap: 90 }),
+  { layer: "Day lamp", preset: "fade-out", at: OUT, params: { duration: 240 }, stagger: { delay: 30, order: "reverse" } }
+];
+var counts = [{ layer: "Figure", at: 300, duration: 2400, counter: { from: 12e6, to: 1248e4, separator: "," } }];
+function build(k, sheet, s) {
+  k.nameSheet(sheet, `Milestone plate \xB7 ${preset(s.preset).name}`);
+  const light = shopLight(k, sheet, s.W, s.H, { x: 0.5, y: 0.45, reach: 0.7, glow: 0.2, shadow: 0.6, grain: 0 });
+  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 2e3, lights: lights(s, { fill: 0.66, key: 0.5 }) });
+  const col = column(s, 64);
+  const mid = (col.top + col.bottom) / 2;
+  const hang = rig(k, scene, s, "Plate", PLATE.w, PLATE.h, s.W / 2, mid + (s.tall ? 10 : 6));
+  const story = s.H > s.W * 1.6;
+  const sc = story ? 1.04 : s.tall ? 0.98 : 0.94;
+  k.patch(hang, { rotateY: -14, rotateX: 5, scaleX: sc, scaleY: sc });
+  for (let i = 12; i >= 1; i--) {
+    const slice = k.rect(hang, PLATE.w, PLATE.h, i > 6 ? "metalDark" : "metalShade", { radius: 22, name: "Edge" });
+    k.patch(slice, { z: -i * 3 });
+  }
+  const cast = k.rect(hang, PLATE.w, PLATE.h, "panel", { radius: 30, name: "Cast shadow", opacity: 0.55, effects: [{ type: "LAYER_BLUR", radius: 36, visible: true }] });
+  k.patch(cast, { z: -90, translateY: 44, translateX: 18 });
+  const plate = k.stack(hang, { width: PLATE.w, height: PLATE.h, fill: "metal", radius: 22, clip: true, gap: 18, padding: { top: 54, right: 64, bottom: 50, left: 64 }, justify: "SPACE_BETWEEN", name: "Plate face", stroke: { color: "metalShade", width: 3, align: "INSIDE" } });
+  const fin = finish(k, plate, PLATE.w, PLATE.h, { glint: 0.36, sheen: 0.55, band: 0.2, slant: 0.5 });
+  for (const [x, y] of [[20, 20], [PLATE.w - 46, 20], [20, PLATE.h - 46], [PLATE.w - 46, PLATE.h - 46]]) {
+    const screw = k.stack(plate, { width: 26, height: 26, radius: 13, fill: "metalShade", align: "CENTER", justify: "CENTER", name: "Rivet", absolute: { x, y }, stroke: { color: "metalDark", width: 2, align: "INSIDE" } });
+    k.rect(screw, 14, 3, "metalDark", { radius: 1, name: "Slot" });
+  }
+  const head = k.stack(plate, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Plate head" });
+  const mark = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", name: "Mark" });
+  const tile = k.stack(mark, { width: "HUG", fill: "route", radius: 10, padding: 9, name: "Logo tile" });
+  k.logo(tile, 32, 32);
+  k.text(mark, "{{brand.name}}", { style: "Stamp 30", color: "onMetal", autoWidth: true, name: "Plate name" });
+  k.text(head, "Log \xB7 September 2026", { style: "Stamp mono 20", color: "onMetal", autoWidth: true, name: "Period" });
+  const main = k.stack(plate, { gap: 0, name: "Reading" });
+  k.text(main, "Calls rerouted around an outage", { style: "Stamp mono 20", color: "onMetal", name: "Figure label" });
+  k.text(main, "12,480,000", { style: "Figure 128", color: "onMetal", name: "Figure" });
+  k.rect(plate, "FILL", 4, "onMetal", { radius: 2, name: "Plate rule" });
+  const facts = k.stack(plate, { direction: "HORIZONTAL", gap: 20, name: "Facts" });
+  for (const [label, value] of FACTS) k.instance(facts, "Fact", { Value: value, Label: label }, { name: "Fact" });
+  const strip = k.stack(plate, { direction: "HORIZONTAL", fill: "panel", radius: 10, justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 12, right: 14, bottom: 12, left: 14 }, name: "Day strip" });
+  for (let d = 1; d <= DAYS; d++) k.ellipse(strip, 14, OUTAGES.includes(d) ? "fault" : "led", { name: "Day lamp" });
+  const u = s.u;
+  const head2 = k.stack(sheet, { width: col.width, gap: Math.round(10 * u), align: "CENTER", absolute: { x: col.x, y: 0 }, name: "Claim" });
+  k.text(head2, "Three providers went down in September. Nobody noticed.", { style: story ? "Claim 60" : s.tall ? "Claim 52" : "Claim 46", color: "text", align: "CENTER", name: "Claim line" });
+  const foot = k.stack(sheet, { width: col.width, align: "CENTER", absolute: { x: col.x, y: 0 }, name: "Footnote" });
+  k.text(foot, "Every figure is from our public status log \xB7 {{brand.site}}", { style: "Foot 22", color: "onBackground", align: "CENTER", name: "Footnote line" });
+  const doc = k.finish();
+  const plateH = PLATE.h * sc, claimH = doc.nodes[head2].height, footH = doc.nodes[foot].height;
+  if (s.tall) {
+    const g = (col.bottom - col.top - claimH - plateH - footH) / 4;
+    const claimY = Math.round(col.top + g * 1.1), plateTop = Math.round(claimY + claimH + g * 0.9);
+    k.patch(head2, { y: claimY });
+    k.patch(hang, { translateY: (k.node(hang).translateY ?? 0) + Math.round(plateTop + plateH / 2 - (mid + 10)) });
+    k.patch(foot, { y: Math.round(plateTop + plateH + g * 0.7) });
+  } else {
+    const plateTop = mid + 6 - plateH / 2, plateBottom = mid + 6 + plateH / 2;
+    k.patch(head2, { y: Math.round(Math.max(col.top + 36, col.top + (plateTop - col.top - claimH) / 2)) });
+    k.patch(foot, { y: Math.round(plateBottom + (col.bottom - plateBottom - footH) / 2) });
+  }
+  key(k, hang, "rotateY", [[0, -22, ease.inOut("sine")], [DURATION / 2, 12, ease.inOut("sine")], [DURATION, -22]]);
+  key(k, hang, "rotateX", [[0, 8, ease.inOut("sine")], [DURATION / 2, 2, ease.inOut("sine")], [DURATION, 8]]);
+  k.animateShader(fin, "glint", [{ t: 0, v: -0.4, ease: ease.inOut("sine") }, { t: DURATION / 2, v: 1.3, ease: ease.inOut("sine") }, { t: DURATION, v: -0.4 }]);
+  key(k, scene, "scene3d.lights[@key].x", [[0, -s.W * 0.6, ease.inOut("sine")], [DURATION / 2, s.W * 1.2, ease.inOut("sine")], [DURATION, -s.W * 0.6]]);
+  k.animateShader(light, "glow", [{ t: 0, v: 0.14, ease: ease.inOut("sine") }, { t: DURATION / 2, v: 0.24, ease: ease.inOut("sine") }, { t: DURATION, v: 0.14 }]);
+  k.counts(sheet, counts);
+  k.cues(sheet, cues);
+}
+var machined_plate_post_default = defineTemplate({
+  id: "motion-machined-plate-post",
+  meta: {
+    name: "Machined milestone plate post",
+    description: "A build-in-public numbers post as a plate riveted to the machine: a slab of brushed aluminium with real thickness swings in 3D under a moving key light while a band of reflection crosses it. Stamped into it, the month\u2019s figure counts up over three facts and a lamp for every day, red on the days an upstream went down. Eight seconds, looping, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "machined", "hardware", "plate", "nameplate", "3d", "shader", "brushed metal", "aluminium", "industrial", "milestone", "stats", "counter", "build in public", "developer", "infrastructure", "uptime", "saas"],
+    platforms: ["x", "linkedin", "instagram", "threads"],
+    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("Machined milestone plate post", preset(SIZES[0]));
+    k.quantizeGeometry = true;
+    machinedBrand(k);
+    k.textStyle("Stamp 30", { size: 30, fontWeight: 800, letterSpacing: 0.2, lineHeight: 36 });
+    k.textStyle("Stamp mono 20", { ...MONO, size: 20, fontWeight: 600, letterSpacing: 1.2, lineHeight: 26, textCase: "UPPER" });
+    k.textStyle("Stamp mono 16", { ...MONO, size: 16, fontWeight: 600, letterSpacing: 0.8, lineHeight: 22, textCase: "UPPER" });
+    k.textStyle("Figure 128", { size: 128, fontWeight: 800, letterSpacing: -5, lineHeight: 132, fontFeatures: { tnum: 1 } });
+    k.textStyle("Fact 44", { size: 44, fontWeight: 800, letterSpacing: -1.2, lineHeight: 48 });
+    k.textStyle("Claim 46", { size: 46, fontWeight: 800, letterSpacing: -1.4, lineHeight: 52 });
+    k.textStyle("Claim 52", { size: 52, fontWeight: 800, letterSpacing: -1.6, lineHeight: 58 });
+    k.textStyle("Claim 60", { size: 60, fontWeight: 800, letterSpacing: -2, lineHeight: 66 });
+    k.textStyle("Foot 22", { ...MONO, size: 22, fontWeight: 500, lineHeight: 30 });
+    k.component("Fact", { width: 230, gap: 2, description: "One stamped fact: the figure over its label.", props: { Value: "0", Label: "Requests dropped" } }, (id) => {
+      k.propText(id, "Value", { style: "Fact 44", color: "onMetal" });
+      k.propText(id, "Label", { style: "Stamp mono 16", color: "onMetal" });
+    });
+    const [cover] = sizes(k, SIZES, (sheet, s) => build(k, sheet, s));
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  machined_plate_post_default
+};