@popcraft/kit 0.53.4 → 0.53.5

package/dist/chunks/chunk-LH4EF7WS.js

@@ -0,0 +1,177 @@
+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_SPANS,
+  MONTHS,
+  SPANWISE,
+  body,
+  code,
+  dataBrand,
+  display,
+  figure,
+  heatMap,
+  label,
+  lockup,
+  panel,
+  ts
+} from "./chunk-QMU6HJDZ.js";
+import {
+  drawOn
+} from "./chunk-CLQ3FUJI.js";
+import {
+  board,
+  hide,
+  reboard,
+  restyle
+} from "./chunk-LWSZATOL.js";
+import {
+  postVariants
+} from "./chunk-KOAJ6HD2.js";
+import {
+  pt3
+} from "./chunk-EJLCQVQK.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/social/style-data-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Data SaaS milestone post";
+var DURATION = 8e3;
+var CHART = { w: 888, h: 300 };
+var TOP = 1100;
+var BARS = 400;
+var STEP = 180;
+var cues = [
+  { layer: "Top row", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Unit", preset: "words-in", at: 200, params: { duration: 700 } },
+  { layer: "Month row", preset: "slide-in", at: 2400, stagger: { delay: 160, order: "selection" }, params: { direction: "left", distance: 40, duration: 420 } },
+  { layer: "Trillion line", preset: "fade-in", at: BARS + 8 * STEP + 300, params: { duration: 400 } },
+  { layer: "Thanks", preset: "fade-in", at: 3400, params: { duration: 600 } },
+  { layer: "Big figure", preset: "pulse", at: 3e3, params: { duration: 800, amount: 0.03 } }
+];
+var counts = [
+  { layer: "Big figure", at: 200, duration: 2600, counter: { from: 0, to: SPANWISE.trillion, decimals: 2 } }
+];
+var style_data_milestone_default = defineTemplate({
+  id: "social-saas-style-data-milestone",
+  meta: {
+    name: NAME,
+    description: "An animated milestone post in a data-dense enterprise look for an observability platform: 1.02 trillion spans in a month counts up in big tabular figures while the year's months rise as bars on a ruled console chart, a line draws through their tops and a dashed trillion line lights as September crosses it, over a small table of the last three months. Square with 4:5 and 9:16 cuts",
+    category: "social",
+    tags: ["social", "post", "milestone", "metric", "counter", "chart", "bar chart", "saas", "data", "dashboard", "enterprise", "observability", "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;
+    dataBrand(k);
+    ts(k, "Brand 30", display(30));
+    ts(k, "Label 20", label(20));
+    ts(k, "Figure 190", figure(190));
+    ts(k, "Figure 220", figure(220));
+    ts(k, "Unit 42", display(42, { lead: 1.12 }));
+    ts(k, "Axis 18", figure(18, 500));
+    ts(k, "Tag 18", label(18));
+    ts(k, "Head 17", label(17));
+    ts(k, "Cell 24", figure(24, 500));
+    ts(k, "Mono 24", code(24));
+    ts(k, "Thanks 26", body(26, 500));
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Milestone");
+    k.flowSheet(sheet, 22, 72, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
+    lockup(k, top, { size: 48, style: "Brand 30" });
+    k.text(top, "SEPTEMBER 2026 \xB7 MILESTONE", { style: "Label 20", color: "onPaper", autoWidth: true, name: "Kicker" });
+    const fig = k.stack(sheet, { direction: "HORIZONTAL", gap: 28, align: "CENTER", name: "Figure row" });
+    k.text(fig, SPANWISE.trillion.toFixed(2), { style: "Figure 190", color: "text", width: 380, name: "Big figure" });
+    k.text(fig, "trillion spans indexed in one month. Every one kept.", { style: "Unit 42", color: "text", name: "Unit" });
+    const con = panel(k, sheet, { gap: 8, padding: { top: 20, right: 24, bottom: 16, left: 24 }, name: "Chart panel" });
+    const cb = board(k, con, CHART.w, CHART.h + 30, 1, "Chart board");
+    const plotH = CHART.h, x0 = 70, plotW = CHART.w - x0;
+    const yOf = (v) => Math.round(plotH - v / TOP * plotH);
+    for (const [v, t] of [[0, "0"], [500, "500 B"], [1e3, "1 T"]]) {
+      k.rect(cb, plotW, 1, "line", { name: "Grid line", absolute: { x: x0, y: yOf(v) } });
+      k.text(cb, t, { style: "Axis 18", color: "cardMuted", autoWidth: true, name: "Grid label", absolute: { x: 0, y: yOf(v) - 12 } });
+    }
+    const tl = k.vector(cb, plotW, 4, [{ closed: false, points: [pt3(0, 2), pt3(plotW, 2)] }], [], { name: "Trillion line", absolute: { x: x0, y: yOf(1e3) - 2 }, stroke: { color: "warn", width: 2, dash: [6, 10], cap: "ROUND" } });
+    void tl;
+    const slot = plotW / MONTHLY_SPANS.length, bw = Math.round(slot * 0.56);
+    const tops = [];
+    MONTHLY_SPANS.forEach((v, i) => {
+      const x = Math.round(x0 + slot * i + (slot - bw) / 2), h = plotH - yOf(v);
+      const last = i === MONTHLY_SPANS.length - 1;
+      const bar = k.rect(cb, bw, h, last ? "primary" : "cool", { name: last ? "Last bar" : "Bar", radius: 3, absolute: { x, y: yOf(v) } });
+      k.patch(bar, { anchorY: 1 });
+      k.animate(bar, "scaleY", [{ t: BARS + i * STEP, v: 0, ease: ease.out("cubic") }, { t: BARS + i * STEP + 520, v: 1 }]);
+      k.text(cb, MONTHS[i], { style: "Axis 18", color: last ? "onCard" : "cardMuted", width: Math.round(slot), align: "CENTER", name: "Month label", absolute: { x: Math.round(x0 + slot * i), y: plotH + 8 } });
+      tops.push({ x: x - x0 + bw / 2, y: yOf(v) });
+    });
+    const line = k.vector(cb, plotW, plotH, [{ closed: false, points: tops.map((p) => pt3(p.x, p.y)) }], [], { name: "Top line", absolute: { x: x0, y: 0 }, stroke: { color: "onCard", width: 2.5, cap: "ROUND", join: "ROUND" } });
+    drawOn(k, line, BARS + 200, 8 * STEP + 400);
+    const tag = k.stack(cb, { direction: "HORIZONTAL", width: "HUG", fill: "warn", radius: 4, padding: { top: 3, right: 8, bottom: 3, left: 8 }, name: "Trillion tag", absolute: { x: x0 + 8, y: yOf(1e3) - 34 } });
+    k.text(tag, "1 TRILLION", { style: "Tag 18", color: "well", autoWidth: true, name: "Tag words" });
+    k.animate(tag, "opacity", [{ t: BARS + 8 * STEP + 300, v: 0, ease: ease.out("cubic") }, { t: BARS + 8 * STEP + 700, v: 1 }]);
+    const tb = panel(k, sheet, { name: "Month table" });
+    const th = k.stack(tb, { direction: "HORIZONTAL", height: 38, align: "CENTER", padding: { top: 0, right: 24, bottom: 0, left: 24 }, fill: "well", name: "Month head" });
+    for (const [t, w] of [["MONTH", "FILL"], ["SPANS", 260], ["VS PRIOR", 200]]) k.text(th, t, { style: "Head 17", color: "cardMuted", width: w, align: w === "FILL" ? "LEFT" : "RIGHT", name: "Month col" });
+    for (const i of [6, 7, 8]) {
+      const v = MONTHLY_SPANS[i], prev = MONTHLY_SPANS[i - 1];
+      const r = k.stack(tb, { direction: "HORIZONTAL", height: 48, align: "CENTER", padding: { top: 0, right: 24, bottom: 0, left: 24 }, name: "Month row" });
+      k.text(r, `${MONTHS[i]} 2026`, { style: "Mono 24", color: "onCard", width: "FILL", name: "Month name" });
+      k.text(r, `${v.toLocaleString("en-US")} B`, { style: "Cell 24", color: "onCard", width: 260, align: "RIGHT", name: "Month spans" });
+      k.text(r, `\u2191 ${((v - prev) / prev * 100).toFixed(1)}%`, { style: "Cell 24", color: "up", width: 200, align: "RIGHT", name: "Month growth" });
+    }
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Thanks" });
+    k.text(foot, "Thank you to the 1,900 platform teams who sent them.", { style: "Thanks 26", color: "onPaper", autoWidth: true, name: "Thanks line" });
+    k.component("Site pill", { direction: "HORIZONTAL", width: "HUG", radius: 6, align: "CENTER", padding: { top: 8, right: 14, bottom: 8, left: 14 }, fill: "card", stroke: { color: "line", width: 1, align: "INSIDE" }, props: { Label: "{{brand.site}}" } }, (id) => {
+      k.propText(id, "Label", { style: "Mono 24", color: "onCard", autoWidth: true });
+    });
+    k.instance(foot, "Site pill", { Label: "{{brand.site}}" }, { name: "Site" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      portrait: (kit, id) => {
+        kit.patch(id, { itemSpacing: 30 });
+      },
+      vertical: (kit, id) => {
+        kit.patch(id, { primaryAxisAlignItems: "SPACE_BETWEEN", itemSpacing: 34 });
+        for (const f of kit.named(id, "Figure row")) kit.patch(f, { layoutMode: "VERTICAL", itemSpacing: 0 });
+        restyle(kit, id, "Big figure", "Figure 220");
+        for (const t of kit.named(id, "Big figure")) kit.patch(t, { width: 800 });
+        for (const t of kit.named(id, "Unit")) kit.patch(t, { layoutSizingHorizontal: "FILL" });
+        reboard(kit, id, "Chart board", (800 - 48) / CHART.w);
+        hide(kit, id, ["Thanks line"]);
+        heatMap(kit, id, { cols: 36, rows: 14, cell: 26, gap: 4, hotRow: 5, hotCol: 30, name: "Heat foot", absolute: { x: 2, y: 1474 }, dim: 0.85 });
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_data_milestone_default
+};

package/dist/chunks/chunk-LHZXBPGT.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 {
+  FOLIO,
+  caption,
+  comicMeta,
+  comicSetup,
+  folio,
+  pageGrid,
+  panel,
+  rows,
+  say,
+  sfx,
+  slantTier,
+  tierBox,
+  tilted
+} from "./chunk-AGL7MNPF.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/print/comic-hero-manga-action.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var comic_hero_manga_action_default = defineTemplate({
+  id: "comic-manga-action",
+  meta: comicMeta("Manga action page", 'Page nine of "Nightstar: Blackout": the finishing blow on steep diagonal frames, Nightstar coming straight at the reader, Voltrix out of power, the punch through his armour with "KRAKKOOM!" and him flying through a truck', ["manga", "action", "diagonal", "speed", "sound effects"]),
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Manga action page", preset("comic-page"));
+    comicSetup(k);
+    drawPage(k);
+    return k.finish();
+  }
+});
+function drawPage(k) {
+  const g = 12, { W, H } = pageGrid(k, k.sheet, 36, g);
+  const [h1, h2, h3] = rows(H - FOLIO, g, [38, 34, 28]);
+  const t1 = tierBox(k, k.sheet, W, h1, "Tier 1");
+  const [a, b] = slantTier(W, h1, [3, 2], 44, g);
+  panel(k, t1, a, "manga-1", { ground: "heroG1", name: "Straight at him" });
+  panel(k, t1, b, "manga-2", { ground: "heroG2", name: "No power left" });
+  say(k, t1, "This one\u2019s for the city.", { x: 10, y: 10, width: 128, to: { x: a.width * 0.4, y: h1 * 0.3 } });
+  say(k, t1, "W-wait\u2014", { x: W - 108, y: h1 - 80, width: 96, to: { x: b.x + b.width * 0.6, y: h1 * 0.4 } });
+  const t2 = tierBox(k, k.sheet, W, h2, "Tier 2");
+  panel(k, t2, tilted(0, 0, W, h2, -30, 30), "manga-3", { ground: "heroG3", name: "The hit" });
+  sfx(k, t2, "Krakkoom!", { x: 20, y: h2 - 150, w: 480, h: 140, deg: -7, big: true, fill: "primary", seed: 23 });
+  const t3 = tierBox(k, k.sheet, W, h3, "Tier 3");
+  const [c, d] = slantTier(W, h3, [2, 3], -30, g);
+  panel(k, t3, c, "manga-4", { ground: "heroG1", name: "His eyes" });
+  panel(k, t3, d, "manga-5", { ground: "heroG2", name: "Through the truck" });
+  caption(k, t3, "Lights out, Voltrix.", { x: W - 170, y: h3 - 44, width: 160 });
+  folio(k, k.sheet, "Nightstar: Blackout \u2014 page 9");
+}
+
+export {
+  comic_hero_manga_action_default,
+  drawPage
+};

package/dist/chunks/chunk-LIQOD3OU.js

@@ -0,0 +1,290 @@
+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 {
+  SPANWISE,
+  body,
+  code,
+  dataBrand,
+  display,
+  figure,
+  label,
+  panel
+} from "./chunk-QMU6HJDZ.js";
+import {
+  CONTENT,
+  compactNav,
+  footer,
+  respond,
+  typeScale
+} from "./chunk-YHF6LRMF.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-ZMD3C2YJ.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/web/style-data-pricing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Data SaaS pricing page";
+var DURATION = 6e3;
+var usd = (n) => `$${n.toLocaleString("en-US")}`;
+var HOSTS = 200;
+var PLANS = [
+  { name: "Free", pitch: "Five hosts, to try it on a real service.", month: 0, year: 0, free: true, cta: "Start free", lines: ["Up to 5 hosts", "3-day retention", "Anomaly detection", "Community support"] },
+  { name: "Team", pitch: "For one platform team and its on-call rota.", month: SPANWISE.team, year: SPANWISE.teamYear, cta: "Start a 14-day trial", lines: ["Up to 200 hosts", "15-day retention", "Slack and PagerDuty", "Deploy markers"] },
+  { name: "Business", pitch: "For every team that ships to production.", month: SPANWISE.business, year: SPANWISE.businessYear, cta: "Start a 14-day trial", featured: true, lines: ["Unlimited hosts", "30-day retention", "Change correlation", "SSO and SCIM"] },
+  { name: "Enterprise", pitch: "For banks, airlines and health systems.", custom: "Talk to us", cta: "Book a call", lines: ["13-month retention", "Your own region", "99.95% uptime SLA", "Private link"] }
+];
+var COMPARE = [
+  ["Hosts", "5", "200", "Unlimited", "Unlimited"],
+  ["Spans kept, unsampled", true, true, true, true],
+  ["Retention", "3 days", "15 days", "30 days", "13 months"],
+  ["Anomaly detection on p99 and errors", true, true, true, true],
+  ["Deploy markers", false, true, true, true],
+  ["Change correlation (names the deploy)", false, false, true, true],
+  ["SSO and SCIM", false, false, true, true],
+  ["Audit log export", false, false, false, true],
+  ["Uptime SLA", "\u2014", "99.9%", "99.9%", "99.95%"]
+];
+var FAQ = [
+  ["What counts as a host?", "Any machine, VM or Kubernetes node that sends spans in a month, counted at the 95th percentile so a scale-out day does not raise your bill."],
+  ["Do you sample my traces?", "No. Every span is kept for your retention period. Sampling is how regressions in the slowest one percent go unseen."],
+  ["What if we grow past our plan?", "Nothing stops. Extra hosts are billed at your plan\u2019s rate for the days they ran, and we email you at 80% of your commitment."],
+  ["Can we run it in our own region?", "On Enterprise, yes: a dedicated region in AWS, Google Cloud or Azure, with private link and your own keys."]
+];
+var TYPE = {
+  "Nav 15": body(15, 500),
+  "Brand 20": display(20),
+  "Button 16": display(16),
+  "Label 12": label(12),
+  "Label 13": label(13),
+  "Ui 15": body(15, 500),
+  "Ui 15 on": display(15),
+  "Mono 13": code(13),
+  "Mono 14": code(14),
+  "Display 56": display(56, { center: true, lead: 1.06 }),
+  "Display 40": display(40, { center: true, lead: 1.1 }),
+  "Display 32": display(32, { center: true, lead: 1.12 }),
+  "Lead 19": { ...body(19), textAlign: "CENTER" },
+  "Lead 17": { ...body(17), textAlign: "CENTER" },
+  "Plan 22": display(22),
+  "Body 15": body(15),
+  "Small 13": body(13),
+  "Price 52": figure(52),
+  "Custom 40": display(40),
+  "Price 40": figure(40),
+  "Fig 14": figure(14, 600),
+  "Section 32": display(32, { lead: 1.15 }),
+  "Section 26": display(26, { lead: 1.2 }),
+  "Q 17": display(17),
+  "Close 44": display(44, { center: true }),
+  "Close 32": display(32, { center: true })
+};
+var STEPS = {
+  "Display 56": { tablet: "Display 40", mobile: "Display 32" },
+  "Lead 19": { mobile: "Lead 17" },
+  "Price 52": { mobile: "Price 40" },
+  "Section 32": { mobile: "Section 26" },
+  "Close 44": { mobile: "Close 32" }
+};
+var cues = [
+  { layer: "Headline", preset: "words-in", at: 0, params: { duration: 800 } },
+  { layer: "Plan", preset: "rise-in", at: 300, stagger: { delay: 140, order: "selection" }, params: { duration: 700, distance: 24 } },
+  { layer: "Compare row", preset: "slide-in", at: 1100, stagger: { delay: 80, order: "selection" }, params: { direction: "left", distance: 30, duration: 420 } },
+  { layer: "Saving", preset: "pulse", at: 2600, params: { duration: 800, amount: 0.05 } }
+];
+var style_data_pricing_default = defineTemplate({
+  id: "web-saas-style-data-pricing",
+  meta: {
+    name: NAME,
+    description: "A pricing page in a data-dense enterprise look for an observability platform, whose monthly / annual switch works in present mode: page variables flip every per-host price and the worked example for 200 hosts at once while the knob slides. Four plans on graphite panels (the featured one ruled in cobalt), a comparison table with a state dot for every yes, procurement questions, a closing call and a footer. Desktop to phone",
+    category: "web",
+    tags: ["pricing", "plans", "toggle", "interactive", "variables", "comparison", "faq", "saas", "data", "enterprise", "observability", "devops", "b2b", "table", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["pricing", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit(NAME, preset("web-desktop"));
+    k.quantizeGeometry = true;
+    dataBrand(k);
+    const s = typeScale(k, { ...TYPE });
+    buttons(k, { style: s("Button 16"), pad: [13, 22], radius: 8 });
+    k.component("Button card", { direction: "HORIZONTAL", width: "HUG", radius: 8, align: "CENTER", padding: { top: 13, right: 22, bottom: 13, left: 22 }, stroke: { color: "onCard", width: 1.5 }, props: { Label: "Start free" } }, (id) => {
+      k.propText(id, "Label", { style: s("Button 16"), color: "onCard", autoWidth: true });
+    });
+    const monthly = k.variable("Billing", "monthly", "BOOLEAN", true);
+    const annual = k.variable("Billing", "annual", "BOOLEAN", false);
+    k.variantSet("Billing switch", "Billing", ["Monthly", "Annual"], {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      gap: 12,
+      align: "CENTER",
+      padding: { top: 8, right: 14, bottom: 8, left: 14 },
+      radius: 8,
+      fill: "card",
+      stroke: { color: "line", width: 1, align: "INSIDE" },
+      description: "Monthly or annual billing: click to switch, and the knob slides across. On the pricing page the click also flips the billing variables every price is bound to.",
+      props: { Left: "Monthly", Right: "Annual" }
+    }, (state, id) => {
+      k.propText(id, "Left", { style: s(state === "Monthly" ? "Ui 15 on" : "Ui 15"), color: state === "Monthly" ? "onCard" : "cardMuted", autoWidth: true });
+      const track = k.stack(id, { direction: "HORIZONTAL", width: 48, height: 26, radius: 6, padding: 3, align: "CENTER", justify: state === "Annual" ? "MAX" : "MIN", fill: "primary", name: "Track" });
+      k.rect(track, 20, 20, "onPrimary", { name: "Knob", radius: 4 });
+      k.propText(id, "Right", { style: s(state === "Annual" ? "Ui 15 on" : "Ui 15"), color: state === "Annual" ? "onCard" : "cardMuted", autoWidth: true });
+    });
+    k.changeTo("Billing switch/Monthly", "ON_CLICK", "Billing switch/Annual", 300, "EASE_IN_OUT");
+    k.changeTo("Billing switch/Annual", "ON_CLICK", "Billing switch/Monthly", 300, "EASE_IN_OUT");
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 64, top: 28 });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    nav(k, sheet, { links: ["Product", "Pricing", "Customers", "Docs", "Sign in"], cta: "Start a trial", style: s("Nav 15"), brandStyle: s("Brand 20") });
+    const head = k.stack(sheet, { gap: 18, align: "CENTER", padding: { top: 24, right: 0, bottom: 8, left: 0 }, name: "Header" });
+    k.text(head, "PRICING \xB7 PER HOST, PER MONTH", { style: s("Label 13"), color: "onPaper", autoWidth: true, name: "Eyebrow" });
+    k.text(head, "Every span kept.\nPriced by the host.", { style: s("Display 56"), color: "text", width: 900, name: "Headline" });
+    k.text(head, "No per-seat fees and no sampling. Pay monthly, or annually and save up to 17%. The worked example on each plan is for 200 hosts.", { style: s("Lead 19"), color: "onPaper", width: 720, name: "Lead" });
+    const sw = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", name: "Switch row" });
+    const toggle = k.instance(sw, "Billing switch", { Left: "Monthly", Right: "Annual" }, { name: "Billing toggle" });
+    k.setVariable(toggle, monthly, { toggle: true });
+    k.setVariable(toggle, annual, { toggle: true });
+    const save = k.stack(sw, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", radius: 6, padding: { top: 6, right: 12, bottom: 6, left: 12 }, fill: "card", stroke: { color: "line", width: 1, align: "INSIDE" }, name: "Saving" });
+    k.ellipse(save, 8, "up", { name: "Saving dot" });
+    k.text(save, "Annual: save up to 17%", { style: s("Mono 13"), color: "onCard", autoWidth: true, name: "Saving words" });
+    const plans = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, name: "Plans" });
+    for (const p of PLANS) {
+      const card = panel(k, plans, { gap: 16, padding: 24, name: "Plan", ...p.featured ? { stroke: { color: "primary", width: 2, align: "INSIDE" } } : {} });
+      const top = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Plan head" });
+      k.text(top, p.name, { style: s("Plan 22"), color: "onCard", autoWidth: true, name: "Plan name" });
+      if (p.featured) {
+        const tag = k.stack(top, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 4, padding: { top: 3, right: 8, bottom: 3, left: 8 }, name: "Popular" });
+        k.text(tag, "MOST TEAMS", { style: s("Label 12"), color: "onPrimary", autoWidth: true, name: "Popular words" });
+      }
+      k.text(card, p.pitch, { style: s("Body 15"), color: "cardMuted", name: "Pitch" });
+      const price = k.stack(card, { name: "Price" });
+      if (p.custom) {
+        const b = k.stack(price, { gap: 4, name: "Monthly price" });
+        k.text(b, p.custom, { style: s("Custom 40"), color: "onCard", name: "Amount" });
+        k.text(b, "A committed volume, for your estate.", { style: s("Small 13"), color: "cardMuted", name: "Billed" });
+        k.text(b, "Typical: 2,000 to 40,000 hosts", { style: s("Fig 14"), color: "cardMuted", name: "Example" });
+      } else {
+        const block = (which) => {
+          const b = k.stack(price, { gap: 4, fill: k.tint("card", 1e-3), name: `${which} price` });
+          const n = which === "Monthly" ? p.month : p.year;
+          k.text(b, usd(n), { style: s("Price 52"), color: "onCard", name: "Amount" });
+          k.text(b, p.free ? "Free for good, up to 5 hosts." : which === "Monthly" ? "per host a month, billed monthly." : "per host a month, billed annually.", { style: s("Small 13"), color: "cardMuted", name: "Billed" });
+          k.text(b, p.free ? "5 hosts = $0 a month" : `${HOSTS} hosts = ${usd(n * HOSTS)} a month`, { style: s("Fig 14"), color: "onCard", name: "Example" });
+          return b;
+        };
+        k.bindVariable(block("Monthly"), "visible", monthly);
+        k.bindVariable(block("Annual"), "visible", annual);
+      }
+      k.instance(card, p.featured ? "Button" : "Button card", { Label: p.cta }, { name: "Plan button" });
+      k.rect(card, "FILL", 1, "line", { name: "Plan rule" });
+      const list = k.stack(card, { gap: 10, name: "Plan lines" });
+      for (const l of p.lines) {
+        const r = k.stack(list, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Plan line" });
+        k.rect(r, 8, 8, p.featured ? "primary" : "up", { name: "Line mark", radius: 2 });
+        k.text(r, l, { style: s("Body 15"), color: "onCard", width: "FILL", name: "Line words" });
+      }
+    }
+    const cmp = panel(k, sheet, { gap: 0, padding: { top: 32, right: 32, bottom: 24, left: 32 }, name: "Compare" });
+    k.text(cmp, "Every plan, line by line", { style: s("Section 32"), color: "onCard", name: "Compare title" });
+    const headRow = k.stack(cmp, { direction: "HORIZONTAL", gap: 16, padding: { top: 20, right: 0, bottom: 10, left: 0 }, name: "Compare head" });
+    k.stack(headRow, { width: 380, height: 1, name: "Compare corner" });
+    for (const p of PLANS) k.text(headRow, p.name.toUpperCase(), { style: s("Label 13"), color: p.featured ? "onCard" : "cardMuted", width: "FILL", name: "Compare plan" });
+    for (const [what, ...cells] of COMPARE) {
+      k.rect(cmp, "FILL", 1, "rule", { name: "Compare rule" });
+      const r = k.stack(cmp, { direction: "HORIZONTAL", gap: 16, align: "CENTER", padding: { top: 13, right: 0, bottom: 13, left: 0 }, name: "Compare row" });
+      k.text(r, what, { style: s("Ui 15"), color: "onCard", width: 380, name: "Compare what" });
+      for (const c of cells) {
+        const cell = k.stack(r, { direction: "HORIZONTAL", width: "FILL", gap: 8, align: "CENTER", name: "Compare cell" });
+        if (typeof c === "string") k.text(cell, c, { style: s("Mono 14"), color: "onCard", autoWidth: true, name: "Cell words" });
+        else if (c) k.ellipse(cell, 10, "up", { name: "Yes dot" });
+        else k.rect(cell, 12, 2, "line", { name: "No dash" });
+      }
+    }
+    k.text(cmp, "Prices in US dollars per host per month, before tax. Hosts counted at the 95th percentile of the month.", { style: s("Small 13"), color: "cardMuted", name: "Compare note" });
+    const faq = panel(k, sheet, { gap: 28, padding: 32, name: "FAQ" });
+    k.text(faq, "Questions procurement asks", { style: s("Section 32"), color: "onCard", name: "FAQ title" });
+    const qs = k.stack(faq, { direction: "HORIZONTAL", gap: 32, wrap: true, name: "FAQ list" });
+    for (const [q, a] of FAQ) {
+      const item = k.stack(qs, { gap: 8, width: Math.floor((CONTENT.desktop - 64 - 32) / 2), name: "Question" });
+      k.text(item, q, { style: s("Q 17"), color: "onCard", name: "Q" });
+      k.text(item, a, { style: s("Body 15"), color: "cardMuted", name: "A" });
+    }
+    const close = panel(k, sheet, { gap: 20, padding: 48, align: "CENTER", name: "Close" });
+    k.text(close, "Run it on your own traffic for 14 days.", { style: s("Close 44"), color: "onCard", name: "Close title" });
+    k.instance(close, "Button", { Label: "Start a 14-day trial" }, { name: "Close button" });
+    footer(k, sheet, {
+      about: SPANWISE.pitch,
+      legal: "Prices in US dollars, before tax. Annual plans are billed once, up front. \xA9 2026 {{brand.name}} Inc.",
+      columns: [["Product", ["Services", "Traces", "Anomalies", "Changelog"]], ["Company", ["Customers", "Pricing", "Security"]], ["Developers", ["Docs", "OpenTelemetry", "Status"]]],
+      brandStyle: s("Brand 20"),
+      headStyle: s("Label 13"),
+      linkStyle: s("Small 13"),
+      ruleColor: "line"
+    });
+    k.cues(sheet, cues);
+    respond(k, sheet, s, {
+      stack: ["FAQ list", "Footer columns"],
+      stackMobile: ["Switch row", "Plans"],
+      restyle: { ...STEPS },
+      hide: { mobile: ["Nav links"] },
+      gap: { tablet: 56, mobile: 40 },
+      tweak: (kit, id, size) => {
+        const narrow = size === "tablet" || size === "mobile";
+        for (const n of [...kit.named(id, "Headline"), ...kit.named(id, "Lead")]) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        if (size === "laptop") for (const n of kit.named(id, "Plan")) kit.patch(n, { padding: { top: 22, right: 18, bottom: 22, left: 18 } });
+        if (size === "laptop") for (const n of kit.named(id, "Question")) kit.patch(n, { width: Math.floor((CONTENT.laptop - 64 - 32) / 2) });
+        if (size === "tablet") {
+          for (const n of kit.named(id, "Plans")) kit.patch(n, { layoutWrap: "WRAP", counterAxisSpacing: 16 });
+          for (const n of kit.named(id, "Plan")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: Math.floor((CONTENT.tablet - 16) / 2) });
+        }
+        if (narrow) {
+          for (const n of kit.named(id, "Question")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const n of [...kit.named(id, "Compare what"), ...kit.named(id, "Compare corner")]) kit.patch(n, { width: size === "mobile" ? 120 : 220 });
+        }
+        if (size === "tablet") compactNav(kit, id, ["Docs", "Sign in"], 20);
+        if (size === "mobile") {
+          for (const name of ["Compare", "FAQ", "Close"]) for (const n of kit.named(id, name)) kit.patch(n, { padding: { top: 24, right: 16, bottom: 24, left: 16 } });
+          for (const n of kit.named(id, "Plan")) kit.patch(n, { padding: { top: 22, right: 18, bottom: 22, left: 18 } });
+          for (const r of [...kit.named(id, "Compare row"), ...kit.named(id, "Compare head")]) {
+            const cells = kit.node(r).childIds;
+            for (const i of [1, 4]) if (cells[i]) kit.patch(cells[i], { visible: false });
+          }
+        }
+      }
+    });
+    k.finish();
+    const prices = [...new Set(k.doc.pages.flatMap((p) => k.named(p, "Price")))].filter((id) => k.node(id).childIds.length > 1);
+    for (const price of prices) k.patch(k.node(price).childIds[1], { visible: false });
+    k.finish();
+    for (const price of prices) {
+      const [m, y] = k.node(price).childIds;
+      k.patch(y, { x: k.node(m).x, y: k.node(m).y });
+    }
+    return k.doc;
+  }
+});
+
+export {
+  style_data_pricing_default
+};