ugcinc-render 1.8.0 → 1.8.2

package/dist/chunk-6DSZRTLA.mjs

@@ -0,0 +1,1136 @@
+// 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/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/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/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/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/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;
+}
+
+export {
+  TEXT_DEFAULTS,
+  IMAGE_DEFAULTS,
+  VIDEO_DEFAULTS,
+  VISUAL_DEFAULTS,
+  applyTextDefaults,
+  applyImageDefaults,
+  applyVideoDefaults,
+  APPLE_EMOJI_FONT,
+  FONT_FAMILIES,
+  getFontFamily,
+  buildFontString,
+  FONT_URLS,
+  preloadFonts,
+  areFontsLoaded,
+  debugFontStatus,
+  wrapText,
+  calculateLineWidth,
+  getBorderRadii,
+  parseHexColor,
+  hexToRgba,
+  calculateAutoWidthDimensions,
+  resolveElementPositions,
+  canSetAsReference,
+  getDependentElements,
+  getReferenceElementX,
+  getReferenceElementY,
+  calculateCropBounds,
+  isDynamicCropEnabled,
+  calculateFitDimensions,
+  defaultOffset,
+  getBaseSegments,
+  getOverlays,
+  getSegmentTimelinePosition,
+  isSegmentVisibleAtTime,
+  calculateEstimatedDuration,
+  calculateTimelineContentEnd,
+  formatTime,
+  parseTime,
+  generateSegmentId,
+  generateOverlayId,
+  CAPTION_PRESETS,
+  DEFAULT_CAPTION_STYLE,
+  resolveCaptionStyle,
+  getCaptionPresetNames,
+  isValidCaptionPreset
+};