@noya-app/noya-designsystem 0.1.36 → 0.1.37

package/dist/index.js

@@ -475,7 +475,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment2 = REACT_FRAGMENT_TYPE;
+        var Fragment3 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal6 = REACT_PORTAL_TYPE;
@@ -534,7 +534,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element2;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment2;
+        exports2.Fragment = Fragment3;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal6;
@@ -1396,6 +1396,7 @@ __export(src_exports, {
   Body: () => Body,
   Button: () => Button,
   CONTENT_AREA_ID: () => CONTENT_AREA_ID,
+  Checkbox: () => Checkbox,
   Chip: () => Chip,
   CompletionMenu: () => CompletionMenu,
   ContextMenu: () => ContextMenu,
@@ -4219,12 +4220,88 @@ var Button = (0, import_react5.forwardRef)(function Button2({
   return tooltip ? /* @__PURE__ */ import_react5.default.createElement(Tooltip, { content: tooltip }, buttonElement) : buttonElement;
 });
 
+// src/components/Checkbox.tsx
+var import_react6 = __toESM(require("react"));
+var colorSchemeStyles = {
+  normal: "text-text-subtle",
+  primary: "text-primary",
+  secondary: "text-secondary"
+};
+var Checkbox = (0, import_react6.memo)(
+  (0, import_react6.forwardRef)(function Checkbox2({ className, colorScheme = "secondary", ...props }, ref) {
+    return /* @__PURE__ */ import_react6.default.createElement(
+      "div",
+      {
+        className: `relative inline-flex w-[19px] h-[19px] ${colorSchemeStyles[colorScheme]} ${className ?? ""}`
+      },
+      /* @__PURE__ */ import_react6.default.createElement(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          className: `
+            w-full
+            h-full
+            peer
+            appearance-none
+            rounded
+            bg-input-background
+            transition-colors
+            border
+            border-input-border
+            disabled:opacity-50
+            disabled:cursor-not-allowed
+            focus:ring-2
+            focus:ring-primary
+            focus:ring-offset-1
+          `,
+          style: {
+            width: "27px",
+            ...props.style
+          },
+          ...props
+        }
+      ),
+      /* @__PURE__ */ import_react6.default.createElement(
+        "svg",
+        {
+          className: `
+            absolute 
+            inset-0
+            h-[27px] 
+            w-[27px] 
+            pointer-events-none
+            stroke-white
+            opacity-0
+            peer-checked:opacity-100
+          `,
+          style: {
+            strokeWidth: "1.3"
+          },
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        },
+        /* @__PURE__ */ import_react6.default.createElement(
+          "path",
+          {
+            d: "M3 6L4.5 7.5L8 4",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            stroke: "currentColor"
+          }
+        )
+      )
+    );
+  })
+);
+
 // src/components/Chip.tsx
 var import_noya_icons = require("@noya-app/noya-icons");
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 
 // src/hooks/useHover.ts
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var globalIgnoreEmulatedMouseEvents = false;
 var hoverCount = 0;
 function setGlobalIgnoreEmulatedMouseEvents() {
@@ -4254,13 +4331,13 @@ function setupGlobalTouchEvents() {
 }
 function useHover(props = {}) {
   const { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
-  const [isHovered, setHovered] = React6.useState(false);
-  const state = React6.useRef({
+  const [isHovered, setHovered] = React7.useState(false);
+  const state = React7.useRef({
     isHovered: false,
     ignoreEmulatedMouseEvents: false
   }).current;
-  React6.useEffect(setupGlobalTouchEvents, []);
-  const hoverProps = React6.useMemo(
+  React7.useEffect(setupGlobalTouchEvents, []);
+  const hoverProps = React7.useMemo(
     function getHoverProps() {
       function triggerHoverStart(event, pointerType) {
         if (isDisabled || pointerType === "touch" || state.isHovered) {
@@ -4398,8 +4475,8 @@ function getIconStyles(size3, isAdd) {
     scale-60
   `;
 }
-var Chip = (0, import_react6.memo)(
-  (0, import_react6.forwardRef)(function Chip2({
+var Chip = (0, import_react7.memo)(
+  (0, import_react7.forwardRef)(function Chip2({
     colorScheme,
     children: children2,
     deletable,
@@ -4422,7 +4499,7 @@ var Chip = (0, import_react6.memo)(
     });
     const handleClick = !children2 && !deletable && addable ? onAdd : onClick;
     const color = colorScheme === "primary" ? "var(--primary)" : colorScheme === "secondary" ? "var(--secondary)" : "var(--text)";
-    return /* @__PURE__ */ import_react6.default.createElement(
+    return /* @__PURE__ */ import_react7.default.createElement(
       "span",
       {
         ref: forwardedRef,
@@ -4441,7 +4518,7 @@ var Chip = (0, import_react6.memo)(
         tabIndex,
         ...rest
       },
-      addable && /* @__PURE__ */ import_react6.default.createElement(
+      addable && /* @__PURE__ */ import_react7.default.createElement(
         import_noya_icons.PlusIcon,
         {
           className: getIconStyles(size3, true),
@@ -4453,7 +4530,7 @@ var Chip = (0, import_react6.memo)(
         }
       ),
       children2,
-      deletable && /* @__PURE__ */ import_react6.default.createElement(
+      deletable && /* @__PURE__ */ import_react7.default.createElement(
         import_noya_icons.Cross1Icon,
         {
           className: getIconStyles(size3, false),
@@ -4473,31 +4550,31 @@ var Chip = (0, import_react6.memo)(
 var import_noya_icons4 = require("@noya-app/noya-icons");
 var import_noya_keymap4 = require("@noya-app/noya-keymap");
 var RadixContextMenu = __toESM(require("@radix-ui/react-context-menu"));
-var import_react38 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 
 // src/components/Icons.tsx
 var Icons = __toESM(require("@noya-app/noya-icons"));
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 function renderIcon(iconName) {
   if (typeof iconName === "string") {
     const Icon = Icons[iconName];
-    return /* @__PURE__ */ import_react7.default.createElement(Icon, null);
+    return /* @__PURE__ */ import_react8.default.createElement(Icon, null);
   }
   return iconName;
 }
 
 // src/components/Spacer.tsx
-var import_react8 = __toESM(require("react"));
-var SpacerVertical = (0, import_react8.forwardRef)(
+var import_react9 = __toESM(require("react"));
+var SpacerVertical = (0, import_react9.forwardRef)(
   ({ size: size3, inline, ...props }, ref) => {
-    return /* @__PURE__ */ import_react8.default.createElement("span", { className: `${inline ? "inline-block" : "block"} ${size3 === void 0 ? "flex flex-1" : ""}`, style: size3 ? {
+    return /* @__PURE__ */ import_react9.default.createElement("span", { className: `${inline ? "inline-block" : "block"} ${size3 === void 0 ? "flex flex-1" : ""}`, style: size3 ? {
       minHeight: `${size3}px`
     } : void 0, ...props, ref });
   }
 );
-var SpacerHorizontal = (0, import_react8.forwardRef)(
+var SpacerHorizontal = (0, import_react9.forwardRef)(
   ({ size: size3, inline, ...props }, ref) => {
-    return /* @__PURE__ */ import_react8.default.createElement("span", { className: `${inline ? "inline-block" : "block"} ${size3 === void 0 ? "flex flex-1" : ""}`, style: size3 ? {
+    return /* @__PURE__ */ import_react9.default.createElement("span", { className: `${inline ? "inline-block" : "block"} ${size3 === void 0 ? "flex flex-1" : ""}`, style: size3 ? {
       minWidth: `${size3}px`
     } : void 0, ...props, ref });
   }
@@ -4510,29 +4587,29 @@ var Spacer;
 
 // src/components/internal/Menu.tsx
 var import_noya_keymap3 = require("@noya-app/noya-keymap");
-var import_react37 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 
 // src/contexts/DesignSystemConfiguration.tsx
 var import_noya_keymap2 = require("@noya-app/noya-keymap");
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 
 // src/components/Toast.tsx
 var ToastPrimitive = __toESM(require("@radix-ui/react-toast"));
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 
 // src/components/IconButton.tsx
-var import_react9 = __toESM(require("react"));
-var IconButton = (0, import_react9.memo)(
-  (0, import_react9.forwardRef)(function IconButton2({ selected, iconName, color, size: size3, contentStyle, ...props }, forwardedRef) {
+var import_react10 = __toESM(require("react"));
+var IconButton = (0, import_react10.memo)(
+  (0, import_react10.forwardRef)(function IconButton2({ selected, iconName, color, size: size3, contentStyle, ...props }, forwardedRef) {
     const Icon = Icons[iconName];
-    const style5 = (0, import_react9.useMemo)(() => {
+    const style5 = (0, import_react10.useMemo)(() => {
       return {
         padding: "0 2px",
         ...size3 && { minHeight: size3 },
         ...contentStyle
       };
     }, [contentStyle, size3]);
-    return /* @__PURE__ */ import_react9.default.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style5 }, /* @__PURE__ */ import_react9.default.createElement(
+    return /* @__PURE__ */ import_react10.default.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style5 }, /* @__PURE__ */ import_react10.default.createElement(
       Icon,
       {
         color: color ?? (selected ? "var(--icon-selected)" : "var(--icon)"),
@@ -4549,27 +4626,27 @@ var Toast = ({
   children: children2,
   ...props
 }) => {
-  return /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement(
     ToastPrimitive.Root,
     {
       className: "px-2 py-2.5 grid grid-cols-[auto_max-content] gap-x-2.5 items-center rounded text-sm bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] text-text-muted",
       ...props
     },
-    title && /* @__PURE__ */ import_react10.default.createElement(ToastPrimitive.Title, { className: `mb-[5px] ${textStyles.label} font-bold text-text` }, title),
-    /* @__PURE__ */ import_react10.default.createElement(ToastPrimitive.Description, { className: `${textStyles.small} text-text-muted` }, content),
-    children2 && /* @__PURE__ */ import_react10.default.createElement(ToastPrimitive.Action, { asChild: true, altText: "" }, children2),
-    /* @__PURE__ */ import_react10.default.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ import_react10.default.createElement(IconButton, { iconName: "Cross1Icon" }))
+    title && /* @__PURE__ */ import_react11.default.createElement(ToastPrimitive.Title, { className: `mb-[5px] ${textStyles.label} font-bold text-text` }, title),
+    /* @__PURE__ */ import_react11.default.createElement(ToastPrimitive.Description, { className: `${textStyles.small} text-text-muted` }, content),
+    children2 && /* @__PURE__ */ import_react11.default.createElement(ToastPrimitive.Action, { asChild: true, altText: "" }, children2),
+    /* @__PURE__ */ import_react11.default.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ import_react11.default.createElement(IconButton, { iconName: "Cross1Icon" }))
   );
 };
-var ToastProvider = ({ children: children2 }) => /* @__PURE__ */ import_react10.default.createElement(ToastPrimitive.Provider, null, children2, /* @__PURE__ */ import_react10.default.createElement(ToastPrimitive.Viewport, { className: "fixed bottom-0 right-0 flex flex-col p-5 g-2.5 min-w-[200px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none" }));
+var ToastProvider = ({ children: children2 }) => /* @__PURE__ */ import_react11.default.createElement(ToastPrimitive.Provider, null, children2, /* @__PURE__ */ import_react11.default.createElement(ToastPrimitive.Viewport, { className: "fixed bottom-0 right-0 flex flex-col p-5 g-2.5 min-w-[200px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none" }));
 
 // src/contexts/DialogContext.tsx
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 
 // src/components/Dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_react11 = __toESM(require("react"));
-var StyledOverlay = (0, import_react11.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react11.default.createElement(
+var import_react12 = __toESM(require("react"));
+var StyledOverlay = (0, import_react12.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react12.default.createElement(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -4577,7 +4654,7 @@ var StyledOverlay = (0, import_react11.forwardRef)(({ className, ...props }, ref
     ...props
   }
 ));
-var StyledContent = (0, import_react11.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react11.default.createElement(
+var StyledContent = (0, import_react12.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react12.default.createElement(
   DialogPrimitive.Content,
   {
     ref,
@@ -4592,7 +4669,7 @@ var StyledContent = (0, import_react11.forwardRef)(({ className, ...props }, ref
     ...props
   }
 ));
-var StyledTitle = (0, import_react11.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react11.default.createElement(
+var StyledTitle = (0, import_react12.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react12.default.createElement(
   DialogPrimitive.Title,
   {
     ref,
@@ -4603,7 +4680,7 @@ var StyledTitle = (0, import_react11.forwardRef)(({ className, ...props }, ref)
     ...props
   }
 ));
-var StyledDescription = (0, import_react11.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react11.default.createElement(
+var StyledDescription = (0, import_react12.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react12.default.createElement(
   DialogPrimitive.Description,
   {
     ref,
@@ -4614,7 +4691,7 @@ var StyledDescription = (0, import_react11.forwardRef)(({ className, ...props },
     ...props
   }
 ));
-var CloseButtonContainer = (0, import_react11.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react11.default.createElement(
+var CloseButtonContainer = (0, import_react12.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react12.default.createElement(
   "div",
   {
     ref,
@@ -4622,7 +4699,7 @@ var CloseButtonContainer = (0, import_react11.forwardRef)(({ className, ...props
     ...props
   }
 ));
-var Dialog = (0, import_react11.forwardRef)(function Dialog2({
+var Dialog = (0, import_react12.forwardRef)(function Dialog2({
   children: children2,
   title,
   description,
@@ -4632,14 +4709,14 @@ var Dialog = (0, import_react11.forwardRef)(function Dialog2({
   onOpenAutoFocus,
   closeOnInteractOutside = true
 }, forwardedRef) {
-  const contentRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useImperativeHandle)(forwardedRef, () => ({
+  const contentRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useImperativeHandle)(forwardedRef, () => ({
     containsElement(element) {
       if (!contentRef.current) return false;
       return contentRef.current.contains(element);
     }
   }));
-  return /* @__PURE__ */ import_react11.default.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react11.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react11.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react12.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react12.default.createElement(
     StyledContent,
     {
       ref: contentRef,
@@ -4650,14 +4727,14 @@ var Dialog = (0, import_react11.forwardRef)(function Dialog2({
         onInteractOutside: (event) => event.preventDefault()
       }
     },
-    /* @__PURE__ */ import_react11.default.createElement(CloseButtonContainer, null, /* @__PURE__ */ import_react11.default.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ import_react11.default.createElement(IconButton, { iconName: "Cross1Icon" }))),
-    title && /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(StyledTitle, null, title), /* @__PURE__ */ import_react11.default.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
-    description && /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ import_react11.default.createElement(StyledDescription, null, description), /* @__PURE__ */ import_react11.default.createElement(Spacer.Vertical, { size: 20 })),
+    /* @__PURE__ */ import_react12.default.createElement(CloseButtonContainer, null, /* @__PURE__ */ import_react12.default.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ import_react12.default.createElement(IconButton, { iconName: "Cross1Icon" }))),
+    title && /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(StyledTitle, null, title), /* @__PURE__ */ import_react12.default.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
+    description && /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ import_react12.default.createElement(StyledDescription, null, description), /* @__PURE__ */ import_react12.default.createElement(Spacer.Vertical, { size: 20 })),
     children2
   ));
 });
-var FullscreenDialog = (0, import_react11.forwardRef)(function FullscreenDialog2({ style: style5, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ import_react11.default.createElement(
+var FullscreenDialog = (0, import_react12.forwardRef)(function FullscreenDialog2({ style: style5, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ import_react12.default.createElement(
     Dialog,
     {
       ref: forwardedRef,
@@ -4683,13 +4760,13 @@ var FullscreenDialog = (0, import_react11.forwardRef)(function FullscreenDialog2
 var import_noya_icons3 = require("@noya-app/noya-icons");
 
 // ../noya-react-utils/src/components/AutoSizer.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // ../noya-react-utils/src/hooks/useSize.ts
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 function useSize(refToObserve, dimensions = "both") {
-  const [size3, setSize] = React13.useState(void 0);
-  React13.useEffect(() => {
+  const [size3, setSize] = React14.useState(void 0);
+  React14.useEffect(() => {
     if (refToObserve.current) {
       const elementToObserve = refToObserve.current;
       const resizeObserver = new ResizeObserver((entries) => {
@@ -4736,35 +4813,35 @@ var style = {
   flex: "1 0 0",
   flexDirection: "column"
 };
-var AutoSizer = (0, import_react12.memo)(function AutoSizer2({
+var AutoSizer = (0, import_react13.memo)(function AutoSizer2({
   children: children2,
   className
 }) {
-  const containerRef = (0, import_react12.useRef)(null);
+  const containerRef = (0, import_react13.useRef)(null);
   const containerSize = useSize(containerRef);
-  return /* @__PURE__ */ import_react12.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children2(containerSize));
+  return /* @__PURE__ */ import_react13.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children2(containerSize));
 });
-var SingleDimensionAutoSizer = (0, import_react12.memo)(function SingleDimensionAutoSizer2({
+var SingleDimensionAutoSizer = (0, import_react13.memo)(function SingleDimensionAutoSizer2({
   children: children2,
   dimension,
   className
 }) {
-  const containerRef = (0, import_react12.useRef)(null);
+  const containerRef = (0, import_react13.useRef)(null);
   const containerSize = useSize(containerRef, dimension);
-  return /* @__PURE__ */ import_react12.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children2(containerSize[dimension]));
+  return /* @__PURE__ */ import_react13.default.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children2(containerSize[dimension]));
 });
 
 // ../noya-react-utils/src/components/FileDropTarget.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // ../noya-react-utils/src/hooks/useFileDropTarget.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useFileDropTarget(ref, dropEvent) {
-  const [isDropTargetActive, setIsDropTargetActive] = (0, import_react13.useState)(false);
-  const handleDragOver = (0, import_react13.useCallback)((event) => {
+  const [isDropTargetActive, setIsDropTargetActive] = (0, import_react14.useState)(false);
+  const handleDragOver = (0, import_react14.useCallback)((event) => {
     event.preventDefault();
   }, []);
-  const handleDragEnter = (0, import_react13.useCallback)(
+  const handleDragEnter = (0, import_react14.useCallback)(
     (event) => {
       event.preventDefault();
       if (!ref.current?.contains(event.relatedTarget)) {
@@ -4773,7 +4850,7 @@ function useFileDropTarget(ref, dropEvent) {
     },
     [ref]
   );
-  const handleDragLeave = (0, import_react13.useCallback)(
+  const handleDragLeave = (0, import_react14.useCallback)(
     (event) => {
       event.preventDefault();
       if (!ref.current?.contains(event.relatedTarget)) {
@@ -4782,7 +4859,7 @@ function useFileDropTarget(ref, dropEvent) {
     },
     [ref]
   );
-  const handleDrop = (0, import_react13.useCallback)(
+  const handleDrop = (0, import_react14.useCallback)(
     (event) => {
       event.preventDefault();
       dropEvent(event);
@@ -4805,14 +4882,14 @@ function useFileDropTarget(ref, dropEvent) {
 function isSupportedFile(file, supportedFileTypes) {
   return supportedFileTypes.includes(file.type) || file.type === "" && file.name.endsWith(".sketch");
 }
-var FileDropTarget = (0, import_react14.memo)(function FileDropTarget2({
+var FileDropTarget = (0, import_react15.memo)(function FileDropTarget2({
   children: children2,
   onDropFiles,
   supportedFileTypes,
   ...props
 }) {
-  const ref = (0, import_react14.useRef)(null);
-  const handleFile = (0, import_react14.useCallback)(
+  const ref = (0, import_react15.useRef)(null);
+  const handleFile = (0, import_react15.useCallback)(
     (event) => {
       event.preventDefault();
       const offsetPoint = {
@@ -4848,51 +4925,51 @@ var FileDropTarget = (0, import_react14.memo)(function FileDropTarget2({
     ref,
     handleFile
   );
-  return /* @__PURE__ */ import_react14.default.createElement("div", { ref, ...dropTargetProps, ...props }, typeof children2 === "function" ? children2(isDropTargetActive) : children2);
+  return /* @__PURE__ */ import_react15.default.createElement("div", { ref, ...dropTargetProps, ...props }, typeof children2 === "function" ? children2(isDropTargetActive) : children2);
 });
 
 // ../noya-react-utils/src/hooks/useDeepArray.ts
 var import_noya_utils = require("@noya-app/noya-utils");
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // ../noya-react-utils/src/hooks/useDeepState.ts
 var import_noya_utils2 = require("@noya-app/noya-utils");
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // ../noya-react-utils/src/hooks/useFetch.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // ../noya-react-utils/src/hooks/useIsMounted.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // ../noya-react-utils/src/hooks/useLateReference.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // ../noya-react-utils/src/hooks/useLazyValue.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // ../noya-react-utils/src/hooks/useMutableState.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // ../noya-react-utils/src/hooks/usePersistentState.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // ../noya-react-utils/src/hooks/usePixelRatio.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // ../noya-react-utils/src/hooks/useShallowArray.ts
 var import_noya_utils3 = require("@noya-app/noya-utils");
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // ../noya-react-utils/src/hooks/useStableCallback.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // ../noya-react-utils/src/hooks/useSystemColorScheme.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // ../noya-react-utils/src/hooks/useUrlHashParameters.ts
 var import_noya_utils4 = require("@noya-app/noya-utils");
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // ../emitter/src/index.ts
 var Emitter = class {
@@ -4982,7 +5059,7 @@ function assignRef(ref, value) {
 }
 
 // src/components/InputField.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 
 // src/utils/handleNudge.ts
 function handleNudge(e) {
@@ -5011,8 +5088,8 @@ function handleNudge(e) {
 var import_noya_icons2 = require("@noya-app/noya-icons");
 var import_noya_keymap = require("@noya-app/noya-keymap");
 var RadixDropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
-var import_react28 = __toESM(require("react"));
-var DropdownMenuItem = (0, import_react28.memo)(function ContextMenuItem({
+var import_react29 = __toESM(require("react"));
+var DropdownMenuItem = (0, import_react29.memo)(function ContextMenuItem({
   value,
   children: children2,
   onSelect,
@@ -5023,12 +5100,12 @@ var DropdownMenuItem = (0, import_react28.memo)(function ContextMenuItem({
   items,
   shortcut
 }) {
-  const handleSelectItem = (0, import_react28.useCallback)(() => {
+  const handleSelectItem = (0, import_react29.useCallback)(() => {
     if (!value) return;
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ import_react28.default.createElement(
+    return /* @__PURE__ */ import_react29.default.createElement(
       RadixDropdownMenu.CheckboxItem,
       {
         checked,
@@ -5036,26 +5113,26 @@ var DropdownMenuItem = (0, import_react28.memo)(function ContextMenuItem({
         onSelect: handleSelectItem,
         className: styles.itemStyle({ disabled })
       },
-      /* @__PURE__ */ import_react28.default.createElement(RadixDropdownMenu.ItemIndicator, { className: styles.itemIndicatorStyle }, /* @__PURE__ */ import_react28.default.createElement(import_noya_icons2.CheckIcon, null)),
-      icon && /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: 8 })),
+      /* @__PURE__ */ import_react29.default.createElement(RadixDropdownMenu.ItemIndicator, { className: styles.itemIndicatorStyle }, /* @__PURE__ */ import_react29.default.createElement(import_noya_icons2.CheckIcon, null)),
+      icon && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react29.default.createElement(Spacer.Horizontal, { size: 8 })),
       children2
     );
   }
-  const element = /* @__PURE__ */ import_react28.default.createElement(
+  const element = /* @__PURE__ */ import_react29.default.createElement(
     RadixDropdownMenu.Item,
     {
       disabled,
       onSelect: handleSelectItem,
       className: styles.itemStyle({ disabled })
     },
-    indented && /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
-    icon && /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: 8 })),
+    indented && /* @__PURE__ */ import_react29.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
+    icon && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react29.default.createElement(Spacer.Horizontal, { size: 8 })),
     children2,
-    shortcut && /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react28.default.createElement(KeyboardShortcut, { shortcut })),
-    items && items.length > 0 && /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react28.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react28.default.createElement(import_noya_icons2.ChevronRightIcon, null))
+    shortcut && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react29.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react29.default.createElement(KeyboardShortcut, { shortcut })),
+    items && items.length > 0 && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react29.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react29.default.createElement(import_noya_icons2.ChevronRightIcon, null))
   );
   if (items && items.length > 0) {
-    return /* @__PURE__ */ import_react28.default.createElement(
+    return /* @__PURE__ */ import_react29.default.createElement(
       DropdownMenuRoot,
       {
         isNested: true,
@@ -5069,7 +5146,7 @@ var DropdownMenuItem = (0, import_react28.memo)(function ContextMenuItem({
     return element;
   }
 });
-var DropdownMenuRoot = (0, import_react28.forwardRef)(function DropdownMenuRoot2({
+var DropdownMenuRoot = (0, import_react29.forwardRef)(function DropdownMenuRoot2({
   items,
   children: children2,
   onSelect,
@@ -5088,7 +5165,7 @@ var DropdownMenuRoot = (0, import_react28.forwardRef)(function DropdownMenuRoot2
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
   );
-  const keymap = (0, import_react28.useMemo)(
+  const keymap = (0, import_react29.useMemo)(
     () => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
@@ -5096,8 +5173,8 @@ var DropdownMenuRoot = (0, import_react28.forwardRef)(function DropdownMenuRoot2
   const RootComponent = isNested ? RadixDropdownMenu.Sub : RadixDropdownMenu.Root;
   const TriggerComponent = isNested ? RadixDropdownMenu.SubTrigger : RadixDropdownMenu.Trigger;
   const ContentComponent = isNested ? RadixDropdownMenu.SubContent : RadixDropdownMenu.Content;
-  const contentStyle = (0, import_react28.useMemo)(() => ({ zIndex: 1e3 }), []);
-  return /* @__PURE__ */ import_react28.default.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ import_react28.default.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children2), /* @__PURE__ */ import_react28.default.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ import_react28.default.createElement(
+  const contentStyle = (0, import_react29.useMemo)(() => ({ zIndex: 1e3 }), []);
+  return /* @__PURE__ */ import_react29.default.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ import_react29.default.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children2), /* @__PURE__ */ import_react29.default.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ import_react29.default.createElement(
     ContentComponent,
     {
       className: styles.contentStyle,
@@ -5111,13 +5188,13 @@ var DropdownMenuRoot = (0, import_react28.forwardRef)(function DropdownMenuRoot2
     },
     items.length === 0 ? emptyState : null,
     items.map(
-      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react28.default.createElement(
+      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react29.default.createElement(
         RadixDropdownMenu.Separator,
         {
           key: index,
           className: styles.separatorStyle
         }
-      ) : /* @__PURE__ */ import_react28.default.createElement(
+      ) : /* @__PURE__ */ import_react29.default.createElement(
         DropdownMenuItem,
         {
           key: item.value ?? index,
@@ -5135,14 +5212,14 @@ var DropdownMenuRoot = (0, import_react28.forwardRef)(function DropdownMenuRoot2
     )
   )));
 });
-var DropdownMenu = (0, import_react28.memo)(DropdownMenuRoot);
+var DropdownMenu = (0, import_react29.memo)(DropdownMenuRoot);
 
 // src/components/internal/TextInput.tsx
 var import_react_compose_refs = require("@radix-ui/react-compose-refs");
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 
 // src/contexts/GlobalInputBlurContext.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var defaultValue = /* @__PURE__ */ (() => {
   const listeners = [];
   const value = {
@@ -5162,14 +5239,14 @@ var defaultValue = /* @__PURE__ */ (() => {
   };
   return value;
 })();
-var GlobalInputBlurContext = (0, import_react29.createContext)(defaultValue);
+var GlobalInputBlurContext = (0, import_react30.createContext)(defaultValue);
 var GlobalInputBlurProvider = GlobalInputBlurContext.Provider;
 var useGlobalInputBlur = () => {
-  return (0, import_react29.useContext)(GlobalInputBlurContext);
+  return (0, import_react30.useContext)(GlobalInputBlurContext);
 };
 function useGlobalInputBlurListener(f) {
   const context = useGlobalInputBlur();
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     context.addListener(f);
     return () => {
       context.removeListener(f);
@@ -5181,8 +5258,8 @@ function useGlobalInputBlurTrigger() {
 }
 
 // src/components/internal/TextInput.tsx
-var ReadOnlyTextInput = (0, import_react30.forwardRef)(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ import_react30.default.createElement(
+var ReadOnlyTextInput = (0, import_react31.forwardRef)(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ import_react31.default.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -5193,7 +5270,7 @@ var ReadOnlyTextInput = (0, import_react30.forwardRef)(function ReadOnlyTextInpu
     }
   );
 });
-var ControlledTextInput = (0, import_react30.forwardRef)(function ControlledTextInput2({
+var ControlledTextInput = (0, import_react31.forwardRef)(function ControlledTextInput2({
   onKeyDown,
   value,
   onChange,
@@ -5202,28 +5279,28 @@ var ControlledTextInput = (0, import_react30.forwardRef)(function ControlledText
   onFocusCapture,
   ...rest
 }, forwardedRef) {
-  const handleBlur = (0, import_react30.useCallback)(
+  const handleBlur = (0, import_react31.useCallback)(
     (event) => {
       onBlur?.(event);
       onFocusChange?.(false);
     },
     [onBlur, onFocusChange]
   );
-  const handleFocusCapture = (0, import_react30.useCallback)(
+  const handleFocusCapture = (0, import_react31.useCallback)(
     (event) => {
       onFocusCapture?.(event);
       onFocusChange?.(true);
     },
     [onFocusCapture, onFocusChange]
   );
-  return /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(
     "input",
     {
       ref: forwardedRef,
       ...rest,
       value,
       onKeyDown,
-      onChange: (0, import_react30.useCallback)(
+      onChange: (0, import_react31.useCallback)(
         (event) => onChange(event.target.value),
         [onChange]
       ),
@@ -5232,7 +5309,7 @@ var ControlledTextInput = (0, import_react30.forwardRef)(function ControlledText
     }
   );
 });
-var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTextInput2({
+var SubmittableTextInput = (0, import_react31.forwardRef)(function SubmittableTextInput2({
   onKeyDown,
   value,
   onSubmit,
@@ -5243,16 +5320,16 @@ var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTe
   submitAutomaticallyAfterDelay,
   ...rest
 }, forwardedRef) {
-  const ref = import_react30.default.useRef(null);
-  const latestValue = (0, import_react30.useRef)(value);
+  const ref = import_react31.default.useRef(null);
+  const latestValue = (0, import_react31.useRef)(value);
   latestValue.current = value;
-  const userDidEdit = (0, import_react30.useRef)(false);
-  const isSubmitTriggeredByEscapeKey = (0, import_react30.useRef)(false);
-  const [internalValue, setInternalValue] = (0, import_react30.useState)("");
-  (0, import_react30.useLayoutEffect)(() => {
+  const userDidEdit = (0, import_react31.useRef)(false);
+  const isSubmitTriggeredByEscapeKey = (0, import_react31.useRef)(false);
+  const [internalValue, setInternalValue] = (0, import_react31.useState)("");
+  (0, import_react31.useLayoutEffect)(() => {
     setInternalValue(value);
   }, [value]);
-  const handleSubmit = (0, import_react30.useCallback)(() => {
+  const handleSubmit = (0, import_react31.useCallback)(() => {
     const submissionValue = isSubmitTriggeredByEscapeKey.current ? value : internalValue;
     isSubmitTriggeredByEscapeKey.current = false;
     if (submissionValue === value && !allowSubmittingWithSameValue) return;
@@ -5261,12 +5338,12 @@ var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTe
     setInternalValue(latestValue.current);
   }, [allowSubmittingWithSameValue, value, internalValue, onSubmit]);
   useGlobalInputBlurListener(
-    (0, import_react30.useCallback)(() => {
+    (0, import_react31.useCallback)(() => {
       if (ref.current !== document.activeElement) return;
       handleSubmit();
     }, [handleSubmit])
   );
-  const handleKeyDown = (0, import_react30.useCallback)(
+  const handleKeyDown = (0, import_react31.useCallback)(
     (event) => {
       if (event.key === "Enter") {
         handleSubmit();
@@ -5281,14 +5358,14 @@ var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTe
     },
     [onKeyDown, handleSubmit]
   );
-  const handleChange = (0, import_react30.useCallback)(
+  const handleChange = (0, import_react31.useCallback)(
     (event) => {
       userDidEdit.current = true;
       setInternalValue(event.target.value);
     },
     []
   );
-  const handleBlur = (0, import_react30.useCallback)(
+  const handleBlur = (0, import_react31.useCallback)(
     (event) => {
       onBlur?.(event);
       onFocusChange?.(false);
@@ -5296,19 +5373,19 @@ var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTe
     },
     [onBlur, onFocusChange, handleSubmit]
   );
-  const handleFocusCapture = (0, import_react30.useCallback)(
+  const handleFocusCapture = (0, import_react31.useCallback)(
     (event) => {
       onFocusCapture?.(event);
       onFocusChange?.(true);
     },
     [onFocusCapture, onFocusChange]
   );
-  const autoSubmitTimeoutRef = (0, import_react30.useRef)(
+  const autoSubmitTimeoutRef = (0, import_react31.useRef)(
     null
   );
-  const latestHandleSubmit = (0, import_react30.useRef)(handleSubmit);
+  const latestHandleSubmit = (0, import_react31.useRef)(handleSubmit);
   latestHandleSubmit.current = handleSubmit;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (submitAutomaticallyAfterDelay) {
       if (autoSubmitTimeoutRef.current) {
         clearTimeout(autoSubmitTimeoutRef.current);
@@ -5324,7 +5401,7 @@ var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTe
       }
     };
   }, [internalValue, submitAutomaticallyAfterDelay]);
-  return /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(
     "input",
     {
       ref: (0, import_react_compose_refs.composeRefs)(ref, forwardedRef),
@@ -5337,13 +5414,13 @@ var SubmittableTextInput = (0, import_react30.forwardRef)(function SubmittableTe
     }
   );
 });
-var TextInput_default = (0, import_react30.forwardRef)(function TextInput(props, forwardedRef) {
+var TextInput_default = (0, import_react31.forwardRef)(function TextInput(props, forwardedRef) {
   const commonProps = {
-    onPointerDown: (0, import_react30.useCallback)(
+    onPointerDown: (0, import_react31.useCallback)(
       (event) => event.stopPropagation(),
       []
     ),
-    onClick: (0, import_react30.useCallback)(
+    onClick: (0, import_react31.useCallback)(
       (event) => event.stopPropagation(),
       []
     ),
@@ -5356,17 +5433,17 @@ var TextInput_default = (0, import_react30.forwardRef)(function TextInput(props,
     ...props
   };
   if ("readOnly" in commonProps) {
-    return /* @__PURE__ */ import_react30.default.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
+    return /* @__PURE__ */ import_react31.default.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
   } else if ("onChange" in commonProps) {
-    return /* @__PURE__ */ import_react30.default.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ import_react31.default.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
   } else {
-    return /* @__PURE__ */ import_react30.default.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ import_react31.default.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
   }
 });
 
 // src/components/Popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
-var import_react31 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var closeStyles = {
   all: "unset",
   fontFamily: "inherit"
@@ -5388,7 +5465,7 @@ function Popover({
   onFocusOutside,
   onClickClose
 }) {
-  return /* @__PURE__ */ import_react31.default.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react31.default.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ import_react31.default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ import_react32.default.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ import_react32.default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ import_react32.default.createElement(
     PopoverPrimitive.Content,
     {
       className: `rounded font-[14px] bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] max-h-[600px] overflow-y-auto text-text-muted z-[1000] ${variant === "large" ? "w-[680px]" : variant === "normal" ? "w-[240px]" : ""}`,
@@ -5404,20 +5481,20 @@ function Popover({
       arrowPadding: 2
     },
     children2,
-    showArrow && /* @__PURE__ */ import_react31.default.createElement(PopoverPrimitive.Arrow, { className: "fill-popover-background" }),
-    closable && /* @__PURE__ */ import_react31.default.createElement(
+    showArrow && /* @__PURE__ */ import_react32.default.createElement(PopoverPrimitive.Arrow, { className: "fill-popover-background" }),
+    closable && /* @__PURE__ */ import_react32.default.createElement(
       PopoverPrimitive.Close,
       {
         className: "rounded-full h-[25px] w-[25px] inline-flex items-center justify-center absolute top-[5px] right-[5px]",
         style: closeStyles
       },
-      /* @__PURE__ */ import_react31.default.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose })
+      /* @__PURE__ */ import_react32.default.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose })
     )
   )));
 }
 
 // src/components/InputField.tsx
-var InputFieldContext = (0, import_react32.createContext)({
+var InputFieldContext = (0, import_react33.createContext)({
   labelPosition: "end",
   labelSize: void 0,
   buttonSize: void 0,
@@ -5427,13 +5504,13 @@ var InputFieldContext = (0, import_react32.createContext)({
   onFocusChange: () => {
   }
 });
-var LabelContainer = (0, import_react32.forwardRef)(
+var LabelContainer = (0, import_react33.forwardRef)(
   ({ pointerEvents, $labelPosition, $hasDropdown, $size, className, style: style5, ...props }, ref) => {
-    const memoizedStyles = (0, import_react32.useMemo)(() => ({
+    const memoizedStyles = (0, import_react33.useMemo)(() => ({
       left: $labelPosition === "start" ? $size === "large" ? "6px" : $size === "medium" ? "2px" : "0px" : "",
       right: $labelPosition === "end" ? $size === "large" ? "6px" : $size === "medium" ? "2px" : "0px" : ""
     }), [$labelPosition, $size]);
-    return /* @__PURE__ */ import_react32.default.createElement(
+    return /* @__PURE__ */ import_react33.default.createElement(
       "label",
       {
         ref,
@@ -5444,22 +5521,22 @@ var LabelContainer = (0, import_react32.forwardRef)(
     );
   }
 );
-var InputFieldLabel = (0, import_react32.memo)(
-  (0, import_react32.forwardRef)(function InputFieldLabel2({
+var InputFieldLabel = (0, import_react33.memo)(
+  (0, import_react33.forwardRef)(function InputFieldLabel2({
     children: children2 = false,
     pointerEvents = "none",
     style: style5,
     className
   }, forwardedRef) {
-    const { labelPosition, hasDropdown, setLabelWidth, size: size3 } = (0, import_react32.useContext)(InputFieldContext);
-    const ref = (0, import_react32.useRef)(null);
-    (0, import_react32.useLayoutEffect)(() => {
+    const { labelPosition, hasDropdown, setLabelWidth, size: size3 } = (0, import_react33.useContext)(InputFieldContext);
+    const ref = (0, import_react33.useRef)(null);
+    (0, import_react33.useLayoutEffect)(() => {
       if (!setLabelWidth) return;
       const width = ref.current?.getBoundingClientRect().width;
       if (!width) return;
       setLabelWidth(width);
     }, [setLabelWidth]);
-    return /* @__PURE__ */ import_react32.default.createElement(
+    return /* @__PURE__ */ import_react33.default.createElement(
       LabelContainer,
       {
         $size: size3,
@@ -5477,7 +5554,7 @@ var InputFieldLabel = (0, import_react32.memo)(
     );
   })
 );
-var DropdownContainer = (0, import_react32.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react32.default.createElement(
+var DropdownContainer = (0, import_react33.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react33.default.createElement(
   "span",
   {
     ref,
@@ -5485,16 +5562,16 @@ var DropdownContainer = (0, import_react32.forwardRef)(({ className, ...props },
     ...props
   }
 ));
-var InputFieldDropdownMenu = (0, import_react32.memo)(function InputFieldDropdownMenu2({ id, items, onSelect, children: children2 }) {
-  const { size: size3 } = (0, import_react32.useContext)(InputFieldContext);
-  const contentStyle = (0, import_react32.useMemo)(
+var InputFieldDropdownMenu = (0, import_react33.memo)(function InputFieldDropdownMenu2({ id, items, onSelect, children: children2 }) {
+  const { size: size3 } = (0, import_react33.useContext)(InputFieldContext);
+  const contentStyle = (0, import_react33.useMemo)(
     () => ({
       margin: "-4px 0",
       minHeight: size3 === "small" ? "15px" : void 0
     }),
     [size3]
   );
-  return /* @__PURE__ */ import_react32.default.createElement(DropdownContainer, null, /* @__PURE__ */ import_react32.default.createElement(DropdownMenu, { items, onSelect }, children2 || /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(DropdownContainer, null, /* @__PURE__ */ import_react33.default.createElement(DropdownMenu, { items, onSelect }, children2 || /* @__PURE__ */ import_react33.default.createElement(
     Button,
     {
       id,
@@ -5502,10 +5579,10 @@ var InputFieldDropdownMenu = (0, import_react32.memo)(function InputFieldDropdow
       className: "flex flex-1",
       contentStyle
     },
-    /* @__PURE__ */ import_react32.default.createElement(import_noya_icons3.CaretDownIcon, null)
+    /* @__PURE__ */ import_react33.default.createElement(import_noya_icons3.CaretDownIcon, null)
   )));
 });
-var ButtonContainer = (0, import_react32.forwardRef)(({ $size, className, ...props }, ref) => /* @__PURE__ */ import_react32.default.createElement(
+var ButtonContainer = (0, import_react33.forwardRef)(({ $size, className, ...props }, ref) => /* @__PURE__ */ import_react33.default.createElement(
   "span",
   {
     ref,
@@ -5513,18 +5590,18 @@ var ButtonContainer = (0, import_react32.forwardRef)(({ $size, className, ...pro
     ...props
   }
 ));
-var InputFieldButton = (0, import_react32.memo)(
-  (0, import_react32.forwardRef)(function InputFieldButton2(props, forwardedRef) {
+var InputFieldButton = (0, import_react33.memo)(
+  (0, import_react33.forwardRef)(function InputFieldButton2(props, forwardedRef) {
     const { children: children2, onClick, ...rest } = props;
-    const { size: size3, inputRef, setButtonWidth } = (0, import_react32.useContext)(InputFieldContext);
-    const ref = (0, import_react32.useRef)(null);
-    (0, import_react32.useLayoutEffect)(() => {
+    const { size: size3, inputRef, setButtonWidth } = (0, import_react33.useContext)(InputFieldContext);
+    const ref = (0, import_react33.useRef)(null);
+    (0, import_react33.useLayoutEffect)(() => {
       if (!setButtonWidth) return;
       const width = ref.current?.getBoundingClientRect().width;
       if (!width) return;
       setButtonWidth(width);
     }, [setButtonWidth]);
-    const defaultHandleClick = (0, import_react32.useCallback)(
+    const defaultHandleClick = (0, import_react33.useCallback)(
       (event) => {
         if (inputRef && typeof inputRef !== "function") {
           inputRef.current?.focus();
@@ -5535,14 +5612,14 @@ var InputFieldButton = (0, import_react32.memo)(
       },
       [inputRef]
     );
-    const handlePointerDown = (0, import_react32.useCallback)(
+    const handlePointerDown = (0, import_react33.useCallback)(
       (event) => {
         event.preventDefault();
         event.stopPropagation();
       },
       []
     );
-    return /* @__PURE__ */ import_react32.default.createElement(ButtonContainer, { $size: size3 }, /* @__PURE__ */ import_react32.default.createElement(
+    return /* @__PURE__ */ import_react33.default.createElement(ButtonContainer, { $size: size3 }, /* @__PURE__ */ import_react33.default.createElement(
       Button,
       {
         ref: (element) => {
@@ -5560,7 +5637,7 @@ var InputFieldButton = (0, import_react32.memo)(
     ));
   })
 );
-var InputElement = (0, import_react32.forwardRef)(
+var InputElement = (0, import_react33.forwardRef)(
   ({
     disabled,
     readOnly,
@@ -5578,11 +5655,11 @@ var InputElement = (0, import_react32.forwardRef)(
   }, ref) => {
     const paddingLeft = ($size === "large" ? 10 : $size === "medium" ? 6 : 4) + ($labelSize && $labelPosition === "start" ? 6 + $labelSize : 0);
     const paddingRight = ($size === "large" ? 10 : $size === "medium" ? 6 : 1) + ($labelSize && $labelPosition === "end" ? 6 + $labelSize : 0) + ($hasDropdown ? 11 : 0);
-    const memoizedStyles = (0, import_react32.useMemo)(() => ({
+    const memoizedStyles = (0, import_react33.useMemo)(() => ({
       paddingLeft: `${paddingLeft}px`,
       paddingRight: `${paddingRight}px`
     }), [paddingLeft, paddingRight]);
-    return /* @__PURE__ */ import_react32.default.createElement(
+    return /* @__PURE__ */ import_react33.default.createElement(
       TextInput_default,
       {
         value: value ?? "",
@@ -5596,7 +5673,7 @@ var InputElement = (0, import_react32.forwardRef)(
     );
   }
 );
-var InputFieldInput = (0, import_react32.forwardRef)(function InputFieldInput2({ textAlign, variant, ...rest }, forwardedRef) {
+var InputFieldInput = (0, import_react33.forwardRef)(function InputFieldInput2({ textAlign, variant, ...rest }, forwardedRef) {
   const {
     labelPosition,
     labelSize,
@@ -5605,17 +5682,17 @@ var InputFieldInput = (0, import_react32.forwardRef)(function InputFieldInput2({
     size: size3,
     onFocusChange,
     setInputRef
-  } = (0, import_react32.useContext)(InputFieldContext);
-  const handleFocusChange = (0, import_react32.useCallback)(
+  } = (0, import_react33.useContext)(InputFieldContext);
+  const handleFocusChange = (0, import_react33.useCallback)(
     (isFocused) => {
       onFocusChange(isFocused);
     },
     [onFocusChange]
   );
-  (0, import_react32.useLayoutEffect)(() => {
+  (0, import_react33.useLayoutEffect)(() => {
     setInputRef?.(forwardedRef);
   }, [forwardedRef, setInputRef]);
-  return /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(
     InputElement,
     {
       ref: forwardedRef,
@@ -5637,8 +5714,8 @@ var InputFieldTypeahead = (props) => {
     hasDropdown,
     size: size3
     // onFocusChange,
-  } = (0, import_react32.useContext)(InputFieldContext);
-  return /* @__PURE__ */ import_react32.default.createElement(
+  } = (0, import_react33.useContext)(InputFieldContext);
+  return /* @__PURE__ */ import_react33.default.createElement(
     InputElement,
     {
       $labelPosition: labelPosition,
@@ -5649,8 +5726,8 @@ var InputFieldTypeahead = (props) => {
       value: "",
       className: "absolute inset-0 w-full h-full pointer-events-none bg-transparent shadow-none"
     },
-    /* @__PURE__ */ import_react32.default.createElement("span", { style: { opacity: 0 } }, props.prefix),
-    /* @__PURE__ */ import_react32.default.createElement("span", { style: { opacity: 0.5 } }, props.value.slice(props.prefix.length))
+    /* @__PURE__ */ import_react33.default.createElement("span", { style: { opacity: 0 } }, props.prefix),
+    /* @__PURE__ */ import_react33.default.createElement("span", { style: { opacity: 0.5 } }, props.value.slice(props.prefix.length))
   );
 };
 function parseNumber(value) {
@@ -5660,8 +5737,8 @@ function InputFieldNumberInput(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)(
+  const [internalValue, setInternalValue] = (0, import_react33.useState)();
+  const handleSubmit = (0, import_react33.useCallback)(
     (value2) => {
       const newValue = parseNumber(value2);
       if (!isNaN(newValue)) {
@@ -5670,7 +5747,7 @@ function InputFieldNumberInput(props) {
     },
     [onSubmit]
   );
-  const handleKeyDown = (0, import_react32.useCallback)(
+  const handleKeyDown = (0, import_react33.useCallback)(
     (event) => {
       const amount = handleNudge(event);
       if (!amount) return;
@@ -5681,7 +5758,7 @@ function InputFieldNumberInput(props) {
     },
     [onNudge]
   );
-  const handleChange = (0, import_react32.useCallback)(
+  const handleChange = (0, import_react33.useCallback)(
     (value2) => {
       if (value2 === "" || value2 === "-" || value2 === ".") {
         setInternalValue(value2);
@@ -5699,14 +5776,14 @@ function InputFieldNumberInput(props) {
     },
     [onChange]
   );
-  const handleBlur = (0, import_react32.useCallback)(
+  const handleBlur = (0, import_react33.useCallback)(
     (event) => {
       setInternalValue(void 0);
       onBlur?.(event);
     },
     [onBlur]
   );
-  return /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(
     InputFieldInput,
     {
       ...rest,
@@ -5718,7 +5795,7 @@ function InputFieldNumberInput(props) {
     }
   );
 }
-var RootContainer = (0, import_react32.forwardRef)(({ $width, $flex, className, ...props }, ref) => /* @__PURE__ */ import_react32.default.createElement(
+var RootContainer = (0, import_react33.forwardRef)(({ $width, $flex, className, ...props }, ref) => /* @__PURE__ */ import_react33.default.createElement(
   "div",
   {
     ref,
@@ -5739,30 +5816,30 @@ function InputFieldRoot({
   style: style5,
   className
 }) {
-  const childrenArray = import_react32.Children.toArray(children2);
+  const childrenArray = import_react33.Children.toArray(children2);
   const hasDropdown = childrenArray.some(
-    (child) => (0, import_react32.isValidElement)(child) && child.type === InputFieldDropdownMenu
+    (child) => (0, import_react33.isValidElement)(child) && child.type === InputFieldDropdownMenu
   );
-  const [isFocused, setIsFocused] = import_react32.default.useState(false);
-  const [measuredLabelSize, setMeasuredLabelSize] = import_react32.default.useState();
-  const [measuredButtonSize, setMeasuredButtonSize] = import_react32.default.useState();
-  const [measuredWidth, setMeasuredWidth] = import_react32.default.useState();
-  const handleFocusChange = (0, import_react32.useCallback)(
+  const [isFocused, setIsFocused] = import_react33.default.useState(false);
+  const [measuredLabelSize, setMeasuredLabelSize] = import_react33.default.useState();
+  const [measuredButtonSize, setMeasuredButtonSize] = import_react33.default.useState();
+  const [measuredWidth, setMeasuredWidth] = import_react33.default.useState();
+  const handleFocusChange = (0, import_react33.useCallback)(
     (isFocused2) => {
       setIsFocused(isFocused2);
       onFocusChange?.(isFocused2);
     },
     [onFocusChange]
   );
-  const [inputRef, setInputRef] = import_react32.default.useState();
-  (0, import_react32.useEffect)(() => {
+  const [inputRef, setInputRef] = import_react33.default.useState();
+  (0, import_react33.useEffect)(() => {
     if (inputRef && typeof inputRef !== "function") {
       setMeasuredWidth?.(
         isFocused ? inputRef?.current?.getBoundingClientRect().width : void 0
       );
     }
   }, [inputRef, isFocused]);
-  const contextValue = (0, import_react32.useMemo)(
+  const contextValue = (0, import_react33.useMemo)(
     () => ({
       labelPosition,
       labelSize: measuredLabelSize ?? labelSize,
@@ -5788,7 +5865,7 @@ function InputFieldRoot({
       inputRef
     ]
   );
-  const rootElement = /* @__PURE__ */ import_react32.default.createElement(
+  const rootElement = /* @__PURE__ */ import_react33.default.createElement(
     RootContainer,
     {
       id,
@@ -5799,7 +5876,7 @@ function InputFieldRoot({
     },
     children2
   );
-  return /* @__PURE__ */ import_react32.default.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ import_react33.default.createElement(
     Popover,
     {
       open: true,
@@ -5815,7 +5892,7 @@ function InputFieldRoot({
         event.stopPropagation();
       }
     },
-    measuredWidth && /* @__PURE__ */ import_react32.default.createElement("div", { className: `flex flex-col w-[${measuredWidth}] hidden` }, renderPopoverContent({ width: measuredWidth }))
+    measuredWidth && /* @__PURE__ */ import_react33.default.createElement("div", { className: `flex flex-col w-[${measuredWidth}] hidden` }, renderPopoverContent({ width: measuredWidth }))
   ) : rootElement);
 }
 var PrimitiveInputField = ({
@@ -5823,7 +5900,7 @@ var PrimitiveInputField = ({
   disabled,
   className,
   ...props
-}) => /* @__PURE__ */ import_react32.default.createElement(
+}) => /* @__PURE__ */ import_react33.default.createElement(
   "input",
   {
     className: `flex w-0 flex-1 relative border-none outline-none min-w-0 self-stretch rounded py-1 px-1.5 bg-input-background select-all pointer-events-[all] focus:ring-2 focus:ring-primary focus:z-10 font-sans font-normal text-heading5 placeholder:text-text-disabled ${readOnly ? "text-text-muted" : disabled ? "text-text-disabled" : "text-text"} ${className ?? ""}`,
@@ -5832,10 +5909,10 @@ var PrimitiveInputField = ({
 );
 var InputField;
 ((InputField2) => {
-  InputField2.Root = (0, import_react32.memo)(InputFieldRoot);
-  InputField2.Input = (0, import_react32.memo)(InputFieldInput);
-  InputField2.Typeahead = (0, import_react32.memo)(InputFieldTypeahead);
-  InputField2.NumberInput = (0, import_react32.memo)(InputFieldNumberInput);
+  InputField2.Root = (0, import_react33.memo)(InputFieldRoot);
+  InputField2.Input = (0, import_react33.memo)(InputFieldInput);
+  InputField2.Typeahead = (0, import_react33.memo)(InputFieldTypeahead);
+  InputField2.NumberInput = (0, import_react33.memo)(InputFieldNumberInput);
   InputField2.DropdownMenu = InputFieldDropdownMenu;
   InputField2.Button = InputFieldButton;
   InputField2.Label = InputFieldLabel;
@@ -5854,22 +5931,22 @@ function createDeferredPromise() {
   });
   return { promise, resolve, reject };
 }
-var DialogContext = (0, import_react33.createContext)(void 0);
+var DialogContext = (0, import_react34.createContext)(void 0);
 var DialogProvider = function DialogProvider2({
   children: children2
 }) {
-  const [contents, setContents] = (0, import_react33.useState)();
+  const [contents, setContents] = (0, import_react34.useState)();
   const isOpen = !!contents;
-  const close = (0, import_react33.useCallback)(() => {
+  const close = (0, import_react34.useCallback)(() => {
     if (!contents) return;
     contents.resolve(void 0);
   }, [contents]);
-  const submit = (0, import_react33.useCallback)(() => {
+  const submit = (0, import_react34.useCallback)(() => {
     if (!contents || !contents.inputValue) return;
     contents.resolve(contents.inputValue);
     setContents(void 0);
   }, [contents]);
-  const open = (0, import_react33.useCallback)(
+  const open = (0, import_react34.useCallback)(
     (title, inputValue = "") => {
       const { promise, resolve } = createDeferredPromise();
       setContents({
@@ -5884,7 +5961,7 @@ var DialogProvider = function DialogProvider2({
     },
     []
   );
-  const handleKeyDown = (0, import_react33.useCallback)(
+  const handleKeyDown = (0, import_react34.useCallback)(
     (event) => {
       if (event.key !== "Enter") return;
       event.stopPropagation();
@@ -5893,28 +5970,28 @@ var DialogProvider = function DialogProvider2({
     },
     [submit]
   );
-  const inputRef = (0, import_react33.useRef)(null);
-  const dialogRef = (0, import_react33.useRef)(null);
-  const containsElement = (0, import_react33.useCallback)((element) => {
+  const inputRef = (0, import_react34.useRef)(null);
+  const dialogRef = (0, import_react34.useRef)(null);
+  const containsElement = (0, import_react34.useCallback)((element) => {
     if (!dialogRef.current) return false;
     return dialogRef.current.containsElement(element);
   }, []);
-  return /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
+  return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(
     DialogContext.Provider,
     {
-      value: (0, import_react33.useMemo)(
+      value: (0, import_react34.useMemo)(
         () => ({ openInputDialog: open, containsElement }),
         [containsElement, open]
       )
     },
     children2
-  ), /* @__PURE__ */ import_react33.default.createElement(
+  ), /* @__PURE__ */ import_react34.default.createElement(
     Dialog,
     {
       ref: dialogRef,
       title: contents?.title,
       open: isOpen,
-      onOpenChange: (0, import_react33.useCallback)(
+      onOpenChange: (0, import_react34.useCallback)(
         (isOpen2) => {
           if (!isOpen2) {
             close();
@@ -5922,14 +5999,14 @@ var DialogProvider = function DialogProvider2({
         },
         [close]
       ),
-      onOpenAutoFocus: (0, import_react33.useCallback)((event) => {
+      onOpenAutoFocus: (0, import_react34.useCallback)((event) => {
         event.stopPropagation();
         event.preventDefault();
         inputRef.current?.focus();
         inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
       }, [])
     },
-    /* @__PURE__ */ import_react33.default.createElement(InputField.Root, null, /* @__PURE__ */ import_react33.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement(InputField.Root, null, /* @__PURE__ */ import_react34.default.createElement(
       InputField.Input,
       {
         ref: inputRef,
@@ -5945,12 +6022,12 @@ var DialogProvider = function DialogProvider2({
         onKeyDown: handleKeyDown
       }
     )),
-    /* @__PURE__ */ import_react33.default.createElement(Spacer.Vertical, { size: 20 }),
-    /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex-1 flex-row items-center" }, /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react33.default.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ import_react33.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react33.default.createElement(Button, { disabled: !contents?.inputValue, onClick: submit }, "Submit"))
+    /* @__PURE__ */ import_react34.default.createElement(Spacer.Vertical, { size: 20 }),
+    /* @__PURE__ */ import_react34.default.createElement("div", { className: "flex-1 flex-row items-center" }, /* @__PURE__ */ import_react34.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react34.default.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ import_react34.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react34.default.createElement(Button, { disabled: !contents?.inputValue, onClick: submit }, "Submit"))
   ));
 };
 function useDialog() {
-  const value = (0, import_react33.useContext)(DialogContext);
+  const value = (0, import_react34.useContext)(DialogContext);
   if (!value) {
     throw new Error("Missing DialogProvider");
   }
@@ -5965,20 +6042,20 @@ function useDialogContainsElement() {
 
 // src/contexts/FloatingWindowContext.tsx
 var import_noya_utils5 = require("@noya-app/noya-utils");
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
-var FloatingWindowContext = (0, import_react34.createContext)(void 0);
-var CurrentWindowContext = (0, import_react34.createContext)(void 0);
+var FloatingWindowContext = (0, import_react35.createContext)(void 0);
+var CurrentWindowContext = (0, import_react35.createContext)(void 0);
 var FloatingWindowProvider = ({
   children: children2
 }) => {
-  const [windows, setWindows] = (0, import_react34.useState)({});
-  const contextValue = (0, import_react34.useMemo)(() => {
+  const [windows, setWindows] = (0, import_react35.useState)({});
+  const contextValue = (0, import_react35.useMemo)(() => {
     const createWindow = (element) => {
       const id = (0, import_noya_utils5.uuid)();
       setWindows((windows2) => ({
         ...windows2,
-        [id]: /* @__PURE__ */ import_react34.default.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
+        [id]: /* @__PURE__ */ import_react35.default.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
       }));
       return id;
     };
@@ -5990,12 +6067,12 @@ var FloatingWindowProvider = ({
     };
     return { createWindow, closeWindow };
   }, []);
-  return /* @__PURE__ */ import_react34.default.createElement(FloatingWindowContext.Provider, { value: contextValue }, children2, Object.entries(windows).map(
+  return /* @__PURE__ */ import_react35.default.createElement(FloatingWindowContext.Provider, { value: contextValue }, children2, Object.entries(windows).map(
     ([id, element]) => (0, import_react_dom.createPortal)(element, document.body, id)
   ));
 };
 var useFloatingWindowManager = () => {
-  const context = (0, import_react34.useContext)(FloatingWindowContext);
+  const context = (0, import_react35.useContext)(FloatingWindowContext);
   if (!context) {
     throw new Error(
       "useFloatingWindow must be used within a FloatingWindowProvider"
@@ -6004,7 +6081,7 @@ var useFloatingWindowManager = () => {
   return context;
 };
 var useCurrentFloatingWindowInternal = () => {
-  const context = (0, import_react34.useContext)(CurrentWindowContext);
+  const context = (0, import_react35.useContext)(CurrentWindowContext);
   if (!context) {
     throw new Error("useCurrentWindow must be used within a FloatingWindow");
   }
@@ -6012,45 +6089,56 @@ var useCurrentFloatingWindowInternal = () => {
 };
 
 // src/contexts/DesignSystemConfiguration.tsx
-var DesignSystemConfigurationContext = (0, import_react35.createContext)({
+var DesignSystemConfigurationContext = (0, import_react36.createContext)({
   platform: "key"
 });
-var DesignSystemConfigurationProvider = (0, import_react35.memo)(
+var DesignSystemConfigurationProvider = (0, import_react36.memo)(
   function DesignSystemConfigurationProvider2({
     children: children2,
     platform
   }) {
-    const [internalPlatform, setInternalPlatform] = (0, import_react35.useState)(
+    const [internalPlatform, setInternalPlatform] = (0, import_react36.useState)(
       platform ?? "key"
     );
-    (0, import_react35.useEffect)(() => {
+    (0, import_react36.useEffect)(() => {
       if (platform !== void 0) return;
       if (typeof navigator !== "undefined") {
         setInternalPlatform((0, import_noya_keymap2.getCurrentPlatform)(navigator));
       }
     }, [platform]);
-    const contextValue = (0, import_react35.useMemo)(
+    const contextValue = (0, import_react36.useMemo)(
       () => ({ platform: platform ?? internalPlatform }),
       [platform, internalPlatform]
     );
-    return /* @__PURE__ */ import_react35.default.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react35.default.createElement(DialogProvider, null, /* @__PURE__ */ import_react35.default.createElement(ToastProvider, null, /* @__PURE__ */ import_react35.default.createElement(FloatingWindowProvider, null, children2))));
+    return /* @__PURE__ */ import_react36.default.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react36.default.createElement(DialogProvider, null, /* @__PURE__ */ import_react36.default.createElement(ToastProvider, null, /* @__PURE__ */ import_react36.default.createElement(FloatingWindowProvider, null, children2))));
   }
 );
 function useDesignSystemConfiguration() {
-  return (0, import_react35.useContext)(DesignSystemConfigurationContext);
+  return (0, import_react36.useContext)(DesignSystemConfigurationContext);
 }
 
 // src/utils/withSeparatorElements.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
+function flattenChildren(children2, traverseFragments) {
+  return import_react37.Children.toArray(children2).flatMap((child) => {
+    if (traverseFragments && (0, import_react37.isValidElement)(child) && child.type === import_react37.Fragment) {
+      return flattenChildren(child.props.children, traverseFragments);
+    }
+    return child;
+  });
+}
 function createKey(key) {
   return `s-${key}`;
 }
-function withSeparatorElements(elements2, separator) {
-  const childrenArray = import_react36.Children.toArray(elements2);
+function withSeparatorElements(elements2, separator, options) {
+  const childrenArray = flattenChildren(
+    elements2,
+    options?.traverseFragments ?? true
+  );
   for (let i = childrenArray.length - 1; i > 0; i--) {
-    let sep = typeof separator === "function" ? separator() : (0, import_react36.isValidElement)(separator) ? (0, import_react36.cloneElement)(separator, { key: createKey(i) }) : separator;
-    if ((0, import_react36.isValidElement)(sep) && sep.key == null) {
-      sep = (0, import_react36.cloneElement)(sep, { key: createKey(i) });
+    let sep = typeof separator === "function" ? separator() : (0, import_react37.isValidElement)(separator) ? (0, import_react37.cloneElement)(separator, { key: createKey(i) }) : separator;
+    if ((0, import_react37.isValidElement)(sep) && sep.key == null) {
+      sep = (0, import_react37.cloneElement)(sep, { key: createKey(i) });
     }
     if (!sep || typeof sep === "boolean") continue;
     childrenArray.splice(i, 0, sep);
@@ -6101,13 +6189,13 @@ function getKeyboardShortcutsForMenuItems(menuItems, onSelect) {
     menuItems.flatMap(getKeyboardShortcuts).map(([key, value]) => [key, () => onSelect(value)])
   );
 }
-var ShortcutElement = ({ children: children2, fixedWidth }) => /* @__PURE__ */ import_react37.default.createElement("kbd", { className: cn(textStyles.small, "text-text-disabled", fixedWidth && "w-[0.9rem] text-center") }, children2);
-var KeyboardShortcut = (0, import_react37.memo)(function KeyboardShortcut2({
+var ShortcutElement = ({ children: children2, fixedWidth }) => /* @__PURE__ */ import_react38.default.createElement("kbd", { className: cn(textStyles.small, "text-text-disabled", fixedWidth && "w-[0.9rem] text-center") }, children2);
+var KeyboardShortcut = (0, import_react38.memo)(function KeyboardShortcut2({
   shortcut
 }) {
   const platform = useDesignSystemConfiguration().platform;
   const { keys, separator } = (0, import_noya_keymap3.getShortcutDisplayParts)(shortcut, platform);
-  const keyElements = keys.map((key) => /* @__PURE__ */ import_react37.default.createElement(
+  const keyElements = keys.map((key) => /* @__PURE__ */ import_react38.default.createElement(
     ShortcutElement,
     {
       key,
@@ -6115,14 +6203,14 @@ var KeyboardShortcut = (0, import_react37.memo)(function KeyboardShortcut2({
     },
     key
   ));
-  return /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, separator ? withSeparatorElements(
+  return /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, separator ? withSeparatorElements(
     keyElements,
-    /* @__PURE__ */ import_react37.default.createElement(ShortcutElement, null, separator)
+    /* @__PURE__ */ import_react38.default.createElement(ShortcutElement, null, separator)
   ) : keyElements);
 });
 
 // src/components/ContextMenu.tsx
-var ContextMenuItem2 = (0, import_react38.memo)(function ContextMenuItem3({
+var ContextMenuItem2 = (0, import_react39.memo)(function ContextMenuItem3({
   value,
   children: children2,
   onSelect,
@@ -6133,16 +6221,16 @@ var ContextMenuItem2 = (0, import_react38.memo)(function ContextMenuItem3({
   items,
   shortcut
 }) {
-  const handlePointerDown = (0, import_react38.useCallback)(
+  const handlePointerDown = (0, import_react39.useCallback)(
     (event) => event.stopPropagation(),
     []
   );
-  const handleSelectItem = (0, import_react38.useCallback)(() => {
+  const handleSelectItem = (0, import_react39.useCallback)(() => {
     if (!value) return;
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ import_react38.default.createElement(
+    return /* @__PURE__ */ import_react39.default.createElement(
       RadixContextMenu.CheckboxItem,
       {
         checked,
@@ -6150,11 +6238,11 @@ var ContextMenuItem2 = (0, import_react38.memo)(function ContextMenuItem3({
         onSelect: handleSelectItem,
         className: styles.itemStyle({ disabled })
       },
-      /* @__PURE__ */ import_react38.default.createElement(RadixContextMenu.ItemIndicator, { className: styles.itemIndicatorStyle }, /* @__PURE__ */ import_react38.default.createElement(import_noya_icons4.CheckIcon, null)),
+      /* @__PURE__ */ import_react39.default.createElement(RadixContextMenu.ItemIndicator, { className: styles.itemIndicatorStyle }, /* @__PURE__ */ import_react39.default.createElement(import_noya_icons4.CheckIcon, null)),
       children2
     );
   }
-  const element = /* @__PURE__ */ import_react38.default.createElement(
+  const element = /* @__PURE__ */ import_react39.default.createElement(
     RadixContextMenu.Item,
     {
       className: styles.itemStyle({ disabled }),
@@ -6162,14 +6250,14 @@ var ContextMenuItem2 = (0, import_react38.memo)(function ContextMenuItem3({
       onSelect: handleSelectItem,
       onPointerDown: handlePointerDown
     },
-    indented && /* @__PURE__ */ import_react38.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
-    icon && /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react38.default.createElement(Spacer.Horizontal, { size: 8 })),
+    indented && /* @__PURE__ */ import_react39.default.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
+    icon && /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react39.default.createElement(Spacer.Horizontal, { size: 8 })),
     children2,
-    shortcut && /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react38.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react38.default.createElement(KeyboardShortcut, { shortcut })),
-    items && items.length > 0 && /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react38.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react38.default.createElement(import_noya_icons4.ChevronRightIcon, null))
+    shortcut && /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, /* @__PURE__ */ import_react39.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react39.default.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ import_react39.default.createElement(KeyboardShortcut, { shortcut })),
+    items && items.length > 0 && /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, /* @__PURE__ */ import_react39.default.createElement(Spacer.Horizontal, null), /* @__PURE__ */ import_react39.default.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ import_react39.default.createElement(import_noya_icons4.ChevronRightIcon, null))
   );
   if (items && items.length > 0) {
-    return /* @__PURE__ */ import_react38.default.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
+    return /* @__PURE__ */ import_react39.default.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
   } else {
     return element;
   }
@@ -6185,19 +6273,19 @@ function ContextMenuRoot({
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
   );
-  const keymap = (0, import_react38.useMemo)(
+  const keymap = (0, import_react39.useMemo)(
     () => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
   (0, import_noya_keymap4.useKeyboardShortcuts)(keymap);
-  const onPointerDown = (0, import_react38.useCallback)((event) => {
+  const onPointerDown = (0, import_react39.useCallback)((event) => {
     event.preventDefault();
   }, []);
   const RootComponent = isNested ? RadixContextMenu.Sub : RadixContextMenu.Root;
   const TriggerComponent = isNested ? RadixContextMenu.SubTrigger : RadixContextMenu.Trigger;
   const ContentComponent = isNested ? RadixContextMenu.SubContent : RadixContextMenu.Content;
-  return /* @__PURE__ */ import_react38.default.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ import_react38.default.createElement(TriggerComponent, { asChild: true, onPointerDown }, children2), /* @__PURE__ */ import_react38.default.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ import_react38.default.createElement(ContentComponent, { className: styles.contentStyle }, items.map(
-    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react38.default.createElement(RadixContextMenu.Separator, { key: index, className: styles.separatorStyle }) : /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ import_react39.default.createElement(TriggerComponent, { asChild: true, onPointerDown }, children2), /* @__PURE__ */ import_react39.default.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ import_react39.default.createElement(ContentComponent, { className: styles.contentStyle }, items.map(
+    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ import_react39.default.createElement(RadixContextMenu.Separator, { key: index, className: styles.separatorStyle }) : /* @__PURE__ */ import_react39.default.createElement(
       ContextMenuItem2,
       {
         key: item.value ?? index,
@@ -6214,18 +6302,18 @@ function ContextMenuRoot({
     )
   ))));
 }
-var ContextMenu = (0, import_react38.memo)(ContextMenuRoot);
+var ContextMenu = (0, import_react39.memo)(ContextMenuRoot);
 
 // src/components/Divider.tsx
-var import_react39 = __toESM(require("react"));
-var Divider = (0, import_react39.memo)(function Divider2({
+var import_react40 = __toESM(require("react"));
+var Divider = (0, import_react40.memo)(function Divider2({
   variant = "normal",
   overflow = 0,
   className,
   style: style5,
   ...props
 }) {
-  return /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react40.default.createElement(
     "div",
     {
       className: `
@@ -6243,13 +6331,13 @@ var Divider = (0, import_react39.memo)(function Divider2({
     }
   );
 });
-var DividerVertical = (0, import_react39.memo)(function DividerVertical2({
+var DividerVertical = (0, import_react40.memo)(function DividerVertical2({
   variant = "normal",
   overflow = 0,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react40.default.createElement(
     "div",
     {
       className: `
@@ -6266,8 +6354,8 @@ var DividerVertical = (0, import_react39.memo)(function DividerVertical2({
 
 // src/components/DraggableMenuButton.tsx
 var import_noya_icons5 = require("@noya-app/noya-icons");
-var import_react40 = __toESM(require("react"));
-var DotButton = (0, import_react40.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react40.default.createElement(
+var import_react41 = __toESM(require("react"));
+var DotButton = (0, import_react41.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react41.default.createElement(
   "div",
   {
     ref,
@@ -6275,7 +6363,7 @@ var DotButton = (0, import_react40.forwardRef)(({ className, ...props }, ref) =>
     ...props
   }
 ));
-var Trigger5 = (0, import_react40.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react40.default.createElement(
+var Trigger5 = (0, import_react41.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react41.default.createElement(
   "div",
   {
     ref,
@@ -6283,14 +6371,14 @@ var Trigger5 = (0, import_react40.forwardRef)(({ className, ...props }, ref) =>
     ...props
   }
 ));
-var DraggableMenuButton = (0, import_react40.memo)(function DraggableMenuButton2({
+var DraggableMenuButton = (0, import_react41.memo)(function DraggableMenuButton2({
   items,
   onSelect,
   isVisible = true
 }) {
-  const [open, setOpen] = (0, import_react40.useState)(false);
-  const [downPosition, setDownPosition] = (0, import_react40.useState)(null);
-  const handlePointerDownCapture = (0, import_react40.useCallback)(
+  const [open, setOpen] = (0, import_react41.useState)(false);
+  const [downPosition, setDownPosition] = (0, import_react41.useState)(null);
+  const handlePointerDownCapture = (0, import_react41.useCallback)(
     (event) => {
       if (open) {
         setDownPosition(null);
@@ -6303,7 +6391,7 @@ var DraggableMenuButton = (0, import_react40.memo)(function DraggableMenuButton2
     },
     [open]
   );
-  const handlePointerUp = (0, import_react40.useCallback)(
+  const handlePointerUp = (0, import_react41.useCallback)(
     (event) => {
       if (open || !downPosition) {
         setDownPosition(null);
@@ -6319,13 +6407,13 @@ var DraggableMenuButton = (0, import_react40.memo)(function DraggableMenuButton2
     },
     [downPosition, open]
   );
-  const handleOpenChange = (0, import_react40.useCallback)(
+  const handleOpenChange = (0, import_react41.useCallback)(
     (isOpen) => {
       if (!isOpen) setOpen(false);
     },
     [setOpen]
   );
-  return /* @__PURE__ */ import_react40.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(
     DotButton,
     {
       onPointerDownCapture: handlePointerDownCapture,
@@ -6335,7 +6423,7 @@ var DraggableMenuButton = (0, import_react40.memo)(function DraggableMenuButton2
         event.preventDefault();
       }
     },
-    items && onSelect ? /* @__PURE__ */ import_react40.default.createElement(
+    items && onSelect ? /* @__PURE__ */ import_react41.default.createElement(
       DropdownMenu,
       {
         open,
@@ -6344,13 +6432,13 @@ var DraggableMenuButton = (0, import_react40.memo)(function DraggableMenuButton2
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ import_react40.default.createElement(Trigger5, null, /* @__PURE__ */ import_react40.default.createElement(
+      /* @__PURE__ */ import_react41.default.createElement(Trigger5, null, /* @__PURE__ */ import_react41.default.createElement(
         import_noya_icons5.DragHandleDots2Icon,
         {
           color: isVisible || open ? "var(--icon)" : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ import_react40.default.createElement(
+    ) : /* @__PURE__ */ import_react41.default.createElement(
       import_noya_icons5.DragHandleDots2Icon,
       {
         color: isVisible || open ? "var(--icon)" : "transparent"
@@ -6360,7 +6448,7 @@ var DraggableMenuButton = (0, import_react40.memo)(function DraggableMenuButton2
 });
 
 // src/components/FillInputField.tsx
-var import_react44 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 
 // ../noya-file-format/src/types.ts
 var types_exports = {};
@@ -6685,25 +6773,25 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 
 // src/components/FillPreviewBackground.tsx
-var import_react43 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 
 // src/contexts/ImageDataContext.tsx
-var import_react41 = __toESM(require("react"));
-var ImageDataContext = (0, import_react41.createContext)(
+var import_react42 = __toESM(require("react"));
+var ImageDataContext = (0, import_react42.createContext)(
   void 0
 );
-var ImageDataProvider = (0, import_react41.memo)(function ImageDataProvider2({
+var ImageDataProvider = (0, import_react42.memo)(function ImageDataProvider2({
   children: children2,
   getImageData
 }) {
-  const contextValue = (0, import_react41.useMemo)(
+  const contextValue = (0, import_react42.useMemo)(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ import_react41.default.createElement(ImageDataContext.Provider, { value: contextValue }, children2);
+  return /* @__PURE__ */ import_react42.default.createElement(ImageDataContext.Provider, { value: contextValue }, children2);
 });
 function useImageData(ref) {
-  const value = (0, import_react41.useContext)(ImageDataContext);
+  const value = (0, import_react42.useContext)(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -6711,14 +6799,14 @@ function useImageData(ref) {
 }
 
 // src/hooks/useObjectURL.ts
-var import_react42 = require("react");
+var import_react43 = require("react");
 function useObjectURL(object) {
-  const objectURL = (0, import_react42.useMemo)(() => {
+  const objectURL = (0, import_react43.useMemo)(() => {
     if (object instanceof Blob) return URL.createObjectURL(object);
     const bytes = object instanceof Uint8Array ? object : object !== void 0 ? new Uint8Array(object) : new Uint8Array();
     return URL.createObjectURL(new Blob([bytes]));
   }, [object]);
-  (0, import_react42.useLayoutEffect)(() => {
+  (0, import_react43.useLayoutEffect)(() => {
     return () => URL.revokeObjectURL(objectURL);
   }, [objectURL]);
   return objectURL;
@@ -6769,8 +6857,8 @@ var dotsHorizontalSvg = (fillColor) => `
     <path d='M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM12.5 8.625C13.1213 8.625 13.625 8.12132 13.625 7.5C13.625 6.87868 13.1213 6.375 12.5 6.375C11.8787 6.375 11.375 6.87868 11.375 7.5C11.375 8.12132 11.8787 8.625 12.5 8.625Z'></path>
   </svg>
 `;
-var Background = (0, import_react43.memo)(function Background2({ background: background2 }) {
-  return /* @__PURE__ */ import_react43.default.createElement(
+var Background = (0, import_react44.memo)(function Background2({ background: background2 }) {
+  return /* @__PURE__ */ import_react44.default.createElement(
     "span",
     {
       className: cn(
@@ -6792,7 +6880,7 @@ function getPatternSizeAndPosition(fillType, tileScale) {
       return "center / 100% 100%";
   }
 }
-var PatternPreviewBackground = (0, import_react43.memo)(function PatternPreviewBackground2({
+var PatternPreviewBackground = (0, import_react44.memo)(function PatternPreviewBackground2({
   fillType,
   tileScale,
   imageRef
@@ -6800,7 +6888,7 @@ var PatternPreviewBackground = (0, import_react43.memo)(function PatternPreviewB
   const image = useImageData(imageRef);
   const url = useObjectURL(image);
   const size3 = getPatternSizeAndPosition(fillType, tileScale);
-  const background2 = (0, import_react43.useMemo)(
+  const background2 = (0, import_react44.useMemo)(
     () => [
       size3,
       `url(${url})`,
@@ -6808,30 +6896,30 @@ var PatternPreviewBackground = (0, import_react43.memo)(function PatternPreviewB
     ].join(" "),
     [fillType, size3, url]
   );
-  return /* @__PURE__ */ import_react43.default.createElement(Background, { background: background2 });
+  return /* @__PURE__ */ import_react44.default.createElement(Background, { background: background2 });
 });
-var ColorPreviewBackground = (0, import_react43.memo)(function ColorPreviewBackground2({
+var ColorPreviewBackground = (0, import_react44.memo)(function ColorPreviewBackground2({
   color
 }) {
-  const background2 = (0, import_react43.useMemo)(() => sketchColorToRgbaString(color), [color]);
-  return /* @__PURE__ */ import_react43.default.createElement(Background, { background: background2 });
+  const background2 = (0, import_react44.useMemo)(() => sketchColorToRgbaString(color), [color]);
+  return /* @__PURE__ */ import_react44.default.createElement(Background, { background: background2 });
 });
-var GradientPreviewBackground = (0, import_react43.memo)(function GradientPreviewBackground2({
+var GradientPreviewBackground = (0, import_react44.memo)(function GradientPreviewBackground2({
   gradient
 }) {
-  const background2 = (0, import_react43.useMemo)(
+  const background2 = (0, import_react44.useMemo)(
     () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
     [gradient.gradientType, gradient.stops]
   );
-  return /* @__PURE__ */ import_react43.default.createElement(Background, { background: background2 });
+  return /* @__PURE__ */ import_react44.default.createElement(Background, { background: background2 });
 });
 var background = `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
   "var(--placeholder-dots)"
 )}") no-repeat`;
-var FillPreviewBackground = (0, import_react43.memo)(function FillPreviewBackground2({
+var FillPreviewBackground = (0, import_react44.memo)(function FillPreviewBackground2({
   value
 }) {
-  if (!value) return /* @__PURE__ */ import_react43.default.createElement(
+  if (!value) return /* @__PURE__ */ import_react44.default.createElement(
     Background,
     {
       background
@@ -6839,12 +6927,12 @@ var FillPreviewBackground = (0, import_react43.memo)(function FillPreviewBackgro
   );
   switch (value._class) {
     case "color":
-      return /* @__PURE__ */ import_react43.default.createElement(ColorPreviewBackground, { color: value });
+      return /* @__PURE__ */ import_react44.default.createElement(ColorPreviewBackground, { color: value });
     case "gradient":
-      return /* @__PURE__ */ import_react43.default.createElement(GradientPreviewBackground, { gradient: value });
+      return /* @__PURE__ */ import_react44.default.createElement(GradientPreviewBackground, { gradient: value });
     case "pattern":
       if (!value.image) return null;
-      return /* @__PURE__ */ import_react43.default.createElement(
+      return /* @__PURE__ */ import_react44.default.createElement(
         PatternPreviewBackground,
         {
           fillType: value.patternFillType,
@@ -6856,7 +6944,7 @@ var FillPreviewBackground = (0, import_react43.memo)(function FillPreviewBackgro
 });
 
 // src/components/FillInputField.tsx
-var FillButton = (0, import_react44.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react44.default.createElement(
+var FillButton = (0, import_react45.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react45.default.createElement(
   "button",
   {
     ref,
@@ -6864,14 +6952,14 @@ var FillButton = (0, import_react44.forwardRef)(({ className, ...props }, ref) =
     ...props
   }
 ));
-var FillInputField = (0, import_react44.memo)(
-  (0, import_react44.forwardRef)(function FillInputField2({ id, value, ...rest }, ref) {
-    return /* @__PURE__ */ import_react44.default.createElement(FillButton, { ref, id, ...rest }, /* @__PURE__ */ import_react44.default.createElement(FillPreviewBackground, { value }));
+var FillInputField = (0, import_react45.memo)(
+  (0, import_react45.forwardRef)(function FillInputField2({ id, value, ...rest }, ref) {
+    return /* @__PURE__ */ import_react45.default.createElement(FillButton, { ref, id, ...rest }, /* @__PURE__ */ import_react45.default.createElement(FillPreviewBackground, { value }));
   })
 );
 
 // src/components/FloatingWindow.tsx
-var import_react45 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -6964,7 +7052,7 @@ function defaultRenderToolbar({
   toolbarContent,
   onClose
 }) {
-  return /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null, /* @__PURE__ */ import_react45.default.createElement(Small, { className: "flex-1 font-medium text-text" }, title), toolbarContent, /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(import_react46.default.Fragment, null, /* @__PURE__ */ import_react46.default.createElement(Small, { className: "flex-1 font-medium text-text" }, title), toolbarContent, /* @__PURE__ */ import_react46.default.createElement(
     IconButton,
     {
       iconName: "Cross3Icon",
@@ -6989,16 +7077,16 @@ var FloatingWindow = ({
   toolbarContent,
   renderToolbar = defaultRenderToolbar
 }) => {
-  const [position, setPosition] = (0, import_react45.useState)({ x: initialX, y: initialY });
-  const [size3, setSize] = (0, import_react45.useState)({
+  const [position, setPosition] = (0, import_react46.useState)({ x: initialX, y: initialY });
+  const [size3, setSize] = (0, import_react46.useState)({
     width: initialWidth,
     height: initialHeight
   });
-  const [isDragging, setIsDragging] = (0, import_react45.useState)(false);
-  const [isResizing, setIsResizing] = (0, import_react45.useState)(false);
-  const [dragOffset, setDragOffset] = (0, import_react45.useState)({ x: 0, y: 0 });
-  const [resizeDirection, setResizeDirection] = (0, import_react45.useState)(null);
-  const wrapperRef = (0, import_react45.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react46.useState)(false);
+  const [isResizing, setIsResizing] = (0, import_react46.useState)(false);
+  const [dragOffset, setDragOffset] = (0, import_react46.useState)({ x: 0, y: 0 });
+  const [resizeDirection, setResizeDirection] = (0, import_react46.useState)(null);
+  const wrapperRef = (0, import_react46.useRef)(null);
   const toggleGlobalTextSelection = (disable) => {
     if (disable) {
       document.body.style.userSelect = "none";
@@ -7006,7 +7094,7 @@ var FloatingWindow = ({
       document.body.style.userSelect = "";
     }
   };
-  const handleMouseDown = (0, import_react45.useCallback)((e) => {
+  const handleMouseDown = (0, import_react46.useCallback)((e) => {
     if (!wrapperRef.current) return;
     const rect = wrapperRef.current.getBoundingClientRect();
     setDragOffset({
@@ -7015,7 +7103,7 @@ var FloatingWindow = ({
     });
     setIsDragging(true);
   }, []);
-  const handleResizeStart = (0, import_react45.useCallback)(
+  const handleResizeStart = (0, import_react46.useCallback)(
     (direction) => (e) => {
       e.stopPropagation();
       setIsResizing(true);
@@ -7024,7 +7112,7 @@ var FloatingWindow = ({
     },
     []
   );
-  const handleMouseMove = (0, import_react45.useCallback)(
+  const handleMouseMove = (0, import_react46.useCallback)(
     (e) => {
       if (isDragging) {
         setPosition({
@@ -7078,13 +7166,13 @@ var FloatingWindow = ({
       minHeight
     ]
   );
-  const handleMouseUp = (0, import_react45.useCallback)((e) => {
+  const handleMouseUp = (0, import_react46.useCallback)((e) => {
     setIsDragging(false);
     setIsResizing(false);
     setResizeDirection(null);
     toggleGlobalTextSelection(false);
   }, []);
-  import_react45.default.useEffect(() => {
+  import_react46.default.useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -7094,11 +7182,11 @@ var FloatingWindow = ({
   }, [handleMouseMove, handleMouseUp]);
   const floatingWindowManager = useFloatingWindowManager();
   const currentFloatingWindow = useCurrentFloatingWindowInternal();
-  const handleClose = (0, import_react45.useCallback)(() => {
+  const handleClose = (0, import_react46.useCallback)(() => {
     if (onClose) onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -7112,7 +7200,7 @@ var FloatingWindow = ({
         backgroundColor: "var(--canvas-background)"
       }
     },
-    /* @__PURE__ */ import_react45.default.createElement(
+    /* @__PURE__ */ import_react46.default.createElement(
       "div",
       {
         style: {
@@ -7123,9 +7211,9 @@ var FloatingWindow = ({
       },
       renderToolbar({ title, toolbarContent, onClose: handleClose })
     ),
-    /* @__PURE__ */ import_react45.default.createElement(Divider, null),
-    /* @__PURE__ */ import_react45.default.createElement("div", { style: styles2.content }, children2),
-    Object.entries(resizeHandlePositions).map(([direction, style5]) => /* @__PURE__ */ import_react45.default.createElement(
+    /* @__PURE__ */ import_react46.default.createElement(Divider, null),
+    /* @__PURE__ */ import_react46.default.createElement("div", { style: styles2.content }, children2),
+    Object.entries(resizeHandlePositions).map(([direction, style5]) => /* @__PURE__ */ import_react46.default.createElement(
       "div",
       {
         key: direction,
@@ -7138,8 +7226,8 @@ var FloatingWindow = ({
 
 // src/components/GradientPicker.tsx
 var import_noya_colorpicker2 = require("@noya-app/noya-colorpicker");
-var import_react46 = __toESM(require("react"));
-var GradientPicker = (0, import_react46.memo)(function GradientPicker2({
+var import_react47 = __toESM(require("react"));
+var GradientPicker = (0, import_react47.memo)(function GradientPicker2({
   value,
   selectedStop,
   onChangeColor,
@@ -7148,7 +7236,7 @@ var GradientPicker = (0, import_react46.memo)(function GradientPicker2({
   onDelete,
   onSelectStop
 }) {
-  const colorModel = (0, import_react46.useMemo)(
+  const colorModel = (0, import_react47.useMemo)(
     () => ({
       defaultColor: { r: 0, g: 0, b: 0, a: 1 },
       toHsva: import_noya_colorpicker2.rgbaToHsva,
@@ -7157,30 +7245,30 @@ var GradientPicker = (0, import_react46.memo)(function GradientPicker2({
     }),
     []
   );
-  const rgbaColor = (0, import_react46.useMemo)(
+  const rgbaColor = (0, import_react47.useMemo)(
     () => sketchColorToRgba(value[selectedStop].color),
     [value, selectedStop]
   );
-  const handleChangeColor = (0, import_react46.useCallback)(
+  const handleChangeColor = (0, import_react47.useCallback)(
     (value2) => {
       onChangeColor(rgbaToSketchColor(value2));
     },
     [onChangeColor]
   );
-  const handleAddGradientStop = (0, import_react46.useCallback)(
+  const handleAddGradientStop = (0, import_react47.useCallback)(
     (value2, position) => {
       onAdd(rgbaToSketchColor(value2), position);
     },
     [onAdd]
   );
-  return /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(
     import_noya_colorpicker2.ColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ import_react46.default.createElement(
+    /* @__PURE__ */ import_react47.default.createElement(
       import_noya_colorpicker2.Gradient,
       {
         gradients: value,
@@ -7191,40 +7279,40 @@ var GradientPicker = (0, import_react46.memo)(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ import_react46.default.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ import_react46.default.createElement(import_noya_colorpicker2.Saturation, null),
-    /* @__PURE__ */ import_react46.default.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ import_react46.default.createElement(import_noya_colorpicker2.Hue, null),
-    /* @__PURE__ */ import_react46.default.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ import_react46.default.createElement(import_noya_colorpicker2.Alpha, null)
+    /* @__PURE__ */ import_react47.default.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ import_react47.default.createElement(import_noya_colorpicker2.Saturation, null),
+    /* @__PURE__ */ import_react47.default.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ import_react47.default.createElement(import_noya_colorpicker2.Hue, null),
+    /* @__PURE__ */ import_react47.default.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ import_react47.default.createElement(import_noya_colorpicker2.Alpha, null)
   );
 });
 
 // src/components/GridView.tsx
-var import_react48 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 
 // src/components/ScrollArea.tsx
 var RadixScrollArea = __toESM(require("@radix-ui/react-scroll-area"));
-var import_react47 = __toESM(require("react"));
-var ScrollArea = (0, import_react47.memo)(function ScrollArea2({ children: children2 }) {
-  const [scrollElementRef, setScrollElementRef] = (0, import_react47.useState)(null);
-  return /* @__PURE__ */ import_react47.default.createElement("div", { className: "flex-1 min-h-0" }, /* @__PURE__ */ import_react47.default.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ import_react47.default.createElement(
+var import_react48 = __toESM(require("react"));
+var ScrollArea = (0, import_react48.memo)(function ScrollArea2({ children: children2 }) {
+  const [scrollElementRef, setScrollElementRef] = (0, import_react48.useState)(null);
+  return /* @__PURE__ */ import_react48.default.createElement("div", { className: "flex-1 min-h-0" }, /* @__PURE__ */ import_react48.default.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ import_react48.default.createElement(
     RadixScrollArea.Viewport,
     {
       className: "w-full h-full [&>div]:block",
-      ref: (0, import_react47.useCallback)(
+      ref: (0, import_react48.useCallback)(
         (ref) => setScrollElementRef(ref),
         []
       )
     },
     typeof children2 === "function" ? scrollElementRef ? children2(scrollElementRef) : null : children2
-  ), /* @__PURE__ */ import_react47.default.createElement(
+  ), /* @__PURE__ */ import_react48.default.createElement(
     RadixScrollArea.Scrollbar,
     {
       orientation: "vertical",
       className: "scroll-component flex p-[3px] data-[orientation=vertical]:w-[10px]"
     },
-    /* @__PURE__ */ import_react47.default.createElement(RadixScrollArea.Thumb, { className: "scroll-component flex-1 rounded-[10px] bg-scrollbar" })
+    /* @__PURE__ */ import_react48.default.createElement(RadixScrollArea.Thumb, { className: "scroll-component flex-1 rounded-[10px] bg-scrollbar" })
   )));
 });
 
@@ -7262,7 +7350,7 @@ var sizes = {
   }
 };
 var ItemTitle = ({ showBackground, children: children2 }) => {
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     "span",
     {
       className: `font-sans text-heading5 leading-[1] text-text font-medium select-none whitespace-pre overflow-hidden text-ellipsis ${showBackground && "bg-sidebar-background border border-dividerSubtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"}`
@@ -7271,7 +7359,7 @@ var ItemTitle = ({ showBackground, children: children2 }) => {
   );
 };
 var ItemDescription = ({ showBackground, children: children2 }) => {
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     "span",
     {
       className: `font-sans text-heading5 font-normal leading-[1] text-[0.7rem] text-text-muted select-none whitespace-pre overflow-hidden text-ellipsis ${showBackground && "bg-sidebar-background border border-dividerSubtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"}`
@@ -7280,7 +7368,7 @@ var ItemDescription = ({ showBackground, children: children2 }) => {
   );
 };
 var SectionTitle = ({ last = false, children: children2 }) => {
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     "span",
     {
       className: `font-sans text-heading3 font-medium user-select-none whitespace-pre overflow-hidden text-ellipsis ${last ? "text-text" : "text-text-muted"}`
@@ -7288,7 +7376,7 @@ var SectionTitle = ({ last = false, children: children2 }) => {
     children2
   );
 };
-var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
+var GridViewItem = (0, import_react49.forwardRef)(function GridViewItem2({
   id,
   title,
   subtitle,
@@ -7304,15 +7392,15 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
   onContextMenu,
   style: style5
 }, forwardedRef) {
-  const [hovered, setHovered] = import_react48.default.useState(false);
+  const [hovered, setHovered] = import_react49.default.useState(false);
   const { hoverProps } = useHover({
     onHoverChange: (isHovering) => {
       onHoverChange?.(isHovering);
       setHovered(isHovering);
     }
   });
-  const { textPosition, bordered, disabled } = (0, import_react48.useContext)(GridViewContext);
-  const handleClick = (0, import_react48.useCallback)(
+  const { textPosition, bordered, disabled } = (0, import_react49.useContext)(GridViewContext);
+  const handleClick = (0, import_react49.useCallback)(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -7321,7 +7409,7 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
     },
     [onClick, onPress]
   );
-  const handleKeyDown = (0, import_react48.useCallback)(
+  const handleKeyDown = (0, import_react49.useCallback)(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.stopPropagation();
@@ -7333,7 +7421,7 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
     },
     [onPress]
   );
-  let element = /* @__PURE__ */ import_react48.default.createElement(
+  let element = /* @__PURE__ */ import_react49.default.createElement(
     "div",
     {
       className: "flex flex-col relative focus:shadow-[0px_0px_0px_1px_var(--sidebar-background),_0px_0px_0px_3px_var(--primary)] focus:outline-none",
@@ -7343,7 +7431,7 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
       tabIndex: disabled ? void 0 : 0,
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ import_react48.default.createElement(
+    /* @__PURE__ */ import_react49.default.createElement(
       "div",
       {
         className: cn(
@@ -7360,25 +7448,25 @@ var GridViewItem = (0, import_react48.forwardRef)(function GridViewItem2({
       },
       children2
     ),
-    textPosition === "below" && /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react48.default.createElement(ItemTitle, null, title || " "), /* @__PURE__ */ import_react48.default.createElement(ItemDescription, null, subtitle || " ")),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react48.default.createElement("div", { className: "absolute inset-0 flex flex-col justify-end items-start p-1 pointer-events-none truncate g-0.5" }, title && /* @__PURE__ */ import_react48.default.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ import_react48.default.createElement(ItemDescription, { showBackground: true }, subtitle)),
-    loading && /* @__PURE__ */ import_react48.default.createElement("div", { className: "flex flex-col justify-start items-end p-1 pointer-events-none animate-shimmer absolute inset-0 bg-gradient-to-r from-white/0 via-[rgb(226,232,240)]/50 to-white/0 bg-length:200%_100%]" }, /* @__PURE__ */ import_react48.default.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
+    textPosition === "below" && /* @__PURE__ */ import_react49.default.createElement(import_react49.default.Fragment, null, /* @__PURE__ */ import_react49.default.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ import_react49.default.createElement(ItemTitle, null, title || " "), /* @__PURE__ */ import_react49.default.createElement(ItemDescription, null, subtitle || " ")),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ import_react49.default.createElement("div", { className: "absolute inset-0 flex flex-col justify-end items-start p-1 pointer-events-none truncate g-0.5" }, title && /* @__PURE__ */ import_react49.default.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ import_react49.default.createElement(ItemDescription, { showBackground: true }, subtitle)),
+    loading && /* @__PURE__ */ import_react49.default.createElement("div", { className: "flex flex-col justify-start items-end p-1 pointer-events-none animate-shimmer absolute inset-0 bg-gradient-to-r from-white/0 via-[rgb(226,232,240)]/50 to-white/0 bg-length:200%_100%]" }, /* @__PURE__ */ import_react49.default.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
-    element = /* @__PURE__ */ import_react48.default.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
+    element = /* @__PURE__ */ import_react49.default.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
   }
   if (textPosition === "toolip") {
-    element = /* @__PURE__ */ import_react48.default.createElement(
+    element = /* @__PURE__ */ import_react49.default.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ import_react48.default.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ import_react48.default.createElement(ItemTitle, null, title), /* @__PURE__ */ import_react48.default.createElement(ItemDescription, null, subtitle))
+        content: /* @__PURE__ */ import_react49.default.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ import_react49.default.createElement(ItemTitle, null, title), /* @__PURE__ */ import_react49.default.createElement(ItemDescription, null, subtitle))
       },
       element
     );
   }
   return element;
 });
-var GridViewContext = (0, import_react48.createContext)({
+var GridViewContext = (0, import_react49.createContext)({
   size: "small",
   textPosition: "below",
   bordered: false,
@@ -7393,7 +7481,7 @@ function GridViewRoot({
   bordered = false,
   disabled = false
 }) {
-  const handleClick = (0, import_react48.useCallback)(
+  const handleClick = (0, import_react49.useCallback)(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -7401,7 +7489,7 @@ function GridViewRoot({
     },
     [onClick]
   );
-  const contextValue = (0, import_react48.useMemo)(
+  const contextValue = (0, import_react49.useMemo)(
     () => ({
       size: size3,
       textPosition,
@@ -7410,34 +7498,34 @@ function GridViewRoot({
     }),
     [bordered, disabled, size3, textPosition]
   );
-  return /* @__PURE__ */ import_react48.default.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react48.default.createElement("div", { onClick: handleClick, className: `flex flex-col ${scrollable ? "flex-1" : "flex-[0_0_auto]"}` }, scrollable ? /* @__PURE__ */ import_react48.default.createElement(ScrollArea, null, children2) : children2));
+  return /* @__PURE__ */ import_react49.default.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react49.default.createElement("div", { onClick: handleClick, className: `flex flex-col ${scrollable ? "flex-1" : "flex-[0_0_auto]"}` }, scrollable ? /* @__PURE__ */ import_react49.default.createElement(ScrollArea, null, children2) : children2));
 }
 function GridViewSection({
   children: children2,
   className
 }) {
-  const { size: size3 } = (0, import_react48.useContext)(GridViewContext);
+  const { size: size3 } = (0, import_react49.useContext)(GridViewContext);
   const gapStyle = { gap: `${sizes[size3].gap}px` };
-  return /* @__PURE__ */ import_react48.default.createElement("div", { className: cn(className, "text-text grid", `grid-cols-[auto-fill,_minmax(${sizes[size3].itemWidth}px,_1fr)]`), style: gapStyle }, children2);
+  return /* @__PURE__ */ import_react49.default.createElement("div", { className: cn(className, "text-text grid", `grid-cols-[auto-fill,_minmax(${sizes[size3].itemWidth}px,_1fr)]`), style: gapStyle }, children2);
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
-  return /* @__PURE__ */ import_react48.default.createElement("div", { className: "px-5" }, /* @__PURE__ */ import_react48.default.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
-    grouped.map((title2, index) => /* @__PURE__ */ import_react48.default.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
-    /* @__PURE__ */ import_react48.default.createElement(SectionTitle, null, " / ")
+  return /* @__PURE__ */ import_react49.default.createElement("div", { className: "px-5" }, /* @__PURE__ */ import_react49.default.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
+    grouped.map((title2, index) => /* @__PURE__ */ import_react49.default.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
+    /* @__PURE__ */ import_react49.default.createElement(SectionTitle, null, " / ")
   ));
 }
 var GridView;
 ((GridView2) => {
-  GridView2.Root = (0, import_react48.memo)(GridViewRoot);
-  GridView2.Item = (0, import_react48.memo)(GridViewItem);
-  GridView2.Section = (0, import_react48.memo)(GridViewSection);
-  GridView2.SectionHeader = (0, import_react48.memo)(GridViewSectionHeader);
+  GridView2.Root = (0, import_react49.memo)(GridViewRoot);
+  GridView2.Item = (0, import_react49.memo)(GridViewItem);
+  GridView2.Section = (0, import_react49.memo)(GridViewSection);
+  GridView2.SectionHeader = (0, import_react49.memo)(GridViewSectionHeader);
 })(GridView || (GridView = {}));
 
 // src/components/InputFieldWithCompletions.tsx
 var import_noya_utils8 = require("@noya-app/noya-utils");
-var import_react51 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 
 // src/utils/fuzzyScorer.ts
 var import_vscode_fuzzy_scorer = require("vscode-fuzzy-scorer");
@@ -7512,7 +7600,7 @@ function mergeRanges(ranges) {
 // src/components/ListView.tsx
 var import_noya_utils7 = require("@noya-app/noya-utils");
 var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react50 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 
 // ../../node_modules/react-virtualized/dist/es/ArrowKeyStepper/ArrowKeyStepper.js
 var import_classCallCheck4 = __toESM(require_classCallCheck());
@@ -7522,7 +7610,7 @@ var import_getPrototypeOf2 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized2 = __toESM(require_assertThisInitialized());
 var import_inherits2 = __toESM(require_inherits());
 var import_defineProperty4 = __toESM(require_defineProperty());
-var React36 = __toESM(require("react"));
+var React37 = __toESM(require("react"));
 
 // ../../node_modules/react-lifecycles-compat/react-lifecycles-compat.es.js
 function componentWillMount() {
@@ -7619,7 +7707,7 @@ var import_getPrototypeOf = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized = __toESM(require_assertThisInitialized());
 var import_inherits = __toESM(require_inherits());
 var import_defineProperty3 = __toESM(require_defineProperty());
-var React35 = __toESM(require("react"));
+var React36 = __toESM(require("react"));
 
 // ../../node_modules/clsx/dist/clsx.m.js
 function r(e) {
@@ -7658,7 +7746,7 @@ var import_createClass = __toESM(require_createClass());
 var import_defineProperty = __toESM(require_defineProperty());
 
 // ../../node_modules/react-virtualized/dist/es/Grid/types.js
-var React34 = __toESM(require("react"));
+var React35 = __toESM(require("react"));
 var import_prop_types = __toESM(require_prop_types());
 var bpfrpt_proptype_CellPosition = process.env.NODE_ENV === "production" ? null : {
   "columnIndex": import_prop_types.default.number.isRequired,
@@ -8818,7 +8906,7 @@ var Grid = (_temp = _class = /* @__PURE__ */ function(_React$PureComponent) {
       gridStyle.overflowY = totalRowsHeight + horizontalScrollBarSize <= height ? "hidden" : "auto";
       var childrenToDisplay = this._childrenToDisplay;
       var showNoContentRenderer = childrenToDisplay.length === 0 && height > 0 && width > 0;
-      return React35.createElement("div", (0, import_extends.default)({
+      return React36.createElement("div", (0, import_extends.default)({
         ref: this._setScrollingContainerRef
       }, containerProps, {
         "aria-label": this.props["aria-label"],
@@ -8829,7 +8917,7 @@ var Grid = (_temp = _class = /* @__PURE__ */ function(_React$PureComponent) {
         role,
         style: _objectSpread({}, gridStyle, {}, style5),
         tabIndex
-      }), childrenToDisplay.length > 0 && React35.createElement("div", {
+      }), childrenToDisplay.length > 0 && React36.createElement("div", {
         className: "ReactVirtualized__Grid__innerScrollContainer",
         role: containerRole,
         style: _objectSpread({
@@ -9287,7 +9375,7 @@ var Grid = (_temp = _class = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return Grid2;
-}(React35.PureComponent), (0, import_defineProperty3.default)(_class, "propTypes", process.env.NODE_ENV === "production" ? null : {
+}(React36.PureComponent), (0, import_defineProperty3.default)(_class, "propTypes", process.env.NODE_ENV === "production" ? null : {
   "aria-label": import_prop_types3.default.string.isRequired,
   "aria-readonly": import_prop_types3.default.bool,
   /**
@@ -9593,7 +9681,7 @@ var ArrowKeyStepper = (_temp2 = _class2 = /* @__PURE__ */ function(_React$PureCo
     value: function render() {
       var _this$props2 = this.props, className = _this$props2.className, children2 = _this$props2.children;
       var _this$_getScrollState3 = this._getScrollState(), scrollToColumn = _this$_getScrollState3.scrollToColumn, scrollToRow = _this$_getScrollState3.scrollToRow;
-      return React36.createElement("div", {
+      return React37.createElement("div", {
         className,
         onKeyDown: this._onKeyDown
       }, children2({
@@ -9645,7 +9733,7 @@ var ArrowKeyStepper = (_temp2 = _class2 = /* @__PURE__ */ function(_React$PureCo
     }
   }]);
   return ArrowKeyStepper2;
-}(React36.PureComponent), (0, import_defineProperty4.default)(_class2, "propTypes", process.env.NODE_ENV === "production" ? null : {
+}(React37.PureComponent), (0, import_defineProperty4.default)(_class2, "propTypes", process.env.NODE_ENV === "production" ? null : {
   "children": import_prop_types5.default.func.isRequired,
   "className": import_prop_types5.default.string,
   "columnCount": import_prop_types5.default.number.isRequired,
@@ -9674,7 +9762,7 @@ var import_getPrototypeOf3 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized3 = __toESM(require_assertThisInitialized());
 var import_inherits3 = __toESM(require_inherits());
 var import_defineProperty5 = __toESM(require_defineProperty());
-var React37 = __toESM(require("react"));
+var React38 = __toESM(require("react"));
 
 // ../../node_modules/react-virtualized/dist/es/vendor/detectElementResize.js
 function createDetectElementResize(nonce, hostWindow) {
@@ -9953,7 +10041,7 @@ var AutoSizer3 = (_temp3 = _class3 = /* @__PURE__ */ function(_React$Component)
         outerStyle.width = 0;
         childParams.width = width;
       }
-      return React37.createElement("div", {
+      return React38.createElement("div", {
         className,
         ref: this._setRef,
         style: _objectSpread3({}, outerStyle, {}, style5)
@@ -9961,7 +10049,7 @@ var AutoSizer3 = (_temp3 = _class3 = /* @__PURE__ */ function(_React$Component)
     }
   }]);
   return AutoSizer4;
-}(React37.Component), (0, import_defineProperty5.default)(_class3, "propTypes", process.env.NODE_ENV === "production" ? null : {
+}(React38.Component), (0, import_defineProperty5.default)(_class3, "propTypes", process.env.NODE_ENV === "production" ? null : {
   /** Function responsible for rendering children.*/
   "children": import_prop_types6.default.func.isRequired,
   /** Optional custom CSS class name to attach to root AutoSizer element.  */
@@ -9997,7 +10085,7 @@ var import_getPrototypeOf4 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized4 = __toESM(require_assertThisInitialized());
 var import_inherits4 = __toESM(require_inherits());
 var import_defineProperty6 = __toESM(require_defineProperty());
-var React38 = __toESM(require("react"));
+var React39 = __toESM(require("react"));
 var import_react_dom2 = require("react-dom");
 
 // ../../node_modules/react-virtualized/dist/es/CellMeasurer/types.js
@@ -10119,7 +10207,7 @@ var CellMeasurer = (_temp4 = _class4 = /* @__PURE__ */ function(_React$PureCompo
     }
   }]);
   return CellMeasurer2;
-}(React38.PureComponent), (0, import_defineProperty6.default)(_class4, "propTypes", process.env.NODE_ENV === "production" ? null : {
+}(React39.PureComponent), (0, import_defineProperty6.default)(_class4, "propTypes", process.env.NODE_ENV === "production" ? null : {
   "cache": function cache() {
     return (typeof bpfrpt_proptype_CellMeasureCache === "function" ? bpfrpt_proptype_CellMeasureCache.isRequired ? bpfrpt_proptype_CellMeasureCache.isRequired : bpfrpt_proptype_CellMeasureCache : import_prop_types8.default.shape(bpfrpt_proptype_CellMeasureCache).isRequired).apply(this, arguments);
   },
@@ -10152,7 +10240,7 @@ var import_assertThisInitialized6 = __toESM(require_assertThisInitialized());
 var import_inherits6 = __toESM(require_inherits());
 var import_defineProperty9 = __toESM(require_defineProperty());
 var import_prop_types11 = __toESM(require_prop_types());
-var React40 = __toESM(require("react"));
+var React41 = __toESM(require("react"));
 
 // ../../node_modules/react-virtualized/dist/es/Collection/CollectionView.js
 var import_classCallCheck8 = __toESM(require_classCallCheck());
@@ -10163,7 +10251,7 @@ var import_assertThisInitialized5 = __toESM(require_assertThisInitialized());
 var import_inherits5 = __toESM(require_inherits());
 var import_defineProperty8 = __toESM(require_defineProperty());
 var import_prop_types9 = __toESM(require_prop_types());
-var React39 = __toESM(require("react"));
+var React40 = __toESM(require("react"));
 function ownKeys4(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -10383,7 +10471,7 @@ var CollectionView = /* @__PURE__ */ function(_React$PureComponent) {
       var horizontalScrollBarSize = totalWidth > width ? this._scrollbarSize : 0;
       collectionStyle.overflowX = totalWidth + verticalScrollBarSize <= width ? "hidden" : "auto";
       collectionStyle.overflowY = totalHeight + horizontalScrollBarSize <= height ? "hidden" : "auto";
-      return React39.createElement("div", {
+      return React40.createElement("div", {
         ref: this._setScrollingContainerRef,
         "aria-label": this.props["aria-label"],
         className: clsx_m_default("ReactVirtualized__Collection", className),
@@ -10392,7 +10480,7 @@ var CollectionView = /* @__PURE__ */ function(_React$PureComponent) {
         role: "grid",
         style: _objectSpread4({}, collectionStyle, {}, style5),
         tabIndex: 0
-      }, cellCount > 0 && React39.createElement("div", {
+      }, cellCount > 0 && React40.createElement("div", {
         className: "ReactVirtualized__Collection__innerScrollContainer",
         style: {
           height: totalHeight,
@@ -10487,7 +10575,7 @@ var CollectionView = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return CollectionView2;
-}(React39.PureComponent);
+}(React40.PureComponent);
 (0, import_defineProperty8.default)(CollectionView, "defaultProps", {
   "aria-label": "grid",
   horizontalOverscanSize: 0,
@@ -10830,7 +10918,7 @@ var Collection = /* @__PURE__ */ function(_React$PureComponent) {
     key: "render",
     value: function render() {
       var props = (0, import_extends2.default)({}, this.props);
-      return React40.createElement(CollectionView_default, (0, import_extends2.default)({
+      return React41.createElement(CollectionView_default, (0, import_extends2.default)({
         cellLayoutManager: this,
         isScrollingChange: this._isScrollingChange,
         ref: this._setCollectionViewRef
@@ -10938,7 +11026,7 @@ var Collection = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return Collection2;
-}(React40.PureComponent);
+}(React41.PureComponent);
 (0, import_defineProperty9.default)(Collection, "defaultProps", {
   "aria-label": "grid",
   cellGroupRenderer: defaultCellGroupRenderer
@@ -11012,7 +11100,7 @@ var import_getPrototypeOf7 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized7 = __toESM(require_assertThisInitialized());
 var import_inherits7 = __toESM(require_inherits());
 var import_prop_types12 = __toESM(require_prop_types());
-var React41 = __toESM(require("react"));
+var React42 = __toESM(require("react"));
 var ColumnSizer = /* @__PURE__ */ function(_React$PureComponent) {
   (0, import_inherits7.default)(ColumnSizer2, _React$PureComponent);
   function ColumnSizer2(props, context) {
@@ -11065,7 +11153,7 @@ var ColumnSizer = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return ColumnSizer2;
-}(React41.PureComponent);
+}(React42.PureComponent);
 ColumnSizer.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Function responsible for rendering a virtualized Grid.
@@ -11096,7 +11184,7 @@ var import_getPrototypeOf8 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized8 = __toESM(require_assertThisInitialized());
 var import_inherits8 = __toESM(require_inherits());
 var import_defineProperty10 = __toESM(require_defineProperty());
-var React42 = __toESM(require("react"));
+var React43 = __toESM(require("react"));
 var import_prop_types13 = __toESM(require_prop_types());
 var InfiniteLoader = /* @__PURE__ */ function(_React$PureComponent) {
   (0, import_inherits8.default)(InfiniteLoader2, _React$PureComponent);
@@ -11189,7 +11277,7 @@ var InfiniteLoader = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return InfiniteLoader2;
-}(React42.PureComponent);
+}(React43.PureComponent);
 (0, import_defineProperty10.default)(InfiniteLoader, "defaultProps", {
   minimumBatchSize: 10,
   rowCount: 0,
@@ -11310,10 +11398,10 @@ var import_getPrototypeOf9 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized9 = __toESM(require_assertThisInitialized());
 var import_inherits9 = __toESM(require_inherits());
 var import_defineProperty11 = __toESM(require_defineProperty());
-var React44 = __toESM(require("react"));
+var React45 = __toESM(require("react"));
 
 // ../../node_modules/react-virtualized/dist/es/List/types.js
-var React43 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 var import_prop_types14 = __toESM(require_prop_types());
 var bpfrpt_proptype_RowRendererParams = process.env.NODE_ENV === "production" ? null : {
   "index": import_prop_types14.default.number.isRequired,
@@ -11485,7 +11573,7 @@ var List = (_temp5 = _class5 = /* @__PURE__ */ function(_React$PureComponent) {
     value: function render() {
       var _this$props = this.props, className = _this$props.className, noRowsRenderer4 = _this$props.noRowsRenderer, scrollToIndex = _this$props.scrollToIndex, width = _this$props.width;
       var classNames = clsx_m_default("ReactVirtualized__List", className);
-      return React44.createElement(Grid_default, (0, import_extends3.default)({}, this.props, {
+      return React45.createElement(Grid_default, (0, import_extends3.default)({}, this.props, {
         autoContainerWidth: true,
         cellRenderer: this._cellRenderer,
         className: classNames,
@@ -11500,7 +11588,7 @@ var List = (_temp5 = _class5 = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return List2;
-}(React44.PureComponent), (0, import_defineProperty11.default)(_class5, "propTypes", process.env.NODE_ENV === "production" ? null : {
+}(React45.PureComponent), (0, import_defineProperty11.default)(_class5, "propTypes", process.env.NODE_ENV === "production" ? null : {
   "aria-label": import_prop_types15.default.string,
   /**
    * Removes fixed height from the scrollingContainer so that the total height
@@ -11586,7 +11674,7 @@ var import_getPrototypeOf10 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized10 = __toESM(require_assertThisInitialized());
 var import_inherits10 = __toESM(require_inherits());
 var import_defineProperty13 = __toESM(require_defineProperty());
-var React45 = __toESM(require("react"));
+var React46 = __toESM(require("react"));
 
 // ../../node_modules/react-virtualized/dist/es/Masonry/PositionCache.js
 var import_slicedToArray = __toESM(require_slicedToArray());
@@ -12361,7 +12449,7 @@ var Masonry = (_temp6 = _class6 = /* @__PURE__ */ function(_React$PureComponent)
       }
       this._startIndex = startIndex;
       this._stopIndex = stopIndex;
-      return React45.createElement("div", {
+      return React46.createElement("div", {
         ref: this._setScrollingContainerRef,
         "aria-label": this.props["aria-label"],
         className: clsx_m_default("ReactVirtualized__Masonry", className),
@@ -12380,7 +12468,7 @@ var Masonry = (_temp6 = _class6 = /* @__PURE__ */ function(_React$PureComponent)
           willChange: "transform"
         }, style5),
         tabIndex
-      }, React45.createElement("div", {
+      }, React46.createElement("div", {
         className: "ReactVirtualized__Masonry__innerScrollContainer",
         style: {
           width: "100%",
@@ -12470,7 +12558,7 @@ var Masonry = (_temp6 = _class6 = /* @__PURE__ */ function(_React$PureComponent)
     }
   }]);
   return Masonry2;
-}(React45.PureComponent), (0, import_defineProperty13.default)(_class6, "propTypes", process.env.NODE_ENV === "production" ? null : {
+}(React46.PureComponent), (0, import_defineProperty13.default)(_class6, "propTypes", process.env.NODE_ENV === "production" ? null : {
   "autoHeight": import_prop_types16.default.bool.isRequired,
   "cellCount": import_prop_types16.default.number.isRequired,
   "cellMeasurerCache": function cellMeasurerCache() {
@@ -12544,7 +12632,7 @@ var import_assertThisInitialized11 = __toESM(require_assertThisInitialized());
 var import_inherits11 = __toESM(require_inherits());
 var import_defineProperty15 = __toESM(require_defineProperty());
 var import_prop_types17 = __toESM(require_prop_types());
-var React46 = __toESM(require("react"));
+var React47 = __toESM(require("react"));
 
 // ../../node_modules/react-virtualized/dist/es/MultiGrid/CellMeasurerCacheDecorator.js
 var import_classCallCheck17 = __toESM(require_classCallCheck());
@@ -12687,7 +12775,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
       var rowIndex = _ref.rowIndex, rest = (0, import_objectWithoutProperties2.default)(_ref, ["rowIndex"]);
       var _this$props = _this.props, cellRenderer3 = _this$props.cellRenderer, fixedRowCount = _this$props.fixedRowCount, rowCount = _this$props.rowCount;
       if (rowIndex === rowCount - fixedRowCount) {
-        return React46.createElement("div", {
+        return React47.createElement("div", {
           key: rest.key,
           style: _objectSpread6({}, rest.style, {
             height: SCROLLBAR_SIZE_BUFFER
@@ -12713,7 +12801,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
       var columnIndex = _ref3.columnIndex, rest = (0, import_objectWithoutProperties2.default)(_ref3, ["columnIndex"]);
       var _this$props3 = _this.props, cellRenderer3 = _this$props3.cellRenderer, columnCount = _this$props3.columnCount, fixedColumnCount = _this$props3.fixedColumnCount;
       if (columnIndex === columnCount - fixedColumnCount) {
-        return React46.createElement("div", {
+        return React47.createElement("div", {
           key: rest.key,
           style: _objectSpread6({}, rest.style, {
             width: SCROLLBAR_SIZE_BUFFER
@@ -12902,14 +12990,14 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
         return null;
       }
       var _this$state4 = this.state, scrollLeft = _this$state4.scrollLeft, scrollTop = _this$state4.scrollTop;
-      return React46.createElement("div", {
+      return React47.createElement("div", {
         style: this._containerOuterStyle
-      }, React46.createElement("div", {
+      }, React47.createElement("div", {
         style: this._containerTopStyle
       }, this._renderTopLeftGrid(rest), this._renderTopRightGrid(_objectSpread6({}, rest, {
         onScroll: onScroll7,
         scrollLeft
-      }))), React46.createElement("div", {
+      }))), React47.createElement("div", {
         style: this._containerBottomStyle
       }, this._renderBottomLeftGrid(_objectSpread6({}, rest, {
         onScroll: onScroll7,
@@ -13091,7 +13179,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
         return null;
       }
       var additionalRowCount = showVerticalScrollbar ? 1 : 0, height = this._getBottomGridHeight(props), width = this._getLeftGridWidth(props), scrollbarSize2 = this.state.showVerticalScrollbar ? this.state.scrollbarSize : 0, gridWidth = hideBottomLeftGridScrollbar ? width + scrollbarSize2 : width;
-      var bottomLeftGrid = React46.createElement(Grid_default, (0, import_extends4.default)({}, props, {
+      var bottomLeftGrid = React47.createElement(Grid_default, (0, import_extends4.default)({}, props, {
         cellRenderer: this._cellRendererBottomLeftGrid,
         className: this.props.classNameBottomLeftGrid,
         columnCount: fixedColumnCount,
@@ -13106,7 +13194,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
         width: gridWidth
       }));
       if (hideBottomLeftGridScrollbar) {
-        return React46.createElement("div", {
+        return React47.createElement("div", {
           className: "BottomLeftGrid_ScrollWrapper",
           style: _objectSpread6({}, this._bottomLeftGridStyle, {
             height,
@@ -13121,7 +13209,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
     key: "_renderBottomRightGrid",
     value: function _renderBottomRightGrid(props) {
       var columnCount = props.columnCount, fixedColumnCount = props.fixedColumnCount, fixedRowCount = props.fixedRowCount, rowCount = props.rowCount, scrollToColumn = props.scrollToColumn, scrollToRow = props.scrollToRow;
-      return React46.createElement(Grid_default, (0, import_extends4.default)({}, props, {
+      return React47.createElement(Grid_default, (0, import_extends4.default)({}, props, {
         cellRenderer: this._cellRendererBottomRightGrid,
         className: this.props.classNameBottomRightGrid,
         columnCount: Math.max(0, columnCount - fixedColumnCount),
@@ -13146,7 +13234,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
       if (!fixedColumnCount || !fixedRowCount) {
         return null;
       }
-      return React46.createElement(Grid_default, (0, import_extends4.default)({}, props, {
+      return React47.createElement(Grid_default, (0, import_extends4.default)({}, props, {
         className: this.props.classNameTopLeftGrid,
         columnCount: fixedColumnCount,
         height: this._getTopGridHeight(props),
@@ -13173,7 +13261,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
           left: 0
         });
       }
-      var topRightGrid = React46.createElement(Grid_default, (0, import_extends4.default)({}, props, {
+      var topRightGrid = React47.createElement(Grid_default, (0, import_extends4.default)({}, props, {
         cellRenderer: this._cellRendererTopRightGrid,
         className: this.props.classNameTopRightGrid,
         columnCount: Math.max(0, columnCount - fixedColumnCount) + additionalColumnCount,
@@ -13189,7 +13277,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
         width
       }));
       if (hideTopRightGridScrollbar) {
-        return React46.createElement("div", {
+        return React47.createElement("div", {
           className: "TopRightGrid_ScrollWrapper",
           style: _objectSpread6({}, this._topRightGridStyle, {
             height,
@@ -13213,7 +13301,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return MultiGrid2;
-}(React46.PureComponent);
+}(React47.PureComponent);
 (0, import_defineProperty15.default)(MultiGrid, "defaultProps", {
   classNameBottomLeftGrid: "",
   classNameBottomRightGrid: "",
@@ -13261,7 +13349,7 @@ var import_getPrototypeOf12 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized12 = __toESM(require_assertThisInitialized());
 var import_inherits12 = __toESM(require_inherits());
 var import_prop_types18 = __toESM(require_prop_types());
-var React47 = __toESM(require("react"));
+var React48 = __toESM(require("react"));
 var ScrollSync = /* @__PURE__ */ function(_React$PureComponent) {
   (0, import_inherits12.default)(ScrollSync2, _React$PureComponent);
   function ScrollSync2(props, context) {
@@ -13309,7 +13397,7 @@ var ScrollSync = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return ScrollSync2;
-}(React47.PureComponent);
+}(React48.PureComponent);
 ScrollSync.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Function responsible for rendering 2 or more virtualized components.
@@ -13409,11 +13497,11 @@ function defaultCellRenderer(_ref) {
 }
 
 // ../../node_modules/react-virtualized/dist/es/Table/defaultHeaderRowRenderer.js
-var React48 = __toESM(require("react"));
+var React49 = __toESM(require("react"));
 var import_prop_types20 = __toESM(require_prop_types());
 function defaultHeaderRowRenderer(_ref) {
   var className = _ref.className, columns = _ref.columns, style5 = _ref.style;
-  return React48.createElement("div", {
+  return React49.createElement("div", {
     className,
     role: "row",
     style: style5
@@ -13422,11 +13510,11 @@ function defaultHeaderRowRenderer(_ref) {
 defaultHeaderRowRenderer.propTypes = process.env.NODE_ENV === "production" ? null : bpfrpt_proptype_HeaderRowRendererParams === import_prop_types20.default.any ? {} : bpfrpt_proptype_HeaderRowRendererParams;
 
 // ../../node_modules/react-virtualized/dist/es/Table/defaultHeaderRenderer.js
-var React50 = __toESM(require("react"));
+var React51 = __toESM(require("react"));
 
 // ../../node_modules/react-virtualized/dist/es/Table/SortIndicator.js
 var import_prop_types21 = __toESM(require_prop_types());
-var React49 = __toESM(require("react"));
+var React50 = __toESM(require("react"));
 
 // ../../node_modules/react-virtualized/dist/es/Table/SortDirection.js
 var SortDirection = {
@@ -13450,16 +13538,16 @@ function SortIndicator(_ref) {
     "ReactVirtualized__Table__sortableHeaderIcon--ASC": sortDirection === SortDirection_default.ASC,
     "ReactVirtualized__Table__sortableHeaderIcon--DESC": sortDirection === SortDirection_default.DESC
   });
-  return React49.createElement("svg", {
+  return React50.createElement("svg", {
     className: classNames,
     width: 18,
     height: 18,
     viewBox: "0 0 24 24"
-  }, sortDirection === SortDirection_default.ASC ? React49.createElement("path", {
+  }, sortDirection === SortDirection_default.ASC ? React50.createElement("path", {
     d: "M7 14l5-5 5 5z"
-  }) : React49.createElement("path", {
+  }) : React50.createElement("path", {
     d: "M7 10l5 5 5-5z"
-  }), React49.createElement("path", {
+  }), React50.createElement("path", {
     d: "M0 0h24v24H0z",
     fill: "none"
   }));
@@ -13473,13 +13561,13 @@ var import_prop_types22 = __toESM(require_prop_types());
 function defaultHeaderRenderer(_ref) {
   var dataKey = _ref.dataKey, label = _ref.label, sortBy = _ref.sortBy, sortDirection = _ref.sortDirection;
   var showSortIndicator = sortBy === dataKey;
-  var children2 = [React50.createElement("span", {
+  var children2 = [React51.createElement("span", {
     className: "ReactVirtualized__Table__headerTruncatedText",
     key: "label",
     title: typeof label === "string" ? label : null
   }, label)];
   if (showSortIndicator) {
-    children2.push(React50.createElement(SortIndicator, {
+    children2.push(React51.createElement(SortIndicator, {
       key: "SortIndicator",
       sortDirection
     }));
@@ -13490,7 +13578,7 @@ defaultHeaderRenderer.propTypes = process.env.NODE_ENV === "production" ? null :
 
 // ../../node_modules/react-virtualized/dist/es/Table/defaultRowRenderer.js
 var import_extends5 = __toESM(require_extends());
-var React51 = __toESM(require("react"));
+var React52 = __toESM(require("react"));
 var import_prop_types23 = __toESM(require_prop_types());
 function defaultRowRenderer(_ref) {
   var className = _ref.className, columns = _ref.columns, index = _ref.index, key = _ref.key, onRowClick = _ref.onRowClick, onRowDoubleClick = _ref.onRowDoubleClick, onRowMouseOut = _ref.onRowMouseOut, onRowMouseOver = _ref.onRowMouseOver, onRowRightClick = _ref.onRowRightClick, rowData4 = _ref.rowData, style5 = _ref.style;
@@ -13546,7 +13634,7 @@ function defaultRowRenderer(_ref) {
       };
     }
   }
-  return React51.createElement("div", (0, import_extends5.default)({}, a11yProps, {
+  return React52.createElement("div", (0, import_extends5.default)({}, a11yProps, {
     className,
     key,
     role: "row",
@@ -13562,7 +13650,7 @@ var import_getPrototypeOf13 = __toESM(require_getPrototypeOf());
 var import_inherits13 = __toESM(require_inherits());
 var import_defineProperty16 = __toESM(require_defineProperty());
 var import_prop_types24 = __toESM(require_prop_types());
-var React52 = __toESM(require("react"));
+var React53 = __toESM(require("react"));
 var Column = /* @__PURE__ */ function(_React$Component) {
   (0, import_inherits13.default)(Column3, _React$Component);
   function Column3() {
@@ -13570,7 +13658,7 @@ var Column = /* @__PURE__ */ function(_React$Component) {
     return (0, import_possibleConstructorReturn13.default)(this, (0, import_getPrototypeOf13.default)(Column3).apply(this, arguments));
   }
   return Column3;
-}(React52.Component);
+}(React53.Component);
 (0, import_defineProperty16.default)(Column, "defaultProps", {
   cellDataGetter: defaultCellDataGetter,
   cellRenderer: defaultCellRenderer,
@@ -13640,7 +13728,7 @@ var import_assertThisInitialized13 = __toESM(require_assertThisInitialized());
 var import_inherits14 = __toESM(require_inherits());
 var import_defineProperty17 = __toESM(require_defineProperty());
 var import_prop_types25 = __toESM(require_prop_types());
-var React53 = __toESM(require("react"));
+var React54 = __toESM(require("react"));
 var import_react_dom3 = require("react-dom");
 function ownKeys7(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -13808,16 +13896,16 @@ var Table = /* @__PURE__ */ function(_React$PureComponent) {
         index: -1
       }) : rowStyle;
       this._cachedColumnStyles = [];
-      React53.Children.toArray(children2).forEach(function(column, index) {
+      React54.Children.toArray(children2).forEach(function(column, index) {
         var flexStyles = _this2._getFlexStyleForColumn(column, column.props.style);
         _this2._cachedColumnStyles[index] = _objectSpread7({
           overflow: "hidden"
         }, flexStyles);
       });
-      return React53.createElement("div", {
+      return React54.createElement("div", {
         "aria-label": this.props["aria-label"],
         "aria-labelledby": this.props["aria-labelledby"],
-        "aria-colcount": React53.Children.toArray(children2).length,
+        "aria-colcount": React54.Children.toArray(children2).length,
         "aria-rowcount": this.props.rowCount,
         className: clsx_m_default("ReactVirtualized__Table", className),
         id,
@@ -13832,7 +13920,7 @@ var Table = /* @__PURE__ */ function(_React$PureComponent) {
           paddingRight: scrollbarWidth,
           width
         }, rowStyleObject)
-      }), React53.createElement(Grid_default, (0, import_extends6.default)({}, this.props, {
+      }), React54.createElement(Grid_default, (0, import_extends6.default)({}, this.props, {
         "aria-readonly": null,
         autoContainerWidth: true,
         className: clsx_m_default("ReactVirtualized__Table__Grid", gridClassName),
@@ -13883,7 +13971,7 @@ var Table = /* @__PURE__ */ function(_React$PureComponent) {
       };
       var style5 = this._cachedColumnStyles[columnIndex];
       var title = typeof renderedCell === "string" ? renderedCell : null;
-      return React53.createElement("div", {
+      return React54.createElement("div", {
         "aria-colindex": columnIndex + 1,
         "aria-describedby": id,
         className: clsx_m_default("ReactVirtualized__Table__rowColumn", className),
@@ -13944,7 +14032,7 @@ var Table = /* @__PURE__ */ function(_React$PureComponent) {
       if (sortBy === dataKey) {
         headerAriaSort = sortDirection === SortDirection_default.ASC ? "ascending" : "descending";
       }
-      return React53.createElement("div", {
+      return React54.createElement("div", {
         "aria-label": headerAriaLabel,
         "aria-sort": headerAriaSort,
         className: classNames,
@@ -13973,7 +14061,7 @@ var Table = /* @__PURE__ */ function(_React$PureComponent) {
       var rowData4 = rowGetter({
         index
       });
-      var columns = React53.Children.toArray(children2).map(function(column, columnIndex) {
+      var columns = React54.Children.toArray(children2).map(function(column, columnIndex) {
         return _this3._createColumn({
           column,
           columnIndex,
@@ -14031,7 +14119,7 @@ var Table = /* @__PURE__ */ function(_React$PureComponent) {
     value: function _getHeaderColumns() {
       var _this4 = this;
       var _this$props4 = this.props, children2 = _this$props4.children, disableHeader = _this$props4.disableHeader;
-      var items = disableHeader ? [] : React53.Children.toArray(children2);
+      var items = disableHeader ? [] : React54.Children.toArray(children2);
       return items.map(function(column, index) {
         return _this4._createHeader({
           column,
@@ -14085,7 +14173,7 @@ var Table = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return Table2;
-}(React53.PureComponent);
+}(React54.PureComponent);
 (0, import_defineProperty17.default)(Table, "defaultProps", {
   disableHeader: false,
   estimatedRowSize: 30,
@@ -14121,7 +14209,7 @@ Table.propTypes = process.env.NODE_ENV !== "production" ? {
   autoHeight: import_prop_types25.default.bool,
   /** One or more Columns describing the data displayed in this row */
   children: function children(props) {
-    var children2 = React53.Children.toArray(props.children);
+    var children2 = React54.Children.toArray(props.children);
     for (var i = 0; i < children2.length; i++) {
       var childType = children2[i].type;
       if (childType !== Column && !(childType.prototype instanceof Column)) {
@@ -14288,7 +14376,7 @@ var import_getPrototypeOf15 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized14 = __toESM(require_assertThisInitialized());
 var import_inherits15 = __toESM(require_inherits());
 var import_defineProperty18 = __toESM(require_defineProperty());
-var React54 = __toESM(require("react"));
+var React55 = __toESM(require("react"));
 var ReactDOM = __toESM(require("react-dom"));
 
 // ../../node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js
@@ -14608,7 +14696,7 @@ var WindowScroller = (_temp7 = _class7 = /* @__PURE__ */ function(_React$PureCom
     }
   }]);
   return WindowScroller2;
-}(React54.PureComponent), (0, import_defineProperty18.default)(_class7, "propTypes", process.env.NODE_ENV === "production" ? null : {
+}(React55.PureComponent), (0, import_defineProperty18.default)(_class7, "propTypes", process.env.NODE_ENV === "production" ? null : {
   /**
    * Function responsible for rendering children.
    * This function should implement the following signature:
@@ -14672,7 +14760,7 @@ function mergeEventHandlers(...handlerMaps) {
 // src/components/Sortable.tsx
 var import_core = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
-var import_react49 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var import_react_dom4 = require("react-dom");
 var normalizeListDestinationIndex = (index, position) => {
   return position === "above" ? index : index + 1;
@@ -14685,7 +14773,7 @@ var defaultAcceptsDrop = (sourceIndex, destinationIndex, position) => {
   }
   return true;
 };
-var SortableItemContext = (0, import_react49.createContext)({
+var SortableItemContext = (0, import_react50.createContext)({
   keys: [],
   position: { x: 0, y: 0 },
   acceptsDrop: defaultAcceptsDrop,
@@ -14707,7 +14795,7 @@ function SortableItem({
   disabled,
   children: children2
 }) {
-  const { keys, position, acceptsDrop, setActivatorEvent, axis } = (0, import_react49.useContext)(SortableItemContext);
+  const { keys, position, acceptsDrop, setActivatorEvent, axis } = (0, import_react50.useContext)(SortableItemContext);
   const sortable = (0, import_sortable.useSortable)({ id, disabled });
   const {
     active,
@@ -14727,7 +14815,7 @@ function SortableItem({
   const eventY = activatorEvent?.clientY ?? 0;
   const offsetLeft = eventX + position.x;
   const offsetTop = eventY + position.y;
-  const ref = (0, import_react49.useCallback)((node) => setNodeRef(node), [setNodeRef]);
+  const ref = (0, import_react50.useCallback)((node) => setNodeRef(node), [setNodeRef]);
   return children2({
     ref,
     ...attributes,
@@ -14758,22 +14846,22 @@ function SortableRoot({
       }
     })
   );
-  const [activeIndex, setActiveIndex] = (0, import_react49.useState)();
-  const activatorEvent = (0, import_react49.useRef)(null);
-  const setActivatorEvent = (0, import_react49.useCallback)((event) => {
+  const [activeIndex, setActiveIndex] = (0, import_react50.useState)();
+  const activatorEvent = (0, import_react50.useRef)(null);
+  const setActivatorEvent = (0, import_react50.useCallback)((event) => {
     activatorEvent.current = event;
   }, []);
-  const [position, setPosition] = (0, import_react49.useState)({ x: 0, y: 0 });
-  const handleDragStart = (0, import_react49.useCallback)(
+  const [position, setPosition] = (0, import_react50.useState)({ x: 0, y: 0 });
+  const handleDragStart = (0, import_react50.useCallback)(
     (event) => {
       setActiveIndex(keys.indexOf(event.active.id));
     },
     [keys]
   );
-  const handleDragMove = (0, import_react49.useCallback)((event) => {
+  const handleDragMove = (0, import_react50.useCallback)((event) => {
     setPosition({ ...event.delta });
   }, []);
-  const handleDragEnd = (0, import_react49.useCallback)(
+  const handleDragEnd = (0, import_react50.useCallback)(
     (event) => {
       const { active, over } = event;
       setActiveIndex(void 0);
@@ -14799,14 +14887,14 @@ function SortableRoot({
     },
     [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
   );
-  const [mounted, setMounted] = (0, import_react49.useState)(false);
-  (0, import_react49.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react50.useState)(false);
+  (0, import_react50.useEffect)(() => {
     setMounted(true);
   }, []);
-  return /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(
     SortableItemContext.Provider,
     {
-      value: (0, import_react49.useMemo)(
+      value: (0, import_react50.useMemo)(
         () => ({
           keys,
           acceptsDrop,
@@ -14817,7 +14905,7 @@ function SortableRoot({
         [acceptsDrop, axis, keys, position, setActivatorEvent]
       )
     },
-    /* @__PURE__ */ import_react49.default.createElement(
+    /* @__PURE__ */ import_react50.default.createElement(
       import_core.DndContext,
       {
         sensors,
@@ -14826,9 +14914,9 @@ function SortableRoot({
         onDragMove: handleDragMove,
         onDragEnd: handleDragEnd
       },
-      /* @__PURE__ */ import_react49.default.createElement(import_sortable.SortableContext, { items: keys, strategy: import_sortable.verticalListSortingStrategy }, children2),
+      /* @__PURE__ */ import_react50.default.createElement(import_sortable.SortableContext, { items: keys, strategy: import_sortable.verticalListSortingStrategy }, children2),
       mounted && renderOverlay && (0, import_react_dom4.createPortal)(
-        /* @__PURE__ */ import_react49.default.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
+        /* @__PURE__ */ import_react50.default.createElement(import_core.DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
         document.body
       )
     )
@@ -14836,18 +14924,18 @@ function SortableRoot({
 }
 var Sortable;
 ((Sortable2) => {
-  Sortable2.Item = (0, import_react49.memo)(SortableItem);
-  Sortable2.Root = (0, import_react49.memo)(SortableRoot);
+  Sortable2.Item = (0, import_react50.memo)(SortableItem);
+  Sortable2.Root = (0, import_react50.memo)(SortableRoot);
 })(Sortable || (Sortable = {}));
 
 // src/components/ListView.tsx
 var ROW_HEIGHT = 31;
 var SECTION_HEADER_LABEL_HEIGHT = 27;
-var ListViewDraggingContext = (0, import_react50.createContext)({
+var ListViewDraggingContext = (0, import_react51.createContext)({
   indentation: 12
 });
 ListViewDraggingContext.displayName = "ListViewDraggingContext";
-var ListRowContext = (0, import_react50.createContext)({
+var ListRowContext = (0, import_react51.createContext)({
   marginType: "none",
   selectedPosition: "only",
   sortable: false,
@@ -14865,7 +14953,7 @@ var ListViewRowTitle = ({
   className,
   children: children2,
   ...props
-}) => /* @__PURE__ */ import_react50.default.createElement(
+}) => /* @__PURE__ */ import_react51.default.createElement(
   "span",
   {
     className: `flex-1 overflow-hidden text-ellipsis whitespace-pre ${className ?? ""}`,
@@ -14873,8 +14961,8 @@ var ListViewRowTitle = ({
   },
   children2
 );
-var ListViewEditableRowTitleElement = (0, import_react50.forwardRef)(
-  ({ className, ...props }, forwardedRef) => /* @__PURE__ */ import_react50.default.createElement(
+var ListViewEditableRowTitleElement = (0, import_react51.forwardRef)(
+  ({ className, ...props }, forwardedRef) => /* @__PURE__ */ import_react51.default.createElement(
     InputField.Input,
     {
       ref: forwardedRef,
@@ -14889,8 +14977,8 @@ function ListViewEditableRowTitle({
   autoFocus,
   placeholder
 }) {
-  const inputRef = (0, import_react50.useRef)(null);
-  (0, import_react50.useLayoutEffect)(() => {
+  const inputRef = (0, import_react51.useRef)(null);
+  (0, import_react51.useLayoutEffect)(() => {
     const element = inputRef.current;
     if (!element || !autoFocus) return;
     element.focus();
@@ -14898,7 +14986,7 @@ function ListViewEditableRowTitle({
       element.select();
     }, 0);
   }, [autoFocus]);
-  return /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement(
     ListViewEditableRowTitleElement,
     {
       ref: inputRef,
@@ -14931,7 +15019,7 @@ var theme = {
     dividerSubtle: "var(--divider-subtle)"
   }
 };
-var RowContainer = (0, import_react50.forwardRef)(
+var RowContainer = (0, import_react51.forwardRef)(
   ({
     className,
     $marginType,
@@ -14951,7 +15039,7 @@ var RowContainer = (0, import_react50.forwardRef)(
     ...props
   }, ref) => {
     const margin = getPositionMargin($marginType);
-    return /* @__PURE__ */ import_react50.default.createElement(
+    return /* @__PURE__ */ import_react51.default.createElement(
       "div",
       {
         ref,
@@ -15027,7 +15115,7 @@ var RowContainer = (0, import_react50.forwardRef)(
     );
   }
 );
-var ListViewDragIndicatorElement = (0, import_react50.forwardRef)(
+var ListViewDragIndicatorElement = (0, import_react51.forwardRef)(
   ({
     className,
     $relativeDropPosition,
@@ -15037,7 +15125,7 @@ var ListViewDragIndicatorElement = (0, import_react50.forwardRef)(
     style: style5,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ import_react50.default.createElement(
+    return /* @__PURE__ */ import_react51.default.createElement(
       "div",
       {
         ref,
@@ -15066,7 +15154,7 @@ var ListViewDragIndicatorElement = (0, import_react50.forwardRef)(
     );
   }
 );
-var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
+var ListViewRow = (0, import_react51.forwardRef)(function ListViewRow2({
   id,
   tabIndex = 0,
   gap,
@@ -15101,12 +15189,12 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
     divider,
     gap: listGap,
     colorScheme
-  } = (0, import_react50.useContext)(ListRowContext);
+  } = (0, import_react51.useContext)(ListRowContext);
   const { hoverProps } = useHover({
     onHoverChange
   });
-  const { indentation, isDragging } = (0, import_react50.useContext)(ListViewDraggingContext);
-  const handlePress = (0, import_react50.useCallback)(
+  const { indentation, isDragging } = (0, import_react51.useContext)(ListViewDraggingContext);
+  const handlePress = (0, import_react51.useCallback)(
     (event) => {
       event.preventDefault();
       if (event.button !== 0) return;
@@ -15114,14 +15202,14 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
     },
     [onPress]
   );
-  const handleDoubleClick = (0, import_react50.useCallback)(
+  const handleDoubleClick = (0, import_react51.useCallback)(
     (event) => {
       event.stopPropagation();
       onDoubleClick?.();
     },
     [onDoubleClick]
   );
-  const mergedStyle = (0, import_react50.useMemo)(() => {
+  const mergedStyle = (0, import_react51.useMemo)(() => {
     return isDragging ? {
       // TODO: Where do these offsets actually come from?
       transform: `translate3d(-36px, -6px, 0)`,
@@ -15134,7 +15222,7 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
     ...renderProps
   }, ref) => {
     const Component3 = RowContainer;
-    const element = /* @__PURE__ */ import_react50.default.createElement(
+    const element = /* @__PURE__ */ import_react51.default.createElement(
       Component3,
       {
         ref,
@@ -15166,7 +15254,7 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
         tabIndex,
         className
       },
-      relativeDropPosition && /* @__PURE__ */ import_react50.default.createElement(
+      relativeDropPosition && /* @__PURE__ */ import_react51.default.createElement(
         ListViewDragIndicatorElement,
         {
           $colorScheme: colorScheme,
@@ -15180,11 +15268,11 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
           }) : dragIndicatorStyle
         }
       ),
-      depth > 0 && /* @__PURE__ */ import_react50.default.createElement(Spacer.Horizontal, { size: depth * indentation }),
+      depth > 0 && /* @__PURE__ */ import_react51.default.createElement(Spacer.Horizontal, { size: depth * indentation }),
       children2
     );
     if (menuItems && onSelectMenuItem) {
-      return /* @__PURE__ */ import_react50.default.createElement(
+      return /* @__PURE__ */ import_react51.default.createElement(
         ContextMenu,
         {
           items: menuItems,
@@ -15197,25 +15285,25 @@ var ListViewRow = (0, import_react50.forwardRef)(function ListViewRow2({
     return element;
   };
   if (sortable && id) {
-    return /* @__PURE__ */ import_react50.default.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
+    return /* @__PURE__ */ import_react51.default.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
       sortableProps,
       (0, import_react_compose_refs2.composeRefs)(sortableRef, forwardedRef)
     ));
   }
   return renderContent({}, forwardedRef);
 });
-var RenderItemContext = (0, import_react50.createContext)(
+var RenderItemContext = (0, import_react51.createContext)(
   () => null
 );
 RenderItemContext.displayName = "RenderItemContext";
-var VirtualizedListRow = (0, import_react50.memo)(function VirtualizedListRow2({
+var VirtualizedListRow = (0, import_react51.memo)(function VirtualizedListRow2({
   index,
   style: style5
 }) {
-  const renderItem = (0, import_react50.useContext)(RenderItemContext);
-  return /* @__PURE__ */ import_react50.default.createElement("div", { key: index, style: style5 }, renderItem(index));
+  const renderItem = (0, import_react51.useContext)(RenderItemContext);
+  return /* @__PURE__ */ import_react51.default.createElement("div", { key: index, style: style5 }, renderItem(index));
 });
-var VirtualizedListInner = (0, import_react50.forwardRef)(function VirtualizedListInner2({
+var VirtualizedListInner = (0, import_react51.forwardRef)(function VirtualizedListInner2({
   size: size3,
   scrollElement,
   items,
@@ -15223,20 +15311,20 @@ var VirtualizedListInner = (0, import_react50.forwardRef)(function VirtualizedLi
   keyExtractor,
   renderItem
 }, ref) {
-  const listRef = (0, import_react50.useRef)(null);
-  (0, import_react50.useImperativeHandle)(ref, () => ({
+  const listRef = (0, import_react51.useRef)(null);
+  (0, import_react51.useImperativeHandle)(ref, () => ({
     scrollToIndex(index) {
       listRef.current?.scrollToItem(index);
     }
   }));
-  (0, import_react50.useLayoutEffect)(() => {
+  (0, import_react51.useLayoutEffect)(() => {
     listRef.current?.resetAfterIndex(0);
   }, [
     // When items change, we need to re-render the virtualized list,
     // since it doesn't currently support row height changes
     items
   ]);
-  const listStyle = (0, import_react50.useMemo)(
+  const listStyle = (0, import_react51.useMemo)(
     () => ({
       overflowX: "initial",
       overflowY: "initial",
@@ -15244,18 +15332,18 @@ var VirtualizedListInner = (0, import_react50.forwardRef)(function VirtualizedLi
     }),
     []
   );
-  return /* @__PURE__ */ import_react50.default.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ import_react51.default.createElement(
     WindowScroller,
     {
       scrollElement,
-      style: (0, import_react50.useMemo)(() => ({ flex: "1 1 auto" }), [])
+      style: (0, import_react51.useMemo)(() => ({ flex: "1 1 auto" }), [])
     },
-    (0, import_react50.useCallback)(
+    (0, import_react51.useCallback)(
       ({
         registerChild,
         onChildScroll,
         scrollTop
-      }) => /* @__PURE__ */ import_react50.default.createElement("div", { ref: registerChild }, /* @__PURE__ */ import_react50.default.createElement(
+      }) => /* @__PURE__ */ import_react51.default.createElement("div", { ref: registerChild }, /* @__PURE__ */ import_react51.default.createElement(
         import_react_window.VariableSizeList,
         {
           ref: listRef,
@@ -15285,10 +15373,10 @@ var VirtualizedListInner = (0, import_react50.forwardRef)(function VirtualizedLi
     )
   ));
 });
-var VirtualizedList = (0, import_react50.memo)(
+var VirtualizedList = (0, import_react51.memo)(
   VirtualizedListInner
 );
-var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInner2({
+var ListViewRootInner = (0, import_react51.forwardRef)(function ListViewRootInner2({
   id,
   className,
   style: style5,
@@ -15310,7 +15398,7 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
   colorScheme = "primary",
   gap = 0
 }, forwardedRef) {
-  const handleClick = (0, import_react50.useCallback)(
+  const handleClick = (0, import_react51.useCallback)(
     (event) => {
       if (event.target instanceof HTMLElement && event.target.classList.contains("scroll-component"))
         return;
@@ -15320,11 +15408,11 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
     },
     [onPress]
   );
-  const renderChild = (0, import_react50.useCallback)(
+  const renderChild = (0, import_react51.useCallback)(
     (index) => renderItem(data[index], index, { isDragging: false }),
     [data, renderItem]
   );
-  const defaultContextValue = (0, import_react50.useMemo)(
+  const defaultContextValue = (0, import_react51.useMemo)(
     () => ({
       colorScheme,
       marginType: "none",
@@ -15340,16 +15428,16 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
     }),
     [colorScheme, sortable, expandable, divider, pressEventName, variant, gap]
   );
-  const getItemContextValue = (0, import_react50.useCallback)(
+  const getItemContextValue = (0, import_react51.useCallback)(
     (i) => {
       if (variant === "bare" || variant === "normal")
         return defaultContextValue;
       const current = renderChild(i);
-      if (!(0, import_react50.isValidElement)(current)) return;
+      if (!(0, import_react51.isValidElement)(current)) return;
       const prevChild = i - 1 >= 0 && renderChild(i - 1);
       const nextChild = i + 1 < data.length && renderChild(i + 1);
-      const next = (0, import_react50.isValidElement)(nextChild) ? nextChild : void 0;
-      const prev = (0, import_react50.isValidElement)(prevChild) ? prevChild : void 0;
+      const next = (0, import_react51.isValidElement)(nextChild) ? nextChild : void 0;
+      const prev = (0, import_react51.isValidElement)(prevChild) ? prevChild : void 0;
       const hasMarginTop = !prev;
       const hasMarginBottom = !next || current.props.isSectionHeader || next && next.props.isSectionHeader;
       let marginType;
@@ -15402,25 +15490,25 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
       gap
     ]
   );
-  const draggingContextOverlayValue = (0, import_react50.useMemo)(
+  const draggingContextOverlayValue = (0, import_react51.useMemo)(
     () => ({ indentation, isDragging: true }),
     [indentation]
   );
-  const renderOverlay = (0, import_react50.useCallback)(
-    (index) => /* @__PURE__ */ import_react50.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react50.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
+  const renderOverlay = (0, import_react51.useCallback)(
+    (index) => /* @__PURE__ */ import_react51.default.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ import_react51.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
-  const renderWrappedChild = (0, import_react50.useCallback)(
+  const renderWrappedChild = (0, import_react51.useCallback)(
     (index) => {
       const contextValue = getItemContextValue(index);
       const current = renderChild(index);
-      if (!contextValue || !(0, import_react50.isValidElement)(current)) return null;
-      return /* @__PURE__ */ import_react50.default.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
+      if (!contextValue || !(0, import_react51.isValidElement)(current)) return null;
+      return /* @__PURE__ */ import_react51.default.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
     },
     [getItemContextValue, renderChild]
   );
-  const ids = (0, import_react50.useMemo)(() => data.map(keyExtractor), [keyExtractor, data]);
-  const withSortable = (children2) => sortable ? /* @__PURE__ */ import_react50.default.createElement(
+  const ids = (0, import_react51.useMemo)(() => data.map(keyExtractor), [keyExtractor, data]);
+  const withSortable = (children2) => sortable ? /* @__PURE__ */ import_react51.default.createElement(
     Sortable.Root,
     {
       onMoveItem,
@@ -15430,8 +15518,8 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
     },
     children2
   ) : children2;
-  const withScrollable = (children2) => scrollable ? /* @__PURE__ */ import_react50.default.createElement(ScrollArea, null, children2) : children2(null);
-  const getItemHeight = (0, import_react50.useCallback)(
+  const withScrollable = (children2) => scrollable ? /* @__PURE__ */ import_react51.default.createElement(ScrollArea, null, children2) : children2(null);
+  const getItemHeight = (0, import_react51.useCallback)(
     (index) => {
       const child = getItemContextValue(index);
       const margin = child?.marginType ? getPositionMargin(child.marginType) : { top: 0, bottom: 0 };
@@ -15440,13 +15528,13 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
     },
     [getItemContextValue, variant]
   );
-  const getKey = (0, import_react50.useCallback)(
+  const getKey = (0, import_react51.useCallback)(
     (index) => keyExtractor(data[index], index),
     [data, keyExtractor]
   );
-  const draggingContextValue = (0, import_react50.useMemo)(() => ({ indentation }), [indentation]);
-  const gapStyle = (0, import_react50.useMemo)(() => ({ gap: `${gap}px` }), [gap]);
-  return /* @__PURE__ */ import_react50.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react50.default.createElement(
+  const draggingContextValue = (0, import_react51.useMemo)(() => ({ indentation }), [indentation]);
+  const gapStyle = (0, import_react51.useMemo)(() => ({ gap: `${gap}px` }), [gap]);
+  return /* @__PURE__ */ import_react51.default.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ import_react51.default.createElement(
     "div",
     {
       id,
@@ -15458,7 +15546,7 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
     },
     withScrollable(
       (scrollElementRef) => withSortable(
-        virtualized ? /* @__PURE__ */ import_react50.default.createElement(
+        virtualized ? /* @__PURE__ */ import_react51.default.createElement(
           VirtualizedList,
           {
             ref: forwardedRef,
@@ -15474,42 +15562,42 @@ var ListViewRootInner = (0, import_react50.forwardRef)(function ListViewRootInne
     )
   ));
 });
-var ListViewRoot = (0, import_react50.memo)(ListViewRootInner);
-var ChildrenListViewInner = (0, import_react50.forwardRef)(function ChildrenListViewInner2({ children: children2, ...rest }, forwardedRef) {
-  const items = (0, import_react50.useMemo)(
-    () => import_react50.Children.toArray(children2).flatMap(
-      (child) => (0, import_react50.isValidElement)(child) ? [child] : []
+var ListViewRoot = (0, import_react51.memo)(ListViewRootInner);
+var ChildrenListViewInner = (0, import_react51.forwardRef)(function ChildrenListViewInner2({ children: children2, ...rest }, forwardedRef) {
+  const items = (0, import_react51.useMemo)(
+    () => import_react51.Children.toArray(children2).flatMap(
+      (child) => (0, import_react51.isValidElement)(child) ? [child] : []
     ),
     [children2]
   );
-  return /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement(
     ListViewRoot,
     {
       ref: forwardedRef,
       ...rest,
       data: items,
-      keyExtractor: (0, import_react50.useCallback)(
+      keyExtractor: (0, import_react51.useCallback)(
         ({ key }, index) => typeof key === "string" ? key : (key ?? index).toString(),
         []
       ),
-      renderItem: (0, import_react50.useCallback)((item) => item, [])
+      renderItem: (0, import_react51.useCallback)((item) => item, [])
     }
   );
 });
-var ChildrenListView = (0, import_react50.memo)(ChildrenListViewInner);
-var SimpleListViewInner = (0, import_react50.forwardRef)(function SimpleListViewInner2(props, forwardedRef) {
+var ChildrenListView = (0, import_react51.memo)(ChildrenListViewInner);
+var SimpleListViewInner = (0, import_react51.forwardRef)(function SimpleListViewInner2(props, forwardedRef) {
   if ("children" in props) {
-    return /* @__PURE__ */ import_react50.default.createElement(ChildrenListView, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ import_react51.default.createElement(ChildrenListView, { ref: forwardedRef, ...props });
   } else {
-    return /* @__PURE__ */ import_react50.default.createElement(ListViewRoot, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ import_react51.default.createElement(ListViewRoot, { ref: forwardedRef, ...props });
   }
 });
-var SimpleListView = (0, import_react50.memo)(SimpleListViewInner);
+var SimpleListView = (0, import_react51.memo)(SimpleListViewInner);
 var ListView;
 ((ListView2) => {
-  ListView2.RowTitle = (0, import_react50.memo)(ListViewRowTitle);
-  ListView2.EditableRowTitle = (0, import_react50.memo)(ListViewEditableRowTitle);
-  ListView2.Row = (0, import_react50.memo)(ListViewRow);
+  ListView2.RowTitle = (0, import_react51.memo)(ListViewRowTitle);
+  ListView2.EditableRowTitle = (0, import_react51.memo)(ListViewEditableRowTitle);
+  ListView2.Row = (0, import_react51.memo)(ListViewRow);
   ListView2.Root = SimpleListView;
   ListView2.RowContext = ListRowContext;
   ListView2.DragIndicator = ListViewDragIndicatorElement;
@@ -15546,15 +15634,15 @@ function filterWithGroupedSections(items, query) {
     return [...headers, ...newItems];
   });
 }
-var CompletionMenu = (0, import_react51.memo)(
-  (0, import_react51.forwardRef)(function CompletionMenu2({
+var CompletionMenu = (0, import_react52.memo)(
+  (0, import_react52.forwardRef)(function CompletionMenu2({
     items,
     selectedIndex,
     onSelectItem,
     onHoverIndex,
     listSize
   }, forwardedRef) {
-    return /* @__PURE__ */ import_react51.default.createElement(
+    return /* @__PURE__ */ import_react52.default.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -15566,13 +15654,13 @@ var CompletionMenu = (0, import_react51.memo)(
         sectionHeaderVariant: "label",
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ import_react51.default.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
+            return /* @__PURE__ */ import_react52.default.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
           }
           const tokens = fuzzyTokenize({
             item: item.name,
             itemScore: item
           });
-          return /* @__PURE__ */ import_react51.default.createElement(
+          return /* @__PURE__ */ import_react52.default.createElement(
             ListView.Row,
             {
               key: item.id,
@@ -15584,7 +15672,7 @@ var CompletionMenu = (0, import_react51.memo)(
                 }
               }
             },
-            tokens.map((token, j) => /* @__PURE__ */ import_react51.default.createElement(
+            tokens.map((token, j) => /* @__PURE__ */ import_react52.default.createElement(
               "span",
               {
                 key: j,
@@ -15592,15 +15680,15 @@ var CompletionMenu = (0, import_react51.memo)(
               },
               token.text
             )),
-            item.icon && /* @__PURE__ */ import_react51.default.createElement(import_react51.default.Fragment, null, /* @__PURE__ */ import_react51.default.createElement(Spacer.Horizontal, null), item.icon)
+            item.icon && /* @__PURE__ */ import_react52.default.createElement(import_react52.default.Fragment, null, /* @__PURE__ */ import_react52.default.createElement(Spacer.Horizontal, null), item.icon)
           );
         }
       }
     );
   })
 );
-var InputFieldWithCompletions = (0, import_react51.memo)(
-  (0, import_react51.forwardRef)(function InputFieldWithCompletions2({
+var InputFieldWithCompletions = (0, import_react52.memo)(
+  (0, import_react52.forwardRef)(function InputFieldWithCompletions2({
     loading,
     initialValue = "",
     placeholder,
@@ -15618,13 +15706,13 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
     hideChildrenWhenFocused = false,
     hideMenuWhenEmptyValue = false
   }, forwardedRef) {
-    const ref = (0, import_react51.useRef)(null);
-    const [isFocused, setIsFocused] = (0, import_react51.useState)(false);
-    const [state, _setState] = (0, import_react51.useState)({
+    const ref = (0, import_react52.useRef)(null);
+    const [isFocused, setIsFocused] = (0, import_react52.useState)(false);
+    const [state, _setState] = (0, import_react52.useState)({
       filter: initialValue,
       selectedIndex: 0
     });
-    const updateState = (0, import_react51.useCallback)(
+    const updateState = (0, import_react52.useCallback)(
       (newState, hoverItem) => {
         const nextState = { ...state, ...newState };
         const nextItems = filterWithGroupedSections(items, nextState.filter);
@@ -15653,15 +15741,15 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
       },
       [items, onChange, onHoverItem, state]
     );
-    const initialValueRef = (0, import_react51.useRef)(initialValue);
-    (0, import_react51.useLayoutEffect)(() => {
+    const initialValueRef = (0, import_react52.useRef)(initialValue);
+    (0, import_react52.useLayoutEffect)(() => {
       if (initialValueRef.current === initialValue) return;
       initialValueRef.current = initialValue;
       updateState({ filter: initialValue });
     }, [initialValue, updateState]);
     const { filter, selectedIndex } = state;
-    const listRef = import_react51.default.useRef(null);
-    const filteredItems = (0, import_react51.useMemo)(
+    const listRef = import_react52.default.useRef(null);
+    const filteredItems = (0, import_react52.useMemo)(
       () => filterWithGroupedSections(items, filter),
       [items, filter]
     );
@@ -15677,13 +15765,13 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
       ),
       ListView.rowHeight * 10.5
     );
-    (0, import_react51.useEffect)(() => {
+    (0, import_react52.useEffect)(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
-    const lastSubmittedValueRef = (0, import_react51.useRef)(void 0);
-    const selectItem = (0, import_react51.useCallback)(
+    const lastSubmittedValueRef = (0, import_react52.useRef)(void 0);
+    const selectItem = (0, import_react52.useCallback)(
       (item) => {
         if (item.type === "sectionHeader") return;
         lastSubmittedValueRef.current = {
@@ -15698,17 +15786,17 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
       },
       [filter, onSelectItem, onHoverItem, ref]
     );
-    const handleChange = (0, import_react51.useCallback)(
+    const handleChange = (0, import_react52.useCallback)(
       (value) => updateState({ selectedIndex: 0, filter: value }),
       [updateState]
     );
-    const handleBlur = (0, import_react51.useCallback)(() => {
+    const handleBlur = (0, import_react52.useCallback)(() => {
       setIsFocused(false);
       const didSubmit = lastSubmittedValueRef.current?.filter === filter;
       updateState({ selectedIndex: 0, filter: initialValue }, "resetHover");
       onBlur?.(didSubmit, filter);
     }, [filter, initialValue, onBlur, updateState]);
-    const handleFocus = (0, import_react51.useCallback)(
+    const handleFocus = (0, import_react52.useCallback)(
       (event) => {
         setIsFocused(true);
         updateState({ selectedIndex: 0, filter: initialValue });
@@ -15716,11 +15804,11 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
       },
       [initialValue, onFocus, updateState]
     );
-    const handleIndexChange = (0, import_react51.useCallback)(
+    const handleIndexChange = (0, import_react52.useCallback)(
       (index) => updateState({ selectedIndex: index }),
       [updateState]
     );
-    const handleKeyDown = (0, import_react51.useCallback)(
+    const handleKeyDown = (0, import_react52.useCallback)(
       (event) => {
         let handled = false;
         switch (event.key) {
@@ -15784,7 +15872,7 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
     );
     const display = !filter && hideMenuWhenEmptyValue ? "none" : "flex";
     const typeaheadValue = filteredItems[selectedIndex]?.name;
-    (0, import_react51.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react52.useImperativeHandle)(forwardedRef, () => ({
       focus: () => {
         ref.current?.focus();
       },
@@ -15795,13 +15883,13 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
         ref.current?.setSelectionRange(0, ref.current.value.length);
       }
     }));
-    return /* @__PURE__ */ import_react51.default.createElement(
+    return /* @__PURE__ */ import_react52.default.createElement(
       InputField.Root,
       {
         size: size3,
         renderPopoverContent: ({ width }) => {
           const listSize = { width, height };
-          return /* @__PURE__ */ import_react51.default.createElement(
+          return /* @__PURE__ */ import_react52.default.createElement(
             "div",
             {
               className: `flex flex-col ${!filter && hideMenuWhenEmptyValue ? "none" : "flex"}`,
@@ -15809,7 +15897,7 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
                 flex: `0 0 ${height}px`
               }
             },
-            filteredItems.length > 0 ? /* @__PURE__ */ import_react51.default.createElement(
+            filteredItems.length > 0 ? /* @__PURE__ */ import_react52.default.createElement(
               CompletionMenu,
               {
                 ref: listRef,
@@ -15819,11 +15907,11 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
                 onHoverIndex: handleIndexChange,
                 listSize
               }
-            ) : /* @__PURE__ */ import_react51.default.createElement("div", { className: "flex flex-col h-[100px] p-5 items-center justify-center" }, /* @__PURE__ */ import_react51.default.createElement(Small, { className: "text-text-disabled" }, loading ? "Loading" : "No results"))
+            ) : /* @__PURE__ */ import_react52.default.createElement("div", { className: "flex flex-col h-[100px] p-5 items-center justify-center" }, /* @__PURE__ */ import_react52.default.createElement(Small, { className: "text-text-disabled" }, loading ? "Loading" : "No results"))
           );
         }
       },
-      /* @__PURE__ */ import_react51.default.createElement(
+      /* @__PURE__ */ import_react52.default.createElement(
         InputField.Input,
         {
           ref,
@@ -15847,9 +15935,9 @@ var InputFieldWithCompletions = (0, import_react51.memo)(
           "aria-controls": "component-listbox"
         }
       ),
-      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ import_react51.default.createElement(InputField.Typeahead, { value: typeaheadValue, prefix: filter }),
+      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ import_react52.default.createElement(InputField.Typeahead, { value: typeaheadValue, prefix: filter }),
       (!isFocused || !hideChildrenWhenFocused) && children2,
-      loading && isFocused && /* @__PURE__ */ import_react51.default.createElement(InputField.Label, null, /* @__PURE__ */ import_react51.default.createElement(ActivityIndicator, null))
+      loading && isFocused && /* @__PURE__ */ import_react52.default.createElement(InputField.Label, null, /* @__PURE__ */ import_react52.default.createElement(ActivityIndicator, null))
     );
   })
 );
@@ -15869,9 +15957,9 @@ function getNextIndex(items, currentIndex, direction, isDisabled) {
 }
 
 // src/components/InspectorContainer.tsx
-var import_react52 = __toESM(require("react"));
-var InspectorContainer = (0, import_react52.memo)(
-  (0, import_react52.forwardRef)(function InspectorContainer2({
+var import_react53 = __toESM(require("react"));
+var InspectorContainer = (0, import_react53.memo)(
+  (0, import_react53.forwardRef)(function InspectorContainer2({
     header,
     children: children2,
     fallback,
@@ -15880,7 +15968,7 @@ var InspectorContainer = (0, import_react52.memo)(
     className,
     style: style5
   }, forwardedRef) {
-    return /* @__PURE__ */ import_react52.default.createElement(
+    return /* @__PURE__ */ import_react53.default.createElement(
       "div",
       {
         ref: forwardedRef,
@@ -15895,42 +15983,47 @@ var InspectorContainer = (0, import_react52.memo)(
         }
       },
       header,
-      children2 ? /* @__PURE__ */ import_react52.default.createElement(ScrollArea, null, /* @__PURE__ */ import_react52.default.createElement("div", { className: "flex flex-col relative" }, showDividers ? withSeparatorElements(children2, /* @__PURE__ */ import_react52.default.createElement(Divider, null)) : children2)) : fallback ? /* @__PURE__ */ import_react52.default.createElement("div", { className: "flex flex-col relative h-full" }, fallback) : null
+      children2 ? /* @__PURE__ */ import_react53.default.createElement(ScrollArea, null, /* @__PURE__ */ import_react53.default.createElement("div", { className: "flex flex-col relative" }, showDividers ? withSeparatorElements(children2, /* @__PURE__ */ import_react53.default.createElement(Divider, null)) : children2)) : fallback ? /* @__PURE__ */ import_react53.default.createElement("div", { className: "flex flex-col relative h-full" }, fallback) : null
     );
   })
 );
 
 // src/components/Label.tsx
-var import_react53 = __toESM(require("react"));
-function LabelRoot({ label, children: children2 }) {
-  return /* @__PURE__ */ import_react53.default.createElement("span", { className: `flex-none relative outline-none border-0 min-w-0 text-left flex flex-col items-center` }, children2, label && /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, /* @__PURE__ */ import_react53.default.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ import_react53.default.createElement("span", { className: `${textStyles.small} text-text-muted text-xs flex-none min-w-0 tracking-[0.4px] whitespace-pre` }, label)));
-}
-var Label;
-((Label2) => {
-  Label2.Root = (0, import_react53.memo)(LabelRoot);
-})(Label || (Label = {}));
+var import_react54 = __toESM(require("react"));
+var Label = (0, import_react54.memo)(
+  (0, import_react54.forwardRef)(function Label2({ className, ...props }, ref) {
+    return /* @__PURE__ */ import_react54.default.createElement(
+      "label",
+      {
+        ref,
+        className: `font-sans text-label uppercase flex items-center leading-[19px] select-none font-bold text-text-muted ${className ?? ""}`,
+        ...props
+      }
+    );
+  })
+);
 
 // src/components/LabeledElementView.tsx
 var kiwi = __toESM(require("kiwi.js"));
-var import_react54 = __toESM(require("react"));
-var LabeledElementView = (0, import_react54.memo)(function LabeledElementView2({
+var import_react55 = __toESM(require("react"));
+var LabeledElementView = (0, import_react55.memo)(function LabeledElementView2({
   children: children2,
   renderLabel
 }) {
-  const elementIds = import_react54.Children.toArray(children2).flatMap(
-    (child) => (0, import_react54.isValidElement)(child) && child.type === import_react54.Fragment ? child.props.children : [child]
+  const elementIds = import_react55.Children.toArray(children2).flatMap(
+    (child) => (0, import_react55.isValidElement)(child) && child.type === import_react55.Fragment ? child.props.children : [child]
   ).map(
-    (child) => (0, import_react54.isValidElement)(child) && "id" in child.props ? child.props.id : null
+    (child) => (0, import_react55.isValidElement)(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = (0, import_react54.useRef)(null);
-  const refs = (0, import_react54.useMemo)(() => {
+  const containerRef = (0, import_react55.useRef)(null);
+  const refs = (0, import_react55.useMemo)(() => {
     return Object.fromEntries(
-      serializedIds.split(",").map((id) => [id, (0, import_react54.createRef)()])
+      serializedIds.split(",").map((id) => [id, (0, import_react55.createRef)()])
     );
   }, [serializedIds]);
-  const labelElements = (0, import_react54.useMemo)(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ import_react54.default.createElement(
+  const labelElements = (0, import_react55.useMemo)(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ import_react55.default.createElement(
       "span",
       {
         key: id,
@@ -15943,7 +16036,7 @@ var LabeledElementView = (0, import_react54.memo)(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  (0, import_react54.useLayoutEffect)(() => {
+  (0, import_react55.useLayoutEffect)(() => {
     if (!containerRef.current) return;
     const containerRect = containerRef.current.getBoundingClientRect();
     const solver = new kiwi.Solver();
@@ -16005,30 +16098,30 @@ var LabeledElementView = (0, import_react54.memo)(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ import_react54.default.createElement("div", { className: "flex flex-1 flex-col relative", ref: containerRef }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "flex flex-1 items-center" }, children2), /* @__PURE__ */ import_react54.default.createElement("div", { className: "relative overflow-hidden select-none" }, labelElements));
+  return /* @__PURE__ */ import_react55.default.createElement("div", { className: "flex flex-1 flex-col relative", ref: containerRef }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "flex flex-1 items-center" }, children2), /* @__PURE__ */ import_react55.default.createElement("div", { className: "relative overflow-hidden select-none" }, labelElements));
 });
 
 // src/components/Progress.tsx
 var import_noya_utils9 = require("@noya-app/noya-utils");
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var import_react55 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 function Progress({
   value,
   variant = "normal",
   className
 }) {
   const clampedValue = (0, import_noya_utils9.clamp)(value, 0, 100);
-  const transformStyles = (0, import_react55.useMemo)(() => ({
+  const transformStyles = (0, import_react56.useMemo)(() => ({
     transform: `translateX(-${100 - clampedValue}%)`
   }), [clampedValue]);
-  return /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement(
     ProgressPrimitive.Root,
     {
       className: `relative hidden bg-input-background h-[5px] ${className ?? ""}`,
       style: { transform: "translateZ(0)" },
       value: clampedValue
     },
-    /* @__PURE__ */ import_react55.default.createElement(
+    /* @__PURE__ */ import_react56.default.createElement(
       ProgressPrimitive.Indicator,
       {
         className: cn(variant === "primary" ? "bg-primary" : variant === "secondary" ? "bg-secondary" : variant === "warning" ? "bg-warning" : "bg-text", "transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1)", "w-full h-full"),
@@ -16040,10 +16133,10 @@ function Progress({
 
 // src/components/RadioGroup.tsx
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"));
-var import_react56 = __toESM(require("react"));
-var ToggleGroupItem = (0, import_react56.forwardRef)(function ToggleGroupItem2({ value, tooltip, children: children2, disabled = false }, forwardedRef) {
-  const { colorScheme } = (0, import_react56.useContext)(RadioGroupContext);
-  const itemElement = /* @__PURE__ */ import_react56.default.createElement(
+var import_react57 = __toESM(require("react"));
+var ToggleGroupItem = (0, import_react57.forwardRef)(function ToggleGroupItem2({ value, tooltip, children: children2, disabled = false }, forwardedRef) {
+  const { colorScheme } = (0, import_react57.useContext)(RadioGroupContext);
+  const itemElement = /* @__PURE__ */ import_react57.default.createElement(
     ToggleGroupPrimitive.Item,
     {
       ref: forwardedRef,
@@ -16053,9 +16146,9 @@ var ToggleGroupItem = (0, import_react56.forwardRef)(function ToggleGroupItem2({
     },
     children2
   );
-  return tooltip ? /* @__PURE__ */ import_react56.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ import_react57.default.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
-var RadioGroupContext = (0, import_react56.createContext)({
+var RadioGroupContext = (0, import_react57.createContext)({
   colorScheme: "primary"
 });
 function ToggleGroupRoot({
@@ -16066,15 +16159,15 @@ function ToggleGroupRoot({
   allowEmpty,
   children: children2
 }) {
-  const contextValue = (0, import_react56.useMemo)(() => ({ colorScheme }), [colorScheme]);
-  const handleValueChange = (0, import_react56.useCallback)(
+  const contextValue = (0, import_react57.useMemo)(() => ({ colorScheme }), [colorScheme]);
+  const handleValueChange = (0, import_react57.useCallback)(
     (value2) => {
       if (!allowEmpty && !value2) return;
       onValueChange?.(value2);
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ import_react56.default.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react56.default.createElement(
+  return /* @__PURE__ */ import_react57.default.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react57.default.createElement(
     ToggleGroupPrimitive.Root,
     {
       id,
@@ -16088,23 +16181,29 @@ function ToggleGroupRoot({
 }
 var RadioGroup;
 ((RadioGroup2) => {
-  RadioGroup2.Root = (0, import_react56.memo)(ToggleGroupRoot);
-  RadioGroup2.Item = (0, import_react56.memo)(ToggleGroupItem);
+  RadioGroup2.Root = (0, import_react57.memo)(ToggleGroupRoot);
+  RadioGroup2.Item = (0, import_react57.memo)(ToggleGroupItem);
 })(RadioGroup || (RadioGroup = {}));
 
 // src/components/SelectMenu.tsx
 var import_noya_icons6 = require("@noya-app/noya-icons");
 var Select = __toESM(require("@radix-ui/react-select"));
-var import_react57 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var readOnlyStyle = {
   justifyContent: "flex-start",
   textAlign: "left"
 };
-var textStyle = {
-  fontSize: "0.85rem"
-};
-var labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] absolute inset-0 font-bold text-[60%] pointer-events-none flex items-center justify-end pr-6`;
-var SelectMenu = (0, import_react57.memo)(function SelectMenu2({
+var labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] pointer-events-none flex items-center mr-1.5`;
+var scrollButtonStyles = `
+  flex 
+  items-center 
+  justify-center 
+  h-[25px] 
+  cursor-default
+  text-text-muted
+  hover:text-text
+`;
+var SelectMenu = (0, import_react58.memo)(function SelectMenu2({
   id,
   style: style5,
   className,
@@ -16121,8 +16220,8 @@ var SelectMenu = (0, import_react57.memo)(function SelectMenu2({
     (item) => typeof item !== "string" && item.value === value
   );
   const icon = selectedItem?.icon;
-  const readOnlyButton = (0, import_react57.useMemo)(
-    () => /* @__PURE__ */ import_react57.default.createElement(
+  const readOnlyButton = (0, import_react58.useMemo)(
+    () => /* @__PURE__ */ import_react58.default.createElement(
       Button,
       {
         id,
@@ -16131,59 +16230,62 @@ var SelectMenu = (0, import_react57.memo)(function SelectMenu2({
         className: `${className ?? ""} flex-1`,
         disabled
       },
-      icon && /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react57.default.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
-      /* @__PURE__ */ import_react57.default.createElement("span", { style: { ...textStyle }, className: "flex flex-1" }, selectedItem?.title ?? value)
+      icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
+      /* @__PURE__ */ import_react58.default.createElement("span", { className: "flex flex-1" }, selectedItem?.title ?? value)
     ),
     [icon, id, style5, className, disabled, value, selectedItem]
   );
-  const trigger = (0, import_react57.useMemo)(
-    () => /* @__PURE__ */ import_react57.default.createElement(Select.SelectTrigger, { asChild: true }, /* @__PURE__ */ import_react57.default.createElement(
+  const trigger = (0, import_react58.useMemo)(
+    () => /* @__PURE__ */ import_react58.default.createElement(Select.SelectTrigger, { asChild: true }, /* @__PURE__ */ import_react58.default.createElement(
       Button,
       {
         id,
-        style: { ...textStyle, ...style5 },
+        style: style5,
         className: `${className ?? "w-full"} flex-1`,
         disabled
       },
-      icon && /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react57.default.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
-      /* @__PURE__ */ import_react57.default.createElement("span", { className: "flex flex-1" }, /* @__PURE__ */ import_react57.default.createElement(Select.Value, { placeholder })),
-      /* @__PURE__ */ import_react57.default.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
-      /* @__PURE__ */ import_react57.default.createElement(import_noya_icons6.DropdownChevronIcon, null)
+      icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
+      /* @__PURE__ */ import_react58.default.createElement("span", { className: "flex flex-1 mr-1.5" }, /* @__PURE__ */ import_react58.default.createElement(Select.Value, { placeholder })),
+      label && /* @__PURE__ */ import_react58.default.createElement("span", { className: labelStyles }, label),
+      /* @__PURE__ */ import_react58.default.createElement(import_noya_icons6.DropdownChevronIcon, null)
     )),
-    [icon, id, style5, className, disabled, placeholder]
+    [id, style5, className, disabled, icon, placeholder, label]
   );
   if (readOnly) {
-    return label ? /* @__PURE__ */ import_react57.default.createElement("div", { className: "flex flex-col relative" }, readOnlyButton, /* @__PURE__ */ import_react57.default.createElement(
-      "label",
-      {
-        className: labelStyles,
-        htmlFor: id
-      },
-      label
-    )) : readOnlyButton;
+    return label ? /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex flex-col relative" }, readOnlyButton, /* @__PURE__ */ import_react58.default.createElement("label", { className: labelStyles, htmlFor: id }, label)) : readOnlyButton;
   }
-  return /* @__PURE__ */ import_react57.default.createElement(Select.Root, { value, onValueChange: onSelect, open }, label ? /* @__PURE__ */ import_react57.default.createElement("div", { className: "flex-1 flex-col relative" }, trigger, label && /* @__PURE__ */ import_react57.default.createElement("label", { className: labelStyles, htmlFor: id }, label)) : trigger, /* @__PURE__ */ import_react57.default.createElement(Select.Portal, null, /* @__PURE__ */ import_react57.default.createElement(Select.Content, { className: styles.contentStyle }, /* @__PURE__ */ import_react57.default.createElement(Select.Viewport, null, menuItems.map((menuItem) => {
+  return /* @__PURE__ */ import_react58.default.createElement(Select.Root, { value, onValueChange: onSelect, open }, trigger, /* @__PURE__ */ import_react58.default.createElement(Select.Portal, null, /* @__PURE__ */ import_react58.default.createElement(Select.Content, { className: styles.contentStyle }, /* @__PURE__ */ import_react58.default.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react58.default.createElement(import_noya_icons6.ChevronUpIcon, null)), /* @__PURE__ */ import_react58.default.createElement(Select.Viewport, null, menuItems.map((menuItem) => {
     if (typeof menuItem === "string") {
-      return /* @__PURE__ */ import_react57.default.createElement(Select.Separator, { className: styles.separatorStyle });
+      return /* @__PURE__ */ import_react58.default.createElement(Select.Separator, { className: styles.separatorStyle });
     }
     const value2 = menuItem.value ?? "";
-    return /* @__PURE__ */ import_react57.default.createElement(SelectItem, { key: value2, value: value2, icon: menuItem.icon }, menuItem.title ?? value2);
-  })))));
+    return /* @__PURE__ */ import_react58.default.createElement(SelectItem, { key: value2, value: value2, icon: menuItem.icon }, menuItem.title ?? value2);
+  })), /* @__PURE__ */ import_react58.default.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ import_react58.default.createElement(import_noya_icons6.ChevronDownIcon, null)))));
 });
-var SelectItem = import_react57.default.forwardRef(
+var SelectItem = import_react58.default.forwardRef(
   ({
     children: children2,
     icon,
     disabled,
     ...props
   }, forwardedRef) => {
-    return /* @__PURE__ */ import_react57.default.createElement(Select.Item, { className: styles.itemStyle({ disabled }), disabled, ...props, ref: forwardedRef }, icon && /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react57.default.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ import_react57.default.createElement(Select.ItemText, { style: textStyle }, children2));
+    return /* @__PURE__ */ import_react58.default.createElement(
+      Select.Item,
+      {
+        className: styles.itemStyle({ disabled }),
+        disabled,
+        ...props,
+        ref: forwardedRef
+      },
+      icon && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react58.default.createElement(Spacer.Horizontal, { size: 8 })),
+      /* @__PURE__ */ import_react58.default.createElement(Select.ItemText, null, children2)
+    );
   }
 );
 
 // src/components/Slider.tsx
 var RadixSlider = __toESM(require("@radix-ui/react-slider"));
-var import_react58 = __toESM(require("react"));
+var import_react59 = __toESM(require("react"));
 var Slider = function Slider2({
   id,
   value,
@@ -16191,17 +16293,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(
     RadixSlider.Root,
     {
       min,
@@ -16211,65 +16313,67 @@ var Slider = function Slider2({
       onValueChange: handleValueChange,
       className: "flex-1 flex relative items-center select-none touch-none h-4"
     },
-    /* @__PURE__ */ import_react58.default.createElement(RadixSlider.Track, { className: "bg-divider relative flex-grow h-[2px]" }, /* @__PURE__ */ import_react58.default.createElement(RadixSlider.Range, { className: "absolute bg-primary rounded-full h-full" })),
-    /* @__PURE__ */ import_react58.default.createElement(RadixSlider.Thumb, { className: "block w-3 h-3 bg-slider-background border border-solid border-slider-border rounded-[20px] focus:outline-none" })
+    /* @__PURE__ */ import_react59.default.createElement(RadixSlider.Track, { className: "bg-divider relative flex-grow h-[2px]" }, /* @__PURE__ */ import_react59.default.createElement(RadixSlider.Range, { className: "absolute bg-primary rounded-full h-full" })),
+    /* @__PURE__ */ import_react59.default.createElement(RadixSlider.Thumb, { className: "block w-3 h-3 bg-slider-background border border-solid border-slider-border rounded-[20px] focus:outline-none" })
   );
 };
 
 // src/components/Switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var import_react59 = __toESM(require("react"));
+var import_react60 = __toESM(require("react"));
 var Switch = function Switch2({
+  id,
   value,
   onChange,
   colorScheme = "normal",
   disabled
 }) {
-  return /* @__PURE__ */ import_react59.default.createElement(
+  return /* @__PURE__ */ import_react60.default.createElement(
     SwitchPrimitive.Root,
     {
+      id,
       checked: value,
       disabled,
       onCheckedChange: (newValue) => {
         onChange(newValue);
       },
-      className: `all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:outline-primary focus:ring-offset-[1px] data-[state=checked]:bg-primary ${colorScheme === "secondary" && "data-[state=checked]:bg-secondary"}`
+      className: `all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary ${colorScheme === "secondary" && "data-[state=checked]:bg-secondary"}`
     },
-    /* @__PURE__ */ import_react59.default.createElement(SwitchPrimitive.Thumb, { className: "block w-[15px] h-[15px] bg-white rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" })
+    /* @__PURE__ */ import_react60.default.createElement(SwitchPrimitive.Thumb, { className: "block w-[15px] h-[15px] bg-white rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" })
   );
 };
 
 // src/components/TextArea.tsx
-var import_react60 = __toESM(require("react"));
+var import_react61 = __toESM(require("react"));
 var useAutoResize = (value) => {
-  const textareaRef = (0, import_react60.useRef)(null);
-  (0, import_react60.useEffect)(() => {
+  const textareaRef = (0, import_react61.useRef)(null);
+  (0, import_react61.useEffect)(() => {
     if (!textareaRef.current) return;
     textareaRef.current.style.height = "auto";
     textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
   }, [value]);
   return textareaRef;
 };
-var AutoResizingTextArea = (0, import_react60.memo)(
-  (0, import_react60.forwardRef)(function AutoResizingTextArea2({
+var AutoResizingTextArea = (0, import_react61.memo)(
+  (0, import_react61.forwardRef)(function AutoResizingTextArea2({
     value,
     onChangeText,
     className,
     ...rest
   }, forwardedRef) {
     const ref = useAutoResize(value || rest.placeholder || "");
-    const handleChange = (0, import_react60.useCallback)(
+    const handleChange = (0, import_react61.useCallback)(
       (event) => onChangeText(event.target.value),
       [onChangeText]
     );
-    const handleRef = (0, import_react60.useCallback)(
+    const handleRef = (0, import_react61.useCallback)(
       (value2) => {
         ref.current = value2;
         assignRef(forwardedRef, value2);
       },
       [ref, forwardedRef]
     );
-    return /* @__PURE__ */ import_react60.default.createElement(
+    return /* @__PURE__ */ import_react61.default.createElement(
       "textarea",
       {
         className: `font-sans text-heading5 font-normal text-text bg-input-background w-0 flex-1 py-1 px-1.5 border-none outline-none h-[100px] rounded-4 resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary focus:z-10 read-only:text-text-disabled ${className ?? ""}`,
@@ -16283,57 +16387,57 @@ var AutoResizingTextArea = (0, import_react60.memo)(
 );
 
 // src/components/TreeView.tsx
-var import_react61 = __toESM(require("react"));
-var TreeRow = (0, import_react61.forwardRef)(function TreeRow2({
+var import_react62 = __toESM(require("react"));
+var TreeRow = (0, import_react62.forwardRef)(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
   children: children2,
   ...rest
 }, forwardedRef) {
-  const { expandable } = (0, import_react61.useContext)(ListView.RowContext);
-  const handleClickChevron = (0, import_react61.useCallback)(
+  const { expandable } = (0, import_react62.useContext)(ListView.RowContext);
+  const handleClickChevron = (0, import_react62.useCallback)(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ import_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(
+  return /* @__PURE__ */ import_react62.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react62.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react62.default.createElement(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react61.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react61.default.createElement(import_react61.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react61.default.createElement(Spacer.Horizontal, { size: 10 })), children2);
+  ), /* @__PURE__ */ import_react62.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react62.default.createElement(Spacer.Horizontal, { size: 10 })), children2);
 });
 var TreeView;
 ((TreeView2) => {
   TreeView2.Root = ListView.Root;
   TreeView2.RowTitle = ListView.RowTitle;
   TreeView2.EditableRowTitle = ListView.EditableRowTitle;
-  TreeView2.Row = (0, import_react61.memo)(TreeRow);
+  TreeView2.Row = (0, import_react62.memo)(TreeRow);
 })(TreeView || (TreeView = {}));
 
 // src/components/WorkspaceLayout.tsx
 var import_noya_keymap5 = require("@noya-app/noya-keymap");
-var import_react64 = __toESM(require("react"));
+var import_react65 = __toESM(require("react"));
 var import_react_resizable_panels = require("react-resizable-panels");
 
 // src/hooks/usePreservePanelSize.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 
 // src/hooks/useWindowSize.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 function useWindowSize() {
-  const [size3, setSize] = (0, import_react62.useState)(
+  const [size3, setSize] = (0, import_react63.useState)(
     typeof window === "undefined" ? { width: 0, height: 0 } : {
       width: window.innerWidth,
       height: window.innerHeight
     }
   );
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     const handleResize = () => setSize({
       width: window.innerWidth,
       height: window.innerHeight
@@ -16351,8 +16455,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_react63.useRef)();
-  (0, import_react63.useLayoutEffect)(() => {
+  const layoutRef = (0, import_react64.useRef)();
+  (0, import_react64.useLayoutEffect)(() => {
     const panelGroup = document.querySelector(
       `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
     );
@@ -16395,7 +16499,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
       panelGroupObserver.disconnect();
     };
   }, [panelGroupRef, setPanelLayoutState]);
-  (0, import_react63.useLayoutEffect)(() => {
+  (0, import_react64.useLayoutEffect)(() => {
     if (!layoutRef.current) return;
     const {
       windowWidth: oldWindowWidth,
@@ -16454,7 +16558,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/WorkspaceLayout.tsx
-var WorkspaceLayoutWithTheme = (0, import_react64.forwardRef)(function WorkspaceLayoutWithTheme2({
+var WorkspaceLayoutWithTheme = (0, import_react65.forwardRef)(function WorkspaceLayoutWithTheme2({
   autoSavePrefix,
   leftSidebarContent: leftPanelContent,
   children: centerPanelContent,
@@ -16479,11 +16583,11 @@ var WorkspaceLayoutWithTheme = (0, import_react64.forwardRef)(function Workspace
   const rightSidebarPercentage = getPercentage(rightSidebarInitialSize);
   const leftSidebarMinPercentage = leftSidebarMinSize !== void 0 ? getPercentage(leftSidebarMinSize) : void 0;
   const rightSidebarMinPercentage = rightSidebarMinSize !== void 0 ? getPercentage(rightSidebarMinSize) : void 0;
-  const panelGroupRef = (0, import_react64.useRef)(null);
-  const leftSidebarRef = (0, import_react64.useRef)(null);
-  const rightSidebarRef = (0, import_react64.useRef)(null);
-  const [internalLayoutState, setInternalLayoutState] = (0, import_react64.useState)(null);
-  const handleChangeLayoutState = (0, import_react64.useCallback)(
+  const panelGroupRef = (0, import_react65.useRef)(null);
+  const leftSidebarRef = (0, import_react65.useRef)(null);
+  const rightSidebarRef = (0, import_react65.useRef)(null);
+  const [internalLayoutState, setInternalLayoutState] = (0, import_react65.useState)(null);
+  const handleChangeLayoutState = (0, import_react65.useCallback)(
     (state) => {
       setInternalLayoutState(state);
       onChangeLayoutState?.(state);
@@ -16491,7 +16595,7 @@ var WorkspaceLayoutWithTheme = (0, import_react64.forwardRef)(function Workspace
     [onChangeLayoutState]
   );
   usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
-  (0, import_react64.useImperativeHandle)(forwardedRef, () => ({
+  (0, import_react65.useImperativeHandle)(forwardedRef, () => ({
     setLeftSidebarExpanded: (expanded) => {
       if (expanded) {
         leftSidebarRef.current?.expand();
@@ -16548,7 +16652,7 @@ var WorkspaceLayoutWithTheme = (0, import_react64.forwardRef)(function Workspace
     }
   });
   const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
-  return /* @__PURE__ */ import_react64.default.createElement(
+  return /* @__PURE__ */ import_react65.default.createElement(
     "div",
     {
       id,
@@ -16560,7 +16664,7 @@ var WorkspaceLayoutWithTheme = (0, import_react64.forwardRef)(function Workspace
         ...style5
       }
     },
-    /* @__PURE__ */ import_react64.default.createElement(
+    /* @__PURE__ */ import_react65.default.createElement(
       import_react_resizable_panels.PanelGroup,
       {
         ref: panelGroupRef,
@@ -16569,7 +16673,7 @@ var WorkspaceLayoutWithTheme = (0, import_react64.forwardRef)(function Workspace
         autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
         style: { flex: "1" }
       },
-      hasLeftSidebar && /* @__PURE__ */ import_react64.default.createElement(import_react64.default.Fragment, null, /* @__PURE__ */ import_react64.default.createElement(
+      hasLeftSidebar && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: LEFT_SIDEBAR_ID,
@@ -16586,7 +16690,7 @@ var WorkspaceLayoutWithTheme = (0, import_react64.forwardRef)(function Workspace
           }
         },
         internalLayoutState?.leftSidebarCollapsed ? null : leftPanelContent
-      ), /* @__PURE__ */ import_react64.default.createElement(
+      ), /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.PanelResizeHandle,
         {
           style: {
@@ -16597,7 +16701,7 @@ var WorkspaceLayoutWithTheme = (0, import_react64.forwardRef)(function Workspace
           }
         }
       )),
-      /* @__PURE__ */ import_react64.default.createElement(
+      /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: CONTENT_AREA_ID,
@@ -16612,7 +16716,7 @@ var WorkspaceLayoutWithTheme = (0, import_react64.forwardRef)(function Workspace
         },
         centerPanelContent
       ),
-      hasRightSidebar && /* @__PURE__ */ import_react64.default.createElement(import_react64.default.Fragment, null, /* @__PURE__ */ import_react64.default.createElement(
+      hasRightSidebar && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.PanelResizeHandle,
         {
           style: {
@@ -16622,7 +16726,7 @@ var WorkspaceLayoutWithTheme = (0, import_react64.forwardRef)(function Workspace
             backgroundColor: "var(--divider)"
           }
         }
-      ), /* @__PURE__ */ import_react64.default.createElement(
+      ), /* @__PURE__ */ import_react65.default.createElement(
         import_react_resizable_panels.Panel,
         {
           id: RIGHT_SIDEBAR_ID,
@@ -16642,8 +16746,8 @@ var WorkspaceLayoutWithTheme = (0, import_react64.forwardRef)(function Workspace
     )
   );
 });
-var WorkspaceLayout = (0, import_react64.forwardRef)(function WorkspaceLayout2(props, forwardedRef) {
-  return /* @__PURE__ */ import_react64.default.createElement(WorkspaceLayoutWithTheme, { ...props, ref: forwardedRef });
+var WorkspaceLayout = (0, import_react65.forwardRef)(function WorkspaceLayout2(props, forwardedRef) {
+  return /* @__PURE__ */ import_react65.default.createElement(WorkspaceLayoutWithTheme, { ...props, ref: forwardedRef });
 });
 
 // src/hooks/usePlatform.ts
@@ -16688,10 +16792,10 @@ function createSectionedMenu(...sections) {
 }
 
 // src/hooks/useDarkMode.ts
-var import_react65 = require("react");
+var import_react66 = require("react");
 function useDarkMode(elementRef) {
-  const [isDark, setIsDark] = (0, import_react65.useState)(false);
-  (0, import_react65.useEffect)(() => {
+  const [isDark, setIsDark] = (0, import_react66.useState)(false);
+  (0, import_react66.useEffect)(() => {
     if (!elementRef.current) return;
     const hasDarkTheme = elementRef.current.closest('[data-theme="dark"]') !== null;
     setIsDark(hasDarkTheme);
@@ -16714,11 +16818,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 var import_noya_utils10 = 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,
@@ -16728,15 +16832,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: size3 }, /* @__PURE__ */ import_react66.default.createElement(
+  return /* @__PURE__ */ import_react67.default.createElement(InputField.Root, { id, width: size3 }, /* @__PURE__ */ import_react67.default.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : (0, import_noya_utils10.round)(value, 2),
@@ -16745,13 +16849,13 @@ 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));
 });
 
 // src/components/InspectorPrimitives.tsx
 var InspectorPrimitives_exports = {};
 __export(InspectorPrimitives_exports, {
-  Checkbox: () => Checkbox,
+  Checkbox: () => Checkbox3,
   Column: () => Column2,
   HorizontalSeparator: () => HorizontalSeparator,
   LabeledRow: () => LabeledRow,
@@ -16763,8 +16867,8 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-var import_react67 = __toESM(require("react"));
-var Section2 = (0, import_react67.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react67.default.createElement(
+var import_react68 = __toESM(require("react"));
+var Section2 = (0, import_react68.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react68.default.createElement(
   "div",
   {
     ref,
@@ -16772,8 +16876,8 @@ var Section2 = (0, import_react67.forwardRef)(({ className, ...props }, ref) =>
     ...props
   }
 ));
-var SectionHeader = (0, import_react67.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react67.default.createElement("div", { ref, className: cn("flex items-center", className), ...props }));
-var Title3 = (0, import_react67.forwardRef)(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ import_react67.default.createElement(
+var SectionHeader = (0, import_react68.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react68.default.createElement("div", { ref, className: cn("flex items-center", className), ...props }));
+var Title3 = (0, import_react68.forwardRef)(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ import_react68.default.createElement(
   "div",
   {
     ref,
@@ -16781,7 +16885,7 @@ var Title3 = (0, import_react67.forwardRef)(({ className, $textStyle, ...props }
     ...props
   }
 ));
-var Row = (0, import_react67.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react67.default.createElement(
+var Row = (0, import_react68.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react68.default.createElement(
   "div",
   {
     ref,
@@ -16789,7 +16893,7 @@ var Row = (0, import_react67.forwardRef)(({ className, ...props }, ref) => /* @_
     ...props
   }
 ));
-var Column2 = (0, import_react67.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react67.default.createElement(
+var Column2 = (0, import_react68.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react68.default.createElement(
   "div",
   {
     ref,
@@ -16797,7 +16901,7 @@ var Column2 = (0, import_react67.forwardRef)(({ className, ...props }, ref) => /
     ...props
   }
 ));
-var Checkbox = (0, import_react67.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react67.default.createElement(
+var Checkbox3 = (0, import_react68.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react68.default.createElement(
   "input",
   {
     ref,
@@ -16806,7 +16910,7 @@ var Checkbox = (0, import_react67.forwardRef)(({ className, ...props }, ref) =>
     ...props
   }
 ));
-var Text3 = (0, import_react67.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react67.default.createElement(
+var Text3 = (0, import_react68.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ import_react68.default.createElement(
   "span",
   {
     ref,
@@ -16814,10 +16918,10 @@ var Text3 = (0, import_react67.forwardRef)(({ className, ...props }, ref) => /*
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ import_react67.default.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
-var RowLabel = (0, import_react67.forwardRef)(function RowLabel2({ className, $textStyle, ...props }, ref) {
-  return /* @__PURE__ */ import_react67.default.createElement(
+var VerticalSeparator = () => /* @__PURE__ */ import_react68.default.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ import_react68.default.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var RowLabel = (0, import_react68.forwardRef)(function RowLabel2({ className, $textStyle, ...props }, ref) {
+  return /* @__PURE__ */ import_react68.default.createElement(
     "span",
     {
       ref,
@@ -16826,7 +16930,7 @@ var RowLabel = (0, import_react67.forwardRef)(function RowLabel2({ className, $t
     }
   );
 });
-var LabeledRow = (0, import_react67.memo)(function LabeledRow2({
+var LabeledRow = (0, import_react68.memo)(function LabeledRow2({
   id,
   children: children2,
   label,
@@ -16834,7 +16938,7 @@ var LabeledRow = (0, import_react67.memo)(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ import_react67.default.createElement(Row, { id, className: className ?? "" }, /* @__PURE__ */ import_react67.default.createElement(Column2, null, /* @__PURE__ */ import_react67.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react67.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react67.default.createElement(Row, null, children2)));
+  return /* @__PURE__ */ import_react68.default.createElement(Row, { id, className: className ?? "" }, /* @__PURE__ */ import_react68.default.createElement(Column2, null, /* @__PURE__ */ import_react68.default.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ import_react68.default.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ import_react68.default.createElement(Row, null, children2)));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -16845,6 +16949,7 @@ var LabeledRow = (0, import_react67.memo)(function LabeledRow2({
   Body,
   Button,
   CONTENT_AREA_ID,
+  Checkbox,
   Chip,
   CompletionMenu,
   ContextMenu,