@popcraft/kit 0.29.0 → 0.30.0

package/dist/chunks/chunk-Z32XURQ3.js

@@ -0,0 +1,479 @@
+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 {
+  appear,
+  drawOn
+} from "./chunk-WV6ZTKE7.js";
+import {
+  noise,
+  shadow
+} from "./chunk-M6VTXO6F.js";
+import {
+  line,
+  pt
+} from "./chunk-6RCDZU4R.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/transit-map-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var ITALIC = { fontFamily: "Source Serif 4", fontStyle: "italic" };
+var LINES = [
+  { key: "red", num: "1", name: "Revenue", role: "red", on: "lume", runs: "Checkout to Reports", pts: [[0.5, 1.5], [2.5, 1.5], [5, 4], [7.5, 4], [9.5, 2]] },
+  { key: "blue", num: "2", name: "Customer", role: "blue", on: "lume", runs: "Forms to Chat", pts: [[5, 0.5], [5, 5], [6.5, 6.5], [9.5, 6.5]] },
+  { key: "green", num: "3", name: "Ops", role: "green", on: "lume", runs: "Calendar to On-call", pts: [[0.5, 6], [3, 6], [7, 2], [7, 0.5]] },
+  { key: "yellow", num: "4", name: "Product", role: "yellow", on: "shade", runs: "Sign-ups to Docs", pts: [[2, 8.2], [5.8, 8.2], [8.75, 5.25], [8.75, 0.5]] }
+];
+var STOPS = [
+  { at: [0.5, 1.5], name: "Checkout", side: "SL", line: 0, end: true },
+  { at: [2, 1.5], name: "Invoices", side: "N", line: 0 },
+  { at: [3.5, 2.5], name: "Ledger", side: "E", line: 0 },
+  { at: [7, 4], name: "Metrics", side: "N", line: 0 },
+  { at: [9.5, 2], name: "Reports", side: "N", line: 0, end: true },
+  { at: [5, 0.5], name: "Forms", side: "E", line: 1, end: true },
+  { at: [5, 2.2], name: "Inbox", side: "E", line: 1 },
+  { at: [5.75, 5.75], name: "Helpdesk", side: "W", line: 1 },
+  { at: [9.5, 6.5], name: "Chat", side: "N", line: 1, end: true },
+  { at: [0.5, 6], name: "Calendar", side: "SL", line: 2, end: true },
+  { at: [2, 6], name: "Tasks", side: "N", line: 2 },
+  { at: [6, 3], name: "Alerts", side: "E", line: 2 },
+  { at: [7, 0.5], name: "On-call", side: "E", line: 2, end: true },
+  { at: [2, 8.2], name: "Sign-ups", side: "N", line: 3, end: true },
+  { at: [4, 8.2], name: "Database", side: "N", line: 3 },
+  { at: [8.75, 4.4], name: "Flags", side: "E", line: 3 },
+  { at: [8.75, 0.5], name: "Docs", side: "E", line: 3, end: true }
+];
+var HUBS = [
+  { at: [5, 4], name: "Warehouse", side: "SE" },
+  { at: [8.75, 2.75], name: "Charts", side: "W" },
+  { at: [7.5, 6.5], name: "CRM", side: "NW" }
+];
+var GRID = { cols: 10, rows: 8.9 };
+function metroBrand(k, fields = {}) {
+  k.brand(
+    {
+      paper: "#F3EEE1",
+      text: "#141B3C",
+      onPaper: "#3B415C",
+      primary: "#D9261C",
+      onPrimary: "#FFFFFF",
+      card: "#10141D",
+      onCard: "#FFC233"
+    },
+    { name: "Junction", site: "junction.example", ...fields }
+  );
+  k.palette({ red: "#D9261C", blue: "#0B57B5", green: "#0B8246", yellow: "#F4B400", shade: "#05070D", lume: "#FFFFFF" });
+}
+function dashed(k, parent, w, h, from, to, role, o) {
+  return k.vector(parent, w, h, [line(from[0], from[1], to[0], to[1])], [], { name: o.name, stroke: { color: role, width: o.width, dash: [o.on, o.off] }, ...o.opacity !== void 0 ? { opacity: o.opacity } : {}, ...o.absolute ? { absolute: o.absolute } : {} });
+}
+function routed(pts, r) {
+  const out = [];
+  pts.forEach((p, i) => {
+    if (i === 0 || i === pts.length - 1) {
+      out.push(pt(p[0], p[1]));
+      return;
+    }
+    const a = pts[i - 1], b = pts[i + 1];
+    const l1 = Math.hypot(p[0] - a[0], p[1] - a[1]), l2 = Math.hypot(b[0] - p[0], b[1] - p[1]);
+    const d1 = [(p[0] - a[0]) / l1, (p[1] - a[1]) / l1], d2 = [(b[0] - p[0]) / l2, (b[1] - p[1]) / l2];
+    const rr = Math.min(r, l1 / 2, l2 / 2), h = rr * 0.6;
+    const A = pt(p[0] - d1[0] * rr, p[1] - d1[1] * rr), B = pt(p[0] + d2[0] * rr, p[1] + d2[1] * rr);
+    out.push({ ...A, handleOut: pt(A.x + d1[0] * h, A.y + d1[1] * h) }, { ...B, handleIn: pt(B.x - d2[0] * h, B.y - d2[1] * h) });
+  });
+  return { closed: false, points: out };
+}
+var cast = (k, blur = 30, a = 0.3, y = 12) => shadow(k, "shade", a, y, blur);
+var tooth = (amount = 0.045, size = 5) => [noise({ id: "grain", amount, size, seed: 17 })];
+var foldsOf = (o) => o.folds ?? [3, 2];
+function creases(w, h, o) {
+  const [cols, rows] = foldsOf(o), band = Math.round(Math.max(26, Math.min(w, h) * 0.04));
+  const out = [];
+  for (let i = 1; i < cols; i++) {
+    const x = Math.round(w * i / cols);
+    out.push({ name: `Crease v${i} shade`, x: x - band, y: 0, width: band, height: h }, { name: `Crease v${i} light`, x, y: 0, width: band, height: h }, { name: `Crease v${i} line`, x: x - 1, y: 0, width: 2, height: h });
+  }
+  for (let j = 1; j < rows; j++) {
+    const y = Math.round(h * j / rows);
+    out.push({ name: `Crease h${j} shade`, x: 0, y: y - band, width: w, height: band }, { name: `Crease h${j} light`, x: 0, y, width: w, height: band }, { name: `Crease h${j} line`, x: 0, y: y - 1, width: w, height: 2 });
+  }
+  return out;
+}
+function mapPaper(k, parent, w, h, o = {}) {
+  const at = { absolute: { x: 0, y: 0 } };
+  k.rect(parent, w, h, "paper", { name: "Paper", ...at, ...o.grain ? { effects: tooth(o.grain) } : {} });
+  k.rect(parent, w, h, [k.gradient({ from: "lume", to: "lume", kind: "RADIAL", fromOpacity: 0.1, toOpacity: 0, handles: [{ x: 0.28, y: 0.2 }, { x: 1, y: 0.2 }, { x: 0.28, y: 0.85 }] })], { name: "Paper light", ...at });
+  k.rect(parent, w, h, [k.gradient({ from: "shade", to: "shade", kind: "RADIAL", fromOpacity: 0, toOpacity: 0.12, handles: [{ x: 0.45, y: 0.42 }, { x: 1.4, y: 0.42 }, { x: 0.45, y: 1.3 }] })], { name: "Paper shade", ...at });
+  for (const c of creases(w, h, o)) {
+    const upright = c.name.includes(" v");
+    const fill = c.name.endsWith("shade") ? [k.gradient({ from: "shade", to: "shade", angle: upright ? 0 : 90, fromOpacity: 0, toOpacity: 0.09 })] : c.name.endsWith("light") ? [k.gradient({ from: "lume", to: "lume", angle: upright ? 0 : 90, fromOpacity: 0.18, toOpacity: 0 })] : [k.gradient({ from: "shade", to: "shade", angle: 0, fromOpacity: 0.08, toOpacity: 0.08 })];
+    k.rect(parent, c.width, c.height, fill, { name: c.name, absolute: { x: c.x, y: c.y } });
+  }
+}
+function fitPaper(k, sheetId, w, h, o = {}) {
+  for (const name of ["Paper", "Paper light", "Paper shade"]) for (const id of k.named(sheetId, name)) k.patch(id, { x: 0, y: 0, width: w, height: h });
+  const now = creases(w, h, o);
+  for (const axis of ["v", "h"]) for (let i = 1; i < 6; i++) for (const part of ["shade", "light", "line"]) {
+    const name = `Crease ${axis}${i} ${part}`, c = now.find((x) => x.name === name);
+    for (const id of k.named(sheetId, name)) k.patch(id, c ? { x: c.x, y: c.y, width: c.width, height: c.height } : { visible: false });
+  }
+}
+function borderGeo(w, h, m, cell) {
+  const band = 22, paths = [];
+  const box = (i) => ({ closed: true, points: [pt(i, i), pt(w - i, i), pt(w - i, h - i), pt(i, h - i)] });
+  paths.push(box(m), box(m + band));
+  const cols = [], rows = [];
+  for (let x = m + band + cell; x < w - m - band - 8; x += cell) {
+    paths.push(line(x, m, x, m + band), line(x, h - m - band, x, h - m));
+    cols.push(x);
+  }
+  for (let y = m + band + cell; y < h - m - band - 8; y += cell) {
+    paths.push(line(m, y, m + band, y), line(w - m - band, y, w - m, y));
+    rows.push(y);
+  }
+  return { paths, cols, rows };
+}
+function mapBorder(k, parent, w, h, o) {
+  const m = o.margin ?? 26, cell = o.cell ?? 150;
+  const geo = borderGeo(w, h, m, cell);
+  k.vector(parent, w, h, geo.paths, "text", { name: "Border", strokeWidth: 1.5, opacity: 0.55, absolute: { x: 0, y: 0 } });
+  const style = o.style;
+  if (!style) return;
+  const ref = (label, x, y) => {
+    const id = k.text(parent, label, { style, color: "onPaper", autoWidth: true, name: "Ref", absolute: { x: 0, y: 0 } });
+    const n = k.node(id);
+    k.patch(id, { x: Math.round(x - n.width / 2), y: Math.round(y - n.height / 2) });
+  };
+  const max = Math.ceil(2200 / cell);
+  for (let i = 0; i < max; i++) {
+    const at = m + 22 + cell * i + cell / 2;
+    ref(String.fromCharCode(65 + i), at, m + 11);
+    ref(String(i + 1), m + 11, at);
+  }
+  fitBorder(k, parent, w, h, o);
+}
+function fitBorder(k, sheetId, w, h, o = {}) {
+  const m = o.margin ?? 26, cell = o.cell ?? 150;
+  const geo = borderGeo(w, h, m, cell);
+  for (const id of k.named(sheetId, "Border")) k.patch(id, { x: 0, y: 0, width: w, height: h, paths: geo.paths });
+  for (const id of k.named(sheetId, "Ref")) {
+    const n = k.node(id);
+    k.patch(id, { visible: o.refs !== false && n.x + n.width / 2 < w - m - 30 && n.y + n.height / 2 < h - m - 30 });
+  }
+}
+function along(pts, p) {
+  let total = 0, at = 0;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const a = pts[i], b = pts[i + 1], len = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    const t = ((p[0] - a[0]) * (b[0] - a[0]) + (p[1] - a[1]) * (b[1] - a[1])) / (len * len);
+    if (t >= -1e-3 && t <= 1.001 && Math.hypot(a[0] + (b[0] - a[0]) * t - p[0], a[1] + (b[1] - a[1]) * t - p[1]) < 0.01) at = total + t * len;
+    total += len;
+  }
+  return at / total;
+}
+function placeLabel(k, label, u, cx, cy, side, r) {
+  const n = k.node(label), gap = u * 0.3;
+  const pos = {
+    N: [cx - n.width / 2, cy - gap - n.height],
+    S: [cx - n.width / 2, cy + gap],
+    E: [cx + gap + r * 0.4, cy - n.height / 2],
+    W: [cx - gap - r * 0.4 - n.width, cy - n.height / 2],
+    NE: [cx - r, cy - gap - n.height],
+    NW: [cx - gap * 0.75 - n.width, cy - gap * 0.8 - n.height],
+    SE: [cx + gap * 0.9, cy + gap * 0.75],
+    SL: [cx - r, cy + gap]
+  }[side];
+  k.patch(label, { x: Math.round(pos[0]), y: Math.round(pos[1]) });
+}
+function relabel(k, root, o) {
+  const u = o.u;
+  k.named(root, "Stop label").forEach((id, i) => {
+    const s = STOPS[i];
+    if (!s.end) {
+      k.patch(id, { visible: false });
+      return;
+    }
+    k.restyle(id, o.label);
+    placeLabel(k, id, u, s.at[0] * u, s.at[1] * u, s.side, 0.17 * u);
+  });
+  k.named(root, "Hub label").forEach((id, i) => {
+    const hb = HUBS[i];
+    k.restyle(id, o.hub);
+    placeLabel(k, id, u, hb.at[0] * u, hb.at[1] * u, hb.side, 0.27 * u);
+  });
+  for (const id of k.named(root, "Planned label")) {
+    k.restyle(id, o.label);
+    placeLabel(k, id, u, 0.5 * u, 8.2 * u, "SL", 0.15 * u);
+  }
+  if (o.river) for (const id of k.named(root, "River name")) {
+    k.restyle(id, o.river);
+    k.patch(id, { y: Math.round(4 * u - k.node(id).height / 2) });
+  }
+}
+function network(k, parent, o) {
+  const u = o.u, width = GRID.cols * u, height = GRID.rows * u;
+  const id = k.frame(parent, { x: o.at?.x ?? 0, y: o.at?.y ?? 0, width, height }, { name: o.name ?? "Network" });
+  const full = { absolute: { x: 0, y: 0 } };
+  const px = (pts) => pts.map(([x, y]) => [x * u, y * u]);
+  const w = Math.round(u * 0.2);
+  const R = 2.75, c = R * 0.414;
+  k.vector(id, width, height, [{ closed: true, points: [[-c, -R], [c, -R], [R, -c], [R, c], [c, R], [-c, R], [-R, c], [-R, -c]].map(([x, y]) => pt((5 + x) * u, (4 + y) * u)) }], k.tint("text", 0.045), { name: "Zone", ...full });
+  k.vector(id, width, height, [routed(px([[o.west ?? -7, 4], [1.8, 4], [5.3, 7.5], [o.east ?? 17, 7.5]]), u * 1.1)], "blue", { name: "River", strokeWidth: Math.round(u * 0.62), opacity: 0.2, ...full });
+  if (o.river && !o.bare) {
+    const name = k.text(id, "River Backlog", { style: o.river, color: "onPaper", autoWidth: true, name: "River name", absolute: { x: 0, y: 0 } });
+    k.patch(name, { x: Math.round(Math.max(0.1, (o.west ?? -7) + 0.5) * u), y: Math.round(4 * u - k.node(name).height / 2) });
+  }
+  const count = o.lines ?? LINES.length;
+  const planned = [];
+  if (count >= 4) {
+    const ext = dashed(k, id, width, height, [1.55 * u, 8.2 * u], [0.5 * u, 8.2 * u], "yellow", { name: "Line planned", width: w, on: w * 0.5, off: w * 1.5, ...full });
+    planned.push(ext);
+  }
+  const lines = [], casings = [];
+  LINES.slice(0, count).forEach((l) => {
+    const path = routed(px(l.pts), u * 0.55);
+    casings.push(k.vector(id, width, height, [path], "paper", { name: `Casing ${l.key}`, strokeWidth: w + Math.round(u * 0.12), ...full }));
+    lines.push(k.vector(id, width, height, [path], l.role, { name: `Line ${l.key}`, strokeWidth: w, ...full }));
+  });
+  const place = (label, cx, cy, side, r) => placeLabel(k, label, u, cx, cy, side, r);
+  const stops = [];
+  for (const s of STOPS) {
+    if (s.line >= count) continue;
+    const r = (s.end ? 0.17 : 0.13) * u, cx = s.at[0] * u, cy = s.at[1] * u;
+    const stop = k.ellipse(id, r * 2, "paper", { name: "Stop", stroke: { color: "text", width: Math.max(2, u * (s.end ? 0.07 : 0.055)) }, absolute: { x: cx - r, y: cy - r } });
+    const label = o.bare ? "" : k.text(id, s.name, { style: o.label, color: "text", autoWidth: true, name: "Stop label", absolute: { x: 0, y: 0 } });
+    if (label) place(label, cx, cy, s.side, r);
+    stops.push({ id: stop, label, line: s.line, along: along(LINES[s.line].pts, s.at) });
+  }
+  if (count >= 4) {
+    const r = 0.15 * u, cx = 0.5 * u, cy = 8.2 * u;
+    planned.push(k.ellipse(id, r * 2, "paper", { name: "Stop planned", stroke: { color: "yellow", width: Math.max(2, u * 0.055) }, absolute: { x: cx - r, y: cy - r } }));
+    if (!o.bare) {
+      const label = k.text(id, "Sheets \xB7 opens Nov", { style: o.label, color: "onPaper", autoWidth: true, name: "Planned label", absolute: { x: 0, y: 0 } });
+      place(label, cx, cy, "SL", r);
+      planned.push(label);
+    }
+  }
+  const hubs = [];
+  HUBS.forEach((hb, i) => {
+    if (count < 4 && i > 0) return;
+    const r = 0.27 * u, cx = hb.at[0] * u, cy = hb.at[1] * u;
+    const hub = k.ellipse(id, r * 2, "paper", { name: "Hub", stroke: { color: "text", width: Math.max(3, u * 0.09) }, effects: [cast(k, Math.round(u * 0.14), 0.22, Math.round(u * 0.05))], absolute: { x: cx - r, y: cy - r } });
+    const label = o.bare ? "" : k.text(id, hb.name, { style: o.hub, color: "text", autoWidth: true, name: "Hub label", absolute: { x: 0, y: 0 } });
+    if (label) place(label, cx, cy, hb.side, r);
+    hubs.push({ id: hub, label });
+  });
+  let trainId;
+  if (!o.still) {
+    const on = LINES[o.trainOn ?? 0], [sx, sy] = on.pts[0];
+    trainId = train(k, id, sx * u, sy * u, 0.21 * u, on.role);
+  }
+  return { id, u, width, height, lines, casings, stops, hubs, planned, ...trainId ? { train: trainId } : {} };
+}
+function openNetwork(k, net, at, per, gap) {
+  net.lines.forEach((id, i) => {
+    const t0 = at + i * gap;
+    appear(k, id, t0, 40);
+    drawOn(k, id, t0, per);
+    appear(k, net.casings[i], t0, 40);
+    drawOn(k, net.casings[i], t0, per);
+  });
+  for (const s of net.stops) {
+    const tau = s.along < 0.5 ? Math.cbrt(s.along / 4) : 1 - Math.cbrt(2 * (1 - s.along)) / 2;
+    const t = at + s.line * gap + Math.round(per * tau);
+    k.animate(s.id, "scaleX", [{ t, v: 0, ease: ease.back(2.2) }, { t: t + 260, v: 1 }]);
+    k.animate(s.id, "scaleY", [{ t, v: 0, ease: ease.back(2.2) }, { t: t + 260, v: 1 }]);
+    appear(k, s.id, t, 60);
+    if (s.label) appear(k, s.label, t + 80, 220);
+  }
+  net.hubs.forEach((h, i) => {
+    const t = at + gap * Math.min(net.lines.length - 1, i + 1) + Math.round(per * 0.55);
+    k.animate(h.id, "scaleX", [{ t, v: 0, ease: ease.back(2.6) }, { t: t + 340, v: 1 }]);
+    k.animate(h.id, "scaleY", [{ t, v: 0, ease: ease.back(2.6) }, { t: t + 340, v: 1 }]);
+    appear(k, h.id, t, 60);
+    if (h.label) appear(k, h.label, t + 120, 240);
+  });
+  const last = at + (net.lines.length - 1) * gap + per;
+  for (const id of net.planned) appear(k, id, last - 200, 400);
+}
+function travel(k, id, pts, at, duration, fade = 0) {
+  const lens = pts.slice(1).map((p, i) => Math.hypot(p[0] - pts[i][0], p[1] - pts[i][1]));
+  const total = lens.reduce((a, b) => a + b, 0);
+  const keys = (axis) => {
+    let t = at;
+    return pts.map((p, i) => {
+      const key = { t: Math.round(t), v: p[axis] - pts[0][axis], ...i < lens.length ? { ease: ease.inOut("sine") } : {} };
+      if (i < lens.length) t += lens[i] / total * duration;
+      return key;
+    });
+  };
+  const xs = keys(0), ys = keys(1);
+  k.animate(id, "translateX", xs);
+  k.animate(id, "translateY", ys);
+  if (fade) k.animate(id, "opacity", [{ t: at - 200, v: 0, ease: ease.linear }, { t: at, v: 1, ease: ease.hold }, { t: at + duration, v: 1, ease: ease.linear }, { t: at + duration + fade, v: 0 }]);
+  else appear(k, id, at - 200, 200);
+}
+function ride(k, net, index, at, duration, fade = 0) {
+  if (net.train) travel(k, net.train, LINES[index].pts.map(([x, y]) => [x * net.u, y * net.u]), at, duration, fade);
+}
+function train(k, parent, cx, cy, r, role = "red") {
+  return k.ellipse(parent, r * 2, "lume", { name: "Train", stroke: { color: "text", width: Math.max(3, r * 0.36) }, effects: [{ type: "DROP_SHADOW", color: k.color(role, 0.75), offset: { x: 0, y: 0 }, blur: Math.round(r * 1.4), spread: Math.round(r * 0.2), visible: true }], absolute: { x: cx - r, y: cy - r } });
+}
+function suburbs(k, parent, w, h, u, at) {
+  const id = k.frame(parent, { x: at.x, y: at.y, width: w, height: h }, { name: "Suburbs", clip: true });
+  const full = { absolute: { x: 0, y: 0 } }, wd = Math.round(u * 0.2);
+  const px = (pts) => pts.map(([x, y]) => [x * u, y * u]);
+  const routes = [
+    { role: "green", pts: [[-1, 2.6], [1.2, 2.6], [1.2, 7]], stops: [[0.4, 2.6], [1.2, 5.4]] },
+    { role: "yellow", pts: [[-1, 4.3], [4.5, 4.3], [6, 2.8], [15, 2.8]], stops: [[2.9, 4.3], [9.4, 2.8], [11.6, 2.8]] },
+    { role: "blue", pts: [[3, -1], [3, 1.5], [5.8, 4.3], [5.8, 7]], stops: [[3, 0.6], [4.1, 2.6], [5.8, 5.3]] },
+    { role: "red", pts: [[15, 0.8], [9.5, 0.8], [7.5, 2.8], [7.5, 7]], stops: [[11.4, 0.8], [8.6, 1.7], [7.5, 4.6]] }
+  ];
+  k.vector(id, w, h, [routed(px([[-2, 0.4], [1.6, 0.4], [4.2, 3], [4.2, 5.2], [5.6, 6.6]]), u * 1.1)], "blue", { name: "River", strokeWidth: Math.round(u * 0.62), opacity: 0.2, ...full });
+  for (const r of routes) {
+    const path = routed(px(r.pts), u * 0.55);
+    k.vector(id, w, h, [path], "paper", { name: "Suburb casing", strokeWidth: wd + Math.round(u * 0.12), ...full });
+    k.vector(id, w, h, [path], r.role, { name: "Suburb line", strokeWidth: wd, ...full });
+  }
+  for (const r of routes) for (const [x, y] of r.stops) {
+    const rr = 0.13 * u;
+    k.ellipse(id, rr * 2, "paper", { name: "Suburb stop", stroke: { color: "text", width: Math.max(2, u * 0.055) }, absolute: { x: x * u - rr, y: y * u - rr } });
+  }
+  for (const [x, y] of [[1.2, 4.3], [5.15, 3.65], [7.5, 2.8]]) {
+    const rr = 0.27 * u;
+    k.ellipse(id, rr * 2, "paper", { name: "Suburb hub", stroke: { color: "text", width: Math.max(3, u * 0.09) }, absolute: { x: x * u - rr, y: y * u - rr } });
+  }
+  return id;
+}
+function lineStrip(k, parent, index, stops, o) {
+  const wgt = o.weight ?? 12, r = wgt * 0.62, R = wgt * 1.15, inset = R + 2, y = R + 2;
+  const id = k.frame(parent, { x: o.at?.x ?? 0, y: o.at?.y ?? 0, width: o.width, height: 1 }, { name: o.name ?? "Strip" });
+  const lineId = k.vector(id, o.width, y * 2, [line(inset, y, o.width - inset, y)], o.role ?? LINES[index].role, { name: "Strip line", strokeWidth: wgt, absolute: { x: 0, y: 0 } });
+  const ids = [], labels = [], xs = [];
+  let tall = 0;
+  stops.forEach((s, i) => {
+    const hub = o.hubs?.includes(i), rr = hub ? R : r;
+    const x = inset + (o.width - 2 * inset) * i / (stops.length - 1);
+    xs.push(x);
+    ids.push(k.ellipse(id, rr * 2, "paper", { name: "Strip stop", stroke: { color: "text", width: hub ? wgt * 0.36 : wgt * 0.28 }, absolute: { x: x - rr, y: y - rr } }));
+    const label = k.text(id, s, { style: o.label, color: "text", autoWidth: true, name: "Strip label", absolute: { x: 0, y: 0 } });
+    const n = k.node(label);
+    k.patch(label, { x: Math.round(i === 0 ? 0 : i === stops.length - 1 ? o.width - n.width : x - n.width / 2), y: Math.round(y * 2 + (o.gap ?? 6)) });
+    tall = Math.max(tall, n.height);
+    labels.push(label);
+  });
+  k.patch(id, { height: Math.round(y * 2 + (o.gap ?? 6) + tall) });
+  return { id, line: lineId, stops: ids, labels, xs, y };
+}
+function restrip(k, stripId, width, o = {}) {
+  const wgt = o.weight ?? 12, R = wgt * 1.15, inset = R + 2, gap = o.gap ?? 6;
+  const kids = k.node(stripId).childIds, [lineId, ...rest] = kids;
+  const count = rest.length / 2;
+  const tall = Math.max(...rest.filter((_, i) => i % 2 === 1).map((id) => k.node(id).height));
+  const y = Math.round(tall + gap + R + 2);
+  k.patch(lineId, { width, height: y * 2, paths: [line(inset, y, width - inset, y)] });
+  for (let i = 0; i < count; i++) {
+    const stop = rest[i * 2], label = rest[i * 2 + 1], rr = k.node(stop).width / 2, n = k.node(label);
+    const x = inset + (width - 2 * inset) * i / (count - 1);
+    k.patch(stop, { x: x - rr, y: y - rr });
+    k.patch(label, { x: Math.round(i === 0 ? 0 : i === count - 1 ? width - n.width : x - n.width / 2), y: i % 2 ? Math.round(y + R + 2 + gap) : 0 });
+  }
+  const height = Math.round(y + R + 2 + gap + tall);
+  k.patch(stripId, { width, height });
+  return height;
+}
+function bullet(k, parent, index, size, style, o = {}) {
+  const l = LINES[index];
+  const id = k.stack(parent, { width: size, height: size, radius: size / 2, fill: l.role, align: "CENTER", justify: "CENTER", name: o.name ?? "Bullet", ...o.absolute ? { absolute: o.absolute } : {} });
+  k.text(id, l.num, { style, color: l.on, autoWidth: true, name: "Bullet number" });
+  return id;
+}
+function legend(k, parent, o) {
+  const id = k.stack(parent, { width: o.width ?? "FILL", gap: o.gap ?? 12, name: "Key", ...o.absolute ? { absolute: o.absolute } : {} });
+  if (o.heading) k.text(id, o.heading, { style: o.title, color: "onPaper", name: "Key title" });
+  LINES.slice(0, o.lines ?? LINES.length).forEach((l, i) => {
+    const row = k.stack(id, { direction: "HORIZONTAL", gap: Math.round(o.size * 0.4), align: "CENTER", name: "Key row" });
+    k.rect(row, Math.round(o.size * 1.5), Math.max(6, Math.round(o.size * 0.3)), l.role, { name: "Key line", radius: o.size });
+    bullet(k, row, i, o.size, o.bullet);
+    const words = k.stack(row, { direction: "HORIZONTAL", gap: Math.round(o.size * 0.4), align: "CENTER", name: "Key words" });
+    k.text(words, `${l.name} line`, { style: o.row, color: "text", autoWidth: true, name: "Key name" });
+    if (o.note) k.text(words, l.runs, { style: o.note, color: "onPaper", name: "Key runs" });
+  });
+  return id;
+}
+function departures(k, parent, rows, o) {
+  const pad = o.pad ?? 22;
+  const id = k.stack(parent, { width: o.width ?? "FILL", gap: o.gap ?? 12, padding: pad, fill: "card", radius: o.radius ?? 14, effects: [cast(k, 36, 0.42, 16)], name: o.name ?? "Departures", ...o.absolute ? { absolute: o.absolute } : {} });
+  const head = k.stack(id, { direction: "HORIZONTAL", gap: 12, align: "CENTER", justify: "SPACE_BETWEEN", name: "Board head" });
+  const left = k.stack(head, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Board title row" });
+  k.ellipse(left, Math.round(o.size * 0.36), "onCard", { name: "Board lamp" });
+  k.text(left, o.title, { style: o.head, color: "onCard", name: "Board title" });
+  if (o.clock) k.text(head, o.clock, { style: o.head, color: "onCard", autoWidth: true, name: "Board clock" });
+  k.rect(id, "FILL", 2, "onCard", { name: "Board rule", opacity: 0.35 });
+  rows.forEach((r, i) => {
+    const row = k.stack(id, { direction: "HORIZONTAL", gap: Math.round(o.size * 0.5), align: "CENTER", name: "Board row" });
+    bullet(k, row, r.line, o.size, o.bullet);
+    k.text(row, r.to, { style: o.cell, color: "onCard", name: "Board to" });
+    k.text(row, r.due, { style: o.cell, color: "onCard", autoWidth: true, name: r.name ?? `Due ${i + 1}` });
+  });
+  return id;
+}
+function nameplate(k, parent, label, o) {
+  const [v, h] = o.pad ?? [10, 18];
+  const id = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", fill: "text", radius: 4, clip: true, align: "CENTER", name: o.name ?? "Nameplate", ...o.absolute ? { absolute: o.absolute } : {} });
+  k.rect(id, Math.round(h * 0.7), 10, LINES[o.line ?? 0].role, { name: "Plate band" });
+  const inner = k.stack(id, { width: "HUG", padding: { top: v, right: h, bottom: v, left: h }, name: "Plate words" });
+  k.text(inner, label, { style: o.style, color: "paper", autoWidth: true, name: o.textName ?? "Plate label" });
+  k.patch(k.node(id).childIds[0], { layoutSizingVertical: "FILL" });
+  return id;
+}
+function ticket(k, parent, o) {
+  const pad = o.pad ?? 22, r = Math.round(o.height * 0.1);
+  const id = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", height: o.height, fill: "primary", radius: 10, align: "CENTER", effects: [cast(k, 26, 0.34, 12)], name: o.name ?? "Ticket", ...o.absolute ? { absolute: o.absolute } : {} });
+  const stub = k.stack(id, { width: o.stubWidth, gap: 2, padding: { top: 0, right: 10, bottom: 0, left: pad }, name: "Ticket stub" });
+  k.text(stub, o.stub[0], { style: o.stubStyle, color: "onPrimary", name: "Stub top" });
+  k.text(stub, o.stub[1], { style: o.stubStyle, color: "onPrimary", name: "Stub bottom" });
+  dashed(k, id, 2, o.height, [1, r + 5], [1, o.height - r - 5], "onPrimary", { name: "Perforation", width: 2, on: 3, off: 6, opacity: 0.75 });
+  const main = k.stack(id, { width: "HUG", padding: { top: 0, right: pad + 4, bottom: 0, left: pad }, name: "Ticket main" });
+  k.text(main, o.big, { style: o.bigStyle, color: "onPrimary", autoWidth: true, name: o.bigName ?? "Ticket big" });
+  for (const y of [-r, o.height - r]) k.ellipse(id, r * 2, o.ground ?? "paper", { name: "Ticket notch", absolute: { x: o.stubWidth + 1 - r, y } });
+  if (o.turn) k.patch(id, { rotation: o.turn });
+  return id;
+}
+
+export {
+  ITALIC,
+  LINES,
+  GRID,
+  metroBrand,
+  dashed,
+  routed,
+  cast,
+  tooth,
+  mapPaper,
+  fitPaper,
+  mapBorder,
+  fitBorder,
+  relabel,
+  network,
+  openNetwork,
+  travel,
+  ride,
+  train,
+  suburbs,
+  lineStrip,
+  restrip,
+  bullet,
+  legend,
+  departures,
+  nameplate,
+  ticket
+};

package/dist/chunks/chunk-ZAYVCDGB.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 {
+  MONTHLY,
+  MONTHS,
+  SPOOL,
+  areaPaint,
+  bloomAt,
+  body,
+  code,
+  deep,
+  display,
+  figure,
+  gradientBrand,
+  label,
+  lockup,
+  longShadow,
+  mesh,
+  monthlyArea,
+  monthlyLine,
+  orbitCam,
+  plateChip,
+  rimLight,
+  sitePill,
+  tilted,
+  ts,
+  videoFoot
+} from "./chunk-6XFQWKQU.js";
+import {
+  drawOn
+} from "./chunk-WV6ZTKE7.js";
+import {
+  presetSafeRect
+} from "./chunk-QVURWCH2.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-gradient-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Gradient SaaS milestone post";
+var DURATION = 8e3;
+var COUNT = 400;
+var LAND = 3400;
+var P = { w: 860, h: 560 };
+var CH = { w: 760, h: 300 };
+var cues = [
+  { layer: "Figure wrap", preset: "blur-in", at: 0, params: { duration: 800, amount: 24 } },
+  { layer: "Thanks", preset: "words-in", at: LAND, params: { duration: 900 } },
+  { layer: "Chart area", preset: "fade-in", at: LAND - 1400, params: { duration: 1800 } },
+  { layer: "Peak", preset: "pop-in", at: LAND, params: { duration: 500 } },
+  { layer: "Site chip", preset: "pulse", at: 5600, params: { duration: 1400, amount: 0.04 } }
+];
+var counts = [{ layer: "Total", at: COUNT, duration: LAND - COUNT, ease: ease.out("cubic"), counter: { from: SPOOL.before10m, to: SPOOL.total } }];
+var LAYS = {
+  "ig-post": { x: 72, w: 936, brandY: 64, figY: 150, fig: "Figure 156", thanks: "Thanks 30", scene: { x: 120, y: 470, w: 960, h: 600 }, scale: 0.86, mesh: { x: 100, y: 520, w: 1e3, h: 580 }, footY: 980 },
+  "ig-portrait": { x: 72, w: 936, brandY: 72, figY: 170, fig: "Figure 156", thanks: "Thanks 32", scene: { x: 60, y: 560, w: 1020, h: 700 }, scale: 0.98, mesh: { x: 0, y: 620, w: 1080, h: 730 }, footY: 1240 },
+  "ig-story": { x: 140, w: 800, brandY: 260, figY: 370, fig: "Figure 150", thanks: "Thanks 32", scene: { x: 0, y: 610, w: 1080, h: 760 }, scale: 1.04, mesh: { x: -120, y: 760, w: 1320, h: 1160 }, footY: 1376 }
+};
+var style_gradient_milestone_default = defineTemplate({
+  id: "social-saas-style-gradient-milestone",
+  meta: {
+    name: NAME,
+    description: "An eight-second milestone post in the gradient and depth look for a video rendering API: ten million videos counting up on a deep ocean ground while the year's monthly renders draw themselves on a plate tilted in 3D space over a warm coral-to-lagoon mesh. The mesh blooms as the count lands, the last month lights, light crosses the plate and the camera keeps swinging round it. Square with 4:5 and 9:16 cuts",
+    category: "social",
+    tags: ["social", "post", "milestone", "stats", "counter", "chart", "build in public", "saas", "gradient", "mesh gradient", "depth", "3d", "shader", "developer", "api", "video", "animation", "instagram", "linkedin"],
+    platforms: ["instagram", "linkedin", "x", "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;
+    gradientBrand(k);
+    ts(k, "Brand 30", display(30));
+    ts(k, "Kicker 22", code(22));
+    ts(k, "Figure 156", figure(156, 800));
+    ts(k, "Figure 150", figure(150, 800));
+    ts(k, "Thanks 30", body(30, 500));
+    ts(k, "Thanks 32", body(32, 500));
+    ts(k, "Plate label 20", label(20));
+    ts(k, "Plate big 34", display(34));
+    ts(k, "Axis 20", code(20));
+    ts(k, "Site 24", code(24));
+    sitePill(k, { style: "Site 24", pad: [16, 24] });
+    const sheets = ["ig-post", "ig-portrait", "ig-story"].map((id, i) => {
+      const sheet = i === 0 ? k.sheet : k.addSheet(preset(id));
+      lay(k, sheet, id);
+      return sheet;
+    });
+    k.setCover(sheets[0]);
+    return k.finish();
+  }
+});
+function chartPlate(k, rig) {
+  const plate = k.stack(rig, { width: P.w, height: P.h, fill: "plate", radius: 28, clip: true, padding: { top: 30, right: 50, bottom: 30, left: 50 }, gap: 22, name: "Chart plate", effects: rimLight(k), absolute: { x: 0, y: 0 } });
+  const head = k.stack(plate, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "MAX", name: "Plate head" });
+  const l = k.stack(head, { width: "HUG", gap: 4, name: "Plate title" });
+  k.text(l, "VIDEOS RENDERED A MONTH", { style: "Plate label 20", color: "plateMuted", autoWidth: true, name: "Plate label" });
+  k.text(l, `${SPOOL.september} in September`, { style: "Plate big 34", color: "onPlate", autoWidth: true, name: "Plate figure" });
+  k.text(head, "2026", { style: "Axis 20", color: "plateMuted", autoWidth: true, name: "Plate year" });
+  const box = k.stack(plate, { width: CH.w, height: CH.h, name: "Chart box" });
+  for (const lv of [0.25, 0.5, 0.75, 1]) k.rect(box, CH.w, 1, k.tint("rim", 0.1), { name: "Chart level", absolute: { x: 0, y: Math.round(CH.h * (1 - lv)) } });
+  k.vector(box, CH.w, CH.h, [monthlyArea(CH.w, CH.h)], areaPaint(k), { name: "Chart area", absolute: { x: 0, y: 0 } });
+  const line = k.vector(box, CH.w, CH.h, [monthlyLine(CH.w, CH.h)], [], { name: "Chart line", absolute: { x: 0, y: 0 }, stroke: { color: "primary", width: 6, cap: "ROUND" } });
+  const py = CH.h - MONTHLY[MONTHLY.length - 1] / 2e3 * CH.h;
+  k.ellipse(box, 28, "primary", { name: "Peak", absolute: { x: CH.w - 14, y: Math.round(py - 14) }, effects: [longShadow(k, 0.5, 6, 18)] });
+  const axis = k.stack(plate, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", width: CH.w, name: "Axis" });
+  for (const m of MONTHS) k.text(axis, m, { style: "Axis 20", color: "plateMuted", autoWidth: true, name: "Axis label" });
+  return { plate, line };
+}
+function lay(k, sheet, id) {
+  const L = LAYS[id];
+  k.nameSheet(sheet, `Milestone \xB7 ${preset(id).name}`);
+  k.flowSheet(sheet, 0, 0, "night", "MIN", "MIN");
+  k.patch(sheet, { clipsContent: true });
+  k.timeline(sheet, { duration: DURATION, fps: 30 });
+  deep(k, sheet, { duration: DURATION });
+  const glow = mesh(k, sheet, { ...L.mesh, duration: DURATION, phase: 0.8 });
+  bloomAt(k, glow, LAND - 200, 700, 3e3);
+  const { width, height } = k.node(sheet);
+  const r = presetSafeRect(id, width, height);
+  let c;
+  const t = tilted(k, sheet, { ...L.scene, width: P.w, height: P.h, scale: L.scale, rotateY: -20, rotateX: 14, styles: {}, planes: false, sweeps: [LAND + 100], safe: r ? { x: Math.ceil(r.x), y: Math.ceil(r.y), w: Math.floor(r.width), h: Math.floor(r.height) } : void 0, make: (rig) => {
+    c = chartPlate(k, rig);
+    return c.plate;
+  } });
+  orbitCam(k, t.scene, { at: 0, until: DURATION, from: -10, to: 10, z0: 120, z1: -40 });
+  drawOn(k, c.line, COUNT, LAND - COUNT);
+  const brandRow = k.stack(sheet, { direction: "HORIZONTAL", width: L.w, justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row", absolute: { x: L.x, y: L.brandY } });
+  lockup(k, brandRow, { size: 52, style: "Brand 30" });
+  plateChip(k, brandRow, "Milestone \xB7 Sept 2026", { style: "Kicker 22", name: "Kicker", dot: "primary" });
+  const words = k.stack(sheet, { width: L.w, gap: 14, name: "Words", absolute: { x: L.x, y: L.figY } });
+  const fw = k.stack(words, { width: L.w, name: "Figure wrap" });
+  k.text(fw, "10,000,000", { style: L.fig, color: "onNight", width: L.w, name: "Total" });
+  k.text(words, "videos rendered. Thank you to the 2,300 teams who sent them.", { style: L.thanks, color: "nightMuted", name: "Thanks" });
+  k.instance(sheet, "Site pill", {}, { name: "Site chip", absolute: { x: L.x, y: L.footY } });
+  if (id === "ig-story") videoFoot(k, sheet, L.footY + 110);
+  k.counts(sheet, counts);
+  k.cues(sheet, cues);
+}
+
+export {
+  style_gradient_milestone_default
+};