@node-edit-utils/core 2.3.1 → 2.3.3

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

@@ -1,10 +1,312 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.3.1
+ * @version 2.3.3
  */
+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 {
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+
+const getCanvasContainer = () => {
+    return document.querySelector(".canvas-container");
+};
+
+const getCanvasContainerOrBody = () => {
+    return getCanvasContainer() || document.body;
+};
+
+const getViewportLabelsOverlay = () => {
+    const container = getCanvasContainerOrBody();
+    // Check if overlay already exists
+    let overlay = container.querySelector(".viewport-labels-overlay");
+    if (!overlay) {
+        // Create new SVG overlay
+        overlay = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        overlay.classList.add("viewport-labels-overlay");
+        // Set fixed positioning
+        overlay.style.position = "absolute";
+        overlay.style.top = "0";
+        overlay.style.left = "0";
+        overlay.style.width = "100vw";
+        overlay.style.height = "100vh";
+        overlay.style.pointerEvents = "none";
+        overlay.style.zIndex = "500";
+        const { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
+        overlay.setAttribute("width", viewportWidth.toString());
+        overlay.setAttribute("height", viewportHeight.toString());
+        container.appendChild(overlay);
+    }
+    return overlay;
+};
+
+// Global flag to prevent refreshViewportLabels during drag
+let globalIsDragging = false;
+const isViewportLabelDragging = () => globalIsDragging;
+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",
+        action,
+        data,
+        timestamp: Date.now(),
+    }, "*");
+}
+
+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");
+    return parseTransform2d(transform);
+};
+
+const getTransformValues = (element) => {
+    const style = element.style.transform;
+    return parseTransform3d(style);
+};
+
+const getZoomValue = () => {
+    const zoomValue = getComputedStyle(document.body).getPropertyValue("--zoom").trim();
+    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) => {
+    // Get the parent group element that contains the label
+    const labelGroup = labelElement.parentElement;
+    // 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
+const dragCleanupFunctions = new Map();
+const refreshViewportLabels = () => {
+    // Skip refresh if a viewport label is being dragged
+    if (isViewportLabelDragging()) {
+        return;
+    }
+    const overlay = getViewportLabelsOverlay();
+    // Update SVG dimensions to match current viewport
+    const { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
+    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);
+        // Create group for this viewport label
+        const 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");
+        text.setAttribute("x", "0");
+        text.setAttribute("y", "-8");
+        text.setAttribute("vector-effect", "non-scaling-stroke");
+        text.setAttribute("pointer-events", "auto");
+        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);
+    });
+};
+
 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);
 };
@@ -27,11 +329,12 @@ 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();
         }
+        // Refresh viewport labels
+        refreshViewportLabels();
     });
     observer.observe(transformLayer, {
         attributes: true,
@@ -39,8 +342,16 @@ function createCanvasObserver(canvasName = "canvas") {
         subtree: true,
         childList: true,
     });
+    // Handle window resize for viewport labels
+    const handleResize = () => {
+        refreshViewportLabels();
+    };
+    window.addEventListener("resize", handleResize);
+    // Initial refresh of viewport labels
+    refreshViewportLabels();
     function disconnect() {
         observer.disconnect();
+        window.removeEventListener("resize", handleResize);
     }
     return {
         disconnect,
@@ -55,18 +366,8 @@ const connectResizeObserver = (element, handler) => {
     return resizeObserver;
 };
 
-function sendPostMessage(action, data) {
-    window.parent.postMessage({
-        source: "node-edit-utils",
-        action,
-        data,
-        timestamp: Date.now(),
-    }, "*");
-}
-
 const bindToWindow = (key, value) => {
     if (typeof window !== "undefined") {
-        // biome-ignore lint/suspicious/noExplicitAny: global window extension requires flexibility
         window[key] = value;
     }
 };
@@ -91,13 +392,8 @@ const processPostMessage = (event, onNodeSelected) => {
     }
 };
 
-const getCanvasContainer = () => {
-    return document.querySelector(".canvas-container");
-};
-
 const clearHighlightFrame = () => {
-    const canvasContainer = getCanvasContainer();
-    const container = canvasContainer || document.body;
+    const container = getCanvasContainerOrBody();
     const frame = container.querySelector(".highlight-frame-overlay");
     if (frame) {
         frame.remove();
@@ -146,6 +442,21 @@ const isInsideComponent = (element) => {
     return false;
 };
 
+const isInsideViewport = (element) => {
+    let current = element;
+    while (current) {
+        if (current.classList.contains("viewport")) {
+            return true;
+        }
+        // Stop at node-provider to avoid checking beyond the editable area
+        if (current.getAttribute("data-role") === "node-provider") {
+            break;
+        }
+        current = current.parentElement;
+    }
+    return false;
+};
+
 const targetSameCandidates = (cache, current) => cache.length === current.length && cache.every((el, i) => el === current[i]);
 
 let candidateCache = [];
@@ -158,7 +469,16 @@ const selectNode = (event, nodeProvider, text) => {
     const clickThrough = event.metaKey || event.ctrlKey;
     const candidates = getElementsFromPoint(clickX, clickY).filter((element) => !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase()) &&
         !element.classList.contains("select-none") &&
-        !isInsideComponent(element));
+        !element.classList.contains("content-layer") &&
+        !element.classList.contains("resize-handle") &&
+        !element.classList.contains("resize-presets") &&
+        !isInsideComponent(element) &&
+        isInsideViewport(element));
+    console.log("candidates", candidates);
+    if (candidates.length === 0) {
+        lastSelectedNode = null;
+        return null;
+    }
     const editableNode = text.getEditableNode();
     if (editableNode && candidates.includes(editableNode)) {
         selectedNode = editableNode;
@@ -202,7 +522,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);
     };
@@ -226,6 +546,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";
 };
