@depths/waves 0.2.0 → 0.3.0

package/dist/cli.js

@@ -242,19 +242,77 @@ var AudioComponentMetadata = {
 };
 
 // src/components/primitives/Box.tsx
+var import_react = __toESM(require("react"));
 var import_zod4 = require("zod");
+
+// src/remotion/Fill.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var Fill = ({ style, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        boxSizing: "border-box",
+        ...style ?? {}
+      },
+      children
+    }
+  );
+};
+
+// src/components/primitives/Box.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var BoxPropsSchema = import_zod4.z.object({
-  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 (omit for auto)"),
-  height: import_zod4.z.number().positive().optional().describe("Height in pixels (omit for auto)"),
+  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)"),
+  backgroundColor: import_zod4.z.string().optional().describe("CSS color (e.g. #RRGGBB, rgba())"),
   borderRadius: import_zod4.z.number().min(0).default(0).describe("Border radius in pixels"),
   opacity: import_zod4.z.number().min(0).max(1).default(1).describe("Opacity 0..1")
 });
-var Box = ({
+var Box = ({ width, height, padding, backgroundColor, borderRadius, opacity, children }) => {
+  const layers = import_react.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Fill,
+    {
+      style: {
+        width,
+        height,
+        padding,
+        backgroundColor,
+        borderRadius,
+        opacity
+      },
+      children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i))
+    }
+  );
+};
+var BoxComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  description: "Flow container for layout and backgrounds (layout-safe)",
+  llmGuidance: "Use Box as a container inside Grid/Stack. Box participates in layout flow. For x/y positioning, use Frame."
+};
+
+// src/components/primitives/Frame.tsx
+var import_react2 = __toESM(require("react"));
+var import_zod5 = require("zod");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FramePropsSchema = import_zod5.z.object({
+  x: import_zod5.z.number().default(0).describe("Left offset in pixels"),
+  y: import_zod5.z.number().default(0).describe("Top offset in pixels"),
+  width: import_zod5.z.number().positive().optional().describe("Width in pixels (optional)"),
+  height: import_zod5.z.number().positive().optional().describe("Height in pixels (optional)"),
+  padding: import_zod5.z.number().min(0).default(0).describe("Padding in pixels"),
+  backgroundColor: import_zod5.z.string().optional().describe("CSS color (e.g. #RRGGBB, rgba())"),
+  borderRadius: import_zod5.z.number().min(0).default(0).describe("Border radius in pixels"),
+  opacity: import_zod5.z.number().min(0).max(1).default(1).describe("Opacity 0..1")
+});
+var Frame = ({
   x,
   y,
   width,
@@ -265,7 +323,8 @@ var Box = ({
   opacity,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const layers = import_react2.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       style: {
@@ -280,29 +339,28 @@ var Box = ({
         opacity,
         boxSizing: "border-box"
       },
-      children
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Fill, { children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) })
     }
   );
 };
-var 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_remotion2 = require("remotion");
-var import_zod5 = require("zod");
-var import_jsx_runtime3 = 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 import_zod6 = require("zod");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var GridPropsSchema = import_zod6.z.object({
+  columns: import_zod6.z.number().int().min(1).max(12).default(2),
+  rows: import_zod6.z.number().int().min(1).max(12).default(1),
+  gap: import_zod6.z.number().min(0).default(24),
+  padding: import_zod6.z.number().min(0).default(0),
+  align: import_zod6.z.enum(["start", "center", "end", "stretch"]).default("stretch"),
+  justify: import_zod6.z.enum(["start", "center", "end", "stretch"]).default("stretch")
 });
 var mapAlign = (a) => {
   if (a === "start") return "start";
@@ -317,8 +375,8 @@ var mapJustify = (j) => {
   return "stretch";
 };
 var Grid = ({ columns, rows, gap, padding, align, justify, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_remotion2.AbsoluteFill,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Fill,
     {
       style: {
         display: "grid",
@@ -343,19 +401,19 @@ var GridComponentMetadata = {
 };
 
 // src/components/primitives/Image.tsx
-var import_remotion3 = require("remotion");
-var import_zod6 = require("zod");
-var import_jsx_runtime4 = 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 import_remotion2 = require("remotion");
+var import_zod7 = require("zod");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ImagePropsSchema = import_zod7.z.object({
+  src: import_zod7.z.string().min(1),
+  fit: import_zod7.z.enum(["cover", "contain"]).default("cover"),
+  borderRadius: import_zod7.z.number().min(0).default(0),
+  opacity: import_zod7.z.number().min(0).max(1).default(1)
 });
-var resolveAsset = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion3.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion2.staticFile)(staticFileInputFromAssetPath(value));
 var Image = ({ src, fit, borderRadius, opacity }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_remotion3.AbsoluteFill, { style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_remotion3.Img,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Fill, { style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_remotion2.Img,
     {
       src: resolveAsset(src),
       style: { width: "100%", height: "100%", objectFit: fit, borderRadius }
@@ -369,32 +427,91 @@ var ImageComponentMetadata = {
   llmGuidance: 'Use Image for pictures and backgrounds. Use fit="cover" for full-bleed, fit="contain" to avoid cropping.'
 };
 
+// src/components/primitives/Layer.tsx
+var import_react3 = __toESM(require("react"));
+var import_zod8 = require("zod");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var LayerPropsSchema = import_zod8.z.object({
+  zIndex: import_zod8.z.number().int().default(0).describe("Higher zIndex renders on top"),
+  inset: import_zod8.z.number().min(0).default(0).describe("Inset from all sides in pixels"),
+  opacity: import_zod8.z.number().min(0).max(1).default(1),
+  pointerEvents: import_zod8.z.enum(["none", "auto"]).default("none")
+});
+var Layer = ({ zIndex, inset, opacity, pointerEvents, children }) => {
+  const layers = import_react3.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: inset,
+        right: inset,
+        top: inset,
+        bottom: inset,
+        zIndex,
+        opacity,
+        pointerEvents,
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Fill, { children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) })
+    }
+  );
+};
+var LayerComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "One overlay layer with explicit zIndex inside Layers",
+  llmGuidance: "Use Layer inside Layers to control stacking. Put exactly one child in a Layer (recommended)."
+};
+
+// src/components/primitives/Layers.tsx
+var import_zod9 = require("zod");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var LayersPropsSchema = import_zod9.z.object({
+  overflow: import_zod9.z.enum(["visible", "hidden"]).default("visible").describe("Clip layers to bounds")
+});
+var Layers = ({ overflow, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Fill, { style: { overflow }, children });
+};
+var LayersComponentMetadata = {
+  kind: "primitive",
+  category: "layout",
+  acceptsChildren: true,
+  minChildren: 1,
+  description: "Overlay container for stacking children (use Layer for zIndex)",
+  llmGuidance: "Use Layers to stack background/content/overlays. Prefer Layer children with explicit zIndex."
+};
+
 // src/components/primitives/Scene.tsx
-var import_remotion4 = require("remotion");
-var import_zod7 = require("zod");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ScenePropsSchema = import_zod7.z.object({
+var import_react4 = __toESM(require("react"));
+var import_remotion3 = require("remotion");
+var import_zod10 = require("zod");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ScenePropsSchema = import_zod10.z.object({
   background: BackgroundSpecSchema
 });
 var resolveAsset2 = (value) => {
-  return isRemoteAssetPath(value) ? value : (0, import_remotion4.staticFile)(staticFileInputFromAssetPath(value));
+  return isRemoteAssetPath(value) ? value : (0, import_remotion3.staticFile)(staticFileInputFromAssetPath(value));
 };
 var Scene = ({ background, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_remotion4.AbsoluteFill, { children: [
-    background.type === "color" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_remotion4.AbsoluteFill, { style: { backgroundColor: background.value } }) : background.type === "image" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_remotion4.Img,
+  const layers = import_react4.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_remotion3.AbsoluteFill, { children: [
+    background.type === "color" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_remotion3.AbsoluteFill, { style: { backgroundColor: background.value } }) : background.type === "image" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_remotion3.Img,
       {
         src: resolveAsset2(background.value),
         style: { width: "100%", height: "100%", objectFit: "cover" }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_remotion4.Video,
+    ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_remotion3.Video,
       {
         src: resolveAsset2(background.value),
         style: { width: "100%", height: "100%", objectFit: "cover" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_remotion4.AbsoluteFill, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_remotion3.AbsoluteFill, { children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_remotion3.AbsoluteFill, { children: child }, i)) })
   ] });
 };
 var SceneComponentMetadata = {
@@ -406,37 +523,37 @@ var SceneComponentMetadata = {
 };
 
 // src/components/primitives/Segment.tsx
-var import_remotion5 = require("remotion");
-var import_zod8 = require("zod");
-var import_jsx_runtime6 = 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_remotion4 = require("remotion");
+var import_zod11 = require("zod");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var TransitionPropsSchema = import_zod11.z.object({
+  type: import_zod11.z.string().min(1),
+  durationInFrames: import_zod11.z.number().int().positive(),
+  props: import_zod11.z.record(import_zod11.z.string(), import_zod11.z.unknown()).optional()
 });
-var SegmentPropsSchema = import_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 };
@@ -449,18 +566,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_remotion5.useCurrentFrame)();
+  const frame = (0, import_remotion4.useCurrentFrame)();
   const durationInFrames = __wavesDurationInFrames ?? 0;
   let opacity = 1;
   let translateX = 0;
@@ -471,35 +588,35 @@ var Segment = ({ enterTransition, exitTransition, children, __wavesDurationInFra
   if (enterTransition) {
     const d = enterTransition.durationInFrames;
     if (enterTransition.type === "FadeTransition") {
-      opacity *= (0, import_remotion5.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      opacity *= (0, import_remotion4.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     }
     if (enterTransition.type === "SlideTransition") {
       const opts = getSlideOptions(enterTransition.props);
-      const t = (0, import_remotion5.interpolate)(frame, [0, d], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion4.interpolate)(frame, [0, d], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       const delta = opts.distance * t;
       if (opts.direction === "left") translateX += -delta;
       if (opts.direction === "right") translateX += delta;
       if (opts.direction === "up") translateY += -delta;
       if (opts.direction === "down") translateY += delta;
-      opacity *= (0, import_remotion5.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      opacity *= (0, import_remotion4.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     }
     if (enterTransition.type === "ZoomTransition") {
       const opts = getZoomOptions(enterTransition.props);
       const fromScale = opts.type === "zoomIn" ? 1.2 : 0.85;
-      const t = (0, import_remotion5.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion4.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       scale *= fromScale + (1 - fromScale) * t;
       opacity *= t;
     }
     if (enterTransition.type === "WipeTransition") {
       const opts = getWipeOptions(enterTransition.props);
-      const t = (0, import_remotion5.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion4.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       clipPath = clipFor(opts.direction, t);
       filter = opts.softEdge ? "blur(0.4px)" : void 0;
     }
     if (enterTransition.type === "CircularReveal") {
       const opts = getCircularOptions(enterTransition.props);
       const open = opts.direction === "open";
-      const t = (0, import_remotion5.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion4.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       const radiusPct = open ? 150 * t : 150 * (1 - t);
       clipPath = `circle(${radiusPct}% at ${Math.round(opts.center.x * 100)}% ${Math.round(opts.center.y * 100)}%)`;
     }
@@ -508,41 +625,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_remotion5.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      opacity *= (0, import_remotion4.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     }
     if (exitTransition.type === "SlideTransition") {
       const opts = getSlideOptions(exitTransition.props);
-      const t = (0, import_remotion5.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion4.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       const delta = opts.distance * t;
       if (opts.direction === "left") translateX += delta;
       if (opts.direction === "right") translateX += -delta;
       if (opts.direction === "up") translateY += delta;
       if (opts.direction === "down") translateY += -delta;
-      opacity *= (0, import_remotion5.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      opacity *= (0, import_remotion4.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     }
     if (exitTransition.type === "ZoomTransition") {
       const opts = getZoomOptions(exitTransition.props);
       const toScale = opts.type === "zoomIn" ? 1.25 : 0.75;
-      const t = (0, import_remotion5.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion4.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       scale *= 1 + (toScale - 1) * t;
       opacity *= 1 - t;
     }
     if (exitTransition.type === "WipeTransition") {
       const opts = getWipeOptions(exitTransition.props);
-      const t = (0, import_remotion5.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion4.interpolate)(frame, [start, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       clipPath = clipFor(opts.direction, t);
       filter = opts.softEdge ? "blur(0.4px)" : void 0;
     }
     if (exitTransition.type === "CircularReveal") {
       const opts = getCircularOptions(exitTransition.props);
       const open = opts.direction === "open";
-      const t = (0, import_remotion5.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      const t = (0, import_remotion4.interpolate)(frame, [start, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
       const radiusPct = open ? 150 * (1 - t) : 150 * t;
       clipPath = `circle(${radiusPct}% at ${Math.round(opts.center.x * 100)}% ${Math.round(opts.center.y * 100)}%)`;
     }
   }
   const transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_remotion5.AbsoluteFill, { style: { opacity, transform, clipPath, filter }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_remotion4.AbsoluteFill, { style: { opacity, transform, clipPath, filter }, children });
 };
 var SegmentComponentMetadata = {
   kind: "primitive",
@@ -555,18 +672,18 @@ var SegmentComponentMetadata = {
 };
 
 // src/components/primitives/Shape.tsx
-var import_zod9 = require("zod");
-var import_jsx_runtime7 = 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_runtime11 = require("react/jsx-runtime");
+var ShapePropsSchema = import_zod12.z.object({
+  shape: import_zod12.z.enum(["rect", "circle"]).default("rect"),
+  x: import_zod12.z.number().default(0),
+  y: import_zod12.z.number().default(0),
+  width: import_zod12.z.number().positive().default(100),
+  height: import_zod12.z.number().positive().default(100),
+  fill: import_zod12.z.string().default("#FFFFFF"),
+  strokeColor: import_zod12.z.string().optional(),
+  strokeWidth: import_zod12.z.number().min(0).default(0),
+  opacity: import_zod12.z.number().min(0).max(1).default(1)
 });
 var Shape = ({
   shape,
@@ -579,7 +696,7 @@ var Shape = ({
   strokeWidth,
   opacity
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
       style: {
@@ -604,15 +721,14 @@ var ShapeComponentMetadata = {
 };
 
 // src/components/primitives/Stack.tsx
-var import_remotion6 = require("remotion");
-var import_zod10 = require("zod");
-var import_jsx_runtime8 = 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_runtime12 = require("react/jsx-runtime");
+var StackPropsSchema = import_zod13.z.object({
+  direction: import_zod13.z.enum(["row", "column"]).default("column"),
+  gap: import_zod13.z.number().min(0).default(24),
+  padding: import_zod13.z.number().min(0).default(0),
+  align: import_zod13.z.enum(["start", "center", "end", "stretch"]).default("center"),
+  justify: import_zod13.z.enum(["start", "center", "end", "between"]).default("center")
 });
 var mapAlign2 = (a) => {
   if (a === "start") return "flex-start";
@@ -627,8 +743,8 @@ var mapJustify2 = (j) => {
   return "center";
 };
 var Stack = ({ direction, gap, padding, align, justify, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_remotion6.AbsoluteFill,
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Fill,
     {
       style: {
         display: "flex",
@@ -652,17 +768,22 @@ var StackComponentMetadata = {
 };
 
 // src/components/primitives/Text.tsx
-var import_remotion7 = require("remotion");
-var import_zod11 = require("zod");
-var import_jsx_runtime9 = 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_remotion5 = require("remotion");
+var import_zod14 = require("zod");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var TextPropsSchema = import_zod14.z.object({
+  content: import_zod14.z.string(),
+  fontSize: import_zod14.z.number().default(48),
+  color: import_zod14.z.string().default("#FFFFFF"),
+  fontFamily: import_zod14.z.string().default("Inter"),
+  position: import_zod14.z.enum(["top", "center", "bottom", "left", "right"]).default("center"),
+  animation: import_zod14.z.enum(["none", "fade", "slide", "zoom"]).default("fade"),
+  maxWidthPct: import_zod14.z.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: import_zod14.z.number().min(0).max(0.25).default(0.06),
+  textAlign: import_zod14.z.enum(["left", "center", "right"]).default("center")
 });
-var getPositionStyles = (position) => {
+var getPositionStyles = (position, safeInsetPct) => {
+  const inset = `${(safeInsetPct * 100).toFixed(2)}%`;
   const base = {
     display: "flex",
     justifyContent: "center",
@@ -670,13 +791,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;
   }
@@ -685,29 +806,29 @@ var getAnimationStyle = (frame, animation) => {
   const animDuration = 30;
   switch (animation) {
     case "fade": {
-      const opacity = (0, import_remotion7.interpolate)(frame, [0, animDuration], [0, 1], {
+      const opacity = (0, import_remotion5.interpolate)(frame, [0, animDuration], [0, 1], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
       return { opacity };
     }
     case "slide": {
-      const translateY = (0, import_remotion7.interpolate)(frame, [0, animDuration], [50, 0], {
+      const translateY = (0, import_remotion5.interpolate)(frame, [0, animDuration], [50, 0], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
-      const opacity = (0, import_remotion7.interpolate)(frame, [0, animDuration], [0, 1], {
+      const opacity = (0, import_remotion5.interpolate)(frame, [0, animDuration], [0, 1], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
       return { transform: `translateY(${translateY}px)`, opacity };
     }
     case "zoom": {
-      const scale = (0, import_remotion7.interpolate)(frame, [0, animDuration], [0.8, 1], {
+      const scale = (0, import_remotion5.interpolate)(frame, [0, animDuration], [0.8, 1], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
-      const opacity = (0, import_remotion7.interpolate)(frame, [0, animDuration], [0, 1], {
+      const opacity = (0, import_remotion5.interpolate)(frame, [0, animDuration], [0, 1], {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp"
       });
@@ -717,18 +838,32 @@ var getAnimationStyle = (frame, animation) => {
       return {};
   }
 };
-var Text = ({ content, fontSize, color, position, animation }) => {
-  const frame = (0, import_remotion7.useCurrentFrame)();
-  const positionStyles6 = getPositionStyles(position);
+var Text = ({
+  content,
+  fontSize,
+  color,
+  fontFamily,
+  position,
+  animation,
+  maxWidthPct,
+  safeInsetPct,
+  textAlign
+}) => {
+  const frame = (0, import_remotion5.useCurrentFrame)();
+  const positionStyles6 = getPositionStyles(position, safeInsetPct);
   const animationStyles = getAnimationStyle(frame, animation);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_remotion7.AbsoluteFill, { style: positionStyles6, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Fill, { style: positionStyles6, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       style: {
         fontSize,
         color,
+        fontFamily,
         fontWeight: 600,
-        textAlign: "center",
+        textAlign,
+        maxWidth: `${Math.round(maxWidthPct * 100)}%`,
+        overflowWrap: "anywhere",
+        wordBreak: "break-word",
         ...animationStyles
       },
       children: content
@@ -759,20 +894,20 @@ var TextComponentMetadata = {
 };
 
 // src/components/primitives/Video.tsx
-var import_remotion8 = require("remotion");
-var import_zod12 = require("zod");
-var import_jsx_runtime10 = 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_remotion6 = require("remotion");
+var import_zod15 = require("zod");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var VideoPropsSchema = import_zod15.z.object({
+  src: import_zod15.z.string().min(1),
+  fit: import_zod15.z.enum(["cover", "contain"]).default("cover"),
+  borderRadius: import_zod15.z.number().min(0).default(0),
+  opacity: import_zod15.z.number().min(0).max(1).default(1),
+  muted: import_zod15.z.boolean().default(true)
 });
-var resolveAsset3 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion8.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset3 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion6.staticFile)(staticFileInputFromAssetPath(value));
 var Video2 = ({ src, fit, borderRadius, opacity, muted }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_remotion8.AbsoluteFill, { style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_remotion8.Video,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Fill, { style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_remotion6.Video,
     {
       src: resolveAsset3(src),
       muted,
@@ -788,19 +923,19 @@ var VideoComponentMetadata = {
 };
 
 // src/components/composites/AnimatedCounter.tsx
-var import_remotion9 = require("remotion");
-var import_zod13 = require("zod");
-var import_jsx_runtime11 = 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_remotion7 = require("remotion");
+var import_zod16 = require("zod");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var AnimatedCounterPropsSchema = import_zod16.z.object({
+  from: import_zod16.z.number().default(0),
+  to: import_zod16.z.number().default(100),
+  fontSize: import_zod16.z.number().min(8).max(300).default(96),
+  color: import_zod16.z.string().default("#FFFFFF"),
+  fontFamily: import_zod16.z.string().default("Inter"),
+  fontWeight: import_zod16.z.number().int().min(100).max(900).default(700),
+  icon: import_zod16.z.string().optional(),
+  suffix: import_zod16.z.string().optional(),
+  animationType: import_zod16.z.enum(["spring", "linear"]).default("spring")
 });
 var AnimatedCounter = ({
   from,
@@ -814,16 +949,16 @@ var AnimatedCounter = ({
   animationType,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion9.useCurrentFrame)();
-  const { fps } = (0, import_remotion9.useVideoConfig)();
+  const frame = (0, import_remotion7.useCurrentFrame)();
+  const { fps } = (0, import_remotion7.useVideoConfig)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const progress = animationType === "spring" ? (0, import_remotion9.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } }) : (0, import_remotion9.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const progress = animationType === "spring" ? (0, import_remotion7.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } }) : (0, import_remotion7.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const value = from + (to - from) * Math.max(0, Math.min(1, progress));
   const rounded = Math.round(value);
   const label = `${rounded.toLocaleString()}${suffix ?? ""}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_remotion9.AbsoluteFill, { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { textAlign: "center" }, children: [
-    icon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: Math.round(fontSize * 0.5), marginBottom: 18 }, children: icon }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize, color, fontFamily, fontWeight, lineHeight: 1 }, children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Fill, { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { textAlign: "center" }, children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize: Math.round(fontSize * 0.5), marginBottom: 18 }, children: icon }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize, color, fontFamily, fontWeight, lineHeight: 1 }, children: label })
   ] }) });
 };
 var AnimatedCounterComponentMetadata = {
@@ -838,27 +973,27 @@ var AnimatedCounterComponentMetadata = {
 };
 
 // src/components/composites/BarChart.tsx
-var import_remotion10 = require("remotion");
-var import_zod14 = require("zod");
-var import_jsx_runtime12 = 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_remotion8 = require("remotion");
+var import_zod17 = require("zod");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var BarChartPropsSchema = import_zod17.z.object({
+  data: import_zod17.z.array(import_zod17.z.object({
+    label: import_zod17.z.string().min(1),
+    value: import_zod17.z.number(),
+    color: import_zod17.z.string().optional()
   })).min(2).max(8),
-  orientation: import_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_remotion10.useCurrentFrame)();
-  const { fps } = (0, import_remotion10.useVideoConfig)();
+  const frame = (0, import_remotion8.useCurrentFrame)();
+  const { fps } = (0, import_remotion8.useVideoConfig)();
   const max = maxValue ?? Math.max(...data.map((d) => d.value));
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_remotion10.AbsoluteFill, { style: { padding: 90, boxSizing: "border-box" }, children: [
-    showGrid ? /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Fill, { style: { padding: 90, boxSizing: "border-box" }, children: [
+    showGrid ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { position: "absolute", left: 90, right: 90, top: 90, bottom: 90, opacity: 0.15, backgroundImage: "linear-gradient(#fff 1px, transparent 1px)", backgroundSize: "100% 60px" } }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "div",
       {
         style: {
@@ -871,13 +1006,13 @@ var BarChart = ({ data, orientation, showValues, showGrid, maxValue }) => {
           justifyContent: "space-between"
         },
         children: data.map((d, i) => {
-          const p = (0, import_remotion10.spring)({ frame: frame - i * 4, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+          const p = (0, import_remotion8.spring)({ frame: frame - i * 4, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
           const ratio = max === 0 ? 0 : d.value / max * p;
           const color = d.color ?? "#0A84FF";
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }, children: [
-            orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { width: "100%", flex: 1, display: "flex", alignItems: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { width: "100%", height: `${Math.round(ratio * 100)}%`, backgroundColor: color, borderRadius: 12 } }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { width: "100%", display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { flex: 1, height: 18, backgroundColor: "rgba(255,255,255,0.15)", borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { width: `${Math.round(ratio * 100)}%`, height: "100%", backgroundColor: color } }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 700, fontSize: 22, opacity: 0.9 }, children: d.label }),
-            showValues ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 26 }, children: Math.round(d.value).toLocaleString() }) : null
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }, children: [
+            orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { width: "100%", flex: 1, display: "flex", alignItems: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { width: "100%", height: `${Math.round(ratio * 100)}%`, backgroundColor: color, borderRadius: 12 } }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { width: "100%", display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { flex: 1, height: 18, backgroundColor: "rgba(255,255,255,0.15)", borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { width: `${Math.round(ratio * 100)}%`, height: "100%", backgroundColor: color } }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 700, fontSize: 22, opacity: 0.9 }, children: d.label }),
+            showValues ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 26 }, children: Math.round(d.value).toLocaleString() }) : null
           ] }, d.label);
         })
       }
@@ -892,31 +1027,31 @@ var BarChartComponentMetadata = {
 };
 
 // src/components/composites/CardStack.tsx
-var import_remotion11 = require("remotion");
-var import_zod15 = require("zod");
-var import_jsx_runtime13 = 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_remotion9 = require("remotion");
+var import_zod18 = require("zod");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var CardSchema = import_zod18.z.object({
+  title: import_zod18.z.string().min(1),
+  content: import_zod18.z.string().min(1),
+  backgroundColor: import_zod18.z.string().optional()
 });
-var CardStackPropsSchema = import_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_remotion11.useCurrentFrame)();
-  const { fps } = (0, import_remotion11.useVideoConfig)();
+  const frame = (0, import_remotion9.useCurrentFrame)();
+  const { fps } = (0, import_remotion9.useVideoConfig)();
   const index = Math.min(cards.length - 1, Math.floor(frame / displayDuration));
   const local = frame - index * displayDuration;
-  const p = (0, import_remotion11.spring)({ frame: local, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const p = (0, import_remotion9.spring)({ frame: local, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
   const card = cards[index];
   const bg = card.backgroundColor ?? "rgba(255,255,255,0.1)";
   const opacity = transition === "fade" ? p : 1;
-  const slideX = transition === "slide" ? (0, import_remotion11.interpolate)(p, [0, 1], [80, 0]) : 0;
-  const rotateY = transition === "flip" ? (0, import_remotion11.interpolate)(p, [0, 1], [70, 0]) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_remotion11.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  const slideX = transition === "slide" ? (0, import_remotion9.interpolate)(p, [0, 1], [80, 0]) : 0;
+  const rotateY = transition === "flip" ? (0, import_remotion9.interpolate)(p, [0, 1], [70, 0]) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       style: {
@@ -933,8 +1068,8 @@ var CardStack = ({ cards, transition, displayDuration }) => {
         opacity
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontSize: 56, fontWeight: 900, marginBottom: 22 }, children: card.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontSize: 30, fontWeight: 700, opacity: 0.9, lineHeight: 1.3 }, children: card.content })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { fontSize: 56, fontWeight: 900, marginBottom: 22 }, children: card.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { fontSize: 30, fontWeight: 700, opacity: 0.9, lineHeight: 1.3 }, children: card.content })
       ]
     }
   ) });
@@ -947,18 +1082,19 @@ var CardStackComponentMetadata = {
 };
 
 // src/components/composites/CircularReveal.tsx
-var import_remotion12 = require("remotion");
-var import_zod16 = require("zod");
-var import_jsx_runtime14 = 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_react5 = __toESM(require("react"));
+var import_remotion10 = require("remotion");
+var import_zod19 = require("zod");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var CenterSchema = import_zod19.z.object({
+  x: import_zod19.z.number().min(0).max(1).default(0.5),
+  y: import_zod19.z.number().min(0).max(1).default(0.5)
 });
-var CircularRevealPropsSchema = import_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,
@@ -968,22 +1104,23 @@ var CircularReveal = ({
   children,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion12.useCurrentFrame)();
+  const layers = import_react5.default.Children.toArray(children);
+  const frame = (0, import_remotion10.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
   const c = center ?? { x: 0.5, y: 0.5 };
   const open = direction === "open";
   let radiusPct = open ? 0 : 150;
   if (phase === "in" || phase === "inOut") {
-    const t = (0, import_remotion12.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion10.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     radiusPct = open ? 150 * t : 150 * (1 - t);
   }
   if (phase === "out" || phase === "inOut") {
     const start = Math.max(0, total - d);
-    const t = (0, import_remotion12.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion10.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     radiusPct = open ? 150 * (1 - t) : 150 * t;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_remotion12.AbsoluteFill, { style: { clipPath: `circle(${radiusPct}% at ${Math.round(c.x * 100)}% ${Math.round(c.y * 100)}%)` }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Fill, { style: { clipPath: `circle(${radiusPct}% at ${Math.round(c.x * 100)}% ${Math.round(c.y * 100)}%)` }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var CircularRevealComponentMetadata = {
   kind: "composite",
@@ -995,21 +1132,21 @@ var CircularRevealComponentMetadata = {
 };
 
 // src/components/composites/CountUpText.tsx
-var import_remotion13 = require("remotion");
-var import_zod17 = require("zod");
-var import_jsx_runtime15 = 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_remotion11 = require("remotion");
+var import_zod20 = require("zod");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var CountUpTextPropsSchema = import_zod20.z.object({
+  from: import_zod20.z.number().default(0),
+  to: import_zod20.z.number().default(100),
+  fontSize: import_zod20.z.number().min(8).max(240).default(72),
+  color: import_zod20.z.string().default("#FFFFFF"),
+  fontFamily: import_zod20.z.string().default("Inter"),
+  fontWeight: import_zod20.z.number().int().min(100).max(900).default(700),
+  position: import_zod20.z.enum(["top", "center", "bottom"]).default("center"),
+  format: import_zod20.z.enum(["integer", "decimal", "currency", "percentage"]).default("integer"),
+  decimals: import_zod20.z.number().int().min(0).max(4).default(0),
+  prefix: import_zod20.z.string().optional(),
+  suffix: import_zod20.z.string().optional()
 });
 var positionStyles = (position) => {
   if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
@@ -1036,15 +1173,15 @@ var CountUpText = ({
   suffix,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion13.useCurrentFrame)();
-  const { fps } = (0, import_remotion13.useVideoConfig)();
+  const frame = (0, import_remotion11.useCurrentFrame)();
+  const { fps } = (0, import_remotion11.useVideoConfig)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const p = (0, import_remotion13.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } });
+  const p = (0, import_remotion11.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } });
   const progress = Math.max(0, Math.min(1, p));
   const value = from + (to - from) * progress;
-  const fade = (0, import_remotion13.interpolate)(frame, [0, Math.min(12, total)], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const fade = (0, import_remotion11.interpolate)(frame, [0, Math.min(12, total)], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const label = `${prefix ?? ""}${formatValue(value, format, decimals)}${suffix ?? ""}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_remotion13.AbsoluteFill, { style: { display: "flex", ...positionStyles(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize, color, fontFamily, fontWeight, opacity: fade, lineHeight: 1 }, children: label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Fill, { style: { display: "flex", ...positionStyles(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { fontSize, color, fontFamily, fontWeight, opacity: fade, lineHeight: 1 }, children: label }) });
 };
 var CountUpTextComponentMetadata = {
   kind: "composite",
@@ -1054,10 +1191,11 @@ var CountUpTextComponentMetadata = {
 };
 
 // src/components/composites/FadeTransition.tsx
-var import_remotion14 = require("remotion");
-var import_zod18 = require("zod");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var EasingSchema = import_zod18.z.enum(["linear", "easeIn", "easeOut", "easeInOut"]);
+var import_react6 = __toESM(require("react"));
+var import_remotion12 = require("remotion");
+var import_zod21 = require("zod");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var EasingSchema = import_zod21.z.enum(["linear", "easeIn", "easeOut", "easeInOut"]);
 function ease(t, easing) {
   const x = Math.max(0, Math.min(1, t));
   if (easing === "linear") return x;
@@ -1065,10 +1203,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,
@@ -1077,20 +1215,21 @@ var FadeTransition = ({
   children,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion14.useCurrentFrame)();
+  const layers = import_react6.default.Children.toArray(children);
+  const frame = (0, import_remotion12.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
   let opacity = 1;
   if (phase === "in" || phase === "inOut") {
-    const t = (0, import_remotion14.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion12.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     opacity *= ease(t, easing);
   }
   if (phase === "out" || phase === "inOut") {
     const start = Math.max(0, total - d);
-    const t = (0, import_remotion14.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion12.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     opacity *= 1 - ease(t, easing);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_remotion14.AbsoluteFill, { style: { opacity }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Fill, { style: { opacity }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var FadeTransitionComponentMetadata = {
   kind: "composite",
@@ -1102,17 +1241,17 @@ var FadeTransitionComponentMetadata = {
 };
 
 // src/components/composites/GlitchText.tsx
-var import_remotion15 = require("remotion");
-var import_zod19 = require("zod");
-var import_jsx_runtime17 = 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_remotion13 = require("remotion");
+var import_zod22 = require("zod");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var GlitchTextPropsSchema = import_zod22.z.object({
+  content: import_zod22.z.string().max(100),
+  fontSize: import_zod22.z.number().min(8).max(240).default(72),
+  color: import_zod22.z.string().default("#FFFFFF"),
+  fontFamily: import_zod22.z.string().default("monospace"),
+  position: import_zod22.z.enum(["top", "center", "bottom"]).default("center"),
+  intensity: import_zod22.z.number().int().min(1).max(10).default(5),
+  glitchDuration: import_zod22.z.number().int().min(5).max(30).default(10)
 });
 var positionStyles2 = (position) => {
   if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
@@ -1132,7 +1271,7 @@ var GlitchText = ({
   intensity,
   glitchDuration
 }) => {
-  const frame = (0, import_remotion15.useCurrentFrame)();
+  const frame = (0, import_remotion13.useCurrentFrame)();
   const active = frame < glitchDuration;
   const seed = frame + 1;
   const jitter = active ? (pseudoRandom(seed) - 0.5) * intensity * 6 : 0;
@@ -1146,10 +1285,10 @@ var GlitchText = ({
     textTransform: "uppercase",
     textAlign: "center"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_remotion15.AbsoluteFill, { style: { display: "flex", ...positionStyles2(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { ...baseStyle, color, transform: `translate(${jitter}px, ${jitterY}px)` }, children: content }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.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_runtime21.jsx)(Fill, { style: { display: "flex", ...positionStyles2(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { ...baseStyle, color, transform: `translate(${jitter}px, ${jitterY}px)` }, children: content }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { ...baseStyle, color: "#FF3B30", transform: `translate(${jitter + 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { ...baseStyle, color: "#0A84FF", transform: `translate(${jitter - 4}px, ${jitterY}px)`, mixBlendMode: "screen", opacity: active ? 0.9 : 0 }, children: content })
   ] }) });
 };
 var GlitchTextComponentMetadata = {
@@ -1160,17 +1299,16 @@ var GlitchTextComponentMetadata = {
 };
 
 // src/components/composites/GridLayout.tsx
-var import_remotion16 = require("remotion");
-var import_zod20 = require("zod");
-var import_jsx_runtime18 = 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_runtime22 = require("react/jsx-runtime");
+var GridLayoutPropsSchema = import_zod23.z.object({
+  columns: import_zod23.z.number().int().min(1).max(4).default(2),
+  rows: import_zod23.z.number().int().min(1).max(4).default(2),
+  gap: import_zod23.z.number().min(0).max(50).default(20),
+  padding: import_zod23.z.number().min(0).max(100).default(40)
 });
 var GridLayout = ({ columns, rows, gap, padding, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_remotion16.AbsoluteFill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Fill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       style: {
@@ -1195,23 +1333,23 @@ var GridLayoutComponentMetadata = {
 };
 
 // src/components/composites/ImageCollage.tsx
-var import_remotion17 = require("remotion");
-var import_zod21 = require("zod");
-var import_jsx_runtime19 = 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_remotion14 = require("remotion");
+var import_zod24 = require("zod");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var ImageCollagePropsSchema = import_zod24.z.object({
+  images: import_zod24.z.array(import_zod24.z.object({ src: import_zod24.z.string().min(1), caption: import_zod24.z.string().optional() })).min(2).max(9),
+  layout: import_zod24.z.enum(["grid", "stack", "scatter"]).default("grid"),
+  stagger: import_zod24.z.number().int().min(2).max(10).default(5)
 });
-var resolveAsset4 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion17.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset4 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion14.staticFile)(staticFileInputFromAssetPath(value));
 var ImageCollage = ({ images, layout, stagger }) => {
-  const frame = (0, import_remotion17.useCurrentFrame)();
-  const { fps } = (0, import_remotion17.useVideoConfig)();
+  const frame = (0, import_remotion14.useCurrentFrame)();
+  const { fps } = (0, import_remotion14.useVideoConfig)();
   const n = images.length;
   const cols = Math.ceil(Math.sqrt(n));
   const rows = Math.ceil(n / cols);
   if (layout === "grid") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_remotion17.AbsoluteFill, { style: { padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Fill, { style: { padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         style: {
@@ -1223,21 +1361,21 @@ var ImageCollage = ({ images, layout, stagger }) => {
           height: "100%"
         },
         children: images.map((img, i) => {
-          const p = (0, import_remotion17.spring)({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
-          return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { position: "relative", overflow: "hidden", borderRadius: 18, opacity: p, transform: `scale(${0.92 + 0.08 * p})` }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_remotion17.Img, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
-            img.caption ? /* @__PURE__ */ (0, import_jsx_runtime19.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_remotion14.spring)({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { position: "relative", overflow: "hidden", borderRadius: 18, opacity: p, transform: `scale(${0.92 + 0.08 * p})` }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_remotion14.Img, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+            img.caption ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0, padding: 12, background: "linear-gradient(transparent, rgba(0,0,0,0.7))", color: "#fff", fontWeight: 700 }, children: img.caption }) : null
           ] }, i);
         })
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_remotion17.AbsoluteFill, { children: images.map((img, i) => {
-    const p = (0, import_remotion17.spring)({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Fill, { children: images.map((img, i) => {
+    const p = (0, import_remotion14.spring)({ frame: frame - i * stagger, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
     const baseRotate = layout === "stack" ? (i - (n - 1) / 2) * 4 : i * 17 % 20 - 10;
     const baseX = layout === "scatter" ? i * 137 % 300 - 150 : 0;
     const baseY = layout === "scatter" ? (i + 3) * 89 % 200 - 100 : 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         style: {
@@ -1252,7 +1390,7 @@ var ImageCollage = ({ images, layout, stagger }) => {
           overflow: "hidden",
           boxShadow: "0 20px 60px rgba(0,0,0,0.35)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_remotion17.Img, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } })
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_remotion14.Img, { src: resolveAsset4(img.src), style: { width: "100%", height: "100%", objectFit: "cover" } })
       },
       i
     );
@@ -1266,20 +1404,20 @@ var ImageCollageComponentMetadata = {
 };
 
 // src/components/composites/ImageReveal.tsx
-var import_remotion18 = require("remotion");
-var import_zod22 = require("zod");
-var import_jsx_runtime20 = 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_remotion15 = require("remotion");
+var import_zod25 = require("zod");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ImageRevealPropsSchema = import_zod25.z.object({
+  src: import_zod25.z.string().min(1),
+  direction: import_zod25.z.enum(["left", "right", "top", "bottom", "center"]).default("left"),
+  revealType: import_zod25.z.enum(["wipe", "expand", "iris"]).default("wipe")
 });
-var resolveAsset5 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion18.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset5 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion15.staticFile)(staticFileInputFromAssetPath(value));
 var ImageReveal = ({ src, direction, revealType, __wavesDurationInFrames }) => {
-  const frame = (0, import_remotion18.useCurrentFrame)();
+  const frame = (0, import_remotion15.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(30, total);
-  const p = (0, import_remotion18.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const p = (0, import_remotion15.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   let clipPath;
   let transform = "none";
   let transformOrigin = "center center";
@@ -1302,8 +1440,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_runtime20.jsx)(import_remotion18.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_remotion18.Img,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_remotion15.Img,
     {
       src: resolveAsset5(src),
       style: {
@@ -1326,27 +1464,27 @@ var ImageRevealComponentMetadata = {
 };
 
 // src/components/composites/ImageSequence.tsx
-var import_remotion19 = require("remotion");
-var import_zod23 = require("zod");
-var import_jsx_runtime21 = 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_remotion16 = require("remotion");
+var import_zod26 = require("zod");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ImageSequencePropsSchema = import_zod26.z.object({
+  basePath: import_zod26.z.string().min(1),
+  frameCount: import_zod26.z.number().int().positive(),
+  filePattern: import_zod26.z.string().default("frame_{frame}.png"),
+  fps: import_zod26.z.number().int().min(1).max(120).default(30)
 });
 function joinPath(base, file) {
   if (base.endsWith("/")) return `${base}${file}`;
   return `${base}/${file}`;
 }
-var resolveAsset6 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion19.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset6 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion16.staticFile)(staticFileInputFromAssetPath(value));
 var ImageSequence = ({ basePath, frameCount, filePattern, fps }) => {
-  const frame = (0, import_remotion19.useCurrentFrame)();
-  const { fps: compFps } = (0, import_remotion19.useVideoConfig)();
+  const frame = (0, import_remotion16.useCurrentFrame)();
+  const { fps: compFps } = (0, import_remotion16.useVideoConfig)();
   const index = Math.min(frameCount - 1, Math.max(0, Math.floor(frame * fps / compFps)));
   const file = filePattern.replace("{frame}", String(index));
   const src = joinPath(basePath, file);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_remotion19.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_remotion19.Img, { src: resolveAsset6(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_remotion16.Img, { src: resolveAsset6(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) });
 };
 var ImageSequenceComponentMetadata = {
   kind: "composite",
@@ -1356,26 +1494,26 @@ var ImageSequenceComponentMetadata = {
 };
 
 // src/components/composites/ImageWithCaption.tsx
-var import_remotion20 = require("remotion");
-var import_zod24 = require("zod");
-var import_jsx_runtime22 = 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_remotion17 = require("remotion");
+var import_zod27 = require("zod");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var CaptionStyleSchema = import_zod27.z.object({
+  fontSize: import_zod27.z.number().min(12).max(80).default(32),
+  color: import_zod27.z.string().default("#FFFFFF"),
+  backgroundColor: import_zod27.z.string().default("rgba(0,0,0,0.7)")
 });
-var ImageWithCaptionPropsSchema = import_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_remotion20.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset7 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion17.staticFile)(staticFileInputFromAssetPath(value));
 var ImageWithCaption = ({ src, caption, captionPosition, captionStyle }) => {
-  const frame = (0, import_remotion20.useCurrentFrame)();
-  const p = (0, import_remotion20.interpolate)(frame, [8, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const frame = (0, import_remotion17.useCurrentFrame)();
+  const p = (0, import_remotion17.interpolate)(frame, [8, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const style = captionStyle ?? { fontSize: 32, color: "#FFFFFF", backgroundColor: "rgba(0,0,0,0.7)" };
-  const captionBox = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  const captionBox = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       style: {
@@ -1392,15 +1530,15 @@ var ImageWithCaption = ({ src, caption, captionPosition, captionStyle }) => {
     }
   );
   if (captionPosition === "top" || captionPosition === "bottom") {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_remotion20.AbsoluteFill, { style: { display: "flex", flexDirection: "column" }, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Fill, { style: { display: "flex", flexDirection: "column" }, children: [
       captionPosition === "top" ? captionBox : null,
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_remotion20.Img, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_remotion17.Img, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }) }),
       captionPosition === "bottom" ? captionBox : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_remotion20.AbsoluteFill, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_remotion20.Img, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0 }, children: captionBox })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Fill, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_remotion17.Img, { src: resolveAsset7(src), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0 }, children: captionBox })
   ] });
 };
 var ImageWithCaptionComponentMetadata = {
@@ -1411,19 +1549,19 @@ var ImageWithCaptionComponentMetadata = {
 };
 
 // src/components/composites/InstagramStory.tsx
-var import_remotion21 = require("remotion");
-var import_zod25 = require("zod");
-var import_jsx_runtime23 = 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_remotion18 = require("remotion");
+var import_zod28 = require("zod");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var InstagramStoryPropsSchema = import_zod28.z.object({
+  backgroundImage: import_zod28.z.string().optional(),
+  backgroundColor: import_zod28.z.string().default("#000000"),
+  profilePic: import_zod28.z.string().optional(),
+  username: import_zod28.z.string().optional(),
+  text: import_zod28.z.string().max(100).optional(),
+  sticker: import_zod28.z.enum(["none", "poll", "question", "countdown"]).default("none"),
+  musicTrack: import_zod28.z.string().optional()
 });
-var resolveAsset8 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion21.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset8 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion18.staticFile)(staticFileInputFromAssetPath(value));
 var InstagramStory = ({
   backgroundImage,
   backgroundColor,
@@ -1433,17 +1571,17 @@ var InstagramStory = ({
   sticker,
   musicTrack
 }) => {
-  const frame = (0, import_remotion21.useCurrentFrame)();
-  const fade = (0, import_remotion21.interpolate)(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_remotion21.AbsoluteFill, { style: { backgroundColor }, children: [
-    musicTrack ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_remotion21.Audio, { src: resolveAsset8(musicTrack), volume: 0.6 }) : null,
-    backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_remotion21.Img, { src: resolveAsset8(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover", opacity: fade } }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_remotion21.AbsoluteFill, { style: { padding: 60, boxSizing: "border-box" }, children: [
-      profilePic || username ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 18 }, children: [
-        profilePic ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_remotion21.Img, { src: resolveAsset8(profilePic), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "rgba(255,255,255,0.2)" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 34 }, children: username ?? "username" })
+  const frame = (0, import_remotion18.useCurrentFrame)();
+  const fade = (0, import_remotion18.interpolate)(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Fill, { style: { backgroundColor }, children: [
+    musicTrack ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_remotion18.Audio, { src: resolveAsset8(musicTrack), volume: 0.6 }) : null,
+    backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_remotion18.Img, { src: resolveAsset8(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover", opacity: fade } }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Fill, { style: { padding: 60, boxSizing: "border-box" }, children: [
+      profilePic || username ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 18 }, children: [
+        profilePic ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_remotion18.Img, { src: resolveAsset8(profilePic), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "rgba(255,255,255,0.2)" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { color: "#FFFFFF", fontWeight: 800, fontSize: 34 }, children: username ?? "username" })
       ] }) : null,
-      text ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      text ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "div",
         {
           style: {
@@ -1457,7 +1595,7 @@ var InstagramStory = ({
           children: text
         }
       ) : null,
-      sticker !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      sticker !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "div",
         {
           style: {
@@ -1486,18 +1624,18 @@ var InstagramStoryComponentMetadata = {
 };
 
 // src/components/composites/IntroScene.tsx
-var import_remotion22 = require("remotion");
-var import_zod26 = require("zod");
-var import_jsx_runtime24 = 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_remotion19 = require("remotion");
+var import_zod29 = require("zod");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var IntroScenePropsSchema = import_zod29.z.object({
+  logoSrc: import_zod29.z.string().min(1),
+  companyName: import_zod29.z.string().min(1),
+  tagline: import_zod29.z.string().optional(),
+  backgroundColor: import_zod29.z.string().default("#000000"),
+  primaryColor: import_zod29.z.string().default("#FFFFFF"),
+  musicTrack: import_zod29.z.string().optional()
 });
-var resolveAsset9 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion22.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset9 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion19.staticFile)(staticFileInputFromAssetPath(value));
 var IntroScene = ({
   logoSrc,
   companyName,
@@ -1507,25 +1645,25 @@ var IntroScene = ({
   musicTrack,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion22.useCurrentFrame)();
-  const { fps } = (0, import_remotion22.useVideoConfig)();
+  const frame = (0, import_remotion19.useCurrentFrame)();
+  const { fps } = (0, import_remotion19.useVideoConfig)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const logoP = (0, import_remotion22.spring)({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
-  const nameOpacity = (0, import_remotion22.interpolate)(frame, [20, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const taglineY = (0, import_remotion22.interpolate)(frame, [50, 80], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const outroFade = (0, import_remotion22.interpolate)(frame, [Math.max(0, total - 20), total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_remotion22.AbsoluteFill, { style: { backgroundColor, justifyContent: "center", alignItems: "center" }, children: [
-    musicTrack ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_remotion22.Audio, { src: resolveAsset9(musicTrack), volume: 0.7 }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { textAlign: "center", opacity: outroFade }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        import_remotion22.Img,
+  const logoP = (0, import_remotion19.spring)({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const nameOpacity = (0, import_remotion19.interpolate)(frame, [20, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const taglineY = (0, import_remotion19.interpolate)(frame, [50, 80], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const outroFade = (0, import_remotion19.interpolate)(frame, [Math.max(0, total - 20), total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+    musicTrack ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_remotion19.Audio, { src: resolveAsset9(musicTrack), volume: 0.7 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { textAlign: "center", opacity: outroFade }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        import_remotion19.Img,
         {
           src: resolveAsset9(logoSrc),
           style: { width: 280, height: 280, objectFit: "contain", transform: `scale(${logoP})` }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { marginTop: 24, color: primaryColor, fontSize: 64, fontWeight: 900, opacity: nameOpacity }, children: companyName }),
-      tagline ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: { marginTop: 24, color: primaryColor, fontSize: 64, fontWeight: 900, opacity: nameOpacity }, children: companyName }),
+      tagline ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "div",
         {
           style: {
@@ -1550,17 +1688,17 @@ var IntroSceneComponentMetadata = {
 };
 
 // src/components/composites/KenBurnsImage.tsx
-var import_remotion23 = require("remotion");
-var import_zod27 = require("zod");
-var import_jsx_runtime25 = 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_remotion20 = require("remotion");
+var import_zod30 = require("zod");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var KenBurnsImagePropsSchema = import_zod30.z.object({
+  src: import_zod30.z.string().min(1),
+  startScale: import_zod30.z.number().min(1).max(2).default(1),
+  endScale: import_zod30.z.number().min(1).max(2).default(1.2),
+  panDirection: import_zod30.z.enum(["none", "left", "right", "up", "down"]).default("none"),
+  panAmount: import_zod30.z.number().min(0).max(100).default(50)
 });
-var resolveAsset10 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion23.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset10 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion20.staticFile)(staticFileInputFromAssetPath(value));
 var KenBurnsImage = ({
   src,
   startScale,
@@ -1569,14 +1707,14 @@ var KenBurnsImage = ({
   panAmount,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion23.useCurrentFrame)();
+  const frame = (0, import_remotion20.useCurrentFrame)();
   const duration = Math.max(1, __wavesDurationInFrames ?? 1);
-  const t = (0, import_remotion23.interpolate)(frame, [0, duration], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const t = (0, import_remotion20.interpolate)(frame, [0, duration], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const scale = startScale + (endScale - startScale) * t;
   const dx = panDirection === "left" ? -panAmount * t : panDirection === "right" ? panAmount * t : 0;
   const dy = panDirection === "up" ? -panAmount * t : panDirection === "down" ? panAmount * t : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_remotion23.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    import_remotion23.Img,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_remotion20.Img,
     {
       src: resolveAsset10(src),
       style: {
@@ -1597,20 +1735,20 @@ var KenBurnsImageComponentMetadata = {
 };
 
 // src/components/composites/KineticTypography.tsx
-var import_remotion24 = require("remotion");
-var import_zod28 = require("zod");
-var import_jsx_runtime26 = 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_remotion21 = require("remotion");
+var import_zod31 = require("zod");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var WordSchema = import_zod31.z.object({
+  text: import_zod31.z.string().min(1),
+  emphasis: import_zod31.z.enum(["normal", "bold", "giant"]).default("normal")
 });
-var KineticTypographyPropsSchema = import_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,
@@ -1620,8 +1758,8 @@ var KineticTypography = ({
   timing,
   transition
 }) => {
-  const frame = (0, import_remotion24.useCurrentFrame)();
-  const { fps } = (0, import_remotion24.useVideoConfig)();
+  const frame = (0, import_remotion21.useCurrentFrame)();
+  const { fps } = (0, import_remotion21.useVideoConfig)();
   const starts = (() => {
     if (timing.length >= words.length) return timing.slice(0, words.length);
     const last = timing.length ? timing[timing.length - 1] : 0;
@@ -1634,13 +1772,13 @@ var KineticTypography = ({
   }
   const word = words[activeIndex];
   const start = starts[activeIndex] ?? 0;
-  const p = (0, import_remotion24.spring)({ frame: frame - start, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const p = (0, import_remotion21.spring)({ frame: frame - start, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
   const progress = Math.max(0, Math.min(1, p));
   const scaleBase = word.emphasis === "giant" ? 2 : word.emphasis === "bold" ? 1.3 : 1;
   const opacity = transition === "fade" ? progress : 1;
   const scale = transition === "scale" ? (0.85 + 0.15 * progress) * scaleBase : 1 * scaleBase;
   const tx = transition === "slideLeft" ? 40 * (1 - progress) : transition === "slideRight" ? -40 * (1 - progress) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_remotion24.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       style: {
@@ -1665,17 +1803,17 @@ var KineticTypographyComponentMetadata = {
 };
 
 // src/components/composites/LineGraph.tsx
-var import_remotion25 = require("remotion");
-var import_zod29 = require("zod");
-var import_jsx_runtime27 = 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_remotion22 = require("remotion");
+var import_zod32 = require("zod");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var PointSchema = import_zod32.z.object({ x: import_zod32.z.number(), y: import_zod32.z.number() });
+var LineGraphPropsSchema = import_zod32.z.object({
+  data: import_zod32.z.array(PointSchema).min(2).max(50),
+  color: import_zod32.z.string().default("#00FF00"),
+  strokeWidth: import_zod32.z.number().min(1).max(10).default(3),
+  showDots: import_zod32.z.boolean().default(true),
+  fillArea: import_zod32.z.boolean().default(false),
+  animate: import_zod32.z.enum(["draw", "reveal"]).default("draw")
 });
 function normalize(data, w, h, pad) {
   const xs = data.map((d) => d.x);
@@ -1701,9 +1839,9 @@ var LineGraph = ({
   animate,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion25.useCurrentFrame)();
+  const frame = (0, import_remotion22.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const progress = (0, import_remotion25.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const progress = (0, import_remotion22.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const w = 1e3;
   const h = 520;
   const pad = 30;
@@ -1711,9 +1849,9 @@ var LineGraph = ({
   const d = toPath(pts);
   const dash = 3e3;
   const dashOffset = dash * (1 - progress);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_remotion25.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("clipPath", { id: "waves-line-reveal", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("rect", { x: "0", y: "0", width: w * progress, height: h }) }) }),
-    fillArea ? /* @__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.jsxs)("svg", { viewBox: `0 0 ${w} ${h}`, style: { width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("clipPath", { id: "waves-line-reveal", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("rect", { x: "0", y: "0", width: w * progress, height: h }) }) }),
+    fillArea ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "path",
       {
         d: `${d} L ${pts[pts.length - 1].x} ${h - pad} L ${pts[0].x} ${h - pad} Z`,
@@ -1722,7 +1860,7 @@ var LineGraph = ({
         clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "path",
       {
         d,
@@ -1736,7 +1874,7 @@ var LineGraph = ({
         clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0
       }
     ),
-    showDots ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("g", { clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0, children: pts.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("circle", { cx: p.x, cy: p.y, r: 6, fill: color }, i)) }) : null
+    showDots ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("g", { clipPath: animate === "reveal" ? "url(#waves-line-reveal)" : void 0, children: pts.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: p.x, cy: p.y, r: 6, fill: color }, i)) }) : null
   ] }) });
 };
 var LineGraphComponentMetadata = {
@@ -1747,28 +1885,28 @@ var LineGraphComponentMetadata = {
 };
 
 // src/components/composites/LogoReveal.tsx
-var import_remotion26 = require("remotion");
-var import_zod30 = require("zod");
-var import_jsx_runtime28 = 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_remotion23 = require("remotion");
+var import_zod33 = require("zod");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var LogoRevealPropsSchema = import_zod33.z.object({
+  logoSrc: import_zod33.z.string().min(1),
+  effect: import_zod33.z.enum(["fade", "scale", "rotate", "slide"]).default("scale"),
+  backgroundColor: import_zod33.z.string().default("#000000"),
+  soundEffect: import_zod33.z.string().optional()
 });
-var resolveAsset11 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion26.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset11 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion23.staticFile)(staticFileInputFromAssetPath(value));
 var LogoReveal = ({ logoSrc, effect, backgroundColor, soundEffect }) => {
-  const frame = (0, import_remotion26.useCurrentFrame)();
-  const { fps } = (0, import_remotion26.useVideoConfig)();
-  const p = (0, import_remotion26.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } });
+  const frame = (0, import_remotion23.useCurrentFrame)();
+  const { fps } = (0, import_remotion23.useVideoConfig)();
+  const p = (0, import_remotion23.spring)({ frame, fps, config: { damping: 14, stiffness: 110, mass: 0.9 } });
   const opacity = effect === "fade" ? p : Math.min(1, Math.max(0, p));
   const scale = effect === "scale" ? p : 1;
   const rotate = effect === "rotate" ? (1 - p) * 360 : 0;
   const translateY = effect === "slide" ? -200 * (1 - p) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_remotion26.AbsoluteFill, { style: { backgroundColor, justifyContent: "center", alignItems: "center" }, children: [
-    soundEffect ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_remotion26.Audio, { src: resolveAsset11(soundEffect), volume: 1 }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      import_remotion26.Img,
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+    soundEffect ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_remotion23.Audio, { src: resolveAsset11(soundEffect), volume: 1 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      import_remotion23.Img,
       {
         src: resolveAsset11(logoSrc),
         style: {
@@ -1790,32 +1928,32 @@ var LogoRevealComponentMetadata = {
 };
 
 // src/components/composites/OutroScene.tsx
-var import_remotion27 = require("remotion");
-var import_zod31 = require("zod");
-var import_jsx_runtime29 = 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_remotion24 = require("remotion");
+var import_zod34 = require("zod");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var CtaSchema = import_zod34.z.object({ text: import_zod34.z.string().min(1), icon: import_zod34.z.string().optional() });
+var HandleSchema = import_zod34.z.object({
+  platform: import_zod34.z.enum(["twitter", "instagram", "youtube", "linkedin"]),
+  handle: import_zod34.z.string().min(1)
 });
-var OutroScenePropsSchema = import_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_remotion27.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset12 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion24.staticFile)(staticFileInputFromAssetPath(value));
 var OutroScene = ({ logoSrc, message, ctaButtons, socialHandles, backgroundColor }) => {
-  const frame = (0, import_remotion27.useCurrentFrame)();
-  const { fps } = (0, import_remotion27.useVideoConfig)();
-  const logoP = (0, import_remotion27.spring)({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
-  const msgP = (0, import_remotion27.spring)({ frame: frame - 18, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
-  const ctaP = (0, import_remotion27.spring)({ frame: frame - 40, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_remotion27.AbsoluteFill, { style: { backgroundColor, justifyContent: "center", alignItems: "center", padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { textAlign: "center" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_remotion27.Img, { src: resolveAsset12(logoSrc), style: { width: 220, height: 220, objectFit: "contain", transform: `scale(${logoP})` } }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: { marginTop: 24, color: "#FFFFFF", fontSize: 72, fontWeight: 1e3, opacity: msgP }, children: message }),
-    ctaButtons?.length ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: { marginTop: 34, display: "flex", gap: 18, justifyContent: "center", opacity: ctaP }, children: ctaButtons.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  const frame = (0, import_remotion24.useCurrentFrame)();
+  const { fps } = (0, import_remotion24.useVideoConfig)();
+  const logoP = (0, import_remotion24.spring)({ frame, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const msgP = (0, import_remotion24.spring)({ frame: frame - 18, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const ctaP = (0, import_remotion24.spring)({ frame: frame - 40, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Fill, { style: { backgroundColor, display: "flex", justifyContent: "center", alignItems: "center", padding: 80, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: { textAlign: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_remotion24.Img, { src: resolveAsset12(logoSrc), style: { width: 220, height: 220, objectFit: "contain", transform: `scale(${logoP})` } }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { marginTop: 24, color: "#FFFFFF", fontSize: 72, fontWeight: 1e3, opacity: msgP }, children: message }),
+    ctaButtons?.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { marginTop: 34, display: "flex", gap: 18, justifyContent: "center", opacity: ctaP }, children: ctaButtons.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "div",
       {
         style: {
@@ -1833,7 +1971,7 @@ var OutroScene = ({ logoSrc, message, ctaButtons, socialHandles, backgroundColor
       },
       i
     )) }) : null,
-    socialHandles?.length ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: { marginTop: 50, display: "flex", flexDirection: "column", gap: 10, opacity: ctaP }, children: socialHandles.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { color: "rgba(255,255,255,0.85)", fontSize: 26, fontWeight: 800 }, children: [
+    socialHandles?.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { marginTop: 50, display: "flex", flexDirection: "column", gap: 10, opacity: ctaP }, children: socialHandles.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: { color: "rgba(255,255,255,0.85)", fontSize: 26, fontWeight: 800 }, children: [
       h.platform,
       ": ",
       h.handle
@@ -1848,19 +1986,19 @@ var OutroSceneComponentMetadata = {
 };
 
 // src/components/composites/OutlineText.tsx
-var import_remotion28 = require("remotion");
-var import_zod32 = require("zod");
-var import_jsx_runtime30 = 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_remotion25 = require("remotion");
+var import_zod35 = require("zod");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var OutlineTextPropsSchema = import_zod35.z.object({
+  content: import_zod35.z.string().max(50),
+  fontSize: import_zod35.z.number().min(8).max(240).default(96),
+  outlineColor: import_zod35.z.string().default("#FFFFFF"),
+  fillColor: import_zod35.z.string().default("#000000"),
+  fontFamily: import_zod35.z.string().default("Inter"),
+  fontWeight: import_zod35.z.number().int().min(100).max(900).default(800),
+  position: import_zod35.z.enum(["top", "center", "bottom"]).default("center"),
+  animation: import_zod35.z.enum(["draw", "fill"]).default("draw"),
+  strokeWidth: import_zod35.z.number().min(1).max(10).default(3)
 });
 var positionStyles3 = (position) => {
   if (position === "top") return { justifyContent: "center", alignItems: "flex-start", paddingTop: 90 };
@@ -1878,12 +2016,12 @@ var OutlineText = ({
   animation,
   strokeWidth
 }) => {
-  const frame = (0, import_remotion28.useCurrentFrame)();
-  const t = (0, import_remotion28.interpolate)(frame, [0, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const frame = (0, import_remotion25.useCurrentFrame)();
+  const t = (0, import_remotion25.interpolate)(frame, [0, 24], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const strokeOpacity = animation === "draw" ? t : 1;
   const fillOpacity = animation === "fill" ? t : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_remotion28.AbsoluteFill, { style: { display: "flex", ...positionStyles3(position) }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Fill, { style: { display: "flex", ...positionStyles3(position) }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
         style: {
@@ -1900,7 +2038,7 @@ var OutlineText = ({
         children: content
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
         style: {
@@ -1927,16 +2065,16 @@ var OutlineTextComponentMetadata = {
 };
 
 // src/components/composites/ProgressBar.tsx
-var import_remotion29 = require("remotion");
-var import_zod33 = require("zod");
-var import_jsx_runtime31 = 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_remotion26 = require("remotion");
+var import_zod36 = require("zod");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var ProgressBarPropsSchema = import_zod36.z.object({
+  label: import_zod36.z.string().optional(),
+  color: import_zod36.z.string().default("#00FF00"),
+  backgroundColor: import_zod36.z.string().default("rgba(255,255,255,0.2)"),
+  height: import_zod36.z.number().min(5).max(50).default(10),
+  position: import_zod36.z.enum(["top", "bottom"]).default("bottom"),
+  showPercentage: import_zod36.z.boolean().default(true)
 });
 var ProgressBar = ({
   label,
@@ -1947,17 +2085,17 @@ var ProgressBar = ({
   showPercentage,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion29.useCurrentFrame)();
+  const frame = (0, import_remotion26.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const p = (0, import_remotion29.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const p = (0, import_remotion26.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const pct = Math.round(p * 100);
   const yStyle = position === "top" ? { top: 50 } : { bottom: 50 };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_remotion29.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { style: { position: "absolute", left: 80, right: 80, ...yStyle }, children: [
-    label || showPercentage ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 10, color: "#FFFFFF", fontWeight: 700 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: label ?? "" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: showPercentage ? `${pct}%` : "" })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { style: { position: "absolute", left: 80, right: 80, ...yStyle }, children: [
+    label || showPercentage ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 10, color: "#FFFFFF", fontWeight: 700 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: label ?? "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: showPercentage ? `${pct}%` : "" })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: { width: "100%", height, backgroundColor, borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: { width: `${pct}%`, height: "100%", backgroundColor: color } }) })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { style: { width: "100%", height, backgroundColor, borderRadius: 9999, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { style: { width: `${pct}%`, height: "100%", backgroundColor: color } }) })
   ] }) });
 };
 var ProgressBarComponentMetadata = {
@@ -1968,16 +2106,16 @@ var ProgressBarComponentMetadata = {
 };
 
 // src/components/composites/ProgressRing.tsx
-var import_remotion30 = require("remotion");
-var import_zod34 = require("zod");
-var import_jsx_runtime32 = 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_remotion27 = require("remotion");
+var import_zod37 = require("zod");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var ProgressRingPropsSchema = import_zod37.z.object({
+  percentage: import_zod37.z.number().min(0).max(100),
+  size: import_zod37.z.number().min(100).max(500).default(200),
+  strokeWidth: import_zod37.z.number().min(5).max(50).default(20),
+  color: import_zod37.z.string().default("#00FF00"),
+  backgroundColor: import_zod37.z.string().default("rgba(255,255,255,0.2)"),
+  showLabel: import_zod37.z.boolean().default(true)
 });
 var ProgressRing = ({
   percentage,
@@ -1988,17 +2126,17 @@ var ProgressRing = ({
   showLabel,
   __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 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_runtime32.jsxs)(import_remotion30.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Fill, { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "circle",
         {
           cx: size / 2,
@@ -2009,7 +2147,7 @@ var ProgressRing = ({
           fill: "transparent"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "circle",
         {
           cx: size / 2,
@@ -2025,7 +2163,7 @@ var ProgressRing = ({
         }
       )
     ] }),
-    showLabel ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { position: "absolute", color: "#FFFFFF", fontWeight: 800, fontSize: Math.round(size * 0.22) }, children: [
+    showLabel ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { position: "absolute", color: "#FFFFFF", fontWeight: 800, fontSize: Math.round(size * 0.22) }, children: [
       Math.round(current),
       "%"
     ] }) : null
@@ -2039,14 +2177,15 @@ var ProgressRingComponentMetadata = {
 };
 
 // src/components/composites/SlideTransition.tsx
-var import_remotion31 = require("remotion");
-var import_zod35 = require("zod");
-var import_jsx_runtime33 = 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_react7 = __toESM(require("react"));
+var import_remotion28 = require("remotion");
+var import_zod38 = require("zod");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var SlideTransitionPropsSchema = import_zod38.z.object({
+  durationInFrames: import_zod38.z.number().int().min(10).max(60).default(30),
+  direction: import_zod38.z.enum(["left", "right", "up", "down"]).default("left"),
+  distance: import_zod38.z.number().int().min(1).max(2e3).default(160),
+  phase: import_zod38.z.enum(["in", "out", "inOut"]).default("inOut")
 });
 function translateFor(direction, delta) {
   if (direction === "left") return { x: -delta, y: 0 };
@@ -2062,29 +2201,30 @@ var SlideTransition = ({
   children,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion31.useCurrentFrame)();
+  const layers = import_react7.default.Children.toArray(children);
+  const frame = (0, import_remotion28.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
   let opacity = 1;
   let tx = 0;
   let ty = 0;
   if (phase === "in" || phase === "inOut") {
-    const t = (0, import_remotion31.interpolate)(frame, [0, d], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion28.interpolate)(frame, [0, d], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     const { x, y } = translateFor(direction, distance * t);
     tx += x;
     ty += y;
-    opacity *= (0, import_remotion31.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    opacity *= (0, import_remotion28.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   }
   if (phase === "out" || phase === "inOut") {
     const start = Math.max(0, total - d);
-    const t = (0, import_remotion31.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion28.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     const opposite = direction === "left" ? "right" : direction === "right" ? "left" : direction === "up" ? "down" : "up";
     const { x, y } = translateFor(opposite, distance * t);
     tx += x;
     ty += y;
-    opacity *= (0, import_remotion31.interpolate)(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    opacity *= (0, import_remotion28.interpolate)(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_remotion31.AbsoluteFill, { style: { opacity, transform: `translate(${tx}px, ${ty}px)` }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Fill, { style: { opacity, transform: `translate(${tx}px, ${ty}px)` }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var SlideTransitionComponentMetadata = {
   kind: "composite",
@@ -2096,16 +2236,15 @@ var SlideTransitionComponentMetadata = {
 };
 
 // src/components/composites/SplitScreen.tsx
-var import_react = __toESM(require("react"));
-var import_remotion32 = require("remotion");
-var import_zod36 = require("zod");
-var import_jsx_runtime34 = 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_react8 = __toESM(require("react"));
+var import_zod39 = require("zod");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var SplitScreenPropsSchema = import_zod39.z.object({
+  orientation: import_zod39.z.enum(["vertical", "horizontal"]).default("vertical"),
+  split: import_zod39.z.number().min(0.1).max(0.9).default(0.5),
+  gap: import_zod39.z.number().min(0).default(48),
+  padding: import_zod39.z.number().min(0).default(80),
+  dividerColor: import_zod39.z.string().optional()
 });
 var SplitScreen = ({
   orientation,
@@ -2115,14 +2254,14 @@ var SplitScreen = ({
   dividerColor,
   children
 }) => {
-  const items = import_react.default.Children.toArray(children);
+  const items = import_react8.default.Children.toArray(children);
   const first = items[0] ?? null;
   const second = items[1] ?? null;
   const isVertical = orientation === "vertical";
   const flexDirection = isVertical ? "row" : "column";
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_remotion32.AbsoluteFill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { display: "flex", flexDirection, gap, width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { flex: split, position: "relative" }, children: first }),
-    dividerColor ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Fill, { style: { padding, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { style: { display: "flex", flexDirection, gap, width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { flex: split, position: "relative" }, children: first }),
+    dividerColor ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "div",
       {
         style: {
@@ -2133,7 +2272,7 @@ var SplitScreen = ({
         }
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { flex: 1 - split, position: "relative" }, children: second })
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { flex: 1 - split, position: "relative" }, children: second })
   ] }) });
 };
 var SplitScreenComponentMetadata = {
@@ -2147,22 +2286,25 @@ var SplitScreenComponentMetadata = {
 };
 
 // src/components/composites/SplitText.tsx
-var import_remotion33 = require("remotion");
-var import_zod37 = require("zod");
-var import_jsx_runtime35 = 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_remotion29 = require("remotion");
+var import_zod40 = require("zod");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var SplitTextPropsSchema = import_zod40.z.object({
+  content: import_zod40.z.string().max(200),
+  fontSize: import_zod40.z.number().min(8).max(200).default(48),
+  color: import_zod40.z.string().default("#FFFFFF"),
+  fontFamily: import_zod40.z.string().default("Inter"),
+  position: import_zod40.z.enum(["top", "center", "bottom"]).default("center"),
+  splitBy: import_zod40.z.enum(["word", "letter"]).default("word"),
+  stagger: import_zod40.z.number().int().min(1).max(10).default(3),
+  animation: import_zod40.z.enum(["fade", "slideUp", "slideDown", "scale", "rotate"]).default("slideUp"),
+  maxWidthPct: import_zod40.z.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: import_zod40.z.number().min(0).max(0.25).default(0.06)
 });
-var positionStyles4 = (position) => {
-  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) {
@@ -2189,12 +2331,14 @@ var SplitText = ({
   position,
   splitBy,
   stagger,
-  animation
+  animation,
+  maxWidthPct,
+  safeInsetPct
 }) => {
-  const frame = (0, import_remotion33.useCurrentFrame)();
-  const { fps } = (0, import_remotion33.useVideoConfig)();
+  const frame = (0, import_remotion29.useCurrentFrame)();
+  const { fps } = (0, import_remotion29.useVideoConfig)();
   const items = splitBy === "letter" ? content.split("") : content.trim().split(/\s+/);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_remotion33.AbsoluteFill, { style: { display: "flex", ...positionStyles4(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Fill, { style: { display: "flex", ...positionStyles4(position, safeInsetPct) }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       style: {
@@ -2202,19 +2346,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_remotion33.spring)({
+        const progress = (0, import_remotion29.spring)({
           frame: frame - i * stagger,
           fps,
           config: { damping: 14, stiffness: 120, mass: 0.9 }
         });
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "span",
           {
             style: {
@@ -2242,19 +2389,19 @@ var SplitTextComponentMetadata = {
 };
 
 // src/components/composites/SubtitleText.tsx
-var import_remotion34 = require("remotion");
-var import_zod38 = require("zod");
-var import_jsx_runtime36 = 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_remotion30 = require("remotion");
+var import_zod41 = require("zod");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var SubtitleTextPropsSchema = import_zod41.z.object({
+  text: import_zod41.z.string().max(200),
+  fontSize: import_zod41.z.number().min(12).max(80).default(36),
+  color: import_zod41.z.string().default("#FFFFFF"),
+  backgroundColor: import_zod41.z.string().default("rgba(0,0,0,0.7)"),
+  fontFamily: import_zod41.z.string().default("Inter"),
+  position: import_zod41.z.enum(["top", "bottom"]).default("bottom"),
+  maxWidth: import_zod41.z.number().min(200).max(1200).default(800),
+  padding: import_zod41.z.number().min(0).max(80).default(20),
+  highlightWords: import_zod41.z.array(import_zod41.z.string()).optional()
 });
 function normalizeWord(w) {
   return w.toLowerCase().replace(/[^a-z0-9]/g, "");
@@ -2271,15 +2418,15 @@ var SubtitleText = ({
   highlightWords,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion34.useCurrentFrame)();
+  const frame = (0, import_remotion30.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const inFade = (0, import_remotion34.interpolate)(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const outFade = (0, import_remotion34.interpolate)(frame, [Math.max(0, total - 10), total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const inFade = (0, import_remotion30.interpolate)(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const outFade = (0, import_remotion30.interpolate)(frame, [Math.max(0, total - 10), total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const opacity = inFade * outFade;
   const highlights = new Set((highlightWords ?? []).map(normalizeWord));
   const tokens = text.split(/\s+/);
   const yStyle = position === "top" ? { top: 70 } : { bottom: 90 };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_remotion34.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: { position: "absolute", left: "50%", transform: "translateX(-50%)", maxWidth, width: "100%", ...yStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { position: "absolute", left: "50%", transform: "translateX(-50%)", maxWidth, width: "100%", ...yStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
       style: {
@@ -2298,7 +2445,7 @@ var SubtitleText = ({
       children: tokens.map((t, i) => {
         const n = normalizeWord(t);
         const isHighlighted = highlights.has(n);
-        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { color: isHighlighted ? "#FFD60A" : color, marginRight: 8 }, children: t }, i);
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { style: { color: isHighlighted ? "#FFD60A" : color, marginRight: 8 }, children: t }, i);
       })
     }
   ) }) });
@@ -2311,17 +2458,19 @@ var SubtitleTextComponentMetadata = {
 };
 
 // src/components/composites/TikTokCaption.tsx
-var import_remotion35 = require("remotion");
-var import_zod39 = require("zod");
-var import_jsx_runtime37 = 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_remotion31 = require("remotion");
+var import_zod42 = require("zod");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var TikTokCaptionPropsSchema = import_zod42.z.object({
+  text: import_zod42.z.string().max(150),
+  fontSize: import_zod42.z.number().min(12).max(120).default(48),
+  color: import_zod42.z.string().default("#FFFFFF"),
+  strokeColor: import_zod42.z.string().default("#000000"),
+  strokeWidth: import_zod42.z.number().min(0).max(10).default(3),
+  position: import_zod42.z.enum(["center", "bottom"]).default("center"),
+  highlightStyle: import_zod42.z.enum(["word", "bounce", "none"]).default("word"),
+  maxWidthPct: import_zod42.z.number().min(0.1).max(1).default(0.92),
+  safeInsetPct: import_zod42.z.number().min(0).max(0.25).default(0.06)
 });
 var TikTokCaption = ({
   text,
@@ -2331,18 +2480,21 @@ var TikTokCaption = ({
   strokeWidth,
   position,
   highlightStyle,
+  maxWidthPct,
+  safeInsetPct,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion35.useCurrentFrame)();
+  const frame = (0, import_remotion31.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
-  const p = (0, import_remotion35.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const p = (0, import_remotion31.interpolate)(frame, [0, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const words = text.trim().split(/\s+/);
   const idx = highlightStyle === "none" ? -1 : Math.min(words.length - 1, Math.floor(p * words.length));
-  const yStyle = position === "bottom" ? { alignItems: "flex-end", paddingBottom: 140 } : { alignItems: "center" };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_remotion35.AbsoluteFill, { style: { display: "flex", justifyContent: "center", ...yStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime41.jsx)(Fill, { style: { display: "flex", justifyContent: "center", ...yStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { textAlign: "center", paddingLeft: inset, paddingRight: inset, maxWidth: `${Math.round(maxWidthPct * 100)}%`, fontWeight: 900, lineHeight: 1.1, overflowWrap: "anywhere", wordBreak: "break-word" }, children: words.map((w, i) => {
     const isActive = i === idx && highlightStyle !== "none";
-    const bounce = isActive && highlightStyle === "bounce" ? (0, import_remotion35.interpolate)(frame % 18, [0, 9, 18], [1, 1.08, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) : 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    const bounce = isActive && highlightStyle === "bounce" ? (0, import_remotion31.interpolate)(frame % 18, [0, 9, 18], [1, 1.08, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) : 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "span",
       {
         style: {
@@ -2367,20 +2519,20 @@ var TikTokCaptionComponentMetadata = {
 };
 
 // src/components/composites/ThirdLowerBanner.tsx
-var import_remotion36 = require("remotion");
-var import_zod40 = require("zod");
-var import_jsx_runtime38 = 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_remotion32 = require("remotion");
+var import_zod43 = require("zod");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var ThirdLowerBannerPropsSchema = import_zod43.z.object({
+  name: import_zod43.z.string().max(50),
+  title: import_zod43.z.string().max(100),
+  backgroundColor: import_zod43.z.string().default("rgba(0,0,0,0.8)"),
+  primaryColor: import_zod43.z.string().default("#FFFFFF"),
+  secondaryColor: import_zod43.z.string().default("#CCCCCC"),
+  accentColor: import_zod43.z.string().default("#FF0000"),
+  showAvatar: import_zod43.z.boolean().default(false),
+  avatarSrc: import_zod43.z.string().optional()
 });
-var resolveAsset13 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion36.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset13 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion32.staticFile)(staticFileInputFromAssetPath(value));
 var ThirdLowerBanner = ({
   name,
   title,
@@ -2391,11 +2543,11 @@ var ThirdLowerBanner = ({
   showAvatar,
   avatarSrc
 }) => {
-  const frame = (0, import_remotion36.useCurrentFrame)();
-  const slide = (0, import_remotion36.interpolate)(frame, [0, 18], [-600, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const opacity = (0, import_remotion36.interpolate)(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const frame = (0, import_remotion32.useCurrentFrame)();
+  const slide = (0, import_remotion32.interpolate)(frame, [0, 18], [-600, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const opacity = (0, import_remotion32.interpolate)(frame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
   const avatar = showAvatar && typeof avatarSrc === "string" && avatarSrc.length > 0 ? avatarSrc : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_remotion36.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       style: {
@@ -2412,17 +2564,17 @@ var ThirdLowerBanner = ({
         backgroundColor
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { width: 10, backgroundColor: accentColor } }),
-        avatar ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { width: 160, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-          import_remotion36.Img,
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: { width: 10, backgroundColor: accentColor } }),
+        avatar ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: { width: 160, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          import_remotion32.Img,
           {
             src: resolveAsset13(avatar),
             style: { width: 110, height: 110, borderRadius: 9999, objectFit: "cover" }
           }
         ) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { style: { padding: "28px 36px", display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { color: primaryColor, fontSize: 54, fontWeight: 800, lineHeight: 1 }, children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { marginTop: 10, color: secondaryColor, fontSize: 28, fontWeight: 600 }, children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { style: { padding: "28px 36px", display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: { color: primaryColor, fontSize: 54, fontWeight: 800, lineHeight: 1 }, children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: { marginTop: 10, color: secondaryColor, fontSize: 28, fontWeight: 600 }, children: title })
         ] })
       ]
     }
@@ -2440,22 +2592,25 @@ var ThirdLowerBannerComponentMetadata = {
 };
 
 // src/components/composites/TypewriterText.tsx
-var import_remotion37 = require("remotion");
-var import_zod41 = require("zod");
-var import_jsx_runtime39 = 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_remotion33 = require("remotion");
+var import_zod44 = require("zod");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var TypewriterTextPropsSchema = import_zod44.z.object({
+  content: import_zod44.z.string().max(500),
+  fontSize: import_zod44.z.number().min(8).max(200).default(48),
+  color: import_zod44.z.string().default("#FFFFFF"),
+  fontFamily: import_zod44.z.string().default("Inter"),
+  position: import_zod44.z.enum(["top", "center", "bottom"]).default("center"),
+  speed: import_zod44.z.number().min(0.5).max(5).default(2),
+  showCursor: import_zod44.z.boolean().default(true),
+  cursorColor: import_zod44.z.string().default("#FFFFFF"),
+  maxWidthPct: import_zod44.z.number().min(0.1).max(1).default(0.9),
+  safeInsetPct: import_zod44.z.number().min(0).max(0.25).default(0.06)
 });
-var positionStyles5 = (position) => {
-  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 = ({
@@ -2466,17 +2621,19 @@ var TypewriterText = ({
   position,
   speed,
   showCursor,
-  cursorColor
+  cursorColor,
+  maxWidthPct,
+  safeInsetPct
 }) => {
-  const frame = (0, import_remotion37.useCurrentFrame)();
+  const frame = (0, import_remotion33.useCurrentFrame)();
   const charCount = Math.min(content.length, Math.max(0, Math.floor(frame * speed)));
   const shown = content.slice(0, charCount);
   const cursorVisible = showCursor && charCount < content.length ? frame % 30 < 15 : false;
   const cursorOpacity = cursorVisible ? 1 : 0;
-  const cursorFade = (0, import_remotion37.interpolate)(frame % 30, [0, 5], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_remotion37.AbsoluteFill, { style: { display: "flex", ...positionStyles5(position) }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { fontSize, color, fontFamily, fontWeight: 600, textAlign: "center", whiteSpace: "pre-wrap" }, children: [
+  const cursorFade = (0, import_remotion33.interpolate)(frame % 30, [0, 5], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Fill, { style: { display: "flex", ...positionStyles5(position, safeInsetPct) }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { style: { fontSize, color, fontFamily, fontWeight: 600, textAlign: "center", whiteSpace: "pre-wrap", maxWidth: `${Math.round(maxWidthPct * 100)}%`, overflowWrap: "anywhere", wordBreak: "break-word" }, children: [
     shown,
-    showCursor ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { color: cursorColor, opacity: cursorOpacity * cursorFade }, children: "|" }) : null
+    showCursor ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { style: { color: cursorColor, opacity: cursorOpacity * cursorFade }, children: "|" }) : null
   ] }) });
 };
 var TypewriterTextComponentMetadata = {
@@ -2491,21 +2648,21 @@ var TypewriterTextComponentMetadata = {
 };
 
 // src/components/composites/TwitterCard.tsx
-var import_remotion38 = require("remotion");
-var import_zod42 = require("zod");
-var import_jsx_runtime40 = 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_remotion34 = require("remotion");
+var import_zod45 = require("zod");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var TwitterCardPropsSchema = import_zod45.z.object({
+  author: import_zod45.z.string().min(1),
+  handle: import_zod45.z.string().min(1),
+  avatarSrc: import_zod45.z.string().optional(),
+  tweet: import_zod45.z.string().max(280),
+  image: import_zod45.z.string().optional(),
+  timestamp: import_zod45.z.string().optional(),
+  verified: import_zod45.z.boolean().default(false)
 });
-var resolveAsset14 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion38.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset14 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion34.staticFile)(staticFileInputFromAssetPath(value));
 var TwitterCard = ({ author, handle, avatarSrc, tweet, image, timestamp, verified }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_remotion38.AbsoluteFill, { style: { backgroundColor: "#0B0F14", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Fill, { style: { backgroundColor: "#0B0F14", display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
       style: {
@@ -2517,19 +2674,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_runtime40.jsxs)("div", { style: { display: "flex", gap: 18, alignItems: "center" }, children: [
-          avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_remotion38.Img, { src: resolveAsset14(avatarSrc), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "#E5E7EB" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { fontSize: 34, fontWeight: 900, color: "#111827" }, children: author }),
-              verified ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { fontSize: 26, color: "#1D9BF0", fontWeight: 900 }, children: "\u2713" }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: 18, alignItems: "center" }, children: [
+          avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_remotion34.Img, { src: resolveAsset14(avatarSrc), style: { width: 78, height: 78, borderRadius: 9999, objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { width: 78, height: 78, borderRadius: 9999, backgroundColor: "#E5E7EB" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { fontSize: 34, fontWeight: 900, color: "#111827" }, children: author }),
+              verified ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { fontSize: 26, color: "#1D9BF0", fontWeight: 900 }, children: "\u2713" }) : null
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { fontSize: 26, color: "#6B7280", fontWeight: 800 }, children: handle })
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { fontSize: 26, color: "#6B7280", fontWeight: 800 }, children: handle })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { marginTop: 28, fontSize: 36, lineHeight: 1.25, color: "#111827", fontWeight: 700 }, children: tweet }),
-        image ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { marginTop: 28, width: "100%", height: 520, overflow: "hidden", borderRadius: 22, backgroundColor: "#F3F4F6" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_remotion38.Img, { src: resolveAsset14(image), style: { width: "100%", height: "100%", objectFit: "cover" } }) }) : null,
-        timestamp ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { marginTop: 22, fontSize: 22, color: "#6B7280", fontWeight: 700 }, children: timestamp }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: 28, fontSize: 36, lineHeight: 1.25, color: "#111827", fontWeight: 700 }, children: tweet }),
+        image ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: 28, width: "100%", height: 520, overflow: "hidden", borderRadius: 22, backgroundColor: "#F3F4F6" }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_remotion34.Img, { src: resolveAsset14(image), style: { width: "100%", height: "100%", objectFit: "cover" } }) }) : null,
+        timestamp ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: 22, fontSize: 22, color: "#6B7280", fontWeight: 700 }, children: timestamp }) : null
       ]
     }
   ) });
@@ -2542,19 +2699,19 @@ var TwitterCardComponentMetadata = {
 };
 
 // src/components/composites/Watermark.tsx
-var import_remotion39 = require("remotion");
-var import_zod43 = require("zod");
-var import_jsx_runtime41 = 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_remotion35 = require("remotion");
+var import_zod46 = require("zod");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var WatermarkPropsSchema = import_zod46.z.object({
+  type: import_zod46.z.enum(["logo", "text"]).default("logo"),
+  src: import_zod46.z.string().optional(),
+  text: import_zod46.z.string().optional(),
+  position: import_zod46.z.enum(["topLeft", "topRight", "bottomLeft", "bottomRight"]).default("bottomRight"),
+  opacity: import_zod46.z.number().min(0.1).max(1).default(0.5),
+  size: import_zod46.z.number().min(30).max(150).default(60),
+  color: import_zod46.z.string().default("#FFFFFF")
 });
-var resolveAsset15 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion39.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset15 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion35.staticFile)(staticFileInputFromAssetPath(value));
 function posStyle(position) {
   const offset = 30;
   if (position === "topLeft") return { left: offset, top: offset };
@@ -2569,8 +2726,8 @@ var Watermark = ({ type, src, text, position, opacity, size, color }) => {
     opacity,
     pointerEvents: "none"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_remotion39.AbsoluteFill, { children: type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: { ...style, fontSize: Math.round(size * 0.6), color, fontWeight: 700 }, children: text ?? "" }) : src ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-    import_remotion39.Img,
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Fill, { children: type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { ...style, fontSize: Math.round(size * 0.6), color, fontWeight: 700 }, children: text ?? "" }) : src ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_remotion35.Img,
     {
       src: resolveAsset15(src),
       style: { ...style, width: size, height: size, objectFit: "contain" }
@@ -2584,19 +2741,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_remotion40 = require("remotion");
-var import_zod44 = require("zod");
-var import_jsx_runtime42 = 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_react9 = __toESM(require("react"));
+var import_remotion36 = require("remotion");
+var import_zod47 = require("zod");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var WipeTransitionPropsSchema = import_zod47.z.object({
+  durationInFrames: import_zod47.z.number().int().min(10).max(60).default(30),
+  direction: import_zod47.z.enum(["left", "right", "up", "down", "diagonal"]).default("right"),
+  softEdge: import_zod47.z.boolean().default(false),
+  phase: import_zod47.z.enum(["in", "out", "inOut"]).default("inOut")
 });
 function clipFor2(direction, p) {
   if (direction === "left") return `inset(0 ${100 * (1 - p)}% 0 0)`;
@@ -2613,20 +2771,21 @@ var WipeTransition = ({
   children,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion40.useCurrentFrame)();
+  const layers = import_react9.default.Children.toArray(children);
+  const frame = (0, import_remotion36.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
   let clipPath;
   if (phase === "in" || phase === "inOut") {
-    const t = (0, import_remotion40.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion36.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     clipPath = clipFor2(direction, t);
   }
   if (phase === "out" || phase === "inOut") {
     const start = Math.max(0, total - d);
-    const t = (0, import_remotion40.interpolate)(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion36.interpolate)(frame, [start, total], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     clipPath = clipFor2(direction, t);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_remotion40.AbsoluteFill, { style: { clipPath, filter: softEdge ? "blur(0.4px)" : void 0 }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Fill, { style: { clipPath, filter: softEdge ? "blur(0.4px)" : void 0 }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var WipeTransitionComponentMetadata = {
   kind: "composite",
@@ -2638,18 +2797,18 @@ var WipeTransitionComponentMetadata = {
 };
 
 // src/components/composites/YouTubeThumbnail.tsx
-var import_remotion41 = require("remotion");
-var import_zod45 = require("zod");
-var import_jsx_runtime43 = 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_remotion37 = require("remotion");
+var import_zod48 = require("zod");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var YouTubeThumbnailPropsSchema = import_zod48.z.object({
+  backgroundImage: import_zod48.z.string().min(1),
+  title: import_zod48.z.string().max(60),
+  subtitle: import_zod48.z.string().max(40).optional(),
+  thumbnailFace: import_zod48.z.string().optional(),
+  accentColor: import_zod48.z.string().default("#FF0000"),
+  style: import_zod48.z.enum(["bold", "minimal", "dramatic"]).default("bold")
 });
-var resolveAsset16 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion41.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset16 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion37.staticFile)(staticFileInputFromAssetPath(value));
 var YouTubeThumbnail = ({
   backgroundImage,
   title,
@@ -2658,18 +2817,18 @@ var YouTubeThumbnail = ({
   accentColor,
   style
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_remotion41.AbsoluteFill, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_remotion41.Img, { src: resolveAsset16(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover" } }),
-    style === "dramatic" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_remotion41.AbsoluteFill, { style: { backgroundColor: "rgba(0,0,0,0.35)" } }) : null,
-    thumbnailFace ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      import_remotion41.Img,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Fill, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_remotion37.Img, { src: resolveAsset16(backgroundImage), style: { width: "100%", height: "100%", objectFit: "cover" } }),
+    style === "dramatic" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { style: { position: "absolute", inset: 0, backgroundColor: "rgba(0,0,0,0.35)" } }) : null,
+    thumbnailFace ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      import_remotion37.Img,
       {
         src: resolveAsset16(thumbnailFace),
         style: { position: "absolute", right: 60, bottom: 0, width: 520, height: 720, objectFit: "cover" }
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { style: { position: "absolute", left: 70, top: 90, width: 1100 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { style: { position: "absolute", left: 70, top: 90, width: 1100 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         "div",
         {
           style: {
@@ -2684,9 +2843,9 @@ var YouTubeThumbnail = ({
           children: title
         }
       ),
-      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime47.jsx)("div", { style: { marginTop: 26, fontSize: 52, fontWeight: 900, color: accentColor, textShadow: "0 10px 30px rgba(0,0,0,0.6)" }, children: subtitle }) : null
     ] }),
-    style !== "minimal" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { style: { position: "absolute", left: 70, bottom: 80, width: 260, height: 18, backgroundColor: accentColor, borderRadius: 9999 } }) : null
+    style !== "minimal" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { style: { position: "absolute", left: 70, bottom: 80, width: 260, height: 18, backgroundColor: accentColor, borderRadius: 9999 } }) : null
   ] });
 };
 var YouTubeThumbnailComponentMetadata = {
@@ -2697,37 +2856,39 @@ var YouTubeThumbnailComponentMetadata = {
 };
 
 // src/components/composites/VideoWithOverlay.tsx
-var import_remotion42 = require("remotion");
-var import_zod46 = require("zod");
-var import_jsx_runtime44 = 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_remotion38 = require("remotion");
+var import_zod49 = require("zod");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var OverlaySchema = import_zod49.z.object({
+  type: import_zod49.z.enum(["text", "logo", "gradient"]),
+  content: import_zod49.z.string().optional(),
+  opacity: import_zod49.z.number().min(0).max(1).default(0.3),
+  position: import_zod49.z.enum(["top", "bottom", "center", "full"]).default("bottom")
 });
-var VideoWithOverlayPropsSchema = import_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_remotion42.staticFile)(staticFileInputFromAssetPath(value));
+var resolveAsset17 = (value) => isRemoteAssetPath(value) ? value : (0, import_remotion38.staticFile)(staticFileInputFromAssetPath(value));
 var VideoWithOverlay = ({ src, overlay, volume, playbackRate }) => {
-  const frame = (0, import_remotion42.useCurrentFrame)();
-  const fade = (0, import_remotion42.interpolate)(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const overlayNode = overlay ? overlay.type === "gradient" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    import_remotion42.AbsoluteFill,
+  const frame = (0, import_remotion38.useCurrentFrame)();
+  const fade = (0, import_remotion38.interpolate)(frame, [0, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const overlayFill = { position: "absolute", inset: 0 };
+  const overlayNode = overlay ? overlay.type === "gradient" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "div",
     {
       style: {
+        ...overlayFill,
         opacity: overlay.opacity,
         background: overlay.position === "top" ? "linear-gradient(rgba(0,0,0,0.85), transparent)" : overlay.position === "bottom" ? "linear-gradient(transparent, rgba(0,0,0,0.85))" : "linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6))"
       }
     }
-  ) : overlay.type === "logo" && overlay.content ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_remotion42.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_remotion42.Img, { src: resolveAsset17(overlay.content), style: { width: 220, height: 220, objectFit: "contain" } }) }) : overlay.type === "text" && overlay.content ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_remotion42.AbsoluteFill, { style: { justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { color: "#FFFFFF", fontSize: 56, fontWeight: 900, textAlign: "center", padding: "0 80px" }, children: overlay.content }) }) : null : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_remotion42.AbsoluteFill, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      import_remotion42.Video,
+  ) : overlay.type === "logo" && overlay.content ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { ...overlayFill, display: "flex", justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_remotion38.Img, { src: resolveAsset17(overlay.content), style: { width: 220, height: 220, objectFit: "contain" } }) }) : overlay.type === "text" && overlay.content ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { ...overlayFill, display: "flex", justifyContent: "center", alignItems: "center", opacity: overlay.opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { color: "#FFFFFF", fontSize: 56, fontWeight: 900, textAlign: "center", padding: "0 80px" }, children: overlay.content }) }) : null : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Fill, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      import_remotion38.Video,
       {
         src: resolveAsset17(src),
         style: { width: "100%", height: "100%", objectFit: "cover", opacity: fade },
@@ -2746,13 +2907,14 @@ var VideoWithOverlayComponentMetadata = {
 };
 
 // src/components/composites/ZoomTransition.tsx
-var import_remotion43 = require("remotion");
-var import_zod47 = require("zod");
-var import_jsx_runtime45 = 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_react10 = __toESM(require("react"));
+var import_remotion39 = require("remotion");
+var import_zod50 = require("zod");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var ZoomTransitionPropsSchema = import_zod50.z.object({
+  durationInFrames: import_zod50.z.number().int().min(10).max(60).default(30),
+  type: import_zod50.z.enum(["zoomIn", "zoomOut"]).default("zoomIn"),
+  phase: import_zod50.z.enum(["in", "out", "inOut"]).default("inOut")
 });
 var ZoomTransition = ({
   durationInFrames,
@@ -2761,7 +2923,8 @@ var ZoomTransition = ({
   children,
   __wavesDurationInFrames
 }) => {
-  const frame = (0, import_remotion43.useCurrentFrame)();
+  const layers = import_react10.default.Children.toArray(children);
+  const frame = (0, import_remotion39.useCurrentFrame)();
   const total = Math.max(1, __wavesDurationInFrames ?? 1);
   const d = Math.min(durationInFrames, total);
   let opacity = 1;
@@ -2769,17 +2932,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_remotion43.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion39.interpolate)(frame, [0, d], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     scale *= enterFrom + (1 - enterFrom) * t;
     opacity *= t;
   }
   if (phase === "out" || phase === "inOut") {
     const start = Math.max(0, total - d);
-    const t = (0, import_remotion43.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const t = (0, import_remotion39.interpolate)(frame, [start, total], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
     scale *= 1 + (exitTo - 1) * t;
     opacity *= 1 - t;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_remotion43.AbsoluteFill, { style: { opacity, transform: `scale(${scale})` }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Fill, { style: { opacity, transform: `scale(${scale})` }, children: layers.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style: { position: "absolute", inset: 0 }, children: child }, i)) });
 };
 var ZoomTransitionComponentMetadata = {
   kind: "composite",
@@ -2808,6 +2971,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",
@@ -2824,6 +2995,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",
@@ -3562,14 +3749,16 @@ var WavesEngine = class {
         onProgress: () => void 0
       });
       const compositionId = validatedIR.video.id ?? "main";
+      const inputProps = options.inputProps ?? {};
       const composition = await (0, import_renderer.selectComposition)({
         serveUrl: bundleLocation,
         id: compositionId,
-        inputProps: {}
+        inputProps
       });
       await (0, import_renderer.renderMedia)({
         composition,
         serveUrl: bundleLocation,
+        inputProps,
         codec: options.codec ?? "h264",
         outputLocation: options.outputPath,
         crf: options.crf ?? null,
@@ -3582,6 +3771,70 @@ var WavesEngine = class {
       await import_promises.default.rm(tmpDir, { recursive: true, force: true });
     }
   }
+  async renderStills(ir, options) {
+    if (this.registry !== globalRegistry) {
+      throw new WavesRenderError("WavesEngine currently requires using globalRegistry", {
+        hint: "Use `registerBuiltInComponents()` + `globalRegistry` for both validation and rendering."
+      });
+    }
+    const validationResult = this.validator.validate(ir);
+    if (!validationResult.success) {
+      throw new WavesRenderError("IR validation failed", { errors: validationResult.errors });
+    }
+    const validatedIR = validationResult.data;
+    const requiredTypes = collectComponentTypes(validatedIR);
+    for (const type of requiredTypes) {
+      if (!this.registry.has(type)) {
+        throw new WavesRenderError("Unknown component type", { type });
+      }
+    }
+    const rootDir = options.rootDir ?? process.cwd();
+    const tmpDir = await import_promises.default.mkdtemp(import_node_path.default.join(rootDir, ".waves-tmp-"));
+    const entryPoint = import_node_path.default.join(tmpDir, "entry.tsx");
+    try {
+      await import_promises.default.writeFile(entryPoint, generateEntryPoint(validatedIR, options), "utf-8");
+      await import_promises.default.mkdir(options.outputDir, { recursive: true });
+      const bundleLocation = await (0, import_bundler.bundle)({
+        entryPoint,
+        rootDir,
+        publicDir: options.publicDir ?? null,
+        onProgress: () => void 0
+      });
+      const compositionId = validatedIR.video.id ?? "main";
+      const inputProps = options.inputProps ?? {};
+      const composition = await (0, import_renderer.selectComposition)({
+        serveUrl: bundleLocation,
+        id: compositionId,
+        inputProps
+      });
+      const frames = Array.from(new Set(options.frames)).sort((a, b) => a - b);
+      const written = [];
+      for (const frame of frames) {
+        const clamped = Math.max(0, Math.min(composition.durationInFrames - 1, Math.floor(frame)));
+        const imageFormat = options.imageFormat ?? "png";
+        const filename = `${compositionId}-frame-${String(clamped).padStart(6, "0")}.${imageFormat}`;
+        const outPath = import_node_path.default.join(options.outputDir, filename);
+        const stillOptions = {
+          composition,
+          serveUrl: bundleLocation,
+          inputProps,
+          frame: clamped,
+          output: outPath,
+          imageFormat,
+          scale: options.scale ?? 1,
+          overwrite: true,
+          ...imageFormat === "jpeg" ? { jpegQuality: options.jpegQuality ?? 80 } : {}
+        };
+        await (0, import_renderer.renderStill)(stillOptions);
+        written.push(outPath);
+      }
+      return written;
+    } catch (error) {
+      throw new WavesRenderError("Rendering failed", { originalError: error });
+    } finally {
+      await import_promises.default.rm(tmpDir, { recursive: true, force: true });
+    }
+  }
 };
 function collectComponentTypes(ir) {
   const types = /* @__PURE__ */ new Set();
@@ -3616,8 +3869,10 @@ registerBuiltInComponents();
 const ir = ${JSON.stringify(ir, null, 2)};
 const compositionId = ${JSON.stringify(compositionId)};
 
-const Root = () => {
-  return <WavesComposition ir={ir} registry={globalRegistry} />;
+const Root = (props) => {
+  const debugBounds = Boolean(props?.__wavesDebugBounds);
+  const debugLabels = Boolean(props?.__wavesDebugLabels);
+  return <WavesComposition ir={ir} registry={globalRegistry} debug={{ bounds: debugBounds, labels: debugLabels }} />;
 };
 
 export const RemotionRoot = () => {
@@ -3664,7 +3919,7 @@ function parseArgs(argv) {
       const hasInlineValue = eq >= 0;
       const inlineValue = hasInlineValue ? arg.slice(eq + 1) : void 0;
       const next = argv[i + 1];
-      const isBoolean = key === "help" || key === "pretty" || key === "includeInternal";
+      const isBoolean = key === "help" || key === "pretty" || key === "includeInternal" || key === "debugBounds" || key === "debugLabels";
       if (isBoolean) {
         flags[key] = true;
         continue;
@@ -3709,6 +3964,7 @@ Commands:
   write-ir    Write a starter IR JSON file
   validate    Validate an IR JSON file
   render      Render MP4 from an IR JSON file
+  stills      Render PNG/JPEG/WebP still frames from an IR JSON file
 
 Options:
   -h, --help       Show help
@@ -3745,6 +4001,10 @@ async function importRegistrationModules(modules) {
 function stringifyJSON(value, pretty) {
   return JSON.stringify(value, null, pretty ? 2 : 0) + "\n";
 }
+function parseImageFormat(raw) {
+  if (raw === "png" || raw === "jpeg" || raw === "webp") return raw;
+  return null;
+}
 async function main(argv = process.argv.slice(2)) {
   const parsed = parseArgs(argv);
   if (parsed.flags.version) {
@@ -4094,15 +4354,19 @@ async function main(argv = process.argv.slice(2)) {
     const crfRaw = getFlagString(parsed.flags, "crf");
     const concurrencyRaw = getFlagString(parsed.flags, "concurrency");
     const publicDir = getFlagString(parsed.flags, "publicDir");
+    const debugBounds = Boolean(parsed.flags.debugBounds);
+    const debugLabels = Boolean(parsed.flags.debugLabels);
     const crf = crfRaw ? Number(crfRaw) : void 0;
     const concurrency = concurrencyRaw ? /^[0-9]+$/.test(concurrencyRaw) ? Number(concurrencyRaw) : concurrencyRaw : void 0;
     const engine = new WavesEngine(globalRegistry, new IRValidator(globalRegistry));
     try {
+      const inputProps = debugBounds || debugLabels ? { __wavesDebugBounds: debugBounds, __wavesDebugLabels: debugLabels } : void 0;
       const opts = { outputPath, registrationModules };
       if (publicDir) opts.publicDir = publicDir;
       if (codec) opts.codec = codec;
       if (Number.isFinite(crf ?? Number.NaN)) opts.crf = crf;
       if (concurrency !== void 0) opts.concurrency = concurrency;
+      if (inputProps) opts.inputProps = inputProps;
       await engine.render(json, opts);
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
@@ -4117,6 +4381,84 @@ async function main(argv = process.argv.slice(2)) {
 `);
     return EXIT_OK;
   }
+  if (parsed.command === "stills") {
+    const inputPath = getFlagString(parsed.flags, "in");
+    const outDir = getFlagString(parsed.flags, "outDir") ?? getFlagString(parsed.flags, "out");
+    if (!inputPath) {
+      process.stderr.write("Missing required --in <path>\n");
+      return EXIT_USAGE;
+    }
+    if (!outDir) {
+      process.stderr.write("Missing required --outDir <dir>\n");
+      return EXIT_USAGE;
+    }
+    let raw;
+    try {
+      raw = await import_promises2.default.readFile(inputPath, "utf-8");
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      process.stderr.write(`Failed to read ${inputPath}: ${message}
+`);
+      return EXIT_IO;
+    }
+    let json;
+    try {
+      json = JSON.parse(raw);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      process.stderr.write(`Invalid JSON: ${message}
+`);
+      return EXIT_VALIDATE;
+    }
+    const framesRaw = getFlagString(parsed.flags, "frames") ?? "0";
+    const frames = framesRaw.split(/[,\s]+/g).map((v) => v.trim()).filter(Boolean).map((v) => Number(v)).filter((n) => Number.isFinite(n));
+    if (frames.length === 0) {
+      process.stderr.write('Invalid --frames (expected comma-separated frame numbers, e.g. "0,30,60")\n');
+      return EXIT_USAGE;
+    }
+    const imageFormatRaw = (getFlagString(parsed.flags, "imageFormat") ?? "png").toLowerCase();
+    const imageFormat = parseImageFormat(imageFormatRaw);
+    if (!imageFormat) {
+      process.stderr.write(`Invalid --imageFormat: ${imageFormatRaw} (expected png|jpeg|webp)
+`);
+      return EXIT_USAGE;
+    }
+    const scaleRaw = getFlagString(parsed.flags, "scale");
+    const jpegQualityRaw = getFlagString(parsed.flags, "jpegQuality");
+    const publicDir = getFlagString(parsed.flags, "publicDir");
+    const debugBounds = Boolean(parsed.flags.debugBounds);
+    const debugLabels = Boolean(parsed.flags.debugLabels);
+    const scale = scaleRaw ? Number(scaleRaw) : void 0;
+    const jpegQuality = jpegQualityRaw ? Number(jpegQualityRaw) : void 0;
+    const engine = new WavesEngine(globalRegistry, new IRValidator(globalRegistry));
+    try {
+      const inputProps = debugBounds || debugLabels ? { __wavesDebugBounds: debugBounds, __wavesDebugLabels: debugLabels } : void 0;
+      const opts = {
+        outputDir: outDir,
+        frames,
+        imageFormat,
+        registrationModules
+      };
+      if (publicDir) opts.publicDir = publicDir;
+      if (Number.isFinite(scale ?? Number.NaN)) opts.scale = scale;
+      if (Number.isFinite(jpegQuality ?? Number.NaN)) opts.jpegQuality = jpegQuality;
+      if (inputProps) opts.inputProps = inputProps;
+      const written = await engine.renderStills(json, opts);
+      for (const p of written) {
+        process.stderr.write(`Wrote ${p}
+`);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      const context = err instanceof WavesRenderError ? err.context : void 0;
+      const payload = context ? stringifyJSON({ error: message, context }, pretty) : null;
+      process.stderr.write(`stills failed: ${message}
+`);
+      if (payload) process.stderr.write(payload);
+      return EXIT_RENDER;
+    }
+    return EXIT_OK;
+  }
   process.stderr.write(`Unknown command: ${parsed.command}
 `);
   process.stderr.write(`Run: waves --help