@node-edit-utils/core 2.3.1 → 2.3.3

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

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(.5 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.1",
+  "version": "2.3.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,3 +1,5 @@
+import { getNodeTools } from "../helpers/getNodeTools";
+import { refreshViewportLabels } from "../viewport/label/refreshViewportLabels";
 import { applyCanvasState } from "./helpers/applyCanvasState";
 import type { CanvasObserver } from "./types";
 
@@ -14,12 +16,14 @@ export function createCanvasObserver(canvasName: string = "canvas"): CanvasObser
     applyCanvasState(canvasName);
 
     // Refresh highlight frame (throttled via withRAFThrottle)
-    // biome-ignore lint/suspicious/noExplicitAny: global window extension
-    const nodeTools = (window as any).nodeTools;
+    const nodeTools = getNodeTools();
 
     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 {

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

@@ -0,0 +1,6 @@
+import { getCanvasContainer } from "./getCanvasContainer";
+
+export const getCanvasContainerOrBody = (): HTMLElement => {
+  return getCanvasContainer() || document.body;
+};
+

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

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

package/src/lib/helpers/adjustForZoom.ts

@@ -0,0 +1,4 @@
+export const adjustForZoom = (value: number, zoom: number, precision: number = 5): number => {
+  return parseFloat((value / zoom).toFixed(precision));
+};
+

package/src/lib/helpers/createDragHandler.ts

@@ -0,0 +1,171 @@
+/**
+ * State tracked during a drag operation
+ */
+export interface DragState {
+  isDragging: boolean;
+  hasDragged: boolean;
+  startX: number;
+  startY: number;
+}
+
+/**
+ * Callbacks for drag operations
+ */
+export interface DragCallbacks {
+  /**
+   * Called when drag starts
+   * @param event - Mouse event that started the drag
+   * @param state - Current drag state
+   */
+  onStart?: (event: MouseEvent, state: DragState) => void;
+  /**
+   * Called during drag movement
+   * @param event - Mouse move event
+   * @param state - Current drag state with updated deltas
+   */
+  onDrag: (event: MouseEvent, state: DragState & { deltaX: number; deltaY: number }) => void;
+  /**
+   * Called when drag stops
+   * @param event - Mouse event that stopped the drag
+   * @param state - Final drag state
+   */
+  onStop?: (event: MouseEvent, state: DragState) => void;
+  /**
+   * Called when drag is cancelled (e.g., window blur)
+   * @param state - Current drag state
+   */
+  onCancel?: (state: DragState) => void;
+  /**
+   * Called on click events to prevent default behavior
+   * @param event - Click event
+   * @param state - Current drag state
+   */
+  onPreventClick?: (event: MouseEvent, state: DragState) => void;
+}
+
+/**
+ * Options for configuring the drag handler
+ */
+export interface DragHandlerOptions {
+  /**
+   * Whether to prevent default behavior on start/stop events
+   * @default true
+   */
+  preventDefault?: boolean;
+  /**
+   * Whether to stop event propagation on start/stop events
+   * @default true
+   */
+  stopPropagation?: boolean;
+}
+
+/**
+ * Creates a reusable drag handler for mouse drag operations
+ * @param element - Element that triggers the drag (mousedown listener attached here)
+ * @param callbacks - Callbacks for drag lifecycle events
+ * @param options - Configuration options
+ * @returns Cleanup function to remove all event listeners
+ */
+export function createDragHandler(
+  element: HTMLElement | SVGElement,
+  callbacks: DragCallbacks,
+  options: DragHandlerOptions = {}
+): () => void {
+  const { preventDefault = true, stopPropagation = true } = options;
+
+  const state: DragState = {
+    isDragging: false,
+    hasDragged: false,
+    startX: 0,
+    startY: 0,
+  };
+
+  const startDrag = (event: MouseEvent): void => {
+    if (preventDefault) {
+      event.preventDefault();
+    }
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
+
+    state.isDragging = true;
+    state.hasDragged = false;
+    state.startX = event.clientX;
+    state.startY = event.clientY;
+
+    callbacks.onStart?.(event, state);
+  };
+
+  const handleDrag = (event: MouseEvent): void => {
+    if (!state.isDragging) return;
+
+    const deltaX = event.clientX - state.startX;
+    const deltaY = event.clientY - state.startY;
+
+    state.hasDragged = true;
+
+    callbacks.onDrag(event, {
+      ...state,
+      deltaX,
+      deltaY,
+    });
+  };
+
+  const stopDrag = (event: MouseEvent): void => {
+    if (!state.isDragging) return;
+
+    if (preventDefault) {
+      event.preventDefault();
+    }
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
+
+    state.isDragging = false;
+
+    callbacks.onStop?.(event, state);
+  };
+
+  const cancelDrag = (): void => {
+    if (!state.isDragging) return;
+
+    state.isDragging = false;
+    callbacks.onCancel?.(state);
+  };
+
+  const preventClick = (event: MouseEvent): void => {
+    if (preventDefault) {
+      event.preventDefault();
+    }
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
+
+    callbacks.onPreventClick?.(event, state);
+
+    // Reset hasDragged flag after handling the click
+    if (state.hasDragged) {
+      state.hasDragged = false;
+    }
+  };
+
+  // Attach event listeners
+  element.addEventListener("mousedown", startDrag as EventListener);
+  if (callbacks.onPreventClick) {
+    element.addEventListener("click", preventClick as EventListener);
+  }
+  document.addEventListener("mousemove", handleDrag as EventListener);
+  document.addEventListener("mouseup", stopDrag as EventListener);
+  window.addEventListener("blur", cancelDrag);
+
+  // Return cleanup function
+  return () => {
+    element.removeEventListener("mousedown", startDrag as EventListener);
+    if (callbacks.onPreventClick) {
+      element.removeEventListener("click", preventClick as EventListener);
+    }
+    document.removeEventListener("mousemove", handleDrag as EventListener);
+    document.removeEventListener("mouseup", stopDrag as EventListener);
+    window.removeEventListener("blur", cancelDrag);
+  };
+}

package/src/lib/helpers/getNodeProvider.ts

@@ -0,0 +1,4 @@
+export const getNodeProvider = (): HTMLElement | null => {
+  return document.querySelector('[data-role="node-provider"]') as HTMLElement | null;
+};
+

package/src/lib/helpers/getNodeTools.ts

@@ -0,0 +1,6 @@
+import type { NodeTools } from "../node-tools/types";
+
+export const getNodeTools = (): NodeTools | undefined => {
+  return (window as Window & { nodeTools?: NodeTools }).nodeTools;
+};
+

package/src/lib/helpers/getViewportDimensions.ts

@@ -0,0 +1,7 @@
+export const getViewportDimensions = (): { width: number; height: number } => {
+  return {
+    width: document.documentElement.clientWidth || window.innerWidth,
+    height: document.documentElement.clientHeight || window.innerHeight,
+  };
+};
+

package/src/lib/helpers/index.ts

@@ -1 +1,9 @@
-export { withRAF, withRAFThrottle, withDoubleRAF } from "./withRAF";
+export { adjustForZoom } from "./adjustForZoom";
+export type { DragCallbacks, DragHandlerOptions, DragState } from "./createDragHandler";
+export { createDragHandler } from "./createDragHandler";
+export { getNodeProvider } from "./getNodeProvider";
+export { getNodeTools } from "./getNodeTools";
+export { getViewportDimensions } from "./getViewportDimensions";
+export { parseTransform2d, parseTransform3d } from "./parseTransform";
+export { toggleClass } from "./toggleClass";
+export { withDoubleRAF, withRAF, withRAFThrottle } from "./withRAF";

package/src/lib/helpers/parseTransform.ts

@@ -0,0 +1,9 @@
+export const parseTransform3d = (transform: string): { x: number; y: number } => {
+  const match = transform.match(/translate3d\((-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px\)/);
+  return match ? { x: parseFloat(match[1]), y: parseFloat(match[2]) } : { x: 0, y: 0 };
+};
+
+export const parseTransform2d = (transform: string | null): { x: number; y: number } => {
+  const match = transform?.match(/translate\((-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)\)/);
+  return match ? { x: parseFloat(match[1]), y: parseFloat(match[2]) } : { x: 0, y: 0 };
+};

package/src/lib/helpers/toggleClass.ts

@@ -0,0 +1,9 @@
+export const toggleClass = (element: Element | null, className: string, condition: boolean): void => {
+  if (!element) return;
+  if (condition) {
+    element.classList.add(className);
+  } else {
+    element.classList.remove(className);
+  }
+};
+

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

@@ -71,6 +71,7 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
         checkNodeExists();
         if (!document.contains(node)) return;
 
+        console.log("refreshHighlightFrame in mutationObserver 2");
         refreshHighlightFrame(node, nodeProvider, canvasName);
         updateHighlightFrameVisibility(node);
       });
@@ -78,8 +79,8 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
       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
@@ -111,6 +112,7 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
         if (!document.contains(node)) return; // Exit early if node was removed
 
         refreshHighlightFrame(node, nodeProvider, canvasName);
+        console.log("refreshHighlightFrame in resizeObserver");
         updateHighlightFrameVisibility(node);
       });
     }
