@noya-app/noya-designsystem 0.1.23 → 0.1.25

package/dist/index.mjs

@@ -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,
@@ -2155,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);
@@ -2165,7 +2177,7 @@ function InputFieldRoot({
     },
     [onFocusChange]
   );
-  const [inputRef, setInputRef] = React17.useState();
+  const [inputRef, setInputRef] = React18.useState();
   useEffect10(() => {
     if (inputRef && typeof inputRef !== "function") {
       setMeasuredWidth?.(
@@ -2198,7 +2210,7 @@ function InputFieldRoot({
       inputRef
     ]
   );
-  const rootElement = /* @__PURE__ */ React17.createElement(
+  const rootElement = /* @__PURE__ */ React18.createElement(
     RootContainer,
     {
       id,
@@ -2209,7 +2221,7 @@ function InputFieldRoot({
     },
     children
   );
-  return /* @__PURE__ */ React17.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React18.createElement(
     Popover,
     {
       open: true,
@@ -2225,9 +2237,38 @@ 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 PrimitiveInputField = styled12.input(({ theme, readOnly, disabled }) => {
+  return {
+    // placeholder
+    "&::placeholder": {
+      color: theme.colors.textDisabled
+    },
+    ...theme.textStyles.small,
+    color: readOnly ? theme.colors.textMuted : disabled ? theme.colors.textDisabled : theme.colors.text,
+    width: "0px",
+    // Reset intrinsic width
+    flex: "1 1 0px",
+    position: "relative",
+    border: "0",
+    outline: "none",
+    minWidth: "0",
+    alignSelf: "stretch",
+    borderRadius: "4px",
+    paddingTop: "4px",
+    paddingBottom: "4px",
+    paddingLeft: "6px",
+    paddingRight: "6px",
+    background: theme.colors.inputBackground,
+    "&:focus": {
+      boxShadow: `0 0 0 2px ${theme.colors.primary}`
+    },
+    userSelect: "all",
+    pointerEvents: "all"
+  };
+});
 var InputField;
 ((InputField2) => {
   InputField2.Root = memo9(InputFieldRoot);
@@ -2237,6 +2278,7 @@ var InputField;
   InputField2.DropdownMenu = InputFieldDropdownMenu;
   InputField2.Button = InputFieldButton;
   InputField2.Label = InputFieldLabel;
+  InputField2.PrimitiveElement = PrimitiveInputField;
 })(InputField || (InputField = {}));
 
 // src/contexts/DialogContext.tsx
@@ -2306,7 +2348,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(
@@ -2315,7 +2357,7 @@ var DialogProvider = function DialogProvider2({
       )
     },
     children
-  ), /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React19.createElement(
     Dialog,
     {
       ref: dialogRef,
@@ -2336,7 +2378,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,
@@ -2352,8 +2394,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() {
@@ -2372,7 +2414,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);
@@ -2385,7 +2427,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;
     };
@@ -2397,7 +2439,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)
   ));
 };
@@ -2430,11 +2472,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);
     }
   }
 );
@@ -2462,7 +2504,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() {
@@ -2473,7 +2515,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() {
@@ -2503,13 +2545,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) {
@@ -2582,9 +2624,12 @@ var ChipElement = styled14.span(({ theme, $colorScheme, $size, $variant, $monosp
     // lineHeight: "1.4",
     lineHeight: "15px",
     whiteSpace: "pre",
-    ...$size === "medium" ? {
+    ...$size === "large" ? {
       fontSize: "11px",
       padding: "4px 8px"
+    } : $size === "medium" ? {
+      fontSize: "10px",
+      padding: "2px 6px"
     } : {
       fontSize: "9px",
       padding: "0px 4px"
@@ -2619,7 +2664,7 @@ var DeleteElement = styled14(Cross1Icon)(({ size: size2 }) => ({
   marginRight: "-2px",
   cursor: "pointer",
   opacity: 0.5,
-  ...size2 === "medium" ? {
+  ...size2 === "large" ? {
     marginLeft: "2px",
     // top: '-1px',
     transform: "scale(0.75)"
@@ -2638,7 +2683,7 @@ var AddElement = styled14(PlusIcon).withConfig({
   marginLeft: "-2px",
   cursor: "pointer",
   opacity: 0.5,
-  ...size2 === "medium" ? {
+  ...size2 === "large" ? {
     marginRight: "2px",
     top: "-1px",
     transform: "scale(0.75)"
@@ -2658,7 +2703,7 @@ var Chip = memo11(
     addable,
     clickable,
     style: style3,
-    size: size2 = "medium",
+    size: size2 = "large",
     variant = "solid",
     monospace = false,
     tabIndex,
@@ -2674,7 +2719,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,
@@ -2688,7 +2733,7 @@ var Chip = memo11(
         tabIndex,
         ...rest
       },
-      addable && /* @__PURE__ */ React22.createElement(
+      addable && /* @__PURE__ */ React23.createElement(
         AddElement,
         {
           size: size2,
@@ -2701,7 +2746,7 @@ var Chip = memo11(
         }
       ),
       children,
-      deletable && /* @__PURE__ */ React22.createElement(
+      deletable && /* @__PURE__ */ React23.createElement(
         DeleteElement,
         {
           size: size2,
@@ -2721,7 +2766,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
@@ -2754,32 +2799,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;
   }
@@ -2808,8 +2853,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,
@@ -2829,7 +2874,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` },
@@ -2841,7 +2886,7 @@ var Divider = memo13(function Divider2({
   overflow,
   ...props
 }) {
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(
     DividerContainer,
     {
       $orientation: "horizontal",
@@ -2856,7 +2901,7 @@ var DividerVertical = memo13(function DividerVertical2({
   overflow,
   ...props
 }) {
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(
     DividerContainer,
     {
       $orientation: "vertical",
@@ -2869,7 +2914,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",
@@ -2896,7 +2941,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) {
@@ -2933,7 +2978,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
     },
     [setOpen]
   );
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     DotButtonElement,
     {
       onPointerDownCapture: handlePointerDownCapture,
@@ -2943,7 +2988,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
         event.preventDefault();
       }
     },
-    items && onSelect ? /* @__PURE__ */ React25.createElement(
+    items && onSelect ? /* @__PURE__ */ React26.createElement(
       DropdownMenu,
       {
         open,
@@ -2952,13 +2997,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"
@@ -2968,7 +3013,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
@@ -3294,11 +3339,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,
@@ -3315,7 +3360,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);
@@ -3405,7 +3450,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) {
@@ -3435,13 +3480,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
@@ -3450,22 +3495,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,
@@ -3497,12 +3542,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",
@@ -3595,7 +3640,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",
@@ -3716,7 +3761,7 @@ var FloatingWindow = ({
     setResizeDirection(null);
     toggleGlobalTextSelection(false);
   }, []);
-  React29.useEffect(() => {
+  React30.useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -3732,7 +3777,7 @@ var FloatingWindow = ({
       onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -3746,7 +3791,7 @@ var FloatingWindow = ({
         backgroundColor: theme.colors.canvas.background
       }
     },
-    /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React30.createElement(
       "div",
       {
         style: {
@@ -3757,9 +3802,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,
@@ -3781,7 +3826,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,
@@ -3816,14 +3861,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,
@@ -3834,12 +3879,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)
   );
 });
 
@@ -3871,7 +3916,7 @@ var Grid = styled20.div((props) => ({
 }));
 
 // src/components/GridView.tsx
-import React32, {
+import React33, {
   createContext as createContext7,
   forwardRef as forwardRef12,
   memo as memo20,
@@ -3883,7 +3928,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)({
@@ -3913,7 +3958,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(
@@ -3922,7 +3967,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
@@ -4118,7 +4163,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);
@@ -4147,7 +4192,7 @@ var GridViewItem = forwardRef12(function GridViewItem2({
     },
     [onPress]
   );
-  let element = /* @__PURE__ */ React32.createElement(
+  let element = /* @__PURE__ */ React33.createElement(
     ItemContainer,
     {
       id,
@@ -4156,7 +4201,7 @@ var GridViewItem = forwardRef12(function GridViewItem2({
       tabIndex: disabled ? void 0 : 0,
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React33.createElement(
       ContentContainer,
       {
         disabled,
@@ -4170,18 +4215,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
     );
@@ -4220,20 +4265,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;
@@ -4246,7 +4291,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,
@@ -4333,7 +4378,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,
@@ -4387,7 +4432,7 @@ import {
   useSortable,
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
-import React33, {
+import React34, {
   createContext as createContext8,
   memo as memo21,
   useCallback as useCallback19,
@@ -4529,7 +4574,7 @@ function SortableRoot({
   useEffect13(() => {
     setMounted(true);
   }, []);
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     SortableItemContext.Provider,
     {
       value: useMemo17(
@@ -4543,7 +4588,7 @@ function SortableRoot({
         [acceptsDrop, axis, keys, position, setActivatorEvent]
       )
     },
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React34.createElement(
       DndContext,
       {
         sensors,
@@ -4552,9 +4597,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
       )
     )
@@ -4569,9 +4614,10 @@ var Sortable;
 // src/components/ListView.tsx
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = 27;
-var DraggingContext = createContext9({
+var ListViewDraggingContext = createContext9({
   indentation: 12
 });
+ListViewDraggingContext.displayName = "ListViewDraggingContext";
 var ListRowContext = createContext9({
   marginType: "none",
   selectedPosition: "only",
@@ -4585,6 +4631,7 @@ var ListRowContext = createContext9({
   isSectionHeader: false,
   colorScheme: "primary"
 });
+ListRowContext.displayName = "ListRowContext";
 var ListViewRowTitle = styled23.span(({ theme }) => ({
   flex: "1 1 0",
   overflow: "hidden",
@@ -4612,7 +4659,7 @@ function ListViewEditableRowTitle({
       element.select();
     }, 0);
   }, [autoFocus]);
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(
     ListViewEditableRowTitleElement,
     {
       ref: inputRef,
@@ -4772,7 +4819,7 @@ var ListViewRow = forwardRef13(function ListViewRow2({
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { indentation, isDragging } = useContext9(DraggingContext);
+  const { indentation, isDragging } = useContext9(ListViewDraggingContext);
   const handlePress = useCallback20(
     (event) => {
       event.preventDefault();
@@ -4802,7 +4849,7 @@ var ListViewRow = forwardRef13(function ListViewRow2({
     ...renderProps
   }, ref) => {
     const Component = RowContainer;
-    const element = /* @__PURE__ */ React34.createElement(
+    const element = /* @__PURE__ */ React35.createElement(
       Component,
       {
         ref,
@@ -4833,7 +4880,7 @@ var ListViewRow = forwardRef13(function ListViewRow2({
         ),
         tabIndex
       },
-      relativeDropPosition && /* @__PURE__ */ React34.createElement(
+      relativeDropPosition && /* @__PURE__ */ React35.createElement(
         ListViewDragIndicatorElement,
         {
           $colorScheme: colorScheme,
@@ -4847,11 +4894,11 @@ var ListViewRow = forwardRef13(function ListViewRow2({
           }) : 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,
@@ -4864,7 +4911,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)
     ));
@@ -4874,12 +4921,13 @@ var ListViewRow = forwardRef13(function ListViewRow2({
 var RenderItemContext = createContext9(
   () => null
 );
+RenderItemContext.displayName = "RenderItemContext";
 var VirtualizedListRow = memo22(function VirtualizedListRow2({
   index,
   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,
@@ -4910,7 +4958,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,
@@ -4921,7 +4969,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,
@@ -4998,8 +5046,26 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
     (index) => renderItem(data[index], index, { isDragging: false }),
     [data, renderItem]
   );
+  const defaultContextValue = useMemo18(
+    () => ({
+      colorScheme,
+      marginType: "none",
+      selectedPosition: "only",
+      sortable,
+      expandable,
+      divider,
+      pressEventName,
+      variant,
+      gap,
+      sectionHeaderVariant: "normal",
+      isSectionHeader: false
+    }),
+    [colorScheme, sortable, expandable, divider, pressEventName, variant, gap]
+  );
   const getItemContextValue = useCallback20(
     (i) => {
+      if (variant === "bare" || variant === "normal")
+        return defaultContextValue;
       const current = renderChild(i);
       if (!isValidElement3(current))
         return;
@@ -5046,6 +5112,8 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
       };
     },
     [
+      variant,
+      defaultContextValue,
       renderChild,
       data.length,
       colorScheme,
@@ -5053,7 +5121,6 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
       expandable,
       divider,
       pressEventName,
-      variant,
       sectionHeaderVariant,
       gap
     ]
@@ -5063,7 +5130,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(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
   const renderWrappedChild = useCallback20(
@@ -5072,12 +5139,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,
@@ -5087,7 +5154,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);
@@ -5102,7 +5169,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(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React35.createElement(
     RootContainer2,
     {
       id,
@@ -5116,7 +5183,7 @@ var ListViewRootInner = forwardRef13(function ListViewRootInner2({
     },
     withScrollable(
       (scrollElementRef) => withSortable(
-        virtualized ? /* @__PURE__ */ React34.createElement(
+        virtualized ? /* @__PURE__ */ React35.createElement(
           VirtualizedList,
           {
             ref: forwardedRef,
@@ -5140,7 +5207,7 @@ var ChildrenListViewInner = forwardRef13(function ChildrenListViewInner2({ child
     ),
     [children]
   );
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(
     ListViewRoot,
     {
       ref: forwardedRef,
@@ -5157,9 +5224,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);
@@ -5180,7 +5247,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",
@@ -5216,7 +5283,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,
@@ -5235,27 +5302,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: {
@@ -5305,7 +5372,7 @@ var CompletionMenu = memo23(
     onHoverIndex,
     listSize
   }, forwardedRef) {
-    return /* @__PURE__ */ React36.createElement(
+    return /* @__PURE__ */ React37.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -5317,13 +5384,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,
@@ -5335,8 +5402,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)
           );
         }
       }
@@ -5405,7 +5472,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]
@@ -5541,14 +5608,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,
@@ -5558,7 +5625,7 @@ var InputFieldWithCompletions = memo23(
               onHoverIndex: handleIndexChange,
               listSize
             }
-          ) : /* @__PURE__ */ React36.createElement(
+          ) : /* @__PURE__ */ React37.createElement(
             Stack.V,
             {
               height: "100px",
@@ -5566,11 +5633,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,
@@ -5594,9 +5661,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))
     );
   })
 );
@@ -5618,7 +5685,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,
@@ -5630,7 +5697,7 @@ var InspectorContainer = memo24(
     style: style3
   }, forwardedRef) {
     const theme = useDesignSystemTheme();
-    return /* @__PURE__ */ React37.createElement(
+    return /* @__PURE__ */ React38.createElement(
       "div",
       {
         ref: forwardedRef,
@@ -5645,13 +5712,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 }) => ({
@@ -5680,7 +5747,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) => {
@@ -5690,7 +5757,7 @@ var Label;
 
 // src/components/LabeledElementView.tsx
 import * as kiwi from "kiwi.js";
-import React39, {
+import React40, {
   Children as Children5,
   createRef,
   Fragment,
@@ -5735,7 +5802,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,
@@ -5813,13 +5880,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,
@@ -5829,7 +5896,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,
@@ -5854,7 +5921,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,
@@ -5916,7 +5983,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,
@@ -5926,7 +5993,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"
@@ -5948,7 +6015,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,
@@ -5968,7 +6035,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,
@@ -5991,7 +6058,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) => `
@@ -6065,7 +6132,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,
@@ -6084,7 +6151,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,
@@ -6097,14 +6164,18 @@ 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 readOnlyStyle = {
+  justifyContent: "flex-start",
+  textAlign: "left"
+};
 var SelectMenu = memo29(function SelectMenu2({
   id,
   style: style3,
@@ -6112,29 +6183,45 @@ var SelectMenu = memo29(function SelectMenu2({
   menuItems,
   value,
   onSelect,
-  placeholder
+  placeholder,
+  disabled,
+  readOnly
 }) {
   const selectedItem = menuItems.find(
     (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) => {
+  if (readOnly) {
+    return /* @__PURE__ */ React44.createElement(
+      Button,
+      {
+        id,
+        style: style3,
+        contentStyle: readOnlyStyle,
+        className,
+        disabled
+      },
+      icon && /* @__PURE__ */ React44.createElement(React44.Fragment, null, renderIcon(icon), /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: 8 })),
+      selectedItem?.title ?? value
+    );
+  }
+  return /* @__PURE__ */ React44.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ React44.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ React44.createElement(Button, { id, style: style3, className, disabled }, 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);
@@ -6142,7 +6229,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",
@@ -6193,7 +6280,7 @@ var Slider = function Slider2({
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement(
     StyledSlider,
     {
       min,
@@ -6202,14 +6289,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",
@@ -6242,23 +6329,25 @@ var SwitchThumb = styled33(SwitchPrimitive.Thumb)({
 var Switch = function Switch2({
   value,
   onChange,
-  colorScheme = "normal"
+  colorScheme = "normal",
+  disabled
 }) {
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(
     SwitchRoot,
     {
       $colorScheme: colorScheme,
       checked: value,
+      disabled,
       onCheckedChange: (newValue) => {
         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,
@@ -6279,14 +6368,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) => {
@@ -6298,7 +6387,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,
@@ -6526,7 +6615,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,
@@ -6538,7 +6627,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
         ...style3
       }
     },
-    /* @__PURE__ */ React48.createElement(
+    /* @__PURE__ */ React49.createElement(
       PanelGroup,
       {
         ref: panelGroupRef,
@@ -6547,7 +6636,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,
@@ -6564,7 +6653,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
           }
         },
         leftPanelContent
-      ), /* @__PURE__ */ React48.createElement(
+      ), /* @__PURE__ */ React49.createElement(
         PanelResizeHandle,
         {
           style: {
@@ -6575,7 +6664,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
           }
         }
       )),
-      /* @__PURE__ */ React48.createElement(
+      /* @__PURE__ */ React49.createElement(
         Panel,
         {
           id: CONTENT_AREA_ID,
@@ -6590,7 +6679,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: {
@@ -6600,7 +6689,7 @@ var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
             backgroundColor: theme.colors.divider
           }
         }
-      ), /* @__PURE__ */ React48.createElement(
+      ), /* @__PURE__ */ React49.createElement(
         Panel,
         {
           id: RIGHT_SIDEBAR_ID,
@@ -6663,7 +6752,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
@@ -6682,7 +6771,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",
@@ -6729,8 +6818,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,
@@ -6758,13 +6847,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
@@ -6817,11 +6906,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`,
@@ -6830,7 +6919,7 @@ var ArrayController = memo32(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ React50.createElement(
+      onClickExpand && /* @__PURE__ */ React51.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -6839,7 +6928,7 @@ var ArrayController = memo32(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ React50.createElement(
+      onClickPlus && /* @__PURE__ */ React51.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -6849,15 +6938,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,
@@ -6871,7 +6960,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;
 }
@@ -6893,7 +6982,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),
@@ -6902,7 +6991,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,