@dxos/react-ui-mosaic 0.8.4-main.2244d791bb → 0.8.4-main.422d1c7879

package/dist/lib/browser/{chunk-XNANTBOP.mjs → chunk-33NNDFD6.mjs}

@@ -21,66 +21,11 @@ var useVisibleItems = ({ id, items, dragging, getId }) => {
   return visibleItems;
 };
 
-// src/components/Focus/styles.ts
-var styles = {
-  container: {
-    root: [
-      // TODO(burdon): Option for border/rounded; ring/outline vs border?
-      "outline-none border border-separator md:rounded-sm",
-      // Focus (e.g., via tabster).
-      "focus:!border-accentSurface",
-      // Active (e.g., drop target).
-      "data-[focus-state=active]:border-neutralFocusIndicator",
-      // Error
-      "data-[focus-state=error]:border-rose-500"
-    ]
-  }
-};
-
 // 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 { mx } from "@dxos/ui-theme";
-var FOCUS_STATE_ATTR = "focus-state";
-var FocusContext = /* @__PURE__ */ createContext({});
-var useFocus = () => useContext(FocusContext);
-var Group = /* @__PURE__ */ forwardRef(({ classNames, className, children, asChild, orientation = "vertical", ...props }, forwardedRef) => {
-  const rootRef = useRef(null);
-  const composedRef = useComposedRefs(rootRef, forwardedRef);
-  const Root = asChild ? Slot : Primitive.div;
-  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(Root, {
-    tabIndex: 0,
-    className: mx(styles.container.root, className, classNames),
-    ...tabsterAttrs,
-    ...state && {
-      [`data-${FOCUS_STATE_ATTR}`]: state
-    },
-    ...props,
-    ref: composedRef
-  }, children));
-});
-var Focus = {
-  Group
-};
+import { Focus, useFocus } from "@dxos/react-ui";
 
 // src/components/Mosaic/styles.ts
