@dxos/react-ui-mosaic 0.8.4-main.2244d791bb → 0.8.4-main.3fbcb4aa9b

package/dist/lib/browser/chunk-RUQB4JIG.mjs

@@ -0,0 +1,964 @@
+// 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/components/Focus/Focus.tsx
+import { Focus, useFocus } from "@dxos/react-ui";
+
+// src/components/Mosaic/styles.ts
+var styles = {
+  placeholder: {
+    root: [
+      "group opacity-0",
+      '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-orientation=vertical]:snap-start",
+      "data-[mosaic-placeholder-orientation=vertical]:py-1",
+      "data-[mosaic-placeholder-orientation=vertical]:data-[mosaic-placeholder-state=active]:py-2.5",
+      "data-[mosaic-placeholder-orientation=horizontal]:px-1",
+      "data-[mosaic-placeholder-orientation=horizontal]:data-[mosaic-placeholder-state=active]:px-2.5"
+    ],
+    content: [
+      "transition-all duration-0",
+      // 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-orientation=vertical]:h-0",
+      "group-data-[mosaic-placeholder-orientation=vertical]:group-data-[mosaic-placeholder-state=active]:h-[var(--mosaic-placeholder-height)]",
+      "group-data-[mosaic-placeholder-orientation=horizontal]:w-0",
+      "group-data-[mosaic-placeholder-orientation=horizontal]:group-data-[mosaic-placeholder-state=active]:w-[var(--mosaic-placeholder-width)]"
+    ]
+  }
+};
+
+// src/components/Mosaic/types.ts
+var getSourceData = (source) => {
+  return source.data.type === "tile" ? source.data : null;
+};
+
+// src/components/Mosaic/Root.tsx
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { createContext } from "@radix-ui/react-context";
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { log } from "@dxos/log";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Root.tsx";
+var [MosaicRootContextProvider, useMosaicRootContext] = createContext("MosaicRoot");
+var MOSAIC_ROOT_NAME = "Mosaic.Root";
+var MOSAIC_ROOT_DEBUG_ATTR = "mosaic-debug";
+var MosaicRoot = /* @__PURE__ */ forwardRef(({ children, asChild, debug }, forwardedRef) => {
+  const rootRef = useRef(null);
+  const composedRef = useComposedRefs(rootRef, forwardedRef);
+  const Comp = asChild ? Slot : Primitive.div;
+  const [handlers, setHandlers] = useState({});
+  const [dragging, setDragging] = useState();
+  const getSourceHandler = useCallback((source) => {
+    const data = source.data;
+    return {
+      data,
+      handler: handlers[data.containerId]
+    };
+  }, [
+    handlers
+  ]);
+  const getTargetHandler = useCallback((location) => {
+    for (const target of location.current.dropTargets) {
+      const data = target.data;
+      let containerId;
+      switch (data.type) {
+        case "tile":
+        case "placeholder":
+          containerId = data.containerId;
+          break;
+        case "container":
+          containerId = data.id;
+          break;
+      }
+      const handler = handlers[containerId];
+      if (handler) {
+        return {
+          data,
+          handler
+        };
+      }
+    }
+    return {};
+  }, [
+    handlers
+  ]);
+  useEffect(() => {
+    const handleChange = ({ source, location }) => {
+      const { data: sourceData } = getSourceHandler(source);
+      const { data: targetData, handler } = getTargetHandler(location);
+      setDragging((dragging2) => {
+        dragging2?.target?.handler?.onCancel?.();
+        return {
+          source: {
+            data: sourceData,
+            handler: handlers[sourceData.containerId],
+            // TODO(burdon): Check id matches.
+            container: location.initial.dropTargets.find((target) => target.data.type === "container")?.element
+          },
+          target: targetData && {
+            data: targetData,
+            handler
+          }
+        };
+      });
+    };
+    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", {
+          source: source.data,
+          location: location.current.dropTargets.map((target) => target.data)
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 96, S: void 0 });
+        handleChange({
+          source,
+          location
+        });
+      },
+      /**
+      * Dragging entered a new container.
+      */
+      onDropTargetChange: ({ source, location }) => {
+        clearTimeout(noTargetTimeout);
+        log("Root.onDropTargetChange", {
+          source: source.data,
+          location: location.current.dropTargets.map((target) => target.data)
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 109, S: void 0 });
+        if (location.current.dropTargets.length === 0) {
+          noTargetTimeout = setTimeout(() => setDragging(void 0), 1e3);
+        } else {
+          handleChange({
+            source,
+            location
+          });
+        }
+      },
+      /**
+      * Dragging within any container.
+      */
+      onDrag: ({ source, location }) => {
+        const { data } = getSourceHandler(source);
+        const { handler } = getTargetHandler(location);
+        if (handler) {
+          const { clientX: x, clientY: y } = location.current.input;
+          handler.onDrag?.({
+            source: data,
+            position: {
+              x,
+              y
+            }
+          });
+        }
+      },
+      /**
+      * Dragging ended.
+      */
+      onDrop: ({ source, location }) => {
+        log.info("Root.onDrop", {
+          source: source.data,
+          location: location.current.dropTargets.map((target) => target.data)
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 142, S: void 0 });
+        const { data: sourceData, handler: sourceHandler } = getSourceHandler(source);
+        if (!sourceHandler) {
+          log.warn("invalid source", {
+            source: sourceData,
+            handlers: Object.keys(handlers)
+          }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 149, S: void 0 });
+          return;
+        }
+        try {
+          if (location.current.dropTargets.length === 0) {
+            log.info("cancelled", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 163, S: void 0 });
+          } else {
+            const { data: targetData, handler: targetHandler } = getTargetHandler(location);
+            if (!targetHandler) {
+              log.warn("invalid target", {
+                source: sourceData,
+                location,
+                handlers: Object.keys(handlers)
+              }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 168, S: void 0 });
+              return;
+            }
+            if (sourceHandler === targetHandler) {
+              targetHandler.onDrop?.({
+                source: sourceData,
+                target: targetData
+              });
+            } else {
+              if (!sourceHandler.onTake) {
+                log.warn("invalid source", {
+                  source: sourceData
+                }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 183, S: void 0 });
+                return;
+              }
+              sourceHandler.onTake?.({
+                source: sourceData
+              }, async (object) => {
+                targetHandler.onDrop?.({
+                  source: {
+                    ...sourceData,
+                    data: object
+                  },
+                  target: targetData
+                });
+                return true;
+              });
+            }
+          }
+        } finally {
+          handleCancel();
+        }
+      }
+    }));
+  }, [
+    handlers,
+    getSourceHandler,
+    getTargetHandler
+  ]);
+  return /* @__PURE__ */ React.createElement(MosaicRootContextProvider, {
+    containers: handlers,
+    addContainer: (container) => setHandlers((containers) => ({
+      ...containers,
+      [container.id]: container
+    })),
+    removeContainer: (id) => setHandlers((containers) => {
+      delete containers[id];
+      return {
+        ...containers
+      };
+    }),
+    dragging
+  }, /* @__PURE__ */ React.createElement(Comp, {
+    className: "contents group",
+    [`data-${MOSAIC_ROOT_DEBUG_ATTR}`]: debug,
+    ref: composedRef
+  }, children));
+});
+MosaicRoot.displayName = MOSAIC_ROOT_NAME;
+
+// src/components/Mosaic/Container.tsx
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { 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, { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { composable, composableProps } from "@dxos/ui-theme";
+import { isTruthy } from "@dxos/util";
+var MOSAIC_CONTAINER_NAME = "Mosaic.Container";
+var [MosaicContainerContextProvider, useMosaicContainerContext] = createContext2("MosaicContainer");
+var MOSAIC_CONTAINER_STATE_ATTR = "mosaic-container-state";
+var MOSAIC_CONTAINER_PLACEHOLDER_WIDTH = "--mosaic-placeholder-width";
+var MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT = "--mosaic-placeholder-height";
+var counter = 0;
+var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, currentId, onCurrentChange, debug, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot2 : Primitive2.div;
+  const rootRef = useRef2(null);
+  const composedRef = useComposedRefs2(rootRef, forwardedRef);
+  const eventHandler = useMemo2(() => eventHandlerProp ?? {
+    id: `mosaic-container-${counter++}`
+  }, [
+    eventHandlerProp
+  ]);
+  const { dragging } = useMosaicRootContext(MOSAIC_CONTAINER_NAME);
+  const [state, setState] = useState2({
+    type: "idle"
+  });
+  const [activeLocation, setActiveLocation] = useState2();
+  const [scrolling, setScrolling] = useState2(false);
+  const setCurrentId = useCallback2((id) => onCurrentChange?.(id), [
+    onCurrentChange
+  ]);
+  const scrollToRef = useRef2(void 0);
+  const registerScrollTo = useCallback2((fn) => {
+    scrollToRef.current = fn;
+  }, []);
+  useEffect2(() => {
+    if (currentId) {
+      scrollToRef.current?.(currentId);
+    }
+  }, [
+    currentId
+  ]);
+  const { setFocus } = useFocus();
+  useEffect2(() => {
+    if (withFocus) {
+      setFocus?.(state.type === "active" ? "active" : void 0);
+    }
+  }, [
+    setFocus,
+    withFocus,
+    state
+  ]);
+  const { addContainer, removeContainer } = useMosaicRootContext(eventHandler.id);
+  useEffect2(() => {
+    addContainer(eventHandler);
+    return () => removeContainer(eventHandler.id);
+  }, [
+    eventHandler
+  ]);
+  const data = useMemo2(() => ({
+    type: "container",
+    id: eventHandler.id
+  }), [
+    eventHandler.id
+  ]);
+  useEffect2(() => {
+    if (!rootRef.current) {
+      return;
+    }
+    let timeout;
+    const handleScroll = () => {
+      setScrolling(true);
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        setScrolling(false);
+      }, 500);
+    };
+    return combine2(...[
+      /**
+      * Custom event for dragging cancellation.
+      */
+      bind(rootRef.current, {
+        type: "dnd:cancel",
+        listener: () => {
+          setState({
+            type: "idle"
+          });
+        }
+      }),
+      // Target.
+      dropTargetForElements({
+        element: rootRef.current,
+        getData: () => data,
+        /**
+        * Test if permitted to drop here.
+        * NOTE: Contained Tile and Placeholder elements do the same.
+        */
+        canDrop: ({ source }) => {
+          const data2 = getSourceData(source);
+          return data2 && eventHandler.canDrop?.({
+            source: data2
+          }) || false;
+        },
+        // TODO(burdon): Provide semantic intent to onDrop.
+        // getDropEffect: () => {
+        //   return 'move';
+        // },
+        /**
+        * Dragging started in this container.
+        */
+        onDragStart: ({ source }) => {
+          const sourceData = source.data;
+          setState({
+            type: "active",
+            bounds: sourceData.bounds
+          });
+        },
+        /**
+        * Dragging entered this container.
+        */
+        onDragEnter: ({ source }) => {
+          const sourceData = source.data;
+          setState({
+            type: "active",
+            bounds: sourceData.bounds
+          });
+        },
+        /**
+        * Dragging left this container.
+        * NOTE: If the container isn't full-height, then when the dragged item is temporarily removed the container will shrink,
+        * triggering `onDragLeave`, which then causes the item to be added and removed continually (flickering).
+        */
+        onDragLeave: ({ source }) => {
+          const sourceData = source.data;
+          if (sourceData.containerId !== eventHandler.id) {
+            setState({
+              type: "idle"
+            });
+          }
+        },
+        /**
+        * Dropped in this container.
+        */
+        onDrop: () => {
+          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: () => orientation,
+          getConfiguration: () => ({
+            maxScrollSpeed: "fast"
+          })
+        }),
+        bind(autoscrollElement, {
+          type: "scroll",
+          listener: handleScroll
+        }),
+        () => setScrolling(false)
+      ]
+    ].filter(isTruthy).flatMap((x) => x));
+  }, [
+    rootRef,
+    eventHandler,
+    data,
+    autoscrollElement
+  ]);
+  return /* @__PURE__ */ React2.createElement(MosaicContainerContextProvider, {
+    id: eventHandler.id,
+    eventHandler,
+    orientation,
+    state,
+    dragging: state.type === "active" ? dragging : void 0,
+    scrolling,
+    activeLocation,
+    setActiveLocation,
+    currentId,
+    setCurrentId,
+    registerScrollTo
+  }, /* @__PURE__ */ React2.createElement(Comp, {
+    ...composableProps(props, {
+      classNames: "h-full",
+      style: {
+        [MOSAIC_CONTAINER_PLACEHOLDER_WIDTH]: state.type === "active" && state.bounds ? `${state.bounds.width}px` : "0px",
+        [MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT]: state.type === "active" && state.bounds ? `${state.bounds.height}px` : "0px"
+      }
+    }),
+    [`data-${MOSAIC_CONTAINER_STATE_ATTR}`]: state.type,
+    ref: composedRef
+  }, children), debug?.());
+});
+MosaicContainer.displayName = MOSAIC_CONTAINER_NAME;
+
+// src/components/Mosaic/Tile.tsx
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { combine as combine3 } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { composeRefs } 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 React3, { useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+import { composableProps as composableProps2, slottable } from "@dxos/ui-theme";
+var MOSAIC_TILE_NAME = "Mosaic.Tile";
+var [MosaicTileContextProvider, useMosaicTileContext] = createContext3("MosaicTile");
+var MOSAIC_TILE_STATE_ATTR = "mosaic-tile-state";
+var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, draggable: draggableProp, current, debug: _, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot3 : Primitive3.div;
+  const rootRef = useRef3(null);
+  const composedRef = composeRefs(rootRef, forwardedRef);
+  const { id: containerId, eventHandler, orientation, scrolling, setActiveLocation } = useMosaicContainerContext(MOSAIC_TILE_NAME);
+  const [state, setState] = useState3({
+    type: "idle"
+  });
+  const allowedEdges = useMemo3(() => allowedEdgesProp || (orientation === "vertical" ? [
+    "top",
+    "bottom"
+  ] : [
+    "left",
+    "right"
+  ]), [
+    allowedEdgesProp,
+    orientation
+  ]);
+  const data = useMemo3(() => ({
+    type: "tile",
+    id,
+    containerId,
+    data: dataProp,
+    location
+  }), [
+    containerId,
+    location,
+    dataProp
+  ]);
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!draggableProp || !root || !containerId || scrolling) {
+      return;
+    }
+    const handleChange = ({ self, source }) => {
+      if (source.data.id !== dataProp.id) {
+        const closestEdge = extractClosestEdge(self.data);
+        const location2 = data.location + (closestEdge === "top" || closestEdge === "left" ? -0.5 : 0.5);
+        setActiveLocation(location2);
+        setState({
+          type: "target",
+          closestEdge
+        });
+      }
+    };
+    return combine3(
+      // Source.
+      draggable({
+        element: root,
+        dragHandle: dragHandle && state.type !== "preview" ? dragHandle : void 0,
+        canDrag: () => true,
+        getInitialData: () => data,
+        onGenerateDragPreview: ({ location: location2, nativeSetDragImage }) => {
+          setCustomNativeDragPreview({
+            nativeSetDragImage,
+            getOffset: preserveOffsetOnSource({
+              element: root,
+              input: location2.current.input
+            }),
+            render: ({ container }) => {
+              data.bounds = root.getBoundingClientRect();
+              setState({
+                type: "preview",
+                container,
+                rect: root.getBoundingClientRect()
+              });
+              return () => setState({
+                type: "dragging"
+              });
+            }
+          });
+        },
+        onDragStart: () => {
+          setState({
+            type: "dragging"
+          });
+        },
+        onDrop: () => {
+          setState({
+            type: "idle"
+          });
+        }
+      }),
+      // Target.
+      dropTargetForElements2({
+        element: root,
+        getData: ({ input, element }) => attachClosestEdge(data, {
+          input,
+          element,
+          allowedEdges
+        }),
+        canDrop: ({ source }) => {
+          const data2 = getSourceData(source);
+          return data2 && eventHandler.canDrop?.({
+            source: data2
+          }) || false;
+        },
+        onDragEnter: ({ self, source }) => {
+          handleChange({
+            self,
+            source
+          });
+        },
+        onDragLeave: () => {
+          setState({
+            type: "idle"
+          });
+          setActiveLocation(void 0);
+        },
+        onDrag: ({ self, source }) => {
+          handleChange({
+            self,
+            source
+          });
+        },
+        onDrop: () => {
+          setState({
+            type: "idle"
+          });
+          setActiveLocation(void 0);
+        }
+      })
+    );
+  }, [
+    rootRef,
+    forwardedRef,
+    containerId,
+    dragHandle,
+    eventHandler,
+    data,
+    scrolling,
+    allowedEdges,
+    setActiveLocation
+  ]);
+  const { className, ...rest } = composableProps2(props, {
+    classNames: "relative outline-none"
+  });
+  return /* @__PURE__ */ React3.createElement(MosaicTileContextProvider, {
+    state
+  }, /* @__PURE__ */ React3.createElement(Comp, {
+    ...rest,
+    "data-object-id": id,
+    [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
+    role: "listitem",
+    // Pair `current` prop with `aria-current="true"` so the
+    // `dx-current` utility (which keys off `aria-[current=true]:`)
+    // actually fires. Without this the prop is purely advisory and
+    // any `dx-current` styling on the tile would silently no-op.
+    "aria-current": current ? "true" : void 0,
+    className,
+    ref: composedRef
+  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React3.createElement(Comp, {
+    // NOTE: Use to control appearance while dragging.
+    [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
+    className,
+    style: {
+      width: `${state.rect.width}px`,
+      height: `${state.rect.height}px`
+    }
+  }, children), state.container));
+});
+MosaicTile.displayName = MOSAIC_TILE_NAME;
+
+// src/components/Mosaic/Placeholder.tsx
+import { DropIndicator as NaturalDropIndicator } from "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box";
+import { dropTargetForElements as dropTargetForElements3 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import React4, { useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef4 } from "react";
+import { mx } from "@dxos/ui-theme";
+var MOSAIC_PLACEHOLDER_NAME = "Mosaic.Placeholder";
+var MOSAIC_PLACEHOLDER_ORIENTATION_ATTR = "mosaic-placeholder-orientation";
+var MOSAIC_PLACEHOLDER_STATE_ATTR = "mosaic-placeholder-state";
+var MOSAIC_PLACEHOLDER_LOCATION_ATTR = "mosaic-placeholder-location";
+var MosaicPlaceholder = ({ classNames, children, asChild, orientation = "vertical", location }) => {
+  const rootRef = useRef4(null);
+  const Comp = asChild ? Slot4 : Primitive4.div;
+  const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useMosaicContainerContext(MOSAIC_PLACEHOLDER_NAME);
+  const data = useMemo4(() => ({
+    type: "placeholder",
+    containerId,
+    location
+  }), [
+    containerId,
+    location
+  ]);
+  useLayoutEffect2(() => {
+    const root = rootRef.current;
+    if (!root || scrolling) {
+      return;
+    }
+    return dropTargetForElements3({
+      element: root,
+      getData: () => data,
+      canDrop: ({ source }) => {
+        const data2 = getSourceData(source);
+        return data2 && eventHandler.canDrop?.({
+          source: data2
+        }) || false;
+      },
+      onDragEnter: () => {
+        setActiveLocation(data.location);
+      },
+      onDragLeave: () => {
+        setActiveLocation(void 0);
+      },
+      onDrop: () => {
+        setActiveLocation(void 0);
+      }
+    });
+  }, [
+    rootRef,
+    data,
+    scrolling,
+    setActiveLocation
+  ]);
+  return /* @__PURE__ */ React4.createElement(Comp, {
+    [`data-${MOSAIC_PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,
+    [`data-${MOSAIC_PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
+    [`data-${MOSAIC_PLACEHOLDER_LOCATION_ATTR}`]: String(location),
+    role: "none",
+    className: mx("relative", classNames),
+    ref: rootRef
+  }, children);
+};
+MosaicPlaceholder.displayName = MOSAIC_PLACEHOLDER_NAME;
+var DROP_INDICATOR_NAME = "Mosaic.DropIndicator";
+var MosaicDropIndicator = (props) => {
+  const { state } = useMosaicTileContext(DROP_INDICATOR_NAME);
+  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React4.createElement(NaturalDropIndicator, {
+    ...props,
+    edge: state.closestEdge
+  }) : null;
+};
+MosaicDropIndicator.displayName = DROP_INDICATOR_NAME;
+
+// src/components/Mosaic/Stack.tsx
+import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import React5, { forwardRef as forwardRef2, Fragment, useCallback as useCallback3, useEffect as useEffect3, useRef as useRef5 } from "react";
+import { invariant } from "@dxos/invariant";
+import { composable as composable2, composableProps as composableProps3, mx as mx2 } from "@dxos/ui-theme";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Stack.tsx";
+var MOSAIC_STACK_NAME = "MosaicStack";
+var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical", getId, items, scrollIntoView = true, Tile, draggable: draggable2 = true, debug, ...props }, forwardedRef) => {
+  const { id, orientation = orientationProp, dragging, currentId, registerScrollTo } = useMosaicContainerContext(MOSAIC_STACK_NAME);
+  const visibleItems = useVisibleItems({
+    id,
+    items,
+    dragging: dragging?.source.data,
+    getId
+  });
+  invariant(orientation === "vertical" || orientation === "horizontal", `Invalid orientation: ${orientation}`, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 45, S: void 0, A: ["orientation === 'vertical' || orientation === 'horizontal'", "`Invalid orientation: ${orientation}`"] });
+  const rootRef = useRef5(null);
+  const scrollToId = useCallback3((targetId) => {
+    if (!scrollIntoView) {
+      return;
+    }
+    const el = rootRef.current?.querySelector(`[data-object-id="${CSS.escape(targetId)}"]`);
+    el?.scrollIntoView({
+      block: "nearest",
+      behavior: "smooth"
+    });
+  }, [
+    scrollIntoView
+  ]);
+  useEffect3(() => {
+    registerScrollTo(scrollToId);
+    return () => registerScrollTo(void 0);
+  }, [
+    registerScrollTo,
+    scrollToId
+  ]);
+  const composedRef = useComposedRefs3(rootRef, forwardedRef);
+  return /* @__PURE__ */ React5.createElement("div", {
+    ...composableProps3(props, {
+      role: "list",
+      classNames: [
+        "flex",
+        orientation === "horizontal" && "h-full [&>*]:shrink-0",
+        orientation === "vertical" && "flex-col"
+      ]
+    }),
+    ref: composedRef
+  }, draggable2 && /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
+    orientation,
+    location: 0.5
+  }), visibleItems?.map((item, index) => /* @__PURE__ */ React5.createElement(Fragment, {
+    key: getId(item)
+  }, /* @__PURE__ */ React5.createElement(Tile, {
+    id: getId(item),
+    data: item,
+    location: index + 1,
+    draggable: draggable2,
+    current: getId(item) === currentId,
+    debug
+  }), draggable2 && /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
+    orientation,
+    location: index + 1.5
+  }))));
+});
+MosaicStackInner.displayName = MOSAIC_STACK_NAME;
+var MosaicStack = MosaicStackInner;
+var MOSAIC_VIRTUAL_STACK_NAME = "MosaicVirtualStack";
+var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vertical", getId, items, scrollIntoView = true, Tile, estimateSize, getScrollElement, overscan = 8, gap, onChange, draggable: draggable2 = true, debug, ...props }, forwardedRef) => {
+  invariant(Tile, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 101, S: void 0, A: ["Tile", ""] });
+  const { id, dragging, currentId, registerScrollTo } = useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
+  const visibleItems = useVisibleItems({
+    id,
+    items,
+    dragging: dragging?.source.data,
+    getId
+  });
+  const wrappedEstimateSize = draggable2 ? (index) => index % 2 === 0 ? 0 : estimateSize(Math.floor(index / 2)) : estimateSize;
+  const virtualizer = useVirtualizer({
+    // NOTE: When draggable we double the number of items to allow for placeholders.
+    count: draggable2 ? visibleItems.length * 2 + 1 : visibleItems.length,
+    estimateSize: wrappedEstimateSize,
+    gap,
+    // Key measurements by stable item ID so the size cache survives scrolling;
+    // without this, measurements are indexed by position and are lost when items reorder.
+    getItemKey: draggable2 ? (index) => index % 2 === 0 ? `ph-${index}` : getId(visibleItems[Math.floor(index / 2)]) : (index) => getId(visibleItems[index]),
+    getScrollElement,
+    overscan,
+    onChange
+  });
+  const scrollToId = useCallback3((targetId) => {
+    const itemIndex = visibleItems.findIndex((item) => getId(item) === targetId);
+    if (itemIndex >= 0) {
+      if (!scrollIntoView) {
+        return;
+      }
+      const virtualIndex = draggable2 ? itemIndex * 2 + 1 : itemIndex;
+      virtualizer.scrollToIndex(virtualIndex, {
+        align: "start",
+        behavior: "smooth"
+      });
+    }
+  }, [
+    visibleItems,
+    getId,
+    draggable2,
+    virtualizer,
+    scrollIntoView
+  ]);
+  useEffect3(() => {
+    registerScrollTo(scrollToId);
+    return () => registerScrollTo(void 0);
+  }, [
+    registerScrollTo,
+    scrollToId
+  ]);
+  const virtualItems = virtualizer.getVirtualItems();
+  const getData = (index) => {
+    if (draggable2) {
+      if (index % 2 === 0) {
+        return {
+          location: Math.floor(index / 2) + 0.5
+        };
+      } else {
+        return {
+          data: visibleItems[Math.floor(index / 2)],
+          location: Math.floor(index / 2) + 1
+        };
+      }
+    } else {
+      return {
+        data: visibleItems[index],
+        location: index + 1
+      };
+    }
+  };
+  return /* @__PURE__ */ React5.createElement("div", {
+    ...composableProps3(props, {
+      role: "list",
+      classNames: [
+        // shrink-0 is required: this div sets an explicit height via inline style (getTotalSize).
+        // Without it, a parent flex container (e.g. ScrollArea.Viewport) would shrink this div
+        // to the viewport height, collapsing the scroll content and causing scrollbar drift.
+        "flex shrink-0",
+        orientation === "horizontal" && "h-full [&>*]:shrink-0",
+        orientation === "vertical" && "flex-col"
+      ]
+    }),
+    style: {
+      position: "relative",
+      ...orientation === "vertical" ? {
+        width: "100%",
+        height: virtualizer.getTotalSize()
+      } : {
+        width: virtualizer.getTotalSize(),
+        height: "100%"
+      }
+    },
+    ref: forwardedRef
+  }, virtualItems.map(({ key, index, start }) => {
+    const { data, location } = getData(index);
+    return /* @__PURE__ */ React5.createElement("div", {
+      key,
+      "data-index": index,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        ...orientation === "vertical" ? {
+          width: "100%",
+          transform: `translateY(${start}px)`
+        } : {
+          height: "100%",
+          transform: `translateX(${start}px)`
+        }
+      },
+      ref: virtualizer.measureElement
+    }, data ? /* @__PURE__ */ React5.createElement(Tile, {
+      id: getId(data),
+      data,
+      location,
+      draggable: draggable2,
+      current: getId(data) === currentId,
+      debug
+    }) : /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
+      orientation,
+      location
+    }));
+  }));
+});
+MosaicVirtualStackInner.displayName = MOSAIC_VIRTUAL_STACK_NAME;
+var MosaicVirtualStack = MosaicVirtualStackInner;
+MosaicVirtualStack[/* @__PURE__ */ Symbol.for("dxos.composable")] = true;
+var InternalPlaceholder = (props) => {
+  return /* @__PURE__ */ React5.createElement(MosaicPlaceholder, {
+    ...props,
+    classNames: styles.placeholder.root
+  }, /* @__PURE__ */ React5.createElement("div", {
+    className: mx2("flex h-full bg-base-surface border border-dashed border-separator rounded-xs", styles.placeholder.content)
+  }));
+};
+InternalPlaceholder.displayName = "InternalPlaceholder";
+
+// src/components/Mosaic/Mosaic.tsx
+var Mosaic = {
+  Root: MosaicRoot,
+  Container: MosaicContainer,
+  Tile: MosaicTile,
+  Placeholder: MosaicPlaceholder,
+  DropIndicator: MosaicDropIndicator,
+  Stack: MosaicStack,
+  VirtualStack: MosaicVirtualStack
+};
+
+export {
+  useVisibleItems,
+  Focus,
+  useFocus,
+  styles,
+  getSourceData,
+  useMosaicRootContext,
+  useMosaicContainerContext,
+  useMosaicTileContext,
+  Mosaic
+};
+//# sourceMappingURL=chunk-RUQB4JIG.mjs.map