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

package/dist/lib/node/index.cjs

@@ -0,0 +1,705 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var node_exports = {};
+__export(node_exports, {
+  Mosaic: () => Mosaic,
+  Path: () => Path,
+  getTransformCSS: () => getTransformCSS,
+  isTileComponentProps: () => isTileComponentProps,
+  isTileProps: () => isTileProps,
+  swapItems: () => swapItems,
+  useContainer: () => useContainer,
+  useItemsWithOrigin: () => useItemsWithOrigin,
+  useItemsWithPreview: () => useItemsWithPreview,
+  useMosaic: () => useMosaic
+});
+module.exports = __toCommonJS(node_exports);
+var import_react = require("react");
+var import_react2 = __toESM(require("react"));
+var import_react3 = require("react");
+var import_react4 = require("react");
+var import_debug = require("@dxos/debug");
+var import_core = require("@dnd-kit/core");
+var import_sortable = require("@dnd-kit/sortable");
+var import_react5 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var import_util = require("@dxos/util");
+var import_react6 = __toESM(require("react"));
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_react7 = __toESM(require("react"));
+var import_react_ui_card = require("@dxos/react-ui-card");
+var import_util2 = require("@dxos/util");
+var import_utilities = require("@dnd-kit/utilities");
+var import_core2 = require("@dnd-kit/core");
+var import_react8 = __toESM(require("react"));
+var import_log = require("@dxos/log");
+var import_sortable2 = require("@dnd-kit/sortable");
+var import_react9 = __toESM(require("react"));
+var import_core3 = require("@dnd-kit/core");
+var import_sortable3 = require("@dnd-kit/sortable");
+var import_react_compose_refs = require("@radix-ui/react-compose-refs");
+var import_react10 = __toESM(require("react"));
+var DEFAULT_TRANSITION = 200;
+var DEFAULT_TYPE = "unknown";
+var DEFAULT_COMPONENT = /* @__PURE__ */ (0, import_react2.forwardRef)(() => /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, "missing component"));
+var MosaicOperations = [
+  "transfer",
+  "copy",
+  "rearrange",
+  "reject"
+];
+var MosaicContainerContext = /* @__PURE__ */ (0, import_react2.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
+  };
+  (0, import_react2.useEffect)(() => {
+    mosaic.setContainer(container.id, container);
+    return () => {
+    };
+  }, Object.values(container));
+  return /* @__PURE__ */ import_react2.default.createElement(MosaicContainerContext.Provider, {
+    value: container
+  }, children);
+};
+var useContainer = () => (0, import_react.useContext)(MosaicContainerContext);
+var Debug = ({ data, position }) => /* @__PURE__ */ import_react6.default.createElement("pre", {
+  className: (0, import_react_ui_theme.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));
+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 ? (0, import_util2.arrayMove)(items, fromIndex, toIndex) : items;
+};
+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)
+};
+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);
+var getTransformCSS = (transform) => transform ? import_utilities.CSS.Transform.toString(Object.assign(transform, {
+  scaleX: 1,
+  scaleY: 1
+})) : void 0;
+var DefaultComponent = /* @__PURE__ */ (0, import_react7.forwardRef)(({ draggableStyle, draggableProps, item: { id }, path }, forwardRef4) => {
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui_card.Card.Root, {
+    ref: forwardRef4,
+    style: draggableStyle
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui_card.Card.Header, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui_card.Card.DragHandle, draggableProps), /* @__PURE__ */ import_react7.default.createElement(import_react_ui_card.Card.Title, {
+    title: Path.create(path, id),
+    classNames: "truncate font-mono text-xs"
+  })));
+});
+DefaultComponent.displayName = "DefaultComponent";
+var DEFAULT_COMPONENT_ID = "__default";
+var MosaicContext = /* @__PURE__ */ (0, import_react5.createContext)(void 0);
+var defaultDropAnimation = {
+  duration: 0
+};
+var MosaicRoot = ({ Component: Component2 = DefaultComponent, debug, children }) => {
+  const [containers, setContainers] = (0, import_react5.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] = (0, import_react5.useState)();
+  const [overItem, setOverItem] = (0, import_react5.useState)();
+  const [operation, setOperation] = (0, import_react5.useState)("reject");
+  const [moveDetails, setMoveDetails] = (0, import_react5.useState)();
+  const [dropAnimation, setDropAnimation] = (0, import_react5.useState)(defaultDropAnimation);
+  const collisionDetection = (args) => {
+    const pointerCollisions = (0, import_core.pointerWithin)(args);
+    if (pointerCollisions.length > 0) {
+      return pointerCollisions;
+    }
+    return (0, import_core.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 = (0, import_core.useSensors)((0, import_core.useSensor)(import_core.MouseSensor, {
+    activationConstraint: {
+      distance: 10
+    }
+  }), (0, import_core.useSensor)(import_core.TouchSensor, {
+    activationConstraint: {
+      delay: 200,
+      tolerance: 5
+    }
+  }), (0, import_core.useSensor)(import_core.KeyboardSensor, {
+    coordinateGetter: import_sortable.sortableKeyboardCoordinates
+  }));
+  const handleDragStart = (event) => {
+    setActiveItem((0, import_util.pick)(event.active.data.current, [
+      "path",
+      "type",
+      "item",
+      "position"
+    ]));
+  };
+  const handleDragMove = (event) => {
+    const nextOverItem = (0, import_util.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 = (0, import_util.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__ */ import_react5.default.createElement(MosaicContext.Provider, {
+    value: {
+      containers,
+      setContainer: handleSetContainer,
+      activeItem,
+      overItem,
+      operation,
+      moveDetails,
+      dropAnimation
+    }
+  }, /* @__PURE__ */ import_react5.default.createElement(import_core.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__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react5.default.createElement(MosaicDebug, {
+    containers,
+    operation,
+    activeItem,
+    overItem
+  }), document.body)));
+};
+var MosaicDebug = ({ containers, operation, activeItem, overItem }) => {
+  return /* @__PURE__ */ import_react5.default.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
+      }
+    }
+  });
+};
+var useMosaic = () => (0, import_react4.useContext)(MosaicContext) ?? (0, import_debug.raise)(new Error("Missing MosaicContext"));
+var useItemsWithPreview = ({ path, items }) => {
+  const { operation, activeItem, overItem } = useMosaic();
+  const [itemsWithPreview, setItemsWithPreview] = (0, import_react3.useState)(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] = (0, import_react3.useState)(overParent);
+  (0, import_react3.useEffect)(() => {
+    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;
+};
+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;
+  }
+};
+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] = (0, import_react8.useState)({});
+  const timer = (0, import_react8.useRef)();
+  (0, import_react8.useEffect)(() => {
+    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__ */ import_react8.default.createElement(import_core2.DragOverlay, {
+      adjustScale: false,
+      ...overlayProps,
+      dropAnimation,
+      style: {
+        ...container?.getOverlayStyle?.()
+      }
+    }, activeItem?.path && container && OverlayComponent && /* @__PURE__ */ import_react8.default.createElement(OverlayErrorBoundary, {
+      fallback: /* @__PURE__ */ import_react8.default.createElement(FallbackComponent, {
+        ...container.getOverlayProps?.(),
+        item: activeItem.item,
+        path: activeItem.path,
+        operation,
+        active: "overlay"
+      })
+    }, /* @__PURE__ */ import_react8.default.createElement(OverlayComponent, {
+      ...container.getOverlayProps?.(),
+      item: activeItem.item,
+      path: activeItem.path,
+      type: activeItem.type,
+      operation,
+      active: "overlay"
+    }), debug && /* @__PURE__ */ import_react8.default.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__ */ import_react8.default.createElement("span", {
+      className: "truncate"
+    }, /* @__PURE__ */ import_react8.default.createElement("span", {
+      className: "text-neutral-400"
+    }, "container "), container.id), /* @__PURE__ */ import_react8.default.createElement("span", {
+      className: "truncate"
+    }, /* @__PURE__ */ import_react8.default.createElement("span", {
+      className: "text-neutral-400"
+    }, "item "), activeItem.item.id.slice(0, 8)))))
+  );
+};
+var OverlayErrorBoundary = class extends import_react8.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null
+    };
+    this.fallback = props.fallback ?? /* @__PURE__ */ import_react8.default.createElement("p", null, "ERROR: $", String(this.state.error));
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+  componentDidCatch(error, info) {
+    import_log.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;
+  }
+};
+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__ */ import_react9.default.createElement(Sortable, {
+    id: contextId,
+    items: ids
+  }, children);
+};
+var Column = ({ children, id, items }) => /* @__PURE__ */ import_react9.default.createElement(import_sortable2.SortableContext, {
+  id,
+  items,
+  strategy: import_sortable2.verticalListSortingStrategy
+}, children);
+var Row = ({ children, id, items }) => /* @__PURE__ */ import_react9.default.createElement(import_sortable2.SortableContext, {
+  id,
+  items,
+  strategy: import_sortable2.horizontalListSortingStrategy
+}, children);
+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
+  } = (0, import_core3.useDraggable)({
+    id: path,
+    data: {
+      path,
+      type,
+      item,
+      position
+    }
+  });
+  return /* @__PURE__ */ import_react10.default.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__ */ (0, import_react10.forwardRef)(({ 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 } = (0, import_core3.useDroppable)({
+    id: path,
+    data: {
+      path,
+      type,
+      item,
+      position
+    }
+  });
+  const ref = (0, import_react_compose_refs.useComposedRefs)(setNodeRef, forwardedRef);
+  return /* @__PURE__ */ import_react10.default.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 } = (0, import_sortable3.useSortable)({
+    id: isPreview ? activeItem.path : path,
+    data: {
+      path,
+      type,
+      item,
+      position
+    },
+    animateLayoutChanges: (args) => (0, import_sortable3.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__ */ import_react10.default.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
+  });
+};
+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
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Mosaic,
+  Path,
+  getTransformCSS,
+  isTileComponentProps,
+  isTileProps,
+  swapItems,
+  useContainer,
+  useItemsWithOrigin,
+  useItemsWithPreview,
+  useMosaic
+});
+//# sourceMappingURL=index.cjs.map