@popcraft/kit 0.53.4 → 0.53.5

package/dist/chunks/chunk-GMVZIXR5.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-BDCAQSRZ.js";
+import {
+  tick
+} from "./chunk-2VFVKPUT.js";
+import {
+  compactNav,
+  footer,
+  respond,
+  rule,
+  typeScale
+} from "./chunk-YHF6LRMF.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-ZMD3C2YJ.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.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", size === "tablet" ? { x: 480, y: 660 } : { x: 214, y: 668, scaleX: 0.8, scaleY: 0.8 });
+          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-GNRHJYDT.js

@@ -0,0 +1,92 @@
+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 {
+  E,
+  cloud,
+  lottieTemplate,
+  roundRect
+} from "./chunk-UCGZ6DEK.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/lottie/climate.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var CLIMATE = { paper: "#E8F5EE", ink: "#0F2E22", accent: "#1FA36B", hill: "#9ED9B9", far: "#C8EBD6", sky: "#CFEAF7", sun: "#FFC53D", white: "#FFFFFF", tower: "#F4FAF6", bolt: "#FFC53D" };
+function turbine(l, x, foot, h, thirds) {
+  const top = foot - h, b = h * 0.42;
+  l.shape(l.sheet, [[x - h * 0.03, foot], [x - h * 0.012, top], [x + h * 0.012, top], [x + h * 0.03, foot]], "tower", { name: "Tower" });
+  const rotor = l.box(l.sheet, x - b, top - b, b * 2, b * 2, "Rotor");
+  for (let i = 0; i < 3; i++) {
+    const arm = l.box(rotor, 0, 0, b * 2, b * 2, "Blade arm");
+    l.k.patch(arm, { rotation: i * 120 });
+    const w = b * 0.09;
+    l.shape(arm, [{ x: b - w, y: b }, { x: b - w * 0.3, y: 0, handleIn: { x: b - w * 1.2, y: b * 0.45 } }, { x: b + w * 0.6, y: b * 0.2, handleIn: { x: b + w * 0.5, y: 0 } }, { x: b + w, y: b, handleIn: { x: b + w * 1.1, y: b * 0.55 } }], "tower", { name: "Blade" });
+  }
+  l.keys(rotor, "rotation", [[0, 0, E.linear], [3e3, 120 * thirds]]);
+  l.circle(l.sheet, x, top, h * 0.035, "ink", { name: "Hub" });
+}
+var climateWindFarm = lottieTemplate({
+  slug: "wind-farm",
+  sector: "climate",
+  role: "hero",
+  size: "hero",
+  duration: 3e3,
+  loop: true,
+  ground: "sky",
+  name: "Wind farm",
+  description: "A hero loop for a clean-energy product: three wind turbines turn at their own speeds on rolling hills under a warm sun, clouds drifting by \u2014 three seconds, seamless, 1600\xD7900",
+  colors: CLIMATE,
+  useCases: ["launch"],
+  tags: ["wind", "renewable", "energy", "turbine", "sustainability"],
+  build(l) {
+    const halo = l.circle(l.sheet, 1300, 210, 130, "sun", { name: "Sun halo", opacity: 0.25 });
+    l.scale(halo, [[0, 1, E.inOut], [1500, 1.12, E.inOut], [3e3, 1]]);
+    l.circle(l.sheet, 1300, 210, 90, "sun", { name: "Sun" });
+    for (const [x, y, s, amp] of [[180, 150, 1.1, 60], [760, 90, 0.8, -50], [1050, 300, 0.6, 40]]) {
+      const c = cloud(l, l.sheet, x, y, s);
+      l.keys(c, "translateX", [[0, 0, E.inOut], [1500, amp, E.inOut], [3e3, 0]]);
+    }
+    l.circle(l.sheet, 1250, 1180, 620, "far", { name: "Far hill" });
+    turbine(l, 1180, 640, 360, 3);
+    turbine(l, 520, 700, 480, 2);
+    l.circle(l.sheet, 360, 1250, 700, "hill", { name: "Hill" });
+    turbine(l, 900, 760, 300, 4);
+    l.circle(l.sheet, 1100, 1400, 700, "accent", { name: "Near hill" });
+  }
+});
+var climateBattery = lottieTemplate({
+  slug: "battery-charging",
+  sector: "climate",
+  role: "loader",
+  size: "icon",
+  duration: 2400,
+  loop: true,
+  name: "Battery charging",
+  description: "A charging state for an energy or EV app: the battery fills cell by cell while the bolt pulses, then empties to go again \u2014 a 2.4-second seamless loop, 512\xD7512",
+  colors: CLIMATE,
+  tags: ["battery", "charging", "ev", "energy", "loader"],
+  build(l) {
+    l.vector(l.sheet, [{ pts: roundRect(96, 156, 300, 200, 36), closed: true }], [], { name: "Casing", stroke: { color: "ink", width: 20 } });
+    l.rect(l.sheet, 406, 216, 26, 80, "ink", { radius: 10, name: "Terminal" });
+    for (let i = 0; i < 4; i++) {
+      const cell = l.rect(l.sheet, 124 + i * 64, 184, 52, 144, "accent", { radius: 12, name: "Cell" });
+      l.pivot(cell, 0.5, 1);
+      const t = 150 + i * 350;
+      l.keys(cell, "scaleY", [[0, 0, E.hold], [t, 0, E.pop], [t + 300, 1, E.hold], [1900, 1, E.in], [2200, 0, E.hold], [2400, 0]]);
+    }
+    const bolt = l.shape(l.sheet, [[268, 196], [206, 268], [248, 268], [230, 320], [296, 244], [254, 244]], "bolt", { name: "Bolt", stroke: { color: "ink", width: 10 } });
+    l.scale(bolt, [[0, 1, E.inOut], [300, 1.15, E.inOut], [600, 1, E.inOut], [1200, 1.15, E.inOut], [1500, 1, E.hold], [2400, 1]]);
+  }
+});
+var CLIMATE_PACK = [climateWindFarm, climateBattery];
+
+export {
+  climateWindFarm,
+  climateBattery,
+  CLIMATE_PACK
+};