@@ -119,9 +121,13 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
     sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
     highlightNode(node) ?? null;
 
-    if (node && nodeProvider) {
-      updateHighlightFrameVisibility(node);
-      updateHighlightFrameVisibility(node);
+    if (node) {
+      highlightNode(node);
+      if (nodeProvider) {
+        updateHighlightFrameVisibility(node);
+      }
+    } else {
+      clearHighlightFrame();
     }
   };
 

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

@@ -1,8 +1,7 @@
-import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
+import { getCanvasContainerOrBody } from "@/lib/canvas/helpers/getCanvasContainerOrBody";
 
 export const clearHighlightFrame = (): void => {
-  const canvasContainer = getCanvasContainer();
-  const container = canvasContainer || document.body;
+  const container = getCanvasContainerOrBody();
   
   const frame = container.querySelector(".highlight-frame-overlay");
   if (frame) {

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

@@ -1,4 +1,5 @@
-import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
+import { getCanvasContainerOrBody } from "@/lib/canvas/helpers/getCanvasContainerOrBody";
+import { getViewportDimensions } from "@/lib/helpers/getViewportDimensions";
 import { createCornerHandles } from "./createCornerHandles";
 import { getScreenBounds } from "./helpers/getScreenBounds";
 
@@ -36,8 +37,7 @@ export const createHighlightFrame = (node: HTMLElement, isInstance: boolean = fa
   svg.style.pointerEvents = "none";
   svg.style.zIndex = "500";
 
-  const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-  const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+  const { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
   svg.setAttribute("width", viewportWidth.toString());
   svg.setAttribute("height", viewportHeight.toString());
 
@@ -65,12 +65,8 @@ export const createHighlightFrame = (node: HTMLElement, isInstance: boolean = fa
   createCornerHandles(group, minWidth, height, isInstance, isTextEdit);
 
   svg.appendChild(group);
-  const canvasContainer = getCanvasContainer();
-  if (canvasContainer) {
-    canvasContainer.appendChild(svg);
-  } else {
-    document.body.appendChild(svg);
-  }
+  const container = getCanvasContainerOrBody();
+  container.appendChild(svg);
 
   return svg as SVGSVGElement;
 };

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

@@ -1,15 +1,12 @@
+import { toggleClass } from "@/lib/helpers/toggleClass";
 import { createTagLabel } from "./createTagLabel";
 
 export const createToolsContainer = (node: HTMLElement, highlightFrame: HTMLElement, isInstance: boolean = false, isTextEdit: boolean = false): void => {
   const nodeTools = document.createElement("div");
 
   nodeTools.className = "node-tools";
-  if (isInstance) {
-    nodeTools.classList.add("is-instance");
-  }
-  if (isTextEdit) {
-    nodeTools.classList.add("is-text-edit");
-  }
+  toggleClass(nodeTools, "is-instance", isInstance);
+  toggleClass(nodeTools, "is-text-edit", isTextEdit);
   highlightFrame.appendChild(nodeTools);
 
   createTagLabel(node, nodeTools);

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

@@ -1,4 +1,5 @@
 import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
+import { adjustForZoom } from "@/lib/helpers/adjustForZoom";
 
 export function getElementBounds(
   element: Element,
@@ -16,12 +17,12 @@ export function getElementBounds(
   const relativeTop = elementRect.top - componentRootRect.top;
   const relativeLeft = elementRect.left - componentRootRect.left;
 
-  const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
+  const zoom = (getCanvasWindowValue(["zoom", "current"], canvasName) as number | undefined) ?? 1;
 
-  const top = parseFloat((relativeTop / zoom).toFixed(5));
-  const left = parseFloat((relativeLeft / zoom).toFixed(5));
-  const width = Math.max(4, parseFloat((elementRect.width / zoom).toFixed(5)));
-  const height = parseFloat((elementRect.height / zoom).toFixed(5));
+  const top = adjustForZoom(relativeTop, zoom);
+  const left = adjustForZoom(relativeLeft, zoom);
+  const width = Math.max(4, adjustForZoom(elementRect.width, zoom));
+  const height = adjustForZoom(elementRect.height, zoom);
 
   return {
     top,

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

@@ -1,7 +1,6 @@
-import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
+import { getCanvasContainerOrBody } from "@/lib/canvas/helpers/getCanvasContainerOrBody";
 
 export function getHighlightFrameElement(): SVGSVGElement | null {
-  const canvasContainer = getCanvasContainer();
-  const container = canvasContainer || document.body;
+  const container = getCanvasContainerOrBody();
   return container.querySelector(".highlight-frame-overlay") as SVGSVGElement | null;
 }

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

@@ -1,4 +1,5 @@
-import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
+import { getCanvasContainerOrBody } from "@/lib/canvas/helpers/getCanvasContainerOrBody";
+import { toggleClass } from "@/lib/helpers/toggleClass";
 import { isComponentInstance } from "../select/helpers/isComponentInstance";
 import { createHighlightFrame } from "./createHighlightFrame";
 import { createToolsContainer } from "./createToolsContainer";
@@ -9,9 +10,8 @@ export const highlightNode = (node: HTMLElement | null): void => {
   if (!node) return;
 
   const existingHighlightFrame = getHighlightFrameElement();
-  const canvasContainer = getCanvasContainer();
-  const existingToolsWrapper =
-    canvasContainer?.querySelector(".highlight-frame-tools-wrapper") || document.body.querySelector(".highlight-frame-tools-wrapper");
+  const container = getCanvasContainerOrBody();
+  const existingToolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
 
   if (existingHighlightFrame) {
     existingHighlightFrame.remove();
@@ -35,12 +35,8 @@ export const highlightNode = (node: HTMLElement | null): void => {
   // Create tools wrapper using CSS transform (GPU-accelerated)
   const toolsWrapper = document.createElement("div");
   toolsWrapper.classList.add("highlight-frame-tools-wrapper");
-  if (isInstance) {
-    toolsWrapper.classList.add("is-instance");
-  }
-  if (isTextEdit) {
-    toolsWrapper.classList.add("is-text-edit");
-  }
+  toggleClass(toolsWrapper, "is-instance", isInstance);
+  toggleClass(toolsWrapper, "is-text-edit", isTextEdit);
   toolsWrapper.style.position = "absolute";
   toolsWrapper.style.transform = `translate(${left}px, ${bottomY}px)`;
   toolsWrapper.style.transformOrigin = "left center";
@@ -48,9 +44,5 @@ export const highlightNode = (node: HTMLElement | null): void => {
   toolsWrapper.style.zIndex = "500";
 
   createToolsContainer(node, toolsWrapper, isInstance, isTextEdit);
-  if (canvasContainer) {
-    canvasContainer.appendChild(toolsWrapper);
-  } else {
-    document.body.appendChild(toolsWrapper);
-  }
+  container.appendChild(toolsWrapper);
 };