@popcraft/kit 0.35.0 → 0.35.2

package/dist/chunks/chunk-NQ5KZTCT.js

@@ -0,0 +1,78 @@
+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 {
+  standardPortfolio
+} from "./chunk-2H23L4J2.js";
+import {
+  defineTemplate
+} from "./chunk-76OE66SX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-APZ7CG5P.js";
+
+// templates/src/web/portfolio-depth-tunnel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var WORK = [
+  { title: "Spin Cycle", client: "Low Hum Pictures", year: "2026", kind: "Feature film \xB7 Director of photography", cover: "depth-00", summary: "A night-shift drama that lives in one laundromat from midnight to dawn.", story: "Shot on anamorphic lenses with practical light only: the dryers and the vending machine. Premiered at Rotterdam.", credits: "Director \u2014 Ana Liu \xB7 DP \u2014 Theo Marsh \xB7 Colour \u2014 Grade Room" },
+  { title: "Keeper of the Light", client: "North Sea Films", year: "2025", kind: "Short film \xB7 DP", cover: "depth-01", summary: "A lighthouse in a storm and the woman who will not leave it.", story: "Two nights of rain towers on a real headland; the beam is the lighthouse\u2019s own.", credits: "Director \u2014 Ruth Ward \xB7 DP \u2014 Theo Marsh" },
+  { title: "Blue Hour", client: "Arcadia Records", year: "2025", kind: "Music video \xB7 DP", cover: "depth-02", summary: "Two silhouettes on a rooftop for the twenty minutes the city is blue.", story: "One take a night, five nights, the best of the five.", credits: "Director \u2014 Kemi Ade \xB7 DP \u2014 Theo Marsh" },
+  { title: "Room 214", client: "Halcyon Hotels", year: "2024", kind: "Commercial \xB7 DP", cover: "depth-03", summary: "A green-carpeted corridor and the one door left open.", story: "A hotel brand film that plays like the first minute of a thriller.", credits: "Director \u2014 Ana Liu \xB7 DP \u2014 Theo Marsh \xB7 Agency \u2014 Doorman" },
+  { title: "Leaf Tunnel", client: "Vellum Motors", year: "2024", kind: "Commercial \xB7 DP", cover: "depth-04", summary: "A car through a tunnel of autumn trees, headlights on at four in the afternoon.", story: "A car-to-car rig and a week of waiting for the leaves to turn.", credits: "Director \u2014 Oskar Lind \xB7 DP \u2014 Theo Marsh" },
+  { title: "Solo", client: "City Ballet", year: "2023", kind: "Dance film \xB7 DP", cover: "depth-05", summary: "One dancer, one spotlight, an empty theatre.", story: "Filmed in the hour between the matinee and the evening show.", credits: "Director, choreography \u2014 Mira Sol \xB7 DP \u2014 Theo Marsh" }
+];
+var portfolio_depth_tunnel_default = defineTemplate({
+  id: "web-portfolio-depth-tunnel",
+  meta: {
+    name: "Depth push portfolio",
+    description: "A cinematographer\u2019s portfolio where pages travel in depth: open a film and the page recedes into the dark as the next arrives from in front; go back and it pulls the other way. Wide frame grabs two across on black, a page per film and a bio. The move is drawn on the GPU with WebGPU, in CSS 3D elsewhere. The films are a collection you edit as a table. Desktop, tablet and phone",
+    category: "web",
+    tags: ["portfolio", "3d", "depth", "transition", "webgpu", "cinematography", "film", "dark", "cms", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["portfolio"],
+    created: "2026-10-05",
+    updated: "2026-10-05"
+  },
+  breakpoints: true,
+  build: () => standardPortfolio({
+    name: "Depth push",
+    brand: { paper: "#0B0C0E", text: "#ECE8E1", onPaper: "#959089", primary: "#E5B560", onPrimary: "#0B0C0E", card: "#0B0C0E", line: "#24262A" },
+    fields: { name: "Theo Marsh", email: "theo@theomarsh.film" },
+    styles: {
+      "Wordmark 18": { size: 18, fontWeight: 600, letterSpacing: 2, lineHeight: 24 },
+      "Small 13": { size: 13, fontWeight: 500, letterSpacing: 1.2, lineHeight: 18 },
+      "Meta 14": { size: 14, fontWeight: 400, lineHeight: 20 },
+      "Title 20": { size: 20, fontWeight: 500, letterSpacing: -0.2, lineHeight: 28 },
+      "Lead 24": { size: 24, fontWeight: 400, lineHeight: 34 },
+      "Body 17": { size: 17, fontWeight: 400, lineHeight: 28 },
+      "Display 72": { size: 72, fontWeight: 500, letterSpacing: -2, lineHeight: 76 },
+      "Display 40": { size: 40, fontWeight: 500, letterSpacing: -1, lineHeight: 46 }
+    },
+    type: { wordmark: "Wordmark 18", small: "Small 13", meta: "Meta 14", title: "Title 20", lead: "Lead 24", body: "Body 17", display: "Display 72", displaySmall: "Display 40" },
+    projects: WORK,
+    go: "DEPTH_PUSH",
+    back: "DEPTH_PULL",
+    links: [["work", "FILMS"], ["studio", "BIO"]],
+    lead: { kicker: "DIRECTOR OF PHOTOGRAPHY \xB7 LONDON", headline: "Light for stories told at night.", intro: "Theo Marsh shoots features, shorts, music videos and commercials, mostly after dark." },
+    grid: { cols: 2, gap: 24, ratio: 0.5625, radius: 4, meta: "{{item.client}} \xB7 {{item.year}}", tablet: 1 },
+    project: { ratio: 0.5625, kicker: "FILM", more: { cols: 3, ratio: 0.5625, label: "MORE FILMS" } },
+    studio: {
+      statement: "I make pictures with whatever light is already there, and a little more.",
+      about: "Twelve years behind the camera: assistant on features in London, then DP on shorts that went to Berlin, Rotterdam and Sundance. I own a full anamorphic package and work with the same gaffer on everything.",
+      picture: "depth-02",
+      ratio: 0.42,
+      services: ["Features and shorts", "Music videos", "Commercials", "Camera package with crew"],
+      clients: "Low Hum Pictures, North Sea Films, Arcadia Records, Halcyon Hotels, Vellum Motors and City Ballet.",
+      contact: "Represented by Frame Agency."
+    },
+    elsewhere: "VIMEO \xB7 IMDB \xB7 INSTAGRAM"
+  })
+});
+
+export {
+  portfolio_depth_tunnel_default
+};

package/dist/chunks/chunk-NQKFEB2Y.js

@@ -0,0 +1,274 @@
+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 {
+  KITTY,
+  WEB_STEPS,
+  blink,
+  byName,
+  chip,
+  mochi,
+  pastelBrand,
+  pastelButton,
+  pillowCard,
+  puffy,
+  sectionHead,
+  softGround,
+  springIn,
+  ts,
+  wave
+} from "./chunk-OQKRVXUO.js";
+import {
+  tick
+} from "./chunk-B2BUY5UR.js";
+import {
+  compactNav,
+  footer,
+  respond
+} from "./chunk-354CC3N2.js";
+import {
+  nav,
+  page
+} from "./chunk-I5MY7NSK.js";
+import {
+  cutOn
+} from "./chunk-CCLRLSXO.js";
+import {
+  defineTemplate
+} from "./chunk-76OE66SX.js";
+import {
+  Kit,
+  preset
+} from "./chunk-G63TLLXA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-APZ7CG5P.js";
+
+// templates/src/web/style-pastel-pricing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Pastel SaaS pricing page";
+var PLANS = [
+  { name: "Free", pitch: "For two people and one shared kitty.", month: 0, year: 0, fill: "mint", cta: "Start free", features: ["One shared kitty", "Bill splitting, any way", "Two savings jars", "Settle up in one tap"] },
+  { name: "Plus", pitch: "For couples saving toward something big.", month: KITTY.plus, year: KITTY.plusYear, fill: "peach", featured: true, cta: "Try Plus free for 30 days", features: ["Everything in Free", "Unlimited jars", "Round-ups from any card", "Monthly money recap", "Recurring bills, split automatically"] },
+  { name: "Household", pitch: "For flatmates, or a family of four.", month: KITTY.household, year: KITTY.householdYear, fill: "sky", cta: "Start Household", features: ["Everything in Plus", "Up to four people", "House rules for shared bills", "Export to a spreadsheet"] }
+];
+var TABLE = [
+  ["People in a kitty", "2", "2", "Up to 4"],
+  ["Savings jars", "2", "Any", "Any"],
+  ["Bill splitting", "yes", "yes", "yes"],
+  ["Round-ups", "no", "yes", "yes"],
+  ["Recurring bills", "no", "yes", "yes"],
+  ["Monthly recap", "no", "yes", "yes"],
+  ["House rules", "no", "no", "yes"],
+  ["Spreadsheet export", "no", "no", "yes"]
+];
+var FAQ = [
+  ["Is Kitty a bank?", "No. Money in jars is held with our banking partner and protected up to $250,000. Kitty is the app on top that keeps the tally."],
+  ["Do we both have to pay?", "No. One plan covers the whole kitty. Whoever starts it pays, and you can split the subscription like any other bill."],
+  ["What happens if we stop paying for Plus?", "Your kitty moves to Free. Every jar keeps its money; you just can\u2019t add a third one until you go back."],
+  ["Can we switch between monthly and yearly?", "Any time. Yearly is $48 for Plus, four months free, and what\u2019s left of your month is credited."],
+  ["What if we break up?", "It happens. Either of you can close the kitty; the balance is settled to the last cent and each gets their share back."]
+];
+var COL = { desktop: 190, laptop: 170, tablet: 110, mobile: 58 };
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Headline", preset: "words-in", at: 80, params: { duration: 460, amount: 50 } },
+  { layer: "Lead", preset: "rise-in", at: 320, params: { duration: 450 } },
+  { layer: "Switch row", preset: "rise-in", at: 440, params: { duration: 400 } },
+  springIn("Plan", 520, { from: 0.7, stagger: 110 }),
+  cutOn("Table row", 1400, 110),
+  { layer: "Close button", preset: "pulse", at: 3400, params: { duration: 800, amount: 0.05 } }
+];
+var counts = [
+  { layer: "Plus amount", at: 640, duration: 900, counter: { from: 0, to: KITTY.plus, prefix: "$" } },
+  { layer: "Household amount", at: 750, duration: 900, counter: { from: 0, to: KITTY.household, prefix: "$" } }
+];
+var style_pastel_pricing_default = defineTemplate({
+  id: "web-saas-style-pastel-pricing",
+  meta: {
+    name: NAME,
+    description: "A pricing page in the pastel soft UI look whose monthly / yearly switch works in present mode: a variable toggle flips every price at once while the knob springs across. Three plans on pillowy pastel cards with the middle one raised and a cat mascot sitting on it, a comparison table with drawn ticks, five questions, a closing call and a footer; the plans spring in, prices count up and the table fills in on load. Desktop to phone",
+    category: "web",
+    tags: ["pricing", "plans", "toggle", "interactive", "variables", "comparison table", "faq", "saas", "pastel", "soft ui", "playful", "mascot", "fintech", "consumer app", "counter", "animation", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["pricing", "launch", "comparison"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, preset("web-desktop"));
+    k.quantizeGeometry = true;
+    pastelBrand(k, { tagline: "Free for two. Plus when you want more." });
+    const monthly = k.variable("Billing", "monthly", "BOOLEAN", true);
+    const yearly = k.variable("Billing", "yearly", "BOOLEAN", false);
+    pastelButton(k, "Button", { style: ts(k, "title", 17), label: "Start free", pad: [14, 24], d: 0.7 });
+    pastelButton(k, "Button quiet", { style: ts(k, "title", 17), label: "Start free", pad: [14, 24], d: 0.7, fill: "card", ink: "onCard" });
+    const sOn = ts(k, "title", 17), sOff = ts(k, "soft", 17);
+    k.variantSet("Billing switch", "Billing", ["Monthly", "Yearly"], {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      gap: 14,
+      align: "CENTER",
+      padding: { top: 8, right: 18, bottom: 8, left: 18 },
+      fill: "card",
+      radius: 999,
+      description: "Monthly or yearly billing: click to switch, and the knob springs 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: state === "Monthly" ? sOn : sOff, color: state === "Monthly" ? "onCard" : "cardMuted", autoWidth: true });
+      const track = k.stack(id, { direction: "HORIZONTAL", width: 64, height: 36, radius: 999, padding: 4, align: "CENTER", justify: state === "Yearly" ? "MAX" : "MIN", fill: "primary", name: "Track" });
+      k.ellipse(track, 28, "card", { name: "Knob" });
+      k.propText(id, "Right", { style: state === "Yearly" ? sOn : sOff, color: state === "Yearly" ? "onCard" : "cardMuted", autoWidth: true });
+    });
+    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;
+    page(k, sheet, { gap: 104, top: 28 });
+    k.timeline(sheet, { duration: 6e3, fps: 30 });
+    softGround(k, sheet, 1440, 900, { loop: 6e3, seed: 11, sparkles: 6, scale: 0.6 });
+    for (const n of k.named(sheet, "Blob 1")) k.patch(n, { x: -340, y: -420 });
+    const top = k.stack(sheet, { gap: 64, name: "Top" });
+    nav(k, top, { links: ["How it works", "Jars", "Pricing", "Sign in"], cta: "Get the app", style: ts(k, "soft", 16), brandStyle: ts(k, "title", 22) });
+    const head = k.stack(top, { direction: "HORIZONTAL", gap: 64, align: "MAX", name: "Header" });
+    const title = k.stack(head, { gap: 22, name: "Header title" });
+    k.text(title, "PRICING", { style: ts(k, "label", 14), color: "onPaper", name: "Eyebrow" });
+    k.text(title, "{{brand.tagline}}", { style: ts(k, "display", 84), color: "text", name: "Headline" });
+    const billing = k.stack(head, { width: 420, gap: 22, name: "Header billing" });
+    k.text(billing, "One plan covers the whole kitty, not each person. Pay by the year and four months are on us.", { style: ts(k, "body", 21), color: "onPaper", name: "Lead" });
+    const sw = k.stack(billing, { direction: "HORIZONTAL", gap: 14, align: "CENTER", wrap: true, name: "Switch row" });
+    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 });
+    chip(k, sw, "4 months free yearly", { style: ts(k, "soft", 15), fill: "butter", name: "Saving" });
+    const plans = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, align: "MAX", name: "Plans" });
+    let m;
+    for (const p of PLANS) {
+      const col = k.stack(plans, { gap: 0, name: "Plan column" });
+      if (p.featured) {
+        const perch = k.stack(col, { height: 120, align: "CENTER", name: "Perch" });
+        m = mochi(k, perch, 124, { absolute: { x: 230, y: 0 } });
+      }
+      const c = pillowCard(k, col, { gap: 18, padding: 32, radius: 40, depth: p.featured ? 1.3 : 0.9, name: "Plan", ...p.featured ? { stroke: { color: "primary", width: 4, align: "INSIDE" } } : {} });
+      const planHead = k.stack(c, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Plan head" });
+      k.ellipse(planHead, 26, p.fill, { name: "Plan dot", effects: puffy(0.6) });
+      k.text(planHead, p.name, { style: ts(k, "title", 28), color: "onCard", autoWidth: true, name: "Plan name" });
+      k.text(c, p.pitch, { style: ts(k, "body", 17), color: "cardMuted", name: "Pitch" });
+      const price = k.stack(c, { name: "Price" });
+      const block = (which) => {
+        const b = k.stack(price, { gap: 4, name: `${which} price` });
+        k.text(b, which === "Monthly" ? `$${p.month}` : `$${p.year}`, { style: ts(k, "figure", 64), color: "onCard", name: which === "Monthly" ? `${p.name} amount` : `${p.name} yearly amount` });
+        k.text(b, !p.month ? "free, for as long as you like" : which === "Monthly" ? "a month for the kitty" : `a year: you save $${p.month * 12 - p.year}`, { style: ts(k, "soft", 15), color: "cardMuted", name: "Billed" });
+        return b;
+      };
+      k.bindVariable(block("Monthly"), "visible", monthly);
+      k.bindVariable(block("Yearly"), "visible", yearly);
+      k.instance(c, p.featured ? "Button" : "Button quiet", { Label: p.cta }, { name: "Plan button" });
+      const list = k.stack(c, { gap: 12, fill: p.fill, radius: 26, padding: 20, effects: puffy(0.6), name: "Features" });
+      for (const f of p.features) {
+        const row = k.stack(list, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Feature" });
+        tick(k, row, 18, "ink", { name: "Feature tick", weight: 3 });
+        k.text(row, f, { style: ts(k, "soft", 16), color: "ink", name: "Feature label" });
+      }
+    }
+    const compare = k.stack(sheet, { gap: 32, name: "Compare" });
+    sectionHead(k, compare, { label: "COMPARE", title: "Plan by plan.", name: "Compare head" });
+    const table = pillowCard(k, compare, { padding: 32, gap: 0, name: "Table" });
+    const cell = (row, value, i) => {
+      const drawn = value === "yes" || value === "no";
+      const c = k.stack(row, { direction: "HORIZONTAL", width: COL.desktop, name: "Cell", ...drawn ? { height: 28, align: "CENTER" } : {} });
+      if (value === "yes") {
+        const d = k.stack(c, { width: 28, height: 28, radius: 999, fill: "mint", align: "CENTER", justify: "CENTER", name: "Cell yes" });
+        tick(k, d, 16, "ink", { name: "Cell tick", weight: 3 });
+      } else if (value === "no") k.rect(c, 14, 3, "track", { radius: 2, name: "Cell dash" });
+      else k.text(c, value, { style: ts(k, "soft", 16), color: i === 1 ? "onCard" : "cardMuted", name: "Cell value" });
+    };
+    const headRow = k.stack(table, { direction: "HORIZONTAL", gap: 8, align: "CENTER", padding: { top: 0, right: 0, bottom: 16, left: 0 }, name: "Table head" });
+    k.text(headRow, "WHAT YOU GET", { style: ts(k, "label", 13), color: "cardMuted", name: "Table corner" });
+    PLANS.forEach((p) => {
+      const c = k.stack(headRow, { direction: "HORIZONTAL", width: COL.desktop, name: "Cell" });
+      k.text(c, p.name.toUpperCase(), { style: ts(k, "label", 13), color: "onCard", name: "Column name" });
+    });
+    TABLE.forEach(([feature, ...values], r) => {
+      const row = k.stack(table, { direction: "HORIZONTAL", gap: 8, align: "CENTER", radius: 18, padding: { top: 14, right: 0, bottom: 14, left: 12 }, name: "Table row", ...r % 2 === 0 ? { fill: k.tint("onCard", 0.04) } : {} });
+      k.text(row, feature, { style: ts(k, "soft", 16), color: "onCard", name: "Row feature" });
+      values.forEach((v, i) => cell(row, v, i));
+    });
+    const faq = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, name: "FAQ" });
+    const faqHead = k.stack(faq, { width: 380, name: "FAQ side" });
+    sectionHead(k, faqHead, { label: "QUESTIONS", title: "Things couples ask us.", name: "FAQ head" });
+    const qs = k.stack(faq, { gap: 14, name: "FAQ list" });
+    for (const [q, a] of FAQ) {
+      const item = pillowCard(k, qs, { gap: 8, padding: { top: 22, right: 26, bottom: 24, left: 26 }, radius: 28, depth: 0.6, name: "Question" });
+      k.text(item, q, { style: ts(k, "title", 20), color: "onCard", name: "Q" });
+      k.text(item, a, { style: ts(k, "body", 16), color: "cardMuted", name: "A" });
+    }
+    const close = pillowCard(k, sheet, { direction: "HORIZONTAL", gap: 32, padding: 48, align: "CENTER", fill: "butter", name: "Close" });
+    const closeWords = k.stack(close, { gap: 10, name: "Close words" });
+    k.text(closeWords, "Start on Free tonight.", { style: ts(k, "display", 60), color: "ink", name: "Close title" });
+    k.text(closeWords, "No card needed. Move to Plus the day you open a third jar.", { style: ts(k, "body", 18), color: "ink", name: "Close line" });
+    const closeSide = k.stack(close, { width: 200, align: "MAX", name: "Close side" });
+    k.instance(closeSide, "Button", { Label: "Start free" }, { name: "Close button" });
+    footer(k, sheet, {
+      about: KITTY.pitch,
+      legal: "Prices in US dollars, before sales tax. Yearly plans are billed once, up front. \xA9 2026 {{brand.name}}.",
+      columns: [["App", ["Bill splitting", "Jars", "Round-ups", "Recaps"]], ["Help", ["Getting started", "Security", "Contact"]], ["Company", ["About", "Pricing", "Press"]]],
+      brandStyle: ts(k, "title", 22),
+      headStyle: ts(k, "label", 14),
+      linkStyle: ts(k, "body", 15),
+      ruleColor: "track"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    if (m) {
+      wave(k, m, 1400, 3);
+      blink(k, m, [3e3, 5e3]);
+    }
+    respond(k, sheet, byName(k), {
+      stack: ["Header", "Plans", "FAQ", "Footer columns", "Close"],
+      restyle: WEB_STEPS,
+      hide: { mobile: ["Nav links"] },
+      gap: { tablet: 80, mobile: 64 },
+      tweak: (kit, id, size) => {
+        for (const n of kit.named(id, "Cell")) kit.patch(n, { width: COL[size] });
+        if (size === "tablet") compactNav(kit, id, ["Sign in"], 22);
+        if (size === "tablet" || size === "mobile") {
+          for (const n of kit.named(id, "Header billing")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const n of kit.named(id, "Header")) kit.patch(n, { itemSpacing: 24 });
+          for (const n of kit.named(id, "FAQ side")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const n of kit.named(id, "FAQ")) kit.patch(n, { itemSpacing: 28 });
+          for (const n of kit.named(id, "Top")) kit.patch(n, { itemSpacing: 44 });
+          for (const n of kit.named(id, "Close words")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const n of kit.named(id, "Close side")) kit.patch(n, { counterAxisAlignItems: "MIN" });
+          for (const n of kit.named(id, "Mochi")) kit.patch(n, { x: (size === "tablet" ? 672 : 335) - 170 });
+        }
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Table")) kit.patch(n, { padding: { top: 20, right: 12, bottom: 14, left: 12 } });
+          for (const n of kit.named(id, "Close")) kit.patch(n, { padding: { top: 28, right: 24, bottom: 28, left: 24 }, itemSpacing: 20 });
+          for (const name of ["Table head", "Table row"]) for (const n of kit.named(id, name)) kit.patch(n, { itemSpacing: 4 });
+          for (const n of kit.named(id, "Table row")) kit.patch(n, { padding: { top: 14, right: 0, bottom: 14, left: 8 } });
+          for (const n of kit.named(id, "Column name")) if (kit.node(n).characters === "HOUSEHOLD") kit.patch(n, { characters: "HOME" });
+        }
+      }
+    });
+    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 [mo, yr] = k.node(price).childIds;
+      k.patch(yr, { x: k.node(mo).x, y: k.node(mo).y });
+    }
+    return k.doc;
+  }
+});
+
+export {
+  style_pastel_pricing_default
+};

