@app-studio/web 0.9.59 → 0.9.61

package/dist/web.esm.js

@@ -9804,7 +9804,7 @@ var TextAreaView = _ref => {
     maxHeight: 'calc(100vh - 100px)',
     height: 'calc(5em)',
     border: 'none',
-    resize: 'vertical',
+    // resize property removed to avoid type error, added via style prop
     // Focus state
     on: {
       focus: {
@@ -9881,8 +9881,12 @@ var TextAreaView = _ref => {
     onBlur: handleBlur,
     onFocus: handleFocus,
     multiline: "" + !!isMultiline.toString(),
-    onChange: handleChange
-  }, fieldStyles, views == null ? void 0 : views.textarea)))));
+    onChange: e => handleChange(e)
+  }, fieldStyles, {
+    style: {
+      resize: 'vertical'
+    }
+  }, views == null ? void 0 : views.textarea)))));
 };
 
 // Defines the TextAreaComponent as a functional component that accepts TextAreaProps for type safety and structure.
@@ -10739,7 +10743,7 @@ var DefaultColorPalette = [
   value: 'transparent'
 }];
 
-var _excluded$y = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "shadow", "error", "isDisabled", "isReadOnly", "isFocused", "isHovered", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "setIsFocused", "setIsHovered", "triggerRef", "dropdownRef"];
+var _excluded$y = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "shadow", "error", "isDisabled", "isReadOnly", "isFocused", "isHovered", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "setIsFocused", "setIsHovered", "triggerRef", "dropdownRef", "onChange"];
 var ColorInputView = _ref => {
   var {
       // Basic props
@@ -15787,7 +15791,7 @@ var AudioRecorder = _ref => {
   }))));
 };
 
