react-headless-dock-layout 0.1.0 → 0.1.1

package/dist/index.js

@@ -0,0 +1,894 @@
+// src/internal/assertNever.ts
+function assertNever(value) {
+  throw new Error(`Unexpected value: ${value}`);
+}
+
+// src/internal/findParentNode.ts
+function findParentNode(root, id) {
+  if (root === null) {
+    return null;
+  }
+  return findParentNodeInSubTree(id, root);
+}
+function findParentNodeInSubTree(id, node) {
+  if (node.type === "panel") {
+    return null;
+  } else if (node.type === "split") {
+    if (node.left.id === id || node.right.id === id) {
+      return node;
+    }
+    return findParentNodeInSubTree(id, node.left) ?? findParentNodeInSubTree(id, node.right);
+  } else {
+    assertNever(node);
+  }
+}
+
+// src/strategies.ts
+var evenlyDividedHorizontalStrategy = {
+  getPlacement(root) {
+    const horizontalNodeCount = calculateHorizontalSplitCount(root) + 1;
+    return {
+      targetId: root.id,
+      direction: "right",
+      ratio: horizontalNodeCount / (horizontalNodeCount + 1)
+    };
+  }
+};
+function calculateHorizontalSplitCount(node) {
+  if (node.type === "panel") {
+    return 0;
+  } else if (node.type === "split") {
+    if (node.orientation === "horizontal") {
+      return 1 + calculateHorizontalSplitCount(node.left) + calculateHorizontalSplitCount(node.right);
+    } else if (node.orientation === "vertical") {
+      return 0 + calculateHorizontalSplitCount(node.left) + calculateHorizontalSplitCount(node.right);
+    } else {
+      assertNever(node.orientation);
+    }
+  } else {
+    assertNever(node);
+  }
+}
+var bspStrategy = {
+  getPlacement(root) {
+    const rightMostPanel = findRightMostPanel(root);
+    const parentNode = findParentNode(root, rightMostPanel.id);
+    return {
+      targetId: rightMostPanel.id,
+      direction: parentNode === null ? "right" : parentNode.orientation === "horizontal" ? "bottom" : "right",
+      ratio: 0.5
+    };
+  }
+};
+function findRightMostPanel(node) {
+  if (node.type === "panel") {
+    return node;
+  } else if (node.type === "split") {
+    return findRightMostPanel(node.right);
+  } else {
+    assertNever(node);
+  }
+}
+
+// src/useDockLayout.ts
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+
+// src/internal/invariant.tsx
+function invariant(condition, message) {
+  if (!condition) {
+    throw new Error(message ?? "Invariant failed");
+  }
+}
+
+// src/internal/clamp.tsx
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+
+// src/internal/EventEmitter.ts
+var EventEmitter = class {
+  _listeners = /* @__PURE__ */ new Set();
+  subscribe(listener) {
+    this._listeners.add(listener);
+    return () => {
+      this._listeners.delete(listener);
+    };
+  }
+  emit() {
+    this._listeners.forEach((listener) => {
+      listener();
+    });
+  }
+};
+
+// src/internal/LayoutManager/calculateLayoutRects.ts
+function calculateLayoutRects(root, options) {
+  if (root === null) {
+    return [];
+  }
+  const rects = [];
+  const traverse = (node, rect) => {
+    if (node.type === "split") {
+      if (node.orientation === "horizontal") {
+        rects.push({
+          id: node.id,
+          type: "split",
+          orientation: node.orientation,
+          x: Math.round(rect.x + rect.width * node.ratio - options.gap / 2),
+          y: Math.round(rect.y),
+          width: Math.round(options.gap),
+          height: Math.round(rect.height)
+        });
+        traverse(node.left, {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width * node.ratio - options.gap / 2,
+          height: rect.height
+        });
+        traverse(node.right, {
+          x: rect.x + rect.width * node.ratio + options.gap / 2,
+          y: rect.y,
+          width: rect.width * (1 - node.ratio) - options.gap / 2,
+          height: rect.height
+        });
+      } else if (node.orientation === "vertical") {
+        rects.push({
+          id: node.id,
+          type: "split",
+          orientation: node.orientation,
+          x: Math.round(rect.x),
+          y: Math.round(rect.y + rect.height * node.ratio - options.gap / 2),
+          width: Math.round(rect.width),
+          height: Math.round(options.gap)
+        });
+        traverse(node.left, {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height * node.ratio - options.gap / 2
+        });
+        traverse(node.right, {
+          x: rect.x,
+          y: rect.y + rect.height * node.ratio + options.gap / 2,
+          width: rect.width,
+          height: rect.height * (1 - node.ratio) - options.gap / 2
+        });
+      } else {
+        assertNever(node.orientation);
+      }
+    } else if (node.type === "panel") {
+      rects.push({
+        id: node.id,
+        type: "panel",
+        x: Math.round(rect.x),
+        y: Math.round(rect.y),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height)
+      });
+    } else {
+      assertNever(node);
+    }
+  };
+  traverse(root, {
+    x: 0,
+    y: 0,
+    width: options.size.width,
+    height: options.size.height
+  });
+  return rects;
+}
+
+// src/internal/LayoutManager/calculateMinSize.ts
+function calculateMinSize(node, gap) {
+  if (node.type === "panel") {
+    return {
+      width: node.minSize?.width ?? 0,
+      height: node.minSize?.height ?? 0
+    };
+  } else if (node.type === "split") {
+    if (node.orientation === "horizontal") {
+      return {
+        width: calculateMinSize(node.left, gap).width + gap + calculateMinSize(node.right, gap).width,
+        height: Math.max(
+          calculateMinSize(node.left, gap).height,
+          calculateMinSize(node.right, gap).height
+        )
+      };
+    } else if (node.orientation === "vertical") {
+      return {
+        width: Math.max(
+          calculateMinSize(node.left, gap).width,
+          calculateMinSize(node.right, gap).width
+        ),
+        height: calculateMinSize(node.left, gap).height + gap + calculateMinSize(node.right, gap).height
+      };
+    } else {
+      assertNever(node.orientation);
+    }
+  } else {
+    assertNever(node);
+  }
+}
+
+// src/internal/LayoutManager/findClosestDirection.ts
+function findClosestDirection(rect, point) {
+  const centerX = rect.x + rect.width / 2;
+  const centerY = rect.y + rect.height / 2;
+  const dx = (point.x - centerX) / (rect.width / 2);
+  const dy = (point.y - centerY) / (rect.height / 2);
+  if (Math.abs(dx) > Math.abs(dy)) {
+    return dx > 0 ? "right" : "left";
+  } else {
+    return dy > 0 ? "bottom" : "top";
+  }
+}
+
+// src/internal/LayoutManager/LayoutTree.ts
+var LayoutTree = class {
+  _root = null;
+  constructor(root) {
+    this._root = root;
+  }
+  get root() {
+    return this._root;
+  }
+  set root(root) {
+    this._root = root;
+  }
+  findNode(id) {
+    if (this._root === null) {
+      return null;
+    }
+    return this.findNodeInSubTree(id, this._root);
+  }
+  findNodeInSubTree(id, node) {
+    if (id === node.id) {
+      return node;
+    }
+    if (node.type === "panel") {
+      return null;
+    } else if (node.type === "split") {
+      return this.findNodeInSubTree(id, node.left) ?? this.findNodeInSubTree(id, node.right);
+    } else {
+      assertNever(node);
+    }
+  }
+  findParentNode(id) {
+    return findParentNode(this._root, id);
+  }
+  replaceChildNode({
+    parentId,
+    oldChildId,
+    newChild
+  }) {
+    const parentNode = this.findNode(parentId);
+    if (parentNode === null) {
+      throw new Error(`Parent node with id ${parentId} not found`);
+    }
+    if (parentNode.type !== "split") {
+      throw new Error(`Parent node with id ${parentId} is not a split node`);
+    }
+    const oldChildNode = this.findNode(oldChildId);
+    if (oldChildNode === null) {
+      throw new Error(`Child node with id ${oldChildId} not found`);
+    }
+    if (parentNode.left.id === oldChildId) {
+      parentNode.left = newChild;
+    } else if (parentNode.right.id === oldChildId) {
+      parentNode.right = newChild;
+    } else {
+      throw new Error(
+        `Child node with id ${oldChildId} is not a child of the parent node with id ${parentId}`
+      );
+    }
+  }
+};
+
+// src/internal/LayoutManager/LayoutManager.ts
+var LayoutManager = class {
+  _tree;
+  _options;
+  _eventEmitter = new EventEmitter();
+  _layoutRects = [];
+  _addPanelStrategy = evenlyDividedHorizontalStrategy;
+  constructor(root, options) {
+    this._tree = new LayoutTree(root);
+    this._options = {
+      gap: options?.gap ?? 10,
+      size: options?.size ?? { width: 0, height: 0 }
+    };
+    this._layoutRects = calculateLayoutRects(root, this._options);
+  }
+  get root() {
+    return this._tree.root;
+  }
+  set root(root) {
+    this._tree.root = root;
+    this.syncLayoutRects();
+  }
+  get layoutRects() {
+    return this._layoutRects;
+  }
+  subscribe = (listener) => {
+    const unsubscribe = this._eventEmitter.subscribe(listener);
+    return unsubscribe;
+  };
+  setSize(size) {
+    this._options.size = size;
+    this.syncLayoutRects();
+  }
+  removePanel(id) {
+    if (this._tree.root === null) {
+      throw new Error("Root node is null");
+    }
+    const node = this._tree.findNode(id);
+    if (node === null) {
+      throw new Error(`Node with id ${id} not found`);
+    }
+    if (node.type !== "panel") {
+      throw new Error(`Node with id ${id} is not a panel`);
+    }
+    if (node.id === this._tree.root.id) {
+      this._tree.root = null;
+      this.syncLayoutRects();
+      return;
+    }
+    const parentNode = this._tree.findParentNode(id);
+    invariant(parentNode !== null, "Parent node is not null");
+    const siblingNode = parentNode.left.id === node.id ? parentNode.right : parentNode.left;
+    if (parentNode.id === this._tree.root.id) {
+      this._tree.root = siblingNode;
+      this.syncLayoutRects();
+      return;
+    }
+    const grandParentNode = this._tree.findParentNode(parentNode.id);
+    invariant(grandParentNode !== null, "Grand parent node is not null");
+    this._tree.replaceChildNode({
+      parentId: grandParentNode.id,
+      oldChildId: parentNode.id,
+      newChild: siblingNode
+    });
+    this.syncLayoutRects();
+  }
+  movePanel({
+    sourceId,
+    targetId,
+    point
+  }) {
+    if (this._tree.root === null) {
+      throw new Error("Root node is null");
+    }
+    if (this._tree.root.type !== "split") {
+      throw new Error("Root node is not a split node");
+    }
+    const sourceNode = this._tree.findNode(sourceId);
+    if (sourceNode === null) {
+      throw new Error(`Node with id ${sourceId} not found`);
+    }
+    if (sourceNode.type !== "panel") {
+      throw new Error(`Node with id ${sourceId} is not a panel node`);
+    }
+    const sourceNodeParent = this._tree.findParentNode(sourceId);
+    invariant(sourceNodeParent !== null);
+    const targetNode = this._tree.findNode(targetId);
+    if (targetNode === null) {
+      throw new Error(`Node with id ${targetId} not found`);
+    }
+    if (targetNode.type !== "panel") {
+      throw new Error(`Node with id ${targetId} is not a panel node`);
+    }
+    const sourceNodeSibling = sourceNodeParent.left.id === sourceId ? sourceNodeParent.right : sourceNodeParent.left;
+    const targetRect = this.findRect(targetId);
+    invariant(targetRect !== null);
+    invariant(targetRect.type === "panel");
+    const direction = findClosestDirection(targetRect, point);
+    if (sourceNodeSibling.id === targetId) {
+      if (direction === "left") {
+        sourceNodeParent.orientation = "horizontal";
+        sourceNodeParent.left = sourceNode;
+        sourceNodeParent.right = targetNode;
+      } else if (direction === "right") {
+        sourceNodeParent.orientation = "horizontal";
+        sourceNodeParent.left = targetNode;
+        sourceNodeParent.right = sourceNode;
+      } else if (direction === "top") {
+        sourceNodeParent.orientation = "vertical";
+        sourceNodeParent.left = sourceNode;
+        sourceNodeParent.right = targetNode;
+      } else if (direction === "bottom") {
+        sourceNodeParent.orientation = "vertical";
+        sourceNodeParent.left = targetNode;
+        sourceNodeParent.right = sourceNode;
+      } else {
+        assertNever(direction);
+      }
+      this.syncLayoutRects();
+      return;
+    }
+    const sourceNodeGrandParent = this._tree.findParentNode(
+      sourceNodeParent.id
+    );
+    if (sourceNodeGrandParent === null) {
+      this._tree.root = sourceNodeSibling;
+    } else if (sourceNodeGrandParent.right.id === sourceNodeParent.id) {
+      sourceNodeGrandParent.right = sourceNodeSibling;
+    } else if (sourceNodeGrandParent.left.id === sourceNodeParent.id) {
+      sourceNodeGrandParent.left = sourceNodeSibling;
+    }
+    const targetNodeParent = this._tree.findParentNode(targetId);
+    invariant(targetNodeParent !== null);
+    const splitNode = this.createSplitNode({
+      direction,
+      sourceNode,
+      targetNode
+    });
+    if (targetNodeParent.left.id === targetId) {
+      targetNodeParent.left = splitNode;
+    } else if (targetNodeParent.right.id === targetId) {
+      targetNodeParent.right = splitNode;
+    } else {
+      invariant(false);
+    }
+    this.syncLayoutRects();
+  }
+  resizePanel(id, point) {
+    if (this._tree.root === null) {
+      throw new Error("Root node is null");
+    }
+    const resizingRect = this.findRect(id);
+    if (resizingRect === null) {
+      throw new Error(`Rect with id ${id} not found`);
+    }
+    if (resizingRect.type !== "split") {
+      throw new Error(`Rect with id ${id} is not a split node`);
+    }
+    if (resizingRect.orientation === "horizontal") {
+      const { left: leftRect, right: rightRect } = this.getSplitChildRects(
+        resizingRect.id
+      );
+      const leftWidth = point.x - leftRect.x;
+      const totalWidth = leftRect.width + resizingRect.width + rightRect.width;
+      const ratio = clamp(leftWidth / totalWidth, 0.1, 0.9);
+      this.setSplitRatio(resizingRect.id, ratio);
+    } else if (resizingRect.orientation === "vertical") {
+      const { left: topRect, right: bottomRect } = this.getSplitChildRects(
+        resizingRect.id
+      );
+      const topHeight = point.y - topRect.y;
+      const totalHeight = topRect.height + resizingRect.height + bottomRect.height;
+      const ratio = clamp(topHeight / totalHeight, 0.1, 0.9);
+      this.setSplitRatio(resizingRect.id, ratio);
+    } else {
+      assertNever(resizingRect.orientation);
+    }
+  }
+  /**
+   /**
+    * The addPanelStrategy is used to determine panel placement when the `targetId` is `undefined`.
+    */
+  addPanel(options) {
+    const id = options?.id ?? crypto.randomUUID();
+    if (this._tree.root === null) {
+      this._tree.root = {
+        id,
+        type: "panel"
+      };
+      this.syncLayoutRects();
+      return;
+    }
+    const shouldUseStrategy = options?.targetId === void 0;
+    const {
+      targetId,
+      direction = "right",
+      ratio = 0.5
+    } = shouldUseStrategy ? this._addPanelStrategy.getPlacement(this._tree.root) : options;
+    invariant(targetId !== void 0, "targetId is not undefined");
+    if (targetId === this._tree.root.id) {
+      this._tree.root = this.createSplitNode({
+        direction,
+        ratio,
+        sourceNode: {
+          id,
+          type: "panel"
+        },
+        targetNode: this._tree.root
+      });
+      this.syncLayoutRects();
+      return;
+    }
+    const targetNode = this._tree.findNode(targetId);
+    if (targetNode === null) {
+      throw new Error(`Node with id ${targetId} not found`);
+    }
+    const targetNodeParent = this._tree.findParentNode(targetId);
+    invariant(targetNodeParent !== null, "Target node parent is not null");
+    const splitNode = this.createSplitNode({
+      direction,
+      sourceNode: {
+        id,
+        type: "panel"
+      },
+      targetNode,
+      ratio
+    });
+    this._tree.replaceChildNode({
+      parentId: targetNodeParent.id,
+      oldChildId: targetId,
+      newChild: splitNode
+    });
+    this.syncLayoutRects();
+  }
+  calculateDropTarget({
+    draggedPanelId,
+    targetPanelId,
+    point
+  }) {
+    invariant(
+      draggedPanelId !== targetPanelId,
+      "Dragged panel id is not the same as target panel id"
+    );
+    const targetRect = this.findRect(targetPanelId);
+    invariant(targetRect !== null && targetRect.type === "panel");
+    return {
+      id: targetPanelId,
+      direction: findClosestDirection(targetRect, point)
+    };
+  }
+  serialize() {
+    return JSON.stringify({
+      root: this._tree.root,
+      options: {
+        gap: this._options.gap
+      }
+    });
+  }
+  emit() {
+    this._eventEmitter.emit();
+  }
+  syncLayoutRects() {
+    this._layoutRects = calculateLayoutRects(this._tree.root, this._options);
+    this.emit();
+  }
+  createSplitNode({
+    direction,
+    sourceNode,
+    targetNode,
+    ratio = 0.5
+  }) {
+    switch (direction) {
+      case "left": {
+        return {
+          id: crypto.randomUUID(),
+          type: "split",
+          orientation: "horizontal",
+          ratio,
+          left: sourceNode,
+          right: targetNode
+        };
+      }
+      case "right": {
+        return {
+          id: crypto.randomUUID(),
+          type: "split",
+          orientation: "horizontal",
+          ratio,
+          left: targetNode,
+          right: sourceNode
+        };
+      }
+      case "top": {
+        return {
+          id: crypto.randomUUID(),
+          type: "split",
+          orientation: "vertical",
+          ratio,
+          left: sourceNode,
+          right: targetNode
+        };
+      }
+      case "bottom": {
+        return {
+          id: crypto.randomUUID(),
+          type: "split",
+          orientation: "vertical",
+          ratio,
+          left: targetNode,
+          right: sourceNode
+        };
+      }
+      default: {
+        assertNever(direction);
+      }
+    }
+  }
+  setSplitRatio(id, ratio) {
+    const splitNode = this._tree.findNode(id);
+    invariant(splitNode !== null, "Node is not null");
+    invariant(splitNode.type === "split", "Node is a split");
+    if (splitNode.orientation === "horizontal") {
+      const totalWidth = this.getSurroundingRect(splitNode.left.id).width + this._options.gap + this.getSurroundingRect(splitNode.right.id).width;
+      const minLeftWidth = calculateMinSize(
+        splitNode.left,
+        this._options.gap
+      ).width;
+      const minRightWidth = calculateMinSize(
+        splitNode.right,
+        this._options.gap
+      ).width;
+      const minRatio = (minLeftWidth + this._options.gap / 2) / totalWidth;
+      const maxRatio = (totalWidth - (minRightWidth + this._options.gap / 2)) / totalWidth;
+      splitNode.ratio = clamp(ratio, minRatio, maxRatio);
+    } else if (splitNode.orientation === "vertical") {
+      const totalHeight = this.getSurroundingRect(splitNode.left.id).height + this._options.gap + this.getSurroundingRect(splitNode.right.id).height;
+      const minTopHeight = calculateMinSize(
+        splitNode.left,
+        this._options.gap
+      ).height;
+      const minBottomHeight = calculateMinSize(
+        splitNode.right,
+        this._options.gap
+      ).height;
+      const minRatio = (minTopHeight + this._options.gap / 2) / totalHeight;
+      const maxRatio = (totalHeight - (minBottomHeight + this._options.gap / 2)) / totalHeight;
+      splitNode.ratio = clamp(ratio, minRatio, maxRatio);
+    } else {
+      assertNever(splitNode.orientation);
+    }
+    this.syncLayoutRects();
+  }
+  findRect(id) {
+    return this._layoutRects.find((rect) => rect.id === id) ?? null;
+  }
+  getSurroundingRect(id) {
+    const node = this._tree.findNode(id);
+    invariant(node !== null, "Node is not null");
+    if (node.type === "panel") {
+      const rect = this.findRect(id);
+      invariant(rect !== null, "Rect is not null");
+      invariant(rect.type === "panel", "Rect is a panel");
+      return {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height
+      };
+    }
+    const leftRect = this.getSurroundingRect(node.left.id);
+    const rightRect = this.getSurroundingRect(node.right.id);
+    if (node.orientation === "horizontal") {
+      return {
+        x: leftRect.x,
+        y: leftRect.y,
+        width: leftRect.width + this._options.gap + rightRect.width,
+        height: leftRect.height
+      };
+    } else if (node.orientation === "vertical") {
+      return {
+        x: leftRect.x,
+        y: leftRect.y,
+        width: leftRect.width,
+        height: leftRect.height + this._options.gap + rightRect.height
+      };
+    } else {
+      assertNever(node.orientation);
+    }
+  }
+  getSplitChildRects(splitId) {
+    const node = this._tree.findNode(splitId);
+    invariant(node !== null && node.type === "split");
+    return {
+      left: this.getSurroundingRect(node.left.id),
+      right: this.getSurroundingRect(node.right.id)
+    };
+  }
+};
+
+// src/useDockLayout.ts
+function useDockLayout(initialRoot, options) {
+  const [layoutManager] = useState(() => {
+    return new LayoutManager(initialRoot, options);
+  });
+  const containerRef = useRef(null);
+  const layoutRects = useSyncExternalStore(
+    layoutManager.subscribe,
+    () => layoutManager.layoutRects
+  );
+  const [resizingRect, setResizingRect] = useState(
+    null
+  );
+  const [draggingRect, setDraggingRect] = useState(
+    null
+  );
+  const [dropTarget, setDropTarget] = useState(null);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    invariant(container !== null);
+    layoutManager.setSize({
+      width: container.clientWidth,
+      height: container.clientHeight
+    });
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        layoutManager.setSize({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height
+        });
+      }
+    });
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [layoutManager]);
+  useEffect(() => {
+    if (resizingRect === null) {
+      return;
+    }
+    function handleMouseMove(event) {
+      invariant(resizingRect !== null);
+      layoutManager.resizePanel(resizingRect.id, {
+        x: event.clientX,
+        y: event.clientY
+      });
+    }
+    function handleMouseUp() {
+      setResizingRect(null);
+    }
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [resizingRect, layoutManager]);
+  useEffect(() => {
+    document.body.style.cursor = resizingRect === null ? "default" : CURSORS[resizingRect.orientation];
+  }, [resizingRect]);
+  return {
+    containerRef,
+    layoutRects,
+    layoutManager,
+    getRectProps: (rect) => {
+      if (rect.type === "split") {
+        return {
+          style: {
+            position: "absolute",
+            left: rect.x,
+            top: rect.y,
+            width: rect.width,
+            height: rect.height,
+            cursor: CURSORS[rect.orientation]
+          },
+          onMouseDown: () => {
+            setResizingRect(rect);
+          },
+          onMouseUp: () => {
+            setResizingRect(null);
+          }
+        };
+      } else if (rect.type === "panel") {
+        return {
+          style: {
+            position: "absolute",
+            left: rect.x,
+            top: rect.y,
+            width: rect.width,
+            height: rect.height
+          },
+          onMouseMove: (event) => {
+            if (draggingRect === null) {
+              return;
+            }
+            if (draggingRect.id === rect.id) {
+              setDropTarget(null);
+              return;
+            }
+            const dropTarget2 = layoutManager.calculateDropTarget({
+              draggedPanelId: draggingRect.id,
+              targetPanelId: rect.id,
+              point: {
+                x: event.clientX,
+                y: event.clientY
+              }
+            });
+            setDropTarget(dropTarget2);
+          },
+          onMouseUp: (event) => {
+            if (draggingRect === null) {
+              return;
+            }
+            if (draggingRect.id === rect.id) {
+              setDraggingRect(null);
+              setDropTarget(null);
+              return;
+            }
+            layoutManager.movePanel({
+              sourceId: draggingRect.id,
+              targetId: rect.id,
+              point: {
+                x: event.clientX,
+                y: event.clientY
+              }
+            });
+            setDraggingRect(null);
+            setDropTarget(null);
+          }
+        };
+      } else {
+        assertNever(rect);
+      }
+    },
+    getDropZoneProps: (rect) => {
+      if (draggingRect === null) {
+        return null;
+      }
+      const isDropTargetRect = rect.id === dropTarget?.id;
+      if (!isDropTargetRect) {
+        return null;
+      }
+      return {
+        style: getDropZoneStyle(dropTarget.direction)
+      };
+    },
+    getDragHandleProps: (rect) => {
+      return {
+        onMouseDown: () => {
+          setDraggingRect(rect);
+        }
+      };
+    },
+    draggingRect
+  };
+}
+function getDropZoneStyle(direction) {
+  if (direction === "top") {
+    return {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "50%"
+    };
+  } else if (direction === "bottom") {
+    return {
+      position: "absolute",
+      left: 0,
+      top: "50%",
+      width: "100%",
+      height: "50%"
+    };
+  } else if (direction === "left") {
+    return {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "50%",
+      height: "100%"
+    };
+  } else if (direction === "right") {
+    return {
+      position: "absolute",
+      left: "50%",
+      top: 0,
+      width: "50%",
+      height: "100%"
+    };
+  } else {
+    assertNever(direction);
+  }
+}
+var CURSORS = {
+  horizontal: "col-resize",
+  vertical: "row-resize"
+};
+export {
+  bspStrategy,
+  evenlyDividedHorizontalStrategy,
+  useDockLayout
+};