ugcinc-render 1.3.5

package/dist/index.mjs

@@ -0,0 +1,1425 @@
+// src/types/element.ts
+var DIMENSION_PRESETS = {
+  "tiktok": { width: 1080, height: 1920, label: "TikTok/Reels (1080\xD71920)", ratio: "9:16" },
+  "instagram-square": { width: 1080, height: 1080, label: "Instagram Square (1080\xD71080)", ratio: "1:1" },
+  "instagram-post": { width: 1080, height: 1350, label: "Instagram Post (1080\xD71350)", ratio: "4:5" },
+  "youtube": { width: 1280, height: 720, label: "YouTube Thumbnail (1280\xD7720)", ratio: "16:9" },
+  "twitter": { width: 1200, height: 675, label: "Twitter/X (1200\xD7675)", ratio: "16:9" }
+};
+
+// src/compositions/ImageEditorComposition.tsx
+import { useMemo as useMemo3 } from "react";
+import { AbsoluteFill, Img as Img2 } from "remotion";
+
+// src/components/TextElement.tsx
+import { useMemo } from "react";
+
+// src/utils/defaults.ts
+var TEXT_DEFAULTS = {
+  fontType: "arial",
+  fontSize: 40,
+  fontWeight: "normal",
+  color: "#000000",
+  alignment: "left",
+  verticalAlign: "top",
+  direction: "ltr",
+  lineHeight: 1.2,
+  letterSpacing: 0,
+  padding: 0,
+  textWrap: "word",
+  wordBreak: "normal",
+  hyphenation: "none",
+  maxLines: 0,
+  textOverflow: "clip",
+  ellipsis: "...",
+  strokeWidth: 0,
+  backgroundOpacity: 100,
+  autoWidth: false,
+  boxAlign: "left"
+};
+var IMAGE_DEFAULTS = {
+  fit: "cover",
+  opacity: 100,
+  loop: false,
+  speed: 1
+};
+var VIDEO_DEFAULTS = {
+  ...IMAGE_DEFAULTS,
+  volume: 100
+};
+var VISUAL_DEFAULTS = {
+  xOffset: 0,
+  yOffset: 0,
+  zIndex: 0,
+  scale: 1,
+  rotation: 0,
+  opacity: 100
+};
+function applyTextDefaults(segment) {
+  return {
+    ...TEXT_DEFAULTS,
+    ...segment
+  };
+}
+function applyImageDefaults(segment) {
+  return {
+    ...IMAGE_DEFAULTS,
+    ...segment
+  };
+}
+function applyVideoDefaults(segment) {
+  return {
+    ...VIDEO_DEFAULTS,
+    ...segment
+  };
+}
+
+// src/utils/fonts.ts
+var FONT_FAMILIES = {
+  tiktok: '"TikTok Sans", sans-serif',
+  apple: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
+  arial: "Arial, sans-serif"
+};
+function getFontFamily(fontType) {
+  return FONT_FAMILIES[fontType] ?? FONT_FAMILIES.arial;
+}
+function buildFontString({
+  fontType,
+  fontSize,
+  fontWeight
+}) {
+  const fontFamily = getFontFamily(fontType);
+  return `${fontWeight} ${fontSize}px ${fontFamily}`;
+}
+var FONT_URLS = {
+  tiktok: {
+    regular: "/TikTokSans-Regular.ttf",
+    bold: "/TikTokSans-Bold.ttf"
+  },
+  apple: {
+    regular: "/SF-Pro.ttf"
+  }
+};
+async function preloadFonts() {
+  if (typeof document !== "undefined") {
+    const fontPromises = [];
+    const tiktokRegular = new FontFace(
+      "TikTok Sans",
+      `url(${FONT_URLS.tiktok.regular})`,
+      { weight: "normal" }
+    );
+    fontPromises.push(tiktokRegular.load());
+    const tiktokBold = new FontFace(
+      "TikTok Sans",
+      `url(${FONT_URLS.tiktok.bold})`,
+      { weight: "bold" }
+    );
+    fontPromises.push(tiktokBold.load());
+    const sfPro = new FontFace(
+      "SF Pro",
+      `url(${FONT_URLS.apple.regular})`,
+      { weight: "normal" }
+    );
+    fontPromises.push(sfPro.load());
+    const loadedFonts = await Promise.all(fontPromises);
+    loadedFonts.forEach((font) => {
+      document.fonts.add(font);
+    });
+  }
+}
+function areFontsLoaded() {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  return document.fonts.check('normal 16px "TikTok Sans"') && document.fonts.check('bold 16px "TikTok Sans"') && document.fonts.check('normal 16px "SF Pro"');
+}
+
+// src/utils/text.ts
+function wrapText({
+  text,
+  maxWidth,
+  letterSpacing = 0,
+  textWrap = "word",
+  maxLines = 0,
+  measureText
+}) {
+  const lines = [];
+  if (textWrap === "none") {
+    lines.push(text);
+    return lines;
+  }
+  const words = textWrap === "word" ? text.split(" ") : text.split("");
+  let currentLine = "";
+  for (let i = 0; i < words.length; i++) {
+    const word = words[i];
+    if (!word) continue;
+    const testLine = currentLine + (currentLine ? textWrap === "word" ? " " : "" : "") + word;
+    const charCount = [...testLine].length;
+    const extraSpacing = charCount > 1 ? (charCount - 1) * letterSpacing : 0;
+    const totalWidth = measureText(testLine) + extraSpacing;
+    if (totalWidth > maxWidth && currentLine) {
+      lines.push(currentLine);
+      currentLine = word;
+      if (maxLines && lines.length >= maxLines) {
+        break;
+      }
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine && (!maxLines || lines.length < maxLines)) {
+    lines.push(currentLine);
+  }
+  if (maxLines && lines.length > maxLines) {
+    lines.splice(maxLines);
+  }
+  return lines;
+}
+function calculateLineWidth({
+  line,
+  letterSpacing,
+  measureText
+}) {
+  const chars = [...line];
+  let width = 0;
+  for (const char of chars) {
+    width += measureText(char) + letterSpacing;
+  }
+  if (chars.length > 0) {
+    width -= letterSpacing;
+  }
+  return width;
+}
+function getBorderRadii(borderRadius) {
+  if (!borderRadius) return null;
+  if (typeof borderRadius === "number") {
+    if (borderRadius <= 0) return null;
+    return [borderRadius, borderRadius, borderRadius, borderRadius];
+  }
+  const topLeft = borderRadius.topLeft ?? 0;
+  const topRight = borderRadius.topRight ?? 0;
+  const bottomRight = borderRadius.bottomRight ?? 0;
+  const bottomLeft = borderRadius.bottomLeft ?? 0;
+  if (topLeft <= 0 && topRight <= 0 && bottomRight <= 0 && bottomLeft <= 0) {
+    return null;
+  }
+  return [topLeft, topRight, bottomRight, bottomLeft];
+}
+function parseHexColor(hex) {
+  const cleanHex = hex.replace("#", "");
+  return {
+    r: parseInt(cleanHex.substring(0, 2), 16),
+    g: parseInt(cleanHex.substring(2, 4), 16),
+    b: parseInt(cleanHex.substring(4, 6), 16)
+  };
+}
+function hexToRgba(hex, opacity = 100) {
+  const { r, g, b } = parseHexColor(hex);
+  return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
+}
+
+// src/components/TextElement.tsx
+import { jsx } from "react/jsx-runtime";
+function TextElement({ segment, scale = 1 }) {
+  const fontType = segment.fontType ?? TEXT_DEFAULTS.fontType;
+  const fontSize = (segment.fontSize ?? TEXT_DEFAULTS.fontSize) * scale;
+  const fontWeight = segment.fontWeight ?? TEXT_DEFAULTS.fontWeight;
+  const color = segment.color ?? TEXT_DEFAULTS.color;
+  const alignment = segment.alignment ?? TEXT_DEFAULTS.alignment;
+  const verticalAlign = segment.verticalAlign ?? TEXT_DEFAULTS.verticalAlign;
+  const lineHeight = segment.lineHeight ?? TEXT_DEFAULTS.lineHeight;
+  const letterSpacing = (segment.letterSpacing ?? TEXT_DEFAULTS.letterSpacing) * scale;
+  const strokeColor = segment.strokeColor;
+  const strokeWidth = (segment.strokeWidth ?? TEXT_DEFAULTS.strokeWidth) * scale;
+  const uniformPadding = (segment.padding ?? TEXT_DEFAULTS.padding) * scale;
+  const paddingTop = segment.paddingTop ?? uniformPadding;
+  const paddingRight = segment.paddingRight ?? uniformPadding;
+  const paddingBottom = segment.paddingBottom ?? uniformPadding;
+  const paddingLeft = segment.paddingLeft ?? uniformPadding;
+  const x = segment.xOffset * scale;
+  const y = segment.yOffset * scale;
+  const width = segment.width * scale;
+  const height = segment.height * scale;
+  const rotation = segment.rotation ?? 0;
+  const autoWidth = segment.autoWidth ?? TEXT_DEFAULTS.autoWidth;
+  const boxAlign = segment.boxAlign ?? TEXT_DEFAULTS.boxAlign;
+  const backgroundColor = segment.backgroundColor;
+  const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
+  const backgroundBorderRadius = segment.backgroundBorderRadius;
+  const fontFamily = getFontFamily(fontType);
+  const borderRadiusStyle = useMemo(() => {
+    if (!backgroundBorderRadius) return void 0;
+    const radii = getBorderRadii(backgroundBorderRadius);
+    if (!radii) return void 0;
+    return `${radii[0] * scale}px ${radii[1] * scale}px ${radii[2] * scale}px ${radii[3] * scale}px`;
+  }, [backgroundBorderRadius, scale]);
+  const containerStyle = useMemo(() => ({
+    position: "absolute",
+    left: x,
+    top: y,
+    width: autoWidth ? "auto" : width,
+    maxWidth: width,
+    height: autoWidth ? "auto" : height,
+    transform: rotation !== 0 ? `rotate(${rotation}deg)` : void 0,
+    transformOrigin: "center center",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center",
+    // Auto-width alignment
+    ...autoWidth && {
+      left: boxAlign === "center" ? x + width / 2 : boxAlign === "right" ? x + width : x,
+      transform: rotation !== 0 ? `translateX(${boxAlign === "center" ? "-50%" : boxAlign === "right" ? "-100%" : "0"}) rotate(${rotation}deg)` : boxAlign === "center" ? "translateX(-50%)" : boxAlign === "right" ? "translateX(-100%)" : void 0
+    }
+  }), [x, y, width, height, rotation, verticalAlign, autoWidth, boxAlign]);
+  const backgroundStyle = useMemo(() => {
+    if (!backgroundColor) return {};
+    return {
+      backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
+      borderRadius: borderRadiusStyle
+    };
+  }, [backgroundColor, backgroundOpacity, borderRadiusStyle]);
+  const textStyle = useMemo(() => ({
+    fontFamily,
+    fontSize,
+    fontWeight,
+    color,
+    lineHeight,
+    letterSpacing,
+    textAlign: alignment === "justify" ? "justify" : alignment,
+    padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    // Text stroke using text-shadow for cross-browser support
+    ...strokeWidth > 0 && strokeColor && {
+      textShadow: `
+        -${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
+        ${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
+        -${strokeWidth}px ${strokeWidth}px 0 ${strokeColor},
+        ${strokeWidth}px ${strokeWidth}px 0 ${strokeColor},
+        0 -${strokeWidth}px 0 ${strokeColor},
+        0 ${strokeWidth}px 0 ${strokeColor},
+        -${strokeWidth}px 0 0 ${strokeColor},
+        ${strokeWidth}px 0 0 ${strokeColor}
+      `,
+      // Also use WebKit text stroke for better quality where supported
+      WebkitTextStroke: `${strokeWidth}px ${strokeColor}`,
+      paintOrder: "stroke fill"
+    }
+  }), [
+    fontFamily,
+    fontSize,
+    fontWeight,
+    color,
+    lineHeight,
+    letterSpacing,
+    alignment,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    strokeWidth,
+    strokeColor
+  ]);
+  return /* @__PURE__ */ jsx("div", { style: { ...containerStyle, ...backgroundStyle }, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text }) });
+}
+
+// src/components/ImageElement.tsx
+import { useMemo as useMemo2 } from "react";
+import { Img } from "remotion";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function fitModeToCss(fit) {
+  return fit;
+}
+function ImageElement({ segment, src, scale = 1 }) {
+  const fit = segment.fit ?? IMAGE_DEFAULTS.fit;
+  const opacity = (segment.opacity ?? VISUAL_DEFAULTS.opacity) / 100;
+  const rotation = segment.rotation ?? 0;
+  const borderRadius = segment.borderRadius;
+  const x = segment.xOffset * scale;
+  const y = segment.yOffset * scale;
+  const width = segment.width * scale;
+  const height = segment.height * scale;
+  const borderRadiusStyle = useMemo2(() => {
+    if (!borderRadius) return void 0;
+    if (typeof borderRadius === "number") {
+      return `${borderRadius * scale}px`;
+    }
+    const radii = getBorderRadii(borderRadius);
+    if (!radii) return void 0;
+    return `${radii[0] * scale}px ${radii[1] * scale}px ${radii[2] * scale}px ${radii[3] * scale}px`;
+  }, [borderRadius, scale]);
+  const containerStyle = useMemo2(() => ({
+    position: "absolute",
+    left: x,
+    top: y,
+    width,
+    height,
+    transform: rotation !== 0 ? `rotate(${rotation}deg)` : void 0,
+    transformOrigin: "center center",
+    overflow: "hidden",
+    borderRadius: borderRadiusStyle
+  }), [x, y, width, height, rotation, borderRadiusStyle]);
+  const imageStyle = useMemo2(() => ({
+    width: "100%",
+    height: "100%",
+    objectFit: fitModeToCss(fit),
+    opacity
+  }), [fit, opacity]);
+  return /* @__PURE__ */ jsx2("div", { style: containerStyle, children: /* @__PURE__ */ jsx2(
+    Img,
+    {
+      src,
+      style: imageStyle
+    }
+  ) });
+}
+
+// src/utils/positionResolver.ts
+var FONT_FAMILIES2 = {
+  tiktok: '"TikTok Sans", sans-serif',
+  apple: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
+  arial: "Arial, sans-serif"
+};
+function calculateAutoWidthDimensions(elem, textContent, ctx) {
+  if (elem.type !== "text" || !elem.autoWidth) {
+    return null;
+  }
+  let measureCtx = ctx;
+  if (!measureCtx) {
+    if (typeof document === "undefined") {
+      return null;
+    }
+    const canvas = document.createElement("canvas");
+    measureCtx = canvas.getContext("2d");
+    if (!measureCtx) return null;
+  }
+  const fontSize = elem.fontSize ?? 40;
+  const fontWeight = elem.fontWeight ?? "bold";
+  const fontType = elem.font ?? "tiktok";
+  const paddingLeft = elem.paddingLeft ?? 0;
+  const paddingRight = elem.paddingRight ?? 0;
+  const letterSpacing = elem.letterSpacing ?? 0;
+  const maxWidth = elem.width;
+  const boxAlign = elem.boxAlign ?? "left";
+  const fontFamily = FONT_FAMILIES2[fontType] ?? FONT_FAMILIES2.tiktok;
+  measureCtx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
+  const words = textContent.split(" ");
+  const lines = [];
+  let currentLine = "";
+  for (const word of words) {
+    if (!word) continue;
+    const testLine = currentLine + (currentLine ? " " : "") + word;
+    const charCount = [...testLine].length;
+    const extraSpacing = charCount > 1 ? (charCount - 1) * letterSpacing : 0;
+    const totalWidth = measureCtx.measureText(testLine).width + extraSpacing;
+    if (totalWidth > availableWidth && currentLine) {
+      lines.push(currentLine);
+      currentLine = word;
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine) lines.push(currentLine);
+  let widestLineWidth = 0;
+  for (const line of lines) {
+    const chars = [...line];
+    let lineWidth = 0;
+    for (const char of chars) {
+      lineWidth += measureCtx.measureText(char).width + letterSpacing;
+    }
+    if (chars.length > 0) lineWidth -= letterSpacing;
+    widestLineWidth = Math.max(widestLineWidth, lineWidth);
+  }
+  const actualWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  let actualX;
+  switch (boxAlign) {
+    case "right":
+      actualX = elem.x + maxWidth - actualWidth;
+      break;
+    case "center":
+      actualX = elem.x + (maxWidth - actualWidth) / 2;
+      break;
+    case "left":
+    default:
+      actualX = elem.x;
+      break;
+  }
+  return { actualWidth, actualX };
+}
+function detectCircularDependency(elements, startId, axis, visited = /* @__PURE__ */ new Set(), path = []) {
+  if (visited.has(startId)) {
+    const cycleStartIndex = path.indexOf(startId);
+    return path.slice(cycleStartIndex).concat(startId);
+  }
+  const element = elements.find((e) => e.id === startId);
+  const relConfig = axis === "x" ? element?.relativePositionX : element?.relativePositionY;
+  if (!relConfig) {
+    return null;
+  }
+  visited.add(startId);
+  path.push(startId);
+  const result = detectCircularDependency(
+    elements,
+    relConfig.elementId,
+    axis,
+    visited,
+    path
+  );
+  visited.delete(startId);
+  path.pop();
+  return result;
+}
+function topologicalSortForAxis(elements, axis) {
+  const errors = [];
+  const elementMap = new Map(elements.map((e) => [e.id, e]));
+  const dependents = /* @__PURE__ */ new Map();
+  const dependencyCount = /* @__PURE__ */ new Map();
+  for (const elem of elements) {
+    dependents.set(elem.id, []);
+    dependencyCount.set(elem.id, 0);
+  }
+  for (const elem of elements) {
+    const relConfig = axis === "x" ? elem.relativePositionX : elem.relativePositionY;
+    if (relConfig) {
+      const refId = relConfig.elementId;
+      if (!elementMap.has(refId)) {
+        errors.push({
+          elementId: elem.id,
+          type: "missing_reference",
+          message: `Element references non-existent element "${refId}" for ${axis.toUpperCase()} position`,
+          axis
+        });
+        continue;
+      }
+      const cycle = detectCircularDependency(elements, elem.id, axis);
+      if (cycle) {
+        errors.push({
+          elementId: elem.id,
+          type: "circular_dependency",
+          message: `Circular dependency detected for ${axis.toUpperCase()}: ${cycle.join(" \u2192 ")}`,
+          axis,
+          cyclePath: cycle
+        });
+        continue;
+      }
+      dependents.get(refId)?.push(elem.id);
+      dependencyCount.set(elem.id, (dependencyCount.get(elem.id) ?? 0) + 1);
+    }
+  }
+  const sorted = [];
+  const queue = [];
+  for (const [id, count] of dependencyCount) {
+    if (count === 0) {
+      queue.push(id);
+    }
+  }
+  while (queue.length > 0) {
+    const currentId = queue.shift();
+    const current = elementMap.get(currentId);
+    if (current) {
+      sorted.push(current);
+    }
+    for (const dependentId of dependents.get(currentId) ?? []) {
+      const newCount = (dependencyCount.get(dependentId) ?? 1) - 1;
+      dependencyCount.set(dependentId, newCount);
+      if (newCount === 0) {
+        queue.push(dependentId);
+      }
+    }
+  }
+  for (const elem of elements) {
+    if (!sorted.find((e) => e.id === elem.id)) {
+      sorted.push(elem);
+    }
+  }
+  return { sorted, errors };
+}
+function getSelfAnchorOffsetX(element, selfAnchor) {
+  switch (selfAnchor) {
+    case "left":
+      return 0;
+    case "center":
+      return element.width / 2;
+    case "right":
+      return element.width;
+    default:
+      return 0;
+  }
+}
+function getSelfAnchorOffsetY(element, selfAnchor) {
+  switch (selfAnchor) {
+    case "top":
+      return 0;
+    case "middle":
+      return element.height / 2;
+    case "bottom":
+      return element.height;
+    default:
+      return 0;
+  }
+}
+function calculateAbsoluteX(element, referenceElement, anchor, selfAnchor, offset) {
+  const refX = anchor === "left" ? referenceElement.x : referenceElement.x + referenceElement.width;
+  const selfOffset = getSelfAnchorOffsetX(element, selfAnchor);
+  return refX + offset - selfOffset;
+}
+function calculateAbsoluteY(element, referenceElement, anchor, selfAnchor, offset) {
+  const refY = anchor === "top" ? referenceElement.y : referenceElement.y + referenceElement.height;
+  const selfOffset = getSelfAnchorOffsetY(element, selfAnchor);
+  return refY + offset - selfOffset;
+}
+function resolveElementPositions(elements, textValues) {
+  if (elements.length === 0) {
+    return { elements: [], errors: [] };
+  }
+  const allErrors = [];
+  const { sorted: sortedX, errors: errorsX } = topologicalSortForAxis(elements, "x");
+  allErrors.push(...errorsX);
+  const { sorted: sortedY, errors: errorsY } = topologicalSortForAxis(elements, "y");
+  allErrors.push(...errorsY);
+  const resolvedX = /* @__PURE__ */ new Map();
+  const resolvedY = /* @__PURE__ */ new Map();
+  let measureCtx = null;
+  const hasAutoWidthElements = elements.some((e) => e.type === "text" && e.autoWidth);
+  if (hasAutoWidthElements && typeof document !== "undefined") {
+    const canvas = document.createElement("canvas");
+    measureCtx = canvas.getContext("2d");
+  }
+  const getTextContent = (elem) => {
+    if (elem.type !== "text") return "";
+    if (elem.textInputId && textValues?.[elem.textInputId]) {
+      return textValues[elem.textInputId];
+    }
+    return elem.text ?? "Text";
+  };
+  const referenceX = /* @__PURE__ */ new Map();
+  const referenceY = /* @__PURE__ */ new Map();
+  for (const elem of elements) {
+    resolvedX.set(elem.id, { x: elem.x, width: elem.width });
+    resolvedY.set(elem.id, { y: elem.y, height: elem.height });
+    if (elem.type === "text" && elem.autoWidth) {
+      const textContent = getTextContent(elem);
+      const autoWidthResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
+      if (autoWidthResult) {
+        referenceX.set(elem.id, { x: autoWidthResult.actualX, width: autoWidthResult.actualWidth });
+      } else {
+        referenceX.set(elem.id, { x: elem.x, width: elem.width });
+      }
+    } else {
+      referenceX.set(elem.id, { x: elem.x, width: elem.width });
+    }
+    referenceY.set(elem.id, { y: elem.y, height: elem.height });
+  }
+  for (const elem of sortedX) {
+    if (elem.relativePositionX) {
+      const refId = elem.relativePositionX.elementId;
+      const refPosition = referenceX.get(refId);
+      if (refPosition) {
+        const defaultSelfAnchor = elem.relativePositionX.anchor === "right" ? "left" : "right";
+        const selfAnchor = elem.relativePositionX.selfAnchor ?? defaultSelfAnchor;
+        const newX = calculateAbsoluteX(
+          elem,
+          refPosition,
+          elem.relativePositionX.anchor,
+          selfAnchor,
+          elem.relativePositionX.offset
+        );
+        resolvedX.set(elem.id, { x: newX, width: elem.width });
+        if (elem.type === "text" && elem.autoWidth) {
+          const textContent = getTextContent(elem);
+          const autoWidthResult = calculateAutoWidthDimensions({ ...elem, x: newX }, textContent, measureCtx);
+          if (autoWidthResult) {
+            referenceX.set(elem.id, { x: autoWidthResult.actualX, width: autoWidthResult.actualWidth });
+          } else {
+            referenceX.set(elem.id, { x: newX, width: elem.width });
+          }
+        } else {
+          referenceX.set(elem.id, { x: newX, width: elem.width });
+        }
+      }
+    }
+  }
+  for (const elem of sortedY) {
+    if (elem.relativePositionY) {
+      const refId = elem.relativePositionY.elementId;
+      const refPosition = referenceY.get(refId);
+      if (refPosition) {
+        const defaultSelfAnchor = elem.relativePositionY.anchor === "bottom" ? "top" : "bottom";
+        const selfAnchor = elem.relativePositionY.selfAnchor ?? defaultSelfAnchor;
+        const newY = calculateAbsoluteY(
+          elem,
+          refPosition,
+          elem.relativePositionY.anchor,
+          selfAnchor,
+          elem.relativePositionY.offset
+        );
+        resolvedY.set(elem.id, { y: newY, height: elem.height });
+        referenceY.set(elem.id, { y: newY, height: elem.height });
+      }
+    }
+  }
+  const resolvedElements = elements.map((elem) => ({
+    ...elem,
+    x: resolvedX.get(elem.id)?.x ?? elem.x,
+    y: resolvedY.get(elem.id)?.y ?? elem.y
+  }));
+  return { elements: resolvedElements, errors: allErrors };
+}
+function canSetAsReference(elements, elementId, proposedReferenceId, axis) {
+  if (elementId === proposedReferenceId) {
+    return false;
+  }
+  const testElements = elements.map((e) => {
+    if (e.id !== elementId) return e;
+    if (axis === "x") {
+      return {
+        ...e,
+        relativePositionX: { elementId: proposedReferenceId, anchor: "right", offset: 0 }
+      };
+    } else {
+      return {
+        ...e,
+        relativePositionY: { elementId: proposedReferenceId, anchor: "bottom", offset: 0 }
+      };
+    }
+  });
+  const cycle = detectCircularDependency(testElements, elementId, axis);
+  return cycle === null;
+}
+function getDependentElements(elements, elementId) {
+  const dependents = [];
+  const visited = /* @__PURE__ */ new Set();
+  function findDependents(id) {
+    for (const elem of elements) {
+      const dependsOnX = elem.relativePositionX?.elementId === id;
+      const dependsOnY = elem.relativePositionY?.elementId === id;
+      if ((dependsOnX || dependsOnY) && !visited.has(elem.id)) {
+        visited.add(elem.id);
+        dependents.push(elem.id);
+        findDependents(elem.id);
+      }
+    }
+  }
+  findDependents(elementId);
+  return dependents;
+}
+function getReferenceElementX(elements, elementId) {
+  const element = elements.find((e) => e.id === elementId);
+  if (!element?.relativePositionX) {
+    return null;
+  }
+  return elements.find((e) => e.id === element.relativePositionX.elementId) ?? null;
+}
+function getReferenceElementY(elements, elementId) {
+  const element = elements.find((e) => e.id === elementId);
+  if (!element?.relativePositionY) {
+    return null;
+  }
+  return elements.find((e) => e.id === element.relativePositionY.elementId) ?? null;
+}
+
+// src/compositions/ImageEditorComposition.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function getSortedSegments(config) {
+  const allSegments = [];
+  for (const channel of config.channels) {
+    allSegments.push(...channel.segments);
+  }
+  return allSegments.sort((a, b) => {
+    const aZ = a.zIndex ?? 0;
+    const bZ = b.zIndex ?? 0;
+    return aZ - bZ;
+  });
+}
+function elementToTextSegment(elem) {
+  return {
+    id: elem.id,
+    type: "text",
+    source: "",
+    order: elem.zIndex,
+    offset: { type: "absolute", value: 0 },
+    xOffset: elem.x,
+    yOffset: elem.y,
+    width: elem.width,
+    height: elem.height,
+    zIndex: elem.zIndex,
+    rotation: elem.rotation,
+    opacity: elem.opacity,
+    text: elem.text ?? "",
+    fontType: elem.font ?? "tiktok",
+    fontSize: elem.fontSize ?? 40,
+    fontWeight: elem.fontWeight ?? "normal",
+    color: elem.color ?? "#FFFFFF",
+    strokeColor: elem.strokeColor ?? "#000000",
+    strokeWidth: elem.outlineWidth ?? 0,
+    lineHeight: elem.lineHeight ?? 1.2,
+    letterSpacing: elem.letterSpacing ?? 0,
+    alignment: elem.textAlign ?? "center",
+    verticalAlign: elem.verticalAlign ?? "middle",
+    backgroundColor: elem.backgroundColor,
+    backgroundOpacity: elem.backgroundOpacity,
+    backgroundBorderRadius: typeof elem.backgroundBorderRadius === "object" ? elem.backgroundBorderRadius : void 0,
+    paddingTop: elem.paddingTop,
+    paddingRight: elem.paddingRight,
+    paddingBottom: elem.paddingBottom,
+    paddingLeft: elem.paddingLeft,
+    autoWidth: elem.autoWidth,
+    boxAlign: elem.boxAlign
+  };
+}
+function elementToImageSegment(elem, source) {
+  return {
+    id: elem.id,
+    type: "image",
+    source,
+    order: elem.zIndex,
+    offset: { type: "absolute", value: 0 },
+    xOffset: elem.x,
+    yOffset: elem.y,
+    width: elem.width,
+    height: elem.height,
+    zIndex: elem.zIndex,
+    rotation: elem.rotation,
+    opacity: elem.opacity,
+    fit: elem.fit ?? "cover",
+    borderRadius: elem.borderRadius
+  };
+}
+function ImageEditorComposition({
+  config,
+  sources = {},
+  scale = 1,
+  // New direct element props
+  elements,
+  width,
+  height,
+  backgroundFit = "cover",
+  backgroundUrl,
+  imageUrls = {},
+  textValues = {}
+}) {
+  const resolvedElements = useMemo3(() => {
+    if (!elements) return null;
+    const result = resolveElementPositions(elements, textValues);
+    if (result.errors.length > 0) {
+      console.warn("Position resolution errors:", result.errors);
+    }
+    return result.elements;
+  }, [elements, textValues]);
+  const segmentsFromElements = useMemo3(() => {
+    if (!resolvedElements) return null;
+    const segments = [];
+    for (const elem of resolvedElements) {
+      if (elem.type === "text") {
+        const text = elem.textInputId && textValues[elem.textInputId] ? textValues[elem.textInputId] : elem.text || `{{${elem.textInputId ?? "text"}}}`;
+        segments.push(elementToTextSegment({ ...elem, text }));
+      } else if (elem.type === "image") {
+        const url = elem.inputId ? imageUrls[elem.inputId] ?? "" : "";
+        if (url) {
+          segments.push(elementToImageSegment(elem, url));
+        }
+      }
+    }
+    return segments.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
+  }, [resolvedElements, imageUrls, textValues]);
+  const canvasWidth = width ?? config?.width ?? 1080;
+  const canvasHeight = height ?? config?.height ?? 1920;
+  const bgFit = backgroundFit ?? "cover";
+  const bgUrl = backgroundUrl ?? sources.background;
+  const contentSegments = segmentsFromElements ?? (() => {
+    if (!config) return [];
+    const sorted = getSortedSegments(config);
+    return sorted.filter((s) => s.id !== "background");
+  })();
+  const legacyBackgroundSegment = useMemo3(() => {
+    if (!config || segmentsFromElements) return null;
+    const sorted = getSortedSegments(config);
+    return sorted.find((s) => s.id === "background" && s.type === "image");
+  }, [config, segmentsFromElements]);
+  const getSource = (segment) => {
+    if (segment.source) return segment.source;
+    if (sources[segment.id]) return sources[segment.id];
+    const segmentAny = segment;
+    if (segmentAny.inputRef && sources[segmentAny.inputRef]) {
+      return sources[segmentAny.inputRef];
+    }
+    return void 0;
+  };
+  return /* @__PURE__ */ jsxs(AbsoluteFill, { style: { backgroundColor: "#000000" }, children: [
+    bgUrl && segmentsFromElements && /* @__PURE__ */ jsx3(
+      Img2,
+      {
+        src: bgUrl,
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: canvasWidth * scale,
+          height: canvasHeight * scale,
+          objectFit: bgFit
+        }
+      }
+    ),
+    legacyBackgroundSegment && !segmentsFromElements && /* @__PURE__ */ jsx3(
+      BackgroundImage,
+      {
+        segment: legacyBackgroundSegment,
+        src: getSource(legacyBackgroundSegment),
+        width: canvasWidth,
+        height: canvasHeight,
+        scale
+      }
+    ),
+    contentSegments.map((segment) => {
+      if (segment.type === "text") {
+        return /* @__PURE__ */ jsx3(
+          TextElement,
+          {
+            segment,
+            scale
+          },
+          segment.id
+        );
+      }
+      if (segment.type === "image") {
+        const src = segment.source || getSource(segment);
+        if (!src) {
+          console.warn(`No source found for image segment: ${segment.id}`);
+          return null;
+        }
+        return /* @__PURE__ */ jsx3(
+          ImageElement,
+          {
+            segment,
+            src,
+            scale
+          },
+          segment.id
+        );
+      }
+      return null;
+    })
+  ] });
+}
+function BackgroundImage({
+  segment,
+  src,
+  width,
+  height,
+  scale
+}) {
+  if (!src) {
+    return null;
+  }
+  const fit = segment.fit ?? "cover";
+  return /* @__PURE__ */ jsx3(
+    Img2,
+    {
+      src,
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: width * scale,
+        height: height * scale,
+        objectFit: fit
+      }
+    }
+  );
+}
+
+// src/compositions/VideoEditorComposition.tsx
+import { useMemo as useMemo5 } from "react";
+import { AbsoluteFill as AbsoluteFill2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2, Sequence, Audio } from "remotion";
+
+// src/components/VideoElement.tsx
+import { useMemo as useMemo4 } from "react";
+import { Video, useCurrentFrame, useVideoConfig } from "remotion";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function fitModeToCss2(fit) {
+  return fit;
+}
+function VideoElement({
+  segment,
+  src,
+  startFrame,
+  durationInFrames,
+  scale = 1
+}) {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const fit = segment.fit ?? VIDEO_DEFAULTS.fit;
+  const speed = segment.speed ?? VIDEO_DEFAULTS.speed;
+  const volume = (segment.volume ?? VIDEO_DEFAULTS.volume) / 100;
+  const opacity = (segment.opacity ?? VISUAL_DEFAULTS.opacity) / 100;
+  const rotation = segment.rotation ?? 0;
+  const borderRadius = segment.borderRadius;
+  const fadeIn = segment.fadeIn ?? 0;
+  const x = segment.xOffset * scale;
+  const y = segment.yOffset * scale;
+  const width = segment.width * scale;
+  const height = segment.height * scale;
+  const startFrom = (segment.startTrim ?? 0) / 1e3;
+  const fadeOpacity = useMemo4(() => {
+    if (fadeIn <= 0) return 1;
+    const framesFromStart = frame - startFrame;
+    const fadeInFrames = fadeIn / 1e3 * fps;
+    if (framesFromStart >= fadeInFrames) return 1;
+    if (framesFromStart <= 0) return 0;
+    return framesFromStart / fadeInFrames;
+  }, [frame, startFrame, fadeIn, fps]);
+  const borderRadiusStyle = useMemo4(() => {
+    if (!borderRadius) return void 0;
+    if (typeof borderRadius === "number") {
+      return `${borderRadius * scale}px`;
+    }
+    const radii = getBorderRadii(borderRadius);
+    if (!radii) return void 0;
+    return `${radii[0] * scale}px ${radii[1] * scale}px ${radii[2] * scale}px ${radii[3] * scale}px`;
+  }, [borderRadius, scale]);
+  const containerStyle = useMemo4(() => ({
+    position: "absolute",
+    left: x,
+    top: y,
+    width,
+    height,
+    transform: rotation !== 0 ? `rotate(${rotation}deg)` : void 0,
+    transformOrigin: "center center",
+    overflow: "hidden",
+    borderRadius: borderRadiusStyle,
+    opacity: opacity * fadeOpacity
+  }), [x, y, width, height, rotation, borderRadiusStyle, opacity, fadeOpacity]);
+  const videoStyle = useMemo4(() => ({
+    width: "100%",
+    height: "100%",
+    objectFit: fitModeToCss2(fit)
+  }), [fit]);
+  return /* @__PURE__ */ jsx4("div", { style: containerStyle, children: /* @__PURE__ */ jsx4(
+    Video,
+    {
+      src,
+      style: videoStyle,
+      startFrom,
+      playbackRate: speed,
+      volume
+    }
+  ) });
+}
+
+// src/compositions/VideoEditorComposition.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function calculateSegmentTimings(config, fps) {
+  const timings = [];
+  const timingsMap = /* @__PURE__ */ new Map();
+  for (const channel of config.channels) {
+    const sortedSegments = [...channel.segments].sort((a, b) => a.order - b.order);
+    const baseSegments = sortedSegments.filter((s) => !s.parentId);
+    const overlaySegments = sortedSegments.filter((s) => s.parentId);
+    let currentFrame = 0;
+    for (const segment of baseSegments) {
+      const offsetMs = segment.offset.type === "absolute" ? segment.offset.value : segment.offset.value * (currentFrame / fps * 1e3);
+      const offsetFrames = Math.round(offsetMs / 1e3 * fps);
+      const startFrame = currentFrame + offsetFrames;
+      let durationMs;
+      if (segment.duration) {
+        durationMs = segment.duration.type === "absolute" ? segment.duration.value : segment.duration.value * (config.duration ?? 1e4);
+      } else {
+        durationMs = (config.duration ?? 1e4) - startFrame / fps * 1e3;
+      }
+      const durationInFrames = Math.max(1, Math.round(durationMs / 1e3 * fps));
+      const endFrame = startFrame + durationInFrames;
+      const timing = {
+        segment,
+        startFrame,
+        endFrame,
+        durationInFrames
+      };
+      timings.push(timing);
+      timingsMap.set(segment.id, timing);
+      currentFrame = endFrame;
+    }
+    for (const segment of overlaySegments) {
+      const parentTiming = timingsMap.get(segment.parentId);
+      if (!parentTiming) {
+        console.warn(`Parent segment not found for overlay: ${segment.id}`);
+        continue;
+      }
+      const relativeStart = segment.relativeStart ?? 0;
+      const relativeEnd = segment.relativeEnd ?? 1;
+      const parentDurationFrames = parentTiming.durationInFrames;
+      const startFrame = parentTiming.startFrame + Math.round(parentDurationFrames * relativeStart);
+      const endFrame = parentTiming.startFrame + Math.round(parentDurationFrames * relativeEnd);
+      const durationInFrames = endFrame - startFrame;
+      const timing = {
+        segment,
+        startFrame,
+        endFrame,
+        durationInFrames
+      };
+      timings.push(timing);
+      timingsMap.set(segment.id, timing);
+    }
+  }
+  return timings;
+}
+function VideoEditorComposition({
+  config,
+  sources = {},
+  textContent = {}
+}) {
+  const frame = useCurrentFrame2();
+  const { fps, durationInFrames } = useVideoConfig2();
+  const segmentTimings = useMemo5(
+    () => calculateSegmentTimings(config, fps),
+    [config, fps]
+  );
+  const activeVisualSegments = useMemo5(() => {
+    return segmentTimings.filter(({ segment, startFrame, endFrame }) => {
+      if (segment.type !== "video" && segment.type !== "image" && segment.type !== "text") {
+        return false;
+      }
+      return frame >= startFrame && frame < endFrame;
+    }).sort((a, b) => {
+      const aZ = a.segment.zIndex ?? 0;
+      const bZ = b.segment.zIndex ?? 0;
+      return aZ - bZ;
+    });
+  }, [segmentTimings, frame]);
+  const getSource = (segment) => {
+    if (segment.source) {
+      return segment.source;
+    }
+    if (sources[segment.id]) {
+      return sources[segment.id];
+    }
+    const segmentAny = segment;
+    if (segmentAny.inputRef && sources[segmentAny.inputRef]) {
+      return sources[segmentAny.inputRef];
+    }
+    return void 0;
+  };
+  const getTextContent = (segment) => {
+    if (textContent[segment.id]) {
+      return textContent[segment.id];
+    }
+    const segmentAny = segment;
+    if (segmentAny.textInputRef && textContent[segmentAny.textInputRef]) {
+      return textContent[segmentAny.textInputRef];
+    }
+    return segment.text ?? "";
+  };
+  const audioTimings = useMemo5(() => {
+    return segmentTimings.filter(({ segment }) => segment.type === "audio");
+  }, [segmentTimings]);
+  return /* @__PURE__ */ jsxs2(AbsoluteFill2, { style: { backgroundColor: "#000000" }, children: [
+    activeVisualSegments.map(({ segment, startFrame, durationInFrames: durationInFrames2 }) => {
+      if (segment.type === "text") {
+        const textSegment = segment;
+        const text = getTextContent(textSegment);
+        return /* @__PURE__ */ jsx5(
+          TextElement,
+          {
+            segment: { ...textSegment, text },
+            scale: 1
+          },
+          segment.id
+        );
+      }
+      if (segment.type === "image") {
+        const src = getSource(segment);
+        if (!src) {
+          console.warn(`No source found for image segment: ${segment.id}`);
+          return null;
+        }
+        return /* @__PURE__ */ jsx5(
+          ImageElement,
+          {
+            segment,
+            src,
+            scale: 1
+          },
+          segment.id
+        );
+      }
+      if (segment.type === "video") {
+        const src = getSource(segment);
+        if (!src) {
+          console.warn(`No source found for video segment: ${segment.id}`);
+          return null;
+        }
+        return /* @__PURE__ */ jsx5(
+          VideoElement,
+          {
+            segment,
+            src,
+            startFrame,
+            durationInFrames: durationInFrames2,
+            scale: 1
+          },
+          segment.id
+        );
+      }
+      return null;
+    }),
+    audioTimings.map(({ segment, startFrame, durationInFrames: durationInFrames2 }) => {
+      const audioSegment = segment;
+      const src = getSource(segment);
+      if (!src) {
+        console.warn(`No source found for audio segment: ${segment.id}`);
+        return null;
+      }
+      const volume = (audioSegment.volume ?? 100) / 100;
+      const startFromSeconds = (audioSegment.startTrim ?? 0) / 1e3;
+      return /* @__PURE__ */ jsx5(
+        Sequence,
+        {
+          from: startFrame,
+          durationInFrames: durationInFrames2,
+          children: /* @__PURE__ */ jsx5(
+            Audio,
+            {
+              src,
+              volume,
+              startFrom: startFromSeconds
+            }
+          )
+        },
+        segment.id
+      );
+    })
+  ] });
+}
+
+// src/utils/fit.ts
+function calculateFitDimensions({
+  sourceWidth,
+  sourceHeight,
+  targetWidth,
+  targetHeight,
+  fit
+}) {
+  if (fit === "fill") {
+    return {
+      x: 0,
+      y: 0,
+      width: targetWidth,
+      height: targetHeight,
+      sourceX: 0,
+      sourceY: 0,
+      sourceWidth,
+      sourceHeight
+    };
+  }
+  const sourceRatio = sourceWidth / sourceHeight;
+  const targetRatio = targetWidth / targetHeight;
+  let width = targetWidth;
+  let height = targetHeight;
+  let x = 0;
+  let y = 0;
+  let sourceX = 0;
+  let sourceY = 0;
+  let croppedSourceWidth = sourceWidth;
+  let croppedSourceHeight = sourceHeight;
+  if (fit === "contain") {
+    if (sourceRatio > targetRatio) {
+      height = targetWidth / sourceRatio;
+      y = (targetHeight - height) / 2;
+    } else {
+      width = targetHeight * sourceRatio;
+      x = (targetWidth - width) / 2;
+    }
+  } else if (fit === "cover") {
+    if (sourceRatio > targetRatio) {
+      croppedSourceWidth = sourceHeight * targetRatio;
+      sourceX = (sourceWidth - croppedSourceWidth) / 2;
+    } else {
+      croppedSourceHeight = sourceWidth / targetRatio;
+      sourceY = (sourceHeight - croppedSourceHeight) / 2;
+    }
+  }
+  return {
+    x,
+    y,
+    width,
+    height,
+    sourceX,
+    sourceY,
+    sourceWidth: croppedSourceWidth,
+    sourceHeight: croppedSourceHeight
+  };
+}
+
+// src/hooks/index.ts
+import { useEffect, useState, useMemo as useMemo6 } from "react";
+function useFontsLoaded() {
+  const [loaded, setLoaded] = useState(areFontsLoaded());
+  useEffect(() => {
+    if (!loaded) {
+      preloadFonts().then(() => setLoaded(true)).catch(console.error);
+    }
+  }, [loaded]);
+  return loaded;
+}
+function useImageLoader(src) {
+  const [image, setImage] = useState(null);
+  useEffect(() => {
+    if (!src) {
+      setImage(null);
+      return;
+    }
+    const img = new Image();
+    img.onload = () => setImage(img);
+    img.onerror = () => {
+      console.error(`Failed to load image: ${src}`);
+      setImage(null);
+    };
+    img.src = src;
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+  }, [src]);
+  return image;
+}
+function useImagePreloader(sources) {
+  const [images, setImages] = useState({});
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    const entries = Object.entries(sources);
+    if (entries.length === 0) {
+      setLoaded(true);
+      return;
+    }
+    let cancelled = false;
+    const loadedImages = {};
+    let loadedCount = 0;
+    entries.forEach(([key, src]) => {
+      const img = new Image();
+      img.onload = () => {
+        if (cancelled) return;
+        loadedImages[key] = img;
+        loadedCount++;
+        if (loadedCount === entries.length) {
+          setImages(loadedImages);
+          setLoaded(true);
+        }
+      };
+      img.onerror = () => {
+        if (cancelled) return;
+        console.error(`Failed to load image: ${src}`);
+        loadedCount++;
+        if (loadedCount === entries.length) {
+          setImages(loadedImages);
+          setLoaded(true);
+        }
+      };
+      img.src = src;
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [sources]);
+  return { loaded, images };
+}
+function useResolvedPositions(elements, textValues) {
+  return useMemo6(() => {
+    if (elements.length === 0) {
+      return { elements: [], errors: [] };
+    }
+    return resolveElementPositions(elements, textValues);
+  }, [elements, textValues]);
+}
+
+// src/Root.tsx
+import { Composition } from "remotion";
+import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var defaultImageProps = {
+  config: {
+    width: 1080,
+    height: 1920,
+    fps: 1,
+    channels: []
+  },
+  sources: {},
+  scale: 1
+};
+var defaultVideoProps = {
+  config: {
+    width: 1080,
+    height: 1920,
+    fps: 30,
+    duration: 5e3,
+    channels: []
+  },
+  sources: {},
+  scale: 1
+};
+var ImageComp = ImageEditorComposition;
+var VideoComp = VideoEditorComposition;
+var RemotionRoot = () => {
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx6(
+      Composition,
+      {
+        id: "ImageEditorComposition",
+        component: ImageComp,
+        durationInFrames: 1,
+        fps: 1,
+        width: 1080,
+        height: 1920,
+        defaultProps: defaultImageProps
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      Composition,
+      {
+        id: "VideoEditorComposition",
+        component: VideoComp,
+        durationInFrames: 150,
+        fps: 30,
+        width: 1080,
+        height: 1920,
+        defaultProps: defaultVideoProps
+      }
+    )
+  ] });
+};
+export {
+  DIMENSION_PRESETS,
+  FONT_FAMILIES,
+  FONT_URLS,
+  IMAGE_DEFAULTS,
+  ImageEditorComposition,
+  ImageElement,
+  RemotionRoot,
+  TEXT_DEFAULTS,
+  TextElement,
+  VIDEO_DEFAULTS,
+  VISUAL_DEFAULTS,
+  VideoEditorComposition,
+  VideoElement,
+  applyImageDefaults,
+  applyTextDefaults,
+  applyVideoDefaults,
+  areFontsLoaded,
+  buildFontString,
+  calculateAutoWidthDimensions,
+  calculateFitDimensions,
+  calculateLineWidth,
+  canSetAsReference,
+  getBorderRadii,
+  getDependentElements,
+  getFontFamily,
+  getReferenceElementX,
+  getReferenceElementY,
+  hexToRgba,
+  parseHexColor,
+  preloadFonts,
+  resolveElementPositions,
+  useFontsLoaded,
+  useImageLoader,
+  useImagePreloader,
+  useResolvedPositions,
+  wrapText
+};