@depths/waves 0.2.0 → 0.3.0

package/dist/{chunk-PKLHVWMD.mjs → chunk-YYS6AVTN.mjs}

@@ -207,19 +207,77 @@ var AudioComponentMetadata = {
 };
 
 // src/components/primitives/Box.tsx
+import React from "react";
 import { z as z4 } from "zod";
+
+// src/remotion/Fill.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
+var Fill = ({ style, children }) => {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        boxSizing: "border-box",
+        ...style ?? {}
+      },
+      children
+    }
+  );
+};
+
+// src/components/primitives/Box.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
 var BoxPropsSchema = z4.object({
-  x: z4.number().default(0).describe("Left offset in pixels"),
-  y: z4.number().default(0).describe("Top offset in pixels"),
-  width: z4.number().positive().optional().describe("Width in pixels (omit for auto)"),
-  height: z4.number().positive().optional().describe("Height in pixels (omit for auto)"),
+  width: z4.number().positive().optional().describe("Width in pixels (optional)"),
+  height: z4.number().positive().optional().describe("Height in pixels (optional)"),
   padding: z4.number().min(0).default(0).describe("Padding in pixels"),
-  backgroundColor: z4.string().optional().describe("CSS color (e.g. #RRGGBB)"),
+  backgroundColor: z4.string().optional().describe("CSS color (e.g. #RRGGBB, rgba())"),
   borderRadius: z4.number().min(0).default(0).describe("Border radius in pixels"),
   opacity: z4.number().min(0).max(1).default(1).describe("Opacity 0..1")
 });
