@vuu-ui/grid-layout 4.0.0-alpha.1

package/src/componentToJson.js

@@ -0,0 +1,41 @@
+import { elementImplementsJSONSerialization } from "@vuu-ui/vuu-utils";
+import react from "react";
+import { getProps } from "./propUtils.js";
+import { typeOf } from "./typeOf.js";
+function componentToJson(element) {
+    if (elementImplementsJSONSerialization(element)) return element.type.toJSON(element);
+    {
+        const type = typeOf(element);
+        const { id, children, type: _omit, ...props } = getProps(element);
+        const state = void 0;
+        return {
+            id,
+            type,
+            props: serializeProps(props),
+            state,
+            children: react.Children.map(children, componentChildToJson) ?? void 0
+        };
+    }
+}
+function componentChildToJson(child) {
+    if ("string" == typeof child || "number" == typeof child) return child;
+    return react.isValidElement(child) ? componentToJson(child) : null;
+}
+function serializeProps(props) {
+    if (props) {
+        const { path, ...otherProps } = props;
+        const result = {};
+        for (const [key, value] of Object.entries(otherProps))result[key] = serializeValue(value);
+        return result;
+    }
+}
+function serializeValue(value) {
+    if ("string" == typeof value || "number" == typeof value || "boolean" == typeof value) return value;
+    if (Array.isArray(value)) return value.map(serializeValue);
+    if ("object" == typeof value && null !== value) {
+        const result = {};
+        for (const [k, v] of Object.entries(value))result[k] = serializeValue(v);
+        return result;
+    }
+}
+export { componentToJson, serializeProps };

package/src/drag-drop-next/DragContextNext.js

