@node-edit-utils/core 2.2.2 → 2.2.3

package/dist/lib/canvas/createCanvasObserver.d.ts

@@ -1,2 +1,2 @@
 import type { CanvasObserver } from "./types";
-export declare function createCanvasObserver(): CanvasObserver;
+export declare function createCanvasObserver(canvasName?: string): CanvasObserver;

package/dist/lib/canvas/disableCanvasKeyboard.d.ts

@@ -1 +1 @@
-export declare const disableCanvasKeyboard: () => void;
+export declare const disableCanvasKeyboard: (canvasName?: string) => void;

package/dist/lib/canvas/disableCanvasTextMode.d.ts

@@ -1 +1 @@
-export declare const disableCanvasTextMode: () => void;
+export declare const disableCanvasTextMode: (canvasName?: string) => void;

package/dist/lib/canvas/enableCanvasKeyboard.d.ts

@@ -1 +1 @@
-export declare const enableCanvasKeyboard: () => void;
+export declare const enableCanvasKeyboard: (canvasName?: string) => void;

package/dist/lib/canvas/enableCanvasTextMode.d.ts

@@ -1 +1 @@
-export declare const enableCanvasTextMode: () => void;
+export declare const enableCanvasTextMode: (canvasName?: string) => void;

package/dist/lib/canvas/helpers/applyCanvasState.d.ts

@@ -1 +1 @@
-export declare const applyCanvasState: () => void;
+export declare const applyCanvasState: (canvasName?: string) => void;

package/dist/lib/canvas/helpers/getCanvasWindowValue.d.ts

@@ -1 +1 @@
-export declare const getCanvasWindowValue: (path: string[]) => any;
+export declare const getCanvasWindowValue: (path: string[], canvasName?: string) => any;

package/dist/lib/node-tools/createNodeTools.d.ts

@@ -1,2 +1,2 @@
 import type { NodeTools } from "./types";
-export declare const createNodeTools: (element: HTMLElement | null) => NodeTools;
+export declare const createNodeTools: (element: HTMLElement | null, canvasName?: string) => NodeTools;

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

