@dxos/react-ui-mosaic 0.10.0 → 0.11.0

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

@@ -1,1119 +0,0 @@
-// 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",
-      // Placeholders open instantly (`duration-0`). The source slot is reserved on drag start by
-      // activating its placeholder (see Stack.tsx), so the stack no longer collapses/flickers when the
-      // dragged item is removed. NOTE: if the open animation below is ever enabled, exempt the source
-      // placeholder — animating its reserved gap from 0 would reintroduce the start-of-drag flicker.
-      // '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({
-      // Only monitor Mosaic tile drags; other pragmatic-dnd sources under this root are not ours to handle.
-      canMonitor: ({ source }) => source.data.type === "tile",
-      /**
-      * 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: 98, 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: 111, 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: 144, 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: 151, S: void 0 });
-          return;
-        }
-        try {
-          if (location.current.dropTargets.length === 0) {
-            log.info("cancelled", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 165, 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: 170, 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: 185, 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, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
-import { composable, composableProps } from "@dxos/react-ui";
-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, controllerRef, currentId, onCurrentChange, selectedIds, onSelectionChange, 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 setSelected = useCallback2((id, selected) => onSelectionChange?.(id, selected), [
-    onSelectionChange
-  ]);
-  const scrollToRef = useRef2(void 0);
-  const registerScrollTo = useCallback2((fn) => {
-    scrollToRef.current = fn;
-  }, []);
-  useImperativeHandle(controllerRef, () => ({
-    scrollToItem: (id) => scrollToRef.current?.(id)
-  }), []);
-  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;
-        },
-        // Reorder is a move, not a copy — otherwise the browser shows the green "+" copy cursor.
-        getDropEffect: () => "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,
-          // Only autoscroll for tile (reorder) drags. Resize-handle drags carry no tile data, so
-          // resizing a tile near a viewport edge must not scroll the container.
-          canScroll: ({ source }) => getSourceData(source) != null,
-          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,
-    selectedIds,
-    setSelected,
-    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, { useCallback as useCallback3, useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
-import { createPortal } from "react-dom";
-import { composableProps as composableProps2, slottable } from "@dxos/react-ui";
-import { resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
-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: dragHandleProp, allowedEdges: allowedEdgesProp, location, id, data: dataProp, draggable: draggableProp, current, selected, size: sizeProp, onSizeChange, minSize, maxSize, 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 [registeredDragHandle, setRegisteredDragHandle] = useState3(null);
-  const dragHandle = dragHandleProp ?? registeredDragHandle;
-  const [size, setInternalSize] = useState3(sizeProp);
-  const setSize = useCallback3((nextSize, commit) => {
-    setInternalSize(nextSize);
-    if (commit) {
-      onSizeChange?.(nextSize);
-    }
-  }, [
-    onSizeChange
-  ]);
-  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
-        });
-      }
-    };
-    const handleNativeDragStart = (event) => {
-      if (event.dataTransfer) {
-        event.dataTransfer.effectAllowed = "move";
-      }
-    };
-    root.addEventListener("dragstart", handleNativeDragStart);
-    return combine3(
-      () => root.removeEventListener("dragstart", handleNativeDragStart),
-      // 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;
-        },
-        // Reorder is a move, not a copy — otherwise the browser shows the green "+" copy cursor.
-        getDropEffect: () => "move",
-        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"
-  });
-  const vertical = orientation === "vertical";
-  const sized = size != null;
-  const bounded = sized || minSize != null || maxSize != null;
-  const sizeStyles = {
-    ...sized && sizeStyle(size, vertical ? "vertical" : "horizontal"),
-    ...minSize != null && {
-      [vertical ? "minBlockSize" : "minInlineSize"]: `${minSize}rem`
-    },
-    ...maxSize != null && {
-      [vertical ? "maxBlockSize" : "maxInlineSize"]: `${maxSize}rem`
-    }
-  };
-  return /* @__PURE__ */ React3.createElement(MosaicTileContextProvider, {
-    state,
-    setDragHandle: setRegisteredDragHandle,
-    size,
-    setSize,
-    minSize,
-    maxSize
-  }, /* @__PURE__ */ React3.createElement(Comp, {
-    ...rest,
-    ...bounded && resizeAttributes,
-    ...bounded && {
-      style: {
-        ...rest.style,
-        ...sizeStyles
-      }
-    },
-    "data-object-id": id,
-    [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
-    role: "listitem",
-    // Pair `current` / `selected` props with `aria-current` / `aria-selected`
-    // so the `dx-current` / `dx-selected` / `dx-hover` utilities (which key
-    // off those attributes) actually fire. Without this the props are purely
-    // advisory and the corresponding styling silently no-ops.
-    "aria-current": current ? "true" : void 0,
-    "aria-selected": selected ? "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/DragHandle.tsx
-import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
-import React4, { forwardRef as forwardRef2 } from "react";
-import { Button, IconButton, useTranslation } from "@dxos/react-ui";
-var MOSAIC_DRAG_HANDLE_NAME = "Mosaic.DragHandle";
-var REACT_UI_TRANSLATION_KEY = "@dxos/react-ui";
-var MosaicDragHandle = /* @__PURE__ */ forwardRef2(({ icon = "ph--dots-six-vertical--regular", label, variant = "ghost", classNames, testId, children }, forwardedRef) => {
-  const { t } = useTranslation(REACT_UI_TRANSLATION_KEY);
-  const { setDragHandle } = useMosaicTileContext(MOSAIC_DRAG_HANDLE_NAME);
-  const ref = composeRefs2(forwardedRef, setDragHandle);
-  const testIdProps = testId ? {
-    "data-testid": testId
-  } : {};
-  if (children) {
-    return /* @__PURE__ */ React4.createElement(Button, {
-      ref,
-      variant,
-      tabIndex: -1,
-      classNames: [
-        "grid place-items-center cursor-grab",
-        classNames
-      ],
-      ...testIdProps
-    }, children, /* @__PURE__ */ React4.createElement("span", {
-      className: "sr-only"
-    }, label ?? t("toolbar-drag-handle.label")));
-  }
-  return /* @__PURE__ */ React4.createElement(IconButton, {
-    ref,
-    iconOnly: true,
-    noTooltip: true,
-    tabIndex: -1,
-    variant,
-    icon,
-    label: label ?? t("toolbar-drag-handle.label"),
-    classNames: [
-      "cursor-grab",
-      classNames
-    ],
-    ...testIdProps
-  });
-});
-MosaicDragHandle.displayName = MOSAIC_DRAG_HANDLE_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 React5, { 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;
-      },
-      // Reorder is a move, not a copy — otherwise the browser shows the green "+" copy cursor.
-      getDropEffect: () => "move",
-      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",
-    [`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__ */ React5.createElement(NaturalDropIndicator, {
-    ...props,
-    edge: state.closestEdge
-  }) : null;
-};
-MosaicDropIndicator.displayName = DROP_INDICATOR_NAME;
-
-// src/components/Mosaic/ResizeHandle.tsx
-import React6 from "react";
-import { ResizeHandle } from "@dxos/react-ui-dnd";
-var MOSAIC_RESIZE_HANDLE_NAME = "Mosaic.ResizeHandle";
-var MIN_WIDTH = 20;
-var MIN_HEIGHT = 3;
-var DEFAULT_EXTRINSIC_SIZE = 50;
-var MosaicResizeHandle = ({ minSize, maxSize, fallbackSize = DEFAULT_EXTRINSIC_SIZE }) => {
-  const { orientation = "vertical" } = useMosaicContainerContext(MOSAIC_RESIZE_HANDLE_NAME);
-  const { size, setSize, minSize: tileMinSize, maxSize: tileMaxSize } = useMosaicTileContext(MOSAIC_RESIZE_HANDLE_NAME);
-  const horizontal = orientation === "horizontal";
-  return /* @__PURE__ */ React6.createElement(ResizeHandle, {
-    side: horizontal ? "inline-end" : "block-end",
-    fallbackSize,
-    minSize: minSize ?? tileMinSize ?? (horizontal ? MIN_WIDTH : MIN_HEIGHT),
-    maxSize: maxSize ?? tileMaxSize,
-    size,
-    onSizeChange: setSize
-  });
-};
-MosaicResizeHandle.displayName = MOSAIC_RESIZE_HANDLE_NAME;
-
-// src/components/Mosaic/Stack.tsx
-import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import React7, { Fragment, forwardRef as forwardRef3, useCallback as useCallback4, useEffect as useEffect3, useLayoutEffect as useLayoutEffect3, useMemo as useMemo5, useRef as useRef5 } from "react";
-import { invariant } from "@dxos/invariant";
-import { composable as composable2, composableProps as composableProps3 } from "@dxos/react-ui";
-import { 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, selectedIds, registerScrollTo, setActiveLocation } = 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: 46, S: void 0, A: ["orientation === 'vertical' || orientation === 'horizontal'", "`Invalid orientation: ${orientation}`"] });
-  const draggingSource = dragging?.source.data;
-  const sourceIndex = useMemo5(() => {
-    if (!items || !draggingSource || draggingSource.containerId !== id) {
-      return -1;
-    }
-    return items.findIndex((item) => getId(item) === draggingSource.id);
-  }, [
-    items,
-    draggingSource,
-    id,
-    getId
-  ]);
-  useLayoutEffect3(() => {
-    if (sourceIndex >= 0) {
-      setActiveLocation(sourceIndex + 0.5);
-    }
-  }, [
-    sourceIndex,
-    setActiveLocation
-  ]);
-  const rootRef = useRef5(null);
-  const scrollToId = useCallback4((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__ */ React7.createElement("div", {
-    ...composableProps3(props, {
-      role: "list",
-      classNames: [
-        "flex",
-        orientation === "horizontal" && "h-full [&>*]:shrink-0",
-        orientation === "vertical" && "flex-col"
-      ]
-    }),
-    ref: composedRef
-  }, draggable2 && /* @__PURE__ */ React7.createElement(InternalPlaceholder, {
-    orientation,
-    location: 0.5
-  }), visibleItems?.map((item, index) => /* @__PURE__ */ React7.createElement(Fragment, {
-    key: getId(item)
-  }, /* @__PURE__ */ React7.createElement(Tile, {
-    id: getId(item),
-    data: item,
-    location: index + 1,
-    draggable: draggable2,
-    current: getId(item) === currentId,
-    selected: selectedIds?.has(getId(item)),
-    debug
-  }), draggable2 && /* @__PURE__ */ React7.createElement(InternalPlaceholder, {
-    orientation,
-    location: index + 1.5
-  }))));
-});
-MosaicStackInner.displayName = MOSAIC_STACK_NAME;
-var MosaicStack = MosaicStackInner;
-var MOSAIC_VIRTUAL_STACK_NAME = "MosaicVirtualStack";
-var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef3(({ 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: 128, S: void 0, A: ["Tile", ""] });
-  const { id, dragging, currentId, selectedIds, 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,
-    // Inset the stack from both ends by `gap` (matching the inter-item spacing). The virtualizer
-    // folds this into item offsets, getTotalSize(), and scrollToIndex, so no manual compensation.
-    paddingStart: gap,
-    paddingEnd: 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 = useCallback4((targetId) => {
-    const itemIndex = visibleItems.findIndex((item) => getId(item) === targetId);
-    if (itemIndex >= 0) {
-      if (!scrollIntoView) {
-        return;
-      }
-      const virtualIndex = draggable2 ? itemIndex * 2 + 1 : itemIndex;
-      const [offset] = virtualizer.getOffsetForIndex(virtualIndex, "start") ?? [];
-      if (offset != null) {
-        virtualizer.scrollToOffset(Math.max(0, offset - (gap ?? 0)), {
-          behavior: "smooth"
-        });
-      }
-    }
-  }, [
-    visibleItems,
-    getId,
-    draggable2,
-    virtualizer,
-    scrollIntoView,
-    gap
-  ]);
-  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__ */ React7.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__ */ React7.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__ */ React7.createElement(Tile, {
-      id: getId(data),
-      data,
-      location,
-      draggable: draggable2,
-      current: getId(data) === currentId,
-      selected: selectedIds?.has(getId(data)),
-      debug
-    }) : /* @__PURE__ */ React7.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__ */ React7.createElement(MosaicPlaceholder, {
-    ...props,
-    classNames: styles.placeholder.root
-  }, /* @__PURE__ */ React7.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,
-  DragHandle: MosaicDragHandle,
-  ResizeHandle: MosaicResizeHandle,
-  Placeholder: MosaicPlaceholder,
-  DropIndicator: MosaicDropIndicator,
-  Stack: MosaicStack,
-  VirtualStack: MosaicVirtualStack
-};
-
-export {
-  useVisibleItems,
-  Focus,
-  useFocus,
-  styles,
-  getSourceData,
-  useMosaicRootContext,
-  useMosaicContainerContext,
-  useMosaicTileContext,
-  Mosaic
-};
-//# sourceMappingURL=chunk-OBVIYZLR.mjs.map