@dxos/react-ui-mosaic 0.8.4-main.c85a9c8dae → 0.8.4-main.cb12b3f963

package/dist/lib/browser/{chunk-7S4PIFKU.mjs → chunk-RUQB4JIG.mjs}

@@ -22,55 +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 { 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 Comp = 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(Comp, {
-    ...props,
-    ...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, classNames),
-    ref: composedRef
-  }, children));
-});
-var Focus = {
-  Group
-};
+import { Focus, useFocus } from "@dxos/react-ui";
 
 // src/components/Mosaic/styles.ts
 var styles = {
@@ -108,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 Comp = 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 {
@@ -169,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 && {
@@ -199,12 +150,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
         log("Root.onDragStart", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
-        }, {
-          F: __dxlog_file,
-          L: 149,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 96, S: void 0 });
         handleChange({
           source,
           location
@@ -218,12 +164,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
         log("Root.onDropTargetChange", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
-        }, {
-          F: __dxlog_file,
-          L: 162,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 109, S: void 0 });
         if (location.current.dropTargets.length === 0) {
           noTargetTimeout = setTimeout(() => setDragging(void 0), 1e3);
         } else {
@@ -257,33 +198,18 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
         log.info("Root.onDrop", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
-        }, {
-          F: __dxlog_file,
-          L: 191,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 142, S: void 0 });
         const { data: sourceData, handler: sourceHandler } = getSourceHandler(source);
         if (!sourceHandler) {
           log.warn("invalid source", {
             source: sourceData,
             handlers: Object.keys(handlers)
-          }, {
-            F: __dxlog_file,
-            L: 199,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
+          }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 149, S: void 0 });
           return;
         }
         try {
           if (location.current.dropTargets.length === 0) {
-            log.info("cancelled", void 0, {
-              F: __dxlog_file,
-              L: 214,
-              S: void 0,
-              C: (f, a) => f(...a)
-            });
+            log.info("cancelled", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 163, S: void 0 });
           } else {
             const { data: targetData, handler: targetHandler } = getTargetHandler(location);
             if (!targetHandler) {
@@ -291,12 +217,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
                 source: sourceData,
                 location,
                 handlers: Object.keys(handlers)
-              }, {
-                F: __dxlog_file,
-                L: 219,
-                S: void 0,
-                C: (f, a) => f(...a)
-              });
+              }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 168, S: void 0 });
               return;
             }
             if (sourceHandler === targetHandler) {
@@ -308,12 +229,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
               if (!sourceHandler.onTake) {
                 log.warn("invalid source", {
                   source: sourceData
-                }, {
-                  F: __dxlog_file,
-                  L: 235,
-                  S: void 0,
-                  C: (f, a) => f(...a)
-                });
+                }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 183, S: void 0 });
                 return;
               }
               sourceHandler.onTake?.({
@@ -340,7 +256,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,
@@ -353,8 +269,8 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
       };
     }),
     dragging
-  }, /* @__PURE__ */ React2.createElement(Comp, {
-    className: mx2("group", classNames),
+  }, /* @__PURE__ */ React.createElement(Comp, {
+    className: "contents group",
     [`data-${MOSAIC_ROOT_DEBUG_ATTR}`]: debug,
     ref: composedRef
   }, children));