package/dist/chunks/chunk-GQL3WJ3S.js

@@ -0,0 +1,171 @@
+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,
+  bulbArrow,
+  fitShopfront,
+  lettering,
+  lightbox,
+  neonBrand,
+  neonWord,
+  puddle,
+  shopfront,
+  spark,
+  two,
+  wash
+} from "./chunk-4NPTCPAW.js";
+import {
+  fitRain,
+  rain
+} from "./chunk-ZQS4FIVV.js";
+import {
+  MONO
+} from "./chunk-AXAAXHZF.js";
+import {
+  board,
+  patchAll,
+  put,
+  reboard,
+  restyle
+} from "./chunk-LWSZATOL.js";
+import {
+  pill,
+  postVariants
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/social/black-friday-neon-countdown.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 8e3;
+var TICKS = 8;
+var RAIN = { color: "ice", opacity: 0.13, rate: 960, seed: 4, count: 20, len: 90 };
+var CAP = 112;
+var TUBE = 10;
+var cues = [
+  { layer: "Tile plate", preset: "pulse", at: 600, params: { duration: 500, amount: 0.04 }, stagger: { delay: 160 } },
+  { layer: "Button", preset: "pulse", at: 3e3, params: { duration: 600, amount: 0.06 } },
+  { layer: "Code plate", preset: "pulse", at: 4200, params: { duration: 600, amount: 0.06 } }
+];
+var counts = [
+  // Rests at the figure it starts from: a still reads the time left as it was set.
+  { layer: "Seconds figure", at: 0, duration: TICKS * 1e3, tick: 1e3, counter: { from: DEAL.seconds, to: DEAL.seconds - TICKS, value: DEAL.seconds } }
+];
+var NAME = "Black Friday neon countdown post";
+var black_friday_neon_countdown_default = defineTemplate({
+  id: "motion-black-friday-neon-countdown-post",
+  meta: {
+    name: NAME,
+    description: "A last-call post for a SaaS Black Friday sale, drawn as a shop sign at night: SALE ENDS IN bent from red and white neon on a wet brick wall, the time left on four lit plates with the seconds ticking, the discount in amber beside an arrow of chasing bulbs, rain, and a power dip where the sign stutters and relights. Eight seconds, looping, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "black friday", "cyber monday", "countdown", "timer", "sale", "saas", "neon", "neon sign", "shopfront", "night", "rain", "flicker", "post", "deadline", "discount code"],
+    platforms: ["instagram", "x", "linkedin", "facebook", "threads"],
+    formats: ["post", "portrait-post", "story", "ad"],
+    useCases: ["countdown", "sale"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    neonBrand(k, { name: DEAL.product, site: DEAL.site });
+    k.textStyle("Clock 150", { ...MONO, size: 150, fontWeight: 800, letterSpacing: -5, lineHeight: 160, textAlign: "CENTER", fontFeatures: { tnum: 1 } });
+    k.textStyle("Clock 230", { ...MONO, size: 230, fontWeight: 800, letterSpacing: -8, lineHeight: 240, textAlign: "CENTER", fontFeatures: { tnum: 1 } });
+    k.textStyle("Unit 30", { ...MONO, size: 30, fontWeight: 700, letterSpacing: 4, lineHeight: 36, textAlign: "CENTER" });
+    k.textStyle("Unit 22", { ...MONO, size: 22, fontWeight: 700, letterSpacing: 3, lineHeight: 28, textAlign: "CENTER" });
+    k.textStyle("Code 48", { ...MONO, size: 48, fontWeight: 800, letterSpacing: 1.4, lineHeight: 56 });
+    k.textStyle("Code 34", { ...MONO, size: 34, fontWeight: 800, letterSpacing: 1, lineHeight: 42 });
+    k.textStyle("Headline 54", { size: 54, fontWeight: 900, letterSpacing: -1.8, lineHeight: 58, textAlign: "CENTER" });
+    k.textStyle("Headline 76", { size: 76, fontWeight: 900, letterSpacing: -2.6, lineHeight: 78, textAlign: "CENTER" });
+    k.textStyle("Button 32", { size: 32, fontWeight: 800, lineHeight: 40 });
+    pill(k, "Link button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: DEAL.link, pad: [20, 44], radius: 12 });
+    const sheet = k.sheet;
+    const STREET = 968;
+    k.flowSheet(sheet, 24, { top: 52, right: 56, bottom: 132, left: 56 }, "paper", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    shopfront(k, sheet, { street: STREET });
+    wash(k, sheet, "red", { x: 540, y: 120, w: 1300, h: 620, alpha: 0.36, name: "Sign light" });
+    wash(k, sheet, "amber", { x: 540, y: 430, w: 1200, h: 560, alpha: 0.16, name: "Plate light" });
+    rain(k, sheet, 1080, 1080, RAIN);
+    const pad = Math.ceil(TUBE);
+    const sale = lettering("SALE", CAP, { pad }), ends = lettering("ENDS IN", CAP, { pad });
+    const W = Math.round(sale.w + ends.w + CAP * 0.36), H = sale.h;
+    const sb = board(k, sheet, W, H, 1, "Sign board");
+    const saleSign = neonWord(k, sb, "SALE", "red", { cap: CAP, t: TUBE, name: "Sale", absolute: { x: 0, y: 0 } });
+    const endsSign = neonWord(k, sb, "ENDS IN", "ice", { cap: CAP, t: TUBE, name: "Ends", absolute: { x: Math.round(sale.w + CAP * 0.36), y: 0 }, strength: 0.8 });
+    const tiles = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, name: "Clock" });
+    for (const [name, value, unit] of [["Days", DEAL.days, "DAYS"], ["Hours", DEAL.hours, "HOURS"], ["Minutes", DEAL.minutes, "MINUTES"], ["Seconds", DEAL.seconds, "SECONDS"]]) {
+      const tile = k.stack(tiles, { gap: 12, align: "CENTER", name: "Tile" });
+      const plate = lightbox(k, tile, { pad: [26, 0], radius: 16, width: "FILL", direction: "VERTICAL", name: "Tile plate", glow: 44 });
+      k.text(plate, two(value), { style: "Clock 150", color: "onAccent", name: `${name} figure` });
+      k.text(tile, unit, { style: "Unit 22", color: "onPaper", name: `${name} unit` });
+    }
+    const offer = k.stack(sheet, { direction: "HORIZONTAL", gap: 30, align: "CENTER", justify: "CENTER", name: "Offer" });
+    const off = neonWord(k, offer, `${DEAL.off}% OFF`, "amber", { cap: 78, t: 8, name: "Off", flow: true });
+    bulbArrow(k, offer, { w: 150, h: 96, dir: "right", bulb: 11, loopMs: DURATION, laps: 8, name: "Arrow" });
+    for (const id of k.named(offer, "Arrow")) k.patch(id, { layoutPositioning: "AUTO" });
+    const code = k.stack(offer, { direction: "HORIZONTAL", width: "HUG", fill: "card", radius: 10, padding: { top: 20, right: 26, bottom: 20, left: 26 }, stroke: { color: "steelEdge", width: 4, align: "INSIDE" }, name: "Code plate" });
+    k.text(code, `CODE ${DEAL.code}`, { style: "Code 34", color: "amber", autoWidth: true, name: "Code" });
+    k.text(sheet, "Shutter drops Monday, 23:59 PT.", { style: "Headline 54", color: "text", name: "Headline" });
+    k.instance(sheet, "Link button", { Label: DEAL.link }, { name: "Button" });
+    const pool = puddle(k, sheet, W, H, saleSign.paths, "red", { t: TUBE, name: "Sign puddle", absolute: { x: Math.round((1080 - W) / 2), y: STREET + 20 }, squash: 0.6, opacity: 0.5, blur: 7 });
+    puddle(k, pool, ends.w, H, endsSign.paths, "ice", { t: TUBE, name: "Ends puddle", absolute: { x: Math.round(sale.w + CAP * 0.36), y: 0 }, squash: 0.6, opacity: 0.7, blur: 7 });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    saleSign.tubes.forEach((id, i) => spark(k, [id], [{ buzz: 5200 + i * 150 }]));
+    spark(k, [off.tubes[2]], [{ buzz: 2e3 }]);
+    k.animate(pool, "opacity", [{ t: 0, v: 0.5 }, { t: 5300, v: 0.5 }, { t: 5500, v: 0.22 }, { t: 6300, v: 0.22 }, { t: 6600, v: 0.5 }]);
+    const night = (kit, id, street, w) => {
+      fitShopfront(kit, id, { street });
+      fitRain(kit, id, { name: "Rain", seed: RAIN.seed, count: RAIN.count, len: RAIN.len });
+      put(kit, id, "Sign light", w / 2 - 650, -190);
+    };
+    k.variants(sheet, postVariants({ portrait: 56 }, {
+      portrait: (kit, id) => {
+        night(kit, id, 1218, 1080);
+        kit.patch(id, { padding: { top: 60, right: 56, bottom: 160, left: 56 }, itemSpacing: 34 });
+        patchAll(kit, id, "Tile plate", { padding: { top: 44, right: 0, bottom: 44, left: 0 } });
+        restyle(kit, id, "Headline", "Headline 76");
+        put(kit, id, "Plate light", 540 - 600, 300);
+        put(kit, id, "Sign puddle", Math.round((1080 - W) / 2), 1244);
+      },
+      // Inside the vertical apps' safe area the column is 800 wide: the plates stand two by two, twice the size.
+      vertical: (kit, id) => {
+        night(kit, id, 1490, 1080);
+        kit.patch(id, { itemSpacing: 20 });
+        reboard(kit, id, "Sign board", 800 / W);
+        patchAll(kit, id, "Clock", { layoutWrap: "WRAP", itemSpacing: 20, counterAxisSpacing: 16 });
+        patchAll(kit, id, "Tile", { layoutSizingHorizontal: "FIXED", width: 390 });
+        for (const n of ["Days", "Hours", "Minutes", "Seconds"]) restyle(kit, id, `${n} figure`, "Clock 230");
+        for (const n of ["Days", "Hours", "Minutes", "Seconds"]) restyle(kit, id, `${n} unit`, "Unit 30");
+        patchAll(kit, id, "Tile plate", { padding: { top: 4, right: 0, bottom: 4, left: 0 } });
+        patchAll(kit, id, "Offer", { itemSpacing: 30, layoutWrap: "WRAP", counterAxisSpacing: 14, layoutSizingHorizontal: "FILL" });
+        restyle(kit, id, "Code", "Code 48");
+        patchAll(kit, id, "Code plate", { padding: { top: 18, right: 32, bottom: 18, left: 32 } });
+        restyle(kit, id, "Headline", "Headline 54");
+        put(kit, id, "Plate light", 540 - 600, 500);
+        put(kit, id, "Sign puddle", Math.round((1080 - W) / 2), 1530, { scaleY: 1.5, anchorY: 0 });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  black_friday_neon_countdown_default
+};

package/dist/chunks/chunk-GQXBYTFD.js

@@ -0,0 +1,71 @@
+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 {
+  FOLIO,
+  caption,
+  comicMeta,
+  comicSetup,
+  folio,
+  pageGrid,
+  panel,
+  rows,
+  say,
+  sfx,
+  tier,
+  tierBox
+} from "./chunk-AGL7MNPF.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/print/comic-hero-interrogation.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var comic_hero_interrogation_default = defineTemplate({
+  id: "comic-interrogation",
+  meta: comicMeta("Interrogation page", 'Page ten of "Nightstar: Blackout": dawn in a warehouse, Voltrix chained to a chair under one bulb, shot and reverse shot as Nightstar asks who sold him the codes, a fist on the table, a grin, and Rosa waiting outside', ["interrogation", "dialogue", "shot reverse shot", "aftermath"]),
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Interrogation page", preset("comic-page"));
+    comicSetup(k);
+    drawPage(k);
+    return k.finish();
+  }
+});
+function drawPage(k) {
+  const g = 12, { W, H } = pageGrid(k, k.sheet, 36, g);
+  const [h1, h2, h3] = rows(H - FOLIO, g, [32, 34, 34]);
+  const t1 = tierBox(k, k.sheet, W, h1, "Tier 1");
+  panel(k, t1, tier(W, h1, [1], g)[0], "interro-1", { ground: "heroG1", name: "The warehouse" });
+  caption(k, t1, "Dawn. Pier 9 warehouse.", { x: 10, y: 10, width: 170 });
+  const t2 = tierBox(k, k.sheet, W, h2, "Tier 2");
+  const [a, b] = tier(W, h2, [1, 1], g);
+  panel(k, t2, a, "interro-2", { ground: "heroG2", name: "Nightstar asks" });
+  panel(k, t2, b, "interro-3", { ground: "heroG3", name: "Voltrix smirks" });
+  say(k, t2, "Who sold you the substation codes?", { x: 10, y: 10, width: 160, to: { x: a.width * 0.5, y: h2 * 0.35 } });
+  say(k, t2, "Ask nicely.", { x: W - 108, y: 10, width: 96, to: { x: b.x + b.width * 0.5, y: h2 * 0.45 } });
+  const t3 = tierBox(k, k.sheet, W, h3, "Tier 3");
+  const [c, d, e] = tier(W, h3, [1, 1, 2], g);
+  panel(k, t3, c, "interro-4", { ground: "heroG1", name: "The table" });
+  panel(k, t3, d, "interro-5", { ground: "heroG2", name: "The grin" });
+  panel(k, t3, e, "interro-6", { ground: "heroG3", name: "Morning" });
+  sfx(k, t3, "Blam!", { x: 4, y: h3 - 96, w: 150, h: 84, deg: -10, seed: 19 });
+  say(k, t3, "There\u2019s a lot more where I came from.", { x: d.x - 20, y: 10, width: 128, to: { x: d.x + d.width * 0.5, y: h3 * 0.55 } });
+  caption(k, t3, "To be continued.", { x: W - 150, y: h3 - 44, width: 140 });
+  folio(k, k.sheet, "Nightstar: Blackout \u2014 page 10");
+}
+
+export {
+  comic_hero_interrogation_default,
+  drawPage
+};