@app-studio/web 0.9.75 → 0.9.77

package/dist/web.esm.js

@@ -34,6 +34,7 @@ import 'core-js/modules/es.regexp.constructor.js';
 import 'core-js/modules/es.regexp.exec.js';
 import { useFormikContext, getIn } from 'formik';
 import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/es.string.split.js';
 import 'core-js/modules/es.promise.finally.js';
 import 'core-js/modules/es.string.match.js';
 import 'core-js/modules/es.string.search.js';
@@ -17048,82 +17049,6 @@ var TitleSizes = {
   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
  */
@@ -17229,9 +17154,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.createElement(React.Fragment, {
+      key: index
+    }, part, index < parts.length - 1 && /*#__PURE__*/React.createElement("br", null))));
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, displayedText.map((text, index) => (/*#__PURE__*/React.createElement(React.Fragment, {
     key: index
-  }, text, showCursor && index === currentTextIndex && !isComplete && (/*#__PURE__*/React.createElement(TextComponent, Object.assign({
+  }, renderWithLineBreaks(text), showCursor && index === currentTextIndex && !isComplete && (/*#__PURE__*/React.createElement(TextComponent, Object.assign({
     as: "span",
     display: "inline-block",
     width: "0.1em",
@@ -17282,20 +17215,30 @@ var SlideEffect = _ref => {
     }
   }, [text, displayedText, phase]);
   // Calculate animation durations
-  var words = useMemo(() => displayedText.split(' '), [displayedText]);
-  var wordCount = words.length;
+  var {
+    lines,
+    totalWordCount
+  } = 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 = 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 = 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
   useEffect(() => {
     if (timeoutRef.current) {
@@ -17344,24 +17287,32 @@ var SlideEffect = _ref => {
   var containerStyle = 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 = useMemo(() => ({
+  var linesContainerStyle = useMemo(() => ({
     display: 'inline-flex',
-    flexWrap: 'nowrap',
+    flexDirection: 'column',
+    alignItems: 'center'
+  }), []);
+  var lineStyle = useMemo(() => ({
+    display: 'block',
     whiteSpace: 'nowrap'
   }), []);
+  var globalWordIndex = 0;
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "span",
     style: containerStyle
   }, props), /*#__PURE__*/React.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.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";
@@ -17380,7 +17331,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)',
@@ -17411,22 +17362,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.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.createElement(React.Fragment, {
+    key: index
+  }, part, index < parts.length - 1 && /*#__PURE__*/React.createElement("br", null))));
+};
 var TitleView = _ref => {
   var {
       children,
@@ -17435,7 +17394,6 @@ var TitleView = _ref => {
       highlightColor = 'theme.primary',
       highlightSecondaryColor,
       size = 'lg',
-      responsive = true,
       views,
       highlightAnimate,
       animate,
@@ -17503,10 +17461,7 @@ var TitleView = _ref => {
     highlightSlideSequential
   }, props));
   var TextComponent = textComponent || 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
@@ -17531,8 +17486,7 @@ var TitleView = _ref => {
     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 => {
@@ -17560,12 +17514,12 @@ var TitleView = _ref => {
         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) {
@@ -17583,12 +17537,12 @@ var TitleView = _ref => {
     }
     if (lastIndex < text.length) parts.push(text.substring(lastIndex));
     return /*#__PURE__*/React.createElement(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.createElement(TextComponent, {
       key: "text-" + idx,
       as: "span",
       display: "inline"
-    }, part)) : (/*#__PURE__*/React.createElement(TextComponent, Object.assign({
+    }, renderWithLineBreaks(part))) : (/*#__PURE__*/React.createElement(TextComponent, Object.assign({
       key: "highlight-" + idx,
       as: "span",
       display: "inline",
@@ -17606,7 +17560,7 @@ var TitleView = _ref => {
     }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(text)));
   }
   // Case 3: Default - no highlighting
-  return /*#__PURE__*/React.createElement(TextComponent, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), text);
+  return /*#__PURE__*/React.createElement(TextComponent, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), renderWithLineBreaks(text));
 };
 
 /**