@app-studio/web 0.9.51 → 0.9.54

package/dist/web.cjs.development.js

@@ -19309,16 +19309,6 @@ var TypewriterEffect = _ref => {
 
 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,
@@ -19335,10 +19325,6 @@ var SlideEffect = _ref => {
   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') {
@@ -19404,12 +19390,10 @@ var SlideEffect = _ref => {
       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);
@@ -19431,9 +19415,6 @@ var SlideEffect = _ref => {
     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
@@ -19442,17 +19423,63 @@ var SlideEffect = _ref => {
   }, 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);
@@ -19461,7 +19488,7 @@ var SlideEffect = _ref => {
 
 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 {
@@ -19557,7 +19584,13 @@ var TitleView = _ref => {
   // 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;