@depths/waves 0.1.0 → 0.3.0

package/dist/cli.js

@@ -38,7 +38,7 @@ var import_promises2 = __toESM(require("fs/promises"));
 var import_node_path2 = __toESM(require("path"));
 
 // src/version.ts
-var __wavesVersion = "0.1.0";
+var __wavesVersion = "0.2.0";
 
 // src/utils/json-schema.ts
 var import_zod = require("zod");
@@ -70,62 +70,63 @@ var BackgroundSpecSchema = import_zod2.z.discriminatedUnion("type", [
     value: AssetPathSchema
   })
 ]);
-var BaseComponentIRSchema = import_zod2.z.object({
-  id: import_zod2.z.string().min(1).max(100).describe("Unique component instance ID"),
-  type: import_zod2.z.string().min(1).describe("Component type identifier"),
-  timing: TimingSpecSchema,
-  metadata: import_zod2.z.record(import_zod2.z.string(), import_zod2.z.unknown()).optional().describe("Optional metadata")
+var VideoConfigSchema = import_zod2.z.object({
+  id: import_zod2.z.string().default("main"),
+  width: import_zod2.z.number().int().min(360).max(7680),
+  height: import_zod2.z.number().int().min(360).max(4320),
+  fps: import_zod2.z.number().int().min(1).max(120).default(30),
+  durationInFrames: import_zod2.z.number().int().positive()
 });
-var TextComponentIRSchema = BaseComponentIRSchema.extend({
-  type: import_zod2.z.literal("Text"),
-  props: import_zod2.z.object({
-    content: import_zod2.z.string().min(1).max(1e3),
-    fontSize: import_zod2.z.number().int().min(12).max(200).default(48),
-    color: import_zod2.z.string().regex(/^#[0-9A-Fa-f]{6}$/).default("#FFFFFF"),
-    position: import_zod2.z.enum(["top", "center", "bottom", "left", "right"]).default("center"),
-    animation: import_zod2.z.enum(["none", "fade", "slide", "zoom"]).default("fade")
-  })
+var AudioSpecSchema = import_zod2.z.object({
+  background: AssetPathSchema.optional(),
+  volume: import_zod2.z.number().min(0).max(1).default(0.5)
+}).optional();
+var TransitionSpecSchema = import_zod2.z.object({
+  type: import_zod2.z.string().min(1),
+  durationInFrames: import_zod2.z.number().int().positive(),
+  props: import_zod2.z.record(import_zod2.z.string(), import_zod2.z.unknown()).optional()
 });
-var AudioComponentIRSchema = BaseComponentIRSchema.extend({
-  type: import_zod2.z.literal("Audio"),
-  props: import_zod2.z.object({
-    src: AssetPathSchema,
-    volume: import_zod2.z.number().min(0).max(1).default(1),
-    startFrom: import_zod2.z.number().int().min(0).default(0).describe("Start playback from frame N"),
-    fadeIn: import_zod2.z.number().int().min(0).default(0).describe("Fade in duration in frames"),
-    fadeOut: import_zod2.z.number().int().min(0).default(0).describe("Fade out duration in frames")
+var ComponentNodeSchema = import_zod2.z.lazy(
+  () => import_zod2.z.object({
+    id: import_zod2.z.string().min(1).max(100).describe("Unique component instance ID"),
+    type: import_zod2.z.string().min(1).describe("Registered component type identifier"),
+    timing: TimingSpecSchema.optional().describe("Optional timing (frames)"),
+    props: import_zod2.z.record(import_zod2.z.string(), import_zod2.z.unknown()).optional().describe("Component props object"),
+    metadata: import_zod2.z.record(import_zod2.z.string(), import_zod2.z.unknown()).optional().describe("Optional metadata"),
+    children: import_zod2.z.array(ComponentNodeSchema).optional().describe("Nested children nodes")
   })
+);
+var SegmentSchema = import_zod2.z.object({
+  id: import_zod2.z.string().min(1).max(100),
+  durationInFrames: import_zod2.z.number().int().positive(),
+  root: ComponentNodeSchema,
+  transitionToNext: TransitionSpecSchema.optional()
 });
-function getComponentIRSchema() {
-  return ComponentIRSchema;
-}
-var SceneComponentIRSchema = BaseComponentIRSchema.extend({
-  type: import_zod2.z.literal("Scene"),
-  props: import_zod2.z.object({
-    background: BackgroundSpecSchema
-  }),
-  children: import_zod2.z.lazy(() => import_zod2.z.array(getComponentIRSchema())).optional()
-});
-var ComponentIRSchema = import_zod2.z.discriminatedUnion("type", [
-  SceneComponentIRSchema,
-  TextComponentIRSchema,
-  AudioComponentIRSchema
-]);
-var VideoIRSchema = import_zod2.z.object({
-  version: import_zod2.z.literal("1.0").describe("IR schema version"),
-  video: import_zod2.z.object({
-    id: import_zod2.z.string().default("main"),
-    width: import_zod2.z.number().int().min(360).max(7680),
-    height: import_zod2.z.number().int().min(360).max(4320),
-    fps: import_zod2.z.number().int().min(1).max(120).default(30),
-    durationInFrames: import_zod2.z.number().int().positive()
-  }),
-  audio: import_zod2.z.object({
-    background: AssetPathSchema.optional(),
-    volume: import_zod2.z.number().min(0).max(1).default(0.5)
-  }).optional(),
-  scenes: import_zod2.z.array(SceneComponentIRSchema).min(1)
+var VideoIRv2Schema = import_zod2.z.object({
+  version: import_zod2.z.literal("2.0").describe("IR schema version"),
+  video: VideoConfigSchema,
+  audio: AudioSpecSchema,
+  segments: import_zod2.z.array(SegmentSchema).min(1).optional(),
+  timeline: import_zod2.z.array(ComponentNodeSchema).min(1).optional()
+}).superRefine((v, ctx) => {
+  const hasSegments = Array.isArray(v.segments);
+  const hasTimeline = Array.isArray(v.timeline);
+  if (hasSegments === hasTimeline) {
+    ctx.addIssue({
+      code: import_zod2.z.ZodIssueCode.custom,
+      message: 'Exactly one of "segments" or "timeline" must be provided',
+      path: []
+    });
+  }
 });
+var VideoIRv2AuthoringSchema = import_zod2.z.object({
+  version: import_zod2.z.literal("2.0").describe("IR schema version"),
+  video: VideoConfigSchema,
+  audio: AudioSpecSchema,
+  segments: import_zod2.z.array(SegmentSchema).min(1),
+  timeline: import_zod2.z.never().optional()
+}).describe("Preferred authoring format: sequential segments with optional transitions");
+var VideoIRSchema = VideoIRv2Schema;
 
 // src/core/registry.ts
 var ComponentRegistry = class {
@@ -142,12 +143,23 @@ var ComponentRegistry = class {
   getTypes() {
     return Array.from(this.components.keys());
   }
+  getTypesForLLM(options) {
+    const includeInternal = options?.includeInternal ?? false;
+    const out = [];
+    for (const [type, reg] of this.components) {
+      if (!includeInternal && reg.metadata.internal) continue;
+      out.push(type);
+    }
+    return out;
+  }
   has(type) {
     return this.components.has(type);
   }
-  getJSONSchemaForLLM() {
+  getJSONSchemaForLLM(options) {
+    const includeInternal = options?.includeInternal ?? false;
     const schemas = {};
     for (const [type, registration] of this.components) {
+      if (!includeInternal && registration.metadata.internal) continue;
       schemas[type] = {
         schema: zodSchemaToJsonSchema(registration.propsSchema),
         metadata: registration.metadata
@@ -223,57 +235,555 @@ var Audio = ({
   );
 };
 var AudioComponentMetadata = {
-  category: "primitive",
+  kind: "primitive",
+  category: "media",
   description: "Plays an audio file with optional trimming and fade in/out",
   llmGuidance: "Use for background music or sound effects. Prefer short clips for SFX. Use fadeIn/fadeOut (in frames) for smoother audio starts/ends."
 };
 
-// src/components/primitives/Scene.tsx
-var import_remotion2 = require("remotion");
+// src/components/primitives/Box.tsx
+var import_react = __toESM(require("react"));
 var import_zod4 = require("zod");
+
+// src/remotion/Fill.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ScenePropsSchema = import_zod4.z.object({
+var Fill = ({ style, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        boxSizing: "border-box",
+        ...style ?? {}
+      },
+      children
+    }
+  );
+};
+
+// src/components/primitives/Box.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var BoxPropsSchema = import_zod4.z.object({
+  width: import_zod4.z.number().positive().optional().describe("Width in pixels (optional)"),
+  height: import_zod4.z.number().positive().optional().describe("Height in pixels (optional)"),
+  padding: import_zod4.z.number().min(0).default(0).describe("Padding in pixels"),
+  backgroundColor: import_zod4.z.string().optional().describe("CSS color (e.g. #RRGGBB, rgba())"),
+  borderRadius: import_zod4.z.number().min(0).default(0).describe("Border radius in pixels"),
+  opacity: import_zod4.z.number().min(0).max(1).default(1).describe("Opacity 0..1")
+});
+var Box = ({ width, height, padding, backgroundColor, borderRadius, opacity, children }) => {
+  const layers = import_react.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Fill,
+    {
+      style: {
+        width,
+        height,
+        padding,
+        backgroundColor,
+        borderRadius,
+        opacity
+      },
+      children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i))
+    }
+  );
+};
+var BoxComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  description: "Flow container for layout and backgrounds (layout-safe)",
+  llmGuidance: "Use Box as a container inside Grid/Stack. Box participates in layout flow. For x/y positioning, use Frame."
+};
+
+// src/components/primitives/Frame.tsx
+var import_react2 = __toESM(require("react"));
+var import_zod5 = require("zod");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FramePropsSchema = import_zod5.z.object({
+  x: import_zod5.z.number().default(0).describe("Left offset in pixels"),
+  y: import_zod5.z.number().default(0).describe("Top offset in pixels"),
+  width: import_zod5.z.number().positive().optional().describe("Width in pixels (optional)"),
+  height: import_zod5.z.number().positive().optional().describe("Height in pixels (optional)"),
+  padding: import_zod5.z.number().min(0).default(0).describe("Padding in pixels"),
+  backgroundColor: import_zod5.z.string().optional().describe("CSS color (e.g. #RRGGBB, rgba())"),
+  borderRadius: import_zod5.z.number().min(0).default(0).describe("Border radius in pixels"),
+  opacity: import_zod5.z.number().min(0).max(1).default(1).describe("Opacity 0..1")
+});
+var Frame = ({
+  x,
+  y,
+  width,
+  height,
+  padding,
+  backgroundColor,
+  borderRadius,
+  opacity,
+  children
+}) => {
+  const layers = import_react2.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: x,
+        top: y,
+        width,
+        height,
+        padding,
+        backgroundColor,
+        borderRadius,
+        opacity,
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Fill, { children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) })
+    }
+  );
+};
+var FrameComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  description: "Absolute-positioned container (x/y placement)",
+  llmGuidance: "Use Frame for precise pixel placement (x/y). Use Box for normal layout flow inside Grid/Stack."
+};
+
+// src/components/primitives/Grid.tsx
+var import_zod6 = require("zod");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var GridPropsSchema = import_zod6.z.object({
+  columns: import_zod6.z.number().int().min(1).max(12).default(2),
+  rows: import_zod6.z.number().int().min(1).max(12).default(1),
+  gap: import_zod6.z.number().min(0).default(24),
+  padding: import_zod6.z.number().min(0).default(0),
+  align: import_zod6.z.enum(["start", "center", "end", "stretch"]).default("stretch"),
+  justify: import_zod6.z.enum(["start", "center", "end", "stretch"]).default("stretch")
+});
+var mapAlign = (a) => {
+  if (a === "start") return "start";
+  if (a === "end") return "end";
+  if (a === "center") return "center";
+  return "stretch";
+};
+var mapJustify = (j) => {
+  if (j === "start") return "start";
+  if (j === "end") return "end";
+  if (j === "center") return "center";
+  return "stretch";
+};
+var Grid = ({ columns, rows, gap, padding, align, justify, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Fill,
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gridTemplateRows: `repeat(${rows}, 1fr)`,
+        gap,
+        padding,
+        alignItems: mapAlign(align),
+        justifyItems: mapJustify(justify),
+        boxSizing: "border-box"
+      },
+      children
+    }
+  );
+};
+var GridComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  description: "Grid layout container with configurable rows/columns",
+  llmGuidance: "Use Grid for photo collages and dashboards. Provide exactly rows*columns children when possible."
+};
+
+// src/components/primitives/Image.tsx
+var import_remotion2 = require("remotion");
+var import_zod7 = require("zod");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ImagePropsSchema = import_zod7.z.object({
+  src: import_zod7.z.string().min(1),
+  fit: import_zod7.z.enum(["cover", "contain"]).default("cover"),
+  borderRadius: import_zod7.z.number().min(0).default(0),
+  opacity: import_zod7.z.number().min(0).max(1).default(1)
+});
+var resolveAsset = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion2.staticFile)(staticFileInputFromAssetPath(value));
+var Image = ({ src, fit, borderRadius, opacity }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Fill, { style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_remotion2.Img,
+    {
+      src: resolveAsset(src),
+      style: { width: "100%", height: "100%", objectFit: fit, borderRadius }
+    }
+  ) });
+};
+var ImageComponentMetadata = {
+  kind: "primitive",
+  category: "image",
+  description: "Full-frame image with object-fit options",
+  llmGuidance: 'Use Image for pictures and backgrounds. Use fit="cover" for full-bleed, fit="contain" to avoid cropping.'
+};
+
+// src/components/primitives/Layer.tsx
+var import_react3 = __toESM(require("react"));
+var import_zod8 = require("zod");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var LayerPropsSchema = import_zod8.z.object({
+  zIndex: import_zod8.z.number().int().default(0).describe("Higher zIndex renders on top"),
+  inset: import_zod8.z.number().min(0).default(0).describe("Inset from all sides in pixels"),
+  opacity: import_zod8.z.number().min(0).max(1).default(1),
+  pointerEvents: import_zod8.z.enum(["none", "auto"]).default("none")
+});
+var Layer = ({ zIndex, inset, opacity, pointerEvents, children }) => {
+  const layers = import_react3.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: inset,
+        right: inset,
+        top: inset,
+        bottom: inset,
+        zIndex,
+        opacity,
+        pointerEvents,
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Fill, { children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) })
+    }
+  );
+};
+var LayerComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "One overlay layer with explicit zIndex inside Layers",
+  llmGuidance: "Use Layer inside Layers to control stacking. Put exactly one child in a Layer (recommended)."
+};
+
+// src/components/primitives/Layers.tsx
+var import_zod9 = require("zod");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var LayersPropsSchema = import_zod9.z.object({
+  overflow: import_zod9.z.enum(["visible", "hidden"]).default("visible").describe("Clip layers to bounds")
+});
+var Layers = ({ overflow, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Fill, { style: { overflow }, children });
+};
+var LayersComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Overlay container for stacking children (use Layer for zIndex)",
+  llmGuidance: "Use Layers to stack background/content/overlays. Prefer Layer children with explicit zIndex."
+};
+
+// src/components/primitives/Scene.tsx
+var import_react4 = __toESM(require("react"));
+var import_remotion3 = require("remotion");
+var import_zod10 = require("zod");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ScenePropsSchema = import_zod10.z.object({
   background: BackgroundSpecSchema
 });
