@popcraft/kit 0.32.0 → 0.33.0

package/dist/chunks/chunk-KYGHSBCC.js

@@ -0,0 +1,414 @@
+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,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  hz
+} from "./chunk-GLFOEPRY.js";
+import {
+  circle3,
+  pt3,
+  r3
+} from "./chunk-6RCDZU4R.js";
+import {
+  ease
+} from "./chunk-AY2VBUGS.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/spring-bloom-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function bloomBrand(k, fields = {}) {
+  k.brand(
+    { paper: "#E3F3FA", text: "#123A29", onPaper: "#345646", accent: "#C2255F", primary: "#C2255F", onPrimary: "#FFFFFF", card: "#FFFDF4", onCard: "#123A29" },
+    { name: "Trowel", site: "trowel.example", ...fields }
+  );
+  k.palette({
+    sun: "#FFD23F",
+    sunDeep: "#FFB703",
+    butter: "#FFE98A",
+    cloud: "#FFFFFF",
+    hillFar: "#C4EAB7",
+    hillMid: "#94D58A",
+    hillNear: "#62BC6B",
+    hillLine: "#3E9B55",
+    blossom: "#FFA9C8",
+    blossomDeep: "#F2669A",
+    trunk: "#7A5236",
+    soil: "#6E4832",
+    soilMid: "#5A3826",
+    soilDeep: "#452A1C",
+    soilLight: "#946A4C",
+    pebble: "#C2B8AA",
+    bulb: "#EBCB92",
+    bulbShade: "#C4955A",
+    root: "#F4E6C8",
+    worm: "#EFA3A3",
+    stem: "#2E9A52",
+    stemDeep: "#1D7240",
+    leaf: "#4DBB69",
+    pink: "#FF7FAE",
+    pinkDeep: "#E8477E",
+    white: "#FFFFFF",
+    lilac: "#FFD9E8",
+    sky: "#8AD2F5",
+    skyDeep: "#3FA4DD",
+    eye: "#FFC629",
+    eyeShade: "#D98200",
+    ink: "#123A29",
+    packet: "#FFFDF4",
+    wood: "#DDB988",
+    woodShade: "#B88A55",
+    shade: "#123A29"
+  });
+}
+var closed = (points) => ({ closed: true, points });
+var open = (points) => ({ closed: false, points });
+var seeded = (seed) => () => (seed = seed * 16807 % 2147483647) / 2147483647;
+var cut = (u = 1, a = 0.2, lift = 1) => ({ type: "DROP_SHADOW", color: { r: 0.07, g: 0.23, b: 0.16, a }, offset: { x: r3(3 * u * lift), y: r3(6 * u * lift) }, blur: r3(10 * u * lift), spread: 0, visible: true });
+function lens(cx, cy, ang, r0, r1, hw, pow = 1, n = 10) {
+  const dx = Math.cos(ang), dy = Math.sin(ang);
+  const side = (m) => Array.from({ length: n + 1 }, (_, i) => {
+    const t = i / n, d = r0 + (r1 - r0) * t, w = hw * Math.sin(Math.PI * Math.pow(t, pow)) * m;
+    return pt3(cx + dx * d - dy * w, cy + dy * d + dx * w);
+  });
+  return [...side(1), ...side(-1).reverse().slice(1, -1)];
+}
+var FLOWERS = {
+  daisy: { kind: "daisy", petal: "white", petal2: "lilac", eye: "eye" },
+  pinkDaisy: { kind: "daisy", petal: "pink", petal2: "pinkDeep", eye: "eye" },
+  cosmos: { kind: "cosmos", petal: "pink", petal2: "pinkDeep", eye: "eye" },
+  skyCosmos: { kind: "cosmos", petal: "sky", petal2: "skyDeep", eye: "butter" },
+  tulip: { kind: "tulip", petal: "pinkDeep", petal2: "pink" },
+  butterTulip: { kind: "tulip", petal: "sun", petal2: "sunDeep" }
+};
+function bloom(k, parent, f, R, at, name = "Bloom") {
+  const D = R * 2;
+  const id = k.frame(parent, { x: r3(at.x), y: r3(at.y), width: D, height: D }, { name });
+  const whole = { absolute: { x: 0, y: 0 } };
+  const fx = { effects: [cut(R / 80, 0.22)] };
+  const up = -Math.PI / 2;
+  if (f.kind === "tulip") {
+    k.vector(id, D, D, [-0.4, 0.4].map((a) => closed(lens(R, R * 1.92, up + a, 0, R * 1.8, R * 0.44, 0.8))), f.petal2, { name: "Back petals", ...fx, ...whole });
+    k.vector(id, D, D, [closed(lens(R, R * 1.96, up, 0, R * 1.62, R * 0.58, 0.72))], f.petal, { name: "Front petal", ...fx, ...whole });
+    k.vector(id, D, D, [open(Array.from({ length: 7 }, (_, i) => pt3(R * (0.72 - 0.05 * Math.sin(Math.PI * i / 6)), R * (1.5 - i * 0.12))))], "white", { name: "Petal shine", strokeWidth: r3(R * 0.08), opacity: 0.45, ...whole });
+    return id;
+  }
+  const n = f.kind === "daisy" ? 14 : 8;
+  const turn = (i, half = 0) => up + (i + half) * Math.PI * 2 / n;
+  if (f.kind === "daisy") {
+    k.vector(id, D, D, Array.from({ length: n }, (_, i) => closed(lens(R, R, turn(i, 0.5), R * 0.16, R * 0.84, R * 0.12, 1.3, 7))), f.petal2, { name: "Back petals", ...whole });
+    k.vector(id, D, D, Array.from({ length: n }, (_, i) => closed(lens(R, R, turn(i), R * 0.18, R * 0.99, R * 0.135, 1.35, 7))), f.petal, { name: "Petals", ...fx, ...whole });
+  } else {
+    k.vector(id, D, D, Array.from({ length: n }, (_, i) => closed(lens(R, R, turn(i), R * 0.12, R, R * 0.33, 1.9, 9))), f.petal, { name: "Petals", ...fx, ...whole });
+    k.vector(id, D, D, Array.from({ length: n * 3 }, (_, i) => {
+      const a = turn(Math.floor(i / 3)) + (i % 3 - 1) * 0.16;
+      return open([pt3(R + R * 0.26 * Math.cos(a), R + R * 0.26 * Math.sin(a)), pt3(R + R * (i % 3 === 1 ? 0.66 : 0.52) * Math.cos(a), R + R * (i % 3 === 1 ? 0.66 : 0.52) * Math.sin(a))]);
+    }), f.petal2, { name: "Petal veins", strokeWidth: r3(Math.max(1, R * 0.035)), opacity: 0.7, ...whole });
+  }
+  const e = R * (f.kind === "daisy" ? 0.52 : 0.4);
+  k.ellipse(id, r3(e), f.eye ?? "eye", { name: "Eye", absolute: { x: r3(R - e / 2), y: r3(R - e / 2) }, effects: [cut(R / 160, 0.25)] });
+  k.vector(id, D, D, Array.from({ length: 9 }, (_, i) => closed(circle3(R + e * 0.27 * Math.cos(i * 2.4) * (i ? 1 : 0), R + e * 0.27 * Math.sin(i * 2.4) * (i ? 1 : 0), e * 0.06, 6))), "eyeShade", { name: "Eye seeds", opacity: 0.8, ...whole });
+  return id;
+}
+var PLANT_W = 320;
+var UNDER = 190;
+var slotBox = (p, soil) => ({ x: r3(p.x - PLANT_W / 2), y: r3(soil - p.h), width: PLANT_W, height: r3(p.h + UNDER) });
+function plant(k, land2, s, p, i, soil) {
+  const W = PLANT_W, H = p.h, R = p.R, lean = p.lean ?? 0, cx = W / 2;
+  const scale = (p.scale ?? 1) * (s.plantScale ?? 1);
+  const slot = k.frame(land2, slotBox(p, soil), { name: "Plant slot" });
+  k.patch(slot, { anchorX: 0.5, anchorY: r3(H / (H + UNDER)), scaleX: scale, scaleY: scale });
+  const moves = !s.still, grows = moves && p.at !== void 0, at = p.at ?? 0;
+  const from = (v, t0, t1, curve = ease.out("cubic")) => t0 > 0 ? [{ t: 0, v, ease: ease.hold }, { t: t0, v, ease: curve }, { t: t1, v: 1 }] : [{ t: 0, v, ease: curve }, { t: t1, v: 1 }];
+  if (s.under !== false) {
+    const under = k.frame(slot, { x: 0, y: H, width: W, height: UNDER }, { name: "Bulb" });
+    const whole2 = { absolute: { x: 0, y: 0 } };
+    const rnd = seeded(31 + i * 7);
+    const roots = k.vector(under, W, UNDER, Array.from({ length: 7 }, (_, j) => {
+      const x0 = cx + (j - 3) * 7, len = 46 + rnd() * 52, sway = (j - 3) * 9 + (rnd() - 0.5) * 14;
+      return open(Array.from({ length: 7 }, (_2, m) => {
+        const t = m / 6;
+        return pt3(x0 + sway * t + 5 * Math.sin(t * 6 + j), 104 + len * t);
+      }));
+    }), "root", { name: "Roots", strokeWidth: 3, opacity: 0.9, ...whole2 });
+    k.patch(roots, { anchorY: r3(104 / UNDER) });
+    if (grows) k.animate(roots, "scaleY", from(0.15, Math.max(0, at - 200), at + 1300));
+    k.vector(under, W, UNDER, [closed(lens(cx, 12, Math.PI / 2, 0, 100, 43, 1.5, 14))], "bulb", { name: "Bulb body", effects: [cut(1, 0.3)], ...whole2 });
+    k.vector(under, W, UNDER, [-1, 1].map((m) => open(Array.from({ length: 8 }, (_, j) => {
+      const t = j / 7;
+      return pt3(cx + m * 17 * Math.sin(Math.PI * Math.pow(t, 1.4)), 26 + 78 * t);
+    }))), "bulbShade", { name: "Bulb tunic", strokeWidth: 3, opacity: 0.8, ...whole2 });
+    k.vector(under, W, UNDER, [closed(lens(cx - 16, 44, Math.PI / 2 + 0.15, 0, 40, 6, 1.2, 6))], "white", { name: "Bulb shine", opacity: 0.5, ...whole2 });
+  }
+  const id = k.frame(slot, { x: 0, y: 0, width: W, height: H }, { name: "Plant" });
+  k.patch(id, { anchorX: 0.5, anchorY: 1 });
+  const whole = { absolute: { x: 0, y: 0 } };
+  const up = -Math.PI / 2;
+  const tulip = p.flower.kind === "tulip";
+  const top = tulip ? R * 1.8 : R;
+  const stemAt = (t) => ({ x: cx + lean * t * t, y: H + 14 - (H + 14 - top) * t });
+  k.vector(id, W, H, [open(Array.from({ length: 13 }, (_, j) => {
+    const q = stemAt(j / 12);
+    return pt3(q.x, q.y);
+  }))], "stem", { name: "Stem", strokeWidth: 11, ...whole });
+  k.vector(id, W, H, [open(Array.from({ length: 13 }, (_, j) => {
+    const q = stemAt(j / 12);
+    return pt3(q.x - 3, q.y);
+  }))], "leaf", { name: "Stem light", strokeWidth: 3, opacity: 0.7, ...whole });
+  const leafSpecs = tulip ? [{ t: 0, a: up - 0.32, len: H * 0.62, hw: 24 }, { t: 0, a: up + 0.4, len: H * 0.5, hw: 22 }] : [{ t: 0.2, a: up - 0.95, len: R * 1.25, hw: R * 0.3 }, { t: 0.36, a: up + 0.9, len: R * 1.1, hw: R * 0.27 }, { t: 0.56, a: up - 0.8, len: R * 0.8, hw: R * 0.2 }];
+  const leaves = k.vector(id, W, H, leafSpecs.map((l) => {
+    const q = stemAt(l.t);
+    return closed(lens(q.x, q.y, l.a, 0, l.len, l.hw, tulip ? 0.75 : 0.9, 10));
+  }), "leaf", { name: "Leaves", effects: [cut(1, 0.2)], ...whole });
+  const ribs = k.vector(id, W, H, leafSpecs.map((l) => {
+    const q = stemAt(l.t);
+    return open([pt3(q.x, q.y), pt3(q.x + Math.cos(l.a) * l.len * 0.82, q.y + Math.sin(l.a) * l.len * 0.82)]);
+  }), "stemDeep", { name: "Leaf ribs", strokeWidth: 2.5, opacity: 0.55, ...whole });
+  const tip = stemAt(1);
+  const head = bloom(k, id, p.flower, R, { x: tip.x - R, y: tip.y - top });
+  if (grows) {
+    k.animate(id, "scaleY", from(0, at, at + 1e3));
+    k.animate(id, "scaleX", from(0.4, at, at + 1e3));
+    for (const leaf of [leaves, ribs]) {
+      k.patch(leaf, { anchorX: 0.5, anchorY: 1 });
+      for (const axis of ["scaleX", "scaleY"]) k.animate(leaf, axis, from(0, at + 350, at + 1150));
+    }
+    for (const axis of ["scaleX", "scaleY"]) k.animate(head, axis, from(0.12, at + 650, at + 1500, ease.back(2.4)));
+    if (!tulip) k.animate(head, "rotation", [{ t: 0, v: -80, ease: ease.hold }, { t: at + 650, v: -80, ease: ease.out("cubic") }, { t: at + 1500, v: 0 }]);
+  }
+  if (moves) k.behave(id, "rotation", [{ kind: "sine", amp: tulip ? 1.4 : 2, freq: hz(Math.max(1, Math.round(s.loopMs / 3200)), s.loopMs), phase: i * 0.27 % 1 }]);
+  return slot;
+}
+var PACKET = { w: 240, h: 360 };
+function packetStyles(k, o = {}) {
+  k.textStyle("Packet title", { ...SERIF, size: 40, fontWeight: 800, letterSpacing: -0.9, lineHeight: 42 });
+  if (o.detail) {
+    k.textStyle("Packet latin", { ...SERIF, size: 22, fontStyle: "italic", fontWeight: 500, lineHeight: 25 });
+    k.textStyle("Packet sow", { ...MONO, size: 22, fontWeight: 700, letterSpacing: -0.6, lineHeight: 26 });
+  }
+  if (o.relics) {
+    const z = o.relics === true ? 17 : o.relics;
+    k.textStyle("Relic", { ...MONO, size: z, fontWeight: 700, lineHeight: Math.round(z * 1.3) });
+  }
+}
+function packet(k, parent, p, o) {
+  const { w, h } = PACKET, stake = o.stake ?? 0;
+  const slot = k.frame(parent, { x: r3(o.x), y: r3(o.y), width: w, height: h + stake }, { name: o.name ?? "Packet" });
+  k.patch(slot, { anchorX: 0.5, anchorY: 1, scaleX: o.scale ?? 1, scaleY: o.scale ?? 1 });
+  if (stake) {
+    k.rect(slot, 18, r3(stake + 120), "wood", { name: "Stake", radius: 3, absolute: { x: w / 2 - 9, y: h - 110 }, effects: [cut(1, 0.25)] });
+    k.rect(slot, 5, r3(stake + 120), "woodShade", { name: "Stake grain", opacity: 0.6, absolute: { x: w / 2 + 3, y: h - 110 } });
+  }
+  const card = k.stack(slot, { width: w, height: h, fill: "packet", radius: 7, clip: true, gap: 6, padding: { top: 44, right: 18, bottom: 12, left: 18 }, effects: [cut(1, 0.26, 1.4)], absolute: { x: 0, y: 0 }, name: "Packet face" });
+  k.rect(card, w, 24, p.flap, { name: "Flap", absolute: { x: 0, y: 0 } });
+  k.vector(card, w, 10, [closed([pt3(0, 0), ...Array.from({ length: 25 }, (_, i) => pt3(i * 10, i % 2 ? 9 : 0)), pt3(w, 0)])], p.flap, { name: "Flap pinking", absolute: { x: 0, y: 23 } });
+  k.ellipse(card, 12, "shade", { name: "Hang hole", opacity: 0.18, absolute: { x: w / 2 - 6, y: 6 } });
+  const ph = o.detail ? 150 : 250, pw = w - 36, R = o.detail ? 52 : 80, tulip = p.flower.kind === "tulip";
+  const panel = k.stack(card, { height: ph, fill: p.panel, radius: 4, clip: true, name: "Packet picture" });
+  const top = tulip ? ph * 0.06 : ph * 0.1;
+  k.ellipse(panel, r3(R * 2.9), "white", { name: "Picture light", opacity: 0.28, absolute: { x: r3(pw / 2 - R * 1.45), y: r3(top - R * 0.45) } });
+  k.vector(panel, pw, ph, [open([pt3(pw / 2, ph + 2), pt3(pw / 2 + 2, top + R)])], "stem", { name: "Picture stem", strokeWidth: r3(R * 0.13), absolute: { x: 0, y: 0 } });
+  k.vector(panel, pw, ph, [closed(lens(pw / 2, ph - 6, -Math.PI / 2 - 0.85, 0, R * 1.2, R * 0.29, 0.9)), closed(lens(pw / 2, ph - 2, -Math.PI / 2 + 0.9, 0, R * 1.05, R * 0.27, 0.9))], "leaf", { name: "Picture leaves", absolute: { x: 0, y: 0 } });
+  bloom(k, panel, p.flower, R, { x: pw / 2 - R, y: top }, "Picture bloom");
+  k.text(card, p.title, { style: "Packet title", color: "ink", name: "Packet title" });
+  if (o.detail) {
+    k.text(card, p.latin, { style: "Packet latin", color: "ink", name: "Packet latin" });
+    k.rect(card, "FILL", 1.5, "ink", { name: "Packet rule", opacity: 0.35 });
+    k.text(card, p.sow, { style: "Packet sow", color: "ink", name: "Packet sow" });
+  }
+  return slot;
+}
+var packetBox = (a, soil) => ({ x: r3(a.x - PACKET.w / 2), y: r3(soil - a.lift - PACKET.h), width: PACKET.w, height: PACKET.h + a.lift });
+var HILL = 240;
+var depthOf = (s) => s.depth ?? Math.max(40, s.h - s.soil);
+var hillY = (layer, x, w, q) => {
+  const f = x / w * Math.PI * 2;
+  return q * [44 + 34 * Math.sin(f * 0.9 + 0.6), 112 + 40 * Math.sin(f * 1.3 + 2.4) + 8 * Math.sin(f * 3.1), 176 + 28 * Math.sin(f * 0.8 + 4.2) + 6 * Math.sin(f * 2.7 + 1)][layer];
+};
+var landBox = (s) => ({ x: 0, y: r3(s.soil - (s.hills ?? HILL)), width: s.w, height: (s.hills ?? HILL) + depthOf(s) });
+var sunBox = (g) => ({ x: r3(g.x - g.r * 1.5), y: r3(g.y - g.r * 1.5), width: r3(g.r * 3), height: r3(g.r * 3) });
+var cloudBox = (c) => ({ x: c.x, y: c.y, width: c.w, height: r3(c.w * 0.42) });
+function sun(k, parent, g, s) {
+  const b = sunBox(g), c = b.width / 2, n = 18;
+  const id = k.frame(parent, b, { name: "Sun" });
+  const whole = { absolute: { x: 0, y: 0 } };
+  k.ellipse(id, r3(g.r * 2.9), [k.gradient({ kind: "RADIAL", from: "butter", to: "butter", fromOpacity: 0.65, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Sun glow", absolute: { x: r3(c - g.r * 1.45), y: r3(c - g.r * 1.45) } });
+  const rays = k.vector(id, b.width, b.height, Array.from({ length: n }, (_, i) => {
+    const a = Math.PI * 2 * i / n, r1 = g.r * (i % 2 ? 1.28 : 1.44), d = 0.075;
+    return closed([pt3(c + g.r * 1.08 * Math.cos(a - d), c + g.r * 1.08 * Math.sin(a - d)), pt3(c + r1 * Math.cos(a), c + r1 * Math.sin(a)), pt3(c + g.r * 1.08 * Math.cos(a + d), c + g.r * 1.08 * Math.sin(a + d))]);
+  }), "sun", { name: "Sun rays", ...whole });
+  if (!s.still) k.behave(rays, "rotation", [{ kind: "spin", rate: r3(40 * 1e3 / s.loopMs) }]);
+  k.ellipse(id, r3(g.r * 2), "sun", { name: "Sun disc", absolute: { x: r3(c - g.r), y: r3(c - g.r) }, effects: [cut(g.r / 110, 0.22)] });
+  k.ellipse(id, r3(g.r * 1.5), "butter", { name: "Sun face", opacity: 0.6, absolute: { x: r3(c - g.r * 0.86), y: r3(c - g.r * 0.9) } });
+  return id;
+}
+function cloud(k, parent, c, i, s) {
+  const b = cloudBox(c), w = b.width, h = b.height;
+  const puffs = [[0.2, 0.68, 0.2], [0.4, 0.46, 0.3], [0.63, 0.52, 0.27], [0.82, 0.7, 0.18]];
+  const e = h * 0.2;
+  const base = [pt3(e, h - e * 2), pt3(w - e, h - e * 2), pt3(w - e, h), pt3(e, h)];
+  const id = k.vector(parent, w, h, [closed(base), closed(circle3(e, h - e, e, 14)), closed(circle3(w - e, h - e, e, 14)), ...puffs.map(([x, y, r]) => closed(circle3(w * x, h * y, w * r * 0.62, 18)))], "cloud", { name: "Cloud", effects: [cut(w / 300, 0.14)], absolute: { x: b.x, y: b.y } });
+  if (!s.still) k.behave(id, "translateX", [{ kind: "sine", amp: r3(w * 0.05), freq: hz(1, s.loopMs), phase: i * 0.4 }]);
+  return id;
+}
+function land(k, id, s) {
+  const w = s.w, H = s.hills ?? HILL, q = H / HILL, u = s.u ?? 1, DEPTH = depthOf(s);
+  const whole = { absolute: { x: 0, y: 0 } };
+  const edge = (layer, off = 0) => Array.from({ length: 41 }, (_, i) => pt3(w * i / 40, hillY(layer, w * i / 40, w, q) + off));
+  const rise = { type: "DROP_SHADOW", color: { r: 0.07, g: 0.3, b: 0.16, a: 0.22 }, offset: { x: 0, y: -4 }, blur: 14, spread: 0, visible: true };
+  if (H > 0) {
+    const trees = (layer, at) => {
+      const spots = at.map(([f, r]) => ({ x: w * f, y: hillY(layer, w * f, w, q), r: r * q }));
+      k.vector(id, w, H, spots.map((t) => open([pt3(t.x, t.y + 6), pt3(t.x, t.y - t.r * 1.3)])), "trunk", { name: "Trunks", strokeWidth: r3(Math.max(2, 6 * q)), ...whole });
+      k.vector(id, w, H + 40, spots.flatMap((t) => [closed(circle3(t.x, t.y - t.r * 1.9 + 40, t.r, 16)), closed(circle3(t.x - t.r * 0.7, t.y - t.r * 1.4 + 40, t.r * 0.66, 12)), closed(circle3(t.x + t.r * 0.72, t.y - t.r * 1.5 + 40, t.r * 0.6, 12))]), "blossom", { name: "Blossom", effects: [cut(q, 0.16)], absolute: { x: 0, y: -40 } });
+      const rnd2 = seeded(layer * 97 + 5);
+      k.vector(id, w, H + 40, spots.flatMap((t) => Array.from({ length: 9 }, () => {
+        const a = rnd2() * Math.PI * 2, d = rnd2() * t.r * 0.95;
+        return closed(circle3(t.x + d * Math.cos(a), t.y - t.r * 1.8 + 40 + d * 0.8 * Math.sin(a), t.r * 0.11, 6));
+      })), "blossomDeep", { name: "Blossom buds", opacity: 0.85, absolute: { x: 0, y: -40 } });
+    };
+    const hill = (layer, role, name) => k.vector(id, w, H + 20, [closed([...edge(layer), pt3(w, H + 20), pt3(0, H + 20)])], role, { name, effects: [rise], ...whole });
+    hill(0, "hillFar", "Far hill");
+    trees(0, [[0.1, 20], [0.17, 15], [0.52, 17], [0.86, 22], [0.93, 15]]);
+    hill(1, "hillMid", "Middle hill");
+    trees(1, [[0.33, 26], [0.7, 30]]);
+    hill(2, "hillNear", "Near hill");
+    k.vector(id, w, H + 20, [14, 30, 48, 68].filter((off) => 176 * q + off < H + 30).map((off) => open(edge(2, off * q))), "hillLine", { name: "Field rows", strokeWidth: r3(Math.max(1.5, 3 * q)), opacity: 0.4, ...whole });
+  }
+  for (const a of s.packets ?? []) {
+    const b = packetBox(a, H);
+    packet(k, id, a.packet, { x: b.x, y: b.y, scale: a.scale, stake: a.lift });
+  }
+  const soil = k.frame(id, { x: 0, y: H, width: w, height: DEPTH }, { name: "Soil", fill: "soil", clip: false });
+  const wave = (y, amp, f, ph) => closed([...Array.from({ length: 41 }, (_, i) => pt3(w * i / 40, y + amp * Math.sin(i / 40 * Math.PI * 2 * f + ph))), pt3(w, DEPTH), pt3(0, DEPTH)]);
+  k.vector(soil, w, DEPTH, [wave(Math.min(250 * u, DEPTH * 0.45), 14 * u, 1.4, 1)], "soilMid", { name: "Subsoil", ...whole });
+  k.vector(soil, w, DEPTH, [wave(Math.min(520 * u, DEPTH * 0.8), 18 * u, 1.1, 3)], "soilDeep", { name: "Deep soil", ...whole });
+  const rnd = seeded(2026);
+  const crumbs = (n) => Array.from({ length: n }, () => {
+    const x = rnd() * w, y = 8 + Math.pow(rnd(), 1.5) * (DEPTH - 40), r = (2 + rnd() * 4.5) * u;
+    return closed(circle3(x, y, r, 6));
+  });
+  k.vector(soil, w, DEPTH, crumbs(Math.round(w * DEPTH / (6e3 * u * u))), "soilLight", { name: "Crumbs", opacity: 0.55, ...whole });
+  k.vector(soil, w, DEPTH, crumbs(Math.round(w * DEPTH / (7e3 * u * u))), "soilDeep", { name: "Dark crumbs", opacity: 0.5, ...whole });
+  k.vector(soil, w, DEPTH, Array.from({ length: Math.max(3, Math.round(w * DEPTH / (13e4 * u * u))) }, () => {
+    const x = rnd() * w, y = DEPTH * (0.3 + rnd() * 0.62), r = (12 + rnd() * 16) * u;
+    return closed(Array.from({ length: 12 }, (_, i) => {
+      const a = Math.PI * 2 * i / 12;
+      return pt3(x + r * 1.35 * Math.cos(a), y + r * 0.8 * Math.sin(a));
+    }));
+  }), "pebble", { name: "Stones", effects: [cut(1, 0.3)], ...whole });
+  const worm = k.vector(soil, 150, 44, [open(Array.from({ length: 17 }, (_, i) => pt3(8 + i * 8.4, 22 + 11 * Math.sin(i * 0.75))))], "worm", { name: "Worm", strokeWidth: 13, absolute: { x: r3(w * (s.worm?.x ?? 0.66)), y: s.worm?.y ?? 300 } });
+  if (u !== 1) k.patch(worm, { scaleX: u, scaleY: u });
+  if (!s.still) k.behave(worm, "translateX", [{ kind: "sine", amp: r3(16 * u), freq: hz(Math.max(1, Math.round(s.loopMs / 4e3)), s.loopMs) }]);
+  for (const r of s.relics ?? []) {
+    const tag = k.stack(soil, { direction: "HORIZONTAL", width: "HUG", fill: "pebble", radius: 6, gap: 8, align: "CENTER", padding: { top: 5, right: 12, bottom: 5, left: 10 }, effects: [cut(1, 0.3)], absolute: { x: r.x, y: r.y }, name: "Relic" });
+    k.ellipse(tag, 8, "soilMid", { name: "Relic hole" });
+    k.text(tag, r.text, { style: "Relic", color: "ink", autoWidth: true, name: "Relic words" });
+  }
+  k.rect(soil, w, 16, "soilDeep", { name: "Topsoil shade", opacity: 0.4, ...whole });
+  const mounds = Math.round(w / (54 * u));
+  k.vector(soil, w, 30, [closed([pt3(0, 30), ...Array.from({ length: mounds * 6 + 1 }, (_, i) => pt3(w * i / (mounds * 6), 18 - 12 * Math.abs(Math.sin(i / 6 * Math.PI)))), pt3(w, 30)])], "soil", { name: "Soil edge", absolute: { x: 0, y: -16 } });
+  const g = seeded(77);
+  k.vector(soil, w, 40, Array.from({ length: Math.round(w / (15 * u)) }, () => {
+    const x = g() * w, hgt = (12 + g() * 20) * u, tilt = (g() - 0.5) * 14 * u;
+    return closed([pt3(x - 3.5 * u, 40), pt3(x + tilt, 40 - hgt), pt3(x + 3.5 * u, 40)]);
+  }), "stem", { name: "Grass", absolute: { x: 0, y: -34 } });
+  return soil;
+}
+function petals(k, parent, s) {
+  const rnd = seeded(404), span = r3(s.h + 120);
+  for (let i = 0; i < (s.petals ?? 0); i++) {
+    const size = r3((16 + rnd() * 20) * (s.u ?? 1)), x = r3(rnd() * (s.w - size)), laps = 1 + i % 2;
+    const id = k.vector(parent, size, r3(size * 1.5), [closed(lens(size / 2, size * 1.5, -Math.PI / 2, 0, size * 1.5, size * 0.5, 1.5, 7))], i % 3 ? "blossom" : "blossomDeep", { name: "Petal", opacity: 0.9, absolute: { x, y: r3(-size * 1.5 - 40) } });
+    k.patch(id, { translateY: r3(rnd() * span), rotation: r3(rnd() * 300) });
+    if (s.still) continue;
+    k.behave(id, "translateY", [{ kind: "spin", rate: r3(laps * span * 1e3 / s.loopMs) }, { kind: "mod", period: span, offset: 0 }]);
+    k.behave(id, "translateX", [{ kind: "sine", amp: r3(26 + rnd() * 30), freq: hz(2 + i % 2, s.loopMs), phase: r3(rnd()) }]);
+    k.behave(id, "rotation", [{ kind: "spin", rate: r3((i % 2 ? -360 : 360) * 1e3 / s.loopMs) }]);
+  }
+}
+function garden(k, id, s) {
+  if (s.sun) sun(k, id, s.sun, s);
+  (s.clouds ?? []).forEach((c, i) => cloud(k, id, c, i, s));
+  const H = s.hills ?? HILL;
+  const landId = k.frame(id, landBox(s), { name: "Land" });
+  land(k, landId, s);
+  s.plants.forEach((p, i) => plant(k, landId, s, p, i, H));
+  petals(k, id, s);
+  return landId;
+}
+function keepBoxes(k, master, copy) {
+  const m = k.node(master), c = k.node(copy);
+  if (!m || !c) return;
+  k.patch(copy, { x: m.x, y: m.y, width: m.width, height: m.height });
+  m.childIds.forEach((child, i) => {
+    if (c.childIds[i]) keepBoxes(k, child, c.childIds[i]);
+  });
+}
+function fitGarden(k, master, root, s) {
+  const H = s.hills ?? HILL;
+  const same = (a, b) => keepBoxes(k, a, b);
+  for (const id of k.named(root, "Garden")) k.patch(id, { x: 0, y: 0, width: s.w, height: s.h });
+  k.named(master, "Land").forEach((m, i) => {
+    const c = k.named(root, "Land")[i];
+    if (c) same(m, c);
+  });
+  for (const id of k.named(root, "Land")) k.patch(id, landBox(s));
+  if (s.sun) for (const id of k.named(root, "Sun")) {
+    k.named(master, "Sun").forEach((m) => same(m, id));
+    k.patch(id, sunBox(s.sun));
+  }
+  ;
+  (s.clouds ?? []).forEach((c, i) => {
+    const id = k.named(root, "Cloud")[i];
+    if (id) k.patch(id, cloudBox(c));
+  });
+  s.plants.forEach((p, i) => {
+    const id = k.named(root, "Plant slot")[i];
+    const scale = (p.scale ?? 1) * (s.plantScale ?? 1);
+    if (id) k.patch(id, { ...slotBox(p, H), scaleX: scale, scaleY: scale });
+  });
+  (s.packets ?? []).forEach((a, i) => {
+    const id = k.named(root, "Packet")[i];
+    if (id) k.patch(id, { ...packetBox(a, H), scaleX: a.scale, scaleY: a.scale });
+  });
+  k.named(master, "Petal").forEach((m, i) => {
+    const c = k.named(root, "Petal")[i];
+    if (c) same(m, c);
+  });
+}
+function label(k, parent, o) {
+  const u = o.u ?? 1;
+  const id = k.stack(parent, { ...o.absolute ? { absolute: o.absolute } : {}, width: o.w, height: o.h, fill: "packet", radius: r3(18 * u), justify: "CENTER", gap: r3(6 * u), padding: { top: r3(16 * u), right: r3(36 * u), bottom: r3(16 * u), left: r3(84 * u) }, name: o.name ?? "Label", effects: [cut(u, 0.3, 1.6)] });
+  k.ellipse(id, r3(26 * u), "soilMid", { name: "Label hole", absolute: { x: r3(30 * u), y: r3(o.h / 2 - 13 * u) } });
+  k.rect(id, r3(4 * u), r3(o.h - 36 * u), "pinkDeep", { name: "Label line", radius: r3(2 * u), absolute: { x: r3(68 * u), y: r3(18 * u) } });
+  return id;
+}
+var VARIETIES = [
+  { title: "Thin", latin: "Duplicates, folded into one", sow: "Up in 4 min", panel: "sky", flap: "skyDeep", flower: FLOWERS.daisy },
+  { title: "Compost", latin: "Dead issues, closed with a note", sow: "Up overnight", panel: "butter", flap: "sunDeep", flower: FLOWERS.tulip },
+  { title: "Stake", latin: "An owner and a date on the rest", sow: "Up by Friday", panel: "lilac", flap: "pinkDeep", flower: FLOWERS.skyCosmos }
+];
+
+export {
+  bloomBrand,
+  cut,
+  FLOWERS,
+  bloom,
+  PACKET,
+  packetStyles,
+  packet,
+  garden,
+  keepBoxes,
+  fitGarden,
+  label,
+  VARIETIES
+};

package/dist/chunks/chunk-KYS4SCPT.js

@@ -0,0 +1,206 @@
+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 {
+  DEAL,
+  board as board2,
+  boardHead,
+  change,
+  chart,
+  deskScreens,
+  fitListings,
+  floorBrand,
+  floorTicket,
+  ledWell,
+  listings,
+  playChart,
+  row,
+  stamp,
+  tape,
+  two
+} from "./chunk-EYNUZMPC.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-ERLSOXU6.js";
+import {
+  bed
+} from "./chunk-42LEBOKV.js";
+import {
+  board,
+  hide,
+  put,
+  reboard,
+  restyle
+} from "./chunk-YHBAWSDX.js";
+import {
+  glow
+} from "./chunk-M6VTXO6F.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/black-friday-ticker-deal-drop.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var { beat, duration: DURATION, audio: music } = bed("tension", 28);
+var TICKS = 6;
+var cues = [
+  { layer: "Board", preset: "drop-in", at: beat(0), params: { duration: 450 } },
+  { layer: "Headline", preset: "rise-in", at: beat(0), params: { duration: 450 } },
+  { layer: "Candles before", preset: "wipe-in", at: beat(0.5), params: { duration: 1500 } },
+  { layer: "Bell marker", preset: "fade-in", at: beat(3.5), params: { duration: 200 } },
+  { layer: "Candle fall", preset: "wipe-in", at: beat(4), params: { duration: 500, direction: "down" } },
+  { layer: "Board", preset: "shake", at: beat(4), params: { duration: 400, distance: 14 } },
+  { layer: "Change", preset: "pop-in", at: beat(5), params: { duration: 400 } },
+  { layer: "Candles after", preset: "wipe-in", at: beat(5), params: { duration: 1400 } },
+  { layer: "Stamp", preset: "pop-in", at: beat(6), params: { duration: 350 } },
+  { layer: "Now level", preset: "fade-in", at: beat(6), params: { duration: 300 } },
+  { layer: "Solo row", preset: "rise-in", at: beat(8), params: { duration: 350 } },
+  { layer: "Clock row", preset: "rise-in", at: beat(12), params: { duration: 350 } },
+  { layer: "Button", preset: "pop-in", at: beat(16), params: { duration: 450 } },
+  { layer: "Price figure", preset: "pulse", at: beat(20), params: { duration: 500, amount: 0.05 } },
+  { layer: "Button", preset: "pulse", at: beat(24), params: { duration: 500, amount: 0.06 } }
+];
+var counts = [
+  // The price falls over two beats and lands on the third.
+  { layer: "Price figure", at: beat(4), duration: beat(2), counter: { from: DEAL.teamWas, to: DEAL.teamNow, prefix: "$" } },
+  { layer: "Solo row figure", at: beat(8), duration: beat(2), counter: { from: DEAL.soloWas, to: DEAL.soloNow, prefix: "$", value: DEAL.soloNow } },
+  // The closing bell's clock: a second off every two beats.
+  { layer: "Clock row figure", at: beat(12), duration: TICKS * 1e3, tick: 1e3, counter: { from: DEAL.seconds, to: DEAL.seconds - TICKS, prefix: `${DEAL.days}D ${two(DEAL.hours)}:${two(DEAL.minutes)}:` } }
+];
+var swaps = [captionSwap(["Opening bell: our prices crashed.", `Every annual plan, ${DEAL.off}% off.`, `Lifetime seats: only ${DEAL.seats} listed.`, "Closing bell rings Monday midnight."], 0, DURATION, { stagger: 60, in: 300, out: 250, rise: 30 })];
+var NAME = "Black Friday ticker deal-drop reel";
+var CHART = { w: 744, h: 270 };
+var black_friday_ticker_deal_drop_default = defineTemplate({
+  id: "motion-black-friday-ticker-deal-drop",
+  meta: {
+    name: NAME,
+    description: "A 14-second vertical sale video drawn as a trading floor: an LED price board on salmon newspaper paper, a candlestick chart whose line falls off a cliff on the beat while the annual price counts down 60%, a SELL-OFF stamp, a ticking closing-bell clock and a scrolling ticker tape. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "black friday", "cyber monday", "sale", "saas", "stock ticker", "trading floor", "price drop", "chart", "candlestick", "counter", "countdown", "audio", "music", "captions", "reel", "lifetime deal"],
+    platforms: ["instagram", "tiktok", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "video", "ad"],
+    useCases: ["sale", "countdown", "pricing"],
+    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;
+    floorBrand(k, { name: DEAL.product, site: DEAL.site, symbol: DEAL.symbol }, ["paper", "text", "onPaper", "primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
+    k.textStyle("Tape 26", { ...MONO, size: 26, fontWeight: 800, letterSpacing: 0.6, lineHeight: 32 });
+    k.textStyle("Label 22", { ...MONO, size: 22, fontWeight: 700, letterSpacing: 2, lineHeight: 28 });
+    k.textStyle("Figure 150", { ...MONO, size: 150, fontWeight: 800, letterSpacing: -5, lineHeight: 160, fontFeatures: { tnum: 1 } });
+    k.textStyle("Change 50", { ...MONO, size: 50, fontWeight: 800, letterSpacing: -1, lineHeight: 56 });
+    k.textStyle("Axis 18", { ...MONO, size: 18, fontWeight: 700, letterSpacing: 1, lineHeight: 24 });
+    k.textStyle("Row 28", { ...MONO, size: 28, fontWeight: 700, lineHeight: 38, fontFeatures: { tnum: 1 } });
+    k.textStyle("Headline 84", { ...SERIF, size: 84, fontWeight: 900, letterSpacing: -2.6, lineHeight: 84, textAlign: "CENTER" });
+    k.textStyle("Headline 104", { ...SERIF, size: 104, fontWeight: 900, letterSpacing: -3.4, lineHeight: 100, textAlign: "CENTER" });
+    k.textStyle("Headline 64", { ...SERIF, size: 64, fontWeight: 900, letterSpacing: -1.8, lineHeight: 66, textAlign: "CENTER" });
+    k.textStyle("Caption 38", { size: 38, fontWeight: 800, letterSpacing: -0.6, lineHeight: 46, textAlign: "CENTER" });
+    k.textStyle("Button 34", { size: 34, fontWeight: 800, lineHeight: 42 });
+    k.textStyle("Stamp 30", { ...MONO, size: 30, fontWeight: 800, letterSpacing: 2, lineHeight: 34 });
+    pill(k, "Buy button", { fill: "primary", ink: "onPrimary", style: "Button 34", label: `Buy the dip at ${DEAL.link}`, pad: [22, 44], radius: 10 });
+    const sheet = k.sheet;
+    const pad = verticalPadding();
+    k.flowSheet(sheet, 22, pad, "paper", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: music });
+    listings(k, sheet, 1080, 1920);
+    glow(k, sheet, { x: 240, y: 300, w: 1500, role: "light", alpha: 0.2, name: "Page light" });
+    deskScreens(k, sheet, { x: 40, y: 1468, width: 1e3, height: 330 });
+    floorTicket(k, sheet, { x: -70, y: 1700, width: 560, height: 700, rotation: -9, name: "Floor ticket left" });
+    floorTicket(k, sheet, { x: 560, y: 1760, width: 560, height: 700, rotation: 7, name: "Floor ticket right" });
+    tape(k, sheet, { item: 400, height: 60, style: "Tape 26", rate: 150, radius: 10, span: 1800 });
+    const layout = k.stack(sheet, { gap: 22, align: "CENTER", name: "Layout" });
+    const b = board2(k, layout, { pad: 28, gap: 14 });
+    boardHead(k, b, { label: `{{brand.symbol}}.TEAM \xB7 ANNUAL`, note: "BLACK FRIDAY SESSION", style: "Label 22", lamp: 14 });
+    const main = k.stack(b, { gap: 14, align: "CENTER", name: "Board main" });
+    ledWell(k, main, { height: 184, step: 8, weight: 2, pad: 26, align: "SPACE_BETWEEN", name: "Price well" }, (well) => {
+      k.text(well, `$${DEAL.teamNow}`, { style: "Figure 150", color: "led", autoWidth: true, name: "Price figure" });
+      const side = k.stack(well, { width: "HUG", gap: 4, align: "MAX", name: "Change" });
+      change(k, side, `${DEAL.off}%`, { style: "Change 50", size: 34, name: "Fall" });
+      k.text(side, `LIST $${DEAL.teamWas}`, { style: "Label 22", color: "cardMuted", autoWidth: true, name: "List price" });
+    });
+    const c = chart(k, board(k, main, CHART.w, CHART.h, 1, "Chart board"), { ...CHART, was: `$${DEAL.teamWas}`, now: `$${DEAL.teamNow}`, style: "Axis 18", absolute: { x: 0, y: 0 } });
+    const rows = k.stack(b, { gap: 6, name: "Blotter" });
+    row(k, rows, `{{brand.symbol}}.SOLO \xB7 ANNUAL, WAS $${DEAL.soloWas}`, `$${DEAL.soloNow}`, { style: "Row 28", color: "onCard", figureColor: "led", name: "Solo row" });
+    row(k, rows, "CLOSING BELL IN", `${DEAL.days}D ${two(DEAL.hours)}:${two(DEAL.minutes)}:${DEAL.seconds - TICKS}`, { style: "Row 28", color: "onCard", figureColor: "amber", name: "Clock row" });
+    const copy = k.stack(layout, { gap: 22, align: "CENTER", name: "Copy" });
+    k.text(copy, "Our prices just crashed.", { style: "Headline 84", color: "text", name: "Headline" });
+    captionStrip(k, copy, swaps[0].words[0], { style: "Caption 38", fill: "ticket", ink: "ticketInk", radius: 8, pad: [14, 24] });
+    k.instance(copy, "Buy button", { Label: `Buy the dip at ${DEAL.link}` }, { name: "Button" });
+    stamp(k, c.frame, "SELL-OFF", { style: "Stamp 30", pad: [8, 18], rotation: 6, absolute: { x: c.room.x + 24, y: c.room.y } });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    playChart(k, c, { at: beat(0.5), drop: beat(4), fall: 500, settle: 1400 });
+    const feed = (kit, id, w, h) => {
+      fitListings(kit, id);
+      hide(kit, id, ["Floor ticket left", "Floor ticket right", "Desk screens"]);
+      put(kit, id, "Page light", w * 0.2 - 750, h * 0.2 - 750);
+    };
+    k.variants(sheet, [
+      ...feedVariants({ post: 48, portrait: 72 }, {
+        // The square: the price beside its chart, and no blotter.
+        post: (kit, id) => {
+          feed(kit, id, 1080, 1080);
+          kit.patch(id, { padding: { top: 36, right: 60, bottom: 36, left: 60 }, itemSpacing: 18 });
+          for (const n of kit.named(id, "Layout")) kit.patch(n, { itemSpacing: 18 });
+          for (const n of kit.named(id, "Copy")) kit.patch(n, { itemSpacing: 16 });
+          for (const n of kit.named(id, "Board main")) kit.patch(n, { layoutMode: "HORIZONTAL", itemSpacing: 18 });
+          for (const n of kit.named(id, "Price well")) kit.patch(n, { layoutMode: "VERTICAL", height: 300, primaryAxisAlignItems: "CENTER", counterAxisAlignItems: "CENTER", padding: { top: 0, right: 0, bottom: 0, left: 0 } });
+          for (const n of kit.named(id, "Change")) kit.patch(n, { counterAxisAlignItems: "CENTER" });
+          reboard(kit, id, "Chart board", 0.72);
+          restyle(kit, id, "Headline", "Headline 64");
+        },
+        portrait: (kit, id) => {
+          feed(kit, id, 1080, 1350);
+          kit.patch(id, { padding: { top: 56, right: 80, bottom: 48, left: 80 } });
+          reboard(kit, id, "Chart board", 1.16);
+        }
+      }),
+      {
+        // 16:9: the board on the left, the words beside it.
+        preset: "video-1080p",
+        adjust: (kit, id) => {
+          feed(kit, id, 1920, 1080);
+          kit.patch(id, { padding: { top: 56, right: 96, bottom: 56, left: 96 }, itemSpacing: 36 });
+          for (const n of kit.named(id, "Layout")) kit.patch(n, { layoutMode: "HORIZONTAL", itemSpacing: 72, counterAxisAlignItems: "CENTER" });
+          for (const n of kit.named(id, "Board")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 920, padding: { top: 32, right: 32, bottom: 32, left: 32 } });
+          reboard(kit, id, "Chart board", 1.15);
+          for (const n of kit.named(id, "Grille")) kit.patch(n, { width: 860 });
+          restyle(kit, id, "Headline", "Headline 104");
+          put(kit, id, "Floor ticket left", 1130, 800, { visible: true, width: 520, height: 600, rotation: -10 });
+          put(kit, id, "Floor ticket right", 1500, 850, { visible: true, width: 520, height: 600, rotation: 8 });
+        }
+      }
+    ]);
+    return k.finish();
+  }
+});
+
+export {
+  black_friday_ticker_deal_drop_default
+};