@microfox/remotion 1.0.2 → 1.1.0

package/dist/index.mjs

@@ -1,3215 +0,0 @@
-// src/core/registry/componentRegistry.ts
-var ComponentRegistryManager = class {
-  constructor() {
-    this.registry = {};
-    this.packageRegistry = {};
-  }
-  registerComponent(name, component, type, config12 = { displayName: "" }, packageName) {
-    this.registry[name] = { component, config: config12 };
-    if (packageName) {
-      if (!this.packageRegistry[packageName]) {
-        this.packageRegistry[packageName] = {};
-      }
-      this.packageRegistry[packageName][name] = { component, config: config12 };
-    }
-  }
-  registerEffect(name, component, config12 = { displayName: "" }, packageName) {
-    this.registerComponent(
-      name?.includes("effect-") ? name : `effect-${name}`,
-      component,
-      "layout",
-      config12,
-      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: config12 }]) => {
-      this.registry[`${packageName}:${name}`] = { component, config: config12 };
-    });
-  }
-  getPackageComponents(packageName) {
-    return this.packageRegistry[packageName];
-  }
-  getAllComponents() {
-    return { ...this.registry };
-  }
-  clear() {
-    this.registry = {};
-    this.packageRegistry = {};
-  }
-};
-var componentRegistry = new ComponentRegistryManager();
-var registerComponent = (name, component, type, config12 = { displayName: "" }, packageName) => {
-  componentRegistry.registerComponent(
-    name,
-    component,
-    type,
-    config12,
-    packageName
-  );
-};
-var registerEffect = (name, component, config12 = { displayName: "" }, packageName) => {
-  componentRegistry.registerEffect(name, component, config12, 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/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";
-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-${index}` : 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 config12 = getComponentConfig(componentId);
-    const isInnerSequence = config12?.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 }, /* @__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 })))));
-  }
-  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 })) : /* @__PURE__ */ React3.createElement(ComponentClass, { ...props })));
-    }
-    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 React6, { Children } from "react";
-import { AbsoluteFill as AbsoluteFill3 } from "remotion";
-var Layout = ({ id, children, data, context }) => {
-  const { containerProps, childrenProps } = data || {
-    containerProps: {},
-    childrenProps: []
-  };
-  const childrenArray = Children.toArray(children);
-  return (
-    // @ts-ignore
-    /* @__PURE__ */ React6.createElement(
-      AbsoluteFill3,
-      {
-        ...containerProps,
-        style: {
-          ...context?.boundaries,
-          ...containerProps.style
-        }
-      },
-      childrenArray.map((child, index) => /* @__PURE__ */ React6.createElement(
-        "div",
-        {
-          key: index,
-          ...index < childrenProps.length && childrenProps[index]
-        },
-        child
-      ))
-    )
-  );
-};
-var config = {
-  displayName: "BaseLayout",
-  type: "layout",
-  isInnerSequence: false
-};
-
-// src/components/layouts/index.ts
-registerComponent(
-  config.displayName,
-  Layout,
-  "layout",
-  config
-);
-
-// src/components/atoms/ShapeAtom.tsx
-import React7 from "react";
-import { Easing, interpolate, useCurrentFrame } from "remotion";
-var Atom = ({ data }) => {
-  const frame = useCurrentFrame();
-  const { shape, color, rotation, style } = data;
-  const rotationStyle = rotation ? {
-    transform: `rotate(${interpolate(
-      frame % rotation.duration,
-      [0, rotation.duration],
-      [0, 360],
-      {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp",
-        easing: Easing.linear
-      }
-    )}deg)`
-  } : {};
-  const baseStyle = {
-    width: "100%",
-    height: "100%",
-    ...style,
-    ...rotationStyle
-  };
-  switch (shape) {
-    case "circle":
-      return /* @__PURE__ */ React7.createElement("div", { style: { ...baseStyle, backgroundColor: color, borderRadius: "50%" } });
-    case "rectangle":
-      return /* @__PURE__ */ React7.createElement("div", { style: { ...baseStyle, backgroundColor: color } });
-    default:
-      return null;
-  }
-};
-var config2 = {
-  displayName: "ShapeAtom",
-  type: "atom",
-  isInnerSequence: false
-};
-
-// src/components/atoms/ImageAtom.tsx
-import React8, { useMemo } from "react";
-import { Img, staticFile } from "remotion";
-var Atom2 = ({ data }) => {
-  const source = useMemo(() => {
-    if (data.src.startsWith("http")) {
-      return data.src;
-    }
-    return staticFile(data.src);
-  }, [data.src]);
-  return /* @__PURE__ */ React8.createElement(Img, { className: data.className, src: source, style: data.style, crossOrigin: "anonymous" });
-};
-var config3 = {
-  displayName: "ImageAtom",
-  type: "atom",
-  isInnerSequence: false
-};
-
-// src/components/atoms/TextAtom.tsx
-import React9, { useEffect as useEffect2, useState as useState2 } from "react";
-
-// src/hooks/useFontLoader.ts
-import { useState, useEffect, useCallback } from "react";
-
-// src/utils/fontUtils.ts
-import { getAvailableFonts } from "@remotion/google-fonts";
-var availableFonts = getAvailableFonts();
-var loadedFonts = /* @__PURE__ */ new Map();
-var loadGoogleFont = async (fontFamily2, options = {}) => {
-  if (!fontFamily2 || typeof fontFamily2 !== "string" || fontFamily2 === "") {
-    console.warn("Invalid fontFamily provided:", fontFamily2);
-    return "sans-serif";
-  }
-  const fontKey = `${fontFamily2}-${JSON.stringify(options)}`;
-  if (loadedFonts.has(fontKey)) {
-    return loadedFonts.get(fontKey);
-  }
-  try {
-    console.log("availableFonts", availableFonts);
-    const thisFont = availableFonts.find(
-      (font) => font.importName === fontFamily2
-    );
-    console.log("thisFont", thisFont);
-    if (thisFont?.load) {
-      const fontPackage = await thisFont.load();
-      const allFontStuff = fontPackage.loadFont("normal", {
-        subsets: options.subsets || ["latin"],
-        weights: options.weights || ["400"]
-      });
-      console.log("loadedFontFamily", allFontStuff.fontFamily);
-      await allFontStuff.waitUntilDone();
-      loadedFonts.set(fontKey, allFontStuff.fontFamily);
-      return allFontStuff.fontFamily;
-    } else {
-      throw new Error(
-        `Font Package @remotion/google-fonts/${fontFamily2} does not have loadFont method`
-      );
-    }
-  } catch (error) {
-    console.warn(`Failed to load font ${fontFamily2}:`, error);
-    try {
-      const alternativeNames = [
-        fontFamily2.toLowerCase().replace(/\s+/g, ""),
-        fontFamily2.toLowerCase().replace(/\s+/g, "-"),
-        fontFamily2.toLowerCase().replace(/\s+/g, "_")
-      ];
-      for (const altName of alternativeNames) {
-        if (altName === fontFamily2.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 = `"${fontFamily2}"`;
-    loadedFonts.set(fontKey, fallbackFontFamily);
-    return fallbackFontFamily;
-  }
-};
-var loadMultipleFonts = async (fonts) => {
-  const loadPromises = fonts.map(async ({ family, options }) => {
-    const fontFamily2 = await loadGoogleFont(family, options);
-    return { family, fontFamily: fontFamily2 };
-  });
-  const results = await Promise.all(loadPromises);
-  const fontMap = /* @__PURE__ */ new Map();
-  results.forEach(({ family, fontFamily: fontFamily2 }) => {
-    fontMap.set(family, fontFamily2);
-  });
-  return fontMap;
-};
-var getLoadedFontFamily = (fontFamily2, options = {}) => {
-  const fontKey = `${fontFamily2}-${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 = (fontFamily2, options = {}) => {
-  const fontKey = `${fontFamily2}-${JSON.stringify(options)}`;
-  return loadedFonts.has(fontKey);
-};
-var clearFontCache = () => {
-  loadedFonts.clear();
-};
-var getLoadedFonts = () => {
-  return new Map(loadedFonts);
-};
-var isFontAvailable = async (fontFamily2) => {
-  if (!fontFamily2 || typeof fontFamily2 !== "string") {
-    return false;
-  }
-  try {
-    const normalizedFontName = fontFamily2.trim().replace(/\s+/g, "-").toLowerCase();
-    const fontPackage = await import(`@remotion/google-fonts/${normalizedFontName}`);
-    return !!fontPackage.loadFont;
-  } catch (error) {
-    return false;
-  }
-};
-var getNormalizedFontName = (fontFamily2) => {
-  if (!fontFamily2 || typeof fontFamily2 !== "string") {
-    return "";
-  }
-  return fontFamily2.trim().replace(/\s+/g, "-").toLowerCase();
-};
-
-// src/hooks/useFontLoader.ts
-var useFontLoader = (options = {}) => {
-  const [state, setState] = useState({
-    loadedFonts: /* @__PURE__ */ new Map(),
-    loadingFonts: /* @__PURE__ */ new Set(),
-    errorFonts: /* @__PURE__ */ new Map()
-  });
-  const loadFont2 = useCallback(
-    async (fontFamily2, fontOptions = {}) => {
-      const fontKey = `${fontFamily2}-${JSON.stringify(fontOptions)}`;
-      if (state.loadedFonts.has(fontKey) || state.loadingFonts.has(fontFamily2)) {
-        return state.loadedFonts.get(fontKey) || `"${fontFamily2}", sans-serif`;
-      }
-      setState((prev) => ({
-        ...prev,
-        loadingFonts: new Set(prev.loadingFonts).add(fontFamily2)
-      }));
-      try {
-        const cssValue = await loadGoogleFont(fontFamily2, fontOptions);
-        if (cssValue !== null) {
-          setState((prev) => ({
-            ...prev,
-            loadedFonts: new Map(prev.loadedFonts).set(fontKey, cssValue),
-            loadingFonts: new Set(
-              [...prev.loadingFonts].filter((f) => f !== fontFamily2)
-            )
-          }));
-          options.onLoad?.(fontFamily2, cssValue);
-          return cssValue;
-        } else {
-          throw new Error(
-            `Font Package @remotion/google-fonts/${fontFamily2} not found`
-          );
-        }
-      } catch (error) {
-        const errorObj = error instanceof Error ? error : new Error(String(error));
-        setState((prev) => ({
-          ...prev,
-          errorFonts: new Map(prev.errorFonts).set(fontFamily2, errorObj),
-          loadingFonts: new Set(
-            [...prev.loadingFonts].filter((f) => f !== fontFamily2)
-          )
-        }));
-        options.onError?.(fontFamily2, errorObj);
-        const fallbackValue = `"${fontFamily2}", 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(
-    (fontFamily2, options2 = {}) => {
-      const fontKey = `${fontFamily2}-${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(
-    (fontFamily2, options2 = {}) => {
-      const fontKey = `${fontFamily2}-${JSON.stringify(options2)}`;
-      return state.loadedFonts.get(fontKey);
-    },
-    [state.loadedFonts]
-  );
-  const getFontError = useCallback(
-    (fontFamily2) => {
-      return state.errorFonts.get(fontFamily2);
-    },
-    [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: loadFont2,
-    loadMultipleFonts: loadMultipleFonts2,
-    isFontReady,
-    areFontsReady,
-    getFontFamily,
-    getFontError,
-    clearErrors
-  };
-};
-var useFont = (fontFamily2, options = {}) => {
-  const { loadFont: loadFont2, isFontReady, getFontFamily, getFontError, ...rest } = useFontLoader(options);
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [error, setError] = useState(null);
-  const initialFontFamily = getFontFamily(fontFamily2, options) || `"${fontFamily2}", sans-serif`;
-  const [fontFamilyValue, setFontFamilyValue] = useState(initialFontFamily);
-  useEffect(() => {
-    const loadFontAsync = async () => {
-      try {
-        const cssValue = await loadFont2(fontFamily2, options);
-        setFontFamilyValue(cssValue);
-        setIsLoaded(true);
-        setError(null);
-      } catch (err) {
-        setError(err instanceof Error ? err : new Error(String(err)));
-        setIsLoaded(false);
-      }
-    };
-    if (!isFontReady(fontFamily2, options)) {
-      loadFontAsync();
-    } else {
-      const cachedValue = getFontFamily(fontFamily2, options);
-      if (cachedValue) {
-        setFontFamilyValue(cachedValue);
-      }
-      setIsLoaded(true);
-    }
-  }, [fontFamily2, loadFont2, isFontReady, getFontFamily, options]);
-  return {
-    isLoaded,
-    error,
-    isReady: isFontReady(fontFamily2, options),
-    fontFamily: fontFamilyValue,
-    ...rest
-  };
-};
-
-// src/components/atoms/TextAtom.tsx
-var Atom3 = ({ data }) => {
-  const [isFontLoading, setIsFontLoading] = useState2(false);
-  const { isLoaded, error, isReady, fontFamily: fontFamily2 } = 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
-    }
-  );
-  useEffect2(() => {
-    if (data.font?.family) {
-      setIsFontLoading(true);
-      if (isReady || isLoaded) {
-        setIsFontLoading(false);
-      }
-    }
-  }, [data.font, isReady, isLoaded]);
-  const enhancedStyle = {
-    fontFamily: fontFamily2,
-    opacity: isFontLoading ? 0.8 : 1,
-    // Slight opacity during loading
-    transition: "opacity 0.2s ease-in-out",
-    ...data.style
-  };
-  if (error) {
-    console.warn(`Font loading error for ${data.font?.family}:`, error);
-  }
-  return /* @__PURE__ */ React9.createElement(
-    "div",
-    {
-      style: enhancedStyle,
-      className: data.className,
-      "data-font-loading": isFontLoading,
-      "data-font-loaded": isReady || isLoaded
-    },
-    data.text
-  );
-};
-var config4 = {
-  displayName: "TextAtom",
-  type: "atom",
-  isInnerSequence: false
-};
-
-// src/components/atoms/VideoAtom.tsx
-import React10, { useMemo as useMemo2 } from "react";
-import { staticFile as staticFile2, Video, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
-import { z } from "zod";
-var VideoAtomDataProps = z.object({
-  src: z.string(),
-  // Video source URL
-  style: z.record(z.string(), z.any()).optional(),
-  // CSS styles object
-  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 }) => {
-  const { fps } = useVideoConfig2();
-  const frame = useCurrentFrame2();
-  const source = useMemo2(() => {
-    if (data.src.startsWith("http")) {
-      return data.src;
-    }
-    return staticFile2(data.src);
-  }, [data.src]);
-  const trimBefore = useMemo2(() => {
-    return data.startFrom ? data.startFrom * fps : void 0;
-  }, [data.startFrom, fps]);
-  const trimAfter = useMemo2(() => {
-    return data.endAt ? data.endAt * fps : void 0;
-  }, [data.endAt, fps]);
-  const combinedStyle = useMemo2(() => {
-    const baseStyle = data.style || {};
-    const objectFit = data.fit ? { objectFit: data.fit } : {};
-    return { ...baseStyle, ...objectFit };
-  }, [data.style, data.fit]);
-  return /* @__PURE__ */ React10.createElement(
-    Video,
-    {
-      className: data.className,
-      src: source,
-      style: combinedStyle,
-      trimBefore,
-      trimAfter,
-      playbackRate: data.playbackRate,
-      volume: data.volume,
-      muted: data.muted,
-      loop: data.loop
-    }
-  );
-};
-var config5 = {
-  displayName: "VideoAtom",
-  type: "atom",
-  isInnerSequence: false
-};
-
-// src/components/atoms/AudioAtom.tsx
-import React11, { useMemo as useMemo3 } from "react";
-import { Audio, staticFile as staticFile3, useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3 } 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 } = useVideoConfig3();
-  const { muted } = data;
-  const frame = useCurrentFrame3();
-  const isMuted = useMemo3(() => {
-    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 = useMemo3(() => {
-    if (data.src.startsWith("http")) {
-      return data.src;
-    }
-    return staticFile3(data.src);
-  }, [data.src]);
-  return (
-    // @ts-ignore
-    /* @__PURE__ */ React11.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 config6 = {
-  displayName: "AudioAtom",
-  type: "atom",
-  isInnerSequence: false
-};
-
-// src/components/atoms/TextAtomWithFonts.tsx
-import React12, { useEffect as useEffect3, useState as useState3 } from "react";
-var Atom6 = ({ data }) => {
-  const [isFontLoading, setIsFontLoading] = useState3(false);
-  const { isLoaded, error, isReady, fontFamily: fontFamily2 } = 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) => {
-        console.log(`Font ${family} loaded successfully with CSS value: ${cssValue}`);
-        setIsFontLoading(false);
-      },
-      onError: (family, error2) => {
-        console.warn(`Font ${family} failed to load:`, error2);
-        setIsFontLoading(false);
-      }
-    }
-  );
-  useEffect3(() => {
-    if (data.font?.family) {
-      if (isReady || isLoaded) {
-        setIsFontLoading(false);
-      } else if (!isReady && !isLoaded && !error) {
-        setIsFontLoading(true);
-      }
-    }
-  }, [data.font, isReady, isLoaded, error]);
-  const enhancedStyle = {
-    fontFamily: fontFamily2,
-    opacity: isFontLoading ? 0.8 : 1,
-    transition: "opacity 0.3s ease-in-out, font-family 0.2s ease-in-out",
-    ...data.style
-  };
-  if (isFontLoading && data.loadingState?.showLoadingIndicator) {
-    return /* @__PURE__ */ React12.createElement("div", { style: enhancedStyle, className: data.className }, /* @__PURE__ */ React12.createElement("span", { style: data.loadingState.loadingStyle }, data.loadingState.loadingText || "Loading..."));
-  }
-  if (error && data.errorState?.showErrorIndicator) {
-    return /* @__PURE__ */ React12.createElement("div", { style: enhancedStyle, className: data.className }, /* @__PURE__ */ React12.createElement("span", { style: data.errorState.errorStyle }, data.errorState.errorText || data.text));
-  }
-  return /* @__PURE__ */ React12.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 config7 = {
-  displayName: "TextAtomWithFonts",
-  type: "atom",
-  isInnerSequence: false
-};
-
-// src/components/atoms/index.ts
-registerComponent(
-  config2.displayName,
-  Atom,
-  "atom",
-  config2
-);
-registerComponent(
-  config3.displayName,
-  Atom2,
-  "atom",
-  config3
-);
-registerComponent(config4.displayName, Atom3, "atom", config4);
-registerComponent(
-  config5.displayName,
-  Atom4,
-  "atom",
-  config5
-);
-registerComponent(
-  config6.displayName,
-  Atom5,
-  "atom",
-  config6
-);
-registerComponent(
-  config7.displayName,
-  Atom6,
-  "atom",
-  config7
-);
-
-// src/components/effects/BlurEffect.tsx
-import React13 from "react";
-var BlurEffect = ({
-  data,
-  children
-}) => {
-  const blurAmount = data?.blur || 5;
-  return /* @__PURE__ */ React13.createElement("div", { style: {
-    filter: `blur(${blurAmount}px)`,
-    width: "100%",
-    height: "100%"
-  } }, children);
-};
-var config8 = {
-  displayName: "blur",
-  description: "Applies a blur effect to its children",
-  category: "effects",
-  props: {
-    blur: {
-      type: "number",
-      description: "Blur amount in pixels",
-      default: 5
-    }
-  }
-};
-
-// src/components/effects/Loop.tsx
-import React14 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__ */ React14.createElement(
-      Loop,
-      {
-        durationInFrames,
-        times,
-        layout
-      },
-      /* @__PURE__ */ React14.createElement(React14.Fragment, null, children)
-    )
-  );
-};
-var config9 = {
-  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 React15, { useMemo as useMemo4 } from "react";
-import { useCurrentFrame as useCurrentFrame4, useVideoConfig as useVideoConfig4, interpolate as interpolate2, spring, Easing as Easing2 } from "remotion";
-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 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 getEasingFunction = (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 = useCurrentFrame4();
-  const { fps } = useVideoConfig4();
-  const panData = data;
-  const { timing } = context ?? {};
-  const contextDuration = timing?.durationInFrames || 50;
-  const effectTiming = panData?.effectTiming || "start";
-  const panDuration = parseDuration(panData?.panDuration, contextDuration, fps);
-  const panStartDelay = parseDelay(panData?.panStartDelay, contextDuration, fps);
-  const panEndDelay = parseDelay(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 = getEasingFunction(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 = useMemo4(() => {
-    return {
-      width: "100%",
-      height: "100%",
-      transform: `translate(${panOffset[0]}px, ${panOffset[1]}px)`
-    };
-  }, [panOffset]);
-  return /* @__PURE__ */ React15.createElement("div", { style }, children);
-};
-var config10 = {
-  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 React16, { useMemo as useMemo5 } from "react";
-import { useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig5, interpolate as interpolate3, spring as spring2, Easing as Easing3 } 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 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 getEasingFunction2 = (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 = useCurrentFrame5();
-  const { fps } = useVideoConfig5();
-  const zoomData = data;
-  const { timing } = context ?? {};
-  const contextDuration = timing?.durationInFrames || 50;
-  console.log(contextDuration);
-  const effectTiming = zoomData?.effectTiming || "start";
-  const zoomDuration = parseDuration2(zoomData?.zoomDuration, contextDuration, fps);
-  const zoomStartDelay = parseDelay2(zoomData?.zoomStartDelay, contextDuration, fps);
-  const zoomEndDelay = parseDelay2(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 = getEasingFunction2(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 = useMemo5(() => {
-    return {
-      width: "100%",
-      height: "100%",
-      transform: `scale(${scale})`,
-      transformOrigin
-    };
-  }, [scale, transformOrigin]);
-  return /* @__PURE__ */ React16.createElement("div", { style }, children);
-};
-var config11 = {
-  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/index.ts
-registerEffect(config8.displayName, BlurEffect, config8);
-registerEffect(config9.displayName, LoopEffect, config9);
-registerEffect(config10.displayName, PanEffect, config10);
-registerEffect(config11.displayName, ZoomEffect, config11);
-
-// src/hooks/useComponentRegistry.ts
-import { useMemo as useMemo6 } from "react";
-var useComponentRegistry = () => {
-  return useMemo6(() => {
-    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 useMemo7 } from "react";
-var useBoundaryCalculation = ({
-  parentBoundaries,
-  constraints,
-  layout
-}) => {
-  return useMemo7(() => {
-    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 useContext4 } from "react";
-
-// src/core/types/transition.types.ts
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var LayoutContext = createContext3(null);
-
-// src/hooks/buildTransitionHook.ts
-function buildLayoutHook(schema, defaultValue) {
-  return () => {
-    const context = useContext4(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/templates/rings/NextjsLogo.tsx
-import { evolvePath } from "@remotion/paths";
-import React19, { useMemo as useMemo8 } from "react";
-import { interpolate as interpolate4, spring as spring4, useCurrentFrame as useCurrentFrame7, useVideoConfig as useVideoConfig7 } from "remotion";
-
-// src/templates/rings/RippleOutLayout.tsx
-import React18 from "react";
-import { spring as spring3, useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig6, Sequence as Sequence2, AbsoluteFill as AbsoluteFill4 } from "remotion";
-import { z as z3 } from "zod";
-import { loadFont } from "@remotion/google-fonts/Inter";
-loadFont("normal", {
-  subsets: ["latin"],
-  weights: ["400", "700"]
-});
-var RippleOutTransitionSchema = z3.object({
-  progress: z3.number().min(0).max(1),
-  logoOut: z3.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 = useCurrentFrame6();
-  const { fps } = useVideoConfig6();
-  const { hierarchy } = useRenderContext();
-  const transitionStartFrame = transitionStart * fps;
-  const transitionDurationFrames = transitionDuration * fps;
-  const logoOut = spring3({
-    fps,
-    frame,
-    config: {
-      damping: 200
-    },
-    durationInFrames: transitionDurationFrames,
-    delay: transitionStartFrame
-  });
-  const transitionData = {
-    progress: logoOut,
-    logoOut
-  };
-  const childrenArray = React18.Children.toArray(children).filter(
-    (child) => React18.isValidElement(child)
-  );
-  const [from, to] = childrenArray;
-  return /* @__PURE__ */ React18.createElement(LayoutContext.Provider, { value: transitionData }, /* @__PURE__ */ React18.createElement(AbsoluteFill4, { style: {
-    ...container,
-    ...context?.boundaries
-  } }, /* @__PURE__ */ React18.createElement(Sequence2, { name: from.props.componentId + " - " + from.props.id, from: 0, durationInFrames: transitionStartFrame + transitionDurationFrames }, from), /* @__PURE__ */ React18.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 } = useVideoConfig7();
-  const frame = useCurrentFrame7();
-  const evolve1 = spring4({
-    fps,
-    frame,
-    config: {
-      damping: 200
-    }
-  });
-  const evolve2 = spring4({
-    fps,
-    frame: frame - 15,
-    config: {
-      damping: 200
-    }
-  });
-  const evolve3 = spring4({
-    fps,
-    frame: frame - 30,
-    config: {
-      damping: 200,
-      mass: 3
-    },
-    durationInFrames: 30
-  });
-  const style = useMemo8(() => {
-    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(
-    interpolate4(evolve3, [0, 1], [0, 0.7]),
-    thirdPath
-  );
-  return /* @__PURE__ */ React19.createElement("svg", { style, fill: "none", viewBox: "0 0 180 180" }, /* @__PURE__ */ React19.createElement("mask", { height: "180", id: "mask", style: mask, width: "180", x: "0", y: "0" }, /* @__PURE__ */ React19.createElement("circle", { cx: "90", cy: "90", fill: "black", r: "90" })), /* @__PURE__ */ React19.createElement("mask", { id: "n-mask", style: mask }, /* @__PURE__ */ React19.createElement("path", { d: nStroke, fill: "black" })), /* @__PURE__ */ React19.createElement("g", { mask: "url(#mask)" }, /* @__PURE__ */ React19.createElement("circle", { cx: "90", cy: "90", fill: "black", r: "90" }), /* @__PURE__ */ React19.createElement("g", { stroke: "url(#gradient0)", mask: "url(#n-mask)" }, /* @__PURE__ */ React19.createElement(
-    "path",
-    {
-      strokeWidth: "12.1136",
-      d: firstPath,
-      strokeDasharray: evolution1.strokeDasharray,
-      strokeDashoffset: evolution1.strokeDashoffset
-    }
-  ), /* @__PURE__ */ React19.createElement(
-    "path",
-    {
-      strokeWidth: 12.1136,
-      d: secondPath,
-      strokeDasharray: evolution2.strokeDasharray,
-      strokeDashoffset: evolution2.strokeDashoffset
-    }
-  )), /* @__PURE__ */ React19.createElement(
-    "path",
-    {
-      stroke: "url(#gradient1)",
-      d: thirdPath,
-      strokeDasharray: evolution3.strokeDasharray,
-      strokeDashoffset: evolution3.strokeDashoffset,
-      strokeWidth: "12"
-    }
-  )), /* @__PURE__ */ React19.createElement("defs", null, /* @__PURE__ */ React19.createElement(
-    "linearGradient",
-    {
-      gradientUnits: "userSpaceOnUse",
-      id: "gradient0",
-      x1: "109",
-      x2: "144.5",
-      y1: "116.5",
-      y2: "160.5"
-    },
-    /* @__PURE__ */ React19.createElement("stop", { stopColor: "white" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
-  ), /* @__PURE__ */ React19.createElement(
-    "linearGradient",
-    {
-      gradientUnits: "userSpaceOnUse",
-      id: "gradient1",
-      x1: "121",
-      x2: "120.799",
-      y1: "54",
-      y2: "106.875"
-    },
-    /* @__PURE__ */ React19.createElement("stop", { stopColor: "white" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
-  )));
-};
-var nextjsLogoConfig = {
-  displayName: "NextjsLogo",
-  type: "atom",
-  isInnerSequence: false
-};
-
-// src/templates/rings/Rings.tsx
-import React20 from "react";
-import { AbsoluteFill as AbsoluteFill5, interpolateColors, useVideoConfig as useVideoConfig8 } from "remotion";
-var RadialGradient = ({ radius, color }) => {
-  const height = radius * 2;
-  const width = radius * 2;
-  return (
-    // @ts-ignore
-    /* @__PURE__ */ React20.createElement(
-      AbsoluteFill5,
-      {
-        style: {
-          justifyContent: "center",
-          alignItems: "center"
-        }
-      },
-      /* @__PURE__ */ React20.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 } = useVideoConfig8();
-  return (
-    // @ts-ignore
-    /* @__PURE__ */ React20.createElement(
-      AbsoluteFill5,
-      {
-        style: {
-          transform: `scale(${scale})`,
-          ...context?.boundaries
-        }
-      },
-      new Array(5).fill(true).map((_, i) => {
-        return /* @__PURE__ */ React20.createElement(
-          RadialGradient,
-          {
-            key: i,
-            radius: height * 0.3 * i,
-            color: interpolateColors(i, [0, 4], ["#fff", "#fff"])
-          }
-        );
-      }).reverse()
-    )
-  );
-};
-var ringsConfig = {
-  displayName: "Rings",
-  type: "atom",
-  isInnerSequence: false
-};
-
-// src/templates/rings/TextFade.tsx
-import React21, { useMemo as useMemo9 } from "react";
-import {
-  AbsoluteFill as AbsoluteFill6,
-  interpolate as interpolate5,
-  spring as spring5,
-  useCurrentFrame as useCurrentFrame8,
-  useVideoConfig as useVideoConfig9
-} from "remotion";
-var TextFade = (props) => {
-  const { children, context, data } = props;
-  const { animation } = data || {
-    animation: {
-      duration: 1
-    }
-  };
-  const { fps } = useVideoConfig9();
-  const frame = useCurrentFrame8();
-  const progress = spring5({
-    fps,
-    frame,
-    config: {
-      damping: 200
-    },
-    durationInFrames: animation.duration * fps
-  });
-  const rightStop = interpolate5(progress, [0, 1], [200, 0]);
-  const leftStop = Math.max(0, rightStop - 60);
-  const maskImage = `linear-gradient(-45deg, transparent ${leftStop}%, black ${rightStop}%)`;
-  const container2 = useMemo9(() => {
-    return {
-      width: "100%",
-      height: "100%",
-      justifyContent: "center",
-      alignItems: "center"
-    };
-  }, []);
-  const content = useMemo9(() => {
-    return {
-      ...context?.boundaries,
-      maskImage,
-      WebkitMaskImage: maskImage,
-      justifyContent: "center",
-      alignItems: "center",
-      display: "flex"
-    };
-  }, [maskImage]);
-  return (
-    // @ts-ignore
-    /* @__PURE__ */ React21.createElement(AbsoluteFill6, { style: container2 }, /* @__PURE__ */ React21.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 React23, { useMemo as useMemo11 } from "react";
-
-// src/templates/waveform/Waveform.tsx
-import React22, { createContext as createContext4, useContext as useContext5 } from "react";
-import { useCurrentFrame as useCurrentFrame9, useVideoConfig as useVideoConfig10 } from "remotion";
-
-// src/templates/waveform/hooks/useWaveformData.ts
-import { useMemo as useMemo10 } from "react";
-import {
-  useAudioData,
-  visualizeAudioWaveform,
-  visualizeAudio
-} from "@remotion/media-utils";
-import { staticFile as staticFile4 } 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 = (config12) => {
-  const {
-    audioSrc,
-    numberOfSamples,
-    windowInSeconds,
-    dataOffsetInSeconds = 0,
-    normalize = false,
-    frame,
-    fps,
-    posterize,
-    includeFrequencyData = false,
-    minDb = -100,
-    maxDb = -30
-  } = config12;
-  const validatedNumberOfSamples = useMemo10(() => {
-    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 = useMemo10(() => {
-    if (audioSrc.startsWith("http")) {
-      return audioSrc;
-    }
-    return staticFile4(audioSrc);
-  }, [audioSrc]);
-  const audioData = useAudioData(source);
-  const adjustedFrame = useMemo10(() => {
-    if (posterize && posterize > 1) {
-      return Math.round(frame / posterize) * posterize;
-    }
-    return frame;
-  }, [frame, posterize]);
-  const waveformData = useMemo10(() => {
-    if (!audioData) return null;
-    try {
-      const waveform = visualizeAudioWaveform({
-        fps,
-        frame: adjustedFrame,
-        audioData,
-        numberOfSamples: validatedNumberOfSamples,
-        windowInSeconds,
-        dataOffsetInSeconds,
-        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
-  } = useMemo10(() => {
-    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 = createContext4(null);
-var useWaveformContext = () => {
-  const context = useContext5(WaveformContext);
-  if (!context) {
-    throw new Error("useWaveformContext must be used within a Waveform component");
-  }
-  return context;
-};
-var Waveform = ({
-  config: config12,
-  children,
-  className = "",
-  style = {}
-}) => {
-  const frame = useCurrentFrame9();
-  const { width: videoWidth, height: videoHeight, fps } = useVideoConfig10();
-  const { waveformData, frequencyData, amplitudes, audioData, bass, mid, treble, bassValues, midValues, trebleValues } = useWaveformData({
-    audioSrc: config12.audioSrc,
-    numberOfSamples: config12.numberOfSamples || 128,
-    windowInSeconds: config12.windowInSeconds || 1 / fps,
-    dataOffsetInSeconds: config12.dataOffsetInSeconds || 0,
-    normalize: config12.normalize || false,
-    frame,
-    fps,
-    posterize: config12.posterize,
-    includeFrequencyData: config12.useFrequencyData || false
-  });
-  const width = config12.width || videoWidth;
-  const height = config12.height || videoHeight;
-  const contextValue = {
-    waveformData,
-    frequencyData,
-    amplitudes,
-    audioData,
-    frame,
-    fps,
-    config: config12,
-    width,
-    height,
-    bass,
-    mid,
-    treble,
-    bassValues,
-    midValues,
-    trebleValues
-  };
-  return /* @__PURE__ */ React22.createElement(WaveformContext.Provider, { value: contextValue }, /* @__PURE__ */ React22.createElement(
-    "div",
-    {
-      className: `relative ${className}`,
-      style: {
-        width,
-        height,
-        position: "relative",
-        backgroundColor: config12.backgroundColor || "transparent",
-        ...style
-      }
-    },
-    children
-  ));
-};
-
-// src/templates/waveform/components/WaveformCircle.tsx
-var WaveformCircle = ({ data }) => {
-  const {
-    config: config12,
-    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__ */ React23.createElement(Waveform, { config: config12, className, style }, /* @__PURE__ */ React23.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 = useMemo11(() => {
-    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__ */ React23.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__ */ React23.createElement(
-    "svg",
-    {
-      width,
-      height,
-      className: "absolute inset-0",
-      style: { pointerEvents: "none" }
-    },
-    hasGradient && /* @__PURE__ */ React23.createElement("defs", null, /* @__PURE__ */ React23.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, /* @__PURE__ */ React23.createElement("stop", { offset: "0%", stopColor: gradientStartColor }), /* @__PURE__ */ React23.createElement("stop", { offset: "100%", stopColor: gradientEndColor }))),
-    /* @__PURE__ */ React23.createElement(
-      "path",
-      {
-        d: circularPath,
-        stroke: hasGradient ? `url(#${gradientId})` : strokeColor,
-        strokeWidth,
-        fill,
-        opacity,
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    )
-  );
-};
-
-// src/templates/waveform/components/WaveformHistogram.tsx
-import React24 from "react";
-var WaveformHistogram = ({ data }) => {
-  const {
-    config: config12,
-    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__ */ React24.createElement(Waveform, { config: config12, className, style }, /* @__PURE__ */ React24.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__ */ React24.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__ */ React24.createElement("div", { style: containerStyle2 }, frequencies.map((value, index) => /* @__PURE__ */ React24.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__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", { style: topHalfStyle }, /* @__PURE__ */ React24.createElement(Bars, { growUpwards: true })), /* @__PURE__ */ React24.createElement("div", { style: bottomHalfStyle }, /* @__PURE__ */ React24.createElement(Bars, { growUpwards: false })));
-  }
-  const containerStyle = {
-    width: "100%",
-    position: "absolute",
-    top: `${height / 2 - height / 4}px`,
-    height: `${height / 2}px`,
-    left: 0
-  };
-  return /* @__PURE__ */ React24.createElement("div", { style: containerStyle }, /* @__PURE__ */ React24.createElement(Bars, { growUpwards: true }));
-};
-
-// src/templates/waveform/components/WaveformHistogramRanged.tsx
-import React25 from "react";
-var WaveformHistogramRanged = ({ data }) => {
-  const {
-    config: config12,
-    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__ */ React25.createElement(Waveform, { config: config12, className, style }, /* @__PURE__ */ React25.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__ */ React25.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__ */ React25.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__ */ React25.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__ */ React25.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__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement("div", { style: topHalfStyle }, /* @__PURE__ */ React25.createElement(Bars, { growUpwards: true })), /* @__PURE__ */ React25.createElement("div", { style: bottomHalfStyle }, /* @__PURE__ */ React25.createElement(Bars, { growUpwards: false })));
-  }
-  const containerStyle = {
-    width: "100%",
-    position: "absolute",
-    top: `${height / 2 - height / 4}px`,
-    height: `${height / 2}px`,
-    left: 0
-  };
-  return /* @__PURE__ */ React25.createElement("div", { style: containerStyle }, /* @__PURE__ */ React25.createElement(Bars, { growUpwards: true }));
-};
-
-// src/templates/waveform/components/WaveformLine.tsx
-import React26, { useMemo as useMemo12 } from "react";
-import { createSmoothSvgPath } from "@remotion/media-utils";
-import { useCurrentFrame as useCurrentFrame10, useVideoConfig as useVideoConfig11 } 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: config12,
-    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__ */ React26.createElement(Waveform, { config: config12, className, style }, /* @__PURE__ */ React26.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: config12, frame, fps } = useWaveformContext();
-  const currentFrame = useCurrentFrame10();
-  const videoConfig = useVideoConfig11();
-  const isBeat = useMemo12(() => {
-    if (!beatSync || !frequencyData || !amplitudes) return false;
-    return detectBeat(frequencyData, amplitudes, beatThreshold, bpm, currentFrame, fps);
-  }, [beatSync, frequencyData, amplitudes, beatThreshold, bpm, currentFrame, fps]);
-  const beatProgress = useMemo12(() => {
-    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 = useMemo12(() => {
-    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 = useMemo12(() => {
-    if (!beatSync) {
-      return 0.3;
-    }
-    return smoothAnimation ? 0.7 : 1;
-  }, [beatSync, smoothAnimation]);
-  const waveformPaths = useMemo12(() => {
-    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 * (config12.amplitude || 1) * currentBeatMultiplier * speed;
-        const baseAmplitude = y * (config12.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, config12.amplitude, currentBeatMultiplier, animationSpeed, waveSegments, waveSpacing, waveOffset, waveDirection, smoothFactor]);
-  if (!waveformData) {
-    return /* @__PURE__ */ React26.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading waveform...");
-  }
-  return /* @__PURE__ */ React26.createElement(
-    "svg",
-    {
-      width,
-      height,
-      className: "absolute inset-0",
-      style: { pointerEvents: "none" }
-    },
-    centerLine && /* @__PURE__ */ React26.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__ */ React26.createElement("g", { key: segmentIndex }, pulseOnBeat && isBeat && /* @__PURE__ */ React26.createElement(
-      "path",
-      {
-        d: path,
-        stroke: pulseColor,
-        strokeWidth: (strokeWidth || 3) * (pulseScale || 1.2),
-        strokeLinecap,
-        strokeLinejoin,
-        fill: "none",
-        opacity: (opacity || 1) * (1 - beatProgress)
-      }
-    ), /* @__PURE__ */ React26.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 React27 from "react";
-import { AbsoluteFill as AbsoluteFill7, Composition as RemotionComposition } from "remotion";
-
-// 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 calculateDuration = async (childrenData, config12) => {
-  let calculatedDuration = void 0;
-  const targetIds = Array.isArray(config12.fitDurationTo) ? config12.fitDurationTo : [config12.fitDurationTo];
-  const matchingComponents = findMatchingComponents(
-    childrenData || [],
-    targetIds
-  );
-  if (matchingComponents.length === 1) {
-    if (matchingComponents[0].type === "atom" && (matchingComponents[0].componentId === "AudioAtom" || matchingComponents[0].componentId === "VideoAtom")) {
-      const src = matchingComponents[0].data.src;
-      if (src.startsWith("http")) {
-        const audioInput = new Input({
-          formats: ALL_FORMATS,
-          source: new UrlSource(src)
-        });
-        calculatedDuration = await audioInput.computeDuration();
-      } else {
-      }
-    }
-  }
-  return calculatedDuration;
-};
-var setDurationsInContext = async (root) => {
-  const iterateRecursively = async (components) => {
-    const updatedComponents = [];
-    for (const component of components) {
-      let updatedComponent = { ...component };
-      if (component.context?.timing?.fitDurationTo?.length > 0) {
-        const duration = await calculateDuration(component.childrenData, {
-          fitDurationTo: component.context?.timing?.fitDurationTo
-        });
-        updatedComponent = {
-          ...component,
-          context: {
-            ...component.context,
-            timing: {
-              ...component.context.timing,
-              duration
-            }
-          }
-        };
-      }
-      if (component.childrenData && component.childrenData.length > 0) {
-        updatedComponent.childrenData = await iterateRecursively(
-          component.childrenData
-        );
-      }
-      updatedComponents.push(updatedComponent);
-    }
-    return updatedComponents;
-  };
-  const updatedChildrenData = await iterateRecursively(root.childrenData);
-  return {
-    ...root,
-    childrenData: updatedChildrenData
-  };
-};
-
-// src/components/Composition.tsx
-var CompositionLayout = ({ childrenData, style, config: config12 }) => {
-  return /* @__PURE__ */ React27.createElement(
-    CompositionProvider,
-    {
-      value: {
-        root: childrenData,
-        duration: config12.duration
-      }
-    },
-    /* @__PURE__ */ React27.createElement(AbsoluteFill7, { style }, childrenData?.map((component) => /* @__PURE__ */ React27.createElement(
-      ComponentRenderer,
-      {
-        key: component.id,
-        ...component
-      }
-    )))
-  );
-};
-var calculateCompositionLayoutMetadata = async ({ props, defaultProps, abortSignal, isRendering }) => {
-  let calculatedDuration = void 0;
-  if (props.config?.fitDurationTo?.length > 0) {
-    calculatedDuration = await calculateDuration(props.childrenData, {
-      fitDurationTo: props.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);
-  const updatedProps = await setDurationsInContext(props);
-  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: config12,
-  style
-}) => {
-  return /* @__PURE__ */ React27.createElement(
-    RemotionComposition,
-    {
-      id,
-      component: CompositionLayout,
-      durationInFrames: Math.round(config12.duration * config12.fps),
-      fps: config12.fps,
-      defaultProps: { childrenData, style, config: config12 },
-      calculateMetadata: calculateCompositionLayoutMetadata
-    }
-  );
-};
-export {
-  Atom5 as AudioAtom,
-  config6 as AudioAtomConfig,
-  Layout as BaseLayout,
-  config as BaseLayoutConfig,
-  BlurEffect,
-  config8 as BlurEffectConfig,
-  ComponentRenderer,
-  Composition,
-  CompositionLayout,
-  CompositionProvider,
-  Frame,
-  Atom2 as ImageAtom,
-  config3 as ImageAtomConfig,
-  LoopEffect,
-  config9 as LoopEffectConfig,
-  NextjsLogo,
-  PanEffect,
-  config10 as PanEffectConfig,
-  Rings,
-  RippleOutLayout,
-  SceneFrame,
-  Atom as ShapeAtom,
-  config2 as ShapeAtomConfig,
-  Atom3 as TextAtom,
-  config4 as TextAtomConfig,
-  Atom6 as TextAtomWithFonts,
-  config7 as TextAtomWithFontsConfig,
-  TextFade,
-  Atom4 as VideoAtom,
-  config5 as VideoAtomConfig,
-  Waveform,
-  WaveformCircle,
-  WaveformHistogram,
-  WaveformHistogramRanged,
-  WaveformLine,
-  WaveformPresets,
-  ZoomEffect,
-  config11 as ZoomEffectConfig,
-  buildLayoutHook,
-  calculateCircularPosition,
-  calculateCompositionLayoutMetadata,
-  calculateGridPosition,
-  calculateHierarchy,
-  calculateTimingWithInheritance,
-  clearFontCache,
-  componentRegistry,
-  createRootContext,
-  findComponentById,
-  findParentComponent,
-  getComponent,
-  getComponentConfig,
-  getComponentWithConfig,
-  getLoadedFontFamily,
-  getLoadedFonts,
-  getNormalizedFontName,
-  isFontAvailable,
-  isFontLoaded,
-  loadGoogleFont,
-  loadMultipleFonts,
-  mergeContexts,
-  nextjsLogoConfig,
-  preloadCommonFonts,
-  registerComponent,
-  registerEffect,
-  registerPackage,
-  ringsConfig,
-  rippleOutLayoutConfig,
-  textFadeConfig,
-  useBoundaryCalculation,
-  useComponentRegistry,
-  useComposition,
-  useFont,
-  useFontLoader,
-  useRenderContext,
-  useRippleOutLayout,
-  useWaveformContext,
-  useWaveformData
-};
-//# sourceMappingURL=index.mjs.map