@@ -263,16 +594,6 @@ const createCornerHandles = (group, width, height, isInstance = false, isTextEdi
     createCornerHandle(group, 0, height, "handle-bottom-left", isInstance, isTextEdit);
 };
 
-function getScreenBounds(element) {
-    const rect = element.getBoundingClientRect();
-    return {
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height,
-    };
-}
-
 const getComponentColor$1 = () => {
     return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
 };
@@ -301,8 +622,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");
@@ -325,13 +645,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;
 };
 
@@ -368,19 +683,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");
 }
 
@@ -388,8 +698,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();
     }
@@ -408,24 +718,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 = () => {
@@ -443,24 +744,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;
@@ -477,8 +767,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;
@@ -489,36 +778,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})`);
@@ -584,8 +847,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;
@@ -705,6 +967,7 @@ const setupMutationObserver = (node, nodeProvider, canvasName = "canvas") => {
         // Accumulate mutations instead of replacing
         pendingMutations.push(...mutations);
         scheduleProcess();
+        console.log("refreshHighlightFrame in mutationObserver");
         refreshHighlightFrame(node, nodeProvider, canvasName);
     });
     return () => {
@@ -842,14 +1105,15 @@ const createNodeTools = (element, canvasName = "canvas") => {
                 checkNodeExists();
                 if (!document.contains(node))
                     return;
+                console.log("refreshHighlightFrame in mutationObserver 2");
                 refreshHighlightFrame(node, nodeProvider, canvasName);
                 updateHighlightFrameVisibility(node);
             });
             mutationObserver.observe(node, {
                 attributes: true,
                 characterData: true,
-                childList: true,
-                subtree: true,
+                //childList: true,
+                //subtree: true,
             });
             // Also observe parent node to catch when this node is removed
             const parentNode = node.parentElement;
@@ -878,19 +1142,25 @@ const createNodeTools = (element, canvasName = "canvas") => {
                 if (!document.contains(node))
                     return; // Exit early if node was removed
                 refreshHighlightFrame(node, nodeProvider, canvasName);
+                console.log("refreshHighlightFrame in resizeObserver");
                 updateHighlightFrameVisibility(node);
             });
         }
         selectedNode = node;
         sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
         highlightNode(node) ?? null;
-        if (node && nodeProvider) {
-            updateHighlightFrameVisibility(node);
-            updateHighlightFrameVisibility(node);
+        if (node) {
+            highlightNode(node);
+            if (nodeProvider) {
+                updateHighlightFrameVisibility(node);
+            }
+        }
+        else {
+            clearHighlightFrame();
         }
     };
     // Setup event listener
-    const removeListeners = setupEventListener$1(nodeProvider, selectNode, handleEscape, text);
+    const removeListeners = setupEventListener(nodeProvider, selectNode, handleEscape, text);
     const cleanup = () => {
         removeListeners();
         resizeObserver?.disconnect();
@@ -925,10 +1195,14 @@ const createNodeTools = (element, canvasName = "canvas") => {
     return nodeTools;
 };
 
+const getNodeProvider = () => {
+    return document.querySelector('[data-role="node-provider"]');
+};
+
 const DEFAULT_WIDTH = 400;
 const RESIZE_CONFIG = {
-    minWidth: 320,
-    maxWidth: 1680,
+    minWidth: 4,
+    maxWidth: 2560,
 };
 const RESIZE_PRESETS = [
     {
@@ -958,27 +1232,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";
@@ -1045,48 +1298,60 @@ 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);
+    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();
+        refreshViewportLabels();
     };
     return {
         setWidth: (width) => {
             updateWidth(container, width);
+            refreshViewportLabels();
+            const nodeTools = getNodeTools();
+            const selectedNode = nodeTools?.getSelectedNode?.();
+            const nodeProvider = getNodeProvider();
+            if (selectedNode && nodeProvider) {
+                refreshHighlightFrame(selectedNode, nodeProvider);
+            }
         },
         cleanup,
     };