@popcraft/kit 0.29.0 → 0.30.0

package/dist/chunks/chunk-G3YVVHCF.js

@@ -0,0 +1,468 @@
+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-PFCHOCEN.js";
+import {
+  pt3,
+  r3,
+  rng
+} from "./chunk-6RCDZU4R.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/saas/style-data-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SPANWISE = {
+  name: "Spanwise",
+  site: "spanwise.example",
+  version: "5.2",
+  tagline: "See the regression before your customers do.",
+  pitch: "Observability for platform teams at scale. Every service, every region, every span, in one live console that flags what changed and why.",
+  /** The incident every piece shows. */
+  service: "checkout-api",
+  region: "eu-west-1",
+  deploy: "payments-gw v4.18.2",
+  at: "14:02:11 UTC",
+  p99Before: 182,
+  p99Spike: 2340,
+  p99After: 196,
+  detect: 38,
+  /** The fleet a customer like Northfold runs. */
+  services: 1284,
+  regions: 14,
+  spans: "2.6M",
+  /** Mean time to resolve, before and after (minutes). */
+  mttrBefore: 47,
+  mttrAfter: 9,
+  /** The milestone: spans indexed in September (billions), past a trillion. */
+  trillion: 1.02,
+  /** Per host a month: monthly, and billed annually. */
+  team: 31,
+  teamYear: 26,
+  business: 46,
+  businessYear: 38,
+  trial: "14-day trial on your own data. No card.",
+  customer: { name: "Priya Raman", role: "VP Platform Engineering", company: "Northfold" },
+  quote: "Spanwise flagged our checkout regression 38 seconds after the deploy. We rolled back before the first support ticket."
+};
+var CUSTOMERS = ["Northfold", "Calder Freight", "Brightwater Bank", "Oakline Health", "Meridian Air", "Tessaro", "Halden Energy", "Quarry & Co"];
+var COLORS = {
+  paper: "#0B0E13",
+  text: "#EEF1F5",
+  onPaper: "#A9B2C0",
+  primary: "#2A60EE",
+  onPrimary: "#FFFFFF",
+  card: "#131821",
+  onCard: "#E9EDF3",
+  cardMuted: "#9AA5B5"
+};
+var SCENERY = {
+  line: "#262E3B",
+  rule: "#1C222D",
+  well: "#0F131A",
+  up: "#33D17A",
+  down: "#FF5C61",
+  warn: "#FFB224",
+  heat: "#2F6BFF",
+  cool: "#1A2A4A"
+};
+function dataBrand(k, fields = {}) {
+  k.brand({ ...COLORS }, { name: SPANWISE.name, site: SPANWISE.site, ...fields });
+  k.palette({ ...SCENERY });
+}
+var tenth = (v) => Math.round(v * 10) / 10 + 0;
+var four = (v) => Math.max(4, Math.round(v / 4) * 4);
+var TNUM = { tnum: 1 };
+var display = (size, o = {}) => ({ size, fontWeight: o.weight ?? 600, letterSpacing: tenth(-size * 0.028), lineHeight: four(size * (o.lead ?? 1.1)), fontFeatures: TNUM, ...o.center ? { textAlign: "CENTER" } : {} });
+var body = (size, weight = 400) => ({ size, fontWeight: weight, lineHeight: four(size * 1.45), letterSpacing: size >= 24 ? tenth(-size * 8e-3) : 0, fontFeatures: TNUM });
+var label = (size) => ({ size, fontWeight: 600, letterSpacing: tenth(size * 0.06), lineHeight: four(size * 1.3), fontFeatures: TNUM });
+var figure = (size, weight = 600) => ({ size, fontWeight: weight, letterSpacing: tenth(-size * (size >= 40 ? 0.03 : 5e-3)), lineHeight: four(size * 1.15), fontFeatures: TNUM });
+var code = (size, weight = 500) => ({ ...MONO, size, fontWeight: weight, lineHeight: four(size * 1.35), fontFeatures: TNUM });
+function ts(k, name, def) {
+  k.textStyle(name, def);
+  return name;
+}
+function panelFx(k, lift = 1) {
+  return [{ type: "DROP_SHADOW", color: k.color("well", 0.7), offset: { x: 0, y: r3(10 * lift) }, blur: r3(30 * lift), spread: 0, visible: true }];
+}
+function panel(k, parent, o) {
+  const { lift, ...rest } = o;
+  return k.stack(parent, { fill: "card", radius: 10, clip: true, stroke: { color: "line", width: 1, align: "INSIDE" }, effects: panelFx(k, lift ?? 1), ...rest });
+}
+function filterChip(k, parent, key, value, o) {
+  const [v, h] = o.pad ?? [6, 12];
+  const c = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 2, radius: 6, padding: { top: v, right: h, bottom: v, left: h }, fill: o.on ? k.tint("primary", 0.22) : "well", stroke: { color: o.on ? "primary" : "line", width: 1, align: "INSIDE" }, name: o.name ?? "Filter chip" });
+  k.text(c, `${key}:`, { style: o.style, color: "cardMuted", autoWidth: true, name: "Chip key" });
+  k.text(c, value, { style: o.style, color: "onCard", autoWidth: true, name: "Chip value" });
+  return c;
+}
+function rangePicker(k, parent, range, o) {
+  const [v, h] = o.pad ?? [6, 12];
+  const c = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 8, radius: 6, padding: { top: v, right: h, bottom: v, left: h }, fill: "well", stroke: { color: "line", width: 1, align: "INSIDE" }, name: o.name ?? "Range picker" });
+  k.ellipse(c, 8, "up", { name: "Live dot" });
+  k.text(c, range, { style: o.style, color: "onCard", autoWidth: true, name: "Range" });
+  k.vector(c, 10, 6, [{ closed: true, points: [pt3(0, 0), pt3(10, 0), pt3(5, 6)] }], "cardMuted", { name: "Caret" });
+  return c;
+}
+function series(seed, n, base, wobble = 0.12) {
+  const r = rng(seed);
+  let v = base;
+  return Array.from({ length: n }, () => {
+    v = v + (r() - 0.5) * base * wobble;
+    v = Math.max(base * (1 - wobble * 2), Math.min(base * (1 + wobble * 2), v));
+    return v;
+  });
+}
+function sparkPath(values, w, h, lo, hi) {
+  const a = lo ?? Math.min(...values), b = hi ?? Math.max(...values);
+  const span = Math.max(1e-6, b - a);
+  return { closed: false, points: values.map((v, i) => pt3(i / (values.length - 1) * w, h - (v - a) / span * h)) };
+}
+function sparkArea(values, w, h, lo, hi) {
+  const l = sparkPath(values, w, h, lo, hi);
+  return { closed: true, points: [...l.points, pt3(w, h), pt3(0, h)] };
+}
+var SERVICES = [
+  { name: "auth", region: "us-west-2", p99: 54, err: "0.01%", rps: "15,402", state: "ok", seed: 11 },
+  { name: "search", region: "us-east-1", p99: 141, err: "0.08%", rps: "12,630", state: "ok", seed: 23 },
+  { name: "checkout-api", region: "eu-west-1", p99: 182, err: "0.40%", rps: "4,812", state: "ok", seed: 37, anomaly: true },
+  { name: "cart", region: "us-east-1", p99: 88, err: "0.02%", rps: "7,215", state: "ok", seed: 41 },
+  { name: "inventory-sync", region: "ap-south-1", p99: 412, err: "1.90%", rps: "980", state: "warn", seed: 53 },
+  { name: "payments-gw", region: "eu-west-1", p99: 96, err: "0.20%", rps: "3,904", state: "ok", seed: 67 },
+  { name: "recommendations", region: "eu-central-1", p99: 230, err: "0.30%", rps: "5,110", state: "ok", seed: 71 },
+  { name: "shipping-quotes", region: "us-east-2", p99: 318, err: "0.60%", rps: "1,644", state: "ok", seed: 83 }
+];
+function sortedByP99(rows) {
+  return rows.map((s, i) => ({ i, v: s.anomaly ? SPANWISE.p99Spike : s.p99 })).sort((a, b) => b.v - a.v).map((x) => x.i);
+}
+var fmtMs = (v) => `${Math.round(v).toLocaleString("en-US")} ms`;
+var SPIKE_TAIL = [900, 2340, 2340, 2290, 620, 196];
+function rowSeries(s, n = 24) {
+  const v = series(s.seed, n, s.p99, s.state === "warn" ? 0.22 : 0.1);
+  if (!s.anomaly) return v;
+  return [...v.slice(0, n - SPIKE_TAIL.length), ...SPIKE_TAIL];
+}
+var HEADS = { service: "SERVICE", p99: "P99", err: "ERRORS", rps: "REQ/S", trend: "P99, 24 MIN", state: "" };
+function servicesTable(k, parent, o) {
+  const pad = o.pad ?? 20, inner = o.w - pad * 2;
+  const fixed = o.cols.filter((c) => c !== "service").reduce((a, c) => a + (o.widths[c] ?? 0), 0);
+  const gap = 12;
+  const serviceW = inner - fixed - gap * (o.cols.length - 1);
+  const wOf = (c) => c === "service" ? serviceW : o.widths[c] ?? 60;
+  const right = (c) => c === "p99" || c === "err" || c === "rps";
+  const head = k.stack(parent, { direction: "HORIZONTAL", gap, align: "CENTER", height: o.headH ?? 36, padding: { top: 0, right: pad, bottom: 0, left: pad }, fill: "well", name: "Table head" });
+  let caret;
+  for (const c of o.cols) {
+    const cell = k.stack(head, { direction: "HORIZONTAL", width: wOf(c), gap: 6, align: "CENTER", justify: right(c) ? "MAX" : "MIN", name: "Head cell" });
+    if (c === "p99" && o.sortCaret) caret = k.vector(cell, 9, 6, [{ closed: true, points: [pt3(0, 0), pt3(9, 0), pt3(4.5, 6)] }], "primary", { name: "Sort caret" });
+    if (HEADS[c]) k.text(cell, HEADS[c], { style: o.styles.head, color: c === "p99" && o.sortCaret ? "onCard" : "cardMuted", autoWidth: true, name: "Head label" });
+  }
+  k.rect(parent, "FILL", 1, "line", { name: "Head rule" });
+  const body2 = k.frame(parent, { x: 0, y: 0, width: o.w, height: o.rows.length * o.rowH }, { name: "Table body", clip: true });
+  k.patch(body2, { layoutPositioning: "AUTO" });
+  const rows = [];
+  o.rows.forEach((s, i) => {
+    const row = k.stack(body2, { direction: "HORIZONTAL", width: o.w, height: o.rowH, gap, align: "CENTER", padding: { top: 0, right: pad, bottom: 0, left: pad }, name: s.anomaly ? "Anomaly row" : "Service row", absolute: { x: 0, y: i * o.rowH } });
+    const glow = s.anomaly ? k.rect(row, o.w, o.rowH, k.tint("down", 0.16), { name: "Anomaly glow", absolute: { x: 0, y: 0 }, opacity: 0 }) : void 0;
+    k.rect(row, o.w, 1, "rule", { name: "Row rule", absolute: { x: 0, y: o.rowH - 1 } });
+    let spark = "", spike, p99 = "", dot = "", flag;
+    for (const c of o.cols) {
+      const w = wOf(c);
+      if (c === "service") {
+        const cell = k.stack(row, { width: w, gap: 2, name: "Service cell" });
+        const top = k.stack(cell, { direction: "HORIZONTAL", width: "FILL", gap: 8, align: "CENTER", name: "Service top" });
+        k.text(top, s.name, { style: o.styles.name, color: "onCard", autoWidth: true, name: "Service name" });
+        if (s.anomaly) {
+          flag = k.stack(top, { direction: "HORIZONTAL", width: "HUG", fill: "down", radius: 4, padding: { top: 1, right: 6, bottom: 1, left: 6 }, name: "Anomaly flag" });
+          k.text(flag, "ANOMALY", { style: o.styles.head, color: "well", autoWidth: true, name: "Flag word" });
+        }
+        k.text(cell, s.region, { style: o.styles.sub, color: "cardMuted", autoWidth: true, name: "Service region" });
+      } else if (c === "trend") {
+        const sw = w, sh = Math.round(o.rowH * 0.5);
+        const cell = k.frame(row, { x: 0, y: 0, width: sw, height: sh }, { name: "Trend cell" });
+        k.patch(cell, { layoutPositioning: "AUTO" });
+        const vals = rowSeries(s);
+        const tailN = s.anomaly ? SPIKE_TAIL.length : 0;
+        const calm = vals.slice(0, vals.length - tailN);
+        const lo = Math.min(...calm) * 0.9, hi = Math.max(...calm) * 1.12;
+        const calmW = sw * ((calm.length - 1) / (vals.length - 1));
+        k.patch(cell, { clipsContent: true });
+        spark = k.vector(cell, r3(calmW), sh, [sparkPath(calm, calmW, sh, lo, hi)], [], { name: "Sparkline", absolute: { x: 0, y: 0 }, stroke: { color: s.state === "warn" ? "warn" : "heat", width: 2, cap: "ROUND", join: "ROUND" } });
+        if (s.anomaly) {
+          const pts = [calm[calm.length - 1], ...SPIKE_TAIL].map((v, j) => ({ x: j / tailN * (sw - calmW), y: Math.max(1, Math.min(sh, sh - (v - lo) / (hi - lo) * sh)) }));
+          spike = k.vector(cell, r3(sw - calmW), sh, [{ closed: false, points: pts.map((p) => pt3(p.x, p.y)) }], [], { name: "Spike", absolute: { x: r3(calmW), y: 0 }, stroke: { color: "down", width: 2.5, cap: "ROUND", join: "ROUND" } });
+        }
+      } else if (c === "state") {
+        const cell = k.stack(row, { direction: "HORIZONTAL", width: w, justify: "MAX", align: "CENTER", name: "State cell" });
+        dot = k.ellipse(cell, 10, s.state === "warn" ? "warn" : "up", { name: "State dot" });
+      } else {
+        const value = c === "p99" ? fmtMs(s.p99) : c === "err" ? s.err : s.rps;
+        const t = k.text(row, value, { style: o.styles.fig, color: c === "err" && s.state === "warn" ? "warn" : "onCard", width: w, align: "RIGHT", name: c === "p99" ? s.anomaly ? "Anomaly p99" : "Row p99" : c === "err" ? "Row errors" : "Row rps" });
+        if (c === "p99") p99 = t;
+      }
+    }
+    rows.push({ row, spark, spike, p99, dot, flag, glow, service: s });
+  });
+  return { head, body: body2, rows, caret };
+}
+function extendSparks(k, rows, at, duration, from = 0.55) {
+  rows.forEach((r, i) => {
+    if (r.spark) k.animate(r.spark, "trim.end", [{ t: at + i * 60, v: from, ease: ease.out("cubic") }, { t: at + i * 60 + duration, v: 1 }]);
+  });
+}
+function resort(k, rows, order, rowH, at, o = {}) {
+  const d = o.duration ?? 600;
+  order.forEach((from, to) => {
+    const dy = (to - from) * rowH;
+    if (!dy) return;
+    const keys = [{ t: at, v: 0, ease: ease.inOut("cubic") }, { t: at + d, v: dy }];
+    if (o.back !== void 0) keys.splice(1, 1, { t: at + d, v: dy, ease: ease.hold }, { t: o.back, v: dy, ease: ease.inOut("cubic") }, { t: o.back + d, v: 0 });
+    k.animate(rows[from].row, "translateY", keys);
+  });
+}
+function spikeRow(k, r, at, o = {}) {
+  const s = SPANWISE;
+  if (r.spike) k.animate(r.spike, "trim.end", o.recover !== void 0 ? [{ t: at, v: 0, ease: ease.out("cubic") }, { t: at + 700, v: 0.5, ease: ease.hold }, { t: o.recover, v: 0.5, ease: ease.inOut("cubic") }, { t: o.recover + 600, v: 1 }] : [{ t: at, v: 0, ease: ease.out("cubic") }, { t: at + 700, v: 1 }]);
+  const steps = [182, 205, 390, 860, 1480, 1960, 2210, 2340];
+  const keys = steps.map((v, i) => ({ t: at + i * (o.tick ?? 90), v: fmtMs(v), ease: ease.hold }));
+  if (o.recover !== void 0) [1720, 940, 410, 236, o.loop ? 182 : 196].forEach((v, i) => keys.push({ t: o.recover + i * (o.tick ?? 90), v: fmtMs(v), ease: ease.hold }));
+  delete keys[keys.length - 1].ease;
+  k.animate(r.p99, "text.content", keys);
+  const on = (id, peak = 1) => {
+    if (!id) return;
+    const ks = [{ t: at, v: 0, ease: ease.out("cubic") }, { t: at + 300, v: peak }];
+    if (o.recover !== void 0) ks.splice(1, 1, { t: at + 300, v: peak, ease: ease.hold }, { t: o.recover + 300, v: peak, ease: ease.inOut("sine") }, { t: o.recover + 900, v: 0 });
+    k.animate(id, "opacity", ks);
+  };
+  on(r.glow);
+  if (r.flag) {
+    k.animate(r.flag, "opacity", o.loop && o.recover !== void 0 ? [{ t: at, v: 0, ease: ease.out("cubic") }, { t: at + 300, v: 1, ease: ease.hold }, { t: o.recover + 400, v: 1, ease: ease.inOut("sine") }, { t: o.recover + 800, v: 0 }] : [{ t: at, v: 0, ease: ease.out("cubic") }, { t: at + 300, v: 1 }]);
+    if (o.recover !== void 0) for (const w of k.named(r.flag, "Flag word")) {
+      k.animate(w, "text.content", [{ t: 0, v: "ANOMALY", ease: ease.hold }, { t: o.recover + 400, v: "ROLLED BACK" }]);
+      k.patch(w, { characters: "ROLLED BACK" });
+    }
+  }
+  k.patch(r.p99, { characters: fmtMs(o.loop ? 182 : o.recover !== void 0 ? s.p99After : s.p99Spike) });
+}
+function kpiRow(k, parent, kpis, o) {
+  const [v, h] = o.pad ?? [14, 18];
+  const row = k.stack(parent, { direction: "HORIZONTAL", name: o.name ?? "Kpi row", ...o.wrap ? { wrap: true, gap: o.gap ?? 0 } : {} });
+  const figs = [], deltas = [];
+  kpis.forEach((p, i) => {
+    const t = k.stack(row, { width: o.wrap ? "HUG" : "FILL", gap: 4, padding: { top: v, right: h, bottom: v, left: h }, name: "Kpi tile" });
+    if (i) k.rect(t, 1, o.ruleH ?? 116, "rule", { name: "Kpi rule", absolute: { x: 0, y: 0 } });
+    k.text(t, p.label, { style: o.labelStyle, color: "cardMuted", autoWidth: true, name: "Kpi label" });
+    figs.push(k.text(t, p.value, { style: o.figStyle, color: "onCard", width: o.figW, name: p.name }));
+    deltas.push(k.text(t, p.delta, { style: o.deltaStyle, color: p.tone, autoWidth: true, name: `${p.name} delta` }));
+  });
+  return { row, figs, deltas };
+}
+function heatMap(k, parent, o) {
+  const step = o.cell + o.gap;
+  const w = o.cols * step - o.gap, h = o.rows * step - o.gap;
+  const root = k.frame(parent, { x: o.absolute?.x ?? 0, y: o.absolute?.y ?? 0, width: w, height: h }, { name: o.name ?? "Heat map" });
+  if (!o.absolute) k.patch(root, { layoutPositioning: "AUTO" });
+  const r = rng(o.seed ?? 7);
+  const cells = [], hot = [];
+  for (let y = 0; y < o.rows; y++) for (let x = 0; x < o.cols; x++) {
+    const isHot = o.hotRow === y && o.hotCol !== void 0 && x >= o.hotCol;
+    const wave = 0.5 + 0.5 * Math.sin(x * 0.45 + y * 0.9);
+    const level = Math.min(1, 0.12 + 0.55 * r() * r() + 0.3 * wave * r());
+    if (isHot) cells.push(k.rect(root, o.cell, o.cell, k.tint("heat", r3((o.dim ?? 1) * (0.1 + 0.8 * level))), { name: "Heat cell", radius: o.radius ?? 2, absolute: { x: x * step, y: y * step } }));
+    const id = k.rect(root, o.cell, o.cell, isHot ? k.tint("down", r3(0.62 + 0.38 * Math.min(1, (x - (o.hotCol ?? 0) + 1) / 3))) : k.tint("heat", r3((o.dim ?? 1) * (0.1 + 0.8 * level))), { name: isHot ? "Hot cell" : "Heat cell", radius: o.radius ?? 2, absolute: { x: x * step, y: y * step } });
+    (isHot ? hot : cells).push(id);
+  }
+  return { root, cells, hot };
+}
+var REGIONS = [
+  { id: "us-west-2", x: 120, y: 170 },
+  { id: "us-east-1", x: 270, y: 200 },
+  { id: "us-east-2", x: 240, y: 150 },
+  { id: "sa-east-1", x: 330, y: 390 },
+  { id: "eu-west-1", x: 470, y: 130 },
+  { id: "eu-central-1", x: 530, y: 150 },
+  { id: "me-south-1", x: 610, y: 240 },
+  { id: "ap-south-1", x: 690, y: 260 },
+  { id: "ap-southeast-1", x: 780, y: 320 },
+  { id: "ap-northeast-1", x: 870, y: 180 },
+  { id: "ap-southeast-2", x: 880, y: 420 },
+  { id: "af-south-1", x: 540, y: 410 },
+  { id: "ca-central-1", x: 250, y: 105 },
+  { id: "eu-north-1", x: 545, y: 85 }
+];
+var LINKS = [
+  ["us-west-2", "us-east-1"],
+  ["us-east-1", "us-east-2"],
+  ["us-east-2", "ca-central-1"],
+  ["us-east-1", "sa-east-1"],
+  ["us-east-1", "eu-west-1"],
+  ["eu-west-1", "eu-central-1"],
+  ["eu-central-1", "eu-north-1"],
+  ["eu-central-1", "me-south-1"],
+  ["me-south-1", "ap-south-1"],
+  ["ap-south-1", "ap-southeast-1"],
+  ["ap-southeast-1", "ap-northeast-1"],
+  ["ap-southeast-1", "ap-southeast-2"],
+  ["eu-west-1", "af-south-1"]
+];
+var LAND = [
+  // x0, x1, y0, y1 blocks, roughly continents
+  [70, 330, 60, 250],
+  [200, 300, 250, 300],
+  [280, 390, 300, 470],
+  [430, 600, 50, 200],
+  [460, 620, 210, 460],
+  [600, 930, 60, 300],
+  [740, 840, 300, 360],
+  [820, 940, 380, 460]
+];
+function landDots(w, h, step = 20, size = 4) {
+  const sx = w / 1e3, sy = h / 500;
+  const out = [];
+  for (let y = 10; y < 500; y += step / sy) for (let x = 10; x < 1e3; x += step / sx) {
+    const inside = LAND.some(([x0, x1, y0, y1]) => x >= x0 && x <= x1 && y >= y0 && y <= y1 && Math.round((x - x0) * 0.7 + (y - y0) * 0.3) % 9 !== 0);
+    if (inside) {
+      const px = x * sx, py = y * sy;
+      out.push({ closed: true, points: [pt3(px, py), pt3(px + size, py), pt3(px + size, py + size), pt3(px, py + size)] });
+    }
+  }
+  return out;
+}
+function regionMap(k, parent, o) {
+  const root = k.frame(parent, { x: o.absolute?.x ?? 0, y: o.absolute?.y ?? 0, width: o.w, height: o.h }, { name: o.name ?? "Region map" });
+  if (!o.absolute) k.patch(root, { layoutPositioning: "AUTO" });
+  const sx = o.w / 1e3, sy = o.h / 500;
+  const land = k.vector(root, o.w, o.h, landDots(o.w, o.h, 14, Math.max(2, 5 * sx)), "cool", { name: "Land", absolute: { x: 0, y: 0 } });
+  const at = (id) => {
+    const r = REGIONS.find((x) => x.id === id);
+    return { x: r.x * sx, y: r.y * sy };
+  };
+  const links = LINKS.map(([a, b]) => {
+    const p = at(a), q = at(b);
+    const len = Math.hypot(q.x - p.x, q.y - p.y), lift = len * 0.18;
+    const c = { x: (p.x + q.x) / 2, y: (p.y + q.y) / 2 - lift };
+    const x0 = Math.min(p.x, q.x, c.x), y0 = Math.min(p.y, q.y, c.y);
+    const w = Math.max(2, Math.max(p.x, q.x, c.x) - x0), h = Math.max(2, Math.max(p.y, q.y, c.y) - y0);
+    const h1 = { x: p.x + (c.x - p.x) * 2 / 3, y: p.y + (c.y - p.y) * 2 / 3 }, h2 = { x: q.x + (c.x - q.x) * 2 / 3, y: q.y + (c.y - q.y) * 2 / 3 };
+    const path = { closed: false, points: [{ ...pt3(p.x - x0, p.y - y0), handleOut: pt3(h1.x - x0, h1.y - y0) }, { ...pt3(q.x - x0, q.y - y0), handleIn: pt3(h2.x - x0, h2.y - y0) }] };
+    return k.vector(root, r3(w), r3(h), [path], [], { name: "Link", absolute: { x: r3(x0), y: r3(y0) }, stroke: { color: "heat", width: Math.max(1.5, 2 * sx), cap: "ROUND" }, opacity: 0.7 });
+  });
+  const d = o.node ?? Math.max(8, Math.round(12 * sx));
+  const nodes = REGIONS.filter((r) => r.id !== "eu-west-1").map((r) => k.ellipse(root, d, "up", { name: "Region node", absolute: { x: r3(r.x * sx - d / 2), y: r3(r.y * sy - d / 2) } }));
+  const hp = at("eu-west-1"), R = d * 3.2;
+  const hotRing = k.ellipse(root, R, k.tint("down", 1e-3), { name: "Hot ring", absolute: { x: r3(hp.x - R / 2), y: r3(hp.y - R / 2) }, stroke: { color: "down", width: 2 } });
+  const hot = k.ellipse(root, d * 1.3, "down", { name: "Hot node", absolute: { x: r3(hp.x - d * 0.65), y: r3(hp.y - d * 0.65) } });
+  if (o.labels && o.style) for (const id of o.labels) {
+    const p = at(id);
+    k.text(root, id, { style: o.style, color: id === "eu-west-1" ? "down" : o.ink ?? "onPaper", autoWidth: true, name: id === "eu-west-1" ? "Hot label" : "Region label", absolute: { x: r3(p.x + d), y: r3(p.y - d * 2.4) } });
+  }
+  return { root, links, nodes, hot, hotRing, land };
+}
+function ping(k, id, loop, every, from = 0) {
+  const n = Math.floor((loop - from) / every);
+  const s = [], a = [];
+  for (let i = 0; i < n; i++) {
+    const t = from + i * every;
+    s.push({ t, v: 0.4, ease: ease.out("cubic") }, { t: t + every - 1, v: 1.6, ease: ease.hold });
+    a.push({ t, v: 1, ease: ease.out("cubic") }, { t: t + every - 1, v: 0, ease: ease.hold });
+  }
+  s.push({ t: from + n * every, v: 0.4 });
+  a.push({ t: from + n * every, v: 1 });
+  k.animate(id, "scaleX", s);
+  k.animate(id, "scaleY", s);
+  k.animate(id, "opacity", a);
+}
+function lockup(k, parent, o) {
+  const c = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: Math.round(o.size * 0.32), name: o.name ?? "Lockup", ...o.absolute ? { absolute: o.absolute } : {} });
+  const tile = k.stack(c, { width: "HUG", fill: "primary", radius: Math.round(o.size * 0.22), padding: Math.round(o.size * 0.18), name: "Logo tile" });
+  k.logo(tile, Math.round(o.size * 0.64), Math.round(o.size * 0.64));
+  k.text(c, "{{brand.name}}", { style: o.style, color: o.ink ?? "text", autoWidth: true, name: "Brand name" });
+  return c;
+}
+function dataButton(k, name, o) {
+  const [v, h] = o.pad ?? [16, 28];
+  k.component(name, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 8, align: "CENTER", padding: { top: v, right: h, bottom: v, left: h }, props: { Label: o.label } }, (id) => {
+    k.propText(id, "Label", { style: o.style, color: "onPrimary", autoWidth: true });
+  });
+}
+function gridPaths(w, h, step) {
+  const out = [];
+  for (let x = step; x < w; x += step) out.push({ closed: true, points: [pt3(x, 0), pt3(x + 1, 0), pt3(x + 1, h), pt3(x, h)] });
+  for (let y = step; y < h; y += step) out.push({ closed: true, points: [pt3(0, y), pt3(w, y), pt3(w, y + 1), pt3(0, y + 1)] });
+  return out;
+}
+function tenantMarquee(k, parent, o) {
+  const period = o.names.length * o.item;
+  const strip = k.stack(parent, { direction: "HORIZONTAL", height: o.height, clip: true, name: o.name ?? "Marquee" });
+  o.names.forEach((n, i) => {
+    const c = k.stack(strip, { direction: "HORIZONTAL", width: o.item, height: o.height, align: "CENTER", gap: 10, absolute: { x: 0, y: 0 }, name: "Tenant" });
+    k.ellipse(c, 8, "up", { name: "Tenant dot" });
+    k.text(c, n, { style: o.style, color: o.ink ?? "text", autoWidth: true, name: "Tenant name" });
+    const x0 = i * o.item, wrapAt = Math.round((x0 + o.item) / period * o.duration);
+    k.patch(c, { translateX: x0 });
+    k.animate(c, "translateX", wrapAt >= o.duration ? [{ t: 0, v: x0, ease: ease.linear }, { t: o.duration, v: x0 - period }] : [{ t: 0, v: x0, ease: ease.linear }, { t: wrapAt - 1, v: -o.item + 1, ease: ease.hold }, { t: wrapAt, v: period - o.item, ease: ease.linear }, { t: o.duration, v: x0 }]);
+  });
+  return strip;
+}
+var MTTR_WEEKS = [47, 46, 44, 45, 41, 38, 36, 37, 33, 30, 28, 27, 25, 22, 21, 20, 18, 17, 15, 15, 13, 12, 11, 10, 9, 9];
+var MONTHLY_SPANS = [312, 365, 428, 497, 561, 640, 734, 862, 1020];
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"];
+var WIDE = ["Stage", "Camera", "Console", "Table body", "Service row", "Anomaly row", "Anomaly glow", "Row rule", "Service cell", "Heat section", "Spans", "Span row", "Slow span", "Slow wash", "Span rule"];
+function widenConsole(k, root, dw) {
+  for (const name of WIDE) for (const id of k.named(root, name)) {
+    const n = k.node(id);
+    k.patch(id, { width: n.width + dw });
+  }
+}
+
+export {
+  SPANWISE,
+  CUSTOMERS,
+  dataBrand,
+  display,
+  body,
+  label,
+  figure,
+  code,
+  ts,
+  panelFx,
+  panel,
+  filterChip,
+  rangePicker,
+  series,
+  sparkPath,
+  sparkArea,
+  SERVICES,
+  sortedByP99,
+  fmtMs,
+  SPIKE_TAIL,
+  rowSeries,
+  servicesTable,
+  extendSparks,
+  resort,
+  spikeRow,
+  kpiRow,
+  heatMap,
+  REGIONS,
+  LINKS,
+  landDots,
+  regionMap,
+  ping,
+  lockup,
+  dataButton,
+  gridPaths,
+  tenantMarquee,
+  MTTR_WEEKS,
+  MONTHLY_SPANS,
+  MONTHS,
+  widenConsole
+};