-var styles2 = {
+var styles = {
   placeholder: {
     root: [
       "group opacity-0",
@@ -88,10 +33,10 @@ var styles2 = {
       'group-data-[mosaic-debug="true"]:bg-orange-500',
       "data-[mosaic-placeholder-state=active]:opacity-100",
       "data-[mosaic-placeholder-orientation=vertical]:snap-start",
-      "data-[mosaic-placeholder-orientation=vertical]:plb-1",
-      "data-[mosaic-placeholder-orientation=vertical]:data-[mosaic-placeholder-state=active]:plb-2.5",
-      "data-[mosaic-placeholder-orientation=horizontal]:pli-1",
-      "data-[mosaic-placeholder-orientation=horizontal]:data-[mosaic-placeholder-state=active]:pli-2.5"
+      "data-[mosaic-placeholder-orientation=vertical]:py-1",
+      "data-[mosaic-placeholder-orientation=vertical]:data-[mosaic-placeholder-state=active]:py-2.5",
+      "data-[mosaic-placeholder-orientation=horizontal]:px-1",
+      "data-[mosaic-placeholder-orientation=horizontal]:data-[mosaic-placeholder-state=active]:px-2.5"
     ],
     content: [
       "transition-all duration-0",
@@ -99,10 +44,10 @@ var styles2 = {
       // TODO(burdon): Flickers when start to drag since source is removed and then the placeholder shows up.
       //  - Use absolute positioning?
       // 'group-data-[mosaic-placeholder-state=active]:duration-200',
-      "group-data-[mosaic-placeholder-orientation=vertical]:bs-0",
-      "group-data-[mosaic-placeholder-orientation=vertical]:group-data-[mosaic-placeholder-state=active]:bs-[var(--mosaic-placeholder-height)]",
-      "group-data-[mosaic-placeholder-orientation=horizontal]:is-0",
-      "group-data-[mosaic-placeholder-orientation=horizontal]:group-data-[mosaic-placeholder-state=active]:is-[var(--mosaic-placeholder-width)]"
+      "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)]",
+      "group-data-[mosaic-placeholder-orientation=horizontal]:w-0",
+      "group-data-[mosaic-placeholder-orientation=horizontal]:group-data-[mosaic-placeholder-state=active]:w-[var(--mosaic-placeholder-width)]"
     ]
   }
 };
@@ -115,23 +60,22 @@ 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";
 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 Root = asChild ? Slot2 : Primitive2.div;
-  const [handlers, setHandlers] = useState2({});
-  const [dragging, setDragging] = useState2();
+var MosaicRoot = /* @__PURE__ */ forwardRef(({ 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 {
@@ -176,7 +120,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
           source: {
             data: sourceData,
             handler: handlers[sourceData.containerId],
-            // TOOD(burdon): Check id matches.
+            // TODO(burdon): Check id matches.
             container: location.initial.dropTargets.find((target) => target.data.type === "container")?.element
           },
           target: targetData && {
@@ -208,7 +152,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
           location: location.current.dropTargets.map((target) => target.data)
         }, {
           F: __dxlog_file,
-          L: 149,
+          L: 144,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -227,7 +171,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
           location: location.current.dropTargets.map((target) => target.data)
         }, {
           F: __dxlog_file,
-          L: 162,
+          L: 157,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -266,7 +210,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
           location: location.current.dropTargets.map((target) => target.data)
         }, {
           F: __dxlog_file,
-          L: 191,
+          L: 186,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -277,7 +221,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
             handlers: Object.keys(handlers)
           }, {
             F: __dxlog_file,
-            L: 199,
+            L: 194,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -287,7 +231,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
           if (location.current.dropTargets.length === 0) {
             log.info("cancelled", void 0, {
               F: __dxlog_file,
-              L: 214,
+              L: 209,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -300,7 +244,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
                 handlers: Object.keys(handlers)
               }, {
                 F: __dxlog_file,
-                L: 219,
+                L: 214,
                 S: void 0,
                 C: (f, a) => f(...a)
               });
@@ -317,7 +261,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
                   source: sourceData
                 }, {
                   F: __dxlog_file,
-                  L: 235,
+                  L: 230,
                   S: void 0,
                   C: (f, a) => f(...a)
                 });
@@ -347,7 +291,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,
@@ -360,8 +304,8 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
       };
     }),
     dragging
-  }, /* @__PURE__ */ React2.createElement(Root, {
-    className: mx2("group", classNames),
+  }, /* @__PURE__ */ React.createElement(Comp, {
+    className: "contents group",
     [`data-${MOSAIC_ROOT_DEBUG_ATTR}`]: debug,
     ref: composedRef
   }, children));
@@ -369,38 +313,52 @@ 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 { 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 } 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(({ classNames, className, children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, debug, ...props }, forwardedRef) => {
-  const rootRef = useRef3(null);
-  const composedRef = useComposedRefs3(rootRef, forwardedRef);
-  const Root = asChild ? Slot3 : Primitive3.div;
+var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, currentId, onCurrentChange, debug, ...props }, forwardedRef) => {
+  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) {
@@ -535,7 +493,7 @@ var MosaicContainer = /* @__PURE__ */ forwardRef3(({ classNames, className, chil
     data,
     autoscrollElement
   ]);
-  return /* @__PURE__ */ React3.createElement(MosaicContainerContextProvider, {
+  return /* @__PURE__ */ React2.createElement(MosaicContainerContextProvider, {
     id: eventHandler.id,
     eventHandler,
     orientation,
@@ -543,14 +501,18 @@ var MosaicContainer = /* @__PURE__ */ forwardRef3(({ classNames, className, chil
     dragging: state.type === "active" ? dragging : void 0,
     scrolling,
     activeLocation,
-    setActiveLocation
-  }, /* @__PURE__ */ React3.createElement(Root, {
-    className: mx3("bs-full", className, classNames),
-    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"
-    },
-    ...props,
+    setActiveLocation,
+    currentId,
+    setCurrentId,
+    registerScrollTo
+  }, /* @__PURE__ */ React2.createElement(Comp, {
+    ...composableProps(props, {
+      classNames: "h-full",
+      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"
+      }
+    }),
     [`data-${MOSAIC_CONTAINER_STATE_ATTR}`]: state.type,
     ref: composedRef
   }, children), debug?.());
@@ -558,27 +520,27 @@ var MosaicContainer = /* @__PURE__ */ forwardRef3(({ classNames, className, chil
 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 { 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(({ classNames, className, children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, debug: _ }, forwardedRef) => {
-  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 Root = asChild ? Slot4 : Primitive4.div;
   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" ? [
@@ -604,7 +566,7 @@ var MosaicTile = /* @__PURE__ */ forwardRef4(({ classNames, className, children,
   ]);
   useLayoutEffect(() => {
     const root = rootRef.current;
-    if (!root || !containerId || scrolling) {
+    if (!draggableProp || !root || !containerId || scrolling) {
       return;
     }
     const handleChange = ({ self, source }) => {
@@ -698,6 +660,8 @@ var MosaicTile = /* @__PURE__ */ forwardRef4(({ classNames, className, children,
     );
   }, [
     rootRef,
+    forwardedRef,
+    containerId,
     dragHandle,
     eventHandler,
     data,
@@ -705,18 +669,22 @@ var MosaicTile = /* @__PURE__ */ forwardRef4(({ classNames, className, children,
     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(Root, {
+  }, /* @__PURE__ */ React3.createElement(Comp, {
+    ...rest,
+    "data-object-id": id,
     [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
     role: "listitem",
-    className: mx4("relative", className, classNames),
+    className,
     ref: composedRef
-  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement(Root, {
+  }, 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, classNames),
+    className,
     style: {
       width: `${state.rect.width}px`,
       height: `${state.rect.height}px`
@@ -726,18 +694,18 @@ var MosaicTile = /* @__PURE__ */ forwardRef4(({ classNames, className, children,
 MosaicTile.displayName = MOSAIC_TILE_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 { DropIndicator as NativeDropIndicator } 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 { 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 } 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 Root = 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",
@@ -777,11 +745,11 @@ var MosaicPlaceholder = ({ classNames, children, asChild, orientation = "vertica
     scrolling,
     setActiveLocation
   ]);
-  return /* @__PURE__ */ React5.createElement(Root, {
+  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: mx("relative", classNames),
     ref: rootRef
   }, children);
 };
@@ -789,7 +757,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(NativeDropIndicator, {
+  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React4.createElement(NaturalDropIndicator, {
     ...props,
     edge: state.closestEdge
   }) : null;
@@ -797,440 +765,15 @@ 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 React8, { Fragment, forwardRef as forwardRef6 } 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 { mx as mx8 } from "@dxos/ui-theme";
-
-// src/translations.ts
-var translationKey = "@dxos/react-ui-mosaic";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "add item label": "Add item",
-        "delete menu label": "Delete"
-      }
-    }
-  }
-];
-
-// src/components/Card/styles.ts
-var styles3 = {
-  root: "group/card relative min-bs-[--rail-item] is-full card-min-width overflow-hidden",
-  border: "bg-cardSurface border border-separator dark:border-subduedSeparator rounded-sm dx-focus-ring-group-y-indicator",
-  /**
-  * Row grid.
-  * NOTE: Rows should provide their own line padding (since they may need to encapsulate buttons, etc.)
-  */
-  grid_3: "grid grid-cols-[var(--rail-item)_minmax(0,1fr)_var(--rail-item)] gap-x-1",
-  grid_2: "grid grid-cols-[var(--rail-item)_minmax(0,1fr)] gap-x-1",
-  // TODO(burdon): Address density.
-  grid_3_coarse: "grid grid-cols-[var(--l0-avatar-size)_minmax(0,1fr)_var(--rail-item)] gap-x-1",
-  poster: "max-bs-[200px]"
-};
-
-// src/components/Card/Card.tsx
-import { Slot as Slot6 } from "@radix-ui/react-slot";
-import React7, { createContext as createContext5, forwardRef as forwardRef5, useContext as useContext2 } from "react";
-import { Button, DropdownMenu, Icon, Toolbar, useTranslation } from "@dxos/react-ui";
-import { mx as mx7 } from "@dxos/ui-theme";
-
-// src/components/Image/Image.tsx
-import React6, { useCallback as useCallback2, useRef as useRef6, useState as useState5 } from "react";
-import { mx as mx6 } from "@dxos/ui-theme";
-var cache = /* @__PURE__ */ new Map();
-var Image = ({ classNames, src, alt = "", crossOrigin = "anonymous", sampleSize = 64, contrast = 0.9 }) => {
-  const [crossOriginState, setCrossOriginState] = useState5(crossOrigin);
-  const [dominantColor, setDominantColor] = useState5(void 0);
-  const [imageLoaded, setImageLoaded] = useState5(false);
-  const canvasRef = useRef6(null);
-  const handleImageError = () => {
-    setCrossOriginState(void 0);
-  };
-  const handleImageLoad = useCallback2(({ target }) => {
-    const rgb = cache.get(src);
-    if (rgb) {
-      setDominantColor(rgb);
-      setImageLoaded(true);
-      return;
-    }
-    const img = target;
-    if (!canvasRef.current) {
-      return;
-    }
-    try {
-      const color = extractDominantColor(canvasRef.current, img, {
-        sampleSize,
-        contrast
-      });
-      if (color) {
-        const rgb2 = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
-        cache.set(src, rgb2);
-        setDominantColor(rgb2);
-      }
-    } catch {
-      setCrossOriginState(void 0);
-    }
-    setImageLoaded(true);
-  }, [
-    sampleSize,
-    contrast,
-    src
-  ]);
-  return /* @__PURE__ */ React6.createElement("div", {
-    className: mx6(`relative flex is-full justify-center overflow-hidden transition-all duration-700`, classNames),
-    style: {
-      backgroundColor: dominantColor
-    }
-  }, /* @__PURE__ */ React6.createElement("canvas", {
-    ref: canvasRef,
-    style: {
-      display: "none"
-    },
-    "aria-hidden": "true"
-  }), /* @__PURE__ */ React6.createElement("div", {
-    className: "absolute inset-0 pointer-events-none",
-    style: {
-      background: dominantColor ? `radial-gradient(circle at center, transparent 30%, ${dominantColor} 100%)` : void 0,
-      transition: "opacity 0.7s ease-in-out",
-      opacity: 0.5
-    }
-  }), /* @__PURE__ */ React6.createElement("img", {
-    src,
-    alt,
-    crossOrigin: crossOriginState,
-    onError: handleImageError,
-    onLoad: handleImageLoad,
-    className: mx6("z-10 object-contain transition-opacity duration-500", classNames),
-    style: {
-      opacity: imageLoaded ? 1 : 0
-    }
-  }));
-};
-var extractDominantColor = (canvas, img, { sampleSize = 64, contrast = 0.95 }) => {
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    return null;
-  }
-  canvas.width = sampleSize;
-  canvas.height = sampleSize;
-  ctx.drawImage(img, 0, 0, sampleSize, sampleSize);
-  const imageData = ctx.getImageData(0, 0, sampleSize, sampleSize);
-  const pixels = imageData.data;
-  if (isTransparent(pixels, sampleSize)) {
-    return null;
-  }
-  let r = 0;
-  let g = 0;
-  let b = 0;
-  let totalWeight = 0;
-  const cornerSize = Math.floor(sampleSize * 0.125);
-  for (let y = 0; y < sampleSize; y++) {
-    for (let x = 0; x < sampleSize; x++) {
-      const isInTopLeft = x < cornerSize && y < cornerSize;
-      const isInTopRight = x >= sampleSize - cornerSize && y < cornerSize;
-      const isInBottomLeft = x < cornerSize && y >= sampleSize - cornerSize;
-      const isInBottomRight = x >= sampleSize - cornerSize && y >= sampleSize - cornerSize;
-      if (!isInTopLeft && !isInTopRight && !isInBottomLeft && !isInBottomRight) {
-        continue;
-      }
-      const i = (y * sampleSize + x) * 4;
-      const red = pixels[i];
-      const green = pixels[i + 1];
-      const blue = pixels[i + 2];
-      const alpha = pixels[i + 3];
-      if (alpha === 0) continue;
-      const max = Math.max(red, green, blue);
-      const min = Math.min(red, green, blue);
-      const saturation = max === 0 ? 0 : (max - min) / max;
-      const weight = 1 + saturation * 2;
-      r += red * weight;
-      g += green * weight;
-      b += blue * weight;
-      totalWeight += weight;
-    }
-  }
-  if (totalWeight > 0) {
-    r = Math.round(Math.round(r / totalWeight) * contrast);
-    g = Math.round(Math.round(g / totalWeight) * contrast);
-    b = Math.round(Math.round(b / totalWeight) * contrast);
-    return [
-      r,
-      g,
-      b
-    ];
-  }
-  return null;
-};
-var isTransparent = (pixels, sampleSize, threshold = 0.5) => {
-  let edgeTransparentPixels = 0;
-  const edgePixels = sampleSize * 4 - 4;
-  for (let x = 0; x < sampleSize; x++) {
-    const topIndex = x * 4;
-    if (pixels[topIndex + 3] === 0) edgeTransparentPixels++;
-    const bottomIndex = ((sampleSize - 1) * sampleSize + x) * 4;
-    if (pixels[bottomIndex + 3] === 0) edgeTransparentPixels++;
-  }
-  for (let y = 1; y < sampleSize - 1; y++) {
-    const leftIndex = y * sampleSize * 4;
-    if (pixels[leftIndex + 3] === 0) edgeTransparentPixels++;
-    const rightIndex = (y * sampleSize + sampleSize - 1) * 4;
-    if (pixels[rightIndex + 3] === 0) edgeTransparentPixels++;
-  }
-  return edgeTransparentPixels / edgePixels > threshold;
-};
-
-// src/components/Card/Card.tsx
-var CardContext = /* @__PURE__ */ createContext5({});
-var CardRoot = /* @__PURE__ */ forwardRef5(({ children, classNames, className, id, asChild, role = "group", border = true, fullWidth, ...props }, forwardedRef) => {
-  const Root = asChild ? Slot6 : "div";
-  return /* @__PURE__ */ React7.createElement(Root, {
-    ...id && {
-      "data-object-id": id
-    },
-    ...props,
-    role,
-    className: mx7(styles3.root, border && styles3.border, fullWidth && "!max-is-none", className, classNames),
-    ref: forwardedRef
-  }, children);
-});
-var CardToolbar = /* @__PURE__ */ forwardRef5(({ children, classNames, density = "fine", ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React7.createElement(Toolbar.Root, {
-    ...props,
-    classNames: [
-      "density-fine bg-transparent",
-      density === "fine" ? styles3.grid_3 : styles3.grid_3_coarse,
-      classNames
-    ],
-    ref: forwardedRef
-  }, children);
-});
-var CardToolbarIconButton = Toolbar.IconButton;
-var CardToolbarSeparator = Toolbar.Separator;
-var CardDragHandle = /* @__PURE__ */ forwardRef5((_, forwardedRef) => {
-  const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React7.createElement(Toolbar.IconButton, {
-    "data-testid": "card-drag-handle",
-    noTooltip: true,
-    iconOnly: true,
-    icon: "ph--dots-six-vertical--regular",
-    variant: "ghost",
-    label: t("drag handle label"),
-    classNames: "cursor-pointer",
-    size: 5,
-    disabled: !forwardedRef,
-    ref: forwardedRef
-  });
-});
-var CardClose = /* @__PURE__ */ forwardRef5(({ onClick }, forwardedRef) => {
-  const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React7.createElement(Toolbar.IconButton, {
-    iconOnly: true,
-    icon: "ph--x--regular",
-    variant: "ghost",
-    label: t("card close label"),
-    classNames: "cursor-pointer",
-    size: 5,
-    onClick,
-    ref: forwardedRef
-  });
-});
-var CardMenu = ({ context, items }) => {
-  const { t } = useTranslation(translationKey);
-  const { menuItems } = useContext2(CardContext) ?? {};
-  const combinedItems = [
-    ...items ?? [],
-    ...menuItems ?? []
-  ];
-  return /* @__PURE__ */ React7.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React7.createElement(DropdownMenu.Trigger, {
-    disabled: !combinedItems.length,
-    asChild: true
-  }, /* @__PURE__ */ React7.createElement(Card.ToolbarIconButton, {
-    iconOnly: true,
-    variant: "ghost",
-    icon: "ph--dots-three-vertical--regular",
-    label: t("action menu label")
-  })), (combinedItems?.length ?? 0) > 0 && /* @__PURE__ */ React7.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React7.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React7.createElement(DropdownMenu.Viewport, null, combinedItems?.map(({ label, onClick: onSelect }, i) => /* @__PURE__ */ React7.createElement(DropdownMenu.Item, {
-    key: i,
-    onSelect: () => onSelect(context)
-  }, label))), /* @__PURE__ */ React7.createElement(DropdownMenu.Arrow, null))));
-};
-var CardTitle = /* @__PURE__ */ forwardRef5(({ children, classNames, className, asChild, role = "heading", ...props }, forwardedRef) => {
-  const Root = asChild ? Slot6 : "div";
-  return /* @__PURE__ */ React7.createElement(Root, {
-    ...props,
-    role,
-    className: mx7("grow truncate", classNames, className),
-    ref: forwardedRef
-  }, children);
-});
-var CardContent = /* @__PURE__ */ forwardRef5(({ children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React7.createElement("div", {
-    role: "none",
-    className: "contents [&>:last-child]:pbe-1",
-    ...props,
-    ref: forwardedRef
-  }, children);
-});
-var CardRow = /* @__PURE__ */ forwardRef5(({ children, classNames, className, role = "none", icon, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React7.createElement("div", {
-    ...props,
-    role,
-    className: mx7(styles3.grid_2, "pli-1", classNames, className),
-    ref: forwardedRef
-  }, icon && /* @__PURE__ */ React7.createElement(CardIcon, {
-    classNames: "text-subdued",
-    icon
-  }) || /* @__PURE__ */ React7.createElement("div", null), children);
-});
-var CardHeading = /* @__PURE__ */ forwardRef5(({ children, classNames, className, asChild, role = "heading", variant = "default", ...props }, forwardedRef) => {
-  const Root = asChild ? Slot6 : "div";
-  const variantClassNames = {
-    default: "plb-1",
-    subtitle: "plb-2 text-xs text-description font-medium uppercase"
-  };
-  return /* @__PURE__ */ React7.createElement(Root, {
-    ...props,
-    role,
-    className: mx7(variantClassNames[variant], classNames, className),
-    ref: forwardedRef
-  }, children);
-});
-var CardText = /* @__PURE__ */ forwardRef5(({ children, classNames, className, asChild, role = "none", truncate, variant = "default", ...props }, forwardedRef) => {
-  const Root = asChild ? Slot6 : "div";
-  const variantClassNames = {
-    default: {
-      root: "plb-1"
-    },
-    description: {
-      root: "plb-1.5",
-      span: "text-sm text-description line-clamp-3"
-    }
-  };
-  return /* @__PURE__ */ React7.createElement(Root, {
-    ...props,
-    role,
-    className: mx7("flex overflow-hidden", variantClassNames[variant].root, classNames, className),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React7.createElement("span", {
-    className: mx7(variantClassNames[variant].span, truncate && "truncate")
-  }, children));
-});
-var CardPoster = (props) => {
-  const aspect = props.aspect === "auto" ? "aspect-auto" : "aspect-video";
-  if (props.image) {
-    return /* @__PURE__ */ React7.createElement("div", {
-      role: "none",
-      className: "mbe-1"
-    }, /* @__PURE__ */ React7.createElement(Image, {
-      classNames: [
-        styles3.poster,
-        aspect,
-        props.classNames
-      ],
-      src: props.image,
-      alt: props.alt
-    }));
-  }
-  if (props.icon) {
-    return /* @__PURE__ */ React7.createElement("div", {
-      role: "image",
-      className: mx7("grid place-items-center bg-inputSurface text-subdued", styles3.poster, aspect, props.classNames),
-      "aria-label": props.alt
-    }, /* @__PURE__ */ React7.createElement(Icon, {
-      icon: props.icon,
-      size: 10
-    }));
-  }
-};
-var CardAction = ({ icon, actionIcon = "ph--arrow-right--regular", label, onClick }) => {
-  return /* @__PURE__ */ React7.createElement("div", {
-    role: "none",
-    className: "is-full pli-1"
-  }, /* @__PURE__ */ React7.createElement(Button, {
-    variant: "ghost",
-    classNames: mx7(styles3.grid_3, "!p-0 is-full text-start overflow-hidden"),
-    onClick
-  }, icon ? /* @__PURE__ */ React7.createElement(CardIcon, {
-    classNames: "text-subdued",
-    icon
-  }) : /* @__PURE__ */ React7.createElement("div", null), /* @__PURE__ */ React7.createElement("span", {
-    className: mx7("min-is-0 flex-1 truncate", !actionIcon && "col-span-2")
-  }, label), actionIcon && /* @__PURE__ */ React7.createElement(CardIcon, {
-    icon: actionIcon
-  })));
-};
-var CardLink = ({ label, href }) => {
-  return /* @__PURE__ */ React7.createElement("div", {
-    role: "none",
-    className: "is-full pli-1"
-  }, /* @__PURE__ */ React7.createElement("a", {
-    className: mx7(styles3.grid_3, "group !p-0 dx-button dx-focus-ring !min-bs-1"),
-    "data-variant": "ghost",
-    href,
-    target: "_blank",
-    rel: "noreferrer"
-  }, /* @__PURE__ */ React7.createElement(CardIcon, {
-    classNames: "text-subdued",
-    icon: "ph--link--regular"
-  }), /* @__PURE__ */ React7.createElement("span", {
-    className: mx7("min-is-0 flex-1 truncate")
-  }, label), /* @__PURE__ */ React7.createElement(CardIcon, {
-    classNames: "invisible group-hover:visible",
-    icon: "ph--arrow-square-out--regular"
-  })));
-};
-var CardIconBlock = ({ classNames, children, role = "none", ...props }) => {
-  return /* @__PURE__ */ React7.createElement("div", {
-    ...props,
-    role,
-    className: mx7("grid bs-[var(--rail-item)] is-[var(--rail-item)] place-items-center", classNames)
-  }, children);
-};
-var CardIcon = ({ toolbar, ...props }) => {
-  return /* @__PURE__ */ React7.createElement(CardIconBlock, null, /* @__PURE__ */ React7.createElement(Icon, {
-    ...props,
-    size: toolbar ? 5 : 4
-  }));
-};
-var Card = {
-  Context: CardContext,
-  Root: CardRoot,
-  // Toolbar
-  Toolbar: CardToolbar,
-  ToolbarIconButton: CardToolbarIconButton,
-  ToolbarSeparator: CardToolbarSeparator,
-  DragHandle: CardDragHandle,
-  Title: CardTitle,
-  Close: CardClose,
-  Menu: CardMenu,
-  Icon: CardIcon,
-  IconBlock: CardIconBlock,
-  // Content
-  Content: CardContent,
-  Row: CardRow,
-  Heading: CardHeading,
-  Text: CardText,
-  Poster: CardPoster,
-  Action: CardAction,
-  Link: CardLink
-};
-
-// src/components/Mosaic/Stack.tsx
+import { composable as composable2, composableProps as composableProps3, 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 = /* @__PURE__ */ forwardRef6(({ classNames, className, role = "list", orientation: orientationProp = "vertical", draggable: draggable2 = true, items, getId, Tile, debug, ...props }, forwardedRef) => {
-  invariant(Tile, void 0, {
-    F: __dxlog_file2,
-    L: 75,
-    S: void 0,
-    A: [
-      "Tile",
-      ""
-    ]
-  });
-  const { id, orientation = orientationProp, dragging } = useMosaicContainerContext(MOSAIC_STACK_NAME);
+var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical", getId, items, scrollIntoView = true, Tile, draggable: draggable2 = true, debug, ...props }, forwardedRef) => {
+  const { id, orientation = orientationProp, dragging, currentId, registerScrollTo } = useMosaicContainerContext(MOSAIC_STACK_NAME);
   const visibleItems = useVisibleItems({
     id,
     items,
@@ -1239,30 +782,57 @@ var MosaicStackInner = /* @__PURE__ */ forwardRef6(({ classNames, className, rol
   });
   invariant(orientation === "vertical" || orientation === "horizontal", `Invalid orientation: ${orientation}`, {
     F: __dxlog_file2,
-    L: 78,
+    L: 91,
     S: void 0,
     A: [
       "orientation === 'vertical' || orientation === 'horizontal'",
       "`Invalid orientation: ${orientation}`"
     ]
   });
-  return /* @__PURE__ */ React8.createElement("div", {
-    ...props,
-    role,
-    className: mx8("flex", orientation === "horizontal" && "bs-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React8.createElement(InternalPlaceholder, {
+  const rootRef = useRef5(null);
+  const scrollToId = useCallback3((targetId) => {
+    if (!scrollIntoView) {
+      return;
+    }
+    const el = rootRef.current?.querySelector(`[data-object-id="${CSS.escape(targetId)}"]`);
+    el?.scrollIntoView({
+      block: "nearest",
+      behavior: "smooth"
+    });
+  }, [
+    scrollIntoView
+  ]);
+  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__ */ React8.createElement(Fragment, {
+  }), visibleItems?.map((item, index) => /* @__PURE__ */ React5.createElement(Fragment, {
     key: getId(item)
-  }, /* @__PURE__ */ React8.createElement(Tile, {
+  }, /* @__PURE__ */ React5.createElement(Tile, {
     id: getId(item),
     data: item,
     location: index + 1,
     draggable: draggable2,
+    current: getId(item) === currentId,
     debug
-  }), /* @__PURE__ */ React8.createElement(InternalPlaceholder, {
+  }), draggable2 && /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
     orientation,
     location: index + 1.5
   }))));
@@ -1270,35 +840,94 @@ var MosaicStackInner = /* @__PURE__ */ forwardRef6(({ classNames, className, rol
 MosaicStackInner.displayName = MOSAIC_STACK_NAME;
 var MosaicStack = MosaicStackInner;
 var MOSAIC_VIRTUAL_STACK_NAME = "MosaicVirtualStack";
-var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef6(({ classNames, className, role = "list", orientation = "vertical", items, getId, Tile, estimateSize, getScrollElement, overscan = 8, onChange, debug, ...props }, forwardedRef) => {
+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, {
     F: __dxlog_file2,
-    L: 142,
+    L: 180,
     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) {
+      if (!scrollIntoView) {
+        return;
+      }
+      const virtualIndex = draggable2 ? itemIndex * 2 + 1 : itemIndex;
+      virtualizer.scrollToIndex(virtualIndex, {
+        align: "start",
+        behavior: "smooth"
+      });
+    }
+  }, [
+    visibleItems,
+    getId,
+    draggable2,
+    virtualizer,
+    scrollIntoView
+  ]);
+  useEffect3(() => {
+    registerScrollTo(scrollToId);
+    return () => registerScrollTo(void 0);
+  }, [
+    registerScrollTo,
+    scrollToId
+  ]);
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React8.createElement("div", {
-    ...props,
-    role,
-    className: mx8("flex", orientation === "horizontal" && "bs-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, 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" ? {
@@ -1310,43 +939,46 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef6(({ classNames, classNa
       }
     },
     ref: forwardedRef
-  }, virtualItems.map((virtualItem) => {
-    const data = visibleItems[Math.floor(virtualItem.index / 2)];
-    return /* @__PURE__ */ React8.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__ */ React8.createElement(InternalPlaceholder, {
-      orientation,
-      location: Math.floor(virtualItem.index / 2) + 0.5
-    }) : /* @__PURE__ */ React8.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__ */ React8.createElement(MosaicPlaceholder, {
+  return /* @__PURE__ */ React5.createElement(MosaicPlaceholder, {
     ...props,
-    classNames: styles2.placeholder.root
-  }, /* @__PURE__ */ React8.createElement("div", {
-    className: mx8("flex bs-full bg-baseSurface border border-dashed border-separator rounded-sm", styles2.placeholder.content)
+    classNames: styles.placeholder.root
+  }, /* @__PURE__ */ React5.createElement("div", {
+    className: mx2("flex h-full bg-base-surface border border-dashed border-separator rounded-xs", styles.placeholder.content)
   }));
 };
 InternalPlaceholder.displayName = "InternalPlaceholder";
@@ -1364,18 +996,13 @@ var Mosaic = {
 
 export {
   useVisibleItems,
-  styles,
-  useFocus,
   Focus,
-  styles2,
+  useFocus,
+  styles,
   getSourceData,
   useMosaicRootContext,
   useMosaicContainerContext,
   useMosaicTileContext,
-  Mosaic,
-  translationKey,
-  styles3,
-  Image,
-  Card
+  Mosaic
 };
-//# sourceMappingURL=chunk-XNANTBOP.mjs.map
+//# sourceMappingURL=chunk-33NNDFD6.mjs.map