@popcraft/kit 0.31.0 → 0.32.0

package/dist/chunks/chunk-Y6DHN37V.js

@@ -0,0 +1,98 @@
+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 {
+  feedVariants,
+  outro,
+  pill,
+  resizePhoto,
+  verticalPadding
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/promo-new-product.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var CONTENT = ["New tag", "Product photo", "Product name", "Notes", "Price", "Order button"];
+var cues = [
+  { layer: "New tag", preset: "drop-in", at: 100 },
+  { layer: "Product photo", preset: "scale-in", at: 250, params: { duration: 900, amount: 0.7 } },
+  { layer: "Product shot", preset: "push-in", at: 1200, params: { duration: 8800, amount: 0.06 } },
+  { layer: ["Product name", "Notes"], preset: "rise-in", at: 800, stagger: { delay: 160 } },
+  { layer: "Price", preset: "pop-in", at: 1250 },
+  { layer: "Order button", preset: "rise-in", at: 1450 },
+  { layer: "Price", preset: "pulse", at: 4800, params: { amount: 0.06 } },
+  { layer: "Order button", preset: "pulse", at: 7600 },
+  outro(CONTENT, 10600)
+];
+var promo_new_product_default = defineTemplate({
+  id: "motion-promo-new-product",
+  meta: {
+    name: "New product promo",
+    description: "A 12-second vertical launch reel: a product photo scales in and pushes in while the name, tasting notes, price and an order button rise in \u2014 9:16 with square and 4:5 cuts, and a photo frame for your shot",
+    category: "animation",
+    tags: ["animation", "product", "launch", "reel", "tiktok", "shorts", "promo", "photo"],
+    platforms: ["instagram", "tiktok", "youtube", "facebook"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "ad"],
+    useCases: ["launch"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("New product promo", preset("ig-story"));
+    k.brand(
+      { paper: "#F3ECE2", text: "#2A1D15", onPaper: "#6B5A4C", primary: "#2A1D15", onPrimary: "#F3ECE2", accent: "#E8836B", onAccent: "#2A1D15", muted: "#CDB9A6" },
+      { product: "Huila Pink Bourbon", notes: "Rhubarb, hibiscus and cane sugar \xB7 light roast" }
+    );
+    k.textStyle("Name 84", { size: 84, fontWeight: 800, letterSpacing: -2, lineHeight: 88, textAlign: "CENTER" });
+    k.textStyle("Name 64", { size: 64, fontWeight: 800, letterSpacing: -2, lineHeight: 68, textAlign: "CENTER" });
+    k.textStyle("Notes 38", { size: 38, fontWeight: 500, lineHeight: 48, textAlign: "CENTER" });
+    k.textStyle("Tag 30", { size: 30, fontWeight: 800, letterSpacing: 3, lineHeight: 36 });
+    k.textStyle("Price 44", { size: 44, fontWeight: 800, lineHeight: 52 });
+    k.textStyle("Button 40", { size: 40, fontWeight: 700, lineHeight: 48 });
+    pill(k, "Tag", { fill: "accent", ink: "onAccent", style: "Tag 30", label: "NEW ARRIVAL" });
+    pill(k, "Price chip", { fill: "primary", ink: "onPrimary", style: "Price 44", label: "$21 \xB7 250 g", pad: [14, 32] });
+    pill(k, "Button", { fill: "accent", ink: "onAccent", style: "Button 40", label: "Order now", pad: [24, 56] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 32, verticalPadding(), "paper", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: 12e3, fps: 30 });
+    k.instance(sheet, "Tag", { Label: "NEW ARRIVAL" }, { name: "New tag" });
+    const frame = k.stack(sheet, { width: "HUG", radius: 48, clip: true, name: "Product photo" });
+    const shot = k.stack(frame, { width: "HUG", name: "Product shot" });
+    k.photo(shot, 600, 600, { radius: 48, ground: "muted", name: "Photo frame" });
+    k.text(sheet, "{{brand.product}}", { style: "Name 84", color: "text", name: "Product name" });
+    k.text(sheet, "{{brand.notes}}", { style: "Notes 38", color: "onPaper", name: "Notes" });
+    k.instance(sheet, "Price chip", { Label: "$21 \xB7 250 g" }, { name: "Price" });
+    k.instance(sheet, "Button", { Label: "Order now" }, { name: "Order button" });
+    k.cues(sheet, cues);
+    k.variants(sheet, feedVariants({ post: 56, portrait: 72 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 18, counterAxisSpacing: 18 });
+        for (const p of kit.named(id, "Photo frame")) resizePhoto(kit, p, 380, 380);
+        for (const n of kit.named(id, "Product name")) kit.restyle(n, "Name 64");
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { itemSpacing: 24, counterAxisSpacing: 24 });
+        for (const p of kit.named(id, "Photo frame")) resizePhoto(kit, p, 560, 560);
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  promo_new_product_default
+};

package/dist/chunks/chunk-Y7F6GN5L.js

@@ -0,0 +1,126 @@
+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 {
+  LATCH,
+  QUIET,
+  darkBrand,
+  lamp,
+  lift,
+  lockup
+} from "./chunk-M2BHMDSB.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-K3QP3IUF.js";
+import {
+  chart,
+  gridPaths
+} from "./chunk-UDE42EDS.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  hz
+} from "./chunk-WV6ZTKE7.js";
+import {
+  glow
+} from "./chunk-M6VTXO6F.js";
+import {
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/email/style-dark-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Dark SaaS email header";
+var DURATION = 6e3;
+var CARD = { w: 250, pad: 16 };
+var INNER = CARD.w - CARD.pad * 2;
+var CHART_H = 64;
+var cues = [
+  { layer: "Last point", preset: "pulse", at: 500, params: { duration: 600, amount: 0.5 } },
+  { layer: "Open button", preset: "pulse", at: 2400, params: { duration: 600, amount: 0.05 } },
+  { layer: "Last point", preset: "pulse", at: 3500, params: { duration: 600, amount: 0.5 } },
+  { layer: "Share figure", preset: "pulse", at: 4600, params: { duration: 600, amount: 0.04 } }
+];
+var style_dark_header_default = defineTemplate({
+  id: "email-saas-style-dark-header",
+  meta: {
+    name: `${NAME} (animated GIF)`,
+    description: "A 600 \xD7 300 animated header for a product-news email in the dark precision look: the sender, the news, the button and a product card are all on the first frame (for Outlook), then a glint runs along the rollout steps, a scan line crosses the chart, a lamp breathes and the button nudges, all returning to where they began. A seamless 6-second GIF",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "saas", "dark", "dark mode", "announcement", "feature", "newsletter", "developer tools", "loop"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["announcement", "newsletter", "changelog"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues },
+  build() {
+    const k = new Kit(NAME, HEADER);
+    k.quantizeGeometry = true;
+    darkBrand(k, { offer: "Auto-rollback is live.", when: "Set a line for your error rate. Cross it, and the old code is back in four seconds." });
+    k.textStyle("Brand 16", { size: 16, fontWeight: 600, letterSpacing: -0.3, lineHeight: 20 });
+    k.textStyle("Offer 40", { size: 40, fontWeight: 700, letterSpacing: -1.9, lineHeight: 40 });
+    k.textStyle("When 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    k.textStyle("Button 14", { size: 14, fontWeight: 600, lineHeight: 18 });
+    k.textStyle("Label 12", { ...MONO, size: 12, fontWeight: 500, letterSpacing: 0.4, lineHeight: 16 });
+    k.textStyle("Figure 52", { size: 52, fontWeight: 700, letterSpacing: -2.4, lineHeight: 52, fontFeatures: { tnum: 1 } });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 14", label: "See it roll back", pad: [9, 16], radius: 7 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 0, right: 26, bottom: 0, left: 30 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    k.vector(sheet, 600, 300, gridPaths(600, 300, 50, 1), k.tint("text", 0.07), { name: "Grid", absolute: { x: 0, y: 0 } });
+    glow(k, sheet, { x: 470, y: 20, w: 620, role: "light", alpha: 0.08, name: "Light" });
+    const main = k.stack(sheet, { direction: "HORIZONTAL", gap: 26, align: "CENTER", name: "Main" });
+    const copy = k.stack(main, { gap: 12, name: "Copy" });
+    lockup(k, copy, { size: 16, style: "Brand 16", name: "Lockup" });
+    k.text(copy, "{{brand.offer}}", { style: "Offer 40", color: "text", name: "Offer" });
+    k.text(copy, "{{brand.when}}", { style: "When 14", color: "onPaper", name: "When" });
+    k.instance(copy, "Button", { Label: "See it roll back" }, { name: "Open button" });
+    const card = k.stack(main, { width: CARD.w, fill: "card", radius: 12, padding: CARD.pad, gap: 10, stroke: { color: "edge", width: 1, align: "INSIDE" }, effects: [lift(12, 30, 0.6)], name: "Card" });
+    const head = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Card head" });
+    k.text(head, LATCH.flag, { style: "Label 12", color: "onCard", autoWidth: true, name: "Flag name" });
+    const status = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 6, align: "CENTER", name: "Status" });
+    lamp(k, status, 7, "signal", { name: "Status lamp", breathe: hz(3, DURATION) });
+    k.text(status, "HEALTHY", { style: "Label 12", color: "cardMuted", autoWidth: true, name: "Status label" });
+    k.text(card, "100%", { style: "Figure 52", color: "onCard", autoWidth: true, name: "Share figure" });
+    const steps = k.stack(card, { direction: "HORIZONTAL", width: INNER, height: 6, gap: 4, clip: true, name: "Steps" });
+    for (let i = 0; i < 4; i++) k.rect(steps, (INNER - 12) / 4, 6, "signal", { radius: 2, name: "Step" });
+    const glint = k.rect(steps, 28, 6, "onCard", { name: "Glint", opacity: 0.85, absolute: { x: -28, y: 0 } });
+    k.behave(glint, "translateX", [{ kind: "spin", rate: (INNER + 28) * 2 / (DURATION / 1e3) }, { kind: "mod", period: INNER + 28 }]);
+    const well = k.stack(card, { width: INNER, height: CHART_H, fill: "well", radius: 6, clip: true, stroke: { color: "line", width: 1, align: "INSIDE" }, name: "Chart" });
+    k.vector(well, INNER, 2, [{ closed: false, points: [{ x: 0, y: 1 }, { x: INNER, y: 1 }] }], [], { name: "Limit", stroke: { color: "warn", width: 1.5, dash: [5, 4], cap: "NONE" }, absolute: { x: 0, y: 16 } });
+    const c = chart(QUIET, INNER - 10, CHART_H, 0.62);
+    k.vector(well, INNER - 10, CHART_H, [c.area], k.tint("signal", 0.12), { name: "Rate area", absolute: { x: 0, y: 0 } });
+    k.vector(well, INNER - 10, CHART_H, [c.line], [], { name: "Rate line", stroke: { color: "signal", width: 2, join: "ROUND" }, absolute: { x: 0, y: 0 } });
+    const end = c.pts[c.pts.length - 1];
+    k.ellipse(well, 8, "signal", { name: "Last point", absolute: { x: end.x - 4, y: end.y - 4 } });
+    const scan = k.rect(well, 1, CHART_H, "onCard", { name: "Scan", opacity: 0.35, absolute: { x: -1, y: 0 } });
+    k.behave(scan, "translateX", [{ kind: "spin", rate: (INNER + 1) * 2 / (DURATION / 1e3) }, { kind: "mod", period: INNER + 1 }]);
+    const foot = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Card foot" });
+    k.text(foot, "GUARDRAIL ON", { style: "Label 12", color: "signal", autoWidth: true, name: "Guardrail" });
+    k.text(foot, `ERRORS ${LATCH.errors}`, { style: "Label 12", color: "cardMuted", autoWidth: true, name: "Errors" });
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  style_dark_header_default
+};

package/dist/chunks/chunk-YAKOWHWE.js

@@ -0,0 +1,361 @@
+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,
+  bunting,
+  closing,
+  countdown,
+  disc,
+  drain,
+  faq,
+  features,
+  hero,
+  hill,
+  ladder,
+  legal,
+  lineup,
+  partners,
+  parts,
+  presaleResponsive,
+  shape,
+  signup,
+  steps,
+  stockCount,
+  sway,
+  ticking,
+  travel,
+  turn
+} from "./chunk-AOZ3KKWW.js";
+import {
+  burstPath
+} from "./chunk-UDE42EDS.js";
+import {
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  typeScale
+} from "./chunk-DAF5SK5X.js";
+import {
+  nav,
+  page
+} from "./chunk-TF2MO3UA.js";
+import {
+  grain,
+  hardShadow
+} from "./chunk-M6VTXO6F.js";
+import {
+  curve3,
+  poly,
+  pt3,
+  rng
+} from "./chunk-6RCDZU4R.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/festival-presale-folk.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Festival presale page: folk in the fields";
+var CLOCK = { days: "09", hours: "14", minutes: "27", from: 52, to: 46 };
+var STOCK = { label: "Going quickly", from: 3912, left: 3880, total: 1e4 };
+var AW = 1200;
+var AH = 860;
+var SUN = { x: 850, y: 330, r: 168 };
+var HERO = {
+  artW: AW,
+  artH: AH,
+  h: { desktop: 860, laptop: 830, tablet: 900, mobile: 716 },
+  fit: { laptop: { s: 0.966, ax: 1200, ay: 860, hx: 1120, hy: 830 }, tablet: { s: 1.05, ax: 850, ay: 860, hx: 470, hy: 900 }, mobile: { s: 0.9, ax: 850, ay: 616, hx: 226, hy: 418 } },
+  pad: { tablet: { top: 56, right: 36, bottom: 40, left: 36 }, mobile: { top: 34, right: 16, bottom: 20, left: 16 } }
+};
+var STEPS = [
+  ["By 7 Feb", "Put your name down", "Leave your email by Sunday 7 February, midnight. It is free, and it is one sign-up per person."],
+  ["9 Feb", "A code in the post", "On Tuesday 9 February we email your own code and a link. Each code buys up to six tickets, once."],
+  ["11 Feb \xB7 09:00", "The presale opens", "Thursday 11 February at 9 in the morning. The queue opens at 8:30, and places in it are drawn by lot."],
+  ["19 Feb", "General sale", "Anything left goes on general sale on Friday 19 February at 9, at the price of the tier it has reached."]
+];
+var TIERS = [
+  { tag: "Supporter", name: "Weekend, with camping", price: "\xA3168", note: "5,000 tickets, offered to last year\u2019s campers in October. All gone.", status: "sold", chip: "Sold out" },
+  { tag: "Tier one", name: "Weekend, with camping", price: "\xA3189", note: "On sale now to the mailing list. What is\xA0left\xA0opens to presale codes on 11 February.", status: "selling", chip: "On sale" },
+  { tag: "Tier two", name: "Weekend, with camping", price: "\xA3209", note: "12,000 tickets, kept back for the presale and opened when tier one is gone.", status: "next", chip: "Presale \xB7 11 Feb" },
+  { tag: "Tier three", name: "Weekend, with camping", price: "\xA3229", note: "The last 8,000, for the general sale on 19 February, if any are left by then.", status: "later", chip: "General \xB7 19 Feb" }
+];
+var EXTRAS = [
+  ["Bell tent for four", "+ \xA3360", "Pitched and waiting in the quiet field by the orchard, with beds, rugs and a lantern."],
+  ["Campervan pitch", "+ \xA395", "A marked pitch on hard ground with room for an awning. Hook-up is \xA330 more."],
+  ["Under-12s", "Free", "Children under 12 come free with an adult,\xA0but each needs a (free) ticket of their own."]
+];
+var BILLS = [
+  { label: "Friday 23 July", note: "Barn stage", heads: ["The Larkspur Union", "Odette Marlowe"], acts: ["Fennel Road", "The Wren Sisters", "Tobias Pell", "Cinder & Thread"], more: ["Marsh Lantern", "Ada\xA0Brightwater", "The Quiet Mile", "Saltgrass", "Josie Thrupp"] },
+  { label: "Saturday 24 July", note: "Barn stage", heads: ["Hollow Kin", "Maren & the Tide"], acts: ["Half Acre", "Paper Lantern Club", "Wilder Still", "Little Orchard"], more: ["Bramble Choir", "Ned Farrow", "The Low Meadows", "Isla Penhale", "Greenfinch"] },
+  { label: "Sunday 25 July", note: "Barn stage", heads: ["Old Coat", "June Addison"], acts: ["The Hayloft Sessions", "Rook & Rowan", "Elsie Vane", "Tin Whistle Parade"], more: ["Morning Chorus Collective", "Fable Hill", "Wendell Ash", "The Sunday Fiddlers"] }
+];
+var ON_SITE = [
+  ["Five stages", "From the Barn stage and its 20,000 to the forty seats of the Lantern Tent, all inside a ten-minute walk."],
+  ["Camping in the orchard", "Every weekend ticket includes four nights. Quiet and family fields, hot showers and a camp shop."],
+  ["The mill pond", "Lifeguarded swimming from eight till six, and sauna boats by the hour in the morning mist."],
+  ["Food from the valley", "Sixty kitchens and three long-table suppers. Most of what you eat was grown within 30 miles."],
+  ["Workshops", "Fiddle for beginners, spoon carving, sunrise yoga and songwriting circles. Sign up on the day."],
+  ["Access", "Raised viewing at the big stages, an accessible campsite with power, and a free ticket for an assistant."]
+];
+var ROUTES = [
+  ["Train", "Hartcombe Halt is on the Wessendale line, 1 h 50 from the capital. A shuttle meets every train.", "Shuttle \xA34 return"],
+  ["Coach", "Direct coaches from nine towns and cities, arriving on Thursday and Friday and leaving on Monday.", "From \xA332 return"],
+  ["Car", "Car parks open on Thursday at noon. Book a pass ahead: none are sold at the gate.", "\xA325 a car"],
+  ["Bicycle", "Ride in along the canal path and we carry your bags from the station to your pitch.", "Free, with breakfast"]
+];
+var STAYS = [
+  ["Your own tent", "Included with every weekend ticket, from Thursday noon to Monday noon.", "Included"],
+  ["Bell tents", "Pre-pitched for four, with real beds and bedding, by the orchard.", "+ \xA3360"],
+  ["Inns and farm stays", "A list of rooms within the shuttle\u2019s loop, held at festival rates until 1 May.", "From \xA370"]
+];
+var QUESTIONS = [
+  ["How many tickets can I buy?", "Six with a presale code, eight in the general sale. Each ticket carries a name, which you can change for free until 1 July."],
+  ["Does a code guarantee a ticket?", "No. It lets you into the presale queue. More codes go out than there are tickets, so be there at nine."],
+  ["Can I sell a ticket on?", "Only through the official resale, at the price you paid. Tickets sold anywhere else are cancelled."],
+  ["Can children come?", "Yes, all ages. Under-12s are free, 12 to 17 is \xA395, and anyone under 16 must camp with an adult."],
+  ["What if I cannot come?", "Cancel within 14 days of buying for a full refund. After that, the official resale pays you back when it sells."],
+  ["What about access?", "Tell us what you need when you book:\xA0viewing platforms, the accessible campsite, power and a free assistant\u2019s ticket."]
+];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Hero kicker", preset: "fade-in", at: 100, params: { duration: 600 } },
+  { layer: "Hero name", preset: "rise-in", at: 150, params: { duration: 900 } },
+  { layer: "Hero date", preset: "rise-in", at: 500, params: { duration: 700 } },
+  { layer: "Hero place", preset: "rise-in", at: 620, params: { duration: 700 } },
+  { layer: "Hero sign", preset: "drop-in", at: 800, params: { duration: 800 } },
+  { layer: "Step", preset: "rise-in", at: 1200, params: { duration: 500 }, stagger: { delay: 140 } },
+  { layer: "Act", preset: "rise-in", at: 1500, params: { duration: 500 }, stagger: { delay: 200 } }
+];
+var counts = [ticking("Hero", CLOCK), ticking("Band", CLOCK), stockCount("Tier stock", STOCK)];
+function tent(k, art, x, base, w, a, b, i) {
+  const h = w * 0.78, top = base - h;
+  shape(k, art, [poly([[x - w / 2, base], [x, top], [x + w / 2, base]])], a, { name: "Tent" });
+  shape(k, art, [poly([[x - w * 0.3, base], [x, top], [x - w * 0.12, base]]), poly([[x + w * 0.12, base], [x, top], [x + w * 0.3, base]])], b, { name: "Tent panels" });
+  shape(k, art, [poly([[x - w * 0.07, base], [x, base - h * 0.42], [x + w * 0.07, base]])], "bark", { name: "Tent door" });
+  shape(k, art, [{ closed: false, points: [pt3(x, top), pt3(x, top - w * 0.2)] }], "bark", { name: "Tent pole", strokeWidth: 2 });
+  const flag = shape(k, art, [poly([[x, top - w * 0.2], [x + w * 0.2, top - w * 0.14], [x, top - w * 0.08]])], b, { name: "Tent flag" });
+  k.patch(flag, { anchorX: 0 });
+  sway(k, flag, "scaleX", 0.22, 3, i / 5);
+}
+function fieldsArt(k, art) {
+  k.rect(art, AW, 520, [k.gradient({ from: "sunPale", to: "sunPale", fromOpacity: 0, toOpacity: 0.55, angle: 90 })], { name: "Sky glow", absolute: { x: 0, y: 0 } });
+  k.ellipse(art, SUN.r * 3.3, k.tint("sunPale", 0.4), { name: "Sun halo", absolute: { x: SUN.x - SUN.r * 1.65, y: SUN.y - SUN.r * 1.65 } });
+  const R = 330, rays = [];
+  for (let i = 0; i < 24; i++) {
+    const a = i / 24 * Math.PI * 2, d = 0.045, r0 = SUN.r + 22, r1 = i % 2 ? R : R - 60;
+    rays.push({ closed: true, points: [pt3(R + r0 * Math.cos(a - d), R + r0 * Math.sin(a - d)), pt3(R + r1 * Math.cos(a), R + r1 * Math.sin(a)), pt3(R + r0 * Math.cos(a + d), R + r0 * Math.sin(a + d))] });
+  }
+  const rayId = k.vector(art, R * 2, R * 2, rays, "sun", { name: "Sun rays", opacity: 0.8, absolute: { x: SUN.x - R, y: SUN.y - R } });
+  turn(k, rayId, 1 / 12);
+  k.ellipse(art, SUN.r * 2, "sun", { name: "Sun", absolute: { x: SUN.x - SUN.r, y: SUN.y - SUN.r } });
+  k.ellipse(art, SUN.r * 1.5, k.tint("sunPale", 0.35), { name: "Sun heart", absolute: { x: SUN.x - SUN.r * 0.75, y: SUN.y - SUN.r * 0.75 } });
+  const cloud = (x, y, s, i) => {
+    const id = shape(k, art, [disc(x, y, 46 * s, 30 * s), disc(x + 52 * s, y - 14 * s, 54 * s, 38 * s), disc(x + 112 * s, y, 50 * s, 30 * s), disc(x + 56 * s, y + 12 * s, 90 * s, 22 * s)], "cloud", { name: "Cloud", opacity: 0.9 });
+    sway(k, id, "translateX", 14, 1, i / 3);
+  };
+  cloud(620, 150, 1, 0);
+  cloud(1010, 96, 0.7, 1);
+  cloud(1040, 520, 0.6, 2);
+  const birds = [[690, 250], [724, 232], [760, 262], [1060, 236], [1094, 250]].map(([x, y]) => curve3([{ x: x - 12, y: y - 4 }, { x: x - 5, y: y - 9 }, { x, y }, { x: x + 5, y: y - 9 }, { x: x + 12, y: y - 4 }], 0.3));
+  const flock = shape(k, art, birds, "bark", { name: "Birds", strokeWidth: 2.5 });
+  sway(k, flock, "translateY", 6, 2);
+  shape(k, art, [hill(AW, [560, 520, 548, 512, 530, 506, 540], AH + 40)], "hillA", { name: "Far hills" });
+  shape(k, art, [{ closed: true, points: [pt3(1040, 518), { ...pt3(1110, 452), handleIn: pt3(1040, 466), handleOut: pt3(1180, 466) }, pt3(1180, 518)] }], "bark", { name: "Stage shell" });
+  shape(k, art, [{ closed: true, points: [pt3(1054, 518), { ...pt3(1110, 468), handleIn: pt3(1056, 480), handleOut: pt3(1164, 480) }, pt3(1166, 518)] }], "sunPale", { name: "Stage glow" });
+  shape(k, art, [poly([[1030, 518], [1190, 518], [1190, 526], [1030, 526]])], "bark", { name: "Stage deck" });
+  shape(k, art, [hill(AW, [600, 566, 590, 556, 596, 562, 580], AH + 40)], "hillB", { name: "Hills" });
+  const tents = [[90, 610, 74, "tentCream", "tentRed"], [176, 624, 96, "tentCream", "tentBlue"], [468, 606, 62, "tentCream", "straw"], [560, 612, 84, "tentCream", "tentRed"], [720, 600, 70, "tentCream", "tentBlue"], [824, 606, 104, "tentCream", "tentRed"], [952, 598, 66, "tentCream", "straw"], [1060, 604, 92, "tentCream", "tentBlue"], [1160, 598, 60, "tentCream", "tentRed"]];
+  tents.forEach(([x, base, w, a, b], i) => tent(k, art, x, base, w, a, b, i));
+  shape(k, art, [hill(AW, [640, 668, 628, 664, 636, 672, 640], AH + 40)], "hillC", { name: "Near hills" });
+  const furrows = [];
+  for (let i = 0; i < 9; i++) furrows.push(curve3([{ x: -20, y: 700 + i * 20 }, { x: 300, y: 690 + i * 22 }, { x: 700, y: 706 + i * 21 }, { x: 1220, y: 688 + i * 23 }], 0.2));
+  shape(k, art, [hill(AW, [712, 690, 716, 694, 720, 700, 708], AH + 40)], "hillD", { name: "Field" });
+  shape(k, art, furrows, "hillC", { name: "Furrows", strokeWidth: 3, opacity: 0.55 });
+  bunting(k, art, { x1: 560, y1: 8, x2: 1215, y2: 52, sag: 26, n: 15, size: 30, colors: ["tentRed", "straw", "hillD", "tentBlue"], line: "bark" });
+  const r = rng(41);
+  for (let row = 0; row < 3; row++) {
+    const stalks = [], ears = [];
+    for (let x = -10 + row * 9; x < AW + 10; x += 27) {
+      const h = 70 + r() * 70, lean = (r() - 0.5) * 26, bx = x + r() * 10, ty = AH - h;
+      stalks.push(curve3([{ x: bx, y: AH + 4 }, { x: bx + lean * 0.4, y: AH - h * 0.55 }, { x: bx + lean, y: ty }], 0.25));
+      ears.push({ closed: true, points: [pt3(bx + lean - 5, ty + 4), pt3(bx + lean + lean * 0.12, ty - 30), pt3(bx + lean + 5, ty + 4), pt3(bx + lean, ty + 12)] });
+    }
+    const s1 = shape(k, art, stalks, row === 1 ? "straw" : "strawDark", { name: "Barley stalks", strokeWidth: 2.5 });
+    const s2 = shape(k, art, ears, row === 1 ? "straw" : "strawDark", { name: "Barley ears" });
+    for (const id of [s1, s2]) {
+      k.patch(id, { anchorY: 1 });
+      sway(k, id, "rotation", 0.9, 2, row / 3);
+    }
+  }
+  k.patch(art, { effects: grain(0.07, 2, 23) });
+}
+function cornerSun(k, panel) {
+  const S = 340, R = 300, f = k.frame(panel, { x: AW - S, y: 0, width: S, height: S }, { name: "Panel art right" });
+  const rays = [];
+  for (let i = 0; i < 24; i++) {
+    const a = i / 24 * Math.PI * 2, d = 0.045, r0 = 160, r1 = i % 2 ? R : R - 50;
+    rays.push({ closed: true, points: [pt3(R + r0 * Math.cos(a - d), R + r0 * Math.sin(a - d)), pt3(R + r1 * Math.cos(a), R + r1 * Math.sin(a)), pt3(R + r0 * Math.cos(a + d), R + r0 * Math.sin(a + d))] });
+  }
+  const id = k.vector(f, R * 2, R * 2, rays, "sun", { name: "Sun rays", opacity: 0.8, absolute: { x: S - R, y: -R } });
+  turn(k, id, 1 / 12);
+  k.ellipse(f, 280, "sun", { name: "Sun", absolute: { x: S - 140, y: -140 } });
+  const g = k.frame(panel, { x: 0, y: 0, width: 340, height: 90 }, { name: "Panel art left" });
+  bunting(k, g, { x1: -12, y1: 4, x2: 330, y2: 30, sag: 20, n: 8, size: 26, colors: ["tentRed", "straw", "hillD", "tentBlue"], line: "bark" });
+}
+var festival_presale_folk_default = defineTemplate({
+  id: "web-festival-presale-folk",
+  meta: {
+    name: NAME,
+    description: "A ticket presale landing page for a large summer indie and folk festival on a farm. The hero is a sun-bleached poster (a low sun with turning rays, drifting clouds, rolling hills, striped bell tents, bunting and swaying barley) under the name in a heavy italic serif, with a painted sign that counts down to the presale and takes the sign-up. Then the presale in four steps, four tier cards with the supporter tickets sold out and tier one running down, bell tents, campervans and a deposit plan, the bill as a centred poster, what the farm offers, travel and stay, the questions, partners and the legal lines. Cream, terracotta, sage and straw, desktop to phone",
+    category: "web",
+    tags: ["festival", "presale", "tickets", "folk", "indie", "summer", "camping", "fields", "countdown", "sign-up", "ticket tiers", "line-up", "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: "#F4EBD6", text: "#3A2A1C", onPaper: "#6A5643", primary: "#B8461F", onPrimary: "#FFF6E4", accent: "#2F5D50", onAccent: "#FFF6E4", card: "#FCF6E7", onCard: "#3A2A1C", cardMuted: "#6A5643", panel: "#3A2A1C", onPanel: "#F4EBD6", panelMuted: "#D9CAAF", chip: "#EADDC1", onChip: "#3A2A1C", stage: "#F3DCAE", onStage: "#3A2A1C", stageMuted: "#59422F" },
+      { name: "Barley Moon" }
+    );
+    k.palette({ sun: "#E8743B", sunPale: "#F6B872", hillA: "#BFC690", hillB: "#93AB76", hillC: "#62855C", hillD: "#3F624A", straw: "#DDB95C", strawDark: "#B98F3C", tentRed: "#C4522A", tentCream: "#FFF3DA", tentBlue: "#3E6C8A", bark: "#4A3626", cloud: "#FFF6E4" });
+    const serif = { ...SERIF, fontStyle: "italic" };
+    const s = typeScale(k, {
+      Nav: { size: 15, fontWeight: 600, lineHeight: 22 },
+      Brand: { ...serif, size: 24, fontWeight: 900, letterSpacing: -0.4, lineHeight: 30 },
+      Button: { size: 16, fontWeight: 700, lineHeight: 24 },
+      Kicker: { size: 13, fontWeight: 700, letterSpacing: 3, lineHeight: 18, textCase: "UPPER" },
+      Section: { ...serif, size: 64, fontWeight: 900, letterSpacing: -1.8, lineHeight: 66 },
+      "Section md": { ...serif, size: 52, fontWeight: 900, letterSpacing: -1.4, lineHeight: 56 },
+      "Section sm": { ...serif, size: 38, fontWeight: 900, letterSpacing: -1, lineHeight: 42 },
+      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, fontWeight: 700, letterSpacing: 2, lineHeight: 16, textCase: "UPPER" },
+      Legal: { size: 13, fontWeight: 400, lineHeight: 20 },
+      Clock: { ...SERIF, size: 54, fontWeight: 900, letterSpacing: -1.5, lineHeight: 56, fontFeatures: { tnum: 1 } },
+      "Clock sm": { ...SERIF, size: 36, fontWeight: 900, letterSpacing: -1, lineHeight: 40, fontFeatures: { tnum: 1 } },
+      Unit: { size: 12, fontWeight: 700, letterSpacing: 2, lineHeight: 16, textCase: "UPPER" },
+      Field: { size: 16, fontWeight: 500, lineHeight: 24 },
+      "Step no": { ...serif, size: 52, fontWeight: 900, lineHeight: 48 },
+      "Step title": { ...SERIF, size: 23, fontWeight: 800, letterSpacing: -0.3, lineHeight: 29 },
+      Tier: { ...SERIF, size: 21, fontWeight: 700, lineHeight: 27 },
+      Price: { ...serif, size: 56, fontWeight: 900, letterSpacing: -2, lineHeight: 56, fontFeatures: { tnum: 1 } },
+      "Price sm": { ...serif, size: 46, fontWeight: 900, letterSpacing: -1.6, lineHeight: 48, fontFeatures: { tnum: 1 } },
+      Status: { size: 12, fontWeight: 800, letterSpacing: 1.2, lineHeight: 16, textCase: "UPPER" },
+      "Act 1": { ...serif, size: 76, fontWeight: 900, letterSpacing: -2.4, lineHeight: 78, textAlign: "CENTER" },
+      "Act 1 md": { ...serif, size: 52, fontWeight: 900, letterSpacing: -1.4, lineHeight: 56, textAlign: "CENTER" },
+      "Act 1 sm": { ...serif, size: 34, fontWeight: 900, letterSpacing: -0.8, lineHeight: 38, textAlign: "CENTER" },
+      "Act 2": { ...SERIF, size: 28, fontWeight: 700, letterSpacing: -0.4, lineHeight: 38, textAlign: "CENTER" },
+      "Act 2 sm": { ...SERIF, size: 20, fontWeight: 700, lineHeight: 28, textAlign: "CENTER" },
+      "Act 3": { size: 15, fontWeight: 600, letterSpacing: 1.6, lineHeight: 26, textCase: "UPPER", textAlign: "CENTER" },
+      Q: { ...SERIF, size: 21, fontWeight: 800, letterSpacing: -0.2, lineHeight: 28 },
+      Partner: { ...SERIF, size: 18, fontWeight: 700, lineHeight: 24 },
+      "Name 150": { ...serif, size: 150, fontWeight: 900, letterSpacing: -5.5, lineHeight: 128 },
+      "Name 132": { ...serif, size: 132, fontWeight: 900, letterSpacing: -4.8, lineHeight: 114 },
+      "Name 64": { ...serif, size: 64, fontWeight: 900, letterSpacing: -2.2, lineHeight: 60 },
+      "Date 34": { ...SERIF, size: 34, fontWeight: 800, letterSpacing: -0.6, lineHeight: 40 },
+      "Date 24": { ...SERIF, size: 24, fontWeight: 800, letterSpacing: -0.3, lineHeight: 30 }
+    });
+    const L = {
+      s,
+      upper: ["Kicker", "Label", "Unit", "Status", "Act 3"],
+      radius: 16,
+      pad: 26,
+      rule: 2,
+      chipRadius: 999,
+      center: true,
+      card: { stroke: { color: "text", width: 2, align: "INSIDE" }, effects: [hardShadow(k, "bark", 5, 6, 0.9)] },
+      // A wavy line under every section title.
+      flourish: (kit, h2) => {
+        kit.vector(h2, 180, 12, [curve3(Array.from({ length: 13 }, (_, i) => ({ x: i * 15, y: i % 2 ? 2 : 10 })), 0.3)], "primary", { name: "Squiggle", strokeWidth: 3 });
+      },
+      mark: (kit, f, i) => {
+        kit.vector(f, 40, 40, [burstPath(40, 10 + i % 3 * 2, 0.3)], i % 2 ? "accent" : "primary", { name: "Feature mark" });
+      }
+    };
+    parts(k, L, { radius: 999 });
+    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", "Who is playing", "Getting here"], cta: "Sign up", style: s("Nav"), brandStyle: s("Brand") });
+    const { hero: h, art } = hero(k, sheet, HERO, { justify: "CENTER", gap: 16, radius: 28, padding: { top: 48, right: 56, bottom: 48, left: 56 }, stroke: { color: "text", width: 3, align: "INSIDE" } });
+    fieldsArt(k, art);
+    const copy = k.stack(h, { width: 600, gap: 14, name: "Hero copy" });
+    const kick = k.stack(copy, { direction: "HORIZONTAL", width: "HUG", fill: "card", radius: 999, padding: { top: 6, right: 14, bottom: 6, left: 14 }, stroke: { color: "bark", width: 2, align: "INSIDE" }, name: "Hero kicker" });
+    k.text(kick, "FOUR DAYS OF SONGS IN THE FIELDS", { style: s("Kicker"), color: "onCard", autoWidth: true, name: "Hero kicker text" });
+    k.text(copy, "{{brand.name}}", { style: s("Name 150"), color: "onStage", name: "Hero name" });
+    k.text(copy, "22 \u2013 25 July 2027", { style: s("Date 34"), color: "onStage", name: "Hero date" });
+    k.text(copy, "Hartcombe Farm, Wessendale", { style: s("Aside"), color: "onStage", name: "Hero place" });
+    const sign = k.stack(h, { width: 600, gap: 12, fill: "card", radius: 20, padding: 22, stroke: { color: "bark", width: 3, align: "INSIDE" }, effects: [hardShadow(k, "bark", 7, 8)], name: "Hero sign" });
+    k.text(sign, "THE PRESALE OPENS IN", { style: s("Kicker"), color: "cardMuted", name: "Sign label" });
+    countdown(k, sign, L, { prefix: "Hero", clock: CLOCK, fill: "panel", ink: "onPanel", muted: "panelMuted", gap: 8, radius: 12, pad: [10, 4] });
+    signup(k, sign, L, { name: "Hero signup", placeholder: "Your email address", cta: "Sign up for presale", radius: 999, stroke: { color: "bark", width: 2, align: "INSIDE" } });
+    k.text(sign, "Sign up by Sunday 7 February. Your code buys up to six tickets, and it is free to ask for one.", { style: s("Small"), color: "cardMuted", name: "Sign note" });
+    steps(k, sheet, L, { kicker: "How the presale works", title: "Four dates for the diary", aside: "Miss the first and you are in the general sale, a week later and a tier dearer.", items: STEPS, boxed: true });
+    const tix = ladder(k, sheet, L, { kicker: "Tickets", title: "The earlier, the cheaper", aside: "Every tier is a set number of weekend tickets with camping. When one runs out the next begins, and the price only goes one way.", tiers: TIERS, variant: "cards", stock: STOCK });
+    addOns(k, tix, L, { items: EXTRAS, plan: ["Spread the cost", "Reserve with a \xA340 deposit and pay the rest in four monthly parts, the last on 1 June. No fee, and your tier is kept.", "\xA340 deposit"] });
+    lineup(k, sheet, L, { kicker: "Who is playing, so far", title: "The first forty names", aside: "The Lantern Tent, the Orchard stage and the late-night barn dance are announced on 4 March.", bills: BILLS, variant: "poster", tba: "and more than fifty still to be announced", sep: "\xB7", panel: { radius: 28, stroke: { color: "text", width: 3, align: "INSIDE" }, art: cornerSun } });
+    artBand(k, sheet, { w: AW, h: 200, focus: 760, radius: 28, draw: (a) => fieldsArt(k, a) });
+    features(k, sheet, L, { kicker: "On the farm", title: "What a ticket gets you", items: ON_SITE });
+    travel(k, sheet, L, { kicker: "Getting here and staying", title: "Down the valley to Hartcombe", aside: "The farm is four miles from Hartcombe Halt. Half of you came by train, coach or bicycle last summer.", routes: ROUTES, stays: STAYS });
+    artBand(k, sheet, { w: AW, h: 160, focus: 600, radius: 28, name: "Art band 2", draw: (a) => fieldsArt(k, a) });
+    faq(k, sheet, L, { kicker: "Questions", title: "Before you sign up", items: QUESTIONS });
+    partners(k, sheet, L, { label: "With thanks to our partners", names: ["Wessendale Brewery", "The Folk Hour", "Hartcombe Dairy", "Old Mill Cider", "Field Notes Radio", "Wessendale Canal Society"] });
+    closing(k, sheet, L, { title: "The gates open in July. The presale opens sooner.", text: "Sign up by Sunday 7 February. Your code arrives on the 9th, and the presale opens on Thursday 11 February at nine.", clock: CLOCK, placeholder: "Your email address", cta: "Sign up for presale", note: "Free to sign up. One code each.", radius: 28, stroke: { color: "text", width: 3, align: "INSIDE" } });
+    legal(k, sheet, L, {
+      links: ["Ticket terms", "Official resale", "Access", "Privacy", "Contact"],
+      lines: ["\xA9 2026 Barley Moon Festival Ltd, Hartcombe Farm, Wessendale. Tickets are sold under the ticket terms and carry the holder\u2019s name.", "Tickets may be resold only through the official resale, at the price paid. Tickets bought elsewhere are cancelled. The bill may change."]
+    });
+    drain(k, sheet, "Tier stock", STOCK);
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    presaleResponsive(k, sheet, L, HERO, {
+      restyle: { "Name 150": { laptop: "Name 132", tablet: "Name 132", mobile: "Name 64" }, "Date 34": { mobile: "Date 24" }, Clock: { mobile: "Clock sm" } },
+      hide: { mobile: ["Sign note"] },
+      tweak: (kit, id, size) => {
+        if (size === "mobile") for (const b of [...kit.named(id, "Art band"), ...kit.named(id, "Art band 2")]) kit.patch(b, { visible: false });
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        if (size === "tablet") each("Hero", { primaryAxisAlignItems: "SPACE_BETWEEN" });
+        if (size === "mobile") {
+          each("Panel art right", { visible: false });
+          each("Hero kicker", { layoutSizingHorizontal: "FILL" });
+          each("Hero kicker text", { layoutSizingHorizontal: "FILL", textAutoResize: "HEIGHT" });
+          each("Hero", { primaryAxisAlignItems: "SPACE_BETWEEN", cornerRadius: 22 });
+          each("Hero copy", { layoutSizingHorizontal: "FILL", itemSpacing: 8 });
+          each("Hero sign", { layoutSizingHorizontal: "FILL", padding: { top: 16, right: 16, bottom: 16, left: 16 } });
+          for (const name of ["Sun halo", "Sun rays", "Sun", "Sun heart"]) for (const n of kit.named(id, name)) kit.patch(n, { x: kit.node(n).x + 230, y: kit.node(n).y - 190 });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  festival_presale_folk_default
+};