@cueframe/kernel 0.2.2 → 0.2.3

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

@@ -1,6 +1,9 @@
 import {
   FitText
 } from "./chunk-XHGZ2E77.js";
+import {
+  EASING_BY_INTENT
+} from "./chunk-MFHXCHRI.js";
 import {
   ACCENT,
   ACCENT_STRONG,
@@ -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-KKEY5MIW.js → chunk-ZS3A3QUM.js}

@@ -1,17 +1,17 @@
-import {
-  recolor
-} from "./chunk-DLF4WVSE.js";
 import {
   TextStage
 } from "./chunk-U4V4FZGE.js";
+import {
+  recolor
+} from "./chunk-DLF4WVSE.js";
 import {
   resolveTypeface
-} from "./chunk-BDMTUEEZ.js";
+} from "./chunk-LT4PWSR2.js";
 import {
   FLOOR_SHADOW,
   FLOOR_TEXT,
   resolveContrast
-} from "./chunk-EMGFZ3PR.js";
+} from "./chunk-FWSJLHSV.js";
 import {
   resolveEasing,
   staggerRise,
@@ -34,7 +34,7 @@ import {
   TEXT_MUTED,
   VIOLET,
   WARNING
-} from "./chunk-CX2IIQ4R.js";
+} from "./chunk-W2245F6G.js";
 
 // ../execution/primitives/src/text/blur-reveal/index.tsx
 import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
@@ -1912,7 +1912,7 @@ var paramsSchema = z.object({
     "Text color. Defaults to a video-safe off-white (text sits over footage); pass $brand:colors.textOnMedia to theme it."
   ),
   fontFamily: z.string().default(resolveTypeface("display")).describe(
-    "Display typeface. Defaults to the brand display face (Bricolage Grotesque floor); pass $brand:fonts.heading to theme it."
+    "Display typeface. Defaults to the brand display face (Inter floor); pass $brand:fonts.heading to theme it."
   ),
   speed: z.number().min(0.25).max(4).default(1).describe(
     "Playback speed multiplier. 1 = normal; 2 = twice as fast."
@@ -2044,11 +2044,11 @@ var paramsSchema3 = z3.object({
   highlight: z3.string().min(1).describe("The single word or phrase to emphasize."),
   after: z3.string().default("").describe("Text after the highlight, including leading space if any."),
   baseColor: z3.string().default(FLOOR_TEXT).describe("Color of the surrounding (non-highlighted) text. Defaults to a video-safe off-white so it survives over footage; pass $brand:colors.textOnMedia to theme it."),
-  highlightColor: z3.string().default(ACCENT_STRONG).describe("Color of the emphasized word. A warm accent by default; use a brand-kit accent for cascade."),
+  highlightColor: z3.string().default(ACCENT_STRONG).describe("Color of the emphasized word. An indigo accent by default; use a brand-kit accent for cascade."),
   fontSize: z3.number().min(16).max(180).default(72).describe("Font size in pixels at 1920\xD71080."),
   fontWeight: z3.number().min(100).max(900).default(600).describe("CSS font weight applied uniformly."),
   speed: z3.number().min(0.25).max(4).default(1).describe("Playback speed multiplier."),
-  fontFamily: z3.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Bricolage Grotesque floor); pass $brand:fonts.heading to theme it.")
+  fontFamily: z3.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Inter floor); pass $brand:fonts.heading to theme it.")
 }).passthrough();
 var config3 = {
   id: "inline-highlight",
@@ -2308,7 +2308,7 @@ var paramsSchema7 = z7.object({
   fontSize: z7.number().min(16).max(180).default(72).describe("Font size in pixels at 1920\xD71080."),
   fontWeight: z7.number().min(100).max(900).default(600).describe("CSS font weight applied uniformly."),
   speed: z7.number().min(0.25).max(4).default(1).describe("Playback speed multiplier."),
-  fontFamily: z7.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Bricolage Grotesque floor); pass $brand:fonts.heading to theme it.")
+  fontFamily: z7.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Inter floor); pass $brand:fonts.heading to theme it.")
 }).passthrough();
 var config7 = {
   id: "marker-highlight",
@@ -2364,7 +2364,7 @@ var paramsSchema8 = z8.object({
   fontSize: z8.number().min(16).max(240).default(96).describe("Font size in pixels at 1920\xD71080."),
   fontWeight: z8.number().min(100).max(900).default(700).describe("CSS font weight. Bold weights catch the shimmer better."),
   speed: z8.number().min(0.25).max(4).default(1).describe("Playback speed multiplier \u2014 controls sweep tempo."),
-  fontFamily: z8.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Bricolage Grotesque floor); pass $brand:fonts.heading to theme it.")
+  fontFamily: z8.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Inter floor); pass $brand:fonts.heading to theme it.")
 }).passthrough();
 var config8 = {
   id: "shimmer-sweep",
@@ -2604,7 +2604,7 @@ var paramsSchema12 = z12.object({
   ),
   cursorColor: z12.string().optional().describe("Cursor color. Falls back to text color if unset."),
   fontFamily: z12.string().default(resolveTypeface("display")).describe(
-    "Display typeface. Defaults to the brand display face (Bricolage Grotesque floor); pass $brand:fonts.heading to theme it."
+    "Display typeface. Defaults to the brand display face (Inter floor); pass $brand:fonts.heading to theme it."
   )
 }).passthrough();
 var config12 = {
@@ -2771,7 +2771,7 @@ var paramsSchema14 = z14.object({
   speed: z14.number().min(0.25).max(4).default(1).describe(
     "Playback speed multiplier. Note: glitchAt and glitchDuration are in source frames before the speed multiplier."
   ),
-  fontFamily: z14.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Bricolage Grotesque floor); pass $brand:fonts.heading to theme it.")
+  fontFamily: z14.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Inter floor); pass $brand:fonts.heading to theme it.")
 }).passthrough();
 var config14 = {
   id: "rgb-glitch-text",
@@ -3075,7 +3075,7 @@ var paramsSchema19 = z19.object({
     "CSS font weight. 600 gives editorial weight without overpowering the line."
   ),
   color: z19.string().default(FLOOR_TEXT).describe("Text color for both `from` and `to` (video-safe off-white over footage); pass $brand:colors.textOnMedia to theme."),
-  fontFamily: z19.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Bricolage Grotesque floor); pass $brand:fonts.heading to theme."),
+  fontFamily: z19.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Inter floor); pass $brand:fonts.heading to theme."),
   speed: z19.number().min(0.25).max(4).default(1).describe(
     "Playback speed multiplier. The effect divides duration into strike (0\u201340%), fade (40\u201360%), hold (60\u2013100%) regardless of speed."
   )
