@real-music-packages/web-core 0.9.7 → 0.11.0

package/dist/video.js

@@ -1,247 +1,19 @@
-// src/video.ts
-var SAFE_ZONE = { top: 0.15, bottom: 0.28, left: 0.06, right: 0.12 };
-function safeBox(W, H) {
-  const left = W * SAFE_ZONE.left;
-  const right = W * (1 - SAFE_ZONE.right);
-  const top = H * SAFE_ZONE.top;
-  const bottom = H * (1 - SAFE_ZONE.bottom);
-  return {
-    left,
-    right,
-    top,
-    bottom,
-    w: right - left,
-    h: bottom - top,
-    cx: (left + right) / 2,
-    cy: (top + bottom) / 2,
-    centeredW: 2 * Math.min(W / 2 - left, right - W / 2)
-  };
-}
-function safeTitleBaseline(size, H) {
-  return H * SAFE_ZONE.top + size * 0.8 + 4;
-}
-function drawSafeGuides(ctx) {
-  const W = ctx.canvas.width, H = ctx.canvas.height;
-  const b = safeBox(W, H);
-  ctx.save();
-  ctx.globalAlpha = 1;
-  ctx.fillStyle = "rgba(220,40,40,0.35)";
-  ctx.fillRect(0, 0, W, b.top);
-  ctx.fillRect(0, b.bottom, W, H - b.bottom);
-  ctx.fillRect(0, b.top, b.left, b.h);
-  ctx.fillRect(b.right, b.top, W - b.right, b.h);
-  ctx.strokeStyle = "rgba(40,200,90,1)";
-  ctx.lineWidth = 6;
-  ctx.strokeRect(b.left, b.top, b.w, b.h);
-  ctx.restore();
-}
-function pickMimeType() {
-  const candidates = [
-    "video/webm;codecs=vp9,opus",
-    "video/webm;codecs=vp8,opus",
-    "video/webm"
-  ];
-  for (const t of candidates) {
-    if (typeof MediaRecorder !== "undefined" && MediaRecorder.isTypeSupported(t)) return t;
-  }
-  return "video/webm";
-}
-async function recordScenes(scenes, opts) {
-  const { audioStream, width, height, fps = 30, background = "#000000", onProgress } = opts;
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-  const maybeCtx = canvas.getContext("2d");
-  if (!maybeCtx) throw new Error("Failed to get 2D context");
-  const ctx = maybeCtx;
-  const videoStream = canvas.captureStream(fps);
-  const combined = new MediaStream([
-    ...videoStream.getVideoTracks(),
-    ...audioStream.getAudioTracks()
-  ]);
-  const mimeType = pickMimeType();
-  const recorder = new MediaRecorder(combined, {
-    mimeType,
-    videoBitsPerSecond: 4e6,
-    audioBitsPerSecond: 128e3
-  });
-  const chunks = [];
-  recorder.ondataavailable = (e) => {
-    if (e.data.size > 0) chunks.push(e.data);
-  };
-  const stopped = new Promise((res) => {
-    recorder.onstop = () => res();
-  });
-  recorder.start();
-  const totalMs = scenes.reduce((s, sc) => s + sc.durationMs, 0);
-  const t0 = performance.now();
-  onProgress?.({ phase: "capturing", progress01: 0 });
-  let sceneStart = 0;
-  let sceneIdx = 0;
-  let enteredScene = -1;
-  ctx.fillStyle = background;
-  ctx.fillRect(0, 0, width, height);
-  scenes[0].draw(ctx, 0);
-  await new Promise((resolve) => {
-    function tick() {
-      const now = performance.now() - t0;
-      if (now >= totalMs) {
-        setTimeout(resolve, 100);
-        return;
-      }
-      while (sceneIdx < scenes.length - 1 && now - sceneStart >= scenes[sceneIdx].durationMs) {
-        sceneStart += scenes[sceneIdx].durationMs;
-        sceneIdx += 1;
-      }
-      const scene = scenes[sceneIdx];
-      if (enteredScene !== sceneIdx) {
-        enteredScene = sceneIdx;
-        scene.onEnter?.();
-      }
-      const tInScene = (now - sceneStart) / scene.durationMs;
-      ctx.fillStyle = background;
-      ctx.fillRect(0, 0, width, height);
-      scene.draw(ctx, Math.min(1, Math.max(0, tInScene)));
-      onProgress?.({
-        phase: "capturing",
-        progress01: Math.min(0.95, now / totalMs)
-      });
-      requestAnimationFrame(tick);
-    }
-    requestAnimationFrame(tick);
-  });
-  onProgress?.({ phase: "finalizing", progress01: 0.96 });
-  recorder.stop();
-  await stopped;
-  return new Blob(chunks, { type: mimeType });
-}
-function truncate(s, max) {
-  return s.length > max ? s.slice(0, max - 1).trimEnd() + "\u2026" : s;
-}
-function initials(name) {
-  return name.split(/\s+/).filter(Boolean).slice(0, 3).map((w) => w[0]).join("").toUpperCase();
-}
-function drawBottomGradient(ctx, opts = {}) {
-  const W = ctx.canvas.width, H = ctx.canvas.height;
-  const heightFrac = opts.heightFrac ?? 0.3;
-  const maxAlpha = opts.maxAlpha ?? 0.45;
-  const top = H * (1 - heightFrac);
-  const g = ctx.createLinearGradient(0, top, 0, H);
-  g.addColorStop(0, "rgba(0,0,0,0)");
-  g.addColorStop(1, `rgba(0,0,0,${maxAlpha})`);
-  ctx.save();
-  ctx.fillStyle = g;
-  ctx.fillRect(0, top, W, H - top);
-  ctx.restore();
-}
-function hookScene(theme, opts) {
-  return {
-    durationMs: 2e3,
-    draw(ctx, _t01) {
-      const W = ctx.canvas.width;
-      const H = ctx.canvas.height;
-      drawBottomGradient(ctx);
-      ctx.textAlign = "center";
-      ctx.fillStyle = theme.ink;
-      ctx.font = `bold 88px ${theme.fontDisplay}`;
-      opts.lines.forEach((line, i) => {
-        ctx.fillText(line, W / 2, H * 0.42 + i * 104);
-      });
-      const brand = opts.brand ?? theme.brand;
-      ctx.font = `italic 38px ${theme.fontBody}`;
-      ctx.fillStyle = theme.sepia;
-      ctx.fillText(brand, W / 2, H * 0.42 + opts.lines.length * 104 + 12);
-    }
-  };
-}
-function revealScene(theme, opts) {
-  return {
-    durationMs: 2200,
-    draw(ctx, t01) {
-      const W = ctx.canvas.width;
-      const H = ctx.canvas.height;
-      const b = safeBox(W, H);
-      const cx = W / 2;
-      const cy = b.top + b.h * 0.4286;
-      const r = 92;
-      const k = Math.min(1, t01 * 1.4);
-      ctx.globalAlpha = k;
-      ctx.textAlign = "center";
-      ctx.beginPath();
-      ctx.arc(cx, cy, r, 0, Math.PI * 2);
-      ctx.fillStyle = theme.paper;
-      ctx.fill();
-      ctx.lineWidth = 5;
-      ctx.strokeStyle = theme.gold;
-      ctx.stroke();
-      ctx.fillStyle = theme.ink;
-      ctx.font = `bold 76px ${theme.fontDisplay}`;
-      const badge = opts.initials ?? initials(opts.title);
-      ctx.fillText(badge, cx, cy + 27);
-      const truncated = truncate(opts.title, 24);
-      let fontSize = 80;
-      ctx.font = `bold ${fontSize}px ${theme.fontDisplay}`;
-      if (ctx.measureText(truncated).width > W * 0.86) {
-        fontSize = 68;
-        ctx.font = `bold ${fontSize}px ${theme.fontDisplay}`;
-      }
-      ctx.fillStyle = theme.ink;
-      ctx.fillText(truncated, cx, cy + r + 110);
-      ctx.font = `italic 50px ${theme.fontBody}`;
-      ctx.fillStyle = theme.sepia;
-      ctx.fillText(opts.subtitle, cx, cy + r + 176);
-      ctx.globalAlpha = 1;
-    }
-  };
-}
-function ctaScene(theme, opts) {
-  return {
-    durationMs: 2500,
-    draw(ctx, _t01) {
-      const W = ctx.canvas.width;
-      const H = ctx.canvas.height;
-      const b = safeBox(W, H);
-      const baseY = b.cy - 40;
-      ctx.textAlign = "center";
-      if (opts.lines.length > 0) {
-        ctx.fillStyle = theme.ink;
-        ctx.font = `bold 66px ${theme.fontDisplay}`;
-        ctx.fillText(opts.lines[0], W / 2, baseY);
-      }
-      opts.lines.slice(1).forEach((line, i) => {
-        ctx.fillStyle = theme.accent;
-        ctx.font = `bold 72px ${theme.fontDisplay}`;
-        ctx.fillText(line, W / 2, baseY + 100 * (i + 1));
-      });
-    }
-  };
-}
-async function runPromoCapture(opts, record = recordScenes) {
-  const w = window;
-  w.__promoMeta = opts.meta;
-  try {
-    const blob = await record(opts.buildScenes(), {
-      audioStream: opts.audioStream,
-      width: opts.width ?? 1080,
-      height: opts.height ?? 1920,
-      fps: opts.fps,
-      background: opts.background
-    });
-    const url = URL.createObjectURL(blob);
-    w.__promoBlobUrl = url;
-    if (opts.download !== false) {
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `promo-${opts.meta.id ?? "clip"}.webm`;
-      document.body.appendChild(a);
-      a.click();
-    }
-    w.__promoReady = true;
-  } catch (e) {
-    w.__promoError = String(e);
-    throw e;
-  }
-}
+import {
+  SAFE_ZONE,
+  ctaScene,
+  drawBottomGradient,
+  drawSafeGuides,
+  hookScene,
+  initials,
+  loadPortrait,
+  pickMimeType,
+  recordScenes,
+  revealScene,
+  runPromoCapture,
+  safeBox,
+  safeTitleBaseline,
+  truncate
+} from "./chunk-HXTRNE74.js";
 export {
   SAFE_ZONE,
   ctaScene,
@@ -249,6 +21,7 @@ export {
   drawSafeGuides,
   hookScene,
   initials,
+  loadPortrait,
   pickMimeType,
   recordScenes,
   revealScene,

package/dist/video.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/video.ts"],"sourcesContent":["/**\n * Framework-agnostic promo video module.\n *\n * Provides:\n *  - PromoTheme — colour/font/brand tokens\n *  - Scene — {durationMs, draw, onEnter?}\n *  - recordScenes — rAF-based canvas capture → Blob (browser only)\n *  - hookScene / revealScene / ctaScene — scene builders (pure, unit-testable)\n *  - runPromoCapture — orchestrator with dependency-injected recorder\n *\n * Visual style ported from whozart/src/lib/promo.ts + video.ts.\n */\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport interface PromoTheme {\n  paper: string;\n  ink: string;\n  accent: string;\n  sepia: string;\n  gold: string;\n  fontDisplay: string;\n  fontBody: string;\n  brand: string;\n}\n\nexport interface Scene {\n  durationMs: number;\n  draw: (ctx: CanvasRenderingContext2D, t01: number) => void;\n  onEnter?: () => void;\n}\n\nexport interface RecordOpts {\n  audioStream: MediaStream;\n  width: number;\n  height: number;\n  fps?: number;\n  background?: string;\n  onProgress?: (p: { phase: string; progress01: number }) => void;\n}\n\nexport interface PromoMeta {\n  id?: string;\n  title?: string;\n  composer?: string;\n  [k: string]: unknown;\n}\n\nexport interface PromoCaptureOpts {\n  buildScenes: () => Scene[];\n  audioStream: MediaStream;\n  meta: PromoMeta;\n  width?: number;\n  height?: number;\n  fps?: number;\n  background?: string;\n  download?: boolean;\n}\n\n// ─── Safe zone (phone short-form UI) ─────────────────────────────────────────\n\n/**\n * Insets (fractions of frame) kept clear of TikTok/Reels/Shorts UI overlays.\n * `bottom: 0.28` puts the safe-box bottom at 0.72·H — TikTok's caption + right\n * action rail reach ~25–28% up, tighter than the old 0.20, and a posted RET clip\n * had its keyboard clipped at 0.20. `top: 0.15` clears TikTok's top tabs/search\n * row — measured from a real screenshot, the \"Find related content\" search bar\n * bottom sits at ~0.114·H, so 0.10 clashed and 0.13 cleared by only ~31px; 0.15\n * gives a comfortable ~73px. This is the SINGLE source of truth for both safe lines:\n * consumers anchor bottom content to `safeBox().bottom` and top titles to\n * `safeTitleBaseline()` instead of hardcoding. Verify any layout with `?safe=1`.\n */\nexport const SAFE_ZONE = { top: 0.15, bottom: 0.28, left: 0.06, right: 0.12 } as const;\n\nexport interface SafeBox {\n  left: number; right: number; top: number; bottom: number;\n  w: number; h: number; cx: number; cy: number;\n  /** Widest block centered at frame W/2 that still fits inside the box. */\n  centeredW: number;\n}\n\n/** The usable content rectangle for a W×H frame, in pixels. */\nexport function safeBox(W: number, H: number): SafeBox {\n  const left = W * SAFE_ZONE.left;\n  const right = W * (1 - SAFE_ZONE.right);\n  const top = H * SAFE_ZONE.top;\n  const bottom = H * (1 - SAFE_ZONE.bottom);\n  return {\n    left, right, top, bottom,\n    w: right - left, h: bottom - top,\n    cx: (left + right) / 2, cy: (top + bottom) / 2,\n    centeredW: 2 * Math.min(W / 2 - left, right - W / 2),\n  };\n}\n\n/**\n * Lowest first-line baseline (for an ALPHABETIC-baseline title of `size` px) that\n * keeps the title's cap-top inside the safe box top. Phone top chrome (TikTok/Reels\n * \"For You\" tabs + search) sits above `safeBox().top`, and an alphabetic baseline\n * draws glyphs ~0.8*size ABOVE the baseline — so a small `topY` silently breaches\n * the top. Apps clamp their top titles: `y = Math.max(topY, safeTitleBaseline(size, H))`.\n * Single source of truth for the top-safe line, mirroring `safeBox().bottom`.\n */\nexport function safeTitleBaseline(size: number, H: number): number {\n  return H * SAFE_ZONE.top + size * 0.8 + 4;\n}\n\n/** Debug overlay: dim the four unsafe margins + outline the safe box. */\nexport function drawSafeGuides(ctx: CanvasRenderingContext2D): void {\n  const W = ctx.canvas.width, H = ctx.canvas.height;\n  const b = safeBox(W, H);\n  ctx.save();\n  ctx.globalAlpha = 1;\n  ctx.fillStyle = 'rgba(220,40,40,0.35)';\n  ctx.fillRect(0, 0, W, b.top);                  // top\n  ctx.fillRect(0, b.bottom, W, H - b.bottom);    // bottom\n  ctx.fillRect(0, b.top, b.left, b.h);           // left\n  ctx.fillRect(b.right, b.top, W - b.right, b.h); // right (action rail)\n  ctx.strokeStyle = 'rgba(40,200,90,1)';\n  ctx.lineWidth = 6;\n  ctx.strokeRect(b.left, b.top, b.w, b.h);\n  ctx.restore();\n}\n\n// ─── MIME type picker ─────────────────────────────────────────────────────────\n\nexport function pickMimeType(): string {\n  const candidates = [\n    'video/webm;codecs=vp9,opus',\n    'video/webm;codecs=vp8,opus',\n    'video/webm',\n  ];\n  for (const t of candidates) {\n    if (typeof MediaRecorder !== 'undefined' && MediaRecorder.isTypeSupported(t)) return t;\n  }\n  return 'video/webm';\n}\n\n// ─── recordScenes ─────────────────────────────────────────────────────────────\n\nexport async function recordScenes(scenes: Scene[], opts: RecordOpts): Promise<Blob> {\n  const { audioStream, width, height, fps = 30, background = '#000000', onProgress } = opts;\n\n  const canvas = document.createElement('canvas');\n  canvas.width = width;\n  canvas.height = height;\n\n  const maybeCtx = canvas.getContext('2d');\n  if (!maybeCtx) throw new Error('Failed to get 2D context');\n  const ctx: CanvasRenderingContext2D = maybeCtx;\n\n  const videoStream = canvas.captureStream(fps);\n  const combined = new MediaStream([\n    ...videoStream.getVideoTracks(),\n    ...audioStream.getAudioTracks(),\n  ]);\n\n  const mimeType = pickMimeType();\n  const recorder = new MediaRecorder(combined, {\n    mimeType,\n    videoBitsPerSecond: 4_000_000,\n    audioBitsPerSecond: 128_000,\n  });\n\n  const chunks: Blob[] = [];\n  recorder.ondataavailable = (e) => {\n    if (e.data.size > 0) chunks.push(e.data);\n  };\n  const stopped = new Promise<void>((res) => {\n    recorder.onstop = () => res();\n  });\n\n  recorder.start();\n\n  const totalMs = scenes.reduce((s, sc) => s + sc.durationMs, 0);\n  const t0 = performance.now();\n\n  onProgress?.({ phase: 'capturing', progress01: 0 });\n\n  let sceneStart = 0;\n  let sceneIdx = 0;\n  let enteredScene = -1;\n\n  // Draw first frame immediately\n  ctx.fillStyle = background;\n  ctx.fillRect(0, 0, width, height);\n  scenes[0].draw(ctx, 0);\n\n  await new Promise<void>((resolve) => {\n    function tick() {\n      const now = performance.now() - t0;\n      if (now >= totalMs) {\n        setTimeout(resolve, 100);\n        return;\n      }\n\n      // Advance scene index\n      while (\n        sceneIdx < scenes.length - 1 &&\n        now - sceneStart >= scenes[sceneIdx].durationMs\n      ) {\n        sceneStart += scenes[sceneIdx].durationMs;\n        sceneIdx += 1;\n      }\n\n      const scene = scenes[sceneIdx];\n\n      // Fire onEnter once per scene\n      if (enteredScene !== sceneIdx) {\n        enteredScene = sceneIdx;\n        scene.onEnter?.();\n      }\n\n      const tInScene = (now - sceneStart) / scene.durationMs;\n\n      // Clear to background\n      ctx.fillStyle = background;\n      ctx.fillRect(0, 0, width, height);\n\n      scene.draw(ctx, Math.min(1, Math.max(0, tInScene)));\n\n      onProgress?.({\n        phase: 'capturing',\n        progress01: Math.min(0.95, now / totalMs),\n      });\n\n      requestAnimationFrame(tick);\n    }\n\n    requestAnimationFrame(tick);\n  });\n\n  onProgress?.({ phase: 'finalizing', progress01: 0.96 });\n  recorder.stop();\n  await stopped;\n\n  return new Blob(chunks, { type: mimeType });\n}\n\n// ─── Helpers ─────────────────────────────────────────────────────────────────\n\nexport function truncate(s: string, max: number): string {\n  return s.length > max ? s.slice(0, max - 1).trimEnd() + '…' : s;\n}\n\nexport function initials(name: string): string {\n  return name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 3)\n    .map((w) => w[0])\n    .join('')\n    .toUpperCase();\n}\n\n// ─── Scene builders ───────────────────────────────────────────────────────────\n\n/**\n * Dark gradient rising from the frame bottom (opaque-ish at the very bottom,\n * fading out by `heightFrac` up). TikTok overlays the view count bottom-left of\n * every profile-grid thumbnail in WHITE — on our light start screens it was\n * unreadable. Draw this after the background, before content.\n */\nexport function drawBottomGradient(\n  ctx: CanvasRenderingContext2D,\n  opts: { heightFrac?: number; maxAlpha?: number } = {},\n): void {\n  const W = ctx.canvas.width, H = ctx.canvas.height;\n  const heightFrac = opts.heightFrac ?? 0.30;\n  const maxAlpha = opts.maxAlpha ?? 0.45;\n  const top = H * (1 - heightFrac);\n  const g = ctx.createLinearGradient(0, top, 0, H);\n  g.addColorStop(0, \"rgba(0,0,0,0)\");\n  g.addColorStop(1, `rgba(0,0,0,${maxAlpha})`);\n  ctx.save();\n  ctx.fillStyle = g;\n  ctx.fillRect(0, top, W, H - top);\n  ctx.restore();\n}\n\nexport interface HookSceneOpts {\n  lines: string[];\n  brand?: string;\n}\n\nexport function hookScene(theme: PromoTheme, opts: HookSceneOpts): Scene {\n  return {\n    durationMs: 2000,\n    draw(ctx, _t01) {\n      const W = ctx.canvas.width;\n      const H = ctx.canvas.height;\n      // The hook is the profile-grid thumbnail; the bottom gradient keeps\n      // TikTok's white view-count overlay readable on light backdrops.\n      drawBottomGradient(ctx);\n      ctx.textAlign = 'center';\n      ctx.fillStyle = theme.ink;\n      ctx.font = `bold 88px ${theme.fontDisplay}`;\n      opts.lines.forEach((line, i) => {\n        ctx.fillText(line, W / 2, H * 0.42 + i * 104);\n      });\n      const brand = opts.brand ?? theme.brand;\n      ctx.font = `italic 38px ${theme.fontBody}`;\n      ctx.fillStyle = theme.sepia;\n      ctx.fillText(brand, W / 2, H * 0.42 + opts.lines.length * 104 + 12);\n    },\n  };\n}\n\nexport interface RevealSceneOpts {\n  title: string;\n  subtitle: string;\n  initials?: string;\n}\n\nexport function revealScene(theme: PromoTheme, opts: RevealSceneOpts): Scene {\n  return {\n    durationMs: 2200,\n    draw(ctx, t01) {\n      const W = ctx.canvas.width;\n      const H = ctx.canvas.height;\n      const b = safeBox(W, H);\n      const cx = W / 2;\n      // Anchor through the safe box; ~0.4286 of box height ≈ original H*0.40 (no visible shift at 1080×1920).\n      const cy = b.top + b.h * 0.4286;\n      const r = 92;\n      const k = Math.min(1, t01 * 1.4);\n      ctx.globalAlpha = k;\n      ctx.textAlign = 'center';\n\n      // Medallion circle (faint surface)\n      ctx.beginPath();\n      ctx.arc(cx, cy, r, 0, Math.PI * 2);\n      ctx.fillStyle = theme.paper;\n      ctx.fill();\n      ctx.lineWidth = 5;\n      ctx.strokeStyle = theme.gold;\n      ctx.stroke();\n\n      // Initials inside medallion\n      ctx.fillStyle = theme.ink;\n      ctx.font = `bold 76px ${theme.fontDisplay}`;\n      const badge = opts.initials ?? initials(opts.title);\n      ctx.fillText(badge, cx, cy + 27);\n\n      // Title (with font-size fallback if too wide)\n      const truncated = truncate(opts.title, 24);\n      let fontSize = 80;\n      ctx.font = `bold ${fontSize}px ${theme.fontDisplay}`;\n      if (ctx.measureText(truncated).width > W * 0.86) {\n        fontSize = 68;\n        ctx.font = `bold ${fontSize}px ${theme.fontDisplay}`;\n      }\n      ctx.fillStyle = theme.ink;\n      ctx.fillText(truncated, cx, cy + r + 110);\n\n      // Subtitle\n      ctx.font = `italic 50px ${theme.fontBody}`;\n      ctx.fillStyle = theme.sepia;\n      ctx.fillText(opts.subtitle, cx, cy + r + 176);\n\n      ctx.globalAlpha = 1;\n    },\n  };\n}\n\nexport interface CtaSceneOpts {\n  lines: string[];\n}\n\nexport function ctaScene(theme: PromoTheme, opts: CtaSceneOpts): Scene {\n  return {\n    durationMs: 2500,\n    draw(ctx, _t01) {\n      const W = ctx.canvas.width;\n      const H = ctx.canvas.height;\n      const b = safeBox(W, H);\n      // Safe-box-relative base ≈ original H*0.42 (no visible shift at 1080×1920).\n      const baseY = b.cy - 40;\n      ctx.textAlign = 'center';\n      if (opts.lines.length > 0) {\n        ctx.fillStyle = theme.ink;\n        ctx.font = `bold 66px ${theme.fontDisplay}`;\n        ctx.fillText(opts.lines[0], W / 2, baseY);\n      }\n      opts.lines.slice(1).forEach((line, i) => {\n        ctx.fillStyle = theme.accent;\n        ctx.font = `bold 72px ${theme.fontDisplay}`;\n        ctx.fillText(line, W / 2, baseY + 100 * (i + 1));\n      });\n    },\n  };\n}\n\n// ─── runPromoCapture ──────────────────────────────────────────────────────────\n\nexport async function runPromoCapture(\n  opts: PromoCaptureOpts,\n  record: (scenes: Scene[], o: RecordOpts) => Promise<Blob> = recordScenes,\n): Promise<void> {\n  const w = window as unknown as Record<string, unknown>;\n  w.__promoMeta = opts.meta;\n  try {\n    const blob = await record(opts.buildScenes(), {\n      audioStream: opts.audioStream,\n      width: opts.width ?? 1080,\n      height: opts.height ?? 1920,\n      fps: opts.fps,\n      background: opts.background,\n    });\n    const url = URL.createObjectURL(blob);\n    w.__promoBlobUrl = url;\n    if (opts.download !== false) {\n      const a = document.createElement('a');\n      a.href = url;\n      a.download = `promo-${opts.meta.id ?? 'clip'}.webm`;\n      document.body.appendChild(a);\n      a.click();\n    }\n    w.__promoReady = true;\n  } catch (e) {\n    w.__promoError = String(e);\n    throw e;\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@real-music-packages/web-core",
-  "version": "0.9.7",
+  "version": "0.11.0",
   "description": "Shared music-theory + audio primitives for the music-suite web apps",
   "type": "module",
   "main": "./dist/index.js",
@@ -30,6 +30,10 @@
     "./streak": {
       "types": "./dist/streak.d.ts",
       "import": "./dist/streak.js"
+    },
+    "./scene": {
+      "types": "./dist/scene/index.d.ts",
+      "import": "./dist/scene/index.js"
     }
   },
   "files": [
@@ -62,7 +66,12 @@
     }
   },
   "devDependencies": {
+    "@types/jsdom": "^28.0.3",
+    "canvas": "^3.2.3",
+    "jsdom": "^29.1.1",
     "opensheetmusicdisplay": "^1.9.9",
+    "pixelmatch": "^7.2.0",
+    "pngjs": "^7.0.0",
     "tone": "^15.1.22",
     "tsup": "^8.3.0",
     "typescript": "^5.6.0",

package/dist/chunk-BPL5LLQH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/salamander.ts","../src/audioHelpers.ts"],"sourcesContent":["export const SALAMANDER_CDN_BASE = 'https://tonejs.github.io/audio/salamander/';\n\n/** 8-anchor sample set (Stave uses these from the CDN). */\nexport const SALAMANDER_URLS_8: Record<string, string> = {\n  C2: 'C2.mp3', 'F#2': 'Fs2.mp3', C3: 'C3.mp3', 'F#3': 'Fs3.mp3',\n  C4: 'C4.mp3', 'F#4': 'Fs4.mp3', C5: 'C5.mp3', 'F#5': 'Fs5.mp3',\n};\n\n/** Full chromatic-anchor set A0..C8 (RET ships these locally under /audio/salamander/). */\nexport const SALAMANDER_URLS_FULL: Record<string, string> = {\n  A0: 'A0.mp3', C1: 'C1.mp3', 'D#1': 'Ds1.mp3', 'F#1': 'Fs1.mp3', A1: 'A1.mp3',\n  C2: 'C2.mp3', 'D#2': 'Ds2.mp3', 'F#2': 'Fs2.mp3', A2: 'A2.mp3',\n  C3: 'C3.mp3', 'D#3': 'Ds3.mp3', 'F#3': 'Fs3.mp3', A3: 'A3.mp3',\n  C4: 'C4.mp3', 'D#4': 'Ds4.mp3', 'F#4': 'Fs4.mp3', A4: 'A4.mp3',\n  C5: 'C5.mp3', 'D#5': 'Ds5.mp3', 'F#5': 'Fs5.mp3', A5: 'A5.mp3',\n  C6: 'C6.mp3', 'D#6': 'Ds6.mp3', 'F#6': 'Fs6.mp3', A6: 'A6.mp3',\n  C7: 'C7.mp3', 'D#7': 'Ds7.mp3', 'F#7': 'Fs7.mp3', A7: 'A7.mp3',\n  C8: 'C8.mp3',\n};\n","// Tone is provided by the consumer (peer dep); type loosely to avoid coupling.\ntype ToneModule = any; // eslint-disable-line @typescript-eslint/no-explicit-any\n\nexport interface SalamanderSamplerOpts {\n  urls: Record<string, string>;\n  baseUrl: string;\n  release: number;\n  volumeDb?: number;\n  onload?: () => void;\n  onerror?: (e: unknown) => void;\n}\n\n/** Create a Salamander Tone.Sampler routed to destination. Mirrors the exact\n *  `new Tone.Sampler({...}).toDestination()` both engines did inline. */\nexport function createSalamanderSampler(Tone: ToneModule, opts: SalamanderSamplerOpts) {\n  const sampler = new Tone.Sampler({\n    urls: opts.urls,\n    baseUrl: opts.baseUrl,\n    release: opts.release,\n    onload: opts.onload,\n    onerror: opts.onerror,\n  }).toDestination();\n  if (opts.volumeDb !== undefined) sampler.volume.value = opts.volumeDb;\n  return sampler;\n}\n\n/** Generate a Tone.Reverb, racing reverb.generate() against a timeout so it can\n *  never hang init on iOS. Returns the reverb if generated, else null. Caller\n *  wires routing (toDestination / reroute). Mirrors RET's addReverbInBackground. */\nexport async function generateReverb(\n  Tone: ToneModule,\n  opts: { decay: number; wet: number },\n  timeoutMs: number,\n): Promise<any | null> { // eslint-disable-line @typescript-eslint/no-explicit-any\n  const reverb = new Tone.Reverb(opts);\n  const ok = await Promise.race([\n    reverb.generate().then(() => true),\n    new Promise<boolean>((r) => setTimeout(() => r(false), timeoutMs)),\n  ]);\n  return ok ? reverb : null;\n}\n"],"mappings":";AAAO,IAAM,sBAAsB;AAG5B,IAAM,oBAA4C;AAAA,EACvD,IAAI;AAAA,EAAU,OAAO;AAAA,EAAW,IAAI;AAAA,EAAU,OAAO;AAAA,EACrD,IAAI;AAAA,EAAU,OAAO;AAAA,EAAW,IAAI;AAAA,EAAU,OAAO;AACvD;AAGO,IAAM,uBAA+C;AAAA,EAC1D,IAAI;AAAA,EAAU,IAAI;AAAA,EAAU,OAAO;AAAA,EAAW,OAAO;AAAA,EAAW,IAAI;AAAA,EACpE,IAAI;AAAA,EAAU,OAAO;AAAA,EAAW,OAAO;AAAA,EAAW,IAAI;AAAA,EACtD,IAAI;AAAA,EAAU,OAAO;AAAA,EAAW,OAAO;AAAA,EAAW,IAAI;AAAA,EACtD,IAAI;AAAA,EAAU,OAAO;AAAA,EAAW,OAAO;AAAA,EAAW,IAAI;AAAA,EACtD,IAAI;AAAA,EAAU,OAAO;AAAA,EAAW,OAAO;AAAA,EAAW,IAAI;AAAA,EACtD,IAAI;AAAA,EAAU,OAAO;AAAA,EAAW,OAAO;AAAA,EAAW,IAAI;AAAA,EACtD,IAAI;AAAA,EAAU,OAAO;AAAA,EAAW,OAAO;AAAA,EAAW,IAAI;AAAA,EACtD,IAAI;AACN;;;ACJO,SAAS,wBAAwB,MAAkB,MAA6B;AACrF,QAAM,UAAU,IAAI,KAAK,QAAQ;AAAA,IAC/B,MAAM,KAAK;AAAA,IACX,SAAS,KAAK;AAAA,IACd,SAAS,KAAK;AAAA,IACd,QAAQ,KAAK;AAAA,IACb,SAAS,KAAK;AAAA,EAChB,CAAC,EAAE,cAAc;AACjB,MAAI,KAAK,aAAa,OAAW,SAAQ,OAAO,QAAQ,KAAK;AAC7D,SAAO;AACT;AAKA,eAAsB,eACpB,MACA,MACA,WACqB;AACrB,QAAM,SAAS,IAAI,KAAK,OAAO,IAAI;AACnC,QAAM,KAAK,MAAM,QAAQ,KAAK;AAAA,IAC5B,OAAO,SAAS,EAAE,KAAK,MAAM,IAAI;AAAA,IACjC,IAAI,QAAiB,CAAC,MAAM,WAAW,MAAM,EAAE,KAAK,GAAG,SAAS,CAAC;AAAA,EACnE,CAAC;AACD,SAAO,KAAK,SAAS;AACvB;","names":[]}