@popcraft/kit 0.53.4 → 0.53.6

package/dist/chunks/chunk-4BFJ5C4L.js

@@ -0,0 +1,117 @@
+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 {
+  background,
+  refilled
+} from "./chunk-75T3CFTH.js";
+import {
+  logoBadge,
+  pill,
+  verticalPadding
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  hex,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/effects/glass-intro.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var GLASS_INTRO = {
+  duration: 6e3,
+  deep: "#0A1A3A",
+  foam: "#3563C9",
+  /** The glass at rest: clear (no bend), a little frost. */
+  frost: 24,
+  /** How far the glass bends the waves at its strongest (px), and where it settles. */
+  bend: 28,
+  settle: 14
+};
+var cues = [
+  { layer: "Glass panel", preset: "rise-in", at: 300, params: { duration: 900 } },
+  { layer: "Live chip", preset: "pop-in", at: 900 },
+  { layer: "Talk title", preset: "words-in", at: 1200, params: { duration: 600 } },
+  { layer: "When", preset: "fade-in", at: 2300 },
+  { layer: "Host", preset: "fade-in", at: 2500 },
+  { layer: "Logo badge", preset: "pop-in", at: 2800 },
+  { layer: "Live chip", preset: "pulse", at: 3600 }
+];
+var glass_intro_default = defineTemplate({
+  id: "motion-glass-intro",
+  meta: {
+    name: "Glass webinar intro",
+    description: "A 6-second webinar opener: a glass panel whose refraction, dispersion and frost are keyed rises over slow shader waves, and the talk title, date and host come in on it \u2014 16:9, with square and 9:16 cuts for the promo posts",
+    category: "animation",
+    tags: ["animation", "background", "glass", "shader", "waves", "webinar", "intro", "live", "talk"],
+    platforms: ["youtube", "linkedin", "x", "instagram"],
+    formats: ["intro", "title-card", "video", "post", "story"],
+    useCases: ["event", "livestream", "education"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues },
+  build() {
+    const G = GLASS_INTRO;
+    const k = new Kit("Glass webinar intro", preset("video-1080p"));
+    k.brand(
+      { paper: G.deep, glass: G.deep, headline: "#F4F7FF", caption: "#C9D6F2", primary: "#FFC857", onPrimary: "#0A1A3A" },
+      { company: "Tidewater Analytics", title: "Forecasting demand with the data you have", when: "Tuesday, October 21 \xB7 11 am ET", host: "Hosted by Priya Raman, head of data science" }
+    );
+    k.textStyle("Title 88", { size: 88, fontWeight: 800, letterSpacing: -2.5, lineHeight: 96 });
+    k.textStyle("Title 72", { size: 72, fontWeight: 800, letterSpacing: -2, lineHeight: 80 });
+    k.textStyle("Chip 26", { size: 26, fontWeight: 800, letterSpacing: 3, lineHeight: 30 });
+    k.textStyle("Meta 36", { size: 36, fontWeight: 600, lineHeight: 44 });
+    k.textStyle("Host 30", { size: 30, fontWeight: 500, lineHeight: 38 });
+    pill(k, "Chip", { fill: "primary", ink: "onPrimary", style: "Chip 26", label: "LIVE WEBINAR", pad: [12, 24] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 120, right: 160, bottom: 120, left: 160 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: G.duration, fps: 30 });
+    const bg = background(k, sheet, k.shader("Waves", { speed: 0.4, scale: 5, deep: hex(G.deep), foam: hex(G.foam) }));
+    const glassFx = [{ id: "e1", type: "GLASS", radius: G.frost, refraction: 0, dispersion: 0, rim: 0.55, depth: 0, visible: true }];
+    const panel = k.stack(sheet, { width: 1240, fill: k.tint("glass", 0.5), radius: 48, gap: 28, padding: { top: 64, right: 72, bottom: 64, left: 72 }, clip: true, effects: glassFx, name: "Glass panel" });
+    const top = k.stack(panel, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Panel top" });
+    k.instance(top, "Chip", { Label: "LIVE WEBINAR" }, { name: "Live chip" });
+    logoBadge(k, top, { fill: "primary", size: 56 });
+    k.text(panel, "{{brand.title}}", { style: "Title 88", color: "headline", name: "Talk title" });
+    k.text(panel, "{{brand.when}}", { style: "Meta 36", color: "headline", name: "When" });
+    k.text(panel, "{{brand.host}}", { style: "Host 30", color: "caption", name: "Host" });
+    k.animateShader(bg, "scale", [{ t: 0, v: 5, ease: ease.inOut("sine") }, { t: 3e3, v: 3.5, ease: ease.inOut("sine") }, { t: G.duration, v: 4.5 }]);
+    k.animate(panel, "effects[@e1].refraction", [{ t: 600, v: 0, ease: ease.out("expo") }, { t: 1800, v: G.bend, ease: ease.inOut("sine") }, { t: 4800, v: G.settle }]);
+    k.animate(panel, "effects[@e1].dispersion", [{ t: 600, v: 0, ease: ease.out("cubic") }, { t: 1800, v: 0.45, ease: ease.inOut("sine") }, { t: 4800, v: 0.2 }]);
+    k.animate(panel, "effects[@e1].radius", [{ t: 600, v: G.frost, ease: ease.out("cubic") }, { t: 1800, v: 6 }]);
+    k.animate(panel, "effects[@e1].depth", [{ t: 600, v: 0, ease: ease.out("cubic") }, { t: 1800, v: 0.8 }]);
+    k.cues(sheet, cues);
+    k.variants(sheet, refilled([
+      { preset: "ig-post", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 64, right: 64, bottom: 64, left: 64 }, primaryAxisAlignItems: "CENTER" });
+        for (const n of kit.named(id, "Glass panel")) kit.patch(n, { width: 952, padding: { top: 56, right: 56, bottom: 56, left: 56 } });
+        for (const n of kit.named(id, "Talk title")) kit.restyle(n, "Title 72");
+      } },
+      { preset: "ig-story", adjust: (kit, id) => {
+        kit.patch(id, { padding: verticalPadding(80), primaryAxisAlignItems: "CENTER" });
+        for (const n of kit.named(id, "Glass panel")) kit.patch(n, { width: 800, padding: { top: 48, right: 44, bottom: 48, left: 44 } });
+        for (const n of kit.named(id, "Talk title")) kit.restyle(n, "Title 72");
+      } }
+    ]));
+    return k.finish();
+  }
+});
+
+export {
+  GLASS_INTRO,
+  glass_intro_default
+};