@@ -3250,13 +3250,13 @@ var config21 = {
       name: "neon-arcade",
       mood: ["playful", "aggressive"],
       params: { text: "GAME ON", type: "neon", color: ACCENT, intensity: 0.9 },
-      description: "Mandarin neon glow \u2014 arcade/synthwave wrapper."
+      description: "Indigo neon glow \u2014 arcade/synthwave wrapper."
     },
     {
       name: "sunset-gradient",
       mood: ["cinematic", "editorial"],
       params: { text: "Golden hour", type: "gradient", colors: [DANGER, ACCENT, WARNING], intensity: 0.8 },
-      description: "Warm gradient fill across the glyphs."
+      description: "Coral-to-amber gradient fill across the glyphs."
     },
     {
       name: "minimal-outline",

package/dist/{chunk-LQUWKBST.js → chunk-ZVG446DJ.js}

@@ -4,21 +4,92 @@ var COMPONENT_SOURCE_VERSION = 2;
 var COMPONENT_BUNDLE_VERSION = 2;
 var COMPONENT_RECEIPT_VERSION = 2;
 var ComponentAssetKind = z.enum(["image", "video", "audio", "data"]);
+var ComponentMediaTierV1 = z.union([
+  z.literal(256),
+  z.literal(512),
+  z.literal(1024),
+  z.literal(2048)
+]);
+var ComponentMediaDemandV1 = z.discriminatedUnion("mode", [
+  z.object({ mode: z.literal("original") }).strict(),
+  z.object({ mode: z.literal("tier"), tier: ComponentMediaTierV1 }).strict(),
+  z.object({
+    mode: z.literal("auto"),
+    maxProjectedWidthRatio: z.number().positive().max(64),
+    maxProjectedHeightRatio: z.number().positive().max(64),
+    minVisibleSourceWidthRatio: z.number().positive().max(1).default(1),
+    minVisibleSourceHeightRatio: z.number().positive().max(1).default(1)
+  }).strict()
+]);
 var ComponentAssetDeclarationV2 = z.object({
   kind: ComponentAssetKind,
   required: z.boolean(),
-  mimeTypes: z.array(z.string().min(1)).min(1).optional()
+  mimeTypes: z.array(z.string().min(1)).min(1).optional(),
+  mediaDemand: ComponentMediaDemandV1.optional()
 }).strict();
+var ComponentGraphicsApiV2 = z.enum(["canvas2d", "webgl", "webgl2", "webgpu"]);
 var ComponentGraphicsRequirementV2 = z.object({
-  api: z.enum(["canvas2d", "webgpu"]),
+  api: ComponentGraphicsApiV2,
   required: z.literal(true),
   accelerationPreference: z.enum(["hardware-preferred", "software-allowed"])
 }).strict();
+var SceneShotCapabilityV2 = z.object({
+  version: z.literal(2)
+}).strict();
+var ComponentGlBackendV2 = z.enum(["angle", "angle-egl", "swangle", "vulkan"]);
+var ComponentRendererConfigV2 = z.object({
+  glBackend: ComponentGlBackendV2,
+  colorPipeline: z.literal("srgb"),
+  sceneShot: SceneShotCapabilityV2.nullable()
+}).strict();
+var ComponentHostAttestationV2 = z.object({
+  webgl: z.string().min(1),
+  renderer: z.string(),
+  maxTextureSize: z.number().int().positive(),
+  halfFloatColorTarget: z.string().min(1),
+  glBackend: ComponentGlBackendV2
+}).strict();
+var ComponentStillSessionAttestationV1 = z.object({
+  loadedRuntimeIdentity: z.string().min(1),
+  loadedDependencyIdentity: z.string().min(1),
+  observedRasterAffectingFlags: z.object({
+    browserArguments: z.array(z.string().min(1))
+  }).strict(),
+  browserProduct: z.string().min(1),
+  browserVersion: z.string().min(1),
+  browserExecutableSha256: z.string().regex(/^[a-f0-9]{64}$/),
+  headless: z.boolean(),
+  os: z.string().min(1),
+  arch: z.string().min(1),
+  deviceScaleFactor: z.number().positive(),
+  colorProfile: z.string().min(1),
+  actualGlBackend: z.string().min(1),
+  actualRenderer: z.string().min(1),
+  gpuIdentity: z.string().min(1).nullable()
+}).strict();
+var ComponentStillSessionHostAttestationV1 = ComponentStillSessionAttestationV1.omit({
+  deviceScaleFactor: true
+}).strict();
+var ComponentStillPngContainerFactsV1 = z.object({
+  handle: z.string().min(1),
+  mimeType: z.literal("image/png"),
+  byteLength: z.number().int().positive(),
+  width: z.number().int().positive(),
+  height: z.number().int().positive(),
+  encodedSha256: z.string().regex(/^[a-f0-9]{64}$/)
+}).strict();
+var ComponentCapturePageRasterAttestationV1 = z.object({
+  sessionId: z.string().uuid(),
+  requestId: z.number().int().nonnegative(),
+  frame: z.number().int().nonnegative(),
+  deviceScaleFactor: z.number().positive()
+}).strict();
 var ComponentManifestV2 = z.object({
   version: z.literal(COMPONENT_SOURCE_VERSION),
   assets: z.record(z.string().min(1), ComponentAssetDeclarationV2),
   graphics: ComponentGraphicsRequirementV2,
-  alphaPolicy: z.enum(["requires-transparency", "allows-opaque"])
+  alphaPolicy: z.enum(["requires-transparency", "allows-opaque"]),
+  sceneShot: SceneShotCapabilityV2.optional()
 }).strict();
 var CANVAS2D_COMPONENT_MANIFEST_V2 = Object.freeze({
   version: COMPONENT_SOURCE_VERSION,
@@ -36,6 +107,19 @@ var ComponentSourceV2 = z.object({
   tsxSource: z.string().min(1),
   manifest: ComponentManifestV2
 }).strict();
+var ComponentSourceRefV1 = z.object({
+  version: z.literal(1),
+  sourceVersionId: z.string().regex(/^[a-f0-9]{64}$/)
+}).strict();
+var COMPONENT_SOURCE_REF_PROP = "componentRef";
+function readComponentSourceRef(props) {
+  const parsed = ComponentSourceRefV1.safeParse(props[COMPONENT_SOURCE_REF_PROP]);
+  return parsed.success ? parsed.data : null;
+}
+function authoredComponentProps(props) {
+  const { [COMPONENT_SOURCE_REF_PROP]: _reserved, ...authored } = props;
+  return authored;
+}
 var ComponentAssetBindingV2 = z.object({
   handle: z.string().min(1).max(256),
   kind: ComponentAssetKind,
@@ -43,7 +127,8 @@ var ComponentAssetBindingV2 = z.object({
   contentSha256: z.string().regex(/^[a-f0-9]{64}$/),
   width: z.number().int().positive().optional(),
   height: z.number().int().positive().optional(),
-  durationSec: z.number().positive().optional()
+  durationSec: z.number().positive().optional(),
+  frameRate: z.number().positive().optional()
 }).strict();
 var ComponentAssetInputV2 = z.object({
   handle: z.string().min(1).max(256),
@@ -51,7 +136,8 @@ var ComponentAssetInputV2 = z.object({
   mimeType: z.string().min(1),
   width: z.number().int().positive().optional(),
   height: z.number().int().positive().optional(),
-  durationSec: z.number().positive().optional()
+  durationSec: z.number().positive().optional(),
+  frameRate: z.number().positive().optional()
 }).strict();
 var ComponentAssetFileV2 = z.object({
   path: z.string().min(1)
@@ -76,7 +162,8 @@ var ComponentRenderRequestV2 = z.object({
   durationInFrames: z.number().int().positive(),
   alpha: z.boolean(),
   graphics: ComponentGraphicsRequirementV2,
-  seed: z.string().min(1)
+  seed: z.string().min(1),
+  renderer: ComponentRendererConfigV2
 }).strict();
 var ComponentBakeRequestV2 = z.object({
   version: z.literal(COMPONENT_RECEIPT_VERSION),
@@ -108,7 +195,7 @@ var ComponentBakeJobV2 = z.object({
   seed: z.string().min(1)
 }).strict();
 var ComponentGraphicsActualV2 = z.object({
-  api: z.enum(["canvas2d", "webgpu"]),
+  api: ComponentGraphicsApiV2,
   acceleration: z.enum(["hardware", "software"]),
   adapterName: z.string().min(1).optional(),
   deviceLost: z.literal(false)
@@ -129,7 +216,16 @@ var ComponentRenderReceiptV2 = z.object({
   durationInFrames: z.number().int().positive(),
   alpha: z.boolean(),
   requestedGraphics: ComponentGraphicsRequirementV2,
-  actualGraphics: ComponentGraphicsActualV2
+  actualGraphics: ComponentGraphicsActualV2,
+  renderer: ComponentRendererConfigV2,
+  /**
+   * The host the frames were captured on, or null when this render never probed one — a lane
+   * capturing canvas2d under no acceleration policy opens no probe page and has nothing to
+   * attest. Required as a key so every producer has to say which it is.
+   *
+   * Excluded from `artifactId` by `componentArtifactIdentity`; see `ComponentHostAttestationV2`.
+   */
+  host: ComponentHostAttestationV2.nullable()
 }).strict();
 var COMPONENT_RUNTIME_ERROR_CODES = [
   "invalid_component_source",
@@ -147,17 +243,21 @@ var COMPONENT_RUNTIME_ERROR_CODES = [
   "component_graphics_mismatch",
   "component_device_lost",
   "component_output_invalid",
-  "component_conflict"
+  "component_conflict",
+  "component_scene_invalid"
 ];
 var ComponentRuntimeErrorCode = z.enum(COMPONENT_RUNTIME_ERROR_CODES);
 var ComponentRuntimeError = class extends Error {
   code;
   retryable;
+  /** Where the refusal points: stage, clip/component ids, and a field path (mirrors the wire envelope's locator). */
+  locator;
   constructor(code, message, options) {
     super(message, options?.cause === void 0 ? void 0 : { cause: options.cause });
     this.name = "ComponentRuntimeError";
     this.code = code;
     this.retryable = options?.retryable ?? false;
+    if (options?.locator) this.locator = options.locator;
   }
 };
 function assertGraphicsReceiptMatches(request, receipt) {
@@ -167,6 +267,19 @@ function assertGraphicsReceiptMatches(request, receipt) {
   if (receipt.actualGraphics.api !== request.graphics.api || receipt.actualGraphics.deviceLost) {
     throw new ComponentRuntimeError("component_graphics_mismatch", "Rendered graphics backend does not satisfy the component requirement.");
   }
+  if (request.graphics.accelerationPreference === "hardware-preferred" && receipt.actualGraphics.acceleration !== "hardware") {
+    throw new ComponentRuntimeError(
+      "component_graphics_mismatch",
+      "Rendered graphics backend did not use hardware acceleration."
+    );
+  }
+}
+function assertRendererReceiptMatches(request, receipt) {
+  const requested = request.renderer;
+  const sealed = receipt.renderer;
+  if (sealed.glBackend !== requested.glBackend || sealed.colorPipeline !== requested.colorPipeline || (sealed.sceneShot?.version ?? null) !== (requested.sceneShot?.version ?? null)) {
+    throw new ComponentRuntimeError("component_graphics_mismatch", "Renderer configuration in the receipt does not match the render request.");
+  }
 }
 
 export {
@@ -174,11 +287,26 @@ export {
   COMPONENT_BUNDLE_VERSION,
   COMPONENT_RECEIPT_VERSION,
   ComponentAssetKind,
+  ComponentMediaTierV1,
+  ComponentMediaDemandV1,
   ComponentAssetDeclarationV2,
+  ComponentGraphicsApiV2,
   ComponentGraphicsRequirementV2,
+  SceneShotCapabilityV2,
+  ComponentGlBackendV2,
+  ComponentRendererConfigV2,
+  ComponentHostAttestationV2,
+  ComponentStillSessionAttestationV1,
+  ComponentStillSessionHostAttestationV1,
+  ComponentStillPngContainerFactsV1,
+  ComponentCapturePageRasterAttestationV1,
   ComponentManifestV2,
   CANVAS2D_COMPONENT_MANIFEST_V2,
   ComponentSourceV2,
+  ComponentSourceRefV1,
+  COMPONENT_SOURCE_REF_PROP,
+  readComponentSourceRef,
+  authoredComponentProps,
   ComponentAssetBindingV2,
   ComponentAssetInputV2,
   ComponentAssetFileV2,
@@ -191,5 +319,6 @@ export {
   COMPONENT_RUNTIME_ERROR_CODES,
   ComponentRuntimeErrorCode,
   ComponentRuntimeError,
-  assertGraphicsReceiptMatches
+  assertGraphicsReceiptMatches,
+  assertRendererReceiptMatches
 };

package/dist/component-runtime/browserOptions.js

@@ -1,7 +1,18 @@
 import {
-  COMPONENT_CHROMIUM_OPTIONS
-} from "../chunk-CGHTMZNC.js";
+  assertComponentBrowserHardware,
+  componentBrowserBackend,
+  componentBrowserOptions,
+  resolvedComponentRenderer,
+  webglBackend
+} from "../chunk-WIHXXF3X.js";
+import "../chunk-ZVG446DJ.js";
+import "../chunk-MH3UPKWR.js";
+import "../chunk-2L7PYYJK.js";
 import "../chunk-2ESYSVXG.js";
 export {
-  COMPONENT_CHROMIUM_OPTIONS
+  assertComponentBrowserHardware,
+  componentBrowserBackend,
+  componentBrowserOptions,
+  resolvedComponentRenderer,
+  webglBackend
 };