ugcinc-render 1.5.10 → 1.5.12

package/dist/index.d.mts

@@ -1290,6 +1290,34 @@ declare function generateSegmentId(): string;
  */
 declare function generateOverlayId(): string;
 
+/**
+ * Emoji utilities for rendering Apple-style emojis consistently
+ * across all platforms using CDN-hosted emoji images.
+ */
+/**
+ * Convert an emoji character to its unified unicode codepoint format
+ * Example: "😀" -> "1f600", "👨‍👩‍👧" -> "1f468-200d-1f469-200d-1f467"
+ */
+declare function emojiToUnified(emoji: string): string;
+/**
+ * Get the Apple emoji CDN URL for a given emoji character
+ */
+declare function getAppleEmojiUrl(emoji: string): string;
+/**
+ * Check if a string contains any emoji characters
+ */
+declare function hasEmoji(text: string): boolean;
+/**
+ * Split text into segments of text and emojis
+ * Returns an array of segments with type 'text' or 'emoji'
+ */
+interface TextSegmentPart {
+    type: 'text' | 'emoji';
+    content: string;
+    imageUrl?: string;
+}
+declare function splitTextAndEmojis(text: string): TextSegmentPart[];
+
 /**
  * Hook exports for ugcinc-render
  *
@@ -1349,4 +1377,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
+export { type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextSegmentPart, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, defaultOffset, emojiToUnified, formatTime, generateOverlayId, generateSegmentId, getAppleEmojiUrl, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hasEmoji, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, splitTextAndEmojis, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };

package/dist/index.d.ts

@@ -1290,6 +1290,34 @@ declare function generateSegmentId(): string;
  */
 declare function generateOverlayId(): string;
 
