@popcraft/kit 0.27.0 → 0.28.0

package/dist/chunks/chunk-U4BCYGF5.js

@@ -0,0 +1,99 @@
+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 {
+  onColor,
+  scrim,
+  withSong
+} from "./chunk-F4JJMXUL.js";
+import {
+  bassKick,
+  visualizer,
+  waveform
+} from "./chunk-C5MWRYUG.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-WBZ6O2YF.js";
+import {
+  Kit,
+  preset
+} from "./chunk-MTD3UAQT.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/music/lofi-loop.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NIGHT = "#1B1426";
+var PLUM = "#4A2B57";
+var AMBER = "#F2A65A";
+var CREAM = "#F6E7D2";
+var VINYL = "#120E18";
+var CUES = [
+  { layer: "Now playing", preset: "fade-in", at: 200, params: { duration: 500 } },
+  { layer: "Song", preset: "rise-in", at: 400, params: { duration: 700, distance: 40 } },
+  { layer: "Artist", preset: "rise-in", at: 650, params: { duration: 700, distance: 30 } },
+  { layer: "Details", preset: "fade-in", at: 1100, params: { duration: 600 } }
+];
+var lofi_loop_default = defineTemplate({
+  id: "motion-music-lofi-loop",
+  meta: {
+    name: "Lo-fi loop visualizer",
+    description: "A 16:9 now-playing loop for a lo-fi track: a spinning record with your cover art that thumps with the kick, the song and artist, a line of dots riding the loudness, over liquid ink stirred by the bass \u2014 every part follows the audio you drop in",
+    category: "animation",
+    tags: ["animation", "music", "music video", "lo-fi", "visualizer", "audio reactive", "waveform", "record", "youtube", "loop"],
+    platforms: ["youtube"],
+    formats: ["video"],
+    useCases: ["launch", "livestream"],
+    created: "2026-09-30",
+    updated: "2026-09-30"
+  },
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Lo-fi loop visualizer", preset("video-1080p"));
+    k.brand(
+      { night: NIGHT, plum: PLUM, accent: AMBER, text: CREAM, vinyl: VINYL, onNight: onColor(NIGHT, [CREAM, "#FFFFFF"]), onAccent: onColor(AMBER, [NIGHT, VINYL]), muted: onColor(NIGHT, ["#BFA8C9", CREAM]) },
+      { song: "Paper Lanterns", artist: "Mira Vale", details: "Side A \xB7 80 BPM \xB7 lo-fi beats" }
+    );
+    k.textStyle("Tag 26", { size: 26, fontWeight: 700, lineHeight: 32, letterSpacing: 6, textCase: "UPPER" });
+    k.textStyle("Song 132", { size: 132, fontFamily: "Source Serif 4", fontWeight: 700, lineHeight: 140, letterSpacing: -3 });
+    k.textStyle("Artist 56", { size: 56, fontWeight: 500, lineHeight: 64 });
+    k.textStyle("Details 28", { size: 28, fontWeight: 500, lineHeight: 36, letterSpacing: 1 });
+    pill(k, "Tag", { fill: "accent", ink: "onAccent", style: "Tag 26", label: "Now playing", pad: [10, 24] });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Lo-fi loop");
+    k.flowSheet(sheet, 0, { top: 0, right: 0, bottom: 0, left: 0 }, "night");
+    k.patch(sheet, { clipsContent: true });
+    withSong(k, sheet, "lofi", 1, 0);
+    visualizer(k, sheet, "liquid-ink", { a: "night", b: "plum", c: "accent" }, { name: "Liquid ink", knobs: { nz_scale: 1.6, fb_decay: 0.45, gain_b: 0.7 } });
+    const R = 300;
+    const record = k.stack(sheet, { width: 2 * R, height: 2 * R, name: "Record", absolute: { x: 190, y: 240 } });
+    k.ellipse(record, 2 * R, "vinyl", { name: "Vinyl", absolute: { x: 0, y: 0 } });
+    for (const [i, r] of [R - 30, R - 70, R - 110].entries()) k.ellipse(record, 2 * r, [], { stroke: { color: "plum", width: 3 - i * 0.5, align: "CENTER" }, name: "Groove", absolute: { x: R - r, y: R - r } });
+    k.photo(record, 250, 250, { radius: 125, ground: "accent", name: "Cover art", absolute: { x: R - 125, y: R - 125 } });
+    k.ellipse(record, 18, "night", { name: "Spindle", absolute: { x: R - 9, y: R - 9 } });
+    k.behave(record, "rotation", [{ kind: "spin", rate: 36 }]);
+    bassKick(k, record, 0.035, 160);
+    const col = scrim(k, sheet, "night", { width: 860, gap: 18, align: "MIN", padding: { top: 40, right: 40, bottom: 40, left: 40 }, name: "Now playing column", absolute: { x: 920, y: 200 } });
+    k.instance(col, "Tag", { Label: "Now playing" }, { name: "Now playing" });
+    k.text(col, "{{brand.song}}", { style: "Song 132", color: "onNight", width: 780, name: "Song" });
+    k.text(col, "{{brand.artist}}", { style: "Artist 56", color: "onNight", width: 780, name: "Artist" });
+    const wave = k.stack(col, { width: 780, height: 170, name: "Waveform row" });
+    waveform(k, wave, { style: "line", width: 780, height: 150, color: "accent", count: 64, history: 2600, at: { x: 0, y: 10 } });
+    k.text(col, "{{brand.details}}", { style: "Details 28", color: "muted", width: 780, name: "Details" });
+    k.cues(sheet, CUES);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  CUES,
+  lofi_loop_default
+};

package/dist/chunks/chunk-U5CRX2HP.js

@@ -0,0 +1,391 @@
+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,
+  ladder,
+  legal,
+  lineup,
+  partners,
+  parts,
+  presaleResponsive,
+  shape,
+  signup,
+  steps,
+  stockCount,
+  sway,
+  ticking,
+  travel,
+  turn
+} from "./chunk-O5VR35YF.js";
+import {
+  typeScale
+} from "./chunk-NRSNYFX3.js";
+import {
+  nav,
+  page
+} from "./chunk-YKXCPYWJ.js";
+import {
+  hardShadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  box,
+  curve3,
+  line,
+  poly,
+  pt3,
+  rng,
+  smooth
+} from "./chunk-BNVLVZUT.js";
+import {
+  defineTemplate
+} from "./chunk-WBZ6O2YF.js";
+import {
+  Kit,
+  preset
+} from "./chunk-MTD3UAQT.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/festival-presale-family.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Festival presale page: family camping weekend";
+var CLOCK = { days: "14", hours: "11", minutes: "36", from: 44, to: 38 };
+var STOCK = { label: "Going fast", from: 1480, left: 1452, total: 6e3 };
+var AW = 1200;
+var AH = 880;
+var HERO = {
+  artW: AW,
+  artH: AH,
+  h: { desktop: 880, laptop: 850, tablet: 860, mobile: 756 },
+  fit: { laptop: { s: 0.966, ax: 1200, ay: 880, hx: 1120, hy: 850 }, tablet: { s: 0.98, ax: 1200, ay: 880, hx: 760, hy: 860 }, mobile: { s: 0.56, ax: 900, ay: 40, hx: 167.5, hy: 0 } },
+  pad: { tablet: { top: 40, right: 32, bottom: 40, left: 32 }, mobile: { top: 236, right: 12, bottom: 16, left: 12 } }
+};
+var PLACES = [
+  ["The Big Top", "Circus twice a day under 1,200 seats of canvas, and clown school in the mornings.", 742, 258],
+  ["Hilltop stage", "Music from noon till ten, with ear defenders\xA0to borrow and a picnic slope to watch from.", 1016, 150],
+  ["The science dome", "Rockets, bugs, slime and a telescope. Everything in it is for touching.", 660, 520],
+  ["The lake", "Paddle boats, a lifeguarded beach and the big wheel beside it. Rides are in your ticket.", 930, 560],
+  ["Family camping", "Three fields, one of them quiet after nine. Hot showers, a baby-change tent and accessible pitches with power.", 1050, 748],
+  ["The feast field", "Forty kitchens with a child\u2019s plate at every one, long tables, free water and a cake tent.", 742, 770]
+];
+var STEPS = [
+  ["By 28 Feb", "Sign up", "Leave your email by Sunday 28 February, midnight. One sign-up a household, and it is free."],
+  ["2 March", "Get your code", "On Tuesday 2 March we email\xA0your code. It buys two family tickets or up to six single ones."],
+  ["4 March \xB7 09:00", "The presale opens", "Thursday 4 March at nine, after the school run. The queue opens at 8:30; places are drawn by lot."],
+  ["11 March", "General sale", "Whatever is left goes on general sale on Thursday 11 March at nine, at the tier it has reached."]
+];
+var TIERS = [
+  { tag: "Early bird", name: "Family weekend, with camping", price: "\xA3245", note: "1,500 family tickets, offered to last year\u2019s campers in November. All gone.", status: "sold", chip: "Sold out" },
+  { tag: "Tier one", name: "Family weekend, with camping", price: "\xA3279", note: "On sale now to returning families. What is left opens to presale codes on 4 March.", status: "selling", chip: "On sale" },
+  { tag: "Tier two", name: "Family weekend, with camping", price: "\xA3305", note: "3,000 family tickets kept for the presale, opened when tier one is gone.", status: "next", chip: "Presale \xB7 4 March" },
+  { tag: "Tier three", name: "Family weekend, with camping", price: "\xA3329", note: "The last 1,500, for the general sale.\xA0Single adult tickets start at \xA3119.", status: "later", chip: "General \xB7 11 March" }
+];
+var EXTRAS = [
+  ["The quiet field", "Free", "A hush from nine at night, close to the loos and the baby-change tent. Book it with your ticket."],
+  ["A yurt for five", "+ \xA3420", "Real beds, a wood stove, a kettle and fairy\xA0lights, a short walk from the feast field."],
+  ["Campervan pitch", "+ \xA380", "A level pitch with room for an awning. Electric hook-up is \xA330 more."]
+];
+var BILLS = [
+  { label: "Hilltop stage", note: "Music, from noon till ten.", heads: ["The Marmalade Skies", "Orla Finch"], acts: ["Captain Calypso\u2019s Brass Band", "Tiny Disco with DJ Pom-Pom", "The Wobble Brothers"], more: ["The Kazoo Orchestra of Northdale", "Family ceilidh", "Songs round the fire"] },
+  { label: "The Big Top", note: "Circus, at eleven and at four.", heads: ["Circus Fandango"], acts: ["The Flying Okonkwos", "Madame Zuzu\u2019s Hoops", "Clown school (bring a grown-up)"], more: ["Juggling for beginners", "The late show, for over-tens"] },
+  { label: "The story tree", note: "Stories and puppets, all day.", heads: ["The Paper Moon Puppet Company"], acts: ["Author hour with Tilly Marsh", "Draw-along with Ravi Bose", "Bedtime stories at dusk"], more: ["Make a book in an hour", "The poetry hammock"] },
+  { label: "The science dome", note: "Hands on, ten till six.", heads: ["Professor Fizz\u2019s Explosive Hour"], acts: ["Build a rocket, launch a rocket", "Bug safari", "Stargazing with the Northdale Astronomers"], more: ["The slime laboratory", "Robots you can beat at chess"] }
+];
+var ROUTES = [
+  ["Train", "Northdale station is 1 h 20 from the city. The\xA0festival bus up the hill meets every train.", "Bus free for under-16s"],
+  ["Coach", "Family coaches from eight towns, with room underneath for a trolley and a tent.", "From \xA318 return"],
+  ["Car", "Parking is beside the camping fields and must be booked ahead. Trolleys to borrow at the gate.", "\xA320 a car"],
+  ["Bicycle", "A signed, traffic-free route from the station, and a locked bike park at the gate.", "Free"]
+];
+var STAYS = [
+  ["Your own tent", "Included with every weekend ticket, Thursday noon to Monday noon.", "Included"],
+  ["Yurts", "Sleeping five, with beds, bedding and a stove.", "+ \xA3420"],
+  ["Day tickets", "Not camping? Come for a day. On sale with the general sale.", "From \xA339"]
+];
+var QUESTIONS = [
+  ["What is a family ticket?", "Two adults and up to three children aged 5 to 15, for all four days with camping. Under-fives are free, with a free ticket of their own."],
+  ["How many can I buy?", "With a presale code: two family tickets, or up to six single tickets. Each ticket carries a name you can change for free until 1 July."],
+  ["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 nine."],
+  ["Can I sell a ticket on?", "Only through the official resale, at the price you paid. Tickets sold anywhere else are cancelled."],
+  ["What if we cannot come?", "Cancel within 14 days of buying for a full refund. After that, the official resale pays you back when the ticket sells."],
+  ["How accessible is the site?", "Step-free paths join every area. There is a Changing Places toilet, a quiet tent, accessible camping with power and a free carer\u2019s ticket."]
+];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Hero card", preset: "rise-in", at: 100, params: { duration: 700 } },
+  { layer: "Pin", preset: "pop-in", at: 900, params: { duration: 400 }, stagger: { delay: 320 } },
+  { 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: 160 } }
+];
+var counts = [ticking("Hero", CLOCK), ticking("Band", CLOCK), stockCount("Tier stock", STOCK)];
+function mapArt(k, art, s) {
+  const r = rng(12);
+  const patch = (cx, cy, rx, ry, role) => shape(k, art, [smooth(Array.from({ length: 9 }, (_, i) => {
+    const a = i / 9 * Math.PI * 2, w = 0.82 + r() * 0.36;
+    return { x: cx + rx * w * Math.cos(a), y: cy + ry * w * Math.sin(a) };
+  }), 0.28)], role, { name: "Meadow" });
+  patch(300, 200, 330, 190, "grass");
+  patch(1010, 420, 260, 170, "grass");
+  patch(520, 760, 330, 170, "grass");
+  patch(1100, 800, 220, 150, "grassDark");
+  patch(800, 80, 250, 110, "grassDark");
+  shape(k, art, [smooth([{ x: 800, y: 600 }, { x: 870, y: 540 }, { x: 990, y: 548 }, { x: 1080, y: 590 }, { x: 1060, y: 660 }, { x: 950, y: 690 }, { x: 840, y: 668 }], 0.3)], "lake", { name: "Lake" });
+  const ripples = shape(k, art, [[870, 600, 46], [980, 630, 60], [930, 578, 30]].map(([x, y, w]) => curve3([{ x, y }, { x: x + w / 2, y: y - 6 }, { x: x + w, y }], 0.3)), "white", { name: "Ripples", strokeWidth: 3, opacity: 0.8 });
+  sway(k, ripples, "translateX", 8, 2);
+  const boat = shape(k, art, [poly([[1e3, 610], [1044, 610], [1034, 624], [1010, 624]]), poly([[1022, 606], [1022, 572], [1044, 604]])], "tomato", { name: "Boat" });
+  sway(k, boat, "translateY", 3, 3);
+  sway(k, boat, "rotation", 4, 3, 0.25);
+  const ways = [
+    curve3([{ x: 560, y: 900 }, { x: 600, y: 800 }, { x: 700, y: 700 }, { x: 760, y: 560 }, { x: 740, y: 420 }, { x: 760, y: 340 }], 0.3),
+    curve3([{ x: 760, y: 420 }, { x: 880, y: 360 }, { x: 960, y: 280 }, { x: 1030, y: 230 }], 0.3),
+    curve3([{ x: 760, y: 560 }, { x: 840, y: 500 }, { x: 900, y: 470 }], 0.3),
+    curve3([{ x: 700, y: 700 }, { x: 860, y: 740 }, { x: 980, y: 760 }, { x: 1230, y: 730 }], 0.3),
+    curve3([{ x: 740, y: 420 }, { x: 560, y: 400 }, { x: 380, y: 300 }, { x: 180, y: 320 }, { x: -20, y: 260 }], 0.3)
+  ];
+  shape(k, art, ways, "path", { name: "Paths", strokeWidth: 26 });
+  shape(k, art, ways, "white", { name: "Path dashes", stroke: { color: "white", width: 3, dash: [10, 12] } });
+  const trees = [], shade = [], trunks = [];
+  const wood = (x0, y0, w, h, n) => {
+    for (let i = 0; i < n; i++) {
+      const x = x0 + r() * w, y = y0 + r() * h, rr = 20 + r() * 14;
+      trunks.push(box(x - 3, y + rr - 4, 6, 14));
+      trees.push(disc(x, y, rr));
+      shade.push(disc(x + rr * 0.25, y + rr * 0.2, rr * 0.6));
+    }
+  };
+  wood(560, 40, 300, 110, 12);
+  wood(1090, 300, 110, 180, 8);
+  wood(20, 40, 380, 120, 12);
+  wood(60, 560, 300, 260, 14);
+  wood(1120, 560, 80, 120, 4);
+  shape(k, art, trunks, "wood", { name: "Trunks" });
+  shape(k, art, trees, "tree", { name: "Trees" });
+  shape(k, art, shade, "treeDark", { name: "Tree shade", opacity: 0.6 });
+  shape(k, art, [{ closed: true, points: [pt3(950, 250), { ...pt3(1030, 150), handleIn: pt3(950, 170), handleOut: pt3(1110, 170) }, pt3(1110, 250)] }], "navy", { name: "Stage shell" });
+  const glow = shape(k, art, [{ closed: true, points: [pt3(968, 250), { ...pt3(1030, 174), handleIn: pt3(970, 190), handleOut: pt3(1090, 190) }, pt3(1092, 250)] }], "sunflower", { name: "Stage glow" });
+  sway(k, glow, "opacity", 0.25, 6);
+  shape(k, art, [box(940, 250, 180, 12), box(934, 214, 14, 36), box(1112, 214, 14, 36)], "navy", { name: "Stage deck" });
+  const bt = { x: 760, y: 340, w: 190 };
+  shape(k, art, [poly([[bt.x - bt.w / 2, bt.y], [bt.x + bt.w / 2, bt.y], [bt.x + bt.w * 0.42, bt.y - 60], [bt.x - bt.w * 0.42, bt.y - 60]])], "white", { name: "Big Top wall" });
+  shape(k, art, [0, 2, 4].map((i) => {
+    const x0 = bt.x - bt.w / 2 + i * bt.w / 5, t0 = bt.x - bt.w * 0.42 + i * bt.w * 0.84 / 5;
+    return poly([[x0, bt.y], [x0 + bt.w / 5, bt.y], [t0 + bt.w * 0.84 / 5, bt.y - 60], [t0, bt.y - 60]]);
+  }), "tomato", { name: "Big Top stripes" });
+  shape(k, art, [poly([[bt.x - bt.w * 0.5, bt.y - 58], [bt.x, bt.y - 150], [bt.x + bt.w * 0.5, bt.y - 58]])], "tomato", { name: "Big Top roof" });
+  shape(k, art, [-0.3, 0.1].map((f) => poly([[bt.x + bt.w * f, bt.y - 58], [bt.x, bt.y - 150], [bt.x + bt.w * (f + 0.2), bt.y - 58]])), "white", { name: "Roof stripes" });
+  shape(k, art, [poly([[bt.x - 16, bt.y], [bt.x, bt.y - 40], [bt.x + 16, bt.y]])], "navy", { name: "Big Top door" });
+  shape(k, art, [line(bt.x, bt.y - 150, bt.x, bt.y - 186)], "navy", { name: "Flag pole", strokeWidth: 3 });
+  const flag = shape(k, art, [poly([[bt.x, bt.y - 186], [bt.x + 34, bt.y - 176], [bt.x, bt.y - 166]])], "sunflower", { name: "Flag" });
+  k.patch(flag, { anchorX: 0 });
+  sway(k, flag, "scaleX", 0.25, 4);
+  shape(k, art, [{ closed: true, points: [pt3(600, 600), { ...pt3(662, 536), handleIn: pt3(600, 550), handleOut: pt3(724, 550) }, pt3(724, 600)] }], "violet", { name: "Dome" });
+  shape(k, art, [line(662, 538, 662, 600), curve3([{ x: 620, y: 600 }, { x: 632, y: 560 }, { x: 662, y: 538 }], 0.3), curve3([{ x: 704, y: 600 }, { x: 692, y: 560 }, { x: 662, y: 538 }], 0.3), line(606, 576, 718, 576)], "white", { name: "Dome ribs", strokeWidth: 2.5, opacity: 0.75 });
+  const wh = { x: 880, y: 440, r: 62 };
+  shape(k, art, [poly([[wh.x - 34, wh.y + 82], [wh.x, wh.y], [wh.x + 34, wh.y + 82]], false)], "navy", { name: "Wheel legs", strokeWidth: 5 });
+  const spokes = [disc(wh.r + 10, wh.r + 10, wh.r)];
+  for (let i = 0; i < 4; i++) {
+    const a = i / 8 * Math.PI * 2;
+    spokes.push(line(wh.r + 10 + wh.r * Math.cos(a), wh.r + 10 + wh.r * Math.sin(a), wh.r + 10 - wh.r * Math.cos(a), wh.r + 10 - wh.r * Math.sin(a)));
+  }
+  const wheel = k.vector(art, wh.r * 2 + 20, wh.r * 2 + 20, spokes, "navy", { name: "Wheel", strokeWidth: 4, absolute: { x: wh.x - wh.r - 10, y: wh.y - wh.r - 10 } });
+  const cabins = k.vector(art, wh.r * 2 + 20, wh.r * 2 + 20, Array.from({ length: 8 }, (_, i) => {
+    const a = i / 8 * Math.PI * 2;
+    return disc(wh.r + 10 + wh.r * Math.cos(a), wh.r + 10 + wh.r * Math.sin(a), 10);
+  }), "sunflower", { name: "Cabins", stroke: { color: "navy", width: 3 }, absolute: { x: wh.x - wh.r - 10, y: wh.y - wh.r - 10 } });
+  for (const id of [wheel, cabins]) turn(k, id, 1 / 8);
+  shape(k, art, [box(700, 800, 90, 12), box(708, 824, 90, 12), box(830, 812, 70, 12)], "wood", { name: "Tables" });
+  bunting(k, art, { x1: 690, y1: 772, x2: 910, y2: 778, sag: 14, n: 9, size: 16, colors: ["tomato", "sunflower", "violet"], line: "navy", name: "Feast bunting" });
+  const tents = { tomato: [], sunflower: [], violet: [], white: [] };
+  const roles = Object.keys(tents);
+  for (let row = 0; row < 3; row++) for (let i = 0; i < 6; i++) {
+    const x = 960 + i * 40 + row % 2 * 18, y = 790 + row * 34;
+    tents[roles[(i + row * 2) % 4]].push(poly([[x - 15, y], [x, y - 24], [x + 15, y]]));
+  }
+  for (const [role, paths] of Object.entries(tents)) shape(k, art, paths, role, { name: "Tents", stroke: { color: "navy", width: 2 } });
+  const balloon = k.frame(art, { x: 1086, y: 34, width: 80, height: 120 }, { name: "Balloon" });
+  shape(k, balloon, [disc(40, 40, 38, 40)], "tomato", { name: "Envelope" });
+  shape(k, balloon, [disc(40, 40, 15, 40)], "sunflower", { name: "Envelope stripe" });
+  shape(k, balloon, [line(22, 74, 30, 98), line(58, 74, 50, 98)], "navy", { name: "Ropes", strokeWidth: 2 });
+  shape(k, balloon, [box(28, 98, 24, 16)], "wood", { name: "Basket" });
+  sway(k, balloon, "translateY", 10, 1);
+  sway(k, balloon, "translateX", 14, 1, 0.25);
+  [[640, 250, "violet", 0], [1150, 500, "pink", 0.4]].forEach(([x, y, role, ph]) => {
+    const kite = shape(k, art, [poly([[x, y - 22], [x + 16, y], [x, y + 26], [x - 16, y]])], role, { name: "Kite", stroke: { color: "navy", width: 2 } });
+    sway(k, kite, "translateY", 8, 2, ph);
+    sway(k, kite, "rotation", 8, 2, ph + 0.2);
+  });
+  const comp = k.frame(art, { x: 1118, y: 250, width: 60, height: 60 }, { name: "Compass" });
+  shape(k, comp, [disc(30, 30, 28)], "white", { name: "Compass face", stroke: { color: "navy", width: 3 } });
+  const needle = k.vector(comp, 16, 44, [poly([[8, 0], [16, 22], [8, 44], [0, 22]])], "tomato", { name: "Needle", absolute: { x: 22, y: 8 } });
+  sway(k, needle, "rotation", 14, 2);
+  PLACES.forEach(([, , x, y], i) => {
+    const pin = k.stack(art, { width: 40, height: 40, radius: 20, align: "CENTER", justify: "CENTER", fill: "navy", stroke: { color: "white", width: 4, align: "OUTSIDE" }, effects: [hardShadow(k, "navy", 0, 5, 0.35)], absolute: { x: x - 20, y: y - 20 }, name: "Pin" });
+    k.text(pin, String(i + 1), { style: s("Pin"), color: "white", autoWidth: true, name: "Pin number" });
+  });
+}
+var festival_presale_family_default = defineTemplate({
+  id: "web-festival-presale-family",
+  meta: {
+    name: NAME,
+    description: "A ticket presale landing page for a large multi-arts camping festival for families. The hero is the map of the site (winding paths, a Big Top with its flag, a stage, a science dome, a lake with a boat, a big wheel that turns, rows of tents, woods, a drifting balloon, kites and six numbered pins that pop in) with a card on it: the name, the dates, a countdown to the presale on four coloured tiles whose seconds tick, and the field to sign up. Then the presale in four steps, four tier cards with the early bird sold out and tier one running down, the quiet field, yurts and a monthly plan, the programme by stage, the six places on the map, travel and stay, the questions, partners and the legal lines. Meadow green, navy, tomato, sunflower and violet, desktop to phone",
+    category: "web",
+    tags: ["festival", "presale", "tickets", "family", "children", "camping", "circus", "map", "playful", "illustration", "countdown", "sign-up", "ticket tiers", "programme", "landing page", "website", "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: "#FFF8E8", text: "#1F2A5C", onPaper: "#4A5380", primary: "#F0544F", onPrimary: "#200807", accent: "#7A5CF0", onAccent: "#FFFFFF", card: "#FFFFFF", onCard: "#1F2A5C", cardMuted: "#4A5380", panel: "#1F2A5C", onPanel: "#FFF8E8", panelMuted: "#C7CDEC", chip: "#FFE9A8", onChip: "#1F2A5C", stage: "#CFEDB4", onStage: "#1F2A5C", stageMuted: "#33406F" },
+      { name: "Pippin Hill" }
+    );
+    k.palette({ grass: "#B4E08F", grassDark: "#9AD27A", lake: "#7CCBF2", path: "#FBE7AE", white: "#FFFFFF", navy: "#1F2A5C", ink: "#14183A", tomato: "#F0544F", sunflower: "#FFC83D", violet: "#7A5CF0", pink: "#FF8FB1", tree: "#3FA36B", treeDark: "#2E8556", wood: "#B9824F", leafTile: "#7BC96F" });
+    const s = typeScale(k, {
+      Nav: { size: 15, fontWeight: 700, lineHeight: 22 },
+      Brand: { size: 22, fontWeight: 900, letterSpacing: -0.6, lineHeight: 28 },
+      Button: { size: 16, fontWeight: 800, lineHeight: 24 },
+      Kicker: { size: 13, fontWeight: 800, letterSpacing: 2.4, lineHeight: 18, textCase: "UPPER" },
+      Section: { size: 64, fontWeight: 900, letterSpacing: -2.8, lineHeight: 64 },
+      "Section md": { size: 50, fontWeight: 900, letterSpacing: -2, lineHeight: 52 },
+      "Section sm": { size: 36, fontWeight: 900, letterSpacing: -1.4, lineHeight: 38 },
+      Aside: { size: 19, fontWeight: 500, lineHeight: 29 },
+      "Aside sm": { size: 17, fontWeight: 500, lineHeight: 26 },
+      Body: { size: 16, fontWeight: 400, lineHeight: 25 },
+      Small: { size: 14, fontWeight: 500, lineHeight: 21 },
+      Label: { size: 12, fontWeight: 800, letterSpacing: 1.6, lineHeight: 16, textCase: "UPPER" },
+      Legal: { size: 13, fontWeight: 400, lineHeight: 20 },
+      Clock: { size: 48, fontWeight: 900, letterSpacing: -2, lineHeight: 50, fontFeatures: { tnum: 1 } },
+      "Clock sm": { size: 34, fontWeight: 900, letterSpacing: -1.2, lineHeight: 38, fontFeatures: { tnum: 1 } },
+      Unit: { size: 12, fontWeight: 800, letterSpacing: 1.2, lineHeight: 16, textCase: "UPPER" },
+      Field: { size: 16, fontWeight: 600, lineHeight: 24 },
+      "Step no": { size: 56, fontWeight: 900, letterSpacing: -2.4, lineHeight: 52 },
+      "Step title": { size: 22, fontWeight: 900, letterSpacing: -0.6, lineHeight: 28 },
+      Tier: { size: 20, fontWeight: 800, letterSpacing: -0.4, lineHeight: 26 },
+      Price: { size: 54, fontWeight: 900, letterSpacing: -2.4, lineHeight: 54, fontFeatures: { tnum: 1 } },
+      "Price sm": { size: 46, fontWeight: 900, letterSpacing: -2, lineHeight: 48, fontFeatures: { tnum: 1 } },
+      Status: { size: 12, fontWeight: 800, letterSpacing: 1, lineHeight: 16, textCase: "UPPER" },
+      "Act 1": { size: 44, fontWeight: 900, letterSpacing: -1.8, lineHeight: 50 },
+      "Act 1 md": { size: 38, fontWeight: 900, letterSpacing: -1.4, lineHeight: 44 },
+      "Act 1 sm": { size: 30, fontWeight: 900, letterSpacing: -1, lineHeight: 36 },
+      "Act 2": { size: 21, fontWeight: 700, letterSpacing: -0.3, lineHeight: 31 },
+      "Act 2 sm": { size: 18, fontWeight: 700, lineHeight: 27 },
+      "Act 3": { size: 15, fontWeight: 500, lineHeight: 24 },
+      Day: { size: 22, fontWeight: 900, letterSpacing: -0.6, lineHeight: 28 },
+      Q: { size: 20, fontWeight: 800, letterSpacing: -0.4, lineHeight: 27 },
+      Partner: { size: 16, fontWeight: 800, letterSpacing: -0.2, lineHeight: 22 },
+      "Name 112": { size: 112, fontWeight: 900, letterSpacing: -5.4, lineHeight: 104 },
+      "Name 84": { size: 84, fontWeight: 900, letterSpacing: -4.2, lineHeight: 76 },
+      "Name 60": { size: 60, fontWeight: 900, letterSpacing: -3, lineHeight: 56 },
+      "Sub 22": { size: 22, fontWeight: 600, letterSpacing: -0.3, lineHeight: 30 },
+      "Sub 18": { size: 18, fontWeight: 600, letterSpacing: -0.2, lineHeight: 26 },
+      Pin: { size: 18, fontWeight: 900, lineHeight: 22 }
+    });
+    const L = {
+      s,
+      upper: ["Kicker", "Label", "Unit", "Status"],
+      radius: 22,
+      pad: 26,
+      rule: 2,
+      chipRadius: 999,
+      center: true,
+      card: { stroke: { color: "text", width: 3, align: "INSIDE" }, effects: [hardShadow(k, "navy", 6, 7)] },
+      // Five dots under every section title, one in each of the festival's colours.
+      flourish: (kit, h2) => {
+        const row = kit.stack(h2, { direction: "HORIZONTAL", width: "HUG", gap: 8, name: "Dots" });
+        for (const c of ["tomato", "sunflower", "leafTile", "violet", "pink"]) kit.ellipse(row, 12, c, { name: "Dot" });
+      },
+      // A place's pin, numbered as on the map.
+      mark: (kit, f, i) => {
+        const pin = kit.stack(f, { width: 40, height: 40, radius: 20, align: "CENTER", justify: "CENTER", fill: "panel", name: "Place pin" });
+        kit.text(pin, String(i + 1), { style: s("Pin"), color: "onPanel", autoWidth: true, name: "Place number" });
+      }
+    };
+    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", "What is on", "Getting here"], cta: "Sign up", style: s("Nav"), brandStyle: s("Brand") });
+    const { hero: h, art } = hero(k, sheet, HERO, { justify: "CENTER", radius: 32, padding: { top: 48, right: 48, bottom: 48, left: 48 }, stroke: { color: "navy", width: 4, align: "INSIDE" } });
+    mapArt(k, art, s);
+    const card = k.stack(h, { width: 540, gap: 12, fill: "card", radius: 28, padding: 30, stroke: { color: "navy", width: 4, align: "INSIDE" }, effects: [hardShadow(k, "navy", 9, 10)], name: "Hero card" });
+    const kick = k.stack(card, { direction: "HORIZONTAL", width: "HUG", fill: "chip", radius: 999, padding: { top: 6, right: 14, bottom: 6, left: 14 }, name: "Hero kicker" });
+    k.text(kick, "FOUR DAYS, FOR EVERY AGE", { style: s("Kicker"), color: "onChip", autoWidth: true, name: "Hero kicker text" });
+    k.text(card, "{{brand.name}}", { style: s("Name 112"), color: "onCard", name: "Hero name" });
+    k.text(card, "A festival of music, circus, stories and science. 29 July \u2013 1 August 2027, Pippin Hill Park, Northdale.", { style: s("Sub 22"), color: "onCard", name: "Hero date" });
+    k.text(card, "THE PRESALE OPENS IN", { style: s("Kicker"), color: "cardMuted", name: "Card label" });
+    countdown(k, card, L, { prefix: "Hero", clock: CLOCK, fill: "panel", ink: "onPanel", muted: "panelMuted", gap: 8, radius: 16, pad: [10, 4], tiles: [["tomato", "ink"], ["sunflower", "ink"], ["violet", "white"], ["leafTile", "ink"]] });
+    signup(k, card, L, { name: "Hero signup", placeholder: "Your email address", cta: "Sign up for presale", radius: 999, stroke: { color: "navy", width: 3, align: "INSIDE" } });
+    k.text(card, "Sign up by Sunday 28 February. One code a household: two family tickets, or six single ones.", { style: s("Small"), color: "cardMuted", name: "Card note" });
+    steps(k, sheet, L, { kicker: "How the presale works", title: "Four dates for the fridge door", aside: "Miss the first and you are in the general sale a week later, a tier dearer, with everybody else.", items: STEPS, boxed: true });
+    const tix = ladder(k, sheet, L, { kicker: "Tickets", title: "Earlier is cheaper", aside: "A family ticket is two adults and up to three children for all four days, camping included. Each tier is a set number of them.", tiers: TIERS, variant: "cards", stock: STOCK });
+    addOns(k, tix, L, { items: EXTRAS, plan: ["Pay monthly", "A \xA330 deposit holds your tickets. Pay the rest in five monthly parts, the last on 1 July. There is no fee, and your tier is kept.", "\xA330 deposit"] });
+    lineup(k, sheet, L, { kicker: "What is on, so far", title: "Four stages of it", aside: "The full programme, with the workshops and the times, comes out on 1 May.", bills: BILLS, variant: "stages", tba: "With more than a hundred shows, workshops and walkabouts still to be announced.", sep: "\xB7", panel: { radius: 32, pad: { top: 104, right: 56, bottom: 60, left: 56 }, stroke: { color: "navy", width: 4, align: "INSIDE" }, art: (kit, p) => {
+      const g = kit.frame(p, { x: 0, y: 0, width: AW, height: 80 }, { name: "Panel art" });
+      bunting(kit, g, { x1: -20, y1: 6, x2: 610, y2: 12, sag: 30, n: 13, size: 28, colors: ["tomato", "sunflower", "violet", "pink"], line: "navy" });
+      bunting(kit, g, { x1: 610, y1: 12, x2: 1500, y2: 2, sag: 34, n: 17, size: 28, colors: ["violet", "tomato", "sunflower", "pink"], line: "navy", name: "Bunting far" });
+    } } });
+    artBand(k, sheet, { w: AW, h: 200, focus: 640, radius: 32, draw: (a) => mapArt(k, a, s) });
+    features(k, sheet, L, { kicker: "The map", title: "Six places to find", aside: "The numbers are the pins on the map. Step-free paths join all six, and there is a quiet space at every one.", items: PLACES.map(([t, d]) => [t, d]), boxed: true });
+    travel(k, sheet, L, { kicker: "Getting here and staying", title: "Up the hill to Pippin Hill", aside: "The park is two miles from Northdale station. Bring a trolley; the hill is real.", routes: ROUTES, stays: STAYS });
+    artBand(k, sheet, { w: AW, h: 160, focus: 300, radius: 32, name: "Art band 2", draw: (a) => mapArt(k, a, s) });
+    faq(k, sheet, L, { kicker: "Questions", title: "Before you sign up", items: QUESTIONS });
+    partners(k, sheet, L, { label: "With thanks to", names: ["Northdale Council", "Bramley Juice Co.", "The Little Readers Trust", "Radio Northdale", "Hill & Dale Outdoors", "Northdale Science Centre"] });
+    closing(k, sheet, L, { title: "School is out on\xA028 July. Be ready before then.", text: "Sign up by Sunday 28 February. Your code arrives on 2 March and the presale opens on Thursday 4 March at nine.", clock: CLOCK, placeholder: "Your email address", cta: "Sign up for presale", note: "Free to sign up. One code a household.", radius: 32, stroke: { color: "text", width: 4, align: "INSIDE" }, effects: [hardShadow(k, "navy", 9, 10)] });
+    legal(k, sheet, L, {
+      links: ["Ticket terms", "Official resale", "Access", "Privacy", "Contact"],
+      lines: ["\xA9 2026 Pippin Hill Festival CIC, Northdale. Tickets are sold under the ticket terms and carry the holder\u2019s name. Under-16s must be with an adult.", "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 112": { tablet: "Name 84", mobile: "Name 60" }, "Sub 22": { tablet: "Sub 18", mobile: "Sub 18" }, Clock: { tablet: "Clock sm", mobile: "Clock sm" } },
+      hide: { mobile: ["Card note"] },
+      tweak: (kit, id, size) => {
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        if (size === "tablet") {
+          each("Hero card", { width: 390, padding: { top: 24, right: 24, bottom: 24, left: 24 } });
+          each("Hero signup", { layoutMode: "VERTICAL" });
+          for (const n of kit.named(id, "Hero signup")) for (const c of kit.node(n).childIds) if (kit.node(c).type === "FRAME") kit.patch(c, { layoutSizingHorizontal: "FILL" });
+        }
+        if (size === "mobile") {
+          each("Hero", { primaryAxisAlignItems: "MIN", cornerRadius: 24 });
+          each("Hero card", { layoutSizingHorizontal: "FILL", padding: { top: 18, right: 16, bottom: 18, left: 16 }, itemSpacing: 10, cornerRadius: 20 });
+          each("Art band", { visible: false });
+          each("Art band 2", { visible: true });
+          for (const b of kit.named(id, "Art band 2")) for (const a of kit.named(b, "Band art")) kit.patch(a, { x: -564 });
+          for (const b of kit.named(id, "Art")) for (const name of ["Wheel", "Cabins", "Wheel legs"]) for (const n of kit.named(b, name)) kit.patch(n, { x: kit.node(n).x + 70, y: kit.node(n).y - 118 });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  festival_presale_family_default
+};

package/dist/chunks/chunk-U5DXH3UW.js

@@ -0,0 +1,80 @@
+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 {
+  bar,
+  bob,
+  card,
+  saasUi
+} from "./chunk-7XBGAOHO.js";
+import {
+  E,
+  arc,
+  sparkle
+} from "./chunk-3OBWHBPC.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/lottie/saas-ui-empty-search.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var saas_ui_empty_search_default = saasUi({
+  slug: "empty-search",
+  role: "empty-state",
+  size: "spot",
+  duration: 4e3,
+  loop: true,
+  title: "empty state: no search results",
+  description: "The empty state for a search that found nothing: a magnifier sweeps down the faded result rows, each dimming as the lens passes, and its question mark tilts as it comes back empty \u2014 a four-second seamless loop, 800\xD7600",
+  tags: ["empty state", "search", "no results", "not found", "illustration"],
+  build(l) {
+    l.circle(l.sheet, 400, 300, 258, "soft", { name: "Backdrop" });
+    const floor = l.rect(l.sheet, 220, 522, 360, 20, "accent", { radius: 10, name: "Floor shadow", opacity: 0.16 });
+    l.keys(floor, "scaleX", [[0, 1, E.inOut], [2e3, 0.92, E.inOut], [4e3, 1]]);
+    const c = card(l, l.sheet, 150, 104, 400, 380, "Results");
+    l.rect(c, 24, 24, 352, 56, "paper", { radius: 28, name: "Search field", stroke: { color: "line", width: 2 } });
+    l.ring(c, 56, 50, 10, "mute", 4, { name: "Field icon" });
+    l.line(c, [[64, 58], [71, 65]], "mute", 4, { name: "Field icon handle" });
+    bar(l, c, 88, 43, 132, 14, "ink", { name: "Query" });
+    l.rect(c, 296, 38, 64, 28, "soft", { radius: 14, name: "Result count" });
+    bar(l, c, 312, 47, 32, 10, "accent", { name: "Result count value" });
+    const caret = l.rect(c, 228, 38, 4, 24, "accent", { radius: 2, name: "Caret" });
+    l.opacity(caret, [[0, 1, E.hold], [500, 0, E.hold], [1e3, 1, E.hold], [1500, 0, E.hold], [2e3, 1, E.hold], [2500, 0, E.hold], [3e3, 1, E.hold], [3500, 0, E.hold], [4e3, 1]]);
+    for (let i = 0; i < 3; i++) {
+      const row = l.box(c, 24, 104 + i * 88, 352, 72, "Ghost result");
+      l.rect(row, 0, 0, 352, 72, "paper", { radius: 18, name: "Row ground" });
+      l.rect(row, 14, 14, 44, 44, "line", { radius: 14, name: "Row icon" });
+      bar(l, row, 74, 20, [176, 208, 150][i], 14, "line", { name: "Row title" });
+      bar(l, row, 74, 42, [112, 92, 128][i], 10, "line", { name: "Row detail" });
+      const t = 350 + i * 420;
+      l.opacity(row, [[0, 1, E.hold], [t, 1, E.inOut], [t + 380, 0.35, E.inOut], [t + 1500, 1, E.hold], [4e3, 1]]);
+    }
+    const lens = l.box(l.sheet, 420, 150, 260, 260, "Magnifier");
+    l.circle(lens, 106, 116, 92, "ink", { name: "Lens shadow", opacity: 0.1 });
+    l.line(lens, [[150, 150], [222, 222]], "ink", 30, { name: "Handle" });
+    l.line(lens, [[196, 196], [222, 222]], "accent", 30, { name: "Grip" });
+    l.circle(lens, 100, 100, 84, "white", { name: "Glass", opacity: 0.82 });
+    l.ring(lens, 100, 100, 84, "ink", 18, { name: "Rim" });
+    l.line(lens, arc(100, 100, 60, -70, -20), "line", 8, { name: "Glint" });
+    const mark = l.box(lens, 60, 52, 80, 100, "Nothing found");
+    l.line(mark, [...arc(40, 30, 20, -90, 140), { x: 40, y: 64 }], "accent", 12, { name: "Question hook" });
+    l.circle(mark, 40, 86, 8, "accent", { name: "Question dot" });
+    l.keys(lens, "translateX", [[0, 0, E.inOut], [1700, -150, E.hold], [2300, -150, E.inOut], [3700, 0, E.hold], [4e3, 0]]);
+    l.keys(lens, "translateY", [[0, 0, E.inOut], [1700, 150, E.hold], [2300, 150, E.inOut], [3700, 0, E.hold], [4e3, 0]]);
+    l.keys(lens, "rotation", [[0, 0, E.inOut], [850, -9, E.inOut], [1700, 0, E.inOut], [2e3, 5, E.inOut], [2300, 0, E.inOut], [3e3, 8, E.inOut], [3700, 0, E.hold], [4e3, 0]]);
+    l.keys(mark, "rotation", [[0, 0, E.hold], [1700, 0, E.out], [1850, -16, E.inOut], [2050, 12, E.inOut], [2300, 0, E.hold], [3700, 0, E.out], [3800, -8, E.inOut], [4e3, 0]]);
+    l.scale(mark, [[0, 1, E.hold], [1700, 1, E.pop], [1900, 1.16, E.inOut], [2300, 1, E.hold], [4e3, 1]]);
+    const star = l.shape(l.sheet, sparkle(148, 150, 18), "gold", { name: "Sparkle" });
+    l.scale(star, [[0, 1, E.inOut], [2e3, 0.55, E.inOut], [4e3, 1]]);
+    bob(l, l.ring(l.sheet, 668, 468, 15, "accent", 6, { name: "Loop", opacity: 0.5 }), 12, 150);
+    bob(l, l.circle(l.sheet, 112, 356, 10, "success", { name: "Dot" }), 10, -250);
+    bob(l, l.circle(l.sheet, 690, 128, 8, "accent", { name: "Dot", opacity: 0.6 }), 8, 300);
+  }
+});
+
+export {
+  saas_ui_empty_search_default
+};