@popcraft/kit 0.31.0 → 0.32.0

package/dist/chunks/chunk-5ZDMK5WM.js

@@ -1,284 +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 {
-  body,
-  drop,
-  edge,
-  figure,
-  label,
-  shout,
-  slab,
-  sticker,
-  tag,
-  tollBrand
-} from "./chunk-QEUDZH7J.js";
-import {
-  tick
-} from "./chunk-UDE42EDS.js";
-import {
-  compactNav,
-  footer,
-  respond,
-  rule,
-  typeScale
-} from "./chunk-DAF5SK5X.js";
-import {
-  buttons,
-  nav,
-  page
-} from "./chunk-TF2MO3UA.js";
-import {
-  defineTemplate
-} from "./chunk-HLBQLOTA.js";
-import {
-  Kit,
-  preset
-} from "./chunk-PVWIQ6SQ.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-5ZXGYEXW.js

@@ -1,244 +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 {
-  DEAL,
-  MARQUEE,
-  lettering,
-  marquee,
-  neonBrand,
-  neonWord,
-  puddle,
-  sheen,
-  shutterBox,
-  spark,
-  tubeRule,
-  two,
-  wallPaths
-} from "./chunk-6W5XSVSX.js";
-import {
-  MONO
-} from "./chunk-PFCHOCEN.js";
-import {
-  buttons,
-  nav,
-  page,
-  webResponsive
-} from "./chunk-TF2MO3UA.js";
-import {
-  board,
-  patchAll,
-  put,
-  reboard
-} from "./chunk-YHBAWSDX.js";
-import {
-  pill
-} from "./chunk-LEKU2ZW3.js";
-import {
-  line
-} from "./chunk-6RCDZU4R.js";
-import {
-  defineTemplate
-} from "./chunk-HLBQLOTA.js";
-import {
-  Kit,
-  preset
-} from "./chunk-PVWIQ6SQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/web/black-friday-neon-landing.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var PLANS = [
-  { id: "Solo", tag: `SOLO \xB7 ${DEAL.off}% OFF`, gas: "amber", name: "Solo, a year", pitch: "One inbox, one person, and replies drafted while you sleep.", wasLabel: "Was, for 12 months", was: DEAL.soloWas, now: DEAL.soloNow, includes: ["1 inbox, 1 seat", "Overnight auto-replies", "Email and live chat"], cta: `Take Solo for $${DEAL.soloNow}` },
-  { id: "Team", tag: `TEAM \xB7 ${DEAL.off}% OFF`, gas: "red", name: "Team, a year", pitch: "Five seats, shared inboxes and a rota for the night shift.", wasLabel: "Was, for 12 months", was: DEAL.teamWas, now: DEAL.teamNow, includes: ["5 seats, 5 inboxes", "Night-shift rota", "Slack and WhatsApp"], cta: `Take Team for $${DEAL.teamNow}` },
-  { id: "Life", tag: "LIFETIME \xB7 PAY ONCE", gas: "ice", name: "Solo, for life", pitch: "One payment. Solo for as long as {{brand.name}} is open.", wasLabel: "Five years at list", was: DEAL.soloWas * 5, now: DEAL.lifetime, includes: ["Every update", "No renewal, ever"], cta: `Take a seat for $${DEAL.lifetime}` }
-];
-var FAQ = [
-  ["Do I need the code?", `Yes. Type ${DEAL.code} at checkout on any annual plan. It works until Monday 30 November, 23:59 Pacific, once per account.`, "red"],
-  ["What happens at renewal?", "Year two renews at the list price. We email you 30 days before, and cancelling takes two clicks.", "amber"],
-  ["Is lifetime really lifetime?", `One payment, Solo for as long as {{brand.name}} runs, every update included. ${DEAL.seats} seats are in the window and there is no second batch.`, "ice"]
-];
-var TICKS = 8;
-var DURATION = 1e4;
-var SIGN = 0.72;
-var cues = [
-  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
-  { layer: "Eyebrow", preset: "rise-in", at: 100 },
-  { layer: "Headline", preset: "rise-in", at: 200, params: { duration: 700 } },
-  { layer: "Lead", preset: "rise-in", at: 350 },
-  { layer: "Clock", preset: "rise-in", at: 500 },
-  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 650, stagger: { delay: 100 } },
-  { layer: "Deadline", preset: "fade-in", at: 900, params: { duration: 500 } },
-  { layer: "Team figure", preset: "pulse", at: 3600, params: { duration: 600, amount: 0.05 } }
-];
-var counts = [
-  // The clock: the seconds tick down once a second for as long as the hero plays.
-  { layer: "Seconds figure", at: 1e3, duration: TICKS * 1e3, tick: 1e3, counter: { from: DEAL.seconds, to: DEAL.seconds - TICKS } },
-  ...PLANS.map((p, i) => ({ layer: `${p.id} figure`, at: 1700 + i * 200, duration: 1400, counter: { from: p.was, to: p.now, prefix: "$", separator: "" } })),
-  { layer: "Seats figure", at: 2e3, duration: 2400, counter: { from: DEAL.seats, to: DEAL.seatsLeft } }
-];
-var NAME = "Black Friday neon sale landing page";
-var WALL = 7200;
-var black_friday_neon_landing_default = defineTemplate({
-  id: "web-black-friday-neon-landing",
-  meta: {
-    name: NAME,
-    description: "A Black Friday landing page for a SaaS product, drawn as a shopfront at night: a neon SALE sign that flickers on letter by letter on a brick wall with an arrow of chasing bulbs, a clock to the shutter coming down that ticks each second, three plans in the shop window (two annual plans at half price and a lifetime deal with its seats counting down), questions under lit tubes and the sign lying in the wet street. FAQ included. Desktop to phone",
-    category: "web",
-    tags: ["black friday", "cyber monday", "sale", "landing page", "pricing", "plans", "lifetime deal", "countdown", "neon", "neon sign", "shopfront", "night", "faq", "saas", "animation", "website", "responsive", "discount code"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["sale", "pricing", "countdown"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  breakpoints: true,
-  motion: { cues, counts },
-  build() {
-    const k = new Kit(NAME, preset("web-desktop"));
-    k.quantizeGeometry = true;
-    neonBrand(k, { name: DEAL.product, site: DEAL.site });
-    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
-    k.textStyle("Brand 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
-    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
-    k.textStyle("Eyebrow 14", { ...MONO, size: 14, fontWeight: 800, letterSpacing: 1, lineHeight: 20 });
-    k.textStyle("Display 88", { size: 88, fontWeight: 900, letterSpacing: -3.4, lineHeight: 88 });
-    k.textStyle("Display 68", { size: 68, fontWeight: 900, letterSpacing: -2.4, lineHeight: 70 });
-    k.textStyle("Display 60", { size: 60, fontWeight: 900, letterSpacing: -2, lineHeight: 62 });
-    k.textStyle("Display 42", { size: 42, fontWeight: 900, letterSpacing: -1.4, lineHeight: 44 });
-    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 30 });
-    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 26 });
-    k.textStyle("Clock 48", { ...MONO, size: 48, fontWeight: 800, letterSpacing: -1, lineHeight: 54, textAlign: "CENTER", fontFeatures: { tnum: 1 } });
-    k.textStyle("Clock 32", { ...MONO, size: 32, fontWeight: 800, lineHeight: 38, textAlign: "CENTER", fontFeatures: { tnum: 1 } });
-    k.textStyle("Unit 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.4, lineHeight: 16, textAlign: "CENTER" });
-    k.textStyle("Note 15", { size: 15, fontWeight: 400, lineHeight: 22 });
-    k.textStyle("Label 13", { ...MONO, size: 13, fontWeight: 700, letterSpacing: 1.4, lineHeight: 18 });
-    k.textStyle("Figure 68", { ...MONO, size: 68, fontWeight: 800, letterSpacing: -2.4, lineHeight: 72, fontFeatures: { tnum: 1 } });
-    k.textStyle("Was 22", { ...MONO, size: 22, fontWeight: 600, lineHeight: 28, fontFeatures: { tnum: 1 } });
-    k.textStyle("Row 15", { size: 15, fontWeight: 500, lineHeight: 22 });
-    k.textStyle("Plan 24", { size: 24, fontWeight: 800, letterSpacing: -0.4, lineHeight: 30 });
-    k.textStyle("Section 44", { size: 44, fontWeight: 900, letterSpacing: -1.6, lineHeight: 48 });
-    k.textStyle("Section 32", { size: 32, fontWeight: 900, letterSpacing: -1, lineHeight: 36 });
-    k.textStyle("Section lead 17", { size: 17, fontWeight: 400, lineHeight: 26 });
-    k.textStyle("Question 20", { size: 20, fontWeight: 800, letterSpacing: -0.2, lineHeight: 26 });
-    k.textStyle("Body 15", { size: 15, fontWeight: 400, lineHeight: 23 });
-    k.textStyle("Footer 14", { size: 14, fontWeight: 400, lineHeight: 20 });
-    k.textStyle("Take 16", { size: 16, fontWeight: 800, lineHeight: 22 });
-    buttons(k, { style: "Button 16", pad: [14, 24], radius: 8 });
-    pill(k, "Marker", { fill: "accent", ink: "onAccent", style: "Eyebrow 14", label: "BLACK FRIDAY \xB7 27\u201330 NOV", pad: [6, 12], radius: 4 });
-    pill(k, "Take", { fill: "accent", ink: "onAccent", style: "Take 16", label: "Take Team for $294", pad: [12, 18], radius: 6 });
-    const sheet = k.sheet;
-    page(k, sheet, { gap: 56, top: 28 });
-    k.timeline(sheet, { duration: DURATION, fps: 30 });
-    k.vector(sheet, 1440, WALL, wallPaths(1440, WALL), [], { name: "Mortar", absolute: { x: 0, y: 0 }, stroke: { color: "mortar", width: 3, cap: "NONE" }, opacity: 0.7 });
-    nav(k, sheet, { links: ["The sign", "The window", "Questions", "Sign in"], cta: `Use ${DEAL.code}`, style: "Nav 16", brandStyle: "Brand 20" });
-    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", padding: { top: 24, right: 0, bottom: 32, left: 0 }, name: "Hero" });
-    const copy = k.stack(hero, { gap: 22, name: "Copy" });
-    k.instance(copy, "Marker", { Label: "BLACK FRIDAY \xB7 27\u201330 NOV" }, { name: "Eyebrow" });
-    k.text(copy, "Lights on.\nPrices down.", { style: "Display 88", color: "text", name: "Headline" });
-    k.text(copy, `{{brand.name}} is the shared inbox that answers your customers overnight. Until the shutter comes down on Monday, every annual plan is ${DEAL.off}% off with code ${DEAL.code}, and ${DEAL.seats} lifetime seats are in the window.`, { style: "Lead 20", color: "onPaper", name: "Lead" });
-    const clock = k.stack(copy, { width: 480, fill: "card", radius: 12, padding: 14, gap: 10, stroke: { color: "steelEdge", width: 2, align: "INSIDE" }, name: "Clock" });
-    k.text(clock, "THE SHUTTER COMES DOWN IN", { style: "Label 13", color: "amber", name: "Clock label" });
-    const tiles = k.stack(clock, { direction: "HORIZONTAL", gap: 8, name: "Tiles" });
-    for (const [name, value] of [["Days", DEAL.days], ["Hours", DEAL.hours], ["Minutes", DEAL.minutes], ["Seconds", DEAL.seconds - TICKS]]) {
-      const tile = k.stack(tiles, { gap: 4, align: "CENTER", fill: "paper", radius: 8, padding: { top: 8, right: 0, bottom: 8, left: 0 }, name: "Tile" });
-      k.text(tile, two(value), { style: "Clock 48", color: "text", name: `${name} figure` });
-      k.text(tile, name.toUpperCase(), { style: "Unit 12", color: "onPaper", name: `${name} unit` });
-    }
-    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
-    k.instance(cta, "Button", { Label: `Get ${DEAL.off}% off with ${DEAL.code}` }, { name: "CTA primary" });
-    k.instance(cta, "Button quiet", { Label: "See the window" }, { name: "CTA quiet" });
-    k.text(copy, `Ends ${DEAL.ends}. One code, every annual plan, once per account.`, { style: "Note 15", color: "onPaper", name: "Deadline" });
-    const sign = marquee(k, board(k, hero, MARQUEE.w, MARQUEE.h, SIGN, "Sign board"), { loopMs: DURATION, laps: 10, cable: 70 });
-    const shop = k.stack(sheet, { gap: 28, name: "Shop" });
-    shutterBox(k, shop);
-    const shopHead = k.stack(shop, { direction: "HORIZONTAL", gap: 32, align: "CENTER", name: "Shop head" });
-    const title = k.stack(shopHead, { gap: 8, name: "Plans head" });
-    const open = neonWord(k, shopHead, "OPEN", "ice", { cap: 54, t: 6, name: "Open", flow: true, strength: 0.8 });
-    k.text(title, "In the window tonight", { style: "Section 44", color: "text", name: "Plans title" });
-    k.text(title, `Three things, all marked down. The price on the glass is the price at checkout with ${DEAL.code}; list comes back when the shutter does.`, { style: "Section lead 17", color: "onPaper", name: "Plans lead" });
-    const plans = k.stack(shop, { direction: "HORIZONTAL", gap: 20, name: "Plans" });
-    for (const p of PLANS) {
-      const pane = k.stack(plans, { fill: "card", radius: 14, padding: 26, gap: 12, clip: true, stroke: { color: "steelEdge", width: 3, align: "INSIDE" }, name: "Plan" });
-      k.text(pane, p.tag, { style: "Label 13", color: p.gas, name: "Plan tag" });
-      k.text(pane, p.name, { style: "Plan 24", color: "onCard", name: "Plan name" });
-      k.text(pane, p.pitch, { style: "Note 15", color: "cardMuted", name: "Pitch" });
-      k.text(pane, `$${p.now}`, { style: "Figure 68", color: p.gas === "ice" ? "ice" : "amber", name: `${p.id} figure` });
-      const was = k.stack(pane, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Was row" });
-      const struck = k.stack(was, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", name: "Was" });
-      k.text(struck, `$${p.was}`, { style: "Was 22", color: "cardMuted", autoWidth: true, name: "List price" });
-      k.rect(struck, p.was > 999 ? 76 : 62, 2, "red", { name: "Strike", absolute: { x: -4, y: 14 } });
-      k.text(was, p.wasLabel, { style: "Row 15", color: "cardMuted", autoWidth: true, name: "Was label" });
-      tubeRule(k, pane, p.gas, { t: 3 });
-      for (const inc of p.includes) k.text(pane, inc, { style: "Row 15", color: "onCard", name: "Included" });
-      if (p.id === "Life") {
-        const seats = k.stack(pane, { direction: "HORIZONTAL", gap: 8, align: "CENTER", name: "Seats row" });
-        k.text(seats, String(DEAL.seatsLeft), { style: "Row 15", color: "amber", width: 30, name: "Seats figure" });
-        k.text(seats, `of ${DEAL.seats} seats left`, { style: "Row 15", color: "onCard", autoWidth: true, name: "Seats label" });
-      }
-      k.instance(pane, "Take", { Label: p.cta }, { name: "Plan take" });
-      sheen(k, pane, 700, 620);
-    }
-    const faq = k.stack(sheet, { gap: 24, name: "FAQ" });
-    k.text(faq, "Asked at the door", { style: "Section 44", color: "text", name: "FAQ title" });
-    const qs = k.stack(faq, { direction: "HORIZONTAL", gap: 32, name: "FAQ list" });
-    for (const [q, a, gas] of FAQ) {
-      const item = k.stack(qs, { gap: 12, name: "Question" });
-      tubeRule(k, item, gas, { t: 4 });
-      k.text(item, q, { style: "Question 20", color: "text", name: "Q" });
-      k.text(item, a, { style: "Body 15", color: "onPaper", name: "A" });
-    }
-    const cap = 150, t = 14;
-    const word = lettering("SALE", cap, { pad: t, stretch: 1.14 });
-    const street = k.stack(sheet, { height: 170, fill: k.tint("shade", 0.6), radius: 10, clip: true, name: "Street" });
-    k.rect(street, 1500, 6, k.tint("steelEdge", 0.9), { name: "Kerb", absolute: { x: 0, y: 0 } });
-    k.vector(street, 1500, 170, [20, 44, 61, 83, 104, 122, 139, 158].flatMap((y, i) => [line(i * 397 % 1100, y, i * 397 % 1100 + 120 + i * 53 % 90, y), line((i * 613 + 500) % 1300, y, (i * 613 + 500) % 1300 + 70 + i * 31 % 80, y)]), [], { name: "Ripples", absolute: { x: 0, y: 0 }, stroke: { color: "ice", width: 2 }, opacity: 0.16 });
-    puddle(k, street, word.w, word.h, word.glyphs.flat(), "red", { t, name: "Sale puddle", absolute: { x: Math.round((1200 - word.w) / 2), y: 26 }, squash: 0.62, opacity: 0.5, blur: 7 });
-    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 16, name: "Footer" });
-    k.text(foot, "Prices in US dollars, before sales tax. Annual plans renew at the list price unless you cancel; lifetime seats never renew.", { style: "Footer 14", color: "onPaper", name: "Legal" });
-    k.text(foot, "hello@{{brand.site}}", { style: "Footer 14", color: "onPaper", autoWidth: true, name: "Email" });
-    k.counts(sheet, counts);
-    k.cues(sheet, cues);
-    spark(k, [k.named(sign.border, "Border tube")[0]], [{ on: 200 }]);
-    sign.sale.tubes.forEach((id, i) => spark(k, [id], i === 1 ? [{ on: 420 + i * 170 }, { buzz: 6400 }] : [{ on: 420 + i * 170 }]));
-    sign.off.tubes.forEach((id, i) => spark(k, [id], [{ on: 1300 + i * 200 }]));
-    open.tubes.forEach((id, i) => spark(k, [id], i === 2 ? [{ on: 2600 }, { buzz: 4200 }] : [{ on: 2600 }]));
-    webResponsive(k, sheet, {
-      stack: ["Hero", "Plans", "FAQ list", "Footer"],
-      restyle: { "Display 88": { laptop: "Display 68", tablet: "Display 60", mobile: "Display 42" }, "Lead 20": { mobile: "Lead 17" }, "Clock 48": { mobile: "Clock 32" }, "Section 44": { mobile: "Section 32" } },
-      hide: { tablet: ["Nav links"], mobile: ["Nav links", "Open"] },
-      gap: { mobile: 40 },
-      tweak: (kit, id, size) => {
-        const w = kit.node(id).width;
-        patchAll(kit, id, "Mortar", { x: 0, y: 0, width: w, height: WALL, paths: wallPaths(w, WALL, size === "mobile" ? 34 : 46, size === "mobile" ? 98 : 132) });
-        const inner = w - 2 * (size === "laptop" ? 80 : size === "tablet" ? 48 : 20);
-        put(kit, id, "Sale puddle", Math.round((inner - word.w * (size === "mobile" ? 0.5 : 1)) / 2), 26, size === "mobile" ? { scaleX: 0.5, scaleY: 0.5, anchorX: 0, anchorY: 0 } : {});
-        if (size === "laptop") {
-          patchAll(kit, id, "Hero", { itemSpacing: 40 });
-          reboard(kit, id, "Sign board", 0.62);
-        }
-        if (size === "tablet" || size === "mobile") {
-          patchAll(kit, id, "Hero", { itemSpacing: 40, counterAxisAlignItems: "CENTER" });
-          patchAll(kit, id, "Clock", { layoutSizingHorizontal: "FILL" });
-        }
-        if (size === "tablet") reboard(kit, id, "Sign board", 0.84);
-        if (size === "mobile") {
-          reboard(kit, id, "Sign board", 0.418);
-          patchAll(kit, id, "Street", { height: 110 });
-          patchAll(kit, id, "Plan", { padding: { top: 20, right: 18, bottom: 20, left: 18 } });
-        }
-      }
-    });
-    return k.finish();
-  }
-});
-
-export {
-  black_friday_neon_landing_default
-};