@dxos/react-ui-mosaic 0.7.1 → 0.7.2-main.f1adc9f

package/dist/lib/node-esm/index.mjs

@@ -0,0 +1,705 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+
+// packages/ui/react-ui-mosaic/src/mosaic/hooks/useContainer.ts
+import { useContext } from "react";
+
+// packages/ui/react-ui-mosaic/src/mosaic/Container.tsx
+import React, { createContext, useEffect, forwardRef } from "react";
+var DEFAULT_TRANSITION = 200;
+var DEFAULT_TYPE = "unknown";
+var DEFAULT_COMPONENT = /* @__PURE__ */ forwardRef(() => /* @__PURE__ */ React.createElement(React.Fragment, null, "missing component"));
+var MosaicOperations = [
+  "transfer",
+  "copy",
+  "rearrange",
+  "reject"
+];
+var MosaicContainerContext = /* @__PURE__ */ createContext({
+  id: "never",
+  type: DEFAULT_TYPE,
+  Component: DEFAULT_COMPONENT
+});
+var MosaicContainer = ({ children, id, debug, type = DEFAULT_TYPE, Component: Component2 = DEFAULT_COMPONENT, transitionDuration = DEFAULT_TRANSITION, modifier, getOverlayProps, getOverlayStyle, onOver, onDrop, onMove, onDragEnd }) => {
+  const mosaic = useMosaic();
+  const container = {
+    id,
+    debug,
+    type,
+    Component: Component2,
+    transitionDuration,
+    modifier,
+    getOverlayProps,
+    getOverlayStyle,
+    onOver,
+    onDrop,
+    onMove,
+    onDragEnd
+  };
+  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);
+
+// 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 } 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 React4, { createContext as createContext2, useState } from "react";
+import { createPortal } from "react-dom";
+import { pick } from "@dxos/util";
+
+// 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 as forwardRef2 } from "react";
+import { Card } from "@dxos/react-ui-card";
+
+// 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/props.ts
+var isTileProps = (props) => typeof props.path === "string" && typeof props.item === "object" && props.item ? "id" in props.item && typeof props.item.id === "string" : false;
+var isTileComponentProps = (props) => isTileProps(props) && typeof props.operation === "string" && MosaicOperations.includes(props.operation);
+
+// 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__ */ forwardRef2(({ draggableStyle, draggableProps, item: { id }, path }, forwardRef4) => {
+  return /* @__PURE__ */ React3.createElement(Card.Root, {
+    ref: forwardRef4,
+    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 defaultDropAnimation = {
+  duration: 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 [moveDetails, setMoveDetails] = useState();
+  const [dropAnimation, setDropAnimation] = useState(defaultDropAnimation);
+  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",
+      "type",
+      "item",
+      "position"
+    ]));
+  };
+  const handleDragMove = (event) => {
+    const nextOverItem = pick(event.over?.data.current, [
+      "path",
+      "type",
+      "item",
+      "position"
+    ]);
+    const nextOverContainer = nextOverItem && nextOverItem?.path ? containers[Path.first(nextOverItem.path)] : void 0;
+    if (!event.over || !nextOverItem || !nextOverContainer) {
+      setOperation("reject");
+      setOverItem(void 0);
+      return;
+    }
+    if (overItem !== nextOverItem) {
+      setOverItem(nextOverItem);
+    }
+    if (activeItem && nextOverItem && nextOverContainer?.onMove) {
+      const { operation: nextOperation, details: nextDetails } = nextOverContainer.onMove({
+        active: activeItem,
+        over: nextOverItem,
+        details: {
+          delta: event.delta
+        }
+      });
+      setOperation(nextOperation);
+      if (
+        // always set falsy symbols
+        !nextDetails || // always set if details become truthy
+        !moveDetails && nextDetails || // only update if details change
+        Object.entries(nextDetails).find(([key, value]) => !(key in moveDetails) || moveDetails[key] !== value)
+      ) {
+        setMoveDetails(nextDetails);
+      }
+    }
+  };
+  const handleDragOver = (event) => {
+    const overItem2 = pick(event.over?.data.current, [
+      "path",
+      "type",
+      "item",
+      "position"
+    ]);
+    const overContainer = overItem2 && overItem2?.path ? containers[Path.first(overItem2.path)] : void 0;
+    if (overContainer?.onMove) {
+      return;
+    }
+    const activeContainer = activeItem && containers[Path.first(activeItem.path)];
+    if (!event.over || !overItem2 || !overContainer || !activeItem || !activeContainer) {
+      setOperation("reject");
+      setOverItem(void 0);
+      return;
+    }
+    let operation2 = "reject";
+    if (overContainer.onOver) {
+      operation2 = overContainer.onOver({
+        active: activeItem,
+        over: overItem2,
+        details: moveDetails
+      });
+    }
+    setOperation(operation2);
+    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) {
+      let nextDropAnimation = defaultDropAnimation;
+      const activeContainer = containers[Path.first(activeItem.path)];
+      if (activeContainer) {
+        nextDropAnimation = activeContainer.onDrop?.({
+          operation,
+          active: activeItem,
+          over: overItem,
+          details: moveDetails
+        });
+        if (overContainer && overContainer !== activeContainer) {
+          nextDropAnimation = overContainer.onDrop?.({
+            operation,
+            active: activeItem,
+            over: overItem,
+            details: moveDetails
+          });
+        }
+      }
+      setDropAnimation(nextDropAnimation);
+    }
+    Object.values(containers).forEach((container) => container?.onDragEnd?.(event));
+    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,
+      moveDetails,
+      dropAnimation
+    }
+  }, /* @__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))),
+        type: activeItem?.type,
+        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))),
+        type: overItem?.type,
+        position: overItem?.position
+      }
+    }
+  });
+};
+
+// packages/ui/react-ui-mosaic/src/mosaic/hooks/useMosaic.ts
+var useMosaic = () => useContext2(MosaicContext) ?? raise(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 && !!overItem.path && Path.parent(overItem.path)
+  );
+  const [lastOverParent, setLastOverParent] = useState2(overParent);
+  useEffect2(() => {
+    if (!activeItem || !overItem) {
+      setLastOverParent(void 0);
+      setItemsWithPreview(items);
+      return;
+    }
+    if (lastOverParent === overParent) {
+      return;
+    }
+    const activeIsChild = Path.hasChild(path, activeItem.path);
+    const overIsChild = Path.hasChild(path, overItem.path);
+    const overSelf = overItem.path === path;
+    if (operation === "reject" || operation === "rearrange") {
+      setLastOverParent(void 0);
+      setItemsWithPreview(items);
+      return;
+    } else {
+      setLastOverParent(overParent);
+    }
+    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/useItemsWithOrigin.ts
+var useItemsWithOrigin = (path, items) => {
+  const { operation, activeItem, overItem } = useMosaic();
+  if (!activeItem || !overItem) {
+    return items;
+  }
+  const activeIsChild = Path.hasChild(path, activeItem.path);
+  const overIsChild = Path.hasChild(path, overItem.path);
+  if (activeIsChild && !overIsChild && operation !== "rearrange") {
+    return items.map((item) => {
+      if (item.id === activeItem.item.id) {
+        return {
+          ...item,
+          id: `${item.id}--origin`
+        };
+      } else {
+        return item;
+      }
+    });
+  } else {
+    return 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 { log } from "@dxos/log";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-mosaic/src/mosaic/DragOverlay.tsx";
+var MosaicDragOverlay = ({ delay = 200, debug = false, ...overlayProps }) => {
+  const { containers, operation, activeItem, overItem, dropAnimation } = useMosaic();
+  const [state, setState] = useState3({});
+  const timer = useRef();
+  useEffect3(() => {
+    if (activeItem && operation !== "reject") {
+      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,
+      dropAnimation,
+      style: {
+        ...container?.getOverlayStyle?.()
+      }
+    }, activeItem?.path && container && OverlayComponent && /* @__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,
+      type: activeItem.type,
+      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) {
+    log.catch(error, {
+      info
+    }, {
+      F: __dxlog_file,
+      L: 140,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+  }
+  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 && overItem.path && (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 { useComposedRefs } from "@radix-ui/react-compose-refs";
+import React7, { forwardRef as forwardRef3 } from "react";
+var DraggableTile = ({ path: parentPath, type = DEFAULT_TYPE, 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,
+      type,
+      item,
+      position
+    }
+  });
+  return /* @__PURE__ */ React7.createElement(Component2, {
+    ref: setNodeRef,
+    item,
+    path,
+    type,
+    position,
+    operation,
+    isDragging,
+    draggableStyle: {
+      // TODO(burdon): Override by container?
+      // transform: getTransformCSS(transform),
+      ...draggableStyle
+    },
+    draggableProps: {
+      ...attributes,
+      ...listeners
+    },
+    ...props
+  });
+};
+var DroppableTile = /* @__PURE__ */ forwardRef3(({ path: parentPath, type = DEFAULT_TYPE, item, Component: Component2 = DefaultComponent, position, ...props }, forwardedRef) => {
+  const { operation } = useMosaic();
+  const path = parentPath === item.id ? parentPath : Path.create(parentPath, item.id);
+  const { setNodeRef, isOver } = useDroppable({
+    id: path,
+    data: {
+      path,
+      type,
+      item,
+      position
+    }
+  });
+  const ref = useComposedRefs(setNodeRef, forwardedRef);
+  return /* @__PURE__ */ React7.createElement(Component2, {
+    item,
+    path,
+    type,
+    position,
+    operation,
+    isOver,
+    ...props,
+    ref
+  });
+});
+var SortableTile = ({ path: parentPath, type = DEFAULT_TYPE, 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 && activeItem.path && overItem.path && !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,
+      type,
+      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 && activeItem.path && Path.parent(activeItem.path) !== parentPath) {
+      active = "destination";
+    } else {
+      active = "origin";
+    }
+  }
+  const Component2 = OverrideComponent ?? ContainerComponent ?? DefaultComponent;
+  return /* @__PURE__ */ React7.createElement(Component2, {
+    ref: setNodeRef,
+    item,
+    path,
+    type,
+    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,
+  isTileComponentProps,
+  isTileProps,
+  swapItems,
+  useContainer,
+  useItemsWithOrigin,
+  useItemsWithPreview,
+  useMosaic
+};
+//# sourceMappingURL=index.mjs.map