@dxos/react-ui-mosaic 0.8.4-main.6fa680abb7 → 0.8.4-main.74a063c4e0

package/dist/lib/browser/{chunk-75KCPN67.mjs → chunk-6R7CESWM.mjs}

@@ -22,56 +22,7 @@ var useVisibleItems = ({ id, items, dragging, getId }) => {
 };
 
 // src/components/Focus/Focus.tsx
-import { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable } from "@fluentui/react-tabster";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { Primitive } from "@radix-ui/react-primitive";
-import { Slot } from "@radix-ui/react-slot";
-import React, { createContext, forwardRef, useContext, useRef, useState } from "react";
-import { composableProps, mx } from "@dxos/ui-theme";
-var FOCUS_STATE_ATTR = "focus-state";
-var FocusContext = /* @__PURE__ */ createContext({});
-var useFocus = () => useContext(FocusContext);
-var Group = /* @__PURE__ */ forwardRef(({ children, asChild, orientation = "vertical", ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot : Primitive.div;
-  const rootRef = useRef(null);
-  const composedRef = useComposedRefs(rootRef, forwardedRef);
-  const focusableGroupAttrs = useFocusableGroup({
-    tabBehavior: "limited-trap-focus"
-  });
-  const arrowNavigationAttrs = useArrowNavigationGroup({
-    axis: orientation,
-    memorizeCurrent: true
-  });
-  const tabsterAttrs = useMergedTabsterAttributes_unstable(focusableGroupAttrs, arrowNavigationAttrs);
-  const [state, setState] = useState();
-  return /* @__PURE__ */ React.createElement(FocusContext.Provider, {
-    value: {
-      setFocus: setState
-    }
-  }, /* @__PURE__ */ React.createElement(Comp, {
-    ...rest,
-    ...tabsterAttrs,
-    ...state && {
-      [`data-${FOCUS_STATE_ATTR}`]: state
-    },
-    tabIndex: 0,
-    className: mx([
-      // TODO(burdon): Option for border/rounded; ring/outline vs border?
-      "outline-hidden border border-separator md:rounded-xs",
-      // Focus (e.g., via tabster).
-      "focus:!border-accent-surface",
-      // Active (e.g., drop target).
-      "data-[focus-state=active]:border-neutral-focus-indicator",
-      // Error
-      "data-[focus-state=error]:border-rose-500"
-    ], className),
-    ref: composedRef
-  }, children));
-});
-var Focus = {
-  Group
-};
+import { Focus, useFocus } from "@dxos/react-ui";
 
 // src/components/Mosaic/styles.ts
 var styles = {
@@ -109,23 +60,23 @@ var getSourceData = (source) => {
 // src/components/Mosaic/Root.tsx
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
-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 React2, { forwardRef as forwardRef2, useCallback, useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { createContext } from "@radix-ui/react-context";
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { log } from "@dxos/log";
-import { mx as mx2 } from "@dxos/ui-theme";
+import { mx } from "@dxos/ui-theme";
 var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Root.tsx";
-var [MosaicRootContextProvider, useMosaicRootContext] = createContext2("MosaicRoot");
+var [MosaicRootContextProvider, useMosaicRootContext] = createContext("MosaicRoot");
 var MOSAIC_ROOT_NAME = "Mosaic.Root";
 var MOSAIC_ROOT_DEBUG_ATTR = "mosaic-debug";
-var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, debug }, forwardedRef) => {
-  const rootRef = useRef2(null);
-  const composedRef = useComposedRefs2(rootRef, forwardedRef);
-  const Comp = asChild ? Slot2 : Primitive2.div;
-  const [handlers, setHandlers] = useState2({});
-  const [dragging, setDragging] = useState2();
+var MosaicRoot = /* @__PURE__ */ forwardRef(({ classNames, children, asChild, debug }, forwardedRef) => {
+  const rootRef = useRef(null);
+  const composedRef = useComposedRefs(rootRef, forwardedRef);
+  const Comp = asChild ? Slot : Primitive.div;
+  const [handlers, setHandlers] = useState({});
+  const [dragging, setDragging] = useState();
   const getSourceHandler = useCallback((source) => {
     const data = source.data;
     return {
@@ -341,7 +292,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
     getSourceHandler,
     getTargetHandler
   ]);
-  return /* @__PURE__ */ React2.createElement(MosaicRootContextProvider, {
+  return /* @__PURE__ */ React.createElement(MosaicRootContextProvider, {
     containers: handlers,
     addContainer: (container) => setHandlers((containers) => ({
       ...containers,
@@ -354,8 +305,8 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
       };
     }),
     dragging
-  }, /* @__PURE__ */ React2.createElement(Comp, {
-    className: mx2("group", classNames),
+  }, /* @__PURE__ */ React.createElement(Comp, {
+    className: mx("group", classNames),
     [`data-${MOSAIC_ROOT_DEBUG_ATTR}`]: debug,
     ref: composedRef
   }, children));
@@ -363,39 +314,53 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
 MosaicRoot.displayName = MOSAIC_ROOT_NAME;
 
 // src/components/Mosaic/Container.tsx
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
-import { useComposedRefs as useComposedRefs3 } 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 { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
+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 React3, { forwardRef as forwardRef3, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
-import { composableProps as composableProps2, mx as mx3 } from "@dxos/ui-theme";
+import React2, { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { composable, composableProps, mx as mx2 } from "@dxos/ui-theme";
 import { isTruthy } from "@dxos/util";
 var MOSAIC_CONTAINER_NAME = "Mosaic.Container";
-var [MosaicContainerContextProvider, useMosaicContainerContext] = createContext3("MosaicContainer");
+var [MosaicContainerContextProvider, useMosaicContainerContext] = createContext2("MosaicContainer");
 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 = /* @__PURE__ */ forwardRef3(({ children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, debug, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps2(props);
-  const Comp = asChild ? Slot3 : Primitive3.div;
-  const rootRef = useRef3(null);
-  const composedRef = useComposedRefs3(rootRef, forwardedRef);
+var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, currentId, onCurrentChange, debug, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot2 : Primitive2.div;
+  const rootRef = useRef2(null);
+  const composedRef = useComposedRefs2(rootRef, forwardedRef);
   const eventHandler = useMemo2(() => eventHandlerProp ?? {
     id: `mosaic-container-${counter++}`
   }, [
     eventHandlerProp
   ]);
   const { dragging } = useMosaicRootContext(MOSAIC_CONTAINER_NAME);
-  const [state, setState] = useState3({
+  const [state, setState] = useState2({
     type: "idle"
   });
-  const [activeLocation, setActiveLocation] = useState3();
-  const [scrolling, setScrolling] = useState3(false);
+  const [activeLocation, setActiveLocation] = useState2();
+  const [scrolling, setScrolling] = useState2(false);
+  const setCurrentId = useCallback2((id) => onCurrentChange?.(id), [
+    onCurrentChange
+  ]);
+  const scrollToRef = useRef2(void 0);
+  const registerScrollTo = useCallback2((fn) => {
+    scrollToRef.current = fn;
+  }, []);
+  useEffect2(() => {
+    if (currentId) {
+      scrollToRef.current?.(currentId);
+    }
+  }, [
+    currentId
+  ]);
   const { setFocus } = useFocus();
   useEffect2(() => {
     if (withFocus) {
@@ -530,7 +495,7 @@ var MosaicContainer = /* @__PURE__ */ forwardRef3(({ children, eventHandler: eve
     data,
     autoscrollElement
   ]);
-  return /* @__PURE__ */ React3.createElement(MosaicContainerContextProvider, {
+  return /* @__PURE__ */ React2.createElement(MosaicContainerContextProvider, {
     id: eventHandler.id,
     eventHandler,
     orientation,
@@ -538,9 +503,12 @@ var MosaicContainer = /* @__PURE__ */ forwardRef3(({ children, eventHandler: eve
     dragging: state.type === "active" ? dragging : void 0,
     scrolling,
     activeLocation,
-    setActiveLocation
-  }, /* @__PURE__ */ React3.createElement(Comp, {
-    className: mx3("h-full", className),
+    setActiveLocation,
+    currentId,
+    setCurrentId,
+    registerScrollTo
+  }, /* @__PURE__ */ React2.createElement(Comp, {
+    className: mx2("h-full", className),
     style: {
       [MOSAIC_CONTAINER_PLACEHOLDER_WIDTH]: state.type === "active" && state.bounds ? `${state.bounds.width}px` : "0px",
       [MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT]: state.type === "active" && state.bounds ? `${state.bounds.height}px` : "0px"
@@ -553,28 +521,27 @@ var MosaicContainer = /* @__PURE__ */ forwardRef3(({ children, eventHandler: eve
 MosaicContainer.displayName = MOSAIC_CONTAINER_NAME;
 
 // src/components/Mosaic/Tile.tsx
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { combine as combine3 } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
-import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { composeRefs } from "@radix-ui/react-compose-refs";
-import { createContext as createContext4 } from "@radix-ui/react-context";
-import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
-import { Slot as Slot4 } from "@radix-ui/react-slot";
-import React4, { forwardRef as forwardRef4, useLayoutEffect, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
+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 { createPortal } from "react-dom";
-import { composableProps as composableProps3, mx as mx4 } from "@dxos/ui-theme";
+import { composableProps as composableProps2, slottable } from "@dxos/ui-theme";
 var MOSAIC_TILE_NAME = "Mosaic.Tile";
-var [MosaicTileContextProvider, useMosaicTileContext] = createContext4("MosaicTile");
+var [MosaicTileContextProvider, useMosaicTileContext] = createContext3("MosaicTile");
 var MOSAIC_TILE_STATE_ATTR = "mosaic-tile-state";
-var MosaicTile = /* @__PURE__ */ forwardRef4(({ children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, debug: _, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps3(props);
-  const Comp = asChild ? Slot4 : Primitive4.div;
-  const rootRef = useRef4(null);
+var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, draggable: draggableProp, current: _current, debug: _, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot3 : Primitive3.div;
+  const rootRef = useRef3(null);
   const composedRef = composeRefs(rootRef, forwardedRef);
   const { id: containerId, eventHandler, orientation, scrolling, setActiveLocation } = useMosaicContainerContext(MOSAIC_TILE_NAME);
-  const [state, setState] = useState4({
+  const [state, setState] = useState3({
     type: "idle"
   });
   const allowedEdges = useMemo3(() => allowedEdgesProp || (orientation === "vertical" ? [
@@ -600,7 +567,7 @@ var MosaicTile = /* @__PURE__ */ forwardRef4(({ children, asChild, dragHandle, a
   ]);
   useLayoutEffect(() => {
     const root = rootRef.current;
-    if (!root || !containerId || scrolling) {
+    if (!draggableProp || !root || !containerId || scrolling) {
       return;
     }
     const handleChange = ({ self, source }) => {
@@ -694,6 +661,8 @@ var MosaicTile = /* @__PURE__ */ forwardRef4(({ children, asChild, dragHandle, a
     );
   }, [
     rootRef,
+    forwardedRef,
+    containerId,
     dragHandle,
     eventHandler,
     data,
@@ -701,19 +670,22 @@ var MosaicTile = /* @__PURE__ */ forwardRef4(({ children, asChild, dragHandle, a
     allowedEdges,
     setActiveLocation
   ]);
-  return /* @__PURE__ */ React4.createElement(MosaicTileContextProvider, {
+  const { className, ...rest } = composableProps2(props, {
+    classNames: "relative outline-none"
+  });
+  return /* @__PURE__ */ React3.createElement(MosaicTileContextProvider, {
     state
-  }, /* @__PURE__ */ React4.createElement(Comp, {
+  }, /* @__PURE__ */ React3.createElement(Comp, {
     ...rest,
+    "data-mosaic-tile-id": id,
     [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
     role: "listitem",
-    className: mx4("relative", className),
+    className,
     ref: composedRef
-  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement(Comp, {
+  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React3.createElement(Comp, {
     // NOTE: Use to control appearance while dragging.
     [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
-    // TODO(burdon): Configure drop animation.
-    className: mx4("relative", className),
+    className,
     style: {
       width: `${state.rect.width}px`,
       height: `${state.rect.height}px`
@@ -723,18 +695,18 @@ var MosaicTile = /* @__PURE__ */ forwardRef4(({ children, asChild, dragHandle, a
 MosaicTile.displayName = MOSAIC_TILE_NAME;
 
 // src/components/Mosaic/Placeholder.tsx
-import { dropTargetForElements as dropTargetForElements3 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { DropIndicator as NaturalDropIndicator } from "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box";
-import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
-import { Slot as Slot5 } from "@radix-ui/react-slot";
-import React5, { useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef5 } from "react";
-import { mx as mx5 } from "@dxos/ui-theme";
+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 { mx as mx3 } from "@dxos/ui-theme";
 var MOSAIC_PLACEHOLDER_NAME = "Mosaic.Placeholder";
 var MOSAIC_PLACEHOLDER_ORIENTATION_ATTR = "mosaic-placeholder-orientation";
 var MOSAIC_PLACEHOLDER_STATE_ATTR = "mosaic-placeholder-state";
 var MosaicPlaceholder = ({ classNames, children, asChild, orientation = "vertical", location }) => {
-  const rootRef = useRef5(null);
-  const Comp = asChild ? Slot5 : Primitive5.div;
+  const rootRef = useRef4(null);
+  const Comp = asChild ? Slot4 : Primitive4.div;
   const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useMosaicContainerContext(MOSAIC_PLACEHOLDER_NAME);
   const data = useMemo4(() => ({
     type: "placeholder",
@@ -774,11 +746,11 @@ var MosaicPlaceholder = ({ classNames, children, asChild, orientation = "vertica
     scrolling,
     setActiveLocation
   ]);
-  return /* @__PURE__ */ React5.createElement(Comp, {
+  return /* @__PURE__ */ React4.createElement(Comp, {
     [`data-${MOSAIC_PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,
     [`data-${MOSAIC_PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
     role: "none",
-    className: mx5("relative", classNames),
+    className: mx3("relative", classNames),
     ref: rootRef
   }, children);
 };
@@ -786,7 +758,7 @@ 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__ */ React5.createElement(NaturalDropIndicator, {
+  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React4.createElement(NaturalDropIndicator, {
     ...props,
     edge: state.closestEdge
   }) : null;
@@ -794,24 +766,24 @@ var MosaicDropIndicator = (props) => {
 MosaicDropIndicator.displayName = DROP_INDICATOR_NAME;
 
 // src/components/Mosaic/Stack.tsx
+import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import React6, { Fragment, forwardRef as forwardRef5 } from "react";
+import React5, { forwardRef as forwardRef2, Fragment, useCallback as useCallback3, useEffect as useEffect3, useRef as useRef5 } from "react";
 import { invariant } from "@dxos/invariant";
-import { composableProps as composableProps4, mx as mx6 } from "@dxos/ui-theme";
+import { composable as composable2, composableProps as composableProps3, mx as mx4 } 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 = /* @__PURE__ */ forwardRef5(({ role = "list", orientation: orientationProp = "vertical", draggable: draggable2 = true, items, getId, Tile, debug, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps4(props);
+var MosaicStackInner = composable2(({ getId, orientation: orientationProp = "vertical", items, Tile, draggable: draggable2 = true, debug, ...props }, forwardedRef) => {
   invariant(Tile, void 0, {
     F: __dxlog_file2,
-    L: 63,
+    L: 73,
     S: void 0,
     A: [
       "Tile",
       ""
     ]
   });
-  const { id, orientation = orientationProp, dragging } = useMosaicContainerContext(MOSAIC_STACK_NAME);
+  const { id, orientation = orientationProp, dragging, currentId, registerScrollTo } = useMosaicContainerContext(MOSAIC_STACK_NAME);
   const visibleItems = useVisibleItems({
     id,
     items,
@@ -820,30 +792,52 @@ var MosaicStackInner = /* @__PURE__ */ forwardRef5(({ role = "list", orientation
   });
   invariant(orientation === "vertical" || orientation === "horizontal", `Invalid orientation: ${orientation}`, {
     F: __dxlog_file2,
-    L: 66,
+    L: 82,
     S: void 0,
     A: [
       "orientation === 'vertical' || orientation === 'horizontal'",
       "`Invalid orientation: ${orientation}`"
     ]
   });
-  return /* @__PURE__ */ React6.createElement("div", {
-    ...rest,
-    role,
-    className: mx6("flex", orientation === "horizontal" && "h-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", className),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React6.createElement(InternalPlaceholder, {
+  const rootRef = useRef5(null);
+  const scrollToId = useCallback3((targetId) => {
+    const el = rootRef.current?.querySelector(`[data-mosaic-tile-id="${CSS.escape(targetId)}"]`);
+    el?.scrollIntoView({
+      block: "nearest",
+      behavior: "smooth"
+    });
+  }, []);
+  useEffect3(() => {
+    registerScrollTo(scrollToId);
+    return () => registerScrollTo(void 0);
+  }, [
+    registerScrollTo,
+    scrollToId
+  ]);
+  const composedRef = useComposedRefs3(rootRef, forwardedRef);
+  return /* @__PURE__ */ React5.createElement("div", {
+    ...composableProps3(props, {
+      role: "list",
+      classNames: [
+        "flex",
+        orientation === "horizontal" && "h-full [&>*]:shrink-0",
+        orientation === "vertical" && "flex-col"
+      ]
+    }),
+    ref: composedRef
+  }, draggable2 && /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
     orientation,
     location: 0.5
-  }), visibleItems?.map((item, index) => /* @__PURE__ */ React6.createElement(Fragment, {
+  }), visibleItems?.map((item, index) => /* @__PURE__ */ React5.createElement(Fragment, {
     key: getId(item)
-  }, /* @__PURE__ */ React6.createElement(Tile, {
+  }, /* @__PURE__ */ React5.createElement(Tile, {
     id: getId(item),
     data: item,
     location: index + 1,
     draggable: draggable2,
+    current: getId(item) === currentId,
     debug
-  }), /* @__PURE__ */ React6.createElement(InternalPlaceholder, {
+  }), draggable2 && /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
     orientation,
     location: index + 1.5
   }))));
@@ -851,36 +845,90 @@ var MosaicStackInner = /* @__PURE__ */ forwardRef5(({ role = "list", orientation
 MosaicStackInner.displayName = MOSAIC_STACK_NAME;
 var MosaicStack = MosaicStackInner;
 var MOSAIC_VIRTUAL_STACK_NAME = "MosaicVirtualStack";
-var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef5(({ role = "list", orientation = "vertical", items, getId, Tile, estimateSize, getScrollElement, overscan = 8, onChange, debug, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps4(props);
+var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vertical", items, getId, Tile, estimateSize, getScrollElement, overscan = 8, gap, onChange, draggable: draggable2 = true, debug, ...props }, forwardedRef) => {
   invariant(Tile, void 0, {
     F: __dxlog_file2,
-    L: 128,
+    L: 163,
     S: void 0,
     A: [
       "Tile",
       ""
     ]
   });
-  const { id, dragging } = useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
+  const { id, dragging, currentId, registerScrollTo } = useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
   const visibleItems = useVisibleItems({
     id,
     items,
     dragging: dragging?.source.data,
     getId
   });
+  const wrappedEstimateSize = draggable2 ? (index) => index % 2 === 0 ? 0 : estimateSize(Math.floor(index / 2)) : estimateSize;
   const virtualizer = useVirtualizer({
-    count: visibleItems.length * 2 + 1,
-    estimateSize,
+    // NOTE: When draggable we double the number of items to allow for placeholders.
+    count: draggable2 ? visibleItems.length * 2 + 1 : visibleItems.length,
+    estimateSize: wrappedEstimateSize,
+    gap,
+    // Key measurements by stable item ID so the size cache survives scrolling;
+    // without this, measurements are indexed by position and are lost when items reorder.
+    getItemKey: draggable2 ? (index) => index % 2 === 0 ? `ph-${index}` : getId(visibleItems[Math.floor(index / 2)]) : (index) => getId(visibleItems[index]),
     getScrollElement,
     overscan,
     onChange
   });
+  const scrollToId = useCallback3((targetId) => {
+    const itemIndex = visibleItems.findIndex((item) => getId(item) === targetId);
+    if (itemIndex >= 0) {
+      const virtualIndex = draggable2 ? itemIndex * 2 + 1 : itemIndex;
+      virtualizer.scrollToIndex(virtualIndex, {
+        align: "start",
+        behavior: "smooth"
+      });
+    }
+  }, [
+    visibleItems,
+    getId,
+    draggable2,
+    virtualizer
+  ]);
+  useEffect3(() => {
+    registerScrollTo(scrollToId);
+    return () => registerScrollTo(void 0);
+  }, [
+    registerScrollTo,
+    scrollToId
+  ]);
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React6.createElement("div", {
-    ...rest,
-    role,
-    className: mx6("flex", orientation === "horizontal" && "h-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", className),
+  const getData = (index) => {
+    if (draggable2) {
+      if (index % 2 === 0) {
+        return {
+          location: Math.floor(index / 2) + 0.5
+        };
+      } else {
+        return {
+          data: visibleItems[Math.floor(index / 2)],
+          location: Math.floor(index / 2) + 1
+        };
+      }
+    } else {
+      return {
+        data: visibleItems[index],
+        location: index + 1
+      };
+    }
+  };
+  return /* @__PURE__ */ React5.createElement("div", {
+    ...composableProps3(props, {
+      role: "list",
+      classNames: [
+        // shrink-0 is required: this div sets an explicit height via inline style (getTotalSize).
+        // Without it, a parent flex container (e.g. ScrollArea.Viewport) would shrink this div
+        // to the viewport height, collapsing the scroll content and causing scrollbar drift.
+        "flex shrink-0",
+        orientation === "horizontal" && "h-full [&>*]:shrink-0",
+        orientation === "vertical" && "flex-col"
+      ]
+    }),
     style: {
       position: "relative",
       ...orientation === "vertical" ? {
@@ -892,43 +940,46 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef5(({ role = "list", orie
       }
     },
     ref: forwardedRef
-  }, virtualItems.map((virtualItem) => {
-    const data = visibleItems[Math.floor(virtualItem.index / 2)];
-    return /* @__PURE__ */ React6.createElement("div", {
-      key: virtualItem.key,
-      "data-index": virtualItem.index,
+  }, virtualItems.map(({ key, index, start }) => {
+    const { data, location } = getData(index);
+    return /* @__PURE__ */ React5.createElement("div", {
+      key,
+      "data-index": index,
       style: {
         position: "absolute",
         top: 0,
         left: 0,
         ...orientation === "vertical" ? {
           width: "100%",
-          transform: `translateY(${virtualItem.start}px)`
+          transform: `translateY(${start}px)`
         } : {
           height: "100%",
-          transform: `translateX(${virtualItem.start}px)`
+          transform: `translateX(${start}px)`
         }
       },
       ref: virtualizer.measureElement
-    }, virtualItem.index % 2 === 0 ? /* @__PURE__ */ React6.createElement(InternalPlaceholder, {
-      orientation,
-      location: Math.floor(virtualItem.index / 2) + 0.5
-    }) : /* @__PURE__ */ React6.createElement(Tile, {
+    }, data ? /* @__PURE__ */ React5.createElement(Tile, {
       id: getId(data),
       data,
-      location: Math.floor(virtualItem.index / 2) + 1,
+      location,
+      draggable: draggable2,
+      current: getId(data) === currentId,
       debug
+    }) : /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
+      orientation,
+      location
     }));
   }));
 });
 MosaicVirtualStackInner.displayName = MOSAIC_VIRTUAL_STACK_NAME;
 var MosaicVirtualStack = MosaicVirtualStackInner;
+MosaicVirtualStack[/* @__PURE__ */ Symbol.for("dxos.composable")] = true;
 var InternalPlaceholder = (props) => {
-  return /* @__PURE__ */ React6.createElement(MosaicPlaceholder, {
+  return /* @__PURE__ */ React5.createElement(MosaicPlaceholder, {
     ...props,
     classNames: styles.placeholder.root
-  }, /* @__PURE__ */ React6.createElement("div", {
-    className: mx6("flex h-full bg-base-surface border border-dashed border-separator rounded-xs", styles.placeholder.content)
+  }, /* @__PURE__ */ React5.createElement("div", {
+    className: mx4("flex h-full bg-base-surface border border-dashed border-separator rounded-xs", styles.placeholder.content)
   }));
 };
 InternalPlaceholder.displayName = "InternalPlaceholder";
@@ -946,8 +997,8 @@ var Mosaic = {
 
 export {
   useVisibleItems,
-  useFocus,
   Focus,
+  useFocus,
   styles,
   getSourceData,
   useMosaicRootContext,
@@ -955,4 +1006,4 @@ export {
   useMosaicTileContext,
   Mosaic
 };
-//# sourceMappingURL=chunk-75KCPN67.mjs.map
+//# sourceMappingURL=chunk-6R7CESWM.mjs.map