ugcinc-render 1.8.1 → 1.8.2

package/dist/index.mjs

@@ -1,3 +1,51 @@
+import {
+  APPLE_EMOJI_FONT,
+  CAPTION_PRESETS,
+  DEFAULT_CAPTION_STYLE,
+  FONT_FAMILIES,
+  FONT_URLS,
+  IMAGE_DEFAULTS,
+  TEXT_DEFAULTS,
+  VIDEO_DEFAULTS,
+  VISUAL_DEFAULTS,
+  applyImageDefaults,
+  applyTextDefaults,
+  applyVideoDefaults,
+  areFontsLoaded,
+  buildFontString,
+  calculateAutoWidthDimensions,
+  calculateCropBounds,
+  calculateEstimatedDuration,
+  calculateFitDimensions,
+  calculateLineWidth,
+  calculateTimelineContentEnd,
+  canSetAsReference,
+  debugFontStatus,
+  defaultOffset,
+  formatTime,
+  generateOverlayId,
+  generateSegmentId,
+  getBaseSegments,
+  getBorderRadii,
+  getCaptionPresetNames,
+  getDependentElements,
+  getFontFamily,
+  getOverlays,
+  getReferenceElementX,
+  getReferenceElementY,
+  getSegmentTimelinePosition,
+  hexToRgba,
+  isDynamicCropEnabled,
+  isSegmentVisibleAtTime,
+  isValidCaptionPreset,
+  parseHexColor,
+  parseTime,
+  preloadFonts,
+  resolveCaptionStyle,
+  resolveElementPositions,
+  wrapText
+} from "./chunk-6DSZRTLA.mjs";
+
 // src/types/element.ts
 var DIMENSION_PRESETS = {
   "tiktok": { width: 1080, height: 1920, label: "TikTok/Reels (1080\xD71920)", ratio: "9:16" },
@@ -191,296 +239,6 @@ import { AbsoluteFill, Img as Img2, delayRender, continueRender } from "remotion
 
 // src/components/TextElement.tsx
 import React, { 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 APPLE_EMOJI_FONT = '"Apple Color Emoji"';
-var FONT_FAMILIES = {
-  tiktok: `"TikTok Sans", ${APPLE_EMOJI_FONT}, sans-serif`,
-  apple: `"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, ${APPLE_EMOJI_FONT}, sans-serif`,
-  arial: `Arial, ${APPLE_EMOJI_FONT}, 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"
-  },
-  emoji: {
-    apple: "/AppleColorEmoji.ttf"
-  }
-};
-async function preloadFonts() {
-  console.log("[ugcinc-render/fonts] preloadFonts() called");
-  if (typeof document !== "undefined") {
-    console.log("[ugcinc-render/fonts] Browser environment detected, loading fonts...");
-    const fontResults = [];
-    try {
-      const tiktokRegular = new FontFace(
-        "TikTok Sans",
-        `url(${FONT_URLS.tiktok.regular})`,
-        { weight: "normal" }
-      );
-      console.log(`[ugcinc-render/fonts] Loading TikTok Sans Regular from: ${FONT_URLS.tiktok.regular}`);
-      await tiktokRegular.load();
-      document.fonts.add(tiktokRegular);
-      fontResults.push({ name: "TikTok Sans Regular", status: "success" });
-    } catch (err) {
-      const errorMsg = err instanceof Error ? err.message : String(err);
-      console.error(`[ugcinc-render/fonts] Failed to load TikTok Sans Regular:`, errorMsg);
-      fontResults.push({ name: "TikTok Sans Regular", status: "error", error: errorMsg });
-    }
-    try {
-      const tiktokBold = new FontFace(
-        "TikTok Sans",
-        `url(${FONT_URLS.tiktok.bold})`,
-        { weight: "bold" }
-      );
-      console.log(`[ugcinc-render/fonts] Loading TikTok Sans Bold from: ${FONT_URLS.tiktok.bold}`);
-      await tiktokBold.load();
-      document.fonts.add(tiktokBold);
-      fontResults.push({ name: "TikTok Sans Bold", status: "success" });
-    } catch (err) {
-      const errorMsg = err instanceof Error ? err.message : String(err);
-      console.error(`[ugcinc-render/fonts] Failed to load TikTok Sans Bold:`, errorMsg);
-      fontResults.push({ name: "TikTok Sans Bold", status: "error", error: errorMsg });
-    }
-    try {
-      const sfPro = new FontFace(
-        "SF Pro",
-        `url(${FONT_URLS.apple.regular})`,
-        { weight: "normal" }
-      );
-      console.log(`[ugcinc-render/fonts] Loading SF Pro from: ${FONT_URLS.apple.regular}`);
-      await sfPro.load();
-      document.fonts.add(sfPro);
-      fontResults.push({ name: "SF Pro", status: "success" });
-    } catch (err) {
-      const errorMsg = err instanceof Error ? err.message : String(err);
-      console.error(`[ugcinc-render/fonts] Failed to load SF Pro:`, errorMsg);
-      fontResults.push({ name: "SF Pro", status: "error", error: errorMsg });
-    }
-    try {
-      const appleEmoji = new FontFace(
-        "Apple Color Emoji",
-        `url(${FONT_URLS.emoji.apple})`,
-        { weight: "normal" }
-      );
-      console.log(`[ugcinc-render/fonts] Loading Apple Color Emoji from: ${FONT_URLS.emoji.apple}`);
-      await appleEmoji.load();
-      document.fonts.add(appleEmoji);
-      fontResults.push({ name: "Apple Color Emoji", status: "success" });
-    } catch (err) {
-      const errorMsg = err instanceof Error ? err.message : String(err);
-      console.error(`[ugcinc-render/fonts] Failed to load Apple Color Emoji:`, errorMsg);
-      fontResults.push({ name: "Apple Color Emoji", status: "error", error: errorMsg });
-    }
-    console.log("[ugcinc-render/fonts] Font loading complete. Results:", fontResults);
-    const availableFonts = [];
-    document.fonts.forEach((font) => {
-      availableFonts.push(`${font.family} (${font.weight}, ${font.status})`);
-    });
-    console.log("[ugcinc-render/fonts] Available fonts in document:", availableFonts);
-  } else {
-    console.log("[ugcinc-render/fonts] Not in browser environment, skipping font loading");
-  }
-}
-function areFontsLoaded() {
-  if (typeof document === "undefined") {
-    console.log("[ugcinc-render/fonts] areFontsLoaded: Not in browser environment");
-    return false;
-  }
-  const tiktokRegular = document.fonts.check('normal 16px "TikTok Sans"');
-  const tiktokBold = document.fonts.check('bold 16px "TikTok Sans"');
-  const sfPro = document.fonts.check('normal 16px "SF Pro"');
-  const appleEmoji = document.fonts.check('normal 16px "Apple Color Emoji"');
-  console.log("[ugcinc-render/fonts] areFontsLoaded check:", {
-    tiktokRegular,
-    tiktokBold,
-    sfPro,
-    appleEmoji
-  });
-  return tiktokRegular && tiktokBold && sfPro && appleEmoji;
-}
-function debugFontStatus() {
-  console.log("[ugcinc-render/fonts] === FONT DEBUG STATUS ===");
-  if (typeof document === "undefined") {
-    console.log("[ugcinc-render/fonts] Not in browser environment");
-    return;
-  }
-  console.log("[ugcinc-render/fonts] Font checks:");
-  console.log("  - TikTok Sans (normal):", document.fonts.check('normal 16px "TikTok Sans"'));
-  console.log("  - TikTok Sans (bold):", document.fonts.check('bold 16px "TikTok Sans"'));
-  console.log("  - SF Pro:", document.fonts.check('normal 16px "SF Pro"'));
-  console.log("  - Apple Color Emoji:", document.fonts.check('normal 16px "Apple Color Emoji"'));
-  console.log("[ugcinc-render/fonts] All fonts in document.fonts:");
-  document.fonts.forEach((font) => {
-    console.log(`  - ${font.family}: weight=${font.weight}, style=${font.style}, status=${font.status}`);
-  });
-  console.log("[ugcinc-render/fonts] Font family stacks:");
-  console.log("  - tiktok:", FONT_FAMILIES.tiktok);
-  console.log("  - apple:", FONT_FAMILIES.apple);
-  console.log("  - arial:", FONT_FAMILIES.arial);
-  console.log("[ugcinc-render/fonts] === END FONT DEBUG ===");
-}
-
-// 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, jsxs } from "react/jsx-runtime";
 function calculateAutoWidthAndLines({
   text,
@@ -864,524 +622,6 @@ function ImageElement({ segment, src, startFrame = 0, scale = 1 }) {
   ) });
 }
 
-// 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") {
-    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 paddingTop = elem.paddingTop ?? 0;
-  const paddingBottom = elem.paddingBottom ?? 0;
-  const letterSpacing = elem.letterSpacing ?? 0;
-  const lineHeight = elem.lineHeight ?? 1.2;
-  const maxWidth = elem.width;
-  const boxAlign = elem.boxAlign ?? "left";
-  const autoWidth = elem.autoWidth ?? false;
-  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);
-  if (lines.length === 0) lines.push("");
-  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 = autoWidth ? Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth) : maxWidth;
-  const textHeight = lines.length * fontSize * lineHeight;
-  const actualHeight = textHeight + paddingTop + paddingBottom;
-  let actualX;
-  if (autoWidth) {
-    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;
-    }
-  } else {
-    actualX = elem.x;
-  }
-  return { actualWidth, actualX, actualHeight, lineCount: lines.length };
-}
-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, actualWidth) {
-  const width = actualWidth ?? element.width;
-  switch (selfAnchor) {
-    case "left":
-      return 0;
-    case "center":
-      return width / 2;
-    case "right":
-      return width;
-    default:
-      return 0;
-  }
-}
-function getSelfAnchorOffsetY(element, selfAnchor, actualHeight) {
-  const height = actualHeight ?? element.height;
-  switch (selfAnchor) {
-    case "top":
-      return 0;
-    case "middle":
-      return height / 2;
-    case "bottom":
-      return height;
-    default:
-      return 0;
-  }
-}
-function calculateAbsoluteX(element, referenceElement, anchor, selfAnchor, offset, actualWidth) {
-  const refX = anchor === "left" ? referenceElement.x : referenceElement.x + referenceElement.width;
-  const selfOffset = getSelfAnchorOffsetX(element, selfAnchor, actualWidth);
-  return refX + offset - selfOffset;
-}
-function calculateAbsoluteY(element, referenceElement, anchor, selfAnchor, offset, actualHeight) {
-  const refY = anchor === "top" ? referenceElement.y : referenceElement.y + referenceElement.height;
-  const selfOffset = getSelfAnchorOffsetY(element, selfAnchor, actualHeight);
-  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") {
-      const textContent = getTextContent(elem);
-      const autoResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
-      if (autoResult) {
-        if (elem.autoWidth) {
-          referenceX.set(elem.id, { x: autoResult.actualX, width: autoResult.actualWidth });
-        } else {
-          referenceX.set(elem.id, { x: elem.x, width: elem.width });
-        }
-        referenceY.set(elem.id, { y: elem.y, height: autoResult.actualHeight });
-      } else {
-        referenceX.set(elem.id, { x: elem.x, width: elem.width });
-        referenceY.set(elem.id, { y: elem.y, height: elem.height });
-      }
-    } 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;
-        let actualWidth;
-        let autoResult = null;
-        if (elem.type === "text") {
-          const textContent = getTextContent(elem);
-          autoResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
-          if (autoResult && elem.autoWidth) {
-            actualWidth = autoResult.actualWidth;
-          }
-        }
-        const newX = calculateAbsoluteX(
-          elem,
-          refPosition,
-          elem.relativePositionX.anchor,
-          selfAnchor,
-          elem.relativePositionX.offset,
-          actualWidth
-          // Use actual width for self anchor calculation
-        );
-        resolvedX.set(elem.id, { x: newX, width: elem.width });
-        if (autoResult) {
-          if (elem.autoWidth) {
-            const updatedResult = calculateAutoWidthDimensions({ ...elem, x: newX }, getTextContent(elem), measureCtx);
-            if (updatedResult) {
-              referenceX.set(elem.id, { x: updatedResult.actualX, width: updatedResult.actualWidth });
-              referenceY.set(elem.id, { y: referenceY.get(elem.id)?.y ?? elem.y, height: updatedResult.actualHeight });
-            } else {
-              referenceX.set(elem.id, { x: newX, width: elem.width });
-            }
-          } else {
-            referenceX.set(elem.id, { x: newX, width: elem.width });
-            referenceY.set(elem.id, { y: referenceY.get(elem.id)?.y ?? elem.y, height: autoResult.actualHeight });
-          }
-        } 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;
-        let actualHeight;
-        if (elem.type === "text") {
-          const textContent = getTextContent(elem);
-          const autoResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
-          if (autoResult) {
-            actualHeight = autoResult.actualHeight;
-          }
-        }
-        const newY = calculateAbsoluteY(
-          elem,
-          refPosition,
-          elem.relativePositionY.anchor,
-          selfAnchor,
-          elem.relativePositionY.offset,
-          actualHeight
-          // Use actual height for self anchor calculation
-        );
-        resolvedY.set(elem.id, { y: newY, height: elem.height });
-        if (actualHeight !== void 0) {
-          referenceY.set(elem.id, { y: newY, height: actualHeight });
-        } else {
-          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/utils/cropBounds.ts
-function getActualElementHeight(elem, textValues, measureCtx) {
-  if (elem.type !== "text") return elem.height;
-  let textContent = elem.text ?? "Text";
-  if (elem.textInputId && textValues?.[elem.textInputId]) {
-    textContent = textValues[elem.textInputId];
-  }
-  const result = calculateAutoWidthDimensions(elem, textContent, measureCtx);
-  return result?.actualHeight ?? elem.height;
-}
-function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight, textValues) {
-  if (!dynamicCrop) {
-    return { x: 0, y: 0, width: canvasWidth, height: canvasHeight };
-  }
-  const elementMap = /* @__PURE__ */ new Map();
-  for (const elem of elements) {
-    elementMap.set(elem.id, elem);
-  }
-  const resolveBoundary = (boundary) => {
-    if (!boundary) return void 0;
-    if (boundary.elementId) return boundary.elementId;
-    return void 0;
-  };
-  let measureCtx = null;
-  const hasTextElements = elements.some((e) => e.type === "text");
-  if (hasTextElements && typeof document !== "undefined") {
-    const canvas = document.createElement("canvas");
-    measureCtx = canvas.getContext("2d");
-  }
-  let cropY = 0;
-  let cropHeight = canvasHeight;
-  if (dynamicCrop.vertical?.enabled) {
-    const vCrop = dynamicCrop.vertical;
-    const paddingStart = vCrop.paddingStart ?? 0;
-    const paddingEnd = vCrop.paddingEnd ?? 0;
-    if (vCrop.mode === "all-elements") {
-      let minY = canvasHeight;
-      let maxY = 0;
-      for (const elem of elements) {
-        const actualHeight = getActualElementHeight(elem, textValues, measureCtx);
-        minY = Math.min(minY, elem.y);
-        maxY = Math.max(maxY, elem.y + actualHeight);
-      }
-      if (elements.length > 0) {
-        cropY = Math.max(0, minY - paddingStart);
-        const bottomY = Math.min(canvasHeight, maxY + paddingEnd);
-        cropHeight = bottomY - cropY;
-      }
-    } else if (vCrop.mode === "between-elements") {
-      const startElementId = resolveBoundary(vCrop.startBoundary);
-      const endElementId = resolveBoundary(vCrop.endBoundary);
-      let topY = 0;
-      let bottomY = canvasHeight;
-      if (startElementId) {
-        const startElem = elementMap.get(startElementId);
-        if (startElem) {
-          topY = startElem.y;
-        }
-      }
-      if (endElementId) {
-        const endElem = elementMap.get(endElementId);
-        if (endElem) {
-          const actualHeight = getActualElementHeight(endElem, textValues, measureCtx);
-          bottomY = endElem.y + actualHeight;
-        }
-      }
-      cropY = Math.max(0, topY - paddingStart);
-      const adjustedBottom = Math.min(canvasHeight, bottomY + paddingEnd);
-      cropHeight = adjustedBottom - cropY;
-    }
-    if (vCrop.minSize && cropHeight < vCrop.minSize) {
-      cropHeight = vCrop.minSize;
-    }
-  }
-  let cropX = 0;
-  let cropWidth = canvasWidth;
-  if (dynamicCrop.horizontal?.enabled) {
-    const hCrop = dynamicCrop.horizontal;
-    const paddingStart = hCrop.paddingStart ?? 0;
-    const paddingEnd = hCrop.paddingEnd ?? 0;
-    if (hCrop.mode === "all-elements") {
-      let minX = canvasWidth;
-      let maxX = 0;
-      for (const elem of elements) {
-        minX = Math.min(minX, elem.x);
-        maxX = Math.max(maxX, elem.x + elem.width);
-      }
-      if (elements.length > 0) {
-        cropX = Math.max(0, minX - paddingStart);
-        const rightX = Math.min(canvasWidth, maxX + paddingEnd);
-        cropWidth = rightX - cropX;
-      }
-    } else if (hCrop.mode === "between-elements") {
-      const startElementId = resolveBoundary(hCrop.startBoundary);
-      const endElementId = resolveBoundary(hCrop.endBoundary);
-      let leftX = 0;
-      let rightX = canvasWidth;
-      if (startElementId) {
-        const startElem = elementMap.get(startElementId);
-        if (startElem) {
-          leftX = startElem.x;
-        }
-      }
-      if (endElementId) {
-        const endElem = elementMap.get(endElementId);
-        if (endElem) {
-          rightX = endElem.x + endElem.width;
-        }
-      }
-      cropX = Math.max(0, leftX - paddingStart);
-      const adjustedRight = Math.min(canvasWidth, rightX + paddingEnd);
-      cropWidth = adjustedRight - cropX;
-    }
-    if (hCrop.minSize && cropWidth < hCrop.minSize) {
-      cropWidth = hCrop.minSize;
-    }
-  }
-  return { x: cropX, y: cropY, width: cropWidth, height: cropHeight };
-}
-function isDynamicCropEnabled(dynamicCrop) {
-  if (!dynamicCrop) return false;
-  return !!(dynamicCrop.vertical?.enabled || dynamicCrop.horizontal?.enabled);
-}
-
 // src/compositions/ImageEditorComposition.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function getSortedSegments(config) {
@@ -2145,289 +1385,6 @@ function AutoCaptionCompositionWithVideo({
   ] });
 }
 
-// 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/utils/timeline.ts
-function defaultOffset(mode = "flexible") {
-  return mode === "flexible" ? { type: "relative", value: 0 } : { type: "absolute", value: 0 };
-}
-function getBaseSegments(channel) {
-  return channel.segments.filter((s) => s.parentId === void 0);
-}
-function getOverlays(channel, parentId) {
-  return channel.segments.filter((s) => s.parentId === (parentId ?? void 0));
-}
-function getSegmentTimelinePosition(segment, baseSegments, channel) {
-  if (segment.parentId) {
-    const parent = channel.segments.find((s) => s.id === segment.parentId);
-    if (parent) {
-      const parentPos = getSegmentTimelinePosition(parent, baseSegments, channel);
-      const relStart = segment.relativeStart ?? 0;
-      const relEnd = segment.relativeEnd ?? 1;
-      return {
-        startMs: parentPos.startMs + parentPos.durationMs * relStart,
-        durationMs: parentPos.durationMs * (relEnd - relStart)
-      };
-    }
-  }
-  const baseIndex = baseSegments.findIndex((s) => s.id === segment.id);
-  let accumulatedTime = 0;
-  for (let i = 0; i < baseIndex; i++) {
-    const prev = baseSegments[i];
-    if (prev) {
-      accumulatedTime += prev.duration?.type === "absolute" ? prev.duration.value : 5e3;
-    }
-  }
-  const startMs = segment.offset.type === "absolute" ? segment.offset.value : accumulatedTime;
-  const durationMs = segment.duration?.type === "absolute" ? segment.duration.value : 5e3;
-  return { startMs, durationMs };
-}
-function isSegmentVisibleAtTime(segment, time, channel) {
-  const baseSegments = getBaseSegments(channel);
-  const { startMs, durationMs } = getSegmentTimelinePosition(segment, baseSegments, channel);
-  const endMs = startMs + durationMs;
-  return time >= startMs && time < endMs;
-}
-function calculateEstimatedDuration(channels) {
-  let maxDuration = 5e3;
-  for (const channel of channels) {
-    let channelTime = 0;
-    for (const segment of channel.segments) {
-      if (segment.parentId) continue;
-      if (segment.offset.type === "absolute") {
-        channelTime = segment.offset.value;
-      } else {
-        channelTime += 5e3;
-      }
-      if (segment.duration?.type === "absolute") {
-        channelTime += segment.duration.value;
-      } else {
-        channelTime += 5e3;
-      }
-    }
-    maxDuration = Math.max(maxDuration, channelTime);
-  }
-  return maxDuration;
-}
-function calculateTimelineContentEnd(channel) {
-  const baseSegments = getBaseSegments(channel);
-  let lastEnd = 0;
-  for (const segment of baseSegments) {
-    const { startMs, durationMs } = getSegmentTimelinePosition(segment, baseSegments, channel);
-    lastEnd = Math.max(lastEnd, startMs + durationMs);
-  }
-  return Math.ceil((lastEnd + 2e3) / 1e3) * 1e3;
-}
-function formatTime(ms) {
-  const totalSeconds = Math.floor(ms / 1e3);
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
-  const milliseconds = Math.floor(ms % 1e3 / 10);
-  return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}.${milliseconds.toString().padStart(2, "0")}`;
-}
-function parseTime(timeStr) {
-  const parts = timeStr.split(":");
-  if (parts.length !== 2) return 0;
-  const [minStr, secPart] = parts;
-  const minutes = parseInt(minStr ?? "0", 10) || 0;
-  const secParts = (secPart ?? "0").split(".");
-  const seconds = parseInt(secParts[0] ?? "0", 10) || 0;
-  const ms = parseInt((secParts[1] ?? "0").padEnd(2, "0").slice(0, 2), 10) * 10 || 0;
-  return (minutes * 60 + seconds) * 1e3 + ms;
-}
-function generateSegmentId() {
-  return `segment-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
-}
-function generateOverlayId() {
-  return `overlay-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
-}
-
-// src/utils/captionPresets.ts
-var CAPTION_PRESETS = {
-  /**
-   * Hormozi style - bold, attention-grabbing captions
-   * Yellow highlight on white text with thick black stroke
-   */
-  hormozi: {
-    fontName: "Montserrat",
-    fontSize: 80,
-    fontWeight: "black",
-    fontColor: "#FFFFFF",
-    highlightColor: "#FFFF00",
-    strokeColor: "#000000",
-    strokeWidth: 3,
-    position: "bottom",
-    yOffset: 100,
-    maxWidth: 90,
-    enableAnimation: true,
-    wordsPerPage: 3
-  },
-  /**
-   * Minimal style - clean and understated
-   * White on white (no highlight distinction), smaller text
-   */
-  minimal: {
-    fontName: "Inter",
-    fontSize: 60,
-    fontWeight: "bold",
-    fontColor: "#FFFFFF",
-    highlightColor: "#FFFFFF",
-    strokeColor: "#000000",
-    strokeWidth: 2,
-    position: "bottom",
-    yOffset: 80,
-    maxWidth: 85,
-    enableAnimation: false,
-    wordsPerPage: 5
-  },
-  /**
-   * Bold Pop style - maximum impact, one word at a time
-   * Yellow text with red highlight, centered position
-   */
-  "bold-pop": {
-    fontName: "Bangers",
-    fontSize: 90,
-    fontWeight: "bold",
-    fontColor: "#FFFF00",
-    highlightColor: "#FF0000",
-    strokeColor: "#000000",
-    strokeWidth: 4,
-    position: "center",
-    yOffset: 0,
-    maxWidth: 80,
-    enableAnimation: true,
-    wordsPerPage: 2
-  },
-  /**
-   * Clean style - professional look with background
-   * White text with blue highlight, semi-transparent background
-   */
-  clean: {
-    fontName: "Roboto",
-    fontSize: 55,
-    fontWeight: "normal",
-    fontColor: "#FFFFFF",
-    highlightColor: "#3B82F6",
-    strokeColor: "#000000",
-    strokeWidth: 0,
-    backgroundColor: "#000000",
-    backgroundOpacity: 0.7,
-    backgroundBorderRadius: 8,
-    position: "bottom",
-    yOffset: 80,
-    maxWidth: 90,
-    enableAnimation: false,
-    wordsPerPage: 6
-  },
-  /**
-   * Neon style - vibrant, eye-catching colors
-   * Cyan text with magenta highlight
-   */
-  neon: {
-    fontName: "Poppins",
-    fontSize: 70,
-    fontWeight: "bold",
-    fontColor: "#00FFFF",
-    highlightColor: "#FF00FF",
-    strokeColor: "#000000",
-    strokeWidth: 3,
-    position: "bottom",
-    yOffset: 100,
-    maxWidth: 85,
-    enableAnimation: true,
-    wordsPerPage: 3
-  }
-};
-var DEFAULT_CAPTION_STYLE = CAPTION_PRESETS.hormozi;
-function resolveCaptionStyle(style) {
-  if (!style) {
-    return { ...DEFAULT_CAPTION_STYLE };
-  }
-  const presetValues = style.preset ? CAPTION_PRESETS[style.preset] : {};
-  const defaults = DEFAULT_CAPTION_STYLE;
-  return {
-    preset: style.preset,
-    fontName: style.fontName ?? presetValues.fontName ?? defaults.fontName,
-    fontSize: style.fontSize ?? presetValues.fontSize ?? defaults.fontSize,
-    fontWeight: style.fontWeight ?? presetValues.fontWeight ?? defaults.fontWeight,
-    fontColor: style.fontColor ?? presetValues.fontColor ?? defaults.fontColor,
-    highlightColor: style.highlightColor ?? presetValues.highlightColor ?? defaults.highlightColor,
-    strokeColor: style.strokeColor ?? presetValues.strokeColor ?? defaults.strokeColor,
-    strokeWidth: style.strokeWidth ?? presetValues.strokeWidth ?? defaults.strokeWidth,
-    backgroundColor: style.backgroundColor ?? presetValues.backgroundColor,
-    backgroundOpacity: style.backgroundOpacity ?? presetValues.backgroundOpacity,
-    backgroundBorderRadius: style.backgroundBorderRadius ?? presetValues.backgroundBorderRadius,
-    position: style.position ?? presetValues.position ?? defaults.position,
-    yOffset: style.yOffset ?? presetValues.yOffset ?? defaults.yOffset,
-    maxWidth: style.maxWidth ?? presetValues.maxWidth ?? defaults.maxWidth,
-    enableAnimation: style.enableAnimation ?? presetValues.enableAnimation ?? defaults.enableAnimation,
-    wordsPerPage: style.wordsPerPage ?? presetValues.wordsPerPage ?? defaults.wordsPerPage
-  };
-}
-function getCaptionPresetNames() {
-  return Object.keys(CAPTION_PRESETS);
-}
-function isValidCaptionPreset(name) {
-  return name in CAPTION_PRESETS;
-}
-
 // src/hooks/index.ts
 import { useEffect as useEffect2, useState as useState2, useMemo as useMemo7 } from "react";
 function useFontsLoaded() {