@node-edit-utils/core 2.3.0 → 2.3.2

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

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.3.0
+ * @version 2.3.2
  */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
@@ -9,6 +9,214 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MarkupCanvas = {}));
 })(this, (function (exports) { 'use strict';
 
+    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 getViewportLabelsOverlay = () => {
+        const canvasContainer = getCanvasContainer();
+        const container = canvasContainer || document.body;
+        // 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 viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+            const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+            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;
+    };
+
+    function sendPostMessage(action, data) {
+        window.parent.postMessage({
+            source: "node-edit-utils",
+            action,
+            data,
+            timestamp: Date.now(),
+        }, "*");
+    }
+
+    const getLabelPosition = (labelGroup) => {
+        const transform = labelGroup.getAttribute("transform");
+        const match = transform?.match(/translate\((-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)\)/);
+        if (match) {
+            return { x: parseFloat(match[1]), y: parseFloat(match[2]) };
+        }
+        return { x: 0, y: 0 };
+    };
+
+    const getTransformValues = (element) => {
+        const style = element.style.transform;
+        const match = style.match(/translate3d\((-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px\)/);
+        if (match) {
+            return { x: parseFloat(match[1]), y: parseFloat(match[2]) };
+        }
+        return { x: 0, y: 0 };
+    };
+
+    const getZoomValue = () => {
+        const zoomValue = getComputedStyle(document.body).getPropertyValue("--zoom").trim();
+        return zoomValue ? parseFloat(zoomValue) : 1;
+    };
+
+    const setupViewportLabelDrag = (labelElement, viewportElement, viewportName) => {
+        let isDragging = false;
+        let startX = 0;
+        let startY = 0;
+        let initialTransform = { x: 0, y: 0 };
+        let initialLabelPosition = { x: 0, y: 0 };
+        // Get the parent group element that contains the label
+        const labelGroup = labelElement.parentElement;
+        const startDrag = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            isDragging = true;
+            setViewportLabelDragging(true);
+            startX = event.clientX;
+            startY = event.clientY;
+            initialTransform = getTransformValues(viewportElement);
+            initialLabelPosition = getLabelPosition(labelGroup);
+        };
+        const handleDrag = (event) => {
+            if (!isDragging)
+                return;
+            const zoom = getZoomValue();
+            // Calculate mouse delta
+            const rawDeltaX = event.clientX - startX;
+            const rawDeltaY = event.clientY - startY;
+            // Adjust delta for zoom level
+            const deltaX = rawDeltaX / zoom;
+            const deltaY = rawDeltaY / zoom;
+            const newX = initialTransform.x + deltaX;
+            const newY = initialTransform.y + deltaY;
+            // Update label position with raw delta (labels are in screen space)
+            const newLabelX = initialLabelPosition.x + rawDeltaX;
+            const newLabelY = initialLabelPosition.y + rawDeltaY;
+            labelGroup.setAttribute("transform", `translate(${newLabelX}, ${newLabelY})`);
+            // Update viewport position with zoom-adjusted delta
+            viewportElement.style.transform = `translate3d(${newX}px, ${newY}px, 0)`;
+        };
+        const stopDrag = (event) => {
+            if (!isDragging)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            isDragging = false;
+            setViewportLabelDragging(false);
+            const finalTransform = getTransformValues(viewportElement);
+            // Trigger refresh after drag completes to update highlight frame and labels
+            // biome-ignore lint/suspicious/noExplicitAny: global window extension
+            const nodeTools = window.nodeTools;
+            if (nodeTools?.refreshHighlightFrame) {
+                nodeTools.refreshHighlightFrame();
+            }
+            // Notify parent about the new position
+            sendPostMessage("viewport-position-changed", {
+                viewportName,
+                x: finalTransform.x,
+                y: finalTransform.y,
+            });
+        };
+        const cancelDrag = () => {
+            isDragging = false;
+            setViewportLabelDragging(false);
+        };
+        // Attach event listeners
+        labelElement.addEventListener("mousedown", startDrag);
+        document.addEventListener("mousemove", handleDrag);
+        document.addEventListener("mouseup", stopDrag);
+        window.addEventListener("blur", cancelDrag);
+        // Return cleanup function
+        return () => {
+            labelElement.removeEventListener("mousedown", startDrag);
+            document.removeEventListener("mousemove", handleDrag);
+            document.removeEventListener("mouseup", stopDrag);
+            window.removeEventListener("blur", cancelDrag);
+        };
+    };
+
+    // 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 viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+        const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+        overlay.setAttribute("width", viewportWidth.toString());
+        overlay.setAttribute("height", viewportHeight.toString());
+        // Find all viewports with names
+        const viewports = document.querySelectorAll(".viewport[data-viewport-name]");
+        // Clean up existing drag listeners
+        dragCleanupFunctions.forEach((cleanup) => {
+            cleanup();
+        });
+        dragCleanupFunctions.clear();
+        // Remove existing label groups
+        const existingGroups = overlay.querySelectorAll(".viewport-label-group");
+        existingGroups.forEach((group) => {
+            group.remove();
+        });
+        // Create/update labels for each viewport
+        viewports.forEach((viewport) => {
+            const viewportElement = viewport;
+            const viewportName = viewportElement.getAttribute("data-viewport-name");
+            if (!viewportName)
+                return;
+            const bounds = getScreenBounds(viewportElement);
+            // 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];
@@ -38,6 +246,8 @@
             if (nodeTools?.refreshHighlightFrame) {
                 nodeTools.refreshHighlightFrame();
             }
+            // Refresh viewport labels
+            refreshViewportLabels();
         });
         observer.observe(transformLayer, {
             attributes: true,
@@ -45,8 +255,16 @@
             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,
@@ -61,15 +279,6 @@
         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
@@ -97,10 +306,6 @@
         }
     };
 
-    const getCanvasContainer = () => {
-        return document.querySelector(".canvas-container");
-    };
-
     const clearHighlightFrame = () => {
         const canvasContainer = getCanvasContainer();
         const container = canvasContainer || document.body;
@@ -152,6 +357,21 @@
         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 = [];
@@ -164,7 +384,16 @@
         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;
@@ -269,16 +498,6 @@
         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)";
     };
@@ -711,6 +930,7 @@
             // Accumulate mutations instead of replacing
             pendingMutations.push(...mutations);
             scheduleProcess();
+            console.log("refreshHighlightFrame in mutationObserver");
             refreshHighlightFrame(node, nodeProvider, canvasName);
         });
         return () => {
@@ -848,14 +1068,15 @@
                     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;
@@ -884,15 +1105,22 @@
                     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);
+                    updateHighlightFrameVisibility(node);
+                }
+            }
+            else {
+                clearHighlightFrame();
             }
         };
         // Setup event listener
