@app-studio/web 0.9.59 → 0.9.60

package/dist/components/ChatInput/ChatInput/ChatInput.props.d.ts

@@ -5,7 +5,7 @@ import { Suggestion } from '../EditableInput';
 /**
  * Props for the ChatInput component
  */
-export interface ChatInputProps extends ViewProps {
+export interface ChatInputProps extends Omit<ViewProps, 'onChange'> {
     /**
      * Get the pending files
      */

package/dist/components/ColorPicker/ColorPicker/ColorPicker.props.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ViewProps } from 'app-studio';
 import { Variant, Shape, Size, ColorPickerStyles, ColorFormat, PredefinedColor } from './ColorPicker.type';
-export interface ColorPickerProps extends ViewProps {
+export interface ColorPickerProps extends Omit<ViewProps, 'onChange'> {
     id?: string;
     name?: string;
     label?: string;

package/dist/components/DragAndDrop/DragAndDrop/DragAndDrop.props.d.ts

@@ -7,7 +7,7 @@ export interface DragAndDropProps {
     containerProps?: ViewProps;
     itemProps?: ViewProps;
 }
-export interface DragAndDropViewProps extends DragAndDropProps, ViewProps {
+export interface DragAndDropViewProps extends DragAndDropProps, Omit<ViewProps, 'onChange'> {
     draggedIndex: number | null;
     itemRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
     renderItem?: (item: any, index: number) => React.ReactNode;

package/dist/components/EmojiPicker/EmojiPicker/EmojiPicker.props.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ViewProps } from 'app-studio';
 import { Variant, Shape, Size, EmojiPickerStyles, EmojiCategory, Emoji } from './EmojiPicker.type';
-export interface EmojiPickerProps extends ViewProps {
+export interface EmojiPickerProps extends Omit<ViewProps, 'onChange'> {
     id?: string;
     name?: string;
     label?: string;

package/dist/components/Slider/Slider/Slider.props.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { InputProps, ViewProps } from 'app-studio';
 import { Orientation, Shape, Size, SliderStyles, Variant } from './Slider.type';
-export interface SliderProps extends Omit<InputProps, 'size' | 'onChange'> {
+export interface SliderProps extends Omit<InputProps, 'size' | 'onChange' | 'onDrag'> {
     /**
      * The minimum value of the slider
      */

package/dist/components/Title/Title/SlideEffect.d.ts

@@ -8,6 +8,7 @@ interface SlideEffectProps {
     textStyle?: React.CSSProperties;
     as?: React.ElementType;
     wordProps?: any;
+    bgColor?: string;
     [key: string]: any;
 }
 export declare const SlideEffect: React.FC<SlideEffectProps>;

package/dist/pages/title.page.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
-/**
- * Title component showcase page
- */
 declare const TitlePage: () => React.JSX.Element;
 export default TitlePage;

package/dist/web.cjs.development.js

@@ -9811,7 +9811,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: {
@@ -9888,8 +9888,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.
@@ -10746,7 +10750,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
@@ -15794,7 +15798,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 {
@@ -16574,7 +16578,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 {
@@ -19201,10 +19205,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,
@@ -19213,17 +19219,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'
   }),
@@ -19523,31 +19533,6 @@ var TitleView = _ref => {
     ref,
     inView
   } = appStudio.useInView();
-  var {
-    getColor,
-    themeMode: ctxMode
-  } = 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 {
     finalDisplayedText,
     activeHighlightTarget,
@@ -19567,12 +19552,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](highlightColor, highlightSecondaryColor);
+  // Apply loop control to animations
   var applyAnimationLoop = (animation, loopControl) => {
     if (!animation) return animation;
     if (Array.isArray(animation)) {
@@ -19584,109 +19570,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__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);
 };
 
 /**
@@ -20953,7 +20918,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
@@ -23320,7 +23285,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
@@ -24488,7 +24453,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