@popcraft/kit 0.53.7 → 0.53.8

package/dist/chunks/chunk-W2X2YUXY.js

@@ -0,0 +1,366 @@
+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 {
+  SALES,
+  body,
+  drop,
+  edge,
+  figure,
+  fitGate,
+  gate,
+  hazard,
+  hazardPaths,
+  label,
+  liftGate,
+  shout,
+  shove,
+  slab,
+  slam,
+  spinSticker,
+  stamp,
+  sticker,
+  tag,
+  thump,
+  titleBar,
+  tollBrand
+} from "./chunk-OZXTZXRU.js";
+import {
+  faceSlot,
+  tick
+} from "./chunk-2VFVKPUT.js";
+import {
+  CONTENT,
+  compactNav,
+  footer,
+  respond,
+  rule,
+  typeScale
+} from "./chunk-B2FOG4LJ.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-ZMD3C2YJ.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  ease
+} from "./chunk-ZGIMZ6SP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/web/style-brutalist-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var LOOP = 6e3;
+var STAGE_W = 696;
+var SOLD = [1500, 2400, 3300];
+var SELLS = "PRESETS  /  FONTS  /  NOTION KITS  /  ZINES  /  SAMPLE PACKS  /  ICON SETS  /  LUTS  /  ";
+var MARQUEE = { item: 1560, height: 84 };
+var FEES = [
+  ["TOLLBOOTH", "$50. 5% a sale, nothing else.", 50 / 300, "paper"],
+  ["A STORE APP", "$69. $39 a month, then 3%.", 69 / 300, "card"],
+  ["A MARKETPLACE", "$300. 30% a sale, and their logo.", 1, "accent"]
+];
+var LANE = { desktop: 608, laptop: 544, tablet: 600, mobile: 295 };
+var VOICES = [
+  { quote: "I put my Lightroom presets behind a link on a Friday night. By Monday it had paid my rent, and I never opened a dashboard.", name: "Ana Reyes", what: "Sells Field Notes presets", made: "$4,180 in 30 days", fill: "card", ink: "onCard", mute: "cardMuted", ground: "accent" },
+  { quote: "Pay-what-you-want with a $9 floor. The average is $14. I did nothing.", name: "Jonas Weber", what: "Sells an invoice kit for Notion", made: "612 sales", fill: "primary", ink: "onPrimary", mute: "onPrimary", ground: "paper" }
+];
+var FAQ = [
+  ["What can I sell?", "Any file you made: presets, fonts, templates, zines, sample packs, PDFs, code. Up to 5 GB each. If you can zip it, you can put a toll on it."],
+  ["What does it cost?", "Nothing a month to start. Tollbooth keeps 5% of each sale, and the card processor takes its usual cut. Booth and Plaza trade the toll for a flat fee."],
+  ["Who handles the tax?", "We do. Tollbooth is the merchant of record, so VAT and sales tax are collected and filed for you in every country it sells to."],
+  ["When do I get paid?", 'Every Friday, to your bank, for everything sold up to Thursday. No minimum, no "payout threshold".']
+];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 200 } },
+  { layer: "Headline", preset: "words-in", at: 100, params: { duration: 380, amount: 70 } },
+  shove("Lead", 500, "left", { distance: 120 }),
+  ...stamp("CTA", 700),
+  { layer: "Terms", preset: "fade-in", at: 1e3, params: { duration: 250 } },
+  ...slam("App", 300, { distance: 320, shake: 12 }),
+  shove("Gate", 900, "right", { distance: 200 }),
+  ...stamp("Sale", SOLD[0], { gap: SOLD[1] - SOLD[0], from: 1.5, rock: 3 }),
+  thump("Total", 4200, 0.08),
+  ...stamp("Hero sticker", 4400, { from: 1.9, rock: 9 }),
+  { layer: "Link text", preset: "typewriter", at: 1200, params: { duration: 1500 } },
+  { layer: "Fee bar", preset: "wipe-in", at: 800, params: { duration: 700, direction: "right", ease: ease.out("expo") }, stagger: { delay: 350, order: "selection" } },
+  thump("CTA", 5200, 0.06)
+];
+var counts = [
+  { layer: "Total", at: SOLD[0], duration: 2700, counter: { from: 1159, to: 1216, prefix: "$", separator: "," }, ease: ease.inOut("cubic") },
+  { layer: "Keep figure", at: 800, duration: 1800, counter: { from: 70, to: 95, suffix: "%" } }
+];
+var style_brutalist_landing_default = defineTemplate({
+  id: "web-saas-style-brutalist-landing",
+  meta: {
+    name: "Brutalist SaaS landing page",
+    description: "A neo-brutalist landing page for a creator tool: a headline the whole width of the page, a hero where the product works in its window (sales stamped on one after another, a toll barrier lifting for each, the total counting up), a scrolling marquee, four blocks of different sizes with a link that types itself and a switch that flips, fee bars that draw beside a counting figure, two sellers\u2019 quotes, an FAQ and a last shout. Acid lime, black rules and hard shadows, desktop to phone",
+    category: "web",
+    tags: ["saas", "landing page", "hero", "neo-brutalist", "brutalism", "bold", "creator tool", "indie", "marquee", "counter", "chart", "faq", "testimonial", "website", "animation", "responsive"],
+    platforms: ["web", "product-hunt"],
+    formats: ["page", "demo"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("Brutalist SaaS landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    tollBrand(k, ["paper", "text", "onText", "onPaper", "primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
+    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),
+      "Shout 128": shout(128),
+      "Shout 118": shout(118),
+      "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 }),
+      "Block 36": shout(36, { leading: 1 }),
+      "Block 28": shout(28, { leading: 1.04 }),
+      "Lead 22": body(22, 500),
+      "Lead 18": body(18, 500),
+      "Body 17": body(17, 500),
+      "Small 14": body(14, 600),
+      "Foot head 14": body(14, 900),
+      "Total 60": figure(60),
+      "Total 44": figure(44),
+      "Buyer 18": body(18, 800),
+      "Bought 14": body(14, 600),
+      "Toll 22": figure(22),
+      "Price 96": figure(96),
+      "Link 18": figure(18),
+      "Link 14": figure(14),
+      "Keep 200": figure(200),
+      "Keep 120": figure(120),
+      "Marquee 44": shout(44, { leading: 1.2 }),
+      "Quote 30": body(30, 700),
+      "Quote 22": body(22, 700),
+      "Name 18": body(18, 800),
+      "Question 28": shout(28, { leading: 1.05 }),
+      "Sticker 46": shout(46, { center: true }),
+      "Sticker 14": label(14, { center: true })
+    });
+    buttons(k, { style: s("Button 16"), pad: [12, 20], radius: 0 });
+    k.component("Slab", { direction: "HORIZONTAL", width: "HUG", align: "CENTER", fill: "primary", stroke: edge(4), effects: drop(k, 7), padding: { top: 18, right: 28, bottom: 18, left: 28 }, props: { Label: "OPEN YOUR BOOTH" } }, (id) => {
+      k.propText(id, "Label", { style: s("Slab 20"), color: "onPrimary", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 96, top: 28 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    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 hero = k.stack(sheet, { gap: 40, name: "Hero" });
+    k.text(hero, "PUT A PRICE ON YOUR FILES.", { style: s("Shout 128"), color: "text", name: "Headline" });
+    const under = k.stack(hero, { direction: "HORIZONTAL", gap: 64, name: "Hero row" });
+    const copy = k.stack(under, { width: 440, gap: 26, name: "Copy" });
+    k.text(copy, "Drop in a preset pack, a font, a template or a zine. Name a price. Tollbooth hands you one link that takes the payment, sends the file and files the tax.", { style: s("Lead 22"), color: "onPaper", name: "Lead" });
+    k.instance(copy, "Slab", { Label: "OPEN YOUR BOOTH, FREE" }, { name: "CTA" });
+    const terms = k.stack(copy, { gap: 10, name: "Terms" });
+    for (const t of ["$0 a month. A 5% toll when you sell.", "Paid out every Friday. Tax handled."]) {
+      const row = k.stack(terms, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Term" });
+      tick(k, row, 22, "text", { weight: 4 });
+      k.text(row, t, { style: s("Body 17"), color: "text", name: "Term words" });
+    }
+    const stage = k.stack(under, { gap: 18, name: "Stage" });
+    const app = slab(k, stage, { fill: "card", shadow: 12, name: "App" });
+    titleBar(k, app, { title: "{{brand.site}}/sales", style: s("Tag 13"), height: 44 });
+    const appBody = k.stack(app, { direction: "HORIZONTAL", gap: 20, padding: { top: 20, right: 26, bottom: 26, left: 20 }, name: "App body" });
+    const tally = slab(k, appBody, { width: 250, height: "FILL", fill: "primary", rule: 4, shadow: 6, gap: 6, padding: { top: 18, right: 16, bottom: 18, left: 18 }, name: "Tally" });
+    k.text(tally, "TOLLS COLLECTED", { style: s("Tag 13"), color: "onPrimary", name: "Tally label" });
+    k.text(tally, "$1,216", { style: s("Total 60"), color: "onPrimary", name: "Total" });
+    k.text(tally, "64 SALES SINCE FRIDAY", { style: s("Tag 13"), color: "onPrimary", name: "Tally note" });
+    const list = k.stack(appBody, { gap: 10, name: "Sales" });
+    SALES.slice(0, 3).forEach(([who, what, toll], i) => {
+      const row = slab(k, list, { direction: "HORIZONTAL", fill: "card", rule: 3, shadow: 5, gap: 12, align: "CENTER", padding: { top: 13, right: 16, bottom: 13, left: 14 }, name: "Sale" });
+      const face = k.stack(row, { width: 40, height: 40, fill: ["accent", "paper", "primary"][i], stroke: edge(3), align: "CENTER", justify: "CENTER", name: "Buyer mark" });
+      k.text(face, who[0], { style: s("Buyer 18"), color: ["onAccent", "text", "onPrimary"][i], autoWidth: true, name: "Buyer initial" });
+      const words = k.stack(row, { gap: 0, name: "Sale words" });
+      k.text(words, who, { style: s("Buyer 18"), color: "onCard", name: "Buyer" });
+      k.text(words, what, { style: s("Bought 14"), color: "cardMuted", name: "Bought" });
+      k.text(row, `+$${toll}`, { style: s("Toll 22"), color: "onCard", autoWidth: true, name: "Toll" });
+    });
+    const barrier = gate(k, stage, { width: STAGE_W, height: 56 });
+    liftGate(k, barrier.arm, SOLD, 260);
+    const heroSticker = sticker(k, stage, { size: 148, teeth: 16, fill: "accent", ink: "onAccent", big: "$0", small: "A MONTH", bigStyle: s("Sticker 46"), smallStyle: s("Sticker 14"), name: "Hero sticker", tilt: 10, shadow: 7, absolute: { x: 566, y: -104 } });
+    spinSticker(k, heroSticker, 360 / 16 * 1e3 / LOOP);
+    const band = k.stack(sheet, { gap: 0, name: "Marquee block" });
+    hazard(k, band, { width: CONTENT.desktop, height: 30, stripe: 22, fill: "card", ink: "text", rule: 4, name: "Marquee stripes" });
+    const strip = k.stack(band, { height: MARQUEE.height, fill: "text", clip: true, name: "Marquee" });
+    const run = k.stack(strip, { direction: "HORIZONTAL", width: MARQUEE.item * 2, height: MARQUEE.height, name: "Marquee row", absolute: { x: 0, y: 0 } });
+    for (let i = 0; i < 2; i++) {
+      const cell = k.stack(run, { width: MARQUEE.item, height: MARQUEE.height, fill: "text", justify: "CENTER", name: "Marquee item" });
+      k.text(cell, SELLS, { style: s("Marquee 44"), color: "onText", autoWidth: true, name: "Marquee words" });
+    }
+    k.behave(run, "translateX", [{ kind: "spin", rate: -MARQUEE.item * 1e3 / (LOOP * 4) }, { kind: "mod", period: MARQUEE.item, offset: -MARQUEE.item }]);
+    const moves = k.stack(sheet, { gap: 28, name: "Moves" });
+    k.text(moves, "THREE MOVES. NO STOREFRONT.", { style: s("Shout 72"), color: "text", name: "Moves title" });
+    const rowA = k.stack(moves, { direction: "HORIZONTAL", gap: 28, name: "Move row" });
+    const dropBlock = slab(k, rowA, { direction: "HORIZONTAL", height: "FILL", gap: 28, align: "CENTER", fill: "primary", padding: 32, name: "Drop block" });
+    const zone = k.stack(dropBlock, { width: 190, height: 170, fill: "card", stroke: { color: "text", width: 4, align: "INSIDE", join: "MITER", cap: "NONE", dash: [14, 10] }, align: "CENTER", justify: "CENTER", name: "Dropzone" });
+    const tile = slab(k, zone, { width: 110, height: 96, fill: "accent", rule: 4, shadow: 6, align: "CENTER", justify: "CENTER", name: "File tile" });
+    k.text(tile, ".ZIP", { style: s("Block 28"), color: "onAccent", autoWidth: true, name: "File kind" });
+    const dropCopy = k.stack(dropBlock, { gap: 10, name: "Move copy" });
+    k.text(dropCopy, "DROP", { style: s("Tag 15"), color: "onPrimary", name: "Move verb" });
+    k.text(dropCopy, "DROP IN ANYTHING YOU MADE.", { style: s("Block 36"), color: "onPrimary", name: "Move title" });
+    k.text(dropCopy, "Up to 5 GB a file. We scan it, store it and stamp each download with the buyer\u2019s email.", { style: s("Body 17"), color: "onPrimary", name: "Move text" });
+    const priceBlock = slab(k, rowA, { width: 400, gap: 10, fill: "card", padding: 32, name: "Price block" });
+    k.text(priceBlock, "PRICE", { style: s("Tag 15"), color: "cardMuted", name: "Move verb" });
+    k.text(priceBlock, "$19", { style: s("Price 96"), color: "onCard", name: "Price figure" });
+    const sw = k.stack(priceBlock, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Switch row" });
+    const track = k.stack(sw, { width: 76, height: 40, fill: "primary", stroke: edge(4), name: "Switch track" });
+    const knob = k.rect(track, 28, 28, "text", { name: "Knob", absolute: { x: 42, y: 6 } });
+    k.animate(knob, "translateX", [{ t: 0, v: -36, ease: ease.hold }, { t: 2600, v: -36, ease: ease.back(2.6) }, { t: 2800, v: 0 }]);
+    k.text(sw, "PAY WHAT YOU WANT", { style: s("Tag 15"), color: "onCard", name: "Switch label" });
+    k.text(priceBlock, "Fixed, or a floor that buyers can beat.", { style: s("Body 17"), color: "cardMuted", name: "Move text" });
+    const rowB = k.stack(moves, { direction: "HORIZONTAL", gap: 28, name: "Move row" });
+    const paid = slab(k, rowB, { width: 400, height: "FILL", gap: 10, fill: "accent", padding: 32, name: "Paid block" });
+    k.text(paid, "GET PAID", { style: s("Tag 15"), color: "onAccent", name: "Move verb" });
+    k.text(paid, "FRIDAY IS PAYDAY.", { style: s("Block 36"), color: "onAccent", name: "Move title" });
+    k.text(paid, "Everything sold by Thursday is in your bank on Friday. No threshold to reach.", { style: s("Body 17"), color: "onAccent", name: "Move text" });
+    const share = slab(k, rowB, { gap: 14, fill: "text", padding: 32, name: "Share block" });
+    k.text(share, "SHARE", { style: s("Tag 15"), color: "onText", name: "Move verb" });
+    k.text(share, "ONE LINK. PUT IT ANYWHERE.", { style: s("Block 36"), color: "onText", name: "Move title" });
+    const field = k.stack(share, { direction: "HORIZONTAL", fill: "card", stroke: edge(4, "primary"), align: "CENTER", justify: "SPACE_BETWEEN", gap: 12, padding: { top: 10, right: 10, bottom: 10, left: 16 }, name: "Link field" });
+    k.text(field, "{{brand.site}}/fieldnotes", { style: s("Link 18"), color: "onCard", name: "Link text" });
+    tag(k, field, "COPY", { style: s("Tag 15"), fill: "primary", ink: "onPrimary", pad: [8, 14], name: "Copy link" });
+    k.text(share, "A bio, a video description, a newsletter, a QR code on a zine. The checkout opens on top of wherever they are.", { style: s("Body 17"), color: "onText", name: "Move text" });
+    const keep = slab(k, sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", fill: "text", shadow: 0, padding: 48, name: "Keep" });
+    const kept = k.stack(keep, { width: 440, gap: 4, name: "Keep side" });
+    k.text(kept, "WHAT YOU KEEP", { style: s("Tag 15"), color: "onText", name: "Keep label" });
+    k.text(kept, "95%", { style: s("Keep 200"), color: "onText", name: "Keep figure" });
+    k.text(kept, "OF EVERY SALE, FROM THE FIRST ONE.", { style: s("Block 28"), color: "onText", name: "Keep words" });
+    const fees = k.stack(keep, { gap: 22, name: "Fees" });
+    k.text(fees, "WHAT SELLING $1,000 OF FILES IN A MONTH COSTS YOU", { style: s("Tag 15"), color: "onText", name: "Fees label" });
+    for (const [who, what, share$, fill] of FEES) {
+      const fee = k.stack(fees, { gap: 8, name: "Fee" });
+      const head = k.stack(fee, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 12, name: "Fee head" });
+      k.text(head, who, { style: s("Block 28"), color: "onText", autoWidth: true, name: "Fee who" });
+      k.text(head, what, { style: s("Body 17"), color: "onText", align: "RIGHT", name: "Fee what" });
+      const lane = k.stack(fee, { height: 34, fill: "text", stroke: edge(3, "card"), name: "Fee lane" });
+      k.rect(lane, Math.round(LANE.desktop * share$), 34, fill, { name: "Fee bar" });
+    }
+    const voices = k.stack(sheet, { direction: "HORIZONTAL", gap: 28, align: "MIN", name: "Voices" });
+    VOICES.forEach((v, i) => {
+      const card = slab(k, voices, { ...i === 1 ? { width: 440 } : {}, gap: 22, fill: v.fill, padding: 36, name: "Voice" });
+      k.text(card, `\u201C${v.quote}\u201D`, { style: s(i === 0 ? "Quote 30" : "Quote 22"), color: v.ink, name: "Quote" });
+      const who = k.stack(card, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Seller" });
+      const frame = k.stack(who, { width: 64, height: 64, stroke: edge(4), name: "Face frame" });
+      faceSlot(k, k.photo(frame, 64, 64, { ground: v.ground, name: "Face" }), 64, 64, "text");
+      const words = k.stack(who, { gap: 0, name: "Seller words" });
+      k.text(words, v.name, { style: s("Name 18"), color: v.ink, name: "Seller name" });
+      k.text(words, v.what, { style: s("Small 14"), color: v.mute, name: "Seller what" });
+      tag(k, card, v.made.toUpperCase(), { style: s("Tag 15"), fill: i === 0 ? "paper" : "card", ink: i === 0 ? "text" : "onCard", name: "Made" });
+    });
+    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, { gap: 24, fill: "primary", shadow: 14, padding: 56, name: "Last" });
+    k.text(last, "YOUR FILES ARE WORTH MONEY. OPEN THE BOOTH.", { style: s("Shout 72"), color: "onPrimary", name: "Last words" });
+    const lastRow = k.stack(last, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Last row" });
+    const go = slab(k, lastRow, { direction: "HORIZONTAL", width: "HUG", fill: "text", rule: 4, shadow: 0, padding: { top: 18, right: 28, bottom: 18, left: 28 }, name: "Last button" });
+    k.text(go, "OPEN YOUR BOOTH, FREE", { style: s("Slab 20"), color: "onText", autoWidth: true, name: "Last button words" });
+    k.text(lastRow, "Two minutes. No card. Your first link before the kettle boils.", { style: s("Body 17"), color: "onPrimary", name: "Last note" });
+    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: "\xA9 2026 Tollbooth B.V. Merchant of record in 46 countries. No cookie banner, because no tracking cookies.",
+      brandStyle: s("Brand 22"),
+      headStyle: s("Foot head 14"),
+      linkStyle: s("Small 14"),
+      ruleColor: "text"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    respond(k, sheet, s, {
+      stack: ["Hero row", "Move row", "Keep", "Voices", "Question", "Footer columns"],
+      stackMobile: ["Drop block", "App body", "Last row"],
+      restyle: {
+        "Shout 128": { laptop: "Shout 118", tablet: "Shout 80", mobile: "Shout 48" },
+        "Shout 72": { tablet: "Shout 56", mobile: "Shout 38" },
+        "Block 36": { mobile: "Block 28" },
+        "Lead 22": { mobile: "Lead 18" },
+        "Quote 30": { mobile: "Quote 22" },
+        "Keep 200": { mobile: "Keep 120" },
+        "Total 60": { mobile: "Total 44" },
+        "Link 18": { mobile: "Link 14" }
+      },
+      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 });
+        kit.named(id, "Fee bar").forEach((n, i) => kit.patch(n, { width: Math.round(LANE[size] * FEES[i][2]) }));
+        for (const n of kit.named(id, "Marquee stripes")) {
+          kit.patch(n, { width: CONTENT[size] });
+          for (const c of kit.node(n).childIds) kit.patch(c, { width: CONTENT[size], paths: hazardPaths(CONTENT[size], 30, 22) });
+        }
+        fitGate(kit, id, "Gate", size === "laptop" ? CONTENT.laptop - 440 - 48 : CONTENT[size]);
+        if (size === "laptop") {
+          each("Hero sticker", { x: 500 });
+          each("Hero row", { itemSpacing: 48 });
+          each("Keep", { itemSpacing: 40 });
+        }
+        if (size === "tablet" || size === "mobile") {
+          each("Copy", { layoutSizingHorizontal: "FILL" });
+          each("Drop block", { layoutSizingVertical: "HUG" });
+          each("Paid block", { layoutSizingVertical: "HUG" });
+          each("Keep side", { layoutSizingHorizontal: "FILL" });
+          each("Price block", { layoutSizingHorizontal: "FILL" });
+          each("Paid block", { layoutSizingHorizontal: "FILL" });
+          each("Voice", { layoutSizingHorizontal: "FILL" });
+          each("Q", { layoutSizingHorizontal: "FILL" });
+          each("Question", { itemSpacing: 10 });
+          each("Keep", { itemSpacing: 32, padding: pad(36) });
+          if (size === "tablet") compactNav(kit, id, ["What you keep"], 22);
+        }
+        if (size === "mobile") {
+          for (const bar of kit.named(id, "Nav")) for (const n of kit.named(bar, "Brand name")) kit.patch(n, { visible: true });
+          each("Link field", { layoutMode: "VERTICAL", counterAxisAlignItems: "MIN", itemSpacing: 10 });
+          each("Hero sticker", { x: 206, y: -36 });
+          each("Tally", { layoutSizingHorizontal: "FILL", layoutSizingVertical: "HUG" });
+          each("App body", { padding: pad(12), itemSpacing: 12 });
+          for (const n of ["Drop block", "Price block", "Paid block", "Share block", "Voice"]) each(n, { padding: pad(22, 20) });
+          each("Keep", { padding: pad(26, 20) });
+          each("Last", { padding: pad(28, 20) });
+          each("Fee head", { layoutMode: "VERTICAL", itemSpacing: 2 });
+          each("Fee what", { textAlign: "LEFT", layoutSizingHorizontal: "FILL" });
+          each("Dropzone", { layoutSizingHorizontal: "FIXED" });
+          each("Footer lists", { itemSpacing: 16 });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  style_brutalist_landing_default
+};

package/dist/chunks/chunk-W3OGNU4P.js

@@ -0,0 +1,204 @@
+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 {
+  MOTIF,
+  boxed,
+  cabin,
+  cosyBrand,
+  knit,
+  lampOn,
+  plainRows,
+  repeatChart
+} from "./chunk-L4JUCHHC.js";
+import {
+  snow
+} from "./chunk-BNSR5M6U.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-ZMD3C2YJ.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/web/winter-cosy-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var LOOP = 8e3;
+var BOX = { w: 560, h: 620 };
+var SCALE = 0.5;
+var LAMP = 900;
+var SHIPPED = [
+  ["12 Jan", "Hibernation mode", "Pause the whole plan for up to 90 days at $0. Mail keeps arriving and is filed, unread, for the day you wake it."],
+  ["19 Jan", "Snooze until a date", "Put one thread, or one client, to sleep until a morning you pick. It comes back at the top, marked as new."],
+  ["27 Jan", "Focus hours", "Choose the hours you write in. Every ping is held, then handed over as one digest when they end."],
+  ["3 Feb", "An out-of-office that knows", "The auto-reply names the day you are back and who is covering, for each shared inbox."],
+  ["10 Feb", "Small things", "Faster search in long threads, a calmer dark theme, and 41 fixes nobody will notice."]
+];
+var PANEL = [
+  ["Wakes on", "Monday 3 March"],
+  ["Billing until then", "$0.00"],
+  ["Mail while asleep", "Filed, unread"],
+  ["Auto-reply", "\u201CBack on 3 March. Dana is covering.\u201D"]
+];
+var KNIT_COLS = 96;
+var KNIT_CELL = 13;
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 700 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 200, params: { duration: 700 } },
+  { layer: "Headline", preset: "blur-in", at: 250, params: { duration: 1e3, amount: 22 } },
+  { layer: "Visual", preset: "fade-in", at: 200, params: { duration: 800 } },
+  { layer: "Lead", preset: "rise-in", at: 800, params: { duration: 800 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1200, params: { duration: 700 }, stagger: { delay: 140 } },
+  { layer: "Proof", preset: "fade-in", at: 1900, params: { duration: 800 } },
+  { layer: "Fog", preset: "blur-in", at: 2400, params: { duration: 900, amount: 18 } },
+  { layer: "Glass note", preset: "typewriter", at: 3100, params: { duration: 1100 } },
+  { layer: "Track", preset: "fade-in", at: 3600, params: { duration: 260 }, stagger: { delay: 180 } }
+];
+var winter_cosy_landing_default = defineTemplate({
+  id: "web-winter-cosy-landing",
+  meta: {
+    name: "Winter cabin release landing page",
+    description: "A landing page for a winter release, written as a changelog to read by the fire: a hero where a log cabin stands in the snow at blue dusk and its desk lamp comes on, warm light lying across the drift while a fox\u2019s tracks come in print by print; a knitted Fair Isle band; the release as a dated, ruled list; a pause-your-plan feature (hibernation mode) shown as its own settings panel; and a slow-season rate \u2014 at desktop, laptop, tablet and phone widths",
+    category: "web",
+    tags: ["winter", "cosy", "cozy", "cabin", "snow", "landing page", "hero", "website", "saas", "changelog", "release notes", "hibernation", "pause plan", "slow season", "offer", "january", "knit", "animation", "responsive", "seasonal"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["changelog", "launch", "sale"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("Winter cabin release landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    cosyBrand(k);
+    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Brand 22", { ...SERIF, size: 22, fontWeight: 900, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Eyebrow 14", { size: 14, fontWeight: 700, letterSpacing: 4, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Display 84", { ...SERIF, size: 84, fontWeight: 900, letterSpacing: -3, lineHeight: 86 });
+    k.textStyle("Display 72", { ...SERIF, size: 72, fontWeight: 900, letterSpacing: -2.4, lineHeight: 74 });
+    k.textStyle("Display 60", { ...SERIF, size: 60, fontWeight: 900, letterSpacing: -1.8, lineHeight: 62 });
+    k.textStyle("Display 44", { ...SERIF, size: 44, fontWeight: 900, letterSpacing: -1.2, lineHeight: 48 });
+    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 32 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 27 });
+    k.textStyle("Proof 15", { ...MONO, size: 15, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Section 44", { ...SERIF, size: 44, fontWeight: 900, letterSpacing: -1.2, lineHeight: 50 });
+    k.textStyle("Section 32", { ...SERIF, size: 32, fontWeight: 900, letterSpacing: -0.8, lineHeight: 38 });
+    k.textStyle("Term 24", { ...SERIF, size: 24, fontWeight: 700, letterSpacing: -0.4, lineHeight: 30 });
+    k.textStyle("Body 18", { size: 18, fontWeight: 400, lineHeight: 29 });
+    k.textStyle("When 16", { ...MONO, size: 16, fontWeight: 700, lineHeight: 30 });
+    k.textStyle("Label 15", { ...MONO, size: 15, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Value 18", { size: 18, fontWeight: 600, lineHeight: 26 });
+    k.textStyle("Small 14", { size: 14, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Note 34", { ...SERIF, size: 34, fontWeight: 600, fontStyle: "italic", letterSpacing: -0.4, lineHeight: 40 });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 10 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 72, top: 28 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    nav(k, sheet, { links: ["Winter release", "Hibernation", "Pricing", "Changelog"], cta: "Open Burrow", style: "Nav 16", brandStyle: "Brand 22" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 26, name: "Copy" });
+    k.text(copy, "{{brand.name}} 4.2 \xB7 The winter release", { style: "Eyebrow 14", color: "onPaper", name: "Eyebrow" });
+    k.text(copy, "A changelog to read by the fire.", { style: "Display 84", color: "text", name: "Headline" });
+    k.text(copy, "January is slow on purpose. This release lets your inbox be slow too: hibernate the plan, snooze a client until spring, and keep your mornings for the work. Five quiet changes, written up below.", { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Read the winter release" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Turn on hibernation" }, { name: "CTA quiet" });
+    k.text(copy, "no price change \xB7 nothing deleted \xB7 wake it in one click", { style: "Proof 15", color: "onPaper", name: "Proof" });
+    const holder = k.stack(hero, { width: BOX.w, height: BOX.h, name: "Visual holder" });
+    const visual = k.stack(holder, { width: BOX.w, height: BOX.h, fill: "card", radius: 24, clip: true, name: "Visual", absolute: { x: 0, y: 0 } });
+    snow(k, visual, { w: BOX.w, h: BOX.h, n: 30, u: 0.6, depth: "far", loopMs: LOOP, seed: 17 });
+    const scene = cabin(k, visual, { ...boxed({ w: BOX.w, h: BOX.h }, SCALE, -204), loopMs: LOOP, note: { text: "back 3 March", style: "Note 34" } });
+    snow(k, visual, { w: BOX.w, h: BOX.h, n: 9, u: 0.55, depth: "near", loopMs: LOOP, seed: 8 });
+    lampOn(k, scene, LAMP);
+    const shipped = k.stack(sheet, { gap: 0, padding: { top: 40, right: 0, bottom: 0, left: 0 }, name: "Shipped" });
+    const band = k.stack(shipped, { height: 9 * KNIT_CELL, radius: 10, clip: true, name: "Knit holder" });
+    knit(k, band, { cell: KNIT_CELL, chart: [...plainRows(1, KNIT_COLS, "r"), ...repeatChart(MOTIF.flake, KNIT_COLS), ...plainRows(1, KNIT_COLS, "r")], absolute: { x: 0, y: 0 } });
+    k.stack(shipped, { height: 48, name: "Gap" });
+    k.text(shipped, "What shipped while it snowed.", { style: "Section 44", color: "text", name: "Shipped title" });
+    k.stack(shipped, { height: 24, name: "Gap" });
+    for (const [when, what, how] of SHIPPED) {
+      k.rect(shipped, "FILL", 1, "accent", { name: "Rule", opacity: 0.5 });
+      const row = k.stack(shipped, { direction: "HORIZONTAL", gap: 28, padding: { top: 20, right: 0, bottom: 20, left: 0 }, name: "Entry" });
+      k.text(row, when, { style: "When 16", color: "onPaper", width: 110, name: "Entry date" });
+      k.text(row, what, { style: "Term 24", color: "text", width: 300, name: "Entry name" });
+      k.text(row, how, { style: "Body 18", color: "onPaper", name: "Entry how" });
+    }
+    k.rect(shipped, "FILL", 1, "accent", { name: "Rule", opacity: 0.5 });
+    const sleep = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", fill: "card", radius: 18, stroke: { color: "accent", width: 1 }, padding: 48, name: "Hibernation" });
+    const about = k.stack(sleep, { gap: 14, name: "Hibernation about" });
+    k.text(about, "Hibernation mode", { style: "Section 32", color: "onCard", name: "Hibernation title" });
+    k.text(about, "A studio of three does not need a shared inbox in the two weeks nobody writes to it. Switch the plan off for the quiet months and pay nothing. Nothing is deleted, nobody is logged out, and the first person back wakes it for everyone.", { style: "Body 18", color: "onCard", name: "Hibernation text" });
+    const panel = k.stack(sleep, { width: 500, gap: 0, name: "Panel" });
+    const head = k.stack(panel, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 0, right: 0, bottom: 16, left: 0 }, name: "Panel head" });
+    k.text(head, "Hibernate this plan", { style: "Term 24", color: "onCard", autoWidth: true, name: "Panel title" });
+    const toggle = k.stack(head, { direction: "HORIZONTAL", width: 58, height: 32, radius: 16, fill: "primary", justify: "MAX", align: "CENTER", padding: { top: 0, right: 4, bottom: 0, left: 4 }, name: "Toggle" });
+    k.ellipse(toggle, 24, "onPrimary", { name: "Toggle knob" });
+    for (const [label, value] of PANEL) {
+      k.rect(panel, "FILL", 1, "accent", { name: "Rule", opacity: 0.35 });
+      const row = k.stack(panel, { direction: "HORIZONTAL", gap: 20, padding: { top: 12, right: 0, bottom: 12, left: 0 }, name: "Panel row" });
+      k.text(row, label, { style: "Label 15", color: "cardMuted", width: 190, name: "Panel label" });
+      k.text(row, value, { style: "Value 18", color: "onCard", name: "Panel value" });
+    }
+    const offer = k.stack(sheet, { direction: "HORIZONTAL", gap: 40, align: "CENTER", justify: "SPACE_BETWEEN", name: "Offer" });
+    const rate = k.stack(offer, { gap: 10, name: "Offer copy" });
+    k.text(rate, "The slow-season rate.", { style: "Section 44", color: "text", name: "Offer title" });
+    k.text(rate, "January and February are half price on every plan: $9 a seat, not $18. There is no code. It is on your next invoice already.", { style: "Body 18", color: "onPaper", name: "Offer text" });
+    k.instance(offer, "Button", { Label: "See the winter rate" }, { name: "Offer button" });
+    k.text(sheet, "\xA9 2026 Burrow Mail \xB7 Changelog \xB7 Security \xB7 Status", { style: "Small 14", color: "onPaper", name: "Footer" });
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Hibernation", "Offer"],
+      stackMobile: ["Entry", "Panel row"],
+      restyle: {
+        "Display 84": { laptop: "Display 72", tablet: "Display 60", mobile: "Display 44" },
+        "Lead 20": { mobile: "Lead 17" },
+        "Section 44": { mobile: "Section 32" }
+      },
+      gap: { tablet: 60, mobile: 48 },
+      tweak: (kit, id, size) => {
+        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48 });
+        if (size === "tablet" || size === "mobile") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 44, counterAxisAlignItems: "CENTER" });
+          for (const n of kit.named(id, "Hibernation")) kit.patch(n, { itemSpacing: 28, padding: { top: 32, right: 24, bottom: 32, left: 24 } });
+          for (const n of kit.named(id, "Panel")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const n of kit.named(id, "Offer")) kit.patch(n, { itemSpacing: 24 });
+          for (const n of kit.named(id, "Entry name")) kit.patch(n, { width: 230 });
+        }
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Entry")) kit.patch(n, { itemSpacing: 4 });
+          for (const n of kit.named(id, "Panel row")) kit.patch(n, { itemSpacing: 0 });
+        }
+        for (const n of kit.named(id, "Knit")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: KNIT_COLS * KNIT_CELL });
+        const s = size === "mobile" ? 335 / BOX.w : 1;
+        for (const n of kit.named(id, "Visual holder")) kit.patch(n, { layoutSizingHorizontal: "FIXED", layoutSizingVertical: "FIXED", width: Math.round(BOX.w * s), height: Math.round(BOX.h * s) });
+        for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: BOX.w, height: BOX.h, ...s === 1 ? {} : { anchorX: 0, anchorY: 0, scaleX: s, scaleY: s } });
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  winter_cosy_landing_default
+};