@popcraft/kit 0.53.4 → 0.53.6

package/dist/chunks/chunk-6HSYKGSD.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-A5DOI23N.js";
+import {
+  burstPath
+} from "./chunk-2VFVKPUT.js";
+import {
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  rule,
+  typeScale
+} from "./chunk-YHF6LRMF.js";
+import {
+  nav,
+  page
+} from "./chunk-ZMD3C2YJ.js";
+import {
+  bloom,
+  hardShadow
+} from "./chunk-YORIY3BT.js";
+import {
+  box,
+  curve3,
+  line,
+  poly,
+  pt3,
+  rng
+} from "./chunk-EJLCQVQK.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/web/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-6JP3U7UA.js

@@ -0,0 +1,169 @@
+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 {
+  sceneLengths,
+  type,
+  withSound
+} from "./chunk-6KMAJZO7.js";
+import {
+  portraitSlot
+} from "./chunk-YUJ6YBZ6.js";
+import {
+  gridPaths
+} from "./chunk-2VFVKPUT.js";
+import {
+  MONO
+} from "./chunk-AXAAXHZF.js";
+import {
+  bed
+} from "./chunk-KHGNV7UQ.js";
+import {
+  hardShadow
+} from "./chunk-YORIY3BT.js";
+import {
+  logoBadge,
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  playScenes,
+  sceneSheets
+} from "./chunk-Y46APA7K.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/scenes/saas-film-youtube-demo-kit.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var B = bed("launch", 24);
+var { beat } = B;
+var ON = [0, 8, 16];
+var CHAPTERS = ["Connect your data", "Model a table", "Build the dashboard", "Share it with the team"];
+var CURRENT = 0;
+var COLS = 8;
+var ROWS = 9;
+var HOT = /* @__PURE__ */ new Set([11, 14, 18, 27, 29, 38, 44, 51, 53, 62, 66]);
+var scenes = [
+  { sheet: "Intro sting", cues: [
+    { layer: "Series row", preset: "fade-in", at: 0, params: { duration: 300 } },
+    { layer: "Prompt", preset: "pop-in", at: 0, params: { duration: 260 } },
+    { layer: "Product name", preset: "typewriter", at: 150, params: { duration: 800 } },
+    { layer: "Prompt", preset: "flash", at: beat(2), params: { duration: 700 } },
+    { layer: "Episode tag", preset: "pop-in", at: beat(1.5), params: { duration: 320 } },
+    { layer: "Episode title", preset: "words-in", at: beat(2), params: { duration: 550, amount: 70 } },
+    { layer: "Cell", preset: "pop-in", at: beat(0.5), params: { duration: 240 }, stagger: { delay: 26 } },
+    { layer: "Prompt", preset: "flash", at: beat(6), params: { duration: 700 } },
+    { layer: "Table", preset: "pulse", at: beat(7), params: { duration: 500, amount: 0.03 } }
+  ] },
+  { sheet: "Lower third", cues: [
+    { layer: "Name bar", preset: "slide-in", at: beat(1), params: { duration: 600, direction: "left", distance: 1300 } },
+    { layer: "Presenter tag", preset: "pop-in", at: beat(2), params: { duration: 320 } },
+    { layer: "Presenter tag", preset: "pulse", at: beat(4), params: { duration: 500, amount: 0.06 } },
+    { layer: "Name bar", preset: "slide-out", at: beat(7.5), params: { duration: 500, direction: "left", distance: 1300 } }
+  ] },
+  { sheet: "Chapter card", cues: [
+    { layer: "Chapter number", preset: "pop-in", at: 0, params: { duration: 380 } },
+    { layer: "Chapter label", preset: "fade-in", at: 150, params: { duration: 300 } },
+    { layer: "Chapter title", preset: "words-in", at: 200, params: { duration: 550, amount: 70 } },
+    { layer: "Chapter rule", preset: "wipe-in", at: beat(1), params: { duration: 600, direction: "right" } },
+    { layer: "Chapter row", preset: "slide-in", at: beat(1.5), params: { duration: 380, direction: "right" }, stagger: { delay: 110 } }
+  ] }
+];
+var LENGTHS = sceneLengths(ON.map((b) => beat(b)), B.duration, scenes);
+var PAD = { top: 86, right: 120, bottom: 96, left: 120 };
+var saas_film_youtube_demo_kit_default = defineTemplate({
+  id: "motion-saas-film-youtube-demo-kit",
+  meta: {
+    name: "SaaS film: YouTube demo opener kit",
+    description: 'Three pieces for a product demo series at 1920\xD71080, in one file: a six-second intro sting (the product name types out, the episode title rises, a table of cells fills in), a lower third with the presenter\u2019s photo slot (under a drawn portrait: drop a photo on it and hide "Placeholder portrait"), name and role, and a chapter card ("01 \xB7 Connect your data") with the run of chapters. Monospace on a pale grid, with music; export each scene on its own',
+    category: "animation",
+    tags: ["animation", "saas", "saas film", "youtube", "demo", "intro", "sting", "lower third", "chapter", "title card", "tutorial", "monospace", "scenes", "music", "audio", "16:9"],
+    platforms: ["youtube", "linkedin", "web"],
+    formats: ["intro", "lower-third", "title-card", "video", "demo"],
+    useCases: ["education", "onboarding", "title", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { scenes },
+  build() {
+    const k = new Kit("SaaS film: YouTube demo opener kit", preset("video-1080p"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F3EDEF", text: "#1B1217", onPaper: "#B3134F", primary: "#D81E6A", onPrimary: "#FFFFFF", card: "#FFFFFF", onCard: "#1B1217" },
+      { name: "Tablekit", title: "Connect your warehouse in five minutes" }
+    );
+    k.palette({ ink: "#1B1217", faint: "#6A5C62", screen: "#2B2227", screenLine: "#3D3138", screenCell: "#4A3B43", photo: "#EAD9DF", skin: "#B9785C" });
+    const made = /* @__PURE__ */ new Set();
+    const T = (name, px, o = {}) => type(k, made, name, px, o);
+    const label = T("Label", 26, { fontWeight: 700, tracking: 0.08, leading: 1.25, textCase: "UPPER", ...MONO });
+    pill(k, "Tag", { fill: "primary", ink: "onPrimary", style: label, label: "EP 04", pad: [10, 20], radius: 0 });
+    const sheets = sceneSheets(k, "video-1080p", scenes.map((s) => s.sheet));
+    const [intro, lower, chapter] = sheets;
+    sheets.forEach((id, i) => {
+      k.flowSheet(id, 30, PAD, i === 1 ? "screen" : "paper", i === 1 ? "MAX" : "SPACE_BETWEEN", "MIN");
+      k.timeline(id, { duration: LENGTHS[i], fps: 30 });
+    });
+    const ruled = (sheet, role) => k.vector(sheet, 1920, 1080, gridPaths(1920, 1080, 60, 2), role ?? k.tint("text", 0.09), { name: "Grid", absolute: { x: 0, y: 0 } });
+    ruled(intro);
+    const CELL = 82, GAP = 10;
+    const table = k.stack(intro, { width: COLS * (CELL + GAP) - GAP, gap: GAP, name: "Table", absolute: { x: 1920 - PAD.right - (COLS * (CELL + GAP) - GAP), y: 158 } });
+    for (let r = 0; r < ROWS; r++) {
+      const row2 = k.stack(table, { direction: "HORIZONTAL", gap: GAP, name: "Table row" });
+      for (let c = 0; c < COLS; c++) {
+        const i = r * COLS + c;
+        k.rect(row2, CELL, CELL, r === 0 ? "text" : HOT.has(i) ? "primary" : k.tint("text", c === 0 ? 0.2 : 0.09), { name: "Cell" });
+      }
+    }
+    const series = k.stack(intro, { direction: "HORIZONTAL", align: "CENTER", name: "Series row" });
+    const mark = k.stack(series, { direction: "HORIZONTAL", width: "HUG", gap: 18, align: "CENTER", name: "Series" });
+    logoBadge(k, mark, { fill: "primary", size: 34, radius: 0 });
+    k.text(mark, "Product demos \xB7 tablekit.example", { style: label, color: "text", autoWidth: true, name: "Series name" });
+    const word = k.stack(intro, { direction: "HORIZONTAL", gap: 30, width: 920, name: "Wordmark" });
+    k.rect(word, 34, 150, "primary", { name: "Prompt" });
+    k.text(word, "{{brand.name}}", { style: T("Wordmark", 170, { fontWeight: 800, leading: 1.02, tracking: -0.04, textCase: "LOWER", ...MONO }), color: "text", name: "Product name" });
+    const episode = k.stack(intro, { width: 860, gap: 20, name: "Episode words" });
+    k.instance(episode, "Tag", { Label: "EP 04" }, { name: "Episode tag" });
+    k.text(episode, "{{brand.title}}", { style: T("Episode", 76, { fontWeight: 800, leading: 1.04, tracking: -0.035 }), color: "text", name: "Episode title" });
+    ruled(lower, "screenLine");
+    const stand = k.stack(lower, { width: 1300, height: 560, name: "Footage stand-in", absolute: { x: 310, y: 130 } });
+    for (let r = 0; r < 6; r++) for (let c = 0; c < 5; c++) k.rect(stand, c === 0 ? 300 : 220, 56, r === 0 ? "screenLine" : "screenCell", { name: "Stand-in cell", absolute: { x: c === 0 ? 0 : 320 + (c - 1) * 240, y: r * 84 }, opacity: r === 0 ? 1 : 0.55 });
+    const bar = k.stack(lower, { direction: "HORIZONTAL", width: "HUG", gap: 30, align: "CENTER", fill: "card", padding: { top: 18, right: 40, bottom: 18, left: 18 }, stroke: { color: "ink", width: 4, align: "INSIDE" }, effects: [hardShadow(k, "primary", 12, 12)], name: "Name bar" });
+    portraitSlot(k, bar, 136, 136, { radius: 0, ground: "photo", skin: "skin", top: "ink", halo: "card", name: "Presenter slot", photo: "Presenter photo" });
+    const who = k.stack(bar, { width: "HUG", gap: 6, name: "Presenter" });
+    k.text(who, "Priya Raman", { style: T("Presenter", 60, { fontWeight: 800, leading: 1.05, tracking: -0.035 }), color: "onCard", autoWidth: true, name: "Presenter name" });
+    k.text(who, "Developer advocate, Tablekit", { style: T("Role", 30, { fontWeight: 500, leading: 1.3, ...MONO }), color: "faint", autoWidth: true, name: "Presenter role" });
+    k.instance(bar, "Tag", { Label: "Live build" }, { name: "Presenter tag" });
+    ruled(chapter);
+    k.patch(chapter, { primaryAxisAlignItems: "CENTER" });
+    const row = k.stack(chapter, { direction: "HORIZONTAL", gap: 80, align: "CENTER", name: "Chapter" });
+    k.text(row, `0${CURRENT + 1}`, { style: T("Number", 460, { fontWeight: 800, leading: 0.9, tracking: -0.06, ...MONO }), color: "onPaper", autoWidth: true, name: "Chapter number" });
+    const words = k.stack(row, { gap: 26, name: "Chapter words" });
+    k.text(words, `Chapter ${CURRENT + 1} of ${CHAPTERS.length}`, { style: label, color: "text", name: "Chapter label" });
+    k.text(words, CHAPTERS[CURRENT], { style: T("Chapter", 124, { fontWeight: 900, leading: 0.98, tracking: -0.045 }), color: "text", name: "Chapter title" });
+    k.stack(words, { height: 10, fill: "primary", clip: true, name: "Chapter rule" });
+    const list = k.stack(words, { gap: 10, name: "Chapters" });
+    CHAPTERS.forEach((c, i) => {
+      const item = k.stack(list, { direction: "HORIZONTAL", gap: 22, align: "CENTER", padding: { top: 10, right: 20, bottom: 10, left: 20 }, ...i === CURRENT ? { fill: "primary" } : {}, name: "Chapter row" });
+      k.text(item, `0${i + 1}`, { style: T("Row", 30, { fontWeight: 700, leading: 1.25, ...MONO }), color: i === CURRENT ? "onPrimary" : "text", autoWidth: true, name: "Row number" });
+      k.text(item, c, { style: T("Row", 30, { fontWeight: 700, leading: 1.25, ...MONO }), color: i === CURRENT ? "onPrimary" : "text", name: "Row title" });
+    });
+    playScenes(k, "comp-demo-kit", "YouTube demo opener kit", sheets, scenes, "paper");
+    k.setCover(intro);
+    return withSound(k.finish(), { "comp-demo-kit": B.audio });
+  }
+});
+
+export {
+  saas_film_youtube_demo_kit_default
+};