@popcraft/kit 0.26.0 → 0.27.0

package/dist/chunks/chunk-LL54J6WR.js

@@ -0,0 +1,443 @@
+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 {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  pt3,
+  r3
+} from "./chunk-BNVLVZUT.js";
+import {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/saas/style-gradient-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SPOOL = {
+  name: "Spool",
+  site: "spool.example",
+  version: "Spool 3",
+  feature: "Batch renders",
+  tagline: "Send JSON. Get video.",
+  pitch: "A video rendering API. Send a template and a row of JSON; get a finished MP4 back in seconds.",
+  /** A 60-second 1080p video, rendered on Spool 3's edge workers; and the same video on Spool 2. */
+  render: 4.2,
+  before: 38,
+  clip: "1 min \xB7 1080p",
+  region: "Edge \xB7 fra1",
+  template: "weekly-recap",
+  /** The batch every demo runs: rows in the CSV, and how long all of them took. */
+  rows: 2400,
+  batchTime: "3 min 12 s",
+  /** Videos rendered since launch, and in September (the milestone). */
+  total: 1e7,
+  before10m: 942e4,
+  september: "1.8M",
+  /** Plans: a month, and a month billed yearly. */
+  studio: 49,
+  studioYear: 39,
+  scale: 299,
+  scaleYear: 239,
+  minutes: 200,
+  overage: "$0.04",
+  trial: "200 render minutes free. No card."
+};
+var JOBS = [
+  { file: "recap-ana-ruiz.mp4", meta: "60 s \xB7 1080p", time: "4.2 s" },
+  { file: "recap-tom-hale.mp4", meta: "60 s \xB7 1080p", time: "4.0 s" },
+  { file: "recap-li-wei.mp4", meta: "45 s \xB7 1080p", time: "3.1 s" },
+  { file: "recap-sam-ode.mp4", meta: "60 s \xB7 4K", time: "9.8 s" }
+];
+var BRAND = {
+  night: "#041A24",
+  onNight: "#FFF6EE",
+  nightMuted: "#BDD3D6",
+  plate: "#08222D",
+  onPlate: "#FFFFFF",
+  plateMuted: "#A3C2C8",
+  primary: "#D4FF4F",
+  onPrimary: "#0B1F14"
+};
+var SCENERY = {
+  abyss: "#03141C",
+  ocean: "#0A3D50",
+  kelp: "#0D4A52",
+  coral: "#FF6B4A",
+  apricot: "#FFB07A",
+  lagoon: "#14A3A0",
+  haze: "#FFE2C4",
+  rim: "#FFFFFF",
+  shade: "#010A0E",
+  clipA: "#FF8A66",
+  clipB: "#2CC4BC",
+  clipC: "#FFC48F"
+};
+function gradientBrand(k, fields = {}) {
+  k.brand({ ...BRAND }, { name: SPOOL.name, site: SPOOL.site, ...fields });
+  k.palette({ ...SCENERY });
+}
+var tenth = (v) => Math.round(v * 10) / 10 + 0;
+var display = (size, o = {}) => ({ size, fontWeight: o.weight ?? 700, letterSpacing: tenth(-size * 0.045), lineHeight: Math.round(size * (o.lead ?? 1.02)), ...o.center ? { textAlign: "CENTER" } : {} });
+var body = (size, weight = 400) => ({ size, fontWeight: weight, lineHeight: Math.round(size * 1.45), letterSpacing: size >= 24 ? tenth(-size * 0.012) : 0 });
+var label = (size) => ({ size, fontWeight: 600, letterSpacing: tenth(size * 0.1), lineHeight: Math.round(size * 1.3) });
+var code = (size, weight = 500) => ({ ...MONO, size, fontWeight: weight, lineHeight: Math.round(size * 1.4) });
+var figure = (size, weight = 700) => ({ size, fontWeight: weight, letterSpacing: tenth(-size * 0.05), lineHeight: Math.round(size * 1), fontFeatures: { tnum: 1 } });
+function ts(k, name, def) {
+  k.textStyle(name, def);
+  return name;
+}
+var DEEP = `struct Params {
+  phase: f32,   // @range 0 31.415927 @default 0
+  grain: f32,   // @range 0 0.2 @default 0.05
+  abyss: vec4f, // @default #03141c
+  ocean: vec4f, // @default #0a3d50
+  kelp: vec4f,  // @default #0d4a52
+}
+
+fn dp_hash(q: vec2<f32>) -> f32 { return fract(sin(dot(q, vec2<f32>(127.1, 311.7))) * 43758.5453); }
+
+fn shade(uv: vec2<f32>, res: vec2<f32>, time: f32) -> vec4<f32> {
+  let asp = res.x / max(res.y, 1.0);
+  let q = vec2<f32>(uv.x * asp, uv.y);
+  let ph = p.phase;
+  let a = 0.5 + 0.5 * sin(q.x * 1.7 + q.y * 2.3 + ph);
+  let b = 0.5 + 0.5 * sin(q.x * -2.1 + q.y * 1.3 - ph + 1.7);
+  let c = 0.5 + 0.5 * sin(length(q - vec2<f32>(0.3 * asp + 0.2 * sin(ph), 0.7)) * 3.1 - ph);
+  var col = p.abyss.rgb;
+  col = mix(col, p.ocean.rgb, clamp(a * b * 1.3, 0.0, 1.0));
+  col = mix(col, p.kelp.rgb, clamp(c * c * 0.75, 0.0, 1.0));
+  let v = length((uv - vec2<f32>(0.5, 0.45)) * vec2<f32>(1.0, 1.2));
+  col = mix(col, p.abyss.rgb, smoothstep(0.35, 0.95, v) * 0.7);
+  let n = (dp_hash(floor(uv * res / 1.5)) - 0.5) * p.grain;
+  return vec4<f32>(col + vec3<f32>(n), 1.0);
+}`;
+function deep(k, sheet, o = {}) {
+  const { width: w, height: h } = k.node(sheet);
+  const id = k.rect(sheet, w, h, k.shader("Deep ocean", { phase: 0, grain: 0, abyss: k.color("abyss"), ocean: k.color("ocean"), kelp: k.color("kelp") }, DEEP), { name: o.name ?? "Deep", absolute: { x: 0, y: 0 } });
+  if (o.duration) k.animateShader(id, "phase", [{ t: 0, v: 0, ease: ease.linear }, { t: o.duration, v: r3(Math.PI * 2 * (o.turns ?? 1)) }]);
+  return id;
+}
+var MESH = `struct Params {
+  phase: f32,    // @range 0 31.415927 @default 0
+  bloom: f32,    // @range 0 1 @default 0
+  grain: f32,    // @range 0 0.2 @default 0.06
+  coral: vec4f,  // @default #ff6b4a
+  apricot: vec4f,// @default #ffb07a
+  lagoon: vec4f, // @default #14a3a0
+  ocean: vec4f,  // @default #0a3d50
+}
+
+fn ms_hash(q: vec2<f32>) -> f32 { return fract(sin(dot(q, vec2<f32>(269.5, 183.3))) * 43758.5453); }
+fn ms_blob(q: vec2<f32>, c: vec2<f32>, r: f32) -> f32 { let d = length(q - c) / r; return exp(-d * d); }
+
+fn shade(uv: vec2<f32>, res: vec2<f32>, time: f32) -> vec4<f32> {
+  let asp = res.x / max(res.y, 1.0);
+  let q = vec2<f32>(uv.x * asp, uv.y);
+  let ph = p.phase;
+  let c1 = vec2<f32>((0.32 + 0.1 * sin(ph)) * asp, 0.55 + 0.08 * cos(ph * 1.0 + 0.4));
+  let c2 = vec2<f32>((0.66 + 0.09 * cos(ph + 1.2)) * asp, 0.42 + 0.1 * sin(ph + 2.0));
+  let c3 = vec2<f32>((0.52 + 0.12 * sin(ph + 3.4)) * asp, 0.7 + 0.06 * sin(ph * 2.0));
+  let c4 = vec2<f32>((0.18 + 0.08 * cos(ph + 4.1)) * asp, 0.32 + 0.07 * cos(ph + 1.0));
+  let s = min(asp, 1.0);
+  let w1 = ms_blob(q, c1, 0.34 * s + 0.12);
+  let w2 = ms_blob(q, c2, 0.3 * s + 0.12);
+  let w3 = ms_blob(q, c3, 0.26 * s + 0.1);
+  let w4 = ms_blob(q, c4, 0.28 * s + 0.1);
+  var col = p.ocean.rgb;
+  let tot = w1 + w2 + w3 + w4 + 0.0001;
+  col = (p.coral.rgb * w1 + p.lagoon.rgb * w2 + p.apricot.rgb * w3 + p.ocean.rgb * w4) / tot;
+  let e = smoothstep(0.0, 0.32, uv.x) * smoothstep(0.0, 0.32, 1.0 - uv.x) * smoothstep(0.0, 0.3, uv.y) * smoothstep(0.0, 0.3, 1.0 - uv.y);
+  let a = clamp(max(max(w1, w2), max(w3, w4)) * 1.15, 0.0, 1.0) * e * (0.78 + 0.22 * p.bloom);
+  let n = (ms_hash(floor(uv * res / 1.5)) - 0.5) * p.grain;
+  return vec4<f32>(col + vec3<f32>(n), a);
+}`;
+function mesh(k, parent, o) {
+  const id = k.rect(parent, Math.round(o.w), Math.round(o.h), k.shader("Sunrise mesh", { phase: o.phase ?? 0, bloom: o.bloom ?? 0, grain: 0, coral: k.color("coral"), apricot: k.color("apricot"), lagoon: k.color("lagoon"), ocean: k.color("ocean") }, MESH), { name: o.name ?? "Mesh", absolute: { x: Math.round(o.x), y: Math.round(o.y) } });
+  if (o.duration) {
+    const p0 = o.phase ?? 0;
+    k.animateShader(id, "phase", [{ t: 0, v: p0, ease: ease.linear }, { t: o.duration, v: r3(p0 + Math.PI * 2 * (o.turns ?? 1)) }]);
+  }
+  return id;
+}
+function bloomAt(k, id, at, rise = 700, fall = 2600) {
+  k.animateShader(id, "bloom", [{ t: at, v: 0, ease: ease.out("cubic") }, { t: at + rise, v: 1, ease: ease.inOut("sine") }, { t: at + rise + fall, v: 0 }]);
+}
+var GRAIN = `struct Params {
+  amount: f32, // @range 0 0.3 @default 0.07
+  size: f32,   // @range 1 4 @default 1.5
+}
+
+fn gr_hash(q: vec2<f32>) -> f32 { return fract(sin(dot(q, vec2<f32>(12.9898, 78.233))) * 43758.5453); }
+
+fn shade(uv: vec2<f32>, res: vec2<f32>, time: f32) -> vec4<f32> {
+  let n = gr_hash(floor(uv * res / p.size));
+  let v = select(0.0, 1.0, n > 0.5);
+  return vec4<f32>(vec3<f32>(v), abs(n - 0.5) * 2.0 * p.amount);
+}`;
+function grainOver(k, sheet, amount = 0.06) {
+  const { width: w, height: h } = k.node(sheet);
+  return k.rect(sheet, w, h, k.shader("Film grain", { amount, size: 1.5 }, GRAIN), { name: "Grain", absolute: { x: 0, y: 0 } });
+}
+function fitFull(k, sheet, names = ["Deep", "Grain"]) {
+  const { width: w, height: h } = k.node(sheet);
+  for (const n of names) for (const id of k.named(sheet, n)) k.patch(id, { x: 0, y: 0, width: w, height: h });
+}
+var longShadow = (k, a = 0.55, y = 48, blur = 90) => ({ type: "DROP_SHADOW", color: k.color("shade", a), offset: { x: 0, y }, blur, spread: 0, visible: true });
+var rimLight = (k, a = 0.14) => [
+  { type: "INNER_SHADOW", color: k.color("rim", a), offset: { x: 0, y: 0 }, blur: 0, spread: 1, visible: true },
+  { type: "INNER_SHADOW", color: k.color("rim", a * 2.4), offset: { x: 0, y: 1.5 }, blur: 0, spread: 0, visible: true }
+];
+var linear = (stops, from, to) => ({ type: "GRADIENT_LINEAR", gradientStops: stops.map(([position, color]) => ({ position, color })), gradientHandlePositions: [from, to, { x: from.x + (to.y - from.y), y: from.y - (to.x - from.x) }], opacity: 1, visible: true });
+function specular(k, plate, w, h, sweeps, o = {}) {
+  const bw = o.width ?? Math.max(140, Math.round(w * 0.24)), d = o.duration ?? 1500;
+  const paint = linear([[0, k.color("rim", 0)], [0.5, k.color("rim", o.alpha ?? 0.16)], [1, k.color("rim", 0)]], { x: 0, y: 0.5 }, { x: 1, y: 0.5 });
+  const hh = Math.round(h * 1.6), x0 = -bw * 2;
+  const id = k.rect(plate, bw, hh, [paint], { name: "Specular", absolute: { x: x0, y: Math.round(-h * 0.3) } });
+  k.patch(id, { rotation: 20 });
+  if (sweeps.length) {
+    const keys = [];
+    for (const t of sweeps) keys.push({ t, v: 0, ease: ease.inOut("sine") }, { t: t + d, v: w + bw * 3, ease: ease.hold }, { t: t + d + 1, v: 0, ease: ease.hold });
+    keys[keys.length - 1] = { t: keys[keys.length - 1].t, v: 0 };
+    k.animate(id, "translateX", keys);
+  }
+  return id;
+}
+var WIN = { w: 960, h: 640 };
+function spoolWindow(k, parent, o) {
+  const s = o.styles;
+  const W = o.width ?? WIN.w, f = W / WIN.w, PWD = W - 642;
+  const win = k.stack(parent, { width: W, height: WIN.h, fill: "plate", radius: 26, clip: true, name: o.name ?? "Window", effects: rimLight(k), ...o.absolute ? { absolute: o.absolute } : {} });
+  const top = k.stack(win, { direction: "HORIZONTAL", align: "CENTER", justify: "SPACE_BETWEEN", height: 64, padding: { top: 0, right: 22, bottom: 0, left: 24 }, name: "Title bar" });
+  const left = k.stack(top, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 18, name: "Title left" });
+  const lights = k.stack(left, { direction: "HORIZONTAL", width: "HUG", gap: 9, name: "Lights" });
+  for (const role of ["coral", "apricot", "lagoon"]) k.ellipse(lights, 14, role, { name: "Light" });
+  k.text(left, `${SPOOL.template}.json`, { style: s.title, color: "onPlate", autoWidth: true, name: "Window title" });
+  const chip = k.stack(top, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 8, radius: 999, fill: k.tint("rim", 0.08), padding: { top: 7, right: 14, bottom: 7, left: 12 }, name: "Region chip" });
+  k.ellipse(chip, 10, "primary", { name: "Region dot" });
+  k.text(chip, SPOOL.region, { style: s.small, color: "onPlate", autoWidth: true, name: "Region" });
+  k.rect(win, "FILL", 1, k.tint("rim", 0.1), { name: "Title rule" });
+  const mid = k.stack(win, { direction: "HORIZONTAL", gap: 22, padding: { top: 22, right: 24, bottom: 0, left: 24 }, name: "Middle" });
+  const pv = k.stack(mid, { width: 548, gap: 12, name: "Preview column" });
+  const PW = 548, PH = 308;
+  const preview = k.stack(pv, { width: PW, height: PH, name: "Preview", fill: "ocean", clip: true, radius: 16 });
+  mesh(k, preview, { x: 0, y: 0, w: PW, h: PH, duration: o.duration, phase: 1.2, name: "Preview light" });
+  const route = { closed: false, points: [pt3(60, 236), pt3(120, 190), pt3(176, 214), pt3(236, 150), pt3(300, 168), pt3(352, 104), pt3(420, 126), pt3(488, 74)].map((p, i, a) => {
+    const prev = a[i - 1] ?? p, next = a[i + 1] ?? p;
+    return { ...p, ...i > 0 ? { handleIn: pt3(p.x - (next.x - prev.x) / 6, p.y - (next.y - prev.y) / 6) } : {}, ...i < a.length - 1 ? { handleOut: pt3(p.x + (next.x - prev.x) / 6, p.y + (next.y - prev.y) / 6) } : {} };
+  }) };
+  k.vector(preview, PW, PH, [route], [], { name: "Route", absolute: { x: 0, y: 0 }, stroke: { color: "rim", width: 6, cap: "ROUND", join: "ROUND" } });
+  k.ellipse(preview, 22, "rim", { name: "Route end", absolute: { x: 477, y: 63 }, stroke: { color: "coral", width: 5, align: "INSIDE" } });
+  const tag = k.stack(preview, { width: "HUG", gap: 2, radius: 14, fill: "plate", padding: { top: 12, right: 18, bottom: 12, left: 18 }, name: "Preview tag", absolute: { x: 20, y: PH - 98 } });
+  k.text(tag, "Ana \xB7 week 39", { style: s.small, color: "plateMuted", autoWidth: true, name: "Preview who" });
+  k.text(tag, "42.6 km", { style: s.big, color: "onPlate", autoWidth: true, name: "Preview distance" });
+  const scrubRow = k.stack(pv, { direction: "HORIZONTAL", align: "CENTER", gap: 14, name: "Scrub row" });
+  const scrub = k.stack(scrubRow, { width: 380, height: 8, name: "Scrub", fill: k.tint("rim", 0.12), radius: 4 });
+  const played = k.rect(scrub, 380, 8, "primary", { name: "Played", radius: 4, absolute: { x: 0, y: 0 } });
+  k.patch(played, { anchorX: 0 });
+  k.text(scrubRow, "0:12 / 1:00", { style: s.small, color: "plateMuted", autoWidth: true, name: "Scrub time" });
+  const panel = k.stack(mid, { width: "FILL", gap: 10, name: "Render panel" });
+  k.text(panel, "RENDERED IN", { style: s.label, color: "plateMuted", name: "Render label" });
+  const fig = k.text(panel, `${SPOOL.render} s`, { style: s.figure, color: "onPlate", width: Math.min(300, PWD), name: "Render figure" });
+  k.text(panel, SPOOL.clip, { style: s.small, color: "plateMuted", name: "Render clip" });
+  const track = k.stack(panel, { width: PWD, height: 10, name: "Progress", fill: k.tint("rim", 0.12), radius: 5 });
+  const bar = k.rect(track, PWD, 10, "primary", { name: "Progress bar", radius: 5, absolute: { x: 0, y: 0 } });
+  k.patch(bar, { anchorX: 0 });
+  const status = k.text(panel, "Done \xB7 MP4 ready", { style: s.small, color: "onPlate", name: "Render status" });
+  const queue = k.stack(panel, { gap: 0, name: "Queue" });
+  const jobs = [];
+  JOBS.slice(0, o.jobs ?? 3).forEach((j) => {
+    k.rect(queue, "FILL", 1, k.tint("rim", 0.09), { name: "Job rule" });
+    const r = k.stack(queue, { direction: "HORIZONTAL", align: "CENTER", justify: "SPACE_BETWEEN", height: 44, name: "Job" });
+    k.text(r, j.file.replace(".mp4", ""), { style: s.small, color: "onPlate", autoWidth: true, name: "Job file" });
+    k.text(r, j.time, { style: s.small, color: "onPlate", autoWidth: true, name: "Job time" });
+    jobs.push(r);
+  });
+  const tl = k.frame(win, { x: 0, y: 0, width: W, height: 150 }, { name: "Timeline" });
+  k.patch(tl, { layoutPositioning: "ABSOLUTE", x: 0, y: WIN.h - 150 });
+  k.rect(tl, W, 150, k.tint("shade", 0.35), { name: "Timeline ground", absolute: { x: 0, y: 0 } });
+  k.rect(tl, W, 1, k.tint("rim", 0.1), { name: "Timeline rule", absolute: { x: 0, y: 0 } });
+  const CLIPS = [
+    [0, 24, 250, "clipA"],
+    [0, 286, 210, "clipC"],
+    [0, 508, 300, "clipA"],
+    [0, 820, 116, "clipC"],
+    [1, 24, 180, "clipB"],
+    [1, 216, 360, "clipB"],
+    [1, 588, 220, "clipB"],
+    [2, 24, 912, "kelp"]
+  ];
+  const clips = [];
+  for (const [row, x, w, role] of CLIPS) clips.push(k.rect(tl, Math.round(w * f), 28, k.tint(role, row === 2 ? 1 : 0.85), { name: "Clip", radius: 7, absolute: { x: Math.round(x * f), y: 22 + row * 40 } }));
+  const wave = [];
+  for (let i = 0; i < Math.floor((W - 60) / 10); i++) {
+    const x = 30 + i * 10, hh = 4 + Math.abs(Math.sin(i * 0.7) * 9 + Math.sin(i * 0.23) * 6);
+    wave.push({ closed: true, points: [pt3(x, 14 - hh / 2), pt3(x + 4, 14 - hh / 2), pt3(x + 4, 14 + hh / 2), pt3(x, 14 + hh / 2)] });
+  }
+  k.vector(tl, W, 28, wave, k.tint("lagoon", 0.9), { name: "Waveform", absolute: { x: 0, y: 102 } });
+  const playhead = k.stack(tl, { width: 4, height: 150, fill: "primary", radius: 2, name: "Playhead", absolute: { x: 300, y: 0 } });
+  return { win, preview, playhead, bar, figure: fig, status, jobs, clips, scrub: played };
+}
+function winStyles(k) {
+  return {
+    title: ts(k, "Win title 22", code(22)),
+    small: ts(k, "Win small 20", code(20)),
+    big: ts(k, "Win big 34", display(34)),
+    label: ts(k, "Win label 18", label(18)),
+    figure: ts(k, "Win figure 96", figure(96))
+  };
+}
+function renderRun(k, w, at, run, o = {}) {
+  const end = at + run;
+  k.animate(w.playhead, "translateX", [{ t: at, v: -276, ease: ease.inOut("sine") }, { t: end, v: 600, ...o.loopEnd ? { ease: ease.inOut("sine") } : {} }, ...o.loopEnd ? [{ t: o.loopEnd, v: -276 }] : []]);
+  for (const id of [w.bar, w.scrub]) k.animate(id, "scaleX", [{ t: at, v: 0.02, ease: ease.inOut("cubic") }, { t: end, v: 1, ...o.loopEnd ? { ease: ease.inOut("sine") } : {} }, ...o.loopEnd ? [{ t: o.loopEnd, v: 0.02 }] : []]);
+  k.animate(w.status, "text.content", [{ t: 0, v: "Rendering\u2026", ease: ease.hold }, { t: end, v: "Done \xB7 MP4 ready", ...o.loopEnd ? { ease: ease.hold } : {} }, ...o.loopEnd ? [{ t: o.loopEnd - 300, v: "Rendering\u2026" }] : []]);
+}
+function tilted(k, parent, o) {
+  const scene = k.group(parent, { x: Math.round(o.x), y: Math.round(o.y), width: Math.round(o.w), height: Math.round(o.h) }, { name: o.name ?? "Scene", absolute: true });
+  k.scene3d(scene, { camera: { focalLength: r3(36 * (o.perspective ?? 1800) / Math.max(1, o.w)) } });
+  const s = o.scale;
+  const WW = o.width ?? WIN.w, HH = o.height ?? WIN.h;
+  const gx = Math.round((o.w - WW) / 2), gy = Math.round((o.h - HH) / 2);
+  const fx = o.safe ? Math.round(o.safe.x - o.x + (o.safe.w - WW) / 2) : gx, fy = o.safe ? Math.round(o.safe.y - o.y + (o.safe.h - HH) / 2) : gy;
+  const rig = k.group(scene, { x: fx, y: fy, width: WW, height: HH }, { name: "Rig" });
+  if (fx !== gx || fy !== gy) k.patch(rig, { translateX: gx - fx, translateY: gy - fy });
+  k.patch(rig, { rotateY: o.rotateY ?? -24, rotateX: o.rotateX ?? 12, scaleX: s, scaleY: s });
+  const planes = [];
+  if (o.planes !== false) {
+    const codePlane = k.stack(rig, { width: 520, height: 330, fill: "plate", radius: 22, padding: 30, gap: 16, clip: true, name: "Code plane", effects: rimLight(k, 0.1) });
+    k.patch(codePlane, { x: -240, y: -150, z: -260 });
+    for (const [indent, segs] of [[0, [["primary", 150], ["plateMuted", 120]]], [0, [["plateMuted", 20]]], [1, [["clipB", 130], ["clipC", 170]]], [1, [["clipB", 80], ["clipC", 110], ["clipB", 60]]], [2, [["clipB", 60], ["clipA", 70]]], [1, [["clipB", 100], ["clipC", 70]]], [0, [["plateMuted", 20]]]]) {
+      const ln = k.stack(codePlane, { direction: "HORIZONTAL", gap: 10, padding: { top: 0, right: 0, bottom: 0, left: indent * 32 }, name: "Code line" });
+      for (const [role, w] of segs) k.rect(ln, w, 14, k.tint(role, 0.8), { radius: 7, name: "Code token" });
+    }
+    const queuePlane = k.stack(rig, { width: 400, height: 250, fill: "plate", radius: 22, padding: 28, gap: 18, clip: true, name: "Queue plane", effects: rimLight(k, 0.1) });
+    k.patch(queuePlane, { x: WW - 40, y: 330, z: -220 });
+    k.rect(queuePlane, 120, 12, k.tint("plateMuted", 0.7), { radius: 6, name: "Plane label" });
+    const bars = k.stack(queuePlane, { direction: "HORIZONTAL", gap: 10, align: "MAX", height: 140, name: "Plane bars" });
+    for (const v of [52, 70, 62, 92, 84, 124, 110]) k.rect(bars, 36, v, k.tint("lagoon", 0.9), { name: "Plane bar", radius: 6 });
+    planes.push(codePlane, queuePlane);
+  }
+  const shadow = k.rect(rig, WW, HH, "shade", { radius: 30, name: "Cast shadow", opacity: 0.6, effects: [{ type: "LAYER_BLUR", radius: 60, visible: true }] });
+  k.patch(shadow, { z: -120, x: 40, y: 70 });
+  let reflection = "";
+  if (o.reflection !== false) {
+    const paint = linear([[0, k.color("lagoon", 0.28)], [0.35, k.color("coral", 0.1)], [1, k.color("ocean", 0)]], { x: 0.5, y: 0 }, { x: 0.5, y: 1 });
+    reflection = k.rect(rig, WW, Math.round(HH * 0.42), [paint], { radius: 26, name: "Reflection", opacity: 0.9 });
+    k.patch(reflection, { x: 0, y: HH + 18 });
+  }
+  if (o.make) {
+    const id = o.make(rig);
+    return { scene, rig, win: { win: id }, shadow, reflection, planes, sweep: specular(k, id, WW, HH, o.sweeps ?? []) };
+  }
+  const win = spoolWindow(k, rig, { styles: o.styles, width: WW, jobs: o.jobs, duration: o.duration, absolute: { x: 0, y: 0 } });
+  const sweep = specular(k, win.win, WW, HH, o.sweeps ?? []);
+  return { scene, rig, win, shadow, reflection, planes, sweep };
+}
+function orbitCam(k, scene, o) {
+  const io = ease.inOut("sine");
+  k.animate(scene, "scene3d.camera.orbit", [{ t: o.at, v: o.from, ease: io }, { t: o.until, v: o.to, ...o.back ? { ease: io } : {} }, ...o.back ? [{ t: o.back, v: o.from }] : []]);
+  if (o.z0 !== void 0 && o.z1 !== void 0) k.animate(scene, "scene3d.camera.z", [{ t: o.at, v: o.z0, ease: io }, { t: o.until, v: o.z1, ...o.back ? { ease: io } : {} }, ...o.back ? [{ t: o.back, v: o.z0 }] : []]);
+}
+function parallax(k, t, loop, amp = 18) {
+  t.planes.forEach((id, i) => {
+    k.behave(id, "translateY", [{ kind: "sine", amp: r3(amp * (i ? -1 : 1)), freq: r3(1e3 / loop), phase: r3(i * 0.3) }]);
+  });
+}
+function lockup(k, parent, o) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: Math.round(o.size * 0.36), name: o.name ?? "Lockup", ...o.absolute ? { absolute: o.absolute } : {} });
+  const tile = k.stack(row, { width: "HUG", fill: "primary", radius: Math.round(o.size * 0.3), padding: Math.round(o.size * 0.2), name: "Logo tile" });
+  k.logo(tile, Math.round(o.size * 0.6), Math.round(o.size * 0.6));
+  k.text(row, "{{brand.name}}", { style: o.style, color: "onNight", autoWidth: true, name: "Brand name" });
+  return row;
+}
+function button(k, name, o) {
+  const [v, h] = o.pad ?? [20, 34];
+  k.component(name, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 999, align: "CENTER", padding: { top: v, right: h, bottom: v, left: h }, props: { Label: o.label }, effects: [longShadow(k, 0.5, 18, 40)] }, (id) => {
+    k.propText(id, "Label", { style: o.style, color: "onPrimary", autoWidth: true });
+  });
+}
+function plateChip(k, parent, words, o) {
+  const [v, h] = o.pad ?? [10, 18];
+  const c = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: Math.round(h * 0.6), radius: 999, fill: "plate", padding: { top: v, right: h, bottom: v, left: h }, name: o.name ?? "Chip", effects: rimLight(k, 0.12), ...o.absolute ? { absolute: o.absolute } : {} });
+  if (o.dot) k.ellipse(c, Math.round(v * 1.1), o.dot, { name: "Chip dot" });
+  k.text(c, words, { style: o.style, color: o.ink ?? "onPlate", autoWidth: true, name: `${o.name ?? "Chip"} words` });
+  return c;
+}
+var MONTHLY = [310, 420, 560, 690, 840, 1020, 1240, 1510, 1800];
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"];
+function monthlyLine(w, h, top = 2e3) {
+  const pts = MONTHLY.map((v, i) => ({ x: i / (MONTHLY.length - 1) * w, y: h - v / top * h }));
+  return { closed: false, points: pts.map((p, i) => {
+    const prev = pts[i - 1] ?? p, next = pts[i + 1] ?? p, dx = (next.x - prev.x) / 6, dy = (next.y - prev.y) / 6;
+    return { ...pt3(p.x, p.y), ...i > 0 ? { handleIn: pt3(p.x - dx, p.y - dy) } : {}, ...i < pts.length - 1 ? { handleOut: pt3(p.x + dx, p.y + dy) } : {} };
+  }) };
+}
+function monthlyArea(w, h, top = 2e3) {
+  const l = monthlyLine(w, h, top);
+  return { closed: true, points: [...l.points, pt3(w, h), pt3(0, h)] };
+}
+var areaPaint = (k) => [linear([[0, k.color("lagoon", 0.45)], [1, k.color("lagoon", 0)]], { x: 0.5, y: 0 }, { x: 0.5, y: 1 })];
+function sitePill(k, o) {
+  const [v, h] = o.pad ?? [14, 22];
+  k.component("Site pill", { direction: "HORIZONTAL", width: "HUG", radius: 999, align: "CENTER", fill: "plate", padding: { top: v, right: h, bottom: v, left: h }, effects: rimLight(k, 0.14), props: { Label: o.label ?? SPOOL.site } }, (id) => {
+    k.propText(id, "Label", { style: o.style, color: "onPlate", autoWidth: true });
+  });
+}
+function videoFoot(k, sheet, y, o = {}) {
+  const n = o.n ?? 6, w = o.w ?? 160, gap = o.gap ?? 28, h = Math.round(w * 16 / 9);
+  const x0 = Math.round((k.node(sheet).width - (n * w + (n - 1) * gap)) / 2);
+  const row = k.frame(sheet, { x: 0, y, width: k.node(sheet).width, height: h }, { name: "Video foot" });
+  k.patch(row, { opacity: o.opacity ?? 0.6 });
+  for (let i = 0; i < n; i++) {
+    const tile = k.stack(row, { width: w, height: h, radius: 16, clip: true, fill: [k.gradient({ from: ["lagoon", "coral", "apricot"][i % 3], to: "ocean", angle: 64 + i * 14 })], name: "Foot video", absolute: { x: x0 + i * (w + gap), y: 0 } });
+    k.vector(tile, w, h, [{ closed: false, points: [pt3(w * 0.16, h * 0.74), pt3(w * 0.4, h * 0.52), pt3(w * 0.6, h * 0.6), pt3(w * 0.86, h * 0.28)] }], [], { name: "Foot route", absolute: { x: 0, y: 0 }, stroke: { color: "rim", width: 3, cap: "ROUND", join: "ROUND" } });
+  }
+  return row;
+}
+
+export {
+  SPOOL,
+  JOBS,
+  gradientBrand,
+  display,
+  body,
+  label,
+  code,
+  figure,
+  ts,
+  DEEP,
+  deep,
+  MESH,
+  mesh,
+  bloomAt,
+  GRAIN,
+  grainOver,
+  fitFull,
+  longShadow,
+  rimLight,
+  specular,
+  WIN,
+  spoolWindow,
+  winStyles,
+  renderRun,
+  tilted,
+  orbitCam,
+  parallax,
+  lockup,
+  button,
+  plateChip,
+  MONTHLY,
+  MONTHS,
+  monthlyLine,
+  monthlyArea,
+  areaPaint,
+  sitePill,
+  videoFoot
+};

