@popcraft/kit 0.29.0 → 0.30.0

package/dist/chunks/chunk-JHYGD5FH.js

@@ -0,0 +1,366 @@
+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 {
+  burstPath,
+  sparkPath
+} from "./chunk-UDE42EDS.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  hardShadow
+} from "./chunk-M6VTXO6F.js";
+import {
+  pt3,
+  r3,
+  rng
+} from "./chunk-6RCDZU4R.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/saas/style-maximal-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var FIZZ = {
+  name: "Clipfizz",
+  site: "clipfizz.example",
+  version: "3.0",
+  feature: "Auto-Bop",
+  pitch: "Drop in a long video. Get back clips cut on the beat, captioned and stickered in your style.",
+  prompt: "make it hit on the drop",
+  /** Seconds from upload to the first clips. */
+  seconds: 38,
+  /** Clips made since launch, and in September alone. */
+  clips: "3.4M",
+  september: 1e6,
+  creators: "180K",
+  packs: 40,
+  captionStyles: 12,
+  /** Clips a month, April to September, in thousands. */
+  monthly: [210, 340, 470, 620, 780, 1e3],
+  months: ["Apr", "May", "Jun", "Jul", "Aug", "Sep"],
+  /** A month; billed yearly, the second figure a month. */
+  pro: 12,
+  proYear: 9,
+  studio: 29,
+  studioYear: 24,
+  trial: "Pro free for 7 days. No card.",
+  quote: "I film once on Sunday. Clipfizz hands me a week of Reels that land on the beat.",
+  author: "Dani Okafor",
+  handle: "@danicooks",
+  role: "Food creator \xB7 412K followers"
+};
+var BRAND = {
+  paper: "#FF4FA3",
+  text: "#0B0B0F",
+  onPaper: "#2B0A1E",
+  primary: "#C8FF1E",
+  onPrimary: "#0B0B0F",
+  secondary: "#1F4BFF",
+  onSecondary: "#FFFFFF",
+  accent: "#FF7A1A",
+  onAccent: "#0B0B0F",
+  card: "#FFF6E5",
+  onCard: "#0B0B0F",
+  night: "#0B0B0F",
+  onNight: "#FFFFFF"
+};
+var SCENERY = {
+  chromeHi: "#FFFFFF",
+  chromeMid: "#CDD5E2",
+  chromeLo: "#8E99AD",
+  nightMuted: "#C9CCD8",
+  cardMuted: "#4A3F33",
+  pinkDeep: "#E0237F",
+  lime: "#DDFF7A",
+  skin: "#C98A63",
+  skinDeep: "#7A4A33",
+  hair: "#1A1012",
+  steam: "#FFFFFF"
+};
+function maxBrand(k, fields = {}) {
+  k.brand({ ...BRAND }, { name: FIZZ.name, site: FIZZ.site, ...fields });
+  k.palette({ ...SCENERY });
+}
+function grot(k, name, size, o = {}) {
+  k.textStyle(name, { size, fontWeight: o.weight ?? 700, lineHeight: Math.round(size * (o.lead ?? 1.2)), letterSpacing: Math.round(size * (o.spacing ?? 0) * 100) / 100 });
+  return name;
+}
+var display = (k, name, size, lead = 0.92) => grot(k, name, size, { weight: 900, lead, spacing: -0.035 });
+function mono(k, name, size, o = {}) {
+  k.textStyle(name, { ...MONO, size, fontWeight: o.weight ?? 700, lineHeight: Math.round(size * (o.lead ?? 1.25)), letterSpacing: Math.round(size * (o.spacing ?? 0) * 100) / 100 });
+  return name;
+}
+function chromePaint(k) {
+  const stops = [[0, "chromeHi"], [0.38, "chromeMid"], [0.52, "chromeLo"], [0.6, "chromeMid"], [0.82, "chromeHi"], [1, "chromeMid"]];
+  return [{
+    type: "GRADIENT_LINEAR",
+    gradientStops: stops.map(([position, role]) => ({ position, color: k.color(role) })),
+    gradientHandlePositions: [{ x: 0.5, y: 0 }, { x: 0.5, y: 1 }, { x: 0, y: 0.5 }],
+    opacity: 1,
+    visible: true
+  }];
+}
+function chromeFx(k, size, shadow = Math.max(3, Math.round(size / 20))) {
+  return [
+    hardShadow(k, "secondary", shadow),
+    { type: "INNER_SHADOW", color: k.color("chromeLo"), offset: { x: 0, y: -Math.round(size * 0.16) }, blur: Math.round(size * 0.1), spread: 0, visible: true },
+    { type: "INNER_SHADOW", color: k.color("chromeMid"), offset: { x: 0, y: Math.round(size * 0.05) }, blur: Math.round(size * 0.04), spread: 0, visible: true }
+  ];
+}
+function chromeText(k, parent, chars, o) {
+  return k.text(parent, chars, { style: o.style, color: "chromeHi", name: o.name ?? "Chrome", ...o.width ? { width: o.width } : { autoWidth: true }, ...o.align ? { align: o.align } : {}, effects: chromeFx(k, o.size, o.shadow ?? 6), ...o.absolute ? { absolute: o.absolute } : {} });
+}
+function relight(k, root, name, size) {
+  for (const id of k.named(root, name)) k.patch(id, { effects: chromeFx(k, size) });
+}
+function plate(k, parent, o) {
+  const [v, h] = o.pad ?? [28, 36];
+  const id = k.stack(parent, { width: o.width ?? "HUG", fill: "night", radius: o.radius ?? 18, gap: o.gap ?? 8, align: o.align ?? "MIN", padding: { top: v, right: h, bottom: v, left: h }, effects: [hardShadow(k, o.shadowRole ?? "primary", o.shadow ?? 12)], name: o.name ?? "Plate", ...o.absolute ? { absolute: o.absolute } : {} });
+  if (o.rotate) k.patch(id, { rotation: o.rotate });
+  return id;
+}
+var stickerEdge = (k, weight = 4, drop = 7) => ({ stroke: { color: "night", width: weight, align: "INSIDE" }, effects: [hardShadow(k, "night", drop)] });
+function sticker(k, parent, label, o) {
+  const [v, h] = o.pad ?? [12, 22];
+  const e = stickerEdge(k, o.weight, o.drop);
+  const id = k.stack(parent, { direction: "HORIZONTAL", width: o.width ?? "HUG", align: "CENTER", justify: "CENTER", fill: o.fill, radius: o.shape === "tag" ? 14 : 999, padding: { top: v, right: h, bottom: v, left: h }, ...e, name: o.name ?? "Sticker", ...o.absolute ? { absolute: o.absolute } : {} });
+  k.text(id, label, { style: o.style, color: o.ink, name: "Sticker words", ...o.width ? { width: "FILL", align: "CENTER" } : { autoWidth: true } });
+  if (o.rotate) k.patch(id, { rotation: o.rotate });
+  return id;
+}
+var burstPaths = (s, points = 18, depth = 0.16) => [burstPath(s, points, depth)];
+function burst(k, parent, size, role, o = {}) {
+  const id = k.vector(parent, size, size, burstPaths(size, o.points, o.depth), role, { name: o.name ?? "Burst", ...o.outline !== 0 ? { stroke: { color: "night", width: o.outline ?? 4, align: "INSIDE" } } : {}, ...o.absolute ? { absolute: o.absolute } : {} });
+  if (o.rotate) k.patch(id, { rotation: o.rotate });
+  return id;
+}
+function burstSticker(k, parent, lines, o) {
+  const id = k.stack(parent, { width: o.size, height: o.size, align: "CENTER", justify: "CENTER", gap: 0, name: o.name ?? "Burst sticker", effects: [hardShadow(k, "night", 7)], ...o.absolute ? { absolute: o.absolute } : {} });
+  k.vector(id, o.size, o.size, burstPaths(o.size, o.points ?? 20, o.depth ?? 0.15), o.fill, { name: "Burst", stroke: { color: "night", width: 4, align: "INSIDE" }, absolute: { x: 0, y: 0 } });
+  for (const l of lines) k.text(id, l.text, { style: l.style, color: o.ink, width: Math.round(o.size * (o.inner ?? 0.66)), align: "CENTER", name: l.name ?? "Burst words" });
+  if (o.rotate) k.patch(id, { rotation: o.rotate });
+  return id;
+}
+function spark(k, parent, size, role, o = {}) {
+  return k.vector(parent, size, size, [sparkPath(size, o.pinch ?? 0.12)], role, { name: o.name ?? "Sparkle", ...o.outline ? { stroke: { color: "night", width: o.outline, align: "INSIDE" } } : {}, ...o.absolute ? { absolute: o.absolute } : {} });
+}
+function halftonePaths(d, step = 22, seedAngle = 0.6) {
+  const paths = [];
+  const c = d / 2;
+  for (let row = 0, y = step / 2; y < d; y += step * 0.866, row++) for (let x = (row % 2 ? step / 2 : 0) + step / 2; x < d; x += step) {
+    const dx = x - c, dy = y - c, r = Math.hypot(dx, dy);
+    if (r > c - step / 2) continue;
+    const tone = 0.5 + 0.5 * ((dx * Math.cos(seedAngle) + dy * Math.sin(seedAngle)) / c);
+    const rad = step / 2 * (0.18 + 0.78 * tone);
+    if (rad < 1.2) continue;
+    paths.push({ closed: true, points: Array.from({ length: 8 }, (_, i) => pt3(x + rad * Math.cos(i / 8 * Math.PI * 2), y + rad * Math.sin(i / 8 * Math.PI * 2))) });
+  }
+  return paths;
+}
+function halftone(k, parent, d, role, o = {}) {
+  return k.vector(parent, d, d, halftonePaths(d, o.step, o.angle), role, { name: o.name ?? "Halftone", ...o.absolute ? { absolute: o.absolute } : {} });
+}
+function cutout(k, parent, w, h, o) {
+  const f = k.frame(parent, { x: o.absolute?.x ?? 0, y: o.absolute?.y ?? 0, width: w, height: h }, { name: o.name ?? "Cut-out" });
+  if (o.absolute) k.patch(f, { layoutPositioning: "ABSOLUTE" });
+  const edge = { color: "chromeHi", width: Math.max(5, Math.round(w * 0.025)), align: "OUTSIDE" };
+  const d = w * 0.42, cx = w / 2, top = h * 0.12, sy = top + d * 1.05;
+  k.vector(f, w, h, [{ closed: true, points: [
+    pt3(w * 0.04, h),
+    { ...pt3(w * 0.08, sy + h * 0.16), handleOut: pt3(w * 0.1, sy + h * 0.02) },
+    { ...pt3(cx, sy - h * 0.02), handleIn: pt3(w * 0.24, sy - h * 0.02), handleOut: pt3(w * 0.76, sy - h * 0.02) },
+    { ...pt3(w * 0.92, sy + h * 0.16), handleIn: pt3(w * 0.9, sy + h * 0.02) },
+    pt3(w * 0.96, h)
+  ] }], o.top, { name: "Shoulders", stroke: edge, absolute: { x: 0, y: 0 } });
+  k.ellipse(f, r3(d), o.skin ?? "skin", { name: "Head", stroke: edge, absolute: { x: r3(cx - d / 2), y: r3(top) } });
+  const hw = d * 1.06;
+  k.vector(f, r3(hw), r3(d * 0.62), [{ closed: true, points: [
+    pt3(0, d * 0.5),
+    { ...pt3(hw / 2, 0), handleIn: pt3(0, d * 0.05), handleOut: pt3(hw, d * 0.05) },
+    pt3(hw, d * 0.5),
+    { ...pt3(hw * 0.78, d * 0.3), handleIn: pt3(hw * 0.9, d * 0.32) },
+    { ...pt3(hw * 0.2, d * 0.32), handleIn: pt3(hw * 0.5, d * 0.22) }
+  ] }], "hair", { name: "Hair", absolute: { x: r3(cx - hw / 2), y: r3(top - d * 0.06) } });
+  k.ellipse(f, r3(d * 0.42), "hair", { name: "Bun", absolute: { x: r3(cx + d * 0.12), y: r3(top - d * 0.3) } });
+  return f;
+}
+function bowl(k, parent, w, h, o) {
+  const f = k.frame(parent, { x: o.absolute?.x ?? 0, y: o.absolute?.y ?? 0, width: w, height: h }, { name: o.name ?? "Bowl" });
+  if (o.absolute) k.patch(f, { layoutPositioning: "ABSOLUTE" });
+  const by = h * 0.5;
+  k.vector(f, w, h - by, [{ closed: true, points: [pt3(0, 0), pt3(w, 0), { ...pt3(w * 0.5, (h - by) * 0.98), handleIn: pt3(w * 0.95, (h - by) * 0.9), handleOut: pt3(w * 0.05, (h - by) * 0.9) }] }], o.fill, { name: "Bowl body", stroke: { color: "night", width: 5, align: "INSIDE" }, absolute: { x: 0, y: r3(by) } });
+  k.rect(f, w, Math.round(h * 0.07), "night", { name: "Bowl rim", radius: 99, absolute: { x: 0, y: r3(by - h * 0.035) } });
+  for (let i = 0; i < 3; i++) {
+    const x = w * (0.28 + i * 0.22), sh = by * 0.8;
+    k.vector(f, 30, sh, [{ closed: false, points: [{ ...pt3(15, sh), handleOut: pt3(0, sh * 0.75) }, { ...pt3(15, sh * 0.5), handleIn: pt3(30, sh * 0.7), handleOut: pt3(0, sh * 0.3) }, { ...pt3(15, 0), handleIn: pt3(30, sh * 0.2) }] }], [], { name: "Steam", stroke: { color: "steam", width: 6, cap: "ROUND" }, absolute: { x: r3(x - 15), y: r3(by * 0.08) } });
+  }
+  return f;
+}
+var slap = (layer, at, o = {}) => ({ layer, preset: "pop-in", at, params: { duration: o.duration ?? 380, amount: o.from ?? 0.3, ease: ease.back(2.6) }, ...o.gap !== void 0 || Array.isArray(layer) ? { stagger: { delay: o.gap ?? 0, order: "selection" } } : {} });
+var wobble = (layer, at, o = {}) => ({ layer, preset: "wobble", at, params: { duration: o.duration ?? 600, amount: o.angle ?? 8 }, ...o.gap !== void 0 || Array.isArray(layer) ? { stagger: { delay: o.gap ?? 0, order: "selection" } } : {} });
+function spin(k, id, turns, loop) {
+  k.patch(id, { anchorX: 0.5, anchorY: 0.5 });
+  k.behave(id, "rotation", [{ kind: "spin", rate: r3(turns * 360 * 1e3 / loop) }]);
+}
+function bob(k, id, amount = 0.025) {
+  k.patch(id, { anchorX: 0.5, anchorY: 0.5 });
+  for (const axis of ["scaleX", "scaleY"]) k.behave(id, axis, [{ kind: "audio", signal: "bass", gain: 1, mode: "multiply", from: 1, to: 1 + amount, attack: 10, release: 180 }]);
+}
+function float(k, id, amp, cycles, loop, phase = 0, axis = "translateY") {
+  k.behave(id, axis, [{ kind: "sine", amp, freq: r3(cycles * 1e3 / loop), phase }]);
+}
+function marquee(k, parent, o) {
+  const n = Math.ceil(o.width / o.w) + 1, period = n * o.w;
+  const strip = k.stack(parent, { direction: "HORIZONTAL", width: o.width, height: o.height, clip: true, fill: o.fill, name: o.name ?? "Marquee", ...o.edge !== false ? { stroke: { color: "night", width: 4, align: "INSIDE" } } : {}, ...o.absolute ? { absolute: o.absolute } : {} });
+  const rate = r3((o.right ? 1 : -1) * o.cells * o.w * 1e3 / o.loop);
+  for (let i = 0; i < n; i++) {
+    const c = k.stack(strip, { direction: "HORIZONTAL", width: o.w, height: o.height, align: "CENTER", justify: "CENTER", gap: 18, name: "Marquee cell", absolute: { x: 0, y: 0 } });
+    o.cell(c, i);
+    k.patch(c, { translateX: i * o.w });
+    k.behave(c, "translateX", [{ kind: "spin", rate }, { kind: "mod", period, offset: -o.w }]);
+  }
+  if (o.rotate) k.patch(strip, { rotation: o.rotate });
+  return strip;
+}
+function fitMarquee(k, root, name, width) {
+  for (const id of k.named(root, name)) k.patch(id, { width, layoutSizingHorizontal: "FIXED" });
+}
+function confetti(k, parent, o) {
+  const R = rng(o.seed ?? 7), n = o.n ?? 36, spread = o.spread ?? 520, life = o.life ?? 1600, s = o.size ?? 22;
+  const g = k.frame(parent, { x: o.x, y: o.y, width: 1, height: 1 }, { name: o.name ?? "Confetti" });
+  k.patch(g, { layoutPositioning: "ABSOLUTE", clipsContent: false });
+  const roles = ["primary", "secondary", "accent", "card", "chromeHi"];
+  for (let i = 0; i < n; i++) {
+    const a = i / n * Math.PI * 2 + R() * 0.4, dist = spread * (0.45 + 0.55 * R());
+    const dx = r3(Math.cos(a) * dist), dy = r3(Math.sin(a) * dist * 0.8 - spread * 0.2), fall = r3(spread * (0.4 + 0.3 * R()));
+    const round = i % 3 === 0;
+    const id = round ? k.ellipse(g, Math.round(s * 0.7), roles[i % roles.length], { name: "Bit", absolute: { x: 0, y: 0 }, opacity: 0 }) : k.rect(g, s, Math.round(s * 0.45), roles[i % roles.length], { name: "Bit", absolute: { x: 0, y: 0 }, opacity: 0, radius: 3 });
+    const t0 = o.at + Math.round(R() * 60), t1 = t0 + Math.round(life * 0.35), t2 = o.at + life;
+    k.animate(id, "translateX", [{ t: t0, v: 0, ease: ease.out("expo") }, { t: t1, v: dx, ease: ease.linear }, { t: t2, v: r3(dx * 1.15) }]);
+    k.animate(id, "translateY", [{ t: t0, v: 0, ease: ease.out("expo") }, { t: t1, v: dy, ease: ease.named("quad", "in") }, { t: t2, v: r3(dy + fall) }]);
+    k.animate(id, "rotation", [{ t: t0, v: 0, ease: ease.linear }, { t: t2, v: Math.round((R() - 0.5) * 900) }]);
+    k.animate(id, "opacity", [{ t: t0 - 1, v: 0, ease: ease.hold }, { t: t0, v: 1, ease: ease.hold }, { t: t2 - Math.round(life * 0.25), v: 1, ease: ease.linear }, { t: t2, v: 0 }]);
+  }
+  return g;
+}
+function phone(k, parent, o) {
+  const bz = o.bezel ?? 14;
+  const rig = k.frame(parent, { x: o.absolute?.x ?? 0, y: o.absolute?.y ?? 0, width: o.w, height: o.h }, { name: o.name ?? "Phone rig" });
+  k.patch(rig, { layoutPositioning: "ABSOLUTE", clipsContent: false });
+  const body = k.stack(rig, { width: o.w, height: o.h, fill: chromePaint(k), radius: Math.round(o.w * 0.15), padding: bz, stroke: { color: "night", width: 4, align: "INSIDE" }, effects: [hardShadow(k, "secondary", 14)], name: "Phone", absolute: { x: 0, y: 0 } });
+  if (o.rotate) k.patch(body, { rotation: o.rotate });
+  const sw = o.w - 2 * bz, sh = o.h - 2 * bz;
+  const screen = k.stack(body, { width: sw, height: sh, fill: "night", radius: Math.round(o.w * 0.15) - bz, clip: true, gap: 14, padding: { top: 22, right: 18, bottom: 18, left: 18 }, name: "Screen" });
+  return { rig, body, screen, sw, sh };
+}
+function callComponent(k, o) {
+  const [v, h] = o.pad ?? [22, 38];
+  k.component("Call", { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 999, align: "CENTER", padding: { top: v, right: h, bottom: v, left: h }, stroke: { color: "night", width: o.weight ?? 5, align: "INSIDE" }, effects: [hardShadow(k, "night", o.drop ?? 10)], props: { Label: o.label } }, (id) => {
+    k.propText(id, "Label", { style: o.style, color: "onPrimary", autoWidth: true });
+  });
+}
+function quietComponent(k, o) {
+  const [v, h] = o.pad ?? [18, 30];
+  k.component("Button quiet", { direction: "HORIZONTAL", width: "HUG", fill: "card", radius: 999, align: "CENTER", padding: { top: v, right: h, bottom: v, left: h }, stroke: { color: "night", width: 3, align: "INSIDE" }, props: { Label: o.label } }, (id) => {
+    k.propText(id, "Label", { style: o.style, color: "onCard", autoWidth: true });
+  });
+}
+var T = (size, fontWeight, lead, spacing = 0, family) => ({ size, fontWeight, lineHeight: Math.round(size * lead), letterSpacing: Math.round(size * spacing * 100) / 100, ...family ? { fontFamily: family } : {} });
+var M = "JetBrains Mono";
+var WEB_TYPE = {
+  "Nav 16": T(16, 600, 1.4),
+  "Brand 24": T(24, 900, 1.1, -0.02),
+  "Button 18": T(18, 800, 1.25),
+  "Button 16": T(16, 800, 1.25),
+  "Tag 16": T(16, 700, 1.3, 0, M),
+  "Tag 14": T(14, 700, 1.3, 0, M),
+  "Tag 12": T(12, 700, 1.3, 0, M),
+  "Tag 22": T(22, 700, 1.25, 0, M),
+  "Hero 112": T(112, 900, 0.92, -0.035),
+  "Hero 88": T(88, 900, 0.92, -0.035),
+  "Hero 56": T(56, 900, 0.95, -0.03),
+  "Section 64": T(64, 900, 0.98, -0.03),
+  "Section 48": T(48, 900, 1, -0.03),
+  "Section 36": T(36, 900, 1.05, -0.02),
+  "Title 30": T(30, 900, 1.05, -0.02),
+  "Title 24": T(24, 900, 1.1, -0.015),
+  "Title 20": T(20, 800, 1.2, -0.01),
+  "Lead 22": T(22, 500, 1.45),
+  "Lead 18": T(18, 500, 1.45),
+  "Body 17": T(17, 500, 1.5),
+  "Body 15": T(15, 500, 1.5),
+  "Small 14": T(14, 500, 1.45),
+  "Figure 132": T(132, 900, 0.95, -0.04),
+  "Figure 64": T(64, 900, 1, -0.035),
+  "Figure 48": T(48, 900, 1, -0.03),
+  "Quote 40": T(40, 800, 1.15, -0.02),
+  "Quote 26": T(26, 800, 1.2, -0.01),
+  "Price 72": T(72, 900, 1, -0.04),
+  "Price 56": T(56, 900, 1, -0.04),
+  "Chip 40": T(40, 900, 1),
+  "Burst 56": T(56, 900, 0.92, -0.02),
+  "Seal 64": T(64, 900, 0.9, -0.02),
+  "Ticker 24": T(24, 900, 1.1)
+};
+var WEB_STEPS = {
+  "Hero 112": { laptop: "Hero 88", tablet: "Hero 88", mobile: "Hero 56" },
+  "Section 64": { tablet: "Section 48", mobile: "Section 36" },
+  "Lead 22": { mobile: "Lead 18" },
+  "Figure 132": { tablet: "Figure 64", mobile: "Figure 48" },
+  "Quote 40": { mobile: "Quote 26" },
+  "Price 72": { mobile: "Price 56" },
+  "Title 30": { mobile: "Title 24" }
+};
+function ticker(k, parent, o) {
+  const id = marquee(k, parent, { width: 1200, height: o.height, w: o.w, fill: o.fill, loop: o.loop, cells: o.cells, name: o.name ?? "Ticker", rotate: o.rotate, right: o.right, cell: (c, i) => {
+    k.text(c, o.phrases[i % o.phrases.length], { style: o.style, color: o.ink, autoWidth: true, name: "Ticker words" });
+    spark(k, c, Math.round(o.height * 0.42), o.spark, { name: "Ticker spark" });
+  } });
+  k.patch(id, { layoutSizingHorizontal: "FILL" });
+  return id;
+}
+
+export {
+  FIZZ,
+  maxBrand,
+  grot,
+  display,
+  mono,
+  chromePaint,
+  chromeFx,
+  chromeText,
+  relight,
+  plate,
+  stickerEdge,
+  sticker,
+  burstPaths,
+  burst,
+  burstSticker,
+  spark,
+  halftonePaths,
+  halftone,
+  cutout,
+  bowl,
+  slap,
+  wobble,
+  spin,
+  bob,
+  float,
+  marquee,
+  fitMarquee,
+  confetti,
+  phone,
+  callComponent,
+  quietComponent,
+  WEB_TYPE,
+  WEB_STEPS,
+  ticker
+};

