@node-edit-utils/core 2.1.9 → 2.2.0

package/dist/lib/node-tools/highlight/clearHighlightFrame.d.ts

@@ -1 +1 @@
-export declare const clearHighlightFrame: (nodeProvider: HTMLElement | null) => void;
+export declare const clearHighlightFrame: () => void;

package/dist/lib/node-tools/highlight/createCornerHandles.d.ts

@@ -0,0 +1 @@
+export declare const createCornerHandles: (group: SVGGElement, width: number, height: number, isInstance?: boolean) => void;

package/dist/lib/node-tools/highlight/createHighlightFrame.d.ts

@@ -1 +1 @@
-export declare const createHighlightFrame: (node: HTMLElement, nodeProvider: HTMLElement) => HTMLElement;
+export declare const createHighlightFrame: (node: HTMLElement, isInstance?: boolean) => SVGSVGElement;

package/dist/lib/node-tools/highlight/createToolsContainer.d.ts

@@ -1 +1 @@
-export declare const createToolsContainer: (node: HTMLElement, highlightFrame: HTMLElement) => void;
+export declare const createToolsContainer: (node: HTMLElement, highlightFrame: HTMLElement, isInstance?: boolean) => void;

package/dist/lib/node-tools/highlight/helpers/getHighlightFrameElement.d.ts

@@ -1 +1 @@
-export declare function getHighlightFrameElement(nodeProvider: HTMLElement): HTMLElement | null;
+export declare function getHighlightFrameElement(): SVGSVGElement | null;

package/dist/lib/node-tools/highlight/helpers/getScreenBounds.d.ts

@@ -0,0 +1,6 @@
+export declare function getScreenBounds(element: HTMLElement): {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};

package/dist/lib/node-tools/highlight/highlightNode.d.ts

@@ -1 +1 @@
-export declare const highlightNode: (node: HTMLElement | null, nodeProvider: HTMLElement) => void;
+export declare const highlightNode: (node: HTMLElement | null) => void;

package/dist/lib/node-tools/highlight/updateHighlightFrameVisibility.d.ts

@@ -1 +1 @@
-export declare const updateHighlightFrameVisibility: (node: HTMLElement, nodeProvider: HTMLElement) => void;
+export declare const updateHighlightFrameVisibility: (node: HTMLElement) => void;

package/dist/lib/node-tools/select/helpers/isComponentInstance.d.ts

@@ -0,0 +1 @@
+export declare const isComponentInstance: (element: Element) => boolean;

package/dist/lib/node-tools/select/helpers/isInsideComponent.d.ts

@@ -0,0 +1 @@
+export declare const isInsideComponent: (element: Element) => boolean;

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

@@ -1,72 +1,10 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.1.9
+ * @version 2.2.0
  */
 'use strict';
 
-// biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
-function withRAFThrottle(func) {
-    let rafId = null;
-    let lastArgs = null;
-    const throttled = (...args) => {
-        lastArgs = args;
-        if (rafId === null) {
-            rafId = requestAnimationFrame(() => {
-                if (lastArgs) {
-                    func(...lastArgs);
-                }
-                rafId = null;
-                lastArgs = null;
-            });
-        }
-    };
-    throttled.cleanup = () => {
-        if (rafId !== null) {
-            cancelAnimationFrame(rafId);
-            rafId = null;
-            lastArgs = null;
-        }
-    };
-    return throttled;
-}
-// biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
-function withDoubleRAF(func) {
-    let rafId1 = null;
-    let rafId2 = null;
-    let lastArgs = null;
-    const throttled = (...args) => {
-        lastArgs = args;
-        if (rafId1 === null) {
-            rafId1 = requestAnimationFrame(() => {
-                // First RAF: let browser complete layout
-                rafId2 = requestAnimationFrame(() => {
-                    // Second RAF: read bounds after layout is complete
-                    if (lastArgs) {
-                        const currentArgs = lastArgs;
-                        rafId1 = null;
-                        rafId2 = null;
-                        lastArgs = null;
-                        func(...currentArgs);
-                    }
-                });
-            });
-        }
-    };
-    throttled.cleanup = () => {
-        if (rafId1 !== null) {
-            cancelAnimationFrame(rafId1);
-            rafId1 = null;
-        }
-        if (rafId2 !== null) {
-            cancelAnimationFrame(rafId2);
-            rafId2 = null;
-        }
-        lastArgs = null;
-    };
-    return throttled;
-}
-
 const getCanvasWindowValue = (path) => {
     // biome-ignore lint/suspicious/noExplicitAny: global window extension
     const canvas = window.canvas;
@@ -88,11 +26,14 @@ function createCanvasObserver() {
             disconnect: () => { },
         };
     }
