@noya-app/noya-designsystem 0.1.2 → 0.1.3

package/dist/index.mjs

@@ -359,10 +359,10 @@ var ToastProvider = ({ children }) => /* @__PURE__ */ React6.createElement(Toast
 // src/contexts/DialogContext.tsx
 import React17, {
   createContext as createContext3,
-  useCallback as useCallback10,
+  useCallback as useCallback11,
   useContext as useContext3,
   useMemo as useMemo6,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState10
 } from "react";
 import styled13 from "styled-components";
@@ -665,21 +665,24 @@ import { useEffect as useEffect2, useState as useState4 } from "react";
 // ../noya-react-utils/src/hooks/useIsMounted.ts
 import { useEffect as useEffect3, useRef as useRef4 } from "react";
 
+// ../noya-react-utils/src/hooks/useLateReference.ts
+import { useCallback as useCallback5, useLayoutEffect, useRef as useRef5 } from "react";
+
 // ../noya-react-utils/src/hooks/useLazyValue.ts
-import { useRef as useRef5 } from "react";
+import { useRef as useRef6 } from "react";
 
 // ../noya-react-utils/src/hooks/useMutableState.ts
-import { useCallback as useCallback5, useMemo as useMemo3, useState as useState5 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo3, useState as useState5 } from "react";
 
 // ../noya-react-utils/src/hooks/usePixelRatio.ts
 import { useEffect as useEffect4, useState as useState6 } from "react";
 
 // ../noya-react-utils/src/hooks/useShallowArray.ts
 import { isShallowEqual } from "@noya-app/noya-utils";
-import { useRef as useRef6 } from "react";
+import { useRef as useRef7 } from "react";
 
 // ../noya-react-utils/src/hooks/useStableCallback.ts
-import { useCallback as useCallback6, useLayoutEffect, useRef as useRef7 } from "react";
+import { useCallback as useCallback7, useLayoutEffect as useLayoutEffect2, useRef as useRef8 } from "react";
 
 // ../noya-react-utils/src/hooks/useSystemColorScheme.ts
 import { useEffect as useEffect5, useState as useState7 } from "react";
@@ -704,12 +707,12 @@ import React16, {
   forwardRef as forwardRef7,
   isValidElement as isValidElement2,
   memo as memo9,
-  useCallback as useCallback9,
+  useCallback as useCallback10,
   useContext as useContext2,
   useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect3,
+  useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo5,
-  useRef as useRef9
+  useRef as useRef10
 } from "react";
 import styled12 from "styled-components";
 
@@ -744,7 +747,7 @@ import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
 import React12, {
   forwardRef as forwardRef4,
   memo as memo7,
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useMemo as useMemo4
 } from "react";
 import styled9 from "styled-components";
@@ -905,7 +908,7 @@ var DropdownMenuItem = memo7(function ContextMenuItem({
   items,
   shortcut
 }) {
-  const handleSelectItem = useCallback7(() => {
+  const handleSelectItem = useCallback8(() => {
     if (!value)
       return;
     onSelect(value);
@@ -987,10 +990,10 @@ var DropdownMenu = memo7(DropdownMenuRoot);
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import React13, {
   forwardRef as forwardRef5,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useEffect as useEffect8,
-  useLayoutEffect as useLayoutEffect2,
-  useRef as useRef8,
+  useLayoutEffect as useLayoutEffect3,
+  useRef as useRef9,
   useState as useState9
 } from "react";
 
@@ -1056,14 +1059,14 @@ var ControlledTextInput = forwardRef5(function ControlledTextInput2({
   onFocusCapture,
   ...rest
 }, forwardedRef) {
-  const handleBlur = useCallback8(
+  const handleBlur = useCallback9(
     (event) => {
       onBlur?.(event);
       onFocusChange?.(false);
     },
     [onBlur, onFocusChange]
   );
-  const handleFocusCapture = useCallback8(
+  const handleFocusCapture = useCallback9(
     (event) => {
       onFocusCapture?.(event);
       onFocusChange?.(true);
@@ -1077,7 +1080,7 @@ var ControlledTextInput = forwardRef5(function ControlledTextInput2({
       ...rest,
       value,
       onKeyDown,
-      onChange: useCallback8(
+      onChange: useCallback9(
         (event) => onChange(event.target.value),
         [onChange]
       ),
@@ -1098,15 +1101,15 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
   ...rest
 }, forwardedRef) {
   const ref = React13.useRef(null);
-  const latestValue = useRef8(value);
+  const latestValue = useRef9(value);
   latestValue.current = value;
-  const userDidEdit = useRef8(false);
-  const isSubmitTriggeredByEscapeKey = useRef8(false);
+  const userDidEdit = useRef9(false);
+  const isSubmitTriggeredByEscapeKey = useRef9(false);
   const [internalValue, setInternalValue] = useState9("");
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     setInternalValue(value);
   }, [value]);
-  const handleSubmit = useCallback8(() => {
+  const handleSubmit = useCallback9(() => {
     const submissionValue = isSubmitTriggeredByEscapeKey.current ? value : internalValue;
     isSubmitTriggeredByEscapeKey.current = false;
     if (submissionValue === value && !allowSubmittingWithSameValue)
@@ -1116,13 +1119,13 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
     setInternalValue(latestValue.current);
   }, [allowSubmittingWithSameValue, value, internalValue, onSubmit]);
   useGlobalInputBlurListener(
-    useCallback8(() => {
+    useCallback9(() => {
       if (ref.current !== document.activeElement)
         return;
       handleSubmit();
     }, [handleSubmit])
   );
-  const handleKeyDown = useCallback8(
+  const handleKeyDown = useCallback9(
     (event) => {
       if (event.key === "Enter") {
         handleSubmit();
@@ -1137,14 +1140,14 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
     },
     [onKeyDown, handleSubmit]
   );
-  const handleChange = useCallback8(
+  const handleChange = useCallback9(
     (event) => {
       userDidEdit.current = true;
       setInternalValue(event.target.value);
     },
     []
   );
-  const handleBlur = useCallback8(
+  const handleBlur = useCallback9(
     (event) => {
       onBlur?.(event);
       onFocusChange?.(false);
@@ -1152,17 +1155,17 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
     },
     [onBlur, onFocusChange, handleSubmit]
   );
-  const handleFocusCapture = useCallback8(
+  const handleFocusCapture = useCallback9(
     (event) => {
       onFocusCapture?.(event);
       onFocusChange?.(true);
     },
     [onFocusCapture, onFocusChange]
   );
-  const autoSubmitTimeoutRef = useRef8(
+  const autoSubmitTimeoutRef = useRef9(
     null
   );
-  const latestHandleSubmit = useRef8(handleSubmit);
+  const latestHandleSubmit = useRef9(handleSubmit);
   latestHandleSubmit.current = handleSubmit;
   useEffect8(() => {
     if (submitAutomaticallyAfterDelay) {
@@ -1196,11 +1199,11 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
 });
 var TextInput_default = forwardRef5(function TextInput(props, forwardedRef) {
   const commonProps = {
-    onPointerDown: useCallback8(
+    onPointerDown: useCallback9(
       (event) => event.stopPropagation(),
       []
     ),
-    onClick: useCallback8(
+    onClick: useCallback9(
       (event) => event.stopPropagation(),
       []
     ),
@@ -1396,8 +1399,8 @@ var LabelContainer = styled12.label(({ theme, labelPosition, hasDropdown, pointe
 var InputFieldLabel = memo9(
   forwardRef7(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
     const { labelPosition, hasDropdown, setLabelWidth } = useContext2(InputFieldContext);
-    const ref = useRef9(null);
-    useLayoutEffect3(() => {
+    const ref = useRef10(null);
+    useLayoutEffect4(() => {
       if (!setLabelWidth)
         return;
       const width = ref.current?.getBoundingClientRect().width;
@@ -1452,7 +1455,7 @@ var InputFieldButton = memo9(function InputFieldButton2({
   onClick
 }) {
   const { size: size2, inputRef } = useContext2(InputFieldContext);
-  const defaultHandleClick = useCallback9(
+  const defaultHandleClick = useCallback10(
     (event) => {
       if (inputRef && typeof inputRef !== "function") {
         inputRef.current?.focus();
@@ -1463,7 +1466,7 @@ var InputFieldButton = memo9(function InputFieldButton2({
     },
     [inputRef]
   );
-  const handlePointerDown = useCallback9((event) => {
+  const handlePointerDown = useCallback10((event) => {
     event.preventDefault();
     event.stopPropagation();
   }, []);
@@ -1564,13 +1567,13 @@ var InputFieldInput = forwardRef7(function InputFieldInput2(props, forwardedRef)
     onFocusChange,
     setInputRef
   } = useContext2(InputFieldContext);
-  const handleFocusChange = useCallback9(
+  const handleFocusChange = useCallback10(
     (isFocused) => {
       onFocusChange(isFocused);
     },
     [onFocusChange]
   );
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     setInputRef?.(forwardedRef);
   }, [forwardedRef, setInputRef]);
   return /* @__PURE__ */ React16.createElement(
@@ -1630,7 +1633,7 @@ function InputFieldNumberInput(props) {
   const { value, placeholder, onNudge } = props;
   const onSubmit = "onSubmit" in props ? props.onSubmit : void 0;
   const onChange = "onChange" in props ? props.onChange : void 0;
-  const handleSubmit = useCallback9(
+  const handleSubmit = useCallback10(
     (value2) => {
       const newValue = parseNumber(value2);
       if (!isNaN(newValue)) {
@@ -1639,7 +1642,7 @@ function InputFieldNumberInput(props) {
     },
     [onSubmit]
   );
-  const handleKeyDown = useCallback9(
+  const handleKeyDown = useCallback10(
     (event) => {
       const amount = handleNudge(event);
       if (!amount)
@@ -1650,7 +1653,7 @@ function InputFieldNumberInput(props) {
     },
     [onNudge]
   );
-  const handleChange = useCallback9(
+  const handleChange = useCallback10(
     (value2) => {
       onChange?.(parseNumber(value2));
     },
@@ -1697,7 +1700,7 @@ function InputFieldRoot({
   const [isFocused, setIsFocused] = React16.useState(false);
   const [measuredLabelSize, setMeasuredLabelSize] = React16.useState();
   const [measuredWidth, setMeasuredWidth] = React16.useState();
-  const handleFocusChange = useCallback9(
+  const handleFocusChange = useCallback10(
     (isFocused2) => {
       setIsFocused(isFocused2);
       onFocusChange?.(isFocused2);
@@ -1792,18 +1795,18 @@ var DialogProvider = function DialogProvider2({
 }) {
   const [contents, setContents] = useState10();
   const isOpen = !!contents;
-  const close = useCallback10(() => {
+  const close = useCallback11(() => {
     if (!contents)
       return;
     contents.resolve(void 0);
   }, [contents]);
-  const submit = useCallback10(() => {
+  const submit = useCallback11(() => {
     if (!contents || !contents.inputValue)
       return;
     contents.resolve(contents.inputValue);
     setContents(void 0);
   }, [contents]);
-  const open = useCallback10(
+  const open = useCallback11(
     (title, inputValue = "") => {
       const { promise, resolve } = createDeferredPromise();
       setContents({
@@ -1818,7 +1821,7 @@ var DialogProvider = function DialogProvider2({
     },
     []
   );
-  const handleKeyDown = useCallback10(
+  const handleKeyDown = useCallback11(
     (event) => {
       if (event.key !== "Enter")
         return;
@@ -1828,9 +1831,9 @@ var DialogProvider = function DialogProvider2({
     },
     [submit]
   );
-  const inputRef = useRef10(null);
-  const dialogRef = useRef10(null);
-  const containsElement = useCallback10((element) => {
+  const inputRef = useRef11(null);
+  const dialogRef = useRef11(null);
+  const containsElement = useCallback11((element) => {
     if (!dialogRef.current)
       return false;
     return dialogRef.current.containsElement(element);
@@ -1850,7 +1853,7 @@ var DialogProvider = function DialogProvider2({
       ref: dialogRef,
       title: contents?.title,
       open: isOpen,
-      onOpenChange: useCallback10(
+      onOpenChange: useCallback11(
         (isOpen2) => {
           if (!isOpen2) {
             close();
@@ -1858,7 +1861,7 @@ var DialogProvider = function DialogProvider2({
         },
         [close]
       ),
-      onOpenAutoFocus: useCallback10((event) => {
+      onOpenAutoFocus: useCallback11((event) => {
         event.stopPropagation();
         event.preventDefault();
         inputRef.current?.focus();
@@ -2167,7 +2170,7 @@ import { useKeyboardShortcuts as useKeyboardShortcuts2 } from "@noya-app/noya-ke
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
 import React21, {
   memo as memo12,
-  useCallback as useCallback11,
+  useCallback as useCallback12,
   useMemo as useMemo9
 } from "react";
 import styled15 from "styled-components";
@@ -2192,11 +2195,11 @@ var ContextMenuItem2 = memo12(function ContextMenuItem3({
   items,
   shortcut
 }) {
-  const handlePointerDown = useCallback11(
+  const handlePointerDown = useCallback12(
     (event) => event.stopPropagation(),
     []
   );
-  const handleSelectItem = useCallback11(() => {
+  const handleSelectItem = useCallback12(() => {
     if (!value)
       return;
     onSelect(value);
@@ -2250,7 +2253,7 @@ function ContextMenuRoot({
     [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
   useKeyboardShortcuts2(keymap);
-  const onPointerDown = useCallback11((event) => {
+  const onPointerDown = useCallback12((event) => {
     event.preventDefault();
   }, []);
   const RootComponent = isNested ? RadixContextMenu.Sub : RadixContextMenu.Root;
@@ -2293,7 +2296,7 @@ var DividerVertical = memo13(function DividerVertical2(props) {
 
 // src/components/DraggableMenuButton.tsx
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import React23, { memo as memo14, useCallback as useCallback12, useState as useState12 } from "react";
+import React23, { memo as memo14, useCallback as useCallback13, useState as useState12 } from "react";
 import styled17 from "styled-components";
 var DotButtonElement = styled17.div(({ theme }) => ({
   cursor: "pointer",
@@ -2321,7 +2324,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
   const color = useDesignSystemTheme().colors.icon;
   const [open, setOpen] = useState12(false);
   const [downPosition, setDownPosition] = React23.useState(null);
-  const handlePointerDownCapture = useCallback12(
+  const handlePointerDownCapture = useCallback13(
     (event) => {
       if (open) {
         setDownPosition(null);
@@ -2334,7 +2337,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
     },
     [open]
   );
-  const handlePointerUp = useCallback12(
+  const handlePointerUp = useCallback13(
     (event) => {
       if (open || !downPosition) {
         setDownPosition(null);
@@ -2350,7 +2353,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
     },
     [downPosition, open]
   );
-  const handleOpenChange = useCallback12(
+  const handleOpenChange = useCallback13(
     (isOpen) => {
       if (!isOpen)
         setOpen(false);
@@ -2745,7 +2748,7 @@ function useImageData(ref) {
 }
 
 // src/hooks/useObjectURL.ts
-import { useLayoutEffect as useLayoutEffect4, useMemo as useMemo11 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useMemo as useMemo11 } from "react";
 function useObjectURL(object) {
   const objectURL = useMemo11(() => {
     if (object instanceof Blob)
@@ -2753,7 +2756,7 @@ function useObjectURL(object) {
     const bytes = object instanceof Uint8Array ? object : object !== void 0 ? new Uint8Array(object) : new Uint8Array();
     return URL.createObjectURL(new Blob([bytes]));
   }, [object]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     return () => URL.revokeObjectURL(objectURL);
   }, [objectURL]);
   return objectURL;
@@ -2931,7 +2934,7 @@ import {
   hsvaToRgba,
   rgbaToHsva as rgbaToHsva2
 } from "@noya-app/noya-colorpicker";
-import React27, { memo as memo18, useCallback as useCallback13, useMemo as useMemo13 } from "react";
+import React27, { memo as memo18, useCallback as useCallback14, useMemo as useMemo13 } from "react";
 var GradientPicker = memo18(function GradientPicker2({
   value,
   selectedStop,
@@ -2954,13 +2957,13 @@ var GradientPicker = memo18(function GradientPicker2({
     () => sketchColorToRgba(value[selectedStop].color),
     [value, selectedStop]
   );
-  const handleChangeColor = useCallback13(
+  const handleChangeColor = useCallback14(
     (value2) => {
       onChangeColor(rgbaToSketchColor(value2));
     },
     [onChangeColor]
   );
-  const handleAddGradientStop = useCallback13(
+  const handleAddGradientStop = useCallback14(
     (value2, position) => {
       onAdd(rgbaToSketchColor(value2), position);
     },
@@ -3025,7 +3028,7 @@ import React29, {
   createContext as createContext6,
   forwardRef as forwardRef9,
   memo as memo20,
-  useCallback as useCallback15,
+  useCallback as useCallback16,
   useContext as useContext6,
   useMemo as useMemo14
 } from "react";
@@ -3033,7 +3036,7 @@ import styled22, { keyframes as keyframes2 } from "styled-components";
 
 // src/components/ScrollArea.tsx
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
-import React28, { memo as memo19, useCallback as useCallback14, useState as useState13 } from "react";
+import React28, { memo as memo19, useCallback as useCallback15, useState as useState13 } from "react";
 import styled21 from "styled-components";
 var SCROLLBAR_SIZE = 10;
 var StyledViewport = styled21(RadixScrollArea.Viewport)({
@@ -3066,7 +3069,7 @@ var ScrollArea = memo19(function ScrollArea2({ children }) {
   return /* @__PURE__ */ React28.createElement(Container2, null, /* @__PURE__ */ React28.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React28.createElement(
     StyledViewport,
     {
-      ref: useCallback14(
+      ref: useCallback15(
         (ref) => setScrollElementRef(ref),
         []
       )
@@ -3276,7 +3279,7 @@ var GridViewItem = forwardRef9(function GridViewItem2({
     }
   });
   const { textPosition, bordered, disabled } = useContext6(GridViewContext);
-  const handleClick = useCallback15(
+  const handleClick = useCallback16(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -3285,7 +3288,7 @@ var GridViewItem = forwardRef9(function GridViewItem2({
     },
     [onClick, onPress]
   );
-  const handleKeyDown = useCallback15(
+  const handleKeyDown = useCallback16(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.stopPropagation();
@@ -3353,7 +3356,7 @@ function GridViewRoot({
   bordered = false,
   disabled = false
 }) {
-  const handleClick = useCallback15(
+  const handleClick = useCallback16(
     (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -3399,12 +3402,12 @@ import { chunkBy, partition } from "@noya-app/noya-utils";
 import React33, {
   forwardRef as forwardRef12,
   memo as memo23,
-  useCallback as useCallback18,
+  useCallback as useCallback19,
   useEffect as useEffect11,
   useImperativeHandle as useImperativeHandle3,
-  useLayoutEffect as useLayoutEffect6,
+  useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo17,
-  useRef as useRef14,
+  useRef as useRef15,
   useState as useState15
 } from "react";
 import styled25 from "styled-components";
@@ -3489,12 +3492,12 @@ import React31, {
   forwardRef as forwardRef10,
   isValidElement as isValidElement3,
   memo as memo22,
-  useCallback as useCallback17,
+  useCallback as useCallback18,
   useContext as useContext8,
   useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect as useLayoutEffect5,
+  useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo16,
-  useRef as useRef13
+  useRef as useRef14
 } from "react";
 import { WindowScroller } from "react-virtualized";
 import { VariableSizeList } from "react-window";
@@ -3523,14 +3526,6 @@ function mergeEventHandlers(...handlerMaps) {
   );
 }
 
-// src/utils/mouseEvent.ts
-function isLeftButtonClicked(event) {
-  return event.button === 0;
-}
-function isRightButtonClicked(event) {
-  return event.button === 2;
-}
-
 // src/components/Sortable.tsx
 import {
   closestCenter,
@@ -3548,10 +3543,10 @@ import {
 import React30, {
   createContext as createContext7,
   memo as memo21,
-  useCallback as useCallback16,
+  useCallback as useCallback17,
   useContext as useContext7,
   useMemo as useMemo15,
-  useRef as useRef12,
+  useRef as useRef13,
   useState as useState14
 } from "react";
 import { createPortal } from "react-dom";
@@ -3609,7 +3604,7 @@ function SortableItem({
   const eventY = activatorEvent?.clientY ?? 0;
   const offsetLeft = eventX + position.x;
   const offsetTop = eventY + position.y;
-  const ref = useCallback16((node) => setNodeRef(node), [setNodeRef]);
+  const ref = useCallback17((node) => setNodeRef(node), [setNodeRef]);
   return children({
     ref,
     ...attributes,
@@ -3641,21 +3636,21 @@ function SortableRoot({
     })
   );
   const [activeIndex, setActiveIndex] = useState14();
-  const activatorEvent = useRef12(null);
-  const setActivatorEvent = useCallback16((event) => {
+  const activatorEvent = useRef13(null);
+  const setActivatorEvent = useCallback17((event) => {
     activatorEvent.current = event;
   }, []);
   const [position, setPosition] = useState14({ x: 0, y: 0 });
-  const handleDragStart = useCallback16(
+  const handleDragStart = useCallback17(
     (event) => {
       setActiveIndex(keys.indexOf(event.active.id));
     },
     [keys]
   );
-  const handleDragMove = useCallback16((event) => {
+  const handleDragMove = useCallback17((event) => {
     setPosition({ ...event.delta });
   }, []);
-  const handleDragEnd = useCallback16(
+  const handleDragEnd = useCallback17(
     (event) => {
       const { active, over } = event;
       setActiveIndex(void 0);
@@ -3755,8 +3750,8 @@ function ListViewEditableRowTitle({
   autoFocus,
   placeholder
 }) {
-  const inputRef = useRef13(null);
-  useLayoutEffect5(() => {
+  const inputRef = useRef14(null);
+  useLayoutEffect6(() => {
     const element = inputRef.current;
     if (!element || !autoFocus)
       return;
@@ -3924,16 +3919,16 @@ var ListViewRow = forwardRef10(function ListViewRow2({
     onHoverChange
   });
   const { indentation, isDragging } = useContext8(DraggingContext);
-  const handlePress = useCallback17(
+  const handlePress = useCallback18(
     (event) => {
       event.preventDefault();
-      if (!isLeftButtonClicked(event))
+      if (event.button !== 0)
         return;
       onPress?.(event);
     },
     [onPress]
   );
-  const handleDoubleClick = useCallback17(
+  const handleDoubleClick = useCallback18(
     (event) => {
       event.stopPropagation();
       onDoubleClick?.();
@@ -4030,13 +4025,13 @@ var VirtualizedListInner = forwardRef10(function VirtualizedListInner2({
   keyExtractor,
   renderItem
 }, ref) {
-  const listRef = useRef13(null);
+  const listRef = useRef14(null);
   useImperativeHandle2(ref, () => ({
     scrollToIndex(index) {
       listRef.current?.scrollToItem(index);
     }
   }));
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     listRef.current?.resetAfterIndex(0);
   }, [
     // When items change, we need to re-render the virtualized list,
@@ -4057,7 +4052,7 @@ var VirtualizedListInner = forwardRef10(function VirtualizedListInner2({
       scrollElement,
       style: useMemo16(() => ({ flex: "1 1 auto" }), [])
     },
-    useCallback17(
+    useCallback18(
       ({
         registerChild,
         onChildScroll,
@@ -4122,7 +4117,7 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
   colorScheme = "primary",
   gap = 0
 }, forwardedRef) {
-  const handleClick = useCallback17(
+  const handleClick = useCallback18(
     (event) => {
       if (event.target instanceof HTMLElement && event.target.classList.contains("scroll-component"))
         return;
@@ -4132,11 +4127,11 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
     },
     [onPress]
   );
-  const renderChild = useCallback17(
+  const renderChild = useCallback18(
     (index) => renderItem(data[index], index, { isDragging: false }),
     [data, renderItem]
   );
-  const getItemContextValue = useCallback17(
+  const getItemContextValue = useCallback18(
     (i) => {
       const current = renderChild(i);
       if (!isValidElement3(current))
@@ -4200,11 +4195,11 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
     () => ({ indentation, isDragging: true }),
     [indentation]
   );
-  const renderOverlay = useCallback17(
+  const renderOverlay = useCallback18(
     (index) => /* @__PURE__ */ React31.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React31.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
-  const renderWrappedChild = useCallback17(
+  const renderWrappedChild = useCallback18(
     (index) => {
       const contextValue = getItemContextValue(index);
       const current = renderChild(index);
@@ -4226,7 +4221,7 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
     children
   ) : children;
   const withScrollable = (children) => scrollable ? /* @__PURE__ */ React31.createElement(ScrollArea, null, children) : children(null);
-  const getItemHeight = useCallback17(
+  const getItemHeight = useCallback18(
     (index) => {
       const child = getItemContextValue(index);
       const margin = child?.marginType ? getPositionMargin(child.marginType) : { top: 0, bottom: 0 };
@@ -4235,7 +4230,7 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
     },
     [getItemContextValue, variant]
   );
-  const getKey = useCallback17(
+  const getKey = useCallback18(
     (index) => keyExtractor(data[index], index),
     [data, keyExtractor]
   );
@@ -4281,11 +4276,11 @@ var ChildrenListViewInner = forwardRef10(function ChildrenListViewInner2({ child
       ref: forwardedRef,
       ...rest,
       data: items,
-      keyExtractor: useCallback17(
+      keyExtractor: useCallback18(
         ({ key }, index) => typeof key === "string" ? key : (key ?? index).toString(),
         []
       ),
-      renderItem: useCallback17((item) => item, [])
+      renderItem: useCallback18((item) => item, [])
     }
   );
 });
@@ -4492,13 +4487,13 @@ var InputFieldWithCompletions = memo23(
     hideChildrenWhenFocused = false,
     hideMenuWhenEmptyValue = false
   }, forwardedRef) {
-    const ref = useRef14(null);
+    const ref = useRef15(null);
     const [isFocused, setIsFocused] = useState15(false);
     const [state, _setState] = useState15({
       filter: initialValue,
       selectedIndex: 0
     });
-    const updateState = useCallback18(
+    const updateState = useCallback19(
       (newState, hoverItem) => {
         const nextState = { ...state, ...newState };
         const nextItems = filterWithGroupedSections(items, nextState.filter);
@@ -4527,8 +4522,8 @@ var InputFieldWithCompletions = memo23(
       },
       [items, onChange, onHoverItem, state]
     );
-    const initialValueRef = useRef14(initialValue);
-    useLayoutEffect6(() => {
+    const initialValueRef = useRef15(initialValue);
+    useLayoutEffect7(() => {
       if (initialValueRef.current === initialValue)
         return;
       initialValueRef.current = initialValue;
@@ -4557,8 +4552,8 @@ var InputFieldWithCompletions = memo23(
         listRef.current.scrollToIndex(selectedIndex);
       }
     }, [selectedIndex]);
-    const lastSubmittedValueRef = useRef14(void 0);
-    const selectItem = useCallback18(
+    const lastSubmittedValueRef = useRef15(void 0);
+    const selectItem = useCallback19(
       (item) => {
         if (item.type === "sectionHeader")
           return;
@@ -4574,17 +4569,17 @@ var InputFieldWithCompletions = memo23(
       },
       [filter, onSelectItem, onHoverItem, ref]
     );
-    const handleChange = useCallback18(
+    const handleChange = useCallback19(
       (value) => updateState({ selectedIndex: 0, filter: value }),
       [updateState]
     );
-    const handleBlur = useCallback18(() => {
+    const handleBlur = useCallback19(() => {
       setIsFocused(false);
       const didSubmit = lastSubmittedValueRef.current?.filter === filter;
       updateState({ selectedIndex: 0, filter: initialValue }, "resetHover");
       onBlur?.(didSubmit, filter);
     }, [filter, initialValue, onBlur, updateState]);
-    const handleFocus = useCallback18(
+    const handleFocus = useCallback19(
       (event) => {
         setIsFocused(true);
         updateState({ selectedIndex: 0, filter: initialValue });
@@ -4592,11 +4587,11 @@ var InputFieldWithCompletions = memo23(
       },
       [initialValue, onFocus, updateState]
     );
-    const handleIndexChange = useCallback18(
+    const handleIndexChange = useCallback19(
       (index) => updateState({ selectedIndex: index }),
       [updateState]
     );
-    const handleKeyDown = useCallback18(
+    const handleKeyDown = useCallback19(
       (event) => {
         let handled = false;
         switch (event.key) {
@@ -4793,9 +4788,9 @@ import React35, {
   Fragment,
   isValidElement as isValidElement4,
   memo as memo25,
-  useLayoutEffect as useLayoutEffect7,
+  useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo18,
-  useRef as useRef15
+  useRef as useRef16
 } from "react";
 import styled27 from "styled-components";
 var Container4 = styled27.div(({ theme }) => ({
@@ -4825,7 +4820,7 @@ var LabeledElementView = memo25(function LabeledElementView2({
     (child) => isValidElement4(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
   const serializedIds = elementIds.join(",");
-  const containerRef = useRef15(null);
+  const containerRef = useRef16(null);
   const refs = useMemo18(() => {
     return Object.fromEntries(
       serializedIds.split(",").map((id) => [id, createRef()])
@@ -4845,7 +4840,7 @@ var LabeledElementView = memo25(function LabeledElementView2({
       })
     ));
   }, [refs, serializedIds, renderLabel]);
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     if (!containerRef.current)
       return;
     const containerRect = containerRef.current.getBoundingClientRect();
@@ -4955,7 +4950,7 @@ import React37, {
   createContext as createContext9,
   forwardRef as forwardRef13,
   memo as memo26,
-  useCallback as useCallback19,
+  useCallback as useCallback20,
   useContext as useContext9,
   useMemo as useMemo19
 } from "react";
@@ -5036,7 +5031,7 @@ function ToggleGroupRoot({
   children
 }) {
   const contextValue = useMemo19(() => ({ colorScheme }), [colorScheme]);
-  const handleValueChange = useCallback19(
+  const handleValueChange = useCallback20(
     (value2) => {
       if (!allowEmpty && !value2)
         return;
@@ -5067,11 +5062,11 @@ import { memoize as memoize2 } from "@noya-app/noya-utils";
 import React38, {
   createContext as createContext10,
   memo as memo27,
-  useCallback as useCallback20,
+  useCallback as useCallback21,
   useContext as useContext10,
   useEffect as useEffect12,
   useMemo as useMemo20,
-  useRef as useRef16
+  useRef as useRef17
 } from "react";
 import styled30 from "styled-components";
 var SelectContext = createContext10(void 0);
@@ -5149,7 +5144,7 @@ var Select = memo27(function Select2({
     )) : children,
     [children, getTitle, onChange, options]
   );
-  const listeners = useRef16(/* @__PURE__ */ new Map());
+  const listeners = useRef17(/* @__PURE__ */ new Map());
   const contextValue = useMemo20(
     () => ({
       addListener: (value2, listener) => listeners.current.set(value2, listener),
@@ -5163,7 +5158,7 @@ var Select = memo27(function Select2({
       id,
       flex,
       value,
-      onChange: useCallback20(
+      onChange: useCallback21(
         (event) => listeners.current.get(event.target.value)?.(),
         [listeners]
       ),
@@ -5175,7 +5170,7 @@ var Select = memo27(function Select2({
 
 // src/components/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import React39, { useCallback as useCallback21, useMemo as useMemo21 } from "react";
+import React39, { useCallback as useCallback22, useMemo as useMemo21 } from "react";
 import styled31 from "styled-components";
 var StyledSlider = styled31(RadixSlider.Root)({
   flex: "1",
@@ -5220,7 +5215,7 @@ var Slider = function Slider2({
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
-  const handleValueChange = useCallback21(
+  const handleValueChange = useCallback22(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
@@ -5295,7 +5290,7 @@ var Switch = function Switch2({
 import React41, {
   forwardRef as forwardRef14,
   memo as memo28,
-  useCallback as useCallback22,
+  useCallback as useCallback23,
   useContext as useContext11
 } from "react";
 var TreeRow = forwardRef14(function TreeRow2({
@@ -5306,7 +5301,7 @@ var TreeRow = forwardRef14(function TreeRow2({
   ...rest
 }, forwardedRef) {
   const { expandable } = useContext11(ListView.RowContext);
-  const handleClickChevron = useCallback22(
+  const handleClickChevron = useCallback23(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
@@ -5621,7 +5616,7 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/ArrayController.tsx
 import { range as range2 } from "@noya-app/noya-utils";
-import React43, { memo as memo30, useCallback as useCallback23, useMemo as useMemo22 } from "react";
+import React43, { memo as memo30, useCallback as useCallback24, useMemo as useMemo22 } from "react";
 import styled34, { useTheme as useTheme5 } from "styled-components";
 
 // src/components/InspectorPrimitives.tsx
@@ -5757,7 +5752,7 @@ var ArrayController = memo30(function ArrayController2({
     [getKey, items]
   );
   const indexes = reversed ? range2(0, items.length).reverse() : range2(0, items.length);
-  const handleMoveItem = useCallback23(
+  const handleMoveItem = useCallback24(
     (sourceIndex, destinationIndex, position) => {
       if (reversed) {
         if (position === "above") {
@@ -5828,7 +5823,7 @@ var ArrayController = memo30(function ArrayController2({
 
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import React44, { memo as memo31, useCallback as useCallback24 } from "react";
+import React44, { memo as memo31, useCallback as useCallback25 } from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
@@ -5842,11 +5837,11 @@ var DimensionInput = memo31(function DimensionInput2({
   disabled,
   trigger = "submit"
 }) {
-  const handleNudgeValue = useCallback24(
+  const handleNudgeValue = useCallback25(
     (value2) => onSetValue(value2, "adjust"),
     [onSetValue]
   );
-  const handleSetValue = useCallback24(
+  const handleSetValue = useCallback25(
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
@@ -5932,11 +5927,8 @@ export {
   fuzzyTokenize,
   getGradientBackground,
   getNewValue,
-  isLeftButtonClicked,
-  isRightButtonClicked,
   light_exports as lightTheme,
   mediaQuery,
-  mergeEventHandlers,
   normalizeListDestinationIndex,
   rgbaToSketchColor,
   size,