package/dist/chunks/chunk-NTRPQ57F.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 {
+  TIMETABLE_BRAND,
+  TIMETABLE_FIELDS,
+  classComponents,
+  legend,
+  week
+} from "./chunk-VNVWHUO7.js";
+import {
+  defineTemplate
+} from "./chunk-76OE66SX.js";
+import {
+  Kit,
+  preset
+} from "./chunk-G63TLLXA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-APZ7CG5P.js";
+
+// templates/src/print/studio-class-timetable-poster.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SIDE = 48;
+var studio_class_timetable_poster_default = defineTemplate({
+  id: "print-studio-class-timetable",
+  meta: {
+    name: "Studio class timetable poster",
+    description: "An A3 poster of a yoga, strength and dance studio\u2019s week: seven day columns of classes coloured by kind, a key, and the prices, booking and first-visit notes. Each class is a component with its time, name and teacher, so next week is typed in rather than redrawn. Prints with bleed",
+    category: "poster",
+    tags: ["timetable", "schedule", "class schedule", "weekly", "gym", "yoga", "fitness", "dance", "studio", "noticeboard", "a3"],
+    platforms: ["print"],
+    formats: ["poster"],
+    useCases: ["planning", "announcement", "event"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  build() {
+    const k = new Kit("Studio class timetable poster", preset("a3"));
+    k.brand({ ...TIMETABLE_BRAND }, { ...TIMETABLE_FIELDS });
+    k.textStyle("Brand 26", { size: 26, fontWeight: 800, letterSpacing: 0.5, lineHeight: 32 });
+    k.textStyle("Title 120", { size: 120, fontWeight: 900, letterSpacing: -4.5, lineHeight: 112 });
+    k.textStyle("Week 32", { size: 32, fontWeight: 600, lineHeight: 40 });
+    k.textStyle("Day 24", { size: 24, fontWeight: 900, letterSpacing: 2, lineHeight: 28 });
+    k.textStyle("Time 18", { size: 18, fontWeight: 700, letterSpacing: 0.4, lineHeight: 22 });
+    k.textStyle("Class 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 23 });
+    k.textStyle("Teacher 16", { size: 16, fontWeight: 500, lineHeight: 20 });
+    k.textStyle("Key 20", { size: 20, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Note title 20", { size: 20, fontWeight: 800, letterSpacing: 1.6, lineHeight: 24 });
+    k.textStyle("Note 19", { size: 19, fontWeight: 500, lineHeight: 27 });
+    const type = { time: "Time 18", name: "Class 20", teacher: "Teacher 16", day: "Day 24", key: "Key 20" };
+    classComponents(k, { width: 136, pad: 14, radius: 12, type });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Poster");
+    k.flowSheet(sheet, 40, { top: SIDE, right: SIDE, bottom: SIDE, left: SIDE }, "paper", "SPACE_BETWEEN", "MIN");
+    const head = k.stack(sheet, { direction: "HORIZONTAL", gap: 32, justify: "SPACE_BETWEEN", align: "MAX", fill: "primary", radius: 24, padding: 44, name: "Header" });
+    const words = k.stack(head, { gap: 16, name: "Header words" });
+    k.patch(words, { layoutSizingHorizontal: "FILL" });
+    const brand = k.stack(words, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Brand" });
+    k.logo(brand, 44, 44);
+    k.text(brand, "{{brand.name}}", { style: "Brand 26", color: "onPrimary", width: "FILL", name: "Studio" });
+    k.text(words, "This week\nat the studio", { style: "Title 120", color: "onPrimary", width: "FILL", name: "Title" });
+    k.text(words, "{{brand.week}}", { style: "Week 32", color: "onPrimary", width: "FILL", name: "Week of" });
+    const mark = k.frame(head, { x: 0, y: 0, width: 300, height: 300 }, { name: "Kinds mark" });
+    k.patch(mark, { layoutPositioning: "AUTO" });
+    ["card", "accent", "secondary", "paper"].forEach((role, i) => k.ellipse(mark, 150, role, { name: "Disc", absolute: { x: i % 2 * 150, y: Math.floor(i / 2) * 150 } }));
+    const body = k.stack(sheet, { gap: 28, name: "Body" });
+    legend(k, body, 32);
+    week(k, body, { gap: 12, rowGap: 12, type });
+    const notes = k.stack(sheet, { gap: 20, name: "Notes" });
+    k.rect(notes, "FILL", 3, "text", { name: "Notes rule" });
+    const cols = k.stack(notes, { direction: "HORIZONTAL", gap: 40, name: "Note columns" });
+    const note = (title, text) => {
+      const c = k.stack(cols, { gap: 8, name: "Note" });
+      k.patch(c, { layoutSizingHorizontal: "FILL" });
+      k.text(c, title, { style: "Note title 20", color: "text", width: "FILL", name: "Note title" });
+      k.text(c, text, { style: "Note 19", color: "onPaper", width: "FILL", name: "Note text" });
+    };
+    note("NEW HERE?", "Come ten minutes early and say hello. Mats, blocks and towels are on us; bring water.");
+    note("PRICES", "Drop in \xA312. Ten classes \xA3100, valid three months. Unlimited \xA368 a month.");
+    note("BOOKING", "{{brand.book}} or at the desk. Cancel up to two hours before and keep your credit.");
+    k.text(notes, "{{brand.address}}", { style: "Note title 20", color: "text", width: "FILL", name: "Address" });
+    return k.finish();
+  }
+});
+
+export {
+  studio_class_timetable_poster_default
+};

package/dist/chunks/chunk-NTTQCOUL.js

@@ -0,0 +1,127 @@
+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 {
+  LOGO_PLACEHOLDERS
+} from "./chunk-G63TLLXA.js";
+import {
+  settlePayload
+} from "./chunk-A6JMPSCY.js";
+import {
+  createFrame,
+  createGroup,
+  createRectangle,
+  init_scene_graph
+} from "./chunk-HZPJZB6K.js";
+import {
+  createSolidPaint,
+  init_types
+} from "./chunk-T7NJAGAB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-APZ7CG5P.js";
+
+// templates/migrations/brand-media.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+init_types();
+var INSERTS = {
+  "popcraft.print-letterhead-classic": [{ kind: "logo-beside", path: ["Furniture", "Header", "Text"], side: "before", size: 32, gap: 12 }],
+  "popcraft.web-landing": [{ kind: "logo-beside", path: ["Nav", "Text"], side: "before", size: 32, gap: 12 }],
+  "popcraft.print-menu-lunch": [{ kind: "logo", path: ["Header"], index: 0, size: 56 }],
+  "popcraft.print-poster-event": [{ kind: "logo", path: ["Background", "Footer"], index: 1, size: 88 }],
+  "popcraft.print-business-card-bold": [{ kind: "logo", path: ["Layout", "Band"], index: 1, size: 40 }],
+  "popcraft.social-announcement": [{ kind: "logo-beside", path: ["Badge"], side: "after", size: 72, gap: 24, spread: true }],
+  "popcraft.social-event": [{ kind: "logo-beside", path: ["Badge"], side: "after", size: 72, gap: 24, spread: true }],
+  "popcraft.social-product": [{ kind: "photo", path: ["Art"], ground: "accent" }]
+};
+function find(nodes, rootId, path) {
+  let cur = nodes[rootId];
+  for (const name of path) cur = cur?.childIds.map((id) => nodes[id]).find((n) => n?.name === name);
+  return cur;
+}
+var inside = (nodes, rootId, test) => {
+  const n = nodes[rootId];
+  return !!n && (test(n) || n.childIds.some((c) => inside(nodes, c, test)));
+};
+var add = (nodes, node, parentId, index) => {
+  nodes[node.id] = { ...node, parentId };
+  const parent = nodes[parentId];
+  const kids = [...parent.childIds];
+  kids.splice(Math.min(index, kids.length), 0, node.id);
+  nodes[parentId] = { ...parent, childIds: kids };
+};
+function logo(id, size) {
+  const base = createRectangle({ id, name: "{{brand.logo}}", x: 0, y: 0, width: size, height: size, fills: [], strokes: [], layoutSizingHorizontal: "FIXED", layoutSizingVertical: "FIXED" });
+  return { ...base, type: "IMAGE", imageUrl: LOGO_PLACEHOLDERS.tile, scaleMode: "FIT" };
+}
+var brandMedia = {
+  id: "brand-media",
+  description: "brand logo layers and photo frames where the designs have a place for them",
+  apply(t) {
+    const specs = INSERTS[t.meta.id];
+    if (!specs) return t;
+    const nodes = { ...t.payload.nodes };
+    const vars = t.payload.variables ?? {};
+    const sheets = (t.payload.pages ?? []).flatMap((p) => p.rootIds).filter((id) => nodes[id]?.type === "FRAME");
+    let changed = false;
+    for (const sheetId of sheets) for (const spec of specs) {
+      const target = find(nodes, sheetId, spec.path);
+      if (!target?.parentId) continue;
+      if (spec.kind === "photo") {
+        if (inside(nodes, target.id, (n) => !!n.isPhotoFrame)) continue;
+        const ground = Object.values(vars).find((v) => v.name === `brand/${spec.ground}`);
+        if (!ground) continue;
+        const color = Object.values(ground.valuesByMode)[0];
+        const fill = () => [{ ...createSolidPaint(color), boundVariables: { color: ground.id } }];
+        const group = { ...createGroup([]), id: `${target.id}-photo`, name: "Photo frame", x: 0, y: 0, width: target.width, height: target.height, isMaskGroup: true, isPhotoFrame: true, layoutPositioning: "ABSOLUTE" };
+        add(nodes, group, target.id, 0);
+        add(nodes, createRectangle({ id: `${group.id}-mask`, name: "Mask", x: 0, y: 0, width: target.width, height: target.height, fills: fill(), strokes: [], isMask: true, maskType: "ALPHA", layoutSizingHorizontal: "FIXED", layoutSizingVertical: "FIXED" }), group.id, 0);
+        add(nodes, createRectangle({ id: `${group.id}-art`, name: "Photo", x: 0, y: 0, width: target.width, height: target.height, fills: fill(), strokes: [], layoutSizingHorizontal: "FIXED", layoutSizingVertical: "FIXED" }), group.id, 1);
+        changed = true;
+        continue;
+      }
+      const holder = spec.kind === "logo" ? target : nodes[target.parentId];
+      if (inside(nodes, holder.id, (n) => n.name === "{{brand.logo}}")) continue;
+      if (spec.kind === "logo") {
+        add(nodes, logo(`${target.id}-logo`, spec.size), target.id, spec.index);
+        changed = true;
+        continue;
+      }
+      const parent = nodes[target.parentId];
+      const at = parent.childIds.indexOf(target.id);
+      const row = createFrame({
+        id: `${target.id}-row`,
+        name: "Lockup",
+        x: target.x,
+        y: target.y,
+        width: spec.spread ? parent.width - (parent.padding?.left ?? 0) - (parent.padding?.right ?? 0) : 1,
+        height: Math.max(target.height, spec.size),
+        fills: [],
+        strokes: [],
+        clipsContent: false,
+        layoutMode: "HORIZONTAL",
+        itemSpacing: spec.gap,
+        counterAxisSpacing: 0,
+        padding: { top: 0, right: 0, bottom: 0, left: 0 },
+        primaryAxisAlignItems: spec.spread ? "SPACE_BETWEEN" : "MIN",
+        counterAxisAlignItems: "CENTER",
+        layoutSizingHorizontal: spec.spread ? "FILL" : "HUG",
+        layoutSizingVertical: "HUG"
+      });
+      nodes[target.parentId] = { ...parent, childIds: parent.childIds.filter((id) => id !== target.id) };
+      add(nodes, { ...row, childIds: [] }, parent.id, at);
+      add(nodes, { ...target, x: 0, y: 0 }, row.id, 0);
+      add(nodes, logo(`${target.id}-logo`, spec.size), row.id, spec.side === "before" ? 0 : 1);
+      changed = true;
+    }
+    return changed ? { ...t, payload: settlePayload({ ...t.payload, nodes }) } : t;
+  }
+};
+
+export {
+  brandMedia
+};