@popcraft/kit 0.26.0 → 0.27.0

package/dist/chunks/chunk-VF2CGZGQ.js

@@ -0,0 +1,428 @@
+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 {
+  hz
+} from "./chunk-RXG7T7TH.js";
+import {
+  RADIAL,
+  noise
+} from "./chunk-HVK5T4I5.js";
+import {
+  circle,
+  r3,
+  rng
+} from "./chunk-BNVLVZUT.js";
+import {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/themes/ukiyo-e-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function ukiyoBrand(k, fields = {}) {
+  k.brand(
+    { paper: "#F1E7D0", text: "#16233F", onPaper: "#3D4A61", primary: "#1F3F73", onPrimary: "#F8F1DE", accent: "#B93A26", onAccent: "#FFF6E6", card: "#FBF5E6", onCard: "#16233F" },
+    { name: "Keel", site: "keel.example", ...fields }
+  );
+  k.palette({
+    skyDeep: "#1B3364",
+    haze: "#CFE0E2",
+    water: "#9CC0D2",
+    seaLight: "#5E93BC",
+    sea: "#2B5C92",
+    seaDark: "#1D4172",
+    deep: "#14274E",
+    foam: "#F8F2E0",
+    ink: "#101A30",
+    mountain: "#44618A",
+    snow: "#FBF7EA",
+    sun: "#CF4A30",
+    sunGlow: "#E9A27E",
+    pine: "#4E7A52",
+    pineDark: "#24493A",
+    bark: "#3B2F2C",
+    wood: "#E3C48F"
+  });
+}
+var grain = (u, seed, amount = 0.06) => noise({ amount, size: Math.max(1, Math.round(2 * u)), seed });
+var shade = (u, a = 0.25, dy = 8, blur = 22) => ({ type: "DROP_SHADOW", color: { r: 0.04, g: 0.07, b: 0.16, a }, offset: { x: 0, y: r3(dy * u) }, blur: r3(blur * u), spread: 0, visible: true });
+var circle2 = (cx, cy, r, n = 14) => circle(cx, cy, r, n);
+var lerp = (a, b, t) => ({ x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t });
+function spline(pts, per = 8) {
+  const out = [];
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[Math.max(0, i - 1)], p1 = pts[i], p2 = pts[i + 1], p3 = pts[Math.min(pts.length - 1, i + 2)];
+    for (let j = 0; j < per; j++) {
+      const t = j / per, t2 = t * t, t3 = t2 * t;
+      out.push({
+        x: 0.5 * (2 * p1.x + (p2.x - p0.x) * t + (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 + (3 * p1.x - p0.x - 3 * p2.x + p3.x) * t3),
+        y: 0.5 * (2 * p1.y + (p2.y - p0.y) * t + (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 + (3 * p1.y - p0.y - 3 * p2.y + p3.y) * t3)
+      });
+    }
+  }
+  out.push(pts[pts.length - 1]);
+  return out;
+}
+function resample(pts, n) {
+  const d = [0];
+  for (let i = 1; i < pts.length; i++) d.push(d[i - 1] + Math.hypot(pts[i].x - pts[i - 1].x, pts[i].y - pts[i - 1].y));
+  const total = d[d.length - 1], out = [];
+  for (let i = 0, j = 1; i <= n; i++) {
+    const at = total * i / n;
+    while (j < pts.length - 1 && d[j] < at) j++;
+    const span = d[j] - d[j - 1] || 1;
+    out.push(lerp(pts[j - 1], pts[j], Math.min(1, Math.max(0, (at - d[j - 1]) / span))));
+  }
+  return out;
+}
+function draw(k, parent, name, shapes, color, o = {}) {
+  const xs = shapes.flat().map((p) => p.x), ys = shapes.flat().map((p) => p.y);
+  const x0 = Math.min(...xs), y0 = Math.min(...ys);
+  const paths = shapes.map((s) => ({ closed: o.line === void 0, points: s.map((p) => ({ x: r3(p.x - x0), y: r3(p.y - y0) })) }));
+  return k.vector(parent, r3(Math.max(1, Math.max(...xs) - x0)), r3(Math.max(1, Math.max(...ys) - y0)), paths, color, {
+    name,
+    absolute: { x: r3(x0), y: r3(y0) },
+    ...o.line !== void 0 ? { strokeWidth: r3(o.line) } : {},
+    ...o.key !== void 0 ? { stroke: { color: o.keyRole ?? "ink", width: r3(o.key) } } : {},
+    ...o.effects ? { effects: o.effects } : {},
+    ...o.opacity !== void 0 ? { opacity: o.opacity } : {}
+  });
+}
+var keyline = (u) => Math.max(1.2, 2.6 * u);
+function sun(k, parent, o) {
+  const m = o.size, w = r3(m * 2.2), c = w / 2;
+  const id = k.stack(parent, { width: w, height: w, name: "Sun", absolute: { x: r3(o.x - c), y: r3(o.y - c) } });
+  k.ellipse(id, w, [k.gradient({ from: "sunGlow", to: "sunGlow", kind: "RADIAL", fromOpacity: 0.55, toOpacity: 0, handles: RADIAL })], { name: "Sun glow", absolute: { x: 0, y: 0 } });
+  k.ellipse(id, m, o.role ?? "sun", { name: "Sun disc", absolute: { x: r3(c - m / 2), y: r3(c - m / 2) }, effects: [grain(o.u, 3, 0.07)] });
+  return id;
+}
+function mountain(k, parent, o) {
+  const { w, h, u } = o, id = k.frame(parent, { x: r3(o.x - w / 2), y: r3(o.base - h), width: r3(w), height: r3(h) }, { name: "Mountain" });
+  const top = 0.07 * w;
+  const slope = (f, side) => ({ x: w / 2 + side * (top / 2 + (w / 2 - top / 2) * (1 - f)), y: h * (1 - Math.pow(f, 1.75)) });
+  const cone = [];
+  for (let i = 0; i <= 16; i++) cone.push(slope(i / 16, -1));
+  cone.push({ x: w / 2 - top * 0.18, y: h * 0.018 }, { x: w / 2 + top * 0.2, y: -h * 4e-3 });
+  for (let i = 16; i >= 0; i--) cone.push(slope(i / 16, 1));
+  draw(k, id, "Mountain cone", [cone], "mountain", { key: keyline(u), effects: [grain(u, 5, 0.05)] });
+  const from = 0.72, a = slope(from, -1), b = slope(from, 1), snow = [];
+  for (let i = 0; i <= 8; i++) snow.push(slope(from + (1 - from) * i / 8, -1));
+  snow.push({ x: w / 2 - top * 0.18, y: h * 0.018 }, { x: w / 2 + top * 0.2, y: -h * 4e-3 });
+  for (let i = 8; i >= 0; i--) snow.push(slope(from + (1 - from) * i / 8, 1));
+  const hem = 9;
+  for (let i = 1; i < hem; i++) {
+    const p = lerp(b, a, i / hem);
+    snow.push({ x: p.x, y: p.y + (i % 2 ? h * (0.1 + 0.07 * (i * 7 % 3)) : -h * 0.03) });
+  }
+  draw(k, id, "Snow", [snow], "snow", { key: keyline(u) * 0.7 });
+  k.vector(id, r3(w), r3(h), [{ closed: true, points: cone.map((p) => ({ x: r3(p.x), y: r3(Math.max(0, p.y)) })) }], [k.gradient({ from: "haze", to: "haze", angle: 90, fromOpacity: 0, toOpacity: 0.85 })], { name: "Mountain mist", absolute: { x: 0, y: 0 } });
+  return id;
+}
+function mist(k, parent, m, u) {
+  const bar = r3(Math.max(4, 20 * u)), id = k.stack(parent, { width: r3(m.w), height: r3(bar * 3 + bar * 0.5), name: "Mist", absolute: { x: r3(m.x - m.w / 2), y: r3(m.y - bar * 1.5) } });
+  const steps = [[0.2, 0.52], [0, 1], [0.34, 0.5]];
+  if (m.tone) steps.forEach(([from, len], row) => k.rect(id, r3(m.w * len), bar, "water", { name: "Mist shadow", radius: 999, opacity: 0.55, absolute: { x: r3(m.w * from + bar * 0.3), y: r3(bar * row + bar * 0.4) } }));
+  steps.forEach(([from, len], row) => k.rect(id, r3(m.w * len), bar, "paper", { name: "Mist bar", radius: 999, absolute: { x: r3(m.w * from), y: bar * row } }));
+  return id;
+}
+function seaRow(k, parent, o) {
+  const rand = rng(o.seed * 977 + 13), margin = o.len * 1.2, { u } = o;
+  const id = k.frame(parent, { x: 0, y: 0, width: o.w, height: o.foot }, { name: "Sea row" });
+  const top = [], caps = [];
+  for (let x = -margin - rand() * o.len; x < o.w + margin; ) {
+    const L = o.len * (0.78 + 0.44 * rand()), A = o.amp * (0.6 + 0.7 * rand()), cap = [], under = [];
+    for (let j = 0; j < 14; j++) {
+      const t = j / 14;
+      const rise = t < 0.62 ? Math.pow(t / 0.62, 1.8) : 0.5 * (1 + Math.cos(Math.PI * (t - 0.62) / 0.38));
+      const lean = 0.13 * L * Math.exp(-Math.pow((t - 0.64) / 0.2, 2));
+      const p = { x: x + t * L + lean, y: o.y - A * rise };
+      top.push(p);
+      if (t > 0.36 && t < 0.8) {
+        const s = (t - 0.36) / 0.44, th = A * o.caps * (0.2 + Math.pow(Math.sin(Math.PI * s), 0.8) * (0.55 + 0.45 * Math.abs(Math.sin(Math.PI * 3 * s))));
+        cap.push({ x: p.x, y: p.y - 1.5 * u });
+        under.push({ x: p.x - th * 0.25, y: p.y + th });
+      }
+    }
+    if (o.caps && cap.length > 2 && A > o.amp * 0.8) caps.push([...cap, ...under.reverse()]);
+    x += L;
+  }
+  const flip = (p) => o.flip ? { x: o.w - p.x, y: p.y } : p;
+  const edge = top.map(flip);
+  draw(k, id, "Sea", [[{ x: edge[0].x, y: o.foot }, ...edge, { x: edge[edge.length - 1].x, y: o.foot }]], o.role);
+  draw(k, id, "Sea line", [edge], "ink", { line: keyline(u), opacity: 0.85 });
+  if (caps.length) draw(k, id, "Sea foam", caps.map((c) => c.map(flip)), "foam", { key: keyline(u) * 0.6 });
+  return id;
+}
+var BACK = [{ x: -60, y: 800 }, { x: 0, y: 610 }, { x: 90, y: 455 }, { x: 220, y: 312 }, { x: 370, y: 205 }, { x: 520, y: 135 }, { x: 650, y: 108 }, { x: 765, y: 128 }, { x: 855, y: 196 }, { x: 905, y: 288 }, { x: 900, y: 372 }];
+var FACE = [{ x: 1060, y: 800 }, { x: 900, y: 742 }, { x: 740, y: 700 }, { x: 618, y: 636 }, { x: 545, y: 552 }, { x: 520, y: 458 }, { x: 538, y: 372 }, { x: 590, y: 306 }, { x: 665, y: 276 }, { x: 750, y: 282 }, { x: 830, y: 318 }, { x: 900, y: 372 }];
+function greatWave(k, parent, o) {
+  const s = o.w / 1e3, h = r3(o.w * 0.8), { u } = o, rand = rng((o.seed ?? 1) * 53 + 5);
+  const id = k.frame(parent, { x: r3(o.x), y: r3(o.y), width: r3(o.w), height: h }, { name: "Wave" });
+  const swell = k.frame(id, { x: 0, y: 0, width: r3(o.w), height: h }, { name: "Wave swell" });
+  const N = 96;
+  const at = (p) => ({ x: (o.flip ? 1e3 - p.x : p.x) * s, y: p.y * s });
+  const back = resample(spline(BACK, 10), N), face = resample(spline(FACE, 10), N);
+  const between = (t) => back.map((p, i) => lerp(p, face[i], t));
+  const band = (t0, t1, from = 0, to = N) => [...between(t0).slice(from, to + 1), ...between(t1).slice(from, to + 1).reverse()].map(at);
+  draw(k, swell, "Water", [[...back, ...[...face].reverse()].map(at)], "sea", { key: keyline(u) * 1.2, effects: [shade(u, 0.28, 6, 26), grain(u, 7, 0.06)] });
+  draw(k, swell, "Wave shadow", [band(0.66, 1)], "seaDark");
+  draw(k, swell, "Wave deep bands", [band(0.8, 0.9), band(0.94, 1), band(0.1, 0.15, 0, 70)], "deep", { opacity: 0.9 });
+  draw(k, swell, "Wave pale bands", [band(0.24, 0.3, 4, 84), band(0.42, 0.46, 2, 88), band(0.57, 0.6, 0, 90), band(0.72, 0.745, 6, 92)], "water");
+  draw(k, swell, "Wave face line", [face.map(at)], "ink", { line: keyline(u) * 1.2 });
+  const start = 30, outer = [], inner = [];
+  for (let i = start; i <= N; i++) {
+    const f = (i - start) / (N - start), a = back[Math.max(0, i - 1)], b = back[Math.min(N, i + 1)];
+    const len = Math.hypot(b.x - a.x, b.y - a.y) || 1, nx = (b.y - a.y) / len, ny = -(b.x - a.x) / len;
+    const puff = (5 + 15 * Math.abs(Math.sin(f * Math.PI * 13))) * Math.min(1, f * 6) * (f > 0.97 ? 0.3 : 1);
+    outer.push({ x: back[i].x + nx * puff, y: back[i].y + ny * puff });
+    const depth = Math.min(1, 0.05 + 0.3 * Math.pow(f, 1.5) + (f > 0.7 ? Math.pow((f - 0.7) / 0.3, 1.6) * 0.7 : 0));
+    inner.push(lerp(back[i], face[i], Math.min(1, depth * (0.75 + 0.25 * Math.abs(Math.sin(f * Math.PI * 9))) * Math.min(1, f * 5))));
+  }
+  draw(k, swell, "Foam", [[...outer, ...inner.reverse()].map(at)], "foam", { key: keyline(u), effects: [grain(u, 9, 0.04)] });
+  const curls = [];
+  for (let i = start + 14; i < N - 4; i += 7) {
+    const c = lerp(back[i], face[i], 0.07 + 0.1 * rand()), r = 9 + 7 * rand(), a0 = rand() * Math.PI;
+    curls.push(Array.from({ length: 8 }, (_, j) => ({ x: c.x + r * (1 - j / 14) * Math.cos(a0 + j * 0.5), y: c.y + r * (1 - j / 14) * Math.sin(a0 + j * 0.5) })).map(at));
+  }
+  draw(k, swell, "Foam curls", curls, "water", { line: keyline(u) * 0.9 });
+  const drops = [[], [], []];
+  const finger = (root, angle, len, width, curl, n2) => {
+    const mid = [root];
+    let a = angle;
+    for (let j = 1; j <= 10; j++) {
+      a += curl * (4 + j) / 95;
+      mid.push({ x: mid[j - 1].x + len / 10 * Math.cos(a), y: mid[j - 1].y + len / 10 * Math.sin(a) });
+    }
+    const side = (sgn) => mid.map((p, j) => {
+      const q = mid[Math.min(10, j + 1)], q0 = mid[Math.max(0, j - 1)], l = Math.hypot(q.x - q0.x, q.y - q0.y) || 1;
+      const wdt = width / 2 * Math.pow(1 - j / 10, 0.85) * (1 + 0.3 * Math.sin(j / 10 * Math.PI));
+      return { x: p.x + sgn * wdt * -(q.y - q0.y) / l, y: p.y + sgn * wdt * (q.x - q0.x) / l };
+    });
+    const shape = [...side(1), ...side(-1).reverse()].map(at);
+    const cid = draw(k, swell, "Claw", [shape], "foam", { key: keyline(u) * 0.9 });
+    const node = k.node(cid), r0 = at(root);
+    k.patch(cid, { anchorX: r3(Math.min(1, Math.max(0, (r0.x - node.x) / node.width))), anchorY: r3(Math.min(1, Math.max(0, (r0.y - node.y) / node.height))) });
+    const tip = mid[10];
+    for (let j = 0; j < 3; j++) drops[(n2 + j) % 3].push(circle2(tip.x + (14 + 26 * j) * Math.cos(a + 0.3 * j) + (rand() - 0.5) * 22, tip.y + (14 + 26 * j) * Math.sin(a + 0.3 * j) + (rand() - 0.5) * 22, 3 + 5 * rand(), 9).map(at));
+  };
+  let n = 0;
+  for (let i = 60; i <= N; i += 5) {
+    const f = (i - 60) / (N - 60), a = back[Math.max(0, i - 1)], b = back[Math.min(N, i + 1)];
+    const tangent = Math.atan2(b.y - a.y, b.x - a.x);
+    finger(back[i], tangent - 1.05 + 0.25 * f, 74 + 70 * Math.sin(Math.PI * Math.min(1, 0.15 + f)) + 18 * rand(), 44 - 10 * f, 1.75 + 0.4 * rand(), n++);
+  }
+  for (let i = 74; i <= N - 2; i += 5) {
+    const a = back[Math.max(0, i - 1)], b = back[Math.min(N, i + 1)];
+    finger(back[i], Math.atan2(b.y - a.y, b.x - a.x) - 0.8, 104 + 56 * rand(), 30, 1.05 + 0.3 * rand(), n++);
+  }
+  for (let i = N - 3; i >= N - 30; i -= 5) finger(lerp(back[i], face[i], 1), Math.PI * 0.62 + 0.25 * rand(), 26 + 30 * rand(), 20, 1 + 0.6 * rand(), n++);
+  drops.forEach((d, i) => {
+    if (d.length) draw(k, swell, "Spray", d, "foam", { key: keyline(u) * 0.5, opacity: 1 - i * 0.12 });
+  });
+  k.patch(swell, { anchorX: o.flip ? 0.75 : 0.25, anchorY: 1 });
+  if (!o.still) {
+    k.behave(swell, "rotation", [{ kind: "sine", amp: 1.3, freq: hz(2, o.loopMs) }]);
+    k.behave(swell, "translateY", [{ kind: "sine", amp: 10 * u, freq: hz(2, o.loopMs), phase: 0.25 }]);
+  }
+  return id;
+}
+function boat(k, parent, o) {
+  const L = o.len, H = L * 0.16, up = L * 0.42, { u } = o;
+  const id = k.frame(parent, { x: r3(o.x - L / 2), y: r3(o.y - up - H), width: r3(L), height: r3(up + H) }, { name: "Boat" });
+  const fx = (p) => ({ x: o.flip ? L - p.x : p.x, y: p.y + up });
+  const hull = spline([{ x: 0, y: H * 0.1 }, { x: L * 0.5, y: H * 0.34 }, { x: L * 0.86, y: H * 0.26 }, { x: L, y: -H * 0.55 }], 6);
+  const keel = spline([{ x: L * 0.97, y: -H * 0.2 }, { x: L * 0.86, y: H * 0.8 }, { x: L * 0.5, y: H }, { x: L * 0.1, y: H * 0.86 }, { x: 0, y: H * 0.1 }], 6);
+  draw(k, id, "Mast", [[{ x: L * 0.36, y: H * 0.3 }, { x: L * 0.36, y: -up * 0.96 }].map(fx)], "ink", { line: keyline(u) * 1.2 });
+  draw(k, id, "Banner", [[{ x: L * 0.36, y: -up * 0.94 }, { x: L * 0.58, y: -up * 0.9 }, { x: L * 0.55, y: -up * 0.66 }, { x: L * 0.59, y: -up * 0.42 }, { x: L * 0.36, y: -up * 0.4 }].map(fx)], "accent", { key: keyline(u) * 0.8 });
+  const backs = [], heads = [];
+  for (let i = 0; i < 5; i++) {
+    const x = L * (0.14 + 0.13 * i + (i > 1 ? 0.08 : 0)), y = H * (0.16 + 0.03 * i);
+    backs.push(spline([{ x: x - L * 0.035, y }, { x: x - L * 0.01, y: y - H * 0.75 }, { x: x + L * 0.04, y: y - H * 0.5 }, { x: x + L * 0.045, y }], 4).map(fx));
+    heads.push(circle2(x + L * 0.045, y - H * 0.72, L * 0.018, 9).map(fx));
+  }
+  draw(k, id, "Rowers", backs, "seaDark", { key: keyline(u) * 0.6 });
+  draw(k, id, "Heads", heads, "ink");
+  draw(k, id, "Hull", [[...hull, ...keel].map(fx)], "wood", { key: keyline(u), effects: [shade(u, 0.3, 4, 10)] });
+  draw(k, id, "Hull plank", [spline([{ x: L * 0.04, y: H * 0.42 }, { x: L * 0.5, y: H * 0.64 }, { x: L * 0.9, y: H * 0.42 }], 6).map(fx)], "ink", { line: keyline(u) * 0.7, opacity: 0.7 });
+  k.patch(id, { anchorX: 0.5, anchorY: 1 });
+  if (!o.still) {
+    k.behave(id, "rotation", [{ kind: "sine", amp: 3.2, freq: hz(2, o.loopMs), phase: 0.1 }]);
+    k.behave(id, "translateY", [{ kind: "sine", amp: 9 * u, freq: hz(2, o.loopMs), phase: 0.35 }]);
+  }
+  return id;
+}
+function pine(k, parent, o) {
+  const S = o.size, { u } = o, id = k.frame(parent, { x: r3(o.flip ? o.x - S : o.x), y: r3(o.y), width: r3(S), height: r3(S * 0.7) }, { name: "Pine" });
+  const at = (p) => ({ x: (o.flip ? 1 - p.x : p.x) * S, y: p.y * S });
+  const bough = spline([{ x: -0.04, y: 0.02 }, { x: 0.16, y: 0.1 }, { x: 0.33, y: 0.09 }, { x: 0.5, y: 0.2 }, { x: 0.68, y: 0.22 }, { x: 0.86, y: 0.36 }], 6);
+  const twigs = [
+    spline([{ x: 0.33, y: 0.09 }, { x: 0.4, y: 0.24 }, { x: 0.36, y: 0.4 }], 5),
+    spline([{ x: 0.5, y: 0.2 }, { x: 0.6, y: 0.36 }, { x: 0.72, y: 0.46 }], 5),
+    spline([{ x: 0.16, y: 0.1 }, { x: 0.14, y: 0.24 }, { x: 0.2, y: 0.33 }], 5),
+    spline([{ x: 0.68, y: 0.22 }, { x: 0.78, y: 0.16 }, { x: 0.9, y: 0.18 }], 5)
+  ];
+  const taper = (line, w0, w1) => {
+    const side = (sgn) => line.map((p, j) => {
+      const q = line[Math.min(line.length - 1, j + 1)], q0 = line[Math.max(0, j - 1)], l = Math.hypot(q.x - q0.x, q.y - q0.y) || 1, w = (w0 + (w1 - w0) * (j / (line.length - 1))) / 2;
+      return { x: p.x + sgn * w * -(q.y - q0.y) / l, y: p.y + sgn * w * (q.x - q0.x) / l };
+    });
+    return [...side(1), ...side(-1).reverse()].map(at);
+  };
+  draw(k, id, "Bough", [taper(bough, 0.05, 0.012), ...twigs.map((t) => taper(t, 0.02, 6e-3))], "bark", { key: keyline(u) * 0.7 });
+  const pads = [[0.12, 0.05, 0.13], [0.36, 0.4, 0.15], [0.72, 0.46, 0.14], [0.2, 0.33, 0.12], [0.9, 0.18, 0.11], [0.86, 0.36, 0.13], [0.52, 0.17, 0.12], [0.3, 0.05, 0.1], [0.62, 0.34, 0.1], [0.42, 0.26, 0.09]];
+  const dark = [], light = [], needles = [];
+  pads.forEach(([x, y, r], i) => {
+    const pad = [];
+    for (let j = 0; j <= 14; j++) {
+      const a = Math.PI + Math.PI * j / 14;
+      pad.push({ x: x + r * Math.cos(a), y: y + r * 0.62 * Math.sin(a) });
+    }
+    pad.push({ x: x + r * 0.5, y: y + r * 0.1 }, { x, y: y + r * 0.02 }, { x: x - r * 0.5, y: y + r * 0.1 });
+    (i % 3 === 0 ? dark : light).push(pad.map(at));
+    for (let j = 1; j < 9; j++) {
+      const a = Math.PI + Math.PI * j / 9;
+      needles.push([{ x, y: y + r * 0.02 }, { x: x + r * 0.88 * Math.cos(a), y: y + r * 0.55 * Math.sin(a) }].map(at));
+    }
+  });
+  draw(k, id, "Needle pads", light, "pine", { key: keyline(u) * 0.8, effects: [shade(u, 0.2, 4, 10)] });
+  draw(k, id, "Dark needle pads", dark, "pineDark", { key: keyline(u) * 0.8 });
+  draw(k, id, "Needles", needles, "ink", { line: keyline(u) * 0.5, opacity: 0.55 });
+  k.patch(id, { anchorX: o.flip ? 1 : 0, anchorY: 0 });
+  if (!o.still) k.behave(id, "rotation", [{ kind: "sine", amp: 0.9, freq: hz(1, o.loopMs), phase: o.i / 3 }]);
+  return id;
+}
+var SEA_ROLES = ["haze", "water", "seaLight", "sea", "seaDark", "deep"];
+function print(k, parent, t, at = { x: 0, y: 0 }) {
+  const u = t.u, seed = t.seed ?? 3, rand = rng(seed), high = t.high ?? 600 * u, foot = t.h + (t.deep ?? 0);
+  const id = k.frame(parent, { ...at, width: t.w, height: t.h }, { name: "Print" });
+  if (t.band) {
+    k.rect(id, t.w, r3(high + 2), "skyDeep", { name: "Sky head", opacity: 0.96, absolute: { x: 0, y: r3(-high) } });
+    k.rect(id, t.w, r3(t.band), [k.gradient({ from: "skyDeep", to: "skyDeep", angle: 90, fromOpacity: 0.96, toOpacity: 0 })], { name: "Sky band", absolute: { x: 0, y: 0 } });
+    const lines = [];
+    for (let i = 0; i < 9; i++) {
+      const y = t.band * (0.06 + 0.1 * i), ph = rand() * 6;
+      lines.push(Array.from({ length: 25 }, (_, j) => ({ x: t.w * j / 24, y: y + 5 * u * Math.sin(ph + j * 0.55) + 3 * u * Math.sin(ph * 2 + j * 1.3) })));
+    }
+    draw(k, id, "Block grain", lines, "paper", { line: Math.max(1, 1.6 * u), opacity: 0.16 });
+  }
+  k.rect(id, t.w, r3(260 * u), [k.gradient({ from: "water", to: "water", angle: 90, fromOpacity: 0, toOpacity: 0.5 })], { name: "Horizon wash", absolute: { x: 0, y: r3(t.horizon - 260 * u) } });
+  if (t.sun) sun(k, id, { ...t.sun, u });
+  const flock = (t.birds ?? []).map(({ x, y, size: s }) => [{ x: x - s, y: y - s * 0.25 }, { x: x - s * 0.45, y: y - s * 0.55 }, { x, y }, { x: x + s * 0.45, y: y - s * 0.55 }, { x: x + s, y: y - s * 0.25 }]);
+  if (flock.length) {
+    const birds = draw(k, id, "Birds", flock, "ink", { line: keyline(u), opacity: 0.8 });
+    if (!t.still) k.behave(birds, "translateY", [{ kind: "sine", amp: 9 * u, freq: hz(2, t.loopMs) }]);
+  }
+  if (t.mountain) mountain(k, id, { ...t.mountain, base: t.horizon + 6 * u, u });
+  (t.mist ?? []).forEach((m, i) => {
+    const band = mist(k, id, m, u);
+    if (!t.still) k.behave(band, "translateX", [{ kind: "sine", amp: (26 + 22 * (i % 3)) * u, freq: hz(1 + i % 2, t.loopMs), phase: r3(i * 0.37 % 1) }]);
+  });
+  k.rect(id, t.w, r3(foot - t.horizon), "haze", { name: "Far water", absolute: { x: 0, y: r3(t.horizon) } });
+  draw(k, id, "Horizon", [[{ x: 0, y: t.horizon }, { x: t.w, y: t.horizon }]], "ink", { line: keyline(u) * 0.8, opacity: 0.7 });
+  const behind = t.behind ?? Math.ceil(t.rows / 2);
+  const rowF = (i) => t.rows === 1 ? 1 : i / (t.rows - 1);
+  const rowY = (i) => r3(t.horizon + (t.front - t.horizon) * Math.pow((i + 1) / t.rows, 1.25));
+  const rowAmp = (i) => (12 + 46 * rowF(i)) * u;
+  const row = (i) => {
+    const f = rowF(i);
+    const r = seaRow(k, id, {
+      w: t.w,
+      y: rowY(i),
+      foot,
+      len: (110 + 250 * f) * u,
+      amp: rowAmp(i),
+      role: SEA_ROLES[Math.min(SEA_ROLES.length - 1, 1 + Math.round(f * (SEA_ROLES.length - 2)))],
+      u,
+      seed: seed + i * 7,
+      caps: f > 0.15 ? 0.5 : 0,
+      flip: i % 2 === 1
+    });
+    if (!t.still) k.behave(r, "translateX", [{ kind: "sine", amp: (14 + 30 * f) * u, freq: hz(1 + i % 2, t.loopMs), phase: r3(i * 0.29 % 1) }]);
+  };
+  for (let i = 0; i < Math.min(behind, t.rows); i++) row(i);
+  if (t.wave) greatWave(k, id, { ...t.wave, u, loopMs: t.loopMs, still: t.still, seed });
+  if (t.boat) boat(k, id, { ...t.boat, y: t.boat.y ?? r3(rowY(Math.min(behind, t.rows - 1)) - rowAmp(Math.min(behind, t.rows - 1)) * 0.5), u, loopMs: t.loopMs, still: t.still });
+  for (let i = behind; i < t.rows; i++) row(i);
+  if (t.pattern !== void 0) {
+    const R = 68 * u, arcs = [];
+    for (let rowI = 0, cy = t.pattern + R; cy - R < foot; rowI++, cy += R / 2) {
+      for (let cx = rowI % 2 ? R : 0; cx - R < t.w; cx += 2 * R) {
+        for (const r of [R, R * 0.62, R * 0.28]) {
+          let run = [];
+          for (let j = 0; j <= 10; j++) {
+            const a = Math.PI + Math.PI * j / 10, p = { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };
+            const hidden = Math.hypot(p.x - (cx - R), p.y - (cy + R / 2)) < R - 0.01 || Math.hypot(p.x - (cx + R), p.y - (cy + R / 2)) < R - 0.01 || p.y > foot;
+            if (!hidden) run.push(p);
+            else {
+              if (run.length > 1) arcs.push(run);
+              run = [];
+            }
+          }
+          if (run.length > 1) arcs.push(run);
+        }
+      }
+    }
+    draw(k, id, "Wave scales", arcs, "sea", { line: keyline(u) * 0.9, opacity: 0.7 });
+  }
+  ;
+  (t.fore ?? []).forEach((y, i) => {
+    const r = seaRow(k, id, { w: t.w, y, foot, len: 430 * u, amp: 84 * u, role: i % 2 ? "sea" : "seaDark", u, seed: seed + 90 + i * 5, caps: 0.5, flip: i % 2 === 0 });
+    k.patch(r, { name: "Fore swell" });
+    if (!t.still) k.behave(r, "translateX", [{ kind: "sine", amp: (40 + 16 * i) * u, freq: hz(1, t.loopMs), phase: r3(0.2 + i * 0.31) }]);
+  });
+  (t.pines ?? []).forEach((p, i) => pine(k, id, { ...p, u, loopMs: t.loopMs, still: t.still, i }));
+  const fibres = [];
+  for (let i = 0; i < Math.round(t.w * t.h / (36e3 * u * u)); i++) {
+    const x = rand() * t.w, y = rand() * t.h, a = rand() * Math.PI, l = (14 + 30 * rand()) * u, bend = (rand() - 0.5) * 10 * u;
+    fibres.push([{ x: x - l * Math.cos(a), y: y - l * Math.sin(a) }, { x: x + bend, y: y - bend }, { x: x + l * Math.cos(a), y: y + l * Math.sin(a) }]);
+  }
+  draw(k, id, "Washi fibres", fibres, "ink", { line: Math.max(0.8, 1.1 * u), opacity: 0.1 });
+  return id;
+}
+function liftSky(k, root, dy) {
+  for (const name of ["Sky head", "Sky band", "Block grain", "Pine"]) for (const id of k.named(root, name)) k.patch(id, { y: r3(k.node(id).y - dy) });
+}
+function seal(k, parent, size, o = {}) {
+  const pad = Math.round(size * 0.17);
+  const id = k.stack(parent, { width: size, height: size, fill: "accent", radius: Math.round(size * 0.14), padding: pad, align: "CENTER", justify: "CENTER", name: o.name ?? "Seal", effects: [grain(1, 15, 0.1)], ...o.absolute ? { absolute: o.absolute } : {} });
+  k.logo(id, size - 2 * pad, size - 2 * pad);
+  return id;
+}
+function stamp(k, id, at) {
+  for (const axis of ["scaleX", "scaleY"]) k.animate(id, axis, [{ t: at, v: 1.9, ease: ease.named("cubic", "in") }, { t: at + 170, v: 0.92, ease: ease.out("cubic") }, { t: at + 330, v: 1 }]);
+  k.animate(id, "opacity", [{ t: at, v: 0, ease: ease.out("cubic") }, { t: at + 110, v: 1 }]);
+}
+function cartouche(k, parent, words, o) {
+  const pad = o.pad ?? 12;
+  const id = k.stack(parent, { width: o.width, gap: Math.round(pad * 0.35), fill: "card", stroke: { color: "text", width: 2 }, padding: { top: pad, right: 4, bottom: pad, left: 4 }, align: "CENTER", name: o.name ?? "Cartouche", ...o.absolute ? { absolute: o.absolute } : {} });
+  for (const w of words) k.text(id, w, { style: o.style, color: "onCard", align: "CENTER", name: "Cartouche word" });
+  return id;
+}
+function mount(k, parent, w, h, o = {}) {
+  const m = o.margin ?? 16;
+  const sheet = k.stack(parent, { width: w, height: h, fill: "card", name: o.name ?? "Mount", effects: [shade(1, 0.3, 14, 36)], ...o.absolute ? { absolute: o.absolute } : {} });
+  const window = k.frame(sheet, { x: m, y: m, width: w - 2 * m, height: h - 2 * m }, { name: "Window", fill: "paper", clip: true });
+  return { sheet, window, inner: { w: w - 2 * m, h: h - 2 * m } };
+}
+function windowFrame(k, sheet, w, h, margin = 16, weight = 2.5) {
+  k.rect(sheet, w - 2 * margin, h - 2 * margin, [], { name: "Window keyline", stroke: { color: "text", width: weight, align: "INSIDE" }, absolute: { x: margin, y: margin } });
+}
+
+export {
+  ukiyoBrand,
+  sun,
+  greatWave,
+  print,
+  liftSky,
+  seal,
+  stamp,
+  cartouche,
+  mount,
+  windowFrame
+};

package/dist/chunks/chunk-VHB3NN3N.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-565NQUD2.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-C7BYFVZT.js";
+import {
+  bed
+} from "./chunk-52GCV7N5.js";
+import {
+  board,
+  hide,
+  put,
+  reboard,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  glow
+} from "./chunk-HVK5T4I5.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.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
+};