@@ -0,0 +1,173 @@
+import { EventEmitter } from "@vuu-ui/vuu-utils";
+import { isTypedComponentTemplate, sourceIsComponent, sourceIsTabbedComponent, sourceIsTemplate } from "../GridLayoutContext.js";
+import { initializeDragContainer } from "./tabstrip-drag-drop.js";
+class DragContext extends EventEmitter {
+    templateDragSession;
+    #dragElementWidth;
+    #dragLabelWidth;
+    #dragStateCleanups = new Set();
+    #dragSource;
+    #dragSources = new Map();
+    #dropped = false;
+    #dropPending = false;
+    #dropZoneCache = new Map();
+    #element;
+    #mouseX = -1;
+    #mouseY = -1;
+    constructor(templateDragSession){
+        super(), this.templateDragSession = templateDragSession;
+    }
+    beginDrag(e, dragSource) {
+        const { clientX: x, clientY: y, dataTransfer } = e;
+        if (dataTransfer) {
+            dataTransfer.effectAllowed = "move";
+            if (sourceIsTemplate(dragSource)) dataTransfer.setData("text/json", JSON.stringify(isTypedComponentTemplate(dragSource) ? dragSource.component : JSON.parse(dragSource.componentJson)));
+            else if (sourceIsComponent(dragSource)) dataTransfer.setData("text/plain", dragSource.id);
+            else if (sourceIsTabbedComponent(dragSource)) dataTransfer.setData("text/plain", dragSource.tab.id);
+            else throw Error("[DragContextNext] unsupported drag source type");
+            const { height, width } = dragSource.element.getBoundingClientRect();
+            let dragLabelWidth = width;
+            if (sourceIsComponent(dragSource) && dragSource.dragElement) dragLabelWidth = dragSource.dragElement.getBoundingClientRect()?.width;
+            this.#dragSource = dragSource;
+            this.#dropped = false;
+            this.#dropPending = false;
+            this.#dragElementWidth = width;
+            this.#dragLabelWidth = dragLabelWidth;
+            this.#mouseX = x;
+            this.#mouseY = y;
+            if (sourceIsTemplate(dragSource)) this.templateDragSession?.begin(dragSource, {
+                elementHeight: height,
+                elementWidth: width,
+                labelWidth: dragLabelWidth,
+                x,
+                y
+            });
+        }
+    }
+    endDrag() {
+        this.cleanupDragState();
+        if (this.#dragSource && sourceIsTemplate(this.#dragSource)) this.templateDragSession?.end();
+        this.#dropZoneCache.clear();
+        this.#dragSource = void 0;
+        this.#element = void 0;
+        this.#dragElementWidth = void 0;
+    }
+    beginDrop() {
+        this.#dropPending = true;
+    }
+    cancelDrag() {
+        if (sourceIsTabbedComponent(this.#dragSource)) {
+            const { layoutId: gridId, tabsId, label: value } = this.#dragSource;
+            this.emit("cancel-tab-drag", {
+                type: "cancel-tab-drag",
+                gridId,
+                itemId: this.#dragSource.tab.id,
+                tabsId,
+                value
+            });
+        }
+        this.endDrag();
+    }
+    completeDrop() {
+        const dragSource = this.dragSource;
+        this.#dropped = true;
+        this.#dropPending = false;
+        if (dragSource && sourceIsTemplate(dragSource)) this.templateDragSession?.completeDrop();
+        for (const cleanup of this.#dragStateCleanups)cleanup();
+    }
+    detachTab(gridId, tabsId, itemId, value) {
+        this.emit("detach-tab", {
+            type: "detach-tab",
+            gridId,
+            itemId,
+            tabsId,
+            value
+        });
+    }
+    drop = ({ tabsId, dropPosition })=>{
+        const dragSource = this.dragSource;
+        this.completeDrop();
+        if (dragSource) this.emit("drop", {
+            type: "drop",
+            dragSource,
+            tabsId,
+            dropPosition
+        });
+        else throw Error("[DragContextNext] drop, dragSource not defined");
+    };
+    registerTabsForDragDrop = (id)=>{
+        this.#dragSources.set(id, {
+            dropTargets: [
+                "*"
+            ]
+        });
+        const dragSourceElement = document.getElementById(`tabs-${id}`);
+        if (dragSourceElement) {
+            const cleanup = initializeDragContainer(dragSourceElement, this, "horizontal", id);
+            return ()=>{
+                cleanup();
+                this.#dragSources.delete(id);
+            };
+        }
+        throw Error(`[DragContextNext] registerDragSource no element found for #tabs-${id}`);
+    };
+    registerDragStateCleanup = (cleanup)=>{
+        this.#dragStateCleanups.add(cleanup);
+        return ()=>this.#dragStateCleanups.delete(cleanup);
+    };
+    cleanupDragState() {
+        for (const cleanup of this.#dragStateCleanups)cleanup();
+    }
+    get draggedElement() {
+        const element = this.#element;
+        if (element) return element;
+        throw Error("dragged element is unavailable because beginDrag was not called");
+    }
+    get dragElementWidth() {
+        return this.#dragElementWidth ?? this.templateDragSession?.metrics?.elementWidth ?? 100;
+    }
+    get dragLabelWidth() {
+        return this.#dragLabelWidth ?? this.templateDragSession?.metrics?.labelWidth ?? this.dragElementWidth;
+    }
+    get dragSource() {
+        return this.#dragSource ?? this.templateDragSession?.source;
+    }
+    get internalDragSources() {
+        return this.#dragSources;
+    }
+    set dragSources(dragSources) {
+        this.buildDragSources(dragSources);
+    }
+    get dropped() {
+        const dragSource = this.dragSource;
+        return dragSource && sourceIsTemplate(dragSource) ? this.templateDragSession?.dropped ?? this.#dropped : this.#dropped;
+    }
+    get dropPending() {
+        return this.#dropPending;
+    }
+    get x() {
+        return void 0 === this.#dragSource && this.templateDragSession?.source ? this.templateDragSession.metrics?.x ?? this.#mouseX : this.#mouseX;
+    }
+    set x(value) {
+        this.#mouseX = value;
+        if (void 0 === this.#dragSource && this.templateDragSession?.source) this.templateDragSession.x = value;
+    }
+    get y() {
+        return void 0 === this.#dragSource && this.templateDragSession?.source ? this.templateDragSession.metrics?.y ?? this.#mouseY : this.#mouseY;
+    }
+    set y(value) {
+        this.#mouseY = value;
+        if (void 0 === this.#dragSource && this.templateDragSession?.source) this.templateDragSession.y = value;
+    }
+    get ownsDrag() {
+        return void 0 !== this.#dragSource;
+    }
+    buildDragSources(dragSources) {
+        const sources = this.#dragSources;
+        for (const [sourceId, { dropTargets, orientation = "horizontal" }] of Object.entries(dragSources))sources.set(sourceId, {
+            dropTargets,
+            orientation
+        });
+    }
+}
+export { DragContext };

package/src/drag-drop-next/DragDropProviderNext.css.js

@@ -0,0 +1,72 @@
+const css = `
+.vuuDragContainer {
+  --orientation-transition-property: width;
+  --transition-property: var(--orientation-transition-property);
+  align-items: stretch;
+  row-gap: 0;
+  background: #fff !important;
+
+  &.vuuDragContainer-dragging {
+    & .saltTabNextTrigger {
+      pointer-events: none;
+    }
+  }
+
+  &.vuuDragContainer-vertical {
+    --orientation-transition-property: height;
+
+    & .SpaceMan {
+      width: auto;
+      height: 0;
+    }
+  }
+
+  &:has(.vuuDraggableItem-settling) {
+    overflow: visible;
+  }
+
+  & .vuuDraggableItem:not([aria-selected="true"]) {
+    background: inherit;
+  }
+
+  & .vuuTabDropTarget-before {
+    box-shadow: inset 3px 0 var(--salt-status-info-foreground);
+  }
+
+  & .vuuTabDropTarget-after {
+    box-shadow: inset -3px 0 var(--salt-status-info-foreground);
+  }
+
+  & .vuuDraggableItem-hidden {
+    z-index: -1;
+    position: absolute;
+  }
+
+  & .vuuDraggableItem-settling {
+    z-index: 1;
+    position: absolute;
+  }
+
+  & .vuuDraggableItem-animating {
+    transition: transform .2s ease-in-out;
+  }
+
+  & .SpaceMan {
+    min-height: 100%;
+    transition-property: var(--transition-property);
+    background-color: #d9d9d9;
+    flex: none;
+    align-self: stretch;
+    width: 0;
+    transition-duration: .1s;
+    transition-timing-function: ease-in;
+  }
+
+  &.saltTabListNext {
+    gap: 0;
+  }
+}
+
+
+`;
+export default css;

package/src/drag-drop-next/DragDropProviderNext.js

@@ -0,0 +1,91 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { DragContext } from "./DragContextNext.js";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import DragDropProviderNext from "./DragDropProviderNext.css";
+import { useTemplateDragSession } from "./TemplateDragSession.js";
+const DragDropContext = /*#__PURE__*/ createContext(void 0);
+const NOOP = ()=>void 0;
+const DragDropProviderNext_DragDropProviderNext = ({ children, onCancelDrag = NOOP, onCancelTabDrag, onDetachTab, onDrop })=>{
+    const targetWindow = useWindow();
+    const templateDragSession = useTemplateDragSession();
+    useComponentCssInjection({
+        testId: "vuu-drag-drop-provider",
+        css: DragDropProviderNext,
+        window: targetWindow
+    });
+    const dragContext = useMemo(()=>new DragContext(templateDragSession), [
+        templateDragSession
+    ]);
+    const handlersRef = useRef({
+        onCancelDrag,
+        onCancelTabDrag,
+        onDetachTab,
+        onDrop
+    });
+    handlersRef.current = {
+        onCancelDrag,
+        onCancelTabDrag,
+        onDetachTab,
+        onDrop
+    };
+    useEffect(()=>{
+        if (!targetWindow) return;
+        const cancelActiveDrag = ()=>{
+            if (dragContext.dropPending) return;
+            handlersRef.current.onCancelDrag();
+            if (dragContext.ownsDrag) dragContext.cancelDrag();
+            else dragContext.cleanupDragState();
+        };
+        const handleKeyDown = (event)=>{
+            if ("Escape" === event.key) cancelActiveDrag();
+        };
+        const handlePointerCancel = ()=>{
+            if (!dragContext.ownsDrag) cancelActiveDrag();
+        };
+        const handleMouseUp = ()=>{
+            if (!dragContext.dragSource) return;
+            if (dragContext.dropped) dragContext.endDrag();
+            else cancelActiveDrag();
+        };
+        const handleCancelTabDrag = (event)=>handlersRef.current.onCancelTabDrag(event);
+        const handleDetachTab = (event)=>handlersRef.current.onDetachTab(event);
+        const handleDrop = (event)=>handlersRef.current.onDrop(event);
+        dragContext.on("cancel-tab-drag", handleCancelTabDrag);
+        dragContext.on("detach-tab", handleDetachTab);
+        dragContext.on("drop", handleDrop);
+        targetWindow.addEventListener("keydown", handleKeyDown);
+        targetWindow.addEventListener("dragend", cancelActiveDrag);
+        targetWindow.addEventListener("mouseup", handleMouseUp);
+        targetWindow.addEventListener("pointercancel", handlePointerCancel);
+        const cleanupCallbacks = [];
+        return ()=>{
+            dragContext.removeListener("cancel-tab-drag", handleCancelTabDrag);
+            dragContext.removeListener("detach-tab", handleDetachTab);
+            dragContext.removeListener("drop", handleDrop);
+            targetWindow.removeEventListener("keydown", handleKeyDown);
+            targetWindow.removeEventListener("dragend", cancelActiveDrag);
+            targetWindow.removeEventListener("mouseup", handleMouseUp);
+            targetWindow.removeEventListener("pointercancel", handlePointerCancel);
+            cancelActiveDrag();
+            cleanupCallbacks.forEach((cleanup)=>{
+                cleanup();
+            });
+        };
+    }, [
+        dragContext,
+        targetWindow
+    ]);
+    return /*#__PURE__*/ jsx(DragDropContext.Provider, {
+        value: dragContext,
+        children: children
+    });
+};
+const useDragContext = ()=>{
+    const dragContext = useContext(DragDropContext);
+    if (!dragContext) throw Error("[useDragContext] no DragDropProviderNext found");
+    return dragContext;
+};
+const useOptionalDragContext = ()=>useContext(DragDropContext);
+export { DragDropProviderNext_DragDropProviderNext as DragDropProviderNext, useDragContext, useOptionalDragContext };

package/src/drag-drop-next/SpaceMan.js

@@ -0,0 +1,256 @@
+import { asInteger, isValidNumber } from "@vuu-ui/vuu-utils";
+class SpaceMan {
+    id;
+    #dragContext;
+    #dragItem;
+    #dragContainer = null;
+    #dragStartTimer;
+    #dragSize = 0;
+    #dragOperation = "none";
+    #fromIndex;
+    #mouseOffset = {
+        x: 0,
+        y: 0
+    };
+    #orientation;
+    #sizeProperty;
+    #spacer1 = this.createDragSpacer();
+    #spacer2 = this.createDragSpacer();
+    #state = "initial";
+    #toDirection;
+    #toIndex = void 0;
+    #withinDragContainer = false;
+    constructor(dragContext, id, orientation = "horizontal"){
+        this.id = id;
+        this.#dragContext = dragContext;
+        this.#orientation = orientation;
+        this.#sizeProperty = "horizontal" === orientation ? "width" : "height";
+    }
+    get mouseOffset() {
+        return this.#mouseOffset;
+    }
+    set mouseOffset(offset) {
+        this.#mouseOffset = offset;
+    }
+    get dropPosition() {
+        const dropTargetSpacer = this.#dragContainer?.querySelector('[data-drop-target="true"]');
+        if (dropTargetSpacer) {
+            let siblingElement = dropTargetSpacer.nextElementSibling;
+            if (siblingElement) return {
+                position: "before",
+                target: siblingElement.dataset.gridLayoutItemId ?? siblingElement.dataset.label ?? siblingElement.id
+            };
+            siblingElement = dropTargetSpacer.previousElementSibling;
+            if (siblingElement === this.#dragItem) siblingElement = siblingElement.previousElementSibling;
+            if (siblingElement) return {
+                position: "after",
+                target: siblingElement.dataset.gridLayoutItemId ?? siblingElement.dataset.label ?? siblingElement.id
+            };
+        }
+    }
+    get positionRelativeToTargetTab() {
+        return "before";
+    }
+    setDragContainer = (el)=>{
+        this.#dragContainer = el;
+    };
+    enterDragContainer() {
+        this.#withinDragContainer = true;
+    }
+    leaveDragContainer() {
+        this.#withinDragContainer = false;
+        this.#state = "away";
+        this.setSpacerSizes(0, 0);
+        setTimeout(()=>{
+            this.clearSpacers();
+        }, 200);
+    }
+    dragStart(index) {
+        const item = this.#dragContainer?.querySelector(`[data-index="${index}"]`);
+        if (item) {
+            this.clearDragStartTimer();
+            const propertyName = this.#sizeProperty;
+            const { [propertyName]: size } = item.getBoundingClientRect();
+            this.#dragSize = size;
+            this.#dragOperation = "local";
+            this.#withinDragContainer = true;
+            this.#dragStartTimer = setTimeout(()=>{
+                this.#dragStartTimer = void 0;
+                this.#dragContainer?.classList.add("vuuDragContainer-dragging");
+                this.#spacer1.style[propertyName] = `${size}px`;
+                this.#spacer1.dataset.dropTarget = "true";
+                item.after(this.#spacer1);
+                this.#dragItem = item;
+                item.classList.add("vuuDraggableItem-hidden");
+                if (!this.#withinDragContainer) this.setSpacerSizes(0, 0, 30);
+            }, 60);
+            this.#state = "1spacer";
+            this.#fromIndex = index;
+        } else throw Error(`[SpaceMan] spaceOut no item at index[${index}]`);
+    }
+    dragEnter(index, direction) {
+        const propertyName = this.#sizeProperty;
+        if (index === this.#toIndex && direction === this.#toDirection) return;
+        if (false === this.#withinDragContainer) {
+            this.#toIndex = index > asInteger(this.#fromIndex, Number.MAX_SAFE_INTEGER) ? index - 1 : index;
+            this.enterDragContainer();
+            this.insertSpacer(index, this.#dragContext.dragLabelWidth, direction);
+            if ("none" === this.#dragOperation) this.#dragOperation = "remote";
+        } else {
+            this.#toIndex = index;
+            this.#toDirection = direction;
+            const item = this.#dragContainer?.querySelector(`[data-index="${index}"]`);
+            if (item) {
+                if ("none" === this.#dragOperation) {
+                    this.#dragOperation = "remote";
+                    this.insertSpacer(index, 100);
+                } else if ("fwd" === direction) {
+                    if ("1spacer" === this.#state) {
+                        item.after(this.#spacer2);
+                        this.#state = "2spacer";
+                        this.setSpacerSizes(0, this.#dragSize);
+                    } else if ("2spacer" === this.#state) if ("0px" === this.#spacer1.style[propertyName]) {
+                        item.after(this.#spacer1);
+                        this.setSpacerSizes(this.#dragSize, 0);
+                    } else {
+                        item.after(this.#spacer2);
+                        this.setSpacerSizes(0, this.#dragSize);
+                    }
+                } else if ("1spacer" === this.#state) {
+                    item.before(this.#spacer2);
+                    this.#state = "2spacer";
+                    this.setSpacerSizes(0, this.#dragSize);
+                } else if ("2spacer" === this.#state) if ("0px" === this.#spacer1.style[propertyName]) {
+                    item.before(this.#spacer1);
+                    this.setSpacerSizes(this.#dragSize, 0);
+                } else {
+                    item.before(this.#spacer2);
+                    this.setSpacerSizes(0, this.#dragSize);
+                }
+            } else throw Error(`[SpaceMan] dragEnter no item at index[${index}]`);
+        }
+    }
+    insertSpacer(index, size, direction = "bwd") {
+        if ("initial" === this.#state || "away" === this.#state) {
+            const item = this.#dragContainer?.querySelector(`[data-index="${index}"]`);
+            if (item) {
+                this.#dragSize = size;
+                if ("fwd" === direction) item.after(this.#spacer1);
+                else item.before(this.#spacer1);
+                this.#state = "1spacer";
+                this.setSpacerSizes(size);
+            } else throw Error(`[SpaceMan] inject no item at index[${index}]`);
+        } else throw Error(`can only inject drag content when state is "initial" or "away", found "${this.#state}"`);
+    }
+    clearSpacers() {
+        const propertyName = this.#sizeProperty;
+        this.#spacer1.remove();
+        this.#spacer2.remove();
+        this.#spacer1.style[propertyName] = "0px";
+        this.#spacer2.style[propertyName] = "0px";
+    }
+    clearDragStartTimer() {
+        if (void 0 !== this.#dragStartTimer) {
+            clearTimeout(this.#dragStartTimer);
+            this.#dragStartTimer = void 0;
+        }
+    }
+    cleanup() {
+        this.clearDragStartTimer();
+        this.clearSpacers();
+        this.#dragContainer?.classList.remove("vuuDragContainer-dragging");
+        if (this.#dragItem) {
+            this.#dragItem.classList.remove("vuuDraggableItem-hidden");
+            this.#dragItem.classList.remove("vuuDraggableItem-settling");
+            this.#dragItem.classList.remove("vuuDraggableItem-animating");
+            this.#dragItem.style.left = "";
+            this.#dragItem.style.top = "";
+            this.#dragItem.style.transform = "";
+            this.#dragItem.style.width = "";
+            this.#dragItem = void 0;
+        }
+        this.#dragOperation = "none";
+        this.#fromIndex = void 0;
+        this.#state = "initial";
+        this.#toDirection = void 0;
+        this.#toIndex = void 0;
+        this.#withinDragContainer = false;
+    }
+    drop(x, y) {
+        return new Promise((resolve)=>{
+            if (this.#dragItem) {
+                const dragItem = this.#dragItem;
+                let settled = false;
+                const settleComplete = ()=>{
+                    if (settled) return;
+                    settled = true;
+                    dragItem.removeEventListener("transitionend", settleComplete);
+                    this.cleanup();
+                    resolve();
+                };
+                setTimeout(settleComplete, 250);
+                dragItem?.classList.replace("vuuDraggableItem-hidden", "vuuDraggableItem-settling");
+                const { left: containerLeft, top: containerTop } = this.getPositionOfDragContainer();
+                const { left, top, width } = this.getPositionOfDropTarget();
+                if ("vertical" === this.#orientation) dragItem.style.width = `${width}px`;
+                dragItem.style.left = `${left - containerLeft}px`;
+                dragItem.style.top = `${top - containerTop}px`;
+                const offsetLeft = x - this.#mouseOffset.x - left - 1;
+                const offsetTop = y - this.#mouseOffset.y - top - 1;
+                dragItem.style.transform = `translate(${offsetLeft}px, ${offsetTop}px)`;
+                this.#dragContainer?.classList.remove("vuuDragContainer-dragging");
+                requestAnimationFrame(()=>{
+                    dragItem?.classList.add("vuuDraggableItem-animating");
+                    dragItem.addEventListener("transitionend", settleComplete);
+                    dragItem.style.transform = "translate(0px, 0px)";
+                });
+            } else {
+                this.cleanup();
+                resolve();
+            }
+        });
+    }
+    getPositionOfDragContainer() {
+        if (this.#dragContainer) {
+            const { left, top } = this.#dragContainer.getBoundingClientRect();
+            return {
+                left,
+                top
+            };
+        }
+        throw Error("[SpaceMan] getPositionOfDragContainer, no drag container");
+    }
+    getPositionOfDropTarget(index = 0) {
+        const spacer = 0 === index ? this.#spacer1 : this.#spacer2;
+        const { [this.#sizeProperty]: size, left, top, width } = spacer.getBoundingClientRect();
+        if (0 !== size) return {
+            left,
+            top,
+            width
+        };
+        if (0 === index) return this.getPositionOfDropTarget(1);
+        throw Error("no spacer with expected width");
+    }
+    setSpacerSizes(size1, size2, timeout = 0) {
+        const propertyName = this.#sizeProperty;
+        const applySizes = ()=>{
+            if (null === this.#spacer1.parentNode) ;
+            else {
+                this.#spacer1.style[propertyName] = `${size1}px`;
+                this.#spacer1.dataset.dropTarget = size1 > 0 ? "true" : "false";
+                if (isValidNumber(size2)) {
+                    this.#spacer2.style[propertyName] = `${size2}px`;
+                    this.#spacer2.dataset.dropTarget = size2 > 0 ? "true" : "false";
+                }
+            }
+        };
+        if (0 === timeout) applySizes();
+        else setTimeout(applySizes, timeout);
+    }
+    createDragSpacer() {
+        const spacer = document.createElement("div");
+        spacer.className = "SpaceMan";
+        return spacer;
+    }
+}
+export { SpaceMan };

package/src/drag-drop-next/TemplateDragSession.js

@@ -0,0 +1,36 @@
+import { createContext, useContext } from "react";
+class TemplateDragSession {
+    #dropped = false;
+    #metrics;
+    #source;
+    begin(source, metrics) {
+        this.#dropped = false;
+        this.#metrics = metrics;
+        this.#source = source;
+    }
+    completeDrop() {
+        this.#dropped = true;
+    }
+    end() {
+        this.#metrics = void 0;
+        this.#source = void 0;
+    }
+    get dropped() {
+        return this.#dropped;
+    }
+    get metrics() {
+        return this.#metrics;
+    }
+    get source() {
+        return this.#source;
+    }
+    set x(value) {
+        if (this.#metrics) this.#metrics.x = value;
+    }
+    set y(value) {
+        if (this.#metrics) this.#metrics.y = value;
+    }
+}
+const TemplateDragSessionContext = createContext(void 0);
+const useTemplateDragSession = ()=>useContext(TemplateDragSessionContext);
+export { TemplateDragSession, TemplateDragSessionContext, useTemplateDragSession };