@app-studio/web 0.9.51 → 0.9.54

package/dist/web.esm.js

@@ -5,7 +5,7 @@ import 'core-js/modules/es.array.iterator.js';
 import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.regexp.to-string.js';
-import { View, Horizontal, Vertical, Center, useTheme, Text, Image, Element, useHover, useElementPosition, Typography, Input, Form, Button as Button$1, useInView, useResponsive } from 'app-studio';
+import { View, Horizontal, Vertical, Center, useTheme, Text, Image, Element, useHover, useElementPosition, Typography, Input, Form, Button as Button$1, Animation, useInView, useResponsive } from 'app-studio';
 import 'core-js/modules/es.symbol.description.js';
 import 'core-js/modules/es.array-buffer.constructor.js';
 import 'core-js/modules/es.array-buffer.slice.js';
@@ -19302,16 +19302,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,
@@ -19328,10 +19318,6 @@ var SlideEffect = _ref => {
   var [animKey, setAnimKey] = useState(0);
   var pendingTextRef = useRef(null);
   var timeoutRef = useRef(null);
-  // Inject keyframes once on mount
-  useEffect(() => {
-    injectKeyframes();
-  }, []);
   // Handle text changes
   useEffect(() => {
     if (text === displayedText && phase === 'visible') {
@@ -19397,12 +19383,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);
@@ -19424,9 +19408,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.createElement(Element, Object.assign({
     as: "span",
     style: containerStyle
@@ -19435,17 +19416,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 ? Animation.slideInUp({
+        duration: durationStr,
+        delay: delayStr,
+        timingFunction: 'ease-out',
+        fillMode: 'both'
+      }) : 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.createElement(Text, Object.assign({
       key: animKey + "-" + index,
-      as: "span"
+      as: "span",
+      animate: wordAnimation
     }, restWordProps, {
       style: wordStyle
     }), word);
@@ -19454,7 +19481,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 {
@@ -19550,7 +19577,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;