package/dist/chunks/chunk-4BZV3W4C.js

@@ -0,0 +1,320 @@
+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 {
+  FIZZ,
+  WEB_STEPS,
+  WEB_TYPE,
+  burst,
+  burstSticker,
+  callComponent,
+  chromeText,
+  halftone,
+  maxBrand,
+  plate,
+  quietComponent,
+  relight,
+  slap,
+  spark,
+  spin,
+  sticker,
+  stickerEdge,
+  ticker,
+  wobble
+} from "./chunk-5A2BBXLV.js";
+import {
+  tickPath
+} from "./chunk-2VFVKPUT.js";
+import {
+  CONTENT,
+  compactNav,
+  footer,
+  respond,
+  typeScale
+} from "./chunk-YHF6LRMF.js";
+import {
+  nav
+} from "./chunk-ZMD3C2YJ.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/web/style-maximal-pricing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Maximal SaaS pricing page";
+var DURATION = 6e3;
+var PLANS = [
+  {
+    name: "Free",
+    pitch: "For trying it on your next video.",
+    month: 0,
+    year: 0,
+    yearly: "Free for good. No card.",
+    fill: "card",
+    ink: "onCard",
+    button: "Start on Free",
+    rotate: -1.5,
+    features: ["5 clips a week", "Auto-captions in 3 styles", "5 sticker packs", "A small watermark"]
+  },
+  {
+    name: "Pro",
+    pitch: "For creators posting every day.",
+    month: FIZZ.pro,
+    year: FIZZ.proYear,
+    yearly: "Billed yearly: $108. You save $36.",
+    fill: "primary",
+    ink: "onPrimary",
+    button: "Try Pro free for 7 days",
+    rotate: 0,
+    features: ["Unlimited clips, no watermark", "Auto-Bop beat cuts", "All 12 caption styles", `${FIZZ.packs}+ sticker packs`, "Your brand kit"]
+  },
+  {
+    name: "Studio",
+    pitch: "For a channel with an editor or two.",
+    month: FIZZ.studio,
+    year: FIZZ.studioYear,
+    yearly: "Billed yearly: $288. You save $60.",
+    fill: "secondary",
+    ink: "onSecondary",
+    button: "Try Studio free",
+    rotate: 1.5,
+    features: ["Everything in Pro", "Up to 5 seats", "One shared brand kit", "4K export", "Priority renders"]
+  }
+];
+var TABLE = [
+  ["Clips a week", "5", "No limit", "No limit"],
+  ["Watermark", "Small", false, false],
+  ["Auto-Bop beat cuts", false, true, true],
+  ["Caption styles", "3", "12", "12, own"],
+  ["Sticker packs", "5", "40+", "40+, own"],
+  ["Export", "1080p", "1080p", "4K"],
+  ["Brand kit", false, true, "Shared"],
+  ["Priority renders", false, false, true],
+  ["Seats", "1", "1", "5"]
+];
+var FAQ = [
+  ["What counts as a clip?", "Every vertical video Clipfizz exports. Re-exporting the same clip in another size is free."],
+  ["Do I own my clips?", "Yes, every frame. We never train on your videos and never post for you."],
+  ["What happens after the 7-day trial?", "You choose Pro or go back to Free. We do not take a card to start, so nothing is charged by surprise."],
+  ["Can I cancel any time?", "Yes, in two clicks from Settings. Yearly plans refund the months you did not use."],
+  ["Is there a student price?", "Pro is $5 a month with a school email. Write to us from it and we will switch you over."],
+  ["Can my editor use my account?", "On Studio, yes: up to five seats share one brand kit, and each person has their own login."]
+];
+var cues = [
+  slap("Picked burst", 200, { from: 0.2, duration: 460 }),
+  wobble("Picked burst", 3e3, { angle: 10 }),
+  { layer: "Plan tick", preset: "pop-in", at: 500, stagger: { delay: 110, order: "selection" }, params: { duration: 300, amount: 0.1, ease: ease.back(2.6) } },
+  { layer: "Table row", preset: "slide-in", at: 600, stagger: { delay: 120, order: "selection" }, params: { direction: "left", duration: 500, distance: 60 } },
+  wobble("Question", 1800, { gap: 220, angle: 4, duration: 700 }),
+  wobble(["Save burst", "Trial burst"], 2400, { gap: 300, angle: 9 })
+];
+var style_maximal_pricing_default = defineTemplate({
+  id: "web-saas-style-maximal-pricing",
+  meta: {
+    name: NAME,
+    description: "A pricing page in a maximalist Y2K look for an AI clip maker, whose monthly / yearly switch works in present mode: a variable toggle flips every price at once while the lime knob slides across. Chrome type on a black plate, three plans as tilted die-cut cards (Pro in lime with a burst slapped on its corner), a full comparison on a cream sheet with drawn ticks and Pro's column on a lime band, six questions as stickers, a closing plate and a footer; the bursts turn, ticks pop on and the rows slide in on the page timeline. Desktop to phone",
+    category: "web",
+    tags: ["pricing", "plans", "toggle", "interactive", "variables", "comparison table", "faq", "saas", "maximalist", "y2k", "chrome", "stickers", "starburst", "creator", "video", "ai", "animation", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["pricing", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-16"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit(NAME, preset("web-desktop"));
+    k.quantizeGeometry = true;
+    maxBrand(k, { headline: "FREE TO TRY.\nCHEAP TO KEEP." });
+    const s = typeScale(k, { ...WEB_TYPE });
+    const monthly = k.variable("Billing", "monthly", "BOOLEAN", true);
+    const yearly = k.variable("Billing", "yearly", "BOOLEAN", false);
+    callComponent(k, { style: s("Button 18"), label: "Try Pro free for 7 days", pad: [16, 26], drop: 5, weight: 3 });
+    quietComponent(k, { style: s("Button 18"), label: "Start on Free", pad: [16, 26] });
+    k.component("Button", { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 999, align: "CENTER", padding: { top: 12, right: 22, bottom: 12, left: 22 }, stroke: { color: "night", width: 3, align: "INSIDE" }, props: { Label: "Try free" } }, (id) => {
+      k.propText(id, "Label", { style: s("Button 16"), color: "onPrimary", autoWidth: true });
+    });
+    k.variantSet("Billing switch", "Billing", ["Monthly", "Yearly"], {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      gap: 14,
+      align: "CENTER",
+      fill: "card",
+      radius: 999,
+      padding: { top: 8, right: 10, bottom: 8, left: 10 },
+      stroke: { color: "night", width: 3, align: "INSIDE" },
+      description: "Monthly or yearly billing: click to switch, and the knob slides across. On the pricing page the click also flips the billing variables every price is bound to.",
+      props: { Left: "Monthly", Right: "Yearly" }
+    }, (state, id) => {
+      const chip = (prop, on) => {
+        const c = k.stack(id, { direction: "HORIZONTAL", width: "HUG", fill: on ? "primary" : "card", radius: 999, padding: { top: 6, right: 14, bottom: 6, left: 14 }, name: `${prop} chip` });
+        k.propText(c, prop, { style: s("Tag 16"), color: on ? "onPrimary" : "onCard", autoWidth: true });
+      };
+      chip("Left", state === "Monthly");
+      const track = k.stack(id, { direction: "HORIZONTAL", width: 68, height: 36, radius: 18, padding: 4, align: "CENTER", justify: state === "Yearly" ? "MAX" : "MIN", fill: "night", name: "Track" });
+      k.ellipse(track, 28, "primary", { name: "Knob" });
+      chip("Right", state === "Yearly");
+    });
+    k.changeTo("Billing switch/Monthly", "ON_CLICK", "Billing switch/Yearly", 260, "EASE_OUT");
+    k.changeTo("Billing switch/Yearly", "ON_CLICK", "Billing switch/Monthly", 260, "EASE_OUT");
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 104, { top: 24, right: 120, bottom: 56, left: 120 }, "paper", "MIN", "MIN");
+    k.patch(sheet, { layoutSizingVertical: "HUG", minHeight: 1024, clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    k.patch(sheet, { height: 5e3 });
+    const top = k.stack(sheet, { gap: 40, name: "Top" });
+    ticker(k, top, { phrases: ["PRO FREE FOR 7 DAYS", "NO CARD TO START", "YEARLY SAVES 25%"], w: 400, height: 52, style: s("Ticker 24"), fill: "primary", ink: "onPrimary", spark: "night", loop: DURATION, cells: 2, name: "Ticker" });
+    nav(k, top, { links: ["Features", "Pricing", "Creators", "Changelog", "Log in"], cta: "Try free", style: s("Nav 16"), brandStyle: s("Brand 24") });
+    const headRow = k.stack(top, { direction: "HORIZONTAL", gap: 40, align: "CENTER", justify: "SPACE_BETWEEN", name: "Head row" });
+    const head = k.stack(headRow, { width: 760, gap: 26, name: "Head" });
+    sticker(k, head, "PRICING", { fill: "night", ink: "onNight", style: s("Tag 14"), pad: [6, 14], rotate: -2, drop: 0, weight: 0, name: "Kicker" });
+    const pl = plate(k, head, { name: "Head plate", width: "HUG", rotate: -1.5, pad: [24, 30], shadow: 10 });
+    chromeText(k, pl, "{{brand.headline}}", { style: s("Section 64"), name: "Head words", size: 64 });
+    k.text(head, "Start on Free with 5 clips a week. Go Pro when you want every clip, no watermark and Auto-Bop on all of them. Prices in US dollars.", { style: s("Lead 22"), color: "text", name: "Lead" });
+    const swRow = k.stack(head, { direction: "HORIZONTAL", gap: 18, align: "CENTER", wrap: true, name: "Switch row" });
+    const toggle = k.instance(swRow, "Billing switch", { Left: "Monthly", Right: "Yearly" }, { name: "Billing toggle" });
+    k.setVariable(toggle, monthly, { toggle: true });
+    k.setVariable(toggle, yearly, { toggle: true });
+    sticker(k, swRow, "YEARLY SAVES 25%", { fill: "accent", ink: "onAccent", style: s("Tag 16"), rotate: 4, pad: [8, 16], name: "Save burst", drop: 4 });
+    const art = k.stack(headRow, { width: 340, height: 340, name: "Head art" });
+    halftone(k, art, 300, "pinkDeep", { name: "Head dots", absolute: { x: 40, y: 20 } });
+    const hb = burst(k, art, 300, "secondary", { name: "Head burst", points: 22, depth: 0.13, absolute: { x: 0, y: 30 } });
+    spin(k, hb, 1 / 22, DURATION);
+    burstSticker(k, art, [{ text: "7 DAYS\nOF PRO", style: s("Title 30") }, { text: "FREE \xB7 NO CARD", style: s("Tag 16") }], { size: 230, fill: "primary", ink: "onPrimary", name: "Trial burst", rotate: -8, absolute: { x: 70, y: 60 } });
+    spark(k, art, 70, "card", { outline: 3, name: "Head spark", absolute: { x: 260, y: 0 } });
+    const plans = k.stack(sheet, { direction: "HORIZONTAL", gap: 28, align: "MIN", name: "Plans" });
+    for (const p of PLANS) {
+      const card = k.stack(plans, { gap: 18, fill: p.fill, radius: 32, padding: 34, ...stickerEdge(k, 4, 10), name: "Plan" });
+      if (p.rotate) k.patch(card, { rotation: p.rotate });
+      k.text(card, p.name, { style: s("Title 30"), color: p.ink, name: "Plan name" });
+      k.text(card, p.pitch, { style: s("Body 17"), color: p.ink, name: "Pitch" });
+      const price = k.stack(card, { name: "Price" });
+      const block = (which) => {
+        const b = k.stack(price, { gap: 4, fill: p.fill, name: `${which} price` });
+        const row2 = k.stack(b, { direction: "HORIZONTAL", gap: 10, align: "MAX", name: "Amount row" });
+        k.text(row2, `$${which === "Monthly" ? p.month : p.year}`, { style: s("Price 72"), color: p.ink, autoWidth: true, name: "Amount" });
+        k.text(row2, p.month ? "a month" : "forever", { style: s("Body 17"), color: p.ink, autoWidth: true, name: "Per" });
+        k.text(b, which === "Monthly" ? p.month ? "Billed monthly. Cancel any time." : "No card, no trial clock." : p.yearly, { style: s("Small 14"), color: p.ink, name: "Billed" });
+        return b;
+      };
+      k.bindVariable(block("Monthly"), "visible", monthly);
+      k.bindVariable(block("Yearly"), "visible", yearly);
+      k.instance(card, p.name === "Free" ? "Button quiet" : "Call", { Label: p.button }, { name: "Plan button" });
+      const list = k.stack(card, { gap: 12, name: "Features" });
+      for (const f of p.features) {
+        const row2 = k.stack(list, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Feature" });
+        const t = k.stack(row2, { width: 26, height: 26, radius: 13, fill: p.fill === "night" ? "primary" : "night", align: "CENTER", justify: "CENTER", name: "Plan tick" });
+        k.vector(t, 13, 10, [tickPath(13, 10)], [], { name: "Tick mark", stroke: { color: p.fill === "primary" ? "primary" : "card", width: 3, cap: "ROUND", join: "ROUND" } });
+        k.text(row2, f, { style: s("Body 17"), color: p.ink, width: "FILL", name: "Feature words" });
+      }
+      if (p.name === "Pro") burstSticker(k, card, [{ text: "MOST\nPICKED", style: s("Title 24") }], { size: 150, fill: "accent", ink: "onAccent", name: "Picked burst", rotate: 12, absolute: { x: 250, y: -46 } });
+    }
+    const cmp = k.stack(sheet, { gap: 28, name: "Compare" });
+    sticker(k, cmp, "EVERY DETAIL", { fill: "night", ink: "onNight", style: s("Tag 14"), pad: [6, 14], rotate: -2, drop: 0, weight: 0, name: "Compare kicker" });
+    k.text(cmp, "What each plan cuts.", { style: s("Section 64"), color: "text", name: "Compare title" });
+    const table = k.stack(cmp, { gap: 0, fill: "card", radius: 32, padding: { top: 16, right: 28, bottom: 16, left: 28 }, ...stickerEdge(k, 4, 12), name: "Table" });
+    const COLW = 220;
+    s("Small 14");
+    s("Tag 14");
+    const row = (cells, o) => {
+      const r = k.stack(table, { direction: "HORIZONTAL", align: "CENTER", height: 64, name: o.head ? "Table head" : "Table row", ...o.i % 2 && !o.head ? { fill: k.tint("night", 0.05) } : {}, radius: 14, padding: { top: 0, right: 12, bottom: 0, left: 12 } });
+      cells.forEach((c, j) => {
+        const cell = k.stack(r, { direction: "HORIZONTAL", width: j === 0 ? "FILL" : COLW, height: 64, align: "CENTER", justify: j === 0 ? "MIN" : "CENTER", name: j === 0 ? "Row label" : j === 2 ? "Pro cell" : "Cell", ...j === 2 ? { fill: "lime" } : {} });
+        if (typeof c === "string" && c) k.text(cell, c, { style: o.head ? s("Title 20") : j === 0 ? s("Body 17") : s("Tag 16"), color: "onCard", ...j === 0 ? { width: "FILL" } : { autoWidth: true }, name: j === 0 ? "Row words" : "Cell words" });
+        else if (c === true) {
+          const t = k.stack(cell, { width: 28, height: 28, radius: 14, fill: "night", align: "CENTER", justify: "CENTER", name: "Cell tick" });
+          k.vector(t, 14, 10, [tickPath(14, 10)], [], { name: "Tick mark", stroke: { color: "primary", width: 3, cap: "ROUND", join: "ROUND" } });
+        } else if (c === false) k.rect(cell, 18, 4, "cardMuted", { radius: 2, name: "Cell dash" });
+      });
+    };
+    row(["", "Free", "Pro", "Studio"], { head: true, i: 0 });
+    TABLE.forEach((r, i) => row(r, { i }));
+    const faq = k.stack(sheet, { gap: 32, name: "FAQ" });
+    sticker(k, faq, "QUESTIONS", { fill: "night", ink: "onNight", style: s("Tag 14"), pad: [6, 14], rotate: -2, drop: 0, weight: 0, name: "FAQ kicker" });
+    k.text(faq, "Asked before paying.", { style: s("Section 64"), color: "text", name: "FAQ title" });
+    const qs = k.stack(faq, { direction: "HORIZONTAL", wrap: true, gap: 28, name: "FAQ list" });
+    k.patch(qs, { counterAxisSpacing: 28 });
+    const qFill = ["card", "chromeHi", "card", "chromeHi", "card", "chromeHi"];
+    FAQ.forEach(([q, a], i) => {
+      const item = k.stack(qs, { width: 381, gap: 10, fill: qFill[i], radius: 24, padding: 26, ...stickerEdge(k, 3, 6), name: "Question" });
+      k.patch(item, { rotation: [-1, 1, -0.5, 0.8, -1.2, 0.6][i] });
+      k.text(item, q, { style: s("Title 20"), color: "onCard", name: "Q" });
+      k.text(item, a, { style: s("Body 15"), color: "onCard", name: "A" });
+    });
+    const close = k.stack(sheet, { direction: "HORIZONTAL", gap: 32, align: "CENTER", justify: "SPACE_BETWEEN", fill: "night", radius: 40, padding: 56, name: "Close" });
+    k.patch(close, { effects: [{ type: "DROP_SHADOW", color: k.color("accent"), offset: { x: 14, y: 14 }, blur: 0, spread: 0, visible: true }] });
+    const cw = k.stack(close, { gap: 20, name: "Close words" });
+    chromeText(k, cw, "MAKE IT BOP.", { style: s("Section 48"), name: "Close title", size: 48 });
+    k.text(cw, `${FIZZ.trial} Your first three clips are ready in about 38 seconds.`, { style: s("Lead 22"), color: "onNight", name: "Close line" });
+    k.instance(close, "Call", { Label: "Try Pro free for 7 days" }, { name: "Close button" });
+    footer(k, sheet, {
+      about: FIZZ.pitch,
+      legal: "\xA9 2026 {{brand.name}} Inc. Prices in US dollars, before sales tax. Yearly plans are billed once, up front.",
+      columns: [["Product", ["Auto-Bop", "Captions", "Sticker packs", "Changelog"]], ["Creators", ["Creator fund", "Templates", "Community"]], ["Help", ["Docs", "Status", "Privacy"]]],
+      brandStyle: s("Brand 24"),
+      headStyle: s("Tag 14"),
+      linkStyle: s("Small 14"),
+      ruleColor: "text"
+    });
+    k.cues(sheet, cues);
+    respond(k, sheet, s, {
+      stack: ["Head row", "Plans", "Close", "Footer columns"],
+      restyle: { ...WEB_STEPS, "Tag 16": { mobile: "Tag 12" } },
+      hide: { tablet: ["Head art"], mobile: ["Nav links", "Head art"] },
+      gap: { tablet: 88, mobile: 64 },
+      tweak: (kit, id, size) => fit(kit, id, size)
+    });
+    fit(k, sheet, "desktop");
+    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;
+  }
+});
+function fit(k, root, size) {
+  const cw = CONTENT[size], narrow = size === "tablet" || size === "mobile";
+  for (const n of k.named(root, "Head")) k.patch(n, narrow ? { layoutSizingHorizontal: "FILL" } : { width: size === "laptop" ? 700 : 760 });
+  relight(k, root, "Head words", size === "mobile" ? 36 : size === "tablet" ? 48 : 64);
+  relight(k, root, "Close title", size === "mobile" ? 36 : 48);
+  const colW = size === "desktop" ? 220 : size === "laptop" ? 200 : size === "tablet" ? 120 : 62;
+  for (const name of ["Cell", "Pro cell"]) for (const n of k.named(root, name)) k.patch(n, { width: colW, layoutSizingHorizontal: "FIXED" });
+  if (narrow) {
+    for (const n of k.named(root, "Plan")) k.patch(n, { layoutSizingHorizontal: "FILL", padding: size === "mobile" ? { top: 26, right: 22, bottom: 26, left: 22 } : { top: 30, right: 30, bottom: 30, left: 30 } });
+    for (const n of k.named(root, "Close")) k.patch(n, { padding: { top: 40, right: 28, bottom: 40, left: 28 }, counterAxisAlignItems: "MIN" });
+    for (const n of k.named(root, "Question")) k.patch(n, { layoutSizingHorizontal: "FIXED", width: size === "mobile" ? cw : Math.floor((cw - 28) / 2) });
+    for (const n of k.named(root, "Picked burst")) k.patch(n, size === "mobile" ? { x: 200, y: -86, scaleX: 0.8, scaleY: 0.8 } : { x: 520 });
+  }
+  if (size === "laptop") for (const n of k.named(root, "Question")) k.patch(n, { layoutSizingHorizontal: "FIXED", width: Math.floor((cw - 56) / 3) });
+  if (size === "mobile") {
+    for (const n of k.named(root, "Plans")) k.patch(n, { itemSpacing: 76 });
+    for (const n of k.named(root, "Table")) k.patch(n, { padding: { top: 10, right: 8, bottom: 10, left: 8 } });
+    for (const n of [...k.named(root, "Table row"), ...k.named(root, "Table head")]) k.patch(n, { padding: { top: 0, right: 4, bottom: 0, left: 6 } });
+    for (const n of k.named(root, "Row words")) k.restyle(n, "Small 14");
+    for (const h of k.named(root, "Table head")) for (const n of k.named(h, "Cell words")) k.restyle(n, "Tag 14");
+  }
+  if (size === "tablet") compactNav(k, root, ["Changelog", "Log in"], 20);
+}
+
+export {
+  style_maximal_pricing_default
+};

package/dist/chunks/chunk-4CTT5J4F.js

@@ -0,0 +1,122 @@
+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 {
+  registerMediaSizes
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/web/portfolio-art.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var ART = {
+  "studio-00": { hash: "6fed8b9da258481d083bb23f61007456", width: 1248, height: 832, subject: "a chrome mask dissolving into liquid mercury, magenta and teal neon" },
+  "studio-01": { hash: "f8a57400c4477fd76e17ed7baacf37a6", width: 1248, height: 832, subject: "a giant glowing jellyfish drifting through a flooded subway station" },
+  "studio-02": { hash: "5052fe8c700d4554860122cb823ce022", width: 1248, height: 832, subject: "a skater frozen mid-air above a sea of point-cloud particles" },
+  "studio-03": { hash: "a8e5ae6000bfcf3bde51b2cd8056a675", width: 1248, height: 832, subject: "a porcelain face cracking open to reveal a galaxy, gold kintsugi lines" },
+  "studio-04": { hash: "21ff196db301796a4de9896374de2813", width: 1248, height: 832, subject: "a carnival of iridescent insects swarming a lone dancer in red smoke" },
+  "studio-05": { hash: "10385d8f86a95ead39b3dc9a29e2c11d", width: 1248, height: 832, subject: "a monolithic stone head half sunk in desert dunes at blue hour" },
+  "studio-06": { hash: "61bb68e6adbab3967b731a79a26140f5", width: 1248, height: 832, subject: "a fur-covered sculpture breathing under ultraviolet light" },
+  "studio-07": { hash: "788e71be1a0e88b6781dcc1d53065dbc", width: 1248, height: 832, subject: "an underwater ballroom with drowned chandeliers and koi" },
+  "studio-08": { hash: "3639cb26548a8c0d413d28be745c5773", width: 1248, height: 832, subject: "a burning paper crown floating over black water" },
+  "studio-09": { hash: "21c501ded84edfd9e714a0bbe5aa3eed", width: 1248, height: 832, subject: "a crystalline wolf made of refracted light in a snowy forest" },
+  "studio-10": { hash: "f491f4651b93cbbaf292c2a6213ae3ad", width: 1248, height: 832, subject: "a retro-futurist racing car melting into rainbow wax" },
+  "studio-11": { hash: "9ea177fcb4bc919c679d5776cde16324", width: 1248, height: 832, subject: "a cathedral of tangled glowing cables, a figure praying in the centre" },
+  "folio-00": { hash: "2e58b5ab4fd3306acc6f898af36f2c2e", width: 1248, height: 832, subject: "coffee packaging bags in sage green and cream on a stone plinth" },
+  "folio-01": { hash: "5c5cc20b094bf6df844f2cf9f90a9a01", width: 1248, height: 832, subject: "a set of risograph event posters pinned to a concrete wall" },
+  "folio-02": { hash: "6ee9a02c31a285121693b98b6f22a9c3", width: 1248, height: 832, subject: "a mobile banking app shown on two phones lying on terracotta paper" },
+  "folio-03": { hash: "00f68f7ec307a7bd098671b69fc9e2f9", width: 1248, height: 832, subject: "a ceramic skincare bottle range in soft pink with shadows of palm leaves" },
+  "folio-04": { hash: "77192466986c6c77057a266cf795a2bd", width: 1248, height: 832, subject: "a bicycle brand: a matte orange city bike against a blue wall" },
+  "folio-05": { hash: "edf7726fa64548124d762e338068c276", width: 1248, height: 832, subject: "tote bags and enamel pins for a public library rebrand" },
+  "folio-06": { hash: "9d445222ea3cc30a8ba8a4676fbcb73c", width: 1248, height: 832, subject: "a wine label series in bold geometric shapes on dark bottles" },
+  "folio-07": { hash: "846ed9440fe659002274522ae11f4c71", width: 1248, height: 832, subject: "a museum wayfinding sign system in yellow, photographed in a hallway" },
+  "index-00": { hash: "58b8788310eaa6e659f57591baac15bc", width: 832, height: 1248, subject: "red circle and black bars, jazz festival style" },
+  "index-01": { hash: "bb494bc964952f36e9cd1004b9498c85", width: 832, height: 1248, subject: "overlapping blue and orange halftone gradients" },
+  "index-02": { hash: "5428dadb90798bb0869b54db4b4efc5d", width: 832, height: 1248, subject: "a cut-paper collage of birds in black and acid green" },
+  "index-03": { hash: "f87ae9f6697a16c32f1251e4f5291366", width: 832, height: 1248, subject: "stacked geometric letters-like shapes in cream and brown" },
+  "index-04": { hash: "3692d64efb28ecd7a70129e7e7dbfb85", width: 832, height: 1248, subject: "a grid of dots fading from violet to yellow" },
+  "index-05": { hash: "42452ed2929c7eabfdf706f36f679920", width: 832, height: 1248, subject: "torn photographs of the sea combined with black ink brush strokes" },
+  "index-06": { hash: "6901534124f672c13ed00ea653877d85", width: 832, height: 1248, subject: "a single huge serif ampersand-like shape in silver foil on navy" },
+  "index-07": { hash: "d657b731c4b5f125dd3b6ea22992b605", width: 832, height: 1248, subject: "a pattern of interlocking arrows in red, white and pink" },
+  "photo-00": { hash: "7b90da5661da31da8e936fc54cc2f174", width: 1248, height: 832, subject: "fishermen hauling nets at dawn on a misty lake" },
+  "photo-01": { hash: "3856190f14272ff6b40d376769a0df68", width: 832, height: 1248, subject: "an old woman reading a newspaper in a sunlit Lisbon doorway" },
+  "photo-02": { hash: "46645dbe75259ec1528c4c9d47f85adc", width: 1248, height: 832, subject: "salt flats with a single red truck crossing, wide shot" },
+  "photo-03": { hash: "8684cd2c00ba06c91e3db74ae4900faf", width: 832, height: 1248, subject: "a boy jumping off a pier into green water" },
+  "photo-04": { hash: "45308ec93f092a06919fcad9a40e7b23", width: 1248, height: 832, subject: "a night market lit by hanging bulbs, steam rising from food stalls" },
+  "photo-05": { hash: "74c13ccbc79fd37d37e4d1882b32bb45", width: 832, height: 1248, subject: "camels resting in the shade of a mud-brick wall" },
+  "photo-06": { hash: "8b9fc78aedfa145fd53a87ff74fe7d9f", width: 1248, height: 832, subject: "a mountain road with switchbacks under storm clouds" },
+  "photo-07": { hash: "cdad98bdbbce228bb151396521a270f1", width: 832, height: 1248, subject: "laundry lines between apartment blocks in Naples" },
+  "photo-08": { hash: "bb3f37275f374e7a9a21bd957d347596", width: 1248, height: 832, subject: "a lone horse in a snowy field at dusk" },
+  "photo-09": { hash: "512f86490817f9e594ce1251b22a9e43", width: 832, height: 1248, subject: "a tailor at his sewing machine, window light" },
+  "photo-10": { hash: "4d1563e0b7ed06fec54f0855cd02e0f7", width: 1248, height: 832, subject: "tea pickers on a terraced hillside in morning fog" },
+  "photo-11": { hash: "680e1fa043b90a3adf734a147ae5ca81", width: 832, height: 1248, subject: "a woman cycling past a pastel wall with a long shadow" },
+  "editorial-00": { hash: "775f0888f600c2057ed40c61dc6038d4", width: 832, height: 1248, subject: "a model in a sculptural ivory coat on a windswept beach" },
+  "editorial-01": { hash: "b9ce7fddef89e499eab151377b8efc5a", width: 832, height: 1248, subject: "a portrait in a velvet green suit against an oxblood backdrop" },
+  "editorial-02": { hash: "68e944d1f0c4e69e42a53c00f9a1f9aa", width: 832, height: 1248, subject: "two models in tailored linen walking through a white villa courtyard" },
+  "editorial-03": { hash: "cd6f2cf7b32a1a2f0345ffc56a79bb63", width: 832, height: 1248, subject: "a close-up of hands with silver rings holding a lemon" },
+  "editorial-04": { hash: "2710ffd544bc8d1dbf335d2a55669df9", width: 832, height: 1248, subject: "a model in a red silk dress on a spiral staircase, shot from above" },
+  "editorial-05": { hash: "4d2697840a40c4371c776ad0547d9f51", width: 832, height: 1248, subject: "a man in a camel overcoat in an empty brutalist plaza" },
+  "editorial-06": { hash: "88a216c7a4fe9733d2be998ae32ada6c", width: 832, height: 1248, subject: "a model lying in a field of wild poppies, summer dress" },
+  "editorial-07": { hash: "1f2292a29f6510daccd69017cc759b57", width: 832, height: 1248, subject: "a black-and-white portrait with a wide-brimmed hat and strong shadows" },
+  "sketch-00": { hash: "5388a3af3b1df8760498fee8fb2b84c4", width: 1024, height: 1024, subject: "a fox reading a map under a lamp in a cosy burrow" },
+  "sketch-01": { hash: "98f1103cd21c6aaba32bc32b56d0537c", width: 1024, height: 1024, subject: "a cliffside village with a red funicular railway" },
+  "sketch-02": { hash: "81da902c3cf239b1ebca378b877b77fe", width: 1024, height: 1024, subject: "a girl and a giant friendly whale sharing an umbrella in the rain" },
+  "sketch-03": { hash: "bb2a22fb13541c7fc22faed0c04a7ba1", width: 1024, height: 1024, subject: "a market stall of strange fruits sold by a frog" },
+  "sketch-04": { hash: "42c5e5de5700eabecafefa4d67f3be99", width: 1024, height: 1024, subject: "a lighthouse keeper feeding seagulls at sunset" },
+  "sketch-05": { hash: "ce119b7e65ff26950033156097d37790", width: 1024, height: 1024, subject: "a bear knitting a scarf by a wood stove" },
+  "sketch-06": { hash: "220e5cf28d2eebfaf33cf27a65631d6f", width: 1024, height: 1024, subject: "a night train crossing a viaduct under the stars" },
+  "sketch-07": { hash: "0faae75020594afa1815f55de606ea4e", width: 1024, height: 1024, subject: "children flying paper kites shaped like fish" },
+  "cube-00": { hash: "b03fbb96fa047043e9d3da3f5a93acc1", width: 1248, height: 832, subject: "a matte white wireless speaker with a fabric band on a travertine block" },
+  "cube-01": { hash: "e1975280716bda08f14dd68c655eed63", width: 1248, height: 832, subject: "a translucent amber desk lamp with a brass hinge" },
+  "cube-02": { hash: "e19c4bfc31b284d386c75116bf4d8bb8", width: 1248, height: 832, subject: "a modular sage-green kitchen mixer" },
+  "cube-03": { hash: "511014ad56ef3a2fee528744f6e399ea", width: 1248, height: 832, subject: "an aluminium electric kettle with a walnut handle" },
+  "cube-04": { hash: "43a39e7146d1597b1622c8d66b363983", width: 1248, height: 832, subject: "a pair of over-ear headphones in deep blue felt" },
+  "cube-05": { hash: "a054ad5091c63663d07f36f4ae8c0e25", width: 1248, height: 832, subject: "a sculptural black chair made of a single bent sheet" },
+  "flip-00": { hash: "ef5087e22db9896c3b94c88fc16283dd", width: 1024, height: 1024, subject: "a sleepy astronaut cat with a fishbowl helmet" },
+  "flip-01": { hash: "62ed5145e6e1e80dd97c897f9b32786b", width: 1024, height: 1024, subject: "a tiny knight made of a strawberry" },
+  "flip-02": { hash: "d6544f436c1ee4289ff1ec9173e90e1c", width: 1024, height: 1024, subject: "a grumpy cactus wearing a tiny sombrero and boots" },
+  "flip-03": { hash: "77b2e1f2e31ae30d17326044d3ce44da", width: 1024, height: 1024, subject: "a robot gardener with a watering-can head" },
+  "flip-04": { hash: "40bb09b9fc72cde8af1d95a7ff11c6b3", width: 1024, height: 1024, subject: "a ghost chef holding a steaming pie" },
+  "flip-05": { hash: "0f1c26fe81dc957ffbf179bea7bd110e", width: 1024, height: 1024, subject: "a frog DJ with oversized headphones" },
+  "flip-06": { hash: "852e34cdf54c6612da53f3592666b7b7", width: 1024, height: 1024, subject: "a mushroom wizard with a glowing staff" },
+  "flip-07": { hash: "09118c8d3befe3d4ce290cb41144cd36", width: 1024, height: 1024, subject: "a penguin mail carrier on roller skates" },
+  "depth-00": { hash: "e50f95062e6c82e231794e0b8a68d4df", width: 1248, height: 832, subject: "a woman alone in a neon-lit laundromat at 3am" },
+  "depth-01": { hash: "7565f46a12e628c40c570118ee93c353", width: 1248, height: 832, subject: "a lighthouse beam cutting through heavy rain at night" },
+  "depth-02": { hash: "b8040d25a9c7511165448a3c44970511", width: 1248, height: 832, subject: "two silhouettes on a rooftop facing a city at blue hour" },
+  "depth-03": { hash: "05e889e3a5367e4f9fc0aed64d7783ab", width: 1248, height: 832, subject: "a long empty hotel corridor with green carpet and one open door" },
+  "depth-04": { hash: "92d9ad524729ba53085bacd28aa5ce70", width: 1248, height: 832, subject: "a car driving through a tunnel of autumn trees, headlights on" },
+  "depth-05": { hash: "895f2d7ab2d857fbe803fd390649267e", width: 1248, height: 832, subject: "a dancer in a spotlight on an empty theatre stage" },
+  "deck-00": { hash: "cf20f4d77b064a7cd2156d9aef477162", width: 1024, height: 1024, subject: "a sun setting into a sea of hands, orange and violet" },
+  "deck-01": { hash: "adbc6e3ebc1e8b6f5b512bb6ea50ee00", width: 1024, height: 1024, subject: "a tiger made of folded paper in jungle green" },
+  "deck-02": { hash: "748998ef63b503e3f6c6eb639951c179", width: 1024, height: 1024, subject: "a cassette tape blooming with flowers on pink" },
+  "deck-03": { hash: "619390e0ad4503fc9966dda7762b4c2e", width: 1024, height: 1024, subject: "a lone palm tree on a moon, duotone blue" },
+  "deck-04": { hash: "c2952d9a6f8b7dace82276a9b22c3a1b", width: 1024, height: 1024, subject: "a heart-shaped cloud raining gold coins" },
+  "deck-05": { hash: "f659229f937fa5b851c060a52374f97f", width: 1024, height: 1024, subject: "an eye inside a pyramid of mirrors, black and silver" },
+  "deck-06": { hash: "275b1428676d05cd8f954768866df229", width: 1024, height: 1024, subject: "two koi forming a circle on a red background" },
+  "deck-07": { hash: "98c7ab07395155106709b918417f872b", width: 1024, height: 1024, subject: "a desert highway leading into a giant vinyl record" },
+  "reel-00": { hash: "1365c498f3bf0b4aadc64863337019d8", width: 1248, height: 832, subject: "a colossal stone giant rising from the ocean beside a lighthouse" },
+  "reel-01": { hash: "b8581d59ba3a4e02b6a07182ddaa7d48", width: 1248, height: 832, subject: "a spaceship landing in a field of sunflowers at golden hour" },
+  "reel-02": { hash: "9f33e750ab755fbca5739adf4a3a9846", width: 1248, height: 832, subject: "a city street flooding with luminous blue water in slow motion" },
+  "reel-03": { hash: "feaea45225dc2c2a69c35f4ffdf21daa", width: 1248, height: 832, subject: "a dragon of smoke coiling around a skyscraper at night" },
+  "reel-04": { hash: "08c2b20c106b976653d756c42a8d2175", width: 1248, height: 832, subject: "an astronaut walking across a crystal canyon on another planet" },
+  "reel-05": { hash: "2b3099d1d6348a1e344ad255b2ab1682", width: 1248, height: 832, subject: "a forest where the trees are made of glowing fibre optics" },
+  "arch-00": { hash: "68dbbfc39067354c2bb1c25e14e5bb09", width: 1248, height: 832, subject: "a concrete house cantilevered over a forest ravine" },
+  "arch-01": { hash: "3ecf5e8caef075a95cea1d75f16c25bb", width: 832, height: 1248, subject: "a spiral stair of white plaster lit by a skylight" },
+  "arch-02": { hash: "dc661c4ede2bd8ebd256c4cbd70ad2b0", width: 1248, height: 832, subject: "a timber library interior with tall arched windows" },
+  "arch-03": { hash: "6bde22b3ff5680e5283cb32d8d58dd75", width: 1248, height: 832, subject: "a brick courtyard housing block with planted balconies" },
+  "arch-04": { hash: "d7c048e28e8a25cb31c3dbf9154190fa", width: 832, height: 1248, subject: "a minimal chapel of rammed earth with a single slit of light" },
+  "arch-05": { hash: "f9e632bb76c808df56cbbe82d28e4b52", width: 1248, height: 832, subject: "a glass pavilion on a lake at dusk, interior lights glowing" },
+  "arch-06": { hash: "ac2abbb0662c07d3f65cbd120b076028", width: 1248, height: 832, subject: "a terracotta-tiled school roofscape in the hills" },
+  "arch-07": { hash: "f1dcb29122030ec0090f73cdb7154629", width: 832, height: 1248, subject: "a detail of a perforated copper facade with afternoon shadows" }
+};
+var art = (id) => `media://${ART[id].hash}`;
+registerMediaSizes(Object.entries(ART).map(([id, a]) => [art(id), a]));
+
+export {
+  ART,
+  art
+};