@popcraft/kit 0.31.0 → 0.32.0

package/dist/chunks/chunk-FLGMO3U4.js

@@ -0,0 +1,142 @@
+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 {
+  ARIAL,
+  COURIER,
+  MAIL_W,
+  callToAction,
+  finishMail,
+  mailButton,
+  mailFooter,
+  mailHeader,
+  mailRow,
+  mailSheet,
+  section,
+  swell
+} from "./chunk-BH5MTM45.js";
+import {
+  dotPaths,
+  tick
+} from "./chunk-UDE42EDS.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.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/email/saas-mail-sign-in-code.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 4e3;
+var HEADER_H = 148;
+var DIAL = { size: 92, r: 38, ticks: 10 };
+var cues = [
+  { layer: "Minutes", preset: "pulse", at: 600, params: { duration: 700, amount: 0.08 } }
+];
+var ASKED = [
+  ["When", "Friday 2 October 2026, 14:02 UTC"],
+  ["Where", "Chrome on macOS, near Lisbon, Portugal"],
+  ["For", "mara@haldenstudio.example"]
+];
+function dialTicks(from, to) {
+  const c = DIAL.size / 2;
+  return Array.from({ length: to - from }, (_, i) => {
+    const a = (from + i) / DIAL.ticks * Math.PI * 2;
+    const sx = Math.sin(a), sy = -Math.cos(a);
+    return { closed: false, points: [{ x: c + sx * (DIAL.r - 9), y: c + sy * (DIAL.r - 9) }, { x: c + sx * DIAL.r, y: c + sy * DIAL.r }] };
+  });
+}
+var saas_mail_sign_in_code_default = defineTemplate({
+  id: "email-saas-mail-sign-in-code",
+  meta: {
+    name: "SaaS lifecycle email: password reset and sign-in code",
+    description: "A whole 600 px password reset or magic-link email, plain and fast to read: a thin brand strip with a ten-minute dial, then the six-digit code as large live text with its expiry, the same code as a one-click button, and who asked and from where, with what to do if it was not you. The strip loops for four seconds (export it as a GIF); the body is table-safe type",
+    category: "email",
+    tags: ["email", "saas", "lifecycle", "password reset", "magic link", "sign in", "verification code", "one-time code", "security", "transactional", "monochrome", "animated", "gif", "html"],
+    platforms: ["email"],
+    formats: ["email"],
+    useCases: ["onboarding"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("SaaS lifecycle email: password reset and sign-in code", preset("email-body"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FFFFFF", text: "#0E0F0C", onPaper: "#43463F", primary: "#0E0F0C", onPrimary: "#FFFFFF", accent: "#1F8A54", onAccent: "#FFFFFF", tint: "#F1F2EC", onTint: "#0E0F0C" },
+      { company: "Ferry", address: "Rua da Boavista 73, 1200-066 Lisboa", code: "418 207" }
+    );
+    k.palette({ strip: "#0E0F0C", onStrip: "#FFFFFF", stripSoft: "#B9BDB1", dot: "#FFFFFF", spent: "#3A3D36", safe: "#4FD08D" });
+    k.textStyle("Brand 26", { size: 26, fontWeight: 800, letterSpacing: -0.8, lineHeight: 30 });
+    k.textStyle("Strip 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.6, lineHeight: 16 });
+    k.textStyle("Minutes 26", { ...MONO, size: 26, fontWeight: 800, letterSpacing: -1, lineHeight: 28, textAlign: "CENTER" });
+    k.textStyle("Heading 26", { ...ARIAL, size: 26, fontWeight: 700, lineHeight: 32 });
+    k.textStyle("Body 16", { ...ARIAL, size: 16, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Label 12", { ...COURIER, size: 12, fontWeight: 700, letterSpacing: 1.5, lineHeight: 16 });
+    k.textStyle("Code 56", { ...COURIER, size: 56, fontWeight: 700, letterSpacing: 4, lineHeight: 64 });
+    k.textStyle("Strong 16", { ...ARIAL, size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Small 15", { ...ARIAL, size: 15, fontWeight: 400, lineHeight: 23 });
+    k.textStyle("Button 16", { ...ARIAL, size: 16, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Fine 13", { ...ARIAL, size: 13, fontWeight: 400, lineHeight: 19 });
+    mailButton(k, "Mail button", { fill: "primary", ink: "onPrimary", style: "Button 16", label: "Sign in with one click", width: 280, height: 52 });
+    const sheet = mailSheet(k, { paper: "paper", duration: DURATION });
+    const head = mailHeader(k, sheet, HEADER_H, "strip");
+    k.vector(head, MAIL_W, HEADER_H, dotPaths(MAIL_W, HEADER_H, 16, 2), "dot", { name: "Dots", opacity: 0.1, absolute: { x: 0, y: 0 } });
+    k.text(head, "{{brand.company}}", { style: "Brand 26", color: "onStrip", width: 380, name: "Brand", absolute: { x: 40, y: 44 } });
+    const line = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", name: "What this is", absolute: { x: 40, y: 84 } });
+    tick(k, line, 13, "safe");
+    k.text(line, "SIGN-IN CODE \xB7 WORKS ONCE", { style: "Strip 12", color: "stripSoft", autoWidth: true, name: "What" });
+    const dial = k.stack(head, { width: DIAL.size, height: DIAL.size, align: "CENTER", justify: "CENTER", name: "Dial", absolute: { x: MAIL_W - 40 - DIAL.size, y: (HEADER_H - DIAL.size) / 2 } });
+    k.vector(dial, DIAL.size, DIAL.size, dialTicks(1, DIAL.ticks), "spent", { name: "Minutes left", strokeWidth: 4, absolute: { x: 0, y: 0 } });
+    const lit = k.vector(dial, DIAL.size, DIAL.size, dialTicks(0, 1), "safe", { name: "This minute", strokeWidth: 4, absolute: { x: 0, y: 0 } });
+    swell(k, lit, "opacity", { amp: 0.3, loopMs: DURATION, cycles: 2 });
+    k.patch(lit, { opacity: 0.7 });
+    const hand = k.stack(dial, { width: DIAL.size, height: DIAL.size, name: "Hand", absolute: { x: 0, y: 0 } });
+    k.ellipse(hand, 7, "safe", { name: "Hand tip", absolute: { x: DIAL.size / 2 - 3.5, y: DIAL.size / 2 - DIAL.r - 14 } });
+    k.behave(hand, "rotation", [{ kind: "spin", rate: 36e4 / DURATION }]);
+    k.text(dial, "10", { style: "Minutes 26", color: "onStrip", name: "Minutes" });
+    k.text(dial, "MIN", { style: "Strip 12", color: "stripSoft", align: "CENTER", name: "Minutes label" });
+    const intro = section(k, sheet, { name: "Intro", pad: [36, 40, 16, 40], gap: 10 });
+    k.text(intro, "Your sign-in code", { style: "Heading 26", color: "text", name: "Heading" });
+    k.text(intro, "Type it into the page you just left. It signs you in, and you can choose a new password from there.", { style: "Body 16", color: "onPaper", name: "Intro words" });
+    const code = section(k, sheet, { name: "Code", pad: [4, 40, 8, 40] });
+    const box = k.stack(code, { fill: "tint", padding: { top: 22, right: 28, bottom: 24, left: 28 }, gap: 6, name: "Code box" });
+    k.text(box, "CODE", { style: "Label 12", color: "onTint", name: "Code label" });
+    k.text(box, "{{brand.code}}", { style: "Code 56", color: "onTint", name: "Code figure" });
+    k.text(box, "Expires at 14:12 UTC, ten minutes after you asked.", { style: "Strong 16", color: "onTint", name: "Expiry" });
+    callToAction(k, sheet, { button: "Mail button", label: "Sign in with one click", pad: [24, 40, 28, 40], note: "The button carries the same code and expires at the same time.", noteStyle: "Small 15", noteInk: "onPaper" });
+    const asked = section(k, sheet, { name: "Who asked", pad: [4, 40, 8, 40] });
+    for (const [label, value] of ASKED) {
+      k.rect(asked, "FILL", 1, "tint", { name: "Asked rule" });
+      const row = mailRow(k, asked, { name: "Asked row", gap: 16, padding: { top: 12, right: 0, bottom: 12, left: 0 } });
+      const left = k.stack(row, { width: 72, name: "Asked cell" });
+      k.text(left, label.toUpperCase(), { style: "Label 12", color: "text", name: "Asked label" });
+      const right = k.stack(row, { width: "FILL", name: "Asked value cell" });
+      k.text(right, value, { style: "Small 15", color: "onPaper", name: "Asked value" });
+    }
+    k.rect(asked, "FILL", 1, "tint", { name: "Asked rule" });
+    const safe = section(k, sheet, { name: "Not you", pad: [20, 40, 28, 40], gap: 4 });
+    k.text(safe, "Didn\u2019t ask for this?", { style: "Strong 16", color: "text", name: "Not you heading" });
+    k.text(safe, "Ignore this email and nothing changes: the code is useless without the page that asked for it. Nobody at {{brand.company}} will ever ask you to read it out, by phone, chat or email.", { style: "Small 15", color: "onPaper", name: "Not you words" });
+    mailFooter(k, sheet, { style: "Fine 13", ink: "onPaper", rule: "tint", pad: [8, 40, 32, 40], why: "You are getting this because someone asked to sign in to {{brand.company}} with this address.", links: "Security emails are part of your account and cannot be switched off." });
+    k.cues(sheet, cues);
+    return finishMail(k, sheet);
+  }
+});
+
+export {
+  saas_mail_sign_in_code_default
+};

package/dist/chunks/chunk-FM2YY4RI.js

@@ -0,0 +1,33 @@
+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 {
+  ukiyo_e_landing_default
+} from "./chunk-CMOG7TOU.js";
+import {
+  ukiyo_e_link_preview_default
+} from "./chunk-62MVOYLK.js";
+import {
+  ukiyo_e_spike_post_default
+} from "./chunk-ELVKOJH7.js";
+import {
+  ukiyo_e_launch_reel_default
+} from "./chunk-T6YFBUX5.js";
+import {
+  ukiyo_e_greeting_header_default
+} from "./chunk-V7CW4BMC.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/ukiyo-e.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var pack = [ukiyo_e_launch_reel_default, ukiyo_e_landing_default, ukiyo_e_spike_post_default, ukiyo_e_greeting_header_default, ukiyo_e_link_preview_default];
+var ukiyo_e_default = pack;
+
+export {
+  ukiyo_e_default
+};

package/dist/chunks/chunk-FMOZ3GG5.js

@@ -0,0 +1,85 @@
+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 {
+  burst,
+  fadeAt,
+  ping,
+  popAt,
+  saasUi,
+  tickMark
+} from "./chunk-X4HN5LP7.js";
+import {
+  E,
+  sparkle
+} from "./chunk-SRSUY2WG.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/lottie/saas-ui-upgrade-unlocked.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var saas_ui_upgrade_unlocked_default = saasUi({
+  slug: "upgrade-unlocked",
+  role: "success",
+  size: "icon",
+  duration: 2400,
+  loop: false,
+  title: "upgrade unlocked",
+  description: "The moment after an upgrade goes through: the lock braces, its shackle springs up and swings open, the keyhole turns into a sparkle with a burst, and a tick lands on its corner \u2014 2.4 seconds that rest on the open lock, 512\xD7512",
+  useCases: ["pricing"],
+  tags: ["upgrade", "unlock", "paywall", "premium", "pro plan"],
+  build(l) {
+    const OPEN = 900;
+    const disc = l.circle(l.sheet, 256, 262, 226, "soft", { name: "Backdrop" });
+    l.scale(disc, [[0, 1, E.hold], [OPEN, 1, E.out], [OPEN + 200, 1.05, E.inOut], [OPEN + 700, 1, E.hold]]);
+    const glow = l.circle(l.sheet, 256, 318, 200, [l.k.gradient({ from: "gold", to: "gold", kind: "RADIAL", fromOpacity: 0.55, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Glow" });
+    fadeAt(l, glow, OPEN, 500);
+    ping(l, l.sheet, 256, 334, 120, "accent", OPEN + 40, { to: 1.7, dur: 800, width: 8 });
+    burst(l, l.sheet, 256, 334, { n: 10, r0: 130, r1: 222, t: OPEN + 80, size: 10, start: 18 });
+    for (let i = 0; i < 9; i++) {
+      const a = (-120 + i * 30) * Math.PI / 180, sx = Math.sin(a), sy = -Math.cos(a);
+      const ray = l.line(l.sheet, [[256 + 172 * sx, 318 + 172 * sy], [256 + (i % 2 ? 196 : 210) * sx, 318 + (i % 2 ? 196 : 210) * sy]], "gold", 9, { name: "Ray" });
+      popAt(l, ray, OPEN + 60 + i * 35, void 0, 380);
+    }
+    const lock = l.box(l.sheet, 126, 80, 260, 380, "Lock");
+    const shackle = l.box(lock, 40, 0, 180, 210, "Shackle");
+    l.line(shackle, [{ x: 30, y: 210 }, { x: 30, y: 90 }, { x: 90, y: 30, handleIn: { x: 30, y: 56 }, handleOut: { x: 124, y: 30 } }, { x: 150, y: 90, handleIn: { x: 150, y: 56 } }, { x: 150, y: 150 }], "ink", 36, { name: "Shackle bar" });
+    l.pivot(shackle, 30 / 180, 1);
+    l.k.patch(shackle, { rotation: -26 });
+    l.keys(shackle, "translateY", [[0, 0, E.hold], [250, 0, E.inOut], [480, 10, E.pop], [800, -28, E.hold]]);
+    l.keys(shackle, "rotation", [[0, 0, E.hold], [640, 0, E.pop], [1050, -26, E.hold]]);
+    const body = l.box(lock, 0, 172, 260, 208, "Body", { fill: "accent", radius: 48 });
+    l.rect(body, 18, 16, 224, 70, "white", { radius: 34, name: "Shine", opacity: 0.13 });
+    const hole = l.box(body, 104, 62, 52, 92, "Keyhole");
+    l.circle(hole, 26, 26, 24, "ink", { name: "Keyhole eye" });
+    l.rect(hole, 15, 30, 22, 58, "ink", { radius: 11, name: "Keyhole slot" });
+    l.k.patch(hole, { opacity: 0 });
+    l.opacity(hole, [[0, 1, E.hold], [OPEN - 160, 1, E.in], [OPEN, 0, E.hold]]);
+    l.scale(hole, [[0, 1, E.hold], [250, 1, E.inOut], [OPEN, 0.4, E.hold]]);
+    const star = l.shape(body, sparkle(130, 106, 62), "white", { name: "Unlocked sparkle" });
+    popAt(l, star, OPEN - 40, void 0, 420);
+    l.keys(star, "rotation", [[0, -90, E.hold], [OPEN - 40, -90, E.out], [OPEN + 800, 0, E.hold]]);
+    l.pivot(lock, 0.5, 1);
+    l.keys(lock, "scaleY", [[0, 1, E.hold], [250, 1, E.inOut], [480, 0.94, E.pop], [860, 1.03, E.inOut], [1250, 1, E.hold]]);
+    l.keys(lock, "scaleX", [[0, 1, E.hold], [250, 1, E.inOut], [480, 1.04, E.pop], [860, 0.98, E.inOut], [1250, 1, E.hold]]);
+    l.keys(lock, "rotation", [[0, 0, E.hold], [250, 0, E.inOut], [360, -3, E.inOut], [480, 3, E.inOut], [600, 0, E.hold]]);
+    const ok = l.box(l.sheet, 330, 388, 92, 92, "Unlocked");
+    l.circle(ok, 46, 46, 46, "surface", { name: "Tick rim" });
+    l.circle(ok, 46, 46, 37, "success", { name: "Tick disc" });
+    tickMark(l, ok, 46, 46, 1.9, "white", 10);
+    popAt(l, ok, OPEN + 320, void 0, 400);
+    for (const [x, y, r, color, t] of [[420, 112, 30, "gold", OPEN + 200], [86, 178, 18, "accent", OPEN + 360], [100, 400, 13, "gold", OPEN + 500]]) {
+      const s = l.shape(l.sheet, sparkle(x, y, r), color, { name: "Sparkle" });
+      popAt(l, s, t, void 0, 420);
+      l.keys(s, "rotation", [[0, -60, E.hold], [t, -60, E.out], [t + 700, 0, E.hold]]);
+    }
+  }
+});
+
+export {
+  saas_ui_upgrade_unlocked_default
+};

package/dist/chunks/chunk-FOBKKGOO.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-G3YVVHCF.js";
+import {
+  CONTENT,
+  compactNav,
+  footer,
+  respond,
+  typeScale
+} from "./chunk-DAF5SK5X.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-TF2MO3UA.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/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
+};

package/dist/chunks/chunk-FPG2DJ7G.js

@@ -0,0 +1,55 @@
+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 {
+  getLocale,
+  intlLocale
+} from "./chunk-JIZTNKHY.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// lib/i18n/format.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var cache = /* @__PURE__ */ new Map();
+function cached(kind, opts, make) {
+  const locale = intlLocale(getLocale());
+  const key = `${kind}|${locale}|${JSON.stringify(opts)}`;
+  let f = cache.get(key);
+  if (!f) {
+    f = make(locale);
+    cache.set(key, f);
+  }
+  return f;
+}
+var nf = (opts) => cached("n", opts, (l) => new Intl.NumberFormat(l, opts));
+function formatFileSize(bytes) {
+  const units = ["kilobyte", "megabyte", "gigabyte", "terabyte"];
+  let v = Math.max(0, bytes) / 1024, i = 0;
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024;
+    i++;
+  }
+  return nf({ style: "unit", unit: units[i], unitDisplay: "short", maximumFractionDigits: 1 }).format(v);
+}
+function formatDuration(ms) {
+  const s = Math.round(ms / 100) / 10;
+  const unit = (value, u) => nf({ style: "unit", unit: u, unitDisplay: "short", maximumFractionDigits: 1 }).format(value);
+  if (s < 60) return unit(s, "second");
+  const m = Math.floor(s / 60), r = Math.round(s - m * 60);
+  if (m < 60) return r ? `${unit(m, "minute")} ${unit(r, "second")}` : unit(m, "minute");
+  const h = Math.floor(m / 60), rm = m - h * 60;
+  return rm ? `${unit(h, "hour")} ${unit(rm, "minute")}` : unit(h, "hour");
+}
+function formatDate(date, opts = { month: "short", day: "numeric", year: "numeric" }) {
+  return cached("d", opts, (l) => new Intl.DateTimeFormat(l, opts)).format(date);
+}
+
+export {
+  formatFileSize,
+  formatDuration,
+  formatDate
+};