@popcraft/kit 0.53.4 → 0.53.6

package/dist/chunks/chunk-AV2ABC5Q.js

@@ -0,0 +1,375 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  LOOP,
+  addOns,
+  artBand,
+  closing,
+  countdown,
+  disc,
+  drain,
+  faq,
+  features,
+  hero,
+  ladder,
+  legal,
+  lineup,
+  partners,
+  parts,
+  presaleResponsive,
+  shape,
+  signup,
+  steps,
+  stockCount,
+  sway,
+  ticking,
+  travel,
+  turn
+} from "./chunk-A5DOI23N.js";
+import {
+  sparkPath
+} from "./chunk-2VFVKPUT.js";
+import {
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  rule,
+  typeScale
+} from "./chunk-YHF6LRMF.js";
+import {
+  nav,
+  page
+} from "./chunk-ZMD3C2YJ.js";
+import {
+  box,
+  line,
+  pt3,
+  rng
+} from "./chunk-EJLCQVQK.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/web/festival-presale-jazz.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Festival presale page: city jazz and soul";
+var CLOCK = { days: "21", hours: "03", minutes: "12", from: 38, to: 32 };
+var STOCK = { label: "Nearly gone", from: 1640, left: 1612, total: 8e3 };
+var AW = 1200;
+var AH = 900;
+var FLOOR = AH - 98;
+var HERO = {
+  artW: AW,
+  artH: AH,
+  h: { desktop: 900, laptop: 880, tablet: 900, mobile: 864 },
+  fit: { laptop: { s: 0.978, ax: 1200, ay: 900, hx: 1120, hy: 880 }, tablet: { s: 1, ax: 600, ay: 900, hx: 330, hy: 900 }, mobile: { s: 0.4, ax: 930, ay: 900, hx: 176, hy: 864 } },
+  pad: { tablet: { top: 44, right: 36, bottom: 150, left: 36 }, mobile: { top: 24, right: 18, bottom: 300, left: 18 } }
+};
+var STEPS = [
+  ["By 14 March", "Register", "Leave your email by Sunday 14 March, midnight. One registration a person. It is free."],
+  ["16 March", "Receive your code", "On Tuesday 16 March your personal code arrives by email. It buys up to four passes in one order."],
+  ["18 March \xB7 10:00", "The presale opens", "Thursday 18 March at ten. The waiting room opens at 9:30 and your place in it is drawn by lot."],
+  ["26 March", "General sale", "Passes that remain go on general sale on Friday 26 March at ten, at the release they have reached."]
+];
+var TIERS = [
+  { tag: "Founders\u2019 release", name: "Four-night pass", price: "\u20AC180", note: "3,000 passes, offered to 2026 pass holders in December. All taken.", status: "sold", chip: "Sold out" },
+  { tag: "First release", name: "Four-night pass", price: "\u20AC215", note: "On sale now to members of the Blue Hour Society. What remains opens to presale codes on 18 March.", status: "selling", chip: "On sale" },
+  { tag: "Second release", name: "Four-night pass", price: "\u20AC245", note: "9,000 passes, held for the presale and opened when the first release is gone.", status: "next", chip: "Presale \xB7 18 March" },
+  { tag: "Final release", name: "Four-night pass", price: "\u20AC275", note: "The last 5,000 passes, for the general sale, should the presale leave any.", status: "later", chip: "General \xB7 26 March" }
+];
+var EXTRAS = [
+  ["A table for two", "+ \u20AC120 a night", "A candlelit table at the front of the Tramworks hall, with a bottle already on it."],
+  ["The Late Room", "+ \u20AC45", "Into the after-hours session every night, from midnight until four in the morning."],
+  ["Single nights", "From \u20AC68", "Night tickets join the general sale on 26 March, if the passes leave room for them."]
+];
+var BILLS = [
+  { label: "The Tramworks", note: "The main hall. 6,500 seated and standing, doors at seven.", heads: ["Celeste Armand", "The Ruben Okafor Quintet"], acts: ["Marguerite Bell & Her Orchestra\xA0\xB7\xA0Low Tide Trio", "Dessa Wainwright"], more: ["Harbour Lights Big Band", "Nico Varga", "The Velvet Hours", "Ines Calloway"] },
+  { label: "Quay Gardens", note: "Open air by the water, from four in the afternoon.", heads: ["Sister Opal", "Kingsley Moreau"], acts: ["The Night Ferry", "Amara Sole", "Brass Against the Tide"], more: ["Port Aurelia Youth Jazz Orchestra", "Lena Duarte", "Sunday Choir of the Docks"] },
+  { label: "The Late Room", note: "After hours, midnight to four. Over 18s.", heads: ["Theo Lindqvist Trio"], acts: ["Mona Reyes", "Small Hours Collective", "Jules Abara"], more: ["Open sessions led by the house band, every night"] }
+];
+var ON_SITE = [
+  ["Three stages, eleven clubs", "A pass is a wristband for the Tramworks, Quay Gardens and eleven clubs in the old town, until the last set."],
+  ["Seats or the floor", "The Tramworks has 2,400 unreserved seats and a standing floor. Come early for the first, late for the second."],
+  ["Supper before the downbeat", "Thirty restaurants hold festival tables and a\xA0three-course menu at \u20AC38, served by seven."],
+  ["Listening rooms", "Talks, vinyl sessions and masterclasses at the Conservatoire, every day at noon. Free with a pass."],
+  ["The record fair", "Sixty dealers under the tram shed roof on Saturday\xA0and Sunday, with a turntable to try before you buy."],
+  ["Access", "Step-free routes to every stage, seated platforms, hearing loops and a free pass for a companion."]
+];
+var ROUTES = [
+  ["Train", "Port Aurelia Central is ten minutes\u2019 walk from the Tramworks. Late trains wait for the last set on Friday and Saturday.", "Last train 01:40"],
+  ["Tram", "Lines 2 and 7 stop at Quay Gardens and run all night during the festival.", "Free with a pass"],
+  ["Air", "Aurelia Costa airport is 25 minutes from the old town by airport tram.", "Every 12 minutes"],
+  ["Car", "The old town closes to cars in the evening. Leave yours at a Ring car park and ride in.", "\u20AC9 a day"]
+];
+var STAYS = [
+  ["Festival hotels", "Twenty hotels within a walk of the Tramworks, at rates held until 1 June.", "From \u20AC96"],
+  ["The harbour hostel", "Bunks and private rooms on the quay, with a bar that keeps jazz hours.", "From \u20AC34"],
+  ["Apartments", "For stays of three nights or more, booked through our partner.", "From \u20AC130"]
+];
+var QUESTIONS = [
+  ["How many passes can I buy?", "Four with a presale code, six in the general sale. Each pass carries a name, which you may change free of charge until 1 September."],
+  ["Does a code guarantee a pass?", "No. It admits you to the presale queue. More codes are sent than there are passes, so be there at ten."],
+  ["May I resell my pass?", "Through the official resale only, at the price you paid. A pass sold anywhere else is cancelled."],
+  ["Is there an age limit?", "The Tramworks and Quay Gardens\xA0welcome all ages until ten at night. The clubs and the Late Room are for over 18s."],
+  ["What if I cannot attend?", "You may cancel within 14 days of buying for a full refund. After that the official resale\xA0returns your money when the pass sells."],
+  ["Are the venues accessible?", "Yes. Tell us what you need when you book: step-free seating, hearing loops, and a free pass for a companion."]
+];
+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 sub", preset: "wipe-in", at: 700, params: { duration: 600 } },
+  { layer: "Hero date", preset: "fade-in", at: 1e3, params: { duration: 600 } },
+  { layer: "Hero gate", preset: "rise-in", at: 1100, params: { duration: 700 } },
+  { layer: "Step", preset: "rise-in", at: 1200, params: { duration: 500 }, stagger: { delay: 140 } },
+  { layer: "Act", preset: "fade-in", at: 1500, params: { duration: 600 }, stagger: { delay: 220 } }
+];
+var counts = [ticking("Hero", CLOCK), ticking("Band", CLOCK), stockCount("Tier stock", STOCK)];
+var place = (cx, cy, deg, s, dx, dy) => (path) => {
+  const a = deg * Math.PI / 180, c = Math.cos(a), n = Math.sin(a);
+  const mv = (q) => pt3(dx + ((q.x - cx) * c - (q.y - cy) * n) * s, dy + ((q.x - cx) * n + (q.y - cy) * c) * s);
+  return { ...path, points: path.points.map((q) => ({ ...q, ...mv(q), ...q.handleIn ? { handleIn: mv(q.handleIn) } : {}, ...q.handleOut ? { handleOut: mv(q.handleOut) } : {} })) };
+};
+function posterArt(k, art) {
+  const rules = [];
+  for (let i = 0; i < 14; i++) rules.push(line(930 + i * 24, -10, 1230 + i * 24, 290));
+  shape(k, art, rules, "cream", { name: "Corner rules", strokeWidth: 2, opacity: 0.16 });
+  shape(k, art, [disc(905, 350, 226)], "vermilion", { name: "Big disc" });
+  const brass = shape(k, art, [disc(1085, 570, 124)], "brass", { name: "Brass disc" });
+  sway(k, brass, "translateY", 8, 1);
+  const rc = { x: 705, y: 618, r: 138 };
+  shape(k, art, [disc(rc.x, rc.y, rc.r)], "night", { name: "Record" });
+  shape(k, art, [34, 46, 58, 70, 82, 94, 106, 118].map((r2) => {
+    const d = disc(rc.x, rc.y, r2);
+    return d;
+  }), "navy", { name: "Grooves", strokeWidth: 1.5, opacity: 0.9 });
+  const shine = [0, 180].map((a0) => ({ closed: true, points: [pt3(rc.r, rc.r), ...Array.from({ length: 7 }, (_, i) => {
+    const a = (a0 - 16 + i * 5.3) * Math.PI / 180;
+    return pt3(rc.r + rc.r * Math.cos(a), rc.r + rc.r * Math.sin(a));
+  })] }));
+  const sh = k.vector(art, rc.r * 2, rc.r * 2, shine, "cream", { name: "Record shine", opacity: 0.16, absolute: { x: rc.x - rc.r, y: rc.y - rc.r } });
+  turn(k, sh, 2);
+  shape(k, art, [disc(rc.x, rc.y, 44)], "brass", { name: "Record label" });
+  shape(k, art, [disc(rc.x, rc.y, 6)], "night", { name: "Spindle" });
+  const T = place(240, 70, -24, 1.46, 930, 366);
+  const body = [
+    box(40, 60, 270, 14),
+    { closed: true, points: [pt3(300, 58), { ...pt3(372, 52), handleOut: pt3(410, 46) }, pt3(446, 6), pt3(446, 128), { ...pt3(372, 82), handleIn: pt3(410, 88) }, pt3(300, 76)] },
+    { closed: true, points: [pt3(8, 54), pt3(22, 60), pt3(40, 62), pt3(40, 72), pt3(22, 74), pt3(8, 80)] },
+    box(148, 44, 26, 70),
+    box(184, 44, 26, 70),
+    box(220, 44, 26, 70)
+  ];
+  shape(k, art, body.map(T), "cream", { name: "Trumpet" });
+  shape(k, art, [{ closed: false, points: [pt3(118, 74), { ...pt3(100, 96), handleIn: pt3(100, 74), handleOut: pt3(100, 122) }, pt3(126, 122), pt3(268, 122), { ...pt3(292, 98), handleIn: pt3(292, 122), handleOut: pt3(292, 76) }, pt3(280, 76)] }].map(T), "cream", { name: "Trumpet loop", strokeWidth: 10 });
+  shape(k, art, [line(446, 4, 446, 130)].map(T), "brass", { name: "Bell rim", strokeWidth: 8 });
+  [161, 197, 233].forEach((x, i) => {
+    const v = shape(k, art, [box(x - 3, 20, 6, 26), disc(x, 18, 10, 5)].map(T), "cream", { name: "Valve" });
+    sway(k, v, "translateY", 5, 3, i / 3);
+  });
+  const bell = T({ closed: false, points: [pt3(446, 67)] }).points[0];
+  [70, 118, 166, 214].forEach((r2, i) => {
+    const arc = { closed: false, points: Array.from({ length: 13 }, (_, j) => {
+      const a = (-74 + j * 9) * Math.PI / 180;
+      return pt3(bell.x + r2 * Math.cos(a), bell.y + r2 * Math.sin(a));
+    }) };
+    const id = shape(k, art, [arc], i % 2 ? "cream" : "brass", { name: "Sound", strokeWidth: 5, opacity: 0.5 });
+    sway(k, id, "opacity", 0.45, 2, -i / 4);
+  });
+  const q = rng(8);
+  for (let i = 0; i < 9; i++) {
+    const sz = 14 + Math.round(q() * 22);
+    const id = k.vector(art, sz, sz, [sparkPath(sz)], i % 2 ? "brass" : "cream", { name: "Spark", opacity: 0.6, absolute: { x: Math.round(640 + q() * 520), y: Math.round(40 + q() * 560) } });
+    sway(k, id, "opacity", 0.4, 2 + i % 3, q());
+  }
+  const sky = [], lit = [[], [], []];
+  const r = rng(19);
+  for (let x = -320; x < 1520; ) {
+    const w = 44 + Math.round(r() * 70), h = 50 + Math.round(r() * 120), top = FLOOR - h;
+    sky.push(box(x, top, w, h + 4));
+    if (r() > 0.6) sky.push({ closed: true, points: [pt3(x, top), pt3(x + w / 2, top - 18 - r() * 22), pt3(x + w, top)] });
+    for (let wy = top + 12; wy < FLOOR - 14; wy += 22) for (let wx = x + 9; wx < x + w - 10; wx += 16) if (r() > 0.55) lit[Math.floor(r() * 3)].push(box(wx, wy, 7, 10));
+    x += w + 3;
+  }
+  shape(k, art, sky, "navy", { name: "Skyline" });
+  lit.forEach((ws, i) => {
+    const id = shape(k, art, ws, "brass", { name: "Windows", opacity: 0.6 });
+    sway(k, id, "opacity", 0.35, 1 + i, i / 3);
+  });
+  const whites = [], blacks = [];
+  for (let i = 0, x = -320; x < 1520; i++, x += 38) {
+    whites.push(box(x, FLOOR, 36, 104));
+    if (![2, 6].includes(i % 7)) blacks.push(box(x + 26, FLOOR, 22, 62));
+  }
+  shape(k, art, whites, "cream", { name: "Keys" });
+  [14, 17, 19, 23, 26, 30, 33].forEach((n, i) => {
+    const id = shape(k, art, [box(-320 + n * 38, FLOOR, 36, 104)], "brass", { name: "Played key", opacity: 0.5 });
+    sway(k, id, "opacity", 0.5, 2 + i % 3 * 2, i / 7);
+  });
+  shape(k, art, blacks, "night", { name: "Black keys" });
+}
+function cornerDiscs(k, panel) {
+  const f = k.frame(panel, { x: AW - 360, y: 0, width: 360, height: 520 }, { name: "Panel art right" });
+  shape(k, f, [disc(390, 350, 130)], "vermilion", { name: "Big disc" });
+  const brass = shape(k, f, [disc(338, 96, 44)], "brass", { name: "Brass disc" });
+  sway(k, brass, "translateY", 6, 1);
+  [[250, 150, 20], [196, 250, 14], [300, 520, 18]].forEach(([x, y, sz], i) => {
+    const id = k.vector(f, sz, sz, [sparkPath(sz)], i % 2 ? "brass" : "cream", { name: "Spark", opacity: 0.6, absolute: { x, y } });
+    sway(k, id, "opacity", 0.4, 2 + i, i / 3);
+  });
+}
+var festival_presale_jazz_default = defineTemplate({
+  id: "web-festival-presale-jazz",
+  meta: {
+    name: NAME,
+    description: "A ticket presale landing page for a large city jazz and soul festival. The hero is a club poster on midnight blue: the name large in a serif beside a countdown to the presale whose seconds tick and the field to register, and a picture of a vermilion disc, a trumpet whose valves work and whose bell throws rings of sound, a turning record, the old town\u2019s skyline with its windows coming on and a keyboard whose keys light. Then the presale in four steps, the releases as ticket stubs with the founders\u2019 release sold out and the first running down, tables, the Late Room and instalments, the bill by stage, what a pass opens, travel and stay, the questions, partners and the legal lines. Midnight blue, cream, brass and vermilion, desktop to phone",
+    category: "web",
+    tags: ["festival", "presale", "tickets", "jazz", "soul", "city", "club poster", "trumpet", "countdown", "sign-up", "ticket tiers", "line-up", "landing page", "website", "serif", "elegant", "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: "#F4E8D2", text: "#1B1512", onPaper: "#5C4B40", primary: "#E3A53B", onPrimary: "#1B1512", accent: "#BF3B24", onAccent: "#FFF4E0", card: "#FBF3E2", onCard: "#1B1512", cardMuted: "#5C4B40", panel: "#14213D", onPanel: "#F6EAD2", panelMuted: "#C5C9D8", chip: "#E9DABD", onChip: "#1B1512", stage: "#14213D", onStage: "#F6EAD2", stageMuted: "#C5C9D8" },
+      { name: "Blue Hour" }
+    );
+    k.palette({ vermilion: "#C8442C", brass: "#E3A53B", cream: "#F6EAD2", night: "#0B1226", navy: "#22335C" });
+    const caps = { fontWeight: 700, textCase: "UPPER" };
+    const s = typeScale(k, {
+      Nav: { size: 13, ...caps, letterSpacing: 1.6, lineHeight: 20 },
+      Brand: { ...SERIF, size: 24, fontWeight: 900, letterSpacing: -0.4, lineHeight: 30 },
+      Button: { size: 14, ...caps, fontWeight: 800, letterSpacing: 1.4, lineHeight: 22 },
+      Kicker: { size: 13, ...caps, letterSpacing: 3.2, lineHeight: 18 },
+      Section: { ...SERIF, size: 68, fontWeight: 900, letterSpacing: -2, lineHeight: 68 },
+      "Section md": { ...SERIF, size: 52, fontWeight: 900, letterSpacing: -1.4, lineHeight: 54 },
+      "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, ...caps, letterSpacing: 2.2, lineHeight: 16 },
+      Legal: { size: 13, fontWeight: 400, lineHeight: 20 },
+      Clock: { ...SERIF, size: 52, fontWeight: 900, letterSpacing: -1.5, lineHeight: 54, fontFeatures: { tnum: 1 } },
+      "Clock sm": { ...SERIF, size: 36, fontWeight: 900, letterSpacing: -1, lineHeight: 40, fontFeatures: { tnum: 1 } },
+      Unit: { size: 12, ...caps, letterSpacing: 2, lineHeight: 16 },
+      Field: { size: 16, fontWeight: 500, lineHeight: 24 },
+      "Step no": { ...SERIF, size: 56, fontWeight: 900, lineHeight: 52 },
+      "Step title": { ...SERIF, size: 24, fontWeight: 800, letterSpacing: -0.3, lineHeight: 30 },
+      Tier: { ...SERIF, size: 26, fontWeight: 800, letterSpacing: -0.4, lineHeight: 32 },
+      Price: { ...SERIF, size: 54, fontWeight: 900, letterSpacing: -1.8, lineHeight: 54, fontFeatures: { tnum: 1 } },
+      "Price sm": { ...SERIF, size: 44, fontWeight: 900, letterSpacing: -1.4, lineHeight: 46, fontFeatures: { tnum: 1 } },
+      Status: { size: 12, ...caps, fontWeight: 800, letterSpacing: 1.6, lineHeight: 16 },
+      "Act 1": { ...SERIF, size: 54, fontWeight: 900, letterSpacing: -1.6, lineHeight: 60 },
+      "Act 1 md": { ...SERIF, size: 42, fontWeight: 900, letterSpacing: -1.1, lineHeight: 48 },
+      "Act 1 sm": { ...SERIF, size: 34, fontWeight: 900, letterSpacing: -0.8, lineHeight: 40 },
+      "Act 2": { ...SERIF, size: 24, fontWeight: 600, lineHeight: 34 },
+      "Act 2 sm": { ...SERIF, size: 20, fontWeight: 600, lineHeight: 29 },
+      "Act 3": { size: 13, ...caps, letterSpacing: 2, lineHeight: 24 },
+      Day: { size: 15, ...caps, fontWeight: 800, letterSpacing: 3, lineHeight: 22 },
+      Q: { ...SERIF, size: 22, fontWeight: 800, letterSpacing: -0.2, lineHeight: 29 },
+      Partner: { ...SERIF, size: 18, fontWeight: 700, fontStyle: "italic", lineHeight: 24 },
+      "Name 168": { ...SERIF, size: 168, fontWeight: 900, letterSpacing: -6, lineHeight: 142 },
+      "Name 150": { ...SERIF, size: 150, fontWeight: 900, letterSpacing: -5.4, lineHeight: 128 },
+      "Name 112": { ...SERIF, size: 112, fontWeight: 900, letterSpacing: -4, lineHeight: 98 },
+      "Name 62": { ...SERIF, size: 62, fontWeight: 900, letterSpacing: -2, lineHeight: 62 },
+      "Sub 30": { size: 30, ...caps, fontWeight: 800, letterSpacing: 5, lineHeight: 38 },
+      "Sub 18": { size: 18, ...caps, fontWeight: 800, letterSpacing: 3, lineHeight: 26 }
+    });
+    const L = {
+      s,
+      upper: ["Kicker", "Label", "Unit", "Status", "Act 3", "Day"],
+      radius: 4,
+      pad: 26,
+      rule: 1,
+      chipRadius: 2,
+      card: { stroke: { color: "text", width: 1, align: "INSIDE" } },
+      // A double rule under every section head.
+      flourish: (kit, h2) => {
+        const r = kit.stack(h2, { gap: 3, name: "Double rule" });
+        rule(kit, r, "text", { weight: 3 });
+        rule(kit, r, "text", { weight: 1 });
+      },
+      mark: (kit, f, i) => {
+        kit.ellipse(f, 30, i % 2 ? "accent" : "primary", { name: "Feature mark" });
+      }
+    };
+    parts(k, L, { pad: [15, 24] });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 112, top: 28 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    nav(k, sheet, { links: ["Presale", "Passes", "The bill", "The city"], cta: "GET A CODE", style: s("Nav"), brandStyle: s("Brand") });
+    const { hero: h, art } = hero(k, sheet, HERO, { justify: "CENTER", gap: 14, padding: { top: 48, right: 56, bottom: 150, left: 56 } });
+    posterArt(k, art);
+    const copy = k.stack(h, { width: 540, gap: 14, name: "Hero copy" });
+    k.text(copy, "FOUR NIGHTS \xB7 THREE STAGES \xB7 ELEVEN CLUBS", { style: s("Kicker"), color: "stageMuted", name: "Hero kicker" });
+    k.text(copy, "{{brand.name}}", { style: s("Name 168"), color: "onStage", name: "Hero name" });
+    k.text(copy, "JAZZ & SOUL FESTIVAL", { style: s("Sub 30"), color: "brass", name: "Hero sub" });
+    k.text(copy, "16 \u2013 19 September 2027 \xB7 The Tramworks and Quay Gardens, Port Aurelia", { style: s("Aside"), color: "onStage", name: "Hero date" });
+    const gate = k.stack(copy, { gap: 12, padding: { top: 10, right: 0, bottom: 0, left: 0 }, name: "Hero gate" });
+    rule(k, gate, "brass", { weight: 2, name: "Gate rule" });
+    k.text(gate, "THE PRESALE OPENS IN", { style: s("Kicker"), color: "stageMuted", name: "Gate label" });
+    countdown(k, gate, L, { prefix: "Hero", clock: CLOCK, fill: "card", ink: "onCard", muted: "cardMuted", gap: 8, pad: [10, 4] });
+    signup(k, gate, L, { name: "Hero signup", placeholder: "Your email address", cta: "REGISTER FOR PRESALE" });
+    steps(k, sheet, L, { kicker: "The presale", title: "How the presale works", aside: "Four dates. The presale is the only way to the first and second releases.", items: STEPS });
+    const tix = ladder(k, sheet, L, { kicker: "Passes", title: "Four releases, one direction", aside: "A release is a fixed number of four-night passes. When it is gone the next opens, at the next price.", tiers: TIERS, variant: "stubs", stock: STOCK });
+    addOns(k, tix, L, { items: EXTRAS, plan: ["Pay in instalments", "Hold your pass with \u20AC50 and pay the balance in three parts, on 1 May, 1 June and 1 July. No interest, and your release price is kept.", "\u20AC50 deposit"] });
+    lineup(k, sheet, L, { kicker: "The bill, first announcement", title: "On three stages", aside: "The club programme, eleven rooms of it, follows on 20 April.", bills: BILLS, variant: "stages", tba: "With forty more artists and the full club programme to be announced on 20 April.", sep: "\xB7", panel: { radius: 4, art: cornerDiscs } });
+    artBand(k, sheet, { w: AW, h: 200, focus: 780, radius: 4, draw: (a) => posterArt(k, a) });
+    features(k, sheet, L, { kicker: "With a pass", title: "What a pass opens", items: ON_SITE });
+    travel(k, sheet, L, { kicker: "The city", title: "Getting to Port Aurelia, and staying", aside: "Everything is within twenty minutes\u2019 walk, and the trams run all night.", routes: ROUTES, stays: STAYS });
+    artBand(k, sheet, { w: AW, h: 160, focus: 850, radius: 4, name: "Art band 2", draw: (a) => posterArt(k, a) });
+    faq(k, sheet, L, { kicker: "Questions", title: "Before you register", items: QUESTIONS });
+    partners(k, sheet, L, { label: "In partnership with", names: ["Banco Aurelia", "Radio Meridian", "Casa Ferreira Wines", "Aurelia Trams", "The Conservatoire", "H\xF4tel Lumi\xE8re"] });
+    closing(k, sheet, L, { title: "The good seats go in the presale.", text: "Register by Sunday 14 March. Your code arrives on the 16th, and the presale opens on Thursday 18 March at ten.", clock: CLOCK, placeholder: "Your email address", cta: "REGISTER FOR PRESALE", note: "Free to register. One code a person.", radius: 4 });
+    legal(k, sheet, L, {
+      links: ["Ticket terms", "Official resale", "Access", "Privacy", "Contact"],
+      lines: ["\xA9 2026 Blue Hour Festival S.A., Port Aurelia. Passes are sold under the ticket terms and carry the holder\u2019s name.", "Passes may be resold only through the official resale, at the price paid. Passes 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 168": { laptop: "Name 150", tablet: "Name 112", mobile: "Name 62" }, "Sub 30": { tablet: "Sub 18", mobile: "Sub 18" }, Clock: { tablet: "Clock sm", mobile: "Clock sm" } },
+      tweak: (kit, id, size) => {
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        if (size === "laptop") each("Hero copy", { width: 500 });
+        if (size === "tablet") {
+          each("Hero copy", { width: 316 });
+          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("Panel art right", { visible: false });
+          each("Hero", { primaryAxisAlignItems: "MIN" });
+          each("Hero copy", { layoutSizingHorizontal: "FILL", itemSpacing: 10 });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  festival_presale_jazz_default
+};

package/dist/chunks/chunk-AW6UPNTX.js

@@ -0,0 +1,232 @@
+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 {
+  SHARD,
+  blinking,
+  blocks,
+  cell,
+  clockFrames,
+  cursor,
+  fitGround,
+  ground,
+  lockup,
+  minimap,
+  mono,
+  promptLine,
+  runnerGrid,
+  scan,
+  spinner,
+  steps,
+  termBrand,
+  termLine,
+  termWindow
+} from "./chunk-EO4LNCIK.js";
+import {
+  camera,
+  float,
+  reelCuts,
+  reelSheet,
+  section,
+  wideCut
+} from "./chunk-YUJ6YBZ6.js";
+import {
+  followTyping
+} from "./chunk-YHF6LRMF.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-3YQOE5KZ.js";
+import {
+  cutOn,
+  hz
+} from "./chunk-CLQ3FUJI.js";
+import {
+  hide,
+  restyle
+} from "./chunk-LWSZATOL.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/style-terminal-launch-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = section("chiptune", 0, 9);
+var { beat } = S;
+var NAME = "Terminal SaaS launch reel";
+var TERM = { w: 800, h: 700 };
+var SIZE = 25;
+var CW = cell(SIZE);
+var TYPING = { text: "Command", caret: "Command caret", at: beat(2), duration: beat(4) };
+var SPLIT = beat(8);
+var UP = beat(10);
+var DONE = beat(20);
+var CELLS = 24;
+var OLD_H = 4 * 38 + 3 * 2 + 4;
+var SHOTS = [
+  { t: UP + beat(1), duration: 1, zoom: 1.3, x: 340, y: 300 },
+  // Close enough to read PASS, and wide enough that the progress line's count stays in frame.
+  { t: DONE, duration: 1, zoom: 1.2, x: 360, y: 520 },
+  { t: beat(26), duration: 1, zoom: 1 }
+];
+var cues = [
+  { layer: "Kicker", preset: "typewriter", at: 0, params: { duration: 360 } },
+  cutOn("Clock", 120),
+  cutOn("Version", beat(1)),
+  cutOn("Stage", beat(1)),
+  { layer: "Command", preset: "typewriter", at: TYPING.at, params: { duration: TYPING.duration } },
+  cutOn("Split line", SPLIT),
+  cutOn("Up line", UP),
+  cutOn("Progress line", UP),
+  cutOn("Runners", UP),
+  cutOn("Block", UP + 80, Math.round((DONE - UP - 80) / CELLS)),
+  cutOn("Runner", UP + beat(1), Math.round((DONE - UP - beat(1)) / 64)),
+  cutOn("Pass line", DONE),
+  { layer: "Pass", preset: "flash", at: DONE + 40, params: { duration: 400, ease: ease.hold } },
+  cutOn("Time line", beat(22)),
+  cutOn("Slow row", beat(23), 130),
+  cutOn("Idle line", beat(24)),
+  { layer: "Call", preset: "flash", at: beat(26), params: { duration: 400, ease: ease.hold } },
+  { layer: "Call", preset: "pulse", at: beat(30), params: { duration: 400, amount: 0.04 } },
+  { layer: "Call", preset: "pulse", at: beat(32), params: { duration: 400, amount: 0.04 } }
+];
+var counts = [
+  { layer: "Percent", at: UP + 80, duration: DONE - UP - 80, tick: Math.round((DONE - UP - 80) / 25), counter: { from: 0, to: 100, suffix: "%" } },
+  { layer: "Done count", at: UP + 80, duration: DONE - UP - 80, ease: ease.linear, counter: { from: 0, to: SHARD.tests, suffix: `/${SHARD.tests.toLocaleString("en-US")}` } }
+];
+var swaps = [captionSwap(["Your CI takes fourteen minutes.", "One command splits every test.", "Sixty-four runners, one green check.", "Fifty-two seconds. Free to start."], 0, S.duration - 30, { stagger: 60, in: 200, out: 160, rise: 0 })];
+var style_terminal_launch_reel_default = defineTemplate({
+  id: "motion-saas-style-terminal-launch-reel",
+  meta: {
+    name: NAME,
+    description: "A 14-second launch video in the terminal look: the problem as a clock struck through in red, then a real shell session: a command typed a letter at a time, a spinner, a progress bar of character cells and 64 runner cells lighting as they finish, PASS in inverse video and the clock rolling down from 14:08 to 00:52. Stepped motion, cut zooms, a blinking block cursor, music and burned-in captions. 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "terminal", "monospace", "cli", "developer tools", "launch", "reel", "typewriter", "progress bar", "counter", "captions", "music", "audio", "tiktok", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "video"],
+    useCases: ["launch", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    termBrand(k, {});
+    const term = mono(k, "Term 25", SIZE, { lead: 1.5 });
+    mono(k, "Brand 30", 30, { weight: 700, lead: 1.2 });
+    mono(k, "Label 22", 22, { weight: 500, lead: 1.4 });
+    mono(k, "Kicker 30", 30, { weight: 500, lead: 1.4 });
+    mono(k, "Clock 210", 210, { weight: 800, lead: 1, spacing: -6 });
+    mono(k, "Clock 132", 132, { weight: 800, lead: 1, spacing: -4 });
+    mono(k, "Caption 34", 34, { weight: 600, lead: 1.35 });
+    mono(k, "Button 30", 30, { weight: 700, lead: 1.3 });
+    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 30", label: `$ ${SHARD.install}`, pad: [16, 26], radius: 4 });
+    const sheet = reelSheet(k, S, { name: "Launch reel", gap: 14 });
+    ground(k, sheet, 1080, 1920, { cw: 18, lh: 36 });
+    minimap(k, sheet, { x: 140, y: 1476, width: 800, rows: 16, scroll: { duration: S.duration, every: beat(1) } });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, top, { size: 30, style: "Brand 30" });
+    const ver = k.stack(top, { direction: "HORIZONTAL", width: "HUG", padding: { top: 4, right: 12, bottom: 4, left: 12 }, stroke: { color: "edge", width: 2, align: "INSIDE" }, name: "Version" });
+    k.text(ver, `v${SHARD.version}.0 launch`, { style: "Label 22", color: "onPaper", autoWidth: true, name: "Version words" });
+    const hook = k.stack(sheet, { gap: 0, name: "Hook" });
+    k.text(hook, "$ time shard run", { style: "Kicker 30", color: "onPaper", name: "Kicker" });
+    const clockBox = k.stack(hook, { height: 196, name: "Clock box" });
+    const clock = k.text(clockBox, "00:52", { style: "Clock 210", color: "text", width: 800, name: "Clock" });
+    const strike = k.rect(clockBox, 640, 14, "red", { name: "Strike", absolute: { x: -8, y: 96 }, opacity: 0 });
+    const stage = k.stack(sheet, { width: TERM.w, height: TERM.h, clip: true, radius: 6, name: "Stage" });
+    const cam = k.frame(stage, { x: 0, y: 0, width: TERM.w, height: TERM.h }, { name: "Camera" });
+    const t = termWindow(k, cam, { w: TERM.w, h: TERM.h, left: "~/acme/checkout", right: "zsh  80x24", style: "Label 22", absolute: { x: 0, y: 0 }, shadow: false, gap: 10 });
+    const inner = TERM.w - 56;
+    const scroll = k.stack(t.body, { gap: 4, name: "Scroll" });
+    const old = k.stack(scroll, { width: inner, gap: 2, name: "Last run" });
+    termLine(k, old, [{ t: "~/checkout ", c: "cyan" }, { t: "$ ", c: "green" }, { t: "npm test", c: "onCard" }], { style: term, name: "Old line" });
+    termLine(k, old, [{ t: "Test Suites: ", c: "cardMuted" }, { t: "212 passed", c: "green" }, { t: ", 212 total", c: "cardMuted" }], { style: term, name: "Old line" });
+    termLine(k, old, [{ t: "Tests:       ", c: "cardMuted" }, { t: "2418 passed", c: "green" }, { t: ", 2418 total", c: "cardMuted" }], { style: term, name: "Old line" });
+    termLine(k, old, [{ t: "Time:        ", c: "cardMuted" }, { t: "848.21 s", c: "red" }], { style: term, name: "Old line" });
+    promptLine(k, scroll, SHARD.run, { style: term, size: SIZE, dir: "~/checkout", width: inner - Math.round(13 * CW) });
+    const split = termLine(k, scroll, [{ t: "[+]", c: "green", name: "Spin split", width: Math.ceil(3 * CW) }, { t: ` splitting ${SHARD.tests.toLocaleString("en-US")} tests by timing`, c: "onCard" }], { style: term, name: "Split line" });
+    const up = termLine(k, scroll, [{ t: "[+]", c: "green", name: "Spin up", width: Math.ceil(3 * CW) }, { t: ` ${SHARD.runners} runners up`, c: "onCard" }, { t: ` ${SHARD.region}`, c: "cyan" }, { t: " 1.8s", c: "amber" }], { style: term, name: "Up line" });
+    const prog = k.stack(scroll, { direction: "HORIZONTAL", align: "CENTER", gap: Math.round(CW), padding: { top: 10, right: 0, bottom: 4, left: 0 }, name: "Progress line" });
+    blocks(k, prog, { cells: CELLS, cw: CW, h: 24 });
+    k.text(prog, "100%", { style: term, color: "amber", width: Math.ceil(4 * CW), align: "RIGHT", name: "Percent" });
+    k.text(prog, "2,418/2,418", { style: term, color: "cardMuted", width: Math.ceil(11 * CW), name: "Done count" });
+    runnerGrid(k, scroll, { n: SHARD.runners, cols: 32, size: 19, gap: 4 });
+    termLine(k, scroll, [{ t: "PASS", c: "green", tag: "ink", name: "Pass" }, { t: ` ${SHARD.tests.toLocaleString("en-US")} passed`, c: "green" }, { t: "  0 failed", c: "cardMuted" }], { style: term, name: "Pass line" });
+    termLine(k, scroll, [{ t: "time", c: "cardMuted" }, { t: `  ${SHARD.after}`, c: "amber" }, { t: `  was ${SHARD.before} on main`, c: "cardMuted" }], { style: term, name: "Time line" });
+    for (const [n, file, secs] of [["17", "checkout.spec.ts", "41.2s"], ["03", "cart/tax.spec.ts", "38.9s"]]) {
+      termLine(k, scroll, [{ t: `shard ${n}  `, c: "cardMuted" }, { t: file.padEnd(22), c: "cyan" }, { t: secs, c: "amber" }], { style: term, name: "Slow row" });
+    }
+    const idle = k.stack(scroll, { direction: "HORIZONTAL", align: "CENTER", name: "Idle line" });
+    k.text(idle, "~/checkout ", { style: term, color: "cyan", autoWidth: true, name: "Prompt dir" });
+    k.text(idle, "$ ", { style: term, color: "green", autoWidth: true, name: "Prompt sign" });
+    blinking(k, cursor(k, idle, SIZE, { name: "Cursor" }), hz(18, S.duration));
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 34", fill: "card", ink: "onCard", radius: 4, pad: [16, 24], stroke: { color: "edge", width: 2, align: "INSIDE" } });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Call row" });
+    k.instance(row, "Call", { Label: `$ ${SHARD.install}` }, { name: "Call" });
+    k.text(row, "{{brand.site}}", { style: "Label 22", color: "onPaper", autoWidth: true, name: "Site" });
+    scan(k, sheet);
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    spinner(k, k.named(split, "Spin split")[0], SPLIT, UP);
+    spinner(k, k.named(up, "Spin up")[0], UP, UP + beat(2));
+    for (const id of k.named(sheet, "Kicker")) steps(k, id, [[0, "$ time npm test"], [DONE, "$ time shard run"]]);
+    steps(k, clock, [[0, "14:08"], ...clockFrames(DONE, beat(2), 848, 52, 20)]);
+    k.patch(strike, { anchorX: 0, anchorY: 0.5 });
+    k.animate(strike, "scaleX", [{ t: 420, v: 0, ease: ease.linear }, { t: 720, v: 1 }]);
+    k.animate(strike, "opacity", [{ t: 419, v: 0, ease: ease.hold }, { t: 420, v: 1, ease: ease.hold }, { t: DONE, v: 0 }]);
+    k.animate(scroll, "translateY", Array.from({ length: 5 }, (_, i) => ({ t: SPLIT + i * 60, v: -Math.round((OLD_H + 24) * i / 4), ...i < 4 ? { ease: ease.hold } : {} })));
+    camera(k, cam, TERM.w, TERM.h, SHOTS);
+    followTyping(k, sheet, TYPING);
+    const copies = k.variants(sheet, [...reelCuts({ post: 36, portrait: 60 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 16, counterAxisSpacing: 16, padding: { top: 36, right: 140, bottom: 36, left: 140 } });
+        fitGround(kit, id, { cw: 18, lh: 36 });
+        hide(kit, id, ["Brand row", "Minimap"]);
+        const sq = TERM.h - 140;
+        for (const name of ["Stage", "Camera", "Terminal"]) for (const n of kit.named(id, name)) kit.patch(n, { height: sq });
+        for (const n of kit.named(id, "Session")) kit.patch(n, { height: sq - 54 });
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { itemSpacing: 22, counterAxisSpacing: 22 });
+        fitGround(kit, id, { cw: 18, lh: 36 });
+        hide(kit, id, ["Minimap"]);
+        restyle(kit, id, "Clock", "Clock 132");
+        for (const n of kit.named(id, "Clock box")) kit.patch(n, { height: 132 });
+        for (const n of kit.named(id, "Strike")) kit.patch(n, { y: 62, width: 420, height: 10 });
+      }
+    }), wideCut(640, (kit, id, right) => {
+      const scale = Math.min(right.width / TERM.w, right.height / TERM.h), top2 = right.y + Math.round((right.height - TERM.h * scale) / 2);
+      fitGround(kit, id, { cw: 18, lh: 36 });
+      float(kit, id, "Stage", right.x + Math.round((right.width - TERM.w * scale) / 2), top2, { scale });
+      hide(kit, id, ["Minimap"]);
+    })]);
+    for (const id of copies) followTyping(k, id, TYPING);
+    hide(k, copies[0], ["Last run"]);
+    for (const n of k.named(copies[0], "Scroll")) k.patch(n, { motion: void 0 });
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_terminal_launch_reel_default
+};