npm - @depths/waves - Versions diffs - 0.2.0 → 0.3.0 - Mend

@depths/waves 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md +118 -19
package/dist/{chunk-7QPNRHMW.mjs → chunk-QP54QRAP.mjs} +73 -5
package/dist/{chunk-PKLHVWMD.mjs → chunk-YYS6AVTN.mjs} +792 -604
package/dist/cli.js +1098 -756
package/dist/cli.mjs +90 -3
package/dist/index.d.mts +13 -0
package/dist/index.d.ts +13 -0
package/dist/index.js +1010 -755
package/dist/index.mjs +2 -2
package/dist/remotion/index.d.mts +5 -0
package/dist/remotion/index.d.ts +5 -0
package/dist/remotion/index.js +1032 -807
package/dist/remotion/index.mjs +49 -8
package/package.json +1 -1

package/dist/remotion/index.js CHANGED Viewed

@@ -57,15 +57,70 @@ var WavesRenderError = class _WavesRenderError extends WavesError {
   }
 };
-// src/remotion/WavesComposition.tsx
+// src/remotion/Fill.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var WavesComposition = ({ ir, registry }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: ir.timeline.map((node) => renderComponent(node, registry)) });
+var Fill = ({ style, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        boxSizing: "border-box",
+        ...style ?? {}
+      },
+      children
+    }
+  );
+};
+// src/remotion/WavesComposition.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var WavesComposition = ({ ir, registry, debug }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: ir.timeline.map((node) => renderComponent(node, registry, debug, "absolute-fill")) });
 };
 var getProps = (component) => {
   return component.props ?? {};
 };
