@popcraft/kit 0.24.3 → 0.26.0

package/dist/chunks/chunk-YWNYSW4P.js

@@ -0,0 +1,112 @@
+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 {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-O24FY473.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit
+} from "./chunk-T3SGRYUX.js";
+import {
+  ease
+} from "./chunk-6DWY3DOQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/email/header-newsletter.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NEWSLETTER_HEADER = {
+  duration: 6e3,
+  /** A story row's height and the gap between rows: the highlight steps one row + gap at a time. */
+  row: 30,
+  gap: 6,
+  /** The stories column's width: what the 600 px sheet leaves beside the masthead. */
+  column: 320,
+  /** When the highlight moves on (ms), and how long the move takes. */
+  moves: [1600, 3400, 5200],
+  move: 400,
+  stories: ["Plant garlic before the first frost", "Save seed from your best tomatoes", "Our autumn bulb list is out"]
+};
+var NEWSLETTER_CUES = [
+  { layer: "New issue", preset: "pulse", at: 200, params: { duration: 700, amount: 0.08 } },
+  { layer: "New issue", preset: "pulse", at: 3200, params: { duration: 700, amount: 0.08 } }
+];
+function highlightKeys(N = NEWSLETTER_HEADER) {
+  const step = N.row + N.gap;
+  const stops = [step, 2 * step, 0];
+  const move = ease.inOut("cubic");
+  return [
+    { t: 0, v: 0, ease: ease.hold },
+    ...N.moves.flatMap((t, i) => [{ t, v: i === 0 ? 0 : stops[i - 1], ease: move }, { t: t + N.move, v: stops[i], ease: ease.hold }])
+  ];
+}
+var header_newsletter_default = defineTemplate({
+  id: "email-header-newsletter",
+  meta: {
+    name: "Newsletter email header (animated GIF)",
+    description: "A 600 \xD7 300 animated masthead for a monthly newsletter: the title, the issue and its three stories are all on the first frame (for Outlook), then a highlight steps down the stories and back \u2014 a seamless 6-second GIF loop",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "masthead", "newsletter", "issue", "garden", "nursery"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["newsletter"],
+    created: "2026-09-30",
+    updated: "2026-09-30"
+  },
+  motion: { cues: NEWSLETTER_CUES, loop: true },
+  build() {
+    const N = NEWSLETTER_HEADER;
+    const k = new Kit("Newsletter email header", HEADER);
+    k.brand(
+      { page: "#F4EFE3", headline: "#233127", caption: "#55604F", primary: "#2F5D3A", onPrimary: "#F4EFE3", highlight: "#F3D27A", rule: "#2F5D3A" },
+      { title: "Field Notes", from: "from Hollow Oak Nursery", issue: "Issue 42 \xB7 October 2026" }
+    );
+    k.textStyle("Masthead 52", { size: 52, fontFamily: "Source Serif 4", fontWeight: 700, letterSpacing: -1.5, lineHeight: 54 });
+    k.textStyle("From 15", { size: 15, fontFamily: "Source Serif 4", fontWeight: 400, lineHeight: 20 });
+    k.textStyle("Issue 13", { size: 13, fontWeight: 600, letterSpacing: 0.5, lineHeight: 16 });
+    k.textStyle("Label 12", { size: 12, fontWeight: 800, letterSpacing: 2, lineHeight: 14, textCase: "UPPER" });
+    k.textStyle("Story 14", { size: 14, fontWeight: 600, lineHeight: 18 });
+    pill(k, "Chip", { fill: "primary", ink: "onPrimary", style: "Label 12", label: "NEW ISSUE", pad: [5, 12] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 28, { top: 36, right: 36, bottom: 36, left: 36 }, "page", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: N.duration, fps: EMAIL_FPS });
+    const columns = k.stack(sheet, { direction: "HORIZONTAL", width: "FILL", gap: 28, align: "CENTER", name: "Columns" });
+    const masthead = k.stack(columns, { width: 180, gap: 8, name: "Masthead" });
+    k.instance(masthead, "Chip", { Label: "NEW ISSUE" }, { name: "New issue" });
+    k.text(masthead, "{{brand.title}}", { style: "Masthead 52", color: "headline", name: "Title" });
+    k.text(masthead, "{{brand.from}}", { style: "From 15", color: "caption", name: "From" });
+    k.rect(masthead, "FILL", 2, "rule", { name: "Rule" });
+    k.text(masthead, "{{brand.issue}}", { style: "Issue 13", color: "caption", name: "Issue" });
+    const inside = k.stack(columns, { width: N.column, gap: 10, name: "In this issue" });
+    k.text(inside, "In this issue", { style: "Label 12", color: "caption", name: "Inside label" });
+    const stories = k.stack(inside, { width: N.column, gap: N.gap, name: "Stories" });
+    const mark = k.rect(stories, N.column, N.row, "highlight", { radius: 6, name: "Highlight", absolute: { x: 0, y: 0 } });
+    N.stories.forEach((s, i) => {
+      const row = k.stack(stories, { direction: "HORIZONTAL", width: N.column, height: N.row, gap: 8, align: "CENTER", padding: { top: 0, right: 10, bottom: 0, left: 10 }, name: "Story" });
+      k.text(row, `${i + 1}`, { style: "Story 14", color: "primary", autoWidth: true, name: "Story number" });
+      k.text(row, s, { style: "Story 14", color: "headline", name: "Story title" });
+    });
+    k.animate(mark, "translateY", highlightKeys(N));
+    k.cues(sheet, NEWSLETTER_CUES);
+    return k.finish();
+  }
+});
+
+export {
+  NEWSLETTER_HEADER,
+  NEWSLETTER_CUES,
+  highlightKeys,
+  header_newsletter_default
+};

