@popcraft/kit 0.32.0 → 0.32.1

package/dist/chunks/chunk-EY2IH47Z.js

@@ -0,0 +1,284 @@
+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 {
+  body,
+  drop,
+  edge,
+  figure,
+  label,
+  shout,
+  slab,
+  sticker,
+  tag,
+  tollBrand
+} from "./chunk-ZYHJY4RD.js";
+import {
+  tick
+} from "./chunk-UDE42EDS.js";
+import {
+  compactNav,
+  footer,
+  respond,
+  rule,
+  typeScale
+} from "./chunk-I2EYNBXR.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-TF2MO3UA.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/style-brutalist-pricing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var PLANS = [
+  { name: "STALL", pitch: "For your first file, and your first sale.", month: 0, year: 0, toll: "5% TOLL A SALE", features: ["3 products, 1 GB a file", "Pay what you want", "Paid out every Friday", "Tax collected and filed for you"], fill: "card", ink: "onCard", mute: "cardMuted", button: "OPEN A STALL" },
+  { name: "BOOTH", pitch: "For when the files pay a bill or two.", month: 15, year: 12, toll: "NO TOLL", features: ["Unlimited products, 5 GB a file", "Discount codes and bundles", "Your own domain on the checkout", "Licence keys for fonts and software"], fill: "primary", ink: "onPrimary", mute: "onPrimary", button: "OPEN A BOOTH" },
+  { name: "PLAZA", pitch: "For a small studio selling together.", month: 39, year: 31, toll: "NO TOLL", features: ["Everything in Booth, 20 GB a file", "Five seats, each with its own login", "Split a sale between collaborators", "Paid out daily"], fill: "text", ink: "onText", mute: "onText", button: "OPEN A PLAZA" }
+];
+var TABLE = [
+  ["Toll on each sale", "5%", "0%", "0%"],
+  ["Products", "3", "No limit", "No limit"],
+  ["Largest file", "1 GB", "5 GB", "20 GB"],
+  ["Pay what you want", true, true, true],
+  ["Tax filed for you", true, true, true],
+  ["Discount codes", false, true, true],
+  ["Your own domain", false, true, true],
+  ["Licence keys", false, true, true],
+  ["Seats", "1", "1", "5"],
+  ["Payouts", "Fridays", "Fridays", "Daily"]
+];
+var FAQ = [
+  ["Is the toll on top of card fees?", "Yes. The card processor takes its own cut of every payment (about 2.9% and 30 cents), on every plan, and we pass it through at cost. The toll is ours."],
+  ["When is Booth cheaper than Stall?", "Once you sell more than $300 a month. Below that, stay on Stall: we would rather you kept the money."],
+  ["Can I switch plans, or stop?", "Any time, from one page. Moving down takes effect at the end of the period you paid for. Your links keep working on every plan."],
+  ["Do yearly plans renew?", "Yes, and we email you two weeks before. A yearly plan is refunded in full inside its first 30 days."]
+];
+var CELL = { desktop: 200, laptop: 190, tablet: 130, mobile: 68 };
+var style_brutalist_pricing_default = defineTemplate({
+  id: "web-saas-style-brutalist-pricing",
+  meta: {
+    name: "Brutalist SaaS pricing page",
+    description: "A neo-brutalist pricing page whose monthly / yearly switch works in present mode: a square knob snaps across and a variable flips every price at once. Three plan blocks in three colours with the middle one stickered, a comparison table with drawn ticks, an FAQ and a last block. Acid lime, black rules and hard shadows, desktop to phone",
+    category: "web",
+    tags: ["saas", "pricing", "plans", "toggle", "interactive", "variables", "comparison table", "faq", "neo-brutalist", "brutalism", "bold", "creator tool", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["pricing", "launch", "comparison"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  build() {
+    const k = new Kit("Brutalist SaaS pricing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    tollBrand(k, ["paper", "text", "onText", "onPaper", "primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
+    const monthly = k.variable("Billing", "monthly", "BOOLEAN", true);
+    const yearly = k.variable("Billing", "yearly", "BOOLEAN", false);
+    const s = typeScale(k, {
+      "Nav 16": body(16, 700),
+      "Brand 22": shout(22, { leading: 1.25 }),
+      "Button 16": body(16, 800),
+      "Slab 20": shout(20, { leading: 1.3 }),
+      "Tag 13": label(13),
+      "Tag 15": label(15),
+      "Switch 18": label(18),
+      "Shout 128": shout(128),
+      "Shout 112": shout(112),
+      "Shout 80": shout(80),
+      "Shout 48": shout(48, { leading: 0.94 }),
+      "Shout 72": shout(72),
+      "Shout 56": shout(56),
+      "Shout 38": shout(38, { leading: 0.96 }),
+      "Plan 44": shout(44, { leading: 1 }),
+      "Price 120": figure(120),
+      "Price 96": figure(96),
+      "Lead 22": body(22, 500),
+      "Lead 18": body(18, 500),
+      "Body 17": body(17, 500),
+      "Body 15": body(15, 600),
+      "Small 14": body(14, 600),
+      "Foot head 14": body(14, 900),
+      "Row 18": body(18, 700),
+      "Row 14": body(14, 700),
+      "Cell 18": { ...figure(18), textAlign: "CENTER" },
+      "Cell 13": { ...figure(13), textAlign: "CENTER" },
+      "Head 22": shout(22, { leading: 1.2, center: true }),
+      "Head 13": shout(13, { leading: 1.2, center: true }),
+      "Question 28": shout(28, { leading: 1.05 }),
+      "Sticker 30": shout(30, { center: true, leading: 0.95 }),
+      "Sticker 13": label(13, { center: true })
+    });
+    buttons(k, { style: s("Button 16"), pad: [12, 20], radius: 0 });
+    k.variantSet("Billing switch", "Billing", ["Monthly", "Yearly"], {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      gap: 16,
+      align: "CENTER",
+      description: "Monthly or yearly billing: click to switch, and the knob snaps across. On the pricing page the click also flips the billing variables every price is bound to.",
+      props: { Left: "MONTHLY", Right: "YEARLY" }
+    }, (state, id) => {
+      k.propText(id, "Left", { style: s("Switch 18"), color: "onCard", autoWidth: true });
+      const track = k.stack(id, { direction: "HORIZONTAL", width: 96, height: 48, padding: 7, align: "CENTER", justify: state === "Yearly" ? "MAX" : "MIN", fill: state === "Yearly" ? "primary" : "accent", stroke: edge(4), name: "Track" });
+      k.rect(track, 34, 34, "text", { name: "Knob" });
+      k.propText(id, "Right", { style: s("Switch 18"), color: "onCard", autoWidth: true });
+    });
+    k.changeTo("Billing switch/Monthly", "ON_CLICK", "Billing switch/Yearly", 160, "EASE_OUT");
+    k.changeTo("Billing switch/Yearly", "ON_CLICK", "Billing switch/Monthly", 160, "EASE_OUT");
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 88, top: 28 });
+    nav(k, sheet, { links: ["How it works", "What you keep", "Pricing", "FAQ"], cta: "Open your booth", style: s("Nav 16"), brandStyle: s("Brand 22") });
+    for (const id of k.named(sheet, "Logo tile")) k.patch(id, { cornerRadius: 0 });
+    const head = k.stack(sheet, { gap: 36, name: "Header" });
+    k.text(head, "PAY NOTHING UNTIL YOU SELL.", { style: s("Shout 128"), color: "text", name: "Headline" });
+    const sub = k.stack(head, { direction: "HORIZONTAL", gap: 48, align: "CENTER", name: "Header row" });
+    k.text(sub, "Start on Stall for $0 and a 5% toll. When the toll costs more than a plan would, trade it for a flat fee. Pay yearly and two months are on us.", { style: s("Lead 22"), color: "onPaper", name: "Lead" });
+    const sw = slab(k, sub, { direction: "HORIZONTAL", width: "HUG", gap: 18, align: "CENTER", fill: "card", rule: 4, shadow: 8, padding: { top: 16, right: 22, bottom: 16, left: 22 }, name: "Switch block" });
+    const toggle = k.instance(sw, "Billing switch", { Left: "MONTHLY", Right: "YEARLY" }, { name: "Billing toggle" });
+    k.setVariable(toggle, monthly, { toggle: true });
+    k.setVariable(toggle, yearly, { toggle: true });
+    tag(k, sw, "2 MONTHS FREE", { style: s("Tag 13"), fill: "paper", ink: "text", name: "Saving" });
+    const plans = k.stack(sheet, { direction: "HORIZONTAL", gap: 28, name: "Plans" });
+    for (const p of PLANS) {
+      const card = slab(k, plans, { ...p.name === "BOOTH" ? {} : { height: "FILL" }, gap: 18, fill: p.fill, shadow: 12, padding: 32, name: "Plan" });
+      const top = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 12, name: "Plan head" });
+      k.text(top, p.name, { style: s("Plan 44"), color: p.ink, autoWidth: true, name: "Plan name" });
+      tag(k, top, p.toll, { style: s("Tag 13"), fill: p.fill === "card" ? "paper" : "card", ink: p.fill === "card" ? "text" : "onCard", name: "Toll" });
+      k.text(card, p.pitch, { style: s("Body 17"), color: p.mute, name: "Pitch" });
+      const price = k.stack(card, { name: "Price" });
+      const block = (which) => {
+        const b = k.stack(price, { gap: 2, fill: p.fill, name: `${which} price` });
+        const now = which === "Monthly" ? p.month : p.year;
+        k.text(b, `$${now}`, { style: s("Price 120"), color: p.ink, name: "Amount" });
+        k.text(b, p.month === 0 ? "a month, for as long as you like." : which === "Monthly" ? "a month, billed monthly. Stop any time." : `a month, billed $${p.year * 12} a year. You save $${(p.month - p.year) * 12}.`, { style: s("Body 15"), color: p.mute, name: "Billed" });
+        return b;
+      };
+      k.bindVariable(block("Monthly"), "visible", monthly);
+      k.bindVariable(block("Yearly"), "visible", yearly);
+      const go = k.stack(card, { direction: "HORIZONTAL", justify: "CENTER", fill: p.fill === "text" ? "primary" : "text", stroke: edge(4, p.fill === "text" ? "card" : "text"), padding: { top: 16, right: 20, bottom: 16, left: 20 }, name: "Plan button" });
+      k.text(go, p.button, { style: s("Slab 20"), color: p.fill === "text" ? "onPrimary" : "onText", autoWidth: true, name: "Plan button words" });
+      const list = k.stack(card, { gap: 12, padding: { top: 6, right: 0, bottom: 0, left: 0 }, name: "Features" });
+      for (const f of p.features) {
+        const row = k.stack(list, { direction: "HORIZONTAL", gap: 10, name: "Feature" });
+        tick(k, row, 22, p.ink, { weight: 4 });
+        k.text(row, f, { style: s("Body 15"), color: p.ink, name: "Feature words" });
+      }
+    }
+    const badge = sticker(k, plans, { size: 132, teeth: 14, fill: "accent", ink: "onAccent", big: "TOP\nPICK", small: "PAYS AT $300", bigStyle: s("Sticker 30"), smallStyle: s("Sticker 13"), name: "Plan sticker", tilt: 12, shadow: 7, absolute: { x: 716, y: -104 } });
+    void badge;
+    const table = k.stack(sheet, { gap: 28, name: "Compare" });
+    k.text(table, "LINE BY LINE.", { style: s("Shout 72"), color: "text", name: "Compare title" });
+    const grid = slab(k, table, { fill: "card", shadow: 12, padding: 6, name: "Table" });
+    const headRow = k.stack(grid, { direction: "HORIZONTAL", fill: "text", align: "CENTER", padding: { top: 14, right: 0, bottom: 14, left: 24 }, name: "Table head" });
+    k.text(headRow, "WHAT YOU GET", { style: s("Tag 15"), color: "onText", name: "Table corner" });
+    for (const p of PLANS) {
+      const c = k.stack(headRow, { width: CELL.desktop, name: "Head cell" });
+      k.text(c, p.name, { style: s("Head 22"), color: "onText", name: "Head plan" });
+    }
+    TABLE.forEach(([what, ...cells], r) => {
+      const row = k.stack(grid, { direction: "HORIZONTAL", align: "CENTER", fill: r % 2 ? k.tint("accent", 0.2) : "card", padding: { top: 14, right: 0, bottom: 14, left: 24 }, name: "Table row" });
+      k.text(row, what, { style: s("Row 18"), color: "onCard", name: "Row name" });
+      for (const c of cells) {
+        const cell = k.stack(row, { width: CELL.desktop, align: "CENTER", name: "Cell" });
+        if (c === true) tick(k, cell, 26, "onCard", { weight: 5 });
+        else if (c === false) k.rect(cell, 18, 4, "cardMuted", { name: "Dash" });
+        else k.text(cell, c, { style: s("Cell 18"), color: "onCard", name: "Cell words" });
+      }
+    });
+    const faq = k.stack(sheet, { gap: 28, name: "FAQ" });
+    k.text(faq, "ASK BEFORE YOU PAY.", { style: s("Shout 72"), color: "text", name: "FAQ title" });
+    const answers = k.stack(faq, { name: "Answers" });
+    for (const [q, a] of FAQ) {
+      rule(k, answers, "text", { weight: 4 });
+      const item = k.stack(answers, { direction: "HORIZONTAL", gap: 40, padding: { top: 22, right: 0, bottom: 26, left: 0 }, name: "Question" });
+      k.text(item, q.toUpperCase(), { style: s("Question 28"), color: "text", width: 400, name: "Q" });
+      k.text(item, a, { style: s("Lead 18"), color: "onPaper", name: "A" });
+    }
+    rule(k, answers, "text", { weight: 4 });
+    const last = slab(k, sheet, { direction: "HORIZONTAL", gap: 40, align: "CENTER", fill: "accent", shadow: 14, padding: 48, name: "Last" });
+    k.text(last, "NOT SURE? START ON STALL. IT COSTS $0.", { style: s("Shout 56"), color: "onAccent", name: "Last words" });
+    const lastGo = k.stack(last, { direction: "HORIZONTAL", width: "HUG", fill: "text", effects: drop(k, 0), padding: { top: 18, right: 28, bottom: 18, left: 28 }, name: "Last button" });
+    k.text(lastGo, "OPEN A STALL", { style: s("Slab 20"), color: "onText", autoWidth: true, name: "Last button words" });
+    footer(k, sheet, {
+      about: "One link that takes the payment, sends the file and files the tax. Made by four people in Rotterdam.",
+      columns: [["Tollbooth", ["How it works", "Pricing", "Changelog"]], ["Sellers", ["Presets", "Fonts", "Templates"]], ["The small print", ["Terms", "Privacy", "Refunds"]]],
+      legal: "Prices in US dollars, before tax. \xA9 2026 Tollbooth B.V.",
+      brandStyle: s("Brand 22"),
+      headStyle: s("Foot head 14"),
+      linkStyle: s("Small 14"),
+      ruleColor: "text"
+    });
+    respond(k, sheet, s, {
+      stack: ["Header row", "Plans", "Question", "Last", "Footer columns"],
+      restyle: {
+        "Shout 128": { laptop: "Shout 112", tablet: "Shout 80", mobile: "Shout 48" },
+        "Shout 72": { tablet: "Shout 56", mobile: "Shout 38" },
+        "Shout 56": { mobile: "Shout 38" },
+        "Lead 22": { mobile: "Lead 18" },
+        "Price 120": { laptop: "Price 96", mobile: "Price 96" },
+        "Row 18": { mobile: "Row 14" },
+        "Cell 18": { mobile: "Cell 13" },
+        "Head 22": { mobile: "Head 13" }
+      },
+      gap: { tablet: 72, mobile: 56 },
+      tweak: (kit, id, size) => {
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        const pad = (v, h = v) => ({ top: v, right: h, bottom: v, left: h });
+        each("Cell", { width: CELL[size] });
+        each("Head cell", { width: CELL[size] });
+        if (size === "laptop") {
+          each("Plan", { padding: pad(26) });
+          each("Plan sticker", { x: 650 });
+        }
+        if (size === "tablet" || size === "mobile") {
+          each("Plan", { layoutSizingVertical: "HUG" });
+          each("Switch block", { layoutSizingHorizontal: "HUG" });
+          each("Q", { layoutSizingHorizontal: "FILL" });
+          each("Question", { itemSpacing: 10 });
+          each("Last button", { layoutSizingHorizontal: "HUG" });
+          each("Last", { itemSpacing: 24 });
+          each("Plan sticker", { x: size === "tablet" ? 480 : 196, y: size === "tablet" ? 660 : 606 });
+          if (size === "tablet") compactNav(kit, id, ["What you keep"], 22);
+        }
+        if (size === "mobile") {
+          each("Plan", { padding: pad(24, 20) });
+          each("Last", { padding: pad(28, 20) });
+          each("Footer lists", { itemSpacing: 16 });
+          each("Table head", { padding: { top: 12, right: 0, bottom: 12, left: 12 } });
+          each("Table row", { padding: { top: 12, right: 0, bottom: 12, left: 12 } });
+          each("Switch block", { padding: pad(12, 12), itemSpacing: 12 });
+          each("Saving", { visible: false });
+        }
+      }
+    });
+    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_brutalist_pricing_default
+};

package/dist/chunks/chunk-EYNUZMPC.js

@@ -0,0 +1,338 @@
+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 {
+  gridPaths
+} from "./chunk-UDE42EDS.js";
+import {
+  bloom,
+  shadow
+} from "./chunk-M6VTXO6F.js";
+import {
+  box,
+  line,
+  rng
+} from "./chunk-6RCDZU4R.js";
+import {
+  ease
+} from "./chunk-AY2VBUGS.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/black-friday-ticker-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DEAL = {
+  product: "Halyard",
+  symbol: "HLYD",
+  pitch: "Status pages and on-call alerts for small teams.",
+  site: "halyard.example",
+  link: "{{brand.site}}/dip",
+  /** Team, a year: the list price and the Black Friday price. */
+  teamWas: 590,
+  teamNow: 236,
+  /** Solo, a year. */
+  soloWas: 190,
+  soloNow: 76,
+  off: 60,
+  /** Lifetime Solo: paid once, a fixed number of seats. */
+  lifetime: 299,
+  seats: 150,
+  seatsLeft: 113,
+  opens: "Fri 27 Nov",
+  ends: "Mon 30 Nov, 23:59 PT",
+  /** The countdown as the pieces show it: what is left when the piece goes out. */
+  days: 2,
+  hours: 9,
+  minutes: 41,
+  seconds: 59
+};
+var two = (n) => String(n).padStart(2, "0");
+var COLORS = {
+  paper: "#F3C6A5",
+  text: "#1B1410",
+  onPaper: "#57402F",
+  primary: "#0C4B34",
+  onPrimary: "#FFF3E6",
+  accent: "#FF4A1C",
+  onAccent: "#1B1410",
+  card: "#0B110D",
+  onCard: "#EAFBEA",
+  cardMuted: "#8AA190"
+};
+function floorBrand(k, fields, roles = Object.keys(COLORS)) {
+  k.brand(Object.fromEntries(roles.map((r) => [r, COLORS[r]])), fields);
+  k.palette({ led: "#4DFF88", amber: "#FFB627", down: "#FF5A36", well: "#050806", bezel: "#2A352D", ledOff: "#1B2A20", print: "#C98E69", shade: "#3A2012", light: "#FFE9D6", ticket: "#FFF6EA", ticketInk: "#1B1410", ticketMuted: "#6A5546" });
+}
+function listingPaths(w, h, u = 1, seed = 27) {
+  const r = rng(seed);
+  const col = 216 * u, row2 = 26 * u, bar = 8 * u, pad = 18 * u;
+  const out = [];
+  for (let x = 0, c = 0; x < w; x += col, c++) {
+    if (c > 0) out.push(box(x - u, 0, 2 * u, h));
+    let n = Math.floor(r() * 9);
+    for (let y = pad; y < h - bar; y += row2, n++) {
+      if (n % 14 === 0) {
+        out.push(box(x + pad, y, col - pad * 2, bar * 1.6));
+        continue;
+      }
+      const sym = (30 + r() * 26) * u, a = (22 + r() * 14) * u, b = (16 + r() * 12) * u;
+      out.push(box(x + pad, y, sym, bar), box(x + col - pad - a - b - 12 * u, y, a, bar), box(x + col - pad - b, y, b, bar));
+    }
+  }
+  return out;
+}
+function listings(k, parent, w, h, o = {}) {
+  return k.vector(parent, w, h, listingPaths(w, h, o.u ?? 1), "print", { name: o.name ?? "Listings", opacity: o.opacity ?? 0.38, absolute: { x: 0, y: 0 } });
+}
+function fitListings(k, root, u = 1, name = "Listings") {
+  for (const id of k.named(root, name)) {
+    const p = k.node(k.node(id).parentId);
+    k.patch(id, { x: 0, y: 0, width: p.width, height: p.height, paths: listingPaths(p.width, p.height, u) });
+  }
+}
+function arrow(k, parent, size, role, o = {}) {
+  const h = Math.round(size * 0.82);
+  const points = o.up ? [{ x: 0, y: h }, { x: size / 2, y: 0 }, { x: size, y: h }] : [{ x: 0, y: 0 }, { x: size, y: 0 }, { x: size / 2, y: h }];
+  return k.vector(parent, size, h, [{ closed: true, points }], role, { name: o.name ?? "Arrow", ...o.effects ? { effects: o.effects } : {} });
+}
+var lit = (k, role, blur = 18, a = 0.5) => [bloom(k, role, blur, a)];
+function change(k, parent, words, o) {
+  const role = o.role ?? "down";
+  const row2 = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", gap: Math.round(o.size * 0.4), align: "CENTER", name: o.name ?? "Change" });
+  arrow(k, row2, o.size, role, { effects: lit(k, role, o.glow ?? 14) });
+  const figure = k.text(row2, words, { style: o.style, color: role, autoWidth: true, name: `${o.name ?? "Change"} figure` });
+  return { row: row2, figure };
+}
+function stamp(k, parent, words, o) {
+  const [v, h] = o.pad ?? [10, 22];
+  const s = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", fill: "accent", radius: 6, padding: 5, name: o.name ?? "Stamp", ...o.absolute ? { absolute: o.absolute } : {} });
+  const inner = k.stack(s, { direction: "HORIZONTAL", width: "HUG", radius: 3, padding: { top: v, right: h, bottom: v, left: h }, stroke: { color: "onAccent", width: 2, align: "INSIDE" }, name: "Stamp edge" });
+  k.text(inner, words, { style: o.style, color: "onAccent", autoWidth: true, name: o.textName ?? "Stamp words" });
+  if (o.rotation) k.patch(s, { rotation: o.rotation });
+  return s;
+}
+var SPAN = 2e3;
+function board(k, parent, o) {
+  const u = o.u ?? 1;
+  return k.stack(parent, {
+    width: o.width ?? "FILL",
+    fill: "card",
+    radius: o.radius ?? Math.round(28 * u),
+    padding: o.pad,
+    gap: o.gap,
+    name: o.name ?? "Board",
+    stroke: { color: "bezel", width: Math.max(2, Math.round(5 * u)), align: "INSIDE" },
+    effects: [shadow(k, "shade", 0.42, Math.round(26 * u), Math.round(60 * u)), shadow(k, "shade", 0.3, Math.round(4 * u), Math.round(8 * u))],
+    ...o.absolute ? { absolute: o.absolute } : {}
+  });
+}
+function boardHead(k, parent, o) {
+  const head = k.stack(parent, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 12, name: o.name ?? "Board head" });
+  const live = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: Math.round(o.lamp * 0.8), align: "CENTER", name: "Live" });
+  k.ellipse(live, o.lamp, "led", { name: "Live lamp", effects: lit(k, "led", o.lamp, 0.8) });
+  k.text(live, o.label, { style: o.style, color: "amber", autoWidth: true, name: "Board label" });
+  k.text(head, o.note, { style: o.style, color: "cardMuted", autoWidth: true, name: "Board note" });
+  return head;
+}
+function ledWell(k, parent, o, fill) {
+  const well = k.stack(parent, { direction: o.direction ?? "HORIZONTAL", width: o.width ?? "FILL", height: o.height, fill: "well", radius: o.radius ?? Math.round(o.height * 0.08), clip: true, align: "CENTER", justify: o.align ?? "MIN", gap: o.gap ?? 0, padding: { top: 0, right: o.pad ?? 0, bottom: 0, left: o.pad ?? 0 }, name: o.name ?? "LED well" });
+  fill(well);
+  k.vector(well, o.span ?? 1100, o.height, gridPaths(o.span ?? 1100, o.height, o.step, o.weight ?? Math.max(1, Math.round(o.step / 4))), "well", { name: "Grille", absolute: { x: 0, y: 0 }, opacity: 0.8 });
+  return well;
+}
+var TAPE = [
+  { symbol: `${DEAL.symbol}.TEAM`, change: `${DEAL.off}%`, price: `$${DEAL.teamNow}` },
+  { symbol: `${DEAL.symbol}.SOLO`, change: `${DEAL.off}%`, price: `$${DEAL.soloNow}` },
+  { symbol: `${DEAL.symbol}.LIFE`, price: `$${DEAL.lifetime} ONCE` }
+];
+function tape(k, parent, o) {
+  const items = o.items ?? TAPE;
+  const cycles = Math.ceil(((o.span ?? 1200) + o.item) / (items.length * o.item));
+  const period = cycles * items.length * o.item;
+  const strip = k.stack(parent, { direction: "HORIZONTAL", width: o.width ?? "FILL", height: o.height, fill: "card", clip: true, radius: o.radius ?? 0, name: o.name ?? "Tape", stroke: { color: "bezel", width: Math.max(1, Math.round(o.height / 24)), align: "INSIDE" }, ...o.absolute ? { absolute: o.absolute } : {} });
+  const size = Math.round(o.height * 0.26), glow = Math.round(o.height * 0.22);
+  for (let c = 0, i = 0; c < cycles; c++) for (const it of items) {
+    const cell = k.stack(strip, { direction: "HORIZONTAL", width: o.item, height: o.height, align: "CENTER", justify: "CENTER", gap: Math.round(o.height * 0.24), absolute: { x: 0, y: 0 }, name: "Tape item" });
+    k.text(cell, it.symbol, { style: o.style, color: "amber", autoWidth: true, name: "Tape symbol" });
+    if (it.change) change(k, cell, it.change, { style: o.style, size, name: "Tape change", glow });
+    k.text(cell, it.price, { style: o.style, color: "led", autoWidth: true, name: "Tape price" });
+    k.rect(cell, Math.max(2, Math.round(o.height / 16)), Math.max(2, Math.round(o.height / 16)), "cardMuted", { name: "Tape dot" });
+    k.patch(cell, { translateX: i * o.item - (o.offset ?? 0) });
+    if (o.rate) k.behave(cell, "translateX", [{ kind: "spin", rate: -o.rate }, { kind: "mod", period, offset: -o.item }]);
+    i++;
+  }
+  return strip;
+}
+var BEFORE = [0.99, 1, 0.985, 1.005, 0.995, 1.01, 0.99, 1];
+var AFTER = [1.05, 0.97, 1.03, 0.98, 1, 1.02, 0.99, 1];
+function chart(k, parent, o) {
+  const { w, h } = o, u = o.u ?? 1;
+  const frame = k.frame(parent, { x: o.absolute?.x ?? 0, y: o.absolute?.y ?? 0, width: w, height: h }, { name: o.name ?? "Chart" });
+  if (!o.absolute) k.patch(frame, { layoutPositioning: "AUTO" });
+  const left = 8 * u, right = 86 * u, top = 34 * u, foot = 14 * u;
+  const pw = w - left - right, ph = h - top - foot;
+  const hi = top + ph * 0.14, lo = top + ph * 0.84;
+  const y = (f, base) => base + (1 - f) * ph * 1.5;
+  const levels = [0, 0.25, 0.5, 0.75, 1].map((f) => top + ph * f);
+  k.vector(frame, w, h, levels.map((ly) => line(left, ly, left + pw, ly)), [], { name: "Grid", stroke: { color: "ledOff", width: Math.max(1, 2 * u), dash: [6 * u, 8 * u] }, absolute: { x: 0, y: 0 } });
+  const n = BEFORE.length + 1 + AFTER.length, stepX = pw / n, bw = stepX * 0.56;
+  const cx = (i) => left + stepX * (i + 0.5);
+  const bx = left + stepX * BEFORE.length - stepX * 0.12;
+  const bell2 = k.frame(frame, { x: 0, y: 0, width: w, height: h }, { name: "Bell marker" });
+  k.vector(bell2, w, h, [line(bx, top - 4 * u, bx, top + ph)], [], { name: "Bell line", stroke: { color: "amber", width: Math.max(1, 2 * u), dash: [4 * u, 6 * u] }, absolute: { x: 0, y: 0 } });
+  k.text(bell2, o.bell ?? "OPENING BELL", { style: o.style, color: "amber", autoWidth: true, name: "Bell label", absolute: { x: bx + 10 * u, y: 0 } });
+  k.text(frame, o.was, { style: o.style, color: "cardMuted", autoWidth: true, name: "Was level", absolute: { x: left + pw + 10 * u, y: hi - 14 * u } });
+  k.text(frame, o.now, { style: o.style, color: "led", autoWidth: true, name: "Now level", absolute: { x: left + pw + 10 * u, y: lo - 14 * u } });
+  const up = [], down = [], closes = [];
+  const candle = (i, open, close, base, into) => {
+    const yo = y(open, base), yc = y(close, base), t = Math.min(yo, yc), b = Math.max(yo, yc), wick = 9 * u;
+    into.push(box(cx(i) - bw / 2, t, bw, Math.max(3 * u, b - t)), box(cx(i) - u, t - wick, 2 * u, b - t + wick * 2));
+    closes.push({ x: cx(i), y: yc });
+  };
+  const VOLUME = [0.16, 0.12, 0.2, 0.14, 0.18, 0.12, 0.22, 0.26, 1, 0.74, 0.58, 0.5, 0.4, 0.44, 0.32, 0.3, 0.26];
+  const volume = (from, to) => VOLUME.slice(from, to).map((v, j) => box(cx(from + j) - bw / 2, top + ph - ph * 0.3 * v, bw, ph * 0.3 * v));
+  const group = (name, x0, x1, upPaths, downPaths, vol) => {
+    const g = k.frame(frame, { x: x0, y: 0, width: x1 - x0, height: h }, { name, clip: true });
+    const shift = (p) => ({ ...p, points: p.points.map((q) => ({ ...q, x: q.x - x0 })) });
+    k.vector(g, x1 - x0, h, vol.map(shift), "bezel", { name: "Volume", absolute: { x: 0, y: 0 } });
+    if (upPaths.length) k.vector(g, x1 - x0, h, upPaths.map(shift), "led", { name: "Up candles", absolute: { x: 0, y: 0 }, effects: lit(k, "led", 10 * u, 0.35) });
+    if (downPaths.length) k.vector(g, x1 - x0, h, downPaths.map(shift), "down", { name: "Down candles", absolute: { x: 0, y: 0 }, effects: lit(k, "down", 10 * u, 0.35) });
+    return g;
+  };
+  BEFORE.forEach((c, i) => {
+    const open = i ? BEFORE[i - 1] : 1;
+    candle(i, open, c, hi, c >= open ? up : down);
+  });
+  const iFall = BEFORE.length;
+  const before = group("Candles before", 0, left + stepX * iFall, up.splice(0), down.splice(0), volume(0, iFall));
+  down.push(box(cx(iFall) - bw / 2, hi, bw, lo - hi), box(cx(iFall) - u, hi - 10 * u, 2 * u, lo - hi + 24 * u));
+  closes.push({ x: cx(iFall), y: hi }, { x: cx(iFall), y: lo });
+  const fall = group("Candle fall", left + stepX * iFall, left + stepX * (iFall + 1), [], down.splice(0), volume(iFall, iFall + 1));
+  AFTER.forEach((c, i) => {
+    const open = i ? AFTER[i - 1] : 1;
+    candle(iFall + 1 + i, open, c, lo, c >= open ? up : down);
+  });
+  const after = group("Candles after", left + stepX * (iFall + 1), left + pw + 2 * u, up.splice(0), down.splice(0), volume(iFall + 1, n));
+  const len = (a, b) => Math.hypot(b.x - a.x, b.y - a.y);
+  let total = 0, toTop = 0, toFoot = 0;
+  closes.forEach((p, i) => {
+    if (!i) return;
+    total += len(closes[i - 1], p);
+    if (i === iFall) toTop = total;
+    if (i === iFall + 1) toFoot = total;
+  });
+  const priceLine = k.vector(frame, w, h, [{ closed: false, points: closes }], [], { name: "Price line", stroke: { color: "onCard", width: Math.max(2, 4 * u), join: "ROUND" }, absolute: { x: 0, y: 0 }, effects: lit(k, "onCard", 12 * u, 0.5) });
+  return { frame, line: priceLine, cliffFrom: toTop / total, cliffTo: toFoot / total, before, fall, after, bell: bell2, room: { x: left + stepX * (iFall + 1.6), y: top + ph * 0.1, width: pw - stepX * (iFall + 1.9), height: ph * 0.5 } };
+}
+function playChart(k, c, o) {
+  const lin = ease.linear;
+  k.animate(c.line, "trim.end", [
+    { t: o.at, v: 0, ease: lin },
+    { t: o.drop, v: c.cliffFrom, ease: ease.named("expo", "in") },
+    { t: o.drop + o.fall, v: c.cliffTo, ease: ease.out("cubic") },
+    { t: o.drop + o.fall + o.settle, v: 1 }
+  ]);
+}
+function ticket(k, parent, o) {
+  const u = o.u ?? 1;
+  const slip = k.stack(parent, { direction: "HORIZONTAL", width: o.width ?? "FILL", fill: "ticket", radius: Math.round(6 * u), gap: Math.round(o.pad * 0.6), padding: { top: o.pad, right: o.pad, bottom: o.pad, left: Math.round(o.pad * 0.6) }, name: o.name ?? "Ticket", effects: [shadow(k, "shade", 0.34, Math.round(14 * u), Math.round(34 * u))], ...o.absolute ? { absolute: o.absolute } : {} });
+  const punched = k.stack(slip, { width: o.hole, height: "FILL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Punched edge" });
+  for (let i = 0; i < o.holes; i++) k.ellipse(punched, o.hole, "print", { name: "Hole" });
+  const body = k.stack(slip, { gap: o.gap, name: "Ticket body" });
+  if (o.rotation) k.patch(slip, { rotation: o.rotation });
+  return { slip, body };
+}
+function row(k, parent, label, figure, o) {
+  const r = k.stack(parent, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: o.gap ?? 12, name: o.name });
+  const l = k.text(r, label, { style: o.style, color: o.color, autoWidth: true, name: `${o.name} label` });
+  const f = k.text(r, figure, { style: o.figureStyle ?? o.style, color: o.figureColor ?? o.color, autoWidth: true, name: `${o.name} figure`, ...o.effects ? { effects: o.effects } : {} });
+  return { row: r, label: l, figure: f };
+}
+function dashRule(k, parent, role, o = {}) {
+  const weight = o.weight ?? 2;
+  const strip = k.stack(parent, { direction: "HORIZONTAL", height: weight, clip: true, name: o.name ?? "Rule" });
+  k.vector(strip, SPAN, weight, [line(0, weight / 2, SPAN, weight / 2)], [], { name: "Dashes", stroke: { color: role, width: weight, dash: o.dash ?? [8, 6], cap: "NONE" } });
+  return strip;
+}
+function bell(k, parent, size, role, o = {}) {
+  const s = size / 100;
+  const p = (x, y, hx1, hy1, hx2, hy2) => ({ x: x * s, y: y * s, ...hx1 !== void 0 ? { handleIn: { x: hx1 * s, y: hy1 * s } } : {}, ...hx2 !== void 0 ? { handleOut: { x: hx2 * s, y: hy2 * s } } : {} });
+  const body = { closed: true, points: [
+    p(50, 14, 36, 14, 64, 14),
+    p(78, 48, 78, 26, 78, 66),
+    p(92, 84, 84, 74),
+    p(8, 84, void 0, void 0, 16, 74),
+    p(22, 48, 22, 66, 22, 26)
+  ] };
+  const paths = [box(44 * s, 0, 12 * s, 16 * s), body, box(4 * s, 84 * s, 92 * s, 8 * s), { closed: true, points: [p(40, 94), p(60, 94), p(56, 106, 60, 102), p(44, 106, void 0, void 0, 40, 102)] }];
+  return k.vector(parent, size, Math.round(108 * s), paths, role, { name: o.name ?? "Bell", ...o.absolute ? { absolute: o.absolute } : {} });
+}
+function floorTicket(k, parent, o) {
+  const { width: w, height: h } = o, u = o.u ?? 1;
+  const f = k.frame(parent, { x: o.x, y: o.y, width: w, height: h }, { name: o.name ?? "Floor ticket", fill: "ticket", radius: Math.round(8 * u), effects: [shadow(k, "shade", 0.3, Math.round(12 * u), Math.round(30 * u))] });
+  const pad = 40 * u, edge = 56 * u, rowH = 44 * u, bar = 14 * u;
+  const lens = [0.5, 0.32, 0.44, 0.27, 0.52, 0.36, 0.41, 0.3, 0.48, 0.34];
+  const print = [box(edge + pad, pad, (w - edge - pad * 2) * 0.42, bar * 2.2)];
+  for (let i = 0, y = pad + rowH * 2; y < h - pad; i++, y += rowH) {
+    if (i % 4 === 3) {
+      print.push(box(edge + pad, y + bar / 2 - u, w - edge - pad * 2, 2 * u));
+      continue;
+    }
+    print.push(box(edge + pad, y, (w - edge - pad * 2) * lens[i % lens.length], bar), box(w - pad - (w - edge - pad * 2) * 0.16, y, (w - edge - pad * 2) * 0.16, bar));
+  }
+  for (let y = pad; y < h - pad / 2; y += 52 * u) print.push({ closed: true, points: [0, 1, 2, 3, 4, 5, 6, 7].map((i) => ({ x: edge / 2 + 9 * u * Math.cos(i * Math.PI / 4), y: y + 9 * u + 9 * u * Math.sin(i * Math.PI / 4) })) });
+  print.push(box(edge, 0, 2 * u, h));
+  k.vector(f, w, h, print, "print", { name: "Print", absolute: { x: 0, y: 0 }, opacity: 0.55 });
+  k.patch(f, { rotation: o.rotation });
+  return f;
+}
+function deskScreens(k, parent, o) {
+  const n = o.count ?? 3, gap = Math.round(o.width * 0.04);
+  const g = k.frame(parent, { x: o.x, y: o.y, width: o.width, height: o.height }, { name: o.name ?? "Desk screens" });
+  const sw = Math.round((o.width - gap * (n - 1)) / n), sh = Math.round(o.height * 0.7), bez = Math.max(6, Math.round(sw * 0.035));
+  const shapes = [[0.3, 0.32, 0.28, 0.4, 0.36, 0.78, 0.72, 0.8, 0.76], [0.7, 0.66, 0.72, 0.6, 0.5, 0.46, 0.38, 0.3, 0.26], [0.26, 0.3, 0.24, 0.34, 0.3, 0.7, 0.66, 0.74, 0.7]];
+  for (let i = 0; i < n; i++) {
+    const x = i * (sw + gap), y = i % 2 * Math.round(o.height * 0.06);
+    k.rect(g, Math.round(sw * 0.12), o.height - y - sh, "bezel", { name: "Stand", absolute: { x: x + Math.round(sw * 0.44), y: y + sh } });
+    k.rect(g, Math.round(sw * 0.5), Math.round(bez * 1.6), "bezel", { name: "Foot", radius: bez, absolute: { x: x + Math.round(sw * 0.25), y: o.height - Math.round(bez * 1.6) } });
+    const s = k.frame(g, { x, y, width: sw, height: sh }, { name: "Screen", fill: "bezel", radius: Math.round(bez * 1.6), effects: [shadow(k, "shade", 0.35, Math.round(sw * 0.04), Math.round(sw * 0.1))] });
+    const iw = sw - bez * 2, ih = sh - bez * 2;
+    const glass = k.frame(s, { x: bez, y: bez, width: iw, height: ih }, { name: "Glass", fill: "card", radius: bez, clip: true });
+    k.vector(glass, iw, ih, [0.25, 0.5, 0.75].map((f) => line(0, ih * f, iw, ih * f)), [], { name: "Grid", stroke: { color: "ledOff", width: Math.max(1, bez / 4), dash: [bez, bez] }, absolute: { x: 0, y: 0 } });
+    const pts = shapes[i % shapes.length];
+    const falls = pts[pts.length - 1] > pts[0];
+    k.vector(glass, iw, ih, [{ closed: false, points: pts.map((f, j) => ({ x: iw * (0.06 + 0.88 * j / (pts.length - 1)), y: ih * f })) }], [], { name: "Screen line", stroke: { color: falls ? "down" : "led", width: Math.max(2, bez / 2), join: "ROUND" }, absolute: { x: 0, y: 0 }, effects: lit(k, falls ? "down" : "led", bez * 1.5, 0.4) });
+  }
+  if (o.rotation) k.patch(g, { rotation: o.rotation });
+  return g;
+}
+
+export {
+  DEAL,
+  two,
+  floorBrand,
+  listingPaths,
+  listings,
+  fitListings,
+  arrow,
+  lit,
+  change,
+  stamp,
+  board,
+  boardHead,
+  ledWell,
+  TAPE,
+  tape,
+  chart,
+  playChart,
+  ticket,
+  row,
+  dashRule,
+  bell,
+  floorTicket,
+  deskScreens
+};