@node-edit-utils/core 2.3.2 → 2.3.4

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

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.3.2
+ * @version 2.3.4
  */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
@@ -9,23 +9,27 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MarkupCanvas = {}));
 })(this, (function (exports) { 'use strict';
 
-    function getScreenBounds(element) {
-        const rect = element.getBoundingClientRect();
+    const getNodeTools = () => {
+        return window.nodeTools;
+    };
+
+    const getViewportDimensions = () => {
         return {
-            top: rect.top,
-            left: rect.left,
-            width: rect.width,
-            height: rect.height,
+            width: document.documentElement.clientWidth || window.innerWidth,
+            height: document.documentElement.clientHeight || window.innerHeight,
         };
-    }
+    };
 
     const getCanvasContainer = () => {
         return document.querySelector(".canvas-container");
     };
 
-    const getViewportLabelsOverlay = () => {
-        const canvasContainer = getCanvasContainer();
-        const container = canvasContainer || document.body;
+    const getCanvasContainerOrBody = () => {
+        return getCanvasContainer() || document.body;
+    };
+
+    const getViewportLabelOverlay = () => {
+        const container = getCanvasContainerOrBody();
         // Check if overlay already exists
         let overlay = container.querySelector(".viewport-labels-overlay");
         if (!overlay) {
@@ -40,8 +44,7 @@
             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);
@@ -51,11 +54,112 @@
 
     // Global flag to prevent refreshViewportLabels during drag
     let globalIsDragging = false;
-    const isViewportLabelDragging = () => globalIsDragging;
-    const setViewportLabelDragging = (isDragging) => {
+    const isViewportDragging = () => globalIsDragging;
+    const setViewportDragging = (isDragging) => {
         globalIsDragging = isDragging;
     };
 
+    function getScreenBounds(element) {
+        const rect = element.getBoundingClientRect();
+        return {
+            top: rect.top,
+            left: rect.left,
+            width: rect.width,
+            height: rect.height,
+        };
+    }
+
+    /**
+     * 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",
@@ -65,22 +169,23 @@
         }, "*");
     }
 
+    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 = () => {
@@ -88,119 +193,100 @@
         return zoomValue ? parseFloat(zoomValue) : 1;
     };
 
-    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 };
+    /**
+     * 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) {
+                const wasAlreadySelected = nodeTools.getSelectedNode() === firstChild;
+                nodeTools.selectNode(firstChild);
+                // Always emit postMessage when selecting via viewport label click,
+                // even if the node was already selected (to match behavior of direct node clicks)
+                if (wasAlreadySelected) {
+                    sendPostMessage("selectedNodeChanged", firstChild.getAttribute("data-node-id") ?? null);
+                }
+            }
+        }
+    };
+
+    const setupViewportDrag = (labelElement, viewportElement, viewportName) => {
         // 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: () => {
+                setViewportDragging(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 }) => {
+                setViewportDragging(false);
+                const finalTransform = getTransformValues(viewportElement);
+                // If it was a drag, handle drag completion
+                if (hasDragged) {
+                    // Trigger refresh after drag completes to update highlight frame and labels
+                    const nodeTools = getNodeTools();
+                    if (nodeTools?.refreshHighlightFrame) {
+                        nodeTools.refreshHighlightFrame();
+                    }
+                }
+                // Always notify parent about the new position on drag stop
+                sendPostMessage("viewport-position-changed", {
+                    viewportName,
+                    x: finalTransform.x,
+                    y: finalTransform.y,
+                });
+            },
+            onCancel: () => {
+                setViewportDragging(false);
+            },
+            onPreventClick: () => { },
+        });
     };
 
-    // Store cleanup functions for drag listeners
-    const dragCleanupFunctions = new Map();
-    const refreshViewportLabels = () => {
-        // Skip refresh if a viewport label is being dragged
-        if (isViewportLabelDragging()) {
+    /**
+     * Refreshes (updates) a viewport label for a single viewport element.
+     * Creates the label if it doesn't exist, or updates its position if it does.
+     * Similar to refreshHighlightFrame - updates existing elements rather than recreating.
+     *
+     * @param viewportElement - The viewport element to refresh the label for
+     */
+    const refreshViewportLabel = (viewportElement) => {
+        const viewportName = viewportElement.getAttribute("data-viewport-name");
+        if (!viewportName) {
             return;
         }
-        const overlay = getViewportLabelsOverlay();
-        // Update SVG dimensions to match current viewport
-        const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-        const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
-        overlay.setAttribute("width", viewportWidth.toString());
-        overlay.setAttribute("height", viewportHeight.toString());
-        // Find all viewports with names
-        const viewports = document.querySelectorAll(".viewport[data-viewport-name]");
-        // Clean up existing drag listeners
-        dragCleanupFunctions.forEach((cleanup) => {
-            cleanup();
-        });
-        dragCleanupFunctions.clear();
-        // Remove existing label groups
-        const existingGroups = overlay.querySelectorAll(".viewport-label-group");
-        existingGroups.forEach((group) => {
-            group.remove();
-        });
-        // Create/update labels for each viewport
-        viewports.forEach((viewport) => {
-            const viewportElement = viewport;
-            const viewportName = viewportElement.getAttribute("data-viewport-name");
-            if (!viewportName)
-                return;
-            const bounds = getScreenBounds(viewportElement);
+        const overlay = getViewportLabelOverlay();
+        const bounds = getScreenBounds(viewportElement);
+        // Get existing label group or create if it doesn't exist
+        let group = overlay.querySelector(`[data-viewport-name="${viewportName}"]`);
+        if (!group) {
             // Create group for this viewport label
-            const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+            group = document.createElementNS("http://www.w3.org/2000/svg", "g");
             group.classList.add("viewport-label-group");
             group.setAttribute("data-viewport-name", viewportName);
-            group.setAttribute("transform", `translate(${bounds.left}, ${bounds.top})`);
             // Create text element
             const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
             text.classList.add("viewport-label-text");
@@ -211,14 +297,42 @@
             text.textContent = viewportName;
             group.appendChild(text);
             overlay.appendChild(group);
-            // Setup drag functionality for this label
-            const cleanup = setupViewportLabelDrag(text, viewportElement, viewportName);
-            dragCleanupFunctions.set(viewportName, cleanup);
+            // Setup drag functionality only when creating new label
+            setupViewportDrag(text, viewportElement, viewportName);
+        }
+        // Update label position (this is the refresh part - updates existing label)
+        group.setAttribute("transform", `translate(${bounds.left}, ${bounds.top})`);
+    };
+
+    const refreshViewportLabels = () => {
+        // Skip refresh if a viewport label is being dragged
+        if (isViewportDragging()) {
+            return;
+        }
+        const overlay = getViewportLabelOverlay();
+        // Update SVG dimensions to match current viewport (handles window resize and ensures coordinate system is correct)
+        const { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
+        overlay.setAttribute("width", viewportWidth.toString());
+        overlay.setAttribute("height", viewportHeight.toString());
+        // Find all viewports with names and refresh each label
+        const viewports = document.querySelectorAll(".viewport[data-viewport-name]");
+        viewports.forEach((viewport) => {
+            refreshViewportLabel(viewport);
+        });
+        // Remove labels for viewports that no longer exist
+        const existingGroups = overlay.querySelectorAll(".viewport-label-group");
+        existingGroups.forEach((group) => {
+            const viewportName = group.getAttribute("data-viewport-name");
+            if (viewportName) {
+                const viewportExists = Array.from(viewports).some((viewport) => viewport.getAttribute("data-viewport-name") === viewportName);
+                if (!viewportExists) {
+                    group.remove();
+                }
+            }
         });
     };
 
     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);
     };
@@ -241,8 +355,7 @@
         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();
             }
@@ -281,7 +394,6 @@
 
     const bindToWindow = (key, value) => {
         if (typeof window !== "undefined") {
-            // biome-ignore lint/suspicious/noExplicitAny: global window extension requires flexibility
             window[key] = value;
         }
     };
@@ -307,8 +419,7 @@
     };
 
     const clearHighlightFrame = () => {
-        const canvasContainer = getCanvasContainer();
-        const container = canvasContainer || document.body;
+        const container = getCanvasContainerOrBody();
         const frame = container.querySelector(".highlight-frame-overlay");
         if (frame) {
             frame.remove();
@@ -437,7 +548,7 @@
         onNodeSelected(selectedNode);
     };
 
-    const setupEventListener$1 = (nodeProvider, onNodeSelected, onEscapePressed, text) => {
+    const setupEventListener = (nodeProvider, onNodeSelected, onEscapePressed, text) => {
         const messageHandler = (event) => {
             processPostMessage(event, onNodeSelected);
         };
@@ -461,6 +572,17 @@
         };
     };
 
+    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";
     };
@@ -526,8 +648,7 @@
         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");
@@ -550,13 +671,8 @@
         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;
     };
 
@@ -593,19 +709,14 @@
     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");
     }
 
@@ -613,8 +724,8 @@
         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();
         }
@@ -633,24 +744,15 @@
         // 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 = () => {
@@ -668,24 +770,13 @@
         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;
@@ -702,8 +793,7 @@
         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;
@@ -714,36 +804,10 @@
         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})`);
@@ -809,8 +873,7 @@
         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;
@@ -1116,7 +1179,6 @@
                 highlightNode(node);
                 if (nodeProvider) {
                     updateHighlightFrameVisibility(node);
-                    updateHighlightFrameVisibility(node);
                 }
             }
             else {
@@ -1124,7 +1186,7 @@
             }
         };
         // Setup event listener
-        const removeListeners = setupEventListener$1(nodeProvider, selectNode, handleEscape, text);
+        const removeListeners = setupEventListener(nodeProvider, selectNode, handleEscape, text);
         const cleanup = () => {
             removeListeners();
             resizeObserver?.disconnect();
@@ -1159,6 +1221,10 @@
         return nodeTools;
     };
 
+    const getNodeProvider = () => {
+        return document.querySelector('[data-role="node-provider"]');
+    };
+
     const DEFAULT_WIDTH = 400;
     const RESIZE_CONFIG = {
         minWidth: 4,
@@ -1192,25 +1258,20 @@
         },
     ];
 
-    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);
-        };
+    /**
+     * Removes a viewport label for a single viewport element.
+     * @param viewportElement - The viewport element to remove the label for
+     */
+    const removeViewportLabel = (viewportElement) => {
+        const viewportName = viewportElement.getAttribute("data-viewport-name");
+        if (!viewportName) {
+            return;
+        }
+        const overlay = getViewportLabelOverlay();
+        const labelGroup = overlay.querySelector(`[data-viewport-name="${viewportName}"]`);
+        if (labelGroup) {
+            labelGroup.remove();
+        }
     };
 
     const createResizeHandle = (container) => {
@@ -1279,58 +1340,59 @@
         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
-        refreshViewportLabels();
+        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);
+        // Create/refresh the label for this viewport
+        refreshViewportLabel(container);
         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();
+            // Remove the label for this viewport
+            removeViewportLabel(container);
         };
         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;
+                refreshViewportLabel(container);
+                const nodeTools = getNodeTools();
                 const selectedNode = nodeTools?.getSelectedNode?.();
-                const nodeProvider = document.querySelector('[data-role="node-provider"]');
+                const nodeProvider = getNodeProvider();
                 if (selectedNode && nodeProvider) {
                     refreshHighlightFrame(selectedNode, nodeProvider);
                 }