@dxos/react-ui-mosaic 0.9.0 → 0.9.1-staging.ee54ba693a

package/dist/lib/browser/{chunk-I3M5WM6C.mjs → chunk-OBVIYZLR.mjs}

@@ -40,9 +40,10 @@ var styles = {
     ],
     content: [
       "transition-all duration-0",
-      // TODO(burdon): Don't animate open if placeholder is the source.
-      // TODO(burdon): Flickers when start to drag since source is removed and then the placeholder shows up.
-      //  - Use absolute positioning?
+      // Placeholders open instantly (`duration-0`). The source slot is reserved on drag start by
+      // activating its placeholder (see Stack.tsx), so the stack no longer collapses/flickers when the
+      // dragged item is removed. NOTE: if the open animation below is ever enabled, exempt the source
+      // placeholder — animating its reserved gap from 0 would reintroduce the start-of-drag flicker.
       // 'group-data-[mosaic-placeholder-state=active]:duration-200',
       "group-data-[mosaic-placeholder-orientation=vertical]:h-0",
       "group-data-[mosaic-placeholder-orientation=vertical]:group-data-[mosaic-placeholder-state=active]:h-[var(--mosaic-placeholder-height)]",
@@ -143,6 +144,8 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ children, asChild, debug }, forwa
     };
     let noTargetTimeout;
     return combine(monitorForElements({
+      // Only monitor Mosaic tile drags; other pragmatic-dnd sources under this root are not ours to handle.
+      canMonitor: ({ source }) => source.data.type === "tile",
       /**
       * Dragging started within any container.
       */
@@ -150,7 +153,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ children, asChild, debug }, forwa
         log("Root.onDragStart", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
-        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 96, S: void 0 });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 98, S: void 0 });
         handleChange({
           source,
           location
@@ -164,7 +167,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ children, asChild, debug }, forwa
         log("Root.onDropTargetChange", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
-        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 109, S: void 0 });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 111, S: void 0 });
         if (location.current.dropTargets.length === 0) {
           noTargetTimeout = setTimeout(() => setDragging(void 0), 1e3);
         } else {
@@ -198,18 +201,18 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ children, asChild, debug }, forwa
         log.info("Root.onDrop", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
-        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 142, S: void 0 });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 144, S: void 0 });
         const { data: sourceData, handler: sourceHandler } = getSourceHandler(source);
         if (!sourceHandler) {
           log.warn("invalid source", {
             source: sourceData,
             handlers: Object.keys(handlers)
-          }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 149, S: void 0 });
+          }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 151, S: void 0 });
           return;
         }
         try {
           if (location.current.dropTargets.length === 0) {
-            log.info("cancelled", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 163, S: void 0 });
+            log.info("cancelled", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 165, S: void 0 });
           } else {
             const { data: targetData, handler: targetHandler } = getTargetHandler(location);
             if (!targetHandler) {
@@ -217,7 +220,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ children, asChild, debug }, forwa
                 source: sourceData,
                 location,
                 handlers: Object.keys(handlers)
-              }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 168, S: void 0 });
+              }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 170, S: void 0 });
               return;
             }
             if (sourceHandler === targetHandler) {
@@ -229,7 +232,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ children, asChild, debug }, forwa
               if (!sourceHandler.onTake) {
                 log.warn("invalid source", {
                   source: sourceData
-                }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 183, S: void 0 });
+                }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 185, S: void 0 });
                 return;
               }
               sourceHandler.onTake?.({
@@ -286,7 +289,7 @@ import { createContext as createContext2 } from "@radix-ui/react-context";
 import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { bind } from "bind-event-listener";
-import React2, { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import React2, { useCallback as useCallback2, useEffect as useEffect2, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 import { composable, composableProps } from "@dxos/react-ui";
 import { isTruthy } from "@dxos/util";
 var MOSAIC_CONTAINER_NAME = "Mosaic.Container";
@@ -295,7 +298,7 @@ var MOSAIC_CONTAINER_STATE_ATTR = "mosaic-container-state";
 var MOSAIC_CONTAINER_PLACEHOLDER_WIDTH = "--mosaic-placeholder-width";
 var MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT = "--mosaic-placeholder-height";
 var counter = 0;
-var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, currentId, onCurrentChange, selectedIds, onSelectionChange, debug, ...props }, forwardedRef) => {
+var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, controllerRef, currentId, onCurrentChange, selectedIds, onSelectionChange, debug, ...props }, forwardedRef) => {
   const Comp = asChild ? Slot2 : Primitive2.div;
   const rootRef = useRef2(null);
   const composedRef = useComposedRefs2(rootRef, forwardedRef);
@@ -320,6 +323,9 @@ var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, or
   const registerScrollTo = useCallback2((fn) => {
     scrollToRef.current = fn;
   }, []);
+  useImperativeHandle(controllerRef, () => ({
+    scrollToItem: (id) => scrollToRef.current?.(id)
+  }), []);
   useEffect2(() => {
     if (currentId) {
       scrollToRef.current?.(currentId);
@@ -388,10 +394,8 @@ var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, or
             source: data2
           }) || false;
         },
-        // TODO(burdon): Provide semantic intent to onDrop.
-        // getDropEffect: () => {
-        //   return 'move';
-        // },
+        // Reorder is a move, not a copy — otherwise the browser shows the green "+" copy cursor.
+        getDropEffect: () => "move",
         /**
         * Dragging started in this container.
         */
@@ -440,9 +444,9 @@ var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, or
       autoscrollElement && [
         autoScrollForElements({
           element: autoscrollElement,
-          // canScroll: ({ element: _ }) => {
-          //   return true;
-          // },
+          // Only autoscroll for tile (reorder) drags. Resize-handle drags carry no tile data, so
+          // resizing a tile near a viewport edge must not scroll the container.
+          canScroll: ({ source }) => getSourceData(source) != null,
           getAllowedAxis: () => orientation,
           getConfiguration: () => ({
             maxScrollSpeed: "fast"
@@ -499,13 +503,14 @@ import { composeRefs } from "@radix-ui/react-compose-refs";
 import { createContext as createContext3 } from "@radix-ui/react-context";
 import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
-import React3, { useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import React3, { useCallback as useCallback3, useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 import { composableProps as composableProps2, slottable } from "@dxos/react-ui";
+import { resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
 var MOSAIC_TILE_NAME = "Mosaic.Tile";
 var [MosaicTileContextProvider, useMosaicTileContext] = createContext3("MosaicTile");
 var MOSAIC_TILE_STATE_ATTR = "mosaic-tile-state";
-var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, draggable: draggableProp, current, selected, debug: _, ...props }, forwardedRef) => {
+var MosaicTile = slottable(({ children, asChild, dragHandle: dragHandleProp, allowedEdges: allowedEdgesProp, location, id, data: dataProp, draggable: draggableProp, current, selected, size: sizeProp, onSizeChange, minSize, maxSize, debug: _, ...props }, forwardedRef) => {
   const Comp = asChild ? Slot3 : Primitive3.div;
   const rootRef = useRef3(null);
   const composedRef = composeRefs(rootRef, forwardedRef);
@@ -513,6 +518,17 @@ var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allow
   const [state, setState] = useState3({
     type: "idle"
   });
+  const [registeredDragHandle, setRegisteredDragHandle] = useState3(null);
+  const dragHandle = dragHandleProp ?? registeredDragHandle;
+  const [size, setInternalSize] = useState3(sizeProp);
+  const setSize = useCallback3((nextSize, commit) => {
+    setInternalSize(nextSize);
+    if (commit) {
+      onSizeChange?.(nextSize);
+    }
+  }, [
+    onSizeChange
+  ]);
   const allowedEdges = useMemo3(() => allowedEdgesProp || (orientation === "vertical" ? [
     "top",
     "bottom"
@@ -550,7 +566,14 @@ var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allow
         });
       }
     };
+    const handleNativeDragStart = (event) => {
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+      }
+    };
+    root.addEventListener("dragstart", handleNativeDragStart);
     return combine3(
+      () => root.removeEventListener("dragstart", handleNativeDragStart),
       // Source.
       draggable({
         element: root,
@@ -602,6 +625,8 @@ var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allow
             source: data2
           }) || false;
         },
+        // Reorder is a move, not a copy — otherwise the browser shows the green "+" copy cursor.
+        getDropEffect: () => "move",
         onDragEnter: ({ self, source }) => {
           handleChange({
             self,
@@ -642,10 +667,34 @@ var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allow
   const { className, ...rest } = composableProps2(props, {
     classNames: "relative outline-none"
   });
+  const vertical = orientation === "vertical";
+  const sized = size != null;
+  const bounded = sized || minSize != null || maxSize != null;
+  const sizeStyles = {
+    ...sized && sizeStyle(size, vertical ? "vertical" : "horizontal"),
+    ...minSize != null && {
+      [vertical ? "minBlockSize" : "minInlineSize"]: `${minSize}rem`
+    },
+    ...maxSize != null && {
+      [vertical ? "maxBlockSize" : "maxInlineSize"]: `${maxSize}rem`
+    }
+  };
   return /* @__PURE__ */ React3.createElement(MosaicTileContextProvider, {
-    state
+    state,
+    setDragHandle: setRegisteredDragHandle,
+    size,
+    setSize,
+    minSize,
+    maxSize
   }, /* @__PURE__ */ React3.createElement(Comp, {
     ...rest,
+    ...bounded && resizeAttributes,
+    ...bounded && {
+      style: {
+        ...rest.style,
+        ...sizeStyles
+      }
+    },
     "data-object-id": id,
     [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
     role: "listitem",
@@ -669,12 +718,56 @@ var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allow
 });
 MosaicTile.displayName = MOSAIC_TILE_NAME;
 
+// src/components/Mosaic/DragHandle.tsx
+import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
+import React4, { forwardRef as forwardRef2 } from "react";
+import { Button, IconButton, useTranslation } from "@dxos/react-ui";
+var MOSAIC_DRAG_HANDLE_NAME = "Mosaic.DragHandle";
+var REACT_UI_TRANSLATION_KEY = "@dxos/react-ui";
+var MosaicDragHandle = /* @__PURE__ */ forwardRef2(({ icon = "ph--dots-six-vertical--regular", label, variant = "ghost", classNames, testId, children }, forwardedRef) => {
+  const { t } = useTranslation(REACT_UI_TRANSLATION_KEY);
+  const { setDragHandle } = useMosaicTileContext(MOSAIC_DRAG_HANDLE_NAME);
+  const ref = composeRefs2(forwardedRef, setDragHandle);
+  const testIdProps = testId ? {
+    "data-testid": testId
+  } : {};
+  if (children) {
+    return /* @__PURE__ */ React4.createElement(Button, {
+      ref,
+      variant,
+      tabIndex: -1,
+      classNames: [
+        "grid place-items-center cursor-grab",
+        classNames
+      ],
+      ...testIdProps
+    }, children, /* @__PURE__ */ React4.createElement("span", {
+      className: "sr-only"
+    }, label ?? t("toolbar-drag-handle.label")));
+  }
+  return /* @__PURE__ */ React4.createElement(IconButton, {
+    ref,
+    iconOnly: true,
+    noTooltip: true,
+    tabIndex: -1,
+    variant,
+    icon,
+    label: label ?? t("toolbar-drag-handle.label"),
+    classNames: [
+      "cursor-grab",
+      classNames
+    ],
+    ...testIdProps
+  });
+});
+MosaicDragHandle.displayName = MOSAIC_DRAG_HANDLE_NAME;
+
 // src/components/Mosaic/Placeholder.tsx
 import { DropIndicator as NaturalDropIndicator } from "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box";
 import { dropTargetForElements as dropTargetForElements3 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
 import { Slot as Slot4 } from "@radix-ui/react-slot";
-import React4, { useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef4 } from "react";
+import React5, { useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef4 } from "react";
 import { mx } from "@dxos/ui-theme";
 var MOSAIC_PLACEHOLDER_NAME = "Mosaic.Placeholder";
 var MOSAIC_PLACEHOLDER_ORIENTATION_ATTR = "mosaic-placeholder-orientation";
@@ -706,6 +799,8 @@ var MosaicPlaceholder = ({ classNames, children, asChild, orientation = "vertica
           source: data2
         }) || false;
       },
+      // Reorder is a move, not a copy — otherwise the browser shows the green "+" copy cursor.
+      getDropEffect: () => "move",
       onDragEnter: () => {
         setActiveLocation(data.location);
       },
@@ -722,7 +817,7 @@ var MosaicPlaceholder = ({ classNames, children, asChild, orientation = "vertica
     scrolling,
     setActiveLocation
   ]);
-  return /* @__PURE__ */ React4.createElement(Comp, {
+  return /* @__PURE__ */ React5.createElement(Comp, {
     [`data-${MOSAIC_PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,
     [`data-${MOSAIC_PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
     [`data-${MOSAIC_PLACEHOLDER_LOCATION_ATTR}`]: String(location),
@@ -735,24 +830,46 @@ MosaicPlaceholder.displayName = MOSAIC_PLACEHOLDER_NAME;
 var DROP_INDICATOR_NAME = "Mosaic.DropIndicator";
 var MosaicDropIndicator = (props) => {
   const { state } = useMosaicTileContext(DROP_INDICATOR_NAME);
-  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React4.createElement(NaturalDropIndicator, {
+  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React5.createElement(NaturalDropIndicator, {
     ...props,
     edge: state.closestEdge
   }) : null;
 };
 MosaicDropIndicator.displayName = DROP_INDICATOR_NAME;
 
+// src/components/Mosaic/ResizeHandle.tsx
+import React6 from "react";
+import { ResizeHandle } from "@dxos/react-ui-dnd";
+var MOSAIC_RESIZE_HANDLE_NAME = "Mosaic.ResizeHandle";
+var MIN_WIDTH = 20;
+var MIN_HEIGHT = 3;
+var DEFAULT_EXTRINSIC_SIZE = 50;
+var MosaicResizeHandle = ({ minSize, maxSize, fallbackSize = DEFAULT_EXTRINSIC_SIZE }) => {
+  const { orientation = "vertical" } = useMosaicContainerContext(MOSAIC_RESIZE_HANDLE_NAME);
+  const { size, setSize, minSize: tileMinSize, maxSize: tileMaxSize } = useMosaicTileContext(MOSAIC_RESIZE_HANDLE_NAME);
+  const horizontal = orientation === "horizontal";
+  return /* @__PURE__ */ React6.createElement(ResizeHandle, {
+    side: horizontal ? "inline-end" : "block-end",
+    fallbackSize,
+    minSize: minSize ?? tileMinSize ?? (horizontal ? MIN_WIDTH : MIN_HEIGHT),
+    maxSize: maxSize ?? tileMaxSize,
+    size,
+    onSizeChange: setSize
+  });
+};
+MosaicResizeHandle.displayName = MOSAIC_RESIZE_HANDLE_NAME;
+
 // src/components/Mosaic/Stack.tsx
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import React5, { forwardRef as forwardRef2, Fragment, useCallback as useCallback3, useEffect as useEffect3, useRef as useRef5 } from "react";
+import React7, { Fragment, forwardRef as forwardRef3, useCallback as useCallback4, useEffect as useEffect3, useLayoutEffect as useLayoutEffect3, useMemo as useMemo5, useRef as useRef5 } from "react";
 import { invariant } from "@dxos/invariant";
 import { composable as composable2, composableProps as composableProps3 } from "@dxos/react-ui";
 import { mx as mx2 } from "@dxos/ui-theme";
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Stack.tsx";
 var MOSAIC_STACK_NAME = "MosaicStack";
 var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical", getId, items, scrollIntoView = true, Tile, draggable: draggable2 = true, debug, ...props }, forwardedRef) => {
-  const { id, orientation = orientationProp, dragging, currentId, selectedIds, registerScrollTo } = useMosaicContainerContext(MOSAIC_STACK_NAME);
+  const { id, orientation = orientationProp, dragging, currentId, selectedIds, registerScrollTo, setActiveLocation } = useMosaicContainerContext(MOSAIC_STACK_NAME);
   const visibleItems = useVisibleItems({
     id,
     items,
@@ -760,8 +877,28 @@ var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical",
     getId
   });
   invariant(orientation === "vertical" || orientation === "horizontal", `Invalid orientation: ${orientation}`, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 46, S: void 0, A: ["orientation === 'vertical' || orientation === 'horizontal'", "`Invalid orientation: ${orientation}`"] });
+  const draggingSource = dragging?.source.data;
+  const sourceIndex = useMemo5(() => {
+    if (!items || !draggingSource || draggingSource.containerId !== id) {
+      return -1;
+    }
+    return items.findIndex((item) => getId(item) === draggingSource.id);
+  }, [
+    items,
+    draggingSource,
+    id,
+    getId
+  ]);
+  useLayoutEffect3(() => {
+    if (sourceIndex >= 0) {
+      setActiveLocation(sourceIndex + 0.5);
+    }
+  }, [
+    sourceIndex,
+    setActiveLocation
+  ]);
   const rootRef = useRef5(null);
-  const scrollToId = useCallback3((targetId) => {
+  const scrollToId = useCallback4((targetId) => {
     if (!scrollIntoView) {
       return;
     }
@@ -781,7 +918,7 @@ var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical",
     scrollToId
   ]);
   const composedRef = useComposedRefs3(rootRef, forwardedRef);
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React7.createElement("div", {
     ...composableProps3(props, {
       role: "list",
       classNames: [
@@ -791,12 +928,12 @@ var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical",
       ]
     }),
     ref: composedRef
-  }, draggable2 && /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
+  }, draggable2 && /* @__PURE__ */ React7.createElement(InternalPlaceholder, {
     orientation,
     location: 0.5
-  }), visibleItems?.map((item, index) => /* @__PURE__ */ React5.createElement(Fragment, {
+  }), visibleItems?.map((item, index) => /* @__PURE__ */ React7.createElement(Fragment, {
     key: getId(item)
-  }, /* @__PURE__ */ React5.createElement(Tile, {
+  }, /* @__PURE__ */ React7.createElement(Tile, {
     id: getId(item),
     data: item,
     location: index + 1,
@@ -804,7 +941,7 @@ var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical",
     current: getId(item) === currentId,
     selected: selectedIds?.has(getId(item)),
     debug
-  }), draggable2 && /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
+  }), draggable2 && /* @__PURE__ */ React7.createElement(InternalPlaceholder, {
     orientation,
     location: index + 1.5
   }))));
@@ -812,8 +949,8 @@ var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical",
 MosaicStackInner.displayName = MOSAIC_STACK_NAME;
 var MosaicStack = MosaicStackInner;
 var MOSAIC_VIRTUAL_STACK_NAME = "MosaicVirtualStack";
-var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vertical", getId, items, scrollIntoView = true, Tile, estimateSize, getScrollElement, overscan = 8, gap, onChange, draggable: draggable2 = true, debug, ...props }, forwardedRef) => {
-  invariant(Tile, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 103, S: void 0, A: ["Tile", ""] });
+var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef3(({ orientation = "vertical", getId, items, scrollIntoView = true, Tile, estimateSize, getScrollElement, overscan = 8, gap, onChange, draggable: draggable2 = true, debug, ...props }, forwardedRef) => {
+  invariant(Tile, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 128, S: void 0, A: ["Tile", ""] });
   const { id, dragging, currentId, selectedIds, registerScrollTo } = useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
   const visibleItems = useVisibleItems({
     id,
@@ -838,7 +975,7 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vert
     overscan,
     onChange
   });
-  const scrollToId = useCallback3((targetId) => {
+  const scrollToId = useCallback4((targetId) => {
     const itemIndex = visibleItems.findIndex((item) => getId(item) === targetId);
     if (itemIndex >= 0) {
       if (!scrollIntoView) {
@@ -887,7 +1024,7 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vert
       };
     }
   };
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React7.createElement("div", {
     ...composableProps3(props, {
       role: "list",
       classNames: [
@@ -912,7 +1049,7 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vert
     ref: forwardedRef
   }, virtualItems.map(({ key, index, start }) => {
     const { data, location } = getData(index);
-    return /* @__PURE__ */ React5.createElement("div", {
+    return /* @__PURE__ */ React7.createElement("div", {
       key,
       "data-index": index,
       style: {
@@ -928,7 +1065,7 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vert
         }
       },
       ref: virtualizer.measureElement
-    }, data ? /* @__PURE__ */ React5.createElement(Tile, {
+    }, data ? /* @__PURE__ */ React7.createElement(Tile, {
       id: getId(data),
       data,
       location,
@@ -936,7 +1073,7 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vert
       current: getId(data) === currentId,
       selected: selectedIds?.has(getId(data)),
       debug
-    }) : /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
+    }) : /* @__PURE__ */ React7.createElement(InternalPlaceholder, {
       orientation,
       location
     }));
@@ -946,10 +1083,10 @@ MosaicVirtualStackInner.displayName = MOSAIC_VIRTUAL_STACK_NAME;
 var MosaicVirtualStack = MosaicVirtualStackInner;
 MosaicVirtualStack[/* @__PURE__ */ Symbol.for("dxos.composable")] = true;
 var InternalPlaceholder = (props) => {
-  return /* @__PURE__ */ React5.createElement(MosaicPlaceholder, {
+  return /* @__PURE__ */ React7.createElement(MosaicPlaceholder, {
     ...props,
     classNames: styles.placeholder.root
-  }, /* @__PURE__ */ React5.createElement("div", {
+  }, /* @__PURE__ */ React7.createElement("div", {
     className: mx2("flex h-full bg-base-surface border border-dashed border-separator rounded-xs", styles.placeholder.content)
   }));
 };
@@ -960,6 +1097,8 @@ var Mosaic = {
   Root: MosaicRoot,
   Container: MosaicContainer,
   Tile: MosaicTile,
+  DragHandle: MosaicDragHandle,
+  ResizeHandle: MosaicResizeHandle,
   Placeholder: MosaicPlaceholder,
   DropIndicator: MosaicDropIndicator,
   Stack: MosaicStack,
@@ -977,4 +1116,4 @@ export {
   useMosaicTileContext,
   Mosaic
 };
-//# sourceMappingURL=chunk-I3M5WM6C.mjs.map
+//# sourceMappingURL=chunk-OBVIYZLR.mjs.map