@@ -931,36 +1159,10 @@
         return nodeTools;
     };
 
-    // 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;
-    }
-
     const DEFAULT_WIDTH = 400;
     const RESIZE_CONFIG = {
-        minWidth: 320,
-        maxWidth: 1680,
+        minWidth: 4,
+        maxWidth: 2560,
     };
     const RESIZE_PRESETS = [
         {
@@ -991,14 +1193,22 @@
     ];
 
     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);
         };
     };
@@ -1058,7 +1268,7 @@
         updateActivePreset(container, width);
     };
 
-    const createViewport = (container) => {
+    const createViewport = (container, initialWidth) => {
         const canvas = getCanvasContainer();
         // Remove any existing resize handle to prevent duplicates
         const existingHandle = container.querySelector(".resize-handle");
@@ -1066,7 +1276,8 @@
             existingHandle.remove();
         }
         const resizeHandle = createResizeHandle(container);
-        container.style.setProperty("--container-width", `${DEFAULT_WIDTH}px`);
+        const width = initialWidth ?? DEFAULT_WIDTH;
+        container.style.setProperty("--container-width", `${width}px`);
         createResizePresets(resizeHandle, container, updateWidth);
         let isDragging = false;
         let startX = 0;
@@ -1087,7 +1298,6 @@
             const width = calcWidth(event, startX, startWidth);
             updateWidth(container, width);
         };
-        const throttledHandleResize = withRAFThrottle(handleResize);
         const stopResize = (event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -1097,18 +1307,33 @@
             isDragging = false;
         };
         const blurResize = () => {
+            if (canvas) {
+                canvas.style.cursor = "default";
+            }
             isDragging = false;
         };