package/dist/chunks/chunk-G3ZJPXTX.js

@@ -0,0 +1,69 @@
+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 {
+  caption,
+  comicMeta,
+  comicSetup,
+  pageGrid,
+  panel,
+  rectFrame,
+  rows,
+  say,
+  sfx,
+  slantTier,
+  tierBox
+} from "./chunk-NMOHNZTQ.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/print/comic-modern-page-classic.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function blackoutPage(k, sheet) {
+  const g = 12, { W, H } = pageGrid(k, sheet, 36, g);
+  const [h1, h2, h3] = rows(H, g, [30, 32, 38]);
+  const t1 = tierBox(k, sheet, W, h1, "Tier 1");
+  panel(k, t1, rectFrame(0, 0, W, h1), { art: "p1-city", focus: [0.55, 0.45] }, { ground: "g1", name: "Establishing" });
+  caption(k, t1, "It started with the lights going out, block by block.", { x: 10, y: 10, width: 210 });
+  const t2 = tierBox(k, sheet, W, h2, "Tier 2");
+  const [a, b] = slantTier(W, h2, [5, 4], 22, g);
+  panel(k, t2, a, { art: "p1-blackout", focus: [0.45, 0.4] }, { ground: "g2", name: "The street" });
+  panel(k, t2, b, { art: "p1-window", focus: [0.4, 0.45] }, { ground: "g3", name: "Teo at the window" });
+  caption(k, t2, "10:00 p.m. Every street in the city, all at once.", { x: 10, y: h2 - 58, width: 150 });
+  say(k, t2, "Tell me you saw that.", { x: b.x + 14, y: 10, width: 150, to: { x: b.x + b.width * 0.24, y: h2 * 0.36 } });
+  say(k, t2, "Saw what? I can\u2019t see anything.", { x: b.x + b.width - 140, y: h2 * 0.42, width: 128, to: { x: b.x + b.width * 0.62, y: h2 * 0.58 } });
+  const t3 = tierBox(k, sheet, W, h3, "Tier 3");
+  panel(k, t3, rectFrame(0, 0, W, h3), { art: "p1-close", focus: [0.5, 0.42] }, { ground: "g4", name: "Close-up" });
+  const inset = rectFrame(W - 168, h3 - 182, 152, 166);
+  panel(k, t3, inset, { art: "g5", focus: [0.5, 0.35] }, { ground: "g5", name: "Inset: the tower", keyline: 6 });
+  say(k, t3, "Not everything is out. Look. The old radio tower.", { x: 14, y: 14, width: 150, to: { x: W * 0.3, y: h3 * 0.36 } });
+  say(k, t3, "Somebody\u2019s up there.", { x: W * 0.52, y: 14, width: 110, to: { x: W * 0.66, y: h3 * 0.46 } });
+  sfx(k, t3, "Click", { x: 18, y: h3 - 92, w: 150, h: 76, deg: -8, seed: 4 });
+}
+var comic_modern_page_classic_default = defineTemplate({
+  id: "comic-page-classic",
+  meta: comicMeta("Comic page (six panel)", 'Page one of "The Long Night", in modern painted comic art: Harbour City going dark from above, the street looking up, Teo at the window, and a torch-lit close-up with an inset of the one light left on', ["panels", "grid", "establishing shot"]),
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Comic page (six panel)", preset("comic-page"));
+    comicSetup(k);
+    blackoutPage(k, k.sheet);
+    return k.finish();
+  }
+});
+
+export {
+  blackoutPage,
+  comic_modern_page_classic_default
+};