ugcinc 4.5.64 → 4.5.66

package/dist/render/components/TextElement.js

@@ -45,7 +45,6 @@ const react_1 = __importStar(require("react"));
 const defaults_1 = require("../utils/defaults");
 const fonts_1 = require("../utils/fonts");
 const text_1 = require("../utils/text");
-const emoji_1 = require("../utils/emoji");
 /**
  * Calculate the actual width for auto-width text AND the line breaks.
  * Uses DOM-based measurement to ensure the same fonts are used as CSS rendering.
@@ -160,23 +159,6 @@ function calculateAutoWidthAndLines({ text, maxWidth, paddingLeft, paddingRight,
     }
     document.body.removeChild(measureSpan);
     const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
-    // CONDENSED DEBUG LOG
-    console.log('[TextElement] WIDTH_CALC:', JSON.stringify({
-        text: text.substring(0, 30),
-        fontFamily: fontFamily.split(',')[0],
-        computedFont: computedFontFamily.split(',')[0],
-        fontLoaded: requestedFontLoaded,
-        fontSize,
-        fontWeight,
-        letterSpacing,
-        mWidth: Math.round(mWidth * 100) / 100,
-        widestLine: Math.round(widestLineWidth * 100) / 100,
-        paddingL: paddingLeft,
-        paddingR: paddingRight,
-        calcWidth: Math.round(calculatedWidth * 100) / 100,
-        maxWidth,
-        lines: lines.length,
-    }));
     return { width: calculatedWidth, lines };
 }
 /**
@@ -338,20 +320,6 @@ 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,
@@ -377,55 +345,27 @@ function TextElement({ segment, scale = 1 }) {
         paddingTop, paddingRight, paddingBottom, paddingLeft,
         autoWidth, verticalAlign, hasStroke
     ]);
-    // Stroke underlay style — extended by strokeWidth on all sides so the
-    // dilated outline stays inside the div and doesn't clip at text edges.
-    // Extra padding compensates so text wraps identically to the fill layer.
+    // Stroke underlay style — same size as fill div, SVG filter handles overflow.
     const strokeTextStyle = (0, react_1.useMemo)(() => {
         if (!hasStroke)
             return undefined;
-        const style = {
+        return {
             ...textStyle,
             color: strokeColor,
             filter: `url(#${filterId})`,
             position: 'absolute',
+            zIndex: 0,
             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]);
+    }, [hasStroke, textStyle, strokeColor, filterId]);
     // SVG filter for smooth text outline (avoids miter spikes from -webkit-text-stroke)
     const strokePadPct = Math.max(50, Math.ceil((strokeWidth / fontSize) * 200));
     const strokeFilterSvg = hasStroke ? ((0, jsx_runtime_1.jsx)("svg", { style: { position: 'absolute', width: 0, height: 0, overflow: 'hidden' }, "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("filter", { id: filterId, x: `-${strokePadPct}%`, y: `-${strokePadPct}%`, width: `${100 + 2 * strokePadPct}%`, height: `${100 + 2 * strokePadPct}%`, children: [(0, jsx_runtime_1.jsx)("feMorphology", { in: "SourceAlpha", operator: "dilate", radius: strokeWidth, result: "dilated" }), (0, jsx_runtime_1.jsx)("feFlood", { floodColor: strokeColor, result: "color" }), (0, jsx_runtime_1.jsx)("feComposite", { in: "color", in2: "dilated", operator: "in" })] }) }) })) : null;
-    // Render text with emojis made invisible (opacity 0) so the stroke
-    // filter doesn't dilate around them. Emojis still occupy space to
-    // 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: { visibility: 'hidden' }, children: part.content }, i)
-            : (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: part.content }, i));
-    };
     if (autoWidth) {
         const textContent = calculatedLines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [line, index < calculatedLines.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, index)));
-        const strokeContent = calculatedLines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [renderStrokeText(line), index < calculatedLines.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, index)));
         if (backgroundColor) {
             return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                         width: calculatedWidth,
@@ -433,10 +373,10 @@ function TextElement({ segment, scale = 1 }) {
                         backgroundColor: (0, text_1.hexToRgba)(backgroundColor, backgroundOpacity),
                         borderRadius: borderRadiusStyle,
                         ...(hasStroke && { position: 'relative' }),
-                    }, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: strokeContent }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: textContent })] }) }));
+                    }, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: textContent }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: textContent })] }) }));
         }
-        return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: { width: calculatedWidth, maxWidth: width, ...(hasStroke && { position: 'relative' }) }, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: strokeContent }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: textContent })] }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: { width: calculatedWidth, maxWidth: width, ...(hasStroke && { position: 'relative' }) }, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: textContent }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: textContent })] }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: { ...backgroundBoxStyle, ...(hasStroke && { position: 'relative' }) }, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: renderStrokeText(segment.text) }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: segment.text })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: { ...backgroundBoxStyle, ...(hasStroke && { position: 'relative' }) }, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: segment.text }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: segment.text })] }) }));
 }
 exports.default = TextElement;

package/dist/render/compositions/ImageEditorComposition.js

@@ -75,18 +75,6 @@ function elementToTextSegment(elem) {
         autoWidth: elem.autoWidth,
         boxAlign: elem.boxAlign,
     };
-    // CONDENSED DEBUG LOG
-    console.log('[Composition] ELEMENT:', JSON.stringify({
-        id: elem.id,
-        text: (elem.text ?? '').substring(0, 20),
-        w: elem.width,
-        h: elem.height,
-        font: elem.font,
-        fontSize: elem.fontSize,
-        autoWidth: elem.autoWidth,
-        pL: elem.paddingLeft,
-        pR: elem.paddingRight,
-    }));
     return segment;
 }
 /**

package/package.json

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