@node-edit-utils/core 2.1.9 → 2.2.1

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

package/dist/styles.css

@@ -1 +1 @@
-:root{--primary-color:oklch(0.6235 0.22 294);--uncode-color:oklch(45.7% 0.24 277.023);--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-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-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;display:flex;gap:var(--spacing-xs);justify-content:center;left:0;opacity:var(--tool-opacity);padding-top:var(--spacing-xs);position:absolute;top:0;transform:scale(calc(1/var(--zoom))) translate3d(0,100%,0);transform-origin:bottom left;transition:opacity var(--transition-fast);z-index:var(--z-index-high)}.highlight-frame{font-family:var(--font-family-primary);height:var(--frame-height);left:var(--frame-left);letter-spacing:var(--letter-spacing);pointer-events:none;position:absolute;top:var(--frame-top);width:var(--frame-width);z-index:var(--z-index-medium)}.highlight-frame-svg{height:100%;left:0;overflow:visible;position:absolute;top:0;width:100%}.highlight-frame-rect{fill:none;stroke:var(--primary-color);stroke-width:var(--stroke-width)}.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;padding:.5625rem var(--spacing-sm);text-transform:uppercase}.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(--primary-color-selection)}&::-moz-selection{background:var(--primary-color-selection)}&::-webkit-selection{background:var(--primary-color-selection)}}
+: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);--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:5000;--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;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{height:100vh;inset:0;overflow:visible;pointer-events:none;position:fixed;width:100vw;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-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-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;pointer-events:none;position:fixed;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;padding:.5625rem var(--spacing-sm);text-transform:uppercase}.highlight-frame-tools-wrapper.is-instance .tag-label,.node-tools.is-instance .tag-label{background-color:var(--component-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(--primary-color-selection)}&::-moz-selection{background:var(--primary-color-selection)}&::-webkit-selection{background:var(--primary-color-selection)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-edit-utils/core",
-  "version": "2.1.9",
+  "version": "2.2.1",
   "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,4 +1,3 @@
-import { withRAFThrottle } from "../helpers/withRAF";
 import { applyCanvasState } from "./helpers/applyCanvasState";
 import type { CanvasObserver } from "./types";
 
@@ -11,12 +10,16 @@ export function createCanvasObserver(): CanvasObserver {
     };
   }
 
-  const throttledUpdate = withRAFThrottle(() => {
+  const observer = new MutationObserver(() => {
     applyCanvasState();
-  });
 
-  const observer = new MutationObserver(() => {
-    throttledUpdate();
+    // Refresh highlight frame (throttled via withRAFThrottle)
+    // biome-ignore lint/suspicious/noExplicitAny: global window extension
+    const nodeTools = (window as any).nodeTools;
+
+    if (nodeTools?.refreshHighlightFrame) {
+      nodeTools.refreshHighlightFrame();
+    }
   });
 
   observer.observe(transformLayer, {
@@ -27,7 +30,6 @@ export function createCanvasObserver(): CanvasObserver {
   });
 
   function disconnect(): void {
-    throttledUpdate.cleanup();
     observer.disconnect();
   }
 

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

@@ -1,5 +1,5 @@
-import { withDoubleRAF } from "../helpers";
 import { connectResizeObserver } from "../helpers/observer/connectResizeObserver";
+import { withRAFThrottle } from "../helpers/withRAF";
 import { sendPostMessage } from "../post-message/sendPostMessage";
 import { bindToWindow } from "../window/bindToWindow";
 import { setupEventListener } from "./events/setupEventListener";
@@ -14,12 +14,16 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
   const nodeProvider = element;
 
   let resizeObserver: ResizeObserver | null = null;
-  let nodeResizeObserver: ResizeObserver | null = null;
   let mutationObserver: MutationObserver | null = null;
   let selectedNode: HTMLElement | null = null;
 
   const text = nodeText();
-  const throttledFrameRefresh = withDoubleRAF(refreshHighlightFrame);
+
+  // Combined throttled function for refresh + visibility update
+  const throttledRefreshAndVisibility = withRAFThrottle((node: HTMLElement, nodeProvider: HTMLElement) => {
+    refreshHighlightFrame(node, nodeProvider);
+    updateHighlightFrameVisibility(node);
+  });
 
   const handleEscape = (): void => {
     if (text.isEditing()) {
@@ -28,11 +32,10 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
 
     if (selectedNode) {
       if (nodeProvider) {
-        clearHighlightFrame(nodeProvider);
+        clearHighlightFrame();
         selectedNode = null;
 
         resizeObserver?.disconnect();
-        nodeResizeObserver?.disconnect();
         mutationObserver?.disconnect();
       }
     }
@@ -51,19 +54,16 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
     }
 
     resizeObserver?.disconnect();
-    nodeResizeObserver?.disconnect();
     mutationObserver?.disconnect();
 
     if (node && nodeProvider) {
       text.enableEditMode(node, nodeProvider);
 
-      resizeObserver = connectResizeObserver(nodeProvider, () => {
-        throttledFrameRefresh(node, nodeProvider);
-      });
-
       mutationObserver = new MutationObserver(() => {
-        throttledFrameRefresh(node, nodeProvider);
-        updateHighlightFrameVisibility(node, nodeProvider);
+        // throttledRefreshAndVisibility(node, nodeProvider);
+        console.log("mutationObserver", node);
+        refreshHighlightFrame(node, nodeProvider);
+        updateHighlightFrameVisibility(node);
       });
 
       mutationObserver.observe(node, {
@@ -71,18 +71,20 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
         characterData: true,
       });
 
-      nodeResizeObserver = connectResizeObserver(node, () => {
-        throttledFrameRefresh(node, nodeProvider);
-        updateHighlightFrameVisibility(node, nodeProvider);
+      resizeObserver = connectResizeObserver(node, () => {
+        // throttledRefreshAndVisibility(node, nodeProvider);
+        console.log("resizeObserver", node);
+        refreshHighlightFrame(node, nodeProvider);
+        updateHighlightFrameVisibility(node);
       });
     }
 
     selectedNode = node;
     sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
-    highlightNode(node, nodeProvider as HTMLElement) ?? null;
+    highlightNode(node) ?? null;
 
     if (node && nodeProvider) {
-      updateHighlightFrameVisibility(node, nodeProvider);
+      updateHighlightFrameVisibility(node);
     }
   };
 
@@ -92,24 +94,27 @@ export const createNodeTools = (element: HTMLElement | null): NodeTools => {
   const cleanup = (): void => {
     removeListeners();
     resizeObserver?.disconnect();
-    nodeResizeObserver?.disconnect();
     mutationObserver?.disconnect();
 
     text.blurEditMode();
-    throttledFrameRefresh.cleanup();
+    throttledRefreshAndVisibility.cleanup();
   };
 
   const nodeTools: NodeTools = {
     selectNode,
     getSelectedNode: () => selectedNode,
     refreshHighlightFrame: () => {
-      throttledFrameRefresh(selectedNode as HTMLElement, nodeProvider as HTMLElement);
+      if (selectedNode && nodeProvider) {
+        // Call directly (not throttled) since this is typically called from already-throttled contexts
+        // to avoid double RAF
+        refreshHighlightFrame(selectedNode, nodeProvider);
+        updateHighlightFrameVisibility(selectedNode);
+      }
     },
     clearSelectedNode: () => {
-      clearHighlightFrame(nodeProvider);
+      clearHighlightFrame();
       selectedNode = null;
       resizeObserver?.disconnect();
-      nodeResizeObserver?.disconnect();
       mutationObserver?.disconnect();
     },
     getEditableNode: () => text.getEditableNode(),

package/src/lib/node-tools/events/click/handleNodeClick.ts

@@ -11,7 +11,7 @@ export const handleNodeClick = (
   event.stopPropagation();
 
   if (nodeProvider && !nodeProvider.contains(event.target as Node)) {
-    clearHighlightFrame(nodeProvider);
+    clearHighlightFrame();
     onNodeSelected(null);
     return;
   }

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

@@ -1,12 +1,11 @@
-import { getHighlightFrameElement } from "./helpers/getHighlightFrameElement";
-
-export const clearHighlightFrame = (nodeProvider: HTMLElement | null): void => {
-  if (!nodeProvider) {
-    return;
+export const clearHighlightFrame = (): void => {
+  const frame = document.body.querySelector(".highlight-frame-overlay");
+  if (frame) {
+    frame.remove();
   }
 
-  const highlightFrame = getHighlightFrameElement(nodeProvider);
-  if (highlightFrame) {
-    highlightFrame.remove();
+  const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
+  if (toolsWrapper) {
+    toolsWrapper.remove();
   }
 };

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

@@ -0,0 +1,31 @@
+const HANDLE_SIZE = 6;
+
+const getComponentColor = (): string => {
+  return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
+};
+
+const createCornerHandle = (group: SVGGElement, x: number, y: number, className: string, isInstance: boolean = false): SVGRectElement => {
+  const handle = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  // Position relative to group (offset by half handle size to center on corner)
+  handle.setAttribute("x", (x - HANDLE_SIZE / 2).toString());
+  handle.setAttribute("y", (y - HANDLE_SIZE / 2).toString());
+  handle.setAttribute("width", HANDLE_SIZE.toString());
+  handle.setAttribute("height", HANDLE_SIZE.toString());
+  handle.setAttribute("vector-effect", "non-scaling-stroke");
+  handle.classList.add("highlight-frame-handle", className);
+
+  if (isInstance) {
+    handle.setAttribute("stroke", getComponentColor());
+  }
+
+  group.appendChild(handle);
+  return handle;
+};
+
+export const createCornerHandles = (group: SVGGElement, width: number, height: number, isInstance: boolean = false): void => {
+  // Create corner handles using relative coordinates (group handles positioning)
+  createCornerHandle(group, 0, 0, "handle-top-left", isInstance);
+  createCornerHandle(group, width, 0, "handle-top-right", isInstance);
+  createCornerHandle(group, width, height, "handle-bottom-right", isInstance);
+  createCornerHandle(group, 0, height, "handle-bottom-left", isInstance);
+};

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

@@ -1,37 +1,58 @@
-import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
-import { getElementBounds } from "./helpers/getElementBounds";
+import { createCornerHandles } from "./createCornerHandles";
+import { getScreenBounds } from "./helpers/getScreenBounds";
 
-export const createHighlightFrame = (node: HTMLElement, nodeProvider: HTMLElement): HTMLElement => {
-  const { top, left, width, height } = getElementBounds(node, nodeProvider);
-
-  const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
-
-  document.body.style.setProperty("--zoom", zoom.toString());
-  document.body.style.setProperty("--stroke-width", (2 / zoom).toFixed(3));
-
-  const frame = document.createElement("div");
-  frame.classList.add("highlight-frame");
+const getComponentColor = (): string => {
+  return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
+};
 
-  frame.style.setProperty("--frame-top", `${top}px`);
-  frame.style.setProperty("--frame-left", `${left}px`);
-  frame.style.setProperty("--frame-width", `${width}px`);
-  frame.style.setProperty("--frame-height", `${height}px`);
+export const createHighlightFrame = (node: HTMLElement, isInstance: boolean = false): SVGSVGElement => {
+  const { top, left, width, height } = getScreenBounds(node);
 
-  // Create SVG overlay for outline
+  // Create fixed SVG overlay
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.classList.add("highlight-frame-svg");
+  svg.classList.add("highlight-frame-overlay");
+  if (isInstance) {
+    svg.classList.add("is-instance");
+  }
+  svg.setAttribute("data-node-id", node.getAttribute("data-node-id") || "");
+
+  // Set fixed positioning
+  svg.style.position = "fixed";
+  svg.style.top = "0";
+  svg.style.left = "0";
+  svg.style.width = "100vw";
+  svg.style.height = "100vh";
+  svg.style.pointerEvents = "none";
+  svg.style.zIndex = "5000";
+
+  const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+  const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+  svg.setAttribute("width", viewportWidth.toString());
+  svg.setAttribute("height", viewportHeight.toString());
+
+  const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  group.classList.add("highlight-frame-group");
+  group.setAttribute("transform", `translate(${left}, ${top})`);
 
   const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   rect.setAttribute("x", "0");
   rect.setAttribute("y", "0");
-  rect.setAttribute("width", "100%");
-  rect.setAttribute("height", "100%");
+  rect.setAttribute("width", width.toString());
+  rect.setAttribute("height", height.toString());
+  rect.setAttribute("vector-effect", "non-scaling-stroke");
   rect.classList.add("highlight-frame-rect");
 
-  svg.appendChild(rect);
-  frame.appendChild(svg);
+  // Apply instance color if it's an instance
+  if (isInstance) {
+    rect.setAttribute("stroke", getComponentColor());
+  }
+
+  group.appendChild(rect);
+
+  createCornerHandles(group, width, height, isInstance);
 
-  const highlightFrame = frame;
+  svg.appendChild(group);
+  document.body.appendChild(svg);
 
-  return highlightFrame;
+  return svg as SVGSVGElement;
 };

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

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

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

@@ -1,5 +1,3 @@
-export function getHighlightFrameElement(
-  nodeProvider: HTMLElement
-): HTMLElement | null {
-  return nodeProvider.querySelector(".highlight-frame");
+export function getHighlightFrameElement(): SVGSVGElement | null {
+  return document.body.querySelector(".highlight-frame-overlay") as SVGSVGElement | null;
 }

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

@@ -0,0 +1,16 @@
+export function getScreenBounds(element: HTMLElement): {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+} {
+  const rect = element.getBoundingClientRect();
+
+  return {
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height,
+  };
+}
+

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

@@ -1,23 +1,46 @@
+import { isComponentInstance } from "../select/helpers/isComponentInstance";
 import { createHighlightFrame } from "./createHighlightFrame";
 import { createToolsContainer } from "./createToolsContainer";
 import { getHighlightFrameElement } from "./helpers/getHighlightFrameElement";
+import { getScreenBounds } from "./helpers/getScreenBounds";
 
-export const highlightNode = (node: HTMLElement | null, nodeProvider: HTMLElement): void => {
+export const highlightNode = (node: HTMLElement | null): void => {
   if (!node) return;
 
-  const existingHighlightFrame = getHighlightFrameElement(nodeProvider);
+  const existingHighlightFrame = getHighlightFrameElement();
+  const existingToolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper");
 
   if (existingHighlightFrame) {
     existingHighlightFrame.remove();
   }
+  if (existingToolsWrapper) {
+    existingToolsWrapper.remove();
+  }
 
-  const highlightFrame = createHighlightFrame(node, nodeProvider);
+  const isInstance = isComponentInstance(node);
+  const highlightFrame = createHighlightFrame(node, isInstance);
 
   if (node.contentEditable === "true") {
     highlightFrame.classList.add("is-editable");
   }
 
-  createToolsContainer(node, highlightFrame);
+  // Create tools wrapper with tag label - centered using translateX(-50%)
+  const { left, top, height } = getScreenBounds(node);
+  const bottomY = top + height;
+
+  const toolsWrapper = document.createElement("div");
+  toolsWrapper.classList.add("highlight-frame-tools-wrapper");
+  if (isInstance) {
+    toolsWrapper.classList.add("is-instance");
+  }
+  toolsWrapper.style.position = "fixed";
+  toolsWrapper.style.left = `${left}px`;
+  toolsWrapper.style.top = `${bottomY}px`;
+  toolsWrapper.style.transform = "translateX(-50%)";
+  toolsWrapper.style.transformOrigin = "center";
+  toolsWrapper.style.pointerEvents = "none";
+  toolsWrapper.style.zIndex = "5000"; // Match --z-index-highlight (below canvas rulers)
 
-  nodeProvider.appendChild(highlightFrame);
+  createToolsContainer(node, toolsWrapper, isInstance);
+  document.body.appendChild(toolsWrapper);
 };

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

@@ -1,27 +1,126 @@
 import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
-import { getElementBounds } from "./helpers/getElementBounds";
+import { isComponentInstance } from "../select/helpers/isComponentInstance";
 import { getHighlightFrameElement } from "./helpers/getHighlightFrameElement";
+import { getScreenBounds } from "./helpers/getScreenBounds";
+
+const getComponentColor = (): string => {
+  return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
+};
 
 export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLElement) => {
-  const frame = getHighlightFrameElement(nodeProvider);
-  const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+  // Batch all DOM reads first (single layout pass)
+  const frame = getHighlightFrameElement();
+  if (!frame) return;
 
-  console.log("1. refreshHighlightFrame", node);
+  const isInstance = isComponentInstance(node);
 
-  if (!frame) return;
+  // Update SVG dimensions to match current viewport (handles window resize and ensures coordinate system is correct)
+  // Use clientWidth/Height to match getBoundingClientRect() coordinate system (excludes scrollbars)
+  const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+  const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+  frame.setAttribute("width", viewportWidth.toString());
+  frame.setAttribute("height", viewportHeight.toString());
 
-  if (zoom >= 0.3) {
-    nodeProvider.style.setProperty("--tool-opacity", `1`);
+  // Update instance class
+  if (isInstance) {
+    frame.classList.add("is-instance");
   } else {
-    nodeProvider.style.setProperty("--tool-opacity", `0`);
+    frame.classList.remove("is-instance");
   }
 
-  const { top, left, width, height } = getElementBounds(node, nodeProvider);
+  const group = frame.querySelector(".highlight-frame-group") as SVGGElement | null;
+  if (!group) return;
 
-  frame.style.setProperty("--frame-top", `${top}px`);
-  frame.style.setProperty("--frame-left", `${left}px`);
-  frame.style.setProperty("--frame-width", `${width}px`);
-  frame.style.setProperty("--frame-height", `${height}px`);
+  const rect = group.querySelector("rect");
+  if (!rect) return;
+
+  // Update instance color
+  if (isInstance) {
+    rect.setAttribute("stroke", getComponentColor());
+  } else {
+    rect.removeAttribute("stroke"); // Use CSS default
+  }
+
+  const toolsWrapper = document.body.querySelector(".highlight-frame-tools-wrapper") as HTMLElement | null;
+  const nodeTools = toolsWrapper?.querySelector(".node-tools") as HTMLElement | null;
+
+  const zoom = getCanvasWindowValue(["zoom", "current"]) ?? 1;
+  const bounds = getScreenBounds(node);
+
+  // Calculate all values before any DOM writes
+  const { top, left, width, height } = bounds;
+  const bottomY = top + height;
+
+  // Update instance classes on tools wrapper and node tools
+  if (toolsWrapper) {
+    if (isInstance) {
+      toolsWrapper.classList.add("is-instance");
+    } else {
+      toolsWrapper.classList.remove("is-instance");
+    }
+  }
+  if (nodeTools) {
+    if (isInstance) {
+      nodeTools.classList.add("is-instance");
+    } else {
+      nodeTools.classList.remove("is-instance");
+    }
+  }
 
-  console.log("2. refreshHighlightFrame", top, left, width, height);
+  // Batch all DOM writes (single paint pass)
+  // Update group transform to move entire group (rect + handles) at once
+  group.setAttribute("transform", `translate(${left}, ${top})`);
+
+  // Update rect dimensions (position is handled by group transform)
+  rect.setAttribute("width", width.toString());
+  rect.setAttribute("height", height.toString());
+
+  // Update corner handles positions (relative to group, so only width/height matter)
+  const topLeft = group.querySelector(".handle-top-left");
+  const topRight = group.querySelector(".handle-top-right");
+  const bottomRight = group.querySelector(".handle-bottom-right");
+  const bottomLeft = group.querySelector(".handle-bottom-left");
+
+  const HANDLE_SIZE = 6;
+
+  // Update handle colors and positions
+  const handles = [topLeft, topRight, bottomRight, bottomLeft];
+  handles.forEach((handle) => {
+    if (handle) {
+      if (isInstance) {
+        handle.setAttribute("stroke", getComponentColor());
+      } else {
+        handle.removeAttribute("stroke"); // Use CSS default
+      }
+    }
+  });
+
+  if (topLeft) {
+    topLeft.setAttribute("x", (-HANDLE_SIZE / 2).toString());
+    topLeft.setAttribute("y", (-HANDLE_SIZE / 2).toString());
+  }
+  if (topRight) {
+    topRight.setAttribute("x", (width - HANDLE_SIZE / 2).toString());
+    topRight.setAttribute("y", (-HANDLE_SIZE / 2).toString());
+  }
+  if (bottomRight) {
+    bottomRight.setAttribute("x", (width - HANDLE_SIZE / 2).toString());
+    bottomRight.setAttribute("y", (height - HANDLE_SIZE / 2).toString());
+  }
+  if (bottomLeft) {
+    bottomLeft.setAttribute("x", (-HANDLE_SIZE / 2).toString());
+    bottomLeft.setAttribute("y", (height - HANDLE_SIZE / 2).toString());
+  }
+
+  // Update tools wrapper position (use calculated bounds, not rect attributes)
+  if (toolsWrapper) {
+    toolsWrapper.style.left = `${left}px`;
+    toolsWrapper.style.top = `${bottomY}px`;
+  }
+
+  if (zoom <= 10) {
+    nodeProvider.style.setProperty("--tool-opacity", `1`);
+  } else {
+    nodeProvider.style.setProperty("--tool-opacity", `0`);
+  }
 };