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

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

@@ -374,11 +374,15 @@ var CardLink = ({ label, href }) => {
     icon: "ph--arrow-square-out--regular"
   })));
 };
-var CardIcon = ({ toolbar, ...props }) => {
+var CardIconBlock = ({ classNames, children, role = "none", ...props }) => {
   return /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: "grid bs-[var(--rail-item)] is-[var(--rail-item)] place-items-center"
-  }, /* @__PURE__ */ React2.createElement(Icon, {
+    ...props,
+    role,
+    className: mx2("grid bs-[var(--rail-item)] is-[var(--rail-item)] place-items-center", classNames)
+  }, children);
+};
+var CardIcon = ({ toolbar, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(CardIconBlock, null, /* @__PURE__ */ React2.createElement(Icon, {
     ...props,
     size: toolbar ? 5 : 4
   }));
@@ -395,6 +399,7 @@ var Card = {
   Close: CardClose,
   Menu: CardMenu,
   Icon: CardIcon,
+  IconBlock: CardIconBlock,
   // Content
   Content: CardContent,
   Row: CardRow,
@@ -619,11 +624,11 @@ var dropField = StateField.define({
   provide: (field) => EditorView.decorations.from(field)
 });
 
-// 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/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/Mosaic/Mosaic.tsx
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -638,15 +643,15 @@ 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 React5, { forwardRef as forwardRef4, useCallback as useCallback2, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo2, useRef as useRef4, useState as useState3 } from "react";
+import React6, { forwardRef as forwardRef5, useCallback as useCallback2, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo4, useRef as useRef4, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
-import { log } from "@dxos/log";
-import { mx as mx5 } from "@dxos/ui-theme";
+import { log as log2 } from "@dxos/log";
+import { mx as mx6 } from "@dxos/ui-theme";
 import { isTruthy } from "@dxos/util";
 
 // src/components/Scrollable/Scrollable.tsx
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
-import React4, { forwardRef as forwardRef3, useEffect, useMemo, useRef as useRef3 } from "react";
+import React4, { forwardRef as forwardRef3, useEffect, useImperativeHandle, useMemo, useRef as useRef3 } from "react";
 import { mx as mx4 } from "@dxos/ui-theme";
 import "overlayscrollbars/styles/overlayscrollbars.css";
 var defaultOptions = {
@@ -673,20 +678,13 @@ var Scrollable = /* @__PURE__ */ forwardRef3(({ classNames, axis = "vertical", p
     axis,
     optionsProp
   ]);
-  useEffect(() => {
-    const hostElement = osRef.current?.getElement();
-    if (forwardedRef) {
-      if (typeof forwardedRef === "function") {
-        forwardedRef(hostElement ?? null);
-      } else {
-        forwardedRef.current = hostElement ?? null;
-      }
-    }
-  });
+  useImperativeHandle(forwardedRef, () => osRef.current?.getElement(), [
+    osRef
+  ]);
   useEffect(() => {
     const instance = osRef.current?.osInstance();
     if (viewportRef) {
-      viewportRef.current = instance?.elements().viewport ?? null;
+      viewportRef(instance?.elements().viewport ?? null);
     }
   }, [
     osRef,
@@ -706,21 +704,237 @@ var Scrollable = /* @__PURE__ */ forwardRef3(({ classNames, axis = "vertical", p
   ]);
   return /* @__PURE__ */ React4.createElement(OverlayScrollbarsComponent, {
     ...props,
-    className: mx4(padding && axis === "vertical" ? "pli-3" : "pbe-3", classNames),
+    className: mx4(padding && (axis === "vertical" ? "pli-3" : "pbe-3"), classNames),
     options,
     events,
     ref: osRef
   });
 });
 
+// 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_file = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Mosaic.tsx";
+var __dxlog_file3 = "/__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__ */ forwardRef4(({ classNames, children, asChild, debug }, forwardedRef) => {
+var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }, forwardedRef) => {
   const rootRef = useRef4(null);
   const composedRef = useComposedRefs2(rootRef, forwardedRef);
   const Root2 = asChild ? Slot3 : Primitive2.div;
@@ -797,11 +1011,11 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
       * Dragging started within any container.
       */
       onDragStart: ({ source, location }) => {
-        log("Root.onDragStart", {
+        log2("Root.onDragStart", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
-          F: __dxlog_file,
+          F: __dxlog_file3,
           L: 215,
           S: void 0,
           C: (f, a) => f(...a)
@@ -816,11 +1030,11 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
       */
       onDropTargetChange: ({ source, location }) => {
         clearTimeout(noTargetTimeout);
-        log("Root.onDropTargetChange", {
+        log2("Root.onDropTargetChange", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
-          F: __dxlog_file,
+          F: __dxlog_file3,
           L: 228,
           S: void 0,
           C: (f, a) => f(...a)
@@ -855,22 +1069,22 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
       * Dragging ended.
       */
       onDrop: ({ source, location }) => {
-        log.info("Root.onDrop", {
+        log2.info("Root.onDrop", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
-          F: __dxlog_file,
+          F: __dxlog_file3,
           L: 257,
           S: void 0,
           C: (f, a) => f(...a)
         });
         const { data: sourceData, handler: sourceHandler } = getSourceHandler(source);
         if (!sourceHandler) {
-          log.warn("invalid source", {
+          log2.warn("invalid source", {
             source: sourceData,
             handlers: Object.keys(handlers)
           }, {
-            F: __dxlog_file,
+            F: __dxlog_file3,
             L: 265,
             S: void 0,
             C: (f, a) => f(...a)
@@ -879,8 +1093,8 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
         }
         try {
           if (location.current.dropTargets.length === 0) {
-            log.info("cancelled", void 0, {
-              F: __dxlog_file,
+            log2.info("cancelled", void 0, {
+              F: __dxlog_file3,
               L: 280,
               S: void 0,
               C: (f, a) => f(...a)
@@ -888,12 +1102,12 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
           } else {
             const { data: targetData, handler: targetHandler } = getTargetHandler(location);
             if (!targetHandler) {
-              log.warn("invalid target", {
+              log2.warn("invalid target", {
                 source: sourceData,
                 location,
                 handlers: Object.keys(handlers)
               }, {
-                F: __dxlog_file,
+                F: __dxlog_file3,
                 L: 285,
                 S: void 0,
                 C: (f, a) => f(...a)
@@ -907,10 +1121,10 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
               });
             } else {
               if (!sourceHandler.onTake) {
-                log.warn("invalid source", {
+                log2.warn("invalid source", {
                   source: sourceData
                 }, {
-                  F: __dxlog_file,
+                  F: __dxlog_file3,
                   L: 301,
                   S: void 0,
                   C: (f, a) => f(...a)
@@ -921,7 +1135,6 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
                 source: sourceData
               }, async (object) => {
                 targetHandler.onDrop?.({
-                  // TODO(burdon): Change source!!!
                   source: {
                     ...sourceData,
                     data: object
@@ -942,7 +1155,7 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
     getSourceHandler,
     getTargetHandler
   ]);
-  return /* @__PURE__ */ React5.createElement(RootContextProvider, {
+  return /* @__PURE__ */ React6.createElement(RootContextProvider, {
     containers: handlers,
     addContainer: (container) => setHandlers((containers) => ({
       ...containers,
@@ -955,8 +1168,8 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
       };
     }),
     dragging
-  }, /* @__PURE__ */ React5.createElement(Root2, {
-    className: mx5("group overflow-hidden", classNames),
+  }, /* @__PURE__ */ React6.createElement(Root2, {
+    className: mx6("group overflow-hidden", classNames),
     [`data-${ROOT_DEBUG_ATTR}`]: debug,
     ref: composedRef
   }, children));
@@ -966,11 +1179,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__ */ forwardRef4(({ className, classNames, children, eventHandler: eventHandlerProp, axis = "vertical", asChild, autoScroll: autoscrollElement, withFocus, debug, ...props }, forwardedRef) => {
+var Container = /* @__PURE__ */ forwardRef5(({ 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 = useMemo2(() => eventHandlerProp ?? {
+  const eventHandler = useMemo4(() => eventHandlerProp ?? {
     id: `mosaic-container-${counter++}`
   }, [
     eventHandlerProp
@@ -998,7 +1211,7 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
   }, [
     eventHandler
   ]);
-  const data = useMemo2(() => ({
+  const data = useMemo4(() => ({
     type: "container",
     id: eventHandler.id
   }), [
@@ -1017,25 +1230,17 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
       }, 500);
     };
     return combine(...[
-      // Autoscroll.
-      // TODO(burdon): Autoscroll doesn't work well horizontally.
-      autoscrollElement && [
-        autoScrollForElements({
-          element: autoscrollElement,
-          canScroll: ({ element: _ }) => {
-            return true;
-          },
-          getAllowedAxis: () => axis,
-          getConfiguration: () => ({
-            maxScrollSpeed: "fast"
-          })
-        }),
-        bind(autoscrollElement, {
-          type: "scroll",
-          listener: handleScroll
-        }),
-        () => setScrolling(false)
-      ],
+      /**
+      * Custom event for dragging cancellation.
+      */
+      bind(rootRef.current, {
+        type: "dnd:cancel",
+        listener: () => {
+          setState({
+            type: "idle"
+          });
+        }
+      }),
       // Target.
       dropTargetForElements({
         element: rootRef.current,
@@ -1096,17 +1301,26 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
           });
         }
       }),
-      /**
-      * Custom event for dragging cancellation.
-      */
-      bind(rootRef.current, {
-        type: "dnd:cancel",
-        listener: () => {
-          setState({
-            type: "idle"
-          });
-        }
-      })
+      // Autoscroll.
+      // NOTE: When used with Scrollable we get a spurious warning (in dev mode).
+      // "Auto scrolling has been attached to an element that appears not to be scrollable."
+      autoscrollElement && [
+        autoScrollForElements({
+          element: autoscrollElement,
+          // canScroll: ({ element: _ }) => {
+          //   return true;
+          // },
+          getAllowedAxis: () => axis,
+          getConfiguration: () => ({
+            maxScrollSpeed: "fast"
+          })
+        }),
+        bind(autoscrollElement, {
+          type: "scroll",
+          listener: handleScroll
+        }),
+        () => setScrolling(false)
+      ]
     ].filter(isTruthy).flatMap((x) => x));
   }, [
     rootRef,
@@ -1114,7 +1328,7 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
     data,
     autoscrollElement
   ]);
-  return /* @__PURE__ */ React5.createElement(ContainerContextProvider, {
+  return /* @__PURE__ */ React6.createElement(ContainerContextProvider, {
     id: eventHandler.id,
     eventHandler,
     axis,
@@ -1123,8 +1337,8 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
     scrolling,
     activeLocation,
     setActiveLocation
-  }, /* @__PURE__ */ React5.createElement(Root2, {
-    className: mx5("bs-full", className, classNames),
+  }, /* @__PURE__ */ React6.createElement(Root2, {
+    className: mx6("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"
@@ -1137,7 +1351,7 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
 Container.displayName = "MosaicContainer";
 var [TileContextProvider, useTileContext] = createContext3("MosaicTile");
 var TILE_STATE_ATTR = "mosaic-tile-state";
-var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, debug: _ }, forwardedRef) => {
+var Tile = /* @__PURE__ */ forwardRef5(({ 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;
@@ -1145,7 +1359,7 @@ var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChi
   const [state, setState] = useState3({
     type: "idle"
   });
-  const allowedEdges = useMemo2(() => allowedEdgesProp || (axis === "vertical" ? [
+  const allowedEdges = useMemo4(() => allowedEdgesProp || (axis === "vertical" ? [
     "top",
     "bottom"
   ] : [
@@ -1155,7 +1369,7 @@ var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChi
     allowedEdgesProp,
     axis
   ]);
-  const data = useMemo2(() => ({
+  const data = useMemo4(() => ({
     type: "tile",
     id,
     containerId,
@@ -1269,18 +1483,18 @@ var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChi
     allowedEdges,
     setActiveLocation
   ]);
-  return /* @__PURE__ */ React5.createElement(TileContextProvider, {
+  return /* @__PURE__ */ React6.createElement(TileContextProvider, {
     state
-  }, /* @__PURE__ */ React5.createElement(Root2, {
+  }, /* @__PURE__ */ React6.createElement(Root2, {
     [`data-${TILE_STATE_ATTR}`]: state.type,
     role: "listitem",
-    className: mx5("relative", className, classNames),
+    className: mx6("relative", className, classNames),
     ref: composedRef
-  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React5.createElement(Root2, {
+  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React6.createElement(Root2, {
     // NOTE: Use to control appearance while dragging.
     [`data-${TILE_STATE_ATTR}`]: state.type,
     // TODO(burdon): Configure drop animation.
-    className: mx5("relative", className, classNames),
+    className: mx6("relative", className, classNames),
     style: {
       width: `${state.rect.width}px`,
       height: `${state.rect.height}px`
@@ -1290,11 +1504,11 @@ var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChi
 Tile.displayName = "MosaicTile";
 var PLACEHOLDER_AXIS_ATTR = "mosaic-placeholder-axis";
 var PLACEHOLDER_STATE_ATTR = "mosaic-placeholder-state";
-var Placeholder = ({ classNames, children, asChild, axis = "vertical", location }) => {
+var Placeholder2 = ({ classNames, children, asChild, axis = "vertical", location }) => {
   const rootRef = useRef4(null);
   const Root2 = asChild ? Slot3 : Primitive2.div;
-  const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useContainerContext(Placeholder.displayName);
-  const data = useMemo2(() => ({
+  const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useContainerContext(Placeholder2.displayName);
+  const data = useMemo4(() => ({
     type: "placeholder",
     containerId,
     location
@@ -1332,18 +1546,18 @@ var Placeholder = ({ classNames, children, asChild, axis = "vertical", location
     scrolling,
     setActiveLocation
   ]);
-  return /* @__PURE__ */ React5.createElement(Root2, {
+  return /* @__PURE__ */ React6.createElement(Root2, {
     [`data-${PLACEHOLDER_AXIS_ATTR}`]: axis,
     [`data-${PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
     role: "none",
-    className: mx5("relative", classNames),
+    className: mx6("relative", classNames),
     ref: rootRef
   }, children);
 };
-Placeholder.displayName = "MosaicPlaceholder";
+Placeholder2.displayName = "MosaicPlaceholder";
 var DropIndicator = (props) => {
   const { state } = useTileContext(DropIndicator.displayName);
-  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React5.createElement(NativeDropIndicator, {
+  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React6.createElement(NativeDropIndicator, {
     ...props,
     edge: state.closestEdge
   }) : null;
@@ -1353,7 +1567,7 @@ var Mosaic = {
   Root,
   Container,
   Tile,
-  Placeholder,
+  Placeholder: Placeholder2,
   DropIndicator,
   // TODO(burdon): Move out of Mosaic namespace?
   Viewport: Scrollable,
@@ -1361,151 +1575,45 @@ var Mosaic = {
   VirtualStack
 };
 
-// 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;
+// src/hooks/useContainerDebug.tsx
+var useContainerDebug = (debug) => {
+  const debugRef = useRef5(null);
+  return useMemo5(() => {
+    if (!debug) {
+      return [
+        () => null,
+        void 0
+      ];
     }
-    const visibleItems2 = items.slice();
-    visibleItems2.splice(idx, 1);
-    return visibleItems2;
+    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)
+    ];
   }, [
-    id,
-    items,
-    dragging,
-    getId
+    debug,
+    debugRef
   ]);
-  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__ */ 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%"
-      }
+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),
     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
-    }));
-  }));
+  });
 });
-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";
+ContainerInfo.displayName = "ContainerInfo";
 
 export {
   styles,
@@ -1516,6 +1624,9 @@ export {
   Focus,
   styles3,
   dropHandler,
+  useContainerDebug,
+  useEventHandlerAdapter,
+  useVisibleItems,
   Stack,
   VirtualStack,
   useRootContext,
@@ -1523,4 +1634,4 @@ export {
   useTileContext,
   Mosaic
 };
-//# sourceMappingURL=chunk-QKMUWO5X.mjs.map
+//# sourceMappingURL=chunk-UMBPEG4F.mjs.map