@app-studio/web 0.9.51 → 0.9.54

package/dist/web.umd.development.js

@@ -19270,16 +19270,6 @@
 
   var _excluded$_ = ["text", "duration", "direction", "stagger", "sequential", "textStyle", "as", "wordProps"],
     _excluded2$g = ["style"];
-  // CSS keyframes injection - done once
-  var KEYFRAMES_ID = 'slide-effect-keyframes';
-  var injectKeyframes = () => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(KEYFRAMES_ID)) return;
-    var style = document.createElement('style');
-    style.id = KEYFRAMES_ID;
-    style.textContent = "\n    @keyframes slideInUp {\n      from { transform: translateY(100%); opacity: 0; }\n      to { transform: translateY(0); opacity: 1; }\n    }\n    @keyframes slideOutUp {\n      from { transform: translateY(0); opacity: 1; }\n      to { transform: translateY(-100%); opacity: 0; }\n    }\n    @keyframes slideInDown {\n      from { transform: translateY(-100%); opacity: 0; }\n      to { transform: translateY(0); opacity: 1; }\n    }\n    @keyframes slideOutDown {\n      from { transform: translateY(0); opacity: 1; }\n      to { transform: translateY(100%); opacity: 0; }\n    }\n  ";
-    document.head.appendChild(style);
-  };
   var SlideEffect = _ref => {
     var {
         text,
@@ -19296,10 +19286,6 @@
     var [animKey, setAnimKey] = React.useState(0);
     var pendingTextRef = React.useRef(null);
     var timeoutRef = React.useRef(null);
-    // Inject keyframes once on mount
-    React.useEffect(() => {
-      injectKeyframes();
-    }, []);
     // Handle text changes
     React.useEffect(() => {
       if (text === displayedText && phase === 'visible') {
@@ -19365,12 +19351,10 @@
         style: customWordStyle
       } = _ref2,
       restWordProps = _objectWithoutPropertiesLoose(_ref2, _excluded2$g);
-    // Get animation names based on direction
+    // Get animation functions based on direction
     var isUp = direction === 'up';
-    var enterAnim = isUp ? 'slideInUp' : 'slideInDown';
-    var exitAnim = isUp ? 'slideOutUp' : 'slideOutDown';
     // Calculate delay for each word
-    var getDelay = (index, isExit) => {
+    var getDelay = index => {
       if (sequential) {
         // Sequential: one word at a time
         return index * (duration + stagger);
@@ -19392,9 +19376,6 @@
       flexWrap: 'nowrap',
       whiteSpace: 'nowrap'
     }), []);
-    // Determine current animation
-    var currentAnim = phase === 'exiting' ? exitAnim : enterAnim;
-    var isAnimating = phase === 'entering' || phase === 'exiting';
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "span",
       style: containerStyle
@@ -19403,17 +19384,63 @@
     }, words.map((word, index) => {
       var delay = getDelay(index);
       var isLast = index === words.length - 1;
+      // Create animation based on phase and direction
+      var wordAnimation;
+      var durationStr = duration + "ms";
+      var delayStr = delay + "ms";
+      if (phase === 'entering') {
+        // Use app-studio animations for entering
+        wordAnimation = isUp ? appStudio.Animation.slideInUp({
+          duration: durationStr,
+          delay: delayStr,
+          timingFunction: 'ease-out',
+          fillMode: 'both'
+        }) : appStudio.Animation.slideInDown({
+          duration: durationStr,
+          delay: delayStr,
+          timingFunction: 'ease-out',
+          fillMode: 'both'
+        });
+      } else if (phase === 'exiting') {
+        // Custom animation objects for exiting (slideOut not in app-studio yet)
+        wordAnimation = isUp ? {
+          from: {
+            transform: 'translateY(0)',
+            opacity: 1
+          },
+          to: {
+            transform: 'translateY(-100%)',
+            opacity: 0
+          },
+          duration: durationStr,
+          delay: delayStr,
+          timingFunction: 'ease-in',
+          fillMode: 'both'
+        } : {
+          from: {
+            transform: 'translateY(0)',
+            opacity: 1
+          },
+          to: {
+            transform: 'translateY(100%)',
+            opacity: 0
+          },
+          duration: durationStr,
+          delay: delayStr,
+          timingFunction: 'ease-in',
+          fillMode: 'both'
+        };
+      }
       var wordStyle = Object.assign({}, customWordStyle, {
         display: 'inline-block',
         marginRight: isLast ? 0 : '0.25em',
-        willChange: isAnimating ? 'transform, opacity' : 'auto',
-        animation: isAnimating ? currentAnim + " " + duration + "ms ease-out " + delay + "ms both" : 'none',
         transform: phase === 'visible' ? 'translateY(0)' : undefined,
         opacity: phase === 'visible' ? 1 : undefined
       });
       return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
         key: animKey + "-" + index,
-        as: "span"
+        as: "span",
+        animate: wordAnimation
       }, restWordProps, {
         style: wordStyle
       }), word);
@@ -19422,7 +19449,7 @@
 
   var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "centered", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential"];
   function escapeRegExp(string) {
-    return string.replace(/[.*+?^${}()|[\\]\\/g, '\\$&');
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
   }
   var TitleView = _ref => {
     var {
@@ -19518,7 +19545,13 @@
     // Get the text to display
     var text = typeof finalDisplayedText === 'string' ? finalDisplayedText : typeof children === 'string' ? children : '';
     if (typeof text === 'string' && activeHighlightTarget) {
-      var pattern = new RegExp("(" + escapeRegExp(Array.isArray(activeHighlightTarget) ? activeHighlightTarget.join('|') : activeHighlightTarget) + ")", 'gi');
+      var pattern = (() => {
+        if (Array.isArray(activeHighlightTarget)) {
+          var escaped = activeHighlightTarget.map(t => escapeRegExp(String(t)));
+          return new RegExp("(" + escaped.join('|') + ")", 'gi');
+        }
+        return new RegExp("(" + escapeRegExp(String(activeHighlightTarget)) + ")", 'gi');
+      })();
       var parts = [];
       var lastIndex = 0;
       var match;