@dxos/react-ui-mosaic 0.8.4-main.21d9917 → 0.8.4-main.69d29f4

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

@@ -471,18 +471,20 @@ var styles3 = {
   placeholder: {
     root: [
       "group opacity-0",
-      'group-data-[mosaic-debug="true"]:bg-orange-500',
       'group-data-[mosaic-debug="true"]:opacity-100',
+      'group-data-[mosaic-debug="true"]:bg-orange-500',
       "data-[mosaic-placeholder-state=active]:opacity-100",
       "data-[mosaic-placeholder-axis=vertical]:plb-1",
       "data-[mosaic-placeholder-axis=vertical]:data-[mosaic-placeholder-state=active]:plb-2.5",
       "data-[mosaic-placeholder-axis=horizontal]:pli-1",
       "data-[mosaic-placeholder-axis=horizontal]:data-[mosaic-placeholder-state=active]:pli-2.5"
     ],
-    // TODO(burdon): Don't animate open if placeholder is the source.
     content: [
       "transition-all duration-0",
-      "group-data-[mosaic-placeholder-state=active]:duration-200",
+      // TODO(burdon): Don't animate open if placeholder is the source.
+      // TODO(burdon): Flickers when start to drag since source is removed and then the placeholder shows up.
+      //  - Use absolute positioning?
+      // 'group-data-[mosaic-placeholder-state=active]:duration-200',
       "group-data-[mosaic-placeholder-axis=vertical]:bs-0",
       "group-data-[mosaic-placeholder-axis=horizontal]:is-0",
       "group-data-[mosaic-placeholder-axis=vertical]:group-data-[mosaic-placeholder-state=active]:bs-[var(--mosaic-placeholder-height)]",
@@ -617,34 +619,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/useVisibleItems.ts
-import { useMemo } from "react";
-var useVisibleItems = ({ id, items, dragging, getId }) => {
-  const visibleItems = useMemo(() => {
-    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/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";
@@ -659,16 +638,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 useMemo3, 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 { Json } from "@dxos/react-ui-syntax-highlighter";
-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 as useMemo2, useRef as useRef3 } from "react";
+import React4, { forwardRef as forwardRef3, useEffect, useMemo, useRef as useRef3 } from "react";
 import { mx as mx4 } from "@dxos/ui-theme";
 import "overlayscrollbars/styles/overlayscrollbars.css";
 var defaultOptions = {
@@ -680,7 +658,7 @@ var defaultOptions = {
 };
 var Scrollable = /* @__PURE__ */ forwardRef3(({ classNames, axis = "vertical", padding, options: optionsProp = defaultOptions, onScroll, viewportRef, ...props }, forwardedRef) => {
   const osRef = useRef3(null);
-  const options = useMemo2(() => {
+  const options = useMemo(() => {
     const options2 = {
       ...optionsProp
     };
@@ -714,7 +692,7 @@ var Scrollable = /* @__PURE__ */ forwardRef3(({ classNames, axis = "vertical", p
     osRef,
     viewportRef
   ]);
-  const events = useMemo2(() => {
+  const events = useMemo(() => {
     if (!onScroll) {
       return null;
     }
@@ -735,14 +713,230 @@ 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_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;
@@ -802,17 +996,29 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
         };
       });
     };
-    return monitorForElements({
+    const handleCancel = () => {
+      setDragging((dragging2) => {
+        requestAnimationFrame(() => {
+          dragging2?.target?.handler?.onCancel?.();
+          dragging2?.source?.container?.dispatchEvent(new CustomEvent("dnd:cancel", {
+            bubbles: true
+          }));
+        });
+        return void 0;
+      });
+    };
+    let noTargetTimeout;
+    return combine(monitorForElements({
       /**
       * 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,
-          L: 203,
+          F: __dxlog_file3,
+          L: 215,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -825,19 +1031,24 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
       * Dragging entered a new container.
       */
       onDropTargetChange: ({ source, location }) => {
-        log("Root.onDropTargetChange", {
+        clearTimeout(noTargetTimeout);
+        log2("Root.onDropTargetChange", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
-          F: __dxlog_file,
-          L: 215,
+          F: __dxlog_file3,
+          L: 228,
           S: void 0,
           C: (f, a) => f(...a)
         });
-        handleChange({
-          source,
-          location
-        });
+        if (location.current.dropTargets.length === 0) {
+          noTargetTimeout = setTimeout(() => setDragging(void 0), 1e3);
+        } else {
+          handleChange({
+            source,
+            location
+          });
+        }
       },
       /**
       * Dragging within any container.
@@ -860,39 +1071,46 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
       * Dragging ended.
       */
       onDrop: ({ source, location }) => {
-        log("Root.onDrop", {
+        log2.info("Root.onDrop", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
-          F: __dxlog_file,
-          L: 239,
+          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,
-            L: 247,
+            F: __dxlog_file3,
+            L: 265,
             S: void 0,
             C: (f, a) => f(...a)
           });
           return;
         }
         try {
-          if (location.current.dropTargets.length > 0) {
+          if (location.current.dropTargets.length === 0) {
+            log2.info("cancelled", void 0, {
+              F: __dxlog_file3,
+              L: 280,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+          } 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,
-                L: 260,
+                F: __dxlog_file3,
+                L: 285,
                 S: void 0,
                 C: (f, a) => f(...a)
               });
@@ -905,11 +1123,11 @@ 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,
-                  L: 276,
+                  F: __dxlog_file3,
+                  L: 301,
                   S: void 0,
                   C: (f, a) => f(...a)
                 });
@@ -931,24 +1149,16 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
             }
           }
         } finally {
-          setDragging((dragging2) => {
-            requestAnimationFrame(() => {
-              dragging2?.target?.handler?.onCancel?.();
-              dragging2?.source?.container?.dispatchEvent(new CustomEvent("dnd:cancel", {
-                bubbles: true
-              }));
-            });
-            return void 0;
-          });
+          handleCancel();
         }
       }
-    });
+    }));
   }, [
     handlers,
     getSourceHandler,
     getTargetHandler
   ]);
-  return /* @__PURE__ */ React5.createElement(RootContextProvider, {
+  return /* @__PURE__ */ React6.createElement(RootContextProvider, {
     containers: handlers,
     addContainer: (container) => setHandlers((containers) => ({
       ...containers,
@@ -961,8 +1171,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));
@@ -972,11 +1182,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 = useMemo3(() => eventHandlerProp ?? {
+  const eventHandler = useMemo4(() => eventHandlerProp ?? {
     id: `mosaic-container-${counter++}`
   }, [
     eventHandlerProp
@@ -1004,7 +1214,7 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
   }, [
     eventHandler
   ]);
-  const data = useMemo3(() => ({
+  const data = useMemo4(() => ({
     type: "container",
     id: eventHandler.id
   }), [
@@ -1023,6 +1233,8 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
       }, 500);
     };
     return combine(...[
+      // Autoscroll.
+      // TODO(burdon): Autoscroll doesn't work well horizontally.
       autoscrollElement && [
         autoScrollForElements({
           element: autoscrollElement,
@@ -1118,7 +1330,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,
@@ -1127,8 +1339,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"
@@ -1139,47 +1351,9 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
   }, children), debug?.());
 });
 Container.displayName = "MosaicContainer";
-var useContainerDebug = (debug) => {
-  const debugRef = useRef4(null);
-  return useMemo3(() => {
-    if (!debug) {
-      return [
-        () => null,
-        void 0
-      ];
-    }
-    return [
-      ({ classNames }) => /* @__PURE__ */ React5.createElement("div", {
-        role: "none",
-        className: mx5("overflow-hidden", classNames),
-        ref: debugRef
-      }),
-      () => debugRef.current && /* @__PURE__ */ createPortal(/* @__PURE__ */ React5.createElement(ContainerInfo, null), debugRef.current)
-    ];
-  }, [
-    debug,
-    debugRef
-  ]);
-};
-var ContainerInfo = /* @__PURE__ */ forwardRef4(({ classNames }, forwardedRef) => {
-  const { id, state, activeLocation, scrolling } = useContainerContext(ContainerInfo.displayName);
-  const counter2 = useRef4(0);
-  return /* @__PURE__ */ React5.createElement(Json, {
-    data: {
-      id,
-      activeLocation,
-      scrolling,
-      state,
-      count: counter2.current++
-    },
-    classNames: mx5("text-xs", classNames),
-    ref: forwardedRef
-  });
-});
-ContainerInfo.displayName = "ContainerInfo";
 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;
@@ -1187,7 +1361,7 @@ var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChi
   const [state, setState] = useState3({
     type: "idle"
   });
-  const allowedEdges = useMemo3(() => allowedEdgesProp || (axis === "vertical" ? [
+  const allowedEdges = useMemo4(() => allowedEdgesProp || (axis === "vertical" ? [
     "top",
     "bottom"
   ] : [
@@ -1197,7 +1371,7 @@ var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChi
     allowedEdgesProp,
     axis
   ]);
-  const data = useMemo3(() => ({
+  const data = useMemo4(() => ({
     type: "tile",
     id,
     containerId,
@@ -1311,18 +1485,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`
@@ -1332,11 +1506,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 = useMemo3(() => ({
+  const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useContainerContext(Placeholder2.displayName);
+  const data = useMemo4(() => ({
     type: "placeholder",
     containerId,
     location
@@ -1374,18 +1548,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;
@@ -1394,9 +1568,8 @@ DropIndicator.displayName = "MosaicDropIndicator";
 var Mosaic = {
   Root,
   Container,
-  ContainerInfo,
   Tile,
-  Placeholder,
+  Placeholder: Placeholder2,
   DropIndicator,
   // TODO(burdon): Move out of Mosaic namespace?
   Viewport: Scrollable,
@@ -1404,128 +1577,45 @@ var Mosaic = {
   VirtualStack
 };
 
-// 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%"
-      }
+// src/hooks/useContainerDebug.tsx
+var useContainerDebug = (debug) => {
+  const debugRef = useRef5(null);
+  return useMemo5(() => {
+    if (!debug) {
+      return [
+        () => null,
+        void 0
+      ];
+    }
+    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)
+    ];
+  }, [
+    debug,
+    debugRef
+  ]);
+};
+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,
@@ -1536,12 +1626,14 @@ export {
   Focus,
   styles3,
   dropHandler,
+  useContainerDebug,
+  useEventHandlerAdapter,
+  useVisibleItems,
   Stack,
   VirtualStack,
   useRootContext,
   useContainerContext,
-  useContainerDebug,
   useTileContext,
   Mosaic
 };
-//# sourceMappingURL=chunk-FS5LRPMY.mjs.map
+//# sourceMappingURL=chunk-4VDZJ3HV.mjs.map