-var _excluded$M = ["onSubmit", "placeholder", "loading", "disabled", "isAgentRunning", "enableAudioRecording", "leftButtons", "rightButtons", "onStopAgent", "loadingText", "autoFocus", "sandboxId", "hideAttachments", "attachmentText", "promptExamples", "suggestions", "errorMessage", "size", "shape", "variant", "views", "mentionData", "mentionTrigger", "onMentionSelect", "onAudioRecordingStart", "onAudioRecordingStop", "value", "handleChange", "handleSubmit", "editableRef", "fileInputRef", "isUploading", "uploadProgress", "isDraggingOver", "uploadedFiles", "removeUploadedFile", "setPendingFiles", "setUploadedFiles", "setIsUploading", "startUpload", "selectedModel", "handleModelChange", "modelOptions", "subscriptionStatus", "canAccessModel", "isGuideTipShown", "hideGuideTip", "handlePromptExampleSelect", "handleDragOver", "handleDragLeave"];
+var _excluded$M = ["onSubmit", "placeholder", "loading", "disabled", "isAgentRunning", "enableAudioRecording", "leftButtons", "rightButtons", "onStopAgent", "loadingText", "autoFocus", "sandboxId", "hideAttachments", "attachmentText", "promptExamples", "suggestions", "errorMessage", "size", "shape", "variant", "views", "mentionData", "mentionTrigger", "onMentionSelect", "onAudioRecordingStart", "onAudioRecordingStop", "value", "handleChange", "handleSubmit", "editableRef", "fileInputRef", "isUploading", "uploadProgress", "isDraggingOver", "uploadedFiles", "removeUploadedFile", "setPendingFiles", "setUploadedFiles", "setIsUploading", "startUpload", "selectedModel", "handleModelChange", "modelOptions", "subscriptionStatus", "canAccessModel", "isGuideTipShown", "hideGuideTip", "handlePromptExampleSelect", "handleDragOver", "handleDragLeave", "onChange"];
 var ChatInputView = _ref => {
   var _value$trim$length;
   var {
@@ -16567,7 +16571,7 @@ var OrientationStyles = {
   }
 };
 
-var _excluded$S = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "backgroundColor", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views"];
+var _excluded$S = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "backgroundColor", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views", "onChange", "onDrag"];
 var SliderView = _ref => {
   var _views$tooltip, _views$tooltip2;
   var {
@@ -19194,10 +19198,12 @@ var ResponsiveTypography = {
  */
 var HighlightStyles = {
   underline: color => ({
-    textDecoration: 'underline',
-    textDecorationColor: color,
-    textDecorationThickness: '4px',
-    textUnderlineOffset: '4px'
+    style: {
+      textDecoration: 'underline',
+      textDecorationColor: color,
+      textDecorationThickness: '4px',
+      textUnderlineOffset: '4px'
+    }
   }),
   background: color => ({
     backgroundColor: color,
@@ -19206,17 +19212,21 @@ var HighlightStyles = {
     borderRadius: '4px'
   }),
   gradient: (color, secondaryColor) => ({
-    background: "linear-gradient(135deg, " + color + ", " + (secondaryColor || color) + ")",
-    backgroundClip: 'text !important',
-    webkitBackgroundClip: 'text !important',
+    style: {
+      background: "linear-gradient(135deg, " + color + ", " + (secondaryColor || color) + ")",
+      backgroundClip: 'text',
+      WebkitBackgroundClip: 'text',
+      WebkitTextFillColor: 'transparent'
+    },
     color: 'transparent',
-    webkitTextFillColor: 'transparent',
     display: 'inline-block',
     textShadow: 'none'
   }),
   outline: color => ({
-    webkitTextStroke: "1px " + color,
-    webkitTextFillColor: 'transparent',
+    style: {
+      WebkitTextStroke: "1px " + color,
+      WebkitTextFillColor: 'transparent'
+    },
     color: 'transparent',
     textShadow: 'none'
   }),
@@ -19486,7 +19496,7 @@ var SlideEffect = _ref => {
   })));
 };
 
-var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential"];
+var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode"];
 function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
@@ -19509,7 +19519,8 @@ var TitleView = _ref => {
       highlightSlide: propHighlightSlide = false,
       highlightSlideDuration = 500,
       highlightSlideStagger = 50,
-      highlightSlideSequential = true
+      highlightSlideSequential = true,
+      themeMode: elementMode
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   var {
@@ -19518,29 +19529,15 @@ var TitleView = _ref => {
   } = useInView();
   var {
     getColor,
-    themeMode: ctxMode
+    themeMode
   } = useTheme();
-  var themeMode = props.themeMode || ctxMode;
-  // Resolve colors, handling both theme colors and direct hex values
-  var resolveColorValue = colorValue => {
-    // If it's already a hex color, return it directly
-    if (colorValue.startsWith('#')) {
-      return colorValue;
-    }
-    // Otherwise, use the theme's getColor function
-    return getColor(colorValue, {
-      themeMode
-    });
-  };
-  var resolvedColor = resolveColorValue(highlightColor);
-  var resolvedSecondary = highlightSecondaryColor ? resolveColorValue(highlightSecondaryColor) : undefined;
-  var baseHighlightProps = HighlightStyles[highlightStyle](resolvedColor, resolvedSecondary);
-  var highlightViewProps = highlightStyle === 'background' ? Object.assign({}, baseHighlightProps, {
-    color: undefined
-  }) : baseHighlightProps;
-  var highlightBackgroundOverrides = highlightStyle === 'background' ? {
-    bgColor: resolvedColor
-  } : {};
+  var currentThemeMode = elementMode || themeMode;
+  var resolvedHighlightColor = getColor(highlightColor, {
+    themeMode: currentThemeMode
+  });
+  var resolvedHighlightSecondaryColor = highlightSecondaryColor ? getColor(highlightSecondaryColor, {
+    themeMode: currentThemeMode
+  }) : undefined;
   var {
     finalDisplayedText,
     activeHighlightTarget,
@@ -19560,12 +19557,13 @@ var TitleView = _ref => {
     highlightSlideStagger,
     highlightSlideSequential
   }, props));
-  // Determine if we should use responsive sizing or static sizing
-  var useResponsive = responsive && !props.media; // Don't override if media prop is already provided
+  // Common style calculations
+  var useResponsive = responsive && !props.media;
   var fontSize = TitleSizes[size];
-  // Get responsive styles if responsive prop is true
   var responsiveStyles = useResponsive ? ResponsiveTypography[size] : null;
-  // Helper function to apply loop control to animations
+  // Highlight style props
+  var highlightProps = HighlightStyles[highlightStyle](resolvedHighlightColor, resolvedHighlightSecondaryColor);
+  // Apply loop control to animations
   var applyAnimationLoop = (animation, loopControl) => {
     if (!animation) return animation;
     if (Array.isArray(animation)) {
@@ -19577,109 +19575,88 @@ var TitleView = _ref => {
       iterationCount: loopControl.toString()
     });
   };
-  // Apply loop control to animations
   var controlledAnimate = applyAnimationLoop(animate, animationLoop);
   var controlledHighlightAnimate = applyAnimationLoop(highlightAnimate, highlightAnimationLoop);
   // Get the text to display
   var text = typeof finalDisplayedText === 'string' ? finalDisplayedText : typeof children === 'string' ? children : '';
+  // Common container props
+  var containerProps = {
+    ref,
+    as: 'h1',
+    fontSize: useResponsive ? undefined : fontSize,
+    fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
+    letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
+    marginBottom: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.marginBottom : undefined,
+    animate: inView ? controlledAnimate : undefined,
+    media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
+  };
+  // Render highlighted text content (typewriter, slide, or plain)
+  var renderHighlightedContent = content => {
+    // If animations are enabled but not in view, render invisible placeholder
+    // This holds layout space and prevents animations (like typewriter) from running off-screen
+    if (!inView && (highlightTypewriter || highlightSlide)) {
+      return /*#__PURE__*/React.createElement("span", {
+        style: {
+          opacity: 0
+        }
+      }, content);
+    }
+    if (highlightTypewriter) {
+      return /*#__PURE__*/React.createElement(TypewriterEffect, Object.assign({
+        text: content,
+        typingSpeed: Math.max(30, highlightTypewriterDuration / (content.length * 10)),
+        showCursor: true,
+        cursorColor: "currentColor"
+      }, highlightProps));
+    }
+    if (highlightSlide) {
+      return /*#__PURE__*/React.createElement(SlideEffect, {
+        text: content,
+        duration: stateHighlightSlideDuration,
+        stagger: stateHighlightSlideStagger,
+        sequential: stateHighlightSlideSequential,
+        direction: "up",
+        fontSize: useResponsive ? undefined : fontSize,
+        fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
+        wordProps: highlightProps
+      });
+    }
+    return content;
+  };
+  // Case 1: Has highlight target - render with highlighted parts
   if (typeof text === 'string' && activeHighlightTarget) {
-    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 pattern = Array.isArray(activeHighlightTarget) ? new RegExp("(" + activeHighlightTarget.map(t => escapeRegExp(String(t))).join('|') + ")", 'gi') : new RegExp("(" + escapeRegExp(String(activeHighlightTarget)) + ")", 'gi');
     var parts = [];
     var lastIndex = 0;
     var match;
     while (match = pattern.exec(text)) {
-      if (match.index > lastIndex) {
-        parts.push(text.substring(lastIndex, match.index));
-      }
+      if (match.index > lastIndex) parts.push(text.substring(lastIndex, match.index));
       parts.push({
         highlight: true,
         text: match[0]
       });
       lastIndex = match.index + match[0].length;
     }
-    if (lastIndex < text.length) {
-      parts.push(text.substring(lastIndex));
-    }
-    return /*#__PURE__*/React.createElement(Element, Object.assign({
-      ref: ref,
-      as: "h1",
-      fontSize: useResponsive ? undefined : fontSize,
-      fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
-      letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
-      marginBottom: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.marginBottom : undefined,
-      animate: inView ? controlledAnimate : undefined,
-      media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
-    }, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React.createElement(Text, Object.assign({
+    if (lastIndex < text.length) parts.push(text.substring(lastIndex));
+    return /*#__PURE__*/React.createElement(Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React.createElement(Text, Object.assign({
       key: "highlight-" + idx,
       as: "span",
       display: "inline",
       animate: inView ? controlledHighlightAnimate : undefined,
       fontSize: useResponsive ? undefined : fontSize
-    }, !highlightSlide ? highlightViewProps : {}, highlightBackgroundOverrides, views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React.createElement(TypewriterEffect, {
-      text: part.text,
-      typingSpeed: Math.max(30, highlightTypewriterDuration / (part.text.length * 10)),
-      showCursor: true,
-      cursorColor: "currentColor"
-    })) : highlightSlide ? (/*#__PURE__*/React.createElement(SlideEffect, {
-      text: part.text,
-      duration: stateHighlightSlideDuration,
-      stagger: stateHighlightSlideStagger,
-      sequential: stateHighlightSlideSequential,
-      direction: "up",
-      fontSize: useResponsive ? undefined : fontSize,
-      fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
-      wordProps: highlightViewProps
-    })) : part.text))));
+    }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(part.text)))));
   }
-  // If highlightStyle is provided but no highlightText, apply the style to the entire title
+  // Case 2: Has highlight style but no highlight target - apply style to entire title
   if (highlightStyle && !activeHighlightTarget) {
-    return /*#__PURE__*/React.createElement(Element, Object.assign({
-      ref: ref,
-      as: "h1",
-      fontSize: useResponsive ? undefined : fontSize,
-      fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
-      letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
-      marginBottom: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.marginBottom : undefined,
-      animate: inView ? controlledAnimate : undefined,
-      media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
-    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React.createElement(Text, Object.assign({
+    return /*#__PURE__*/React.createElement(Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), /*#__PURE__*/React.createElement(Text, Object.assign({
       as: "span",
       fontSize: fontSize,
       display: "inline",
       animate: inView ? controlledHighlightAnimate : undefined
-    }, !highlightSlide ? highlightViewProps : {}, highlightBackgroundOverrides, views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React.createElement(TypewriterEffect, {
-      text: text,
-      typingSpeed: Math.max(30, highlightTypewriterDuration / (text.length * 10)),
-      showCursor: true,
-      cursorColor: "currentColor"
-    })) : highlightSlide ? (/*#__PURE__*/React.createElement(SlideEffect, {
-      text: text,
-      duration: stateHighlightSlideDuration,
-      stagger: stateHighlightSlideStagger,
-      sequential: stateHighlightSlideSequential,
-      direction: "up",
-      fontSize: fontSize,
-      fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
-      wordProps: highlightViewProps
-    })) : text));
+    }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(text)));
   }
-  // Default case - no highlighting
-  return /*#__PURE__*/React.createElement(Text, Object.assign({
-    ref: ref,
-    as: "h1",
-    fontSize: fontSize,
-    fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
-    letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
-    marginBottom: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.marginBottom : undefined,
-    animate: inView ? controlledAnimate : undefined,
-    media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
-  }, views == null ? void 0 : views.container, props), text);
+  // Case 3: Default - no highlighting
+  return /*#__PURE__*/React.createElement(Text, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), text);
 };
 
 /**
@@ -20946,7 +20923,7 @@ var DefaultColorPalette$1 = [
   category: 'neutral'
 }];
 
-var _excluded$14 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
+var _excluded$14 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef", "onChange"];
 var ColorPickerView = _ref => {
   var {
       // Basic props
@@ -23313,7 +23290,7 @@ var useEmojiPickerState = props => {
   };
 };
 
-var _excluded$15 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
+var _excluded$15 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef", "onChange"];
 var EmojiPickerView = _ref => {
   var {
       // Basic props
@@ -24481,7 +24458,7 @@ var SeparatorView = _ref => {
   var borderWidth = SeparatorThicknesses[thickness];
   // Set appropriate ARIA attributes based on decorative prop
   var ariaProps = decorative ? {
-    'aria-hidden': 'true'
+    'aria-hidden': true
   } : {
     role: 'separator',
     'aria-orientation': orientation