@depths/waves 0.1.0 → 0.2.0

package/dist/remotion/index.js

@@ -60,14 +60,11 @@ var WavesRenderError = class _WavesRenderError extends WavesError {
 // src/remotion/WavesComposition.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var WavesComposition = ({ ir, registry }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: ir.scenes.map((scene) => renderComponent(scene, registry)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: ir.timeline.map((node) => renderComponent(node, registry)) });
 };
 var getProps = (component) => {
   return component.props ?? {};
 };
-var getChildren = (component) => {
-  return component.children;
-};
 function renderComponent(component, registry) {
   const registration = registry.get(component.type);
   if (!registration) {
@@ -84,7 +81,7 @@ function renderComponent(component, registry) {
   if (!parsedProps || typeof parsedProps !== "object") {
     throw new WavesRenderError("Component props must be an object", { type: component.type });
   }
-  const children = component.type === "Scene" && getChildren(component)?.length ? getChildren(component).map((child) => renderComponent(child, registry)) : null;
+  const children = component.children?.length ? component.children.map((c) => renderComponent(c, registry)) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_remotion.Sequence,
     {
@@ -124,12 +121,23 @@ var ComponentRegistry = class {
   getTypes() {
     return Array.from(this.components.keys());
   }
+  getTypesForLLM(options) {
+    const includeInternal = options?.includeInternal ?? false;
+    const out = [];
+    for (const [type, reg] of this.components) {
+      if (!includeInternal && reg.metadata.internal) continue;
+      out.push(type);
+    }
+    return out;
+  }
   has(type) {
     return this.components.has(type);
   }
-  getJSONSchemaForLLM() {
+  getJSONSchemaForLLM(options) {
+    const includeInternal = options?.includeInternal ?? false;
     const schemas = {};
     for (const [type, registration] of this.components) {
+      if (!includeInternal && registration.metadata.internal) continue;
       schemas[type] = {
         schema: zodSchemaToJsonSchema(registration.propsSchema),
         metadata: registration.metadata
@@ -205,138 +213,515 @@ var Audio = ({
   );
 };
 var AudioComponentMetadata = {
-  category: "primitive",
+  kind: "primitive",
+  category: "media",
   description: "Plays an audio file with optional trimming and fade in/out",
   llmGuidance: "Use for background music or sound effects. Prefer short clips for SFX. Use fadeIn/fadeOut (in frames) for smoother audio starts/ends."
 };
 
-// src/components/primitives/Scene.tsx
+// src/components/primitives/Box.tsx
+var import_zod3 = require("zod");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var BoxPropsSchema = import_zod3.z.object({
+  x: import_zod3.z.number().default(0).describe("Left offset in pixels"),
+  y: import_zod3.z.number().default(0).describe("Top offset in pixels"),
+  width: import_zod3.z.number().positive().optional().describe("Width in pixels (omit for auto)"),
+  height: import_zod3.z.number().positive().optional().describe("Height in pixels (omit for auto)"),
+  padding: import_zod3.z.number().min(0).default(0).describe("Padding in pixels"),
+  backgroundColor: import_zod3.z.string().optional().describe("CSS color (e.g. #RRGGBB)"),
+  borderRadius: import_zod3.z.number().min(0).default(0).describe("Border radius in pixels"),
+  opacity: import_zod3.z.number().min(0).max(1).default(1).describe("Opacity 0..1")
+});
+var Box = ({
+  x,
+  y,
+  width,
+  height,
+  padding,
+  backgroundColor,
+  borderRadius,
+  opacity,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: x,
+        top: y,
+        width,
+        height,
+        padding,
+        backgroundColor,
+        borderRadius,
+        opacity,
+        boxSizing: "border-box"
+      },
+      children
+    }
+  );
+};
+var BoxComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  description: "Positioned container box for layout and backgrounds",
+  llmGuidance: "Use Box to position content by x/y and optionally constrain width/height. Prefer Box+Stack/Grid for layouts."
+};
+
+// src/components/primitives/Grid.tsx
 var import_remotion3 = require("remotion");
 var import_zod4 = require("zod");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var GridPropsSchema = import_zod4.z.object({
+  columns: import_zod4.z.number().int().min(1).max(12).default(2),
+  rows: import_zod4.z.number().int().min(1).max(12).default(1),
+  gap: import_zod4.z.number().min(0).default(24),
+  padding: import_zod4.z.number().min(0).default(0),
+  align: import_zod4.z.enum(["start", "center", "end", "stretch"]).default("stretch"),
+  justify: import_zod4.z.enum(["start", "center", "end", "stretch"]).default("stretch")
+});
+var mapAlign = (a) => {
+  if (a === "start") return "start";
+  if (a === "end") return "end";
+  if (a === "center") return "center";
+  return "stretch";
+};
+var mapJustify = (j) => {
+  if (j === "start") return "start";
+  if (j === "end") return "end";
+  if (j === "center") return "center";
+  return "stretch";
+};
+var Grid = ({ columns, rows, gap, padding, align, justify, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_remotion3.AbsoluteFill,
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gridTemplateRows: `repeat(${rows}, 1fr)`,
+        gap,
+        padding,
+        alignItems: mapAlign(align),
+        justifyItems: mapJustify(justify),
+        boxSizing: "border-box"
+      },
+      children
+    }
+  );
+};
+var GridComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  description: "Grid layout container with configurable rows/columns",
+  llmGuidance: "Use Grid for photo collages and dashboards. Provide exactly rows*columns children when possible."
+};
+
+// src/components/primitives/Image.tsx
+var import_remotion4 = require("remotion");
+var import_zod5 = require("zod");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ImagePropsSchema = import_zod5.z.object({
+  src: import_zod5.z.string().min(1),
+  fit: import_zod5.z.enum(["cover", "contain"]).default("cover"),
+  borderRadius: import_zod5.z.number().min(0).default(0),
+  opacity: import_zod5.z.number().min(0).max(1).default(1)
+});
+var resolveAsset = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion4.staticFile)(staticFileInputFromAssetPath(value));
+var Image = ({ src, fit, borderRadius, opacity }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_remotion4.AbsoluteFill, { style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_remotion4.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/Scene.tsx
+var import_remotion5 = require("remotion");
+var import_zod7 = require("zod");
 
 // src/ir/schema.ts
-var import_zod3 = require("zod");
-var TimingSpecSchema = import_zod3.z.object({
-  from: import_zod3.z.number().int().min(0).describe("Start frame (0-indexed)"),
-  durationInFrames: import_zod3.z.number().int().positive().describe("Duration in frames")
+var import_zod6 = require("zod");
+var TimingSpecSchema = import_zod6.z.object({
+  from: import_zod6.z.number().int().min(0).describe("Start frame (0-indexed)"),
+  durationInFrames: import_zod6.z.number().int().positive().describe("Duration in frames")
 });
-var AssetPathSchema = import_zod3.z.string().refine(
+var AssetPathSchema = import_zod6.z.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 = import_zod3.z.discriminatedUnion("type", [
-  import_zod3.z.object({
-    type: import_zod3.z.literal("color"),
-    value: import_zod3.z.string().regex(/^#[0-9A-Fa-f]{6}$/, "Must be valid hex color")
+var BackgroundSpecSchema = import_zod6.z.discriminatedUnion("type", [
+  import_zod6.z.object({
+    type: import_zod6.z.literal("color"),
+    value: import_zod6.z.string().regex(/^#[0-9A-Fa-f]{6}$/, "Must be valid hex color")
   }),
-  import_zod3.z.object({
-    type: import_zod3.z.literal("image"),
+  import_zod6.z.object({
+    type: import_zod6.z.literal("image"),
     value: AssetPathSchema
   }),
-  import_zod3.z.object({
-    type: import_zod3.z.literal("video"),
+  import_zod6.z.object({
+    type: import_zod6.z.literal("video"),
     value: AssetPathSchema
   })
 ]);
-var BaseComponentIRSchema = import_zod3.z.object({
-  id: import_zod3.z.string().min(1).max(100).describe("Unique component instance ID"),
-  type: import_zod3.z.string().min(1).describe("Component type identifier"),
-  timing: TimingSpecSchema,
-  metadata: import_zod3.z.record(import_zod3.z.string(), import_zod3.z.unknown()).optional().describe("Optional metadata")
-});
-var TextComponentIRSchema = BaseComponentIRSchema.extend({
-  type: import_zod3.z.literal("Text"),
-  props: import_zod3.z.object({
-    content: import_zod3.z.string().min(1).max(1e3),
-    fontSize: import_zod3.z.number().int().min(12).max(200).default(48),
-    color: import_zod3.z.string().regex(/^#[0-9A-Fa-f]{6}$/).default("#FFFFFF"),
-    position: import_zod3.z.enum(["top", "center", "bottom", "left", "right"]).default("center"),
-    animation: import_zod3.z.enum(["none", "fade", "slide", "zoom"]).default("fade")
-  })
+var VideoConfigSchema = import_zod6.z.object({
+  id: import_zod6.z.string().default("main"),
+  width: import_zod6.z.number().int().min(360).max(7680),
+  height: import_zod6.z.number().int().min(360).max(4320),
+  fps: import_zod6.z.number().int().min(1).max(120).default(30),
+  durationInFrames: import_zod6.z.number().int().positive()
 });
-var AudioComponentIRSchema = BaseComponentIRSchema.extend({
-  type: import_zod3.z.literal("Audio"),
-  props: import_zod3.z.object({
-    src: AssetPathSchema,
-    volume: import_zod3.z.number().min(0).max(1).default(1),
-    startFrom: import_zod3.z.number().int().min(0).default(0).describe("Start playback from frame N"),
-    fadeIn: import_zod3.z.number().int().min(0).default(0).describe("Fade in duration in frames"),
-    fadeOut: import_zod3.z.number().int().min(0).default(0).describe("Fade out duration in frames")
-  })
+var AudioSpecSchema = import_zod6.z.object({
+  background: AssetPathSchema.optional(),
+  volume: import_zod6.z.number().min(0).max(1).default(0.5)
+}).optional();
+var TransitionSpecSchema = import_zod6.z.object({
+  type: import_zod6.z.string().min(1),
+  durationInFrames: import_zod6.z.number().int().positive(),
+  props: import_zod6.z.record(import_zod6.z.string(), import_zod6.z.unknown()).optional()
 });
-function getComponentIRSchema() {
-  return ComponentIRSchema;
-}
-var SceneComponentIRSchema = BaseComponentIRSchema.extend({
-  type: import_zod3.z.literal("Scene"),
-  props: import_zod3.z.object({
-    background: BackgroundSpecSchema
-  }),
-  children: import_zod3.z.lazy(() => import_zod3.z.array(getComponentIRSchema())).optional()
+var ComponentNodeSchema = import_zod6.z.lazy(
+  () => import_zod6.z.object({
+    id: import_zod6.z.string().min(1).max(100).describe("Unique component instance ID"),
+    type: import_zod6.z.string().min(1).describe("Registered component type identifier"),
+    timing: TimingSpecSchema.optional().describe("Optional timing (frames)"),
+    props: import_zod6.z.record(import_zod6.z.string(), import_zod6.z.unknown()).optional().describe("Component props object"),
+    metadata: import_zod6.z.record(import_zod6.z.string(), import_zod6.z.unknown()).optional().describe("Optional metadata"),
+    children: import_zod6.z.array(ComponentNodeSchema).optional().describe("Nested children nodes")
+  })
+);
+var SegmentSchema = import_zod6.z.object({
+  id: import_zod6.z.string().min(1).max(100),
+  durationInFrames: import_zod6.z.number().int().positive(),
+  root: ComponentNodeSchema,
+  transitionToNext: TransitionSpecSchema.optional()
 });
-var ComponentIRSchema = import_zod3.z.discriminatedUnion("type", [
-  SceneComponentIRSchema,
-  TextComponentIRSchema,
-  AudioComponentIRSchema
-]);
-var VideoIRSchema = import_zod3.z.object({
-  version: import_zod3.z.literal("1.0").describe("IR schema version"),
-  video: import_zod3.z.object({
-    id: import_zod3.z.string().default("main"),
-    width: import_zod3.z.number().int().min(360).max(7680),
-    height: import_zod3.z.number().int().min(360).max(4320),
-    fps: import_zod3.z.number().int().min(1).max(120).default(30),
-    durationInFrames: import_zod3.z.number().int().positive()
-  }),
-  audio: import_zod3.z.object({
-    background: AssetPathSchema.optional(),
-    volume: import_zod3.z.number().min(0).max(1).default(0.5)
-  }).optional(),
-  scenes: import_zod3.z.array(SceneComponentIRSchema).min(1)
+var VideoIRv2Schema = import_zod6.z.object({
+  version: import_zod6.z.literal("2.0").describe("IR schema version"),
+  video: VideoConfigSchema,
+  audio: AudioSpecSchema,
+  segments: import_zod6.z.array(SegmentSchema).min(1).optional(),
+  timeline: import_zod6.z.array(ComponentNodeSchema).min(1).optional()
+}).superRefine((v, ctx) => {
+  const hasSegments = Array.isArray(v.segments);
+  const hasTimeline = Array.isArray(v.timeline);
+  if (hasSegments === hasTimeline) {
+    ctx.addIssue({
+      code: import_zod6.z.ZodIssueCode.custom,
+      message: 'Exactly one of "segments" or "timeline" must be provided',
+      path: []
+    });
+  }
 });
+var VideoIRv2AuthoringSchema = import_zod6.z.object({
+  version: import_zod6.z.literal("2.0").describe("IR schema version"),
+  video: VideoConfigSchema,
+  audio: AudioSpecSchema,
+  segments: import_zod6.z.array(SegmentSchema).min(1),
+  timeline: import_zod6.z.never().optional()
+}).describe("Preferred authoring format: sequential segments with optional transitions");
 
 // src/components/primitives/Scene.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ScenePropsSchema = import_zod4.z.object({
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ScenePropsSchema = import_zod7.z.object({
   background: BackgroundSpecSchema
 });
-var resolveAsset = (value) => {
-  return isRemoteAssetPath(value) ? value : (0, import_remotion3.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset2 = (value) => {
+  return isRemoteAssetPath(value) ? value : (0, import_remotion5.staticFile)(staticFileInputFromAssetPath(value));
 };
 var Scene = ({ background, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_remotion3.AbsoluteFill, { children: [
-    background.type === "color" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_remotion3.AbsoluteFill, { style: { backgroundColor: background.value } }) : background.type === "image" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_remotion3.Img,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_remotion5.AbsoluteFill, { children: [
+    background.type === "color" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_remotion5.AbsoluteFill, { style: { backgroundColor: background.value } }) : background.type === "image" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_remotion5.Img,
       {
-        src: resolveAsset(background.value),
+        src: resolveAsset2(background.value),
         style: { width: "100%", height: "100%", objectFit: "cover" }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_remotion3.Video,
+    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_remotion5.Video,
       {
-        src: resolveAsset(background.value),
+        src: resolveAsset2(background.value),
         style: { width: "100%", height: "100%", objectFit: "cover" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_remotion3.AbsoluteFill, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_remotion5.AbsoluteFill, { children })
   ] });
 };
 var SceneComponentMetadata = {
-  category: "primitive",
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
   description: "Scene container with a background and nested children",
   llmGuidance: "Use Scene to define a segment of the video. Scene timings must be sequential with no gaps. Put Text and Audio as children."
 };
 
+// src/components/primitives/Segment.tsx
+var import_remotion6 = require("remotion");
+var import_zod8 = require("zod");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var TransitionPropsSchema = import_zod8.z.object({
+  type: import_zod8.z.string().min(1),
+  durationInFrames: import_zod8.z.number().int().positive(),
+  props: import_zod8.z.record(import_zod8.z.string(), import_zod8.z.unknown()).optional()
+});
+var SegmentPropsSchema = import_zod8.z.object({
+  enterTransition: TransitionPropsSchema.optional(),
+  exitTransition: TransitionPropsSchema.optional()
+});
+function getSlideOptions(raw) {
+  const parsed = import_zod8.z.object({
+    direction: import_zod8.z.enum(["left", "right", "up", "down"]).default("left"),
+    distance: import_zod8.z.number().int().min(1).max(2e3).default(80)
+  }).safeParse(raw ?? {});
+  if (parsed.success) return parsed.data;
+  return { direction: "left", distance: 80 };
+}
+function getZoomOptions(raw) {
+  const parsed = import_zod8.z.object({
+    type: import_zod8.z.enum(["zoomIn", "zoomOut"]).default("zoomIn")
+  }).safeParse(raw ?? {});
+  if (parsed.success) return parsed.data;
+  return { type: "zoomIn" };
+}
+function getWipeOptions(raw) {
+  const parsed = import_zod8.z.object({
+    direction: import_zod8.z.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
+    softEdge: import_zod8.z.boolean().default(false)
+  }).safeParse(raw ?? {});
+  if (parsed.success) return parsed.data;
+  return { direction: "right", softEdge: false };
+}
+function clipFor(direction, p) {
+  if (direction === "left") return `inset(0 ${100 * (1 - p)}% 0 0)`;
+  if (direction === "right") return `inset(0 0 0 ${100 * (1 - p)}%)`;
+  if (direction === "up") return `inset(0 0 ${100 * (1 - p)}% 0)`;
+  if (direction === "down") return `inset(${100 * (1 - p)}% 0 0 0)`;
+  return `polygon(0 0, ${100 * p}% 0, 0 ${100 * p}%)`;
+}
+function getCircularOptions(raw) {
+  const parsed = import_zod8.z.object({
+    direction: import_zod8.z.enum(["open", "close"]).default("open"),
+    center: import_zod8.z.object({
+      x: import_zod8.z.number().min(0).max(1).default(0.5),
+      y: import_zod8.z.number().min(0).max(1).default(0.5)
+    }).default({ x: 0.5, y: 0.5 })
+  }).safeParse(raw ?? {});
+  if (parsed.success) return parsed.data;
+  return { direction: "open", center: { x: 0.5, y: 0.5 } };
+}
+var Segment = ({ enterTransition, exitTransition, children, __wavesDurationInFrames }) => {
+  const frame = (0, import_remotion6.useCurrentFrame)();
+  const durationInFrames = __wavesDurationInFrames ?? 0;
+  let opacity = 1;
+  let translateX = 0;
+  let translateY = 0;
+  let scale = 1;
+  let clipPath;
+  let filter;
+  if (enterTransition) {
+    const d = enterTransition.durationInFrames;
+    if (enterTransition.type === "FadeTransition") {
+      opacity *= (0, import_remotion6.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    }
+    if (enterTransition.type === "SlideTransition") {
+      const opts = getSlideOptions(enterTransition.props);
+      const t = (0, import_remotion6.interpolate)(frame, [0, d], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const delta = opts.distance * t;
+      if (opts.direction === "left") translateX += -delta;
+      if (opts.direction === "right") translateX += delta;
+      if (opts.direction === "up") translateY += -delta;
+      if (opts.direction === "down") translateY += delta;
+      opacity *= (0, import_remotion6.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    }
+    if (enterTransition.type === "ZoomTransition") {
+      const opts = getZoomOptions(enterTransition.props);
+      const fromScale = opts.type === "zoomIn" ? 1.2 : 0.85;
+      const t = (0, import_remotion6.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      scale *= fromScale + (1 - fromScale) * t;
+      opacity *= t;
+    }
+    if (enterTransition.type === "WipeTransition") {
+      const opts = getWipeOptions(enterTransition.props);
+      const t = (0, import_remotion6.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      clipPath = clipFor(opts.direction, t);
+      filter = opts.softEdge ? "blur(0.4px)" : void 0;
+    }
+    if (enterTransition.type === "CircularReveal") {
+      const opts = getCircularOptions(enterTransition.props);
+      const open = opts.direction === "open";
+      const t = (0, import_remotion6.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const radiusPct = open ? 150 * t : 150 * (1 - t);
+      clipPath = `circle(${radiusPct}% at ${Math.round(opts.center.x * 100)}% ${Math.round(opts.center.y * 100)}%)`;
+    }
+  }
+  if (exitTransition && durationInFrames > 0) {
+    const d = exitTransition.durationInFrames;
+    const start = Math.max(0, durationInFrames - d);
+    if (exitTransition.type === "FadeTransition") {
+      opacity *= (0, import_remotion6.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    }
+    if (exitTransition.type === "SlideTransition") {
+      const opts = getSlideOptions(exitTransition.props);
+      const t = (0, import_remotion6.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const delta = opts.distance * t;
+      if (opts.direction === "left") translateX += delta;
+      if (opts.direction === "right") translateX += -delta;
+      if (opts.direction === "up") translateY += delta;
+      if (opts.direction === "down") translateY += -delta;
+      opacity *= (0, import_remotion6.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    }
+    if (exitTransition.type === "ZoomTransition") {
+      const opts = getZoomOptions(exitTransition.props);
+      const toScale = opts.type === "zoomIn" ? 1.25 : 0.75;
+      const t = (0, import_remotion6.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      scale *= 1 + (toScale - 1) * t;
+      opacity *= 1 - t;
+    }
+    if (exitTransition.type === "WipeTransition") {
+      const opts = getWipeOptions(exitTransition.props);
+      const t = (0, import_remotion6.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      clipPath = clipFor(opts.direction, t);
+      filter = opts.softEdge ? "blur(0.4px)" : void 0;
+    }
+    if (exitTransition.type === "CircularReveal") {
+      const opts = getCircularOptions(exitTransition.props);
+      const open = opts.direction === "open";
+      const t = (0, import_remotion6.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const radiusPct = open ? 150 * (1 - t) : 150 * t;
+      clipPath = `circle(${radiusPct}% at ${Math.round(opts.center.x * 100)}% ${Math.round(opts.center.y * 100)}%)`;
+    }
+  }
+  const transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_remotion6.AbsoluteFill, { style: { opacity, transform, clipPath, filter }, children });
+};
+var SegmentComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  internal: true,
+  acceptsChildren: true,
+  minChildren: 1,
+  maxChildren: 1,
+  description: "Internal segment wrapper (used by v2 segments compiler)"
+};
+
+// src/components/primitives/Shape.tsx
+var import_zod9 = require("zod");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ShapePropsSchema = import_zod9.z.object({
+  shape: import_zod9.z.enum(["rect", "circle"]).default("rect"),
+  x: import_zod9.z.number().default(0),
+  y: import_zod9.z.number().default(0),
+  width: import_zod9.z.number().positive().default(100),
+  height: import_zod9.z.number().positive().default(100),
+  fill: import_zod9.z.string().default("#FFFFFF"),
+  strokeColor: import_zod9.z.string().optional(),
+  strokeWidth: import_zod9.z.number().min(0).default(0),
+  opacity: import_zod9.z.number().min(0).max(1).default(1)
+});
+var Shape = ({
+  shape,
+  x,
+  y,
+  width,
+  height,
+  fill,
+  strokeColor,
+  strokeWidth,
+  opacity
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: x,
+        top: y,
+        width,
+        height,
+        backgroundColor: fill,
+        borderRadius: shape === "circle" ? 9999 : 0,
+        border: strokeWidth > 0 ? `${strokeWidth}px solid ${strokeColor ?? fill}` : void 0,
+        opacity
+      }
+    }
+  );
+};
+var ShapeComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  description: "Simple rect/circle shape for UI accents",
+  llmGuidance: "Use Shape for lines, badges, and simple UI blocks. Use circle for dots and rings."
+};
+
+// src/components/primitives/Stack.tsx
+var import_remotion7 = require("remotion");
+var import_zod10 = require("zod");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var StackPropsSchema = import_zod10.z.object({
+  direction: import_zod10.z.enum(["row", "column"]).default("column"),
+  gap: import_zod10.z.number().min(0).default(24),
+  padding: import_zod10.z.number().min(0).default(0),
+  align: import_zod10.z.enum(["start", "center", "end", "stretch"]).default("center"),
+  justify: import_zod10.z.enum(["start", "center", "end", "between"]).default("center")
+});
+var mapAlign2 = (a) => {
+  if (a === "start") return "flex-start";
+  if (a === "end") return "flex-end";
+  if (a === "stretch") return "stretch";
+  return "center";
+};
+var mapJustify2 = (j) => {
+  if (j === "start") return "flex-start";
+  if (j === "end") return "flex-end";
+  if (j === "between") return "space-between";
+  return "center";
+};
+var Stack = ({ direction, gap, padding, align, justify, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_remotion7.AbsoluteFill,
+    {
+      style: {
+        display: "flex",
+        flexDirection: direction,
+        gap,
+        padding,
+        alignItems: mapAlign2(align),
+        justifyContent: mapJustify2(justify),
+        boxSizing: "border-box"
+      },
+      children
+    }
+  );
+};
+var StackComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  description: "Flexbox stack layout (row/column) with gap and alignment",
+  llmGuidance: "Use Stack to arrange child components in a row or column without manual positioning."
+};
+
 // src/components/primitives/Text.tsx
-var import_remotion4 = require("remotion");
-var import_zod5 = require("zod");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var TextPropsSchema = import_zod5.z.object({
-  content: import_zod5.z.string(),
-  fontSize: import_zod5.z.number().default(48),
-  color: import_zod5.z.string().default("#FFFFFF"),
-  position: import_zod5.z.enum(["top", "center", "bottom", "left", "right"]).default("center"),
-  animation: import_zod5.z.enum(["none", "fade", "slide", "zoom"]).default("fade")
+var import_remotion8 = require("remotion");
+var import_zod11 = require("zod");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var TextPropsSchema = import_zod11.z.object({
+  content: import_zod11.z.string(),
+  fontSize: import_zod11.z.number().default(48),
+  color: import_zod11.z.string().default("#FFFFFF"),
+  position: import_zod11.z.enum(["top", "center", "bottom", "left", "right"]).default("center"),
+  animation: import_zod11.z.enum(["none", "fade", "slide", "zoom"]).default("fade")
 });
 var getPositionStyles = (position) => {
   const base = {
@@ -361,29 +746,29 @@ var getAnimationStyle = (frame, animation) => {
   const animDuration = 30;
   switch (animation) {
     case "fade": {
-      const opacity = (0, import_remotion4.interpolate)(frame, [0, animDuration], [0, 1], {
+      const opacity = (0, import_remotion8.interpolate)(frame, [0, animDuration], [0, 1], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
       return { opacity };
     }
     case "slide": {
-      const translateY = (0, import_remotion4.interpolate)(frame, [0, animDuration], [50, 0], {
+      const translateY = (0, import_remotion8.interpolate)(frame, [0, animDuration], [50, 0], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
-      const opacity = (0, import_remotion4.interpolate)(frame, [0, animDuration], [0, 1], {
+      const opacity = (0, import_remotion8.interpolate)(frame, [0, animDuration], [0, 1], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
       return { transform: `translateY(${translateY}px)`, opacity };
     }
     case "zoom": {
-      const scale = (0, import_remotion4.interpolate)(frame, [0, animDuration], [0.8, 1], {
+      const scale = (0, import_remotion8.interpolate)(frame, [0, animDuration], [0.8, 1], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
-      const opacity = (0, import_remotion4.interpolate)(frame, [0, animDuration], [0, 1], {
+      const opacity = (0, import_remotion8.interpolate)(frame, [0, animDuration], [0, 1], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
@@ -394,10 +779,10 @@ var getAnimationStyle = (frame, animation) => {
   }
 };
 var Text = ({ content, fontSize, color, position, animation }) => {
-  const frame = (0, import_remotion4.useCurrentFrame)();
-  const positionStyles = getPositionStyles(position);
+  const frame = (0, import_remotion8.useCurrentFrame)();
+  const positionStyles6 = getPositionStyles(position);
   const animationStyles = getAnimationStyle(frame, animation);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_remotion4.AbsoluteFill, { style: positionStyles, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_remotion8.AbsoluteFill, { style: positionStyles6, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       style: {
@@ -412,7 +797,8 @@ var Text = ({ content, fontSize, color, position, animation }) => {
   ) });
 };
 var TextComponentMetadata = {
-  category: "primitive",
+  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: [
@@ -433,8 +819,2376 @@ var TextComponentMetadata = {
   ]
 };
 
-// src/components/registry.ts
-function registerBuiltInComponents() {
+// src/components/primitives/Video.tsx
+var import_remotion9 = require("remotion");
+var import_zod12 = require("zod");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var VideoPropsSchema = import_zod12.z.object({
+  src: import_zod12.z.string().min(1),
+  fit: import_zod12.z.enum(["cover", "contain"]).default("cover"),
+  borderRadius: import_zod12.z.number().min(0).default(0),
+  opacity: import_zod12.z.number().min(0).max(1).default(1),
+  muted: import_zod12.z.boolean().default(true)
+});
+var resolveAsset3 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion9.staticFile)(staticFileInputFromAssetPath(value));
+var Video2 = ({ src, fit, borderRadius, opacity, muted }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_remotion9.AbsoluteFill, { style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_remotion9.Video,
+    {
+      src: resolveAsset3(src),
+      muted,
+      style: { width: "100%", height: "100%", objectFit: fit, borderRadius }
+    }
+  ) });
+};
+var VideoComponentMetadata = {
+  kind: "primitive",
+  category: "media",
+  description: "Full-frame video with object-fit options",
+  llmGuidance: "Use Video for B-roll. Keep videos short and muted unless you intentionally want audio."
+};
+
+// src/components/composites/AnimatedCounter.tsx
+var import_remotion10 = require("remotion");
+var import_zod13 = require("zod");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var AnimatedCounterPropsSchema = import_zod13.z.object({
+  from: import_zod13.z.number().default(0),
+  to: import_zod13.z.number().default(100),
+  fontSize: import_zod13.z.number().min(8).max(300).default(96),
+  color: import_zod13.z.string().default("#FFFFFF"),
+  fontFamily: import_zod13.z.string().default("Inter"),
+  fontWeight: import_zod13.z.number().int().min(100).max(900).default(700),
+  icon: import_zod13.z.string().optional(),
+  suffix: import_zod13.z.string().optional(),
+  animationType: import_zod13.z.enum(["spring", "linear"]).default("spring")
+});
+var AnimatedCounter = ({
+  from,
+  to,
+  fontSize,
+  color,
+  fontFamily,
+  fontWeight,
+  icon,
+  suffix,
+  animationType,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion10.useCurrentFrame)();
+  const { fps } = (0, import_remotion10.useVideoConfig)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const progress = animationType === "spring" ? (0, import_remotion10.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } }) : (0, import_remotion10.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const value = from + (to - from) * Math.max(0, Math.min(1, progress));
+  const rounded = Math.round(value);
+  const label = `${rounded.toLocaleString()}${suffix ?? ""}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_remotion10.AbsoluteFill, { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { textAlign: "center" }, children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontSize: Math.round(fontSize * 0.5), marginBottom: 18 }, children: icon }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontSize, color, fontFamily, fontWeight, lineHeight: 1 }, children: label })
+  ] }) });
+};
+var AnimatedCounterComponentMetadata = {
+  kind: "composite",
+  category: "data",
+  description: "Animated numeric counter (spring or linear), optionally with an icon and suffix",
+  llmGuidance: 'Use for big stats. animationType="spring" feels natural. suffix for units (%, K, M).',
+  examples: [
+    { from: 0, to: 100, suffix: "%", icon: "\u{1F4C8}" },
+    { from: 0, to: 25e3, suffix: "+", animationType: "linear" }
+  ]
+};
+
+// src/components/composites/BarChart.tsx
+var import_remotion11 = require("remotion");
+var import_zod14 = require("zod");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var BarChartPropsSchema = import_zod14.z.object({
+  data: import_zod14.z.array(import_zod14.z.object({
+    label: import_zod14.z.string().min(1),
+    value: import_zod14.z.number(),
+    color: import_zod14.z.string().optional()
+  })).min(2).max(8),
+  orientation: import_zod14.z.enum(["horizontal", "vertical"]).default("vertical"),
+  showValues: import_zod14.z.boolean().default(true),
+  showGrid: import_zod14.z.boolean().default(false),
+  maxValue: import_zod14.z.number().optional()
+});
+var BarChart = ({ data, orientation, showValues, showGrid, maxValue }) => {
+  const frame = (0, import_remotion11.useCurrentFrame)();
+  const { fps } = (0, import_remotion11.useVideoConfig)();
+  const max = maxValue ?? Math.max(...data.map((d) => d.value));
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_remotion11.AbsoluteFill, { style: { padding: 90, boxSizing: "border-box" }, children: [
+    showGrid ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { position: "absolute", left: 90, right: 90, top: 90, bottom: 90, opacity: 0.15, backgroundImage: "linear-gradient(#fff 1px, transparent 1px)", backgroundSize: "100% 60px" } }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: orientation === "vertical" ? "row" : "column",
+          gap: 24,
+          width: "100%",
+          height: "100%",
+          alignItems: orientation === "vertical" ? "flex-end" : "stretch",
+          justifyContent: "space-between"
+        },
+        children: data.map((d, i) => {
+          const p = (0, import_remotion11.spring)({ frame: frame - i * 4, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+          const ratio = max === 0 ? 0 : d.value / max * p;
+          const color = d.color ?? "#0A84FF";
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }, children: [
+            orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { width: "100%", flex: 1, display: "flex", alignItems: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { width: "100%", height: `${Math.round(ratio * 100)}%`, backgroundColor: color, borderRadius: 12 } }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { width: "100%", display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { flex: 1, height: 18, backgroundColor: "rgba(255,255,255,0.15)", borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { width: `${Math.round(ratio * 100)}%`, height: "100%", backgroundColor: color } }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 700, fontSize: 22, opacity: 0.9 }, children: d.label }),
+            showValues ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 26 }, children: Math.round(d.value).toLocaleString() }) : null
+          ] }, d.label);
+        })
+      }
+    )
+  ] });
+};
+var BarChartComponentMetadata = {
+  kind: "composite",
+  category: "data",
+  description: "Animated bar chart (vertical or horizontal)",
+  llmGuidance: "Use 2-6 bars. Provide maxValue to lock scale across multiple charts."
+};
+
+// src/components/composites/CardStack.tsx
+var import_remotion12 = require("remotion");
+var import_zod15 = require("zod");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var CardSchema = import_zod15.z.object({
+  title: import_zod15.z.string().min(1),
+  content: import_zod15.z.string().min(1),
+  backgroundColor: import_zod15.z.string().optional()
+});
+var CardStackPropsSchema = import_zod15.z.object({
+  cards: import_zod15.z.array(CardSchema).min(2).max(5),
+  transition: import_zod15.z.enum(["flip", "slide", "fade"]).default("flip"),
+  displayDuration: import_zod15.z.number().int().min(30).max(150).default(90)
+});
+var CardStack = ({ cards, transition, displayDuration }) => {
+  const frame = (0, import_remotion12.useCurrentFrame)();
+  const { fps } = (0, import_remotion12.useVideoConfig)();
+  const index = Math.min(cards.length - 1, Math.floor(frame / displayDuration));
+  const local = frame - index * displayDuration;
+  const p = (0, import_remotion12.spring)({ frame: local, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const card = cards[index];
+  const bg = card.backgroundColor ?? "rgba(255,255,255,0.1)";
+  const opacity = transition === "fade" ? p : 1;
+  const slideX = transition === "slide" ? (0, import_remotion12.interpolate)(p, [0, 1], [80, 0]) : 0;
+  const rotateY = transition === "flip" ? (0, import_remotion12.interpolate)(p, [0, 1], [70, 0]) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_remotion12.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      style: {
+        width: 980,
+        height: 520,
+        borderRadius: 28,
+        padding: 60,
+        boxSizing: "border-box",
+        backgroundColor: bg,
+        boxShadow: "0 30px 90px rgba(0,0,0,0.35)",
+        color: "#FFFFFF",
+        transform: `translateX(${slideX}px) rotateY(${rotateY}deg)`,
+        transformStyle: "preserve-3d",
+        opacity
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontSize: 56, fontWeight: 900, marginBottom: 22 }, children: card.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontSize: 30, fontWeight: 700, opacity: 0.9, lineHeight: 1.3 }, children: card.content })
+      ]
+    }
+  ) });
+};
+var CardStackComponentMetadata = {
+  kind: "composite",
+  category: "layout",
+  description: "Sequential stacked cards (2-5) with flip/slide/fade transitions",
+  llmGuidance: "Use for steps/features. displayDuration is frames per card."
+};
+
+// src/components/composites/CircularReveal.tsx
+var import_remotion13 = require("remotion");
+var import_zod16 = require("zod");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var CenterSchema = import_zod16.z.object({
+  x: import_zod16.z.number().min(0).max(1).default(0.5),
+  y: import_zod16.z.number().min(0).max(1).default(0.5)
+});
+var CircularRevealPropsSchema = import_zod16.z.object({
+  durationInFrames: import_zod16.z.number().int().min(10).max(60).default(30),
+  direction: import_zod16.z.enum(["open", "close"]).default("open"),
+  center: CenterSchema.optional(),
+  phase: import_zod16.z.enum(["in", "out", "inOut"]).default("inOut")
+});
+var CircularReveal = ({
+  durationInFrames,
+  direction,
+  center,
+  phase,
+  children,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion13.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(durationInFrames, total);
+  const c = center ?? { x: 0.5, y: 0.5 };
+  const open = direction === "open";
+  let radiusPct = open ? 0 : 150;
+  if (phase === "in" || phase === "inOut") {
+    const t = (0, import_remotion13.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    radiusPct = open ? 150 * t : 150 * (1 - t);
+  }
+  if (phase === "out" || phase === "inOut") {
+    const start = Math.max(0, total - d);
+    const t = (0, import_remotion13.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    radiusPct = open ? 150 * (1 - t) : 150 * t;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_remotion13.AbsoluteFill, { style: { clipPath: `circle(${radiusPct}% at ${Math.round(c.x * 100)}% ${Math.round(c.y * 100)}%)` }, children });
+};
+var CircularRevealComponentMetadata = {
+  kind: "composite",
+  category: "transition",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Circular iris reveal/hide transition wrapper",
+  llmGuidance: 'direction="open" reveals from center, direction="close" hides to a point. center controls origin.'
+};
+
+// src/components/composites/CountUpText.tsx
+var import_remotion14 = require("remotion");
+var import_zod17 = require("zod");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var CountUpTextPropsSchema = import_zod17.z.object({
+  from: import_zod17.z.number().default(0),
+  to: import_zod17.z.number().default(100),
+  fontSize: import_zod17.z.number().min(8).max(240).default(72),
+  color: import_zod17.z.string().default("#FFFFFF"),
+  fontFamily: import_zod17.z.string().default("Inter"),
+  fontWeight: import_zod17.z.number().int().min(100).max(900).default(700),
+  position: import_zod17.z.enum(["top", "center", "bottom"]).default("center"),
+  format: import_zod17.z.enum(["integer", "decimal", "currency", "percentage"]).default("integer"),
+  decimals: import_zod17.z.number().int().min(0).max(4).default(0),
+  prefix: import_zod17.z.string().optional(),
+  suffix: import_zod17.z.string().optional()
+});
+var positionStyles = (position) => {
+  if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
+  if (position === "bottom") return { justifyContent: "center", alignItems: "flex-end", paddingBottom: 90 };
+  return { justifyContent: "center", alignItems: "center" };
+};
+function formatValue(v, format, decimals) {
+  if (format === "integer") return Math.round(v).toLocaleString();
+  if (format === "decimal") return v.toFixed(decimals);
+  if (format === "currency") return `$${v.toFixed(decimals).toLocaleString()}`;
+  return `${(v * 100).toFixed(decimals)}%`;
+}
+var CountUpText = ({
+  from,
+  to,
+  fontSize,
+  color,
+  fontFamily,
+  fontWeight,
+  position,
+  format,
+  decimals,
+  prefix,
+  suffix,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion14.useCurrentFrame)();
+  const { fps } = (0, import_remotion14.useVideoConfig)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const p = (0, import_remotion14.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } });
+  const progress = Math.max(0, Math.min(1, p));
+  const value = from + (to - from) * progress;
+  const fade = (0, import_remotion14.interpolate)(frame, [0, Math.min(12, total)], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const label = `${prefix ?? ""}${formatValue(value, format, decimals)}${suffix ?? ""}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_remotion14.AbsoluteFill, { style: { display: "flex", ...positionStyles(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize, color, fontFamily, fontWeight, opacity: fade, lineHeight: 1 }, children: label }) });
+};
+var CountUpTextComponentMetadata = {
+  kind: "composite",
+  category: "text",
+  description: "Counts from a start value to an end value with formatting options",
+  llmGuidance: 'Use for metrics. format="currency" adds $, format="percentage" multiplies by 100 and adds %.'
+};
+
+// src/components/composites/FadeTransition.tsx
+var import_remotion15 = require("remotion");
+var import_zod18 = require("zod");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var EasingSchema = import_zod18.z.enum(["linear", "easeIn", "easeOut", "easeInOut"]);
+function ease(t, easing) {
+  const x = Math.max(0, Math.min(1, t));
+  if (easing === "linear") return x;
+  if (easing === "easeIn") return x * x;
+  if (easing === "easeOut") return 1 - (1 - x) * (1 - x);
+  return x < 0.5 ? 2 * x * x : 1 - 2 * (1 - x) * (1 - x);
+}
+var FadeTransitionPropsSchema = import_zod18.z.object({
+  durationInFrames: import_zod18.z.number().int().min(10).max(60).default(30),
+  easing: EasingSchema.default("easeInOut"),
+  phase: import_zod18.z.enum(["in", "out", "inOut"]).default("inOut")
+});
+var FadeTransition = ({
+  durationInFrames,
+  easing,
+  phase,
+  children,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion15.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(durationInFrames, total);
+  let opacity = 1;
+  if (phase === "in" || phase === "inOut") {
+    const t = (0, import_remotion15.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    opacity *= ease(t, easing);
+  }
+  if (phase === "out" || phase === "inOut") {
+    const start = Math.max(0, total - d);
+    const t = (0, import_remotion15.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    opacity *= 1 - ease(t, easing);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_remotion15.AbsoluteFill, { style: { opacity }, children });
+};
+var FadeTransitionComponentMetadata = {
+  kind: "composite",
+  category: "transition",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Fade in/out wrapper (used for segment transitions and overlays)",
+  llmGuidance: "Use for gentle transitions. durationInFrames ~30 is standard."
+};
+
+// src/components/composites/GlitchText.tsx
+var import_remotion16 = require("remotion");
+var import_zod19 = require("zod");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var GlitchTextPropsSchema = import_zod19.z.object({
+  content: import_zod19.z.string().max(100),
+  fontSize: import_zod19.z.number().min(8).max(240).default(72),
+  color: import_zod19.z.string().default("#FFFFFF"),
+  fontFamily: import_zod19.z.string().default("monospace"),
+  position: import_zod19.z.enum(["top", "center", "bottom"]).default("center"),
+  intensity: import_zod19.z.number().int().min(1).max(10).default(5),
+  glitchDuration: import_zod19.z.number().int().min(5).max(30).default(10)
+});
+var positionStyles2 = (position) => {
+  if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
+  if (position === "bottom") return { justifyContent: "center", alignItems: "flex-end", paddingBottom: 90 };
+  return { justifyContent: "center", alignItems: "center" };
+};
+function pseudoRandom(n) {
+  const x = Math.sin(n * 12.9898) * 43758.5453;
+  return x - Math.floor(x);
+}
+var GlitchText = ({
+  content,
+  fontSize,
+  color,
+  fontFamily,
+  position,
+  intensity,
+  glitchDuration
+}) => {
+  const frame = (0, import_remotion16.useCurrentFrame)();
+  const active = frame < glitchDuration;
+  const seed = frame + 1;
+  const jitter = active ? (pseudoRandom(seed) - 0.5) * intensity * 6 : 0;
+  const jitterY = active ? (pseudoRandom(seed + 99) - 0.5) * intensity * 3 : 0;
+  const baseStyle = {
+    position: "absolute",
+    fontSize,
+    fontFamily,
+    fontWeight: 800,
+    letterSpacing: 1,
+    textTransform: "uppercase",
+    textAlign: "center"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_remotion16.AbsoluteFill, { style: { display: "flex", ...positionStyles2(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { ...baseStyle, color, transform: `translate(${jitter}px, ${jitterY}px)` }, children: content }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { ...baseStyle, color: "#FF3B30", transform: `translate(${jitter + 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { ...baseStyle, color: "#0A84FF", transform: `translate(${jitter - 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content })
+  ] }) });
+};
+var GlitchTextComponentMetadata = {
+  kind: "composite",
+  category: "text",
+  description: "Cyberpunk-style glitch text with RGB split jitter",
+  llmGuidance: "Use for tech/error moments. intensity 1-3 subtle, 7-10 extreme. glitchDuration is frames at start."
+};
+
+// src/components/composites/GridLayout.tsx
+var import_remotion17 = require("remotion");
+var import_zod20 = require("zod");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var GridLayoutPropsSchema = import_zod20.z.object({
+  columns: import_zod20.z.number().int().min(1).max(4).default(2),
+  rows: import_zod20.z.number().int().min(1).max(4).default(2),
+  gap: import_zod20.z.number().min(0).max(50).default(20),
+  padding: import_zod20.z.number().min(0).max(100).default(40)
+});
+var GridLayout = ({ columns, rows, gap, padding, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_remotion17.AbsoluteFill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gridTemplateRows: `repeat(${rows}, 1fr)`,
+        gap,
+        width: "100%",
+        height: "100%"
+      },
+      children
+    }
+  ) });
+};
+var GridLayoutComponentMetadata = {
+  kind: "composite",
+  category: "layout",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Simple responsive grid layout for child components",
+  llmGuidance: "Use for dashboards and collages. 2x2 is a good default for 4 items."
+};
+
+// src/components/composites/ImageCollage.tsx
+var import_remotion18 = require("remotion");
+var import_zod21 = require("zod");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var ImageCollagePropsSchema = import_zod21.z.object({
+  images: import_zod21.z.array(import_zod21.z.object({ src: import_zod21.z.string().min(1), caption: import_zod21.z.string().optional() })).min(2).max(9),
+  layout: import_zod21.z.enum(["grid", "stack", "scatter"]).default("grid"),
+  stagger: import_zod21.z.number().int().min(2).max(10).default(5)
+});
+var resolveAsset4 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion18.staticFile)(staticFileInputFromAssetPath(value));
+var ImageCollage = ({ images, layout, stagger }) => {
+  const frame = (0, import_remotion18.useCurrentFrame)();
+  const { fps } = (0, import_remotion18.useVideoConfig)();
+  const n = images.length;
+  const cols = Math.ceil(Math.sqrt(n));
+  const rows = Math.ceil(n / cols);
+  if (layout === "grid") {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_remotion18.AbsoluteFill, { style: { padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: `repeat(${cols}, 1fr)`,
+          gridTemplateRows: `repeat(${rows}, 1fr)`,
+          gap: 24,
+          width: "100%",
+          height: "100%"
+        },
+        children: images.map((img, i) => {
+          const p = (0, import_remotion18.spring)({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { position: "relative", overflow: "hidden", borderRadius: 18, opacity: p, transform: `scale(${0.92 + 0.08 * p})` }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_remotion18.Img, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+            img.caption ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0, padding: 12, background: "linear-gradient(transparent, rgba(0,0,0,0.7))", color: "#fff", fontWeight: 700 }, children: img.caption }) : null
+          ] }, i);
+        })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_remotion18.AbsoluteFill, { children: images.map((img, i) => {
+    const p = (0, import_remotion18.spring)({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+    const baseRotate = layout === "stack" ? (i - (n - 1) / 2) * 4 : i * 17 % 20 - 10;
+    const baseX = layout === "scatter" ? i * 137 % 300 - 150 : 0;
+    const baseY = layout === "scatter" ? (i + 3) * 89 % 200 - 100 : 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: "50%",
+          top: "50%",
+          width: 520,
+          height: 360,
+          transform: `translate(-50%, -50%) translate(${baseX}px, ${baseY}px) rotate(${baseRotate}deg) scale(${0.85 + 0.15 * p})`,
+          opacity: p,
+          borderRadius: 18,
+          overflow: "hidden",
+          boxShadow: "0 20px 60px rgba(0,0,0,0.35)"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_remotion18.Img, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } })
+      },
+      i
+    );
+  }) });
+};
+var ImageCollageComponentMetadata = {
+  kind: "composite",
+  category: "image",
+  description: "Collage of multiple images in a grid/stack/scatter layout with staggered entrances",
+  llmGuidance: 'Use 2-6 images for best results. layout="grid" is clean; "scatter" is energetic.'
+};
+
+// src/components/composites/ImageReveal.tsx
+var import_remotion19 = require("remotion");
+var import_zod22 = require("zod");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ImageRevealPropsSchema = import_zod22.z.object({
+  src: import_zod22.z.string().min(1),
+  direction: import_zod22.z.enum(["left", "right", "top", "bottom", "center"]).default("left"),
+  revealType: import_zod22.z.enum(["wipe", "expand", "iris"]).default("wipe")
+});
+var resolveAsset5 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion19.staticFile)(staticFileInputFromAssetPath(value));
+var ImageReveal = ({ src, direction, revealType, __wavesDurationInFrames }) => {
+  const frame = (0, import_remotion19.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(30, total);
+  const p = (0, import_remotion19.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  let clipPath;
+  let transform = "none";
+  let transformOrigin = "center center";
+  if (revealType === "wipe") {
+    if (direction === "left") clipPath = `inset(0 ${100 * (1 - p)}% 0 0)`;
+    if (direction === "right") clipPath = `inset(0 0 0 ${100 * (1 - p)}%)`;
+    if (direction === "top") clipPath = `inset(0 0 ${100 * (1 - p)}% 0)`;
+    if (direction === "bottom") clipPath = `inset(${100 * (1 - p)}% 0 0 0)`;
+    if (direction === "center") clipPath = `inset(${50 * (1 - p)}% ${50 * (1 - p)}% ${50 * (1 - p)}% ${50 * (1 - p)}%)`;
+  }
+  if (revealType === "expand") {
+    const s = 0.85 + 0.15 * p;
+    transform = `scale(${s})`;
+    if (direction === "left") transformOrigin = "left center";
+    if (direction === "right") transformOrigin = "right center";
+    if (direction === "top") transformOrigin = "center top";
+    if (direction === "bottom") transformOrigin = "center bottom";
+  }
+  if (revealType === "iris") {
+    clipPath = `circle(${Math.round(150 * p)}% at 50% 50%)`;
+  }
+  const opacity = revealType === "expand" ? p : 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_remotion19.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_remotion19.Img,
+    {
+      src: resolveAsset5(src),
+      style: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        clipPath,
+        transform,
+        transformOrigin,
+        opacity
+      }
+    }
+  ) });
+};
+var ImageRevealComponentMetadata = {
+  kind: "composite",
+  category: "image",
+  description: "Reveals an image with wipe/expand/iris entrance effects",
+  llmGuidance: "Use wipe for directional reveals, expand for subtle pop-in, iris for circular mask openings."
+};
+
+// src/components/composites/ImageSequence.tsx
+var import_remotion20 = require("remotion");
+var import_zod23 = require("zod");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ImageSequencePropsSchema = import_zod23.z.object({
+  basePath: import_zod23.z.string().min(1),
+  frameCount: import_zod23.z.number().int().positive(),
+  filePattern: import_zod23.z.string().default("frame_{frame}.png"),
+  fps: import_zod23.z.number().int().min(1).max(120).default(30)
+});
+function joinPath(base, file) {
+  if (base.endsWith("/")) return `${base}${file}`;
+  return `${base}/${file}`;
+}
+var resolveAsset6 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion20.staticFile)(staticFileInputFromAssetPath(value));
+var ImageSequence = ({ basePath, frameCount, filePattern, fps }) => {
+  const frame = (0, import_remotion20.useCurrentFrame)();
+  const { fps: compFps } = (0, import_remotion20.useVideoConfig)();
+  const index = Math.min(frameCount - 1, Math.max(0, Math.floor(frame * fps / compFps)));
+  const file = filePattern.replace("{frame}", String(index));
+  const src = joinPath(basePath, file);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_remotion20.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_remotion20.Img, { src: resolveAsset6(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) });
+};
+var ImageSequenceComponentMetadata = {
+  kind: "composite",
+  category: "image",
+  description: "Plays a numbered image sequence (frame-by-frame)",
+  llmGuidance: "Use for exported sprite sequences. basePath can be /assets/seq and filePattern like img_{frame}.png."
+};
+
+// src/components/composites/ImageWithCaption.tsx
+var import_remotion21 = require("remotion");
+var import_zod24 = require("zod");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var CaptionStyleSchema = import_zod24.z.object({
+  fontSize: import_zod24.z.number().min(12).max(80).default(32),
+  color: import_zod24.z.string().default("#FFFFFF"),
+  backgroundColor: import_zod24.z.string().default("rgba(0,0,0,0.7)")
+});
+var ImageWithCaptionPropsSchema = import_zod24.z.object({
+  src: import_zod24.z.string().min(1),
+  caption: import_zod24.z.string().max(200),
+  captionPosition: import_zod24.z.enum(["top", "bottom", "overlay"]).default("bottom"),
+  captionStyle: CaptionStyleSchema.optional()
+});
+var resolveAsset7 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion21.staticFile)(staticFileInputFromAssetPath(value));
+var ImageWithCaption = ({ src, caption, captionPosition, captionStyle }) => {
+  const frame = (0, import_remotion21.useCurrentFrame)();
+  const p = (0, import_remotion21.interpolate)(frame, [8, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const style = captionStyle ?? { fontSize: 32, color: "#FFFFFF", backgroundColor: "rgba(0,0,0,0.7)" };
+  const captionBox = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "div",
+    {
+      style: {
+        width: "100%",
+        padding: 22,
+        boxSizing: "border-box",
+        backgroundColor: style.backgroundColor,
+        color: style.color,
+        fontWeight: 800,
+        fontSize: style.fontSize,
+        opacity: p
+      },
+      children: caption
+    }
+  );
+  if (captionPosition === "top" || captionPosition === "bottom") {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_remotion21.AbsoluteFill, { style: { display: "flex", flexDirection: "column" }, children: [
+      captionPosition === "top" ? captionBox : null,
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_remotion21.Img, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) }),
+      captionPosition === "bottom" ? captionBox : null
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_remotion21.AbsoluteFill, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_remotion21.Img, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0 }, children: captionBox })
+  ] });
+};
+var ImageWithCaptionComponentMetadata = {
+  kind: "composite",
+  category: "image",
+  description: "Image with a caption strip (top/bottom) or overlay caption",
+  llmGuidance: "Use overlay for quotes/testimonials over photos. Use bottom for standard captions."
+};
+
+// src/components/composites/InstagramStory.tsx
+var import_remotion22 = require("remotion");
+var import_zod25 = require("zod");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var InstagramStoryPropsSchema = import_zod25.z.object({
+  backgroundImage: import_zod25.z.string().optional(),
+  backgroundColor: import_zod25.z.string().default("#000000"),
+  profilePic: import_zod25.z.string().optional(),
+  username: import_zod25.z.string().optional(),
+  text: import_zod25.z.string().max(100).optional(),
+  sticker: import_zod25.z.enum(["none", "poll", "question", "countdown"]).default("none"),
+  musicTrack: import_zod25.z.string().optional()
+});
+var resolveAsset8 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion22.staticFile)(staticFileInputFromAssetPath(value));
+var InstagramStory = ({
+  backgroundImage,
+  backgroundColor,
+  profilePic,
+  username,
+  text,
+  sticker,
+  musicTrack
+}) => {
+  const frame = (0, import_remotion22.useCurrentFrame)();
+  const fade = (0, import_remotion22.interpolate)(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_remotion22.AbsoluteFill, { style: { backgroundColor }, children: [
+    musicTrack ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_remotion22.Audio, { src: resolveAsset8(musicTrack), volume: 0.6 }) : null,
+    backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_remotion22.Img, { src: resolveAsset8(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover", opacity: fade } }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_remotion22.AbsoluteFill, { style: { padding: 60, boxSizing: "border-box" }, children: [
+      profilePic || username ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 18 }, children: [
+        profilePic ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_remotion22.Img, { src: resolveAsset8(profilePic), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "rgba(255,255,255,0.2)" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 34 }, children: username ?? "username" })
+      ] }) : null,
+      text ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "div",
+        {
+          style: {
+            marginTop: 120,
+            color: "#FFFFFF",
+            fontSize: 54,
+            fontWeight: 900,
+            textShadow: "0 8px 30px rgba(0,0,0,0.6)",
+            maxWidth: 900
+          },
+          children: text
+        }
+      ) : null,
+      sticker !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 60,
+            bottom: 180,
+            width: 520,
+            padding: 28,
+            borderRadius: 22,
+            backgroundColor: "rgba(255,255,255,0.9)",
+            color: "#111",
+            fontWeight: 900,
+            fontSize: 30
+          },
+          children: sticker === "poll" ? "POLL" : sticker === "question" ? "QUESTION" : "COUNTDOWN"
+        }
+      ) : null
+    ] })
+  ] });
+};
+var InstagramStoryComponentMetadata = {
+  kind: "composite",
+  category: "social",
+  description: "Instagram story-style layout with profile header, text overlay, and optional sticker",
+  llmGuidance: "Best with 1080x1920 (9:16). Use backgroundImage + short text + optional sticker for mobile-style content."
+};
+
+// src/components/composites/IntroScene.tsx
+var import_remotion23 = require("remotion");
+var import_zod26 = require("zod");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var IntroScenePropsSchema = import_zod26.z.object({
+  logoSrc: import_zod26.z.string().min(1),
+  companyName: import_zod26.z.string().min(1),
+  tagline: import_zod26.z.string().optional(),
+  backgroundColor: import_zod26.z.string().default("#000000"),
+  primaryColor: import_zod26.z.string().default("#FFFFFF"),
+  musicTrack: import_zod26.z.string().optional()
+});
+var resolveAsset9 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion23.staticFile)(staticFileInputFromAssetPath(value));
+var IntroScene = ({
+  logoSrc,
+  companyName,
+  tagline,
+  backgroundColor,
+  primaryColor,
+  musicTrack,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion23.useCurrentFrame)();
+  const { fps } = (0, import_remotion23.useVideoConfig)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const logoP = (0, import_remotion23.spring)({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const nameOpacity = (0, import_remotion23.interpolate)(frame, [20, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const taglineY = (0, import_remotion23.interpolate)(frame, [50, 80], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const outroFade = (0, import_remotion23.interpolate)(frame, [Math.max(0, total - 20), total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_remotion23.AbsoluteFill, { style: { backgroundColor, justifyContent: "center", alignItems: "center" }, children: [
+    musicTrack ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_remotion23.Audio, { src: resolveAsset9(musicTrack), volume: 0.7 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { textAlign: "center", opacity: outroFade }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        import_remotion23.Img,
+        {
+          src: resolveAsset9(logoSrc),
+          style: { width: 280, height: 280, objectFit: "contain", transform: `scale(${logoP})` }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { marginTop: 24, color: primaryColor, fontSize: 64, fontWeight: 900, opacity: nameOpacity }, children: companyName }),
+      tagline ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "div",
+        {
+          style: {
+            marginTop: 12,
+            color: primaryColor,
+            fontSize: 32,
+            fontWeight: 700,
+            opacity: nameOpacity,
+            transform: `translateY(${taglineY}px)`
+          },
+          children: tagline
+        }
+      ) : null
+    ] })
+  ] });
+};
+var IntroSceneComponentMetadata = {
+  kind: "composite",
+  category: "branding",
+  description: "Branded intro scene (logo + company name + optional tagline)",
+  llmGuidance: "Use as the first segment. Works best at 3-5 seconds. musicTrack can add ambience."
+};
+
+// src/components/composites/KenBurnsImage.tsx
+var import_remotion24 = require("remotion");
+var import_zod27 = require("zod");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var KenBurnsImagePropsSchema = import_zod27.z.object({
+  src: import_zod27.z.string().min(1),
+  startScale: import_zod27.z.number().min(1).max(2).default(1),
+  endScale: import_zod27.z.number().min(1).max(2).default(1.2),
+  panDirection: import_zod27.z.enum(["none", "left", "right", "up", "down"]).default("none"),
+  panAmount: import_zod27.z.number().min(0).max(100).default(50)
+});
+var resolveAsset10 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion24.staticFile)(staticFileInputFromAssetPath(value));
+var KenBurnsImage = ({
+  src,
+  startScale,
+  endScale,
+  panDirection,
+  panAmount,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion24.useCurrentFrame)();
+  const duration = Math.max(1, __wavesDurationInFrames ?? 1);
+  const t = (0, import_remotion24.interpolate)(frame, [0, duration], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const scale = startScale + (endScale - startScale) * t;
+  const dx = panDirection === "left" ? -panAmount * t : panDirection === "right" ? panAmount * t : 0;
+  const dy = panDirection === "up" ? -panAmount * t : panDirection === "down" ? panAmount * t : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_remotion24.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_remotion24.Img,
+    {
+      src: resolveAsset10(src),
+      style: {
+        width: "110%",
+        height: "110%",
+        objectFit: "cover",
+        transform: `translate(${dx}px, ${dy}px) scale(${scale})`,
+        transformOrigin: "center center"
+      }
+    }
+  ) });
+};
+var KenBurnsImageComponentMetadata = {
+  kind: "composite",
+  category: "image",
+  description: "Slow zoom and pan (Ken Burns effect) for a still image",
+  llmGuidance: "Classic documentary-style motion. startScale 1 -> endScale 1.2 is subtle; add panDirection for extra movement."
+};
+
+// src/components/composites/KineticTypography.tsx
+var import_remotion25 = require("remotion");
+var import_zod28 = require("zod");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var WordSchema = import_zod28.z.object({
+  text: import_zod28.z.string().min(1),
+  emphasis: import_zod28.z.enum(["normal", "bold", "giant"]).default("normal")
+});
+var KineticTypographyPropsSchema = import_zod28.z.object({
+  words: import_zod28.z.array(WordSchema).min(1).max(50),
+  fontSize: import_zod28.z.number().min(12).max(140).default(48),
+  color: import_zod28.z.string().default("#FFFFFF"),
+  fontFamily: import_zod28.z.string().default("Inter"),
+  timing: import_zod28.z.array(import_zod28.z.number().int().min(0)).min(1).describe("Frame timing for each word"),
+  transition: import_zod28.z.enum(["fade", "scale", "slideLeft", "slideRight"]).default("scale")
+});
+var KineticTypography = ({
+  words,
+  fontSize,
+  color,
+  fontFamily,
+  timing,
+  transition
+}) => {
+  const frame = (0, import_remotion25.useCurrentFrame)();
+  const { fps } = (0, import_remotion25.useVideoConfig)();
+  const starts = (() => {
+    if (timing.length >= words.length) return timing.slice(0, words.length);
+    const last = timing.length ? timing[timing.length - 1] : 0;
+    const extra = Array.from({ length: words.length - timing.length }, () => last + 15);
+    return [...timing, ...extra];
+  })();
+  let activeIndex = 0;
+  for (let i = 0; i < words.length; i++) {
+    if (frame >= (starts[i] ?? 0)) activeIndex = i;
+  }
+  const word = words[activeIndex];
+  const start = starts[activeIndex] ?? 0;
+  const p = (0, import_remotion25.spring)({ frame: frame - start, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const progress = Math.max(0, Math.min(1, p));
+  const scaleBase = word.emphasis === "giant" ? 2 : word.emphasis === "bold" ? 1.3 : 1;
+  const opacity = transition === "fade" ? progress : 1;
+  const scale = transition === "scale" ? (0.85 + 0.15 * progress) * scaleBase : 1 * scaleBase;
+  const tx = transition === "slideLeft" ? 40 * (1 - progress) : transition === "slideRight" ? -40 * (1 - progress) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_remotion25.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "div",
+    {
+      style: {
+        fontSize,
+        color,
+        fontFamily,
+        fontWeight: word.emphasis === "normal" ? 800 : 900,
+        textTransform: "uppercase",
+        letterSpacing: 1,
+        opacity,
+        transform: `translateX(${tx}px) scale(${scale})`
+      },
+      children: word.text
+    }
+  ) });
+};
+var KineticTypographyComponentMetadata = {
+  kind: "composite",
+  category: "text",
+  description: "Rhythmic single-word kinetic typography driven by a timing array",
+  llmGuidance: 'Provide timing frames for when each word appears. Use emphasis="giant" sparingly for impact.'
+};
+
+// src/components/composites/LineGraph.tsx
+var import_remotion26 = require("remotion");
+var import_zod29 = require("zod");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var PointSchema = import_zod29.z.object({ x: import_zod29.z.number(), y: import_zod29.z.number() });
+var LineGraphPropsSchema = import_zod29.z.object({
+  data: import_zod29.z.array(PointSchema).min(2).max(50),
+  color: import_zod29.z.string().default("#00FF00"),
+  strokeWidth: import_zod29.z.number().min(1).max(10).default(3),
+  showDots: import_zod29.z.boolean().default(true),
+  fillArea: import_zod29.z.boolean().default(false),
+  animate: import_zod29.z.enum(["draw", "reveal"]).default("draw")
+});
+function normalize(data, w, h, pad) {
+  const xs = data.map((d) => d.x);
+  const ys = data.map((d) => d.y);
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+  return data.map((d) => ({
+    x: pad + (maxX === minX ? (w - 2 * pad) / 2 : (d.x - minX) / (maxX - minX) * (w - 2 * pad)),
+    y: pad + (maxY === minY ? (h - 2 * pad) / 2 : (1 - (d.y - minY) / (maxY - minY)) * (h - 2 * pad))
+  }));
+}
+function toPath(points) {
+  return points.reduce((acc, p, i) => i === 0 ? `M ${p.x} ${p.y}` : `${acc} L ${p.x} ${p.y}`, "");
+}
+var LineGraph = ({
+  data,
+  color,
+  strokeWidth,
+  showDots,
+  fillArea,
+  animate,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion26.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const progress = (0, import_remotion26.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const w = 1e3;
+  const h = 520;
+  const pad = 30;
+  const pts = normalize(data, w, h, pad);
+  const d = toPath(pts);
+  const dash = 3e3;
+  const dashOffset = dash * (1 - progress);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_remotion26.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("clipPath", { id: "waves-line-reveal", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("rect", { x: "0", y: "0", width: w * progress, height: h }) }) }),
+    fillArea ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "path",
+      {
+        d: `${d} L ${pts[pts.length - 1].x} ${h - pad} L ${pts[0].x} ${h - pad} Z`,
+        fill: color,
+        opacity: 0.12,
+        clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "path",
+      {
+        d,
+        fill: "none",
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeDasharray: animate === "draw" ? dash : void 0,
+        strokeDashoffset: animate === "draw" ? dashOffset : void 0,
+        clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0
+      }
+    ),
+    showDots ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("g", { clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0, children: pts.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: p.x, cy: p.y, r: 6, fill: color }, i)) }) : null
+  ] }) });
+};
+var LineGraphComponentMetadata = {
+  kind: "composite",
+  category: "data",
+  description: "Animated line graph (SVG) with draw/reveal modes",
+  llmGuidance: 'Use 5-20 points. animate="draw" traces the line; animate="reveal" wipes it left-to-right.'
+};
+
+// src/components/composites/LogoReveal.tsx
+var import_remotion27 = require("remotion");
+var import_zod30 = require("zod");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var LogoRevealPropsSchema = import_zod30.z.object({
+  logoSrc: import_zod30.z.string().min(1),
+  effect: import_zod30.z.enum(["fade", "scale", "rotate", "slide"]).default("scale"),
+  backgroundColor: import_zod30.z.string().default("#000000"),
+  soundEffect: import_zod30.z.string().optional()
+});
+var resolveAsset11 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion27.staticFile)(staticFileInputFromAssetPath(value));
+var LogoReveal = ({ logoSrc, effect, backgroundColor, soundEffect }) => {
+  const frame = (0, import_remotion27.useCurrentFrame)();
+  const { fps } = (0, import_remotion27.useVideoConfig)();
+  const p = (0, import_remotion27.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } });
+  const opacity = effect === "fade" ? p : Math.min(1, Math.max(0, p));
+  const scale = effect === "scale" ? p : 1;
+  const rotate = effect === "rotate" ? (1 - p) * 360 : 0;
+  const translateY = effect === "slide" ? -200 * (1 - p) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_remotion27.AbsoluteFill, { style: { backgroundColor, justifyContent: "center", alignItems: "center" }, children: [
+    soundEffect ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_remotion27.Audio, { src: resolveAsset11(soundEffect), volume: 1 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      import_remotion27.Img,
+      {
+        src: resolveAsset11(logoSrc),
+        style: {
+          width: 320,
+          height: 320,
+          objectFit: "contain",
+          opacity,
+          transform: `translateY(${translateY}px) scale(${scale}) rotate(${rotate}deg)`
+        }
+      }
+    )
+  ] });
+};
+var LogoRevealComponentMetadata = {
+  kind: "composite",
+  category: "branding",
+  description: "Logo intro animation (fade/scale/rotate/slide), optionally with a sound effect",
+  llmGuidance: "Use for intros/outros. Keep the logo high-contrast and centered. soundEffect can be a short sting."
+};
+
+// src/components/composites/OutroScene.tsx
+var import_remotion28 = require("remotion");
+var import_zod31 = require("zod");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var CtaSchema = import_zod31.z.object({ text: import_zod31.z.string().min(1), icon: import_zod31.z.string().optional() });
+var HandleSchema = import_zod31.z.object({
+  platform: import_zod31.z.enum(["twitter", "instagram", "youtube", "linkedin"]),
+  handle: import_zod31.z.string().min(1)
+});
+var OutroScenePropsSchema = import_zod31.z.object({
+  logoSrc: import_zod31.z.string().min(1),
+  message: import_zod31.z.string().default("Thank You"),
+  ctaButtons: import_zod31.z.array(CtaSchema).max(3).optional(),
+  socialHandles: import_zod31.z.array(HandleSchema).max(4).optional(),
+  backgroundColor: import_zod31.z.string().default("#000000")
+});
+var resolveAsset12 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion28.staticFile)(staticFileInputFromAssetPath(value));
+var OutroScene = ({ logoSrc, message, ctaButtons, socialHandles, backgroundColor }) => {
+  const frame = (0, import_remotion28.useCurrentFrame)();
+  const { fps } = (0, import_remotion28.useVideoConfig)();
+  const logoP = (0, import_remotion28.spring)({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const msgP = (0, import_remotion28.spring)({ frame: frame - 18, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const ctaP = (0, import_remotion28.spring)({ frame: frame - 40, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_remotion28.AbsoluteFill, { style: { backgroundColor, justifyContent: "center", alignItems: "center", padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { textAlign: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_remotion28.Img, { src: resolveAsset12(logoSrc), style: { width: 220, height: 220, objectFit: "contain", transform: `scale(${logoP})` } }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: { marginTop: 24, color: "#FFFFFF", fontSize: 72, fontWeight: 1e3, opacity: msgP }, children: message }),
+    ctaButtons?.length ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: { marginTop: 34, display: "flex", gap: 18, justifyContent: "center", opacity: ctaP }, children: ctaButtons.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      "div",
+      {
+        style: {
+          padding: "18px 28px",
+          borderRadius: 18,
+          backgroundColor: "rgba(255,255,255,0.12)",
+          color: "#FFFFFF",
+          fontSize: 28,
+          fontWeight: 900
+        },
+        children: [
+          b.icon ? `${b.icon} ` : "",
+          b.text
+        ]
+      },
+      i
+    )) }) : null,
+    socialHandles?.length ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: { marginTop: 50, display: "flex", flexDirection: "column", gap: 10, opacity: ctaP }, children: socialHandles.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { color: "rgba(255,255,255,0.85)", fontSize: 26, fontWeight: 800 }, children: [
+      h.platform,
+      ": ",
+      h.handle
+    ] }, i)) }) : null
+  ] }) });
+};
+var OutroSceneComponentMetadata = {
+  kind: "composite",
+  category: "branding",
+  description: "End screen with logo, message, optional CTA buttons and social handles",
+  llmGuidance: "Use as the last segment. Keep CTAs <=3 for clarity."
+};
+
+// src/components/composites/OutlineText.tsx
+var import_remotion29 = require("remotion");
+var import_zod32 = require("zod");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var OutlineTextPropsSchema = import_zod32.z.object({
+  content: import_zod32.z.string().max(50),
+  fontSize: import_zod32.z.number().min(8).max(240).default(96),
+  outlineColor: import_zod32.z.string().default("#FFFFFF"),
+  fillColor: import_zod32.z.string().default("#000000"),
+  fontFamily: import_zod32.z.string().default("Inter"),
+  fontWeight: import_zod32.z.number().int().min(100).max(900).default(800),
+  position: import_zod32.z.enum(["top", "center", "bottom"]).default("center"),
+  animation: import_zod32.z.enum(["draw", "fill"]).default("draw"),
+  strokeWidth: import_zod32.z.number().min(1).max(10).default(3)
+});
+var positionStyles3 = (position) => {
+  if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
+  if (position === "bottom") return { justifyContent: "center", alignItems: "flex-end", paddingBottom: 90 };
+  return { justifyContent: "center", alignItems: "center" };
+};
+var OutlineText = ({
+  content,
+  fontSize,
+  outlineColor,
+  fillColor,
+  fontFamily,
+  fontWeight,
+  position,
+  animation,
+  strokeWidth
+}) => {
+  const frame = (0, import_remotion29.useCurrentFrame)();
+  const t = (0, import_remotion29.interpolate)(frame, [0, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const strokeOpacity = animation === "draw" ? t : 1;
+  const fillOpacity = animation === "fill" ? t : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_remotion29.AbsoluteFill, { style: { display: "flex", ...positionStyles3(position) }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "div",
+      {
+        style: {
+          fontSize,
+          fontFamily,
+          fontWeight,
+          color: fillColor,
+          opacity: fillOpacity,
+          WebkitTextStroke: `${strokeWidth}px ${outlineColor}`,
+          textShadow: `0 0 1px ${outlineColor}`,
+          textAlign: "center",
+          lineHeight: 1
+        },
+        children: content
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          fontSize,
+          fontFamily,
+          fontWeight,
+          color: "transparent",
+          opacity: strokeOpacity,
+          WebkitTextStroke: `${strokeWidth}px ${outlineColor}`,
+          textAlign: "center",
+          lineHeight: 1
+        },
+        children: content
+      }
+    )
+  ] });
+};
+var OutlineTextComponentMetadata = {
+  kind: "composite",
+  category: "text",
+  description: "Outlined title text with simple draw/fill animation",
+  llmGuidance: 'Use for bold titles. animation="draw" emphasizes the outline; animation="fill" reveals the fill color.'
+};
+
+// src/components/composites/ProgressBar.tsx
+var import_remotion30 = require("remotion");
+var import_zod33 = require("zod");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var ProgressBarPropsSchema = import_zod33.z.object({
+  label: import_zod33.z.string().optional(),
+  color: import_zod33.z.string().default("#00FF00"),
+  backgroundColor: import_zod33.z.string().default("rgba(255,255,255,0.2)"),
+  height: import_zod33.z.number().min(5).max(50).default(10),
+  position: import_zod33.z.enum(["top", "bottom"]).default("bottom"),
+  showPercentage: import_zod33.z.boolean().default(true)
+});
+var ProgressBar = ({
+  label,
+  color,
+  backgroundColor,
+  height,
+  position,
+  showPercentage,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion30.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const p = (0, import_remotion30.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const pct = Math.round(p * 100);
+  const yStyle = position === "top" ? { top: 50 } : { bottom: 50 };
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_remotion30.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { position: "absolute", left: 80, right: 80, ...yStyle }, children: [
+    label || showPercentage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 10, color: "#FFFFFF", fontWeight: 700 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: label ?? "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: showPercentage ? `${pct}%` : "" })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { width: "100%", height, backgroundColor, borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { width: `${pct}%`, height: "100%", backgroundColor: color } }) })
+  ] }) });
+};
+var ProgressBarComponentMetadata = {
+  kind: "composite",
+  category: "data",
+  description: "Animated progress bar that fills over the component duration",
+  llmGuidance: "Use for loading/countdowns. showPercentage=true is helpful for clarity."
+};
+
+// src/components/composites/ProgressRing.tsx
+var import_remotion31 = require("remotion");
+var import_zod34 = require("zod");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var ProgressRingPropsSchema = import_zod34.z.object({
+  percentage: import_zod34.z.number().min(0).max(100),
+  size: import_zod34.z.number().min(100).max(500).default(200),
+  strokeWidth: import_zod34.z.number().min(5).max(50).default(20),
+  color: import_zod34.z.string().default("#00FF00"),
+  backgroundColor: import_zod34.z.string().default("rgba(255,255,255,0.2)"),
+  showLabel: import_zod34.z.boolean().default(true)
+});
+var ProgressRing = ({
+  percentage,
+  size,
+  strokeWidth,
+  color,
+  backgroundColor,
+  showLabel,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion31.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const p = (0, import_remotion31.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const current = percentage * p;
+  const r = (size - strokeWidth) / 2;
+  const c = 2 * Math.PI * r;
+  const dash = c;
+  const offset = c - current / 100 * c;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_remotion31.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "circle",
+        {
+          cx: size / 2,
+          cy: size / 2,
+          r,
+          stroke: backgroundColor,
+          strokeWidth,
+          fill: "transparent"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "circle",
+        {
+          cx: size / 2,
+          cy: size / 2,
+          r,
+          stroke: color,
+          strokeWidth,
+          fill: "transparent",
+          strokeDasharray: dash,
+          strokeDashoffset: offset,
+          strokeLinecap: "round",
+          transform: `rotate(-90 ${size / 2} ${size / 2})`
+        }
+      )
+    ] }),
+    showLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: { position: "absolute", color: "#FFFFFF", fontWeight: 800, fontSize: Math.round(size * 0.22) }, children: [
+      Math.round(current),
+      "%"
+    ] }) : null
+  ] });
+};
+var ProgressRingComponentMetadata = {
+  kind: "composite",
+  category: "data",
+  description: "Circular progress indicator (SVG) that animates from 0 to percentage over duration",
+  llmGuidance: "Use for completion and goals. size 160-260 is typical. showLabel displays the percentage."
+};
+
+// src/components/composites/SlideTransition.tsx
+var import_remotion32 = require("remotion");
+var import_zod35 = require("zod");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var SlideTransitionPropsSchema = import_zod35.z.object({
+  durationInFrames: import_zod35.z.number().int().min(10).max(60).default(30),
+  direction: import_zod35.z.enum(["left", "right", "up", "down"]).default("left"),
+  distance: import_zod35.z.number().int().min(1).max(2e3).default(160),
+  phase: import_zod35.z.enum(["in", "out", "inOut"]).default("inOut")
+});
+function translateFor(direction, delta) {
+  if (direction === "left") return { x: -delta, y: 0 };
+  if (direction === "right") return { x: delta, y: 0 };
+  if (direction === "up") return { x: 0, y: -delta };
+  return { x: 0, y: delta };
+}
+var SlideTransition = ({
+  durationInFrames,
+  direction,
+  distance,
+  phase,
+  children,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion32.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(durationInFrames, total);
+  let opacity = 1;
+  let tx = 0;
+  let ty = 0;
+  if (phase === "in" || phase === "inOut") {
+    const t = (0, import_remotion32.interpolate)(frame, [0, d], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const { x, y } = translateFor(direction, distance * t);
+    tx += x;
+    ty += y;
+    opacity *= (0, import_remotion32.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  }
+  if (phase === "out" || phase === "inOut") {
+    const start = Math.max(0, total - d);
+    const t = (0, import_remotion32.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const opposite = direction === "left" ? "right" : direction === "right" ? "left" : direction === "up" ? "down" : "up";
+    const { x, y } = translateFor(opposite, distance * t);
+    tx += x;
+    ty += y;
+    opacity *= (0, import_remotion32.interpolate)(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_remotion32.AbsoluteFill, { style: { opacity, transform: `translate(${tx}px, ${ty}px)` }, children });
+};
+var SlideTransitionComponentMetadata = {
+  kind: "composite",
+  category: "transition",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Slide in/out wrapper (used for segment transitions and overlays)",
+  llmGuidance: "Use for more dynamic transitions. direction controls where content enters from."
+};
+
+// src/components/composites/SplitScreen.tsx
+var import_react2 = __toESM(require("react"));
+var import_remotion33 = require("remotion");
+var import_zod36 = require("zod");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var SplitScreenPropsSchema = import_zod36.z.object({
+  orientation: import_zod36.z.enum(["vertical", "horizontal"]).default("vertical"),
+  split: import_zod36.z.number().min(0.1).max(0.9).default(0.5),
+  gap: import_zod36.z.number().min(0).default(48),
+  padding: import_zod36.z.number().min(0).default(80),
+  dividerColor: import_zod36.z.string().optional()
+});
+var SplitScreen = ({
+  orientation,
+  split,
+  gap,
+  padding,
+  dividerColor,
+  children
+}) => {
+  const items = import_react2.default.Children.toArray(children);
+  const first = items[0] ?? null;
+  const second = items[1] ?? null;
+  const isVertical = orientation === "vertical";
+  const flexDirection = isVertical ? "row" : "column";
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_remotion33.AbsoluteFill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { style: { display: "flex", flexDirection, gap, width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { style: { flex: split, position: "relative" }, children: first }),
+    dividerColor ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "div",
+      {
+        style: {
+          backgroundColor: dividerColor,
+          width: isVertical ? 2 : "100%",
+          height: isVertical ? "100%" : 2,
+          opacity: 0.7
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { style: { flex: 1 - split, position: "relative" }, children: second })
+  ] }) });
+};
+var SplitScreenComponentMetadata = {
+  kind: "composite",
+  category: "layout",
+  acceptsChildren: true,
+  minChildren: 2,
+  maxChildren: 2,
+  description: "Two-panel split screen layout",
+  llmGuidance: 'Provide exactly 2 children. Use orientation="vertical" for left/right and "horizontal" for top/bottom.'
+};
+
+// src/components/composites/SplitText.tsx
+var import_remotion34 = require("remotion");
+var import_zod37 = require("zod");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var SplitTextPropsSchema = import_zod37.z.object({
+  content: import_zod37.z.string().max(200),
+  fontSize: import_zod37.z.number().min(8).max(200).default(48),
+  color: import_zod37.z.string().default("#FFFFFF"),
+  fontFamily: import_zod37.z.string().default("Inter"),
+  position: import_zod37.z.enum(["top", "center", "bottom"]).default("center"),
+  splitBy: import_zod37.z.enum(["word", "letter"]).default("word"),
+  stagger: import_zod37.z.number().int().min(1).max(10).default(3),
+  animation: import_zod37.z.enum(["fade", "slideUp", "slideDown", "scale", "rotate"]).default("slideUp")
+});
+var positionStyles4 = (position) => {
+  if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 80 };
+  if (position === "bottom") return { justifyContent: "center", alignItems: "flex-end", paddingBottom: 80 };
+  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
+}) => {
+  const frame = (0, import_remotion34.useCurrentFrame)();
+  const { fps } = (0, import_remotion34.useVideoConfig)();
+  const items = splitBy === "letter" ? content.split("") : content.trim().split(/\s+/);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_remotion34.AbsoluteFill, { style: { display: "flex", ...positionStyles4(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gap: splitBy === "letter" ? 0 : 12,
+        fontSize,
+        color,
+        fontFamily,
+        fontWeight: 700,
+        textAlign: "center"
+      },
+      children: items.map((t, i) => {
+        const progress = (0, import_remotion34.spring)({
+          frame: frame - i * stagger,
+          fps,
+          config: { damping: 14, stiffness: 120, mass: 0.9 }
+        });
+        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "span",
+          {
+            style: {
+              display: "inline-block",
+              whiteSpace: t === " " ? "pre" : "pre-wrap",
+              ...getItemStyle(progress, animation)
+            },
+            children: splitBy === "word" ? `${t} ` : t
+          },
+          `${i}-${t}`
+        );
+      })
+    }
+  ) });
+};
+var SplitTextComponentMetadata = {
+  kind: "composite",
+  category: "text",
+  description: "Animated text where each word or letter enters with a staggered effect",
+  llmGuidance: 'Use for titles. splitBy="word" is best for phrases; splitBy="letter" is dramatic for short words.',
+  examples: [
+    { content: "Welcome to Waves", splitBy: "word", stagger: 3, animation: "slideUp" },
+    { content: "HELLO", splitBy: "letter", stagger: 2, animation: "scale" }
+  ]
+};
+
+// src/components/composites/SubtitleText.tsx
+var import_remotion35 = require("remotion");
+var import_zod38 = require("zod");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var SubtitleTextPropsSchema = import_zod38.z.object({
+  text: import_zod38.z.string().max(200),
+  fontSize: import_zod38.z.number().min(12).max(80).default(36),
+  color: import_zod38.z.string().default("#FFFFFF"),
+  backgroundColor: import_zod38.z.string().default("rgba(0,0,0,0.7)"),
+  fontFamily: import_zod38.z.string().default("Inter"),
+  position: import_zod38.z.enum(["top", "bottom"]).default("bottom"),
+  maxWidth: import_zod38.z.number().min(200).max(1200).default(800),
+  padding: import_zod38.z.number().min(0).max(80).default(20),
+  highlightWords: import_zod38.z.array(import_zod38.z.string()).optional()
+});
+function normalizeWord(w) {
+  return w.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+var SubtitleText = ({
+  text,
+  fontSize,
+  color,
+  backgroundColor,
+  fontFamily,
+  position,
+  maxWidth,
+  padding,
+  highlightWords,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion35.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const inFade = (0, import_remotion35.interpolate)(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const outFade = (0, import_remotion35.interpolate)(frame, [Math.max(0, total - 10), total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const opacity = inFade * outFade;
+  const highlights = new Set((highlightWords ?? []).map(normalizeWord));
+  const tokens = text.split(/\s+/);
+  const yStyle = position === "top" ? { top: 70 } : { bottom: 90 };
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_remotion35.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { position: "absolute", left: "50%", transform: "translateX(-50%)", maxWidth, width: "100%", ...yStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "div",
+    {
+      style: {
+        display: "inline-block",
+        backgroundColor,
+        padding,
+        borderRadius: 18,
+        opacity,
+        color,
+        fontSize,
+        fontFamily,
+        fontWeight: 800,
+        lineHeight: 1.2,
+        textAlign: "center"
+      },
+      children: tokens.map((t, i) => {
+        const n = normalizeWord(t);
+        const isHighlighted = highlights.has(n);
+        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { style: { color: isHighlighted ? "#FFD60A" : color, marginRight: 8 }, children: t }, i);
+      })
+    }
+  ) }) });
+};
+var SubtitleTextComponentMetadata = {
+  kind: "composite",
+  category: "text",
+  description: "Caption/subtitle box with fade in/out and optional highlighted words",
+  llmGuidance: "Use for narration/captions. highlightWords helps emphasize key terms."
+};
+
+// src/components/composites/TikTokCaption.tsx
+var import_remotion36 = require("remotion");
+var import_zod39 = require("zod");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var TikTokCaptionPropsSchema = import_zod39.z.object({
+  text: import_zod39.z.string().max(150),
+  fontSize: import_zod39.z.number().min(12).max(120).default(48),
+  color: import_zod39.z.string().default("#FFFFFF"),
+  strokeColor: import_zod39.z.string().default("#000000"),
+  strokeWidth: import_zod39.z.number().min(0).max(10).default(3),
+  position: import_zod39.z.enum(["center", "bottom"]).default("center"),
+  highlightStyle: import_zod39.z.enum(["word", "bounce", "none"]).default("word")
+});
+var TikTokCaption = ({
+  text,
+  fontSize,
+  color,
+  strokeColor,
+  strokeWidth,
+  position,
+  highlightStyle,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion36.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const p = (0, import_remotion36.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const words = text.trim().split(/\s+/);
+  const idx = highlightStyle === "none" ? -1 : Math.min(words.length - 1, Math.floor(p * words.length));
+  const yStyle = position === "bottom" ? { alignItems: "flex-end", paddingBottom: 140 } : { alignItems: "center" };
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_remotion36.AbsoluteFill, { style: { display: "flex", justifyContent: "center", ...yStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { textAlign: "center", padding: "0 80px", fontWeight: 900, lineHeight: 1.1 }, children: words.map((w, i) => {
+    const isActive = i === idx && highlightStyle !== "none";
+    const bounce = isActive && highlightStyle === "bounce" ? (0, import_remotion36.interpolate)(frame % 18, [0, 9, 18], [1, 1.08, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) : 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      "span",
+      {
+        style: {
+          display: "inline-block",
+          marginRight: 12,
+          fontSize,
+          color: isActive ? "#FFD60A" : color,
+          WebkitTextStroke: `${strokeWidth}px ${strokeColor}`,
+          transform: `scale(${bounce})`
+        },
+        children: w
+      },
+      `${i}-${w}`
+    );
+  }) }) });
+};
+var TikTokCaptionComponentMetadata = {
+  kind: "composite",
+  category: "social",
+  description: "TikTok-style captions with stroke and optional word highlighting",
+  llmGuidance: 'Always keep strokeWidth>=2 for readability. highlightStyle="word" or "bounce" makes captions feel dynamic.'
+};
+
+// src/components/composites/ThirdLowerBanner.tsx
+var import_remotion37 = require("remotion");
+var import_zod40 = require("zod");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var ThirdLowerBannerPropsSchema = import_zod40.z.object({
+  name: import_zod40.z.string().max(50),
+  title: import_zod40.z.string().max(100),
+  backgroundColor: import_zod40.z.string().default("rgba(0,0,0,0.8)"),
+  primaryColor: import_zod40.z.string().default("#FFFFFF"),
+  secondaryColor: import_zod40.z.string().default("#CCCCCC"),
+  accentColor: import_zod40.z.string().default("#FF0000"),
+  showAvatar: import_zod40.z.boolean().default(false),
+  avatarSrc: import_zod40.z.string().optional()
+});
+var resolveAsset13 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion37.staticFile)(staticFileInputFromAssetPath(value));
+var ThirdLowerBanner = ({
+  name,
+  title,
+  backgroundColor,
+  primaryColor,
+  secondaryColor,
+  accentColor,
+  showAvatar,
+  avatarSrc
+}) => {
+  const frame = (0, import_remotion37.useCurrentFrame)();
+  const slide = (0, import_remotion37.interpolate)(frame, [0, 18], [-600, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const opacity = (0, import_remotion37.interpolate)(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const avatar = showAvatar && typeof avatarSrc === "string" && avatarSrc.length > 0 ? avatarSrc : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_remotion37.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: 80,
+        bottom: 80,
+        width: 980,
+        height: 160,
+        transform: `translateX(${slide}px)`,
+        opacity,
+        display: "flex",
+        overflow: "hidden",
+        borderRadius: 18,
+        backgroundColor
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { width: 10, backgroundColor: accentColor } }),
+        avatar ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { width: 160, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          import_remotion37.Img,
+          {
+            src: resolveAsset13(avatar),
+            style: { width: 110, height: 110, borderRadius: 9999, objectFit: "cover" }
+          }
+        ) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { padding: "28px 36px", display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { color: primaryColor, fontSize: 54, fontWeight: 800, lineHeight: 1 }, children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { marginTop: 10, color: secondaryColor, fontSize: 28, fontWeight: 600 }, children: title })
+        ] })
+      ]
+    }
+  ) });
+};
+var ThirdLowerBannerComponentMetadata = {
+  kind: "composite",
+  category: "layout",
+  description: "Broadcast-style lower-third banner with name/title and optional avatar",
+  llmGuidance: "Use for speaker introductions. name = big label, title = smaller subtitle. showAvatar + avatarSrc for profile image.",
+  examples: [
+    { name: "Alex Chen", title: "Product Designer", accentColor: "#FF3B30" },
+    { name: "Depths AI", title: "Waves v0.2.0", showAvatar: false }
+  ]
+};
+
+// src/components/composites/TypewriterText.tsx
+var import_remotion38 = require("remotion");
+var import_zod41 = require("zod");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var TypewriterTextPropsSchema = import_zod41.z.object({
+  content: import_zod41.z.string().max(500),
+  fontSize: import_zod41.z.number().min(8).max(200).default(48),
+  color: import_zod41.z.string().default("#FFFFFF"),
+  fontFamily: import_zod41.z.string().default("Inter"),
+  position: import_zod41.z.enum(["top", "center", "bottom"]).default("center"),
+  speed: import_zod41.z.number().min(0.5).max(5).default(2),
+  showCursor: import_zod41.z.boolean().default(true),
+  cursorColor: import_zod41.z.string().default("#FFFFFF")
+});
+var positionStyles5 = (position) => {
+  if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 80 };
+  if (position === "bottom") return { justifyContent: "center", alignItems: "flex-end", paddingBottom: 80 };
+  return { justifyContent: "center", alignItems: "center" };
+};
+var TypewriterText = ({
+  content,
+  fontSize,
+  color,
+  fontFamily,
+  position,
+  speed,
+  showCursor,
+  cursorColor
+}) => {
+  const frame = (0, import_remotion38.useCurrentFrame)();
+  const charCount = Math.min(content.length, Math.max(0, Math.floor(frame * speed)));
+  const shown = content.slice(0, charCount);
+  const cursorVisible = showCursor && charCount < content.length ? frame % 30 < 15 : false;
+  const cursorOpacity = cursorVisible ? 1 : 0;
+  const cursorFade = (0, import_remotion38.interpolate)(frame % 30, [0, 5], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_remotion38.AbsoluteFill, { style: { display: "flex", ...positionStyles5(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: { fontSize, color, fontFamily, fontWeight: 600, textAlign: "center", whiteSpace: "pre-wrap" }, children: [
+    shown,
+    showCursor ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { style: { color: cursorColor, opacity: cursorOpacity * cursorFade }, children: "|" }) : null
+  ] }) });
+};
+var TypewriterTextComponentMetadata = {
+  kind: "composite",
+  category: "text",
+  description: "Character-by-character text reveal with optional blinking cursor",
+  llmGuidance: "Use for dramatic reveals and terminal-style text. speed ~1-2 is readable; 3-5 is fast.",
+  examples: [
+    { content: "Hello Waves", speed: 2, position: "center", fontSize: 72 },
+    { content: 'console.log("hi")', speed: 1.5, fontFamily: "monospace", position: "top" }
+  ]
+};
+
+// src/components/composites/TwitterCard.tsx
+var import_remotion39 = require("remotion");
+var import_zod42 = require("zod");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var TwitterCardPropsSchema = import_zod42.z.object({
+  author: import_zod42.z.string().min(1),
+  handle: import_zod42.z.string().min(1),
+  avatarSrc: import_zod42.z.string().optional(),
+  tweet: import_zod42.z.string().max(280),
+  image: import_zod42.z.string().optional(),
+  timestamp: import_zod42.z.string().optional(),
+  verified: import_zod42.z.boolean().default(false)
+});
+var resolveAsset14 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion39.staticFile)(staticFileInputFromAssetPath(value));
+var TwitterCard = ({ author, handle, avatarSrc, tweet, image, timestamp, verified }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_remotion39.AbsoluteFill, { style: { backgroundColor: "#0B0F14", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    "div",
+    {
+      style: {
+        width: 1100,
+        borderRadius: 28,
+        backgroundColor: "#FFFFFF",
+        padding: 48,
+        boxSizing: "border-box",
+        boxShadow: "0 30px 90px rgba(0,0,0,0.35)"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: { display: "flex", gap: 18, alignItems: "center" }, children: [
+          avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_remotion39.Img, { src: resolveAsset14(avatarSrc), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "#E5E7EB" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { fontSize: 34, fontWeight: 900, color: "#111827" }, children: author }),
+              verified ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { fontSize: 26, color: "#1D9BF0", fontWeight: 900 }, children: "\u2713" }) : null
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { fontSize: 26, color: "#6B7280", fontWeight: 800 }, children: handle })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { marginTop: 28, fontSize: 36, lineHeight: 1.25, color: "#111827", fontWeight: 700 }, children: tweet }),
+        image ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { marginTop: 28, width: "100%", height: 520, overflow: "hidden", borderRadius: 22, backgroundColor: "#F3F4F6" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_remotion39.Img, { src: resolveAsset14(image), style: { width: "100%", height: "100%", objectFit: "cover" } }) }) : null,
+        timestamp ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { marginTop: 22, fontSize: 22, color: "#6B7280", fontWeight: 700 }, children: timestamp }) : null
+      ]
+    }
+  ) });
+};
+var TwitterCardComponentMetadata = {
+  kind: "composite",
+  category: "social",
+  description: "Twitter/X post card layout with author header and optional image",
+  llmGuidance: "Use for announcements/testimonials. Keep tweet short for readability."
+};
+
+// src/components/composites/Watermark.tsx
+var import_remotion40 = require("remotion");
+var import_zod43 = require("zod");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var WatermarkPropsSchema = import_zod43.z.object({
+  type: import_zod43.z.enum(["logo", "text"]).default("logo"),
+  src: import_zod43.z.string().optional(),
+  text: import_zod43.z.string().optional(),
+  position: import_zod43.z.enum(["topLeft", "topRight", "bottomLeft", "bottomRight"]).default("bottomRight"),
+  opacity: import_zod43.z.number().min(0.1).max(1).default(0.5),
+  size: import_zod43.z.number().min(30).max(150).default(60),
+  color: import_zod43.z.string().default("#FFFFFF")
+});
+var resolveAsset15 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion40.staticFile)(staticFileInputFromAssetPath(value));
+function posStyle(position) {
+  const offset = 30;
+  if (position === "topLeft") return { left: offset, top: offset };
+  if (position === "topRight") return { right: offset, top: offset };
+  if (position === "bottomLeft") return { left: offset, bottom: offset };
+  return { right: offset, bottom: offset };
+}
+var Watermark = ({ type, src, text, position, opacity, size, color }) => {
+  const style = {
+    position: "absolute",
+    ...posStyle(position),
+    opacity,
+    pointerEvents: "none"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_remotion40.AbsoluteFill, { children: type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: { ...style, fontSize: Math.round(size * 0.6), color, fontWeight: 700 }, children: text ?? "" }) : src ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    import_remotion40.Img,
+    {
+      src: resolveAsset15(src),
+      style: { ...style, width: size, height: size, objectFit: "contain" }
+    }
+  ) : null });
+};
+var WatermarkComponentMetadata = {
+  kind: "composite",
+  category: "branding",
+  description: "Persistent logo/text watermark in a corner",
+  llmGuidance: "Use subtle opacity (0.3-0.6). bottomRight is standard.",
+  examples: [
+    { type: "text", text: "@depths.ai", position: "bottomRight", opacity: 0.4, size: 60 },
+    { type: "logo", src: "/assets/logo.png", position: "topLeft", opacity: 0.5, size: 70 }
+  ]
+};
+
+// src/components/composites/WipeTransition.tsx
+var import_remotion41 = require("remotion");
+var import_zod44 = require("zod");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var WipeTransitionPropsSchema = import_zod44.z.object({
+  durationInFrames: import_zod44.z.number().int().min(10).max(60).default(30),
+  direction: import_zod44.z.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
+  softEdge: import_zod44.z.boolean().default(false),
+  phase: import_zod44.z.enum(["in", "out", "inOut"]).default("inOut")
+});
+function clipFor2(direction, p) {
+  if (direction === "left") return `inset(0 ${100 * (1 - p)}% 0 0)`;
+  if (direction === "right") return `inset(0 0 0 ${100 * (1 - p)}%)`;
+  if (direction === "up") return `inset(0 0 ${100 * (1 - p)}% 0)`;
+  if (direction === "down") return `inset(${100 * (1 - p)}% 0 0 0)`;
+  return `polygon(0 0, ${100 * p}% 0, 0 ${100 * p}%)`;
+}
+var WipeTransition = ({
+  durationInFrames,
+  direction,
+  softEdge,
+  phase,
+  children,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion41.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(durationInFrames, total);
+  let clipPath;
+  if (phase === "in" || phase === "inOut") {
+    const t = (0, import_remotion41.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    clipPath = clipFor2(direction, t);
+  }
+  if (phase === "out" || phase === "inOut") {
+    const start = Math.max(0, total - d);
+    const t = (0, import_remotion41.interpolate)(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    clipPath = clipFor2(direction, t);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_remotion41.AbsoluteFill, { style: { clipPath, filter: softEdge ? "blur(0.4px)" : void 0 }, children });
+};
+var WipeTransitionComponentMetadata = {
+  kind: "composite",
+  category: "transition",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Directional wipe reveal/hide wrapper transition",
+  llmGuidance: "Use as a more stylized reveal. softEdge can make it feel less harsh."
+};
+
+// src/components/composites/YouTubeThumbnail.tsx
+var import_remotion42 = require("remotion");
+var import_zod45 = require("zod");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var YouTubeThumbnailPropsSchema = import_zod45.z.object({
+  backgroundImage: import_zod45.z.string().min(1),
+  title: import_zod45.z.string().max(60),
+  subtitle: import_zod45.z.string().max(40).optional(),
+  thumbnailFace: import_zod45.z.string().optional(),
+  accentColor: import_zod45.z.string().default("#FF0000"),
+  style: import_zod45.z.enum(["bold", "minimal", "dramatic"]).default("bold")
+});
+var resolveAsset16 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion42.staticFile)(staticFileInputFromAssetPath(value));
+var YouTubeThumbnail = ({
+  backgroundImage,
+  title,
+  subtitle,
+  thumbnailFace,
+  accentColor,
+  style
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_remotion42.AbsoluteFill, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_remotion42.Img, { src: resolveAsset16(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+    style === "dramatic" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_remotion42.AbsoluteFill, { style: { backgroundColor: "rgba(0,0,0,0.35)" } }) : null,
+    thumbnailFace ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      import_remotion42.Img,
+      {
+        src: resolveAsset16(thumbnailFace),
+        style: { position: "absolute", right: 60, bottom: 0, width: 520, height: 720, objectFit: "cover" }
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: { position: "absolute", left: 70, top: 90, width: 1100 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        "div",
+        {
+          style: {
+            fontSize: style === "minimal" ? 86 : 110,
+            fontWeight: 1e3,
+            color: "#FFFFFF",
+            textTransform: "uppercase",
+            lineHeight: 0.95,
+            WebkitTextStroke: style === "minimal" ? "0px transparent" : "10px #000000",
+            textShadow: style === "minimal" ? "0 10px 40px rgba(0,0,0,0.6)" : void 0
+          },
+          children: title
+        }
+      ),
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: 26, fontSize: 52, fontWeight: 900, color: accentColor, textShadow: "0 10px 30px rgba(0,0,0,0.6)" }, children: subtitle }) : null
+    ] }),
+    style !== "minimal" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { position: "absolute", left: 70, bottom: 80, width: 260, height: 18, backgroundColor: accentColor, borderRadius: 9999 } }) : null
+  ] });
+};
+var YouTubeThumbnailComponentMetadata = {
+  kind: "composite",
+  category: "social",
+  description: "YouTube-style thumbnail layout (16:9) with bold title and optional face cutout",
+  llmGuidance: 'Use 1280x720 video size. Keep title short and high-contrast. style="bold" is classic thumbnail.'
+};
+
+// src/components/composites/VideoWithOverlay.tsx
+var import_remotion43 = require("remotion");
+var import_zod46 = require("zod");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var OverlaySchema = import_zod46.z.object({
+  type: import_zod46.z.enum(["text", "logo", "gradient"]),
+  content: import_zod46.z.string().optional(),
+  opacity: import_zod46.z.number().min(0).max(1).default(0.3),
+  position: import_zod46.z.enum(["top", "bottom", "center", "full"]).default("bottom")
+});
+var VideoWithOverlayPropsSchema = import_zod46.z.object({
+  src: import_zod46.z.string().min(1),
+  overlay: OverlaySchema.optional(),
+  volume: import_zod46.z.number().min(0).max(1).default(1),
+  playbackRate: import_zod46.z.number().min(0.5).max(2).default(1)
+});
+var resolveAsset17 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion43.staticFile)(staticFileInputFromAssetPath(value));
+var VideoWithOverlay = ({ src, overlay, volume, playbackRate }) => {
+  const frame = (0, import_remotion43.useCurrentFrame)();
+  const fade = (0, import_remotion43.interpolate)(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const overlayNode = overlay ? overlay.type === "gradient" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_remotion43.AbsoluteFill,
+    {
+      style: {
+        opacity: overlay.opacity,
+        background: overlay.position === "top" ? "linear-gradient(rgba(0,0,0,0.85), transparent)" : overlay.position === "bottom" ? "linear-gradient(transparent, rgba(0,0,0,0.85))" : "linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6))"
+      }
+    }
+  ) : overlay.type === "logo" && overlay.content ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_remotion43.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_remotion43.Img, { src: resolveAsset17(overlay.content), style: { width: 220, height: 220, objectFit: "contain" } }) }) : overlay.type === "text" && overlay.content ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_remotion43.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { color: "#FFFFFF", fontSize: 56, fontWeight: 900, textAlign: "center", padding: "0 80px" }, children: overlay.content }) }) : null : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_remotion43.AbsoluteFill, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      import_remotion43.Video,
+      {
+        src: resolveAsset17(src),
+        style: { width: "100%", height: "100%", objectFit: "cover", opacity: fade },
+        muted: volume === 0,
+        playbackRate
+      }
+    ),
+    overlayNode
+  ] });
+};
+var VideoWithOverlayComponentMetadata = {
+  kind: "composite",
+  category: "media",
+  description: "Video background with an optional overlay (text/logo/gradient)",
+  llmGuidance: "Use gradient overlay to improve text readability. Set volume=0 to mute."
+};
+
+// src/components/composites/ZoomTransition.tsx
+var import_remotion44 = require("remotion");
+var import_zod47 = require("zod");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var ZoomTransitionPropsSchema = import_zod47.z.object({
+  durationInFrames: import_zod47.z.number().int().min(10).max(60).default(30),
+  type: import_zod47.z.enum(["zoomIn", "zoomOut"]).default("zoomIn"),
+  phase: import_zod47.z.enum(["in", "out", "inOut"]).default("inOut")
+});
+var ZoomTransition = ({
+  durationInFrames,
+  type,
+  phase,
+  children,
+  __wavesDurationInFrames
+}) => {
+  const frame = (0, import_remotion44.useCurrentFrame)();
+  const total = Math.max(1, __wavesDurationInFrames ?? 1);
+  const d = Math.min(durationInFrames, total);
+  let opacity = 1;
+  let scale = 1;
+  const enterFrom = type === "zoomIn" ? 1.2 : 0.85;
+  const exitTo = type === "zoomIn" ? 1.25 : 0.75;
+  if (phase === "in" || phase === "inOut") {
+    const t = (0, import_remotion44.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    scale *= enterFrom + (1 - enterFrom) * t;
+    opacity *= t;
+  }
+  if (phase === "out" || phase === "inOut") {
+    const start = Math.max(0, total - d);
+    const t = (0, import_remotion44.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    scale *= 1 + (exitTo - 1) * t;
+    opacity *= 1 - t;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_remotion44.AbsoluteFill, { style: { opacity, transform: `scale(${scale})` }, children });
+};
+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("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("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",