-        const removeListeners = setupEventListener(resizeHandle, startResize, throttledHandleResize, stopResize, blurResize);
+        const removeListeners = setupEventListener(resizeHandle, startResize, handleResize, stopResize, blurResize);
+        // Refresh viewport labels when viewport is created
+        refreshViewportLabels();
         const cleanup = () => {
             isDragging = false;
-            throttledHandleResize?.cleanup();
             removeListeners();
             resizeHandle.remove();
+            // Refresh labels after cleanup to remove this viewport's label if needed
+            refreshViewportLabels();
         };
         return {
             setWidth: (width) => {
                 updateWidth(container, width);
+                refreshViewportLabels();
+                // Refresh highlight frame when viewport width changes to update node positions
+                // biome-ignore lint/suspicious/noExplicitAny: global window extension
+                const nodeTools = window.nodeTools;
+                const selectedNode = nodeTools?.getSelectedNode?.();
+                const nodeProvider = document.querySelector('[data-role="node-provider"]');
+                if (selectedNode && nodeProvider) {
+                    refreshHighlightFrame(selectedNode, nodeProvider);
+                }
             },
             cleanup,
         };

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,t="canvas")=>{const n=window[t];return e.reduce((e,t)=>e?.[t],n)};function n(e,t){window.parent.postMessage({source:"node-edit-utils",action:e,data:t,timestamp:Date.now()},"*")}const o=()=>document.querySelector(".canvas-container"),r=()=>{const e=o()||document.body,t=e.querySelector(".highlight-frame-overlay");t&&t.remove();const n=e.querySelector(".highlight-frame-tools-wrapper");n&&n.remove()},i=(e,t,n)=>{e&&t&&n.enableEditMode(e,t)},s=["path","rect","circle","ellipse","polygon","line","polyline","text","text-noci"];let a=[],l=0,d=null;const c=(e,t,n)=>{let o=null;const r=e.clientX,c=e.clientY,u=e.metaKey||e.ctrlKey,m=((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})(r,c).filter(e=>!s.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)),h=n.getEditableNode();if(h&&m.includes(h))return o=h,d=o,o;if(u)return a=[],o=m[0],d&&d===o&&i(o,t,n),d=o,o;var g,p;p=m,(g=a).length===p.length&&g.every((e,t)=>e===p[t])?l<=m.length-2&&l++:l=0;return o=m[m.length-1-l],a=m,d&&d===o&&i(o,t,n),d=o,o},u=(e,t,n,o)=>{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,o)=>{if(e.preventDefault(),e.stopPropagation(),t&&!t.contains(e.target))return r(),void o(null);o(c(e,t,n))})(n,e,o,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)}},m=e=>"true"===e.getAttribute("data-instance"),h=(e,t,n,o,r=!1,i=!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)"):i&&s.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim()||"oklch(62.3% 0.214 259.815)"),e.appendChild(s),s};function g(e){const t=e.getBoundingClientRect();return{top:t.top,left:t.left,width:t.width,height:t.height}}const p=(e,t=!1,n=!1)=>{const{top:r,left:i,width:s,height:a}=g(e),l=Math.max(s,3),d=document.createElementNS("http://www.w3.org/2000/svg","svg");d.classList.add("highlight-frame-overlay"),t&&d.classList.add("is-instance"),n&&d.classList.add("is-text-edit"),d.setAttribute("data-node-id",e.getAttribute("data-node-id")||""),d.style.position="absolute",d.style.top="0",d.style.left="0",d.style.width="100vw",d.style.height="100vh",d.style.pointerEvents="none",d.style.zIndex="500";const c=document.documentElement.clientWidth||window.innerWidth,u=document.documentElement.clientHeight||window.innerHeight;d.setAttribute("width",c.toString()),d.setAttribute("height",u.toString());const m=document.createElementNS("http://www.w3.org/2000/svg","g");m.classList.add("highlight-frame-group"),m.setAttribute("transform",`translate(${i}, ${r})`);const p=document.createElementNS("http://www.w3.org/2000/svg","rect");p.setAttribute("x","0"),p.setAttribute("y","0"),p.setAttribute("width",l.toString()),p.setAttribute("height",a.toString()),p.setAttribute("vector-effect","non-scaling-stroke"),p.classList.add("highlight-frame-rect"),t?p.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)"):n&&p.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim()||"oklch(62.3% 0.214 259.815)"),m.appendChild(p),((e,t,n,o=!1,r=!1)=>{h(e,0,0,"handle-top-left",o,r),h(e,t,0,"handle-top-right",o,r),h(e,t,n,"handle-bottom-right",o,r),h(e,0,n,"handle-bottom-left",o,r)})(m,l,a,t,n),d.appendChild(m);const b=o();return b?b.appendChild(d):document.body.appendChild(d),d},b={div:"Container",h1:"Heading 1",h2:"Heading 2",h3:"Heading 3",h4:"Heading 4",h5:"Heading 5",h6:"Heading 6",p:"Text",li:"List Item",ul:"Unordered List",ol:"Ordered List",img:"Image",a:"Link"},v=(e,t,n=!1,o=!1)=>{const r=document.createElement("div");r.className="node-tools",n&&r.classList.add("is-instance"),o&&r.classList.add("is-text-edit"),t.appendChild(r),((e,t)=>{const n=document.createElement("div");n.className="tag-label";const o=e.getAttribute("data-instance-name"),r=e.tagName.toLowerCase(),i=o||b[r]||r;var s;n.textContent=(s=i)?s.charAt(0).toUpperCase()+s.slice(1):s,t.appendChild(n)})(e,r)};function y(){return(o()||document.body).querySelector(".highlight-frame-overlay")}const f=()=>getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)",w=()=>getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim()||"oklch(62.3% 0.214 259.815)",E=(e,n,r="canvas")=>{const i=y();if(!i)return;const s=m(e),a="true"===e.contentEditable,l=document.documentElement.clientWidth||window.innerWidth,d=document.documentElement.clientHeight||window.innerHeight;i.setAttribute("width",l.toString()),i.setAttribute("height",d.toString()),s?i.classList.add("is-instance"):i.classList.remove("is-instance"),a?i.classList.add("is-text-edit"):i.classList.remove("is-text-edit");const c=i.querySelector(".highlight-frame-group");if(!c)return;const u=c.querySelector("rect");if(!u)return;s?u.setAttribute("stroke",f()):a?u.setAttribute("stroke",w()):u.removeAttribute("stroke");const h=(o()||document.body).querySelector(".highlight-frame-tools-wrapper"),p=h?.querySelector(".node-tools"),b=t(["zoom","current"],r)??1,v=g(e),{top:E,left:L,width:A,height:x}=v,S=Math.max(A,3),C=E+x;h&&(s?h.classList.add("is-instance"):h.classList.remove("is-instance"),a?h.classList.add("is-text-edit"):h.classList.remove("is-text-edit")),p&&(s?p.classList.add("is-instance"):p.classList.remove("is-instance"),a?p.classList.add("is-text-edit"):p.classList.remove("is-text-edit")),c.setAttribute("transform",`translate(${L}, ${E})`),u.setAttribute("width",S.toString()),u.setAttribute("height",x.toString());const k=c.querySelector(".handle-top-left"),N=c.querySelector(".handle-top-right"),q=c.querySelector(".handle-bottom-right"),M=c.querySelector(".handle-bottom-left");[k,N,q,M].forEach(e=>{e&&(s?e.setAttribute("stroke",f()):a?e.setAttribute("stroke",w()):e.removeAttribute("stroke"))}),k&&(k.setAttribute("x",(-3).toString()),k.setAttribute("y",(-3).toString())),N&&(N.setAttribute("x",(S-3).toString()),N.setAttribute("y",(-3).toString())),q&&(q.setAttribute("x",(S-3).toString()),q.setAttribute("y",(x-3).toString())),M&&(M.setAttribute("x",(-3).toString()),M.setAttribute("y",(x-3).toString())),h&&(h.style.transform=`translate(${L}px, ${C}px)`),b<=10?n.style.setProperty("--tool-opacity","1"):n.style.setProperty("--tool-opacity","0")},L=e=>{const t=y();if(!t)return;const n=e.classList.contains("hidden")||e.classList.contains("select-none")?"none":"";t.style.display=n;const r=(o()||document.body).querySelector(".highlight-frame-tools-wrapper");r&&(r.style.display=n)},A=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)}},x=(e,t,o=!1)=>{if(!t.some(e=>"characterData"===e.type||"childList"===e.type&&(e.addedNodes.length>0||e.removedNodes.length>0))&&!o)return;const r=e.textContent??"",i=e.getAttribute("data-node-id");console.log("textContentChanged",r,o),n("textContentChanged",{nodeId:i,textContent:r,final:o})},S=(e,t,n="canvas")=>{let o=[],r=null,i=null;const s=()=>{null===r&&(r=requestAnimationFrame(()=>{i=requestAnimationFrame(()=>{(()=>{if(o.length>0){const t=[...o];o=[],x(e,t,!1)}})(),r=null,i=null})}))},a=((e,t)=>{const n=new MutationObserver(e=>{t(e)});return n.observe(e,{subtree:!0,childList:!0,characterData:!0}),n})(e,r=>{o.push(...r),s(),E(e,t,n)});return()=>{a.disconnect(),null!==r&&(cancelAnimationFrame(r),r=null),null!==i&&(cancelAnimationFrame(i),i=null),o=[]}},C=(e="canvas")=>{let n=null,o=!1,r=null;const i=()=>{if(o||!n)return;o=!0;const i=n;var s;x(i,[],!0),(s=i).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,s)=>{if(n===o)return;n&&n!==o&&i();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=A(e),i=S(e,t,o);return()=>{e.removeEventListener("blur",n),r(),i?.()}})(o,s,i,e))},blurEditMode:i,getEditableNode:()=>n,isEditing:()=>null!==n}};const k=320,N=1680,q=[{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"}],M=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(k,Math.min(N,n))})(n,(e.clientX-t)/o);return r},P=(e,t)=>{e.style.setProperty("--container-width",`${t}px`),((e,t)=>{e.querySelectorAll(".resize-preset-button").forEach((e,n)=>{n<q.length&&(q[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 i=e;let s=null,a=null,l=null,d=null;const c=C(t),h=e=>{if(d!==e){if(c.isEditing()){const t=c.getEditableNode();t&&t!==e&&c.blurEditMode()}if(s?.disconnect(),a?.disconnect(),l?.disconnect(),e&&i){const o=()=>{if(!document.contains(e))return r(),d=null,s?.disconnect(),a?.disconnect(),l?.disconnect(),void n("selectedNodeChanged",null)};a=new MutationObserver(()=>{o(),document.contains(e)&&(E(e,i,t),L(e))}),a.observe(e,{attributes:!0,characterData:!0,childList:!0,subtree:!0});const c=e.parentElement;c&&(l=new MutationObserver(t=>{for(const n of t)if("childList"===n.type)for(const t of Array.from(n.removedNodes))if(t===e||t instanceof Node&&t.contains(e))return void o()}),l.observe(c,{childList:!0,subtree:!1})),s=((e,t)=>{const n=new ResizeObserver(e=>{t(e)});return n.observe(e),n})(e,()=>{o(),document.contains(e)&&(E(e,i,t),L(e))})}d=e,n("selectedNodeChanged",e?.getAttribute("data-node-id")??null),(e=>{if(!e)return;const t=y(),n=o(),r=n?.querySelector(".highlight-frame-tools-wrapper")||document.body.querySelector(".highlight-frame-tools-wrapper");t&&t.remove(),r&&r.remove();const i=m(e),s="true"===e.contentEditable,a=p(e,i,s);"true"===e.contentEditable&&a.classList.add("is-editable");const{left:l,top:d,height:c}=g(e),u=d+c,h=document.createElement("div");h.classList.add("highlight-frame-tools-wrapper"),i&&h.classList.add("is-instance"),s&&h.classList.add("is-text-edit"),h.style.position="absolute",h.style.transform=`translate(${l}px, ${u}px)`,h.style.transformOrigin="left center",h.style.pointerEvents="none",h.style.zIndex="500",v(e,h,i,s),n?n.appendChild(h):document.body.appendChild(h)})(e),e&&i&&(L(e),L(e))}},b=u(i,h,()=>{c.isEditing()&&c.blurEditMode(),d&&i&&(r(),d=null,s?.disconnect(),a?.disconnect(),l?.disconnect())},c),f={selectNode:h,getSelectedNode:()=>d,refreshHighlightFrame:()=>{d&&i&&(E(d,i,t),L(d))},clearSelectedNode:()=>{r(),d=null,s?.disconnect(),a?.disconnect(),l?.disconnect()},getEditableNode:()=>c.getEditableNode(),cleanup:()=>{b(),s?.disconnect(),a?.disconnect(),l?.disconnect(),c.blurEditMode(),r(),d=null,n("selectedNodeChanged",null)}};var w,A;return w="nodeTools",A=f,"undefined"!=typeof window&&(window[w]=A),f},e.createViewport=e=>{const t=o(),n=e.querySelector(".resize-handle");n&&n.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",q.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,P);let i=!1,s=0,a=0;const l=function(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}(n=>{if(!i)return;t&&(t.style.cursor="ew-resize");const o=M(n,s,a);P(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,a=e.offsetWidth},l,e=>{e.preventDefault(),e.stopPropagation(),t&&(t.style.cursor="default"),i=!1},()=>{i=!1});return{setWidth:t=>{P(e,t)},cleanup:()=>{i=!1,l?.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";function t(e){const t=e.getBoundingClientRect();return{top:t.top,left:t.left,width:t.width,height:t.height}}const n=()=>document.querySelector(".canvas-container");let o=!1;const r=e=>{o=e};function s(e,t){window.parent.postMessage({source:"node-edit-utils",action:e,data:t,timestamp:Date.now()},"*")}const i=e=>{const t=e.style.transform.match(/translate3d\((-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px\)/);return t?{x:parseFloat(t[1]),y:parseFloat(t[2])}:{x:0,y:0}},a=(e,t,n)=>{let o=!1,a=0,d=0,l={x:0,y:0},c={x:0,y:0};const u=e.parentElement,m=e=>{e.preventDefault(),e.stopPropagation(),o=!0,r(!0),a=e.clientX,d=e.clientY,l=i(t),c=(e=>{const t=e.getAttribute("transform"),n=t?.match(/translate\((-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)\)/);return n?{x:parseFloat(n[1]),y:parseFloat(n[2])}:{x:0,y:0}})(u)},h=e=>{if(!o)return;const n=(()=>{const e=getComputedStyle(document.body).getPropertyValue("--zoom").trim();return e?parseFloat(e):1})(),r=e.clientX-a,s=e.clientY-d,i=r/n,m=s/n,h=l.x+i,g=l.y+m,p=c.x+r,v=c.y+s;u.setAttribute("transform",`translate(${p}, ${v})`),t.style.transform=`translate3d(${h}px, ${g}px, 0)`},g=e=>{if(!o)return;e.preventDefault(),e.stopPropagation(),o=!1,r(!1);const a=i(t),d=window.nodeTools;d?.refreshHighlightFrame&&d.refreshHighlightFrame(),s("viewport-position-changed",{viewportName:n,x:a.x,y:a.y})},p=()=>{o=!1,r(!1)};return e.addEventListener("mousedown",m),document.addEventListener("mousemove",h),document.addEventListener("mouseup",g),window.addEventListener("blur",p),()=>{e.removeEventListener("mousedown",m),document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",g),window.removeEventListener("blur",p)}},d=new Map,l=()=>{if(o)return;const e=(()=>{const e=n()||document.body;let t=e.querySelector(".viewport-labels-overlay");if(!t){t=document.createElementNS("http://www.w3.org/2000/svg","svg"),t.classList.add("viewport-labels-overlay"),t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.width="100vw",t.style.height="100vh",t.style.pointerEvents="none",t.style.zIndex="500";const n=document.documentElement.clientWidth||window.innerWidth,o=document.documentElement.clientHeight||window.innerHeight;t.setAttribute("width",n.toString()),t.setAttribute("height",o.toString()),e.appendChild(t)}return t})(),r=document.documentElement.clientWidth||window.innerWidth,s=document.documentElement.clientHeight||window.innerHeight;e.setAttribute("width",r.toString()),e.setAttribute("height",s.toString());const i=document.querySelectorAll(".viewport[data-viewport-name]");d.forEach(e=>{e()}),d.clear();e.querySelectorAll(".viewport-label-group").forEach(e=>{e.remove()}),i.forEach(n=>{const o=n,r=o.getAttribute("data-viewport-name");if(!r)return;const s=t(o),i=document.createElementNS("http://www.w3.org/2000/svg","g");i.classList.add("viewport-label-group"),i.setAttribute("data-viewport-name",r),i.setAttribute("transform",`translate(${s.left}, ${s.top})`);const l=document.createElementNS("http://www.w3.org/2000/svg","text");l.classList.add("viewport-label-text"),l.setAttribute("x","0"),l.setAttribute("y","-8"),l.setAttribute("vector-effect","non-scaling-stroke"),l.setAttribute("pointer-events","auto"),l.textContent=r,i.appendChild(l),e.appendChild(i);const c=a(l,o,r);d.set(r,c)})},c=(e,t="canvas")=>{const n=window[t];return e.reduce((e,t)=>e?.[t],n)};const u=()=>{const e=n()||document.body,t=e.querySelector(".highlight-frame-overlay");t&&t.remove();const o=e.querySelector(".highlight-frame-tools-wrapper");o&&o.remove()},m=(e,t,n)=>{e&&t&&n.enableEditMode(e,t)},h=["path","rect","circle","ellipse","polygon","line","polyline","text","text-noci"];let g=[],p=0,v=null;const b=(e,t,n)=>{let o=null;const r=e.clientX,s=e.clientY,i=e.metaKey||e.ctrlKey,a=((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})(r,s).filter(e=>!h.includes(e.tagName.toLowerCase())&&!e.classList.contains("select-none")&&!e.classList.contains("content-layer")&&!e.classList.contains("resize-handle")&&!e.classList.contains("resize-presets")&&!(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)&&(e=>{let t=e;for(;t;){if(t.classList.contains("viewport"))return!0;if("node-provider"===t.getAttribute("data-role"))break;t=t.parentElement}return!1})(e));if(console.log("candidates",a),0===a.length)return v=null,null;const d=n.getEditableNode();if(d&&a.includes(d))return o=d,v=o,o;if(i)return g=[],o=a[0],v&&v===o&&m(o,t,n),v=o,o;var l,c;c=a,(l=g).length===c.length&&l.every((e,t)=>e===c[t])?p<=a.length-2&&p++:p=0;return o=a[a.length-1-p],g=a,v&&v===o&&m(o,t,n),v=o,o},y=(e,t,n,o)=>{const r=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,o)=>{if(e.preventDefault(),e.stopPropagation(),t&&!t.contains(e.target))return u(),void o(null);o(b(e,t,n))})(n,e,o,t)},i=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),n?.())};return window.addEventListener("message",r),document.addEventListener("click",s),document.addEventListener("keydown",i),()=>{window.removeEventListener("message",r),document.removeEventListener("click",s),document.removeEventListener("keydown",i)}},f=e=>"true"===e.getAttribute("data-instance"),w=(e,t,n,o,r=!1,s=!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)"):s&&i.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim()||"oklch(62.3% 0.214 259.815)"),e.appendChild(i),i},E=(e,o=!1,r=!1)=>{const{top:s,left:i,width:a,height:d}=t(e),l=Math.max(a,3),c=document.createElementNS("http://www.w3.org/2000/svg","svg");c.classList.add("highlight-frame-overlay"),o&&c.classList.add("is-instance"),r&&c.classList.add("is-text-edit"),c.setAttribute("data-node-id",e.getAttribute("data-node-id")||""),c.style.position="absolute",c.style.top="0",c.style.left="0",c.style.width="100vw",c.style.height="100vh",c.style.pointerEvents="none",c.style.zIndex="500";const u=document.documentElement.clientWidth||window.innerWidth,m=document.documentElement.clientHeight||window.innerHeight;c.setAttribute("width",u.toString()),c.setAttribute("height",m.toString());const h=document.createElementNS("http://www.w3.org/2000/svg","g");h.classList.add("highlight-frame-group"),h.setAttribute("transform",`translate(${i}, ${s})`);const g=document.createElementNS("http://www.w3.org/2000/svg","rect");g.setAttribute("x","0"),g.setAttribute("y","0"),g.setAttribute("width",l.toString()),g.setAttribute("height",d.toString()),g.setAttribute("vector-effect","non-scaling-stroke"),g.classList.add("highlight-frame-rect"),o?g.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)"):r&&g.setAttribute("stroke",getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim()||"oklch(62.3% 0.214 259.815)"),h.appendChild(g),((e,t,n,o=!1,r=!1)=>{w(e,0,0,"handle-top-left",o,r),w(e,t,0,"handle-top-right",o,r),w(e,t,n,"handle-bottom-right",o,r),w(e,0,n,"handle-bottom-left",o,r)})(h,l,d,o,r),c.appendChild(h);const p=n();return p?p.appendChild(c):document.body.appendChild(c),c},L={div:"Container",h1:"Heading 1",h2:"Heading 2",h3:"Heading 3",h4:"Heading 4",h5:"Heading 5",h6:"Heading 6",p:"Text",li:"List Item",ul:"Unordered List",ol:"Ordered List",img:"Image",a:"Link"},A=(e,t,n=!1,o=!1)=>{const r=document.createElement("div");r.className="node-tools",n&&r.classList.add("is-instance"),o&&r.classList.add("is-text-edit"),t.appendChild(r),((e,t)=>{const n=document.createElement("div");n.className="tag-label";const o=e.getAttribute("data-instance-name"),r=e.tagName.toLowerCase(),s=o||L[r]||r;var i;n.textContent=(i=s)?i.charAt(0).toUpperCase()+i.slice(1):i,t.appendChild(n)})(e,r)};function x(){return(n()||document.body).querySelector(".highlight-frame-overlay")}const S=e=>{if(!e)return;const o=x(),r=n(),s=r?.querySelector(".highlight-frame-tools-wrapper")||document.body.querySelector(".highlight-frame-tools-wrapper");o&&o.remove(),s&&s.remove();const i=f(e),a="true"===e.contentEditable,d=E(e,i,a);"true"===e.contentEditable&&d.classList.add("is-editable");const{left:l,top:c,height:u}=t(e),m=c+u,h=document.createElement("div");h.classList.add("highlight-frame-tools-wrapper"),i&&h.classList.add("is-instance"),a&&h.classList.add("is-text-edit"),h.style.position="absolute",h.style.transform=`translate(${l}px, ${m}px)`,h.style.transformOrigin="left center",h.style.pointerEvents="none",h.style.zIndex="500",A(e,h,i,a),r?r.appendChild(h):document.body.appendChild(h)},C=()=>getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim()||"oklch(65.6% 0.241 354.308)",k=()=>getComputedStyle(document.documentElement).getPropertyValue("--text-edit-color").trim()||"oklch(62.3% 0.214 259.815)",N=(e,o,r="canvas")=>{const s=x();if(!s)return;const i=f(e),a="true"===e.contentEditable,d=document.documentElement.clientWidth||window.innerWidth,l=document.documentElement.clientHeight||window.innerHeight;s.setAttribute("width",d.toString()),s.setAttribute("height",l.toString()),i?s.classList.add("is-instance"):s.classList.remove("is-instance"),a?s.classList.add("is-text-edit"):s.classList.remove("is-text-edit");const u=s.querySelector(".highlight-frame-group");if(!u)return;const m=u.querySelector("rect");if(!m)return;i?m.setAttribute("stroke",C()):a?m.setAttribute("stroke",k()):m.removeAttribute("stroke");const h=(n()||document.body).querySelector(".highlight-frame-tools-wrapper"),g=h?.querySelector(".node-tools"),p=c(["zoom","current"],r)??1,v=t(e),{top:b,left:y,width:w,height:E}=v,L=Math.max(w,3),A=b+E;h&&(i?h.classList.add("is-instance"):h.classList.remove("is-instance"),a?h.classList.add("is-text-edit"):h.classList.remove("is-text-edit")),g&&(i?g.classList.add("is-instance"):g.classList.remove("is-instance"),a?g.classList.add("is-text-edit"):g.classList.remove("is-text-edit")),u.setAttribute("transform",`translate(${y}, ${b})`),m.setAttribute("width",L.toString()),m.setAttribute("height",E.toString());const S=u.querySelector(".handle-top-left"),N=u.querySelector(".handle-top-right"),q=u.querySelector(".handle-bottom-right"),F=u.querySelector(".handle-bottom-left");[S,N,q,F].forEach(e=>{e&&(i?e.setAttribute("stroke",C()):a?e.setAttribute("stroke",k()):e.removeAttribute("stroke"))}),S&&(S.setAttribute("x",(-3).toString()),S.setAttribute("y",(-3).toString())),N&&(N.setAttribute("x",(L-3).toString()),N.setAttribute("y",(-3).toString())),q&&(q.setAttribute("x",(L-3).toString()),q.setAttribute("y",(E-3).toString())),F&&(F.setAttribute("x",(-3).toString()),F.setAttribute("y",(E-3).toString())),h&&(h.style.transform=`translate(${y}px, ${A}px)`),p<=10?o.style.setProperty("--tool-opacity","1"):o.style.setProperty("--tool-opacity","0")},q=e=>{const t=x();if(!t)return;const o=e.classList.contains("hidden")||e.classList.contains("select-none")?"none":"";t.style.display=o;const r=(n()||document.body).querySelector(".highlight-frame-tools-wrapper");r&&(r.style.display=o)},F=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)}},H=(e,t,n=!1)=>{if(!t.some(e=>"characterData"===e.type||"childList"===e.type&&(e.addedNodes.length>0||e.removedNodes.length>0))&&!n)return;const o=e.textContent??"",r=e.getAttribute("data-node-id");console.log("textContentChanged",o,n),s("textContentChanged",{nodeId:r,textContent:o,final:n})},P=(e,t,n="canvas")=>{let o=[],r=null,s=null;const i=()=>{null===r&&(r=requestAnimationFrame(()=>{s=requestAnimationFrame(()=>{(()=>{if(o.length>0){const t=[...o];o=[],H(e,t,!1)}})(),r=null,s=null})}))},a=((e,t)=>{const n=new MutationObserver(e=>{t(e)});return n.observe(e,{subtree:!0,childList:!0,characterData:!0}),n})(e,r=>{o.push(...r),i(),console.log("refreshHighlightFrame in mutationObserver"),N(e,t,n)});return()=>{a.disconnect(),null!==r&&(cancelAnimationFrame(r),r=null),null!==s&&(cancelAnimationFrame(s),s=null),o=[]}},z=(e="canvas")=>{let t=null,n=!1,o=null;const r=()=>{if(n||!t)return;n=!0;const r=t;var s;H(r,[],!0),(s=r).contentEditable="false",s.classList.remove("is-editable"),s.style.outline="none",((e="canvas")=>{const t=c(["keyboard","disableTextEditMode"],e);t?.()})(e),o?.(),t=null,n=!1};return{enableEditMode:(n,s)=>{if(t===n)return;t&&t!==n&&r();const i=(e=>Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim()))(n);i&&(t=n,(e=>{e.contentEditable="true",e.classList.add("is-editable"),e.style.outline="none"})(n),((e="canvas")=>{const t=c(["keyboard","enableTextEditMode"],e);t?.()})(e),o=((e,t,n,o="canvas")=>{if(!t)return()=>{};e.addEventListener("blur",n);const r=F(e),s=P(e,t,o);return()=>{e.removeEventListener("blur",n),r(),s?.()}})(n,s,r,e))},blurEditMode:r,getEditableNode:()=>t,isEditing:()=>null!==t}},M=4,$=2560,T=[{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"}],V=(e,t,n)=>{const o=parseFloat(document.body.dataset.zoom||"1"),r=((e,t)=>{const n=e+Math.round(t);return Math.max(M,Math.min($,n))})(n,(e.clientX-t)/o);return r},D=(e,t)=>{e.style.setProperty("--container-width",`${t}px`),((e,t)=>{e.querySelectorAll(".resize-preset-button").forEach((e,n)=>{n<T.length&&(T[n].rawValue===t?e.classList.add("is-active"):e.classList.remove("is-active"))})})(e,t)};e.createCanvasObserver=function(e="canvas"){const t=document.querySelector(".transform-layer");if(!t)return{disconnect:()=>{}};const n=new MutationObserver(()=>{((e="canvas")=>{const t=c(["zoom","current"],e)??1;document.body.style.setProperty("--zoom",t.toFixed(5)),document.body.style.setProperty("--stroke-width",(2/t).toFixed(3)),document.body.dataset.zoom=t.toFixed(5),document.body.dataset.strokeWidth=(2/t).toFixed(3)})(e);const t=window.nodeTools;t?.refreshHighlightFrame&&t.refreshHighlightFrame(),l()});n.observe(t,{attributes:!0,attributeOldValue:!0,subtree:!0,childList:!0});const o=()=>{l()};return window.addEventListener("resize",o),l(),{disconnect:function(){n.disconnect(),window.removeEventListener("resize",o)}}},e.createNodeTools=(e,t="canvas")=>{const n=e;let o=null,r=null,i=null,a=null;const d=z(t),l=e=>{if(a!==e){if(d.isEditing()){const t=d.getEditableNode();t&&t!==e&&d.blurEditMode()}if(o?.disconnect(),r?.disconnect(),i?.disconnect(),e&&n){const d=()=>{if(!document.contains(e))return u(),a=null,o?.disconnect(),r?.disconnect(),i?.disconnect(),void s("selectedNodeChanged",null)};r=new MutationObserver(()=>{d(),document.contains(e)&&(console.log("refreshHighlightFrame in mutationObserver 2"),N(e,n,t),q(e))}),r.observe(e,{attributes:!0,characterData:!0});const l=e.parentElement;l&&(i=new MutationObserver(t=>{for(const n of t)if("childList"===n.type)for(const t of Array.from(n.removedNodes))if(t===e||t instanceof Node&&t.contains(e))return void d()}),i.observe(l,{childList:!0,subtree:!1})),o=((e,t)=>{const n=new ResizeObserver(e=>{t(e)});return n.observe(e),n})(e,()=>{d(),document.contains(e)&&(N(e,n,t),console.log("refreshHighlightFrame in resizeObserver"),q(e))})}a=e,s("selectedNodeChanged",e?.getAttribute("data-node-id")??null),S(e),e?(S(e),n&&(q(e),q(e))):u()}},c=y(n,l,()=>{d.isEditing()&&d.blurEditMode(),a&&n&&(u(),a=null,o?.disconnect(),r?.disconnect(),i?.disconnect())},d),m={selectNode:l,getSelectedNode:()=>a,refreshHighlightFrame:()=>{a&&n&&(N(a,n,t),q(a))},clearSelectedNode:()=>{u(),a=null,o?.disconnect(),r?.disconnect(),i?.disconnect()},getEditableNode:()=>d.getEditableNode(),cleanup:()=>{c(),o?.disconnect(),r?.disconnect(),i?.disconnect(),d.blurEditMode(),u(),a=null,s("selectedNodeChanged",null)}};var h,g;return h="nodeTools",g=m,"undefined"!=typeof window&&(window[h]=g),m},e.createViewport=(e,t)=>{const o=n(),r=e.querySelector(".resize-handle");r&&r.remove();const s=(e=>{const t=document.createElement("div");return t.className="resize-handle",e.appendChild(t),t})(e),i=t??400;e.style.setProperty("--container-width",`${i}px`),((e,t,n)=>{const o=document.createElement("div");o.className="resize-presets",T.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)})(s,e,D);let a=!1,d=0,c=0;const u=((e,t,n,o,r)=>{const s=e=>{e.relatedTarget||e.target!==document&&e.target!==document.documentElement||r()};return e.addEventListener("mousedown",t),document.addEventListener("mousemove",n),document.addEventListener("mouseup",o),document.addEventListener("mouseleave",s),window.addEventListener("blur",r),()=>{e.removeEventListener("mousedown",t),document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o),document.removeEventListener("mouseleave",s),window.removeEventListener("blur",r)}})(s,t=>{t.preventDefault(),t.stopPropagation(),a=!0,d=t.clientX,c=e.offsetWidth},t=>{if(!a)return;o&&(o.style.cursor="ew-resize");const n=V(t,d,c);D(e,n)},e=>{e.preventDefault(),e.stopPropagation(),o&&(o.style.cursor="default"),a=!1},()=>{o&&(o.style.cursor="default"),a=!1});l();return{setWidth:t=>{D(e,t),l();const n=window.nodeTools,o=n?.getSelectedNode?.(),r=document.querySelector('[data-role="node-provider"]');o&&r&&N(o,r)},cleanup:()=>{a=!1,u(),s.remove(),l()}}}});

