@popcraft/kit 0.44.1 → 0.45.0

package/dist/chunks/chunk-5AMU423D.js

@@ -0,0 +1,777 @@
+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,
+  countdown,
+  drain,
+  stockBar,
+  stockCount,
+  ticking
+} from "./chunk-CH5XNXQX.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-5SHX6DFE.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-WO4SSPCC.js";
+import {
+  bed
+} from "./chunk-S7PL2DU7.js";
+import {
+  hide,
+  patchAll,
+  place,
+  restyle
+} from "./chunk-T3XFQJUI.js";
+import {
+  AD_LOOP_MS,
+  displayAdLoop,
+  outro,
+  verticalPadding
+} from "./chunk-IL2F4BKM.js";
+import {
+  box,
+  r3,
+  rng
+} from "./chunk-YKX2GS6X.js";
+import {
+  androidVariant,
+  screen,
+  statusBar
+} from "./chunk-JJRJZ2G4.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/themes/festival-presale-family-b-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var REF = { top: 330, foot: 400 };
+var bandScale = (p, s, W) => {
+  const a = p.anchor === "cover" ? "top" : p.anchor;
+  const n = s * Math.min(1, REF[a] / p.h);
+  return p.loose ? n : Math.max(n, W / p.w);
+};
+function st(k, w, role, size, align = "LEFT") {
+  const r = w.type[role];
+  if (role === "Name") size = Math.round(size * (w.look.nameScale ?? 1));
+  const name = `${role} ${size}${align === "LEFT" ? "" : align === "CENTER" ? " c" : " r"}`;
+  k.textStyle(name, {
+    size,
+    fontWeight: r.fontWeight,
+    letterSpacing: r3(r.ls * size),
+    lineHeight: Math.round(r.lh * size),
+    ...r.fontFamily ? { fontFamily: r.fontFamily } : {},
+    ...r.fontStyle ? { fontStyle: r.fontStyle } : {},
+    ...r.tnum ? { fontFeatures: { tnum: 1 } } : {},
+    ...align !== "LEFT" ? { textAlign: align } : {}
+  });
+  return name;
+}
+var cased = (w, role, words) => w.type[role].upper && !words.includes("{{") ? words.toUpperCase() : words;
+function say(k, w, parent, role, size, words, o) {
+  return k.text(parent, cased(w, role, words), { style: st(k, w, role, size, o.align), color: o.color, name: o.name, ...o.auto ? { autoWidth: true } : { width: o.width ?? "FILL" }, ...o.align && o.align !== "LEFT" ? { align: o.align } : {}, ...o.effects ? { effects: o.effects } : {} });
+}
+function partsLook(k, w, clock2, unit) {
+  const map = { Clock: () => st(k, w, "Clock", clock2), Unit: () => st(k, w, "Unit", unit), Status: () => st(k, w, "Unit", unit) };
+  return { s: (n) => (map[n] ?? (() => {
+    throw new Error(`no style ${n}`);
+  }))(), radius: w.look.tileRadius, card: {}, pad: 20, rule: 1, chipRadius: w.look.chip, upper: w.type.Unit.upper ? ["Unit", "Status"] : [] };
+}
+var joined = (w, names) => names.join(` ${w.look.sep} `);
+var headSize = (w, base, room = 16) => Math.round(base * Math.min(1, room / Math.max(...w.heads.map((h) => h.length))));
+var drawn = /* @__PURE__ */ new WeakMap();
+var boxesIn = (k, id) => {
+  const out = [];
+  const walk = (n) => {
+    for (const c of k.node(n).childIds ?? []) {
+      const m = k.node(c);
+      out.push({ x: m.x, y: m.y, width: m.width, height: m.height });
+      walk(c);
+    }
+  };
+  walk(id);
+  return out;
+};
+function art(k, sheet, w, still = false) {
+  if (!drawn.has(k)) drawn.set(k, /* @__PURE__ */ new Map());
+  for (const p of w.parts) {
+    const f = k.frame(sheet, { x: 0, y: 0, width: p.w, height: p.h }, { name: p.name });
+    k.patch(f, { layoutPositioning: "ABSOLUTE" });
+    p.draw(k, f, still);
+    drawn.get(k).set(p.name, boxesIn(k, f));
+  }
+}
+function restore(k, id, name, w, h) {
+  const was = drawn.get(k)?.get(name);
+  if (!was) return;
+  k.patch(id, { width: w, height: h });
+  let i = 0;
+  const walk = (n) => {
+    for (const c of k.node(n).childIds ?? []) {
+      const b = was[i++];
+      if (b) k.patch(c, b);
+      walk(c);
+    }
+  };
+  walk(id);
+}
+function fitArt(k, root, w, W, H, f) {
+  for (const p of w.parts) {
+    const s = p.anchor === "cover" ? Math.max(W / p.w, H / p.h) : bandScale(p, f[p.anchor], W);
+    const x = (W - p.w * s) / 2 + (p.anchor === "cover" ? 0 : f.dx ?? 0);
+    const y = p.anchor === "top" ? 0 : p.anchor === "foot" ? H - p.h * s : (H - p.h * s) / 2;
+    for (const id of k.named(root, p.name)) restore(k, id, p.name, p.w, p.h);
+    place(k, root, p.name, Math.round(x), Math.round(y), r3(s));
+  }
+  for (const n of w.unsafe ?? []) for (const id of k.named(root, n)) k.patch(id, { visible: H / W < 1.7 && W / H < 1.7 });
+}
+var bandH = (w, anchor, s) => {
+  const p = w.parts.find((q) => q.anchor === anchor);
+  return p ? Math.round(p.h * bandScale(p, s, 0)) : 0;
+};
+function plate(k, parent, w, o) {
+  const p = o.pad ?? 28, [v, h] = typeof p === "number" ? [p, p] : p;
+  const P = w.look.plate;
+  return k.stack(parent, {
+    direction: o.direction ?? "VERTICAL",
+    width: o.width ?? "FILL",
+    gap: o.gap ?? 14,
+    align: o.align ?? "MIN",
+    ...o.justify ? { justify: o.justify } : {},
+    fill: P.fill,
+    radius: P.radius,
+    padding: { top: v, right: h, bottom: v, left: h },
+    name: o.name,
+    ...P.stroke ? { stroke: P.stroke } : {},
+    ...P.effects ? { effects: P.effects(k) } : {},
+    ...o.absolute ? { absolute: o.absolute } : {}
+  });
+}
+function tag(k, parent, w, words, size, o) {
+  const tone = o.tone ?? "primary";
+  const [fill, ink] = tone === "primary" ? ["primary", "onPrimary"] : tone === "accent" ? ["accent", "onAccent"] : [w.look.plate.fill, w.look.plate.ink];
+  const id = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", fill, radius: w.look.chip, padding: { top: Math.round(size * 0.35), right: Math.round(size * 0.7), bottom: Math.round(size * 0.35), left: Math.round(size * 0.7) }, name: o.name });
+  say(k, w, id, "Kicker", size, words, { color: ink, name: `${o.name} text`, auto: true });
+  return id;
+}
+function ctaButton(k, w, name, size, label) {
+  const [fill, ink] = w.look.cta ?? ["primary", "onPrimary"];
+  k.component(name, { direction: "HORIZONTAL", width: "HUG", fill, radius: w.look.button, align: "CENTER", padding: { top: Math.round(size * 0.68), right: Math.round(size * 1.3), bottom: Math.round(size * 0.68), left: Math.round(size * 1.3) }, props: { Label: cased(w, "Button", label) } }, (id) => {
+    k.propText(id, "Label", { style: st(k, w, "Button", size), color: ink, autoWidth: true });
+  });
+}
+function clock(k, parent, w, prefix, size, unit, gap = 10, pad = [12, 4]) {
+  const L = partsLook(k, w, size, unit);
+  const t = w.look.tiles;
+  const row = countdown(k, parent, L, { prefix, clock: w.clock, fill: t[0][0], ink: t[0][1], muted: t[0][1], gap, pad, ...t.length > 1 ? { tiles: t } : {} });
+  k.patch(row, { layoutSizingHorizontal: "FILL" });
+  for (const c of k.named(row, "Clock tile")) k.patch(c, { layoutSizingHorizontal: "FILL" });
+  return row;
+}
+function nameBlock(k, parent, w, o) {
+  const onPlate = w.look.nameOn === "plate";
+  const head = onPlate ? plate(k, parent, w, { name: "Head", align: "CENTER", gap: o.gap ?? 10, pad: [Math.round(o.size * 0.22), 28] }) : k.stack(parent, { gap: o.gap ?? 12, align: "CENTER", name: "Head" });
+  const ink = onPlate ? w.look.plate.ink : "onStage";
+  tag(k, head, w, w.kicker, o.kicker, { name: "Kicker", tone: onPlate ? "primary" : "plate" });
+  say(k, w, head, "Name", o.size, "{{brand.name}}", { color: ink, name: "Name", align: "CENTER", effects: w.look.nameEffects?.(k) });
+  say(k, w, head, "Act", o.dates, o.dateLine ?? `${w.dates} \xB7 ${w.place}`, { color: ink, name: "Dates", align: "CENTER" });
+  return head;
+}
+function sizes(k, w, id, s) {
+  for (const [layer, [role, size, align]] of Object.entries(s)) restyle(k, id, layer, st(k, w, role, size, align));
+}
+var META = { created: "2026-10-02", updated: "2026-10-02" };
+function reel(w) {
+  const { beat, duration, audio } = bed(w.track, w.beats);
+  const NAME = `Festival presale reel: ${w.name}`;
+  const n = w.heads.length, after = 2 + n * w.step;
+  const gateAt = after + 3;
+  const cues = [
+    { layer: "Name", preset: w.look.enter, at: 0, params: { duration: 420 } },
+    { layer: "Kicker", preset: "fade-in", at: 0, params: { duration: 300 } },
+    { layer: "Dates", preset: "rise-in", at: beat(1), params: { duration: 400 } },
+    { layer: "Bill", preset: "rise-in", at: beat(1.5), params: { duration: 300 } },
+    { layer: "Bill label", preset: "fade-in", at: beat(2), params: { duration: 300 } },
+    { layer: "Head act", preset: w.look.enter, at: beat(2), params: { duration: 380 }, stagger: { delay: beat(w.step) } },
+    { layer: "Acts", preset: "rise-in", at: beat(after), params: { duration: 420 } },
+    { layer: "More", preset: "fade-in", at: beat(after + 1), params: { duration: 420 } },
+    { layer: "Sticker", preset: "pop-in", at: beat(after + 2), params: { duration: 400 } },
+    { layer: "Gate", preset: "rise-in", at: beat(gateAt), params: { duration: 450 } },
+    { layer: "Name", preset: "pulse", at: beat(gateAt + 1), params: { duration: 400, amount: 0.04 } },
+    { layer: "Button", preset: "pop-in", at: beat(w.beats - 8), params: { duration: 420 } },
+    { layer: "When", preset: "rise-in", at: beat(w.beats - 7), params: { duration: 400 } },
+    { layer: "Button", preset: "pulse", at: beat(w.beats - 4), params: { duration: 400, amount: 0.07 } }
+  ];
+  const counts = [{ layer: "Reel seconds figure", at: beat(gateAt), duration: 6e3, tick: 1e3, counter: { from: w.clock.from, to: w.clock.to } }];
+  const swaps = [captionSwap(w.captions, 0, duration, { stagger: 50, in: 260, out: 200, rise: 24 })];
+  return defineTemplate({
+    id: `motion-festival-presale-${w.slug}-reel`,
+    meta: {
+      name: NAME,
+      description: `A ${Math.round(duration / 1e3)}-second presale reel for ${w.name} (${w.dates}, ${w.place}) over ${w.picture}: the name lands on the first beat, the headliners come in on the beat, the rest of the bill follows, the countdown to the presale ticks and the ask pops on: sign up for a code by ${w.presale.by}, presale ${w.presale.opens}. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 layouts`,
+      category: "animation",
+      tags: ["animation", "festival", "presale", "tickets", "line-up", "countdown", "reel", "music", "audio", "captions", "event", ...w.tags],
+      platforms: ["instagram", "tiktok", "youtube", "facebook", "x"],
+      formats: ["reel", "short", "story", "post", "portrait-post", "video", "ad"],
+      useCases: ["presale", "event", "countdown", "announcement"],
+      ...META
+    },
+    stableNumbers: true,
+    motion: { cues, counts, swaps },
+    build() {
+      const k = new Kit(NAME, preset("ig-story"));
+      k.quantizeGeometry = true;
+      w.brand(k);
+      ctaButton(k, w, "CTA", 34, "Sign up for a code");
+      const sheet = k.sheet;
+      const pad = verticalPadding();
+      k.flowSheet(sheet, 24, { ...pad, top: Math.max(pad.top, bandH(w, "top", 0.9) + 20), left: 140, right: 140 }, "stage", "SPACE_BETWEEN", "CENTER");
+      k.patch(sheet, { clipsContent: true });
+      k.timeline(sheet, { duration, fps: 30, audio });
+      art(k, sheet, w);
+      fitArt(k, sheet, w, 1080, 1920, { top: 0.9, foot: 0.9 });
+      const boxed = w.look.nameOn === "plate";
+      nameBlock(k, sheet, w, { size: boxed ? 100 : 136, dates: 28, kicker: 20, ...boxed ? { dateLine: w.dates } : {} });
+      if (boxed) hide(k, sheet, ["Kicker"]);
+      const body = k.stack(sheet, { gap: 22, align: "CENTER", name: "Body" });
+      const bill = plate(k, body, w, { name: "Bill", align: "CENTER", gap: 6, pad: [24, 26] });
+      say(k, w, bill, "Kicker", 20, w.billLabel, { color: w.look.plate.muted, name: "Bill label", align: "CENTER" });
+      for (const a of w.heads) say(k, w, bill, "Head", headSize(w, 60), a, { color: w.look.plate.ink, name: "Head act", align: "CENTER" });
+      say(k, w, bill, "Act", 26, joined(w, w.acts), { color: w.look.plate.ink, name: "Acts", align: "CENTER" });
+      say(k, w, bill, "More", 20, w.tba, { color: w.look.plate.muted, name: "More", align: "CENTER" });
+      const gate = plate(k, body, w, { name: "Gate", align: "CENTER", gap: 12, pad: [22, 22] });
+      say(k, w, gate, "Kicker", 20, "The presale opens in", { color: w.look.plate.muted, name: "Gate label", align: "CENTER" });
+      clock(k, gate, w, "Reel", 66, 18);
+      w.sticker(k, gate, { size: 150, lines: w.seal, name: "Sticker", still: false, absolute: { x: 800 - 165, y: -96 } });
+      const foot = k.stack(sheet, { gap: 14, align: "CENTER", name: "Foot" });
+      const ask = k.stack(foot, { gap: 10, align: "CENTER", name: "Ask" });
+      k.instance(ask, "CTA", {}, { name: "Button" });
+      say(k, w, ask, "Act", 26, `Presale ${w.presale.opens} \xB7 register by ${w.presale.by}`, { color: "onStage", name: "When", align: "CENTER" });
+      captionStrip(k, foot, w.captions[0], { style: st(k, w, "Caption", 36, "CENTER"), fill: "accent", ink: "onAccent", radius: w.look.chip, pad: [14, 20] });
+      k.counts(sheet, counts);
+      k.swaps(sheet, swaps);
+      k.cues(sheet, cues);
+      const side = (kit, id, gap, inner) => {
+        patchAll(kit, id, "Body", { layoutMode: "HORIZONTAL", itemSpacing: gap, counterAxisAlignItems: "CENTER" });
+        for (const b of kit.named(id, "Body")) for (const c of kit.node(b).childIds) kit.patch(c, { layoutSizingHorizontal: "FIXED", width: Math.floor((inner - gap) / 2) });
+      };
+      const stick = (kit, id, x, y, s) => {
+        for (const n2 of kit.named(id, "Sticker")) kit.patch(n2, { x, y, width: s, height: s });
+      };
+      k.variants(sheet, [
+        {
+          // The square: the name over the bill and the countdown side by side, the ask under them, the bands slimmer.
+          preset: "ig-post",
+          adjust: (kit, id) => {
+            fitArt(kit, id, w, 1080, 1080, { top: 0.55, foot: 0.6 });
+            kit.patch(id, { padding: { top: bandH(w, "top", 0.55) - 30, right: 60, bottom: bandH(w, "foot", 0.6) - 28, left: 60 }, itemSpacing: 14 });
+            sizes(kit, w, id, { Name: ["Name", w.look.nameOn === "plate" ? 92 : 112, "CENTER"], "Head act": ["Head", headSize(w, 46), "CENTER"], Acts: ["Act", 21, "CENTER"], More: ["More", 17, "CENTER"], Dates: ["Act", 24, "CENTER"], When: ["Act", 22, "CENTER"], Caption: ["Caption", 28, "CENTER"] });
+            side(kit, id, 18, 960);
+            patchAll(kit, id, "Foot", { layoutMode: "HORIZONTAL", itemSpacing: 18, counterAxisAlignItems: "CENTER" });
+            hide(kit, id, ["When"]);
+            if (boxed) hide(kit, id, ["Acts"]);
+            stick(kit, id, 471 - 110, -100, 120);
+          }
+        },
+        {
+          preset: "ig-portrait",
+          adjust: (kit, id) => {
+            fitArt(kit, id, w, 1080, 1350, { top: 0.7, foot: 0.72 });
+            kit.patch(id, { padding: { top: bandH(w, "top", 0.7) - 20, right: 64, bottom: bandH(w, "foot", 0.72) - 50, left: 64 }, itemSpacing: 18 });
+            sizes(kit, w, id, { Name: ["Name", w.look.nameOn === "plate" ? 100 : 116, "CENTER"], "Head act": ["Head", headSize(w, 50), "CENTER"], Acts: ["Act", 23, "CENTER"], Caption: ["Caption", 32, "CENTER"] });
+            side(kit, id, 18, 952);
+            hide(kit, id, ["Kicker"]);
+            if (boxed) hide(kit, id, ["Acts"]);
+            stick(kit, id, 467 - 120, -110, 130);
+          }
+        },
+        {
+          // 16:9: the bands across the frame, the name over the bill and the countdown side by side, the ask under them.
+          preset: "video-1080p",
+          adjust: (kit, id) => {
+            fitArt(kit, id, w, 1920, 1080, { top: 0.62, foot: 0.66 });
+            kit.patch(id, { padding: { top: bandH(w, "top", 0.62) - 30, right: 160, bottom: bandH(w, "foot", 0.66) - 10, left: 160 }, itemSpacing: 12 });
+            hide(kit, id, ["Kicker"]);
+            sizes(kit, w, id, { Name: ["Name", w.look.nameOn === "plate" ? 90 : 104, "CENTER"], "Head act": ["Head", headSize(w, 42), "CENTER"], Acts: ["Act", 22, "CENTER"], Dates: ["Act", 26, "CENTER"], Caption: ["Caption", 30, "CENTER"] });
+            side(kit, id, 26, 1600);
+            patchAll(kit, id, "Foot", { itemSpacing: 10 });
+            hide(kit, id, ["More"]);
+            if (boxed) hide(kit, id, ["Acts"]);
+            patchAll(kit, id, "Ask", { layoutMode: "HORIZONTAL", itemSpacing: 20, counterAxisAlignItems: "CENTER" });
+            patchAll(kit, id, "When", { layoutSizingHorizontal: "HUG", textAutoResize: "WIDTH_AND_HEIGHT" });
+            stick(kit, id, 787 - 130, -120, 140);
+          }
+        }
+      ]);
+      return k.finish();
+    }
+  });
+}
+function lineupPost(w) {
+  const NAME = `Festival presale line-up post: ${w.name}`;
+  const DURATION = 12e3;
+  const n = w.heads.length;
+  const actsAt = 1200 + n * 520;
+  const layers = ["Kicker", "Name", "Dates", "Bill label", "Head act", "Acts", "More", "Sticker", "Foot"];
+  const cues = [
+    { layer: "Kicker", preset: "fade-in", at: 0, params: { duration: 400 } },
+    { layer: "Name", preset: "blur-in", at: 100, params: { duration: 700, amount: 18 } },
+    { layer: "Dates", preset: "rise-in", at: 500, params: { duration: 500 } },
+    { layer: "Bill label", preset: "fade-in", at: 800, params: { duration: 400 } },
+    { layer: "Head act", preset: w.look.enter, at: 1100, params: { duration: 560 }, stagger: { delay: 520 } },
+    { layer: "Acts", preset: "rise-in", at: actsAt, params: { duration: 600 } },
+    { layer: "More", preset: "fade-in", at: actsAt + 600, params: { duration: 600 } },
+    { layer: "Sticker", preset: "pop-in", at: actsAt + 1100, params: { duration: 450 } },
+    { layer: "Foot", preset: "rise-in", at: actsAt + 1400, params: { duration: 500 } },
+    outro(layers, 10800, { duration: 450, gap: 60 })
+  ];
+  return defineTemplate({
+    id: `motion-festival-presale-${w.slug}-lineup`,
+    meta: {
+      name: NAME,
+      description: `An animated line-up announcement for ${w.name} (${w.dates}) over ${w.picture}: the headliners arrive one after another in the biggest type, then the second line and the small names, the sticker and the presale date last. A 12-second loop, square with 4:5 and 9:16 cuts`,
+      category: "animation",
+      tags: ["animation", "festival", "presale", "line-up", "announcement", "poster", "tickets", "post", "loop", "event", ...w.tags],
+      platforms: ["instagram", "facebook", "threads", "x", "tiktok"],
+      formats: ["post", "portrait-post", "story", "poster"],
+      useCases: ["announcement", "event", "presale"],
+      ...META
+    },
+    stableNumbers: true,
+    motion: { cues, loop: true },
+    build() {
+      const k = new Kit(NAME, preset("ig-post"));
+      k.quantizeGeometry = true;
+      w.brand(k);
+      const sheet = k.sheet;
+      const top = bandH(w, "top", 0.55), bottom = bandH(w, "foot", 0.58);
+      k.flowSheet(sheet, 14, { top: Math.max(56, top - 24), right: 60, bottom: Math.max(56, bottom - 50), left: 60 }, "stage", "CENTER", "CENTER");
+      k.patch(sheet, { clipsContent: true });
+      k.timeline(sheet, { duration: DURATION, fps: 30 });
+      art(k, sheet, w);
+      fitArt(k, sheet, w, 1080, 1080, { top: 0.55, foot: 0.58 });
+      nameBlock(k, sheet, w, { size: w.look.nameOn === "plate" ? 84 : 104, dates: 24, kicker: 17, gap: 8 });
+      const bill = plate(k, sheet, w, { name: "Bill", align: "CENTER", gap: 4, pad: [22, 26] });
+      say(k, w, bill, "Kicker", 17, w.billLabel, { color: w.look.plate.muted, name: "Bill label", align: "CENTER" });
+      for (const a of w.heads) say(k, w, bill, "Head", headSize(w, 62), a, { color: w.look.plate.ink, name: "Head act", align: "CENTER" });
+      say(k, w, bill, "Act", 24, joined(w, w.acts), { color: w.look.plate.ink, name: "Acts", align: "CENTER" });
+      say(k, w, bill, "More", 17, `${joined(w, w.more)} ${w.look.sep} ${w.tba}`, { color: w.look.plate.muted, name: "More", align: "CENTER" });
+      w.sticker(k, bill, { size: 124, lines: w.seal, name: "Sticker", still: false, absolute: { x: 960 - 96, y: -40 } });
+      const foot = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", name: "Foot" });
+      ctaButton(k, w, "Presale button", 18, `Presale ${w.presale.short}`);
+      k.instance(foot, "Presale button", {}, { name: "Foot tag" });
+      tag(k, foot, w, `Sign up by ${w.presale.by}`, 18, { name: "Foot by", tone: "accent" });
+      k.cues(sheet, cues);
+      const stick = (kit, id, x, y, s) => {
+        for (const s2 of kit.named(id, "Sticker")) kit.patch(s2, { x, y, width: s, height: s });
+      };
+      k.variants(sheet, [
+        {
+          preset: "ig-portrait",
+          adjust: (kit, id) => {
+            fitArt(kit, id, w, 1080, 1350, { top: 0.68, foot: 0.7 });
+            kit.patch(id, { padding: { top: bandH(w, "top", 0.68) - 20, right: 64, bottom: bandH(w, "foot", 0.7) - 50, left: 64 }, itemSpacing: 20 });
+            sizes(kit, w, id, { Name: ["Name", w.look.nameOn === "plate" ? 100 : 124, "CENTER"], "Head act": ["Head", headSize(w, 72), "CENTER"], Acts: ["Act", 28, "CENTER"], More: ["More", 19, "CENTER"] });
+            stick(kit, id, 952 - 110, -46, 140);
+          }
+        },
+        {
+          preset: "ig-story",
+          adjust: (kit, id) => {
+            fitArt(kit, id, w, 1080, 1920, { top: 0.9, foot: 0.9 });
+            const p = verticalPadding();
+            kit.patch(id, { padding: { ...p, left: 140, right: 140 }, itemSpacing: 28 });
+            sizes(kit, w, id, { Name: ["Name", w.look.nameOn === "plate" ? 112 : 140, "CENTER"], "Head act": ["Head", headSize(w, 80), "CENTER"], Acts: ["Act", 32, "CENTER"], More: ["More", 22, "CENTER"], Dates: ["Act", 28, "CENTER"], "Bill label": ["Kicker", 20, "CENTER"] });
+            patchAll(kit, id, "Bill", { itemSpacing: 10 });
+            stick(kit, id, 800 - 175, -56, 160);
+          }
+        }
+      ]);
+      return k.finish();
+    }
+  });
+}
+function countdownStory(w) {
+  const NAME = `Festival presale countdown story: ${w.name}`;
+  const cues = [
+    { layer: "Button", preset: "pulse", at: 2e3, params: { duration: 600, amount: 0.06 } },
+    { layer: "Opens", preset: "pulse", at: 4e3, params: { duration: 600, amount: 0.04 } }
+  ];
+  const counts = [ticking("Story", w.clock)];
+  return defineTemplate({
+    id: `motion-festival-presale-${w.slug}-countdown`,
+    meta: {
+      name: NAME,
+      description: `A countdown story for the ${w.name} presale over ${w.picture}: "the presale opens in" in big tiles whose seconds tick, the presale date and the field to sign up for a code. A 6-second loop, 9:16 with square and 4:5 cuts`,
+      category: "animation",
+      tags: ["animation", "festival", "presale", "countdown", "story", "sign-up", "tickets", "loop", "event", ...w.tags],
+      platforms: ["instagram", "facebook", "tiktok", "snapchat"],
+      formats: ["story", "post", "portrait-post"],
+      useCases: ["countdown", "presale", "event"],
+      ...META
+    },
+    stableNumbers: true,
+    motion: { cues, counts, loop: true },
+    build() {
+      const k = new Kit(NAME, preset("ig-story"));
+      k.quantizeGeometry = true;
+      w.brand(k);
+      ctaButton(k, w, "CTA", 32, "Sign up for a code");
+      const sheet = k.sheet;
+      k.flowSheet(sheet, 26, { ...verticalPadding(), left: 140, right: 140 }, "stage", "SPACE_BETWEEN", "CENTER");
+      k.patch(sheet, { clipsContent: true });
+      k.timeline(sheet, { duration: LOOP, fps: 30 });
+      art(k, sheet, w);
+      fitArt(k, sheet, w, 1080, 1920, { top: 0.9, foot: w.storyFoot ?? 0.9 });
+      nameBlock(k, sheet, w, { size: w.look.nameOn === "plate" ? 120 : 146, dates: 30, kicker: 20, dateLine: w.dates });
+      const gate = plate(k, sheet, w, { name: "Gate", align: "CENTER", gap: 16, pad: [30, 26] });
+      say(k, w, gate, "Head", 64, "The presale opens in", { color: w.look.plate.ink, name: "Opens", align: "CENTER" });
+      clock(k, gate, w, "Story", 104, 22, 10, [16, 4]);
+      say(k, w, gate, "Act", 34, w.presale.opens, { color: w.look.plate.ink, name: "When", align: "CENTER" });
+      w.sticker(k, gate, { size: 150, lines: w.seal, name: "Sticker", still: false, absolute: { x: 800 - 165, y: -120 } });
+      const join = plate(k, sheet, w, { name: "Join", align: "CENTER", gap: 14, pad: [24, 24] });
+      say(k, w, join, "Kicker", 22, `Sign up by ${w.presale.by} for your code`, { color: w.look.plate.muted, name: "Join label", align: "CENTER" });
+      const field = k.stack(join, { direction: "HORIZONTAL", fill: "card", radius: w.look.button, padding: { top: 20, right: 22, bottom: 20, left: 22 }, stroke: { color: "onCard", width: 2, align: "INSIDE" }, name: "Field" });
+      say(k, w, field, "Body", 30, "you@example.com", { color: "cardMuted", name: "Field text" });
+      k.instance(join, "CTA", {}, { name: "Button" });
+      say(k, w, join, "Body", 24, `One code each, good for ${w.presale.limit}. Free to sign up.`, { color: w.look.plate.ink, name: "Join note", align: "CENTER" });
+      k.counts(sheet, counts);
+      k.cues(sheet, cues);
+      const stick = (kit, id, x, y, s) => {
+        for (const n of kit.named(id, "Sticker")) kit.patch(n, { x, y, width: s, height: s });
+      };
+      k.variants(sheet, [
+        {
+          preset: "ig-post",
+          adjust: (kit, id) => {
+            fitArt(kit, id, w, 1080, 1080, { top: 0.55, foot: 0.6 });
+            kit.patch(id, { padding: { top: bandH(w, "top", 0.55) - 30, right: 60, bottom: bandH(w, "foot", 0.6) - 28, left: 60 }, itemSpacing: 14 });
+            sizes(kit, w, id, { Name: ["Name", w.look.nameOn === "plate" ? 84 : 104, "CENTER"], Opens: ["Head", 46, "CENTER"], When: ["Act", 26, "CENTER"], Dates: ["Act", 24, "CENTER"] });
+            hide(kit, id, ["Join note", "Join label", "Kicker"]);
+            patchAll(kit, id, "Join", { layoutMode: "HORIZONTAL", counterAxisAlignItems: "CENTER", padding: { top: 16, right: 24, bottom: 16, left: 24 } });
+            patchAll(kit, id, "Field", { layoutSizingHorizontal: "FILL" });
+            patchAll(kit, id, "Gate", { itemSpacing: 10 });
+            stick(kit, id, 960 - 100, -50, 120);
+          }
+        },
+        {
+          preset: "ig-portrait",
+          adjust: (kit, id) => {
+            fitArt(kit, id, w, 1080, 1350, { top: 0.7, foot: 0.72 });
+            kit.patch(id, { padding: { top: bandH(w, "top", 0.7) - 20, right: 64, bottom: bandH(w, "foot", 0.72) - 50, left: 64 }, itemSpacing: 16 });
+            sizes(kit, w, id, { Name: ["Name", w.look.nameOn === "plate" ? 96 : 120, "CENTER"], Opens: ["Head", 54, "CENTER"] });
+            hide(kit, id, ["Join note"]);
+            patchAll(kit, id, "Join", { layoutMode: "HORIZONTAL", counterAxisAlignItems: "CENTER", padding: { top: 18, right: 24, bottom: 18, left: 24 } });
+            hide(kit, id, ["Join label"]);
+            patchAll(kit, id, "Field", { layoutSizingHorizontal: "FILL" });
+            stick(kit, id, 952 - 110, -56, 130);
+          }
+        }
+      ]);
+      return k.finish();
+    }
+  });
+}
+function tierStory(w) {
+  const NAME = `Festival presale tier story: ${w.name}`;
+  const t = w.tier;
+  const cues = [
+    { layer: "Price", preset: "pulse", at: 1200, params: { duration: 600, amount: 0.05 } },
+    { layer: "Button", preset: "pulse", at: 3600, params: { duration: 600, amount: 0.06 } }
+  ];
+  const counts = [stockCount("Tier stock", t.stock)];
+  return defineTemplate({
+    id: `motion-festival-presale-${w.slug}-tier`,
+    meta: {
+      name: NAME,
+      description: `A "${t.tag} is selling" story for ${w.name} over ${w.picture}: the ${t.tag.toLowerCase()} price large, the stock bar running down with the tickets left (${t.stock.left.toLocaleString("en-US")} of ${t.stock.total.toLocaleString("en-US")}), the ladder from ${t.was} to ${t.next} and the ask, with the presale page's own figures. A 6-second loop, 9:16`,
+      category: "animation",
+      tags: ["animation", "festival", "presale", "tickets", "ticket tiers", "stock", "urgency", "story", "loop", "event", ...w.tags],
+      platforms: ["instagram", "facebook", "tiktok", "snapchat"],
+      formats: ["story"],
+      useCases: ["presale", "sale", "event"],
+      ...META
+    },
+    stableNumbers: true,
+    motion: { cues, counts, loop: true },
+    build() {
+      const k = new Kit(NAME, preset("ig-story"));
+      k.quantizeGeometry = true;
+      w.brand(k);
+      ctaButton(k, w, "CTA", 30, "Sign up for a code");
+      const sheet = k.sheet;
+      k.flowSheet(sheet, 24, { ...verticalPadding(), left: 140, right: 140 }, "stage", "SPACE_BETWEEN", "CENTER");
+      k.patch(sheet, { clipsContent: true });
+      k.timeline(sheet, { duration: LOOP, fps: 30 });
+      art(k, sheet, w);
+      fitArt(k, sheet, w, 1080, 1920, { top: 0.9, foot: w.storyFoot ?? 0.9 });
+      nameBlock(k, sheet, w, { size: w.look.nameOn === "plate" ? 96 : 116, dates: 26, kicker: 18, dateLine: w.dates });
+      const card = plate(k, sheet, w, { name: "Tier", align: "CENTER", gap: 14, pad: [30, 30] });
+      tag(k, card, w, `${t.tag} is selling`, 26, { name: "Selling", tone: "accent" });
+      say(k, w, card, "Act", 30, t.name, { color: w.look.plate.ink, name: "Tier name", align: "CENTER" });
+      say(k, w, card, "Price", 210, t.price, { color: w.look.plate.ink, name: "Price", align: "CENTER" });
+      const L = partsLook(k, w, 40, 22);
+      const bar = stockBar(k, card, L, { name: "Tier stock", stock: t.stock, ink: w.look.plate.ink, height: 26 });
+      k.patch(bar, { layoutSizingHorizontal: "FILL" });
+      say(k, w, card, "Body", 24, t.note, { color: w.look.plate.ink, name: "Note", align: "CENTER" });
+      w.sticker(k, card, { size: 150, lines: [t.sold.split(" ").slice(0, 2).join(" "), t.sold.split(" ").slice(2).join(" ")], name: "Sticker", still: false, absolute: { x: 800 - 165, y: -72 } });
+      const steps = k.stack(sheet, { direction: "HORIZONTAL", width: "FILL", gap: 12, name: "Ladder" });
+      for (const [label, price, tone] of [[t.wasTag, t.was, "dead"], ["Now", t.price, "live"], [t.nextTag, t.next, "next"]]) {
+        const live = tone === "live";
+        const cell = k.stack(steps, { width: "FILL", gap: 2, align: "CENTER", fill: live ? (w.look.cta ?? ["primary"])[0] : w.look.plate.fill, radius: w.look.plate.radius, padding: { top: 14, right: 8, bottom: 14, left: 8 }, name: "Rung", ...w.look.plate.stroke ? { stroke: w.look.plate.stroke } : {} });
+        const ink = live ? (w.look.cta ?? ["", "onPrimary"])[1] : tone === "dead" ? w.look.plate.muted : w.look.plate.ink;
+        say(k, w, cell, "Kicker", 18, label, { color: ink, name: "Rung label", align: "CENTER" });
+        say(k, w, cell, "Price", 52, price, { color: ink, name: "Rung price", align: "CENTER" });
+        if (tone === "dead") k.rect(cell, "FILL", 4, w.look.plate.muted, { name: "Strike", absolute: { x: 16, y: 64 } });
+      }
+      const foot = k.stack(sheet, { gap: 12, align: "CENTER", name: "Foot" });
+      k.instance(foot, "CTA", {}, { name: "Button" });
+      say(k, w, foot, "Act", 26, `Presale ${w.presale.opens}`, { color: "onStage", name: "When", align: "CENTER" });
+      drain(k, sheet, "Tier stock", t.stock);
+      k.counts(sheet, counts);
+      k.cues(sheet, cues);
+      for (const s of k.named(sheet, "Strike")) k.patch(s, { width: 240 });
+      return k.finish();
+    }
+  });
+}
+function emailHeader(w, fit) {
+  const NAME = `Festival presale email header: ${w.name}`;
+  const cues = [{ layer: "Button", preset: "pulse", at: 3e3, params: { duration: 600, amount: 0.06 } }];
+  return defineTemplate({
+    id: `email-festival-presale-${w.slug}-header`,
+    meta: {
+      name: `${NAME} (animated GIF)`,
+      description: `A 600 \xD7 300 animated header for the ${w.name} presale email: the name, the dates, when the presale opens and the button are all on the first frame (for Outlook), over ${w.picture}, which moves and comes back to where it began. A seamless 6-second GIF`,
+      category: "email",
+      tags: ["email", "gif", "animated", "header", "banner", "festival", "presale", "tickets", "event", ...w.tags],
+      platforms: ["email"],
+      formats: ["email", "banner"],
+      useCases: ["presale", "event", "newsletter"],
+      ...META
+    },
+    stableNumbers: true,
+    motion: { cues, loop: true },
+    build() {
+      const k = new Kit(NAME, HEADER);
+      k.quantizeGeometry = true;
+      w.brand(k);
+      ctaButton(k, w, "CTA", 13, "Sign up for a code");
+      const sheet = k.sheet;
+      k.flowSheet(sheet, 0, { top: Math.max(14, bandH(w, "top", fit.top) - 8), right: 20, bottom: 14, left: fit.copyX ?? 20 }, "stage", "CENTER", "MIN");
+      k.patch(sheet, { clipsContent: true });
+      k.timeline(sheet, { duration: LOOP, fps: EMAIL_FPS });
+      art(k, sheet, w);
+      fitArt(k, sheet, w, 600, 300, fit);
+      const copy = plate(k, sheet, w, { name: "Copy", width: 268, gap: 6, pad: [14, 16] });
+      say(k, w, copy, "Name", 36, "{{brand.name}}", { color: w.look.plate.ink, name: "Name" });
+      say(k, w, copy, "Body", 13, w.dates, { color: w.look.plate.ink, name: "Dates" });
+      say(k, w, copy, "Body", 13, `Presale ${w.presale.opens}`, { color: w.look.plate.ink, name: "When" });
+      k.instance(copy, "CTA", {}, { name: "Button" });
+      k.cues(sheet, cues);
+      return k.finish();
+    }
+  });
+}
+function adSet(w, fit) {
+  const NAME = `Festival presale display ad set: ${w.name}`;
+  const cues = displayAdLoop({ plate: "Copy", tag: ["Tag"], name: "Name", lines: ["Dates", "Heads", "Pitch"], button: ["Button"], extra: ["Sticker"] });
+  return defineTemplate({
+    id: `social-festival-presale-${w.slug}-ads`,
+    meta: {
+      name: NAME,
+      description: `Display ads for the ${w.name} presale (${w.dates}, ${w.place}) over ${w.picture}: the name, the headliners, the presale date, the sticker and a sign-up button. 1200 \xD7 628 and 1200 \xD7 1200, with 4:5 and LinkedIn cuts. A 6-second loop: the art moving, the copy building in and holding, the button nudging`,
+      category: "social",
+      tags: ["festival", "presale", "tickets", "ad", "display ad", "google ads", "line-up", "event", "animated", "loop", ...w.tags],
+      platforms: ["web", "facebook", "instagram", "linkedin"],
+      formats: ["ad", "banner", "post", "portrait-post"],
+      useCases: ["presale", "event"],
+      ...META
+    },
+    stableNumbers: true,
+    motion: { cues, loop: true },
+    build() {
+      const k = new Kit(NAME, preset("ad-landscape"));
+      k.quantizeGeometry = true;
+      w.brand(k);
+      ctaButton(k, w, "CTA", 20, "Sign up for a code");
+      const sheet = k.sheet;
+      k.flowSheet(sheet, 0, { top: Math.max(30, bandH(w, "top", fit.top) - 10), right: 40, bottom: 30, left: 48 }, "stage", "CENTER", "MIN");
+      k.patch(sheet, { clipsContent: true });
+      k.timeline(sheet, { duration: AD_LOOP_MS, fps: 30 });
+      art(k, sheet, w);
+      fitArt(k, sheet, w, 1200, 628, fit);
+      const copy = plate(k, sheet, w, { name: "Copy", width: 660, gap: 8, pad: [20, 26] });
+      tag(k, copy, w, `Presale ${w.presale.short}`, 16, { name: "Tag", tone: "accent" });
+      say(k, w, copy, "Name", w.look.nameOn === "plate" ? 76 : 84, "{{brand.name}}", { color: w.look.plate.ink, name: "Name" });
+      say(k, w, copy, "Act", 20, `${w.dates} \xB7 ${w.place}`, { color: w.look.plate.ink, name: "Dates" });
+      say(k, w, copy, "Head", 26, joined(w, w.heads), { color: w.look.plate.ink, name: "Heads" });
+      say(k, w, copy, "Body", 17, `Sign up by ${w.presale.by} for a presale code. ${w.tier.tag} ${w.tier.price}.`, { color: w.look.plate.muted, name: "Pitch" });
+      k.instance(copy, "CTA", {}, { name: "Button" });
+      w.sticker(k, sheet, { size: 150, lines: w.seal, name: "Sticker", still: false, absolute: { x: 1200 - 210, y: Math.max(24, bandH(w, "top", fit.top) + 6) } });
+      k.cues(sheet, cues);
+      const tall = (kit, id, W, H, s) => {
+        fitArt(kit, id, w, W, H, { top: s, foot: s + 0.04 });
+        kit.patch(id, { primaryAxisAlignItems: "CENTER", counterAxisAlignItems: "CENTER", padding: { top: bandH(w, "top", s) - 10, right: 64, bottom: bandH(w, "foot", s + 0.04) - 40, left: 64 } });
+        patchAll(kit, id, "Copy", { layoutSizingHorizontal: "FILL", counterAxisAlignItems: "CENTER", itemSpacing: 16, padding: { top: 34, right: 28, bottom: 34, left: 28 } });
+        for (const n of ["Name", "Dates", "Heads", "Pitch"]) patchAll(kit, id, n, { textAlign: "CENTER" });
+        sizes(kit, w, id, { Name: ["Name", w.look.nameOn === "plate" ? 120 : 150, "CENTER"], Heads: ["Head", 46, "CENTER"], Dates: ["Act", 28, "CENTER"], Pitch: ["Body", 24, "CENTER"] });
+        for (const n of kit.named(id, "Sticker")) kit.patch(n, { x: W - 236, y: bandH(w, "top", s) - 130, width: 180, height: 180 });
+      };
+      k.variants(sheet, [
+        { preset: "ad-square", adjust: (kit, id) => tall(kit, id, 1200, 1200, 0.66) },
+        { preset: "ig-portrait", adjust: (kit, id) => tall(kit, id, 1080, 1350, 0.68) },
+        { preset: "linkedin-post", adjust: (kit, id) => fitArt(kit, id, w, 1200, 627, fit) }
+      ]);
+      return k.finish();
+    }
+  });
+}
+function qrRoles(k) {
+  const l = (c) => 0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b;
+  return l(k.color("text")) < l(k.color("paper")) ? ["text", "paper"] : ["paper", "text"];
+}
+function qr(k, parent, size, seed, role, ground) {
+  const n = 29, m = size / n, f = k.stack(parent, { width: size, height: size, fill: ground, name: "QR" });
+  const r = rng(seed), cells = [];
+  const finder = (x, y) => x < 8 && y < 8 || x >= n - 8 && y < 8 || x < 8 && y >= n - 8;
+  for (let y = 0; y < n; y++) for (let x = 0; x < n; x++) if (!finder(x, y) && r() > 0.5) cells.push(box(x * m, y * m, m, m));
+  for (const [x, y] of [[0, 0], [n - 7, 0], [0, n - 7]]) cells.push(box(x * m, y * m, 7 * m, m), box(x * m, (y + 6) * m, 7 * m, m), box(x * m, y * m, m, 7 * m), box((x + 6) * m, y * m, m, 7 * m), box((x + 2) * m, (y + 2) * m, 3 * m, 3 * m));
+  k.vector(f, size, size, cells, role, { name: "Modules", absolute: { x: 0, y: 0 } });
+  return f;
+}
+function passArt(k, parent, w, width, height, name) {
+  const a = k.stack(parent, { height, fill: "stage", clip: true, justify: "MAX", padding: { top: 14, right: 16, bottom: 14, left: 16 }, gap: 4, name });
+  art(k, a, w, true);
+  fitArt(k, a, w, width, height, { top: 0.24, foot: 0.24 });
+  for (const p of w.parts) if (p.anchor === "cover") hide(k, a, [p.name]);
+  return a;
+}
+function ticket(w) {
+  const NAME = `Festival presale mobile ticket: ${w.name}`;
+  return defineTemplate({
+    id: `app-festival-presale-${w.slug}-ticket`,
+    meta: {
+      name: NAME,
+      description: `Two phone screens for ${w.name}: the pass in a wallet (the festival art as its header, the holder, the ${w.pass.toLowerCase()}, the gate, a QR block and the entry date) and the presale code confirmation (the code, when the presale opens and what happens next). iPhone screens with their Android copies, wired as a prototype`,
+      category: "app",
+      tags: ["app", "mobile", "ios", "android", "ticket", "wallet", "qr code", "festival", "presale", "confirmation", "event", ...w.tags],
+      platforms: ["ios", "android"],
+      formats: ["screen"],
+      useCases: ["presale", "event", "receipt"],
+      ...META
+    },
+    stableNumbers: true,
+    breakpoints: true,
+    build() {
+      const k = new Kit(NAME, preset("iphone-17"));
+      k.quantizeGeometry = true;
+      w.brand(k);
+      k.textStyle("Status 15", { size: 15, fontWeight: 600, lineHeight: 20 });
+      ctaButton(k, w, "CTA", 16, "Add to calendar");
+      const P = w.look.plate;
+      const passCard = { fill: "card", radius: 22, clip: true, ...P.stroke ? { stroke: { ...P.stroke, width: 2 } } : {} };
+      const pass = k.sheet;
+      k.nameSheet(pass, "Ticket");
+      screen(k, pass, { gap: 14 });
+      statusBar(k, pass, { style: "Status 15" });
+      const top = k.stack(pass, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top" });
+      say(k, w, top, "Head", 30, "Wallet", { color: "text", name: "Title", auto: true });
+      say(k, w, top, "Kicker", 12, "1 of 4 tickets", { color: "onPaper", name: "Count", auto: true });
+      const card = k.stack(pass, { gap: 0, name: "Pass", ...passCard });
+      const head = passArt(k, card, w, 354, 200, "Pass art");
+      tag(k, head, w, w.dates, 12, { name: "Pass kicker", tone: "plate" });
+      say(k, w, head, "Name", 44, "{{brand.name}}", { color: "onStage", name: "Pass name", effects: w.look.nameEffects?.(k) });
+      const info = k.stack(card, { gap: 14, padding: { top: 16, right: 18, bottom: 18, left: 18 }, name: "Pass info" });
+      const row = (pairs, name) => {
+        const r = k.stack(info, { direction: "HORIZONTAL", gap: 12, name });
+        for (const [label, value] of pairs) {
+          const c = k.stack(r, { gap: 2, name: "Field" });
+          say(k, w, c, "Kicker", 12, label, { color: "onCard", name: "Field label" });
+          say(k, w, c, "Body", 16, value, { color: "onCard", name: "Field value" });
+        }
+      };
+      row([["Holder", w.holder], ["Ticket", `${w.pass}, ${w.tier.tag}`]], "Row 1");
+      row([["Entry", w.dates], ["Gate", w.gate]], "Row 2");
+      const scan = k.stack(info, { direction: "HORIZONTAL", gap: 14, align: "CENTER", fill: "paper", radius: 14, padding: 12, name: "Scan" });
+      qr(k, scan, 172, w.code.length * 11 + w.slug.length, ...qrRoles(k));
+      const words = k.stack(scan, { gap: 6, name: "Scan words" });
+      say(k, w, words, "Kicker", 12, "Show at the gate", { color: "text", name: "Scan label" });
+      say(k, w, words, "Body", 13, "Brightness up. The code refreshes every 30 seconds, so a screenshot will not scan.", { color: "text", name: "Scan note" });
+      say(k, w, info, "More", 12, `No. ${w.code.replace("PRE", "0425")} \xB7 named ticket \xB7 bring photo ID`, { color: "onCard", name: "Pass number" });
+      const stackUnder = k.stack(pass, { gap: 4, align: "CENTER", name: "Wallet stack" });
+      [0.7, 0.45, 0.25].forEach((a, i) => k.rect(stackUnder, 354 - 24 * (i + 1), 12, k.tint("card", a), { name: "Pass edge", radius: 8 }));
+      const conf = k.addScreen("Presale code");
+      k.nameSheet(conf, "Presale code");
+      screen(k, conf, { gap: 14 });
+      statusBar(k, conf, { style: "Status 15" });
+      const banner = k.stack(conf, { gap: 0, name: "Code banner", ...passCard });
+      const bart = passArt(k, banner, w, 354, 150, "Code art");
+      tag(k, bart, w, "You are signed up", 13, { name: "Done", tone: "primary" });
+      say(k, w, conf, "Head", 30, "Your presale code", { color: "text", name: "Code title" });
+      const codeCard = k.stack(conf, { gap: 8, align: "CENTER", fill: "card", radius: 18, padding: 18, name: "Code card", ...P.stroke ? { stroke: { ...P.stroke, width: 2 } } : {} });
+      say(k, w, codeCard, "Clock", 30, w.code, { color: "onCard", name: "Code", align: "CENTER" });
+      say(k, w, codeCard, "Kicker", 12, `Good for one order of ${w.presale.limit}`, { color: "onCard", name: "Code note", align: "CENTER" });
+      const facts = k.stack(conf, { gap: 10, name: "Facts" });
+      for (const [label, value] of [["Presale opens", w.presale.opens], ["Queue opens", w.presale.queue], ["On sale", `${w.tier.tag}, ${w.tier.price}`]]) {
+        const r = k.stack(facts, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 12, name: "Fact" });
+        say(k, w, r, "Body", 15, label, { color: "onPaper", name: "Fact label", auto: true });
+        say(k, w, r, "Body", 15, value, { color: "text", name: "Fact value", auto: true });
+      }
+      const next = k.stack(conf, { gap: 8, fill: "card", radius: 18, padding: 16, name: "Next" });
+      say(k, w, next, "Kicker", 12, "What happens next", { color: "onCard", name: "Next label" });
+      for (const [when, what] of [[w.presale.queue, "The queue opens. Places in it are drawn by lot."], [w.presale.short, "The presale opens. Enter your code at checkout."], [w.tier.price, `${w.tier.tag} while it lasts, then ${w.tier.next}.`]]) {
+        const r = k.stack(next, { direction: "HORIZONTAL", gap: 12, name: "Next row" });
+        say(k, w, r, "Body", 14, when, { color: "onCard", name: "Next when", width: 96 });
+        say(k, w, r, "Body", 14, what, { color: "onCard", name: "Next what" });
+      }
+      const bill = k.stack(conf, { gap: 6, fill: "card", radius: 18, padding: 16, name: "Bill" });
+      say(k, w, bill, "Kicker", 12, "On the bill", { color: "onCard", name: "Bill label" });
+      say(k, w, bill, "Body", 16, joined(w, w.heads), { color: "onCard", name: "Bill heads" });
+      k.instance(conf, "CTA", {}, { name: "Calendar" });
+      for (const p of k.named(pass, "Pass")) k.link(p, conf, "SMART_ANIMATE", { duration: 400 });
+      const androids = [pass, conf].map((id, i) => k.variants(id, [androidVariant(["Ticket", "Presale code"][i], (kit, a) => {
+        for (const n of kit.named(a, i ? "Code art" : "Pass art")) fitArt(kit, n, w, 364, i ? 150 : 200, { top: 0.24, foot: 0.24 });
+      })])[0]);
+      for (const c of k.named(conf, "Calendar")) k.link(c, null, "DISSOLVE", { navigation: "BACK" });
+      k.flowStart(pass, "Ticket (iPhone)");
+      k.flowStart(androids[0], "Ticket (Android)");
+      return k.finish();
+    }
+  });
+}
+
+export {
+  st,
+  cased,
+  say,
+  partsLook,
+  joined,
+  headSize,
+  art,
+  fitArt,
+  bandH,
+  plate,
+  tag,
+  ctaButton,
+  reel,
+  lineupPost,
+  countdownStory,
+  tierStory,
+  emailHeader,
+  adSet,
+  ticket
+};