@dxos/react-ui-mosaic 0.8.4-main.1068cf700f → 0.8.4-main.2244d791bb

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

@@ -50,7 +50,7 @@ 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 Root2 = asChild ? Slot : Primitive.div;
+  const Root = asChild ? Slot : Primitive.div;
   const focusableGroupAttrs = useFocusableGroup({
     tabBehavior: "limited-trap-focus"
   });
@@ -64,7 +64,7 @@ var Group = /* @__PURE__ */ forwardRef(({ classNames, className, children, asChi
     value: {
       setFocus: setState
     }
-  }, /* @__PURE__ */ React.createElement(Root2, {
+  }, /* @__PURE__ */ React.createElement(Root, {
     tabIndex: 0,
     className: mx(styles.container.root, className, classNames),
     ...tabsterAttrs,
@@ -107,167 +107,29 @@ var styles2 = {
   }
 };
 
-// src/components/Mosaic/extension.ts
-import { StateEffect, StateField } from "@codemirror/state";
-import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
-var dropHandler = ({ onDrop = handleDrop } = {}) => {
-  const views = /* @__PURE__ */ new Set();
-  let state = null;
-  const reset = () => {
-    views.forEach((view) => view.dispatch({
-      effects: setDrop.of(null)
-    }));
-    state = null;
-  };
-  const extension = [
-    dropField,
-    ViewPlugin.fromClass(class {
-      _view;
-      constructor(_view) {
-        this._view = _view;
-        views.add(_view);
-      }
-      destroy() {
-        views.delete(this._view);
-      }
-    })
-  ];
-  return {
-    extension,
-    update: (position) => {
-      if (!position) {
-        reset();
-        return;
-      }
-      views.forEach((view) => {
-        const rect = view.dom.getBoundingClientRect();
-        if (position.x >= rect.left && position.x <= rect.right && position.y >= rect.top && position.y <= rect.bottom) {
-          let pos = view.posAtCoords(position);
-          if (pos !== null) {
-            const word = view.state.wordAt(pos);
-            if (word) {
-              const startDist = Math.abs(pos - word.from);
-              const endDist = Math.abs(pos - word.to);
-              pos = startDist < endDist ? word.from : word.to;
-            }
-            view.dispatch({
-              effects: setDrop.of(pos)
-            });
-            state = {
-              view,
-              pos
-            };
-            return;
-          }
-        }
-        view.dispatch({
-          effects: setDrop.of(null)
-        });
-      });
-    },
-    cancel: () => {
-      reset();
-    },
-    drop: ({ text, url }) => {
-      if (state) {
-        onDrop(state.view, state.pos, {
-          text,
-          url
-        });
-      }
-      reset();
-    }
-  };
-};
-var handleDrop = (view, pos, event) => {
-  const line = view.state.doc.lineAt(pos);
-  if (line.text.trim() === "") {
-    view.dispatch({
-      changes: {
-        from: pos,
-        insert: `
-![${event.text}](${event.url})
-`
-      },
-      effects: setDrop.of(null)
-    });
-  } else {
-    view.dispatch({
-      changes: {
-        from: pos,
-        insert: ` [${event.text}](${event.url})`
-      },
-      effects: setDrop.of(null)
-    });
-  }
+// src/components/Mosaic/types.ts
+var getSourceData = (source) => {
+  return source.data.type === "tile" ? source.data : null;
 };
-var setDrop = StateEffect.define();
-var dropField = StateField.define({
-  create: () => Decoration.none,
-  update: (decorations, tr) => {
-    for (const effect of tr.effects) {
-      if (effect.is(setDrop)) {
-        if (effect.value === null) {
-          return Decoration.none;
-        }
-        return Decoration.set([
-          Decoration.widget({
-            widget: new class extends WidgetType {
-              toDOM() {
-                const dom = document.createElement("span");
-                dom.className = "cm-drop-cursor";
-                dom.style.borderLeft = "2px solid var(--dx-accentSurface)";
-                dom.style.display = "inline-block";
-                dom.style.height = "1em";
-                dom.style.verticalAlign = "middle";
-                return dom;
-              }
-            }(),
-            side: 0
-          }).range(effect.value)
-        ]);
-      }
-    }
-    return decorations.map(tr.changes);
-  },
-  provide: (field) => EditorView.decorations.from(field)
-});
 
-// src/components/Stack/Stack.tsx
-import { useVirtualizer } from "@tanstack/react-virtual";
-import React5, { Fragment, forwardRef as forwardRef4 } from "react";
-import { invariant } from "@dxos/invariant";
-import { mx as mx5 } from "@dxos/ui-theme";
-
-// src/components/Mosaic/Mosaic.tsx
+// src/components/Mosaic/Root.tsx
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { draggable, dropTargetForElements, monitorForElements } 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 { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
-import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import { DropIndicator as NativeDropIndicator } from "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box";
-import { composeRefs, useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
+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 { bind } from "bind-event-listener";
-import React2, { forwardRef as forwardRef2, useCallback, useEffect, useLayoutEffect, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
-import { createPortal } from "react-dom";
+import React2, { forwardRef as forwardRef2, useCallback, useEffect, useRef as useRef2, useState as useState2 } from "react";
 import { log } from "@dxos/log";
 import { mx as mx2 } from "@dxos/ui-theme";
-import { isTruthy } from "@dxos/util";
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Mosaic.tsx";
-var getSourceData = (source) => {
-  return source.data.type === "tile" ? source.data : null;
-};
-var [RootContextProvider, useRootContext] = createContext2("MosaicRoot");
-var ROOT_NAME = "Mosaic.Root";
-var ROOT_DEBUG_ATTR = "mosaic-debug";
-var Root = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, debug }, forwardedRef) => {
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Root.tsx";
+var [MosaicRootContextProvider, useMosaicRootContext] = createContext2("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 Root2 = asChild ? Slot2 : Primitive2.div;
+  const Root = asChild ? Slot2 : Primitive2.div;
   const [handlers, setHandlers] = useState2({});
   const [dragging, setDragging] = useState2();
   const getSourceHandler = useCallback((source) => {
@@ -346,7 +208,7 @@ var Root = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, debug }
           location: location.current.dropTargets.map((target) => target.data)
         }, {
           F: __dxlog_file,
-          L: 219,
+          L: 149,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -365,7 +227,7 @@ var Root = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, debug }
           location: location.current.dropTargets.map((target) => target.data)
         }, {
           F: __dxlog_file,
-          L: 232,
+          L: 162,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -404,7 +266,7 @@ var Root = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, debug }
           location: location.current.dropTargets.map((target) => target.data)
         }, {
           F: __dxlog_file,
-          L: 261,
+          L: 191,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -415,7 +277,7 @@ var Root = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, debug }
             handlers: Object.keys(handlers)
           }, {
             F: __dxlog_file,
-            L: 269,
+            L: 199,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -425,7 +287,7 @@ var Root = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, debug }
           if (location.current.dropTargets.length === 0) {
             log.info("cancelled", void 0, {
               F: __dxlog_file,
-              L: 284,
+              L: 214,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -438,7 +300,7 @@ var Root = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, debug }
                 handlers: Object.keys(handlers)
               }, {
                 F: __dxlog_file,
-                L: 289,
+                L: 219,
                 S: void 0,
                 C: (f, a) => f(...a)
               });
@@ -455,7 +317,7 @@ var Root = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, debug }
                   source: sourceData
                 }, {
                   F: __dxlog_file,
-                  L: 305,
+                  L: 235,
                   S: void 0,
                   C: (f, a) => f(...a)
                 });
@@ -485,7 +347,7 @@ var Root = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, debug }
     getSourceHandler,
     getTargetHandler
   ]);
-  return /* @__PURE__ */ React2.createElement(RootContextProvider, {
+  return /* @__PURE__ */ React2.createElement(MosaicRootContextProvider, {
     containers: handlers,
     addContainer: (container) => setHandlers((containers) => ({
       ...containers,
@@ -498,36 +360,49 @@ var Root = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, debug }
       };
     }),
     dragging
-  }, /* @__PURE__ */ React2.createElement(Root2, {
+  }, /* @__PURE__ */ React2.createElement(Root, {
     className: mx2("group", classNames),
-    [`data-${ROOT_DEBUG_ATTR}`]: debug,
+    [`data-${MOSAIC_ROOT_DEBUG_ATTR}`]: debug,
     ref: composedRef
   }, children));
 });
-Root.displayName = ROOT_NAME;
-var CONTAINER_NAME = "Mosaic.Container";
-var [ContainerContextProvider, useContainerContext] = createContext2("MosaicContainer");
-var CONTAINER_STATE_ATTR = "mosaic-container-state";
-var CONTAINER_PLACEHOLDER_WIDTH = "--mosaic-placeholder-width";
-var CONTAINER_PLACEHOLDER_HEIGHT = "--mosaic-placeholder-height";
+MosaicRoot.displayName = MOSAIC_ROOT_NAME;
+
+// src/components/Mosaic/Container.tsx
+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 { 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 { isTruthy } from "@dxos/util";
+var MOSAIC_CONTAINER_NAME = "Mosaic.Container";
+var [MosaicContainerContextProvider, useMosaicContainerContext] = createContext3("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 Container = /* @__PURE__ */ forwardRef2(({ className, classNames, children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, debug, ...props }, forwardedRef) => {
-  const rootRef = useRef2(null);
-  const composedRef = useComposedRefs2(rootRef, forwardedRef);
-  const Root2 = asChild ? Slot2 : Primitive2.div;
+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;
   const eventHandler = useMemo2(() => eventHandlerProp ?? {
     id: `mosaic-container-${counter++}`
   }, [
     eventHandlerProp
   ]);
-  const { dragging } = useRootContext(CONTAINER_NAME);
-  const [state, setState] = useState2({
+  const { dragging } = useMosaicRootContext(MOSAIC_CONTAINER_NAME);
+  const [state, setState] = useState3({
     type: "idle"
   });
-  const [activeLocation, setActiveLocation] = useState2();
-  const [scrolling, setScrolling] = useState2(false);
+  const [activeLocation, setActiveLocation] = useState3();
+  const [scrolling, setScrolling] = useState3(false);
   const { setFocus } = useFocus();
-  useEffect(() => {
+  useEffect2(() => {
     if (withFocus) {
       setFocus?.(state.type === "active" ? "active" : void 0);
     }
@@ -536,8 +411,8 @@ var Container = /* @__PURE__ */ forwardRef2(({ className, classNames, children,
     withFocus,
     state
   ]);
-  const { addContainer, removeContainer } = useRootContext(eventHandler.id);
-  useEffect(() => {
+  const { addContainer, removeContainer } = useMosaicRootContext(eventHandler.id);
+  useEffect2(() => {
     addContainer(eventHandler);
     return () => removeContainer(eventHandler.id);
   }, [
@@ -549,7 +424,7 @@ var Container = /* @__PURE__ */ forwardRef2(({ className, classNames, children,
   }), [
     eventHandler.id
   ]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!rootRef.current) {
       return;
     }
@@ -561,7 +436,7 @@ var Container = /* @__PURE__ */ forwardRef2(({ className, classNames, children,
         setScrolling(false);
       }, 500);
     };
-    return combine(...[
+    return combine2(...[
       /**
       * Custom event for dragging cancellation.
       */
@@ -660,7 +535,7 @@ var Container = /* @__PURE__ */ forwardRef2(({ className, classNames, children,
     data,
     autoscrollElement
   ]);
-  return /* @__PURE__ */ React2.createElement(ContainerContextProvider, {
+  return /* @__PURE__ */ React3.createElement(MosaicContainerContextProvider, {
     id: eventHandler.id,
     eventHandler,
     orientation,
@@ -669,30 +544,44 @@ var Container = /* @__PURE__ */ forwardRef2(({ className, classNames, children,
     scrolling,
     activeLocation,
     setActiveLocation
-  }, /* @__PURE__ */ React2.createElement(Root2, {
-    className: mx2("bs-full", className, classNames),
+  }, /* @__PURE__ */ React3.createElement(Root, {
+    className: mx3("bs-full", className, classNames),
     style: {
-      [CONTAINER_PLACEHOLDER_WIDTH]: state.type === "active" && state.bounds ? `${state.bounds.width}px` : "0px",
-      [CONTAINER_PLACEHOLDER_HEIGHT]: state.type === "active" && state.bounds ? `${state.bounds.height}px` : "0px"
+      [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,
-    [`data-${CONTAINER_STATE_ATTR}`]: state.type,
+    [`data-${MOSAIC_CONTAINER_STATE_ATTR}`]: state.type,
     ref: composedRef
   }, children), debug?.());
 });
-Container.displayName = CONTAINER_NAME;
-var TILE_NAME = "Mosaic.Tile";
-var [TileContextProvider, useTileContext] = createContext2("MosaicTile");
-var TILE_STATE_ATTR = "mosaic-tile-state";
-var Tile = /* @__PURE__ */ forwardRef2(({ className, classNames, children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, debug: _ }, forwardedRef) => {
-  const rootRef = useRef2(null);
+MosaicContainer.displayName = MOSAIC_CONTAINER_NAME;
+
+// src/components/Mosaic/Tile.tsx
+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 { createPortal } from "react-dom";
+import { mx as mx4 } from "@dxos/ui-theme";
+var MOSAIC_TILE_NAME = "Mosaic.Tile";
+var [MosaicTileContextProvider, useMosaicTileContext] = createContext4("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);
   const composedRef = composeRefs(rootRef, forwardedRef);
-  const Root2 = asChild ? Slot2 : Primitive2.div;
-  const { id: containerId, eventHandler, orientation, scrolling, setActiveLocation } = useContainerContext(TILE_NAME);
-  const [state, setState] = useState2({
+  const Root = asChild ? Slot4 : Primitive4.div;
+  const { id: containerId, eventHandler, orientation, scrolling, setActiveLocation } = useMosaicContainerContext(MOSAIC_TILE_NAME);
+  const [state, setState] = useState4({
     type: "idle"
   });
-  const allowedEdges = useMemo2(() => allowedEdgesProp || (orientation === "vertical" ? [
+  const allowedEdges = useMemo3(() => allowedEdgesProp || (orientation === "vertical" ? [
     "top",
     "bottom"
   ] : [
@@ -702,7 +591,7 @@ var Tile = /* @__PURE__ */ forwardRef2(({ className, classNames, children, asChi
     allowedEdgesProp,
     orientation
   ]);
-  const data = useMemo2(() => ({
+  const data = useMemo3(() => ({
     type: "tile",
     id,
     containerId,
@@ -729,7 +618,7 @@ var Tile = /* @__PURE__ */ forwardRef2(({ className, classNames, children, asChi
         });
       }
     };
-    return combine(
+    return combine3(
       // Source.
       draggable({
         element: root,
@@ -768,7 +657,7 @@ var Tile = /* @__PURE__ */ forwardRef2(({ className, classNames, children, asChi
         }
       }),
       // Target.
-      dropTargetForElements({
+      dropTargetForElements2({
         element: root,
         getData: ({ input, element }) => attachClosestEdge(data, {
           input,
@@ -816,33 +705,41 @@ var Tile = /* @__PURE__ */ forwardRef2(({ className, classNames, children, asChi
     allowedEdges,
     setActiveLocation
   ]);
-  return /* @__PURE__ */ React2.createElement(TileContextProvider, {
+  return /* @__PURE__ */ React4.createElement(MosaicTileContextProvider, {
     state
-  }, /* @__PURE__ */ React2.createElement(Root2, {
-    [`data-${TILE_STATE_ATTR}`]: state.type,
+  }, /* @__PURE__ */ React4.createElement(Root, {
+    [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
     role: "listitem",
-    className: mx2("relative", className, classNames),
+    className: mx4("relative", className, classNames),
     ref: composedRef
-  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React2.createElement(Root2, {
+  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement(Root, {
     // NOTE: Use to control appearance while dragging.
-    [`data-${TILE_STATE_ATTR}`]: state.type,
+    [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
     // TODO(burdon): Configure drop animation.
-    className: mx2("relative", className, classNames),
+    className: mx4("relative", className, classNames),
     style: {
       width: `${state.rect.width}px`,
       height: `${state.rect.height}px`
     }
   }, children), state.container));
 });
-Tile.displayName = TILE_NAME;
-var PLACEHOLDER_NAME = "Mosaic.Placeholder";
-var PLACEHOLDER_ORIENTATION_ATTR = "mosaic-placeholder-orientation";
-var PLACEHOLDER_STATE_ATTR = "mosaic-placeholder-state";
-var Placeholder = ({ classNames, children, asChild, orientation = "vertical", location }) => {
-  const rootRef = useRef2(null);
-  const Root2 = asChild ? Slot2 : Primitive2.div;
-  const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useContainerContext(PLACEHOLDER_NAME);
-  const data = useMemo2(() => ({
+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 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";
+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 { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useMosaicContainerContext(MOSAIC_PLACEHOLDER_NAME);
+  const data = useMemo4(() => ({
     type: "placeholder",
     containerId,
     location
@@ -850,12 +747,12 @@ var Placeholder = ({ classNames, children, asChild, orientation = "vertical", lo
     containerId,
     location
   ]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const root = rootRef.current;
     if (!root || scrolling) {
       return;
     }
-    return dropTargetForElements({
+    return dropTargetForElements3({
       element: root,
       getData: () => data,
       canDrop: ({ source }) => {
@@ -880,33 +777,30 @@ var Placeholder = ({ classNames, children, asChild, orientation = "vertical", lo
     scrolling,
     setActiveLocation
   ]);
-  return /* @__PURE__ */ React2.createElement(Root2, {
-    [`data-${PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,
-    [`data-${PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
+  return /* @__PURE__ */ React5.createElement(Root, {
+    [`data-${MOSAIC_PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,
+    [`data-${MOSAIC_PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
     role: "none",
-    className: mx2("relative", classNames),
+    className: mx5("relative", classNames),
     ref: rootRef
   }, children);
 };
-Placeholder.displayName = PLACEHOLDER_NAME;
+MosaicPlaceholder.displayName = MOSAIC_PLACEHOLDER_NAME;
 var DROP_INDICATOR_NAME = "Mosaic.DropIndicator";
-var DropIndicator = (props) => {
-  const { state } = useTileContext(DROP_INDICATOR_NAME);
-  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React2.createElement(NativeDropIndicator, {
+var MosaicDropIndicator = (props) => {
+  const { state } = useMosaicTileContext(DROP_INDICATOR_NAME);
+  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React5.createElement(NativeDropIndicator, {
     ...props,
     edge: state.closestEdge
   }) : null;
 };
-DropIndicator.displayName = DROP_INDICATOR_NAME;
-var Mosaic = {
-  Root,
-  Container,
-  Tile,
-  Placeholder,
-  DropIndicator,
-  Stack,
-  VirtualStack
-};
+MosaicDropIndicator.displayName = DROP_INDICATOR_NAME;
+
+// src/components/Mosaic/Stack.tsx
+import { useVirtualizer } from "@tanstack/react-virtual";
+import React8, { Fragment, forwardRef as forwardRef6 } from "react";
+import { invariant } from "@dxos/invariant";
+import { mx as mx8 } from "@dxos/ui-theme";
 
 // src/translations.ts
 var translationKey = "@dxos/react-ui-mosaic";
@@ -937,20 +831,20 @@ var styles3 = {
 };
 
 // src/components/Card/Card.tsx
-import { Slot as Slot3 } from "@radix-ui/react-slot";
-import React4, { createContext as createContext3, forwardRef as forwardRef3, useContext as useContext2 } from "react";
+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 mx4 } from "@dxos/ui-theme";
+import { mx as mx7 } from "@dxos/ui-theme";
 
 // src/components/Image/Image.tsx
-import React3, { useCallback as useCallback2, useRef as useRef3, useState as useState3 } from "react";
-import { mx as mx3 } from "@dxos/ui-theme";
+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] = useState3(crossOrigin);
-  const [dominantColor, setDominantColor] = useState3(void 0);
-  const [imageLoaded, setImageLoaded] = useState3(false);
-  const canvasRef = useRef3(null);
+  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);
   };
@@ -984,31 +878,31 @@ var Image = ({ classNames, src, alt = "", crossOrigin = "anonymous", sampleSize
     contrast,
     src
   ]);
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: mx3(`relative flex is-full justify-center overflow-hidden transition-all duration-700`, classNames),
+  return /* @__PURE__ */ React6.createElement("div", {
+    className: mx6(`relative flex is-full justify-center overflow-hidden transition-all duration-700`, classNames),
     style: {
       backgroundColor: dominantColor
     }
-  }, /* @__PURE__ */ React3.createElement("canvas", {
+  }, /* @__PURE__ */ React6.createElement("canvas", {
     ref: canvasRef,
     style: {
       display: "none"
     },
     "aria-hidden": "true"
-  }), /* @__PURE__ */ React3.createElement("div", {
+  }), /* @__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__ */ React3.createElement("img", {
+  }), /* @__PURE__ */ React6.createElement("img", {
     src,
     alt,
     crossOrigin: crossOriginState,
     onError: handleImageError,
     onLoad: handleImageLoad,
-    className: mx3("z-10 object-contain transition-opacity duration-500", classNames),
+    className: mx6("z-10 object-contain transition-opacity duration-500", classNames),
     style: {
       opacity: imageLoaded ? 1 : 0
     }
@@ -1088,21 +982,21 @@ var isTransparent = (pixels, sampleSize, threshold = 0.5) => {
 };
 
 // src/components/Card/Card.tsx
-var CardContext = /* @__PURE__ */ createContext3({});
-var CardRoot = /* @__PURE__ */ forwardRef3(({ children, classNames, className, id, asChild, role = "group", border = true, fullWidth, ...props }, forwardedRef) => {
-  const Root2 = asChild ? Slot3 : "div";
-  return /* @__PURE__ */ React4.createElement(Root2, {
+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: mx4(styles3.root, border && styles3.border, fullWidth && "!max-is-none", className, classNames),
+    className: mx7(styles3.root, border && styles3.border, fullWidth && "!max-is-none", className, classNames),
     ref: forwardedRef
   }, children);
 });
-var CardToolbar = /* @__PURE__ */ forwardRef3(({ children, classNames, density = "fine", ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React4.createElement(Toolbar.Root, {
+var CardToolbar = /* @__PURE__ */ forwardRef5(({ children, classNames, density = "fine", ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React7.createElement(Toolbar.Root, {
     ...props,
     classNames: [
       "density-fine bg-transparent",
@@ -1114,9 +1008,9 @@ var CardToolbar = /* @__PURE__ */ forwardRef3(({ children, classNames, density =
 });
 var CardToolbarIconButton = Toolbar.IconButton;
 var CardToolbarSeparator = Toolbar.Separator;
-var CardDragHandle = /* @__PURE__ */ forwardRef3((_, forwardedRef) => {
+var CardDragHandle = /* @__PURE__ */ forwardRef5((_, forwardedRef) => {
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React4.createElement(Toolbar.IconButton, {
+  return /* @__PURE__ */ React7.createElement(Toolbar.IconButton, {
     "data-testid": "card-drag-handle",
     noTooltip: true,
     iconOnly: true,
@@ -1129,9 +1023,9 @@ var CardDragHandle = /* @__PURE__ */ forwardRef3((_, forwardedRef) => {
     ref: forwardedRef
   });
 });
-var CardClose = /* @__PURE__ */ forwardRef3(({ onClick }, forwardedRef) => {
+var CardClose = /* @__PURE__ */ forwardRef5(({ onClick }, forwardedRef) => {
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React4.createElement(Toolbar.IconButton, {
+  return /* @__PURE__ */ React7.createElement(Toolbar.IconButton, {
     iconOnly: true,
     icon: "ph--x--regular",
     variant: "ghost",
@@ -1149,62 +1043,62 @@ var CardMenu = ({ context, items }) => {
     ...items ?? [],
     ...menuItems ?? []
   ];
-  return /* @__PURE__ */ React4.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
+  return /* @__PURE__ */ React7.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React7.createElement(DropdownMenu.Trigger, {
     disabled: !combinedItems.length,
     asChild: true
-  }, /* @__PURE__ */ React4.createElement(Card.ToolbarIconButton, {
+  }, /* @__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__ */ React4.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, combinedItems?.map(({ label, onClick: onSelect }, i) => /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+  })), (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__ */ React4.createElement(DropdownMenu.Arrow, null))));
+  }, label))), /* @__PURE__ */ React7.createElement(DropdownMenu.Arrow, null))));
 };
-var CardTitle = /* @__PURE__ */ forwardRef3(({ children, classNames, className, asChild, role = "heading", ...props }, forwardedRef) => {
-  const Root2 = asChild ? Slot3 : "div";
-  return /* @__PURE__ */ React4.createElement(Root2, {
+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: mx4("grow truncate", classNames, className),
+    className: mx7("grow truncate", classNames, className),
     ref: forwardedRef
   }, children);
 });
-var CardContent = /* @__PURE__ */ forwardRef3(({ children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React4.createElement("div", {
+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__ */ forwardRef3(({ children, classNames, className, role = "none", icon, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React4.createElement("div", {
+var CardRow = /* @__PURE__ */ forwardRef5(({ children, classNames, className, role = "none", icon, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React7.createElement("div", {
     ...props,
     role,
-    className: mx4(styles3.grid_2, "pli-1", classNames, className),
+    className: mx7(styles3.grid_2, "pli-1", classNames, className),
     ref: forwardedRef
-  }, icon && /* @__PURE__ */ React4.createElement(CardIcon, {
+  }, icon && /* @__PURE__ */ React7.createElement(CardIcon, {
     classNames: "text-subdued",
     icon
-  }) || /* @__PURE__ */ React4.createElement("div", null), children);
+  }) || /* @__PURE__ */ React7.createElement("div", null), children);
 });
-var CardHeading = /* @__PURE__ */ forwardRef3(({ children, classNames, className, asChild, role = "heading", variant = "default", ...props }, forwardedRef) => {
-  const Root2 = asChild ? Slot3 : "div";
+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__ */ React4.createElement(Root2, {
+  return /* @__PURE__ */ React7.createElement(Root, {
     ...props,
     role,
-    className: mx4(variantClassNames[variant], classNames, className),
+    className: mx7(variantClassNames[variant], classNames, className),
     ref: forwardedRef
   }, children);
 });
-var CardText = /* @__PURE__ */ forwardRef3(({ children, classNames, className, asChild, role = "none", truncate, variant = "default", ...props }, forwardedRef) => {
-  const Root2 = asChild ? Slot3 : "div";
+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"
@@ -1214,22 +1108,22 @@ var CardText = /* @__PURE__ */ forwardRef3(({ children, classNames, className, a
       span: "text-sm text-description line-clamp-3"
     }
   };
-  return /* @__PURE__ */ React4.createElement(Root2, {
+  return /* @__PURE__ */ React7.createElement(Root, {
     ...props,
     role,
-    className: mx4("flex overflow-hidden", variantClassNames[variant].root, classNames, className),
+    className: mx7("flex overflow-hidden", variantClassNames[variant].root, classNames, className),
     ref: forwardedRef
-  }, /* @__PURE__ */ React4.createElement("span", {
-    className: mx4(variantClassNames[variant].span, truncate && "truncate")
+  }, /* @__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__ */ React4.createElement("div", {
+    return /* @__PURE__ */ React7.createElement("div", {
       role: "none",
       className: "mbe-1"
-    }, /* @__PURE__ */ React4.createElement(Image, {
+    }, /* @__PURE__ */ React7.createElement(Image, {
       classNames: [
         styles3.poster,
         aspect,
@@ -1240,62 +1134,62 @@ var CardPoster = (props) => {
     }));
   }
   if (props.icon) {
-    return /* @__PURE__ */ React4.createElement("div", {
+    return /* @__PURE__ */ React7.createElement("div", {
       role: "image",
-      className: mx4("grid place-items-center bg-inputSurface text-subdued", styles3.poster, aspect, props.classNames),
+      className: mx7("grid place-items-center bg-inputSurface text-subdued", styles3.poster, aspect, props.classNames),
       "aria-label": props.alt
-    }, /* @__PURE__ */ React4.createElement(Icon, {
+    }, /* @__PURE__ */ React7.createElement(Icon, {
       icon: props.icon,
       size: 10
     }));
   }
 };
 var CardAction = ({ icon, actionIcon = "ph--arrow-right--regular", label, onClick }) => {
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: "is-full pli-1"
-  }, /* @__PURE__ */ React4.createElement(Button, {
+  }, /* @__PURE__ */ React7.createElement(Button, {
     variant: "ghost",
-    classNames: mx4(styles3.grid_3, "!p-0 is-full text-start overflow-hidden"),
+    classNames: mx7(styles3.grid_3, "!p-0 is-full text-start overflow-hidden"),
     onClick
-  }, icon ? /* @__PURE__ */ React4.createElement(CardIcon, {
+  }, icon ? /* @__PURE__ */ React7.createElement(CardIcon, {
     classNames: "text-subdued",
     icon
-  }) : /* @__PURE__ */ React4.createElement("div", null), /* @__PURE__ */ React4.createElement("span", {
-    className: mx4("min-is-0 flex-1 truncate", !actionIcon && "col-span-2")
-  }, label), actionIcon && /* @__PURE__ */ React4.createElement(CardIcon, {
+  }) : /* @__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__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: "is-full pli-1"
-  }, /* @__PURE__ */ React4.createElement("a", {
-    className: mx4(styles3.grid_3, "group !p-0 dx-button dx-focus-ring !min-bs-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__ */ React4.createElement(CardIcon, {
+  }, /* @__PURE__ */ React7.createElement(CardIcon, {
     classNames: "text-subdued",
     icon: "ph--link--regular"
-  }), /* @__PURE__ */ React4.createElement("span", {
-    className: mx4("min-is-0 flex-1 truncate")
-  }, label), /* @__PURE__ */ React4.createElement(CardIcon, {
+  }), /* @__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__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React7.createElement("div", {
     ...props,
     role,
-    className: mx4("grid bs-[var(--rail-item)] is-[var(--rail-item)] place-items-center", classNames)
+    className: mx7("grid bs-[var(--rail-item)] is-[var(--rail-item)] place-items-center", classNames)
   }, children);
 };
 var CardIcon = ({ toolbar, ...props }) => {
-  return /* @__PURE__ */ React4.createElement(CardIconBlock, null, /* @__PURE__ */ React4.createElement(Icon, {
+  return /* @__PURE__ */ React7.createElement(CardIconBlock, null, /* @__PURE__ */ React7.createElement(Icon, {
     ...props,
     size: toolbar ? 5 : 4
   }));
@@ -1323,20 +1217,20 @@ var Card = {
   Link: CardLink
 };
 
-// src/components/Stack/Stack.tsx
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Stack/Stack.tsx";
-var STACK_NAME = "Stack";
-var StackInner = /* @__PURE__ */ forwardRef4(({ className, classNames, role = "list", orientation: orientationProp = "vertical", draggable: draggable2 = true, items, getId, Tile: Tile2, debug, ...props }, forwardedRef) => {
-  invariant(Tile2, void 0, {
+// src/components/Mosaic/Stack.tsx
+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: 50,
+    L: 75,
     S: void 0,
     A: [
       "Tile",
       ""
     ]
   });
-  const { id, orientation = orientationProp, dragging } = useContainerContext(STACK_NAME);
+  const { id, orientation = orientationProp, dragging } = useMosaicContainerContext(MOSAIC_STACK_NAME);
   const visibleItems = useVisibleItems({
     id,
     items,
@@ -1345,48 +1239,48 @@ var StackInner = /* @__PURE__ */ forwardRef4(({ className, classNames, role = "l
   });
   invariant(orientation === "vertical" || orientation === "horizontal", `Invalid orientation: ${orientation}`, {
     F: __dxlog_file2,
-    L: 53,
+    L: 78,
     S: void 0,
     A: [
       "orientation === 'vertical' || orientation === 'horizontal'",
       "`Invalid orientation: ${orientation}`"
     ]
   });
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React8.createElement("div", {
     ...props,
     role,
-    className: mx5("flex", orientation === "horizontal" && "bs-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
+    className: mx8("flex", orientation === "horizontal" && "bs-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
     ref: forwardedRef
-  }, /* @__PURE__ */ React5.createElement(Placeholder2, {
+  }, /* @__PURE__ */ React8.createElement(InternalPlaceholder, {
     orientation,
     location: 0.5
-  }), visibleItems?.map((item, index) => /* @__PURE__ */ React5.createElement(Fragment, {
+  }), visibleItems?.map((item, index) => /* @__PURE__ */ React8.createElement(Fragment, {
     key: getId(item)
-  }, /* @__PURE__ */ React5.createElement(Tile2, {
+  }, /* @__PURE__ */ React8.createElement(Tile, {
     id: getId(item),
     data: item,
     location: index + 1,
     draggable: draggable2,
     debug
-  }), /* @__PURE__ */ React5.createElement(Placeholder2, {
+  }), /* @__PURE__ */ React8.createElement(InternalPlaceholder, {
     orientation,
     location: index + 1.5
   }))));
 });
-StackInner.displayName = STACK_NAME;
-var Stack = StackInner;
-var VIRTUAL_STACK_NAME = "VirtualStackInner";
-var VirtualStackInner = /* @__PURE__ */ forwardRef4(({ className, classNames, role = "list", orientation = "vertical", items, getId, Tile: Tile2, estimateSize, getScrollElement, overscan = 8, onChange, debug, ...props }, forwardedRef) => {
-  invariant(Tile2, void 0, {
+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) => {
+  invariant(Tile, void 0, {
     F: __dxlog_file2,
-    L: 115,
+    L: 142,
     S: void 0,
     A: [
       "Tile",
       ""
     ]
   });
-  const { id, dragging } = useContainerContext(VIRTUAL_STACK_NAME);
+  const { id, dragging } = useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
   const visibleItems = useVisibleItems({
     id,
     items,
@@ -1401,10 +1295,10 @@ var VirtualStackInner = /* @__PURE__ */ forwardRef4(({ className, classNames, ro
     onChange
   });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React8.createElement("div", {
     ...props,
     role,
-    className: mx5("flex", orientation === "horizontal" && "bs-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
+    className: mx8("flex", orientation === "horizontal" && "bs-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
     style: {
       position: "relative",
       ...orientation === "vertical" ? {
@@ -1418,7 +1312,7 @@ var VirtualStackInner = /* @__PURE__ */ forwardRef4(({ className, classNames, ro
     ref: forwardedRef
   }, virtualItems.map((virtualItem) => {
     const data = visibleItems[Math.floor(virtualItem.index / 2)];
-    return /* @__PURE__ */ React5.createElement("div", {
+    return /* @__PURE__ */ React8.createElement("div", {
       key: virtualItem.key,
       "data-index": virtualItem.index,
       style: {
@@ -1434,10 +1328,10 @@ var VirtualStackInner = /* @__PURE__ */ forwardRef4(({ className, classNames, ro
         }
       },
       ref: virtualizer.measureElement
-    }, virtualItem.index % 2 === 0 ? /* @__PURE__ */ React5.createElement(Placeholder2, {
+    }, virtualItem.index % 2 === 0 ? /* @__PURE__ */ React8.createElement(InternalPlaceholder, {
       orientation,
       location: Math.floor(virtualItem.index / 2) + 0.5
-    }) : /* @__PURE__ */ React5.createElement(Tile2, {
+    }) : /* @__PURE__ */ React8.createElement(Tile, {
       id: getId(data),
       data,
       location: Math.floor(virtualItem.index / 2) + 1,
@@ -1445,17 +1339,28 @@ var VirtualStackInner = /* @__PURE__ */ forwardRef4(({ className, classNames, ro
     }));
   }));
 });
-VirtualStackInner.displayName = VIRTUAL_STACK_NAME;
-var VirtualStack = VirtualStackInner;
-var Placeholder2 = (props) => {
-  return /* @__PURE__ */ React5.createElement(Mosaic.Placeholder, {
+MosaicVirtualStackInner.displayName = MOSAIC_VIRTUAL_STACK_NAME;
+var MosaicVirtualStack = MosaicVirtualStackInner;
+var InternalPlaceholder = (props) => {
+  return /* @__PURE__ */ React8.createElement(MosaicPlaceholder, {
     ...props,
     classNames: styles2.placeholder.root
-  }, /* @__PURE__ */ React5.createElement("div", {
-    className: mx5("flex bs-full bg-baseSurface border border-dashed border-separator rounded-sm", styles2.placeholder.content)
+  }, /* @__PURE__ */ React8.createElement("div", {
+    className: mx8("flex bs-full bg-baseSurface border border-dashed border-separator rounded-sm", styles2.placeholder.content)
   }));
 };
-Placeholder2.displayName = "Placeholder";
+InternalPlaceholder.displayName = "InternalPlaceholder";
+
+// src/components/Mosaic/Mosaic.tsx
+var Mosaic = {
+  Root: MosaicRoot,
+  Container: MosaicContainer,
+  Tile: MosaicTile,
+  Placeholder: MosaicPlaceholder,
+  DropIndicator: MosaicDropIndicator,
+  Stack: MosaicStack,
+  VirtualStack: MosaicVirtualStack
+};
 
 export {
   useVisibleItems,
@@ -1463,16 +1368,14 @@ export {
   useFocus,
   Focus,
   styles2,
-  dropHandler,
-  Stack,
-  VirtualStack,
-  useRootContext,
-  useContainerContext,
-  useTileContext,
+  getSourceData,
+  useMosaicRootContext,
+  useMosaicContainerContext,
+  useMosaicTileContext,
   Mosaic,
   translationKey,
   styles3,
   Image,
   Card
 };
-//# sourceMappingURL=chunk-Y6GU2CCU.mjs.map
+//# sourceMappingURL=chunk-XNANTBOP.mjs.map