@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-EYAHH6QG.js

@@ -0,0 +1,179 @@
+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 {
+  arrowPath,
+  gridPaths
+} from "./chunk-YNOCYFZ4.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  pattern
+} from "./chunk-QLV6445V.js";
+import {
+  hardShadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  box
+} from "./chunk-BNVLVZUT.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/saas-kit-youtube-thumbs.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var THUMBS = [
+  { name: "1 Demo", ground: "primary", ink: "onPrimary", lines: ["CRM in", "9 minutes"], mark: 1, style: "Title 140", label: "Full demo \xB7 no cuts", length: "9:04", face: "right", ui: "board" },
+  { name: "2 Comparison", ground: "paper", ink: "text", lines: ["Sheets", "vs a CRM"], mark: 0, style: "Title 140", label: "We ran both for 30 days", length: "14:20", face: "left", ui: "table" },
+  { name: "3 Tutorial", ground: "secondary", ink: "onSecondary", lines: ["3 fixes", "2\xD7 replies"], mark: 1, style: "Title 140", label: "Tutorial \xB7 episode 7", length: "6:41", face: "right", ui: "settings" }
+];
+var FACE = { w: 370, h: 560 };
+var grid = (w, h) => gridPaths(w, h, 80, 2);
+function presenter(k, photo, w, h) {
+  const cx = w / 2, rx = w * 0.2, ry = w * 0.235, cy = h * 0.38, top = cy + ry * 1.3;
+  const at = { absolute: { x: 0, y: 0 } };
+  const ring = (n, fx, fy, from = 0, to = Math.PI * 2) => Array.from({ length: n }, (_, i) => {
+    const a = from + (to - from) * i / (n - 1);
+    return { x: cx + rx * fx * Math.sin(a), y: cy - ry * fy * Math.cos(a) };
+  });
+  k.ellipse(photo, Math.round(w * 0.92), "slotLight", { name: "Backdrop light", absolute: { x: Math.round(w * 0.04), y: Math.round(cy - w * 0.5) } });
+  const shoulders = { closed: true, points: [
+    { x: cx - w * 0.5, y: h },
+    { x: cx - w * 0.5, y: top + ry * 1.1, handleOut: { x: cx - w * 0.5, y: top + ry * 0.3 } },
+    { x: cx - w * 0.2, y: top, handleIn: { x: cx - w * 0.4, y: top } },
+    { x: cx + w * 0.2, y: top, handleOut: { x: cx + w * 0.4, y: top } },
+    { x: cx + w * 0.5, y: top + ry * 1.1, handleIn: { x: cx + w * 0.5, y: top + ry * 0.3 } },
+    { x: cx + w * 0.5, y: h }
+  ] };
+  k.vector(photo, w, h, [shoulders], "coat", { name: "Jacket", ...at });
+  k.vector(photo, w, h, [{ closed: true, points: [{ x: cx - w * 0.15, y: top }, { x: cx + w * 0.15, y: top }, { x: cx + w * 0.045, y: h }, { x: cx - w * 0.045, y: h }] }], "shirt", { name: "Shirt", ...at });
+  k.vector(photo, w, h, [box(cx - w * 0.085, cy + ry * 0.6, w * 0.17, ry * 0.9), { closed: true, points: [{ x: cx - w * 0.1, y: top - 1 }, { x: cx + w * 0.1, y: top - 1 }, { x: cx, y: top + w * 0.15 }] }], "sitter", { name: "Neck", ...at });
+  k.vector(photo, w, h, [{ closed: true, points: ring(32, 1, 1) }], "sitter", { name: "Head", ...at });
+  const crown = ring(18, 1.1, 1.12, -1.95, 1.95);
+  const fringe = [{ x: cx + rx * 0.9, y: cy - ry * 0.12 }, { x: cx + rx * 0.5, y: cy - ry * 0.56 }, { x: cx - rx * 0.25, y: cy - ry * 0.5 }, { x: cx - rx * 0.92, y: cy - ry * 0.04 }];
+  k.vector(photo, w, h, [{ closed: true, points: [...crown, ...fringe] }], "hair", { name: "Hair", ...at });
+}
+var saas_kit_youtube_thumbs_default = defineTemplate({
+  id: "social-saas-kit-youtube-thumbs",
+  meta: {
+    name: "SaaS launch YouTube thumbnail set",
+    description: "Three YouTube thumbnails for a product channel in the Swiss typographic look: a demo, a comparison and a tutorial. Each has a huge three- or four-word title with one line on a yellow bar, a face photo slot cut in beside it, and a crop of the product with the point of the video circled. Red, white and black on one grid, so the channel reads as a series. 1280 \xD7 720",
+    category: "social",
+    tags: ["saas", "saas launch", "youtube", "thumbnail", "demo", "tutorial", "comparison", "swiss", "typographic", "grid", "face", "product ui"],
+    platforms: ["youtube"],
+    formats: ["thumbnail", "demo"],
+    useCases: ["launch", "education", "comparison"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  sequence: true,
+  build() {
+    const k = new Kit("SaaS launch YouTube thumbnail set", preset("youtube-thumb"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F4F2EC", text: "#0C0C0C", primary: "#E4002B", onPrimary: "#FFFFFF", secondary: "#0C0C0C", onSecondary: "#F4F2EC", accent: "#FFD400", onAccent: "#0C0C0C" },
+      { name: "Rivet" }
+    );
+    k.palette({ ink: "#0C0C0C", onInk: "#FFFFFF", slot: "#CFCBC1", slotLight: "#E2DED4", sitter: "#B49C86", hair: "#3F3A33", coat: "#2B2A27", shirt: "#F4F2EC", win: "#FFFFFF", winInk: "#0C0C0C", winMuted: "#5D5B55", winLine: "#DAD7CF", lane: "#F1EFE9", hot: "#E4002B" });
+    k.textStyle("Title 140", { size: 140, fontWeight: 900, letterSpacing: -7.5, lineHeight: 124, textCase: "UPPER" });
+    k.textStyle("Label 24", { size: 24, fontWeight: 800, letterSpacing: 2.4, lineHeight: 30, textCase: "UPPER" });
+    k.textStyle("Length 24", { ...MONO, size: 24, fontWeight: 800, lineHeight: 28 });
+    k.textStyle("UI 18", { size: 18, fontWeight: 700, letterSpacing: -0.2, lineHeight: 22 });
+    k.textStyle("UI mono 16", { ...MONO, size: 16, fontWeight: 600, lineHeight: 20 });
+    pill(k, "Length", { fill: "ink", ink: "onInk", style: "Length 24", label: "9:04", pad: [6, 12], radius: 0 });
+    const product = (sheet, t, x, y) => {
+      const W = 560, H = 330;
+      const win = k.frame(sheet, { x, y, width: W, height: H }, { name: "Product", fill: "win", clip: true, stroke: { color: "ink", width: 5, align: "INSIDE", join: "MITER" }, effects: [hardShadow(k, "ink", 12, 12)] });
+      k.rect(win, W, 44, "lane", { name: "Bar", absolute: { x: 0, y: 0 } });
+      k.text(win, t.ui === "board" ? "rivet / pipeline" : t.ui === "table" ? "rivet / contacts" : "rivet / settings / sequences", { style: "UI mono 16", color: "winMuted", autoWidth: true, name: "Path", absolute: { x: 18, y: 12 } });
+      k.rect(win, W, 3, "ink", { name: "Bar rule", absolute: { x: 0, y: 44 } });
+      if (t.ui === "board") {
+        ;
+        ["New", "Talking", "Won"].forEach((lane, i) => {
+          const lx = 18 + i * 180;
+          k.text(win, lane, { style: "UI 18", color: "winInk", autoWidth: true, name: "Lane", absolute: { x: lx, y: 62 } });
+          const cards = [];
+          for (let c = 0; c < 3 - (i === 1 ? 1 : 0); c++) cards.push(box(0, c * 74, 164, 62));
+          k.vector(win, 164, 220, cards, i === 2 ? "accent" : "lane", { name: "Deals", absolute: { x: lx, y: 96 }, stroke: { color: "ink", width: 3, align: "INSIDE", join: "MITER" } });
+          const lines = [];
+          for (let c = 0; c < 3 - (i === 1 ? 1 : 0); c++) {
+            lines.push(box(12, c * 74 + 14, 96, 8), box(12, c * 74 + 34, 60, 8));
+          }
+          k.vector(win, 164, 220, lines, "ink", { name: "Deal lines", absolute: { x: lx, y: 96 } });
+        });
+      } else if (t.ui === "table") {
+        const rules = [], cells = [], next = [];
+        for (let r = 0; r < 6; r++) {
+          rules.push(box(0, 92 + r * 44, W, 2));
+          cells.push(box(18, 64 + r * 44, 120 + r * 37 % 60, 10), box(210, 64 + r * 44, 90 + r * 53 % 50, 10));
+          next.push(box(392, 58 + r * 44, 140, 22));
+        }
+        k.vector(win, W, H, rules, "winLine", { name: "Rules", absolute: { x: 0, y: 0 } });
+        k.vector(win, W, H, cells, "ink", { name: "Cells", absolute: { x: 0, y: 0 } });
+        k.vector(win, W, H, next, "accent", { name: "Next steps", absolute: { x: 0, y: 0 }, stroke: { color: "ink", width: 3, align: "INSIDE", join: "MITER" } });
+      } else {
+        ;
+        ["Send at their 9 am", "Stop on any reply", "Bump after 3 days"].forEach((label, i) => {
+          const ty = 70 + i * 84;
+          k.text(win, label, { style: "UI 18", color: "winInk", autoWidth: true, name: "Setting", absolute: { x: 24, y: ty + 12 } });
+          k.rect(win, 96, 48, "accent", { name: "Toggle", radius: 24, absolute: { x: 430, y: ty }, stroke: { color: "ink", width: 4, align: "INSIDE" } });
+          k.ellipse(win, 32, "ink", { name: "Knob", absolute: { x: 486, y: ty + 8 } });
+          k.rect(win, W - 48, 2, "winLine", { name: "Setting rule", absolute: { x: 24, y: ty + 66 } });
+        });
+      }
+      return win;
+    };
+    const sheets = THUMBS.map((t, i) => {
+      const sheet = i === 0 ? k.sheet : k.addSheet(preset("youtube-thumb"), t.name);
+      k.nameSheet(sheet, t.name);
+      const right = t.face === "right";
+      k.flowSheet(sheet, 0, { top: 40, right: right ? 470 : 48, bottom: 40, left: right ? 48 : 500 }, t.ground, "MIN", "MIN");
+      k.patch(sheet, { clipsContent: true, itemSpacing: 22, counterAxisSpacing: 22 });
+      pattern(k, sheet, "Grid", t.ink, grid, 0.1);
+      const px = right ? 250 : 660;
+      product(sheet, t, px, 440);
+      const ring = t.ui === "board" ? { x: px + 350, y: 512, w: 220 } : t.ui === "table" ? { x: px + 350, y: 470, w: 230 } : { x: px + 390, y: 480, w: 180 };
+      k.ellipse(sheet, ring.w, [], { name: "Ring", absolute: { x: ring.x, y: ring.y }, stroke: { color: "accent", width: 12 }, effects: [hardShadow(k, "ink", 4, 4)] });
+      const arrow = k.vector(sheet, 170, 96, [arrowPath(170, 96, 30)], "accent", { name: "Arrow", absolute: { x: ring.x - 160, y: ring.y + 150 }, stroke: { color: "ink", width: 5, join: "MITER" } });
+      k.patch(arrow, { rotation: -24 });
+      const fx = right ? 1280 - 48 - FACE.w : 48;
+      k.rect(sheet, FACE.w, FACE.h, "accent", { name: "Face block", absolute: { x: fx + (right ? -22 : 22), y: 118 }, stroke: { color: "ink", width: 5, align: "INSIDE", join: "MITER" } });
+      const face = k.photo(sheet, FACE.w, FACE.h, { ground: "slot", name: "Face photo", absolute: { x: fx, y: 96 } });
+      presenter(k, face, FACE.w, FACE.h);
+      k.rect(sheet, FACE.w, FACE.h, [], { name: "Face edge", absolute: { x: fx, y: 96 }, stroke: { color: "ink", width: 5, align: "INSIDE", join: "MITER" } });
+      k.instance(sheet, "Length", { Label: t.length }, { name: "Length", absolute: { x: fx + FACE.w - 96, y: 96 + FACE.h - 52 } });
+      const head = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Label row" });
+      k.logo(head, 30, 30, { placeholder: t.ground === "paper" ? "tile" : "mark" });
+      k.text(head, `{{brand.name}} \xB7 ${t.label}`, { style: "Label 24", color: t.ink, name: "Label" });
+      const title = k.stack(sheet, { gap: 6, name: "Title" });
+      t.lines.forEach((line, n) => {
+        if (n === t.mark) {
+          const bar = k.stack(title, { width: "HUG", fill: "accent", padding: { top: 0, right: 18, bottom: 8, left: 14 }, stroke: { color: "ink", width: 5, align: "OUTSIDE", join: "MITER" }, effects: [hardShadow(k, "ink", 10, 10)], name: "Title bar" });
+          k.text(bar, line, { style: t.style, color: "onAccent", autoWidth: true, name: "Marked line" });
+        } else k.text(title, line, { style: t.style, color: t.ink, name: "Title line" });
+      });
+      return sheet;
+    });
+    k.setCover(sheets[0]);
+    return k.finish();
+  }
+});
+
+export {
+  saas_kit_youtube_thumbs_default
+};

package/dist/chunks/chunk-EZA4CAAQ.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-2OTT3QQU.js";
+import {
+  burstPath
+} from "./chunk-YNOCYFZ4.js";
+import {
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  rule,
+  typeScale
+} from "./chunk-TJBKMQY5.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-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.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
+};