onda-engine 0.1.0

package/dist/cinema.js

@@ -0,0 +1,1687 @@
+import * as Components from 'onda-engine/components';
+import { settleTime, manifestEntry, fitMaxWidth, fitFontSize, measureText, resolvePlacement, isPlacement, defaultTheme } from 'onda-engine/components';
+import { TransitionSeries, linearTiming, Sequence, Group, Rect, Composition, crossFade, useCurrentFrame, useVideoConfig, Camera, lumaWipe, filmBurn, whipPan, zoomBlur, typeMask, morph, gridPixelate, glassWipe, expandMorph, devicePullback, chromaticAberration, blur, none, dipToColor, depthPush, zoom, push, clockWipe, flip, iris, wipe, slide, fade, Scene3D, AbsoluteFill, Text, clipEllipse, clipPath, clipRect } from 'onda-engine/react';
+import { createElement, cloneElement } from 'react';
+
+// ../cinema/src/index.tsx
+
+// ../cinema/src/props.ts
+var PLACEMENT_COORDS = {
+  center: [0.5, 0.5],
+  top: [0.5, 0.1],
+  bottom: [0.5, 0.9],
+  left: [0.1, 0.5],
+  right: [0.9, 0.5],
+  "top-left": [0.1, 0.1],
+  "top-right": [0.9, 0.1],
+  "bottom-left": [0.1, 0.9],
+  "bottom-right": [0.9, 0.9],
+  "upper-third": [0.5, 0.28],
+  "lower-third": [0.5, 0.72]
+};
+var SELF_ANCHORING = /* @__PURE__ */ new Set([
+  "LowerThird",
+  "Callout",
+  "BlurReveal",
+  "Button",
+  "Captions",
+  "ChapterCard",
+  "CountUp",
+  "EndCard",
+  "InputField",
+  "KineticText",
+  "MaskReveal",
+  "MatrixDecode",
+  "PricingCard",
+  "QuoteCard",
+  "SlotMachineRoll",
+  "StatCard",
+  "Terminal",
+  "TextAnimator",
+  "TitleCard",
+  "Typewriter"
+]);
+function placementOffset(props, w, h) {
+  const p = props?.placement;
+  let fx = 0.5;
+  let fy = 0.5;
+  const coords = typeof p === "string" ? PLACEMENT_COORDS[p] : void 0;
+  if (coords) [fx, fy] = coords;
+  else if (p && typeof p === "object") {
+    const o = p;
+    if (typeof o.x === "number") fx = o.x;
+    if (typeof o.y === "number") fy = o.y;
+  }
+  return [(fx - 0.5) * w, (fy - 0.5) * h];
+}
+var SIZE_ROLES = {
+  hero: 0.15,
+  heading: 0.09,
+  subheading: 0.052,
+  body: 0.03,
+  caption: 0.02
+};
+var roleToPx = (role, w, h) => Math.round((SIZE_ROLES[role] ?? 0) * Math.min(w, h));
+var isPxSource = (name) => name === "fontSize" || name.endsWith("FontSize");
+var PROP_ALIASES = {
+  TitleCard: {
+    titleSize: "titleSize",
+    titleFontSize: "titleSize",
+    subtitleSize: "subtitleSize",
+    subtitleFontSize: "subtitleSize"
+  },
+  Highlight: { size: "fontSize", fontSize: "fontSize" },
+  WordStagger: { size: "fontSize", fontSize: "fontSize" },
+  Captions: { size: "fontSize", fontSize: "fontSize" },
+  StatCard: {
+    numberSize: "valueSize",
+    numberFontSize: "valueSize",
+    labelSize: "labelSize",
+    labelFontSize: "labelSize"
+  }
+};
+function adaptProps(component, props, w, h) {
+  const out = { ...props ?? {} };
+  const aliases = PROP_ALIASES[component];
+  if (aliases) {
+    const pxValue = {};
+    const roleValue = {};
+    for (const [src, target] of Object.entries(aliases)) {
+      if (!(src in out)) continue;
+      const v = out[src];
+      if (isPxSource(src)) {
+        if (typeof v === "number") pxValue[target] = v;
+      } else if (typeof v === "string" && v in SIZE_ROLES) {
+        roleValue[target] = roleToPx(v, w, h);
+      } else if (typeof v === "number") {
+        roleValue[target] = v;
+      }
+      if (src !== target) delete out[src];
+    }
+    for (const target of /* @__PURE__ */ new Set([...Object.keys(roleValue), ...Object.keys(pxValue)])) {
+      out[target] = pxValue[target] ?? roleValue[target];
+    }
+  }
+  for (const k of Object.keys(out)) {
+    const v = out[k];
+    if (typeof v === "string" && v in SIZE_ROLES) out[k] = roleToPx(v, w, h);
+  }
+  return out;
+}
+
+// ../cinema/src/timing.ts
+function timeSpecToSeconds(spec, fps) {
+  if (spec == null) return 0;
+  if (typeof spec === "number") return spec >= 0 ? spec : 0;
+  const s = spec.trim();
+  if (s === "") return 0;
+  if (s.includes(":")) {
+    const [m, sec] = s.split(":");
+    return (Number(m) || 0) * 60 + (Number(sec) || 0);
+  }
+  if (s.endsWith("ms")) return (Number(s.slice(0, -2)) || 0) / 1e3;
+  if (s.endsWith("f")) return (Number(s.slice(0, -1)) || 0) / fps;
+  if (s.endsWith("s")) return Number(s.slice(0, -1)) || 0;
+  return Number(s) || 0;
+}
+function toFrames(spec, fps) {
+  return Math.round(timeSpecToSeconds(spec, fps) * fps);
+}
+function sceneDurationSeconds(scene, fps) {
+  if (scene.for != null) return timeSpecToSeconds(scene.for, fps);
+  let max = 0;
+  for (const track of scene.tracks) {
+    for (const e of track.entries) {
+      const end = timeSpecToSeconds(e.at, fps) + timeSpecToSeconds(e.for, fps);
+      if (end > max) max = end;
+    }
+  }
+  return max > 0 ? max : 3;
+}
+function sceneDurationFrames(scene, fps) {
+  return Math.max(1, Math.round(sceneDurationSeconds(scene, fps) * fps));
+}
+var DEFAULT_TRANSITION_FRAMES = 15;
+function transitionOverlapFrames(prev, scene, fps) {
+  if (!prev || !scene.transition) return 0;
+  const requested = scene.transition.durationInFrames ?? DEFAULT_TRANSITION_FRAMES;
+  const shorter = Math.min(sceneDurationFrames(prev, fps), sceneDurationFrames(scene, fps));
+  return Math.max(1, Math.min(requested, Math.floor(shorter / 3)));
+}
+function scenePlacements(scenes, fps) {
+  const out = [];
+  let offset = 0;
+  scenes.forEach((scene, i) => {
+    const overlapIn = i > 0 ? transitionOverlapFrames(scenes[i - 1], scene, fps) : 0;
+    offset -= overlapIn;
+    const durationInFrames = sceneDurationFrames(scene, fps);
+    out.push({ start: offset, durationInFrames, overlapIn });
+    offset += durationInFrames;
+  });
+  return out;
+}
+function totalFrames(payload, fps) {
+  let total = 0;
+  let prev;
+  for (const scene of payload.scenes) {
+    total -= transitionOverlapFrames(prev, scene, fps);
+    total += sceneDurationFrames(scene, fps);
+    prev = scene;
+  }
+  return Math.max(1, total);
+}
+
+// ../cinema/src/inspect/constants.ts
+var CONTRAST_MIN_BODY = 4.5;
+var CONTRAST_MIN_LARGE = 3;
+var LARGE_TEXT_PX = 24;
+var LARGE_TEXT_BOLD_PX = 14 * 4 / 3;
+var BOLD_WEIGHT = 700;
+var READ_SECONDS_PER_WORD = 0.25;
+var READ_ORIENTATION_SECONDS = 0.6;
+var READ_MIN_SECONDS = 1.2;
+function readingTimeSeconds(wordCount) {
+  return Math.max(READ_MIN_SECONDS, READ_SECONDS_PER_WORD * wordCount + READ_ORIENTATION_SECONDS);
+}
+var v1920 = (px) => px / 1920;
+var h1080 = (px) => px / 1080;
+var SAFE_AREAS = {
+  "16:9": { top: 0.05, bottom: 0.05, left: 0.1, right: 0.1 },
+  "9:16": { top: v1920(220), bottom: v1920(420), left: h1080(60), right: h1080(164) },
+  "1:1": { top: 0.05, bottom: 0.1, left: 0.06, right: 0.06 },
+  "4:5": { top: 0.05, bottom: 0.12, left: 0.06, right: 0.06 }
+};
+function inferFormat(width, height) {
+  const ratio = width / height;
+  const known = [
+    ["16:9", 16 / 9],
+    ["9:16", 9 / 16],
+    ["1:1", 1],
+    ["4:5", 4 / 5]
+  ];
+  let best = "16:9";
+  let bestD = Number.POSITIVE_INFINITY;
+  for (const [id, r] of known) {
+    const d = Math.abs(Math.log(ratio / r));
+    if (d < bestD) {
+      bestD = d;
+      best = id;
+    }
+  }
+  return best;
+}
+var FONT_FLOOR_PX = {
+  "16:9": 28,
+  "9:16": 40,
+  "1:1": 40,
+  "4:5": 40
+};
+var FONT_FLOOR_REFERENCE_DIM = 1080;
+function fontFloorPx(format, width, height) {
+  return FONT_FLOOR_PX[format] * Math.min(width, height) / FONT_FLOOR_REFERENCE_DIM;
+}
+var FOCAL_COLLISION_WINDOW_SECONDS = 0.25;
+var TRANSITION_BUDGET_SECONDS = 0.6;
+var DENSITY_MAX_NON_AMBIENT = 5;
+var DENSITY_MAX_FOCAL = 1;
+
+// ../cinema/src/inspect/collisions.ts
+var secs = (frames, fps) => `${(Math.round(frames / fps * 100) / 100).toString()}s`;
+var checkCollisions = (ctx) => {
+  const { resolved } = ctx;
+  const { fps } = resolved;
+  const violations = [];
+  const windowFrames = FOCAL_COLLISION_WINDOW_SECONDS * fps;
+  const focal = resolved.entries.filter((e) => e.role === "focal" && e.visibleFrames > 0).sort((a, b) => a.absStart - b.absStart);
+  for (let i = 1; i < focal.length; i++) {
+    const a = focal[i - 1];
+    const b = focal[i];
+    if (!a || !b) continue;
+    const gap = b.absStart - a.absStart;
+    if (gap <= windowFrames) {
+      violations.push({
+        check: "timing.collisions",
+        severity: "warn",
+        targetId: b.targetId,
+        sceneId: b.sceneId,
+        message: `focal entrances collide: "${a.targetId}" and "${b.targetId}" begin ${secs(gap, fps)} apart (\u2264${FOCAL_COLLISION_WINDOW_SECONDS}s \u2014 inside the attention window; stagger them or demote one to 'support')`
+      });
+    }
+  }
+  for (const entry of resolved.entries) {
+    const settle = settleTime(entry.component, entry.adapted, fps);
+    if (settle === null || entry.visibleFrames <= 0) continue;
+    if (settle > entry.visibleFrames) {
+      const fitsViaClamp = manifestEntry(entry.component)?.props.some((p) => p.name === "fitToClip");
+      violations.push({
+        check: "timing.collisions",
+        severity: "warn",
+        targetId: entry.targetId,
+        sceneId: entry.sceneId,
+        message: `${entry.component}'s entrance settles at ${secs(settle, fps)} but it is only on screen for ${secs(entry.visibleFrames, fps)} \u2014 the move is cut off mid-flight`,
+        // Mechanical: the component's own envelope clamp, when it has one.
+        fix: fitsViaClamp ? { prop: "fitToClip", suggested: true } : void 0
+      });
+    }
+  }
+  const budgetFrames = Math.round(TRANSITION_BUDGET_SECONDS * fps);
+  for (const t of resolved.transitions) {
+    if (t.durationInFrames > budgetFrames) {
+      violations.push({
+        check: "timing.collisions",
+        severity: "warn",
+        targetId: t.sceneId,
+        sceneId: t.sceneId,
+        message: `"${t.type}" transition into "${t.sceneId}" runs ${secs(t.durationInFrames, fps)} \u2014 over the ${TRANSITION_BUDGET_SECONDS}s budget (both scenes read as mush for the whole overlap)`,
+        fix: { prop: "transition.durationInFrames", suggested: budgetFrames }
+      });
+    }
+  }
+  return violations;
+};
+
+// ../cinema/src/inspect/density.ts
+function sceneDensity(resolved, sceneIndex) {
+  const sceneId = resolved.scenes[sceneIndex]?.scene.id ?? `scene-${sceneIndex}`;
+  const events = [];
+  for (const e of resolved.entries) {
+    if (e.sceneIndex !== sceneIndex || e.visibleFrames <= 0) continue;
+    const nonAmbient2 = e.role === "ambient" ? 0 : 1;
+    const focalDelta = e.role === "focal" ? 1 : 0;
+    events.push({ frame: e.localStart, nonAmbient: nonAmbient2, focal: focalDelta });
+    events.push({
+      frame: e.localStart + e.visibleFrames,
+      nonAmbient: -nonAmbient2,
+      focal: -focalDelta
+    });
+  }
+  events.sort((a, b) => a.frame - b.frame || a.nonAmbient - b.nonAmbient);
+  let nonAmbient = 0;
+  let focal = 0;
+  let peakNonAmbient = 0;
+  let peakFocal = 0;
+  let peakFrame = 0;
+  for (const ev of events) {
+    nonAmbient += ev.nonAmbient;
+    focal += ev.focal;
+    if (nonAmbient > peakNonAmbient) {
+      peakNonAmbient = nonAmbient;
+      peakFrame = ev.frame;
+    }
+    if (focal > peakFocal) peakFocal = focal;
+  }
+  return { sceneId, peakNonAmbient, peakFocal, peakFrame };
+}
+function densityMetrics(resolved) {
+  return resolved.scenes.map((_, i) => sceneDensity(resolved, i));
+}
+var checkDensity = (ctx) => {
+  const violations = [];
+  for (const d of densityMetrics(ctx.resolved)) {
+    if (d.peakNonAmbient > DENSITY_MAX_NON_AMBIENT) {
+      violations.push({
+        check: "density.score",
+        severity: "warn",
+        targetId: d.sceneId,
+        sceneId: d.sceneId,
+        message: `scene "${d.sceneId}" peaks at ${d.peakNonAmbient} concurrently visible non-ambient entries (frame ${d.peakFrame}, scene-local) \u2014 budget is ${DENSITY_MAX_NON_AMBIENT}; cut, stagger, or mark atmosphere 'ambient'`
+      });
+    }
+    if (d.peakFocal > DENSITY_MAX_FOCAL) {
+      violations.push({
+        check: "density.score",
+        severity: "warn",
+        targetId: d.sceneId,
+        sceneId: d.sceneId,
+        message: `scene "${d.sceneId}" shows ${d.peakFocal} focal entries at once \u2014 only ${DENSITY_MAX_FOCAL} thing can be THE thing; demote the rest to 'support'`
+      });
+    }
+  }
+  return violations;
+};
+
+// ../cinema/src/inspect/frames.ts
+var checkTransitionCapture = (ctx) => {
+  const frames = ctx.opts.frames;
+  if (!frames || frames.length === 0) return [];
+  const { resolved } = ctx;
+  const violations = [];
+  for (const f of frames) {
+    const hit = resolved.transitions.find((t) => f >= t.start && f < t.start + t.durationInFrames);
+    if (!hit) continue;
+    const before = hit.start - 1;
+    const after = hit.start + hit.durationInFrames;
+    const candidates = [before, after].filter((c) => c >= 0 && c < resolved.totalFrames);
+    const suggested = candidates.length > 0 ? candidates.reduce((best, c) => Math.abs(c - f) < Math.abs(best - f) ? c : best) : f;
+    violations.push({
+      check: "frames.transitionCapture",
+      severity: "warn",
+      targetId: hit.sceneId,
+      sceneId: hit.sceneId,
+      message: `frame ${f} lands inside the "${hit.type}" transition into "${hit.sceneId}" (frames ${hit.start}\u2013${hit.start + hit.durationInFrames - 1}) \u2014 it captures two scenes blended`,
+      fix: { prop: "frames", suggested }
+    });
+  }
+  return violations;
+};
+
+// ../cinema/src/inspect/color.ts
+function parseColor(value) {
+  if (typeof value !== "string") return null;
+  const s = value.trim();
+  if (!s.startsWith("#")) return null;
+  const hex = s.slice(1);
+  if (!/^[0-9a-fA-F]+$/.test(hex)) return null;
+  if (hex.length === 3) {
+    const [r, g, b] = hex;
+    return {
+      r: Number.parseInt(`${r}${r}`, 16) / 255,
+      g: Number.parseInt(`${g}${g}`, 16) / 255,
+      b: Number.parseInt(`${b}${b}`, 16) / 255,
+      a: 1
+    };
+  }
+  if (hex.length === 6 || hex.length === 8) {
+    return {
+      r: Number.parseInt(hex.slice(0, 2), 16) / 255,
+      g: Number.parseInt(hex.slice(2, 4), 16) / 255,
+      b: Number.parseInt(hex.slice(4, 6), 16) / 255,
+      a: hex.length === 8 ? Number.parseInt(hex.slice(6, 8), 16) / 255 : 1
+    };
+  }
+  return null;
+}
+var linearize = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+function relativeLuminance(c) {
+  return 0.2126 * linearize(c.r) + 0.7152 * linearize(c.g) + 0.0722 * linearize(c.b);
+}
+function contrastRatio(a, b) {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  const [hi, lo] = la >= lb ? [la, lb] : [lb, la];
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+// ../cinema/src/inspect/resolve.ts
+function resolveComposition(payload) {
+  const fps = payload.fps > 0 ? payload.fps : 30;
+  const { width, height } = payload;
+  const scenesIn = payload.scenes ?? [];
+  const placements = scenePlacements(scenesIn, fps);
+  const total = totalFrames(payload, fps);
+  const scenes = scenesIn.map((scene, index) => ({
+    scene,
+    index,
+    start: placements[index]?.start ?? 0,
+    durationInFrames: placements[index]?.durationInFrames ?? 1
+  }));
+  const transitions = [];
+  scenesIn.forEach((scene, i) => {
+    const overlap = placements[i]?.overlapIn ?? 0;
+    if (i > 0 && scene.transition && overlap > 0) {
+      transitions.push({
+        sceneIndex: i,
+        sceneId: scene.id,
+        type: scene.transition.type,
+        start: placements[i]?.start ?? 0,
+        durationInFrames: overlap
+      });
+    }
+  });
+  const entries = [];
+  for (const { scene, index: si, start: sceneStart, durationInFrames: sceneDur } of scenes) {
+    scene.tracks?.forEach((track, ti) => {
+      track.entries.forEach((entry, ei) => {
+        const path = `scenes[${si}].tracks[${ti}].entries[${ei}]`;
+        const localStart = toFrames(entry.at, fps);
+        const dur = toFrames(entry.for, fps);
+        const visibleEnd = Math.min(localStart + dur, sceneDur);
+        entries.push({
+          kind: "scene",
+          component: entry.component,
+          props: entry.props ?? {},
+          adapted: adaptProps(entry.component, entry.props, width, height),
+          role: entry.role ?? "support",
+          targetId: entry.id ?? path,
+          path,
+          sceneId: scene.id,
+          sceneIndex: si,
+          trackIndex: ti,
+          entryIndex: ei,
+          localStart,
+          absStart: sceneStart + localStart,
+          durationInFrames: dur,
+          visibleFrames: Math.max(0, visibleEnd - localStart),
+          raw: entry
+        });
+      });
+    });
+  }
+  const layerEntries = [];
+  payload.layers?.forEach((layer, li) => {
+    layer.entries.forEach((entry, ei) => {
+      const path = `layers[${li}].entries[${ei}]`;
+      const from = toFrames(entry.at ?? 0, fps);
+      const dur = entry.for != null ? toFrames(entry.for, fps) : Math.max(1, total - from);
+      layerEntries.push({
+        kind: "layer",
+        component: entry.component,
+        props: entry.props ?? {},
+        adapted: adaptProps(entry.component, entry.props, width, height),
+        role: "support",
+        targetId: entry.id ?? path,
+        path,
+        localStart: from,
+        absStart: from,
+        durationInFrames: dur,
+        visibleFrames: Math.max(0, Math.min(from + dur, total) - from),
+        under: Boolean(layer.under),
+        raw: entry
+      });
+    });
+  });
+  return {
+    payload,
+    fps,
+    width,
+    height,
+    totalFrames: total,
+    scenes,
+    entries,
+    layerEntries,
+    transitions
+  };
+}
+function windowsOverlap(aStart, aLen, bStart, bLen) {
+  return aStart < bStart + bLen && bStart < aStart + aLen;
+}
+function parseDefault(literal) {
+  if (literal === void 0) return void 0;
+  const s = literal.trim();
+  if (s === "true") return true;
+  if (s === "false") return false;
+  const n = Number(s);
+  if (s !== "" && Number.isFinite(n)) return n;
+  if (s.startsWith("'") && s.endsWith("'") || s.startsWith('"') && s.endsWith('"') || s.startsWith("`") && s.endsWith("`"))
+    return s.slice(1, -1);
+  return void 0;
+}
+var wordsOf = (s) => s.split(/\s+/).filter(Boolean).length;
+function totalWords(blocks) {
+  return blocks.reduce((sum, b) => sum + wordsOf(b.content), 0);
+}
+function letterSpacingPx(value, fontSize) {
+  if (typeof value === "number") return value;
+  if (typeof value !== "string") return void 0;
+  const n = Number.parseFloat(value.trim());
+  if (!Number.isFinite(n)) return void 0;
+  return value.trim().endsWith("em") ? n * fontSize : n;
+}
+function propValue(entry, meta, name) {
+  const explicit = entry.adapted[name];
+  if (explicit !== void 0) return explicit;
+  return parseDefault(meta?.default);
+}
+var WRAPPING_COMPONENTS = /* @__PURE__ */ new Set(["Captions"]);
+var NON_READABLE_TEXT_PROPS = /* @__PURE__ */ new Set(["charset"]);
+function sizePropFor(m, textProp) {
+  const sizeProps = m.props.filter((p) => p.role === "fontSize");
+  const prefixed = sizeProps.find(
+    (p) => p.name === `${textProp}Size` || p.name === `${textProp}FontSize`
+  );
+  if (prefixed) return prefixed;
+  if (textProp === "text" || sizeProps.length === 1)
+    return sizeProps.find((p) => p.name === "fontSize") ?? sizeProps[0];
+  return void 0;
+}
+function colorPropFor(m, textProp) {
+  const colorProps = m.props.filter((p) => p.role === "color");
+  return colorProps.find((p) => p.name === `${textProp}Color`) ?? (textProp === "text" || colorProps.length === 1 ? colorProps.find((p) => p.name === "color") : void 0);
+}
+var MUTED_HINT = /textmuted|muted|dim\b/i;
+function textBlocks(entry, theme) {
+  const m = manifestEntry(entry.component);
+  if (!m) return [];
+  const blocks = [];
+  for (const p of m.props) {
+    if (p.role !== "text" || NON_READABLE_TEXT_PROPS.has(p.name)) continue;
+    const value = propValue(entry, p, p.name);
+    if (typeof value !== "string" || value.trim() === "") continue;
+    const sizeMeta = sizePropFor(m, p.name);
+    const sizeValue = sizeMeta ? propValue(entry, sizeMeta, sizeMeta.name) : void 0;
+    const fontSize = typeof sizeValue === "number" && sizeValue > 0 ? sizeValue : 48;
+    const colorMeta = colorPropFor(m, p.name);
+    const explicitColor = colorMeta ? entry.adapted[colorMeta.name] : void 0;
+    let color;
+    let colorExplicit = false;
+    if (typeof explicitColor === "string") {
+      color = explicitColor;
+      colorExplicit = true;
+    } else if (colorMeta?.themeable) {
+      color = MUTED_HINT.test(colorMeta.description) ? theme.textMuted : theme.text;
+    } else {
+      color = theme.text;
+    }
+    const weightMeta = m.props.find((q) => q.name === "fontWeight");
+    const weightValue = weightMeta ? propValue(entry, weightMeta, "fontWeight") : void 0;
+    const familyValue = entry.adapted.fontFamily;
+    const fitValue = entry.adapted.fit;
+    const maxWidthValue = entry.adapted.maxWidth;
+    blocks.push({
+      textProp: p.name,
+      content: value,
+      fontSize,
+      sizeProp: sizeMeta?.name,
+      color,
+      colorExplicit,
+      fontWeight: typeof weightValue === "number" ? weightValue : 400,
+      fontFamily: typeof familyValue === "string" ? familyValue : void 0,
+      letterSpacing: letterSpacingPx(entry.adapted.letterSpacing, fontSize),
+      fit: fitValue === "frame" || fitValue === "none" ? fitValue : void 0,
+      maxWidth: typeof maxWidthValue === "number" ? maxWidthValue : void 0
+    });
+  }
+  return blocks;
+}
+
+// ../cinema/src/inspect/legibility.ts
+function isCovering(component) {
+  if (component === "Scrim") return true;
+  const m = manifestEntry(component);
+  return m?.occlusion === "full_frame" || m?.sceneRole === "background";
+}
+function isMediaBearing(entry) {
+  const m = manifestEntry(entry.component);
+  if (!m) return false;
+  if (m.category === "Media") return true;
+  return m.props.some(
+    (p) => p.role === "url" && (p.required || entry.adapted[p.name] !== void 0)
+  );
+}
+function fillColors(entry) {
+  const m = manifestEntry(entry.component);
+  if (!m) return [];
+  const out = [];
+  for (const p of m.props) {
+    if (p.role !== "color") continue;
+    const value = entry.adapted[p.name] ?? parseDefault(p.default);
+    const candidates = Array.isArray(value) ? value : [value];
+    for (const c of candidates) {
+      const parsed = parseColor(c);
+      if (parsed) out.push(parsed);
+    }
+  }
+  if (out.length === 0 && entry.component === "Scrim") {
+    const white = parseColor("#ffffff");
+    if (white) out.push(white);
+  }
+  return out;
+}
+function coverOpacity(entry) {
+  const m = manifestEntry(entry.component);
+  const meta = m?.props.find((p) => p.name === "opacity");
+  const v = entry.adapted.opacity ?? parseDefault(meta?.default);
+  return typeof v === "number" && v >= 0 && v <= 1 ? v : 1;
+}
+function over(top, alpha, under) {
+  const a = Math.max(0, Math.min(1, alpha * top.a));
+  return {
+    r: top.r * a + under.r * (1 - a),
+    g: top.g * a + under.g * (1 - a),
+    b: top.b * a + under.b * (1 - a),
+    a: 1
+  };
+}
+function backdropFor(target, resolved) {
+  const beneath = [];
+  const overlapsTarget = (e) => windowsOverlap(e.absStart, e.visibleFrames, target.absStart, target.visibleFrames);
+  for (const e of resolved.layerEntries) {
+    if (e.under && overlapsTarget(e)) beneath.push(e);
+  }
+  if (target.kind === "scene") {
+    for (const e of resolved.entries) {
+      if (e.sceneIndex !== target.sceneIndex || !overlapsTarget(e)) continue;
+      const ti = e.trackIndex ?? 0;
+      const ei = e.entryIndex ?? 0;
+      const tTi = target.trackIndex ?? 0;
+      const tEi = target.entryIndex ?? 0;
+      if (ti < tTi || ti === tTi && ei < tEi) beneath.push(e);
+    }
+  } else {
+    for (const e of resolved.entries) if (overlapsTarget(e)) beneath.push(e);
+  }
+  const veils = [];
+  for (let i = beneath.length - 1; i >= 0; i--) {
+    const e = beneath[i];
+    if (!e || !isCovering(e.component)) continue;
+    if (isMediaBearing(e)) return { kind: "media" };
+    const colors = fillColors(e);
+    if (colors.length === 0) return { kind: "unknown" };
+    const alpha = coverOpacity(e);
+    const opaque = alpha >= 0.95 && colors.every((c) => c.a >= 0.95);
+    if (opaque) return { kind: "colors", colors: composite(colors, veils) };
+    veils.push({ colors, alpha });
+  }
+  const bg = parseColor(resolveBackground(resolved.payload.brand));
+  if (!bg) return { kind: "unknown" };
+  return { kind: "colors", colors: composite([bg], veils) };
+}
+function resolveBackground(brand) {
+  return brand?.bg ?? "#08080a";
+}
+function composite(base, veils) {
+  let result = base;
+  for (let i = veils.length - 1; i >= 0; i--) {
+    const veil = veils[i];
+    if (!veil) continue;
+    const next = [];
+    for (const under of result)
+      for (const top of veil.colors) next.push(over(top, veil.alpha, under));
+    result = next;
+  }
+  return result;
+}
+function requiredContrast(fontSize, fontWeight) {
+  const large = fontSize >= LARGE_TEXT_PX || fontWeight >= BOLD_WEIGHT && fontSize >= LARGE_TEXT_BOLD_PX;
+  return large ? CONTRAST_MIN_LARGE : CONTRAST_MIN_BODY;
+}
+var fmt = (n) => (Math.round(n * 100) / 100).toString();
+var checkLegibility = (ctx) => {
+  const { resolved, theme, format } = ctx;
+  const floor = fontFloorPx(format, resolved.width, resolved.height);
+  const violations = [];
+  for (const entry of [...resolved.entries, ...resolved.layerEntries]) {
+    const blocks = textBlocks(entry, theme);
+    if (blocks.length === 0) continue;
+    for (const b of blocks) {
+      if (b.fontSize < floor) {
+        violations.push({
+          check: "text.legibility",
+          severity: "warn",
+          targetId: entry.targetId,
+          sceneId: entry.sceneId,
+          message: `${entry.component} "${b.textProp}" is ${fmt(b.fontSize)}px \u2014 below the ${fmt(floor)}px ${format} floor (body text on a phone-scale canvas needs \u2265${fmt(floor)}px; legibility.info video-text rules)`,
+          fix: { prop: b.sizeProp ?? "fontSize", suggested: Math.ceil(floor) }
+        });
+      }
+    }
+    const backdrop = backdropFor(entry, resolved);
+    if (backdrop.kind === "media") {
+      violations.push({
+        check: "text.legibility",
+        severity: "info",
+        targetId: entry.targetId,
+        sceneId: entry.sceneId,
+        message: `${entry.component} sits over image/video \u2014 contrast unverifiable analytically (verify on a rendered frame, or put a Scrim behind it)`
+      });
+      continue;
+    }
+    if (backdrop.kind === "unknown") {
+      violations.push({
+        check: "text.legibility",
+        severity: "info",
+        targetId: entry.targetId,
+        sceneId: entry.sceneId,
+        message: `${entry.component}'s backdrop color can't be resolved analytically \u2014 contrast unverified`
+      });
+      continue;
+    }
+    for (const b of blocks) {
+      const textColor = parseColor(b.color);
+      if (!textColor) continue;
+      const required = requiredContrast(b.fontSize, b.fontWeight);
+      let worst = Number.POSITIVE_INFINITY;
+      for (const c of backdrop.colors) worst = Math.min(worst, contrastRatio(textColor, c));
+      if (worst < required) {
+        violations.push({
+          check: "text.legibility",
+          severity: "error",
+          targetId: entry.targetId,
+          sceneId: entry.sceneId,
+          message: `${entry.component} "${b.textProp}" contrast is ${fmt(worst)}:1 against its backdrop \u2014 below the WCAG ${fmt(required)}:1 minimum for ${fmt(b.fontSize)}px text (SC 1.4.3)`
+        });
+      }
+    }
+  }
+  return violations;
+};
+var checkOverflow = (ctx) => {
+  const { resolved, safe, theme, format } = ctx;
+  const { width, height } = resolved;
+  const safeRect = {
+    left: safe.left * width,
+    top: safe.top * height,
+    right: width - safe.right * width,
+    bottom: height - safe.bottom * height
+  };
+  const violations = [];
+  for (const entry of [...resolved.entries, ...resolved.layerEntries]) {
+    if (WRAPPING_COMPONENTS.has(entry.component)) continue;
+    const blocks = textBlocks(entry, theme);
+    for (const b of blocks) {
+      if (b.content.includes("\n")) continue;
+      const measureOpts = {
+        fontFamily: b.fontFamily,
+        fontWeight: b.fontWeight,
+        letterSpacing: b.letterSpacing
+      };
+      const cap = fitMaxWidth({ fit: b.fit, maxWidth: b.maxWidth }, width);
+      const size = cap !== void 0 ? fitFontSize(b.content, b.fontSize, cap, measureOpts) : b.fontSize;
+      const m = measureText(b.content, size, measureOpts);
+      if (m.width <= 0) continue;
+      const placement = entry.adapted.placement;
+      const box = resolvePlacement(
+        isPlacement(placement) ? placement : void 0,
+        { width, height },
+        { width: m.width, height: m.height }
+      );
+      const x0 = box.originX;
+      const y0 = box.originY;
+      const x1 = x0 + m.width;
+      const y1 = y0 + m.height;
+      const escapesFrame = x0 < 0 || y0 < 0 || x1 > width || y1 > height;
+      const escapesSafe = x0 < safeRect.left || y0 < safeRect.top || x1 > safeRect.right || y1 > safeRect.bottom;
+      if (!escapesFrame && !escapesSafe) continue;
+      const boxFitsSafe = (fs) => {
+        const fm = measureText(b.content, fs, measureOpts);
+        const fb = resolvePlacement(
+          isPlacement(placement) ? placement : void 0,
+          { width, height },
+          { width: fm.width, height: fm.height }
+        );
+        return fb.originX >= safeRect.left && fb.originY >= safeRect.top && fb.originX + fm.width <= safeRect.right && fb.originY + fm.height <= safeRect.bottom;
+      };
+      let lo = 1;
+      let hi = Math.floor(size);
+      let fitted = 0;
+      while (lo <= hi) {
+        const mid = lo + hi >> 1;
+        if (boxFitsSafe(mid)) {
+          fitted = mid;
+          lo = mid + 1;
+        } else {
+          hi = mid - 1;
+        }
+      }
+      const fix = b.sizeProp && fitted > 0 && fitted < size ? { prop: b.sizeProp, suggested: fitted } : void 0;
+      violations.push({
+        check: "layout.overflow",
+        severity: escapesFrame ? "error" : "warn",
+        targetId: entry.targetId,
+        sceneId: entry.sceneId,
+        message: escapesFrame ? `${entry.component} "${b.textProp}" measures ${Math.round(m.width)}px wide at ${Math.round(size)}px \u2014 it escapes the ${width}\xD7${height} frame` : `${entry.component} "${b.textProp}" measures ${Math.round(m.width)}px wide at ${Math.round(size)}px \u2014 outside the ${format} safe area (platform UI / title-safe band)`,
+        fix
+      });
+    }
+  }
+  return violations;
+};
+
+// ../cinema/src/inspect/reading.ts
+var checkReadingTime = (ctx) => {
+  const { resolved, theme } = ctx;
+  const violations = [];
+  for (const entry of [...resolved.entries, ...resolved.layerEntries]) {
+    if (entry.role === "ambient") continue;
+    const words = totalWords(textBlocks(entry, theme));
+    if (words === 0) continue;
+    const needed = readingTimeSeconds(words);
+    const visible = entry.visibleFrames / resolved.fps;
+    if (visible >= needed) continue;
+    const suggested = Math.ceil(needed * 10) / 10;
+    violations.push({
+      check: "timing.readingTime",
+      severity: "warn",
+      targetId: entry.targetId,
+      sceneId: entry.sceneId,
+      message: `${entry.component} shows ${words} word${words === 1 ? "" : "s"} for ${(Math.round(visible * 100) / 100).toString()}s \u2014 ${suggested}s needed to read it (0.25s/word + 0.6s orientation, \u22651.2s)`,
+      fix: { prop: "for", suggested: `${suggested}s` }
+    });
+  }
+  return violations;
+};
+
+// ../cinema/src/inspect/index.ts
+var CHECKS = {
+  "text.legibility": checkLegibility,
+  "layout.overflow": checkOverflow,
+  "timing.readingTime": checkReadingTime,
+  "timing.collisions": checkCollisions,
+  "density.score": checkDensity,
+  "frames.transitionCapture": checkTransitionCapture
+};
+function inspect(payload, opts = {}) {
+  const resolved = resolveComposition(payload);
+  const format = opts.format ?? inferFormat(resolved.width, resolved.height);
+  const ctx = {
+    payload,
+    resolved,
+    format,
+    safe: SAFE_AREAS[format],
+    theme: {
+      text: payload.brand?.text ?? defaultTheme.text,
+      textMuted: payload.brand?.dim ?? defaultTheme.textMuted,
+      background: payload.brand?.bg ?? "#08080a"
+    },
+    opts
+  };
+  const violations = [];
+  for (const check of Object.values(CHECKS)) violations.push(...check(ctx));
+  const summary = { error: 0, warn: 0, info: 0 };
+  for (const v of violations) summary[v.severity]++;
+  const density = densityMetrics(resolved);
+  return {
+    violations,
+    summary,
+    format,
+    fps: resolved.fps,
+    totalFrames: resolved.totalFrames,
+    density
+  };
+}
+
+// ../cinema/src/index.tsx
+var DUR = Components.DURATION;
+var num = (v, d) => typeof v === "number" && Number.isFinite(v) ? v : d;
+var asDir = (v) => v === "down" || v === "left" || v === "right" || v === "up" ? v : "up";
+var exitStart = (p, dur, exitDur) => Math.max(0, dur - exitDur - num(p.delay, 0));
+var CHOREOGRAPHY = {
+  // Direct-manipulation keyframe animation (the Studio editor). Shares the sampler
+  // with the Keyframes component + Studio preview, so interpolation is identical.
+  // Position is an OFFSET from placement (additive); opacity/scale absolute;
+  // rotation in degrees.
+  keyframes: (frame, _fps, p) => {
+    const k = Components.sampleKeyframes(p, frame);
+    return {
+      opacity: k.opacity,
+      x: k.x,
+      y: k.y,
+      scaleX: k.scale,
+      scaleY: k.scale,
+      rotation: k.rotation
+    };
+  },
+  entryFade: (frame, fps, p) => Components.entryFade({
+    frame,
+    fps,
+    delay: num(p.delay, 0),
+    durationInFrames: num(p.durationInFrames, DUR.base)
+  }),
+  entryFadeRise: (frame, fps, p) => Components.entryFadeRise({
+    frame,
+    fps,
+    delay: num(p.delay, 0),
+    durationInFrames: num(p.durationInFrames, DUR.base),
+    travelPx: num(p.travelPx, 12)
+  }),
+  entrySlide: (frame, fps, p) => Components.entrySlide({
+    frame,
+    fps,
+    delay: num(p.delay, 0),
+    durationInFrames: num(p.durationInFrames, DUR.base),
+    direction: asDir(p.direction),
+    distance: num(p.distance, 12)
+  }),
+  entryScale: (frame, fps, p) => Components.entryScale({
+    frame,
+    fps,
+    delay: num(p.delay, 0),
+    durationInFrames: num(p.durationInFrames, DUR.base),
+    from: num(p.from, 0.9)
+  }),
+  heroReveal: (frame, fps, p) => Components.heroReveal({
+    frame,
+    fps,
+    delay: num(p.delay, 0),
+    durationInFrames: num(p.durationInFrames, DUR.slow),
+    travelPx: num(p.travelPx, 16)
+  }),
+  exitFade: (frame, fps, p, dur) => {
+    const ed = num(p.durationInFrames, DUR.fast);
+    return Components.exitFade({ frame, fps, delay: exitStart(p, dur, ed), durationInFrames: ed });
+  },
+  exitFadeFall: (frame, fps, p, dur) => {
+    const ed = num(p.durationInFrames, DUR.fast);
+    return Components.exitFadeFall({
+      frame,
+      fps,
+      delay: exitStart(p, dur, ed),
+      durationInFrames: ed,
+      travelPx: num(p.travelPx, 8)
+    });
+  },
+  exitSlide: (frame, fps, p, dur) => {
+    const ed = num(p.durationInFrames, DUR.fast);
+    return Components.exitSlide({
+      frame,
+      fps,
+      delay: exitStart(p, dur, ed),
+      durationInFrames: ed,
+      direction: asDir(p.direction),
+      distance: num(p.distance, 12)
+    });
+  },
+  exitScale: (frame, fps, p, dur) => {
+    const ed = num(p.durationInFrames, DUR.fast);
+    return Components.exitScale({ frame, fps, delay: exitStart(p, dur, ed), durationInFrames: ed });
+  }
+};
+var REST = { opacity: 1, x: 0, y: 0, scaleX: 1, scaleY: 1 };
+function composeMotion(animate, frame, fps, dur) {
+  let m = REST;
+  for (const a of animate ?? []) {
+    const fn = CHOREOGRAPHY[a.pattern];
+    if (!fn) continue;
+    const r = fn(frame, fps, a.params ?? {}, dur);
+    m = {
+      opacity: m.opacity * r.opacity,
+      x: m.x + r.x,
+      y: m.y + r.y,
+      scaleX: m.scaleX * r.scaleX,
+      scaleY: m.scaleY * r.scaleY,
+      rotation: (m.rotation ?? 0) + (r.rotation ?? 0)
+    };
+  }
+  return m;
+}
+var TRANSITIONS = {
+  "cross-fade": () => crossFade(),
+  fade: () => fade(),
+  slide: (o) => slide(o),
+  wipe: (o) => wipe(o),
+  iris: () => iris(),
+  flip: () => flip(),
+  "clock-wipe": () => clockWipe(),
+  push: (o) => push(o),
+  zoom: (o) => zoom(o),
+  "depth-push": () => depthPush(),
+  "dip-to-color": (o) => dipToColor(o),
+  none: () => none(),
+  // Effect transitions — approximated in the presentation layer (no engine blur).
+  blur: () => blur(),
+  "chromatic-aberration": () => chromaticAberration(),
+  "device-pullback": () => devicePullback(),
+  "expand-morph": () => expandMorph(),
+  "glass-wipe": (o) => glassWipe(o),
+  "grid-pixelate": (o) => gridPixelate(o),
+  morph: () => morph(),
+  "type-mask": (o) => typeMask(o),
+  "zoom-blur": (o) => zoomBlur(o),
+  "whip-pan": (o) => whipPan(o),
+  "film-burn": (o) => filmBurn(o),
+  "luma-wipe": () => lumaWipe()
+};
+var presentationFor = (type, options) => (TRANSITIONS[type] ?? crossFade)(options);
+var isComponent = (v) => typeof v === "function";
+var NAME_ALIASES = {
+  RgbGlitchText: "RgbGlitch"
+  // ondajs `rgb-glitch-text` → @onda `RgbGlitch`
+};
+function defaultRegistry() {
+  const reg = {};
+  for (const [name, value] of Object.entries(Components)) {
+    if (/^[A-Z]/.test(name) && isComponent(value)) {
+      reg[name] = value;
+    }
+  }
+  for (const [alias, target] of Object.entries(NAME_ALIASES)) {
+    if (reg[target] && !reg[alias]) reg[alias] = reg[target];
+  }
+  return reg;
+}
+function errorPlaceholder(name) {
+  return createElement(
+    AbsoluteFill,
+    { justify: "center", align: "center" },
+    createElement(
+      Text,
+      { fontSize: 32, color: "#ff6b6b", fontWeight: 600 },
+      `\u26A0 unknown component: ${name}`
+    )
+  );
+}
+function matteClipProps(matte, clip, registry, width, height) {
+  const out = {};
+  if (matte) {
+    const Comp = registry[matte.component];
+    if (Comp) {
+      out.matte = createElement(Comp, adaptProps(matte.component, matte.props, width, height));
+      out.matteMode = matte.mode ?? "alpha";
+    }
+  }
+  if (clip) {
+    out.clip = clip.shape === "ellipse" ? clipEllipse(clip.width ?? width, clip.height ?? height) : clip.shape === "path" && clip.data ? clipPath(clip.data) : clipRect(clip.width ?? width, clip.height ?? height, clip.cornerRadius);
+  }
+  return out;
+}
+function AnimatedEntry({
+  component,
+  props,
+  animate,
+  effects,
+  depth,
+  transform3d,
+  matte,
+  clip,
+  durationInFrames,
+  registry
+}) {
+  const frame = useCurrentFrame();
+  const { fps, width, height } = useVideoConfig();
+  const m = composeMotion(animate, frame, fps, durationInFrames);
+  const Comp = registry[component];
+  const base = Comp ? createElement(Comp, adaptProps(component, props, width, height)) : errorPlaceholder(component);
+  const fxChild = effects || typeof depth === "number" ? createElement(
+    Group,
+    { ...effects ?? {}, ...typeof depth === "number" ? { depth } : {} },
+    base
+  ) : base;
+  const matteChild = matte || clip ? createElement(
+    Group,
+    matteClipProps(matte, clip, registry, width, height),
+    fxChild
+  ) : fxChild;
+  const child = transform3d && Object.keys(transform3d).length > 0 ? createElement(
+    Scene3D,
+    {},
+    createElement(
+      Group,
+      { ...transform3d },
+      matteChild
+    )
+  ) : matteChild;
+  const cx = width / 2;
+  const cy = height / 2;
+  const [px, py] = SELF_ANCHORING.has(component) ? [0, 0] : placementOffset(props, width, height);
+  return createElement(
+    Group,
+    { x: m.x + px, y: m.y + py, opacity: m.opacity },
+    createElement(
+      Group,
+      { x: cx, y: cy },
+      createElement(
+        Group,
+        { scaleX: m.scaleX, scaleY: m.scaleY, rotation: m.rotation },
+        createElement(Group, { x: -cx, y: -cy }, child)
+      )
+    )
+  );
+}
+function MorphSuppressGate({
+  suppress,
+  children
+}) {
+  const frame = useCurrentFrame();
+  if (frame >= suppress.from && frame < suppress.to) return null;
+  return children;
+}
+function EntrySlot({
+  entry,
+  registry,
+  suppress
+}) {
+  const { fps } = useVideoConfig();
+  const animated = createElement(AnimatedEntry, {
+    component: entry.component,
+    props: entry.props,
+    animate: entry.animate,
+    effects: entry.effects,
+    depth: entry.depth,
+    transform3d: entry.transform3d,
+    matte: entry.matte,
+    clip: entry.clip,
+    durationInFrames: toFrames(entry.for, fps),
+    registry
+  });
+  return createElement(
+    Sequence,
+    { from: toFrames(entry.at, fps), durationInFrames: toFrames(entry.for, fps) },
+    // biome-ignore lint/correctness/noChildrenProp: raw createElement props object, not JSX
+    suppress ? createElement(MorphSuppressGate, { suppress, children: animated }) : animated
+  );
+}
+function AnimatedCamera({
+  move,
+  durationInFrames,
+  children
+}) {
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+  const p = durationInFrames > 1 ? Math.min(1, Math.max(0, frame / (durationInFrames - 1))) : 1;
+  const e = p * p * (3 - 2 * p);
+  const from = move.from ?? {};
+  const to = move.to ?? {};
+  const lerp = (a, b, d) => {
+    const av = a ?? d;
+    const bv = b ?? d;
+    return av + (bv - av) * e;
+  };
+  return createElement(
+    Camera,
+    {
+      focusX: lerp(from.x, to.x, 0.5) * width,
+      focusY: lerp(from.y, to.y, 0.5) * height,
+      zoom: lerp(from.zoom, to.zoom, 1),
+      rotate: lerp(from.rotate, to.rotate, 0)
+    },
+    children
+  );
+}
+function SceneTracks({
+  scene,
+  registry,
+  suppress,
+  responsive
+}) {
+  return createElement(
+    Group,
+    null,
+    ...scene.tracks.map(
+      (track, ti) => createElement(
+        Group,
+        { key: track.id ?? `track-${ti}` },
+        ...track.entries.map((entry, ei) => {
+          const key = entry.id ?? `entry-${ei}`;
+          const slot = createElement(EntrySlot, { entry, registry, suppress: suppress?.get(entry) });
+          if (!responsive) return cloneElement(slot, { key });
+          const t = Components.responsiveEntryTransform(
+            Components.entryDesignAnchor(entry.props),
+            responsive.design,
+            responsive.out
+          );
+          if (t.x === 0 && t.y === 0 && t.scale === 1) return cloneElement(slot, { key });
+          return createElement(
+            Group,
+            { key, x: t.x, y: t.y, scaleX: t.scale, scaleY: t.scale },
+            slot
+          );
+        })
+      )
+    )
+  );
+}
+function entryTransform(entry, w, h) {
+  const [px, py] = SELF_ANCHORING.has(entry.component) ? [0, 0] : placementOffset(entry.props, w, h);
+  const s = entry.props?.scale;
+  return { x: px, y: py, scale: typeof s === "number" && Number.isFinite(s) ? s : 1 };
+}
+function morphEntriesAtTail(scene, fps, sceneDur, overlap) {
+  const m = /* @__PURE__ */ new Map();
+  const cutStart = sceneDur - overlap;
+  for (const track of scene.tracks) {
+    for (const e of track.entries) {
+      if (!e.morphKey) continue;
+      const start = toFrames(e.at, fps);
+      const end = start + toFrames(e.for, fps);
+      if (start < sceneDur && end > cutStart) m.set(e.morphKey, e);
+    }
+  }
+  return m;
+}
+function morphEntriesAtHead(scene, fps, overlap) {
+  const m = /* @__PURE__ */ new Map();
+  for (const track of scene.tracks) {
+    for (const e of track.entries) {
+      if (!e.morphKey) continue;
+      const start = toFrames(e.at, fps);
+      const end = start + toFrames(e.for, fps);
+      if (start < overlap && end > 0) m.set(e.morphKey, e);
+    }
+  }
+  return m;
+}
+function MorphLayer({ pair, registry }) {
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+  const n = pair.overlapFrames;
+  const p = n > 1 ? Math.min(1, Math.max(0, frame / (n - 1))) : 1;
+  const e = p * p * (3 - 2 * p);
+  const lerp = (a, b) => a + (b - a) * e;
+  const x = lerp(pair.from.x, pair.toT.x);
+  const y = lerp(pair.from.y, pair.toT.y);
+  const scale = lerp(pair.from.scale, pair.toT.scale);
+  const Comp = registry[pair.to.component];
+  const base = Comp ? createElement(Comp, adaptProps(pair.to.component, pair.to.props, width, height)) : errorPlaceholder(pair.to.component);
+  const cx = width / 2;
+  const cy = height / 2;
+  return createElement(
+    Group,
+    { x, y },
+    createElement(
+      Group,
+      { x: cx, y: cy },
+      createElement(
+        Group,
+        { scaleX: scale, scaleY: scale },
+        createElement(Group, { x: -cx, y: -cy }, base)
+      )
+    )
+  );
+}
+function planMorphs(scenes, fps, w, h, sceneStart, sceneDur) {
+  const pairs = [];
+  const suppress = /* @__PURE__ */ new Map();
+  const addSuppress = (sceneIdx, entry, win) => {
+    let m = suppress.get(sceneIdx);
+    if (!m) {
+      m = /* @__PURE__ */ new Map();
+      suppress.set(sceneIdx, m);
+    }
+    m.set(entry, win);
+  };
+  for (let i = 1; i < scenes.length; i++) {
+    const prev = scenes[i - 1];
+    const cur = scenes[i];
+    if (!prev || !cur || !cur.transition) continue;
+    const overlap = transitionOverlapFrames(prev, cur, fps);
+    if (overlap <= 0) continue;
+    const prevDur = sceneDur[i - 1] ?? 0;
+    const aMap = morphEntriesAtTail(prev, fps, prevDur, overlap);
+    if (aMap.size === 0) continue;
+    const bMap = morphEntriesAtHead(cur, fps, overlap);
+    if (bMap.size === 0) continue;
+    const overlapStart = sceneStart[i] ?? 0;
+    for (const [key, aEntry] of aMap) {
+      const bEntry = bMap.get(key);
+      if (!bEntry) continue;
+      pairs.push({
+        to: bEntry,
+        from: entryTransform(aEntry, w, h),
+        toT: entryTransform(bEntry, w, h),
+        overlapStart,
+        overlapFrames: overlap
+      });
+      addSuppress(i - 1, aEntry, { from: prevDur - overlap, to: prevDur });
+      addSuppress(i, bEntry, { from: 0, to: overlap });
+    }
+  }
+  return { pairs, suppress };
+}
+function brandToTheme(brand) {
+  const t = {};
+  if (brand.accent) t.accent = brand.accent;
+  if (brand.accentSoft) t.accentSoft = brand.accentSoft;
+  if (brand.text) t.text = brand.text;
+  if (brand.dim) t.textMuted = brand.dim;
+  if (brand.bg) t.background = brand.bg;
+  if (brand.surface) t.surface = brand.surface;
+  if (brand.border) t.border = brand.border;
+  if (brand.fontBody) t.fontFamily = brand.fontBody;
+  if (brand.fontDisplay) t.headingFamily = brand.fontDisplay;
+  return t;
+}
+function fitGroup(scene, width, height, child) {
+  const dw = scene.designWidth;
+  const dh = scene.designHeight;
+  const fit = scene.fit;
+  if (!dw || !dh || !fit || fit === "responsive" || dw === width && dh === height) return child;
+  const scale = fit === "contain" ? Math.min(width / dw, height / dh) : Math.max(width / dw, height / dh);
+  const x = (width - dw * scale) / 2;
+  const y = (height - dh * scale) / 2;
+  return createElement(Group, { x, y, scaleX: scale, scaleY: scale }, child);
+}
+function sceneResponsive(scene, width, height) {
+  const dw = scene.designWidth;
+  const dh = scene.designHeight;
+  if (scene.fit !== "responsive" || !dw || !dh || dw === width && dh === height) return void 0;
+  return { design: { width: dw, height: dh }, out: { width, height } };
+}
+function buildComposition(payload, opts = {}) {
+  const {
+    width,
+    height,
+    fps,
+    scenes,
+    layers = [],
+    brand,
+    linear,
+    finish,
+    motionBlur,
+    dof
+  } = payload;
+  const registry = opts.registry ?? defaultRegistry();
+  const total = totalFrames(payload, fps);
+  const placements = scenePlacements(scenes, fps);
+  const sceneDur = placements.map((p) => p.durationInFrames);
+  const sceneStart = placements.map((p) => p.start);
+  const morphPlan = planMorphs(scenes, fps, width, height, sceneStart, sceneDur);
+  const seriesChildren = [];
+  scenes.forEach((scene, i) => {
+    if (i > 0 && scene.transition) {
+      seriesChildren.push(
+        createElement(TransitionSeries.Transition, {
+          key: `transition-${i}`,
+          presentation: presentationFor(scene.transition.type, scene.transition.options),
+          timing: linearTiming({
+            durationInFrames: transitionOverlapFrames(scenes[i - 1], scene, fps)
+          })
+        })
+      );
+    }
+    const sceneSuppress = morphPlan.suppress.get(i);
+    const responsive = sceneResponsive(scene, width, height);
+    seriesChildren.push(
+      createElement(
+        TransitionSeries.Sequence,
+        { key: scene.id, durationInFrames: sceneDur[i] ?? sceneDurationFrames(scene, fps) },
+        scene.camera ? createElement(AnimatedCamera, {
+          move: scene.camera,
+          durationInFrames: sceneDur[i] ?? sceneDurationFrames(scene, fps),
+          // biome-ignore lint/correctness/noChildrenProp: raw createElement props object, not JSX
+          children: fitGroup(
+            scene,
+            width,
+            height,
+            createElement(SceneTracks, {
+              scene,
+              registry,
+              suppress: sceneSuppress,
+              responsive
+            })
+          )
+        }) : fitGroup(
+          scene,
+          width,
+          height,
+          createElement(SceneTracks, { scene, registry, suppress: sceneSuppress, responsive })
+        )
+      )
+    );
+  });
+  const morphLayers = morphPlan.pairs.map(
+    (pair, i) => createElement(
+      Sequence,
+      {
+        key: `morph-${i}`,
+        from: pair.overlapStart,
+        durationInFrames: pair.overlapFrames
+      },
+      createElement(MorphLayer, { pair, registry })
+    )
+  );
+  const layerEls = (under) => layers.filter((l) => Boolean(l.under) === under).flatMap(
+    (layer, li) => layer.entries.map((entry, ei) => {
+      const from = toFrames(entry.at ?? 0, fps);
+      const dur = entry.for != null ? toFrames(entry.for, fps) : Math.max(1, total - from);
+      return createElement(
+        Sequence,
+        { key: `layer-${under ? "u" : "o"}-${li}-${ei}`, from, durationInFrames: dur },
+        createElement(AnimatedEntry, {
+          component: entry.component,
+          props: entry.props,
+          animate: entry.animate,
+          effects: entry.effects,
+          depth: entry.depth,
+          transform3d: entry.transform3d,
+          matte: entry.matte,
+          clip: entry.clip,
+          durationInFrames: dur,
+          registry
+        })
+      );
+    })
+  );
+  const root = createElement(
+    Group,
+    null,
+    createElement(Rect, { width, height, fill: brand?.bg ?? "#08080a" }),
+    ...layerEls(true),
+    createElement(TransitionSeries, null, ...seriesChildren),
+    ...morphLayers,
+    ...layerEls(false)
+  );
+  const content = brand ? createElement(Components.ThemeProvider, { theme: brandToTheme(brand) }, root) : root;
+  return createElement(
+    Composition,
+    { width, height, fps, durationInFrames: total, linear, finish, motionBlur, dof },
+    content
+  );
+}
+function editDistance(a, b) {
+  let prev = Array.from({ length: b.length + 1 }, (_, j) => j);
+  for (let i = 1; i <= a.length; i++) {
+    const cur = [i];
+    for (let j = 1; j <= b.length; j++) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      cur[j] = Math.min((prev[j] ?? 0) + 1, (cur[j - 1] ?? 0) + 1, (prev[j - 1] ?? 0) + cost);
+    }
+    prev = cur;
+  }
+  return prev[b.length] ?? 0;
+}
+function closestComponent(name, registry) {
+  let best = null;
+  let bestD = Number.POSITIVE_INFINITY;
+  for (const k of Object.keys(registry)) {
+    const d = editDistance(name.toLowerCase(), k.toLowerCase());
+    if (d < bestD) {
+      bestD = d;
+      best = k;
+    }
+  }
+  return best && bestD <= Math.max(2, Math.floor(name.length / 3)) ? best : null;
+}
+function isValidTimeSpec(v) {
+  if (typeof v === "number") return Number.isFinite(v);
+  const s = v.trim();
+  if (s === "") return false;
+  const numOk = (x) => x.trim() !== "" && Number.isFinite(Number(x));
+  if (s.includes(":")) {
+    const [m, sec] = s.split(":");
+    return numOk(m ?? "") && numOk(sec ?? "");
+  }
+  if (s.endsWith("ms")) return numOk(s.slice(0, -2));
+  if (s.endsWith("f")) return numOk(s.slice(0, -1));
+  if (s.endsWith("s")) return numOk(s.slice(0, -1));
+  return numOk(s);
+}
+var BRIDGE_PROPS = ["placement", "scale"];
+function knownPropsFor(component) {
+  const m = Components.manifestEntry(component);
+  if (!m) return null;
+  const known = new Set(m.props.map((p) => p.name));
+  const shape = m.schema.shape;
+  if (shape && typeof shape === "object") for (const k of Object.keys(shape)) known.add(k);
+  for (const src of Object.keys(PROP_ALIASES[component] ?? {})) known.add(src);
+  for (const k of BRIDGE_PROPS) known.add(k);
+  return known;
+}
+function validateComposition(payload, opts = {}) {
+  const registry = opts.registry ?? defaultRegistry();
+  const fidelity = Components.COMPONENT_FIDELITY;
+  const diags = [];
+  if (!(payload.fps > 0)) diags.push({ level: "error", path: "fps", message: "fps must be > 0" });
+  if (!(payload.width > 0 && payload.height > 0))
+    diags.push({ level: "error", path: "size", message: "width/height must be > 0" });
+  if (!payload.scenes?.length)
+    diags.push({ level: "error", path: "scenes", message: "composition has no scenes" });
+  const fps = payload.fps > 0 ? payload.fps : 30;
+  const checkTime = (v, path, required) => {
+    if (v === void 0) {
+      if (required) diags.push({ level: "error", path, message: "missing required time" });
+      return;
+    }
+    if (!isValidTimeSpec(v)) {
+      diags.push({
+        level: "error",
+        path,
+        message: `invalid time ${JSON.stringify(v)} \u2014 use seconds (e.g. 2) or a spec string ("2s", "500ms", "0:02", "90f")`
+      });
+      return;
+    }
+    const secs2 = typeof v === "number" ? v : timeSpecToSeconds(v, fps);
+    if (secs2 < 0)
+      diags.push({ level: "error", path, message: `time ${JSON.stringify(v)} is negative` });
+  };
+  const checkEntry = (e, path, timed) => {
+    if (e.role !== void 0 && e.role !== "focal" && e.role !== "support" && e.role !== "ambient")
+      diags.push({
+        level: "error",
+        path: `${path}.role`,
+        message: `invalid role ${JSON.stringify(e.role)} \u2014 use 'focal' | 'support' | 'ambient' (absent = 'support')`
+      });
+    if (!registry[e.component]) {
+      const guess = closestComponent(e.component, registry);
+      diags.push({
+        level: "error",
+        path: `${path}.component`,
+        message: `unknown component "${e.component}"${guess ? ` \u2014 did you mean "${guess}"?` : ""}`
+      });
+    } else {
+      const f = fidelity?.[e.component];
+      if (f?.fidelity === "apes_remotion")
+        diags.push({
+          level: "warning",
+          path: `${path}.component`,
+          message: `"${e.component}" imitates a browser-only effect the engine doesn't do natively \u2014 it renders a stylized approximation; avoid for hero moments.`
+        });
+      else if (f?.fidelity === "degraded")
+        diags.push({
+          level: "info",
+          path: `${path}.component`,
+          message: `"${e.component}" renders an approximation until the engine gains "${f.needsFeature}".`
+        });
+      if (f?.backend === "gpu_only")
+        diags.push({
+          level: "warning",
+          path: `${path}.component`,
+          message: `"${e.component}" needs the GPU (Vello) backend \u2014 it won't render correctly on the CPU reference (e.g. a CPU-verified or no-GPU export).`
+        });
+      const known = knownPropsFor(e.component);
+      if (known && e.props) {
+        for (const k of Object.keys(e.props)) {
+          if (!known.has(k))
+            diags.push({
+              level: "warning",
+              path: `${path}.props.${k}`,
+              message: `unknown prop "${k}" on ${e.component} \u2014 passed through (the component ignores props it doesn't declare)`
+            });
+        }
+      }
+    }
+    checkTime(e.at, `${path}.at`, timed);
+    checkTime(e.for, `${path}.for`, timed);
+    (e.animate ?? []).forEach((a, i) => {
+      if (!CHOREOGRAPHY[a.pattern])
+        diags.push({
+          level: "warning",
+          path: `${path}.animate[${i}]`,
+          message: `unknown choreography pattern "${a.pattern}" (ignored)`
+        });
+    });
+  };
+  payload.scenes?.forEach((scene, si) => {
+    if (scene.transition && !TRANSITIONS[scene.transition.type])
+      diags.push({
+        level: "warning",
+        path: `scenes[${si}].transition`,
+        message: `transition "${scene.transition.type}" not in the engine yet \u2014 falls back to cross-fade`
+      });
+    if (!scene.tracks?.length)
+      diags.push({ level: "warning", path: `scenes[${si}].tracks`, message: "scene has no tracks" });
+    scene.tracks?.forEach(
+      (track, ti) => track.entries.forEach(
+        (e, ei) => checkEntry(e, `scenes[${si}].tracks[${ti}].entries[${ei}]`, true)
+      )
+    );
+  });
+  payload.layers?.forEach(
+    (layer, li) => layer.entries.forEach((e, ei) => checkEntry(e, `layers[${li}].entries[${ei}]`, false))
+  );
+  return diags;
+}
+//! The Studio→engine PROP vocabulary — size-role tokens, prop-name aliases,
+//! placement coords, and the self-anchoring list. Extracted (verbatim) from the
+//! renderer in `index.tsx` so the inspector can resolve an entry's effective
+//! props/placement the SAME way `buildComposition` does, without importing the
+//! React renderer. Behavior is identical to the pre-extraction code.
+//! Time/frame math — mirrors Studio's `composition.ts` helpers so scene windows
+//! and audio offsets line up with what actually plays.
+//! The timeline composition payload — the document an agent (ONDA Studio) emits
+//! and `buildComposition` turns into an @onda-engine/react scene. Structural mirror of
+//! Studio's `composition.ts` schema (kept as plain types; validation is
+//! `validateComposition`).
+//! Inspector constants — every threshold the checks measure against, with its
+//! source. Research-backed values cite the standard/paper; the rest are marked
+//! PRODUCT DECISION (ours to tune, no external authority).
+//! `timing.collisions` — attention can't be in two places at once.
+//!
+//! Three measurements:
+//! 1. Two FOCAL entrances beginning within the 250ms attention window
+//!    (attentional blink: a second target 200–500ms after a first is routinely
+//!    missed — Raymond, Shapiro & Arnell 1992; see constants.ts).
+//! 2. An entrance whose settle (the `@onda-engine/components` settleTime registry —
+//!    the same formulas the components run) outlives the entry's visible
+//!    window: the move is cut off mid-flight.
+//! 3. A scene transition longer than the 0.6s budget.
+//! `density.score` — how much is on screen at once, per scene?
+//! An event sweep over entry visible windows finds each scene's PEAK count of
+//! concurrently visible non-ambient entries (and focal entries). Budgets:
+//! ≤5 non-ambient, ≤1 focal (see constants.ts — product decisions). The peaks
+//! are always reported on the InspectReport; violations fire over budget.
+//! `frames.transitionCapture` — don't thumbnail a frame that's mid-transition.
+//! Given `opts.frames` (the indices a consumer intends to capture), flag any
+//! that land inside a transition's overlap window — those frames show two
+//! scenes blended. The fix is mechanical: the nearest frame outside the window.
+//! WCAG color math — hex parsing, relative luminance, contrast ratio.
+//! Formulas from WCAG 2.x: relative luminance per
+//! https://www.w3.org/WAI/GL/wiki/Relative_luminance (sRGB linearization), and
+//! contrast ratio `(L1 + 0.05) / (L2 + 0.05)` per
+//! https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum (SC 1.4.3).
+//! Engine colors are hex (`#rgb`, `#rrggbb`, `#rrggbbaa`) — anything else is
+//! "unparseable" and the caller treats the contrast as unverifiable.
+//! Resolve a composition payload to the FRAME timeline the checks measure on —
+//! the same resolution `buildComposition` performs (shared `scenePlacements` +
+//! `toFrames` + `adaptProps`), minus the React tree. Every entry gets absolute
+//! start/visible frames, its effective (size-role-resolved) props, and its
+//! attention role.
+//! Text extraction — what does this entry SAY, at what size, in what color?
+//! Driven by the `@onda-engine/components` manifest (per-prop semantic roles), so the
+//! inspector knows each component's text props + defaults without hardcoding
+//! eighty dialects. A `TextBlock` is one string a viewer reads: content +
+//! resolved px font size + resolved color + the measurement options needed to
+//! reproduce the component's own metrics.
+//! `text.legibility` — is every readable string big enough and contrasty enough?
+//! Two measurements per text block:
+//! 1. Font size vs the per-format research floor (legibility.info: 40px body
+//!    minimum for full-HD phone-first formats — see constants.ts).
+//! 2. WCAG 2.x contrast of the text color vs what's BEHIND its placement box,
+//!    found by walking the z-order beneath the entry: solid fills and gradient
+//!    stops are checked analytically (worst stop wins, translucent veils are
+//!    alpha-composited); an image/video behind yields an `info` — contrast is
+//!    unverifiable analytically.
+//! `layout.overflow` — does measured text stay inside the frame and the
+//! format's safe area?
+//! Width comes from the engine's own text metrics (`measureText`, cosmic-text
+//! via wasm — warm it with `preloadTextMetrics()` in Node for real numbers; the
+//! glyph-count estimate is the documented fallback). Placement resolves through
+//! the shared `resolvePlacement` contract with the measured element size, so
+//! the checked box is where the component actually sits. Entries whose own
+//! `fit`/`maxWidth` auto-fit caps the line are measured at the FITTED size.
+//! `timing.readingTime` — does every text stay up long enough to be read?
+//! Needed time = `max(1.2s, 0.25s × words + 0.6s)` — see constants.ts for the
+//! research trail (BBC subtitle guidelines, Brysbaert 2019). Measured against
+//! the entry's VISIBLE window (its duration clamped to the scene cut).
+//! The INSPECTOR — deterministic quality metrics over a composition payload.
+//! `inspect(payload, opts?)` measures the SAME document `validateComposition`
+//! checks and `buildComposition` renders, resolved to frames with the same
+//! helpers, and returns structured violations: legibility (font floors + WCAG
+//! contrast), layout overflow vs per-platform safe areas, reading time, focal
+//! entrance/settle/transition collisions, per-scene density, and
+//! transition-window thumbnail capture. Every threshold lives in
+//! `constants.ts` with its source.
+//! Where `validateComposition` answers "will this render?", `inspect` answers
+//! "will this read?" — both deterministic, both agent-correctable.
+//! Text widths use the engine's cosmic-text metrics; call
+//! `preloadTextMetrics()` (from `@onda-engine/components`) before inspecting in Node
+//! for shaped widths instead of the glyph-count estimate.
+//! `@onda-engine/cinema` — turn a timeline composition payload into an `@onda-engine/react`
+//! scene. This is the spec→engine renderer ONDA Studio uses in place of its
+//! Remotion `composition-renderer`: scenes play through a `<TransitionSeries>`,
+//! tracks layer as `<AbsoluteFill>`s, and each entry is a registry component
+//! wrapped in its choreography — applied as numeric `Motion` on a `<Group>`
+//! (the engine transform), not CSS.
+
+export { CHECKS, CONTRAST_MIN_BODY, CONTRAST_MIN_LARGE, DENSITY_MAX_FOCAL, DENSITY_MAX_NON_AMBIENT, FOCAL_COLLISION_WINDOW_SECONDS, FONT_FLOOR_PX, READ_MIN_SECONDS, READ_ORIENTATION_SECONDS, READ_SECONDS_PER_WORD, SAFE_AREAS, TRANSITION_BUDGET_SECONDS, buildComposition, contrastRatio, fontFloorPx, inferFormat, inspect, parseColor, readingTimeSeconds, relativeLuminance, resolveComposition, scenePlacements, textBlocks, timeSpecToSeconds, toFrames, totalFrames, totalWords, validateComposition };
+//# sourceMappingURL=cinema.js.map
+//# sourceMappingURL=cinema.js.map