@noya-app/noya-designsystem 0.1.29 → 0.1.31

package/dist/index.js

@@ -1416,13 +1416,13 @@ var require_slicedToArray = __commonJS({
 var src_exports = {};
 __export(src_exports, {
   ActivityIndicator: () => ActivityIndicator,
-  ArrayController: () => ArrayController,
   AutoResizingTextArea: () => AutoResizingTextArea,
   Avatar: () => Avatar,
   AvatarStack: () => AvatarStack,
   Body: () => Body,
   Button: () => Button,
   ButtonElement: () => ButtonElement,
+  CONTENT_AREA_ID: () => CONTENT_AREA_ID,
   Chip: () => Chip,
   CloseButtonContainer: () => CloseButtonContainer,
   CompletionMenu: () => CompletionMenu,
@@ -1437,6 +1437,7 @@ __export(src_exports, {
   DividerVertical: () => DividerVertical,
   DraggableMenuButton: () => DraggableMenuButton,
   DropdownMenu: () => DropdownMenu,
+  EDITOR_PANEL_GROUP_ID: () => EDITOR_PANEL_GROUP_ID,
   FillInputField: () => FillInputField,
   FillPreviewBackground: () => FillPreviewBackground,
   FloatingWindow: () => FloatingWindow,
@@ -1460,21 +1461,21 @@ __export(src_exports, {
   InspectorPrimitives: () => InspectorPrimitives_exports,
   Italic: () => Italic,
   KeyboardShortcut: () => KeyboardShortcut,
+  LEFT_SIDEBAR_ID: () => LEFT_SIDEBAR_ID,
   Label: () => Label,
   LabeledElementView: () => LabeledElementView,
   ListView: () => ListView,
   PatternPreviewBackground: () => PatternPreviewBackground,
   Popover: () => Popover,
   Progress: () => Progress,
+  RIGHT_SIDEBAR_ID: () => RIGHT_SIDEBAR_ID,
   RadioGroup: () => RadioGroup,
   Row: () => Row,
   SEPARATOR_ITEM: () => SEPARATOR_ITEM,
   SUPPORTED_CANVAS_UPLOAD_TYPES: () => SUPPORTED_CANVAS_UPLOAD_TYPES,
   SUPPORTED_IMAGE_UPLOAD_TYPES: () => SUPPORTED_IMAGE_UPLOAD_TYPES,
   ScrollArea: () => ScrollArea,
-  Select: () => Select,
   SelectMenu: () => SelectMenu,
-  SelectOption: () => SelectOption,
   Slider: () => Slider,
   Small: () => Small,
   Sortable: () => Sortable,
@@ -1517,6 +1518,7 @@ __export(src_exports, {
   useOpenInputDialog: () => useOpenInputDialog,
   usePlatform: () => usePlatform,
   usePlatformModKey: () => usePlatformModKey,
+  usePreservePanelSize: () => usePreservePanelSize,
   withSeparatorElements: () => withSeparatorElements
 });
 module.exports = __toCommonJS(src_exports);
@@ -1611,6 +1613,10 @@ var StackBase = (0, import_react3.forwardRef)(function StackBase2({
   breakpoints,
   tabIndex,
   href,
+  paddingHorizontal,
+  paddingVertical,
+  padding,
+  style: style5,
   ...rest
 }, forwardedRef) {
   const elements2 = separator ? withSeparatorElements(import_react3.Children.toArray(children2), separator) : children2;
@@ -1618,7 +1624,9 @@ var StackBase = (0, import_react3.forwardRef)(function StackBase2({
     display: "flex",
     position: "relative",
     alignItems: "stretch",
-    ...rest
+    padding: padding || `${paddingVertical ?? 0} ${paddingHorizontal ?? 0} ${paddingVertical ?? 0} ${paddingHorizontal ?? 0}`,
+    ...rest,
+    ...style5
   };
   return /* @__PURE__ */ import_react3.default.createElement(
     Element2,
@@ -1840,8 +1848,8 @@ var ButtonElement = import_styled_components5.default.button(
       background: "white",
       color: theme.colors.text,
       boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
-      fontSize: "12px",
-      padding: "0px 4px",
+      fontSize: $size === "small" ? "10px" : "12px",
+      padding: $size === "small" ? "0px 2px" : "0px 4px",
       "&:hover": {
         opacity: 0.8
       },
@@ -3321,35 +3329,38 @@ function Popover({
 // src/components/InputField.tsx
 var InputFieldContext = (0, import_react33.createContext)({
   labelPosition: "end",
-  labelSize: 6,
-  hasLabel: false,
+  labelSize: void 0,
+  buttonSize: void 0,
   hasDropdown: false,
   size: "medium",
   isFocused: false,
   onFocusChange: () => {
   }
 });
-var LabelContainer = import_styled_components13.default.label(({ theme, $labelPosition, $hasDropdown, pointerEvents }) => ({
-  ...theme.textStyles.label,
-  fontWeight: "bold",
-  color: theme.colors.textDisabled,
-  position: "absolute",
-  top: 0,
-  right: $labelPosition === "end" ? 0 : void 0,
-  bottom: 0,
-  left: $labelPosition === "start" ? 0 : void 0,
-  display: "flex",
-  alignItems: "center",
-  pointerEvents,
-  userSelect: "none",
-  ...$labelPosition === "start" ? { justifyContent: "flex-start", paddingLeft: "6px" } : {
-    justifyContent: "flex-end",
-    paddingRight: $hasDropdown ? "16px" : "6px"
-  }
-}));
+var LabelContainer = import_styled_components13.default.label(({ theme, $labelPosition, $hasDropdown, pointerEvents, $size }) => {
+  const offsetRelativeToSize = $size === "large" ? 6 : $size === "medium" ? 2 : 0;
+  return {
+    ...theme.textStyles.label,
+    fontWeight: "bold",
+    color: theme.colors.textDisabled,
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    right: $labelPosition === "end" ? offsetRelativeToSize : void 0,
+    left: $labelPosition === "start" ? offsetRelativeToSize : void 0,
+    display: "flex",
+    alignItems: "center",
+    pointerEvents,
+    userSelect: "none",
+    ...$labelPosition === "start" ? { justifyContent: "flex-start", paddingLeft: "6px" } : {
+      justifyContent: "flex-end",
+      paddingRight: $hasDropdown ? "16px" : "6px"
+    }
+  };
+});
 var InputFieldLabel = (0, import_react33.memo)(
   (0, import_react33.forwardRef)(function InputFieldLabel2({ children: children2 = false, pointerEvents = "none", style: style5 }, forwardedRef) {
-    const { labelPosition, hasDropdown, setLabelWidth } = (0, import_react33.useContext)(InputFieldContext);
+    const { labelPosition, hasDropdown, setLabelWidth, size: size3 } = (0, import_react33.useContext)(InputFieldContext);
     const ref = (0, import_react33.useRef)(null);
     (0, import_react33.useLayoutEffect)(() => {
       if (!setLabelWidth)
@@ -3362,6 +3373,7 @@ var InputFieldLabel = (0, import_react33.memo)(
     return /* @__PURE__ */ import_react33.default.createElement(
       LabelContainer,
       {
+        $size: size3,
         ref: (element) => {
           ref.current = element;
           assignRef(forwardedRef, element);
@@ -3398,40 +3410,56 @@ var ButtonContainer = import_styled_components13.default.span(
   ({ theme, $size }) => ({
     position: "absolute",
     right: $size === "large" ? "9px" : $size === "medium" ? "4px" : "2px",
-    top: $size === "large" ? "8px" : $size === "medium" ? "4px" : "2px"
+    top: $size === "large" ? "10px" : $size === "medium" ? "4px" : "2px"
   })
 );
-var InputFieldButton = (0, import_react33.memo)(function InputFieldButton2({
-  children: children2,
-  onClick
-}) {
-  const { size: size3, inputRef } = (0, import_react33.useContext)(InputFieldContext);
-  const defaultHandleClick = (0, import_react33.useCallback)(
-    (event) => {
-      if (inputRef && typeof inputRef !== "function") {
-        inputRef.current?.focus();
-        inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
-      }
+var InputFieldButton = (0, import_react33.memo)(
+  (0, import_react33.forwardRef)(function InputFieldButton2({
+    children: children2,
+    onClick
+  }, forwardedRef) {
+    const { size: size3, inputRef, setButtonWidth } = (0, import_react33.useContext)(InputFieldContext);
+    const ref = (0, import_react33.useRef)(null);
+    (0, import_react33.useLayoutEffect)(() => {
+      if (!setButtonWidth)
+        return;
+      const width = ref.current?.getBoundingClientRect().width;
+      if (!width)
+        return;
+      setButtonWidth(width);
+    }, [setButtonWidth]);
+    const defaultHandleClick = (0, import_react33.useCallback)(
+      (event) => {
+        if (inputRef && typeof inputRef !== "function") {
+          inputRef.current?.focus();
+          inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      [inputRef]
+    );
+    const handlePointerDown = (0, import_react33.useCallback)((event) => {
       event.preventDefault();
       event.stopPropagation();
-    },
-    [inputRef]
-  );
-  const handlePointerDown = (0, import_react33.useCallback)((event) => {
-    event.preventDefault();
-    event.stopPropagation();
-  }, []);
-  return /* @__PURE__ */ import_react33.default.createElement(ButtonContainer, { $size: size3 }, /* @__PURE__ */ import_react33.default.createElement(
-    Button,
-    {
-      variant: "floating",
-      onClick: onClick ?? defaultHandleClick,
-      onPointerDown: handlePointerDown,
-      tabIndex: -1
-    },
-    children2
-  ));
-});
+    }, []);
+    return /* @__PURE__ */ import_react33.default.createElement(ButtonContainer, { $size: size3 }, /* @__PURE__ */ import_react33.default.createElement(
+      Button,
+      {
+        ref: (element) => {
+          ref.current = element;
+          assignRef(forwardedRef, element);
+        },
+        variant: "floating",
+        onClick: onClick ?? defaultHandleClick,
+        onPointerDown: handlePointerDown,
+        tabIndex: -1,
+        size: size3 === "medium" ? "normal" : size3
+      },
+      children2
+    ));
+  })
+);
 var InputElement = (0, import_styled_components13.default)(TextInput_default)(({
   theme,
   $labelPosition,
@@ -3439,7 +3467,6 @@ var InputElement = (0, import_styled_components13.default)(TextInput_default)(({
   $hasDropdown,
   $textAlign,
   disabled,
-  $hasLabel,
   readOnly,
   $variant = "normal",
   $size
@@ -3466,8 +3493,8 @@ var InputElement = (0, import_styled_components13.default)(TextInput_default)(({
     borderRadius: "4px",
     paddingTop: $size === "large" ? "10px" : $size === "medium" ? "4px" : "1px",
     paddingBottom: $size === "large" ? "10px" : $size === "medium" ? "4px" : "1px",
-    paddingLeft: ($size === "large" ? 10 : $size === "medium" ? 6 : 4) + ($hasLabel && $labelPosition === "start" ? 6 + $labelSize : 0) + "px",
-    paddingRight: ($size === "large" ? 10 : $size === "medium" ? 6 : 4) + ($hasLabel && $labelPosition === "end" ? 6 + $labelSize : 0) + ($hasDropdown ? 11 : 0) + "px",
+    paddingLeft: ($size === "large" ? 10 : $size === "medium" ? 6 : 4) + ($labelSize && $labelPosition === "start" ? 6 + $labelSize : 0) + "px",
+    paddingRight: ($size === "large" ? 10 : $size === "medium" ? 6 : 4) + ($labelSize && $labelPosition === "end" ? 6 + $labelSize : 0) + ($hasDropdown ? 11 : 0) + "px",
     background: theme.colors.inputBackground,
     "&:focus": {
       boxShadow: `0 0 0 2px ${theme.colors.primary}`
@@ -3501,7 +3528,7 @@ var InputFieldInput = (0, import_react33.forwardRef)(function InputFieldInput2({
     labelPosition,
     labelSize,
     hasDropdown,
-    hasLabel,
+    buttonSize,
     size: size3,
     onFocusChange,
     setInputRef
@@ -3520,8 +3547,7 @@ var InputFieldInput = (0, import_react33.forwardRef)(function InputFieldInput2({
     {
       ref: forwardedRef,
       $labelPosition: labelPosition,
-      $labelSize: labelSize,
-      $hasLabel: hasLabel,
+      $labelSize: labelSize || buttonSize,
       $hasDropdown: hasDropdown,
       $size: size3,
       $variant: variant,
@@ -3536,7 +3562,6 @@ var InputFieldTypeahead = (props) => {
     labelPosition,
     labelSize,
     hasDropdown,
-    hasLabel,
     size: size3
     // onFocusChange,
   } = (0, import_react33.useContext)(InputFieldContext);
@@ -3546,7 +3571,6 @@ var InputFieldTypeahead = (props) => {
       as: "span",
       $labelPosition: labelPosition,
       $labelSize: labelSize,
-      $hasLabel: hasLabel,
       $hasDropdown: hasDropdown,
       $size: size3,
       value: "",
@@ -3633,15 +3657,13 @@ function InputFieldNumberInput(props) {
     }
   );
 }
-var RootContainer = import_styled_components13.default.div(
-  ({ theme, $flex, $width }) => ({
-    flex: $flex ?? "1",
-    display: "flex",
-    flexDirection: "row",
-    position: "relative",
-    maxWidth: typeof $width === "number" ? `${$width}px` : void 0
-  })
-);
+var RootContainer = import_styled_components13.default.div(({ theme, $flex, $width }) => ({
+  flex: $flex ?? "1",
+  display: "flex",
+  flexDirection: "row",
+  position: "relative",
+  maxWidth: typeof $width === "number" ? `${$width}px` : void 0
+}));
 function InputFieldRoot({
   id,
   flex,
@@ -3659,11 +3681,9 @@ function InputFieldRoot({
   const hasDropdown = childrenArray.some(
     (child) => (0, import_react33.isValidElement)(child) && child.type === InputFieldDropdownMenu
   );
-  const hasLabel = childrenArray.some(
-    (child) => (0, import_react33.isValidElement)(child) && child.type === InputFieldLabel
-  );
   const [isFocused, setIsFocused] = import_react33.default.useState(false);
   const [measuredLabelSize, setMeasuredLabelSize] = import_react33.default.useState();
+  const [measuredButtonSize, setMeasuredButtonSize] = import_react33.default.useState();
   const [measuredWidth, setMeasuredWidth] = import_react33.default.useState();
   const handleFocusChange = (0, import_react33.useCallback)(
     (isFocused2) => {
@@ -3683,22 +3703,23 @@ function InputFieldRoot({
   const contextValue = (0, import_react33.useMemo)(
     () => ({
       labelPosition,
-      labelSize: measuredLabelSize ?? labelSize ?? 6,
+      labelSize: measuredLabelSize ?? labelSize,
+      buttonSize: measuredButtonSize,
       hasDropdown,
-      hasLabel,
       size: size3,
       isFocused,
       onFocusChange: handleFocusChange,
       inputRef,
       setInputRef,
-      setLabelWidth: setMeasuredLabelSize
+      setLabelWidth: setMeasuredLabelSize,
+      setButtonWidth: setMeasuredButtonSize
     }),
     [
       labelPosition,
       measuredLabelSize,
       labelSize,
+      measuredButtonSize,
       hasDropdown,
-      hasLabel,
       size3,
       isFocused,
       handleFocusChange,
@@ -5473,44 +5494,44 @@ var sizes2 = {
     gap: 32
   }
 };
-var Grid2 = import_styled_components24.default.div(({ theme, size: size3, padding }) => {
+var Grid2 = import_styled_components24.default.div(({ theme, $size, $padding }) => {
   return {
     color: theme.colors.text,
     display: "grid",
-    gridTemplateColumns: `repeat(auto-fill, minmax(${sizes2[size3].itemWidth}px, 1fr))`,
+    gridTemplateColumns: `repeat(auto-fill, minmax(${sizes2[$size].itemWidth}px, 1fr))`,
     // gridAutoRows: `${sizes[size].itemHeight}px`,
-    gap: `${sizes2[size3].gap}px`,
+    gap: `${sizes2[$size].gap}px`,
     // gridTemplateColumns: `repeat(auto-fill, minmax(
     //   ${size === 'large' ? '280px' : size === 'small' ? '160px' : '116px'}
     // , 1fr))`,
     // gridAutoRows:
     //   size === 'large' ? '280px' : size === 'small' ? '170px' : '116px',
     // gap: size === 'large' || size === 'small' ? `20px` : `12px`,
-    padding
+    padding: $padding
   };
 });
 var Container3 = import_styled_components24.default.div(
-  ({ theme, scrollable }) => ({
-    flex: scrollable ? "1" : "0 0 auto",
+  ({ theme, $scrollable }) => ({
+    flex: $scrollable ? "1" : "0 0 auto",
     display: "flex",
     flexDirection: "column"
   })
 );
-var ContentContainer = import_styled_components24.default.div(({ theme, selected, hovered, bordered, disabled }) => ({
+var ContentContainer = import_styled_components24.default.div(({ theme, $selected, $hovered, $bordered, $disabled }) => ({
   display: "flex",
   flex: "1",
   backgroundColor: theme.colors.sidebar.background,
   alignItems: "center",
   justifyContent: "center",
   borderRadius: "2px",
-  border: `1px solid ${selected ? theme.colors.primary : (
+  border: `1px solid ${$selected ? theme.colors.primary : (
     // : hovered
     // ? `rgb(132, 63, 255, 0.5)`
-    bordered ? theme.colors.divider : "transparent"
+    $bordered ? theme.colors.divider : "transparent"
   )}`,
   overflow: "hidden",
   cursor: "pointer",
-  ...disabled ? { opacity: 0.5 } : {
+  ...$disabled ? { opacity: 0.5 } : {
     "&:hover": { opacity: 0.85 },
     "&:active": { opacity: 0.7 }
   }
@@ -5525,7 +5546,7 @@ var ItemContainer = import_styled_components24.default.div(({ theme }) => ({
   }
 }));
 var ItemTitle = import_styled_components24.default.span(
-  ({ theme, showBackground }) => ({
+  ({ theme, $showBackground }) => ({
     ...theme.textStyles.small,
     lineHeight: "1",
     color: theme.colors.text,
@@ -5534,7 +5555,7 @@ var ItemTitle = import_styled_components24.default.span(
     whiteSpace: "pre",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    ...showBackground && {
+    ...$showBackground && {
       background: theme.colors.sidebar.background,
       // border: `1px solid ${theme.colors.dividerSubtle}`,
       padding: "2px 4px",
@@ -5544,7 +5565,7 @@ var ItemTitle = import_styled_components24.default.span(
   })
 );
 var ItemDescription = import_styled_components24.default.span(
-  ({ theme, showBackground }) => ({
+  ({ theme, $showBackground }) => ({
     ...theme.textStyles.small,
     fontSize: "0.7rem",
     lineHeight: "1",
@@ -5553,7 +5574,7 @@ var ItemDescription = import_styled_components24.default.span(
     whiteSpace: "pre",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    ...showBackground && {
+    ...$showBackground && {
       background: theme.colors.sidebar.background,
       // border: `1px solid ${theme.colors.dividerSubtle}`,
       padding: "2px 4px",
@@ -5674,10 +5695,10 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
     /* @__PURE__ */ import_react48.default.createElement(
       ContentContainer,
       {
-        disabled,
-        bordered,
-        selected,
-        hovered: !disabled && hovered,
+        $disabled: disabled,
+        $bordered: bordered,
+        $selected: selected,
+        $hovered: !disabled && hovered,
         onClick: handleClick,
         onDoubleClick,
         onContextMenu,
@@ -5685,8 +5706,8 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
       },
       children2
     ),
-    textPosition === "below" && /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react48.default.createElement(TextOverlay, null, title && /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { showBackground: true }, subtitle)),
+    textPosition === "below" && /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { $showBackground: false }, title || " "), /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { $showBackground: false }, subtitle || " ")),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react48.default.createElement(TextOverlay, null, title && /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { $showBackground: true }, title), subtitle && /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { $showBackground: true }, subtitle)),
     loading && /* @__PURE__ */ import_react48.default.createElement(Shimmer, null, /* @__PURE__ */ import_react48.default.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
@@ -5696,7 +5717,7 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
     element = /* @__PURE__ */ import_react48.default.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ import_react48.default.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { showBackground: false }, subtitle))
+        content: /* @__PURE__ */ import_react48.default.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { $showBackground: false }, title), /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { $showBackground: false }, subtitle))
       },
       element
     );
@@ -5735,14 +5756,14 @@ function GridViewRoot({
     }),
     [bordered, disabled, size3, textPosition]
   );
-  return /* @__PURE__ */ import_react48.default.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react48.default.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ import_react48.default.createElement(ScrollArea, null, children2) : children2));
+  return /* @__PURE__ */ import_react48.default.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react48.default.createElement(Container3, { onClick: handleClick, $scrollable: scrollable }, scrollable ? /* @__PURE__ */ import_react48.default.createElement(ScrollArea, null, children2) : children2));
 }
 function GridViewSection({
   children: children2,
   padding = "20px"
 }) {
   const { size: size3 } = (0, import_react48.useContext)(GridViewContext);
-  return /* @__PURE__ */ import_react48.default.createElement(Grid2, { size: size3, padding }, children2);
+  return /* @__PURE__ */ import_react48.default.createElement(Grid2, { $size: size3, $padding: padding }, children2);
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
@@ -5819,14 +5840,14 @@ function mergeRanges(ranges) {
   const merged = [];
   const sorted = [...ranges].sort((a, b) => a.start - b.start);
   let current;
-  for (const range3 of sorted) {
+  for (const range2 of sorted) {
     if (!current) {
-      current = range3;
-    } else if (range3.start <= current.end) {
-      current.end = Math.max(current.end, range3.end);
+      current = range2;
+    } else if (range2.start <= current.end) {
+      current.end = Math.max(current.end, range2.end);
     } else {
       merged.push(current);
-      current = range3;
+      current = range2;
     }
   }
   if (current) {
@@ -10467,7 +10488,7 @@ var PositionCache = /* @__PURE__ */ function() {
     // Render all cells visible within the viewport range defined.
   }, {
     key: "range",
-    value: function range3(scrollTop, clientHeight, renderCallback) {
+    value: function range2(scrollTop, clientHeight, renderCallback) {
       var _this = this;
       this._intervalTree.queryInterval(scrollTop, scrollTop + clientHeight, function(_ref) {
         var _ref2 = (0, import_slicedToArray.default)(_ref, 3), top = _ref2[0], _ = _ref2[1], index = _ref2[2];
@@ -14594,72 +14615,22 @@ var RadioGroup;
   RadioGroup2.Item = (0, import_react57.memo)(ToggleGroupItem);
 })(RadioGroup || (RadioGroup = {}));
 
-// src/components/Select.tsx
-var import_noya_utils10 = require("@noya-app/noya-utils");
+// src/components/SelectMenu.tsx
+var import_noya_icons6 = require("@noya-app/noya-icons");
+var Select = __toESM(require("@radix-ui/react-select"));
 var import_react58 = __toESM(require("react"));
-var import_styled_components32 = __toESM(require("styled-components"));
-var SelectContext = (0, import_react58.createContext)(void 0);
-var SelectOption = (0, import_react58.memo)(function SelectOption2({
-  value,
-  title,
-  onSelect
-}) {
-  const { addListener, removeListener } = (0, import_react58.useContext)(SelectContext);
-  (0, import_react58.useEffect)(() => {
-    if (!onSelect)
-      return;
-    addListener(value, onSelect);
-    return () => removeListener(value);
-  }, [addListener, onSelect, removeListener, value]);
-  return /* @__PURE__ */ import_react58.default.createElement("option", { value }, title ?? value);
-});
-var createChevronSVGString = (0, import_noya_utils10.memoize)(
-  (color) => `
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='${color}'>
-    <path d='M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z'></path>
-  </svg>
-`.replace(/\n/g, "")
-);
-var SelectContainer = import_styled_components32.default.div(
-  ({ $flex }) => ({
-    flex: $flex ?? "1 1 0px",
-    display: "flex",
-    flexDirection: "row",
-    position: "relative"
-  })
-);
-var SelectElement = import_styled_components32.default.select(
-  ({ theme, $flex }) => ({
-    appearance: "none",
-    ...theme.textStyles.small,
-    color: theme.colors.text,
-    lineHeight: "19px",
-    width: "0px",
-    // Reset intrinsic width
-    flex: $flex ?? "1 1 0px",
-    position: "relative",
-    border: "0",
-    outline: "none",
-    minWidth: "0",
-    textAlign: "left",
-    alignSelf: "stretch",
-    borderRadius: "4px",
-    paddingTop: "4px",
-    paddingBottom: "4px",
-    paddingLeft: "6px",
-    paddingRight: "23px",
-    background: [
-      `calc(100% - 6px) / 15px url("data:image/svg+xml;utf8,${createChevronSVGString(
-        theme.colors.icon
-      )}") no-repeat`,
-      theme.colors.inputBackground
-    ].join(","),
-    "&:focus": {
-      boxShadow: `0 0 0 2px ${theme.colors.primary}`
-    }
-  })
-);
-var SelectLabel = import_styled_components32.default.label(({ theme }) => ({
+var import_styled_components32 = require("styled-components");
+var readOnlyStyle = {
+  justifyContent: "flex-start",
+  textAlign: "left"
+};
+var flexStyle = {
+  flex: 1
+};
+var textStyle = {
+  fontSize: "0.85rem"
+};
+var SelectLabel = import_styled_components32.styled.label(({ theme }) => ({
   ...theme.textStyles.label,
   color: theme.colors.textDisabled,
   lineHeight: "19px",
@@ -14673,66 +14644,7 @@ var SelectLabel = import_styled_components32.default.label(({ theme }) => ({
   justifyContent: "end",
   paddingRight: "24px"
 }));
-var Select = (0, import_react58.memo)(function Select2({
-  id,
-  flex,
-  value,
-  label,
-  ...rest
-}) {
-  const options = "options" in rest ? rest.options : void 0;
-  const getTitle = "options" in rest ? rest.getTitle : void 0;
-  const onChange = "options" in rest ? rest.onChange : void 0;
-  const children2 = "options" in rest ? void 0 : rest.children;
-  const optionElements = (0, import_react58.useMemo)(
-    () => options ? options.map((option, index) => /* @__PURE__ */ import_react58.default.createElement(
-      SelectOption,
-      {
-        key: option,
-        value: option,
-        title: getTitle?.(option, index),
-        onSelect: () => onChange?.(option)
-      }
-    )) : children2,
-    [children2, getTitle, onChange, options]
-  );
-  const listeners = (0, import_react58.useRef)(/* @__PURE__ */ new Map());
-  const contextValue = (0, import_react58.useMemo)(
-    () => ({
-      addListener: (value2, listener) => listeners.current.set(value2, listener),
-      removeListener: (value2) => listeners.current.delete(value2)
-    }),
-    []
-  );
-  return /* @__PURE__ */ import_react58.default.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react58.default.createElement(SelectContainer, { $flex: flex }, /* @__PURE__ */ import_react58.default.createElement(
-    SelectElement,
-    {
-      id,
-      $flex: flex,
-      value,
-      onChange: (0, import_react58.useCallback)(
-        (event) => listeners.current.get(event.target.value)?.(),
-        [listeners]
-      ),
-      onPointerDown: (event) => event.stopPropagation()
-    },
-    optionElements
-  )), label && /* @__PURE__ */ import_react58.default.createElement(SelectLabel, { htmlFor: id }, label));
-});
-
-// src/components/SelectMenu.tsx
-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({
+var SelectMenu = (0, import_react58.memo)(function SelectMenu2({
   id,
   style: style5,
   className,
@@ -14741,53 +14653,75 @@ var SelectMenu = (0, import_react59.memo)(function SelectMenu2({
   onSelect,
   placeholder,
   disabled,
-  readOnly
+  readOnly,
+  label,
+  open
 }) {
   const selectedItem = menuItems.find(
     (item) => typeof item !== "string" && item.value === value
   );
   const icon = selectedItem?.icon;
-  if (readOnly) {
-    return /* @__PURE__ */ import_react59.default.createElement(
+  const readOnlyButton = (0, import_react58.useMemo)(
+    () => /* @__PURE__ */ import_react58.default.createElement(
       Button,
       {
         id,
-        style: style5,
+        style: { ...style5, ...flexStyle },
         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)
-    );
+      icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
+      /* @__PURE__ */ import_react58.default.createElement("span", { style: { ...flexStyle, ...textStyle } }, selectedItem?.title ?? value)
+    ),
+    [icon, id, style5, className, disabled, value, selectedItem]
+  );
+  const trigger = (0, import_react58.useMemo)(
+    () => /* @__PURE__ */ import_react58.default.createElement(Select.SelectTrigger, { asChild: true }, /* @__PURE__ */ import_react58.default.createElement(
+      Button,
+      {
+        id,
+        style: { ...textStyle, ...style5, ...flexStyle },
+        className,
+        disabled
+      },
+      icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
+      /* @__PURE__ */ import_react58.default.createElement("span", { style: flexStyle }, /* @__PURE__ */ import_react58.default.createElement(Select.Value, { placeholder })),
+      /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
+      /* @__PURE__ */ import_react58.default.createElement(import_noya_icons6.DropdownChevronIcon, null)
+    )),
+    [icon, id, style5, className, disabled, placeholder]
+  );
+  if (readOnly) {
+    return label ? /* @__PURE__ */ import_react58.default.createElement(Stack.V, { position: "relative" }, readOnlyButton, /* @__PURE__ */ import_react58.default.createElement(SelectLabel, { htmlFor: id }, label)) : readOnlyButton;
   }
-  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: style5, 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) => {
+  return /* @__PURE__ */ import_react58.default.createElement(Select.Root, { value, onValueChange: onSelect, open }, label ? /* @__PURE__ */ import_react58.default.createElement(Stack.V, { position: "relative", style: flexStyle }, trigger, /* @__PURE__ */ import_react58.default.createElement(SelectLabel, { htmlFor: id }, label)) : trigger, /* @__PURE__ */ import_react58.default.createElement(Select.Portal, null, /* @__PURE__ */ import_react58.default.createElement(SelectContent, null, /* @__PURE__ */ import_react58.default.createElement(SelectViewport, null, menuItems.map((menuItem) => {
     if (typeof menuItem === "string") {
-      return /* @__PURE__ */ import_react59.default.createElement(StyledSeparator, null);
+      return /* @__PURE__ */ import_react58.default.createElement(StyledSeparator, null);
     }
     const value2 = menuItem.value ?? "";
-    return /* @__PURE__ */ import_react59.default.createElement(SelectItem, { key: value2, value: value2, icon: menuItem.icon }, menuItem.title ?? value2);
+    return /* @__PURE__ */ import_react58.default.createElement(SelectItem, { key: value2, value: value2, icon: menuItem.icon }, menuItem.title ?? value2);
   })))));
 });
-var SelectContent = (0, import_styled_components33.styled)(Select3.Content)(styles.contentStyle);
-var SelectViewport = (0, import_styled_components33.styled)(Select3.Viewport)({});
-var SelectItem = import_react59.default.forwardRef(
+var SelectContent = (0, import_styled_components32.styled)(Select.Content)(styles.contentStyle);
+var SelectViewport = (0, import_styled_components32.styled)(Select.Viewport)({});
+var SelectItem = import_react58.default.forwardRef(
   ({
     children: children2,
     icon,
     ...props
   }, forwardedRef) => {
-    return /* @__PURE__ */ import_react59.default.createElement(StyledItem2, { ...props, ref: forwardedRef }, 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.ItemText, null, children2));
+    return /* @__PURE__ */ import_react58.default.createElement(StyledItem2, { ...props, ref: forwardedRef }, icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react58.default.createElement(Select.ItemText, { style: textStyle }, children2));
   }
 );
-var StyledItem2 = (0, import_styled_components33.styled)(Select3.Item)(styles.itemStyle);
-var StyledSeparator = (0, import_styled_components33.styled)(Select3.Separator)(styles.separatorStyle);
+var StyledItem2 = (0, import_styled_components32.styled)(Select.Item)(styles.itemStyle);
+var StyledSeparator = (0, import_styled_components32.styled)(Select.Separator)(styles.separatorStyle);
 
 // src/components/Slider.tsx
 var RadixSlider = __toESM(require("@radix-ui/react-slider"));
-var import_react60 = __toESM(require("react"));
-var import_styled_components34 = __toESM(require("styled-components"));
-var StyledSlider = (0, import_styled_components34.default)(RadixSlider.Root)({
+var import_react59 = __toESM(require("react"));
+var import_styled_components33 = __toESM(require("styled-components"));
+var StyledSlider = (0, import_styled_components33.default)(RadixSlider.Root)({
   flex: "1",
   position: "relative",
   display: "flex",
@@ -14796,19 +14730,19 @@ var StyledSlider = (0, import_styled_components34.default)(RadixSlider.Root)({
   touchAction: "none",
   height: "16px"
 });
-var StyledTrack = (0, import_styled_components34.default)(RadixSlider.Track)(({ theme }) => ({
+var StyledTrack = (0, import_styled_components33.default)(RadixSlider.Track)(({ theme }) => ({
   backgroundColor: theme.colors.divider,
   position: "relative",
   flexGrow: 1,
   height: "2px"
 }));
-var StyledRange = (0, import_styled_components34.default)(RadixSlider.Range)(({ theme }) => ({
+var StyledRange = (0, import_styled_components33.default)(RadixSlider.Range)(({ theme }) => ({
   position: "absolute",
   backgroundColor: theme.colors.primary,
   borderRadius: "9999px",
   height: "100%"
 }));
-var StyledThumb2 = (0, import_styled_components34.default)(RadixSlider.Thumb)(({ theme }) => ({
+var StyledThumb2 = (0, import_styled_components33.default)(RadixSlider.Thumb)(({ theme }) => ({
   display: "block",
   width: "12px",
   height: "12px",
@@ -14826,17 +14760,17 @@ var Slider = function Slider2({
   min,
   max
 }) {
-  const arrayValue = (0, import_react60.useMemo)(
+  const arrayValue = (0, import_react59.useMemo)(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
-  const handleValueChange = (0, import_react60.useCallback)(
+  const handleValueChange = (0, import_react59.useCallback)(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ import_react60.default.createElement(
+  return /* @__PURE__ */ import_react59.default.createElement(
     StyledSlider,
     {
       min,
@@ -14845,16 +14779,16 @@ var Slider = function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange
     },
-    /* @__PURE__ */ import_react60.default.createElement(StyledTrack, null, /* @__PURE__ */ import_react60.default.createElement(StyledRange, null)),
-    /* @__PURE__ */ import_react60.default.createElement(StyledThumb2, null)
+    /* @__PURE__ */ import_react59.default.createElement(StyledTrack, null, /* @__PURE__ */ import_react59.default.createElement(StyledRange, null)),
+    /* @__PURE__ */ import_react59.default.createElement(StyledThumb2, null)
   );
 };
 
 // src/components/Switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var import_react61 = __toESM(require("react"));
-var import_styled_components35 = __toESM(require("styled-components"));
-var SwitchRoot = (0, import_styled_components35.default)(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
+var import_react60 = __toESM(require("react"));
+var import_styled_components34 = __toESM(require("styled-components"));
+var SwitchRoot = (0, import_styled_components34.default)(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
   all: "unset",
   width: 32,
   height: 19,
@@ -14871,7 +14805,7 @@ var SwitchRoot = (0, import_styled_components35.default)(SwitchPrimitive.Root)((
     backgroundColor: $colorScheme === "primary" ? theme.colors.primary : $colorScheme === "secondary" ? theme.colors.secondary : void 0
   }
 }));
-var SwitchThumb = (0, import_styled_components35.default)(SwitchPrimitive.Thumb)({
+var SwitchThumb = (0, import_styled_components34.default)(SwitchPrimitive.Thumb)({
   display: "block",
   width: 15,
   height: 15,
@@ -14888,7 +14822,7 @@ var Switch = function Switch2({
   colorScheme = "normal",
   disabled
 }) {
-  return /* @__PURE__ */ import_react61.default.createElement(
+  return /* @__PURE__ */ import_react60.default.createElement(
     SwitchRoot,
     {
       $colorScheme: colorScheme,
@@ -14898,14 +14832,14 @@ var Switch = function Switch2({
         onChange(newValue);
       }
     },
-    /* @__PURE__ */ import_react61.default.createElement(SwitchThumb, null)
+    /* @__PURE__ */ import_react60.default.createElement(SwitchThumb, null)
   );
 };
 
 // src/components/TextArea.tsx
-var import_react62 = __toESM(require("react"));
-var import_styled_components36 = __toESM(require("styled-components"));
-var TextAreaElement = import_styled_components36.default.textarea(({ theme }) => ({
+var import_react61 = __toESM(require("react"));
+var import_styled_components35 = __toESM(require("styled-components"));
+var TextAreaElement = import_styled_components35.default.textarea(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.text,
   background: theme.colors.inputBackground,
@@ -14929,8 +14863,8 @@ var TextAreaElement = import_styled_components36.default.textarea(({ theme }) =>
   resize: "none"
 }));
 var useAutoResize = (value) => {
-  const textareaRef = (0, import_react62.useRef)(null);
-  (0, import_react62.useEffect)(() => {
+  const textareaRef = (0, import_react61.useRef)(null);
+  (0, import_react61.useEffect)(() => {
     if (!textareaRef.current)
       return;
     textareaRef.current.style.height = "auto";
@@ -14938,25 +14872,25 @@ var useAutoResize = (value) => {
   }, [value]);
   return textareaRef;
 };
-var AutoResizingTextArea = (0, import_react62.memo)(
-  (0, import_react62.forwardRef)(function AutoResizingTextArea2({
+var AutoResizingTextArea = (0, import_react61.memo)(
+  (0, import_react61.forwardRef)(function AutoResizingTextArea2({
     value,
     onChangeText,
     ...rest
   }, forwardedRef) {
     const ref = useAutoResize(value || rest.placeholder || "");
-    const handleChange = (0, import_react62.useCallback)(
+    const handleChange = (0, import_react61.useCallback)(
       (event) => onChangeText(event.target.value),
       [onChangeText]
     );
-    const handleRef = (0, import_react62.useCallback)(
+    const handleRef = (0, import_react61.useCallback)(
       (value2) => {
         ref.current = value2;
         assignRef(forwardedRef, value2);
       },
       [ref, forwardedRef]
     );
-    return /* @__PURE__ */ import_react62.default.createElement(
+    return /* @__PURE__ */ import_react61.default.createElement(
       TextAreaElement,
       {
         ref: handleRef,
@@ -14969,57 +14903,57 @@ var AutoResizingTextArea = (0, import_react62.memo)(
 );
 
 // src/components/TreeView.tsx
-var import_react63 = __toESM(require("react"));
-var TreeRow = (0, import_react63.forwardRef)(function TreeRow2({
+var import_react62 = __toESM(require("react"));
+var TreeRow = (0, import_react62.forwardRef)(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
   children: children2,
   ...rest
 }, forwardedRef) {
-  const { expandable } = (0, import_react63.useContext)(ListView.RowContext);
-  const handleClickChevron = (0, import_react63.useCallback)(
+  const { expandable } = (0, import_react62.useContext)(ListView.RowContext);
+  const handleClickChevron = (0, import_react62.useCallback)(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  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(
+  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(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__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 })), children2);
+  ), /* @__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 })), children2);
 });
 var TreeView;
 ((TreeView2) => {
   TreeView2.Root = ListView.Root;
   TreeView2.RowTitle = ListView.RowTitle;
   TreeView2.EditableRowTitle = ListView.EditableRowTitle;
-  TreeView2.Row = (0, import_react63.memo)(TreeRow);
+  TreeView2.Row = (0, import_react62.memo)(TreeRow);
 })(TreeView || (TreeView = {}));
 
 // src/components/WorkspaceLayout.tsx
 var import_noya_keymap5 = require("@noya-app/noya-keymap");
-var import_react66 = __toESM(require("react"));
+var import_react65 = __toESM(require("react"));
 var import_react_resizable_panels = require("react-resizable-panels");
 
 // src/hooks/usePreservePanelSize.tsx
-var import_react65 = require("react");
+var import_react64 = require("react");
 
 // src/hooks/useWindowSize.tsx
-var import_react64 = require("react");
+var import_react63 = require("react");
 function useWindowSize() {
-  const [size3, setSize] = (0, import_react64.useState)(
+  const [size3, setSize] = (0, import_react63.useState)(
     typeof window === "undefined" ? { width: 0, height: 0 } : {
       width: window.innerWidth,
       height: window.innerHeight
     }
   );
-  (0, import_react64.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     const handleResize = () => setSize({
       width: window.innerWidth,
       height: window.innerHeight
@@ -15037,8 +14971,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_react65.useRef)();
-  (0, import_react65.useLayoutEffect)(() => {
+  const layoutRef = (0, import_react64.useRef)();
+  (0, import_react64.useLayoutEffect)(() => {
     const panelGroup = document.querySelector(
       `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
     );
@@ -15081,7 +15015,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
       panelGroupObserver.disconnect();
     };
   }, [panelGroupRef, setPanelLayoutState]);
-  (0, import_react65.useLayoutEffect)(() => {
+  (0, import_react64.useLayoutEffect)(() => {
     if (!layoutRef.current)
       return;
     const {
@@ -15141,7 +15075,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/WorkspaceLayout.tsx
-var WorkspaceLayoutWithTheme = (0, import_react66.forwardRef)(function WorkspaceLayoutWithTheme2({
+var WorkspaceLayoutWithTheme = (0, import_react65.forwardRef)(function WorkspaceLayoutWithTheme2({
   autoSavePrefix,
   leftSidebarContent: leftPanelContent,
   children: centerPanelContent,
@@ -15166,12 +15100,20 @@ var WorkspaceLayoutWithTheme = (0, import_react66.forwardRef)(function Workspace
   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_react66.useRef)(null);
-  const leftSidebarRef = (0, import_react66.useRef)(null);
-  const rightSidebarRef = (0, import_react66.useRef)(null);
-  usePreservePanelSize(panelGroupRef, onChangeLayoutState);
+  const panelGroupRef = (0, import_react65.useRef)(null);
+  const leftSidebarRef = (0, import_react65.useRef)(null);
+  const rightSidebarRef = (0, import_react65.useRef)(null);
+  const [internalLayoutState, setInternalLayoutState] = (0, import_react65.useState)(null);
+  const handleChangeLayoutState = (0, import_react65.useCallback)(
+    (state) => {
+      setInternalLayoutState(state);
+      onChangeLayoutState?.(state);
+    },
+    [onChangeLayoutState]
+  );
+  usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
   const theme = useDesignSystemTheme();
-  (0, import_react66.useImperativeHandle)(forwardedRef, () => ({
+  (0, import_react65.useImperativeHandle)(forwardedRef, () => ({
     setLeftSidebarExpanded: (expanded) => {
       if (expanded) {
         leftSidebarRef.current?.expand();
@@ -15228,7 +15170,7 @@ var WorkspaceLayoutWithTheme = (0, import_react66.forwardRef)(function Workspace
     }
   });
   const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
-  return /* @__PURE__ */ import_react66.default.createElement(
+  return /* @__PURE__ */ import_react65.default.createElement(
     "div",
     {
       id,
@@ -15240,7 +15182,7 @@ var WorkspaceLayoutWithTheme = (0, import_react66.forwardRef)(function Workspace
         ...style5
       }
     },
-    /* @__PURE__ */ import_react66.default.createElement(
+    /* @__PURE__ */ import_react65.default.createElement(
       import_react_resizable_panels.PanelGroup,
       {
         ref: panelGroupRef,
@@ -15249,7 +15191,7 @@ var WorkspaceLayoutWithTheme = (0, import_react66.forwardRef)(function Workspace
         autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
         style: { flex: "1" }
       },
-      hasLeftSidebar && /* @__PURE__ */ import_react66.default.createElement(import_react66.default.Fragment, null, /* @__PURE__ */ import_react66.default.createElement(
+      hasLeftSidebar && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: LEFT_SIDEBAR_ID,
@@ -15265,8 +15207,8 @@ var WorkspaceLayoutWithTheme = (0, import_react66.forwardRef)(function Workspace
             position: "relative"
           }
         },
-        leftPanelContent
-      ), /* @__PURE__ */ import_react66.default.createElement(
+        internalLayoutState?.leftSidebarCollapsed ? null : leftPanelContent
+      ), /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.PanelResizeHandle,
         {
           style: {
@@ -15277,7 +15219,7 @@ var WorkspaceLayoutWithTheme = (0, import_react66.forwardRef)(function Workspace
           }
         }
       )),
-      /* @__PURE__ */ import_react66.default.createElement(
+      /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: CONTENT_AREA_ID,
@@ -15292,7 +15234,7 @@ var WorkspaceLayoutWithTheme = (0, import_react66.forwardRef)(function Workspace
         },
         centerPanelContent
       ),
-      hasRightSidebar && /* @__PURE__ */ import_react66.default.createElement(import_react66.default.Fragment, null, /* @__PURE__ */ import_react66.default.createElement(
+      hasRightSidebar && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.PanelResizeHandle,
         {
           style: {
@@ -15302,7 +15244,7 @@ var WorkspaceLayoutWithTheme = (0, import_react66.forwardRef)(function Workspace
             backgroundColor: theme.colors.divider
           }
         }
-      ), /* @__PURE__ */ import_react66.default.createElement(
+      ), /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: RIGHT_SIDEBAR_ID,
@@ -15317,13 +15259,13 @@ var WorkspaceLayoutWithTheme = (0, import_react66.forwardRef)(function Workspace
             position: "relative"
           }
         },
-        rightPanelContent
+        internalLayoutState?.rightSidebarCollapsed ? null : rightPanelContent
       ))
     )
   );
 });
-var WorkspaceLayout = (0, import_react66.memo)(function WorkspaceLayout2(props) {
-  return /* @__PURE__ */ import_react66.default.createElement(DesignSystemThemeProvider, null, /* @__PURE__ */ import_react66.default.createElement(WorkspaceLayoutWithTheme, { ...props }));
+var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2(props, forwardedRef) {
+  return /* @__PURE__ */ import_react65.default.createElement(DesignSystemThemeProvider, null, /* @__PURE__ */ import_react65.default.createElement(WorkspaceLayoutWithTheme, { ...props, ref: forwardedRef }));
 });
 
 // src/hooks/usePlatform.ts
@@ -15366,10 +15308,41 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
   ""
 ];
 
-// src/components/ArrayController.tsx
-var import_noya_utils11 = require("@noya-app/noya-utils");
-var import_react68 = __toESM(require("react"));
-var import_styled_components38 = __toESM(require("styled-components"));
+// src/components/DimensionInput.tsx
+var import_noya_utils10 = require("@noya-app/noya-utils");
+var import_react66 = __toESM(require("react"));
+function getNewValue(value, mode, delta) {
+  return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
+}
+var DimensionInput = (0, import_react66.memo)(function DimensionInput2({
+  id,
+  value,
+  onSetValue,
+  label,
+  size: size3,
+  placeholder = "multi",
+  disabled,
+  trigger = "submit"
+}) {
+  const handleNudgeValue = (0, import_react66.useCallback)(
+    (value2) => onSetValue(value2, "adjust"),
+    [onSetValue]
+  );
+  const handleSetValue = (0, import_react66.useCallback)(
+    (value2) => onSetValue(value2, "replace"),
+    [onSetValue]
+  );
+  return /* @__PURE__ */ import_react66.default.createElement(InputField.Root, { id, width: size3 }, /* @__PURE__ */ import_react66.default.createElement(
+    InputField.NumberInput,
+    {
+      value: value === void 0 ? value : (0, import_noya_utils10.round)(value, 2),
+      placeholder: value === void 0 ? placeholder : void 0,
+      onNudge: handleNudgeValue,
+      disabled,
+      ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
+    }
+  ), label && /* @__PURE__ */ import_react66.default.createElement(InputField.Label, null, label));
+});
 
 // src/components/InspectorPrimitives.tsx
 var InspectorPrimitives_exports = {};
@@ -15388,19 +15361,19 @@ __export(InspectorPrimitives_exports, {
   VerticalSeparator: () => VerticalSeparator
 });
 var import_react67 = __toESM(require("react"));
-var import_styled_components37 = __toESM(require("styled-components"));
-var Section2 = import_styled_components37.default.div(({ theme, $padding = "10px", $gap }) => ({
+var import_styled_components36 = __toESM(require("styled-components"));
+var Section2 = import_styled_components36.default.div(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
   display: "flex",
   flexDirection: "column",
   padding: $padding,
   gap: $gap
 }));
-var SectionHeader = import_styled_components37.default.div(({ theme }) => ({
+var SectionHeader = import_styled_components36.default.div(({ theme }) => ({
   display: "flex",
   alignItems: "center"
 }));
-var Title3 = import_styled_components37.default.div(({ theme, $textStyle }) => ({
+var Title3 = import_styled_components36.default.div(({ theme, $textStyle }) => ({
   display: "flex",
   flexDirection: "row",
   userSelect: "none",
@@ -15413,7 +15386,7 @@ var Title3 = import_styled_components37.default.div(({ theme, $textStyle }) => (
     fontWeight: "bold"
   }
 }));
-var Row2 = import_styled_components37.default.div(
+var Row2 = import_styled_components36.default.div(
   ({ theme, $gap }) => ({
     flex: "1",
     display: "flex",
@@ -15422,26 +15395,26 @@ var Row2 = import_styled_components37.default.div(
     gap: $gap
   })
 );
-var Column2 = import_styled_components37.default.div(({ theme }) => ({
+var Column2 = import_styled_components36.default.div(({ theme }) => ({
   flex: "1",
   display: "flex",
   flexDirection: "column",
   gap: "4px"
 }));
-var Checkbox = import_styled_components37.default.input(({ theme }) => ({
+var Checkbox = import_styled_components36.default.input(({ theme }) => ({
   margin: 0
 }));
-var Text3 = import_styled_components37.default.span(({ theme }) => ({
+var Text3 = import_styled_components36.default.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-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 }) => ({
+var VerticalSeparator = () => /* @__PURE__ */ import_react67.default.createElement(Spacer.Vertical, { size: (0, import_styled_components36.useTheme)().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components36.useTheme)().sizes.inspector.horizontalSeparator });
+var SliderRowLabel = import_styled_components36.default.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
   marginBottom: "-6px"
 }));
-var RowLabel = import_styled_components37.default.span(({ theme, $textStyle }) => ({
+var RowLabel = import_styled_components36.default.span(({ theme, $textStyle }) => ({
   // marginBottom: '6px',
   display: "flex",
   ...$textStyle ? {
@@ -15471,154 +15444,16 @@ var LabeledSliderRow = (0, import_react67.memo)(function LabeledRow3({
 }) {
   return /* @__PURE__ */ import_react67.default.createElement(Row2, null, /* @__PURE__ */ import_react67.default.createElement(Column2, null, /* @__PURE__ */ import_react67.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react67.default.createElement(Row2, null, children2)));
 });
-
-// src/components/ArrayController.tsx
-var ElementRow = import_styled_components38.default.div({
-  flex: "0 0 auto",
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center"
-});
-var ItemContainer2 = import_styled_components38.default.div({
-  position: "relative"
-});
-var ArrayController = (0, import_react68.memo)(function ArrayController2({
-  id,
-  items,
-  title,
-  sortable = false,
-  reversed = true,
-  expanded = false,
-  getKey,
-  onMoveItem,
-  onClickPlus,
-  onClickTrash,
-  onClickExpand,
-  renderItem,
-  renderExpandedContent,
-  padding = 10
-}) {
-  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_react68.useCallback)(
-    (sourceIndex, destinationIndex, position) => {
-      if (reversed) {
-        if (position === "above") {
-          position = "below";
-        } else if (position === "below") {
-          position = "above";
-        }
-      }
-      onMoveItem?.(
-        sourceIndex,
-        position === "below" ? destinationIndex + 1 : destinationIndex
-      );
-    },
-    [onMoveItem, reversed]
-  );
-  const renderRow = (index) => {
-    return /* @__PURE__ */ import_react68.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
-  };
-  return /* @__PURE__ */ import_react68.default.createElement(Section2, { 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_react68.default.createElement(
-        IconButton,
-        {
-          id: `${id}-trash`,
-          iconName: "TrashIcon",
-          color: iconColor,
-          onClick: onClickTrash
-        }
-      ),
-      onClickExpand && /* @__PURE__ */ import_react68.default.createElement(
-        IconButton,
-        {
-          id: `${id}-gear`,
-          iconName: "GearIcon",
-          color: expanded ? primaryLightColor : iconColor,
-          onClick: onClickExpand
-        }
-      ),
-      onClickPlus && /* @__PURE__ */ import_react68.default.createElement(
-        IconButton,
-        {
-          id: `${id}-add`,
-          iconName: "PlusIcon",
-          color: iconColor,
-          onClick: onClickPlus
-        }
-      )
-    ],
-    /* @__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_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,
-        $colorScheme: "primary",
-        $relativeDropPosition: relativeDropPosition,
-        $offsetLeft: 0
-      }
-    ))))
-  ) : indexes.map(renderRow)), expanded && renderExpandedContent?.());
-});
-
-// src/components/DimensionInput.tsx
-var import_noya_utils12 = require("@noya-app/noya-utils");
-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_react69.memo)(function DimensionInput2({
-  id,
-  value,
-  onSetValue,
-  label,
-  size: size3,
-  placeholder = "multi",
-  disabled,
-  trigger = "submit"
-}) {
-  const handleNudgeValue = (0, import_react69.useCallback)(
-    (value2) => onSetValue(value2, "adjust"),
-    [onSetValue]
-  );
-  const handleSetValue = (0, import_react69.useCallback)(
-    (value2) => onSetValue(value2, "replace"),
-    [onSetValue]
-  );
-  return /* @__PURE__ */ import_react69.default.createElement(InputField.Root, { id, width: size3 }, /* @__PURE__ */ import_react69.default.createElement(
-    InputField.NumberInput,
-    {
-      value: value === void 0 ? value : (0, import_noya_utils12.round)(value, 2),
-      placeholder: value === void 0 ? placeholder : void 0,
-      onNudge: handleNudgeValue,
-      disabled,
-      ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
-    }
-  ), 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,
   Button,
   ButtonElement,
+  CONTENT_AREA_ID,
   Chip,
   CloseButtonContainer,
   CompletionMenu,
@@ -15633,6 +15468,7 @@ var DimensionInput = (0, import_react69.memo)(function DimensionInput2({
   DividerVertical,
   DraggableMenuButton,
   DropdownMenu,
+  EDITOR_PANEL_GROUP_ID,
   FillInputField,
   FillPreviewBackground,
   FloatingWindow,
@@ -15656,21 +15492,21 @@ var DimensionInput = (0, import_react69.memo)(function DimensionInput2({
   InspectorPrimitives,
   Italic,
   KeyboardShortcut,
+  LEFT_SIDEBAR_ID,
   Label,
   LabeledElementView,
   ListView,
   PatternPreviewBackground,
   Popover,
   Progress,
+  RIGHT_SIDEBAR_ID,
   RadioGroup,
   Row,
   SEPARATOR_ITEM,
   SUPPORTED_CANVAS_UPLOAD_TYPES,
   SUPPORTED_IMAGE_UPLOAD_TYPES,
   ScrollArea,
-  Select,
   SelectMenu,
-  SelectOption,
   Slider,
   Small,
   Sortable,
@@ -15713,6 +15549,7 @@ var DimensionInput = (0, import_react69.memo)(function DimensionInput2({
   useOpenInputDialog,
   usePlatform,
   usePlatformModKey,
+  usePreservePanelSize,
   withSeparatorElements
 });
 /*! Bundled license information: