@dxos/react-ui-mosaic 0.8.4-main.69d29f4 → 0.8.4-main.937b3ca

package/dist/lib/browser/{chunk-4VDZJ3HV.mjs → chunk-QKMUWO5X.mjs}

@@ -619,11 +619,11 @@ var dropField = StateField.define({
   provide: (field) => EditorView.decorations.from(field)
 });
 
-// src/hooks/useContainerDebug.tsx
-import React7, { forwardRef as forwardRef6, useMemo as useMemo5, useRef as useRef5 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
-import { Json } from "@dxos/react-ui-syntax-highlighter";
-import { mx as mx7 } from "@dxos/ui-theme";
+// src/components/Stack/Stack.tsx
+import { useVirtualizer } from "@tanstack/react-virtual";
+import React6, { Fragment, forwardRef as forwardRef5 } from "react";
+import { invariant } from "@dxos/invariant";
+import { mx as mx6 } from "@dxos/ui-theme";
 
 // src/components/Mosaic/Mosaic.tsx
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -638,10 +638,10 @@ import { createContext as createContext3 } from "@radix-ui/react-context";
 import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { bind } from "bind-event-listener";
-import React6, { forwardRef as forwardRef5, useCallback as useCallback2, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo4, useRef as useRef4, useState as useState3 } from "react";
+import React5, { forwardRef as forwardRef4, useCallback as useCallback2, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo2, useRef as useRef4, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
-import { log as log2 } from "@dxos/log";
-import { mx as mx6 } from "@dxos/ui-theme";
+import { log } from "@dxos/log";
+import { mx as mx5 } from "@dxos/ui-theme";
 import { isTruthy } from "@dxos/util";
 
 // src/components/Scrollable/Scrollable.tsx
@@ -713,230 +713,14 @@ var Scrollable = /* @__PURE__ */ forwardRef3(({ classNames, axis = "vertical", p
   });
 });
 
-// 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/hooks/useEventHandlerAdapter.ts
-import { useMemo as useMemo2 } from "react";
-import { log } from "@dxos/log";
-import { arrayMove } from "@dxos/util";
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/hooks/useEventHandlerAdapter.ts";
-var useEventHandlerAdapter = ({ items, getId, get, make, onChange, ...props }) => {
-  return useMemo2(() => ({
-    ...props,
-    onTake: ({ source }, cb) => {
-      log.info("onTake", {
-        source
-      }, {
-        F: __dxlog_file,
-        L: 58,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      const mutate = (items2) => {
-        const from = items2.findIndex((item) => getId(item) === source.id);
-        if (from !== -1) {
-          items2.splice(from, 1);
-        }
-      };
-      if (onChange) {
-        onChange(mutate);
-      } else {
-        mutate(items);
-      }
-      void cb(source.data);
-    },
-    onDrop: ({ source, target }) => {
-      const to = target?.type === "tile" || target?.type === "placeholder" ? target.location : -1;
-      log.info("onDrop", {
-        source,
-        target,
-        to
-      }, {
-        F: __dxlog_file,
-        L: 76,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      const mutate = (items2) => {
-        const from = items2.findIndex((item) => getId(item) === source.id);
-        if (to !== -1) {
-          if (from !== -1) {
-            arrayMove(items2, from, to);
-          } else {
-            items2.splice(to, 0, make(get(source.data)));
-          }
-        }
-      };
-      if (onChange) {
-        onChange(mutate);
-      } else {
-        mutate(items);
-      }
-    }
-  }), [
-    items,
-    onChange
-  ]);
-};
-
-// src/hooks/useVisibleItems.ts
-import { useMemo as useMemo3 } from "react";
-var useVisibleItems = ({ id, items, dragging, getId }) => {
-  const visibleItems = useMemo3(() => {
-    if (!items || !dragging || id !== dragging.containerId) {
-      return items ?? [];
-    }
-    const idx = items.findIndex((item) => getId(item) === dragging.id);
-    if (idx === -1) {
-      return items;
-    }
-    const visibleItems2 = items.slice();
-    visibleItems2.splice(idx, 1);
-    return visibleItems2;
-  }, [
-    id,
-    items,
-    dragging,
-    getId
-  ]);
-  return visibleItems;
-};
-
-// src/components/Stack/Stack.tsx
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Stack/Stack.tsx";
-var StackInner = /* @__PURE__ */ forwardRef4(({ className, classNames, role = "list", axis = "vertical", draggable: draggable2 = true, items, getId, Tile: Tile2, debug, ...props }, forwardedRef) => {
-  invariant(Tile2, void 0, {
-    F: __dxlog_file2,
-    L: 44,
-    S: void 0,
-    A: [
-      "Tile",
-      ""
-    ]
-  });
-  const { id, dragging } = useContainerContext(StackInner.displayName);
-  const visibleItems = useVisibleItems({
-    id,
-    items,
-    dragging: dragging?.source.data,
-    getId
-  });
-  return /* @__PURE__ */ React5.createElement("div", {
-    ...props,
-    role,
-    className: mx5("flex", axis === "horizontal" && "bs-full [&>*]:shrink-0", axis === "vertical" && "flex-col", classNames, className),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React5.createElement(Placeholder, {
-    axis,
-    location: 0.5
-  }), visibleItems?.map((item, index) => /* @__PURE__ */ React5.createElement(Fragment, {
-    key: getId(item)
-  }, /* @__PURE__ */ React5.createElement(Tile2, {
-    id: getId(item),
-    data: item,
-    location: index + 1,
-    draggable: draggable2,
-    debug
-  }), /* @__PURE__ */ React5.createElement(Placeholder, {
-    axis,
-    location: index + 1.5
-  }))));
-});
-StackInner.displayName = "Stack";
-var Stack = StackInner;
-var VirtualStackInner = /* @__PURE__ */ forwardRef4(({ className, classNames, role = "list", axis = "vertical", items, getId, Tile: Tile2, estimateSize, getScrollElement, overscan = 8, onChange, debug, ...props }, forwardedRef) => {
-  invariant(Tile2, void 0, {
-    F: __dxlog_file2,
-    L: 106,
-    S: void 0,
-    A: [
-      "Tile",
-      ""
-    ]
-  });
-  const { id, dragging } = useContainerContext(VirtualStackInner.displayName);
-  const visibleItems = useVisibleItems({
-    id,
-    items,
-    dragging: dragging?.source.data,
-    getId
-  });
-  const virtualizer = useVirtualizer({
-    count: visibleItems.length * 2 + 1,
-    estimateSize,
-    getScrollElement,
-    overscan,
-    onChange
-  });
-  const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React5.createElement("div", {
-    ...props,
-    role,
-    className: mx5("flex", axis === "horizontal" && "bs-full [&>*]:shrink-0", axis === "vertical" && "flex-col", classNames, className),
-    style: {
-      position: "relative",
-      ...axis === "vertical" ? {
-        width: "100%",
-        height: virtualizer.getTotalSize()
-      } : {
-        width: virtualizer.getTotalSize(),
-        height: "100%"
-      }
-    },
-    ref: forwardedRef
-  }, virtualItems.map((virtualItem) => {
-    const data = visibleItems[Math.floor(virtualItem.index / 2)];
-    return /* @__PURE__ */ React5.createElement("div", {
-      key: virtualItem.key,
-      "data-index": virtualItem.index,
-      style: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        ...axis === "vertical" ? {
-          width: "100%",
-          transform: `translateY(${virtualItem.start}px)`
-        } : {
-          height: "100%",
-          transform: `translateX(${virtualItem.start}px)`
-        }
-      },
-      ref: virtualizer.measureElement
-    }, virtualItem.index % 2 === 0 ? /* @__PURE__ */ React5.createElement(Placeholder, {
-      axis,
-      location: Math.floor(virtualItem.index / 2) + 0.5
-    }) : /* @__PURE__ */ React5.createElement(Tile2, {
-      id: getId(data),
-      data,
-      location: Math.floor(virtualItem.index / 2) + 1,
-      debug
-    }));
-  }));
-});
-VirtualStackInner.displayName = "VirtualStackInner";
-var VirtualStack = VirtualStackInner;
-var Placeholder = (props) => {
-  return /* @__PURE__ */ React5.createElement(Mosaic.Placeholder, {
-    ...props,
-    classNames: styles3.placeholder.root
-  }, /* @__PURE__ */ React5.createElement("div", {
-    className: mx5("flex bs-full bg-baseSurface border border-dashed border-separator rounded-sm", styles3.placeholder.content)
-  }));
-};
-Placeholder.displayName = "Placeholder";
-
 // src/components/Mosaic/Mosaic.tsx
-var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Mosaic.tsx";
+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] = createContext3("MosaicRoot");
 var ROOT_DEBUG_ATTR = "mosaic-debug";
-var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }, forwardedRef) => {
+var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }, forwardedRef) => {
   const rootRef = useRef4(null);
   const composedRef = useComposedRefs2(rootRef, forwardedRef);
   const Root2 = asChild ? Slot3 : Primitive2.div;
@@ -1013,11 +797,11 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
       * Dragging started within any container.
       */
       onDragStart: ({ source, location }) => {
-        log2("Root.onDragStart", {
+        log("Root.onDragStart", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
-          F: __dxlog_file3,
+          F: __dxlog_file,
           L: 215,
           S: void 0,
           C: (f, a) => f(...a)
@@ -1032,11 +816,11 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
       */
       onDropTargetChange: ({ source, location }) => {
         clearTimeout(noTargetTimeout);
-        log2("Root.onDropTargetChange", {
+        log("Root.onDropTargetChange", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
-          F: __dxlog_file3,
+          F: __dxlog_file,
           L: 228,
           S: void 0,
           C: (f, a) => f(...a)
@@ -1071,22 +855,22 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
       * Dragging ended.
       */
       onDrop: ({ source, location }) => {
-        log2.info("Root.onDrop", {
+        log.info("Root.onDrop", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
-          F: __dxlog_file3,
+          F: __dxlog_file,
           L: 257,
           S: void 0,
           C: (f, a) => f(...a)
         });
         const { data: sourceData, handler: sourceHandler } = getSourceHandler(source);
         if (!sourceHandler) {
-          log2.warn("invalid source", {
+          log.warn("invalid source", {
             source: sourceData,
             handlers: Object.keys(handlers)
           }, {
-            F: __dxlog_file3,
+            F: __dxlog_file,
             L: 265,
             S: void 0,
             C: (f, a) => f(...a)
@@ -1095,8 +879,8 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
         }
         try {
           if (location.current.dropTargets.length === 0) {
-            log2.info("cancelled", void 0, {
-              F: __dxlog_file3,
+            log.info("cancelled", void 0, {
+              F: __dxlog_file,
               L: 280,
               S: void 0,
               C: (f, a) => f(...a)
@@ -1104,12 +888,12 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
           } else {
             const { data: targetData, handler: targetHandler } = getTargetHandler(location);
             if (!targetHandler) {
-              log2.warn("invalid target", {
+              log.warn("invalid target", {
                 source: sourceData,
                 location,
                 handlers: Object.keys(handlers)
               }, {
-                F: __dxlog_file3,
+                F: __dxlog_file,
                 L: 285,
                 S: void 0,
                 C: (f, a) => f(...a)
@@ -1123,10 +907,10 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
               });
             } else {
               if (!sourceHandler.onTake) {
-                log2.warn("invalid source", {
+                log.warn("invalid source", {
                   source: sourceData
                 }, {
-                  F: __dxlog_file3,
+                  F: __dxlog_file,
                   L: 301,
                   S: void 0,
                   C: (f, a) => f(...a)
@@ -1158,7 +942,7 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
     getSourceHandler,
     getTargetHandler
   ]);
-  return /* @__PURE__ */ React6.createElement(RootContextProvider, {
+  return /* @__PURE__ */ React5.createElement(RootContextProvider, {
     containers: handlers,
     addContainer: (container) => setHandlers((containers) => ({
       ...containers,
@@ -1171,8 +955,8 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
       };
     }),
     dragging
-  }, /* @__PURE__ */ React6.createElement(Root2, {
-    className: mx6("group overflow-hidden", classNames),
+  }, /* @__PURE__ */ React5.createElement(Root2, {
+    className: mx5("group overflow-hidden", classNames),
     [`data-${ROOT_DEBUG_ATTR}`]: debug,
     ref: composedRef
   }, children));
@@ -1182,11 +966,11 @@ var CONTAINER_STATE_ATTR = "mosaic-container-state";
 var CONTAINER_PLACEHOLDER_WIDTH = "--mosaic-placeholder-width";
 var CONTAINER_PLACEHOLDER_HEIGHT = "--mosaic-placeholder-height";
 var counter = 0;
-var Container = /* @__PURE__ */ forwardRef5(({ className, classNames, children, eventHandler: eventHandlerProp, axis = "vertical", asChild, autoScroll: autoscrollElement, withFocus, debug, ...props }, forwardedRef) => {
+var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children, eventHandler: eventHandlerProp, axis = "vertical", asChild, autoScroll: autoscrollElement, withFocus, debug, ...props }, forwardedRef) => {
   const rootRef = useRef4(null);
   const composedRef = useComposedRefs2(rootRef, forwardedRef);
   const Root2 = asChild ? Slot3 : Primitive2.div;
-  const eventHandler = useMemo4(() => eventHandlerProp ?? {
+  const eventHandler = useMemo2(() => eventHandlerProp ?? {
     id: `mosaic-container-${counter++}`
   }, [
     eventHandlerProp
@@ -1214,7 +998,7 @@ var Container = /* @__PURE__ */ forwardRef5(({ className, classNames, children,
   }, [
     eventHandler
   ]);
-  const data = useMemo4(() => ({
+  const data = useMemo2(() => ({
     type: "container",
     id: eventHandler.id
   }), [
@@ -1330,7 +1114,7 @@ var Container = /* @__PURE__ */ forwardRef5(({ className, classNames, children,
     data,
     autoscrollElement
   ]);
-  return /* @__PURE__ */ React6.createElement(ContainerContextProvider, {
+  return /* @__PURE__ */ React5.createElement(ContainerContextProvider, {
     id: eventHandler.id,
     eventHandler,
     axis,
@@ -1339,8 +1123,8 @@ var Container = /* @__PURE__ */ forwardRef5(({ className, classNames, children,
     scrolling,
     activeLocation,
     setActiveLocation
-  }, /* @__PURE__ */ React6.createElement(Root2, {
-    className: mx6("bs-full", className, classNames),
+  }, /* @__PURE__ */ React5.createElement(Root2, {
+    className: mx5("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"
@@ -1353,7 +1137,7 @@ var Container = /* @__PURE__ */ forwardRef5(({ className, classNames, children,
 Container.displayName = "MosaicContainer";
 var [TileContextProvider, useTileContext] = createContext3("MosaicTile");
 var TILE_STATE_ATTR = "mosaic-tile-state";
-var Tile = /* @__PURE__ */ forwardRef5(({ className, classNames, children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, debug: _ }, forwardedRef) => {
+var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, debug: _ }, forwardedRef) => {
   const rootRef = useRef4(null);
   const composedRef = composeRefs(rootRef, forwardedRef);
   const Root2 = asChild ? Slot3 : Primitive2.div;
@@ -1361,7 +1145,7 @@ var Tile = /* @__PURE__ */ forwardRef5(({ className, classNames, children, asChi
   const [state, setState] = useState3({
     type: "idle"
   });
-  const allowedEdges = useMemo4(() => allowedEdgesProp || (axis === "vertical" ? [
+  const allowedEdges = useMemo2(() => allowedEdgesProp || (axis === "vertical" ? [
     "top",
     "bottom"
   ] : [
@@ -1371,7 +1155,7 @@ var Tile = /* @__PURE__ */ forwardRef5(({ className, classNames, children, asChi
     allowedEdgesProp,
     axis
   ]);
-  const data = useMemo4(() => ({
+  const data = useMemo2(() => ({
     type: "tile",
     id,
     containerId,
@@ -1485,18 +1269,18 @@ var Tile = /* @__PURE__ */ forwardRef5(({ className, classNames, children, asChi
     allowedEdges,
     setActiveLocation
   ]);
-  return /* @__PURE__ */ React6.createElement(TileContextProvider, {
+  return /* @__PURE__ */ React5.createElement(TileContextProvider, {
     state
-  }, /* @__PURE__ */ React6.createElement(Root2, {
+  }, /* @__PURE__ */ React5.createElement(Root2, {
     [`data-${TILE_STATE_ATTR}`]: state.type,
     role: "listitem",
-    className: mx6("relative", className, classNames),
+    className: mx5("relative", className, classNames),
     ref: composedRef
-  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React6.createElement(Root2, {
+  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React5.createElement(Root2, {
     // NOTE: Use to control appearance while dragging.
     [`data-${TILE_STATE_ATTR}`]: state.type,
     // TODO(burdon): Configure drop animation.
-    className: mx6("relative", className, classNames),
+    className: mx5("relative", className, classNames),
     style: {
       width: `${state.rect.width}px`,
       height: `${state.rect.height}px`
@@ -1506,11 +1290,11 @@ var Tile = /* @__PURE__ */ forwardRef5(({ className, classNames, children, asChi
 Tile.displayName = "MosaicTile";
 var PLACEHOLDER_AXIS_ATTR = "mosaic-placeholder-axis";
 var PLACEHOLDER_STATE_ATTR = "mosaic-placeholder-state";
-var Placeholder2 = ({ classNames, children, asChild, axis = "vertical", location }) => {
+var Placeholder = ({ classNames, children, asChild, axis = "vertical", location }) => {
   const rootRef = useRef4(null);
   const Root2 = asChild ? Slot3 : Primitive2.div;
-  const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useContainerContext(Placeholder2.displayName);
-  const data = useMemo4(() => ({
+  const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useContainerContext(Placeholder.displayName);
+  const data = useMemo2(() => ({
     type: "placeholder",
     containerId,
     location
@@ -1548,18 +1332,18 @@ var Placeholder2 = ({ classNames, children, asChild, axis = "vertical", location
     scrolling,
     setActiveLocation
   ]);
-  return /* @__PURE__ */ React6.createElement(Root2, {
+  return /* @__PURE__ */ React5.createElement(Root2, {
     [`data-${PLACEHOLDER_AXIS_ATTR}`]: axis,
     [`data-${PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
     role: "none",
-    className: mx6("relative", classNames),
+    className: mx5("relative", classNames),
     ref: rootRef
   }, children);
 };
-Placeholder2.displayName = "MosaicPlaceholder";
+Placeholder.displayName = "MosaicPlaceholder";
 var DropIndicator = (props) => {
   const { state } = useTileContext(DropIndicator.displayName);
-  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React6.createElement(NativeDropIndicator, {
+  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React5.createElement(NativeDropIndicator, {
     ...props,
     edge: state.closestEdge
   }) : null;
@@ -1569,7 +1353,7 @@ var Mosaic = {
   Root,
   Container,
   Tile,
-  Placeholder: Placeholder2,
+  Placeholder,
   DropIndicator,
   // TODO(burdon): Move out of Mosaic namespace?
   Viewport: Scrollable,
@@ -1577,45 +1361,151 @@ var Mosaic = {
   VirtualStack
 };
 
-// src/hooks/useContainerDebug.tsx
-var useContainerDebug = (debug) => {
-  const debugRef = useRef5(null);
-  return useMemo5(() => {
-    if (!debug) {
-      return [
-        () => null,
-        void 0
-      ];
+// src/hooks/useVisibleItems.ts
+import { useMemo as useMemo3 } from "react";
+var useVisibleItems = ({ id, items, dragging, getId }) => {
+  const visibleItems = useMemo3(() => {
+    if (!items || !dragging || id !== dragging.containerId) {
+      return items ?? [];
     }
-    return [
-      ({ classNames }) => /* @__PURE__ */ React7.createElement("div", {
-        role: "none",
-        className: mx7("overflow-hidden", classNames),
-        ref: debugRef
-      }),
-      () => debugRef.current && /* @__PURE__ */ createPortal2(/* @__PURE__ */ React7.createElement(ContainerInfo, null), debugRef.current)
-    ];
+    const idx = items.findIndex((item) => getId(item) === dragging.id);
+    if (idx === -1) {
+      return items;
+    }
+    const visibleItems2 = items.slice();
+    visibleItems2.splice(idx, 1);
+    return visibleItems2;
   }, [
-    debug,
-    debugRef
+    id,
+    items,
+    dragging,
+    getId
   ]);
+  return visibleItems;
 };
-var ContainerInfo = /* @__PURE__ */ forwardRef6(({ classNames }, forwardedRef) => {
-  const { id, state, activeLocation, scrolling } = useContainerContext(ContainerInfo.displayName);
-  const counter2 = useRef5(0);
-  return /* @__PURE__ */ React7.createElement(Json, {
-    data: {
-      id,
-      activeLocation,
-      scrolling,
-      state,
-      count: counter2.current++
-    },
-    classNames: mx7("text-xs", classNames),
+
+// src/components/Stack/Stack.tsx
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Stack/Stack.tsx";
+var StackInner = /* @__PURE__ */ forwardRef5(({ className, classNames, role = "list", axis = "vertical", draggable: draggable2 = true, items, getId, Tile: Tile2, debug, ...props }, forwardedRef) => {
+  invariant(Tile2, void 0, {
+    F: __dxlog_file2,
+    L: 44,
+    S: void 0,
+    A: [
+      "Tile",
+      ""
+    ]
+  });
+  const { id, dragging } = useContainerContext(StackInner.displayName);
+  const visibleItems = useVisibleItems({
+    id,
+    items,
+    dragging: dragging?.source.data,
+    getId
+  });
+  return /* @__PURE__ */ React6.createElement("div", {
+    ...props,
+    role,
+    className: mx6("flex", axis === "horizontal" && "bs-full [&>*]:shrink-0", axis === "vertical" && "flex-col", classNames, className),
     ref: forwardedRef
+  }, /* @__PURE__ */ React6.createElement(Placeholder2, {
+    axis,
+    location: 0.5
+  }), visibleItems?.map((item, index) => /* @__PURE__ */ React6.createElement(Fragment, {
+    key: getId(item)
+  }, /* @__PURE__ */ React6.createElement(Tile2, {
+    id: getId(item),
+    data: item,
+    location: index + 1,
+    draggable: draggable2,
+    debug
+  }), /* @__PURE__ */ React6.createElement(Placeholder2, {
+    axis,
+    location: index + 1.5
+  }))));
+});
+StackInner.displayName = "Stack";
+var Stack = StackInner;
+var VirtualStackInner = /* @__PURE__ */ forwardRef5(({ className, classNames, role = "list", axis = "vertical", items, getId, Tile: Tile2, estimateSize, getScrollElement, overscan = 8, onChange, debug, ...props }, forwardedRef) => {
+  invariant(Tile2, void 0, {
+    F: __dxlog_file2,
+    L: 106,
+    S: void 0,
+    A: [
+      "Tile",
+      ""
+    ]
+  });
+  const { id, dragging } = useContainerContext(VirtualStackInner.displayName);
+  const visibleItems = useVisibleItems({
+    id,
+    items,
+    dragging: dragging?.source.data,
+    getId
   });
+  const virtualizer = useVirtualizer({
+    count: visibleItems.length * 2 + 1,
+    estimateSize,
+    getScrollElement,
+    overscan,
+    onChange
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  return /* @__PURE__ */ React6.createElement("div", {
+    ...props,
+    role,
+    className: mx6("flex", axis === "horizontal" && "bs-full [&>*]:shrink-0", axis === "vertical" && "flex-col", classNames, className),
+    style: {
+      position: "relative",
+      ...axis === "vertical" ? {
+        width: "100%",
+        height: virtualizer.getTotalSize()
+      } : {
+        width: virtualizer.getTotalSize(),
+        height: "100%"
+      }
+    },
+    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,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        ...axis === "vertical" ? {
+          width: "100%",
+          transform: `translateY(${virtualItem.start}px)`
+        } : {
+          height: "100%",
+          transform: `translateX(${virtualItem.start}px)`
+        }
+      },
+      ref: virtualizer.measureElement
+    }, virtualItem.index % 2 === 0 ? /* @__PURE__ */ React6.createElement(Placeholder2, {
+      axis,
+      location: Math.floor(virtualItem.index / 2) + 0.5
+    }) : /* @__PURE__ */ React6.createElement(Tile2, {
+      id: getId(data),
+      data,
+      location: Math.floor(virtualItem.index / 2) + 1,
+      debug
+    }));
+  }));
 });
-ContainerInfo.displayName = "ContainerInfo";
+VirtualStackInner.displayName = "VirtualStackInner";
+var VirtualStack = VirtualStackInner;
+var Placeholder2 = (props) => {
+  return /* @__PURE__ */ React6.createElement(Mosaic.Placeholder, {
+    ...props,
+    classNames: styles3.placeholder.root
+  }, /* @__PURE__ */ React6.createElement("div", {
+    className: mx6("flex bs-full bg-baseSurface border border-dashed border-separator rounded-sm", styles3.placeholder.content)
+  }));
+};
+Placeholder2.displayName = "Placeholder";
 
 export {
   styles,
@@ -1626,9 +1516,6 @@ export {
   Focus,
   styles3,
   dropHandler,
-  useContainerDebug,
-  useEventHandlerAdapter,
-  useVisibleItems,
   Stack,
   VirtualStack,
   useRootContext,
@@ -1636,4 +1523,4 @@ export {
   useTileContext,
   Mosaic
 };
-//# sourceMappingURL=chunk-4VDZJ3HV.mjs.map
+//# sourceMappingURL=chunk-QKMUWO5X.mjs.map