@popcraft/kit 0.53.3 → 0.53.5

package/dist/chunks/chunk-AYZIDCLC.js

@@ -0,0 +1,82 @@
+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 {
+  GRAIN,
+  arcade,
+  gothicBrand,
+  nave
+} from "./chunk-MI56SRAL.js";
+import {
+  background
+} from "./chunk-75T3CFTH.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  glow
+} from "./chunk-YORIY3BT.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/social/gothic-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var gothic_link_preview_default = defineTemplate({
+  id: "social-gothic-link-preview",
+  meta: {
+    name: "Gothic link preview",
+    description: "A 1200 \xD7 630 link preview with a cathedral\u2019s gravity: the promise in a heavy serif and the product\u2019s numbers in one mono line, beside a lit stained-glass window in its stone portal, with candles burning along the floor",
+    category: "social",
+    tags: ["gothic", "cathedral", "rose window", "stained glass", "candles", "link preview", "open graph", "og image", "saas", "serif"],
+    platforms: ["web", "x", "linkedin", "facebook"],
+    formats: ["og-image"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Gothic link preview", preset("og-image"));
+    k.quantizeGeometry = true;
+    gothicBrand(k, { tagline: "Uptime, kept\xA0with ceremony." });
+    k.textStyle("Eyebrow 20", { size: 20, fontWeight: 700, letterSpacing: 5, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Display 92", { ...SERIF, size: 92, fontWeight: 900, letterSpacing: -2.8, lineHeight: 92 });
+    k.textStyle("Seal 20", { size: 20, fontWeight: 800, letterSpacing: 1, lineHeight: 26 });
+    pill(k, "Seal", { fill: "accent", ink: "onAccent", style: "Seal 20", label: "Ten monitors kept free", pad: [10, 20], radius: 4 });
+    k.textStyle("Facts 22", { ...MONO, size: 22, fontWeight: 500, lineHeight: 32 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 56, right: 548, bottom: 56, left: 64 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    background(k, sheet, "paper", { effects: GRAIN });
+    nave(k, sheet, 500, 630, { window: 270, top: 44, floor: 540, candles: { base: 612, count: 7, size: 11 }, loopMs: 0, at: { x: 700, y: 0 } });
+    glow(k, sheet, { x: 700, y: 330, w: 620, role: "cobalt", alpha: 0.2 });
+    glow(k, sheet, { x: 640, y: 560, w: 520, role: "ruby", alpha: 0.18 });
+    arcade(k, sheet, { width: 636, height: 30, count: 12, absolute: { x: 64, y: 0 }, role: "stone", weight: 2 });
+    const copy = k.stack(sheet, { gap: 22, name: "Copy" });
+    k.text(copy, "{{brand.name}} \xB7 est. MMXXVI", { style: "Eyebrow 20", color: "onPaper", name: "Eyebrow" });
+    k.text(copy, "{{brand.tagline}}", { style: "Display 92", color: "text", name: "Headline" });
+    k.rect(copy, 120, 4, "accent", { name: "Rule" });
+    k.text(copy, "Every 30 s \xB7 12 regions \xB7 paged in 40 s", { style: "Facts 22", color: "onPaper", name: "Facts" });
+    k.instance(copy, "Seal", { Label: "Ten monitors kept free" }, { name: "Seal" });
+    return k.finish();
+  }
+});
+
+export {
+  gothic_link_preview_default
+};

package/dist/chunks/chunk-AZM3IJTO.js

@@ -0,0 +1,330 @@
+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 {
+  MONTHS,
+  SPOOL,
+  WIN,
+  areaPaint,
+  body,
+  code,
+  deep,
+  display,
+  figure,
+  gradientBrand,
+  label,
+  longShadow,
+  mesh,
+  monthlyArea,
+  monthlyLine,
+  orbitCam,
+  plateChip,
+  renderRun,
+  rimLight,
+  tilted
+} from "./chunk-OZKPVMNT.js";
+import {
+  portraitSlot
+} from "./chunk-YUJ6YBZ6.js";
+import {
+  CONTENT,
+  compactNav,
+  footer,
+  respond,
+  typeScale
+} from "./chunk-YHF6LRMF.js";
+import {
+  page
+} from "./chunk-ZMD3C2YJ.js";
+import {
+  drawOn
+} from "./chunk-CLQ3FUJI.js";
+import {
+  board,
+  reboard
+} from "./chunk-LWSZATOL.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/web/style-gradient-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Gradient SaaS landing page";
+var DURATION = 6e3;
+var CUSTOMERS = ["Brightloop", "Fieldnote", "Kitehouse", "Northbeam", "Parcelly", "Tidewater Media"];
+var CHART = { w: 600, h: 280 };
+var HERO_COPY = { desktop: 500, laptop: 470 };
+var ART = { desktop: { w: 660, h: 560, s: 0.66 }, laptop: { w: 610, h: 540, s: 0.58 }, tablet: { w: 672, h: 520, s: 0.66 }, mobile: { w: 335, h: 300, s: 0.3 } };
+var REQUEST = `POST /v1/renders
+{ "template": "weekly-recap",
+  "data": { "name": "Ana", "km": 42.6 } }`;
+var PLANS = [
+  ["Hobby", `${SPOOL.minutes} render minutes a month`, "1080p, watermark-free, 3 templates", "$0"],
+  ["Studio", "3,000 render minutes", "4K, batches, webhooks, 10 templates", `$${SPOOL.studio} a month`],
+  ["Scale", "25,000 render minutes", "Edge regions, SSO, 99.95% SLA", `$${SPOOL.scale} a month`]
+];
+var FORMATS = [["9:16 story", 120, 214], ["1:1 post", 180, 180], ["16:9 video", 280, 158]];
+var TYPE = {
+  "Nav 15": body(15, 500),
+  "Brand 20": display(20),
+  "Button 16": display(16, { weight: 600 }),
+  "Label 13": label(13),
+  "Ui 15": body(15, 500),
+  "Mono 15": code(15),
+  "Mono 13": code(13),
+  "Mono 12": code(12),
+  "Display 76": display(76),
+  "Display 60": display(60),
+  "Display 44": display(44, { lead: 1.05 }),
+  "Section 44": display(44, { lead: 1.06 }),
+  "Section 36": display(36, { lead: 1.08 }),
+  "Section 30": display(30, { lead: 1.1 }),
+  "Lead 20": body(20),
+  "Lead 17": body(17),
+  "Body 16": body(16),
+  "Small 13": body(13),
+  "Figure 80": figure(80),
+  "Figure 40": figure(40),
+  "Quote 32": display(32, { lead: 1.25, weight: 600 }),
+  "Quote 24": display(24, { lead: 1.3, weight: 600 }),
+  "Win title 22": code(22),
+  "Win small 20": code(20),
+  "Win big 34": display(34),
+  "Win label 18": label(18),
+  "Win figure 96": figure(96)
+};
+var STEPS = {
+  "Display 76": { laptop: "Display 60", tablet: "Display 60", mobile: "Display 44" },
+  "Display 60": { mobile: "Display 44" },
+  "Section 44": { tablet: "Section 36", mobile: "Section 30" },
+  "Lead 20": { mobile: "Lead 17" },
+  "Figure 80": { mobile: "Figure 40" },
+  "Quote 32": { mobile: "Quote 24" },
+  "Mono 15": { mobile: "Mono 12" }
+};
+var cues = [
+  { layer: "Hero copy", preset: "blur-in", at: 0, params: { duration: 900, amount: 24 } },
+  { layer: "Headline", preset: "words-in", at: 150, params: { duration: 900 } },
+  { layer: "Request", preset: "typewriter", at: 400, params: { duration: 2400 } },
+  { layer: "Response", preset: "fade-in", at: 3e3, params: { duration: 600 } },
+  { layer: "Chart area", preset: "fade-in", at: 1400, params: { duration: 1800 } },
+  { layer: "Format", preset: "rise-in", at: 600, stagger: { delay: 400, order: "selection" }, params: { duration: 800, distance: 24 } },
+  { layer: "Close button", preset: "pulse", at: 4200, params: { duration: 1200, amount: 0.04 } }
+];
+var counts = [
+  { layer: "Render figure", at: 1e3, duration: 2600, ease: ease.linear, counter: { from: 0, to: SPOOL.render, decimals: 1, suffix: " s" } },
+  { layer: "Total figure", at: 600, duration: 2600, counter: { from: SPOOL.before10m, to: SPOOL.total } }
+];
+var style_gradient_landing_default = defineTemplate({
+  id: "web-saas-style-gradient-landing",
+  meta: {
+    name: NAME,
+    description: "A full landing page in the gradient and depth look for a video rendering API: a deep ocean ground with a warm coral-to-lagoon mesh only behind the product and the close, and the product window tilted in 3D space in the hero, rendering a video on the page timeline while the camera drifts round it and light crosses the glass. Under it a running strip of customers, an API call that types itself, ten million videos counting over a line that draws, one template in three formats, a customer quote with a photo slot, the plans and a footer. Desktop to phone",
+    category: "web",
+    tags: ["landing page", "saas", "gradient", "mesh gradient", "depth", "3d", "shader", "developer", "api", "video", "hero", "chart", "counter", "marquee", "code", "testimonial", "pricing", "animation", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, preset("web-desktop"));
+    k.quantizeGeometry = true;
+    gradientBrand(k, { tagline: SPOOL.tagline });
+    const s = typeScale(k, { ...TYPE });
+    k.component("Button", { direction: "HORIZONTAL", width: "HUG", radius: 999, align: "CENTER", padding: { top: 14, right: 24, bottom: 14, left: 24 }, fill: "primary", props: { Label: "Start free" }, effects: [longShadow(k, 0.4, 10, 28)] }, (id) => {
+      k.propText(id, "Label", { style: s("Button 16"), color: "onPrimary", autoWidth: true });
+    });
+    k.component("Button plate", { direction: "HORIZONTAL", width: "HUG", radius: 999, align: "CENTER", padding: { top: 14, right: 24, bottom: 14, left: 24 }, fill: "plate", props: { Label: "Read the docs" }, effects: rimLight(k, 0.16) }, (id) => {
+      k.propText(id, "Label", { style: s("Button 16"), color: "onPlate", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 104, top: 28, paper: "night" });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    deep(k, sheet, { duration: DURATION, name: "Hero deep" });
+    const top = k.stack(sheet, { gap: 64, name: "Top" });
+    const bar = k.stack(top, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Nav" });
+    const brand = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", name: "Brand" });
+    const tile = k.stack(brand, { width: "HUG", fill: "primary", radius: 10, padding: 7, name: "Logo tile" });
+    k.logo(tile, 24, 24);
+    k.text(brand, "{{brand.name}}", { style: s("Brand 20"), color: "onNight", autoWidth: true, name: "Brand name" });
+    const right = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 32, align: "CENTER", name: "Nav right" });
+    const links = k.stack(right, { direction: "HORIZONTAL", width: "HUG", gap: 28, align: "CENTER", name: "Nav links" });
+    for (const l of ["Product", "Templates", "Pricing", "Docs", "Sign in"]) k.text(links, l, { style: s("Nav 15"), color: "onNight", autoWidth: true, name: "Nav link" });
+    k.instance(right, "Button", { Label: "Start free" }, { name: "Nav button" });
+    const hero = k.stack(top, { direction: "HORIZONTAL", gap: 40, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { width: HERO_COPY.desktop, gap: 26, name: "Hero copy" });
+    plateChip(k, copy, `New \xB7 ${SPOOL.version} renders on the edge`, { style: s("Mono 13"), dot: "primary", name: "Tag", pad: [8, 14] });
+    k.text(copy, "Send JSON.\nGet video.", { style: s("Display 76"), color: "onNight", name: "Headline" });
+    k.text(copy, `Spool turns a template and a row of data into a finished MP4. A one-minute 1080p video comes back in ${SPOOL.render} seconds, from the edge region nearest you.`, { style: s("Lead 20"), color: "nightMuted", name: "Lead" });
+    const ctas = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "Ctas" });
+    k.instance(ctas, "Button", { Label: "Start free" }, { name: "CTA primary" });
+    k.instance(ctas, "Button plate", { Label: "Read the docs" }, { name: "CTA quiet" });
+    k.text(copy, SPOOL.trial, { style: s("Small 13"), color: "nightMuted", name: "Terms" });
+    const A = ART.desktop;
+    const art = k.stack(hero, { width: A.w, height: A.h, name: "Hero art" });
+    mesh(k, art, { ...meshBox(A), duration: DURATION, name: "Hero mesh", bloom: 1 });
+    const st = { title: s("Win title 22"), small: s("Win small 20"), big: s("Win big 34"), label: s("Win label 18"), figure: s("Win figure 96") };
+    const t = tilted(k, art, { x: 0, y: 0, w: A.w, h: A.h, scale: A.s, rotateY: -22, rotateX: 10, styles: st, jobs: 3, sweeps: [3800], duration: DURATION, name: "Hero scene" });
+    renderRun(k, t.win, 1e3, 2600, { loopEnd: DURATION });
+    orbitCam(k, t.scene, { at: 0, until: DURATION / 2, from: -6, to: 6, back: DURATION });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", align: "CENTER", gap: 28, radius: 999, fill: "plate", padding: { top: 6, right: 28, bottom: 6, left: 32 }, name: "Band", effects: rimLight(k, 0.12) });
+    k.text(band, "Rendering every week for", { style: s("Label 13"), color: "plateMuted", autoWidth: true, name: "Band label" });
+    const strip = k.stack(band, { width: "FILL", name: "Band strip" });
+    marquee(k, strip, s("Brand 20"));
+    const how = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", name: "Code row" });
+    const hCopy = k.stack(how, { width: 440, gap: 16, name: "Code copy" });
+    k.text(hCopy, "ONE REQUEST", { style: s("Label 13"), color: "nightMuted", name: "Section label" });
+    k.text(hCopy, "Data in. MP4 out.", { style: s("Section 44"), color: "onNight", name: "Section title" });
+    k.text(hCopy, "Design the template once in Spool Studio. Then every POST fills it with one row of data, renders it on the edge and calls your webhook with the file. No queue to run, no ffmpeg to babysit.", { style: s("Body 16"), color: "nightMuted", name: "Section body" });
+    const codePlate = k.stack(how, { gap: 18, padding: 32, radius: 24, fill: "plate", name: "Code plate", effects: [longShadow(k, 0.5, 30, 70), ...rimLight(k, 0.12)] });
+    k.text(codePlate, REQUEST, { style: s("Mono 15"), color: "onPlate", name: "Request" });
+    k.rect(codePlate, "FILL", 1, k.tint("rim", 0.1), { name: "Code rule" });
+    k.text(codePlate, "200 OK \xB7 done in 4.2 s\ncdn.spool.example/r/8f2k.mp4", { style: s("Mono 15"), color: "plateMuted", name: "Response" });
+    const proof = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", padding: 48, radius: 36, fill: "plate", clip: true, name: "Proof row", effects: rimLight(k, 0.1) });
+    const pCopy = k.stack(proof, { width: 470, gap: 16, name: "Proof copy" });
+    k.text(pCopy, "SINCE LAUNCH", { style: s("Label 13"), color: "plateMuted", name: "Proof label" });
+    k.text(pCopy, "10,000,000", { style: s("Figure 80"), color: "onPlate", width: 470, name: "Total figure" });
+    k.text(pCopy, `videos rendered. The ten millionth was in September, a month of ${SPOOL.september}. Median render for a one-minute video: ${SPOOL.render} s.`, { style: s("Lead 20"), color: "plateMuted", name: "Proof body" });
+    const chartBox = k.stack(proof, { gap: 12, name: "Chart" });
+    const cb = board(k, chartBox, CHART.w, CHART.h, 1, "Chart board");
+    for (const lv of [0.25, 0.5, 0.75, 1]) k.rect(cb, CHART.w, 1, k.tint("rim", 0.1), { name: "Chart level", absolute: { x: 0, y: Math.round(CHART.h * (1 - lv)) } });
+    k.vector(cb, CHART.w, CHART.h, [monthlyArea(CHART.w, CHART.h)], areaPaint(k), { name: "Chart area", absolute: { x: 0, y: 0 } });
+    const line = k.vector(cb, CHART.w, CHART.h, [monthlyLine(CHART.w, CHART.h)], [], { name: "Chart line", absolute: { x: 0, y: 0 }, stroke: { color: "primary", width: 4, cap: "ROUND" } });
+    const axis = k.stack(chartBox, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Chart axis" });
+    for (const m of MONTHS) k.text(axis, m, { style: s("Small 13"), color: "plateMuted", autoWidth: true, name: "Axis label" });
+    const fmt = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", name: "Format row" });
+    const fCopy = k.stack(fmt, { width: 440, gap: 16, name: "Format copy" });
+    k.text(fCopy, "EVERY FORMAT", { style: s("Label 13"), color: "nightMuted", name: "Format label" });
+    k.text(fCopy, "One template. Story, post and widescreen.", { style: s("Section 44"), color: "onNight", name: "Format title" });
+    k.text(fCopy, "Layouts reflow to each aspect ratio, captions stay inside every app\u2019s safe area, and one request can ask for all three.", { style: s("Body 16"), color: "nightMuted", name: "Format body" });
+    const frames = k.stack(fmt, { direction: "HORIZONTAL", gap: 24, align: "MAX", name: "Formats" });
+    FORMATS.forEach(([lab, w, h], i) => {
+      const f = k.stack(frames, { width: "HUG", gap: 10, name: "Format" });
+      const pic = k.stack(f, { width: w, height: h, radius: 14, clip: true, fill: [k.gradient({ from: ["coral", "lagoon", "apricot"][i], to: "ocean", angle: 60 })], name: "Format frame", effects: [longShadow(k, 0.5, 24, 50)] });
+      k.vector(pic, w, h, [{ closed: false, points: [{ x: w * 0.14, y: h * 0.76 }, { x: w * 0.4, y: h * 0.5 }, { x: w * 0.58, y: h * 0.6 }, { x: w * 0.86, y: h * 0.26 }] }], [], { name: "Format route", absolute: { x: 0, y: 0 }, stroke: { color: "rim", width: 4, cap: "ROUND", join: "ROUND" } });
+      k.text(f, lab, { style: s("Mono 13"), color: "nightMuted", autoWidth: true, name: "Format name" });
+    });
+    const quote = k.stack(sheet, { direction: "HORIZONTAL", gap: 40, padding: 48, radius: 36, align: "CENTER", fill: "plate", name: "Quote row", effects: rimLight(k, 0.1) });
+    portraitSlot(k, quote, 200, 240, { radius: 24, ground: "ocean", skin: "apricot", top: "kelp", halo: "coral", name: "Portrait", photo: "Customer photo" });
+    const qMain = k.stack(quote, { gap: 18, name: "Quote main" });
+    k.text(qMain, "\u201CEvery Monday we send 41,000 runners a recap video of their week, each with their own route. Spool renders all of them before standup.\u201D", { style: s("Quote 32"), color: "onPlate", name: "Quote words" });
+    k.text(qMain, "Maya Okafor, Head of Growth, Brightloop", { style: s("Ui 15"), color: "plateMuted", name: "Quote name" });
+    const plans = k.stack(sheet, { gap: 24, name: "Plans" });
+    k.text(plans, "PRICING", { style: s("Label 13"), color: "nightMuted", name: "Plans label" });
+    k.text(plans, "Pay for minutes rendered. Nothing else.", { style: s("Section 44"), color: "onNight", name: "Plans title" });
+    const pt = k.stack(plans, { name: "Plan table" });
+    for (const [n, who, what, price] of PLANS) {
+      k.rect(pt, "FILL", 1, k.tint("rim", 0.14), { name: "Plan rule" });
+      const row = k.stack(pt, { direction: "HORIZONTAL", gap: 24, align: "CENTER", padding: { top: 22, right: 0, bottom: 22, left: 0 }, name: "Plan row" });
+      k.text(row, n, { style: s("Section 30"), color: "onNight", width: 240, name: "Plan name" });
+      k.text(row, who, { style: s("Body 16"), color: "onNight", width: 320, name: "Plan who" });
+      k.text(row, what, { style: s("Body 16"), color: "nightMuted", name: "Plan what" });
+      k.text(row, price, { style: s("Mono 15"), color: "onNight", width: 170, align: "RIGHT", name: "Plan price" });
+    }
+    k.instance(plans, "Button plate", { Label: "Compare plans" }, { name: "Plans link" });
+    const closeBox = k.stack(sheet, { name: "Close box", align: "CENTER" });
+    mesh(k, closeBox, { x: -120, y: -60, w: CONTENT.desktop + 240, h: 480, duration: DURATION, phase: 3, name: "Close mesh" });
+    const close = k.stack(closeBox, { gap: 24, padding: 56, radius: 40, align: "CENTER", fill: "plate", name: "Close", effects: [longShadow(k, 0.55, 40, 90), ...rimLight(k, 0.14)] });
+    k.text(close, "Your first 200 minutes are on us.", { style: s("Display 60"), color: "onPlate", align: "CENTER", name: "Close title" });
+    k.text(close, "That is about two hundred one-minute videos. No card, no sales call, and the API key is on the first screen.", { style: s("Lead 20"), color: "plateMuted", align: "CENTER", name: "Close line" });
+    k.instance(close, "Button", { Label: "Start free" }, { name: "Close button" });
+    footer(k, sheet, {
+      about: SPOOL.pitch,
+      legal: `\xA9 2026 {{brand.name}} Labs. SOC 2 Type II. ${SPOOL.site}`,
+      columns: [["Product", ["Studio", "Batch renders", "Templates", "Changelog"]], ["Developers", ["Docs", "API reference", "Status", "SDKs"]], ["Company", ["Customers", "Pricing", "Careers", "Security"]]],
+      brandStyle: s("Brand 20"),
+      headStyle: s("Label 13"),
+      linkStyle: s("Small 13"),
+      ruleColor: "nightMuted",
+      ink: "onPlate",
+      quiet: "plateMuted",
+      box: { fill: "plate", radius: 32, padding: 40, effects: rimLight(k, 0.1) }
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    drawOn(k, line, 1200, 2400);
+    const copies = respond(k, sheet, s, {
+      stack: ["Hero", "Code row", "Proof row", "Format row", "Quote row", "Footer columns", "Plan row"],
+      restyle: { ...STEPS },
+      hide: { mobile: ["Nav links", "Band label"] },
+      gap: { tablet: 80, mobile: 56 },
+      tweak: (kit, id, size) => {
+        const cw = CONTENT[size];
+        const narrow = size === "tablet" || size === "mobile";
+        for (const n of kit.named(id, "Hero copy")) kit.patch(n, narrow ? { layoutSizingHorizontal: "FILL" } : { width: HERO_COPY[size] });
+        for (const name of ["Code copy", "Code plate", "Proof copy", "Format copy", "Quote main", "Chart"]) for (const n of kit.named(id, name)) if (narrow) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        for (const n of kit.named(id, "Total figure")) if (narrow) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        const pad = size === "mobile" ? 24 : size === "tablet" ? 36 : 48;
+        for (const name of ["Proof row", "Quote row", "Close"]) for (const n of kit.named(id, name)) kit.patch(n, { padding: { top: pad, right: pad, bottom: pad, left: pad } });
+        fitArt(kit, id, size === "desktop" ? "desktop" : size);
+        if (size === "laptop") reboard(kit, id, "Chart board", (cw - 96 - 470 - 56) / CHART.w);
+        if (narrow) {
+          reboard(kit, id, "Chart board", (cw - 2 * pad) / CHART.w);
+          for (const n of kit.named(id, "Queue plane")) kit.patch(n, { visible: false });
+          for (const n of kit.named(id, "Plan row")) kit.patch(n, { itemSpacing: 4 });
+          for (const n of kit.named(id, "Plan price")) kit.patch(n, { textAlign: "LEFT" });
+        }
+        for (const n of kit.named(id, "Close mesh")) kit.patch(n, { width: cw + 240 });
+        if (size === "tablet") compactNav(kit, id, ["Templates", "Sign in"], 20);
+        if (size === "mobile") {
+          kit.named(id, "Axis label").forEach((n, i) => {
+            if (i % 2) kit.patch(n, { visible: false });
+          });
+          for (const n of kit.named(id, "Portrait")) kit.patch(n, { width: 160, height: 192 });
+          for (const n of kit.named(id, "Formats")) kit.patch(n, { itemSpacing: 12 });
+          for (const n of kit.named(id, "Format frame")) {
+            const f = kit.node(n);
+            kit.patch(n, { width: Math.round(f.width * 0.5), height: Math.round(f.height * 0.5) });
+          }
+        }
+      }
+    });
+    for (const id of [sheet, ...copies]) for (const a of k.named(id, "Hero deep")) k.patch(a, { x: 0, y: 0, width: k.node(id).width, height: k.node(id).height });
+    return k.finish();
+  }
+});
+var meshBox = (A) => ({ x: -Math.round(A.w * 0.25), y: -Math.round(A.h * 0.25), w: Math.round(A.w * 1.5), h: Math.round(A.h * 1.5) });
+function fitArt(k, root, size) {
+  const A = ART[size];
+  for (const id of k.named(root, "Hero art")) k.patch(id, { width: A.w, height: A.h, layoutSizingHorizontal: "FIXED" });
+  const m = meshBox(A);
+  for (const id of k.named(root, "Hero mesh")) k.patch(id, { x: m.x, y: m.y, width: m.w, height: m.h });
+  for (const id of k.named(root, "Hero scene")) {
+    k.patch(id, { x: 0, y: 0, width: A.w, height: A.h });
+    for (const r of k.named(id, "Rig")) k.patch(r, { x: Math.round((A.w - WIN.w) / 2), y: Math.round((A.h - WIN.h) / 2), scaleX: A.s, scaleY: A.s });
+  }
+}
+function marquee(k, parent, style) {
+  const item = 230, height = 60, period = CUSTOMERS.length * item;
+  const strip = k.stack(parent, { direction: "HORIZONTAL", height, clip: true, name: "Marquee" });
+  CUSTOMERS.forEach((n, i) => {
+    const c = k.stack(strip, { direction: "HORIZONTAL", width: item, height, align: "CENTER", gap: 12, absolute: { x: 0, y: 0 }, name: "Wordmark" });
+    k.rect(c, 14, 14, k.tint("lagoon", 0.9), { name: "Wordmark mark", radius: 7 });
+    k.text(c, n, { style, color: "onPlate", autoWidth: true, name: "Wordmark name" });
+    const x0 = i * item, tWrap = Math.round((x0 + item) / period * DURATION);
+    k.patch(c, { translateX: x0 });
+    k.animate(c, "translateX", tWrap >= DURATION ? [{ t: 0, v: x0, ease: ease.linear }, { t: DURATION, v: x0 - period }] : [{ t: 0, v: x0, ease: ease.linear }, { t: tWrap - 1, v: -item + 1, ease: ease.hold }, { t: tWrap, v: period - item, ease: ease.linear }, { t: DURATION, v: x0 }]);
+  });
+}
+
+export {
+  style_gradient_landing_default
+};

package/dist/chunks/chunk-B2QZ54WH.js

@@ -0,0 +1,180 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  MONTHLY,
+  MONTHS,
+  PANE_ART,
+  VITRINE,
+  aurora,
+  body,
+  chip,
+  code,
+  display,
+  figure,
+  fitAurora,
+  float,
+  glassBrand,
+  label,
+  lockup,
+  monthlyArea,
+  monthlyLine,
+  pane,
+  paneArt,
+  passThrough,
+  sheen,
+  sitePill,
+  surface,
+  swell,
+  ts
+} from "./chunk-F7UFJWUM.js";
+import {
+  drawOn
+} from "./chunk-CLQ3FUJI.js";
+import {
+  board,
+  reboard,
+  restyle
+} from "./chunk-LWSZATOL.js";
+import {
+  outro,
+  postVariants
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/social/style-glass-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Glass SaaS milestone post";
+var DURATION = 8e3;
+var COUNT_AT = 700;
+var COUNT_LEN = 3e3;
+var LAND = COUNT_AT + COUNT_LEN;
+var CHART = { w: 840, h: 280 };
+var cues = [
+  { layer: "Figure plate", preset: "blur-in", at: 0, params: { duration: 900, amount: 24 } },
+  { layer: "Chart plate", preset: "blur-in", at: 400, params: { duration: 1100, amount: 24 } },
+  { layer: "Axis label", preset: "fade-in", at: 800, stagger: { delay: 220, order: "selection" }, params: { duration: 600 } },
+  { layer: "Peak chip", preset: "rise-in", at: LAND, params: { duration: 900, distance: 16 } },
+  { layer: "Thanks", preset: "words-in", at: LAND + 500, params: { duration: 1200 } },
+  // The glass clears again before the end, so a feed's replay starts on the aurora it ends on.
+  outro(["Figure plate", "Chart plate", "Thanks"], DURATION - 1e3, { gap: 120, duration: 600 })
+];
+var counts = [
+  { layer: "Billion figure", at: COUNT_AT, duration: COUNT_LEN, ease: ease.inOut("cubic"), counter: { from: 764e6, to: VITRINE.calls } }
+];
+var style_glass_milestone_default = defineTemplate({
+  id: "social-saas-style-glass-milestone",
+  meta: {
+    name: NAME,
+    description: "An eight-second milestone post in the glass look: on smoked glass over a slow aurora, a billion tool calls resolve on a counter while the year's monthly line draws itself and its last month lights up. A travelling highlight, panes that drift up out of depth, the amber swelling as the figure lands. Square with 4:5 and 9:16 cuts",
+    category: "social",
+    tags: ["social", "post", "milestone", "metric", "counter", "chart", "stats", "saas", "glass", "glassmorphism", "aurora", "shader", "ai", "build in public", "animation", "linkedin", "x"],
+    platforms: ["linkedin", "x", "instagram", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "stats", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    glassBrand(k);
+    ts(k, "Brand 30", display(30));
+    ts(k, "Kicker 24", code(24));
+    ts(k, "Label 22", label(22));
+    ts(k, "Figure 104", figure(104));
+    ts(k, "Figure 88", figure(88));
+    ts(k, "Line 28", body(28));
+    ts(k, "Axis 20", code(20));
+    ts(k, "Chip 22", code(22, 600));
+    ts(k, "Thanks 30", display(30, { lead: 1.25 }));
+    ts(k, "Thanks 36", display(36, { lead: 1.25 }));
+    ts(k, "Site 24", code(24));
+    sitePill(k, { style: "Site 24", label: "{{brand.site}}" });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Milestone");
+    k.flowSheet(sheet, 22, 64, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    const sky = aurora(k, sheet, { duration: DURATION });
+    swell(k, sky, LAND - 400, 1e3, 3200);
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
+    lockup(k, top, { size: 48, style: "Brand 30" });
+    chip(k, top, "September 2026", { style: "Kicker 24", dot: "pass", name: "Date chip", pad: [10, 18] });
+    const fig = pane(k, sheet, { gap: 10, padding: { top: 30, right: 40, bottom: 34, left: 40 }, radius: 32, name: "Figure plate" });
+    k.text(fig, "TOOL CALLS CHECKED SINCE LAUNCH", { style: "Label 22", color: "glassMuted", name: "Figure label" });
+    k.text(fig, "1,000,000,000", { style: "Figure 104", color: "onGlass", width: "FILL", name: "Billion figure" });
+    k.text(fig, `The billionth was a refund call in September. ${VITRINE.stopped} stopped at the glass.`, { style: "Line 28", color: "glassMuted", name: "Figure line" });
+    sheen(k, fig, 952, 320, [LAND - 200]);
+    const chart = pane(k, sheet, { gap: 12, padding: { top: 28, right: 28, bottom: 24, left: 28 }, radius: 32, name: "Chart plate" });
+    const area = k.stack(chart, { height: CHART.h, name: "Chart box" });
+    const cb = board(k, area, CHART.w, CHART.h, 1, "Chart board");
+    for (const lv of [0.4, 0.8]) k.rect(cb, CHART.w, 1, k.tint("rim", 0.12), { name: "Chart level", absolute: { x: 0, y: Math.round(CHART.h * (1 - lv)) } });
+    const fill = k.vector(cb, CHART.w, CHART.h, [monthlyArea(CHART.w, CHART.h)], [{ type: "GRADIENT_LINEAR", gradientStops: [{ position: 0, color: k.color("pass", 0.3) }, { position: 1, color: k.color("pass", 0) }], gradientHandlePositions: [{ x: 0.5, y: 0 }, { x: 0.5, y: 1 }, { x: 0, y: 0 }], opacity: 1, visible: true }], { name: "Chart area", absolute: { x: 0, y: 0 } });
+    const line = k.vector(cb, CHART.w, CHART.h, [monthlyLine(CHART.w, CHART.h)], [], { name: "Chart line", absolute: { x: 0, y: 0 }, stroke: { color: "pass", width: 5, cap: "ROUND" }, effects: [{ type: "DROP_SHADOW", color: k.color("pass", 0.8), offset: { x: 0, y: 0 }, blur: 14, spread: 0, visible: true }] });
+    const peakY = Math.round(CHART.h - MONTHLY[MONTHLY.length - 1] / 250 * CHART.h);
+    const dot = k.ellipse(cb, 22, "onGlass", { name: "Peak dot", absolute: { x: CHART.w - 11, y: peakY - 11 }, effects: [{ type: "DROP_SHADOW", color: k.color("pass", 1), offset: { x: 0, y: 0 }, blur: 18, spread: 2, visible: true }] });
+    chip(k, cb, `${VITRINE.september}M in Sep`, { style: "Chip 22", name: "Peak chip", pad: [8, 14], absolute: { x: CHART.w - 250, y: peakY + 24 } });
+    const axis = k.stack(chart, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Chart axis" });
+    for (const m of MONTHS) k.text(axis, m, { style: "Axis 20", color: "glassMuted", autoWidth: true, name: "Axis label" });
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 24, name: "Foot row" });
+    const thanks = pane(k, foot, { width: "FILL", padding: { top: 16, right: 24, bottom: 16, left: 24 }, radius: 24, alpha: 0.7, lift: 0.5, name: "Thanks plate" });
+    k.text(thanks, "Thank you to every team running agents behind glass.", { style: "Thanks 30", color: "onGlass", name: "Thanks" });
+    k.instance(foot, "Site pill", { Label: "{{brand.site}}" }, { name: "Site plate" });
+    const footArt = paneArt(k, board(k, sheet, PANE_ART.w, PANE_ART.h, 1.08, "Foot board", { absolute: { x: 22, y: 1420 } }), { name: "Foot art" });
+    passThrough(k, footArt, COUNT_AT, { travel: COUNT_LEN });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    drawOn(k, line, COUNT_AT, COUNT_LEN);
+    k.animate(fill, "opacity", [{ t: COUNT_AT, v: 0, ease: ease.inOut("sine") }, { t: LAND, v: 1 }]);
+    k.animate(dot, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: LAND - 100, v: 0, ease: ease.out("cubic") }, { t: LAND + 400, v: 1 }]);
+    for (const ax of ["scaleX", "scaleY"]) k.animate(dot, ax, [{ t: LAND - 100, v: 0.3, ease: ease.out("quart") }, { t: LAND + 900, v: 1 }]);
+    surface(k, fig, 0, { from: 0.95, duration: 1300 });
+    surface(k, chart, 400, { from: 0.94, duration: 1500 });
+    float(k, fig, DURATION, { amp: 3, phase: 0.5 });
+    float(k, chart, DURATION, { amp: 4, phase: 0.1 });
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      portrait: (kit, id) => {
+        fitAurora(kit, id);
+        for (const b of kit.named(id, "Foot board stage")) kit.patch(b, { visible: false });
+        kit.patch(id, { itemSpacing: 28 });
+        restyle(kit, id, "Thanks", "Thanks 36");
+      },
+      vertical: (kit, id) => {
+        fitAurora(kit, id);
+        restyle(kit, id, "Thanks", "Thanks 36");
+        restyle(kit, id, "Billion figure", "Figure 88");
+        kit.patch(id, { primaryAxisAlignItems: "SPACE_BETWEEN" });
+        for (const b of kit.named(id, "Foot board stage")) kit.patch(b, { visible: true });
+        for (const n of kit.named(id, "Foot row")) kit.patch(n, { layoutMode: "VERTICAL", counterAxisAlignItems: "MIN" });
+        for (const n of kit.named(id, "Thanks plate")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        reboard(kit, id, "Chart board", 744 / CHART.w);
+        for (const n of kit.named(id, "Chart box")) kit.patch(n, { height: Math.round(CHART.h * 744 / CHART.w) });
+      }
+    }));
+    k.setCover(sheet);
+    for (const n of [...k.named(sheet, "Foot board stage"), ...k.doc.pages.flatMap((p) => k.named(p, "Foot board stage"))]) if (k.node(n).parentId === sheet) k.patch(n, { visible: false });
+    return k.finish();
+  }
+});
+
+export {
+  style_glass_milestone_default
+};

package/dist/chunks/chunk-B3L2QYAM.js

@@ -0,0 +1,49 @@
+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 {
+  slideshow
+} from "./chunk-QBDKREEU.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/slideshow/product.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var story = {
+  id: "motion-slideshow-product",
+  song: "bright",
+  voice: "grotesk",
+  meta: {
+    name: "Product showcase slideshow",
+    description: "A punchy product video for a maker\u2019s new range: a title card with the brand, each piece in its own beat-cut scene with a line about it, a chapter on how it is made, pushes, slides and a light leak, and a closing card with the launch date. Cut to an upbeat keys track (made by PopCraft, CC0). Photos are CC0 from Wikimedia Commons; drop your own on any frame.",
+    tags: ["animation", "slideshow", "product", "showcase", "launch", "shop", "small business", "ecommerce", "photo", "music", "beat", "video"],
+    platforms: ["instagram", "tiktok", "facebook", "youtube"],
+    formats: ["video", "reel", "post", "ad"],
+    useCases: ["sale", "launch"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  brand: { paper: "#EFE4D2", onPaper: "#2B1A10", accent: "#B5532A", shade: "#1A110B", onPhoto: "#FFF8EE", leak: "#FFB36B" },
+  fields: { names: "Hollis & Vane", date: "Autumn range \xB7 in the shop 18 Oct" },
+  scenes: [
+    { kind: "title", name: "Opening", photo: "product-02", kicker: "New this autumn", beats: 8, move: "in" },
+    { kind: "photo", name: "The weekender", photo: "product-02", layout: "matted", caption: "The Weekender duffel", place: "Full-grain hide \xB7 \xA3240", beats: 6, move: "right", into: "push" },
+    { kind: "photo", name: "The notebook", photo: "product-00", caption: "A cover that softens with every page", beats: 6, move: "in", into: "push" },
+    { kind: "photo", name: "The boots", photo: "product-04", layout: "matted", caption: "Hand-lasted brogue boots", place: "Sizes 5 to 12", beats: 6, move: "left", into: "slide" },
+    { kind: "chapter", name: "Chapter 1", kicker: "How it\u2019s made", title: "By hand", beats: 4 },
+    { kind: "photo", name: "The bench", photo: "product-01", layout: "matted", caption: "Cut, stitched and burnished at one bench", beats: 6, move: "in", into: "cut" },
+    { kind: "photo", name: "The watch strap", photo: "product-03", layout: "matted", caption: "Straps cut from the offcuts", beats: 6, move: "right", into: "push" },
+    { kind: "photo", name: "The shine", photo: "product-05", caption: "Made to be resoled, not replaced", beats: 8, move: "in", into: "leak" },
+    { kind: "end", name: "Ending", kicker: "Find it at hollisandvane.co.uk" }
+  ]
+};
+var product_default = slideshow(story);
+
+export {
+  story,
+  product_default
+};