-var Box = ({
+var Box = ({ width, height, padding, backgroundColor, borderRadius, opacity, children }) => {
+  const layers = React.Children.toArray(children);
+  return /* @__PURE__ */ jsx3(
+    Fill,
+    {
+      style: {
+        width,
+        height,
+        padding,
+        backgroundColor,
+        borderRadius,
+        opacity
+      },
+      children: layers.map((child, i) => /* @__PURE__ */ jsx3("div", { style: { position: "absolute", inset: 0 }, children: child }, i))
+    }
+  );
+};
+var BoxComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  description: "Flow container for layout and backgrounds (layout-safe)",
+  llmGuidance: "Use Box as a container inside Grid/Stack. Box participates in layout flow. For x/y positioning, use Frame."
+};
+
+// src/components/primitives/Frame.tsx
+import React2 from "react";
+import { z as z5 } from "zod";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var FramePropsSchema = z5.object({
+  x: z5.number().default(0).describe("Left offset in pixels"),
+  y: z5.number().default(0).describe("Top offset in pixels"),
+  width: z5.number().positive().optional().describe("Width in pixels (optional)"),
+  height: z5.number().positive().optional().describe("Height in pixels (optional)"),
+  padding: z5.number().min(0).default(0).describe("Padding in pixels"),
+  backgroundColor: z5.string().optional().describe("CSS color (e.g. #RRGGBB, rgba())"),
+  borderRadius: z5.number().min(0).default(0).describe("Border radius in pixels"),
+  opacity: z5.number().min(0).max(1).default(1).describe("Opacity 0..1")
+});
+var Frame = ({
   x,
   y,
   width,
@@ -230,7 +288,8 @@ var Box = ({
   opacity,
   children
 }) => {
-  return /* @__PURE__ */ jsx2(
+  const layers = React2.Children.toArray(children);
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       style: {
@@ -245,29 +304,28 @@ var Box = ({
         opacity,
         boxSizing: "border-box"
       },
-      children
+      children: /* @__PURE__ */ jsx4(Fill, { children: layers.map((child, i) => /* @__PURE__ */ jsx4("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) })
     }
   );
 };
-var BoxComponentMetadata = {
+var FrameComponentMetadata = {
   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."
+  description: "Absolute-positioned container (x/y placement)",
+  llmGuidance: "Use Frame for precise pixel placement (x/y). Use Box for normal layout flow inside Grid/Stack."
 };
 
 // src/components/primitives/Grid.tsx
-import { AbsoluteFill } from "remotion";
-import { z as z5 } from "zod";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var GridPropsSchema = z5.object({
-  columns: z5.number().int().min(1).max(12).default(2),
-  rows: z5.number().int().min(1).max(12).default(1),
-  gap: z5.number().min(0).default(24),
-  padding: z5.number().min(0).default(0),
-  align: z5.enum(["start", "center", "end", "stretch"]).default("stretch"),
-  justify: z5.enum(["start", "center", "end", "stretch"]).default("stretch")
+import { z as z6 } from "zod";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var GridPropsSchema = z6.object({
+  columns: z6.number().int().min(1).max(12).default(2),
+  rows: z6.number().int().min(1).max(12).default(1),
+  gap: z6.number().min(0).default(24),
+  padding: z6.number().min(0).default(0),
+  align: z6.enum(["start", "center", "end", "stretch"]).default("stretch"),
+  justify: z6.enum(["start", "center", "end", "stretch"]).default("stretch")
 });
 var mapAlign = (a) => {
   if (a === "start") return "start";
@@ -282,8 +340,8 @@ var mapJustify = (j) => {
   return "stretch";
 };
 var Grid = ({ columns, rows, gap, padding, align, justify, children }) => {
-  return /* @__PURE__ */ jsx3(
-    AbsoluteFill,
+  return /* @__PURE__ */ jsx5(
+    Fill,
     {
       style: {
         display: "grid",
@@ -308,18 +366,18 @@ var GridComponentMetadata = {
 };
 
 // src/components/primitives/Image.tsx
-import { AbsoluteFill as AbsoluteFill2, Img, staticFile as staticFile2 } from "remotion";
-import { z as z6 } from "zod";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var ImagePropsSchema = z6.object({
-  src: z6.string().min(1),
-  fit: z6.enum(["cover", "contain"]).default("cover"),
-  borderRadius: z6.number().min(0).default(0),
-  opacity: z6.number().min(0).max(1).default(1)
+import { Img, staticFile as staticFile2 } from "remotion";
+import { z as z7 } from "zod";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ImagePropsSchema = z7.object({
+  src: z7.string().min(1),
+  fit: z7.enum(["cover", "contain"]).default("cover"),
+  borderRadius: z7.number().min(0).default(0),
+  opacity: z7.number().min(0).max(1).default(1)
 });
 var resolveAsset = (value) => isRemoteAssetPath(value) ? value : staticFile2(staticFileInputFromAssetPath(value));
 var Image = ({ src, fit, borderRadius, opacity }) => {
-  return /* @__PURE__ */ jsx4(AbsoluteFill2, { style: { opacity }, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(Fill, { style: { opacity }, children: /* @__PURE__ */ jsx6(
     Img,
     {
       src: resolveAsset(src),
@@ -334,32 +392,91 @@ var ImageComponentMetadata = {
   llmGuidance: 'Use Image for pictures and backgrounds. Use fit="cover" for full-bleed, fit="contain" to avoid cropping.'
 };
 
+// src/components/primitives/Layer.tsx
+import React3 from "react";
+import { z as z8 } from "zod";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var LayerPropsSchema = z8.object({
+  zIndex: z8.number().int().default(0).describe("Higher zIndex renders on top"),
+  inset: z8.number().min(0).default(0).describe("Inset from all sides in pixels"),
+  opacity: z8.number().min(0).max(1).default(1),
+  pointerEvents: z8.enum(["none", "auto"]).default("none")
+});
+var Layer = ({ zIndex, inset, opacity, pointerEvents, children }) => {
+  const layers = React3.Children.toArray(children);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: inset,
+        right: inset,
+        top: inset,
+        bottom: inset,
+        zIndex,
+        opacity,
+        pointerEvents,
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ jsx7(Fill, { children: layers.map((child, i) => /* @__PURE__ */ jsx7("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) })
+    }
+  );
+};
+var LayerComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "One overlay layer with explicit zIndex inside Layers",
+  llmGuidance: "Use Layer inside Layers to control stacking. Put exactly one child in a Layer (recommended)."
+};
+
+// src/components/primitives/Layers.tsx
+import { z as z9 } from "zod";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var LayersPropsSchema = z9.object({
+  overflow: z9.enum(["visible", "hidden"]).default("visible").describe("Clip layers to bounds")
+});
+var Layers = ({ overflow, children }) => {
+  return /* @__PURE__ */ jsx8(Fill, { style: { overflow }, children });
+};
+var LayersComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Overlay container for stacking children (use Layer for zIndex)",
+  llmGuidance: "Use Layers to stack background/content/overlays. Prefer Layer children with explicit zIndex."
+};
+
 // src/components/primitives/Scene.tsx
-import { AbsoluteFill as AbsoluteFill3, Img as Img2, Video, staticFile as staticFile3 } from "remotion";
-import { z as z7 } from "zod";
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
-var ScenePropsSchema = z7.object({
+import React4 from "react";
+import { AbsoluteFill, Img as Img2, Video, staticFile as staticFile3 } from "remotion";
+import { z as z10 } from "zod";
+import { jsx as jsx9, jsxs } from "react/jsx-runtime";
+var ScenePropsSchema = z10.object({
   background: BackgroundSpecSchema
 });
 var resolveAsset2 = (value) => {
   return isRemoteAssetPath(value) ? value : staticFile3(staticFileInputFromAssetPath(value));
 };
 var Scene = ({ background, children }) => {
-  return /* @__PURE__ */ jsxs(AbsoluteFill3, { children: [
-    background.type === "color" ? /* @__PURE__ */ jsx5(AbsoluteFill3, { style: { backgroundColor: background.value } }) : background.type === "image" ? /* @__PURE__ */ jsx5(
+  const layers = React4.Children.toArray(children);
+  return /* @__PURE__ */ jsxs(AbsoluteFill, { children: [
+    background.type === "color" ? /* @__PURE__ */ jsx9(AbsoluteFill, { style: { backgroundColor: background.value } }) : background.type === "image" ? /* @__PURE__ */ jsx9(
       Img2,
       {
         src: resolveAsset2(background.value),
         style: { width: "100%", height: "100%", objectFit: "cover" }
       }
-    ) : /* @__PURE__ */ jsx5(
+    ) : /* @__PURE__ */ jsx9(
       Video,
       {
         src: resolveAsset2(background.value),
         style: { width: "100%", height: "100%", objectFit: "cover" }
       }
     ),
-    /* @__PURE__ */ jsx5(AbsoluteFill3, { children })
+    /* @__PURE__ */ jsx9(AbsoluteFill, { children: layers.map((child, i) => /* @__PURE__ */ jsx9(AbsoluteFill, { children: child }, i)) })
   ] });
 };
 var SceneComponentMetadata = {
@@ -371,37 +488,37 @@ var SceneComponentMetadata = {
 };
 
 // src/components/primitives/Segment.tsx
-import { AbsoluteFill as AbsoluteFill4, interpolate as interpolate2, useCurrentFrame as useCurrentFrame2 } from "remotion";
-import { z as z8 } from "zod";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var TransitionPropsSchema = z8.object({
-  type: z8.string().min(1),
-  durationInFrames: z8.number().int().positive(),
-  props: z8.record(z8.string(), z8.unknown()).optional()
+import { AbsoluteFill as AbsoluteFill2, interpolate as interpolate2, useCurrentFrame as useCurrentFrame2 } from "remotion";
+import { z as z11 } from "zod";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var TransitionPropsSchema = z11.object({
+  type: z11.string().min(1),
+  durationInFrames: z11.number().int().positive(),
+  props: z11.record(z11.string(), z11.unknown()).optional()
 });
-var SegmentPropsSchema = z8.object({
+var SegmentPropsSchema = z11.object({
   enterTransition: TransitionPropsSchema.optional(),
   exitTransition: TransitionPropsSchema.optional()
 });
 function getSlideOptions(raw) {
-  const parsed = z8.object({
-    direction: z8.enum(["left", "right", "up", "down"]).default("left"),
-    distance: z8.number().int().min(1).max(2e3).default(80)
+  const parsed = z11.object({
+    direction: z11.enum(["left", "right", "up", "down"]).default("left"),
+    distance: z11.number().int().min(1).max(2e3).default(80)
   }).safeParse(raw ?? {});
   if (parsed.success) return parsed.data;
   return { direction: "left", distance: 80 };
 }
 function getZoomOptions(raw) {
-  const parsed = z8.object({
-    type: z8.enum(["zoomIn", "zoomOut"]).default("zoomIn")
+  const parsed = z11.object({
+    type: z11.enum(["zoomIn", "zoomOut"]).default("zoomIn")
   }).safeParse(raw ?? {});
   if (parsed.success) return parsed.data;
   return { type: "zoomIn" };
 }
 function getWipeOptions(raw) {
-  const parsed = z8.object({
-    direction: z8.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
-    softEdge: z8.boolean().default(false)
+  const parsed = z11.object({
+    direction: z11.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
+    softEdge: z11.boolean().default(false)
   }).safeParse(raw ?? {});
   if (parsed.success) return parsed.data;
   return { direction: "right", softEdge: false };
@@ -414,11 +531,11 @@ function clipFor(direction, p) {
   return `polygon(0 0, ${100 * p}% 0, 0 ${100 * p}%)`;
 }
 function getCircularOptions(raw) {
-  const parsed = z8.object({
-    direction: z8.enum(["open", "close"]).default("open"),
-    center: z8.object({
-      x: z8.number().min(0).max(1).default(0.5),
-      y: z8.number().min(0).max(1).default(0.5)
+  const parsed = z11.object({
+    direction: z11.enum(["open", "close"]).default("open"),
+    center: z11.object({
+      x: z11.number().min(0).max(1).default(0.5),
+      y: z11.number().min(0).max(1).default(0.5)
     }).default({ x: 0.5, y: 0.5 })
   }).safeParse(raw ?? {});
   if (parsed.success) return parsed.data;
@@ -507,7 +624,7 @@ var Segment = ({ enterTransition, exitTransition, children, __wavesDurationInFra
     }
   }
   const transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
-  return /* @__PURE__ */ jsx6(AbsoluteFill4, { style: { opacity, transform, clipPath, filter }, children });
+  return /* @__PURE__ */ jsx10(AbsoluteFill2, { style: { opacity, transform, clipPath, filter }, children });
 };
 var SegmentComponentMetadata = {
   kind: "primitive",
@@ -520,18 +637,18 @@ var SegmentComponentMetadata = {
 };
 
 // src/components/primitives/Shape.tsx
-import { z as z9 } from "zod";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var ShapePropsSchema = z9.object({
-  shape: z9.enum(["rect", "circle"]).default("rect"),
-  x: z9.number().default(0),
-  y: z9.number().default(0),
-  width: z9.number().positive().default(100),
-  height: z9.number().positive().default(100),
-  fill: z9.string().default("#FFFFFF"),
-  strokeColor: z9.string().optional(),
-  strokeWidth: z9.number().min(0).default(0),
-  opacity: z9.number().min(0).max(1).default(1)
+import { z as z12 } from "zod";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var ShapePropsSchema = z12.object({
+  shape: z12.enum(["rect", "circle"]).default("rect"),
+  x: z12.number().default(0),
+  y: z12.number().default(0),
+  width: z12.number().positive().default(100),
+  height: z12.number().positive().default(100),
+  fill: z12.string().default("#FFFFFF"),
+  strokeColor: z12.string().optional(),
+  strokeWidth: z12.number().min(0).default(0),
+  opacity: z12.number().min(0).max(1).default(1)
 });
 var Shape = ({
   shape,
@@ -544,7 +661,7 @@ var Shape = ({
   strokeWidth,
   opacity
 }) => {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       style: {
@@ -569,15 +686,14 @@ var ShapeComponentMetadata = {
 };
 
 // src/components/primitives/Stack.tsx
-import { AbsoluteFill as AbsoluteFill5 } from "remotion";
-import { z as z10 } from "zod";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var StackPropsSchema = z10.object({
-  direction: z10.enum(["row", "column"]).default("column"),
-  gap: z10.number().min(0).default(24),
-  padding: z10.number().min(0).default(0),
-  align: z10.enum(["start", "center", "end", "stretch"]).default("center"),
-  justify: z10.enum(["start", "center", "end", "between"]).default("center")
+import { z as z13 } from "zod";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var StackPropsSchema = z13.object({
+  direction: z13.enum(["row", "column"]).default("column"),
+  gap: z13.number().min(0).default(24),
+  padding: z13.number().min(0).default(0),
+  align: z13.enum(["start", "center", "end", "stretch"]).default("center"),
+  justify: z13.enum(["start", "center", "end", "between"]).default("center")
 });
 var mapAlign2 = (a) => {
   if (a === "start") return "flex-start";
@@ -592,8 +708,8 @@ var mapJustify2 = (j) => {
   return "center";
 };
 var Stack = ({ direction, gap, padding, align, justify, children }) => {
-  return /* @__PURE__ */ jsx8(
-    AbsoluteFill5,
+  return /* @__PURE__ */ jsx12(
+    Fill,
     {
       style: {
         display: "flex",
@@ -617,17 +733,22 @@ var StackComponentMetadata = {
 };
 
 // src/components/primitives/Text.tsx
-import { AbsoluteFill as AbsoluteFill6, interpolate as interpolate3, useCurrentFrame as useCurrentFrame3 } from "remotion";
-import { z as z11 } from "zod";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var TextPropsSchema = z11.object({
-  content: z11.string(),
-  fontSize: z11.number().default(48),
-  color: z11.string().default("#FFFFFF"),
-  position: z11.enum(["top", "center", "bottom", "left", "right"]).default("center"),
-  animation: z11.enum(["none", "fade", "slide", "zoom"]).default("fade")
+import { interpolate as interpolate3, useCurrentFrame as useCurrentFrame3 } from "remotion";
+import { z as z14 } from "zod";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var TextPropsSchema = z14.object({
+  content: z14.string(),
+  fontSize: z14.number().default(48),
+  color: z14.string().default("#FFFFFF"),
+  fontFamily: z14.string().default("Inter"),
+  position: z14.enum(["top", "center", "bottom", "left", "right"]).default("center"),
+  animation: z14.enum(["none", "fade", "slide", "zoom"]).default("fade"),
+  maxWidthPct: z14.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: z14.number().min(0).max(0.25).default(0.06),
+  textAlign: z14.enum(["left", "center", "right"]).default("center")
 });
-var getPositionStyles = (position) => {
+var getPositionStyles = (position, safeInsetPct) => {
+  const inset = `${(safeInsetPct * 100).toFixed(2)}%`;
   const base = {
     display: "flex",
     justifyContent: "center",
@@ -635,13 +756,13 @@ var getPositionStyles = (position) => {
   };
   switch (position) {
     case "top":
-      return { ...base, alignItems: "flex-start", paddingTop: 60 };
+      return { ...base, alignItems: "flex-start", paddingTop: inset };
     case "bottom":
-      return { ...base, alignItems: "flex-end", paddingBottom: 60 };
+      return { ...base, alignItems: "flex-end", paddingBottom: inset };
     case "left":
-      return { ...base, justifyContent: "flex-start", paddingLeft: 60 };
+      return { ...base, justifyContent: "flex-start", paddingLeft: inset };
     case "right":
-      return { ...base, justifyContent: "flex-end", paddingRight: 60 };
+      return { ...base, justifyContent: "flex-end", paddingRight: inset };
     default:
       return base;
   }
@@ -682,18 +803,32 @@ var getAnimationStyle = (frame, animation) => {
       return {};
   }
 };
-var Text = ({ content, fontSize, color, position, animation }) => {
+var Text = ({
+  content,
+  fontSize,
+  color,
+  fontFamily,
+  position,
+  animation,
+  maxWidthPct,
+  safeInsetPct,
+  textAlign
+}) => {
   const frame = useCurrentFrame3();
-  const positionStyles6 = getPositionStyles(position);
+  const positionStyles6 = getPositionStyles(position, safeInsetPct);
   const animationStyles = getAnimationStyle(frame, animation);
-  return /* @__PURE__ */ jsx9(AbsoluteFill6, { style: positionStyles6, children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx13(Fill, { style: positionStyles6, children: /* @__PURE__ */ jsx13(
     "div",
     {
       style: {
         fontSize,
         color,
+        fontFamily,
         fontWeight: 600,
-        textAlign: "center",
+        textAlign,
+        maxWidth: `${Math.round(maxWidthPct * 100)}%`,
+        overflowWrap: "anywhere",
+        wordBreak: "break-word",
         ...animationStyles
       },
       children: content
@@ -724,19 +859,19 @@ var TextComponentMetadata = {
 };
 
 // src/components/primitives/Video.tsx
-import { AbsoluteFill as AbsoluteFill7, Video as RemotionVideo, staticFile as staticFile4 } from "remotion";
-import { z as z12 } from "zod";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var VideoPropsSchema = z12.object({
-  src: z12.string().min(1),
-  fit: z12.enum(["cover", "contain"]).default("cover"),
-  borderRadius: z12.number().min(0).default(0),
-  opacity: z12.number().min(0).max(1).default(1),
-  muted: z12.boolean().default(true)
+import { Video as RemotionVideo, staticFile as staticFile4 } from "remotion";
+import { z as z15 } from "zod";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var VideoPropsSchema = z15.object({
+  src: z15.string().min(1),
+  fit: z15.enum(["cover", "contain"]).default("cover"),
+  borderRadius: z15.number().min(0).default(0),
+  opacity: z15.number().min(0).max(1).default(1),
+  muted: z15.boolean().default(true)
 });
 var resolveAsset3 = (value) => isRemoteAssetPath(value) ? value : staticFile4(staticFileInputFromAssetPath(value));
 var Video2 = ({ src, fit, borderRadius, opacity, muted }) => {
-  return /* @__PURE__ */ jsx10(AbsoluteFill7, { style: { opacity }, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx14(Fill, { style: { opacity }, children: /* @__PURE__ */ jsx14(
     RemotionVideo,
     {
       src: resolveAsset3(src),
@@ -753,19 +888,19 @@ var VideoComponentMetadata = {
 };
 
 // src/components/composites/AnimatedCounter.tsx
-import { AbsoluteFill as AbsoluteFill8, interpolate as interpolate4, spring, useCurrentFrame as useCurrentFrame4, useVideoConfig } from "remotion";
-import { z as z13 } from "zod";
-import { jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
-var AnimatedCounterPropsSchema = z13.object({
-  from: z13.number().default(0),
-  to: z13.number().default(100),
-  fontSize: z13.number().min(8).max(300).default(96),
-  color: z13.string().default("#FFFFFF"),
-  fontFamily: z13.string().default("Inter"),
-  fontWeight: z13.number().int().min(100).max(900).default(700),
-  icon: z13.string().optional(),
-  suffix: z13.string().optional(),
-  animationType: z13.enum(["spring", "linear"]).default("spring")
+import { interpolate as interpolate4, spring, useCurrentFrame as useCurrentFrame4, useVideoConfig } from "remotion";
+import { z as z16 } from "zod";
+import { jsx as jsx15, jsxs as jsxs2 } from "react/jsx-runtime";
+var AnimatedCounterPropsSchema = z16.object({
+  from: z16.number().default(0),
+  to: z16.number().default(100),
+  fontSize: z16.number().min(8).max(300).default(96),
+  color: z16.string().default("#FFFFFF"),
+  fontFamily: z16.string().default("Inter"),
+  fontWeight: z16.number().int().min(100).max(900).default(700),
+  icon: z16.string().optional(),
+  suffix: z16.string().optional(),
+  animationType: z16.enum(["spring", "linear"]).default("spring")
 });
 var AnimatedCounter = ({
   from,
@@ -786,9 +921,9 @@ var AnimatedCounter = ({
   const value = from + (to - from) * Math.max(0, Math.min(1, progress));
   const rounded = Math.round(value);
   const label = `${rounded.toLocaleString()}${suffix ?? ""}`;
-  return /* @__PURE__ */ jsx11(AbsoluteFill8, { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs2("div", { style: { textAlign: "center" }, children: [
-    icon ? /* @__PURE__ */ jsx11("div", { style: { fontSize: Math.round(fontSize * 0.5), marginBottom: 18 }, children: icon }) : null,
-    /* @__PURE__ */ jsx11("div", { style: { fontSize, color, fontFamily, fontWeight, lineHeight: 1 }, children: label })
+  return /* @__PURE__ */ jsx15(Fill, { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs2("div", { style: { textAlign: "center" }, children: [
+    icon ? /* @__PURE__ */ jsx15("div", { style: { fontSize: Math.round(fontSize * 0.5), marginBottom: 18 }, children: icon }) : null,
+    /* @__PURE__ */ jsx15("div", { style: { fontSize, color, fontFamily, fontWeight, lineHeight: 1 }, children: label })
   ] }) });
 };
 var AnimatedCounterComponentMetadata = {
@@ -803,27 +938,27 @@ var AnimatedCounterComponentMetadata = {
 };
 
 // src/components/composites/BarChart.tsx
-import { AbsoluteFill as AbsoluteFill9, spring as spring2, useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig2 } from "remotion";
-import { z as z14 } from "zod";
-import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
-var BarChartPropsSchema = z14.object({
-  data: z14.array(z14.object({
-    label: z14.string().min(1),
-    value: z14.number(),
-    color: z14.string().optional()
+import { spring as spring2, useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig2 } from "remotion";
+import { z as z17 } from "zod";
+import { jsx as jsx16, jsxs as jsxs3 } from "react/jsx-runtime";
+var BarChartPropsSchema = z17.object({
+  data: z17.array(z17.object({
+    label: z17.string().min(1),
+    value: z17.number(),
+    color: z17.string().optional()
   })).min(2).max(8),
-  orientation: z14.enum(["horizontal", "vertical"]).default("vertical"),
-  showValues: z14.boolean().default(true),
-  showGrid: z14.boolean().default(false),
-  maxValue: z14.number().optional()
+  orientation: z17.enum(["horizontal", "vertical"]).default("vertical"),
+  showValues: z17.boolean().default(true),
+  showGrid: z17.boolean().default(false),
+  maxValue: z17.number().optional()
 });
 var BarChart = ({ data, orientation, showValues, showGrid, maxValue }) => {
   const frame = useCurrentFrame5();
   const { fps } = useVideoConfig2();
   const max = maxValue ?? Math.max(...data.map((d) => d.value));
-  return /* @__PURE__ */ jsxs3(AbsoluteFill9, { style: { padding: 90, boxSizing: "border-box" }, children: [
-    showGrid ? /* @__PURE__ */ jsx12("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__ */ jsx12(
+  return /* @__PURE__ */ jsxs3(Fill, { style: { padding: 90, boxSizing: "border-box" }, children: [
+    showGrid ? /* @__PURE__ */ jsx16("div", { style: { position: "absolute", left: 90, right: 90, top: 90, bottom: 90, opacity: 0.15, backgroundImage: "linear-gradient(#fff 1px, transparent 1px)", backgroundSize: "100% 60px" } }) : null,
+    /* @__PURE__ */ jsx16(
       "div",
       {
         style: {
@@ -840,9 +975,9 @@ var BarChart = ({ data, orientation, showValues, showGrid, maxValue }) => {
           const ratio = max === 0 ? 0 : d.value / max * p;
           const color = d.color ?? "#0A84FF";
           return /* @__PURE__ */ jsxs3("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }, children: [
-            orientation === "vertical" ? /* @__PURE__ */ jsx12("div", { style: { width: "100%", flex: 1, display: "flex", alignItems: "flex-end" }, children: /* @__PURE__ */ jsx12("div", { style: { width: "100%", height: `${Math.round(ratio * 100)}%`, backgroundColor: color, borderRadius: 12 } }) }) : /* @__PURE__ */ jsx12("div", { style: { width: "100%", display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ jsx12("div", { style: { flex: 1, height: 18, backgroundColor: "rgba(255,255,255,0.15)", borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ jsx12("div", { style: { width: `${Math.round(ratio * 100)}%`, height: "100%", backgroundColor: color } }) }) }),
-            /* @__PURE__ */ jsx12("div", { style: { color: "#FFFFFF", fontWeight: 700, fontSize: 22, opacity: 0.9 }, children: d.label }),
-            showValues ? /* @__PURE__ */ jsx12("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 26 }, children: Math.round(d.value).toLocaleString() }) : null
+            orientation === "vertical" ? /* @__PURE__ */ jsx16("div", { style: { width: "100%", flex: 1, display: "flex", alignItems: "flex-end" }, children: /* @__PURE__ */ jsx16("div", { style: { width: "100%", height: `${Math.round(ratio * 100)}%`, backgroundColor: color, borderRadius: 12 } }) }) : /* @__PURE__ */ jsx16("div", { style: { width: "100%", display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ jsx16("div", { style: { flex: 1, height: 18, backgroundColor: "rgba(255,255,255,0.15)", borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ jsx16("div", { style: { width: `${Math.round(ratio * 100)}%`, height: "100%", backgroundColor: color } }) }) }),
+            /* @__PURE__ */ jsx16("div", { style: { color: "#FFFFFF", fontWeight: 700, fontSize: 22, opacity: 0.9 }, children: d.label }),
+            showValues ? /* @__PURE__ */ jsx16("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 26 }, children: Math.round(d.value).toLocaleString() }) : null
           ] }, d.label);
         })
       }
@@ -857,18 +992,18 @@ var BarChartComponentMetadata = {
 };
 
 // src/components/composites/CardStack.tsx
-import { AbsoluteFill as AbsoluteFill10, interpolate as interpolate5, spring as spring3, useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig3 } from "remotion";
-import { z as z15 } from "zod";
-import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
-var CardSchema = z15.object({
-  title: z15.string().min(1),
-  content: z15.string().min(1),
-  backgroundColor: z15.string().optional()
+import { interpolate as interpolate5, spring as spring3, useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig3 } from "remotion";
+import { z as z18 } from "zod";
+import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
+var CardSchema = z18.object({
+  title: z18.string().min(1),
+  content: z18.string().min(1),
+  backgroundColor: z18.string().optional()
 });
-var CardStackPropsSchema = z15.object({
-  cards: z15.array(CardSchema).min(2).max(5),
-  transition: z15.enum(["flip", "slide", "fade"]).default("flip"),
-  displayDuration: z15.number().int().min(30).max(150).default(90)
+var CardStackPropsSchema = z18.object({
+  cards: z18.array(CardSchema).min(2).max(5),
+  transition: z18.enum(["flip", "slide", "fade"]).default("flip"),
+  displayDuration: z18.number().int().min(30).max(150).default(90)
 });
 var CardStack = ({ cards, transition, displayDuration }) => {
   const frame = useCurrentFrame6();
@@ -881,7 +1016,7 @@ var CardStack = ({ cards, transition, displayDuration }) => {
   const opacity = transition === "fade" ? p : 1;
   const slideX = transition === "slide" ? interpolate5(p, [0, 1], [80, 0]) : 0;
   const rotateY = transition === "flip" ? interpolate5(p, [0, 1], [70, 0]) : 0;
-  return /* @__PURE__ */ jsx13(AbsoluteFill10, { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx17(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsxs4(
     "div",
     {
       style: {
@@ -898,8 +1033,8 @@ var CardStack = ({ cards, transition, displayDuration }) => {
         opacity
       },
       children: [
-        /* @__PURE__ */ jsx13("div", { style: { fontSize: 56, fontWeight: 900, marginBottom: 22 }, children: card.title }),
-        /* @__PURE__ */ jsx13("div", { style: { fontSize: 30, fontWeight: 700, opacity: 0.9, lineHeight: 1.3 }, children: card.content })
+        /* @__PURE__ */ jsx17("div", { style: { fontSize: 56, fontWeight: 900, marginBottom: 22 }, children: card.title }),
+        /* @__PURE__ */ jsx17("div", { style: { fontSize: 30, fontWeight: 700, opacity: 0.9, lineHeight: 1.3 }, children: card.content })
       ]
     }
   ) });
@@ -912,18 +1047,19 @@ var CardStackComponentMetadata = {
 };
 
 // src/components/composites/CircularReveal.tsx
-import { AbsoluteFill as AbsoluteFill11, interpolate as interpolate6, useCurrentFrame as useCurrentFrame7 } from "remotion";
-import { z as z16 } from "zod";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var CenterSchema = z16.object({
-  x: z16.number().min(0).max(1).default(0.5),
-  y: z16.number().min(0).max(1).default(0.5)
+import React5 from "react";
+import { interpolate as interpolate6, useCurrentFrame as useCurrentFrame7 } from "remotion";
+import { z as z19 } from "zod";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var CenterSchema = z19.object({
+  x: z19.number().min(0).max(1).default(0.5),
+  y: z19.number().min(0).max(1).default(0.5)
 });
-var CircularRevealPropsSchema = z16.object({
-  durationInFrames: z16.number().int().min(10).max(60).default(30),
-  direction: z16.enum(["open", "close"]).default("open"),
+var CircularRevealPropsSchema = z19.object({
+  durationInFrames: z19.number().int().min(10).max(60).default(30),
+  direction: z19.enum(["open", "close"]).default("open"),
   center: CenterSchema.optional(),
-  phase: z16.enum(["in", "out", "inOut"]).default("inOut")
+  phase: z19.enum(["in", "out", "inOut"]).default("inOut")
 });
 var CircularReveal = ({
   durationInFrames,
@@ -933,6 +1069,7 @@ var CircularReveal = ({
   children,
   __wavesDurationInFrames
 }) => {
+  const layers = React5.Children.toArray(children);
   const frame = useCurrentFrame7();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
@@ -948,7 +1085,7 @@ var CircularReveal = ({
     const t = interpolate6(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     radiusPct = open ? 150 * (1 - t) : 150 * t;
   }
-  return /* @__PURE__ */ jsx14(AbsoluteFill11, { style: { clipPath: `circle(${radiusPct}% at ${Math.round(c.x * 100)}% ${Math.round(c.y * 100)}%)` }, children });
+  return /* @__PURE__ */ jsx18(Fill, { style: { clipPath: `circle(${radiusPct}% at ${Math.round(c.x * 100)}% ${Math.round(c.y * 100)}%)` }, children: layers.map((child, i) => /* @__PURE__ */ jsx18("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var CircularRevealComponentMetadata = {
   kind: "composite",
@@ -960,21 +1097,21 @@ var CircularRevealComponentMetadata = {
 };
 
 // src/components/composites/CountUpText.tsx
-import { AbsoluteFill as AbsoluteFill12, interpolate as interpolate7, spring as spring4, useCurrentFrame as useCurrentFrame8, useVideoConfig as useVideoConfig4 } from "remotion";
-import { z as z17 } from "zod";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var CountUpTextPropsSchema = z17.object({
-  from: z17.number().default(0),
-  to: z17.number().default(100),
-  fontSize: z17.number().min(8).max(240).default(72),
-  color: z17.string().default("#FFFFFF"),
-  fontFamily: z17.string().default("Inter"),
-  fontWeight: z17.number().int().min(100).max(900).default(700),
-  position: z17.enum(["top", "center", "bottom"]).default("center"),
-  format: z17.enum(["integer", "decimal", "currency", "percentage"]).default("integer"),
-  decimals: z17.number().int().min(0).max(4).default(0),
-  prefix: z17.string().optional(),
-  suffix: z17.string().optional()
+import { interpolate as interpolate7, spring as spring4, useCurrentFrame as useCurrentFrame8, useVideoConfig as useVideoConfig4 } from "remotion";
+import { z as z20 } from "zod";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var CountUpTextPropsSchema = z20.object({
+  from: z20.number().default(0),
+  to: z20.number().default(100),
+  fontSize: z20.number().min(8).max(240).default(72),
+  color: z20.string().default("#FFFFFF"),
+  fontFamily: z20.string().default("Inter"),
+  fontWeight: z20.number().int().min(100).max(900).default(700),
+  position: z20.enum(["top", "center", "bottom"]).default("center"),
+  format: z20.enum(["integer", "decimal", "currency", "percentage"]).default("integer"),
+  decimals: z20.number().int().min(0).max(4).default(0),
+  prefix: z20.string().optional(),
+  suffix: z20.string().optional()
 });
 var positionStyles = (position) => {
   if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
@@ -1009,7 +1146,7 @@ var CountUpText = ({
   const value = from + (to - from) * progress;
   const fade = interpolate7(frame, [0, Math.min(12, total)], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const label = `${prefix ?? ""}${formatValue(value, format, decimals)}${suffix ?? ""}`;
-  return /* @__PURE__ */ jsx15(AbsoluteFill12, { style: { display: "flex", ...positionStyles(position) }, children: /* @__PURE__ */ jsx15("div", { style: { fontSize, color, fontFamily, fontWeight, opacity: fade, lineHeight: 1 }, children: label }) });
+  return /* @__PURE__ */ jsx19(Fill, { style: { display: "flex", ...positionStyles(position) }, children: /* @__PURE__ */ jsx19("div", { style: { fontSize, color, fontFamily, fontWeight, opacity: fade, lineHeight: 1 }, children: label }) });
 };
 var CountUpTextComponentMetadata = {
   kind: "composite",
@@ -1019,10 +1156,11 @@ var CountUpTextComponentMetadata = {
 };
 
 // src/components/composites/FadeTransition.tsx
-import { AbsoluteFill as AbsoluteFill13, interpolate as interpolate8, useCurrentFrame as useCurrentFrame9 } from "remotion";
-import { z as z18 } from "zod";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var EasingSchema = z18.enum(["linear", "easeIn", "easeOut", "easeInOut"]);
+import React6 from "react";
+import { interpolate as interpolate8, useCurrentFrame as useCurrentFrame9 } from "remotion";
+import { z as z21 } from "zod";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var EasingSchema = z21.enum(["linear", "easeIn", "easeOut", "easeInOut"]);
 function ease(t, easing) {
   const x = Math.max(0, Math.min(1, t));
   if (easing === "linear") return x;
@@ -1030,10 +1168,10 @@ function ease(t, easing) {
   if (easing === "easeOut") return 1 - (1 - x) * (1 - x);
   return x < 0.5 ? 2 * x * x : 1 - 2 * (1 - x) * (1 - x);
 }
-var FadeTransitionPropsSchema = z18.object({
-  durationInFrames: z18.number().int().min(10).max(60).default(30),
+var FadeTransitionPropsSchema = z21.object({
+  durationInFrames: z21.number().int().min(10).max(60).default(30),
   easing: EasingSchema.default("easeInOut"),
-  phase: z18.enum(["in", "out", "inOut"]).default("inOut")
+  phase: z21.enum(["in", "out", "inOut"]).default("inOut")
 });
 var FadeTransition = ({
   durationInFrames,
@@ -1042,6 +1180,7 @@ var FadeTransition = ({
   children,
   __wavesDurationInFrames
 }) => {
+  const layers = React6.Children.toArray(children);
   const frame = useCurrentFrame9();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
@@ -1055,7 +1194,7 @@ var FadeTransition = ({
     const t = interpolate8(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     opacity *= 1 - ease(t, easing);
   }
-  return /* @__PURE__ */ jsx16(AbsoluteFill13, { style: { opacity }, children });
+  return /* @__PURE__ */ jsx20(Fill, { style: { opacity }, children: layers.map((child, i) => /* @__PURE__ */ jsx20("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var FadeTransitionComponentMetadata = {
   kind: "composite",
@@ -1067,17 +1206,17 @@ var FadeTransitionComponentMetadata = {
 };
 
 // src/components/composites/GlitchText.tsx
-import { AbsoluteFill as AbsoluteFill14, useCurrentFrame as useCurrentFrame10 } from "remotion";
-import { z as z19 } from "zod";
-import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
-var GlitchTextPropsSchema = z19.object({
-  content: z19.string().max(100),
-  fontSize: z19.number().min(8).max(240).default(72),
-  color: z19.string().default("#FFFFFF"),
-  fontFamily: z19.string().default("monospace"),
-  position: z19.enum(["top", "center", "bottom"]).default("center"),
-  intensity: z19.number().int().min(1).max(10).default(5),
-  glitchDuration: z19.number().int().min(5).max(30).default(10)
+import { useCurrentFrame as useCurrentFrame10 } from "remotion";
+import { z as z22 } from "zod";
+import { jsx as jsx21, jsxs as jsxs5 } from "react/jsx-runtime";
+var GlitchTextPropsSchema = z22.object({
+  content: z22.string().max(100),
+  fontSize: z22.number().min(8).max(240).default(72),
+  color: z22.string().default("#FFFFFF"),
+  fontFamily: z22.string().default("monospace"),
+  position: z22.enum(["top", "center", "bottom"]).default("center"),
+  intensity: z22.number().int().min(1).max(10).default(5),
+  glitchDuration: z22.number().int().min(5).max(30).default(10)
 });
 var positionStyles2 = (position) => {
   if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
@@ -1111,10 +1250,10 @@ var GlitchText = ({
     textTransform: "uppercase",
     textAlign: "center"
   };
-  return /* @__PURE__ */ jsx17(AbsoluteFill14, { style: { display: "flex", ...positionStyles2(position) }, children: /* @__PURE__ */ jsxs5("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx17("div", { style: { ...baseStyle, color, transform: `translate(${jitter}px, ${jitterY}px)` }, children: content }),
-    /* @__PURE__ */ jsx17("div", { style: { ...baseStyle, color: "#FF3B30", transform: `translate(${jitter + 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content }),
-    /* @__PURE__ */ jsx17("div", { style: { ...baseStyle, color: "#0A84FF", transform: `translate(${jitter - 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content })
+  return /* @__PURE__ */ jsx21(Fill, { style: { display: "flex", ...positionStyles2(position) }, children: /* @__PURE__ */ jsxs5("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx21("div", { style: { ...baseStyle, color, transform: `translate(${jitter}px, ${jitterY}px)` }, children: content }),
+    /* @__PURE__ */ jsx21("div", { style: { ...baseStyle, color: "#FF3B30", transform: `translate(${jitter + 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content }),
+    /* @__PURE__ */ jsx21("div", { style: { ...baseStyle, color: "#0A84FF", transform: `translate(${jitter - 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content })
   ] }) });
 };
 var GlitchTextComponentMetadata = {
@@ -1125,17 +1264,16 @@ var GlitchTextComponentMetadata = {
 };
 
 // src/components/composites/GridLayout.tsx
-import { AbsoluteFill as AbsoluteFill15 } from "remotion";
-import { z as z20 } from "zod";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var GridLayoutPropsSchema = z20.object({
-  columns: z20.number().int().min(1).max(4).default(2),
-  rows: z20.number().int().min(1).max(4).default(2),
-  gap: z20.number().min(0).max(50).default(20),
-  padding: z20.number().min(0).max(100).default(40)
+import { z as z23 } from "zod";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var GridLayoutPropsSchema = z23.object({
+  columns: z23.number().int().min(1).max(4).default(2),
+  rows: z23.number().int().min(1).max(4).default(2),
+  gap: z23.number().min(0).max(50).default(20),
+  padding: z23.number().min(0).max(100).default(40)
 });
 var GridLayout = ({ columns, rows, gap, padding, children }) => {
-  return /* @__PURE__ */ jsx18(AbsoluteFill15, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx22(Fill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ jsx22(
     "div",
     {
       style: {
@@ -1160,13 +1298,13 @@ var GridLayoutComponentMetadata = {
 };
 
 // src/components/composites/ImageCollage.tsx
-import { AbsoluteFill as AbsoluteFill16, Img as Img3, spring as spring5, staticFile as staticFile5, useCurrentFrame as useCurrentFrame11, useVideoConfig as useVideoConfig5 } from "remotion";
-import { z as z21 } from "zod";
-import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
-var ImageCollagePropsSchema = z21.object({
-  images: z21.array(z21.object({ src: z21.string().min(1), caption: z21.string().optional() })).min(2).max(9),
-  layout: z21.enum(["grid", "stack", "scatter"]).default("grid"),
-  stagger: z21.number().int().min(2).max(10).default(5)
+import { Img as Img3, spring as spring5, staticFile as staticFile5, useCurrentFrame as useCurrentFrame11, useVideoConfig as useVideoConfig5 } from "remotion";
+import { z as z24 } from "zod";
+import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
+var ImageCollagePropsSchema = z24.object({
+  images: z24.array(z24.object({ src: z24.string().min(1), caption: z24.string().optional() })).min(2).max(9),
+  layout: z24.enum(["grid", "stack", "scatter"]).default("grid"),
+  stagger: z24.number().int().min(2).max(10).default(5)
 });
 var resolveAsset4 = (value) => isRemoteAssetPath(value) ? value : staticFile5(staticFileInputFromAssetPath(value));
 var ImageCollage = ({ images, layout, stagger }) => {
@@ -1176,7 +1314,7 @@ var ImageCollage = ({ images, layout, stagger }) => {
   const cols = Math.ceil(Math.sqrt(n));
   const rows = Math.ceil(n / cols);
   if (layout === "grid") {
-    return /* @__PURE__ */ jsx19(AbsoluteFill16, { style: { padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx23(Fill, { style: { padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ jsx23(
       "div",
       {
         style: {
@@ -1190,19 +1328,19 @@ var ImageCollage = ({ images, layout, stagger }) => {
         children: images.map((img, i) => {
           const p = spring5({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
           return /* @__PURE__ */ jsxs6("div", { style: { position: "relative", overflow: "hidden", borderRadius: 18, opacity: p, transform: `scale(${0.92 + 0.08 * p})` }, children: [
-            /* @__PURE__ */ jsx19(Img3, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
-            img.caption ? /* @__PURE__ */ jsx19("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
+            /* @__PURE__ */ jsx23(Img3, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+            img.caption ? /* @__PURE__ */ jsx23("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0, padding: 12, background: "linear-gradient(transparent, rgba(0,0,0,0.7))", color: "#fff", fontWeight: 700 }, children: img.caption }) : null
           ] }, i);
         })
       }
     ) });
   }
-  return /* @__PURE__ */ jsx19(AbsoluteFill16, { children: images.map((img, i) => {
+  return /* @__PURE__ */ jsx23(Fill, { children: images.map((img, i) => {
     const p = spring5({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
     const baseRotate = layout === "stack" ? (i - (n - 1) / 2) * 4 : i * 17 % 20 - 10;
     const baseX = layout === "scatter" ? i * 137 % 300 - 150 : 0;
     const baseY = layout === "scatter" ? (i + 3) * 89 % 200 - 100 : 0;
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx23(
       "div",
       {
         style: {
@@ -1217,7 +1355,7 @@ var ImageCollage = ({ images, layout, stagger }) => {
           overflow: "hidden",
           boxShadow: "0 20px 60px rgba(0,0,0,0.35)"
         },
-        children: /* @__PURE__ */ jsx19(Img3, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } })
+        children: /* @__PURE__ */ jsx23(Img3, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } })
       },
       i
     );
@@ -1231,13 +1369,13 @@ var ImageCollageComponentMetadata = {
 };
 
 // src/components/composites/ImageReveal.tsx
-import { AbsoluteFill as AbsoluteFill17, Img as Img4, interpolate as interpolate9, staticFile as staticFile6, useCurrentFrame as useCurrentFrame12 } from "remotion";
-import { z as z22 } from "zod";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var ImageRevealPropsSchema = z22.object({
-  src: z22.string().min(1),
-  direction: z22.enum(["left", "right", "top", "bottom", "center"]).default("left"),
-  revealType: z22.enum(["wipe", "expand", "iris"]).default("wipe")
+import { Img as Img4, interpolate as interpolate9, staticFile as staticFile6, useCurrentFrame as useCurrentFrame12 } from "remotion";
+import { z as z25 } from "zod";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var ImageRevealPropsSchema = z25.object({
+  src: z25.string().min(1),
+  direction: z25.enum(["left", "right", "top", "bottom", "center"]).default("left"),
+  revealType: z25.enum(["wipe", "expand", "iris"]).default("wipe")
 });
 var resolveAsset5 = (value) => isRemoteAssetPath(value) ? value : staticFile6(staticFileInputFromAssetPath(value));
 var ImageReveal = ({ src, direction, revealType, __wavesDurationInFrames }) => {
@@ -1267,7 +1405,7 @@ var ImageReveal = ({ src, direction, revealType, __wavesDurationInFrames }) => {
     clipPath = `circle(${Math.round(150 * p)}% at 50% 50%)`;
   }
   const opacity = revealType === "expand" ? p : 1;
-  return /* @__PURE__ */ jsx20(AbsoluteFill17, { children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx24(Fill, { children: /* @__PURE__ */ jsx24(
     Img4,
     {
       src: resolveAsset5(src),
@@ -1291,14 +1429,14 @@ var ImageRevealComponentMetadata = {
 };
 
 // src/components/composites/ImageSequence.tsx
-import { AbsoluteFill as AbsoluteFill18, Img as Img5, staticFile as staticFile7, useCurrentFrame as useCurrentFrame13, useVideoConfig as useVideoConfig6 } from "remotion";
-import { z as z23 } from "zod";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var ImageSequencePropsSchema = z23.object({
-  basePath: z23.string().min(1),
-  frameCount: z23.number().int().positive(),
-  filePattern: z23.string().default("frame_{frame}.png"),
-  fps: z23.number().int().min(1).max(120).default(30)
+import { Img as Img5, staticFile as staticFile7, useCurrentFrame as useCurrentFrame13, useVideoConfig as useVideoConfig6 } from "remotion";
+import { z as z26 } from "zod";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var ImageSequencePropsSchema = z26.object({
+  basePath: z26.string().min(1),
+  frameCount: z26.number().int().positive(),
+  filePattern: z26.string().default("frame_{frame}.png"),
+  fps: z26.number().int().min(1).max(120).default(30)
 });
 function joinPath(base, file) {
   if (base.endsWith("/")) return `${base}${file}`;
@@ -1311,7 +1449,7 @@ var ImageSequence = ({ basePath, frameCount, filePattern, fps }) => {
   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__ */ jsx21(AbsoluteFill18, { children: /* @__PURE__ */ jsx21(Img5, { src: resolveAsset6(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) });
+  return /* @__PURE__ */ jsx25(Fill, { children: /* @__PURE__ */ jsx25(Img5, { src: resolveAsset6(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) });
 };
 var ImageSequenceComponentMetadata = {
   kind: "composite",
@@ -1321,18 +1459,18 @@ var ImageSequenceComponentMetadata = {
 };
 
 // src/components/composites/ImageWithCaption.tsx
-import { AbsoluteFill as AbsoluteFill19, Img as Img6, interpolate as interpolate10, staticFile as staticFile8, useCurrentFrame as useCurrentFrame14 } from "remotion";
-import { z as z24 } from "zod";
-import { jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
-var CaptionStyleSchema = z24.object({
-  fontSize: z24.number().min(12).max(80).default(32),
-  color: z24.string().default("#FFFFFF"),
-  backgroundColor: z24.string().default("rgba(0,0,0,0.7)")
+import { Img as Img6, interpolate as interpolate10, staticFile as staticFile8, useCurrentFrame as useCurrentFrame14 } from "remotion";
+import { z as z27 } from "zod";
+import { jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
+var CaptionStyleSchema = z27.object({
+  fontSize: z27.number().min(12).max(80).default(32),
+  color: z27.string().default("#FFFFFF"),
+  backgroundColor: z27.string().default("rgba(0,0,0,0.7)")
 });
-var ImageWithCaptionPropsSchema = z24.object({
-  src: z24.string().min(1),
-  caption: z24.string().max(200),
-  captionPosition: z24.enum(["top", "bottom", "overlay"]).default("bottom"),
+var ImageWithCaptionPropsSchema = z27.object({
+  src: z27.string().min(1),
+  caption: z27.string().max(200),
+  captionPosition: z27.enum(["top", "bottom", "overlay"]).default("bottom"),
   captionStyle: CaptionStyleSchema.optional()
 });
 var resolveAsset7 = (value) => isRemoteAssetPath(value) ? value : staticFile8(staticFileInputFromAssetPath(value));
@@ -1340,7 +1478,7 @@ var ImageWithCaption = ({ src, caption, captionPosition, captionStyle }) => {
   const frame = useCurrentFrame14();
   const p = interpolate10(frame, [8, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const style = captionStyle ?? { fontSize: 32, color: "#FFFFFF", backgroundColor: "rgba(0,0,0,0.7)" };
-  const captionBox = /* @__PURE__ */ jsx22(
+  const captionBox = /* @__PURE__ */ jsx26(
     "div",
     {
       style: {
@@ -1357,15 +1495,15 @@ var ImageWithCaption = ({ src, caption, captionPosition, captionStyle }) => {
     }
   );
   if (captionPosition === "top" || captionPosition === "bottom") {
-    return /* @__PURE__ */ jsxs7(AbsoluteFill19, { style: { display: "flex", flexDirection: "column" }, children: [
+    return /* @__PURE__ */ jsxs7(Fill, { style: { display: "flex", flexDirection: "column" }, children: [
       captionPosition === "top" ? captionBox : null,
-      /* @__PURE__ */ jsx22("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx22(Img6, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) }),
+      /* @__PURE__ */ jsx26("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx26(Img6, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) }),
       captionPosition === "bottom" ? captionBox : null
     ] });
   }
-  return /* @__PURE__ */ jsxs7(AbsoluteFill19, { children: [
-    /* @__PURE__ */ jsx22(Img6, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
-    /* @__PURE__ */ jsx22("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0 }, children: captionBox })
+  return /* @__PURE__ */ jsxs7(Fill, { children: [
+    /* @__PURE__ */ jsx26(Img6, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+    /* @__PURE__ */ jsx26("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0 }, children: captionBox })
   ] });
 };
 var ImageWithCaptionComponentMetadata = {
@@ -1376,17 +1514,17 @@ var ImageWithCaptionComponentMetadata = {
 };
 
 // src/components/composites/InstagramStory.tsx
-import { AbsoluteFill as AbsoluteFill20, Audio as RemotionAudio2, Img as Img7, interpolate as interpolate11, staticFile as staticFile9, useCurrentFrame as useCurrentFrame15 } from "remotion";
-import { z as z25 } from "zod";
-import { jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
-var InstagramStoryPropsSchema = z25.object({
-  backgroundImage: z25.string().optional(),
-  backgroundColor: z25.string().default("#000000"),
-  profilePic: z25.string().optional(),
-  username: z25.string().optional(),
-  text: z25.string().max(100).optional(),
-  sticker: z25.enum(["none", "poll", "question", "countdown"]).default("none"),
-  musicTrack: z25.string().optional()
+import { Audio as RemotionAudio2, Img as Img7, interpolate as interpolate11, staticFile as staticFile9, useCurrentFrame as useCurrentFrame15 } from "remotion";
+import { z as z28 } from "zod";
+import { jsx as jsx27, jsxs as jsxs8 } from "react/jsx-runtime";
+var InstagramStoryPropsSchema = z28.object({
+  backgroundImage: z28.string().optional(),
+  backgroundColor: z28.string().default("#000000"),
+  profilePic: z28.string().optional(),
+  username: z28.string().optional(),
+  text: z28.string().max(100).optional(),
+  sticker: z28.enum(["none", "poll", "question", "countdown"]).default("none"),
+  musicTrack: z28.string().optional()
 });
 var resolveAsset8 = (value) => isRemoteAssetPath(value) ? value : staticFile9(staticFileInputFromAssetPath(value));
 var InstagramStory = ({
@@ -1400,15 +1538,15 @@ var InstagramStory = ({
 }) => {
   const frame = useCurrentFrame15();
   const fade = interpolate11(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  return /* @__PURE__ */ jsxs8(AbsoluteFill20, { style: { backgroundColor }, children: [
-    musicTrack ? /* @__PURE__ */ jsx23(RemotionAudio2, { src: resolveAsset8(musicTrack), volume: 0.6 }) : null,
-    backgroundImage ? /* @__PURE__ */ jsx23(Img7, { src: resolveAsset8(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover", opacity: fade } }) : null,
-    /* @__PURE__ */ jsxs8(AbsoluteFill20, { style: { padding: 60, boxSizing: "border-box" }, children: [
+  return /* @__PURE__ */ jsxs8(Fill, { style: { backgroundColor }, children: [
+    musicTrack ? /* @__PURE__ */ jsx27(RemotionAudio2, { src: resolveAsset8(musicTrack), volume: 0.6 }) : null,
+    backgroundImage ? /* @__PURE__ */ jsx27(Img7, { src: resolveAsset8(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover", opacity: fade } }) : null,
+    /* @__PURE__ */ jsxs8(Fill, { style: { padding: 60, boxSizing: "border-box" }, children: [
       profilePic || username ? /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 18 }, children: [
-        profilePic ? /* @__PURE__ */ jsx23(Img7, { src: resolveAsset8(profilePic), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ jsx23("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "rgba(255,255,255,0.2)" } }),
-        /* @__PURE__ */ jsx23("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 34 }, children: username ?? "username" })
+        profilePic ? /* @__PURE__ */ jsx27(Img7, { src: resolveAsset8(profilePic), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ jsx27("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "rgba(255,255,255,0.2)" } }),
+        /* @__PURE__ */ jsx27("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 34 }, children: username ?? "username" })
       ] }) : null,
-      text ? /* @__PURE__ */ jsx23(
+      text ? /* @__PURE__ */ jsx27(
         "div",
         {
           style: {
@@ -1422,7 +1560,7 @@ var InstagramStory = ({
           children: text
         }
       ) : null,
-      sticker !== "none" ? /* @__PURE__ */ jsx23(
+      sticker !== "none" ? /* @__PURE__ */ jsx27(
         "div",
         {
           style: {
@@ -1451,16 +1589,16 @@ var InstagramStoryComponentMetadata = {
 };
 
 // src/components/composites/IntroScene.tsx
-import { AbsoluteFill as AbsoluteFill21, Audio as RemotionAudio3, Img as Img8, interpolate as interpolate12, spring as spring6, staticFile as staticFile10, useCurrentFrame as useCurrentFrame16, useVideoConfig as useVideoConfig7 } from "remotion";
-import { z as z26 } from "zod";
-import { jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
-var IntroScenePropsSchema = z26.object({
-  logoSrc: z26.string().min(1),
-  companyName: z26.string().min(1),
-  tagline: z26.string().optional(),
-  backgroundColor: z26.string().default("#000000"),
-  primaryColor: z26.string().default("#FFFFFF"),
-  musicTrack: z26.string().optional()
+import { Audio as RemotionAudio3, Img as Img8, interpolate as interpolate12, spring as spring6, staticFile as staticFile10, useCurrentFrame as useCurrentFrame16, useVideoConfig as useVideoConfig7 } from "remotion";
+import { z as z29 } from "zod";
+import { jsx as jsx28, jsxs as jsxs9 } from "react/jsx-runtime";
+var IntroScenePropsSchema = z29.object({
+  logoSrc: z29.string().min(1),
+  companyName: z29.string().min(1),
+  tagline: z29.string().optional(),
+  backgroundColor: z29.string().default("#000000"),
+  primaryColor: z29.string().default("#FFFFFF"),
+  musicTrack: z29.string().optional()
 });
 var resolveAsset9 = (value) => isRemoteAssetPath(value) ? value : staticFile10(staticFileInputFromAssetPath(value));
 var IntroScene = ({
@@ -1479,18 +1617,18 @@ var IntroScene = ({
   const nameOpacity = interpolate12(frame, [20, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const taglineY = interpolate12(frame, [50, 80], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const outroFade = interpolate12(frame, [Math.max(0, total - 20), total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  return /* @__PURE__ */ jsxs9(AbsoluteFill21, { style: { backgroundColor, justifyContent: "center", alignItems: "center" }, children: [
-    musicTrack ? /* @__PURE__ */ jsx24(RemotionAudio3, { src: resolveAsset9(musicTrack), volume: 0.7 }) : null,
+  return /* @__PURE__ */ jsxs9(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+    musicTrack ? /* @__PURE__ */ jsx28(RemotionAudio3, { src: resolveAsset9(musicTrack), volume: 0.7 }) : null,
     /* @__PURE__ */ jsxs9("div", { style: { textAlign: "center", opacity: outroFade }, children: [
-      /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx28(
         Img8,
         {
           src: resolveAsset9(logoSrc),
           style: { width: 280, height: 280, objectFit: "contain", transform: `scale(${logoP})` }
         }
       ),
-      /* @__PURE__ */ jsx24("div", { style: { marginTop: 24, color: primaryColor, fontSize: 64, fontWeight: 900, opacity: nameOpacity }, children: companyName }),
-      tagline ? /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx28("div", { style: { marginTop: 24, color: primaryColor, fontSize: 64, fontWeight: 900, opacity: nameOpacity }, children: companyName }),
+      tagline ? /* @__PURE__ */ jsx28(
         "div",
         {
           style: {
@@ -1515,15 +1653,15 @@ var IntroSceneComponentMetadata = {
 };
 
 // src/components/composites/KenBurnsImage.tsx
-import { AbsoluteFill as AbsoluteFill22, Img as Img9, interpolate as interpolate13, staticFile as staticFile11, useCurrentFrame as useCurrentFrame17 } from "remotion";
-import { z as z27 } from "zod";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var KenBurnsImagePropsSchema = z27.object({
-  src: z27.string().min(1),
-  startScale: z27.number().min(1).max(2).default(1),
-  endScale: z27.number().min(1).max(2).default(1.2),
-  panDirection: z27.enum(["none", "left", "right", "up", "down"]).default("none"),
-  panAmount: z27.number().min(0).max(100).default(50)
+import { Img as Img9, interpolate as interpolate13, staticFile as staticFile11, useCurrentFrame as useCurrentFrame17 } from "remotion";
+import { z as z30 } from "zod";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var KenBurnsImagePropsSchema = z30.object({
+  src: z30.string().min(1),
+  startScale: z30.number().min(1).max(2).default(1),
+  endScale: z30.number().min(1).max(2).default(1.2),
+  panDirection: z30.enum(["none", "left", "right", "up", "down"]).default("none"),
+  panAmount: z30.number().min(0).max(100).default(50)
 });
 var resolveAsset10 = (value) => isRemoteAssetPath(value) ? value : staticFile11(staticFileInputFromAssetPath(value));
 var KenBurnsImage = ({
@@ -1540,7 +1678,7 @@ var KenBurnsImage = ({
   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__ */ jsx25(AbsoluteFill22, { children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx29(Fill, { children: /* @__PURE__ */ jsx29(
     Img9,
     {
       src: resolveAsset10(src),
@@ -1562,20 +1700,20 @@ var KenBurnsImageComponentMetadata = {
 };
 
 // src/components/composites/KineticTypography.tsx
-import { AbsoluteFill as AbsoluteFill23, spring as spring7, useCurrentFrame as useCurrentFrame18, useVideoConfig as useVideoConfig8 } from "remotion";
-import { z as z28 } from "zod";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var WordSchema = z28.object({
-  text: z28.string().min(1),
-  emphasis: z28.enum(["normal", "bold", "giant"]).default("normal")
+import { spring as spring7, useCurrentFrame as useCurrentFrame18, useVideoConfig as useVideoConfig8 } from "remotion";
+import { z as z31 } from "zod";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var WordSchema = z31.object({
+  text: z31.string().min(1),
+  emphasis: z31.enum(["normal", "bold", "giant"]).default("normal")
 });
-var KineticTypographyPropsSchema = z28.object({
-  words: z28.array(WordSchema).min(1).max(50),
-  fontSize: z28.number().min(12).max(140).default(48),
-  color: z28.string().default("#FFFFFF"),
-  fontFamily: z28.string().default("Inter"),
-  timing: z28.array(z28.number().int().min(0)).min(1).describe("Frame timing for each word"),
-  transition: z28.enum(["fade", "scale", "slideLeft", "slideRight"]).default("scale")
+var KineticTypographyPropsSchema = z31.object({
+  words: z31.array(WordSchema).min(1).max(50),
+  fontSize: z31.number().min(12).max(140).default(48),
+  color: z31.string().default("#FFFFFF"),
+  fontFamily: z31.string().default("Inter"),
+  timing: z31.array(z31.number().int().min(0)).min(1).describe("Frame timing for each word"),
+  transition: z31.enum(["fade", "scale", "slideLeft", "slideRight"]).default("scale")
 });
 var KineticTypography = ({
   words,
@@ -1605,7 +1743,7 @@ var KineticTypography = ({
   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__ */ jsx26(AbsoluteFill23, { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx30(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx30(
     "div",
     {
       style: {
@@ -1630,17 +1768,17 @@ var KineticTypographyComponentMetadata = {
 };
 
 // src/components/composites/LineGraph.tsx
-import { AbsoluteFill as AbsoluteFill24, interpolate as interpolate14, useCurrentFrame as useCurrentFrame19 } from "remotion";
-import { z as z29 } from "zod";
-import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
-var PointSchema = z29.object({ x: z29.number(), y: z29.number() });
-var LineGraphPropsSchema = z29.object({
-  data: z29.array(PointSchema).min(2).max(50),
-  color: z29.string().default("#00FF00"),
-  strokeWidth: z29.number().min(1).max(10).default(3),
-  showDots: z29.boolean().default(true),
-  fillArea: z29.boolean().default(false),
-  animate: z29.enum(["draw", "reveal"]).default("draw")
+import { interpolate as interpolate14, useCurrentFrame as useCurrentFrame19 } from "remotion";
+import { z as z32 } from "zod";
+import { jsx as jsx31, jsxs as jsxs10 } from "react/jsx-runtime";
+var PointSchema = z32.object({ x: z32.number(), y: z32.number() });
+var LineGraphPropsSchema = z32.object({
+  data: z32.array(PointSchema).min(2).max(50),
+  color: z32.string().default("#00FF00"),
+  strokeWidth: z32.number().min(1).max(10).default(3),
+  showDots: z32.boolean().default(true),
+  fillArea: z32.boolean().default(false),
+  animate: z32.enum(["draw", "reveal"]).default("draw")
 });
 function normalize(data, w, h, pad) {
   const xs = data.map((d) => d.x);
@@ -1676,9 +1814,9 @@ var LineGraph = ({
   const d = toPath(pts);
   const dash = 3e3;
   const dashOffset = dash * (1 - progress);
-  return /* @__PURE__ */ jsx27(AbsoluteFill24, { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsxs10("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [
-    /* @__PURE__ */ jsx27("defs", { children: /* @__PURE__ */ jsx27("clipPath", { id: "waves-line-reveal", children: /* @__PURE__ */ jsx27("rect", { x: "0", y: "0", width: w * progress, height: h }) }) }),
-    fillArea ? /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx31(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsxs10("svg", { viewBox: `0 0 ${w} ${h}`, style: { width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ jsx31("defs", { children: /* @__PURE__ */ jsx31("clipPath", { id: "waves-line-reveal", children: /* @__PURE__ */ jsx31("rect", { x: "0", y: "0", width: w * progress, height: h }) }) }),
+    fillArea ? /* @__PURE__ */ jsx31(
       "path",
       {
         d: `${d} L ${pts[pts.length - 1].x} ${h - pad} L ${pts[0].x} ${h - pad} Z`,
@@ -1687,7 +1825,7 @@ var LineGraph = ({
         clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0
       }
     ) : null,
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx31(
       "path",
       {
         d,
@@ -1701,7 +1839,7 @@ var LineGraph = ({
         clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0
       }
     ),
-    showDots ? /* @__PURE__ */ jsx27("g", { clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0, children: pts.map((p, i) => /* @__PURE__ */ jsx27("circle", { cx: p.x, cy: p.y, r: 6, fill: color }, i)) }) : null
+    showDots ? /* @__PURE__ */ jsx31("g", { clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0, children: pts.map((p, i) => /* @__PURE__ */ jsx31("circle", { cx: p.x, cy: p.y, r: 6, fill: color }, i)) }) : null
   ] }) });
 };
 var LineGraphComponentMetadata = {
@@ -1712,14 +1850,14 @@ var LineGraphComponentMetadata = {
 };
 
 // src/components/composites/LogoReveal.tsx
-import { AbsoluteFill as AbsoluteFill25, Audio as RemotionAudio4, Img as Img10, spring as spring8, staticFile as staticFile12, useCurrentFrame as useCurrentFrame20, useVideoConfig as useVideoConfig9 } from "remotion";
-import { z as z30 } from "zod";
-import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
-var LogoRevealPropsSchema = z30.object({
-  logoSrc: z30.string().min(1),
-  effect: z30.enum(["fade", "scale", "rotate", "slide"]).default("scale"),
-  backgroundColor: z30.string().default("#000000"),
-  soundEffect: z30.string().optional()
+import { Audio as RemotionAudio4, Img as Img10, spring as spring8, staticFile as staticFile12, useCurrentFrame as useCurrentFrame20, useVideoConfig as useVideoConfig9 } from "remotion";
+import { z as z33 } from "zod";
+import { jsx as jsx32, jsxs as jsxs11 } from "react/jsx-runtime";
+var LogoRevealPropsSchema = z33.object({
+  logoSrc: z33.string().min(1),
+  effect: z33.enum(["fade", "scale", "rotate", "slide"]).default("scale"),
+  backgroundColor: z33.string().default("#000000"),
+  soundEffect: z33.string().optional()
 });
 var resolveAsset11 = (value) => isRemoteAssetPath(value) ? value : staticFile12(staticFileInputFromAssetPath(value));
 var LogoReveal = ({ logoSrc, effect, backgroundColor, soundEffect }) => {
@@ -1730,9 +1868,9 @@ var LogoReveal = ({ logoSrc, effect, backgroundColor, soundEffect }) => {
   const scale = effect === "scale" ? p : 1;
   const rotate = effect === "rotate" ? (1 - p) * 360 : 0;
   const translateY = effect === "slide" ? -200 * (1 - p) : 0;
-  return /* @__PURE__ */ jsxs11(AbsoluteFill25, { style: { backgroundColor, justifyContent: "center", alignItems: "center" }, children: [
-    soundEffect ? /* @__PURE__ */ jsx28(RemotionAudio4, { src: resolveAsset11(soundEffect), volume: 1 }) : null,
-    /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs11(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+    soundEffect ? /* @__PURE__ */ jsx32(RemotionAudio4, { src: resolveAsset11(soundEffect), volume: 1 }) : null,
+    /* @__PURE__ */ jsx32(
       Img10,
       {
         src: resolveAsset11(logoSrc),
@@ -1755,20 +1893,20 @@ var LogoRevealComponentMetadata = {
 };
 
 // src/components/composites/OutroScene.tsx
-import { AbsoluteFill as AbsoluteFill26, Img as Img11, spring as spring9, staticFile as staticFile13, useCurrentFrame as useCurrentFrame21, useVideoConfig as useVideoConfig10 } from "remotion";
-import { z as z31 } from "zod";
-import { jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
-var CtaSchema = z31.object({ text: z31.string().min(1), icon: z31.string().optional() });
-var HandleSchema = z31.object({
-  platform: z31.enum(["twitter", "instagram", "youtube", "linkedin"]),
-  handle: z31.string().min(1)
+import { Img as Img11, spring as spring9, staticFile as staticFile13, useCurrentFrame as useCurrentFrame21, useVideoConfig as useVideoConfig10 } from "remotion";
+import { z as z34 } from "zod";
+import { jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
+var CtaSchema = z34.object({ text: z34.string().min(1), icon: z34.string().optional() });
+var HandleSchema = z34.object({
+  platform: z34.enum(["twitter", "instagram", "youtube", "linkedin"]),
+  handle: z34.string().min(1)
 });
-var OutroScenePropsSchema = z31.object({
-  logoSrc: z31.string().min(1),
-  message: z31.string().default("Thank You"),
-  ctaButtons: z31.array(CtaSchema).max(3).optional(),
-  socialHandles: z31.array(HandleSchema).max(4).optional(),
-  backgroundColor: z31.string().default("#000000")
+var OutroScenePropsSchema = z34.object({
+  logoSrc: z34.string().min(1),
+  message: z34.string().default("Thank You"),
+  ctaButtons: z34.array(CtaSchema).max(3).optional(),
+  socialHandles: z34.array(HandleSchema).max(4).optional(),
+  backgroundColor: z34.string().default("#000000")
 });
 var resolveAsset12 = (value) => isRemoteAssetPath(value) ? value : staticFile13(staticFileInputFromAssetPath(value));
 var OutroScene = ({ logoSrc, message, ctaButtons, socialHandles, backgroundColor }) => {
@@ -1777,10 +1915,10 @@ var OutroScene = ({ logoSrc, message, ctaButtons, socialHandles, backgroundColor
   const logoP = spring9({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
   const msgP = spring9({ frame: frame - 18, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
   const ctaP = spring9({ frame: frame - 40, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
-  return /* @__PURE__ */ jsx29(AbsoluteFill26, { style: { backgroundColor, justifyContent: "center", alignItems: "center", padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ jsxs12("div", { style: { textAlign: "center" }, children: [
-    /* @__PURE__ */ jsx29(Img11, { src: resolveAsset12(logoSrc), style: { width: 220, height: 220, objectFit: "contain", transform: `scale(${logoP})` } }),
-    /* @__PURE__ */ jsx29("div", { style: { marginTop: 24, color: "#FFFFFF", fontSize: 72, fontWeight: 1e3, opacity: msgP }, children: message }),
-    ctaButtons?.length ? /* @__PURE__ */ jsx29("div", { style: { marginTop: 34, display: "flex", gap: 18, justifyContent: "center", opacity: ctaP }, children: ctaButtons.map((b, i) => /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx33(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center", padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ jsxs12("div", { style: { textAlign: "center" }, children: [
+    /* @__PURE__ */ jsx33(Img11, { src: resolveAsset12(logoSrc), style: { width: 220, height: 220, objectFit: "contain", transform: `scale(${logoP})` } }),
+    /* @__PURE__ */ jsx33("div", { style: { marginTop: 24, color: "#FFFFFF", fontSize: 72, fontWeight: 1e3, opacity: msgP }, children: message }),
+    ctaButtons?.length ? /* @__PURE__ */ jsx33("div", { style: { marginTop: 34, display: "flex", gap: 18, justifyContent: "center", opacity: ctaP }, children: ctaButtons.map((b, i) => /* @__PURE__ */ jsxs12(
       "div",
       {
         style: {
@@ -1798,7 +1936,7 @@ var OutroScene = ({ logoSrc, message, ctaButtons, socialHandles, backgroundColor
       },
       i
     )) }) : null,
-    socialHandles?.length ? /* @__PURE__ */ jsx29("div", { style: { marginTop: 50, display: "flex", flexDirection: "column", gap: 10, opacity: ctaP }, children: socialHandles.map((h, i) => /* @__PURE__ */ jsxs12("div", { style: { color: "rgba(255,255,255,0.85)", fontSize: 26, fontWeight: 800 }, children: [
+    socialHandles?.length ? /* @__PURE__ */ jsx33("div", { style: { marginTop: 50, display: "flex", flexDirection: "column", gap: 10, opacity: ctaP }, children: socialHandles.map((h, i) => /* @__PURE__ */ jsxs12("div", { style: { color: "rgba(255,255,255,0.85)", fontSize: 26, fontWeight: 800 }, children: [
       h.platform,
       ": ",
       h.handle
@@ -1813,19 +1951,19 @@ var OutroSceneComponentMetadata = {
 };
 
 // src/components/composites/OutlineText.tsx
-import { AbsoluteFill as AbsoluteFill27, interpolate as interpolate15, useCurrentFrame as useCurrentFrame22 } from "remotion";
-import { z as z32 } from "zod";
-import { jsx as jsx30, jsxs as jsxs13 } from "react/jsx-runtime";
-var OutlineTextPropsSchema = z32.object({
-  content: z32.string().max(50),
-  fontSize: z32.number().min(8).max(240).default(96),
-  outlineColor: z32.string().default("#FFFFFF"),
-  fillColor: z32.string().default("#000000"),
-  fontFamily: z32.string().default("Inter"),
-  fontWeight: z32.number().int().min(100).max(900).default(800),
-  position: z32.enum(["top", "center", "bottom"]).default("center"),
-  animation: z32.enum(["draw", "fill"]).default("draw"),
-  strokeWidth: z32.number().min(1).max(10).default(3)
+import { interpolate as interpolate15, useCurrentFrame as useCurrentFrame22 } from "remotion";
+import { z as z35 } from "zod";
+import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
+var OutlineTextPropsSchema = z35.object({
+  content: z35.string().max(50),
+  fontSize: z35.number().min(8).max(240).default(96),
+  outlineColor: z35.string().default("#FFFFFF"),
+  fillColor: z35.string().default("#000000"),
+  fontFamily: z35.string().default("Inter"),
+  fontWeight: z35.number().int().min(100).max(900).default(800),
+  position: z35.enum(["top", "center", "bottom"]).default("center"),
+  animation: z35.enum(["draw", "fill"]).default("draw"),
+  strokeWidth: z35.number().min(1).max(10).default(3)
 });
 var positionStyles3 = (position) => {
   if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
@@ -1847,8 +1985,8 @@ var OutlineText = ({
   const t = interpolate15(frame, [0, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const strokeOpacity = animation === "draw" ? t : 1;
   const fillOpacity = animation === "fill" ? t : 0;
-  return /* @__PURE__ */ jsxs13(AbsoluteFill27, { style: { display: "flex", ...positionStyles3(position) }, children: [
-    /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs13(Fill, { style: { display: "flex", ...positionStyles3(position) }, children: [
+    /* @__PURE__ */ jsx34(
       "div",
       {
         style: {
@@ -1865,7 +2003,7 @@ var OutlineText = ({
         children: content
       }
     ),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx34(
       "div",
       {
         style: {
@@ -1892,16 +2030,16 @@ var OutlineTextComponentMetadata = {
 };
 
 // src/components/composites/ProgressBar.tsx
-import { AbsoluteFill as AbsoluteFill28, interpolate as interpolate16, useCurrentFrame as useCurrentFrame23 } from "remotion";
-import { z as z33 } from "zod";
-import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
-var ProgressBarPropsSchema = z33.object({
-  label: z33.string().optional(),
-  color: z33.string().default("#00FF00"),
-  backgroundColor: z33.string().default("rgba(255,255,255,0.2)"),
-  height: z33.number().min(5).max(50).default(10),
-  position: z33.enum(["top", "bottom"]).default("bottom"),
-  showPercentage: z33.boolean().default(true)
+import { interpolate as interpolate16, useCurrentFrame as useCurrentFrame23 } from "remotion";
+import { z as z36 } from "zod";
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+var ProgressBarPropsSchema = z36.object({
+  label: z36.string().optional(),
+  color: z36.string().default("#00FF00"),
+  backgroundColor: z36.string().default("rgba(255,255,255,0.2)"),
+  height: z36.number().min(5).max(50).default(10),
+  position: z36.enum(["top", "bottom"]).default("bottom"),
+  showPercentage: z36.boolean().default(true)
 });
 var ProgressBar = ({
   label,
@@ -1917,12 +2055,12 @@ var ProgressBar = ({
   const p = interpolate16(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const pct = Math.round(p * 100);
   const yStyle = position === "top" ? { top: 50 } : { bottom: 50 };
-  return /* @__PURE__ */ jsx31(AbsoluteFill28, { children: /* @__PURE__ */ jsxs14("div", { style: { position: "absolute", left: 80, right: 80, ...yStyle }, children: [
+  return /* @__PURE__ */ jsx35(Fill, { children: /* @__PURE__ */ jsxs14("div", { style: { position: "absolute", left: 80, right: 80, ...yStyle }, children: [
     label || showPercentage ? /* @__PURE__ */ jsxs14("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 10, color: "#FFFFFF", fontWeight: 700 }, children: [
-      /* @__PURE__ */ jsx31("span", { children: label ?? "" }),
-      /* @__PURE__ */ jsx31("span", { children: showPercentage ? `${pct}%` : "" })
+      /* @__PURE__ */ jsx35("span", { children: label ?? "" }),
+      /* @__PURE__ */ jsx35("span", { children: showPercentage ? `${pct}%` : "" })
     ] }) : null,
-    /* @__PURE__ */ jsx31("div", { style: { width: "100%", height, backgroundColor, borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ jsx31("div", { style: { width: `${pct}%`, height: "100%", backgroundColor: color } }) })
+    /* @__PURE__ */ jsx35("div", { style: { width: "100%", height, backgroundColor, borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ jsx35("div", { style: { width: `${pct}%`, height: "100%", backgroundColor: color } }) })
   ] }) });
 };
 var ProgressBarComponentMetadata = {
@@ -1933,16 +2071,16 @@ var ProgressBarComponentMetadata = {
 };
 
 // src/components/composites/ProgressRing.tsx
-import { AbsoluteFill as AbsoluteFill29, interpolate as interpolate17, useCurrentFrame as useCurrentFrame24 } from "remotion";
-import { z as z34 } from "zod";
-import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
-var ProgressRingPropsSchema = z34.object({
-  percentage: z34.number().min(0).max(100),
-  size: z34.number().min(100).max(500).default(200),
-  strokeWidth: z34.number().min(5).max(50).default(20),
-  color: z34.string().default("#00FF00"),
-  backgroundColor: z34.string().default("rgba(255,255,255,0.2)"),
-  showLabel: z34.boolean().default(true)
+import { interpolate as interpolate17, useCurrentFrame as useCurrentFrame24 } from "remotion";
+import { z as z37 } from "zod";
+import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
+var ProgressRingPropsSchema = z37.object({
+  percentage: z37.number().min(0).max(100),
+  size: z37.number().min(100).max(500).default(200),
+  strokeWidth: z37.number().min(5).max(50).default(20),
+  color: z37.string().default("#00FF00"),
+  backgroundColor: z37.string().default("rgba(255,255,255,0.2)"),
+  showLabel: z37.boolean().default(true)
 });
 var ProgressRing = ({
   percentage,
@@ -1961,9 +2099,9 @@ var ProgressRing = ({
   const c = 2 * Math.PI * r;
   const dash = c;
   const offset = c - current / 100 * c;
-  return /* @__PURE__ */ jsxs15(AbsoluteFill29, { style: { justifyContent: "center", alignItems: "center" }, children: [
+  return /* @__PURE__ */ jsxs15(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: [
     /* @__PURE__ */ jsxs15("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx36(
         "circle",
         {
           cx: size / 2,
@@ -1974,7 +2112,7 @@ var ProgressRing = ({
           fill: "transparent"
         }
       ),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx36(
         "circle",
         {
           cx: size / 2,
@@ -2004,14 +2142,15 @@ var ProgressRingComponentMetadata = {
 };
 
 // src/components/composites/SlideTransition.tsx
-import { AbsoluteFill as AbsoluteFill30, interpolate as interpolate18, useCurrentFrame as useCurrentFrame25 } from "remotion";
-import { z as z35 } from "zod";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var SlideTransitionPropsSchema = z35.object({
-  durationInFrames: z35.number().int().min(10).max(60).default(30),
-  direction: z35.enum(["left", "right", "up", "down"]).default("left"),
-  distance: z35.number().int().min(1).max(2e3).default(160),
-  phase: z35.enum(["in", "out", "inOut"]).default("inOut")
+import React7 from "react";
+import { interpolate as interpolate18, useCurrentFrame as useCurrentFrame25 } from "remotion";
+import { z as z38 } from "zod";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var SlideTransitionPropsSchema = z38.object({
+  durationInFrames: z38.number().int().min(10).max(60).default(30),
+  direction: z38.enum(["left", "right", "up", "down"]).default("left"),
+  distance: z38.number().int().min(1).max(2e3).default(160),
+  phase: z38.enum(["in", "out", "inOut"]).default("inOut")
 });
 function translateFor(direction, delta) {
   if (direction === "left") return { x: -delta, y: 0 };
@@ -2027,6 +2166,7 @@ var SlideTransition = ({
   children,
   __wavesDurationInFrames
 }) => {
+  const layers = React7.Children.toArray(children);
   const frame = useCurrentFrame25();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
@@ -2049,7 +2189,7 @@ var SlideTransition = ({
     ty += y;
     opacity *= interpolate18(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   }
-  return /* @__PURE__ */ jsx33(AbsoluteFill30, { style: { opacity, transform: `translate(${tx}px, ${ty}px)` }, children });
+  return /* @__PURE__ */ jsx37(Fill, { style: { opacity, transform: `translate(${tx}px, ${ty}px)` }, children: layers.map((child, i) => /* @__PURE__ */ jsx37("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var SlideTransitionComponentMetadata = {
   kind: "composite",
@@ -2061,16 +2201,15 @@ var SlideTransitionComponentMetadata = {
 };
 
 // src/components/composites/SplitScreen.tsx
-import React from "react";
-import { AbsoluteFill as AbsoluteFill31 } from "remotion";
-import { z as z36 } from "zod";
-import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
-var SplitScreenPropsSchema = z36.object({
-  orientation: z36.enum(["vertical", "horizontal"]).default("vertical"),
-  split: z36.number().min(0.1).max(0.9).default(0.5),
-  gap: z36.number().min(0).default(48),
-  padding: z36.number().min(0).default(80),
-  dividerColor: z36.string().optional()
+import React8 from "react";
+import { z as z39 } from "zod";
+import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
+var SplitScreenPropsSchema = z39.object({
+  orientation: z39.enum(["vertical", "horizontal"]).default("vertical"),
+  split: z39.number().min(0.1).max(0.9).default(0.5),
+  gap: z39.number().min(0).default(48),
+  padding: z39.number().min(0).default(80),
+  dividerColor: z39.string().optional()
 });
 var SplitScreen = ({
   orientation,
@@ -2080,14 +2219,14 @@ var SplitScreen = ({
   dividerColor,
   children
 }) => {
-  const items = React.Children.toArray(children);
+  const items = React8.Children.toArray(children);
   const first = items[0] ?? null;
   const second = items[1] ?? null;
   const isVertical = orientation === "vertical";
   const flexDirection = isVertical ? "row" : "column";
-  return /* @__PURE__ */ jsx34(AbsoluteFill31, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexDirection, gap, width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsx34("div", { style: { flex: split, position: "relative" }, children: first }),
-    dividerColor ? /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx38(Fill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexDirection, gap, width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ jsx38("div", { style: { flex: split, position: "relative" }, children: first }),
+    dividerColor ? /* @__PURE__ */ jsx38(
       "div",
       {
         style: {
@@ -2098,7 +2237,7 @@ var SplitScreen = ({
         }
       }
     ) : null,
-    /* @__PURE__ */ jsx34("div", { style: { flex: 1 - split, position: "relative" }, children: second })
+    /* @__PURE__ */ jsx38("div", { style: { flex: 1 - split, position: "relative" }, children: second })
   ] }) });
 };
 var SplitScreenComponentMetadata = {
@@ -2112,22 +2251,25 @@ var SplitScreenComponentMetadata = {
 };
 
 // src/components/composites/SplitText.tsx
-import { AbsoluteFill as AbsoluteFill32, spring as spring10, useCurrentFrame as useCurrentFrame26, useVideoConfig as useVideoConfig11 } from "remotion";
-import { z as z37 } from "zod";
-import { jsx as jsx35 } from "react/jsx-runtime";
-var SplitTextPropsSchema = z37.object({
-  content: z37.string().max(200),
-  fontSize: z37.number().min(8).max(200).default(48),
-  color: z37.string().default("#FFFFFF"),
-  fontFamily: z37.string().default("Inter"),
-  position: z37.enum(["top", "center", "bottom"]).default("center"),
-  splitBy: z37.enum(["word", "letter"]).default("word"),
-  stagger: z37.number().int().min(1).max(10).default(3),
-  animation: z37.enum(["fade", "slideUp", "slideDown", "scale", "rotate"]).default("slideUp")
+import { spring as spring10, useCurrentFrame as useCurrentFrame26, useVideoConfig as useVideoConfig11 } from "remotion";
+import { z as z40 } from "zod";
+import { jsx as jsx39 } from "react/jsx-runtime";
+var SplitTextPropsSchema = z40.object({
+  content: z40.string().max(200),
+  fontSize: z40.number().min(8).max(200).default(48),
+  color: z40.string().default("#FFFFFF"),
+  fontFamily: z40.string().default("Inter"),
+  position: z40.enum(["top", "center", "bottom"]).default("center"),
+  splitBy: z40.enum(["word", "letter"]).default("word"),
+  stagger: z40.number().int().min(1).max(10).default(3),
+  animation: z40.enum(["fade", "slideUp", "slideDown", "scale", "rotate"]).default("slideUp"),
+  maxWidthPct: z40.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: z40.number().min(0).max(0.25).default(0.06)
 });
-var positionStyles4 = (position) => {
-  if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 80 };
-  if (position === "bottom") return { justifyContent: "center", alignItems: "flex-end", paddingBottom: 80 };
+var positionStyles4 = (position, safeInsetPct) => {
+  const inset = `${(safeInsetPct * 100).toFixed(2)}%`;
+  if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: inset };
+  if (position === "bottom") return { justifyContent: "center", alignItems: "flex-end", paddingBottom: inset };
   return { justifyContent: "center", alignItems: "center" };
 };
 function getItemStyle(progress, animation) {
@@ -2154,12 +2296,14 @@ var SplitText = ({
   position,
   splitBy,
   stagger,
-  animation
+  animation,
+  maxWidthPct,
+  safeInsetPct
 }) => {
   const frame = useCurrentFrame26();
   const { fps } = useVideoConfig11();
   const items = splitBy === "letter" ? content.split("") : content.trim().split(/\s+/);
-  return /* @__PURE__ */ jsx35(AbsoluteFill32, { style: { display: "flex", ...positionStyles4(position) }, children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx39(Fill, { style: { display: "flex", ...positionStyles4(position, safeInsetPct) }, children: /* @__PURE__ */ jsx39(
     "div",
     {
       style: {
@@ -2167,11 +2311,14 @@ var SplitText = ({
         flexWrap: "wrap",
         justifyContent: "center",
         gap: splitBy === "letter" ? 0 : 12,
+        maxWidth: `${Math.round(maxWidthPct * 100)}%`,
         fontSize,
         color,
         fontFamily,
         fontWeight: 700,
-        textAlign: "center"
+        textAlign: "center",
+        overflowWrap: "anywhere",
+        wordBreak: "break-word"
       },
       children: items.map((t, i) => {
         const progress = spring10({
@@ -2179,7 +2326,7 @@ var SplitText = ({
           fps,
           config: { damping: 14, stiffness: 120, mass: 0.9 }
         });
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx39(
           "span",
           {
             style: {
@@ -2207,19 +2354,19 @@ var SplitTextComponentMetadata = {
 };
 
 // src/components/composites/SubtitleText.tsx
-import { AbsoluteFill as AbsoluteFill33, interpolate as interpolate19, useCurrentFrame as useCurrentFrame27 } from "remotion";
-import { z as z38 } from "zod";
-import { jsx as jsx36 } from "react/jsx-runtime";
-var SubtitleTextPropsSchema = z38.object({
-  text: z38.string().max(200),
-  fontSize: z38.number().min(12).max(80).default(36),
-  color: z38.string().default("#FFFFFF"),
-  backgroundColor: z38.string().default("rgba(0,0,0,0.7)"),
-  fontFamily: z38.string().default("Inter"),
-  position: z38.enum(["top", "bottom"]).default("bottom"),
-  maxWidth: z38.number().min(200).max(1200).default(800),
-  padding: z38.number().min(0).max(80).default(20),
-  highlightWords: z38.array(z38.string()).optional()
+import { interpolate as interpolate19, useCurrentFrame as useCurrentFrame27 } from "remotion";
+import { z as z41 } from "zod";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var SubtitleTextPropsSchema = z41.object({
+  text: z41.string().max(200),
+  fontSize: z41.number().min(12).max(80).default(36),
+  color: z41.string().default("#FFFFFF"),
+  backgroundColor: z41.string().default("rgba(0,0,0,0.7)"),
+  fontFamily: z41.string().default("Inter"),
+  position: z41.enum(["top", "bottom"]).default("bottom"),
+  maxWidth: z41.number().min(200).max(1200).default(800),
+  padding: z41.number().min(0).max(80).default(20),
+  highlightWords: z41.array(z41.string()).optional()
 });
 function normalizeWord(w) {
   return w.toLowerCase().replace(/[^a-z0-9]/g, "");
@@ -2244,7 +2391,7 @@ var SubtitleText = ({
   const highlights = new Set((highlightWords ?? []).map(normalizeWord));
   const tokens = text.split(/\s+/);
   const yStyle = position === "top" ? { top: 70 } : { bottom: 90 };
-  return /* @__PURE__ */ jsx36(AbsoluteFill33, { children: /* @__PURE__ */ jsx36("div", { style: { position: "absolute", left: "50%", transform: "translateX(-50%)", maxWidth, width: "100%", ...yStyle }, children: /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx40(Fill, { children: /* @__PURE__ */ jsx40("div", { style: { position: "absolute", left: "50%", transform: "translateX(-50%)", maxWidth, width: "100%", ...yStyle }, children: /* @__PURE__ */ jsx40(
     "div",
     {
       style: {
@@ -2263,7 +2410,7 @@ var SubtitleText = ({
       children: tokens.map((t, i) => {
         const n = normalizeWord(t);
         const isHighlighted = highlights.has(n);
-        return /* @__PURE__ */ jsx36("span", { style: { color: isHighlighted ? "#FFD60A" : color, marginRight: 8 }, children: t }, i);
+        return /* @__PURE__ */ jsx40("span", { style: { color: isHighlighted ? "#FFD60A" : color, marginRight: 8 }, children: t }, i);
       })
     }
   ) }) });
@@ -2276,17 +2423,19 @@ var SubtitleTextComponentMetadata = {
 };
 
 // src/components/composites/TikTokCaption.tsx
-import { AbsoluteFill as AbsoluteFill34, interpolate as interpolate20, useCurrentFrame as useCurrentFrame28 } from "remotion";
-import { z as z39 } from "zod";
-import { jsx as jsx37 } from "react/jsx-runtime";
-var TikTokCaptionPropsSchema = z39.object({
-  text: z39.string().max(150),
-  fontSize: z39.number().min(12).max(120).default(48),
-  color: z39.string().default("#FFFFFF"),
-  strokeColor: z39.string().default("#000000"),
-  strokeWidth: z39.number().min(0).max(10).default(3),
-  position: z39.enum(["center", "bottom"]).default("center"),
-  highlightStyle: z39.enum(["word", "bounce", "none"]).default("word")
+import { interpolate as interpolate20, useCurrentFrame as useCurrentFrame28 } from "remotion";
+import { z as z42 } from "zod";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var TikTokCaptionPropsSchema = z42.object({
+  text: z42.string().max(150),
+  fontSize: z42.number().min(12).max(120).default(48),
+  color: z42.string().default("#FFFFFF"),
+  strokeColor: z42.string().default("#000000"),
+  strokeWidth: z42.number().min(0).max(10).default(3),
+  position: z42.enum(["center", "bottom"]).default("center"),
+  highlightStyle: z42.enum(["word", "bounce", "none"]).default("word"),
+  maxWidthPct: z42.number().min(0.1).max(1).default(0.92),
+  safeInsetPct: z42.number().min(0).max(0.25).default(0.06)
 });
 var TikTokCaption = ({
   text,
@@ -2296,6 +2445,8 @@ var TikTokCaption = ({
   strokeWidth,
   position,
   highlightStyle,
+  maxWidthPct,
+  safeInsetPct,
   __wavesDurationInFrames
 }) => {
   const frame = useCurrentFrame28();
@@ -2303,11 +2454,12 @@ var TikTokCaption = ({
   const p = interpolate20(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const words = text.trim().split(/\s+/);
   const idx = highlightStyle === "none" ? -1 : Math.min(words.length - 1, Math.floor(p * words.length));
-  const yStyle = position === "bottom" ? { alignItems: "flex-end", paddingBottom: 140 } : { alignItems: "center" };
-  return /* @__PURE__ */ jsx37(AbsoluteFill34, { style: { display: "flex", justifyContent: "center", ...yStyle }, children: /* @__PURE__ */ jsx37("div", { style: { textAlign: "center", padding: "0 80px", fontWeight: 900, lineHeight: 1.1 }, children: words.map((w, i) => {
+  const inset = `${(safeInsetPct * 100).toFixed(2)}%`;
+  const yStyle = position === "bottom" ? { alignItems: "flex-end", paddingBottom: inset } : { alignItems: "center" };
+  return /* @__PURE__ */ jsx41(Fill, { style: { display: "flex", justifyContent: "center", ...yStyle }, children: /* @__PURE__ */ jsx41("div", { style: { textAlign: "center", paddingLeft: inset, paddingRight: inset, maxWidth: `${Math.round(maxWidthPct * 100)}%`, fontWeight: 900, lineHeight: 1.1, overflowWrap: "anywhere", wordBreak: "break-word" }, children: words.map((w, i) => {
     const isActive = i === idx && highlightStyle !== "none";
     const bounce = isActive && highlightStyle === "bounce" ? interpolate20(frame % 18, [0, 9, 18], [1, 1.08, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) : 1;
-    return /* @__PURE__ */ jsx37(
+    return /* @__PURE__ */ jsx41(
       "span",
       {
         style: {
@@ -2332,18 +2484,18 @@ var TikTokCaptionComponentMetadata = {
 };
 
 // src/components/composites/ThirdLowerBanner.tsx
-import { AbsoluteFill as AbsoluteFill35, Img as Img12, interpolate as interpolate21, staticFile as staticFile14, useCurrentFrame as useCurrentFrame29 } from "remotion";
-import { z as z40 } from "zod";
-import { jsx as jsx38, jsxs as jsxs17 } from "react/jsx-runtime";
-var ThirdLowerBannerPropsSchema = z40.object({
-  name: z40.string().max(50),
-  title: z40.string().max(100),
-  backgroundColor: z40.string().default("rgba(0,0,0,0.8)"),
-  primaryColor: z40.string().default("#FFFFFF"),
-  secondaryColor: z40.string().default("#CCCCCC"),
-  accentColor: z40.string().default("#FF0000"),
-  showAvatar: z40.boolean().default(false),
-  avatarSrc: z40.string().optional()
+import { Img as Img12, interpolate as interpolate21, staticFile as staticFile14, useCurrentFrame as useCurrentFrame29 } from "remotion";
+import { z as z43 } from "zod";
+import { jsx as jsx42, jsxs as jsxs17 } from "react/jsx-runtime";
+var ThirdLowerBannerPropsSchema = z43.object({
+  name: z43.string().max(50),
+  title: z43.string().max(100),
+  backgroundColor: z43.string().default("rgba(0,0,0,0.8)"),
+  primaryColor: z43.string().default("#FFFFFF"),
+  secondaryColor: z43.string().default("#CCCCCC"),
+  accentColor: z43.string().default("#FF0000"),
+  showAvatar: z43.boolean().default(false),
+  avatarSrc: z43.string().optional()
 });
 var resolveAsset13 = (value) => isRemoteAssetPath(value) ? value : staticFile14(staticFileInputFromAssetPath(value));
 var ThirdLowerBanner = ({
@@ -2360,7 +2512,7 @@ var ThirdLowerBanner = ({
   const slide = interpolate21(frame, [0, 18], [-600, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const opacity = interpolate21(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const avatar = showAvatar && typeof avatarSrc === "string" && avatarSrc.length > 0 ? avatarSrc : null;
-  return /* @__PURE__ */ jsx38(AbsoluteFill35, { children: /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsx42(Fill, { children: /* @__PURE__ */ jsxs17(
     "div",
     {
       style: {
@@ -2377,8 +2529,8 @@ var ThirdLowerBanner = ({
         backgroundColor
       },
       children: [
-        /* @__PURE__ */ jsx38("div", { style: { width: 10, backgroundColor: accentColor } }),
-        avatar ? /* @__PURE__ */ jsx38("div", { style: { width: 160, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx42("div", { style: { width: 10, backgroundColor: accentColor } }),
+        avatar ? /* @__PURE__ */ jsx42("div", { style: { width: 160, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx42(
           Img12,
           {
             src: resolveAsset13(avatar),
@@ -2386,8 +2538,8 @@ var ThirdLowerBanner = ({
           }
         ) }) : null,
         /* @__PURE__ */ jsxs17("div", { style: { padding: "28px 36px", display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
-          /* @__PURE__ */ jsx38("div", { style: { color: primaryColor, fontSize: 54, fontWeight: 800, lineHeight: 1 }, children: name }),
-          /* @__PURE__ */ jsx38("div", { style: { marginTop: 10, color: secondaryColor, fontSize: 28, fontWeight: 600 }, children: title })
+          /* @__PURE__ */ jsx42("div", { style: { color: primaryColor, fontSize: 54, fontWeight: 800, lineHeight: 1 }, children: name }),
+          /* @__PURE__ */ jsx42("div", { style: { marginTop: 10, color: secondaryColor, fontSize: 28, fontWeight: 600 }, children: title })
         ] })
       ]
     }
@@ -2405,22 +2557,25 @@ var ThirdLowerBannerComponentMetadata = {
 };
 
 // src/components/composites/TypewriterText.tsx
-import { AbsoluteFill as AbsoluteFill36, interpolate as interpolate22, useCurrentFrame as useCurrentFrame30 } from "remotion";
-import { z as z41 } from "zod";
-import { jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
-var TypewriterTextPropsSchema = z41.object({
-  content: z41.string().max(500),
-  fontSize: z41.number().min(8).max(200).default(48),
-  color: z41.string().default("#FFFFFF"),
-  fontFamily: z41.string().default("Inter"),
-  position: z41.enum(["top", "center", "bottom"]).default("center"),
-  speed: z41.number().min(0.5).max(5).default(2),
-  showCursor: z41.boolean().default(true),
-  cursorColor: z41.string().default("#FFFFFF")
+import { interpolate as interpolate22, useCurrentFrame as useCurrentFrame30 } from "remotion";
+import { z as z44 } from "zod";
+import { jsx as jsx43, jsxs as jsxs18 } from "react/jsx-runtime";
+var TypewriterTextPropsSchema = z44.object({
+  content: z44.string().max(500),
+  fontSize: z44.number().min(8).max(200).default(48),
+  color: z44.string().default("#FFFFFF"),
+  fontFamily: z44.string().default("Inter"),
+  position: z44.enum(["top", "center", "bottom"]).default("center"),
+  speed: z44.number().min(0.5).max(5).default(2),
+  showCursor: z44.boolean().default(true),
+  cursorColor: z44.string().default("#FFFFFF"),
+  maxWidthPct: z44.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: z44.number().min(0).max(0.25).default(0.06)
 });
-var positionStyles5 = (position) => {
-  if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 80 };
-  if (position === "bottom") return { justifyContent: "center", alignItems: "flex-end", paddingBottom: 80 };
+var positionStyles5 = (position, safeInsetPct) => {
+  const inset = `${(safeInsetPct * 100).toFixed(2)}%`;
+  if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: inset };
+  if (position === "bottom") return { justifyContent: "center", alignItems: "flex-end", paddingBottom: inset };
   return { justifyContent: "center", alignItems: "center" };
 };
 var TypewriterText = ({
@@ -2431,7 +2586,9 @@ var TypewriterText = ({
   position,
   speed,
   showCursor,
-  cursorColor
+  cursorColor,
+  maxWidthPct,
+  safeInsetPct
 }) => {
   const frame = useCurrentFrame30();
   const charCount = Math.min(content.length, Math.max(0, Math.floor(frame * speed)));
@@ -2439,9 +2596,9 @@ var TypewriterText = ({
   const cursorVisible = showCursor && charCount < content.length ? frame % 30 < 15 : false;
   const cursorOpacity = cursorVisible ? 1 : 0;
   const cursorFade = interpolate22(frame % 30, [0, 5], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  return /* @__PURE__ */ jsx39(AbsoluteFill36, { style: { display: "flex", ...positionStyles5(position) }, children: /* @__PURE__ */ jsxs18("div", { style: { fontSize, color, fontFamily, fontWeight: 600, textAlign: "center", whiteSpace: "pre-wrap" }, children: [
+  return /* @__PURE__ */ jsx43(Fill, { style: { display: "flex", ...positionStyles5(position, safeInsetPct) }, children: /* @__PURE__ */ jsxs18("div", { style: { fontSize, color, fontFamily, fontWeight: 600, textAlign: "center", whiteSpace: "pre-wrap", maxWidth: `${Math.round(maxWidthPct * 100)}%`, overflowWrap: "anywhere", wordBreak: "break-word" }, children: [
     shown,
-    showCursor ? /* @__PURE__ */ jsx39("span", { style: { color: cursorColor, opacity: cursorOpacity * cursorFade }, children: "|" }) : null
+    showCursor ? /* @__PURE__ */ jsx43("span", { style: { color: cursorColor, opacity: cursorOpacity * cursorFade }, children: "|" }) : null
   ] }) });
 };
 var TypewriterTextComponentMetadata = {
@@ -2456,21 +2613,21 @@ var TypewriterTextComponentMetadata = {
 };
 
 // src/components/composites/TwitterCard.tsx
-import { AbsoluteFill as AbsoluteFill37, Img as Img13, staticFile as staticFile15 } from "remotion";
-import { z as z42 } from "zod";
-import { jsx as jsx40, jsxs as jsxs19 } from "react/jsx-runtime";
-var TwitterCardPropsSchema = z42.object({
-  author: z42.string().min(1),
-  handle: z42.string().min(1),
-  avatarSrc: z42.string().optional(),
-  tweet: z42.string().max(280),
-  image: z42.string().optional(),
-  timestamp: z42.string().optional(),
-  verified: z42.boolean().default(false)
+import { Img as Img13, staticFile as staticFile15 } from "remotion";
+import { z as z45 } from "zod";
+import { jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
+var TwitterCardPropsSchema = z45.object({
+  author: z45.string().min(1),
+  handle: z45.string().min(1),
+  avatarSrc: z45.string().optional(),
+  tweet: z45.string().max(280),
+  image: z45.string().optional(),
+  timestamp: z45.string().optional(),
+  verified: z45.boolean().default(false)
 });
 var resolveAsset14 = (value) => isRemoteAssetPath(value) ? value : staticFile15(staticFileInputFromAssetPath(value));
 var TwitterCard = ({ author, handle, avatarSrc, tweet, image, timestamp, verified }) => {
-  return /* @__PURE__ */ jsx40(AbsoluteFill37, { style: { backgroundColor: "#0B0F14", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx44(Fill, { style: { backgroundColor: "#0B0F14", display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsxs19(
     "div",
     {
       style: {
@@ -2483,18 +2640,18 @@ var TwitterCard = ({ author, handle, avatarSrc, tweet, image, timestamp, verifie
       },
       children: [
         /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: 18, alignItems: "center" }, children: [
-          avatarSrc ? /* @__PURE__ */ jsx40(Img13, { src: resolveAsset14(avatarSrc), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ jsx40("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "#E5E7EB" } }),
+          avatarSrc ? /* @__PURE__ */ jsx44(Img13, { src: resolveAsset14(avatarSrc), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ jsx44("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "#E5E7EB" } }),
           /* @__PURE__ */ jsxs19("div", { style: { display: "flex", flexDirection: "column" }, children: [
             /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
-              /* @__PURE__ */ jsx40("div", { style: { fontSize: 34, fontWeight: 900, color: "#111827" }, children: author }),
-              verified ? /* @__PURE__ */ jsx40("div", { style: { fontSize: 26, color: "#1D9BF0", fontWeight: 900 }, children: "\u2713" }) : null
+              /* @__PURE__ */ jsx44("div", { style: { fontSize: 34, fontWeight: 900, color: "#111827" }, children: author }),
+              verified ? /* @__PURE__ */ jsx44("div", { style: { fontSize: 26, color: "#1D9BF0", fontWeight: 900 }, children: "\u2713" }) : null
             ] }),
-            /* @__PURE__ */ jsx40("div", { style: { fontSize: 26, color: "#6B7280", fontWeight: 800 }, children: handle })
+            /* @__PURE__ */ jsx44("div", { style: { fontSize: 26, color: "#6B7280", fontWeight: 800 }, children: handle })
           ] })
         ] }),
-        /* @__PURE__ */ jsx40("div", { style: { marginTop: 28, fontSize: 36, lineHeight: 1.25, color: "#111827", fontWeight: 700 }, children: tweet }),
-        image ? /* @__PURE__ */ jsx40("div", { style: { marginTop: 28, width: "100%", height: 520, overflow: "hidden", borderRadius: 22, backgroundColor: "#F3F4F6" }, children: /* @__PURE__ */ jsx40(Img13, { src: resolveAsset14(image), style: { width: "100%", height: "100%", objectFit: "cover" } }) }) : null,
-        timestamp ? /* @__PURE__ */ jsx40("div", { style: { marginTop: 22, fontSize: 22, color: "#6B7280", fontWeight: 700 }, children: timestamp }) : null
+        /* @__PURE__ */ jsx44("div", { style: { marginTop: 28, fontSize: 36, lineHeight: 1.25, color: "#111827", fontWeight: 700 }, children: tweet }),
+        image ? /* @__PURE__ */ jsx44("div", { style: { marginTop: 28, width: "100%", height: 520, overflow: "hidden", borderRadius: 22, backgroundColor: "#F3F4F6" }, children: /* @__PURE__ */ jsx44(Img13, { src: resolveAsset14(image), style: { width: "100%", height: "100%", objectFit: "cover" } }) }) : null,
+        timestamp ? /* @__PURE__ */ jsx44("div", { style: { marginTop: 22, fontSize: 22, color: "#6B7280", fontWeight: 700 }, children: timestamp }) : null
       ]
     }
   ) });
@@ -2507,17 +2664,17 @@ var TwitterCardComponentMetadata = {
 };
 
 // src/components/composites/Watermark.tsx
-import { AbsoluteFill as AbsoluteFill38, Img as Img14, staticFile as staticFile16 } from "remotion";
-import { z as z43 } from "zod";
-import { jsx as jsx41 } from "react/jsx-runtime";
-var WatermarkPropsSchema = z43.object({
-  type: z43.enum(["logo", "text"]).default("logo"),
-  src: z43.string().optional(),
-  text: z43.string().optional(),
-  position: z43.enum(["topLeft", "topRight", "bottomLeft", "bottomRight"]).default("bottomRight"),
-  opacity: z43.number().min(0.1).max(1).default(0.5),
-  size: z43.number().min(30).max(150).default(60),
-  color: z43.string().default("#FFFFFF")
+import { Img as Img14, staticFile as staticFile16 } from "remotion";
+import { z as z46 } from "zod";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var WatermarkPropsSchema = z46.object({
+  type: z46.enum(["logo", "text"]).default("logo"),
+  src: z46.string().optional(),
+  text: z46.string().optional(),
+  position: z46.enum(["topLeft", "topRight", "bottomLeft", "bottomRight"]).default("bottomRight"),
+  opacity: z46.number().min(0.1).max(1).default(0.5),
+  size: z46.number().min(30).max(150).default(60),
+  color: z46.string().default("#FFFFFF")
 });
 var resolveAsset15 = (value) => isRemoteAssetPath(value) ? value : staticFile16(staticFileInputFromAssetPath(value));
 function posStyle(position) {
@@ -2534,7 +2691,7 @@ var Watermark = ({ type, src, text, position, opacity, size, color }) => {
     opacity,
     pointerEvents: "none"
   };
-  return /* @__PURE__ */ jsx41(AbsoluteFill38, { children: type === "text" ? /* @__PURE__ */ jsx41("div", { style: { ...style, fontSize: Math.round(size * 0.6), color, fontWeight: 700 }, children: text ?? "" }) : src ? /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx45(Fill, { children: type === "text" ? /* @__PURE__ */ jsx45("div", { style: { ...style, fontSize: Math.round(size * 0.6), color, fontWeight: 700 }, children: text ?? "" }) : src ? /* @__PURE__ */ jsx45(
     Img14,
     {
       src: resolveAsset15(src),
@@ -2549,19 +2706,20 @@ var WatermarkComponentMetadata = {
   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 }
+    { type: "logo", src: "/assets/logo.svg", position: "topLeft", opacity: 0.5, size: 70 }
   ]
 };
 
 // src/components/composites/WipeTransition.tsx
-import { AbsoluteFill as AbsoluteFill39, interpolate as interpolate23, useCurrentFrame as useCurrentFrame31 } from "remotion";
-import { z as z44 } from "zod";
-import { jsx as jsx42 } from "react/jsx-runtime";
-var WipeTransitionPropsSchema = z44.object({
-  durationInFrames: z44.number().int().min(10).max(60).default(30),
-  direction: z44.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
-  softEdge: z44.boolean().default(false),
-  phase: z44.enum(["in", "out", "inOut"]).default("inOut")
+import React9 from "react";
+import { interpolate as interpolate23, useCurrentFrame as useCurrentFrame31 } from "remotion";
+import { z as z47 } from "zod";
+import { jsx as jsx46 } from "react/jsx-runtime";
+var WipeTransitionPropsSchema = z47.object({
+  durationInFrames: z47.number().int().min(10).max(60).default(30),
+  direction: z47.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
+  softEdge: z47.boolean().default(false),
+  phase: z47.enum(["in", "out", "inOut"]).default("inOut")
 });
 function clipFor2(direction, p) {
   if (direction === "left") return `inset(0 ${100 * (1 - p)}% 0 0)`;
@@ -2578,6 +2736,7 @@ var WipeTransition = ({
   children,
   __wavesDurationInFrames
 }) => {
+  const layers = React9.Children.toArray(children);
   const frame = useCurrentFrame31();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
@@ -2591,7 +2750,7 @@ var WipeTransition = ({
     const t = interpolate23(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     clipPath = clipFor2(direction, t);
   }
-  return /* @__PURE__ */ jsx42(AbsoluteFill39, { style: { clipPath, filter: softEdge ? "blur(0.4px)" : void 0 }, children });
+  return /* @__PURE__ */ jsx46(Fill, { style: { clipPath, filter: softEdge ? "blur(0.4px)" : void 0 }, children: layers.map((child, i) => /* @__PURE__ */ jsx46("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var WipeTransitionComponentMetadata = {
   kind: "composite",
@@ -2603,16 +2762,16 @@ var WipeTransitionComponentMetadata = {
 };
 
 // src/components/composites/YouTubeThumbnail.tsx
-import { AbsoluteFill as AbsoluteFill40, Img as Img15, staticFile as staticFile17 } from "remotion";
-import { z as z45 } from "zod";
-import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
-var YouTubeThumbnailPropsSchema = z45.object({
-  backgroundImage: z45.string().min(1),
-  title: z45.string().max(60),
-  subtitle: z45.string().max(40).optional(),
-  thumbnailFace: z45.string().optional(),
-  accentColor: z45.string().default("#FF0000"),
-  style: z45.enum(["bold", "minimal", "dramatic"]).default("bold")
+import { Img as Img15, staticFile as staticFile17 } from "remotion";
+import { z as z48 } from "zod";
+import { jsx as jsx47, jsxs as jsxs20 } from "react/jsx-runtime";
+var YouTubeThumbnailPropsSchema = z48.object({
+  backgroundImage: z48.string().min(1),
+  title: z48.string().max(60),
+  subtitle: z48.string().max(40).optional(),
+  thumbnailFace: z48.string().optional(),
+  accentColor: z48.string().default("#FF0000"),
+  style: z48.enum(["bold", "minimal", "dramatic"]).default("bold")
 });
 var resolveAsset16 = (value) => isRemoteAssetPath(value) ? value : staticFile17(staticFileInputFromAssetPath(value));
 var YouTubeThumbnail = ({
@@ -2623,10 +2782,10 @@ var YouTubeThumbnail = ({
   accentColor,
   style
 }) => {
-  return /* @__PURE__ */ jsxs20(AbsoluteFill40, { children: [
-    /* @__PURE__ */ jsx43(Img15, { src: resolveAsset16(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover" } }),
-    style === "dramatic" ? /* @__PURE__ */ jsx43(AbsoluteFill40, { style: { backgroundColor: "rgba(0,0,0,0.35)" } }) : null,
-    thumbnailFace ? /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsxs20(Fill, { children: [
+    /* @__PURE__ */ jsx47(Img15, { src: resolveAsset16(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+    style === "dramatic" ? /* @__PURE__ */ jsx47("div", { style: { position: "absolute", inset: 0, backgroundColor: "rgba(0,0,0,0.35)" } }) : null,
+    thumbnailFace ? /* @__PURE__ */ jsx47(
       Img15,
       {
         src: resolveAsset16(thumbnailFace),
@@ -2634,7 +2793,7 @@ var YouTubeThumbnail = ({
       }
     ) : null,
     /* @__PURE__ */ jsxs20("div", { style: { position: "absolute", left: 70, top: 90, width: 1100 }, children: [
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx47(
         "div",
         {
           style: {
@@ -2649,9 +2808,9 @@ var YouTubeThumbnail = ({
           children: title
         }
       ),
-      subtitle ? /* @__PURE__ */ jsx43("div", { style: { marginTop: 26, fontSize: 52, fontWeight: 900, color: accentColor, textShadow: "0 10px 30px rgba(0,0,0,0.6)" }, children: subtitle }) : null
+      subtitle ? /* @__PURE__ */ jsx47("div", { style: { marginTop: 26, fontSize: 52, fontWeight: 900, color: accentColor, textShadow: "0 10px 30px rgba(0,0,0,0.6)" }, children: subtitle }) : null
     ] }),
-    style !== "minimal" ? /* @__PURE__ */ jsx43("div", { style: { position: "absolute", left: 70, bottom: 80, width: 260, height: 18, backgroundColor: accentColor, borderRadius: 9999 } }) : null
+    style !== "minimal" ? /* @__PURE__ */ jsx47("div", { style: { position: "absolute", left: 70, bottom: 80, width: 260, height: 18, backgroundColor: accentColor, borderRadius: 9999 } }) : null
   ] });
 };
 var YouTubeThumbnailComponentMetadata = {
@@ -2662,36 +2821,38 @@ var YouTubeThumbnailComponentMetadata = {
 };
 
 // src/components/composites/VideoWithOverlay.tsx
-import { AbsoluteFill as AbsoluteFill41, Img as Img16, Video as RemotionVideo2, interpolate as interpolate24, staticFile as staticFile18, useCurrentFrame as useCurrentFrame32 } from "remotion";
-import { z as z46 } from "zod";
-import { jsx as jsx44, jsxs as jsxs21 } from "react/jsx-runtime";
-var OverlaySchema = z46.object({
-  type: z46.enum(["text", "logo", "gradient"]),
-  content: z46.string().optional(),
-  opacity: z46.number().min(0).max(1).default(0.3),
-  position: z46.enum(["top", "bottom", "center", "full"]).default("bottom")
+import { Img as Img16, Video as RemotionVideo2, interpolate as interpolate24, staticFile as staticFile18, useCurrentFrame as useCurrentFrame32 } from "remotion";
+import { z as z49 } from "zod";
+import { jsx as jsx48, jsxs as jsxs21 } from "react/jsx-runtime";
+var OverlaySchema = z49.object({
+  type: z49.enum(["text", "logo", "gradient"]),
+  content: z49.string().optional(),
+  opacity: z49.number().min(0).max(1).default(0.3),
+  position: z49.enum(["top", "bottom", "center", "full"]).default("bottom")
 });
-var VideoWithOverlayPropsSchema = z46.object({
-  src: z46.string().min(1),
+var VideoWithOverlayPropsSchema = z49.object({
+  src: z49.string().min(1),
   overlay: OverlaySchema.optional(),
-  volume: z46.number().min(0).max(1).default(1),
-  playbackRate: z46.number().min(0.5).max(2).default(1)
+  volume: z49.number().min(0).max(1).default(1),
+  playbackRate: z49.number().min(0.5).max(2).default(1)
 });
 var resolveAsset17 = (value) => isRemoteAssetPath(value) ? value : staticFile18(staticFileInputFromAssetPath(value));
 var VideoWithOverlay = ({ src, overlay, volume, playbackRate }) => {
   const frame = useCurrentFrame32();
   const fade = interpolate24(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const overlayNode = overlay ? overlay.type === "gradient" ? /* @__PURE__ */ jsx44(
-    AbsoluteFill41,
+  const overlayFill = { position: "absolute", inset: 0 };
+  const overlayNode = overlay ? overlay.type === "gradient" ? /* @__PURE__ */ jsx48(
+    "div",
     {
       style: {
+        ...overlayFill,
         opacity: overlay.opacity,
         background: overlay.position === "top" ? "linear-gradient(rgba(0,0,0,0.85), transparent)" : overlay.position === "bottom" ? "linear-gradient(transparent, rgba(0,0,0,0.85))" : "linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6))"
       }
     }
-  ) : overlay.type === "logo" && overlay.content ? /* @__PURE__ */ jsx44(AbsoluteFill41, { style: { justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ jsx44(Img16, { src: resolveAsset17(overlay.content), style: { width: 220, height: 220, objectFit: "contain" } }) }) : overlay.type === "text" && overlay.content ? /* @__PURE__ */ jsx44(AbsoluteFill41, { style: { justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ jsx44("div", { style: { color: "#FFFFFF", fontSize: 56, fontWeight: 900, textAlign: "center", padding: "0 80px" }, children: overlay.content }) }) : null : null;
-  return /* @__PURE__ */ jsxs21(AbsoluteFill41, { children: [
-    /* @__PURE__ */ jsx44(
+  ) : overlay.type === "logo" && overlay.content ? /* @__PURE__ */ jsx48("div", { style: { ...overlayFill, display: "flex", justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ jsx48(Img16, { src: resolveAsset17(overlay.content), style: { width: 220, height: 220, objectFit: "contain" } }) }) : overlay.type === "text" && overlay.content ? /* @__PURE__ */ jsx48("div", { style: { ...overlayFill, display: "flex", justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ jsx48("div", { style: { color: "#FFFFFF", fontSize: 56, fontWeight: 900, textAlign: "center", padding: "0 80px" }, children: overlay.content }) }) : null : null;
+  return /* @__PURE__ */ jsxs21(Fill, { children: [
+    /* @__PURE__ */ jsx48(
       RemotionVideo2,
       {
         src: resolveAsset17(src),
@@ -2711,13 +2872,14 @@ var VideoWithOverlayComponentMetadata = {
 };
 
 // src/components/composites/ZoomTransition.tsx
-import { AbsoluteFill as AbsoluteFill42, interpolate as interpolate25, useCurrentFrame as useCurrentFrame33 } from "remotion";
-import { z as z47 } from "zod";
-import { jsx as jsx45 } from "react/jsx-runtime";
-var ZoomTransitionPropsSchema = z47.object({
-  durationInFrames: z47.number().int().min(10).max(60).default(30),
-  type: z47.enum(["zoomIn", "zoomOut"]).default("zoomIn"),
-  phase: z47.enum(["in", "out", "inOut"]).default("inOut")
+import React10 from "react";
+import { interpolate as interpolate25, useCurrentFrame as useCurrentFrame33 } from "remotion";
+import { z as z50 } from "zod";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var ZoomTransitionPropsSchema = z50.object({
+  durationInFrames: z50.number().int().min(10).max(60).default(30),
+  type: z50.enum(["zoomIn", "zoomOut"]).default("zoomIn"),
+  phase: z50.enum(["in", "out", "inOut"]).default("inOut")
 });
 var ZoomTransition = ({
   durationInFrames,
@@ -2726,6 +2888,7 @@ var ZoomTransition = ({
   children,
   __wavesDurationInFrames
 }) => {
+  const layers = React10.Children.toArray(children);
   const frame = useCurrentFrame33();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
@@ -2744,7 +2907,7 @@ var ZoomTransition = ({
     scale *= 1 + (exitTo - 1) * t;
     opacity *= 1 - t;
   }
-  return /* @__PURE__ */ jsx45(AbsoluteFill42, { style: { opacity, transform: `scale(${scale})` }, children });
+  return /* @__PURE__ */ jsx49(Fill, { style: { opacity, transform: `scale(${scale})` }, children: layers.map((child, i) => /* @__PURE__ */ jsx49("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var ZoomTransitionComponentMetadata = {
   kind: "composite",
@@ -2773,6 +2936,14 @@ function registerBuiltInComponents() {
       metadata: BoxComponentMetadata
     });
   }
+  if (!globalRegistry.has("Frame")) {
+    globalRegistry.register({
+      type: "Frame",
+      component: Frame,
+      propsSchema: FramePropsSchema,
+      metadata: FrameComponentMetadata
+    });
+  }
   if (!globalRegistry.has("Stack")) {
     globalRegistry.register({
       type: "Stack",
@@ -2789,6 +2960,22 @@ function registerBuiltInComponents() {
       metadata: GridComponentMetadata
     });
   }
+  if (!globalRegistry.has("Layers")) {
+    globalRegistry.register({
+      type: "Layers",
+      component: Layers,
+      propsSchema: LayersPropsSchema,
+      metadata: LayersComponentMetadata
+    });
+  }
+  if (!globalRegistry.has("Layer")) {
+    globalRegistry.register({
+      type: "Layer",
+      component: Layer,
+      propsSchema: LayerPropsSchema,
+      metadata: LayerComponentMetadata
+    });
+  }
   if (!globalRegistry.has("Image")) {
     globalRegistry.register({
       type: "Image",
@@ -3151,6 +3338,7 @@ export {
   VideoIRSchema,
   ComponentRegistry,
   globalRegistry,
+  Fill,
   registerBuiltInComponents,
   WavesError,
   WavesValidationError,