@noya-app/noya-designsystem 0.1.21 → 0.1.23

package/dist/index.mjs

@@ -59,7 +59,7 @@ function mergeBreakpoints(breakpoints, transform) {
   ) : breakpoints;
   const breakpointList = Object.entries(breakpointMap);
   const transformedList = breakpointList.sort((a, b) => Number(b[0]) - Number(a[0])).map(([width, value]) => [
-    `@media screen and (max-width: ${width}px)`,
+    `@media (min-width: ${width}px)`,
     transform?.(value) ?? value
   ]);
   return Object.fromEntries(transformedList);
@@ -89,7 +89,17 @@ var Element = styled2.div(({ $styleProps, $breakpoints }) => ({
   ...$styleProps,
   ...mergeBreakpoints($breakpoints || [])
 }));
-var StackBase = forwardRef(function StackBase2({ id, as, children, separator, breakpoints, tabIndex, href, ...rest }, forwardedRef) {
+var StackBase = forwardRef(function StackBase2({
+  id,
+  className,
+  as,
+  children,
+  separator,
+  breakpoints,
+  tabIndex,
+  href,
+  ...rest
+}, forwardedRef) {
   const elements2 = separator ? withSeparatorElements(Children2.toArray(children), separator) : children;
   const styleProps = {
     display: "flex",
@@ -102,6 +112,7 @@ var StackBase = forwardRef(function StackBase2({ id, as, children, separator, br
     {
       ref: forwardedRef,
       id,
+      className,
       as,
       $styleProps: styleProps,
       $breakpoints: breakpoints,
@@ -254,9 +265,9 @@ var ButtonElement = styled5.button(
     textAlign: "left",
     borderRadius: "4px",
     paddingTop: $variant === "none" ? "0px" : "4px",
-    paddingRight: $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+    paddingRight: $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "6px",
     paddingBottom: $variant === "none" ? "0px" : "4px",
-    paddingLeft: $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+    paddingLeft: $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "6px",
     ...$size === "large" && {
       paddingTop: "12px",
       paddingRight: "16px",
@@ -386,7 +397,7 @@ var Button = forwardRef3(function Button2({
 
 // src/components/Chip.tsx
 import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
-import React22, { memo as memo11 } from "react";
+import React22, { forwardRef as forwardRef10, memo as memo11 } from "react";
 import styled14 from "styled-components";
 
 // src/contexts/DesignSystemConfiguration.tsx
@@ -397,7 +408,7 @@ import React20, {
   useContext as useContext5,
   useEffect as useEffect11,
   useMemo as useMemo9,
-  useState as useState13
+  useState as useState14
 } from "react";
 import { ThemeProvider, useTheme as useTheme2 } from "styled-components";
 
@@ -698,7 +709,8 @@ var textStyles = {
     fontFamily: fonts.normal,
     fontSize: "0.62rem",
     fontWeight: 400,
-    lineHeight: "1.4",
+    lineHeight: "19px",
+    // lineHeight: "1.4",
     textTransform: "uppercase",
     letterSpacing: "-0.3px"
   }
@@ -775,7 +787,7 @@ import React18, {
   useContext as useContext3,
   useMemo as useMemo7,
   useRef as useRef11,
-  useState as useState11
+  useState as useState12
 } from "react";
 import styled13 from "styled-components";
 
@@ -1225,7 +1237,8 @@ import React17, {
   useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo6,
-  useRef as useRef10
+  useRef as useRef10,
+  useState as useState11
 } from "react";
 import styled12 from "styled-components";
 
@@ -1790,13 +1803,7 @@ function Popover({
       onFocusOutside,
       onPointerDownOutside,
       collisionPadding: 8,
-      arrowPadding: 2,
-      onPointerDown: (event) => {
-        event.stopPropagation();
-      },
-      onWheel: (event) => {
-        event.stopPropagation();
-      }
+      arrowPadding: 2
     },
     children,
     showArrow && /* @__PURE__ */ React16.createElement(ArrowElement, null),
@@ -2057,9 +2064,10 @@ function parseNumber(value) {
   return value ? Number(value) : NaN;
 }
 function InputFieldNumberInput(props) {
-  const { value, placeholder, onNudge, ...rest } = props;
+  const { value, placeholder, onNudge, onBlur, ...rest } = props;
   const onSubmit = "onSubmit" in props ? props.onSubmit : void 0;
   const onChange = "onChange" in props ? props.onChange : void 0;
+  const [internalValue, setInternalValue] = useState11();
   const handleSubmit = useCallback11(
     (value2) => {
       const newValue = parseNumber(value2);
@@ -2075,6 +2083,7 @@ function InputFieldNumberInput(props) {
       if (!amount)
         return;
       onNudge?.(amount);
+      setInternalValue(void 0);
       event.preventDefault();
       event.stopPropagation();
     },
@@ -2082,17 +2091,37 @@ function InputFieldNumberInput(props) {
   );
   const handleChange = useCallback11(
     (value2) => {
-      onChange?.(parseNumber(value2));
+      if (value2 === "" || value2 === "-" || value2 === ".") {
+        setInternalValue(value2);
+        return;
+      }
+      if (value2.endsWith(".")) {
+        setInternalValue(value2);
+        return;
+      }
+      setInternalValue(void 0);
+      const newValue = parseNumber(value2);
+      if (!isNaN(newValue)) {
+        onChange?.(newValue);
+      }
     },
     [onChange]
   );
+  const handleBlur = useCallback11(
+    (event) => {
+      setInternalValue(void 0);
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
   return /* @__PURE__ */ React17.createElement(
     InputFieldInput,
     {
       ...rest,
-      value: value === void 0 ? "" : String(value),
+      value: internalValue !== void 0 ? String(internalValue) : value === void 0 ? "" : String(value),
       placeholder,
       onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
       ..."onChange" in props ? { onChange: handleChange } : { onSubmit: handleSubmit }
     }
   );
@@ -2115,7 +2144,9 @@ function InputFieldRoot({
   labelSize,
   size: size2 = "medium",
   renderPopoverContent,
-  onFocusChange
+  onFocusChange,
+  style: style3,
+  className
 }) {
   const childrenArray = Children3.toArray(children);
   const hasDropdown = childrenArray.some(
@@ -2167,7 +2198,17 @@ function InputFieldRoot({
       inputRef
     ]
   );
-  const rootElement = /* @__PURE__ */ React17.createElement(RootContainer, { id, $width: width, $flex: flex }, children);
+  const rootElement = /* @__PURE__ */ React17.createElement(
+    RootContainer,
+    {
+      id,
+      $width: width,
+      $flex: flex,
+      style: style3,
+      className
+    },
+    children
+  );
   return /* @__PURE__ */ React17.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React17.createElement(
     Popover,
     {
@@ -2220,7 +2261,7 @@ var DialogContext = createContext3(void 0);
 var DialogProvider = function DialogProvider2({
   children
 }) {
-  const [contents, setContents] = useState11();
+  const [contents, setContents] = useState12();
   const isOpen = !!contents;
   const close = useCallback12(() => {
     if (!contents)
@@ -2331,14 +2372,14 @@ 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 useState12 } from "react";
+import React19, { 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);
 var FloatingWindowProvider = ({
   children
 }) => {
-  const [windows, setWindows] = useState12({});
+  const [windows, setWindows] = useState13({});
   const contextValue = useMemo8(() => {
     const createWindow = (element) => {
       const id = uuid();
@@ -2406,7 +2447,7 @@ var DesignSystemConfigurationProvider = memo10(
     theme,
     platform
   }) {
-    const [internalPlatform, setInternalPlatform] = useState13(
+    const [internalPlatform, setInternalPlatform] = useState14(
       platform ?? "key"
     );
     useEffect11(() => {
@@ -2609,76 +2650,78 @@ var AddElement = styled14(PlusIcon).withConfig({
     opacity: 0.85
   }
 }));
-var Chip = memo11(function Chip2({
-  colorScheme,
-  children,
-  deletable,
-  addable,
-  style: style3,
-  size: size2 = "medium",
-  variant = "solid",
-  monospace = false,
-  tabIndex,
-  onDelete,
-  onClick,
-  onAdd,
-  onHoverDeleteChange
-}) {
-  const theme = useDesignSystemTheme();
-  const { hoverProps: hoverDeleteProps } = useHover({
-    onHoverChange: onHoverDeleteChange
-  });
-  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(
-    ChipElement,
-    {
-      $variant: variant,
-      $colorScheme: colorScheme,
-      style: style3,
-      onClick: handleClick,
-      $size: size2,
-      $monospace: monospace,
-      $isInteractive: !!handleClick,
-      tabIndex
-    },
-    addable && /* @__PURE__ */ React22.createElement(
-      AddElement,
-      {
-        size: size2,
-        isOnlyChild: !children && !deletable,
-        onClick: onAdd ? (event) => {
-          event.stopPropagation();
-          onAdd?.();
-        } : void 0,
-        color
-      }
-    ),
+var Chip = memo11(
+  forwardRef10(function Chip2({
+    colorScheme,
     children,
-    deletable && /* @__PURE__ */ React22.createElement(
-      DeleteElement,
+    deletable,
+    addable,
+    clickable,
+    style: style3,
+    size: size2 = "medium",
+    variant = "solid",
+    monospace = false,
+    tabIndex,
+    onDelete,
+    onClick,
+    onAdd,
+    onHoverDeleteChange,
+    ...rest
+  }, forwardedRef) {
+    const theme = useDesignSystemTheme();
+    const { hoverProps: hoverDeleteProps } = useHover({
+      onHoverChange: onHoverDeleteChange
+    });
+    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(
+      ChipElement,
       {
-        size: size2,
-        ...hoverDeleteProps,
-        onClick: onDelete ? (event) => {
-          event.stopPropagation();
-          onDelete?.();
-        } : void 0,
-        color
-      }
-    )
-  );
-});
+        ref: forwardedRef,
+        $variant: variant,
+        $colorScheme: colorScheme,
+        style: style3,
+        onClick: handleClick,
+        $size: size2,
+        $monospace: monospace,
+        $isInteractive: !!handleClick || clickable === true,
+        tabIndex,
+        ...rest
+      },
+      addable && /* @__PURE__ */ React22.createElement(
+        AddElement,
+        {
+          size: size2,
+          isOnlyChild: !children && !deletable,
+          onClick: onAdd ? (event) => {
+            event.stopPropagation();
+            onAdd?.();
+          } : void 0,
+          color
+        }
+      ),
+      children,
+      deletable && /* @__PURE__ */ React22.createElement(
+        DeleteElement,
+        {
+          size: size2,
+          ...hoverDeleteProps,
+          onClick: onDelete ? (event) => {
+            event.stopPropagation();
+            onDelete?.();
+          } : void 0,
+          color
+        }
+      )
+    );
+  })
+);
 
 // src/components/ContextMenu.tsx
 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 React23, { memo as memo12, useCallback as useCallback13, useMemo as useMemo11 } from "react";
 import styled15 from "styled-components";
 var SeparatorElement2 = styled15(RadixContextMenu.Separator)(
   styles.separatorStyle
@@ -2826,7 +2869,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 useState15 } from "react";
+import React25, { memo as memo14, useCallback as useCallback14, useState as useState16 } from "react";
 import styled17 from "styled-components";
 var DotButtonElement = styled17.div(({ theme }) => ({
   cursor: "pointer",
@@ -2852,7 +2895,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
   isVisible = true
 }) {
   const color = useDesignSystemTheme().colors.icon;
-  const [open, setOpen] = useState15(false);
+  const [open, setOpen] = useState16(false);
   const [downPosition, setDownPosition] = React25.useState(null);
   const handlePointerDownCapture = useCallback14(
     (event) => {
@@ -2925,7 +2968,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
 });
 
 // src/components/FillInputField.tsx
-import React28, { forwardRef as forwardRef10, memo as memo17 } from "react";
+import React28, { forwardRef as forwardRef11, memo as memo17 } from "react";
 import styled19 from "styled-components";
 
 // ../noya-file-format/src/types.ts
@@ -3453,13 +3496,13 @@ var Container = styled19.button(
   })
 );
 var FillInputField = memo17(
-  forwardRef10(function FillInputField2({ id, value, flex, ...rest }, ref) {
+  forwardRef11(function FillInputField2({ id, value, flex, ...rest }, ref) {
     return /* @__PURE__ */ React28.createElement(Container, { ref, id, $flex: flex, ...rest }, /* @__PURE__ */ React28.createElement(FillPreviewBackground, { value }));
   })
 );
 
 // src/components/FloatingWindow.tsx
-import React29, { useCallback as useCallback15, useRef as useRef13, useState as useState16 } from "react";
+import React29, { useCallback as useCallback15, useRef as useRef13, useState as useState17 } from "react";
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -3577,15 +3620,15 @@ var FloatingWindow = ({
   toolbarContent,
   renderToolbar = defaultRenderToolbar
 }) => {
-  const [position, setPosition] = useState16({ x: initialX, y: initialY });
-  const [size2, setSize] = useState16({
+  const [position, setPosition] = useState17({ x: initialX, y: initialY });
+  const [size2, setSize] = useState17({
     width: initialWidth,
     height: initialHeight
   });
-  const [isDragging, setIsDragging] = useState16(false);
-  const [isResizing, setIsResizing] = useState16(false);
-  const [dragOffset, setDragOffset] = useState16({ x: 0, y: 0 });
-  const [resizeDirection, setResizeDirection] = useState16(null);
+  const [isDragging, setIsDragging] = useState17(false);
+  const [isResizing, setIsResizing] = useState17(false);
+  const [dragOffset, setDragOffset] = useState17({ x: 0, y: 0 });
+  const [resizeDirection, setResizeDirection] = useState17(null);
   const wrapperRef = useRef13(null);
   const toggleGlobalTextSelection = (disable) => {
     if (disable) {
@@ -3830,7 +3873,7 @@ var Grid = styled20.div((props) => ({
 // src/components/GridView.tsx
 import React32, {
   createContext as createContext7,
-  forwardRef as forwardRef11,
+  forwardRef as forwardRef12,
   memo as memo20,
   useCallback as useCallback18,
   useContext as useContext7,
@@ -3840,7 +3883,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 useState17 } from "react";
+import React31, { 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)({
@@ -3869,7 +3912,7 @@ var Container2 = styled21.div({
   minHeight: 0
 });
 var ScrollArea = memo19(function ScrollArea2({ children }) {
-  const [scrollElementRef, setScrollElementRef] = useState17(null);
+  const [scrollElementRef, setScrollElementRef] = useState18(null);
   return /* @__PURE__ */ React31.createElement(Container2, null, /* @__PURE__ */ React31.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React31.createElement(
     StyledViewport,
     {
@@ -4059,7 +4102,7 @@ var Shimmer = styled22.div`
   align-items: end;
   padding: 4px;
 `;
-var GridViewItem = forwardRef11(function GridViewItem2({
+var GridViewItem = forwardRef12(function GridViewItem2({
   id,
   title,
   subtitle,
@@ -4204,7 +4247,7 @@ var GridView;
 // src/components/InputFieldWithCompletions.tsx
 import { chunkBy, partition } from "@noya-app/noya-utils";
 import React36, {
-  forwardRef as forwardRef14,
+  forwardRef as forwardRef15,
   memo as memo23,
   useCallback as useCallback21,
   useEffect as useEffect14,
@@ -4212,7 +4255,7 @@ import React36, {
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo19,
   useRef as useRef16,
-  useState as useState19
+  useState as useState20
 } from "react";
 import styled25 from "styled-components";
 
@@ -4293,7 +4336,7 @@ import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
 import React34, {
   Children as Children4,
   createContext as createContext9,
-  forwardRef as forwardRef12,
+  forwardRef as forwardRef13,
   isValidElement as isValidElement3,
   memo as memo22,
   useCallback as useCallback20,
@@ -4352,7 +4395,7 @@ import React33, {
   useEffect as useEffect13,
   useMemo as useMemo17,
   useRef as useRef14,
-  useState as useState18
+  useState as useState19
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 var normalizeListDestinationIndex = (index, position) => {
@@ -4440,12 +4483,12 @@ function SortableRoot({
       }
     })
   );
-  const [activeIndex, setActiveIndex] = useState18();
+  const [activeIndex, setActiveIndex] = useState19();
   const activatorEvent = useRef14(null);
   const setActivatorEvent = useCallback19((event) => {
     activatorEvent.current = event;
   }, []);
-  const [position, setPosition] = useState18({ x: 0, y: 0 });
+  const [position, setPosition] = useState19({ x: 0, y: 0 });
   const handleDragStart = useCallback19(
     (event) => {
       setActiveIndex(keys.indexOf(event.active.id));
@@ -4482,7 +4525,7 @@ function SortableRoot({
     },
     [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
   );
-  const [mounted, setMounted] = useState18(false);
+  const [mounted, setMounted] = useState19(false);
   useEffect13(() => {
     setMounted(true);
   }, []);
@@ -4691,7 +4734,7 @@ var ListViewDragIndicatorElement = styled23.div(({ theme, $relativeDropPosition,
     boxShadow: "0 0 2px rgba(0,0,0,0.5)"
   }
 }));
-var ListViewRow = forwardRef12(function ListViewRow2({
+var ListViewRow = forwardRef13(function ListViewRow2({
   id,
   tabIndex = 0,
   gap,
@@ -4711,7 +4754,8 @@ var ListViewRow = forwardRef12(function ListViewRow2({
   onSelectMenuItem,
   onMenuOpenChange,
   onKeyDown,
-  style: style3
+  style: style3,
+  dragIndicatorStyle
 }, forwardedRef) {
   depth = Math.max(0, depth);
   const {
@@ -4795,7 +4839,12 @@ var ListViewRow = forwardRef12(function ListViewRow2({
           $colorScheme: colorScheme,
           $relativeDropPosition: relativeDropPosition,
           $offsetLeft: 33 + depth * indentation,
-          $gap: listGap
+          $gap: listGap + (divider ? 1 : 0),
+          style: typeof dragIndicatorStyle === "function" ? dragIndicatorStyle({
+            depth,
+            indentation,
+            position: relativeDropPosition
+          }) : dragIndicatorStyle
         }
       ),
       depth > 0 && /* @__PURE__ */ React34.createElement(Spacer.Horizontal, { size: depth * indentation }),
@@ -4832,7 +4881,7 @@ var VirtualizedListRow = memo22(function VirtualizedListRow2({
   const renderItem = useContext9(RenderItemContext);
   return /* @__PURE__ */ React34.createElement("div", { key: index, style: style3 }, renderItem(index));
 });
-var VirtualizedListInner = forwardRef12(function VirtualizedListInner2({
+var VirtualizedListInner = forwardRef13(function VirtualizedListInner2({
   size: size2,
   scrollElement,
   items,
@@ -4913,7 +4962,10 @@ var RootContainer2 = styled23.div(({ theme, $scrollable, $gap }) => ({
   color: theme.colors.textMuted,
   gap: $gap
 }));
-var ListViewRootInner = forwardRef12(function ListViewRootInner2({
+var ListViewRootInner = forwardRef13(function ListViewRootInner2({
+  id,
+  className,
+  style: style3,
   onPress,
   scrollable = false,
   expandable = true,
@@ -5053,6 +5105,9 @@ var ListViewRootInner = forwardRef12(function ListViewRootInner2({
   return /* @__PURE__ */ React34.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React34.createElement(
     RootContainer2,
     {
+      id,
+      className,
+      style: style3,
       ...{
         [pressEventName]: handleClick
       },
@@ -5078,7 +5133,7 @@ var ListViewRootInner = forwardRef12(function ListViewRootInner2({
   ));
 });
 var ListViewRoot = memo22(ListViewRootInner);
-var ChildrenListViewInner = forwardRef12(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
+var ChildrenListViewInner = forwardRef13(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
   const items = useMemo18(
     () => Children4.toArray(children).flatMap(
       (child) => isValidElement3(child) ? [child] : []
@@ -5100,7 +5155,7 @@ var ChildrenListViewInner = forwardRef12(function ChildrenListViewInner2({ child
   );
 });
 var ChildrenListView = memo22(ChildrenListViewInner);
-var SimpleListViewInner = forwardRef12(function SimpleListViewInner2(props, forwardedRef) {
+var SimpleListViewInner = forwardRef13(function SimpleListViewInner2(props, forwardedRef) {
   if ("children" in props) {
     return /* @__PURE__ */ React34.createElement(ChildrenListView, { ref: forwardedRef, ...props });
   } else {
@@ -5125,7 +5180,7 @@ var ListView;
 })(ListView || (ListView = {}));
 
 // src/components/Text.tsx
-import React35, { forwardRef as forwardRef13 } from "react";
+import React35, { forwardRef as forwardRef14 } from "react";
 import styled24 from "styled-components";
 var elements = {
   title: "h1",
@@ -5147,7 +5202,7 @@ var StyledElement = styled24.span(({ theme, $variant, $styleProps, $breakpoints,
   ...$styleProps,
   ...mergeBreakpoints($breakpoints || [])
 }));
-var Text = forwardRef13(function Text2({
+var Text = forwardRef14(function Text2({
   as,
   variant,
   breakpoints,
@@ -5155,7 +5210,9 @@ var Text = forwardRef13(function Text2({
   className,
   color,
   href,
+  tabIndex,
   onClick,
+  onKeyDown,
   ...rest
 }, forwardedRef) {
   const element = as ?? elements[variant] ?? "span";
@@ -5165,35 +5222,37 @@ var Text = forwardRef13(function Text2({
       ref: forwardedRef,
       as: element,
       className,
+      tabIndex,
       $variant: variant,
       $breakpoints: breakpoints,
       $styleProps: rest,
       $color: color,
       onClick,
+      onKeyDown,
       ...href && { href }
     },
     children
   );
 });
-var Heading1 = forwardRef13(
+var Heading1 = forwardRef14(
   (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading1" })
 );
-var Heading2 = forwardRef13(
+var Heading2 = forwardRef14(
   (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading2" })
 );
-var Heading3 = forwardRef13(
+var Heading3 = forwardRef14(
   (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading3" })
 );
-var Heading4 = forwardRef13(
+var Heading4 = forwardRef14(
   (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading4" })
 );
-var Heading5 = forwardRef13(
+var Heading5 = forwardRef14(
   (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "heading5" })
 );
-var Body = forwardRef13(
+var Body = forwardRef14(
   (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "body" })
 );
-var Small = forwardRef13(
+var Small = forwardRef14(
   (props, ref) => /* @__PURE__ */ React35.createElement(Text, { ref, ...props, variant: "small" })
 );
 var Italic = ({ children }) => /* @__PURE__ */ React35.createElement(
@@ -5239,7 +5298,7 @@ var CompletionToken = styled25.span(
   })
 );
 var CompletionMenu = memo23(
-  forwardRef14(function CompletionMenu2({
+  forwardRef15(function CompletionMenu2({
     items,
     selectedIndex,
     onSelectItem,
@@ -5285,7 +5344,7 @@ var CompletionMenu = memo23(
   })
 );
 var InputFieldWithCompletions = memo23(
-  forwardRef14(function InputFieldWithCompletions2({
+  forwardRef15(function InputFieldWithCompletions2({
     loading,
     initialValue = "",
     placeholder,
@@ -5304,8 +5363,8 @@ var InputFieldWithCompletions = memo23(
     hideMenuWhenEmptyValue = false
   }, forwardedRef) {
     const ref = useRef16(null);
-    const [isFocused, setIsFocused] = useState19(false);
-    const [state, _setState] = useState19({
+    const [isFocused, setIsFocused] = useState20(false);
+    const [state, _setState] = useState20({
       filter: initialValue,
       selectedIndex: 0
     });
@@ -5559,9 +5618,9 @@ function getNextIndex(items, currentIndex, direction, isDisabled) {
 }
 
 // src/components/InspectorContainer.tsx
-import React37, { forwardRef as forwardRef15, memo as memo24 } from "react";
+import React37, { forwardRef as forwardRef16, memo as memo24 } from "react";
 var InspectorContainer = memo24(
-  forwardRef15(function InspectorContainer2({
+  forwardRef16(function InspectorContainer2({
     header,
     children,
     fallback,
@@ -5797,7 +5856,7 @@ var ProgressIndicator = styled28(ProgressPrimitive.Indicator)(({ theme, variant
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import React41, {
   createContext as createContext10,
-  forwardRef as forwardRef16,
+  forwardRef as forwardRef17,
   memo as memo27,
   useCallback as useCallback22,
   useContext as useContext10,
@@ -5855,7 +5914,7 @@ var StyledItem = styled29(ToggleGroupPrimitive.Item).withConfig({
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors[colorScheme ?? "primary"]}`
   }
 }));
-var ToggleGroupItem = forwardRef16(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
+var ToggleGroupItem = forwardRef17(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
   const { colorScheme } = useContext10(RadioGroupContext);
   const itemElement = /* @__PURE__ */ React41.createElement(
     StyledItem,
@@ -5967,7 +6026,7 @@ var SelectElement = styled30.select(
     borderRadius: "4px",
     paddingTop: "4px",
     paddingBottom: "4px",
-    paddingLeft: "8px",
+    paddingLeft: "6px",
     paddingRight: "23px",
     background: [
       `calc(100% - 6px) / 15px url("data:image/svg+xml;utf8,${createChevronSVGString(
@@ -6041,11 +6100,51 @@ var Select = memo28(function Select2({
   )), label && /* @__PURE__ */ React42.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 { styled as styled31 } from "styled-components";
+var SelectMenu = memo29(function SelectMenu2({
+  id,
+  style: style3,
+  className,
+  menuItems,
+  value,
+  onSelect,
+  placeholder
+}) {
+  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 (typeof menuItem === "string") {
+      return /* @__PURE__ */ React43.createElement(StyledSeparator, null);
+    }
+    const value2 = menuItem.value ?? "";
+    return /* @__PURE__ */ React43.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(
+  ({
+    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));
+  }
+);
+var StyledItem2 = styled31(Select3.Item)(styles.itemStyle);
+var StyledSeparator = styled31(Select3.Separator)(styles.separatorStyle);
+
 // src/components/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import React43, { useCallback as useCallback24, useMemo as useMemo23 } from "react";
-import styled31 from "styled-components";
-var StyledSlider = styled31(RadixSlider.Root)({
+import React44, { useCallback as useCallback24, useMemo as useMemo23 } from "react";
+import styled32 from "styled-components";
+var StyledSlider = styled32(RadixSlider.Root)({
   flex: "1",
   position: "relative",
   display: "flex",
@@ -6054,19 +6153,19 @@ var StyledSlider = styled31(RadixSlider.Root)({
   touchAction: "none",
   height: "16px"
 });
-var StyledTrack = styled31(RadixSlider.Track)(({ theme }) => ({
+var StyledTrack = styled32(RadixSlider.Track)(({ theme }) => ({
   backgroundColor: theme.colors.divider,
   position: "relative",
   flexGrow: 1,
   height: "2px"
 }));
-var StyledRange = styled31(RadixSlider.Range)(({ theme }) => ({
+var StyledRange = styled32(RadixSlider.Range)(({ theme }) => ({
   position: "absolute",
   backgroundColor: theme.colors.primary,
   borderRadius: "9999px",
   height: "100%"
 }));
-var StyledThumb2 = styled31(RadixSlider.Thumb)(({ theme }) => ({
+var StyledThumb2 = styled32(RadixSlider.Thumb)(({ theme }) => ({
   display: "block",
   width: "12px",
   height: "12px",
@@ -6094,7 +6193,7 @@ var Slider = function Slider2({
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(
     StyledSlider,
     {
       min,
@@ -6103,16 +6202,16 @@ var Slider = function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange
     },
-    /* @__PURE__ */ React43.createElement(StyledTrack, null, /* @__PURE__ */ React43.createElement(StyledRange, null)),
-    /* @__PURE__ */ React43.createElement(StyledThumb2, null)
+    /* @__PURE__ */ React44.createElement(StyledTrack, null, /* @__PURE__ */ React44.createElement(StyledRange, null)),
+    /* @__PURE__ */ React44.createElement(StyledThumb2, null)
   );
 };
 
 // src/components/Switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import React44 from "react";
-import styled32 from "styled-components";
-var SwitchRoot = styled32(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
+import React45 from "react";
+import styled33 from "styled-components";
+var SwitchRoot = styled33(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
   all: "unset",
   width: 32,
   height: 19,
@@ -6129,7 +6228,7 @@ var SwitchRoot = styled32(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
     backgroundColor: $colorScheme === "primary" ? theme.colors.primary : $colorScheme === "secondary" ? theme.colors.secondary : void 0
   }
 }));
-var SwitchThumb = styled32(SwitchPrimitive.Thumb)({
+var SwitchThumb = styled33(SwitchPrimitive.Thumb)({
   display: "block",
   width: 15,
   height: 15,
@@ -6145,7 +6244,7 @@ var Switch = function Switch2({
   onChange,
   colorScheme = "normal"
 }) {
-  return /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement(
     SwitchRoot,
     {
       $colorScheme: colorScheme,
@@ -6154,18 +6253,18 @@ var Switch = function Switch2({
         onChange(newValue);
       }
     },
-    /* @__PURE__ */ React44.createElement(SwitchThumb, null)
+    /* @__PURE__ */ React45.createElement(SwitchThumb, null)
   );
 };
 
 // src/components/TreeView.tsx
-import React45, {
-  forwardRef as forwardRef17,
-  memo as memo29,
+import React46, {
+  forwardRef as forwardRef18,
+  memo as memo30,
   useCallback as useCallback25,
   useContext as useContext12
 } from "react";
-var TreeRow = forwardRef17(function TreeRow2({
+var TreeRow = forwardRef18(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
@@ -6180,26 +6279,26 @@ var TreeRow = forwardRef17(function TreeRow2({
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ React45.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React45.createElement(React45.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React45.createElement(
+  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(
     IconButton,
     {
-      iconName: expanded ? "ChevronDownIcon" : "ChevronRightIcon",
+      iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React45.createElement(React45.Fragment, null, icon, /* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ React46.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React46.createElement(React46.Fragment, null, icon, /* @__PURE__ */ React46.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
   TreeView2.Root = ListView.Root;
   TreeView2.RowTitle = ListView.RowTitle;
   TreeView2.EditableRowTitle = ListView.EditableRowTitle;
-  TreeView2.Row = memo29(TreeRow);
+  TreeView2.Row = memo30(TreeRow);
 })(TreeView || (TreeView = {}));
 
 // src/components/WorkspaceLayout.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
-import React47, { forwardRef as forwardRef18, useImperativeHandle as useImperativeHandle4, useRef as useRef20 } from "react";
+import React48, { forwardRef as forwardRef19, useImperativeHandle as useImperativeHandle4, useRef as useRef20 } from "react";
 import {
   Panel,
   PanelGroup,
@@ -6210,9 +6309,9 @@ import {
 import { useLayoutEffect as useLayoutEffect9, useRef as useRef19 } from "react";
 
 // src/hooks/useWindowSize.tsx
-import { useEffect as useEffect16, useState as useState20 } from "react";
+import { useEffect as useEffect16, useState as useState21 } from "react";
 function useWindowSize() {
-  const [size2, setSize] = useState20(
+  const [size2, setSize] = useState21(
     typeof window === "undefined" ? { width: 0, height: 0 } : {
       width: window.innerWidth,
       height: window.innerHeight
@@ -6340,7 +6439,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/WorkspaceLayout.tsx
-var WorkspaceLayout = forwardRef18(function WorkspaceLayout2({
+var WorkspaceLayout = forwardRef19(function WorkspaceLayout2({
   autoSavePrefix,
   leftSidebarContent: leftPanelContent,
   children: centerPanelContent,
@@ -6427,7 +6526,7 @@ var WorkspaceLayout = forwardRef18(function WorkspaceLayout2({
     }
   });
   const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
-  return /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(
     "div",
     {
       id,
@@ -6439,7 +6538,7 @@ var WorkspaceLayout = forwardRef18(function WorkspaceLayout2({
         ...style3
       }
     },
-    /* @__PURE__ */ React47.createElement(
+    /* @__PURE__ */ React48.createElement(
       PanelGroup,
       {
         ref: panelGroupRef,
@@ -6448,7 +6547,7 @@ var WorkspaceLayout = forwardRef18(function WorkspaceLayout2({
         autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
         style: { flex: "1" }
       },
-      hasLeftSidebar && /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
+      hasLeftSidebar && /* @__PURE__ */ React48.createElement(React48.Fragment, null, /* @__PURE__ */ React48.createElement(
         Panel,
         {
           id: LEFT_SIDEBAR_ID,
@@ -6460,11 +6559,12 @@ var WorkspaceLayout = forwardRef18(function WorkspaceLayout2({
           collapsible: true,
           style: {
             display: "flex",
-            flexDirection: "row"
+            flexDirection: "row",
+            position: "relative"
           }
         },
         leftPanelContent
-      ), /* @__PURE__ */ React47.createElement(
+      ), /* @__PURE__ */ React48.createElement(
         PanelResizeHandle,
         {
           style: {
@@ -6475,7 +6575,7 @@ var WorkspaceLayout = forwardRef18(function WorkspaceLayout2({
           }
         }
       )),
-      /* @__PURE__ */ React47.createElement(
+      /* @__PURE__ */ React48.createElement(
         Panel,
         {
           id: CONTENT_AREA_ID,
@@ -6484,12 +6584,13 @@ var WorkspaceLayout = forwardRef18(function WorkspaceLayout2({
           minSize: 10,
           style: {
             display: "flex",
-            flexDirection: "row"
+            flexDirection: "row",
+            position: "relative"
           }
         },
         centerPanelContent
       ),
-      hasRightSidebar && /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
+      hasRightSidebar && /* @__PURE__ */ React48.createElement(React48.Fragment, null, /* @__PURE__ */ React48.createElement(
         PanelResizeHandle,
         {
           style: {
@@ -6499,7 +6600,7 @@ var WorkspaceLayout = forwardRef18(function WorkspaceLayout2({
             backgroundColor: theme.colors.divider
           }
         }
-      ), /* @__PURE__ */ React47.createElement(
+      ), /* @__PURE__ */ React48.createElement(
         Panel,
         {
           id: RIGHT_SIDEBAR_ID,
@@ -6510,7 +6611,8 @@ var WorkspaceLayout = forwardRef18(function WorkspaceLayout2({
           collapsible: true,
           style: {
             display: "flex",
-            flexDirection: "row"
+            flexDirection: "row",
+            position: "relative"
           }
         },
         rightPanelContent
@@ -6561,8 +6663,8 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/ArrayController.tsx
 import { range as range2 } from "@noya-app/noya-utils";
-import React49, { memo as memo31, useCallback as useCallback26, useMemo as useMemo24 } from "react";
-import styled34, { useTheme as useTheme5 } from "styled-components";
+import React50, { memo as memo32, useCallback as useCallback26, useMemo as useMemo24 } from "react";
+import styled35, { useTheme as useTheme5 } from "styled-components";
 
 // src/components/InspectorPrimitives.tsx
 var InspectorPrimitives_exports = {};
@@ -6580,20 +6682,20 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-import React48, { memo as memo30 } from "react";
-import styled33, { useTheme as useTheme4 } from "styled-components";
-var Section = styled33.div(({ theme, $padding = "10px", $gap }) => ({
+import React49, { 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",
   display: "flex",
   flexDirection: "column",
   padding: $padding,
   gap: $gap
 }));
-var SectionHeader = styled33.div(({ theme }) => ({
+var SectionHeader = styled34.div(({ theme }) => ({
   display: "flex",
   alignItems: "center"
 }));
-var Title3 = styled33.div(({ theme, $textStyle }) => ({
+var Title3 = styled34.div(({ theme, $textStyle }) => ({
   display: "flex",
   flexDirection: "row",
   userSelect: "none",
@@ -6606,7 +6708,7 @@ var Title3 = styled33.div(({ theme, $textStyle }) => ({
     fontWeight: "bold"
   }
 }));
-var Row2 = styled33.div(
+var Row2 = styled34.div(
   ({ theme, $gap }) => ({
     flex: "1",
     display: "flex",
@@ -6615,26 +6717,26 @@ var Row2 = styled33.div(
     gap: $gap
   })
 );
-var Column = styled33.div(({ theme }) => ({
+var Column = styled34.div(({ theme }) => ({
   flex: "1",
   display: "flex",
   flexDirection: "column",
   gap: "4px"
 }));
-var Checkbox = styled33.input(({ theme }) => ({
+var Checkbox = styled34.input(({ theme }) => ({
   margin: 0
 }));
-var Text3 = styled33.span(({ theme }) => ({
+var Text3 = styled34.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ React48.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ React48.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
-var SliderRowLabel = styled33.span(({ theme }) => ({
+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 SliderRowLabel = styled34.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
   marginBottom: "-6px"
 }));
-var RowLabel = styled33.span(({ theme, $textStyle }) => ({
+var RowLabel = styled34.span(({ theme, $textStyle }) => ({
   // marginBottom: '6px',
   display: "flex",
   ...$textStyle ? {
@@ -6648,7 +6750,7 @@ var RowLabel = styled33.span(({ theme, $textStyle }) => ({
   // Button height
   alignItems: "center"
 }));
-var LabeledRow = memo30(function LabeledRow2({
+var LabeledRow = memo31(function LabeledRow2({
   id,
   children,
   label,
@@ -6656,26 +6758,26 @@ var LabeledRow = memo30(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ React48.createElement(Row2, { id }, /* @__PURE__ */ React48.createElement(Column, null, /* @__PURE__ */ React48.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React48.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React48.createElement(Row2, { $gap: gap }, children)));
+  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)));
 });
-var LabeledSliderRow = memo30(function LabeledRow3({
+var LabeledSliderRow = memo31(function LabeledRow3({
   children,
   label
 }) {
-  return /* @__PURE__ */ React48.createElement(Row2, null, /* @__PURE__ */ React48.createElement(Column, null, /* @__PURE__ */ React48.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React48.createElement(Row2, null, children)));
+  return /* @__PURE__ */ React49.createElement(Row2, null, /* @__PURE__ */ React49.createElement(Column, null, /* @__PURE__ */ React49.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React49.createElement(Row2, null, children)));
 });
 
 // src/components/ArrayController.tsx
-var ElementRow = styled34.div({
+var ElementRow = styled35.div({
   flex: "0 0 auto",
   display: "flex",
   flexDirection: "row",
   alignItems: "center"
 });
-var ItemContainer2 = styled34.div({
+var ItemContainer2 = styled35.div({
   position: "relative"
 });
-var ArrayController = memo31(function ArrayController2({
+var ArrayController = memo32(function ArrayController2({
   id,
   items,
   title,
@@ -6715,11 +6817,11 @@ var ArrayController = memo31(function ArrayController2({
     [onMoveItem, reversed]
   );
   const renderRow = (index) => {
-    return /* @__PURE__ */ React49.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
+    return /* @__PURE__ */ React50.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
   };
-  return /* @__PURE__ */ React49.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ React49.createElement(SectionHeader, null, /* @__PURE__ */ React49.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ React49.createElement(Title3, null, title)), /* @__PURE__ */ React49.createElement(Spacer.Horizontal, null), withSeparatorElements(
+  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(
     [
-      onClickTrash && /* @__PURE__ */ React49.createElement(
+      onClickTrash && /* @__PURE__ */ React50.createElement(
         IconButton,
         {
           id: `${id}-trash`,
@@ -6728,7 +6830,7 @@ var ArrayController = memo31(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ React49.createElement(
+      onClickExpand && /* @__PURE__ */ React50.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -6737,7 +6839,7 @@ var ArrayController = memo31(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ React49.createElement(
+      onClickPlus && /* @__PURE__ */ React50.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -6747,15 +6849,15 @@ var ArrayController = memo31(function ArrayController2({
         }
       )
     ],
-    /* @__PURE__ */ React49.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ React49.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ React49.createElement(
+    /* @__PURE__ */ React50.createElement(Spacer.Horizontal, { size: 8 })
+  )), /* @__PURE__ */ React50.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ React50.createElement(
     Sortable.Root,
     {
       keys,
       renderOverlay: renderRow,
       onMoveItem: handleMoveItem
     },
-    indexes.map((index) => /* @__PURE__ */ React49.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ React49.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ React49.createElement(
+    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(
       ListView.DragIndicator,
       {
         $gap: 0,
@@ -6769,11 +6871,11 @@ var ArrayController = memo31(function ArrayController2({
 
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import React50, { memo as memo32, useCallback as useCallback27 } from "react";
+import React51, { memo as memo33, useCallback as useCallback27 } from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = memo32(function DimensionInput2({
+var DimensionInput = memo33(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -6791,7 +6893,7 @@ var DimensionInput = memo32(function DimensionInput2({
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React50.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React51.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ React51.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : round(value, 2),
@@ -6800,7 +6902,7 @@ var DimensionInput = memo32(function DimensionInput2({
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ React50.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ React51.createElement(InputField.Label, null, label));
 });
 export {
   ActivityIndicator,
@@ -6859,6 +6961,7 @@ export {
   SUPPORTED_IMAGE_UPLOAD_TYPES,
   ScrollArea,
   Select,
+  SelectMenu,
   SelectOption,
   Slider,
   Small,