package/dist/styles.css

@@ -1 +1 @@
-:root{--primary-color:oklch(0.6235 0.22 294);--uncode-color:oklch(45.7% 0.24 277.023);--component-color:oklch(65.6% 0.241 354.308);--text-edit-color:oklch(62.3% 0.214 259.815);--text-edit-selection-color:oklch(62.3% 0.214 259.815/0.2);--handle-color:oklch(55.2% 0.016 285.938);--handle-color-transparent:oklch(55.2% 0.016 285.938/0.7);--primary-color-selection:oklch(0.59 0.18 294/0.3);--text-color-white:#fff;--spacing-2xs:0.1875rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:1.25rem;--transition-fast:0.1s ease-in-out;--transition-medium:0.2s ease-in-out;--z-index-high:10000;--z-index-highlight:500;--z-index-medium:1000;--letter-spacing:0.02em;--font-family-primary:"Manrope",sans-serif}.node-provider{::selection{background:transparent}::-moz-selection{background:transparent}::-webkit-selection{background:transparent}}.node-tools{bottom:0;contain:layout style;display:flex;gap:var(--spacing-xs);justify-content:center;left:0;opacity:var(--tool-opacity);padding-top:var(--spacing-2xs);position:absolute;top:0;transform:translate3d(0,100%,0);transform-origin:bottom center;transition:opacity var(--transition-fast);z-index:var(--z-index-high)}.highlight-frame-overlay{contain:layout style paint;height:100vh;inset:0;overflow:visible;pointer-events:none;position:absolute;width:100vw;will-change:transform;z-index:var(--z-index-highlight)}.highlight-frame-rect{fill:none;stroke:var(--primary-color);stroke-width:2px}.highlight-frame-overlay.is-instance .highlight-frame-rect{stroke:var(--component-color)}.highlight-frame-overlay.is-text-edit .highlight-frame-rect{stroke:var(--text-edit-color)}.highlight-frame-handle{fill:#fff;stroke:var(--primary-color);stroke-width:1px;cursor:nwse-resize;pointer-events:auto}.highlight-frame-overlay.is-instance .highlight-frame-handle{stroke:var(--component-color)}.highlight-frame-overlay.is-text-edit .highlight-frame-handle{stroke:var(--text-edit-color)}.highlight-frame-handle.handle-top-left{cursor:nwse-resize}.highlight-frame-handle.handle-top-right{cursor:nesw-resize}.highlight-frame-handle.handle-bottom-right{cursor:nwse-resize}.highlight-frame-handle.handle-bottom-left{cursor:nesw-resize}.highlight-frame-tools-wrapper{contain:layout style;left:0;pointer-events:none;position:absolute;top:0;z-index:var(--z-index-highlight)}.tag-label{align-items:center;background-color:var(--primary-color);border-radius:var(--spacing-sm);color:var(--text-color-white);display:flex;font-size:.575rem;font-weight:500;height:1rem;justify-content:center;line-height:1.4;padding:.5625rem var(--spacing-sm);white-space:nowrap}.highlight-frame-tools-wrapper.is-instance .tag-label,.node-tools.is-instance .tag-label{background-color:var(--component-color)}.highlight-frame-tools-wrapper.is-text-edit .tag-label,.node-tools.is-text-edit .tag-label{background-color:var(--text-edit-color)}.viewport{position:relative;width:var(--container-width)}.resize-handle{align-items:center;cursor:ew-resize;display:flex;height:40px;justify-content:center;opacity:0;pointer-events:auto;position:absolute;right:-12px;top:var(--spacing-lg);transform:scale(calc(1/var(--zoom)));transform-origin:top left;transition:opacity var(--transition-fast),visibility var(--transition-fast);visibility:hidden;width:12px;z-index:var(--z-index-high)}.viewport:hover .resize-handle{opacity:1;visibility:visible}.resize-handle:before{background:var(--handle-color);border-radius:4px;content:"";height:32px;position:relative;right:0;top:0;transition:transform var(--transition-medium);width:3px}.resize-handle:hover:before{transform:scaleY(1.3)}.resize-presets{display:flex;flex-direction:column;font-family:var(--font-family-primary);gap:var(--spacing-xs);left:0;letter-spacing:var(--letter-spacing);opacity:0;padding-left:var(--spacing-lg);position:absolute;top:0;transition:visibility var(--transition-fast),opacity var(--transition-fast);visibility:hidden}.resize-handle:hover .resize-presets{opacity:1;visibility:visible}.resize-preset-button{text-wrap:nowrap;backdrop-filter:blur(8px);background:var(--handle-color-transparent);border:none;border-radius:var(--spacing-md);color:var(--text-color-white);cursor:pointer;font-size:.625rem;padding:var(--spacing-xs) var(--spacing-md);text-align:left;transition:background var(--transition-fast);width:fit-content;&:hover{background:var(--handle-color)}&.is-active{background:var(--uncode-color)}}.is-editable{outline:none;user-select:text;&::selection{background:var(--text-edit-selection-color)}&::-moz-selection{background:var(--text-edit-selection-color)}&::-webkit-selection{background:var(--text-edit-selection-color)}}
+:root{--primary-color:oklch(0.6235 0.22 294);--uncode-color:oklch(45.7% 0.24 277.023);--component-color:oklch(65.6% 0.241 354.308);--text-edit-color:oklch(62.3% 0.214 259.815);--text-edit-selection-color:oklch(62.3% 0.214 259.815/0.2);--handle-color:oklch(55.2% 0.016 285.938);--handle-color-transparent:oklch(55.2% 0.016 285.938/0.7);--primary-color-selection:oklch(0.59 0.18 294/0.3);--text-color-white:#fff;--spacing-2xs:0.1875rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:1.25rem;--transition-fast:0.1s ease-in-out;--transition-medium:0.2s ease-in-out;--z-index-high:10000;--z-index-highlight:500;--z-index-medium:1000;--letter-spacing:0.02em;--font-family-primary:"Manrope",sans-serif}.node-provider{::selection{background:transparent}::-moz-selection{background:transparent}::-webkit-selection{background:transparent}}.node-tools{bottom:0;contain:layout style;display:flex;gap:var(--spacing-xs);justify-content:center;left:0;opacity:var(--tool-opacity);padding-top:var(--spacing-2xs);position:absolute;top:0;transform:translate3d(0,100%,0);transform-origin:bottom center;transition:opacity var(--transition-fast);z-index:var(--z-index-high)}.highlight-frame-overlay,.viewport-labels-overlay{contain:layout style paint;height:100vh;inset:0;overflow:visible;pointer-events:none;position:absolute;width:100vw;will-change:transform;z-index:var(--z-index-highlight)}.viewport-label-text{fill:oklch(.5 0 0);font-family:var(--font-family-primary);font-size:.6875rem;font-weight:500;letter-spacing:var(--letter-spacing);pointer-events:auto;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}@media (prefers-color-scheme:dark){.viewport-label-text{fill:oklch(.3 0 0)}.viewport-label-text:hover{fill:oklch(0 0 0)}}@media (prefers-color-scheme:light){.viewport-label-text{fill:oklch(.7 0 0)}.viewport-label-text:hover{fill:oklch(.3 0 0)}}.highlight-frame-rect{fill:none;stroke:var(--primary-color);stroke-width:2px}.highlight-frame-overlay.is-instance .highlight-frame-rect{stroke:var(--component-color)}.highlight-frame-overlay.is-text-edit .highlight-frame-rect{stroke:var(--text-edit-color)}.highlight-frame-handle{fill:#fff;stroke:var(--primary-color);stroke-width:1px;cursor:nwse-resize;pointer-events:auto}.highlight-frame-overlay.is-instance .highlight-frame-handle{stroke:var(--component-color)}.highlight-frame-overlay.is-text-edit .highlight-frame-handle{stroke:var(--text-edit-color)}.highlight-frame-handle.handle-top-left{cursor:nwse-resize}.highlight-frame-handle.handle-top-right{cursor:nesw-resize}.highlight-frame-handle.handle-bottom-right{cursor:nwse-resize}.highlight-frame-handle.handle-bottom-left{cursor:nesw-resize}.highlight-frame-tools-wrapper{contain:layout style;left:0;pointer-events:none;position:absolute;top:0;z-index:var(--z-index-highlight)}.tag-label{align-items:center;background-color:var(--primary-color);border-radius:var(--spacing-sm);color:var(--text-color-white);display:flex;font-size:.575rem;font-weight:500;height:1rem;justify-content:center;line-height:1.4;padding:.5625rem var(--spacing-sm);white-space:nowrap}.highlight-frame-tools-wrapper.is-instance .tag-label,.node-tools.is-instance .tag-label{background-color:var(--component-color)}.highlight-frame-tools-wrapper.is-text-edit .tag-label,.node-tools.is-text-edit .tag-label{background-color:var(--text-edit-color)}.viewport{left:0;position:absolute;top:0;width:var(--container-width)}.resize-handle{align-items:center;cursor:ew-resize;display:flex;height:40px;justify-content:center;opacity:0;pointer-events:auto;position:absolute;right:-12px;top:var(--spacing-lg);transform:scale(calc(1/var(--zoom)));transform-origin:top left;transition:opacity var(--transition-fast),visibility var(--transition-fast);visibility:hidden;width:12px;z-index:var(--z-index-high)}.viewport:hover .resize-handle{opacity:1;visibility:visible}.resize-handle:before{background:var(--handle-color);border-radius:4px;content:"";height:32px;position:relative;right:0;top:0;transition:transform var(--transition-medium);width:3px}.resize-handle:hover:before{transform:scaleY(1.3)}.resize-presets{display:flex;flex-direction:column;font-family:var(--font-family-primary);gap:var(--spacing-xs);left:0;letter-spacing:var(--letter-spacing);opacity:0;padding-left:var(--spacing-lg);position:absolute;top:0;transition:visibility var(--transition-fast),opacity var(--transition-fast);visibility:hidden}.resize-handle:hover .resize-presets{opacity:1;visibility:visible}.resize-preset-button{text-wrap:nowrap;backdrop-filter:blur(8px);background:var(--handle-color-transparent);border:none;border-radius:var(--spacing-md);color:var(--text-color-white);cursor:pointer;font-size:.625rem;padding:var(--spacing-xs) var(--spacing-md);text-align:left;transition:background var(--transition-fast);width:fit-content;&:hover{background:var(--handle-color)}&.is-active{background:var(--uncode-color)}}.is-editable{outline:none;user-select:text;&::selection{background:var(--text-edit-selection-color)}&::-moz-selection{background:var(--text-edit-selection-color)}&::-webkit-selection{background:var(--text-edit-selection-color)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-edit-utils/core",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "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,3 +1,4 @@
+import { refreshViewportLabels } from "../viewport/label/refreshViewportLabels";
 import { applyCanvasState } from "./helpers/applyCanvasState";
 import type { CanvasObserver } from "./types";
 
@@ -20,6 +21,9 @@ export function createCanvasObserver(canvasName: string = "canvas"): CanvasObser
     if (nodeTools?.refreshHighlightFrame) {
       nodeTools.refreshHighlightFrame();
     }
+
+    // Refresh viewport labels
+    refreshViewportLabels();
   });
 
   observer.observe(transformLayer, {
@@ -29,8 +33,18 @@ export function createCanvasObserver(canvasName: string = "canvas"): CanvasObser
     childList: true,
   });
 
+  // Handle window resize for viewport labels
+  const handleResize = (): void => {
+    refreshViewportLabels();
+  };
+  window.addEventListener("resize", handleResize);
+
+  // Initial refresh of viewport labels
+  refreshViewportLabels();
+
   function disconnect(): void {
     observer.disconnect();
+    window.removeEventListener("resize", handleResize);
   }
 
   return {