@noya-app/noya-designsystem 0.1.57 → 0.1.59

package/dist/index.mjs

@@ -218,8 +218,11 @@ import { useEffect as useEffect2, useState as useState5 } from "react";
 // ../noya-react-utils/src/hooks/useIsMounted.ts
 import { useEffect as useEffect3, useRef as useRef4 } from "react";
 
+// ../noya-react-utils/src/hooks/useIsomorphicLayoutEffect.ts
+import * as React5 from "react";
+
 // ../noya-react-utils/src/hooks/useLateReference.ts
-import { useCallback as useCallback5, useLayoutEffect, useRef as useRef5 } from "react";
+import { useCallback as useCallback5, useLayoutEffect as useLayoutEffect2, useRef as useRef5 } from "react";
 
 // ../noya-react-utils/src/hooks/useLazyValue.ts
 import { useRef as useRef6 } from "react";
@@ -253,7 +256,7 @@ import { useCallback as useCallback7, useMemo as useMemo2, useState as useState6
 // ../noya-react-utils/src/hooks/usePersistentState.ts
 import {
   useCallback as useCallback8,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useMemo as useMemo3,
   useState as useState7
 } from "react";
@@ -264,7 +267,7 @@ function usePersistentStateString(storage, storageKey, defaultValue2) {
   const [state, setState] = useState7(
     () => getCurrentValue(storage, storageKey, defaultValue2)
   );
-  useEffect4(() => {
+  useEffect5(() => {
     const newValue = getCurrentValue(storage, storageKey, defaultValue2);
     setState(newValue);
   }, [defaultValue2, storage, storageKey]);
@@ -276,7 +279,7 @@ function usePersistentStateString(storage, storageKey, defaultValue2) {
     },
     [defaultValue2, storage, storageKey]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     const dispose = storage.addListener(storageKey, (newValue) => {
       setState(newValue);
     });
@@ -286,21 +289,33 @@ function usePersistentStateString(storage, storageKey, defaultValue2) {
 }
 
 // ../noya-react-utils/src/hooks/usePixelRatio.ts
-import { useEffect as useEffect5, useState as useState8 } from "react";
+import { useEffect as useEffect6, useState as useState8 } from "react";
 
 // ../noya-react-utils/src/hooks/useShallowArray.ts
 import { isShallowEqual } from "@noya-app/noya-utils";
 import { useRef as useRef7 } from "react";
 
 // ../noya-react-utils/src/hooks/useStableCallback.ts
-import { useCallback as useCallback9, useLayoutEffect as useLayoutEffect2, useRef as useRef8 } from "react";
+import { useCallback as useCallback9, useLayoutEffect as useLayoutEffect3, useRef as useRef8 } from "react";
+var noop2 = () => {
+};
+function useStableCallback(callback) {
+  const callbackRef = useRef8(callback || noop2);
+  useLayoutEffect3(() => {
+    callbackRef.current = callback || noop2;
+  }, [callback]);
+  return useCallback9(
+    (...args) => callbackRef.current(...args),
+    [callbackRef]
+  );
+}
 
 // ../noya-react-utils/src/hooks/useSystemColorScheme.ts
-import { useEffect as useEffect6, useState as useState9 } from "react";
+import { useEffect as useEffect7, useState as useState9 } from "react";
 
 // ../noya-react-utils/src/hooks/useUrlHashParameters.ts
 import { decodeQueryParameters } from "@noya-app/noya-utils";
-import { useEffect as useEffect7, useState as useState10 } from "react";
+import { useEffect as useEffect8, useState as useState10 } from "react";
 
 // ../emitter/src/index.ts
 var Emitter = class {
@@ -381,7 +396,7 @@ var ClientStorage = class {
 var clientStorage = new ClientStorage();
 
 // src/components/ActionMenu.tsx
-import React27, { useMemo as useMemo12 } from "react";
+import React28, { useMemo as useMemo12 } from "react";
 
 // src/theme/index.ts
 import tailwindConfig from "@noya-app/noya-tailwind-config";
@@ -422,21 +437,21 @@ var INPUT_HEIGHT = 27;
 // src/components/DropdownMenu.tsx
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
-import React26, {
+import React27, {
   useMemo as useMemo11
 } from "react";
 
 // src/contexts/PortalScopeContext.tsx
-import * as React5 from "react";
-var PortalScopeContext = React5.createContext(void 0);
-var PortalScopeProvider = React5.memo(function PortalScopeProvider2({
+import * as React6 from "react";
+var PortalScopeContext = React6.createContext(void 0);
+var PortalScopeProvider = React6.memo(function PortalScopeProvider2({
   children,
   portalScopeId
 }) {
-  return /* @__PURE__ */ React5.createElement(PortalScopeContext.Provider, { value: portalScopeId }, children);
+  return /* @__PURE__ */ React6.createElement(PortalScopeContext.Provider, { value: portalScopeId }, children);
 });
 function usePortalScopeId() {
-  return React5.useContext(PortalScopeContext) ?? "";
+  return React6.useContext(PortalScopeContext) ?? "";
 }
 var portalScopeDataSetName = "noyaPortalScope";
 var portalScopePropName = `data-noya-portal-scope`;
@@ -458,21 +473,21 @@ function getClosestPortalScope(element) {
 
 // src/components/internal/Menu.tsx
 import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
-import React23, { memo as memo10 } from "react";
+import React24, { memo as memo10 } from "react";
 
 // src/contexts/DesignSystemConfiguration.tsx
 import { getCurrentPlatform } from "@noya-app/noya-keymap";
-import * as React22 from "react";
+import * as React23 from "react";
 
 // src/components/Toast.tsx
 import * as ToastPrimitive from "@radix-ui/react-toast";
-import React12 from "react";
+import React13 from "react";
 
 // src/components/IconButton.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 
 // src/components/Button.tsx
-import React10, {
+import React11, {
   forwardRef as forwardRef4,
   useCallback as useCallback10,
   useMemo as useMemo4
@@ -543,20 +558,20 @@ function mergeConflictingClassNames(classNames, options) {
 
 // src/components/Icons.tsx
 import * as Icons from "@noya-app/noya-icons";
-import * as React6 from "react";
+import * as React7 from "react";
 function renderIcon(iconName) {
   if (typeof iconName === "string") {
     const Icon = Icons[iconName];
-    return /* @__PURE__ */ React6.createElement(Icon, null);
+    return /* @__PURE__ */ React7.createElement(Icon, null);
   }
   return iconName;
 }
 
 // src/components/Spacer.tsx
-import * as React7 from "react";
-var SpacerVertical = React7.forwardRef(
+import * as React8 from "react";
+var SpacerVertical = React8.forwardRef(
   ({ size: size2, inline, ...props }, ref) => {
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React8.createElement(
       "span",
       {
         className: `${inline ? "inline-block" : "block"} ${size2 === void 0 ? "flex flex-1" : ""}`,
@@ -569,9 +584,9 @@ var SpacerVertical = React7.forwardRef(
     );
   }
 );
-var SpacerHorizontal = React7.forwardRef(
+var SpacerHorizontal = React8.forwardRef(
   ({ size: size2, inline, ...props }, ref) => {
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React8.createElement(
       "span",
       {
         className: `${inline ? "inline-block" : "block"} ${size2 === void 0 ? "flex flex-1" : ""}`,
@@ -592,10 +607,10 @@ var Spacer;
 
 // src/components/Tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React9 from "react";
+import * as React10 from "react";
 
 // src/components/Text.tsx
-import React8, { forwardRef as forwardRef3 } from "react";
+import React9, { forwardRef as forwardRef3 } from "react";
 var elements = {
   title: "h1",
   subtitle: "h1",
@@ -638,7 +653,7 @@ var Text = forwardRef3(function Text2({
   ...rest
 }, forwardedRef) {
   const Component = as ?? elements[variant] ?? "span";
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     Component,
     {
       ref: forwardedRef,
@@ -657,27 +672,27 @@ var Text = forwardRef3(function Text2({
   );
 });
 var Heading1 = forwardRef3(
-  (props, ref) => /* @__PURE__ */ React8.createElement(Text, { ref, ...props, variant: "heading1" })
+  (props, ref) => /* @__PURE__ */ React9.createElement(Text, { ref, ...props, variant: "heading1" })
 );
 var Heading2 = forwardRef3(
-  (props, ref) => /* @__PURE__ */ React8.createElement(Text, { ref, ...props, variant: "heading2" })
+  (props, ref) => /* @__PURE__ */ React9.createElement(Text, { ref, ...props, variant: "heading2" })
 );
 var Heading3 = forwardRef3(
-  (props, ref) => /* @__PURE__ */ React8.createElement(Text, { ref, ...props, variant: "heading3" })
+  (props, ref) => /* @__PURE__ */ React9.createElement(Text, { ref, ...props, variant: "heading3" })
 );
 var Heading4 = forwardRef3(
-  (props, ref) => /* @__PURE__ */ React8.createElement(Text, { ref, ...props, variant: "heading4" })
+  (props, ref) => /* @__PURE__ */ React9.createElement(Text, { ref, ...props, variant: "heading4" })
 );
 var Heading5 = forwardRef3(
-  (props, ref) => /* @__PURE__ */ React8.createElement(Text, { ref, ...props, variant: "heading5" })
+  (props, ref) => /* @__PURE__ */ React9.createElement(Text, { ref, ...props, variant: "heading5" })
 );
 var Body = forwardRef3(
-  (props, ref) => /* @__PURE__ */ React8.createElement(Text, { ref, ...props, variant: "body" })
+  (props, ref) => /* @__PURE__ */ React9.createElement(Text, { ref, ...props, variant: "body" })
 );
 var Small = forwardRef3(
-  (props, ref) => /* @__PURE__ */ React8.createElement(Text, { ref, ...props, variant: "small" })
+  (props, ref) => /* @__PURE__ */ React9.createElement(Text, { ref, ...props, variant: "small" })
 );
-var Italic = ({ children }) => /* @__PURE__ */ React8.createElement(
+var Italic = ({ children }) => /* @__PURE__ */ React9.createElement(
   "span",
   {
     style: {
@@ -688,13 +703,13 @@ var Italic = ({ children }) => /* @__PURE__ */ React8.createElement(
 );
 
 // src/components/Tooltip.tsx
-var Tooltip = React9.memo(function Tooltip2({
+var Tooltip = React10.memo(function Tooltip2({
   children,
   content,
   sideOffset = 2
 }) {
   const portalScopeId = usePortalScopeId();
-  return /* @__PURE__ */ React9.createElement(TooltipPrimitive.Provider, null, /* @__PURE__ */ React9.createElement(TooltipPrimitive.Root, null, /* @__PURE__ */ React9.createElement(TooltipPrimitive.Trigger, { asChild: true }, children), /* @__PURE__ */ React9.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(TooltipPrimitive.Provider, null, /* @__PURE__ */ React10.createElement(TooltipPrimitive.Root, null, /* @__PURE__ */ React10.createElement(TooltipPrimitive.Trigger, { asChild: true }, children), /* @__PURE__ */ React10.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React10.createElement(
     TooltipPrimitive.Content,
     {
       ...portalScopeProps(portalScopeId),
@@ -756,7 +771,7 @@ var Button = forwardRef4(function Button2({
       categories: ["position"]
     }) : baseClassName;
   }, [className, baseClassName]);
-  const buttonElement = /* @__PURE__ */ React10.createElement(
+  const buttonElement = /* @__PURE__ */ React11.createElement(
     Component,
     {
       ref: forwardedRef,
@@ -771,35 +786,35 @@ var Button = forwardRef4(function Button2({
       }, []),
       ...rest
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement(
       "span",
       {
         className: "min-h-[19px] flex items-center flex-1 justify-center leading-[15px]",
         style: contentStyle
       },
       icon && renderIcon(icon),
-      icon && children && /* @__PURE__ */ React10.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
+      icon && children && /* @__PURE__ */ React11.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
       children,
-      iconRight && (icon || children) && /* @__PURE__ */ React10.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
+      iconRight && (icon || children) && /* @__PURE__ */ React11.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
       iconRight && renderIcon(iconRight)
     )
   );
-  return tooltip ? /* @__PURE__ */ React10.createElement(Tooltip, { content: tooltip }, buttonElement) : buttonElement;
+  return tooltip ? /* @__PURE__ */ React11.createElement(Tooltip, { content: tooltip }, buttonElement) : buttonElement;
 });
 var Button_default = Button;
 
 // src/components/IconButton.tsx
-var IconButton = React11.memo(
-  React11.forwardRef(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
+var IconButton = React12.memo(
+  React12.forwardRef(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
     const Icon = Icons[iconName];
-    const style2 = React11.useMemo(() => {
+    const style2 = React12.useMemo(() => {
       return {
         padding: "0 2px",
         ...size2 && { minHeight: size2 },
         ...contentStyle
       };
     }, [contentStyle, size2]);
-    return /* @__PURE__ */ React11.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style2 }, /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React12.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style2 }, /* @__PURE__ */ React12.createElement(
       Icon,
       {
         color: color ?? (selected ? cssVars.colors.iconSelected : cssVars.colors.icon),
@@ -816,34 +831,34 @@ var Toast = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.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-popover text-text-muted",
       ...props
     },
-    title && /* @__PURE__ */ React12.createElement(
+    title && /* @__PURE__ */ React13.createElement(
       ToastPrimitive.Title,
       {
         className: `mb-[5px] ${textStyles.label} font-bold text-text`
       },
       title
     ),
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(
       ToastPrimitive.Description,
       {
         className: `${textStyles.small} text-text-muted`
       },
       content
     ),
-    children && /* @__PURE__ */ React12.createElement(ToastPrimitive.Action, { asChild: true, altText: "" }, children),
-    /* @__PURE__ */ React12.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ React12.createElement(IconButton, { iconName: "Cross1Icon" }))
+    children && /* @__PURE__ */ React13.createElement(ToastPrimitive.Action, { asChild: true, altText: "" }, children),
+    /* @__PURE__ */ React13.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ React13.createElement(IconButton, { iconName: "Cross1Icon" }))
   );
 };
-var ToastProvider = ({ children }) => /* @__PURE__ */ React12.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ React12.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 }) => /* @__PURE__ */ React13.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ React13.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
-import React20, {
+import React21, {
   createContext as createContext5,
   useCallback as useCallback13,
   useContext as useContext5,
@@ -854,12 +869,12 @@ import React20, {
 
 // src/components/Dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React13, {
+import React14, {
   forwardRef as forwardRef6,
   useImperativeHandle,
   useRef as useRef9
 } from "react";
-var StyledOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+var StyledOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ React14.createElement(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -868,7 +883,7 @@ var StyledOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 var StyledContent = forwardRef6(({ className, children, ...props }, ref) => {
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     DialogPrimitive.Content,
     {
       ref,
@@ -887,7 +902,7 @@ var StyledContent = forwardRef6(({ className, children, ...props }, ref) => {
     children
   );
 });
-var StyledTitle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+var StyledTitle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ React14.createElement(
   DialogPrimitive.Title,
   {
     ref,
@@ -898,7 +913,7 @@ var StyledTitle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */
     ...props
   }
 ));
-var StyledDescription = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+var StyledDescription = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ React14.createElement(
   DialogPrimitive.Description,
   {
     ref,
@@ -928,7 +943,7 @@ var Dialog = forwardRef6(function Dialog2({
       return contentRef.current.contains(element);
     }
   }));
-  return /* @__PURE__ */ React13.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React13.createElement(StyledOverlay, null), /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React14.createElement(StyledOverlay, null), /* @__PURE__ */ React14.createElement(
     StyledContent,
     {
       ref: contentRef,
@@ -940,7 +955,7 @@ var Dialog = forwardRef6(function Dialog2({
         onInteractOutside: (event) => event.preventDefault()
       }
     },
-    showCloseButton && /* @__PURE__ */ React13.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ React13.createElement(
+    showCloseButton && /* @__PURE__ */ React14.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ React14.createElement(
       IconButton,
       {
         iconName: "Cross1Icon",
@@ -952,13 +967,13 @@ var Dialog = forwardRef6(function Dialog2({
         }
       }
     )),
-    title && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(StyledTitle, null, title), /* @__PURE__ */ React13.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
-    description && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(StyledDescription, null, description), /* @__PURE__ */ React13.createElement(Spacer.Vertical, { size: 20 })),
+    title && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(StyledTitle, null, title), /* @__PURE__ */ React14.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
+    description && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(StyledDescription, null, description), /* @__PURE__ */ React14.createElement(Spacer.Vertical, { size: 20 })),
     children
   ));
 });
 var FullscreenDialog = forwardRef6(function FullscreenDialog2({ style: style2, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     Dialog,
     {
       ref: forwardedRef,
@@ -971,7 +986,7 @@ var FullscreenDialog = forwardRef6(function FullscreenDialog2({ style: style2, .
 
 // src/components/InputField.tsx
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
-import React19, {
+import React20, {
   createContext as createContext4,
   forwardRef as forwardRef9,
   memo as memo8,
@@ -983,30 +998,30 @@ import React19, {
 } from "react";
 
 // src/hooks/useLabel.ts
-import React14 from "react";
-var LabelContext = React14.createContext({
+import React15 from "react";
+var LabelContext = React15.createContext({
   fieldId: "",
   label: void 0
 });
 var useLabel = ({ label, fieldId }) => {
-  const { label: labelFromContext, fieldId: fieldIdFromContext } = React14.useContext(LabelContext);
+  const { label: labelFromContext, fieldId: fieldIdFromContext } = React15.useContext(LabelContext);
   return {
     label: label ?? labelFromContext,
     fieldId: fieldId ?? fieldIdFromContext
   };
 };
-var LabelPositionContext = React14.createContext({
+var LabelPositionContext = React15.createContext({
   position: "start"
 });
 var useLabelPosition = () => {
-  const { position } = React14.useContext(LabelPositionContext);
+  const { position } = React15.useContext(LabelPositionContext);
   return position;
 };
-var LabelWidthContext = React14.createContext({
+var LabelWidthContext = React15.createContext({
   width: 100
 });
 var useLabelWidth = () => {
-  const { width } = React14.useContext(LabelWidthContext);
+  const { width } = React15.useContext(LabelWidthContext);
   return width;
 };
 
@@ -1046,17 +1061,17 @@ var startBaseStyles = "absolute left-1.5 inset-y-0 flex items-center";
 
 // src/components/internal/TextInput.tsx
 import { composeRefs } from "@radix-ui/react-compose-refs";
-import React15, {
+import React16, {
   forwardRef as forwardRef7,
   useCallback as useCallback11,
-  useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect3,
+  useEffect as useEffect10,
+  useLayoutEffect as useLayoutEffect4,
   useRef as useRef10,
   useState as useState11
 } from "react";
 
 // src/contexts/GlobalInputBlurContext.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect8 } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect9 } from "react";
 var defaultValue = /* @__PURE__ */ (() => {
   const listeners = [];
   const value = {
@@ -1083,7 +1098,7 @@ var useGlobalInputBlur = () => {
 };
 function useGlobalInputBlurListener(f) {
   const context = useGlobalInputBlur();
-  useEffect8(() => {
+  useEffect9(() => {
     context.addListener(f);
     return () => {
       context.removeListener(f);
@@ -1096,7 +1111,7 @@ function useGlobalInputBlurTrigger() {
 
 // src/components/internal/TextInput.tsx
 var ReadOnlyTextInput = forwardRef7(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -1139,7 +1154,7 @@ var ControlledTextInput = forwardRef7(function ControlledTextInput2({
     },
     [onFocus, onFocusChange]
   );
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -1168,13 +1183,13 @@ var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
   submitOnBlur = true,
   ...rest
 }, forwardedRef) {
-  const ref = React15.useRef(null);
+  const ref = React16.useRef(null);
   const latestValue = useRef10(value);
   latestValue.current = value;
   const userDidEdit = useRef10(false);
   const isSubmitTriggeredByEscapeKey = useRef10(false);
   const [internalValue, setInternalValue] = useState11("");
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     setInternalValue(value);
   }, [value]);
   const handleSubmit = useCallback11(() => {
@@ -1235,7 +1250,7 @@ var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
   );
   const latestHandleSubmit = useRef10(handleSubmit);
   latestHandleSubmit.current = handleSubmit;
-  useEffect9(() => {
+  useEffect10(() => {
     if (submitAutomaticallyAfterDelay) {
       if (autoSubmitTimeoutRef.current) {
         clearTimeout(autoSubmitTimeoutRef.current);
@@ -1251,7 +1266,7 @@ var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
       }
     };
   }, [internalValue, submitAutomaticallyAfterDelay]);
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "input",
     {
       ref: composeRefs(ref, forwardedRef),
@@ -1283,21 +1298,21 @@ var TextInput_default = forwardRef7(function TextInput(props, forwardedRef) {
     ...props
   };
   if ("readOnly" in commonProps) {
-    return /* @__PURE__ */ React15.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
+    return /* @__PURE__ */ React16.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
   } else if ("onChange" in commonProps) {
-    return /* @__PURE__ */ React15.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ React16.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
   } else {
-    return /* @__PURE__ */ React15.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ React16.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
   }
 });
 
 // src/components/Label.tsx
-import React16, { forwardRef as forwardRef8, memo as memo6 } from "react";
+import React17, { forwardRef as forwardRef8, memo as memo6 } from "react";
 var labelStyles = "flex items-center select-none z-label relative";
 var labelTextStyles = "font-sans text-label uppercase leading-3 font-bold text-text-muted";
 var Label = memo6(
   forwardRef8(function Label2({ className, children, ...props }, ref) {
-    return /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React17.createElement(
       "label",
       {
         ref,
@@ -1321,28 +1336,28 @@ var Label = memo6(
 
 // src/components/Popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import React18, { useEffect as useEffect10, useId, useRef as useRef11 } from "react";
+import React19, { useEffect as useEffect11, useId, useRef as useRef11 } from "react";
 
 // src/contexts/OpenPortalsContext.tsx
-import * as React17 from "react";
-var OpenPortalsContext = React17.createContext({
+import * as React18 from "react";
+var OpenPortalsContext = React18.createContext({
   hasOpenPortals: false
 });
-var OpenPortalControlsContext = React17.createContext({
+var OpenPortalControlsContext = React18.createContext({
   addOpenPortal: () => {
   },
   removeOpenPortal: () => {
   }
 });
-var OpenPortalsProvider = React17.memo(function OpenPortalsProvider2({
+var OpenPortalsProvider = React18.memo(function OpenPortalsProvider2({
   children
 }) {
-  const [openPortals, setOpenPortals] = React17.useState([]);
-  const value = React17.useMemo(
+  const [openPortals, setOpenPortals] = React18.useState([]);
+  const value = React18.useMemo(
     () => ({ hasOpenPortals: openPortals.length > 0 }),
     [openPortals]
   );
-  const controlsValue = React17.useMemo(
+  const controlsValue = React18.useMemo(
     () => ({
       addOpenPortal: (portal) => {
         setOpenPortals((prev) => [...prev, portal]);
@@ -1353,13 +1368,13 @@ var OpenPortalsProvider = React17.memo(function OpenPortalsProvider2({
     }),
     []
   );
-  return /* @__PURE__ */ React17.createElement(OpenPortalsContext.Provider, { value }, /* @__PURE__ */ React17.createElement(OpenPortalControlsContext.Provider, { value: controlsValue }, children));
+  return /* @__PURE__ */ React18.createElement(OpenPortalsContext.Provider, { value }, /* @__PURE__ */ React18.createElement(OpenPortalControlsContext.Provider, { value: controlsValue }, children));
 });
 function useHasOpenPortals() {
-  return React17.useContext(OpenPortalsContext).hasOpenPortals;
+  return React18.useContext(OpenPortalsContext).hasOpenPortals;
 }
 function useOpenPortalsControls() {
-  return React17.useContext(OpenPortalControlsContext);
+  return React18.useContext(OpenPortalControlsContext);
 }
 
 // src/components/Popover.tsx
@@ -1400,14 +1415,14 @@ function Popover({
     defaultValue: false
   });
   const { addOpenPortal, removeOpenPortal } = useOpenPortalsControls();
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isOpen) return;
     addOpenPortal(portalScopeId || defaultId);
     return () => {
       removeOpenPortal(portalScopeId || defaultId);
     };
   }, [addOpenPortal, isOpen, portalScopeId, removeOpenPortal, defaultId]);
-  return /* @__PURE__ */ React18.createElement(PopoverPrimitive.Root, { open: isOpen, onOpenChange: setIsOpen }, /* @__PURE__ */ React18.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ React18.createElement(PopoverPrimitive.Portal, { container: portalContainer }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(PopoverPrimitive.Root, { open: isOpen, onOpenChange: setIsOpen }, /* @__PURE__ */ React19.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ React19.createElement(PopoverPrimitive.Portal, { container: portalContainer }, /* @__PURE__ */ React19.createElement(
     PopoverPrimitive.Content,
     {
       ...portalScopeProps(portalScopeId),
@@ -1438,14 +1453,14 @@ function Popover({
       arrowPadding: 2
     },
     children,
-    showArrow && /* @__PURE__ */ React18.createElement(PopoverPrimitive.Arrow, { className: "fill-popover-background" }),
-    closable && /* @__PURE__ */ React18.createElement(
+    showArrow && /* @__PURE__ */ React19.createElement(PopoverPrimitive.Arrow, { className: "fill-popover-background" }),
+    closable && /* @__PURE__ */ React19.createElement(
       PopoverPrimitive.Close,
       {
         className: "rounded-full h-[25px] w-[25px] inline-flex items-center justify-center absolute top-[5px] right-[5px]",
         style: closeStyles
       },
-      /* @__PURE__ */ React18.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose })
+      /* @__PURE__ */ React19.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose })
     )
   )));
 }
@@ -1475,7 +1490,7 @@ var InputFieldContext = createContext4({
   endRef: null
 });
 var useInputFieldContext = () => useContext4(InputFieldContext);
-var noop2 = () => {
+var noop3 = () => {
 };
 var getFieldSpacing = ({
   endWidth = 0,
@@ -1486,7 +1501,7 @@ var getFieldSpacing = ({
   paddingRight: `${variant === "bare" ? endWidth : endWidth ? endWidth + 12 : 6}px`
 });
 var InputFieldDropdownMenu = memoGeneric(function InputFieldDropdownMenu2({ id, items, onSelect, children }) {
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     DropdownMenu,
     {
       items,
@@ -1494,7 +1509,7 @@ var InputFieldDropdownMenu = memoGeneric(function InputFieldDropdownMenu2({ id,
       align: "end",
       sideOffset: 8
     },
-    children || /* @__PURE__ */ React19.createElement(InputFieldButton, { variant: "floating", id }, /* @__PURE__ */ React19.createElement(DropdownChevronIcon, null))
+    children || /* @__PURE__ */ React20.createElement(InputFieldButton, { variant: "floating", id }, /* @__PURE__ */ React20.createElement(DropdownChevronIcon, null))
   );
 });
 var InputFieldButton = memo8(
@@ -1537,7 +1552,7 @@ var InputFieldButton = memo8(
       }),
       [style2, variant]
     );
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(
       Button,
       {
         as,
@@ -1594,7 +1609,7 @@ var InputElement = forwardRef9(
       [inputClassName]
     );
     if (as === "span") {
-      return /* @__PURE__ */ React19.createElement(
+      return /* @__PURE__ */ React20.createElement(
         "span",
         {
           ref,
@@ -1605,7 +1620,7 @@ var InputElement = forwardRef9(
         children
       );
     }
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(
       TextInput_default,
       {
         ref,
@@ -1629,7 +1644,7 @@ var InputFieldInput = forwardRef9(function InputFieldInput2({ textAlign, variant
     },
     [onFocusChange]
   );
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     InputElement,
     {
       ref,
@@ -1641,7 +1656,7 @@ var InputFieldInput = forwardRef9(function InputFieldInput2({ textAlign, variant
   );
 });
 var InputFieldTypeahead = (props) => {
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     InputElement,
     {
       as: "span",
@@ -1659,8 +1674,8 @@ var InputFieldTypeahead = (props) => {
         []
       )
     },
-    /* @__PURE__ */ React19.createElement("span", { style: { opacity: 0 } }, props.prefix),
-    props.isFocused && /* @__PURE__ */ React19.createElement("span", { style: { opacity: 0.5 } }, props.value.slice(props.prefix.length))
+    /* @__PURE__ */ React20.createElement("span", { style: { opacity: 0 } }, props.prefix),
+    props.isFocused && /* @__PURE__ */ React20.createElement("span", { style: { opacity: 0.5 } }, props.value.slice(props.prefix.length))
   );
 };
 function parseNumber(value) {
@@ -1716,7 +1731,7 @@ function InputFieldNumberInput(props) {
     },
     [onBlur]
   );
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     InputFieldInput,
     {
       ...rest,
@@ -1725,11 +1740,11 @@ function InputFieldNumberInput(props) {
       onKeyDown: !readOnly ? handleKeyDown : void 0,
       onBlur: handleBlur,
       ...readOnly ? { readOnly: true } : {},
-      ..."onChange" in props ? { onChange: readOnly ? noop2 : handleChange } : { onSubmit: readOnly ? noop2 : handleSubmit }
+      ..."onChange" in props ? { onChange: readOnly ? noop3 : handleChange } : { onSubmit: readOnly ? noop3 : handleSubmit }
     }
   );
 }
-var RootContainer = forwardRef9(({ $width, className, ...props }, ref) => /* @__PURE__ */ React19.createElement(
+var RootContainer = forwardRef9(({ $width, className, ...props }, ref) => /* @__PURE__ */ React20.createElement(
   "div",
   {
     ref,
@@ -1760,10 +1775,10 @@ function InputFieldRoot({
   label: labelProp
 }) {
   const randomId = useId2();
-  const [isFocused, setIsFocused] = React19.useState(false);
-  const startRef = React19.useRef(null);
-  const inputRef = React19.useRef(null);
-  const endRef = React19.useRef(null);
+  const [isFocused, setIsFocused] = React20.useState(false);
+  const startRef = React20.useRef(null);
+  const inputRef = React20.useRef(null);
+  const endRef = React20.useRef(null);
   const measuredInputSize = useSize(inputRef, "width");
   const measuredStartSize = useSize(startRef, "width");
   const measuredEndSize = useSize(endRef, "width");
@@ -1794,10 +1809,10 @@ function InputFieldRoot({
     [startWidth, endWidth, size2, isFocused, handleFocusChange, id, randomId]
   );
   const insetLabel = useMemo7(
-    () => /* @__PURE__ */ React19.createElement(Label, { htmlFor: id, className: "!text-text-disabled" }, labelProp ?? label),
+    () => /* @__PURE__ */ React20.createElement(Label, { htmlFor: id, className: "!text-text-disabled" }, labelProp ?? label),
     [id, labelProp, label]
   );
-  const rootElement = /* @__PURE__ */ React19.createElement(RootContainer, { $width: width, style: style2, className }, children, start && /* @__PURE__ */ React19.createElement("span", { ref: startRef, className: cx(startBaseStyles, startClassName) }, start), (end || label) && /* @__PURE__ */ React19.createElement(
+  const rootElement = /* @__PURE__ */ React20.createElement(RootContainer, { $width: width, style: style2, className }, children, start && /* @__PURE__ */ React20.createElement("span", { ref: startRef, className: cx(startBaseStyles, startClassName) }, start), (end || label) && /* @__PURE__ */ React20.createElement(
     "span",
     {
       ref: endRef,
@@ -1810,7 +1825,7 @@ function InputFieldRoot({
     () => measuredInputSize ? { width: measuredInputSize.width + 4 } : void 0,
     [measuredInputSize]
   );
-  return /* @__PURE__ */ React19.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React20.createElement(
     Popover,
     {
       open: true,
@@ -1826,7 +1841,7 @@ function InputFieldRoot({
         event.stopPropagation();
       }
     },
-    measuredWidthObject && /* @__PURE__ */ React19.createElement(
+    measuredWidthObject && /* @__PURE__ */ React20.createElement(
       "div",
       {
         className: "flex flex-col overflow-hidden",
@@ -1851,7 +1866,7 @@ var PrimitiveInputField = ({
     () => ({ ...spacingStyles, ...style2 }),
     [spacingStyles, style2]
   );
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     "input",
     {
       style: memoizedStyles,
@@ -1892,7 +1907,7 @@ var InputFieldComponent = forwardRef9(
       className,
       ...inputProps
     } = props;
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(
       InputFieldSubcomponents.Root,
       {
         width,
@@ -1908,7 +1923,7 @@ var InputFieldComponent = forwardRef9(
         style: style2,
         className
       },
-      /* @__PURE__ */ React19.createElement(InputFieldSubcomponents.Input, { ref, ...inputProps }),
+      /* @__PURE__ */ React20.createElement(InputFieldSubcomponents.Input, { ref, ...inputProps }),
       children
     );
   }
@@ -2029,7 +2044,7 @@ var DialogProvider = function DialogProvider2({
     if (!dialogRef.current) return false;
     return dialogRef.current.containsElement(element);
   }, []);
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
     DialogContext.Provider,
     {
       value: useMemo8(
@@ -2043,7 +2058,7 @@ var DialogProvider = function DialogProvider2({
       )
     },
     children
-  ), /* @__PURE__ */ React20.createElement(
+  ), /* @__PURE__ */ React21.createElement(
     Dialog,
     {
       ref: dialogRef,
@@ -2074,7 +2089,7 @@ var DialogProvider = function DialogProvider2({
         [contents]
       )
     },
-    contents?.type === "confirmation" ? /* @__PURE__ */ React20.createElement("div", { className: "flex flex-1 flex-row items-center" }, /* @__PURE__ */ React20.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React20.createElement(
+    contents?.type === "confirmation" ? /* @__PURE__ */ React21.createElement("div", { className: "flex flex-1 flex-row items-center" }, /* @__PURE__ */ React21.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React21.createElement(
       Button,
       {
         onClick: () => {
@@ -2083,7 +2098,7 @@ var DialogProvider = function DialogProvider2({
         }
       },
       contents.cancelButtonLabel ?? "Cancel"
-    ), /* @__PURE__ */ React20.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React20.createElement(
+    ), /* @__PURE__ */ React21.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React21.createElement(
       Button,
       {
         onClick: () => {
@@ -2092,7 +2107,7 @@ var DialogProvider = function DialogProvider2({
         }
       },
       contents.confirmButtonLabel ?? "OK"
-    )) : contents?.type === "custom" ? /* @__PURE__ */ React20.createElement(React20.Fragment, null, contents.children) : /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(InputField2.Root, null, /* @__PURE__ */ React20.createElement(
+    )) : contents?.type === "custom" ? /* @__PURE__ */ React21.createElement(React21.Fragment, null, contents.children) : /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(InputField2.Root, null, /* @__PURE__ */ React21.createElement(
       InputField2.Input,
       {
         ref: inputRef,
@@ -2108,7 +2123,7 @@ var DialogProvider = function DialogProvider2({
         },
         onKeyDown: handleKeyDown
       }
-    )), /* @__PURE__ */ React20.createElement(Spacer.Vertical, { size: 20 }), /* @__PURE__ */ React20.createElement("div", { className: "flex flex-1 flex-row items-center" }, /* @__PURE__ */ React20.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React20.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ React20.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React20.createElement(
+    )), /* @__PURE__ */ React21.createElement(Spacer.Vertical, { size: 20 }), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-1 flex-row items-center" }, /* @__PURE__ */ React21.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React21.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ React21.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React21.createElement(
       Button,
       {
         disabled: !contents || contents.type !== "input" || !contents.inputValue,
@@ -2140,7 +2155,7 @@ function useOpenDialog() {
 
 // src/contexts/FloatingWindowContext.tsx
 import { uuid } from "@noya-app/noya-utils";
-import React21, { createContext as createContext6, useContext as useContext6, useMemo as useMemo9, useState as useState15 } from "react";
+import React22, { createContext as createContext6, useContext as useContext6, useMemo as useMemo9, useState as useState15 } from "react";
 import { createPortal } from "react-dom";
 var FloatingWindowContext = createContext6(void 0);
 var CurrentWindowContext = createContext6(void 0);
@@ -2153,7 +2168,7 @@ var FloatingWindowProvider = ({
       const id = uuid();
       setWindows((windows2) => ({
         ...windows2,
-        [id]: /* @__PURE__ */ React21.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
+        [id]: /* @__PURE__ */ React22.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
       }));
       return id;
     };
@@ -2165,7 +2180,7 @@ var FloatingWindowProvider = ({
     };
     return { createWindow, closeWindow };
   }, []);
-  return /* @__PURE__ */ React21.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
+  return /* @__PURE__ */ React22.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
     ([id, element]) => createPortal(element, document.body, id)
   ));
 };
@@ -2187,30 +2202,30 @@ var useCurrentFloatingWindowInternal = () => {
 };
 
 // src/contexts/DesignSystemConfiguration.tsx
-var DesignSystemConfigurationContext = React22.createContext({
+var DesignSystemConfigurationContext = React23.createContext({
   platform: "key"
 });
-var DesignSystemConfigurationProvider = React22.memo(
+var DesignSystemConfigurationProvider = React23.memo(
   function DesignSystemConfigurationProvider2({
     children,
     platform
   }) {
-    const [internalPlatform, setInternalPlatform] = React22.useState(platform ?? "key");
-    React22.useEffect(() => {
+    const [internalPlatform, setInternalPlatform] = React23.useState(platform ?? "key");
+    React23.useEffect(() => {
       if (platform !== void 0) return;
       if (typeof navigator !== "undefined") {
         setInternalPlatform(getCurrentPlatform(navigator));
       }
     }, [platform]);
-    const contextValue = React22.useMemo(
+    const contextValue = React23.useMemo(
       () => ({ platform: platform ?? internalPlatform }),
       [platform, internalPlatform]
     );
-    return /* @__PURE__ */ React22.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React22.createElement(OpenPortalsProvider, null, /* @__PURE__ */ React22.createElement(DialogProvider, null, /* @__PURE__ */ React22.createElement(ToastProvider, null, /* @__PURE__ */ React22.createElement(FloatingWindowProvider, null, children)))));
+    return /* @__PURE__ */ React23.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React23.createElement(OpenPortalsProvider, null, /* @__PURE__ */ React23.createElement(DialogProvider, null, /* @__PURE__ */ React23.createElement(ToastProvider, null, /* @__PURE__ */ React23.createElement(FloatingWindowProvider, null, children)))));
   }
 );
 function useDesignSystemConfiguration() {
-  return React22.useContext(DesignSystemConfigurationContext);
+  return React23.useContext(DesignSystemConfigurationContext);
 }
 
 // src/utils/withSeparatorElements.ts
@@ -2307,7 +2322,7 @@ function getKeyboardShortcutsForMenuItems(menuItems, onSelect) {
 var ShortcutElement = ({
   children,
   fixedWidth
-}) => /* @__PURE__ */ React23.createElement(
+}) => /* @__PURE__ */ React24.createElement(
   "kbd",
   {
     className: cx(
@@ -2323,7 +2338,7 @@ var KeyboardShortcut = memo10(function KeyboardShortcut2({
 }) {
   const platform = useDesignSystemConfiguration().platform;
   const { keys, separator: separator2 } = getShortcutDisplayParts(shortcut, platform);
-  const keyElements = keys.map((key) => /* @__PURE__ */ React23.createElement(
+  const keyElements = keys.map((key) => /* @__PURE__ */ React24.createElement(
     ShortcutElement,
     {
       key,
@@ -2331,9 +2346,9 @@ var KeyboardShortcut = memo10(function KeyboardShortcut2({
     },
     key
   ));
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, separator2 ? withSeparatorElements(
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, separator2 ? withSeparatorElements(
     keyElements,
-    /* @__PURE__ */ React23.createElement(ShortcutElement, null, separator2)
+    /* @__PURE__ */ React24.createElement(ShortcutElement, null, separator2)
   ) : keyElements);
 });
 var SectionHeader = memo10(function SectionHeader2({
@@ -2343,7 +2358,7 @@ var SectionHeader = memo10(function SectionHeader2({
   isFirst,
   indented
 }) {
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     "span",
     {
       id,
@@ -2358,7 +2373,7 @@ var SectionHeader = memo10(function SectionHeader2({
         }
       )
     },
-    indented && /* @__PURE__ */ React23.createElement(
+    indented && /* @__PURE__ */ React24.createElement(
       Spacer.Horizontal,
       {
         size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET + CHECKBOX_INDENT_WIDTH
@@ -2370,11 +2385,11 @@ var SectionHeader = memo10(function SectionHeader2({
 
 // src/components/internal/MenuViewport.tsx
 import { ChevronRightIcon } from "@noya-app/noya-icons";
-import React25 from "react";
+import React26 from "react";
 
 // src/components/internal/SelectItem.tsx
-import React24, { useCallback as useCallback14 } from "react";
-var SelectItem = React24.forwardRef(
+import React25, { useCallback as useCallback14 } from "react";
+var SelectItem = React25.forwardRef(
   ({
     children,
     icon,
@@ -2399,7 +2414,7 @@ var SelectItem = React24.forwardRef(
       []
     );
     if (checked && Components4.CheckboxItem) {
-      return /* @__PURE__ */ React24.createElement("div", { className: "px-1" }, /* @__PURE__ */ React24.createElement(
+      return /* @__PURE__ */ React25.createElement("div", { className: "px-1" }, /* @__PURE__ */ React25.createElement(
         Components4.CheckboxItem,
         {
           checked,
@@ -2411,14 +2426,14 @@ var SelectItem = React24.forwardRef(
             testSelected && styles.testSelectedItemStyle
           )
         },
-        /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }),
-        Components4.ItemIndicator && /* @__PURE__ */ React24.createElement(Components4.ItemIndicator, { ...styles.itemIndicator }, /* @__PURE__ */ React24.createElement(Checkmark, null)),
-        icon && /* @__PURE__ */ React24.createElement(React24.Fragment, null, renderIcon(icon), /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: 8 })),
+        /* @__PURE__ */ React25.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }),
+        Components4.ItemIndicator && /* @__PURE__ */ React25.createElement(Components4.ItemIndicator, { ...styles.itemIndicator }, /* @__PURE__ */ React25.createElement(Checkmark, null)),
+        icon && /* @__PURE__ */ React25.createElement(React25.Fragment, null, renderIcon(icon), /* @__PURE__ */ React25.createElement(Spacer.Horizontal, { size: 8 })),
         children,
-        shortcut && /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React24.createElement(KeyboardShortcut, { shortcut }))
+        shortcut && /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React25.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React25.createElement(KeyboardShortcut, { shortcut }))
       ));
     }
-    return /* @__PURE__ */ React24.createElement("div", { className: "px-1" }, /* @__PURE__ */ React24.createElement(
+    return /* @__PURE__ */ React25.createElement("div", { className: "px-1" }, /* @__PURE__ */ React25.createElement(
       Components4.Item,
       {
         className: cx(
@@ -2433,12 +2448,12 @@ var SelectItem = React24.forwardRef(
         onSelect: handleSelectItem,
         ...props
       },
-      /* @__PURE__ */ React24.createElement("div", { className: "flex flex-1 items-center" }, indented && /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), checked ? /* @__PURE__ */ React24.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React24.createElement(Checkmark, null)) : indented ? /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }) : null, icon && /* @__PURE__ */ React24.createElement(React24.Fragment, null, renderIcon(icon), /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React24.createElement(Components4.ItemText, null, children), shortcut && /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React24.createElement(KeyboardShortcut, { shortcut })))
+      /* @__PURE__ */ React25.createElement("div", { className: "flex flex-1 items-center" }, indented && /* @__PURE__ */ React25.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), checked ? /* @__PURE__ */ React25.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React25.createElement(Checkmark, null)) : indented ? /* @__PURE__ */ React25.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }) : null, icon && /* @__PURE__ */ React25.createElement(React25.Fragment, null, renderIcon(icon), /* @__PURE__ */ React25.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React25.createElement(Components4.ItemText, null, children), shortcut && /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React25.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React25.createElement(KeyboardShortcut, { shortcut })))
     ));
   }
 );
 function Checkmark() {
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(
     "svg",
     {
       viewBox: "0 0 15 15",
@@ -2448,7 +2463,7 @@ function Checkmark() {
       width: 15,
       height: 15
     },
-    /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React25.createElement(
       "path",
       {
         className: "scale-90 origin-center",
@@ -2472,10 +2487,10 @@ var MenuViewport = ({
   const hasCheckedItem = items.some(
     (item) => item.type !== "separator" && item.type !== "sectionHeader" && item.checked
   );
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, items.map((item, index) => {
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, items.map((item, index) => {
     switch (item.type) {
       case "separator":
-        return /* @__PURE__ */ React25.createElement(
+        return /* @__PURE__ */ React26.createElement(
           Components4.Separator,
           {
             key: index,
@@ -2483,7 +2498,7 @@ var MenuViewport = ({
           }
         );
       case "sectionHeader":
-        return /* @__PURE__ */ React25.createElement(
+        return /* @__PURE__ */ React26.createElement(
           SectionHeader,
           {
             isFirst: index === 0,
@@ -2494,7 +2509,7 @@ var MenuViewport = ({
         );
       case "submenu":
         if (item.items && Components4.Sub && Components4.SubTrigger && Components4.SubContent && Components4.Portal) {
-          return /* @__PURE__ */ React25.createElement(Components4.Sub, { key: item.id }, /* @__PURE__ */ React25.createElement(
+          return /* @__PURE__ */ React26.createElement(Components4.Sub, { key: item.id }, /* @__PURE__ */ React26.createElement(
             Components4.SubTrigger,
             {
               className: cx(
@@ -2508,7 +2523,7 @@ var MenuViewport = ({
               },
               disabled: item.disabled
             },
-            /* @__PURE__ */ React25.createElement(
+            /* @__PURE__ */ React26.createElement(
               SelectItem,
               {
                 value: item.id,
@@ -2519,17 +2534,17 @@ var MenuViewport = ({
                 indented: hasCheckedItem,
                 disabled: item.disabled
               },
-              /* @__PURE__ */ React25.createElement("div", { className: "flex items-center flex-1" }, item.title),
-              /* @__PURE__ */ React25.createElement(ChevronRightIcon, { className: "-mr-1" })
+              /* @__PURE__ */ React26.createElement("div", { className: "flex items-center flex-1" }, item.title),
+              /* @__PURE__ */ React26.createElement(ChevronRightIcon, { className: "-mr-1" })
             )
-          ), /* @__PURE__ */ React25.createElement(Components4.Portal, null, /* @__PURE__ */ React25.createElement(
+          ), /* @__PURE__ */ React26.createElement(Components4.Portal, null, /* @__PURE__ */ React26.createElement(
             Components4.SubContent,
             {
               ...portalScopeProps(portalScopeId),
               alignOffset: -5,
               className: styles.contentStyle
             },
-            /* @__PURE__ */ React25.createElement(
+            /* @__PURE__ */ React26.createElement(
               MenuViewport,
               {
                 items: item.items,
@@ -2540,7 +2555,7 @@ var MenuViewport = ({
           )));
         } else return null;
       default:
-        return /* @__PURE__ */ React25.createElement(
+        return /* @__PURE__ */ React26.createElement(
           SelectItem,
           {
             key: item.value,
@@ -2563,7 +2578,7 @@ var MenuViewport = ({
 // src/components/DropdownMenu.tsx
 var Components = {
   Separator: RadixDropdownMenu.Separator,
-  ItemText: React26.Fragment,
+  ItemText: React27.Fragment,
   Item: RadixDropdownMenu.Item,
   CheckboxItem: RadixDropdownMenu.CheckboxItem,
   ItemIndicator: RadixDropdownMenu.ItemIndicator,
@@ -2603,14 +2618,14 @@ var DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot2(props, forwa
     }),
     [contentStyle]
   );
-  return /* @__PURE__ */ React26.createElement(RadixDropdownMenu.Root, { onOpenChange, open }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(RadixDropdownMenu.Root, { onOpenChange, open }, /* @__PURE__ */ React27.createElement(
     RadixDropdownMenu.Trigger,
     {
       ref: forwardedRef,
       asChild: true
     },
     children
-  ), /* @__PURE__ */ React26.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React27.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React27.createElement(
     RadixDropdownMenu.Content,
     {
       ...portalScopeProps(portalScopeId),
@@ -2624,7 +2639,7 @@ var DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot2(props, forwa
       ...{ onCloseAutoFocus }
     },
     items.length === 0 ? emptyState : null,
-    /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React27.createElement(
       MenuViewport,
       {
         items,
@@ -2655,14 +2670,14 @@ var ActionMenu = memoGeneric(function ActionMenu2({
       ...style2
     };
   }, [selected, style2, variant]);
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(
     DropdownMenu,
     {
       items: menuItems,
       onSelect,
       onOpenChange
     },
-    /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React28.createElement(
       IconButton,
       {
         style: internalStyle,
@@ -2676,16 +2691,16 @@ var ActionMenu = memoGeneric(function ActionMenu2({
 });
 
 // src/components/ActivityIndicator.tsx
-import * as React28 from "react";
-var ActivityIndicator = React28.memo(function ActivityIndicator2({
+import * as React29 from "react";
+var ActivityIndicator = React29.memo(function ActivityIndicator2({
   size: size2 = 16,
   opacity = 1,
   color = "black",
   trackColor = "rgba(0, 0, 0, 0.1)",
   className
 }) {
-  const opacityStyle = React28.useMemo(() => ({ opacity }), [opacity]);
-  const dynamicStyles = React28.useMemo(
+  const opacityStyle = React29.useMemo(() => ({ opacity }), [opacity]);
+  const dynamicStyles = React29.useMemo(
     () => ({
       border: `2px solid ${trackColor}`,
       borderTopColor: color,
@@ -2694,19 +2709,19 @@ var ActivityIndicator = React28.memo(function ActivityIndicator2({
     }),
     [size2, color, trackColor]
   );
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "div",
     {
       className: cx("flex justify-center items-center", className),
       style: opacityStyle
     },
-    /* @__PURE__ */ React28.createElement("div", { style: dynamicStyles, className: "animate-spin rounded-[50%]" })
+    /* @__PURE__ */ React29.createElement("div", { style: dynamicStyles, className: "animate-spin rounded-[50%]" })
   );
 });
 
 // src/components/Avatar.tsx
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import React29, { forwardRef as forwardRef10, useMemo as useMemo14 } from "react";
+import React30, { forwardRef as forwardRef10, useMemo as useMemo14 } from "react";
 
 // src/utils/colorFromString.ts
 var colorForStringValues = {
@@ -2775,7 +2790,7 @@ var getInnerAvatarStyles = (size2, variant) => {
     minHeight: dimension
   };
 };
-var AvatarRoot = React29.forwardRef(
+var AvatarRoot = React30.forwardRef(
   ({
     className,
     size: size2 = 21,
@@ -2794,7 +2809,7 @@ var AvatarRoot = React29.forwardRef(
       }),
       [backgroundColor, size2, style2]
     );
-    return /* @__PURE__ */ React29.createElement(
+    return /* @__PURE__ */ React30.createElement(
       AvatarPrimitive.Root,
       {
         ref,
@@ -2809,8 +2824,8 @@ var AvatarRoot = React29.forwardRef(
     );
   }
 );
-var AvatarImage = React29.forwardRef(({ className, size: size2 = 21, variant = "normal", ...props }, ref) => {
-  return /* @__PURE__ */ React29.createElement(
+var AvatarImage = React30.forwardRef(({ className, size: size2 = 21, variant = "normal", ...props }, ref) => {
+  return /* @__PURE__ */ React30.createElement(
     AvatarPrimitive.Image,
     {
       ref,
@@ -2826,9 +2841,9 @@ var AvatarImage = React29.forwardRef(({ className, size: size2 = 21, variant = "
 function getMonogram(text) {
   return text?.at(0)?.toLocaleUpperCase();
 }
-var AvatarFallback = React29.forwardRef(
+var AvatarFallback = React30.forwardRef(
   ({ className, children, style: style2, size: size2 = 21, backgroundColor, ...props }, ref) => {
-    return /* @__PURE__ */ React29.createElement(
+    return /* @__PURE__ */ React30.createElement(
       AvatarPrimitive.Fallback,
       {
         ref,
@@ -2849,7 +2864,7 @@ var AvatarFallback = React29.forwardRef(
     );
   }
 );
-var Avatar = React29.memo(
+var Avatar = React30.memo(
   forwardRef10(function Avatar2({
     image,
     name,
@@ -2862,7 +2877,7 @@ var Avatar = React29.memo(
     ...props
   }, forwardedRef) {
     const getBackgroundColor = backgroundColor ?? colorFromString(userId ?? name ?? "");
-    return /* @__PURE__ */ React29.createElement(
+    return /* @__PURE__ */ React30.createElement(
       AvatarRoot,
       {
         ref: forwardedRef,
@@ -2872,7 +2887,7 @@ var Avatar = React29.memo(
         className,
         ...props
       },
-      image ? /* @__PURE__ */ React29.createElement(AvatarImage, { src: image, alt: name, size: size2, variant }) : /* @__PURE__ */ React29.createElement(
+      image ? /* @__PURE__ */ React30.createElement(AvatarImage, { src: image, alt: name, size: size2, variant }) : /* @__PURE__ */ React30.createElement(
         AvatarFallback,
         {
           backgroundColor: getBackgroundColor,
@@ -2884,31 +2899,31 @@ var Avatar = React29.memo(
     );
   })
 );
-var OverflowAvatar = React29.memo(function OverflowAvatar2({
+var OverflowAvatar = React30.memo(function OverflowAvatar2({
   size: size2 = 21,
   count
 }) {
-  return /* @__PURE__ */ React29.createElement(AvatarRoot, { size: size2, backgroundColor: "var(--n-text-disabled)", disabled: true }, /* @__PURE__ */ React29.createElement(AvatarFallback, { backgroundColor: "var(--n-text-disabled)", size: size2 }, "+", count));
+  return /* @__PURE__ */ React30.createElement(AvatarRoot, { size: size2, backgroundColor: "var(--n-text-disabled)", disabled: true }, /* @__PURE__ */ React30.createElement(AvatarFallback, { backgroundColor: "var(--n-text-disabled)", size: size2 }, "+", count));
 });
-var AvatarStack = React29.memo(function AvatarStack2({
+var AvatarStack = React30.memo(function AvatarStack2({
   size: size2 = 21,
   children,
   max = 3,
   className
 }) {
-  const avatarCount = React29.Children.count(children);
+  const avatarCount = React30.Children.count(children);
   const overflowCount = avatarCount - max;
   const childrenArray = useMemo14(() => {
-    const processedChildren = React29.Children.toArray(children).map((child) => React29.cloneElement(child, { size: size2 })).slice(0, max);
+    const processedChildren = React30.Children.toArray(children).map((child) => React30.cloneElement(child, { size: size2 })).slice(0, max);
     if (avatarCount > max) {
       return [
-        /* @__PURE__ */ React29.createElement(OverflowAvatar, { key: "overflow", size: size2, count: overflowCount }),
+        /* @__PURE__ */ React30.createElement(OverflowAvatar, { key: "overflow", size: size2, count: overflowCount }),
         ...processedChildren
       ];
     }
     return processedChildren;
   }, [children, max, size2, avatarCount, overflowCount]);
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     "div",
     {
       className: cx(
@@ -2918,7 +2933,7 @@ var AvatarStack = React29.memo(function AvatarStack2({
       )
     },
     childrenArray.map((child, index) => {
-      return /* @__PURE__ */ React29.createElement(
+      return /* @__PURE__ */ React30.createElement(
         "div",
         {
           className: cx("relative", size2 > 36 ? "-ml-3" : "-ml-1.5"),
@@ -2931,10 +2946,10 @@ var AvatarStack = React29.memo(function AvatarStack2({
 });
 
 // src/components/NoyaLogo.tsx
-import React30, { forwardRef as forwardRef11 } from "react";
+import React31, { forwardRef as forwardRef11 } from "react";
 var Logo = forwardRef11(function Logo2(props, ref) {
   const fill = props.fill || cssVars.colors.logoFill;
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(
     "svg",
     {
       ref,
@@ -2944,14 +2959,14 @@ var Logo = forwardRef11(function Logo2(props, ref) {
       ...props,
       className: "w-6 aspect-[24/26]"
     },
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       "path",
       {
         d: "M6.5 3H2V12H5V6H6.5C7.32843 6 8 6.67157 8 7.5V12H11V7.5C11 5.01472 8.98528 3 6.5 3Z",
         fill
       }
     ),
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -2960,14 +2975,14 @@ var Logo = forwardRef11(function Logo2(props, ref) {
         fill
       }
     ),
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       "path",
       {
         d: "M5 14H2V18.5C2 20.9853 4.01472 23 6.5 23H8V26H11V17H8V20H6.5C5.67157 20 5 19.3284 5 18.5V14Z",
         fill
       }
     ),
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -2980,19 +2995,19 @@ var Logo = forwardRef11(function Logo2(props, ref) {
 });
 
 // src/components/ai-assistant/AIAssistantLayout.tsx
-import React32, { forwardRef as forwardRef13 } from "react";
+import React33, { forwardRef as forwardRef13 } from "react";
 
 // src/components/TextArea.tsx
-import React31, {
+import React32, {
   forwardRef as forwardRef12,
   memo as memo12,
   useCallback as useCallback15,
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useRef as useRef13
 } from "react";
 var useAutoResize = (value) => {
   const textareaRef = useRef13(null);
-  useEffect12(() => {
+  useEffect13(() => {
     if (value === void 0) return;
     if (!textareaRef.current) return;
     textareaRef.current.style.height = "auto";
@@ -3029,7 +3044,7 @@ var TextArea = memo12(
       },
       [autoResize, autoResizeRef, forwardedRef]
     );
-    return /* @__PURE__ */ React31.createElement(
+    return /* @__PURE__ */ React32.createElement(
       "textarea",
       {
         className: cx(
@@ -3054,31 +3069,31 @@ var TextAreaRow = memo12(
     endClassName,
     ...rest
   }, forwardedRef) {
-    return /* @__PURE__ */ React31.createElement(
+    return /* @__PURE__ */ React32.createElement(
       "div",
       {
         ref: forwardedRef,
         className: cx("relative w-full h-full", className)
       },
-      /* @__PURE__ */ React31.createElement(TextArea, { className: textAreaClassName, ...rest, ref: textAreaRef }),
-      /* @__PURE__ */ React31.createElement("div", { className: cx("absolute right-1 top-4", endClassName) }, end)
+      /* @__PURE__ */ React32.createElement(TextArea, { className: textAreaClassName, ...rest, ref: textAreaRef }),
+      /* @__PURE__ */ React32.createElement("div", { className: cx("absolute right-1 top-4", endClassName) }, end)
     );
   })
 );
 
 // src/components/ai-assistant/AIAssistantLayout.tsx
 var AIAssistantLoadingIndicator = () => {
-  return /* @__PURE__ */ React32.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React33.createElement(
     Avatar,
     {
       name: "Assistant",
       size: INPUT_HEIGHT,
       backgroundColor: cssVars.colors.primaryPastel
     },
-    /* @__PURE__ */ React32.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
-  ), /* @__PURE__ */ React32.createElement("div", { className: "animate-pulse" }, "\u258B"));
+    /* @__PURE__ */ React33.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
+  ), /* @__PURE__ */ React33.createElement("div", { className: "animate-pulse" }, "\u258B"));
 };
-var AIAssistantInput = forwardRef13(({ value, onChange, onSubmitClick, onKeyDown, disabled }, ref) => /* @__PURE__ */ React32.createElement(
+var AIAssistantInput = forwardRef13(({ value, onChange, onSubmitClick, onKeyDown, disabled }, ref) => /* @__PURE__ */ React33.createElement(
   TextAreaRow,
   {
     autoResize: true,
@@ -3090,7 +3105,7 @@ var AIAssistantInput = forwardRef13(({ value, onChange, onSubmitClick, onKeyDown
     placeholder: "Tell me what you'd like to do...",
     onKeyDown,
     disabled,
-    end: /* @__PURE__ */ React32.createElement(
+    end: /* @__PURE__ */ React33.createElement(
       IconButton,
       {
         iconName: "ArrowUpIcon",
@@ -3115,18 +3130,18 @@ var AIAssistantLayout = forwardRef13(
     className,
     style: style2
   }, ref) => {
-    return /* @__PURE__ */ React32.createElement("div", { className: cx("flex flex-col flex-1", className), style: style2 }, /* @__PURE__ */ React32.createElement("div", { className: "flex-1 min-h-0 overflow-auto", ref }, /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col gap-2 pb-4 pt-1" }, renderMessages(), isLoading ? renderLoadingIndicator?.() : null)), /* @__PURE__ */ React32.createElement("div", { className: "border-t border-divider pt-1 px-1" }, renderInput()));
+    return /* @__PURE__ */ React33.createElement("div", { className: cx("flex flex-col flex-1", className), style: style2 }, /* @__PURE__ */ React33.createElement("div", { className: "flex-1 min-h-0 overflow-auto", ref }, /* @__PURE__ */ React33.createElement("div", { className: "flex flex-col gap-2 pb-4 pt-1" }, renderMessages(), isLoading ? renderLoadingIndicator?.() : null)), /* @__PURE__ */ React33.createElement("div", { className: "border-t border-divider pt-1 px-1" }, renderInput()));
   }
 );
 
 // src/components/AnimatePresence.tsx
 import { isDeepEqual as isDeepEqual3 } from "@noya-app/noya-utils";
-import React33, {
+import React34, {
   Children as Children2,
   isValidElement as isValidElement2,
   useCallback as useCallback16,
-  useEffect as useEffect13,
-  useLayoutEffect as useLayoutEffect4,
+  useEffect as useEffect14,
+  useLayoutEffect as useLayoutEffect5,
   useRef as useRef14,
   useState as useState17
 } from "react";
@@ -3166,7 +3181,7 @@ var PresenceChild = ({
     willChange: "opacity",
     backfaceVisibility: "hidden"
   };
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     let rafId;
     if (isPresent && animationState !== "entered") {
       if (isInitialMount.current && skipInitialAnimation) {
@@ -3201,7 +3216,7 @@ var PresenceChild = ({
   if (animationState === "exited" && !isPresent) {
     return null;
   }
-  return /* @__PURE__ */ React33.createElement("div", { style: mergedAnimationStyles[animationState], className }, children);
+  return /* @__PURE__ */ React34.createElement("div", { style: mergedAnimationStyles[animationState], className }, children);
 };
 var AnimatePresence = ({
   children,
@@ -3215,7 +3230,7 @@ var AnimatePresence = ({
   const previousChildrenRef = useRef14([]);
   const removingChildrenRef = useRef14(/* @__PURE__ */ new Set());
   const waitingToEnterRef = useRef14([]);
-  useEffect13(() => {
+  useEffect14(() => {
     const newChildren = Children2.toArray(children).filter(
       isValidElement2
     );
@@ -3276,7 +3291,7 @@ var AnimatePresence = ({
       return filtered;
     });
   }, []);
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, mountedChildren.map(({ child, isPresent, skipInitialAnimation: skipInitialAnimation2 }) => /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, mountedChildren.map(({ child, isPresent, skipInitialAnimation: skipInitialAnimation2 }) => /* @__PURE__ */ React34.createElement(
     PresenceChild,
     {
       key: child.key,
@@ -3292,13 +3307,13 @@ var AnimatePresence = ({
 };
 
 // src/components/Banner.tsx
-import React34 from "react";
+import React35 from "react";
 var bannerStyles = {
   backgroundColor: cssVars.colors.inputBackground,
   color: cssVars.colors.textDisabled
 };
 function Banner({ label = "No items", className, style: style2 }) {
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(
     "div",
     {
       className: cx(
@@ -3307,15 +3322,15 @@ function Banner({ label = "No items", className, style: style2 }) {
       ),
       style: { ...bannerStyles, ...style2 }
     },
-    /* @__PURE__ */ React34.createElement(Small, { color: "textDisabled" }, label)
+    /* @__PURE__ */ React35.createElement(Small, { color: "textDisabled" }, label)
   );
 }
 
 // src/components/Breadcrumbs.tsx
 import { forwardRef as forwardRef14 } from "react";
-import React35 from "react";
+import React36 from "react";
 var BreadcrumbText = forwardRef14(function BreadcrumbText2({ children, className, onClick, ...props }, ref) {
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(
     Text,
     {
       ...props,
@@ -3335,7 +3350,7 @@ var slashStyle = {
   margin: "0 3px"
 };
 var BreadcrumbSlash = () => {
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(
     "svg",
     {
       width: "7",
@@ -3346,7 +3361,7 @@ var BreadcrumbSlash = () => {
       opacity: 0.5,
       style: slashStyle
     },
-    /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React36.createElement(
       "path",
       {
         d: "M1 16L6 1",
@@ -3360,16 +3375,16 @@ var BreadcrumbSlash = () => {
 };
 
 // src/components/Checkbox.tsx
-import * as React36 from "react";
+import * as React37 from "react";
 var colorSchemeStyles = {
   normal: "text-text-subtle",
   primary: "text-primary",
   secondary: "text-secondary"
 };
-var Checkbox = React36.memo(
-  React36.forwardRef(function Checkbox2({ className, style: style2, colorScheme = "secondary", ...props }, ref) {
+var Checkbox = React37.memo(
+  React37.forwardRef(function Checkbox2({ className, style: style2, colorScheme = "secondary", ...props }, ref) {
     const { fieldId: id } = useLabel({ fieldId: props.id });
-    return /* @__PURE__ */ React36.createElement(
+    return /* @__PURE__ */ React37.createElement(
       "div",
       {
         className: cx(
@@ -3379,7 +3394,7 @@ var Checkbox = React36.memo(
         ),
         style: style2
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React37.createElement(
         "input",
         {
           ref,
@@ -3408,7 +3423,7 @@ var Checkbox = React36.memo(
           id
         }
       ),
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React37.createElement(
         "svg",
         {
           className: `
@@ -3428,7 +3443,7 @@ var Checkbox = React36.memo(
           xmlns: "http://www.w3.org/2000/svg",
           "aria-hidden": "true"
         },
-        /* @__PURE__ */ React36.createElement(
+        /* @__PURE__ */ React37.createElement(
           "path",
           {
             d: "M3 6L4.5 7.5L8 4",
@@ -3444,10 +3459,10 @@ var Checkbox = React36.memo(
 
 // src/components/Chip.tsx
 import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
-import React38, { forwardRef as forwardRef16, memo as memo14 } from "react";
+import React39, { forwardRef as forwardRef16, memo as memo14 } from "react";
 
 // src/hooks/useHover.ts
-import * as React37 from "react";
+import * as React38 from "react";
 var globalIgnoreEmulatedMouseEvents = false;
 var hoverCount = 0;
 function setGlobalIgnoreEmulatedMouseEvents() {
@@ -3477,13 +3492,13 @@ function setupGlobalTouchEvents() {
 }
 function useHover(props = {}) {
   const { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
-  const [isHovered, setHovered] = React37.useState(false);
-  const state = React37.useRef({
+  const [isHovered, setHovered] = React38.useState(false);
+  const state = React38.useRef({
     isHovered: false,
     ignoreEmulatedMouseEvents: false
   }).current;
-  React37.useEffect(setupGlobalTouchEvents, []);
-  const hoverProps = React37.useMemo(
+  React38.useEffect(setupGlobalTouchEvents, []);
+  const hoverProps = React38.useMemo(
     function getHoverProps() {
       function triggerHoverStart(event, pointerType) {
         if (isDisabled || pointerType === "touch" || state.isHovered) {
@@ -3629,7 +3644,7 @@ var Chip = memo14(
       className
     );
     const color = colorScheme === "primary" ? cssVars.colors.primary : colorScheme === "secondary" ? cssVars.colors.secondary : cssVars.colors.text;
-    return /* @__PURE__ */ React38.createElement(
+    return /* @__PURE__ */ React39.createElement(
       "span",
       {
         ref: forwardedRef,
@@ -3639,7 +3654,7 @@ var Chip = memo14(
         tabIndex,
         ...rest
       },
-      addable && /* @__PURE__ */ React38.createElement(
+      addable && /* @__PURE__ */ React39.createElement(
         PlusIcon,
         {
           className: cx(ICON_BASE_STYLES, ICON_SIZE_STYLES[size2].add),
@@ -3651,7 +3666,7 @@ var Chip = memo14(
         }
       ),
       children,
-      deletable && /* @__PURE__ */ React38.createElement(
+      deletable && /* @__PURE__ */ React39.createElement(
         Cross1Icon,
         {
           className: cx(ICON_BASE_STYLES, ICON_SIZE_STYLES[size2].delete),
@@ -3668,10 +3683,10 @@ var Chip = memo14(
 );
 
 // src/components/Collection.tsx
-import React51 from "react";
+import React52 from "react";
 
 // src/components/Grid.tsx
-import React43, { useImperativeHandle as useImperativeHandle3, useRef as useRef17, useState as useState21 } from "react";
+import React44, { useImperativeHandle as useImperativeHandle3, useRef as useRef17, useState as useState21 } from "react";
 
 // src/utils/selection.ts
 function updateSelection(allIds, selectedIds, clickedId, event) {
@@ -3699,16 +3714,16 @@ function updateSelection(allIds, selectedIds, clickedId, event) {
 }
 
 // src/components/EditableText.tsx
-import React39, {
+import React40, {
   forwardRef as forwardRef17,
   memo as memo15,
   useCallback as useCallback17,
-  useEffect as useEffect15,
+  useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle2,
   useRef as useRef16,
   useState as useState19
 } from "react";
-var defaultRenderPreview = (props) => /* @__PURE__ */ React39.createElement(BreadcrumbText, { ...props });
+var defaultRenderPreview = (props) => /* @__PURE__ */ React40.createElement(BreadcrumbText, { ...props });
 var EditableText = memo15(
   forwardRef17(function EditableText2({
     value,
@@ -3729,7 +3744,7 @@ var EditableText = memo15(
     ...props
   }, ref) {
     const [inputValue, setInputValue] = useState19(value);
-    useEffect15(() => {
+    useEffect16(() => {
       setInputValue(value);
     }, [value]);
     const [focusedInternal, setFocused] = useState19(false);
@@ -3765,7 +3780,7 @@ var EditableText = memo15(
       inputRef.current?.focus();
       inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
     }
-    useEffect15(() => {
+    useEffect16(() => {
       if (testFocused) return;
       if (focused) {
         setTimeout(focusInput, 1);
@@ -3785,7 +3800,7 @@ var EditableText = memo15(
       style: textStyle,
       className: textClassName
     });
-    const input = /* @__PURE__ */ React39.createElement("div", { className: "flex absolute inset-0 -mx-1.5 -my-1" }, /* @__PURE__ */ React39.createElement(InputField2.Root, { onFocusChange: setFocused }, /* @__PURE__ */ React39.createElement(
+    const input = /* @__PURE__ */ React40.createElement("div", { className: "flex absolute inset-0 -mx-1.5 -my-1" }, /* @__PURE__ */ React40.createElement(InputField2.Root, { onFocusChange: setFocused }, /* @__PURE__ */ React40.createElement(
       InputField2.Input,
       {
         ref: inputRef,
@@ -3825,12 +3840,12 @@ var EditableText = memo15(
         }
       }
     )));
-    return /* @__PURE__ */ React39.createElement("div", { className: cx("flex relative", className), style: style2 }, preview, focused && !readOnly && input);
+    return /* @__PURE__ */ React40.createElement("div", { className: cx("flex relative", className), style: style2 }, preview, focused && !readOnly && input);
   })
 );
 
 // src/components/GridView.tsx
-import React42, {
+import React43, {
   createContext as createContext8,
   forwardRef as forwardRef18,
   memo as memo17,
@@ -3842,10 +3857,10 @@ import React42, {
 // src/components/ContextMenu.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts2 } from "@noya-app/noya-keymap";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
-import React40, { useCallback as useCallback18, useMemo as useMemo16 } from "react";
+import React41, { useCallback as useCallback18, useMemo as useMemo16 } from "react";
 var Components2 = {
   Separator: RadixContextMenu.Separator,
-  ItemText: React40.Fragment,
+  ItemText: React41.Fragment,
   Item: RadixContextMenu.Item,
   CheckboxItem: RadixContextMenu.CheckboxItem,
   ItemIndicator: RadixContextMenu.ItemIndicator,
@@ -3877,13 +3892,13 @@ function ContextMenuRoot({
     },
     [onSelect]
   );
-  return /* @__PURE__ */ React40.createElement(RadixContextMenu.Root, { onOpenChange }, /* @__PURE__ */ React40.createElement(RadixContextMenu.Trigger, { asChild: true, onPointerDown }, children), /* @__PURE__ */ React40.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(RadixContextMenu.Root, { onOpenChange }, /* @__PURE__ */ React41.createElement(RadixContextMenu.Trigger, { asChild: true, onPointerDown }, children), /* @__PURE__ */ React41.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React41.createElement(
     RadixContextMenu.Content,
     {
       ...portalScopeProps(portalScopeId),
       className: styles.contentStyle
     },
-    /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React41.createElement(
       MenuViewport,
       {
         items,
@@ -3897,26 +3912,26 @@ var ContextMenu = memoGeneric(ContextMenuRoot);
 
 // src/components/ScrollArea.tsx
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
-import * as React41 from "react";
-var ScrollArea = React41.memo(function ScrollArea2({ children }) {
-  const [scrollElementRef, setScrollElementRef] = React41.useState(null);
-  return /* @__PURE__ */ React41.createElement("div", { className: "flex-1 min-h-0" }, /* @__PURE__ */ React41.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React41.createElement(
+import * as React42 from "react";
+var ScrollArea = React42.memo(function ScrollArea2({ children }) {
+  const [scrollElementRef, setScrollElementRef] = React42.useState(null);
+  return /* @__PURE__ */ React42.createElement("div", { className: "flex-1 min-h-0" }, /* @__PURE__ */ React42.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React42.createElement(
     RadixScrollArea.Viewport,
     {
       className: "w-full h-full [&>div]:block",
-      ref: React41.useCallback(
+      ref: React42.useCallback(
         (ref) => setScrollElementRef(ref),
         []
       )
     },
     typeof children === "function" ? scrollElementRef ? children(scrollElementRef) : null : children
-  ), /* @__PURE__ */ React41.createElement(
+  ), /* @__PURE__ */ React42.createElement(
     RadixScrollArea.Scrollbar,
     {
       orientation: "vertical",
       className: "scroll-component flex p-[3px] data-[orientation=vertical]:w-[10px]"
     },
-    /* @__PURE__ */ React41.createElement(RadixScrollArea.Thumb, { className: "scroll-component flex-1 rounded-[10px] bg-scrollbar" })
+    /* @__PURE__ */ React42.createElement(RadixScrollArea.Thumb, { className: "scroll-component flex-1 rounded-[10px] bg-scrollbar" })
   )));
 });
 
@@ -3925,7 +3940,7 @@ var ItemTitle = ({
   showBackground,
   children
 }) => {
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     "span",
     {
       className: cx(
@@ -3940,7 +3955,7 @@ var ItemDescription = ({
   showBackground,
   children
 }) => {
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     "span",
     {
       className: cx(
@@ -3955,7 +3970,7 @@ var SectionTitle = ({
   last = false,
   children
 }) => {
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     "span",
     {
       className: `font-sans text-heading3 font-medium user-select-none truncate ${last ? "text-text" : "text-text-muted"}`
@@ -4011,7 +4026,7 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
     },
     [onSelect, onKeyDown]
   );
-  let element = /* @__PURE__ */ React42.createElement(
+  let element = /* @__PURE__ */ React43.createElement(
     "div",
     {
       ...props,
@@ -4034,7 +4049,7 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
       onDoubleClick,
       onContextMenu
     },
-    /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React43.createElement(
       "div",
       {
         className: cx(
@@ -4045,13 +4060,13 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
       },
       children
     ),
-    textPosition === "below" && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React42.createElement(ItemTitle, null, title || " "), /* @__PURE__ */ React42.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ React42.createElement(ItemDescription, null, subtitle || " ")),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React42.createElement("div", { className: "absolute inset-0 flex flex-col justify-end items-start p-1 pointer-events-none truncate gap-0.5" }, title && /* @__PURE__ */ React42.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React42.createElement(ItemDescription, { showBackground: true }, subtitle)),
-    action && /* @__PURE__ */ React42.createElement("div", { className: "absolute top-[7px] right-[7px] flex flex-col justify-end items-start p-1 truncate gap-0.5" }, action),
-    loading && /* @__PURE__ */ React42.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__ */ React42.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
+    textPosition === "below" && /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React43.createElement(ItemTitle, null, title || " "), /* @__PURE__ */ React43.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ React43.createElement(ItemDescription, null, subtitle || " ")),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React43.createElement("div", { className: "absolute inset-0 flex flex-col justify-end items-start p-1 pointer-events-none truncate gap-0.5" }, title && /* @__PURE__ */ React43.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React43.createElement(ItemDescription, { showBackground: true }, subtitle)),
+    action && /* @__PURE__ */ React43.createElement("div", { className: "absolute top-[7px] right-[7px] flex flex-col justify-end items-start p-1 truncate gap-0.5" }, action),
+    loading && /* @__PURE__ */ React43.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__ */ React43.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
-    element = /* @__PURE__ */ React42.createElement(
+    element = /* @__PURE__ */ React43.createElement(
       ContextMenu,
       {
         items: menuItems,
@@ -4062,10 +4077,10 @@ var GridViewItem = forwardRefGeneric(function GridViewItem2({
     );
   }
   if (textPosition === "toolip") {
-    element = /* @__PURE__ */ React42.createElement(
+    element = /* @__PURE__ */ React43.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React42.createElement(ItemTitle, null, title), /* @__PURE__ */ React42.createElement(ItemDescription, null, subtitle))
+        content: /* @__PURE__ */ React43.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React43.createElement(ItemTitle, null, title), /* @__PURE__ */ React43.createElement(ItemDescription, null, subtitle))
       },
       element
     );
@@ -4120,8 +4135,8 @@ var GridViewRoot = forwardRef18(function GridViewRoot2({
       categories: ["flex"]
     });
   }, [className, scrollable]);
-  const content = /* @__PURE__ */ React42.createElement("div", { className: cx("p-3", contentClassName) }, children);
-  return /* @__PURE__ */ React42.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React42.createElement(
+  const content = /* @__PURE__ */ React43.createElement("div", { className: cx("p-3", contentClassName) }, children);
+  return /* @__PURE__ */ React43.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React43.createElement(
     "div",
     {
       onClick: handleClick,
@@ -4129,7 +4144,7 @@ var GridViewRoot = forwardRef18(function GridViewRoot2({
       ...props,
       ref: forwardedRef
     },
-    scrollable ? /* @__PURE__ */ React42.createElement(ScrollArea, null, content) : content
+    scrollable ? /* @__PURE__ */ React43.createElement(ScrollArea, null, content) : content
   ));
 });
 function GridViewSection({
@@ -4142,8 +4157,8 @@ function GridViewSection({
     gridTemplateColumns: `repeat(auto-fill, minmax(${minColumnWidth}, 1fr))`,
     gap: `${gap}px`
   };
-  const isEmpty = React42.Children.count(children) === 0;
-  return isEmpty && renderEmptyState ? renderEmptyState() : /* @__PURE__ */ React42.createElement(
+  const isEmpty = React43.Children.count(children) === 0;
+  return isEmpty && renderEmptyState ? renderEmptyState() : /* @__PURE__ */ React43.createElement(
     "div",
     {
       role: "presentation",
@@ -4155,9 +4170,9 @@ function GridViewSection({
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
-  return /* @__PURE__ */ React42.createElement("div", { className: "px-5" }, /* @__PURE__ */ React42.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
-    grouped.map((title2, index) => /* @__PURE__ */ React42.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
-    /* @__PURE__ */ React42.createElement(SectionTitle, null, " / ")
+  return /* @__PURE__ */ React43.createElement("div", { className: "px-5" }, /* @__PURE__ */ React43.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
+    grouped.map((title2, index) => /* @__PURE__ */ React43.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
+    /* @__PURE__ */ React43.createElement(SectionTitle, null, " / ")
   ));
 }
 var GridView;
@@ -4272,7 +4287,7 @@ var Grid = memoGeneric(
       onFilesDrop
     );
     const { minColumnWidth, gap } = getGridSize(size2);
-    return /* @__PURE__ */ React43.createElement(
+    return /* @__PURE__ */ React44.createElement(
       GridView.Root,
       {
         role: "listbox",
@@ -4289,7 +4304,7 @@ var Grid = memoGeneric(
         ...dropTargetProps,
         ref: fileDropTargetRef
       },
-      items.length > 0 ? /* @__PURE__ */ React43.createElement(GridView.Section, null, items.map((item) => {
+      items.length > 0 ? /* @__PURE__ */ React44.createElement(GridView.Section, null, items.map((item) => {
         const id = getId(item);
         const isDropdownOpen = dropdownOpenId === id;
         const isHovered = testHoveredId === id || currentHoveredId === id || isDropdownOpen;
@@ -4308,7 +4323,7 @@ var Grid = memoGeneric(
             handleSelect(id);
           }
         };
-        const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React43.createElement(
+        const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React44.createElement(
           ActionMenu,
           {
             menuItems,
@@ -4317,7 +4332,7 @@ var Grid = memoGeneric(
             onOpenChange
           }
         ));
-        return /* @__PURE__ */ React43.createElement(
+        return /* @__PURE__ */ React44.createElement(
           GridView.Item,
           {
             key: id,
@@ -4330,7 +4345,7 @@ var Grid = memoGeneric(
             onHoverChange: (isHovering) => {
               setHoveredId(isHovering ? id : void 0);
             },
-            title: /* @__PURE__ */ React43.createElement(
+            title: /* @__PURE__ */ React44.createElement(
               EditableText,
               {
                 tabIndex: isRenaming ? void 0 : -1,
@@ -4347,7 +4362,7 @@ var Grid = memoGeneric(
                 },
                 textClassName: "bg-listview-editing-background max-h-input-height"
               },
-              (props2) => /* @__PURE__ */ React43.createElement(
+              (props2) => /* @__PURE__ */ React44.createElement(
                 "span",
                 {
                   ...props2,
@@ -4358,7 +4373,7 @@ var Grid = memoGeneric(
                 }
               )
             ),
-            subtitle: /* @__PURE__ */ React43.createElement(
+            subtitle: /* @__PURE__ */ React44.createElement(
               "span",
               {
                 className: cx(
@@ -4392,7 +4407,7 @@ var Grid = memoGeneric(
               }
             }
           },
-          thumbnail && /* @__PURE__ */ React43.createElement(
+          thumbnail && /* @__PURE__ */ React44.createElement(
             "div",
             {
               className: cx(
@@ -4410,12 +4425,12 @@ var Grid = memoGeneric(
 );
 
 // src/components/List.tsx
-import React50, { memo as memo19, useImperativeHandle as useImperativeHandle5, useRef as useRef20, useState as useState23 } from "react";
+import React51, { memo as memo19, useImperativeHandle as useImperativeHandle5, useRef as useRef20, useState as useState23 } from "react";
 
 // src/components/ListView.tsx
 import { range } from "@noya-app/noya-utils";
 import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
-import React48, {
+import React49, {
   Children as Children3,
   createContext as createContext11,
   forwardRef as forwardRef19,
@@ -4424,7 +4439,7 @@ import React48, {
   useCallback as useCallback23,
   useContext as useContext11,
   useImperativeHandle as useImperativeHandle4,
-  useLayoutEffect as useLayoutEffect5,
+  useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo21,
   useRef as useRef19
 } from "react";
@@ -4462,13 +4477,13 @@ import {
   useSortable,
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
-import * as React47 from "react";
+import * as React48 from "react";
 
 // src/components/sorting/DragRegistration.tsx
-import React44 from "react";
-var DragRegistrationContext = React44.createContext(null);
+import React45 from "react";
+var DragRegistrationContext = React45.createContext(null);
 function useDragRegistration(context) {
-  const value = React44.useContext(context);
+  const value = React45.useContext(context);
   if (!value) {
     throw new Error(
       "useDragRegistration must be used within a DragRegistrationProvider"
@@ -4477,11 +4492,11 @@ function useDragRegistration(context) {
   return value;
 }
 function useDragRegistrationManager() {
-  const [registeredLists, setRegisteredLists] = React44.useState(/* @__PURE__ */ new Map());
-  const registerList = React44.useCallback((list) => {
+  const [registeredLists, setRegisteredLists] = React45.useState(/* @__PURE__ */ new Map());
+  const registerList = React45.useCallback((list) => {
     setRegisteredLists((prev) => new Map(prev).set(list.id, list));
   }, []);
-  const unregisterList = React44.useCallback((listId) => {
+  const unregisterList = React45.useCallback((listId) => {
     setRegisteredLists((prev) => {
       const newMap = new Map(prev);
       newMap.delete(listId);
@@ -4490,15 +4505,15 @@ function useDragRegistrationManager() {
   }, []);
   return { registerList, unregisterList, registeredLists };
 }
-var ActiveDragContext = React44.createContext(null);
+var ActiveDragContext = React45.createContext(null);
 function useActiveDrag(context) {
-  const value = React44.useContext(context);
+  const value = React45.useContext(context);
   if (!value) {
     throw new Error("useActiveDrag must be used within a ActiveDragProvider");
   }
   return value;
 }
-var AnyDragContext = React44.createContext(false);
+var AnyDragContext = React45.createContext(false);
 
 // src/components/sorting/SharedDragProvider.tsx
 import {
@@ -4510,11 +4525,14 @@ import {
   useSensor,
   useSensors
 } from "@dnd-kit/core";
-import * as React45 from "react";
+import { rectContainsPoint, unionRects } from "@noya-app/noya-geometry";
+import { windowsOf } from "@noya-app/noya-utils";
+import * as React46 from "react";
 import { useMemo as useMemo19 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 function SharedDragProvider({
   children,
+  onMoveItem,
   sharedDragProps = {
     dragRegistrationContext: DragRegistrationContext,
     activeDragContext: ActiveDragContext
@@ -4528,14 +4546,14 @@ function SharedDragProvider({
     })
   );
   const mounted = useMounted();
-  const [dragState, setDragState] = React45.useState({
+  const [dragState, setDragState] = React46.useState({
     source: null,
     target: null,
     indicator: null
   });
   const { registerList, unregisterList, registeredLists } = useDragRegistrationManager();
-  const activatorEventRef = React45.useRef(null);
-  const handleDragStart = React45.useCallback(
+  const activatorEventRef = React46.useRef(null);
+  const handleDragStart = React46.useCallback(
     (event) => {
       activatorEventRef.current = event.activatorEvent;
       for (const [listId, list] of registeredLists) {
@@ -4557,7 +4575,7 @@ function SharedDragProvider({
     },
     [registeredLists]
   );
-  const handleDragMove = React45.useCallback(
+  const handleDragMove = React46.useCallback(
     (event) => {
       const { active, over } = event;
       if (!activatorEventRef.current || !dragState.source) return;
@@ -4580,7 +4598,8 @@ function SharedDragProvider({
     },
     [registeredLists, dragState.source]
   );
-  const handleDragEnd = React45.useCallback(
+  const stableOnMoveItem = useStableCallback(onMoveItem);
+  const handleDragEnd = React46.useCallback(
     (event) => {
       const { active, over } = event;
       if (!activatorEventRef.current || !dragState.source) return;
@@ -4605,17 +4624,22 @@ function SharedDragProvider({
       const sourceList = registeredLists.get(dropTarget.source.listId);
       const targetList = registeredLists.get(dropTarget.target.listId);
       if (!sourceList || !targetList) return;
-      sourceList.onMoveItem(
-        dropTarget.source.index,
-        dropTarget.target.index,
-        dropTarget.indicator,
-        dropTarget.source.listId,
-        dropTarget.target.listId
-      );
+      const parameters = {
+        sourceIndex: dropTarget.source.index,
+        targetIndex: dropTarget.target.index,
+        position: dropTarget.indicator,
+        sourceListId: dropTarget.source.listId,
+        targetListId: dropTarget.target.listId
+      };
+      sourceList.onMoveItem(parameters);
+      if (dropTarget.target.listId !== dropTarget.source.listId) {
+        targetList.onMoveItem(parameters);
+      }
+      stableOnMoveItem?.(parameters);
     },
-    [registeredLists, dragState.source]
+    [registeredLists, dragState.source, stableOnMoveItem]
   );
-  const contextValue = React45.useMemo(
+  const contextValue = React46.useMemo(
     () => ({
       registerList,
       unregisterList
@@ -4623,19 +4647,19 @@ function SharedDragProvider({
     [registerList, unregisterList]
   );
   const activeList = dragState.source ? registeredLists.get(dragState.source.listId) : null;
-  const activeDragContextValue = React45.useMemo(
+  const activeDragContextValue = React46.useMemo(
     () => dragState,
     [dragState]
   );
   const collisionDetection = useMemo19(() => {
-    return getItemFirstCollisionDetection(Array.from(registeredLists.keys()));
+    return getItemFirstCollisionDetection(registeredLists);
   }, [registeredLists]);
-  return /* @__PURE__ */ React45.createElement(AnyDragContext.Provider, { value: true }, /* @__PURE__ */ React45.createElement(sharedDragProps.dragRegistrationContext.Provider, { value: contextValue }, /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(AnyDragContext.Provider, { value: true }, /* @__PURE__ */ React46.createElement(sharedDragProps.dragRegistrationContext.Provider, { value: contextValue }, /* @__PURE__ */ React46.createElement(
     sharedDragProps.activeDragContext.Provider,
     {
       value: activeDragContextValue
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(
       DndContext,
       {
         sensors,
@@ -4646,33 +4670,33 @@ function SharedDragProvider({
       },
       children,
       mounted && activeList?.renderOverlay && dragState.source && createPortal2(
-        /* @__PURE__ */ React45.createElement(DragOverlay, { dropAnimation: null }, activeList.renderOverlay(dragState.source.itemId)),
+        /* @__PURE__ */ React46.createElement(DragOverlay, { dropAnimation: null }, activeList.renderOverlay(dragState.source.itemId)),
         document.body
       )
     )
   )));
 }
 function useMounted() {
-  const [mounted, setMounted] = React45.useState(false);
-  React45.useEffect(() => {
+  const [mounted, setMounted] = React46.useState(false);
+  React46.useEffect(() => {
     setMounted(true);
   }, []);
   return mounted;
 }
 function withDragProvider(Component) {
   return function WithDragProvider(props) {
-    const anyDragContext = React45.useContext(AnyDragContext);
+    const anyDragContext = React46.useContext(AnyDragContext);
     if (!anyDragContext) {
-      return /* @__PURE__ */ React45.createElement(SharedDragProvider, null, /* @__PURE__ */ React45.createElement(Component, { ...props }));
+      return /* @__PURE__ */ React46.createElement(SharedDragProvider, null, /* @__PURE__ */ React46.createElement(Component, { ...props }));
     }
-    return /* @__PURE__ */ React45.createElement(Component, { ...props });
+    return /* @__PURE__ */ React46.createElement(Component, { ...props });
   };
 }
-var getItemFirstCollisionDetection = (registeredListIds) => (parameters) => {
+var getItemFirstCollisionDetection = (registeredLists) => (parameters) => {
   const pointerCollisions = pointerWithin(parameters);
   if (pointerCollisions.length > 0) {
     const itemCollisions = pointerCollisions.filter((collision) => {
-      for (const listId of registeredListIds) {
+      for (const listId of registeredLists.keys()) {
         if (collision.id === listId) {
           return false;
         }
@@ -4683,7 +4707,33 @@ var getItemFirstCollisionDetection = (registeredListIds) => (parameters) => {
       return itemCollisions;
     }
   }
-  return pointerCollisions.length > 0 ? pointerCollisions : closestCenter(parameters);
+  const listCollision = pointerCollisions.at(0);
+  const nearestCenters = closestCenter(parameters);
+  if (parameters.pointerCoordinates && listCollision) {
+    const list = registeredLists.get(listCollision.id);
+    if (list) {
+      const pairs = windowsOf(list.keys, 2);
+      for (const pair of pairs) {
+        const clientRects = pair.map(
+          (key) => parameters.droppableRects.get(key)
+        );
+        const merged = unionRects(
+          ...clientRects.map((rect) => ({
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height
+          }))
+        );
+        if (rectContainsPoint(merged, parameters.pointerCoordinates)) {
+          return nearestCenters.filter(
+            (center) => pair.some((id) => id === center.id)
+          );
+        }
+      }
+    }
+  }
+  return pointerCollisions;
 };
 function findDropTarget({
   activationPoint,
@@ -4718,14 +4768,14 @@ function findDropTarget({
     return;
   }
   if (over.id === targetList.id) {
-    const canDrop = targetList.acceptsDrop(
-      source.index,
-      Math.max(0, targetList.keys.length - 1),
+    const canDrop = targetList.acceptsDrop({
+      sourceIndex: source.index,
+      targetIndex: Math.max(0, targetList.keys.length - 1),
       // Use last valid index or 0 for empty lists
-      "below",
-      sourceList.id,
-      targetList.id
-    );
+      position: "below",
+      sourceListId: sourceList.id,
+      targetListId: targetList.id
+    });
     if (canDrop) {
       return {
         source,
@@ -4764,11 +4814,15 @@ function findDropTarget({
 }
 
 // src/components/sorting/sorting.ts
-import * as React46 from "react";
+import * as React47 from "react";
 var normalizeListTargetIndex = (index, position) => {
   return position === "above" ? index : index + 1;
 };
-var defaultAcceptsDrop = (sourceIndex, targetIndex, position) => {
+var defaultAcceptsDrop = ({
+  sourceIndex,
+  targetIndex,
+  position
+}) => {
   if (position === "inside") return false;
   const normalized = normalizeListTargetIndex(targetIndex, position);
   if (sourceIndex === normalized || sourceIndex + 1 === normalized) {
@@ -4776,7 +4830,7 @@ var defaultAcceptsDrop = (sourceIndex, targetIndex, position) => {
   }
   return true;
 };
-var SortableItemContext = React46.createContext({
+var SortableItemContext = React47.createContext({
   keys: [],
   acceptsDrop: defaultAcceptsDrop,
   axis: "y",
@@ -4801,13 +4855,13 @@ function validateDropIndicator({
   const overIndex = keys.findIndex((id) => id === overId);
   if (overIndex === -1) return void 0;
   if (activeIndex === -1 && sourceListId === targetListId) return void 0;
-  const acceptsDropInside = acceptsDrop2(
-    activeIndex,
-    overIndex,
-    "inside",
+  const acceptsDropInside = acceptsDrop2({
+    sourceIndex: activeIndex,
+    targetIndex: overIndex,
+    position: "inside",
     sourceListId,
     targetListId
-  );
+  });
   if (isContainedInMiddleThird(elementStart, elementSize, offsetStart) && acceptsDropInside) {
     return "inside";
   }
@@ -4816,16 +4870,13 @@ function validateDropIndicator({
     elementSize,
     offsetStart
   );
-  if (!isContained(elementStart, elementSize, offsetStart) && sourceListId === targetListId) {
-    return void 0;
-  }
-  const acceptedHalf = acceptsDrop2(
-    activeIndex,
-    overIndex,
-    containingHalf,
+  const acceptedHalf = acceptsDrop2({
+    sourceIndex: activeIndex,
+    targetIndex: overIndex,
+    position: containingHalf,
     sourceListId,
     targetListId
-  );
+  });
   return acceptedHalf ? containingHalf : (
     // Lastly, check if inside but not middle third
     acceptsDropInside ? "inside" : void 0
@@ -4834,23 +4885,21 @@ function validateDropIndicator({
 function isContainedInMiddleThird(elementStart, elementSize, offsetStart) {
   return offsetStart >= elementStart + elementSize / 3 && offsetStart <= elementStart + elementSize * 2 / 3;
 }
-function isContained(elementStart, elementSize, offsetStart) {
-  return offsetStart >= elementStart && offsetStart <= elementStart + elementSize;
-}
 function getContainingHalf(elementStart, elementSize, offsetStart) {
   if (offsetStart < elementStart + elementSize / 2) return "above";
   return "below";
 }
+var dragItemKeySeparator = "-~-";
 function createDragItemKey(listId, itemId) {
-  return `${listId}-~-${itemId}`;
+  return `${listId}${dragItemKeySeparator}${itemId}`;
 }
 function parseDragItemKey(key) {
-  const [listId, itemId] = key.split("-~-");
+  const [listId, itemId] = key.split(dragItemKeySeparator);
   return { listId, itemId };
 }
 
 // src/components/sorting/Sortable.tsx
-var SortableItemContext2 = React47.createContext({
+var SortableItemContext2 = React48.createContext({
   acceptsDrop: defaultAcceptsDrop,
   listId: "",
   getDropTargetParentIndex: void 0,
@@ -4863,42 +4912,44 @@ function useSortableDropIndicator({
   acceptsDrop: acceptsDrop2,
   getDropTargetParentIndex
 }) {
-  const { activeDragContext } = React47.useContext(SortableItemContext2);
+  const { activeDragContext } = React48.useContext(SortableItemContext2);
   const activeDrag = useActiveDrag(activeDragContext);
   const { source, target } = activeDrag;
   if (!source || !target) return;
-  const indicator = target.listId === listId && target.itemId === itemId ? activeDrag.indicator : void 0;
+  if (target.listId === listId && target.itemId === itemId) {
+    return activeDrag.indicator ?? void 0;
+  }
   const targetParentIndex = target.index === -1 ? void 0 : getDropTargetParentIndex?.(target.index);
-  const isValidParent = targetParentIndex === void 0 || targetParentIndex === -1 ? false : acceptsDrop2(
-    source.index,
-    targetParentIndex,
-    "inside",
-    source.listId,
-    target.listId
-  );
-  const overIdAcceptsDrop = target.index === -1 ? void 0 : acceptsDrop2(
-    source.index,
-    target.index,
-    "inside",
-    source.listId,
-    target.listId
-  );
+  const isValidParent = targetParentIndex === void 0 || targetParentIndex === -1 ? false : acceptsDrop2({
+    sourceIndex: source.index,
+    targetIndex: targetParentIndex,
+    position: "inside",
+    sourceListId: source.listId,
+    targetListId: target.listId
+  });
+  const overIdAcceptsDrop = target.index === -1 ? void 0 : acceptsDrop2({
+    sourceIndex: source.index,
+    targetIndex: target.index,
+    position: "inside",
+    sourceListId: source.listId,
+    targetListId: target.listId
+  });
   const thisItemIsTargetParent = targetParentIndex === index;
-  const showDragInsideIndicatorOnParent = !overIdAcceptsDrop && isValidParent && thisItemIsTargetParent;
-  return indicator ?? (showDragInsideIndicatorOnParent ? "inside" : void 0);
+  const showIndicatorOnParent = !overIdAcceptsDrop && isValidParent && thisItemIsTargetParent;
+  return showIndicatorOnParent ? "inside" : void 0;
 }
 function SortableItem({
   id,
   disabled,
   children
 }) {
-  const { acceptsDrop: acceptsDrop2, listId, getDropTargetParentIndex } = React47.useContext(SortableItemContext2);
+  const { acceptsDrop: acceptsDrop2, listId, getDropTargetParentIndex } = React48.useContext(SortableItemContext2);
   const dragItemKey = createDragItemKey(listId, id);
   const { attributes, listeners, setNodeRef, isDragging, index } = useSortable({
     id: dragItemKey,
     disabled
   });
-  const ref = React47.useCallback(
+  const ref = React48.useCallback(
     (node) => setNodeRef(node),
     [setNodeRef]
   );
@@ -4932,24 +4983,18 @@ function SortableRoot_({
   sharedDragProps,
   containerRef
 }) {
-  const defaultId = React47.useId();
+  const defaultId = React48.useId();
   const id = idProp ?? defaultId;
-  const keys = React47.useMemo(() => {
+  const keys = React48.useMemo(() => {
     return keysProp.map((key) => createDragItemKey(id, key));
   }, [keysProp, id]);
   const { registerList, unregisterList } = useDragRegistration(
     sharedDragProps?.dragRegistrationContext ?? DragRegistrationContext
   );
   const { setNodeRef: setDroppableRef } = useDroppable({
-    id,
-    // Make the container droppable only when the list is empty
-    // This avoids conflicts with individual sortable items.
-    // This isn't strictly necessary since we also use a custom collision detection
-    // that prioritizes items over containers, but it helps with dropping into
-    // the best position (either above or below, rather than always below).
-    disabled: keys.length > 0
+    id
   });
-  React47.useEffect(() => {
+  React48.useEffect(() => {
     const listConfig = {
       id,
       keys,
@@ -4995,7 +5040,7 @@ function SortableRoot_({
     unregisterList,
     keys
   ]);
-  const contextValue = React47.useMemo(
+  const contextValue = React48.useMemo(
     () => ({
       keys,
       acceptsDrop: acceptsDrop2,
@@ -5005,12 +5050,12 @@ function SortableRoot_({
     }),
     [keys, acceptsDrop2, id, getDropTargetParentIndex, sharedDragProps]
   );
-  React47.useEffect(() => {
+  React48.useEffect(() => {
     if (containerRef) {
       setDroppableRef(containerRef.current);
     }
   });
-  return /* @__PURE__ */ React47.createElement(SortableItemContext2.Provider, { value: contextValue }, /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(SortableItemContext2.Provider, { value: contextValue }, /* @__PURE__ */ React48.createElement(
     SortableContext,
     {
       items: keys,
@@ -5027,11 +5072,11 @@ var Sortable_ = function Sortable_2({
   renderItem,
   ...rest
 }) {
-  const keys = React47.useMemo(
+  const keys = React48.useMemo(
     () => items.map(keyExtractor),
     [items, keyExtractor]
   );
-  const renderOverlay = React47.useCallback(
+  const renderOverlay = React48.useCallback(
     (index) => {
       return renderItem(
         items[index],
@@ -5051,14 +5096,14 @@ var Sortable_ = function Sortable_2({
     },
     [renderItem, items]
   );
-  return /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(
     SortableRoot,
     {
       ...rest,
       keys,
       renderOverlay: shouldRenderOverlay ? renderOverlay : void 0
     },
-    keys.map((key, index) => /* @__PURE__ */ React47.createElement(SortableItem, { key, id: key }, (props) => {
+    keys.map((key, index) => /* @__PURE__ */ React48.createElement(SortableItem, { key, id: key }, (props) => {
       return renderItem(items[index], props, { isOverlay: false });
     }))
   );
@@ -5093,7 +5138,7 @@ var ListViewRowTitle = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ React48.createElement(
+}) => /* @__PURE__ */ React49.createElement(
   "span",
   {
     className: cx(
@@ -5113,7 +5158,7 @@ function ListViewEditableRowTitle({
   onKeyDown
 }) {
   const inputRef = useRef19(null);
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     const element = inputRef.current;
     if (!element || !autoFocus) return;
     element.focus();
@@ -5121,7 +5166,7 @@ function ListViewEditableRowTitle({
       element.select();
     }, 1);
   }, [autoFocus]);
-  return /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(
     InputField2.Input,
     {
       ref: inputRef,
@@ -5160,7 +5205,7 @@ var RowContainer = forwardRef19(
     "aria-selected": ariaSelected,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React48.createElement(
+    return /* @__PURE__ */ React49.createElement(
       "div",
       {
         ref,
@@ -5238,7 +5283,7 @@ var ListViewDragIndicatorElement = forwardRef19(
     style: style2,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React48.createElement(
+    return /* @__PURE__ */ React49.createElement(
       "div",
       {
         ref,
@@ -5339,7 +5384,7 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
   }, ref) => {
     const Component = RowContainer;
     const relativeDropPosition = testRelativeDropPosition ?? relativeDropPositionProp;
-    const element = /* @__PURE__ */ React48.createElement(
+    const element = /* @__PURE__ */ React49.createElement(
       Component,
       {
         ref,
@@ -5373,7 +5418,7 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
         className,
         $clickable: !!onPress
       },
-      relativeDropPosition && /* @__PURE__ */ React48.createElement(
+      relativeDropPosition && /* @__PURE__ */ React49.createElement(
         ListViewDragIndicatorElement,
         {
           key: relativeDropPosition,
@@ -5388,11 +5433,11 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
           }) : dragIndicatorStyle
         }
       ),
-      depth > 0 && /* @__PURE__ */ React48.createElement(Spacer.Horizontal, { size: depth * indentation }),
+      depth > 0 && /* @__PURE__ */ React49.createElement(Spacer.Horizontal, { size: depth * indentation }),
       children
     );
     if (menuItems && onSelectMenuItem) {
-      return /* @__PURE__ */ React48.createElement(
+      return /* @__PURE__ */ React49.createElement(
         ContextMenu,
         {
           items: menuItems,
@@ -5405,7 +5450,7 @@ var ListViewRow = forwardRefGeneric(function ListViewRow2({
     return element;
   };
   if (sortable && id) {
-    return /* @__PURE__ */ React48.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
+    return /* @__PURE__ */ React49.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
       sortableProps,
       composeRefs2(sortableRef, forwardedRef)
     ));
@@ -5421,7 +5466,7 @@ var VirtualizedListRow = memo18(function VirtualizedListRow2({
   style: style2
 }) {
   const renderItem = useContext11(RenderItemContext);
-  return /* @__PURE__ */ React48.createElement("div", { key: index, style: style2 }, renderItem(index));
+  return /* @__PURE__ */ React49.createElement("div", { key: index, style: style2 }, renderItem(index));
 });
 var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
   size: size2,
@@ -5437,7 +5482,7 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
       listRef.current?.scrollToItem(index);
     }
   }));
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     listRef.current?.resetAfterIndex(0);
   }, [
     // When items change, we need to re-render the virtualized list,
@@ -5452,7 +5497,7 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
     }),
     []
   );
-  return /* @__PURE__ */ React48.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React49.createElement(
     WindowScroller,
     {
       scrollElement,
@@ -5463,7 +5508,7 @@ var VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner2({
         registerChild,
         onChildScroll,
         scrollTop
-      }) => /* @__PURE__ */ React48.createElement("div", { ref: registerChild }, /* @__PURE__ */ React48.createElement(
+      }) => /* @__PURE__ */ React49.createElement("div", { ref: registerChild }, /* @__PURE__ */ React49.createElement(
         VariableSizeList,
         {
           ref: listRef,
@@ -5637,7 +5682,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     [indentation]
   );
   const renderOverlay = useCallback23(
-    (index) => /* @__PURE__ */ React48.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React48.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
+    (index) => /* @__PURE__ */ React49.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React49.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragOverlay: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
   const renderWrappedChild = useCallback23(
@@ -5645,12 +5690,12 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
       const contextValue = getItemContextValue(index);
       const current = renderChild(index);
       if (!contextValue || !isValidElement3(current)) return null;
-      return /* @__PURE__ */ React48.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
+      return /* @__PURE__ */ React49.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
     },
     [getItemContextValue, renderChild]
   );
   const ids = useMemo21(() => data.map(keyExtractor), [keyExtractor, data]);
-  const withSortable = (children) => sortable ? /* @__PURE__ */ React48.createElement(
+  const withSortable = (children) => sortable ? /* @__PURE__ */ React49.createElement(
     Sortable.Root,
     {
       id: sortableId,
@@ -5663,7 +5708,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     },
     children
   ) : children;
-  const withScrollable = (children) => scrollable ? /* @__PURE__ */ React48.createElement(ScrollArea, null, children) : children(null);
+  const withScrollable = (children) => scrollable ? /* @__PURE__ */ React49.createElement(ScrollArea, null, children) : children(null);
   const getItemHeight = useCallback23(
     (index) => {
       const child = getItemContextValue(index);
@@ -5678,7 +5723,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
   );
   const draggingContextValue = useMemo21(() => ({ indentation }), [indentation]);
   const gapStyle = useMemo21(() => ({ gap: `${gap}px` }), [gap]);
-  return /* @__PURE__ */ React48.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React49.createElement(
     "div",
     {
       id,
@@ -5707,7 +5752,7 @@ var ListViewRootInner = forwardRefGeneric(function ListViewRootInner2({
     },
     data.length === 0 && renderEmptyState ? renderEmptyState() : withScrollable(
       (scrollElementRef) => withSortable(
-        virtualized ? /* @__PURE__ */ React48.createElement(
+        virtualized ? /* @__PURE__ */ React49.createElement(
           VirtualizedList,
           {
             ref: forwardedRef,
@@ -5731,7 +5776,7 @@ var ChildrenListViewInner = forwardRef19(function ChildrenListViewInner2({ child
     ),
     [children]
   );
-  return /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(
     ListViewRoot,
     {
       ref: forwardedRef,
@@ -5748,9 +5793,9 @@ var ChildrenListViewInner = forwardRef19(function ChildrenListViewInner2({ child
 var ChildrenListView = memo18(ChildrenListViewInner);
 var SimpleListViewInner = forwardRefGeneric(function SimpleListViewInner2(props, forwardedRef) {
   if ("children" in props) {
-    return /* @__PURE__ */ React48.createElement(ChildrenListView, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ React49.createElement(ChildrenListView, { ref: forwardedRef, ...props });
   } else {
-    return /* @__PURE__ */ React48.createElement(ListViewRoot, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ React49.createElement(ListViewRoot, { ref: forwardedRef, ...props });
   }
 });
 var SimpleListView = memoGeneric(SimpleListViewInner);
@@ -5774,7 +5819,7 @@ var ListView;
 })(ListView || (ListView = {}));
 
 // src/components/TreeView.tsx
-import React49, { useCallback as useCallback24, useContext as useContext12 } from "react";
+import React50, { useCallback as useCallback24, useContext as useContext12 } from "react";
 var TreeRow = forwardRefGeneric(function TreeRow2({
   icon,
   expanded,
@@ -5791,7 +5836,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ React49.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React49.createElement(React49.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React49.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React50.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React50.createElement(React50.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React50.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React50.createElement(
     IconButton,
     {
       className: chevronClassName,
@@ -5799,7 +5844,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React49.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React49.createElement(React49.Fragment, null, renderIcon(icon), /* @__PURE__ */ React49.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ React50.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React50.createElement(React50.Fragment, null, renderIcon(icon), /* @__PURE__ */ React50.createElement(Spacer.Horizontal, { size: 10 })), children);
 });
 var TreeView;
 ((TreeView2) => {
@@ -5893,7 +5938,7 @@ var List = memoGeneric(
         setRenamingId(id);
       }
     }));
-    return /* @__PURE__ */ React50.createElement(
+    return /* @__PURE__ */ React51.createElement(
       ViewComponent.Root,
       {
         variant: "bare",
@@ -5938,7 +5983,7 @@ var List = memoGeneric(
               handleSelect(id);
             }
           };
-          const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React50.createElement(
+          const action = (isHovered || isSelected) && !isRenaming && (typeof renderAction === "function" ? renderAction({ item, selected: isSelected, onOpenChange }) : renderAction === "menu" && menuItems && /* @__PURE__ */ React51.createElement(
             ActionMenu,
             {
               menuItems,
@@ -5954,7 +5999,7 @@ var List = memoGeneric(
           ));
           const end = action || detailPosition === "end" && renderDetail?.(item, isSelected);
           const below = detailPosition === "below" && renderDetail?.(item, isSelected);
-          return /* @__PURE__ */ React50.createElement(
+          return /* @__PURE__ */ React51.createElement(
             ViewComponent.Row,
             {
               id,
@@ -6002,12 +6047,12 @@ var List = memoGeneric(
               },
               dragIndicatorStyle
             },
-            /* @__PURE__ */ React50.createElement(
+            /* @__PURE__ */ React51.createElement(
               "div",
               {
                 className: cx("flex flex-1 items-center px-2", rowGapMap[size2])
               },
-              thumbnail && /* @__PURE__ */ React50.createElement(
+              thumbnail && /* @__PURE__ */ React51.createElement(
                 "div",
                 {
                   className: cx(
@@ -6020,7 +6065,7 @@ var List = memoGeneric(
                 },
                 thumbnail
               ),
-              /* @__PURE__ */ React50.createElement("div", { className: "flex flex-col flex-1 w-0" }, /* @__PURE__ */ React50.createElement("div", { className: "flex items-center min-h-input-height flex-1 gap-2" }, /* @__PURE__ */ React50.createElement("div", { className: "flex-1 w-0 flex items-center", tabIndex: -1 }, isRenaming ? /* @__PURE__ */ React50.createElement(
+              /* @__PURE__ */ React51.createElement("div", { className: "flex flex-col flex-1 w-0" }, /* @__PURE__ */ React51.createElement("div", { className: "flex items-center min-h-input-height flex-1 gap-2" }, /* @__PURE__ */ React51.createElement("div", { className: "flex-1 w-0 flex items-center", tabIndex: -1 }, isRenaming ? /* @__PURE__ */ React51.createElement(
                 ViewComponent.EditableRowTitle,
                 {
                   value: getName(item),
@@ -6035,7 +6080,7 @@ var List = memoGeneric(
                     e.stopPropagation();
                   }
                 }
-              ) : /* @__PURE__ */ React50.createElement(
+              ) : /* @__PURE__ */ React51.createElement(
                 ViewComponent.RowTitle,
                 {
                   className: cx(
@@ -6044,8 +6089,8 @@ var List = memoGeneric(
                   )
                 },
                 getName(item)
-              )), end && detailPosition === "end" && /* @__PURE__ */ React50.createElement(DetailContainer, { selected: isSelected }, end)), below && /* @__PURE__ */ React50.createElement(DetailContainer, { selected: isSelected }, below)),
-              end && detailPosition === "below" && /* @__PURE__ */ React50.createElement(DetailContainer, { selected: isSelected }, end)
+              )), end && detailPosition === "end" && /* @__PURE__ */ React51.createElement(DetailContainer, { selected: isSelected }, end)), below && /* @__PURE__ */ React51.createElement(DetailContainer, { selected: isSelected }, below)),
+              end && detailPosition === "below" && /* @__PURE__ */ React51.createElement(DetailContainer, { selected: isSelected }, end)
             )
           );
         }
@@ -6057,7 +6102,7 @@ var DetailContainer = memo19(function DetailContainer2({
   children,
   selected
 }) {
-  return /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React51.createElement(
     "div",
     {
       className: cx("flex items-center gap-2", selected && "text-primary"),
@@ -6102,11 +6147,11 @@ var fontStyleMap = {
 // src/components/Collection.tsx
 var Collection = forwardRefGeneric(function Collection2(props, ref) {
   const { viewType, ...rest } = props;
-  return viewType === "grid" ? /* @__PURE__ */ React51.createElement(Grid, { ref, ...rest }) : /* @__PURE__ */ React51.createElement(List, { ref, ...rest });
+  return viewType === "grid" ? /* @__PURE__ */ React52.createElement(Grid, { ref, ...rest }) : /* @__PURE__ */ React52.createElement(List, { ref, ...rest });
 });
 
 // src/components/ColorSwatch.tsx
-import React52, { forwardRef as forwardRef20 } from "react";
+import React53, { forwardRef as forwardRef20 } from "react";
 var colorSwatchSizeMap = {
   xsmall: 21,
   small: 27,
@@ -6115,7 +6160,7 @@ var colorSwatchSizeMap = {
 };
 var ColorSwatch = forwardRef20(function ColorSwatch2({ color, size: size2 = "small", checked, style: style2, ...props }, ref) {
   const sizePx = colorSwatchSizeMap[size2];
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React53.createElement(
     "button",
     {
       ...props,
@@ -6136,7 +6181,7 @@ var ColorSwatch = forwardRef20(function ColorSwatch2({ color, size: size2 = "sma
 
 // src/components/ColorSwatchControl.tsx
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import React53, { useMemo as useMemo22 } from "react";
+import React54, { useMemo as useMemo22 } from "react";
 function ColorSwatchControl(props) {
   const {
     options,
@@ -6159,8 +6204,8 @@ function ColorSwatchControl(props) {
       ...style2
     };
   }, [size2, style2]);
-  const content = /* @__PURE__ */ React53.createElement("div", { className, id, style: styles3 }, options.map((option) => {
-    const item = /* @__PURE__ */ React53.createElement(
+  const content = /* @__PURE__ */ React54.createElement("div", { className, id, style: styles3 }, options.map((option) => {
+    const item = /* @__PURE__ */ React54.createElement(
       ColorSwatch,
       {
         key: option,
@@ -6173,7 +6218,7 @@ function ColorSwatchControl(props) {
         checked: value === option
       }
     );
-    return /* @__PURE__ */ React53.createElement(
+    return /* @__PURE__ */ React54.createElement(
       ToggleGroupPrimitive.Item,
       {
         asChild: true,
@@ -6184,7 +6229,7 @@ function ColorSwatchControl(props) {
       item
     );
   }));
-  return /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React54.createElement(
     ToggleGroupPrimitive.Root,
     {
       type: "single",
@@ -6199,9 +6244,9 @@ function ColorSwatchControl(props) {
 
 // src/components/Combobox.tsx
 import { DropdownChevronIcon as DropdownChevronIcon2 } from "@noya-app/noya-icons";
-import React55, {
+import React56, {
   useCallback as useCallback25,
-  useEffect as useEffect18,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle6,
   useMemo as useMemo23,
   useRef as useRef21,
@@ -6541,7 +6586,7 @@ function useComboboxState(state) {
 
 // src/components/ComboboxMenu.tsx
 import { CheckIcon } from "@noya-app/noya-icons";
-import React54 from "react";
+import React55 from "react";
 var ComboboxMenu = memoGeneric(
   forwardRefGeneric(function ComboboxMenu2({
     items,
@@ -6553,7 +6598,7 @@ var ComboboxMenu = memoGeneric(
     indented,
     iconPosition = "right"
   }, forwardedRef) {
-    return /* @__PURE__ */ React54.createElement(
+    return /* @__PURE__ */ React55.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -6569,7 +6614,7 @@ var ComboboxMenu = memoGeneric(
         style: style2,
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ React54.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, indented && /* @__PURE__ */ React54.createElement(
+            return /* @__PURE__ */ React55.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, indented && /* @__PURE__ */ React55.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET + CHECKBOX_INDENT_WIDTH
@@ -6580,7 +6625,7 @@ var ComboboxMenu = memoGeneric(
             item: typeof item.title === "string" ? item.title : item.value,
             itemScore: item
           });
-          return /* @__PURE__ */ React54.createElement(
+          return /* @__PURE__ */ React55.createElement(
             ListView.Row,
             {
               key: item.value,
@@ -6593,12 +6638,12 @@ var ComboboxMenu = memoGeneric(
                 }
               }
             },
-            /* @__PURE__ */ React54.createElement("div", { className: "flex flex-1 min-w-0 items-center" }, indented && /* @__PURE__ */ React54.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ React54.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React54.createElement(CheckIcon, null)) : indented ? /* @__PURE__ */ React54.createElement(
+            /* @__PURE__ */ React55.createElement("div", { className: "flex flex-1 min-w-0 items-center" }, indented && /* @__PURE__ */ React55.createElement(Spacer.Horizontal, { size: CHECKBOX_INDENT_WIDTH }), item.checked ? /* @__PURE__ */ React55.createElement("div", { ...styles.itemIndicator }, /* @__PURE__ */ React55.createElement(CheckIcon, null)) : indented ? /* @__PURE__ */ React55.createElement(
               Spacer.Horizontal,
               {
                 size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET
               }
-            ) : null, iconPosition === "left" && item.icon && /* @__PURE__ */ React54.createElement(React54.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ React54.createElement(Spacer.Horizontal, { size: 8 })), tokens.map((token, j) => /* @__PURE__ */ React54.createElement(
+            ) : null, iconPosition === "left" && item.icon && /* @__PURE__ */ React55.createElement(React55.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ React55.createElement(Spacer.Horizontal, { size: 8 })), tokens.map((token, j) => /* @__PURE__ */ React55.createElement(
               "span",
               {
                 key: `${item.value}-token-${j}`,
@@ -6609,7 +6654,7 @@ var ComboboxMenu = memoGeneric(
               },
               token.text
             ))),
-            (item.shortcut || item.icon && iconPosition === "right") && /* @__PURE__ */ React54.createElement(React54.Fragment, null, item.shortcut ? /* @__PURE__ */ React54.createElement(KeyboardShortcut, { shortcut: item.shortcut }) : item.icon && renderIcon(item.icon))
+            (item.shortcut || item.icon && iconPosition === "right") && /* @__PURE__ */ React55.createElement(React55.Fragment, null, item.shortcut ? /* @__PURE__ */ React55.createElement(KeyboardShortcut, { shortcut: item.shortcut }) : item.icon && renderIcon(item.icon))
           );
         }
       }
@@ -6689,15 +6734,15 @@ var Combobox = memoGeneric(
     const { fieldId: id } = useLabel({
       fieldId: rest.id
     });
-    useEffect18(() => {
+    useEffect19(() => {
       comboboxState.setItems(items);
     }, [items, comboboxState]);
-    useEffect18(() => {
+    useEffect19(() => {
       comboboxState.setFilter(initialValueString);
     }, [comboboxState, initialValueString]);
     const { filter, selectedIndex, filteredItems } = state;
     const shouldShowMenu = isFocused && !(hideMenuWhenEmptyValue && filter === "");
-    useEffect18(() => {
+    useEffect19(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
       }
@@ -6910,7 +6955,7 @@ var Combobox = memoGeneric(
         comboboxState
       ]
     );
-    useEffect18(() => {
+    useEffect19(() => {
       if (!shouldBlur) return;
       if (document.activeElement !== ref.current) return;
       setShouldBlur(false);
@@ -6931,19 +6976,19 @@ var Combobox = memoGeneric(
     const hasCheckedItems = items.some(
       (item) => isSelectableMenuItem(item) && item.checked
     );
-    return /* @__PURE__ */ React55.createElement(
+    return /* @__PURE__ */ React56.createElement(
       InputField2.Root,
       {
         id,
         size: size2,
         sideOffset: 6,
-        end: /* @__PURE__ */ React55.createElement(React55.Fragment, null, loading && /* @__PURE__ */ React55.createElement("div", { className: "pr-1.5" }, /* @__PURE__ */ React55.createElement(ActivityIndicator, null)), !readOnly && /* @__PURE__ */ React55.createElement(
+        end: /* @__PURE__ */ React56.createElement(React56.Fragment, null, loading && /* @__PURE__ */ React56.createElement("div", { className: "pr-1.5" }, /* @__PURE__ */ React56.createElement(ActivityIndicator, null)), !readOnly && /* @__PURE__ */ React56.createElement(
           InputField2.Button,
           {
             variant: "floating",
             onClick: handleChevronClick
           },
-          /* @__PURE__ */ React55.createElement(
+          /* @__PURE__ */ React56.createElement(
             DropdownChevronIcon2,
             {
               className: cx(
@@ -6962,7 +7007,7 @@ var Combobox = memoGeneric(
             ListView.rowHeight * 10.5
           );
           const listSize = { width, height };
-          return /* @__PURE__ */ React55.createElement(
+          return /* @__PURE__ */ React56.createElement(
             "div",
             {
               className: cx(
@@ -6970,7 +7015,7 @@ var Combobox = memoGeneric(
                 shouldShowMenu && !readOnly ? "flex" : "hidden"
               )
             },
-            filteredItems.length > 0 && !loading ? /* @__PURE__ */ React55.createElement(
+            filteredItems.length > 0 && !loading ? /* @__PURE__ */ React56.createElement(
               ComboboxMenu,
               {
                 ref: listRef,
@@ -6984,11 +7029,11 @@ var Combobox = memoGeneric(
                 },
                 indented: hasCheckedItems
               }
-            ) : /* @__PURE__ */ React55.createElement("div", { className: "flex flex-col h-[50px] p-5 items-center justify-center" }, /* @__PURE__ */ React55.createElement(Small, { className: "text-text-disabled" }, loading ? "Loading..." : "No results"))
+            ) : /* @__PURE__ */ React56.createElement("div", { className: "flex flex-col h-[50px] p-5 items-center justify-center" }, /* @__PURE__ */ React56.createElement(Small, { className: "text-text-disabled" }, loading ? "Loading..." : "No results"))
           );
         }
       },
-      /* @__PURE__ */ React55.createElement(
+      /* @__PURE__ */ React56.createElement(
         InputField2.Input,
         {
           ref,
@@ -7013,7 +7058,7 @@ var Combobox = memoGeneric(
           ...readOnly ? { readOnly: true } : {}
         }
       ),
-      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ React55.createElement(
+      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ React56.createElement(
         InputField2.Typeahead,
         {
           value: typeaheadValue,
@@ -7027,14 +7072,14 @@ var Combobox = memoGeneric(
 );
 
 // src/components/CommandPalette.tsx
-import React58, { memo as memo21 } from "react";
+import React59, { memo as memo21 } from "react";
 
 // src/components/SearchCompletionMenu.tsx
 import { getCurrentPlatform as getCurrentPlatform2, handleKeyboardEvent } from "@noya-app/noya-keymap";
-import React57, {
+import React58, {
   forwardRef as forwardRef21,
   useCallback as useCallback26,
-  useEffect as useEffect19,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo24,
   useRef as useRef22,
@@ -7042,7 +7087,7 @@ import React57, {
 } from "react";
 
 // src/components/Divider.tsx
-import React56, { memo as memo20 } from "react";
+import React57, { memo as memo20 } from "react";
 var Divider = memo20(function Divider2({
   variant = "normal",
   overflow = 0,
@@ -7050,7 +7095,7 @@ var Divider = memo20(function Divider2({
   style: style2,
   ...props
 }) {
-  return /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React57.createElement(
     "div",
     {
       className: cx(
@@ -7077,7 +7122,7 @@ var DividerVertical = memo20(function DividerVertical2({
   style: style2,
   ...props
 }) {
-  return /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React57.createElement(
     "div",
     {
       className: cx(`
@@ -7111,9 +7156,9 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
     index: 0
   });
   const { index, search } = state;
-  const listRef = React57.useRef(null);
+  const listRef = React58.useRef(null);
   const hasCheckedItems = items.some((item) => item.checked);
-  useEffect19(() => {
+  useEffect20(() => {
     listRef.current?.scrollToIndex(index);
   }, [index]);
   const results = useMemo24(
@@ -7134,7 +7179,7 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
   const setIndex = useCallback26((index2) => {
     setState((state2) => ({ ...state2, index: index2 }));
   }, []);
-  useEffect19(() => {
+  useEffect20(() => {
     onHover?.(results[index]);
   }, [index, onHover, results]);
   const searchHeight = 31;
@@ -7190,7 +7235,7 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
       inputRef.current?.focus();
     }
   }));
-  return /* @__PURE__ */ React57.createElement("div", { ...elementSize, className: "flex flex-col overflow-hidden" }, /* @__PURE__ */ React57.createElement(InputField2.Root, { className: "flex flex-0" }, /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement("div", { ...elementSize, className: "flex flex-col overflow-hidden" }, /* @__PURE__ */ React58.createElement(InputField2.Root, { className: "flex flex-0" }, /* @__PURE__ */ React58.createElement(
     InputField2.Input,
     {
       ref: inputRef,
@@ -7210,7 +7255,7 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
       onChange: setSearch,
       onKeyDown: handleKeyDown
     }
-  )), /* @__PURE__ */ React57.createElement(Divider, null), results.length > 0 ? /* @__PURE__ */ React57.createElement(
+  )), /* @__PURE__ */ React58.createElement(Divider, null), results.length > 0 ? /* @__PURE__ */ React58.createElement(
     ComboboxMenu,
     {
       ref: listRef,
@@ -7225,13 +7270,13 @@ var SearchCompletionMenu = forwardRef21(function SearchCompletionMenu2({
       onHoverIndex: setIndex,
       indented: hasCheckedItems
     }
-  ) : /* @__PURE__ */ React57.createElement(
+  ) : /* @__PURE__ */ React58.createElement(
     "div",
     {
       ...listSize,
       className: "flex flex-col p-20 items-center justify-center"
     },
-    /* @__PURE__ */ React57.createElement(Small, { color: "textDisabled" }, "No results")
+    /* @__PURE__ */ React58.createElement(Small, { color: "textDisabled" }, "No results")
   ));
 });
 
@@ -7243,11 +7288,11 @@ var CommandPalette = memo21(function CommandPalette2({
   onSelect,
   onHover
 }) {
-  const menuRef = React58.useRef(null);
-  const handleClose = React58.useCallback(() => {
+  const menuRef = React59.useRef(null);
+  const handleClose = React59.useCallback(() => {
     setShowCommandPalette(false);
   }, [setShowCommandPalette]);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     Dialog,
     {
       style: {
@@ -7273,7 +7318,7 @@ var CommandPalette = memo21(function CommandPalette2({
         }, 0);
       }
     },
-    /* @__PURE__ */ React58.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ React58.createElement(AutoSizer, null, (size2) => /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React59.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ React59.createElement(AutoSizer, null, (size2) => /* @__PURE__ */ React59.createElement(
       SearchCompletionMenu,
       {
         ref: menuRef,
@@ -7288,21 +7333,21 @@ var CommandPalette = memo21(function CommandPalette2({
 });
 
 // src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx
-import React59 from "react";
-var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ React59.createElement(
+import React60 from "react";
+var UserAvatar = ({ userId, name, image }) => /* @__PURE__ */ React60.createElement(
   Tooltip,
   {
     key: userId,
-    content: /* @__PURE__ */ React59.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React59.createElement(Small, null, name))
+    content: /* @__PURE__ */ React60.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React60.createElement(Small, null, name))
   },
-  /* @__PURE__ */ React59.createElement(Avatar, { size: INPUT_HEIGHT, userId, name, image })
+  /* @__PURE__ */ React60.createElement(Avatar, { size: INPUT_HEIGHT, userId, name, image })
 );
 var ConnectedUsersMenuLayout = ({
   renderUsers,
   launchAIAssistant,
   isAssistantOpen
 }) => {
-  return /* @__PURE__ */ React59.createElement("div", { className: "flex gap-1.5" }, /* @__PURE__ */ React59.createElement(AvatarStack, { size: INPUT_HEIGHT, className: "mr-1" }, renderUsers()), launchAIAssistant && /* @__PURE__ */ React59.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React60.createElement("div", { className: "flex gap-1.5" }, /* @__PURE__ */ React60.createElement(AvatarStack, { size: INPUT_HEIGHT, className: "mr-1" }, renderUsers()), launchAIAssistant && /* @__PURE__ */ React60.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ React60.createElement(
     Button_default,
     {
       active: isAssistantOpen,
@@ -7315,7 +7360,7 @@ var ConnectedUsersMenuLayout = ({
 
 // src/components/DraggableMenuButton.tsx
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import React60, { useCallback as useCallback27, useState as useState26 } from "react";
+import React61, { useCallback as useCallback27, useState as useState26 } from "react";
 var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
   items,
   onSelect,
@@ -7361,7 +7406,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     },
     [setOpen]
   );
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React61.createElement(
     "div",
     {
       className: cx(
@@ -7377,7 +7422,7 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onClick?.();
       }
     },
-    items && onSelect ? /* @__PURE__ */ React60.createElement(
+    items && onSelect ? /* @__PURE__ */ React61.createElement(
       DropdownMenu,
       {
         open,
@@ -7386,13 +7431,13 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ React60.createElement("div", { className: "pointer-events-none h-[15px]" }, /* @__PURE__ */ React60.createElement(
+      /* @__PURE__ */ React61.createElement("div", { className: "pointer-events-none h-[15px]" }, /* @__PURE__ */ React61.createElement(
         DragHandleDots2Icon,
         {
           color: isVisible || open ? cssVars.colors.icon : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ React60.createElement(
+    ) : /* @__PURE__ */ React61.createElement(
       DragHandleDots2Icon,
       {
         color: isVisible || open ? cssVars.colors.icon : "transparent"
@@ -7403,10 +7448,10 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
 
 // src/components/Drawer.tsx
 import * as Dialog3 from "@radix-ui/react-dialog";
-import * as React61 from "react";
+import * as React62 from "react";
 import { useImperativeHandle as useImperativeHandle8 } from "react";
-var Drawer = React61.memo(
-  React61.forwardRef(function Drawer2({
+var Drawer = React62.memo(
+  React62.forwardRef(function Drawer2({
     open,
     onOpenChange,
     trigger,
@@ -7436,7 +7481,7 @@ var Drawer = React61.memo(
         return internalOpen;
       }
     }));
-    const inner = /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(
+    const inner = /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
       Dialog3.Overlay,
       {
         className: cx(
@@ -7444,7 +7489,7 @@ var Drawer = React61.memo(
           positioning === "absolute" ? "absolute" : "fixed"
         )
       }
-    ), /* @__PURE__ */ React61.createElement(
+    ), /* @__PURE__ */ React62.createElement(
       Dialog3.Content,
       {
         id,
@@ -7456,24 +7501,24 @@ var Drawer = React61.memo(
           className
         )
       },
-      title && /* @__PURE__ */ React61.createElement(Dialog3.Title, null, title),
+      title && /* @__PURE__ */ React62.createElement(Dialog3.Title, null, title),
       children
     ));
-    return /* @__PURE__ */ React61.createElement(
+    return /* @__PURE__ */ React62.createElement(
       Dialog3.Root,
       {
         key: "dialog",
         open: internalOpen,
         onOpenChange: setInternalOpen
       },
-      /* @__PURE__ */ React61.createElement(Dialog3.Trigger, { key: "trigger" }, trigger),
-      portalled ? /* @__PURE__ */ React61.createElement(Dialog3.Portal, { container: portalContainer }, inner) : inner
+      /* @__PURE__ */ React62.createElement(Dialog3.Trigger, { key: "trigger" }, trigger),
+      portalled ? /* @__PURE__ */ React62.createElement(Dialog3.Portal, { container: portalContainer }, inner) : inner
     );
   })
 );
 
 // src/components/Fade.tsx
-import React62 from "react";
+import React63 from "react";
 var Fade = ({
   children,
   direction = "right",
@@ -7495,7 +7540,7 @@ var Fade = ({
     top: "left-0 right-0 top-0",
     bottom: "left-0 right-0 bottom-0"
   }[direction];
-  return /* @__PURE__ */ React62.createElement("div", { className: cx("relative", className), style: { height } }, position === "front" ? children : null, /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement("div", { className: cx("relative", className), style: { height } }, position === "front" ? children : null, /* @__PURE__ */ React63.createElement(
     "div",
     {
       className: cx(
@@ -7514,17 +7559,17 @@ var Fade = ({
 };
 
 // src/components/file-explorer/FileExplorerLayout.tsx
-import React63 from "react";
+import React64 from "react";
 var FileExplorerLayout = ({
   children,
   className,
   ...props
-}) => /* @__PURE__ */ React63.createElement(Section, { className: cx(className, "px-3 flex-1"), ...props }, children);
+}) => /* @__PURE__ */ React64.createElement(Section, { className: cx(className, "px-3 flex-1"), ...props }, children);
 var FileExplorerUploadButton = ({
   showUploadButton,
   onUpload,
   children
-}) => /* @__PURE__ */ React63.createElement("div", { className: "flex items-center gap-2" }, showUploadButton && /* @__PURE__ */ React63.createElement(
+}) => /* @__PURE__ */ React64.createElement("div", { className: "flex items-center gap-2" }, showUploadButton && /* @__PURE__ */ React64.createElement(
   IconButton,
   {
     iconName: "UploadIcon",
@@ -7535,14 +7580,14 @@ var FileExplorerUploadButton = ({
 ), children);
 var FileExplorerCollection = forwardRefGeneric(
   function FileExplorerCollection2({ ...props }, ref) {
-    return /* @__PURE__ */ React63.createElement(Collection, { ref, className: "-mx-3 flex-1", ...props });
+    return /* @__PURE__ */ React64.createElement(Collection, { ref, className: "-mx-3 flex-1", ...props });
   }
 );
 var FileExplorerDetail = ({
   selected,
   size: size2,
   children
-}) => /* @__PURE__ */ React63.createElement(
+}) => /* @__PURE__ */ React64.createElement(
   "span",
   {
     className: cx(
@@ -7555,10 +7600,10 @@ var FileExplorerDetail = ({
 var FileExplorerEmptyState = ({
   label = "No files",
   ...props
-}) => /* @__PURE__ */ React63.createElement(Banner, { label, className: "mx-3", ...props });
+}) => /* @__PURE__ */ React64.createElement(Banner, { label, className: "mx-3", ...props });
 
 // src/components/FillInputField.tsx
-import React66, { forwardRef as forwardRef23, memo as memo25 } from "react";
+import React67, { forwardRef as forwardRef23, memo as memo25 } from "react";
 
 // ../noya-file-format/src/types.ts
 var types_exports = {};
@@ -7883,25 +7928,25 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 
 // src/components/FillPreviewBackground.tsx
-import * as React65 from "react";
+import * as React66 from "react";
 
 // src/contexts/ImageDataContext.tsx
-import * as React64 from "react";
-var ImageDataContext = React64.createContext(
+import * as React65 from "react";
+var ImageDataContext = React65.createContext(
   void 0
 );
-var ImageDataProvider = React64.memo(function ImageDataProvider2({
+var ImageDataProvider = React65.memo(function ImageDataProvider2({
   children,
   getImageData
 }) {
-  const contextValue = React64.useMemo(
+  const contextValue = React65.useMemo(
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ React64.createElement(ImageDataContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React65.createElement(ImageDataContext.Provider, { value: contextValue }, children);
 });
 function useImageData(ref) {
-  const value = React64.useContext(ImageDataContext);
+  const value = React65.useContext(ImageDataContext);
   if (!value) {
     throw new Error("Missing ImageDataProvider");
   }
@@ -7909,14 +7954,14 @@ function useImageData(ref) {
 }
 
 // src/hooks/useObjectURL.ts
-import { useLayoutEffect as useLayoutEffect6, useMemo as useMemo26 } from "react";
+import { useLayoutEffect as useLayoutEffect7, useMemo as useMemo26 } from "react";
 function useObjectURL(object) {
   const objectURL = useMemo26(() => {
     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]);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     return () => URL.revokeObjectURL(objectURL);
   }, [objectURL]);
   return objectURL;
@@ -7971,10 +8016,10 @@ 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 = React65.memo(function Background2({
+var Background = React66.memo(function Background2({
   background: background2
 }) {
-  return /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React66.createElement(
     "span",
     {
       className: `${background2 ? `bg-[${background2}]` : "bg-input-background"} absolute inset-0`
@@ -7993,7 +8038,7 @@ function getPatternSizeAndPosition(fillType, tileScale) {
       return "center / 100% 100%";
   }
 }
-var PatternPreviewBackground = React65.memo(
+var PatternPreviewBackground = React66.memo(
   function PatternPreviewBackground2({
     fillType,
     tileScale,
@@ -8002,7 +8047,7 @@ var PatternPreviewBackground = React65.memo(
     const image = useImageData(imageRef);
     const url = useObjectURL(image);
     const size2 = getPatternSizeAndPosition(fillType, tileScale);
-    const background2 = React65.useMemo(
+    const background2 = React66.useMemo(
       () => [
         size2,
         `url(${url})`,
@@ -8010,44 +8055,44 @@ var PatternPreviewBackground = React65.memo(
       ].join(" "),
       [fillType, size2, url]
     );
-    return /* @__PURE__ */ React65.createElement(Background, { background: background2 });
+    return /* @__PURE__ */ React66.createElement(Background, { background: background2 });
   }
 );
-var ColorPreviewBackground = React65.memo(function ColorPreviewBackground2({
+var ColorPreviewBackground = React66.memo(function ColorPreviewBackground2({
   color
 }) {
-  const background2 = React65.useMemo(
+  const background2 = React66.useMemo(
     () => sketchColorToRgbaString(color),
     [color]
   );
-  return /* @__PURE__ */ React65.createElement(Background, { background: background2 });
+  return /* @__PURE__ */ React66.createElement(Background, { background: background2 });
 });
-var GradientPreviewBackground = React65.memo(
+var GradientPreviewBackground = React66.memo(
   function GradientPreviewBackground2({
     gradient
   }) {
-    const background2 = React65.useMemo(
+    const background2 = React66.useMemo(
       () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
       [gradient.gradientType, gradient.stops]
     );
-    return /* @__PURE__ */ React65.createElement(Background, { background: background2 });
+    return /* @__PURE__ */ React66.createElement(Background, { background: background2 });
   }
 );
 var background = `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
   cssVars.colors.placeholderDots
 )}") no-repeat`;
-var FillPreviewBackground = React65.memo(function FillPreviewBackground2({
+var FillPreviewBackground = React66.memo(function FillPreviewBackground2({
   value
 }) {
-  if (!value) return /* @__PURE__ */ React65.createElement(Background, { background });
+  if (!value) return /* @__PURE__ */ React66.createElement(Background, { background });
   switch (value._class) {
     case "color":
-      return /* @__PURE__ */ React65.createElement(ColorPreviewBackground, { color: value });
+      return /* @__PURE__ */ React66.createElement(ColorPreviewBackground, { color: value });
     case "gradient":
-      return /* @__PURE__ */ React65.createElement(GradientPreviewBackground, { gradient: value });
+      return /* @__PURE__ */ React66.createElement(GradientPreviewBackground, { gradient: value });
     case "pattern":
       if (!value.image) return null;
-      return /* @__PURE__ */ React65.createElement(
+      return /* @__PURE__ */ React66.createElement(
         PatternPreviewBackground,
         {
           fillType: value.patternFillType,
@@ -8059,7 +8104,7 @@ var FillPreviewBackground = React65.memo(function FillPreviewBackground2({
 });
 
 // src/components/FillInputField.tsx
-var FillButton = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React66.createElement(
+var FillButton = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React67.createElement(
   "button",
   {
     ref,
@@ -8072,12 +8117,12 @@ var FillButton = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */
 ));
 var FillInputField = memo25(
   forwardRef23(function FillInputField2({ id, value, ...rest }, ref) {
-    return /* @__PURE__ */ React66.createElement(FillButton, { ref, id, ...rest }, /* @__PURE__ */ React66.createElement(FillPreviewBackground, { value }));
+    return /* @__PURE__ */ React67.createElement(FillButton, { ref, id, ...rest }, /* @__PURE__ */ React67.createElement(FillPreviewBackground, { value }));
   })
 );
 
 // src/components/FloatingWindow.tsx
-import React67, { useCallback as useCallback28, useRef as useRef23, useState as useState27 } from "react";
+import React68, { useCallback as useCallback28, useRef as useRef23, useState as useState27 } from "react";
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -8170,7 +8215,7 @@ function defaultRenderToolbar({
   toolbarContent,
   onClose
 }) {
-  return /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(Small, { className: "flex-1 font-medium text-text" }, title), toolbarContent, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(React68.Fragment, null, /* @__PURE__ */ React68.createElement(Small, { className: "flex-1 font-medium text-text" }, title), toolbarContent, /* @__PURE__ */ React68.createElement(
     IconButton,
     {
       iconName: "Cross3Icon",
@@ -8292,7 +8337,7 @@ var FloatingWindow = ({
     setResizeDirection(null);
     toggleGlobalTextSelection(false);
   }, []);
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -8306,7 +8351,7 @@ var FloatingWindow = ({
     if (onClose) onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -8321,7 +8366,7 @@ var FloatingWindow = ({
         zIndex: cssVars.zIndex.menu
       }
     },
-    /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React68.createElement(
       "div",
       {
         style: {
@@ -8332,9 +8377,9 @@ var FloatingWindow = ({
       },
       renderToolbar({ title, toolbarContent, onClose: handleClose })
     ),
-    /* @__PURE__ */ React67.createElement(Divider, null),
-    /* @__PURE__ */ React67.createElement("div", { style: styles2.content }, children),
-    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React68.createElement(Divider, null),
+    /* @__PURE__ */ React68.createElement("div", { style: styles2.content }, children),
+    Object.entries(resizeHandlePositions).map(([direction, style2]) => /* @__PURE__ */ React68.createElement(
       "div",
       {
         key: direction,
@@ -8356,8 +8401,8 @@ import {
   hsvaToRgba,
   rgbaToHsva as rgbaToHsva2
 } from "@noya-app/noya-colorpicker";
-import * as React68 from "react";
-var GradientPicker = React68.memo(function GradientPicker2({
+import * as React69 from "react";
+var GradientPicker = React69.memo(function GradientPicker2({
   value,
   selectedStop,
   onChangeColor,
@@ -8366,7 +8411,7 @@ var GradientPicker = React68.memo(function GradientPicker2({
   onDelete,
   onSelectStop
 }) {
-  const colorModel = React68.useMemo(
+  const colorModel = React69.useMemo(
     () => ({
       defaultColor: { r: 0, g: 0, b: 0, a: 1 },
       toHsva: rgbaToHsva2,
@@ -8375,30 +8420,30 @@ var GradientPicker = React68.memo(function GradientPicker2({
     }),
     []
   );
-  const rgbaColor = React68.useMemo(
+  const rgbaColor = React69.useMemo(
     () => sketchColorToRgba(value[selectedStop].color),
     [value, selectedStop]
   );
-  const handleChangeColor = React68.useCallback(
+  const handleChangeColor = React69.useCallback(
     (value2) => {
       onChangeColor(rgbaToSketchColor(value2));
     },
     [onChangeColor]
   );
-  const handleAddGradientStop = React68.useCallback(
+  const handleAddGradientStop = React69.useCallback(
     (value2, position) => {
       onAdd(rgbaToSketchColor(value2), position);
     },
     [onAdd]
   );
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement(
     NoyaColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(
       Gradient,
       {
         gradients: value,
@@ -8409,17 +8454,17 @@ var GradientPicker = React68.memo(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ React68.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ React68.createElement(Saturation, null),
-    /* @__PURE__ */ React68.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ React68.createElement(Hue, null),
-    /* @__PURE__ */ React68.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ React68.createElement(Alpha, null)
+    /* @__PURE__ */ React69.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ React69.createElement(Saturation, null),
+    /* @__PURE__ */ React69.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ React69.createElement(Hue, null),
+    /* @__PURE__ */ React69.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ React69.createElement(Alpha, null)
   );
 });
 
 // src/components/InspectorContainer.tsx
-import React69, { forwardRef as forwardRef24, memo as memo27 } from "react";
+import React70, { forwardRef as forwardRef24, memo as memo27 } from "react";
 var InspectorContainer = memo27(
   forwardRef24(function InspectorContainer2({
     header,
@@ -8430,7 +8475,7 @@ var InspectorContainer = memo27(
     className,
     style: style2
   }, forwardedRef) {
-    return /* @__PURE__ */ React69.createElement(
+    return /* @__PURE__ */ React70.createElement(
       "div",
       {
         ref: forwardedRef,
@@ -8445,32 +8490,32 @@ var InspectorContainer = memo27(
         }
       },
       header,
-      children ? /* @__PURE__ */ React69.createElement(ScrollArea, null, /* @__PURE__ */ React69.createElement("div", { className: "flex flex-col relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ React69.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ React69.createElement("div", { className: "flex flex-col relative h-full" }, fallback) : null
+      children ? /* @__PURE__ */ React70.createElement(ScrollArea, null, /* @__PURE__ */ React70.createElement("div", { className: "flex flex-col relative" }, showDividers ? withSeparatorElements(children, /* @__PURE__ */ React70.createElement(Divider, null)) : children)) : fallback ? /* @__PURE__ */ React70.createElement("div", { className: "flex flex-col relative h-full" }, fallback) : null
     );
   })
 );
 
 // src/components/LabeledElementView.tsx
 import * as kiwi from "kiwi.js";
-import * as React70 from "react";
-var LabeledElementView = React70.memo(function LabeledElementView2({
+import * as React71 from "react";
+var LabeledElementView = React71.memo(function LabeledElementView2({
   children,
   renderLabel
 }) {
-  const elementIds = React70.Children.toArray(children).flatMap(
-    (child) => React70.isValidElement(child) && child.type === React70.Fragment ? child.props.children : [child]
+  const elementIds = React71.Children.toArray(children).flatMap(
+    (child) => React71.isValidElement(child) && child.type === React71.Fragment ? child.props.children : [child]
   ).map(
-    (child) => React70.isValidElement(child) && "id" in child.props ? child.props.id : null
+    (child) => React71.isValidElement(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = React70.useRef(null);
-  const refs = React70.useMemo(() => {
+  const containerRef = React71.useRef(null);
+  const refs = React71.useMemo(() => {
     return Object.fromEntries(
-      serializedIds.split(",").map((id) => [id, React70.createRef()])
+      serializedIds.split(",").map((id) => [id, React71.createRef()])
     );
   }, [serializedIds]);
-  const labelElements = React70.useMemo(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React70.createElement(
+  const labelElements = React71.useMemo(() => {
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React71.createElement(
       "span",
       {
         key: id,
@@ -8483,7 +8528,7 @@ var LabeledElementView = React70.memo(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  React70.useLayoutEffect(() => {
+  React71.useLayoutEffect(() => {
     if (!containerRef.current) return;
     const containerRect = containerRef.current.getBoundingClientRect();
     const solver = new kiwi.Solver();
@@ -8545,19 +8590,19 @@ var LabeledElementView = React70.memo(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ React70.createElement("div", { className: "flex flex-1 flex-col relative", ref: containerRef }, /* @__PURE__ */ React70.createElement("div", { className: "flex flex-1 items-center" }, children), /* @__PURE__ */ React70.createElement("div", { className: "relative overflow-hidden select-none" }, labelElements));
+  return /* @__PURE__ */ React71.createElement("div", { className: "flex flex-1 flex-col relative", ref: containerRef }, /* @__PURE__ */ React71.createElement("div", { className: "flex flex-1 items-center" }, children), /* @__PURE__ */ React71.createElement("div", { className: "relative overflow-hidden select-none" }, labelElements));
 });
 
 // src/components/LabeledField.tsx
-import React72, { memo as memo29, useMemo as useMemo30 } from "react";
+import React73, { memo as memo29, useMemo as useMemo30 } from "react";
 
 // src/hooks/useIndent.ts
-import React71 from "react";
-var IndentContext = React71.createContext({
+import React72 from "react";
+var IndentContext = React72.createContext({
   indentLevel: 0
 });
 var useIndent = () => {
-  const { indentLevel } = React71.useContext(IndentContext);
+  const { indentLevel } = React72.useContext(IndentContext);
   return indentLevel;
 };
 
@@ -8616,7 +8661,7 @@ var LabeledField = memo29(function LabeledField2({
     }),
     [labelWidth, indentLevel, labelStyleProp]
   );
-  return /* @__PURE__ */ React72.createElement(LabelContext.Provider, { value: labelContextValue }, labelPosition === "inset" ? /* @__PURE__ */ React72.createElement(LabelPositionContext.Provider, { value: labelPositionInset }, children) : /* @__PURE__ */ React72.createElement("div", { className: cx("flex relative flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ React72.createElement("div", { style: indentStyle }), /* @__PURE__ */ React72.createElement("div", { className: labeledFieldClasses }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React73.createElement(LabelContext.Provider, { value: labelContextValue }, labelPosition === "inset" ? /* @__PURE__ */ React73.createElement(LabelPositionContext.Provider, { value: labelPositionInset }, children) : /* @__PURE__ */ React73.createElement("div", { className: cx("flex relative flex-1", className), style: style2 }, Boolean(indentLevel) && /* @__PURE__ */ React73.createElement("div", { style: indentStyle }), /* @__PURE__ */ React73.createElement("div", { className: labeledFieldClasses }, /* @__PURE__ */ React73.createElement(
     Label,
     {
       htmlFor: fieldId,
@@ -8625,7 +8670,7 @@ var LabeledField = memo29(function LabeledField2({
       ...props
     },
     label
-  ), labelPosition === "start" ? /* @__PURE__ */ React72.createElement("div", { className: "flex-auto flex", style: fieldStyle }, children) : children)));
+  ), labelPosition === "start" ? /* @__PURE__ */ React73.createElement("div", { className: "flex-auto flex", style: fieldStyle }, children) : children)));
 });
 
 // src/components/MediaThumbnail.tsx
@@ -8635,7 +8680,7 @@ import {
   SpeakerLoudIcon,
   VideoIcon
 } from "@noya-app/noya-icons";
-import React73, { memo as memo30, useMemo as useMemo31 } from "react";
+import React74, { memo as memo30, useMemo as useMemo31 } from "react";
 
 // src/components/catppuccin/fileIcons.ts
 var fileIcons = {
@@ -11100,8 +11145,8 @@ var MediaThumbnail = memo30(function MediaThumbnail2({
   const content = useMemo31(() => {
     switch (contentType) {
       case "image":
-        if (!url) return /* @__PURE__ */ React73.createElement(ImageIcon, { color: iconColor, style: iconStyles });
-        return /* @__PURE__ */ React73.createElement(
+        if (!url) return /* @__PURE__ */ React74.createElement(ImageIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React74.createElement(
           "img",
           {
             src: url,
@@ -11111,18 +11156,18 @@ var MediaThumbnail = memo30(function MediaThumbnail2({
           }
         );
       case "video":
-        return /* @__PURE__ */ React73.createElement(VideoIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React74.createElement(VideoIcon, { color: iconColor, style: iconStyles });
       case "audio":
-        return /* @__PURE__ */ React73.createElement(SpeakerLoudIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React74.createElement(SpeakerLoudIcon, { color: iconColor, style: iconStyles });
       default:
         if (iconName) {
           const Icon = Icons[iconName];
-          return /* @__PURE__ */ React73.createElement(Icon, { color: iconColor, style: iconStyles });
+          return /* @__PURE__ */ React74.createElement(Icon, { color: iconColor, style: iconStyles });
         }
         if (fileName) {
           const fileIcon = findFileIcon(fileName);
           if (fileIcon) {
-            return /* @__PURE__ */ React73.createElement(
+            return /* @__PURE__ */ React74.createElement(
               "img",
               {
                 src: `https://api.iconify.design/catppuccin/${fileIcon}.svg?height=none&box=1`,
@@ -11132,10 +11177,10 @@ var MediaThumbnail = memo30(function MediaThumbnail2({
             );
           }
         }
-        return /* @__PURE__ */ React73.createElement(FileIcon, { color: iconColor, style: iconStyles });
+        return /* @__PURE__ */ React74.createElement(FileIcon, { color: iconColor, style: iconStyles });
     }
   }, [contentType, url, iconColor, iconStyles, iconName, fileName]);
-  return /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React74.createElement(
     "div",
     {
       className: cx(
@@ -11166,7 +11211,7 @@ function findFileIcon(fileName) {
 }
 
 // src/components/Message.tsx
-import React74, { forwardRef as forwardRef25, memo as memo31, useMemo as useMemo32 } from "react";
+import React75, { forwardRef as forwardRef25, memo as memo31, useMemo as useMemo32 } from "react";
 var Message = memo31(
   forwardRef25(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
     const randomId = crypto.randomUUID();
@@ -11177,7 +11222,7 @@ var Message = memo31(
       } : void 0,
       [userMessageBackgroundColor, role]
     );
-    return /* @__PURE__ */ React74.createElement(
+    return /* @__PURE__ */ React75.createElement(
       "div",
       {
         className: cx(
@@ -11185,15 +11230,15 @@ var Message = memo31(
           role === "user" ? "flex-row-reverse" : "flex-row"
         )
       },
-      role === "assistant" ? /* @__PURE__ */ React74.createElement(
+      role === "assistant" ? /* @__PURE__ */ React75.createElement(
         Avatar,
         {
           name: "Assistant",
           size: avatarSize,
           backgroundColor: cssVars.colors.primaryPastel
         },
-        /* @__PURE__ */ React74.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
-      ) : /* @__PURE__ */ React74.createElement(
+        /* @__PURE__ */ React75.createElement(Logo, { style: { width: 15 }, fill: cssVars.colors.primary })
+      ) : /* @__PURE__ */ React75.createElement(
         Avatar,
         {
           userId: !user ? randomId : user?.id,
@@ -11202,7 +11247,7 @@ var Message = memo31(
           size: avatarSize
         }
       ),
-      /* @__PURE__ */ React74.createElement(
+      /* @__PURE__ */ React75.createElement(
         "div",
         {
           className: cx(
@@ -11212,7 +11257,7 @@ var Message = memo31(
           style: styles3,
           ref
         },
-        /* @__PURE__ */ React74.createElement(
+        /* @__PURE__ */ React75.createElement(
           Text,
           {
             variant: "small",
@@ -11227,9 +11272,9 @@ var Message = memo31(
 
 // src/components/pipeline/PipelineResultLayout.tsx
 import { Link1Icon } from "@noya-app/noya-icons";
-import React75 from "react";
+import React76 from "react";
 var PipelineResultLink = ({ url }) => {
-  return /* @__PURE__ */ React75.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React76.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React76.createElement(
     "a",
     {
       href: url,
@@ -11237,15 +11282,15 @@ var PipelineResultLink = ({ url }) => {
       rel: "noopener noreferrer",
       className: "flex text-primary hover:opacity-80 border border-divider rounded-md"
     },
-    /* @__PURE__ */ React75.createElement("div", { className: "flex gap-1 items-center p-2" }, /* @__PURE__ */ React75.createElement(Link1Icon, { className: "w-[15px] h-[15px] flex-shrink-0" })),
-    /* @__PURE__ */ React75.createElement(DividerVertical, null),
-    /* @__PURE__ */ React75.createElement(Small, { className: "truncate p-2 flex-1" }, url)
+    /* @__PURE__ */ React76.createElement("div", { className: "flex gap-1 items-center p-2" }, /* @__PURE__ */ React76.createElement(Link1Icon, { className: "w-[15px] h-[15px] flex-shrink-0" })),
+    /* @__PURE__ */ React76.createElement(DividerVertical, null),
+    /* @__PURE__ */ React76.createElement(Small, { className: "truncate p-2 flex-1" }, url)
   ));
 };
 var PipelineResultLayout = ({
   children
 }) => {
-  return /* @__PURE__ */ React75.createElement("div", { className: "flex flex-col gap-2" }, children);
+  return /* @__PURE__ */ React76.createElement("div", { className: "flex flex-col gap-2" }, children);
 };
 function getPipelineResultLink(value) {
   if (typeof value !== "object" || value === null) return void 0;
@@ -11261,27 +11306,27 @@ function getPipelineResultLink(value) {
 // src/components/Progress.tsx
 import { clamp } from "@noya-app/noya-utils";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React76 from "react";
+import * as React77 from "react";
 function Progress({
   value,
   variant = "normal",
   className
 }) {
   const clampedValue = clamp(value, 0, 100);
-  const transformStyles = React76.useMemo(
+  const transformStyles = React77.useMemo(
     () => ({
       transform: `translateX(-${100 - clampedValue}%)`
     }),
     [clampedValue]
   );
-  return /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React77.createElement(
     ProgressPrimitive.Root,
     {
       className: cx(`relative hidden bg-input-background h-[5px] `, className),
       style: { transform: "translateZ(0)" },
       value: clampedValue
     },
-    /* @__PURE__ */ React76.createElement(
+    /* @__PURE__ */ React77.createElement(
       ProgressPrimitive.Indicator,
       {
         className: `${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`,
@@ -11292,7 +11337,7 @@ function Progress({
 }
 
 // src/components/Section.tsx
-import React77, { memo as memo32, useMemo as useMemo34 } from "react";
+import React78, { memo as memo32, useMemo as useMemo34 } from "react";
 var titleIconStyle = {
   marginRight: "8px",
   alignSelf: "flex-start",
@@ -11327,7 +11372,7 @@ var SectionInternal = ({
     }),
     [titleTextStyle, title, extraPadding, styleProp]
   );
-  const hasChildren = React77.Children.toArray(children).some((child) => !!child);
+  const hasChildren = React78.Children.toArray(children).some((child) => !!child);
   const headerStyle = useMemo34(
     () => ({
       marginBottom: hasChildren ? "4px" : void 0,
@@ -11335,7 +11380,7 @@ var SectionInternal = ({
     }),
     [hasChildren]
   );
-  return /* @__PURE__ */ React77.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ React77.createElement(InspectorPrimitives_exports.SectionHeader, { style: headerStyle }, titleIcon && /* @__PURE__ */ React77.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, titleIconOptions.inlineBlockWrapper ? /* @__PURE__ */ React77.createElement("div", { style: titleIconWrapperStyle }, titleIcon) : titleIcon), title && /* @__PURE__ */ React77.createElement(React77.Fragment, null, onClickTitle ? /* @__PURE__ */ React77.createElement(Button, { variant: "none", onClick: onClickTitle }, /* @__PURE__ */ React77.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)) : /* @__PURE__ */ React77.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)), /* @__PURE__ */ React77.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React77.createElement(IndentContext.Provider, { value: { indentLevel: 1 } }, children));
+  return /* @__PURE__ */ React78.createElement("div", { style: style2, className }, (title || titleIcon || right) && /* @__PURE__ */ React78.createElement(InspectorPrimitives_exports.SectionHeader, { style: headerStyle }, titleIcon && /* @__PURE__ */ React78.createElement("div", { style: titleIconStyle, className: textStyles[titleTextStyle] }, titleIconOptions.inlineBlockWrapper ? /* @__PURE__ */ React78.createElement("div", { style: titleIconWrapperStyle }, titleIcon) : titleIcon), title && /* @__PURE__ */ React78.createElement(React78.Fragment, null, onClickTitle ? /* @__PURE__ */ React78.createElement(Button, { variant: "none", onClick: onClickTitle }, /* @__PURE__ */ React78.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)) : /* @__PURE__ */ React78.createElement(InspectorPrimitives_exports.Title, { $textStyle: titleTextStyle }, title)), /* @__PURE__ */ React78.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React78.createElement(IndentContext.Provider, { value: { indentLevel: 1 } }, children));
 };
 var ExpandableSection = ({
   storageKey,
@@ -11348,12 +11393,12 @@ var ExpandableSection = ({
     initialVisibility
   );
   const expanded = visibility === "show";
-  return /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement(
     SectionInternal,
     {
       ...props,
       right: !props.hideRightWhenCollapsed || expanded ? props.right : null,
-      title: /* @__PURE__ */ React77.createElement("div", { className: "flex gap-1 items-center" }, props.title, /* @__PURE__ */ React77.createElement(
+      title: /* @__PURE__ */ React78.createElement("div", { className: "flex gap-1 items-center" }, props.title, /* @__PURE__ */ React78.createElement(
         IconButton,
         {
           iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
@@ -11368,12 +11413,12 @@ var Section = memo32(function InspectorSection({
   storageKey,
   ...props
 }) {
-  return storageKey ? /* @__PURE__ */ React77.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ React77.createElement(SectionInternal, { ...props });
+  return storageKey ? /* @__PURE__ */ React78.createElement(ExpandableSection, { ...props, storageKey }) : /* @__PURE__ */ React78.createElement(SectionInternal, { ...props });
 });
 
 // src/components/SegmentedControl.tsx
 import * as ToggleGroupPrimitive2 from "@radix-ui/react-toggle-group";
-import React78, {
+import React79, {
   createContext as createContext13,
   forwardRef as forwardRef26,
   useCallback as useCallback30,
@@ -11394,7 +11439,7 @@ var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
   ...props
 }, forwardedRef) {
   const { colorScheme } = useContext14(SegmentedControlContext);
-  const itemElement = /* @__PURE__ */ React78.createElement(
+  const itemElement = /* @__PURE__ */ React79.createElement(
     ToggleGroupPrimitive2.Item,
     {
       ref: forwardedRef,
@@ -11414,7 +11459,7 @@ var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
       ),
       ...props
     },
-    /* @__PURE__ */ React78.createElement(
+    /* @__PURE__ */ React79.createElement(
       "span",
       {
         className: cx(
@@ -11426,7 +11471,7 @@ var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
       title
     )
   );
-  return tooltip ? /* @__PURE__ */ React78.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ React79.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
 var SegmentedControl = memoGeneric(function SegmentedControl2({
   id: idProp,
@@ -11448,7 +11493,7 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ React78.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(SegmentedControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React79.createElement(
     ToggleGroupPrimitive2.Root,
     {
       id,
@@ -11466,13 +11511,13 @@ var SegmentedControl = memoGeneric(function SegmentedControl2({
         gridTemplateColumns: `repeat(${items.length}, 1fr)`
       }
     },
-    items.map((item, index) => /* @__PURE__ */ React78.createElement(SegmentedControlItem, { key: index, ...item, variant }))
+    items.map((item, index) => /* @__PURE__ */ React79.createElement(SegmentedControlItem, { key: index, ...item, variant }))
   ));
 });
 
 // src/components/SelectionToolbar.tsx
 import * as PopperPrimitive from "@radix-ui/react-popper";
-import React79, { memo as memo33, useMemo as useMemo36 } from "react";
+import React80, { memo as memo33, useMemo as useMemo36 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 var createVirtualElement = (rect) => ({
   getBoundingClientRect: () => ({
@@ -11494,7 +11539,7 @@ var SelectionToolbarContainer = memo33(
     portalContainer
   }) {
     const portalScopeId = usePortalScopeId();
-    const containerRef = React79.useRef(null);
+    const containerRef = React80.useRef(null);
     const size2 = useSize(containerRef, "width");
     const virtualRef = useMemo36(
       () => ({
@@ -11502,7 +11547,7 @@ var SelectionToolbarContainer = memo33(
       }),
       [rect]
     );
-    const popperContent = /* @__PURE__ */ React79.createElement(
+    const popperContent = /* @__PURE__ */ React80.createElement(
       PopperPrimitive.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -11519,7 +11564,7 @@ var SelectionToolbarContainer = memo33(
           ["--n-input-background"]: "transparent"
         }
       },
-      /* @__PURE__ */ React79.createElement(
+      /* @__PURE__ */ React80.createElement(
         "div",
         {
           ref: containerRef,
@@ -11532,7 +11577,7 @@ var SelectionToolbarContainer = memo33(
         children
       )
     );
-    return /* @__PURE__ */ React79.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ React79.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? createPortal3(popperContent, portalContainer) : popperContent);
+    return /* @__PURE__ */ React80.createElement(PopperPrimitive.Root, null, /* @__PURE__ */ React80.createElement(PopperPrimitive.Anchor, { virtualRef }), portalContainer ? createPortal3(popperContent, portalContainer) : popperContent);
   }
 );
 
@@ -11543,7 +11588,7 @@ import {
   DropdownChevronIcon as DropdownChevronIcon3
 } from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
-import React80, {
+import React81, {
   useMemo as useMemo37,
   useState as useState28
 } from "react";
@@ -11577,7 +11622,7 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
     fieldId: props.id
   });
   const labelPosition = useLabelPosition();
-  return /* @__PURE__ */ React80.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React81.createElement(Select.SelectTrigger, { asChild: true, onFocus, onBlur }, /* @__PURE__ */ React81.createElement(
     Button,
     {
       id,
@@ -11589,10 +11634,10 @@ var SelectMenuTrigger = memoGeneric(function SelectMenuTrigger2({
       ),
       disabled
     },
-    icon && /* @__PURE__ */ React80.createElement("span", { className: "pr-1.5" }, renderIcon(icon)),
-    label && labelPosition === "inset" && /* @__PURE__ */ React80.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ React80.createElement(Label, { className: "pr-4 text-text-disabled", htmlFor: id }, label)),
-    /* @__PURE__ */ React80.createElement("span", { className: "flex-1 flex" }, /* @__PURE__ */ React80.createElement(Select.Value, { placeholder })),
-    /* @__PURE__ */ React80.createElement(
+    icon && /* @__PURE__ */ React81.createElement("span", { className: "pr-1.5" }, renderIcon(icon)),
+    label && labelPosition === "inset" && /* @__PURE__ */ React81.createElement("div", { className: insetEndStyles }, /* @__PURE__ */ React81.createElement(Label, { className: "pr-4 text-text-disabled", htmlFor: id }, label)),
+    /* @__PURE__ */ React81.createElement("span", { className: "flex-1 flex" }, /* @__PURE__ */ React81.createElement(Select.Value, { placeholder })),
+    /* @__PURE__ */ React81.createElement(
       DropdownChevronIcon3,
       {
         className: cx(
@@ -11641,7 +11686,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
     setInternalOpen(open2);
   };
   const readOnlyButton = useMemo37(
-    () => /* @__PURE__ */ React80.createElement(
+    () => /* @__PURE__ */ React81.createElement(
       Button,
       {
         id,
@@ -11651,7 +11696,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         disabled
       },
       icon && renderIcon(icon),
-      /* @__PURE__ */ React80.createElement("span", { className: "flex flex-1" }, selectedItem?.title ?? value)
+      /* @__PURE__ */ React81.createElement("span", { className: "flex flex-1" }, selectedItem?.title ?? value)
     ),
     [icon, id, style2, className, disabled, value, selectedItem]
   );
@@ -11663,7 +11708,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       ...contentStyleProp
     };
   }, [contentStyleProp]);
-  const content = /* @__PURE__ */ React80.createElement(
+  const content = /* @__PURE__ */ React81.createElement(
     Select.Root,
     {
       value,
@@ -11671,7 +11716,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
       open,
       onOpenChange: handleOpenChange
     },
-    /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React81.createElement(
       SelectMenuTrigger,
       {
         id,
@@ -11686,7 +11731,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         label
       }
     ),
-    /* @__PURE__ */ React80.createElement(Select.Portal, null, /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React81.createElement(Select.Portal, null, /* @__PURE__ */ React81.createElement(
       Select.Content,
       {
         ...portalScopeProps(portalScopeId),
@@ -11697,14 +11742,14 @@ var SelectMenu = memoGeneric(function SelectMenu2({
         align: "center",
         style: contentStyle
       },
-      /* @__PURE__ */ React80.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React80.createElement(
+      /* @__PURE__ */ React81.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React81.createElement(
         ChevronUpIcon,
         {
           className: cx("transition-transform duration-100")
         }
       )),
-      /* @__PURE__ */ React80.createElement(Select.Viewport, null, /* @__PURE__ */ React80.createElement(MenuViewport, { items, Components: Components3 })),
-      /* @__PURE__ */ React80.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ React80.createElement(ChevronDownIcon, null))
+      /* @__PURE__ */ React81.createElement(Select.Viewport, null, /* @__PURE__ */ React81.createElement(MenuViewport, { items, Components: Components3 })),
+      /* @__PURE__ */ React81.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ React81.createElement(ChevronDownIcon, null))
     ))
   );
   return readOnly ? readOnlyButton : content;
@@ -11712,7 +11757,7 @@ var SelectMenu = memoGeneric(function SelectMenu2({
 
 // src/components/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import React81, { memo as memo34, useCallback as useCallback31, useMemo as useMemo38 } from "react";
+import React82, { memo as memo34, useCallback as useCallback31, useMemo as useMemo38 } from "react";
 var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
@@ -11767,7 +11812,7 @@ var Slider = memo34(function Slider2({
     }),
     [percentage.raw]
   );
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     RadixSlider.Root,
     {
       min,
@@ -11785,7 +11830,7 @@ var Slider = memo34(function Slider2({
       onBlur,
       disabled: readOnly
     },
-    /* @__PURE__ */ React81.createElement(RadixSlider.Track, { className: "flex-grow h-full rounded overflow-hidden bg-input-background" }, label && labelPosition === "inset" && /* @__PURE__ */ React81.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React81.createElement(Label, { htmlFor: id, className: "text-text-disabled" }, label)), /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(RadixSlider.Track, { className: "flex-grow h-full rounded overflow-hidden bg-input-background" }, label && labelPosition === "inset" && /* @__PURE__ */ React82.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React82.createElement(Label, { htmlFor: id, className: "text-text-disabled" }, label)), /* @__PURE__ */ React82.createElement(
       "div",
       {
         style: trackFillStyle,
@@ -11796,8 +11841,8 @@ var Slider = memo34(function Slider2({
         )
       }
     )),
-    label && labelPosition === "inset" && colorScheme !== void 0 && /* @__PURE__ */ React81.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React81.createElement(Label, { className: "text-white overflow-hidden", style: labelStyle }, label)),
-    /* @__PURE__ */ React81.createElement(
+    label && labelPosition === "inset" && colorScheme !== void 0 && /* @__PURE__ */ React82.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React82.createElement(Label, { className: "text-white overflow-hidden", style: labelStyle }, label)),
+    /* @__PURE__ */ React82.createElement(
       RadixSlider.Thumb,
       {
         style: thumbStyle,
@@ -11813,27 +11858,27 @@ var Slider = memo34(function Slider2({
 });
 
 // src/components/sorting/createSharedDrag.tsx
-import * as React82 from "react";
+import * as React83 from "react";
 function createSharedDrag() {
-  const dragRegistrationContext = React82.createContext(null);
-  const activeDragContext = React82.createContext(
+  const dragRegistrationContext = React83.createContext(null);
+  const activeDragContext = React83.createContext(
     null
   );
   const sharedDragProps = {
     dragRegistrationContext,
     activeDragContext
   };
-  const Provider3 = ({ children }) => /* @__PURE__ */ React82.createElement(SharedDragProvider, { sharedDragProps }, children);
+  const Provider3 = ({ children }) => /* @__PURE__ */ React83.createElement(SharedDragProvider, { sharedDragProps }, children);
   return {
     Provider: Provider3,
-    Sortable: (props) => /* @__PURE__ */ React82.createElement(Sortable, { sharedDragProps, ...props }),
+    Sortable: (props) => /* @__PURE__ */ React83.createElement(Sortable, { sharedDragProps, ...props }),
     props: sharedDragProps
   };
 }
 
 // src/components/Switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import * as React83 from "react";
+import * as React84 from "react";
 var Switch = function Switch2({
   id,
   value,
@@ -11845,7 +11890,7 @@ var Switch = function Switch2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React84.createElement(
     SwitchPrimitive.Root,
     {
       id,
@@ -11864,12 +11909,12 @@ var Switch = function Switch2({
       onFocus,
       onBlur
     },
-    /* @__PURE__ */ React83.createElement(SwitchPrimitive.Thumb, { className: "block w-[15px] h-[15px] bg-background rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" })
+    /* @__PURE__ */ React84.createElement(SwitchPrimitive.Thumb, { className: "block w-[15px] h-[15px] bg-background rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" })
   );
 };
 
 // src/components/UserPointer.tsx
-import React84, { memo as memo35, useMemo as useMemo39 } from "react";
+import React85, { memo as memo35, useMemo as useMemo39 } from "react";
 var UserPointerContainer = memo35(function UserPointerContainer2({
   point,
   visible,
@@ -11877,7 +11922,7 @@ var UserPointerContainer = memo35(function UserPointerContainer2({
   className,
   style: style2
 }) {
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement(
     "div",
     {
       style: {
@@ -11900,7 +11945,7 @@ var UserNameTag = memo35(function UserNameTag2({
   style: style2,
   children
 }) {
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement(
     "span",
     {
       className: cx(
@@ -11923,7 +11968,7 @@ var UserPointerIcon = memo35(function PointerIcon({
   style: style2
 }) {
   const points = "0,5 10,0 10,10";
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement(
     "svg",
     {
       width: size2,
@@ -11938,7 +11983,7 @@ var UserPointerIcon = memo35(function PointerIcon({
         ...style2
       }
     },
-    /* @__PURE__ */ React84.createElement(
+    /* @__PURE__ */ React85.createElement(
       "polygon",
       {
         points,
@@ -11975,7 +12020,7 @@ var UserPointer = memo35(function UserPointer2({
     () => ({ marginLeft: `${POINTER_SIZE - POINTER_OVERLAP + 1}px` }),
     []
   );
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement(
     UserPointerContainer,
     {
       point,
@@ -11983,14 +12028,14 @@ var UserPointer = memo35(function UserPointer2({
       className,
       style: style2
     },
-    name && /* @__PURE__ */ React84.createElement("div", { className: "relative" }, /* @__PURE__ */ React84.createElement(
+    name && /* @__PURE__ */ React85.createElement("div", { className: "relative" }, /* @__PURE__ */ React85.createElement(
       UserPointerIcon,
       {
         size: POINTER_SIZE,
         color: userBackgroundColor,
         style: pointerOverlapStyle
       }
-    ), /* @__PURE__ */ React84.createElement(
+    ), /* @__PURE__ */ React85.createElement(
       UserNameTag,
       {
         backgroundColor: userBackgroundColor,
@@ -12003,7 +12048,7 @@ var UserPointer = memo35(function UserPointer2({
 
 // src/components/workspace/WorkspaceLayout.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
-import React88, {
+import React89, {
   forwardRef as forwardRef27,
   memo as memo38,
   useCallback as useCallback32,
@@ -12013,7 +12058,7 @@ import React88, {
 } from "react";
 
 // src/hooks/useWindowSize.tsx
-import { useEffect as useEffect20, useState as useState29 } from "react";
+import { useEffect as useEffect21, useState as useState29 } from "react";
 function useWindowSize() {
   const [size2, setSize] = useState29(
     typeof window === "undefined" ? { width: 0, height: 0 } : {
@@ -12021,7 +12066,7 @@ function useWindowSize() {
       height: window.innerHeight
     }
   );
-  useEffect20(() => {
+  useEffect21(() => {
     const handleResize = () => setSize({
       width: window.innerWidth,
       height: window.innerHeight
@@ -12033,10 +12078,10 @@ function useWindowSize() {
 }
 
 // src/components/workspace/DrawerWorkspaceLayout.tsx
-import React86, { memo as memo36, useLayoutEffect as useLayoutEffect9, useRef as useRef26, useState as useState30 } from "react";
+import React87, { memo as memo36, useLayoutEffect as useLayoutEffect10, useRef as useRef26, useState as useState30 } from "react";
 
 // src/hooks/usePreservePanelSize.tsx
-import { useLayoutEffect as useLayoutEffect8, useRef as useRef25 } from "react";
+import { useLayoutEffect as useLayoutEffect9, useRef as useRef25 } from "react";
 var EDITOR_PANEL_GROUP_ID = "editor-panel-group";
 var LEFT_SIDEBAR_ID = "editor-left-sidebar";
 var RIGHT_SIDEBAR_ID = "editor-right-sidebar";
@@ -12044,7 +12089,7 @@ var CONTENT_AREA_ID = "editor-content-area";
 function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
   const windowSize = useWindowSize();
   const layoutRef = useRef25();
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     const panelGroup = document.querySelector(
       `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
     );
@@ -12087,7 +12132,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
       panelGroupObserver.disconnect();
     };
   }, [panelGroupRef, setPanelLayoutState]);
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     if (!layoutRef.current) return;
     const {
       windowWidth: oldWindowWidth,
@@ -12184,7 +12229,7 @@ var DrawerWorkspaceLayout = memo36(function DrawerWorkspaceLayout2({
 }) {
   const portalContainer = useRef26(null);
   const [mounted, setMounted] = useState30(false);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (mounted) return;
     setMounted(true);
     handleChangeLayoutState({
@@ -12194,14 +12239,14 @@ var DrawerWorkspaceLayout = memo36(function DrawerWorkspaceLayout2({
   }, [handleChangeLayoutState, mounted]);
   const leftSidebarCollapsed = internalLayoutState?.leftSidebarCollapsed ?? false;
   const rightSidebarCollapsed = internalLayoutState?.rightSidebarCollapsed ?? false;
-  return /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React87.createElement(
     "div",
     {
       ref: portalContainer,
       id: EDITOR_PANEL_GROUP_ID,
       className: "flex flex-1 relative focus:outline-none"
     },
-    leftPanel && /* @__PURE__ */ React86.createElement(
+    leftPanel && /* @__PURE__ */ React87.createElement(
       Drawer,
       {
         id: LEFT_SIDEBAR_ID,
@@ -12222,7 +12267,7 @@ var DrawerWorkspaceLayout = memo36(function DrawerWorkspaceLayout2({
       leftPanel
     ),
     centerPanel,
-    rightPanel && /* @__PURE__ */ React86.createElement(
+    rightPanel && /* @__PURE__ */ React87.createElement(
       Drawer,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -12246,7 +12291,7 @@ var DrawerWorkspaceLayout = memo36(function DrawerWorkspaceLayout2({
 });
 
 // src/components/workspace/PanelWorkspaceLayout.tsx
-import React87, { memo as memo37, useRef as useRef27 } from "react";
+import React88, { memo as memo37, useRef as useRef27 } from "react";
 import {
   Panel,
   PanelGroup,
@@ -12267,7 +12312,7 @@ var PanelWorkspaceLayout = memo37(function PanelWorkspaceLayout2({
 }) {
   const panelGroupRef = useRef27(null);
   usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
-  return /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React88.createElement(
     PanelGroup,
     {
       ref: panelGroupRef,
@@ -12276,7 +12321,7 @@ var PanelWorkspaceLayout = memo37(function PanelWorkspaceLayout2({
       direction: "horizontal",
       autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0
     },
-    leftPanel && /* @__PURE__ */ React87.createElement(React87.Fragment, null, /* @__PURE__ */ React87.createElement(
+    leftPanel && /* @__PURE__ */ React88.createElement(React88.Fragment, null, /* @__PURE__ */ React88.createElement(
       Panel,
       {
         id: LEFT_SIDEBAR_ID,
@@ -12289,8 +12334,8 @@ var PanelWorkspaceLayout = memo37(function PanelWorkspaceLayout2({
         collapsible: true
       },
       internalLayoutState?.leftSidebarCollapsed ? null : leftPanel
-    ), /* @__PURE__ */ React87.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" })),
-    /* @__PURE__ */ React87.createElement(
+    ), /* @__PURE__ */ React88.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" })),
+    /* @__PURE__ */ React88.createElement(
       Panel,
       {
         id: CONTENT_AREA_ID,
@@ -12301,7 +12346,7 @@ var PanelWorkspaceLayout = memo37(function PanelWorkspaceLayout2({
       },
       centerPanel
     ),
-    rightPanel && /* @__PURE__ */ React87.createElement(React87.Fragment, null, /* @__PURE__ */ React87.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" }), /* @__PURE__ */ React87.createElement(
+    rightPanel && /* @__PURE__ */ React88.createElement(React88.Fragment, null, /* @__PURE__ */ React88.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" }), /* @__PURE__ */ React88.createElement(
       Panel,
       {
         id: RIGHT_SIDEBAR_ID,
@@ -12350,7 +12395,7 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
   } = {},
   theme
 }, forwardedRef) {
-  const containerRef = React88.useRef(null);
+  const containerRef = React89.useRef(null);
   const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
   const parentSize = detectSize === "window" ? windowSize : containerSize && containerSize.width > 0 ? containerSize : windowSize;
@@ -12448,7 +12493,7 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
     }
   });
   const centerPanelPercentage = 100 - (left ? leftSidebarPercentage : 0) - (right ? rightSidebarPercentage : 0);
-  const leftPanel = left ? /* @__PURE__ */ React88.createElement(
+  const leftPanel = left ? /* @__PURE__ */ React89.createElement(
     PanelInner,
     {
       style: leftStyle,
@@ -12456,7 +12501,7 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
     },
     left
   ) : null;
-  const rightPanel = right ? /* @__PURE__ */ React88.createElement(
+  const rightPanel = right ? /* @__PURE__ */ React89.createElement(
     PanelInner,
     {
       style: rightStyle,
@@ -12464,7 +12509,7 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
     },
     right
   ) : null;
-  const centerPanel = /* @__PURE__ */ React88.createElement(PanelInner, { className: "bg-canvas-background" }, children);
+  const centerPanel = /* @__PURE__ */ React89.createElement(PanelInner, { className: "bg-canvas-background" }, children);
   const leftSidebarOptions = {
     minSize: leftSidebarMinPercentage,
     maxSize: leftSidebarMaxPercentage,
@@ -12479,7 +12524,7 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
   };
   const LayoutComponent = sideType === "panel" ? PanelWorkspaceLayout : sideType === "drawer" ? DrawerWorkspaceLayout : parentSize.width > sideTypeBreakpoint ? PanelWorkspaceLayout : DrawerWorkspaceLayout;
   const readyToRender = detectSize === "window" || containerSize && containerSize.width > 0;
-  return /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React89.createElement(
     "div",
     {
       ref: containerRef,
@@ -12489,7 +12534,7 @@ var WorkspaceLayout = forwardRef27(function WorkspaceLayout2({
       "data-theme": theme
     },
     toolbar,
-    /* @__PURE__ */ React88.createElement("div", { className: "flex flex-row flex-1 relative" }, readyToRender && /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.createElement("div", { className: "flex flex-row flex-1 relative" }, readyToRender && /* @__PURE__ */ React89.createElement(
       LayoutComponent,
       {
         leftPanel,
@@ -12512,7 +12557,7 @@ var PanelInner = memo38(function PanelInner2({
   style: style2,
   className
 }) {
-  return /* @__PURE__ */ React88.createElement("div", { style: style2, className: cx("absolute inset-0 flex", className) }, children);
+  return /* @__PURE__ */ React89.createElement("div", { style: style2, className: cx("absolute inset-0 flex", className) }, children);
 });
 
 // src/hooks/usePlatform.ts
@@ -12525,7 +12570,7 @@ function usePlatformModKey() {
 }
 
 // src/hooks/useTheme.ts
-import { useState as useState32, useEffect as useEffect21 } from "react";
+import { useState as useState32, useEffect as useEffect22 } from "react";
 function useTheme() {
   const [theme, setTheme] = useState32("light");
   const checkTheme = () => {
@@ -12539,7 +12584,7 @@ function useTheme() {
         break;
     }
   };
-  useEffect21(() => {
+  useEffect22(() => {
     checkTheme();
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
@@ -12641,13 +12686,13 @@ function acceptsDrop({
     if (!allowSiblings) {
       return false;
     }
-    return defaultAcceptsDrop(
-      sourceIndexPath.at(-1),
-      targetIndexPath.at(-1),
+    return defaultAcceptsDrop({
+      sourceIndex: sourceIndexPath.at(-1),
+      targetIndex: targetIndexPath.at(-1),
       position,
-      "",
-      ""
-    );
+      sourceListId: "",
+      targetListId: ""
+    });
   }
   return true;
 }
@@ -12667,11 +12712,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import * as React89 from "react";
+import * as React90 from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = React89.memo(function DimensionInput2({
+var DimensionInput = React90.memo(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -12681,15 +12726,15 @@ var DimensionInput = React89.memo(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = React89.useCallback(
+  const handleNudgeValue = React90.useCallback(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = React89.useCallback(
+  const handleSetValue = React90.useCallback(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React89.createElement(LabeledField, { label, labelPosition: "inset" }, /* @__PURE__ */ React89.createElement(InputField2.Root, { id, width: size2 }, /* @__PURE__ */ React89.createElement(
+  return /* @__PURE__ */ React90.createElement(LabeledField, { label, labelPosition: "inset" }, /* @__PURE__ */ React90.createElement(InputField2.Root, { id, width: size2 }, /* @__PURE__ */ React90.createElement(
     InputField2.NumberInput,
     {
       value: value === void 0 ? value : round(value, 2),
@@ -12716,11 +12761,11 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title4,
   VerticalSeparator: () => VerticalSeparator
 });
-import React90, {
+import React91, {
   forwardRef as forwardRef28,
   memo as memo40
 } from "react";
-var Section2 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React90.createElement(
+var Section2 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React91.createElement(
   "div",
   {
     ref,
@@ -12728,8 +12773,8 @@ var Section2 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ Re
     ...props
   }
 ));
-var SectionHeader3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React90.createElement("div", { ref, className: cx(`flex items-center `, className), ...props }));
-var Title4 = forwardRef28(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React90.createElement(
+var SectionHeader3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React91.createElement("div", { ref, className: cx(`flex items-center `, className), ...props }));
+var Title4 = forwardRef28(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React91.createElement(
   "div",
   {
     ref,
@@ -12740,7 +12785,7 @@ var Title4 = forwardRef28(({ className, $textStyle, ...props }, ref) => /* @__PU
     ...props
   }
 ));
-var Row = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React90.createElement(
+var Row = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React91.createElement(
   "div",
   {
     ref,
@@ -12748,7 +12793,7 @@ var Row = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React90
     ...props
   }
 ));
-var Column = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React90.createElement(
+var Column = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React91.createElement(
   "div",
   {
     ref,
@@ -12756,7 +12801,7 @@ var Column = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ Reac
     ...props
   }
 ));
-var Checkbox3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React90.createElement(
+var Checkbox3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React91.createElement(
   "input",
   {
     ref,
@@ -12765,7 +12810,7 @@ var Checkbox3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ R
     ...props
   }
 ));
-var Text3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React90.createElement(
+var Text3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React91.createElement(
   "span",
   {
     ref,
@@ -12773,14 +12818,14 @@ var Text3 = forwardRef28(({ className, ...props }, ref) => /* @__PURE__ */ React
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ React90.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ React90.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var VerticalSeparator = () => /* @__PURE__ */ React91.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ React91.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
 var RowLabel = forwardRef28(function RowLabel2({
   className,
   $textStyle,
   ...props
 }, ref) {
-  return /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React91.createElement(
     "label",
     {
       ref,
@@ -12800,11 +12845,11 @@ var LabeledRow = memo40(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ React90.createElement(Row, { id, className }, /* @__PURE__ */ React90.createElement(Column, null, /* @__PURE__ */ React90.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React90.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React90.createElement(Row, null, children)));
+  return /* @__PURE__ */ React91.createElement(Row, { id, className }, /* @__PURE__ */ React91.createElement(Column, null, /* @__PURE__ */ React91.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React91.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React91.createElement(Row, null, children)));
 });
 
 // src/components/BaseToolbar.tsx
-import React91 from "react";
+import React92 from "react";
 var toolbarStyle = {
   [cssVarNames.colors.inputBackground]: "transparent"
 };
@@ -12815,7 +12860,7 @@ function BaseToolbar({
   logo,
   showDivider = true
 }) {
-  return /* @__PURE__ */ React91.createElement("div", { className: "flex flex-col", style: toolbarStyle }, /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React92.createElement("div", { className: "flex flex-col", style: toolbarStyle }, /* @__PURE__ */ React92.createElement(
     "div",
     {
       className: "flex items-center pr-2.5 bg-sidebar-background flex-none relative @container/toolbar",
@@ -12823,10 +12868,10 @@ function BaseToolbar({
         flex: `0 0 ${cssVars.spacing.toolbarHeight}`
       }
     },
-    logo && /* @__PURE__ */ React91.createElement(React91.Fragment, null, logo, /* @__PURE__ */ React91.createElement(DividerVertical, null)),
-    /* @__PURE__ */ React91.createElement(Spacer.Horizontal, { size: 10 }),
-    left && /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement("div", { className: "flex gap-toolbar-separator" }, left), /* @__PURE__ */ React91.createElement(Spacer.Horizontal, { size: 10 })),
-    /* @__PURE__ */ React91.createElement("div", { className: "flex items-center justify-center text-text-muted pointer-events-none @2xl/toolbar:absolute inset-0" }, /* @__PURE__ */ React91.createElement(
+    logo && /* @__PURE__ */ React92.createElement(React92.Fragment, null, logo, /* @__PURE__ */ React92.createElement(DividerVertical, null)),
+    /* @__PURE__ */ React92.createElement(Spacer.Horizontal, { size: 10 }),
+    left && /* @__PURE__ */ React92.createElement(React92.Fragment, null, /* @__PURE__ */ React92.createElement("div", { className: "flex gap-toolbar-separator" }, left), /* @__PURE__ */ React92.createElement(Spacer.Horizontal, { size: 10 })),
+    /* @__PURE__ */ React92.createElement("div", { className: "flex items-center justify-center text-text-muted pointer-events-none @2xl/toolbar:absolute inset-0" }, /* @__PURE__ */ React92.createElement(
       "div",
       {
         style: {
@@ -12838,15 +12883,15 @@ function BaseToolbar({
       },
       children
     )),
-    /* @__PURE__ */ React91.createElement(Spacer.Horizontal, null),
-    /* @__PURE__ */ React91.createElement(Spacer.Horizontal, { size: 10 }),
-    /* @__PURE__ */ React91.createElement("div", { className: "flex gap-toolbar-separator" }, right)
-  ), showDivider && /* @__PURE__ */ React91.createElement(Divider, { variant: "strong" }));
+    /* @__PURE__ */ React92.createElement(Spacer.Horizontal, null),
+    /* @__PURE__ */ React92.createElement(Spacer.Horizontal, { size: 10 }),
+    /* @__PURE__ */ React92.createElement("div", { className: "flex gap-toolbar-separator" }, right)
+  ), showDivider && /* @__PURE__ */ React92.createElement(Divider, { variant: "strong" }));
 }
 
 // src/components/Toolbar.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts4 } from "@noya-app/noya-keymap";
-import React92 from "react";
+import React93 from "react";
 var iconButtonStyle = {
   height: 27,
   width: 27,
@@ -12856,8 +12901,8 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
   item,
   onSelectMenuItem
 }) {
-  const [open, setOpen] = React92.useState(false);
-  return /* @__PURE__ */ React92.createElement(
+  const [open, setOpen] = React93.useState(false);
+  return /* @__PURE__ */ React93.createElement(
     DropdownMenu,
     {
       open,
@@ -12869,7 +12914,7 @@ var ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown2({
         }
       }
     },
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement(
       Button,
       {
         disabled: item.disabled,
@@ -12886,7 +12931,7 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
   onSelectMenuItem,
   as
 }) {
-  const content = /* @__PURE__ */ React92.createElement(
+  const content = /* @__PURE__ */ React93.createElement(
     Button,
     {
       as,
@@ -12903,7 +12948,7 @@ var ToolbarMenuButton = memoGeneric(function ToolbarMenuButton2({
     },
     item.title
   );
-  return item.tooltip ? /* @__PURE__ */ React92.createElement(Tooltip, { sideOffset: 10, content: item.tooltip }, content) : content;
+  return item.tooltip ? /* @__PURE__ */ React93.createElement(Tooltip, { sideOffset: 10, content: item.tooltip }, content) : content;
 });
 var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
   item,
@@ -12912,10 +12957,10 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
 }) {
   if (item.type === "sectionHeader") return null;
   if (item.type === "separator") {
-    return /* @__PURE__ */ React92.createElement(DividerVertical, { overflow: 4 });
+    return /* @__PURE__ */ React93.createElement(DividerVertical, { overflow: 4 });
   }
   if (isSelectableMenuItem(item)) {
-    return /* @__PURE__ */ React92.createElement(
+    return /* @__PURE__ */ React93.createElement(
       ToolbarMenuButton,
       {
         item,
@@ -12924,15 +12969,15 @@ var ToolbarMenuItem = memoGeneric(function ToolbarMenuItem2({
       }
     );
   }
-  return /* @__PURE__ */ React92.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
+  return /* @__PURE__ */ React93.createElement(ToolbarMenuDropdown, { item, onSelectMenuItem });
 });
 var ToolbarMenu = memoGeneric(function ToolbarMenu2({
   items,
   onSelectMenuItem,
   buttonAs
 }) {
-  return /* @__PURE__ */ React92.createElement(React92.Fragment, null, items.map((item, i) => {
-    return /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React93.createElement(React93.Fragment, null, items.map((item, i) => {
+    return /* @__PURE__ */ React93.createElement(
       ToolbarMenuItem,
       {
         key: i,
@@ -12951,28 +12996,28 @@ function Toolbar({
   onSelectMenuItem,
   shouldBindKeyboardShortcuts = true
 }) {
-  const allMenuItems = React92.useMemo(
+  const allMenuItems = React93.useMemo(
     () => [...leftMenuItems, ...rightMenuItems],
     [leftMenuItems, rightMenuItems]
   );
   useKeyboardShortcuts4(
-    React92.useMemo(
+    React93.useMemo(
       () => onSelectMenuItem && shouldBindKeyboardShortcuts ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem) : {},
       [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
     )
   );
-  return /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React93.createElement(
     BaseToolbar,
     {
       logo,
-      left: leftMenuItems.length > 0 && /* @__PURE__ */ React92.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React92.createElement(
+      left: leftMenuItems.length > 0 && /* @__PURE__ */ React93.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React93.createElement(
         ToolbarMenu,
         {
           items: leftMenuItems,
           onSelectMenuItem
         }
       )),
-      right: rightMenuItems.length > 0 && /* @__PURE__ */ React92.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React92.createElement(
+      right: rightMenuItems.length > 0 && /* @__PURE__ */ React93.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React93.createElement(
         ToolbarMenu,
         {
           items: rightMenuItems,
@@ -13117,6 +13162,7 @@ export {
   cssVars,
   cx,
   defaultAcceptsDrop,
+  dragItemKeySeparator,
   filterWithGroupedSections,
   fuzzyFilter,
   fuzzyScore,