@dxos/react-ui-mosaic 0.3.3-main.006ca4d

package/LICENSE

@@ -0,0 +1,8 @@
+MIT License 
+Copyright (c) 2022 DXOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,45 @@
+# Mosaic
+
+Mosaic is a drag-and-drop layout system for building responsive, multi-column layouts. 
+It is built on top of [dnd kit](https://dndkit.com/) and DXOS UI.
+
+
+## Taxonomy
+
+| Item               | Description                                                                                                          |
+|:-------------------|:---------------------------------------------------------------------------------------------------------------------|
+| Mosaic.Provider    | A Root container and React context that routes events between Containers.                                            |
+| Mosaic.Overlay     | A DOM portal managed by the Mosaic context that renders a Container's Component while dragging.                      |
+| Mosaic.Container   | A complex React component that manages the layout of a collection of tiles (e.g., Grid, Kanban, Stack, Table, Tree). |
+| Mosaic.Tile        | A Draggable wrapper managed by its parent container.                                                                 |
+| Component          | A pure React component that is rendered within the layout via the container's Tile or the root Mosaic's Overlay.     |
+| Item               | A datum represented by a Tile.                                                                                       |
+
+
+## Design principles
+
+- Extends `dnd-kit` without obfuscation or wrapping;
+  for example, mosaic provides additional hooks in the same manner as `dnd-kit`'s own useSortable`.
+- Mosaics consist of containers and pure components that can be laid out and rearranged by the user
+- DXOS UI components are pure tailwind-styled Radix components that expose small parts (List, ListItem, ListItem.Header, etc.)
+- Mosaic Containers define their own data model and __assemble__ Radix-style DXOS UI components.
+- Containers implement specific layouts of Tiles, which may reuse common components, such as DXOS UI Cards.
+- Container Models facilitate pure React components, but are easily mapped to data structures (e.g., `Graph`)
+  and `ECHO` data sets without the need to wrap/map the underlying __reactive__ objects (e.g., via `signals`).
+
+
+## Issues
+
+- When dragging across grid always set bounds (currently changes when between cell gaps).
+- Remove padding between tiles in Sortable (causes flickering); instead selectively add padding to tiles.
+
+- Projections/Lenses: tile props (e.g., label); position (e.g., index, grid position).
+- Standardize generics (when to use any, unknown, provide default, etc.)
+- Standardize events (e.g., onSelect).
+- Standardize Mosaic Root components (e.g., make generic).
+  - https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref#58473012
+- Radix-style components and theming (forwardRefs).
+- Focus (e.g., show grid while dragging in grid).
+- Mobile
+
+- Future of dnd-kit: https://github.com/clauderic/dnd-kit/issues/1194#issuecomment-1696704815

package/dist/lib/browser/index.mjs

@@ -0,0 +1,596 @@
+// packages/ui/react-ui-mosaic/src/mosaic/hooks/useContainer.ts
+import { useContext } from "react";
+import { raise } from "@dxos/debug";
+
+// packages/ui/react-ui-mosaic/src/mosaic/Container.tsx
+import React, { createContext, useEffect } from "react";
+var DEFAULT_TRANSITION = 200;
+var MosaicContainerContext = /* @__PURE__ */ createContext(void 0);
+var MosaicContainer = ({ children, id, debug, Component: Component2, transitionDuration = DEFAULT_TRANSITION, modifier, getOverlayProps, getOverlayStyle, onOver, onDrop, compare }) => {
+  const mosaic = useMosaic();
+  const container = {
+    id,
+    debug,
+    Component: Component2,
+    transitionDuration,
+    modifier,
+    getOverlayProps,
+    getOverlayStyle,
+    onOver,
+    onDrop,
+    compare
+  };
+  useEffect(() => {
+    mosaic.setContainer(container.id, container);
+    return () => {
+    };
+  }, Object.values(container));
+  return /* @__PURE__ */ React.createElement(MosaicContainerContext.Provider, {
+    value: container
+  }, children);
+};
+
+// packages/ui/react-ui-mosaic/src/mosaic/hooks/useContainer.ts
+var useContainer = () => useContext(MosaicContainerContext) ?? raise(new Error("Missing MosaicContainerContext"));
+
+// packages/ui/react-ui-mosaic/src/mosaic/hooks/useItemsWithPreview.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// packages/ui/react-ui-mosaic/src/mosaic/hooks/useMosaic.ts
+import { useContext as useContext2 } from "react";
+import { raise as raise2 } from "@dxos/debug";
+
+// packages/ui/react-ui-mosaic/src/mosaic/Root.tsx
+import { DndContext, KeyboardSensor, MouseSensor, pointerWithin, rectIntersection, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import pick from "lodash.pick";
+import React4, { createContext as createContext2, useState } from "react";
+import { createPortal } from "react-dom";
+
+// packages/ui/react-ui-mosaic/src/mosaic/Debug.tsx
+import React2 from "react";
+import { mx } from "@dxos/react-ui-theme";
+var Debug = ({ data, position }) => /* @__PURE__ */ React2.createElement("pre", {
+  className: mx("font-mono text-xs overflow-hidden m-2 p-1 z-[100]", "bg-neutral-50 dark:bg-neutral-700 border border-neutral-300 rounded", position === "bottom-left" && "fixed left-0 bottom-0", position === "bottom-right" && "fixed right-0 bottom-0")
+}, JSON.stringify(data, void 0, 1));
+
+// packages/ui/react-ui-mosaic/src/mosaic/DefaultComponent.tsx
+import React3, { forwardRef } from "react";
+import { Card } from "@dxos/react-ui";
+
+// packages/ui/react-ui-mosaic/src/mosaic/util/data.ts
+import { arrayMove } from "@dxos/util";
+var swapItems = (items, from, to) => {
+  const fromIndex = items.findIndex((item) => item.id === from.id);
+  const toIndex = items.findIndex((item) => item.id === to.id);
+  return fromIndex !== -1 && toIndex !== -1 ? arrayMove(items, fromIndex, toIndex) : items;
+};
+
+// packages/ui/react-ui-mosaic/src/mosaic/util/path.ts
+var SEPARATOR = "/";
+var Path = {
+  create: (...args) => args.join(SEPARATOR),
+  parts: (path) => path.split(SEPARATOR),
+  length: (path) => path.split(SEPARATOR).length,
+  first: (path) => path.split(SEPARATOR)[0] ?? path,
+  last: (path) => path.split(SEPARATOR).at(-1) ?? path,
+  parent: (path) => path.split(SEPARATOR).slice(0, -1).join(SEPARATOR),
+  hasRoot: (path, id) => Path.first(path) === id,
+  hasChild: (path, compare) => Path.parent(compare) === path,
+  hasDescendent: (path, compare) => compare !== path && compare.startsWith(path),
+  siblings: (path, compare) => Path.parent(path) === Path.parent(compare),
+  onPath: (path, id) => Path.parts(path).includes(id)
+};
+
+// packages/ui/react-ui-mosaic/src/mosaic/util/styles.ts
+import { CSS } from "@dnd-kit/utilities";
+var getTransformCSS = (transform) => transform ? CSS.Transform.toString(Object.assign(transform, {
+  scaleX: 1,
+  scaleY: 1
+})) : void 0;
+
+// packages/ui/react-ui-mosaic/src/mosaic/DefaultComponent.tsx
+var DefaultComponent = /* @__PURE__ */ forwardRef(({ draggableStyle, draggableProps, item: { id }, path }, forwardRef1) => {
+  return /* @__PURE__ */ React3.createElement(Card.Root, {
+    ref: forwardRef1,
+    style: draggableStyle
+  }, /* @__PURE__ */ React3.createElement(Card.Header, null, /* @__PURE__ */ React3.createElement(Card.DragHandle, draggableProps), /* @__PURE__ */ React3.createElement(Card.Title, {
+    title: Path.create(path, id),
+    classNames: "truncate font-mono text-xs"
+  })));
+});
+DefaultComponent.displayName = "DefaultComponent";
+
+// packages/ui/react-ui-mosaic/src/mosaic/Root.tsx
+var DEFAULT_COMPONENT_ID = "__default";
+var MosaicContext = /* @__PURE__ */ createContext2(void 0);
+var MosaicRoot = ({ Component: Component2 = DefaultComponent, debug, children }) => {
+  const [containers, setContainers] = useState({
+    [DEFAULT_COMPONENT_ID]: {
+      id: DEFAULT_COMPONENT_ID,
+      Component: Component2
+    }
+  });
+  const handleSetContainer = (id, container) => {
+    setContainers((containers2) => {
+      if (container) {
+        return {
+          ...containers2,
+          [id]: container
+        };
+      } else {
+        const { [id]: _, ...rest } = containers2;
+        return rest;
+      }
+    });
+  };
+  const [activeItem, setActiveItem] = useState();
+  const [overItem, setOverItem] = useState();
+  const [operation, setOperation] = useState("reject");
+  const collisionDetection = (args) => {
+    const pointerCollisions = pointerWithin(args);
+    if (pointerCollisions.length > 0) {
+      return pointerCollisions;
+    }
+    return rectIntersection(args);
+  };
+  const modifiers = (props) => {
+    const { transform } = props;
+    if (activeItem) {
+      const container = containers[Path.first(activeItem.path)];
+      return container?.modifier?.(activeItem, props) ?? transform;
+    } else {
+      return transform;
+    }
+  };
+  const sensors = useSensors(useSensor(MouseSensor, {
+    activationConstraint: {
+      distance: 10
+    }
+  }), useSensor(TouchSensor, {
+    activationConstraint: {
+      delay: 200,
+      tolerance: 5
+    }
+  }), useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }));
+  const handleDragStart = (event) => {
+    setActiveItem(pick(event.active.data.current, "path", "item", "position"));
+  };
+  const handleDragMove = (event) => {
+  };
+  const handleDragOver = (event) => {
+    const overItem2 = pick(event.over?.data.current, "path", "item", "position");
+    if (overItem2?.item?.id === activeItem?.item.id) {
+      return;
+    }
+    const activeContainer = activeItem && containers[Path.first(activeItem.path)];
+    const overContainer = overItem2?.path && containers[Path.first(overItem2.path)];
+    if (!event.over || !overItem2 || !overContainer || !activeItem || !activeContainer) {
+      setOperation("reject");
+      setOverItem(void 0);
+      return;
+    }
+    const onOver = ({ active, over }) => {
+      if (Path.parent(active.path) === Path.parent(over.path)) {
+        return "rearrange";
+      } else if (overContainer.onOver) {
+        return overContainer.onOver({
+          active,
+          over
+        });
+      } else {
+        return "adopt";
+      }
+    };
+    setOperation(onOver({
+      active: activeItem,
+      over: overItem2
+    }));
+    setOverItem(overItem2);
+  };
+  const handleDragCancel = (event) => {
+    setOperation("reject");
+    setActiveItem(void 0);
+    setOverItem(void 0);
+  };
+  const handleDragEnd = (event) => {
+    const overContainer = overItem && containers[Path.first(overItem.path)];
+    if (operation !== "reject" && activeItem && overItem && (activeItem.path !== overItem.path || activeItem.position !== overItem.position)) {
+      const activeContainer = containers[Path.first(activeItem.path)];
+      if (activeContainer) {
+        activeContainer.onDrop?.({
+          operation,
+          active: activeItem,
+          over: overItem
+        });
+        if (overContainer && overContainer !== activeContainer) {
+          overContainer.onDrop?.({
+            operation,
+            active: activeItem,
+            over: overItem
+          });
+        }
+      }
+    }
+    setTimeout(() => {
+      setOperation("reject");
+      setOverItem(void 0);
+      setActiveItem(void 0);
+    }, overContainer?.transitionDuration ?? DEFAULT_TRANSITION);
+  };
+  return /* @__PURE__ */ React4.createElement(MosaicContext.Provider, {
+    value: {
+      containers,
+      setContainer: handleSetContainer,
+      activeItem,
+      overItem,
+      operation
+    }
+  }, /* @__PURE__ */ React4.createElement(DndContext, {
+    collisionDetection,
+    modifiers: [
+      modifiers
+    ],
+    sensors,
+    // TODO(burdon): Allow container to veto drop.
+    cancelDrop: (event) => false,
+    onDragStart: handleDragStart,
+    onDragMove: handleDragMove,
+    onDragOver: handleDragOver,
+    onDragCancel: handleDragCancel,
+    onDragEnd: handleDragEnd
+  }, children, debug && /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement(MosaicDebug, {
+    containers,
+    operation,
+    activeItem,
+    overItem
+  }), document.body)));
+};
+var MosaicDebug = ({ containers, operation, activeItem, overItem }) => {
+  return /* @__PURE__ */ React4.createElement(Debug, {
+    position: "bottom-right",
+    data: {
+      containers: Object.keys(containers).map((id) => id),
+      operation,
+      active: {
+        id: activeItem?.item?.id.slice(0, 16),
+        path: activeItem?.path && Path.create(...Path.parts(activeItem.path).map((part) => part.slice(0, 16))),
+        position: activeItem?.position
+      },
+      over: {
+        id: overItem?.item?.id.slice(0, 16),
+        path: overItem?.path && Path.create(...Path.parts(overItem.path).map((part) => part.slice(0, 16))),
+        position: overItem?.position
+      }
+    }
+  });
+};
+
+// packages/ui/react-ui-mosaic/src/mosaic/hooks/useMosaic.ts
+var useMosaic = () => useContext2(MosaicContext) ?? raise2(new Error("Missing MosaicContext"));
+
+// packages/ui/react-ui-mosaic/src/mosaic/hooks/useItemsWithPreview.ts
+var useItemsWithPreview = ({ path, items }) => {
+  const { operation, activeItem, overItem } = useMosaic();
+  const [itemsWithPreview, setItemsWithPreview] = useState2(items);
+  const overParent = (
+    // If over the sortable context itself & active item is foreign, then treat self as the parent.
+    // This allows items to be appended to the end of the sortable.
+    overItem?.path === path && activeItem && Path.parent(activeItem.path) !== overItem.path ? path : overItem && Path.parent(overItem.path)
+  );
+  const [lastOverParent, setLastOverParent] = useState2(overParent);
+  useEffect2(() => {
+    if (operation === "reject" || operation === "rearrange" || !activeItem || !overItem) {
+      setLastOverParent(void 0);
+      setItemsWithPreview(items);
+      return;
+    }
+    if (lastOverParent === overParent) {
+      return;
+    }
+    setLastOverParent(overParent);
+    const activeIsChild = Path.hasChild(path, activeItem.path);
+    const overIsChild = Path.hasChild(path, overItem.path);
+    const overSelf = overItem.path === path;
+    if (!activeIsChild && overIsChild) {
+      setItemsWithPreview((items2) => {
+        const position = overItem.position;
+        return [
+          ...items2.slice(0, position),
+          activeItem.item,
+          ...items2.slice(position)
+        ];
+      });
+    } else if (!activeIsChild && overSelf) {
+      setItemsWithPreview((items2) => [
+        ...items2,
+        activeItem.item
+      ]);
+    } else if (activeIsChild && !overIsChild) {
+      setItemsWithPreview((items2) => items2.filter((item) => item.id !== activeItem.item.id));
+    } else {
+      setItemsWithPreview(items);
+    }
+  }, [
+    operation,
+    activeItem,
+    overItem,
+    overParent,
+    lastOverParent,
+    path,
+    items
+  ]);
+  return items.length === itemsWithPreview.length ? items : itemsWithPreview;
+};
+
+// packages/ui/react-ui-mosaic/src/mosaic/hooks/useSortedItems.ts
+var useSortedItems = (items) => {
+  const { compare } = useContainer();
+  return compare ? [
+    ...items
+  ].sort(compare) : items;
+};
+
+// packages/ui/react-ui-mosaic/src/mosaic/DragOverlay.tsx
+import { DragOverlay } from "@dnd-kit/core";
+import React5, { Component, useEffect as useEffect3, useRef, useState as useState3 } from "react";
+import { DensityProvider } from "@dxos/react-ui";
+var MosaicDragOverlay = ({ delay = 200, debug = false, ...overlayProps }) => {
+  const { containers, operation, activeItem, overItem } = useMosaic();
+  const [state, setState] = useState3({});
+  const timer = useRef();
+  useEffect3(() => {
+    if (activeItem) {
+      let container2;
+      let OverlayComponent2;
+      if (overItem?.path) {
+        container2 = containers[Path.first(overItem.path)];
+        OverlayComponent2 = container2?.Component;
+      }
+      if (!OverlayComponent2) {
+        container2 = containers[Path.first(activeItem.path)];
+        OverlayComponent2 = container2?.Component ?? DefaultComponent;
+      }
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setState({
+        container: container2,
+        OverlayComponent: OverlayComponent2
+      }), timer.current ? delay : 0);
+    } else {
+      setState({});
+    }
+  }, [
+    activeItem,
+    overItem
+  ]);
+  const container = state.container ?? (activeItem && containers[Path.first(activeItem.path)]);
+  const OverlayComponent = state.OverlayComponent ?? container?.Component;
+  const FallbackComponent = (activeItem && containers[Path.first(activeItem.path)])?.Component ?? DefaultComponent;
+  return (
+    // TODO(burdon): Set custom animations (e.g., in/out/around).
+    /* @__PURE__ */ React5.createElement(DragOverlay, {
+      adjustScale: false,
+      ...overlayProps,
+      style: {
+        ...container?.getOverlayStyle?.()
+      }
+    }, activeItem?.path && container && OverlayComponent && /* @__PURE__ */ React5.createElement(DensityProvider, {
+      density: "fine"
+    }, /* @__PURE__ */ React5.createElement(OverlayErrorBoundary, {
+      fallback: /* @__PURE__ */ React5.createElement(FallbackComponent, {
+        ...container.getOverlayProps?.(),
+        item: activeItem.item,
+        path: activeItem.path,
+        operation,
+        active: "overlay"
+      })
+    }, /* @__PURE__ */ React5.createElement(OverlayComponent, {
+      ...container.getOverlayProps?.(),
+      item: activeItem.item,
+      path: activeItem.path,
+      operation,
+      active: "overlay"
+    }), debug && /* @__PURE__ */ React5.createElement("div", {
+      className: "flex flex-wrap mt-1 p-1 bg-neutral-50 dark:bg-neutral-700 text-xs border rounded overflow-hidden gap-1"
+    }, /* @__PURE__ */ React5.createElement("span", {
+      className: "truncate"
+    }, /* @__PURE__ */ React5.createElement("span", {
+      className: "text-neutral-400"
+    }, "container "), container.id), /* @__PURE__ */ React5.createElement("span", {
+      className: "truncate"
+    }, /* @__PURE__ */ React5.createElement("span", {
+      className: "text-neutral-400"
+    }, "item "), activeItem.item.id.slice(0, 8))))))
+  );
+};
+var OverlayErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null
+    };
+    this.fallback = props.fallback ?? /* @__PURE__ */ React5.createElement("p", null, "ERROR: $", String(this.state.error));
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+  componentDidCatch(error, info) {
+    console.warn(error, info);
+  }
+  render() {
+    if (this.state.error) {
+      return this.fallback;
+    }
+    return this.props.children;
+  }
+};
+
+// packages/ui/react-ui-mosaic/src/mosaic/SortableContext.tsx
+import { SortableContext, horizontalListSortingStrategy, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import React6 from "react";
+var MosaicSortableContext = ({ id, items = [], direction = "vertical", children }) => {
+  const { operation, activeItem, overItem } = useMosaic();
+  const container = useContainer();
+  const contextId = id ?? container.id;
+  const Sortable = direction === "vertical" ? Column : Row;
+  const ids = items.map((item) => {
+    const path = Path.create(contextId, item.id);
+    const isPreview = activeItem && activeItem.item.id === item.id && overItem && (Path.siblings(overItem.path, path) || Path.hasChild(overItem.path, path)) && operation !== "reject";
+    return isPreview ? activeItem.path : path;
+  });
+  return /* @__PURE__ */ React6.createElement(Sortable, {
+    id: contextId,
+    items: ids
+  }, children);
+};
+var Column = ({ children, id, items }) => /* @__PURE__ */ React6.createElement(SortableContext, {
+  id,
+  items,
+  strategy: verticalListSortingStrategy
+}, children);
+var Row = ({ children, id, items }) => /* @__PURE__ */ React6.createElement(SortableContext, {
+  id,
+  items,
+  strategy: horizontalListSortingStrategy
+}, children);
+
+// packages/ui/react-ui-mosaic/src/mosaic/Tile.tsx
+import { useDraggable, useDroppable } from "@dnd-kit/core";
+import { defaultAnimateLayoutChanges, useSortable } from "@dnd-kit/sortable";
+import React7 from "react";
+var DraggableTile = ({ path: parentPath, item, Component: Component2 = DefaultComponent, position, draggableStyle, ...props }) => {
+  const { operation } = useMosaic();
+  const path = Path.create(parentPath, item.id);
+  const {
+    setNodeRef,
+    attributes,
+    listeners,
+    /* transform, */
+    isDragging
+  } = useDraggable({
+    id: path,
+    data: {
+      path,
+      item,
+      position
+    }
+  });
+  return /* @__PURE__ */ React7.createElement(Component2, {
+    ref: setNodeRef,
+    item,
+    path,
+    position,
+    operation,
+    isDragging,
+    draggableStyle: {
+      // TODO(burdon): Override by container?
+      // transform: getTransformCSS(transform),
+      ...draggableStyle
+    },
+    draggableProps: {
+      ...attributes,
+      ...listeners
+    },
+    ...props
+  });
+};
+var DroppableTile = ({ path: parentPath, item, Component: Component2 = DefaultComponent, position, ...props }) => {
+  const { operation } = useMosaic();
+  const path = parentPath === item.id ? parentPath : Path.create(parentPath, item.id);
+  const { setNodeRef, isOver } = useDroppable({
+    id: path,
+    data: {
+      path,
+      item,
+      position
+    }
+  });
+  return /* @__PURE__ */ React7.createElement(Component2, {
+    ref: setNodeRef,
+    item,
+    path,
+    position,
+    operation,
+    isOver,
+    ...props
+  });
+};
+var SortableTile = ({ path: parentPath, item, Component: OverrideComponent, position, draggableStyle, ...props }) => {
+  const { operation, activeItem, overItem } = useMosaic();
+  const { transitionDuration, Component: ContainerComponent } = useContainer();
+  const path = Path.create(parentPath, item.id);
+  const isPreview = activeItem && activeItem.item.id === item.id && overItem && !Path.siblings(activeItem.path, overItem.path) && (Path.siblings(overItem.path, path) || Path.hasChild(overItem.path, path)) && operation !== "reject";
+  const { setNodeRef, attributes, listeners, transform, isDragging, isOver } = useSortable({
+    id: isPreview ? activeItem.path : path,
+    data: {
+      path,
+      item,
+      position
+    },
+    animateLayoutChanges: (args) => defaultAnimateLayoutChanges({
+      ...args,
+      wasDragging: item.id !== activeItem?.item.id
+    })
+  });
+  let active;
+  if (isDragging) {
+    if (operation === "rearrange" || operation === "reject") {
+      active = "rearrange";
+    } else if (activeItem && Path.parent(activeItem.path) !== parentPath) {
+      active = "destination";
+    } else {
+      active = "origin";
+    }
+  }
+  const Component2 = OverrideComponent ?? ContainerComponent ?? DefaultComponent;
+  return /* @__PURE__ */ React7.createElement(Component2, {
+    ref: setNodeRef,
+    item,
+    path,
+    position,
+    operation,
+    active,
+    isDragging,
+    isOver,
+    draggableStyle: {
+      transform: getTransformCSS(transform),
+      transition: transform ? `transform ${transitionDuration}ms ease` : "none",
+      ...draggableStyle
+    },
+    draggableProps: {
+      ...attributes,
+      ...listeners
+    },
+    ...props
+  });
+};
+
+// packages/ui/react-ui-mosaic/src/mosaic/Mosaic.ts
+var Mosaic = {
+  Root: MosaicRoot,
+  Container: MosaicContainer,
+  DragOverlay: MosaicDragOverlay,
+  SortableContext: MosaicSortableContext,
+  DraggableTile,
+  DroppableTile,
+  SortableTile,
+  // TODO(wittjosiah): Consider factoring out or using inline styles instead depending on DXOS UI theme/tailwind.
+  DefaultComponent,
+  // TODO(burdon): Don't export; move to util.
+  Debug
+};
+export {
+  Mosaic,
+  Path,
+  getTransformCSS,
+  swapItems,
+  useContainer,
+  useItemsWithPreview,
+  useMosaic,
+  useSortedItems
+};
+//# sourceMappingURL=index.mjs.map