@@ -1,4 +1,4 @@
-export declare function getElementBounds(element: Element, nodeProvider: HTMLElement): {
+export declare function getElementBounds(element: Element, nodeProvider: HTMLElement, canvasName?: string): {
     top: number;
     left: number;
     width: number;

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

@@ -1 +1 @@
-export declare const refreshHighlightFrame: (node: HTMLElement, nodeProvider: HTMLElement) => void;
+export declare const refreshHighlightFrame: (node: HTMLElement, nodeProvider: HTMLElement, canvasName?: string) => void;

package/dist/lib/node-tools/text/events/setupMutationObserver.d.ts

@@ -1 +1 @@
-export declare const setupMutationObserver: (node: HTMLElement, nodeProvider: HTMLElement) => (() => void) | undefined;
+export declare const setupMutationObserver: (node: HTMLElement, nodeProvider: HTMLElement, canvasName?: string) => (() => void) | undefined;

package/dist/lib/node-tools/text/events/setupNodeListeners.d.ts

@@ -1 +1 @@
-export declare const setupNodeListeners: (node: HTMLElement, nodeProvider: HTMLElement | null, blur: () => void) => (() => void);
+export declare const setupNodeListeners: (node: HTMLElement, nodeProvider: HTMLElement | null, blur: () => void, canvasName?: string) => (() => void);

package/dist/lib/node-tools/text/nodeText.d.ts

@@ -1,2 +1,2 @@
 import type { NodeText } from "./types";
-export declare const nodeText: () => NodeText;
+export declare const nodeText: (canvasName?: string) => NodeText;

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

@@ -1,25 +1,25 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.2.2
+ * @version 2.2.3
  */
 'use strict';
 
-const getCanvasWindowValue = (path) => {
+const getCanvasWindowValue = (path, canvasName = "canvas") => {
     // biome-ignore lint/suspicious/noExplicitAny: global window extension
-    const canvas = window.canvas;
+    const canvas = window[canvasName];
     return path.reduce((obj, prop) => obj?.[prop], canvas);
 };
 
-const applyCanvasState = () => {
-    const zoom = getCanvasWindowValue(["zoom", "current"]);
+const applyCanvasState = (canvasName = "canvas") => {
+    const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
     document.body.style.setProperty("--zoom", zoom.toFixed(5));
     document.body.style.setProperty("--stroke-width", (2 / zoom).toFixed(3));
     document.body.dataset.zoom = zoom.toFixed(5);
     document.body.dataset.strokeWidth = (2 / zoom).toFixed(3);
 };
 
-function createCanvasObserver() {
+function createCanvasObserver(canvasName = "canvas") {
     const transformLayer = document.querySelector(".transform-layer");
     if (!transformLayer) {
         return {
@@ -27,7 +27,7 @@ function createCanvasObserver() {
         };
     }
     const observer = new MutationObserver(() => {
-        applyCanvasState();
+        applyCanvasState(canvasName);
         // Refresh highlight frame (throttled via withRAFThrottle)
         // biome-ignore lint/suspicious/noExplicitAny: global window extension
         const nodeTools = window.nodeTools;
@@ -374,7 +374,7 @@ const highlightNode = (node) => {
 const getComponentColor = () => {
     return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
 };
-const refreshHighlightFrame = (node, nodeProvider) => {
+const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
     // Batch all DOM reads first (single layout pass)
     const frame = getHighlightFrameElement();
     if (!frame)
@@ -408,7 +408,7 @@ const refreshHighlightFrame = (node, nodeProvider) => {
     }
     const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
     const nodeTools = toolsWrapper?.querySelector(".node-tools");
-    const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+    const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
     const bounds = getScreenBounds(node);
     // Calculate all values before any DOM writes
     const { top, left, width, height } = bounds;
@@ -496,13 +496,13 @@ const updateHighlightFrameVisibility = (node) => {
     }
 };
 
-const disableCanvasTextMode = () => {
-    const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"]);
+const disableCanvasTextMode = (canvasName = "canvas") => {
+    const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"], canvasName);
     disableTextEditMode?.();
 };
 
-const enableCanvasTextMode = () => {
-    const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"]);
+const enableCanvasTextMode = (canvasName = "canvas") => {
+    const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"], canvasName);
     enableTextEditMode?.();
 };
 
@@ -547,20 +547,20 @@ const connectMutationObserver = (element, handler) => {
     return mutationObserver;
 };
 
-const setupMutationObserver = (node, nodeProvider) => {
+const setupMutationObserver = (node, nodeProvider, canvasName = "canvas") => {
     const mutationObserver = connectMutationObserver(node, () => {
-        refreshHighlightFrame(node, nodeProvider);
+        refreshHighlightFrame(node, nodeProvider, canvasName);
     });
     return () => mutationObserver.disconnect();
 };
 
-const setupNodeListeners = (node, nodeProvider, blur) => {
+const setupNodeListeners = (node, nodeProvider, blur, canvasName = "canvas") => {
     if (!nodeProvider) {
         return () => { };
     }
     node.addEventListener("blur", blur);
     const keydownCleanup = setupKeydownHandler(node);
-    const mutationCleanup = setupMutationObserver(node, nodeProvider);
+    const mutationCleanup = setupMutationObserver(node, nodeProvider, canvasName);
     return () => {
         node.removeEventListener("blur", blur);
         keydownCleanup();
@@ -584,7 +584,7 @@ const makeNodeNonEditable = (node) => {
     node.style.outline = "none";
 };
 
-const nodeText = () => {
+const nodeText = (canvasName = "canvas") => {
     let editableNode = null;
     let blurInProgress = false;
     let cleanup = null;
@@ -599,8 +599,8 @@ const nodeText = () => {
         if (editable) {
             editableNode = node;
             makeNodeEditable(node);
-            enableCanvasTextMode();
-            cleanup = setupNodeListeners(node, nodeProvider, blurEditMode);
+            enableCanvasTextMode(canvasName);
+            cleanup = setupNodeListeners(node, nodeProvider, blurEditMode, canvasName);
         }
     };
     const getEditableNode = () => {
@@ -616,7 +616,7 @@ const nodeText = () => {
         blurInProgress = true;
         const nodeToCleanup = editableNode;
         makeNodeNonEditable(nodeToCleanup);
-        disableCanvasTextMode();
+        disableCanvasTextMode(canvasName);
         cleanup?.();
         editableNode = null;
         blurInProgress = false;
@@ -629,15 +629,15 @@ const nodeText = () => {
     };
 };
 
-const createNodeTools = (element) => {
+const createNodeTools = (element, canvasName = "canvas") => {
     const nodeProvider = element;
     let resizeObserver = null;
     let mutationObserver = null;
     let selectedNode = null;
-    const text = nodeText();
+    const text = nodeText(canvasName);
     // Combined throttled function for refresh + visibility update
     const throttledRefreshAndVisibility = withRAFThrottle((node, nodeProvider) => {
-        refreshHighlightFrame(node, nodeProvider);
+        refreshHighlightFrame(node, nodeProvider, canvasName);
         updateHighlightFrameVisibility(node);
     });
     const handleEscape = () => {
@@ -670,7 +670,7 @@ const createNodeTools = (element) => {
             mutationObserver = new MutationObserver(() => {
                 // throttledRefreshAndVisibility(node, nodeProvider);
                 console.log("mutationObserver", node);
-                refreshHighlightFrame(node, nodeProvider);
+                refreshHighlightFrame(node, nodeProvider, canvasName);
                 updateHighlightFrameVisibility(node);
             });
             mutationObserver.observe(node, {
@@ -680,7 +680,7 @@ const createNodeTools = (element) => {
             resizeObserver = connectResizeObserver(node, () => {
                 // throttledRefreshAndVisibility(node, nodeProvider);
                 console.log("resizeObserver", node);
-                refreshHighlightFrame(node, nodeProvider);
+                refreshHighlightFrame(node, nodeProvider, canvasName);
                 updateHighlightFrameVisibility(node);
             });
         }
@@ -707,7 +707,7 @@ const createNodeTools = (element) => {
             if (selectedNode && nodeProvider) {
                 // Call directly (not throttled) since this is typically called from already-throttled contexts
                 // to avoid double RAF
-                refreshHighlightFrame(selectedNode, nodeProvider);
+                refreshHighlightFrame(selectedNode, nodeProvider, canvasName);
                 updateHighlightFrameVisibility(selectedNode);
             }
         },

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

@@ -1,23 +1,23 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.2.2
+ * @version 2.2.3
  */
-const getCanvasWindowValue = (path) => {
+const getCanvasWindowValue = (path, canvasName = "canvas") => {
     // biome-ignore lint/suspicious/noExplicitAny: global window extension
-    const canvas = window.canvas;
+    const canvas = window[canvasName];
     return path.reduce((obj, prop) => obj?.[prop], canvas);
 };
 
-const applyCanvasState = () => {
-    const zoom = getCanvasWindowValue(["zoom", "current"]);
+const applyCanvasState = (canvasName = "canvas") => {
+    const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
     document.body.style.setProperty("--zoom", zoom.toFixed(5));
     document.body.style.setProperty("--stroke-width", (2 / zoom).toFixed(3));
     document.body.dataset.zoom = zoom.toFixed(5);
     document.body.dataset.strokeWidth = (2 / zoom).toFixed(3);
 };
 
-function createCanvasObserver() {
+function createCanvasObserver(canvasName = "canvas") {
     const transformLayer = document.querySelector(".transform-layer");
     if (!transformLayer) {
         return {
@@ -25,7 +25,7 @@ function createCanvasObserver() {
         };
     }
     const observer = new MutationObserver(() => {
-        applyCanvasState();
+        applyCanvasState(canvasName);
         // Refresh highlight frame (throttled via withRAFThrottle)
         // biome-ignore lint/suspicious/noExplicitAny: global window extension
         const nodeTools = window.nodeTools;
@@ -372,7 +372,7 @@ const highlightNode = (node) => {
 const getComponentColor = () => {
     return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
 };
-const refreshHighlightFrame = (node, nodeProvider) => {
+const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
     // Batch all DOM reads first (single layout pass)
     const frame = getHighlightFrameElement();
     if (!frame)
@@ -406,7 +406,7 @@ const refreshHighlightFrame = (node, nodeProvider) => {
     }
     const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
     const nodeTools = toolsWrapper?.querySelector(".node-tools");
-    const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+    const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
     const bounds = getScreenBounds(node);
     // Calculate all values before any DOM writes
     const { top, left, width, height } = bounds;
@@ -494,13 +494,13 @@ const updateHighlightFrameVisibility = (node) => {
     }
 };
 
-const disableCanvasTextMode = () => {
-    const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"]);
+const disableCanvasTextMode = (canvasName = "canvas") => {
+    const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"], canvasName);
     disableTextEditMode?.();
 };
 
-const enableCanvasTextMode = () => {
-    const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"]);
+const enableCanvasTextMode = (canvasName = "canvas") => {
+    const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"], canvasName);
     enableTextEditMode?.();
 };
 
@@ -545,20 +545,20 @@ const connectMutationObserver = (element, handler) => {
     return mutationObserver;
 };
 
-const setupMutationObserver = (node, nodeProvider) => {
+const setupMutationObserver = (node, nodeProvider, canvasName = "canvas") => {
     const mutationObserver = connectMutationObserver(node, () => {
-        refreshHighlightFrame(node, nodeProvider);
+        refreshHighlightFrame(node, nodeProvider, canvasName);
     });
     return () => mutationObserver.disconnect();
 };
 
-const setupNodeListeners = (node, nodeProvider, blur) => {
+const setupNodeListeners = (node, nodeProvider, blur, canvasName = "canvas") => {
     if (!nodeProvider) {
         return () => { };
     }
     node.addEventListener("blur", blur);
     const keydownCleanup = setupKeydownHandler(node);
-    const mutationCleanup = setupMutationObserver(node, nodeProvider);
+    const mutationCleanup = setupMutationObserver(node, nodeProvider, canvasName);
     return () => {
         node.removeEventListener("blur", blur);
         keydownCleanup();
@@ -582,7 +582,7 @@ const makeNodeNonEditable = (node) => {
     node.style.outline = "none";
 };
 
-const nodeText = () => {
+const nodeText = (canvasName = "canvas") => {
     let editableNode = null;
     let blurInProgress = false;
     let cleanup = null;
@@ -597,8 +597,8 @@ const nodeText = () => {
         if (editable) {
             editableNode = node;
             makeNodeEditable(node);
-            enableCanvasTextMode();
-            cleanup = setupNodeListeners(node, nodeProvider, blurEditMode);
+            enableCanvasTextMode(canvasName);
+            cleanup = setupNodeListeners(node, nodeProvider, blurEditMode, canvasName);
         }
     };
     const getEditableNode = () => {
@@ -614,7 +614,7 @@ const nodeText = () => {
         blurInProgress = true;
         const nodeToCleanup = editableNode;
         makeNodeNonEditable(nodeToCleanup);
-        disableCanvasTextMode();
+        disableCanvasTextMode(canvasName);
         cleanup?.();
         editableNode = null;
         blurInProgress = false;
@@ -627,15 +627,15 @@ const nodeText = () => {
     };
 };
 
-const createNodeTools = (element) => {
+const createNodeTools = (element, canvasName = "canvas") => {
     const nodeProvider = element;
     let resizeObserver = null;
     let mutationObserver = null;
     let selectedNode = null;
-    const text = nodeText();
+    const text = nodeText(canvasName);
     // Combined throttled function for refresh + visibility update
     const throttledRefreshAndVisibility = withRAFThrottle((node, nodeProvider) => {
-        refreshHighlightFrame(node, nodeProvider);
+        refreshHighlightFrame(node, nodeProvider, canvasName);
         updateHighlightFrameVisibility(node);
     });
     const handleEscape = () => {
@@ -668,7 +668,7 @@ const createNodeTools = (element) => {
             mutationObserver = new MutationObserver(() => {
                 // throttledRefreshAndVisibility(node, nodeProvider);
                 console.log("mutationObserver", node);
-                refreshHighlightFrame(node, nodeProvider);
+                refreshHighlightFrame(node, nodeProvider, canvasName);
                 updateHighlightFrameVisibility(node);
             });
             mutationObserver.observe(node, {
@@ -678,7 +678,7 @@ const createNodeTools = (element) => {
             resizeObserver = connectResizeObserver(node, () => {
                 // throttledRefreshAndVisibility(node, nodeProvider);
                 console.log("resizeObserver", node);
-                refreshHighlightFrame(node, nodeProvider);
+                refreshHighlightFrame(node, nodeProvider, canvasName);
                 updateHighlightFrameVisibility(node);
             });
         }
@@ -705,7 +705,7 @@ const createNodeTools = (element) => {
             if (selectedNode && nodeProvider) {
                 // Call directly (not throttled) since this is typically called from already-throttled contexts
                 // to avoid double RAF
-                refreshHighlightFrame(selectedNode, nodeProvider);
+                refreshHighlightFrame(selectedNode, nodeProvider, canvasName);
                 updateHighlightFrameVisibility(selectedNode);
             }
         },

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

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.2.2
+ * @version 2.2.3
  */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
@@ -9,21 +9,21 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MarkupCanvas = {}));
 })(this, (function (exports) { 'use strict';
 
-    const getCanvasWindowValue = (path) => {
+    const getCanvasWindowValue = (path, canvasName = "canvas") => {
         // biome-ignore lint/suspicious/noExplicitAny: global window extension
-        const canvas = window.canvas;
+        const canvas = window[canvasName];
         return path.reduce((obj, prop) => obj?.[prop], canvas);
     };
 
-    const applyCanvasState = () => {
-        const zoom = getCanvasWindowValue(["zoom", "current"]);
+    const applyCanvasState = (canvasName = "canvas") => {
+        const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
         document.body.style.setProperty("--zoom", zoom.toFixed(5));
         document.body.style.setProperty("--stroke-width", (2 / zoom).toFixed(3));
         document.body.dataset.zoom = zoom.toFixed(5);
         document.body.dataset.strokeWidth = (2 / zoom).toFixed(3);
     };
 
-    function createCanvasObserver() {
+    function createCanvasObserver(canvasName = "canvas") {
         const transformLayer = document.querySelector(".transform-layer");
         if (!transformLayer) {
             return {
@@ -31,7 +31,7 @@
             };
         }
         const observer = new MutationObserver(() => {
-            applyCanvasState();
+            applyCanvasState(canvasName);
             // Refresh highlight frame (throttled via withRAFThrottle)
             // biome-ignore lint/suspicious/noExplicitAny: global window extension
             const nodeTools = window.nodeTools;
@@ -378,7 +378,7 @@
     const getComponentColor = () => {
         return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
     };
-    const refreshHighlightFrame = (node, nodeProvider) => {
+    const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
         // Batch all DOM reads first (single layout pass)
         const frame = getHighlightFrameElement();
         if (!frame)
@@ -412,7 +412,7 @@
         }
         const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
         const nodeTools = toolsWrapper?.querySelector(".node-tools");
-        const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+        const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
         const bounds = getScreenBounds(node);
         // Calculate all values before any DOM writes
         const { top, left, width, height } = bounds;
@@ -500,13 +500,13 @@
         }
     };
 
-    const disableCanvasTextMode = () => {
-        const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"]);
+    const disableCanvasTextMode = (canvasName = "canvas") => {
+        const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"], canvasName);
         disableTextEditMode?.();
     };
 
-    const enableCanvasTextMode = () => {
-        const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"]);
+    const enableCanvasTextMode = (canvasName = "canvas") => {
+        const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"], canvasName);
         enableTextEditMode?.();
     };
 
@@ -551,20 +551,20 @@
         return mutationObserver;
     };
 
-    const setupMutationObserver = (node, nodeProvider) => {
+    const setupMutationObserver = (node, nodeProvider, canvasName = "canvas") => {
         const mutationObserver = connectMutationObserver(node, () => {
-            refreshHighlightFrame(node, nodeProvider);
+            refreshHighlightFrame(node, nodeProvider, canvasName);
         });
         return () => mutationObserver.disconnect();
     };
 
-    const setupNodeListeners = (node, nodeProvider, blur) => {
+    const setupNodeListeners = (node, nodeProvider, blur, canvasName = "canvas") => {
         if (!nodeProvider) {
             return () => { };
         }
         node.addEventListener("blur", blur);
         const keydownCleanup = setupKeydownHandler(node);
-        const mutationCleanup = setupMutationObserver(node, nodeProvider);
+        const mutationCleanup = setupMutationObserver(node, nodeProvider, canvasName);
         return () => {
             node.removeEventListener("blur", blur);
             keydownCleanup();
@@ -588,7 +588,7 @@
         node.style.outline = "none";
     };
 
-    const nodeText = () => {
+    const nodeText = (canvasName = "canvas") => {
         let editableNode = null;
         let blurInProgress = false;
         let cleanup = null;
@@ -603,8 +603,8 @@
             if (editable) {
                 editableNode = node;
                 makeNodeEditable(node);
-                enableCanvasTextMode();
-                cleanup = setupNodeListeners(node, nodeProvider, blurEditMode);
+                enableCanvasTextMode(canvasName);
+                cleanup = setupNodeListeners(node, nodeProvider, blurEditMode, canvasName);
             }
         };
         const getEditableNode = () => {
@@ -620,7 +620,7 @@
             blurInProgress = true;
             const nodeToCleanup = editableNode;
             makeNodeNonEditable(nodeToCleanup);
-            disableCanvasTextMode();
+            disableCanvasTextMode(canvasName);
             cleanup?.();
             editableNode = null;
             blurInProgress = false;
@@ -633,15 +633,15 @@
         };
     };
 
-    const createNodeTools = (element) => {
+    const createNodeTools = (element, canvasName = "canvas") => {
         const nodeProvider = element;
         let resizeObserver = null;
         let mutationObserver = null;
         let selectedNode = null;
-        const text = nodeText();
+        const text = nodeText(canvasName);
         // Combined throttled function for refresh + visibility update
         const throttledRefreshAndVisibility = withRAFThrottle((node, nodeProvider) => {
-            refreshHighlightFrame(node, nodeProvider);
+            refreshHighlightFrame(node, nodeProvider, canvasName);
             updateHighlightFrameVisibility(node);
         });
         const handleEscape = () => {
@@ -674,7 +674,7 @@
                 mutationObserver = new MutationObserver(() => {
                     // throttledRefreshAndVisibility(node, nodeProvider);
                     console.log("mutationObserver", node);
-                    refreshHighlightFrame(node, nodeProvider);
+                    refreshHighlightFrame(node, nodeProvider, canvasName);
                     updateHighlightFrameVisibility(node);
                 });
                 mutationObserver.observe(node, {
@@ -684,7 +684,7 @@
                 resizeObserver = connectResizeObserver(node, () => {
                     // throttledRefreshAndVisibility(node, nodeProvider);
                     console.log("resizeObserver", node);
-                    refreshHighlightFrame(node, nodeProvider);
+                    refreshHighlightFrame(node, nodeProvider, canvasName);
                     updateHighlightFrameVisibility(node);
                 });
             }
@@ -711,7 +711,7 @@
                 if (selectedNode && nodeProvider) {
                     // Call directly (not throttled) since this is typically called from already-throttled contexts
                     // to avoid double RAF
-                    refreshHighlightFrame(selectedNode, nodeProvider);
+                    refreshHighlightFrame(selectedNode, nodeProvider, canvasName);
                     updateHighlightFrameVisibility(selectedNode);
                 }
             },

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

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).MarkupCanvas={})}(this,function(e){"use strict";const t=e=>{const t=window.canvas;return e.reduce((e,t)=>e?.[t],t)};function n(e){let t=null,n=null;const o=(...o)=>{n=o,null===t&&(t=requestAnimationFrame(()=>{n&&e(...n),t=null,n=null}))};return o.cleanup=()=>{null!==t&&(cancelAnimationFrame(t),t=null,n=null)},o}const o=()=>{const e=document.body.querySelector(".highlight-frame-overlay");e&&e.remove();const t=document.body.querySelector(".highlight-frame-tools-wrapper");t&&t.remove()},r=["path","rect","circle","ellipse","polygon","line","polyline","text","text-noci"];let i=[],s=0;const l=(e,t)=>{let n=null;const o=e.clientX,l=e.clientY,a=e.metaKey||e.ctrlKey,d=((e,t)=>{const n=document.elementsFromPoint(e,t);return Array.from(n).reduce((e,t)=>e.found?e:"node-provider"===t.getAttribute("data-role")?(e.found=!0,e):(e.elements.push(t),e),{elements:[],found:!1}).elements})(o,l).filter(e=>!r.includes(e.tagName.toLowerCase())&&!e.classList.contains("select-none")&&!(e=>{let t=e.parentElement;for(;t;){if("true"===t.getAttribute("data-instance"))return!0;if("node-provider"===t.getAttribute("data-role"))break;t=t.parentElement}return!1})(e));if(t&&d.includes(t))return t;if(a)return i=[],n=d[0],n;var c,u;u=d,(c=i).length===u.length&&c.every((e,t)=>e===u[t])?s<=d.length&&s++:s=0;return n=d[d.length-1-s],i=d,n},a=(e,t,n,r)=>{const i=e=>{((e,t)=>{if("application"===e.data.source&&"selectedNodeChanged"===e.data.action){const o=e.data.data,r=document.querySelector(`[data-node-id="${o}"]`);if(n=r,n?.classList.contains("select-none"))return void t?.(null);r&&t?.(r)}var n})(e,t)},s=n=>{((e,t,n,r)=>{if(e.preventDefault(),e.stopPropagation(),t&&!t.contains(e.target))return o(),void r(null);r(l(e,n))})(n,e,r(),t)},a=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),n?.())};return window.addEventListener("message",i),document.addEventListener("click",s),document.addEventListener("keydown",a),()=>{window.removeEventListener("message",i),document.removeEventListener("click",s),document.removeEventListener("keydown",a)}},d=e=>"true"===e.getAttribute("data-instance"),c=(e,t,n,o,r=!1)=>{const i=document.createElementNS("http://www.w3.org/2000/svg","rect");return i.setAttribute("x",(t-3).toString()),i.setAttribute("y",(n-3).toString()),i.setAttribute("width",6..toString()),i.setAttribute("height",6..toString()),i.setAttribute("vector-effect","non-scaling-stroke"),i.classList.add("highlight-frame-handle",o),r&&i.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)"),e.appendChild(i),i};function u(e){const t=e.getBoundingClientRect();return{top:t.top,left:t.left,width:t.width,height:t.height}}const m=(e,t=!1)=>{const{top:n,left:o,width:r,height:i}=u(e),s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.classList.add("highlight-frame-overlay"),t&&s.classList.add("is-instance"),s.setAttribute("data-node-id",e.getAttribute("data-node-id")||""),s.style.position="fixed",s.style.top="0",s.style.left="0",s.style.width="100vw",s.style.height="100vh",s.style.pointerEvents="none",s.style.zIndex="5000";const l=document.documentElement.clientWidth||window.innerWidth,a=document.documentElement.clientHeight||window.innerHeight;s.setAttribute("width",l.toString()),s.setAttribute("height",a.toString());const d=document.createElementNS("http://www.w3.org/2000/svg","g");d.classList.add("highlight-frame-group"),d.setAttribute("transform",`translate(${o}, ${n})`);const m=document.createElementNS("http://www.w3.org/2000/svg","rect");return m.setAttribute("x","0"),m.setAttribute("y","0"),m.setAttribute("width",r.toString()),m.setAttribute("height",i.toString()),m.setAttribute("vector-effect","non-scaling-stroke"),m.classList.add("highlight-frame-rect"),t&&m.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)"),d.appendChild(m),((e,t,n,o=!1)=>{c(e,0,0,"handle-top-left",o),c(e,t,0,"handle-top-right",o),c(e,t,n,"handle-bottom-right",o),c(e,0,n,"handle-bottom-left",o)})(d,r,i,t),s.appendChild(d),document.body.appendChild(s),s},h=(e,t,n=!1)=>{const o=document.createElement("div");o.className="node-tools",n&&o.classList.add("is-instance"),t.appendChild(o),((e,t)=>{const n=document.createElement("div");n.className="tag-label",n.textContent=e.tagName.toLowerCase(),t.appendChild(n)})(e,o)};function g(){return document.body.querySelector(".highlight-frame-overlay")}const p=()=>getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)",b=(e,n)=>{const o=g();if(!o)return;const r=d(e),i=document.documentElement.clientWidth||window.innerWidth,s=document.documentElement.clientHeight||window.innerHeight;o.setAttribute("width",i.toString()),o.setAttribute("height",s.toString()),r?o.classList.add("is-instance"):o.classList.remove("is-instance");const l=o.querySelector(".highlight-frame-group");if(!l)return;const a=l.querySelector("rect");if(!a)return;r?a.setAttribute("stroke",p()):a.removeAttribute("stroke");const c=document.body.querySelector(".highlight-frame-tools-wrapper"),m=c?.querySelector(".node-tools"),h=t(["zoom","current"])??1,b=u(e),{top:y,left:v,width:f,height:w}=b,E=y+w;c&&(r?c.classList.add("is-instance"):c.classList.remove("is-instance")),m&&(r?m.classList.add("is-instance"):m.classList.remove("is-instance")),l.setAttribute("transform",`translate(${v}, ${y})`),a.setAttribute("width",f.toString()),a.setAttribute("height",w.toString());const S=l.querySelector(".handle-top-left"),A=l.querySelector(".handle-top-right"),L=l.querySelector(".handle-bottom-right"),x=l.querySelector(".handle-bottom-left");[S,A,L,x].forEach(e=>{e&&(r?e.setAttribute("stroke",p()):e.removeAttribute("stroke"))}),S&&(S.setAttribute("x",(-3).toString()),S.setAttribute("y",(-3).toString())),A&&(A.setAttribute("x",(f-3).toString()),A.setAttribute("y",(-3).toString())),L&&(L.setAttribute("x",(f-3).toString()),L.setAttribute("y",(w-3).toString())),x&&(x.setAttribute("x",(-3).toString()),x.setAttribute("y",(w-3).toString())),c&&(c.style.left=`${v}px`,c.style.top=`${E}px`),h<=10?n.style.setProperty("--tool-opacity","1"):n.style.setProperty("--tool-opacity","0")},y=e=>{const t=g();if(!t)return;const n=e.classList.contains("hidden")||e.classList.contains("select-none")?"none":"";t.style.display=n;const o=document.body.querySelector(".highlight-frame-tools-wrapper");o&&(o.style.display=n)},v=e=>{const t=e=>{"Enter"===e.key&&(e.preventDefault(),e.stopPropagation(),(()=>{const e=window.getSelection();if(e&&e.rangeCount>0){const t=e.getRangeAt(0);t.deleteContents();const n=document.createElement("br");t.insertNode(n),t.setStartAfter(n),t.setEndAfter(n),e.removeAllRanges(),e.addRange(t)}})())};return e.addEventListener("keydown",t),()=>{e.removeEventListener("keydown",t)}},f=(e,t)=>{const n=((e,t)=>{const n=new MutationObserver(e=>{t(e)});return n.observe(e,{subtree:!0,childList:!0,characterData:!0}),n})(e,()=>{b(e,t)});return()=>n.disconnect()},w=()=>{let e=null,n=!1,o=null;const r=()=>{if(n||!e)return;n=!0;var r;(r=e).contentEditable="false",r.classList.remove("is-editable"),r.style.outline="none",(()=>{const e=t(["keyboard","disableTextEditMode"]);e?.()})(),o?.(),e=null,n=!1};return{enableEditMode:(n,i)=>{if(e===n)return;e&&e!==n&&r();const s=(e=>Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim()))(n);s&&(e=n,(e=>{e.contentEditable="true",e.classList.add("is-editable"),e.style.outline="none"})(n),(()=>{const e=t(["keyboard","enableTextEditMode"]);e?.()})(),o=((e,t,n)=>{if(!t)return()=>{};e.addEventListener("blur",n);const o=v(e),r=f(e,t);return()=>{e.removeEventListener("blur",n),o(),r?.()}})(n,i,r))},blurEditMode:r,getEditableNode:()=>e,isEditing:()=>null!==e}},E=320,S=1680,A=[{name:"Mobile",rawValue:390,value:"320px"},{name:"Tablet Portrait",rawValue:768,value:"768px"},{name:"Tablet Landscape",rawValue:1024,value:"1024px"},{name:"Notebook",rawValue:1280,value:"1280px"},{name:"Desktop",rawValue:1680,value:"1680px"}],L=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(E,Math.min(S,n))})(n,(e.clientX-t)/o);return r},x=(e,t)=>{e.style.setProperty("--container-width",`${t}px`),((e,t)=>{e.querySelectorAll(".resize-preset-button").forEach((e,n)=>{n<A.length&&(A[n].rawValue===t?e.classList.add("is-active"):e.classList.remove("is-active"))})})(e,t)};e.createCanvasObserver=function(){const e=document.querySelector(".transform-layer");if(!e)return{disconnect:()=>{}};const n=new MutationObserver(()=>{(()=>{const e=t(["zoom","current"]);document.body.style.setProperty("--zoom",e.toFixed(5)),document.body.style.setProperty("--stroke-width",(2/e).toFixed(3)),document.body.dataset.zoom=e.toFixed(5),document.body.dataset.strokeWidth=(2/e).toFixed(3)})();const e=window.nodeTools;e?.refreshHighlightFrame&&e.refreshHighlightFrame()});return n.observe(e,{attributes:!0,attributeOldValue:!0,subtree:!0,childList:!0}),{disconnect:function(){n.disconnect()}}},e.createNodeTools=e=>{const t=e;let r=null,i=null,s=null;const l=w(),c=n((e,t)=>{b(e,t),y(e)}),p=e=>{if(s!==e){if(l.isEditing()){const t=l.getEditableNode();t&&t!==e&&l.blurEditMode()}var n,o;r?.disconnect(),i?.disconnect(),e&&t&&(l.enableEditMode(e,t),i=new MutationObserver(()=>{console.log("mutationObserver",e),b(e,t),y(e)}),i.observe(e,{attributes:!0,characterData:!0}),r=((e,t)=>{const n=new ResizeObserver(e=>{t(e)});return n.observe(e),n})(e,()=>{console.log("resizeObserver",e),b(e,t),y(e)})),s=e,n="selectedNodeChanged",o=e?.getAttribute("data-node-id")??null,window.parent.postMessage({source:"node-edit-utils",action:n,data:o,timestamp:Date.now()},"*"),(e=>{if(!e)return;const t=g(),n=document.body.querySelector(".highlight-frame-tools-wrapper");t&&t.remove(),n&&n.remove();const o=d(e),r=m(e,o);"true"===e.contentEditable&&r.classList.add("is-editable");const{left:i,top:s,height:l}=u(e),a=s+l,c=document.createElement("div");c.classList.add("highlight-frame-tools-wrapper"),o&&c.classList.add("is-instance"),c.style.position="fixed",c.style.left=`${i}px`,c.style.top=`${a}px`,c.style.transform="translateX(-50%)",c.style.transformOrigin="center",c.style.pointerEvents="none",c.style.zIndex="5000",h(e,c,o),document.body.appendChild(c)})(e),e&&t&&y(e)}},v=a(t,p,()=>{l.isEditing()&&l.blurEditMode(),s&&t&&(o(),s=null,r?.disconnect(),i?.disconnect())},l.getEditableNode),f={selectNode:p,getSelectedNode:()=>s,refreshHighlightFrame:()=>{s&&t&&(b(s,t),y(s))},clearSelectedNode:()=>{o(),s=null,r?.disconnect(),i?.disconnect()},getEditableNode:()=>l.getEditableNode(),cleanup:()=>{v(),r?.disconnect(),i?.disconnect(),l.blurEditMode(),c.cleanup()}};var E,S;return E="nodeTools",S=f,"undefined"!=typeof window&&(window[E]=S),f},e.createViewport=e=>{const t=document.querySelector(".canvas-container"),o=e.querySelector(".resize-handle");o&&o.remove();const r=(e=>{const t=document.createElement("div");return t.className="resize-handle",e.appendChild(t),t})(e);e.style.setProperty("--container-width","400px"),((e,t,n)=>{const o=document.createElement("div");o.className="resize-presets",A.forEach(e=>{const r=document.createElement("button");r.textContent=e.name,r.className="resize-preset-button",r.addEventListener("click",()=>{n(t,e.rawValue)}),o.appendChild(r)}),e.appendChild(o)})(r,e,x);let i=!1,s=0,l=0;const a=n(n=>{if(!i)return;t&&(t.style.cursor="ew-resize");const o=L(n,s,l);x(e,o)}),d=((e,t,n,o,r)=>(e.addEventListener("mousedown",t),document.addEventListener("mousemove",n),document.addEventListener("mouseup",o),window.addEventListener("blur",r),()=>{e.removeEventListener("mousedown",t),document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o),window.removeEventListener("blur",r)}))(r,t=>{t.preventDefault(),t.stopPropagation(),i=!0,s=t.clientX,l=e.offsetWidth},a,e=>{e.preventDefault(),e.stopPropagation(),t&&(t.style.cursor="default"),i=!1},()=>{i=!1});return{setWidth:t=>{x(e,t)},cleanup:()=>{i=!1,a?.cleanup(),d(),r.remove()}}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).MarkupCanvas={})}(this,function(e){"use strict";const t=(e,t="canvas")=>{const n=window[t];return e.reduce((e,t)=>e?.[t],n)};function n(e){let t=null,n=null;const o=(...o)=>{n=o,null===t&&(t=requestAnimationFrame(()=>{n&&e(...n),t=null,n=null}))};return o.cleanup=()=>{null!==t&&(cancelAnimationFrame(t),t=null,n=null)},o}const o=()=>{const e=document.body.querySelector(".highlight-frame-overlay");e&&e.remove();const t=document.body.querySelector(".highlight-frame-tools-wrapper");t&&t.remove()},r=["path","rect","circle","ellipse","polygon","line","polyline","text","text-noci"];let s=[],i=0;const a=(e,t)=>{let n=null;const o=e.clientX,a=e.clientY,l=e.metaKey||e.ctrlKey,d=((e,t)=>{const n=document.elementsFromPoint(e,t);return Array.from(n).reduce((e,t)=>e.found?e:"node-provider"===t.getAttribute("data-role")?(e.found=!0,e):(e.elements.push(t),e),{elements:[],found:!1}).elements})(o,a).filter(e=>!r.includes(e.tagName.toLowerCase())&&!e.classList.contains("select-none")&&!(e=>{let t=e.parentElement;for(;t;){if("true"===t.getAttribute("data-instance"))return!0;if("node-provider"===t.getAttribute("data-role"))break;t=t.parentElement}return!1})(e));if(t&&d.includes(t))return t;if(l)return s=[],n=d[0],n;var c,u;u=d,(c=s).length===u.length&&c.every((e,t)=>e===u[t])?i<=d.length&&i++:i=0;return n=d[d.length-1-i],s=d,n},l=(e,t,n,r)=>{const s=e=>{((e,t)=>{if("application"===e.data.source&&"selectedNodeChanged"===e.data.action){const o=e.data.data,r=document.querySelector(`[data-node-id="${o}"]`);if(n=r,n?.classList.contains("select-none"))return void t?.(null);r&&t?.(r)}var n})(e,t)},i=n=>{((e,t,n,r)=>{if(e.preventDefault(),e.stopPropagation(),t&&!t.contains(e.target))return o(),void r(null);r(a(e,n))})(n,e,r(),t)},l=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),n?.())};return window.addEventListener("message",s),document.addEventListener("click",i),document.addEventListener("keydown",l),()=>{window.removeEventListener("message",s),document.removeEventListener("click",i),document.removeEventListener("keydown",l)}},d=e=>"true"===e.getAttribute("data-instance"),c=(e,t,n,o,r=!1)=>{const s=document.createElementNS("http://www.w3.org/2000/svg","rect");return s.setAttribute("x",(t-3).toString()),s.setAttribute("y",(n-3).toString()),s.setAttribute("width",6..toString()),s.setAttribute("height",6..toString()),s.setAttribute("vector-effect","non-scaling-stroke"),s.classList.add("highlight-frame-handle",o),r&&s.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)"),e.appendChild(s),s};function u(e){const t=e.getBoundingClientRect();return{top:t.top,left:t.left,width:t.width,height:t.height}}const m=(e,t=!1)=>{const{top:n,left:o,width:r,height:s}=u(e),i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.classList.add("highlight-frame-overlay"),t&&i.classList.add("is-instance"),i.setAttribute("data-node-id",e.getAttribute("data-node-id")||""),i.style.position="fixed",i.style.top="0",i.style.left="0",i.style.width="100vw",i.style.height="100vh",i.style.pointerEvents="none",i.style.zIndex="5000";const a=document.documentElement.clientWidth||window.innerWidth,l=document.documentElement.clientHeight||window.innerHeight;i.setAttribute("width",a.toString()),i.setAttribute("height",l.toString());const d=document.createElementNS("http://www.w3.org/2000/svg","g");d.classList.add("highlight-frame-group"),d.setAttribute("transform",`translate(${o}, ${n})`);const m=document.createElementNS("http://www.w3.org/2000/svg","rect");return m.setAttribute("x","0"),m.setAttribute("y","0"),m.setAttribute("width",r.toString()),m.setAttribute("height",s.toString()),m.setAttribute("vector-effect","non-scaling-stroke"),m.classList.add("highlight-frame-rect"),t&&m.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)"),d.appendChild(m),((e,t,n,o=!1)=>{c(e,0,0,"handle-top-left",o),c(e,t,0,"handle-top-right",o),c(e,t,n,"handle-bottom-right",o),c(e,0,n,"handle-bottom-left",o)})(d,r,s,t),i.appendChild(d),document.body.appendChild(i),i},h=(e,t,n=!1)=>{const o=document.createElement("div");o.className="node-tools",n&&o.classList.add("is-instance"),t.appendChild(o),((e,t)=>{const n=document.createElement("div");n.className="tag-label",n.textContent=e.tagName.toLowerCase(),t.appendChild(n)})(e,o)};function g(){return document.body.querySelector(".highlight-frame-overlay")}const p=()=>getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)",b=(e,n,o="canvas")=>{const r=g();if(!r)return;const s=d(e),i=document.documentElement.clientWidth||window.innerWidth,a=document.documentElement.clientHeight||window.innerHeight;r.setAttribute("width",i.toString()),r.setAttribute("height",a.toString()),s?r.classList.add("is-instance"):r.classList.remove("is-instance");const l=r.querySelector(".highlight-frame-group");if(!l)return;const c=l.querySelector("rect");if(!c)return;s?c.setAttribute("stroke",p()):c.removeAttribute("stroke");const m=document.body.querySelector(".highlight-frame-tools-wrapper"),h=m?.querySelector(".node-tools"),b=t(["zoom","current"],o)??1,v=u(e),{top:y,left:f,width:w,height:E}=v,S=y+E;m&&(s?m.classList.add("is-instance"):m.classList.remove("is-instance")),h&&(s?h.classList.add("is-instance"):h.classList.remove("is-instance")),l.setAttribute("transform",`translate(${f}, ${y})`),c.setAttribute("width",w.toString()),c.setAttribute("height",E.toString());const A=l.querySelector(".handle-top-left"),L=l.querySelector(".handle-top-right"),x=l.querySelector(".handle-bottom-right"),k=l.querySelector(".handle-bottom-left");[A,L,x,k].forEach(e=>{e&&(s?e.setAttribute("stroke",p()):e.removeAttribute("stroke"))}),A&&(A.setAttribute("x",(-3).toString()),A.setAttribute("y",(-3).toString())),L&&(L.setAttribute("x",(w-3).toString()),L.setAttribute("y",(-3).toString())),x&&(x.setAttribute("x",(w-3).toString()),x.setAttribute("y",(E-3).toString())),k&&(k.setAttribute("x",(-3).toString()),k.setAttribute("y",(E-3).toString())),m&&(m.style.left=`${f}px`,m.style.top=`${S}px`),b<=10?n.style.setProperty("--tool-opacity","1"):n.style.setProperty("--tool-opacity","0")},v=e=>{const t=g();if(!t)return;const n=e.classList.contains("hidden")||e.classList.contains("select-none")?"none":"";t.style.display=n;const o=document.body.querySelector(".highlight-frame-tools-wrapper");o&&(o.style.display=n)},y=e=>{const t=e=>{"Enter"===e.key&&(e.preventDefault(),e.stopPropagation(),(()=>{const e=window.getSelection();if(e&&e.rangeCount>0){const t=e.getRangeAt(0);t.deleteContents();const n=document.createElement("br");t.insertNode(n),t.setStartAfter(n),t.setEndAfter(n),e.removeAllRanges(),e.addRange(t)}})())};return e.addEventListener("keydown",t),()=>{e.removeEventListener("keydown",t)}},f=(e,t,n="canvas")=>{const o=((e,t)=>{const n=new MutationObserver(e=>{t(e)});return n.observe(e,{subtree:!0,childList:!0,characterData:!0}),n})(e,()=>{b(e,t,n)});return()=>o.disconnect()},w=(e="canvas")=>{let n=null,o=!1,r=null;const s=()=>{if(o||!n)return;o=!0;var s;(s=n).contentEditable="false",s.classList.remove("is-editable"),s.style.outline="none",((e="canvas")=>{const n=t(["keyboard","disableTextEditMode"],e);n?.()})(e),r?.(),n=null,o=!1};return{enableEditMode:(o,i)=>{if(n===o)return;n&&n!==o&&s();const a=(e=>Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim()))(o);a&&(n=o,(e=>{e.contentEditable="true",e.classList.add("is-editable"),e.style.outline="none"})(o),((e="canvas")=>{const n=t(["keyboard","enableTextEditMode"],e);n?.()})(e),r=((e,t,n,o="canvas")=>{if(!t)return()=>{};e.addEventListener("blur",n);const r=y(e),s=f(e,t,o);return()=>{e.removeEventListener("blur",n),r(),s?.()}})(o,i,s,e))},blurEditMode:s,getEditableNode:()=>n,isEditing:()=>null!==n}},E=320,S=1680,A=[{name:"Mobile",rawValue:390,value:"320px"},{name:"Tablet Portrait",rawValue:768,value:"768px"},{name:"Tablet Landscape",rawValue:1024,value:"1024px"},{name:"Notebook",rawValue:1280,value:"1280px"},{name:"Desktop",rawValue:1680,value:"1680px"}],L=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(E,Math.min(S,n))})(n,(e.clientX-t)/o);return r},x=(e,t)=>{e.style.setProperty("--container-width",`${t}px`),((e,t)=>{e.querySelectorAll(".resize-preset-button").forEach((e,n)=>{n<A.length&&(A[n].rawValue===t?e.classList.add("is-active"):e.classList.remove("is-active"))})})(e,t)};e.createCanvasObserver=function(e="canvas"){const n=document.querySelector(".transform-layer");if(!n)return{disconnect:()=>{}};const o=new MutationObserver(()=>{((e="canvas")=>{const n=t(["zoom","current"],e)??1;document.body.style.setProperty("--zoom",n.toFixed(5)),document.body.style.setProperty("--stroke-width",(2/n).toFixed(3)),document.body.dataset.zoom=n.toFixed(5),document.body.dataset.strokeWidth=(2/n).toFixed(3)})(e);const n=window.nodeTools;n?.refreshHighlightFrame&&n.refreshHighlightFrame()});return o.observe(n,{attributes:!0,attributeOldValue:!0,subtree:!0,childList:!0}),{disconnect:function(){o.disconnect()}}},e.createNodeTools=(e,t="canvas")=>{const r=e;let s=null,i=null,a=null;const c=w(t),p=n((e,n)=>{b(e,n,t),v(e)}),y=e=>{if(a!==e){if(c.isEditing()){const t=c.getEditableNode();t&&t!==e&&c.blurEditMode()}var n,o;s?.disconnect(),i?.disconnect(),e&&r&&(c.enableEditMode(e,r),i=new MutationObserver(()=>{console.log("mutationObserver",e),b(e,r,t),v(e)}),i.observe(e,{attributes:!0,characterData:!0}),s=((e,t)=>{const n=new ResizeObserver(e=>{t(e)});return n.observe(e),n})(e,()=>{console.log("resizeObserver",e),b(e,r,t),v(e)})),a=e,n="selectedNodeChanged",o=e?.getAttribute("data-node-id")??null,window.parent.postMessage({source:"node-edit-utils",action:n,data:o,timestamp:Date.now()},"*"),(e=>{if(!e)return;const t=g(),n=document.body.querySelector(".highlight-frame-tools-wrapper");t&&t.remove(),n&&n.remove();const o=d(e),r=m(e,o);"true"===e.contentEditable&&r.classList.add("is-editable");const{left:s,top:i,height:a}=u(e),l=i+a,c=document.createElement("div");c.classList.add("highlight-frame-tools-wrapper"),o&&c.classList.add("is-instance"),c.style.position="fixed",c.style.left=`${s}px`,c.style.top=`${l}px`,c.style.transform="translateX(-50%)",c.style.transformOrigin="center",c.style.pointerEvents="none",c.style.zIndex="5000",h(e,c,o),document.body.appendChild(c)})(e),e&&r&&v(e)}},f=l(r,y,()=>{c.isEditing()&&c.blurEditMode(),a&&r&&(o(),a=null,s?.disconnect(),i?.disconnect())},c.getEditableNode),E={selectNode:y,getSelectedNode:()=>a,refreshHighlightFrame:()=>{a&&r&&(b(a,r,t),v(a))},clearSelectedNode:()=>{o(),a=null,s?.disconnect(),i?.disconnect()},getEditableNode:()=>c.getEditableNode(),cleanup:()=>{f(),s?.disconnect(),i?.disconnect(),c.blurEditMode(),p.cleanup()}};var S,A;return S="nodeTools",A=E,"undefined"!=typeof window&&(window[S]=A),E},e.createViewport=e=>{const t=document.querySelector(".canvas-container"),o=e.querySelector(".resize-handle");o&&o.remove();const r=(e=>{const t=document.createElement("div");return t.className="resize-handle",e.appendChild(t),t})(e);e.style.setProperty("--container-width","400px"),((e,t,n)=>{const o=document.createElement("div");o.className="resize-presets",A.forEach(e=>{const r=document.createElement("button");r.textContent=e.name,r.className="resize-preset-button",r.addEventListener("click",()=>{n(t,e.rawValue)}),o.appendChild(r)}),e.appendChild(o)})(r,e,x);let s=!1,i=0,a=0;const l=n(n=>{if(!s)return;t&&(t.style.cursor="ew-resize");const o=L(n,i,a);x(e,o)}),d=((e,t,n,o,r)=>(e.addEventListener("mousedown",t),document.addEventListener("mousemove",n),document.addEventListener("mouseup",o),window.addEventListener("blur",r),()=>{e.removeEventListener("mousedown",t),document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o),window.removeEventListener("blur",r)}))(r,t=>{t.preventDefault(),t.stopPropagation(),s=!0,i=t.clientX,a=e.offsetWidth},l,e=>{e.preventDefault(),e.stopPropagation(),t&&(t.style.cursor="default"),s=!1},()=>{s=!1});return{setWidth:t=>{x(e,t)},cleanup:()=>{s=!1,l?.cleanup(),d(),r.remove()}}}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-edit-utils/core",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Utilities for editing nodes in a dom tree.",
   "type": "module",
   "main": "dist/node-edit-utils.cjs.js",

package/src/lib/canvas/createCanvasObserver.ts

@@ -1,7 +1,7 @@
 import { applyCanvasState } from "./helpers/applyCanvasState";
 import type { CanvasObserver } from "./types";
 
-export function createCanvasObserver(): CanvasObserver {
+export function createCanvasObserver(canvasName: string = "canvas"): CanvasObserver {
   const transformLayer = document.querySelector(".transform-layer");
 
   if (!transformLayer) {
@@ -11,7 +11,7 @@ export function createCanvasObserver(): CanvasObserver {
   }
 
   const observer = new MutationObserver(() => {
-    applyCanvasState();
+    applyCanvasState(canvasName);
 
     // Refresh highlight frame (throttled via withRAFThrottle)
     // biome-ignore lint/suspicious/noExplicitAny: global window extension

package/src/lib/canvas/disableCanvasKeyboard.ts

@@ -1,7 +1,7 @@
 import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
 
-export const disableCanvasKeyboard = () => {
-  const disable = getCanvasWindowValue(["keyboard", "disable"]);
+export const disableCanvasKeyboard = (canvasName: string = "canvas") => {
+  const disable = getCanvasWindowValue(["keyboard", "disable"], canvasName);
 
   disable?.();
 };

package/src/lib/canvas/disableCanvasTextMode.ts

@@ -1,7 +1,7 @@
 import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
 
-export const disableCanvasTextMode = () => {
-  const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"]);
+export const disableCanvasTextMode = (canvasName: string = "canvas") => {
+  const disableTextEditMode = getCanvasWindowValue(["keyboard", "disableTextEditMode"], canvasName);
 
   disableTextEditMode?.();
 };

package/src/lib/canvas/enableCanvasKeyboard.ts

@@ -1,7 +1,7 @@
 import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
 
-export const enableCanvasKeyboard = () => {
-  const enable = getCanvasWindowValue(["keyboard", "enable"]);
+export const enableCanvasKeyboard = (canvasName: string = "canvas") => {
+  const enable = getCanvasWindowValue(["keyboard", "enable"], canvasName);
 
   enable?.();
 };

package/src/lib/canvas/enableCanvasTextMode.ts

@@ -1,7 +1,7 @@
 import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
 
-export const enableCanvasTextMode = () => {
-  const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"]);
+export const enableCanvasTextMode = (canvasName: string = "canvas") => {
+  const enableTextEditMode = getCanvasWindowValue(["keyboard", "enableTextEditMode"], canvasName);
 
   enableTextEditMode?.();
 };

package/src/lib/canvas/helpers/applyCanvasState.ts

@@ -1,7 +1,7 @@
 import { getCanvasWindowValue } from "./getCanvasWindowValue";
 
-export const applyCanvasState = () => {
-  const zoom: number = getCanvasWindowValue(["zoom", "current"]);
+export const applyCanvasState = (canvasName: string = "canvas") => {
+  const zoom: number = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
 
   document.body.style.setProperty("--zoom", zoom.toFixed(5));
   document.body.style.setProperty("--stroke-width", (2 / zoom).toFixed(3));

package/src/lib/canvas/helpers/getCanvasWindowValue.ts

@@ -1,5 +1,5 @@
-export const getCanvasWindowValue = (path: string[]) => {
+export const getCanvasWindowValue = (path: string[], canvasName: string = "canvas") => {
   // biome-ignore lint/suspicious/noExplicitAny: global window extension
-  const canvas = (window as any).canvas;
+  const canvas = (window as any)[canvasName];
   return path.reduce((obj, prop) => obj?.[prop], canvas);
 };

package/src/lib/node-tools/createNodeTools.ts

@@ -10,18 +10,18 @@ import { updateHighlightFrameVisibility } from "./highlight/updateHighlightFrame
 import { nodeText } from "./text/nodeText";
 import type { NodeTools } from "./types";
 
-export const createNodeTools = (element: HTMLElement | null): NodeTools => {
+export const createNodeTools = (element: HTMLElement | null, canvasName: string = "canvas"): NodeTools => {
   const nodeProvider = element;
 
   let resizeObserver: ResizeObserver | null = null;
   let mutationObserver: MutationObserver | null = null;
   let selectedNode: HTMLElement | null = null;
 
-  const text = nodeText();
+  const text = nodeText(canvasName);
 
   // Combined throttled function for refresh + visibility update
   const throttledRefreshAndVisibility = withRAFThrottle((node: HTMLElement, nodeProvider: HTMLElement) => {
-    refreshHighlightFrame(node, nodeProvider);
+    refreshHighlightFrame(node, nodeProvider, canvasName);
     updateHighlightFrameVisibility(node);
   });
 
@@ -62,7 +62,7 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
       mutationObserver = new MutationObserver(() => {
         // throttledRefreshAndVisibility(node, nodeProvider);
         console.log("mutationObserver", node);
-        refreshHighlightFrame(node, nodeProvider);
+        refreshHighlightFrame(node, nodeProvider, canvasName);
         updateHighlightFrameVisibility(node);
       });
 
@@ -74,7 +74,7 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
       resizeObserver = connectResizeObserver(node, () => {
         // throttledRefreshAndVisibility(node, nodeProvider);
         console.log("resizeObserver", node);
-        refreshHighlightFrame(node, nodeProvider);
+        refreshHighlightFrame(node, nodeProvider, canvasName);
         updateHighlightFrameVisibility(node);
       });
     }
@@ -107,7 +107,7 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
       if (selectedNode && nodeProvider) {
         // Call directly (not throttled) since this is typically called from already-throttled contexts
         // to avoid double RAF
-        refreshHighlightFrame(selectedNode, nodeProvider);
+        refreshHighlightFrame(selectedNode, nodeProvider, canvasName);
         updateHighlightFrameVisibility(selectedNode);
       }
     },

package/src/lib/node-tools/highlight/helpers/getElementBounds.ts

@@ -2,7 +2,8 @@ import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue"
 
 export function getElementBounds(
   element: Element,
-  nodeProvider: HTMLElement
+  nodeProvider: HTMLElement,
+  canvasName: string = "canvas"
 ): {
   top: number;
   left: number;
@@ -15,7 +16,7 @@ export function getElementBounds(
   const relativeTop = elementRect.top - componentRootRect.top;
   const relativeLeft = elementRect.left - componentRootRect.left;
 
-  const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+  const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
 
   const top = parseFloat((relativeTop / zoom).toFixed(5));
   const left = parseFloat((relativeLeft / zoom).toFixed(5));

package/src/lib/node-tools/highlight/refreshHighlightFrame.ts

@@ -7,7 +7,7 @@ const getComponentColor = (): string => {
   return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
 };
 
-export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLElement) => {
+export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLElement, canvasName: string = "canvas") => {
   // Batch all DOM reads first (single layout pass)
   const frame = getHighlightFrameElement();
   if (!frame) return;
@@ -44,7 +44,7 @@ export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLEleme
   const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper") as HTMLElement | null;
   const nodeTools = toolsWrapper?.querySelector(".node-tools") as HTMLElement | null;
 
-  const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+  const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
   const bounds = getScreenBounds(node);
 
   // Calculate all values before any DOM writes

package/src/lib/node-tools/text/events/setupMutationObserver.ts

@@ -1,9 +1,9 @@
 import { connectMutationObserver } from "../../../helpers/observer/connectMutationObserver";
 import { refreshHighlightFrame } from "../../highlight/refreshHighlightFrame";
 
-export const setupMutationObserver = (node: HTMLElement, nodeProvider: HTMLElement): (() => void) | undefined => {
+export const setupMutationObserver = (node: HTMLElement, nodeProvider: HTMLElement, canvasName: string = "canvas"): (() => void) | undefined => {
   const mutationObserver = connectMutationObserver(node, () => {
-    refreshHighlightFrame(node, nodeProvider);
+    refreshHighlightFrame(node, nodeProvider, canvasName);
   });
 
   return () => mutationObserver.disconnect();

package/src/lib/node-tools/text/events/setupNodeListeners.ts

@@ -1,7 +1,7 @@
 import { setupKeydownHandler } from "./setupKeydownHandler";
 import { setupMutationObserver } from "./setupMutationObserver";
 
-export const setupNodeListeners = (node: HTMLElement, nodeProvider: HTMLElement | null, blur: () => void): (() => void) => {
+export const setupNodeListeners = (node: HTMLElement, nodeProvider: HTMLElement | null, blur: () => void, canvasName: string = "canvas"): (() => void) => {
   if (!nodeProvider) {
     return () => {};
   }
@@ -10,7 +10,7 @@ export const setupNodeListeners = (node: HTMLElement, nodeProvider: HTMLElement
 
   const keydownCleanup = setupKeydownHandler(node);
 
-  const mutationCleanup = setupMutationObserver(node, nodeProvider);
+  const mutationCleanup = setupMutationObserver(node, nodeProvider, canvasName);
 
   return () => {
     node.removeEventListener("blur", blur);

package/src/lib/node-tools/text/nodeText.ts

@@ -6,7 +6,7 @@ import { makeNodeEditable } from "./helpers/makeNodeEditable";
 import { makeNodeNonEditable } from "./helpers/makeNodeNonEditable";
 import type { NodeText } from "./types";
 
-export const nodeText = (): NodeText => {
+export const nodeText = (canvasName: string = "canvas"): NodeText => {
   let editableNode: HTMLElement | null = null;
   let blurInProgress: boolean = false;
   let cleanup: (() => void) | null = null;
@@ -26,9 +26,9 @@ export const nodeText = (): NodeText => {
       editableNode = node;
 
       makeNodeEditable(node);
-      enableCanvasTextMode();
+      enableCanvasTextMode(canvasName);
 
-      cleanup = setupNodeListeners(node, nodeProvider, blurEditMode);
+      cleanup = setupNodeListeners(node, nodeProvider, blurEditMode, canvasName);
     }
   };
 
@@ -50,7 +50,7 @@ export const nodeText = (): NodeText => {
     const nodeToCleanup = editableNode;
 
     makeNodeNonEditable(nodeToCleanup);
-    disableCanvasTextMode();
+    disableCanvasTextMode(canvasName);
     cleanup?.();
 
     editableNode = null;