@microfox/remotion 1.2.0 → 1.2.2

package/dist/index.mjs

@@ -0,0 +1,4519 @@
+// src/core/registry/componentRegistry.ts
+var ComponentRegistryManager = class {
+  constructor() {
+    this.registry = {};
+    this.packageRegistry = {};
+  }
+  registerComponent(name, component, type, config15 = { displayName: "" }, packageName) {
+    this.registry[name] = { component, config: config15 };
+    if (packageName) {
+      if (!this.packageRegistry[packageName]) {
+        this.packageRegistry[packageName] = {};
+      }
+      this.packageRegistry[packageName][name] = { component, config: config15 };
+    }
+  }
+  registerEffect(name, component, config15 = { displayName: "" }, packageName) {
+    this.registerComponent(
+      name?.includes("effect-") ? name : `effect-${name}`,
+      component,
+      "layout",
+      config15,
+      packageName
+    );
+  }
+  getComponent(name) {
+    return this.registry[name]?.component;
+  }
+  getComponentConfig(name) {
+    return this.registry[name]?.config;
+  }
+  getComponentWithConfig(name) {
+    return this.registry[name];
+  }
+  registerPackage(packageName, components) {
+    this.packageRegistry[packageName] = components;
+    Object.entries(components).forEach(([name, { component, config: config15 }]) => {
+      this.registry[`${packageName}:${name}`] = { component, config: config15 };
+    });
+  }
+  getPackageComponents(packageName) {
+    return this.packageRegistry[packageName];
+  }
+  getAllComponents() {
+    return { ...this.registry };
+  }
+  clear() {
+    this.registry = {};
+    this.packageRegistry = {};
+  }
+};
+var componentRegistry = new ComponentRegistryManager();
+var registerComponent = (name, component, type, config15 = { displayName: "" }, packageName) => {
+  componentRegistry.registerComponent(
+    name,
+    component,
+    type,
+    config15,
+    packageName
+  );
+};
+var registerEffect = (name, component, config15 = { displayName: "" }, packageName) => {
+  componentRegistry.registerEffect(name, component, config15, packageName);
+};
+var registerPackage = (packageName, components) => {
+  componentRegistry.registerPackage(packageName, components);
+};
+var getComponent = (name) => componentRegistry.getComponent(name);
+var getComponentConfig = (name) => componentRegistry.getComponentConfig(name);
+var getComponentWithConfig = (name) => componentRegistry.getComponentWithConfig(name);
+
+// src/core/context/CompositionContext.tsx
+import React, { createContext, useContext } from "react";
+var CompositionContext = createContext(null);
+var CompositionProvider = ({ children, value }) => {
+  return /* @__PURE__ */ React.createElement(CompositionContext.Provider, { value }, children);
+};
+var useComposition = () => {
+  const context = useContext(CompositionContext);
+  if (!context) {
+    throw new Error("useComposition must be used within a CompositionProvider");
+  }
+  return context;
+};
+
+// src/core/context/timing.ts
+import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
+var findMatchingComponents = (childrenData, targetIds) => {
+  const matches = [];
+  const searchRecursively = (components) => {
+    for (const component of components) {
+      if (targetIds.includes(component.id)) {
+        matches.push(component);
+      }
+      if (component.childrenData && component.childrenData.length > 0) {
+        searchRecursively(component.childrenData);
+      }
+    }
+  };
+  searchRecursively(childrenData);
+  return matches;
+};
+var findMatchingComponentsByQuery = (childrenData, query) => {
+  const matches = [];
+  const searchRecursively = (components) => {
+    for (const component of components) {
+      let matchesQuery = false;
+      if (query.type && component.type === query.type) {
+        matchesQuery = true;
+      }
+      if (query.componentId && component.componentId === query.componentId) {
+        matchesQuery = true;
+      }
+      if (query.type && query.componentId) {
+        matchesQuery = component.type === query.type && component.componentId === query.componentId;
+      }
+      if (matchesQuery) {
+        matches.push(component);
+      }
+      if (component.childrenData && component.childrenData.length > 0) {
+        searchRecursively(component.childrenData);
+      }
+    }
+  };
+  searchRecursively(childrenData);
+  return matches;
+};
+var calculateComponentDuration = async (component) => {
+  const src = component.data.src;
+  if (src.startsWith("http")) {
+    const audioInput = new Input({
+      formats: ALL_FORMATS,
+      source: new UrlSource(src)
+    });
+    const audioDuration = await audioInput.computeDuration();
+    let trimmedDuration = audioDuration;
+    if (component.data.startFrom || component.data.endAt) {
+      trimmedDuration = audioDuration - (component.data.startFrom || 0) - (component.data.endAt ? audioDuration - (component.data.endAt || 0) : 0);
+    }
+    const playbackRate = component.data.playbackRate || 1;
+    const effectiveDuration = trimmedDuration / playbackRate;
+    return effectiveDuration;
+  } else {
+  }
+};
+var calculateDuration = async (childrenData, config15) => {
+  let calculatedDuration = void 0;
+  const targetIds = Array.isArray(config15.fitDurationTo) ? config15.fitDurationTo : [config15.fitDurationTo];
+  const matchingComponents = findMatchingComponents(
+    childrenData || [],
+    targetIds
+  );
+  if (matchingComponents.length === 1) {
+    if (matchingComponents[0].type === "atom" && (matchingComponents[0].componentId === "AudioAtom" || matchingComponents[0].componentId === "VideoAtom")) {
+      calculatedDuration = await calculateComponentDuration(
+        matchingComponents[0]
+      );
+    }
+    if ((matchingComponents[0].type === "scene" || matchingComponents[0].type === "layout") && matchingComponents[0].context?.timing?.duration) {
+      calculatedDuration = matchingComponents[0].context.timing.duration;
+    }
+  }
+  return calculatedDuration;
+};
+var setDurationsInContext = async (root) => {
+  const iterateRecursively = async (components, onlyScene = false) => {
+    const updatedComponents = [];
+    for (const component of components) {
+      let updatedComponent = { ...component };
+      if (component.childrenData && component.childrenData.length > 0) {
+        updatedComponent.childrenData = await iterateRecursively(
+          component.childrenData,
+          onlyScene
+        );
+      }
+      if (updatedComponent.context?.timing?.fitDurationTo?.length > 0 && !onlyScene && updatedComponent.context?.timing?.fitDurationTo != updatedComponent.id && updatedComponent.context?.timing?.fitDurationTo != "this" && updatedComponent.context?.timing?.fitDurationTo != "fill") {
+        const duration = await calculateDuration(
+          updatedComponent.childrenData,
+          {
+            fitDurationTo: updatedComponent.context?.timing?.fitDurationTo
+          }
+        );
+        updatedComponent = {
+          ...updatedComponent,
+          context: {
+            ...updatedComponent.context,
+            timing: {
+              ...updatedComponent.context.timing,
+              duration
+            }
+          }
+        };
+      }
+      if ((updatedComponent.type === "scene" || updatedComponent.type === "layout") && onlyScene) {
+        let duration;
+        if (updatedComponent.context?.timing?.fitDurationTo && updatedComponent.context.timing.fitDurationTo !== updatedComponent.id && updatedComponent.context.timing.fitDurationTo !== "this") {
+          duration = await calculateDuration(updatedComponent.childrenData, {
+            fitDurationTo: updatedComponent.context.timing.fitDurationTo
+          });
+        } else if (!updatedComponent.context?.timing?.duration) {
+          duration = updatedComponent.childrenData.reduce(
+            (acc, child) => acc + (child.context?.timing?.duration ?? 0),
+            0
+          ) ?? 10;
+        }
+        if (duration !== void 0) {
+          updatedComponent.context = {
+            ...updatedComponent.context || {},
+            timing: {
+              ...updatedComponent.context?.timing || {},
+              duration
+            }
+          };
+        }
+      }
+      if (updatedComponent.type === "atom" && !onlyScene) {
+        if (updatedComponent.componentId === "VideoAtom" || updatedComponent.componentId === "AudioAtom") {
+          const mediaDuration = await calculateComponentDuration(updatedComponent);
+          if (!updatedComponent.context?.timing?.fitDurationTo) {
+            updatedComponent.context = {
+              ...updatedComponent.context || {},
+              timing: {
+                ...updatedComponent.context?.timing || {},
+                duration: updatedComponent?.context?.timing?.duration || mediaDuration
+              }
+            };
+            updatedComponent.data = {
+              ...updatedComponent.data,
+              ...updatedComponent.data.loop ? { srcDuration: mediaDuration } : {}
+            };
+          } else if (updatedComponent.context?.timing?.fitDurationTo) {
+            updatedComponent.data = {
+              ...updatedComponent.data,
+              srcDuration: mediaDuration
+            };
+          }
+        }
+      }
+      updatedComponents.push(updatedComponent);
+    }
+    return updatedComponents;
+  };
+  let updatedChildrenData = await iterateRecursively(root.childrenData, false);
+  updatedChildrenData = await iterateRecursively(updatedChildrenData, true);
+  return {
+    ...root,
+    childrenData: updatedChildrenData
+  };
+};
+
+// src/components/base/ComponentRenderer.tsx
+import React3, { createContext as createContext2, useContext as useContext2 } from "react";
+import { Sequence, Series, useVideoConfig } from "remotion";
+
+// src/core/utils/timing.ts
+var calculateTiming = (type, context, videoConfig) => {
+  let newTiming;
+  if (type !== "atom" && context?.timing) {
+    const { start = 0, duration = 0 } = context.timing;
+    newTiming = {
+      startInFrames: Math.round(
+        context.timing?.startInFrames ? context.timing.startInFrames : type === "scene" ? start * videoConfig.fps : start * videoConfig.fps
+      ),
+      durationInFrames: Math.round(
+        context.timing?.durationInFrames ? context.timing.durationInFrames : type === "scene" ? duration * videoConfig.fps : duration * videoConfig.fps
+      ),
+      duration,
+      start
+    };
+  } else {
+    newTiming = {
+      startInFrames: context.timing?.startInFrames ? context.timing.startInFrames : context.timing?.start ? Math.round(videoConfig.fps * (context.timing.start || 0)) : 0,
+      durationInFrames: Math.round(
+        context.timing?.durationInFrames ? context.timing.durationInFrames : context.timing?.duration ? Math.round(videoConfig.fps * (context.timing.duration || 0)) : 0
+      ),
+      duration: context.timing?.duration,
+      start: context.timing?.start
+    };
+  }
+  return newTiming;
+};
+
+// src/core/utils/hierarchyUtils.ts
+var findComponentById = (root, targetId) => {
+  if (!root) return null;
+  const search = (components) => {
+    for (const component of components) {
+      if (component.id === targetId) {
+        return component;
+      }
+      if (component.childrenData && component.childrenData.length > 0) {
+        const found = search(component.childrenData);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  return search(root);
+};
+var findParentComponent = (root, targetId) => {
+  if (!root) return null;
+  const search = (components, parent) => {
+    for (const component of components) {
+      if (component.childrenData && component.childrenData.length > 0) {
+        const hasTargetChild = component.childrenData.some(
+          (child) => child.id === targetId
+        );
+        if (hasTargetChild) {
+          return component;
+        }
+        const found = search(component.childrenData, component);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  return search(root, null);
+};
+var calculateHierarchy = (root, componentId, currentContext) => {
+  if (!root) {
+    return {
+      depth: (currentContext?.hierarchy?.depth || 0) + 1,
+      parentIds: [...currentContext?.hierarchy?.parentIds || [], componentId]
+    };
+  }
+  const parentIds = [];
+  let depth = 0;
+  const traverse = (components, currentDepth) => {
+    for (const component of components) {
+      if (component.id === componentId) {
+        depth = currentDepth;
+        return true;
+      }
+      if (component.childrenData && component.childrenData.length > 0) {
+        parentIds.push(component.id);
+        const found = traverse(component.childrenData, currentDepth + 1);
+        if (found) return true;
+        parentIds.pop();
+      }
+    }
+    return false;
+  };
+  traverse(root, 0);
+  return {
+    depth,
+    parentIds: [...parentIds]
+  };
+};
+var calculateTimingWithInheritance = (component, root, videoConfig) => {
+  const currentContext = component.context || {};
+  const baseTiming = calculateTiming(
+    component.type,
+    currentContext,
+    videoConfig
+  );
+  if (!baseTiming.durationInFrames || baseTiming.durationInFrames <= 0) {
+    const findParentWithTiming = (targetId) => {
+      const parent = findParentComponent(root, targetId);
+      if (!parent) return null;
+      const parentContext = parent.context || {};
+      const parentTiming = calculateTiming(
+        parent.type,
+        parentContext,
+        videoConfig
+      );
+      if (parentTiming.durationInFrames && parentTiming.durationInFrames > 0) {
+        return parentTiming;
+      }
+      return findParentWithTiming(parent.id);
+    };
+    const inheritedTiming = findParentWithTiming(component.id);
+    if (inheritedTiming) {
+      return {
+        ...baseTiming,
+        durationInFrames: inheritedTiming.durationInFrames ? inheritedTiming.durationInFrames : inheritedTiming.duration ? inheritedTiming.duration * videoConfig.fps : 0,
+        duration: inheritedTiming.duration
+      };
+    }
+  }
+  return baseTiming;
+};
+
+// src/components/base/EffectWrapper.tsx
+import React2 from "react";
+import { nanoid } from "zod";
+var EffectWrapper = ({
+  effects,
+  children,
+  context
+}) => {
+  if (!effects || effects.length === 0) {
+    return children;
+  }
+  let wrappedContent = children;
+  effects.forEach((effect, index) => {
+    const effectId = typeof effect === "string" ? `effect-${effect}` : `effect-${effect.componentId}`;
+    const EffectComponent = getComponent(effectId);
+    if (!EffectComponent) {
+      console.warn(`Effect component ${effectId} not found in registry`);
+      return;
+    }
+    const effectData = typeof effect === "string" ? {} : effect.data || {};
+    const effectContext = typeof effect === "string" ? context : effect.context || context;
+    const effectProps = {
+      id: typeof effect === "string" ? `effect-${nanoid()}` : effect.id,
+      componentId: effectId,
+      type: "layout",
+      // Effects use the same rendering logic as layout
+      data: effectData,
+      context: effectContext,
+      children: wrappedContent
+    };
+    wrappedContent = /* @__PURE__ */ React2.createElement(EffectComponent, { ...effectProps });
+  });
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, wrappedContent);
+};
+
+// src/components/base/ComponentRenderer.tsx
+var RenderContext = createContext2(null);
+var useRenderContext = () => {
+  const context = useContext2(RenderContext);
+  if (!context) {
+    throw new Error("useRenderContext must be used within a ComponentRenderer");
+  }
+  return context;
+};
+var ComponentRenderer = ({
+  id,
+  componentId,
+  type,
+  data,
+  childrenData,
+  context,
+  effects
+}) => {
+  const videoConfig = useVideoConfig();
+  const { root } = useComposition();
+  const defaultContext = {
+    boundaries: {
+      left: 0,
+      top: 0,
+      width: videoConfig.width,
+      height: videoConfig.height,
+      zIndex: 0
+    },
+    timing: {
+      startInFrames: 0,
+      durationInFrames: videoConfig.durationInFrames
+    },
+    hierarchy: {
+      depth: 0,
+      parentIds: []
+    }
+  };
+  if (!context) {
+    context = {};
+  }
+  const newHierarchy = calculateHierarchy(root, id, context ?? defaultContext);
+  const componentData = {
+    id,
+    componentId,
+    type,
+    data,
+    childrenData,
+    context,
+    effects
+  };
+  let newTiming = calculateTimingWithInheritance(componentData, root, videoConfig);
+  const newContext = {
+    ...context,
+    boundaries: context?.boundaries,
+    hierarchy: newHierarchy,
+    timing: newTiming
+  };
+  const ComponentClass = getComponent(componentId);
+  if (type === "scene") {
+    return /* @__PURE__ */ React3.createElement(RenderContext.Provider, { value: newContext }, /* @__PURE__ */ React3.createElement(Series, null, childrenData?.map((child) => {
+      const childTiming = calculateTimingWithInheritance(child, root, videoConfig);
+      return /* @__PURE__ */ React3.createElement(
+        Series.Sequence,
+        {
+          key: child.id,
+          name: child.componentId + " - " + child.id,
+          offset: childTiming.startInFrames ?? 0,
+          durationInFrames: childTiming.durationInFrames ?? 0
+        },
+        child.effects && child.effects.length > 0 ? /* @__PURE__ */ React3.createElement(EffectWrapper, { effects: child.effects, context: newContext }, /* @__PURE__ */ React3.createElement(ComponentRenderer, { key: child.id, ...child })) : /* @__PURE__ */ React3.createElement(ComponentRenderer, { key: child.id, ...child })
+      );
+    })));
+  }
+  if (!ComponentClass) {
+    console.warn(`Component type ${id} not found in registry`);
+    return null;
+  }
+  const props = {
+    id,
+    componentId,
+    data,
+    context
+  };
+  if (type === "layout") {
+    const config15 = getComponentConfig(componentId);
+    const isInnerSequence = config15?.isInnerSequence;
+    if (isInnerSequence) {
+      return /* @__PURE__ */ React3.createElement(RenderContext.Provider, { value: newContext }, /* @__PURE__ */ React3.createElement(ComponentClass, { ...props }, effects && effects.length > 0 ? /* @__PURE__ */ React3.createElement(EffectWrapper, { effects, context: newContext }, childrenData?.map((child) => /* @__PURE__ */ React3.createElement(ComponentRenderer, { key: child.id, ...child }))) : childrenData?.map((child) => /* @__PURE__ */ React3.createElement(ComponentRenderer, { key: child.id, ...child }))));
+    }
+    return /* @__PURE__ */ React3.createElement(RenderContext.Provider, { value: newContext }, /* @__PURE__ */ React3.createElement(Sequence, { layout: "none", name: componentId + " - " + id, from: newTiming.startInFrames, durationInFrames: newTiming.durationInFrames }, effects && effects.length > 0 ? /* @__PURE__ */ React3.createElement(EffectWrapper, { effects, context: newContext }, /* @__PURE__ */ React3.createElement(ComponentClass, { ...props }, childrenData?.map((child) => /* @__PURE__ */ React3.createElement(ComponentRenderer, { key: child.id, ...child })))) : /* @__PURE__ */ React3.createElement(ComponentClass, { ...props }, childrenData?.map((child) => /* @__PURE__ */ React3.createElement(ComponentRenderer, { key: child.id, ...child })))));
+  }
+  if (type === "atom") {
+    if (newTiming.durationInFrames && newTiming.durationInFrames > 0) {
+      return /* @__PURE__ */ React3.createElement(RenderContext.Provider, { value: newContext }, /* @__PURE__ */ React3.createElement(Sequence, { layout: "none", name: componentId + " - " + id, from: newTiming.startInFrames, durationInFrames: newTiming.durationInFrames }, effects && effects.length > 0 ? /* @__PURE__ */ React3.createElement(EffectWrapper, { effects, context: newContext }, /* @__PURE__ */ React3.createElement(ComponentClass, { ...{
+        ...props,
+        context: {
+          timing: {
+            durationInFrames: newTiming.durationInFrames
+          }
+        }
+      } })) : /* @__PURE__ */ React3.createElement(ComponentClass, { ...{
+        ...props,
+        context: {
+          timing: {
+            durationInFrames: newTiming.durationInFrames
+          }
+        }
+      } })));
+    }
+    return /* @__PURE__ */ React3.createElement(RenderContext.Provider, { value: newContext }, effects && effects.length > 0 ? /* @__PURE__ */ React3.createElement(EffectWrapper, { effects, context: newContext }, /* @__PURE__ */ React3.createElement(ComponentClass, { ...props })) : /* @__PURE__ */ React3.createElement(ComponentClass, { ...props }));
+  }
+};
+
+// src/components/frames/Frame.tsx
+import React4 from "react";
+import { AbsoluteFill } from "remotion";
+var Frame = ({ children, data }) => {
+  return /* @__PURE__ */ React4.createElement(AbsoluteFill, { style: data?.style }, children);
+};
+
+// src/components/frames/SceneFrame.tsx
+import React5 from "react";
+import { AbsoluteFill as AbsoluteFill2 } from "remotion";
+var SceneFrame = ({ children }) => {
+  return /* @__PURE__ */ React5.createElement(AbsoluteFill2, null, children);
+};
+
+// src/components/layouts/BaseLayout.tsx
+import React13, { Children, useMemo as useMemo7 } from "react";
+import { AbsoluteFill as AbsoluteFill3 } from "remotion";
+
+// src/components/effects/BlurEffect.tsx
+import React7, { useMemo as useMemo2 } from "react";
+
+// src/components/effects/UniversalEffect.tsx
+import React6, { useMemo, createContext as createContext3, useContext as useContext3 } from "react";
+
+// src/components/effects/mergeCSSStyles.ts
+var parseFunctionsString = (functions) => {
+  const result = /* @__PURE__ */ new Map();
+  if (!functions) {
+    return result;
+  }
+  const regex = /(\w+)\(([^)]*)\)/g;
+  let match;
+  while ((match = regex.exec(functions)) !== null) {
+    result.set(match[1], match[0]);
+  }
+  return result;
+};
+var mergeFunctionStrings = (parentValue, childValue, preferParentOnOverlap) => {
+  const parentFunctions = parseFunctionsString(parentValue);
+  const childFunctions = parseFunctionsString(childValue);
+  const orderedFunctionNames = [];
+  parentFunctions.forEach((_v, k) => orderedFunctionNames.push(k));
+  childFunctions.forEach((_v, k) => {
+    if (!orderedFunctionNames.includes(k)) {
+      orderedFunctionNames.push(k);
+    }
+  });
+  const finalFunctions = orderedFunctionNames.map((name) => {
+    if (preferParentOnOverlap && parentFunctions.has(name)) {
+      return parentFunctions.get(name);
+    }
+    return childFunctions.get(name) ?? parentFunctions.get(name);
+  });
+  return finalFunctions.join(" ").trim();
+};
+var mergeCSSStyles = (parent = {}, child = {}, options = {}) => {
+  const result = { ...parent };
+  const preferParentOnOverlap = Boolean(options.preferParentOnOverlap);
+  for (const key in child) {
+    if (Object.prototype.hasOwnProperty.call(child, key)) {
+      const pValue = result[key];
+      const cValue = child[key];
+      if (cValue === void 0 || cValue === null) {
+        continue;
+      }
+      switch (key) {
+        case "transform":
+        case "filter": {
+          result[key] = mergeFunctionStrings(
+            pValue,
+            cValue,
+            preferParentOnOverlap
+          );
+          break;
+        }
+        case "opacity":
+          if (preferParentOnOverlap && pValue !== void 0 && cValue !== void 0) {
+            const parentOpacity = typeof pValue === "number" && !isNaN(pValue) ? pValue : 1;
+            result.opacity = Math.max(0, Math.min(1, parentOpacity));
+          } else {
+            const parentOpacity = typeof pValue === "number" && !isNaN(pValue) ? pValue : 1;
+            const childOpacity = typeof cValue === "number" && !isNaN(cValue) ? cValue : 1;
+            result.opacity = Math.max(
+              0,
+              Math.min(1, parentOpacity * childOpacity)
+            );
+          }
+          break;
+        case "transformOrigin":
+          result.transformOrigin = cValue;
+          break;
+        case "color":
+        case "backgroundColor":
+          result[key] = cValue;
+          break;
+        default:
+          if (preferParentOnOverlap && pValue !== void 0) {
+            result[key] = pValue;
+          } else {
+            result[key] = cValue;
+          }
+          break;
+      }
+    }
+  }
+  if (result.transform === "") {
+    delete result.transform;
+  }
+  if (result.filter === "") {
+    delete result.filter;
+  }
+  return result;
+};
+var mergeCSSStyles_default = mergeCSSStyles;
+
+// src/components/effects/UniversalEffect.tsx
+import { useCurrentFrame, useVideoConfig as useVideoConfig2, interpolate, Easing } from "remotion";
+var UniversalEffectContext = createContext3(null);
+var useUniversalEffect = () => {
+  const context = useContext3(UniversalEffectContext);
+  if (!context) {
+    throw new Error("useUniversalEffect must be used within a UniversalEffectProvider");
+  }
+  return context;
+};
+var useUniversalEffectOptional = () => {
+  return useContext3(UniversalEffectContext);
+};
+var useHasUniversalEffectProvider = () => {
+  const context = useContext3(UniversalEffectContext);
+  return context !== null;
+};
+var parseDuration = (duration, contextDuration, fps) => {
+  if (!duration) return contextDuration;
+  if (typeof duration === "number") {
+    return duration * fps;
+  }
+  if (typeof duration === "string" && duration.endsWith("%")) {
+    const percentage = parseFloat(duration.replace("%", "")) / 100;
+    return Math.floor(contextDuration * percentage);
+  }
+  return contextDuration;
+};
+var parseDelay = (delay, contextDuration, fps) => {
+  if (!delay) return 0;
+  if (typeof delay === "number") {
+    return delay * fps;
+  }
+  if (typeof delay === "string" && delay.endsWith("%")) {
+    const percentage = parseFloat(delay) / 100;
+    return Math.floor(contextDuration * percentage);
+  }
+  return 0;
+};
+var getEasingFunction = (type) => {
+  switch (type) {
+    case "linear":
+      return Easing.linear;
+    case "ease-in":
+      return Easing.in(Easing.ease);
+    case "ease-out":
+      return Easing.out(Easing.ease);
+    case "ease-in-out":
+      return Easing.inOut(Easing.ease);
+    default:
+      return Easing.linear;
+  }
+};
+var parseHexColor = (hex) => {
+  hex = hex.replace("#", "").toLowerCase();
+  if (!/^[0-9a-f]+$/.test(hex)) {
+    return { r: 0, g: 0, b: 0, a: 1 };
+  }
+  if (hex.length === 3) {
+    hex = hex.split("").map((char) => char + char).join("");
+  }
+  if (hex.length === 6) {
+    return {
+      r: Math.max(0, Math.min(255, parseInt(hex.substr(0, 2), 16))),
+      g: Math.max(0, Math.min(255, parseInt(hex.substr(2, 2), 16))),
+      b: Math.max(0, Math.min(255, parseInt(hex.substr(4, 2), 16))),
+      a: 1
+    };
+  }
+  if (hex.length === 8) {
+    return {
+      r: Math.max(0, Math.min(255, parseInt(hex.substr(0, 2), 16))),
+      g: Math.max(0, Math.min(255, parseInt(hex.substr(2, 2), 16))),
+      b: Math.max(0, Math.min(255, parseInt(hex.substr(4, 2), 16))),
+      a: Math.max(0, Math.min(1, parseInt(hex.substr(6, 2), 16) / 255))
+    };
+  }
+  return { r: 0, g: 0, b: 0, a: 1 };
+};
+var parseRgbaColor = (rgba) => {
+  const match = rgba.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/);
+  if (match) {
+    return {
+      r: Math.max(0, Math.min(255, parseInt(match[1], 10))),
+      g: Math.max(0, Math.min(255, parseInt(match[2], 10))),
+      b: Math.max(0, Math.min(255, parseInt(match[3], 10))),
+      a: match[4] ? Math.max(0, Math.min(1, parseFloat(match[4]))) : 1
+    };
+  }
+  return { r: 0, g: 0, b: 0, a: 1 };
+};
+var parseColor = (color) => {
+  const trimmedColor = color.trim();
+  if (trimmedColor.startsWith("#")) {
+    return parseHexColor(trimmedColor);
+  } else if (trimmedColor.toLowerCase().startsWith("rgb")) {
+    return parseRgbaColor(trimmedColor);
+  }
+  return { r: 0, g: 0, b: 0, a: 1 };
+};
+var rgbaToString = (color) => {
+  if (color.a === 1) {
+    return `rgb(${Math.round(color.r)}, ${Math.round(color.g)}, ${Math.round(color.b)})`;
+  } else {
+    return `rgba(${Math.round(color.r)}, ${Math.round(color.g)}, ${Math.round(color.b)}, ${color.a})`;
+  }
+};
+var interpolateColors = (color1, color2, progress) => {
+  const parsedColor1 = parseColor(color1);
+  const parsedColor2 = parseColor(color2);
+  const interpolatedColor = {
+    r: interpolate(progress, [0, 1], [parsedColor1.r, parsedColor2.r]),
+    g: interpolate(progress, [0, 1], [parsedColor1.g, parsedColor2.g]),
+    b: interpolate(progress, [0, 1], [parsedColor1.b, parsedColor2.b]),
+    a: interpolate(progress, [0, 1], [parsedColor1.a, parsedColor2.a])
+  };
+  return rgbaToString(interpolatedColor);
+};
+var calculateAnimatedValue = (ranges, progress, key) => {
+  const sortedRanges = [...ranges].sort((a, b) => a.prog - b.prog);
+  if (sortedRanges.length === 0) return 0;
+  if (sortedRanges.length === 1) return sortedRanges[0].val;
+  const clampedProgress = Math.max(0, Math.min(1, progress));
+  if (clampedProgress <= sortedRanges[0].prog) {
+    return sortedRanges[0].val;
+  }
+  if (clampedProgress >= sortedRanges[sortedRanges.length - 1].prog) {
+    return sortedRanges[sortedRanges.length - 1].val;
+  }
+  for (let i = 0; i < sortedRanges.length - 1; i++) {
+    const currentRange = sortedRanges[i];
+    const nextRange = sortedRanges[i + 1];
+    if (clampedProgress >= currentRange.prog && clampedProgress <= nextRange.prog) {
+      const localProgress = (clampedProgress - currentRange.prog) / (nextRange.prog - currentRange.prog);
+      const currentValue = currentRange.val;
+      const nextValue = nextRange.val;
+      if (typeof currentValue === "number" && typeof nextValue === "number") {
+        if (isFinite(currentValue) && isFinite(nextValue) && !isNaN(currentValue) && !isNaN(nextValue)) {
+          const interpolatedValue = currentValue + (nextValue - currentValue) * localProgress;
+          if (isFinite(interpolatedValue) && !isNaN(interpolatedValue)) {
+            return interpolatedValue;
+          }
+        }
+        return currentValue;
+      } else if (typeof currentValue === "string" && typeof nextValue === "string") {
+        const isColor = (str) => {
+          const trimmed = str.trim().toLowerCase();
+          return trimmed.startsWith("#") || trimmed.startsWith("rgb");
+        };
+        if (isColor(currentValue) && isColor(nextValue)) {
+          return interpolateColors(currentValue, nextValue, localProgress);
+        }
+        const getUnitAndValue = (str) => {
+          const units = ["vmax", "vmin", "rem", "deg", "bpm", "vh", "vw", "px", "em", "ms", "hz", "db", "fr", "s", "%"];
+          for (const unit of units) {
+            if (str.endsWith(unit)) {
+              const value2 = parseFloat(str.slice(0, -unit.length));
+              return {
+                value: isNaN(value2) ? 0 : value2,
+                unit
+              };
+            }
+          }
+          const value = parseFloat(str);
+          return {
+            value: isNaN(value) ? 0 : value,
+            unit: ""
+          };
+        };
+        const current = getUnitAndValue(currentValue);
+        const next = getUnitAndValue(nextValue);
+        if (current.unit === next.unit && isFinite(current.value) && isFinite(next.value)) {
+          const interpolatedValue = interpolate(localProgress, [0, 1], [current.value, next.value]);
+          if (isFinite(interpolatedValue)) {
+            return current.unit ? `${interpolatedValue}${current.unit}` : interpolatedValue;
+          }
+        }
+        return currentValue;
+      }
+      return currentValue;
+    }
+  }
+  return sortedRanges[0]?.val || 0;
+};
+var rangesToCSSProperties = (ranges, progress) => {
+  const styles = {};
+  if (!ranges || !Array.isArray(ranges) || ranges.length === 0) {
+    return styles;
+  }
+  const rangesByKey = ranges.reduce((acc, range) => {
+    if (!acc[range.key]) {
+      acc[range.key] = [];
+    }
+    acc[range.key].push(range);
+    return acc;
+  }, {});
+  Object.entries(rangesByKey).forEach(([key, keyRanges]) => {
+    const value = calculateAnimatedValue(keyRanges, progress, key);
+    switch (key) {
+      case "scale":
+        styles.transform = `scale(${value})`;
+        break;
+      case "rotate":
+        const rotateValue = typeof value === "string" && value.includes("deg") ? value : `${value}deg`;
+        styles.transform = `${styles.transform || ""} rotate(${rotateValue})`.trim();
+        break;
+      case "translateX":
+        const translateXValue = typeof value === "string" && (value.includes("px") || value.includes("%") || value.includes("vw") || value.includes("vh")) ? value : `${value}px`;
+        styles.transform = `${styles.transform || ""} translateX(${translateXValue})`.trim();
+        break;
+      case "translateY":
+        const translateYValue = typeof value === "string" && (value.includes("px") || value.includes("%") || value.includes("vw") || value.includes("vh")) ? value : `${value}px`;
+        styles.transform = `${styles.transform || ""} translateY(${translateYValue})`.trim();
+        break;
+      case "opacity":
+        const opacityValue = typeof value === "number" ? Math.max(0, Math.min(1, isFinite(value) && !isNaN(value) ? Math.round(value * 1e3) / 1e3 : 1)) : 1;
+        styles.opacity = opacityValue;
+        break;
+      case "blur":
+        const blurValue = typeof value === "string" && (value.includes("px") || value.includes("rem") || value.includes("em")) ? value : `${value}px`;
+        styles.filter = `blur(${blurValue})`;
+        break;
+      case "brightness":
+        styles.filter = `${styles.filter || ""} brightness(${value})`.trim();
+        break;
+      case "contrast":
+        styles.filter = `${styles.filter || ""} contrast(${value})`.trim();
+        break;
+      case "filter":
+        styles.filter = value;
+        break;
+      case "color":
+        styles.color = value;
+        break;
+      case "backgroundColor":
+        styles.backgroundColor = value;
+        break;
+      default:
+        styles[key] = value;
+    }
+  });
+  return styles;
+};
+var useUniversalAnimation = (data, context) => {
+  let frame = 0;
+  let fps = 30;
+  try {
+    frame = useCurrentFrame();
+    const videoConfig = useVideoConfig2();
+    fps = videoConfig.fps;
+  } catch (error) {
+    console.warn("useUniversalAnimation used outside Remotion context, using fallback values");
+  }
+  const effectData = data;
+  const { timing } = context ?? {};
+  const contextDuration = timing?.durationInFrames || 50;
+  const start = parseDelay(effectData?.start, contextDuration, fps);
+  const duration = parseDuration(effectData?.duration, contextDuration, fps);
+  const type = effectData?.type || "linear";
+  const ranges = effectData?.ranges || [];
+  const targetIds = effectData?.targetIds || [];
+  const mode = effectData?.mode || "wrapper";
+  const easing = getEasingFunction(type);
+  const progress = interpolate(
+    frame - start,
+    [0, duration],
+    [0, 1],
+    {
+      easing,
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    }
+  );
+  const isActive = frame >= start && frame <= start + duration;
+  const isBeforeStart = frame < start;
+  const isAfterEnd = frame > start + duration;
+  return {
+    frame,
+    fps,
+    progress,
+    isActive,
+    isBeforeStart,
+    isAfterEnd,
+    start,
+    duration,
+    type,
+    ranges,
+    targetIds,
+    mode,
+    effectData
+  };
+};
+var UniversalEffect = ({
+  id,
+  data,
+  children,
+  context,
+  effectType = "universal",
+  customAnimationLogic
+}) => {
+  const { progress, isActive, isBeforeStart, isAfterEnd, frame, ranges, mode, targetIds, effectData } = useUniversalAnimation(data, context);
+  const parentContext = useUniversalEffectOptional();
+  const animatedStyles = useMemo(() => {
+    const parentStyles = parentContext?.animatedStyles || {};
+    let currentStyles = {};
+    if (isActive) {
+      if (customAnimationLogic) {
+        currentStyles = customAnimationLogic(effectData, progress, frame);
+      } else if (ranges.length > 0) {
+        currentStyles = rangesToCSSProperties(ranges, progress);
+      }
+    } else if (isBeforeStart) {
+      if (customAnimationLogic) {
+        currentStyles = customAnimationLogic(effectData, 0, frame);
+      } else if (ranges.length > 0) {
+        currentStyles = rangesToCSSProperties(ranges, 0);
+      }
+    } else if (isAfterEnd) {
+      if (customAnimationLogic) {
+        currentStyles = customAnimationLogic(effectData, 1, frame);
+      } else if (ranges.length > 0) {
+        currentStyles = rangesToCSSProperties(ranges, 1);
+      }
+    }
+    const preferParentOnOverlap = progress <= 0;
+    if (parentContext && mode === "provider") {
+      const combinedStyles = mergeCSSStyles_default(
+        parentStyles,
+        currentStyles,
+        { preferParentOnOverlap: false }
+      );
+      return combinedStyles;
+    }
+    return currentStyles;
+  }, [ranges, progress, parentContext?.animatedStyles, mode, customAnimationLogic, effectData, frame]);
+  const contextValue = useMemo(() => ({
+    animatedStyles,
+    targetIds,
+    effectType
+  }), [animatedStyles, targetIds, effectType]);
+  if (mode === "provider") {
+    return /* @__PURE__ */ React6.createElement(UniversalEffectContext.Provider, { value: contextValue }, children);
+  } else {
+    return /* @__PURE__ */ React6.createElement("div", { ...effectData.props, style: animatedStyles }, children);
+  }
+};
+var UniversalEffectProvider = ({
+  children,
+  data,
+  effectType = "universal",
+  customAnimationLogic,
+  id = "generic",
+  componentId = "generic",
+  type = "effect"
+}) => {
+  return /* @__PURE__ */ React6.createElement(
+    UniversalEffect,
+    {
+      id,
+      componentId,
+      type,
+      data,
+      context: void 0,
+      effectType,
+      customAnimationLogic
+    },
+    children
+  );
+};
+var useAnimatedStyles = (componentId) => {
+  const context = useUniversalEffectOptional();
+  if (!context) {
+    return {};
+  }
+  const { animatedStyles, targetIds } = context;
+  if (targetIds.includes(componentId)) {
+    return animatedStyles;
+  }
+  return {};
+};
+var config = {
+  displayName: "generic",
+  description: "Universal effect that can be extended for any effect type",
+  isInnerSequence: false,
+  props: {}
+};
+
+// src/components/effects/BlurEffect.tsx
+var BlurEffect = ({
+  id,
+  componentId,
+  type,
+  data,
+  children,
+  context
+}) => {
+  const { progress, mode, targetIds, effectData } = useUniversalAnimation(data, context);
+  const { intensity = 10, direction = "in" } = effectData;
+  const parentContext = useUniversalEffectOptional();
+  const animatedStyles = useMemo2(() => {
+    if (progress <= 0 || progress >= 1) {
+      return {};
+    }
+    const blurValue = direction === "in" ? intensity * (1 - progress) : intensity * progress;
+    const currentStyles = { filter: `blur(${blurValue}px)` };
+    if (parentContext && mode === "provider") {
+      const combinedStyles = mergeCSSStyles_default(parentContext.animatedStyles, currentStyles);
+      return combinedStyles;
+    }
+    return currentStyles;
+  }, [progress, intensity, direction, parentContext?.animatedStyles, mode]);
+  const contextValue = useMemo2(() => ({
+    animatedStyles,
+    targetIds,
+    effectType: "blur"
+  }), [animatedStyles, targetIds]);
+  if (mode === "provider") {
+    return /* @__PURE__ */ React7.createElement(UniversalEffectContext.Provider, { value: contextValue }, children);
+  }
+  return /* @__PURE__ */ React7.createElement("div", { ...effectData.props, style: animatedStyles }, children);
+};
+var config2 = {
+  displayName: "blur",
+  description: "Blur effect with configurable intensity and direction",
+  isInnerSequence: false,
+  props: {
+    intensity: {
+      type: "number",
+      default: 10,
+      description: "Blur intensity in pixels"
+    },
+    direction: {
+      type: "enum",
+      values: ["in", "out"],
+      default: "in",
+      description: "Blur direction (in = start blurred, out = end blurred)"
+    }
+  }
+};
+
+// src/components/effects/Loop.tsx
+import React8 from "react";
+import { Loop } from "remotion";
+var LoopEffect = ({
+  data,
+  children,
+  context
+}) => {
+  const { timing } = context ?? {};
+  const loopData = data;
+  const durationInFrames = loopData?.durationInFrames || timing?.durationInFrames || 50;
+  const times = loopData?.times ?? Infinity;
+  const layout = loopData?.layout || "absolute-fill";
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ React8.createElement(
+      Loop,
+      {
+        durationInFrames,
+        times,
+        layout
+      },
+      /* @__PURE__ */ React8.createElement(React8.Fragment, null, children)
+    )
+  );
+};
+var config3 = {
+  displayName: "loop",
+  type: "layout",
+  isInnerSequence: false,
+  props: {
+    durationInFrames: {
+      type: "number",
+      description: "How many frames one iteration of the loop should be long",
+      default: 50
+    },
+    times: {
+      type: "number",
+      description: "How many times to loop the content (defaults to Infinity)",
+      default: void 0
+    },
+    layout: {
+      type: "string",
+      description: 'Either "absolute-fill" (default) or "none"',
+      default: "absolute-fill"
+    }
+  }
+};
+
+// src/components/effects/Pan.tsx
+import React9, { useMemo as useMemo3 } from "react";
+import { useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig3, interpolate as interpolate2, spring, Easing as Easing2 } from "remotion";
+var parseDuration2 = (duration, contextDuration, fps) => {
+  if (!duration) return contextDuration;
+  if (typeof duration === "number") {
+    return duration * fps;
+  }
+  if (typeof duration === "string" && duration.endsWith("%")) {
+    const percentage = parseFloat(duration.replace("%", "")) / 100;
+    return Math.floor(contextDuration * percentage);
+  }
+  return contextDuration;
+};
+var parseDelay2 = (delay, contextDuration, fps) => {
+  if (!delay) return 0;
+  if (typeof delay === "number") {
+    return delay * fps;
+  }
+  if (typeof delay === "string" && delay.endsWith("%")) {
+    const percentage = parseFloat(delay) / 100;
+    return Math.floor(contextDuration * percentage);
+  }
+  return 0;
+};
+var getPanDistance = (progress, panDistance) => {
+  if (typeof panDistance === "number") {
+    return panDistance;
+  }
+  if (Array.isArray(panDistance)) {
+    if (panDistance.length === 0) return 0;
+    if (panDistance.length === 1) return panDistance[0][1];
+    for (let i = 0; i < panDistance.length - 1; i++) {
+      const [currentProgress, currentDistance] = panDistance[i];
+      const [nextProgress, nextDistance] = panDistance[i + 1];
+      if (progress >= currentProgress && progress <= nextProgress) {
+        const localProgress = (progress - currentProgress) / (nextProgress - currentProgress);
+        return interpolate2(localProgress, [0, 1], [currentDistance, nextDistance]);
+      }
+    }
+    return panDistance[panDistance.length - 1][1];
+  }
+  return 0;
+};
+var getPosition = (position) => {
+  if (!position) return [0.5, 0.5];
+  if (Array.isArray(position)) {
+    return position;
+  }
+  const positions = {
+    "top-left": [0, 0],
+    "top": [0.5, 0],
+    "top-right": [1, 0],
+    "left": [0, 0.5],
+    "center": [0.5, 0.5],
+    "right": [1, 0.5],
+    "bottom-left": [0, 1],
+    "bottom": [0.5, 1],
+    "bottom-right": [1, 1]
+  };
+  return positions[position] || [0.5, 0.5];
+};
+var getEasingFunction2 = (animationType) => {
+  switch (animationType) {
+    case "linear":
+      return Easing2.linear;
+    case "ease-in":
+      return Easing2.in(Easing2.ease);
+    case "ease-out":
+      return Easing2.out(Easing2.ease);
+    case "ease-in-out":
+      return Easing2.inOut(Easing2.ease);
+    default:
+      return Easing2.linear;
+  }
+};
+var getPanVector = (direction, distance) => {
+  switch (direction) {
+    case "left":
+      return [-distance, 0];
+    case "right":
+      return [distance, 0];
+    case "up":
+      return [0, -distance];
+    case "down":
+      return [0, distance];
+    case "diagonal":
+      return [distance * 0.707, distance * 0.707];
+    // 45-degree diagonal
+    default:
+      return [0, 0];
+  }
+};
+var PanEffect = ({
+  data,
+  children,
+  context
+}) => {
+  const frame = useCurrentFrame2();
+  const { fps } = useVideoConfig3();
+  const panData = data;
+  const { timing } = context ?? {};
+  const contextDuration = timing?.durationInFrames || 50;
+  const effectTiming = panData?.effectTiming || "start";
+  const panDuration = parseDuration2(panData?.panDuration, contextDuration, fps);
+  const panStartDelay = parseDelay2(panData?.panStartDelay, contextDuration, fps);
+  const panEndDelay = parseDelay2(panData?.panEndDelay, contextDuration, fps);
+  const panDirection = panData?.panDirection || "right";
+  let panDistance = panData?.panDistance || 100;
+  const loopTimes = panData?.loopTimes || 0;
+  const panStartPosition = getPosition(panData?.panStartPosition);
+  const panEndPosition = getPosition(panData?.panEndPosition);
+  const animationType = panData?.animationType || "linear";
+  if (loopTimes > 0 && typeof panDistance === "number") {
+    const loopedPanDistance = [];
+    for (let i = 0; i < loopTimes; i++) {
+      const loopProgress = i / loopTimes;
+      const nextLoopProgress = (i + 1) / loopTimes;
+      loopedPanDistance.push([loopProgress, 0]);
+      loopedPanDistance.push([loopProgress + (nextLoopProgress - loopProgress) * 0.5, panDistance]);
+      loopedPanDistance.push([nextLoopProgress, 0]);
+    }
+    panDistance = loopedPanDistance;
+  }
+  let progress;
+  if (animationType === "spring") {
+    progress = spring({
+      frame,
+      fps,
+      config: {
+        stiffness: 100,
+        damping: 10,
+        mass: 1
+      },
+      durationInFrames: panDuration,
+      delay: effectTiming === "start" ? panStartDelay : contextDuration - panEndDelay - panDuration
+    });
+  } else {
+    let animationFrame;
+    if (effectTiming === "start") {
+      animationFrame = frame - panStartDelay;
+    } else {
+      animationFrame = frame - (contextDuration - panEndDelay - panDuration);
+    }
+    const easing = getEasingFunction2(animationType);
+    progress = interpolate2(
+      animationFrame,
+      [0, panDuration],
+      [0, 1],
+      {
+        easing,
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      }
+    );
+  }
+  let panOffset;
+  if (panDirection === "custom") {
+    const [startX, startY] = panStartPosition;
+    const [endX, endY] = panEndPosition;
+    const offsetX = (endX - startX) * 100;
+    const offsetY = (endY - startY) * 100;
+    panOffset = [
+      interpolate2(progress, [0, 1], [0, offsetX]),
+      interpolate2(progress, [0, 1], [0, offsetY])
+    ];
+  } else {
+    const distance = getPanDistance(progress, panDistance);
+    const [vectorX, vectorY] = getPanVector(panDirection, distance);
+    panOffset = [vectorX, vectorY];
+  }
+  const style = useMemo3(() => {
+    return {
+      width: "100%",
+      height: "100%",
+      transform: `translate(${panOffset[0]}px, ${panOffset[1]}px)`
+    };
+  }, [panOffset]);
+  return /* @__PURE__ */ React9.createElement("div", { style }, children);
+};
+var config4 = {
+  displayName: "pan",
+  type: "layout",
+  isInnerSequence: false,
+  props: {
+    effectTiming: {
+      type: "string",
+      description: 'When the pan effect should occur: "start" or "end"',
+      default: "start"
+    },
+    panDuration: {
+      type: "string",
+      description: 'Duration of the pan animation in seconds or percentage (e.g., "2" or "50%")',
+      default: void 0
+    },
+    panStart: {
+      type: "number",
+      description: "Start time of pan in seconds",
+      default: 0
+    },
+    panEnd: {
+      type: "number",
+      description: "End time of pan in seconds",
+      default: void 0
+    },
+    panStartDelay: {
+      type: "string",
+      description: "Delay before pan starts in seconds or percentage",
+      default: 0
+    },
+    panEndDelay: {
+      type: "string",
+      description: "Delay before video ends in seconds or percentage",
+      default: 0
+    },
+    panDirection: {
+      type: "string",
+      description: 'Direction of pan: "left", "right", "up", "down", "diagonal", or "custom"',
+      default: "right"
+    },
+    panDistance: {
+      type: "string",
+      description: "Pan distance in pixels or array of [progress, distance] pairs",
+      default: 100
+    },
+    panStartPosition: {
+      type: "string",
+      description: "Starting position: [x, y] coordinates or position string (top-left, center, etc.)",
+      default: "center"
+    },
+    panEndPosition: {
+      type: "string",
+      description: "Ending position: [x, y] coordinates or position string (top-left, center, etc.)",
+      default: "center"
+    },
+    animationType: {
+      type: "string",
+      description: 'Animation curve: "linear", "spring", "ease-in", "ease-out", "ease-in-out"',
+      default: "linear"
+    }
+  }
+};
+
+// src/components/effects/Zoom.tsx
+import React10, { useMemo as useMemo4 } from "react";
+import { useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig4, interpolate as interpolate3, spring as spring2, Easing as Easing3 } from "remotion";
+var parseDuration3 = (duration, contextDuration, fps) => {
+  if (!duration) return contextDuration;
+  if (typeof duration === "number") {
+    return duration * fps;
+  }
+  if (typeof duration === "string" && duration.endsWith("%")) {
+    const percentage = parseFloat(duration.replace("%", "")) / 100;
+    return Math.floor(contextDuration * percentage);
+  }
+  return contextDuration;
+};
+var parseDelay3 = (delay, contextDuration, fps) => {
+  if (!delay) return 0;
+  if (typeof delay === "number") {
+    return delay * fps;
+  }
+  if (typeof delay === "string" && delay.endsWith("%")) {
+    const percentage = parseFloat(delay) / 100;
+    return Math.floor(contextDuration * percentage);
+  }
+  return 0;
+};
+var getZoomScale = (progress, zoomDepth) => {
+  if (typeof zoomDepth === "number") {
+    return zoomDepth;
+  }
+  if (Array.isArray(zoomDepth)) {
+    if (zoomDepth.length === 0) return 1;
+    if (zoomDepth.length === 1) return zoomDepth[0][1];
+    for (let i = 0; i < zoomDepth.length - 1; i++) {
+      const [currentProgress, currentScale] = zoomDepth[i];
+      const [nextProgress, nextScale] = zoomDepth[i + 1];
+      if (progress >= currentProgress && progress <= nextProgress) {
+        const localProgress = (progress - currentProgress) / (nextProgress - currentProgress);
+        return interpolate3(localProgress, [0, 1], [currentScale, nextScale]);
+      }
+    }
+    return zoomDepth[zoomDepth.length - 1][1];
+  }
+  return 1;
+};
+var getZoomPosition = (position) => {
+  if (!position) return [0.5, 0.5];
+  if (Array.isArray(position)) {
+    return position;
+  }
+  const positions = {
+    "top-left": [0, 0],
+    "top": [0.5, 0],
+    "top-right": [1, 0],
+    "left": [0, 0.5],
+    "center": [0.5, 0.5],
+    "right": [1, 0.5],
+    "bottom-left": [0, 1],
+    "bottom": [0.5, 1],
+    "bottom-right": [1, 1]
+  };
+  return positions[position] || [0.5, 0.5];
+};
+var getEasingFunction3 = (animationType) => {
+  switch (animationType) {
+    case "linear":
+      return Easing3.linear;
+    case "ease-in":
+      return Easing3.in(Easing3.ease);
+    case "ease-out":
+      return Easing3.out(Easing3.ease);
+    case "ease-in-out":
+      return Easing3.inOut(Easing3.ease);
+    default:
+      return Easing3.linear;
+  }
+};
+var ZoomEffect = ({
+  data,
+  children,
+  context
+}) => {
+  const frame = useCurrentFrame3();
+  const { fps } = useVideoConfig4();
+  const zoomData = data;
+  const { timing } = context ?? {};
+  const contextDuration = timing?.durationInFrames || 50;
+  const effectTiming = zoomData?.effectTiming || "start";
+  const zoomDuration = parseDuration3(zoomData?.zoomDuration, contextDuration, fps);
+  const zoomStartDelay = parseDelay3(zoomData?.zoomStartDelay, contextDuration, fps);
+  const zoomEndDelay = parseDelay3(zoomData?.zoomEndDelay, contextDuration, fps);
+  const zoomDirection = zoomData?.zoomDirection || "in";
+  let zoomDepth = zoomData?.zoomDepth || 1.5;
+  const loopTimes = zoomData?.loopTimes || 0;
+  if (loopTimes > 1 && Array.isArray(zoomDepth)) {
+    const loopedZoomDepth = [];
+    for (let i = 0; i < loopTimes; i++) {
+      const loopProgress = i / loopTimes;
+      const nextLoopProgress = (i + 1) / loopTimes;
+      zoomDepth.forEach(([x, y]) => {
+        const mappedX = loopProgress + x * (nextLoopProgress - loopProgress);
+        loopedZoomDepth.push([mappedX, y]);
+      });
+    }
+    zoomDepth = loopedZoomDepth;
+  } else if (loopTimes > 0 && typeof zoomDepth === "number") {
+    const loopedZoomDepth = [];
+    for (let i = 0; i < loopTimes; i++) {
+      const loopProgress = i / loopTimes;
+      const nextLoopProgress = (i + 1) / loopTimes;
+      loopedZoomDepth.push([loopProgress, 1]);
+      loopedZoomDepth.push([loopProgress + (nextLoopProgress - loopProgress) * 0.5, zoomDepth]);
+      loopedZoomDepth.push([nextLoopProgress, 1]);
+    }
+    zoomDepth = loopedZoomDepth;
+  }
+  const zoomPosition = getZoomPosition(zoomData?.zoomPosition);
+  const animationType = zoomData?.animationType || "linear";
+  let progress;
+  if (animationType === "spring") {
+    progress = spring2({
+      frame,
+      fps,
+      config: {
+        stiffness: 100,
+        damping: 10,
+        mass: 1
+      },
+      durationInFrames: zoomDuration,
+      delay: effectTiming === "start" ? zoomStartDelay : contextDuration - zoomEndDelay - zoomDuration
+    });
+  } else {
+    let animationFrame;
+    if (effectTiming === "start") {
+      animationFrame = frame - zoomStartDelay;
+    } else {
+      animationFrame = frame - (contextDuration - zoomEndDelay - zoomDuration);
+    }
+    const easing = getEasingFunction3(animationType);
+    progress = interpolate3(
+      animationFrame,
+      [0, zoomDuration],
+      [0, 1],
+      {
+        easing,
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      }
+    );
+  }
+  let scale;
+  if (typeof zoomDepth === "number") {
+    const baseScale = zoomDirection === "in" ? 1 : zoomDepth;
+    const targetScale = zoomDirection === "in" ? zoomDepth : 1;
+    scale = interpolate3(progress, [0, 1], [baseScale, targetScale]);
+  } else if (Array.isArray(zoomDepth)) {
+    scale = getZoomScale(progress, zoomDepth);
+  } else {
+    const baseScale = zoomDirection === "in" ? 1 : 1.5;
+    const targetScale = zoomDirection === "in" ? 1.5 : 1;
+    scale = interpolate3(progress, [0, 1], [baseScale, targetScale]);
+  }
+  const [originX, originY] = zoomPosition;
+  const transformOrigin = `${originX * 100}% ${originY * 100}%`;
+  const style = useMemo4(() => {
+    return {
+      width: "100%",
+      height: "100%",
+      transform: `scale(${scale})`,
+      transformOrigin
+    };
+  }, [scale, transformOrigin]);
+  return /* @__PURE__ */ React10.createElement("div", { style }, children);
+};
+var config5 = {
+  displayName: "zoom",
+  type: "layout",
+  isInnerSequence: false,
+  props: {
+    effectTiming: {
+      type: "string",
+      description: 'When the zoom effect should occur: "start" or "end"',
+      default: "start"
+    },
+    zoomDuration: {
+      type: "string",
+      description: 'Duration of the zoom animation in seconds or percentage (e.g., "2" or "50%")',
+      default: void 0
+    },
+    zoomStart: {
+      type: "number",
+      description: "Start time of zoom in seconds",
+      default: 0
+    },
+    zoomEnd: {
+      type: "number",
+      description: "End time of zoom in seconds",
+      default: void 0
+    },
+    zoomStartDelay: {
+      type: "string",
+      description: "Delay before zoom starts in seconds or percentage",
+      default: 0
+    },
+    zoomEndDelay: {
+      type: "string",
+      description: "Delay before video ends in seconds or percentage",
+      default: 0
+    },
+    zoomDirection: {
+      type: "string",
+      description: 'Direction of zoom: "in" or "out"',
+      default: "in"
+    },
+    zoomDepth: {
+      type: "string",
+      description: "Zoom scale factor or array of [progress, scale] pairs",
+      default: 1.5
+    },
+    zoomPosition: {
+      type: "string",
+      description: "Zoom anchor point: [x, y] coordinates or position string (top-left, center, etc.)",
+      default: "center"
+    },
+    animationType: {
+      type: "string",
+      description: 'Animation curve: "linear", "spring", "ease-in", "ease-out", "ease-in-out"',
+      default: "linear"
+    }
+  }
+};
+
+// src/components/effects/Shake.tsx
+import React11, { useMemo as useMemo5 } from "react";
+var ShakeEffect = ({
+  id,
+  componentId,
+  type,
+  data,
+  children,
+  context
+}) => {
+  const { progress, frame, mode, targetIds, effectData } = useUniversalAnimation(data, context);
+  const { amplitude = 10, frequency = 0.1, decay = true, axis = "both" } = effectData;
+  const parentContext = useUniversalEffectOptional();
+  const animatedStyles = useMemo5(() => {
+    if (progress <= 0 || progress >= 1) {
+      return parentContext?.animatedStyles || {};
+    }
+    const decayFactor = decay ? 1 - progress : 1;
+    const currentAmplitude = amplitude * decayFactor;
+    const time = frame * frequency;
+    const shakeX = axis === "x" || axis === "both" ? Math.sin(time) * currentAmplitude : 0;
+    const shakeY = axis === "y" || axis === "both" ? Math.cos(time * 1.3) * currentAmplitude : 0;
+    const styles = {};
+    if (axis === "x" || axis === "both") {
+      styles.transform = `translateX(${shakeX}px)`;
+    }
+    if (axis === "y" || axis === "both") {
+      styles.transform = `${styles.transform || ""} translateY(${shakeY}px)`.trim();
+    }
+    if (parentContext && mode === "provider") {
+      const combinedStyles = mergeCSSStyles_default(parentContext.animatedStyles, styles);
+      return combinedStyles;
+    }
+    return styles;
+  }, [progress, frame, amplitude, frequency, decay, axis, id, targetIds, mode, parentContext?.animatedStyles]);
+  const contextValue = useMemo5(() => ({
+    animatedStyles,
+    targetIds,
+    effectType: "shake"
+  }), [animatedStyles, targetIds]);
+  if (mode === "provider") {
+    return /* @__PURE__ */ React11.createElement(UniversalEffectContext.Provider, { value: contextValue }, children);
+  }
+  return /* @__PURE__ */ React11.createElement("div", { ...effectData.props, style: animatedStyles }, children);
+};
+var config6 = {
+  displayName: "shake",
+  description: "Shake effect with configurable amplitude, frequency, and decay",
+  isInnerSequence: false,
+  props: {
+    amplitude: {
+      type: "number",
+      default: 10,
+      description: "Shake intensity in pixels"
+    },
+    frequency: {
+      type: "number",
+      default: 0.1,
+      description: "Shake frequency (higher = faster shake)"
+    },
+    decay: {
+      type: "boolean",
+      default: true,
+      description: "Whether shake should decay over time"
+    },
+    axis: {
+      type: "enum",
+      values: ["x", "y", "both"],
+      default: "both",
+      description: "Which axis to shake"
+    }
+  }
+};
+
+// src/components/effects/StretchEffect.tsx
+import React12, { useMemo as useMemo6 } from "react";
+import { spring as spring3 } from "remotion";
+var StretchEffect = ({
+  id,
+  componentId,
+  type,
+  data,
+  children,
+  context
+}) => {
+  const { fps, frame, mode, targetIds, effectData, start, duration } = useUniversalAnimation(data, context);
+  const { stretchFrom = 0.8, stretchTo = 1, springConfig } = effectData;
+  const parentContext = useUniversalEffectOptional();
+  const springProgress = spring3({
+    fps,
+    frame: frame - start,
+    config: {
+      stiffness: 100,
+      damping: 10,
+      mass: 1,
+      ...springConfig
+    },
+    durationInFrames: duration
+  });
+  const animatedStyles = useMemo6(() => {
+    if (springProgress <= 0 || springProgress >= 1) {
+      return parentContext?.animatedStyles || {};
+    }
+    const scaleX = springProgress * (stretchTo - stretchFrom) + stretchFrom;
+    const scaleY = 1 + (1 - scaleX) * 0.1;
+    const currentStyles = {
+      transform: `scaleX(${scaleX}) scaleY(${scaleY})`,
+      transformOrigin: "center"
+    };
+    if (parentContext && mode === "provider") {
+      const combinedStyles = mergeCSSStyles_default(parentContext.animatedStyles, currentStyles);
+      return combinedStyles;
+    }
+    return currentStyles;
+  }, [springProgress, stretchFrom, stretchTo, parentContext?.animatedStyles, mode]);
+  const contextValue = useMemo6(() => ({
+    animatedStyles,
+    targetIds,
+    effectType: "stretch"
+  }), [animatedStyles, targetIds]);
+  if (mode === "provider") {
+    return /* @__PURE__ */ React12.createElement(UniversalEffectContext.Provider, { value: contextValue }, children);
+  }
+  return /* @__PURE__ */ React12.createElement("div", { ...effectData.props, style: animatedStyles }, children);
+};
+var config7 = {
+  displayName: "stretch",
+  description: "Stretches a component with a spring motion, ideal for subtitles.",
+  isInnerSequence: false,
+  props: {
+    stretchFrom: {
+      type: "number",
+      default: 0.8,
+      description: "The initial horizontal scale of the component."
+    },
+    stretchTo: {
+      type: "number",
+      default: 1,
+      description: "The final horizontal scale of the component."
+    }
+  }
+};
+
+// src/components/effects/GenericPresets.ts
+var fadeInPreset = [
+  { key: "opacity", val: 0, prog: 0 },
+  { key: "opacity", val: 1, prog: 1 }
+];
+var fadeOutPreset = [
+  { key: "opacity", val: 1, prog: 0 },
+  { key: "opacity", val: 0, prog: 1 }
+];
+var scaleInPreset = [
+  { key: "scale", val: 0, prog: 0 },
+  { key: "scale", val: 1, prog: 1 }
+];
+var scaleOutPreset = [
+  { key: "scale", val: 1, prog: 0 },
+  { key: "scale", val: 0, prog: 1 }
+];
+var slideInLeftPreset = [
+  { key: "translateX", val: -100, prog: 0 },
+  { key: "translateX", val: 0, prog: 1 }
+];
+var slideInRightPreset = [
+  { key: "translateX", val: 100, prog: 0 },
+  { key: "translateX", val: 0, prog: 1 }
+];
+var slideInTopPreset = [
+  { key: "translateY", val: -100, prog: 0 },
+  { key: "translateY", val: 0, prog: 1 }
+];
+var slideInBottomPreset = [
+  { key: "translateY", val: 100, prog: 0 },
+  { key: "translateY", val: 0, prog: 1 }
+];
+var bouncePreset = [
+  { key: "scale", val: 0, prog: 0 },
+  { key: "scale", val: 1.2, prog: 0.6 },
+  { key: "scale", val: 1, prog: 1 }
+];
+var pulsePreset = [
+  { key: "scale", val: 1, prog: 0 },
+  { key: "scale", val: 1.1, prog: 0.5 },
+  { key: "scale", val: 1, prog: 1 }
+];
+var rotateInPreset = [
+  { key: "rotate", val: -180, prog: 0 },
+  { key: "rotate", val: 0, prog: 1 }
+];
+var blurInPreset = [
+  { key: "blur", val: 10, prog: 0 },
+  { key: "blur", val: 0, prog: 1 }
+];
+var fadeInScalePreset = [
+  { key: "opacity", val: 0, prog: 0 },
+  { key: "opacity", val: 1, prog: 1 },
+  { key: "scale", val: 0.8, prog: 0 },
+  { key: "scale", val: 1, prog: 1 }
+];
+var slideInFadePreset = [
+  { key: "translateX", val: -50, prog: 0 },
+  { key: "translateX", val: 0, prog: 1 },
+  { key: "opacity", val: 0, prog: 0 },
+  { key: "opacity", val: 1, prog: 1 }
+];
+var slideInLeftStringPreset = [
+  { key: "translateX", val: "-100px", prog: 0 },
+  { key: "translateX", val: "0px", prog: 1 }
+];
+var slideInRightStringPreset = [
+  { key: "translateX", val: "100px", prog: 0 },
+  { key: "translateX", val: "0px", prog: 1 }
+];
+var slideInTopStringPreset = [
+  { key: "translateY", val: "-100px", prog: 0 },
+  { key: "translateY", val: "0px", prog: 1 }
+];
+var slideInBottomStringPreset = [
+  { key: "translateY", val: "100px", prog: 0 },
+  { key: "translateY", val: "0px", prog: 1 }
+];
+var rotateInStringPreset = [
+  { key: "rotate", val: "-180deg", prog: 0 },
+  { key: "rotate", val: "0deg", prog: 1 }
+];
+var blurInStringPreset = [
+  { key: "blur", val: "10px", prog: 0 },
+  { key: "blur", val: "0px", prog: 1 }
+];
+var scaleInStringPreset = [
+  { key: "scale", val: 0, prog: 0 },
+  { key: "scale", val: 1, prog: 1 }
+];
+var slideInLeftResponsivePreset = [
+  { key: "translateX", val: "-50vw", prog: 0 },
+  { key: "translateX", val: "0vw", prog: 1 }
+];
+var slideInTopResponsivePreset = [
+  { key: "translateY", val: "-50vh", prog: 0 },
+  { key: "translateY", val: "0vh", prog: 1 }
+];
+var backgroundColorPreset = [
+  { key: "backgroundColor", val: "#ff0000", prog: 0 },
+  { key: "backgroundColor", val: "#0000ff", prog: 1 }
+];
+var borderRadiusPreset = [
+  { key: "borderRadius", val: "0px", prog: 0 },
+  { key: "borderRadius", val: "50px", prog: 1 }
+];
+var boxShadowPreset = [
+  { key: "boxShadow", val: "0px 0px 0px rgba(0,0,0,0)", prog: 0 },
+  { key: "boxShadow", val: "10px 10px 20px rgba(0,0,0,0.5)", prog: 1 }
+];
+var fontSizePreset = [
+  { key: "fontSize", val: "12px", prog: 0 },
+  { key: "fontSize", val: "24px", prog: 1 }
+];
+var letterSpacingPreset = [
+  { key: "letterSpacing", val: "0px", prog: 0 },
+  { key: "letterSpacing", val: "5px", prog: 1 }
+];
+var lineHeightPreset = [
+  { key: "lineHeight", val: "1", prog: 0 },
+  { key: "lineHeight", val: "2", prog: 1 }
+];
+var textShadowPreset = [
+  { key: "textShadow", val: "0px 0px 0px rgba(0,0,0,0)", prog: 0 },
+  { key: "textShadow", val: "2px 2px 4px rgba(0,0,0,0.5)", prog: 1 }
+];
+var widthPreset = [
+  { key: "width", val: "0px", prog: 0 },
+  { key: "width", val: "100%", prog: 1 }
+];
+var heightPreset = [
+  { key: "height", val: "0px", prog: 0 },
+  { key: "height", val: "100%", prog: 1 }
+];
+var marginPreset = [
+  { key: "margin", val: "0px", prog: 0 },
+  { key: "margin", val: "20px", prog: 1 }
+];
+var paddingPreset = [
+  { key: "padding", val: "0px", prog: 0 },
+  { key: "padding", val: "20px", prog: 1 }
+];
+var morphingCardPreset = [
+  { key: "borderRadius", val: "0px", prog: 0 },
+  { key: "borderRadius", val: "20px", prog: 0.5 },
+  { key: "borderRadius", val: "50px", prog: 1 },
+  { key: "boxShadow", val: "0px 0px 0px rgba(0,0,0,0)", prog: 0 },
+  { key: "boxShadow", val: "0px 10px 30px rgba(0,0,0,0.3)", prog: 1 },
+  { key: "backgroundColor", val: "#ffffff", prog: 0 },
+  { key: "backgroundColor", val: "#f0f0f0", prog: 1 }
+];
+var textRevealPreset = [
+  { key: "opacity", val: 0, prog: 0 },
+  { key: "opacity", val: 1, prog: 1 },
+  { key: "letterSpacing", val: "10px", prog: 0 },
+  { key: "letterSpacing", val: "0px", prog: 1 },
+  { key: "textShadow", val: "0px 0px 0px rgba(0,0,0,0)", prog: 0 },
+  { key: "textShadow", val: "2px 2px 4px rgba(0,0,0,0.5)", prog: 1 }
+];
+var GenericEffectPresets = {
+  fadeInPreset,
+  fadeOutPreset,
+  scaleInPreset,
+  scaleOutPreset,
+  slideInLeftPreset,
+  slideInRightPreset,
+  slideInTopPreset,
+  slideInBottomPreset,
+  bouncePreset,
+  pulsePreset,
+  rotateInPreset,
+  blurInPreset,
+  fadeInScalePreset,
+  slideInFadePreset,
+  // String-based presets
+  slideInLeftStringPreset,
+  slideInRightStringPreset,
+  slideInTopStringPreset,
+  slideInBottomStringPreset,
+  rotateInStringPreset,
+  blurInStringPreset,
+  scaleInStringPreset,
+  slideInLeftResponsivePreset,
+  slideInTopResponsivePreset,
+  // Custom CSS property presets
+  backgroundColorPreset,
+  borderRadiusPreset,
+  boxShadowPreset,
+  fontSizePreset,
+  letterSpacingPreset,
+  lineHeightPreset,
+  textShadowPreset,
+  widthPreset,
+  heightPreset,
+  marginPreset,
+  paddingPreset,
+  morphingCardPreset,
+  textRevealPreset
+};
+
+// src/components/effects/index.ts
+registerEffect(config2.displayName, BlurEffect, config2);
+registerEffect(config3.displayName, LoopEffect, config3);
+registerEffect(config4.displayName, PanEffect, config4);
+registerEffect(config5.displayName, ZoomEffect, config5);
+registerEffect("generic", UniversalEffect, config);
+registerEffect(config6.displayName, ShakeEffect, config6);
+registerEffect(
+  config7.displayName,
+  StretchEffect,
+  config7
+);
+
+// src/components/layouts/BaseLayout.tsx
+var Layout = ({ id, children, data, context }) => {
+  const { containerProps = {}, childrenProps = [], repeatChildrenProps = {} } = data;
+  const overrideStyles = useAnimatedStyles(id);
+  const childrenArray = Children.toArray(children);
+  const enhancedStyle = useMemo7(
+    () => ({
+      ...!context?.boundaries?.reset ? context?.boundaries : {},
+      ...containerProps.style,
+      ...overrideStyles
+    }),
+    [
+      !context?.boundaries?.reset ? context?.boundaries : {},
+      containerProps.style,
+      overrideStyles
+    ]
+  );
+  if (Object.keys(repeatChildrenProps).length <= 0 && childrenProps.length <= 0) {
+    if (data.isAbsoluteFill) {
+      return /* @__PURE__ */ React13.createElement(
+        AbsoluteFill3,
+        {
+          ...containerProps,
+          style: enhancedStyle
+        },
+        childrenArray
+      );
+    }
+    return /* @__PURE__ */ React13.createElement(
+      "div",
+      {
+        id,
+        ...containerProps,
+        style: enhancedStyle
+      },
+      childrenArray.map((child, index) => /* @__PURE__ */ React13.createElement(React13.Fragment, { key: index }, child))
+    );
+  }
+  if (data.isAbsoluteFill) {
+    return /* @__PURE__ */ React13.createElement(
+      AbsoluteFill3,
+      {
+        id,
+        ...containerProps,
+        style: enhancedStyle
+      },
+      childrenArray.map((child, index) => /* @__PURE__ */ React13.createElement(
+        "div",
+        {
+          key: index,
+          ...childrenProps.length > 0 && index < childrenProps.length ? childrenProps[index] : repeatChildrenProps ? repeatChildrenProps : {}
+        },
+        child
+      ))
+    );
+  }
+  return /* @__PURE__ */ React13.createElement(
+    "div",
+    {
+      id,
+      ...containerProps,
+      style: enhancedStyle
+    },
+    childrenArray.map((child, index) => /* @__PURE__ */ React13.createElement(
+      "div",
+      {
+        key: index,
+        ...childrenProps.length > 0 && index < childrenProps.length ? childrenProps[index] : repeatChildrenProps ? repeatChildrenProps : {}
+      },
+      child
+    ))
+  );
+};
+var config8 = {
+  displayName: "BaseLayout",
+  type: "layout",
+  isInnerSequence: false
+};
+
+// src/components/layouts/index.ts
+registerComponent(
+  config8.displayName,
+  Layout,
+  "layout",
+  config8
+);
+
+// src/components/atoms/ShapeAtom.tsx
+import React14 from "react";
+import { Easing as Easing4, interpolate as interpolate4, useCurrentFrame as useCurrentFrame4 } from "remotion";
+var Atom = ({ data }) => {
+  const frame = useCurrentFrame4();
+  const { shape, color, rotation, style } = data;
+  const rotationStyle = rotation ? {
+    transform: `rotate(${interpolate4(
+      frame % rotation.duration,
+      [0, rotation.duration],
+      [0, 360],
+      {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+        easing: Easing4.linear
+      }
+    )}deg)`
+  } : {};
+  const baseStyle = {
+    width: "100%",
+    height: "100%",
+    ...style,
+    ...rotationStyle
+  };
+  switch (shape) {
+    case "circle":
+      return /* @__PURE__ */ React14.createElement("div", { style: { ...baseStyle, backgroundColor: color, borderRadius: "50%" } });
+    case "rectangle":
+      return /* @__PURE__ */ React14.createElement("div", { style: { ...baseStyle, backgroundColor: color } });
+    default:
+      return null;
+  }
+};
+var config9 = {
+  displayName: "ShapeAtom",
+  type: "atom",
+  isInnerSequence: false
+};
+
+// src/components/atoms/ImageAtom.tsx
+import React15, { useMemo as useMemo8, useState, useEffect } from "react";
+import { continueRender, delayRender, Img, staticFile } from "remotion";
+var CORS_PROXIES = [
+  "https://thingproxy.freeboard.io/fetch/",
+  "https://api.allorigins.win/raw?url=",
+  "https://corsproxy.io/?"
+];
+var getCorsProxyUrl = (url) => {
+  return `${CORS_PROXIES[0]}${encodeURIComponent(url)}`;
+};
+var useImageSource = (src, proxySrc) => {
+  const [imageSource, setImageSource] = useState(src);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [handle] = useState(() => delayRender("Loading image"));
+  useEffect(() => {
+    if (!src.startsWith("http")) {
+      setImageSource(src);
+      continueRender(handle);
+      return;
+    }
+    setIsLoading(true);
+    setHasError(false);
+    const testImage = new Image();
+    testImage.crossOrigin = "anonymous";
+    const handleSuccess = () => {
+      setImageSource(src);
+      setIsLoading(false);
+      continueRender(handle);
+    };
+    const handleError = () => {
+      let proxyUrl;
+      if (proxySrc) {
+        proxyUrl = `${proxySrc}?url=${encodeURIComponent(src)}`;
+      } else {
+        proxyUrl = getCorsProxyUrl(src);
+      }
+      setImageSource(proxyUrl);
+      setIsLoading(false);
+      continueRender(handle);
+    };
+    testImage.onload = handleSuccess;
+    testImage.onerror = handleError;
+    testImage.src = src;
+    return () => {
+      testImage.onload = null;
+      testImage.onerror = null;
+    };
+  }, [src, proxySrc, handle]);
+  return { imageSource, isLoading, hasError };
+};
+var Atom2 = ({ data, id }) => {
+  const overrideStyles = useAnimatedStyles(id);
+  const { imageSource, isLoading, hasError } = useImageSource(data.src, data.proxySrc);
+  const source = useMemo8(() => {
+    if (data.src.startsWith("http")) {
+      return imageSource;
+    }
+    return staticFile(data.src);
+  }, [data.src, imageSource]);
+  const enhancedStyle = useMemo8(() => ({
+    ...data.style,
+    ...overrideStyles
+  }), [data.style, overrideStyles, isLoading, hasError]);
+  return /* @__PURE__ */ React15.createElement(
+    Img,
+    {
+      className: data.className,
+      src: source,
+      style: enhancedStyle,
+      crossOrigin: data.src.startsWith("http") ? "anonymous" : void 0,
+      maxRetries: 4,
+      onError: () => {
+        console.warn(`Failed to load image: ${data.src}`);
+      }
+    }
+  );
+};
+var config10 = {
+  displayName: "ImageAtom",
+  type: "atom",
+  isInnerSequence: false
+};
+
+// src/components/atoms/TextAtom.tsx
+import React16, { useEffect as useEffect3, useMemo as useMemo9, useState as useState3 } from "react";
+import { delayRender as delayRender3, continueRender as continueRender3 } from "remotion";
+
+// src/hooks/useFontLoader.ts
+import { useState as useState2, useEffect as useEffect2, useCallback } from "react";
+import { delayRender as delayRender2, continueRender as continueRender2 } from "remotion";
+
+// src/utils/fontUtils.ts
+import * as fontUtils from "@remotion/google-fonts";
+var availableFonts = [];
+var getAvailableFonts2 = async () => {
+  if (availableFonts.length === 0) {
+    try {
+      availableFonts = fontUtils.getAvailableFonts();
+    } catch (error) {
+      console.warn("Failed to load @remotion/google-fonts:", error);
+      availableFonts = [];
+    }
+  }
+  return availableFonts;
+};
+var loadedFonts = /* @__PURE__ */ new Map();
+var loadGoogleFont = async (fontFamily, options = {}) => {
+  if (!fontFamily || typeof fontFamily !== "string" || fontFamily === "") {
+    console.warn("Invalid fontFamily provided:", fontFamily);
+    return "sans-serif";
+  }
+  const fontKey = `${fontFamily}-${JSON.stringify(options)}`;
+  if (loadedFonts.has(fontKey)) {
+    return loadedFonts.get(fontKey);
+  }
+  try {
+    const fonts = await getAvailableFonts2();
+    const thisFont = fonts.find((font) => font.importName === fontFamily);
+    if (thisFont?.load) {
+      const fontPackage = await thisFont.load();
+      const allFontStuff = fontPackage.loadFont("normal", {
+        subsets: options.subsets || ["latin"],
+        weights: options.weights || ["400"]
+      });
+      await allFontStuff.waitUntilDone();
+      loadedFonts.set(fontKey, allFontStuff.fontFamily);
+      return allFontStuff.fontFamily;
+    } else {
+      throw new Error(
+        `Font Package @remotion/google-fonts/${fontFamily} does not have loadFont method`
+      );
+    }
+  } catch (error) {
+    console.warn(`Failed to load font ${fontFamily}:`, error);
+    try {
+      const alternativeNames = [
+        fontFamily.toLowerCase().replace(/\s+/g, ""),
+        fontFamily.toLowerCase().replace(/\s+/g, "-"),
+        fontFamily.toLowerCase().replace(/\s+/g, "_")
+      ];
+      for (const altName of alternativeNames) {
+        if (altName === fontFamily.toLowerCase().replace(/\s+/g, "-")) {
+          continue;
+        }
+        try {
+          const altFontPackage = await import(`@remotion/google-fonts/${altName}`);
+          if (altFontPackage.loadFont) {
+            const { fontFamily: loadedFontFamily } = await altFontPackage.loadFont("normal", {
+              subsets: options.subsets || ["latin"],
+              weights: options.weights || ["400"],
+              display: options.display || "swap",
+              preload: options.preload !== false
+            });
+            loadedFonts.set(fontKey, loadedFontFamily);
+            return loadedFontFamily;
+          }
+        } catch (altError) {
+          continue;
+        }
+      }
+    } catch (altError) {
+    }
+    const fallbackFontFamily = `"${fontFamily}"`;
+    loadedFonts.set(fontKey, fallbackFontFamily);
+    return fallbackFontFamily;
+  }
+};
+var loadMultipleFonts = async (fonts) => {
+  const loadPromises = fonts.map(async ({ family, options }) => {
+    const fontFamily = await loadGoogleFont(family, options);
+    return { family, fontFamily };
+  });
+  const results = await Promise.all(loadPromises);
+  const fontMap = /* @__PURE__ */ new Map();
+  results.forEach(({ family, fontFamily }) => {
+    fontMap.set(family, fontFamily);
+  });
+  return fontMap;
+};
+var getLoadedFontFamily = (fontFamily, options = {}) => {
+  const fontKey = `${fontFamily}-${JSON.stringify(options)}`;
+  return loadedFonts.get(fontKey);
+};
+var preloadCommonFonts = async () => {
+  const commonFonts = [
+    { family: "Inter", options: { weights: ["400", "500", "600", "700"] } },
+    { family: "Roboto", options: { weights: ["400", "500", "700"] } },
+    { family: "Open Sans", options: { weights: ["400", "600", "700"] } },
+    { family: "Lato", options: { weights: ["400", "700"] } }
+  ];
+  return await loadMultipleFonts(commonFonts);
+};
+var isFontLoaded = (fontFamily, options = {}) => {
+  const fontKey = `${fontFamily}-${JSON.stringify(options)}`;
+  return loadedFonts.has(fontKey);
+};
+var clearFontCache = () => {
+  loadedFonts.clear();
+};
+var getLoadedFonts = () => {
+  return new Map(loadedFonts);
+};
+var isFontAvailable = async (fontFamily) => {
+  if (!fontFamily || typeof fontFamily !== "string") {
+    return false;
+  }
+  try {
+    const fonts = await getAvailableFonts2();
+    const isInAvailableFonts = fonts.some(
+      (font) => font.importName === fontFamily
+    );
+    if (isInAvailableFonts) {
+      return true;
+    }
+    const normalizedFontName = fontFamily.trim().replace(/\s+/g, "-").toLowerCase();
+    const fontPackage = await import(`@remotion/google-fonts/${normalizedFontName}`);
+    return !!fontPackage.loadFont;
+  } catch (error) {
+    return false;
+  }
+};
+var getNormalizedFontName = (fontFamily) => {
+  if (!fontFamily || typeof fontFamily !== "string") {
+    return "";
+  }
+  return fontFamily.trim().replace(/\s+/g, "-").toLowerCase();
+};
+
+// src/hooks/useFontLoader.ts
+var useFontLoader = (options = {}) => {
+  const [state, setState] = useState2({
+    loadedFonts: /* @__PURE__ */ new Map(),
+    loadingFonts: /* @__PURE__ */ new Set(),
+    errorFonts: /* @__PURE__ */ new Map()
+  });
+  const loadFont = useCallback(
+    async (fontFamily, fontOptions = {}) => {
+      const fontKey = `${fontFamily}-${JSON.stringify(fontOptions)}`;
+      if (state.loadedFonts.has(fontKey) || state.loadingFonts.has(fontFamily)) {
+        return state.loadedFonts.get(fontKey) || `"${fontFamily}", sans-serif`;
+      }
+      setState((prev) => ({
+        ...prev,
+        loadingFonts: new Set(prev.loadingFonts).add(fontFamily)
+      }));
+      try {
+        const cssValue = await loadGoogleFont(fontFamily, fontOptions);
+        if (cssValue !== null) {
+          setState((prev) => ({
+            ...prev,
+            loadedFonts: new Map(prev.loadedFonts).set(fontKey, cssValue),
+            loadingFonts: new Set(
+              [...prev.loadingFonts].filter((f) => f !== fontFamily)
+            )
+          }));
+          options.onLoad?.(fontFamily, cssValue);
+          return cssValue;
+        } else {
+          throw new Error(
+            `Font Package @remotion/google-fonts/${fontFamily} not found`
+          );
+        }
+      } catch (error) {
+        const errorObj = error instanceof Error ? error : new Error(String(error));
+        setState((prev) => ({
+          ...prev,
+          errorFonts: new Map(prev.errorFonts).set(fontFamily, errorObj),
+          loadingFonts: new Set(
+            [...prev.loadingFonts].filter((f) => f !== fontFamily)
+          )
+        }));
+        options.onError?.(fontFamily, errorObj);
+        const fallbackValue = `"${fontFamily}", sans-serif`;
+        return fallbackValue;
+      }
+    },
+    [state.loadedFonts, state.loadingFonts, options]
+  );
+  const loadMultipleFonts2 = useCallback(
+    async (fonts) => {
+      const fontsToLoad = fonts.filter(({ family, options: options2 = {} }) => {
+        const fontKey = `${family}-${JSON.stringify(options2)}`;
+        return !state.loadedFonts.has(fontKey) && !state.loadingFonts.has(family);
+      });
+      if (fontsToLoad.length === 0) {
+        return state.loadedFonts;
+      }
+      setState((prev) => ({
+        ...prev,
+        loadingFonts: /* @__PURE__ */ new Set([
+          ...prev.loadingFonts,
+          ...fontsToLoad.map((f) => f.family)
+        ])
+      }));
+      try {
+        const fontMap = await loadMultipleFonts(fontsToLoad);
+        const newFontsMap = /* @__PURE__ */ new Map();
+        fontsToLoad.forEach(({ family, options: options2 = {} }) => {
+          const fontKey = `${family}-${JSON.stringify(options2)}`;
+          const cssValue = fontMap.get(family);
+          if (cssValue) {
+            newFontsMap.set(fontKey, cssValue);
+          }
+        });
+        setState((prev) => ({
+          ...prev,
+          loadedFonts: new Map([...prev.loadedFonts, ...newFontsMap]),
+          loadingFonts: new Set(
+            [...prev.loadingFonts].filter(
+              (f) => !fontsToLoad.some((ftl) => ftl.family === f)
+            )
+          )
+        }));
+        fontsToLoad.forEach(({ family }) => {
+          const cssValue = fontMap.get(family);
+          if (cssValue) {
+            options.onLoad?.(family, cssValue);
+          }
+        });
+        return fontMap;
+      } catch (error) {
+        const errorObj = error instanceof Error ? error : new Error(String(error));
+        setState((prev) => ({
+          ...prev,
+          errorFonts: new Map(prev.errorFonts).set("multiple", errorObj),
+          loadingFonts: new Set(
+            [...prev.loadingFonts].filter(
+              (f) => !fontsToLoad.some((ftl) => ftl.family === f)
+            )
+          )
+        }));
+        options.onError?.("multiple", errorObj);
+        return state.loadedFonts;
+      }
+    },
+    [state.loadedFonts, state.loadingFonts, options]
+  );
+  const isFontReady = useCallback(
+    (fontFamily, options2 = {}) => {
+      const fontKey = `${fontFamily}-${JSON.stringify(options2)}`;
+      return state.loadedFonts.has(fontKey);
+    },
+    [state.loadedFonts]
+  );
+  const areFontsReady = useCallback(
+    (fontFamilies) => {
+      return fontFamilies.every(({ family, options: options2 = {} }) => {
+        const fontKey = `${family}-${JSON.stringify(options2)}`;
+        return state.loadedFonts.has(fontKey);
+      });
+    },
+    [state.loadedFonts]
+  );
+  const getFontFamily = useCallback(
+    (fontFamily, options2 = {}) => {
+      const fontKey = `${fontFamily}-${JSON.stringify(options2)}`;
+      return state.loadedFonts.get(fontKey);
+    },
+    [state.loadedFonts]
+  );
+  const getFontError = useCallback(
+    (fontFamily) => {
+      return state.errorFonts.get(fontFamily);
+    },
+    [state.errorFonts]
+  );
+  const clearErrors = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      errorFonts: /* @__PURE__ */ new Map()
+    }));
+  }, []);
+  return {
+    // State
+    loadedFonts: state.loadedFonts,
+    loadingFonts: state.loadingFonts,
+    errorFonts: state.errorFonts,
+    // Actions
+    loadFont,
+    loadMultipleFonts: loadMultipleFonts2,
+    isFontReady,
+    areFontsReady,
+    getFontFamily,
+    getFontError,
+    clearErrors
+  };
+};
+var useFont = (fontFamily, options = {}) => {
+  const { loadFont, isFontReady, getFontFamily, getFontError, ...rest } = useFontLoader(options);
+  const [isLoaded, setIsLoaded] = useState2(false);
+  const [error, setError] = useState2(null);
+  const [renderHandle] = useState2(
+    () => delayRender2(`Loading font: ${fontFamily}`)
+  );
+  const initialFontFamily = getFontFamily(fontFamily, options) || `"${fontFamily}", sans-serif`;
+  const [fontFamilyValue, setFontFamilyValue] = useState2(initialFontFamily);
+  useEffect2(() => {
+    const loadFontAsync = async () => {
+      try {
+        const cssValue = await loadFont(fontFamily, options);
+        setFontFamilyValue(cssValue);
+        setIsLoaded(true);
+        setError(null);
+        continueRender2(renderHandle);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoaded(false);
+        continueRender2(renderHandle);
+      }
+    };
+    if (!isFontReady(fontFamily, options)) {
+      loadFontAsync();
+    } else {
+      const cachedValue = getFontFamily(fontFamily, options);
+      if (cachedValue) {
+        setFontFamilyValue(cachedValue);
+      }
+      setIsLoaded(true);
+      continueRender2(renderHandle);
+    }
+  }, [fontFamily, loadFont, isFontReady, getFontFamily, options, renderHandle]);
+  return {
+    isLoaded,
+    error,
+    isReady: isFontReady(fontFamily, options),
+    fontFamily: fontFamilyValue,
+    ...rest
+  };
+};
+
+// src/components/atoms/TextAtom.tsx
+var Atom3 = ({ id, data }) => {
+  const overrideStyles = useAnimatedStyles(id);
+  const [isFontLoading, setIsFontLoading] = useState3(false);
+  const [renderHandle] = useState3(
+    () => delayRender3(`Loading font: ${data.font?.family}`)
+  );
+  const { isLoaded, error, isReady, fontFamily } = useFont(
+    data.font?.family || "Inter",
+    {
+      weights: data.font?.weights || ["400"],
+      subsets: data.font?.subsets || ["latin"],
+      display: data.font?.display || "swap",
+      preload: data.font?.preload !== false,
+      onLoad: (family, cssValue) => {
+        setIsFontLoading(false);
+        continueRender3(renderHandle);
+      },
+      onError: (family, error2) => {
+        setIsFontLoading(false);
+        continueRender3(renderHandle);
+      }
+    }
+  );
+  useEffect3(() => {
+    if (data.font?.family) {
+      if (isReady || isLoaded) {
+        setIsFontLoading(false);
+      } else if (!isReady && !isLoaded && !error) {
+        setIsFontLoading(true);
+      }
+    }
+  }, [data.font, isReady, isLoaded, error]);
+  const enhancedStyle = useMemo9(() => {
+    const baseStyle = {
+      fontFamily,
+      ...data.style
+    };
+    if (data.gradient) {
+      return {
+        ...baseStyle,
+        backgroundImage: data.gradient,
+        backgroundClip: "text",
+        WebkitBackgroundClip: "text",
+        color: "transparent",
+        ...overrideStyles
+      };
+    }
+    return {
+      ...baseStyle,
+      ...overrideStyles
+    };
+  }, [fontFamily, data.style, data.gradient, overrideStyles]);
+  if (isFontLoading && data.loadingState?.showLoadingIndicator) {
+    return /* @__PURE__ */ React16.createElement("div", { style: enhancedStyle, className: data.className }, /* @__PURE__ */ React16.createElement("span", { style: data.loadingState.loadingStyle }, data.loadingState.loadingText || "Loading..."));
+  }
+  if (error && data.errorState?.showErrorIndicator) {
+    return /* @__PURE__ */ React16.createElement("div", { style: enhancedStyle, className: data.className }, /* @__PURE__ */ React16.createElement("span", { style: data.errorState.errorStyle }, data.errorState.errorText || data.text));
+  }
+  return /* @__PURE__ */ React16.createElement(
+    "div",
+    {
+      style: enhancedStyle,
+      className: data.className,
+      "data-font-loading": isFontLoading,
+      "data-font-loaded": isReady || isLoaded,
+      "data-font-error": !!error,
+      "data-font-family": data.font?.family || "system"
+    },
+    data.text
+  );
+};
+var config11 = {
+  displayName: "TextAtom",
+  type: "atom",
+  isInnerSequence: false
+};
+
+// src/components/atoms/VideoAtom.tsx
+import React17, { useMemo as useMemo10 } from "react";
+import { staticFile as staticFile2, useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig5, OffthreadVideo, Loop as Loop2 } from "remotion";
+import { z } from "zod";
+var VideoAtomDataProps = z.object({
+  src: z.string(),
+  // Video source URL
+  srcDuration: z.number().optional(),
+  // Video duration in seconds (or to say it more accurately, each iteration duration in a loop))
+  style: z.record(z.string(), z.any()).optional(),
+  // CSS styles object
+  containerClassName: z.string().optional(),
+  // CSS class names
+  className: z.string().optional(),
+  // CSS class names
+  startFrom: z.number().optional(),
+  // Start playback from this time (seconds)
+  endAt: z.number().optional(),
+  // End playback at this time (seconds)
+  playbackRate: z.number().optional(),
+  // Playback speed multiplier
+  volume: z.number().optional(),
+  // Volume level (0-1)
+  muted: z.boolean().optional(),
+  // Mute video audio
+  loop: z.boolean().optional(),
+  // Whether to loop the video
+  fit: z.enum(["contain", "cover", "fill", "none", "scale-down"]).optional()
+  // Object fit style
+});
+var Atom4 = ({ data, id, context }) => {
+  const { fps } = useVideoConfig5();
+  const overrideStyles = useAnimatedStyles(id);
+  const frame = useCurrentFrame5();
+  const source = useMemo10(() => {
+    if (data.src.startsWith("http")) {
+      return data.src;
+    }
+    return staticFile2(data.src);
+  }, [data.src]);
+  const trimBefore = useMemo10(() => {
+    return data.startFrom ? data.startFrom * fps : void 0;
+  }, [data.startFrom, fps]);
+  const trimAfter = useMemo10(() => {
+    return data.endAt ? data.endAt * fps : void 0;
+  }, [data.endAt, fps]);
+  const videoComponent = /* @__PURE__ */ React17.createElement(
+    OffthreadVideo,
+    {
+      className: data.className,
+      src: source,
+      style: data.style ? { ...data.style, ...data.fit ? { objectFit: data.fit } : {} } : {},
+      trimBefore,
+      trimAfter,
+      playbackRate: data.playbackRate,
+      volume: data.volume,
+      muted: data.muted
+    }
+  );
+  const videoWithStyles = data.containerClassName ? videoComponent : /* @__PURE__ */ React17.createElement(
+    OffthreadVideo,
+    {
+      className: data.className,
+      src: source,
+      style: data.style ? { ...data.style, ...data.fit ? { objectFit: data.fit } : {}, ...overrideStyles } : overrideStyles,
+      trimBefore,
+      trimAfter,
+      playbackRate: data.playbackRate,
+      volume: data.volume,
+      muted: data.muted
+    }
+  );
+  if (data.loop) {
+    return /* @__PURE__ */ React17.createElement(Loop2, { times: Infinity, durationInFrames: data.srcDuration ? data.srcDuration * fps : context.timing?.durationInFrames, layout: "none" }, data.containerClassName ? /* @__PURE__ */ React17.createElement("div", { className: data.containerClassName, style: overrideStyles }, videoComponent) : videoWithStyles);
+  }
+  return data.containerClassName ? /* @__PURE__ */ React17.createElement("div", { className: data.containerClassName, style: overrideStyles }, videoComponent) : videoWithStyles;
+};
+var config12 = {
+  displayName: "VideoAtom",
+  type: "atom",
+  isInnerSequence: false
+};
+
+// src/components/atoms/AudioAtom.tsx
+import React18, { useMemo as useMemo11 } from "react";
+import { Audio, staticFile as staticFile3, useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig6 } from "remotion";
+import { z as z2 } from "zod";
+var AudioAtomMutedRangeProps = z2.object({
+  type: z2.literal("range"),
+  values: z2.array(z2.object({
+    start: z2.number(),
+    // Start time in seconds
+    end: z2.number()
+    // End time in seconds
+  }))
+});
+var AudioAtomMutedFullProps = z2.object({
+  type: z2.literal("full"),
+  value: z2.boolean()
+  // true = muted, false = unmuted
+});
+var AudioAtomDataProps = z2.object({
+  src: z2.string(),
+  // Audio source URL
+  startFrom: z2.number().optional(),
+  // Start playback from this time (seconds)
+  endAt: z2.number().optional(),
+  // End playback at this time (seconds)
+  volume: z2.number().optional(),
+  // Volume level (0-1)
+  playbackRate: z2.number().optional(),
+  // Playback speed multiplier
+  muted: z2.union([AudioAtomMutedFullProps, AudioAtomMutedRangeProps]).optional()
+  // Mute configuration
+});
+var Atom5 = ({ data }) => {
+  const { fps } = useVideoConfig6();
+  const { muted } = data;
+  const frame = useCurrentFrame6();
+  const isMuted = useMemo11(() => {
+    if (muted?.type === "full") {
+      return muted.value;
+    }
+    if (muted?.type === "range") {
+      return muted?.values.some(
+        (value) => frame >= value.start * fps && frame <= value.end * fps
+      );
+    }
+    return false;
+  }, [muted, frame, fps]);
+  const source = useMemo11(() => {
+    if (data.src.startsWith("http")) {
+      return data.src;
+    }
+    return staticFile3(data.src);
+  }, [data.src]);
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ React18.createElement(
+      Audio,
+      {
+        src: source,
+        trimBefore: data.startFrom ? data.startFrom * fps : void 0,
+        trimAfter: data.endAt ? data.endAt * fps : void 0,
+        volume: data.volume,
+        playbackRate: data.playbackRate,
+        muted: isMuted
+      }
+    )
+  );
+};
+var config13 = {
+  displayName: "AudioAtom",
+  type: "atom",
+  isInnerSequence: false
+};
+
+// src/components/atoms/LottieAtom.tsx
+import React19, { useMemo as useMemo12, useState as useState4, useEffect as useEffect4 } from "react";
+import { continueRender as continueRender4, delayRender as delayRender5, staticFile as staticFile4, useCurrentFrame as useCurrentFrame7, useVideoConfig as useVideoConfig7 } from "remotion";
+import { Lottie } from "@remotion/lottie";
+import { z as z3 } from "zod";
+var LottieAtomDataProps = z3.object({
+  src: z3.string(),
+  // Lottie JSON source URL or local path
+  style: z3.record(z3.string(), z3.any()).optional(),
+  // CSS styles object
+  className: z3.string().optional(),
+  // CSS class names
+  loop: z3.boolean().optional(),
+  // Whether to loop the animation (handled by Remotion timeline)
+  playbackRate: z3.number().optional(),
+  // Playback speed multiplier (default: 1)
+  direction: z3.enum(["forward", "reverse"]).optional()
+  // Animation direction
+});
+var useLottieData = (src) => {
+  const [animationData, setAnimationData] = useState4(null);
+  const [isLoading, setIsLoading] = useState4(true);
+  const [hasError, setHasError] = useState4(false);
+  const [handle] = useState4(() => delayRender5("Loading Lottie animation"));
+  useEffect4(() => {
+    if (!src) {
+      console.error("LottieAtom: No source provided");
+      setHasError(true);
+      setIsLoading(false);
+      continueRender4(handle);
+      return;
+    }
+    setIsLoading(true);
+    setHasError(false);
+    const sourceUrl = src.startsWith("http") ? src : staticFile4(src);
+    fetch(sourceUrl, {
+      mode: "cors",
+      credentials: "omit"
+    }).then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText} for ${sourceUrl}`);
+      }
+      return response.json();
+    }).then((json) => {
+      if (!json || typeof json !== "object") {
+        throw new Error("Invalid Lottie JSON data");
+      }
+      setAnimationData(json);
+      setIsLoading(false);
+      continueRender4(handle);
+    }).catch((error) => {
+      console.error(`Failed to load Lottie animation from ${sourceUrl}:`, error.message || error);
+      setHasError(true);
+      setIsLoading(false);
+      continueRender4(handle);
+    });
+    return () => {
+    };
+  }, [src, handle]);
+  return { animationData, isLoading, hasError };
+};
+var Atom6 = ({ data, id }) => {
+  const { fps } = useVideoConfig7();
+  const frame = useCurrentFrame7();
+  const overrideStyles = useAnimatedStyles(id);
+  const { animationData, isLoading, hasError } = useLottieData(data.src);
+  const effectiveFrame = useMemo12(() => {
+    const playbackRate = data.playbackRate || 1;
+    const direction = data.direction || "forward";
+    if (direction === "reverse") {
+      return frame * playbackRate * -1;
+    }
+    return frame * playbackRate;
+  }, [frame, data.playbackRate, data.direction]);
+  const enhancedStyle = useMemo12(() => ({
+    ...data.style,
+    ...overrideStyles
+  }), [data.style, overrideStyles]);
+  if (isLoading) {
+    return /* @__PURE__ */ React19.createElement(
+      "div",
+      {
+        className: data.className,
+        style: {
+          ...enhancedStyle,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          opacity: 0.5
+        }
+      }
+    );
+  }
+  if (hasError || !animationData) {
+    console.warn(`LottieAtom: Failed to render animation from ${data.src}`);
+    return /* @__PURE__ */ React19.createElement(
+      "div",
+      {
+        className: data.className,
+        style: {
+          ...enhancedStyle,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "rgba(255, 0, 0, 0.1)",
+          border: "2px dashed rgba(255, 0, 0, 0.3)",
+          color: "red",
+          fontSize: 12,
+          textAlign: "center",
+          padding: 10
+        }
+      },
+      "\u26A0\uFE0F Lottie Error"
+    );
+  }
+  return /* @__PURE__ */ React19.createElement(
+    Lottie,
+    {
+      animationData,
+      style: enhancedStyle,
+      className: data.className
+    }
+  );
+};
+var config14 = {
+  displayName: "LottieAtom",
+  type: "atom",
+  isInnerSequence: false
+};
+
+// src/components/atoms/index.ts
+registerComponent(
+  config9.displayName,
+  Atom,
+  "atom",
+  config9
+);
+registerComponent(
+  config10.displayName,
+  Atom2,
+  "atom",
+  config10
+);
+registerComponent(config11.displayName, Atom3, "atom", config11);
+registerComponent(
+  config12.displayName,
+  Atom4,
+  "atom",
+  config12
+);
+registerComponent(
+  config13.displayName,
+  Atom5,
+  "atom",
+  config13
+);
+registerComponent(
+  config14.displayName,
+  Atom6,
+  "atom",
+  config14
+);
+
+// src/hooks/useComponentRegistry.ts
+import { useMemo as useMemo13 } from "react";
+var useComponentRegistry = () => {
+  return useMemo13(() => {
+    return {
+      registerComponent: componentRegistry.registerComponent.bind(componentRegistry),
+      registerPackage: componentRegistry.registerPackage.bind(componentRegistry),
+      getComponent: componentRegistry.getComponent.bind(componentRegistry),
+      getAllComponents: componentRegistry.getAllComponents.bind(componentRegistry)
+    };
+  }, []);
+};
+
+// src/hooks/useBoundaryCalculation.ts
+import { useMemo as useMemo14 } from "react";
+var useBoundaryCalculation = ({
+  parentBoundaries,
+  constraints,
+  layout
+}) => {
+  return useMemo14(() => {
+    const { x, y, width, height } = parentBoundaries;
+    const calculatedX = typeof constraints.x === "number" ? constraints.x : x;
+    const calculatedY = typeof constraints.y === "number" ? constraints.y : y;
+    const calculatedWidth = typeof constraints.width === "number" ? constraints.width : width;
+    const calculatedHeight = typeof constraints.height === "number" ? constraints.height : height;
+    return {
+      x: calculatedX,
+      y: calculatedY,
+      width: calculatedWidth,
+      height: calculatedHeight,
+      zIndex: constraints.zIndex || 0
+    };
+  }, [parentBoundaries, constraints, layout]);
+};
+
+// src/hooks/buildTransitionHook.ts
+import { useContext as useContext5 } from "react";
+
+// src/core/types/transition.types.ts
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var LayoutContext = createContext4(null);
+
+// src/hooks/buildTransitionHook.ts
+function buildLayoutHook(schema, defaultValue) {
+  return () => {
+    const context = useContext5(LayoutContext);
+    if (!context) {
+      return defaultValue;
+    }
+    try {
+      const validatedData = schema.parse(context);
+      return validatedData;
+    } catch (error) {
+      console.warn("Transition data validation failed, using defaults:", error);
+      return defaultValue;
+    }
+  };
+}
+
+// src/utils/contextUtils.ts
+var createRootContext = (width, height, duration, fps) => {
+  return {
+    boundaries: {
+      left: 0,
+      top: 0,
+      width,
+      height,
+      zIndex: 0
+    },
+    timing: {
+      startInFrames: 0,
+      durationInFrames: duration
+    },
+    hierarchy: {
+      depth: 0,
+      parentIds: []
+    }
+  };
+};
+var mergeContexts = (parent, child) => {
+  return {
+    boundaries: {
+      ...parent.boundaries,
+      ...child.boundaries
+    },
+    timing: { ...parent.timing, ...child.timing },
+    hierarchy: {
+      depth: (parent.hierarchy?.depth || 0) + 1,
+      parentIds: [...parent.hierarchy?.parentIds || [], "root"]
+    }
+  };
+};
+
+// src/utils/boundaryUtils.ts
+var calculateGridPosition = (index, columns, cellWidth, cellHeight, spacing) => {
+  const row = Math.floor(index / columns);
+  const col = index % columns;
+  return {
+    x: col * (cellWidth + spacing),
+    y: row * (cellHeight + spacing),
+    width: cellWidth,
+    height: cellHeight
+  };
+};
+var calculateCircularPosition = (index, total, radius, centerX, centerY) => {
+  const angle = index / total * 2 * Math.PI;
+  return {
+    x: centerX + radius * Math.cos(angle),
+    y: centerY + radius * Math.sin(angle)
+  };
+};
+
+// src/utils/imageProxy.ts
+var createImageProxyUrl = (imageUrl, proxyEndpoint = "/api/proxy/image") => {
+  return `${proxyEndpoint}?url=${encodeURIComponent(imageUrl)}`;
+};
+var createImageDataWithProxy = (src, proxyEndpoint) => {
+  return {
+    src,
+    proxySrc: proxyEndpoint || "/api/proxy/image",
+    style: {},
+    className: ""
+  };
+};
+var needsProxying = (url) => {
+  return url.startsWith("http://") || url.startsWith("https://");
+};
+
+// src/templates/rings/NextjsLogo.tsx
+import { evolvePath } from "@remotion/paths";
+import React22, { useMemo as useMemo15 } from "react";
+import { interpolate as interpolate5, spring as spring5, useCurrentFrame as useCurrentFrame9, useVideoConfig as useVideoConfig9 } from "remotion";
+
+// src/templates/rings/RippleOutLayout.tsx
+import React21 from "react";
+import { spring as spring4, useCurrentFrame as useCurrentFrame8, useVideoConfig as useVideoConfig8, Sequence as Sequence2, AbsoluteFill as AbsoluteFill4 } from "remotion";
+import { z as z4 } from "zod";
+var RippleOutTransitionSchema = z4.object({
+  progress: z4.number().min(0).max(1),
+  logoOut: z4.number().min(0).max(1)
+});
+var defaultRippleOutData = {
+  progress: 0,
+  logoOut: 0
+};
+var useRippleOutLayout = buildLayoutHook(
+  RippleOutTransitionSchema,
+  defaultRippleOutData
+);
+var container = {
+  backgroundColor: "white"
+};
+var RippleOutLayout = ({ data, context, children }) => {
+  const {
+    transitionStart,
+    transitionDuration
+  } = data || { transitionStart: 2, transitionDuration: 1 };
+  const frame = useCurrentFrame8();
+  const { fps } = useVideoConfig8();
+  const { hierarchy } = useRenderContext();
+  React21.useEffect(() => {
+    loadGoogleFont("Inter", {
+      subsets: ["latin"],
+      weights: ["400", "700"]
+    }).catch(console.warn);
+  }, []);
+  const transitionStartFrame = transitionStart * fps;
+  const transitionDurationFrames = transitionDuration * fps;
+  const logoOut = spring4({
+    fps,
+    frame,
+    config: {
+      damping: 200
+    },
+    durationInFrames: transitionDurationFrames,
+    delay: transitionStartFrame
+  });
+  const transitionData = {
+    progress: logoOut,
+    logoOut
+  };
+  const childrenArray = React21.Children.toArray(children).filter(
+    (child) => React21.isValidElement(child)
+  );
+  const [from, to] = childrenArray;
+  return /* @__PURE__ */ React21.createElement(LayoutContext.Provider, { value: transitionData }, /* @__PURE__ */ React21.createElement(AbsoluteFill4, { style: {
+    ...container,
+    ...context?.boundaries
+  } }, /* @__PURE__ */ React21.createElement(Sequence2, { name: from.props.componentId + " - " + from.props.id, from: 0, durationInFrames: transitionStartFrame + transitionDurationFrames }, from), /* @__PURE__ */ React21.createElement(Sequence2, { name: to.props.componentId + " - " + to.props.id, from: transitionStartFrame + transitionDurationFrames / 2 }, to)));
+};
+var rippleOutLayoutConfig = {
+  displayName: "RippleOutLayout",
+  type: "layout",
+  isInnerSequence: true
+};
+
+// src/templates/rings/NextjsLogo.tsx
+var mask = {
+  maskType: "alpha"
+};
+var nStroke = "M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z";
+var NextjsLogo = () => {
+  const { logoOut } = useRippleOutLayout();
+  const outProgress = logoOut;
+  const { fps } = useVideoConfig9();
+  const frame = useCurrentFrame9();
+  const evolve1 = spring5({
+    fps,
+    frame,
+    config: {
+      damping: 200
+    }
+  });
+  const evolve2 = spring5({
+    fps,
+    frame: frame - 15,
+    config: {
+      damping: 200
+    }
+  });
+  const evolve3 = spring5({
+    fps,
+    frame: frame - 30,
+    config: {
+      damping: 200,
+      mass: 3
+    },
+    durationInFrames: 30
+  });
+  const style = useMemo15(() => {
+    return {
+      height: 140,
+      borderRadius: 70,
+      scale: String(1 - outProgress)
+    };
+  }, [outProgress]);
+  const firstPath = `M 60.0568 54 v 71.97`;
+  const secondPath = `M 63.47956 56.17496 L 144.7535 161.1825`;
+  const thirdPath = `M 121 54 L 121 126`;
+  const evolution1 = evolvePath(evolve1, firstPath);
+  const evolution2 = evolvePath(evolve2, secondPath);
+  const evolution3 = evolvePath(
+    interpolate5(evolve3, [0, 1], [0, 0.7]),
+    thirdPath
+  );
+  return /* @__PURE__ */ React22.createElement("svg", { style, fill: "none", viewBox: "0 0 180 180" }, /* @__PURE__ */ React22.createElement("mask", { height: "180", id: "mask", style: mask, width: "180", x: "0", y: "0" }, /* @__PURE__ */ React22.createElement("circle", { cx: "90", cy: "90", fill: "black", r: "90" })), /* @__PURE__ */ React22.createElement("mask", { id: "n-mask", style: mask }, /* @__PURE__ */ React22.createElement("path", { d: nStroke, fill: "black" })), /* @__PURE__ */ React22.createElement("g", { mask: "url(#mask)" }, /* @__PURE__ */ React22.createElement("circle", { cx: "90", cy: "90", fill: "black", r: "90" }), /* @__PURE__ */ React22.createElement("g", { stroke: "url(#gradient0)", mask: "url(#n-mask)" }, /* @__PURE__ */ React22.createElement(
+    "path",
+    {
+      strokeWidth: "12.1136",
+      d: firstPath,
+      strokeDasharray: evolution1.strokeDasharray,
+      strokeDashoffset: evolution1.strokeDashoffset
+    }
+  ), /* @__PURE__ */ React22.createElement(
+    "path",
+    {
+      strokeWidth: 12.1136,
+      d: secondPath,
+      strokeDasharray: evolution2.strokeDasharray,
+      strokeDashoffset: evolution2.strokeDashoffset
+    }
+  )), /* @__PURE__ */ React22.createElement(
+    "path",
+    {
+      stroke: "url(#gradient1)",
+      d: thirdPath,
+      strokeDasharray: evolution3.strokeDasharray,
+      strokeDashoffset: evolution3.strokeDashoffset,
+      strokeWidth: "12"
+    }
+  )), /* @__PURE__ */ React22.createElement("defs", null, /* @__PURE__ */ React22.createElement(
+    "linearGradient",
+    {
+      gradientUnits: "userSpaceOnUse",
+      id: "gradient0",
+      x1: "109",
+      x2: "144.5",
+      y1: "116.5",
+      y2: "160.5"
+    },
+    /* @__PURE__ */ React22.createElement("stop", { stopColor: "white" }),
+    /* @__PURE__ */ React22.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+  ), /* @__PURE__ */ React22.createElement(
+    "linearGradient",
+    {
+      gradientUnits: "userSpaceOnUse",
+      id: "gradient1",
+      x1: "121",
+      x2: "120.799",
+      y1: "54",
+      y2: "106.875"
+    },
+    /* @__PURE__ */ React22.createElement("stop", { stopColor: "white" }),
+    /* @__PURE__ */ React22.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+  )));
+};
+var nextjsLogoConfig = {
+  displayName: "NextjsLogo",
+  type: "atom",
+  isInnerSequence: false
+};
+
+// src/templates/rings/Rings.tsx
+import React23 from "react";
+import { AbsoluteFill as AbsoluteFill5, interpolateColors as interpolateColors2, useVideoConfig as useVideoConfig10 } from "remotion";
+var RadialGradient = ({ radius, color }) => {
+  const height = radius * 2;
+  const width = radius * 2;
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ React23.createElement(
+      AbsoluteFill5,
+      {
+        style: {
+          justifyContent: "center",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ React23.createElement(
+        "div",
+        {
+          style: {
+            height,
+            width,
+            borderRadius: "50%",
+            backgroundColor: color,
+            position: "absolute",
+            boxShadow: "0 0 100px rgba(0, 0, 0, 0.05)"
+          }
+        }
+      )
+    )
+  );
+};
+var Rings = ({ context, data }) => {
+  const { logoOut } = useRippleOutLayout();
+  const outProgress = logoOut;
+  const scale = 1 / (1 - outProgress);
+  const { height } = useVideoConfig10();
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ React23.createElement(
+      AbsoluteFill5,
+      {
+        style: {
+          transform: `scale(${scale})`,
+          ...context?.boundaries
+        }
+      },
+      new Array(5).fill(true).map((_, i) => {
+        return /* @__PURE__ */ React23.createElement(
+          RadialGradient,
+          {
+            key: i,
+            radius: height * 0.3 * i,
+            color: interpolateColors2(i, [0, 4], ["#fff", "#fff"])
+          }
+        );
+      }).reverse()
+    )
+  );
+};
+var ringsConfig = {
+  displayName: "Rings",
+  type: "atom",
+  isInnerSequence: false
+};
+
+// src/templates/rings/TextFade.tsx
+import React24, { useMemo as useMemo16 } from "react";
+import {
+  AbsoluteFill as AbsoluteFill6,
+  interpolate as interpolate6,
+  spring as spring6,
+  useCurrentFrame as useCurrentFrame10,
+  useVideoConfig as useVideoConfig11
+} from "remotion";
+var TextFade = (props) => {
+  const { children, context, data } = props;
+  const { animation } = data || {
+    animation: {
+      duration: 1
+    }
+  };
+  const { fps } = useVideoConfig11();
+  const frame = useCurrentFrame10();
+  const progress = spring6({
+    fps,
+    frame,
+    config: {
+      damping: 200
+    },
+    durationInFrames: animation.duration * fps
+  });
+  const rightStop = interpolate6(progress, [0, 1], [200, 0]);
+  const leftStop = Math.max(0, rightStop - 60);
+  const maskImage = `linear-gradient(-45deg, transparent ${leftStop}%, black ${rightStop}%)`;
+  const container2 = useMemo16(() => {
+    return {
+      width: "100%",
+      height: "100%",
+      justifyContent: "center",
+      alignItems: "center"
+    };
+  }, []);
+  const content = useMemo16(() => {
+    return {
+      ...context?.boundaries,
+      maskImage,
+      WebkitMaskImage: maskImage,
+      justifyContent: "center",
+      alignItems: "center",
+      display: "flex"
+    };
+  }, [maskImage]);
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ React24.createElement(AbsoluteFill6, { style: container2 }, /* @__PURE__ */ React24.createElement("div", { style: content }, children))
+  );
+};
+var textFadeConfig = {
+  displayName: "TextFade",
+  type: "layout",
+  isInnerSequence: false
+};
+
+// src/templates/rings/index.ts
+registerComponent(
+  nextjsLogoConfig.displayName,
+  NextjsLogo,
+  "atom",
+  nextjsLogoConfig
+);
+registerComponent(
+  textFadeConfig.displayName,
+  TextFade,
+  "layout",
+  textFadeConfig
+);
+registerComponent(ringsConfig.displayName, Rings, "atom", ringsConfig);
+registerComponent(
+  rippleOutLayoutConfig.displayName,
+  RippleOutLayout,
+  "layout",
+  rippleOutLayoutConfig
+);
+
+// src/templates/waveform/components/WaveformCircle.tsx
+import React26, { useMemo as useMemo18 } from "react";
+
+// src/templates/waveform/Waveform.tsx
+import React25, { createContext as createContext5, useContext as useContext6 } from "react";
+import { useCurrentFrame as useCurrentFrame11, useVideoConfig as useVideoConfig12 } from "remotion";
+
+// src/templates/waveform/hooks/useWaveformData.ts
+import { useMemo as useMemo17 } from "react";
+import {
+  useAudioData,
+  visualizeAudioWaveform,
+  visualizeAudio
+} from "@remotion/media-utils";
+import { staticFile as staticFile5 } from "remotion";
+var isValidPowerOfTwo = (num) => {
+  return num > 0 && (num & num - 1) === 0;
+};
+var getClosestPowerOfTwo = (num) => {
+  if (num <= 0) return 32;
+  let power = 1;
+  while (power < num) {
+    power *= 2;
+  }
+  const lower = power / 2;
+  const upper = power;
+  return Math.abs(num - lower) < Math.abs(num - upper) ? lower : upper;
+};
+var useWaveformData = (config15) => {
+  const {
+    audioSrc,
+    numberOfSamples,
+    windowInSeconds,
+    dataOffsetInSeconds = 0,
+    normalize = false,
+    frame,
+    fps,
+    posterize,
+    includeFrequencyData = false,
+    minDb = -100,
+    maxDb = -30
+  } = config15;
+  const { root } = useComposition();
+  const validatedNumberOfSamples = useMemo17(() => {
+    if (!isValidPowerOfTwo(numberOfSamples)) {
+      console.warn(
+        `numberOfSamples must be a power of 2. Adjusting ${numberOfSamples} to ${getClosestPowerOfTwo(numberOfSamples)}`
+      );
+      return getClosestPowerOfTwo(numberOfSamples);
+    }
+    return numberOfSamples;
+  }, [numberOfSamples]);
+  const { source, audioStartsFrom } = useMemo17(() => {
+    if (audioSrc.startsWith("http")) {
+      return { source: audioSrc, audioStartsFrom: void 0 };
+    }
+    if (audioSrc.startsWith("ref:")) {
+      const matchingComponent = findMatchingComponents(root, [
+        audioSrc.replace("ref:", "")
+      ]);
+      if (matchingComponent.length > 0) {
+        const firstMatchingComponent = matchingComponent[0];
+        if (firstMatchingComponent.componentId === "AudioAtom") {
+          return {
+            source: firstMatchingComponent.data.src,
+            audioStartsFrom: firstMatchingComponent.data?.startFrom ?? void 0
+          };
+        }
+        if (firstMatchingComponent.type === "layout" || firstMatchingComponent.type === "scene") {
+          const audioComponents = findMatchingComponentsByQuery(
+            firstMatchingComponent.childrenData,
+            { componentId: "AudioAtom" }
+          );
+          if (audioComponents.length > 0) {
+            return {
+              source: audioComponents[0].data.src,
+              audioStartsFrom: audioComponents[0].data?.startFrom ?? void 0
+            };
+          }
+        }
+      }
+    }
+    return { source: staticFile5(audioSrc), audioStartsFrom: void 0 };
+  }, [audioSrc]);
+  const audioData = useAudioData(source);
+  const adjustedFrame = useMemo17(() => {
+    if (posterize && posterize > 1) {
+      return Math.round(frame / posterize) * posterize;
+    }
+    let offset = 0;
+    if (audioStartsFrom && audioStartsFrom != 0) {
+      offset += Math.round(audioStartsFrom * fps);
+    }
+    if (dataOffsetInSeconds != 0) {
+      offset += Math.round(dataOffsetInSeconds * fps);
+    }
+    return frame + offset;
+  }, [frame, posterize, dataOffsetInSeconds, audioStartsFrom]);
+  const waveformData = useMemo17(() => {
+    if (!audioData) return null;
+    try {
+      const waveform = visualizeAudioWaveform({
+        fps,
+        frame: adjustedFrame,
+        audioData,
+        numberOfSamples: validatedNumberOfSamples,
+        windowInSeconds,
+        dataOffsetInSeconds: 0,
+        normalize
+      });
+      return waveform;
+    } catch (error2) {
+      console.error("Error generating waveform:", error2);
+      return null;
+    }
+  }, [
+    audioData,
+    adjustedFrame,
+    fps,
+    validatedNumberOfSamples,
+    windowInSeconds,
+    dataOffsetInSeconds,
+    normalize
+  ]);
+  const {
+    frequencyData,
+    amplitudes,
+    bass,
+    mid,
+    treble,
+    bassValues,
+    midValues,
+    trebleValues
+  } = useMemo17(() => {
+    if (!audioData || !includeFrequencyData) {
+      return {
+        frequencyData: null,
+        amplitudes: null,
+        bass: null,
+        mid: null,
+        treble: null,
+        bassValues: null,
+        midValues: null,
+        trebleValues: null
+      };
+    }
+    try {
+      const frequencyData2 = visualizeAudio({
+        fps,
+        frame: adjustedFrame,
+        audioData,
+        numberOfSamples: validatedNumberOfSamples
+      });
+      const { sampleRate } = audioData;
+      const bassValues2 = [];
+      const midValues2 = [];
+      const trebleValues2 = [];
+      for (let i = 0; i < frequencyData2.length; i++) {
+        const freq = i * sampleRate / (2 * frequencyData2.length);
+        const value = frequencyData2[i];
+        if (freq >= 0 && freq < 250) {
+          bassValues2.push(value * 2.5);
+        } else if (freq >= 250 && freq < 4e3) {
+          midValues2.push(value * 3);
+          midValues2.push(value * 4.5);
+          midValues2.push(value * 5);
+        } else if (freq >= 4e3 && freq < sampleRate / 2) {
+          trebleValues2.push(value * 30);
+        }
+      }
+      const getAverage = (arr) => arr.length > 0 ? arr.reduce((a, b) => a + b, 0) / arr.length : 0;
+      const bass2 = getAverage(bassValues2);
+      const mid2 = getAverage(midValues2);
+      const treble2 = getAverage(trebleValues2);
+      const amplitudes2 = frequencyData2.map((value) => {
+        const db = 20 * Math.log10(value);
+        const scaled = (db - minDb) / (maxDb - minDb);
+        return Math.max(0, Math.min(1, scaled));
+      });
+      return {
+        frequencyData: frequencyData2,
+        amplitudes: amplitudes2,
+        bass: bass2,
+        mid: mid2,
+        treble: treble2,
+        bassValues: bassValues2,
+        midValues: midValues2,
+        trebleValues: trebleValues2.reverse()
+      };
+    } catch (error2) {
+      console.error("Error generating frequency data:", error2);
+      return {
+        frequencyData: null,
+        amplitudes: null,
+        bass: null,
+        mid: null,
+        treble: null
+      };
+    }
+  }, [
+    audioData,
+    includeFrequencyData,
+    adjustedFrame,
+    fps,
+    validatedNumberOfSamples,
+    windowInSeconds,
+    dataOffsetInSeconds,
+    minDb,
+    maxDb
+  ]);
+  const isLoading = !audioData;
+  const error = audioData === null && !isLoading ? "Failed to load audio data" : null;
+  return {
+    waveformData,
+    frequencyData,
+    amplitudes,
+    audioData,
+    isLoading,
+    error,
+    bass,
+    bassValues,
+    mid,
+    midValues,
+    treble,
+    trebleValues
+  };
+};
+
+// src/templates/waveform/Waveform.tsx
+var WaveformContext = createContext5(null);
+var useWaveformContext = () => {
+  const context = useContext6(WaveformContext);
+  if (!context) {
+    throw new Error("useWaveformContext must be used within a Waveform component");
+  }
+  return context;
+};
+var Waveform = ({
+  config: config15,
+  children,
+  className = "",
+  style = {}
+}) => {
+  const frame = useCurrentFrame11();
+  const { width: videoWidth, height: videoHeight, fps } = useVideoConfig12();
+  const { waveformData, frequencyData, amplitudes, audioData, bass, mid, treble, bassValues, midValues, trebleValues } = useWaveformData({
+    audioSrc: config15.audioSrc,
+    numberOfSamples: config15.numberOfSamples || 128,
+    windowInSeconds: config15.windowInSeconds || 1 / fps,
+    dataOffsetInSeconds: config15.dataOffsetInSeconds || 0,
+    normalize: config15.normalize || false,
+    frame,
+    fps,
+    posterize: config15.posterize,
+    includeFrequencyData: config15.useFrequencyData || false
+  });
+  const width = config15.width || videoWidth;
+  const height = config15.height || videoHeight;
+  const contextValue = {
+    waveformData,
+    frequencyData,
+    amplitudes,
+    audioData,
+    frame,
+    fps,
+    config: config15,
+    width,
+    height,
+    bass,
+    mid,
+    treble,
+    bassValues,
+    midValues,
+    trebleValues
+  };
+  return /* @__PURE__ */ React25.createElement(WaveformContext.Provider, { value: contextValue }, /* @__PURE__ */ React25.createElement(
+    "div",
+    {
+      className: `relative ${className}`,
+      style: {
+        width,
+        height,
+        position: "relative",
+        backgroundColor: config15.backgroundColor || "transparent",
+        ...style
+      }
+    },
+    children
+  ));
+};
+
+// src/templates/waveform/components/WaveformCircle.tsx
+var WaveformCircle = ({ data }) => {
+  const {
+    config: config15,
+    className = "",
+    style = {},
+    strokeColor = "#FF6B6B",
+    strokeWidth = 3,
+    fill = "none",
+    opacity = 1,
+    radius = 80,
+    centerX = 50,
+    centerY = 50,
+    startAngle = 0,
+    endAngle = 360,
+    amplitude = 1,
+    rotationSpeed = 0,
+    gradientStartColor,
+    gradientEndColor
+  } = data;
+  return /* @__PURE__ */ React26.createElement(Waveform, { config: config15, className, style }, /* @__PURE__ */ React26.createElement(
+    WaveformCircleContent,
+    {
+      strokeColor,
+      strokeWidth,
+      fill,
+      opacity,
+      radius,
+      centerX,
+      centerY,
+      startAngle,
+      endAngle,
+      amplitude,
+      rotationSpeed,
+      gradientStartColor,
+      gradientEndColor
+    }
+  ));
+};
+var WaveformCircleContent = ({
+  strokeColor,
+  strokeWidth,
+  fill,
+  opacity,
+  radius,
+  centerX,
+  centerY,
+  startAngle,
+  endAngle,
+  amplitude,
+  rotationSpeed,
+  gradientStartColor,
+  gradientEndColor
+}) => {
+  const { waveformData, width, height, frame } = useWaveformContext();
+  const circleRadius = Math.min(width, height) * (radius || 80) / 100;
+  const circleCenterX = width * (centerX || 50) / 100;
+  const circleCenterY = height * (centerY || 50) / 100;
+  const rotation = frame * (rotationSpeed || 0) % 360;
+  const circularPath = useMemo18(() => {
+    if (!waveformData) return "";
+    const totalAngle = (endAngle || 360) - (startAngle || 0);
+    const angleStep = totalAngle / waveformData.length;
+    let path = "";
+    waveformData.forEach((value, index) => {
+      const angle = ((startAngle || 0) + index * angleStep + rotation) * (Math.PI / 180);
+      const waveRadius = circleRadius + value * (amplitude || 1) * circleRadius * 0.3;
+      const x = circleCenterX + waveRadius * Math.cos(angle);
+      const y = circleCenterY + waveRadius * Math.sin(angle);
+      if (index === 0) {
+        path += `M ${x} ${y}`;
+      } else {
+        path += ` L ${x} ${y}`;
+      }
+    });
+    if (Math.abs((endAngle || 360) - (startAngle || 0)) >= 360) {
+      path += " Z";
+    }
+    return path;
+  }, [waveformData, circleRadius, circleCenterX, circleCenterY, startAngle, endAngle, rotation, amplitude]);
+  if (!waveformData) {
+    return /* @__PURE__ */ React26.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading circular waveform...");
+  }
+  const gradientId = "circle-waveform-gradient";
+  const hasGradient = gradientStartColor && gradientEndColor;
+  return /* @__PURE__ */ React26.createElement(
+    "svg",
+    {
+      width,
+      height,
+      className: "absolute inset-0",
+      style: { pointerEvents: "none" }
+    },
+    hasGradient && /* @__PURE__ */ React26.createElement("defs", null, /* @__PURE__ */ React26.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, /* @__PURE__ */ React26.createElement("stop", { offset: "0%", stopColor: gradientStartColor }), /* @__PURE__ */ React26.createElement("stop", { offset: "100%", stopColor: gradientEndColor }))),
+    /* @__PURE__ */ React26.createElement(
+      "path",
+      {
+        d: circularPath,
+        stroke: hasGradient ? `url(#${gradientId})` : strokeColor,
+        strokeWidth,
+        fill,
+        opacity,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  );
+};
+
+// src/templates/waveform/components/WaveformHistogram.tsx
+import React27 from "react";
+var WaveformHistogram = ({ data }) => {
+  const {
+    config: config15,
+    className = "",
+    style = {},
+    barColor = "#FF6B6B",
+    barWidth = 4,
+    barSpacing = 2,
+    barBorderRadius = 2,
+    opacity = 1,
+    horizontalSymmetry = true,
+    verticalMirror = false,
+    histogramStyle = "centered",
+    amplitude = 1,
+    multiplier = 1,
+    gradientStartColor,
+    gradientEndColor,
+    gradientDirection = "vertical",
+    gradientStyle = "normal",
+    waveDirection = "right-to-left"
+  } = data;
+  return /* @__PURE__ */ React27.createElement(Waveform, { config: config15, className, style }, /* @__PURE__ */ React27.createElement(
+    WaveformHistogramContent,
+    {
+      barColor,
+      barWidth,
+      barSpacing,
+      barBorderRadius,
+      opacity,
+      horizontalSymmetry,
+      verticalMirror,
+      histogramStyle,
+      amplitude,
+      gradientStartColor,
+      gradientEndColor,
+      gradientDirection,
+      multiplier,
+      gradientStyle,
+      waveDirection
+    }
+  ));
+};
+var WaveformHistogramContent = ({
+  barColor,
+  barWidth,
+  barSpacing,
+  barBorderRadius,
+  opacity,
+  horizontalSymmetry,
+  verticalMirror,
+  histogramStyle,
+  amplitude,
+  gradientStartColor,
+  gradientEndColor,
+  gradientDirection,
+  multiplier,
+  gradientStyle,
+  waveDirection
+}) => {
+  const { waveformData, frequencyData, amplitudes, width, height } = useWaveformContext();
+  const dataToUse = amplitudes || waveformData;
+  if (!dataToUse) {
+    return /* @__PURE__ */ React27.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading histogram...");
+  }
+  let directedData = waveDirection === "left-to-right" ? dataToUse.slice(1).reverse() : dataToUse;
+  const frequencies = horizontalSymmetry ? [...directedData, ...directedData.slice(1).reverse()] : Array(multiplier).fill(directedData).flat();
+  const Bars = ({ growUpwards }) => {
+    const styleGradientProp = gradientStartColor && gradientEndColor ? {
+      background: `linear-gradient(${gradientDirection === "horizontal" ? gradientStyle === "mirrored" ? "to right" : growUpwards ? "to right" : "to left" : gradientStyle === "normal" ? growUpwards ? "to top" : "to bottom" : "to bottom"}, ${gradientStartColor}, ${gradientEndColor})`
+    } : { backgroundColor: barColor };
+    const containerStyle2 = {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: growUpwards ? "flex-end" : "flex-start",
+      height: "100%",
+      width: "100%",
+      ...histogramStyle === "centered" && {
+        justifyContent: "center",
+        gap: `${barSpacing}px`
+      },
+      ...histogramStyle === "full-width" && {
+        gap: `${barSpacing}px`,
+        justifyContent: "space-between"
+      },
+      opacity: gradientStyle === "mirrored" && !growUpwards ? 0.25 : 1
+    };
+    return /* @__PURE__ */ React27.createElement("div", { style: containerStyle2 }, frequencies.map((value, index) => /* @__PURE__ */ React27.createElement(
+      "div",
+      {
+        key: index,
+        style: {
+          ...histogramStyle === "full-width" ? { width: `${barWidth}px` } : { width: `${barWidth}px` },
+          ...styleGradientProp,
+          height: `${Math.min(
+            height / 2,
+            Math.abs(value) * (height / 2) * (amplitude || 1)
+          )}px`,
+          borderRadius: growUpwards ? `${barBorderRadius}px ${barBorderRadius}px 0 0` : `0 0 ${barBorderRadius}px ${barBorderRadius}px`,
+          opacity
+        }
+      }
+    )));
+  };
+  if (verticalMirror) {
+    const topHalfStyle = {
+      position: "absolute",
+      bottom: `calc(100% - ${height / 2}px)`,
+      height: `${height / 2}px`,
+      width: "100%",
+      left: 0
+    };
+    const bottomHalfStyle = {
+      position: "absolute",
+      top: `${height / 2}px`,
+      height: `${height / 2}px`,
+      width: "100%",
+      left: 0
+    };
+    return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement("div", { style: topHalfStyle }, /* @__PURE__ */ React27.createElement(Bars, { growUpwards: true })), /* @__PURE__ */ React27.createElement("div", { style: bottomHalfStyle }, /* @__PURE__ */ React27.createElement(Bars, { growUpwards: false })));
+  }
+  const containerStyle = {
+    width: "100%",
+    position: "absolute",
+    top: `${height / 2 - height / 4}px`,
+    height: `${height / 2}px`,
+    left: 0
+  };
+  return /* @__PURE__ */ React27.createElement("div", { style: containerStyle }, /* @__PURE__ */ React27.createElement(Bars, { growUpwards: true }));
+};
+
+// src/templates/waveform/components/WaveformHistogramRanged.tsx
+import React28 from "react";
+var WaveformHistogramRanged = ({ data }) => {
+  const {
+    config: config15,
+    className = "",
+    style = {},
+    barColor = "#FF6B6B",
+    barWidth = 4,
+    barSpacing = 2,
+    barBorderRadius = 2,
+    opacity = 1,
+    verticalMirror = false,
+    histogramStyle = "centered",
+    amplitude = 1,
+    showFrequencyRanges = true,
+    rangeDividerColor = "#666",
+    rangeLabels = false,
+    bassBarColor = "#5DADE2",
+    midBarColor = "#58D68D",
+    trebleBarColor = "#F5B041",
+    gradientStartColor,
+    gradientEndColor,
+    gradientDirection = "vertical",
+    gradientStyle = "normal",
+    horizontalSymmetry = false,
+    waveDirection = "right-to-left"
+  } = data;
+  return /* @__PURE__ */ React28.createElement(Waveform, { config: config15, className, style }, /* @__PURE__ */ React28.createElement(
+    WaveformHistogramRangedContent,
+    {
+      barColor,
+      barWidth,
+      barSpacing,
+      barBorderRadius,
+      opacity,
+      verticalMirror,
+      histogramStyle,
+      amplitude,
+      showFrequencyRanges,
+      rangeDividerColor,
+      rangeLabels,
+      bassBarColor,
+      midBarColor,
+      trebleBarColor,
+      gradientStartColor,
+      gradientEndColor,
+      gradientDirection,
+      gradientStyle,
+      horizontalSymmetry,
+      waveDirection
+    }
+  ));
+};
+var WaveformHistogramRangedContent = ({
+  barColor,
+  barWidth,
+  barSpacing,
+  barBorderRadius,
+  opacity,
+  verticalMirror,
+  histogramStyle,
+  amplitude,
+  showFrequencyRanges,
+  rangeDividerColor,
+  rangeLabels,
+  bassBarColor,
+  midBarColor,
+  trebleBarColor,
+  gradientStartColor,
+  gradientEndColor,
+  gradientDirection,
+  gradientStyle,
+  horizontalSymmetry,
+  waveDirection
+}) => {
+  const { amplitudes, bassValues, midValues, trebleValues, height } = useWaveformContext();
+  if (!amplitudes || !bassValues || !midValues || !trebleValues) {
+    return /* @__PURE__ */ React28.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading frequency data...");
+  }
+  const bassFrequencies = bassValues;
+  const midFrequencies = midValues;
+  const trebleFrequencies = trebleValues;
+  const allFrequencies = waveDirection === "right-to-left" ? [bassFrequencies, midFrequencies, trebleFrequencies].flat() : [trebleFrequencies, midFrequencies, bassFrequencies].flat();
+  const unifiedWaveform = horizontalSymmetry ? [...allFrequencies.slice(1).reverse(), ...allFrequencies] : allFrequencies;
+  const Bars = ({ growUpwards }) => {
+    const containerStyle2 = {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: growUpwards ? "flex-end" : "flex-start",
+      height: "100%",
+      width: "100%",
+      ...histogramStyle === "centered" && {
+        justifyContent: "center",
+        gap: `${barSpacing}px`
+      },
+      ...histogramStyle === "full-width" && {
+        gap: `${barSpacing}px`,
+        justifyContent: "space-between"
+      },
+      opacity: gradientStyle === "mirrored" && !growUpwards ? 0.25 : 1
+    };
+    return /* @__PURE__ */ React28.createElement("div", { style: containerStyle2 }, unifiedWaveform.map((value, index) => {
+      const rangeName = index === 0 ? "Bass" : index === 1 ? "Mid" : "Treble";
+      const styleGradientProp = gradientStartColor && gradientEndColor ? {
+        background: `linear-gradient(${gradientDirection === "horizontal" ? gradientStyle === "mirrored" ? "to right" : growUpwards ? "to right" : "to left" : gradientStyle === "normal" ? growUpwards ? "to top" : "to bottom" : "to bottom"}, ${gradientStartColor}, ${gradientEndColor})`
+      } : { backgroundColor: barColor };
+      return /* @__PURE__ */ React28.createElement(
+        "div",
+        {
+          key: index,
+          style: {
+            width: `${barWidth || 4}px`,
+            // Wider bars for the three ranges
+            ...styleGradientProp,
+            height: `${Math.min(
+              height / 2,
+              Math.abs(value) * (height / 2) * (amplitude || 1)
+            )}px`,
+            borderRadius: growUpwards ? `${barBorderRadius}px ${barBorderRadius}px 0 0` : `0 0 ${barBorderRadius}px ${barBorderRadius}px`,
+            opacity,
+            position: "relative"
+          },
+          title: `${rangeName}: ${(value * 100).toFixed(1)}%`
+        },
+        rangeLabels && /* @__PURE__ */ React28.createElement("div", { style: {
+          position: "absolute",
+          bottom: growUpwards ? "-20px" : "auto",
+          top: growUpwards ? "auto" : "-20px",
+          left: "50%",
+          transform: "translateX(-50%)",
+          fontSize: "10px",
+          color: rangeDividerColor,
+          whiteSpace: "nowrap"
+        } }, rangeName)
+      );
+    }));
+  };
+  if (verticalMirror) {
+    const topHalfStyle = {
+      position: "absolute",
+      bottom: `calc(100% - ${height / 2}px)`,
+      height: `${height / 2}px`,
+      width: "100%",
+      left: 0
+    };
+    const bottomHalfStyle = {
+      position: "absolute",
+      top: `${height / 2}px`,
+      height: `${height / 2}px`,
+      width: "100%",
+      left: 0
+    };
+    return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("div", { style: topHalfStyle }, /* @__PURE__ */ React28.createElement(Bars, { growUpwards: true })), /* @__PURE__ */ React28.createElement("div", { style: bottomHalfStyle }, /* @__PURE__ */ React28.createElement(Bars, { growUpwards: false })));
+  }
+  const containerStyle = {
+    width: "100%",
+    position: "absolute",
+    top: `${height / 2 - height / 4}px`,
+    height: `${height / 2}px`,
+    left: 0
+  };
+  return /* @__PURE__ */ React28.createElement("div", { style: containerStyle }, /* @__PURE__ */ React28.createElement(Bars, { growUpwards: true }));
+};
+
+// src/templates/waveform/components/WaveformLine.tsx
+import React29, { useMemo as useMemo19 } from "react";
+import { createSmoothSvgPath } from "@remotion/media-utils";
+import { useCurrentFrame as useCurrentFrame12, useVideoConfig as useVideoConfig13 } from "remotion";
+var detectBeat = (frequencyData, amplitudes, threshold = 0.7, bpm, frame = 0, fps = 30) => {
+  if (!frequencyData || !amplitudes || frequencyData.length === 0) return false;
+  if (bpm) {
+    const beatInterval = 60 / bpm * fps;
+    const beatFrame = Math.round(frame / beatInterval) * beatInterval;
+    return Math.abs(frame - beatFrame) < 2;
+  }
+  const bassFrequencies = amplitudes.slice(0, Math.floor(amplitudes.length * 0.15));
+  const midFrequencies = amplitudes.slice(Math.floor(amplitudes.length * 0.15), Math.floor(amplitudes.length * 0.4));
+  const bassEnergy = Math.sqrt(bassFrequencies.reduce((sum, val) => sum + val * val, 0) / bassFrequencies.length);
+  const midEnergy = Math.sqrt(midFrequencies.reduce((sum, val) => sum + val * val, 0) / midFrequencies.length);
+  const bassPeak = Math.max(...bassFrequencies);
+  const midPeak = Math.max(...midFrequencies);
+  const totalEnergy = bassEnergy * 0.6 + midEnergy * 0.2 + bassPeak * 0.15 + midPeak * 0.05;
+  const normalizedEnergy = Math.min(totalEnergy, 1);
+  return normalizedEnergy > threshold;
+};
+var easingFunctions = {
+  linear: (t) => t,
+  "ease-in": (t) => t * t,
+  "ease-out": (t) => 1 - (1 - t) * (1 - t),
+  "ease-in-out": (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2,
+  bounce: (t) => {
+    if (t < 1 / 2.75) return 7.5625 * t * t;
+    if (t < 2 / 2.75) return 7.5625 * (t -= 1.5 / 2.75) * t + 0.75;
+    if (t < 2.5 / 2.75) return 7.5625 * (t -= 2.25 / 2.75) * t + 0.9375;
+    return 7.5625 * (t -= 2.625 / 2.75) * t + 0.984375;
+  }
+};
+var WaveformLine = ({ data }) => {
+  const {
+    config: config15,
+    className = "",
+    style = {},
+    strokeColor = "#FF6B6B",
+    strokeWidth = 3,
+    strokeLinecap = "round",
+    strokeLinejoin = "round",
+    fill = "none",
+    opacity = 1,
+    centerLine = false,
+    centerLineColor = "#666",
+    centerLineWidth = 1,
+    beatSync = false,
+    bpm,
+    beatThreshold = 0.7,
+    beatAmplitudeMultiplier = 1.2,
+    beatAnimationDuration = 30,
+    smoothAnimation = true,
+    waveSpacing = 0.1,
+    waveSegments = 1,
+    waveOffset = 0,
+    waveDirection = "horizontal",
+    amplitudeCurve = "ease-out",
+    animationSpeed = 0.5,
+    pulseOnBeat = false,
+    pulseColor = "#FFD700",
+    pulseScale = 1.2
+  } = data;
+  return /* @__PURE__ */ React29.createElement(Waveform, { config: config15, className, style }, /* @__PURE__ */ React29.createElement(
+    WaveformLineContent,
+    {
+      strokeColor,
+      strokeWidth,
+      strokeLinecap,
+      strokeLinejoin,
+      fill,
+      opacity,
+      centerLine,
+      centerLineColor,
+      centerLineWidth,
+      beatSync,
+      bpm,
+      beatThreshold,
+      beatAmplitudeMultiplier,
+      beatAnimationDuration,
+      smoothAnimation,
+      waveSpacing,
+      waveSegments,
+      waveOffset,
+      waveDirection,
+      amplitudeCurve,
+      animationSpeed,
+      pulseOnBeat,
+      pulseColor,
+      pulseScale
+    }
+  ));
+};
+var WaveformLineContent = ({
+  strokeColor,
+  strokeWidth,
+  strokeLinecap,
+  strokeLinejoin,
+  fill,
+  opacity,
+  centerLine,
+  centerLineColor,
+  centerLineWidth,
+  beatSync,
+  bpm,
+  beatThreshold,
+  beatAmplitudeMultiplier,
+  beatAnimationDuration,
+  smoothAnimation,
+  waveSpacing,
+  waveSegments,
+  waveOffset,
+  waveDirection,
+  amplitudeCurve,
+  animationSpeed,
+  pulseOnBeat,
+  pulseColor,
+  pulseScale
+}) => {
+  const { waveformData, frequencyData, amplitudes, width, height, config: config15, frame, fps } = useWaveformContext();
+  const currentFrame = useCurrentFrame12();
+  const videoConfig = useVideoConfig13();
+  const isBeat = useMemo19(() => {
+    if (!beatSync || !frequencyData || !amplitudes) return false;
+    return detectBeat(frequencyData, amplitudes, beatThreshold, bpm, currentFrame, fps);
+  }, [beatSync, frequencyData, amplitudes, beatThreshold, bpm, currentFrame, fps]);
+  const beatProgress = useMemo19(() => {
+    if (!isBeat || !beatAnimationDuration) return 0;
+    const beatStartFrame = Math.floor(currentFrame / beatAnimationDuration) * beatAnimationDuration;
+    const progress = (currentFrame - beatStartFrame) / beatAnimationDuration;
+    const clampedProgress = Math.max(0, Math.min(1, progress));
+    if (smoothAnimation) {
+      return 1 - Math.pow(1 - clampedProgress, 3);
+    }
+    return clampedProgress;
+  }, [isBeat, currentFrame, beatAnimationDuration, smoothAnimation]);
+  const currentBeatMultiplier = useMemo19(() => {
+    if (!beatSync || !isBeat || !beatAmplitudeMultiplier || !amplitudeCurve) return 1;
+    const easing = easingFunctions[amplitudeCurve];
+    const easedProgress = easing(beatProgress);
+    return 1 + (beatAmplitudeMultiplier - 1) * (1 - easedProgress);
+  }, [beatSync, isBeat, beatProgress, beatAmplitudeMultiplier, amplitudeCurve]);
+  const smoothFactor = useMemo19(() => {
+    if (!beatSync) {
+      return 0.3;
+    }
+    return smoothAnimation ? 0.7 : 1;
+  }, [beatSync, smoothAnimation]);
+  const waveformPaths = useMemo19(() => {
+    if (!waveformData) return [];
+    const paths = [];
+    const segments = waveSegments || 1;
+    const spacing = waveSpacing || 0.1;
+    const offset = waveOffset || 0;
+    const speed = animationSpeed || 1;
+    const segmentWidth = width / segments;
+    const segmentSpacing = segmentWidth * spacing;
+    for (let i = 0; i < segments; i++) {
+      const segmentStart = i * segmentWidth;
+      const segmentEnd = (i + 1) * segmentWidth;
+      const segmentDataWidth = segmentEnd - segmentStart;
+      const points = waveformData.map((y, index) => {
+        const progress = index / (waveformData.length - 1);
+        const x = segmentStart + progress * segmentDataWidth + offset;
+        let animatedAmplitude = y * (config15.amplitude || 1) * currentBeatMultiplier * speed;
+        const baseAmplitude = y * (config15.amplitude || 1) * speed;
+        const beatAmplitude = animatedAmplitude - baseAmplitude;
+        animatedAmplitude = baseAmplitude + beatAmplitude * smoothFactor;
+        const yPos = waveDirection === "horizontal" ? animatedAmplitude * height / 2 + height / 2 : animatedAmplitude * width / 2 + width / 2;
+        return waveDirection === "horizontal" ? { x, y: yPos } : { x: yPos, y: x };
+      });
+      const path = createSmoothSvgPath({ points });
+      paths.push({ path, segmentIndex: i });
+    }
+    return paths;
+  }, [waveformData, width, height, config15.amplitude, currentBeatMultiplier, animationSpeed, waveSegments, waveSpacing, waveOffset, waveDirection, smoothFactor]);
+  if (!waveformData) {
+    return /* @__PURE__ */ React29.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading waveform...");
+  }
+  return /* @__PURE__ */ React29.createElement(
+    "svg",
+    {
+      width,
+      height,
+      className: "absolute inset-0",
+      style: { pointerEvents: "none" }
+    },
+    centerLine && /* @__PURE__ */ React29.createElement(
+      "line",
+      {
+        x1: waveDirection === "horizontal" ? 0 : width / 2,
+        y1: waveDirection === "horizontal" ? height / 2 : 0,
+        x2: waveDirection === "horizontal" ? width : width / 2,
+        y2: waveDirection === "horizontal" ? height / 2 : height,
+        stroke: centerLineColor,
+        strokeWidth: centerLineWidth,
+        opacity: 0.3
+      }
+    ),
+    waveformPaths.map(({ path, segmentIndex }) => /* @__PURE__ */ React29.createElement("g", { key: segmentIndex }, pulseOnBeat && isBeat && /* @__PURE__ */ React29.createElement(
+      "path",
+      {
+        d: path,
+        stroke: pulseColor,
+        strokeWidth: (strokeWidth || 3) * (pulseScale || 1.2),
+        strokeLinecap,
+        strokeLinejoin,
+        fill: "none",
+        opacity: (opacity || 1) * (1 - beatProgress)
+      }
+    ), /* @__PURE__ */ React29.createElement(
+      "path",
+      {
+        d: path,
+        stroke: strokeColor,
+        strokeWidth,
+        strokeLinecap,
+        strokeLinejoin,
+        fill,
+        opacity
+      }
+    )))
+  );
+};
+
+// src/templates/waveform/utils.ts
+var WaveformPresets = {
+  stopgapLine: (props) => {
+    return {
+      componentId: "WaveformLine",
+      type: "atom",
+      data: {
+        strokeColor: "#58C4DC",
+        strokeWidth: 8,
+        strokeLinecap: "round",
+        opacity: 1,
+        amplitudeCurve: "ease-in-out",
+        animationSpeed: 0.15,
+        smoothAnimation: true,
+        ...props,
+        config: {
+          numberOfSamples: 64,
+          // Increased for better frequency resolution
+          windowInSeconds: 1 / 30,
+          amplitude: 4,
+          height: 300,
+          width: 1920 * 3,
+          posterize: 4,
+          ...props.config
+        }
+      }
+    };
+  }
+};
+
+// src/templates/waveform/index.ts
+registerComponent("WaveformLine", WaveformLine, "atom", {
+  displayName: "WaveformLine"
+});
+registerComponent("WaveformHistogram", WaveformHistogram, "atom", {
+  displayName: "WaveformHistogram"
+});
+registerComponent("WaveformHistogramRanged", WaveformHistogramRanged, "atom", {
+  displayName: "WaveformHistogramRanged"
+});
+registerComponent("WaveformCircle", WaveformCircle, "atom", {
+  displayName: "WaveformCircle"
+});
+
+// src/components/Composition.tsx
+import { Player as RemotionPlayer } from "@remotion/player";
+import React30 from "react";
+import { AbsoluteFill as AbsoluteFill7, Composition as RemotionComposition } from "remotion";
+import z5 from "zod";
+var CompositionLayout = ({ childrenData, style, config: config15 }) => {
+  return /* @__PURE__ */ React30.createElement(
+    CompositionProvider,
+    {
+      value: {
+        root: childrenData,
+        duration: config15.duration
+      }
+    },
+    /* @__PURE__ */ React30.createElement(AbsoluteFill7, { style }, childrenData?.map((component) => /* @__PURE__ */ React30.createElement(
+      ComponentRenderer,
+      {
+        key: component.id,
+        ...component
+      }
+    )))
+  );
+};
+var calculateCompositionLayoutMetadata = async ({ props, defaultProps, abortSignal, isRendering }) => {
+  const updatedProps = await setDurationsInContext(props);
+  let calculatedDuration = void 0;
+  if (props.config?.fitDurationTo?.length > 0) {
+    calculatedDuration = await calculateDuration(updatedProps.childrenData, {
+      fitDurationTo: updatedProps.config.fitDurationTo
+    });
+  }
+  const duration = calculatedDuration ?? props.config.duration ?? defaultProps.config.duration;
+  const fps = props.config.fps ?? defaultProps.config.fps;
+  const durationInFrames = Math.round(duration * fps);
+  return {
+    // Change the metadata
+    durationInFrames,
+    // or transform some props
+    props: updatedProps,
+    //   // or add per-composition default codec
+    //   defaultCodec: 'h264',
+    //   // or add per-composition default video image format
+    //   defaultVideoImageFormat: 'png',
+    //   // or add per-composition default pixel format
+    //   defaultPixelFormat: 'yuv420p',
+    width: props.config?.width || defaultProps.config.width,
+    height: props.config?.height || defaultProps.config.height,
+    fps,
+    duration
+  };
+};
+var Composition = ({
+  id,
+  childrenData,
+  config: config15,
+  style
+}) => {
+  return /* @__PURE__ */ React30.createElement(
+    RemotionComposition,
+    {
+      id,
+      component: CompositionLayout,
+      durationInFrames: Math.round(config15.duration * config15.fps),
+      fps: config15.fps,
+      width: config15.width ?? 1080,
+      height: config15.height ?? 1920,
+      defaultProps: { childrenData, style, config: config15 },
+      calculateMetadata: calculateCompositionLayoutMetadata,
+      schema: z5.object({})
+    }
+  );
+};
+var Player = (props) => {
+  return /* @__PURE__ */ React30.createElement(
+    RemotionPlayer,
+    {
+      component: CompositionLayout,
+      durationInFrames: props.durationInFrames > 0 ? props.durationInFrames : 20,
+      compositionWidth: props.compositionWidth > 0 ? props.compositionWidth : 1920,
+      compositionHeight: props.compositionHeight > 0 ? props.compositionHeight : 1080,
+      fps: props.fps > 0 ? props.fps : 30,
+      ...props
+    }
+  );
+};
+export {
+  Atom5 as AudioAtom,
+  config13 as AudioAtomConfig,
+  Layout as BaseLayout,
+  config8 as BaseLayoutConfig,
+  BlurEffect,
+  config2 as BlurEffectConfig,
+  ComponentRenderer,
+  Composition,
+  CompositionLayout,
+  CompositionProvider,
+  Frame,
+  GenericEffectPresets,
+  Atom2 as ImageAtom,
+  config10 as ImageAtomConfig,
+  LoopEffect,
+  config3 as LoopEffectConfig,
+  Atom6 as LottieAtom,
+  config14 as LottieAtomConfig,
+  NextjsLogo,
+  PanEffect,
+  config4 as PanEffectConfig,
+  Player,
+  Rings,
+  RippleOutLayout,
+  SceneFrame,
+  ShakeEffect,
+  config6 as ShakeEffectConfig,
+  Atom as ShapeAtom,
+  config9 as ShapeAtomConfig,
+  StretchEffect,
+  config7 as StretchEffectConfig,
+  Atom3 as TextAtom,
+  config11 as TextAtomConfig,
+  TextFade,
+  UniversalEffect,
+  UniversalEffectProvider,
+  Atom4 as VideoAtom,
+  config12 as VideoAtomConfig,
+  Waveform,
+  WaveformCircle,
+  WaveformHistogram,
+  WaveformHistogramRanged,
+  WaveformLine,
+  WaveformPresets,
+  ZoomEffect,
+  config5 as ZoomEffectConfig,
+  buildLayoutHook,
+  calculateCircularPosition,
+  calculateComponentDuration,
+  calculateCompositionLayoutMetadata,
+  calculateDuration,
+  calculateGridPosition,
+  calculateHierarchy,
+  calculateTimingWithInheritance,
+  clearFontCache,
+  componentRegistry,
+  createImageDataWithProxy,
+  createImageProxyUrl,
+  createRootContext,
+  findComponentById,
+  findMatchingComponents,
+  findMatchingComponentsByQuery,
+  findParentComponent,
+  getComponent,
+  getComponentConfig,
+  getComponentWithConfig,
+  getLoadedFontFamily,
+  getLoadedFonts,
+  getNormalizedFontName,
+  isFontAvailable,
+  isFontLoaded,
+  loadGoogleFont,
+  loadMultipleFonts,
+  mergeContexts,
+  needsProxying,
+  nextjsLogoConfig,
+  preloadCommonFonts,
+  registerComponent,
+  registerEffect,
+  registerPackage,
+  ringsConfig,
+  rippleOutLayoutConfig,
+  setDurationsInContext,
+  textFadeConfig,
+  useAnimatedStyles,
+  useBoundaryCalculation,
+  useComponentRegistry,
+  useComposition,
+  useFont,
+  useFontLoader,
+  useHasUniversalEffectProvider,
+  useRenderContext,
+  useRippleOutLayout,
+  useUniversalEffect,
+  useUniversalEffectOptional,
+  useWaveformContext,
+  useWaveformData
+};
+//# sourceMappingURL=index.mjs.map