@popcraft/kit 0.29.0 → 0.30.0

package/dist/chunks/chunk-AOZ3KKWW.js

@@ -0,0 +1,624 @@
+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 {
+  respond,
+  rule
+} from "./chunk-DAF5SK5X.js";
+import {
+  BREAKPOINTS,
+  buttons
+} from "./chunk-TF2MO3UA.js";
+import {
+  hz
+} from "./chunk-WV6ZTKE7.js";
+import {
+  curve3,
+  pt3,
+  r3
+} from "./chunk-6RCDZU4R.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/festival-presale-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var LOOP = 6e3;
+var pad2 = (v, h) => ({ top: v, right: h, bottom: v, left: h });
+function put(k, parent, L, style, words, o = {}) {
+  return k.text(parent, L.upper?.includes(style) ? words.toUpperCase() : words, { style: L.s(style), ...o });
+}
+function parts(k, L, o = {}) {
+  const radius = o.radius ?? L.radius;
+  buttons(k, { style: L.s("Button"), pad: o.pad ?? [15, 26], radius });
+  const [v, h] = o.pad ?? [15, 26];
+  k.component("Button dark", { direction: "HORIZONTAL", width: "HUG", radius, align: "CENTER", padding: pad2(v, h), fill: "panel", props: { Label: "Presale access" } }, (id) => {
+    k.propText(id, "Label", { style: L.s("Button"), color: "onPanel", autoWidth: true });
+  });
+}
+function card(k, parent, L, o = {}) {
+  return k.stack(parent, { fill: "card", radius: L.radius, padding: L.pad, ...L.card.stroke ? { stroke: L.card.stroke } : {}, ...L.card.effects ? { effects: L.card.effects } : {}, ...o });
+}
+var TONES = { hot: ["accent", "onAccent"], live: ["primary", "onPrimary"], dead: ["panel", "onPanel"], quiet: ["chip", "onChip"] };
+function chip(k, parent, L, label, tone, name = "Chip") {
+  const [fill, ink] = TONES[tone];
+  const id = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", fill, radius: L.chipRadius, padding: pad2(5, 12), name });
+  put(k, id, L, "Status", label, { color: ink, autoWidth: true, name: `${name} label` });
+  return id;
+}
+function head(k, parent, L, kicker, title, aside, inks = ["text", "onPaper"]) {
+  const [ink, muted] = inks;
+  const h = k.stack(parent, { gap: 14, align: L.center ? "CENTER" : "MIN", name: "Head", ...L.center ? { padding: { top: 0, right: 180, bottom: 0, left: 180 } } : {} });
+  put(k, h, L, "Kicker", kicker, { color: muted, name: "Kicker", ...L.center ? { align: "CENTER" } : {} });
+  if (L.center) {
+    put(k, h, L, "Section", title, { color: ink, align: "CENTER", name: "Section title" });
+    L.flourish?.(k, h);
+    if (aside) put(k, h, L, "Aside", aside, { color: muted, align: "CENTER", name: "Section aside" });
+  } else {
+    const row = k.stack(h, { direction: "HORIZONTAL", gap: 64, align: "MAX", name: "Head row" });
+    put(k, row, L, "Section", title, { color: ink, name: "Section title" });
+    if (aside) put(k, row, L, "Aside", aside, { color: muted, width: 400, name: "Section aside" });
+    L.flourish?.(k, h);
+  }
+  return h;
+}
+function countdown(k, parent, L, o) {
+  const [v, h] = o.pad ?? [14, 8];
+  const row = k.stack(parent, { direction: "HORIZONTAL", gap: o.gap ?? 10, name: `${o.prefix} clock`, ...o.width ? { width: o.width } : {} });
+  const cells = [["days", o.clock.days, "days"], ["hours", o.clock.hours, "hours"], ["minutes", o.clock.minutes, "min"], ["seconds", String(o.clock.to), "sec"]];
+  cells.forEach(([name, value, unit], i) => {
+    const [fill, ink, muted] = o.tiles ? [o.tiles[i][0], o.tiles[i][1], o.tiles[i][1]] : [o.fill, o.ink, o.muted];
+    const tile = k.stack(row, { align: "CENTER", fill, radius: o.radius ?? L.radius, padding: pad2(v, h), name: "Clock tile", ...o.stroke ? { stroke: o.stroke } : {}, ...o.effects ? { effects: o.effects } : {} });
+    put(k, tile, L, o.style ?? "Clock", value, { color: ink, autoWidth: true, name: `${o.prefix} ${name} figure` });
+    put(k, tile, L, "Unit", unit, { color: muted, autoWidth: true, name: "Clock unit" });
+  });
+  return row;
+}
+var ticking = (prefix, c) => ({ layer: `${prefix} seconds figure`, at: 0, duration: LOOP, tick: 1e3, counter: { from: c.from, to: c.to } });
+function signup(k, parent, L, o) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", gap: 8, name: o.name, ...o.width ? { width: o.width } : {} });
+  const field = k.stack(row, { direction: "HORIZONTAL", align: "CENTER", fill: "card", radius: o.radius ?? L.radius, padding: pad2(15, 18), name: "Field", ...o.stroke ? { stroke: o.stroke } : {} });
+  put(k, field, L, "Field", o.placeholder, { color: "cardMuted", name: "Field text" });
+  k.instance(row, o.dark ? "Button dark" : "Button", { Label: o.cta }, { name: `${o.name} button` });
+  return row;
+}
+var thousands = (n) => n.toLocaleString("en-US");
+function stockBar(k, parent, L, o) {
+  const id = k.stack(parent, { gap: 8, name: o.name });
+  const row = k.stack(id, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 12, wrap: true, name: `${o.name} row` });
+  put(k, row, L, "Status", o.stock.label, { color: o.ink, autoWidth: true, name: `${o.name} label` });
+  put(k, row, L, "Status", `${thousands(o.stock.left)} of ${thousands(o.stock.total)} left`, { color: o.ink, autoWidth: true, name: `${o.name} figure` });
+  const h = o.height ?? 12;
+  const track = k.stack(id, { direction: "HORIZONTAL", height: h, fill: k.tint(o.ink, 0.22), radius: Math.min(L.radius, h / 2), clip: true, name: `${o.name} track` });
+  const fill = k.stack(track, { height: "FILL", fill: o.ink, name: `${o.name} fill` });
+  k.patch(fill, { anchorX: 0, scaleX: r3(o.stock.left / o.stock.total) });
+  return id;
+}
+var stockCount = (name, st) => ({ layer: `${name} figure`, at: 0, duration: LOOP, ease: ease.linear, counter: { from: st.from, to: st.left, suffix: ` of ${thousands(st.total)} left` } });
+function drain(k, root, name, st) {
+  for (const id of k.named(root, `${name} fill`)) k.animate(id, "scaleX", [{ t: 0, v: r3(st.from / st.total), ease: ease.linear }, { t: LOOP, v: r3(st.left / st.total) }]);
+}
+function steps(k, sheet, L, o) {
+  const sec = k.stack(sheet, { gap: 36, name: "How" });
+  head(k, sec, L, o.kicker, o.title, o.aside);
+  const row = k.stack(sec, { direction: "HORIZONTAL", gap: 20, name: "Steps" });
+  const [ink, muted] = o.boxed ? ["onCard", "cardMuted"] : ["text", "onPaper"];
+  for (let p = 0; p < o.items.length; p += 2) {
+    const pair = k.stack(row, { direction: "HORIZONTAL", gap: 20, name: "Step pair" });
+    o.items.slice(p, p + 2).forEach(([when, title, text], j) => {
+      const step = o.boxed ? card(k, pair, L, { gap: 10, name: "Step" }) : k.stack(pair, { gap: 10, name: "Step" });
+      if (!o.boxed) rule(k, step, "text", { weight: L.rule, name: "Step rule" });
+      const top = k.stack(step, { direction: "HORIZONTAL", gap: 12, align: "CENTER", justify: "SPACE_BETWEEN", name: "Step top" });
+      put(k, top, L, "Step no", String(p + j + 1), { color: ink, autoWidth: true, name: "Step number" });
+      chip(k, top, L, when, p + j === 2 ? "hot" : "quiet", "Step when");
+      put(k, step, L, "Step title", title, { color: ink, name: "Step title" });
+      put(k, step, L, "Body", text, { color: muted, name: "Step text" });
+    });
+  }
+  return sec;
+}
+var tierInks = (t) => t.status === "selling" ? { fill: "primary", ink: "onPrimary", muted: "onPrimary" } : t.status === "sold" ? { fill: "card", ink: "cardMuted", muted: "cardMuted" } : { fill: "card", ink: "onCard", muted: "cardMuted" };
+var tierTone = (t) => t.status === "sold" ? "dead" : t.status === "selling" ? "hot" : "quiet";
+function ladder(k, sheet, L, o) {
+  const sec = k.stack(sheet, { gap: 36, name: "Tickets" });
+  head(k, sec, L, o.kicker, o.title, o.aside);
+  const boxOf = (t) => ({ fill: tierInks(t).fill, radius: L.radius, ...L.card.stroke ? { stroke: L.card.stroke } : {}, ...L.card.effects ? { effects: L.card.effects } : {} });
+  if (o.variant === "cards") {
+    const row = k.stack(sec, { direction: "HORIZONTAL", gap: 16, name: "Tier cards" });
+    for (let p = 0; p < o.tiers.length; p += 2) {
+      const pair = k.stack(row, { direction: "HORIZONTAL", gap: 16, name: "Tier pair" });
+      for (const t of o.tiers.slice(p, p + 2)) {
+        const c = tierInks(t);
+        const box = k.stack(pair, { ...boxOf(t), padding: L.pad, gap: 18, justify: "SPACE_BETWEEN", name: "Tier card" });
+        const top = k.stack(box, { gap: 12, name: "Tier top" });
+        chip(k, top, L, t.chip, tierTone(t), "Tier chip");
+        put(k, top, L, "Label", t.tag, { color: c.muted, name: "Tier tag" });
+        put(k, top, L, "Price", t.price, { color: c.ink, name: "Tier price" });
+        put(k, top, L, "Tier", t.name, { color: c.ink, name: "Tier name" });
+        const foot = k.stack(box, { gap: 12, name: "Tier foot" });
+        put(k, foot, L, "Small", t.note, { color: c.muted, name: "Tier note" });
+        if (t.status === "selling") stockBar(k, foot, L, { name: "Tier stock", stock: o.stock, ink: c.ink });
+      }
+    }
+    return sec;
+  }
+  const list = k.stack(sec, { gap: 12, name: "Ladder" });
+  o.tiers.forEach((t, i) => {
+    const c = tierInks(t);
+    if (o.variant === "stubs") {
+      const stub = k.stack(list, { direction: "HORIZONTAL", ...boxOf(t), clip: true, name: "Stub" });
+      const end = k.stack(stub, { width: 230, height: "FILL", gap: 6, justify: "CENTER", padding: pad2(22, 26), name: "Stub end" });
+      put(k, end, L, "Label", t.tag, { color: c.muted, name: "Tier tag" });
+      put(k, end, L, "Price", t.price, { color: c.ink, name: "Tier price" });
+      const tear = k.stack(stub, { width: 2, height: "FILL", gap: 6, clip: true, name: "Tear line" });
+      for (let d = 0; d < 24; d++) k.rect(tear, 2, 7, c.ink, { name: "Tear dash" });
+      const body2 = k.stack(stub, { direction: "HORIZONTAL", gap: 24, align: "CENTER", padding: pad2(22, 26), name: "Stub body" });
+      const main2 = k.stack(body2, { gap: 8, name: "Stub main" });
+      put(k, main2, L, "Tier", t.name, { color: c.ink, name: "Tier name" });
+      put(k, main2, L, "Small", t.note, { color: c.muted, name: "Tier note" });
+      if (t.status === "selling") stockBar(k, main2, L, { name: "Tier stock", stock: o.stock, ink: c.ink });
+      chip(k, body2, L, t.chip, tierTone(t), "Tier chip");
+      return;
+    }
+    const rung = k.stack(list, { direction: "HORIZONTAL", name: "Rung" });
+    if (o.inset && i) k.stack(rung, { width: i * o.inset, height: 1, name: "Rung inset" });
+    const body = k.stack(rung, { direction: "HORIZONTAL", gap: 28, align: "CENTER", ...boxOf(t), padding: pad2(20, L.pad), name: "Rung body" });
+    put(k, body, L, "Label", t.tag, { color: c.muted, width: 132, name: "Tier tag" });
+    const main = k.stack(body, { gap: 8, name: "Rung main" });
+    put(k, main, L, "Tier", t.name, { color: c.ink, name: "Tier name" });
+    put(k, main, L, "Small", t.note, { color: c.muted, name: "Tier note" });
+    if (t.status === "selling") stockBar(k, main, L, { name: "Tier stock", stock: o.stock, ink: c.ink });
+    const side = k.stack(body, { direction: "HORIZONTAL", width: "HUG", gap: 16, align: "CENTER", name: "Rung side" });
+    chip(k, side, L, t.chip, tierTone(t), "Tier chip");
+    put(k, side, L, "Price", t.price, { color: c.ink, autoWidth: true, name: "Tier price" });
+  });
+  return sec;
+}
+function addOns(k, parent, L, o) {
+  const wrap = k.stack(parent, { gap: 16, name: "Extras" });
+  const row = k.stack(wrap, { direction: "HORIZONTAL", gap: 16, name: "Add-ons" });
+  for (const [name, price, text] of o.items) {
+    const c = card(k, row, L, { gap: 8, name: "Add-on" });
+    const top = k.stack(c, { direction: "HORIZONTAL", gap: 12, align: "CENTER", justify: "SPACE_BETWEEN", wrap: true, name: "Add-on top" });
+    put(k, top, L, "Step title", name, { color: "onCard", autoWidth: true, name: "Add-on name" });
+    put(k, top, L, "Label", price, { color: "onCard", autoWidth: true, name: "Add-on price" });
+    put(k, c, L, "Small", text, { color: "cardMuted", name: "Add-on text" });
+  }
+  const plan = k.stack(wrap, { direction: "HORIZONTAL", gap: 28, align: "CENTER", fill: "panel", radius: L.radius, padding: pad2(22, L.pad), name: "Plan" });
+  put(k, plan, L, "Step title", o.plan[0], { color: "onPanel", width: 300, name: "Plan title" });
+  put(k, plan, L, "Small", o.plan[1], { color: "panelMuted", name: "Plan text" });
+  chip(k, plan, L, o.plan[2], "hot", "Plan chip");
+  return wrap;
+}
+function lineup(k, sheet, L, o) {
+  const on = o.panel ? ["onStage", "stageMuted"] : void 0;
+  const sec = k.stack(sheet, { gap: 36, name: on ? "Line-up panel" : "Line-up", ...o.panel ? { fill: "stage", clip: true, radius: o.panel.radius ?? L.radius, padding: o.panel.pad ?? 56, ...o.panel.stroke ? { stroke: o.panel.stroke } : {}, ...o.panel.effects ? { effects: o.panel.effects } : {} } : {} });
+  o.panel?.art?.(k, sec);
+  head(k, sec, L, o.kicker, o.title, o.aside, on);
+  const sep = `\xA0${o.sep ?? "\xB7"} `;
+  const [ink, muted] = o.boxed ? ["onCard", "cardMuted"] : on ?? ["text", "onPaper"];
+  const line = on ? on[0] : "text", quiet = on ? on[1] : "onPaper";
+  if (o.variant === "poster") {
+    const side = L.center ? "CENTER" : "MIN", ta = L.center ? { align: "CENTER" } : {};
+    const bill = k.stack(sec, { gap: 32, align: side, name: "Bills" });
+    for (const b of o.bills) {
+      const block = k.stack(bill, { gap: 10, align: side, name: "Bill" });
+      chip(k, block, L, `${b.label} \xB7 ${b.note}`, o.panel?.label ?? "live", "Bill label");
+      for (const a of b.heads) put(k, block, L, "Act 1", a, { color: ink, ...ta, name: "Act" });
+      put(k, block, L, "Act 2", b.acts.join(sep), { color: ink, ...ta, name: "Act" });
+      put(k, block, L, "Act 3", b.more.join(sep), { color: muted, ...ta, name: "Act" });
+    }
+    put(k, bill, L, "Aside", o.tba, { color: quiet, ...ta, name: "More to come" });
+    return sec;
+  }
+  if (o.variant === "stages") {
+    const list = k.stack(sec, { name: "Bills" });
+    for (const b of o.bills) {
+      rule(k, list, line, { weight: L.rule, name: "Bill rule" });
+      const row2 = k.stack(list, { direction: "HORIZONTAL", gap: 40, padding: pad2(26, 0), name: "Bill" });
+      const side = k.stack(row2, { width: 250, gap: 6, name: "Bill side" });
+      put(k, side, L, "Day", b.label, { color: ink, name: "Bill label" });
+      put(k, side, L, "Small", b.note, { color: muted, name: "Bill note" });
+      const acts = k.stack(row2, { gap: 8, name: "Bill acts" });
+      put(k, acts, L, "Act 1", b.heads.join(sep), { color: ink, name: "Act" });
+      put(k, acts, L, "Act 2", b.acts.join(sep), { color: ink, name: "Act" });
+      put(k, acts, L, "Act 3", b.more.join(sep), { color: muted, name: "Act" });
+    }
+    rule(k, list, line, { weight: L.rule, name: "Bill rule" });
+    put(k, sec, L, "Aside", o.tba, { color: quiet, name: "More to come" });
+    return sec;
+  }
+  const row = k.stack(sec, { direction: "HORIZONTAL", gap: 20, name: "Bills" });
+  for (const b of o.bills) {
+    const col = o.boxed ? card(k, row, L, { gap: 8, name: "Bill" }) : k.stack(row, { gap: 8, name: "Bill" });
+    if (!o.boxed) rule(k, col, line, { weight: L.rule, name: "Bill rule" });
+    const top = k.stack(col, { direction: "HORIZONTAL", gap: 12, align: "CENTER", justify: "SPACE_BETWEEN", wrap: true, padding: { top: 6, right: 0, bottom: 10, left: 0 }, name: "Bill top" });
+    put(k, top, L, "Day", b.label, { color: ink, autoWidth: true, name: "Bill label" });
+    put(k, top, L, "Label", b.note, { color: muted, autoWidth: true, name: "Bill note" });
+    for (const a of b.heads) put(k, col, L, "Act 1", a, { color: ink, name: "Act" });
+    for (const a of b.acts) put(k, col, L, "Act 2", a, { color: ink, name: "Act" });
+    put(k, col, L, "Act 3", b.more.join(sep), { color: muted, name: "Act" });
+  }
+  put(k, sec, L, "Aside", o.tba, { color: quiet, name: "More to come" });
+  return sec;
+}
+function features(k, sheet, L, o) {
+  const sec = k.stack(sheet, { gap: 36, name: "On site" });
+  head(k, sec, L, o.kicker, o.title, o.aside);
+  const grid = k.stack(sec, { direction: "HORIZONTAL", wrap: true, gap: 21, name: "Features" });
+  k.patch(grid, { counterAxisSpacing: o.boxed ? 21 : 40 });
+  const [ink, muted] = o.boxed ? ["onCard", "cardMuted"] : ["text", "onPaper"];
+  o.items.forEach(([title, text], i) => {
+    const f = o.boxed ? card(k, grid, L, { width: 386, gap: 10, name: "Feature" }) : k.stack(grid, { width: 386, gap: 10, name: "Feature" });
+    L.mark?.(k, f, i);
+    put(k, f, L, "Step title", title, { color: ink, name: "Feature title" });
+    put(k, f, L, "Body", text, { color: muted, name: "Feature text" });
+  });
+  return sec;
+}
+function travel(k, sheet, L, o) {
+  const sec = k.stack(sheet, { gap: 36, name: "Travel and stay" });
+  head(k, sec, L, o.kicker, o.title, o.aside);
+  const row = k.stack(sec, { direction: "HORIZONTAL", gap: 48, name: "Travel" });
+  const routes = k.stack(row, { name: "Routes" });
+  for (const [mode, detail, fact] of o.routes) {
+    rule(k, routes, "text", { weight: L.rule, name: "Route rule" });
+    const r = k.stack(routes, { direction: "HORIZONTAL", gap: 24, padding: pad2(18, 0), name: "Route" });
+    put(k, r, L, "Step title", mode, { color: "text", width: 150, name: "Route mode" });
+    const what = k.stack(r, { gap: 4, name: "Route what" });
+    put(k, what, L, "Body", detail, { color: "onPaper", name: "Route detail" });
+    put(k, what, L, "Label", fact, { color: "text", name: "Route fact" });
+  }
+  rule(k, routes, "text", { weight: L.rule, name: "Route rule" });
+  const stays = k.stack(row, { width: 430, gap: 14, name: "Stays" });
+  for (const [name, text, price] of o.stays) {
+    const c = card(k, stays, L, { gap: 8, name: "Stay" });
+    const top = k.stack(c, { direction: "HORIZONTAL", gap: 12, align: "CENTER", justify: "SPACE_BETWEEN", wrap: true, name: "Stay top" });
+    put(k, top, L, "Step title", name, { color: "onCard", autoWidth: true, name: "Stay name" });
+    chip(k, top, L, price, "quiet", "Stay price");
+    put(k, c, L, "Small", text, { color: "cardMuted", name: "Stay text" });
+  }
+  return sec;
+}
+function faq(k, sheet, L, o) {
+  const sec = k.stack(sheet, { gap: 36, name: "Questions" });
+  head(k, sec, L, o.kicker, o.title, o.aside);
+  const cols = k.stack(sec, { direction: "HORIZONTAL", gap: 48, name: "FAQ cols" });
+  const half = Math.ceil(o.items.length / 2);
+  for (const part of [o.items.slice(0, half), o.items.slice(half)]) {
+    const col = k.stack(cols, { name: "FAQ col" });
+    for (const [q, a] of part) {
+      rule(k, col, "text", { weight: L.rule, name: "Question rule" });
+      const item = k.stack(col, { gap: 8, padding: { top: 18, right: 0, bottom: 24, left: 0 }, name: "Question" });
+      put(k, item, L, "Q", q, { color: "text", name: "Q" });
+      put(k, item, L, "Body", a, { color: "onPaper", name: "A" });
+    }
+  }
+  return sec;
+}
+function partners(k, sheet, L, o) {
+  const sec = k.stack(sheet, { gap: 18, align: L.center ? "CENTER" : "MIN", name: "Partners" });
+  put(k, sec, L, "Kicker", o.label, { color: "onPaper", name: "Partners label", ...L.center ? { align: "CENTER" } : {} });
+  const row = k.stack(sec, { direction: "HORIZONTAL", gap: 12, wrap: true, justify: L.center ? "CENTER" : "MIN", name: "Partner row" });
+  for (const n of o.names) {
+    const p = k.stack(row, { direction: "HORIZONTAL", width: "HUG", radius: L.chipRadius, padding: pad2(12, 22), stroke: { color: "text", width: Math.max(1, L.rule), align: "INSIDE" }, name: "Partner" });
+    put(k, p, L, "Partner", n, { color: "text", autoWidth: true, name: "Partner name" });
+  }
+  return sec;
+}
+function closing(k, sheet, L, o) {
+  const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", fill: "primary", radius: o.radius ?? L.radius * 2, padding: 56, name: "Band", ...o.effects ? { effects: o.effects } : {}, ...o.stroke ? { stroke: o.stroke } : {} });
+  const copy = k.stack(band, { gap: 14, name: "Band copy" });
+  put(k, copy, L, "Section", o.title, { color: "onPrimary", name: "Band title" });
+  put(k, copy, L, "Body", o.text, { color: "onPrimary", name: "Band text" });
+  const join = k.stack(band, { width: 480, gap: 12, name: "Band join" });
+  countdown(k, join, L, { prefix: "Band", clock: o.clock, fill: "panel", ink: "onPanel", muted: "panelMuted", style: "Clock sm" });
+  signup(k, join, L, { name: "Band signup", placeholder: o.placeholder, cta: o.cta, dark: true });
+  put(k, join, L, "Small", o.note, { color: "onPrimary", name: "Band note" });
+  return band;
+}
+function legal(k, sheet, L, o) {
+  const foot = k.stack(sheet, { gap: 18, name: "Footer" });
+  rule(k, foot, "text", { weight: L.rule, name: "Footer rule" });
+  const row = k.stack(foot, { direction: "HORIZONTAL", gap: 24, align: "CENTER", justify: "SPACE_BETWEEN", name: "Footer row" });
+  put(k, row, L, "Brand", "{{brand.name}}", { color: "text", name: "Footer brand" });
+  const links = k.stack(row, { direction: "HORIZONTAL", width: "HUG", gap: 22, wrap: true, name: "Footer links" });
+  for (const l of o.links) put(k, links, L, "Small", l, { color: "text", autoWidth: true, name: "Footer link" });
+  for (const line of o.lines) put(k, foot, L, "Legal", line, { color: "onPaper", name: "Legal" });
+  return foot;
+}
+function artBand(k, parent, o) {
+  const band = k.stack(parent, { height: o.h, fill: "stage", clip: true, radius: o.radius ?? 0, name: o.name ?? "Art band", ...o.stroke ? { stroke: o.stroke } : {} });
+  const art = k.frame(band, { x: 0, y: Math.round(o.h / 2 - o.focus), width: o.w, height: Math.round(o.focus - o.h / 2) + o.h }, { name: "Band art" });
+  o.draw(art);
+  const dy = Math.round(o.h / 2 - o.focus), reach = 40;
+  for (const c of k.node(art).childIds) {
+    const q = k.node(c);
+    if (q.type !== "TEXT" && (q.y + dy < -reach || q.y + dy + q.height > o.h + reach)) k.patch(c, { visible: false });
+  }
+  return band;
+}
+function hero(k, sheet, spec, o = {}) {
+  const id = k.stack(sheet, { height: spec.h.desktop, fill: "stage", clip: true, name: "Hero", ...o });
+  const art = k.frame(id, { x: 0, y: 0, width: spec.artW, height: spec.artH }, { name: "Art" });
+  const foot = spec.foot ? k.frame(id, { x: 0, y: spec.h.desktop - spec.foot.h, width: spec.foot.w, height: spec.foot.h }, { name: "Art foot" }) : void 0;
+  return { hero: id, art, foot };
+}
+function fitHero(k, id, size, spec) {
+  for (const h of k.named(id, "Hero")) k.patch(h, { height: spec.h[size], ...spec.pad?.[size] !== void 0 ? { padding: typeof spec.pad[size] === "number" ? pad2(spec.pad[size], spec.pad[size]) : spec.pad[size] } : {} });
+  if (size === "desktop") return;
+  const put2 = (name, w, h, f) => {
+    for (const a of k.named(id, name)) k.patch(a, { layoutPositioning: "ABSOLUTE", width: w, height: h, scaleX: f.s, scaleY: f.s, x: Math.round(f.hx - w / 2 - (f.ax - w / 2) * f.s), y: Math.round(f.hy - h / 2 - (f.ay - h / 2) * f.s) });
+  };
+  put2("Art", spec.artW, spec.artH, spec.fit[size]);
+  if (spec.foot) put2("Art foot", spec.foot.w, spec.foot.h, spec.foot.fit[size]);
+}
+var contentWidth = (size) => ({ desktop: 1440, laptop: 1280, tablet: 768, mobile: 375 })[size] - 2 * BREAKPOINTS[size].side;
+function presaleResponsive(k, sheet, L, spec, more = {}) {
+  const each = (kit, id, name, props) => {
+    for (const n of kit.named(id, name)) kit.patch(n, props);
+  };
+  const copies = respond(k, sheet, L.s, {
+    ...more,
+    stack: ["Steps", "Travel", "Band", "Head row", ...more.stack ?? []],
+    stackMobile: ["Tier cards", "Add-ons", "Bills", "Rung body", "Plan", "FAQ cols", "Bill", "Hero signup", "Band signup", "Footer row", ...more.stackMobile ?? []],
+    restyle: {
+      Section: { tablet: "Section md", mobile: "Section sm" },
+      "Act 1": { tablet: "Act 1 md", mobile: "Act 1 sm" },
+      "Act 2": { mobile: "Act 2 sm" },
+      Price: { mobile: "Price sm" },
+      Aside: { mobile: "Aside sm" },
+      // A phone sets the running text at the page's small size (14 px), the floor for reading.
+      Body: { mobile: "Small" },
+      ...more.restyle
+    },
+    // A phone keeps one band of art (the first), and a tablet's add-ons share a row with their prices on top.
+    hide: { tablet: ["Nav links", ...more.hide?.tablet ?? []], mobile: ["Art band 2", ...more.hide?.mobile ?? []], ...more.hide?.laptop ? { laptop: more.hide.laptop } : {} },
+    gap: { tablet: 48, mobile: 28, ...more.gap },
+    tweak: (kit, id, size) => {
+      const narrow = size === "tablet" || size === "mobile";
+      if (narrow) {
+        each(kit, id, "Rung inset", { visible: false });
+        if (L.center) each(kit, id, "Head", { padding: pad2(0, size === "tablet" ? 40 : 0) });
+        each(kit, id, "Head row", { itemSpacing: 14 });
+        each(kit, id, "Section aside", { layoutSizingHorizontal: "FILL" });
+        each(kit, id, "Travel", { itemSpacing: 32 });
+        each(kit, id, "Stays", { layoutSizingHorizontal: "FILL" });
+        for (const r of kit.named(id, "Routes")) {
+          const c = kit.node(r).childIds;
+          if (c.length > 7) c.slice(-3, -1).forEach((x) => kit.patch(x, { visible: false }));
+        }
+        each(kit, id, "Band", { itemSpacing: 28, padding: pad2(size === "tablet" ? 40 : 28, size === "tablet" ? 40 : 22) });
+        each(kit, id, "Band join", { layoutSizingHorizontal: "FILL" });
+        each(kit, id, "Bill side", size === "tablet" ? { width: 180 } : { layoutSizingHorizontal: "FILL" });
+      }
+      if (size === "laptop" && L.center) each(kit, id, "Head", { padding: pad2(0, 120) });
+      if (size === "tablet") {
+        each(kit, id, "Stub end", { width: 180 });
+        each(kit, id, "Plan title", { width: 200 });
+        each(kit, id, "Add-ons", { itemSpacing: 12 });
+        each(kit, id, "Add-on top", { layoutMode: "VERTICAL", itemSpacing: 4, counterAxisAlignItems: "MIN" });
+      }
+      if (size === "mobile") {
+        each(kit, id, "Rung body", { itemSpacing: 12, counterAxisAlignItems: "MIN" });
+        each(kit, id, "Rung side", { primaryAxisAlignItems: "SPACE_BETWEEN" });
+        each(kit, id, "Tier tag", { layoutSizingHorizontal: "FILL" });
+        each(kit, id, "Stub body", { layoutMode: "VERTICAL", itemSpacing: 10, counterAxisAlignItems: "MIN" });
+        each(kit, id, "Tier chip", { layoutSizingHorizontal: "HUG" });
+        each(kit, id, "Plan chip", { layoutSizingHorizontal: "HUG" });
+        each(kit, id, "Bill label", { layoutSizingHorizontal: "HUG" });
+        each(kit, id, "Plan", { itemSpacing: 10, counterAxisAlignItems: "MIN" });
+        each(kit, id, "Route", { itemSpacing: 12 });
+        each(kit, id, "Route mode", { width: 76 });
+        each(kit, id, "FAQ cols", { itemSpacing: 0 });
+        each(kit, id, "Bill", { itemSpacing: 10 });
+        each(kit, id, "Footer row", { itemSpacing: 12 });
+        each(kit, id, "Footer links", { layoutSizingHorizontal: "FILL" });
+        each(kit, id, "Clock tile", { padding: pad2(12, 4) });
+        for (const col of kit.named(id, "FAQ col")) kit.node(col).childIds.slice(-2).forEach((c) => kit.patch(c, { visible: false }));
+        kit.named(id, "Feature").slice(4).forEach((f) => kit.patch(f, { visible: false }));
+        each(kit, id, "Stay text", { visible: false });
+        each(kit, id, "Stays", { itemSpacing: 8 });
+        each(kit, id, "Stay", { padding: pad2(14, 16) });
+        for (const name of ["How", "Tickets", "Line-up", "Line-up panel", "On site", "Travel and stay", "Questions"]) each(kit, id, name, { itemSpacing: 20 });
+        each(kit, id, "Head", { itemSpacing: 8 });
+        each(kit, id, "Step", { padding: pad2(14, 12), itemSpacing: 8 });
+        each(kit, id, "Step top", { layoutSizingHorizontal: "FILL" });
+        each(kit, id, "Steps", { itemSpacing: 12 });
+        each(kit, id, "Step pair", { itemSpacing: 12 });
+        each(kit, id, "Tier cards", { itemSpacing: 10 });
+        each(kit, id, "Tier pair", { itemSpacing: 10 });
+        each(kit, id, "Tier card", { padding: pad2(16, 14), itemSpacing: 12 });
+        each(kit, id, "Tier top", { itemSpacing: 6 });
+        each(kit, id, "Tier foot", { itemSpacing: 8 });
+        each(kit, id, "Rung body", { padding: pad2(16, 18) });
+        each(kit, id, "Ladder", { itemSpacing: 10 });
+        each(kit, id, "Add-on text", { visible: false });
+        each(kit, id, "Add-on", { padding: pad2(14, 18) });
+        each(kit, id, "Add-ons", { itemSpacing: 8 });
+        each(kit, id, "Extras", { itemSpacing: 10 });
+        each(kit, id, "Bill side", { itemSpacing: 2 });
+        each(kit, id, "Section aside", { visible: false });
+        each(kit, id, "Step number", { visible: false });
+        each(kit, id, "Band text", { visible: false });
+        each(kit, id, "Bill acts", { itemSpacing: 4 });
+        each(kit, id, "Question", { padding: { top: 12, right: 0, bottom: 16, left: 0 } });
+        each(kit, id, "Plan", { padding: pad2(16, 18) });
+        for (const b of kit.named(id, "Bill")) if (kit.named(b, "Bill side").length) kit.patch(b, { padding: pad2(12, 0) });
+        each(kit, id, "Features", { itemSpacing: 13, counterAxisSpacing: 24 });
+        each(kit, id, "Feature", { width: 161 });
+        each(kit, id, "Stub end", { width: 112, padding: pad2(14, 12) });
+        each(kit, id, "Stub body", { padding: pad2(14, 14) });
+        each(kit, id, "Route", { padding: pad2(12, 0) });
+        each(kit, id, "Partner row", { itemSpacing: 8, counterAxisSpacing: 8 });
+        each(kit, id, "Partner", { padding: pad2(8, 14) });
+      }
+      const shrink = size === "tablet" ? 0.75 : size === "mobile" ? 0.5 : 1;
+      for (const a of kit.named(id, "Panel art right")) {
+        const n = kit.node(a);
+        kit.patch(a, { layoutPositioning: "ABSOLUTE", scaleX: shrink, scaleY: shrink, x: Math.round(contentWidth(size) - n.width * (1 + shrink) / 2), y: Math.round(-n.height * (1 - shrink) / 2) });
+      }
+      for (const a of kit.named(id, "Panel art left")) {
+        const n = kit.node(a);
+        kit.patch(a, size === "mobile" ? { visible: false } : { layoutPositioning: "ABSOLUTE", scaleX: shrink, scaleY: shrink, x: Math.round(-n.width * (1 - shrink) / 2), y: Math.round(-n.height * (1 - shrink) / 2) });
+      }
+      for (const p of kit.named(id, "Line-up panel")) {
+        const f = kit.node(p).padding, side = size === "laptop" ? 48 : size === "tablet" ? 32 : 18;
+        kit.patch(p, { padding: { top: f.top > 80 ? f.top : side + 8, right: side, bottom: side + 8, left: side } });
+      }
+      if (size === "laptop") {
+        each(kit, id, "Features", { itemSpacing: 20 });
+        each(kit, id, "Feature", { width: 360 });
+      }
+      if (size === "tablet") {
+        each(kit, id, "Features", { itemSpacing: 20, counterAxisSpacing: 28 });
+        each(kit, id, "Feature", { width: 326 });
+        for (const name of ["How", "Tickets", "Line-up", "Line-up panel", "On site", "Travel and stay", "Questions"]) each(kit, id, name, { itemSpacing: 24 });
+        each(kit, id, "Head", { itemSpacing: 10 });
+        each(kit, id, "Rung body", { padding: pad2(16, 20) });
+        each(kit, id, "Ladder", { itemSpacing: 10 });
+        each(kit, id, "Tier cards", { itemSpacing: 12 });
+        each(kit, id, "Tier pair", { itemSpacing: 12 });
+        each(kit, id, "Tier card", { padding: pad2(18, 16), itemSpacing: 14 });
+        each(kit, id, "Tier top", { itemSpacing: 8 });
+        for (const st of kit.named(id, "Stays")) kit.patch(st, { layoutMode: "HORIZONTAL", itemSpacing: 12 });
+        for (const b of kit.named(id, "Bills")) {
+          const days = kit.node(b).layoutMode === "HORIZONTAL";
+          if (!days && !kit.named(b, "Bill side").length) continue;
+          if (days) kit.patch(b, { itemSpacing: 14 });
+          else for (const r of kit.named(b, "Bill")) kit.patch(r, { padding: pad2(18, 0), itemSpacing: 28 });
+        }
+        each(kit, id, "Stay", { layoutSizingHorizontal: "FILL", padding: pad2(16, 16) });
+        each(kit, id, "Stay top", { layoutMode: "VERTICAL", itemSpacing: 6, counterAxisAlignItems: "MIN" });
+      }
+      if (narrow) for (const c of kit.named(id, "Tier card")) {
+        for (const ch of kit.named(c, "Tier chip")) kit.patch(ch, { layoutSizingHorizontal: "FILL" });
+        for (const t of kit.named(c, "Tier chip label")) kit.patch(t, { layoutSizingHorizontal: "FILL", textAutoResize: "HEIGHT" });
+        for (const r of kit.named(c, "Tier stock row")) kit.patch(r, { layoutMode: "VERTICAL", itemSpacing: 4, counterAxisAlignItems: "MIN" });
+        for (const t of kit.named(c, "Tier price")) kit.restyle(t, "Price sm");
+      }
+      for (const b of kit.named(id, "Band art")) kit.patch(b, { x: Math.round((contentWidth(size) - kit.node(b).width) / 2) });
+      fitHero(kit, id, size, spec);
+      more.tweak?.(kit, id, size);
+    }
+  });
+  for (const root of [sheet, ...copies]) for (const [outer, inner, item] of ROWS) equalise(k, root, outer, inner, item);
+  k.responsive(sheet, { tablet: copies[1], phone: copies[2] });
+  return copies;
+}
+var ROWS = [["Steps", "Step pair", "Step"], ["Tier cards", "Tier pair", "Tier card"], ["Add-ons", null, "Add-on"], ["Features", null, "Feature"], ["Bills", null, "Bill"], ["Stays", null, "Stay"]];
+function equalise(k, root, outer, inner, item) {
+  const isRow = (id) => k.node(id).layoutMode === "HORIZONTAL";
+  const wrapped = (o) => {
+    const f = k.node(o), ids = k.named(o, item), w = k.node(ids[0]).width;
+    const cols = Math.max(1, Math.floor((f.width - f.padding.left - f.padding.right + f.itemSpacing + 0.5) / (w + f.itemSpacing)));
+    return Array.from({ length: Math.ceil(ids.length / cols) }, (_, r) => ids.slice(r * cols, r * cols + cols));
+  };
+  for (const o of k.named(root, outer)) {
+    const groups = !isRow(o) ? inner ? k.named(o, inner).filter(isRow).map((i) => k.named(i, item)) : [] : k.node(o).layoutWrap === "WRAP" ? wrapped(o) : [k.named(o, item)];
+    for (const id of k.named(o, item)) k.patch(id, { minHeight: 1 });
+    for (const g of groups) {
+      const max = Math.max(...g.map((id) => k.node(id).height));
+      for (const id of g) k.patch(id, { minHeight: Math.ceil(max) });
+    }
+  }
+}
+function sway(k, id, path, amp, cycles = 1, phase = 0) {
+  k.behave(id, path, [{ kind: "sine", amp: r3(amp), freq: hz(cycles, LOOP), phase: r3(phase) }]);
+}
+function turn(k, id, turns) {
+  k.behave(id, "rotation", [{ kind: "spin", rate: r3(turns * 360 * 1e3 / LOOP) }]);
+}
+function buntingPaths(x1, y1, x2, y2, sag, n, size) {
+  const at = (t) => ({ x: x1 + (x2 - x1) * t, y: y1 + (y2 - y1) * t + sag * 4 * t * (1 - t) });
+  const pts = Array.from({ length: n * 2 + 1 }, (_, i) => at(i / (n * 2)));
+  const flags = [];
+  for (let i = 0; i < n; i++) {
+    const a = pts[i * 2], b = pts[i * 2 + 2], m = pts[i * 2 + 1];
+    const w = size / 2, dx = b.x - a.x, dy = b.y - a.y, len = Math.hypot(dx, dy) || 1;
+    flags.push({ closed: true, points: [pt3(m.x - dx / len * w, m.y - dy / len * w), pt3(m.x + dx / len * w, m.y + dy / len * w), pt3(m.x - dy / len * size * 0.2, m.y + size * 1.15)] });
+  }
+  return { line: curve3(pts, 0.18), flags };
+}
+function bunting(k, parent, o) {
+  const b = buntingPaths(o.x1, o.y1, o.x2, o.y2, o.sag, o.n, o.size);
+  shape(k, parent, [b.line], o.line, { name: `${o.name ?? "Bunting"} line`, strokeWidth: 2 });
+  o.colors.forEach((c, ci) => {
+    const id = shape(k, parent, b.flags.filter((_, i) => i % o.colors.length === ci), c, { name: o.name ?? "Bunting" });
+    sway(k, id, "translateY", 2.5, 2, ci / o.colors.length);
+  });
+}
+function shape(k, parent, paths, color, o = {}) {
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (const p of paths) for (const q of p.points) {
+    x0 = Math.min(x0, q.x);
+    y0 = Math.min(y0, q.y);
+    x1 = Math.max(x1, q.x);
+    y1 = Math.max(y1, q.y);
+  }
+  x0 = Math.floor(x0);
+  y0 = Math.floor(y0);
+  const mv = (q) => pt3(q.x - x0, q.y - y0);
+  const moved = paths.map((p) => ({ ...p, points: p.points.map((q) => ({ ...q, ...mv(q), ...q.handleIn ? { handleIn: mv(q.handleIn) } : {}, ...q.handleOut ? { handleOut: mv(q.handleOut) } : {} })) }));
+  return k.vector(parent, Math.max(1, Math.ceil(x1 - x0)), Math.max(1, Math.ceil(y1 - y0)), moved, color, { ...o, absolute: { x: x0, y: y0 } });
+}
+function disc(cx, cy, r, ry = r) {
+  const c = 0.5523;
+  return { closed: true, points: [
+    { ...pt3(cx, cy - ry), handleIn: pt3(cx - r * c, cy - ry), handleOut: pt3(cx + r * c, cy - ry) },
+    { ...pt3(cx + r, cy), handleIn: pt3(cx + r, cy - ry * c), handleOut: pt3(cx + r, cy + ry * c) },
+    { ...pt3(cx, cy + ry), handleIn: pt3(cx + r * c, cy + ry), handleOut: pt3(cx - r * c, cy + ry) },
+    { ...pt3(cx - r, cy), handleIn: pt3(cx - r, cy + ry * c), handleOut: pt3(cx - r, cy - ry * c) }
+  ] };
+}
+function hill(w, ys, floor) {
+  const n = ys.length - 1, step = (w + 120) / n;
+  const top = ys.map((y, i) => ({ x: -60 + i * step, y }));
+  const pts = top.map((p, i) => {
+    const a = top[Math.max(0, i - 1)], b = top[Math.min(n, i + 1)], tx = (b.x - a.x) * 0.22, ty = (b.y - a.y) * 0.22;
+    return { ...pt3(p.x, p.y), handleIn: pt3(p.x - tx, p.y - ty), handleOut: pt3(p.x + tx, p.y + ty) };
+  });
+  return { closed: true, points: [...pts, pt3(w + 60, floor), pt3(-60, floor)] };
+}
+
+export {
+  LOOP,
+  parts,
+  card,
+  chip,
+  head,
+  countdown,
+  ticking,
+  signup,
+  stockBar,
+  stockCount,
+  drain,
+  steps,
+  ladder,
+  addOns,
+  lineup,
+  features,
+  travel,
+  faq,
+  partners,
+  closing,
+  legal,
+  artBand,
+  hero,
+  fitHero,
+  contentWidth,
+  presaleResponsive,
+  sway,
+  turn,
+  buntingPaths,
+  bunting,
+  shape,
+  disc,
+  hill
+};