-function renderComponent(component, registry) {
+function debugColor(key) {
+  let hash = 0;
+  for (let i = 0; i < key.length; i++) hash = hash * 31 + key.charCodeAt(i) | 0;
+  const hue = Math.abs(hash) % 360;
+  return `hsl(${hue} 90% 55%)`;
+}
+function DebugWrap(props) {
+  const { enabled, showLabel, id, type, children } = props;
+  if (!enabled) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+  const color = debugColor(`${type}:${id}`);
+  const label = `${type} (${id})`;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Fill, { style: { outline: `2px solid ${color}`, outlineOffset: -2 }, children: [
+    children,
+    showLabel ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          padding: "2px 6px",
+          fontSize: 12,
+          fontWeight: 800,
+          color: "#000",
+          backgroundColor: color,
+          borderBottomRightRadius: 6,
+          pointerEvents: "none",
+          maxWidth: "100%",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        children: label
+      }
+    ) : null
+  ] });
+}
+function renderComponent(component, registry, debug, sequenceLayout) {
   const registration = registry.get(component.type);
   if (!registration) {
     throw new WavesRenderError("Unknown component type", { type: component.type });
@@ -81,20 +136,23 @@ function renderComponent(component, registry) {
   if (!parsedProps || typeof parsedProps !== "object") {
     throw new WavesRenderError("Component props must be an object", { type: component.type });
   }
-  const children = component.children?.length ? component.children.map((c) => renderComponent(c, registry)) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const children = component.children?.length ? component.children.map((c) => renderComponent(c, registry, debug, "none")) : null;
+  const debugEnabled = Boolean(debug?.bounds);
+  const showLabel = Boolean(debug?.labels);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_remotion.Sequence,
     {
       from: component.timing.from,
       durationInFrames: component.timing.durationInFrames,
-      children: import_react.default.createElement(
+      layout: sequenceLayout,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DebugWrap, { enabled: debugEnabled, showLabel, id: component.id, type: component.type, children: import_react.default.createElement(
         registration.component,
         {
           ...parsedProps,
           __wavesDurationInFrames: component.timing.durationInFrames
         },
         children
-      )
+      ) })
     },
     component.id
   );
@@ -175,7 +233,7 @@ function staticFileInputFromAssetPath(assetPath) {
 }
 // src/components/primitives/Audio.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var AudioPropsSchema = import_zod2.z.object({
   src: import_zod2.z.string(),
   volume: import_zod2.z.number().min(0).max(1).default(1),
@@ -203,7 +261,7 @@ var Audio = ({
     extrapolateRight: "clamp"
   }) : 1;
   const resolvedSrc = isRemoteAssetPath(src) ? src : (0, import_remotion2.staticFile)(staticFileInputFromAssetPath(src));
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_remotion2.Audio,
     {
       src: resolvedSrc,
@@ -220,19 +278,57 @@ var AudioComponentMetadata = {
 };
 // src/components/primitives/Box.tsx
+var import_react2 = __toESM(require("react"));
 var import_zod3 = require("zod");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var BoxPropsSchema = import_zod3.z.object({
-  x: import_zod3.z.number().default(0).describe("Left offset in pixels"),
-  y: import_zod3.z.number().default(0).describe("Top offset in pixels"),
-  width: import_zod3.z.number().positive().optional().describe("Width in pixels (omit for auto)"),
-  height: import_zod3.z.number().positive().optional().describe("Height in pixels (omit for auto)"),
+  width: import_zod3.z.number().positive().optional().describe("Width in pixels (optional)"),
+  height: import_zod3.z.number().positive().optional().describe("Height in pixels (optional)"),
   padding: import_zod3.z.number().min(0).default(0).describe("Padding in pixels"),
-  backgroundColor: import_zod3.z.string().optional().describe("CSS color (e.g. #RRGGBB)"),
+  backgroundColor: import_zod3.z.string().optional().describe("CSS color (e.g. #RRGGBB, rgba())"),
   borderRadius: import_zod3.z.number().min(0).default(0).describe("Border radius in pixels"),
   opacity: import_zod3.z.number().min(0).max(1).default(1).describe("Opacity 0..1")
 });
-var Box = ({
+var Box = ({ width, height, padding, backgroundColor, borderRadius, opacity, children }) => {
+  const layers = import_react2.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Fill,
+    {
+      style: {
+        width,
+        height,
+        padding,
+        backgroundColor,
+        borderRadius,
+        opacity
+      },
+      children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i))
+    }
+  );
+};
+var BoxComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  description: "Flow container for layout and backgrounds (layout-safe)",
+  llmGuidance: "Use Box as a container inside Grid/Stack. Box participates in layout flow. For x/y positioning, use Frame."
+};
+// src/components/primitives/Frame.tsx
+var import_react3 = __toESM(require("react"));
+var import_zod4 = require("zod");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var FramePropsSchema = import_zod4.z.object({
+  x: import_zod4.z.number().default(0).describe("Left offset in pixels"),
+  y: import_zod4.z.number().default(0).describe("Top offset in pixels"),
+  width: import_zod4.z.number().positive().optional().describe("Width in pixels (optional)"),
+  height: import_zod4.z.number().positive().optional().describe("Height in pixels (optional)"),
+  padding: import_zod4.z.number().min(0).default(0).describe("Padding in pixels"),
+  backgroundColor: import_zod4.z.string().optional().describe("CSS color (e.g. #RRGGBB, rgba())"),
+  borderRadius: import_zod4.z.number().min(0).default(0).describe("Border radius in pixels"),
+  opacity: import_zod4.z.number().min(0).max(1).default(1).describe("Opacity 0..1")
+});
+var Frame = ({
   x,
   y,
   width,
@@ -243,7 +339,8 @@ var Box = ({
   opacity,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const layers = import_react3.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       style: {
@@ -258,29 +355,28 @@ var Box = ({
         opacity,
         boxSizing: "border-box"
       },
-      children
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Fill, { children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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
-var import_remotion3 = require("remotion");
-var import_zod4 = require("zod");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var GridPropsSchema = import_zod4.z.object({
-  columns: import_zod4.z.number().int().min(1).max(12).default(2),
-  rows: import_zod4.z.number().int().min(1).max(12).default(1),
-  gap: import_zod4.z.number().min(0).default(24),
-  padding: import_zod4.z.number().min(0).default(0),
-  align: import_zod4.z.enum(["start", "center", "end", "stretch"]).default("stretch"),
-  justify: import_zod4.z.enum(["start", "center", "end", "stretch"]).default("stretch")
+var import_zod5 = require("zod");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var GridPropsSchema = import_zod5.z.object({
+  columns: import_zod5.z.number().int().min(1).max(12).default(2),
+  rows: import_zod5.z.number().int().min(1).max(12).default(1),
+  gap: import_zod5.z.number().min(0).default(24),
+  padding: import_zod5.z.number().min(0).default(0),
+  align: import_zod5.z.enum(["start", "center", "end", "stretch"]).default("stretch"),
+  justify: import_zod5.z.enum(["start", "center", "end", "stretch"]).default("stretch")
 });
 var mapAlign = (a) => {
   if (a === "start") return "start";
@@ -295,8 +391,8 @@ var mapJustify = (j) => {
   return "stretch";
 };
 var Grid = ({ columns, rows, gap, padding, align, justify, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_remotion3.AbsoluteFill,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Fill,
     {
       style: {
         display: "grid",
@@ -321,19 +417,19 @@ var GridComponentMetadata = {
 };
 // src/components/primitives/Image.tsx
-var import_remotion4 = require("remotion");
-var import_zod5 = require("zod");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ImagePropsSchema = import_zod5.z.object({
-  src: import_zod5.z.string().min(1),
-  fit: import_zod5.z.enum(["cover", "contain"]).default("cover"),
-  borderRadius: import_zod5.z.number().min(0).default(0),
-  opacity: import_zod5.z.number().min(0).max(1).default(1)
+var import_remotion3 = require("remotion");
+var import_zod6 = require("zod");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ImagePropsSchema = import_zod6.z.object({
+  src: import_zod6.z.string().min(1),
+  fit: import_zod6.z.enum(["cover", "contain"]).default("cover"),
+  borderRadius: import_zod6.z.number().min(0).default(0),
+  opacity: import_zod6.z.number().min(0).max(1).default(1)
 });
-var resolveAsset = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion4.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion3.staticFile)(staticFileInputFromAssetPath(value));
 var Image = ({ src, fit, borderRadius, opacity }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_remotion4.AbsoluteFill, { style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_remotion4.Img,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Fill, { style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_remotion3.Img,
     {
       src: resolveAsset(src),
       style: { width: "100%", height: "100%", objectFit: fit, borderRadius }
@@ -347,115 +443,174 @@ var ImageComponentMetadata = {
   llmGuidance: 'Use Image for pictures and backgrounds. Use fit="cover" for full-bleed, fit="contain" to avoid cropping.'
 };
-// src/components/primitives/Scene.tsx
-var import_remotion5 = require("remotion");
+// src/components/primitives/Layer.tsx
+var import_react4 = __toESM(require("react"));
 var import_zod7 = require("zod");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var LayerPropsSchema = import_zod7.z.object({
+  zIndex: import_zod7.z.number().int().default(0).describe("Higher zIndex renders on top"),
+  inset: import_zod7.z.number().min(0).default(0).describe("Inset from all sides in pixels"),
+  opacity: import_zod7.z.number().min(0).max(1).default(1),
+  pointerEvents: import_zod7.z.enum(["none", "auto"]).default("none")
+});
+var Layer = ({ zIndex, inset, opacity, pointerEvents, children }) => {
+  const layers = import_react4.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: inset,
+        right: inset,
+        top: inset,
+        bottom: inset,
+        zIndex,
+        opacity,
+        pointerEvents,
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Fill, { children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) })
+    }
+  );
+};
+var LayerComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "One overlay layer with explicit zIndex inside Layers",
+  llmGuidance: "Use Layer inside Layers to control stacking. Put exactly one child in a Layer (recommended)."
+};
+// src/components/primitives/Layers.tsx
+var import_zod8 = require("zod");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var LayersPropsSchema = import_zod8.z.object({
+  overflow: import_zod8.z.enum(["visible", "hidden"]).default("visible").describe("Clip layers to bounds")
+});
+var Layers = ({ overflow, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Fill, { style: { overflow }, children });
+};
+var LayersComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Overlay container for stacking children (use Layer for zIndex)",
+  llmGuidance: "Use Layers to stack background/content/overlays. Prefer Layer children with explicit zIndex."
+};
+// src/components/primitives/Scene.tsx
+var import_react5 = __toESM(require("react"));
+var import_remotion4 = require("remotion");
+var import_zod10 = require("zod");
 // src/ir/schema.ts
-var import_zod6 = require("zod");
-var TimingSpecSchema = import_zod6.z.object({
-  from: import_zod6.z.number().int().min(0).describe("Start frame (0-indexed)"),
-  durationInFrames: import_zod6.z.number().int().positive().describe("Duration in frames")
+var import_zod9 = require("zod");
+var TimingSpecSchema = import_zod9.z.object({
+  from: import_zod9.z.number().int().min(0).describe("Start frame (0-indexed)"),
+  durationInFrames: import_zod9.z.number().int().positive().describe("Duration in frames")
 });
-var AssetPathSchema = import_zod6.z.string().refine(
+var AssetPathSchema = import_zod9.z.string().refine(
   (path) => path.startsWith("/") || path.startsWith("http://") || path.startsWith("https://"),
   "Asset path must be absolute (starting with /) or a full URL"
 ).describe("Path to asset file, either absolute path or URL");
-var BackgroundSpecSchema = import_zod6.z.discriminatedUnion("type", [
-  import_zod6.z.object({
-    type: import_zod6.z.literal("color"),
-    value: import_zod6.z.string().regex(/^#[0-9A-Fa-f]{6}$/, "Must be valid hex color")
+var BackgroundSpecSchema = import_zod9.z.discriminatedUnion("type", [
+  import_zod9.z.object({
+    type: import_zod9.z.literal("color"),
+    value: import_zod9.z.string().regex(/^#[0-9A-Fa-f]{6}$/, "Must be valid hex color")
   }),
-  import_zod6.z.object({
-    type: import_zod6.z.literal("image"),
+  import_zod9.z.object({
+    type: import_zod9.z.literal("image"),
     value: AssetPathSchema
   }),
-  import_zod6.z.object({
-    type: import_zod6.z.literal("video"),
+  import_zod9.z.object({
+    type: import_zod9.z.literal("video"),
     value: AssetPathSchema
   })
 ]);
-var VideoConfigSchema = import_zod6.z.object({
-  id: import_zod6.z.string().default("main"),
-  width: import_zod6.z.number().int().min(360).max(7680),
-  height: import_zod6.z.number().int().min(360).max(4320),
-  fps: import_zod6.z.number().int().min(1).max(120).default(30),
-  durationInFrames: import_zod6.z.number().int().positive()
+var VideoConfigSchema = import_zod9.z.object({
+  id: import_zod9.z.string().default("main"),
+  width: import_zod9.z.number().int().min(360).max(7680),
+  height: import_zod9.z.number().int().min(360).max(4320),
+  fps: import_zod9.z.number().int().min(1).max(120).default(30),
+  durationInFrames: import_zod9.z.number().int().positive()
 });
-var AudioSpecSchema = import_zod6.z.object({
+var AudioSpecSchema = import_zod9.z.object({
   background: AssetPathSchema.optional(),
-  volume: import_zod6.z.number().min(0).max(1).default(0.5)
+  volume: import_zod9.z.number().min(0).max(1).default(0.5)
 }).optional();
-var TransitionSpecSchema = import_zod6.z.object({
-  type: import_zod6.z.string().min(1),
-  durationInFrames: import_zod6.z.number().int().positive(),
-  props: import_zod6.z.record(import_zod6.z.string(), import_zod6.z.unknown()).optional()
+var TransitionSpecSchema = import_zod9.z.object({
+  type: import_zod9.z.string().min(1),
+  durationInFrames: import_zod9.z.number().int().positive(),
+  props: import_zod9.z.record(import_zod9.z.string(), import_zod9.z.unknown()).optional()
 });
-var ComponentNodeSchema = import_zod6.z.lazy(
-  () => import_zod6.z.object({
-    id: import_zod6.z.string().min(1).max(100).describe("Unique component instance ID"),
-    type: import_zod6.z.string().min(1).describe("Registered component type identifier"),
+var ComponentNodeSchema = import_zod9.z.lazy(
+  () => import_zod9.z.object({
+    id: import_zod9.z.string().min(1).max(100).describe("Unique component instance ID"),
+    type: import_zod9.z.string().min(1).describe("Registered component type identifier"),
     timing: TimingSpecSchema.optional().describe("Optional timing (frames)"),
-    props: import_zod6.z.record(import_zod6.z.string(), import_zod6.z.unknown()).optional().describe("Component props object"),
-    metadata: import_zod6.z.record(import_zod6.z.string(), import_zod6.z.unknown()).optional().describe("Optional metadata"),
-    children: import_zod6.z.array(ComponentNodeSchema).optional().describe("Nested children nodes")
+    props: import_zod9.z.record(import_zod9.z.string(), import_zod9.z.unknown()).optional().describe("Component props object"),
+    metadata: import_zod9.z.record(import_zod9.z.string(), import_zod9.z.unknown()).optional().describe("Optional metadata"),
+    children: import_zod9.z.array(ComponentNodeSchema).optional().describe("Nested children nodes")
   })
 );
-var SegmentSchema = import_zod6.z.object({
-  id: import_zod6.z.string().min(1).max(100),
-  durationInFrames: import_zod6.z.number().int().positive(),
+var SegmentSchema = import_zod9.z.object({
+  id: import_zod9.z.string().min(1).max(100),
+  durationInFrames: import_zod9.z.number().int().positive(),
   root: ComponentNodeSchema,
   transitionToNext: TransitionSpecSchema.optional()
 });
-var VideoIRv2Schema = import_zod6.z.object({
-  version: import_zod6.z.literal("2.0").describe("IR schema version"),
+var VideoIRv2Schema = import_zod9.z.object({
+  version: import_zod9.z.literal("2.0").describe("IR schema version"),
   video: VideoConfigSchema,
   audio: AudioSpecSchema,
-  segments: import_zod6.z.array(SegmentSchema).min(1).optional(),
-  timeline: import_zod6.z.array(ComponentNodeSchema).min(1).optional()
+  segments: import_zod9.z.array(SegmentSchema).min(1).optional(),
+  timeline: import_zod9.z.array(ComponentNodeSchema).min(1).optional()
 }).superRefine((v, ctx) => {
   const hasSegments = Array.isArray(v.segments);
   const hasTimeline = Array.isArray(v.timeline);
   if (hasSegments === hasTimeline) {
     ctx.addIssue({
-      code: import_zod6.z.ZodIssueCode.custom,
+      code: import_zod9.z.ZodIssueCode.custom,
       message: 'Exactly one of "segments" or "timeline" must be provided',
       path: []
     });
   }
 });
-var VideoIRv2AuthoringSchema = import_zod6.z.object({
-  version: import_zod6.z.literal("2.0").describe("IR schema version"),
+var VideoIRv2AuthoringSchema = import_zod9.z.object({
+  version: import_zod9.z.literal("2.0").describe("IR schema version"),
   video: VideoConfigSchema,
   audio: AudioSpecSchema,
-  segments: import_zod6.z.array(SegmentSchema).min(1),
-  timeline: import_zod6.z.never().optional()
+  segments: import_zod9.z.array(SegmentSchema).min(1),
+  timeline: import_zod9.z.never().optional()
 }).describe("Preferred authoring format: sequential segments with optional transitions");
 // src/components/primitives/Scene.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ScenePropsSchema = import_zod7.z.object({
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ScenePropsSchema = import_zod10.z.object({
   background: BackgroundSpecSchema
 });
 var resolveAsset2 = (value) => {
-  return isRemoteAssetPath(value) ? value : (0, import_remotion5.staticFile)(staticFileInputFromAssetPath(value));
+  return isRemoteAssetPath(value) ? value : (0, import_remotion4.staticFile)(staticFileInputFromAssetPath(value));
 };
 var Scene = ({ background, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_remotion5.AbsoluteFill, { children: [
-    background.type === "color" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_remotion5.AbsoluteFill, { style: { backgroundColor: background.value } }) : background.type === "image" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_remotion5.Img,
+  const layers = import_react5.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_remotion4.AbsoluteFill, { children: [
+    background.type === "color" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_remotion4.AbsoluteFill, { style: { backgroundColor: background.value } }) : background.type === "image" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_remotion4.Img,
       {
         src: resolveAsset2(background.value),
         style: { width: "100%", height: "100%", objectFit: "cover" }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_remotion5.Video,
+    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_remotion4.Video,
       {
         src: resolveAsset2(background.value),
         style: { width: "100%", height: "100%", objectFit: "cover" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_remotion5.AbsoluteFill, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_remotion4.AbsoluteFill, { children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_remotion4.AbsoluteFill, { children: child }, i)) })
   ] });
 };
 var SceneComponentMetadata = {
@@ -467,37 +622,37 @@ var SceneComponentMetadata = {
 };
 // src/components/primitives/Segment.tsx
-var import_remotion6 = require("remotion");
-var import_zod8 = require("zod");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var TransitionPropsSchema = import_zod8.z.object({
-  type: import_zod8.z.string().min(1),
-  durationInFrames: import_zod8.z.number().int().positive(),
-  props: import_zod8.z.record(import_zod8.z.string(), import_zod8.z.unknown()).optional()
+var import_remotion5 = require("remotion");
+var import_zod11 = require("zod");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var TransitionPropsSchema = import_zod11.z.object({
+  type: import_zod11.z.string().min(1),
+  durationInFrames: import_zod11.z.number().int().positive(),
+  props: import_zod11.z.record(import_zod11.z.string(), import_zod11.z.unknown()).optional()
 });
-var SegmentPropsSchema = import_zod8.z.object({
+var SegmentPropsSchema = import_zod11.z.object({
   enterTransition: TransitionPropsSchema.optional(),
   exitTransition: TransitionPropsSchema.optional()
 });
 function getSlideOptions(raw) {
-  const parsed = import_zod8.z.object({
-    direction: import_zod8.z.enum(["left", "right", "up", "down"]).default("left"),
-    distance: import_zod8.z.number().int().min(1).max(2e3).default(80)
+  const parsed = import_zod11.z.object({
+    direction: import_zod11.z.enum(["left", "right", "up", "down"]).default("left"),
+    distance: import_zod11.z.number().int().min(1).max(2e3).default(80)
   }).safeParse(raw ?? {});
   if (parsed.success) return parsed.data;
   return { direction: "left", distance: 80 };
 }
 function getZoomOptions(raw) {
-  const parsed = import_zod8.z.object({
-    type: import_zod8.z.enum(["zoomIn", "zoomOut"]).default("zoomIn")
+  const parsed = import_zod11.z.object({
+    type: import_zod11.z.enum(["zoomIn", "zoomOut"]).default("zoomIn")
   }).safeParse(raw ?? {});
   if (parsed.success) return parsed.data;
   return { type: "zoomIn" };
 }
 function getWipeOptions(raw) {
-  const parsed = import_zod8.z.object({
-    direction: import_zod8.z.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
-    softEdge: import_zod8.z.boolean().default(false)
+  const parsed = import_zod11.z.object({
+    direction: import_zod11.z.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
+    softEdge: import_zod11.z.boolean().default(false)
   }).safeParse(raw ?? {});
   if (parsed.success) return parsed.data;
   return { direction: "right", softEdge: false };
@@ -510,18 +665,18 @@ function clipFor(direction, p) {
   return `polygon(0 0, ${100 * p}% 0, 0 ${100 * p}%)`;
 }
 function getCircularOptions(raw) {
-  const parsed = import_zod8.z.object({
-    direction: import_zod8.z.enum(["open", "close"]).default("open"),
-    center: import_zod8.z.object({
-      x: import_zod8.z.number().min(0).max(1).default(0.5),
-      y: import_zod8.z.number().min(0).max(1).default(0.5)
+  const parsed = import_zod11.z.object({
+    direction: import_zod11.z.enum(["open", "close"]).default("open"),
+    center: import_zod11.z.object({
+      x: import_zod11.z.number().min(0).max(1).default(0.5),
+      y: import_zod11.z.number().min(0).max(1).default(0.5)
     }).default({ x: 0.5, y: 0.5 })
   }).safeParse(raw ?? {});
   if (parsed.success) return parsed.data;
   return { direction: "open", center: { x: 0.5, y: 0.5 } };
 }
 var Segment = ({ enterTransition, exitTransition, children, __wavesDurationInFrames }) => {
-  const frame = (0, import_remotion6.useCurrentFrame)();
+  const frame = (0, import_remotion5.useCurrentFrame)();
   const durationInFrames = __wavesDurationInFrames ?? 0;
   let opacity = 1;
   let translateX = 0;
@@ -532,35 +687,35 @@ var Segment = ({ enterTransition, exitTransition, children, __wavesDurationInFra
   if (enterTransition) {
     const d = enterTransition.durationInFrames;
     if (enterTransition.type === "FadeTransition") {
-      opacity *= (0, import_remotion6.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      opacity *= (0, import_remotion5.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     }
     if (enterTransition.type === "SlideTransition") {
       const opts = getSlideOptions(enterTransition.props);
-      const t = (0, import_remotion6.interpolate)(frame, [0, d], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion5.interpolate)(frame, [0, d], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       const delta = opts.distance * t;
       if (opts.direction === "left") translateX += -delta;
       if (opts.direction === "right") translateX += delta;
       if (opts.direction === "up") translateY += -delta;
       if (opts.direction === "down") translateY += delta;
-      opacity *= (0, import_remotion6.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      opacity *= (0, import_remotion5.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     }
     if (enterTransition.type === "ZoomTransition") {
       const opts = getZoomOptions(enterTransition.props);
       const fromScale = opts.type === "zoomIn" ? 1.2 : 0.85;
-      const t = (0, import_remotion6.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion5.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       scale *= fromScale + (1 - fromScale) * t;
       opacity *= t;
     }
     if (enterTransition.type === "WipeTransition") {
       const opts = getWipeOptions(enterTransition.props);
-      const t = (0, import_remotion6.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion5.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       clipPath = clipFor(opts.direction, t);
       filter = opts.softEdge ? "blur(0.4px)" : void 0;
     }
     if (enterTransition.type === "CircularReveal") {
       const opts = getCircularOptions(enterTransition.props);
       const open = opts.direction === "open";
-      const t = (0, import_remotion6.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion5.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       const radiusPct = open ? 150 * t : 150 * (1 - t);
       clipPath = `circle(${radiusPct}% at ${Math.round(opts.center.x * 100)}% ${Math.round(opts.center.y * 100)}%)`;
     }
@@ -569,41 +724,41 @@ var Segment = ({ enterTransition, exitTransition, children, __wavesDurationInFra
     const d = exitTransition.durationInFrames;
     const start = Math.max(0, durationInFrames - d);
     if (exitTransition.type === "FadeTransition") {
-      opacity *= (0, import_remotion6.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      opacity *= (0, import_remotion5.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     }
     if (exitTransition.type === "SlideTransition") {
       const opts = getSlideOptions(exitTransition.props);
-      const t = (0, import_remotion6.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion5.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       const delta = opts.distance * t;
       if (opts.direction === "left") translateX += delta;
       if (opts.direction === "right") translateX += -delta;
       if (opts.direction === "up") translateY += delta;
       if (opts.direction === "down") translateY += -delta;
-      opacity *= (0, import_remotion6.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      opacity *= (0, import_remotion5.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     }
     if (exitTransition.type === "ZoomTransition") {
       const opts = getZoomOptions(exitTransition.props);
       const toScale = opts.type === "zoomIn" ? 1.25 : 0.75;
-      const t = (0, import_remotion6.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion5.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       scale *= 1 + (toScale - 1) * t;
       opacity *= 1 - t;
     }
     if (exitTransition.type === "WipeTransition") {
       const opts = getWipeOptions(exitTransition.props);
-      const t = (0, import_remotion6.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion5.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       clipPath = clipFor(opts.direction, t);
       filter = opts.softEdge ? "blur(0.4px)" : void 0;
     }
     if (exitTransition.type === "CircularReveal") {
       const opts = getCircularOptions(exitTransition.props);
       const open = opts.direction === "open";
-      const t = (0, import_remotion6.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion5.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       const radiusPct = open ? 150 * (1 - t) : 150 * t;
       clipPath = `circle(${radiusPct}% at ${Math.round(opts.center.x * 100)}% ${Math.round(opts.center.y * 100)}%)`;
     }
   }
   const transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_remotion6.AbsoluteFill, { style: { opacity, transform, clipPath, filter }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_remotion5.AbsoluteFill, { style: { opacity, transform, clipPath, filter }, children });
 };
 var SegmentComponentMetadata = {
   kind: "primitive",
@@ -616,18 +771,18 @@ var SegmentComponentMetadata = {
 };
 // src/components/primitives/Shape.tsx
-var import_zod9 = require("zod");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ShapePropsSchema = import_zod9.z.object({
-  shape: import_zod9.z.enum(["rect", "circle"]).default("rect"),
-  x: import_zod9.z.number().default(0),
-  y: import_zod9.z.number().default(0),
-  width: import_zod9.z.number().positive().default(100),
-  height: import_zod9.z.number().positive().default(100),
-  fill: import_zod9.z.string().default("#FFFFFF"),
-  strokeColor: import_zod9.z.string().optional(),
-  strokeWidth: import_zod9.z.number().min(0).default(0),
-  opacity: import_zod9.z.number().min(0).max(1).default(1)
+var import_zod12 = require("zod");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ShapePropsSchema = import_zod12.z.object({
+  shape: import_zod12.z.enum(["rect", "circle"]).default("rect"),
+  x: import_zod12.z.number().default(0),
+  y: import_zod12.z.number().default(0),
+  width: import_zod12.z.number().positive().default(100),
+  height: import_zod12.z.number().positive().default(100),
+  fill: import_zod12.z.string().default("#FFFFFF"),
+  strokeColor: import_zod12.z.string().optional(),
+  strokeWidth: import_zod12.z.number().min(0).default(0),
+  opacity: import_zod12.z.number().min(0).max(1).default(1)
 });
 var Shape = ({
   shape,
@@ -640,7 +795,7 @@ var Shape = ({
   strokeWidth,
   opacity
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       style: {
@@ -665,15 +820,14 @@ var ShapeComponentMetadata = {
 };
 // src/components/primitives/Stack.tsx
-var import_remotion7 = require("remotion");
-var import_zod10 = require("zod");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var StackPropsSchema = import_zod10.z.object({
-  direction: import_zod10.z.enum(["row", "column"]).default("column"),
-  gap: import_zod10.z.number().min(0).default(24),
-  padding: import_zod10.z.number().min(0).default(0),
-  align: import_zod10.z.enum(["start", "center", "end", "stretch"]).default("center"),
-  justify: import_zod10.z.enum(["start", "center", "end", "between"]).default("center")
+var import_zod13 = require("zod");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var StackPropsSchema = import_zod13.z.object({
+  direction: import_zod13.z.enum(["row", "column"]).default("column"),
+  gap: import_zod13.z.number().min(0).default(24),
+  padding: import_zod13.z.number().min(0).default(0),
+  align: import_zod13.z.enum(["start", "center", "end", "stretch"]).default("center"),
+  justify: import_zod13.z.enum(["start", "center", "end", "between"]).default("center")
 });
 var mapAlign2 = (a) => {
   if (a === "start") return "flex-start";
@@ -688,8 +842,8 @@ var mapJustify2 = (j) => {
   return "center";
 };
 var Stack = ({ direction, gap, padding, align, justify, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_remotion7.AbsoluteFill,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    Fill,
     {
       style: {
         display: "flex",
@@ -713,17 +867,22 @@ var StackComponentMetadata = {
 };
 // src/components/primitives/Text.tsx
-var import_remotion8 = require("remotion");
-var import_zod11 = require("zod");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var TextPropsSchema = import_zod11.z.object({
-  content: import_zod11.z.string(),
-  fontSize: import_zod11.z.number().default(48),
-  color: import_zod11.z.string().default("#FFFFFF"),
-  position: import_zod11.z.enum(["top", "center", "bottom", "left", "right"]).default("center"),
-  animation: import_zod11.z.enum(["none", "fade", "slide", "zoom"]).default("fade")
+var import_remotion6 = require("remotion");
+var import_zod14 = require("zod");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var TextPropsSchema = import_zod14.z.object({
+  content: import_zod14.z.string(),
+  fontSize: import_zod14.z.number().default(48),
+  color: import_zod14.z.string().default("#FFFFFF"),
+  fontFamily: import_zod14.z.string().default("Inter"),
+  position: import_zod14.z.enum(["top", "center", "bottom", "left", "right"]).default("center"),
+  animation: import_zod14.z.enum(["none", "fade", "slide", "zoom"]).default("fade"),
+  maxWidthPct: import_zod14.z.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: import_zod14.z.number().min(0).max(0.25).default(0.06),
+  textAlign: import_zod14.z.enum(["left", "center", "right"]).default("center")
 });
-var getPositionStyles = (position) => {
+var getPositionStyles = (position, safeInsetPct) => {
+  const inset = `${(safeInsetPct * 100).toFixed(2)}%`;
   const base = {
     display: "flex",
     justifyContent: "center",
@@ -731,13 +890,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;
   }
@@ -746,29 +905,29 @@ var getAnimationStyle = (frame, animation) => {
   const animDuration = 30;
   switch (animation) {
     case "fade": {
-      const opacity = (0, import_remotion8.interpolate)(frame, [0, animDuration], [0, 1], {
+      const opacity = (0, import_remotion6.interpolate)(frame, [0, animDuration], [0, 1], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
       return { opacity };
     }
     case "slide": {
-      const translateY = (0, import_remotion8.interpolate)(frame, [0, animDuration], [50, 0], {
+      const translateY = (0, import_remotion6.interpolate)(frame, [0, animDuration], [50, 0], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
-      const opacity = (0, import_remotion8.interpolate)(frame, [0, animDuration], [0, 1], {
+      const opacity = (0, import_remotion6.interpolate)(frame, [0, animDuration], [0, 1], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
       return { transform: `translateY(${translateY}px)`, opacity };
     }
     case "zoom": {
-      const scale = (0, import_remotion8.interpolate)(frame, [0, animDuration], [0.8, 1], {
+      const scale = (0, import_remotion6.interpolate)(frame, [0, animDuration], [0.8, 1], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
-      const opacity = (0, import_remotion8.interpolate)(frame, [0, animDuration], [0, 1], {
+      const opacity = (0, import_remotion6.interpolate)(frame, [0, animDuration], [0, 1], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
@@ -778,18 +937,32 @@ var getAnimationStyle = (frame, animation) => {
       return {};
   }
 };
-var Text = ({ content, fontSize, color, position, animation }) => {
-  const frame = (0, import_remotion8.useCurrentFrame)();
-  const positionStyles6 = getPositionStyles(position);
+var Text = ({
+  content,
+  fontSize,
+  color,
+  fontFamily,
+  position,
+  animation,
+  maxWidthPct,
+  safeInsetPct,
+  textAlign
+}) => {
+  const frame = (0, import_remotion6.useCurrentFrame)();
+  const positionStyles6 = getPositionStyles(position, safeInsetPct);
   const animationStyles = getAnimationStyle(frame, animation);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_remotion8.AbsoluteFill, { style: positionStyles6, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Fill, { style: positionStyles6, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       style: {
         fontSize,
         color,
+        fontFamily,
         fontWeight: 600,
-        textAlign: "center",
+        textAlign,
+        maxWidth: `${Math.round(maxWidthPct * 100)}%`,
+        overflowWrap: "anywhere",
+        wordBreak: "break-word",
         ...animationStyles
       },
       children: content
@@ -820,20 +993,20 @@ var TextComponentMetadata = {
 };
 // src/components/primitives/Video.tsx
-var import_remotion9 = require("remotion");
-var import_zod12 = require("zod");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var VideoPropsSchema = import_zod12.z.object({
-  src: import_zod12.z.string().min(1),
-  fit: import_zod12.z.enum(["cover", "contain"]).default("cover"),
-  borderRadius: import_zod12.z.number().min(0).default(0),
-  opacity: import_zod12.z.number().min(0).max(1).default(1),
-  muted: import_zod12.z.boolean().default(true)
+var import_remotion7 = require("remotion");
+var import_zod15 = require("zod");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var VideoPropsSchema = import_zod15.z.object({
+  src: import_zod15.z.string().min(1),
+  fit: import_zod15.z.enum(["cover", "contain"]).default("cover"),
+  borderRadius: import_zod15.z.number().min(0).default(0),
+  opacity: import_zod15.z.number().min(0).max(1).default(1),
+  muted: import_zod15.z.boolean().default(true)
 });
-var resolveAsset3 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion9.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset3 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion7.staticFile)(staticFileInputFromAssetPath(value));
 var Video2 = ({ src, fit, borderRadius, opacity, muted }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_remotion9.AbsoluteFill, { style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_remotion9.Video,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Fill, { style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_remotion7.Video,
     {
       src: resolveAsset3(src),
       muted,
@@ -849,19 +1022,19 @@ var VideoComponentMetadata = {
 };
 // src/components/composites/AnimatedCounter.tsx
-var import_remotion10 = require("remotion");
-var import_zod13 = require("zod");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var AnimatedCounterPropsSchema = import_zod13.z.object({
-  from: import_zod13.z.number().default(0),
-  to: import_zod13.z.number().default(100),
-  fontSize: import_zod13.z.number().min(8).max(300).default(96),
-  color: import_zod13.z.string().default("#FFFFFF"),
-  fontFamily: import_zod13.z.string().default("Inter"),
-  fontWeight: import_zod13.z.number().int().min(100).max(900).default(700),
-  icon: import_zod13.z.string().optional(),
-  suffix: import_zod13.z.string().optional(),
-  animationType: import_zod13.z.enum(["spring", "linear"]).default("spring")
+var import_remotion8 = require("remotion");
+var import_zod16 = require("zod");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var AnimatedCounterPropsSchema = import_zod16.z.object({
+  from: import_zod16.z.number().default(0),
+  to: import_zod16.z.number().default(100),
+  fontSize: import_zod16.z.number().min(8).max(300).default(96),
+  color: import_zod16.z.string().default("#FFFFFF"),
+  fontFamily: import_zod16.z.string().default("Inter"),
+  fontWeight: import_zod16.z.number().int().min(100).max(900).default(700),
+  icon: import_zod16.z.string().optional(),
+  suffix: import_zod16.z.string().optional(),
+  animationType: import_zod16.z.enum(["spring", "linear"]).default("spring")
 });
 var AnimatedCounter = ({
   from,
@@ -875,16 +1048,16 @@ var AnimatedCounter = ({
   animationType,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion10.useCurrentFrame)();
-  const { fps } = (0, import_remotion10.useVideoConfig)();
+  const frame = (0, import_remotion8.useCurrentFrame)();
+  const { fps } = (0, import_remotion8.useVideoConfig)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const progress = animationType === "spring" ? (0, import_remotion10.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } }) : (0, import_remotion10.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const progress = animationType === "spring" ? (0, import_remotion8.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } }) : (0, import_remotion8.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const value = from + (to - from) * Math.max(0, Math.min(1, progress));
   const rounded = Math.round(value);
   const label = `${rounded.toLocaleString()}${suffix ?? ""}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_remotion10.AbsoluteFill, { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { textAlign: "center" }, children: [
-    icon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontSize: Math.round(fontSize * 0.5), marginBottom: 18 }, children: icon }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontSize, color, fontFamily, fontWeight, lineHeight: 1 }, children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Fill, { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { textAlign: "center" }, children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize: Math.round(fontSize * 0.5), marginBottom: 18 }, children: icon }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize, color, fontFamily, fontWeight, lineHeight: 1 }, children: label })
   ] }) });
 };
 var AnimatedCounterComponentMetadata = {
@@ -899,27 +1072,27 @@ var AnimatedCounterComponentMetadata = {
 };
 // src/components/composites/BarChart.tsx
-var import_remotion11 = require("remotion");
-var import_zod14 = require("zod");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var BarChartPropsSchema = import_zod14.z.object({
-  data: import_zod14.z.array(import_zod14.z.object({
-    label: import_zod14.z.string().min(1),
-    value: import_zod14.z.number(),
-    color: import_zod14.z.string().optional()
+var import_remotion9 = require("remotion");
+var import_zod17 = require("zod");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var BarChartPropsSchema = import_zod17.z.object({
+  data: import_zod17.z.array(import_zod17.z.object({
+    label: import_zod17.z.string().min(1),
+    value: import_zod17.z.number(),
+    color: import_zod17.z.string().optional()
   })).min(2).max(8),
-  orientation: import_zod14.z.enum(["horizontal", "vertical"]).default("vertical"),
-  showValues: import_zod14.z.boolean().default(true),
-  showGrid: import_zod14.z.boolean().default(false),
-  maxValue: import_zod14.z.number().optional()
+  orientation: import_zod17.z.enum(["horizontal", "vertical"]).default("vertical"),
+  showValues: import_zod17.z.boolean().default(true),
+  showGrid: import_zod17.z.boolean().default(false),
+  maxValue: import_zod17.z.number().optional()
 });
 var BarChart = ({ data, orientation, showValues, showGrid, maxValue }) => {
-  const frame = (0, import_remotion11.useCurrentFrame)();
-  const { fps } = (0, import_remotion11.useVideoConfig)();
+  const frame = (0, import_remotion9.useCurrentFrame)();
+  const { fps } = (0, import_remotion9.useVideoConfig)();
   const max = maxValue ?? Math.max(...data.map((d) => d.value));
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_remotion11.AbsoluteFill, { style: { padding: 90, boxSizing: "border-box" }, children: [
-    showGrid ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { position: "absolute", left: 90, right: 90, top: 90, bottom: 90, opacity: 0.15, backgroundImage: "linear-gradient(#fff 1px, transparent 1px)", backgroundSize: "100% 60px" } }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Fill, { style: { padding: 90, boxSizing: "border-box" }, children: [
+    showGrid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { position: "absolute", left: 90, right: 90, top: 90, bottom: 90, opacity: 0.15, backgroundImage: "linear-gradient(#fff 1px, transparent 1px)", backgroundSize: "100% 60px" } }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "div",
       {
         style: {
@@ -932,13 +1105,13 @@ var BarChart = ({ data, orientation, showValues, showGrid, maxValue }) => {
           justifyContent: "space-between"
         },
         children: data.map((d, i) => {
-          const p = (0, import_remotion11.spring)({ frame: frame - i * 4, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+          const p = (0, import_remotion9.spring)({ frame: frame - i * 4, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
           const ratio = max === 0 ? 0 : d.value / max * p;
           const color = d.color ?? "#0A84FF";
-          return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }, children: [
-            orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { width: "100%", flex: 1, display: "flex", alignItems: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { width: "100%", height: `${Math.round(ratio * 100)}%`, backgroundColor: color, borderRadius: 12 } }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { width: "100%", display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { flex: 1, height: 18, backgroundColor: "rgba(255,255,255,0.15)", borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { width: `${Math.round(ratio * 100)}%`, height: "100%", backgroundColor: color } }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 700, fontSize: 22, opacity: 0.9 }, children: d.label }),
-            showValues ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 26 }, children: Math.round(d.value).toLocaleString() }) : null
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }, children: [
+            orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { width: "100%", flex: 1, display: "flex", alignItems: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { width: "100%", height: `${Math.round(ratio * 100)}%`, backgroundColor: color, borderRadius: 12 } }) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { width: "100%", display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { flex: 1, height: 18, backgroundColor: "rgba(255,255,255,0.15)", borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { width: `${Math.round(ratio * 100)}%`, height: "100%", backgroundColor: color } }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 700, fontSize: 22, opacity: 0.9 }, children: d.label }),
+            showValues ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 26 }, children: Math.round(d.value).toLocaleString() }) : null
           ] }, d.label);
         })
       }
@@ -953,31 +1126,31 @@ var BarChartComponentMetadata = {
 };
 // src/components/composites/CardStack.tsx
-var import_remotion12 = require("remotion");
-var import_zod15 = require("zod");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var CardSchema = import_zod15.z.object({
-  title: import_zod15.z.string().min(1),
-  content: import_zod15.z.string().min(1),
-  backgroundColor: import_zod15.z.string().optional()
+var import_remotion10 = require("remotion");
+var import_zod18 = require("zod");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var CardSchema = import_zod18.z.object({
+  title: import_zod18.z.string().min(1),
+  content: import_zod18.z.string().min(1),
+  backgroundColor: import_zod18.z.string().optional()
 });
-var CardStackPropsSchema = import_zod15.z.object({
-  cards: import_zod15.z.array(CardSchema).min(2).max(5),
-  transition: import_zod15.z.enum(["flip", "slide", "fade"]).default("flip"),
-  displayDuration: import_zod15.z.number().int().min(30).max(150).default(90)
+var CardStackPropsSchema = import_zod18.z.object({
+  cards: import_zod18.z.array(CardSchema).min(2).max(5),
+  transition: import_zod18.z.enum(["flip", "slide", "fade"]).default("flip"),
+  displayDuration: import_zod18.z.number().int().min(30).max(150).default(90)
 });
 var CardStack = ({ cards, transition, displayDuration }) => {
-  const frame = (0, import_remotion12.useCurrentFrame)();
-  const { fps } = (0, import_remotion12.useVideoConfig)();
+  const frame = (0, import_remotion10.useCurrentFrame)();
+  const { fps } = (0, import_remotion10.useVideoConfig)();
   const index = Math.min(cards.length - 1, Math.floor(frame / displayDuration));
   const local = frame - index * displayDuration;
-  const p = (0, import_remotion12.spring)({ frame: local, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const p = (0, import_remotion10.spring)({ frame: local, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
   const card = cards[index];
   const bg = card.backgroundColor ?? "rgba(255,255,255,0.1)";
   const opacity = transition === "fade" ? p : 1;
-  const slideX = transition === "slide" ? (0, import_remotion12.interpolate)(p, [0, 1], [80, 0]) : 0;
-  const rotateY = transition === "flip" ? (0, import_remotion12.interpolate)(p, [0, 1], [70, 0]) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_remotion12.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  const slideX = transition === "slide" ? (0, import_remotion10.interpolate)(p, [0, 1], [80, 0]) : 0;
+  const rotateY = transition === "flip" ? (0, import_remotion10.interpolate)(p, [0, 1], [70, 0]) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       style: {
@@ -994,8 +1167,8 @@ var CardStack = ({ cards, transition, displayDuration }) => {
         opacity
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontSize: 56, fontWeight: 900, marginBottom: 22 }, children: card.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontSize: 30, fontWeight: 700, opacity: 0.9, lineHeight: 1.3 }, children: card.content })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 56, fontWeight: 900, marginBottom: 22 }, children: card.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 30, fontWeight: 700, opacity: 0.9, lineHeight: 1.3 }, children: card.content })
       ]
     }
   ) });
@@ -1008,18 +1181,19 @@ var CardStackComponentMetadata = {
 };
 // src/components/composites/CircularReveal.tsx
-var import_remotion13 = require("remotion");
-var import_zod16 = require("zod");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var CenterSchema = import_zod16.z.object({
-  x: import_zod16.z.number().min(0).max(1).default(0.5),
-  y: import_zod16.z.number().min(0).max(1).default(0.5)
+var import_react6 = __toESM(require("react"));
+var import_remotion11 = require("remotion");
+var import_zod19 = require("zod");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var CenterSchema = import_zod19.z.object({
+  x: import_zod19.z.number().min(0).max(1).default(0.5),
+  y: import_zod19.z.number().min(0).max(1).default(0.5)
 });
-var CircularRevealPropsSchema = import_zod16.z.object({
-  durationInFrames: import_zod16.z.number().int().min(10).max(60).default(30),
-  direction: import_zod16.z.enum(["open", "close"]).default("open"),
+var CircularRevealPropsSchema = import_zod19.z.object({
+  durationInFrames: import_zod19.z.number().int().min(10).max(60).default(30),
+  direction: import_zod19.z.enum(["open", "close"]).default("open"),
   center: CenterSchema.optional(),
-  phase: import_zod16.z.enum(["in", "out", "inOut"]).default("inOut")
+  phase: import_zod19.z.enum(["in", "out", "inOut"]).default("inOut")
 });
 var CircularReveal = ({
   durationInFrames,
@@ -1029,22 +1203,23 @@ var CircularReveal = ({
   children,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion13.useCurrentFrame)();
+  const layers = import_react6.default.Children.toArray(children);
+  const frame = (0, import_remotion11.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
   const c = center ?? { x: 0.5, y: 0.5 };
   const open = direction === "open";
   let radiusPct = open ? 0 : 150;
   if (phase === "in" || phase === "inOut") {
-    const t = (0, import_remotion13.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion11.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     radiusPct = open ? 150 * t : 150 * (1 - t);
   }
   if (phase === "out" || phase === "inOut") {
     const start = Math.max(0, total - d);
-    const t = (0, import_remotion13.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion11.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     radiusPct = open ? 150 * (1 - t) : 150 * t;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_remotion13.AbsoluteFill, { style: { clipPath: `circle(${radiusPct}% at ${Math.round(c.x * 100)}% ${Math.round(c.y * 100)}%)` }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Fill, { style: { clipPath: `circle(${radiusPct}% at ${Math.round(c.x * 100)}% ${Math.round(c.y * 100)}%)` }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var CircularRevealComponentMetadata = {
   kind: "composite",
@@ -1056,21 +1231,21 @@ var CircularRevealComponentMetadata = {
 };
 // src/components/composites/CountUpText.tsx
-var import_remotion14 = require("remotion");
-var import_zod17 = require("zod");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var CountUpTextPropsSchema = import_zod17.z.object({
-  from: import_zod17.z.number().default(0),
-  to: import_zod17.z.number().default(100),
-  fontSize: import_zod17.z.number().min(8).max(240).default(72),
-  color: import_zod17.z.string().default("#FFFFFF"),
-  fontFamily: import_zod17.z.string().default("Inter"),
-  fontWeight: import_zod17.z.number().int().min(100).max(900).default(700),
-  position: import_zod17.z.enum(["top", "center", "bottom"]).default("center"),
-  format: import_zod17.z.enum(["integer", "decimal", "currency", "percentage"]).default("integer"),
-  decimals: import_zod17.z.number().int().min(0).max(4).default(0),
-  prefix: import_zod17.z.string().optional(),
-  suffix: import_zod17.z.string().optional()
+var import_remotion12 = require("remotion");
+var import_zod20 = require("zod");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var CountUpTextPropsSchema = import_zod20.z.object({
+  from: import_zod20.z.number().default(0),
+  to: import_zod20.z.number().default(100),
+  fontSize: import_zod20.z.number().min(8).max(240).default(72),
+  color: import_zod20.z.string().default("#FFFFFF"),
+  fontFamily: import_zod20.z.string().default("Inter"),
+  fontWeight: import_zod20.z.number().int().min(100).max(900).default(700),
+  position: import_zod20.z.enum(["top", "center", "bottom"]).default("center"),
+  format: import_zod20.z.enum(["integer", "decimal", "currency", "percentage"]).default("integer"),
+  decimals: import_zod20.z.number().int().min(0).max(4).default(0),
+  prefix: import_zod20.z.string().optional(),
+  suffix: import_zod20.z.string().optional()
 });
 var positionStyles = (position) => {
   if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
@@ -1097,15 +1272,15 @@ var CountUpText = ({
   suffix,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion14.useCurrentFrame)();
-  const { fps } = (0, import_remotion14.useVideoConfig)();
+  const frame = (0, import_remotion12.useCurrentFrame)();
+  const { fps } = (0, import_remotion12.useVideoConfig)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const p = (0, import_remotion14.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } });
+  const p = (0, import_remotion12.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } });
   const progress = Math.max(0, Math.min(1, p));
   const value = from + (to - from) * progress;
-  const fade = (0, import_remotion14.interpolate)(frame, [0, Math.min(12, total)], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const fade = (0, import_remotion12.interpolate)(frame, [0, Math.min(12, total)], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const label = `${prefix ?? ""}${formatValue(value, format, decimals)}${suffix ?? ""}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_remotion14.AbsoluteFill, { style: { display: "flex", ...positionStyles(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize, color, fontFamily, fontWeight, opacity: fade, lineHeight: 1 }, children: label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Fill, { style: { display: "flex", ...positionStyles(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize, color, fontFamily, fontWeight, opacity: fade, lineHeight: 1 }, children: label }) });
 };
 var CountUpTextComponentMetadata = {
   kind: "composite",
@@ -1115,10 +1290,11 @@ var CountUpTextComponentMetadata = {
 };
 // src/components/composites/FadeTransition.tsx
-var import_remotion15 = require("remotion");
-var import_zod18 = require("zod");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var EasingSchema = import_zod18.z.enum(["linear", "easeIn", "easeOut", "easeInOut"]);
+var import_react7 = __toESM(require("react"));
+var import_remotion13 = require("remotion");
+var import_zod21 = require("zod");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var EasingSchema = import_zod21.z.enum(["linear", "easeIn", "easeOut", "easeInOut"]);
 function ease(t, easing) {
   const x = Math.max(0, Math.min(1, t));
   if (easing === "linear") return x;
@@ -1126,10 +1302,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 = import_zod18.z.object({
-  durationInFrames: import_zod18.z.number().int().min(10).max(60).default(30),
+var FadeTransitionPropsSchema = import_zod21.z.object({
+  durationInFrames: import_zod21.z.number().int().min(10).max(60).default(30),
   easing: EasingSchema.default("easeInOut"),
-  phase: import_zod18.z.enum(["in", "out", "inOut"]).default("inOut")
+  phase: import_zod21.z.enum(["in", "out", "inOut"]).default("inOut")
 });
 var FadeTransition = ({
   durationInFrames,
@@ -1138,20 +1314,21 @@ var FadeTransition = ({
   children,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion15.useCurrentFrame)();
+  const layers = import_react7.default.Children.toArray(children);
+  const frame = (0, import_remotion13.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
   let opacity = 1;
   if (phase === "in" || phase === "inOut") {
-    const t = (0, import_remotion15.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion13.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     opacity *= ease(t, easing);
   }
   if (phase === "out" || phase === "inOut") {
     const start = Math.max(0, total - d);
-    const t = (0, import_remotion15.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion13.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     opacity *= 1 - ease(t, easing);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_remotion15.AbsoluteFill, { style: { opacity }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Fill, { style: { opacity }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var FadeTransitionComponentMetadata = {
   kind: "composite",
@@ -1163,17 +1340,17 @@ var FadeTransitionComponentMetadata = {
 };
 // src/components/composites/GlitchText.tsx
-var import_remotion16 = require("remotion");
-var import_zod19 = require("zod");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var GlitchTextPropsSchema = import_zod19.z.object({
-  content: import_zod19.z.string().max(100),
-  fontSize: import_zod19.z.number().min(8).max(240).default(72),
-  color: import_zod19.z.string().default("#FFFFFF"),
-  fontFamily: import_zod19.z.string().default("monospace"),
-  position: import_zod19.z.enum(["top", "center", "bottom"]).default("center"),
-  intensity: import_zod19.z.number().int().min(1).max(10).default(5),
-  glitchDuration: import_zod19.z.number().int().min(5).max(30).default(10)
+var import_remotion14 = require("remotion");
+var import_zod22 = require("zod");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var GlitchTextPropsSchema = import_zod22.z.object({
+  content: import_zod22.z.string().max(100),
+  fontSize: import_zod22.z.number().min(8).max(240).default(72),
+  color: import_zod22.z.string().default("#FFFFFF"),
+  fontFamily: import_zod22.z.string().default("monospace"),
+  position: import_zod22.z.enum(["top", "center", "bottom"]).default("center"),
+  intensity: import_zod22.z.number().int().min(1).max(10).default(5),
+  glitchDuration: import_zod22.z.number().int().min(5).max(30).default(10)
 });
 var positionStyles2 = (position) => {
   if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
@@ -1193,7 +1370,7 @@ var GlitchText = ({
   intensity,
   glitchDuration
 }) => {
-  const frame = (0, import_remotion16.useCurrentFrame)();
+  const frame = (0, import_remotion14.useCurrentFrame)();
   const active = frame < glitchDuration;
   const seed = frame + 1;
   const jitter = active ? (pseudoRandom(seed) - 0.5) * intensity * 6 : 0;
@@ -1207,10 +1384,10 @@ var GlitchText = ({
     textTransform: "uppercase",
     textAlign: "center"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_remotion16.AbsoluteFill, { style: { display: "flex", ...positionStyles2(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { ...baseStyle, color, transform: `translate(${jitter}px, ${jitterY}px)` }, children: content }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { ...baseStyle, color: "#FF3B30", transform: `translate(${jitter + 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { ...baseStyle, color: "#0A84FF", transform: `translate(${jitter - 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Fill, { style: { display: "flex", ...positionStyles2(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { ...baseStyle, color, transform: `translate(${jitter}px, ${jitterY}px)` }, children: content }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { ...baseStyle, color: "#FF3B30", transform: `translate(${jitter + 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { ...baseStyle, color: "#0A84FF", transform: `translate(${jitter - 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content })
   ] }) });
 };
 var GlitchTextComponentMetadata = {
@@ -1221,17 +1398,16 @@ var GlitchTextComponentMetadata = {
 };
 // src/components/composites/GridLayout.tsx
-var import_remotion17 = require("remotion");
-var import_zod20 = require("zod");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var GridLayoutPropsSchema = import_zod20.z.object({
-  columns: import_zod20.z.number().int().min(1).max(4).default(2),
-  rows: import_zod20.z.number().int().min(1).max(4).default(2),
-  gap: import_zod20.z.number().min(0).max(50).default(20),
-  padding: import_zod20.z.number().min(0).max(100).default(40)
+var import_zod23 = require("zod");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var GridLayoutPropsSchema = import_zod23.z.object({
+  columns: import_zod23.z.number().int().min(1).max(4).default(2),
+  rows: import_zod23.z.number().int().min(1).max(4).default(2),
+  gap: import_zod23.z.number().min(0).max(50).default(20),
+  padding: import_zod23.z.number().min(0).max(100).default(40)
 });
 var GridLayout = ({ columns, rows, gap, padding, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_remotion17.AbsoluteFill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Fill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       style: {
@@ -1256,23 +1432,23 @@ var GridLayoutComponentMetadata = {
 };
 // src/components/composites/ImageCollage.tsx
-var import_remotion18 = require("remotion");
-var import_zod21 = require("zod");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var ImageCollagePropsSchema = import_zod21.z.object({
-  images: import_zod21.z.array(import_zod21.z.object({ src: import_zod21.z.string().min(1), caption: import_zod21.z.string().optional() })).min(2).max(9),
-  layout: import_zod21.z.enum(["grid", "stack", "scatter"]).default("grid"),
-  stagger: import_zod21.z.number().int().min(2).max(10).default(5)
+var import_remotion15 = require("remotion");
+var import_zod24 = require("zod");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ImageCollagePropsSchema = import_zod24.z.object({
+  images: import_zod24.z.array(import_zod24.z.object({ src: import_zod24.z.string().min(1), caption: import_zod24.z.string().optional() })).min(2).max(9),
+  layout: import_zod24.z.enum(["grid", "stack", "scatter"]).default("grid"),
+  stagger: import_zod24.z.number().int().min(2).max(10).default(5)
 });
-var resolveAsset4 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion18.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset4 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion15.staticFile)(staticFileInputFromAssetPath(value));
 var ImageCollage = ({ images, layout, stagger }) => {
-  const frame = (0, import_remotion18.useCurrentFrame)();
-  const { fps } = (0, import_remotion18.useVideoConfig)();
+  const frame = (0, import_remotion15.useCurrentFrame)();
+  const { fps } = (0, import_remotion15.useVideoConfig)();
   const n = images.length;
   const cols = Math.ceil(Math.sqrt(n));
   const rows = Math.ceil(n / cols);
   if (layout === "grid") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_remotion18.AbsoluteFill, { style: { padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Fill, { style: { padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         style: {
@@ -1284,21 +1460,21 @@ var ImageCollage = ({ images, layout, stagger }) => {
           height: "100%"
         },
         children: images.map((img, i) => {
-          const p = (0, import_remotion18.spring)({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { position: "relative", overflow: "hidden", borderRadius: 18, opacity: p, transform: `scale(${0.92 + 0.08 * p})` }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_remotion18.Img, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
-            img.caption ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0, padding: 12, background: "linear-gradient(transparent, rgba(0,0,0,0.7))", color: "#fff", fontWeight: 700 }, children: img.caption }) : null
+          const p = (0, import_remotion15.spring)({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { position: "relative", overflow: "hidden", borderRadius: 18, opacity: p, transform: `scale(${0.92 + 0.08 * p})` }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_remotion15.Img, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+            img.caption ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0, padding: 12, background: "linear-gradient(transparent, rgba(0,0,0,0.7))", color: "#fff", fontWeight: 700 }, children: img.caption }) : null
           ] }, i);
         })
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_remotion18.AbsoluteFill, { children: images.map((img, i) => {
-    const p = (0, import_remotion18.spring)({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Fill, { children: images.map((img, i) => {
+    const p = (0, import_remotion15.spring)({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
     const baseRotate = layout === "stack" ? (i - (n - 1) / 2) * 4 : i * 17 % 20 - 10;
     const baseX = layout === "scatter" ? i * 137 % 300 - 150 : 0;
     const baseY = layout === "scatter" ? (i + 3) * 89 % 200 - 100 : 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         style: {
@@ -1313,7 +1489,7 @@ var ImageCollage = ({ images, layout, stagger }) => {
           overflow: "hidden",
           boxShadow: "0 20px 60px rgba(0,0,0,0.35)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_remotion18.Img, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } })
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_remotion15.Img, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } })
       },
       i
     );
@@ -1327,20 +1503,20 @@ var ImageCollageComponentMetadata = {
 };
 // src/components/composites/ImageReveal.tsx
-var import_remotion19 = require("remotion");
-var import_zod22 = require("zod");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var ImageRevealPropsSchema = import_zod22.z.object({
-  src: import_zod22.z.string().min(1),
-  direction: import_zod22.z.enum(["left", "right", "top", "bottom", "center"]).default("left"),
-  revealType: import_zod22.z.enum(["wipe", "expand", "iris"]).default("wipe")
+var import_remotion16 = require("remotion");
+var import_zod25 = require("zod");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ImageRevealPropsSchema = import_zod25.z.object({
+  src: import_zod25.z.string().min(1),
+  direction: import_zod25.z.enum(["left", "right", "top", "bottom", "center"]).default("left"),
+  revealType: import_zod25.z.enum(["wipe", "expand", "iris"]).default("wipe")
 });
-var resolveAsset5 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion19.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset5 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion16.staticFile)(staticFileInputFromAssetPath(value));
 var ImageReveal = ({ src, direction, revealType, __wavesDurationInFrames }) => {
-  const frame = (0, import_remotion19.useCurrentFrame)();
+  const frame = (0, import_remotion16.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(30, total);
-  const p = (0, import_remotion19.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const p = (0, import_remotion16.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   let clipPath;
   let transform = "none";
   let transformOrigin = "center center";
@@ -1363,8 +1539,8 @@ var ImageReveal = ({ src, direction, revealType, __wavesDurationInFrames }) => {
     clipPath = `circle(${Math.round(150 * p)}% at 50% 50%)`;
   }
   const opacity = revealType === "expand" ? p : 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_remotion19.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_remotion19.Img,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_remotion16.Img,
     {
       src: resolveAsset5(src),
       style: {
@@ -1387,27 +1563,27 @@ var ImageRevealComponentMetadata = {
 };
 // src/components/composites/ImageSequence.tsx
-var import_remotion20 = require("remotion");
-var import_zod23 = require("zod");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var ImageSequencePropsSchema = import_zod23.z.object({
-  basePath: import_zod23.z.string().min(1),
-  frameCount: import_zod23.z.number().int().positive(),
-  filePattern: import_zod23.z.string().default("frame_{frame}.png"),
-  fps: import_zod23.z.number().int().min(1).max(120).default(30)
+var import_remotion17 = require("remotion");
+var import_zod26 = require("zod");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var ImageSequencePropsSchema = import_zod26.z.object({
+  basePath: import_zod26.z.string().min(1),
+  frameCount: import_zod26.z.number().int().positive(),
+  filePattern: import_zod26.z.string().default("frame_{frame}.png"),
+  fps: import_zod26.z.number().int().min(1).max(120).default(30)
 });
 function joinPath(base, file) {
   if (base.endsWith("/")) return `${base}${file}`;
   return `${base}/${file}`;
 }
-var resolveAsset6 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion20.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset6 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion17.staticFile)(staticFileInputFromAssetPath(value));
 var ImageSequence = ({ basePath, frameCount, filePattern, fps }) => {
-  const frame = (0, import_remotion20.useCurrentFrame)();
-  const { fps: compFps } = (0, import_remotion20.useVideoConfig)();
+  const frame = (0, import_remotion17.useCurrentFrame)();
+  const { fps: compFps } = (0, import_remotion17.useVideoConfig)();
   const index = Math.min(frameCount - 1, Math.max(0, Math.floor(frame * fps / compFps)));
   const file = filePattern.replace("{frame}", String(index));
   const src = joinPath(basePath, file);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_remotion20.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_remotion20.Img, { src: resolveAsset6(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_remotion17.Img, { src: resolveAsset6(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) });
 };
 var ImageSequenceComponentMetadata = {
   kind: "composite",
@@ -1417,26 +1593,26 @@ var ImageSequenceComponentMetadata = {
 };
 // src/components/composites/ImageWithCaption.tsx
-var import_remotion21 = require("remotion");
-var import_zod24 = require("zod");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var CaptionStyleSchema = import_zod24.z.object({
-  fontSize: import_zod24.z.number().min(12).max(80).default(32),
-  color: import_zod24.z.string().default("#FFFFFF"),
-  backgroundColor: import_zod24.z.string().default("rgba(0,0,0,0.7)")
+var import_remotion18 = require("remotion");
+var import_zod27 = require("zod");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var CaptionStyleSchema = import_zod27.z.object({
+  fontSize: import_zod27.z.number().min(12).max(80).default(32),
+  color: import_zod27.z.string().default("#FFFFFF"),
+  backgroundColor: import_zod27.z.string().default("rgba(0,0,0,0.7)")
 });
-var ImageWithCaptionPropsSchema = import_zod24.z.object({
-  src: import_zod24.z.string().min(1),
-  caption: import_zod24.z.string().max(200),
-  captionPosition: import_zod24.z.enum(["top", "bottom", "overlay"]).default("bottom"),
+var ImageWithCaptionPropsSchema = import_zod27.z.object({
+  src: import_zod27.z.string().min(1),
+  caption: import_zod27.z.string().max(200),
+  captionPosition: import_zod27.z.enum(["top", "bottom", "overlay"]).default("bottom"),
   captionStyle: CaptionStyleSchema.optional()
 });
-var resolveAsset7 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion21.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset7 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion18.staticFile)(staticFileInputFromAssetPath(value));
 var ImageWithCaption = ({ src, caption, captionPosition, captionStyle }) => {
-  const frame = (0, import_remotion21.useCurrentFrame)();
-  const p = (0, import_remotion21.interpolate)(frame, [8, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const frame = (0, import_remotion18.useCurrentFrame)();
+  const p = (0, import_remotion18.interpolate)(frame, [8, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const style = captionStyle ?? { fontSize: 32, color: "#FFFFFF", backgroundColor: "rgba(0,0,0,0.7)" };
-  const captionBox = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const captionBox = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       style: {
@@ -1453,15 +1629,15 @@ var ImageWithCaption = ({ src, caption, captionPosition, captionStyle }) => {
     }
   );
   if (captionPosition === "top" || captionPosition === "bottom") {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_remotion21.AbsoluteFill, { style: { display: "flex", flexDirection: "column" }, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Fill, { style: { display: "flex", flexDirection: "column" }, children: [
       captionPosition === "top" ? captionBox : null,
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_remotion21.Img, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_remotion18.Img, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) }),
       captionPosition === "bottom" ? captionBox : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_remotion21.AbsoluteFill, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_remotion21.Img, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0 }, children: captionBox })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Fill, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_remotion18.Img, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0 }, children: captionBox })
   ] });
 };
 var ImageWithCaptionComponentMetadata = {
@@ -1472,19 +1648,19 @@ var ImageWithCaptionComponentMetadata = {
 };
 // src/components/composites/InstagramStory.tsx
-var import_remotion22 = require("remotion");
-var import_zod25 = require("zod");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var InstagramStoryPropsSchema = import_zod25.z.object({
-  backgroundImage: import_zod25.z.string().optional(),
-  backgroundColor: import_zod25.z.string().default("#000000"),
-  profilePic: import_zod25.z.string().optional(),
-  username: import_zod25.z.string().optional(),
-  text: import_zod25.z.string().max(100).optional(),
-  sticker: import_zod25.z.enum(["none", "poll", "question", "countdown"]).default("none"),
-  musicTrack: import_zod25.z.string().optional()
+var import_remotion19 = require("remotion");
+var import_zod28 = require("zod");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var InstagramStoryPropsSchema = import_zod28.z.object({
+  backgroundImage: import_zod28.z.string().optional(),
+  backgroundColor: import_zod28.z.string().default("#000000"),
+  profilePic: import_zod28.z.string().optional(),
+  username: import_zod28.z.string().optional(),
+  text: import_zod28.z.string().max(100).optional(),
+  sticker: import_zod28.z.enum(["none", "poll", "question", "countdown"]).default("none"),
+  musicTrack: import_zod28.z.string().optional()
 });
-var resolveAsset8 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion22.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset8 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion19.staticFile)(staticFileInputFromAssetPath(value));
 var InstagramStory = ({
   backgroundImage,
   backgroundColor,
@@ -1494,17 +1670,17 @@ var InstagramStory = ({
   sticker,
   musicTrack
 }) => {
-  const frame = (0, import_remotion22.useCurrentFrame)();
-  const fade = (0, import_remotion22.interpolate)(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_remotion22.AbsoluteFill, { style: { backgroundColor }, children: [
-    musicTrack ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_remotion22.Audio, { src: resolveAsset8(musicTrack), volume: 0.6 }) : null,
-    backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_remotion22.Img, { src: resolveAsset8(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover", opacity: fade } }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_remotion22.AbsoluteFill, { style: { padding: 60, boxSizing: "border-box" }, children: [
-      profilePic || username ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 18 }, children: [
-        profilePic ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_remotion22.Img, { src: resolveAsset8(profilePic), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "rgba(255,255,255,0.2)" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 34 }, children: username ?? "username" })
+  const frame = (0, import_remotion19.useCurrentFrame)();
+  const fade = (0, import_remotion19.interpolate)(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Fill, { style: { backgroundColor }, children: [
+    musicTrack ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_remotion19.Audio, { src: resolveAsset8(musicTrack), volume: 0.6 }) : null,
+    backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_remotion19.Img, { src: resolveAsset8(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover", opacity: fade } }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Fill, { style: { padding: 60, boxSizing: "border-box" }, children: [
+      profilePic || username ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 18 }, children: [
+        profilePic ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_remotion19.Img, { src: resolveAsset8(profilePic), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "rgba(255,255,255,0.2)" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 34 }, children: username ?? "username" })
       ] }) : null,
-      text ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      text ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "div",
         {
           style: {
@@ -1518,7 +1694,7 @@ var InstagramStory = ({
           children: text
         }
       ) : null,
-      sticker !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      sticker !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "div",
         {
           style: {
@@ -1547,18 +1723,18 @@ var InstagramStoryComponentMetadata = {
 };
 // src/components/composites/IntroScene.tsx
-var import_remotion23 = require("remotion");
-var import_zod26 = require("zod");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var IntroScenePropsSchema = import_zod26.z.object({
-  logoSrc: import_zod26.z.string().min(1),
-  companyName: import_zod26.z.string().min(1),
-  tagline: import_zod26.z.string().optional(),
-  backgroundColor: import_zod26.z.string().default("#000000"),
-  primaryColor: import_zod26.z.string().default("#FFFFFF"),
-  musicTrack: import_zod26.z.string().optional()
+var import_remotion20 = require("remotion");
+var import_zod29 = require("zod");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var IntroScenePropsSchema = import_zod29.z.object({
+  logoSrc: import_zod29.z.string().min(1),
+  companyName: import_zod29.z.string().min(1),
+  tagline: import_zod29.z.string().optional(),
+  backgroundColor: import_zod29.z.string().default("#000000"),
+  primaryColor: import_zod29.z.string().default("#FFFFFF"),
+  musicTrack: import_zod29.z.string().optional()
 });
-var resolveAsset9 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion23.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset9 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion20.staticFile)(staticFileInputFromAssetPath(value));
 var IntroScene = ({
   logoSrc,
   companyName,
@@ -1568,25 +1744,25 @@ var IntroScene = ({
   musicTrack,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion23.useCurrentFrame)();
-  const { fps } = (0, import_remotion23.useVideoConfig)();
+  const frame = (0, import_remotion20.useCurrentFrame)();
+  const { fps } = (0, import_remotion20.useVideoConfig)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const logoP = (0, import_remotion23.spring)({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
-  const nameOpacity = (0, import_remotion23.interpolate)(frame, [20, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const taglineY = (0, import_remotion23.interpolate)(frame, [50, 80], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const outroFade = (0, import_remotion23.interpolate)(frame, [Math.max(0, total - 20), total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_remotion23.AbsoluteFill, { style: { backgroundColor, justifyContent: "center", alignItems: "center" }, children: [
-    musicTrack ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_remotion23.Audio, { src: resolveAsset9(musicTrack), volume: 0.7 }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { textAlign: "center", opacity: outroFade }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        import_remotion23.Img,
+  const logoP = (0, import_remotion20.spring)({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const nameOpacity = (0, import_remotion20.interpolate)(frame, [20, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const taglineY = (0, import_remotion20.interpolate)(frame, [50, 80], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const outroFade = (0, import_remotion20.interpolate)(frame, [Math.max(0, total - 20), total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+    musicTrack ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_remotion20.Audio, { src: resolveAsset9(musicTrack), volume: 0.7 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { textAlign: "center", opacity: outroFade }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        import_remotion20.Img,
         {
           src: resolveAsset9(logoSrc),
           style: { width: 280, height: 280, objectFit: "contain", transform: `scale(${logoP})` }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { marginTop: 24, color: primaryColor, fontSize: 64, fontWeight: 900, opacity: nameOpacity }, children: companyName }),
-      tagline ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: { marginTop: 24, color: primaryColor, fontSize: 64, fontWeight: 900, opacity: nameOpacity }, children: companyName }),
+      tagline ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "div",
         {
           style: {
@@ -1611,17 +1787,17 @@ var IntroSceneComponentMetadata = {
 };
 // src/components/composites/KenBurnsImage.tsx
-var import_remotion24 = require("remotion");
-var import_zod27 = require("zod");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var KenBurnsImagePropsSchema = import_zod27.z.object({
-  src: import_zod27.z.string().min(1),
-  startScale: import_zod27.z.number().min(1).max(2).default(1),
-  endScale: import_zod27.z.number().min(1).max(2).default(1.2),
-  panDirection: import_zod27.z.enum(["none", "left", "right", "up", "down"]).default("none"),
-  panAmount: import_zod27.z.number().min(0).max(100).default(50)
+var import_remotion21 = require("remotion");
+var import_zod30 = require("zod");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var KenBurnsImagePropsSchema = import_zod30.z.object({
+  src: import_zod30.z.string().min(1),
+  startScale: import_zod30.z.number().min(1).max(2).default(1),
+  endScale: import_zod30.z.number().min(1).max(2).default(1.2),
+  panDirection: import_zod30.z.enum(["none", "left", "right", "up", "down"]).default("none"),
+  panAmount: import_zod30.z.number().min(0).max(100).default(50)
 });
-var resolveAsset10 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion24.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset10 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion21.staticFile)(staticFileInputFromAssetPath(value));
 var KenBurnsImage = ({
   src,
   startScale,
@@ -1630,14 +1806,14 @@ var KenBurnsImage = ({
   panAmount,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion24.useCurrentFrame)();
+  const frame = (0, import_remotion21.useCurrentFrame)();
   const duration = Math.max(1, __wavesDurationInFrames ?? 1);
-  const t = (0, import_remotion24.interpolate)(frame, [0, duration], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const t = (0, import_remotion21.interpolate)(frame, [0, duration], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const scale = startScale + (endScale - startScale) * t;
   const dx = panDirection === "left" ? -panAmount * t : panDirection === "right" ? panAmount * t : 0;
   const dy = panDirection === "up" ? -panAmount * t : panDirection === "down" ? panAmount * t : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_remotion24.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_remotion24.Img,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_remotion21.Img,
     {
       src: resolveAsset10(src),
       style: {
@@ -1658,20 +1834,20 @@ var KenBurnsImageComponentMetadata = {
 };
 // src/components/composites/KineticTypography.tsx
-var import_remotion25 = require("remotion");
-var import_zod28 = require("zod");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var WordSchema = import_zod28.z.object({
-  text: import_zod28.z.string().min(1),
-  emphasis: import_zod28.z.enum(["normal", "bold", "giant"]).default("normal")
+var import_remotion22 = require("remotion");
+var import_zod31 = require("zod");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var WordSchema = import_zod31.z.object({
+  text: import_zod31.z.string().min(1),
+  emphasis: import_zod31.z.enum(["normal", "bold", "giant"]).default("normal")
 });
-var KineticTypographyPropsSchema = import_zod28.z.object({
-  words: import_zod28.z.array(WordSchema).min(1).max(50),
-  fontSize: import_zod28.z.number().min(12).max(140).default(48),
-  color: import_zod28.z.string().default("#FFFFFF"),
-  fontFamily: import_zod28.z.string().default("Inter"),
-  timing: import_zod28.z.array(import_zod28.z.number().int().min(0)).min(1).describe("Frame timing for each word"),
-  transition: import_zod28.z.enum(["fade", "scale", "slideLeft", "slideRight"]).default("scale")
+var KineticTypographyPropsSchema = import_zod31.z.object({
+  words: import_zod31.z.array(WordSchema).min(1).max(50),
+  fontSize: import_zod31.z.number().min(12).max(140).default(48),
+  color: import_zod31.z.string().default("#FFFFFF"),
+  fontFamily: import_zod31.z.string().default("Inter"),
+  timing: import_zod31.z.array(import_zod31.z.number().int().min(0)).min(1).describe("Frame timing for each word"),
+  transition: import_zod31.z.enum(["fade", "scale", "slideLeft", "slideRight"]).default("scale")
 });
 var KineticTypography = ({
   words,
@@ -1681,8 +1857,8 @@ var KineticTypography = ({
   timing,
   transition
 }) => {
-  const frame = (0, import_remotion25.useCurrentFrame)();
-  const { fps } = (0, import_remotion25.useVideoConfig)();
+  const frame = (0, import_remotion22.useCurrentFrame)();
+  const { fps } = (0, import_remotion22.useVideoConfig)();
   const starts = (() => {
     if (timing.length >= words.length) return timing.slice(0, words.length);
     const last = timing.length ? timing[timing.length - 1] : 0;
@@ -1695,13 +1871,13 @@ var KineticTypography = ({
   }
   const word = words[activeIndex];
   const start = starts[activeIndex] ?? 0;
-  const p = (0, import_remotion25.spring)({ frame: frame - start, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const p = (0, import_remotion22.spring)({ frame: frame - start, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
   const progress = Math.max(0, Math.min(1, p));
   const scaleBase = word.emphasis === "giant" ? 2 : word.emphasis === "bold" ? 1.3 : 1;
   const opacity = transition === "fade" ? progress : 1;
   const scale = transition === "scale" ? (0.85 + 0.15 * progress) * scaleBase : 1 * scaleBase;
   const tx = transition === "slideLeft" ? 40 * (1 - progress) : transition === "slideRight" ? -40 * (1 - progress) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_remotion25.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       style: {
@@ -1726,17 +1902,17 @@ var KineticTypographyComponentMetadata = {
 };
 // src/components/composites/LineGraph.tsx
-var import_remotion26 = require("remotion");
-var import_zod29 = require("zod");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var PointSchema = import_zod29.z.object({ x: import_zod29.z.number(), y: import_zod29.z.number() });
-var LineGraphPropsSchema = import_zod29.z.object({
-  data: import_zod29.z.array(PointSchema).min(2).max(50),
-  color: import_zod29.z.string().default("#00FF00"),
-  strokeWidth: import_zod29.z.number().min(1).max(10).default(3),
-  showDots: import_zod29.z.boolean().default(true),
-  fillArea: import_zod29.z.boolean().default(false),
-  animate: import_zod29.z.enum(["draw", "reveal"]).default("draw")
+var import_remotion23 = require("remotion");
+var import_zod32 = require("zod");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var PointSchema = import_zod32.z.object({ x: import_zod32.z.number(), y: import_zod32.z.number() });
+var LineGraphPropsSchema = import_zod32.z.object({
+  data: import_zod32.z.array(PointSchema).min(2).max(50),
+  color: import_zod32.z.string().default("#00FF00"),
+  strokeWidth: import_zod32.z.number().min(1).max(10).default(3),
+  showDots: import_zod32.z.boolean().default(true),
+  fillArea: import_zod32.z.boolean().default(false),
+  animate: import_zod32.z.enum(["draw", "reveal"]).default("draw")
 });
 function normalize(data, w, h, pad) {
   const xs = data.map((d) => d.x);
@@ -1762,9 +1938,9 @@ var LineGraph = ({
   animate,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion26.useCurrentFrame)();
+  const frame = (0, import_remotion23.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const progress = (0, import_remotion26.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const progress = (0, import_remotion23.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const w = 1e3;
   const h = 520;
   const pad = 30;
@@ -1772,9 +1948,9 @@ var LineGraph = ({
   const d = toPath(pts);
   const dash = 3e3;
   const dashOffset = dash * (1 - progress);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_remotion26.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("clipPath", { id: "waves-line-reveal", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("rect", { x: "0", y: "0", width: w * progress, height: h }) }) }),
-    fillArea ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { viewBox: `0 0 ${w} ${h}`, style: { width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("clipPath", { id: "waves-line-reveal", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: "0", y: "0", width: w * progress, height: h }) }) }),
+    fillArea ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "path",
       {
         d: `${d} L ${pts[pts.length - 1].x} ${h - pad} L ${pts[0].x} ${h - pad} Z`,
@@ -1783,7 +1959,7 @@ var LineGraph = ({
         clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "path",
       {
         d,
@@ -1797,7 +1973,7 @@ var LineGraph = ({
         clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0
       }
     ),
-    showDots ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("g", { clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0, children: pts.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: p.x, cy: p.y, r: 6, fill: color }, i)) }) : null
+    showDots ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", { clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0, children: pts.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: p.x, cy: p.y, r: 6, fill: color }, i)) }) : null
   ] }) });
 };
 var LineGraphComponentMetadata = {
@@ -1808,28 +1984,28 @@ var LineGraphComponentMetadata = {
 };
 // src/components/composites/LogoReveal.tsx
-var import_remotion27 = require("remotion");
-var import_zod30 = require("zod");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var LogoRevealPropsSchema = import_zod30.z.object({
-  logoSrc: import_zod30.z.string().min(1),
-  effect: import_zod30.z.enum(["fade", "scale", "rotate", "slide"]).default("scale"),
-  backgroundColor: import_zod30.z.string().default("#000000"),
-  soundEffect: import_zod30.z.string().optional()
+var import_remotion24 = require("remotion");
+var import_zod33 = require("zod");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var LogoRevealPropsSchema = import_zod33.z.object({
+  logoSrc: import_zod33.z.string().min(1),
+  effect: import_zod33.z.enum(["fade", "scale", "rotate", "slide"]).default("scale"),
+  backgroundColor: import_zod33.z.string().default("#000000"),
+  soundEffect: import_zod33.z.string().optional()
 });
-var resolveAsset11 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion27.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset11 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion24.staticFile)(staticFileInputFromAssetPath(value));
 var LogoReveal = ({ logoSrc, effect, backgroundColor, soundEffect }) => {
-  const frame = (0, import_remotion27.useCurrentFrame)();
-  const { fps } = (0, import_remotion27.useVideoConfig)();
-  const p = (0, import_remotion27.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } });
+  const frame = (0, import_remotion24.useCurrentFrame)();
+  const { fps } = (0, import_remotion24.useVideoConfig)();
+  const p = (0, import_remotion24.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } });
   const opacity = effect === "fade" ? p : Math.min(1, Math.max(0, p));
   const scale = effect === "scale" ? p : 1;
   const rotate = effect === "rotate" ? (1 - p) * 360 : 0;
   const translateY = effect === "slide" ? -200 * (1 - p) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_remotion27.AbsoluteFill, { style: { backgroundColor, justifyContent: "center", alignItems: "center" }, children: [
-    soundEffect ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_remotion27.Audio, { src: resolveAsset11(soundEffect), volume: 1 }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-      import_remotion27.Img,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+    soundEffect ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_remotion24.Audio, { src: resolveAsset11(soundEffect), volume: 1 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_remotion24.Img,
       {
         src: resolveAsset11(logoSrc),
         style: {
@@ -1851,32 +2027,32 @@ var LogoRevealComponentMetadata = {
 };
 // src/components/composites/OutroScene.tsx
-var import_remotion28 = require("remotion");
-var import_zod31 = require("zod");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var CtaSchema = import_zod31.z.object({ text: import_zod31.z.string().min(1), icon: import_zod31.z.string().optional() });
-var HandleSchema = import_zod31.z.object({
-  platform: import_zod31.z.enum(["twitter", "instagram", "youtube", "linkedin"]),
-  handle: import_zod31.z.string().min(1)
+var import_remotion25 = require("remotion");
+var import_zod34 = require("zod");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var CtaSchema = import_zod34.z.object({ text: import_zod34.z.string().min(1), icon: import_zod34.z.string().optional() });
+var HandleSchema = import_zod34.z.object({
+  platform: import_zod34.z.enum(["twitter", "instagram", "youtube", "linkedin"]),
+  handle: import_zod34.z.string().min(1)
 });
-var OutroScenePropsSchema = import_zod31.z.object({
-  logoSrc: import_zod31.z.string().min(1),
-  message: import_zod31.z.string().default("Thank You"),
-  ctaButtons: import_zod31.z.array(CtaSchema).max(3).optional(),
-  socialHandles: import_zod31.z.array(HandleSchema).max(4).optional(),
-  backgroundColor: import_zod31.z.string().default("#000000")
+var OutroScenePropsSchema = import_zod34.z.object({
+  logoSrc: import_zod34.z.string().min(1),
+  message: import_zod34.z.string().default("Thank You"),
+  ctaButtons: import_zod34.z.array(CtaSchema).max(3).optional(),
+  socialHandles: import_zod34.z.array(HandleSchema).max(4).optional(),
+  backgroundColor: import_zod34.z.string().default("#000000")
 });
-var resolveAsset12 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion28.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset12 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion25.staticFile)(staticFileInputFromAssetPath(value));
 var OutroScene = ({ logoSrc, message, ctaButtons, socialHandles, backgroundColor }) => {
-  const frame = (0, import_remotion28.useCurrentFrame)();
-  const { fps } = (0, import_remotion28.useVideoConfig)();
-  const logoP = (0, import_remotion28.spring)({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
-  const msgP = (0, import_remotion28.spring)({ frame: frame - 18, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
-  const ctaP = (0, import_remotion28.spring)({ frame: frame - 40, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_remotion28.AbsoluteFill, { style: { backgroundColor, justifyContent: "center", alignItems: "center", padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { textAlign: "center" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_remotion28.Img, { src: resolveAsset12(logoSrc), style: { width: 220, height: 220, objectFit: "contain", transform: `scale(${logoP})` } }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: { marginTop: 24, color: "#FFFFFF", fontSize: 72, fontWeight: 1e3, opacity: msgP }, children: message }),
-    ctaButtons?.length ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: { marginTop: 34, display: "flex", gap: 18, justifyContent: "center", opacity: ctaP }, children: ctaButtons.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  const frame = (0, import_remotion25.useCurrentFrame)();
+  const { fps } = (0, import_remotion25.useVideoConfig)();
+  const logoP = (0, import_remotion25.spring)({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const msgP = (0, import_remotion25.spring)({ frame: frame - 18, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const ctaP = (0, import_remotion25.spring)({ frame: frame - 40, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center", padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { textAlign: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_remotion25.Img, { src: resolveAsset12(logoSrc), style: { width: 220, height: 220, objectFit: "contain", transform: `scale(${logoP})` } }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { marginTop: 24, color: "#FFFFFF", fontSize: 72, fontWeight: 1e3, opacity: msgP }, children: message }),
+    ctaButtons?.length ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { marginTop: 34, display: "flex", gap: 18, justifyContent: "center", opacity: ctaP }, children: ctaButtons.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "div",
       {
         style: {
@@ -1894,7 +2070,7 @@ var OutroScene = ({ logoSrc, message, ctaButtons, socialHandles, backgroundColor
       },
       i
     )) }) : null,
-    socialHandles?.length ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: { marginTop: 50, display: "flex", flexDirection: "column", gap: 10, opacity: ctaP }, children: socialHandles.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { color: "rgba(255,255,255,0.85)", fontSize: 26, fontWeight: 800 }, children: [
+    socialHandles?.length ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { marginTop: 50, display: "flex", flexDirection: "column", gap: 10, opacity: ctaP }, children: socialHandles.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { color: "rgba(255,255,255,0.85)", fontSize: 26, fontWeight: 800 }, children: [
       h.platform,
       ": ",
       h.handle
@@ -1909,19 +2085,19 @@ var OutroSceneComponentMetadata = {
 };
 // src/components/composites/OutlineText.tsx
-var import_remotion29 = require("remotion");
-var import_zod32 = require("zod");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var OutlineTextPropsSchema = import_zod32.z.object({
-  content: import_zod32.z.string().max(50),
-  fontSize: import_zod32.z.number().min(8).max(240).default(96),
-  outlineColor: import_zod32.z.string().default("#FFFFFF"),
-  fillColor: import_zod32.z.string().default("#000000"),
-  fontFamily: import_zod32.z.string().default("Inter"),
-  fontWeight: import_zod32.z.number().int().min(100).max(900).default(800),
-  position: import_zod32.z.enum(["top", "center", "bottom"]).default("center"),
-  animation: import_zod32.z.enum(["draw", "fill"]).default("draw"),
-  strokeWidth: import_zod32.z.number().min(1).max(10).default(3)
+var import_remotion26 = require("remotion");
+var import_zod35 = require("zod");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var OutlineTextPropsSchema = import_zod35.z.object({
+  content: import_zod35.z.string().max(50),
+  fontSize: import_zod35.z.number().min(8).max(240).default(96),
+  outlineColor: import_zod35.z.string().default("#FFFFFF"),
+  fillColor: import_zod35.z.string().default("#000000"),
+  fontFamily: import_zod35.z.string().default("Inter"),
+  fontWeight: import_zod35.z.number().int().min(100).max(900).default(800),
+  position: import_zod35.z.enum(["top", "center", "bottom"]).default("center"),
+  animation: import_zod35.z.enum(["draw", "fill"]).default("draw"),
+  strokeWidth: import_zod35.z.number().min(1).max(10).default(3)
 });
 var positionStyles3 = (position) => {
   if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
@@ -1939,12 +2115,12 @@ var OutlineText = ({
   animation,
   strokeWidth
 }) => {
-  const frame = (0, import_remotion29.useCurrentFrame)();
-  const t = (0, import_remotion29.interpolate)(frame, [0, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const frame = (0, import_remotion26.useCurrentFrame)();
+  const t = (0, import_remotion26.interpolate)(frame, [0, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const strokeOpacity = animation === "draw" ? t : 1;
   const fillOpacity = animation === "fill" ? t : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_remotion29.AbsoluteFill, { style: { display: "flex", ...positionStyles3(position) }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Fill, { style: { display: "flex", ...positionStyles3(position) }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "div",
       {
         style: {
@@ -1961,7 +2137,7 @@ var OutlineText = ({
         children: content
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "div",
       {
         style: {
@@ -1988,16 +2164,16 @@ var OutlineTextComponentMetadata = {
 };
 // src/components/composites/ProgressBar.tsx
-var import_remotion30 = require("remotion");
-var import_zod33 = require("zod");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var ProgressBarPropsSchema = import_zod33.z.object({
-  label: import_zod33.z.string().optional(),
-  color: import_zod33.z.string().default("#00FF00"),
-  backgroundColor: import_zod33.z.string().default("rgba(255,255,255,0.2)"),
-  height: import_zod33.z.number().min(5).max(50).default(10),
-  position: import_zod33.z.enum(["top", "bottom"]).default("bottom"),
-  showPercentage: import_zod33.z.boolean().default(true)
+var import_remotion27 = require("remotion");
+var import_zod36 = require("zod");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var ProgressBarPropsSchema = import_zod36.z.object({
+  label: import_zod36.z.string().optional(),
+  color: import_zod36.z.string().default("#00FF00"),
+  backgroundColor: import_zod36.z.string().default("rgba(255,255,255,0.2)"),
+  height: import_zod36.z.number().min(5).max(50).default(10),
+  position: import_zod36.z.enum(["top", "bottom"]).default("bottom"),
+  showPercentage: import_zod36.z.boolean().default(true)
 });
 var ProgressBar = ({
   label,
@@ -2008,17 +2184,17 @@ var ProgressBar = ({
   showPercentage,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion30.useCurrentFrame)();
+  const frame = (0, import_remotion27.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const p = (0, import_remotion30.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const p = (0, import_remotion27.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const pct = Math.round(p * 100);
   const yStyle = position === "top" ? { top: 50 } : { bottom: 50 };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_remotion30.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { position: "absolute", left: 80, right: 80, ...yStyle }, children: [
-    label || showPercentage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 10, color: "#FFFFFF", fontWeight: 700 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: label ?? "" }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: showPercentage ? `${pct}%` : "" })
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { position: "absolute", left: 80, right: 80, ...yStyle }, children: [
+    label || showPercentage ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 10, color: "#FFFFFF", fontWeight: 700 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: label ?? "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: showPercentage ? `${pct}%` : "" })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { width: "100%", height, backgroundColor, borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { width: `${pct}%`, height: "100%", backgroundColor: color } }) })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: { width: "100%", height, backgroundColor, borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: { width: `${pct}%`, height: "100%", backgroundColor: color } }) })
   ] }) });
 };
 var ProgressBarComponentMetadata = {
@@ -2029,16 +2205,16 @@ var ProgressBarComponentMetadata = {
 };
 // src/components/composites/ProgressRing.tsx
-var import_remotion31 = require("remotion");
-var import_zod34 = require("zod");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var ProgressRingPropsSchema = import_zod34.z.object({
-  percentage: import_zod34.z.number().min(0).max(100),
-  size: import_zod34.z.number().min(100).max(500).default(200),
-  strokeWidth: import_zod34.z.number().min(5).max(50).default(20),
-  color: import_zod34.z.string().default("#00FF00"),
-  backgroundColor: import_zod34.z.string().default("rgba(255,255,255,0.2)"),
-  showLabel: import_zod34.z.boolean().default(true)
+var import_remotion28 = require("remotion");
+var import_zod37 = require("zod");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var ProgressRingPropsSchema = import_zod37.z.object({
+  percentage: import_zod37.z.number().min(0).max(100),
+  size: import_zod37.z.number().min(100).max(500).default(200),
+  strokeWidth: import_zod37.z.number().min(5).max(50).default(20),
+  color: import_zod37.z.string().default("#00FF00"),
+  backgroundColor: import_zod37.z.string().default("rgba(255,255,255,0.2)"),
+  showLabel: import_zod37.z.boolean().default(true)
 });
 var ProgressRing = ({
   percentage,
@@ -2049,17 +2225,17 @@ var ProgressRing = ({
   showLabel,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion31.useCurrentFrame)();
+  const frame = (0, import_remotion28.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const p = (0, import_remotion31.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const p = (0, import_remotion28.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const current = percentage * p;
   const r = (size - strokeWidth) / 2;
   const c = 2 * Math.PI * r;
   const dash = c;
   const offset = c - current / 100 * c;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_remotion31.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "circle",
         {
           cx: size / 2,
@@ -2070,7 +2246,7 @@ var ProgressRing = ({
           fill: "transparent"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "circle",
         {
           cx: size / 2,
@@ -2086,7 +2262,7 @@ var ProgressRing = ({
         }
       )
     ] }),
-    showLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: { position: "absolute", color: "#FFFFFF", fontWeight: 800, fontSize: Math.round(size * 0.22) }, children: [
+    showLabel ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { position: "absolute", color: "#FFFFFF", fontWeight: 800, fontSize: Math.round(size * 0.22) }, children: [
       Math.round(current),
       "%"
     ] }) : null
@@ -2100,14 +2276,15 @@ var ProgressRingComponentMetadata = {
 };
 // src/components/composites/SlideTransition.tsx
-var import_remotion32 = require("remotion");
-var import_zod35 = require("zod");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var SlideTransitionPropsSchema = import_zod35.z.object({
-  durationInFrames: import_zod35.z.number().int().min(10).max(60).default(30),
-  direction: import_zod35.z.enum(["left", "right", "up", "down"]).default("left"),
-  distance: import_zod35.z.number().int().min(1).max(2e3).default(160),
-  phase: import_zod35.z.enum(["in", "out", "inOut"]).default("inOut")
+var import_react8 = __toESM(require("react"));
+var import_remotion29 = require("remotion");
+var import_zod38 = require("zod");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var SlideTransitionPropsSchema = import_zod38.z.object({
+  durationInFrames: import_zod38.z.number().int().min(10).max(60).default(30),
+  direction: import_zod38.z.enum(["left", "right", "up", "down"]).default("left"),
+  distance: import_zod38.z.number().int().min(1).max(2e3).default(160),
+  phase: import_zod38.z.enum(["in", "out", "inOut"]).default("inOut")
 });
 function translateFor(direction, delta) {
   if (direction === "left") return { x: -delta, y: 0 };
@@ -2123,29 +2300,30 @@ var SlideTransition = ({
   children,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion32.useCurrentFrame)();
+  const layers = import_react8.default.Children.toArray(children);
+  const frame = (0, import_remotion29.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
   let opacity = 1;
   let tx = 0;
   let ty = 0;
   if (phase === "in" || phase === "inOut") {
-    const t = (0, import_remotion32.interpolate)(frame, [0, d], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion29.interpolate)(frame, [0, d], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     const { x, y } = translateFor(direction, distance * t);
     tx += x;
     ty += y;
-    opacity *= (0, import_remotion32.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    opacity *= (0, import_remotion29.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   }
   if (phase === "out" || phase === "inOut") {
     const start = Math.max(0, total - d);
-    const t = (0, import_remotion32.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion29.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     const opposite = direction === "left" ? "right" : direction === "right" ? "left" : direction === "up" ? "down" : "up";
     const { x, y } = translateFor(opposite, distance * t);
     tx += x;
     ty += y;
-    opacity *= (0, import_remotion32.interpolate)(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    opacity *= (0, import_remotion29.interpolate)(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_remotion32.AbsoluteFill, { style: { opacity, transform: `translate(${tx}px, ${ty}px)` }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Fill, { style: { opacity, transform: `translate(${tx}px, ${ty}px)` }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var SlideTransitionComponentMetadata = {
   kind: "composite",
@@ -2157,16 +2335,15 @@ var SlideTransitionComponentMetadata = {
 };
 // src/components/composites/SplitScreen.tsx
-var import_react2 = __toESM(require("react"));
-var import_remotion33 = require("remotion");
-var import_zod36 = require("zod");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var SplitScreenPropsSchema = import_zod36.z.object({
-  orientation: import_zod36.z.enum(["vertical", "horizontal"]).default("vertical"),
-  split: import_zod36.z.number().min(0.1).max(0.9).default(0.5),
-  gap: import_zod36.z.number().min(0).default(48),
-  padding: import_zod36.z.number().min(0).default(80),
-  dividerColor: import_zod36.z.string().optional()
+var import_react9 = __toESM(require("react"));
+var import_zod39 = require("zod");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var SplitScreenPropsSchema = import_zod39.z.object({
+  orientation: import_zod39.z.enum(["vertical", "horizontal"]).default("vertical"),
+  split: import_zod39.z.number().min(0.1).max(0.9).default(0.5),
+  gap: import_zod39.z.number().min(0).default(48),
+  padding: import_zod39.z.number().min(0).default(80),
+  dividerColor: import_zod39.z.string().optional()
 });
 var SplitScreen = ({
   orientation,
@@ -2176,14 +2353,14 @@ var SplitScreen = ({
   dividerColor,
   children
 }) => {
-  const items = import_react2.default.Children.toArray(children);
+  const items = import_react9.default.Children.toArray(children);
   const first = items[0] ?? null;
   const second = items[1] ?? null;
   const isVertical = orientation === "vertical";
   const flexDirection = isVertical ? "row" : "column";
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_remotion33.AbsoluteFill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { style: { display: "flex", flexDirection, gap, width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { style: { flex: split, position: "relative" }, children: first }),
-    dividerColor ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Fill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { display: "flex", flexDirection, gap, width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { flex: split, position: "relative" }, children: first }),
+    dividerColor ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "div",
       {
         style: {
@@ -2194,7 +2371,7 @@ var SplitScreen = ({
         }
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { style: { flex: 1 - split, position: "relative" }, children: second })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { flex: 1 - split, position: "relative" }, children: second })
   ] }) });
 };
 var SplitScreenComponentMetadata = {
@@ -2208,22 +2385,25 @@ var SplitScreenComponentMetadata = {
 };
 // src/components/composites/SplitText.tsx
-var import_remotion34 = require("remotion");
-var import_zod37 = require("zod");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var SplitTextPropsSchema = import_zod37.z.object({
-  content: import_zod37.z.string().max(200),
-  fontSize: import_zod37.z.number().min(8).max(200).default(48),
-  color: import_zod37.z.string().default("#FFFFFF"),
-  fontFamily: import_zod37.z.string().default("Inter"),
-  position: import_zod37.z.enum(["top", "center", "bottom"]).default("center"),
-  splitBy: import_zod37.z.enum(["word", "letter"]).default("word"),
-  stagger: import_zod37.z.number().int().min(1).max(10).default(3),
-  animation: import_zod37.z.enum(["fade", "slideUp", "slideDown", "scale", "rotate"]).default("slideUp")
+var import_remotion30 = require("remotion");
+var import_zod40 = require("zod");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var SplitTextPropsSchema = import_zod40.z.object({
+  content: import_zod40.z.string().max(200),
+  fontSize: import_zod40.z.number().min(8).max(200).default(48),
+  color: import_zod40.z.string().default("#FFFFFF"),
+  fontFamily: import_zod40.z.string().default("Inter"),
+  position: import_zod40.z.enum(["top", "center", "bottom"]).default("center"),
+  splitBy: import_zod40.z.enum(["word", "letter"]).default("word"),
+  stagger: import_zod40.z.number().int().min(1).max(10).default(3),
+  animation: import_zod40.z.enum(["fade", "slideUp", "slideDown", "scale", "rotate"]).default("slideUp"),
+  maxWidthPct: import_zod40.z.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: import_zod40.z.number().min(0).max(0.25).default(0.06)
 });
-var positionStyles4 = (position) => {
-  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) {
@@ -2250,12 +2430,14 @@ var SplitText = ({
   position,
   splitBy,
   stagger,
-  animation
+  animation,
+  maxWidthPct,
+  safeInsetPct
 }) => {
-  const frame = (0, import_remotion34.useCurrentFrame)();
-  const { fps } = (0, import_remotion34.useVideoConfig)();
+  const frame = (0, import_remotion30.useCurrentFrame)();
+  const { fps } = (0, import_remotion30.useVideoConfig)();
   const items = splitBy === "letter" ? content.split("") : content.trim().split(/\s+/);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_remotion34.AbsoluteFill, { style: { display: "flex", ...positionStyles4(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Fill, { style: { display: "flex", ...positionStyles4(position, safeInsetPct) }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
       style: {
@@ -2263,19 +2445,22 @@ 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 = (0, import_remotion34.spring)({
+        const progress = (0, import_remotion30.spring)({
           frame: frame - i * stagger,
           fps,
           config: { damping: 14, stiffness: 120, mass: 0.9 }
         });
-        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "span",
           {
             style: {
@@ -2303,19 +2488,19 @@ var SplitTextComponentMetadata = {
 };
 // src/components/composites/SubtitleText.tsx
-var import_remotion35 = require("remotion");
-var import_zod38 = require("zod");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var SubtitleTextPropsSchema = import_zod38.z.object({
-  text: import_zod38.z.string().max(200),
-  fontSize: import_zod38.z.number().min(12).max(80).default(36),
-  color: import_zod38.z.string().default("#FFFFFF"),
-  backgroundColor: import_zod38.z.string().default("rgba(0,0,0,0.7)"),
-  fontFamily: import_zod38.z.string().default("Inter"),
-  position: import_zod38.z.enum(["top", "bottom"]).default("bottom"),
-  maxWidth: import_zod38.z.number().min(200).max(1200).default(800),
-  padding: import_zod38.z.number().min(0).max(80).default(20),
-  highlightWords: import_zod38.z.array(import_zod38.z.string()).optional()
+var import_remotion31 = require("remotion");
+var import_zod41 = require("zod");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var SubtitleTextPropsSchema = import_zod41.z.object({
+  text: import_zod41.z.string().max(200),
+  fontSize: import_zod41.z.number().min(12).max(80).default(36),
+  color: import_zod41.z.string().default("#FFFFFF"),
+  backgroundColor: import_zod41.z.string().default("rgba(0,0,0,0.7)"),
+  fontFamily: import_zod41.z.string().default("Inter"),
+  position: import_zod41.z.enum(["top", "bottom"]).default("bottom"),
+  maxWidth: import_zod41.z.number().min(200).max(1200).default(800),
+  padding: import_zod41.z.number().min(0).max(80).default(20),
+  highlightWords: import_zod41.z.array(import_zod41.z.string()).optional()
 });
 function normalizeWord(w) {
   return w.toLowerCase().replace(/[^a-z0-9]/g, "");
@@ -2332,15 +2517,15 @@ var SubtitleText = ({
   highlightWords,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion35.useCurrentFrame)();
+  const frame = (0, import_remotion31.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const inFade = (0, import_remotion35.interpolate)(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const outFade = (0, import_remotion35.interpolate)(frame, [Math.max(0, total - 10), total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const inFade = (0, import_remotion31.interpolate)(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const outFade = (0, import_remotion31.interpolate)(frame, [Math.max(0, total - 10), total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const opacity = inFade * outFade;
   const highlights = new Set((highlightWords ?? []).map(normalizeWord));
   const tokens = text.split(/\s+/);
   const yStyle = position === "top" ? { top: 70 } : { bottom: 90 };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_remotion35.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { position: "absolute", left: "50%", transform: "translateX(-50%)", maxWidth, width: "100%", ...yStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { position: "absolute", left: "50%", transform: "translateX(-50%)", maxWidth, width: "100%", ...yStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       style: {
@@ -2359,7 +2544,7 @@ var SubtitleText = ({
       children: tokens.map((t, i) => {
         const n = normalizeWord(t);
         const isHighlighted = highlights.has(n);
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { style: { color: isHighlighted ? "#FFD60A" : color, marginRight: 8 }, children: t }, i);
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { style: { color: isHighlighted ? "#FFD60A" : color, marginRight: 8 }, children: t }, i);
       })
     }
   ) }) });
@@ -2372,17 +2557,19 @@ var SubtitleTextComponentMetadata = {
 };
 // src/components/composites/TikTokCaption.tsx
-var import_remotion36 = require("remotion");
-var import_zod39 = require("zod");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var TikTokCaptionPropsSchema = import_zod39.z.object({
-  text: import_zod39.z.string().max(150),
-  fontSize: import_zod39.z.number().min(12).max(120).default(48),
-  color: import_zod39.z.string().default("#FFFFFF"),
-  strokeColor: import_zod39.z.string().default("#000000"),
-  strokeWidth: import_zod39.z.number().min(0).max(10).default(3),
-  position: import_zod39.z.enum(["center", "bottom"]).default("center"),
-  highlightStyle: import_zod39.z.enum(["word", "bounce", "none"]).default("word")
+var import_remotion32 = require("remotion");
+var import_zod42 = require("zod");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var TikTokCaptionPropsSchema = import_zod42.z.object({
+  text: import_zod42.z.string().max(150),
+  fontSize: import_zod42.z.number().min(12).max(120).default(48),
+  color: import_zod42.z.string().default("#FFFFFF"),
+  strokeColor: import_zod42.z.string().default("#000000"),
+  strokeWidth: import_zod42.z.number().min(0).max(10).default(3),
+  position: import_zod42.z.enum(["center", "bottom"]).default("center"),
+  highlightStyle: import_zod42.z.enum(["word", "bounce", "none"]).default("word"),
+  maxWidthPct: import_zod42.z.number().min(0.1).max(1).default(0.92),
+  safeInsetPct: import_zod42.z.number().min(0).max(0.25).default(0.06)
 });
 var TikTokCaption = ({
   text,
@@ -2392,18 +2579,21 @@ var TikTokCaption = ({
   strokeWidth,
   position,
   highlightStyle,
+  maxWidthPct,
+  safeInsetPct,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion36.useCurrentFrame)();
+  const frame = (0, import_remotion32.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const p = (0, import_remotion36.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const p = (0, import_remotion32.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const words = text.trim().split(/\s+/);
   const idx = highlightStyle === "none" ? -1 : Math.min(words.length - 1, Math.floor(p * words.length));
-  const yStyle = position === "bottom" ? { alignItems: "flex-end", paddingBottom: 140 } : { alignItems: "center" };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_remotion36.AbsoluteFill, { style: { display: "flex", justifyContent: "center", ...yStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { textAlign: "center", padding: "0 80px", fontWeight: 900, lineHeight: 1.1 }, children: words.map((w, i) => {
+  const inset = `${(safeInsetPct * 100).toFixed(2)}%`;
+  const yStyle = position === "bottom" ? { alignItems: "flex-end", paddingBottom: inset } : { alignItems: "center" };
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Fill, { style: { display: "flex", justifyContent: "center", ...yStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: { textAlign: "center", paddingLeft: inset, paddingRight: inset, maxWidth: `${Math.round(maxWidthPct * 100)}%`, fontWeight: 900, lineHeight: 1.1, overflowWrap: "anywhere", wordBreak: "break-word" }, children: words.map((w, i) => {
     const isActive = i === idx && highlightStyle !== "none";
-    const bounce = isActive && highlightStyle === "bounce" ? (0, import_remotion36.interpolate)(frame % 18, [0, 9, 18], [1, 1.08, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) : 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    const bounce = isActive && highlightStyle === "bounce" ? (0, import_remotion32.interpolate)(frame % 18, [0, 9, 18], [1, 1.08, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) : 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "span",
       {
         style: {
@@ -2428,20 +2618,20 @@ var TikTokCaptionComponentMetadata = {
 };
 // src/components/composites/ThirdLowerBanner.tsx
-var import_remotion37 = require("remotion");
-var import_zod40 = require("zod");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var ThirdLowerBannerPropsSchema = import_zod40.z.object({
-  name: import_zod40.z.string().max(50),
-  title: import_zod40.z.string().max(100),
-  backgroundColor: import_zod40.z.string().default("rgba(0,0,0,0.8)"),
-  primaryColor: import_zod40.z.string().default("#FFFFFF"),
-  secondaryColor: import_zod40.z.string().default("#CCCCCC"),
-  accentColor: import_zod40.z.string().default("#FF0000"),
-  showAvatar: import_zod40.z.boolean().default(false),
-  avatarSrc: import_zod40.z.string().optional()
+var import_remotion33 = require("remotion");
+var import_zod43 = require("zod");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var ThirdLowerBannerPropsSchema = import_zod43.z.object({
+  name: import_zod43.z.string().max(50),
+  title: import_zod43.z.string().max(100),
+  backgroundColor: import_zod43.z.string().default("rgba(0,0,0,0.8)"),
+  primaryColor: import_zod43.z.string().default("#FFFFFF"),
+  secondaryColor: import_zod43.z.string().default("#CCCCCC"),
+  accentColor: import_zod43.z.string().default("#FF0000"),
+  showAvatar: import_zod43.z.boolean().default(false),
+  avatarSrc: import_zod43.z.string().optional()
 });
-var resolveAsset13 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion37.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset13 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion33.staticFile)(staticFileInputFromAssetPath(value));
 var ThirdLowerBanner = ({
   name,
   title,
@@ -2452,11 +2642,11 @@ var ThirdLowerBanner = ({
   showAvatar,
   avatarSrc
 }) => {
-  const frame = (0, import_remotion37.useCurrentFrame)();
-  const slide = (0, import_remotion37.interpolate)(frame, [0, 18], [-600, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const opacity = (0, import_remotion37.interpolate)(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const frame = (0, import_remotion33.useCurrentFrame)();
+  const slide = (0, import_remotion33.interpolate)(frame, [0, 18], [-600, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const opacity = (0, import_remotion33.interpolate)(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const avatar = showAvatar && typeof avatarSrc === "string" && avatarSrc.length > 0 ? avatarSrc : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_remotion37.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
       style: {
@@ -2473,17 +2663,17 @@ var ThirdLowerBanner = ({
         backgroundColor
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { width: 10, backgroundColor: accentColor } }),
-        avatar ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { width: 160, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          import_remotion37.Img,
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { style: { width: 10, backgroundColor: accentColor } }),
+        avatar ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { style: { width: 160, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_remotion33.Img,
           {
             src: resolveAsset13(avatar),
             style: { width: 110, height: 110, borderRadius: 9999, objectFit: "cover" }
           }
         ) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { padding: "28px 36px", display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { color: primaryColor, fontSize: 54, fontWeight: 800, lineHeight: 1 }, children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { marginTop: 10, color: secondaryColor, fontSize: 28, fontWeight: 600 }, children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { style: { padding: "28px 36px", display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { style: { color: primaryColor, fontSize: 54, fontWeight: 800, lineHeight: 1 }, children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { style: { marginTop: 10, color: secondaryColor, fontSize: 28, fontWeight: 600 }, children: title })
         ] })
       ]
     }
@@ -2501,22 +2691,25 @@ var ThirdLowerBannerComponentMetadata = {
 };
 // src/components/composites/TypewriterText.tsx
-var import_remotion38 = require("remotion");
-var import_zod41 = require("zod");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var TypewriterTextPropsSchema = import_zod41.z.object({
-  content: import_zod41.z.string().max(500),
-  fontSize: import_zod41.z.number().min(8).max(200).default(48),
-  color: import_zod41.z.string().default("#FFFFFF"),
-  fontFamily: import_zod41.z.string().default("Inter"),
-  position: import_zod41.z.enum(["top", "center", "bottom"]).default("center"),
-  speed: import_zod41.z.number().min(0.5).max(5).default(2),
-  showCursor: import_zod41.z.boolean().default(true),
-  cursorColor: import_zod41.z.string().default("#FFFFFF")
+var import_remotion34 = require("remotion");
+var import_zod44 = require("zod");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var TypewriterTextPropsSchema = import_zod44.z.object({
+  content: import_zod44.z.string().max(500),
+  fontSize: import_zod44.z.number().min(8).max(200).default(48),
+  color: import_zod44.z.string().default("#FFFFFF"),
+  fontFamily: import_zod44.z.string().default("Inter"),
+  position: import_zod44.z.enum(["top", "center", "bottom"]).default("center"),
+  speed: import_zod44.z.number().min(0.5).max(5).default(2),
+  showCursor: import_zod44.z.boolean().default(true),
+  cursorColor: import_zod44.z.string().default("#FFFFFF"),
+  maxWidthPct: import_zod44.z.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: import_zod44.z.number().min(0).max(0.25).default(0.06)
 });
-var positionStyles5 = (position) => {
-  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 = ({
@@ -2527,17 +2720,19 @@ var TypewriterText = ({
   position,
   speed,
   showCursor,
-  cursorColor
+  cursorColor,
+  maxWidthPct,
+  safeInsetPct
 }) => {
-  const frame = (0, import_remotion38.useCurrentFrame)();
+  const frame = (0, import_remotion34.useCurrentFrame)();
   const charCount = Math.min(content.length, Math.max(0, Math.floor(frame * speed)));
   const shown = content.slice(0, charCount);
   const cursorVisible = showCursor && charCount < content.length ? frame % 30 < 15 : false;
   const cursorOpacity = cursorVisible ? 1 : 0;
-  const cursorFade = (0, import_remotion38.interpolate)(frame % 30, [0, 5], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_remotion38.AbsoluteFill, { style: { display: "flex", ...positionStyles5(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: { fontSize, color, fontFamily, fontWeight: 600, textAlign: "center", whiteSpace: "pre-wrap" }, children: [
+  const cursorFade = (0, import_remotion34.interpolate)(frame % 30, [0, 5], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Fill, { style: { display: "flex", ...positionStyles5(position, safeInsetPct) }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: { fontSize, color, fontFamily, fontWeight: 600, textAlign: "center", whiteSpace: "pre-wrap", maxWidth: `${Math.round(maxWidthPct * 100)}%`, overflowWrap: "anywhere", wordBreak: "break-word" }, children: [
     shown,
-    showCursor ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { style: { color: cursorColor, opacity: cursorOpacity * cursorFade }, children: "|" }) : null
+    showCursor ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { style: { color: cursorColor, opacity: cursorOpacity * cursorFade }, children: "|" }) : null
   ] }) });
 };
 var TypewriterTextComponentMetadata = {
@@ -2552,21 +2747,21 @@ var TypewriterTextComponentMetadata = {
 };
 // src/components/composites/TwitterCard.tsx
-var import_remotion39 = require("remotion");
-var import_zod42 = require("zod");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var TwitterCardPropsSchema = import_zod42.z.object({
-  author: import_zod42.z.string().min(1),
-  handle: import_zod42.z.string().min(1),
-  avatarSrc: import_zod42.z.string().optional(),
-  tweet: import_zod42.z.string().max(280),
-  image: import_zod42.z.string().optional(),
-  timestamp: import_zod42.z.string().optional(),
-  verified: import_zod42.z.boolean().default(false)
+var import_remotion35 = require("remotion");
+var import_zod45 = require("zod");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var TwitterCardPropsSchema = import_zod45.z.object({
+  author: import_zod45.z.string().min(1),
+  handle: import_zod45.z.string().min(1),
+  avatarSrc: import_zod45.z.string().optional(),
+  tweet: import_zod45.z.string().max(280),
+  image: import_zod45.z.string().optional(),
+  timestamp: import_zod45.z.string().optional(),
+  verified: import_zod45.z.boolean().default(false)
 });
-var resolveAsset14 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion39.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset14 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion35.staticFile)(staticFileInputFromAssetPath(value));
 var TwitterCard = ({ author, handle, avatarSrc, tweet, image, timestamp, verified }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_remotion39.AbsoluteFill, { style: { backgroundColor: "#0B0F14", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Fill, { style: { backgroundColor: "#0B0F14", display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       style: {
@@ -2578,19 +2773,19 @@ var TwitterCard = ({ author, handle, avatarSrc, tweet, image, timestamp, verifie
         boxShadow: "0 30px 90px rgba(0,0,0,0.35)"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: { display: "flex", gap: 18, alignItems: "center" }, children: [
-          avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_remotion39.Img, { src: resolveAsset14(avatarSrc), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "#E5E7EB" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { fontSize: 34, fontWeight: 900, color: "#111827" }, children: author }),
-              verified ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { fontSize: 26, color: "#1D9BF0", fontWeight: 900 }, children: "\u2713" }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", gap: 18, alignItems: "center" }, children: [
+          avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_remotion35.Img, { src: resolveAsset14(avatarSrc), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "#E5E7EB" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { fontSize: 34, fontWeight: 900, color: "#111827" }, children: author }),
+              verified ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { fontSize: 26, color: "#1D9BF0", fontWeight: 900 }, children: "\u2713" }) : null
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { fontSize: 26, color: "#6B7280", fontWeight: 800 }, children: handle })
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { fontSize: 26, color: "#6B7280", fontWeight: 800 }, children: handle })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { marginTop: 28, fontSize: 36, lineHeight: 1.25, color: "#111827", fontWeight: 700 }, children: tweet }),
-        image ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { marginTop: 28, width: "100%", height: 520, overflow: "hidden", borderRadius: 22, backgroundColor: "#F3F4F6" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_remotion39.Img, { src: resolveAsset14(image), style: { width: "100%", height: "100%", objectFit: "cover" } }) }) : null,
-        timestamp ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { marginTop: 22, fontSize: 22, color: "#6B7280", fontWeight: 700 }, children: timestamp }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { marginTop: 28, fontSize: 36, lineHeight: 1.25, color: "#111827", fontWeight: 700 }, children: tweet }),
+        image ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { marginTop: 28, width: "100%", height: 520, overflow: "hidden", borderRadius: 22, backgroundColor: "#F3F4F6" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_remotion35.Img, { src: resolveAsset14(image), style: { width: "100%", height: "100%", objectFit: "cover" } }) }) : null,
+        timestamp ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { marginTop: 22, fontSize: 22, color: "#6B7280", fontWeight: 700 }, children: timestamp }) : null
       ]
     }
   ) });
@@ -2603,19 +2798,19 @@ var TwitterCardComponentMetadata = {
 };
 // src/components/composites/Watermark.tsx
-var import_remotion40 = require("remotion");
-var import_zod43 = require("zod");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var WatermarkPropsSchema = import_zod43.z.object({
-  type: import_zod43.z.enum(["logo", "text"]).default("logo"),
-  src: import_zod43.z.string().optional(),
-  text: import_zod43.z.string().optional(),
-  position: import_zod43.z.enum(["topLeft", "topRight", "bottomLeft", "bottomRight"]).default("bottomRight"),
-  opacity: import_zod43.z.number().min(0.1).max(1).default(0.5),
-  size: import_zod43.z.number().min(30).max(150).default(60),
-  color: import_zod43.z.string().default("#FFFFFF")
+var import_remotion36 = require("remotion");
+var import_zod46 = require("zod");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var WatermarkPropsSchema = import_zod46.z.object({
+  type: import_zod46.z.enum(["logo", "text"]).default("logo"),
+  src: import_zod46.z.string().optional(),
+  text: import_zod46.z.string().optional(),
+  position: import_zod46.z.enum(["topLeft", "topRight", "bottomLeft", "bottomRight"]).default("bottomRight"),
+  opacity: import_zod46.z.number().min(0.1).max(1).default(0.5),
+  size: import_zod46.z.number().min(30).max(150).default(60),
+  color: import_zod46.z.string().default("#FFFFFF")
 });
-var resolveAsset15 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion40.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset15 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion36.staticFile)(staticFileInputFromAssetPath(value));
 function posStyle(position) {
   const offset = 30;
   if (position === "topLeft") return { left: offset, top: offset };
@@ -2630,8 +2825,8 @@ var Watermark = ({ type, src, text, position, opacity, size, color }) => {
     opacity,
     pointerEvents: "none"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_remotion40.AbsoluteFill, { children: type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: { ...style, fontSize: Math.round(size * 0.6), color, fontWeight: 700 }, children: text ?? "" }) : src ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_remotion40.Img,
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Fill, { children: type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { style: { ...style, fontSize: Math.round(size * 0.6), color, fontWeight: 700 }, children: text ?? "" }) : src ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    import_remotion36.Img,
     {
       src: resolveAsset15(src),
       style: { ...style, width: size, height: size, objectFit: "contain" }
@@ -2645,19 +2840,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
-var import_remotion41 = require("remotion");
-var import_zod44 = require("zod");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var WipeTransitionPropsSchema = import_zod44.z.object({
-  durationInFrames: import_zod44.z.number().int().min(10).max(60).default(30),
-  direction: import_zod44.z.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
-  softEdge: import_zod44.z.boolean().default(false),
-  phase: import_zod44.z.enum(["in", "out", "inOut"]).default("inOut")
+var import_react10 = __toESM(require("react"));
+var import_remotion37 = require("remotion");
+var import_zod47 = require("zod");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var WipeTransitionPropsSchema = import_zod47.z.object({
+  durationInFrames: import_zod47.z.number().int().min(10).max(60).default(30),
+  direction: import_zod47.z.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
+  softEdge: import_zod47.z.boolean().default(false),
+  phase: import_zod47.z.enum(["in", "out", "inOut"]).default("inOut")
 });
 function clipFor2(direction, p) {
   if (direction === "left") return `inset(0 ${100 * (1 - p)}% 0 0)`;
@@ -2674,20 +2870,21 @@ var WipeTransition = ({
   children,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion41.useCurrentFrame)();
+  const layers = import_react10.default.Children.toArray(children);
+  const frame = (0, import_remotion37.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
   let clipPath;
   if (phase === "in" || phase === "inOut") {
-    const t = (0, import_remotion41.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion37.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     clipPath = clipFor2(direction, t);
   }
   if (phase === "out" || phase === "inOut") {
     const start = Math.max(0, total - d);
-    const t = (0, import_remotion41.interpolate)(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion37.interpolate)(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     clipPath = clipFor2(direction, t);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_remotion41.AbsoluteFill, { style: { clipPath, filter: softEdge ? "blur(0.4px)" : void 0 }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Fill, { style: { clipPath, filter: softEdge ? "blur(0.4px)" : void 0 }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var WipeTransitionComponentMetadata = {
   kind: "composite",
@@ -2699,18 +2896,18 @@ var WipeTransitionComponentMetadata = {
 };
 // src/components/composites/YouTubeThumbnail.tsx
-var import_remotion42 = require("remotion");
-var import_zod45 = require("zod");
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var YouTubeThumbnailPropsSchema = import_zod45.z.object({
-  backgroundImage: import_zod45.z.string().min(1),
-  title: import_zod45.z.string().max(60),
-  subtitle: import_zod45.z.string().max(40).optional(),
-  thumbnailFace: import_zod45.z.string().optional(),
-  accentColor: import_zod45.z.string().default("#FF0000"),
-  style: import_zod45.z.enum(["bold", "minimal", "dramatic"]).default("bold")
+var import_remotion38 = require("remotion");
+var import_zod48 = require("zod");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var YouTubeThumbnailPropsSchema = import_zod48.z.object({
+  backgroundImage: import_zod48.z.string().min(1),
+  title: import_zod48.z.string().max(60),
+  subtitle: import_zod48.z.string().max(40).optional(),
+  thumbnailFace: import_zod48.z.string().optional(),
+  accentColor: import_zod48.z.string().default("#FF0000"),
+  style: import_zod48.z.enum(["bold", "minimal", "dramatic"]).default("bold")
 });
-var resolveAsset16 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion42.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset16 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion38.staticFile)(staticFileInputFromAssetPath(value));
 var YouTubeThumbnail = ({
   backgroundImage,
   title,
@@ -2719,18 +2916,18 @@ var YouTubeThumbnail = ({
   accentColor,
   style
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_remotion42.AbsoluteFill, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_remotion42.Img, { src: resolveAsset16(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover" } }),
-    style === "dramatic" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_remotion42.AbsoluteFill, { style: { backgroundColor: "rgba(0,0,0,0.35)" } }) : null,
-    thumbnailFace ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      import_remotion42.Img,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Fill, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_remotion38.Img, { src: resolveAsset16(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+    style === "dramatic" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { position: "absolute", inset: 0, backgroundColor: "rgba(0,0,0,0.35)" } }) : null,
+    thumbnailFace ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      import_remotion38.Img,
       {
         src: resolveAsset16(thumbnailFace),
         style: { position: "absolute", right: 60, bottom: 0, width: 520, height: 720, objectFit: "cover" }
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: { position: "absolute", left: 70, top: 90, width: 1100 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { style: { position: "absolute", left: 70, top: 90, width: 1100 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         "div",
         {
           style: {
@@ -2745,9 +2942,9 @@ var YouTubeThumbnail = ({
           children: title
         }
       ),
-      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: 26, fontSize: 52, fontWeight: 900, color: accentColor, textShadow: "0 10px 30px rgba(0,0,0,0.6)" }, children: subtitle }) : null
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { marginTop: 26, fontSize: 52, fontWeight: 900, color: accentColor, textShadow: "0 10px 30px rgba(0,0,0,0.6)" }, children: subtitle }) : null
     ] }),
-    style !== "minimal" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { position: "absolute", left: 70, bottom: 80, width: 260, height: 18, backgroundColor: accentColor, borderRadius: 9999 } }) : null
+    style !== "minimal" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { position: "absolute", left: 70, bottom: 80, width: 260, height: 18, backgroundColor: accentColor, borderRadius: 9999 } }) : null
   ] });
 };
 var YouTubeThumbnailComponentMetadata = {
@@ -2758,37 +2955,39 @@ var YouTubeThumbnailComponentMetadata = {
 };
 // src/components/composites/VideoWithOverlay.tsx
-var import_remotion43 = require("remotion");
-var import_zod46 = require("zod");
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var OverlaySchema = import_zod46.z.object({
-  type: import_zod46.z.enum(["text", "logo", "gradient"]),
-  content: import_zod46.z.string().optional(),
-  opacity: import_zod46.z.number().min(0).max(1).default(0.3),
-  position: import_zod46.z.enum(["top", "bottom", "center", "full"]).default("bottom")
+var import_remotion39 = require("remotion");
+var import_zod49 = require("zod");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var OverlaySchema = import_zod49.z.object({
+  type: import_zod49.z.enum(["text", "logo", "gradient"]),
+  content: import_zod49.z.string().optional(),
+  opacity: import_zod49.z.number().min(0).max(1).default(0.3),
+  position: import_zod49.z.enum(["top", "bottom", "center", "full"]).default("bottom")
 });
-var VideoWithOverlayPropsSchema = import_zod46.z.object({
-  src: import_zod46.z.string().min(1),
+var VideoWithOverlayPropsSchema = import_zod49.z.object({
+  src: import_zod49.z.string().min(1),
   overlay: OverlaySchema.optional(),
-  volume: import_zod46.z.number().min(0).max(1).default(1),
-  playbackRate: import_zod46.z.number().min(0.5).max(2).default(1)
+  volume: import_zod49.z.number().min(0).max(1).default(1),
+  playbackRate: import_zod49.z.number().min(0.5).max(2).default(1)
 });
-var resolveAsset17 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion43.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset17 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion39.staticFile)(staticFileInputFromAssetPath(value));
 var VideoWithOverlay = ({ src, overlay, volume, playbackRate }) => {
-  const frame = (0, import_remotion43.useCurrentFrame)();
-  const fade = (0, import_remotion43.interpolate)(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const overlayNode = overlay ? overlay.type === "gradient" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-    import_remotion43.AbsoluteFill,
+  const frame = (0, import_remotion39.useCurrentFrame)();
+  const fade = (0, import_remotion39.interpolate)(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const overlayFill = { position: "absolute", inset: 0 };
+  const overlayNode = overlay ? overlay.type === "gradient" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    "div",
     {
       style: {
+        ...overlayFill,
         opacity: overlay.opacity,
         background: overlay.position === "top" ? "linear-gradient(rgba(0,0,0,0.85), transparent)" : overlay.position === "bottom" ? "linear-gradient(transparent, rgba(0,0,0,0.85))" : "linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6))"
       }
     }
-  ) : overlay.type === "logo" && overlay.content ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_remotion43.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_remotion43.Img, { src: resolveAsset17(overlay.content), style: { width: 220, height: 220, objectFit: "contain" } }) }) : overlay.type === "text" && overlay.content ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_remotion43.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { color: "#FFFFFF", fontSize: 56, fontWeight: 900, textAlign: "center", padding: "0 80px" }, children: overlay.content }) }) : null : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_remotion43.AbsoluteFill, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      import_remotion43.Video,
+  ) : overlay.type === "logo" && overlay.content ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style: { ...overlayFill, display: "flex", justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_remotion39.Img, { src: resolveAsset17(overlay.content), style: { width: 220, height: 220, objectFit: "contain" } }) }) : overlay.type === "text" && overlay.content ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style: { ...overlayFill, display: "flex", justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style: { color: "#FFFFFF", fontSize: 56, fontWeight: 900, textAlign: "center", padding: "0 80px" }, children: overlay.content }) }) : null : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Fill, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      import_remotion39.Video,
       {
         src: resolveAsset17(src),
         style: { width: "100%", height: "100%", objectFit: "cover", opacity: fade },
@@ -2807,13 +3006,14 @@ var VideoWithOverlayComponentMetadata = {
 };
 // src/components/composites/ZoomTransition.tsx
-var import_remotion44 = require("remotion");
-var import_zod47 = require("zod");
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var ZoomTransitionPropsSchema = import_zod47.z.object({
-  durationInFrames: import_zod47.z.number().int().min(10).max(60).default(30),
-  type: import_zod47.z.enum(["zoomIn", "zoomOut"]).default("zoomIn"),
-  phase: import_zod47.z.enum(["in", "out", "inOut"]).default("inOut")
+var import_react11 = __toESM(require("react"));
+var import_remotion40 = require("remotion");
+var import_zod50 = require("zod");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var ZoomTransitionPropsSchema = import_zod50.z.object({
+  durationInFrames: import_zod50.z.number().int().min(10).max(60).default(30),
+  type: import_zod50.z.enum(["zoomIn", "zoomOut"]).default("zoomIn"),
+  phase: import_zod50.z.enum(["in", "out", "inOut"]).default("inOut")
 });
 var ZoomTransition = ({
   durationInFrames,
@@ -2822,7 +3022,8 @@ var ZoomTransition = ({
   children,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion44.useCurrentFrame)();
+  const layers = import_react11.default.Children.toArray(children);
+  const frame = (0, import_remotion40.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
   let opacity = 1;
@@ -2830,17 +3031,17 @@ var ZoomTransition = ({
   const enterFrom = type === "zoomIn" ? 1.2 : 0.85;
   const exitTo = type === "zoomIn" ? 1.25 : 0.75;
   if (phase === "in" || phase === "inOut") {
-    const t = (0, import_remotion44.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion40.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     scale *= enterFrom + (1 - enterFrom) * t;
     opacity *= t;
   }
   if (phase === "out" || phase === "inOut") {
     const start = Math.max(0, total - d);
-    const t = (0, import_remotion44.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion40.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     scale *= 1 + (exitTo - 1) * t;
     opacity *= 1 - t;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_remotion44.AbsoluteFill, { style: { opacity, transform: `scale(${scale})` }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Fill, { style: { opacity, transform: `scale(${scale})` }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var ZoomTransitionComponentMetadata = {
   kind: "composite",
@@ -2869,6 +3070,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",
@@ -2885,6 +3094,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",