@app-studio/web 0.9.60 → 0.9.62

package/dist/web.cjs.development.js

@@ -19075,7 +19075,9 @@ var useTitleState = props => {
     var updateAlternatingState = index => {
       var currentWordToHighlight = alternateHighlightText[index];
       // Replace the placeholder in the baseText with the current alternating word
-      var regex = new RegExp(placeholder, 'gi');
+      // Escape regex special characters in placeholder to prevent errors
+      var escapedPlaceholder = placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      var regex = new RegExp(escapedPlaceholder, 'gi');
       var newContent = baseText.replace(regex, currentWordToHighlight);
       setFinalDisplayedText(newContent);
       setActiveHighlightTarget(currentWordToHighlight); // Set the current word as the highlight target
@@ -19205,12 +19207,10 @@ var ResponsiveTypography = {
  */
 var HighlightStyles = {
   underline: color => ({
-    style: {
-      textDecoration: 'underline',
-      textDecorationColor: color,
-      textDecorationThickness: '4px',
-      textUnderlineOffset: '4px'
-    }
+    textDecoration: 'underline',
+    textDecorationColor: color,
+    textDecorationThickness: '4px',
+    textUnderlineOffset: '4px'
   }),
   background: color => ({
     backgroundColor: color,
@@ -19219,21 +19219,17 @@ var HighlightStyles = {
     borderRadius: '4px'
   }),
   gradient: (color, secondaryColor) => ({
-    style: {
-      background: "linear-gradient(135deg, " + color + ", " + (secondaryColor || color) + ")",
-      backgroundClip: 'text',
-      WebkitBackgroundClip: 'text',
-      WebkitTextFillColor: 'transparent'
-    },
+    background: "linear-gradient(135deg, " + color + ", " + (secondaryColor || color) + ")",
+    backgroundClip: 'text',
+    WebkitBackgroundClip: 'text !important',
+    WebkitTextFillColor: 'transparent',
     color: 'transparent',
     display: 'inline-block',
     textShadow: 'none'
   }),
   outline: color => ({
-    style: {
-      WebkitTextStroke: "1px " + color,
-      WebkitTextFillColor: 'transparent'
-    },
+    WebkitTextStroke: "1px " + color,
+    WebkitTextFillColor: 'transparent !important',
     color: 'transparent',
     textShadow: 'none'
   }),
@@ -19310,18 +19306,17 @@ var TypewriterEffect = _ref => {
   }, [textArray, currentTextIndex, charIndex, isComplete, onComplete, pauseTime, typingSpeed]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, displayedText.map((text, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
     key: index
-  }, text, showCursor && index === currentTextIndex && !isComplete && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
+  }, text, showCursor && index === currentTextIndex && !isComplete && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
     as: "span",
     display: "inline-block",
     width: "0.1em",
     height: "1em",
-    backgroundColor: cursorColor,
-    style: Object.assign({
-      animation: 'blink 1s step-end infinite',
-      verticalAlign: 'text-bottom',
-      marginLeft: '1px'
-    }, textStyle)
-  }))))));
+    backgroundColor: cursorColor
+  }, Object.assign({
+    animation: 'blink 1s step-end infinite',
+    verticalAlign: 'text-bottom',
+    marginLeft: '1px'
+  }, textStyle))))))));
 };
 
 var _excluded$_ = ["text", "duration", "direction", "stagger", "sequential", "textStyle", "as", "wordProps"],
@@ -19497,13 +19492,11 @@ var SlideEffect = _ref => {
       key: animKey + "-" + index,
       as: "span",
       animate: wordAnimation
-    }, restWordProps, {
-      style: wordStyle
-    }), word);
+    }, restWordProps, wordStyle), word);
   })));
 };
 
-var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential"];
+var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode"];
 function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
@@ -19526,13 +19519,42 @@ var TitleView = _ref => {
       highlightSlide: propHighlightSlide = false,
       highlightSlideDuration = 500,
       highlightSlideStagger = 50,
-      highlightSlideSequential = true
+      highlightSlideSequential = true,
+      themeMode: elementMode
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   var {
     ref,
     inView
   } = appStudio.useInView();
+  var {
+    getColor,
+    themeMode,
+    theme
+  } = appStudio.useTheme();
+  var currentThemeMode = elementMode || themeMode;
+  var resolvedHighlightColor = getColor(highlightColor, {
+    themeMode: currentThemeMode
+  });
+  // Fallback: If getColor returns the token itself (resolution failed), try manual lookup in theme object
+  if (resolvedHighlightColor === highlightColor && highlightColor.startsWith('theme.') && theme) {
+    var tokenPath = highlightColor.replace('theme.', '');
+    var value = tokenPath.split('.').reduce((acc, part) => acc && acc[part], theme);
+    if (typeof value === 'string') {
+      resolvedHighlightColor = value;
+    }
+  }
+  var resolvedHighlightSecondaryColor = highlightSecondaryColor ? getColor(highlightSecondaryColor, {
+    themeMode: currentThemeMode
+  }) : undefined;
+  // Fallback for secondary color
+  if (highlightSecondaryColor && resolvedHighlightSecondaryColor === highlightSecondaryColor && highlightSecondaryColor.startsWith('theme.') && theme) {
+    var _tokenPath = highlightSecondaryColor.replace('theme.', '');
+    var _value = _tokenPath.split('.').reduce((acc, part) => acc && acc[part], theme);
+    if (typeof _value === 'string') {
+      resolvedHighlightSecondaryColor = _value;
+    }
+  }
   var {
     finalDisplayedText,
     activeHighlightTarget,
@@ -19557,7 +19579,7 @@ var TitleView = _ref => {
   var fontSize = TitleSizes[size];
   var responsiveStyles = useResponsive ? ResponsiveTypography[size] : null;
   // Highlight style props
-  var highlightProps = HighlightStyles[highlightStyle](highlightColor, highlightSecondaryColor);
+  var highlightProps = HighlightStyles[highlightStyle](resolvedHighlightColor, resolvedHighlightSecondaryColor);
   // Apply loop control to animations
   var applyAnimationLoop = (animation, loopControl) => {
     if (!animation) return animation;