@popcraft/kit 0.24.2 → 0.25.0

package/dist/chunks/chunk-RIV22A5D.js

@@ -0,0 +1,201 @@
+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 {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  score
+} from "./chunk-52GCV7N5.js";
+import {
+  each,
+  pattern,
+  put,
+  redraw,
+  sizeOf
+} from "./chunk-QLV6445V.js";
+import {
+  glow,
+  shadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  logoBadge,
+  pill,
+  postVariants
+} from "./chunk-EK5CFFJO.js";
+import {
+  box,
+  rng
+} from "./chunk-BNVLVZUT.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  ease
+} from "./chunk-6DWY3DOQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/saas-kit-countdown-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = score("tension");
+var { beat } = S;
+var TILES = [["Days", "3", "DAYS"], ["Hours", "14", "HOURS"], ["Minutes", "27", "MINUTES"], ["Seconds", "48", "SECONDS"]];
+var SECONDS = { from: 48, to: 32 };
+var stars = (w, h) => {
+  const r = rng(2026);
+  const out = [];
+  for (let i = 0; i < Math.round(w * h / 9e3); i++) {
+    const x = r() * w, y = r() * r() * h * 1.1, s = 2 + Math.round(r() * 3);
+    if (y < h - 260) out.push(box(Math.round(x), Math.round(y), s, s));
+  }
+  return out;
+};
+var ring = (d, r, cx = d / 2, cy = d / 2) => {
+  const c = 0.5523 * r;
+  return { closed: true, points: [
+    { x: cx, y: cy - r, handleIn: { x: cx - c, y: cy - r }, handleOut: { x: cx + c, y: cy - r } },
+    { x: cx + r, y: cy, handleIn: { x: cx + r, y: cy - c }, handleOut: { x: cx + r, y: cy + c } },
+    { x: cx, y: cy + r, handleIn: { x: cx + c, y: cy + r }, handleOut: { x: cx - c, y: cy + r } },
+    { x: cx - r, y: cy, handleIn: { x: cx - r, y: cy + c }, handleOut: { x: cx - r, y: cy - c } }
+  ] };
+};
+var SUN = { d: 1500, shows: 132, orbit: 806 };
+var counts = [
+  { layer: "Seconds", at: 0, duration: S.duration, counter: SECONDS, tick: 1e3 },
+  { layer: "List figure", at: beat(8), duration: beat(20), counter: { from: 1268, to: 1284, separator: "," } }
+];
+var cues = [
+  { layer: "Top row", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Lead", preset: "words-in", at: 0, params: { duration: 500, amount: 60 } },
+  { layer: "Tile", preset: "drop-in", at: beat(0.5), params: { duration: 380 }, stagger: { delay: Math.round(beat(0.5)) } },
+  // The figure is on within a second, on a tick of the clock; the groove lands at the second bar and the sun swells.
+  { layer: "Figure", preset: "pop-in", at: beat(2), params: { duration: 420 } },
+  { layer: "Figure", preset: "pulse", at: beat(4), params: { duration: 500, amount: 0.05 } },
+  { layer: "Sun", preset: "pulse", at: beat(4), params: { duration: 900, amount: 0.04 } },
+  { layer: "When", preset: "rise-in", at: beat(6), params: { duration: 450 } },
+  { layer: "List row", preset: "rise-in", at: beat(8), params: { duration: 450 } },
+  { layer: "Call", preset: "pop-in", at: beat(10), params: { duration: 420 } },
+  { layer: "Seconds tile", preset: "pulse", at: beat(12), params: { duration: 500, amount: 0.05 } },
+  { layer: "Figure", preset: "pulse", at: beat(20), params: { duration: 600, amount: 0.05 } },
+  { layer: "Call", preset: "pulse", at: beat(24), params: { duration: 600, amount: 0.06 } },
+  { layer: "Seconds tile", preset: "pulse", at: beat(28), params: { duration: 500, amount: 0.05 } }
+];
+function furnish(k, sheet) {
+  const { w, h } = sizeOf(k, sheet);
+  redraw(k, sheet, "Stars", stars);
+  const cx = w / 2, cy = h - SUN.shows + SUN.d / 2, od = SUN.orbit * 2 + 40;
+  put(k, sheet, "Sun glow", cx - 900, h - SUN.shows - 620);
+  put(k, sheet, "Sun", cx - SUN.d / 2, h - SUN.shows);
+  put(k, sheet, "Sun rim", cx - SUN.d / 2 + 40, h - SUN.shows + 40);
+  for (const name of ["Orbit", "Satellite"]) put(k, sheet, name, cx - od / 2, cy - od / 2);
+  put(k, sheet, "Far star", Math.round(w * 0.88), Math.round(h * 0.2));
+  put(k, sheet, "Near star", Math.round(w * 0.05), Math.round(h * 0.6));
+}
+var saas_kit_countdown_post_default = defineTemplate({
+  id: "motion-saas-kit-countdown-post",
+  meta: {
+    name: "SaaS launch countdown post (animated)",
+    description: "The post for the days before a launch: \u201CLaunching in 3 days.\u201D over four flip-clock tiles whose seconds really tick, a sun coming up over the foot of a starry sky with a satellite going round it, the launch list\u2019s figure counting up, and a call to get notified. With music (\u201CCountdown\u201D, 120 BPM, made by PopCraft, CC0): the clock ticks on the beat and the figure lands with the groove. Sixteen seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "saas launch", "countdown", "launching soon", "coming soon", "timer", "flip clock", "counter", "teaser", "music", "audio", "post", "night"],
+    platforms: ["x", "linkedin", "instagram", "threads", "tiktok"],
+    formats: ["post", "portrait-post", "story", "reel"],
+    useCases: ["countdown", "launch", "announcement", "waitlist"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("SaaS launch countdown post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#15123B", text: "#F7F4FF", onPaper: "#C2BCEC", accent: "#FF7A4D", onAccent: "#240C00", tint: "#231F5E", onTint: "#F7F4FF" },
+      { name: "Pagecrest", when: "Tuesday 6 October \xB7 9:00 am PT", site: "pagecrest.example/launch" }
+    );
+    k.palette({ tileLow: "#1B184C", seam: "#15123B", tileEdge: "#3A3590", rim: "#FFB08F" });
+    k.textStyle("Brand 34", { size: 34, fontWeight: 800, letterSpacing: -0.8, lineHeight: 40 });
+    k.textStyle("Chip 22", { ...MONO, size: 22, fontWeight: 700, letterSpacing: 1.6, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Lead 64", { size: 64, fontWeight: 600, letterSpacing: -2.2, lineHeight: 68 });
+    k.textStyle("Figure 190", { size: 190, fontWeight: 900, letterSpacing: -9, lineHeight: 186 });
+    k.textStyle("Digits 104", { ...MONO, size: 104, fontWeight: 800, letterSpacing: -5, lineHeight: 108, textAlign: "CENTER", fontFeatures: { tnum: 1 } });
+    k.textStyle("Unit 20", { ...MONO, size: 20, fontWeight: 700, letterSpacing: 2.4, lineHeight: 24, textAlign: "CENTER" });
+    k.textStyle("When 32", { size: 32, fontWeight: 600, letterSpacing: -0.6, lineHeight: 40 });
+    k.textStyle("List 26", { size: 26, fontWeight: 500, lineHeight: 34 });
+    k.textStyle("List figure 26", { ...MONO, size: 26, fontWeight: 800, lineHeight: 34, fontFeatures: { tnum: 1 } });
+    k.textStyle("Button 30", { size: 30, fontWeight: 800, letterSpacing: -0.5, lineHeight: 38 });
+    pill(k, "Button", { fill: "accent", ink: "onAccent", style: "Button 30", label: "Get the launch email", pad: [16, 30], radius: 16 });
+    pill(k, "Chip", { fill: "tint", ink: "onTint", style: "Chip 22", label: "T-minus", pad: [9, 16], radius: 8 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 20, { top: 60, right: 64, bottom: 196, left: 64 }, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: S.duration, fps: 30, audio: S.audio });
+    const sky = pattern(k, sheet, "Stars", "text", stars, 0.2);
+    k.behave(sky, "opacity", [{ kind: "sine", amp: 0.07, freq: 0.5 }]);
+    for (const [name, size] of [["Far star", 34], ["Near star", 22]]) {
+      const star = k.star(sheet, size, "accent", { name, absolute: { x: 0, y: 0 } });
+      k.patch(star, { pointCount: 4, innerRadius: 0.3 });
+      k.behave(star, "opacity", [{ kind: "sine", amp: 0.35, freq: name === "Far star" ? 0.5 : 0.25 }]);
+    }
+    glow(k, sheet, { x: 900, y: 620, w: 1800, h: 1240, role: "accent", alpha: 0.3, name: "Sun glow" });
+    const od = SUN.orbit * 2 + 40;
+    k.vector(sheet, od, od, [ring(od, SUN.orbit)], "rim", { name: "Orbit", strokeWidth: 2, stroke: { color: "rim", width: 2, dash: [3, 12] }, opacity: 0.55, absolute: { x: 0, y: 0 } });
+    const sat = k.vector(sheet, od, od, [ring(od, 9, od / 2, od / 2 - SUN.orbit), ring(od, 9, od / 2, od / 2 + SUN.orbit)], "rim", { name: "Satellite", absolute: { x: 0, y: 0 } });
+    k.animate(sat, "rotation", [{ t: 0, v: -34, ease: ease.linear }, { t: S.duration, v: 34 }]);
+    k.ellipse(sheet, SUN.d, "accent", { name: "Sun", absolute: { x: 0, y: 0 }, effects: [shadow(k, "accent", 0.5, -6, 60)] });
+    k.ellipse(sheet, SUN.d - 80, "rim", { name: "Sun rim", opacity: 0.22, absolute: { x: 0, y: 0 } });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
+    const brand = k.stack(top, { direction: "HORIZONTAL", width: "HUG", gap: 16, align: "CENTER", name: "Brand" });
+    logoBadge(k, brand, { fill: "accent", size: 34, pad: 11, radius: 14 });
+    k.text(brand, "{{brand.name}}", { style: "Brand 34", color: "text", name: "Name", width: 520 });
+    k.instance(top, "Chip", { Label: "T-minus" }, { name: "T-minus" });
+    const said = k.stack(sheet, { gap: 4, name: "Headline" });
+    k.text(said, "Launching in", { style: "Lead 64", color: "onPaper", name: "Lead" });
+    k.text(said, "3 days.", { style: "Figure 190", color: "text", name: "Figure" });
+    const clock = k.stack(sheet, { direction: "HORIZONTAL", gap: 18, name: "Clock" });
+    for (const [name, figure, label] of TILES) {
+      const live = name === "Seconds";
+      const tile = k.stack(clock, { width: "FILL", gap: 10, align: "CENTER", fill: "tint", radius: 22, clip: true, padding: { top: 22, right: 0, bottom: 20, left: 0 }, stroke: { color: live ? "accent" : "tileEdge", width: live ? 3 : 2, align: "INSIDE" }, effects: [shadow(k, "seam", 0.6, 14, 30)], name: live ? "Seconds tile" : "Tile" });
+      k.rect(tile, 400, 96, "tileLow", { name: "Lower leaf", opacity: 0.55, absolute: { x: 0, y: 76 } });
+      k.rect(tile, 400, 3, "seam", { name: "Leaf seam", absolute: { x: 0, y: 75 } });
+      k.text(tile, figure, { style: "Digits 104", color: "onTint", name });
+      k.text(tile, label, { style: "Unit 20", color: "onTint", name: "Unit" });
+    }
+    const foot = k.stack(sheet, { gap: 18, name: "Foot" });
+    k.text(foot, "{{brand.when}}", { style: "When 32", color: "text", name: "When" });
+    const row = k.stack(foot, { direction: "HORIZONTAL", gap: 22, align: "CENTER", name: "Call row" });
+    const call = k.stack(row, { width: "HUG", name: "Call" });
+    k.instance(call, "Button", { Label: "Get the launch email" }, { name: "Call button" });
+    const list = k.stack(row, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", name: "List row" });
+    k.text(list, "1,284", { style: "List figure 26", color: "text", autoWidth: true, name: "List figure" });
+    k.text(list, "on the list", { style: "List 26", color: "onPaper", autoWidth: true, name: "List words" });
+    furnish(k, sheet);
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 64 }, {
+      portrait: (kit, id) => {
+        kit.patch(id, { padding: { top: 72, right: 64, bottom: 236, left: 64 } });
+        furnish(kit, id);
+      },
+      vertical: (kit, id) => {
+        each(kit, id, "Call row", (n) => kit.patch(n, { layoutMode: "VERTICAL", counterAxisAlignItems: "MIN", itemSpacing: 18, counterAxisSpacing: 18 }));
+        furnish(kit, id);
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  saas_kit_countdown_post_default
+};

package/dist/chunks/chunk-RKBKCKXS.js

@@ -0,0 +1,363 @@
+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 {
+  ticker
+} from "./chunk-O24FY473.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  shadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  box
+} from "./chunk-BNVLVZUT.js";
+import {
+  ease
+} from "./chunk-6DWY3DOQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/themes/april-fools-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var FOOL = {
+  product: "Brisk",
+  /** The fake feature. 1,474 high-density disks of 1.44 MB is 2.1 GB; at 20 g a disk the box weighs 29.5 kg. */
+  disks: 1474,
+  was: 1474,
+  now: 19,
+  cents: ".95",
+  phone: "1-800-NO-FLOPPY",
+  /** The real offer. */
+  offer: "3 months of Pro, free.",
+  code: "NOFLOPPY",
+  ends: "Friday 3 April",
+  url: "brisk.app/real"
+};
+var COLORS = {
+  paper: "#F4EEDC",
+  text: "#17122E",
+  onPaper: "#4A4563",
+  primary: "#1B2BA6",
+  onPrimary: "#FFFFFF",
+  secondary: "#E1261C",
+  onSecondary: "#FFFFFF",
+  accent: "#FFD60A",
+  onAccent: "#17122E",
+  card: "#FFF9E6",
+  onCard: "#17122E",
+  cardMuted: "#5F5A75"
+};
+function foolBrand(k, fields, roles = Object.keys(COLORS)) {
+  k.brand(Object.fromEntries(roles.map((r) => [r, COLORS[r]])), fields);
+  k.palette({ cardShade: "#D8CCA4", cardTop: "#FFFDF5", disk: "#1E2030", diskEdge: "#383B52", metal: "#CBD0DA", metalShade: "#8D94A6", shadow: "#050830" });
+}
+var r3 = (n) => Math.round(n * 1e3) / 1e3;
+function oval(cx, cy, rx, ry, n = 48) {
+  return { closed: true, points: Array.from({ length: n }, (_, i) => {
+    const a = i / n * Math.PI * 2;
+    return { x: r3(cx + Math.cos(a) * rx), y: r3(cy + Math.sin(a) * ry) };
+  }) };
+}
+function roundRect(x, y, w, h, r, cut = 0) {
+  const pts = [];
+  const arc = (cx, cy, from) => {
+    for (let i = 0; i <= 5; i++) {
+      const a = (from + i * 18) * Math.PI / 180;
+      pts.push({ x: r3(cx + Math.cos(a) * r), y: r3(cy + Math.sin(a) * r) });
+    }
+  };
+  arc(x + r, y + r, 180);
+  if (cut) pts.push({ x: x + w - cut, y }, { x: x + w, y: y + cut });
+  else arc(x + w - r, y + r, 270);
+  arc(x + w - r, y + h - r, 0);
+  arc(x + r, y + h - r, 90);
+  return { closed: true, points: pts };
+}
+function burstPath(cx, cy, R, r, spikes, phase = 0) {
+  return { closed: true, points: Array.from({ length: spikes * 2 }, (_, i) => {
+    const a = (i / (spikes * 2) * 2 + phase) * Math.PI, d = i % 2 ? r : R;
+    return { x: r3(cx + Math.cos(a) * d), y: r3(cy + Math.sin(a) * d) };
+  }) };
+}
+var studioShadow = (k, u = 1, strength = 0.45) => [
+  shadow(k, "shadow", strength, Math.round(18 * u), Math.round(40 * u)),
+  shadow(k, "shadow", strength * 0.7, Math.round(3 * u), Math.round(6 * u))
+];
+function rays(k, parent, o) {
+  const n = o.n ?? 14, R = o.r;
+  const paths = Array.from({ length: n }, (_, i) => {
+    const a0 = i / n * Math.PI * 2, a1 = a0 + Math.PI / n;
+    return { closed: true, points: [{ x: R, y: R }, { x: r3(R + Math.cos(a0) * R), y: r3(R + Math.sin(a0) * R) }, { x: r3(R + Math.cos(a1) * R), y: r3(R + Math.sin(a1) * R) }] };
+  });
+  const id = k.vector(parent, R * 2, R * 2, paths, k.tint(o.ink, o.opacity ?? 0.08), { name: o.name ?? "Rays", absolute: { x: o.cx - R, y: o.cy - R } });
+  if (o.loopMs) k.behave(id, "rotation", [{ kind: "spin", rate: 360 / n * 1e3 / o.loopMs }]);
+  return id;
+}
+function placeRays(k, root, o) {
+  for (const id of k.named(root, o.name ?? "Rays")) k.patch(id, { x: o.cx - o.r, y: o.cy - o.r, width: o.r * 2, height: o.r * 2 });
+}
+function halftone(k, parent, o) {
+  const step = o.step ?? 26, cells = Math.floor(o.size / step);
+  const paths = [];
+  for (let j = 0; j < cells; j++) for (let i = 0; i < cells - j; i++) {
+    const far = (i + j) / cells;
+    const d = r3(step * 0.46 * (1 - far));
+    if (d < 1.2) continue;
+    const cx = (i + 0.5 + j % 2 * 0.5) * step, cy = (j + 0.5) * step;
+    const px = o.dx === 1 ? cx : o.size - cx, py = o.dy === 1 ? cy : o.size - cy;
+    paths.push({ closed: true, points: [{ x: px, y: py - d }, { x: px + d, y: py }, { x: px, y: py + d }, { x: px - d, y: py }] });
+  }
+  return k.vector(parent, o.size, o.size, paths, k.tint(o.ink, o.opacity ?? 0.14), { name: o.name ?? "Halftone", absolute: { x: o.dx === 1 ? o.x : o.x - o.size, y: o.dy === 1 ? o.y : o.y - o.size } });
+}
+function glint(k, parent, o) {
+  const R = o.size / 2, w = R * 0.16;
+  const pts = [{ x: R, y: 0 }, { x: R + w, y: R - w }, { x: R * 2, y: R }, { x: R + w, y: R + w }, { x: R, y: R * 2 }, { x: R - w, y: R + w }, { x: 0, y: R }, { x: R - w, y: R - w }];
+  const id = k.vector(parent, o.size, o.size, [{ closed: true, points: pts }], o.color, { name: o.name ?? "Glint", absolute: { x: o.cx - R, y: o.cy - R } });
+  if (o.loopMs) for (const axis of ["scaleX", "scaleY"]) k.behave(id, axis, [{ kind: "sine", amp: 0.4, freq: (o.cycles ?? 2) * 1e3 / o.loopMs, phase: o.phase ?? 0 }]);
+  return id;
+}
+function disk(k, parent, o) {
+  const s = o.size;
+  const f = k.frame(parent, { x: o.x, y: o.y, width: s, height: s }, { name: o.name ?? "Floppy disk", effects: studioShadow(k, (o.shadow ?? 1) * (s / 300), 0.4) });
+  k.vector(f, s, s, [roundRect(0, 0, s, s, s * 0.035, s * 0.085)], "disk", { name: "Plastic", absolute: { x: 0, y: 0 } });
+  k.vector(f, s, s, [
+    box(s * 0.17, 0, s * 0.63, s * 0.345),
+    { closed: true, points: [{ x: s * 0.06, y: s * 0.1 }, { x: s * 0.1, y: s * 0.045 }, { x: s * 0.14, y: s * 0.1 }] },
+    box(s * 0.035, s * 0.9, s * 0.045, s * 0.06),
+    box(s * 0.92, s * 0.9, s * 0.045, s * 0.06)
+  ], "diskEdge", { name: "Recess", absolute: { x: 0, y: 0 } });
+  k.vector(f, s, s, [roundRect(s * 0.3, 0, s * 0.47, s * 0.32, s * 0.012)], "metal", { name: "Shutter", absolute: { x: 0, y: 0 } });
+  k.vector(f, s, s, [box(s * 0.3, s * 0.262, s * 0.47, s * 0.014), box(s * 0.3, s * 0.05, s * 0.47, s * 8e-3)], "metalShade", { name: "Shutter lines", absolute: { x: 0, y: 0 } });
+  k.vector(f, s, s, [roundRect(s * 0.6, s * 0.05, s * 0.1, s * 0.2, s * 0.01)], "disk", { name: "Window", absolute: { x: 0, y: 0 } });
+  const lx = s * 0.1, ly = s * 0.43, lw = s * 0.8, lh = s * 0.57;
+  const label = k.stack(f, { width: r3(lw), height: r3(lh), fill: "card", clip: true, padding: { top: r3(s * 0.12), right: r3(s * 0.05), bottom: 0, left: r3(s * 0.05) }, gap: r3(s * 0.012), absolute: { x: r3(lx), y: r3(ly) }, name: "Label" });
+  k.rect(label, r3(lw), r3(s * 0.075), o.stripe ?? "secondary", { name: "Label stripe", absolute: { x: 0, y: 0 } });
+  const rules = [];
+  for (let i = 0; i < 4; i++) rules.push(box(s * 0.05, s * 0.2 + i * s * 0.095, lw - s * 0.1, Math.max(1, s * 6e-3)));
+  k.vector(label, r3(lw), r3(lh), rules, k.tint("cardMuted", 0.22), { name: "Label rules", absolute: { x: 0, y: 0 } });
+  if (o.title && o.styles) k.text(label, o.title, { style: o.styles.title, color: "onCard", name: "Disk title" });
+  if (o.note && o.styles) k.text(label, o.note, { style: o.styles.note, color: "onCard", name: "Disk note" });
+  if (o.rotation) k.patch(f, { rotation: o.rotation });
+  return f;
+}
+function stageStyles(k, o = {}) {
+  k.textStyle("Box brand 30", { size: 30, fontWeight: 900, letterSpacing: -0.6, lineHeight: 36 });
+  k.textStyle("Box title 46", { ...SERIF, size: 46, fontWeight: 900, fontStyle: "italic", letterSpacing: -1.2, lineHeight: 46 });
+  k.textStyle("Box spec 16", { ...MONO, size: 16, fontWeight: 700, lineHeight: 22 });
+  k.textStyle("Box strip 16", { size: 16, fontWeight: 800, letterSpacing: 0.8, lineHeight: 20 });
+  k.textStyle("Disk title 19", { size: 19, fontWeight: 900, letterSpacing: -0.3, lineHeight: 22 });
+  k.textStyle("Disk note 16", { ...MONO, size: 16, fontWeight: 700, letterSpacing: -0.4, lineHeight: 20 });
+  k.textStyle("Burst was 24", { ...MONO, size: 24, fontWeight: 800, lineHeight: 28, textAlign: "CENTER" });
+  k.textStyle("Burst now 16", { size: 16, fontWeight: 900, letterSpacing: 2.4, lineHeight: 18, textAlign: "CENTER" });
+  k.textStyle("Burst price 92", { size: 92, fontWeight: 900, fontStyle: "italic", letterSpacing: -4.5, lineHeight: 88, textAlign: "CENTER", fontFeatures: { tnum: 1 } });
+  k.textStyle("Burst note 16", { size: 16, fontWeight: 800, letterSpacing: 0.6, lineHeight: 18, textAlign: "CENTER" });
+  if (o.banner !== false) k.textStyle("Banner 50", { size: 50, fontWeight: 900, fontStyle: "italic", letterSpacing: -1.4, lineHeight: 54 });
+  k.textStyle("Seal 22", { size: 22, fontWeight: 900, letterSpacing: 0.4, lineHeight: 24, textAlign: "CENTER" });
+  k.textStyle("Seal small 16", { ...MONO, size: 16, fontWeight: 800, letterSpacing: 1, lineHeight: 20, textAlign: "CENTER" });
+}
+var STAGE = { w: 900, h: 900 };
+function stage(k, parent, at, o) {
+  const st = k.frame(parent, { x: at.x, y: at.y, width: STAGE.w, height: STAGE.h }, { name: o.name ?? "Stage" });
+  const beam = (fromX, a, b) => ({ closed: true, points: [{ x: fromX - 18, y: 0 }, { x: fromX + 18, y: 0 }, { x: b, y: 1290 }, { x: a, y: 1290 }] });
+  k.vector(st, 1300, 1300, [beam(40, 300, 900)], [k.gradient({ from: "onPrimary", to: "onPrimary", fromOpacity: 0.26, toOpacity: 0.02, angle: 90 })], { name: "Beam left", absolute: { x: -200, y: -500 } });
+  k.vector(st, 1300, 1300, [beam(1260, 400, 1e3)], [k.gradient({ from: "onPrimary", to: "onPrimary", fromOpacity: 0.26, toOpacity: 0.02, angle: 90 })], { name: "Beam right", absolute: { x: -200, y: -500 } });
+  k.vector(st, 1300, 60, [{ closed: true, points: [{ x: 0, y: 0 }, { x: 80, y: 0 }, { x: 66, y: 44 }, { x: 14, y: 44 }] }, { closed: true, points: [{ x: 1220, y: 0 }, { x: 1300, y: 0 }, { x: 1286, y: 44 }, { x: 1234, y: 44 }] }], "shadow", { name: "Lamps", absolute: { x: -200, y: -540 } });
+  k.ellipse(st, 820, [k.gradient({ kind: "RADIAL", from: "accent", to: "accent", fromOpacity: 0.42, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Spotlight", absolute: { x: 40, y: 20 } });
+  k.vector(st, 900, 900, [oval(450, 842, 400, 58), box(50, 772, 800, 70)], "shadow", { name: "Plinth side", absolute: { x: 0, y: 0 }, opacity: 0.55 });
+  k.vector(st, 900, 900, [oval(450, 772, 400, 58)], k.tint("onPrimary", 0.92), { name: "Plinth top", absolute: { x: 0, y: 0 } });
+  k.vector(st, 900, 900, [oval(450, 772, 400, 58)], [k.gradient({ from: "primary", to: "primary", fromOpacity: 0.55, toOpacity: 0.05, angle: 90 })], { name: "Plinth shade", absolute: { x: 0, y: 0 } });
+  k.vector(st, 900, 900, [oval(470, 776, 300, 34)], "shadow", { name: "Box shadow", absolute: { x: 0, y: 0 }, opacity: 0.4 });
+  disk(k, st, { x: 668, y: 512, size: 236, rotation: 14, title: "{{brand.name}} 4.0", note: "DISK 2 OF 1,474", styles: { title: "Disk title 19", note: "Disk note 16" }, stripe: "primary", name: "Disk right" });
+  const BX = 306, BY = 196, BW = 360, BH = 570, DX = 86, DY = -46;
+  const box2 = k.frame(st, { x: BX, y: BY + DY, width: BW + DX, height: BH - DY }, { name: "Box", effects: studioShadow(k, 1, 0.35) });
+  k.vector(box2, BW + DX, BH - DY, [{ closed: true, points: [{ x: BW, y: -DY }, { x: BW + DX, y: 0 }, { x: BW + DX, y: BH }, { x: BW, y: BH - DY }] }], "cardShade", { name: "Box side", absolute: { x: 0, y: 0 } });
+  const slant = (x0, x1, y0, y1) => ({ closed: true, points: [{ x: BW + x0, y: -DY + x0 / DX * DY + y0 }, { x: BW + x1, y: -DY + x1 / DX * DY + y0 }, { x: BW + x1, y: -DY + x1 / DX * DY + y1 }, { x: BW + x0, y: -DY + x0 / DX * DY + y1 }] });
+  k.vector(box2, BW + DX, BH - DY, [slant(0, DX, 0, 92)], "primary", { name: "Box side band", absolute: { x: 0, y: 0 } });
+  k.vector(box2, BW + DX, BH - DY, [slant(0, DX, 92, BH)], [k.gradient({ from: "shadow", to: "shadow", fromOpacity: 0, toOpacity: 0.34, angle: 0 })], { name: "Box side shade", absolute: { x: 0, y: 0 } });
+  const bars = [];
+  [0, 5, 8, 14, 17, 24, 27, 31, 38, 42, 45, 52].forEach((x, i) => bars.push(slant(16 + x, 16 + x + (i % 3 === 0 ? 3 : 2), BH - 110, BH - 40)));
+  k.vector(box2, BW + DX, BH - DY, bars, k.tint("onCard", 0.8), { name: "Box side barcode", absolute: { x: 0, y: 0 } });
+  k.vector(box2, BW + DX, BH - DY, [{ closed: true, points: [{ x: 0, y: -DY }, { x: DX, y: 0 }, { x: BW + DX, y: 0 }, { x: BW, y: -DY }] }], "cardTop", { name: "Box lid", absolute: { x: 0, y: 0 } });
+  const front = k.stack(box2, { width: BW, height: BH, fill: "card", clip: true, absolute: { x: 0, y: -DY }, name: "Box front" });
+  const band = k.stack(front, { direction: "HORIZONTAL", fill: "primary", gap: 12, align: "CENTER", padding: { top: 22, right: 24, bottom: 22, left: 24 }, name: "Box band" });
+  k.logo(band, 36, 36);
+  k.text(band, "{{brand.name}}", { style: "Box brand 30", color: "onPrimary", name: "Box brand" });
+  const art = k.stack(front, { height: 232, clip: true, name: "Box art" });
+  k.vector(art, 360, 232, [burstPath(180, 122, 150, 104, 18, 0.03)], "accent", { name: "Box art sun", absolute: { x: 0, y: 0 } });
+  disk(k, art, { x: 105, y: 46, size: 150, rotation: -9, shadow: 0.6, name: "Box art disk" });
+  const words = k.stack(front, { height: "FILL", padding: { top: 6, right: 24, bottom: 16, left: 24 }, gap: 10, justify: "SPACE_BETWEEN", name: "Box words" });
+  k.text(words, o.title, { style: "Box title 46", color: "onCard", name: "Box title" });
+  k.text(words, "1,474 \xD7 3.5\u2033 HD DISKS \xB7 2.1 GB\nIBM FORMATTED \xB7 29.5 KG", { style: "Box spec 16", color: "cardMuted", name: "Box spec" });
+  const strip = k.stack(front, { fill: "secondary", padding: { top: 12, right: 24, bottom: 12, left: 24 }, name: "Box strip" });
+  k.text(strip, "V4.0 \xB7 FOR HOME AND OFFICE", { style: "Box strip 16", color: "onSecondary", name: "Box strip words" });
+  disk(k, st, { x: 6, y: 500, size: 250, rotation: -13, title: "{{brand.name}} 4.0", note: "DISK 1,474 / 1,474", styles: { title: "Disk title 19", note: "Disk note 16" }, stripe: "accent", name: "Disk left" });
+  disk(k, st, { x: 78, y: 592, size: 212, rotation: 8, title: "{{brand.name}} 4.0", note: "DISK 1 OF 1,474", styles: { title: "Disk title 19", note: "Disk note 16" }, name: "Disk front" });
+  const seal = k.frame(st, { x: 84, y: 250, width: 196, height: 196 }, { name: "Seal" });
+  const sealIn = k.frame(seal, { x: 0, y: 0, width: 196, height: 196 }, { name: "Seal face", effects: studioShadow(k, 0.5, 0.4) });
+  k.vector(sealIn, 196, 196, [burstPath(98, 98, 98, 88, 28)], "card", { name: "Seal edge", absolute: { x: 0, y: 0 } });
+  k.vector(sealIn, 196, 196, [oval(98, 98, 78, 78, 56)], "card", { name: "Seal ring", absolute: { x: 0, y: 0 }, stroke: { color: "onCard", width: 2.5 } });
+  const sealWords = k.stack(sealIn, { width: 196, height: 196, align: "CENTER", justify: "CENTER", gap: 4, absolute: { x: 0, y: 0 }, name: "Seal words" });
+  k.text(sealWords, "AS SEEN", { style: "Seal small 16", color: "cardMuted", name: "Seal top" });
+  k.text(sealWords, "at 2:47\nin the\nmorning", { style: "Seal 22", color: "onCard", name: "Seal middle" });
+  k.patch(sealIn, { rotation: -12 });
+  const D = 400;
+  const burst = k.frame(st, { x: 512, y: 6, width: D, height: D }, { name: "Price burst" });
+  const face = k.frame(burst, { x: 0, y: 0, width: D, height: D }, { name: "Burst face" });
+  k.vector(face, D, D, [burstPath(D / 2 + 9, D / 2 + 11, D / 2 - 12, D / 2 - 46, 20, 0.05)], "secondary", { name: "Burst back", absolute: { x: 0, y: 0 }, effects: studioShadow(k, 0.8, 0.4) });
+  k.vector(face, D, D, [burstPath(D / 2, D / 2, D / 2 - 12, D / 2 - 46, 20)], "accent", { name: "Burst front", absolute: { x: 0, y: 0 } });
+  const tag = k.stack(face, { width: D, height: D, align: "CENTER", justify: "CENTER", gap: 2, absolute: { x: 0, y: 0 }, name: "Burst words" });
+  const was = k.stack(tag, { width: "HUG", name: "Was" });
+  const wasText = k.text(was, `WAS $${FOOL.was.toLocaleString("en-US")}`, { style: "Burst was 24", color: "onAccent", autoWidth: true, name: "Was price" });
+  k.stack(was, { width: Math.round(k.node(wasText).width) + 16, height: 5, fill: "secondary", clip: true, absolute: { x: -8, y: 12 }, name: "Was price strike" });
+  k.text(tag, "NOW ONLY", { style: "Burst now 16", color: "onAccent", autoWidth: true, name: "Now only" });
+  k.text(tag, `$${FOOL.now}${FOOL.cents}`, { style: "Burst price 92", color: "onAccent", autoWidth: true, name: "Price figure" });
+  k.text(tag, "PLUS SHIPPING AND\nA LOT OF HANDLING", { style: "Burst note 16", color: "onAccent", autoWidth: true, name: "Price note" });
+  k.patch(face, { rotation: 9 });
+  if (o.banner !== null) {
+    const banner = k.frame(st, { x: 150, y: 786, width: 640, height: 86 }, { name: "Banner" });
+    const tape = k.stack(banner, { direction: "HORIZONTAL", width: 640, height: 86, fill: "secondary", align: "CENTER", justify: "CENTER", absolute: { x: 0, y: 0 }, effects: studioShadow(k, 0.6, 0.5), name: "Banner tape" });
+    k.text(tape, o.banner ?? "But wait, there\u2019s more!", { style: "Banner 50", color: "onSecondary", autoWidth: true, name: "Banner words" });
+    k.patch(tape, { rotation: -3.5 });
+  }
+  const G = [[250, 160, 74, "onPrimary"], [476, 96, 44, "accent"], [868, 456, 60, "onPrimary"], [40, 468, 40, "accent"], [770, 480, 34, "onPrimary"]];
+  G.forEach(([cx, cy, size, color], i) => glint(k, st, { cx, cy, size, color, loopMs: o.loopMs, cycles: 2 + i % 2, phase: i * 0.23 }));
+  if (at.scale !== void 0) placeStage(k, parent, { x: at.x, y: at.y, scale: at.scale }, o.name);
+  return st;
+}
+function placeStage(k, root, at, name = "Stage") {
+  for (const id of k.named(root, name)) k.patch(id, { x: at.x, y: at.y, width: STAGE.w, height: STAGE.h, anchorX: 0, anchorY: 0, scaleX: at.scale, scaleY: at.scale });
+}
+function coupon(k, parent, o) {
+  const outer = k.stack(parent, { width: o.width ?? "FILL", fill: "card", radius: Math.round(o.pad * 0.3), padding: Math.round(o.pad * 0.32), effects: studioShadow(k, o.shadow ?? 1, 0.3), name: o.name ?? "Coupon" });
+  return k.stack(outer, { padding: o.pad * 0.68, gap: o.gap, radius: Math.round(o.pad * 0.16), stroke: { color: "cardMuted", width: Math.max(1.5, o.pad / 18) }, name: "Coupon cut line" });
+}
+function codeRow(k, parent, o) {
+  const [v, h] = o.pad ?? [10, 22];
+  if (!k.hasComponent("Promo code")) pill(k, "Promo code", { fill: o.fill ?? "primary", ink: o.ink ?? "onPrimary", style: o.codeStyle, label: FOOL.code, pad: [v, h], radius: 6 });
+  const row = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", gap: Math.round(h * 0.7), align: "CENTER", name: o.name ?? "Code row" });
+  k.text(row, o.label ?? "USE CODE", { style: o.labelStyle, color: o.labelInk ?? "cardMuted", autoWidth: true, name: "Code label" });
+  k.instance(row, "Promo code", { Label: FOOL.code }, { name: "Code chip" });
+  return row;
+}
+function flip(k, front, back, at, o = {}) {
+  const h = o.half ?? 200, b = o.backAt;
+  const close = ease.named("cubic", "in"), open = ease.back(1.4);
+  k.patch(front, { anchorX: 0.5, anchorY: 0.5 });
+  k.patch(back, { anchorX: 0.5, anchorY: 0.5 });
+  k.animate(front, "scaleX", [{ t: 0, v: 1, ease: ease.hold }, { t: at, v: 1, ease: close }, { t: at + h, v: 0, ...b !== void 0 ? { ease: ease.hold } : {} }, ...b !== void 0 ? [{ t: b + h, v: 0, ease: open }, { t: b + h * 2 + 80, v: 1 }] : []]);
+  k.animate(front, "opacity", [{ t: 0, v: 1, ease: ease.hold }, { t: at + h, v: 0, ...b !== void 0 ? { ease: ease.hold } : {} }, ...b !== void 0 ? [{ t: b + h, v: 1 }] : []]);
+  k.animate(back, "scaleX", [{ t: 0, v: 0, ease: ease.hold }, { t: at + h, v: 0, ease: open }, { t: at + h * 2 + 80, v: 1, ...b !== void 0 ? { ease: ease.hold } : {} }, ...b !== void 0 ? [{ t: b, v: 1, ease: close }, { t: b + h, v: 0 }] : []]);
+}
+var FACE_W = 1080;
+var FLOOR = [{ x: 30, y: -350, size: 320, rotation: -10, stripe: "accent" }, { x: 690, y: -372, size: 340, rotation: 11, stripe: "primary" }, { x: 368, y: -292, size: 300, rotation: 5, stripe: "secondary" }];
+function floorDisks(k, face, h, name) {
+  for (const d of FLOOR) disk(k, face, { x: d.x, y: h + d.y, size: d.size, rotation: d.rotation, stripe: d.stripe, name });
+}
+function faceStyles(k) {
+  k.textStyle("Bug 22", { ...MONO, size: 22, fontWeight: 800, letterSpacing: 1.2, lineHeight: 28 });
+  k.textStyle("Dateline 24", { ...MONO, size: 24, fontWeight: 800, letterSpacing: 1.2, lineHeight: 30 });
+  k.textStyle("Fools 210", { ...SERIF, size: 210, fontWeight: 900, fontStyle: "italic", letterSpacing: -9, lineHeight: 176 });
+  k.textStyle("Fools 150", { ...SERIF, size: 150, fontWeight: 900, fontStyle: "italic", letterSpacing: -6, lineHeight: 140 });
+  k.textStyle("Truth 44", { size: 44, fontWeight: 800, letterSpacing: -1, lineHeight: 52 });
+  k.textStyle("Offer 76", { size: 76, fontWeight: 900, letterSpacing: -3, lineHeight: 76 });
+  k.textStyle("Code label 24", { ...MONO, size: 24, fontWeight: 800, letterSpacing: 1, lineHeight: 30 });
+  k.textStyle("Code 40", { ...MONO, size: 40, fontWeight: 800, letterSpacing: 1, lineHeight: 46 });
+  k.textStyle("Terms 24", { ...MONO, size: 24, fontWeight: 500, lineHeight: 32 });
+}
+function pitchFace(k, sheet, p, o) {
+  const W = FACE_W;
+  const pitch = k.stack(sheet, { width: W, height: p.h, fill: "primary", clip: true, padding: p.pad, gap: o.gap ?? 16, absolute: { x: 0, y: 0 }, name: "Pitch" });
+  rays(k, pitch, { cx: W / 2, cy: p.rays, r: 1300, ink: "onPrimary", opacity: 0.07, loopMs: o.loopMs, name: "Studio rays" });
+  k.rect(pitch, W, 640, [k.gradient({ from: "shadow", to: "shadow", fromOpacity: 0, toOpacity: 0.72, angle: 90 })], { name: "Floor", absolute: { x: 0, y: p.h - 640 } });
+  halftone(k, pitch, { x: W, y: 0, dx: -1, dy: 1, size: 420, ink: "onPrimary", name: "Halftone top" });
+  halftone(k, pitch, { x: 0, y: p.h, dx: 1, dy: -1, size: 420, ink: "onPrimary", name: "Halftone foot" });
+  floorDisks(k, pitch, p.h, "Floor disk");
+  const bug = k.stack(pitch, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Bug" });
+  const live = k.stack(bug, { direction: "HORIZONTAL", width: "HUG", fill: "secondary", radius: 4, gap: 8, align: "CENTER", padding: { top: 4, right: 12, bottom: 4, left: 10 }, name: "Live" });
+  k.ellipse(live, 12, "onSecondary", { name: "Live dot" });
+  k.text(live, "LIVE", { style: "Bug 22", color: "onSecondary", autoWidth: true, name: "Live word" });
+  k.text(bug, "PAID PROGRAMMING \xB7 2:47 AM", { style: "Bug 22", color: "onPrimary", name: "Bug words" });
+  return pitch;
+}
+function lowerThird(k, pitch, p, o) {
+  const W = FACE_W;
+  k.textStyle("Third 30", { size: 30, fontWeight: 900, letterSpacing: 0.4, lineHeight: 36 });
+  k.textStyle("Third phone 30", { ...MONO, size: 30, fontWeight: 800, lineHeight: 36 });
+  k.textStyle("Ticker 24", { ...MONO, size: 24, fontWeight: 700, lineHeight: 30 });
+  const third = k.frame(pitch, { x: 0, y: p.third ?? 0, width: W, height: 88 }, { name: "Lower third", effects: studioShadow(k, 0.6, 0.5) });
+  const call = k.stack(third, { direction: "HORIZONTAL", width: 300, height: 88, fill: "secondary", align: "CENTER", justify: "CENTER", absolute: { x: 0, y: 0 }, name: "Call now" });
+  k.text(call, "CALL NOW", { style: "Third 30", color: "onSecondary", autoWidth: true, name: "Call now words" });
+  const phone = k.stack(third, { direction: "HORIZONTAL", width: 340, height: 88, fill: "accent", align: "CENTER", justify: "CENTER", absolute: { x: 300, y: 0 }, name: "Phone" });
+  k.text(phone, FOOL.phone, { style: "Third phone 30", color: "onAccent", autoWidth: true, name: "Phone number" });
+  const crawl = k.frame(third, { x: 640, y: 0, width: W - 640, height: 88 }, { name: "Crawl", clip: true });
+  ticker(k, crawl, { label: "OPERATORS ARE STANDING BY \xB7", item: 440, height: 88, fill: "card", ink: "onCard", style: "Ticker 24", rate: o.rate });
+}
+function realFace(k, sheet, p, o) {
+  const W = FACE_W;
+  if (o.button) k.textStyle("Claim 32", { size: 32, fontWeight: 800, lineHeight: 40 });
+  if (o.button) pill(k, "Claim button", { fill: "primary", ink: "onPrimary", style: "Claim 32", label: o.button, pad: [20, 40], radius: 8 });
+  const real = k.stack(sheet, { width: W, height: p.h, fill: "accent", clip: true, padding: p.pad, gap: o.gap ?? 26, justify: "CENTER", absolute: { x: 0, y: 0 }, name: "Real" });
+  rays(k, real, { cx: W / 2, cy: Math.round(p.h * 0.36), r: 1300, ink: "onAccent", opacity: 0.06, loopMs: o.loopMs, name: "Reveal rays" });
+  halftone(k, real, { x: W, y: 0, dx: -1, dy: 1, size: 420, ink: "onAccent", opacity: 0.16, name: "Halftone top" });
+  halftone(k, real, { x: 0, y: p.h, dx: 1, dy: -1, size: 420, ink: "onAccent", opacity: 0.16, name: "Halftone foot" });
+  floorDisks(k, real, p.h, "Gag disk");
+  k.text(real, "1 APRIL \xB7 A WORD FROM {{brand.name}}", { style: "Dateline 24", color: "onAccent", name: "Dateline" });
+  k.text(real, "April Fools.", { style: "Fools 210", color: "onAccent", name: "Fools" });
+  k.text(real, "There is no floppy edition.\nThis part is real:", { style: "Truth 44", color: "onAccent", name: "Truth" });
+  const offer = coupon(k, real, { pad: 44, gap: 20 });
+  k.text(offer, FOOL.offer, { style: "Offer 76", color: "onCard", name: "Offer" });
+  codeRow(k, offer, { labelStyle: "Code label 24", codeStyle: "Code 40" });
+  k.text(offer, `${FOOL.url} \xB7 ends ${FOOL.ends}`, { style: "Terms 24", color: "cardMuted", name: "Terms" });
+  if (o.button) k.instance(real, "Claim button", { Label: o.button }, { name: "Claim" });
+  return real;
+}
+function arrangeFaces(k, id, p) {
+  const W = FACE_W;
+  for (const name of ["Pitch", "Real"]) for (const n of k.named(id, name)) k.patch(n, { x: 0, y: 0, width: W, height: p.h, padding: p.pad });
+  placeStage(k, id, p.stage);
+  placeRays(k, id, { cx: W / 2, cy: p.rays, r: 1300, name: "Studio rays" });
+  placeRays(k, id, { cx: W / 2, cy: Math.round(p.h * 0.36), r: 1300, name: "Reveal rays" });
+  for (const n of k.named(id, "Floor")) k.patch(n, { x: 0, y: p.h - 640, width: W, height: 640 });
+  for (const n of k.named(id, "Halftone top")) k.patch(n, { x: W - 420, y: 0, width: 420, height: 420 });
+  for (const n of k.named(id, "Halftone foot")) k.patch(n, { x: 0, y: p.h - 420, width: 420, height: 420 });
+  if (p.caption !== void 0) for (const n of k.named(id, "Caption tape")) k.patch(n, { x: p.pad.left, y: p.caption, width: W - p.pad.left - p.pad.right });
+  for (const n of k.named(id, "Lower third")) k.patch(n, p.third === null ? { visible: false } : { x: 0, y: p.third, width: W, height: 88, visible: true });
+  for (const name of ["Floor disk", "Gag disk"]) k.named(id, name).forEach((n, i) => {
+    const d = FLOOR[i];
+    k.patch(n, p.gag ? { x: d.x, y: p.h + d.y, width: d.size, height: d.size, visible: true } : { visible: false });
+  });
+}
+
+export {
+  FOOL,
+  foolBrand,
+  studioShadow,
+  rays,
+  placeRays,
+  halftone,
+  glint,
+  disk,
+  stageStyles,
+  STAGE,
+  stage,
+  placeStage,
+  coupon,
+  codeRow,
+  flip,
+  FACE_W,
+  faceStyles,
+  pitchFace,
+  lowerThird,
+  realFace,
+  arrangeFaces
+};