package/dist/chunks/chunk-LLIF6562.js

@@ -0,0 +1,163 @@
+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,
+  extend,
+  fitGrid,
+  grot,
+  lockup,
+  rule,
+  swissBrand,
+  swissGrid
+} from "./chunk-GFKWCH3X.js";
+import {
+  postVariants
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/style-swiss-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Swiss SaaS milestone post";
+var DURATION = 7e3;
+var OUT = 5800;
+var GRID = { cols: 6, margin: 72, gutter: 24, row: 108, top: 72 };
+var MONTHS = Array.from({ length: 21 }, (_, i) => Math.round(120 + 880 * (i / 20) ** 1.7 + i * 7 % 5 * 18));
+var MAX = 1100;
+var CHART = { w: 936, h: 300 };
+var LEAVE = ["Brand row", "Kicker", "Figure", "Axis", "Fact", "Foot"];
+var cues = [
+  { layer: "Brand row", preset: "slide-in", at: 150, params: { direction: "down", duration: 400 } },
+  { layer: "Kicker", preset: "slide-in", at: 300, params: { direction: "left", duration: 400 } },
+  { layer: "Figure", preset: "slide-in", at: 400, params: { direction: "left", duration: 500 } },
+  { layer: "Axis", preset: "fade-in", at: 1e3, params: { duration: 300 } },
+  { layer: "Fact", preset: "slide-in", at: 3300, stagger: { delay: 150, order: "selection" }, params: { direction: "up", duration: 420 } },
+  { layer: "Foot", preset: "slide-in", at: 3800, params: { direction: "left", duration: 420 } },
+  { layer: LEAVE, preset: "slide-out", at: OUT, stagger: { delay: 60, order: "selection" }, params: { direction: "left", duration: 380 } }
+];
+var counts = [
+  { layer: "Figure", at: 500, duration: 2700, ease: ease.named("cubic", "in"), counter: { from: 0, to: 1e7 } }
+];
+function bars(w, h) {
+  const gap = Math.round(w / 90), bw = (w - gap * (MONTHS.length - 1)) / MONTHS.length;
+  const r = (v) => Math.round(v * 10) / 10;
+  return {
+    boxes: MONTHS.map((v, i) => ({ x: r(i * (bw + gap)), w: r(bw), h: r(v / MAX * h) })),
+    line: { closed: false, points: MONTHS.map((v, i) => ({ x: r(i * (bw + gap) + bw / 2), y: r(h - v / MAX * h) })) }
+  };
+}
+var style_swiss_milestone_default = defineTemplate({
+  id: "motion-saas-style-swiss-milestone",
+  meta: {
+    name: NAME,
+    description: "An animated milestone post in the Swiss typographic style: a giant flush-left figure counts to 10,000,000 shipments while twenty-one months rise as black bars from a baseline, the latest in red, and a line traces their tops. Two facts sit on the grid, then everything wipes off and sinks back to the bare grid, so it loops. Seven seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "swiss", "international typographic style", "grid", "minimal", "b2b", "logistics", "milestone", "metric", "counter", "chart", "stats", "post", "loop"],
+    platforms: ["instagram", "x", "linkedin", "threads", "facebook"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "announcement", "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;
+    swissBrand(k, {});
+    grot(k, "Brand 32", 32, { weight: 700, lead: 1.1, spacing: -0.02 });
+    grot(k, "Label 24", 24, { weight: 600, lead: 1.3 });
+    grot(k, "Kicker 30", 30, { weight: 600, lead: 1.2, spacing: -0.01 });
+    grot(k, "Figure 170", 170, { weight: 700, lead: 0.9, spacing: -0.065 });
+    grot(k, "Figure 148", 148, { weight: 700, lead: 0.9, spacing: -0.065 });
+    grot(k, "Fact 44", 44, { weight: 700, lead: 1, spacing: -0.03 });
+    grot(k, "Small 22", 22, { weight: 500, lead: 1.3 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 26, 72, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    swissGrid(k, sheet, GRID);
+    const top = k.stack(sheet, { gap: 14, name: "Top" });
+    const bar = k.stack(top, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, bar, { size: 32, style: "Brand 32" });
+    k.text(bar, "Milestone, October 2026", { style: "Label 24", color: "text", autoWidth: true, name: "Date" });
+    const topRule = rule(k, top, "FILL", { weight: 3, name: "Top rule" });
+    const head = k.stack(sheet, { gap: 8, name: "Head" });
+    k.text(head, "Shipments forecast by Kontor", { style: "Kicker 30", color: "text", name: "Kicker" });
+    k.text(head, KONTOR.shipments, { style: "Figure 170", color: "text", width: CHART.w, name: "Figure" });
+    const chart = k.stack(sheet, { gap: 10, name: "Chart" });
+    const area = k.stack(chart, { height: CHART.h, name: "Chart area" });
+    const b = bars(CHART.w, CHART.h);
+    const barIds = b.boxes.map((x, i) => k.rect(area, x.w, x.h, i === b.boxes.length - 1 ? "primary" : "ink", { name: "Month bar", absolute: { x: x.x, y: CHART.h - x.h } }));
+    const trend = k.vector(area, CHART.w, CHART.h, [b.line], [], { name: "Trend", absolute: { x: 0, y: -18 }, stroke: { color: "primary", width: 3, cap: "NONE", join: "MITER" } });
+    const base = rule(k, chart, "FILL", { weight: 3, name: "Chart base" });
+    const axis = k.stack(chart, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Axis" });
+    for (const a of ["January 2025", "September 2026"]) k.text(axis, a, { style: "Small 22", color: "text", autoWidth: true, name: "Axis label" });
+    const facts = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, name: "Facts" });
+    k.component("Swiss fact", { gap: 6, description: "One fact on the grid: the figure over its label.", props: { Value: "1,240", Label: "lanes watched every hour" } }, (id) => {
+      k.propText(id, "Value", { style: "Fact 44", color: "text", name: "Fact figure" });
+      k.propText(id, "Label", { style: "Small 22", color: "text", name: "Fact label" });
+    });
+    for (const [fig, label] of [["1,240", "lanes watched every hour"], [`${KONTOR.after}%`, "shipments on time, last quarter"]]) {
+      const c = k.instance(facts, "Swiss fact", { Value: fig, Label: label }, { name: "Fact" });
+      k.patch(c, { layoutSizingHorizontal: "FILL" });
+    }
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Foot" });
+    k.text(foot, "Thank you, 412 shippers.", { style: "Label 24", color: "text", autoWidth: true, name: "Thanks" });
+    k.text(foot, "{{brand.site}}", { style: "Label 24", color: "text", autoWidth: true, name: "Site" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    extend(k, topRule, 0, 600);
+    extend(k, base, 600, 500);
+    for (const id of [topRule, base]) k.animate(id, "scaleX", [{ t: OUT + 500, v: 1, ease: ease.named("expo", "in") }, { t: OUT + 1e3, v: 0 }]);
+    barIds.forEach((id, i) => {
+      k.patch(id, { anchorY: 1 });
+      k.animate(id, "scaleY", [{ t: 900 + i * 90, v: 0, ease: ease.out("expo") }, { t: 900 + i * 90 + 500, v: 1, ease: ease.hold }, { t: OUT + 200 + i * 20, v: 1, ease: ease.named("expo", "in") }, { t: OUT + 600 + i * 20, v: 0 }]);
+    });
+    k.animate(trend, "trim.end", [{ t: 1e3, v: 0, ease: ease.linear }, { t: 3200, v: 1, ease: ease.hold }, { t: OUT + 500, v: 0 }]);
+    k.animate(trend, "opacity", [{ t: OUT + 100, v: 1, ease: ease.linear }, { t: OUT + 400, v: 0, ease: ease.hold }, { t: OUT + 600, v: 1 }]);
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      portrait: (kit, id) => {
+        fitGrid(kit, id, GRID);
+        redrawBars(kit, id, CHART.w, 420);
+      },
+      vertical: (kit, id) => {
+        fitGrid(kit, id, { ...GRID, margin: 140, top: 250 });
+        kit.patch(id, { primaryAxisAlignItems: "MIN", itemSpacing: 40 });
+        for (const n of kit.named(id, "Figure")) kit.patch(n, { width: 800 });
+        kit.restyle(kit.named(id, "Figure")[0], "Figure 148");
+        redrawBars(kit, id, 800, 540);
+        kit.rect(id, 1080, 400, "primary", { name: "Field", absolute: { x: 0, y: 1520 } });
+      }
+    }));
+    return k.finish();
+  }
+});
+function redrawBars(k, root, w, h) {
+  const b = bars(w, h);
+  for (const a of k.named(root, "Chart area")) k.patch(a, { height: h });
+  k.named(root, "Month bar").forEach((id, i) => {
+    const x = b.boxes[i];
+    k.patch(id, { x: x.x, y: h - x.h, width: x.w, height: x.h });
+  });
+  for (const id of k.named(root, "Trend")) k.patch(id, { width: w, height: h, paths: [b.line] });
+}
+
+export {
+  style_swiss_milestone_default
+};