package/dist/chunks/chunk-YWV3Q5GQ.js

@@ -0,0 +1,378 @@
+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 {
+  LOOP,
+  addOns,
+  artBand,
+  closing,
+  countdown,
+  disc,
+  drain,
+  faq,
+  features,
+  hero,
+  ladder,
+  legal,
+  lineup,
+  partners,
+  parts,
+  presaleResponsive,
+  shape,
+  signup,
+  steps,
+  stockCount,
+  sway,
+  ticking,
+  travel,
+  turn
+} from "./chunk-EB663FLR.js";
+import {
+  burstPath
+} from "./chunk-YNOCYFZ4.js";
+import {
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  rule,
+  typeScale
+} from "./chunk-G5CURQ6H.js";
+import {
+  nav,
+  page
+} from "./chunk-YKXCPYWJ.js";
+import {
+  bloom,
+  hardShadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  box,
+  curve3,
+  line,
+  poly,
+  pt3,
+  rng
+} from "./chunk-BNVLVZUT.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/festival-presale-food.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Festival presale page: food and wine market";
+var CLOCK = { days: "17", hours: "08", minutes: "54", from: 29, to: 23 };
+var STOCK = { label: "Selling fast", from: 2140, left: 2118, total: 9e3 };
+var AW = 1200;
+var AH = 320;
+var FW = 1200;
+var FH = 270;
+var TABLE = 176;
+var HERO = {
+  artW: AW,
+  artH: AH,
+  h: { desktop: 980, laptop: 960, tablet: 940, mobile: 700 },
+  fit: { laptop: { s: 1, ax: 600, ay: 0, hx: 560, hy: 0 }, tablet: { s: 0.8, ax: 600, ay: 0, hx: 336, hy: 0 }, mobile: { s: 0.56, ax: 600, ay: 0, hx: 167.5, hy: 0 } },
+  foot: { w: FW, h: FH, fit: { laptop: { s: 1, ax: 600, ay: 270, hx: 560, hy: 960 }, tablet: { s: 0.8, ax: 600, ay: 270, hx: 336, hy: 940 }, mobile: { s: 0.52, ax: 548, ay: 270, hx: 167.5, hy: 700 } } },
+  pad: { tablet: { top: 118, right: 26, bottom: 226, left: 26 }, mobile: { top: 92, right: 12, bottom: 150, left: 12 } }
+};
+var STEPS = [
+  ["By 21 March", "Put your name down", "Leave your email by Sunday 21\xA0March, midnight. One sign-up a person, and it is free."],
+  ["23 March", "Your code arrives", "On Tuesday 23 March we send your own code. It buys up to six weekend tickets in one order."],
+  ["25 March \xB7 12:00", "The presale opens", "Thursday 25 March at noon. The queue opens at 11:30 and your place in it is drawn by lot."],
+  ["1 April", "General sale", "What is left goes on general sale on Thursday 1 April at noon, at the price it has reached."]
+];
+var TIERS = [
+  { tag: "Early harvest", name: "Weekend ticket", price: "\u20AC58", note: "4,000 tickets, offered to last year\u2019s visitors in January. All gone.", status: "sold", chip: "Sold out" },
+  { tag: "First pressing", name: "Weekend ticket", price: "\u20AC68", note: "On sale now to newsletter readers. What is\xA0left opens to presale codes on 25 March.", status: "selling", chip: "On sale" },
+  { tag: "Second pressing", name: "Weekend ticket", price: "\u20AC78", note: "10,000 tickets, kept for the presale and opened when the first pressing is gone.", status: "next", chip: "Presale \xB7 25 March" },
+  { tag: "Late harvest", name: "Weekend ticket", price: "\u20AC88", note: "The last 6,000, for the general sale. Day tickets join them at \u20AC36.", status: "later", chip: "General \xB7 1 April" }
+];
+var EXTRAS = [
+  ["The long table", "+ \u20AC85", "Saturday supper for 400 in the market hall:\xA0six courses by the three headline chefs."],
+  ["Cellar masterclass", "+ \u20AC35", "Ninety minutes and eight wines with the person who made them. Forty seats a class."],
+  ["Tasting tokens", "20 for \u20AC30", "Every ticket comes with ten. Most tastes cost one token, a plate costs three or four."]
+];
+var BILLS = [
+  { label: "Fri 3 Sept", note: "16:00 \u2013 23:00", heads: ["Noor Haddad"], acts: ["Fire kitchen: lamb, flatbread, smoke", "Cantina Ferramonte, ten vintages", "The oyster hour with Brine & Shell"], more: ["Music: The Copper Kettles\xA0\xB7\xA0Late: the vermouth bar"] },
+  { label: "Sat 4 Sept", note: "11:00 \u2013 23:00", heads: ["Matteo Riccivale"], acts: ["Pasta by hand, for two hundred", "Clos des Hirondelles, blind", "The long table supper"], more: ["Music: Luc\xEDa y Los Faroles\xA0\xB7\xA0Late:\xA0natural wine disco"] },
+  { label: "Sun 5 Sept", note: "11:00 \u2013 20:00", heads: ["Ilse Brandt"], acts: ["A whole cheese, opened at noon", "Weingut Altenbach, riesling", "The bakers\u2019 breakfast"], more: ["Music: Harbour Street Brass", "The producers\u2019 auction"] }
+];
+var ON_SITE = [
+  ["180 producers", "Cheesemakers, bakers, growers, picklers and forty wineries, each one behind their own stall."],
+  ["Three fire kitchens", "Open hearths where the headline chefs\xA0cook for the crowd, twice a day, for tokens."],
+  ["The cellar tent", "Six hundred wines by the taste. A glass on\xA0a\xA0lanyard is yours to keep with every ticket."],
+  ["The children\u2019s market", "Bread to shape, butter to churn and a\xA0stall\xA0they\xA0run themselves. Under-12s come free."],
+  ["Take it home", "A cold store by the gate keeps what you\xA0buy until you leave, and ships cases for you."],
+  ["Access", "Level paths throughout, seating at every kitchen, quiet hours on Sunday morning and a free companion ticket."]
+];
+var ROUTES = [
+  ["Train", "Castelmare station is a twelve-minute walk down the hill, or two stops on the market tram.", "Tram free with a ticket"],
+  ["Ferry", "The harbour ferry from Porto Vecchio runs every half hour until midnight during the festival.", "\u20AC6 return"],
+  ["Car", "Please leave it at the park-and-ride on the ring road. The shuttle is free, and there is wine.", "\u20AC8 a day"],
+  ["Bicycle", "Valet bike parking at the south gate, with a token for anyone who rides in.", "Free, plus a token"]
+];
+var STAYS = [
+  ["Hotels in town", "Thirty hotels within a walk of the market, at rates held until 1 July.", "From \u20AC84"],
+  ["Farm stays", "Sleep at one of the producers\u2019 farms, with breakfast from the farm itself.", "From \u20AC110"],
+  ["Harbour campsite", "Pitches and cabins by the water, twenty minutes away on the ferry.", "From \u20AC28"]
+];
+var QUESTIONS = [
+  ["How many tickets can I buy?", "Six with a presale code, eight in the general\xA0sale. Tickets carry a name, which you can change free of charge until 1 August."],
+  ["Does a code guarantee a ticket?", "No. It lets you into the presale queue. We send more codes than there are tickets, so be there at noon."],
+  ["Can I resell a ticket?", "Only through the official resale, at the price you paid. Tickets sold anywhere else are cancelled."],
+  ["Is there an age limit?", "All ages are welcome and under-12s are free. You must be 18 to taste, and we check: bring ID."],
+  ["What if I cannot come?", "Cancel within 14 days of buying for a full refund. After that the official resale pays you back when the ticket sells."],
+  ["What about access and diets?", "The market is level throughout. Every stall labels allergens, and a third of the plates are vegetarian or vegan."]
+];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Label", preset: "drop-in", at: 100, params: { duration: 800 } },
+  { layer: "Seal", preset: "pop-in", at: 900, params: { duration: 500 } },
+  { layer: "Step", preset: "rise-in", at: 1200, params: { duration: 500 }, stagger: { delay: 140 } },
+  { layer: "Act", preset: "fade-in", at: 1500, params: { duration: 500 }, stagger: { delay: 150 } }
+];
+var counts = [ticking("Hero", CLOCK), ticking("Band", CLOCK), stockCount("Tier stock", STOCK)];
+function awning(k, art) {
+  const stripe = (x) => ({ closed: true, points: [pt3(x, -10), pt3(x + 60, -10), { ...pt3(x + 60, 78), handleOut: pt3(x + 60, 118) }, { ...pt3(x, 78), handleIn: pt3(x, 118) }] });
+  const red = [], cream = [];
+  for (let i = 0, x = -300; x < 1500; i++, x += 60) (i % 2 ? cream : red).push(stripe(x));
+  k.rect(art, 1800, 46, [k.gradient({ from: "ink", to: "ink", fromOpacity: 0.22, toOpacity: 0, angle: 90 })], { name: "Awning shade", absolute: { x: -300, y: 92 } });
+  for (const [paths, role] of [[cream, "awningCream"], [red, "awningRed"]]) {
+    const id = shape(k, art, paths, role, { name: "Awning", effects: [hardShadow(k, "ink", 0, 4, 0.25)] });
+    sway(k, id, "translateY", 2, 2, role === "awningRed" ? 0 : 0.12);
+  }
+}
+function awningArt(k, art) {
+  const planks = [];
+  for (let x = -280; x < 1500; x += 70) planks.push(line(x, 0, x, 1e3));
+  shape(k, art, planks, "kraft", { name: "Planks", strokeWidth: 2, opacity: 0.7 });
+  awning(k, art);
+  const at = (t) => ({ x: -300 + 1800 * t, y: 150 + 34 * Math.sin(t * Math.PI * 6) });
+  shape(k, art, [curve3(Array.from({ length: 37 }, (_, i) => at(i / 36)), 0.2)], "ink", { name: "Bulb wire", strokeWidth: 2 });
+  for (let g = 0; g < 3; g++) {
+    const bulbs = [];
+    for (let i = g; i < 46; i += 3) {
+      const p = at((i + 0.5) / 46);
+      bulbs.push(disc(p.x, p.y + 9, 7, 9));
+    }
+    const id = shape(k, art, bulbs, "bulb", { name: "Bulbs", effects: [bloom(k, "bulb", 14, 0.9)] });
+    sway(k, id, "opacity", 0.35, 2 + g, g / 3);
+    k.patch(id, { opacity: 0.65 });
+  }
+}
+function tableArt(k, art) {
+  const T = TABLE;
+  const bottle = (x, h, w, glass2, label) => {
+    shape(k, art, [poly([[x - w / 2, T], [x - w / 2, T - h * 0.56], [x - w * 0.17, T - h * 0.74], [x - w * 0.17, T - h], [x + w * 0.17, T - h], [x + w * 0.17, T - h * 0.74], [x + w / 2, T - h * 0.56], [x + w / 2, T]])], glass2, { name: "Bottle" });
+    shape(k, art, [box(x - w / 2, T - h * 0.46, w, h * 0.28)], label, { name: "Bottle label" });
+    shape(k, art, [box(x - w * 0.17, T - h, w * 0.34, h * 0.1)], "wine", { name: "Capsule" });
+    shape(k, art, [line(x - w * 0.3, T - h * 0.5, x - w * 0.3, T - 8)], "label", { name: "Bottle shine", strokeWidth: 3, opacity: 0.25 });
+  };
+  const glass = (x, s, role) => {
+    const bowl = { closed: true, points: [pt3(x - 22 * s, T - 96 * s), pt3(x + 22 * s, T - 96 * s), { ...pt3(x + 4 * s, T - 46 * s), handleIn: pt3(x + 26 * s, T - 58 * s) }, pt3(x - 4 * s, T - 46 * s), { ...pt3(x - 22 * s, T - 96 * s), handleIn: pt3(x - 26 * s, T - 58 * s) }] };
+    shape(k, art, [{ closed: true, points: [pt3(x - 24 * s, T - 78 * s), pt3(x + 24 * s, T - 78 * s), { ...pt3(x + 4 * s, T - 46 * s), handleIn: pt3(x + 24 * s, T - 56 * s) }, pt3(x - 4 * s, T - 46 * s), { ...pt3(x - 24 * s, T - 78 * s), handleIn: pt3(x - 24 * s, T - 56 * s) }] }], role, { name: "Wine" });
+    shape(k, art, [bowl, line(x, T - 46 * s, x, T - 4), line(x - 18 * s, T - 2, x + 18 * s, T - 2)], "ink", { name: "Glass", strokeWidth: 2.5 });
+  };
+  const stripesV = [], stripesH = [];
+  for (let x = -300; x < 1500; x += 44) stripesV.push(box(x, T + 14, 22, 120));
+  for (let y = T + 14; y < T + 120; y += 44) stripesH.push(box(-300, y, 1800, 22));
+  shape(k, art, [box(-300, T + 14, 1800, 120)], "awningCream", { name: "Cloth" });
+  shape(k, art, stripesV, "awningRed", { name: "Gingham", opacity: 0.42 });
+  shape(k, art, stripesH, "awningRed", { name: "Gingham", opacity: 0.42 });
+  shape(k, art, [box(-300, T, 1800, 16)], "crateDark", { name: "Table top" });
+  shape(k, art, [box(28, T - 74, 190, 74)], "crate", { name: "Crate" });
+  bottle(64, 168, 40, "bottle", "label");
+  bottle(120, 150, 40, "wine", "mustard");
+  bottle(176, 172, 40, "bottle", "label");
+  shape(k, art, [box(28, T - 74, 190, 74)], "crate", { name: "Crate front" });
+  shape(k, art, [line(28, T - 50, 218, T - 50), line(28, T - 24, 218, T - 24), line(60, T - 74, 60, T), line(186, T - 74, 186, T)], "crateDark", { name: "Crate slats", strokeWidth: 3 });
+  shape(k, art, [{ closed: true, points: [pt3(250, T - 8), pt3(250, T - 52), { ...pt3(330, T - 70), handleIn: pt3(262, T - 72), handleOut: pt3(398, T - 72) }, pt3(410, T - 52), pt3(410, T - 8), { ...pt3(330, T + 2), handleIn: pt3(390, T + 2), handleOut: pt3(270, T + 2) }] }], "cheese", { name: "Cheese" });
+  shape(k, art, [disc(330, T - 52, 80, 18)], "cheeseTop", { name: "Cheese top" });
+  shape(k, art, [disc(296, T - 26, 7, 5), disc(350, T - 18, 9, 6), disc(384, T - 30, 5, 4), disc(322, T - 54, 8, 3)], "crust", { name: "Cheese holes", opacity: 0.6 });
+  const grapes = [];
+  [[0, 0], [22, 0], [44, 0], [66, 0], [11, 18], [33, 18], [55, 18], [22, 36], [44, 36], [33, 54]].forEach(([dx, dy]) => grapes.push(disc(432 + dx, T - 64 + dy, 12)));
+  shape(k, art, grapes, "grape", { name: "Grapes" });
+  shape(k, art, [{ closed: true, points: [pt3(462, T - 78), { ...pt3(498, T - 104), handleIn: pt3(470, T - 104) }, { ...pt3(520, T - 74), handleIn: pt3(522, T - 100) }, { ...pt3(480, T - 66), handleIn: pt3(506, T - 60) }] }], "leaf", { name: "Vine leaf" });
+  glass(566, 1, "wine");
+  glass(630, 0.86, "mustard");
+  shape(k, art, [disc(730, T - 26, 70, 28)], "crust", { name: "Loaf" });
+  shape(k, art, [line(690, T - 40, 706, T - 20), line(720, T - 46, 736, T - 24), line(752, T - 44, 768, T - 24)], "label", { name: "Loaf cuts", strokeWidth: 4, opacity: 0.8 });
+  bottle(822, 132, 30, "oil", "label");
+  shape(k, art, [{ closed: true, points: [pt3(868, T - 72), pt3(1004, T - 72), { ...pt3(990, T), handleIn: pt3(1004, T - 14) }, { ...pt3(882, T), handleOut: pt3(868, T - 14) }] }], "pot", { name: "Pot" });
+  shape(k, art, [box(860, T - 80, 152, 12), box(846, T - 58, 22, 10), box(1004, T - 58, 22, 10)], "ink", { name: "Pot rim" });
+  for (let i = 0; i < 3; i++) {
+    const x = 902 + i * 34;
+    const wisp = shape(k, art, [curve3([{ x, y: T - 88 }, { x: x - 10, y: T - 112 }, { x: x + 8, y: T - 134 }, { x: x - 6, y: T - 158 }, { x: x + 4, y: T - 176 }], 0.3)], "steam", { name: "Steam", strokeWidth: 6, opacity: 0.55 });
+    sway(k, wisp, "translateY", 9, 2, i / 3);
+    sway(k, wisp, "opacity", 0.35, 2, i / 3 + 0.25);
+    sway(k, wisp, "translateX", 5, 1, i / 3);
+  }
+  shape(k, art, [box(1040, T - 54, 150, 54)], "crate", { name: "Crate" });
+  const r = rng(4), lemons = [], toms = [];
+  for (let i = 0; i < 9; i++) (i % 2 ? toms : lemons).push(disc(1056 + i * 15 + r() * 6, T - 58 - i % 3 * 9, 15, i % 2 ? 15 : 12));
+  shape(k, art, lemons, "mustard", { name: "Lemons" });
+  shape(k, art, toms, "tomato", { name: "Tomatoes" });
+  shape(k, art, [box(1040, T - 44, 150, 44)], "crate", { name: "Crate front" });
+  shape(k, art, [line(1040, T - 22, 1190, T - 22), line(1078, T - 44, 1078, T), line(1152, T - 44, 1152, T)], "crateDark", { name: "Crate slats", strokeWidth: 3 });
+}
+var festival_presale_food_default = defineTemplate({
+  id: "web-festival-presale-food",
+  meta: {
+    name: NAME,
+    description: "A ticket presale landing page for a large food and wine festival. The hero is a market stall: a striped awning with a scalloped edge, a string of bulbs that twinkle, a wine label in the middle with the name, a turning presale seal, a countdown whose seconds tick and the field to register, and a table under a gingham cloth laid with bottles, glasses, a cheese, grapes, a loaf, a steaming pot and a crate of lemons and tomatoes. Then the presale in four steps, the tickets as a price list with the early harvest sold out and the first pressing running down, the long table, masterclasses and a deposit, the programme by day on menu cards, what a ticket includes, travel and stay, the questions, partners and the legal lines. Cream, wine red, olive and mustard, desktop to phone",
+    category: "web",
+    tags: ["festival", "presale", "tickets", "food", "wine", "market", "harvest", "label", "illustration", "countdown", "sign-up", "ticket tiers", "programme", "landing page", "website", "serif", "animation", "responsive", "event"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["presale", "event", "countdown", "launch"],
+    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;
+    k.brand(
+      { paper: "#F7F0E1", text: "#2A1D16", onPaper: "#5F4E42", primary: "#7A1F2B", onPrimary: "#FBF3E2", accent: "#D8A33B", onAccent: "#2A1D16", card: "#FFFBF0", onCard: "#2A1D16", cardMuted: "#5F4E42", panel: "#2F3A1D", onPanel: "#F7F0E1", panelMuted: "#D2D6BC", chip: "#EDE2C8", onChip: "#2A1D16", stage: "#EFDFBB", onStage: "#2A1D16", stageMuted: "#5F4E42" },
+      { name: "Salt & Vine" }
+    );
+    k.palette({ ink: "#2A1D16", kraft: "#E4D1A6", awningRed: "#B8322A", awningCream: "#FFF6E0", bulb: "#FFD66B", wine: "#7A1F2B", bottle: "#2F4A2C", oil: "#8E8A2A", mustard: "#D8A33B", label: "#FFFBF0", cheese: "#E8B24A", cheeseTop: "#F3CB6C", crust: "#B97A3C", grape: "#5B2A5E", leaf: "#4E6B2A", tomato: "#D6452E", crate: "#C19A62", crateDark: "#8B633A", pot: "#34506B", steam: "#FFFFFF" });
+    const caps = { fontWeight: 700, textCase: "UPPER" };
+    const s = typeScale(k, {
+      Nav: { size: 15, fontWeight: 600, lineHeight: 22 },
+      Brand: { ...SERIF, size: 24, fontWeight: 900, letterSpacing: -0.4, lineHeight: 30 },
+      Button: { size: 15, fontWeight: 700, lineHeight: 24 },
+      Kicker: { size: 12, ...caps, letterSpacing: 3.4, lineHeight: 18 },
+      Section: { ...SERIF, size: 60, fontWeight: 800, letterSpacing: -1.6, lineHeight: 64 },
+      "Section md": { ...SERIF, size: 50, fontWeight: 800, letterSpacing: -1.3, lineHeight: 54 },
+      "Section sm": { ...SERIF, size: 36, fontWeight: 800, letterSpacing: -0.9, lineHeight: 40 },
+      Aside: { ...SERIF, size: 20, fontWeight: 400, lineHeight: 30 },
+      "Aside sm": { ...SERIF, size: 18, fontWeight: 400, lineHeight: 27 },
+      Body: { size: 16, fontWeight: 400, lineHeight: 25 },
+      Small: { size: 14, fontWeight: 400, lineHeight: 21 },
+      Label: { size: 12, ...caps, letterSpacing: 2.2, lineHeight: 16 },
+      Legal: { size: 13, fontWeight: 400, lineHeight: 20 },
+      Clock: { ...SERIF, size: 48, fontWeight: 800, letterSpacing: -1.2, lineHeight: 50, fontFeatures: { tnum: 1 } },
+      "Clock sm": { ...SERIF, size: 34, fontWeight: 800, letterSpacing: -0.8, lineHeight: 38, fontFeatures: { tnum: 1 } },
+      Unit: { size: 12, ...caps, letterSpacing: 2, lineHeight: 16 },
+      Field: { size: 16, fontWeight: 500, lineHeight: 24 },
+      "Step no": { ...SERIF, size: 54, fontWeight: 800, fontStyle: "italic", lineHeight: 50 },
+      "Step title": { ...SERIF, size: 23, fontWeight: 800, letterSpacing: -0.3, lineHeight: 29 },
+      Tier: { ...SERIF, size: 25, fontWeight: 800, letterSpacing: -0.4, lineHeight: 31 },
+      Price: { ...SERIF, size: 48, fontWeight: 800, letterSpacing: -1.4, lineHeight: 50, fontFeatures: { tnum: 1 } },
+      "Price sm": { ...SERIF, size: 40, fontWeight: 800, letterSpacing: -1.1, lineHeight: 42, fontFeatures: { tnum: 1 } },
+      Status: { size: 12, ...caps, fontWeight: 800, letterSpacing: 1.4, lineHeight: 16 },
+      "Act 1": { ...SERIF, size: 42, fontWeight: 800, letterSpacing: -1.1, lineHeight: 46 },
+      "Act 1 md": { ...SERIF, size: 48, fontWeight: 800, letterSpacing: -1.3, lineHeight: 52 },
+      "Act 1 sm": { ...SERIF, size: 36, fontWeight: 800, letterSpacing: -0.9, lineHeight: 40 },
+      "Act 2": { ...SERIF, size: 19, fontWeight: 500, lineHeight: 27 },
+      "Act 3": { size: 13, ...caps, letterSpacing: 1.6, lineHeight: 22 },
+      Day: { size: 14, ...caps, fontWeight: 800, letterSpacing: 2.6, lineHeight: 20 },
+      Q: { ...SERIF, size: 21, fontWeight: 800, letterSpacing: -0.2, lineHeight: 28 },
+      Partner: { ...SERIF, size: 18, fontWeight: 700, lineHeight: 24 },
+      "Name 116": { ...SERIF, size: 104, fontWeight: 800, letterSpacing: -3.6, lineHeight: 104, textAlign: "CENTER" },
+      "Name 88": { ...SERIF, size: 88, fontWeight: 800, letterSpacing: -3, lineHeight: 88, textAlign: "CENTER" },
+      "Name 50": { ...SERIF, size: 50, fontWeight: 800, letterSpacing: -1.6, lineHeight: 52, textAlign: "CENTER" },
+      "Sub 24": { ...SERIF, size: 24, fontWeight: 500, lineHeight: 32, textAlign: "CENTER" },
+      "Sub 18": { ...SERIF, size: 18, fontWeight: 500, lineHeight: 25, textAlign: "CENTER" },
+      "Seal 13": { size: 13, ...caps, fontWeight: 800, letterSpacing: 1.2, lineHeight: 15, textAlign: "CENTER" }
+    });
+    const ornament = (kit, parent, w = 200) => {
+      const row = kit.stack(parent, { direction: "HORIZONTAL", width: w, gap: 10, align: "CENTER", name: "Ornament" });
+      rule(kit, row, "primary", { weight: 2 });
+      kit.vector(row, 12, 12, [poly([[6, 0], [12, 6], [6, 12], [0, 6]])], "primary", { name: "Lozenge" });
+      rule(kit, row, "primary", { weight: 2 });
+    };
+    const L = {
+      s,
+      upper: ["Kicker", "Label", "Unit", "Status", "Act 3", "Day"],
+      radius: 10,
+      pad: 26,
+      rule: 1,
+      chipRadius: 4,
+      center: true,
+      card: { stroke: { color: "primary", width: 2, align: "INSIDE" } },
+      flourish: (kit, h2) => ornament(kit, h2),
+      mark: (kit, f, i) => {
+        kit.vector(f, 32, 32, [poly([[16, 0], [32, 16], [16, 32], [0, 16]])], ["primary", "accent", "panel"][i % 3], { name: "Feature mark" });
+      }
+    };
+    parts(k, L, { radius: 8 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 112, top: 28 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    nav(k, sheet, { links: ["The presale", "Tickets", "The programme", "Getting here"], cta: "Sign up", style: s("Nav"), brandStyle: s("Brand") });
+    const { hero: h, art, foot } = hero(k, sheet, HERO, { align: "CENTER", justify: "CENTER", radius: 16, padding: { top: 150, right: 40, bottom: 250, left: 40 }, stroke: { color: "ink", width: 3, align: "INSIDE" } });
+    awningArt(k, art);
+    tableArt(k, foot);
+    const label = k.stack(h, { width: 640, fill: "card", radius: 6, padding: 8, stroke: { color: "primary", width: 3, align: "INSIDE" }, effects: [hardShadow(k, "ink", 8, 10, 0.85)], name: "Label" });
+    const inner = k.stack(label, { gap: 10, align: "CENTER", padding: { top: 24, right: 26, bottom: 24, left: 26 }, radius: 2, stroke: { color: "primary", width: 1, align: "INSIDE" }, name: "Label inner" });
+    k.text(inner, "THE HARVEST FESTIVAL OF FOOD & WINE", { style: s("Kicker"), color: "cardMuted", align: "CENTER", name: "Label kicker" });
+    k.text(inner, "{{brand.name}}", { style: s("Name 116"), color: "onCard", name: "Hero name" });
+    k.text(inner, "3 \u2013 5 September 2027 \xB7 The Old Cattle Market, Castelmare", { style: s("Sub 24"), color: "onCard", name: "Hero date" });
+    ornament(k, inner, 240);
+    k.text(inner, "THE PRESALE OPENS IN", { style: s("Kicker"), color: "cardMuted", align: "CENTER", name: "Label opens" });
+    countdown(k, inner, L, { prefix: "Hero", clock: CLOCK, fill: "primary", ink: "onPrimary", muted: "onPrimary", gap: 8, radius: 6, pad: [10, 4] });
+    signup(k, inner, L, { name: "Hero signup", placeholder: "Your email address", cta: "Sign up for presale", radius: 8, stroke: { color: "ink", width: 2, align: "INSIDE" } });
+    k.text(inner, "Sign up by Sunday 21 March. One code a person, good for up to six tickets.", { style: s("Small"), color: "cardMuted", align: "CENTER", name: "Label note" });
+    const seal = k.stack(label, { width: 112, height: 112, align: "CENTER", justify: "CENTER", absolute: { x: 640 - 84, y: -34 }, name: "Seal" });
+    const burst = k.vector(seal, 112, 112, [burstPath(112, 18, 0.12)], "accent", { name: "Seal burst", absolute: { x: 0, y: 0 }, effects: [hardShadow(k, "ink", 3, 4, 0.6)] });
+    turn(k, burst, 1 / 18);
+    k.text(seal, "PRESALE\n25 MARCH", { style: s("Seal 13"), color: "onAccent", name: "Seal text" });
+    steps(k, sheet, L, { kicker: "How the presale works", title: "Four dates, in order", aside: "The presale is the only way to the first two prices. Miss it and you pay the late-harvest price, if there is a ticket left.", items: STEPS, boxed: true });
+    const tix = ladder(k, sheet, L, { kicker: "Tickets", title: "The price list", aside: "A weekend ticket covers all three days,\xA0a tasting glass and ten tokens. Each pressing is a fixed number of tickets.", tiers: TIERS, variant: "rungs", stock: STOCK });
+    addOns(k, tix, L, { items: EXTRAS, plan: ["Reserve for \u20AC15", "Pay a deposit of \u20AC15 a ticket now and the rest by 1 July. Suppers and masterclasses can be added until they sell out.", "\u20AC15 deposit"] });
+    lineup(k, sheet, L, { kicker: "The programme, so far", title: "Three days at the market", aside: "The full timetable, with every masterclass and all 180 producers, is published on 1 June.", bills: BILLS, variant: "days", tba: "And sixty more cooks, winemakers and bands to be announced on 1 June.", boxed: true, sep: "\xB7", panel: { radius: 16, pad: { top: 156, right: 56, bottom: 60, left: 56 }, stroke: { color: "ink", width: 3, align: "INSIDE" }, art: (kit, p) => awning(kit, kit.frame(p, { x: 0, y: 0, width: AW, height: 130 }, { name: "Panel art" })) } });
+    artBand(k, sheet, { w: AW, h: 200, focus: 170, radius: 16, draw: (a) => awningArt(k, a) });
+    features(k, sheet, L, { kicker: "With every ticket", title: "What is on the table", items: ON_SITE });
+    travel(k, sheet, L, { kicker: "Getting here and staying", title: "Castelmare, by train or by boat", aside: "The market is in the middle of town. Nine in ten visitors arrive without a car, which is as well.", routes: ROUTES, stays: STAYS });
+    artBand(k, sheet, { w: FW, h: 180, focus: 150, radius: 16, name: "Art band 2", draw: (a) => tableArt(k, a) });
+    faq(k, sheet, L, { kicker: "Questions", title: "Before you sign up", items: QUESTIONS });
+    partners(k, sheet, L, { label: "With our partners", names: ["Banca del Golfo", "Castelmare Tourism", "Olio Verdello", "Radio Costa", "Ferrovie del Golfo", "Acqua Fonteviva"] });
+    closing(k, sheet, L, { title: "The first\xA0pressing will not last until April.", text: "Sign up by Sunday 21 March. Your code arrives on the 23rd and the presale opens on Thursday 25 March at noon.", clock: CLOCK, placeholder: "Your email address", cta: "Sign up for presale", note: "Free to sign up. One code a person.", radius: 16 });
+    legal(k, sheet, L, {
+      links: ["Ticket terms", "Official resale", "Access", "Privacy", "Contact"],
+      lines: ["\xA9 2026 Salt & Vine Festival S.r.l., Castelmare. Tickets are sold under the ticket terms and carry the holder\u2019s name. You must be 18 to taste: please drink with care.", "Tickets may be resold only through the official resale, at the price paid. Tickets bought elsewhere are cancelled. The programme may change."]
+    });
+    drain(k, sheet, "Tier stock", STOCK);
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    presaleResponsive(k, sheet, L, HERO, {
+      restyle: { "Name 116": { tablet: "Name 88", mobile: "Name 50" }, "Sub 24": { mobile: "Sub 18" }, Clock: { mobile: "Clock sm" }, "Act 2": {} },
+      hide: { mobile: ["Label note", "Label kicker"] },
+      tweak: (kit, id, size) => {
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        if (size === "tablet") {
+          each("Label", { width: 600 });
+          each("Seal", { x: 600 - 84 });
+        }
+        if (size === "mobile") {
+          each("Hero", { cornerRadius: 12 });
+          each("Label", { layoutSizingHorizontal: "FILL", padding: { top: 6, right: 6, bottom: 6, left: 6 } });
+          each("Label inner", { padding: { top: 26, right: 12, bottom: 14, left: 12 }, itemSpacing: 8 });
+          each("Seal", { x: 311 - 88, y: -86 });
+          for (const f of kit.named(id, "Art foot")) for (const name of ["Pot", "Pot rim", "Steam"]) for (const n of kit.named(f, name)) kit.patch(n, { visible: false });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  festival_presale_food_default
+};

package/dist/chunks/chunk-YYY4WMY3.js

@@ -0,0 +1,23 @@
+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 {
+  KILOVOLT
+} from "./chunk-UM5CR545.js";
+import {
+  emailHeader
+} from "./chunk-SQZSFDY4.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/email/festival-presale-electronic-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var festival_presale_electronic_header_default = emailHeader(KILOVOLT);
+
+export {
+  festival_presale_electronic_header_default
+};

package/dist/chunks/chunk-Z4T7V2CZ.js

@@ -0,0 +1,44 @@
+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 {
+  neon_apex_racing_default
+} from "./chunk-F472JWP3.js";
+import {
+  pulse_riot_rhythm_default
+} from "./chunk-4BSSD4KD.js";
+import {
+  vanta_fps_default
+} from "./chunk-7N2K5NME.js";
+import {
+  blossom_bash_puzzle_default
+} from "./chunk-MBJ6CWMZ.js";
+import {
+  deckbound_roguelike_default
+} from "./chunk-OG3LNFZ7.js";
+import {
+  emberfall_rpg_default
+} from "./chunk-YK5Y73N2.js";
+import {
+  hearthmoor_farm_default
+} from "./chunk-JLACP7US.js";
+import {
+  iron_lotus_fighter_default
+} from "./chunk-INFIFTBV.js";
+import {
+  ironroot_rts_default
+} from "./chunk-DDM4OFVP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/game/index.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var GAME_UI_TEMPLATES = [vanta_fps_default, pulse_riot_rhythm_default, neon_apex_racing_default, emberfall_rpg_default, ironroot_rts_default, deckbound_roguelike_default, blossom_bash_puzzle_default, iron_lotus_fighter_default, hearthmoor_farm_default].map((s) => ({ ...s, stableNumbers: true }));
+
+export {
+  GAME_UI_TEMPLATES
+};