npm - @noya-app/noya-designsystem - Versions diffs - 0.1.22 → 0.1.24 - Mend

@noya-app/noya-designsystem 0.1.22 → 0.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/.turbo/turbo-build.log +9 -9
package/CHANGELOG.md +12 -0
package/dist/index.d.mts +13 -4
package/dist/index.d.ts +13 -4
package/dist/index.js +632 -602
package/dist/index.js.map +1 -1
package/dist/index.mjs +295 -265
package/dist/index.mjs.map +1 -1
package/package.json +1 -1
package/src/components/Button.tsx +2 -2
package/src/components/ContextMenu.tsx +2 -1
package/src/components/DropdownMenu.tsx +3 -2
package/src/components/IconButton.tsx +2 -2
package/src/components/Icons.tsx +18 -0
package/src/components/InputField.tsx +11 -1
package/src/components/ListView.tsx +18 -1
package/src/components/Select.tsx +1 -1
package/src/components/SelectMenu.tsx +3 -2
package/src/components/TreeView.tsx +3 -2
package/src/components/internal/Menu.tsx +2 -1

package/dist/index.mjs CHANGED Viewed

@@ -265,9 +265,9 @@ var ButtonElement = styled5.button(
     textAlign: "left",
     borderRadius: "4px",
     paddingTop: $variant === "none" ? "0px" : "4px",
-    paddingRight: $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+    paddingRight: $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "6px",
     paddingBottom: $variant === "none" ? "0px" : "4px",
-    paddingLeft: $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+    paddingLeft: $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "6px",
     ...$size === "large" && {
       paddingTop: "12px",
       paddingRight: "16px",
@@ -397,12 +397,12 @@ var Button = forwardRef3(function Button2({
 // src/components/Chip.tsx
 import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
-import React22, { forwardRef as forwardRef10, memo as memo11 } from "react";
+import React23, { forwardRef as forwardRef10, memo as memo11 } from "react";
 import styled14 from "styled-components";
 // src/contexts/DesignSystemConfiguration.tsx
 import { getCurrentPlatform } from "@noya-app/noya-keymap";
-import React20, {
+import React21, {
   createContext as createContext5,
   memo as memo10,
   useContext as useContext5,
@@ -414,17 +414,29 @@ import { ThemeProvider, useTheme as useTheme2 } from "styled-components";
 // src/components/Toast.tsx
 import * as ToastPrimitive from "@radix-ui/react-toast";
-import React7 from "react";
+import React8 from "react";
 import styled6 from "styled-components";
 // src/components/IconButton.tsx
-import * as Icons from "@noya-app/noya-icons";
-import React6, {
+import React7, {
   forwardRef as forwardRef4,
   memo as memo4,
   useMemo
 } from "react";
 import { useTheme } from "styled-components";
+// src/components/Icons.tsx
+import * as Icons from "@noya-app/noya-icons";
+import React6 from "react";
+function renderIcon(iconName) {
+  if (typeof iconName === "string") {
+    const Icon = Icons[iconName];
+    return /* @__PURE__ */ React6.createElement(Icon, null);
+  }
+  return iconName;
+}
+// src/components/IconButton.tsx
 var IconButton = memo4(
   forwardRef4(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
     const { icon: iconColor, iconSelected: iconSelectedColor } = useTheme().colors;
@@ -436,7 +448,7 @@ var IconButton = memo4(
         ...contentStyle
       };
     }, [contentStyle, size2]);
-    return /* @__PURE__ */ React6.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style3 }, /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React7.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style3 }, /* @__PURE__ */ React7.createElement(
       Icon,
       {
         color: color ?? (selected ? iconSelectedColor : iconColor),
@@ -496,9 +508,9 @@ var Toast = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ React7.createElement(ToastRoot, { ...props }, title && /* @__PURE__ */ React7.createElement(ToastTitle, null, title), /* @__PURE__ */ React7.createElement(ToastDescription, null, content), children && /* @__PURE__ */ React7.createElement(ToastAction, { asChild: true, altText: "" }, children), /* @__PURE__ */ React7.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ React7.createElement(IconButton, { iconName: "Cross1Icon" })));
+  return /* @__PURE__ */ React8.createElement(ToastRoot, { ...props }, title && /* @__PURE__ */ React8.createElement(ToastTitle, null, title), /* @__PURE__ */ React8.createElement(ToastDescription, null, content), children && /* @__PURE__ */ React8.createElement(ToastAction, { asChild: true, altText: "" }, children), /* @__PURE__ */ React8.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ React8.createElement(IconButton, { iconName: "Cross1Icon" })));
 };
-var ToastProvider = ({ children }) => /* @__PURE__ */ React7.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ React7.createElement(ToastViewport, null));
+var ToastProvider = ({ children }) => /* @__PURE__ */ React8.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ React8.createElement(ToastViewport, null));
 // src/theme/dark.ts
 var dark_exports = {};
@@ -781,7 +793,7 @@ var colors2 = produce(colors, (colors3) => {
 });
 // src/contexts/DialogContext.tsx
-import React18, {
+import React19, {
   createContext as createContext3,
   useCallback as useCallback12,
   useContext as useContext3,
@@ -793,7 +805,7 @@ import styled13 from "styled-components";
 // src/components/Dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React9, {
+import React10, {
   forwardRef as forwardRef6,
   useImperativeHandle,
   useRef
@@ -801,7 +813,7 @@ import React9, {
 import styled8 from "styled-components";
 // src/components/Spacer.tsx
-import React8, { forwardRef as forwardRef5 } from "react";
+import React9, { forwardRef as forwardRef5 } from "react";
 import styled7 from "styled-components";
 var SpacerVertical_ = styled7.span(({ $size, $inline }) => ({
   display: $inline ? "inline-block" : "block",
@@ -809,7 +821,7 @@ var SpacerVertical_ = styled7.span(({ $size, $inline }) => ({
 }));
 var SpacerVertical = forwardRef5(
   ({ size: size2, inline, ...props }, ref) => {
-    return /* @__PURE__ */ React8.createElement(SpacerVertical_, { $size: size2, $inline: inline, ...props, ref });
+    return /* @__PURE__ */ React9.createElement(SpacerVertical_, { $size: size2, $inline: inline, ...props, ref });
   }
 );
 var SpacerHorizontal_ = styled7.span(({ $size, $inline }) => ({
@@ -818,7 +830,7 @@ var SpacerHorizontal_ = styled7.span(({ $size, $inline }) => ({
 }));
 var SpacerHorizontal = forwardRef5(
   ({ size: size2, inline, ...props }, ref) => {
-    return /* @__PURE__ */ React8.createElement(SpacerHorizontal_, { $size: size2, $inline: inline, ...props, ref });
+    return /* @__PURE__ */ React9.createElement(SpacerHorizontal_, { $size: size2, $inline: inline, ...props, ref });
   }
 );
 var Spacer;
@@ -891,7 +903,7 @@ var Dialog = forwardRef6(function Dialog2({
       return contentRef.current.contains(element);
     }
   }));
-  return /* @__PURE__ */ React9.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React9.createElement(StyledOverlay, null), /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React10.createElement(StyledOverlay, null), /* @__PURE__ */ React10.createElement(
     StyledContent,
     {
       ref: contentRef,
@@ -906,14 +918,14 @@ var Dialog = forwardRef6(function Dialog2({
         }
       }
     },
-    /* @__PURE__ */ React9.createElement(CloseButtonContainer, null, /* @__PURE__ */ React9.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ React9.createElement(IconButton, { iconName: "Cross1Icon" }))),
-    title && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(StyledTitle, null, title), /* @__PURE__ */ React9.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
-    description && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ React9.createElement(StyledDescription, null, description), /* @__PURE__ */ React9.createElement(Spacer.Vertical, { size: 20 })),
+    /* @__PURE__ */ React10.createElement(CloseButtonContainer, null, /* @__PURE__ */ React10.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ React10.createElement(IconButton, { iconName: "Cross1Icon" }))),
+    title && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(StyledTitle, null, title), /* @__PURE__ */ React10.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
+    description && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ React10.createElement(StyledDescription, null, description), /* @__PURE__ */ React10.createElement(Spacer.Vertical, { size: 20 })),
     children
   ));
 });
 var FullscreenDialog = forwardRef6(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(
     Dialog,
     {
       ref: forwardedRef,
@@ -939,13 +951,13 @@ var FullscreenDialog = forwardRef6(function FullscreenDialog2({ style: style3, .
 import { CaretDownIcon } from "@noya-app/noya-icons";
 // ../noya-react-utils/src/components/AutoSizer.tsx
-import React11, { memo as memo5, useRef as useRef2 } from "react";
+import React12, { memo as memo5, useRef as useRef2 } from "react";
 // ../noya-react-utils/src/hooks/useSize.ts
-import * as React10 from "react";
+import * as React11 from "react";
 function useSize(refToObserve, dimensions = "both") {
-  const [size2, setSize] = React10.useState(void 0);
-  React10.useEffect(() => {
+  const [size2, setSize] = React11.useState(void 0);
+  React11.useEffect(() => {
     if (refToObserve.current) {
       const elementToObserve = refToObserve.current;
       const resizeObserver = new ResizeObserver((entries) => {
@@ -998,7 +1010,7 @@ var AutoSizer = memo5(function AutoSizer2({
 }) {
   const containerRef = useRef2(null);
   const containerSize = useSize(containerRef);
-  return /* @__PURE__ */ React11.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
+  return /* @__PURE__ */ React12.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
 });
 var SingleDimensionAutoSizer = memo5(function SingleDimensionAutoSizer2({
   children,
@@ -1007,11 +1019,11 @@ var SingleDimensionAutoSizer = memo5(function SingleDimensionAutoSizer2({
 }) {
   const containerRef = useRef2(null);
   const containerSize = useSize(containerRef, dimension);
-  return /* @__PURE__ */ React11.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
+  return /* @__PURE__ */ React12.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
 });
 // ../noya-react-utils/src/components/FileDropTarget.tsx
-import React12, {
+import React13, {
   memo as memo6,
   useCallback as useCallback3
 } from "react";
@@ -1086,7 +1098,7 @@ var FileDropTarget = memo6(function FileDropTarget2({
     [onDropFiles, supportedFileTypes]
   );
   const { dropTargetProps, isDropTargetActive } = useFileDropTarget(handleFile);
-  return /* @__PURE__ */ React12.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
+  return /* @__PURE__ */ React13.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
 });
 // ../noya-react-utils/src/hooks/useDeepArray.ts
@@ -1226,7 +1238,7 @@ function assignRef(ref, value) {
 }
 // src/components/InputField.tsx
-import React17, {
+import React18, {
   Children as Children3,
   createContext as createContext2,
   forwardRef as forwardRef9,
@@ -1270,7 +1282,7 @@ function handleNudge(e) {
 import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
-import React14, {
+import React15, {
   forwardRef as forwardRef7,
   memo as memo8,
   useCallback as useCallback9,
@@ -1280,7 +1292,7 @@ import styled10 from "styled-components";
 // src/components/internal/Menu.tsx
 import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
-import React13, { memo as memo7 } from "react";
+import React14, { memo as memo7 } from "react";
 import styled9 from "styled-components";
 var SEPARATOR_ITEM = "separator";
 var CHECKBOX_WIDTH = 15;
@@ -1372,7 +1384,7 @@ var KeyboardShortcut = memo7(function KeyboardShortcut2({
 }) {
   const platform = useDesignSystemConfiguration().platform;
   const { keys, separator } = getShortcutDisplayParts(shortcut, platform);
-  const keyElements = keys.map((key) => /* @__PURE__ */ React13.createElement(
+  const keyElements = keys.map((key) => /* @__PURE__ */ React14.createElement(
     ShortcutElement,
     {
       key,
@@ -1380,9 +1392,9 @@ var KeyboardShortcut = memo7(function KeyboardShortcut2({
     },
     key
   ));
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, separator ? withSeparatorElements(
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, separator ? withSeparatorElements(
     keyElements,
-    /* @__PURE__ */ React13.createElement(ShortcutElement, null, separator)
+    /* @__PURE__ */ React14.createElement(ShortcutElement, null, separator)
   ) : keyElements);
 });
@@ -1414,21 +1426,21 @@ var DropdownMenuItem = memo8(function ContextMenuItem({
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React15.createElement(
       CheckboxItemElement,
       {
         checked,
         disabled,
         onSelect: handleSelectItem
       },
-      /* @__PURE__ */ React14.createElement(StyledItemIndicator, null, /* @__PURE__ */ React14.createElement(CheckIcon, null)),
-      icon && /* @__PURE__ */ React14.createElement(React14.Fragment, null, icon, /* @__PURE__ */ React14.createElement(Spacer.Horizontal, { size: 8 })),
+      /* @__PURE__ */ React15.createElement(StyledItemIndicator, null, /* @__PURE__ */ React15.createElement(CheckIcon, null)),
+      icon && /* @__PURE__ */ React15.createElement(React15.Fragment, null, renderIcon(icon), /* @__PURE__ */ React15.createElement(Spacer.Horizontal, { size: 8 })),
       children
     );
   }
-  const element = /* @__PURE__ */ React14.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ React14.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ React14.createElement(React14.Fragment, null, icon, /* @__PURE__ */ React14.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React14.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React14.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React14.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React14.createElement(ChevronRightIcon, null)));
+  const element = /* @__PURE__ */ React15.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ React15.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ React15.createElement(React15.Fragment, null, renderIcon(icon), /* @__PURE__ */ React15.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React15.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React15.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React15.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React15.createElement(ChevronRightIcon, null)));
   if (items && items.length > 0) {
-    return /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React15.createElement(
       DropdownMenuRoot,
       {
         isNested: true,
@@ -1471,7 +1483,7 @@ var DropdownMenuRoot = forwardRef7(function DropdownMenuRoot2({
   const TriggerComponent = isNested ? RadixDropdownMenu.SubTrigger : RadixDropdownMenu.Trigger;
   const ContentComponent = isNested ? SubContent2 : Content5;
   const contentStyle = useMemo5(() => ({ zIndex: 1e3 }), []);
-  return /* @__PURE__ */ React14.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ React14.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ React14.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ React15.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ React15.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React15.createElement(
     ContentComponent,
     {
       side,
@@ -1483,7 +1495,7 @@ var DropdownMenuRoot = forwardRef7(function DropdownMenuRoot2({
       ...{ onCloseAutoFocus }
     },
     items.map(
-      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React14.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ React14.createElement(
+      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React15.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ React15.createElement(
         DropdownMenuItem,
         {
           key: item.value ?? index,
@@ -1505,7 +1517,7 @@ var DropdownMenu = memo8(DropdownMenuRoot);
 // src/components/internal/TextInput.tsx
 import { composeRefs } from "@radix-ui/react-compose-refs";
-import React15, {
+import React16, {
   forwardRef as forwardRef8,
   useCallback as useCallback10,
   useEffect as useEffect9,
@@ -1556,7 +1568,7 @@ function useGlobalInputBlurTrigger() {
 // src/components/internal/TextInput.tsx
 var ReadOnlyTextInput = forwardRef8(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -1590,7 +1602,7 @@ var ControlledTextInput = forwardRef8(function ControlledTextInput2({
     },
     [onFocusCapture, onFocusChange]
   );
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -1617,7 +1629,7 @@ var SubmittableTextInput = forwardRef8(function SubmittableTextInput2({
   submitAutomaticallyAfterDelay,
   ...rest
 }, forwardedRef) {
-  const ref = React15.useRef(null);
+  const ref = React16.useRef(null);
   const latestValue = useRef9(value);
   latestValue.current = value;
   const userDidEdit = useRef9(false);
@@ -1701,7 +1713,7 @@ var SubmittableTextInput = forwardRef8(function SubmittableTextInput2({
       }
     };
   }, [internalValue, submitAutomaticallyAfterDelay]);
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "input",
     {
       ref: composeRefs(ref, forwardedRef),
@@ -1733,17 +1745,17 @@ var TextInput_default = forwardRef8(function TextInput(props, forwardedRef) {
     ...props
   };
   if ("readOnly" in commonProps) {
-    return /* @__PURE__ */ React15.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
+    return /* @__PURE__ */ React16.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
   } else if ("onChange" in commonProps) {
-    return /* @__PURE__ */ React15.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ React16.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
   } else {
-    return /* @__PURE__ */ React15.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ React16.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
   }
 });
 // src/components/Popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import React16 from "react";
+import React17 from "react";
 import styled11 from "styled-components";
 var ContentElement = styled11(PopoverPrimitive.Content)(({ theme, variant }) => ({
   borderRadius: 4,
@@ -1790,7 +1802,7 @@ function Popover({
   onFocusOutside,
   onClickClose
 }) {
-  return /* @__PURE__ */ React16.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React16.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ React16.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React17.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ React17.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React17.createElement(
     ContentElement,
     {
       variant,
@@ -1806,8 +1818,8 @@ function Popover({
       arrowPadding: 2
     },
     children,
-    showArrow && /* @__PURE__ */ React16.createElement(ArrowElement, null),
-    closable && /* @__PURE__ */ React16.createElement(PopoverClose, null, /* @__PURE__ */ React16.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
+    showArrow && /* @__PURE__ */ React17.createElement(ArrowElement, null),
+    closable && /* @__PURE__ */ React17.createElement(PopoverClose, null, /* @__PURE__ */ React17.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
   )));
 }
@@ -1852,7 +1864,7 @@ var InputFieldLabel = memo9(
         return;
       setLabelWidth(width);
     }, [setLabelWidth]);
-    return /* @__PURE__ */ React17.createElement(
+    return /* @__PURE__ */ React18.createElement(
       LabelContainer,
       {
         ref: (element) => {
@@ -1885,7 +1897,7 @@ var InputFieldDropdownMenu = memo9(function InputFieldDropdownMenu2({ id, items,
     }),
     [size2]
   );
-  return /* @__PURE__ */ React17.createElement(DropdownContainer, null, /* @__PURE__ */ React17.createElement(DropdownMenu, { items, onSelect }, children || /* @__PURE__ */ React17.createElement(Button, { id, variant: "thin", flex: "1", contentStyle }, /* @__PURE__ */ React17.createElement(CaretDownIcon, null))));
+  return /* @__PURE__ */ React18.createElement(DropdownContainer, null, /* @__PURE__ */ React18.createElement(DropdownMenu, { items, onSelect }, children || /* @__PURE__ */ React18.createElement(Button, { id, variant: "thin", flex: "1", contentStyle }, /* @__PURE__ */ React18.createElement(CaretDownIcon, null))));
 });
 var ButtonContainer = styled12.span(
   ({ theme, $size }) => ({
@@ -1914,7 +1926,7 @@ var InputFieldButton = memo9(function InputFieldButton2({
     event.preventDefault();
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ React17.createElement(ButtonContainer, { $size: size2 }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(ButtonContainer, { $size: size2 }, /* @__PURE__ */ React18.createElement(
     Button,
     {
       variant: "floating",
@@ -2008,7 +2020,7 @@ var InputFieldInput = forwardRef9(function InputFieldInput2({
   useLayoutEffect4(() => {
     setInputRef?.(forwardedRef);
   }, [forwardedRef, setInputRef]);
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     InputElement,
     {
       ref: forwardedRef,
@@ -2033,7 +2045,7 @@ var InputFieldTypeahead = (props) => {
     size: size2,
     onFocusChange
   } = useContext2(InputFieldContext);
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     InputElement,
     {
       $labelPosition: labelPosition,
@@ -2114,7 +2126,7 @@ function InputFieldNumberInput(props) {
     },
     [onBlur]
   );
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     InputFieldInput,
     {
       ...rest,
@@ -2144,7 +2156,9 @@ function InputFieldRoot({
   labelSize,
   size: size2 = "medium",
   renderPopoverContent,
-  onFocusChange
+  onFocusChange,
+  style: style3,
+  className
 }) {
   const childrenArray = Children3.toArray(children);
   const hasDropdown = childrenArray.some(
@@ -2153,9 +2167,9 @@ function InputFieldRoot({
   const hasLabel = childrenArray.some(
     (child) => isValidElement2(child) && child.type === InputFieldLabel
   );
-  const [isFocused, setIsFocused] = React17.useState(false);
-  const [measuredLabelSize, setMeasuredLabelSize] = React17.useState();
-  const [measuredWidth, setMeasuredWidth] = React17.useState();
+  const [isFocused, setIsFocused] = React18.useState(false);
+  const [measuredLabelSize, setMeasuredLabelSize] = React18.useState();
+  const [measuredWidth, setMeasuredWidth] = React18.useState();
   const handleFocusChange = useCallback11(
     (isFocused2) => {
       setIsFocused(isFocused2);
@@ -2163,7 +2177,7 @@ function InputFieldRoot({
     },
     [onFocusChange]
   );
-  const [inputRef, setInputRef] = React17.useState();
+  const [inputRef, setInputRef] = React18.useState();
   useEffect10(() => {
     if (inputRef && typeof inputRef !== "function") {
       setMeasuredWidth?.(
@@ -2196,8 +2210,18 @@ function InputFieldRoot({
       inputRef
     ]
   );
-  const rootElement = /* @__PURE__ */ React17.createElement(RootContainer, { id, $width: width, $flex: flex }, children);
-  return /* @__PURE__ */ React17.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React17.createElement(
+  const rootElement = /* @__PURE__ */ React18.createElement(
+    RootContainer,
+    {
+      id,
+      $width: width,
+      $flex: flex,
+      style: style3,
+      className
+    },
+    children
+  );
+  return /* @__PURE__ */ React18.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React18.createElement(
     Popover,
     {
       open: true,
@@ -2213,7 +2237,7 @@ function InputFieldRoot({
         event.stopPropagation();
       }
     },
-    measuredWidth && /* @__PURE__ */ React17.createElement(Stack.V, { width: measuredWidth, overflow: "hidden" }, renderPopoverContent({ width: measuredWidth }))
+    measuredWidth && /* @__PURE__ */ React18.createElement(Stack.V, { width: measuredWidth, overflow: "hidden" }, renderPopoverContent({ width: measuredWidth }))
   ) : rootElement);
 }
 var InputField;
@@ -2294,7 +2318,7 @@ var DialogProvider = function DialogProvider2({
       return false;
     return dialogRef.current.containsElement(element);
   }, []);
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
     DialogContext.Provider,
     {
       value: useMemo7(
@@ -2303,7 +2327,7 @@ var DialogProvider = function DialogProvider2({
       )
     },
     children
-  ), /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React19.createElement(
     Dialog,
     {
       ref: dialogRef,
@@ -2324,7 +2348,7 @@ var DialogProvider = function DialogProvider2({
         inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
       }, [])
     },
-    /* @__PURE__ */ React18.createElement(InputField.Root, null, /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement(InputField.Root, null, /* @__PURE__ */ React19.createElement(
       InputField.Input,
       {
         ref: inputRef,
@@ -2340,8 +2364,8 @@ var DialogProvider = function DialogProvider2({
         onKeyDown: handleKeyDown
       }
     )),
-    /* @__PURE__ */ React18.createElement(Spacer.Vertical, { size: 20 }),
-    /* @__PURE__ */ React18.createElement(Row, null, /* @__PURE__ */ React18.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React18.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ React18.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React18.createElement(Button, { disabled: !contents?.inputValue, onClick: submit }, "Submit"))
+    /* @__PURE__ */ React19.createElement(Spacer.Vertical, { size: 20 }),
+    /* @__PURE__ */ React19.createElement(Row, null, /* @__PURE__ */ React19.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React19.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ React19.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React19.createElement(Button, { disabled: !contents?.inputValue, onClick: submit }, "Submit"))
   ));
 };
 function useDialog() {
@@ -2360,7 +2384,7 @@ function useDialogContainsElement() {
 // src/contexts/FloatingWindowContext.tsx
 import { uuid } from "@noya-app/noya-utils";
-import React19, { createContext as createContext4, useContext as useContext4, useMemo as useMemo8, useState as useState13 } from "react";
+import React20, { createContext as createContext4, useContext as useContext4, useMemo as useMemo8, useState as useState13 } from "react";
 import { createPortal } from "react-dom";
 var FloatingWindowContext = createContext4(void 0);
 var CurrentWindowContext = createContext4(void 0);
@@ -2373,7 +2397,7 @@ var FloatingWindowProvider = ({
       const id = uuid();
       setWindows((windows2) => ({
         ...windows2,
-        [id]: /* @__PURE__ */ React19.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
+        [id]: /* @__PURE__ */ React20.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
       }));
       return id;
     };
@@ -2385,7 +2409,7 @@ var FloatingWindowProvider = ({
     };
     return { createWindow, closeWindow };
   }, []);
-  return /* @__PURE__ */ React19.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
+  return /* @__PURE__ */ React20.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
     ([id, element]) => createPortal(element, document.body, id)
   ));
 };
@@ -2418,11 +2442,11 @@ var DesignSystemThemeProvider = memo10(
     } catch (e) {
     }
     if (theme) {
-      return /* @__PURE__ */ React20.createElement(ThemeProvider, { theme }, children);
+      return /* @__PURE__ */ React21.createElement(ThemeProvider, { theme }, children);
     } else if (parentTheme) {
       return children;
     } else {
-      return /* @__PURE__ */ React20.createElement(ThemeProvider, { theme: light_exports }, children);
+      return /* @__PURE__ */ React21.createElement(ThemeProvider, { theme: light_exports }, children);
     }
   }
 );
@@ -2450,7 +2474,7 @@ var DesignSystemConfigurationProvider = memo10(
       [platform, internalPlatform]
     );
     const resolvedTheme = theme === "light" ? light_exports : theme === "dark" ? dark_exports : theme ?? light_exports;
-    return /* @__PURE__ */ React20.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React20.createElement(ThemeProvider, { theme: resolvedTheme }, /* @__PURE__ */ React20.createElement(DialogProvider, null, /* @__PURE__ */ React20.createElement(ToastProvider, null, /* @__PURE__ */ React20.createElement(FloatingWindowProvider, null, children)))));
+    return /* @__PURE__ */ React21.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React21.createElement(ThemeProvider, { theme: resolvedTheme }, /* @__PURE__ */ React21.createElement(DialogProvider, null, /* @__PURE__ */ React21.createElement(ToastProvider, null, /* @__PURE__ */ React21.createElement(FloatingWindowProvider, null, children)))));
   }
 );
 function useDesignSystemConfiguration() {
@@ -2461,7 +2485,7 @@ function useDesignSystemTheme() {
 }
 // src/hooks/useHover.ts
-import * as React21 from "react";
+import * as React22 from "react";
 var globalIgnoreEmulatedMouseEvents = false;
 var hoverCount = 0;
 function setGlobalIgnoreEmulatedMouseEvents() {
@@ -2491,13 +2515,13 @@ function setupGlobalTouchEvents() {
 }
 function useHover(props = {}) {
   const { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
-  const [isHovered, setHovered] = React21.useState(false);
-  const state = React21.useRef({
+  const [isHovered, setHovered] = React22.useState(false);
+  const state = React22.useRef({
     isHovered: false,
     ignoreEmulatedMouseEvents: false
   }).current;
-  React21.useEffect(setupGlobalTouchEvents, []);
-  const hoverProps = React21.useMemo(
+  React22.useEffect(setupGlobalTouchEvents, []);
+  const hoverProps = React22.useMemo(
     function getHoverProps() {
       function triggerHoverStart(event, pointerType) {
         if (isDisabled || pointerType === "touch" || state.isHovered) {
@@ -2662,7 +2686,7 @@ var Chip = memo11(
     });
     const handleClick = !children && !deletable && addable ? onAdd : onClick;
     const color = colorScheme === "primary" ? theme.colors.primary : colorScheme === "secondary" ? theme.colors.secondary : theme.colors.text;
-    return /* @__PURE__ */ React22.createElement(
+    return /* @__PURE__ */ React23.createElement(
       ChipElement,
       {
         ref: forwardedRef,
@@ -2676,7 +2700,7 @@ var Chip = memo11(
         tabIndex,
         ...rest
       },
-      addable && /* @__PURE__ */ React22.createElement(
+      addable && /* @__PURE__ */ React23.createElement(
         AddElement,
         {
           size: size2,
@@ -2689,7 +2713,7 @@ var Chip = memo11(
         }
       ),
       children,
-      deletable && /* @__PURE__ */ React22.createElement(
+      deletable && /* @__PURE__ */ React23.createElement(
         DeleteElement,
         {
           size: size2,
@@ -2709,7 +2733,7 @@ var Chip = memo11(
 import { CheckIcon as CheckIcon2, ChevronRightIcon as ChevronRightIcon2 } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts as useKeyboardShortcuts2 } from "@noya-app/noya-keymap";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
-import React23, { memo as memo12, useCallback as useCallback13, useMemo as useMemo11 } from "react";
+import React24, { memo as memo12, useCallback as useCallback13, useMemo as useMemo11 } from "react";
 import styled15 from "styled-components";
 var SeparatorElement2 = styled15(RadixContextMenu.Separator)(
   styles.separatorStyle
@@ -2742,32 +2766,32 @@ var ContextMenuItem2 = memo12(function ContextMenuItem3({
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React24.createElement(
       CheckboxItemElement2,
       {
         checked,
         disabled,
         onSelect: handleSelectItem
       },
-      /* @__PURE__ */ React23.createElement(StyledItemIndicator2, null, /* @__PURE__ */ React23.createElement(CheckIcon2, null)),
+      /* @__PURE__ */ React24.createElement(StyledItemIndicator2, null, /* @__PURE__ */ React24.createElement(CheckIcon2, null)),
       children
     );
   }
-  const element = /* @__PURE__ */ React23.createElement(
+  const element = /* @__PURE__ */ React24.createElement(
     ItemElement2,
     {
       disabled,
       onSelect: handleSelectItem,
       onPointerDown: handlePointerDown
     },
-    indented && /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
-    icon && /* @__PURE__ */ React23.createElement(React23.Fragment, null, icon, /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 8 })),
+    indented && /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
+    icon && /* @__PURE__ */ React24.createElement(React24.Fragment, null, renderIcon(icon), /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: 8 })),
     children,
-    shortcut && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React23.createElement(KeyboardShortcut, { shortcut })),
-    items && items.length > 0 && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React23.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React23.createElement(ChevronRightIcon2, null))
+    shortcut && /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React24.createElement(KeyboardShortcut, { shortcut })),
+    items && items.length > 0 && /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React24.createElement(ChevronRightIcon2, null))
   );
   if (items && items.length > 0) {
-    return /* @__PURE__ */ React23.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
+    return /* @__PURE__ */ React24.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
   } else {
     return element;
   }
@@ -2796,8 +2820,8 @@ function ContextMenuRoot({
   const RootComponent = isNested ? RadixContextMenu.Sub : RadixContextMenu.Root;
   const TriggerComponent = isNested ? RadixContextMenu.SubTrigger : RadixContextMenu.Trigger;
   const ContentComponent = isNested ? SubContent4 : Content8;
-  return /* @__PURE__ */ React23.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ React23.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ React23.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React23.createElement(ContentComponent, null, items.map(
-    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React23.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ React24.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ React24.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React24.createElement(ContentComponent, null, items.map(
+    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React24.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ React24.createElement(
       ContextMenuItem2,
       {
         key: item.value ?? index,
@@ -2817,7 +2841,7 @@ function ContextMenuRoot({
 var ContextMenu = memo12(ContextMenuRoot);
 // src/components/Divider.tsx
-import React24, { memo as memo13 } from "react";
+import React25, { memo as memo13 } from "react";
 import styled16 from "styled-components";
 var DividerContainer = styled16.div(({ theme, $variant = "normal", $orientation, $overflow = 0 }) => ({
   ...$orientation === "horizontal" ? { height: "1px", minHeight: "1px", margin: `0px -${$overflow}px` } : { width: "1px", minWidth: "1px", margin: `-${$overflow}px 0px` },
@@ -2829,7 +2853,7 @@ var Divider = memo13(function Divider2({
   overflow,
   ...props
 }) {
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(
     DividerContainer,
     {
       $orientation: "horizontal",
@@ -2844,7 +2868,7 @@ var DividerVertical = memo13(function DividerVertical2({
   overflow,
   ...props
 }) {
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(
     DividerContainer,
     {
       $orientation: "vertical",
@@ -2857,7 +2881,7 @@ var DividerVertical = memo13(function DividerVertical2({
 // src/components/DraggableMenuButton.tsx
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import React25, { memo as memo14, useCallback as useCallback14, useState as useState16 } from "react";
+import React26, { memo as memo14, useCallback as useCallback14, useState as useState16 } from "react";
 import styled17 from "styled-components";
 var DotButtonElement = styled17.div(({ theme }) => ({
   cursor: "pointer",
@@ -2884,7 +2908,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
 }) {
   const color = useDesignSystemTheme().colors.icon;
   const [open, setOpen] = useState16(false);
-  const [downPosition, setDownPosition] = React25.useState(null);
+  const [downPosition, setDownPosition] = React26.useState(null);
   const handlePointerDownCapture = useCallback14(
     (event) => {
       if (open) {
@@ -2921,7 +2945,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
     },
     [setOpen]
   );
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     DotButtonElement,
     {
       onPointerDownCapture: handlePointerDownCapture,
@@ -2931,7 +2955,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
         event.preventDefault();
       }
     },
-    items && onSelect ? /* @__PURE__ */ React25.createElement(
+    items && onSelect ? /* @__PURE__ */ React26.createElement(
       DropdownMenu,
       {
         open,
@@ -2940,13 +2964,13 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ React25.createElement(TriggerElement, null, /* @__PURE__ */ React25.createElement(
+      /* @__PURE__ */ React26.createElement(TriggerElement, null, /* @__PURE__ */ React26.createElement(
         DragHandleDots2Icon,
         {
           color: isVisible || open ? color : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ React25.createElement(
+    ) : /* @__PURE__ */ React26.createElement(
       DragHandleDots2Icon,
       {
         color: isVisible || open ? color : "transparent"
@@ -2956,7 +2980,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
 });
 // src/components/FillInputField.tsx
-import React28, { forwardRef as forwardRef11, memo as memo17 } from "react";
+import React29, { forwardRef as forwardRef11, memo as memo17 } from "react";
 import styled19 from "styled-components";
 // ../noya-file-format/src/types.ts
@@ -3282,11 +3306,11 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 // src/components/FillPreviewBackground.tsx
-import React27, { memo as memo16, useMemo as useMemo14 } from "react";
+import React28, { memo as memo16, useMemo as useMemo14 } from "react";
 import styled18, { useTheme as useTheme3 } from "styled-components";
 // src/contexts/ImageDataContext.tsx
-import React26, {
+import React27, {
   createContext as createContext6,
   memo as memo15,
   useContext as useContext6,
@@ -3303,7 +3327,7 @@ var ImageDataProvider = memo15(function ImageDataProvider2({
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ React26.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React27.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
   const value = useContext6(ImageDataContext);
@@ -3393,7 +3417,7 @@ var HorizontalDotsBackground = memo16(function HorizontalDotsBackground2() {
     ].join(","),
     [inputBackground, placeholderDots]
   );
-  return /* @__PURE__ */ React27.createElement(Background, { background });
+  return /* @__PURE__ */ React28.createElement(Background, { background });
 });
 function getPatternSizeAndPosition(fillType, tileScale) {
   switch (fillType) {
@@ -3423,13 +3447,13 @@ var PatternPreviewBackground = memo16(function PatternPreviewBackground2({
     ].join(" "),
     [fillType, size2, url]
   );
-  return /* @__PURE__ */ React27.createElement(Background, { background });
+  return /* @__PURE__ */ React28.createElement(Background, { background });
 });
 var ColorPreviewBackground = memo16(function ColorPreviewBackground2({
   color
 }) {
   const background = useMemo14(() => sketchColorToRgbaString(color), [color]);
-  return /* @__PURE__ */ React27.createElement(Background, { background });
+  return /* @__PURE__ */ React28.createElement(Background, { background });
 });
 var GradientPreviewBackground = memo16(function GradientPreviewBackground2({
   gradient
@@ -3438,22 +3462,22 @@ var GradientPreviewBackground = memo16(function GradientPreviewBackground2({
     () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
     [gradient.gradientType, gradient.stops]
   );
-  return /* @__PURE__ */ React27.createElement(Background, { background });
+  return /* @__PURE__ */ React28.createElement(Background, { background });
 });
 var FillPreviewBackground = memo16(function FillPreviewBackground2({
   value
 }) {
   if (!value)
-    return /* @__PURE__ */ React27.createElement(HorizontalDotsBackground, null);
+    return /* @__PURE__ */ React28.createElement(HorizontalDotsBackground, null);
   switch (value._class) {
     case "color":
-      return /* @__PURE__ */ React27.createElement(ColorPreviewBackground, { color: value });
+      return /* @__PURE__ */ React28.createElement(ColorPreviewBackground, { color: value });
     case "gradient":
-      return /* @__PURE__ */ React27.createElement(GradientPreviewBackground, { gradient: value });
+      return /* @__PURE__ */ React28.createElement(GradientPreviewBackground, { gradient: value });
     case "pattern":
       if (!value.image)
         return null;
-      return /* @__PURE__ */ React27.createElement(
+      return /* @__PURE__ */ React28.createElement(
         PatternPreviewBackground,
         {
           fillType: value.patternFillType,
@@ -3485,12 +3509,12 @@ var Container = styled19.button(
 );
 var FillInputField = memo17(
   forwardRef11(function FillInputField2({ id, value, flex, ...rest }, ref) {
-    return /* @__PURE__ */ React28.createElement(Container, { ref, id, $flex: flex, ...rest }, /* @__PURE__ */ React28.createElement(FillPreviewBackground, { value }));
+    return /* @__PURE__ */ React29.createElement(Container, { ref, id, $flex: flex, ...rest }, /* @__PURE__ */ React29.createElement(FillPreviewBackground, { value }));
   })
 );
 // src/components/FloatingWindow.tsx
-import React29, { useCallback as useCallback15, useRef as useRef13, useState as useState17 } from "react";
+import React30, { useCallback as useCallback15, useRef as useRef13, useState as useState17 } from "react";
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -3583,7 +3607,7 @@ function defaultRenderToolbar({
   toolbarContent,
   onClose
 }) {
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Small, { flex: "1", fontWeight: "500", color: "text" }, title), toolbarContent, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(Small, { flex: "1", fontWeight: "500", color: "text" }, title), toolbarContent, /* @__PURE__ */ React30.createElement(
     IconButton,
     {
       iconName: "Cross3Icon",
@@ -3704,7 +3728,7 @@ var FloatingWindow = ({
     setResizeDirection(null);
     toggleGlobalTextSelection(false);
   }, []);
-  React29.useEffect(() => {
+  React30.useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -3720,7 +3744,7 @@ var FloatingWindow = ({
       onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -3734,7 +3758,7 @@ var FloatingWindow = ({
         backgroundColor: theme.colors.canvas.background
       }
     },
-    /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React30.createElement(
       "div",
       {
         style: {
@@ -3745,9 +3769,9 @@ var FloatingWindow = ({
       },
       renderToolbar({ title, toolbarContent, onClose: handleClose })
     ),
-    /* @__PURE__ */ React29.createElement(Divider, null),
-    /* @__PURE__ */ React29.createElement("div", { style: styles2.content }, children),
-    Object.entries(resizeHandlePositions).map(([direction, style3]) => /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React30.createElement(Divider, null),
+    /* @__PURE__ */ React30.createElement("div", { style: styles2.content }, children),
+    Object.entries(resizeHandlePositions).map(([direction, style3]) => /* @__PURE__ */ React30.createElement(
       "div",
       {
         key: direction,
@@ -3769,7 +3793,7 @@ import {
   hsvaToRgba,
   rgbaToHsva as rgbaToHsva2
 } from "@noya-app/noya-colorpicker";
-import React30, { memo as memo18, useCallback as useCallback16, useMemo as useMemo15 } from "react";
+import React31, { memo as memo18, useCallback as useCallback16, useMemo as useMemo15 } from "react";
 var GradientPicker = memo18(function GradientPicker2({
   value,
   selectedStop,
@@ -3804,14 +3828,14 @@ var GradientPicker = memo18(function GradientPicker2({
     },
     [onAdd]
   );
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(
     NoyaColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       Gradient,
       {
         gradients: value,
@@ -3822,12 +3846,12 @@ var GradientPicker = memo18(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ React30.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ React30.createElement(Saturation, null),
-    /* @__PURE__ */ React30.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ React30.createElement(Hue, null),
-    /* @__PURE__ */ React30.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ React30.createElement(Alpha, null)
+    /* @__PURE__ */ React31.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ React31.createElement(Saturation, null),
+    /* @__PURE__ */ React31.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ React31.createElement(Hue, null),
+    /* @__PURE__ */ React31.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ React31.createElement(Alpha, null)
   );
 });
@@ -3859,7 +3883,7 @@ var Grid = styled20.div((props) => ({
 }));
 // src/components/GridView.tsx
-import React32, {
+import React33, {
   createContext as createContext7,
   forwardRef as forwardRef12,
   memo as memo20,
@@ -3871,7 +3895,7 @@ import styled22, { keyframes as keyframes2 } from "styled-components";
 // src/components/ScrollArea.tsx
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
-import React31, { memo as memo19, useCallback as useCallback17, useState as useState18 } from "react";
+import React32, { memo as memo19, useCallback as useCallback17, useState as useState18 } from "react";
 import styled21 from "styled-components";
 var SCROLLBAR_SIZE = 10;
 var StyledViewport = styled21(RadixScrollArea.Viewport)({
@@ -3901,7 +3925,7 @@ var Container2 = styled21.div({
 });
 var ScrollArea = memo19(function ScrollArea2({ children }) {
   const [scrollElementRef, setScrollElementRef] = useState18(null);
-  return /* @__PURE__ */ React31.createElement(Container2, null, /* @__PURE__ */ React31.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(Container2, null, /* @__PURE__ */ React32.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React32.createElement(
     StyledViewport,
     {
       ref: useCallback17(
@@ -3910,7 +3934,7 @@ var ScrollArea = memo19(function ScrollArea2({ children }) {
       )
     },
     typeof children === "function" ? scrollElementRef ? children(scrollElementRef) : null : children
-  ), /* @__PURE__ */ React31.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ React31.createElement(StyledThumb, { className: "scroll-component" }))));
+  ), /* @__PURE__ */ React32.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ React32.createElement(StyledThumb, { className: "scroll-component" }))));
 });
 // src/components/GridView.tsx
@@ -4106,7 +4130,7 @@ var GridViewItem = forwardRef12(function GridViewItem2({
   onContextMenu,
   style: style3
 }, forwardedRef) {
-  const [hovered, setHovered] = React32.useState(false);
+  const [hovered, setHovered] = React33.useState(false);
   const { hoverProps } = useHover({
     onHoverChange: (isHovering) => {
       onHoverChange?.(isHovering);
@@ -4135,7 +4159,7 @@ var GridViewItem = forwardRef12(function GridViewItem2({
     },
     [onPress]
   );
-  let element = /* @__PURE__ */ React32.createElement(
+  let element = /* @__PURE__ */ React33.createElement(
     ItemContainer,
     {
       id,
@@ -4144,7 +4168,7 @@ var GridViewItem = forwardRef12(function GridViewItem2({
       tabIndex: disabled ? void 0 : 0,
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(
       ContentContainer,
       {
         disabled,
@@ -4158,18 +4182,18 @@ var GridViewItem = forwardRef12(function GridViewItem2({
       },
       children
     ),
-    textPosition === "below" && /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React32.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ React32.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React32.createElement(TextOverlay, null, title && /* @__PURE__ */ React32.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React32.createElement(ItemDescription, { showBackground: true }, subtitle)),
-    loading && /* @__PURE__ */ React32.createElement(Shimmer, null, /* @__PURE__ */ React32.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
+    textPosition === "below" && /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React33.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ React33.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React33.createElement(TextOverlay, null, title && /* @__PURE__ */ React33.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React33.createElement(ItemDescription, { showBackground: true }, subtitle)),
+    loading && /* @__PURE__ */ React33.createElement(Shimmer, null, /* @__PURE__ */ React33.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
-    element = /* @__PURE__ */ React32.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
+    element = /* @__PURE__ */ React33.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
   }
   if (textPosition === "toolip") {
-    element = /* @__PURE__ */ React32.createElement(
+    element = /* @__PURE__ */ React33.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ React32.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ React32.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ React32.createElement(ItemDescription, { showBackground: false }, subtitle))
+        content: /* @__PURE__ */ React33.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ React33.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ React33.createElement(ItemDescription, { showBackground: false }, subtitle))
       },
       element
     );
@@ -4208,20 +4232,20 @@ function GridViewRoot({
     }),
     [bordered, disabled, size2, textPosition]
   );
-  return /* @__PURE__ */ React32.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React32.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ React32.createElement(ScrollArea, null, children) : children));
+  return /* @__PURE__ */ React33.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React33.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ React33.createElement(ScrollArea, null, children) : children));
 }
 function GridViewSection({
   children,
   padding = "20px"
 }) {
   const { size: size2 } = useContext7(GridViewContext);
-  return /* @__PURE__ */ React32.createElement(Grid2, { size: size2, padding }, children);
+  return /* @__PURE__ */ React33.createElement(Grid2, { size: size2, padding }, children);
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
-  return /* @__PURE__ */ React32.createElement(SectionHeaderContainer, null, /* @__PURE__ */ React32.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
-    grouped.map((title2, index) => /* @__PURE__ */ React32.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
-    /* @__PURE__ */ React32.createElement(SectionTitle, null, " / ")
+  return /* @__PURE__ */ React33.createElement(SectionHeaderContainer, null, /* @__PURE__ */ React33.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
+    grouped.map((title2, index) => /* @__PURE__ */ React33.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
+    /* @__PURE__ */ React33.createElement(SectionTitle, null, " / ")
   ));
 }
 var GridView;
@@ -4234,7 +4258,7 @@ var GridView;
 // src/components/InputFieldWithCompletions.tsx
 import { chunkBy, partition } from "@noya-app/noya-utils";
-import React36, {
+import React37, {
   forwardRef as forwardRef15,
   memo as memo23,
   useCallback as useCallback21,
@@ -4321,7 +4345,7 @@ function mergeRanges(ranges) {
 // src/components/ListView.tsx
 import { range } from "@noya-app/noya-utils";
 import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
-import React34, {
+import React35, {
   Children as Children4,
   createContext as createContext9,
   forwardRef as forwardRef13,
@@ -4375,7 +4399,7 @@ import {
   useSortable,
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
-import React33, {
+import React34, {
   createContext as createContext8,
   memo as memo21,
   useCallback as useCallback19,
@@ -4517,7 +4541,7 @@ function SortableRoot({
   useEffect13(() => {
     setMounted(true);
   }, []);
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     SortableItemContext.Provider,
     {
       value: useMemo17(
@@ -4531,7 +4555,7 @@ function SortableRoot({
         [acceptsDrop, axis, keys, position, setActivatorEvent]
       )
     },
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React34.createElement(
       DndContext,
       {
         sensors,
@@ -4540,9 +4564,9 @@ function SortableRoot({
         onDragMove: handleDragMove,
         onDragEnd: handleDragEnd
       },
-      /* @__PURE__ */ React33.createElement(SortableContext, { items: keys, strategy: verticalListSortingStrategy }, children),
+      /* @__PURE__ */ React34.createElement(SortableContext, { items: keys, strategy: verticalListSortingStrategy }, children),
       mounted && renderOverlay && createPortal2(
-        /* @__PURE__ */ React33.createElement(DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
+        /* @__PURE__ */ React34.createElement(DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
         document.body
       )
     )
@@ -4600,7 +4624,7 @@ function ListViewEditableRowTitle({
       element.select();
     }, 0);
   }, [autoFocus]);
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(
     ListViewEditableRowTitleElement,
     {
       ref: inputRef,
@@ -4742,7 +4766,8 @@ var ListViewRow = forwardRef13(function ListViewRow2({
   onSelectMenuItem,
   onMenuOpenChange,
   onKeyDown,
-  style: style3
+  style: style3,
+  dragIndicatorStyle
 }, forwardedRef) {
   depth = Math.max(0, depth);
   const {
@@ -4789,7 +4814,7 @@ var ListViewRow = forwardRef13(function ListViewRow2({
     ...renderProps
   }, ref) => {
     const Component = RowContainer;
-    const element = /* @__PURE__ */ React34.createElement(
+    const element = /* @__PURE__ */ React35.createElement(
       Component,
       {
         ref,
@@ -4820,20 +4845,25 @@ var ListViewRow = forwardRef13(function ListViewRow2({
         ),
         tabIndex
       },
-      relativeDropPosition && /* @__PURE__ */ React34.createElement(
+      relativeDropPosition && /* @__PURE__ */ React35.createElement(
         ListViewDragIndicatorElement,
         {
           $colorScheme: colorScheme,
           $relativeDropPosition: relativeDropPosition,
           $offsetLeft: 33 + depth * indentation,
-          $gap: listGap
+          $gap: listGap + (divider ? 1 : 0),
+          style: typeof dragIndicatorStyle === "function" ? dragIndicatorStyle({
+            depth,
+            indentation,
+            position: relativeDropPosition
+          }) : dragIndicatorStyle
         }
       ),
-      depth > 0 && /* @__PURE__ */ React34.createElement(Spacer.Horizontal, { size: depth * indentation }),
+      depth > 0 && /* @__PURE__ */ React35.createElement(Spacer.Horizontal, { size: depth * indentation }),
       children
     );
     if (menuItems && onSelectMenuItem) {
-      return /* @__PURE__ */ React34.createElement(
+      return /* @__PURE__ */ React35.createElement(
         ContextMenu,
         {
           items: menuItems,
@@ -4846,7 +4876,7 @@ var ListViewRow = forwardRef13(function ListViewRow2({
     return element;
   };
   if (sortable && id) {
-    return /* @__PURE__ */ React34.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
+    return /* @__PURE__ */ React35.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
       sortableProps,
       composeRefs2(sortableRef, forwardedRef)
     ));
@@ -4861,7 +4891,7 @@ var VirtualizedListRow = memo22(function VirtualizedListRow2({
   style: style3
 }) {
   const renderItem = useContext9(RenderItemContext);
-  return /* @__PURE__ */ React34.createElement("div", { key: index, style: style3 }, renderItem(index));
+  return /* @__PURE__ */ React35.createElement("div", { key: index, style: style3 }, renderItem(index));
 });
 var VirtualizedListInner = forwardRef13(function VirtualizedListInner2({
   size: size2,
@@ -4892,7 +4922,7 @@ var VirtualizedListInner = forwardRef13(function VirtualizedListInner2({
     }),
     []
   );
-  return /* @__PURE__ */ React34.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React35.createElement(
     WindowScroller,
     {
       scrollElement,
@@ -4903,7 +4933,7 @@ var VirtualizedListInner = forwardRef13(function VirtualizedListInner2({
         registerChild,
         onChildScroll,
         scrollTop
-      }) => /* @__PURE__ */ React34.createElement("div", { ref: registerChild }, /* @__PURE__ */ React34.createElement(
+      }) => /* @__PURE__ */ React35.createElement("div", { ref: registerChild }, /* @__PURE__ */ React35.createElement(
         VariableSizeList,
         {
           ref: listRef,
@@ -5045,7 +5075,7 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
     [indentation]
   );
   const renderOverlay = useCallback20(
-    (index) => /* @__PURE__ */ React34.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React34.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
+    (index) => /* @__PURE__ */ React35.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React35.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
   const renderWrappedChild = useCallback20(
@@ -5054,12 +5084,12 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
       const current = renderChild(index);
       if (!contextValue || !isValidElement3(current))
         return null;
-      return /* @__PURE__ */ React34.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
+      return /* @__PURE__ */ React35.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
     },
     [getItemContextValue, renderChild]
   );
   const ids = useMemo18(() => data.map(keyExtractor), [keyExtractor, data]);
-  const withSortable = (children) => sortable ? /* @__PURE__ */ React34.createElement(
+  const withSortable = (children) => sortable ? /* @__PURE__ */ React35.createElement(
     Sortable.Root,
     {
       onMoveItem,
@@ -5069,7 +5099,7 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
     },
     children
   ) : children;
-  const withScrollable = (children) => scrollable ? /* @__PURE__ */ React34.createElement(ScrollArea, null, children) : children(null);
+  const withScrollable = (children) => scrollable ? /* @__PURE__ */ React35.createElement(ScrollArea, null, children) : children(null);
   const getItemHeight = useCallback20(
     (index) => {
       const child = getItemContextValue(index);
@@ -5084,7 +5114,7 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
     [data, keyExtractor]
   );
   const draggingContextValue = useMemo18(() => ({ indentation }), [indentation]);
-  return /* @__PURE__ */ React34.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React35.createElement(
     RootContainer2,
     {
       id,
@@ -5098,7 +5128,7 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
     },
     withScrollable(
       (scrollElementRef) => withSortable(
-        virtualized ? /* @__PURE__ */ React34.createElement(
+        virtualized ? /* @__PURE__ */ React35.createElement(
           VirtualizedList,
           {
             ref: forwardedRef,
@@ -5122,7 +5152,7 @@ var ChildrenListViewInner = forwardRef13(function ChildrenListViewInner2({ child
     ),
     [children]
   );
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(
     ListViewRoot,
     {
       ref: forwardedRef,
@@ -5139,9 +5169,9 @@ var ChildrenListViewInner = forwardRef13(function ChildrenListViewInner2({ child
 var ChildrenListView = memo22(ChildrenListViewInner);
 var SimpleListViewInner = forwardRef13(function SimpleListViewInner2(props, forwardedRef) {
   if ("children" in props) {
-    return /* @__PURE__ */ React34.createElement(ChildrenListView, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ React35.createElement(ChildrenListView, { ref: forwardedRef, ...props });
   } else {
-    return /* @__PURE__ */ React34.createElement(ListViewRoot, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ React35.createElement(ListViewRoot, { ref: forwardedRef, ...props });
   }
 });
 var SimpleListView = memo22(SimpleListViewInner);
@@ -5162,7 +5192,7 @@ var ListView;
 })(ListView || (ListView = {}));
 // src/components/Text.tsx
-import React35, { forwardRef as forwardRef14 } from "react";
+import React36, { forwardRef as forwardRef14 } from "react";
 import styled24 from "styled-components";
 var elements = {
   title: "h1",
@@ -5198,7 +5228,7 @@ var Text = forwardRef14(function Text2({
   ...rest
 }, forwardedRef) {
   const element = as ?? elements[variant] ?? "span";
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(
     StyledElement,
     {
       ref: forwardedRef,
@@ -5217,27 +5247,27 @@ var Text = forwardRef14(function Text2({
   );
 });
 var Heading1 = forwardRef14(
-  (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading1" })
+  (props, ref) => /* @__PURE__ */ React36.createElement(Text, { ref, ...props, variant: "heading1" })
 );
 var Heading2 = forwardRef14(
-  (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading2" })
+  (props, ref) => /* @__PURE__ */ React36.createElement(Text, { ref, ...props, variant: "heading2" })
 );
 var Heading3 = forwardRef14(
-  (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading3" })
+  (props, ref) => /* @__PURE__ */ React36.createElement(Text, { ref, ...props, variant: "heading3" })
 );
 var Heading4 = forwardRef14(
-  (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading4" })
+  (props, ref) => /* @__PURE__ */ React36.createElement(Text, { ref, ...props, variant: "heading4" })
 );
 var Heading5 = forwardRef14(
-  (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading5" })
+  (props, ref) => /* @__PURE__ */ React36.createElement(Text, { ref, ...props, variant: "heading5" })
 );
 var Body = forwardRef14(
-  (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "body" })
+  (props, ref) => /* @__PURE__ */ React36.createElement(Text, { ref, ...props, variant: "body" })
 );
 var Small = forwardRef14(
-  (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "small" })
+  (props, ref) => /* @__PURE__ */ React36.createElement(Text, { ref, ...props, variant: "small" })
 );
-var Italic = ({ children }) => /* @__PURE__ */ React35.createElement(
+var Italic = ({ children }) => /* @__PURE__ */ React36.createElement(
   "span",
   {
     style: {
@@ -5287,7 +5317,7 @@ var CompletionMenu = memo23(
     onHoverIndex,
     listSize
   }, forwardedRef) {
-    return /* @__PURE__ */ React36.createElement(
+    return /* @__PURE__ */ React37.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -5299,13 +5329,13 @@ var CompletionMenu = memo23(
         sectionHeaderVariant: "label",
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ React36.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
+            return /* @__PURE__ */ React37.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
           }
           const tokens = fuzzyTokenize({
             item: item.name,
             itemScore: item
           });
-          return /* @__PURE__ */ React36.createElement(
+          return /* @__PURE__ */ React37.createElement(
             ListView.Row,
             {
               key: item.id,
@@ -5317,8 +5347,8 @@ var CompletionMenu = memo23(
                 }
               }
             },
-            tokens.map((token, j) => /* @__PURE__ */ React36.createElement(CompletionToken, { key: j, $type: token.type }, token.text)),
-            item.icon && /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(Spacer.Horizontal, null), item.icon)
+            tokens.map((token, j) => /* @__PURE__ */ React37.createElement(CompletionToken, { key: j, $type: token.type }, token.text)),
+            item.icon && /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(Spacer.Horizontal, null), item.icon)
           );
         }
       }
@@ -5387,7 +5417,7 @@ var InputFieldWithCompletions = memo23(
       updateState({ filter: initialValue });
     }, [initialValue, updateState]);
     const { filter, selectedIndex } = state;
-    const listRef = React36.useRef(null);
+    const listRef = React37.useRef(null);
     const filteredItems = useMemo19(
       () => filterWithGroupedSections(items, filter),
       [items, filter]
@@ -5523,14 +5553,14 @@ var InputFieldWithCompletions = memo23(
         ref.current?.setSelectionRange(0, ref.current.value.length);
       }
     }));
-    return /* @__PURE__ */ React36.createElement(
+    return /* @__PURE__ */ React37.createElement(
       InputField.Root,
       {
         size: size2,
         labelSize: 16,
         renderPopoverContent: ({ width }) => {
           const listSize = { width, height };
-          return /* @__PURE__ */ React36.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ React36.createElement(
+          return /* @__PURE__ */ React37.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ React37.createElement(
             CompletionMenu,
             {
               ref: listRef,
@@ -5540,7 +5570,7 @@ var InputFieldWithCompletions = memo23(
               onHoverIndex: handleIndexChange,
               listSize
             }
-          ) : /* @__PURE__ */ React36.createElement(
+          ) : /* @__PURE__ */ React37.createElement(
             Stack.V,
             {
               height: "100px",
@@ -5548,11 +5578,11 @@ var InputFieldWithCompletions = memo23(
               alignItems: "center",
               justifyContent: "center"
             },
-            /* @__PURE__ */ React36.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
+            /* @__PURE__ */ React37.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
           ));
         }
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React37.createElement(
         InputField.Input,
         {
           ref,
@@ -5576,9 +5606,9 @@ var InputFieldWithCompletions = memo23(
           "aria-controls": "component-listbox"
         }
       ),
-      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ React36.createElement(InputField.Typeahead, { value: typeaheadValue }),
+      filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ React37.createElement(InputField.Typeahead, { value: typeaheadValue }),
       (!isFocused || !hideChildrenWhenFocused) && children,
-      loading && isFocused && /* @__PURE__ */ React36.createElement(InputField.Label, null, /* @__PURE__ */ React36.createElement(ActivityIndicator, null))
+      loading && isFocused && /* @__PURE__ */ React37.createElement(InputField.Label, null, /* @__PURE__ */ React37.createElement(ActivityIndicator, null))
     );
   })
 );
@@ -5600,7 +5630,7 @@ function getNextIndex(items, currentIndex, direction, isDisabled) {
 }
 // src/components/InspectorContainer.tsx
-import React37, { forwardRef as forwardRef16, memo as memo24 } from "react";
+import React38, { forwardRef as forwardRef16, memo as memo24 } from "react";
 var InspectorContainer = memo24(
   forwardRef16(function InspectorContainer2({
     header,
@@ -5612,7 +5642,7 @@ var InspectorContainer = memo24(
     style: style3
   }, forwardedRef) {
     const theme = useDesignSystemTheme();
-    return /* @__PURE__ */ React37.createElement(
+    return /* @__PURE__ */ React38.createElement(
       "div",
       {
         ref: forwardedRef,
@@ -5627,13 +5657,13 @@ var InspectorContainer = memo24(
         }
       },
       header,
-      children ? /* @__PURE__ */ React37.createElement(ScrollArea, null, /* @__PURE__ */ React37.createElement(Stack.V, { position: "relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ React37.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ React37.createElement(Stack.V, { position: "relative", height: "100%" }, fallback) : null
+      children ? /* @__PURE__ */ React38.createElement(ScrollArea, null, /* @__PURE__ */ React38.createElement(Stack.V, { position: "relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ React38.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ React38.createElement(Stack.V, { position: "relative", height: "100%" }, fallback) : null
     );
   })
 );
 // src/components/Label.tsx
-import React38, { memo as memo25 } from "react";
+import React39, { memo as memo25 } from "react";
 import styled26 from "styled-components";
 var LabelLabel = styled26.label(
   ({ theme, $selected }) => ({
@@ -5662,7 +5692,7 @@ var LabelContainer2 = styled26.span(({ theme }) => ({
   alignItems: "center"
 }));
 function LabelRoot({ label, children }) {
-  return /* @__PURE__ */ React38.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ React38.createElement(LabelLabel, null, label)));
+  return /* @__PURE__ */ React39.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ React39.createElement(LabelLabel, null, label)));
 }
 var Label;
 ((_Label) => {
@@ -5672,7 +5702,7 @@ var Label;
 // src/components/LabeledElementView.tsx
 import * as kiwi from "kiwi.js";
-import React39, {
+import React40, {
   Children as Children5,
   createRef,
   Fragment,
@@ -5717,7 +5747,7 @@ var LabeledElementView = memo26(function LabeledElementView2({
     );
   }, [serializedIds]);
   const labelElements = useMemo20(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React39.createElement(
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React40.createElement(
       "span",
       {
         key: id,
@@ -5795,13 +5825,13 @@ var LabeledElementView = memo26(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ React39.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ React39.createElement(Tools, null, children), /* @__PURE__ */ React39.createElement(Labels, null, labelElements));
+  return /* @__PURE__ */ React40.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ React40.createElement(Tools, null, children), /* @__PURE__ */ React40.createElement(Labels, null, labelElements));
 });
 // src/components/Progress.tsx
 import { clamp } from "@noya-app/noya-utils";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import React40 from "react";
+import React41 from "react";
 import styled28 from "styled-components";
 function Progress({
   value,
@@ -5811,7 +5841,7 @@ function Progress({
   variant = "normal"
 }) {
   const clampedValue = clamp(value, 0, 100);
-  return /* @__PURE__ */ React40.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ React41.createElement(
     ProgressIndicator,
     {
       variant,
@@ -5836,7 +5866,7 @@ var ProgressIndicator = styled28(ProgressPrimitive.Indicator)(({ theme, variant
 // src/components/RadioGroup.tsx
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import React41, {
+import React42, {
   createContext as createContext10,
   forwardRef as forwardRef17,
   memo as memo27,
@@ -5898,7 +5928,7 @@ var StyledItem = styled29(ToggleGroupPrimitive.Item).withConfig({
 }));
 var ToggleGroupItem = forwardRef17(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
   const { colorScheme } = useContext10(RadioGroupContext);
-  const itemElement = /* @__PURE__ */ React41.createElement(
+  const itemElement = /* @__PURE__ */ React42.createElement(
     StyledItem,
     {
       ref: forwardedRef,
@@ -5908,7 +5938,7 @@ var ToggleGroupItem = forwardRef17(function ToggleGroupItem2({ value, tooltip, c
     },
     children
   );
-  return tooltip ? /* @__PURE__ */ React41.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ React42.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
 var RadioGroupContext = createContext10({
   colorScheme: "primary"
@@ -5930,7 +5960,7 @@ function ToggleGroupRoot({
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ React41.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React42.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React42.createElement(
     StyledRoot,
     {
       id,
@@ -5950,7 +5980,7 @@ var RadioGroup;
 // src/components/Select.tsx
 import { memoize } from "@noya-app/noya-utils";
-import React42, {
+import React43, {
   createContext as createContext11,
   memo as memo28,
   useCallback as useCallback23,
@@ -5973,7 +6003,7 @@ var SelectOption = memo28(function SelectOption2({
     addListener(value, onSelect);
     return () => removeListener(value);
   }, [addListener, onSelect, removeListener, value]);
-  return /* @__PURE__ */ React42.createElement("option", { value }, title ?? value);
+  return /* @__PURE__ */ React43.createElement("option", { value }, title ?? value);
 });
 var createChevronSVGString = memoize(
   (color) => `
@@ -6008,7 +6038,7 @@ var SelectElement = styled30.select(
     borderRadius: "4px",
     paddingTop: "4px",
     paddingBottom: "4px",
-    paddingLeft: "8px",
+    paddingLeft: "6px",
     paddingRight: "23px",
     background: [
       `calc(100% - 6px) / 15px url("data:image/svg+xml;utf8,${createChevronSVGString(
@@ -6047,7 +6077,7 @@ var Select = memo28(function Select2({
   const onChange = "options" in rest ? rest.onChange : void 0;
   const children = "options" in rest ? void 0 : rest.children;
   const optionElements = useMemo22(
-    () => options ? options.map((option, index) => /* @__PURE__ */ React42.createElement(
+    () => options ? options.map((option, index) => /* @__PURE__ */ React43.createElement(
       SelectOption,
       {
         key: option,
@@ -6066,7 +6096,7 @@ var Select = memo28(function Select2({
     }),
     []
   );
-  return /* @__PURE__ */ React42.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ React42.createElement(SelectContainer, { $flex: flex }, /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ React43.createElement(SelectContainer, { $flex: flex }, /* @__PURE__ */ React43.createElement(
     SelectElement,
     {
       id,
@@ -6079,13 +6109,13 @@ var Select = memo28(function Select2({
       onPointerDown: (event) => event.stopPropagation()
     },
     optionElements
-  )), label && /* @__PURE__ */ React42.createElement(SelectLabel, { htmlFor: id }, label));
+  )), label && /* @__PURE__ */ React43.createElement(SelectLabel, { htmlFor: id }, label));
 });
 // src/components/SelectMenu.tsx
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import * as Select3 from "@radix-ui/react-select";
-import React43, { memo as memo29 } from "react";
+import React44, { memo as memo29 } from "react";
 import { styled as styled31 } from "styled-components";
 var SelectMenu = memo29(function SelectMenu2({
   id,
@@ -6100,23 +6130,23 @@ var SelectMenu = memo29(function SelectMenu2({
     (item) => typeof item !== "string" && item.value === value
   );
   const icon = selectedItem?.icon;
-  return /* @__PURE__ */ React43.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ React43.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ React43.createElement(Button, { id, style: style3, className }, icon && /* @__PURE__ */ React43.createElement(React43.Fragment, null, icon, /* @__PURE__ */ React43.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React43.createElement(Select3.Value, { placeholder }), /* @__PURE__ */ React43.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React43.createElement(DropdownChevronIcon, null))), /* @__PURE__ */ React43.createElement(Select3.Portal, null, /* @__PURE__ */ React43.createElement(SelectContent, null, /* @__PURE__ */ React43.createElement(SelectViewport, null, menuItems.map((menuItem) => {
+  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 (typeof menuItem === "string") {
-      return /* @__PURE__ */ React43.createElement(StyledSeparator, null);
+      return /* @__PURE__ */ React44.createElement(StyledSeparator, null);
     }
     const value2 = menuItem.value ?? "";
-    return /* @__PURE__ */ React43.createElement(SelectItem, { key: value2, value: value2, icon: menuItem.icon }, menuItem.title ?? value2);
+    return /* @__PURE__ */ React44.createElement(SelectItem, { key: value2, value: value2, icon: menuItem.icon }, menuItem.title ?? value2);
   })))));
 });
 var SelectContent = styled31(Select3.Content)(styles.contentStyle);
 var SelectViewport = styled31(Select3.Viewport)({});
-var SelectItem = React43.forwardRef(
+var SelectItem = React44.forwardRef(
   ({
     children,
     icon,
     ...props
   }, forwardedRef) => {
-    return /* @__PURE__ */ React43.createElement(StyledItem2, { ...props, ref: forwardedRef }, icon && /* @__PURE__ */ React43.createElement(React43.Fragment, null, icon, /* @__PURE__ */ React43.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React43.createElement(Select3.ItemText, null, children));
+    return /* @__PURE__ */ React44.createElement(StyledItem2, { ...props, ref: forwardedRef }, icon && /* @__PURE__ */ React44.createElement(React44.Fragment, null, renderIcon(icon), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React44.createElement(Select3.ItemText, null, children));
   }
 );
 var StyledItem2 = styled31(Select3.Item)(styles.itemStyle);
@@ -6124,7 +6154,7 @@ var StyledSeparator = styled31(Select3.Separator)(styles.separatorStyle);
 // src/components/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import React44, { useCallback as useCallback24, useMemo as useMemo23 } from "react";
+import React45, { useCallback as useCallback24, useMemo as useMemo23 } from "react";
 import styled32 from "styled-components";
 var StyledSlider = styled32(RadixSlider.Root)({
   flex: "1",
@@ -6175,7 +6205,7 @@ var Slider = function Slider2({
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement(
     StyledSlider,
     {
       min,
@@ -6184,14 +6214,14 @@ var Slider = function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange
     },
-    /* @__PURE__ */ React44.createElement(StyledTrack, null, /* @__PURE__ */ React44.createElement(StyledRange, null)),
-    /* @__PURE__ */ React44.createElement(StyledThumb2, null)
+    /* @__PURE__ */ React45.createElement(StyledTrack, null, /* @__PURE__ */ React45.createElement(StyledRange, null)),
+    /* @__PURE__ */ React45.createElement(StyledThumb2, null)
   );
 };
 // src/components/Switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import React45 from "react";
+import React46 from "react";
 import styled33 from "styled-components";
 var SwitchRoot = styled33(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
   all: "unset",
@@ -6226,7 +6256,7 @@ var Switch = function Switch2({
   onChange,
   colorScheme = "normal"
 }) {
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(
     SwitchRoot,
     {
       $colorScheme: colorScheme,
@@ -6235,12 +6265,12 @@ var Switch = function Switch2({
         onChange(newValue);
       }
     },
-    /* @__PURE__ */ React45.createElement(SwitchThumb, null)
+    /* @__PURE__ */ React46.createElement(SwitchThumb, null)
   );
 };
 // src/components/TreeView.tsx
-import React46, {
+import React47, {
   forwardRef as forwardRef18,
   memo as memo30,
   useCallback as useCallback25,
@@ -6261,14 +6291,14 @@ var TreeRow = forwardRef18(function TreeRow2({
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ React46.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React46.createElement(React46.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React46.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React46.createElement(
+  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(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React46.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React46.createElement(React46.Fragment, null, icon, /* @__PURE__ */ React46.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ React47.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React47.createElement(React47.Fragment, null, renderIcon(icon), /* @__PURE__ */ React47.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
@@ -6280,7 +6310,7 @@ var TreeView;
 // src/components/WorkspaceLayout.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
-import React48, { forwardRef as forwardRef19, useImperativeHandle as useImperativeHandle4, useRef as useRef20 } from "react";
+import React49, { forwardRef as forwardRef19, useImperativeHandle as useImperativeHandle4, useRef as useRef20 } from "react";
 import {
   Panel,
   PanelGroup,
@@ -6508,7 +6538,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
     }
   });
   const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
-  return /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(
     "div",
     {
       id,
@@ -6520,7 +6550,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
         ...style3
       }
     },
-    /* @__PURE__ */ React48.createElement(
+    /* @__PURE__ */ React49.createElement(
       PanelGroup,
       {
         ref: panelGroupRef,
@@ -6529,7 +6559,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
         autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
         style: { flex: "1" }
       },
-      hasLeftSidebar && /* @__PURE__ */ React48.createElement(React48.Fragment, null, /* @__PURE__ */ React48.createElement(
+      hasLeftSidebar && /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(
         Panel,
         {
           id: LEFT_SIDEBAR_ID,
@@ -6546,7 +6576,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
           }
         },
         leftPanelContent
-      ), /* @__PURE__ */ React48.createElement(
+      ), /* @__PURE__ */ React49.createElement(
         PanelResizeHandle,
         {
           style: {
@@ -6557,7 +6587,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
           }
         }
       )),
-      /* @__PURE__ */ React48.createElement(
+      /* @__PURE__ */ React49.createElement(
         Panel,
         {
           id: CONTENT_AREA_ID,
@@ -6572,7 +6602,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
         },
         centerPanelContent
       ),
-      hasRightSidebar && /* @__PURE__ */ React48.createElement(React48.Fragment, null, /* @__PURE__ */ React48.createElement(
+      hasRightSidebar && /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(
         PanelResizeHandle,
         {
           style: {
@@ -6582,7 +6612,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
             backgroundColor: theme.colors.divider
           }
         }
-      ), /* @__PURE__ */ React48.createElement(
+      ), /* @__PURE__ */ React49.createElement(
         Panel,
         {
           id: RIGHT_SIDEBAR_ID,
@@ -6645,7 +6675,7 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 // src/components/ArrayController.tsx
 import { range as range2 } from "@noya-app/noya-utils";
-import React50, { memo as memo32, useCallback as useCallback26, useMemo as useMemo24 } from "react";
+import React51, { memo as memo32, useCallback as useCallback26, useMemo as useMemo24 } from "react";
 import styled35, { useTheme as useTheme5 } from "styled-components";
 // src/components/InspectorPrimitives.tsx
@@ -6664,7 +6694,7 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-import React49, { memo as memo31 } from "react";
+import React50, { memo as memo31 } from "react";
 import styled34, { useTheme as useTheme4 } from "styled-components";
 var Section = styled34.div(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
@@ -6711,8 +6741,8 @@ var Checkbox = styled34.input(({ theme }) => ({
 var Text3 = styled34.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ React49.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ React49.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
+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 }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
@@ -6740,13 +6770,13 @@ var LabeledRow = memo31(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ React49.createElement(Row2, { id }, /* @__PURE__ */ React49.createElement(Column, null, /* @__PURE__ */ React49.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React49.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React49.createElement(Row2, { $gap: gap }, children)));
+  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)));
 });
 var LabeledSliderRow = memo31(function LabeledRow3({
   children,
   label
 }) {
-  return /* @__PURE__ */ React49.createElement(Row2, null, /* @__PURE__ */ React49.createElement(Column, null, /* @__PURE__ */ React49.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React49.createElement(Row2, null, children)));
+  return /* @__PURE__ */ React50.createElement(Row2, null, /* @__PURE__ */ React50.createElement(Column, null, /* @__PURE__ */ React50.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React50.createElement(Row2, null, children)));
 });
 // src/components/ArrayController.tsx
@@ -6799,11 +6829,11 @@ var ArrayController = memo32(function ArrayController2({
     [onMoveItem, reversed]
   );
   const renderRow = (index) => {
-    return /* @__PURE__ */ React50.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
+    return /* @__PURE__ */ React51.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
   };
-  return /* @__PURE__ */ React50.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ React50.createElement(SectionHeader, null, /* @__PURE__ */ React50.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ React50.createElement(Title3, null, title)), /* @__PURE__ */ React50.createElement(Spacer.Horizontal, null), withSeparatorElements(
+  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(
     [
-      onClickTrash && /* @__PURE__ */ React50.createElement(
+      onClickTrash && /* @__PURE__ */ React51.createElement(
         IconButton,
         {
           id: `${id}-trash`,
@@ -6812,7 +6842,7 @@ var ArrayController = memo32(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ React50.createElement(
+      onClickExpand && /* @__PURE__ */ React51.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -6821,7 +6851,7 @@ var ArrayController = memo32(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ React50.createElement(
+      onClickPlus && /* @__PURE__ */ React51.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -6831,15 +6861,15 @@ var ArrayController = memo32(function ArrayController2({
         }
       )
     ],
-    /* @__PURE__ */ React50.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ React50.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ React50.createElement(
+    /* @__PURE__ */ React51.createElement(Spacer.Horizontal, { size: 8 })
+  )), /* @__PURE__ */ React51.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ React51.createElement(
     Sortable.Root,
     {
       keys,
       renderOverlay: renderRow,
       onMoveItem: handleMoveItem
     },
-    indexes.map((index) => /* @__PURE__ */ React50.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ React50.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ React50.createElement(
+    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(
       ListView.DragIndicator,
       {
         $gap: 0,
@@ -6853,7 +6883,7 @@ var ArrayController = memo32(function ArrayController2({
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import React51, { memo as memo33, useCallback as useCallback27 } from "react";
+import React52, { memo as memo33, useCallback as useCallback27 } from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
@@ -6875,7 +6905,7 @@ var DimensionInput = memo33(function DimensionInput2({
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React51.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React52.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ React52.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : round(value, 2),
@@ -6884,7 +6914,7 @@ var DimensionInput = memo33(function DimensionInput2({
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ React51.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ React52.createElement(InputField.Label, null, label));
 });
 export {
   ActivityIndicator,