-var resolveAsset = (value) => {
-  return isRemoteAssetPath(value) ? value : (0, import_remotion2.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset2 = (value) => {
+  return isRemoteAssetPath(value) ? value : (0, import_remotion3.staticFile)(staticFileInputFromAssetPath(value));
 };
 var Scene = ({ background, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_remotion2.AbsoluteFill, { children: [
-    background.type === "color" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_remotion2.AbsoluteFill, { style: { backgroundColor: background.value } }) : background.type === "image" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_remotion2.Img,
+  const layers = import_react4.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_remotion3.AbsoluteFill, { children: [
+    background.type === "color" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_remotion3.AbsoluteFill, { style: { backgroundColor: background.value } }) : background.type === "image" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_remotion3.Img,
       {
-        src: resolveAsset(background.value),
+        src: resolveAsset2(background.value),
         style: { width: "100%", height: "100%", objectFit: "cover" }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_remotion2.Video,
+    ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_remotion3.Video,
       {
-        src: resolveAsset(background.value),
+        src: resolveAsset2(background.value),
         style: { width: "100%", height: "100%", objectFit: "cover" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_remotion2.AbsoluteFill, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_remotion3.AbsoluteFill, { children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_remotion3.AbsoluteFill, { children: child }, i)) })
   ] });
 };
 var SceneComponentMetadata = {
-  category: "primitive",
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
   description: "Scene container with a background and nested children",
   llmGuidance: "Use Scene to define a segment of the video. Scene timings must be sequential with no gaps. Put Text and Audio as children."
 };
 
+// src/components/primitives/Segment.tsx
+var import_remotion4 = require("remotion");
+var import_zod11 = require("zod");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var TransitionPropsSchema = import_zod11.z.object({
+  type: import_zod11.z.string().min(1),
+  durationInFrames: import_zod11.z.number().int().positive(),
+  props: import_zod11.z.record(import_zod11.z.string(), import_zod11.z.unknown()).optional()
+});
+var SegmentPropsSchema = import_zod11.z.object({
+  enterTransition: TransitionPropsSchema.optional(),
+  exitTransition: TransitionPropsSchema.optional()
+});
+function getSlideOptions(raw) {
+  const parsed = import_zod11.z.object({
+    direction: import_zod11.z.enum(["left", "right", "up", "down"]).default("left"),
+    distance: import_zod11.z.number().int().min(1).max(2e3).default(80)
+  }).safeParse(raw ?? {});
+  if (parsed.success) return parsed.data;
+  return { direction: "left", distance: 80 };
+}
+function getZoomOptions(raw) {
+  const parsed = import_zod11.z.object({
+    type: import_zod11.z.enum(["zoomIn", "zoomOut"]).default("zoomIn")
+  }).safeParse(raw ?? {});
+  if (parsed.success) return parsed.data;
+  return { type: "zoomIn" };
+}
+function getWipeOptions(raw) {
+  const parsed = import_zod11.z.object({
+    direction: import_zod11.z.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
+    softEdge: import_zod11.z.boolean().default(false)
+  }).safeParse(raw ?? {});
+  if (parsed.success) return parsed.data;
+  return { direction: "right", softEdge: false };
+}
+function clipFor(direction, p) {
+  if (direction === "left") return `inset(0 ${100 * (1 - p)}% 0 0)`;
+  if (direction === "right") return `inset(0 0 0 ${100 * (1 - p)}%)`;
+  if (direction === "up") return `inset(0 0 ${100 * (1 - p)}% 0)`;
+  if (direction === "down") return `inset(${100 * (1 - p)}% 0 0 0)`;
+  return `polygon(0 0, ${100 * p}% 0, 0 ${100 * p}%)`;
+}
+function getCircularOptions(raw) {
+  const parsed = import_zod11.z.object({
+    direction: import_zod11.z.enum(["open", "close"]).default("open"),
+    center: import_zod11.z.object({
+      x: import_zod11.z.number().min(0).max(1).default(0.5),
+      y: import_zod11.z.number().min(0).max(1).default(0.5)
+    }).default({ x: 0.5, y: 0.5 })
+  }).safeParse(raw ?? {});
+  if (parsed.success) return parsed.data;
+  return { direction: "open", center: { x: 0.5, y: 0.5 } };
+}
+var Segment = ({ enterTransition, exitTransition, children, __wavesDurationInFrames }) => {
+  const frame = (0, import_remotion4.useCurrentFrame)();
+  const durationInFrames = __wavesDurationInFrames ?? 0;
+  let opacity = 1;
+  let translateX = 0;
+  let translateY = 0;
+  let scale = 1;
+  let clipPath;
+  let filter;
+  if (enterTransition) {
+    const d = enterTransition.durationInFrames;
+    if (enterTransition.type === "FadeTransition") {
+      opacity *= (0, import_remotion4.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    }
+    if (enterTransition.type === "SlideTransition") {
+      const opts = getSlideOptions(enterTransition.props);
+      const t = (0, import_remotion4.interpolate)(frame, [0, d], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const delta = opts.distance * t;
+      if (opts.direction === "left") translateX += -delta;
+      if (opts.direction === "right") translateX += delta;
+      if (opts.direction === "up") translateY += -delta;
+      if (opts.direction === "down") translateY += delta;
+      opacity *= (0, import_remotion4.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    }
+    if (enterTransition.type === "ZoomTransition") {
+      const opts = getZoomOptions(enterTransition.props);
+      const fromScale = opts.type === "zoomIn" ? 1.2 : 0.85;
+      const t = (0, import_remotion4.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      scale *= fromScale + (1 - fromScale) * t;
+      opacity *= t;
+    }
+    if (enterTransition.type === "WipeTransition") {
+      const opts = getWipeOptions(enterTransition.props);
+      const t = (0, import_remotion4.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      clipPath = clipFor(opts.direction, t);
+      filter = opts.softEdge ? "blur(0.4px)" : void 0;
+    }
+    if (enterTransition.type === "CircularReveal") {
+      const opts = getCircularOptions(enterTransition.props);
+      const open = opts.direction === "open";
+      const t = (0, import_remotion4.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const radiusPct = open ? 150 * t : 150 * (1 - t);
+      clipPath = `circle(${radiusPct}% at ${Math.round(opts.center.x * 100)}% ${Math.round(opts.center.y * 100)}%)`;
+    }
+  }
+  if (exitTransition && durationInFrames > 0) {
+    const d = exitTransition.durationInFrames;
+    const start = Math.max(0, durationInFrames - d);
+    if (exitTransition.type === "FadeTransition") {
+      opacity *= (0, import_remotion4.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    }
+    if (exitTransition.type === "SlideTransition") {
+      const opts = getSlideOptions(exitTransition.props);
+      const t = (0, import_remotion4.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const delta = opts.distance * t;
+      if (opts.direction === "left") translateX += delta;
+      if (opts.direction === "right") translateX += -delta;
+      if (opts.direction === "up") translateY += delta;
+      if (opts.direction === "down") translateY += -delta;
+      opacity *= (0, import_remotion4.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    }
+    if (exitTransition.type === "ZoomTransition") {
+      const opts = getZoomOptions(exitTransition.props);
+      const toScale = opts.type === "zoomIn" ? 1.25 : 0.75;
+      const t = (0, import_remotion4.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      scale *= 1 + (toScale - 1) * t;
+      opacity *= 1 - t;
+    }
+    if (exitTransition.type === "WipeTransition") {
+      const opts = getWipeOptions(exitTransition.props);
+      const t = (0, import_remotion4.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      clipPath = clipFor(opts.direction, t);
+      filter = opts.softEdge ? "blur(0.4px)" : void 0;
+    }
+    if (exitTransition.type === "CircularReveal") {
+      const opts = getCircularOptions(exitTransition.props);
+      const open = opts.direction === "open";
+      const t = (0, import_remotion4.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const radiusPct = open ? 150 * (1 - t) : 150 * t;
+      clipPath = `circle(${radiusPct}% at ${Math.round(opts.center.x * 100)}% ${Math.round(opts.center.y * 100)}%)`;
+    }
+  }
+  const transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_remotion4.AbsoluteFill, { style: { opacity, transform, clipPath, filter }, children });
+};
+var SegmentComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  internal: true,
+  acceptsChildren: true,
+  minChildren: 1,
+  maxChildren: 1,
+  description: "Internal segment wrapper (used by v2 segments compiler)"
+};
+
+// src/components/primitives/Shape.tsx
+var import_zod12 = require("zod");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ShapePropsSchema = import_zod12.z.object({
+  shape: import_zod12.z.enum(["rect", "circle"]).default("rect"),
+  x: import_zod12.z.number().default(0),
+  y: import_zod12.z.number().default(0),
+  width: import_zod12.z.number().positive().default(100),
+  height: import_zod12.z.number().positive().default(100),
+  fill: import_zod12.z.string().default("#FFFFFF"),
+  strokeColor: import_zod12.z.string().optional(),
+  strokeWidth: import_zod12.z.number().min(0).default(0),
+  opacity: import_zod12.z.number().min(0).max(1).default(1)
+});
+var Shape = ({
+  shape,
+  x,
+  y,
+  width,
+  height,
+  fill,
+  strokeColor,
+  strokeWidth,
+  opacity
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: x,
+        top: y,
+        width,
+        height,
+        backgroundColor: fill,
+        borderRadius: shape === "circle" ? 9999 : 0,
+        border: strokeWidth > 0 ? `${strokeWidth}px solid ${strokeColor ?? fill}` : void 0,
+        opacity
+      }
+    }
+  );
+};
+var ShapeComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  description: "Simple rect/circle shape for UI accents",
+  llmGuidance: "Use Shape for lines, badges, and simple UI blocks. Use circle for dots and rings."
+};
+
+// src/components/primitives/Stack.tsx
+var import_zod13 = require("zod");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var StackPropsSchema = import_zod13.z.object({
+  direction: import_zod13.z.enum(["row", "column"]).default("column"),
+  gap: import_zod13.z.number().min(0).default(24),
+  padding: import_zod13.z.number().min(0).default(0),
+  align: import_zod13.z.enum(["start", "center", "end", "stretch"]).default("center"),
+  justify: import_zod13.z.enum(["start", "center", "end", "between"]).default("center")
+});
+var mapAlign2 = (a) => {
+  if (a === "start") return "flex-start";
+  if (a === "end") return "flex-end";
+  if (a === "stretch") return "stretch";
+  return "center";
+};
+var mapJustify2 = (j) => {
+  if (j === "start") return "flex-start";
+  if (j === "end") return "flex-end";
+  if (j === "between") return "space-between";
+  return "center";
+};
+var Stack = ({ direction, gap, padding, align, justify, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Fill,
+    {
+      style: {
+        display: "flex",
+        flexDirection: direction,
+        gap,
+        padding,
+        alignItems: mapAlign2(align),
+        justifyContent: mapJustify2(justify),
+        boxSizing: "border-box"
+      },
+      children
+    }
+  );
+};
+var StackComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  description: "Flexbox stack layout (row/column) with gap and alignment",
+  llmGuidance: "Use Stack to arrange child components in a row or column without manual positioning."
+};
+
 // src/components/primitives/Text.tsx
-var import_remotion3 = require("remotion");
-var import_zod5 = require("zod");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var TextPropsSchema = import_zod5.z.object({
-  content: import_zod5.z.string(),
-  fontSize: import_zod5.z.number().default(48),
-  color: import_zod5.z.string().default("#FFFFFF"),
-  position: import_zod5.z.enum(["top", "center", "bottom", "left", "right"]).default("center"),
-  animation: import_zod5.z.enum(["none", "fade", "slide", "zoom"]).default("fade")
+var import_remotion5 = require("remotion");
+var import_zod14 = require("zod");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var TextPropsSchema = import_zod14.z.object({
+  content: import_zod14.z.string(),
+  fontSize: import_zod14.z.number().default(48),
+  color: import_zod14.z.string().default("#FFFFFF"),
+  fontFamily: import_zod14.z.string().default("Inter"),
+  position: import_zod14.z.enum(["top", "center", "bottom", "left", "right"]).default("center"),
+  animation: import_zod14.z.enum(["none", "fade", "slide", "zoom"]).default("fade"),
+  maxWidthPct: import_zod14.z.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: import_zod14.z.number().min(0).max(0.25).default(0.06),
+  textAlign: import_zod14.z.enum(["left", "center", "right"]).default("center")
 });
-var getPositionStyles = (position) => {
+var getPositionStyles = (position, safeInsetPct) => {
+  const inset = `${(safeInsetPct * 100).toFixed(2)}%`;
   const base = {
     display: "flex",
     justifyContent: "center",
@@ -281,95 +791,2530 @@ var getPositionStyles = (position) => {
   };
   switch (position) {
     case "top":
-      return { ...base, alignItems: "flex-start", paddingTop: 60 };
+      return { ...base, alignItems: "flex-start", paddingTop: inset };
     case "bottom":
-      return { ...base, alignItems: "flex-end", paddingBottom: 60 };
+      return { ...base, alignItems: "flex-end", paddingBottom: inset };
     case "left":
-      return { ...base, justifyContent: "flex-start", paddingLeft: 60 };
+      return { ...base, justifyContent: "flex-start", paddingLeft: inset };
     case "right":
-      return { ...base, justifyContent: "flex-end", paddingRight: 60 };
+      return { ...base, justifyContent: "flex-end", paddingRight: inset };
     default:
       return base;
   }
-};
-var getAnimationStyle = (frame, animation) => {
-  const animDuration = 30;
-  switch (animation) {
-    case "fade": {
-      const opacity = (0, import_remotion3.interpolate)(frame, [0, animDuration], [0, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      });
-      return { opacity };
-    }
-    case "slide": {
-      const translateY = (0, import_remotion3.interpolate)(frame, [0, animDuration], [50, 0], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      });
-      const opacity = (0, import_remotion3.interpolate)(frame, [0, animDuration], [0, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      });
-      return { transform: `translateY(${translateY}px)`, opacity };
-    }
-    case "zoom": {
-      const scale = (0, import_remotion3.interpolate)(frame, [0, animDuration], [0.8, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      });
-      const opacity = (0, import_remotion3.interpolate)(frame, [0, animDuration], [0, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      });
-      return { transform: `scale(${scale})`, opacity };
-    }
-    default:
-      return {};
+};
+var getAnimationStyle = (frame, animation) => {
+  const animDuration = 30;
+  switch (animation) {
+    case "fade": {
+      const opacity = (0, import_remotion5.interpolate)(frame, [0, animDuration], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      return { opacity };
+    }
+    case "slide": {
+      const translateY = (0, import_remotion5.interpolate)(frame, [0, animDuration], [50, 0], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      const opacity = (0, import_remotion5.interpolate)(frame, [0, animDuration], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      return { transform: `translateY(${translateY}px)`, opacity };
+    }
+    case "zoom": {
+      const scale = (0, import_remotion5.interpolate)(frame, [0, animDuration], [0.8, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      const opacity = (0, import_remotion5.interpolate)(frame, [0, animDuration], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      return { transform: `scale(${scale})`, opacity };
+    }
+    default:
+      return {};
+  }
+};
+var Text = ({
+  content,
+  fontSize,
+  color,
+  fontFamily,
+  position,
+  animation,
+  maxWidthPct,
+  safeInsetPct,
+  textAlign
+}) => {
+  const frame = (0, import_remotion5.useCurrentFrame)();
+  const positionStyles6 = getPositionStyles(position, safeInsetPct);
+  const animationStyles = getAnimationStyle(frame, animation);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Fill, { style: positionStyles6, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      style: {
+        fontSize,
+        color,
+        fontFamily,
+        fontWeight: 600,
+        textAlign,
+        maxWidth: `${Math.round(maxWidthPct * 100)}%`,
+        overflowWrap: "anywhere",
+        wordBreak: "break-word",
+        ...animationStyles
+      },
+      children: content
+    }
+  ) });
+};
+var TextComponentMetadata = {
+  kind: "primitive",
+  category: "text",
+  description: "Displays animated text with positioning and animation options",
+  llmGuidance: 'Use for titles, subtitles, captions. Keep content under 100 characters for readability. Position "center" works best for titles.',
+  examples: [
+    {
+      content: "Welcome to Waves",
+      fontSize: 72,
+      color: "#FFFFFF",
+      position: "center",
+      animation: "fade"
+    },
+    {
+      content: "Building the future of video",
+      fontSize: 36,
+      color: "#CCCCCC",
+      position: "bottom",
+      animation: "slide"
+    }
+  ]
+};
+
+// src/components/primitives/Video.tsx
+var import_remotion6 = require("remotion");
+var import_zod15 = require("zod");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var VideoPropsSchema = import_zod15.z.object({
+  src: import_zod15.z.string().min(1),
+  fit: import_zod15.z.enum(["cover", "contain"]).default("cover"),
+  borderRadius: import_zod15.z.number().min(0).default(0),
+  opacity: import_zod15.z.number().min(0).max(1).default(1),
+  muted: import_zod15.z.boolean().default(true)
+});
+var resolveAsset3 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion6.staticFile)(staticFileInputFromAssetPath(value));
+var Video2 = ({ src, fit, borderRadius, opacity, muted }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Fill, { style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_remotion6.Video,
+    {
+      src: resolveAsset3(src),
+      muted,
+      style: { width: "100%", height: "100%", objectFit: fit, borderRadius }
+    }
+  ) });
+};
+var VideoComponentMetadata = {
+  kind: "primitive",
+  category: "media",
+  description: "Full-frame video with object-fit options",
+  llmGuidance: "Use Video for B-roll. Keep videos short and muted unless you intentionally want audio."
+};
+
+// src/components/composites/AnimatedCounter.tsx
+var import_remotion7 = require("remotion");
+var import_zod16 = require("zod");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var AnimatedCounterPropsSchema = import_zod16.z.object({
+  from: import_zod16.z.number().default(0),
+  to: import_zod16.z.number().default(100),
+  fontSize: import_zod16.z.number().min(8).max(300).default(96),
+  color: import_zod16.z.string().default("#FFFFFF"),
+  fontFamily: import_zod16.z.string().default("Inter"),
+  fontWeight: import_zod16.z.number().int().min(100).max(900).default(700),
+  icon: import_zod16.z.string().optional(),
+  suffix: import_zod16.z.string().optional(),
+  animationType: import_zod16.z.enum(["spring", "linear"]).default("spring")
+});
+var AnimatedCounter = ({
+  from,
+  to,
+  fontSize,
+  color,
+  fontFamily,
+  fontWeight,
+  icon,
+  suffix,
+  animationType,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion7.useCurrentFrame)();
+  const { fps } = (0, import_remotion7.useVideoConfig)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const progress = animationType === "spring" ? (0, import_remotion7.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } }) : (0, import_remotion7.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const value = from + (to - from) * Math.max(0, Math.min(1, progress));
+  const rounded = Math.round(value);
+  const label = `${rounded.toLocaleString()}${suffix ?? ""}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Fill, { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { textAlign: "center" }, children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize: Math.round(fontSize * 0.5), marginBottom: 18 }, children: icon }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize, color, fontFamily, fontWeight, lineHeight: 1 }, children: label })
+  ] }) });
+};
+var AnimatedCounterComponentMetadata = {
+  kind: "composite",
+  category: "data",
+  description: "Animated numeric counter (spring or linear), optionally with an icon and suffix",
+  llmGuidance: 'Use for big stats. animationType="spring" feels natural. suffix for units (%, K, M).',
+  examples: [
+    { from: 0, to: 100, suffix: "%", icon: "\u{1F4C8}" },
+    { from: 0, to: 25e3, suffix: "+", animationType: "linear" }
+  ]
+};
+
+// src/components/composites/BarChart.tsx
+var import_remotion8 = require("remotion");
+var import_zod17 = require("zod");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var BarChartPropsSchema = import_zod17.z.object({
+  data: import_zod17.z.array(import_zod17.z.object({
+    label: import_zod17.z.string().min(1),
+    value: import_zod17.z.number(),
+    color: import_zod17.z.string().optional()
+  })).min(2).max(8),
+  orientation: import_zod17.z.enum(["horizontal", "vertical"]).default("vertical"),
+  showValues: import_zod17.z.boolean().default(true),
+  showGrid: import_zod17.z.boolean().default(false),
+  maxValue: import_zod17.z.number().optional()
+});
+var BarChart = ({ data, orientation, showValues, showGrid, maxValue }) => {
+  const frame = (0, import_remotion8.useCurrentFrame)();
+  const { fps } = (0, import_remotion8.useVideoConfig)();
+  const max = maxValue ?? Math.max(...data.map((d) => d.value));
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Fill, { style: { padding: 90, boxSizing: "border-box" }, children: [
+    showGrid ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { position: "absolute", left: 90, right: 90, top: 90, bottom: 90, opacity: 0.15, backgroundImage: "linear-gradient(#fff 1px, transparent 1px)", backgroundSize: "100% 60px" } }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: orientation === "vertical" ? "row" : "column",
+          gap: 24,
+          width: "100%",
+          height: "100%",
+          alignItems: orientation === "vertical" ? "flex-end" : "stretch",
+          justifyContent: "space-between"
+        },
+        children: data.map((d, i) => {
+          const p = (0, import_remotion8.spring)({ frame: frame - i * 4, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+          const ratio = max === 0 ? 0 : d.value / max * p;
+          const color = d.color ?? "#0A84FF";
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }, children: [
+            orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { width: "100%", flex: 1, display: "flex", alignItems: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { width: "100%", height: `${Math.round(ratio * 100)}%`, backgroundColor: color, borderRadius: 12 } }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { width: "100%", display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { flex: 1, height: 18, backgroundColor: "rgba(255,255,255,0.15)", borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { width: `${Math.round(ratio * 100)}%`, height: "100%", backgroundColor: color } }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 700, fontSize: 22, opacity: 0.9 }, children: d.label }),
+            showValues ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 26 }, children: Math.round(d.value).toLocaleString() }) : null
+          ] }, d.label);
+        })
+      }
+    )
+  ] });
+};
+var BarChartComponentMetadata = {
+  kind: "composite",
+  category: "data",
+  description: "Animated bar chart (vertical or horizontal)",
+  llmGuidance: "Use 2-6 bars. Provide maxValue to lock scale across multiple charts."
+};
+
+// src/components/composites/CardStack.tsx
+var import_remotion9 = require("remotion");
+var import_zod18 = require("zod");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var CardSchema = import_zod18.z.object({
+  title: import_zod18.z.string().min(1),
+  content: import_zod18.z.string().min(1),
+  backgroundColor: import_zod18.z.string().optional()
+});
+var CardStackPropsSchema = import_zod18.z.object({
+  cards: import_zod18.z.array(CardSchema).min(2).max(5),
+  transition: import_zod18.z.enum(["flip", "slide", "fade"]).default("flip"),
+  displayDuration: import_zod18.z.number().int().min(30).max(150).default(90)
+});
+var CardStack = ({ cards, transition, displayDuration }) => {
+  const frame = (0, import_remotion9.useCurrentFrame)();
+  const { fps } = (0, import_remotion9.useVideoConfig)();
+  const index = Math.min(cards.length - 1, Math.floor(frame / displayDuration));
+  const local = frame - index * displayDuration;
+  const p = (0, import_remotion9.spring)({ frame: local, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const card = cards[index];
+  const bg = card.backgroundColor ?? "rgba(255,255,255,0.1)";
+  const opacity = transition === "fade" ? p : 1;
+  const slideX = transition === "slide" ? (0, import_remotion9.interpolate)(p, [0, 1], [80, 0]) : 0;
+  const rotateY = transition === "flip" ? (0, import_remotion9.interpolate)(p, [0, 1], [70, 0]) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      style: {
+        width: 980,
+        height: 520,
+        borderRadius: 28,
+        padding: 60,
+        boxSizing: "border-box",
+        backgroundColor: bg,
+        boxShadow: "0 30px 90px rgba(0,0,0,0.35)",
+        color: "#FFFFFF",
+        transform: `translateX(${slideX}px) rotateY(${rotateY}deg)`,
+        transformStyle: "preserve-3d",
+        opacity
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { fontSize: 56, fontWeight: 900, marginBottom: 22 }, children: card.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { fontSize: 30, fontWeight: 700, opacity: 0.9, lineHeight: 1.3 }, children: card.content })
+      ]
+    }
+  ) });
+};
+var CardStackComponentMetadata = {
+  kind: "composite",
+  category: "layout",
+  description: "Sequential stacked cards (2-5) with flip/slide/fade transitions",
+  llmGuidance: "Use for steps/features. displayDuration is frames per card."
+};
+
+// src/components/composites/CircularReveal.tsx
+var import_react5 = __toESM(require("react"));
+var import_remotion10 = require("remotion");
+var import_zod19 = require("zod");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var CenterSchema = import_zod19.z.object({
+  x: import_zod19.z.number().min(0).max(1).default(0.5),
+  y: import_zod19.z.number().min(0).max(1).default(0.5)
+});
+var CircularRevealPropsSchema = import_zod19.z.object({
+  durationInFrames: import_zod19.z.number().int().min(10).max(60).default(30),
+  direction: import_zod19.z.enum(["open", "close"]).default("open"),
+  center: CenterSchema.optional(),
+  phase: import_zod19.z.enum(["in", "out", "inOut"]).default("inOut")
+});
+var CircularReveal = ({
+  durationInFrames,
+  direction,
+  center,
+  phase,
+  children,
+  __wavesDurationInFrames
+}) => {
+  const layers = import_react5.default.Children.toArray(children);
+  const frame = (0, import_remotion10.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(durationInFrames, total);
+  const c = center ?? { x: 0.5, y: 0.5 };
+  const open = direction === "open";
+  let radiusPct = open ? 0 : 150;
+  if (phase === "in" || phase === "inOut") {
+    const t = (0, import_remotion10.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    radiusPct = open ? 150 * t : 150 * (1 - t);
+  }
+  if (phase === "out" || phase === "inOut") {
+    const start = Math.max(0, total - d);
+    const t = (0, import_remotion10.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    radiusPct = open ? 150 * (1 - t) : 150 * t;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Fill, { style: { clipPath: `circle(${radiusPct}% at ${Math.round(c.x * 100)}% ${Math.round(c.y * 100)}%)` }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
+};
+var CircularRevealComponentMetadata = {
+  kind: "composite",
+  category: "transition",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Circular iris reveal/hide transition wrapper",
+  llmGuidance: 'direction="open" reveals from center, direction="close" hides to a point. center controls origin.'
+};
+
+// src/components/composites/CountUpText.tsx
+var import_remotion11 = require("remotion");
+var import_zod20 = require("zod");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var CountUpTextPropsSchema = import_zod20.z.object({
+  from: import_zod20.z.number().default(0),
+  to: import_zod20.z.number().default(100),
+  fontSize: import_zod20.z.number().min(8).max(240).default(72),
+  color: import_zod20.z.string().default("#FFFFFF"),
+  fontFamily: import_zod20.z.string().default("Inter"),
+  fontWeight: import_zod20.z.number().int().min(100).max(900).default(700),
+  position: import_zod20.z.enum(["top", "center", "bottom"]).default("center"),
+  format: import_zod20.z.enum(["integer", "decimal", "currency", "percentage"]).default("integer"),
+  decimals: import_zod20.z.number().int().min(0).max(4).default(0),
+  prefix: import_zod20.z.string().optional(),
+  suffix: import_zod20.z.string().optional()
+});
+var positionStyles = (position) => {
+  if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
+  if (position === "bottom") return { justifyContent: "center", alignItems: "flex-end", paddingBottom: 90 };
+  return { justifyContent: "center", alignItems: "center" };
+};
+function formatValue(v, format, decimals) {
+  if (format === "integer") return Math.round(v).toLocaleString();
+  if (format === "decimal") return v.toFixed(decimals);
+  if (format === "currency") return `$${v.toFixed(decimals).toLocaleString()}`;
+  return `${(v * 100).toFixed(decimals)}%`;
+}
+var CountUpText = ({
+  from,
+  to,
+  fontSize,
+  color,
+  fontFamily,
+  fontWeight,
+  position,
+  format,
+  decimals,
+  prefix,
+  suffix,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion11.useCurrentFrame)();
+  const { fps } = (0, import_remotion11.useVideoConfig)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const p = (0, import_remotion11.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } });
+  const progress = Math.max(0, Math.min(1, p));
+  const value = from + (to - from) * progress;
+  const fade = (0, import_remotion11.interpolate)(frame, [0, Math.min(12, total)], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const label = `${prefix ?? ""}${formatValue(value, format, decimals)}${suffix ?? ""}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Fill, { style: { display: "flex", ...positionStyles(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { fontSize, color, fontFamily, fontWeight, opacity: fade, lineHeight: 1 }, children: label }) });
+};
+var CountUpTextComponentMetadata = {
+  kind: "composite",
+  category: "text",
+  description: "Counts from a start value to an end value with formatting options",
+  llmGuidance: 'Use for metrics. format="currency" adds $, format="percentage" multiplies by 100 and adds %.'
+};
+
+// src/components/composites/FadeTransition.tsx
+var import_react6 = __toESM(require("react"));
+var import_remotion12 = require("remotion");
+var import_zod21 = require("zod");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var EasingSchema = import_zod21.z.enum(["linear", "easeIn", "easeOut", "easeInOut"]);
+function ease(t, easing) {
+  const x = Math.max(0, Math.min(1, t));
+  if (easing === "linear") return x;
+  if (easing === "easeIn") return x * x;
+  if (easing === "easeOut") return 1 - (1 - x) * (1 - x);
+  return x < 0.5 ? 2 * x * x : 1 - 2 * (1 - x) * (1 - x);
+}
+var FadeTransitionPropsSchema = import_zod21.z.object({
+  durationInFrames: import_zod21.z.number().int().min(10).max(60).default(30),
+  easing: EasingSchema.default("easeInOut"),
+  phase: import_zod21.z.enum(["in", "out", "inOut"]).default("inOut")
+});
+var FadeTransition = ({
+  durationInFrames,
+  easing,
+  phase,
+  children,
+  __wavesDurationInFrames
+}) => {
+  const layers = import_react6.default.Children.toArray(children);
+  const frame = (0, import_remotion12.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(durationInFrames, total);
+  let opacity = 1;
+  if (phase === "in" || phase === "inOut") {
+    const t = (0, import_remotion12.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    opacity *= ease(t, easing);
+  }
+  if (phase === "out" || phase === "inOut") {
+    const start = Math.max(0, total - d);
+    const t = (0, import_remotion12.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    opacity *= 1 - ease(t, easing);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Fill, { style: { opacity }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
+};
+var FadeTransitionComponentMetadata = {
+  kind: "composite",
+  category: "transition",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Fade in/out wrapper (used for segment transitions and overlays)",
+  llmGuidance: "Use for gentle transitions. durationInFrames ~30 is standard."
+};
+
+// src/components/composites/GlitchText.tsx
+var import_remotion13 = require("remotion");
+var import_zod22 = require("zod");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var GlitchTextPropsSchema = import_zod22.z.object({
+  content: import_zod22.z.string().max(100),
+  fontSize: import_zod22.z.number().min(8).max(240).default(72),
+  color: import_zod22.z.string().default("#FFFFFF"),
+  fontFamily: import_zod22.z.string().default("monospace"),
+  position: import_zod22.z.enum(["top", "center", "bottom"]).default("center"),
+  intensity: import_zod22.z.number().int().min(1).max(10).default(5),
+  glitchDuration: import_zod22.z.number().int().min(5).max(30).default(10)
+});
+var positionStyles2 = (position) => {
+  if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
+  if (position === "bottom") return { justifyContent: "center", alignItems: "flex-end", paddingBottom: 90 };
+  return { justifyContent: "center", alignItems: "center" };
+};
+function pseudoRandom(n) {
+  const x = Math.sin(n * 12.9898) * 43758.5453;
+  return x - Math.floor(x);
+}
+var GlitchText = ({
+  content,
+  fontSize,
+  color,
+  fontFamily,
+  position,
+  intensity,
+  glitchDuration
+}) => {
+  const frame = (0, import_remotion13.useCurrentFrame)();
+  const active = frame < glitchDuration;
+  const seed = frame + 1;
+  const jitter = active ? (pseudoRandom(seed) - 0.5) * intensity * 6 : 0;
+  const jitterY = active ? (pseudoRandom(seed + 99) - 0.5) * intensity * 3 : 0;
+  const baseStyle = {
+    position: "absolute",
+    fontSize,
+    fontFamily,
+    fontWeight: 800,
+    letterSpacing: 1,
+    textTransform: "uppercase",
+    textAlign: "center"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Fill, { style: { display: "flex", ...positionStyles2(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { ...baseStyle, color, transform: `translate(${jitter}px, ${jitterY}px)` }, children: content }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { ...baseStyle, color: "#FF3B30", transform: `translate(${jitter + 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { ...baseStyle, color: "#0A84FF", transform: `translate(${jitter - 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content })
+  ] }) });
+};
+var GlitchTextComponentMetadata = {
+  kind: "composite",
+  category: "text",
+  description: "Cyberpunk-style glitch text with RGB split jitter",
+  llmGuidance: "Use for tech/error moments. intensity 1-3 subtle, 7-10 extreme. glitchDuration is frames at start."
+};
+
+// src/components/composites/GridLayout.tsx
+var import_zod23 = require("zod");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var GridLayoutPropsSchema = import_zod23.z.object({
+  columns: import_zod23.z.number().int().min(1).max(4).default(2),
+  rows: import_zod23.z.number().int().min(1).max(4).default(2),
+  gap: import_zod23.z.number().min(0).max(50).default(20),
+  padding: import_zod23.z.number().min(0).max(100).default(40)
+});
+var GridLayout = ({ columns, rows, gap, padding, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Fill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gridTemplateRows: `repeat(${rows}, 1fr)`,
+        gap,
+        width: "100%",
+        height: "100%"
+      },
+      children
+    }
+  ) });
+};
+var GridLayoutComponentMetadata = {
+  kind: "composite",
+  category: "layout",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Simple responsive grid layout for child components",
+  llmGuidance: "Use for dashboards and collages. 2x2 is a good default for 4 items."
+};
+
+// src/components/composites/ImageCollage.tsx
+var import_remotion14 = require("remotion");
+var import_zod24 = require("zod");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var ImageCollagePropsSchema = import_zod24.z.object({
+  images: import_zod24.z.array(import_zod24.z.object({ src: import_zod24.z.string().min(1), caption: import_zod24.z.string().optional() })).min(2).max(9),
+  layout: import_zod24.z.enum(["grid", "stack", "scatter"]).default("grid"),
+  stagger: import_zod24.z.number().int().min(2).max(10).default(5)
+});
+var resolveAsset4 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion14.staticFile)(staticFileInputFromAssetPath(value));
+var ImageCollage = ({ images, layout, stagger }) => {
+  const frame = (0, import_remotion14.useCurrentFrame)();
+  const { fps } = (0, import_remotion14.useVideoConfig)();
+  const n = images.length;
+  const cols = Math.ceil(Math.sqrt(n));
+  const rows = Math.ceil(n / cols);
+  if (layout === "grid") {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Fill, { style: { padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: `repeat(${cols}, 1fr)`,
+          gridTemplateRows: `repeat(${rows}, 1fr)`,
+          gap: 24,
+          width: "100%",
+          height: "100%"
+        },
+        children: images.map((img, i) => {
+          const p = (0, import_remotion14.spring)({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { position: "relative", overflow: "hidden", borderRadius: 18, opacity: p, transform: `scale(${0.92 + 0.08 * p})` }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_remotion14.Img, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+            img.caption ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0, padding: 12, background: "linear-gradient(transparent, rgba(0,0,0,0.7))", color: "#fff", fontWeight: 700 }, children: img.caption }) : null
+          ] }, i);
+        })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Fill, { children: images.map((img, i) => {
+    const p = (0, import_remotion14.spring)({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+    const baseRotate = layout === "stack" ? (i - (n - 1) / 2) * 4 : i * 17 % 20 - 10;
+    const baseX = layout === "scatter" ? i * 137 % 300 - 150 : 0;
+    const baseY = layout === "scatter" ? (i + 3) * 89 % 200 - 100 : 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: "50%",
+          top: "50%",
+          width: 520,
+          height: 360,
+          transform: `translate(-50%, -50%) translate(${baseX}px, ${baseY}px) rotate(${baseRotate}deg) scale(${0.85 + 0.15 * p})`,
+          opacity: p,
+          borderRadius: 18,
+          overflow: "hidden",
+          boxShadow: "0 20px 60px rgba(0,0,0,0.35)"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_remotion14.Img, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } })
+      },
+      i
+    );
+  }) });
+};
+var ImageCollageComponentMetadata = {
+  kind: "composite",
+  category: "image",
+  description: "Collage of multiple images in a grid/stack/scatter layout with staggered entrances",
+  llmGuidance: 'Use 2-6 images for best results. layout="grid" is clean; "scatter" is energetic.'
+};
+
+// src/components/composites/ImageReveal.tsx
+var import_remotion15 = require("remotion");
+var import_zod25 = require("zod");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ImageRevealPropsSchema = import_zod25.z.object({
+  src: import_zod25.z.string().min(1),
+  direction: import_zod25.z.enum(["left", "right", "top", "bottom", "center"]).default("left"),
+  revealType: import_zod25.z.enum(["wipe", "expand", "iris"]).default("wipe")
+});
+var resolveAsset5 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion15.staticFile)(staticFileInputFromAssetPath(value));
+var ImageReveal = ({ src, direction, revealType, __wavesDurationInFrames }) => {
+  const frame = (0, import_remotion15.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(30, total);
+  const p = (0, import_remotion15.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  let clipPath;
+  let transform = "none";
+  let transformOrigin = "center center";
+  if (revealType === "wipe") {
+    if (direction === "left") clipPath = `inset(0 ${100 * (1 - p)}% 0 0)`;
+    if (direction === "right") clipPath = `inset(0 0 0 ${100 * (1 - p)}%)`;
+    if (direction === "top") clipPath = `inset(0 0 ${100 * (1 - p)}% 0)`;
+    if (direction === "bottom") clipPath = `inset(${100 * (1 - p)}% 0 0 0)`;
+    if (direction === "center") clipPath = `inset(${50 * (1 - p)}% ${50 * (1 - p)}% ${50 * (1 - p)}% ${50 * (1 - p)}%)`;
+  }
+  if (revealType === "expand") {
+    const s = 0.85 + 0.15 * p;
+    transform = `scale(${s})`;
+    if (direction === "left") transformOrigin = "left center";
+    if (direction === "right") transformOrigin = "right center";
+    if (direction === "top") transformOrigin = "center top";
+    if (direction === "bottom") transformOrigin = "center bottom";
+  }
+  if (revealType === "iris") {
+    clipPath = `circle(${Math.round(150 * p)}% at 50% 50%)`;
+  }
+  const opacity = revealType === "expand" ? p : 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_remotion15.Img,
+    {
+      src: resolveAsset5(src),
+      style: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        clipPath,
+        transform,
+        transformOrigin,
+        opacity
+      }
+    }
+  ) });
+};
+var ImageRevealComponentMetadata = {
+  kind: "composite",
+  category: "image",
+  description: "Reveals an image with wipe/expand/iris entrance effects",
+  llmGuidance: "Use wipe for directional reveals, expand for subtle pop-in, iris for circular mask openings."
+};
+
+// src/components/composites/ImageSequence.tsx
+var import_remotion16 = require("remotion");
+var import_zod26 = require("zod");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ImageSequencePropsSchema = import_zod26.z.object({
+  basePath: import_zod26.z.string().min(1),
+  frameCount: import_zod26.z.number().int().positive(),
+  filePattern: import_zod26.z.string().default("frame_{frame}.png"),
+  fps: import_zod26.z.number().int().min(1).max(120).default(30)
+});
+function joinPath(base, file) {
+  if (base.endsWith("/")) return `${base}${file}`;
+  return `${base}/${file}`;
+}
+var resolveAsset6 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion16.staticFile)(staticFileInputFromAssetPath(value));
+var ImageSequence = ({ basePath, frameCount, filePattern, fps }) => {
+  const frame = (0, import_remotion16.useCurrentFrame)();
+  const { fps: compFps } = (0, import_remotion16.useVideoConfig)();
+  const index = Math.min(frameCount - 1, Math.max(0, Math.floor(frame * fps / compFps)));
+  const file = filePattern.replace("{frame}", String(index));
+  const src = joinPath(basePath, file);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_remotion16.Img, { src: resolveAsset6(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) });
+};
+var ImageSequenceComponentMetadata = {
+  kind: "composite",
+  category: "image",
+  description: "Plays a numbered image sequence (frame-by-frame)",
+  llmGuidance: "Use for exported sprite sequences. basePath can be /assets/seq and filePattern like img_{frame}.png."
+};
+
+// src/components/composites/ImageWithCaption.tsx
+var import_remotion17 = require("remotion");
+var import_zod27 = require("zod");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var CaptionStyleSchema = import_zod27.z.object({
+  fontSize: import_zod27.z.number().min(12).max(80).default(32),
+  color: import_zod27.z.string().default("#FFFFFF"),
+  backgroundColor: import_zod27.z.string().default("rgba(0,0,0,0.7)")
+});
+var ImageWithCaptionPropsSchema = import_zod27.z.object({
+  src: import_zod27.z.string().min(1),
+  caption: import_zod27.z.string().max(200),
+  captionPosition: import_zod27.z.enum(["top", "bottom", "overlay"]).default("bottom"),
+  captionStyle: CaptionStyleSchema.optional()
+});
+var resolveAsset7 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion17.staticFile)(staticFileInputFromAssetPath(value));
+var ImageWithCaption = ({ src, caption, captionPosition, captionStyle }) => {
+  const frame = (0, import_remotion17.useCurrentFrame)();
+  const p = (0, import_remotion17.interpolate)(frame, [8, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const style = captionStyle ?? { fontSize: 32, color: "#FFFFFF", backgroundColor: "rgba(0,0,0,0.7)" };
+  const captionBox = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "div",
+    {
+      style: {
+        width: "100%",
+        padding: 22,
+        boxSizing: "border-box",
+        backgroundColor: style.backgroundColor,
+        color: style.color,
+        fontWeight: 800,
+        fontSize: style.fontSize,
+        opacity: p
+      },
+      children: caption
+    }
+  );
+  if (captionPosition === "top" || captionPosition === "bottom") {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Fill, { style: { display: "flex", flexDirection: "column" }, children: [
+      captionPosition === "top" ? captionBox : null,
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_remotion17.Img, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) }),
+      captionPosition === "bottom" ? captionBox : null
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Fill, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_remotion17.Img, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0 }, children: captionBox })
+  ] });
+};
+var ImageWithCaptionComponentMetadata = {
+  kind: "composite",
+  category: "image",
+  description: "Image with a caption strip (top/bottom) or overlay caption",
+  llmGuidance: "Use overlay for quotes/testimonials over photos. Use bottom for standard captions."
+};
+
+// src/components/composites/InstagramStory.tsx
+var import_remotion18 = require("remotion");
+var import_zod28 = require("zod");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var InstagramStoryPropsSchema = import_zod28.z.object({
+  backgroundImage: import_zod28.z.string().optional(),
+  backgroundColor: import_zod28.z.string().default("#000000"),
+  profilePic: import_zod28.z.string().optional(),
+  username: import_zod28.z.string().optional(),
+  text: import_zod28.z.string().max(100).optional(),
+  sticker: import_zod28.z.enum(["none", "poll", "question", "countdown"]).default("none"),
+  musicTrack: import_zod28.z.string().optional()
+});
+var resolveAsset8 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion18.staticFile)(staticFileInputFromAssetPath(value));
+var InstagramStory = ({
+  backgroundImage,
+  backgroundColor,
+  profilePic,
+  username,
+  text,
+  sticker,
+  musicTrack
+}) => {
+  const frame = (0, import_remotion18.useCurrentFrame)();
+  const fade = (0, import_remotion18.interpolate)(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Fill, { style: { backgroundColor }, children: [
+    musicTrack ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_remotion18.Audio, { src: resolveAsset8(musicTrack), volume: 0.6 }) : null,
+    backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_remotion18.Img, { src: resolveAsset8(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover", opacity: fade } }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Fill, { style: { padding: 60, boxSizing: "border-box" }, children: [
+      profilePic || username ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 18 }, children: [
+        profilePic ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_remotion18.Img, { src: resolveAsset8(profilePic), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "rgba(255,255,255,0.2)" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 34 }, children: username ?? "username" })
+      ] }) : null,
+      text ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        "div",
+        {
+          style: {
+            marginTop: 120,
+            color: "#FFFFFF",
+            fontSize: 54,
+            fontWeight: 900,
+            textShadow: "0 8px 30px rgba(0,0,0,0.6)",
+            maxWidth: 900
+          },
+          children: text
+        }
+      ) : null,
+      sticker !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 60,
+            bottom: 180,
+            width: 520,
+            padding: 28,
+            borderRadius: 22,
+            backgroundColor: "rgba(255,255,255,0.9)",
+            color: "#111",
+            fontWeight: 900,
+            fontSize: 30
+          },
+          children: sticker === "poll" ? "POLL" : sticker === "question" ? "QUESTION" : "COUNTDOWN"
+        }
+      ) : null
+    ] })
+  ] });
+};
+var InstagramStoryComponentMetadata = {
+  kind: "composite",
+  category: "social",
+  description: "Instagram story-style layout with profile header, text overlay, and optional sticker",
+  llmGuidance: "Best with 1080x1920 (9:16). Use backgroundImage + short text + optional sticker for mobile-style content."
+};
+
+// src/components/composites/IntroScene.tsx
+var import_remotion19 = require("remotion");
+var import_zod29 = require("zod");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var IntroScenePropsSchema = import_zod29.z.object({
+  logoSrc: import_zod29.z.string().min(1),
+  companyName: import_zod29.z.string().min(1),
+  tagline: import_zod29.z.string().optional(),
+  backgroundColor: import_zod29.z.string().default("#000000"),
+  primaryColor: import_zod29.z.string().default("#FFFFFF"),
+  musicTrack: import_zod29.z.string().optional()
+});
+var resolveAsset9 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion19.staticFile)(staticFileInputFromAssetPath(value));
+var IntroScene = ({
+  logoSrc,
+  companyName,
+  tagline,
+  backgroundColor,
+  primaryColor,
+  musicTrack,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion19.useCurrentFrame)();
+  const { fps } = (0, import_remotion19.useVideoConfig)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const logoP = (0, import_remotion19.spring)({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const nameOpacity = (0, import_remotion19.interpolate)(frame, [20, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const taglineY = (0, import_remotion19.interpolate)(frame, [50, 80], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const outroFade = (0, import_remotion19.interpolate)(frame, [Math.max(0, total - 20), total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+    musicTrack ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_remotion19.Audio, { src: resolveAsset9(musicTrack), volume: 0.7 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { textAlign: "center", opacity: outroFade }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        import_remotion19.Img,
+        {
+          src: resolveAsset9(logoSrc),
+          style: { width: 280, height: 280, objectFit: "contain", transform: `scale(${logoP})` }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: { marginTop: 24, color: primaryColor, fontSize: 64, fontWeight: 900, opacity: nameOpacity }, children: companyName }),
+      tagline ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          style: {
+            marginTop: 12,
+            color: primaryColor,
+            fontSize: 32,
+            fontWeight: 700,
+            opacity: nameOpacity,
+            transform: `translateY(${taglineY}px)`
+          },
+          children: tagline
+        }
+      ) : null
+    ] })
+  ] });
+};
+var IntroSceneComponentMetadata = {
+  kind: "composite",
+  category: "branding",
+  description: "Branded intro scene (logo + company name + optional tagline)",
+  llmGuidance: "Use as the first segment. Works best at 3-5 seconds. musicTrack can add ambience."
+};
+
+// src/components/composites/KenBurnsImage.tsx
+var import_remotion20 = require("remotion");
+var import_zod30 = require("zod");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var KenBurnsImagePropsSchema = import_zod30.z.object({
+  src: import_zod30.z.string().min(1),
+  startScale: import_zod30.z.number().min(1).max(2).default(1),
+  endScale: import_zod30.z.number().min(1).max(2).default(1.2),
+  panDirection: import_zod30.z.enum(["none", "left", "right", "up", "down"]).default("none"),
+  panAmount: import_zod30.z.number().min(0).max(100).default(50)
+});
+var resolveAsset10 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion20.staticFile)(staticFileInputFromAssetPath(value));
+var KenBurnsImage = ({
+  src,
+  startScale,
+  endScale,
+  panDirection,
+  panAmount,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion20.useCurrentFrame)();
+  const duration = Math.max(1, __wavesDurationInFrames ?? 1);
+  const t = (0, import_remotion20.interpolate)(frame, [0, duration], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const scale = startScale + (endScale - startScale) * t;
+  const dx = panDirection === "left" ? -panAmount * t : panDirection === "right" ? panAmount * t : 0;
+  const dy = panDirection === "up" ? -panAmount * t : panDirection === "down" ? panAmount * t : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_remotion20.Img,
+    {
+      src: resolveAsset10(src),
+      style: {
+        width: "110%",
+        height: "110%",
+        objectFit: "cover",
+        transform: `translate(${dx}px, ${dy}px) scale(${scale})`,
+        transformOrigin: "center center"
+      }
+    }
+  ) });
+};
+var KenBurnsImageComponentMetadata = {
+  kind: "composite",
+  category: "image",
+  description: "Slow zoom and pan (Ken Burns effect) for a still image",
+  llmGuidance: "Classic documentary-style motion. startScale 1 -> endScale 1.2 is subtle; add panDirection for extra movement."
+};
+
+// src/components/composites/KineticTypography.tsx
+var import_remotion21 = require("remotion");
+var import_zod31 = require("zod");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var WordSchema = import_zod31.z.object({
+  text: import_zod31.z.string().min(1),
+  emphasis: import_zod31.z.enum(["normal", "bold", "giant"]).default("normal")
+});
+var KineticTypographyPropsSchema = import_zod31.z.object({
+  words: import_zod31.z.array(WordSchema).min(1).max(50),
+  fontSize: import_zod31.z.number().min(12).max(140).default(48),
+  color: import_zod31.z.string().default("#FFFFFF"),
+  fontFamily: import_zod31.z.string().default("Inter"),
+  timing: import_zod31.z.array(import_zod31.z.number().int().min(0)).min(1).describe("Frame timing for each word"),
+  transition: import_zod31.z.enum(["fade", "scale", "slideLeft", "slideRight"]).default("scale")
+});
+var KineticTypography = ({
+  words,
+  fontSize,
+  color,
+  fontFamily,
+  timing,
+  transition
+}) => {
+  const frame = (0, import_remotion21.useCurrentFrame)();
+  const { fps } = (0, import_remotion21.useVideoConfig)();
+  const starts = (() => {
+    if (timing.length >= words.length) return timing.slice(0, words.length);
+    const last = timing.length ? timing[timing.length - 1] : 0;
+    const extra = Array.from({ length: words.length - timing.length }, () => last + 15);
+    return [...timing, ...extra];
+  })();
+  let activeIndex = 0;
+  for (let i = 0; i < words.length; i++) {
+    if (frame >= (starts[i] ?? 0)) activeIndex = i;
+  }
+  const word = words[activeIndex];
+  const start = starts[activeIndex] ?? 0;
+  const p = (0, import_remotion21.spring)({ frame: frame - start, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const progress = Math.max(0, Math.min(1, p));
+  const scaleBase = word.emphasis === "giant" ? 2 : word.emphasis === "bold" ? 1.3 : 1;
+  const opacity = transition === "fade" ? progress : 1;
+  const scale = transition === "scale" ? (0.85 + 0.15 * progress) * scaleBase : 1 * scaleBase;
+  const tx = transition === "slideLeft" ? 40 * (1 - progress) : transition === "slideRight" ? -40 * (1 - progress) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "div",
+    {
+      style: {
+        fontSize,
+        color,
+        fontFamily,
+        fontWeight: word.emphasis === "normal" ? 800 : 900,
+        textTransform: "uppercase",
+        letterSpacing: 1,
+        opacity,
+        transform: `translateX(${tx}px) scale(${scale})`
+      },
+      children: word.text
+    }
+  ) });
+};
+var KineticTypographyComponentMetadata = {
+  kind: "composite",
+  category: "text",
+  description: "Rhythmic single-word kinetic typography driven by a timing array",
+  llmGuidance: 'Provide timing frames for when each word appears. Use emphasis="giant" sparingly for impact.'
+};
+
+// src/components/composites/LineGraph.tsx
+var import_remotion22 = require("remotion");
+var import_zod32 = require("zod");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var PointSchema = import_zod32.z.object({ x: import_zod32.z.number(), y: import_zod32.z.number() });
+var LineGraphPropsSchema = import_zod32.z.object({
+  data: import_zod32.z.array(PointSchema).min(2).max(50),
+  color: import_zod32.z.string().default("#00FF00"),
+  strokeWidth: import_zod32.z.number().min(1).max(10).default(3),
+  showDots: import_zod32.z.boolean().default(true),
+  fillArea: import_zod32.z.boolean().default(false),
+  animate: import_zod32.z.enum(["draw", "reveal"]).default("draw")
+});
+function normalize(data, w, h, pad) {
+  const xs = data.map((d) => d.x);
+  const ys = data.map((d) => d.y);
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+  return data.map((d) => ({
+    x: pad + (maxX === minX ? (w - 2 * pad) / 2 : (d.x - minX) / (maxX - minX) * (w - 2 * pad)),
+    y: pad + (maxY === minY ? (h - 2 * pad) / 2 : (1 - (d.y - minY) / (maxY - minY)) * (h - 2 * pad))
+  }));
+}
+function toPath(points) {
+  return points.reduce((acc, p, i) => i === 0 ? `M ${p.x} ${p.y}` : `${acc} L ${p.x} ${p.y}`, "");
+}
+var LineGraph = ({
+  data,
+  color,
+  strokeWidth,
+  showDots,
+  fillArea,
+  animate,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion22.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const progress = (0, import_remotion22.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const w = 1e3;
+  const h = 520;
+  const pad = 30;
+  const pts = normalize(data, w, h, pad);
+  const d = toPath(pts);
+  const dash = 3e3;
+  const dashOffset = dash * (1 - progress);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("svg", { viewBox: `0 0 ${w} ${h}`, style: { width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("clipPath", { id: "waves-line-reveal", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("rect", { x: "0", y: "0", width: w * progress, height: h }) }) }),
+    fillArea ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "path",
+      {
+        d: `${d} L ${pts[pts.length - 1].x} ${h - pad} L ${pts[0].x} ${h - pad} Z`,
+        fill: color,
+        opacity: 0.12,
+        clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "path",
+      {
+        d,
+        fill: "none",
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeDasharray: animate === "draw" ? dash : void 0,
+        strokeDashoffset: animate === "draw" ? dashOffset : void 0,
+        clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0
+      }
+    ),
+    showDots ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("g", { clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0, children: pts.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: p.x, cy: p.y, r: 6, fill: color }, i)) }) : null
+  ] }) });
+};
+var LineGraphComponentMetadata = {
+  kind: "composite",
+  category: "data",
+  description: "Animated line graph (SVG) with draw/reveal modes",
+  llmGuidance: 'Use 5-20 points. animate="draw" traces the line; animate="reveal" wipes it left-to-right.'
+};
+
+// src/components/composites/LogoReveal.tsx
+var import_remotion23 = require("remotion");
+var import_zod33 = require("zod");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var LogoRevealPropsSchema = import_zod33.z.object({
+  logoSrc: import_zod33.z.string().min(1),
+  effect: import_zod33.z.enum(["fade", "scale", "rotate", "slide"]).default("scale"),
+  backgroundColor: import_zod33.z.string().default("#000000"),
+  soundEffect: import_zod33.z.string().optional()
+});
+var resolveAsset11 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion23.staticFile)(staticFileInputFromAssetPath(value));
+var LogoReveal = ({ logoSrc, effect, backgroundColor, soundEffect }) => {
+  const frame = (0, import_remotion23.useCurrentFrame)();
+  const { fps } = (0, import_remotion23.useVideoConfig)();
+  const p = (0, import_remotion23.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } });
+  const opacity = effect === "fade" ? p : Math.min(1, Math.max(0, p));
+  const scale = effect === "scale" ? p : 1;
+  const rotate = effect === "rotate" ? (1 - p) * 360 : 0;
+  const translateY = effect === "slide" ? -200 * (1 - p) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+    soundEffect ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_remotion23.Audio, { src: resolveAsset11(soundEffect), volume: 1 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      import_remotion23.Img,
+      {
+        src: resolveAsset11(logoSrc),
+        style: {
+          width: 320,
+          height: 320,
+          objectFit: "contain",
+          opacity,
+          transform: `translateY(${translateY}px) scale(${scale}) rotate(${rotate}deg)`
+        }
+      }
+    )
+  ] });
+};
+var LogoRevealComponentMetadata = {
+  kind: "composite",
+  category: "branding",
+  description: "Logo intro animation (fade/scale/rotate/slide), optionally with a sound effect",
+  llmGuidance: "Use for intros/outros. Keep the logo high-contrast and centered. soundEffect can be a short sting."
+};
+
+// src/components/composites/OutroScene.tsx
+var import_remotion24 = require("remotion");
+var import_zod34 = require("zod");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var CtaSchema = import_zod34.z.object({ text: import_zod34.z.string().min(1), icon: import_zod34.z.string().optional() });
+var HandleSchema = import_zod34.z.object({
+  platform: import_zod34.z.enum(["twitter", "instagram", "youtube", "linkedin"]),
+  handle: import_zod34.z.string().min(1)
+});
+var OutroScenePropsSchema = import_zod34.z.object({
+  logoSrc: import_zod34.z.string().min(1),
+  message: import_zod34.z.string().default("Thank You"),
+  ctaButtons: import_zod34.z.array(CtaSchema).max(3).optional(),
+  socialHandles: import_zod34.z.array(HandleSchema).max(4).optional(),
+  backgroundColor: import_zod34.z.string().default("#000000")
+});
+var resolveAsset12 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion24.staticFile)(staticFileInputFromAssetPath(value));
+var OutroScene = ({ logoSrc, message, ctaButtons, socialHandles, backgroundColor }) => {
+  const frame = (0, import_remotion24.useCurrentFrame)();
+  const { fps } = (0, import_remotion24.useVideoConfig)();
+  const logoP = (0, import_remotion24.spring)({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const msgP = (0, import_remotion24.spring)({ frame: frame - 18, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const ctaP = (0, import_remotion24.spring)({ frame: frame - 40, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center", padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: { textAlign: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_remotion24.Img, { src: resolveAsset12(logoSrc), style: { width: 220, height: 220, objectFit: "contain", transform: `scale(${logoP})` } }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { marginTop: 24, color: "#FFFFFF", fontSize: 72, fontWeight: 1e3, opacity: msgP }, children: message }),
+    ctaButtons?.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { marginTop: 34, display: "flex", gap: 18, justifyContent: "center", opacity: ctaP }, children: ctaButtons.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      "div",
+      {
+        style: {
+          padding: "18px 28px",
+          borderRadius: 18,
+          backgroundColor: "rgba(255,255,255,0.12)",
+          color: "#FFFFFF",
+          fontSize: 28,
+          fontWeight: 900
+        },
+        children: [
+          b.icon ? `${b.icon} ` : "",
+          b.text
+        ]
+      },
+      i
+    )) }) : null,
+    socialHandles?.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { marginTop: 50, display: "flex", flexDirection: "column", gap: 10, opacity: ctaP }, children: socialHandles.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: { color: "rgba(255,255,255,0.85)", fontSize: 26, fontWeight: 800 }, children: [
+      h.platform,
+      ": ",
+      h.handle
+    ] }, i)) }) : null
+  ] }) });
+};
+var OutroSceneComponentMetadata = {
+  kind: "composite",
+  category: "branding",
+  description: "End screen with logo, message, optional CTA buttons and social handles",
+  llmGuidance: "Use as the last segment. Keep CTAs <=3 for clarity."
+};
+
+// src/components/composites/OutlineText.tsx
+var import_remotion25 = require("remotion");
+var import_zod35 = require("zod");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var OutlineTextPropsSchema = import_zod35.z.object({
+  content: import_zod35.z.string().max(50),
+  fontSize: import_zod35.z.number().min(8).max(240).default(96),
+  outlineColor: import_zod35.z.string().default("#FFFFFF"),
+  fillColor: import_zod35.z.string().default("#000000"),
+  fontFamily: import_zod35.z.string().default("Inter"),
+  fontWeight: import_zod35.z.number().int().min(100).max(900).default(800),
+  position: import_zod35.z.enum(["top", "center", "bottom"]).default("center"),
+  animation: import_zod35.z.enum(["draw", "fill"]).default("draw"),
+  strokeWidth: import_zod35.z.number().min(1).max(10).default(3)
+});
+var positionStyles3 = (position) => {
+  if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
+  if (position === "bottom") return { justifyContent: "center", alignItems: "flex-end", paddingBottom: 90 };
+  return { justifyContent: "center", alignItems: "center" };
+};
+var OutlineText = ({
+  content,
+  fontSize,
+  outlineColor,
+  fillColor,
+  fontFamily,
+  fontWeight,
+  position,
+  animation,
+  strokeWidth
+}) => {
+  const frame = (0, import_remotion25.useCurrentFrame)();
+  const t = (0, import_remotion25.interpolate)(frame, [0, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const strokeOpacity = animation === "draw" ? t : 1;
+  const fillOpacity = animation === "fill" ? t : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Fill, { style: { display: "flex", ...positionStyles3(position) }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "div",
+      {
+        style: {
+          fontSize,
+          fontFamily,
+          fontWeight,
+          color: fillColor,
+          opacity: fillOpacity,
+          WebkitTextStroke: `${strokeWidth}px ${outlineColor}`,
+          textShadow: `0 0 1px ${outlineColor}`,
+          textAlign: "center",
+          lineHeight: 1
+        },
+        children: content
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          fontSize,
+          fontFamily,
+          fontWeight,
+          color: "transparent",
+          opacity: strokeOpacity,
+          WebkitTextStroke: `${strokeWidth}px ${outlineColor}`,
+          textAlign: "center",
+          lineHeight: 1
+        },
+        children: content
+      }
+    )
+  ] });
+};
+var OutlineTextComponentMetadata = {
+  kind: "composite",
+  category: "text",
+  description: "Outlined title text with simple draw/fill animation",
+  llmGuidance: 'Use for bold titles. animation="draw" emphasizes the outline; animation="fill" reveals the fill color.'
+};
+
+// src/components/composites/ProgressBar.tsx
+var import_remotion26 = require("remotion");
+var import_zod36 = require("zod");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var ProgressBarPropsSchema = import_zod36.z.object({
+  label: import_zod36.z.string().optional(),
+  color: import_zod36.z.string().default("#00FF00"),
+  backgroundColor: import_zod36.z.string().default("rgba(255,255,255,0.2)"),
+  height: import_zod36.z.number().min(5).max(50).default(10),
+  position: import_zod36.z.enum(["top", "bottom"]).default("bottom"),
+  showPercentage: import_zod36.z.boolean().default(true)
+});
+var ProgressBar = ({
+  label,
+  color,
+  backgroundColor,
+  height,
+  position,
+  showPercentage,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion26.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const p = (0, import_remotion26.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const pct = Math.round(p * 100);
+  const yStyle = position === "top" ? { top: 50 } : { bottom: 50 };
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { style: { position: "absolute", left: 80, right: 80, ...yStyle }, children: [
+    label || showPercentage ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 10, color: "#FFFFFF", fontWeight: 700 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: label ?? "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: showPercentage ? `${pct}%` : "" })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { style: { width: "100%", height, backgroundColor, borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { style: { width: `${pct}%`, height: "100%", backgroundColor: color } }) })
+  ] }) });
+};
+var ProgressBarComponentMetadata = {
+  kind: "composite",
+  category: "data",
+  description: "Animated progress bar that fills over the component duration",
+  llmGuidance: "Use for loading/countdowns. showPercentage=true is helpful for clarity."
+};
+
+// src/components/composites/ProgressRing.tsx
+var import_remotion27 = require("remotion");
+var import_zod37 = require("zod");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var ProgressRingPropsSchema = import_zod37.z.object({
+  percentage: import_zod37.z.number().min(0).max(100),
+  size: import_zod37.z.number().min(100).max(500).default(200),
+  strokeWidth: import_zod37.z.number().min(5).max(50).default(20),
+  color: import_zod37.z.string().default("#00FF00"),
+  backgroundColor: import_zod37.z.string().default("rgba(255,255,255,0.2)"),
+  showLabel: import_zod37.z.boolean().default(true)
+});
+var ProgressRing = ({
+  percentage,
+  size,
+  strokeWidth,
+  color,
+  backgroundColor,
+  showLabel,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion27.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const p = (0, import_remotion27.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const current = percentage * p;
+  const r = (size - strokeWidth) / 2;
+  const c = 2 * Math.PI * r;
+  const dash = c;
+  const offset = c - current / 100 * c;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "circle",
+        {
+          cx: size / 2,
+          cy: size / 2,
+          r,
+          stroke: backgroundColor,
+          strokeWidth,
+          fill: "transparent"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "circle",
+        {
+          cx: size / 2,
+          cy: size / 2,
+          r,
+          stroke: color,
+          strokeWidth,
+          fill: "transparent",
+          strokeDasharray: dash,
+          strokeDashoffset: offset,
+          strokeLinecap: "round",
+          transform: `rotate(-90 ${size / 2} ${size / 2})`
+        }
+      )
+    ] }),
+    showLabel ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { position: "absolute", color: "#FFFFFF", fontWeight: 800, fontSize: Math.round(size * 0.22) }, children: [
+      Math.round(current),
+      "%"
+    ] }) : null
+  ] });
+};
+var ProgressRingComponentMetadata = {
+  kind: "composite",
+  category: "data",
+  description: "Circular progress indicator (SVG) that animates from 0 to percentage over duration",
+  llmGuidance: "Use for completion and goals. size 160-260 is typical. showLabel displays the percentage."
+};
+
+// src/components/composites/SlideTransition.tsx
+var import_react7 = __toESM(require("react"));
+var import_remotion28 = require("remotion");
+var import_zod38 = require("zod");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var SlideTransitionPropsSchema = import_zod38.z.object({
+  durationInFrames: import_zod38.z.number().int().min(10).max(60).default(30),
+  direction: import_zod38.z.enum(["left", "right", "up", "down"]).default("left"),
+  distance: import_zod38.z.number().int().min(1).max(2e3).default(160),
+  phase: import_zod38.z.enum(["in", "out", "inOut"]).default("inOut")
+});
+function translateFor(direction, delta) {
+  if (direction === "left") return { x: -delta, y: 0 };
+  if (direction === "right") return { x: delta, y: 0 };
+  if (direction === "up") return { x: 0, y: -delta };
+  return { x: 0, y: delta };
+}
+var SlideTransition = ({
+  durationInFrames,
+  direction,
+  distance,
+  phase,
+  children,
+  __wavesDurationInFrames
+}) => {
+  const layers = import_react7.default.Children.toArray(children);
+  const frame = (0, import_remotion28.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(durationInFrames, total);
+  let opacity = 1;
+  let tx = 0;
+  let ty = 0;
+  if (phase === "in" || phase === "inOut") {
+    const t = (0, import_remotion28.interpolate)(frame, [0, d], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const { x, y } = translateFor(direction, distance * t);
+    tx += x;
+    ty += y;
+    opacity *= (0, import_remotion28.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  }
+  if (phase === "out" || phase === "inOut") {
+    const start = Math.max(0, total - d);
+    const t = (0, import_remotion28.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const opposite = direction === "left" ? "right" : direction === "right" ? "left" : direction === "up" ? "down" : "up";
+    const { x, y } = translateFor(opposite, distance * t);
+    tx += x;
+    ty += y;
+    opacity *= (0, import_remotion28.interpolate)(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Fill, { style: { opacity, transform: `translate(${tx}px, ${ty}px)` }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
+};
+var SlideTransitionComponentMetadata = {
+  kind: "composite",
+  category: "transition",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Slide in/out wrapper (used for segment transitions and overlays)",
+  llmGuidance: "Use for more dynamic transitions. direction controls where content enters from."
+};
+
+// src/components/composites/SplitScreen.tsx
+var import_react8 = __toESM(require("react"));
+var import_zod39 = require("zod");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var SplitScreenPropsSchema = import_zod39.z.object({
+  orientation: import_zod39.z.enum(["vertical", "horizontal"]).default("vertical"),
+  split: import_zod39.z.number().min(0.1).max(0.9).default(0.5),
+  gap: import_zod39.z.number().min(0).default(48),
+  padding: import_zod39.z.number().min(0).default(80),
+  dividerColor: import_zod39.z.string().optional()
+});
+var SplitScreen = ({
+  orientation,
+  split,
+  gap,
+  padding,
+  dividerColor,
+  children
+}) => {
+  const items = import_react8.default.Children.toArray(children);
+  const first = items[0] ?? null;
+  const second = items[1] ?? null;
+  const isVertical = orientation === "vertical";
+  const flexDirection = isVertical ? "row" : "column";
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Fill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { style: { display: "flex", flexDirection, gap, width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { flex: split, position: "relative" }, children: first }),
+    dividerColor ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      "div",
+      {
+        style: {
+          backgroundColor: dividerColor,
+          width: isVertical ? 2 : "100%",
+          height: isVertical ? "100%" : 2,
+          opacity: 0.7
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { flex: 1 - split, position: "relative" }, children: second })
+  ] }) });
+};
+var SplitScreenComponentMetadata = {
+  kind: "composite",
+  category: "layout",
+  acceptsChildren: true,
+  minChildren: 2,
+  maxChildren: 2,
+  description: "Two-panel split screen layout",
+  llmGuidance: 'Provide exactly 2 children. Use orientation="vertical" for left/right and "horizontal" for top/bottom.'
+};
+
+// src/components/composites/SplitText.tsx
+var import_remotion29 = require("remotion");
+var import_zod40 = require("zod");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var SplitTextPropsSchema = import_zod40.z.object({
+  content: import_zod40.z.string().max(200),
+  fontSize: import_zod40.z.number().min(8).max(200).default(48),
+  color: import_zod40.z.string().default("#FFFFFF"),
+  fontFamily: import_zod40.z.string().default("Inter"),
+  position: import_zod40.z.enum(["top", "center", "bottom"]).default("center"),
+  splitBy: import_zod40.z.enum(["word", "letter"]).default("word"),
+  stagger: import_zod40.z.number().int().min(1).max(10).default(3),
+  animation: import_zod40.z.enum(["fade", "slideUp", "slideDown", "scale", "rotate"]).default("slideUp"),
+  maxWidthPct: import_zod40.z.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: import_zod40.z.number().min(0).max(0.25).default(0.06)
+});
+var positionStyles4 = (position, safeInsetPct) => {
+  const inset = `${(safeInsetPct * 100).toFixed(2)}%`;
+  if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: inset };
+  if (position === "bottom") return { justifyContent: "center", alignItems: "flex-end", paddingBottom: inset };
+  return { justifyContent: "center", alignItems: "center" };
+};
+function getItemStyle(progress, animation) {
+  const clamped = Math.max(0, Math.min(1, progress));
+  switch (animation) {
+    case "fade":
+      return { opacity: clamped };
+    case "slideDown":
+      return { opacity: clamped, transform: `translateY(${-20 * (1 - clamped)}px)` };
+    case "scale":
+      return { opacity: clamped, transform: `scale(${0.9 + 0.1 * clamped})` };
+    case "rotate":
+      return { opacity: clamped, transform: `rotate(${(-10 * (1 - clamped)).toFixed(2)}deg)` };
+    case "slideUp":
+    default:
+      return { opacity: clamped, transform: `translateY(${20 * (1 - clamped)}px)` };
+  }
+}
+var SplitText = ({
+  content,
+  fontSize,
+  color,
+  fontFamily,
+  position,
+  splitBy,
+  stagger,
+  animation,
+  maxWidthPct,
+  safeInsetPct
+}) => {
+  const frame = (0, import_remotion29.useCurrentFrame)();
+  const { fps } = (0, import_remotion29.useVideoConfig)();
+  const items = splitBy === "letter" ? content.split("") : content.trim().split(/\s+/);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Fill, { style: { display: "flex", ...positionStyles4(position, safeInsetPct) }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gap: splitBy === "letter" ? 0 : 12,
+        maxWidth: `${Math.round(maxWidthPct * 100)}%`,
+        fontSize,
+        color,
+        fontFamily,
+        fontWeight: 700,
+        textAlign: "center",
+        overflowWrap: "anywhere",
+        wordBreak: "break-word"
+      },
+      children: items.map((t, i) => {
+        const progress = (0, import_remotion29.spring)({
+          frame: frame - i * stagger,
+          fps,
+          config: { damping: 14, stiffness: 120, mass: 0.9 }
+        });
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          "span",
+          {
+            style: {
+              display: "inline-block",
+              whiteSpace: t === " " ? "pre" : "pre-wrap",
+              ...getItemStyle(progress, animation)
+            },
+            children: splitBy === "word" ? `${t} ` : t
+          },
+          `${i}-${t}`
+        );
+      })
+    }
+  ) });
+};
+var SplitTextComponentMetadata = {
+  kind: "composite",
+  category: "text",
+  description: "Animated text where each word or letter enters with a staggered effect",
+  llmGuidance: 'Use for titles. splitBy="word" is best for phrases; splitBy="letter" is dramatic for short words.',
+  examples: [
+    { content: "Welcome to Waves", splitBy: "word", stagger: 3, animation: "slideUp" },
+    { content: "HELLO", splitBy: "letter", stagger: 2, animation: "scale" }
+  ]
+};
+
+// src/components/composites/SubtitleText.tsx
+var import_remotion30 = require("remotion");
+var import_zod41 = require("zod");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var SubtitleTextPropsSchema = import_zod41.z.object({
+  text: import_zod41.z.string().max(200),
+  fontSize: import_zod41.z.number().min(12).max(80).default(36),
+  color: import_zod41.z.string().default("#FFFFFF"),
+  backgroundColor: import_zod41.z.string().default("rgba(0,0,0,0.7)"),
+  fontFamily: import_zod41.z.string().default("Inter"),
+  position: import_zod41.z.enum(["top", "bottom"]).default("bottom"),
+  maxWidth: import_zod41.z.number().min(200).max(1200).default(800),
+  padding: import_zod41.z.number().min(0).max(80).default(20),
+  highlightWords: import_zod41.z.array(import_zod41.z.string()).optional()
+});
+function normalizeWord(w) {
+  return w.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+var SubtitleText = ({
+  text,
+  fontSize,
+  color,
+  backgroundColor,
+  fontFamily,
+  position,
+  maxWidth,
+  padding,
+  highlightWords,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion30.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const inFade = (0, import_remotion30.interpolate)(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const outFade = (0, import_remotion30.interpolate)(frame, [Math.max(0, total - 10), total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const opacity = inFade * outFade;
+  const highlights = new Set((highlightWords ?? []).map(normalizeWord));
+  const tokens = text.split(/\s+/);
+  const yStyle = position === "top" ? { top: 70 } : { bottom: 90 };
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { position: "absolute", left: "50%", transform: "translateX(-50%)", maxWidth, width: "100%", ...yStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      style: {
+        display: "inline-block",
+        backgroundColor,
+        padding,
+        borderRadius: 18,
+        opacity,
+        color,
+        fontSize,
+        fontFamily,
+        fontWeight: 800,
+        lineHeight: 1.2,
+        textAlign: "center"
+      },
+      children: tokens.map((t, i) => {
+        const n = normalizeWord(t);
+        const isHighlighted = highlights.has(n);
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { style: { color: isHighlighted ? "#FFD60A" : color, marginRight: 8 }, children: t }, i);
+      })
+    }
+  ) }) });
+};
+var SubtitleTextComponentMetadata = {
+  kind: "composite",
+  category: "text",
+  description: "Caption/subtitle box with fade in/out and optional highlighted words",
+  llmGuidance: "Use for narration/captions. highlightWords helps emphasize key terms."
+};
+
+// src/components/composites/TikTokCaption.tsx
+var import_remotion31 = require("remotion");
+var import_zod42 = require("zod");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var TikTokCaptionPropsSchema = import_zod42.z.object({
+  text: import_zod42.z.string().max(150),
+  fontSize: import_zod42.z.number().min(12).max(120).default(48),
+  color: import_zod42.z.string().default("#FFFFFF"),
+  strokeColor: import_zod42.z.string().default("#000000"),
+  strokeWidth: import_zod42.z.number().min(0).max(10).default(3),
+  position: import_zod42.z.enum(["center", "bottom"]).default("center"),
+  highlightStyle: import_zod42.z.enum(["word", "bounce", "none"]).default("word"),
+  maxWidthPct: import_zod42.z.number().min(0.1).max(1).default(0.92),
+  safeInsetPct: import_zod42.z.number().min(0).max(0.25).default(0.06)
+});
+var TikTokCaption = ({
+  text,
+  fontSize,
+  color,
+  strokeColor,
+  strokeWidth,
+  position,
+  highlightStyle,
+  maxWidthPct,
+  safeInsetPct,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion31.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const p = (0, import_remotion31.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const words = text.trim().split(/\s+/);
+  const idx = highlightStyle === "none" ? -1 : Math.min(words.length - 1, Math.floor(p * words.length));
+  const inset = `${(safeInsetPct * 100).toFixed(2)}%`;
+  const yStyle = position === "bottom" ? { alignItems: "flex-end", paddingBottom: inset } : { alignItems: "center" };
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Fill, { style: { display: "flex", justifyContent: "center", ...yStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { textAlign: "center", paddingLeft: inset, paddingRight: inset, maxWidth: `${Math.round(maxWidthPct * 100)}%`, fontWeight: 900, lineHeight: 1.1, overflowWrap: "anywhere", wordBreak: "break-word" }, children: words.map((w, i) => {
+    const isActive = i === idx && highlightStyle !== "none";
+    const bounce = isActive && highlightStyle === "bounce" ? (0, import_remotion31.interpolate)(frame % 18, [0, 9, 18], [1, 1.08, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) : 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "span",
+      {
+        style: {
+          display: "inline-block",
+          marginRight: 12,
+          fontSize,
+          color: isActive ? "#FFD60A" : color,
+          WebkitTextStroke: `${strokeWidth}px ${strokeColor}`,
+          transform: `scale(${bounce})`
+        },
+        children: w
+      },
+      `${i}-${w}`
+    );
+  }) }) });
+};
+var TikTokCaptionComponentMetadata = {
+  kind: "composite",
+  category: "social",
+  description: "TikTok-style captions with stroke and optional word highlighting",
+  llmGuidance: 'Always keep strokeWidth>=2 for readability. highlightStyle="word" or "bounce" makes captions feel dynamic.'
+};
+
+// src/components/composites/ThirdLowerBanner.tsx
+var import_remotion32 = require("remotion");
+var import_zod43 = require("zod");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var ThirdLowerBannerPropsSchema = import_zod43.z.object({
+  name: import_zod43.z.string().max(50),
+  title: import_zod43.z.string().max(100),
+  backgroundColor: import_zod43.z.string().default("rgba(0,0,0,0.8)"),
+  primaryColor: import_zod43.z.string().default("#FFFFFF"),
+  secondaryColor: import_zod43.z.string().default("#CCCCCC"),
+  accentColor: import_zod43.z.string().default("#FF0000"),
+  showAvatar: import_zod43.z.boolean().default(false),
+  avatarSrc: import_zod43.z.string().optional()
+});
+var resolveAsset13 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion32.staticFile)(staticFileInputFromAssetPath(value));
+var ThirdLowerBanner = ({
+  name,
+  title,
+  backgroundColor,
+  primaryColor,
+  secondaryColor,
+  accentColor,
+  showAvatar,
+  avatarSrc
+}) => {
+  const frame = (0, import_remotion32.useCurrentFrame)();
+  const slide = (0, import_remotion32.interpolate)(frame, [0, 18], [-600, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const opacity = (0, import_remotion32.interpolate)(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const avatar = showAvatar && typeof avatarSrc === "string" && avatarSrc.length > 0 ? avatarSrc : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: 80,
+        bottom: 80,
+        width: 980,
+        height: 160,
+        transform: `translateX(${slide}px)`,
+        opacity,
+        display: "flex",
+        overflow: "hidden",
+        borderRadius: 18,
+        backgroundColor
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: { width: 10, backgroundColor: accentColor } }),
+        avatar ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: { width: 160, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          import_remotion32.Img,
+          {
+            src: resolveAsset13(avatar),
+            style: { width: 110, height: 110, borderRadius: 9999, objectFit: "cover" }
+          }
+        ) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { style: { padding: "28px 36px", display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: { color: primaryColor, fontSize: 54, fontWeight: 800, lineHeight: 1 }, children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: { marginTop: 10, color: secondaryColor, fontSize: 28, fontWeight: 600 }, children: title })
+        ] })
+      ]
+    }
+  ) });
+};
+var ThirdLowerBannerComponentMetadata = {
+  kind: "composite",
+  category: "layout",
+  description: "Broadcast-style lower-third banner with name/title and optional avatar",
+  llmGuidance: "Use for speaker introductions. name = big label, title = smaller subtitle. showAvatar + avatarSrc for profile image.",
+  examples: [
+    { name: "Alex Chen", title: "Product Designer", accentColor: "#FF3B30" },
+    { name: "Depths AI", title: "Waves v0.2.0", showAvatar: false }
+  ]
+};
+
+// src/components/composites/TypewriterText.tsx
+var import_remotion33 = require("remotion");
+var import_zod44 = require("zod");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var TypewriterTextPropsSchema = import_zod44.z.object({
+  content: import_zod44.z.string().max(500),
+  fontSize: import_zod44.z.number().min(8).max(200).default(48),
+  color: import_zod44.z.string().default("#FFFFFF"),
+  fontFamily: import_zod44.z.string().default("Inter"),
+  position: import_zod44.z.enum(["top", "center", "bottom"]).default("center"),
+  speed: import_zod44.z.number().min(0.5).max(5).default(2),
+  showCursor: import_zod44.z.boolean().default(true),
+  cursorColor: import_zod44.z.string().default("#FFFFFF"),
+  maxWidthPct: import_zod44.z.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: import_zod44.z.number().min(0).max(0.25).default(0.06)
+});
+var positionStyles5 = (position, safeInsetPct) => {
+  const inset = `${(safeInsetPct * 100).toFixed(2)}%`;
+  if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: inset };
+  if (position === "bottom") return { justifyContent: "center", alignItems: "flex-end", paddingBottom: inset };
+  return { justifyContent: "center", alignItems: "center" };
+};
+var TypewriterText = ({
+  content,
+  fontSize,
+  color,
+  fontFamily,
+  position,
+  speed,
+  showCursor,
+  cursorColor,
+  maxWidthPct,
+  safeInsetPct
+}) => {
+  const frame = (0, import_remotion33.useCurrentFrame)();
+  const charCount = Math.min(content.length, Math.max(0, Math.floor(frame * speed)));
+  const shown = content.slice(0, charCount);
+  const cursorVisible = showCursor && charCount < content.length ? frame % 30 < 15 : false;
+  const cursorOpacity = cursorVisible ? 1 : 0;
+  const cursorFade = (0, import_remotion33.interpolate)(frame % 30, [0, 5], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Fill, { style: { display: "flex", ...positionStyles5(position, safeInsetPct) }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { style: { fontSize, color, fontFamily, fontWeight: 600, textAlign: "center", whiteSpace: "pre-wrap", maxWidth: `${Math.round(maxWidthPct * 100)}%`, overflowWrap: "anywhere", wordBreak: "break-word" }, children: [
+    shown,
+    showCursor ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { style: { color: cursorColor, opacity: cursorOpacity * cursorFade }, children: "|" }) : null
+  ] }) });
+};
+var TypewriterTextComponentMetadata = {
+  kind: "composite",
+  category: "text",
+  description: "Character-by-character text reveal with optional blinking cursor",
+  llmGuidance: "Use for dramatic reveals and terminal-style text. speed ~1-2 is readable; 3-5 is fast.",
+  examples: [
+    { content: "Hello Waves", speed: 2, position: "center", fontSize: 72 },
+    { content: 'console.log("hi")', speed: 1.5, fontFamily: "monospace", position: "top" }
+  ]
+};
+
+// src/components/composites/TwitterCard.tsx
+var import_remotion34 = require("remotion");
+var import_zod45 = require("zod");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var TwitterCardPropsSchema = import_zod45.z.object({
+  author: import_zod45.z.string().min(1),
+  handle: import_zod45.z.string().min(1),
+  avatarSrc: import_zod45.z.string().optional(),
+  tweet: import_zod45.z.string().max(280),
+  image: import_zod45.z.string().optional(),
+  timestamp: import_zod45.z.string().optional(),
+  verified: import_zod45.z.boolean().default(false)
+});
+var resolveAsset14 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion34.staticFile)(staticFileInputFromAssetPath(value));
+var TwitterCard = ({ author, handle, avatarSrc, tweet, image, timestamp, verified }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Fill, { style: { backgroundColor: "#0B0F14", display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    "div",
+    {
+      style: {
+        width: 1100,
+        borderRadius: 28,
+        backgroundColor: "#FFFFFF",
+        padding: 48,
+        boxSizing: "border-box",
+        boxShadow: "0 30px 90px rgba(0,0,0,0.35)"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: 18, alignItems: "center" }, children: [
+          avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_remotion34.Img, { src: resolveAsset14(avatarSrc), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "#E5E7EB" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { fontSize: 34, fontWeight: 900, color: "#111827" }, children: author }),
+              verified ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { fontSize: 26, color: "#1D9BF0", fontWeight: 900 }, children: "\u2713" }) : null
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { fontSize: 26, color: "#6B7280", fontWeight: 800 }, children: handle })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: 28, fontSize: 36, lineHeight: 1.25, color: "#111827", fontWeight: 700 }, children: tweet }),
+        image ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: 28, width: "100%", height: 520, overflow: "hidden", borderRadius: 22, backgroundColor: "#F3F4F6" }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_remotion34.Img, { src: resolveAsset14(image), style: { width: "100%", height: "100%", objectFit: "cover" } }) }) : null,
+        timestamp ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: 22, fontSize: 22, color: "#6B7280", fontWeight: 700 }, children: timestamp }) : null
+      ]
+    }
+  ) });
+};
+var TwitterCardComponentMetadata = {
+  kind: "composite",
+  category: "social",
+  description: "Twitter/X post card layout with author header and optional image",
+  llmGuidance: "Use for announcements/testimonials. Keep tweet short for readability."
+};
+
+// src/components/composites/Watermark.tsx
+var import_remotion35 = require("remotion");
+var import_zod46 = require("zod");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var WatermarkPropsSchema = import_zod46.z.object({
+  type: import_zod46.z.enum(["logo", "text"]).default("logo"),
+  src: import_zod46.z.string().optional(),
+  text: import_zod46.z.string().optional(),
+  position: import_zod46.z.enum(["topLeft", "topRight", "bottomLeft", "bottomRight"]).default("bottomRight"),
+  opacity: import_zod46.z.number().min(0.1).max(1).default(0.5),
+  size: import_zod46.z.number().min(30).max(150).default(60),
+  color: import_zod46.z.string().default("#FFFFFF")
+});
+var resolveAsset15 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion35.staticFile)(staticFileInputFromAssetPath(value));
+function posStyle(position) {
+  const offset = 30;
+  if (position === "topLeft") return { left: offset, top: offset };
+  if (position === "topRight") return { right: offset, top: offset };
+  if (position === "bottomLeft") return { left: offset, bottom: offset };
+  return { right: offset, bottom: offset };
+}
+var Watermark = ({ type, src, text, position, opacity, size, color }) => {
+  const style = {
+    position: "absolute",
+    ...posStyle(position),
+    opacity,
+    pointerEvents: "none"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Fill, { children: type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { ...style, fontSize: Math.round(size * 0.6), color, fontWeight: 700 }, children: text ?? "" }) : src ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_remotion35.Img,
+    {
+      src: resolveAsset15(src),
+      style: { ...style, width: size, height: size, objectFit: "contain" }
+    }
+  ) : null });
+};
+var WatermarkComponentMetadata = {
+  kind: "composite",
+  category: "branding",
+  description: "Persistent logo/text watermark in a corner",
+  llmGuidance: "Use subtle opacity (0.3-0.6). bottomRight is standard.",
+  examples: [
+    { type: "text", text: "@depths.ai", position: "bottomRight", opacity: 0.4, size: 60 },
+    { type: "logo", src: "/assets/logo.svg", position: "topLeft", opacity: 0.5, size: 70 }
+  ]
+};
+
+// src/components/composites/WipeTransition.tsx
+var import_react9 = __toESM(require("react"));
+var import_remotion36 = require("remotion");
+var import_zod47 = require("zod");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var WipeTransitionPropsSchema = import_zod47.z.object({
+  durationInFrames: import_zod47.z.number().int().min(10).max(60).default(30),
+  direction: import_zod47.z.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
+  softEdge: import_zod47.z.boolean().default(false),
+  phase: import_zod47.z.enum(["in", "out", "inOut"]).default("inOut")
+});
+function clipFor2(direction, p) {
+  if (direction === "left") return `inset(0 ${100 * (1 - p)}% 0 0)`;
+  if (direction === "right") return `inset(0 0 0 ${100 * (1 - p)}%)`;
+  if (direction === "up") return `inset(0 0 ${100 * (1 - p)}% 0)`;
+  if (direction === "down") return `inset(${100 * (1 - p)}% 0 0 0)`;
+  return `polygon(0 0, ${100 * p}% 0, 0 ${100 * p}%)`;
+}
+var WipeTransition = ({
+  durationInFrames,
+  direction,
+  softEdge,
+  phase,
+  children,
+  __wavesDurationInFrames
+}) => {
+  const layers = import_react9.default.Children.toArray(children);
+  const frame = (0, import_remotion36.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(durationInFrames, total);
+  let clipPath;
+  if (phase === "in" || phase === "inOut") {
+    const t = (0, import_remotion36.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    clipPath = clipFor2(direction, t);
+  }
+  if (phase === "out" || phase === "inOut") {
+    const start = Math.max(0, total - d);
+    const t = (0, import_remotion36.interpolate)(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    clipPath = clipFor2(direction, t);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Fill, { style: { clipPath, filter: softEdge ? "blur(0.4px)" : void 0 }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
+};
+var WipeTransitionComponentMetadata = {
+  kind: "composite",
+  category: "transition",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Directional wipe reveal/hide wrapper transition",
+  llmGuidance: "Use as a more stylized reveal. softEdge can make it feel less harsh."
+};
+
+// src/components/composites/YouTubeThumbnail.tsx
+var import_remotion37 = require("remotion");
+var import_zod48 = require("zod");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var YouTubeThumbnailPropsSchema = import_zod48.z.object({
+  backgroundImage: import_zod48.z.string().min(1),
+  title: import_zod48.z.string().max(60),
+  subtitle: import_zod48.z.string().max(40).optional(),
+  thumbnailFace: import_zod48.z.string().optional(),
+  accentColor: import_zod48.z.string().default("#FF0000"),
+  style: import_zod48.z.enum(["bold", "minimal", "dramatic"]).default("bold")
+});
+var resolveAsset16 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion37.staticFile)(staticFileInputFromAssetPath(value));
+var YouTubeThumbnail = ({
+  backgroundImage,
+  title,
+  subtitle,
+  thumbnailFace,
+  accentColor,
+  style
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Fill, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_remotion37.Img, { src: resolveAsset16(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+    style === "dramatic" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { style: { position: "absolute", inset: 0, backgroundColor: "rgba(0,0,0,0.35)" } }) : null,
+    thumbnailFace ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      import_remotion37.Img,
+      {
+        src: resolveAsset16(thumbnailFace),
+        style: { position: "absolute", right: 60, bottom: 0, width: 520, height: 720, objectFit: "cover" }
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { style: { position: "absolute", left: 70, top: 90, width: 1100 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        "div",
+        {
+          style: {
+            fontSize: style === "minimal" ? 86 : 110,
+            fontWeight: 1e3,
+            color: "#FFFFFF",
+            textTransform: "uppercase",
+            lineHeight: 0.95,
+            WebkitTextStroke: style === "minimal" ? "0px transparent" : "10px #000000",
+            textShadow: style === "minimal" ? "0 10px 40px rgba(0,0,0,0.6)" : void 0
+          },
+          children: title
+        }
+      ),
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { style: { marginTop: 26, fontSize: 52, fontWeight: 900, color: accentColor, textShadow: "0 10px 30px rgba(0,0,0,0.6)" }, children: subtitle }) : null
+    ] }),
+    style !== "minimal" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { style: { position: "absolute", left: 70, bottom: 80, width: 260, height: 18, backgroundColor: accentColor, borderRadius: 9999 } }) : null
+  ] });
+};
+var YouTubeThumbnailComponentMetadata = {
+  kind: "composite",
+  category: "social",
+  description: "YouTube-style thumbnail layout (16:9) with bold title and optional face cutout",
+  llmGuidance: 'Use 1280x720 video size. Keep title short and high-contrast. style="bold" is classic thumbnail.'
+};
+
+// src/components/composites/VideoWithOverlay.tsx
+var import_remotion38 = require("remotion");
+var import_zod49 = require("zod");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var OverlaySchema = import_zod49.z.object({
+  type: import_zod49.z.enum(["text", "logo", "gradient"]),
+  content: import_zod49.z.string().optional(),
+  opacity: import_zod49.z.number().min(0).max(1).default(0.3),
+  position: import_zod49.z.enum(["top", "bottom", "center", "full"]).default("bottom")
+});
+var VideoWithOverlayPropsSchema = import_zod49.z.object({
+  src: import_zod49.z.string().min(1),
+  overlay: OverlaySchema.optional(),
+  volume: import_zod49.z.number().min(0).max(1).default(1),
+  playbackRate: import_zod49.z.number().min(0.5).max(2).default(1)
+});
+var resolveAsset17 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion38.staticFile)(staticFileInputFromAssetPath(value));
+var VideoWithOverlay = ({ src, overlay, volume, playbackRate }) => {
+  const frame = (0, import_remotion38.useCurrentFrame)();
+  const fade = (0, import_remotion38.interpolate)(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const overlayFill = { position: "absolute", inset: 0 };
+  const overlayNode = overlay ? overlay.type === "gradient" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "div",
+    {
+      style: {
+        ...overlayFill,
+        opacity: overlay.opacity,
+        background: overlay.position === "top" ? "linear-gradient(rgba(0,0,0,0.85), transparent)" : overlay.position === "bottom" ? "linear-gradient(transparent, rgba(0,0,0,0.85))" : "linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6))"
+      }
+    }
+  ) : overlay.type === "logo" && overlay.content ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { ...overlayFill, display: "flex", justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_remotion38.Img, { src: resolveAsset17(overlay.content), style: { width: 220, height: 220, objectFit: "contain" } }) }) : overlay.type === "text" && overlay.content ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { ...overlayFill, display: "flex", justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { color: "#FFFFFF", fontSize: 56, fontWeight: 900, textAlign: "center", padding: "0 80px" }, children: overlay.content }) }) : null : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Fill, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      import_remotion38.Video,
+      {
+        src: resolveAsset17(src),
+        style: { width: "100%", height: "100%", objectFit: "cover", opacity: fade },
+        muted: volume === 0,
+        playbackRate
+      }
+    ),
+    overlayNode
+  ] });
+};
+var VideoWithOverlayComponentMetadata = {
+  kind: "composite",
+  category: "media",
+  description: "Video background with an optional overlay (text/logo/gradient)",
+  llmGuidance: "Use gradient overlay to improve text readability. Set volume=0 to mute."
+};
+
+// src/components/composites/ZoomTransition.tsx
+var import_react10 = __toESM(require("react"));
+var import_remotion39 = require("remotion");
+var import_zod50 = require("zod");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var ZoomTransitionPropsSchema = import_zod50.z.object({
+  durationInFrames: import_zod50.z.number().int().min(10).max(60).default(30),
+  type: import_zod50.z.enum(["zoomIn", "zoomOut"]).default("zoomIn"),
+  phase: import_zod50.z.enum(["in", "out", "inOut"]).default("inOut")
+});
+var ZoomTransition = ({
+  durationInFrames,
+  type,
+  phase,
+  children,
+  __wavesDurationInFrames
+}) => {
+  const layers = import_react10.default.Children.toArray(children);
+  const frame = (0, import_remotion39.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(durationInFrames, total);
+  let opacity = 1;
+  let scale = 1;
+  const enterFrom = type === "zoomIn" ? 1.2 : 0.85;
+  const exitTo = type === "zoomIn" ? 1.25 : 0.75;
+  if (phase === "in" || phase === "inOut") {
+    const t = (0, import_remotion39.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    scale *= enterFrom + (1 - enterFrom) * t;
+    opacity *= t;
+  }
+  if (phase === "out" || phase === "inOut") {
+    const start = Math.max(0, total - d);
+    const t = (0, import_remotion39.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    scale *= 1 + (exitTo - 1) * t;
+    opacity *= 1 - t;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Fill, { style: { opacity, transform: `scale(${scale})` }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
+};
+var ZoomTransitionComponentMetadata = {
+  kind: "composite",
+  category: "transition",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Zoom in/out wrapper transition",
+  llmGuidance: 'Use for energetic cuts. type="zoomIn" feels punchy; type="zoomOut" feels calmer.'
+};
+
+// src/components/registry.ts
+function registerBuiltInComponents() {
+  if (!globalRegistry.has("Segment")) {
+    globalRegistry.register({
+      type: "Segment",
+      component: Segment,
+      propsSchema: SegmentPropsSchema,
+      metadata: SegmentComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("Box")) {
+    globalRegistry.register({
+      type: "Box",
+      component: Box,
+      propsSchema: BoxPropsSchema,
+      metadata: BoxComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("Frame")) {
+    globalRegistry.register({
+      type: "Frame",
+      component: Frame,
+      propsSchema: FramePropsSchema,
+      metadata: FrameComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("Stack")) {
+    globalRegistry.register({
+      type: "Stack",
+      component: Stack,
+      propsSchema: StackPropsSchema,
+      metadata: StackComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("Grid")) {
+    globalRegistry.register({
+      type: "Grid",
+      component: Grid,
+      propsSchema: GridPropsSchema,
+      metadata: GridComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("Layers")) {
+    globalRegistry.register({
+      type: "Layers",
+      component: Layers,
+      propsSchema: LayersPropsSchema,
+      metadata: LayersComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("Layer")) {
+    globalRegistry.register({
+      type: "Layer",
+      component: Layer,
+      propsSchema: LayerPropsSchema,
+      metadata: LayerComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("Image")) {
+    globalRegistry.register({
+      type: "Image",
+      component: Image,
+      propsSchema: ImagePropsSchema,
+      metadata: ImageComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("Video")) {
+    globalRegistry.register({
+      type: "Video",
+      component: Video2,
+      propsSchema: VideoPropsSchema,
+      metadata: VideoComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("Shape")) {
+    globalRegistry.register({
+      type: "Shape",
+      component: Shape,
+      propsSchema: ShapePropsSchema,
+      metadata: ShapeComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("TypewriterText")) {
+    globalRegistry.register({
+      type: "TypewriterText",
+      component: TypewriterText,
+      propsSchema: TypewriterTextPropsSchema,
+      metadata: TypewriterTextComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("SplitText")) {
+    globalRegistry.register({
+      type: "SplitText",
+      component: SplitText,
+      propsSchema: SplitTextPropsSchema,
+      metadata: SplitTextComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("KenBurnsImage")) {
+    globalRegistry.register({
+      type: "KenBurnsImage",
+      component: KenBurnsImage,
+      propsSchema: KenBurnsImagePropsSchema,
+      metadata: KenBurnsImageComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("FadeTransition")) {
+    globalRegistry.register({
+      type: "FadeTransition",
+      component: FadeTransition,
+      propsSchema: FadeTransitionPropsSchema,
+      metadata: FadeTransitionComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("SlideTransition")) {
+    globalRegistry.register({
+      type: "SlideTransition",
+      component: SlideTransition,
+      propsSchema: SlideTransitionPropsSchema,
+      metadata: SlideTransitionComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("SplitScreen")) {
+    globalRegistry.register({
+      type: "SplitScreen",
+      component: SplitScreen,
+      propsSchema: SplitScreenPropsSchema,
+      metadata: SplitScreenComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("ThirdLowerBanner")) {
+    globalRegistry.register({
+      type: "ThirdLowerBanner",
+      component: ThirdLowerBanner,
+      propsSchema: ThirdLowerBannerPropsSchema,
+      metadata: ThirdLowerBannerComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("AnimatedCounter")) {
+    globalRegistry.register({
+      type: "AnimatedCounter",
+      component: AnimatedCounter,
+      propsSchema: AnimatedCounterPropsSchema,
+      metadata: AnimatedCounterComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("LogoReveal")) {
+    globalRegistry.register({
+      type: "LogoReveal",
+      component: LogoReveal,
+      propsSchema: LogoRevealPropsSchema,
+      metadata: LogoRevealComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("Watermark")) {
+    globalRegistry.register({
+      type: "Watermark",
+      component: Watermark,
+      propsSchema: WatermarkPropsSchema,
+      metadata: WatermarkComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("GlitchText")) {
+    globalRegistry.register({
+      type: "GlitchText",
+      component: GlitchText,
+      propsSchema: GlitchTextPropsSchema,
+      metadata: GlitchTextComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("OutlineText")) {
+    globalRegistry.register({
+      type: "OutlineText",
+      component: OutlineText,
+      propsSchema: OutlineTextPropsSchema,
+      metadata: OutlineTextComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("ImageReveal")) {
+    globalRegistry.register({
+      type: "ImageReveal",
+      component: ImageReveal,
+      propsSchema: ImageRevealPropsSchema,
+      metadata: ImageRevealComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("ImageCollage")) {
+    globalRegistry.register({
+      type: "ImageCollage",
+      component: ImageCollage,
+      propsSchema: ImageCollagePropsSchema,
+      metadata: ImageCollageComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("ProgressBar")) {
+    globalRegistry.register({
+      type: "ProgressBar",
+      component: ProgressBar,
+      propsSchema: ProgressBarPropsSchema,
+      metadata: ProgressBarComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("ProgressRing")) {
+    globalRegistry.register({
+      type: "ProgressRing",
+      component: ProgressRing,
+      propsSchema: ProgressRingPropsSchema,
+      metadata: ProgressRingComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("BarChart")) {
+    globalRegistry.register({
+      type: "BarChart",
+      component: BarChart,
+      propsSchema: BarChartPropsSchema,
+      metadata: BarChartComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("InstagramStory")) {
+    globalRegistry.register({
+      type: "InstagramStory",
+      component: InstagramStory,
+      propsSchema: InstagramStoryPropsSchema,
+      metadata: InstagramStoryComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("TikTokCaption")) {
+    globalRegistry.register({
+      type: "TikTokCaption",
+      component: TikTokCaption,
+      propsSchema: TikTokCaptionPropsSchema,
+      metadata: TikTokCaptionComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("IntroScene")) {
+    globalRegistry.register({
+      type: "IntroScene",
+      component: IntroScene,
+      propsSchema: IntroScenePropsSchema,
+      metadata: IntroSceneComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("CountUpText")) {
+    globalRegistry.register({
+      type: "CountUpText",
+      component: CountUpText,
+      propsSchema: CountUpTextPropsSchema,
+      metadata: CountUpTextComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("KineticTypography")) {
+    globalRegistry.register({
+      type: "KineticTypography",
+      component: KineticTypography,
+      propsSchema: KineticTypographyPropsSchema,
+      metadata: KineticTypographyComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("SubtitleText")) {
+    globalRegistry.register({
+      type: "SubtitleText",
+      component: SubtitleText,
+      propsSchema: SubtitleTextPropsSchema,
+      metadata: SubtitleTextComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("ImageSequence")) {
+    globalRegistry.register({
+      type: "ImageSequence",
+      component: ImageSequence,
+      propsSchema: ImageSequencePropsSchema,
+      metadata: ImageSequenceComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("ImageWithCaption")) {
+    globalRegistry.register({
+      type: "ImageWithCaption",
+      component: ImageWithCaption,
+      propsSchema: ImageWithCaptionPropsSchema,
+      metadata: ImageWithCaptionComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("VideoWithOverlay")) {
+    globalRegistry.register({
+      type: "VideoWithOverlay",
+      component: VideoWithOverlay,
+      propsSchema: VideoWithOverlayPropsSchema,
+      metadata: VideoWithOverlayComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("ZoomTransition")) {
+    globalRegistry.register({
+      type: "ZoomTransition",
+      component: ZoomTransition,
+      propsSchema: ZoomTransitionPropsSchema,
+      metadata: ZoomTransitionComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("WipeTransition")) {
+    globalRegistry.register({
+      type: "WipeTransition",
+      component: WipeTransition,
+      propsSchema: WipeTransitionPropsSchema,
+      metadata: WipeTransitionComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("CircularReveal")) {
+    globalRegistry.register({
+      type: "CircularReveal",
+      component: CircularReveal,
+      propsSchema: CircularRevealPropsSchema,
+      metadata: CircularRevealComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("CardStack")) {
+    globalRegistry.register({
+      type: "CardStack",
+      component: CardStack,
+      propsSchema: CardStackPropsSchema,
+      metadata: CardStackComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("GridLayout")) {
+    globalRegistry.register({
+      type: "GridLayout",
+      component: GridLayout,
+      propsSchema: GridLayoutPropsSchema,
+      metadata: GridLayoutComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("LineGraph")) {
+    globalRegistry.register({
+      type: "LineGraph",
+      component: LineGraph,
+      propsSchema: LineGraphPropsSchema,
+      metadata: LineGraphComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("YouTubeThumbnail")) {
+    globalRegistry.register({
+      type: "YouTubeThumbnail",
+      component: YouTubeThumbnail,
+      propsSchema: YouTubeThumbnailPropsSchema,
+      metadata: YouTubeThumbnailComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("TwitterCard")) {
+    globalRegistry.register({
+      type: "TwitterCard",
+      component: TwitterCard,
+      propsSchema: TwitterCardPropsSchema,
+      metadata: TwitterCardComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("OutroScene")) {
+    globalRegistry.register({
+      type: "OutroScene",
+      component: OutroScene,
+      propsSchema: OutroScenePropsSchema,
+      metadata: OutroSceneComponentMetadata
+    });
   }
-};
-var Text = ({ content, fontSize, color, position, animation }) => {
-  const frame = (0, import_remotion3.useCurrentFrame)();
-  const positionStyles = getPositionStyles(position);
-  const animationStyles = getAnimationStyle(frame, animation);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_remotion3.AbsoluteFill, { style: positionStyles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "div",
-    {
-      style: {
-        fontSize,
-        color,
-        fontWeight: 600,
-        textAlign: "center",
-        ...animationStyles
-      },
-      children: content
-    }
-  ) });
-};
-var TextComponentMetadata = {
-  category: "primitive",
-  description: "Displays animated text with positioning and animation options",
-  llmGuidance: 'Use for titles, subtitles, captions. Keep content under 100 characters for readability. Position "center" works best for titles.',
-  examples: [
-    {
-      content: "Welcome to Waves",
-      fontSize: 72,
-      color: "#FFFFFF",
-      position: "center",
-      animation: "fade"
-    },
-    {
-      content: "Building the future of video",
-      fontSize: 36,
-      color: "#CCCCCC",
-      position: "bottom",
-      animation: "slide"
-    }
-  ]
-};
-
-// src/components/registry.ts
-function registerBuiltInComponents() {
   if (!globalRegistry.has("Scene")) {
     globalRegistry.register({
       type: "Scene",
@@ -400,10 +3345,10 @@ function registerBuiltInComponents() {
 var RULES = {
   timing: [
     "All timing is in frames (integers).",
-    "Every component has timing: { from, durationInFrames }.",
-    "Scenes must be sequential: scene[0].timing.from = 0 and each next scene starts where the previous ends (no gaps/overlaps).",
-    "Sum of all scene durations must equal video.durationInFrames.",
-    "Child components inside a Scene must fit within the Scene duration."
+    'Prefer authoring using "segments" (high-level). Each segment has { durationInFrames, root } and start times are derived by order.',
+    'Use "timeline" only for advanced cases (explicit timings, overlaps).',
+    "If you provide timing on nodes, timing is { from, durationInFrames } and children timing is relative to the parent duration.",
+    "Total duration must match video.durationInFrames."
   ],
   assets: [
     'Asset paths must be either full URLs (http:// or https://) or absolute public paths starting with "/".',
@@ -420,9 +3365,10 @@ var RULES = {
   ]
 };
 function getSystemPrompt(registeredTypes) {
-  const typesLine = registeredTypes.length ? registeredTypes.join(", ") : "(none)";
+  const maxInline = 40;
+  const typesLine = registeredTypes.length <= maxInline ? registeredTypes.length ? registeredTypes.join(", ") : "(none)" : `${registeredTypes.length} types (see schemas.components keys). Example: ${registeredTypes.slice(0, 20).join(", ")}, ...`;
   return [
-    "You generate JSON for @depths/waves Video IR (version 1.0).",
+    "You generate JSON for @depths/waves Video IR (version 2.0).",
     "",
     "Goal:",
     "- Produce a single JSON object that conforms to the provided Video IR JSON Schema and uses only registered component types.",
@@ -443,14 +3389,35 @@ function getSystemPrompt(registeredTypes) {
 function getPromptPayload(options) {
   registerBuiltInComponents();
   const registry = options?.registry ?? globalRegistry;
-  const types = registry.getTypes().sort();
+  const types = registry.getTypesForLLM().sort();
+  const categories = {};
+  const items = [];
+  for (const t of types) {
+    const reg = registry.get(t);
+    if (!reg) continue;
+    const cat = reg.metadata.category;
+    if (!categories[cat]) categories[cat] = [];
+    categories[cat].push(t);
+    const llmGuidance = reg.metadata.llmGuidance;
+    items.push({
+      type: t,
+      kind: reg.metadata.kind,
+      category: cat,
+      description: reg.metadata.description,
+      ...typeof llmGuidance === "string" ? { llmGuidance } : {}
+    });
+  }
   return {
     package: "@depths/waves",
     version: __wavesVersion,
-    irVersion: "1.0",
+    irVersion: "2.0",
     systemPrompt: getSystemPrompt(types),
+    catalog: {
+      categories,
+      items
+    },
     schemas: {
-      videoIR: zodSchemaToJsonSchema(VideoIRSchema),
+      videoIR: zodSchemaToJsonSchema(VideoIRv2AuthoringSchema),
       components: registry.getJSONSchemaForLLM()
     },
     rules: {
@@ -462,8 +3429,70 @@ function getPromptPayload(options) {
   };
 }
 
+// src/ir/migrations.ts
+function fillNodeTiming(node, parentDurationInFrames) {
+  const timing = node.timing ?? { from: 0, durationInFrames: parentDurationInFrames };
+  const children = node.children?.map((c) => fillNodeTiming(c, timing.durationInFrames));
+  return {
+    id: node.id,
+    type: node.type,
+    timing,
+    props: node.props,
+    metadata: node.metadata,
+    children: children && children.length ? children : void 0
+  };
+}
+function compileToRenderGraph(v2) {
+  const parsed = VideoIRv2Schema.parse(v2);
+  if (parsed.timeline) {
+    const timeline2 = parsed.timeline.map((n) => {
+      const timing = n.timing ?? { from: 0, durationInFrames: parsed.video.durationInFrames };
+      return fillNodeTiming({ ...n, timing }, parsed.video.durationInFrames);
+    });
+    return {
+      version: "2.0",
+      video: parsed.video,
+      audio: parsed.audio,
+      timeline: timeline2
+    };
+  }
+  const segments = parsed.segments ?? [];
+  const timeline = [];
+  let start = 0;
+  let pendingEnter;
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i];
+    const hasNext = i < segments.length - 1;
+    const exit = hasNext ? seg.transitionToNext : void 0;
+    const enter = pendingEnter;
+    const rootFilled = fillNodeTiming(seg.root, seg.durationInFrames);
+    timeline.push({
+      id: `segment:${seg.id}`,
+      type: "Segment",
+      timing: { from: start, durationInFrames: seg.durationInFrames },
+      props: {
+        enterTransition: enter,
+        exitTransition: exit
+      },
+      children: [rootFilled]
+    });
+    pendingEnter = exit;
+    const overlap = exit?.durationInFrames ?? 0;
+    start += seg.durationInFrames - overlap;
+  }
+  return {
+    version: "2.0",
+    video: parsed.video,
+    audio: parsed.audio,
+    timeline
+  };
+}
+
 // src/core/validator.ts
 var IRValidator = class {
+  constructor(registry) {
+    this.registry = registry;
+  }
   validateSchema(ir) {
     const result = VideoIRSchema.safeParse(ir);
     if (!result.success) {
@@ -478,41 +3507,75 @@ var IRValidator = class {
     }
     return { success: true, data: result.data };
   }
-  validateSemantics(ir) {
+  validateSemantics(latest) {
     const errors = [];
-    const totalSceneDuration = ir.scenes.reduce((sum, scene) => sum + scene.timing.durationInFrames, 0);
-    if (totalSceneDuration !== ir.video.durationInFrames) {
+    if (latest.segments) {
+      for (const [i, seg] of latest.segments.entries()) {
+        const exit = seg.transitionToNext;
+        const overlap = exit?.durationInFrames ?? 0;
+        if (exit && i === latest.segments.length - 1) {
+          errors.push({
+            path: ["segments", String(i), "transitionToNext"],
+            message: "transitionToNext is not allowed on the last segment",
+            code: "TRANSITION_ON_LAST_SEGMENT"
+          });
+          continue;
+        }
+        if (overlap > 0 && i < latest.segments.length - 1) {
+          const next = latest.segments[i + 1];
+          if (overlap > seg.durationInFrames) {
+            errors.push({
+              path: ["segments", String(i), "transitionToNext", "durationInFrames"],
+              message: `Transition overlap (${overlap}) exceeds segment duration (${seg.durationInFrames})`,
+              code: "TRANSITION_OVERLAP_TOO_LARGE"
+            });
+          }
+          if (overlap > next.durationInFrames) {
+            errors.push({
+              path: ["segments", String(i + 1), "durationInFrames"],
+              message: `Transition overlap (${overlap}) exceeds next segment duration (${next.durationInFrames})`,
+              code: "TRANSITION_OVERLAP_TOO_LARGE"
+            });
+          }
+        }
+      }
+    }
+    const compiled = compileToRenderGraph(latest);
+    const maxEnd = getMaxEnd(compiled.timeline);
+    if (maxEnd !== compiled.video.durationInFrames) {
       errors.push({
-        path: ["scenes"],
-        message: `Sum of scene durations (${totalSceneDuration}) does not match video duration (${ir.video.durationInFrames})`,
+        path: ["video", "durationInFrames"],
+        message: `Max timeline end (${maxEnd}) does not match video duration (${compiled.video.durationInFrames})`,
         code: "DURATION_MISMATCH"
       });
     }
-    let expectedFrame = 0;
-    for (const [i, scene] of ir.scenes.entries()) {
-      if (scene.timing.from !== expectedFrame) {
+    for (const [i, root] of compiled.timeline.entries()) {
+      const end = root.timing.from + root.timing.durationInFrames;
+      if (root.timing.from < 0 || root.timing.durationInFrames <= 0) {
         errors.push({
-          path: ["scenes", String(i), "timing", "from"],
-          message: `Scene ${i} starts at frame ${scene.timing.from}, expected ${expectedFrame}`,
-          code: "TIMING_GAP_OR_OVERLAP"
+          path: ["timeline", String(i), "timing"],
+          message: "Timing must have from>=0 and durationInFrames>0",
+          code: "INVALID_TIMING"
         });
       }
-      expectedFrame += scene.timing.durationInFrames;
-    }
-    for (const [i, scene] of ir.scenes.entries()) {
-      if (scene.children && scene.children.length > 0) {
-        this.validateComponentTimingRecursive(
-          scene.children,
-          scene.timing.durationInFrames,
-          ["scenes", String(i)],
-          errors
-        );
+      if (end > compiled.video.durationInFrames) {
+        errors.push({
+          path: ["timeline", String(i), "timing"],
+          message: `Root node exceeds video duration (${end} > ${compiled.video.durationInFrames})`,
+          code: "COMPONENT_EXCEEDS_VIDEO"
+        });
+      }
+      if (root.children?.length) {
+        this.validateComponentTimingRecursive(root.children, root.timing.durationInFrames, ["timeline", String(i)], errors);
       }
     }
+    if (this.registry) {
+      this.validateRegistryContracts(compiled, errors);
+    }
     if (errors.length > 0) {
       return { success: false, errors };
     }
-    return { success: true };
+    return { success: true, data: compiled };
   }
   validate(ir) {
     const schemaResult = this.validateSchema(ir);
@@ -523,7 +3586,7 @@ var IRValidator = class {
     if (!semanticsResult.success) {
       return { success: false, errors: semanticsResult.errors ?? [] };
     }
-    return schemaResult;
+    return semanticsResult;
   }
   validateComponentTimingRecursive(components, parentDuration, pathPrefix, errors) {
     for (const [i, component] of components.entries()) {
@@ -535,7 +3598,7 @@ var IRValidator = class {
           code: "COMPONENT_EXCEEDS_PARENT"
         });
       }
-      if (component.type === "Scene" && component.children && component.children.length > 0) {
+      if (component.children && component.children.length > 0) {
         this.validateComponentTimingRecursive(
           component.children,
           component.timing.durationInFrames,
@@ -545,7 +3608,87 @@ var IRValidator = class {
       }
     }
   }
+  validateRegistryContracts(compiled, errors) {
+    const registry = this.registry;
+    const stack = compiled.timeline.map((n, i) => ({
+      node: n,
+      path: ["timeline", String(i)]
+    }));
+    while (stack.length) {
+      const { node, path: path3 } = stack.pop();
+      const reg = registry.get(node.type);
+      if (!reg) {
+        errors.push({
+          path: [...path3, "type"],
+          message: `Unknown component type: ${node.type}`,
+          code: "UNKNOWN_COMPONENT_TYPE"
+        });
+        continue;
+      }
+      const rawProps = node.props ?? {};
+      if (rawProps === null || typeof rawProps !== "object") {
+        errors.push({
+          path: [...path3, "props"],
+          message: "Component props must be an object",
+          code: "PROPS_NOT_OBJECT"
+        });
+      } else {
+        const propsValidation = registry.validateProps(node.type, rawProps);
+        if (!propsValidation.success) {
+          for (const issue of propsValidation.error.issues) {
+            errors.push({
+              path: [...path3, "props", ...issue.path.map((p) => String(p))],
+              message: issue.message,
+              code: "PROPS_INVALID"
+            });
+          }
+        } else {
+          node.props = propsValidation.data;
+        }
+      }
+      const childCount = node.children?.length ?? 0;
+      const meta = reg.metadata;
+      const acceptsChildren = Boolean(meta.acceptsChildren);
+      if (childCount > 0 && !acceptsChildren) {
+        errors.push({
+          path: [...path3, "children"],
+          message: `Component type "${node.type}" does not accept children`,
+          code: "CHILDREN_NOT_ALLOWED"
+        });
+      }
+      if (typeof meta.minChildren === "number" && childCount < meta.minChildren) {
+        errors.push({
+          path: [...path3, "children"],
+          message: `Component requires at least ${meta.minChildren} children`,
+          code: "TOO_FEW_CHILDREN"
+        });
+      }
+      if (typeof meta.maxChildren === "number" && childCount > meta.maxChildren) {
+        errors.push({
+          path: [...path3, "children"],
+          message: `Component allows at most ${meta.maxChildren} children`,
+          code: "TOO_MANY_CHILDREN"
+        });
+      }
+      if (node.children?.length) {
+        for (let i = 0; i < node.children.length; i++) {
+          stack.push({ node: node.children[i], path: [...path3, "children", String(i)] });
+        }
+      }
+    }
+  }
 };
+function getMaxEnd(nodes) {
+  let max = 0;
+  const stack = [...nodes];
+  while (stack.length) {
+    const n = stack.pop();
+    const end = n.timing.from + n.timing.durationInFrames;
+    if (end > max) max = end;
+    if (n.children?.length) stack.push(...n.children);
+  }
+  return max;
+}
 
 // src/core/engine.ts
 var import_bundler = require("@remotion/bundler");
@@ -606,14 +3749,16 @@ var WavesEngine = class {
         onProgress: () => void 0
       });
       const compositionId = validatedIR.video.id ?? "main";
+      const inputProps = options.inputProps ?? {};
       const composition = await (0, import_renderer.selectComposition)({
         serveUrl: bundleLocation,
         id: compositionId,
-        inputProps: {}
+        inputProps
       });
       await (0, import_renderer.renderMedia)({
         composition,
         serveUrl: bundleLocation,
+        inputProps,
         codec: options.codec ?? "h264",
         outputLocation: options.outputPath,
         crf: options.crf ?? null,
@@ -626,11 +3771,75 @@ var WavesEngine = class {
       await import_promises.default.rm(tmpDir, { recursive: true, force: true });
     }
   }
+  async renderStills(ir, options) {
+    if (this.registry !== globalRegistry) {
+      throw new WavesRenderError("WavesEngine currently requires using globalRegistry", {
+        hint: "Use `registerBuiltInComponents()` + `globalRegistry` for both validation and rendering."
+      });
+    }
+    const validationResult = this.validator.validate(ir);
+    if (!validationResult.success) {
+      throw new WavesRenderError("IR validation failed", { errors: validationResult.errors });
+    }
+    const validatedIR = validationResult.data;
+    const requiredTypes = collectComponentTypes(validatedIR);
+    for (const type of requiredTypes) {
+      if (!this.registry.has(type)) {
+        throw new WavesRenderError("Unknown component type", { type });
+      }
+    }
+    const rootDir = options.rootDir ?? process.cwd();
+    const tmpDir = await import_promises.default.mkdtemp(import_node_path.default.join(rootDir, ".waves-tmp-"));
+    const entryPoint = import_node_path.default.join(tmpDir, "entry.tsx");
+    try {
+      await import_promises.default.writeFile(entryPoint, generateEntryPoint(validatedIR, options), "utf-8");
+      await import_promises.default.mkdir(options.outputDir, { recursive: true });
+      const bundleLocation = await (0, import_bundler.bundle)({
+        entryPoint,
+        rootDir,
+        publicDir: options.publicDir ?? null,
+        onProgress: () => void 0
+      });
+      const compositionId = validatedIR.video.id ?? "main";
+      const inputProps = options.inputProps ?? {};
+      const composition = await (0, import_renderer.selectComposition)({
+        serveUrl: bundleLocation,
+        id: compositionId,
+        inputProps
+      });
+      const frames = Array.from(new Set(options.frames)).sort((a, b) => a - b);
+      const written = [];
+      for (const frame of frames) {
+        const clamped = Math.max(0, Math.min(composition.durationInFrames - 1, Math.floor(frame)));
+        const imageFormat = options.imageFormat ?? "png";
+        const filename = `${compositionId}-frame-${String(clamped).padStart(6, "0")}.${imageFormat}`;
+        const outPath = import_node_path.default.join(options.outputDir, filename);
+        const stillOptions = {
+          composition,
+          serveUrl: bundleLocation,
+          inputProps,
+          frame: clamped,
+          output: outPath,
+          imageFormat,
+          scale: options.scale ?? 1,
+          overwrite: true,
+          ...imageFormat === "jpeg" ? { jpegQuality: options.jpegQuality ?? 80 } : {}
+        };
+        await (0, import_renderer.renderStill)(stillOptions);
+        written.push(outPath);
+      }
+      return written;
+    } catch (error) {
+      throw new WavesRenderError("Rendering failed", { originalError: error });
+    } finally {
+      await import_promises.default.rm(tmpDir, { recursive: true, force: true });
+    }
+  }
 };
 function collectComponentTypes(ir) {
   const types = /* @__PURE__ */ new Set();
-  for (const scene of ir.scenes) {
-    walkComponent(scene, types);
+  for (const node of ir.timeline) {
+    walkComponent(node, types);
   }
   return types;
 }
@@ -660,8 +3869,10 @@ registerBuiltInComponents();
 const ir = ${JSON.stringify(ir, null, 2)};
 const compositionId = ${JSON.stringify(compositionId)};
 
-const Root = () => {
-  return <WavesComposition ir={ir} registry={globalRegistry} />;
+const Root = (props) => {
+  const debugBounds = Boolean(props?.__wavesDebugBounds);
+  const debugLabels = Boolean(props?.__wavesDebugLabels);
+  return <WavesComposition ir={ir} registry={globalRegistry} debug={{ bounds: debugBounds, labels: debugLabels }} />;
 };
 
 export const RemotionRoot = () => {
@@ -708,7 +3919,7 @@ function parseArgs(argv) {
       const hasInlineValue = eq >= 0;
       const inlineValue = hasInlineValue ? arg.slice(eq + 1) : void 0;
       const next = argv[i + 1];
-      const isBoolean = key === "help" || key === "pretty";
+      const isBoolean = key === "help" || key === "pretty" || key === "includeInternal" || key === "debugBounds" || key === "debugLabels";
       if (isBoolean) {
         flags[key] = true;
         continue;
@@ -747,11 +3958,13 @@ Usage:
   waves <command> [options]
 
 Commands:
+  catalog     Print the built-in component catalog
   prompt      Print an agent-ready system prompt + schema payload
   schema      Print JSON Schemas for IR/components
   write-ir    Write a starter IR JSON file
   validate    Validate an IR JSON file
   render      Render MP4 from an IR JSON file
+  stills      Render PNG/JPEG/WebP still frames from an IR JSON file
 
 Options:
   -h, --help       Show help
@@ -788,21 +4001,9 @@ async function importRegistrationModules(modules) {
 function stringifyJSON(value, pretty) {
   return JSON.stringify(value, null, pretty ? 2 : 0) + "\n";
 }
-function collectComponentTypes2(ir) {
-  const types = /* @__PURE__ */ new Set();
-  for (const scene of ir.scenes) {
-    walkComponent2(scene, types);
-  }
-  return types;
-}
-function walkComponent2(component, types) {
-  types.add(component.type);
-  const children = component.children;
-  if (children?.length) {
-    for (const child of children) {
-      walkComponent2(child, types);
-    }
-  }
+function parseImageFormat(raw) {
+  if (raw === "png" || raw === "jpeg" || raw === "webp") return raw;
+  return null;
 }
 async function main(argv = process.argv.slice(2)) {
   const parsed = parseArgs(argv);
@@ -831,6 +4032,66 @@ async function main(argv = process.argv.slice(2)) {
     return EXIT_USAGE;
   }
   registerBuiltInComponents();
+  if (parsed.command === "catalog") {
+    const format = (getFlagString(parsed.flags, "format") ?? "text").toLowerCase();
+    const includeInternal = Boolean(parsed.flags.includeInternal);
+    if (format !== "text" && format !== "json") {
+      process.stderr.write(`Invalid --format: ${format} (expected "text" or "json")
+`);
+      return EXIT_USAGE;
+    }
+    const types = includeInternal ? globalRegistry.getTypes().sort() : globalRegistry.getTypesForLLM().sort();
+    const byCategory = {};
+    const items = [];
+    for (const t of types) {
+      const reg = globalRegistry.get(t);
+      if (!reg) continue;
+      const cat = reg.metadata.category;
+      if (!byCategory[cat]) byCategory[cat] = [];
+      byCategory[cat].push(t);
+      items.push({ type: t, kind: reg.metadata.kind, category: cat, description: reg.metadata.description });
+    }
+    if (format === "json") {
+      const payload = { categories: byCategory, items };
+      const json = stringifyJSON(payload, pretty);
+      const writeErr2 = await tryWriteOut(outPath, json);
+      if (writeErr2) {
+        process.stderr.write(`Failed to write ${outPath}: ${writeErr2}
+`);
+        process.stdout.write(json);
+        return EXIT_IO;
+      }
+      process.stdout.write(json);
+      if (outPath) process.stderr.write(`Wrote ${outPath}
+`);
+      return EXIT_OK;
+    }
+    const categories = Object.keys(byCategory).sort();
+    const lines = [];
+    lines.push(`waves catalog (v${__wavesVersion})`);
+    lines.push("");
+    for (const c of categories) {
+      lines.push(`${c}:`);
+      for (const t of byCategory[c].sort()) {
+        lines.push(`- ${t}`);
+      }
+      lines.push("");
+    }
+    const text = lines.join("\n");
+    const writeErr = await tryWriteOut(outPath, text.endsWith("\n") ? text : `${text}
+`);
+    if (writeErr) {
+      process.stderr.write(`Failed to write ${outPath}: ${writeErr}
+`);
+      process.stdout.write(text);
+      return EXIT_IO;
+    }
+    process.stdout.write(text.endsWith("\n") ? text : `${text}
+`);
+    if (outPath) process.stderr.write(`Wrote ${outPath}
+`);
+    return EXIT_OK;
+  }
   if (parsed.command === "prompt") {
     const format = (getFlagString(parsed.flags, "format") ?? "text").toLowerCase();
     const maxCharsRaw = getFlagString(parsed.flags, "maxChars");
@@ -874,12 +4135,12 @@ async function main(argv = process.argv.slice(2)) {
     const kind = (getFlagString(parsed.flags, "kind") ?? "all").toLowerCase();
     let output;
     if (kind === "video-ir") {
-      output = zodSchemaToJsonSchema(VideoIRSchema);
+      output = zodSchemaToJsonSchema(VideoIRv2AuthoringSchema);
     } else if (kind === "components") {
       output = globalRegistry.getJSONSchemaForLLM();
     } else if (kind === "all") {
       output = {
-        videoIR: zodSchemaToJsonSchema(VideoIRSchema),
+        videoIR: zodSchemaToJsonSchema(VideoIRv2AuthoringSchema),
         components: globalRegistry.getJSONSchemaForLLM()
       };
     } else {
@@ -908,33 +4169,75 @@ async function main(argv = process.argv.slice(2)) {
       return EXIT_USAGE;
     }
     const ir = template === "basic" ? {
-      version: "1.0",
-      video: { id: "main", width: 1920, height: 1080, fps: 30, durationInFrames: 90 },
-      scenes: [
+      version: "2.0",
+      video: { id: "main", width: 1920, height: 1080, fps: 30, durationInFrames: 165 },
+      segments: [
         {
           id: "scene-1",
-          type: "Scene",
-          timing: { from: 0, durationInFrames: 90 },
-          props: { background: { type: "color", value: "#000000" } },
-          children: [
-            {
-              id: "title",
-              type: "Text",
-              timing: { from: 0, durationInFrames: 90 },
-              props: { content: "Hello Waves", fontSize: 72, animation: "fade" }
-            }
-          ]
+          durationInFrames: 90,
+          transitionToNext: { type: "FadeTransition", durationInFrames: 15 },
+          root: {
+            id: "root",
+            type: "Scene",
+            props: { background: { type: "color", value: "#000000" } },
+            children: [
+              {
+                id: "title",
+                type: "SplitText",
+                props: { content: "Waves v0.2.0", fontSize: 96, splitBy: "word", stagger: 3, animation: "slideUp" }
+              },
+              {
+                id: "subtitle",
+                type: "TypewriterText",
+                props: { content: "Composite components + hybrid IR", fontSize: 48, position: "bottom", speed: 1.5 }
+              },
+              {
+                id: "wm",
+                type: "Watermark",
+                props: { type: "text", text: "@depths.ai", position: "bottomRight", opacity: 0.4, size: 60 }
+              }
+            ]
+          }
+        },
+        {
+          id: "scene-2",
+          durationInFrames: 90,
+          root: {
+            id: "root-2",
+            type: "Scene",
+            props: { background: { type: "color", value: "#0B1220" } },
+            children: [
+              {
+                id: "lower-third",
+                type: "ThirdLowerBanner",
+                props: { name: "Waves", title: "v0.2.0 \u2014 Composites + transitions", accentColor: "#3B82F6" }
+              },
+              {
+                id: "count",
+                type: "AnimatedCounter",
+                props: { from: 0, to: 35, suffix: " components", fontSize: 96, color: "#FFFFFF" }
+              },
+              {
+                id: "wm-2",
+                type: "Watermark",
+                props: { type: "text", text: "waves", position: "topLeft", opacity: 0.25, size: 52 }
+              }
+            ]
+          }
         }
       ]
     } : template === "minimal" ? {
-      version: "1.0",
+      version: "2.0",
       video: { id: "main", width: 1920, height: 1080, fps: 30, durationInFrames: 60 },
-      scenes: [
+      segments: [
         {
           id: "scene-1",
-          type: "Scene",
-          timing: { from: 0, durationInFrames: 60 },
-          props: { background: { type: "color", value: "#000000" } }
+          durationInFrames: 60,
+          root: {
+            id: "root",
+            type: "Scene",
+            props: { background: { type: "color", value: "#000000" } }
+          }
         }
       ]
     } : null;
@@ -943,9 +4246,9 @@ async function main(argv = process.argv.slice(2)) {
 `);
       return EXIT_USAGE;
     }
-    const schemaCheck = VideoIRSchema.safeParse(ir);
+    const schemaCheck = VideoIRv2AuthoringSchema.safeParse(ir);
     if (!schemaCheck.success) {
-      process.stderr.write("Internal error: generated template does not validate against VideoIRSchema\n");
+      process.stderr.write("Internal error: generated template does not validate against VideoIRv2AuthoringSchema\n");
       return EXIT_INTERNAL;
     }
     const json = stringifyJSON(ir, pretty);
@@ -999,20 +4302,9 @@ async function main(argv = process.argv.slice(2)) {
       }
       return EXIT_VALIDATE;
     }
-    const validator = new IRValidator();
+    const validator = new IRValidator(globalRegistry);
     const result = validator.validate(json);
     const errors = result.success ? [] : result.errors;
-    if (result.success) {
-      const types = collectComponentTypes2(result.data);
-      const unknownTypes = [...types].filter((t) => !globalRegistry.has(t)).sort();
-      for (const t of unknownTypes) {
-        errors.push({
-          path: ["components", t],
-          message: `Unknown component type: ${t}`,
-          code: "UNKNOWN_COMPONENT_TYPE"
-        });
-      }
-    }
     const ok = errors.length === 0;
     if (format === "json") {
       process.stdout.write(stringifyJSON(ok ? { success: true } : { success: false, errors }, pretty));
@@ -1062,15 +4354,19 @@ async function main(argv = process.argv.slice(2)) {
     const crfRaw = getFlagString(parsed.flags, "crf");
     const concurrencyRaw = getFlagString(parsed.flags, "concurrency");
     const publicDir = getFlagString(parsed.flags, "publicDir");
+    const debugBounds = Boolean(parsed.flags.debugBounds);
+    const debugLabels = Boolean(parsed.flags.debugLabels);
     const crf = crfRaw ? Number(crfRaw) : void 0;
     const concurrency = concurrencyRaw ? /^[0-9]+$/.test(concurrencyRaw) ? Number(concurrencyRaw) : concurrencyRaw : void 0;
-    const engine = new WavesEngine(globalRegistry, new IRValidator());
+    const engine = new WavesEngine(globalRegistry, new IRValidator(globalRegistry));
     try {
+      const inputProps = debugBounds || debugLabels ? { __wavesDebugBounds: debugBounds, __wavesDebugLabels: debugLabels } : void 0;
       const opts = { outputPath, registrationModules };
       if (publicDir) opts.publicDir = publicDir;
       if (codec) opts.codec = codec;
       if (Number.isFinite(crf ?? Number.NaN)) opts.crf = crf;
       if (concurrency !== void 0) opts.concurrency = concurrency;
+      if (inputProps) opts.inputProps = inputProps;
       await engine.render(json, opts);
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
@@ -1085,6 +4381,84 @@ async function main(argv = process.argv.slice(2)) {
 `);
     return EXIT_OK;
   }
+  if (parsed.command === "stills") {
+    const inputPath = getFlagString(parsed.flags, "in");
+    const outDir = getFlagString(parsed.flags, "outDir") ?? getFlagString(parsed.flags, "out");
+    if (!inputPath) {
+      process.stderr.write("Missing required --in <path>\n");
+      return EXIT_USAGE;
+    }
+    if (!outDir) {
+      process.stderr.write("Missing required --outDir <dir>\n");
+      return EXIT_USAGE;
+    }
+    let raw;
+    try {
+      raw = await import_promises2.default.readFile(inputPath, "utf-8");
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      process.stderr.write(`Failed to read ${inputPath}: ${message}
+`);
+      return EXIT_IO;
+    }
+    let json;
+    try {
+      json = JSON.parse(raw);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      process.stderr.write(`Invalid JSON: ${message}
+`);
+      return EXIT_VALIDATE;
+    }
+    const framesRaw = getFlagString(parsed.flags, "frames") ?? "0";
+    const frames = framesRaw.split(/[,\s]+/g).map((v) => v.trim()).filter(Boolean).map((v) => Number(v)).filter((n) => Number.isFinite(n));
+    if (frames.length === 0) {
+      process.stderr.write('Invalid --frames (expected comma-separated frame numbers, e.g. "0,30,60")\n');
+      return EXIT_USAGE;
+    }
+    const imageFormatRaw = (getFlagString(parsed.flags, "imageFormat") ?? "png").toLowerCase();
+    const imageFormat = parseImageFormat(imageFormatRaw);
+    if (!imageFormat) {
+      process.stderr.write(`Invalid --imageFormat: ${imageFormatRaw} (expected png|jpeg|webp)
+`);
+      return EXIT_USAGE;
+    }
+    const scaleRaw = getFlagString(parsed.flags, "scale");
+    const jpegQualityRaw = getFlagString(parsed.flags, "jpegQuality");
+    const publicDir = getFlagString(parsed.flags, "publicDir");
+    const debugBounds = Boolean(parsed.flags.debugBounds);
+    const debugLabels = Boolean(parsed.flags.debugLabels);
+    const scale = scaleRaw ? Number(scaleRaw) : void 0;
+    const jpegQuality = jpegQualityRaw ? Number(jpegQualityRaw) : void 0;
+    const engine = new WavesEngine(globalRegistry, new IRValidator(globalRegistry));
+    try {
+      const inputProps = debugBounds || debugLabels ? { __wavesDebugBounds: debugBounds, __wavesDebugLabels: debugLabels } : void 0;
+      const opts = {
+        outputDir: outDir,
+        frames,
+        imageFormat,
+        registrationModules
+      };
+      if (publicDir) opts.publicDir = publicDir;
+      if (Number.isFinite(scale ?? Number.NaN)) opts.scale = scale;
+      if (Number.isFinite(jpegQuality ?? Number.NaN)) opts.jpegQuality = jpegQuality;
+      if (inputProps) opts.inputProps = inputProps;
+      const written = await engine.renderStills(json, opts);
+      for (const p of written) {
+        process.stderr.write(`Wrote ${p}
+`);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      const context = err instanceof WavesRenderError ? err.context : void 0;
+      const payload = context ? stringifyJSON({ error: message, context }, pretty) : null;
+      process.stderr.write(`stills failed: ${message}
+`);
+      if (payload) process.stderr.write(payload);
+      return EXIT_RENDER;
+    }
+    return EXIT_OK;
+  }
   process.stderr.write(`Unknown command: ${parsed.command}
 `);
   process.stderr.write(`Run: waves --help