@popcraft/kit 0.26.0 → 0.27.0

package/dist/chunks/chunk-SMGOXFBP.js

@@ -1,277 +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 {
-  SPOOL,
-  body,
-  code,
-  deep,
-  display,
-  figure,
-  gradientBrand,
-  label,
-  longShadow,
-  mesh,
-  rimLight,
-  specular
-} from "./chunk-T2VGYDNZ.js";
-import {
-  CONTENT,
-  compactNav,
-  footer,
-  respond,
-  typeScale
-} from "./chunk-G5CURQ6H.js";
-import {
-  page
-} from "./chunk-YKXCPYWJ.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/web/style-gradient-pricing.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var NAME = "Gradient SaaS pricing page";
-var DURATION = 6e3;
-var PLANS = [
-  { name: "Hobby", pitch: "For side projects and trying the API.", month: 0, year: 0, minutes: `${SPOOL.minutes} render minutes a month`, cta: "Start free", features: ["1080p, no watermark", "3 templates", "Forum support"] },
-  { name: "Studio", pitch: "For products sending video to their users.", month: SPOOL.studio, year: SPOOL.studioYear, minutes: "3,000 render minutes a month", cta: "Start a 14-day trial", featured: true, features: ["4K and 60 fps", "Batch renders from CSV", "Webhooks and signed URLs", "10 templates"] },
-  { name: "Scale", pitch: "For teams rendering at volume, everywhere.", month: SPOOL.scale, year: SPOOL.scaleYear, minutes: "25,000 render minutes a month", cta: "Talk to us", features: ["Every edge region", "SSO and audit log", "99.95% uptime SLA", "Unlimited templates"] }
-];
-var ROWS = [
-  ["Render minutes a month", "200", "3,000", "25,000"],
-  ["Extra minutes", "\u2014", `${SPOOL.overage} each`, "$0.03 each"],
-  ["Highest resolution", "1080p", "4K", "4K"],
-  ["Batch renders", "\u2014", "Up to 5,000 rows", "Unlimited"],
-  ["Edge regions", "1", "3", "All 9"],
-  ["Support", "Forum", "Email, 1 day", "Slack, 1 hour"]
-];
-var FAQ = [
-  ["What is a render minute?", "One minute of finished video at any resolution. A 30-second clip uses half a minute; a failed render uses none."],
-  ["What if I go over?", `Studio keeps rendering at ${SPOOL.overage} a minute and tells you at 80%. Hobby pauses until the next month.`],
-  ["Can I switch plans later?", "Yes, at any time. We prorate to the day, and unused minutes carry over for one month."]
-];
-var TYPE = {
-  "Nav 15": body(15, 500),
-  "Brand 20": display(20),
-  "Button 16": display(16, { weight: 600 }),
-  "Label 13": label(13),
-  "Mono 14": code(14),
-  "Switch 16": body(16, 500),
-  "Switch on 16": body(16, 700),
-  "Display 72": display(72, { center: true }),
-  "Display 56": display(56, { center: true }),
-  "Display 40": display(40, { center: true, lead: 1.06 }),
-  "Lead 20": body(20),
-  "Lead 17": body(17),
-  "Body 16": body(16),
-  "Body 15": body(15),
-  "Small 13": body(13),
-  "Plan 26": display(26),
-  "Price 64": figure(64),
-  "Price 52": figure(52),
-  "Section 36": display(36, { lead: 1.08 }),
-  "Section 30": display(30, { lead: 1.1 }),
-  "Question 18": body(18, 600),
-  "Cell 15": body(15, 500),
-  "Close 48": display(48, { center: true }),
-  "Close 34": display(34, { center: true, lead: 1.08 })
-};
-var STEPS = {
-  "Display 72": { laptop: "Display 56", tablet: "Display 56", mobile: "Display 40" },
-  "Lead 20": { mobile: "Lead 17" },
-  "Price 64": { laptop: "Price 52" },
-  "Section 36": { mobile: "Section 30" },
-  "Close 48": { mobile: "Close 34" },
-  "Cell 15": { mobile: "Small 13" }
-};
-var cues = [
-  { layer: "Headline", preset: "words-in", at: 0, params: { duration: 900 } },
-  { layer: "Lead", preset: "blur-in", at: 300, params: { duration: 900, amount: 20 } },
-  { layer: "Plan", preset: "rise-in", at: 500, stagger: { delay: 180, order: "selection" }, params: { duration: 900, distance: 30 } }
-];
-var style_gradient_pricing_default = defineTemplate({
-  id: "web-saas-style-gradient-pricing",
-  meta: {
-    name: NAME,
-    description: "A pricing page in the gradient and depth look whose monthly / annual switch works in present mode: page variables flip every price at once while the knob glides. Three plans stand at different depths over a deep ocean ground, the featured one lifted nearest with a long shadow, a warm coral-to-lagoon mesh behind it and a band of light crossing it. A comparison table, questions and answers, a closing call and a footer. Desktop to phone",
-    category: "web",
-    tags: ["pricing", "plans", "toggle", "interactive", "variables", "comparison", "faq", "saas", "gradient", "mesh gradient", "depth", "developer", "api", "video", "website", "responsive"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["launch", "sale"],
-    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;
-    gradientBrand(k);
-    const s = typeScale(k, { ...TYPE });
-    const monthly = k.variable("Billing", "monthly", "BOOLEAN", true);
-    const annual = k.variable("Billing", "annual", "BOOLEAN", false);
-    const pill = { direction: "HORIZONTAL", width: "HUG", radius: 999, align: "CENTER", padding: { top: 14, right: 24, bottom: 14, left: 24 } };
-    k.component("Button", { ...pill, fill: "primary", props: { Label: "Start free" }, effects: [longShadow(k, 0.4, 10, 28)] }, (id) => {
-      k.propText(id, "Label", { style: s("Button 16"), color: "onPrimary", autoWidth: true });
-    });
-    k.component("Button plate", { ...pill, fill: "night", props: { Label: "Start free" }, effects: rimLight(k, 0.2) }, (id) => {
-      k.propText(id, "Label", { style: s("Button 16"), color: "onNight", autoWidth: true });
-    });
-    k.variantSet("Billing switch", "Billing", ["Monthly", "Annual"], {
-      direction: "HORIZONTAL",
-      width: "HUG",
-      gap: 14,
-      align: "CENTER",
-      padding: { top: 8, right: 18, bottom: 8, left: 18 },
-      radius: 999,
-      fill: "plate",
-      description: "Monthly or annual billing: click to switch, and the knob glides 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" ? "Switch on 16" : "Switch 16"), color: state === "Monthly" ? "onPlate" : "plateMuted", autoWidth: true });
-      const track = k.stack(id, { direction: "HORIZONTAL", width: 58, height: 32, radius: 16, padding: 4, align: "CENTER", justify: state === "Annual" ? "MAX" : "MIN", fill: "primary", name: "Track" });
-      k.ellipse(track, 24, "onPrimary", { name: "Knob" });
-      k.propText(id, "Right", { style: s(state === "Annual" ? "Switch on 16" : "Switch 16"), color: state === "Annual" ? "onPlate" : "plateMuted", autoWidth: true });
-    });
-    k.changeTo("Billing switch/Monthly", "ON_CLICK", "Billing switch/Annual", 260, "EASE_IN_OUT");
-    k.changeTo("Billing switch/Annual", "ON_CLICK", "Billing switch/Monthly", 260, "EASE_IN_OUT");
-    const sheet = k.sheet;
-    page(k, sheet, { gap: 88, top: 28, paper: "night" });
-    k.timeline(sheet, { duration: DURATION, fps: 30 });
-    deep(k, sheet, { duration: DURATION, name: "Page deep" });
-    const bar = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Nav" });
-    const brand = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", name: "Brand" });
-    const tile = k.stack(brand, { width: "HUG", fill: "primary", radius: 10, padding: 7, name: "Logo tile" });
-    k.logo(tile, 24, 24);
-    k.text(brand, "{{brand.name}}", { style: s("Brand 20"), color: "onNight", autoWidth: true, name: "Brand name" });
-    const right = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 32, align: "CENTER", name: "Nav right" });
-    const links = k.stack(right, { direction: "HORIZONTAL", width: "HUG", gap: 28, align: "CENTER", name: "Nav links" });
-    for (const l of ["Product", "Templates", "Pricing", "Docs", "Sign in"]) k.text(links, l, { style: s("Nav 15"), color: "onNight", autoWidth: true, name: "Nav link" });
-    k.instance(right, "Button", { Label: "Start free" }, { name: "Nav button" });
-    const head = k.stack(sheet, { gap: 20, align: "CENTER", name: "Header" });
-    k.text(head, "PRICING", { style: s("Label 13"), color: "nightMuted", align: "CENTER", autoWidth: true, name: "Eyebrow" });
-    k.text(head, "Pay for the minutes\nyou render.", { style: s("Display 72"), color: "onNight", align: "CENTER", name: "Headline" });
-    k.text(head, "Every plan has the full API, every template feature and no watermark. Pay monthly, or annually and save 20%.", { style: s("Lead 20"), color: "nightMuted", align: "CENTER", width: 680, name: "Lead" });
-    const sw = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", padding: { top: 12, right: 0, bottom: 0, left: 0 }, 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 });
-    k.text(sw, "Annual saves 20%", { style: s("Mono 14"), color: "nightMuted", autoWidth: true, name: "Saving" });
-    const stage = k.stack(sheet, { name: "Plan stage" });
-    mesh(k, stage, { x: 300, y: -40, w: 600, h: 620, duration: DURATION, name: "Plan mesh" });
-    const plans = k.stack(stage, { direction: "HORIZONTAL", gap: 28, align: "CENTER", name: "Plans" });
-    for (const p of PLANS) {
-      const card = k.stack(plans, { gap: 18, fill: "plate", radius: 26, clip: true, padding: p.featured ? 40 : 34, name: "Plan", effects: [longShadow(k, p.featured ? 0.6 : 0.42, p.featured ? 56 : 30, p.featured ? 110 : 60), ...rimLight(k, p.featured ? 0.2 : 0.1)] });
-      const top = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Plan head" });
-      k.text(top, p.name, { style: s("Plan 26"), color: "onPlate", autoWidth: true, name: "Plan name" });
-      if (p.featured) {
-        const b = k.stack(top, { direction: "HORIZONTAL", width: "HUG", radius: 999, fill: "primary", padding: { top: 5, right: 12, bottom: 5, left: 12 }, name: "Popular" });
-        k.text(b, "Most teams", { style: s("Small 13"), color: "onPrimary", autoWidth: true, name: "Popular words" });
-      }
-      k.text(card, p.pitch, { style: s("Body 15"), color: "plateMuted", name: "Pitch" });
-      const price = k.stack(card, { name: "Price" });
-      const block = (which) => {
-        const b = k.stack(price, { gap: 4, fill: "plate", name: `${which} price` });
-        const v = which === "Monthly" ? p.month : p.year;
-        k.text(b, `$${v}`, { style: s("Price 64"), color: "onPlate", name: "Amount" });
-        k.text(b, p.month === 0 ? "free, for as long as you like" : which === "Monthly" ? "a month, billed monthly" : `a month, billed $${(p.year * 12).toLocaleString("en-US")} a year`, { style: s("Small 13"), color: "plateMuted", name: "Billed" });
-        return b;
-      };
-      k.bindVariable(block("Monthly"), "visible", monthly);
-      k.bindVariable(block("Annual"), "visible", annual);
-      k.text(card, p.minutes, { style: s("Cell 15"), color: "onPlate", name: "Minutes" });
-      k.instance(card, p.featured ? "Button" : "Button plate", { Label: p.cta }, { name: "Plan button" });
-      const list = k.stack(card, { gap: 10, name: "Features" });
-      for (const f of p.features) {
-        const r = k.stack(list, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Feature" });
-        k.ellipse(r, 10, "lagoon", { name: "Feature dot" });
-        k.text(r, f, { style: s("Body 15"), color: "onPlate", name: "Feature words" });
-      }
-      if (p.featured) specular(k, card, 400, 620, [1800, 4600]);
-    }
-    const cmp = k.stack(sheet, { gap: 24, name: "Compare" });
-    k.text(cmp, "Compare plans", { style: s("Section 36"), color: "onNight", name: "Compare title" });
-    const table = k.stack(cmp, { fill: "plate", radius: 24, padding: { top: 8, right: 32, bottom: 8, left: 32 }, name: "Table", effects: rimLight(k, 0.1) });
-    const head2 = k.stack(table, { direction: "HORIZONTAL", gap: 16, padding: { top: 18, right: 0, bottom: 18, left: 0 }, name: "Table head" });
-    for (const [i, h] of ["WHAT YOU GET", "HOBBY", "STUDIO", "SCALE"].entries()) k.text(head2, h, { style: s("Label 13"), color: "plateMuted", width: i ? "FILL" : 360, name: "Head cell" });
-    for (const r of ROWS) {
-      k.rect(table, "FILL", 1, k.tint("rim", 0.1), { name: "Row rule" });
-      const row = k.stack(table, { direction: "HORIZONTAL", gap: 16, align: "CENTER", padding: { top: 16, right: 0, bottom: 16, left: 0 }, name: "Table row" });
-      r.forEach((c, i) => k.text(row, c, { style: s(i ? "Cell 15" : "Body 15"), color: i ? "onPlate" : "plateMuted", width: i ? "FILL" : 360, name: i ? "Cell" : "Row name" }));
-    }
-    const faq = k.stack(sheet, { gap: 24, name: "FAQ" });
-    k.text(faq, "Questions people ask", { style: s("Section 36"), color: "onNight", name: "FAQ title" });
-    const qs = k.stack(faq, { direction: "HORIZONTAL", gap: 40, name: "FAQ list" });
-    for (const [q, a] of FAQ) {
-      const item = k.stack(qs, { gap: 10, name: "Question" });
-      k.text(item, q, { style: s("Question 18"), color: "onNight", name: "Q" });
-      k.text(item, a, { style: s("Body 16"), color: "nightMuted", name: "A" });
-    }
-    const close = k.stack(sheet, { gap: 22, padding: 56, radius: 36, align: "CENTER", fill: "plate", name: "Close", effects: [longShadow(k, 0.5, 36, 80), ...rimLight(k, 0.14)] });
-    k.text(close, "Render your first video in five minutes.", { style: s("Close 48"), color: "onPlate", align: "CENTER", name: "Close title" });
-    k.instance(close, "Button", { Label: "Get an API key" }, { name: "Close button" });
-    footer(k, sheet, {
-      about: SPOOL.pitch,
-      legal: `\xA9 2026 {{brand.name}} Labs. Prices in US dollars, before tax. ${SPOOL.site}`,
-      columns: [["Product", ["Studio", "Batch renders", "Templates"]], ["Developers", ["Docs", "API reference", "Status"]], ["Company", ["Customers", "Careers", "Security"]]],
-      brandStyle: s("Brand 20"),
-      headStyle: s("Label 13"),
-      linkStyle: s("Small 13"),
-      ruleColor: "nightMuted",
-      ink: "onPlate",
-      quiet: "plateMuted",
-      box: { fill: "plate", radius: 32, padding: 40, effects: rimLight(k, 0.1) }
-    });
-    k.cues(sheet, cues);
-    const copies = respond(k, sheet, s, {
-      stack: ["Plans", "FAQ list", "Footer columns"],
-      stackMobile: ["Switch row"],
-      restyle: { ...STEPS },
-      hide: { mobile: ["Nav links"] },
-      gap: { tablet: 72, mobile: 56 },
-      tweak: (kit, id, size) => {
-        const cw = CONTENT[size];
-        for (const n of kit.named(id, "Lead")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
-        for (const n of kit.named(id, "Plan mesh")) kit.patch(n, size === "tablet" || size === "mobile" ? { x: -60, y: 420, width: cw + 120, height: 900 } : { x: Math.round(cw / 2 - 300), width: 600 });
-        if (size === "tablet" || size === "mobile") for (const n of kit.named(id, "Row name")) kit.patch(n, { width: size === "mobile" ? 92 : 220 });
-        if (size === "tablet" || size === "mobile") {
-          const first = kit.named(id, "Head cell")[0];
-          if (first) kit.patch(first, { width: size === "mobile" ? 92 : 220 });
-        }
-        if (size === "mobile") {
-          for (const n of kit.named(id, "Table")) kit.patch(n, { padding: { top: 4, right: 16, bottom: 4, left: 16 } });
-          for (const n of kit.named(id, "Close")) kit.patch(n, { padding: { top: 32, right: 24, bottom: 32, left: 24 } });
-          for (const n of kit.named(id, "Plan")) kit.patch(n, { padding: { top: 28, right: 24, bottom: 28, left: 24 } });
-        }
-        if (size === "tablet") compactNav(kit, id, ["Templates", "Sign in"], 20);
-      }
-    });
-    for (const id of [sheet, ...copies]) for (const a of k.named(id, "Page deep")) k.patch(a, { x: 0, y: 0, width: k.node(id).width, height: k.node(id).height });
-    k.finish();
-    const prices = [...new Set(k.doc.pages.flatMap((p) => k.named(p, "Price")))];
-    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_gradient_pricing_default
-};

package/dist/chunks/chunk-SMGPOQLP.js

@@ -1,366 +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 {
-  burstPath,
-  sparkPath
-} from "./chunk-YNOCYFZ4.js";
-import {
-  MONO
-} from "./chunk-X23ZWFW2.js";
-import {
-  hardShadow
-} from "./chunk-HVK5T4I5.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-maximal-shared.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var FIZZ = {
-  name: "Clipfizz",
-  site: "clipfizz.example",
-  version: "3.0",
-  feature: "Auto-Bop",
-  pitch: "Drop in a long video. Get back clips cut on the beat, captioned and stickered in your style.",
-  prompt: "make it hit on the drop",
-  /** Seconds from upload to the first clips. */
-  seconds: 38,
-  /** Clips made since launch, and in September alone. */
-  clips: "3.4M",
-  september: 1e6,
-  creators: "180K",
-  packs: 40,
-  captionStyles: 12,
-  /** Clips a month, April to September, in thousands. */
-  monthly: [210, 340, 470, 620, 780, 1e3],
-  months: ["Apr", "May", "Jun", "Jul", "Aug", "Sep"],
-  /** A month; billed yearly, the second figure a month. */
-  pro: 12,
-  proYear: 9,
-  studio: 29,
-  studioYear: 24,
-  trial: "Pro free for 7 days. No card.",
-  quote: "I film once on Sunday. Clipfizz hands me a week of Reels that land on the beat.",
-  author: "Dani Okafor",
-  handle: "@danicooks",
-  role: "Food creator \xB7 412K followers"
-};
-var BRAND = {
-  paper: "#FF4FA3",
-  text: "#0B0B0F",
-  onPaper: "#2B0A1E",
-  primary: "#C8FF1E",
-  onPrimary: "#0B0B0F",
-  secondary: "#1F4BFF",
-  onSecondary: "#FFFFFF",
-  accent: "#FF7A1A",
-  onAccent: "#0B0B0F",
-  card: "#FFF6E5",
-  onCard: "#0B0B0F",
-  night: "#0B0B0F",
-  onNight: "#FFFFFF"
-};
-var SCENERY = {
-  chromeHi: "#FFFFFF",
-  chromeMid: "#CDD5E2",
-  chromeLo: "#8E99AD",
-  nightMuted: "#C9CCD8",
-  cardMuted: "#4A3F33",
-  pinkDeep: "#E0237F",
-  lime: "#DDFF7A",
-  skin: "#C98A63",
-  skinDeep: "#7A4A33",
-  hair: "#1A1012",
-  steam: "#FFFFFF"
-};
-function maxBrand(k, fields = {}) {
-  k.brand({ ...BRAND }, { name: FIZZ.name, site: FIZZ.site, ...fields });
-  k.palette({ ...SCENERY });
-}
-function grot(k, name, size, o = {}) {
-  k.textStyle(name, { size, fontWeight: o.weight ?? 700, lineHeight: Math.round(size * (o.lead ?? 1.2)), letterSpacing: Math.round(size * (o.spacing ?? 0) * 100) / 100 });
-  return name;
-}
-var display = (k, name, size, lead = 0.92) => grot(k, name, size, { weight: 900, lead, spacing: -0.035 });
-function mono(k, name, size, o = {}) {
-  k.textStyle(name, { ...MONO, size, fontWeight: o.weight ?? 700, lineHeight: Math.round(size * (o.lead ?? 1.25)), letterSpacing: Math.round(size * (o.spacing ?? 0) * 100) / 100 });
-  return name;
-}
-function chromePaint(k) {
-  const stops = [[0, "chromeHi"], [0.38, "chromeMid"], [0.52, "chromeLo"], [0.6, "chromeMid"], [0.82, "chromeHi"], [1, "chromeMid"]];
-  return [{
-    type: "GRADIENT_LINEAR",
-    gradientStops: stops.map(([position, role]) => ({ position, color: k.color(role) })),
-    gradientHandlePositions: [{ x: 0.5, y: 0 }, { x: 0.5, y: 1 }, { x: 0, y: 0.5 }],
-    opacity: 1,
-    visible: true
-  }];
-}
-function chromeFx(k, size, shadow = Math.max(3, Math.round(size / 20))) {
-  return [
-    hardShadow(k, "secondary", shadow),
-    { type: "INNER_SHADOW", color: k.color("chromeLo"), offset: { x: 0, y: -Math.round(size * 0.16) }, blur: Math.round(size * 0.1), spread: 0, visible: true },
-    { type: "INNER_SHADOW", color: k.color("chromeMid"), offset: { x: 0, y: Math.round(size * 0.05) }, blur: Math.round(size * 0.04), spread: 0, visible: true }
-  ];
-}
-function chromeText(k, parent, chars, o) {
-  return k.text(parent, chars, { style: o.style, color: "chromeHi", name: o.name ?? "Chrome", ...o.width ? { width: o.width } : { autoWidth: true }, ...o.align ? { align: o.align } : {}, effects: chromeFx(k, o.size, o.shadow ?? 6), ...o.absolute ? { absolute: o.absolute } : {} });
-}
-function relight(k, root, name, size) {
-  for (const id of k.named(root, name)) k.patch(id, { effects: chromeFx(k, size) });
-}
-function plate(k, parent, o) {
-  const [v, h] = o.pad ?? [28, 36];
-  const id = k.stack(parent, { width: o.width ?? "HUG", fill: "night", radius: o.radius ?? 18, gap: o.gap ?? 8, align: o.align ?? "MIN", padding: { top: v, right: h, bottom: v, left: h }, effects: [hardShadow(k, o.shadowRole ?? "primary", o.shadow ?? 12)], name: o.name ?? "Plate", ...o.absolute ? { absolute: o.absolute } : {} });
-  if (o.rotate) k.patch(id, { rotation: o.rotate });
-  return id;
-}
-var stickerEdge = (k, weight = 4, drop = 7) => ({ stroke: { color: "night", width: weight, align: "INSIDE" }, effects: [hardShadow(k, "night", drop)] });
-function sticker(k, parent, label, o) {
-  const [v, h] = o.pad ?? [12, 22];
-  const e = stickerEdge(k, o.weight, o.drop);
-  const id = k.stack(parent, { direction: "HORIZONTAL", width: o.width ?? "HUG", align: "CENTER", justify: "CENTER", fill: o.fill, radius: o.shape === "tag" ? 14 : 999, padding: { top: v, right: h, bottom: v, left: h }, ...e, name: o.name ?? "Sticker", ...o.absolute ? { absolute: o.absolute } : {} });
-  k.text(id, label, { style: o.style, color: o.ink, name: "Sticker words", ...o.width ? { width: "FILL", align: "CENTER" } : { autoWidth: true } });
-  if (o.rotate) k.patch(id, { rotation: o.rotate });
-  return id;
-}
-var burstPaths = (s, points = 18, depth = 0.16) => [burstPath(s, points, depth)];
-function burst(k, parent, size, role, o = {}) {
-  const id = k.vector(parent, size, size, burstPaths(size, o.points, o.depth), role, { name: o.name ?? "Burst", ...o.outline !== 0 ? { stroke: { color: "night", width: o.outline ?? 4, align: "INSIDE" } } : {}, ...o.absolute ? { absolute: o.absolute } : {} });
-  if (o.rotate) k.patch(id, { rotation: o.rotate });
-  return id;
-}
-function burstSticker(k, parent, lines, o) {
-  const id = k.stack(parent, { width: o.size, height: o.size, align: "CENTER", justify: "CENTER", gap: 0, name: o.name ?? "Burst sticker", effects: [hardShadow(k, "night", 7)], ...o.absolute ? { absolute: o.absolute } : {} });
-  k.vector(id, o.size, o.size, burstPaths(o.size, o.points ?? 20, o.depth ?? 0.15), o.fill, { name: "Burst", stroke: { color: "night", width: 4, align: "INSIDE" }, absolute: { x: 0, y: 0 } });
-  for (const l of lines) k.text(id, l.text, { style: l.style, color: o.ink, width: Math.round(o.size * (o.inner ?? 0.66)), align: "CENTER", name: l.name ?? "Burst words" });
-  if (o.rotate) k.patch(id, { rotation: o.rotate });
-  return id;
-}
-function spark(k, parent, size, role, o = {}) {
-  return k.vector(parent, size, size, [sparkPath(size, o.pinch ?? 0.12)], role, { name: o.name ?? "Sparkle", ...o.outline ? { stroke: { color: "night", width: o.outline, align: "INSIDE" } } : {}, ...o.absolute ? { absolute: o.absolute } : {} });
-}
-function halftonePaths(d, step = 22, seedAngle = 0.6) {
-  const paths = [];
-  const c = d / 2;
-  for (let row = 0, y = step / 2; y < d; y += step * 0.866, row++) for (let x = (row % 2 ? step / 2 : 0) + step / 2; x < d; x += step) {
-    const dx = x - c, dy = y - c, r = Math.hypot(dx, dy);
-    if (r > c - step / 2) continue;
-    const tone = 0.5 + 0.5 * ((dx * Math.cos(seedAngle) + dy * Math.sin(seedAngle)) / c);
-    const rad = step / 2 * (0.18 + 0.78 * tone);
-    if (rad < 1.2) continue;
-    paths.push({ closed: true, points: Array.from({ length: 8 }, (_, i) => pt3(x + rad * Math.cos(i / 8 * Math.PI * 2), y + rad * Math.sin(i / 8 * Math.PI * 2))) });
-  }
-  return paths;
-}
-function halftone(k, parent, d, role, o = {}) {
-  return k.vector(parent, d, d, halftonePaths(d, o.step, o.angle), role, { name: o.name ?? "Halftone", ...o.absolute ? { absolute: o.absolute } : {} });
-}
-function cutout(k, parent, w, h, o) {
-  const f = k.frame(parent, { x: o.absolute?.x ?? 0, y: o.absolute?.y ?? 0, width: w, height: h }, { name: o.name ?? "Cut-out" });
-  if (o.absolute) k.patch(f, { layoutPositioning: "ABSOLUTE" });
-  const edge = { color: "chromeHi", width: Math.max(5, Math.round(w * 0.025)), align: "OUTSIDE" };
-  const d = w * 0.42, cx = w / 2, top = h * 0.12, sy = top + d * 1.05;
-  k.vector(f, w, h, [{ closed: true, points: [
-    pt3(w * 0.04, h),
-    { ...pt3(w * 0.08, sy + h * 0.16), handleOut: pt3(w * 0.1, sy + h * 0.02) },
-    { ...pt3(cx, sy - h * 0.02), handleIn: pt3(w * 0.24, sy - h * 0.02), handleOut: pt3(w * 0.76, sy - h * 0.02) },
-    { ...pt3(w * 0.92, sy + h * 0.16), handleIn: pt3(w * 0.9, sy + h * 0.02) },
-    pt3(w * 0.96, h)
-  ] }], o.top, { name: "Shoulders", stroke: edge, absolute: { x: 0, y: 0 } });
-  k.ellipse(f, r3(d), o.skin ?? "skin", { name: "Head", stroke: edge, absolute: { x: r3(cx - d / 2), y: r3(top) } });
-  const hw = d * 1.06;
-  k.vector(f, r3(hw), r3(d * 0.62), [{ closed: true, points: [
-    pt3(0, d * 0.5),
-    { ...pt3(hw / 2, 0), handleIn: pt3(0, d * 0.05), handleOut: pt3(hw, d * 0.05) },
-    pt3(hw, d * 0.5),
-    { ...pt3(hw * 0.78, d * 0.3), handleIn: pt3(hw * 0.9, d * 0.32) },
-    { ...pt3(hw * 0.2, d * 0.32), handleIn: pt3(hw * 0.5, d * 0.22) }
-  ] }], "hair", { name: "Hair", absolute: { x: r3(cx - hw / 2), y: r3(top - d * 0.06) } });
-  k.ellipse(f, r3(d * 0.42), "hair", { name: "Bun", absolute: { x: r3(cx + d * 0.12), y: r3(top - d * 0.3) } });
-  return f;
-}
-function bowl(k, parent, w, h, o) {
-  const f = k.frame(parent, { x: o.absolute?.x ?? 0, y: o.absolute?.y ?? 0, width: w, height: h }, { name: o.name ?? "Bowl" });
-  if (o.absolute) k.patch(f, { layoutPositioning: "ABSOLUTE" });
-  const by = h * 0.5;
-  k.vector(f, w, h - by, [{ closed: true, points: [pt3(0, 0), pt3(w, 0), { ...pt3(w * 0.5, (h - by) * 0.98), handleIn: pt3(w * 0.95, (h - by) * 0.9), handleOut: pt3(w * 0.05, (h - by) * 0.9) }] }], o.fill, { name: "Bowl body", stroke: { color: "night", width: 5, align: "INSIDE" }, absolute: { x: 0, y: r3(by) } });
-  k.rect(f, w, Math.round(h * 0.07), "night", { name: "Bowl rim", radius: 99, absolute: { x: 0, y: r3(by - h * 0.035) } });
-  for (let i = 0; i < 3; i++) {
-    const x = w * (0.28 + i * 0.22), sh = by * 0.8;
-    k.vector(f, 30, sh, [{ closed: false, points: [{ ...pt3(15, sh), handleOut: pt3(0, sh * 0.75) }, { ...pt3(15, sh * 0.5), handleIn: pt3(30, sh * 0.7), handleOut: pt3(0, sh * 0.3) }, { ...pt3(15, 0), handleIn: pt3(30, sh * 0.2) }] }], [], { name: "Steam", stroke: { color: "steam", width: 6, cap: "ROUND" }, absolute: { x: r3(x - 15), y: r3(by * 0.08) } });
-  }
-  return f;
-}
-var slap = (layer, at, o = {}) => ({ layer, preset: "pop-in", at, params: { duration: o.duration ?? 380, amount: o.from ?? 0.3, ease: ease.back(2.6) }, ...o.gap !== void 0 || Array.isArray(layer) ? { stagger: { delay: o.gap ?? 0, order: "selection" } } : {} });
-var wobble = (layer, at, o = {}) => ({ layer, preset: "wobble", at, params: { duration: o.duration ?? 600, amount: o.angle ?? 8 }, ...o.gap !== void 0 || Array.isArray(layer) ? { stagger: { delay: o.gap ?? 0, order: "selection" } } : {} });
-function spin(k, id, turns, loop) {
-  k.patch(id, { anchorX: 0.5, anchorY: 0.5 });
-  k.behave(id, "rotation", [{ kind: "spin", rate: r3(turns * 360 * 1e3 / loop) }]);
-}
-function bob(k, id, amount = 0.025) {
-  k.patch(id, { anchorX: 0.5, anchorY: 0.5 });
-  for (const axis of ["scaleX", "scaleY"]) k.behave(id, axis, [{ kind: "audio", signal: "bass", gain: 1, mode: "multiply", from: 1, to: 1 + amount, attack: 10, release: 180 }]);
-}
-function float(k, id, amp, cycles, loop, phase = 0, axis = "translateY") {
-  k.behave(id, axis, [{ kind: "sine", amp, freq: r3(cycles * 1e3 / loop), phase }]);
-}
-function marquee(k, parent, o) {
-  const n = Math.ceil(o.width / o.w) + 1, period = n * o.w;
-  const strip = k.stack(parent, { direction: "HORIZONTAL", width: o.width, height: o.height, clip: true, fill: o.fill, name: o.name ?? "Marquee", ...o.edge !== false ? { stroke: { color: "night", width: 4, align: "INSIDE" } } : {}, ...o.absolute ? { absolute: o.absolute } : {} });
-  const rate = r3((o.right ? 1 : -1) * o.cells * o.w * 1e3 / o.loop);
-  for (let i = 0; i < n; i++) {
-    const c = k.stack(strip, { direction: "HORIZONTAL", width: o.w, height: o.height, align: "CENTER", justify: "CENTER", gap: 18, name: "Marquee cell", absolute: { x: 0, y: 0 } });
-    o.cell(c, i);
-    k.patch(c, { translateX: i * o.w });
-    k.behave(c, "translateX", [{ kind: "spin", rate }, { kind: "mod", period, offset: -o.w }]);
-  }
-  if (o.rotate) k.patch(strip, { rotation: o.rotate });
-  return strip;
-}
-function fitMarquee(k, root, name, width) {
-  for (const id of k.named(root, name)) k.patch(id, { width, layoutSizingHorizontal: "FIXED" });
-}
-function confetti(k, parent, o) {
-  const R = rng(o.seed ?? 7), n = o.n ?? 36, spread = o.spread ?? 520, life = o.life ?? 1600, s = o.size ?? 22;
-  const g = k.frame(parent, { x: o.x, y: o.y, width: 1, height: 1 }, { name: o.name ?? "Confetti" });
-  k.patch(g, { layoutPositioning: "ABSOLUTE", clipsContent: false });
-  const roles = ["primary", "secondary", "accent", "card", "chromeHi"];
-  for (let i = 0; i < n; i++) {
-    const a = i / n * Math.PI * 2 + R() * 0.4, dist = spread * (0.45 + 0.55 * R());
-    const dx = r3(Math.cos(a) * dist), dy = r3(Math.sin(a) * dist * 0.8 - spread * 0.2), fall = r3(spread * (0.4 + 0.3 * R()));
-    const round = i % 3 === 0;
-    const id = round ? k.ellipse(g, Math.round(s * 0.7), roles[i % roles.length], { name: "Bit", absolute: { x: 0, y: 0 }, opacity: 0 }) : k.rect(g, s, Math.round(s * 0.45), roles[i % roles.length], { name: "Bit", absolute: { x: 0, y: 0 }, opacity: 0, radius: 3 });
-    const t0 = o.at + Math.round(R() * 60), t1 = t0 + Math.round(life * 0.35), t2 = o.at + life;
-    k.animate(id, "translateX", [{ t: t0, v: 0, ease: ease.out("expo") }, { t: t1, v: dx, ease: ease.linear }, { t: t2, v: r3(dx * 1.15) }]);
-    k.animate(id, "translateY", [{ t: t0, v: 0, ease: ease.out("expo") }, { t: t1, v: dy, ease: ease.named("quad", "in") }, { t: t2, v: r3(dy + fall) }]);
-    k.animate(id, "rotation", [{ t: t0, v: 0, ease: ease.linear }, { t: t2, v: Math.round((R() - 0.5) * 900) }]);
-    k.animate(id, "opacity", [{ t: t0 - 1, v: 0, ease: ease.hold }, { t: t0, v: 1, ease: ease.hold }, { t: t2 - Math.round(life * 0.25), v: 1, ease: ease.linear }, { t: t2, v: 0 }]);
-  }
-  return g;
-}
-function phone(k, parent, o) {
-  const bz = o.bezel ?? 14;
-  const rig = k.frame(parent, { x: o.absolute?.x ?? 0, y: o.absolute?.y ?? 0, width: o.w, height: o.h }, { name: o.name ?? "Phone rig" });
-  k.patch(rig, { layoutPositioning: "ABSOLUTE", clipsContent: false });
-  const body = k.stack(rig, { width: o.w, height: o.h, fill: chromePaint(k), radius: Math.round(o.w * 0.15), padding: bz, stroke: { color: "night", width: 4, align: "INSIDE" }, effects: [hardShadow(k, "secondary", 14)], name: "Phone", absolute: { x: 0, y: 0 } });
-  if (o.rotate) k.patch(body, { rotation: o.rotate });
-  const sw = o.w - 2 * bz, sh = o.h - 2 * bz;
-  const screen = k.stack(body, { width: sw, height: sh, fill: "night", radius: Math.round(o.w * 0.15) - bz, clip: true, gap: 14, padding: { top: 22, right: 18, bottom: 18, left: 18 }, name: "Screen" });
-  return { rig, body, screen, sw, sh };
-}
-function callComponent(k, o) {
-  const [v, h] = o.pad ?? [22, 38];
-  k.component("Call", { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 999, align: "CENTER", padding: { top: v, right: h, bottom: v, left: h }, stroke: { color: "night", width: o.weight ?? 5, align: "INSIDE" }, effects: [hardShadow(k, "night", o.drop ?? 10)], props: { Label: o.label } }, (id) => {
-    k.propText(id, "Label", { style: o.style, color: "onPrimary", autoWidth: true });
-  });
-}
-function quietComponent(k, o) {
-  const [v, h] = o.pad ?? [18, 30];
-  k.component("Button quiet", { direction: "HORIZONTAL", width: "HUG", fill: "card", radius: 999, align: "CENTER", padding: { top: v, right: h, bottom: v, left: h }, stroke: { color: "night", width: 3, align: "INSIDE" }, props: { Label: o.label } }, (id) => {
-    k.propText(id, "Label", { style: o.style, color: "onCard", autoWidth: true });
-  });
-}
-var T = (size, fontWeight, lead, spacing = 0, family) => ({ size, fontWeight, lineHeight: Math.round(size * lead), letterSpacing: Math.round(size * spacing * 100) / 100, ...family ? { fontFamily: family } : {} });
-var M = "JetBrains Mono";
-var WEB_TYPE = {
-  "Nav 16": T(16, 600, 1.4),
-  "Brand 24": T(24, 900, 1.1, -0.02),
-  "Button 18": T(18, 800, 1.25),
-  "Button 16": T(16, 800, 1.25),
-  "Tag 16": T(16, 700, 1.3, 0, M),
-  "Tag 14": T(14, 700, 1.3, 0, M),
-  "Tag 12": T(12, 700, 1.3, 0, M),
-  "Tag 22": T(22, 700, 1.25, 0, M),
-  "Hero 112": T(112, 900, 0.92, -0.035),
-  "Hero 88": T(88, 900, 0.92, -0.035),
-  "Hero 56": T(56, 900, 0.95, -0.03),
-  "Section 64": T(64, 900, 0.98, -0.03),
-  "Section 48": T(48, 900, 1, -0.03),
-  "Section 36": T(36, 900, 1.05, -0.02),
-  "Title 30": T(30, 900, 1.05, -0.02),
-  "Title 24": T(24, 900, 1.1, -0.015),
-  "Title 20": T(20, 800, 1.2, -0.01),
-  "Lead 22": T(22, 500, 1.45),
-  "Lead 18": T(18, 500, 1.45),
-  "Body 17": T(17, 500, 1.5),
-  "Body 15": T(15, 500, 1.5),
-  "Small 14": T(14, 500, 1.45),
-  "Figure 132": T(132, 900, 0.95, -0.04),
-  "Figure 64": T(64, 900, 1, -0.035),
-  "Figure 48": T(48, 900, 1, -0.03),
-  "Quote 40": T(40, 800, 1.15, -0.02),
-  "Quote 26": T(26, 800, 1.2, -0.01),
-  "Price 72": T(72, 900, 1, -0.04),
-  "Price 56": T(56, 900, 1, -0.04),
-  "Chip 40": T(40, 900, 1),
-  "Burst 56": T(56, 900, 0.92, -0.02),
-  "Seal 64": T(64, 900, 0.9, -0.02),
-  "Ticker 24": T(24, 900, 1.1)
-};
-var WEB_STEPS = {
-  "Hero 112": { laptop: "Hero 88", tablet: "Hero 88", mobile: "Hero 56" },
-  "Section 64": { tablet: "Section 48", mobile: "Section 36" },
-  "Lead 22": { mobile: "Lead 18" },
-  "Figure 132": { tablet: "Figure 64", mobile: "Figure 48" },
-  "Quote 40": { mobile: "Quote 26" },
-  "Price 72": { mobile: "Price 56" },
-  "Title 30": { mobile: "Title 24" }
-};
-function ticker(k, parent, o) {
-  const id = marquee(k, parent, { width: 1200, height: o.height, w: o.w, fill: o.fill, loop: o.loop, cells: o.cells, name: o.name ?? "Ticker", rotate: o.rotate, right: o.right, cell: (c, i) => {
-    k.text(c, o.phrases[i % o.phrases.length], { style: o.style, color: o.ink, autoWidth: true, name: "Ticker words" });
-    spark(k, c, Math.round(o.height * 0.42), o.spark, { name: "Ticker spark" });
-  } });
-  k.patch(id, { layoutSizingHorizontal: "FILL" });
-  return id;
-}
-
-export {
-  FIZZ,
-  maxBrand,
-  grot,
-  display,
-  mono,
-  chromePaint,
-  chromeFx,
-  chromeText,
-  relight,
-  plate,
-  stickerEdge,
-  sticker,
-  burstPaths,
-  burst,
-  burstSticker,
-  spark,
-  halftonePaths,
-  halftone,
-  cutout,
-  bowl,
-  slap,
-  wobble,
-  spin,
-  bob,
-  float,
-  marquee,
-  fitMarquee,
-  confetti,
-  phone,
-  callComponent,
-  quietComponent,
-  WEB_TYPE,
-  WEB_STEPS,
-  ticker
-};