@noya-app/noya-designsystem 0.1.24 → 0.1.26

package/dist/index.mjs

@@ -331,7 +331,13 @@ var ButtonElement = styled5.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",
@@ -355,7 +361,7 @@ var ButtonContent = styled5.span(({ theme }) => ({
 var Button = forwardRef3(function Button2({
   id,
   className,
-  style: style3,
+  style: style2,
   flex,
   tabIndex,
   tooltip,
@@ -376,7 +382,7 @@ var Button = forwardRef3(function Button2({
       ref: forwardedRef,
       id,
       className,
-      style: style3,
+      style: style2,
       $flex: flex,
       tabIndex,
       $active: active,
@@ -441,14 +447,14 @@ var IconButton = memo4(
   forwardRef4(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
     const { icon: iconColor, iconSelected: iconSelectedColor } = useTheme().colors;
     const Icon = Icons[iconName];
-    const style3 = useMemo(() => {
+    const style2 = useMemo(() => {
       return {
         padding: "0 2px",
         ...size2 && { minHeight: size2 },
         ...contentStyle
       };
     }, [contentStyle, size2]);
-    return /* @__PURE__ */ React7.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style3 }, /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React7.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style2 }, /* @__PURE__ */ React7.createElement(
       Icon,
       {
         color: color ?? (selected ? iconSelectedColor : iconColor),
@@ -551,26 +557,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() {
@@ -598,6 +607,7 @@ var colors = {
     editingBackground: "#fff"
   },
   canvas: {
+    // background: "white",
     background: "rgb(249,249,249)",
     get selectionStroke() {
       return colors.primary;
@@ -608,8 +618,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)",
@@ -622,7 +632,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))",
@@ -662,41 +672,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,
@@ -798,7 +808,7 @@ import React19, {
   useCallback as useCallback12,
   useContext as useContext3,
   useMemo as useMemo7,
-  useRef as useRef11,
+  useRef as useRef12,
   useState as useState12
 } from "react";
 import styled13 from "styled-components";
@@ -890,7 +900,7 @@ var Dialog = forwardRef6(function Dialog2({
   title,
   description,
   open,
-  style: style3,
+  style: style2,
   onOpenChange,
   onOpenAutoFocus,
   closeOnInteractOutside = true
@@ -908,7 +918,7 @@ var Dialog = forwardRef6(function Dialog2({
     {
       ref: contentRef,
       onOpenAutoFocus,
-      style: style3,
+      style: style2,
       ...closeOnInteractOutside === false && {
         onPointerDownOutside: (event) => {
           event.preventDefault();
@@ -924,7 +934,7 @@ var Dialog = forwardRef6(function Dialog2({
     children
   ));
 });
-var FullscreenDialog = forwardRef6(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
+var FullscreenDialog = forwardRef6(function FullscreenDialog2({ style: style2, ...rest }, forwardedRef) {
   return /* @__PURE__ */ React10.createElement(
     Dialog,
     {
@@ -940,7 +950,7 @@ var FullscreenDialog = forwardRef6(function FullscreenDialog2({ style: style3, .
         display: "flex",
         flexDirection: "column",
         padding: 0,
-        ...style3
+        ...style2
       },
       ...rest
     }
@@ -1023,33 +1033,47 @@ var SingleDimensionAutoSizer = memo5(function SingleDimensionAutoSizer2({
 });
 
 // ../noya-react-utils/src/components/FileDropTarget.tsx
-import React13, {
-  memo as memo6,
-  useCallback as useCallback3
-} from "react";
+import React13, { memo as memo6, useCallback as useCallback3, useRef as useRef3 } from "react";
 
 // ../noya-react-utils/src/hooks/useFileDropTarget.ts
 import { useCallback as useCallback2, useState as useState2 } from "react";
-function useFileDropTarget(dropEvent) {
+function useFileDropTarget(ref, dropEvent) {
   const [isDropTargetActive, setIsDropTargetActive] = useState2(false);
-  const handleDragEvent = useCallback2((event, on) => {
-    if (on !== void 0)
-      setIsDropTargetActive(on);
+  const handleDragOver = useCallback2((event) => {
     event.preventDefault();
   }, []);
-  const handleDropEvent = useCallback2(
+  const handleDragEnter = useCallback2(
+    (event) => {
+      event.preventDefault();
+      if (!ref.current?.contains(event.relatedTarget)) {
+        setIsDropTargetActive(true);
+      }
+    },
+    [ref]
+  );
+  const handleDragLeave = useCallback2(
     (event) => {
+      event.preventDefault();
+      if (!ref.current?.contains(event.relatedTarget)) {
+        setIsDropTargetActive(false);
+      }
+    },
+    [ref]
+  );
+  const handleDrop = useCallback2(
+    (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
   };
@@ -1059,12 +1083,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 = memo6(function FileDropTarget2({
   children,
   onDropFiles,
-  supportedFileTypes
+  supportedFileTypes,
+  ...props
 }) {
+  const ref = useRef3(null);
   const handleFile = useCallback3(
     (event) => {
       event.preventDefault();
@@ -1097,13 +1122,16 @@ var FileDropTarget = memo6(function FileDropTarget2({
     },
     [onDropFiles, supportedFileTypes]
   );
-  const { dropTargetProps, isDropTargetActive } = useFileDropTarget(handleFile);
-  return /* @__PURE__ */ React13.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
+  const { dropTargetProps, isDropTargetActive } = useFileDropTarget(
+    ref,
+    handleFile
+  );
+  return /* @__PURE__ */ React13.createElement("div", { ref, ...dropTargetProps, ...props }, typeof children === "function" ? children(isDropTargetActive) : children);
 });
 
 // ../noya-react-utils/src/hooks/useDeepArray.ts
 import { isDeepEqual } from "@noya-app/noya-utils";
-import { useRef as useRef3 } from "react";
+import { useRef as useRef4 } from "react";
 
 // ../noya-react-utils/src/hooks/useDeepState.ts
 import { isDeepEqual as isDeepEqual2 } from "@noya-app/noya-utils";
@@ -1113,13 +1141,13 @@ import { useCallback as useCallback4, useMemo as useMemo2, useState as useState3
 import { useEffect as useEffect2, useState as useState4 } from "react";
 
 // ../noya-react-utils/src/hooks/useIsMounted.ts
-import { useEffect as useEffect3, useRef as useRef4 } from "react";
+import { useEffect as useEffect3, useRef as useRef5 } from "react";
 
 // ../noya-react-utils/src/hooks/useLateReference.ts
-import { useCallback as useCallback5, useLayoutEffect, useRef as useRef5 } from "react";
+import { useCallback as useCallback5, useLayoutEffect, useRef as useRef6 } from "react";
 
 // ../noya-react-utils/src/hooks/useLazyValue.ts
-import { useRef as useRef6 } from "react";
+import { useRef as useRef7 } from "react";
 
 // ../noya-react-utils/src/hooks/useMutableState.ts
 import { useCallback as useCallback6, useMemo as useMemo3, useState as useState5 } from "react";
@@ -1137,10 +1165,10 @@ import { useEffect as useEffect5, useState as useState7 } from "react";
 
 // ../noya-react-utils/src/hooks/useShallowArray.ts
 import { isShallowEqual } from "@noya-app/noya-utils";
-import { useRef as useRef7 } from "react";
+import { useRef as useRef8 } from "react";
 
 // ../noya-react-utils/src/hooks/useStableCallback.ts
-import { useCallback as useCallback8, useLayoutEffect as useLayoutEffect2, useRef as useRef8 } from "react";
+import { useCallback as useCallback8, useLayoutEffect as useLayoutEffect2, useRef as useRef9 } from "react";
 
 // ../noya-react-utils/src/hooks/useSystemColorScheme.ts
 import { useEffect as useEffect6, useState as useState8 } from "react";
@@ -1249,7 +1277,7 @@ import React18, {
   useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo6,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState11
 } from "react";
 import styled12 from "styled-components";
@@ -1522,7 +1550,7 @@ import React16, {
   useCallback as useCallback10,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect3,
-  useRef as useRef9,
+  useRef as useRef10,
   useState as useState10
 } from "react";
 
@@ -1630,10 +1658,10 @@ var SubmittableTextInput = forwardRef8(function SubmittableTextInput2({
   ...rest
 }, forwardedRef) {
   const ref = React16.useRef(null);
-  const latestValue = useRef9(value);
+  const latestValue = useRef10(value);
   latestValue.current = value;
-  const userDidEdit = useRef9(false);
-  const isSubmitTriggeredByEscapeKey = useRef9(false);
+  const userDidEdit = useRef10(false);
+  const isSubmitTriggeredByEscapeKey = useRef10(false);
   const [internalValue, setInternalValue] = useState10("");
   useLayoutEffect3(() => {
     setInternalValue(value);
@@ -1691,10 +1719,10 @@ var SubmittableTextInput = forwardRef8(function SubmittableTextInput2({
     },
     [onFocusCapture, onFocusChange]
   );
-  const autoSubmitTimeoutRef = useRef9(
+  const autoSubmitTimeoutRef = useRef10(
     null
   );
-  const latestHandleSubmit = useRef9(handleSubmit);
+  const latestHandleSubmit = useRef10(handleSubmit);
   latestHandleSubmit.current = handleSubmit;
   useEffect9(() => {
     if (submitAutomaticallyAfterDelay) {
@@ -1853,9 +1881,9 @@ var LabelContainer = styled12.label(({ theme, $labelPosition, $hasDropdown, poin
   }
 }));
 var InputFieldLabel = memo9(
-  forwardRef9(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
+  forwardRef9(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style2 }, forwardedRef) {
     const { labelPosition, hasDropdown, setLabelWidth } = useContext2(InputFieldContext);
-    const ref = useRef10(null);
+    const ref = useRef11(null);
     useLayoutEffect4(() => {
       if (!setLabelWidth)
         return;
@@ -1874,7 +1902,7 @@ var InputFieldLabel = memo9(
         pointerEvents,
         $labelPosition: labelPosition,
         $hasDropdown: hasDropdown,
-        style: style3
+        style: style2
       },
       children
     );
@@ -2042,34 +2070,34 @@ var InputFieldTypeahead = (props) => {
     labelSize,
     hasDropdown,
     hasLabel,
-    size: size2,
-    onFocusChange
+    size: size2
+    // onFocusChange,
   } = useContext2(InputFieldContext);
   return /* @__PURE__ */ React18.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__ */ React18.createElement("span", { style: { opacity: 0 } }, props.prefix),
+    /* @__PURE__ */ React18.createElement("span", { style: { opacity: 0.5 } }, props.value.slice(props.prefix.length))
   );
 };
 function parseNumber(value) {
@@ -2157,7 +2185,7 @@ function InputFieldRoot({
   size: size2 = "medium",
   renderPopoverContent,
   onFocusChange,
-  style: style3,
+  style: style2,
   className
 }) {
   const childrenArray = Children3.toArray(children);
@@ -2216,7 +2244,7 @@ function InputFieldRoot({
       id,
       $width: width,
       $flex: flex,
-      style: style3,
+      style: style2,
       className
     },
     children
@@ -2240,6 +2268,35 @@ function InputFieldRoot({
     measuredWidth && /* @__PURE__ */ React18.createElement(Stack.V, { width: measuredWidth, overflow: "hidden" }, renderPopoverContent({ width: measuredWidth }))
   ) : rootElement);
 }
+var PrimitiveInputField = styled12.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 = memo9(InputFieldRoot);
@@ -2249,6 +2306,7 @@ var InputField;
   InputField2.DropdownMenu = InputFieldDropdownMenu;
   InputField2.Button = InputFieldButton;
   InputField2.Label = InputFieldLabel;
+  InputField2.PrimitiveElement = PrimitiveInputField;
 })(InputField || (InputField = {}));
 
 // src/contexts/DialogContext.tsx
@@ -2311,8 +2369,8 @@ var DialogProvider = function DialogProvider2({
     },
     [submit]
   );
-  const inputRef = useRef11(null);
-  const dialogRef = useRef11(null);
+  const inputRef = useRef12(null);
+  const dialogRef = useRef12(null);
   const containsElement = useCallback12((element) => {
     if (!dialogRef.current)
       return false;
@@ -2583,7 +2641,7 @@ function useHover(props = {}) {
 // src/components/Chip.tsx
 var ChipElement = styled14.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",
@@ -2594,9 +2652,12 @@ var ChipElement = styled14.span(({ theme, $colorScheme, $size, $variant, $monosp
     // 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"
@@ -2631,7 +2692,7 @@ var DeleteElement = styled14(Cross1Icon)(({ size: size2 }) => ({
   marginRight: "-2px",
   cursor: "pointer",
   opacity: 0.5,
-  ...size2 === "medium" ? {
+  ...size2 === "large" ? {
     marginLeft: "2px",
     // top: '-1px',
     transform: "scale(0.75)"
@@ -2650,7 +2711,7 @@ var AddElement = styled14(PlusIcon).withConfig({
   marginLeft: "-2px",
   cursor: "pointer",
   opacity: 0.5,
-  ...size2 === "medium" ? {
+  ...size2 === "large" ? {
     marginRight: "2px",
     top: "-1px",
     transform: "scale(0.75)"
@@ -2669,8 +2730,8 @@ var Chip = memo11(
     deletable,
     addable,
     clickable,
-    style: style3,
-    size: size2 = "medium",
+    style: style2,
+    size: size2 = "large",
     variant = "solid",
     monospace = false,
     tabIndex,
@@ -2692,7 +2753,7 @@ var Chip = memo11(
         ref: forwardedRef,
         $variant: variant,
         $colorScheme: colorScheme,
-        style: style3,
+        style: style2,
         onClick: handleClick,
         $size: size2,
         $monospace: monospace,
@@ -3514,7 +3575,7 @@ var FillInputField = memo17(
 );
 
 // src/components/FloatingWindow.tsx
-import React30, { useCallback as useCallback15, useRef as useRef13, useState as useState17 } from "react";
+import React30, { useCallback as useCallback15, useRef as useRef14, useState as useState17 } from "react";
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -3641,7 +3702,7 @@ var FloatingWindow = ({
   const [isResizing, setIsResizing] = useState17(false);
   const [dragOffset, setDragOffset] = useState17({ x: 0, y: 0 });
   const [resizeDirection, setResizeDirection] = useState17(null);
-  const wrapperRef = useRef13(null);
+  const wrapperRef = useRef14(null);
   const toggleGlobalTextSelection = (disable) => {
     if (disable) {
       document.body.style.userSelect = "none";
@@ -3771,11 +3832,11 @@ var FloatingWindow = ({
     ),
     /* @__PURE__ */ React30.createElement(Divider, null),
     /* @__PURE__ */ React30.createElement("div", { style: styles2.content }, children),
-    Object.entries(resizeHandlePositions).map(([direction, style3]) => /* @__PURE__ */ React30.createElement(
+    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ React30.createElement(
       "div",
       {
         key: direction,
-        style: { ...styles2.resizeHandle, ...style3 },
+        style: { ...styles2.resizeHandle, ...style2 },
         onMouseDown: handleResizeStart(direction)
       }
     ))
@@ -4128,7 +4189,7 @@ var GridViewItem = forwardRef12(function GridViewItem2({
   menuItems,
   onSelectMenuItem,
   onContextMenu,
-  style: style3
+  style: style2
 }, forwardedRef) {
   const [hovered, setHovered] = React33.useState(false);
   const { hoverProps } = useHover({
@@ -4178,7 +4239,7 @@ var GridViewItem = forwardRef12(function GridViewItem2({
         onClick: handleClick,
         onDoubleClick,
         onContextMenu,
-        style: style3
+        style: style2
       },
       children
     ),
@@ -4266,7 +4327,7 @@ import React37, {
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo19,
-  useRef as useRef16,
+  useRef as useRef17,
   useState as useState20
 } from "react";
 import styled25 from "styled-components";
@@ -4356,7 +4417,7 @@ import React35, {
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo18,
-  useRef as useRef15
+  useRef as useRef16
 } from "react";
 import { WindowScroller } from "react-virtualized";
 import { VariableSizeList } from "react-window";
@@ -4406,7 +4467,7 @@ import React34, {
   useContext as useContext8,
   useEffect as useEffect13,
   useMemo as useMemo17,
-  useRef as useRef14,
+  useRef as useRef15,
   useState as useState19
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
@@ -4496,7 +4557,7 @@ function SortableRoot({
     })
   );
   const [activeIndex, setActiveIndex] = useState19();
-  const activatorEvent = useRef14(null);
+  const activatorEvent = useRef15(null);
   const setActivatorEvent = useCallback19((event) => {
     activatorEvent.current = event;
   }, []);
@@ -4581,9 +4642,10 @@ var Sortable;
 // src/components/ListView.tsx
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = 27;
-var DraggingContext = createContext9({
+var ListViewDraggingContext = createContext9({
   indentation: 12
 });
+ListViewDraggingContext.displayName = "ListViewDraggingContext";
 var ListRowContext = createContext9({
   marginType: "none",
   selectedPosition: "only",
@@ -4597,6 +4659,7 @@ var ListRowContext = createContext9({
   isSectionHeader: false,
   colorScheme: "primary"
 });
+ListRowContext.displayName = "ListRowContext";
 var ListViewRowTitle = styled23.span(({ theme }) => ({
   flex: "1 1 0",
   overflow: "hidden",
@@ -4614,7 +4677,7 @@ function ListViewEditableRowTitle({
   autoFocus,
   placeholder
 }) {
-  const inputRef = useRef15(null);
+  const inputRef = useRef16(null);
   useLayoutEffect6(() => {
     const element = inputRef.current;
     if (!element || !autoFocus)
@@ -4766,8 +4829,9 @@ var ListViewRow = forwardRef13(function ListViewRow2({
   onSelectMenuItem,
   onMenuOpenChange,
   onKeyDown,
-  style: style3,
-  dragIndicatorStyle
+  style: style2,
+  dragIndicatorStyle,
+  className
 }, forwardedRef) {
   depth = Math.max(0, depth);
   const {
@@ -4784,7 +4848,7 @@ var ListViewRow = forwardRef13(function ListViewRow2({
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { indentation, isDragging } = useContext9(DraggingContext);
+  const { indentation, isDragging } = useContext9(ListViewDraggingContext);
   const handlePress = useCallback20(
     (event) => {
       event.preventDefault();
@@ -4806,9 +4870,9 @@ var ListViewRow = forwardRef13(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
@@ -4843,7 +4907,8 @@ var ListViewRow = forwardRef13(function ListViewRow2({
           { onPointerDown: renderProps.onPointerDown },
           { [pressEventName]: handlePress }
         ),
-        tabIndex
+        tabIndex,
+        className
       },
       relativeDropPosition && /* @__PURE__ */ React35.createElement(
         ListViewDragIndicatorElement,
@@ -4886,12 +4951,13 @@ var ListViewRow = forwardRef13(function ListViewRow2({
 var RenderItemContext = createContext9(
   () => null
 );
+RenderItemContext.displayName = "RenderItemContext";
 var VirtualizedListRow = memo22(function VirtualizedListRow2({
   index,
-  style: style3
+  style: style2
 }) {
   const renderItem = useContext9(RenderItemContext);
-  return /* @__PURE__ */ React35.createElement("div", { key: index, style: style3 }, renderItem(index));
+  return /* @__PURE__ */ React35.createElement("div", { key: index, style: style2 }, renderItem(index));
 });
 var VirtualizedListInner = forwardRef13(function VirtualizedListInner2({
   size: size2,
@@ -4901,7 +4967,7 @@ var VirtualizedListInner = forwardRef13(function VirtualizedListInner2({
   keyExtractor,
   renderItem
 }, ref) {
-  const listRef = useRef15(null);
+  const listRef = useRef16(null);
   useImperativeHandle2(ref, () => ({
     scrollToIndex(index) {
       listRef.current?.scrollToItem(index);
@@ -4977,7 +5043,7 @@ var RootContainer2 = styled23.div(({ theme, $scrollable, $gap }) => ({
 var ListViewRootInner = forwardRef13(function ListViewRootInner2({
   id,
   className,
-  style: style3,
+  style: style2,
   onPress,
   scrollable = false,
   expandable = true,
@@ -5010,8 +5076,26 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
     (index) => renderItem(data[index], index, { isDragging: false }),
     [data, renderItem]
   );
+  const defaultContextValue = useMemo18(
+    () => ({
+      colorScheme,
+      marginType: "none",
+      selectedPosition: "only",
+      sortable,
+      expandable,
+      divider,
+      pressEventName,
+      variant,
+      gap,
+      sectionHeaderVariant: "normal",
+      isSectionHeader: false
+    }),
+    [colorScheme, sortable, expandable, divider, pressEventName, variant, gap]
+  );
   const getItemContextValue = useCallback20(
     (i) => {
+      if (variant === "bare" || variant === "normal")
+        return defaultContextValue;
       const current = renderChild(i);
       if (!isValidElement3(current))
         return;
@@ -5058,6 +5142,8 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
       };
     },
     [
+      variant,
+      defaultContextValue,
       renderChild,
       data.length,
       colorScheme,
@@ -5065,7 +5151,6 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
       expandable,
       divider,
       pressEventName,
-      variant,
       sectionHeaderVariant,
       gap
     ]
@@ -5075,7 +5160,7 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
     [indentation]
   );
   const renderOverlay = useCallback20(
-    (index) => /* @__PURE__ */ React35.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React35.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
+    (index) => /* @__PURE__ */ React35.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React35.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
   const renderWrappedChild = useCallback20(
@@ -5114,12 +5199,12 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
     [data, keyExtractor]
   );
   const draggingContextValue = useMemo18(() => ({ indentation }), [indentation]);
-  return /* @__PURE__ */ React35.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React35.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React35.createElement(
     RootContainer2,
     {
       id,
       className,
-      style: style3,
+      style: style2,
       ...{
         [pressEventName]: handleClick
       },
@@ -5225,6 +5310,7 @@ var Text = forwardRef14(function Text2({
   tabIndex,
   onClick,
   onKeyDown,
+  style: style2,
   ...rest
 }, forwardedRef) {
   const element = as ?? elements[variant] ?? "span";
@@ -5234,6 +5320,7 @@ var Text = forwardRef14(function Text2({
       ref: forwardedRef,
       as: element,
       className,
+      style: style2,
       tabIndex,
       $variant: variant,
       $breakpoints: breakpoints,
@@ -5368,13 +5455,13 @@ var InputFieldWithCompletions = memo23(
     onFocus,
     onBlur,
     onDeleteWhenEmpty,
-    style: style3,
+    style: style2,
     className,
     children,
     hideChildrenWhenFocused = false,
     hideMenuWhenEmptyValue = false
   }, forwardedRef) {
-    const ref = useRef16(null);
+    const ref = useRef17(null);
     const [isFocused, setIsFocused] = useState20(false);
     const [state, _setState] = useState20({
       filter: initialValue,
@@ -5409,7 +5496,7 @@ var InputFieldWithCompletions = memo23(
       },
       [items, onChange, onHoverItem, state]
     );
-    const initialValueRef = useRef16(initialValue);
+    const initialValueRef = useRef17(initialValue);
     useLayoutEffect7(() => {
       if (initialValueRef.current === initialValue)
         return;
@@ -5439,7 +5526,7 @@ var InputFieldWithCompletions = memo23(
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
-    const lastSubmittedValueRef = useRef16(void 0);
+    const lastSubmittedValueRef = useRef17(void 0);
     const selectItem = useCallback21(
       (item) => {
         if (item.type === "sectionHeader")
@@ -5593,7 +5680,7 @@ var InputFieldWithCompletions = memo23(
           onBlur: handleBlur,
           onFocusCapture: handleFocus,
           onKeyDown: handleKeyDown,
-          style: style3,
+          style: style2,
           className,
           autoCapitalize: "off",
           autoComplete: "off",
@@ -5606,7 +5693,7 @@ var InputFieldWithCompletions = memo23(
           "aria-controls": "component-listbox"
         }
       ),
-      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ React37.createElement(InputField.Typeahead, { value: typeaheadValue }),
+      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ React37.createElement(InputField.Typeahead, { value: typeaheadValue, prefix: filter }),
       (!isFocused || !hideChildrenWhenFocused) && children,
       loading && isFocused && /* @__PURE__ */ React37.createElement(InputField.Label, null, /* @__PURE__ */ React37.createElement(ActivityIndicator, null))
     );
@@ -5639,7 +5726,7 @@ var InspectorContainer = memo24(
     showDividers,
     id,
     className,
-    style: style3
+    style: style2
   }, forwardedRef) {
     const theme = useDesignSystemTheme();
     return /* @__PURE__ */ React38.createElement(
@@ -5653,7 +5740,7 @@ var InspectorContainer = memo24(
           flexDirection: "column",
           position: "relative",
           background: theme.colors.sidebar.background,
-          ...style3
+          ...style2
         }
       },
       header,
@@ -5710,7 +5797,7 @@ import React40, {
   memo as memo26,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo20,
-  useRef as useRef17
+  useRef as useRef18
 } from "react";
 import styled27 from "styled-components";
 var Container4 = styled27.div(({ theme }) => ({
@@ -5740,7 +5827,7 @@ var LabeledElementView = memo26(function LabeledElementView2({
     (child) => isValidElement4(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = useRef17(null);
+  const containerRef = useRef18(null);
   const refs = useMemo20(() => {
     return Object.fromEntries(
       serializedIds.split(",").map((id) => [id, createRef()])
@@ -5987,7 +6074,7 @@ import React43, {
   useContext as useContext11,
   useEffect as useEffect15,
   useMemo as useMemo22,
-  useRef as useRef18
+  useRef as useRef19
 } from "react";
 import styled30 from "styled-components";
 var SelectContext = createContext11(void 0);
@@ -6088,7 +6175,7 @@ var Select = memo28(function Select2({
     )) : children,
     [children, getTitle, onChange, options]
   );
-  const listeners = useRef18(/* @__PURE__ */ new Map());
+  const listeners = useRef19(/* @__PURE__ */ new Map());
   const contextValue = useMemo22(
     () => ({
       addListener: (value2, listener) => listeners.current.set(value2, listener),
@@ -6117,20 +6204,43 @@ import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import * as Select3 from "@radix-ui/react-select";
 import React44, { memo as memo29 } from "react";
 import { styled as styled31 } from "styled-components";
+var readOnlyStyle = {
+  justifyContent: "flex-start",
+  textAlign: "left"
+};
+var flexStyle = {
+  flex: 1
+};
 var SelectMenu = memo29(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__ */ React44.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ React44.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ React44.createElement(Button, { id, style: style3, className }, icon && /* @__PURE__ */ React44.createElement(React44.Fragment, null, renderIcon(icon), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React44.createElement(Select3.Value, { placeholder }), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React44.createElement(DropdownChevronIcon, null))), /* @__PURE__ */ React44.createElement(Select3.Portal, null, /* @__PURE__ */ React44.createElement(SelectContent, null, /* @__PURE__ */ React44.createElement(SelectViewport, null, menuItems.map((menuItem) => {
+  if (readOnly) {
+    return /* @__PURE__ */ React44.createElement(
+      Button,
+      {
+        id,
+        style: style2,
+        contentStyle: readOnlyStyle,
+        className,
+        disabled
+      },
+      icon && /* @__PURE__ */ React44.createElement(React44.Fragment, null, renderIcon(icon), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
+      /* @__PURE__ */ React44.createElement("span", { style: flexStyle }, selectedItem?.title ?? value)
+    );
+  }
+  return /* @__PURE__ */ React44.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ React44.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ React44.createElement(Button, { id, style: style2, className, disabled }, icon && /* @__PURE__ */ React44.createElement(React44.Fragment, null, renderIcon(icon), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { inline: true, size: 6 })), /* @__PURE__ */ React44.createElement("span", { style: flexStyle }, /* @__PURE__ */ React44.createElement(Select3.Value, { placeholder })), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { inline: true, size: 6 }), /* @__PURE__ */ React44.createElement(DropdownChevronIcon, null))), /* @__PURE__ */ React44.createElement(Select3.Portal, null, /* @__PURE__ */ React44.createElement(SelectContent, null, /* @__PURE__ */ React44.createElement(SelectViewport, null, menuItems.map((menuItem) => {
     if (typeof menuItem === "string") {
       return /* @__PURE__ */ React44.createElement(StyledSeparator, null);
     }
@@ -6254,13 +6364,15 @@ var SwitchThumb = styled33(SwitchPrimitive.Thumb)({
 var Switch = function Switch2({
   value,
   onChange,
-  colorScheme = "normal"
+  colorScheme = "normal",
+  disabled
 }) {
   return /* @__PURE__ */ React46.createElement(
     SwitchRoot,
     {
       $colorScheme: colorScheme,
       checked: value,
+      disabled,
       onCheckedChange: (newValue) => {
         onChange(newValue);
       }
@@ -6269,14 +6381,80 @@ var Switch = function Switch2({
   );
 };
 
+// src/components/TextArea.tsx
+import React47, { forwardRef as forwardRef18, memo as memo30, useCallback as useCallback25, useEffect as useEffect16, useRef as useRef20 } from "react";
+import styled34 from "styled-components";
+var TextAreaElement = styled34.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 = useRef20(null);
+  useEffect16(() => {
+    if (!textareaRef.current)
+      return;
+    textareaRef.current.style.height = "auto";
+    textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+  }, [value]);
+  return textareaRef;
+};
+var AutoResizingTextArea = memo30(
+  forwardRef18(function AutoResizingTextArea2({
+    value,
+    onChangeText,
+    ...rest
+  }, forwardedRef) {
+    const ref = useAutoResize(value || rest.placeholder || "");
+    const handleChange = useCallback25(
+      (event) => onChangeText(event.target.value),
+      [onChangeText]
+    );
+    const handleRef = useCallback25(
+      (value2) => {
+        ref.current = value2;
+        assignRef(forwardedRef, value2);
+      },
+      [ref, forwardedRef]
+    );
+    return /* @__PURE__ */ React47.createElement(
+      TextAreaElement,
+      {
+        ref: handleRef,
+        ...rest,
+        onChange: handleChange,
+        value
+      }
+    );
+  })
+);
+
 // src/components/TreeView.tsx
-import React47, {
-  forwardRef as forwardRef18,
-  memo as memo30,
-  useCallback as useCallback25,
+import React48, {
+  forwardRef as forwardRef19,
+  memo as memo31,
+  useCallback as useCallback26,
   useContext as useContext12
 } from "react";
-var TreeRow = forwardRef18(function TreeRow2({
+var TreeRow = forwardRef19(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
@@ -6284,33 +6462,33 @@ var TreeRow = forwardRef18(function TreeRow2({
   ...rest
 }, forwardedRef) {
   const { expandable } = useContext12(ListView.RowContext);
-  const handleClickChevron = useCallback25(
+  const handleClickChevron = useCallback26(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ React47.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React47.createElement(React47.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React47.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React48.createElement(React48.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React48.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React48.createElement(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React47.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React47.createElement(React47.Fragment, null, renderIcon(icon), /* @__PURE__ */ React47.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ React48.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React48.createElement(React48.Fragment, null, renderIcon(icon), /* @__PURE__ */ React48.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
   TreeView2.Root = ListView.Root;
   TreeView2.RowTitle = ListView.RowTitle;
   TreeView2.EditableRowTitle = ListView.EditableRowTitle;
-  TreeView2.Row = memo30(TreeRow);
+  TreeView2.Row = memo31(TreeRow);
 })(TreeView || (TreeView = {}));
 
 // src/components/WorkspaceLayout.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
-import React49, { forwardRef as forwardRef19, useImperativeHandle as useImperativeHandle4, useRef as useRef20 } from "react";
+import React50, { forwardRef as forwardRef20, useImperativeHandle as useImperativeHandle4, useRef as useRef22 } from "react";
 import {
   Panel,
   PanelGroup,
@@ -6318,10 +6496,10 @@ import {
 } from "react-resizable-panels";
 
 // src/hooks/usePreservePanelSize.tsx
-import { useLayoutEffect as useLayoutEffect9, useRef as useRef19 } from "react";
+import { useLayoutEffect as useLayoutEffect9, useRef as useRef21 } from "react";
 
 // src/hooks/useWindowSize.tsx
-import { useEffect as useEffect16, useState as useState21 } from "react";
+import { useEffect as useEffect17, useState as useState21 } from "react";
 function useWindowSize() {
   const [size2, setSize] = useState21(
     typeof window === "undefined" ? { width: 0, height: 0 } : {
@@ -6329,7 +6507,7 @@ function useWindowSize() {
       height: window.innerHeight
     }
   );
-  useEffect16(() => {
+  useEffect17(() => {
     const handleResize = () => setSize({
       width: window.innerWidth,
       height: window.innerHeight
@@ -6347,7 +6525,7 @@ var RIGHT_SIDEBAR_ID = "editor-right-sidebar";
 var CONTENT_AREA_ID = "editor-content-area";
 function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
   const windowSize = useWindowSize();
-  const layoutRef = useRef19();
+  const layoutRef = useRef21();
   useLayoutEffect9(() => {
     const panelGroup = document.querySelector(
       `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
@@ -6451,7 +6629,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/WorkspaceLayout.tsx
-var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
+var WorkspaceLayout = forwardRef20(function WorkspaceLayout2({
   autoSavePrefix,
   leftSidebarContent: leftPanelContent,
   children: centerPanelContent,
@@ -6466,7 +6644,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
   leftSidebarCanResize = false,
   id,
   className,
-  style: style3
+  style: style2
 }, forwardedRef) {
   const windowSize = useWindowSize();
   function getPercentage(size2) {
@@ -6476,9 +6654,9 @@ var WorkspaceLayout = forwardRef19(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 = useRef20(null);
-  const leftSidebarRef = useRef20(null);
-  const rightSidebarRef = useRef20(null);
+  const panelGroupRef = useRef22(null);
+  const leftSidebarRef = useRef22(null);
+  const rightSidebarRef = useRef22(null);
   usePreservePanelSize(panelGroupRef, onChangeLayoutState);
   const theme = useDesignSystemTheme();
   useImperativeHandle4(forwardedRef, () => ({
@@ -6538,7 +6716,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
     }
   });
   const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
-  return /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React50.createElement(
     "div",
     {
       id,
@@ -6547,10 +6725,10 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
         backgroundColor: theme.colors.canvas.background,
         display: "flex",
         flexDirection: "row",
-        ...style3
+        ...style2
       }
     },
-    /* @__PURE__ */ React49.createElement(
+    /* @__PURE__ */ React50.createElement(
       PanelGroup,
       {
         ref: panelGroupRef,
@@ -6559,7 +6737,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
         autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
         style: { flex: "1" }
       },
-      hasLeftSidebar && /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(
+      hasLeftSidebar && /* @__PURE__ */ React50.createElement(React50.Fragment, null, /* @__PURE__ */ React50.createElement(
         Panel,
         {
           id: LEFT_SIDEBAR_ID,
@@ -6576,7 +6754,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
           }
         },
         leftPanelContent
-      ), /* @__PURE__ */ React49.createElement(
+      ), /* @__PURE__ */ React50.createElement(
         PanelResizeHandle,
         {
           style: {
@@ -6587,7 +6765,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
           }
         }
       )),
-      /* @__PURE__ */ React49.createElement(
+      /* @__PURE__ */ React50.createElement(
         Panel,
         {
           id: CONTENT_AREA_ID,
@@ -6602,7 +6780,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
         },
         centerPanelContent
       ),
-      hasRightSidebar && /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(
+      hasRightSidebar && /* @__PURE__ */ React50.createElement(React50.Fragment, null, /* @__PURE__ */ React50.createElement(
         PanelResizeHandle,
         {
           style: {
@@ -6612,7 +6790,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
             backgroundColor: theme.colors.divider
           }
         }
-      ), /* @__PURE__ */ React49.createElement(
+      ), /* @__PURE__ */ React50.createElement(
         Panel,
         {
           id: RIGHT_SIDEBAR_ID,
@@ -6675,8 +6853,8 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/ArrayController.tsx
 import { range as range2 } from "@noya-app/noya-utils";
-import React51, { memo as memo32, useCallback as useCallback26, useMemo as useMemo24 } from "react";
-import styled35, { useTheme as useTheme5 } from "styled-components";
+import React52, { memo as memo33, useCallback as useCallback27, useMemo as useMemo24 } from "react";
+import styled36, { useTheme as useTheme5 } from "styled-components";
 
 // src/components/InspectorPrimitives.tsx
 var InspectorPrimitives_exports = {};
@@ -6694,20 +6872,20 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-import React50, { memo as memo31 } from "react";
-import styled34, { useTheme as useTheme4 } from "styled-components";
-var Section = styled34.div(({ theme, $padding = "10px", $gap }) => ({
+import React51, { memo as memo32 } from "react";
+import styled35, { useTheme as useTheme4 } from "styled-components";
+var Section = styled35.div(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
   display: "flex",
   flexDirection: "column",
   padding: $padding,
   gap: $gap
 }));
-var SectionHeader = styled34.div(({ theme }) => ({
+var SectionHeader = styled35.div(({ theme }) => ({
   display: "flex",
   alignItems: "center"
 }));
-var Title3 = styled34.div(({ theme, $textStyle }) => ({
+var Title3 = styled35.div(({ theme, $textStyle }) => ({
   display: "flex",
   flexDirection: "row",
   userSelect: "none",
@@ -6716,11 +6894,11 @@ var Title3 = styled34.div(({ theme, $textStyle }) => ({
     color: theme.colors.text
   } : {
     ...theme.textStyles.label,
-    color: theme.colors.textSubtle,
+    color: theme.colors.textMuted,
     fontWeight: "bold"
   }
 }));
-var Row2 = styled34.div(
+var Row2 = styled35.div(
   ({ theme, $gap }) => ({
     flex: "1",
     display: "flex",
@@ -6729,26 +6907,26 @@ var Row2 = styled34.div(
     gap: $gap
   })
 );
-var Column = styled34.div(({ theme }) => ({
+var Column = styled35.div(({ theme }) => ({
   flex: "1",
   display: "flex",
   flexDirection: "column",
   gap: "4px"
 }));
-var Checkbox = styled34.input(({ theme }) => ({
+var Checkbox = styled35.input(({ theme }) => ({
   margin: 0
 }));
-var Text3 = styled34.span(({ theme }) => ({
+var Text3 = styled35.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ React50.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ React50.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
-var SliderRowLabel = styled34.span(({ theme }) => ({
+var VerticalSeparator = () => /* @__PURE__ */ React51.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ React51.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
+var SliderRowLabel = styled35.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
   marginBottom: "-6px"
 }));
-var RowLabel = styled34.span(({ theme, $textStyle }) => ({
+var RowLabel = styled35.span(({ theme, $textStyle }) => ({
   // marginBottom: '6px',
   display: "flex",
   ...$textStyle ? {
@@ -6762,7 +6940,7 @@ var RowLabel = styled34.span(({ theme, $textStyle }) => ({
   // Button height
   alignItems: "center"
 }));
-var LabeledRow = memo31(function LabeledRow2({
+var LabeledRow = memo32(function LabeledRow2({
   id,
   children,
   label,
@@ -6770,26 +6948,26 @@ var LabeledRow = memo31(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ React50.createElement(Row2, { id }, /* @__PURE__ */ React50.createElement(Column, null, /* @__PURE__ */ React50.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React50.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React50.createElement(Row2, { $gap: gap }, children)));
+  return /* @__PURE__ */ React51.createElement(Row2, { id }, /* @__PURE__ */ React51.createElement(Column, null, /* @__PURE__ */ React51.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React51.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React51.createElement(Row2, { $gap: gap }, children)));
 });
-var LabeledSliderRow = memo31(function LabeledRow3({
+var LabeledSliderRow = memo32(function LabeledRow3({
   children,
   label
 }) {
-  return /* @__PURE__ */ React50.createElement(Row2, null, /* @__PURE__ */ React50.createElement(Column, null, /* @__PURE__ */ React50.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React50.createElement(Row2, null, children)));
+  return /* @__PURE__ */ React51.createElement(Row2, null, /* @__PURE__ */ React51.createElement(Column, null, /* @__PURE__ */ React51.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React51.createElement(Row2, null, children)));
 });
 
 // src/components/ArrayController.tsx
-var ElementRow = styled35.div({
+var ElementRow = styled36.div({
   flex: "0 0 auto",
   display: "flex",
   flexDirection: "row",
   alignItems: "center"
 });
-var ItemContainer2 = styled35.div({
+var ItemContainer2 = styled36.div({
   position: "relative"
 });
-var ArrayController = memo32(function ArrayController2({
+var ArrayController = memo33(function ArrayController2({
   id,
   items,
   title,
@@ -6812,7 +6990,7 @@ var ArrayController = memo32(function ArrayController2({
     [getKey, items]
   );
   const indexes = reversed ? range2(0, items.length).reverse() : range2(0, items.length);
-  const handleMoveItem = useCallback26(
+  const handleMoveItem = useCallback27(
     (sourceIndex, destinationIndex, position) => {
       if (reversed) {
         if (position === "above") {
@@ -6829,11 +7007,11 @@ var ArrayController = memo32(function ArrayController2({
     [onMoveItem, reversed]
   );
   const renderRow = (index) => {
-    return /* @__PURE__ */ React51.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
+    return /* @__PURE__ */ React52.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
   };
-  return /* @__PURE__ */ React51.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ React51.createElement(SectionHeader, null, /* @__PURE__ */ React51.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ React51.createElement(Title3, null, title)), /* @__PURE__ */ React51.createElement(Spacer.Horizontal, null), withSeparatorElements(
+  return /* @__PURE__ */ React52.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ React52.createElement(SectionHeader, null, /* @__PURE__ */ React52.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ React52.createElement(Title3, null, title)), /* @__PURE__ */ React52.createElement(Spacer.Horizontal, null), withSeparatorElements(
     [
-      onClickTrash && /* @__PURE__ */ React51.createElement(
+      onClickTrash && /* @__PURE__ */ React52.createElement(
         IconButton,
         {
           id: `${id}-trash`,
@@ -6842,7 +7020,7 @@ var ArrayController = memo32(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ React51.createElement(
+      onClickExpand && /* @__PURE__ */ React52.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -6851,7 +7029,7 @@ var ArrayController = memo32(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ React51.createElement(
+      onClickPlus && /* @__PURE__ */ React52.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -6861,15 +7039,15 @@ var ArrayController = memo32(function ArrayController2({
         }
       )
     ],
-    /* @__PURE__ */ React51.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ React51.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ React51.createElement(
+    /* @__PURE__ */ React52.createElement(Spacer.Horizontal, { size: 8 })
+  )), /* @__PURE__ */ React52.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ React52.createElement(
     Sortable.Root,
     {
       keys,
       renderOverlay: renderRow,
       onMoveItem: handleMoveItem
     },
-    indexes.map((index) => /* @__PURE__ */ React51.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ React51.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ React51.createElement(
+    indexes.map((index) => /* @__PURE__ */ React52.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ React52.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ React52.createElement(
       ListView.DragIndicator,
       {
         $gap: 0,
@@ -6883,11 +7061,11 @@ var ArrayController = memo32(function ArrayController2({
 
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import React52, { memo as memo33, useCallback as useCallback27 } from "react";
+import React53, { memo as memo34, useCallback as useCallback28 } from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = memo33(function DimensionInput2({
+var DimensionInput = memo34(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -6897,15 +7075,15 @@ var DimensionInput = memo33(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = useCallback27(
+  const handleNudgeValue = useCallback28(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = useCallback27(
+  const handleSetValue = useCallback28(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React52.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React53.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ React53.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : round(value, 2),
@@ -6914,11 +7092,12 @@ var DimensionInput = memo33(function DimensionInput2({
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ React52.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ React53.createElement(InputField.Label, null, label));
 });
 export {
   ActivityIndicator,
   ArrayController,
+  AutoResizingTextArea,
   Avatar,
   AvatarStack,
   Body,
@@ -7002,6 +7181,7 @@ export {
   sketchColorToHex,
   sketchColorToRgba,
   sketchColorToRgbaString,
+  useAutoResize,
   useCurrentFloatingWindowInternal,
   useDesignSystemConfiguration,
   useDesignSystemTheme,