ugcinc 4.5.62 → 4.5.64

package/dist/render/components/TextElement.js

@@ -338,6 +338,20 @@ function TextElement({ segment, scale = 1 }) {
     }, [autoWidth, calculatedWidth, width, backgroundColor, backgroundOpacity, borderRadiusStyle]);
     const hasStroke = strokeWidth > 0 && !!strokeColor;
     const filterId = `te-stroke-${react_1.default.useId().replace(/:/g, '')}`;
+    if (hasStroke) {
+        console.log('[TextElement] STROKE_DEBUG:', JSON.stringify({
+            text: segment.text.substring(0, 50),
+            strokeWidth,
+            strokeColor,
+            filterId,
+            paddingTop, paddingRight, paddingBottom, paddingLeft,
+            fontSize,
+            strokePadPct: Math.max(50, Math.ceil((strokeWidth / fontSize) * 200)),
+            autoWidth,
+            width,
+            calculatedWidth,
+        }));
+    }
     // Text style (fill layer)
     const textStyle = (0, react_1.useMemo)(() => ({
         fontFamily,
@@ -357,7 +371,7 @@ function TextElement({ segment, scale = 1 }) {
             flex: 1,
             minHeight: 0,
         }),
-        ...(hasStroke && { position: 'relative' }),
+        ...(hasStroke && { position: 'relative', zIndex: 1 }),
     }), [
         fontFamily, fontSize, fontWeight, color, lineHeight, letterSpacing, alignment,
         paddingTop, paddingRight, paddingBottom, paddingLeft,
@@ -369,17 +383,26 @@ function TextElement({ segment, scale = 1 }) {
     const strokeTextStyle = (0, react_1.useMemo)(() => {
         if (!hasStroke)
             return undefined;
-        return {
+        const style = {
             ...textStyle,
             color: strokeColor,
             filter: `url(#${filterId})`,
             position: 'absolute',
-            top: -strokeWidth,
-            left: -strokeWidth,
-            right: -strokeWidth,
-            bottom: -strokeWidth,
-            padding: `${paddingTop + strokeWidth}px ${paddingRight + strokeWidth}px ${paddingBottom + strokeWidth}px ${paddingLeft + strokeWidth}px`,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
         };
+        console.log('[TextElement] STROKE_STYLE:', JSON.stringify({
+            filter: style.filter,
+            top: style.top,
+            left: style.left,
+            right: style.right,
+            bottom: style.bottom,
+            padding: style.padding,
+            color: style.color,
+        }));
+        return style;
     }, [hasStroke, textStyle, strokeColor, filterId, strokeWidth, paddingTop, paddingRight, paddingBottom, paddingLeft]);
     // SVG filter for smooth text outline (avoids miter spikes from -webkit-text-stroke)
     const strokePadPct = Math.max(50, Math.ceil((strokeWidth / fontSize) * 200));
@@ -389,10 +412,15 @@ function TextElement({ segment, scale = 1 }) {
     // keep layout identical to the fill layer.
     const renderStrokeText = (text) => {
         const parts = (0, emoji_1.splitTextAndEmojis)(text);
+        console.log('[TextElement] EMOJI_DEBUG:', JSON.stringify({
+            text: text.substring(0, 50),
+            partsCount: parts.length,
+            parts: parts.map(p => ({ type: p.type, content: p.content.substring(0, 10) })),
+        }));
         if (parts.every(p => p.type === 'text'))
             return text;
         return parts.map((part, i) => part.type === 'emoji'
-            ? (0, jsx_runtime_1.jsx)("span", { style: { opacity: 0 }, children: part.content }, i)
+            ? (0, jsx_runtime_1.jsx)("span", { style: { visibility: 'hidden' }, children: part.content }, i)
             : (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: part.content }, i));
     };
     if (autoWidth) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc",
-  "version": "4.5.62",
+  "version": "4.5.64",
   "description": "TypeScript/JavaScript client for the UGC Inc API",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",