@popcraft/kit 0.29.0 → 0.30.0

package/dist/chunks/chunk-245Q4QGT.js

@@ -1,728 +0,0 @@
-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,
-  sway,
-  ticking
-} from "./chunk-GZJKN4MY.js";
-import {
-  EMAIL_FPS,
-  HEADER
-} from "./chunk-MUCU3TXB.js";
-import {
-  captionStrip,
-  captionSwap
-} from "./chunk-ERLSOXU6.js";
-import {
-  bed
-} from "./chunk-42LEBOKV.js";
-import {
-  patchAll,
-  place,
-  restyle
-} from "./chunk-YHBAWSDX.js";
-import {
-  AD_LOOP_MS,
-  displayAdLoop,
-  feedVariants,
-  outro,
-  postVariants,
-  verticalPadding
-} from "./chunk-LEKU2ZW3.js";
-import {
-  box,
-  r3,
-  rng
-} from "./chunk-6RCDZU4R.js";
-import {
-  androidVariant,
-  screen,
-  statusBar
-} from "./chunk-DFO4652V.js";
-import {
-  defineTemplate
-} from "./chunk-PMGFSLPU.js";
-import {
-  Kit,
-  preset
-} from "./chunk-OFAIOFJQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/themes/festival-presale-family-a-shared.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var SCENE = { w: 1200, h: 1500 };
-function st(k, w, role, size, align = "LEFT") {
-  const r = w.type[role];
-  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, clock, unit, field = 26) {
-  const map = {
-    Clock: () => st(k, w, "Clock", clock),
-    Unit: () => st(k, w, "Unit", unit),
-    Status: () => st(k, w, "Unit", unit),
-    Field: () => st(k, w, "Body", field),
-    Button: () => st(k, w, "Button", field)
-  };
-  return { s: (n) => (map[n] ?? (() => {
-    throw new Error(`no ${n}`);
-  }))(), radius: w.look.radius, card: {}, pad: 20, rule: 1, chipRadius: w.look.chip, upper: w.type.Unit.upper ? ["Unit", "Status"] : [] };
-}
-var mover = (k, still) => (id, path, amp, cycles = 1, phase = 0) => {
-  if (!still) sway(k, id, path, amp, cycles, phase);
-};
-function scene(k, sheet, w, still = false) {
-  const f = k.frame(sheet, { x: 0, y: 0, width: SCENE.w, height: SCENE.h }, { name: "Scene" });
-  k.patch(f, { layoutPositioning: "ABSOLUTE" });
-  w.scene(k, f, still);
-  return f;
-}
-function fitScene(k, root, w, width, height, how = "tall", foot = 0.9) {
-  let s, x, y;
-  if (how === "tall") {
-    s = Math.max(width / SCENE.w, height / SCENE.h);
-    x = (width - SCENE.w * s) / 2;
-    y = height - SCENE.h * s;
-  } else if (how === "wide") {
-    s = width / SCENE.w;
-    x = 0;
-    y = height * foot - w.horizon * s;
-  } else ({ s, x, y } = how);
-  place(k, root, "Scene", Math.round(x), Math.round(y), r3(s));
-}
-function plate(k, parent, w, o) {
-  const p = o.pad ?? 24, [v, h] = typeof p === "number" ? [p, p] : p;
-  const L = w.look;
-  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: k.tint(L.plate, L.plateAlpha),
-    radius: L.radius,
-    padding: { top: v, right: h, bottom: v, left: h },
-    name: o.name,
-    ...L.plateStroke ? { stroke: L.plateStroke } : {},
-    ...L.plateEffects ? { effects: L.plateEffects(k) } : {}
-  });
-}
-function tag(k, parent, w, words, size, o) {
-  const tone = o.tone ?? "primary";
-  const [fill, ink] = tone === "primary" ? ["primary", "onPrimary"] : tone === "accent" ? ["accent", "onAccent"] : [k.tint(w.look.plate, w.look.plateAlpha), "onStage"];
-  const id = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", fill, radius: w.look.chip, padding: { top: Math.round(size * 0.3), right: Math.round(size * 0.6), bottom: Math.round(size * 0.3), left: Math.round(size * 0.6) }, name: o.name });
-  say(k, w, id, "Kicker", size, words, { color: ink, name: `${o.name} text`, auto: true });
-  return id;
-}
-var headFor = (name, base) => Math.round(base * Math.min(1, 18 / name.length));
-function restyleHeads(k, root, w, base) {
-  k.named(root, "Head act").forEach((n, i) => k.restyle(n, st(k, w, "Head", headFor(w.heads[i % w.heads.length], base), "CENTER")));
-}
-var headSize = (w, base) => Math.round(base * Math.min(1, 18 / Math.max(...w.heads.map((h) => h.length))));
-var joined = (w, names) => names.join(`\xA0${w.look.sep} `);
-function ctaButton(k, w, name, size, label) {
-  k.component(name, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: w.look.button, align: "CENTER", padding: { top: Math.round(size * 0.7), right: Math.round(size * 1.3), bottom: Math.round(size * 0.7), left: Math.round(size * 1.3) }, props: { Label: cased(w, "Button", label) } }, (id) => {
-    k.propText(id, "Label", { style: st(k, w, "Button", size), color: "onPrimary", autoWidth: true });
-  });
-}
-var REEL_BEATS = { electronic: 32, folk: 24, jazz: 24 };
-function reel(w) {
-  const { beat, duration, audio } = bed(w.track, REEL_BEATS[w.slug]);
-  const NAME = `Festival presale reel: ${w.name}`;
-  const cues = [
-    { layer: "Name", preset: "pop-in", 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 } },
-    // The bill's plate arrives with its first words, never empty on screen.
-    { 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: "rise-in", at: beat(2), params: { duration: 380 }, stagger: { delay: beat(1) } },
-    { layer: "Acts", preset: "rise-in", at: beat(6), params: { duration: 450 } },
-    { layer: "More", preset: "fade-in", at: beat(7), params: { duration: 450 } },
-    { layer: "Name", preset: "pulse", at: beat(8), params: { duration: 400, amount: 0.05 } },
-    { layer: "Gate", preset: "rise-in", at: beat(9), params: { duration: 450 } },
-    { layer: "Button", preset: "pop-in", at: beat(16), params: { duration: 420 } },
-    { layer: "Button", preset: "pulse", at: beat(20), params: { duration: 400, amount: 0.07 } }
-  ];
-  const counts = [{ layer: "Reel seconds figure", at: beat(9), 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}): ${w.picture}; the name lands on the first beat, the headliners cut 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"],
-      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;
-      w.brand(k);
-      ctaButton(k, w, "CTA", 30, "Sign up for a code");
-      const sheet = k.sheet;
-      const pad = verticalPadding();
-      k.flowSheet(sheet, 26, pad, "stage", "SPACE_BETWEEN", "CENTER");
-      k.patch(sheet, { clipsContent: true });
-      k.timeline(sheet, { duration, fps: 30, audio });
-      scene(k, sheet, w);
-      fitScene(k, sheet, w, 1080, 1920);
-      const L = partsLook(k, w, 64, 18);
-      const head = k.stack(sheet, { gap: 14, align: "CENTER", name: "Head" });
-      tag(k, head, w, w.kicker, 20, { name: "Kicker", tone: "plate" });
-      say(k, w, head, "Name", 140, "{{brand.name}}", { color: "onStage", name: "Name", align: "CENTER", effects: w.look.nameEffects?.(k) });
-      say(k, w, head, "Act", 28, `${w.dates} \xB7 ${w.place}`, { color: "onStage", name: "Dates", align: "CENTER" });
-      const body = k.stack(sheet, { gap: 22, align: "CENTER", name: "Body" });
-      const bill = plate(k, body, w, { name: "Bill", align: "CENTER", gap: 6, pad: [22, 24] });
-      say(k, w, bill, "Kicker", 20, "First names on the bill", { color: "stageMuted", name: "Bill label", align: "CENTER" });
-      for (const a of w.heads) say(k, w, bill, "Head", headFor(a, 62), a, { color: "onStage", name: "Head act", align: "CENTER" });
-      say(k, w, bill, "Act", 28, joined(w, w.acts), { color: "onStage", name: "Acts", align: "CENTER" });
-      say(k, w, bill, "More", 20, `${joined(w, w.more)} ${w.look.sep} ${w.tba}`, { color: "stageMuted", name: "More", align: "CENTER" });
-      const gate = plate(k, body, w, { name: "Gate", align: "CENTER", gap: 12, pad: [20, 22] });
-      say(k, w, gate, "Kicker", 20, "The presale opens in", { color: "stageMuted", name: "Gate label", align: "CENTER" });
-      countdown(k, gate, L, { prefix: "Reel", clock: w.clock, fill: w.look.tile, ink: w.look.tileInk, muted: w.look.tileMuted, gap: 10, pad: [10, 6] });
-      for (const c of k.named(gate, "Clock tile")) k.patch(c, { layoutSizingHorizontal: "FILL" });
-      for (const c of k.named(gate, "Reel clock")) k.patch(c, { layoutSizingHorizontal: "FILL" });
-      say(k, w, gate, "Body", 24, `Register by ${w.presale.by} \xB7 presale ${w.presale.opens} \xB7 ${w.tier.tag} ${w.tier.price}`, { color: "onStage", name: "Note", align: "CENTER" });
-      const foot = k.stack(sheet, { gap: 14, align: "CENTER", name: "Foot" });
-      k.instance(foot, "CTA", {}, { name: "Button" });
-      captionStrip(k, foot, w.captions[0], { style: st(k, w, "Caption", 34, "CENTER"), fill: "accent", ink: "onAccent", radius: w.look.radius, pad: [14, 20] });
-      k.counts(sheet, counts);
-      k.swaps(sheet, swaps);
-      k.cues(sheet, cues);
-      const wideBody = (kit, id, gap) => {
-        patchAll(kit, id, "Body", { layoutMode: "HORIZONTAL", itemSpacing: gap, counterAxisAlignItems: "CENTER" });
-      };
-      const sizes = (kit, id, s) => {
-        for (const [layer, [role, size, align]] of Object.entries(s)) restyle(kit, id, layer, st(kit, w, role, size, align));
-      };
-      k.variants(sheet, [
-        ...feedVariants({ post: 52, portrait: 64 }, {
-          // The square: the name across the top, the bill beside the countdown, the ask along the foot.
-          post: (kit, id) => {
-            fitScene(kit, id, w, 1080, 1080);
-            kit.patch(id, { itemSpacing: 18 });
-            for (const n of ["Dust", "Runway", "Crowd far"]) patchAll(kit, id, n, { visible: false });
-            sizes(kit, id, { Name: ["Name", 112, "CENTER"], Acts: ["Act", 22, "CENTER"], More: ["More", 16, "CENTER"], Dates: ["Act", 26, "CENTER"] });
-            restyleHeads(kit, id, w, 50);
-            wideBody(kit, id, 18);
-            patchAll(kit, id, "Foot", { layoutMode: "HORIZONTAL", itemSpacing: 18, counterAxisAlignItems: "CENTER" });
-          },
-          portrait: (kit, id) => {
-            fitScene(kit, id, w, 1080, 1350);
-            kit.patch(id, { itemSpacing: 18 });
-            sizes(kit, id, { Name: ["Name", 120, "CENTER"], Acts: ["Act", 24, "CENTER"] });
-            restyleHeads(kit, id, w, 56);
-            wideBody(kit, id, 18);
-          }
-        }),
-        {
-          // 16:9: the scene across the frame, the name over the bill and the countdown side by side, the ask under them.
-          preset: "video-1080p",
-          adjust: (kit, id) => {
-            fitScene(kit, id, w, 1920, 1080, "wide", 0.92);
-            kit.patch(id, { padding: { top: 56, right: 120, bottom: 64, left: 120 }, itemSpacing: 18 });
-            sizes(kit, id, { Name: ["Name", 132, "CENTER"], Acts: ["Act", 24, "CENTER"] });
-            restyleHeads(kit, id, w, 54);
-            wideBody(kit, id, 24);
-            patchAll(kit, id, "Foot", { layoutMode: "HORIZONTAL", itemSpacing: 24, counterAxisAlignItems: "CENTER" });
-          }
-        }
-      ]);
-      return k.finish();
-    }
-  });
-}
-function lineupPost(w) {
-  const NAME = `Festival presale line-up post: ${w.name}`;
-  const DURATION = 12e3;
-  const layers = ["Kicker", "Name", "Dates", "Head act", "Acts", "More", "Foot"];
-  const cues = [
-    { layer: "Kicker", preset: "fade-in", at: 0, params: { duration: 400 } },
-    { layer: "Name", preset: "blur-in", at: 100, params: { duration: 700, amount: 20 } },
-    { layer: "Dates", preset: "rise-in", at: 500, params: { duration: 500 } },
-    { layer: "Head act", preset: "rise-in", at: 1100, params: { duration: 600 }, stagger: { delay: 550 } },
-    { layer: "Acts", preset: "rise-in", at: 3e3, params: { duration: 600 } },
-    { layer: "More", preset: "fade-in", at: 3700, params: { duration: 600 } },
-    { layer: "Foot", preset: "pop-in", at: 4300, params: { duration: 500 } },
-    outro(layers, 10900, { 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}): ${w.picture}, with the headliners arriving one after another in the biggest type, then the second line and the small names, and the presale date and the ask 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"],
-      created: "2026-10-02",
-      updated: "2026-10-02"
-    },
-    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;
-      k.flowSheet(sheet, 14, { top: 60, right: 64, bottom: 60, left: 64 }, "stage", "CENTER", "CENTER");
-      k.patch(sheet, { clipsContent: true });
-      k.timeline(sheet, { duration: DURATION, fps: 30 });
-      scene(k, sheet, w);
-      fitScene(k, sheet, w, 1080, 1080);
-      for (const name of ["Bunting", "Bunting line"]) for (const n of k.named(sheet, name)) k.patch(n, { visible: false });
-      tag(k, sheet, w, w.kicker, 18, { name: "Kicker", tone: "plate" });
-      say(k, w, sheet, "Name", 120, "{{brand.name}}", { color: "onStage", name: "Name", align: "CENTER", effects: w.look.nameEffects?.(k) });
-      say(k, w, sheet, "Act", 26, `${w.dates} \xB7 ${w.place}`, { color: "onStage", name: "Dates", align: "CENTER" });
-      const bill = plate(k, sheet, w, { name: "Bill", align: "CENTER", gap: 6, pad: [20, 24] });
-      for (const a of w.heads) say(k, w, bill, "Head", headFor(a, 66), a, { color: "onStage", name: "Head act", align: "CENTER" });
-      say(k, w, bill, "Act", 26, joined(w, w.acts), { color: "onStage", name: "Acts", align: "CENTER" });
-      say(k, w, bill, "More", 18, `${joined(w, w.more)} ${w.look.sep} ${w.tba}`, { color: "stageMuted", name: "More", align: "CENTER" });
-      ctaButton(k, w, "Presale button", 22, `Presale ${w.presale.opens} \xB7 sign up for a code`);
-      k.instance(sheet, "Presale button", {}, { name: "Foot" });
-      k.cues(sheet, cues);
-      k.variants(sheet, postVariants({ portrait: 72 }, {
-        portrait: (kit, id) => {
-          fitScene(kit, id, w, 1080, 1350);
-          patchAll(kit, id, "Bunting", { visible: true });
-          patchAll(kit, id, "Bunting line", { visible: true });
-          kit.patch(id, { itemSpacing: 20 });
-          restyle(kit, id, "Name", st(kit, w, "Name", 136, "CENTER"));
-          restyleHeads(kit, id, w, 76);
-          restyle(kit, id, "Acts", st(kit, w, "Act", 30, "CENTER"));
-        },
-        vertical: (kit, id) => {
-          fitScene(kit, id, w, 1080, 1920);
-          patchAll(kit, id, "Bunting", { visible: true });
-          patchAll(kit, id, "Bunting line", { visible: true });
-          kit.patch(id, { itemSpacing: 22 });
-          restyle(kit, id, "Name", st(kit, w, "Name", 120, "CENTER"));
-          restyleHeads(kit, id, w, 72);
-          restyle(kit, id, "Acts", st(kit, w, "Act", 34, "CENTER"));
-          restyle(kit, id, "More", st(kit, w, "More", 22, "CENTER"));
-          restyle(kit, id, "Dates", st(kit, w, "Act", 30, "CENTER"));
-          patchAll(kit, id, "Bill", { itemSpacing: 14, padding: { top: 40, right: 24, bottom: 40, left: 24 } });
-        }
-      }));
-      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: ${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"],
-      created: "2026-10-02",
-      updated: "2026-10-02"
-    },
-    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, "Button", 32, w.cta);
-      const sheet = k.sheet;
-      k.flowSheet(sheet, 30, verticalPadding(), "stage", "SPACE_BETWEEN", "CENTER");
-      k.patch(sheet, { clipsContent: true });
-      k.timeline(sheet, { duration: LOOP, fps: 30 });
-      scene(k, sheet, w);
-      fitScene(k, sheet, w, 1080, 1920);
-      const head = k.stack(sheet, { gap: 12, align: "CENTER", name: "Head" });
-      say(k, w, head, "Name", 150, "{{brand.name}}", { color: "onStage", name: "Name", align: "CENTER", effects: w.look.nameEffects?.(k) });
-      say(k, w, head, "Act", 34, w.dates, { color: "onStage", name: "Dates", align: "CENTER" });
-      const gate = plate(k, sheet, w, { name: "Gate", align: "CENTER", gap: 16, pad: [26, 24] });
-      say(k, w, gate, "Head", 66, "The presale opens in", { color: "onStage", name: "Opens", align: "CENTER" });
-      const L = partsLook(k, w, 110, 22);
-      countdown(k, gate, L, { prefix: "Story", clock: w.clock, fill: w.look.tile, ink: w.look.tileInk, muted: w.look.tileMuted, gap: 10, pad: [14, 4] });
-      for (const c of k.named(gate, "Clock tile")) k.patch(c, { layoutSizingHorizontal: "FILL" });
-      for (const c of k.named(gate, "Story clock")) k.patch(c, { layoutSizingHorizontal: "FILL" });
-      say(k, w, gate, "Act", 36, w.presale.opens, { color: "onStage", name: "When", align: "CENTER" });
-      const join = plate(k, sheet, w, { name: "Join", align: "CENTER", gap: 14, pad: [22, 22] });
-      say(k, w, join, "Kicker", 24, `Sign up by ${w.presale.by} for a code`, { color: "stageMuted", name: "Join label", align: "CENTER" });
-      const field = k.stack(join, { direction: "HORIZONTAL", fill: "card", radius: w.look.radius, padding: { top: 18, right: 20, bottom: 18, left: 20 }, name: "Field" });
-      say(k, w, field, "Body", 30, "you@example.com", { color: "cardMuted", name: "Field text" });
-      const btn = k.instance(join, "Button", {}, { name: "Button" });
-      void btn;
-      say(k, w, join, "Body", 26, `One code each, good for ${w.presale.limit}. Free to sign up.`, { color: "onStage", name: "Join note", align: "CENTER" });
-      k.counts(sheet, counts);
-      k.cues(sheet, cues);
-      k.variants(sheet, feedVariants({ post: 52, portrait: 64 }, {
-        post: (kit, id) => {
-          fitScene(kit, id, w, 1080, 1080);
-          kit.patch(id, { itemSpacing: 18 });
-          restyle(kit, id, "Name", st(kit, w, "Name", 96, "CENTER"));
-          restyle(kit, id, "Opens", st(kit, w, "Head", 44, "CENTER"));
-          patchAll(kit, id, "Join note", { visible: false });
-          patchAll(kit, id, "Join", { layoutMode: "HORIZONTAL", counterAxisAlignItems: "CENTER" });
-          patchAll(kit, id, "Join label", { visible: false });
-        },
-        portrait: (kit, id) => {
-          fitScene(kit, id, w, 1080, 1350);
-          patchAll(kit, id, "Bunting", { visible: true });
-          patchAll(kit, id, "Bunting line", { visible: true });
-          kit.patch(id, { itemSpacing: 20 });
-          restyle(kit, id, "Name", st(kit, w, "Name", 110, "CENTER"));
-          patchAll(kit, id, "Join note", { visible: false });
-          for (const n of ["High bunting", "High bunting line"]) patchAll(kit, id, n, { visible: false });
-        }
-      }));
-      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}: ${w.picture}, the ${t.tag.toLowerCase()} price large, the stock bar running down with the passes left (${t.stock.left.toLocaleString("en-US")} of ${t.stock.total.toLocaleString("en-US")}), the next tier's price and the ask, the same figures as the presale page. 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"],
-      created: "2026-10-02",
-      updated: "2026-10-02"
-    },
-    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", 28, "Sign up for a code");
-      const sheet = k.sheet;
-      k.flowSheet(sheet, 28, verticalPadding(), "stage", "SPACE_BETWEEN", "CENTER");
-      k.patch(sheet, { clipsContent: true });
-      k.timeline(sheet, { duration: LOOP, fps: 30 });
-      scene(k, sheet, w);
-      fitScene(k, sheet, w, 1080, 1920);
-      const head = k.stack(sheet, { gap: 10, align: "CENTER", name: "Head" });
-      say(k, w, head, "Name", 96, "{{brand.name}}", { color: "onStage", name: "Name", align: "CENTER", effects: w.look.nameEffects?.(k) });
-      say(k, w, head, "Act", 26, `${w.dates} \xB7 ${w.place}`, { color: "onStage", name: "Dates", align: "CENTER" });
-      const card = plate(k, sheet, w, { name: "Tier", align: "CENTER", gap: 16, pad: [30, 28] });
-      tag(k, card, w, `${t.tag} is selling`, 26, { name: "Selling", tone: "accent" });
-      say(k, w, card, "Act", 30, t.name, { color: "onStage", name: "Tier name", align: "CENTER" });
-      say(k, w, card, "Price", 200, t.price, { color: "onStage", name: "Price", align: "CENTER" });
-      const L = partsLook(k, w, 40, 22);
-      const bar = stockBar(k, card, L, { name: "Tier stock", stock: t.stock, ink: "onStage", height: 22 });
-      k.patch(bar, { layoutSizingHorizontal: "FILL" });
-      say(k, w, card, "Body", 24, `${t.note} ${t.sold}.`, { color: "onStage", name: "Note", align: "CENTER" });
-      const steps = k.stack(sheet, { direction: "HORIZONTAL", width: "FILL", gap: 14, name: "Ladder" });
-      for (const [label, price, tone] of [["Sold out", t.was, "dead"], ["Now", t.price, "live"], ["Presale next", t.next, "next"]]) {
-        const cell = k.stack(steps, { width: "FILL", gap: 4, align: "CENTER", fill: tone === "live" ? "primary" : k.tint(w.look.plate, w.look.plateAlpha), radius: w.look.radius, padding: { top: 14, right: 10, bottom: 14, left: 10 }, name: "Rung", ...w.look.plateStroke && tone !== "live" ? { stroke: w.look.plateStroke } : {} });
-        const ink = tone === "live" ? "onPrimary" : tone === "dead" ? "stageMuted" : "onStage";
-        say(k, w, cell, "Kicker", 18, label, { color: ink, name: "Rung label", align: "CENTER" });
-        say(k, w, cell, "Price", 48, price, { color: ink, name: "Rung price", align: "CENTER" });
-      }
-      const foot = k.stack(sheet, { gap: 12, align: "CENTER", name: "Foot" });
-      k.instance(foot, "CTA", {}, { name: "Button" });
-      drain(k, sheet, "Tier stock", t.stock);
-      k.counts(sheet, counts);
-      k.cues(sheet, cues);
-      return k.finish();
-    }
-  });
-}
-function emailHeader(w) {
-  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"],
-      created: "2026-10-02",
-      updated: "2026-10-02"
-    },
-    stableNumbers: true,
-    motion: { cues, loop: true },
-    build() {
-      const k = new Kit(NAME, HEADER);
-      k.quantizeGeometry = true;
-      w.brand(k);
-      ctaButton(k, w, "CTA", 14, "Sign up for a code");
-      const sheet = k.sheet;
-      k.flowSheet(sheet, 0, { top: 22, right: 22, bottom: 22, left: 22 }, "stage", "CENTER", "MIN");
-      k.patch(sheet, { clipsContent: true });
-      k.timeline(sheet, { duration: LOOP, fps: EMAIL_FPS });
-      scene(k, sheet, w);
-      fitScene(k, sheet, w, 600, 300, { s: 0.55, x: 0, y: 300 - w.horizon * 0.55 - 12 });
-      const copy = plate(k, sheet, w, { name: "Copy", width: 330, gap: 6, pad: [14, 18] });
-      say(k, w, copy, "Kicker", 12, "Presale code", { color: "stageMuted", name: "Kicker" });
-      say(k, w, copy, "Name", 40, "{{brand.name}}", { color: "onStage", name: "Name", effects: w.look.nameEffects?.(k) });
-      say(k, w, copy, "Body", 13, w.dates, { color: "onStage", name: "Dates" });
-      say(k, w, copy, "Body", 13, `Presale ${w.presale.opens}. Register by ${w.presale.by}.`, { color: "onStage", name: "When" });
-      k.instance(copy, "CTA", {}, { name: "Button" });
-      k.cues(sheet, cues);
-      return k.finish();
-    }
-  });
-}
-function adSet(w) {
-  const NAME = `Festival presale display ad set: ${w.name}`;
-  const cues = displayAdLoop({ plate: "Copy", tag: ["Tag", "Tag large"], name: "Name", lines: ["Dates", "Heads", "Pitch"], button: ["Button", "Button large"] });
-  return defineTemplate({
-    id: `social-festival-presale-${w.slug}-ads`,
-    meta: {
-      name: NAME,
-      description: `Display ads for the ${w.name} presale (${w.dates}, ${w.place}): ${w.picture}, the name, the headliners, the presale date and a sign-up button. 1200 \xD7 628 and 1200 \xD7 1200, with 4:5 and LinkedIn cuts. A 6-second loop: the stage 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"],
-      created: "2026-10-02",
-      updated: "2026-10-02"
-    },
-    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");
-      ctaButton(k, w, "CTA large", 32, "Sign up for a code");
-      const sheet = k.sheet;
-      k.flowSheet(sheet, 0, { top: 40, right: 40, bottom: 40, left: 40 }, "stage", "CENTER", "MIN");
-      k.patch(sheet, { clipsContent: true });
-      k.timeline(sheet, { duration: AD_LOOP_MS, fps: 30 });
-      scene(k, sheet, w);
-      fitScene(k, sheet, w, 1200, 628, { s: 0.62, x: 1200 - SCENE.w * 0.62 + 40, y: 628 - SCENE.h * 0.62 });
-      const copy = plate(k, sheet, w, { name: "Copy", width: 600, gap: 12, pad: [26, 28] });
-      tag(k, copy, w, `Presale ${w.presale.opens}`, 16, { name: "Tag", tone: "accent" });
-      k.patch(tag(k, copy, w, `Presale ${w.presale.opens}`, 24, { name: "Tag large", tone: "accent" }), { visible: false });
-      say(k, w, copy, "Name", 96, "{{brand.name}}", { color: "onStage", name: "Name", effects: w.look.nameEffects?.(k) });
-      say(k, w, copy, "Act", 22, `${w.dates} \xB7 ${w.place}`, { color: "onStage", name: "Dates" });
-      say(k, w, copy, "Head", 26, joined(w, w.heads), { color: "onStage", name: "Heads" });
-      say(k, w, copy, "Body", 18, `Register by ${w.presale.by} for a presale code. ${w.tier.tag} from ${w.tier.price}.`, { color: "stageMuted", name: "Pitch" });
-      k.instance(copy, "CTA", {}, { name: "Button" });
-      k.patch(k.instance(copy, "CTA large", {}, { name: "Button large" }), { visible: false });
-      k.cues(sheet, cues);
-      const tall = (kit, id, wd, ht) => {
-        fitScene(kit, id, w, wd, ht);
-        kit.patch(id, { primaryAxisAlignItems: "MAX", padding: { top: 56, right: 56, bottom: 56, left: 56 } });
-        patchAll(kit, id, "Copy", { layoutSizingHorizontal: "FILL", counterAxisAlignItems: "CENTER" });
-        restyle(kit, id, "Name", st(kit, w, "Name", 180, "CENTER"));
-        restyle(kit, id, "Heads", st(kit, w, "Head", 54, "CENTER"));
-        restyle(kit, id, "Dates", st(kit, w, "Act", 32, "CENTER"));
-        restyle(kit, id, "Pitch", st(kit, w, "Body", 28, "CENTER"));
-        patchAll(kit, id, "Copy", { itemSpacing: 20, padding: { top: 40, right: 28, bottom: 40, left: 28 } });
-        for (const n of ["Button", "Tag"]) {
-          patchAll(kit, id, n, { visible: false });
-          patchAll(kit, id, `${n} large`, { visible: true });
-        }
-      };
-      k.variants(sheet, [
-        { preset: "ad-square", adjust: (kit, id) => tall(kit, id, 1200, 1200) },
-        { preset: "ig-portrait", adjust: (kit, id) => tall(kit, id, 1080, 1350) },
-        { preset: "linkedin-post", adjust: (kit, id) => fitScene(kit, id, w, 1200, 627, { s: 0.62, x: 1200 - SCENE.w * 0.62 + 40, y: 627 - SCENE.h * 0.62 }) }
-      ]);
-      return k.finish();
-    }
-  });
-}
-function passCrop(k, header, w, height) {
-  if ((w.passFocus ?? 1) >= 1) return;
-  for (const sc of k.named(header, "Scene")) {
-    const n = k.node(sc), s = n.scaleX ?? 1, bottom = (height - n.y) / s;
-    for (const c of n.childIds) {
-      const q = k.node(c);
-      if (q.fills?.length && q.y + q.height > bottom) k.patch(c, { visible: false });
-    }
-  }
-}
-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 = 25, 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.52) 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 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 poster art as its header, the holder, the ${w.tier.name.toLowerCase()}, the gate, a QR block and the entry date) and the presale code confirmation (the code, when the presale opens and what it buys). 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"],
-      created: "2026-10-02",
-      updated: "2026-10-02"
-    },
-    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 pass = k.sheet;
-      k.nameSheet(pass, "Ticket");
-      screen(k, pass, { gap: 16 });
-      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 2 passes", { color: "onPaper", name: "Count", auto: true });
-      const card = k.stack(pass, { gap: 0, fill: "card", radius: 22, clip: true, name: "Pass", ...w.look.plateStroke ? { stroke: { ...w.look.plateStroke, width: 1.5 } } : {} });
-      const art = k.stack(card, { height: 196, fill: "stage", clip: true, justify: "MAX", padding: { top: 16, right: 18, bottom: 16, left: 18 }, gap: 2, name: "Pass art" });
-      scene(k, art, w, true);
-      place(k, art, "Scene", Math.round((354 - SCENE.w * 0.36) / 2), Math.round((196 - SCENE.h * 0.36) * (w.passFocus ?? 1)), 0.36);
-      passCrop(k, art, w, 196);
-      const label = plate(k, art, w, { name: "Pass label", width: "HUG", gap: 2, pad: [8, 12] });
-      say(k, w, label, "Name", 36, "{{brand.name}}", { color: "onStage", name: "Pass name", auto: true, effects: w.look.nameEffects?.(k) });
-      say(k, w, label, "Kicker", 12, w.dates, { color: "onStage", name: "Pass dates", auto: true });
-      const info = k.stack(card, { gap: 14, padding: { top: 18, 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 [label2, value] of pairs) {
-          const c = k.stack(r, { gap: 2, name: "Field" });
-          say(k, w, c, "Kicker", 12, label2, { color: "onCard", name: "Field label" });
-          say(k, w, c, "Body", 16, value, { color: "onCard", name: "Field value" });
-        }
-      };
-      row([["Holder", "Robin Achterberg"], ["Pass", `${w.tier.name}, ${w.tier.tag}`]], "Row 1");
-      row([["Entry", w.dates], ["Gate", w.gate]], "Row 2");
-      const code = k.stack(info, { gap: 10, align: "CENTER", fill: "paper", radius: 14, padding: 14, name: "Scan" });
-      qr(k, code, 176, w.code.length * 7 + w.slug.length, ...qrRoles(k));
-      const scanWords = k.stack(code, { gap: 4, align: "CENTER", name: "Scan words" });
-      say(k, w, scanWords, "Kicker", 12, "Show at the gate", { color: "text", name: "Scan label", align: "CENTER" });
-      say(k, w, scanWords, "Body", 13, "Turn your brightness up. The code refreshes every 30 seconds and does not work as a screenshot.", { color: "text", name: "Scan note", align: "CENTER" });
-      say(k, w, info, "More", 12, `No. ${w.code.replace("PRE", "0427")} \xB7 named pass \xB7 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: 12 });
-      statusBar(k, conf, { style: "Status 15" });
-      const banner = k.stack(conf, { height: 150, fill: "stage", radius: 22, clip: true, justify: "MAX", padding: 18, name: "Code art" });
-      scene(k, banner, w, true);
-      place(k, banner, "Scene", Math.round((354 - SCENE.w * 0.36) / 2), Math.round((150 - SCENE.h * 0.36) * (w.passFocus ?? 1)), 0.36);
-      passCrop(k, banner, w, 150);
-      tag(k, banner, w, "You are registered", 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", ...w.look.plateStroke ? { stroke: { ...w.look.plateStroke, width: 1.5 } } : {} });
-      say(k, w, codeCard, "Clock", 32, 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 [label2, value] of [["Presale opens", w.presale.opens], ["Queue opens", w.presale.queue], ["Tier 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, label2, { 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 waiting room opens. Places in it are drawn at random."], [w.presale.time, "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, "Clock", 15, when, { color: "onCard", name: "Next when", width: 92 });
-        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", 15, joined(w, w.heads), { color: "onCard", name: "Bill heads" });
-      k.instance(conf, "CTA", {}, { name: "Calendar" });
-      for (const n of k.named(pass, "Pass")) k.link(n, conf, "SMART_ANIMATE", { duration: 400 });
-      const androids = [pass, conf].map((id, i) => k.variants(id, [androidVariant(["Ticket", "Presale code"][i])])[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 {
-  SCENE,
-  st,
-  cased,
-  say,
-  partsLook,
-  mover,
-  scene,
-  fitScene,
-  plate,
-  tag,
-  headFor,
-  restyleHeads,
-  headSize,
-  joined,
-  ctaButton,
-  reel,
-  lineupPost,
-  countdownStory,
-  tierStory,
-  emailHeader,
-  adSet,
-  ticket
-};