@depths/waves 0.1.0 → 0.3.0

package/dist/chunk-YYS6AVTN.mjs

@@ -0,0 +1,3346 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/utils/json-schema.ts
+import { z } from "zod";
+function zodSchemaToJsonSchema(schema) {
+  return z.toJSONSchema(schema);
+}
+
+// src/ir/schema.ts
+import { z as z2 } from "zod";
+var TimingSpecSchema = z2.object({
+  from: z2.number().int().min(0).describe("Start frame (0-indexed)"),
+  durationInFrames: z2.number().int().positive().describe("Duration in frames")
+});
+var AssetPathSchema = z2.string().refine(
+  (path) => path.startsWith("/") || path.startsWith("http://") || path.startsWith("https://"),
+  "Asset path must be absolute (starting with /) or a full URL"
+).describe("Path to asset file, either absolute path or URL");
+var BackgroundSpecSchema = z2.discriminatedUnion("type", [
+  z2.object({
+    type: z2.literal("color"),
+    value: z2.string().regex(/^#[0-9A-Fa-f]{6}$/, "Must be valid hex color")
+  }),
+  z2.object({
+    type: z2.literal("image"),
+    value: AssetPathSchema
+  }),
+  z2.object({
+    type: z2.literal("video"),
+    value: AssetPathSchema
+  })
+]);
+var VideoConfigSchema = z2.object({
+  id: z2.string().default("main"),
+  width: z2.number().int().min(360).max(7680),
+  height: z2.number().int().min(360).max(4320),
+  fps: z2.number().int().min(1).max(120).default(30),
+  durationInFrames: z2.number().int().positive()
+});
+var AudioSpecSchema = z2.object({
+  background: AssetPathSchema.optional(),
+  volume: z2.number().min(0).max(1).default(0.5)
+}).optional();
+var TransitionSpecSchema = z2.object({
+  type: z2.string().min(1),
+  durationInFrames: z2.number().int().positive(),
+  props: z2.record(z2.string(), z2.unknown()).optional()
+});
+var ComponentNodeSchema = z2.lazy(
+  () => z2.object({
+    id: z2.string().min(1).max(100).describe("Unique component instance ID"),
+    type: z2.string().min(1).describe("Registered component type identifier"),
+    timing: TimingSpecSchema.optional().describe("Optional timing (frames)"),
+    props: z2.record(z2.string(), z2.unknown()).optional().describe("Component props object"),
+    metadata: z2.record(z2.string(), z2.unknown()).optional().describe("Optional metadata"),
+    children: z2.array(ComponentNodeSchema).optional().describe("Nested children nodes")
+  })
+);
+var SegmentSchema = z2.object({
+  id: z2.string().min(1).max(100),
+  durationInFrames: z2.number().int().positive(),
+  root: ComponentNodeSchema,
+  transitionToNext: TransitionSpecSchema.optional()
+});
+var VideoIRv2Schema = z2.object({
+  version: z2.literal("2.0").describe("IR schema version"),
+  video: VideoConfigSchema,
+  audio: AudioSpecSchema,
+  segments: z2.array(SegmentSchema).min(1).optional(),
+  timeline: z2.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: z2.ZodIssueCode.custom,
+      message: 'Exactly one of "segments" or "timeline" must be provided',
+      path: []
+    });
+  }
+});
+var VideoIRv2AuthoringSchema = z2.object({
+  version: z2.literal("2.0").describe("IR schema version"),
+  video: VideoConfigSchema,
+  audio: AudioSpecSchema,
+  segments: z2.array(SegmentSchema).min(1),
+  timeline: z2.never().optional()
+}).describe("Preferred authoring format: sequential segments with optional transitions");
+var VideoIRSchema = VideoIRv2Schema;
+
+// src/core/registry.ts
+var ComponentRegistry = class {
+  components = /* @__PURE__ */ new Map();
+  register(registration) {
+    if (this.components.has(registration.type)) {
+      throw new Error(`Component type "${registration.type}" is already registered`);
+    }
+    this.components.set(registration.type, registration);
+  }
+  get(type) {
+    return this.components.get(type);
+  }
+  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(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
+      };
+    }
+    return schemas;
+  }
+  validateProps(type, props) {
+    const registration = this.components.get(type);
+    if (!registration) {
+      throw new Error(`Unknown component type: ${type}`);
+    }
+    const result = registration.propsSchema.safeParse(props);
+    if (result.success) {
+      return { success: true, data: result.data };
+    }
+    return { success: false, error: result.error };
+  }
+};
+var globalRegistry = new ComponentRegistry();
+
+// src/components/primitives/Audio.tsx
+import { Audio as RemotionAudio, interpolate, staticFile, useCurrentFrame } from "remotion";
+import { z as z3 } from "zod";
+
+// src/utils/assets.ts
+function isRemoteAssetPath(assetPath) {
+  return assetPath.startsWith("http://") || assetPath.startsWith("https://");
+}
+function staticFileInputFromAssetPath(assetPath) {
+  if (isRemoteAssetPath(assetPath)) {
+    throw new Error("Remote asset paths must not be passed to staticFile()");
+  }
+  return assetPath.startsWith("/") ? assetPath.slice(1) : assetPath;
+}
+
+// src/components/primitives/Audio.tsx
+import { jsx } from "react/jsx-runtime";
+var AudioPropsSchema = z3.object({
+  src: z3.string(),
+  volume: z3.number().min(0).max(1).default(1),
+  startFrom: z3.number().int().min(0).default(0),
+  fadeIn: z3.number().int().min(0).default(0),
+  fadeOut: z3.number().int().min(0).default(0)
+});
+var Audio = ({
+  src,
+  volume,
+  startFrom,
+  fadeIn,
+  fadeOut,
+  __wavesDurationInFrames
+}) => {
+  const frame = useCurrentFrame();
+  const durationInFrames = __wavesDurationInFrames ?? Number.POSITIVE_INFINITY;
+  const fadeInFactor = fadeIn > 0 ? interpolate(frame, [0, fadeIn], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  }) : 1;
+  const fadeOutStart = durationInFrames - fadeOut;
+  const fadeOutFactor = fadeOut > 0 ? interpolate(frame, [fadeOutStart, durationInFrames], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  }) : 1;
+  const resolvedSrc = isRemoteAssetPath(src) ? src : staticFile(staticFileInputFromAssetPath(src));
+  return /* @__PURE__ */ jsx(
+    RemotionAudio,
+    {
+      src: resolvedSrc,
+      trimBefore: startFrom,
+      volume: volume * fadeInFactor * fadeOutFactor
+    }
+  );
+};
+var AudioComponentMetadata = {
+  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/Box.tsx
+import React from "react";
+import { z as z4 } from "zod";
+
+// src/remotion/Fill.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Fill = ({ style, children }) => {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        boxSizing: "border-box",
+        ...style ?? {}
+      },
+      children
+    }
+  );
+};
+
+// src/components/primitives/Box.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var BoxPropsSchema = z4.object({
+  width: z4.number().positive().optional().describe("Width in pixels (optional)"),
+  height: z4.number().positive().optional().describe("Height in pixels (optional)"),
+  padding: z4.number().min(0).default(0).describe("Padding in pixels"),
+  backgroundColor: z4.string().optional().describe("CSS color (e.g. #RRGGBB, rgba())"),
+  borderRadius: z4.number().min(0).default(0).describe("Border radius in pixels"),
+  opacity: z4.number().min(0).max(1).default(1).describe("Opacity 0..1")
+});
+var Box = ({ width, height, padding, backgroundColor, borderRadius, opacity, children }) => {
+  const layers = React.Children.toArray(children);
+  return /* @__PURE__ */ jsx3(
+    Fill,
+    {
+      style: {
+        width,
+        height,
+        padding,
+        backgroundColor,
+        borderRadius,
+        opacity
+      },
+      children: layers.map((child, i) => /* @__PURE__ */ jsx3("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
+import React2 from "react";
+import { z as z5 } from "zod";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var FramePropsSchema = z5.object({
+  x: z5.number().default(0).describe("Left offset in pixels"),
+  y: z5.number().default(0).describe("Top offset in pixels"),
+  width: z5.number().positive().optional().describe("Width in pixels (optional)"),
+  height: z5.number().positive().optional().describe("Height in pixels (optional)"),
+  padding: z5.number().min(0).default(0).describe("Padding in pixels"),
+  backgroundColor: z5.string().optional().describe("CSS color (e.g. #RRGGBB, rgba())"),
+  borderRadius: z5.number().min(0).default(0).describe("Border radius in pixels"),
+  opacity: z5.number().min(0).max(1).default(1).describe("Opacity 0..1")
+});
+var Frame = ({
+  x,
+  y,
+  width,
+  height,
+  padding,
+  backgroundColor,
+  borderRadius,
+  opacity,
+  children
+}) => {
+  const layers = React2.Children.toArray(children);
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: x,
+        top: y,
+        width,
+        height,
+        padding,
+        backgroundColor,
+        borderRadius,
+        opacity,
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ jsx4(Fill, { children: layers.map((child, i) => /* @__PURE__ */ jsx4("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
+import { z as z6 } from "zod";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var GridPropsSchema = z6.object({
+  columns: z6.number().int().min(1).max(12).default(2),
+  rows: z6.number().int().min(1).max(12).default(1),
+  gap: z6.number().min(0).default(24),
+  padding: z6.number().min(0).default(0),
+  align: z6.enum(["start", "center", "end", "stretch"]).default("stretch"),
+  justify: z6.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__ */ jsx5(
+    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
+import { Img, staticFile as staticFile2 } from "remotion";
+import { z as z7 } from "zod";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ImagePropsSchema = z7.object({
+  src: z7.string().min(1),
+  fit: z7.enum(["cover", "contain"]).default("cover"),
+  borderRadius: z7.number().min(0).default(0),
+  opacity: z7.number().min(0).max(1).default(1)
+});
+var resolveAsset = (value) => isRemoteAssetPath(value) ? value : staticFile2(staticFileInputFromAssetPath(value));
+var Image = ({ src, fit, borderRadius, opacity }) => {
+  return /* @__PURE__ */ jsx6(Fill, { style: { opacity }, children: /* @__PURE__ */ jsx6(
+    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
+import React3 from "react";
+import { z as z8 } from "zod";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var LayerPropsSchema = z8.object({
+  zIndex: z8.number().int().default(0).describe("Higher zIndex renders on top"),
+  inset: z8.number().min(0).default(0).describe("Inset from all sides in pixels"),
+  opacity: z8.number().min(0).max(1).default(1),
+  pointerEvents: z8.enum(["none", "auto"]).default("none")
+});
+var Layer = ({ zIndex, inset, opacity, pointerEvents, children }) => {
+  const layers = React3.Children.toArray(children);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: inset,
+        right: inset,
+        top: inset,
+        bottom: inset,
+        zIndex,
+        opacity,
+        pointerEvents,
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ jsx7(Fill, { children: layers.map((child, i) => /* @__PURE__ */ jsx7("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
+import { z as z9 } from "zod";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var LayersPropsSchema = z9.object({
+  overflow: z9.enum(["visible", "hidden"]).default("visible").describe("Clip layers to bounds")
+});
+var Layers = ({ overflow, children }) => {
+  return /* @__PURE__ */ jsx8(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
+import React4 from "react";
+import { AbsoluteFill, Img as Img2, Video, staticFile as staticFile3 } from "remotion";
+import { z as z10 } from "zod";
+import { jsx as jsx9, jsxs } from "react/jsx-runtime";
+var ScenePropsSchema = z10.object({
+  background: BackgroundSpecSchema
+});
+var resolveAsset2 = (value) => {
+  return isRemoteAssetPath(value) ? value : staticFile3(staticFileInputFromAssetPath(value));
+};
+var Scene = ({ background, children }) => {
+  const layers = React4.Children.toArray(children);
+  return /* @__PURE__ */ jsxs(AbsoluteFill, { children: [
+    background.type === "color" ? /* @__PURE__ */ jsx9(AbsoluteFill, { style: { backgroundColor: background.value } }) : background.type === "image" ? /* @__PURE__ */ jsx9(
+      Img2,
+      {
+        src: resolveAsset2(background.value),
+        style: { width: "100%", height: "100%", objectFit: "cover" }
+      }
+    ) : /* @__PURE__ */ jsx9(
+      Video,
+      {
+        src: resolveAsset2(background.value),
+        style: { width: "100%", height: "100%", objectFit: "cover" }
+      }
+    ),
+    /* @__PURE__ */ jsx9(AbsoluteFill, { children: layers.map((child, i) => /* @__PURE__ */ jsx9(AbsoluteFill, { children: child }, i)) })
+  ] });
+};
+var SceneComponentMetadata = {
+  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
+import { AbsoluteFill as AbsoluteFill2, interpolate as interpolate2, useCurrentFrame as useCurrentFrame2 } from "remotion";
+import { z as z11 } from "zod";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var TransitionPropsSchema = z11.object({
+  type: z11.string().min(1),
+  durationInFrames: z11.number().int().positive(),
+  props: z11.record(z11.string(), z11.unknown()).optional()
+});
+var SegmentPropsSchema = z11.object({
+  enterTransition: TransitionPropsSchema.optional(),
+  exitTransition: TransitionPropsSchema.optional()
+});
+function getSlideOptions(raw) {
+  const parsed = z11.object({
+    direction: z11.enum(["left", "right", "up", "down"]).default("left"),
+    distance: z11.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 = z11.object({
+    type: z11.enum(["zoomIn", "zoomOut"]).default("zoomIn")
+  }).safeParse(raw ?? {});
+  if (parsed.success) return parsed.data;
+  return { type: "zoomIn" };
+}
+function getWipeOptions(raw) {
+  const parsed = z11.object({
+    direction: z11.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
+    softEdge: z11.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 = z11.object({
+    direction: z11.enum(["open", "close"]).default("open"),
+    center: z11.object({
+      x: z11.number().min(0).max(1).default(0.5),
+      y: z11.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 = useCurrentFrame2();
+  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 *= interpolate2(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    }
+    if (enterTransition.type === "SlideTransition") {
+      const opts = getSlideOptions(enterTransition.props);
+      const t = interpolate2(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 *= interpolate2(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 = interpolate2(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 = interpolate2(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 = interpolate2(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 *= interpolate2(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    }
+    if (exitTransition.type === "SlideTransition") {
+      const opts = getSlideOptions(exitTransition.props);
+      const t = interpolate2(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 *= interpolate2(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 = interpolate2(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 = interpolate2(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 = interpolate2(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__ */ jsx10(AbsoluteFill2, { 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
+import { z as z12 } from "zod";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var ShapePropsSchema = z12.object({
+  shape: z12.enum(["rect", "circle"]).default("rect"),
+  x: z12.number().default(0),
+  y: z12.number().default(0),
+  width: z12.number().positive().default(100),
+  height: z12.number().positive().default(100),
+  fill: z12.string().default("#FFFFFF"),
+  strokeColor: z12.string().optional(),
+  strokeWidth: z12.number().min(0).default(0),
+  opacity: z12.number().min(0).max(1).default(1)
+});
+var Shape = ({
+  shape,
+  x,
+  y,
+  width,
+  height,
+  fill,
+  strokeColor,
+  strokeWidth,
+  opacity
+}) => {
+  return /* @__PURE__ */ jsx11(
+    "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
+import { z as z13 } from "zod";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var StackPropsSchema = z13.object({
+  direction: z13.enum(["row", "column"]).default("column"),
+  gap: z13.number().min(0).default(24),
+  padding: z13.number().min(0).default(0),
+  align: z13.enum(["start", "center", "end", "stretch"]).default("center"),
+  justify: z13.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__ */ jsx12(
+    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
+import { interpolate as interpolate3, useCurrentFrame as useCurrentFrame3 } from "remotion";
+import { z as z14 } from "zod";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var TextPropsSchema = z14.object({
+  content: z14.string(),
+  fontSize: z14.number().default(48),
+  color: z14.string().default("#FFFFFF"),
+  fontFamily: z14.string().default("Inter"),
+  position: z14.enum(["top", "center", "bottom", "left", "right"]).default("center"),
+  animation: z14.enum(["none", "fade", "slide", "zoom"]).default("fade"),
+  maxWidthPct: z14.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: z14.number().min(0).max(0.25).default(0.06),
+  textAlign: z14.enum(["left", "center", "right"]).default("center")
+});
+var getPositionStyles = (position, safeInsetPct) => {
+  const inset = `${(safeInsetPct * 100).toFixed(2)}%`;
+  const base = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  };
+  switch (position) {
+    case "top":
+      return { ...base, alignItems: "flex-start", paddingTop: inset };
+    case "bottom":
+      return { ...base, alignItems: "flex-end", paddingBottom: inset };
+    case "left":
+      return { ...base, justifyContent: "flex-start", paddingLeft: inset };
+    case "right":
+      return { ...base, justifyContent: "flex-end", paddingRight: inset };
+    default:
+      return base;
+  }
+};
+var getAnimationStyle = (frame, animation) => {
+  const animDuration = 30;
+  switch (animation) {
+    case "fade": {
+      const opacity = interpolate3(frame, [0, animDuration], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      return { opacity };
+    }
+    case "slide": {
+      const translateY = interpolate3(frame, [0, animDuration], [50, 0], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      const opacity = interpolate3(frame, [0, animDuration], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      return { transform: `translateY(${translateY}px)`, opacity };
+    }
+    case "zoom": {
+      const scale = interpolate3(frame, [0, animDuration], [0.8, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      const opacity = interpolate3(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 = useCurrentFrame3();
+  const positionStyles6 = getPositionStyles(position, safeInsetPct);
+  const animationStyles = getAnimationStyle(frame, animation);
+  return /* @__PURE__ */ jsx13(Fill, { style: positionStyles6, children: /* @__PURE__ */ jsx13(
+    "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
+import { Video as RemotionVideo, staticFile as staticFile4 } from "remotion";
+import { z as z15 } from "zod";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var VideoPropsSchema = z15.object({
+  src: z15.string().min(1),
+  fit: z15.enum(["cover", "contain"]).default("cover"),
+  borderRadius: z15.number().min(0).default(0),
+  opacity: z15.number().min(0).max(1).default(1),
+  muted: z15.boolean().default(true)
+});
+var resolveAsset3 = (value) => isRemoteAssetPath(value) ? value : staticFile4(staticFileInputFromAssetPath(value));
+var Video2 = ({ src, fit, borderRadius, opacity, muted }) => {
+  return /* @__PURE__ */ jsx14(Fill, { style: { opacity }, children: /* @__PURE__ */ jsx14(
+    RemotionVideo,
+    {
+      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
+import { interpolate as interpolate4, spring, useCurrentFrame as useCurrentFrame4, useVideoConfig } from "remotion";
+import { z as z16 } from "zod";
+import { jsx as jsx15, jsxs as jsxs2 } from "react/jsx-runtime";
+var AnimatedCounterPropsSchema = z16.object({
+  from: z16.number().default(0),
+  to: z16.number().default(100),
+  fontSize: z16.number().min(8).max(300).default(96),
+  color: z16.string().default("#FFFFFF"),
+  fontFamily: z16.string().default("Inter"),
+  fontWeight: z16.number().int().min(100).max(900).default(700),
+  icon: z16.string().optional(),
+  suffix: z16.string().optional(),
+  animationType: z16.enum(["spring", "linear"]).default("spring")
+});
+var AnimatedCounter = ({
+  from,
+  to,
+  fontSize,
+  color,
+  fontFamily,
+  fontWeight,
+  icon,
+  suffix,
+  animationType,
+  __wavesDurationInFrames
+}) => {
+  const frame = useCurrentFrame4();
+  const { fps } = useVideoConfig();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const progress = animationType === "spring" ? spring({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } }) : interpolate4(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__ */ jsx15(Fill, { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs2("div", { style: { textAlign: "center" }, children: [
+    icon ? /* @__PURE__ */ jsx15("div", { style: { fontSize: Math.round(fontSize * 0.5), marginBottom: 18 }, children: icon }) : null,
+    /* @__PURE__ */ jsx15("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
+import { spring as spring2, useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig2 } from "remotion";
+import { z as z17 } from "zod";
+import { jsx as jsx16, jsxs as jsxs3 } from "react/jsx-runtime";
+var BarChartPropsSchema = z17.object({
+  data: z17.array(z17.object({
+    label: z17.string().min(1),
+    value: z17.number(),
+    color: z17.string().optional()
+  })).min(2).max(8),
+  orientation: z17.enum(["horizontal", "vertical"]).default("vertical"),
+  showValues: z17.boolean().default(true),
+  showGrid: z17.boolean().default(false),
+  maxValue: z17.number().optional()
+});
+var BarChart = ({ data, orientation, showValues, showGrid, maxValue }) => {
+  const frame = useCurrentFrame5();
+  const { fps } = useVideoConfig2();
+  const max = maxValue ?? Math.max(...data.map((d) => d.value));
+  return /* @__PURE__ */ jsxs3(Fill, { style: { padding: 90, boxSizing: "border-box" }, children: [
+    showGrid ? /* @__PURE__ */ jsx16("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__ */ jsx16(
+      "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 = spring2({ 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__ */ jsxs3("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }, children: [
+            orientation === "vertical" ? /* @__PURE__ */ jsx16("div", { style: { width: "100%", flex: 1, display: "flex", alignItems: "flex-end" }, children: /* @__PURE__ */ jsx16("div", { style: { width: "100%", height: `${Math.round(ratio * 100)}%`, backgroundColor: color, borderRadius: 12 } }) }) : /* @__PURE__ */ jsx16("div", { style: { width: "100%", display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ jsx16("div", { style: { flex: 1, height: 18, backgroundColor: "rgba(255,255,255,0.15)", borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ jsx16("div", { style: { width: `${Math.round(ratio * 100)}%`, height: "100%", backgroundColor: color } }) }) }),
+            /* @__PURE__ */ jsx16("div", { style: { color: "#FFFFFF", fontWeight: 700, fontSize: 22, opacity: 0.9 }, children: d.label }),
+            showValues ? /* @__PURE__ */ jsx16("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
+import { interpolate as interpolate5, spring as spring3, useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig3 } from "remotion";
+import { z as z18 } from "zod";
+import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
+var CardSchema = z18.object({
+  title: z18.string().min(1),
+  content: z18.string().min(1),
+  backgroundColor: z18.string().optional()
+});
+var CardStackPropsSchema = z18.object({
+  cards: z18.array(CardSchema).min(2).max(5),
+  transition: z18.enum(["flip", "slide", "fade"]).default("flip"),
+  displayDuration: z18.number().int().min(30).max(150).default(90)
+});
+var CardStack = ({ cards, transition, displayDuration }) => {
+  const frame = useCurrentFrame6();
+  const { fps } = useVideoConfig3();
+  const index = Math.min(cards.length - 1, Math.floor(frame / displayDuration));
+  const local = frame - index * displayDuration;
+  const p = spring3({ 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" ? interpolate5(p, [0, 1], [80, 0]) : 0;
+  const rotateY = transition === "flip" ? interpolate5(p, [0, 1], [70, 0]) : 0;
+  return /* @__PURE__ */ jsx17(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsxs4(
+    "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__ */ jsx17("div", { style: { fontSize: 56, fontWeight: 900, marginBottom: 22 }, children: card.title }),
+        /* @__PURE__ */ jsx17("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
+import React5 from "react";
+import { interpolate as interpolate6, useCurrentFrame as useCurrentFrame7 } from "remotion";
+import { z as z19 } from "zod";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var CenterSchema = z19.object({
+  x: z19.number().min(0).max(1).default(0.5),
+  y: z19.number().min(0).max(1).default(0.5)
+});
+var CircularRevealPropsSchema = z19.object({
+  durationInFrames: z19.number().int().min(10).max(60).default(30),
+  direction: z19.enum(["open", "close"]).default("open"),
+  center: CenterSchema.optional(),
+  phase: z19.enum(["in", "out", "inOut"]).default("inOut")
+});
+var CircularReveal = ({
+  durationInFrames,
+  direction,
+  center,
+  phase,
+  children,
+  __wavesDurationInFrames
+}) => {
+  const layers = React5.Children.toArray(children);
+  const frame = useCurrentFrame7();
+  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 = interpolate6(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 = interpolate6(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    radiusPct = open ? 150 * (1 - t) : 150 * t;
+  }
+  return /* @__PURE__ */ jsx18(Fill, { style: { clipPath: `circle(${radiusPct}% at ${Math.round(c.x * 100)}% ${Math.round(c.y * 100)}%)` }, children: layers.map((child, i) => /* @__PURE__ */ jsx18("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
+import { interpolate as interpolate7, spring as spring4, useCurrentFrame as useCurrentFrame8, useVideoConfig as useVideoConfig4 } from "remotion";
+import { z as z20 } from "zod";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var CountUpTextPropsSchema = z20.object({
+  from: z20.number().default(0),
+  to: z20.number().default(100),
+  fontSize: z20.number().min(8).max(240).default(72),
+  color: z20.string().default("#FFFFFF"),
+  fontFamily: z20.string().default("Inter"),
+  fontWeight: z20.number().int().min(100).max(900).default(700),
+  position: z20.enum(["top", "center", "bottom"]).default("center"),
+  format: z20.enum(["integer", "decimal", "currency", "percentage"]).default("integer"),
+  decimals: z20.number().int().min(0).max(4).default(0),
+  prefix: z20.string().optional(),
+  suffix: z20.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 = useCurrentFrame8();
+  const { fps } = useVideoConfig4();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const p = spring4({ 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 = interpolate7(frame, [0, Math.min(12, total)], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const label = `${prefix ?? ""}${formatValue(value, format, decimals)}${suffix ?? ""}`;
+  return /* @__PURE__ */ jsx19(Fill, { style: { display: "flex", ...positionStyles(position) }, children: /* @__PURE__ */ jsx19("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
+import React6 from "react";
+import { interpolate as interpolate8, useCurrentFrame as useCurrentFrame9 } from "remotion";
+import { z as z21 } from "zod";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var EasingSchema = z21.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 = z21.object({
+  durationInFrames: z21.number().int().min(10).max(60).default(30),
+  easing: EasingSchema.default("easeInOut"),
+  phase: z21.enum(["in", "out", "inOut"]).default("inOut")
+});
+var FadeTransition = ({
+  durationInFrames,
+  easing,
+  phase,
+  children,
+  __wavesDurationInFrames
+}) => {
+  const layers = React6.Children.toArray(children);
+  const frame = useCurrentFrame9();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(durationInFrames, total);
+  let opacity = 1;
+  if (phase === "in" || phase === "inOut") {
+    const t = interpolate8(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 = interpolate8(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    opacity *= 1 - ease(t, easing);
+  }
+  return /* @__PURE__ */ jsx20(Fill, { style: { opacity }, children: layers.map((child, i) => /* @__PURE__ */ jsx20("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
+import { useCurrentFrame as useCurrentFrame10 } from "remotion";
+import { z as z22 } from "zod";
+import { jsx as jsx21, jsxs as jsxs5 } from "react/jsx-runtime";
+var GlitchTextPropsSchema = z22.object({
+  content: z22.string().max(100),
+  fontSize: z22.number().min(8).max(240).default(72),
+  color: z22.string().default("#FFFFFF"),
+  fontFamily: z22.string().default("monospace"),
+  position: z22.enum(["top", "center", "bottom"]).default("center"),
+  intensity: z22.number().int().min(1).max(10).default(5),
+  glitchDuration: z22.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 = useCurrentFrame10();
+  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__ */ jsx21(Fill, { style: { display: "flex", ...positionStyles2(position) }, children: /* @__PURE__ */ jsxs5("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx21("div", { style: { ...baseStyle, color, transform: `translate(${jitter}px, ${jitterY}px)` }, children: content }),
+    /* @__PURE__ */ jsx21("div", { style: { ...baseStyle, color: "#FF3B30", transform: `translate(${jitter + 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content }),
+    /* @__PURE__ */ jsx21("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
+import { z as z23 } from "zod";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var GridLayoutPropsSchema = z23.object({
+  columns: z23.number().int().min(1).max(4).default(2),
+  rows: z23.number().int().min(1).max(4).default(2),
+  gap: z23.number().min(0).max(50).default(20),
+  padding: z23.number().min(0).max(100).default(40)
+});
+var GridLayout = ({ columns, rows, gap, padding, children }) => {
+  return /* @__PURE__ */ jsx22(Fill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ jsx22(
+    "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
+import { Img as Img3, spring as spring5, staticFile as staticFile5, useCurrentFrame as useCurrentFrame11, useVideoConfig as useVideoConfig5 } from "remotion";
+import { z as z24 } from "zod";
+import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
+var ImageCollagePropsSchema = z24.object({
+  images: z24.array(z24.object({ src: z24.string().min(1), caption: z24.string().optional() })).min(2).max(9),
+  layout: z24.enum(["grid", "stack", "scatter"]).default("grid"),
+  stagger: z24.number().int().min(2).max(10).default(5)
+});
+var resolveAsset4 = (value) => isRemoteAssetPath(value) ? value : staticFile5(staticFileInputFromAssetPath(value));
+var ImageCollage = ({ images, layout, stagger }) => {
+  const frame = useCurrentFrame11();
+  const { fps } = useVideoConfig5();
+  const n = images.length;
+  const cols = Math.ceil(Math.sqrt(n));
+  const rows = Math.ceil(n / cols);
+  if (layout === "grid") {
+    return /* @__PURE__ */ jsx23(Fill, { style: { padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ jsx23(
+      "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 = spring5({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+          return /* @__PURE__ */ jsxs6("div", { style: { position: "relative", overflow: "hidden", borderRadius: 18, opacity: p, transform: `scale(${0.92 + 0.08 * p})` }, children: [
+            /* @__PURE__ */ jsx23(Img3, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+            img.caption ? /* @__PURE__ */ jsx23("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__ */ jsx23(Fill, { children: images.map((img, i) => {
+    const p = spring5({ 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__ */ jsx23(
+      "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__ */ jsx23(Img3, { 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
+import { Img as Img4, interpolate as interpolate9, staticFile as staticFile6, useCurrentFrame as useCurrentFrame12 } from "remotion";
+import { z as z25 } from "zod";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var ImageRevealPropsSchema = z25.object({
+  src: z25.string().min(1),
+  direction: z25.enum(["left", "right", "top", "bottom", "center"]).default("left"),
+  revealType: z25.enum(["wipe", "expand", "iris"]).default("wipe")
+});
+var resolveAsset5 = (value) => isRemoteAssetPath(value) ? value : staticFile6(staticFileInputFromAssetPath(value));
+var ImageReveal = ({ src, direction, revealType, __wavesDurationInFrames }) => {
+  const frame = useCurrentFrame12();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(30, total);
+  const p = interpolate9(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__ */ jsx24(Fill, { children: /* @__PURE__ */ jsx24(
+    Img4,
+    {
+      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
+import { Img as Img5, staticFile as staticFile7, useCurrentFrame as useCurrentFrame13, useVideoConfig as useVideoConfig6 } from "remotion";
+import { z as z26 } from "zod";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var ImageSequencePropsSchema = z26.object({
+  basePath: z26.string().min(1),
+  frameCount: z26.number().int().positive(),
+  filePattern: z26.string().default("frame_{frame}.png"),
+  fps: z26.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 : staticFile7(staticFileInputFromAssetPath(value));
+var ImageSequence = ({ basePath, frameCount, filePattern, fps }) => {
+  const frame = useCurrentFrame13();
+  const { fps: compFps } = useVideoConfig6();
+  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__ */ jsx25(Fill, { children: /* @__PURE__ */ jsx25(Img5, { 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
+import { Img as Img6, interpolate as interpolate10, staticFile as staticFile8, useCurrentFrame as useCurrentFrame14 } from "remotion";
+import { z as z27 } from "zod";
+import { jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
+var CaptionStyleSchema = z27.object({
+  fontSize: z27.number().min(12).max(80).default(32),
+  color: z27.string().default("#FFFFFF"),
+  backgroundColor: z27.string().default("rgba(0,0,0,0.7)")
+});
+var ImageWithCaptionPropsSchema = z27.object({
+  src: z27.string().min(1),
+  caption: z27.string().max(200),
+  captionPosition: z27.enum(["top", "bottom", "overlay"]).default("bottom"),
+  captionStyle: CaptionStyleSchema.optional()
+});
+var resolveAsset7 = (value) => isRemoteAssetPath(value) ? value : staticFile8(staticFileInputFromAssetPath(value));
+var ImageWithCaption = ({ src, caption, captionPosition, captionStyle }) => {
+  const frame = useCurrentFrame14();
+  const p = interpolate10(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__ */ jsx26(
+    "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__ */ jsxs7(Fill, { style: { display: "flex", flexDirection: "column" }, children: [
+      captionPosition === "top" ? captionBox : null,
+      /* @__PURE__ */ jsx26("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx26(Img6, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) }),
+      captionPosition === "bottom" ? captionBox : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7(Fill, { children: [
+    /* @__PURE__ */ jsx26(Img6, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+    /* @__PURE__ */ jsx26("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
+import { Audio as RemotionAudio2, Img as Img7, interpolate as interpolate11, staticFile as staticFile9, useCurrentFrame as useCurrentFrame15 } from "remotion";
+import { z as z28 } from "zod";
+import { jsx as jsx27, jsxs as jsxs8 } from "react/jsx-runtime";
+var InstagramStoryPropsSchema = z28.object({
+  backgroundImage: z28.string().optional(),
+  backgroundColor: z28.string().default("#000000"),
+  profilePic: z28.string().optional(),
+  username: z28.string().optional(),
+  text: z28.string().max(100).optional(),
+  sticker: z28.enum(["none", "poll", "question", "countdown"]).default("none"),
+  musicTrack: z28.string().optional()
+});
+var resolveAsset8 = (value) => isRemoteAssetPath(value) ? value : staticFile9(staticFileInputFromAssetPath(value));
+var InstagramStory = ({
+  backgroundImage,
+  backgroundColor,
+  profilePic,
+  username,
+  text,
+  sticker,
+  musicTrack
+}) => {
+  const frame = useCurrentFrame15();
+  const fade = interpolate11(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ jsxs8(Fill, { style: { backgroundColor }, children: [
+    musicTrack ? /* @__PURE__ */ jsx27(RemotionAudio2, { src: resolveAsset8(musicTrack), volume: 0.6 }) : null,
+    backgroundImage ? /* @__PURE__ */ jsx27(Img7, { src: resolveAsset8(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover", opacity: fade } }) : null,
+    /* @__PURE__ */ jsxs8(Fill, { style: { padding: 60, boxSizing: "border-box" }, children: [
+      profilePic || username ? /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 18 }, children: [
+        profilePic ? /* @__PURE__ */ jsx27(Img7, { src: resolveAsset8(profilePic), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ jsx27("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "rgba(255,255,255,0.2)" } }),
+        /* @__PURE__ */ jsx27("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 34 }, children: username ?? "username" })
+      ] }) : null,
+      text ? /* @__PURE__ */ jsx27(
+        "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__ */ jsx27(
+        "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
+import { Audio as RemotionAudio3, Img as Img8, interpolate as interpolate12, spring as spring6, staticFile as staticFile10, useCurrentFrame as useCurrentFrame16, useVideoConfig as useVideoConfig7 } from "remotion";
+import { z as z29 } from "zod";
+import { jsx as jsx28, jsxs as jsxs9 } from "react/jsx-runtime";
+var IntroScenePropsSchema = z29.object({
+  logoSrc: z29.string().min(1),
+  companyName: z29.string().min(1),
+  tagline: z29.string().optional(),
+  backgroundColor: z29.string().default("#000000"),
+  primaryColor: z29.string().default("#FFFFFF"),
+  musicTrack: z29.string().optional()
+});
+var resolveAsset9 = (value) => isRemoteAssetPath(value) ? value : staticFile10(staticFileInputFromAssetPath(value));
+var IntroScene = ({
+  logoSrc,
+  companyName,
+  tagline,
+  backgroundColor,
+  primaryColor,
+  musicTrack,
+  __wavesDurationInFrames
+}) => {
+  const frame = useCurrentFrame16();
+  const { fps } = useVideoConfig7();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const logoP = spring6({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const nameOpacity = interpolate12(frame, [20, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const taglineY = interpolate12(frame, [50, 80], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const outroFade = interpolate12(frame, [Math.max(0, total - 20), total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ jsxs9(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+    musicTrack ? /* @__PURE__ */ jsx28(RemotionAudio3, { src: resolveAsset9(musicTrack), volume: 0.7 }) : null,
+    /* @__PURE__ */ jsxs9("div", { style: { textAlign: "center", opacity: outroFade }, children: [
+      /* @__PURE__ */ jsx28(
+        Img8,
+        {
+          src: resolveAsset9(logoSrc),
+          style: { width: 280, height: 280, objectFit: "contain", transform: `scale(${logoP})` }
+        }
+      ),
+      /* @__PURE__ */ jsx28("div", { style: { marginTop: 24, color: primaryColor, fontSize: 64, fontWeight: 900, opacity: nameOpacity }, children: companyName }),
+      tagline ? /* @__PURE__ */ jsx28(
+        "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
+import { Img as Img9, interpolate as interpolate13, staticFile as staticFile11, useCurrentFrame as useCurrentFrame17 } from "remotion";
+import { z as z30 } from "zod";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var KenBurnsImagePropsSchema = z30.object({
+  src: z30.string().min(1),
+  startScale: z30.number().min(1).max(2).default(1),
+  endScale: z30.number().min(1).max(2).default(1.2),
+  panDirection: z30.enum(["none", "left", "right", "up", "down"]).default("none"),
+  panAmount: z30.number().min(0).max(100).default(50)
+});
+var resolveAsset10 = (value) => isRemoteAssetPath(value) ? value : staticFile11(staticFileInputFromAssetPath(value));
+var KenBurnsImage = ({
+  src,
+  startScale,
+  endScale,
+  panDirection,
+  panAmount,
+  __wavesDurationInFrames
+}) => {
+  const frame = useCurrentFrame17();
+  const duration = Math.max(1, __wavesDurationInFrames ?? 1);
+  const t = interpolate13(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__ */ jsx29(Fill, { children: /* @__PURE__ */ jsx29(
+    Img9,
+    {
+      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
+import { spring as spring7, useCurrentFrame as useCurrentFrame18, useVideoConfig as useVideoConfig8 } from "remotion";
+import { z as z31 } from "zod";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var WordSchema = z31.object({
+  text: z31.string().min(1),
+  emphasis: z31.enum(["normal", "bold", "giant"]).default("normal")
+});
+var KineticTypographyPropsSchema = z31.object({
+  words: z31.array(WordSchema).min(1).max(50),
+  fontSize: z31.number().min(12).max(140).default(48),
+  color: z31.string().default("#FFFFFF"),
+  fontFamily: z31.string().default("Inter"),
+  timing: z31.array(z31.number().int().min(0)).min(1).describe("Frame timing for each word"),
+  transition: z31.enum(["fade", "scale", "slideLeft", "slideRight"]).default("scale")
+});
+var KineticTypography = ({
+  words,
+  fontSize,
+  color,
+  fontFamily,
+  timing,
+  transition
+}) => {
+  const frame = useCurrentFrame18();
+  const { fps } = useVideoConfig8();
+  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 = spring7({ 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__ */ jsx30(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx30(
+    "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
+import { interpolate as interpolate14, useCurrentFrame as useCurrentFrame19 } from "remotion";
+import { z as z32 } from "zod";
+import { jsx as jsx31, jsxs as jsxs10 } from "react/jsx-runtime";
+var PointSchema = z32.object({ x: z32.number(), y: z32.number() });
+var LineGraphPropsSchema = z32.object({
+  data: z32.array(PointSchema).min(2).max(50),
+  color: z32.string().default("#00FF00"),
+  strokeWidth: z32.number().min(1).max(10).default(3),
+  showDots: z32.boolean().default(true),
+  fillArea: z32.boolean().default(false),
+  animate: z32.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 = useCurrentFrame19();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const progress = interpolate14(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__ */ jsx31(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsxs10("svg", { viewBox: `0 0 ${w} ${h}`, style: { width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ jsx31("defs", { children: /* @__PURE__ */ jsx31("clipPath", { id: "waves-line-reveal", children: /* @__PURE__ */ jsx31("rect", { x: "0", y: "0", width: w * progress, height: h }) }) }),
+    fillArea ? /* @__PURE__ */ jsx31(
+      "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__ */ jsx31(
+      "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__ */ jsx31("g", { clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0, children: pts.map((p, i) => /* @__PURE__ */ jsx31("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
+import { Audio as RemotionAudio4, Img as Img10, spring as spring8, staticFile as staticFile12, useCurrentFrame as useCurrentFrame20, useVideoConfig as useVideoConfig9 } from "remotion";
+import { z as z33 } from "zod";
+import { jsx as jsx32, jsxs as jsxs11 } from "react/jsx-runtime";
+var LogoRevealPropsSchema = z33.object({
+  logoSrc: z33.string().min(1),
+  effect: z33.enum(["fade", "scale", "rotate", "slide"]).default("scale"),
+  backgroundColor: z33.string().default("#000000"),
+  soundEffect: z33.string().optional()
+});
+var resolveAsset11 = (value) => isRemoteAssetPath(value) ? value : staticFile12(staticFileInputFromAssetPath(value));
+var LogoReveal = ({ logoSrc, effect, backgroundColor, soundEffect }) => {
+  const frame = useCurrentFrame20();
+  const { fps } = useVideoConfig9();
+  const p = spring8({ 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__ */ jsxs11(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+    soundEffect ? /* @__PURE__ */ jsx32(RemotionAudio4, { src: resolveAsset11(soundEffect), volume: 1 }) : null,
+    /* @__PURE__ */ jsx32(
+      Img10,
+      {
+        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
+import { Img as Img11, spring as spring9, staticFile as staticFile13, useCurrentFrame as useCurrentFrame21, useVideoConfig as useVideoConfig10 } from "remotion";
+import { z as z34 } from "zod";
+import { jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
+var CtaSchema = z34.object({ text: z34.string().min(1), icon: z34.string().optional() });
+var HandleSchema = z34.object({
+  platform: z34.enum(["twitter", "instagram", "youtube", "linkedin"]),
+  handle: z34.string().min(1)
+});
+var OutroScenePropsSchema = z34.object({
+  logoSrc: z34.string().min(1),
+  message: z34.string().default("Thank You"),
+  ctaButtons: z34.array(CtaSchema).max(3).optional(),
+  socialHandles: z34.array(HandleSchema).max(4).optional(),
+  backgroundColor: z34.string().default("#000000")
+});
+var resolveAsset12 = (value) => isRemoteAssetPath(value) ? value : staticFile13(staticFileInputFromAssetPath(value));
+var OutroScene = ({ logoSrc, message, ctaButtons, socialHandles, backgroundColor }) => {
+  const frame = useCurrentFrame21();
+  const { fps } = useVideoConfig10();
+  const logoP = spring9({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const msgP = spring9({ frame: frame - 18, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const ctaP = spring9({ frame: frame - 40, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  return /* @__PURE__ */ jsx33(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center", padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ jsxs12("div", { style: { textAlign: "center" }, children: [
+    /* @__PURE__ */ jsx33(Img11, { src: resolveAsset12(logoSrc), style: { width: 220, height: 220, objectFit: "contain", transform: `scale(${logoP})` } }),
+    /* @__PURE__ */ jsx33("div", { style: { marginTop: 24, color: "#FFFFFF", fontSize: 72, fontWeight: 1e3, opacity: msgP }, children: message }),
+    ctaButtons?.length ? /* @__PURE__ */ jsx33("div", { style: { marginTop: 34, display: "flex", gap: 18, justifyContent: "center", opacity: ctaP }, children: ctaButtons.map((b, i) => /* @__PURE__ */ jsxs12(
+      "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__ */ jsx33("div", { style: { marginTop: 50, display: "flex", flexDirection: "column", gap: 10, opacity: ctaP }, children: socialHandles.map((h, i) => /* @__PURE__ */ jsxs12("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
+import { interpolate as interpolate15, useCurrentFrame as useCurrentFrame22 } from "remotion";
+import { z as z35 } from "zod";
+import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
+var OutlineTextPropsSchema = z35.object({
+  content: z35.string().max(50),
+  fontSize: z35.number().min(8).max(240).default(96),
+  outlineColor: z35.string().default("#FFFFFF"),
+  fillColor: z35.string().default("#000000"),
+  fontFamily: z35.string().default("Inter"),
+  fontWeight: z35.number().int().min(100).max(900).default(800),
+  position: z35.enum(["top", "center", "bottom"]).default("center"),
+  animation: z35.enum(["draw", "fill"]).default("draw"),
+  strokeWidth: z35.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 = useCurrentFrame22();
+  const t = interpolate15(frame, [0, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const strokeOpacity = animation === "draw" ? t : 1;
+  const fillOpacity = animation === "fill" ? t : 0;
+  return /* @__PURE__ */ jsxs13(Fill, { style: { display: "flex", ...positionStyles3(position) }, children: [
+    /* @__PURE__ */ jsx34(
+      "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__ */ jsx34(
+      "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
+import { interpolate as interpolate16, useCurrentFrame as useCurrentFrame23 } from "remotion";
+import { z as z36 } from "zod";
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+var ProgressBarPropsSchema = z36.object({
+  label: z36.string().optional(),
+  color: z36.string().default("#00FF00"),
+  backgroundColor: z36.string().default("rgba(255,255,255,0.2)"),
+  height: z36.number().min(5).max(50).default(10),
+  position: z36.enum(["top", "bottom"]).default("bottom"),
+  showPercentage: z36.boolean().default(true)
+});
+var ProgressBar = ({
+  label,
+  color,
+  backgroundColor,
+  height,
+  position,
+  showPercentage,
+  __wavesDurationInFrames
+}) => {
+  const frame = useCurrentFrame23();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const p = interpolate16(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__ */ jsx35(Fill, { children: /* @__PURE__ */ jsxs14("div", { style: { position: "absolute", left: 80, right: 80, ...yStyle }, children: [
+    label || showPercentage ? /* @__PURE__ */ jsxs14("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 10, color: "#FFFFFF", fontWeight: 700 }, children: [
+      /* @__PURE__ */ jsx35("span", { children: label ?? "" }),
+      /* @__PURE__ */ jsx35("span", { children: showPercentage ? `${pct}%` : "" })
+    ] }) : null,
+    /* @__PURE__ */ jsx35("div", { style: { width: "100%", height, backgroundColor, borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ jsx35("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
+import { interpolate as interpolate17, useCurrentFrame as useCurrentFrame24 } from "remotion";
+import { z as z37 } from "zod";
+import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
+var ProgressRingPropsSchema = z37.object({
+  percentage: z37.number().min(0).max(100),
+  size: z37.number().min(100).max(500).default(200),
+  strokeWidth: z37.number().min(5).max(50).default(20),
+  color: z37.string().default("#00FF00"),
+  backgroundColor: z37.string().default("rgba(255,255,255,0.2)"),
+  showLabel: z37.boolean().default(true)
+});
+var ProgressRing = ({
+  percentage,
+  size,
+  strokeWidth,
+  color,
+  backgroundColor,
+  showLabel,
+  __wavesDurationInFrames
+}) => {
+  const frame = useCurrentFrame24();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const p = interpolate17(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__ */ jsxs15(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxs15("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+      /* @__PURE__ */ jsx36(
+        "circle",
+        {
+          cx: size / 2,
+          cy: size / 2,
+          r,
+          stroke: backgroundColor,
+          strokeWidth,
+          fill: "transparent"
+        }
+      ),
+      /* @__PURE__ */ jsx36(
+        "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__ */ jsxs15("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
+import React7 from "react";
+import { interpolate as interpolate18, useCurrentFrame as useCurrentFrame25 } from "remotion";
+import { z as z38 } from "zod";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var SlideTransitionPropsSchema = z38.object({
+  durationInFrames: z38.number().int().min(10).max(60).default(30),
+  direction: z38.enum(["left", "right", "up", "down"]).default("left"),
+  distance: z38.number().int().min(1).max(2e3).default(160),
+  phase: z38.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 = React7.Children.toArray(children);
+  const frame = useCurrentFrame25();
+  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 = interpolate18(frame, [0, d], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const { x, y } = translateFor(direction, distance * t);
+    tx += x;
+    ty += y;
+    opacity *= interpolate18(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  }
+  if (phase === "out" || phase === "inOut") {
+    const start = Math.max(0, total - d);
+    const t = interpolate18(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 *= interpolate18(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  }
+  return /* @__PURE__ */ jsx37(Fill, { style: { opacity, transform: `translate(${tx}px, ${ty}px)` }, children: layers.map((child, i) => /* @__PURE__ */ jsx37("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
+import React8 from "react";
+import { z as z39 } from "zod";
+import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
+var SplitScreenPropsSchema = z39.object({
+  orientation: z39.enum(["vertical", "horizontal"]).default("vertical"),
+  split: z39.number().min(0.1).max(0.9).default(0.5),
+  gap: z39.number().min(0).default(48),
+  padding: z39.number().min(0).default(80),
+  dividerColor: z39.string().optional()
+});
+var SplitScreen = ({
+  orientation,
+  split,
+  gap,
+  padding,
+  dividerColor,
+  children
+}) => {
+  const items = React8.Children.toArray(children);
+  const first = items[0] ?? null;
+  const second = items[1] ?? null;
+  const isVertical = orientation === "vertical";
+  const flexDirection = isVertical ? "row" : "column";
+  return /* @__PURE__ */ jsx38(Fill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexDirection, gap, width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ jsx38("div", { style: { flex: split, position: "relative" }, children: first }),
+    dividerColor ? /* @__PURE__ */ jsx38(
+      "div",
+      {
+        style: {
+          backgroundColor: dividerColor,
+          width: isVertical ? 2 : "100%",
+          height: isVertical ? "100%" : 2,
+          opacity: 0.7
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ jsx38("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
+import { spring as spring10, useCurrentFrame as useCurrentFrame26, useVideoConfig as useVideoConfig11 } from "remotion";
+import { z as z40 } from "zod";
+import { jsx as jsx39 } from "react/jsx-runtime";
+var SplitTextPropsSchema = z40.object({
+  content: z40.string().max(200),
+  fontSize: z40.number().min(8).max(200).default(48),
+  color: z40.string().default("#FFFFFF"),
+  fontFamily: z40.string().default("Inter"),
+  position: z40.enum(["top", "center", "bottom"]).default("center"),
+  splitBy: z40.enum(["word", "letter"]).default("word"),
+  stagger: z40.number().int().min(1).max(10).default(3),
+  animation: z40.enum(["fade", "slideUp", "slideDown", "scale", "rotate"]).default("slideUp"),
+  maxWidthPct: z40.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: z40.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 = useCurrentFrame26();
+  const { fps } = useVideoConfig11();
+  const items = splitBy === "letter" ? content.split("") : content.trim().split(/\s+/);
+  return /* @__PURE__ */ jsx39(Fill, { style: { display: "flex", ...positionStyles4(position, safeInsetPct) }, children: /* @__PURE__ */ jsx39(
+    "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 = spring10({
+          frame: frame - i * stagger,
+          fps,
+          config: { damping: 14, stiffness: 120, mass: 0.9 }
+        });
+        return /* @__PURE__ */ jsx39(
+          "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
+import { interpolate as interpolate19, useCurrentFrame as useCurrentFrame27 } from "remotion";
+import { z as z41 } from "zod";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var SubtitleTextPropsSchema = z41.object({
+  text: z41.string().max(200),
+  fontSize: z41.number().min(12).max(80).default(36),
+  color: z41.string().default("#FFFFFF"),
+  backgroundColor: z41.string().default("rgba(0,0,0,0.7)"),
+  fontFamily: z41.string().default("Inter"),
+  position: z41.enum(["top", "bottom"]).default("bottom"),
+  maxWidth: z41.number().min(200).max(1200).default(800),
+  padding: z41.number().min(0).max(80).default(20),
+  highlightWords: z41.array(z41.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 = useCurrentFrame27();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const inFade = interpolate19(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const outFade = interpolate19(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__ */ jsx40(Fill, { children: /* @__PURE__ */ jsx40("div", { style: { position: "absolute", left: "50%", transform: "translateX(-50%)", maxWidth, width: "100%", ...yStyle }, children: /* @__PURE__ */ jsx40(
+    "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__ */ jsx40("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
+import { interpolate as interpolate20, useCurrentFrame as useCurrentFrame28 } from "remotion";
+import { z as z42 } from "zod";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var TikTokCaptionPropsSchema = z42.object({
+  text: z42.string().max(150),
+  fontSize: z42.number().min(12).max(120).default(48),
+  color: z42.string().default("#FFFFFF"),
+  strokeColor: z42.string().default("#000000"),
+  strokeWidth: z42.number().min(0).max(10).default(3),
+  position: z42.enum(["center", "bottom"]).default("center"),
+  highlightStyle: z42.enum(["word", "bounce", "none"]).default("word"),
+  maxWidthPct: z42.number().min(0.1).max(1).default(0.92),
+  safeInsetPct: z42.number().min(0).max(0.25).default(0.06)
+});
+var TikTokCaption = ({
+  text,
+  fontSize,
+  color,
+  strokeColor,
+  strokeWidth,
+  position,
+  highlightStyle,
+  maxWidthPct,
+  safeInsetPct,
+  __wavesDurationInFrames
+}) => {
+  const frame = useCurrentFrame28();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const p = interpolate20(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__ */ jsx41(Fill, { style: { display: "flex", justifyContent: "center", ...yStyle }, children: /* @__PURE__ */ jsx41("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" ? interpolate20(frame % 18, [0, 9, 18], [1, 1.08, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) : 1;
+    return /* @__PURE__ */ jsx41(
+      "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
+import { Img as Img12, interpolate as interpolate21, staticFile as staticFile14, useCurrentFrame as useCurrentFrame29 } from "remotion";
+import { z as z43 } from "zod";
+import { jsx as jsx42, jsxs as jsxs17 } from "react/jsx-runtime";
+var ThirdLowerBannerPropsSchema = z43.object({
+  name: z43.string().max(50),
+  title: z43.string().max(100),
+  backgroundColor: z43.string().default("rgba(0,0,0,0.8)"),
+  primaryColor: z43.string().default("#FFFFFF"),
+  secondaryColor: z43.string().default("#CCCCCC"),
+  accentColor: z43.string().default("#FF0000"),
+  showAvatar: z43.boolean().default(false),
+  avatarSrc: z43.string().optional()
+});
+var resolveAsset13 = (value) => isRemoteAssetPath(value) ? value : staticFile14(staticFileInputFromAssetPath(value));
+var ThirdLowerBanner = ({
+  name,
+  title,
+  backgroundColor,
+  primaryColor,
+  secondaryColor,
+  accentColor,
+  showAvatar,
+  avatarSrc
+}) => {
+  const frame = useCurrentFrame29();
+  const slide = interpolate21(frame, [0, 18], [-600, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const opacity = interpolate21(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const avatar = showAvatar && typeof avatarSrc === "string" && avatarSrc.length > 0 ? avatarSrc : null;
+  return /* @__PURE__ */ jsx42(Fill, { children: /* @__PURE__ */ jsxs17(
+    "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__ */ jsx42("div", { style: { width: 10, backgroundColor: accentColor } }),
+        avatar ? /* @__PURE__ */ jsx42("div", { style: { width: 160, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx42(
+          Img12,
+          {
+            src: resolveAsset13(avatar),
+            style: { width: 110, height: 110, borderRadius: 9999, objectFit: "cover" }
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsxs17("div", { style: { padding: "28px 36px", display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
+          /* @__PURE__ */ jsx42("div", { style: { color: primaryColor, fontSize: 54, fontWeight: 800, lineHeight: 1 }, children: name }),
+          /* @__PURE__ */ jsx42("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
+import { interpolate as interpolate22, useCurrentFrame as useCurrentFrame30 } from "remotion";
+import { z as z44 } from "zod";
+import { jsx as jsx43, jsxs as jsxs18 } from "react/jsx-runtime";
+var TypewriterTextPropsSchema = z44.object({
+  content: z44.string().max(500),
+  fontSize: z44.number().min(8).max(200).default(48),
+  color: z44.string().default("#FFFFFF"),
+  fontFamily: z44.string().default("Inter"),
+  position: z44.enum(["top", "center", "bottom"]).default("center"),
+  speed: z44.number().min(0.5).max(5).default(2),
+  showCursor: z44.boolean().default(true),
+  cursorColor: z44.string().default("#FFFFFF"),
+  maxWidthPct: z44.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: z44.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 = useCurrentFrame30();
+  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 = interpolate22(frame % 30, [0, 5], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ jsx43(Fill, { style: { display: "flex", ...positionStyles5(position, safeInsetPct) }, children: /* @__PURE__ */ jsxs18("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__ */ jsx43("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
+import { Img as Img13, staticFile as staticFile15 } from "remotion";
+import { z as z45 } from "zod";
+import { jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
+var TwitterCardPropsSchema = z45.object({
+  author: z45.string().min(1),
+  handle: z45.string().min(1),
+  avatarSrc: z45.string().optional(),
+  tweet: z45.string().max(280),
+  image: z45.string().optional(),
+  timestamp: z45.string().optional(),
+  verified: z45.boolean().default(false)
+});
+var resolveAsset14 = (value) => isRemoteAssetPath(value) ? value : staticFile15(staticFileInputFromAssetPath(value));
+var TwitterCard = ({ author, handle, avatarSrc, tweet, image, timestamp, verified }) => {
+  return /* @__PURE__ */ jsx44(Fill, { style: { backgroundColor: "#0B0F14", display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsxs19(
+    "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__ */ jsxs19("div", { style: { display: "flex", gap: 18, alignItems: "center" }, children: [
+          avatarSrc ? /* @__PURE__ */ jsx44(Img13, { src: resolveAsset14(avatarSrc), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ jsx44("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "#E5E7EB" } }),
+          /* @__PURE__ */ jsxs19("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+              /* @__PURE__ */ jsx44("div", { style: { fontSize: 34, fontWeight: 900, color: "#111827" }, children: author }),
+              verified ? /* @__PURE__ */ jsx44("div", { style: { fontSize: 26, color: "#1D9BF0", fontWeight: 900 }, children: "\u2713" }) : null
+            ] }),
+            /* @__PURE__ */ jsx44("div", { style: { fontSize: 26, color: "#6B7280", fontWeight: 800 }, children: handle })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx44("div", { style: { marginTop: 28, fontSize: 36, lineHeight: 1.25, color: "#111827", fontWeight: 700 }, children: tweet }),
+        image ? /* @__PURE__ */ jsx44("div", { style: { marginTop: 28, width: "100%", height: 520, overflow: "hidden", borderRadius: 22, backgroundColor: "#F3F4F6" }, children: /* @__PURE__ */ jsx44(Img13, { src: resolveAsset14(image), style: { width: "100%", height: "100%", objectFit: "cover" } }) }) : null,
+        timestamp ? /* @__PURE__ */ jsx44("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
+import { Img as Img14, staticFile as staticFile16 } from "remotion";
+import { z as z46 } from "zod";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var WatermarkPropsSchema = z46.object({
+  type: z46.enum(["logo", "text"]).default("logo"),
+  src: z46.string().optional(),
+  text: z46.string().optional(),
+  position: z46.enum(["topLeft", "topRight", "bottomLeft", "bottomRight"]).default("bottomRight"),
+  opacity: z46.number().min(0.1).max(1).default(0.5),
+  size: z46.number().min(30).max(150).default(60),
+  color: z46.string().default("#FFFFFF")
+});
+var resolveAsset15 = (value) => isRemoteAssetPath(value) ? value : staticFile16(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__ */ jsx45(Fill, { children: type === "text" ? /* @__PURE__ */ jsx45("div", { style: { ...style, fontSize: Math.round(size * 0.6), color, fontWeight: 700 }, children: text ?? "" }) : src ? /* @__PURE__ */ jsx45(
+    Img14,
+    {
+      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
+import React9 from "react";
+import { interpolate as interpolate23, useCurrentFrame as useCurrentFrame31 } from "remotion";
+import { z as z47 } from "zod";
+import { jsx as jsx46 } from "react/jsx-runtime";
+var WipeTransitionPropsSchema = z47.object({
+  durationInFrames: z47.number().int().min(10).max(60).default(30),
+  direction: z47.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
+  softEdge: z47.boolean().default(false),
+  phase: z47.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 = React9.Children.toArray(children);
+  const frame = useCurrentFrame31();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(durationInFrames, total);
+  let clipPath;
+  if (phase === "in" || phase === "inOut") {
+    const t = interpolate23(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 = interpolate23(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    clipPath = clipFor2(direction, t);
+  }
+  return /* @__PURE__ */ jsx46(Fill, { style: { clipPath, filter: softEdge ? "blur(0.4px)" : void 0 }, children: layers.map((child, i) => /* @__PURE__ */ jsx46("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
+import { Img as Img15, staticFile as staticFile17 } from "remotion";
+import { z as z48 } from "zod";
+import { jsx as jsx47, jsxs as jsxs20 } from "react/jsx-runtime";
+var YouTubeThumbnailPropsSchema = z48.object({
+  backgroundImage: z48.string().min(1),
+  title: z48.string().max(60),
+  subtitle: z48.string().max(40).optional(),
+  thumbnailFace: z48.string().optional(),
+  accentColor: z48.string().default("#FF0000"),
+  style: z48.enum(["bold", "minimal", "dramatic"]).default("bold")
+});
+var resolveAsset16 = (value) => isRemoteAssetPath(value) ? value : staticFile17(staticFileInputFromAssetPath(value));
+var YouTubeThumbnail = ({
+  backgroundImage,
+  title,
+  subtitle,
+  thumbnailFace,
+  accentColor,
+  style
+}) => {
+  return /* @__PURE__ */ jsxs20(Fill, { children: [
+    /* @__PURE__ */ jsx47(Img15, { src: resolveAsset16(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+    style === "dramatic" ? /* @__PURE__ */ jsx47("div", { style: { position: "absolute", inset: 0, backgroundColor: "rgba(0,0,0,0.35)" } }) : null,
+    thumbnailFace ? /* @__PURE__ */ jsx47(
+      Img15,
+      {
+        src: resolveAsset16(thumbnailFace),
+        style: { position: "absolute", right: 60, bottom: 0, width: 520, height: 720, objectFit: "cover" }
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs20("div", { style: { position: "absolute", left: 70, top: 90, width: 1100 }, children: [
+      /* @__PURE__ */ jsx47(
+        "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__ */ jsx47("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__ */ jsx47("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
+import { Img as Img16, Video as RemotionVideo2, interpolate as interpolate24, staticFile as staticFile18, useCurrentFrame as useCurrentFrame32 } from "remotion";
+import { z as z49 } from "zod";
+import { jsx as jsx48, jsxs as jsxs21 } from "react/jsx-runtime";
+var OverlaySchema = z49.object({
+  type: z49.enum(["text", "logo", "gradient"]),
+  content: z49.string().optional(),
+  opacity: z49.number().min(0).max(1).default(0.3),
+  position: z49.enum(["top", "bottom", "center", "full"]).default("bottom")
+});
+var VideoWithOverlayPropsSchema = z49.object({
+  src: z49.string().min(1),
+  overlay: OverlaySchema.optional(),
+  volume: z49.number().min(0).max(1).default(1),
+  playbackRate: z49.number().min(0.5).max(2).default(1)
+});
+var resolveAsset17 = (value) => isRemoteAssetPath(value) ? value : staticFile18(staticFileInputFromAssetPath(value));
+var VideoWithOverlay = ({ src, overlay, volume, playbackRate }) => {
+  const frame = useCurrentFrame32();
+  const fade = interpolate24(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const overlayFill = { position: "absolute", inset: 0 };
+  const overlayNode = overlay ? overlay.type === "gradient" ? /* @__PURE__ */ jsx48(
+    "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__ */ jsx48("div", { style: { ...overlayFill, display: "flex", justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ jsx48(Img16, { src: resolveAsset17(overlay.content), style: { width: 220, height: 220, objectFit: "contain" } }) }) : overlay.type === "text" && overlay.content ? /* @__PURE__ */ jsx48("div", { style: { ...overlayFill, display: "flex", justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ jsx48("div", { style: { color: "#FFFFFF", fontSize: 56, fontWeight: 900, textAlign: "center", padding: "0 80px" }, children: overlay.content }) }) : null : null;
+  return /* @__PURE__ */ jsxs21(Fill, { children: [
+    /* @__PURE__ */ jsx48(
+      RemotionVideo2,
+      {
+        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
+import React10 from "react";
+import { interpolate as interpolate25, useCurrentFrame as useCurrentFrame33 } from "remotion";
+import { z as z50 } from "zod";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var ZoomTransitionPropsSchema = z50.object({
+  durationInFrames: z50.number().int().min(10).max(60).default(30),
+  type: z50.enum(["zoomIn", "zoomOut"]).default("zoomIn"),
+  phase: z50.enum(["in", "out", "inOut"]).default("inOut")
+});
+var ZoomTransition = ({
+  durationInFrames,
+  type,
+  phase,
+  children,
+  __wavesDurationInFrames
+}) => {
+  const layers = React10.Children.toArray(children);
+  const frame = useCurrentFrame33();
+  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 = interpolate25(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 = interpolate25(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    scale *= 1 + (exitTo - 1) * t;
+    opacity *= 1 - t;
+  }
+  return /* @__PURE__ */ jsx49(Fill, { style: { opacity, transform: `scale(${scale})` }, children: layers.map((child, i) => /* @__PURE__ */ jsx49("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
+    });
+  }
+  if (!globalRegistry.has("Scene")) {
+    globalRegistry.register({
+      type: "Scene",
+      component: Scene,
+      propsSchema: ScenePropsSchema,
+      metadata: SceneComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("Text")) {
+    globalRegistry.register({
+      type: "Text",
+      component: Text,
+      propsSchema: TextPropsSchema,
+      metadata: TextComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("Audio")) {
+    globalRegistry.register({
+      type: "Audio",
+      component: Audio,
+      propsSchema: AudioPropsSchema,
+      metadata: AudioComponentMetadata
+    });
+  }
+}
+
+// src/utils/errors.ts
+var WavesError = class _WavesError extends Error {
+  constructor(message, context) {
+    super(message);
+    this.context = context;
+    this.name = "WavesError";
+    Object.setPrototypeOf(this, _WavesError.prototype);
+  }
+};
+var WavesValidationError = class _WavesValidationError extends WavesError {
+  constructor(message, context) {
+    super(message, context);
+    this.name = "WavesValidationError";
+    Object.setPrototypeOf(this, _WavesValidationError.prototype);
+  }
+};
+var WavesRenderError = class _WavesRenderError extends WavesError {
+  constructor(message, context) {
+    super(message, context);
+    this.name = "WavesRenderError";
+    Object.setPrototypeOf(this, _WavesRenderError.prototype);
+  }
+};
+
+export {
+  __require,
+  zodSchemaToJsonSchema,
+  VideoIRv2Schema,
+  VideoIRv2AuthoringSchema,
+  VideoIRSchema,
+  ComponentRegistry,
+  globalRegistry,
+  Fill,
+  registerBuiltInComponents,
+  WavesError,
+  WavesValidationError,
+  WavesRenderError
+};