@app-studio/web 0.9.76 → 0.9.78

package/dist/web.cjs.development.js

@@ -41,6 +41,7 @@ require('core-js/modules/es.regexp.constructor.js');
 require('core-js/modules/es.regexp.exec.js');
 var formik = require('formik');
 require('core-js/modules/es.string.replace.js');
+require('core-js/modules/es.string.split.js');
 require('core-js/modules/es.promise.finally.js');
 require('core-js/modules/es.string.match.js');
 require('core-js/modules/es.string.search.js');
@@ -17160,9 +17161,17 @@ var TypewriterEffect = _ref => {
     }, typingSpeed);
     return () => clearTimeout(timeout);
   }, [textArray, currentTextIndex, charIndex, isComplete, onComplete, pauseTime, typingSpeed]);
+  var renderWithLineBreaks = text => {
+    if (!text || typeof text !== 'string') return text;
+    var parts = text.split('|');
+    if (parts.length === 1) return text;
+    return parts.map((part, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: index
+    }, part, index < parts.length - 1 && /*#__PURE__*/React__default.createElement("br", null))));
+  };
   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(TextComponent, Object.assign({
+  }, renderWithLineBreaks(text), showCursor && index === currentTextIndex && !isComplete && (/*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
     as: "span",
     display: "inline-block",
     width: "0.1em",
@@ -17213,20 +17222,30 @@ var SlideEffect = _ref => {
     }
   }, [text, displayedText, phase]);
   // Calculate animation durations
-  var words = React.useMemo(() => displayedText.split(' '), [displayedText]);
-  var wordCount = words.length;
+  var {
+    lines,
+    totalWordCount
+  } = React.useMemo(() => {
+    var rawLines = displayedText.split('|');
+    var processedLines = rawLines.map(line => line.trim().split(/\s+/).filter(w => w.length > 0));
+    var count = processedLines.reduce((acc, line) => acc + line.length, 0);
+    return {
+      lines: processedLines,
+      totalWordCount: count
+    };
+  }, [displayedText]);
   var totalEnterDuration = React.useMemo(() => {
     if (sequential) {
-      return wordCount * (duration + stagger);
+      return totalWordCount * (duration + stagger);
     }
-    return (wordCount - 1) * stagger + duration;
-  }, [wordCount, duration, stagger, sequential]);
+    return (totalWordCount - 1) * stagger + duration;
+  }, [totalWordCount, duration, stagger, sequential]);
   var totalExitDuration = React.useMemo(() => {
     if (sequential) {
-      return wordCount * (duration + stagger);
+      return totalWordCount * (duration + stagger);
     }
-    return (wordCount - 1) * stagger + duration;
-  }, [wordCount, duration, stagger, sequential]);
+    return (totalWordCount - 1) * stagger + duration;
+  }, [totalWordCount, duration, stagger, sequential]);
   // Handle phase transitions
   React.useEffect(() => {
     if (timeoutRef.current) {
@@ -17275,25 +17294,32 @@ var SlideEffect = _ref => {
   var containerStyle = React.useMemo(() => Object.assign({
     display: 'inline-block',
     position: 'relative',
-    overflow: 'hidden',
     verticalAlign: 'bottom',
     whiteSpace: 'nowrap',
     lineHeight: 'normal'
   }, textStyle), [textStyle]);
-  // Word row container style
-  var wordRowStyle = React.useMemo(() => ({
+  var linesContainerStyle = React.useMemo(() => ({
     display: 'inline-flex',
-    flexWrap: 'nowrap',
+    flexDirection: 'column',
+    alignItems: 'center'
+  }), []);
+  var lineStyle = React.useMemo(() => ({
+    display: 'block',
     whiteSpace: 'nowrap'
   }), []);
+  var globalWordIndex = 0;
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "span",
     style: containerStyle
   }, props), /*#__PURE__*/React__default.createElement("span", {
-    style: wordRowStyle
-  }, words.map((word, index) => {
-    var delay = getDelay(index);
-    var isLast = index === words.length - 1;
+    style: linesContainerStyle
+  }, lines.map((lineWords, lineIndex) => (/*#__PURE__*/React__default.createElement("span", {
+    key: "line-" + lineIndex,
+    style: lineStyle
+  }, lineWords.map((word, wordIndex) => {
+    var currentGlobalIndex = globalWordIndex++;
+    var delay = getDelay(currentGlobalIndex);
+    var isLastInLine = wordIndex === lineWords.length - 1;
     // Create animation based on phase and direction
     var wordAnimation;
     var durationStr = duration + "ms";
@@ -17312,7 +17338,7 @@ var SlideEffect = _ref => {
         fillMode: 'both'
       });
     } else if (phase === 'exiting') {
-      // Custom animation objects for exiting (slideOut not in app-studio yet)
+      // Custom animation objects for exiting
       wordAnimation = isUp ? {
         from: {
           transform: 'translateY(0)',
@@ -17343,22 +17369,30 @@ var SlideEffect = _ref => {
     }
     var wordStyle = Object.assign({}, customWordStyle, {
       display: 'inline-block',
-      marginRight: isLast ? 0 : '0.25em',
+      marginRight: isLastInLine ? 0 : '0.25em',
       transform: phase === 'visible' ? 'translateY(0)' : undefined,
       opacity: phase === 'visible' ? 1 : undefined
     });
     return /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
-      key: animKey + "-" + index,
+      key: animKey + "-" + lineIndex + "-" + wordIndex,
       as: "span",
       animate: wordAnimation
     }, restWordProps, wordStyle), word);
-  })));
+  }))))));
 };
 
 var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode", "textComponent"];
 function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
