@node-edit-utils/core 2.3.2 → 2.3.3

package/dist/node-edit-utils.cjs.js

@@ -1,10 +1,21 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.3.2
+ * @version 2.3.3
  */
 'use strict';
 
+const getNodeTools = () => {
+    return window.nodeTools;
+};
+
+const getViewportDimensions = () => {
+    return {
+        width: document.documentElement.clientWidth || window.innerWidth,
+        height: document.documentElement.clientHeight || window.innerHeight,
+    };
+};
+
 function getScreenBounds(element) {
     const rect = element.getBoundingClientRect();
     return {
@@ -19,9 +30,12 @@ const getCanvasContainer = () => {
     return document.querySelector(".canvas-container");
 };
 
+const getCanvasContainerOrBody = () => {
+    return getCanvasContainer() || document.body;
+};
+
 const getViewportLabelsOverlay = () => {
-    const canvasContainer = getCanvasContainer();
-    const container = canvasContainer || document.body;
+    const container = getCanvasContainerOrBody();
     // Check if overlay already exists
     let overlay = container.querySelector(".viewport-labels-overlay");
     if (!overlay) {
@@ -36,8 +50,7 @@ const getViewportLabelsOverlay = () => {
         overlay.style.height = "100vh";
         overlay.style.pointerEvents = "none";
         overlay.style.zIndex = "500";
-        const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-        const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+        const { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
         overlay.setAttribute("width", viewportWidth.toString());
         overlay.setAttribute("height", viewportHeight.toString());
         container.appendChild(overlay);
@@ -52,6 +65,97 @@ const setViewportLabelDragging = (isDragging) => {
     globalIsDragging = isDragging;
 };
 
+/**
+ * Creates a reusable drag handler for mouse drag operations
+ * @param element - Element that triggers the drag (mousedown listener attached here)
+ * @param callbacks - Callbacks for drag lifecycle events
+ * @param options - Configuration options
+ * @returns Cleanup function to remove all event listeners
+ */
+function createDragHandler(element, callbacks, options = {}) {
+    const { preventDefault = true, stopPropagation = true } = options;
+    const state = {
+        isDragging: false,
+        hasDragged: false,
+        startX: 0,
+        startY: 0,
+    };
+    const startDrag = (event) => {
+        if (preventDefault) {
+            event.preventDefault();
+        }
+        if (stopPropagation) {
+            event.stopPropagation();
+        }
+        state.isDragging = true;
+        state.hasDragged = false;
+        state.startX = event.clientX;
+        state.startY = event.clientY;
+        callbacks.onStart?.(event, state);
+    };
+    const handleDrag = (event) => {
+        if (!state.isDragging)
+            return;
+        const deltaX = event.clientX - state.startX;
+        const deltaY = event.clientY - state.startY;
+        state.hasDragged = true;
+        callbacks.onDrag(event, {
+            ...state,
+            deltaX,
+            deltaY,
+        });
+    };
+    const stopDrag = (event) => {
+        if (!state.isDragging)
+            return;
+        if (preventDefault) {
+            event.preventDefault();
+        }
+        if (stopPropagation) {
+            event.stopPropagation();
+        }
+        state.isDragging = false;
+        callbacks.onStop?.(event, state);
+    };
+    const cancelDrag = () => {
+        if (!state.isDragging)
+            return;
+        state.isDragging = false;
+        callbacks.onCancel?.(state);
+    };
+    const preventClick = (event) => {
+        if (preventDefault) {
+            event.preventDefault();
+        }
+        if (stopPropagation) {
+            event.stopPropagation();
+        }
+        callbacks.onPreventClick?.(event, state);
+        // Reset hasDragged flag after handling the click
+        if (state.hasDragged) {
+            state.hasDragged = false;
+        }
+    };
+    // Attach event listeners
+    element.addEventListener("mousedown", startDrag);
+    if (callbacks.onPreventClick) {
+        element.addEventListener("click", preventClick);
+    }
+    document.addEventListener("mousemove", handleDrag);
+    document.addEventListener("mouseup", stopDrag);
+    window.addEventListener("blur", cancelDrag);
+    // Return cleanup function
+    return () => {
+        element.removeEventListener("mousedown", startDrag);
+        if (callbacks.onPreventClick) {
+            element.removeEventListener("click", preventClick);
+        }
+        document.removeEventListener("mousemove", handleDrag);
+        document.removeEventListener("mouseup", stopDrag);
+        window.removeEventListener("blur", cancelDrag);
+    };
+}
+
 function sendPostMessage(action, data) {
     window.parent.postMessage({
         source: "node-edit-utils",
@@ -61,22 +165,23 @@ function sendPostMessage(action, data) {
     }, "*");
 }
 
+const parseTransform3d = (transform) => {
+    const match = transform.match(/translate3d\((-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px\)/);
+    return match ? { x: parseFloat(match[1]), y: parseFloat(match[2]) } : { x: 0, y: 0 };
+};
+const parseTransform2d = (transform) => {
+    const match = transform?.match(/translate\((-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)\)/);
+    return match ? { x: parseFloat(match[1]), y: parseFloat(match[2]) } : { x: 0, y: 0 };
+};
+
 const getLabelPosition = (labelGroup) => {
     const transform = labelGroup.getAttribute("transform");
-    const match = transform?.match(/translate\((-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)\)/);
-    if (match) {
-        return { x: parseFloat(match[1]), y: parseFloat(match[2]) };
-    }
-    return { x: 0, y: 0 };
+    return parseTransform2d(transform);
 };
 
 const getTransformValues = (element) => {
     const style = element.style.transform;
-    const match = style.match(/translate3d\((-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px\)/);
-    if (match) {
-        return { x: parseFloat(match[1]), y: parseFloat(match[2]) };
-    }
-    return { x: 0, y: 0 };
+    return parseTransform3d(style);
 };
 
 const getZoomValue = () => {
@@ -84,80 +189,71 @@ const getZoomValue = () => {
     return zoomValue ? parseFloat(zoomValue) : 1;
 };
 
+/**
+ * Selects the first child node inside a viewport element.
+ * Skips the resize-handle element if present.
+ */
+const selectFirstViewportNode = (viewportElement) => {
+    const firstChild = Array.from(viewportElement.children).find((child) => !child.classList.contains("resize-handle"));
+    if (firstChild) {
+        const nodeTools = getNodeTools();
+        if (nodeTools?.selectNode) {
+            nodeTools.selectNode(firstChild);
+        }
+    }
+};
+
 const setupViewportLabelDrag = (labelElement, viewportElement, viewportName) => {
-    let isDragging = false;
-    let startX = 0;
-    let startY = 0;
-    let initialTransform = { x: 0, y: 0 };
-    let initialLabelPosition = { x: 0, y: 0 };
     // Get the parent group element that contains the label
     const labelGroup = labelElement.parentElement;
-    const startDrag = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        isDragging = true;
-        setViewportLabelDragging(true);
-        startX = event.clientX;
-        startY = event.clientY;
-        initialTransform = getTransformValues(viewportElement);
-        initialLabelPosition = getLabelPosition(labelGroup);
-    };
-    const handleDrag = (event) => {
-        if (!isDragging)
-            return;
-        const zoom = getZoomValue();
-        // Calculate mouse delta
-        const rawDeltaX = event.clientX - startX;
-        const rawDeltaY = event.clientY - startY;
-        // Adjust delta for zoom level
-        const deltaX = rawDeltaX / zoom;
-        const deltaY = rawDeltaY / zoom;
-        const newX = initialTransform.x + deltaX;
-        const newY = initialTransform.y + deltaY;
-        // Update label position with raw delta (labels are in screen space)
-        const newLabelX = initialLabelPosition.x + rawDeltaX;
-        const newLabelY = initialLabelPosition.y + rawDeltaY;
-        labelGroup.setAttribute("transform", `translate(${newLabelX}, ${newLabelY})`);
-        // Update viewport position with zoom-adjusted delta
-        viewportElement.style.transform = `translate3d(${newX}px, ${newY}px, 0)`;
-    };
-    const stopDrag = (event) => {
-        if (!isDragging)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        isDragging = false;
-        setViewportLabelDragging(false);
-        const finalTransform = getTransformValues(viewportElement);
-        // Trigger refresh after drag completes to update highlight frame and labels
-        // biome-ignore lint/suspicious/noExplicitAny: global window extension
-        const nodeTools = window.nodeTools;
-        if (nodeTools?.refreshHighlightFrame) {
-            nodeTools.refreshHighlightFrame();
-        }
-        // Notify parent about the new position
-        sendPostMessage("viewport-position-changed", {
-            viewportName,
-            x: finalTransform.x,
-            y: finalTransform.y,
-        });
-    };
-    const cancelDrag = () => {
-        isDragging = false;
-        setViewportLabelDragging(false);
-    };
-    // Attach event listeners
-    labelElement.addEventListener("mousedown", startDrag);
-    document.addEventListener("mousemove", handleDrag);
-    document.addEventListener("mouseup", stopDrag);
-    window.addEventListener("blur", cancelDrag);
-    // Return cleanup function
-    return () => {
-        labelElement.removeEventListener("mousedown", startDrag);
-        document.removeEventListener("mousemove", handleDrag);
-        document.removeEventListener("mouseup", stopDrag);
-        window.removeEventListener("blur", cancelDrag);
-    };
+    // Track initial positions for calculations
+    let initialTransform = { x: 0, y: 0 };
+    let initialLabelPosition = { x: 0, y: 0 };
+    return createDragHandler(labelElement, {
+        onStart: () => {
+            setViewportLabelDragging(true);
+            initialTransform = getTransformValues(viewportElement);
+            initialLabelPosition = getLabelPosition(labelGroup);
+            selectFirstViewportNode(viewportElement);
+        },
+        onDrag: (_event, { deltaX, deltaY }) => {
+            const zoom = getZoomValue();
+            // Adjust delta for zoom level (viewport is in canvas space)
+            const deltaXZoomed = deltaX / zoom;
+            const deltaYZoomed = deltaY / zoom;
+            // Calculate new positions
+            const newX = initialTransform.x + deltaXZoomed;
+            const newY = initialTransform.y + deltaYZoomed;
+            // Update label position with raw delta (labels are in screen space)
+            const newLabelX = initialLabelPosition.x + deltaX;
+            const newLabelY = initialLabelPosition.y + deltaY;
+            labelGroup.setAttribute("transform", `translate(${newLabelX}, ${newLabelY})`);
+            // Update viewport position with zoom-adjusted delta
+            viewportElement.style.transform = `translate3d(${newX}px, ${newY}px, 0)`;
+        },
+        onStop: (_event, { hasDragged }) => {
+            setViewportLabelDragging(false);
+            // If it was a drag, handle drag completion
+            if (hasDragged) {
+                const finalTransform = getTransformValues(viewportElement);
+                // Trigger refresh after drag completes to update highlight frame and labels
+                const nodeTools = getNodeTools();
+                if (nodeTools?.refreshHighlightFrame) {
+                    nodeTools.refreshHighlightFrame();
+                }
+                // Notify parent about the new position
+                sendPostMessage("viewport-position-changed", {
+                    viewportName,
+                    x: finalTransform.x,
+                    y: finalTransform.y,
+                });
+            }
+        },
+        onCancel: () => {
+            setViewportLabelDragging(false);
+        },
+        onPreventClick: () => { },
+    });
 };
 
 // Store cleanup functions for drag listeners
@@ -169,8 +265,7 @@ const refreshViewportLabels = () => {
     }
     const overlay = getViewportLabelsOverlay();
     // Update SVG dimensions to match current viewport
-    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-    const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+    const { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
     overlay.setAttribute("width", viewportWidth.toString());
     overlay.setAttribute("height", viewportHeight.toString());
     // Find all viewports with names
@@ -214,7 +309,6 @@ const refreshViewportLabels = () => {
 };
 
 const getCanvasWindowValue = (path, canvasName = "canvas") => {
-    // biome-ignore lint/suspicious/noExplicitAny: global window extension
     const canvas = window[canvasName];
     return path.reduce((obj, prop) => obj?.[prop], canvas);
 };
@@ -237,8 +331,7 @@ function createCanvasObserver(canvasName = "canvas") {
     const observer = new MutationObserver(() => {
         applyCanvasState(canvasName);
         // Refresh highlight frame (throttled via withRAFThrottle)
-        // biome-ignore lint/suspicious/noExplicitAny: global window extension
-        const nodeTools = window.nodeTools;
+        const nodeTools = getNodeTools();
         if (nodeTools?.refreshHighlightFrame) {
             nodeTools.refreshHighlightFrame();
         }
@@ -277,7 +370,6 @@ const connectResizeObserver = (element, handler) => {
 
 const bindToWindow = (key, value) => {
     if (typeof window !== "undefined") {
-        // biome-ignore lint/suspicious/noExplicitAny: global window extension requires flexibility
         window[key] = value;
     }
 };
@@ -303,8 +395,7 @@ const processPostMessage = (event, onNodeSelected) => {
 };
 
 const clearHighlightFrame = () => {
-    const canvasContainer = getCanvasContainer();
-    const container = canvasContainer || document.body;
+    const container = getCanvasContainerOrBody();
     const frame = container.querySelector(".highlight-frame-overlay");
     if (frame) {
         frame.remove();
@@ -433,7 +524,7 @@ const handleNodeClick = (event, nodeProvider, text, onNodeSelected) => {
     onNodeSelected(selectedNode);
 };
 
-const setupEventListener$1 = (nodeProvider, onNodeSelected, onEscapePressed, text) => {
+const setupEventListener = (nodeProvider, onNodeSelected, onEscapePressed, text) => {
     const messageHandler = (event) => {
         processPostMessage(event, onNodeSelected);
     };
@@ -457,6 +548,17 @@ const setupEventListener$1 = (nodeProvider, onNodeSelected, onEscapePressed, tex
     };
 };
 
+const toggleClass = (element, className, condition) => {
+    if (!element)
+        return;
+    if (condition) {
+        element.classList.add(className);
+    }
+    else {
+        element.classList.remove(className);
+    }
+};
+
 const isComponentInstance = (element) => {
     return element.getAttribute("data-instance") === "true";
 };
@@ -522,8 +624,7 @@ const createHighlightFrame = (node, isInstance = false, isTextEdit = false) => {
     svg.style.height = "100vh";
     svg.style.pointerEvents = "none";
     svg.style.zIndex = "500";
-    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-    const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+    const { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
     svg.setAttribute("width", viewportWidth.toString());
     svg.setAttribute("height", viewportHeight.toString());
     const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
@@ -546,13 +647,8 @@ const createHighlightFrame = (node, isInstance = false, isTextEdit = false) => {
     group.appendChild(rect);
     createCornerHandles(group, minWidth, height, isInstance, isTextEdit);
     svg.appendChild(group);
-    const canvasContainer = getCanvasContainer();
-    if (canvasContainer) {
-        canvasContainer.appendChild(svg);
-    }
-    else {
-        document.body.appendChild(svg);
-    }
+    const container = getCanvasContainerOrBody();
+    container.appendChild(svg);
     return svg;
 };
 
@@ -589,19 +685,14 @@ const createTagLabel = (node, nodeTools) => {
 const createToolsContainer = (node, highlightFrame, isInstance = false, isTextEdit = false) => {
     const nodeTools = document.createElement("div");
     nodeTools.className = "node-tools";
-    if (isInstance) {
-        nodeTools.classList.add("is-instance");
-    }
-    if (isTextEdit) {
-        nodeTools.classList.add("is-text-edit");
-    }
+    toggleClass(nodeTools, "is-instance", isInstance);
+    toggleClass(nodeTools, "is-text-edit", isTextEdit);
     highlightFrame.appendChild(nodeTools);
     createTagLabel(node, nodeTools);
 };
 
 function getHighlightFrameElement() {
-    const canvasContainer = getCanvasContainer();
-    const container = canvasContainer || document.body;
+    const container = getCanvasContainerOrBody();
     return container.querySelector(".highlight-frame-overlay");
 }
 
@@ -609,8 +700,8 @@ const highlightNode = (node) => {
     if (!node)
         return;
     const existingHighlightFrame = getHighlightFrameElement();
-    const canvasContainer = getCanvasContainer();
-    const existingToolsWrapper = canvasContainer?.querySelector(".highlight-frame-tools-wrapper") || document.body.querySelector(".highlight-frame-tools-wrapper");
+    const container = getCanvasContainerOrBody();
+    const existingToolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
     if (existingHighlightFrame) {
         existingHighlightFrame.remove();
     }
@@ -629,24 +720,15 @@ const highlightNode = (node) => {
     // Create tools wrapper using CSS transform (GPU-accelerated)
     const toolsWrapper = document.createElement("div");
     toolsWrapper.classList.add("highlight-frame-tools-wrapper");
-    if (isInstance) {
-        toolsWrapper.classList.add("is-instance");
-    }
-    if (isTextEdit) {
-        toolsWrapper.classList.add("is-text-edit");
-    }
+    toggleClass(toolsWrapper, "is-instance", isInstance);
+    toggleClass(toolsWrapper, "is-text-edit", isTextEdit);
     toolsWrapper.style.position = "absolute";
     toolsWrapper.style.transform = `translate(${left}px, ${bottomY}px)`;
     toolsWrapper.style.transformOrigin = "left center";
     toolsWrapper.style.pointerEvents = "none";
     toolsWrapper.style.zIndex = "500";
     createToolsContainer(node, toolsWrapper, isInstance, isTextEdit);
-    if (canvasContainer) {
-        canvasContainer.appendChild(toolsWrapper);
-    }
-    else {
-        document.body.appendChild(toolsWrapper);
-    }
+    container.appendChild(toolsWrapper);
 };
 
 const getComponentColor = () => {
@@ -664,24 +746,13 @@ const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
     const isTextEdit = node.contentEditable === "true";
     // Update SVG dimensions to match current viewport (handles window resize and ensures coordinate system is correct)
     // Use clientWidth/Height to match getBoundingClientRect() coordinate system (excludes scrollbars)
-    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-    const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+    const { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
     frame.setAttribute("width", viewportWidth.toString());
     frame.setAttribute("height", viewportHeight.toString());
     // Update instance class
-    if (isInstance) {
-        frame.classList.add("is-instance");
-    }
-    else {
-        frame.classList.remove("is-instance");
-    }
+    toggleClass(frame, "is-instance", isInstance);
     // Update text edit class
-    if (isTextEdit) {
-        frame.classList.add("is-text-edit");
-    }
-    else {
-        frame.classList.remove("is-text-edit");
-    }
+    toggleClass(frame, "is-text-edit", isTextEdit);
     const group = frame.querySelector(".highlight-frame-group");
     if (!group)
         return;
@@ -698,8 +769,7 @@ const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
     else {
         rect.removeAttribute("stroke"); // Use CSS default
     }
-    const canvasContainer = getCanvasContainer();
-    const container = canvasContainer || document.body;
+    const container = getCanvasContainerOrBody();
     const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
     const nodeTools = toolsWrapper?.querySelector(".node-tools");
     const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
@@ -710,36 +780,10 @@ const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
     const minWidth = Math.max(width, 3);
     const bottomY = top + height;
     // Update instance classes on tools wrapper and node tools
-    if (toolsWrapper) {
-        if (isInstance) {
-            toolsWrapper.classList.add("is-instance");
-        }
-        else {
-            toolsWrapper.classList.remove("is-instance");
-        }
-        // Update text edit class
-        if (isTextEdit) {
-            toolsWrapper.classList.add("is-text-edit");
-        }
-        else {
-            toolsWrapper.classList.remove("is-text-edit");
-        }
-    }
-    if (nodeTools) {
-        if (isInstance) {
-            nodeTools.classList.add("is-instance");
-        }
-        else {
-            nodeTools.classList.remove("is-instance");
-        }
-        // Update text edit class
-        if (isTextEdit) {
-            nodeTools.classList.add("is-text-edit");
-        }
-        else {
-            nodeTools.classList.remove("is-text-edit");
-        }
-    }
+    toggleClass(toolsWrapper, "is-instance", isInstance);
+    toggleClass(toolsWrapper, "is-text-edit", isTextEdit);
+    toggleClass(nodeTools, "is-instance", isInstance);
+    toggleClass(nodeTools, "is-text-edit", isTextEdit);
     // Batch all DOM writes (single paint pass)
     // Update group transform to move entire group (rect + handles) at once
     group.setAttribute("transform", `translate(${left}, ${top})`);
@@ -805,8 +849,7 @@ const updateHighlightFrameVisibility = (node) => {
     const displayValue = hasHiddenClass ? "none" : "";
     // Batch DOM writes
     frame.style.display = displayValue;
-    const canvasContainer = getCanvasContainer();
-    const container = canvasContainer || document.body;
+    const container = getCanvasContainerOrBody();
     const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
     if (toolsWrapper) {
         toolsWrapper.style.display = displayValue;
@@ -1112,7 +1155,6 @@ const createNodeTools = (element, canvasName = "canvas") => {
             highlightNode(node);
             if (nodeProvider) {
                 updateHighlightFrameVisibility(node);
-                updateHighlightFrameVisibility(node);
             }
         }
         else {
@@ -1120,7 +1162,7 @@ const createNodeTools = (element, canvasName = "canvas") => {
         }
     };
     // Setup event listener
-    const removeListeners = setupEventListener$1(nodeProvider, selectNode, handleEscape, text);
+    const removeListeners = setupEventListener(nodeProvider, selectNode, handleEscape, text);
     const cleanup = () => {
         removeListeners();
         resizeObserver?.disconnect();
@@ -1155,6 +1197,10 @@ const createNodeTools = (element, canvasName = "canvas") => {
     return nodeTools;
 };
 
+const getNodeProvider = () => {
+    return document.querySelector('[data-role="node-provider"]');
+};
+
 const DEFAULT_WIDTH = 400;
 const RESIZE_CONFIG = {
     minWidth: 4,
@@ -1188,27 +1234,6 @@ const RESIZE_PRESETS = [
     },
 ];
 
-const setupEventListener = (resizeHandle, startResize, handleResize, stopResize, blurResize) => {
-    const handleMouseLeave = (event) => {
-        // Check if mouse is leaving the window/document
-        if (!event.relatedTarget && (event.target === document || event.target === document.documentElement)) {
-            blurResize();
-        }
-    };
-    resizeHandle.addEventListener("mousedown", startResize);
-    document.addEventListener("mousemove", handleResize);
-    document.addEventListener("mouseup", stopResize);
-    document.addEventListener("mouseleave", handleMouseLeave);
-    window.addEventListener("blur", blurResize);
-    return () => {
-        resizeHandle.removeEventListener("mousedown", startResize);
-        document.removeEventListener("mousemove", handleResize);
-        document.removeEventListener("mouseup", stopResize);
-        document.removeEventListener("mouseleave", handleMouseLeave);
-        window.removeEventListener("blur", blurResize);
-    };
-};
-
 const createResizeHandle = (container) => {
     const handle = document.createElement("div");
     handle.className = "resize-handle";
@@ -1275,58 +1300,57 @@ const createViewport = (container, initialWidth) => {
     const width = initialWidth ?? DEFAULT_WIDTH;
     container.style.setProperty("--container-width", `${width}px`);
     createResizePresets(resizeHandle, container, updateWidth);
-    let isDragging = false;
+    // Track initial values for resize calculation
     let startX = 0;
     let startWidth = 0;
-    const startResize = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        isDragging = true;
-        startX = event.clientX;
-        startWidth = container.offsetWidth;
-    };
-    const handleResize = (event) => {
-        if (!isDragging)
-            return;
-        if (canvas) {
-            canvas.style.cursor = "ew-resize";
-        }
-        const width = calcWidth(event, startX, startWidth);
-        updateWidth(container, width);
-    };
-    const stopResize = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        if (canvas) {
-            canvas.style.cursor = "default";
-        }
-        isDragging = false;
-    };
-    const blurResize = () => {
-        if (canvas) {
-            canvas.style.cursor = "default";
+    // Handle mouse leave for resize (specific to resize use case)
+    const handleMouseLeave = (event) => {
+        // Check if mouse is leaving the window/document
+        if (!event.relatedTarget && (event.target === document || event.target === document.documentElement)) {
+            if (canvas) {
+                canvas.style.cursor = "default";
+            }
         }
-        isDragging = false;
     };
-    const removeListeners = setupEventListener(resizeHandle, startResize, handleResize, stopResize, blurResize);
-    // Refresh viewport labels when viewport is created
+    const removeDragListeners = createDragHandler(resizeHandle, {
+        onStart: (_event, { startX: dragStartX }) => {
+            startX = dragStartX;
+            startWidth = container.offsetWidth;
+        },
+        onDrag: (event) => {
+            if (canvas) {
+                canvas.style.cursor = "ew-resize";
+            }
+            const width = calcWidth(event, startX, startWidth);
+            updateWidth(container, width);
+        },
+        onStop: () => {
+            if (canvas) {
+                canvas.style.cursor = "default";
+            }
+        },
+        onCancel: () => {
+            if (canvas) {
+                canvas.style.cursor = "default";
+            }
+        },
+        onPreventClick: () => { },
+    });
+    document.addEventListener("mouseleave", handleMouseLeave);
     refreshViewportLabels();
     const cleanup = () => {
-        isDragging = false;
-        removeListeners();
+        removeDragListeners();
+        document.removeEventListener("mouseleave", handleMouseLeave);
         resizeHandle.remove();
-        // Refresh labels after cleanup to remove this viewport's label if needed
         refreshViewportLabels();
     };
     return {
         setWidth: (width) => {
             updateWidth(container, width);
             refreshViewportLabels();
-            // Refresh highlight frame when viewport width changes to update node positions
-            // biome-ignore lint/suspicious/noExplicitAny: global window extension
-            const nodeTools = window.nodeTools;
+            const nodeTools = getNodeTools();
             const selectedNode = nodeTools?.getSelectedNode?.();
-            const nodeProvider = document.querySelector('[data-role="node-provider"]');
+            const nodeProvider = getNodeProvider();
             if (selectedNode && nodeProvider) {
                 refreshHighlightFrame(selectedNode, nodeProvider);
             }