@popcraft/kit 0.26.0 → 0.27.0

package/dist/chunks/chunk-2L6C5PWP.js

@@ -1,468 +0,0 @@
-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,
-  rng
-} from "./chunk-BNVLVZUT.js";
-import {
-  ease
-} from "./chunk-6DWY3DOQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.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-2LQGEK5W.js

@@ -1,187 +0,0 @@
-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 {
-  SALE,
-  drain,
-  fitRays,
-  liveBadge,
-  liveBrand,
-  nightPill,
-  numerals,
-  numeralsWidth,
-  parcel,
-  pennants,
-  pinned,
-  rays,
-  reactions
-} from "./chunk-JHCUMBCF.js";
-import {
-  MONO
-} from "./chunk-X23ZWFW2.js";
-import {
-  outro,
-  pill,
-  postVariants
-} from "./chunk-EK5CFFJO.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-T3SGRYUX.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/motion/singles-day-flash-post.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var LOOP = 8e3;
-var TICKS = 6;
-var SELLING = 1600;
-var SOLD = 11;
-var EVERY = 500;
-var CONTENT = ["Top", "Headline", "Skyline", "Deal", "Button"];
-var TOWER = 296;
-var DEPTH = 32;
-var SKY = { w: Math.round(numeralsWidth(TOWER)) + DEPTH, h: 372 };
-var HEAP_H = 400;
-var HEAP = [
-  { x: -30, w: 250, h: 210, label: true },
-  { x: 20, w: 150, h: 120, on: 210 },
-  { x: 236, w: 190, h: 140 },
-  { x: 270, w: 110, h: 84, on: 140 },
-  { x: 444, w: 230, h: 104, label: true },
-  { x: 690, w: 170, h: 170 },
-  { x: 842, w: 270, h: 240, label: true },
-  { x: 900, w: 150, h: 104, on: 240 },
-  { x: 716, w: 110, h: 80, on: 170 }
-];
-var cues = [
-  { layer: "Top", preset: "fade-in", at: 0, params: { duration: 300 } },
-  { layer: "Headline", preset: "drop-in", at: 0, params: { duration: 450 } },
-  { layer: "Skyline", preset: "fade-in", at: 0, params: { duration: 200 } },
-  { layer: "Numeral", preset: "rise-in", at: 120, params: { duration: 520 }, stagger: { delay: 110 } },
-  { layer: "Bunting", preset: "fade-in", at: 900, params: { duration: 400 } },
-  { layer: "Deal", preset: "rise-in", at: 500, params: { duration: 550 } },
-  { layer: "Was strike", preset: "wipe-in", at: 1200, params: { duration: 280 } },
-  { layer: "Off chip", preset: "pop-in", at: 2e3, params: { duration: 320 } },
-  { layer: "Price figure", preset: "pulse", at: 2e3, params: { duration: 500, amount: 0.1 } },
-  { layer: "Button", preset: "pop-in", at: 1e3, params: { duration: 380 } },
-  { layer: "Button", preset: "pulse", at: 4600, params: { duration: 600, amount: 0.06 } },
-  outro(CONTENT, 7200)
-];
-var counts = [
-  { layer: "Watching figure", at: 0, duration: 2400, counter: { from: 1011, to: 1111, suffix: " watching" } },
-  { layer: "Price figure", at: 1200, duration: 800, counter: { from: SALE.was, to: SALE.now, prefix: "$" } },
-  { layer: "Seconds figure", at: 1e3, duration: TICKS * 1e3, tick: 1e3, counter: { from: SALE.seconds, to: SALE.seconds - TICKS } },
-  { layer: "Stock figure", at: SELLING, duration: SOLD * EVERY, tick: EVERY, counter: { from: SALE.left + SOLD, to: SALE.left, suffix: ` of ${SALE.seats} seats left` } }
-];
-var singles_day_flash_post_default = defineTemplate({
-  id: "motion-singles-day-flash-post",
-  meta: {
-    name: "Singles Day flash deal countdown post",
-    description: "A last-call post for an 11.11 SaaS sale on a ground of mint: the date rises as four tower blocks with their lights on, parcels at their feet and hearts floating up, over a pinned deal whose price counts from $29 to $11 while a flash clock ticks real seconds and a \u201Cselling fast\u201D bar runs down a seat every half second. Eight seconds, looping, square with 4:5 and 9:16 cuts",
-    category: "animation",
-    tags: ["animation", "singles day", "11.11", "double eleven", "flash sale", "countdown", "timer", "stock", "selling fast", "solo founder", "saas", "post", "deadline", "seasonal"],
-    platforms: ["instagram", "x", "linkedin", "facebook", "threads"],
-    formats: ["post", "portrait-post", "story", "ad"],
-    useCases: ["countdown", "sale", "pricing"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, loop: true },
-  build() {
-    const k = new Kit("Singles Day flash deal countdown post", preset("ig-post"));
-    k.quantizeGeometry = true;
-    liveBrand(k, {}, ["primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
-    k.textStyle("Live 24", { ...MONO, size: 24, fontWeight: 800, letterSpacing: 2, lineHeight: 30 });
-    k.textStyle("Watching 22", { ...MONO, size: 22, fontWeight: 700, lineHeight: 30, fontFeatures: { tnum: 1 } });
-    k.textStyle("Display 104", { size: 104, fontWeight: 900, letterSpacing: -4.6, lineHeight: 100 });
-    k.textStyle("Display 88", { size: 88, fontWeight: 900, letterSpacing: -3.8, lineHeight: 88 });
-    k.textStyle("Lot 20", { ...MONO, size: 20, fontWeight: 700, letterSpacing: 1.4, lineHeight: 26 });
-    k.textStyle("Title 30", { size: 30, fontWeight: 800, letterSpacing: -0.6, lineHeight: 36 });
-    k.textStyle("Price 96", { size: 96, fontWeight: 900, letterSpacing: -4.6, lineHeight: 92, fontFeatures: { tnum: 1 } });
-    k.textStyle("Was 42", { size: 42, fontWeight: 700, letterSpacing: -1.4, lineHeight: 48 });
-    k.textStyle("Chip 24", { ...MONO, size: 24, fontWeight: 800, lineHeight: 30 });
-    k.textStyle("Clock 52", { ...MONO, size: 52, fontWeight: 800, letterSpacing: -1.4, lineHeight: 54, fontFeatures: { tnum: 1 } });
-    k.textStyle("Unit 18", { ...MONO, size: 18, fontWeight: 700, letterSpacing: 1.8, lineHeight: 22 });
-    k.textStyle("Stock 22", { ...MONO, size: 22, fontWeight: 800, letterSpacing: 0.6, lineHeight: 28, fontFeatures: { tnum: 1 } });
-    k.textStyle("Button 32", { size: 32, fontWeight: 800, letterSpacing: -0.4, lineHeight: 40 });
-    pill(k, "Seat button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: `Grab a seat \xB7 ${SALE.link}`, pad: [20, 40] });
-    pill(k, "Chip", { fill: "accent", ink: "onAccent", style: "Chip 24", label: `\u2212${SALE.off}%`, pad: [6, 14], radius: 10 });
-    const sheet = k.sheet;
-    k.nameSheet(sheet, "Flash post");
-    k.flowSheet(sheet, 14, 56, "accent", "CENTER", "CENTER");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: LOOP, fps: 30 });
-    rays(k, sheet, { w: 1080, h: 1080, cx: 540, cy: 470, opacity: 0.07 });
-    const flagsTop = k.frame(sheet, { x: 0, y: 0, width: 1080, height: 240 }, { name: "Tall bunting" });
-    pennants(k, flagsTop, { x: -20, y: 64, w: 1120, sag: 60, u: 1.3, colors: ["primary", "white", "night", "heart"] });
-    const heap = k.frame(sheet, { x: 0, y: 1080, width: 1080, height: HEAP_H }, { name: "Tall parcels" });
-    for (const p of HEAP) parcel(k, heap, p.x, HEAP_H - (p.on ?? 0), p, 1);
-    for (const n of [flagsTop, heap]) k.patch(n, { visible: false });
-    const top = k.stack(sheet, { direction: "HORIZONTAL", gap: 12, align: "CENTER", justify: "CENTER", name: "Top" });
-    liveBadge(k, top, { style: "Live 24", loopMs: LOOP, dark: true });
-    nightPill(k, top, "1,111 watching", { style: "Watching 22", name: "Watching" });
-    nightPill(k, top, "SINGLES\u2019 DAY \xB7 11.11", { style: "Watching 22", name: "Day" });
-    k.text(sheet, "Party of one? $11.", { style: "Display 104", color: "onAccent", align: "CENTER", name: "Headline" });
-    const sky = k.stack(sheet, { width: SKY.w, height: SKY.h, name: "Skyline" });
-    numerals(k, sky, { h: TOWER, absolute: { x: 0, y: SKY.h - TOWER - DEPTH }, depth: DEPTH, loopMs: LOOP });
-    reactions(k, sky, { w: SKY.w - 60, h: 360, n: 10, u: 1.1, loopMs: LOOP, from: 900, seed: 7, absolute: { x: 30, y: -30 }, colors: ["heart", "white", "night", "heart", "primary", "white"] });
-    const flags = k.frame(sky, { x: 0, y: 0, width: SKY.w, height: 120 }, { name: "Bunting" });
-    pennants(k, flags, { x: TOWER * 0.32, y: SKY.h - TOWER - DEPTH - 6, w: SKY.w - DEPTH - TOWER * 0.5, sag: 30, u: 0.6, colors: ["white", "heart", "night", "foil"] });
-    const foot = SKY.h - DEPTH + 10;
-    parcel(k, sky, TOWER * 1.42 + 8, SKY.h - DEPTH - TOWER * 0.2 + 2, { x: 0, w: 44, h: 36 }, 1);
-    parcel(k, sky, -34, foot, { x: 0, w: 96, h: 84, label: true }, 1);
-    parcel(k, sky, SKY.w - 96, foot, { x: 0, w: 110, h: 70 }, 1);
-    parcel(k, sky, SKY.w - 70, foot - 70, { x: 0, w: 64, h: 52 }, 1);
-    pinned(k, sheet, {
-      lot: "PINNED \xB7 LOT 01 \xB7 FLASH DEAL",
-      title: "{{brand.name}} Solo, first month",
-      price: `$${SALE.now}`,
-      was: `$${SALE.was}`,
-      chip: "Chip",
-      saving: `\u2212${SALE.off}%`,
-      left: SALE.left,
-      total: SALE.seats,
-      suffix: ` of ${SALE.seats} seats left`,
-      seconds: SALE.seconds - TICKS,
-      styles: { lot: "Lot 20", title: "Title 30", price: "Price 96", was: "Was 42", stock: "Stock 22", clock: "Clock 52", unit: "Unit 18" },
-      pad: { top: 22, right: 28, bottom: 24, left: 28 },
-      gap: 12,
-      radius: 32,
-      bar: 22
-    });
-    k.instance(sheet, "Seat button", { Label: `Grab a seat \xB7 ${SALE.link}` }, { name: "Button" });
-    drain(k, sheet, { from: (SALE.left + SOLD) / SALE.seats, to: SALE.left / SALE.seats, at: SELLING, duration: SOLD * EVERY });
-    k.counts(sheet, counts);
-    k.cues(sheet, cues);
-    k.variants(sheet, postVariants({ portrait: 72 }, {
-      portrait: (kit, id) => {
-        kit.patch(id, { itemSpacing: 34, counterAxisSpacing: 34 });
-        fitRays(kit, id, { w: 1080, h: 1350, cx: 540, cy: 600 });
-      },
-      // Inside the vertical apps' safe area the column is 800 wide: the headline steps down, the towers stand a little
-      // into the margins, and the pennants and the parcels fill what the square has no room for.
-      vertical: (kit, id) => {
-        kit.patch(id, { itemSpacing: 38, counterAxisSpacing: 38 });
-        fitRays(kit, id, { w: 1080, h: 1920, cx: 540, cy: 760 });
-        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Display 88");
-        for (const n of kit.named(id, "Tall bunting")) kit.patch(n, { visible: true, x: 0, y: 0, width: 1080, height: 240 });
-        for (const n of kit.named(id, "Tall parcels")) kit.patch(n, { visible: true, x: 0, y: 1920 - HEAP_H, width: 1080, height: HEAP_H });
-      }
-    }));
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-
-export {
-  singles_day_flash_post_default
-};