@dxos/react-ui-mosaic 0.8.4-main.bc674ce → 0.8.4-main.c85a9c8dae

package/dist/lib/browser/chunk-7S4PIFKU.mjs

@@ -0,0 +1,953 @@
+// 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 { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable } from "@fluentui/react-tabster";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import React, { createContext, forwardRef, useContext, useRef, useState } from "react";
+import { mx } from "@dxos/ui-theme";
+var FOCUS_STATE_ATTR = "focus-state";
+var FocusContext = /* @__PURE__ */ createContext({});
+var useFocus = () => useContext(FocusContext);
+var Group = /* @__PURE__ */ forwardRef(({ classNames, className, children, asChild, orientation = "vertical", ...props }, forwardedRef) => {
+  const rootRef = useRef(null);
+  const composedRef = useComposedRefs(rootRef, forwardedRef);
+  const Comp = asChild ? Slot : Primitive.div;
+  const focusableGroupAttrs = useFocusableGroup({
+    tabBehavior: "limited-trap-focus"
+  });
+  const arrowNavigationAttrs = useArrowNavigationGroup({
+    axis: orientation,
+    memorizeCurrent: true
+  });
+  const tabsterAttrs = useMergedTabsterAttributes_unstable(focusableGroupAttrs, arrowNavigationAttrs);
+  const [state, setState] = useState();
+  return /* @__PURE__ */ React.createElement(FocusContext.Provider, {
+    value: {
+      setFocus: setState
+    }
+  }, /* @__PURE__ */ React.createElement(Comp, {
+    ...props,
+    ...tabsterAttrs,
+    ...state && {
+      [`data-${FOCUS_STATE_ATTR}`]: state
+    },
+    tabIndex: 0,
+    className: mx([
+      // TODO(burdon): Option for border/rounded; ring/outline vs border?
+      "outline-hidden border border-separator md:rounded-xs",
+      // Focus (e.g., via tabster).
+      "focus:!border-accent-surface",
+      // Active (e.g., drop target).
+      "data-[focus-state=active]:border-neutral-focus-indicator",
+      // Error
+      "data-[focus-state=error]:border-rose-500"
+    ], className, classNames),
+    ref: composedRef
+  }, children));
+});
+var Focus = {
+  Group
+};
+
+// 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 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 React2, { forwardRef as forwardRef2, useCallback, useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { log } from "@dxos/log";
+import { mx as mx2 } from "@dxos/ui-theme";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Root.tsx";
+var [MosaicRootContextProvider, useMosaicRootContext] = createContext2("MosaicRoot");
+var MOSAIC_ROOT_NAME = "Mosaic.Root";
+var MOSAIC_ROOT_DEBUG_ATTR = "mosaic-debug";
+var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, debug }, forwardedRef) => {
+  const rootRef = useRef2(null);
+  const composedRef = useComposedRefs2(rootRef, forwardedRef);
+  const Comp = asChild ? Slot2 : Primitive2.div;
+  const [handlers, setHandlers] = useState2({});
+  const [dragging, setDragging] = useState2();
+  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],
+            // TOOD(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)
+        }, {
+          F: __dxlog_file,
+          L: 149,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        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)
+        }, {
+          F: __dxlog_file,
+          L: 162,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        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)
+        }, {
+          F: __dxlog_file,
+          L: 191,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        const { data: sourceData, handler: sourceHandler } = getSourceHandler(source);
+        if (!sourceHandler) {
+          log.warn("invalid source", {
+            source: sourceData,
+            handlers: Object.keys(handlers)
+          }, {
+            F: __dxlog_file,
+            L: 199,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return;
+        }
+        try {
+          if (location.current.dropTargets.length === 0) {
+            log.info("cancelled", void 0, {
+              F: __dxlog_file,
+              L: 214,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+          } else {
+            const { data: targetData, handler: targetHandler } = getTargetHandler(location);
+            if (!targetHandler) {
+              log.warn("invalid target", {
+                source: sourceData,
+                location,
+                handlers: Object.keys(handlers)
+              }, {
+                F: __dxlog_file,
+                L: 219,
+                S: void 0,
+                C: (f, a) => f(...a)
+              });
+              return;
+            }
+            if (sourceHandler === targetHandler) {
+              targetHandler.onDrop?.({
+                source: sourceData,
+                target: targetData
+              });
+            } else {
+              if (!sourceHandler.onTake) {
+                log.warn("invalid source", {
+                  source: sourceData
+                }, {
+                  F: __dxlog_file,
+                  L: 235,
+                  S: void 0,
+                  C: (f, a) => f(...a)
+                });
+                return;
+              }
+              sourceHandler.onTake?.({
+                source: sourceData
+              }, async (object) => {
+                targetHandler.onDrop?.({
+                  source: {
+                    ...sourceData,
+                    data: object
+                  },
+                  target: targetData
+                });
+                return true;
+              });
+            }
+          }
+        } finally {
+          handleCancel();
+        }
+      }
+    }));
+  }, [
+    handlers,
+    getSourceHandler,
+    getTargetHandler
+  ]);
+  return /* @__PURE__ */ React2.createElement(MosaicRootContextProvider, {
+    containers: handlers,
+    addContainer: (container) => setHandlers((containers) => ({
+      ...containers,
+      [container.id]: container
+    })),
+    removeContainer: (id) => setHandlers((containers) => {
+      delete containers[id];
+      return {
+        ...containers
+      };
+    }),
+    dragging
+  }, /* @__PURE__ */ React2.createElement(Comp, {
+    className: mx2("group", classNames),
+    [`data-${MOSAIC_ROOT_DEBUG_ATTR}`]: debug,
+    ref: composedRef
+  }, children));
+});
+MosaicRoot.displayName = MOSAIC_ROOT_NAME;
+
+// src/components/Mosaic/Container.tsx
+import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
+import { createContext as createContext3 } from "@radix-ui/react-context";
+import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { bind } from "bind-event-listener";
+import React3, { forwardRef as forwardRef3, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { mx as mx3 } from "@dxos/ui-theme";
+import { isTruthy } from "@dxos/util";
+var MOSAIC_CONTAINER_NAME = "Mosaic.Container";
+var [MosaicContainerContextProvider, useMosaicContainerContext] = createContext3("MosaicContainer");
+var MOSAIC_CONTAINER_STATE_ATTR = "mosaic-container-state";
+var MOSAIC_CONTAINER_PLACEHOLDER_WIDTH = "--mosaic-placeholder-width";
+var MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT = "--mosaic-placeholder-height";
+var counter = 0;
+var MosaicContainer = /* @__PURE__ */ forwardRef3(({ classNames, className, children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, debug, ...props }, forwardedRef) => {
+  const rootRef = useRef3(null);
+  const composedRef = useComposedRefs3(rootRef, forwardedRef);
+  const Comp = asChild ? Slot3 : Primitive3.div;
+  const eventHandler = useMemo2(() => eventHandlerProp ?? {
+    id: `mosaic-container-${counter++}`
+  }, [
+    eventHandlerProp
+  ]);
+  const { dragging } = useMosaicRootContext(MOSAIC_CONTAINER_NAME);
+  const [state, setState] = useState3({
+    type: "idle"
+  });
+  const [activeLocation, setActiveLocation] = useState3();
+  const [scrolling, setScrolling] = useState3(false);
+  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__ */ React3.createElement(MosaicContainerContextProvider, {
+    id: eventHandler.id,
+    eventHandler,
+    orientation,
+    state,
+    dragging: state.type === "active" ? dragging : void 0,
+    scrolling,
+    activeLocation,
+    setActiveLocation
+  }, /* @__PURE__ */ React3.createElement(Comp, {
+    className: mx3("h-full", className, classNames),
+    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"
+    },
+    ...props,
+    [`data-${MOSAIC_CONTAINER_STATE_ATTR}`]: state.type,
+    ref: composedRef
+  }, children), debug?.());
+});
+MosaicContainer.displayName = MOSAIC_CONTAINER_NAME;
+
+// src/components/Mosaic/Tile.tsx
+import { combine as combine3 } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { createContext as createContext4 } from "@radix-ui/react-context";
+import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import React4, { forwardRef as forwardRef4, useLayoutEffect, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
+import { createPortal } from "react-dom";
+import { mx as mx4 } from "@dxos/ui-theme";
+var MOSAIC_TILE_NAME = "Mosaic.Tile";
+var [MosaicTileContextProvider, useMosaicTileContext] = createContext4("MosaicTile");
+var MOSAIC_TILE_STATE_ATTR = "mosaic-tile-state";
+var MosaicTile = /* @__PURE__ */ forwardRef4(({ classNames, className, children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, debug: _, ...props }, forwardedRef) => {
+  const rootRef = useRef4(null);
+  const composedRef = composeRefs(rootRef, forwardedRef);
+  const Comp = asChild ? Slot4 : Primitive4.div;
+  const { id: containerId, eventHandler, orientation, scrolling, setActiveLocation } = useMosaicContainerContext(MOSAIC_TILE_NAME);
+  const [state, setState] = useState4({
+    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 (!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,
+    dragHandle,
+    eventHandler,
+    data,
+    scrolling,
+    allowedEdges,
+    setActiveLocation
+  ]);
+  return /* @__PURE__ */ React4.createElement(MosaicTileContextProvider, {
+    state
+  }, /* @__PURE__ */ React4.createElement(Comp, {
+    ...props,
+    [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
+    role: "listitem",
+    className: mx4("relative", className, classNames),
+    ref: composedRef
+  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement(Comp, {
+    // NOTE: Use to control appearance while dragging.
+    [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
+    // TODO(burdon): Configure drop animation.
+    className: mx4("relative", className, classNames),
+    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 { dropTargetForElements as dropTargetForElements3 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { DropIndicator as NaturalDropIndicator } from "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box";
+import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
+import React5, { useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef5 } from "react";
+import { mx as mx5 } from "@dxos/ui-theme";
+var MOSAIC_PLACEHOLDER_NAME = "Mosaic.Placeholder";
+var MOSAIC_PLACEHOLDER_ORIENTATION_ATTR = "mosaic-placeholder-orientation";
+var MOSAIC_PLACEHOLDER_STATE_ATTR = "mosaic-placeholder-state";
+var MosaicPlaceholder = ({ classNames, children, asChild, orientation = "vertical", location }) => {
+  const rootRef = useRef5(null);
+  const Comp = asChild ? Slot5 : Primitive5.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__ */ React5.createElement(Comp, {
+    [`data-${MOSAIC_PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,
+    [`data-${MOSAIC_PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
+    role: "none",
+    className: mx5("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__ */ React5.createElement(NaturalDropIndicator, {
+    ...props,
+    edge: state.closestEdge
+  }) : null;
+};
+MosaicDropIndicator.displayName = DROP_INDICATOR_NAME;
+
+// src/components/Mosaic/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";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Stack.tsx";
+var MOSAIC_STACK_NAME = "MosaicStack";
+var MosaicStackInner = /* @__PURE__ */ forwardRef5(({ classNames, className, role = "list", orientation: orientationProp = "vertical", draggable: draggable2 = true, items, getId, Tile, debug, ...props }, forwardedRef) => {
+  invariant(Tile, void 0, {
+    F: __dxlog_file2,
+    L: 75,
+    S: void 0,
+    A: [
+      "Tile",
+      ""
+    ]
+  });
+  const { id, orientation = orientationProp, dragging } = useMosaicContainerContext(MOSAIC_STACK_NAME);
+  const visibleItems = useVisibleItems({
+    id,
+    items,
+    dragging: dragging?.source.data,
+    getId
+  });
+  invariant(orientation === "vertical" || orientation === "horizontal", `Invalid orientation: ${orientation}`, {
+    F: __dxlog_file2,
+    L: 78,
+    S: void 0,
+    A: [
+      "orientation === 'vertical' || orientation === 'horizontal'",
+      "`Invalid orientation: ${orientation}`"
+    ]
+  });
+  return /* @__PURE__ */ React6.createElement("div", {
+    ...props,
+    role,
+    className: mx6("flex", orientation === "horizontal" && "h-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React6.createElement(InternalPlaceholder, {
+    orientation,
+    location: 0.5
+  }), visibleItems?.map((item, index) => /* @__PURE__ */ React6.createElement(Fragment, {
+    key: getId(item)
+  }, /* @__PURE__ */ React6.createElement(Tile, {
+    id: getId(item),
+    data: item,
+    location: index + 1,
+    draggable: draggable2,
+    debug
+  }), /* @__PURE__ */ React6.createElement(InternalPlaceholder, {
+    orientation,
+    location: index + 1.5
+  }))));
+});
+MosaicStackInner.displayName = MOSAIC_STACK_NAME;
+var MosaicStack = MosaicStackInner;
+var MOSAIC_VIRTUAL_STACK_NAME = "MosaicVirtualStack";
+var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef5(({ classNames, className, role = "list", orientation = "vertical", items, getId, Tile, estimateSize, getScrollElement, overscan = 8, onChange, debug, ...props }, forwardedRef) => {
+  invariant(Tile, void 0, {
+    F: __dxlog_file2,
+    L: 142,
+    S: void 0,
+    A: [
+      "Tile",
+      ""
+    ]
+  });
+  const { id, dragging } = useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
+  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", orientation === "horizontal" && "h-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
+    style: {
+      position: "relative",
+      ...orientation === "vertical" ? {
+        width: "100%",
+        height: virtualizer.getTotalSize()
+      } : {
+        width: virtualizer.getTotalSize(),
+        height: "100%"
+      }
+    },
+    ref: forwardedRef
+  }, virtualItems.map((virtualItem) => {
+    const data = visibleItems[Math.floor(virtualItem.index / 2)];
+    return /* @__PURE__ */ React6.createElement("div", {
+      key: virtualItem.key,
+      "data-index": virtualItem.index,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        ...orientation === "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(InternalPlaceholder, {
+      orientation,
+      location: Math.floor(virtualItem.index / 2) + 0.5
+    }) : /* @__PURE__ */ React6.createElement(Tile, {
+      id: getId(data),
+      data,
+      location: Math.floor(virtualItem.index / 2) + 1,
+      debug
+    }));
+  }));
+});
+MosaicVirtualStackInner.displayName = MOSAIC_VIRTUAL_STACK_NAME;
+var MosaicVirtualStack = MosaicVirtualStackInner;
+var InternalPlaceholder = (props) => {
+  return /* @__PURE__ */ React6.createElement(MosaicPlaceholder, {
+    ...props,
+    classNames: styles.placeholder.root
+  }, /* @__PURE__ */ React6.createElement("div", {
+    className: mx6("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,
+  useFocus,
+  Focus,
+  styles,
+  getSourceData,
+  useMosaicRootContext,
+  useMosaicContainerContext,
+  useMosaicTileContext,
+  Mosaic
+};
+//# sourceMappingURL=chunk-7S4PIFKU.mjs.map