@cueframe/kernel 0.2.2 → 0.2.4

package/dist/{chunk-6ID2J64H.js → chunk-7W6ZIKWV.js}

@@ -1,3 +1,6 @@
+import {
+  EASING_BY_INTENT
+} from "./chunk-MFHXCHRI.js";
 import {
   FitText
 } from "./chunk-XHGZ2E77.js";
@@ -14,7 +17,16 @@ import {
   TEXT_MUTED,
   VIOLET,
   WARNING
-} from "./chunk-CX2IIQ4R.js";
+} from "./chunk-W2245F6G.js";
+import {
+  CAMERA_PRESETS,
+  DEFAULT_CAMERA,
+  PerspectiveStage,
+  StageLayer,
+  perspectiveFor,
+  resolveCamera,
+  useStage
+} from "./chunk-5DJ3IEJR.js";
 
 // ../execution/primitives/src/effects/blur/index.tsx
 import React2 from "react";
@@ -628,6 +640,66 @@ function SpringPopIn({
   );
 }
 
+// ../execution/primitives/src/effects/stage-camera/index.tsx
+import React7, { useMemo } from "react";
+function laneDepths(children, layerDepth) {
+  const kids = React7.Children.toArray(children);
+  const indexes = kids.map(
+    (k) => React7.isValidElement(k) && typeof k.props["data-cf-layer-index"] === "number" ? k.props["data-cf-layer-index"] : Number.NaN
+  );
+  const tagged = indexes.filter((n) => Number.isFinite(n));
+  if (tagged.length === 0 || layerDepth === 0) return kids.map(() => 0);
+  const front = Math.max(...tagged);
+  return indexes.map((n) => Number.isFinite(n) ? (n - front) * layerDepth : 0);
+}
+function laneScale(z12, fov, height) {
+  const p = perspectiveFor(fov, height);
+  return (p - z12) / p;
+}
+var Lanes = ({ layerDepth, children }) => {
+  const { camera, height } = useStage();
+  const depths = laneDepths(children, layerDepth);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, React7.Children.toArray(children).map((child, i) => /* @__PURE__ */ React7.createElement(
+    StageLayer,
+    {
+      key: React7.isValidElement(child) && child.key != null ? child.key : i,
+      z: depths[i],
+      scale: laneScale(depths[i], camera.fov, height)
+    },
+    child
+  )));
+};
+var StageCameraEffect = ({
+  move = "dolly-in",
+  fov = 40,
+  amount,
+  easing = "entrance",
+  from,
+  to,
+  focus,
+  layerDepth = 0,
+  active = true,
+  effectFrame = 0,
+  effectDurationInFrames = 60,
+  style,
+  width,
+  height,
+  children
+}) => {
+  const keyframes = useMemo(() => {
+    const base = CAMERA_PRESETS[move](effectDurationInFrames, { fov, amount, easing: EASING_BY_INTENT[easing] });
+    if (!from && !to) return base;
+    const first = { frame: 0, camera: { fov, ...base[0]?.camera ?? {}, ...from ?? {} } };
+    const last = { frame: Math.max(1, effectDurationInFrames - 1), camera: { ...base[base.length - 1]?.camera ?? {}, ...to ?? {} }, easing: EASING_BY_INTENT[easing] };
+    return [first, last];
+  }, [move, effectDurationInFrames, fov, amount, easing, from, to]);
+  if (!active) {
+    return /* @__PURE__ */ React7.createElement("div", { style: { position: "absolute", inset: 0 } }, children);
+  }
+  const camera = resolveCamera(keyframes, effectFrame, { ...DEFAULT_CAMERA, fov });
+  return /* @__PURE__ */ React7.createElement(PerspectiveStage, { camera, width, height, focus, style }, /* @__PURE__ */ React7.createElement(Lanes, { layerDepth }, children));
+};
+
 // ../execution/primitives/src/effects/success-confetti/index.tsx
 import {
   interpolate as interpolate4,
@@ -782,7 +854,7 @@ function SuccessConfetti({
 }
 
 // ../execution/primitives/src/effects/vignette/index.tsx
-import React7 from "react";
+import React8 from "react";
 var Vignette = ({
   intensity = 0.5,
   spread = 0.5,
@@ -794,7 +866,7 @@ var Vignette = ({
   const outerStop = Math.round(70 + spread * 30);
   const shapeValue = shape === "circle" ? "circle" : "ellipse";
   const gradient = `radial-gradient(${shapeValue} at center, transparent ${innerStop}%, ${color} ${outerStop}%)`;
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     "div",
     {
       style: {
@@ -1278,22 +1350,84 @@ var config8 = {
   preview: { thumbnailFrame: 30, mode: "oneshot", defaultExample: "default-bounce" }
 };
 
-// ../execution/primitives/src/effects/success-confetti/config.ts
+// ../execution/primitives/src/effects/stage-camera/config.ts
 import { z as z9 } from "zod";
+var cameraPartial = z9.object({
+  x: z9.number().optional(),
+  y: z9.number().optional(),
+  z: z9.number().optional(),
+  rotX: z9.number().optional(),
+  rotY: z9.number().optional(),
+  rotZ: z9.number().optional(),
+  fov: z9.number().min(10).max(120).optional()
+}).strict();
 var paramsSchema9 = z9.object({
-  count: z9.number().int().min(10).max(400).default(120).describe("Number of confetti particles. 80\u2013150 reads festive without overwhelming."),
-  colors: z9.array(z9.string()).min(1).default([DANGER, WARNING, SUCCESS, TEAL, VIOLET]).describe("Particle colors to sample from. 4\u20136 distinct hues works best."),
-  originX: z9.number().min(0).max(1).default(0.5).describe("Horizontal origin of the burst, normalized 0\u20131."),
-  originY: z9.number().min(0).max(1).default(0.5).describe("Vertical origin of the burst, normalized 0\u20131."),
-  gravity: z9.number().min(0).max(2).default(0.8).describe("Downward acceleration. 0 = particles drift; 1+ = particles fall fast."),
-  velocity: z9.number().min(1).max(40).default(14).describe("Initial burst speed. Higher = particles travel further."),
-  text: z9.string().optional().describe('Optional centered text on top of the confetti (e.g., "\u2713 Done").'),
-  textColor: z9.string().default(SURFACE).describe("Color of the optional text."),
-  background: z9.string().optional().describe("Optional full-frame background behind the burst."),
-  seed: z9.string().default("cueframe").describe("Deterministic seed for the particle distribution."),
-  speed: z9.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
+  move: z9.enum(["static", "dolly-in", "dolly-out", "drift", "tilt-reveal", "orbit"]).default("dolly-in").describe(
+    "Camera move over the effect window. dolly-in settles from far to rest; tilt-reveal leans a flat frame back into place; drift is a slow glide for holds; orbit swings around the frame centre."
+  ),
+  fov: z9.number().min(10).max(120).default(40).describe("Vertical field of view in degrees. 28\u201345 reads cinematic; wider exaggerates depth."),
+  amount: z9.number().optional().describe("Move magnitude: px for dolly/drift, degrees for tilt/orbit. Preset default when omitted."),
+  easing: z9.enum(["entrance", "emphasis", "playful", "exit", "cross", "drama", "none"]).default("entrance").describe("Easing intent for the move."),
+  from: cameraPartial.optional().describe("Override the starting camera (x,y,z px; rotX,rotY,rotZ deg; fov)."),
+  to: cameraPartial.optional().describe("Override the ending camera."),
+  focus: z9.object({ z: z9.number(), range: z9.number().positive(), maxBlur: z9.number().min(0).max(40) }).optional().describe(
+    "Layer depth of field: lanes further than `range` px from the plane at `z` blur up to `maxBlur` px. Only bites once `layerDepth` has actually spread the lanes apart, which needs two or more media tracks."
+  ),
+  layerDepth: z9.number().min(0).max(1e3).default(0).describe(
+    "Spacing in px between successive media track lanes in depth; the top track is nearest. Needs two or more media tracks to do anything: a single-track timeline is one lane, every lane depth is 0, and the frame moves as one plane. Overlays \u2014 text, backgrounds, UI blocks, scenes \u2014 are not lanes and never take a depth. Lanes behind the front one are scaled back up so they still fill the frame at rest, so the depth reads as parallax under camera motion rather than as a shrunken layer. 0 moves the whole frame as one plane."
+  )
 }).passthrough();
 var config9 = {
+  id: "stage-camera",
+  component: StageCameraEffect,
+  name: "Stage Camera",
+  category: "effects",
+  kind: "component",
+  version: "0.1.0",
+  effectPlacement: "wrap",
+  intent: "camera-move",
+  description: "A scene camera over the media clip lanes: perspective dolly, tilt, drift, or orbit with optional layer depth of field. It wraps the lanes and nothing else \u2014 overlays (text, backgrounds, UI blocks, scenes) composite above it and are not moved by it. With layerDepth > 0 and two or more media tracks, each lane sits on its own depth plane and the lanes parallax against one another under the move.",
+  useWhen: "Any hold of media clips that would otherwise sit still; product and screenshot reveals (tilt-reveal); opening beats (dolly-in); ambient motion under text (drift). It needs media clips to move: on a timeline whose visuals are all overlays it renders nothing. List it first among the effects so it is the innermost wrap and receives the lanes directly. Avoid stacking two stage cameras.",
+  pairsWith: ["color-grade", "vignette"],
+  avoidWith: ["zoom-through", "spatial-push"],
+  tier: "recommended",
+  useCase: ["emphasis", "intro", "full-scene"],
+  tags: ["camera", "dolly", "tilt", "orbit", "parallax", "depth", "3d", "perspective", "depth-of-field"],
+  mood: ["cinematic", "minimal", "tech-demo", "editorial"],
+  paramsSchema: paramsSchema9,
+  propDefaults: { move: "dolly-in", fov: 40, easing: "entrance", layerDepth: 0 },
+  examples: [
+    { name: "dolly-in", mood: ["cinematic"], params: { move: "dolly-in", fov: 36 }, description: "Settle in from far. Opening beats." },
+    { name: "tilt-reveal", mood: ["tech-demo"], params: { move: "tilt-reveal", fov: 40, amount: 18 }, description: "A flat screenshot leans back into the frame." },
+    { name: "drift-parallax", mood: ["minimal"], params: { move: "drift", layerDepth: 160, focus: { z: 0, range: 500, maxBlur: 8 } }, description: "Slow glide with the media lanes on separate depth planes; the lane behind softens. Requires two or more media tracks \u2014 with one track there is a single lane and this renders as a plain drift." },
+    { name: "orbit", mood: ["editorial"], params: { move: "orbit", amount: 14 } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 90,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 30, mode: "oneshot", defaultExample: "dolly-in" }
+};
+
+// ../execution/primitives/src/effects/success-confetti/config.ts
+import { z as z10 } from "zod";
+var paramsSchema10 = z10.object({
+  count: z10.number().int().min(10).max(400).default(120).describe("Number of confetti particles. 80\u2013150 reads festive without overwhelming."),
+  colors: z10.array(z10.string()).min(1).default([DANGER, WARNING, SUCCESS, TEAL, VIOLET]).describe("Particle colors to sample from. 4\u20136 distinct hues works best."),
+  originX: z10.number().min(0).max(1).default(0.5).describe("Horizontal origin of the burst, normalized 0\u20131."),
+  originY: z10.number().min(0).max(1).default(0.5).describe("Vertical origin of the burst, normalized 0\u20131."),
+  gravity: z10.number().min(0).max(2).default(0.8).describe("Downward acceleration. 0 = particles drift; 1+ = particles fall fast."),
+  velocity: z10.number().min(1).max(40).default(14).describe("Initial burst speed. Higher = particles travel further."),
+  text: z10.string().optional().describe('Optional centered text on top of the confetti (e.g., "\u2713 Done").'),
+  textColor: z10.string().default(SURFACE).describe("Color of the optional text."),
+  background: z10.string().optional().describe("Optional full-frame background behind the burst."),
+  seed: z10.string().default("cueframe").describe("Deterministic seed for the particle distribution."),
+  speed: z10.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
+}).passthrough();
+var config10 = {
   id: "success-confetti",
   component: SuccessConfetti,
   name: "Success Confetti",
@@ -1309,7 +1443,7 @@ var config9 = {
   useCase: ["emphasis"],
   tags: ["effect", "confetti", "celebration", "particles", "success", "achievement"],
   mood: ["playful", "breaking-news"],
-  paramsSchema: paramsSchema9,
+  paramsSchema: paramsSchema10,
   propDefaults: { count: 120, colors: [DANGER, WARNING, SUCCESS, TEAL, VIOLET], originX: 0.5, originY: 0.5, gravity: 0.8, velocity: 14, textColor: SURFACE, seed: "cueframe", speed: 1 },
   examples: [
     {
@@ -1336,14 +1470,14 @@ var config9 = {
 };
 
 // ../execution/primitives/src/effects/vignette/config.ts
-import { z as z10 } from "zod";
-var paramsSchema10 = z10.object({
-  intensity: z10.number().min(0).max(1).default(0.5).describe("Edge darkness. 0.4\u20130.6 reads as cinematic; 0.8+ feels like a tunnel."),
-  spread: z10.number().min(0).max(1).default(0.5).describe("How far from the edges the vignette starts. Lower = covers more of the frame."),
-  shape: z10.enum(["ellipse", "circle"]).default("ellipse").describe("Gradient shape. Ellipse follows the frame ratio; circle is centered round."),
-  color: z10.string().default("black").describe("Vignette color. Black is canonical; dark colors can tint the frame edges.")
+import { z as z11 } from "zod";
+var paramsSchema11 = z11.object({
+  intensity: z11.number().min(0).max(1).default(0.5).describe("Edge darkness. 0.4\u20130.6 reads as cinematic; 0.8+ feels like a tunnel."),
+  spread: z11.number().min(0).max(1).default(0.5).describe("How far from the edges the vignette starts. Lower = covers more of the frame."),
+  shape: z11.enum(["ellipse", "circle"]).default("ellipse").describe("Gradient shape. Ellipse follows the frame ratio; circle is centered round."),
+  color: z11.string().default("black").describe("Vignette color. Black is canonical; dark colors can tint the frame edges.")
 }).passthrough();
-var config10 = {
+var config11 = {
   id: "vignette",
   component: Vignette,
   name: "Vignette",
@@ -1359,7 +1493,7 @@ var config10 = {
   useCase: ["grade"],
   tags: ["effect", "vignette", "edge", "darken", "focus", "cinematic"],
   mood: ["cinematic", "editorial", "minimal"],
-  paramsSchema: paramsSchema10,
+  paramsSchema: paramsSchema11,
   propDefaults: { intensity: 0.5, spread: 0.5, shape: "ellipse", color: "black" },
   examples: [
     {
@@ -1394,7 +1528,8 @@ var catalog = [
   config7,
   config8,
   config9,
-  config10
+  config10,
+  config11
 ];
 
 export {
@@ -1406,6 +1541,8 @@ export {
   PulsingIndicator,
   SpotlightCard,
   SpringPopIn,
+  laneDepths,
+  StageCameraEffect,
   SuccessConfetti,
   Vignette,
   catalog

package/dist/{chunk-RETQFTGY.js → chunk-A74FZCPY.js}

@@ -1,9 +1,8 @@
 import {
   ComponentRuntimeError
-} from "./chunk-LQUWKBST.js";
+} from "./chunk-ZVG446DJ.js";
 
-// ../execution/component-runtime/src/importPolicy.ts
-import { parse } from "@babel/parser";
+// ../execution/component-runtime/src/allowedImports.ts
 var COMPONENT_IMPORT_ALLOWLIST = Object.freeze([
   "react",
   "react/jsx-runtime",
@@ -20,10 +19,12 @@ var COMPONENT_IMPORT_ALLOWLIST = Object.freeze([
   "three/webgpu",
   "three/tsl",
   "@react-three/fiber",
-  "@react-three/drei",
   "@cueframe/animate",
   "gsap"
 ]);
+
+// ../execution/component-runtime/src/importPolicy.ts
+import { parse } from "@babel/parser";
 var ALLOWED_IMPORTS = new Set(COMPONENT_IMPORT_ALLOWLIST);
 var DENIED_NONDETERMINISTIC_MEMBERS = /* @__PURE__ */ new Set([
   "Math.random",
@@ -38,6 +39,14 @@ var DENIED_AMBIENT_CALLS = /* @__PURE__ */ new Set([
   "setTimeout",
   "setInterval"
 ]);
+var GUARDED_MEDIA_EXPORTS = /* @__PURE__ */ new Set(["Audio", "Html5Audio", "Html5Video", "OffthreadVideo", "Video"]);
+function importedName(specifier) {
+  const imported = specifier.imported;
+  if (specifier.type !== "ImportSpecifier" || !imported) return null;
+  if (imported.type === "Identifier" && typeof imported.name === "string") return imported.name;
+  if (imported.type === "StringLiteral" && typeof imported.value === "string") return imported.value;
+  return null;
+}
 function staticMemberPath(value) {
   if (!value || typeof value !== "object") return null;
   const node = value;
@@ -58,8 +67,9 @@ function denied(specifier) {
     `Component import is not allowed: ${JSON.stringify(specifier)}.`
   );
 }
-function assertComponentImportsAllowed(tsxSource) {
+function assertComponentImportsAllowed(tsxSource, graphicsApi) {
   let root;
+  let usesMediaTileScene = false;
   try {
     root = parse(tsxSource, {
       sourceType: "module",
@@ -83,6 +93,15 @@ function assertComponentImportsAllowed(tsxSource) {
     if ((type === "ImportDeclaration" || type === "ExportNamedDeclaration" || type === "ExportAllDeclaration") && node.source && typeof node.source === "object") {
       const specifier = node.source.value;
       if (typeof specifier === "string" && !ALLOWED_IMPORTS.has(specifier)) denied(specifier);
+      if ((specifier === "remotion" || specifier === "@remotion/media") && type === "ImportDeclaration") {
+        const specifiers = Array.isArray(node.specifiers) ? node.specifiers : [];
+        const mediaExport = specifiers.map(importedName).find((name) => name !== null && GUARDED_MEDIA_EXPORTS.has(name));
+        if (mediaExport) denied(`${specifier}.${mediaExport}; use @cueframe/animate MediaTileScene`);
+      }
+      if (specifier === "@cueframe/animate" && type === "ImportDeclaration") {
+        const specifiers = Array.isArray(node.specifiers) ? node.specifiers : [];
+        usesMediaTileScene ||= specifiers.map(importedName).some((name) => name === "MediaTileScene" || name === "ImageTileScene");
+      }
     }
     if (type === "ImportExpression") denied("dynamic import()");
     if (type === "CallExpression") {
@@ -92,6 +111,18 @@ function assertComponentImportsAllowed(tsxSource) {
       if (callee?.type === "Identifier" && typeof callee.name === "string" && DENIED_AMBIENT_CALLS.has(callee.name)) {
         denied(`ambient ${callee.name}`);
       }
+      const member = normalizedAmbientPath(node.callee);
+      const args = Array.isArray(node.arguments) ? node.arguments : [];
+      const tag = args[0]?.type === "StringLiteral" ? args[0].value : void 0;
+      if (member === "document.createElement" && (tag === "video" || tag === "audio")) {
+        denied(`raw ${tag} element; use @cueframe/animate MediaTileScene`);
+      }
+    }
+    if (type === "JSXOpeningElement") {
+      const name = node.name;
+      if (name?.type === "JSXIdentifier" && (name.name === "video" || name.name === "audio")) {
+        denied(`raw <${String(name.name)}> element; use @cueframe/animate MediaTileScene`);
+      }
     }
     if (type === "NewExpression") {
       const callee = node.callee;
@@ -127,6 +158,12 @@ function assertComponentImportsAllowed(tsxSource) {
     }
   };
   visit(root);
+  if (usesMediaTileScene && graphicsApi !== void 0 && graphicsApi !== "webgl2") {
+    throw new ComponentRuntimeError(
+      "component_graphics_mismatch",
+      "MediaTileScene requires manifest.graphics.api to be webgl2."
+    );
+  }
 }
 
 export {

package/dist/chunk-BVA3537Z.js

@@ -0,0 +1,63 @@
+// ../execution/component-runtime/src/mediaResolution.ts
+var COMPONENT_MEDIA_TIERS = [256, 512, 1024, 2048];
+var COMPONENT_MEDIA_HEADROOM = 1.25;
+function dimensionsForLongEdge(source, longEdge) {
+  const scale = Math.min(1, longEdge / Math.max(source.width, source.height));
+  return {
+    width: Math.max(1, Math.round(source.width * scale)),
+    height: Math.max(1, Math.round(source.height * scale))
+  };
+}
+function assertDimensions(name, value) {
+  if (![value.width, value.height].every((dimension) => Number.isSafeInteger(dimension) && dimension > 0)) {
+    throw new Error(`${name} dimensions must be positive safe integers.`);
+  }
+}
+function planComponentMediaRepresentation(input) {
+  assertDimensions("Source", input.source);
+  assertDimensions("Output", input.output);
+  const original = (requiredWidth2, requiredHeight2) => ({
+    kind: "original",
+    width: input.source.width,
+    height: input.source.height,
+    tier: null,
+    requiredWidth: requiredWidth2,
+    requiredHeight: requiredHeight2
+  });
+  if (input.demand.mode === "original") return original(input.source.width, input.source.height);
+  if (input.demand.mode === "tier") {
+    const size = dimensionsForLongEdge(input.source, input.demand.tier);
+    if (size.width === input.source.width && size.height === input.source.height) {
+      return original(size.width, size.height);
+    }
+    return {
+      kind: "proxy",
+      ...size,
+      tier: input.demand.tier,
+      requiredWidth: size.width,
+      requiredHeight: size.height
+    };
+  }
+  const requiredWidth = Math.ceil(
+    input.output.width * input.demand.maxProjectedWidthRatio / input.demand.minVisibleSourceWidthRatio * COMPONENT_MEDIA_HEADROOM
+  );
+  const requiredHeight = Math.ceil(
+    input.output.height * input.demand.maxProjectedHeightRatio / input.demand.minVisibleSourceHeightRatio * COMPONENT_MEDIA_HEADROOM
+  );
+  for (const tier of COMPONENT_MEDIA_TIERS) {
+    const size = dimensionsForLongEdge(input.source, tier);
+    if (size.width >= requiredWidth && size.height >= requiredHeight) {
+      if (size.width === input.source.width && size.height === input.source.height) {
+        return original(requiredWidth, requiredHeight);
+      }
+      return { kind: "proxy", ...size, tier, requiredWidth, requiredHeight };
+    }
+  }
+  return original(requiredWidth, requiredHeight);
+}
+
+export {
+  COMPONENT_MEDIA_TIERS,
+  COMPONENT_MEDIA_HEADROOM,
+  planComponentMediaRepresentation
+};

package/dist/{chunk-DHKQ47Q6.js → chunk-DAARYRNT.js}

@@ -45,7 +45,12 @@ function componentRenderIdentity(request) {
   return canonicalJson({ domain: "cueframe.component.render.v2", request });
 }
 function componentArtifactIdentity(input) {
-  return canonicalJson({ domain: "cueframe.component.artifact.v2", ...input });
+  const { host: _host, ...identity } = input.receipt;
+  return canonicalJson({
+    domain: "cueframe.component.artifact.v2",
+    outputSha256: input.outputSha256,
+    receipt: identity
+  });
 }
 
 export {