ugcinc-render 1.5.14 → 1.5.16

package/dist/index.d.mts

@@ -955,9 +955,14 @@ declare function VideoElement({ segment, src, startFrame, durationInFrames, scal
  * Font utilities for the rendering system
  */
 
+/**
+ * Apple Color Emoji font name - used as fallback for emoji characters
+ */
+declare const APPLE_EMOJI_FONT = "\"Apple Color Emoji\"";
 /**
  * Font family CSS strings for each font type
  * These match the fonts registered in the rendering system
+ * Apple Color Emoji is added as a fallback for consistent emoji rendering
  */
 declare const FONT_FAMILIES: Record<FontType, string>;
 /**
@@ -984,6 +989,9 @@ declare const FONT_URLS: {
     apple: {
         regular: string;
     };
+    emoji: {
+        apple: string;
+    };
 };
 /**
  * Preload fonts for rendering
@@ -1290,34 +1298,6 @@ 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
  *
@@ -1377,4 +1357,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 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 };
+export { APPLE_EMOJI_FONT, 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 };

package/dist/index.d.ts

@@ -955,9 +955,14 @@ declare function VideoElement({ segment, src, startFrame, durationInFrames, scal
  * Font utilities for the rendering system
  */
 
+/**
+ * Apple Color Emoji font name - used as fallback for emoji characters
+ */
+declare const APPLE_EMOJI_FONT = "\"Apple Color Emoji\"";
 /**
  * Font family CSS strings for each font type
  * These match the fonts registered in the rendering system
+ * Apple Color Emoji is added as a fallback for consistent emoji rendering
  */
 declare const FONT_FAMILIES: Record<FontType, string>;
 /**
@@ -984,6 +989,9 @@ declare const FONT_URLS: {
     apple: {
         regular: string;
     };
+    emoji: {
+        apple: string;
+    };
 };
 /**
  * Preload fonts for rendering
@@ -1290,34 +1298,6 @@ 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
  *
@@ -1377,4 +1357,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 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 };
+export { APPLE_EMOJI_FONT, 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 };

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  APPLE_EMOJI_FONT: () => APPLE_EMOJI_FONT,
   DIMENSION_PRESETS: () => DIMENSION_PRESETS,
   FONT_FAMILIES: () => FONT_FAMILIES,
   FONT_URLS: () => FONT_URLS,
@@ -56,11 +57,9 @@ __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,
@@ -69,7 +68,6 @@ __export(index_exports, {
   getReferenceElementX: () => getReferenceElementX,
   getReferenceElementY: () => getReferenceElementY,
   getSegmentTimelinePosition: () => getSegmentTimelinePosition,
-  hasEmoji: () => hasEmoji,
   hexToRgba: () => hexToRgba,
   isDynamicCropEnabled: () => isDynamicCropEnabled,
   isSegmentVisibleAtTime: () => isSegmentVisibleAtTime,
@@ -77,7 +75,6 @@ __export(index_exports, {
   parseTime: () => parseTime,
   preloadFonts: () => preloadFonts,
   resolveElementPositions: () => resolveElementPositions,
-  splitTextAndEmojis: () => splitTextAndEmojis,
   useFontsLoaded: () => useFontsLoaded,
   useImageLoader: () => useImageLoader,
   useImagePreloader: () => useImagePreloader,
@@ -163,10 +160,11 @@ function applyVideoDefaults(segment) {
 }
 
 // src/utils/fonts.ts
+var APPLE_EMOJI_FONT = '"Apple Color Emoji"';
 var FONT_FAMILIES = {
-  tiktok: '"TikTok Sans", sans-serif',
-  apple: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
-  arial: "Arial, sans-serif"
+  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;
@@ -186,6 +184,9 @@ var FONT_URLS = {
   },
   apple: {
     regular: "/SF-Pro.ttf"
+  },
+  emoji: {
+    apple: "/AppleColorEmoji.ttf"
   }
 };
 async function preloadFonts() {
@@ -209,6 +210,12 @@ async function preloadFonts() {
       { weight: "normal" }
     );
     fontPromises.push(sfPro.load());
+    const appleEmoji = new FontFace(
+      "Apple Color Emoji",
+      `url(${FONT_URLS.emoji.apple})`,
+      { weight: "normal" }
+    );
+    fontPromises.push(appleEmoji.load());
     const loadedFonts = await Promise.all(fontPromises);
     loadedFonts.forEach((font) => {
       document.fonts.add(font);
@@ -219,7 +226,7 @@ function areFontsLoaded() {
   if (typeof document === "undefined") {
     return false;
   }
-  return document.fonts.check('normal 16px "TikTok Sans"') && document.fonts.check('bold 16px "TikTok Sans"') && document.fonts.check('normal 16px "SF Pro"');
+  return document.fonts.check('normal 16px "TikTok Sans"') && document.fonts.check('bold 16px "TikTok Sans"') && document.fonts.check('normal 16px "SF Pro"') && document.fonts.check('normal 16px "Apple Color Emoji"');
 }
 
 // src/utils/text.ts
@@ -306,66 +313,6 @@ 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;
-}
-function countEmojis(text) {
-  EMOJI_REGEX.lastIndex = 0;
-  const matches = text.match(EMOJI_REGEX);
-  return matches ? matches.length : 0;
-}
-function getEmojiWidth(fontSize) {
-  return fontSize * 1.3;
-}
-function stripEmojis(text) {
-  EMOJI_REGEX.lastIndex = 0;
-  return text.replace(EMOJI_REGEX, "");
-}
-
 // src/components/TextElement.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function calculateAutoWidthAndLines({
@@ -398,17 +345,9 @@ function calculateAutoWidthAndLines({
     white-space: nowrap;
   `;
   document.body.appendChild(measureSpan);
-  const emojiWidth = getEmojiWidth(fontSize);
-  const measureTextWithEmojis = (textToMeasure) => {
-    const emojiCount = countEmojis(textToMeasure);
-    if (emojiCount === 0) {
-      measureSpan.textContent = textToMeasure;
-      return measureSpan.getBoundingClientRect().width;
-    }
-    const textWithoutEmojis = stripEmojis(textToMeasure);
-    measureSpan.textContent = textWithoutEmojis;
-    const textWidth = measureSpan.getBoundingClientRect().width;
-    return textWidth + emojiCount * emojiWidth;
+  const measureText = (textToMeasure) => {
+    measureSpan.textContent = textToMeasure;
+    return measureSpan.getBoundingClientRect().width;
   };
   measureSpan.textContent = "M";
   const charWidth = measureSpan.getBoundingClientRect().width;
@@ -432,12 +371,12 @@ function calculateAutoWidthAndLines({
       continue;
     }
     const testLine = currentLine + word;
-    const testWidth = measureTextWithEmojis(testLine);
+    const testWidth = measureText(testLine);
     const WRAP_TOLERANCE = 0.5;
     if (testWidth > availableWidth + WRAP_TOLERANCE && currentLine.trim()) {
       lines.push(currentLine.trimEnd());
       currentLine = word;
-      const wordWidth = measureTextWithEmojis(word);
+      const wordWidth = measureText(word);
       if (wordWidth > availableWidth) {
         let remainingWord = word;
         while (remainingWord) {
@@ -471,7 +410,7 @@ function calculateAutoWidthAndLines({
   }
   let widestLineWidth = 0;
   for (const line of lines) {
-    const lineWidth = measureTextWithEmojis(line);
+    const lineWidth = measureText(line);
     widestLineWidth = Math.max(widestLineWidth, lineWidth);
   }
   document.body.removeChild(measureSpan);
@@ -678,36 +617,9 @@ 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: "1.2em",
-              width: "1.2em",
-              verticalAlign: "-0.25em",
-              display: "inline-block",
-              margin: "0 0.05em"
-            },
-            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: [
-      renderTextWithEmojis(line),
+      line,
       index < calculatedLines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {})
     ] }, index));
     if (backgroundColor) {
@@ -726,7 +638,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: renderTextWithEmojis(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: segment.text }) }) });
 }
 
 // src/components/ImageElement.tsx
@@ -2020,6 +1932,7 @@ var RenderRoot = () => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  APPLE_EMOJI_FONT,
   DIMENSION_PRESETS,
   FONT_FAMILIES,
   FONT_URLS,
@@ -2046,11 +1959,9 @@ var RenderRoot = () => {
   calculateTimelineContentEnd,
   canSetAsReference,
   defaultOffset,
-  emojiToUnified,
   formatTime,
   generateOverlayId,
   generateSegmentId,
-  getAppleEmojiUrl,
   getBaseSegments,
   getBorderRadii,
   getDependentElements,
@@ -2059,7 +1970,6 @@ var RenderRoot = () => {
   getReferenceElementX,
   getReferenceElementY,
   getSegmentTimelinePosition,
-  hasEmoji,
   hexToRgba,
   isDynamicCropEnabled,
   isSegmentVisibleAtTime,
@@ -2067,7 +1977,6 @@ var RenderRoot = () => {
   parseTime,
   preloadFonts,
   resolveElementPositions,
-  splitTextAndEmojis,
   useFontsLoaded,
   useImageLoader,
   useImagePreloader,

package/dist/index.mjs

@@ -75,10 +75,11 @@ function applyVideoDefaults(segment) {
 }
 
 // src/utils/fonts.ts
+var APPLE_EMOJI_FONT = '"Apple Color Emoji"';
 var FONT_FAMILIES = {
-  tiktok: '"TikTok Sans", sans-serif',
-  apple: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
-  arial: "Arial, sans-serif"
+  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;
@@ -98,6 +99,9 @@ var FONT_URLS = {
   },
   apple: {
     regular: "/SF-Pro.ttf"
+  },
+  emoji: {
+    apple: "/AppleColorEmoji.ttf"
   }
 };
 async function preloadFonts() {
@@ -121,6 +125,12 @@ async function preloadFonts() {
       { weight: "normal" }
     );
     fontPromises.push(sfPro.load());
+    const appleEmoji = new FontFace(
+      "Apple Color Emoji",
+      `url(${FONT_URLS.emoji.apple})`,
+      { weight: "normal" }
+    );
+    fontPromises.push(appleEmoji.load());
     const loadedFonts = await Promise.all(fontPromises);
     loadedFonts.forEach((font) => {
       document.fonts.add(font);
@@ -131,7 +141,7 @@ function areFontsLoaded() {
   if (typeof document === "undefined") {
     return false;
   }
-  return document.fonts.check('normal 16px "TikTok Sans"') && document.fonts.check('bold 16px "TikTok Sans"') && document.fonts.check('normal 16px "SF Pro"');
+  return document.fonts.check('normal 16px "TikTok Sans"') && document.fonts.check('bold 16px "TikTok Sans"') && document.fonts.check('normal 16px "SF Pro"') && document.fonts.check('normal 16px "Apple Color Emoji"');
 }
 
 // src/utils/text.ts
@@ -218,66 +228,6 @@ 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;
-}
-function countEmojis(text) {
-  EMOJI_REGEX.lastIndex = 0;
-  const matches = text.match(EMOJI_REGEX);
-  return matches ? matches.length : 0;
-}
-function getEmojiWidth(fontSize) {
-  return fontSize * 1.3;
-}
-function stripEmojis(text) {
-  EMOJI_REGEX.lastIndex = 0;
-  return text.replace(EMOJI_REGEX, "");
-}
-
 // src/components/TextElement.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function calculateAutoWidthAndLines({
@@ -310,17 +260,9 @@ function calculateAutoWidthAndLines({
     white-space: nowrap;
   `;
   document.body.appendChild(measureSpan);
-  const emojiWidth = getEmojiWidth(fontSize);
-  const measureTextWithEmojis = (textToMeasure) => {
-    const emojiCount = countEmojis(textToMeasure);
-    if (emojiCount === 0) {
-      measureSpan.textContent = textToMeasure;
-      return measureSpan.getBoundingClientRect().width;
-    }
-    const textWithoutEmojis = stripEmojis(textToMeasure);
-    measureSpan.textContent = textWithoutEmojis;
-    const textWidth = measureSpan.getBoundingClientRect().width;
-    return textWidth + emojiCount * emojiWidth;
+  const measureText = (textToMeasure) => {
+    measureSpan.textContent = textToMeasure;
+    return measureSpan.getBoundingClientRect().width;
   };
   measureSpan.textContent = "M";
   const charWidth = measureSpan.getBoundingClientRect().width;
@@ -344,12 +286,12 @@ function calculateAutoWidthAndLines({
       continue;
     }
     const testLine = currentLine + word;
-    const testWidth = measureTextWithEmojis(testLine);
+    const testWidth = measureText(testLine);
     const WRAP_TOLERANCE = 0.5;
     if (testWidth > availableWidth + WRAP_TOLERANCE && currentLine.trim()) {
       lines.push(currentLine.trimEnd());
       currentLine = word;
-      const wordWidth = measureTextWithEmojis(word);
+      const wordWidth = measureText(word);
       if (wordWidth > availableWidth) {
         let remainingWord = word;
         while (remainingWord) {
@@ -383,7 +325,7 @@ function calculateAutoWidthAndLines({
   }
   let widestLineWidth = 0;
   for (const line of lines) {
-    const lineWidth = measureTextWithEmojis(line);
+    const lineWidth = measureText(line);
     widestLineWidth = Math.max(widestLineWidth, lineWidth);
   }
   document.body.removeChild(measureSpan);
@@ -590,36 +532,9 @@ 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: "1.2em",
-              width: "1.2em",
-              verticalAlign: "-0.25em",
-              display: "inline-block",
-              margin: "0 0.05em"
-            },
-            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: [
-      renderTextWithEmojis(line),
+      line,
       index < calculatedLines.length - 1 && /* @__PURE__ */ jsx("br", {})
     ] }, index));
     if (backgroundColor) {
@@ -638,7 +553,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: renderTextWithEmojis(segment.text) }) }) });
+  return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text }) }) });
 }
 
 // src/components/ImageElement.tsx
@@ -1931,6 +1846,7 @@ var RenderRoot = () => {
   ] });
 };
 export {
+  APPLE_EMOJI_FONT,
   DIMENSION_PRESETS,
   FONT_FAMILIES,
   FONT_URLS,
@@ -1957,11 +1873,9 @@ export {
   calculateTimelineContentEnd,
   canSetAsReference,
   defaultOffset,
-  emojiToUnified,
   formatTime,
   generateOverlayId,
   generateSegmentId,
-  getAppleEmojiUrl,
   getBaseSegments,
   getBorderRadii,
   getDependentElements,
@@ -1970,7 +1884,6 @@ export {
   getReferenceElementX,
   getReferenceElementY,
   getSegmentTimelinePosition,
-  hasEmoji,
   hexToRgba,
   isDynamicCropEnabled,
   isSegmentVisibleAtTime,
@@ -1978,7 +1891,6 @@ export {
   parseTime,
   preloadFonts,
   resolveElementPositions,
-  splitTextAndEmojis,
   useFontsLoaded,
   useImageLoader,
   useImagePreloader,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.5.14",
+  "version": "1.5.16",
   "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",