@app-studio/web 0.9.75 → 0.9.77

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';
 
@@ -17016,82 +17016,6 @@
     lg: 64,
     xl: 72
   };
-  /**
-   * Responsive typography system that maps title sizes to responsive breakpoints
-   * Based on the Typography system with dynamic breakpoint sizing
-   */
-  var ResponsiveTypography = {
-    // xl maps to H1 - Largest heading
-    xl: {
-      media: {
-        mobile: {
-          fontSize: 60
-        },
-        tablet: {
-          fontSize: 60
-        },
-        desktop: {
-          fontSize: 96
-        }
-      }
-    },
-    // lg maps to H2 - Large heading
-    lg: {
-      media: {
-        mobile: {
-          fontSize: 48
-        },
-        tablet: {
-          fontSize: 48
-        },
-        desktop: {
-          fontSize: 70
-        }
-      }
-    },
-    // md maps to H3 - Medium heading
-    md: {
-      media: {
-        mobile: {
-          fontSize: 32
-        },
-        tablet: {
-          fontSize: 40
-        },
-        desktop: {
-          fontSize: 56
-        }
-      }
-    },
-    // sm maps to T1 - Title text
-    sm: {
-      media: {
-        mobile: {
-          fontSize: 20
-        },
-        tablet: {
-          fontSize: 24
-        },
-        desktop: {
-          fontSize: 32
-        }
-      }
-    },
-    // xs maps to S1 - Subtitle text
-    xs: {
-      media: {
-        mobile: {
-          fontSize: 14
-        },
-        tablet: {
-          fontSize: 18
-        },
-        desktop: {
-          fontSize: 20
-        }
-      }
-    }
-  };
   /**
    * Default styles for different highlight types
    */
@@ -17197,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",
@@ -17250,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) {
@@ -17312,24 +17254,32 @@
     var containerStyle = React.useMemo(() => Object.assign({
       display: 'inline-block',
       position: 'relative',
-      overflow: 'hidden',
       verticalAlign: 'bottom',
-      whiteSpace: 'nowrap'
+      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";
@@ -17348,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)',
@@ -17379,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", "responsive", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode", "textComponent"];
+  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,
@@ -17403,7 +17361,6 @@
         highlightColor = 'theme.primary',
         highlightSecondaryColor,
         size = 'lg',
-        responsive = true,
         views,
         highlightAnimate,
         animate,
@@ -17471,10 +17428,7 @@
       highlightSlideSequential
     }, props));
     var TextComponent = textComponent || appStudio.Text;
-    // Common style calculations
-    var useResponsive = responsive && !props.media;
     var fontSize = TitleSizes[size];
-    var responsiveStyles = useResponsive ? ResponsiveTypography[size] : null;
     // Highlight style props
     var highlightProps = HighlightStyles[highlightStyle](resolvedHighlightColor, resolvedHighlightSecondaryColor);
     // Apply loop control to animations
@@ -17499,8 +17453,7 @@
       animate: inView ? controlledAnimate : undefined
     }, !textComponent && {
       as: 'h1',
-      fontSize: useResponsive ? undefined : fontSize,
-      media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
+      fontSize
     });
     // Render highlighted text content (typewriter, slide, or plain)
     var renderHighlightedContent = content => {
@@ -17528,12 +17481,12 @@
           stagger: stateHighlightSlideStagger,
           sequential: stateHighlightSlideSequential,
           direction: "up",
-          fontSize: useResponsive ? undefined : fontSize,
+          fontSize: fontSize,
           wordProps: highlightProps,
           textComponent: TextComponent
         });
       }
-      return content;
+      return renderWithLineBreaks(content);
     };
     // Case 1: Has highlight target - render with highlighted parts
     if (typeof text === 'string' && activeHighlightTarget) {
@@ -17551,12 +17504,12 @@
       }
       if (lastIndex < text.length) parts.push(text.substring(lastIndex));
       return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-        fontSize: useResponsive ? undefined : fontSize
+        fontSize: fontSize
       }, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? (/*#__PURE__*/React__default.createElement(TextComponent, {
         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",
@@ -17574,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));
   };
 
   /**