@@ -362,38 +278,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 Comp = 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) {
@@ -528,7 +458,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,
@@ -536,14 +466,18 @@ var MosaicContainer = /* @__PURE__ */ forwardRef3(({ classNames, className, chil
     dragging: state.type === "active" ? dragging : void 0,
     scrolling,
     activeLocation,
-    setActiveLocation
-  }, /* @__PURE__ */ React3.createElement(Comp, {
-    className: mx3("h-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?.());
@@ -551,27 +485,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: _, ...props }, forwardedRef) => {
-  const rootRef = useRef4(null);
+var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, draggable: draggableProp, current, debug: _, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot3 : Primitive3.div;
+  const rootRef = useRef3(null);
   const composedRef = composeRefs(rootRef, forwardedRef);
-  const Comp = 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" ? [
@@ -597,7 +531,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 }) => {
@@ -691,6 +625,8 @@ var MosaicTile = /* @__PURE__ */ forwardRef4(({ classNames, className, children,
     );
   }, [
     rootRef,
+    forwardedRef,
+    containerId,
     dragHandle,
     eventHandler,
     data,
@@ -698,19 +634,27 @@ 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(Comp, {
-    ...props,
+  }, /* @__PURE__ */ React3.createElement(Comp, {
+    ...rest,
+    "data-object-id": id,
     [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
     role: "listitem",
-    className: mx4("relative", className, classNames),
+    // Pair `current` prop with `aria-current="true"` so the
+    // `dx-current` utility (which keys off `aria-[current=true]:`)
+    // actually fires. Without this the prop is purely advisory and
+    // any `dx-current` styling on the tile would silently no-op.
+    "aria-current": current ? "true" : void 0,
+    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, classNames),
+    className,
     style: {
       width: `${state.rect.width}px`,
       height: `${state.rect.height}px`
@@ -720,18 +664,19 @@ var MosaicTile = /* @__PURE__ */ forwardRef4(({ classNames, className, children,
 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 } 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 MOSAIC_PLACEHOLDER_LOCATION_ATTR = "mosaic-placeholder-location";
 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",
@@ -771,11 +716,12 @@ 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",
+    [`data-${MOSAIC_PLACEHOLDER_LOCATION_ATTR}`]: String(location),
     role: "none",
-    className: mx5("relative", classNames),
+    className: mx("relative", classNames),
     ref: rootRef
   }, children);
 };
@@ -783,7 +729,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;
@@ -791,55 +737,66 @@ 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 { mx as mx6 } from "@dxos/ui-theme";
+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__ */ forwardRef5(({ 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,
     dragging: dragging?.source.data,
     getId
   });
-  invariant(orientation === "vertical" || orientation === "horizontal", `Invalid orientation: ${orientation}`, {
-    F: __dxlog_file2,
-    L: 78,
-    S: void 0,
-    A: [
-      "orientation === 'vertical' || orientation === 'horizontal'",
-      "`Invalid orientation: ${orientation}`"
-    ]
-  });
-  return /* @__PURE__ */ React6.createElement("div", {
-    ...props,
-    role,
-    className: mx6("flex", orientation === "horizontal" && "h-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React6.createElement(InternalPlaceholder, {
+  invariant(orientation === "vertical" || orientation === "horizontal", `Invalid orientation: ${orientation}`, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 45, S: void 0, A: ["orientation === 'vertical' || orientation === 'horizontal'", "`Invalid orientation: ${orientation}`"] });
+  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__ */ 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
   }))));
@@ -847,35 +804,86 @@ var MosaicStackInner = /* @__PURE__ */ forwardRef5(({ classNames, className, rol
 MosaicStackInner.displayName = MOSAIC_STACK_NAME;
 var MosaicStack = MosaicStackInner;
 var MOSAIC_VIRTUAL_STACK_NAME = "MosaicVirtualStack";
-var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef5(({ classNames, className, role = "list", orientation = "vertical", items, getId, Tile, estimateSize, getScrollElement, overscan = 8, onChange, debug, ...props }, forwardedRef) => {
-  invariant(Tile, void 0, {
-    F: __dxlog_file2,
-    L: 142,
-    S: void 0,
-    A: [
-      "Tile",
-      ""
-    ]
-  });
-  const { id, dragging } = useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
+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: 101, S: void 0, A: ["Tile", ""] });
+  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__ */ React6.createElement("div", {
-    ...props,
-    role,
-    className: mx6("flex", orientation === "horizontal" && "h-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" ? {
@@ -887,43 +895,46 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef5(({ classNames, classNa
       }
     },
     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: mx2("flex h-full bg-base-surface border border-dashed border-separator rounded-xs", styles.placeholder.content)
   }));
 };
 InternalPlaceholder.displayName = "InternalPlaceholder";
@@ -941,8 +952,8 @@ var Mosaic = {
 
 export {
   useVisibleItems,
-  useFocus,
   Focus,
+  useFocus,
   styles,
   getSourceData,
   useMosaicRootContext,
@@ -950,4 +961,4 @@ export {
   useMosaicTileContext,
   Mosaic
 };
-//# sourceMappingURL=chunk-7S4PIFKU.mjs.map
+//# sourceMappingURL=chunk-RUQB4JIG.mjs.map