-    const throttledUpdate = withRAFThrottle(() => {
-        applyCanvasState();
-    });
     const observer = new MutationObserver(() => {
-        throttledUpdate();
+        applyCanvasState();
+        // Refresh highlight frame (throttled via withRAFThrottle)
+        // biome-ignore lint/suspicious/noExplicitAny: global window extension
+        const nodeTools = window.nodeTools;
+        if (nodeTools?.refreshHighlightFrame) {
+            nodeTools.refreshHighlightFrame();
+        }
     });
     observer.observe(transformLayer, {
         attributes: true,
@@ -101,7 +42,6 @@ function createCanvasObserver() {
         childList: true,
     });
     function disconnect() {
-        throttledUpdate.cleanup();
         observer.disconnect();
     }
     return {
@@ -117,6 +57,32 @@ const connectResizeObserver = (element, handler) => {
     return resizeObserver;
 };
 
+// biome-ignore lint/suspicious/noExplicitAny: generic constraint requires flexibility
+function withRAFThrottle(func) {
+    let rafId = null;
+    let lastArgs = null;
+    const throttled = (...args) => {
+        lastArgs = args;
+        if (rafId === null) {
+            rafId = requestAnimationFrame(() => {
+                if (lastArgs) {
+                    func(...lastArgs);
+                }
+                rafId = null;
+                lastArgs = null;
+            });
+        }
+    };
+    throttled.cleanup = () => {
+        if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+            lastArgs = null;
+        }
+    };
+    return throttled;
+}
+
 function sendPostMessage(action, data) {
     window.parent.postMessage({
         source: "node-edit-utils",
@@ -142,7 +108,6 @@ const processPostMessage = (event, onNodeSelected) => {
         if (event.data.action === "selectedNodeChanged") {
             const nodeId = event.data.data;
             const selectedNode = document.querySelector(`[data-node-id="${nodeId}"]`);
-            console.log("selectedNode", selectedNode);
             if (isLocked(selectedNode)) {
                 onNodeSelected?.(null);
                 return;
@@ -154,17 +119,14 @@ const processPostMessage = (event, onNodeSelected) => {
     }
 };
 
-function getHighlightFrameElement(nodeProvider) {
-    return nodeProvider.querySelector(".highlight-frame");
-}
-
-const clearHighlightFrame = (nodeProvider) => {
-    if (!nodeProvider) {
-        return;
+const clearHighlightFrame = () => {
+    const frame = document.body.querySelector(".highlight-frame-overlay");
+    if (frame) {
+        frame.remove();
     }
-    const highlightFrame = getHighlightFrameElement(nodeProvider);
-    if (highlightFrame) {
-        highlightFrame.remove();
+    const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
+    if (toolsWrapper) {
+        toolsWrapper.remove();
     }
 };
 
@@ -184,6 +146,21 @@ const getElementsFromPoint = (clickX, clickY) => {
     }, { elements: [], found: false }).elements;
 };
 
+const isInsideComponent = (element) => {
+    let current = element.parentElement;
+    while (current) {
+        if (current.getAttribute("data-instance") === "true") {
+            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 = [];
@@ -193,7 +170,9 @@ const selectNode = (event, editableNode) => {
     const clickX = event.clientX;
     const clickY = event.clientY;
     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"));
+    const candidates = getElementsFromPoint(clickX, clickY).filter((element) => !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase()) &&
+        !element.classList.contains("select-none") &&
+        !isInsideComponent(element));
     if (editableNode && candidates.includes(editableNode)) {
         return editableNode;
     }
@@ -218,7 +197,7 @@ const handleNodeClick = (event, nodeProvider, editableNode, onNodeSelected) => {
     event.preventDefault();
     event.stopPropagation();
     if (nodeProvider && !nodeProvider.contains(event.target)) {
-        clearHighlightFrame(nodeProvider);
+        clearHighlightFrame();
         onNodeSelected(null);
         return;
     }
@@ -250,48 +229,90 @@ const setupEventListener$1 = (nodeProvider, onNodeSelected, onEscapePressed, get
     };
 };
 
-function getElementBounds(element, nodeProvider) {
-    const elementRect = element.getBoundingClientRect();
-    const componentRootRect = nodeProvider.getBoundingClientRect();
-    const relativeTop = elementRect.top - componentRootRect.top;
-    const relativeLeft = elementRect.left - componentRootRect.left;
-    const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
-    const top = parseFloat((relativeTop / zoom).toFixed(5));
-    const left = parseFloat((relativeLeft / zoom).toFixed(5));
-    const width = Math.max(4, parseFloat((elementRect.width / zoom).toFixed(5)));
-    const height = parseFloat((elementRect.height / zoom).toFixed(5));
+const isComponentInstance = (element) => {
+    return element.getAttribute("data-instance") === "true";
+};
+
+const HANDLE_SIZE = 6;
+const getComponentColor$2 = () => {
+    return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
+};
+const createCornerHandle = (group, x, y, className, isInstance = false) => {
+    const handle = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    // Position relative to group (offset by half handle size to center on corner)
+    handle.setAttribute("x", (x - HANDLE_SIZE / 2).toString());
+    handle.setAttribute("y", (y - HANDLE_SIZE / 2).toString());
+    handle.setAttribute("width", HANDLE_SIZE.toString());
+    handle.setAttribute("height", HANDLE_SIZE.toString());
+    handle.setAttribute("vector-effect", "non-scaling-stroke");
+    handle.classList.add("highlight-frame-handle", className);
+    if (isInstance) {
+        handle.setAttribute("stroke", getComponentColor$2());
+    }
+    group.appendChild(handle);
+    return handle;
+};
+const createCornerHandles = (group, width, height, isInstance = false) => {
+    // Create corner handles using relative coordinates (group handles positioning)
+    createCornerHandle(group, 0, 0, "handle-top-left", isInstance);
+    createCornerHandle(group, width, 0, "handle-top-right", isInstance);
+    createCornerHandle(group, width, height, "handle-bottom-right", isInstance);
+    createCornerHandle(group, 0, height, "handle-bottom-left", isInstance);
+};
+
+function getScreenBounds(element) {
+    const rect = element.getBoundingClientRect();
     return {
-        top,
-        left,
-        width,
-        height,
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
     };
 }
 
-const createHighlightFrame = (node, nodeProvider) => {
-    const { top, left, width, height } = getElementBounds(node, nodeProvider);
-    const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
-    document.body.style.setProperty("--zoom", zoom.toString());
-    document.body.style.setProperty("--stroke-width", (2 / zoom).toFixed(3));
-    const frame = document.createElement("div");
-    frame.classList.add("highlight-frame");
-    frame.style.setProperty("--frame-top", `${top}px`);
-    frame.style.setProperty("--frame-left", `${left}px`);
-    frame.style.setProperty("--frame-width", `${width}px`);
-    frame.style.setProperty("--frame-height", `${height}px`);
-    // Create SVG overlay for outline
+const getComponentColor$1 = () => {
+    return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
+};
+const createHighlightFrame = (node, isInstance = false) => {
+    const { top, left, width, height } = getScreenBounds(node);
+    // Create fixed SVG overlay
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    svg.classList.add("highlight-frame-svg");
+    svg.classList.add("highlight-frame-overlay");
+    if (isInstance) {
+        svg.classList.add("is-instance");
+    }
+    svg.setAttribute("data-node-id", node.getAttribute("data-node-id") || "");
+    // Set fixed positioning
+    svg.style.position = "fixed";
+    svg.style.top = "0";
+    svg.style.left = "0";
+    svg.style.width = "100vw";
+    svg.style.height = "100vh";
+    svg.style.pointerEvents = "none";
+    svg.style.zIndex = "5000";
+    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+    const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+    svg.setAttribute("width", viewportWidth.toString());
+    svg.setAttribute("height", viewportHeight.toString());
+    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.classList.add("highlight-frame-group");
+    group.setAttribute("transform", `translate(${left}, ${top})`);
     const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
     rect.setAttribute("x", "0");
     rect.setAttribute("y", "0");
-    rect.setAttribute("width", "100%");
-    rect.setAttribute("height", "100%");
+    rect.setAttribute("width", width.toString());
+    rect.setAttribute("height", height.toString());
+    rect.setAttribute("vector-effect", "non-scaling-stroke");
     rect.classList.add("highlight-frame-rect");
-    svg.appendChild(rect);
-    frame.appendChild(svg);
-    const highlightFrame = frame;
-    return highlightFrame;
+    // Apply instance color if it's an instance
+    if (isInstance) {
+        rect.setAttribute("stroke", getComponentColor$1());
+    }
+    group.appendChild(rect);
+    createCornerHandles(group, width, height, isInstance);
+    svg.appendChild(group);
+    document.body.appendChild(svg);
+    return svg;
 };
 
 const createTagLabel = (node, nodeTools) => {
@@ -301,58 +322,177 @@ const createTagLabel = (node, nodeTools) => {
     nodeTools.appendChild(tagLabel);
 };
 
-const createToolsContainer = (node, highlightFrame) => {
+const createToolsContainer = (node, highlightFrame, isInstance = false) => {
     const nodeTools = document.createElement("div");
     nodeTools.className = "node-tools";
+    if (isInstance) {
+        nodeTools.classList.add("is-instance");
+    }
     highlightFrame.appendChild(nodeTools);
     createTagLabel(node, nodeTools);
 };
 
-const highlightNode = (node, nodeProvider) => {
+function getHighlightFrameElement() {
+    return document.body.querySelector(".highlight-frame-overlay");
+}
+
+const highlightNode = (node) => {
     if (!node)
         return;
-    const existingHighlightFrame = getHighlightFrameElement(nodeProvider);
+    const existingHighlightFrame = getHighlightFrameElement();
+    const existingToolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
     if (existingHighlightFrame) {
         existingHighlightFrame.remove();
     }
-    const highlightFrame = createHighlightFrame(node, nodeProvider);
+    if (existingToolsWrapper) {
+        existingToolsWrapper.remove();
+    }
+    const isInstance = isComponentInstance(node);
+    const highlightFrame = createHighlightFrame(node, isInstance);
     if (node.contentEditable === "true") {
         highlightFrame.classList.add("is-editable");
     }
-    createToolsContainer(node, highlightFrame);
-    nodeProvider.appendChild(highlightFrame);
+    // Create tools wrapper with tag label - centered using translateX(-50%)
+    const { left, top, height } = getScreenBounds(node);
+    const bottomY = top + height;
+    const toolsWrapper = document.createElement("div");
+    toolsWrapper.classList.add("highlight-frame-tools-wrapper");
+    if (isInstance) {
+        toolsWrapper.classList.add("is-instance");
+    }
+    toolsWrapper.style.position = "fixed";
+    toolsWrapper.style.left = `${left}px`;
+    toolsWrapper.style.top = `${bottomY}px`;
+    toolsWrapper.style.transform = "translateX(-50%)";
+    toolsWrapper.style.transformOrigin = "center";
+    toolsWrapper.style.pointerEvents = "none";
+    toolsWrapper.style.zIndex = "5000"; // Match --z-index-highlight (below canvas rulers)
+    createToolsContainer(node, toolsWrapper, isInstance);
+    document.body.appendChild(toolsWrapper);
 };
 
+const getComponentColor = () => {
+    return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
+};
 const refreshHighlightFrame = (node, nodeProvider) => {
-    const frame = getHighlightFrameElement(nodeProvider);
-    const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
-    console.log("1. refreshHighlightFrame", node);
+    // Batch all DOM reads first (single layout pass)
+    const frame = getHighlightFrameElement();
     if (!frame)
         return;
-    if (zoom >= 0.3) {
+    const isInstance = isComponentInstance(node);
+    // 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;
+    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");
+    }
+    const group = frame.querySelector(".highlight-frame-group");
+    if (!group)
+        return;
+    const rect = group.querySelector("rect");
+    if (!rect)
+        return;
+    // Update instance color
+    if (isInstance) {
+        rect.setAttribute("stroke", getComponentColor());
+    }
+    else {
+        rect.removeAttribute("stroke"); // Use CSS default
+    }
+    const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
+    const nodeTools = toolsWrapper?.querySelector(".node-tools");
+    const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+    const bounds = getScreenBounds(node);
+    // Calculate all values before any DOM writes
+    const { top, left, width, height } = bounds;
+    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");
+        }
+    }
+    if (nodeTools) {
+        if (isInstance) {
+            nodeTools.classList.add("is-instance");
+        }
+        else {
+            nodeTools.classList.remove("is-instance");
+        }
+    }
+    // Batch all DOM writes (single paint pass)
+    // Update group transform to move entire group (rect + handles) at once
+    group.setAttribute("transform", `translate(${left}, ${top})`);
+    // Update rect dimensions (position is handled by group transform)
+    rect.setAttribute("width", width.toString());
+    rect.setAttribute("height", height.toString());
+    // Update corner handles positions (relative to group, so only width/height matter)
+    const topLeft = group.querySelector(".handle-top-left");
+    const topRight = group.querySelector(".handle-top-right");
+    const bottomRight = group.querySelector(".handle-bottom-right");
+    const bottomLeft = group.querySelector(".handle-bottom-left");
+    const HANDLE_SIZE = 6;
+    // Update handle colors and positions
+    const handles = [topLeft, topRight, bottomRight, bottomLeft];
+    handles.forEach((handle) => {
+        if (handle) {
+            if (isInstance) {
+                handle.setAttribute("stroke", getComponentColor());
+            }
+            else {
+                handle.removeAttribute("stroke"); // Use CSS default
+            }
+        }
+    });
+    if (topLeft) {
+        topLeft.setAttribute("x", (-HANDLE_SIZE / 2).toString());
+        topLeft.setAttribute("y", (-HANDLE_SIZE / 2).toString());
+    }
+    if (topRight) {
+        topRight.setAttribute("x", (width - HANDLE_SIZE / 2).toString());
+        topRight.setAttribute("y", (-HANDLE_SIZE / 2).toString());
+    }
+    if (bottomRight) {
+        bottomRight.setAttribute("x", (width - HANDLE_SIZE / 2).toString());
+        bottomRight.setAttribute("y", (height - HANDLE_SIZE / 2).toString());
+    }
+    if (bottomLeft) {
+        bottomLeft.setAttribute("x", (-HANDLE_SIZE / 2).toString());
+        bottomLeft.setAttribute("y", (height - HANDLE_SIZE / 2).toString());
+    }
+    // Update tools wrapper position (use calculated bounds, not rect attributes)
+    if (toolsWrapper) {
+        toolsWrapper.style.left = `${left}px`;
+        toolsWrapper.style.top = `${bottomY}px`;
+    }
+    if (zoom <= 10) {
         nodeProvider.style.setProperty("--tool-opacity", `1`);
     }
     else {
         nodeProvider.style.setProperty("--tool-opacity", `0`);
     }
-    const { top, left, width, height } = getElementBounds(node, nodeProvider);
-    frame.style.setProperty("--frame-top", `${top}px`);
-    frame.style.setProperty("--frame-left", `${left}px`);
-    frame.style.setProperty("--frame-width", `${width}px`);
-    frame.style.setProperty("--frame-height", `${height}px`);
-    console.log("2. refreshHighlightFrame", top, left, width, height);
 };
 
-const updateHighlightFrameVisibility = (node, nodeProvider) => {
-    const frame = getHighlightFrameElement(nodeProvider);
+const updateHighlightFrameVisibility = (node) => {
+    const frame = getHighlightFrameElement();
     if (!frame)
         return;
     const hasHiddenClass = node.classList.contains("hidden") || node.classList.contains("select-none");
     const displayValue = hasHiddenClass ? "none" : "";
     frame.style.display = displayValue;
-    const tagLabel = frame.querySelector(".tag-label");
-    if (tagLabel) {
-        tagLabel.style.display = displayValue;
+    const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
+    if (toolsWrapper) {
+        toolsWrapper.style.display = displayValue;
     }
 };
 
@@ -492,21 +632,23 @@ const nodeText = () => {
 const createNodeTools = (element) => {
     const nodeProvider = element;
     let resizeObserver = null;
-    let nodeResizeObserver = null;
     let mutationObserver = null;
     let selectedNode = null;
     const text = nodeText();
-    const throttledFrameRefresh = withDoubleRAF(refreshHighlightFrame);
+    // Combined throttled function for refresh + visibility update
+    const throttledRefreshAndVisibility = withRAFThrottle((node, nodeProvider) => {
+        refreshHighlightFrame(node, nodeProvider);
+        updateHighlightFrameVisibility(node);
+    });
     const handleEscape = () => {
         if (text.isEditing()) {
             text.blurEditMode();
         }
         if (selectedNode) {
             if (nodeProvider) {
-                clearHighlightFrame(nodeProvider);
+                clearHighlightFrame();
                 selectedNode = null;
                 resizeObserver?.disconnect();
-                nodeResizeObserver?.disconnect();
                 mutationObserver?.disconnect();
             }
         }
@@ -522,31 +664,31 @@ const createNodeTools = (element) => {
             }
         }
         resizeObserver?.disconnect();
-        nodeResizeObserver?.disconnect();
         mutationObserver?.disconnect();
         if (node && nodeProvider) {
             text.enableEditMode(node, nodeProvider);
-            resizeObserver = connectResizeObserver(nodeProvider, () => {
-                throttledFrameRefresh(node, nodeProvider);
-            });
             mutationObserver = new MutationObserver(() => {
-                throttledFrameRefresh(node, nodeProvider);
-                updateHighlightFrameVisibility(node, nodeProvider);
+                // throttledRefreshAndVisibility(node, nodeProvider);
+                console.log("mutationObserver", node);
+                refreshHighlightFrame(node, nodeProvider);
+                updateHighlightFrameVisibility(node);
             });
             mutationObserver.observe(node, {
                 attributes: true,
                 characterData: true,
             });
-            nodeResizeObserver = connectResizeObserver(node, () => {
-                throttledFrameRefresh(node, nodeProvider);
-                updateHighlightFrameVisibility(node, nodeProvider);
+            resizeObserver = connectResizeObserver(node, () => {
+                // throttledRefreshAndVisibility(node, nodeProvider);
+                console.log("resizeObserver", node);
+                refreshHighlightFrame(node, nodeProvider);
+                updateHighlightFrameVisibility(node);
             });
         }
         selectedNode = node;
         sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
-        highlightNode(node, nodeProvider) ?? null;
+        highlightNode(node) ?? null;
         if (node && nodeProvider) {
-            updateHighlightFrameVisibility(node, nodeProvider);
+            updateHighlightFrameVisibility(node);
         }
     };
     // Setup event listener
@@ -554,22 +696,25 @@ const createNodeTools = (element) => {
     const cleanup = () => {
         removeListeners();
         resizeObserver?.disconnect();
-        nodeResizeObserver?.disconnect();
         mutationObserver?.disconnect();
         text.blurEditMode();
-        throttledFrameRefresh.cleanup();
+        throttledRefreshAndVisibility.cleanup();
     };
     const nodeTools = {
         selectNode,
         getSelectedNode: () => selectedNode,
         refreshHighlightFrame: () => {
-            throttledFrameRefresh(selectedNode, nodeProvider);
+            if (selectedNode && nodeProvider) {
+                // Call directly (not throttled) since this is typically called from already-throttled contexts
+                // to avoid double RAF
+                refreshHighlightFrame(selectedNode, nodeProvider);
+                updateHighlightFrameVisibility(selectedNode);
+            }
         },
         clearSelectedNode: () => {
-            clearHighlightFrame(nodeProvider);
+            clearHighlightFrame();
             selectedNode = null;
             resizeObserver?.disconnect();
-            nodeResizeObserver?.disconnect();
             mutationObserver?.disconnect();
         },
         getEditableNode: () => text.getEditableNode(),