package/dist/chunks/chunk-JIBAJIHB.js

@@ -0,0 +1,218 @@
+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 {
+  BOARD_D,
+  BOARD_NAMES,
+  BOARD_W,
+  FAILED,
+  LIVE,
+  framing,
+  lights,
+  machinedBrand,
+  rack,
+  seen,
+  shopLight
+} from "./chunk-UWAMU3QI.js";
+import {
+  phrases,
+  sizes,
+  stage
+} from "./chunk-BJ7KIGYV.js";
+import {
+  key
+} from "./chunk-OTE5FUDA.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  bed
+} from "./chunk-42LEBOKV.js";
+import {
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/machined-trailer.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var B = bed("trailer", 32);
+var { beat } = B;
+var DURATION = B.duration;
+var FPS = 30;
+var SIZES = ["video-1080p", "ig-story", "video-square"];
+var FAIL = beat(1);
+var HOP = beat(4);
+var OUT = beat(8);
+var PRIME = beat(12);
+var SETTLED = beat(15);
+var OPEN = beat(16);
+var CLOSE = beat(22);
+var TURN = beat(24);
+var CALL = beat(27);
+var HITS = [16, 20, 24, 28].map(beat);
+var REACH = 400;
+var LINES = [
+  [0, "A model provider just went down."],
+  [HOP, "Your app didn\u2019t notice. Failover took 38 ms."],
+  [OUT, "One endpoint in front of every model provider."],
+  [PRIME, "Four things inside that you won\u2019t have to build."],
+  [TURN, "Rack it in front of your app this afternoon."]
+];
+var DETAILS = ["Fastest healthy model", "Never pays twice", "Redacts secrets", "A spend limit per key"];
+var CTA = "Start free at {{brand.site}}";
+var CUES = [
+  { layer: "Call", preset: "rise-in", at: CALL, params: { duration: 500 } },
+  { layer: "Terms", preset: "fade-in", at: CALL + beat(0.5), params: { duration: 500 } },
+  { layer: "Call", preset: "pulse", at: beat(28), params: { duration: 600, amount: 0.05 } }
+];
+var LAYOUTS = {
+  "video-1080p": {
+    hook: { cx: 1290, cy: 600, scale: 1.3, rx: 0, ry: -16 },
+    open: { cx: 1300, cy: 575, scale: 0.76, rx: -22, ry: -30 },
+    end: { cx: 1240, cy: 520, scale: 0.95, rx: -7, ry: -12 },
+    above: 7,
+    below: 5,
+    words: { x: 120, y: 120, width: 540, px: 60 },
+    labels: { x: 1530, width: 294, detail: true },
+    offer: { x: 120, y: 470 }
+  },
+  "ig-story": {
+    hook: { cx: 520, cy: 980, scale: 1.02, rx: 0, ry: -14 },
+    open: { cx: 540, cy: 1040, scale: 0.78, rx: -30, ry: -24 },
+    end: { cx: 610, cy: 1e3, scale: 0.9, rx: -7, ry: -12 },
+    above: 9,
+    below: 8,
+    words: { x: 64, y: 262, width: 876, px: 58 },
+    labels: { x: 740, width: 200, detail: false },
+    offer: { x: 64, y: 1310 }
+  },
+  "video-square": {
+    hook: { cx: 560, cy: 640, scale: 1, rx: 0, ry: -14 },
+    open: { cx: 500, cy: 610, scale: 0.66, rx: -24, ry: -28 },
+    end: { cx: 640, cy: 560, scale: 0.9, rx: -7, ry: -12 },
+    above: 7,
+    below: 6,
+    words: { x: 64, y: 60, width: 952, px: 50 },
+    labels: { x: 790, width: 226, detail: false },
+    offer: { x: 64, y: 920 }
+  }
+};
+function build(k, sheet, s) {
+  const L = LAYOUTS[s.preset];
+  k.nameSheet(sheet, `Machined trailer \xB7 ${preset(s.preset).name}`);
+  const light = shopLight(k, sheet, s.W, s.H, { x: L.open.cx / s.W, y: 0.3, reach: 0.75, glow: 0.2, shadow: 0.6 });
+  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 2300 * s.u * (s.wide ? 1 : 1.2), lights: lights(s) });
+  k.timeline(sheet, { duration: DURATION, fps: FPS, audio: B.audio });
+  const R = rack(k, scene, s, { cx: L.open.cx, cy: L.open.cy, scale: L.open.scale, rotateX: L.open.rx, rotateY: L.open.ry, above: L.above, below: L.below, out: REACH, open: true, glint: 0.3 });
+  const at = (p) => framing(k, scene, R.rack, p);
+  const px = L.words.px;
+  k.textStyle(`Kicker ${Math.round(px * 0.36)}`, { ...MONO, size: Math.round(px * 0.36), fontWeight: 700, letterSpacing: 2, lineHeight: Math.round(px * 0.5), textCase: "UPPER" });
+  k.textStyle(`Caption ${px}`, { size: px, fontWeight: 800, letterSpacing: -0.035 * px, lineHeight: Math.round(px * 1.06) });
+  k.textStyle(`Button ${Math.round(px * 0.46)}`, { size: Math.round(px * 0.46), fontWeight: 700, lineHeight: Math.round(px * 0.6) });
+  k.textStyle(`Terms ${Math.round(px * 0.34)}`, { ...MONO, size: Math.round(px * 0.34), fontWeight: 500, lineHeight: Math.round(px * 0.5) });
+  if (!k.hasComponent(`Button ${px}`)) pill(k, `Button ${px}`, { fill: "primary", ink: "onPrimary", style: `Button ${Math.round(px * 0.46)}`, label: CTA, pad: [Math.round(px * 0.3), Math.round(px * 0.5)], radius: 10 });
+  const words = k.stack(sheet, { width: L.words.width, gap: Math.round(px * 0.4), absolute: { x: L.words.x, y: L.words.y }, name: "Words" });
+  const kicker = k.stack(words, { direction: "HORIZONTAL", gap: Math.round(px * 0.24), align: "CENTER", name: "Kicker" });
+  k.rect(kicker, Math.round(px * 0.5), Math.round(px * 0.12), "primary", { radius: 2, name: "Kicker mark" });
+  k.text(kicker, "{{brand.name}} BH-1 \xB7 model gateway", { style: `Kicker ${Math.round(px * 0.36)}`, color: "onBackground", name: "Kicker line" });
+  const box = k.stack(words, { height: Math.round(px * 1.06) * (s.wide ? 4 : 2), name: "Caption box" });
+  const caption = k.text(box, LINES[0][1], { style: `Caption ${px}`, color: "text", name: "Caption" });
+  phrases(k, caption, LINES, { rise: Math.round(px * 0.4) });
+  const offer = k.stack(sheet, { width: L.words.width, gap: Math.round(px * 0.26), absolute: L.offer, name: "Offer" });
+  k.instance(offer, `Button ${px}`, { Label: CTA }, { name: "Call" });
+  k.text(offer, "Free to a million requests a month. No card.", { style: `Terms ${Math.round(px * 0.34)}`, color: "onBackground", name: "Terms" });
+  k.textStyle(`Label ${Math.round(px * 0.5)}`, { size: Math.round(px * 0.5), fontWeight: 800, letterSpacing: -0.4, lineHeight: Math.round(px * 0.58) });
+  if (L.labels.detail) k.textStyle(`Label detail ${Math.round(px * 0.36)}`, { size: Math.round(px * 0.36), fontWeight: 500, lineHeight: Math.round(px * 0.48) });
+  const labels = k.frame(sheet, { x: 0, y: 0, width: s.W, height: s.H }, { name: "Board labels" });
+  R.boards.forEach((b, i) => {
+    const corner = seen(k, scene, b, BOARD_W, BOARD_D * 0.78);
+    const label = k.stack(labels, { width: L.labels.width, gap: 2, name: "Board label", absolute: { x: L.labels.x, y: 0 } });
+    k.text(label, BOARD_NAMES[i], { style: `Label ${Math.round(px * 0.5)}`, color: "text", name: "Board name" });
+    if (L.labels.detail) k.text(label, DETAILS[i], { style: `Label detail ${Math.round(px * 0.36)}`, color: "onBackground", name: "Board detail" });
+    const y = Math.round(corner.y - Math.round(px * 0.29));
+    k.patch(label, { y });
+    const from = Math.round(corner.x + 10 * s.u);
+    const lead = k.rect(labels, Math.max(12, L.labels.x - 14 - from), 3, "route", { radius: 2, name: "Leader", absolute: { x: from, y: Math.round(corner.y - 1) } });
+    k.ellipse(labels, 11, "route", { name: "Leader end", absolute: { x: from - 6, y: Math.round(corner.y - 5) } });
+    const at2 = OPEN + 500 + i * 130;
+    for (const id of [label, lead]) key(k, id, "opacity", [[0, 0, ease.hold], [at2, 0, ease.out("cubic")], [at2 + 300, 1, ease.hold], [CLOSE - 300, 1, ease.out("cubic")], [CLOSE, 0]]);
+    key(k, label, "translateX", [[at2, Math.round(30 * s.u), ease.out("cubic")], [at2 + 400, 0]]);
+  });
+  for (const id of k.named(labels, "Leader end")) key(k, id, "opacity", [[0, 0, ease.hold], [OPEN + 500, 0, ease.out("cubic")], [OPEN + 900, 1, ease.hold], [CLOSE - 300, 1, ease.out("cubic")], [CLOSE, 0]]);
+  const IO = ease.inOut("cubic");
+  const poseKeys = (pick) => [
+    [0, pick(L.hook), ease.inOut("sine")],
+    [OUT, pick(L.hook) + (pick(L.open) - pick(L.hook)) * 0.12, IO],
+    [SETTLED, pick(L.open), ease.hold],
+    [TURN - 200, pick(L.open), IO],
+    [TURN + 1300, pick(L.end), ease.inOut("sine")],
+    [DURATION, pick(L.end) + (pick(L.end) - pick(L.open)) * 0.04]
+  ];
+  key(k, R.rack, "translateX", poseKeys((p) => at(p).translateX));
+  key(k, R.rack, "translateY", poseKeys((p) => at(p).translateY));
+  key(k, R.rack, "z", poseKeys((p) => at(p).z));
+  key(k, R.rack, "rotateX", [[0, L.hook.rx, ease.hold], [OUT + 450, L.hook.rx, IO], ...poseKeys((p) => p.rx).slice(2)]);
+  key(k, R.rack, "rotateY", poseKeys((p) => p.ry));
+  key(k, R.unit, "z", [[0, 0, ease.hold], [OUT, 0, ease.out("expo")], [OUT + 900, REACH]]);
+  key(k, R.lid, "translateY", [[0, 0, ease.hold], [OPEN, 0, ease.out("quint")], [OPEN + 900, R.lidRise, ease.hold], [CLOSE, R.lidRise, IO], [CLOSE + 800, 0]]);
+  R.boards.forEach((b, i) => {
+    const d = (R.boards.length - 1 - i) * 70;
+    key(k, b, "translateY", [[0, 0, ease.hold], [OPEN + 150 + d, 0, ease.back(1.2)], [OPEN + 1e3 + d, R.rise[i], ease.hold], [CLOSE + 60 - d * 0.5, R.rise[i], IO], [CLOSE + 760 - d * 0.5, 0]]);
+    key(k, b, "opacity", [[0, 0, ease.hold], [OPEN + 100, 1, ease.hold], [CLOSE + 820, 0]]);
+  });
+  const F = R.face;
+  key(k, F.faults[FAILED], "opacity", [[0, 0, ease.hold], [FAIL, 1, ease.hold], [FAIL + 110, 0, ease.hold], [FAIL + 220, 1, ease.hold], [FAIL + 330, 0, ease.hold], [FAIL + 440, 1]]);
+  key(k, F.markers[FAILED], "opacity", [[0, 1, ease.hold], [HOP, 0]]);
+  key(k, F.markers[LIVE], "opacity", [[0, 0, ease.hold], [HOP, 1]]);
+  phrases(k, F.route, [[0, "upstream-02"], [HOP, "upstream-03"]], { fade: 90, rise: 0 });
+  phrases(k, F.latency, [[0, "41 ms"], [FAIL, "timeout"], [HOP, "38 ms"]], { fade: 90, rise: 0 });
+  phrases(k, F.status, [[0, "All upstreams healthy"], [FAIL, "Upstream-02 is down"], [HOP, "Failover in 38 ms"]], { fade: 90, rise: 0 });
+  k.animateShader(F.finish, "glint", [{ t: 0, v: -0.5, ease: ease.inOut("sine") }, { t: HOP, v: 1.5, ease: ease.hold }, { t: TURN, v: -0.5, ease: ease.inOut("sine") }, { t: TURN + 2200, v: 0.62, ease: ease.inOut("sine") }, { t: DURATION, v: 0.8 }]);
+  k.animateShader(R.lidFinish, "glint", [{ t: 0, v: 0.1, ease: ease.inOut("sine") }, { t: OPEN, v: 0.5, ease: ease.inOut("sine") }, { t: CLOSE, v: 0.2, ease: ease.inOut("sine") }, { t: TURN + 1800, v: 1.3 }]);
+  key(k, scene, "scene3d.lights[@key].x", [[0, -s.W * 0.2, ease.inOut("sine")], [TURN, -s.W * 0.2, ease.inOut("cubic")], [TURN + 2e3, s.W * 1.1]]);
+  k.animateShader(light, "glow", [{ t: 0, v: 0.12, ease: ease.inOut("sine") }, { t: OPEN - 60, v: 0.16, ease: ease.hold }, ...HITS.flatMap((t, i) => [{ t, v: 0.36, ease: ease.out("cubic") }, { t: (HITS[i + 1] ?? DURATION) - 60, v: 0.2, ease: ease.hold }]), { t: DURATION, v: 0.2 }]);
+  k.cues(sheet, CUES);
+}
+var machined_trailer_default = defineTemplate({
+  id: "motion-machined-trailer",
+  meta: {
+    name: "Machined hardware launch trailer",
+    description: "A 19-second launch trailer in real 3D for developer infrastructure: the product as a brushed-aluminium rack unit. An upstream port goes red and the route hops to the next one in 38 ms, the unit slides out of its cabinet, and on the music\u2019s big hit the lid lifts and four boards rise out of the chassis, each named; then it turns to the camera as a band of light crosses the metal and the offer lands. Lit by a moving key light, finished by a brushed-metal shader, cut to a trailer score (made by PopCraft, CC0), with burned-in captions. 16:9 with 9:16 and square cuts",
+    category: "animation",
+    tags: ["animation", "machined", "hardware", "rack", "server", "3d", "shader", "brushed metal", "industrial", "exploded", "developer", "infrastructure", "ai", "trailer", "launch", "reel", "captions", "music", "saas"],
+    platforms: ["youtube", "x", "linkedin", "instagram", "tiktok", "product-hunt", "web"],
+    formats: ["video", "reel", "short", "post", "ad"],
+    useCases: ["launch", "announcement", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Machined hardware launch trailer", preset(SIZES[0]));
+    k.quantizeGeometry = true;
+    machinedBrand(k);
+    const [cover] = sizes(k, SIZES, (sheet, s) => build(k, sheet, s));
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  machined_trailer_default
+};