+var renderWithLineBreaks = text => {
+  if (!text || typeof text !== 'string') return text;
+  var parts = text.split('|');
+  if (parts.length === 1) return text;
+  return parts.map((part, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    key: index
+  }, part, index < parts.length - 1 && /*#__PURE__*/React__default.createElement("br", null))));
+};
 var TitleView = _ref => {
   var {
       children,
@@ -17492,7 +17526,7 @@ var TitleView = _ref => {
         textComponent: TextComponent
       });
     }
-    return content;
+    return renderWithLineBreaks(content);
   };
   // Case 1: Has highlight target - render with highlighted parts
   if (typeof text === 'string' && activeHighlightTarget) {
@@ -17515,7 +17549,7 @@ var TitleView = _ref => {
       key: "text-" + idx,
       as: "span",
       display: "inline"
-    }, part)) : (/*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
+    }, renderWithLineBreaks(part))) : (/*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
       key: "highlight-" + idx,
       as: "span",
       display: "inline",
@@ -17533,7 +17567,7 @@ var TitleView = _ref => {
     }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(text)));
   }
   // Case 3: Default - no highlighting
-  return /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), text);
+  return /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), renderWithLineBreaks(text));
 };
 
 /**
@@ -25599,7 +25633,7 @@ var _excluded$1o = ["children", "showRadialGradient", "views", "themeMode"],
   _excluded7 = ["children", "src", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundAttachment", "imageOpacity", "overlay", "blendMode", "views", "themeMode"],
   _excluded8 = ["children", "src", "autoPlay", "loop", "muted", "playsInline", "overlay", "blendMode", "views", "themeMode"],
   _excluded9 = ["children"],
-  _excluded10 = ["contentPosition"],
+  _excluded10 = ["contentPosition", "backgroundColor"],
   _excluded11 = ["children", "views"],
   _excluded12 = ["children", "designProps", "shape", "decorationRotation", "decorationScale", "decorationOpacity", "views"];
 // Background Context
@@ -26054,23 +26088,34 @@ var BackgroundGradient = _ref9 => {
  */
 var BackgroundOverlay = _ref10 => {
   var {
-      contentPosition
+      contentPosition,
+      backgroundColor = 'color.black.900'
     } = _ref10,
     props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
   var getDefaultOverlay = () => {
+    var ligthBackground = backgroundColor + ".100";
+    var darkBackground = backgroundColor + ".900";
+    var midBackground = backgroundColor + ".600";
+    var midDarkBackground = backgroundColor + ".400";
+    if (backgroundColor.indexOf('.') === -1) {
+      ligthBackground = "color-mix(in srgb, " + backgroundColor + " 10%, transparent)";
+      darkBackground = "color-mix(in srgb, " + backgroundColor + " 90%, transparent)";
+      midBackground = "color-mix(in srgb, " + backgroundColor + " 70%, transparent)";
+      midDarkBackground = "color-mix(in srgb, " + backgroundColor + " 50%, transparent)";
+    }
     switch (contentPosition) {
       case 'left':
-        return 'radial-gradient(circle at 80% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 100%)';
+        return "radial-gradient(circle at 70% 50%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to right, " + darkBackground + " 0%, " + midBackground + " 65%, " + ligthBackground + " 100%)";
       case 'right':
-        return 'radial-gradient(circle at 20% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 100%)';
+        return "radial-gradient(circle at 30% 50%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to left, " + darkBackground + " 0%, " + midBackground + " 65%, " + ligthBackground + " 100%)";
       case 'top':
-        return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.1) 100%)';
+        return "radial-gradient(circle at 50% 40%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to bottom, " + darkBackground + " 0%, " + midBackground + " 60%, " + ligthBackground + " 100%)";
       case 'bottom':
-        return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.1) 100%)';
+        return "radial-gradient(circle at 50% 60%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to top, " + darkBackground + " 0%, " + midBackground + " 60%, " + ligthBackground + " 100%)";
       case 'center':
-        return 'radial-gradient(circle at 50% 70%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%)';
+        return "radial-gradient(circle at 50% 70%, " + darkBackground + " 0%, " + ligthBackground + " 100%)";
       default:
-        return 'rgba(0,0,0,0.5)';
+        return midDarkBackground;
     }
   };
   var background = getDefaultOverlay();