@noya-app/noya-designsystem 0.1.24 → 0.1.26

package/dist/index.js

@@ -32,6 +32,7 @@ var src_exports = {};
 __export(src_exports, {
   ActivityIndicator: () => ActivityIndicator,
   ArrayController: () => ArrayController,
+  AutoResizingTextArea: () => AutoResizingTextArea,
   Avatar: () => Avatar,
   AvatarStack: () => AvatarStack,
   Body: () => Body,
@@ -115,6 +116,7 @@ __export(src_exports, {
   sketchColorToHex: () => sketchColorToHex,
   sketchColorToRgba: () => sketchColorToRgba,
   sketchColorToRgbaString: () => sketchColorToRgbaString,
+  useAutoResize: () => useAutoResize,
   useCurrentFloatingWindowInternal: () => useCurrentFloatingWindowInternal,
   useDesignSystemConfiguration: () => useDesignSystemConfiguration,
   useDesignSystemTheme: () => useDesignSystemTheme,
@@ -452,7 +454,13 @@ var ButtonElement = import_styled_components5.default.button(
       color: theme.colors.text,
       boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
       fontSize: "12px",
-      padding: "0px 4px"
+      padding: "0px 4px",
+      "&:hover": {
+        opacity: 0.8
+      },
+      "&:active": {
+        opacity: 0.9
+      }
     },
     display: "flex",
     alignItems: "center",
@@ -476,7 +484,7 @@ var ButtonContent = import_styled_components5.default.span(({ theme }) => ({
 var Button = (0, import_react6.forwardRef)(function Button2({
   id,
   className,
-  style: style3,
+  style: style2,
   flex,
   tabIndex,
   tooltip,
@@ -497,7 +505,7 @@ var Button = (0, import_react6.forwardRef)(function Button2({
       ref: forwardedRef,
       id,
       className,
-      style: style3,
+      style: style2,
       $flex: flex,
       tabIndex,
       $active: active,
@@ -551,14 +559,14 @@ var IconButton = (0, import_react8.memo)(
   (0, import_react8.forwardRef)(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
     const { icon: iconColor, iconSelected: iconSelectedColor } = (0, import_styled_components6.useTheme)().colors;
     const Icon = Icons[iconName];
-    const style3 = (0, import_react8.useMemo)(() => {
+    const style2 = (0, import_react8.useMemo)(() => {
       return {
         padding: "0 2px",
         ...size2 && { minHeight: size2 },
         ...contentStyle
       };
     }, [contentStyle, size2]);
-    return /* @__PURE__ */ import_react8.default.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style3 }, /* @__PURE__ */ import_react8.default.createElement(
+    return /* @__PURE__ */ import_react8.default.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style2 }, /* @__PURE__ */ import_react8.default.createElement(
       Icon,
       {
         color: color ?? (selected ? iconSelectedColor : iconColor),
@@ -661,26 +669,29 @@ var mediaQuery = {
 var name = "light";
 var colors = {
   logo: {
-    fill: "rgb(175,175,175)",
-    highlight: "rgb(175,175,175)"
+    fill: "rgb(150, 152, 172)",
+    highlight: "rgb(150, 152, 172)"
   },
+  background: "rgb(255,255,255)",
   text: "rgb(38, 48, 83)",
-  textMuted: "rgb(85, 85, 85)",
-  textSubtle: "rgb(121, 121, 121)",
-  textDisabled: "rgb(160, 160, 160)",
+  textMuted: "rgb(107, 113, 136)",
+  textSubtle: "rgb(117, 121, 129)",
+  textDisabled: "rgb(150, 152, 172)",
   textDecorativeLight: "rgb(168, 185, 212)",
-  dividerSubtle: "rgba(0, 0, 0, 0.04)",
-  divider: "rgba(0, 0, 0, 0.07)",
-  dividerStrong: "rgba(0, 0, 0, 0.09)",
-  primary: "rgb(132, 63, 255)",
+  dividerSubtle: "rgba(30, 50, 100, 0.04)",
+  divider: "rgba(30, 50, 100, 0.07)",
+  dividerStrong: "rgba(30, 50, 100, 0.09)",
+  primary: "rgb(103, 70, 255)",
   primaryLight: "rgb(147, 86, 255)",
+  primaryPastel: "rgba(234, 230, 255)",
   secondary: "rgb(0, 151, 117)",
   secondaryLight: "rgb(0, 160, 129)",
+  secondaryPastel: "rgb(205, 238, 231)",
   secondaryBright: "#0ab557",
   warning: "rgb(251, 211, 0)",
   neutralBackground: "rgb(222,223,232)",
-  inputBackground: "rgb(240, 240, 242)",
-  inputBackgroundLight: "rgb(243, 243, 245)",
+  inputBackground: "rgb(240, 242, 246)",
+  inputBackgroundLight: "rgb(243, 245, 249)",
   codeBackground: "rgb(250, 250, 250)",
   codeBackgroundLight: "rgb(250, 250, 250)",
   get codeBackgroundDark() {
@@ -708,6 +719,7 @@ var colors = {
     editingBackground: "#fff"
   },
   canvas: {
+    // background: "white",
     background: "rgb(249,249,249)",
     get selectionStroke() {
       return colors.primary;
@@ -718,8 +730,8 @@ var colors = {
     grid: "rgba(0,0,0,0.05)"
   },
   sidebar: {
-    background: "rgb(252,252,252)",
-    backgroundTransparent: "rgba(252,252,252,0.85)"
+    background: "rgb(255,255,255)",
+    backgroundTransparent: "rgba(255,255,255,0.85)"
   },
   popover: {
     background: "rgb(252,252,252)",
@@ -732,7 +744,7 @@ var colors = {
   radioGroup: {
     background: "white"
   },
-  icon: "rgb(139, 139, 139)",
+  icon: "rgb(129, 131, 165)",
   iconSelected: "rgb(220, 220, 220)",
   mask: "rgb(12,193,67)",
   imageOverlay: "linear-gradient(0deg, rgba(132, 63, 255,0.55), rgba(132, 63, 255,0.55))",
@@ -772,41 +784,41 @@ var textStyles = {
   heading1: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[2]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.75",
+    fontWeight: 600,
+    lineHeight: "1.6",
     letterSpacing: "-0.025em"
   },
   heading2: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[3]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75",
+    lineHeight: "1.5",
     letterSpacing: "-0.025em"
   },
   heading3: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[4]}rem`,
-    fontWeight: 500,
-    lineHeight: "1.75",
+    fontWeight: 400,
+    lineHeight: "1.4",
     letterSpacing: "-0.025em"
   },
   heading4: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[5]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75"
+    lineHeight: "1.4"
   },
   heading5: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[6]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75"
+    lineHeight: "1.4"
   },
   body: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[5]}rem`,
     fontWeight: 400,
-    lineHeight: "1.75"
+    lineHeight: "1.4"
   },
   small: {
     fontFamily: fonts.normal,
@@ -989,7 +1001,7 @@ var Dialog = (0, import_react11.forwardRef)(function Dialog2({
   title,
   description,
   open,
-  style: style3,
+  style: style2,
   onOpenChange,
   onOpenAutoFocus,
   closeOnInteractOutside = true
@@ -1007,7 +1019,7 @@ var Dialog = (0, import_react11.forwardRef)(function Dialog2({
     {
       ref: contentRef,
       onOpenAutoFocus,
-      style: style3,
+      style: style2,
       ...closeOnInteractOutside === false && {
         onPointerDownOutside: (event) => {
           event.preventDefault();
@@ -1023,7 +1035,7 @@ var Dialog = (0, import_react11.forwardRef)(function Dialog2({
     children
   ));
 });
-var FullscreenDialog = (0, import_react11.forwardRef)(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
+var FullscreenDialog = (0, import_react11.forwardRef)(function FullscreenDialog2({ style: style2, ...rest }, forwardedRef) {
   return /* @__PURE__ */ import_react11.default.createElement(
     Dialog,
     {
@@ -1039,7 +1051,7 @@ var FullscreenDialog = (0, import_react11.forwardRef)(function FullscreenDialog2
         display: "flex",
         flexDirection: "column",
         padding: 0,
-        ...style3
+        ...style2
       },
       ...rest
     }
@@ -1126,26 +1138,43 @@ var import_react14 = __toESM(require("react"));
 
 // ../noya-react-utils/src/hooks/useFileDropTarget.ts
 var import_react13 = require("react");
-function useFileDropTarget(dropEvent) {
+function useFileDropTarget(ref, dropEvent) {
   const [isDropTargetActive, setIsDropTargetActive] = (0, import_react13.useState)(false);
-  const handleDragEvent = (0, import_react13.useCallback)((event, on) => {
-    if (on !== void 0)
-      setIsDropTargetActive(on);
+  const handleDragOver = (0, import_react13.useCallback)((event) => {
     event.preventDefault();
   }, []);
-  const handleDropEvent = (0, import_react13.useCallback)(
+  const handleDragEnter = (0, import_react13.useCallback)(
     (event) => {
+      event.preventDefault();
+      if (!ref.current?.contains(event.relatedTarget)) {
+        setIsDropTargetActive(true);
+      }
+    },
+    [ref]
+  );
+  const handleDragLeave = (0, import_react13.useCallback)(
+    (event) => {
+      event.preventDefault();
+      if (!ref.current?.contains(event.relatedTarget)) {
+        setIsDropTargetActive(false);
+      }
+    },
+    [ref]
+  );
+  const handleDrop = (0, import_react13.useCallback)(
+    (event) => {
+      event.preventDefault();
       dropEvent(event);
       setIsDropTargetActive(false);
     },
-    [dropEvent, setIsDropTargetActive]
+    [dropEvent]
   );
   return {
     dropTargetProps: {
-      onDragOver: handleDragEvent,
-      onDragEnter: (event) => handleDragEvent(event, true),
-      onDragLeave: (event) => handleDragEvent(event, false),
-      onDrop: handleDropEvent
+      onDragOver: handleDragOver,
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop
     },
     isDropTargetActive
   };
@@ -1155,12 +1184,13 @@ function useFileDropTarget(dropEvent) {
 function isSupportedFile(file, supportedFileTypes) {
   return supportedFileTypes.includes(file.type) || file.type === "" && file.name.endsWith(".sketch");
 }
-var style2 = { display: "flex", flex: 1 };
 var FileDropTarget = (0, import_react14.memo)(function FileDropTarget2({
   children,
   onDropFiles,
-  supportedFileTypes
+  supportedFileTypes,
+  ...props
 }) {
+  const ref = (0, import_react14.useRef)(null);
   const handleFile = (0, import_react14.useCallback)(
     (event) => {
       event.preventDefault();
@@ -1193,8 +1223,11 @@ var FileDropTarget = (0, import_react14.memo)(function FileDropTarget2({
     },
     [onDropFiles, supportedFileTypes]
   );
-  const { dropTargetProps, isDropTargetActive } = useFileDropTarget(handleFile);
-  return /* @__PURE__ */ import_react14.default.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
+  const { dropTargetProps, isDropTargetActive } = useFileDropTarget(
+    ref,
+    handleFile
+  );
+  return /* @__PURE__ */ import_react14.default.createElement("div", { ref, ...dropTargetProps, ...props }, typeof children === "function" ? children(isDropTargetActive) : children);
 });
 
 // ../noya-react-utils/src/hooks/useDeepArray.ts
@@ -1919,7 +1952,7 @@ var LabelContainer = import_styled_components13.default.label(({ theme, $labelPo
   }
 }));
 var InputFieldLabel = (0, import_react33.memo)(
-  (0, import_react33.forwardRef)(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
+  (0, import_react33.forwardRef)(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style2 }, forwardedRef) {
     const { labelPosition, hasDropdown, setLabelWidth } = (0, import_react33.useContext)(InputFieldContext);
     const ref = (0, import_react33.useRef)(null);
     (0, import_react33.useLayoutEffect)(() => {
@@ -1940,7 +1973,7 @@ var InputFieldLabel = (0, import_react33.memo)(
         pointerEvents,
         $labelPosition: labelPosition,
         $hasDropdown: hasDropdown,
-        style: style3
+        style: style2
       },
       children
     );
@@ -2108,34 +2141,34 @@ var InputFieldTypeahead = (props) => {
     labelSize,
     hasDropdown,
     hasLabel,
-    size: size2,
-    onFocusChange
+    size: size2
+    // onFocusChange,
   } = (0, import_react33.useContext)(InputFieldContext);
   return /* @__PURE__ */ import_react33.default.createElement(
     InputElement,
     {
+      as: "span",
       $labelPosition: labelPosition,
       $labelSize: labelSize,
       $hasLabel: hasLabel,
       $hasDropdown: hasDropdown,
       $size: size2,
-      onFocusChange,
-      readOnly: true,
-      placeholder: props.value,
       value: "",
       style: {
         position: "absolute",
-        top: -1,
+        top: 0,
         left: 0,
         right: 0,
-        bottom: -1,
+        bottom: 0,
         width: "100%",
         height: "100%",
         pointerEvents: "none",
         background: "transparent",
         boxShadow: "none"
       }
-    }
+    },
+    /* @__PURE__ */ import_react33.default.createElement("span", { style: { opacity: 0 } }, props.prefix),
+    /* @__PURE__ */ import_react33.default.createElement("span", { style: { opacity: 0.5 } }, props.value.slice(props.prefix.length))
   );
 };
 function parseNumber(value) {
@@ -2223,7 +2256,7 @@ function InputFieldRoot({
   size: size2 = "medium",
   renderPopoverContent,
   onFocusChange,
-  style: style3,
+  style: style2,
   className
 }) {
   const childrenArray = import_react33.Children.toArray(children);
@@ -2282,7 +2315,7 @@ function InputFieldRoot({
       id,
       $width: width,
       $flex: flex,
-      style: style3,
+      style: style2,
       className
     },
     children
@@ -2306,6 +2339,35 @@ function InputFieldRoot({
     measuredWidth && /* @__PURE__ */ import_react33.default.createElement(Stack.V, { width: measuredWidth, overflow: "hidden" }, renderPopoverContent({ width: measuredWidth }))
   ) : rootElement);
 }
+var PrimitiveInputField = import_styled_components13.default.input(({ theme, readOnly, disabled }) => {
+  return {
+    // placeholder
+    "&::placeholder": {
+      color: theme.colors.textDisabled
+    },
+    ...theme.textStyles.small,
+    color: readOnly ? theme.colors.textMuted : disabled ? theme.colors.textDisabled : theme.colors.text,
+    width: "0px",
+    // Reset intrinsic width
+    flex: "1 1 0px",
+    position: "relative",
+    border: "0",
+    outline: "none",
+    minWidth: "0",
+    alignSelf: "stretch",
+    borderRadius: "4px",
+    paddingTop: "4px",
+    paddingBottom: "4px",
+    paddingLeft: "6px",
+    paddingRight: "6px",
+    background: theme.colors.inputBackground,
+    "&:focus": {
+      boxShadow: `0 0 0 2px ${theme.colors.primary}`
+    },
+    userSelect: "all",
+    pointerEvents: "all"
+  };
+});
 var InputField;
 ((InputField2) => {
   InputField2.Root = (0, import_react33.memo)(InputFieldRoot);
@@ -2315,6 +2377,7 @@ var InputField;
   InputField2.DropdownMenu = InputFieldDropdownMenu;
   InputField2.Button = InputFieldButton;
   InputField2.Label = InputFieldLabel;
+  InputField2.PrimitiveElement = PrimitiveInputField;
 })(InputField || (InputField = {}));
 
 // src/contexts/DialogContext.tsx
@@ -2649,7 +2712,7 @@ function useHover(props = {}) {
 // src/components/Chip.tsx
 var ChipElement = import_styled_components16.default.span(({ theme, $colorScheme, $size, $variant, $monospace, $isInteractive }) => {
   const color = $colorScheme === "primary" ? theme.colors.primary : $colorScheme === "secondary" ? theme.colors.secondary : theme.colors.text;
-  const backgroundColor = $colorScheme === "primary" ? "rgb(238, 229, 255)" : $colorScheme === "secondary" ? "rgb(205, 238, 231)" : $colorScheme === "error" ? "rgb(255, 219, 219)" : theme.colors.inputBackground;
+  const backgroundColor = $colorScheme === "primary" ? theme.colors.primaryPastel : $colorScheme === "secondary" ? theme.colors.secondaryPastel : $colorScheme === "error" ? "rgb(255, 219, 219)" : theme.colors.inputBackground;
   const subtleColor = $colorScheme === "primary" ? "rgba(238, 229, 255, 0.2)" : $colorScheme === "secondary" ? "rgba(205, 238, 231, 0.2)" : $colorScheme === "error" ? "rgba(255, 219, 219, 0.2)" : "rgba(0, 0, 0, 0.1)";
   return {
     textTransform: "initial",
@@ -2660,9 +2723,12 @@ var ChipElement = import_styled_components16.default.span(({ theme, $colorScheme
     // lineHeight: "1.4",
     lineHeight: "15px",
     whiteSpace: "pre",
-    ...$size === "medium" ? {
+    ...$size === "large" ? {
       fontSize: "11px",
       padding: "4px 8px"
+    } : $size === "medium" ? {
+      fontSize: "10px",
+      padding: "2px 6px"
     } : {
       fontSize: "9px",
       padding: "0px 4px"
@@ -2697,7 +2763,7 @@ var DeleteElement = (0, import_styled_components16.default)(import_noya_icons3.C
   marginRight: "-2px",
   cursor: "pointer",
   opacity: 0.5,
-  ...size2 === "medium" ? {
+  ...size2 === "large" ? {
     marginLeft: "2px",
     // top: '-1px',
     transform: "scale(0.75)"
@@ -2716,7 +2782,7 @@ var AddElement = (0, import_styled_components16.default)(import_noya_icons3.Plus
   marginLeft: "-2px",
   cursor: "pointer",
   opacity: 0.5,
-  ...size2 === "medium" ? {
+  ...size2 === "large" ? {
     marginRight: "2px",
     top: "-1px",
     transform: "scale(0.75)"
@@ -2735,8 +2801,8 @@ var Chip = (0, import_react37.memo)(
     deletable,
     addable,
     clickable,
-    style: style3,
-    size: size2 = "medium",
+    style: style2,
+    size: size2 = "large",
     variant = "solid",
     monospace = false,
     tabIndex,
@@ -2758,7 +2824,7 @@ var Chip = (0, import_react37.memo)(
         ref: forwardedRef,
         $variant: variant,
         $colorScheme: colorScheme,
-        style: style3,
+        style: style2,
         onClick: handleClick,
         $size: size2,
         $monospace: monospace,
@@ -3828,11 +3894,11 @@ var FloatingWindow = ({
     ),
     /* @__PURE__ */ import_react45.default.createElement(Divider, null),
     /* @__PURE__ */ import_react45.default.createElement("div", { style: styles2.content }, children),
-    Object.entries(resizeHandlePositions).map(([direction, style3]) => /* @__PURE__ */ import_react45.default.createElement(
+    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ import_react45.default.createElement(
       "div",
       {
         key: direction,
-        style: { ...styles2.resizeHandle, ...style3 },
+        style: { ...styles2.resizeHandle, ...style2 },
         onMouseDown: handleResizeStart(direction)
       }
     ))
@@ -4169,7 +4235,7 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
   menuItems,
   onSelectMenuItem,
   onContextMenu,
-  style: style3
+  style: style2
 }, forwardedRef) {
   const [hovered, setHovered] = import_react48.default.useState(false);
   const { hoverProps } = useHover({
@@ -4219,7 +4285,7 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
         onClick: handleClick,
         onDoubleClick,
         onContextMenu,
-        style: style3
+        style: style2
       },
       children
     ),
@@ -4580,9 +4646,10 @@ var Sortable;
 // src/components/ListView.tsx
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = 27;
-var DraggingContext = (0, import_react50.createContext)({
+var ListViewDraggingContext = (0, import_react50.createContext)({
   indentation: 12
 });
+ListViewDraggingContext.displayName = "ListViewDraggingContext";
 var ListRowContext = (0, import_react50.createContext)({
   marginType: "none",
   selectedPosition: "only",
@@ -4596,6 +4663,7 @@ var ListRowContext = (0, import_react50.createContext)({
   isSectionHeader: false,
   colorScheme: "primary"
 });
+ListRowContext.displayName = "ListRowContext";
 var ListViewRowTitle = import_styled_components25.default.span(({ theme }) => ({
   flex: "1 1 0",
   overflow: "hidden",
@@ -4765,8 +4833,9 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
   onSelectMenuItem,
   onMenuOpenChange,
   onKeyDown,
-  style: style3,
-  dragIndicatorStyle
+  style: style2,
+  dragIndicatorStyle,
+  className
 }, forwardedRef) {
   depth = Math.max(0, depth);
   const {
@@ -4783,7 +4852,7 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { indentation, isDragging } = (0, import_react50.useContext)(DraggingContext);
+  const { indentation, isDragging } = (0, import_react50.useContext)(ListViewDraggingContext);
   const handlePress = (0, import_react50.useCallback)(
     (event) => {
       event.preventDefault();
@@ -4805,9 +4874,9 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
       // TODO: Where do these offsets actually come from?
       transform: `translate3d(-36px, -6px, 0)`,
       width: `calc(100% + 48px)`,
-      ...style3
-    } : style3;
-  }, [isDragging, style3]);
+      ...style2
+    } : style2;
+  }, [isDragging, style2]);
   const renderContent = ({
     relativeDropPosition,
     ...renderProps
@@ -4842,7 +4911,8 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
           { onPointerDown: renderProps.onPointerDown },
           { [pressEventName]: handlePress }
         ),
-        tabIndex
+        tabIndex,
+        className
       },
       relativeDropPosition && /* @__PURE__ */ import_react50.default.createElement(
         ListViewDragIndicatorElement,
@@ -4885,12 +4955,13 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
 var RenderItemContext = (0, import_react50.createContext)(
   () => null
 );
+RenderItemContext.displayName = "RenderItemContext";
 var VirtualizedListRow = (0, import_react50.memo)(function VirtualizedListRow2({
   index,
-  style: style3
+  style: style2
 }) {
   const renderItem = (0, import_react50.useContext)(RenderItemContext);
-  return /* @__PURE__ */ import_react50.default.createElement("div", { key: index, style: style3 }, renderItem(index));
+  return /* @__PURE__ */ import_react50.default.createElement("div", { key: index, style: style2 }, renderItem(index));
 });
 var VirtualizedListInner = (0, import_react50.forwardRef)(function VirtualizedListInner2({
   size: size2,
@@ -4976,7 +5047,7 @@ var RootContainer2 = import_styled_components25.default.div(({ theme, $scrollabl
 var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInner2({
   id,
   className,
-  style: style3,
+  style: style2,
   onPress,
   scrollable = false,
   expandable = true,
@@ -5009,8 +5080,26 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
     (index) => renderItem(data[index], index, { isDragging: false }),
     [data, renderItem]
   );
+  const defaultContextValue = (0, import_react50.useMemo)(
+    () => ({
+      colorScheme,
+      marginType: "none",
+      selectedPosition: "only",
+      sortable,
+      expandable,
+      divider,
+      pressEventName,
+      variant,
+      gap,
+      sectionHeaderVariant: "normal",
+      isSectionHeader: false
+    }),
+    [colorScheme, sortable, expandable, divider, pressEventName, variant, gap]
+  );
   const getItemContextValue = (0, import_react50.useCallback)(
     (i) => {
+      if (variant === "bare" || variant === "normal")
+        return defaultContextValue;
       const current = renderChild(i);
       if (!(0, import_react50.isValidElement)(current))
         return;
@@ -5057,6 +5146,8 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
       };
     },
     [
+      variant,
+      defaultContextValue,
       renderChild,
       data.length,
       colorScheme,
@@ -5064,7 +5155,6 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
       expandable,
       divider,
       pressEventName,
-      variant,
       sectionHeaderVariant,
       gap
     ]
@@ -5074,7 +5164,7 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
     [indentation]
   );
   const renderOverlay = (0, import_react50.useCallback)(
-    (index) => /* @__PURE__ */ import_react50.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react50.default.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
+    (index) => /* @__PURE__ */ import_react50.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react50.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
   const renderWrappedChild = (0, import_react50.useCallback)(
@@ -5113,12 +5203,12 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
     [data, keyExtractor]
   );
   const draggingContextValue = (0, import_react50.useMemo)(() => ({ indentation }), [indentation]);
-  return /* @__PURE__ */ import_react50.default.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react50.default.createElement(
     RootContainer2,
     {
       id,
       className,
-      style: style3,
+      style: style2,
       ...{
         [pressEventName]: handleClick
       },
@@ -5224,6 +5314,7 @@ var Text = (0, import_react51.forwardRef)(function Text2({
   tabIndex,
   onClick,
   onKeyDown,
+  style: style2,
   ...rest
 }, forwardedRef) {
   const element = as ?? elements[variant] ?? "span";
@@ -5233,6 +5324,7 @@ var Text = (0, import_react51.forwardRef)(function Text2({
       ref: forwardedRef,
       as: element,
       className,
+      style: style2,
       tabIndex,
       $variant: variant,
       $breakpoints: breakpoints,
@@ -5367,7 +5459,7 @@ var InputFieldWithCompletions = (0, import_react52.memo)(
     onFocus,
     onBlur,
     onDeleteWhenEmpty,
-    style: style3,
+    style: style2,
     className,
     children,
     hideChildrenWhenFocused = false,
@@ -5592,7 +5684,7 @@ var InputFieldWithCompletions = (0, import_react52.memo)(
           onBlur: handleBlur,
           onFocusCapture: handleFocus,
           onKeyDown: handleKeyDown,
-          style: style3,
+          style: style2,
           className,
           autoCapitalize: "off",
           autoComplete: "off",
@@ -5605,7 +5697,7 @@ var InputFieldWithCompletions = (0, import_react52.memo)(
           "aria-controls": "component-listbox"
         }
       ),
-      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ import_react52.default.createElement(InputField.Typeahead, { value: typeaheadValue }),
+      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ import_react52.default.createElement(InputField.Typeahead, { value: typeaheadValue, prefix: filter }),
       (!isFocused || !hideChildrenWhenFocused) && children,
       loading && isFocused && /* @__PURE__ */ import_react52.default.createElement(InputField.Label, null, /* @__PURE__ */ import_react52.default.createElement(ActivityIndicator, null))
     );
@@ -5638,7 +5730,7 @@ var InspectorContainer = (0, import_react53.memo)(
     showDividers,
     id,
     className,
-    style: style3
+    style: style2
   }, forwardedRef) {
     const theme = useDesignSystemTheme();
     return /* @__PURE__ */ import_react53.default.createElement(
@@ -5652,7 +5744,7 @@ var InspectorContainer = (0, import_react53.memo)(
           flexDirection: "column",
           position: "relative",
           background: theme.colors.sidebar.background,
-          ...style3
+          ...style2
         }
       },
       header,
@@ -6092,20 +6184,43 @@ var import_noya_icons6 = require("@noya-app/noya-icons");
 var Select3 = __toESM(require("@radix-ui/react-select"));
 var import_react59 = __toESM(require("react"));
 var import_styled_components33 = require("styled-components");
+var readOnlyStyle = {
+  justifyContent: "flex-start",
+  textAlign: "left"
+};
+var flexStyle = {
+  flex: 1
+};
 var SelectMenu = (0, import_react59.memo)(function SelectMenu2({
   id,
-  style: style3,
+  style: style2,
   className,
   menuItems,
   value,
   onSelect,
-  placeholder
+  placeholder,
+  disabled,
+  readOnly
 }) {
   const selectedItem = menuItems.find(
     (item) => typeof item !== "string" && item.value === value
   );
   const icon = selectedItem?.icon;
-  return /* @__PURE__ */ import_react59.default.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ import_react59.default.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ import_react59.default.createElement(Button, { id, style: style3, className }, icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react59.default.createElement(Select3.Value, { placeholder }), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react59.default.createElement(import_noya_icons6.DropdownChevronIcon, null))), /* @__PURE__ */ import_react59.default.createElement(Select3.Portal, null, /* @__PURE__ */ import_react59.default.createElement(SelectContent, null, /* @__PURE__ */ import_react59.default.createElement(SelectViewport, null, menuItems.map((menuItem) => {
+  if (readOnly) {
+    return /* @__PURE__ */ import_react59.default.createElement(
+      Button,
+      {
+        id,
+        style: style2,
+        contentStyle: readOnlyStyle,
+        className,
+        disabled
+      },
+      icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
+      /* @__PURE__ */ import_react59.default.createElement("span", { style: flexStyle }, selectedItem?.title ?? value)
+    );
+  }
+  return /* @__PURE__ */ import_react59.default.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ import_react59.default.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ import_react59.default.createElement(Button, { id, style: style2, className, disabled }, icon && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { inline: true, size: 6 })), /* @__PURE__ */ import_react59.default.createElement("span", { style: flexStyle }, /* @__PURE__ */ import_react59.default.createElement(Select3.Value, { placeholder })), /* @__PURE__ */ import_react59.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }), /* @__PURE__ */ import_react59.default.createElement(import_noya_icons6.DropdownChevronIcon, null))), /* @__PURE__ */ import_react59.default.createElement(Select3.Portal, null, /* @__PURE__ */ import_react59.default.createElement(SelectContent, null, /* @__PURE__ */ import_react59.default.createElement(SelectViewport, null, menuItems.map((menuItem) => {
     if (typeof menuItem === "string") {
       return /* @__PURE__ */ import_react59.default.createElement(StyledSeparator, null);
     }
@@ -6229,13 +6344,15 @@ var SwitchThumb = (0, import_styled_components35.default)(SwitchPrimitive.Thumb)
 var Switch = function Switch2({
   value,
   onChange,
-  colorScheme = "normal"
+  colorScheme = "normal",
+  disabled
 }) {
   return /* @__PURE__ */ import_react61.default.createElement(
     SwitchRoot,
     {
       $colorScheme: colorScheme,
       checked: value,
+      disabled,
       onCheckedChange: (newValue) => {
         onChange(newValue);
       }
@@ -6244,58 +6361,124 @@ var Switch = function Switch2({
   );
 };
 
-// src/components/TreeView.tsx
+// src/components/TextArea.tsx
 var import_react62 = __toESM(require("react"));
-var TreeRow = (0, import_react62.forwardRef)(function TreeRow2({
+var import_styled_components36 = __toESM(require("styled-components"));
+var TextAreaElement = import_styled_components36.default.textarea(({ theme }) => ({
+  ...theme.textStyles.small,
+  color: theme.colors.text,
+  background: theme.colors.inputBackground,
+  width: "0px",
+  flex: "1 1 auto",
+  padding: "4px 6px",
+  border: "none",
+  outline: "none",
+  height: 100,
+  borderRadius: "4px",
+  "&::placeholder": {
+    color: theme.colors.textDisabled
+  },
+  "&:focus": {
+    boxShadow: `0 0 0 2px ${theme.colors.primary}`
+  },
+  // readonly
+  "&:read-only": {
+    color: theme.colors.textDisabled
+  },
+  resize: "none"
+}));
+var useAutoResize = (value) => {
+  const textareaRef = (0, import_react62.useRef)(null);
+  (0, import_react62.useEffect)(() => {
+    if (!textareaRef.current)
+      return;
+    textareaRef.current.style.height = "auto";
+    textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+  }, [value]);
+  return textareaRef;
+};
+var AutoResizingTextArea = (0, import_react62.memo)(
+  (0, import_react62.forwardRef)(function AutoResizingTextArea2({
+    value,
+    onChangeText,
+    ...rest
+  }, forwardedRef) {
+    const ref = useAutoResize(value || rest.placeholder || "");
+    const handleChange = (0, import_react62.useCallback)(
+      (event) => onChangeText(event.target.value),
+      [onChangeText]
+    );
+    const handleRef = (0, import_react62.useCallback)(
+      (value2) => {
+        ref.current = value2;
+        assignRef(forwardedRef, value2);
+      },
+      [ref, forwardedRef]
+    );
+    return /* @__PURE__ */ import_react62.default.createElement(
+      TextAreaElement,
+      {
+        ref: handleRef,
+        ...rest,
+        onChange: handleChange,
+        value
+      }
+    );
+  })
+);
+
+// src/components/TreeView.tsx
+var import_react63 = __toESM(require("react"));
+var TreeRow = (0, import_react63.forwardRef)(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
   children,
   ...rest
 }, forwardedRef) {
-  const { expandable } = (0, import_react62.useContext)(ListView.RowContext);
-  const handleClickChevron = (0, import_react62.useCallback)(
+  const { expandable } = (0, import_react63.useContext)(ListView.RowContext);
+  const handleClickChevron = (0, import_react63.useCallback)(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ import_react62.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react62.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react62.default.createElement(
+  return /* @__PURE__ */ import_react63.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react63.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react63.default.createElement(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react62.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react62.default.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ import_react63.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react63.default.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
   TreeView2.Root = ListView.Root;
   TreeView2.RowTitle = ListView.RowTitle;
   TreeView2.EditableRowTitle = ListView.EditableRowTitle;
-  TreeView2.Row = (0, import_react62.memo)(TreeRow);
+  TreeView2.Row = (0, import_react63.memo)(TreeRow);
 })(TreeView || (TreeView = {}));
 
 // src/components/WorkspaceLayout.tsx
 var import_noya_keymap5 = require("@noya-app/noya-keymap");
-var import_react65 = __toESM(require("react"));
+var import_react66 = __toESM(require("react"));
 var import_react_resizable_panels = require("react-resizable-panels");
 
 // src/hooks/usePreservePanelSize.tsx
-var import_react64 = require("react");
+var import_react65 = require("react");
 
 // src/hooks/useWindowSize.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 function useWindowSize() {
-  const [size2, setSize] = (0, import_react63.useState)(
+  const [size2, setSize] = (0, import_react64.useState)(
     typeof window === "undefined" ? { width: 0, height: 0 } : {
       width: window.innerWidth,
       height: window.innerHeight
     }
   );
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     const handleResize = () => setSize({
       width: window.innerWidth,
       height: window.innerHeight
@@ -6313,8 +6496,8 @@ var RIGHT_SIDEBAR_ID = "editor-right-sidebar";
 var CONTENT_AREA_ID = "editor-content-area";
 function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
   const windowSize = useWindowSize();
-  const layoutRef = (0, import_react64.useRef)();
-  (0, import_react64.useLayoutEffect)(() => {
+  const layoutRef = (0, import_react65.useRef)();
+  (0, import_react65.useLayoutEffect)(() => {
     const panelGroup = document.querySelector(
       `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
     );
@@ -6357,7 +6540,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
       panelGroupObserver.disconnect();
     };
   }, [panelGroupRef, setPanelLayoutState]);
-  (0, import_react64.useLayoutEffect)(() => {
+  (0, import_react65.useLayoutEffect)(() => {
     if (!layoutRef.current)
       return;
     const {
@@ -6417,7 +6600,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/WorkspaceLayout.tsx
-var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
+var WorkspaceLayout = (0, import_react66.forwardRef)(function WorkspaceLayout2({
   autoSavePrefix,
   leftSidebarContent: leftPanelContent,
   children: centerPanelContent,
@@ -6432,7 +6615,7 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
   leftSidebarCanResize = false,
   id,
   className,
-  style: style3
+  style: style2
 }, forwardedRef) {
   const windowSize = useWindowSize();
   function getPercentage(size2) {
@@ -6442,12 +6625,12 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
   const rightSidebarPercentage = getPercentage(rightSidebarInitialSize);
   const leftSidebarMinPercentage = leftSidebarMinSize !== void 0 ? getPercentage(leftSidebarMinSize) : void 0;
   const rightSidebarMinPercentage = rightSidebarMinSize !== void 0 ? getPercentage(rightSidebarMinSize) : void 0;
-  const panelGroupRef = (0, import_react65.useRef)(null);
-  const leftSidebarRef = (0, import_react65.useRef)(null);
-  const rightSidebarRef = (0, import_react65.useRef)(null);
+  const panelGroupRef = (0, import_react66.useRef)(null);
+  const leftSidebarRef = (0, import_react66.useRef)(null);
+  const rightSidebarRef = (0, import_react66.useRef)(null);
   usePreservePanelSize(panelGroupRef, onChangeLayoutState);
   const theme = useDesignSystemTheme();
-  (0, import_react65.useImperativeHandle)(forwardedRef, () => ({
+  (0, import_react66.useImperativeHandle)(forwardedRef, () => ({
     setLeftSidebarExpanded: (expanded) => {
       if (expanded) {
         leftSidebarRef.current?.expand();
@@ -6504,7 +6687,7 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
     }
   });
   const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
-  return /* @__PURE__ */ import_react65.default.createElement(
+  return /* @__PURE__ */ import_react66.default.createElement(
     "div",
     {
       id,
@@ -6513,10 +6696,10 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
         backgroundColor: theme.colors.canvas.background,
         display: "flex",
         flexDirection: "row",
-        ...style3
+        ...style2
       }
     },
-    /* @__PURE__ */ import_react65.default.createElement(
+    /* @__PURE__ */ import_react66.default.createElement(
       import_react_resizable_panels.PanelGroup,
       {
         ref: panelGroupRef,
@@ -6525,7 +6708,7 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
         autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
         style: { flex: "1" }
       },
-      hasLeftSidebar && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
+      hasLeftSidebar && /* @__PURE__ */ import_react66.default.createElement(import_react66.default.Fragment, null, /* @__PURE__ */ import_react66.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: LEFT_SIDEBAR_ID,
@@ -6542,7 +6725,7 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
           }
         },
         leftPanelContent
-      ), /* @__PURE__ */ import_react65.default.createElement(
+      ), /* @__PURE__ */ import_react66.default.createElement(
         import_react_resizable_panels.PanelResizeHandle,
         {
           style: {
@@ -6553,7 +6736,7 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
           }
         }
       )),
-      /* @__PURE__ */ import_react65.default.createElement(
+      /* @__PURE__ */ import_react66.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: CONTENT_AREA_ID,
@@ -6568,7 +6751,7 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
         },
         centerPanelContent
       ),
-      hasRightSidebar && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
+      hasRightSidebar && /* @__PURE__ */ import_react66.default.createElement(import_react66.default.Fragment, null, /* @__PURE__ */ import_react66.default.createElement(
         import_react_resizable_panels.PanelResizeHandle,
         {
           style: {
@@ -6578,7 +6761,7 @@ var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2({
             backgroundColor: theme.colors.divider
           }
         }
-      ), /* @__PURE__ */ import_react65.default.createElement(
+      ), /* @__PURE__ */ import_react66.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: RIGHT_SIDEBAR_ID,
@@ -6641,8 +6824,8 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/ArrayController.tsx
 var import_noya_utils11 = require("@noya-app/noya-utils");
-var import_react67 = __toESM(require("react"));
-var import_styled_components37 = __toESM(require("styled-components"));
+var import_react68 = __toESM(require("react"));
+var import_styled_components38 = __toESM(require("styled-components"));
 
 // src/components/InspectorPrimitives.tsx
 var InspectorPrimitives_exports = {};
@@ -6660,20 +6843,20 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react66 = __toESM(require("react"));
-var import_styled_components36 = __toESM(require("styled-components"));
-var Section = import_styled_components36.default.div(({ theme, $padding = "10px", $gap }) => ({
+var import_react67 = __toESM(require("react"));
+var import_styled_components37 = __toESM(require("styled-components"));
+var Section = import_styled_components37.default.div(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
   display: "flex",
   flexDirection: "column",
   padding: $padding,
   gap: $gap
 }));
-var SectionHeader = import_styled_components36.default.div(({ theme }) => ({
+var SectionHeader = import_styled_components37.default.div(({ theme }) => ({
   display: "flex",
   alignItems: "center"
 }));
-var Title3 = import_styled_components36.default.div(({ theme, $textStyle }) => ({
+var Title3 = import_styled_components37.default.div(({ theme, $textStyle }) => ({
   display: "flex",
   flexDirection: "row",
   userSelect: "none",
@@ -6682,11 +6865,11 @@ var Title3 = import_styled_components36.default.div(({ theme, $textStyle }) => (
     color: theme.colors.text
   } : {
     ...theme.textStyles.label,
-    color: theme.colors.textSubtle,
+    color: theme.colors.textMuted,
     fontWeight: "bold"
   }
 }));
-var Row2 = import_styled_components36.default.div(
+var Row2 = import_styled_components37.default.div(
   ({ theme, $gap }) => ({
     flex: "1",
     display: "flex",
@@ -6695,26 +6878,26 @@ var Row2 = import_styled_components36.default.div(
     gap: $gap
   })
 );
-var Column = import_styled_components36.default.div(({ theme }) => ({
+var Column = import_styled_components37.default.div(({ theme }) => ({
   flex: "1",
   display: "flex",
   flexDirection: "column",
   gap: "4px"
 }));
-var Checkbox = import_styled_components36.default.input(({ theme }) => ({
+var Checkbox = import_styled_components37.default.input(({ theme }) => ({
   margin: 0
 }));
-var Text3 = import_styled_components36.default.span(({ theme }) => ({
+var Text3 = import_styled_components37.default.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ import_react66.default.createElement(Spacer.Vertical, { size: (0, import_styled_components36.useTheme)().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components36.useTheme)().sizes.inspector.horizontalSeparator });
-var SliderRowLabel = import_styled_components36.default.span(({ theme }) => ({
+var VerticalSeparator = () => /* @__PURE__ */ import_react67.default.createElement(Spacer.Vertical, { size: (0, import_styled_components37.useTheme)().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components37.useTheme)().sizes.inspector.horizontalSeparator });
+var SliderRowLabel = import_styled_components37.default.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
   marginBottom: "-6px"
 }));
-var RowLabel = import_styled_components36.default.span(({ theme, $textStyle }) => ({
+var RowLabel = import_styled_components37.default.span(({ theme, $textStyle }) => ({
   // marginBottom: '6px',
   display: "flex",
   ...$textStyle ? {
@@ -6728,7 +6911,7 @@ var RowLabel = import_styled_components36.default.span(({ theme, $textStyle }) =
   // Button height
   alignItems: "center"
 }));
-var LabeledRow = (0, import_react66.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react67.memo)(function LabeledRow2({
   id,
   children,
   label,
@@ -6736,26 +6919,26 @@ var LabeledRow = (0, import_react66.memo)(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ import_react66.default.createElement(Row2, { id }, /* @__PURE__ */ import_react66.default.createElement(Column, null, /* @__PURE__ */ import_react66.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react66.default.createElement(Row2, { $gap: gap }, children)));
+  return /* @__PURE__ */ import_react67.default.createElement(Row2, { id }, /* @__PURE__ */ import_react67.default.createElement(Column, null, /* @__PURE__ */ import_react67.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react67.default.createElement(Row2, { $gap: gap }, children)));
 });
-var LabeledSliderRow = (0, import_react66.memo)(function LabeledRow3({
+var LabeledSliderRow = (0, import_react67.memo)(function LabeledRow3({
   children,
   label
 }) {
-  return /* @__PURE__ */ import_react66.default.createElement(Row2, null, /* @__PURE__ */ import_react66.default.createElement(Column, null, /* @__PURE__ */ import_react66.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react66.default.createElement(Row2, null, children)));
+  return /* @__PURE__ */ import_react67.default.createElement(Row2, null, /* @__PURE__ */ import_react67.default.createElement(Column, null, /* @__PURE__ */ import_react67.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react67.default.createElement(Row2, null, children)));
 });
 
 // src/components/ArrayController.tsx
-var ElementRow = import_styled_components37.default.div({
+var ElementRow = import_styled_components38.default.div({
   flex: "0 0 auto",
   display: "flex",
   flexDirection: "row",
   alignItems: "center"
 });
-var ItemContainer2 = import_styled_components37.default.div({
+var ItemContainer2 = import_styled_components38.default.div({
   position: "relative"
 });
-var ArrayController = (0, import_react67.memo)(function ArrayController2({
+var ArrayController = (0, import_react68.memo)(function ArrayController2({
   id,
   items,
   title,
@@ -6771,14 +6954,14 @@ var ArrayController = (0, import_react67.memo)(function ArrayController2({
   renderExpandedContent,
   padding = 10
 }) {
-  const iconColor = (0, import_styled_components37.useTheme)().colors.icon;
-  const primaryLightColor = (0, import_styled_components37.useTheme)().colors.primaryLight;
-  const keys = (0, import_react67.useMemo)(
+  const iconColor = (0, import_styled_components38.useTheme)().colors.icon;
+  const primaryLightColor = (0, import_styled_components38.useTheme)().colors.primaryLight;
+  const keys = (0, import_react68.useMemo)(
     () => items.map((item, index) => getKey?.(item) ?? index.toString()),
     [getKey, items]
   );
   const indexes = reversed ? (0, import_noya_utils11.range)(0, items.length).reverse() : (0, import_noya_utils11.range)(0, items.length);
-  const handleMoveItem = (0, import_react67.useCallback)(
+  const handleMoveItem = (0, import_react68.useCallback)(
     (sourceIndex, destinationIndex, position) => {
       if (reversed) {
         if (position === "above") {
@@ -6795,11 +6978,11 @@ var ArrayController = (0, import_react67.memo)(function ArrayController2({
     [onMoveItem, reversed]
   );
   const renderRow = (index) => {
-    return /* @__PURE__ */ import_react67.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
+    return /* @__PURE__ */ import_react68.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
   };
-  return /* @__PURE__ */ import_react67.default.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ import_react67.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react67.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react67.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
+  return /* @__PURE__ */ import_react68.default.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ import_react68.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react68.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react68.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react68.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
     [
-      onClickTrash && /* @__PURE__ */ import_react67.default.createElement(
+      onClickTrash && /* @__PURE__ */ import_react68.default.createElement(
         IconButton,
         {
           id: `${id}-trash`,
@@ -6808,7 +6991,7 @@ var ArrayController = (0, import_react67.memo)(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ import_react67.default.createElement(
+      onClickExpand && /* @__PURE__ */ import_react68.default.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -6817,7 +7000,7 @@ var ArrayController = (0, import_react67.memo)(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ import_react67.default.createElement(
+      onClickPlus && /* @__PURE__ */ import_react68.default.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -6827,15 +7010,15 @@ var ArrayController = (0, import_react67.memo)(function ArrayController2({
         }
       )
     ],
-    /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ import_react67.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react67.default.createElement(
+    /* @__PURE__ */ import_react68.default.createElement(Spacer.Horizontal, { size: 8 })
+  )), /* @__PURE__ */ import_react68.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react68.default.createElement(
     Sortable.Root,
     {
       keys,
       renderOverlay: renderRow,
       onMoveItem: handleMoveItem
     },
-    indexes.map((index) => /* @__PURE__ */ import_react67.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react67.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react67.default.createElement(
+    indexes.map((index) => /* @__PURE__ */ import_react68.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react68.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react68.default.createElement(
       ListView.DragIndicator,
       {
         $gap: 0,
@@ -6849,11 +7032,11 @@ var ArrayController = (0, import_react67.memo)(function ArrayController2({
 
 // src/components/DimensionInput.tsx
 var import_noya_utils12 = require("@noya-app/noya-utils");
-var import_react68 = __toESM(require("react"));
+var import_react69 = __toESM(require("react"));
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = (0, import_react68.memo)(function DimensionInput2({
+var DimensionInput = (0, import_react69.memo)(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -6863,15 +7046,15 @@ var DimensionInput = (0, import_react68.memo)(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = (0, import_react68.useCallback)(
+  const handleNudgeValue = (0, import_react69.useCallback)(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = (0, import_react68.useCallback)(
+  const handleSetValue = (0, import_react69.useCallback)(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ import_react68.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react68.default.createElement(
+  return /* @__PURE__ */ import_react69.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react69.default.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : (0, import_noya_utils12.round)(value, 2),
@@ -6880,12 +7063,13 @@ var DimensionInput = (0, import_react68.memo)(function DimensionInput2({
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ import_react68.default.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ import_react69.default.createElement(InputField.Label, null, label));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActivityIndicator,
   ArrayController,
+  AutoResizingTextArea,
   Avatar,
   AvatarStack,
   Body,
@@ -6969,6 +7153,7 @@ var DimensionInput = (0, import_react68.memo)(function DimensionInput2({
   sketchColorToHex,
   sketchColorToRgba,
   sketchColorToRgbaString,
+  useAutoResize,
   useCurrentFloatingWindowInternal,
   useDesignSystemConfiguration,
   useDesignSystemTheme,