@app-studio/web 0.9.59 → 0.9.61

package/dist/web.umd.development.js

@@ -9773,7 +9773,7 @@
       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: {
@@ -9850,8 +9850,12 @@
       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.
@@ -10708,7 +10712,7 @@
     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
@@ -15756,7 +15760,7 @@
     }))));
   };
 
-  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 {
@@ -16536,7 +16540,7 @@
     }
   };
 
-  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 {
@@ -19163,10 +19167,12 @@
    */
   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,
@@ -19175,17 +19181,21 @@
       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'
     }),
@@ -19455,7 +19465,7 @@
     })));
   };
 
-  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, '\\$&');
   }
@@ -19478,7 +19488,8 @@
         highlightSlide: propHighlightSlide = false,
         highlightSlideDuration = 500,
         highlightSlideStagger = 50,
-        highlightSlideSequential = true
+        highlightSlideSequential = true,
+        themeMode: elementMode
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
     var {
@@ -19487,29 +19498,15 @@
     } = appStudio.useInView();
     var {
       getColor,
-      themeMode: ctxMode
+      themeMode
     } = appStudio.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,
@@ -19529,12 +19526,13 @@
       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)) {
@@ -19546,109 +19544,88 @@
         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__default.createElement("span", {
+          style: {
+            opacity: 0
+          }
+        }, content);
+      }
+      if (highlightTypewriter) {
+        return /*#__PURE__*/React__default.createElement(TypewriterEffect, Object.assign({
+          text: content,
+          typingSpeed: Math.max(30, highlightTypewriterDuration / (content.length * 10)),
+          showCursor: true,
+          cursorColor: "currentColor"
+        }, highlightProps));
+      }
+      if (highlightSlide) {
+        return /*#__PURE__*/React__default.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__default.createElement(appStudio.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__default.createElement(appStudio.Text, Object.assign({
+      if (lastIndex < text.length) parts.push(text.substring(lastIndex));
+      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(TypewriterEffect, {
-        text: part.text,
-        typingSpeed: Math.max(30, highlightTypewriterDuration / (part.text.length * 10)),
-        showCursor: true,
-        cursorColor: "currentColor"
-      })) : highlightSlide ? (/*#__PURE__*/React__default.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__default.createElement(appStudio.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__default.createElement(appStudio.Text, Object.assign({
+      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(TypewriterEffect, {
-        text: text,
-        typingSpeed: Math.max(30, highlightTypewriterDuration / (text.length * 10)),
-        showCursor: true,
-        cursorColor: "currentColor"
-      })) : highlightSlide ? (/*#__PURE__*/React__default.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__default.createElement(appStudio.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__default.createElement(appStudio.Text, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), text);
   };
 
   /**
@@ -20915,7 +20892,7 @@
     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
@@ -23282,7 +23259,7 @@
     };
   };
 
-  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
@@ -24450,7 +24427,7 @@
     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