+/**
+ * Emoji utilities for rendering Apple-style emojis consistently
+ * across all platforms using CDN-hosted emoji images.
+ */
+/**
+ * Convert an emoji character to its unified unicode codepoint format
+ * Example: "😀" -> "1f600", "👨‍👩‍👧" -> "1f468-200d-1f469-200d-1f467"
+ */
+declare function emojiToUnified(emoji: string): string;
+/**
+ * Get the Apple emoji CDN URL for a given emoji character
+ */
+declare function getAppleEmojiUrl(emoji: string): string;
+/**
+ * Check if a string contains any emoji characters
+ */
+declare function hasEmoji(text: string): boolean;
+/**
+ * Split text into segments of text and emojis
+ * Returns an array of segments with type 'text' or 'emoji'
+ */
+interface TextSegmentPart {
+    type: 'text' | 'emoji';
+    content: string;
+    imageUrl?: string;
+}
+declare function splitTextAndEmojis(text: string): TextSegmentPart[];
+
 /**
  * Hook exports for ugcinc-render
  *
@@ -1349,4 +1377,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
+export { type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextSegmentPart, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, defaultOffset, emojiToUnified, formatTime, generateOverlayId, generateSegmentId, getAppleEmojiUrl, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hasEmoji, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, splitTextAndEmojis, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };

package/dist/index.js

@@ -56,9 +56,11 @@ __export(index_exports, {
   calculateTimelineContentEnd: () => calculateTimelineContentEnd,
   canSetAsReference: () => canSetAsReference,
   defaultOffset: () => defaultOffset,
+  emojiToUnified: () => emojiToUnified,
   formatTime: () => formatTime,
   generateOverlayId: () => generateOverlayId,
   generateSegmentId: () => generateSegmentId,
+  getAppleEmojiUrl: () => getAppleEmojiUrl,
   getBaseSegments: () => getBaseSegments,
   getBorderRadii: () => getBorderRadii,
   getDependentElements: () => getDependentElements,
@@ -67,6 +69,7 @@ __export(index_exports, {
   getReferenceElementX: () => getReferenceElementX,
   getReferenceElementY: () => getReferenceElementY,
   getSegmentTimelinePosition: () => getSegmentTimelinePosition,
+  hasEmoji: () => hasEmoji,
   hexToRgba: () => hexToRgba,
   isDynamicCropEnabled: () => isDynamicCropEnabled,
   isSegmentVisibleAtTime: () => isSegmentVisibleAtTime,
@@ -74,6 +77,7 @@ __export(index_exports, {
   parseTime: () => parseTime,
   preloadFonts: () => preloadFonts,
   resolveElementPositions: () => resolveElementPositions,
+  splitTextAndEmojis: () => splitTextAndEmojis,
   useFontsLoaded: () => useFontsLoaded,
   useImageLoader: () => useImageLoader,
   useImagePreloader: () => useImagePreloader,
@@ -302,6 +306,54 @@ function hexToRgba(hex, opacity = 100) {
   return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
 }
 
+// src/utils/emoji.ts
+var APPLE_EMOJI_CDN_BASE = "https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/";
+function emojiToUnified(emoji) {
+  const codePoints = [];
+  for (const codePoint of emoji) {
+    const hex = codePoint.codePointAt(0)?.toString(16);
+    if (hex) {
+      codePoints.push(hex);
+    }
+  }
+  return codePoints.join("-");
+}
+function getAppleEmojiUrl(emoji) {
+  const unified = emojiToUnified(emoji);
+  return `${APPLE_EMOJI_CDN_BASE}${unified}.png`;
+}
+var EMOJI_REGEX = /(?:\p{Emoji_Presentation}|\p{Emoji}\uFE0F)(?:\p{Emoji_Modifier}|\uFE0F|\u200D(?:\p{Emoji_Presentation}|\p{Emoji}\uFE0F)(?:\p{Emoji_Modifier})?)*|\p{Regional_Indicator}{2}/gu;
+function hasEmoji(text) {
+  return EMOJI_REGEX.test(text);
+}
+function splitTextAndEmojis(text) {
+  const segments = [];
+  let lastIndex = 0;
+  EMOJI_REGEX.lastIndex = 0;
+  let match;
+  while ((match = EMOJI_REGEX.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({
+        type: "text",
+        content: text.slice(lastIndex, match.index)
+      });
+    }
+    segments.push({
+      type: "emoji",
+      content: match[0],
+      imageUrl: getAppleEmojiUrl(match[0])
+    });
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    segments.push({
+      type: "text",
+      content: text.slice(lastIndex)
+    });
+  }
+  return segments;
+}
+
 // src/components/TextElement.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function calculateAutoWidthAndLines({
@@ -436,14 +488,22 @@ function TextElement({ segment, scale = 1 }) {
   const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
   const backgroundBorderRadius = segment.backgroundBorderRadius;
   const fontFamily = getFontFamily(fontType);
-  const { autoWidthResult, isMultiLine } = (0, import_react.useMemo)(() => {
+  const { calculatedWidth, calculatedLines, paddingTop, paddingRight, paddingBottom, paddingLeft } = (0, import_react.useMemo)(() => {
+    let finalPaddingTop = basePaddingTop;
+    let finalPaddingRight = basePaddingRight;
+    let finalPaddingBottom = basePaddingBottom;
+    let finalPaddingLeft = basePaddingLeft;
     if (!autoWidth && !hasExtraPadding) {
       return {
-        autoWidthResult: null,
-        isMultiLine: false
+        calculatedWidth: width,
+        calculatedLines: [segment.text],
+        paddingTop: finalPaddingTop,
+        paddingRight: finalPaddingRight,
+        paddingBottom: finalPaddingBottom,
+        paddingLeft: finalPaddingLeft
       };
     }
-    const result = calculateAutoWidthAndLines({
+    const baseResult = calculateAutoWidthAndLines({
       text: segment.text,
       maxWidth: width,
       paddingLeft: basePaddingLeft,
@@ -454,16 +514,47 @@ function TextElement({ segment, scale = 1 }) {
       letterSpacing,
       lineHeight
     });
+    const isMultiLine = baseResult.lines.length >= 2;
+    if (isMultiLine) {
+      finalPaddingTop = basePaddingTop + extraPaddingTop;
+      finalPaddingRight = basePaddingRight + extraPaddingRight;
+      finalPaddingBottom = basePaddingBottom + extraPaddingBottom;
+      finalPaddingLeft = basePaddingLeft + extraPaddingLeft;
+    }
+    let finalResult = baseResult;
+    if (isMultiLine && (extraPaddingLeft > 0 || extraPaddingRight > 0)) {
+      finalResult = calculateAutoWidthAndLines({
+        text: segment.text,
+        maxWidth: width,
+        paddingLeft: finalPaddingLeft,
+        paddingRight: finalPaddingRight,
+        fontSize,
+        fontWeight,
+        fontFamily,
+        letterSpacing,
+        lineHeight
+      });
+    }
     return {
-      autoWidthResult: autoWidth ? result : null,
-      isMultiLine: result.lines.length >= 2
+      calculatedWidth: autoWidth ? finalResult.width : width,
+      calculatedLines: autoWidth ? finalResult.lines : [segment.text],
+      paddingTop: finalPaddingTop,
+      paddingRight: finalPaddingRight,
+      paddingBottom: finalPaddingBottom,
+      paddingLeft: finalPaddingLeft
     };
   }, [
     autoWidth,
     segment.text,
     width,
-    basePaddingLeft,
+    basePaddingTop,
     basePaddingRight,
+    basePaddingBottom,
+    basePaddingLeft,
+    extraPaddingTop,
+    extraPaddingRight,
+    extraPaddingBottom,
+    extraPaddingLeft,
     hasExtraPadding,
     fontSize,
     fontWeight,
@@ -471,51 +562,6 @@ function TextElement({ segment, scale = 1 }) {
     letterSpacing,
     lineHeight
   ]);
-  const calculatedLines = autoWidthResult?.lines ?? [segment.text];
-  const paddingTop = basePaddingTop + (isMultiLine ? extraPaddingTop : 0);
-  const paddingRight = basePaddingRight + (isMultiLine ? extraPaddingRight : 0);
-  const paddingBottom = basePaddingBottom + (isMultiLine ? extraPaddingBottom : 0);
-  const paddingLeft = basePaddingLeft + (isMultiLine ? extraPaddingLeft : 0);
-  const calculatedWidth = (0, import_react.useMemo)(() => {
-    if (!autoWidth) return width;
-    if (!isMultiLine || extraPaddingLeft === 0 && extraPaddingRight === 0) {
-      return autoWidthResult?.width ?? width;
-    }
-    if (typeof document === "undefined") return width;
-    const measureSpan = document.createElement("span");
-    measureSpan.style.cssText = `
-      position: absolute;
-      visibility: hidden;
-      pointer-events: none;
-      font-family: ${fontFamily};
-      font-size: ${fontSize}px;
-      font-weight: ${fontWeight};
-      letter-spacing: ${letterSpacing}px;
-      white-space: nowrap;
-    `;
-    document.body.appendChild(measureSpan);
-    let widestLineWidth = 0;
-    for (const line of calculatedLines) {
-      measureSpan.textContent = line;
-      widestLineWidth = Math.max(widestLineWidth, measureSpan.getBoundingClientRect().width);
-    }
-    document.body.removeChild(measureSpan);
-    return Math.min(widestLineWidth + paddingLeft + paddingRight, width);
-  }, [
-    autoWidth,
-    autoWidthResult,
-    width,
-    isMultiLine,
-    extraPaddingLeft,
-    extraPaddingRight,
-    paddingLeft,
-    paddingRight,
-    calculatedLines,
-    fontFamily,
-    fontSize,
-    fontWeight,
-    letterSpacing
-  ]);
   const borderRadiusStyle = (0, import_react.useMemo)(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);
@@ -610,9 +656,35 @@ function TextElement({ segment, scale = 1 }) {
     autoWidth,
     verticalAlign
   ]);
+  const renderTextWithEmojis = (text) => {
+    if (!hasEmoji(text)) {
+      return text;
+    }
+    const segments = splitTextAndEmojis(text);
+    return segments.map((segment2, i) => {
+      if (segment2.type === "emoji" && segment2.imageUrl) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: segment2.imageUrl,
+            alt: segment2.content,
+            style: {
+              height: "1em",
+              width: "1em",
+              verticalAlign: "-0.1em",
+              display: "inline"
+            },
+            draggable: false
+          },
+          i
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: segment2.content }, i);
+    });
+  };
   if (autoWidth) {
     const textContent = calculatedLines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
-      line,
+      renderTextWithEmojis(line),
       index < calculatedLines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {})
     ] }, index));
     if (backgroundColor) {
@@ -631,7 +703,7 @@ function TextElement({ segment, scale = 1 }) {
     }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: calculatedWidth, maxWidth: width }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, children: textContent }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, children: segment.text }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, children: renderTextWithEmojis(segment.text) }) }) });
 }
 
 // src/components/ImageElement.tsx
@@ -1951,9 +2023,11 @@ var RenderRoot = () => {
   calculateTimelineContentEnd,
   canSetAsReference,
   defaultOffset,
+  emojiToUnified,
   formatTime,
   generateOverlayId,
   generateSegmentId,
+  getAppleEmojiUrl,
   getBaseSegments,
   getBorderRadii,
   getDependentElements,
@@ -1962,6 +2036,7 @@ var RenderRoot = () => {
   getReferenceElementX,
   getReferenceElementY,
   getSegmentTimelinePosition,
+  hasEmoji,
   hexToRgba,
   isDynamicCropEnabled,
   isSegmentVisibleAtTime,
@@ -1969,6 +2044,7 @@ var RenderRoot = () => {
   parseTime,
   preloadFonts,
   resolveElementPositions,
+  splitTextAndEmojis,
   useFontsLoaded,
   useImageLoader,
   useImagePreloader,

package/dist/index.mjs

@@ -218,6 +218,54 @@ function hexToRgba(hex, opacity = 100) {
   return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
 }
 
+// src/utils/emoji.ts
+var APPLE_EMOJI_CDN_BASE = "https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/";
+function emojiToUnified(emoji) {
+  const codePoints = [];
+  for (const codePoint of emoji) {
+    const hex = codePoint.codePointAt(0)?.toString(16);
+    if (hex) {
+      codePoints.push(hex);
+    }
+  }
+  return codePoints.join("-");
+}
+function getAppleEmojiUrl(emoji) {
+  const unified = emojiToUnified(emoji);
+  return `${APPLE_EMOJI_CDN_BASE}${unified}.png`;
+}
+var EMOJI_REGEX = /(?:\p{Emoji_Presentation}|\p{Emoji}\uFE0F)(?:\p{Emoji_Modifier}|\uFE0F|\u200D(?:\p{Emoji_Presentation}|\p{Emoji}\uFE0F)(?:\p{Emoji_Modifier})?)*|\p{Regional_Indicator}{2}/gu;
+function hasEmoji(text) {
+  return EMOJI_REGEX.test(text);
+}
+function splitTextAndEmojis(text) {
+  const segments = [];
+  let lastIndex = 0;
+  EMOJI_REGEX.lastIndex = 0;
+  let match;
+  while ((match = EMOJI_REGEX.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({
+        type: "text",
+        content: text.slice(lastIndex, match.index)
+      });
+    }
+    segments.push({
+      type: "emoji",
+      content: match[0],
+      imageUrl: getAppleEmojiUrl(match[0])
+    });
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    segments.push({
+      type: "text",
+      content: text.slice(lastIndex)
+    });
+  }
+  return segments;
+}
+
 // src/components/TextElement.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function calculateAutoWidthAndLines({
@@ -352,14 +400,22 @@ function TextElement({ segment, scale = 1 }) {
   const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
   const backgroundBorderRadius = segment.backgroundBorderRadius;
   const fontFamily = getFontFamily(fontType);
-  const { autoWidthResult, isMultiLine } = useMemo(() => {
+  const { calculatedWidth, calculatedLines, paddingTop, paddingRight, paddingBottom, paddingLeft } = useMemo(() => {
+    let finalPaddingTop = basePaddingTop;
+    let finalPaddingRight = basePaddingRight;
+    let finalPaddingBottom = basePaddingBottom;
+    let finalPaddingLeft = basePaddingLeft;
     if (!autoWidth && !hasExtraPadding) {
       return {
-        autoWidthResult: null,
-        isMultiLine: false
+        calculatedWidth: width,
+        calculatedLines: [segment.text],
+        paddingTop: finalPaddingTop,
+        paddingRight: finalPaddingRight,
+        paddingBottom: finalPaddingBottom,
+        paddingLeft: finalPaddingLeft
       };
     }
-    const result = calculateAutoWidthAndLines({
+    const baseResult = calculateAutoWidthAndLines({
       text: segment.text,
       maxWidth: width,
       paddingLeft: basePaddingLeft,
@@ -370,16 +426,47 @@ function TextElement({ segment, scale = 1 }) {
       letterSpacing,
       lineHeight
     });
+    const isMultiLine = baseResult.lines.length >= 2;
+    if (isMultiLine) {
+      finalPaddingTop = basePaddingTop + extraPaddingTop;
+      finalPaddingRight = basePaddingRight + extraPaddingRight;
+      finalPaddingBottom = basePaddingBottom + extraPaddingBottom;
+      finalPaddingLeft = basePaddingLeft + extraPaddingLeft;
+    }
+    let finalResult = baseResult;
+    if (isMultiLine && (extraPaddingLeft > 0 || extraPaddingRight > 0)) {
+      finalResult = calculateAutoWidthAndLines({
+        text: segment.text,
+        maxWidth: width,
+        paddingLeft: finalPaddingLeft,
+        paddingRight: finalPaddingRight,
+        fontSize,
+        fontWeight,
+        fontFamily,
+        letterSpacing,
+        lineHeight
+      });
+    }
     return {
-      autoWidthResult: autoWidth ? result : null,
-      isMultiLine: result.lines.length >= 2
+      calculatedWidth: autoWidth ? finalResult.width : width,
+      calculatedLines: autoWidth ? finalResult.lines : [segment.text],
+      paddingTop: finalPaddingTop,
+      paddingRight: finalPaddingRight,
+      paddingBottom: finalPaddingBottom,
+      paddingLeft: finalPaddingLeft
     };
   }, [
     autoWidth,
     segment.text,
     width,
-    basePaddingLeft,
+    basePaddingTop,
     basePaddingRight,
+    basePaddingBottom,
+    basePaddingLeft,
+    extraPaddingTop,
+    extraPaddingRight,
+    extraPaddingBottom,
+    extraPaddingLeft,
     hasExtraPadding,
     fontSize,
     fontWeight,
@@ -387,51 +474,6 @@ function TextElement({ segment, scale = 1 }) {
     letterSpacing,
     lineHeight
   ]);
-  const calculatedLines = autoWidthResult?.lines ?? [segment.text];
-  const paddingTop = basePaddingTop + (isMultiLine ? extraPaddingTop : 0);
-  const paddingRight = basePaddingRight + (isMultiLine ? extraPaddingRight : 0);
-  const paddingBottom = basePaddingBottom + (isMultiLine ? extraPaddingBottom : 0);
-  const paddingLeft = basePaddingLeft + (isMultiLine ? extraPaddingLeft : 0);
-  const calculatedWidth = useMemo(() => {
-    if (!autoWidth) return width;
-    if (!isMultiLine || extraPaddingLeft === 0 && extraPaddingRight === 0) {
-      return autoWidthResult?.width ?? width;
-    }
-    if (typeof document === "undefined") return width;
-    const measureSpan = document.createElement("span");
-    measureSpan.style.cssText = `
-      position: absolute;
-      visibility: hidden;
-      pointer-events: none;
-      font-family: ${fontFamily};
-      font-size: ${fontSize}px;
-      font-weight: ${fontWeight};
-      letter-spacing: ${letterSpacing}px;
-      white-space: nowrap;
-    `;
-    document.body.appendChild(measureSpan);
-    let widestLineWidth = 0;
-    for (const line of calculatedLines) {
-      measureSpan.textContent = line;
-      widestLineWidth = Math.max(widestLineWidth, measureSpan.getBoundingClientRect().width);
-    }
-    document.body.removeChild(measureSpan);
-    return Math.min(widestLineWidth + paddingLeft + paddingRight, width);
-  }, [
-    autoWidth,
-    autoWidthResult,
-    width,
-    isMultiLine,
-    extraPaddingLeft,
-    extraPaddingRight,
-    paddingLeft,
-    paddingRight,
-    calculatedLines,
-    fontFamily,
-    fontSize,
-    fontWeight,
-    letterSpacing
-  ]);
   const borderRadiusStyle = useMemo(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);
@@ -526,9 +568,35 @@ function TextElement({ segment, scale = 1 }) {
     autoWidth,
     verticalAlign
   ]);
+  const renderTextWithEmojis = (text) => {
+    if (!hasEmoji(text)) {
+      return text;
+    }
+    const segments = splitTextAndEmojis(text);
+    return segments.map((segment2, i) => {
+      if (segment2.type === "emoji" && segment2.imageUrl) {
+        return /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: segment2.imageUrl,
+            alt: segment2.content,
+            style: {
+              height: "1em",
+              width: "1em",
+              verticalAlign: "-0.1em",
+              display: "inline"
+            },
+            draggable: false
+          },
+          i
+        );
+      }
+      return /* @__PURE__ */ jsx(React.Fragment, { children: segment2.content }, i);
+    });
+  };
   if (autoWidth) {
     const textContent = calculatedLines.map((line, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-      line,
+      renderTextWithEmojis(line),
       index < calculatedLines.length - 1 && /* @__PURE__ */ jsx("br", {})
     ] }, index));
     if (backgroundColor) {
@@ -547,7 +615,7 @@ function TextElement({ segment, scale = 1 }) {
     }
     return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: { width: calculatedWidth, maxWidth: width }, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: textContent }) }) });
   }
-  return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text }) }) });
+  return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: renderTextWithEmojis(segment.text) }) }) });
 }
 
 // src/components/ImageElement.tsx
@@ -1866,9 +1934,11 @@ export {
   calculateTimelineContentEnd,
   canSetAsReference,
   defaultOffset,
+  emojiToUnified,
   formatTime,
   generateOverlayId,
   generateSegmentId,
+  getAppleEmojiUrl,
   getBaseSegments,
   getBorderRadii,
   getDependentElements,
@@ -1877,6 +1947,7 @@ export {
   getReferenceElementX,
   getReferenceElementY,
   getSegmentTimelinePosition,
+  hasEmoji,
   hexToRgba,
   isDynamicCropEnabled,
   isSegmentVisibleAtTime,
@@ -1884,6 +1955,7 @@ export {
   parseTime,
   preloadFonts,
   resolveElementPositions,
+  splitTextAndEmojis,
   useFontsLoaded,
   useImageLoader,
   useImagePreloader,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.5.10",
+  "version": "1.5.12",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",