@noya-app/noya-designsystem 0.1.20 → 0.1.22

package/dist/index.js

@@ -86,6 +86,7 @@ __export(src_exports, {
   SUPPORTED_IMAGE_UPLOAD_TYPES: () => SUPPORTED_IMAGE_UPLOAD_TYPES,
   ScrollArea: () => ScrollArea,
   Select: () => Select,
+  SelectMenu: () => SelectMenu,
   SelectOption: () => SelectOption,
   Slider: () => Slider,
   Small: () => Small,
@@ -182,7 +183,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);
@@ -212,7 +213,17 @@ var Element = import_styled_components2.default.div(({ $styleProps, $breakpoints
   ...$styleProps,
   ...mergeBreakpoints($breakpoints || [])
 }));
-var StackBase = (0, import_react3.forwardRef)(function StackBase2({ id, as, children, separator, breakpoints, tabIndex, href, ...rest }, forwardedRef) {
+var StackBase = (0, import_react3.forwardRef)(function StackBase2({
+  id,
+  className,
+  as,
+  children,
+  separator,
+  breakpoints,
+  tabIndex,
+  href,
+  ...rest
+}, forwardedRef) {
   const elements2 = separator ? withSeparatorElements(import_react3.Children.toArray(children), separator) : children;
   const styleProps = {
     display: "flex",
@@ -225,6 +236,7 @@ var StackBase = (0, import_react3.forwardRef)(function StackBase2({ id, as, chil
     {
       ref: forwardedRef,
       id,
+      className,
       as,
       $styleProps: styleProps,
       $breakpoints: breakpoints,
@@ -788,7 +800,8 @@ var textStyles = {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[6]}rem`,
     fontWeight: 400,
-    lineHeight: "1.4"
+    lineHeight: "19px"
+    // lineHeight: "1.4",
   },
   button: {
     fontFamily: fonts.normal,
@@ -806,7 +819,8 @@ var textStyles = {
     fontFamily: fonts.normal,
     fontSize: "0.62rem",
     fontWeight: 400,
-    lineHeight: "1.4",
+    lineHeight: "19px",
+    // lineHeight: "1.4",
     textTransform: "uppercase",
     letterSpacing: "-0.3px"
   }
@@ -1855,13 +1869,7 @@ function Popover({
       onFocusOutside,
       onPointerDownOutside,
       collisionPadding: 8,
-      arrowPadding: 2,
-      onPointerDown: (event) => {
-        event.stopPropagation();
-      },
-      onWheel: (event) => {
-        event.stopPropagation();
-      }
+      arrowPadding: 2
     },
     children,
     showArrow && /* @__PURE__ */ import_react31.default.createElement(ArrowElement, null),
@@ -2043,7 +2051,11 @@ var InputElement = (0, import_styled_components13.default)(TextInput_default)(({
     // },
   };
 });
-var InputFieldInput = (0, import_react32.forwardRef)(function InputFieldInput2(props, forwardedRef) {
+var InputFieldInput = (0, import_react32.forwardRef)(function InputFieldInput2({
+  textAlign,
+  variant,
+  ...rest
+}, forwardedRef) {
   const {
     labelPosition,
     labelSize,
@@ -2071,8 +2083,10 @@ var InputFieldInput = (0, import_react32.forwardRef)(function InputFieldInput2(p
       $hasLabel: hasLabel,
       $hasDropdown: hasDropdown,
       $size: size2,
+      $variant: variant,
+      $textAlign: textAlign,
       onFocusChange: handleFocusChange,
-      ...props
+      ...rest
     }
   );
 });
@@ -2116,9 +2130,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] = (0, import_react32.useState)();
   const handleSubmit = (0, import_react32.useCallback)(
     (value2) => {
       const newValue = parseNumber(value2);
@@ -2134,6 +2149,7 @@ function InputFieldNumberInput(props) {
       if (!amount)
         return;
       onNudge?.(amount);
+      setInternalValue(void 0);
       event.preventDefault();
       event.stopPropagation();
     },
@@ -2141,17 +2157,37 @@ function InputFieldNumberInput(props) {
   );
   const handleChange = (0, import_react32.useCallback)(
     (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 = (0, import_react32.useCallback)(
+    (event) => {
+      setInternalValue(void 0);
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
   return /* @__PURE__ */ import_react32.default.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 }
     }
   );
@@ -2597,15 +2633,15 @@ var ChipElement = import_styled_components16.default.span(({ theme, $colorScheme
     userSelect: "none",
     display: "inline-flex",
     alignItems: "center",
-    lineHeight: "1.4",
+    // lineHeight: "1.4",
+    lineHeight: "15px",
     whiteSpace: "pre",
     ...$size === "medium" ? {
       fontSize: "11px",
       padding: "4px 8px"
     } : {
       fontSize: "9px",
-      padding: "0px 4px",
-      lineHeight: "15px"
+      padding: "0px 4px"
     },
     ...$monospace && {
       fontFamily: theme.fonts.monospace
@@ -2668,66 +2704,72 @@ var AddElement = (0, import_styled_components16.default)(import_noya_icons3.Plus
     opacity: 0.85
   }
 }));
-var Chip = (0, import_react36.memo)(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__ */ import_react36.default.createElement(
-    ChipElement,
-    {
-      $variant: variant,
-      $colorScheme: colorScheme,
-      style: style3,
-      onClick: handleClick,
-      $size: size2,
-      $monospace: monospace,
-      $isInteractive: !!handleClick,
-      tabIndex
-    },
-    addable && /* @__PURE__ */ import_react36.default.createElement(
-      AddElement,
-      {
-        size: size2,
-        isOnlyChild: !children && !deletable,
-        onClick: onAdd ? (event) => {
-          event.stopPropagation();
-          onAdd?.();
-        } : void 0,
-        color
-      }
-    ),
+var Chip = (0, import_react36.memo)(
+  (0, import_react36.forwardRef)(function Chip2({
+    colorScheme,
     children,
-    deletable && /* @__PURE__ */ import_react36.default.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__ */ import_react36.default.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__ */ import_react36.default.createElement(
+        AddElement,
+        {
+          size: size2,
+          isOnlyChild: !children && !deletable,
+          onClick: onAdd ? (event) => {
+            event.stopPropagation();
+            onAdd?.();
+          } : void 0,
+          color
+        }
+      ),
+      children,
+      deletable && /* @__PURE__ */ import_react36.default.createElement(
+        DeleteElement,
+        {
+          size: size2,
+          ...hoverDeleteProps,
+          onClick: onDelete ? (event) => {
+            event.stopPropagation();
+            onDelete?.();
+          } : void 0,
+          color
+        }
+      )
+    );
+  })
+);
 
 // src/components/ContextMenu.tsx
 var import_noya_icons4 = require("@noya-app/noya-icons");
@@ -4902,6 +4944,9 @@ var RootContainer2 = import_styled_components25.default.div(({ theme, $scrollabl
   gap: $gap
 }));
 var ListViewRootInner = (0, import_react49.forwardRef)(function ListViewRootInner2({
+  id,
+  className,
+  style: style3,
   onPress,
   scrollable = false,
   expandable = true,
@@ -5041,6 +5086,9 @@ var ListViewRootInner = (0, import_react49.forwardRef)(function ListViewRootInne
   return /* @__PURE__ */ import_react49.default.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react49.default.createElement(
     RootContainer2,
     {
+      id,
+      className,
+      style: style3,
       ...{
         [pressEventName]: handleClick
       },
@@ -5143,7 +5191,9 @@ var Text = (0, import_react50.forwardRef)(function Text2({
   className,
   color,
   href,
+  tabIndex,
   onClick,
+  onKeyDown,
   ...rest
 }, forwardedRef) {
   const element = as ?? elements[variant] ?? "span";
@@ -5153,11 +5203,13 @@ var Text = (0, import_react50.forwardRef)(function Text2({
       ref: forwardedRef,
       as: element,
       className,
+      tabIndex,
       $variant: variant,
       $breakpoints: breakpoints,
       $styleProps: rest,
       $color: color,
       onClick,
+      onKeyDown,
       ...href && { href }
     },
     children
@@ -6005,11 +6057,51 @@ var Select = (0, import_react57.memo)(function Select2({
   )), label && /* @__PURE__ */ import_react57.default.createElement(SelectLabel, { htmlFor: id }, label));
 });
 
+// src/components/SelectMenu.tsx
+var import_noya_icons6 = require("@noya-app/noya-icons");
+var Select3 = __toESM(require("@radix-ui/react-select"));
+var import_react58 = __toESM(require("react"));
+var import_styled_components33 = require("styled-components");
+var SelectMenu = (0, import_react58.memo)(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__ */ import_react58.default.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ import_react58.default.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ import_react58.default.createElement(Button, { id, style: style3, className }, icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, icon, /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react58.default.createElement(Select3.Value, { placeholder }), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react58.default.createElement(import_noya_icons6.DropdownChevronIcon, null))), /* @__PURE__ */ import_react58.default.createElement(Select3.Portal, null, /* @__PURE__ */ import_react58.default.createElement(SelectContent, null, /* @__PURE__ */ import_react58.default.createElement(SelectViewport, null, menuItems.map((menuItem) => {
+    if (typeof menuItem === "string") {
+      return /* @__PURE__ */ import_react58.default.createElement(StyledSeparator, null);
+    }
+    const value2 = menuItem.value ?? "";
+    return /* @__PURE__ */ import_react58.default.createElement(SelectItem, { key: value2, value: value2, icon: menuItem.icon }, menuItem.title ?? value2);
+  })))));
+});
+var SelectContent = (0, import_styled_components33.styled)(Select3.Content)(styles.contentStyle);
+var SelectViewport = (0, import_styled_components33.styled)(Select3.Viewport)({});
+var SelectItem = import_react58.default.forwardRef(
+  ({
+    children,
+    icon,
+    ...props
+  }, forwardedRef) => {
+    return /* @__PURE__ */ import_react58.default.createElement(StyledItem2, { ...props, ref: forwardedRef }, icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, icon, /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react58.default.createElement(Select3.ItemText, null, children));
+  }
+);
+var StyledItem2 = (0, import_styled_components33.styled)(Select3.Item)(styles.itemStyle);
+var StyledSeparator = (0, import_styled_components33.styled)(Select3.Separator)(styles.separatorStyle);
+
 // src/components/Slider.tsx
 var RadixSlider = __toESM(require("@radix-ui/react-slider"));
-var import_react58 = __toESM(require("react"));
-var import_styled_components33 = __toESM(require("styled-components"));
-var StyledSlider = (0, import_styled_components33.default)(RadixSlider.Root)({
+var import_react59 = __toESM(require("react"));
+var import_styled_components34 = __toESM(require("styled-components"));
+var StyledSlider = (0, import_styled_components34.default)(RadixSlider.Root)({
   flex: "1",
   position: "relative",
   display: "flex",
@@ -6018,19 +6110,19 @@ var StyledSlider = (0, import_styled_components33.default)(RadixSlider.Root)({
   touchAction: "none",
   height: "16px"
 });
-var StyledTrack = (0, import_styled_components33.default)(RadixSlider.Track)(({ theme }) => ({
+var StyledTrack = (0, import_styled_components34.default)(RadixSlider.Track)(({ theme }) => ({
   backgroundColor: theme.colors.divider,
   position: "relative",
   flexGrow: 1,
   height: "2px"
 }));
-var StyledRange = (0, import_styled_components33.default)(RadixSlider.Range)(({ theme }) => ({
+var StyledRange = (0, import_styled_components34.default)(RadixSlider.Range)(({ theme }) => ({
   position: "absolute",
   backgroundColor: theme.colors.primary,
   borderRadius: "9999px",
   height: "100%"
 }));
-var StyledThumb2 = (0, import_styled_components33.default)(RadixSlider.Thumb)(({ theme }) => ({
+var StyledThumb2 = (0, import_styled_components34.default)(RadixSlider.Thumb)(({ theme }) => ({
   display: "block",
   width: "12px",
   height: "12px",
@@ -6048,17 +6140,17 @@ var Slider = function Slider2({
   min,
   max
 }) {
-  const arrayValue = (0, import_react58.useMemo)(
+  const arrayValue = (0, import_react59.useMemo)(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
-  const handleValueChange = (0, import_react58.useCallback)(
+  const handleValueChange = (0, import_react59.useCallback)(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ import_react58.default.createElement(
+  return /* @__PURE__ */ import_react59.default.createElement(
     StyledSlider,
     {
       min,
@@ -6067,16 +6159,16 @@ var Slider = function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange
     },
-    /* @__PURE__ */ import_react58.default.createElement(StyledTrack, null, /* @__PURE__ */ import_react58.default.createElement(StyledRange, null)),
-    /* @__PURE__ */ import_react58.default.createElement(StyledThumb2, null)
+    /* @__PURE__ */ import_react59.default.createElement(StyledTrack, null, /* @__PURE__ */ import_react59.default.createElement(StyledRange, null)),
+    /* @__PURE__ */ import_react59.default.createElement(StyledThumb2, null)
   );
 };
 
 // src/components/Switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var import_react59 = __toESM(require("react"));
-var import_styled_components34 = __toESM(require("styled-components"));
-var SwitchRoot = (0, import_styled_components34.default)(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
+var import_react60 = __toESM(require("react"));
+var import_styled_components35 = __toESM(require("styled-components"));
+var SwitchRoot = (0, import_styled_components35.default)(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
   all: "unset",
   width: 32,
   height: 19,
@@ -6093,7 +6185,7 @@ var SwitchRoot = (0, import_styled_components34.default)(SwitchPrimitive.Root)((
     backgroundColor: $colorScheme === "primary" ? theme.colors.primary : $colorScheme === "secondary" ? theme.colors.secondary : void 0
   }
 }));
-var SwitchThumb = (0, import_styled_components34.default)(SwitchPrimitive.Thumb)({
+var SwitchThumb = (0, import_styled_components35.default)(SwitchPrimitive.Thumb)({
   display: "block",
   width: 15,
   height: 15,
@@ -6109,7 +6201,7 @@ var Switch = function Switch2({
   onChange,
   colorScheme = "normal"
 }) {
-  return /* @__PURE__ */ import_react59.default.createElement(
+  return /* @__PURE__ */ import_react60.default.createElement(
     SwitchRoot,
     {
       $colorScheme: colorScheme,
@@ -6118,62 +6210,62 @@ var Switch = function Switch2({
         onChange(newValue);
       }
     },
-    /* @__PURE__ */ import_react59.default.createElement(SwitchThumb, null)
+    /* @__PURE__ */ import_react60.default.createElement(SwitchThumb, null)
   );
 };
 
 // src/components/TreeView.tsx
-var import_react60 = __toESM(require("react"));
-var TreeRow = (0, import_react60.forwardRef)(function TreeRow2({
+var import_react61 = __toESM(require("react"));
+var TreeRow = (0, import_react61.forwardRef)(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
   children,
   ...rest
 }, forwardedRef) {
-  const { expandable } = (0, import_react60.useContext)(ListView.RowContext);
-  const handleClickChevron = (0, import_react60.useCallback)(
+  const { expandable } = (0, import_react61.useContext)(ListView.RowContext);
+  const handleClickChevron = (0, import_react61.useCallback)(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ import_react60.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react60.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react60.default.createElement(
+  return /* @__PURE__ */ import_react61.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react61.default.createElement(import_react61.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react61.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react61.default.createElement(
     IconButton,
     {
-      iconName: expanded ? "ChevronDownIcon" : "ChevronRightIcon",
+      iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react60.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, icon, /* @__PURE__ */ import_react60.default.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ import_react61.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react61.default.createElement(import_react61.default.Fragment, null, icon, /* @__PURE__ */ import_react61.default.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
   TreeView2.Root = ListView.Root;
   TreeView2.RowTitle = ListView.RowTitle;
   TreeView2.EditableRowTitle = ListView.EditableRowTitle;
-  TreeView2.Row = (0, import_react60.memo)(TreeRow);
+  TreeView2.Row = (0, import_react61.memo)(TreeRow);
 })(TreeView || (TreeView = {}));
 
 // src/components/WorkspaceLayout.tsx
 var import_noya_keymap5 = require("@noya-app/noya-keymap");
-var import_react63 = __toESM(require("react"));
+var import_react64 = __toESM(require("react"));
 var import_react_resizable_panels = require("react-resizable-panels");
 
 // src/hooks/usePreservePanelSize.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 
 // src/hooks/useWindowSize.tsx
-var import_react61 = require("react");
+var import_react62 = require("react");
 function useWindowSize() {
-  const [size2, setSize] = (0, import_react61.useState)(
+  const [size2, setSize] = (0, import_react62.useState)(
     typeof window === "undefined" ? { width: 0, height: 0 } : {
       width: window.innerWidth,
       height: window.innerHeight
     }
   );
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     const handleResize = () => setSize({
       width: window.innerWidth,
       height: window.innerHeight
@@ -6191,8 +6283,8 @@ var RIGHT_SIDEBAR_ID = "editor-right-sidebar";
 var CONTENT_AREA_ID = "editor-content-area";
 function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
   const windowSize = useWindowSize();
-  const layoutRef = (0, import_react62.useRef)();
-  (0, import_react62.useLayoutEffect)(() => {
+  const layoutRef = (0, import_react63.useRef)();
+  (0, import_react63.useLayoutEffect)(() => {
     const panelGroup = document.querySelector(
       `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
     );
@@ -6235,7 +6327,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
       panelGroupObserver.disconnect();
     };
   }, [panelGroupRef, setPanelLayoutState]);
-  (0, import_react62.useLayoutEffect)(() => {
+  (0, import_react63.useLayoutEffect)(() => {
     if (!layoutRef.current)
       return;
     const {
@@ -6295,7 +6387,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/WorkspaceLayout.tsx
-var WorkspaceLayout = (0, import_react63.forwardRef)(function WorkspaceLayout2({
+var WorkspaceLayout = (0, import_react64.forwardRef)(function WorkspaceLayout2({
   autoSavePrefix,
   leftSidebarContent: leftPanelContent,
   children: centerPanelContent,
@@ -6320,12 +6412,12 @@ var WorkspaceLayout = (0, import_react63.forwardRef)(function WorkspaceLayout2({
   const rightSidebarPercentage = getPercentage(rightSidebarInitialSize);
   const leftSidebarMinPercentage = leftSidebarMinSize !== void 0 ? getPercentage(leftSidebarMinSize) : void 0;
   const rightSidebarMinPercentage = rightSidebarMinSize !== void 0 ? getPercentage(rightSidebarMinSize) : void 0;
-  const panelGroupRef = (0, import_react63.useRef)(null);
-  const leftSidebarRef = (0, import_react63.useRef)(null);
-  const rightSidebarRef = (0, import_react63.useRef)(null);
+  const panelGroupRef = (0, import_react64.useRef)(null);
+  const leftSidebarRef = (0, import_react64.useRef)(null);
+  const rightSidebarRef = (0, import_react64.useRef)(null);
   usePreservePanelSize(panelGroupRef, onChangeLayoutState);
   const theme = useDesignSystemTheme();
-  (0, import_react63.useImperativeHandle)(forwardedRef, () => ({
+  (0, import_react64.useImperativeHandle)(forwardedRef, () => ({
     setLeftSidebarExpanded: (expanded) => {
       if (expanded) {
         leftSidebarRef.current?.expand();
@@ -6382,7 +6474,7 @@ var WorkspaceLayout = (0, import_react63.forwardRef)(function WorkspaceLayout2({
     }
   });
   const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
-  return /* @__PURE__ */ import_react63.default.createElement(
+  return /* @__PURE__ */ import_react64.default.createElement(
     "div",
     {
       id,
@@ -6394,7 +6486,7 @@ var WorkspaceLayout = (0, import_react63.forwardRef)(function WorkspaceLayout2({
         ...style3
       }
     },
-    /* @__PURE__ */ import_react63.default.createElement(
+    /* @__PURE__ */ import_react64.default.createElement(
       import_react_resizable_panels.PanelGroup,
       {
         ref: panelGroupRef,
@@ -6403,7 +6495,7 @@ var WorkspaceLayout = (0, import_react63.forwardRef)(function WorkspaceLayout2({
         autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
         style: { flex: "1" }
       },
-      hasLeftSidebar && /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, /* @__PURE__ */ import_react63.default.createElement(
+      hasLeftSidebar && /* @__PURE__ */ import_react64.default.createElement(import_react64.default.Fragment, null, /* @__PURE__ */ import_react64.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: LEFT_SIDEBAR_ID,
@@ -6415,11 +6507,12 @@ var WorkspaceLayout = (0, import_react63.forwardRef)(function WorkspaceLayout2({
           collapsible: true,
           style: {
             display: "flex",
-            flexDirection: "row"
+            flexDirection: "row",
+            position: "relative"
           }
         },
         leftPanelContent
-      ), /* @__PURE__ */ import_react63.default.createElement(
+      ), /* @__PURE__ */ import_react64.default.createElement(
         import_react_resizable_panels.PanelResizeHandle,
         {
           style: {
@@ -6430,7 +6523,7 @@ var WorkspaceLayout = (0, import_react63.forwardRef)(function WorkspaceLayout2({
           }
         }
       )),
-      /* @__PURE__ */ import_react63.default.createElement(
+      /* @__PURE__ */ import_react64.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: CONTENT_AREA_ID,
@@ -6439,12 +6532,13 @@ var WorkspaceLayout = (0, import_react63.forwardRef)(function WorkspaceLayout2({
           minSize: 10,
           style: {
             display: "flex",
-            flexDirection: "row"
+            flexDirection: "row",
+            position: "relative"
           }
         },
         centerPanelContent
       ),
-      hasRightSidebar && /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, /* @__PURE__ */ import_react63.default.createElement(
+      hasRightSidebar && /* @__PURE__ */ import_react64.default.createElement(import_react64.default.Fragment, null, /* @__PURE__ */ import_react64.default.createElement(
         import_react_resizable_panels.PanelResizeHandle,
         {
           style: {
@@ -6454,7 +6548,7 @@ var WorkspaceLayout = (0, import_react63.forwardRef)(function WorkspaceLayout2({
             backgroundColor: theme.colors.divider
           }
         }
-      ), /* @__PURE__ */ import_react63.default.createElement(
+      ), /* @__PURE__ */ import_react64.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: RIGHT_SIDEBAR_ID,
@@ -6465,7 +6559,8 @@ var WorkspaceLayout = (0, import_react63.forwardRef)(function WorkspaceLayout2({
           collapsible: true,
           style: {
             display: "flex",
-            flexDirection: "row"
+            flexDirection: "row",
+            position: "relative"
           }
         },
         rightPanelContent
@@ -6516,8 +6611,8 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/ArrayController.tsx
 var import_noya_utils11 = require("@noya-app/noya-utils");
-var import_react65 = __toESM(require("react"));
-var import_styled_components36 = __toESM(require("styled-components"));
+var import_react66 = __toESM(require("react"));
+var import_styled_components37 = __toESM(require("styled-components"));
 
 // src/components/InspectorPrimitives.tsx
 var InspectorPrimitives_exports = {};
@@ -6535,20 +6630,20 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react64 = __toESM(require("react"));
-var import_styled_components35 = __toESM(require("styled-components"));
-var Section = import_styled_components35.default.div(({ theme, $padding = "10px", $gap }) => ({
+var import_react65 = __toESM(require("react"));
+var import_styled_components36 = __toESM(require("styled-components"));
+var Section = import_styled_components36.default.div(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
   display: "flex",
   flexDirection: "column",
   padding: $padding,
   gap: $gap
 }));
-var SectionHeader = import_styled_components35.default.div(({ theme }) => ({
+var SectionHeader = import_styled_components36.default.div(({ theme }) => ({
   display: "flex",
   alignItems: "center"
 }));
-var Title3 = import_styled_components35.default.div(({ theme, $textStyle }) => ({
+var Title3 = import_styled_components36.default.div(({ theme, $textStyle }) => ({
   display: "flex",
   flexDirection: "row",
   userSelect: "none",
@@ -6561,7 +6656,7 @@ var Title3 = import_styled_components35.default.div(({ theme, $textStyle }) => (
     fontWeight: "bold"
   }
 }));
-var Row2 = import_styled_components35.default.div(
+var Row2 = import_styled_components36.default.div(
   ({ theme, $gap }) => ({
     flex: "1",
     display: "flex",
@@ -6570,26 +6665,26 @@ var Row2 = import_styled_components35.default.div(
     gap: $gap
   })
 );
-var Column = import_styled_components35.default.div(({ theme }) => ({
+var Column = import_styled_components36.default.div(({ theme }) => ({
   flex: "1",
   display: "flex",
   flexDirection: "column",
   gap: "4px"
 }));
-var Checkbox = import_styled_components35.default.input(({ theme }) => ({
+var Checkbox = import_styled_components36.default.input(({ theme }) => ({
   margin: 0
 }));
-var Text3 = import_styled_components35.default.span(({ theme }) => ({
+var Text3 = import_styled_components36.default.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ import_react64.default.createElement(Spacer.Vertical, { size: (0, import_styled_components35.useTheme)().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react64.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components35.useTheme)().sizes.inspector.horizontalSeparator });
-var SliderRowLabel = import_styled_components35.default.span(({ theme }) => ({
+var VerticalSeparator = () => /* @__PURE__ */ import_react65.default.createElement(Spacer.Vertical, { size: (0, import_styled_components36.useTheme)().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: (0, import_styled_components36.useTheme)().sizes.inspector.horizontalSeparator });
+var SliderRowLabel = import_styled_components36.default.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
   marginBottom: "-6px"
 }));
-var RowLabel = import_styled_components35.default.span(({ theme, $textStyle }) => ({
+var RowLabel = import_styled_components36.default.span(({ theme, $textStyle }) => ({
   // marginBottom: '6px',
   display: "flex",
   ...$textStyle ? {
@@ -6603,7 +6698,7 @@ var RowLabel = import_styled_components35.default.span(({ theme, $textStyle }) =
   // Button height
   alignItems: "center"
 }));
-var LabeledRow = (0, import_react64.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react65.memo)(function LabeledRow2({
   id,
   children,
   label,
@@ -6611,26 +6706,26 @@ var LabeledRow = (0, import_react64.memo)(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ import_react64.default.createElement(Row2, { id }, /* @__PURE__ */ import_react64.default.createElement(Column, null, /* @__PURE__ */ import_react64.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react64.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react64.default.createElement(Row2, { $gap: gap }, children)));
+  return /* @__PURE__ */ import_react65.default.createElement(Row2, { id }, /* @__PURE__ */ import_react65.default.createElement(Column, null, /* @__PURE__ */ import_react65.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react65.default.createElement(Row2, { $gap: gap }, children)));
 });
-var LabeledSliderRow = (0, import_react64.memo)(function LabeledRow3({
+var LabeledSliderRow = (0, import_react65.memo)(function LabeledRow3({
   children,
   label
 }) {
-  return /* @__PURE__ */ import_react64.default.createElement(Row2, null, /* @__PURE__ */ import_react64.default.createElement(Column, null, /* @__PURE__ */ import_react64.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react64.default.createElement(Row2, null, children)));
+  return /* @__PURE__ */ import_react65.default.createElement(Row2, null, /* @__PURE__ */ import_react65.default.createElement(Column, null, /* @__PURE__ */ import_react65.default.createElement(SliderRowLabel, null, label), /* @__PURE__ */ import_react65.default.createElement(Row2, null, children)));
 });
 
 // src/components/ArrayController.tsx
-var ElementRow = import_styled_components36.default.div({
+var ElementRow = import_styled_components37.default.div({
   flex: "0 0 auto",
   display: "flex",
   flexDirection: "row",
   alignItems: "center"
 });
-var ItemContainer2 = import_styled_components36.default.div({
+var ItemContainer2 = import_styled_components37.default.div({
   position: "relative"
 });
-var ArrayController = (0, import_react65.memo)(function ArrayController2({
+var ArrayController = (0, import_react66.memo)(function ArrayController2({
   id,
   items,
   title,
@@ -6646,14 +6741,14 @@ var ArrayController = (0, import_react65.memo)(function ArrayController2({
   renderExpandedContent,
   padding = 10
 }) {
-  const iconColor = (0, import_styled_components36.useTheme)().colors.icon;
-  const primaryLightColor = (0, import_styled_components36.useTheme)().colors.primaryLight;
-  const keys = (0, import_react65.useMemo)(
+  const iconColor = (0, import_styled_components37.useTheme)().colors.icon;
+  const primaryLightColor = (0, import_styled_components37.useTheme)().colors.primaryLight;
+  const keys = (0, import_react66.useMemo)(
     () => items.map((item, index) => getKey?.(item) ?? index.toString()),
     [getKey, items]
   );
   const indexes = reversed ? (0, import_noya_utils11.range)(0, items.length).reverse() : (0, import_noya_utils11.range)(0, items.length);
-  const handleMoveItem = (0, import_react65.useCallback)(
+  const handleMoveItem = (0, import_react66.useCallback)(
     (sourceIndex, destinationIndex, position) => {
       if (reversed) {
         if (position === "above") {
@@ -6670,11 +6765,11 @@ var ArrayController = (0, import_react65.memo)(function ArrayController2({
     [onMoveItem, reversed]
   );
   const renderRow = (index) => {
-    return /* @__PURE__ */ import_react65.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
+    return /* @__PURE__ */ import_react66.default.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
   };
-  return /* @__PURE__ */ import_react65.default.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ import_react65.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react65.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react65.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
+  return /* @__PURE__ */ import_react66.default.createElement(Section, { id, $padding: padding, $gap: "2px" }, /* @__PURE__ */ import_react66.default.createElement(SectionHeader, null, /* @__PURE__ */ import_react66.default.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ import_react66.default.createElement(Title3, null, title)), /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, null), withSeparatorElements(
     [
-      onClickTrash && /* @__PURE__ */ import_react65.default.createElement(
+      onClickTrash && /* @__PURE__ */ import_react66.default.createElement(
         IconButton,
         {
           id: `${id}-trash`,
@@ -6683,7 +6778,7 @@ var ArrayController = (0, import_react65.memo)(function ArrayController2({
           onClick: onClickTrash
         }
       ),
-      onClickExpand && /* @__PURE__ */ import_react65.default.createElement(
+      onClickExpand && /* @__PURE__ */ import_react66.default.createElement(
         IconButton,
         {
           id: `${id}-gear`,
@@ -6692,7 +6787,7 @@ var ArrayController = (0, import_react65.memo)(function ArrayController2({
           onClick: onClickExpand
         }
       ),
-      onClickPlus && /* @__PURE__ */ import_react65.default.createElement(
+      onClickPlus && /* @__PURE__ */ import_react66.default.createElement(
         IconButton,
         {
           id: `${id}-add`,
@@ -6702,15 +6797,15 @@ var ArrayController = (0, import_react65.memo)(function ArrayController2({
         }
       )
     ],
-    /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 8 })
-  )), /* @__PURE__ */ import_react65.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react65.default.createElement(
+    /* @__PURE__ */ import_react66.default.createElement(Spacer.Horizontal, { size: 8 })
+  )), /* @__PURE__ */ import_react66.default.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ import_react66.default.createElement(
     Sortable.Root,
     {
       keys,
       renderOverlay: renderRow,
       onMoveItem: handleMoveItem
     },
-    indexes.map((index) => /* @__PURE__ */ import_react65.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react65.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react65.default.createElement(
+    indexes.map((index) => /* @__PURE__ */ import_react66.default.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ import_react66.default.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ import_react66.default.createElement(
       ListView.DragIndicator,
       {
         $gap: 0,
@@ -6724,11 +6819,11 @@ var ArrayController = (0, import_react65.memo)(function ArrayController2({
 
 // src/components/DimensionInput.tsx
 var import_noya_utils12 = require("@noya-app/noya-utils");
-var import_react66 = __toESM(require("react"));
+var import_react67 = __toESM(require("react"));
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = (0, import_react66.memo)(function DimensionInput2({
+var DimensionInput = (0, import_react67.memo)(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -6738,15 +6833,15 @@ var DimensionInput = (0, import_react66.memo)(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = (0, import_react66.useCallback)(
+  const handleNudgeValue = (0, import_react67.useCallback)(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = (0, import_react66.useCallback)(
+  const handleSetValue = (0, import_react67.useCallback)(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ import_react66.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react66.default.createElement(
+  return /* @__PURE__ */ import_react67.default.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ import_react67.default.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : (0, import_noya_utils12.round)(value, 2),
@@ -6755,7 +6850,7 @@ var DimensionInput = (0, import_react66.memo)(function DimensionInput2({
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ import_react66.default.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ import_react67.default.createElement(InputField.Label, null, label));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -6815,6 +6910,7 @@ var DimensionInput = (0, import_react66.memo)(function DimensionInput2({
   SUPPORTED_IMAGE_UPLOAD_TYPES,
   ScrollArea,
   Select,
+  SelectMenu,
   SelectOption,
   Slider,
   Small,