@app-studio/web 0.9.76 → 0.9.78

package/dist/web.umd.development.js

@@ -1,6 +1,6 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('lucide-react/dynamic'), require('core-js/modules/es.array-buffer.constructor.js'), require('core-js/modules/es.array-buffer.slice.js'), require('core-js/modules/es.typed-array.uint8-array.js'), require('core-js/modules/es.typed-array.fill.js'), require('core-js/modules/es.typed-array.set.js'), require('core-js/modules/es.typed-array.sort.js'), require('core-js/modules/es.typed-array.to-locale-string.js'), require('core-js/modules/es.string.starts-with.js'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.parse-int.js'), require('react-router-dom'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.ends-with.js'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('date-fns/format'), require('core-js/modules/es.string.trim.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/es.string.replace.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'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'lucide-react/dynamic', 'core-js/modules/es.array-buffer.constructor.js', 'core-js/modules/es.array-buffer.slice.js', 'core-js/modules/es.typed-array.uint8-array.js', 'core-js/modules/es.typed-array.fill.js', 'core-js/modules/es.typed-array.set.js', 'core-js/modules/es.typed-array.sort.js', 'core-js/modules/es.typed-array.to-locale-string.js', 'core-js/modules/es.string.starts-with.js', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.parse-int.js', 'react-router-dom', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.ends-with.js', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'date-fns/format', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.promise.finally.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('lucide-react/dynamic'), require('core-js/modules/es.array-buffer.constructor.js'), require('core-js/modules/es.array-buffer.slice.js'), require('core-js/modules/es.typed-array.uint8-array.js'), require('core-js/modules/es.typed-array.fill.js'), require('core-js/modules/es.typed-array.set.js'), require('core-js/modules/es.typed-array.sort.js'), require('core-js/modules/es.typed-array.to-locale-string.js'), require('core-js/modules/es.string.starts-with.js'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.parse-int.js'), require('react-router-dom'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.ends-with.js'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('date-fns/format'), require('core-js/modules/es.string.trim.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), 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'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'lucide-react/dynamic', 'core-js/modules/es.array-buffer.constructor.js', 'core-js/modules/es.array-buffer.slice.js', 'core-js/modules/es.typed-array.uint8-array.js', 'core-js/modules/es.typed-array.fill.js', 'core-js/modules/es.typed-array.set.js', 'core-js/modules/es.typed-array.sort.js', 'core-js/modules/es.typed-array.to-locale-string.js', 'core-js/modules/es.string.starts-with.js', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.parse-int.js', 'react-router-dom', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.ends-with.js', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'date-fns/format', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.string.split.js', 'core-js/modules/es.promise.finally.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
   (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, global.dynamic, null, null, null, null, null, null, null, null, null, null, null, global.zustand, null, global.reactRouterDom, null, null, global.contrast, null, null, null, global.format, null, null, null, global.formik));
 }(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, dynamic, es_arrayBuffer_constructor_js, es_arrayBuffer_slice_js, es_typedArray_uint8Array_js, es_typedArray_fill_js, es_typedArray_set_js, es_typedArray_sort_js, es_typedArray_toLocaleString_js, es_string_startsWith_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, es_parseInt_js, reactRouterDom, es_parseFloat_js, es_string_endsWith_js, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, format, es_string_trim_js, es_regexp_constructor_js, es_regexp_exec_js, formik) { 'use strict';
 
@@ -17121,9 +17121,17 @@
       }, 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",
@@ -17174,20 +17182,30 @@
       }
     }, [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) {
@@ -17236,25 +17254,32 @@
     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";
@@ -17273,7 +17298,7 @@
           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)',
@@ -17304,22 +17329,30 @@
       }
       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,
@@ -17453,7 +17486,7 @@
           textComponent: TextComponent
         });
       }
-      return content;
+      return renderWithLineBreaks(content);
     };
     // Case 1: Has highlight target - render with highlighted parts
     if (typeof text === 'string' && activeHighlightTarget) {
@@ -17476,7 +17509,7 @@
         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",
@@ -17494,7 +17527,7 @@
       }, !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));
   };
 
   /**
@@ -25560,7 +25593,7 @@
     _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
@@ -26015,23 +26048,34 @@
    */
   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();