@firebuzz/design-mode 0.3.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +77 -0
- package/dist/index.d.mts +102 -1
- package/dist/index.d.ts +102 -1
- package/dist/index.js +60 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +60 -2
- package/dist/index.mjs.map +1 -1
- package/dist/overlay.js +7 -7
- package/dist/overlay.js.map +1 -1
- package/dist/overlay.mjs +7 -7
- package/dist/overlay.mjs.map +1 -1
- package/package.json +61 -62
package/dist/overlay.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
'use strict';var h=new Set;function c(m){let e=m.replace(/['"]/g,"").split(",")[0]?.trim();if(!e||h.has(e)||["Arial","Helvetica","Helvetica Neue","Segoe UI","San Francisco","system-ui","sans-serif","Times New Roman","Georgia","Times","serif","Monaco","Consolas","SF Mono","Menlo","Courier New","Courier","monospace"].some(r=>e.includes(r)))return;let n=`https://fonts.googleapis.com/css2?family=${e.replace(/\s+/g,"+")}:wght@400;500;600&display=swap`;if(document.querySelector(`link[href="${n}"]`)){h.add(e);return}let t=document.createElement("link");t.rel="stylesheet",t.href=n,t.onload=()=>{h.add(e);},t.onerror=()=>{},document.head.appendChild(t);}var u=class{isEnabled=false;selectedElement=null;hoveredElement=null;hoverOverlay;selectionOverlay;selectionTagLabel;childrenOverlays=[];resizeObserver=null;constructor(){this.loadInitialFonts(),this.hoverOverlay=this.createOverlay("2px solid #3b82f6",999991),this.selectionOverlay=this.createOverlay("1px solid #3b82f6",999990),this.selectionTagLabel=this.createTagLabel(),this.listen(),this.setupResizeObserver();}createOverlay(e,s){let n=document.createElement("div");return n.className="fb-design-mode-overlay",Object.assign(n.style,{position:"absolute",border:e,pointerEvents:"none",zIndex:String(s),display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.2)",transition:"all 0.1s ease-out"}),document.body.appendChild(n),n}createChildOverlay(){let e=document.createElement("div");return e.className="fb-design-mode-overlay fb-child-overlay",Object.assign(e.style,{position:"absolute",border:"1px dashed rgba(59, 130, 246, 0.4)",pointerEvents:"none",zIndex:"999989",display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.1)",transition:"all 0.1s ease-out"}),document.body.appendChild(e),e}createTagLabel(){let e=document.createElement("div");return e.className="fb-design-mode-tag",Object.assign(e.style,{position:"absolute",background:"#3b82f6",color:"white",padding:"2px 6px",fontSize:"11px",fontFamily:"monospace",fontWeight:"500",borderRadius:"0 0 4px 0",pointerEvents:"none",zIndex:"999999",display:"none"}),document.body.appendChild(e),e}listen(){window.addEventListener("message",e=>{e.data.type==="ENABLE_DESIGN_MODE"?this.enable():e.data.type==="DISABLE_DESIGN_MODE"?this.disable():e.data.type==="FB_UPDATE_ELEMENT"?this.handleUpdateElement(e.data):e.data.type==="FB_DELETE_ELEMENT"?this.handleDeleteElement(e.data):e.data.type==="FB_GET_ALL_ELEMENTS_STATE"?this.handleGetAllElementsState():e.data.type==="FB_UPDATE_THEME"?this.handleUpdateTheme(e.data.theme):e.data.type==="FB_DESELECT_ELEMENT"?this.deselectElement():e.data.type==="FB_SELECT_ELEMENT"&&this.handleSelectElement(e.data);});}setupResizeObserver(){window.addEventListener("resize",this.updateOverlayPositions),window.addEventListener("scroll",this.updateOverlayPositions,true),this.resizeObserver=new ResizeObserver(()=>{this.updateOverlayPositions();}),this.resizeObserver.observe(document.body);}updateOverlayPositions=()=>{this.selectedElement&&this.selectionOverlay.style.display!=="none"&&(this.updateOverlayPosition(this.selectionOverlay,this.selectedElement),this.updateTagLabel(this.selectedElement)),this.hoveredElement&&this.hoverOverlay.style.display!=="none"&&this.updateOverlayPosition(this.hoverOverlay,this.hoveredElement);for(let e of this.childrenOverlays)if(e.style.display!=="none"&&this.hoveredElement){let s=Array.from(this.hoveredElement.children).filter(t=>this.getReactFiberSource(t)!==null),n=this.childrenOverlays.indexOf(e),i=s[n];i&&this.updateOverlayPosition(e,i);}};enable(){this.isEnabled||(this.isEnabled=true,document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("click",this.handleClick,true),document.addEventListener("mouseleave",this.handleMouseLeave),document.body.style.cursor="crosshair");}disable(){this.isEnabled&&(this.isEnabled=false,document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("click",this.handleClick,true),document.removeEventListener("mouseleave",this.handleMouseLeave),this.hoverOverlay.style.display="none",this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none",this.hideChildrenOverlays(),this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),document.body.style.cursor="",this.selectedElement=null,this.hoveredElement=null);}deselectElement(){this.selectedElement&&(this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=null,this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none");}handleSelectElement(e){if(!e.sourceFile||!e.sourceLine||e.sourceColumn===void 0)return;let s=document.querySelectorAll("*");for(let n of s){if(n.classList?.contains("fb-design-mode-overlay")||n.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(n);if(i&&i.fileName===e.sourceFile&&i.lineNumber===e.sourceLine&&i.columnNumber===e.sourceColumn){let t=n;this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=t,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,t),this.selectionOverlay.style.display="block",this.updateTagLabel(t),this.selectionTagLabel.style.display="block",this.sendElementData(t,i);return}}}getReactFiberSource(e){let s=e,n=0;for(;s&&n<5;){let i=s.getAttribute("data-inspector-relative-path"),t=s.getAttribute("data-inspector-line"),r=s.getAttribute("data-inspector-column");if(i&&t&&r)return {fileName:i,lineNumber:Number.parseInt(t,10),columnNumber:Number.parseInt(r,10)};s=s.parentElement,n++;}return null}isContainer(e){return ["div","section","header","footer","main","aside","nav","article","ul","ol","li"].includes(e.tagName.toLowerCase())}hasDirectTextContent(e){return Array.from(e.childNodes).some(s=>s.nodeType===Node.TEXT_NODE&&s.textContent?.trim())}handleMouseLeave=()=>{this.isEnabled&&(this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays());};handleMouseMove=e=>{if(!this.isEnabled)return;let n=document.elementsFromPoint(e.clientX,e.clientY).filter(t=>{if(t.classList.contains("fb-design-mode-overlay")||t.classList.contains("fb-design-mode-tag"))return false;let r=this.getReactFiberSource(t);return r!==null});if(n.length===0){this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}let i=n[0];if(i){if(i===this.selectedElement){this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}this.hoveredElement&&this.hoveredElement!==i&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=i,this.hoveredElement.setAttribute("data-fb-hovered","true"),this.updateOverlayPosition(this.hoverOverlay,i),this.hoverOverlay.style.display="block",this.isContainer(i)&&!this.hasDirectTextContent(i)?this.showChildrenOverlays(i):this.hideChildrenOverlays();}};showChildrenOverlays(e){let s=Array.from(e.children).filter(n=>this.getReactFiberSource(n)!==null);for(;this.childrenOverlays.length<s.length;)this.childrenOverlays.push(this.createChildOverlay());s.forEach((n,i)=>{let t=this.childrenOverlays[i];t&&(this.updateOverlayPosition(t,n),t.style.display="block");});for(let n=s.length;n<this.childrenOverlays.length;n++){let i=this.childrenOverlays[n];i&&(i.style.display="none");}}hideChildrenOverlays(){for(let e of this.childrenOverlays)e.style.display="none";}currentSelectionIndex=0;lastClickTime=0;lastClickPosition={x:0,y:0};handleClick=e=>{if(!this.isEnabled||(e.preventDefault(),e.stopPropagation(),!this.hoveredElement))return;let s=Date.now(),n=s-this.lastClickTime,i=Math.hypot(e.clientX-this.lastClickPosition.x,e.clientY-this.lastClickPosition.y),r=document.elementsFromPoint(e.clientX,e.clientY).filter(l=>l.classList.contains("fb-design-mode-overlay")||l.classList.contains("fb-design-mode-tag")?false:this.getReactFiberSource(l)!==null);n<1e3&&i<10&&r.length>1?this.currentSelectionIndex=(this.currentSelectionIndex+1)%r.length:this.currentSelectionIndex=0;let o=r[this.currentSelectionIndex];if(!o)return;let a=this.getReactFiberSource(o);a&&(this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=o,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,o),this.selectionOverlay.style.display="block",this.updateTagLabel(o),this.selectionTagLabel.style.display="block",this.sendElementData(o,a),this.lastClickTime=s,this.lastClickPosition={x:e.clientX,y:e.clientY});};updateOverlayPosition(e,s){let n=s.getBoundingClientRect();Object.assign(e.style,{top:`${n.top+window.scrollY}px`,left:`${n.left+window.scrollX}px`,width:`${n.width}px`,height:`${n.height}px`});}updateTagLabel(e){let s=e.getBoundingClientRect(),n=e.tagName.toLowerCase();this.selectionTagLabel.textContent=n,Object.assign(this.selectionTagLabel.style,{top:`${s.top+window.scrollY}px`,left:`${s.left+window.scrollX}px`});}getRelevantStyles(e){let s=window.getComputedStyle(e),n=["display","position","width","height","padding","margin","backgroundColor","color","fontSize","fontFamily"],i={};for(let t of n)i[t]=s.getPropertyValue(t);return i}getDirectTextContent(e){let s=Array.from(e.childNodes).filter(n=>n.nodeType===Node.TEXT_NODE).map(n=>n.textContent?.trim()).filter(Boolean);return s.length>0?s.join(" "):null}sendElementData(e,s){let n=this.getDirectTextContent(e),i=document.documentElement.classList.contains("dark"),t={type:"FB_ELEMENT_SELECTED",data:{sourceFile:s.fileName,sourceLine:s.lineNumber,sourceColumn:s.columnNumber,tagName:e.tagName,className:e.className,textContent:n,src:e.getAttribute("src")||void 0,alt:e.getAttribute("alt")||void 0,href:e.getAttribute("href")||void 0,target:e.getAttribute("target")||void 0,rel:e.getAttribute("rel")||void 0,computedStyles:this.getRelevantStyles(e),isDarkMode:i}};window.parent.postMessage(t,"*");}handleGetAllElementsState(){let e=document.querySelectorAll("*"),s=[];for(let n of e){if(n.classList?.contains("fb-design-mode-overlay")||n.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(n);if(!i)continue;let t=n,r=t;if(t.tagName!=="IMG"){let l=t.querySelector("img");l&&(r=l);}let o=this.getDirectTextContent(t),a="";t.className&&(typeof t.className=="string"?a=t.className:"baseVal"in t.className&&(a=t.className.baseVal)),s.push({sourceFile:i.fileName,sourceLine:i.lineNumber,sourceColumn:i.columnNumber,className:a,textContent:o,src:r.getAttribute("src")||void 0,alt:r.getAttribute("alt")||void 0,href:t.getAttribute("href")||void 0,target:t.getAttribute("target")||void 0,rel:t.getAttribute("rel")||void 0});}window.parent.postMessage({type:"FB_ALL_ELEMENTS_STATE",data:s},"*");}handleUpdateElement(e){let{sourceFile:s,sourceLine:n,sourceColumn:i,updates:t}=e;if(!s||!n||!t)return;let r=document.querySelectorAll("*");for(let o of r){let a=this.getReactFiberSource(o);if(a?.fileName===s&&a?.lineNumber===n&&a?.columnNumber===i){let l=o;if((t.src!==void 0||t.alt!==void 0)&&l.tagName!=="IMG"){let d=l.querySelector("img");d&&(l=d);}if(t.className!==void 0&&(l.className=t.className),t.textContent!==void 0){let d=Array.from(l.childNodes).find(f=>f.nodeType===Node.TEXT_NODE);d?d.textContent=t.textContent:l.textContent=t.textContent;}t.src!==void 0&&"src"in l&&(l.setAttribute("src",t.src),l.hasAttribute("srcset")&&l.removeAttribute("srcset")),t.alt!==void 0&&"alt"in l&&(l.alt=t.alt),t.href!==void 0&&"href"in l&&l.setAttribute("href",t.href),t.target!==void 0&&"target"in l&&l.setAttribute("target",t.target),t.rel!==void 0&&"rel"in l&&l.setAttribute("rel",t.rel),l===this.hoveredElement&&this.updateOverlayPosition(this.hoverOverlay,l),l===this.selectedElement&&(this.updateOverlayPosition(this.selectionOverlay,l),this.updateTagLabel(l));return}}}handleDeleteElement(e){let{sourceFile:s,sourceLine:n,sourceColumn:i}=e;if(!s||!n||!i)return;let t=document.querySelectorAll("*");for(let r of t){let o=this.getReactFiberSource(r);if(o?.fileName===s&&o?.lineNumber===n&&o?.columnNumber===i){let a=r;a===this.selectedElement&&this.deselectElement(),a===this.hoveredElement&&(this.hoveredElement=null,this.hoverOverlay.style.display="none"),a.remove();return}}}loadInitialFonts(){try{let e=getComputedStyle(document.documentElement),s=e.getPropertyValue("--font-sans").trim(),n=e.getPropertyValue("--font-serif").trim(),i=e.getPropertyValue("--font-mono").trim();s&&c(s),n&&c(n),i&&c(i);}catch(e){console.error("Error loading initial fonts:",e);}}handleUpdateTheme(e){if(!e)return;let s=document.getElementById("fb-design-mode-theme");s||(s=document.createElement("style"),s.id="fb-design-mode-theme",document.head.appendChild(s));let n="";if(e.lightVariables&&Object.keys(e.lightVariables).length>0){n+=`:root {
|
|
2
|
-
`;for(let[i,t]of Object.entries(e.lightVariables))if(
|
|
3
|
-
`,i==="--font-sans"||i==="--font-serif"||i==="--font-mono"){let
|
|
1
|
+
'use strict';var h=new Set;function d(m){let e=m.replace(/['"]/g,"").split(",")[0]?.trim();if(!e||h.has(e)||["Arial","Helvetica","Helvetica Neue","Segoe UI","San Francisco","system-ui","sans-serif","Times New Roman","Georgia","Times","serif","Monaco","Consolas","SF Mono","Menlo","Courier New","Courier","monospace"].some(r=>e.includes(r)))return;let s=`https://fonts.googleapis.com/css2?family=${e.replace(/\s+/g,"+")}:wght@400;500;600&display=swap`;if(document.querySelector(`link[href="${s}"]`)){h.add(e);return}let t=document.createElement("link");t.rel="stylesheet",t.href=s,t.onload=()=>{h.add(e);},t.onerror=()=>{},document.head.appendChild(t);}var u=class{isEnabled=false;selectedElement=null;hoveredElement=null;hoverOverlay;selectionOverlay;selectionTagLabel;childrenOverlays=[];resizeObserver=null;constructor(){this.loadInitialFonts(),this.hoverOverlay=this.createOverlay("2px solid #3b82f6",999991),this.selectionOverlay=this.createOverlay("1px solid #3b82f6",999990),this.selectionTagLabel=this.createTagLabel(),this.listen(),this.setupResizeObserver();}createOverlay(e,n){let s=document.createElement("div");return s.className="fb-design-mode-overlay",Object.assign(s.style,{position:"absolute",border:e,pointerEvents:"none",zIndex:String(n),display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.2)",transition:"all 0.1s ease-out"}),document.body.appendChild(s),s}createChildOverlay(){let e=document.createElement("div");return e.className="fb-design-mode-overlay fb-child-overlay",Object.assign(e.style,{position:"absolute",border:"1px dashed rgba(59, 130, 246, 0.4)",pointerEvents:"none",zIndex:"999989",display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.1)",transition:"all 0.1s ease-out"}),document.body.appendChild(e),e}createTagLabel(){let e=document.createElement("div");return e.className="fb-design-mode-tag",Object.assign(e.style,{position:"absolute",background:"#3b82f6",color:"white",padding:"2px 6px",fontSize:"11px",fontFamily:"monospace",fontWeight:"500",borderRadius:"0 0 4px 0",pointerEvents:"none",zIndex:"999999",display:"none"}),document.body.appendChild(e),e}listen(){window.addEventListener("message",e=>{e.data.type==="ENABLE_DESIGN_MODE"?this.enable():e.data.type==="DISABLE_DESIGN_MODE"?this.disable():e.data.type==="FB_UPDATE_ELEMENT"?this.handleUpdateElement(e.data):e.data.type==="FB_DELETE_ELEMENT"?this.handleDeleteElement(e.data):e.data.type==="FB_GET_ALL_ELEMENTS_STATE"?this.handleGetAllElementsState():e.data.type==="FB_UPDATE_THEME"?this.handleUpdateTheme(e.data.theme):e.data.type==="FB_DESELECT_ELEMENT"?this.deselectElement():e.data.type==="FB_SELECT_ELEMENT"&&this.handleSelectElement(e.data);});}setupResizeObserver(){window.addEventListener("resize",this.updateOverlayPositions),window.addEventListener("scroll",this.updateOverlayPositions,true),this.resizeObserver=new ResizeObserver(()=>{this.updateOverlayPositions();}),this.resizeObserver.observe(document.body);}updateOverlayPositions=()=>{this.selectedElement&&this.selectionOverlay.style.display!=="none"&&(this.updateOverlayPosition(this.selectionOverlay,this.selectedElement),this.updateTagLabel(this.selectedElement)),this.hoveredElement&&this.hoverOverlay.style.display!=="none"&&this.updateOverlayPosition(this.hoverOverlay,this.hoveredElement);for(let e of this.childrenOverlays)if(e.style.display!=="none"&&this.hoveredElement){let n=Array.from(this.hoveredElement.children).filter(t=>this.getReactFiberSource(t)!==null),s=this.childrenOverlays.indexOf(e),i=n[s];i&&this.updateOverlayPosition(e,i);}};enable(){this.isEnabled||(this.isEnabled=true,document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("click",this.handleClick,true),document.addEventListener("mouseleave",this.handleMouseLeave),document.body.style.cursor="crosshair");}disable(){this.isEnabled&&(this.isEnabled=false,document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("click",this.handleClick,true),document.removeEventListener("mouseleave",this.handleMouseLeave),this.hoverOverlay.style.display="none",this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none",this.hideChildrenOverlays(),this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),document.body.style.cursor="",this.selectedElement=null,this.hoveredElement=null);}deselectElement(){this.selectedElement&&(this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=null,this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none");}handleSelectElement(e){if(!e.sourceFile||!e.sourceLine||e.sourceColumn===void 0)return;let n=document.querySelectorAll("*");for(let s of n){if(s.classList?.contains("fb-design-mode-overlay")||s.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(s);if(i&&i.fileName===e.sourceFile&&i.lineNumber===e.sourceLine&&i.columnNumber===e.sourceColumn){let t=s;this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=t,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,t),this.selectionOverlay.style.display="block",this.updateTagLabel(t),this.selectionTagLabel.style.display="block",this.sendElementData(t,i);return}}}getReactFiberSource(e){let n=e,s=0;for(;n&&s<5;){let i=n.getAttribute("data-inspector-relative-path"),t=n.getAttribute("data-inspector-line"),r=n.getAttribute("data-inspector-column");if(i&&t&&r)return {fileName:i,lineNumber:Number.parseInt(t,10),columnNumber:Number.parseInt(r,10)};n=n.parentElement,s++;}return null}isContainer(e){return ["div","section","header","footer","main","aside","nav","article","ul","ol","li"].includes(e.tagName.toLowerCase())}hasDirectTextContent(e){return Array.from(e.childNodes).some(n=>n.nodeType===Node.TEXT_NODE&&n.textContent?.trim())}handleMouseLeave=()=>{this.isEnabled&&(this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays());};handleMouseMove=e=>{if(!this.isEnabled)return;let s=document.elementsFromPoint(e.clientX,e.clientY).filter(t=>{if(t.classList.contains("fb-design-mode-overlay")||t.classList.contains("fb-design-mode-tag"))return false;let r=this.getReactFiberSource(t);return r!==null});if(s.length===0){this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}let i=s[0];if(i){if(i===this.selectedElement){this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}this.hoveredElement&&this.hoveredElement!==i&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=i,this.hoveredElement.setAttribute("data-fb-hovered","true"),this.updateOverlayPosition(this.hoverOverlay,i),this.hoverOverlay.style.display="block",this.isContainer(i)&&!this.hasDirectTextContent(i)?this.showChildrenOverlays(i):this.hideChildrenOverlays();}};showChildrenOverlays(e){let n=Array.from(e.children).filter(s=>this.getReactFiberSource(s)!==null);for(;this.childrenOverlays.length<n.length;)this.childrenOverlays.push(this.createChildOverlay());n.forEach((s,i)=>{let t=this.childrenOverlays[i];t&&(this.updateOverlayPosition(t,s),t.style.display="block");});for(let s=n.length;s<this.childrenOverlays.length;s++){let i=this.childrenOverlays[s];i&&(i.style.display="none");}}hideChildrenOverlays(){for(let e of this.childrenOverlays)e.style.display="none";}currentSelectionIndex=0;lastClickTime=0;lastClickPosition={x:0,y:0};handleClick=e=>{if(!this.isEnabled||(e.preventDefault(),e.stopPropagation(),!this.hoveredElement))return;let n=Date.now(),s=n-this.lastClickTime,i=Math.hypot(e.clientX-this.lastClickPosition.x,e.clientY-this.lastClickPosition.y),r=document.elementsFromPoint(e.clientX,e.clientY).filter(l=>l.classList.contains("fb-design-mode-overlay")||l.classList.contains("fb-design-mode-tag")?false:this.getReactFiberSource(l)!==null);s<1e3&&i<10&&r.length>1?this.currentSelectionIndex=(this.currentSelectionIndex+1)%r.length:this.currentSelectionIndex=0;let a=r[this.currentSelectionIndex];if(!a)return;let o=this.getReactFiberSource(a);o&&(this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=a,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,a),this.selectionOverlay.style.display="block",this.updateTagLabel(a),this.selectionTagLabel.style.display="block",this.sendElementData(a,o),this.lastClickTime=n,this.lastClickPosition={x:e.clientX,y:e.clientY});};updateOverlayPosition(e,n){let s=n.getBoundingClientRect();Object.assign(e.style,{top:`${s.top+window.scrollY}px`,left:`${s.left+window.scrollX}px`,width:`${s.width}px`,height:`${s.height}px`});}updateTagLabel(e){let n=e.getBoundingClientRect(),s=e.tagName.toLowerCase();this.selectionTagLabel.textContent=s,Object.assign(this.selectionTagLabel.style,{top:`${n.top+window.scrollY}px`,left:`${n.left+window.scrollX}px`});}getRelevantStyles(e){let n=window.getComputedStyle(e),s=["display","position","width","height","padding","margin","backgroundColor","color","fontSize","fontFamily"],i={};for(let t of s)i[t]=n.getPropertyValue(t);return i}getDirectTextContent(e){let n=Array.from(e.childNodes).filter(s=>s.nodeType===Node.TEXT_NODE).map(s=>s.textContent?.trim()).filter(Boolean);return n.length>0?n.join(" "):null}sendElementData(e,n){let s=this.getDirectTextContent(e),i=document.documentElement.classList.contains("dark"),t="";e.className&&(typeof e.className=="string"?t=e.className:"baseVal"in e.className&&(t=e.className.baseVal));let r={type:"FB_ELEMENT_SELECTED",data:{sourceFile:n.fileName,sourceLine:n.lineNumber,sourceColumn:n.columnNumber,tagName:e.tagName,className:t,textContent:s,src:e.getAttribute("src")||void 0,alt:e.getAttribute("alt")||void 0,href:e.getAttribute("href")||void 0,target:e.getAttribute("target")||void 0,rel:e.getAttribute("rel")||void 0,computedStyles:this.getRelevantStyles(e),isDarkMode:i}};window.parent.postMessage(r,"*");}handleGetAllElementsState(){let e=document.querySelectorAll("*"),n=[];for(let s of e){if(s.classList?.contains("fb-design-mode-overlay")||s.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(s);if(!i)continue;let t=s,r=t;if(t.tagName!=="IMG"){let l=t.querySelector("img");l&&(r=l);}let a=this.getDirectTextContent(t),o="";t.className&&(typeof t.className=="string"?o=t.className:"baseVal"in t.className&&(o=t.className.baseVal)),n.push({sourceFile:i.fileName,sourceLine:i.lineNumber,sourceColumn:i.columnNumber,className:o,textContent:a,src:r.getAttribute("src")||void 0,alt:r.getAttribute("alt")||void 0,href:t.getAttribute("href")||void 0,target:t.getAttribute("target")||void 0,rel:t.getAttribute("rel")||void 0});}window.parent.postMessage({type:"FB_ALL_ELEMENTS_STATE",data:n},"*");}handleUpdateElement(e){let{sourceFile:n,sourceLine:s,sourceColumn:i,updates:t}=e;if(!n||!s||!t)return;let r=document.querySelectorAll("*");for(let a of r){let o=this.getReactFiberSource(a);if(o?.fileName===n&&o?.lineNumber===s&&o?.columnNumber===i){let l=a;if((t.src!==void 0||t.alt!==void 0)&&l.tagName!=="IMG"){let c=l.querySelector("img");c&&(l=c);}if(t.className!==void 0&&(typeof l.className=="string"?l.className=t.className:"baseVal"in l.className?l.className.baseVal=t.className:l.setAttribute("class",t.className)),t.textContent!==void 0){let c=Array.from(l.childNodes).find(f=>f.nodeType===Node.TEXT_NODE);c?c.textContent=t.textContent:l.textContent=t.textContent;}t.src!==void 0&&"src"in l&&(l.setAttribute("src",t.src),l.hasAttribute("srcset")&&l.removeAttribute("srcset")),t.alt!==void 0&&"alt"in l&&(l.alt=t.alt),t.href!==void 0&&"href"in l&&l.setAttribute("href",t.href),t.target!==void 0&&"target"in l&&l.setAttribute("target",t.target),t.rel!==void 0&&"rel"in l&&l.setAttribute("rel",t.rel),l===this.hoveredElement&&this.updateOverlayPosition(this.hoverOverlay,l),l===this.selectedElement&&(this.updateOverlayPosition(this.selectionOverlay,l),this.updateTagLabel(l));return}}}handleDeleteElement(e){let{sourceFile:n,sourceLine:s,sourceColumn:i}=e;if(!n||!s||!i)return;let t=document.querySelectorAll("*");for(let r of t){let a=this.getReactFiberSource(r);if(a?.fileName===n&&a?.lineNumber===s&&a?.columnNumber===i){let o=r;o===this.selectedElement&&this.deselectElement(),o===this.hoveredElement&&(this.hoveredElement=null,this.hoverOverlay.style.display="none"),o.remove();return}}}loadInitialFonts(){try{let e=getComputedStyle(document.documentElement),n=e.getPropertyValue("--font-sans").trim(),s=e.getPropertyValue("--font-serif").trim(),i=e.getPropertyValue("--font-mono").trim();n&&d(n),s&&d(s),i&&d(i);}catch(e){console.error("Error loading initial fonts:",e);}}handleUpdateTheme(e){if(!e)return;let n=document.getElementById("fb-design-mode-theme");n||(n=document.createElement("style"),n.id="fb-design-mode-theme",document.head.appendChild(n));let s="";if(e.lightVariables&&Object.keys(e.lightVariables).length>0){s+=`:root {
|
|
2
|
+
`;for(let[i,t]of Object.entries(e.lightVariables))if(s+=` ${i}: ${t};
|
|
3
|
+
`,i==="--font-sans"||i==="--font-serif"||i==="--font-mono"){let a=t.match(/"([^"]+)"/)?.[1]||t.split(",")[0]?.trim()||t;d(a);}s+=`}
|
|
4
4
|
|
|
5
|
-
`;}if(e.darkVariables&&Object.keys(e.darkVariables).length>0){
|
|
6
|
-
`;for(let[i,t]of Object.entries(e.darkVariables))
|
|
7
|
-
`;
|
|
8
|
-
`;}
|
|
5
|
+
`;}if(e.darkVariables&&Object.keys(e.darkVariables).length>0){s+=`.dark {
|
|
6
|
+
`;for(let[i,t]of Object.entries(e.darkVariables))s+=` ${i}: ${t};
|
|
7
|
+
`;s+=`}
|
|
8
|
+
`;}n.textContent=s;}};typeof window<"u"&&typeof document<"u"&&new u;//# sourceMappingURL=overlay.js.map
|
|
9
9
|
//# sourceMappingURL=overlay.js.map
|
package/dist/overlay.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/overlay.ts"],"names":["loadedFonts","loadGoogleFontInIframe","fontValue","cleanFont","sf","fontUrl","link","DesignModeOverlay","border","zIndex","overlay","label","children","child","index","data","allElements","el","source","element","currentElement","depth","relativePath","line","column","node","selectableElements","topElement","parent","i","now","timeSinceLastClick","distanceMoved","target","rect","tagName","computed","relevantProps","styles","prop","directTextNodes","directText","isDarkMode","elementsState","actualElement","imgChild","textContent","className","message","sourceFile","sourceLine","sourceColumn","updates","textNode","rootStyles","fontSans","fontSerif","fontMono","error","theme","styleEl","css","key","value","fontName"],"mappings":"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","file":"overlay.js","sourcesContent":["/**\n * Design Mode Overlay Script\n * Injected into the preview iframe to enable element selection\n *\n * Uses React Fiber's _debugSource to track element source locations at runtime.\n * No build-time tagging required - everything is resolved from React's internal data.\n *\n * Runtime CSS generation is handled by Tailwind v4 Browser CDN.\n */\n\nimport type {\n\tDesignModeMessage,\n\tElementSelectedMessage,\n\tSourceLocation,\n} from \"./types\";\n\n// Track loaded fonts to avoid duplicate loads\nconst loadedFonts = new Set<string>();\n\n/**\n * Load Google Font in the iframe\n * Dynamically injects font <link> tag into iframe head\n */\nfunction loadGoogleFontInIframe(fontValue: string): void {\n\t// Extract clean font name from CSS value (remove quotes and fallbacks)\n\tconst cleanFont = fontValue.replace(/['\"]/g, \"\").split(\",\")[0]?.trim();\n\tif (!cleanFont) {\n\t\treturn;\n\t}\n\n\t// Skip if already loaded\n\tif (loadedFonts.has(cleanFont)) {\n\t\treturn;\n\t}\n\n\t// System fonts don't need to be loaded\n\tconst systemFonts = [\n\t\t\"Arial\",\n\t\t\"Helvetica\",\n\t\t\"Helvetica Neue\",\n\t\t\"Segoe UI\",\n\t\t\"San Francisco\",\n\t\t\"system-ui\",\n\t\t\"sans-serif\",\n\t\t\"Times New Roman\",\n\t\t\"Georgia\",\n\t\t\"Times\",\n\t\t\"serif\",\n\t\t\"Monaco\",\n\t\t\"Consolas\",\n\t\t\"SF Mono\",\n\t\t\"Menlo\",\n\t\t\"Courier New\",\n\t\t\"Courier\",\n\t\t\"monospace\",\n\t];\n\tif (systemFonts.some((sf) => cleanFont.includes(sf))) {\n\t\treturn;\n\t}\n\n\t// Build Google Fonts URL (spaces should be +, not encoded)\n\tconst fontUrl = `https://fonts.googleapis.com/css2?family=${cleanFont.replace(/\\s+/g, \"+\")}:wght@400;500;600&display=swap`;\n\n\t// Check if already in DOM\n\tconst existingLink = document.querySelector(`link[href=\"${fontUrl}\"]`);\n\tif (existingLink) {\n\t\tloadedFonts.add(cleanFont);\n\t\treturn;\n\t}\n\n\t// Create and inject <link> tag\n\tconst link = document.createElement(\"link\");\n\tlink.rel = \"stylesheet\";\n\tlink.href = fontUrl;\n\tlink.onload = () => {\n\t\tloadedFonts.add(cleanFont);\n\t};\n\tlink.onerror = () => {};\n\tdocument.head.appendChild(link);\n}\n\nclass DesignModeOverlay {\n\tprivate isEnabled = false;\n\tprivate selectedElement: HTMLElement | null = null;\n\tprivate hoveredElement: HTMLElement | null = null;\n\n\t// Separate overlays for different states\n\tprivate hoverOverlay: HTMLDivElement;\n\tprivate selectionOverlay: HTMLDivElement;\n\tprivate selectionTagLabel: HTMLDivElement;\n\tprivate childrenOverlays: HTMLDivElement[] = [];\n\tprivate resizeObserver: ResizeObserver | null = null;\n\n\tconstructor() {\n\t\t// Load any fonts that are already defined in CSS on initial load\n\t\tthis.loadInitialFonts();\n\n\t\t// Create persistent overlay elements\n\t\tthis.hoverOverlay = this.createOverlay(\"2px solid #3b82f6\", 999991);\n\t\tthis.selectionOverlay = this.createOverlay(\"1px solid #3b82f6\", 999990);\n\t\tthis.selectionTagLabel = this.createTagLabel();\n\n\t\tthis.listen();\n\t\tthis.setupResizeObserver();\n\t}\n\n\tprivate createOverlay(border: string, zIndex: number): HTMLDivElement {\n\t\tconst overlay = document.createElement(\"div\");\n\t\toverlay.className = \"fb-design-mode-overlay\";\n\t\tObject.assign(overlay.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tborder,\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: String(zIndex),\n\t\t\tdisplay: \"none\",\n\t\t\tboxShadow: \"0 0 0 1px rgba(59, 130, 246, 0.2)\",\n\t\t\ttransition: \"all 0.1s ease-out\",\n\t\t});\n\t\tdocument.body.appendChild(overlay);\n\t\treturn overlay;\n\t}\n\n\tprivate createChildOverlay(): HTMLDivElement {\n\t\tconst overlay = document.createElement(\"div\");\n\t\toverlay.className = \"fb-design-mode-overlay fb-child-overlay\";\n\t\tObject.assign(overlay.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tborder: \"1px dashed rgba(59, 130, 246, 0.4)\",\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: \"999989\",\n\t\t\tdisplay: \"none\",\n\t\t\tboxShadow: \"0 0 0 1px rgba(59, 130, 246, 0.1)\",\n\t\t\ttransition: \"all 0.1s ease-out\",\n\t\t});\n\t\tdocument.body.appendChild(overlay);\n\t\treturn overlay;\n\t}\n\n\tprivate createTagLabel(): HTMLDivElement {\n\t\tconst label = document.createElement(\"div\");\n\t\tlabel.className = \"fb-design-mode-tag\";\n\t\tObject.assign(label.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tbackground: \"#3b82f6\",\n\t\t\tcolor: \"white\",\n\t\t\tpadding: \"2px 6px\",\n\t\t\tfontSize: \"11px\",\n\t\t\tfontFamily: \"monospace\",\n\t\t\tfontWeight: \"500\",\n\t\t\tborderRadius: \"0 0 4px 0\",\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: \"999999\",\n\t\t\tdisplay: \"none\",\n\t\t});\n\t\tdocument.body.appendChild(label);\n\t\treturn label;\n\t}\n\n\tprivate listen() {\n\t\twindow.addEventListener(\"message\", (e: MessageEvent<DesignModeMessage>) => {\n\t\t\tif (e.data.type === \"ENABLE_DESIGN_MODE\") {\n\t\t\t\tthis.enable();\n\t\t\t} else if (e.data.type === \"DISABLE_DESIGN_MODE\") {\n\t\t\t\tthis.disable();\n\t\t\t} else if (e.data.type === \"FB_UPDATE_ELEMENT\") {\n\t\t\t\tthis.handleUpdateElement(e.data);\n\t\t\t} else if (e.data.type === \"FB_DELETE_ELEMENT\") {\n\t\t\t\tthis.handleDeleteElement(e.data);\n\t\t\t} else if (e.data.type === \"FB_GET_ALL_ELEMENTS_STATE\") {\n\t\t\t\tthis.handleGetAllElementsState();\n\t\t\t} else if (e.data.type === \"FB_UPDATE_THEME\") {\n\t\t\t\tthis.handleUpdateTheme(e.data.theme);\n\t\t\t} else if (e.data.type === \"FB_DESELECT_ELEMENT\") {\n\t\t\t\tthis.deselectElement();\n\t\t\t} else if (e.data.type === \"FB_SELECT_ELEMENT\") {\n\t\t\t\tthis.handleSelectElement(e.data);\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate setupResizeObserver() {\n\t\t// Listen for window resize and scroll events\n\t\twindow.addEventListener(\"resize\", this.updateOverlayPositions);\n\t\twindow.addEventListener(\"scroll\", this.updateOverlayPositions, true);\n\n\t\t// Use ResizeObserver to detect when elements change size\n\t\tthis.resizeObserver = new ResizeObserver(() => {\n\t\t\tthis.updateOverlayPositions();\n\t\t});\n\n\t\t// Observe the document body for any size changes\n\t\tthis.resizeObserver.observe(document.body);\n\t}\n\n\tprivate updateOverlayPositions = () => {\n\t\t// Update selected element overlay\n\t\tif (\n\t\t\tthis.selectedElement &&\n\t\t\tthis.selectionOverlay.style.display !== \"none\"\n\t\t) {\n\t\t\tthis.updateOverlayPosition(this.selectionOverlay, this.selectedElement);\n\t\t\tthis.updateTagLabel(this.selectedElement);\n\t\t}\n\n\t\t// Update hovered element overlay\n\t\tif (this.hoveredElement && this.hoverOverlay.style.display !== \"none\") {\n\t\t\tthis.updateOverlayPosition(this.hoverOverlay, this.hoveredElement);\n\t\t}\n\n\t\t// Update children overlays\n\t\tfor (const overlay of this.childrenOverlays) {\n\t\t\tif (overlay.style.display !== \"none\" && this.hoveredElement) {\n\t\t\t\t// Find the corresponding child element\n\t\t\t\tconst children = Array.from(this.hoveredElement.children).filter(\n\t\t\t\t\t(child) => {\n\t\t\t\t\t\tconst source = this.getReactFiberSource(child as HTMLElement);\n\t\t\t\t\t\treturn source !== null;\n\t\t\t\t\t},\n\t\t\t\t) as HTMLElement[];\n\n\t\t\t\tconst index = this.childrenOverlays.indexOf(overlay);\n\t\t\t\tconst child = children[index];\n\t\t\t\tif (child) {\n\t\t\t\t\tthis.updateOverlayPosition(overlay, child);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tenable() {\n\t\tif (this.isEnabled) return;\n\t\tthis.isEnabled = true;\n\n\t\tdocument.addEventListener(\"mousemove\", this.handleMouseMove);\n\t\tdocument.addEventListener(\"click\", this.handleClick, true);\n\t\tdocument.addEventListener(\"mouseleave\", this.handleMouseLeave);\n\n\t\t// Add cursor style\n\t\tdocument.body.style.cursor = \"crosshair\";\n\t}\n\n\tdisable() {\n\t\tif (!this.isEnabled) return;\n\t\tthis.isEnabled = false;\n\n\t\tdocument.removeEventListener(\"mousemove\", this.handleMouseMove);\n\t\tdocument.removeEventListener(\"click\", this.handleClick, true);\n\t\tdocument.removeEventListener(\"mouseleave\", this.handleMouseLeave);\n\n\t\t// Hide all overlays\n\t\tthis.hoverOverlay.style.display = \"none\";\n\t\tthis.selectionOverlay.style.display = \"none\";\n\t\tthis.selectionTagLabel.style.display = \"none\";\n\t\tthis.hideChildrenOverlays();\n\n\t\t// Remove runtime markers\n\t\tif (this.selectedElement) {\n\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t}\n\t\tif (this.hoveredElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\n\t\tdocument.body.style.cursor = \"\";\n\t\tthis.selectedElement = null;\n\t\tthis.hoveredElement = null;\n\t}\n\n\t/**\n\t * Deselect the currently selected element\n\t * Keeps design mode active but clears the selection\n\t */\n\tdeselectElement() {\n\t\tif (!this.selectedElement) return;\n\n\t\t// Remove selection marker\n\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\tthis.selectedElement = null;\n\n\t\t// Hide selection overlay and tag\n\t\tthis.selectionOverlay.style.display = \"none\";\n\t\tthis.selectionTagLabel.style.display = \"none\";\n\t}\n\n\t/**\n\t * Programmatically select an element by its source location\n\t * Used when restoring selection after page reload\n\t */\n\tprivate handleSelectElement(data: DesignModeMessage) {\n\t\tif (\n\t\t\t!data.sourceFile ||\n\t\t\t!data.sourceLine ||\n\t\t\tdata.sourceColumn === undefined\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find element by source location\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\t\tfor (const el of allElements) {\n\t\t\t// Skip our own overlays\n\t\t\tif (\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (\n\t\t\t\tsource &&\n\t\t\t\tsource.fileName === data.sourceFile &&\n\t\t\t\tsource.lineNumber === data.sourceLine &&\n\t\t\t\tsource.columnNumber === data.sourceColumn\n\t\t\t) {\n\t\t\t\tconst element = el as HTMLElement;\n\n\t\t\t\t// Update selected element marker\n\t\t\t\tif (this.selectedElement) {\n\t\t\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t\t\t}\n\n\t\t\t\tthis.selectedElement = element;\n\t\t\t\tthis.selectedElement.setAttribute(\"data-fb-selected\", \"true\");\n\n\t\t\t\t// Update selection overlay and tag\n\t\t\t\tthis.updateOverlayPosition(this.selectionOverlay, element);\n\t\t\t\tthis.selectionOverlay.style.display = \"block\";\n\n\t\t\t\tthis.updateTagLabel(element);\n\t\t\t\tthis.selectionTagLabel.style.display = \"block\";\n\n\t\t\t\t// Send selection data to parent\n\t\t\t\tthis.sendElementData(element, source);\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Extract source location from babel plugin attributes\n\t * Attributes: data-inspector-relative-path, data-inspector-line, data-inspector-column\n\t */\n\tprivate getReactFiberSource(element: HTMLElement): SourceLocation | null {\n\t\t// Check current element and up to 5 parent elements\n\t\tlet currentElement: HTMLElement | null = element;\n\t\tlet depth = 0;\n\n\t\twhile (currentElement && depth < 5) {\n\t\t\tconst relativePath = currentElement.getAttribute(\n\t\t\t\t\"data-inspector-relative-path\",\n\t\t\t);\n\t\t\tconst line = currentElement.getAttribute(\"data-inspector-line\");\n\t\t\tconst column = currentElement.getAttribute(\"data-inspector-column\");\n\n\t\t\tif (relativePath && line && column) {\n\t\t\t\treturn {\n\t\t\t\t\tfileName: relativePath,\n\t\t\t\t\tlineNumber: Number.parseInt(line, 10),\n\t\t\t\t\tcolumnNumber: Number.parseInt(column, 10),\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tcurrentElement = currentElement.parentElement;\n\t\t\tdepth++;\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tprivate isContainer(element: HTMLElement): boolean {\n\t\tconst containerTags = [\n\t\t\t\"div\",\n\t\t\t\"section\",\n\t\t\t\"header\",\n\t\t\t\"footer\",\n\t\t\t\"main\",\n\t\t\t\"aside\",\n\t\t\t\"nav\",\n\t\t\t\"article\",\n\t\t\t\"ul\",\n\t\t\t\"ol\",\n\t\t\t\"li\",\n\t\t];\n\t\treturn containerTags.includes(element.tagName.toLowerCase());\n\t}\n\n\tprivate hasDirectTextContent(element: HTMLElement): boolean {\n\t\treturn Array.from(element.childNodes).some(\n\t\t\t(node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim(),\n\t\t);\n\t}\n\n\tprivate handleMouseLeave = () => {\n\t\tif (!this.isEnabled) return;\n\n\t\t// Hide hover overlay when mouse leaves the document\n\t\tif (this.hoveredElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\t\tthis.hoveredElement = null;\n\t\tthis.hoverOverlay.style.display = \"none\";\n\t\tthis.hideChildrenOverlays();\n\t};\n\n\tprivate handleMouseMove = (e: MouseEvent) => {\n\t\tif (!this.isEnabled) return;\n\n\t\t// Get all elements at this point\n\t\tconst elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);\n\n\t\t// Filter to only elements with React Fiber source, excluding overlays\n\t\tconst selectableElements = elementsAtPoint.filter((el) => {\n\t\t\tif (\n\t\t\t\tel.classList.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\tel.classList.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Must have React Fiber source location\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (source === null) {\n\t\t\t\t// Debug: log elements without fiber\n\t\t\t}\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\tif (selectableElements.length === 0) {\n\t\t\tif (this.hoveredElement) {\n\t\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t\t}\n\t\t\tthis.hoveredElement = null;\n\t\t\tthis.hoverOverlay.style.display = \"none\";\n\t\t\tthis.hideChildrenOverlays();\n\t\t\treturn;\n\t\t}\n\n\t\t// Get topmost element (first in array)\n\t\tconst topElement = selectableElements[0];\n\t\tif (!topElement) return; // Type guard for noUncheckedIndexedAccess\n\n\t\t// Don't show hover overlay if this is the selected element\n\t\tif (topElement === this.selectedElement) {\n\t\t\tthis.hoverOverlay.style.display = \"none\";\n\t\t\tthis.hideChildrenOverlays();\n\t\t\treturn;\n\t\t}\n\n\t\t// Update hovered element\n\t\tif (this.hoveredElement && this.hoveredElement !== topElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\n\t\tthis.hoveredElement = topElement;\n\t\tthis.hoveredElement.setAttribute(\"data-fb-hovered\", \"true\");\n\n\t\t// Show hover overlay\n\t\tthis.updateOverlayPosition(this.hoverOverlay, topElement);\n\t\tthis.hoverOverlay.style.display = \"block\";\n\n\t\t// Show children overlays if this is a container without direct text\n\t\tif (\n\t\t\tthis.isContainer(topElement) &&\n\t\t\t!this.hasDirectTextContent(topElement)\n\t\t) {\n\t\t\tthis.showChildrenOverlays(topElement);\n\t\t} else {\n\t\t\tthis.hideChildrenOverlays();\n\t\t}\n\t};\n\n\tprivate showChildrenOverlays(parent: HTMLElement) {\n\t\t// Get direct children with React Fiber source\n\t\tconst children = Array.from(parent.children).filter((child) => {\n\t\t\tconst source = this.getReactFiberSource(child as HTMLElement);\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\t// Ensure we have enough child overlays\n\t\twhile (this.childrenOverlays.length < children.length) {\n\t\t\tthis.childrenOverlays.push(this.createChildOverlay());\n\t\t}\n\n\t\t// Show overlay for each child\n\t\tchildren.forEach((child, index) => {\n\t\t\tconst overlay = this.childrenOverlays[index];\n\t\t\tif (overlay) {\n\t\t\t\tthis.updateOverlayPosition(overlay, child);\n\t\t\t\toverlay.style.display = \"block\";\n\t\t\t}\n\t\t});\n\n\t\t// Hide unused child overlays\n\t\tfor (let i = children.length; i < this.childrenOverlays.length; i++) {\n\t\t\tconst overlay = this.childrenOverlays[i];\n\t\t\tif (overlay) {\n\t\t\t\toverlay.style.display = \"none\";\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate hideChildrenOverlays() {\n\t\tfor (const overlay of this.childrenOverlays) {\n\t\t\toverlay.style.display = \"none\";\n\t\t}\n\t}\n\n\tprivate currentSelectionIndex = 0;\n\tprivate lastClickTime = 0;\n\tprivate lastClickPosition = { x: 0, y: 0 };\n\n\tprivate handleClick = (e: MouseEvent) => {\n\t\tif (!this.isEnabled) return;\n\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\tif (!this.hoveredElement) return;\n\n\t\tconst now = Date.now();\n\t\tconst timeSinceLastClick = now - this.lastClickTime;\n\t\tconst distanceMoved = Math.hypot(\n\t\t\te.clientX - this.lastClickPosition.x,\n\t\t\te.clientY - this.lastClickPosition.y,\n\t\t);\n\n\t\t// Get all elements at click point for cycling\n\t\tconst elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);\n\t\tconst selectableElements = elementsAtPoint.filter((el) => {\n\t\t\tif (\n\t\t\t\tel.classList.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\tel.classList.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Must have React Fiber source location\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\t// Cycle through nested elements on repeated clicks\n\t\tif (\n\t\t\ttimeSinceLastClick < 1000 &&\n\t\t\tdistanceMoved < 10 &&\n\t\t\tselectableElements.length > 1\n\t\t) {\n\t\t\tthis.currentSelectionIndex =\n\t\t\t\t(this.currentSelectionIndex + 1) % selectableElements.length;\n\t\t} else {\n\t\t\tthis.currentSelectionIndex = 0;\n\t\t}\n\n\t\tconst target = selectableElements[this.currentSelectionIndex];\n\t\tif (!target) return; // Type guard for noUncheckedIndexedAccess\n\n\t\t// Get source location\n\t\tconst source = this.getReactFiberSource(target);\n\t\tif (!source) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update selected element marker\n\t\tif (this.selectedElement) {\n\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t}\n\n\t\tthis.selectedElement = target;\n\t\tthis.selectedElement.setAttribute(\"data-fb-selected\", \"true\");\n\n\t\t// Update selection overlay and tag\n\t\tthis.updateOverlayPosition(this.selectionOverlay, target);\n\t\tthis.selectionOverlay.style.display = \"block\";\n\n\t\tthis.updateTagLabel(target);\n\t\tthis.selectionTagLabel.style.display = \"block\";\n\n\t\t// Send selection data to parent\n\t\tthis.sendElementData(target, source);\n\n\t\t// Update last click info\n\t\tthis.lastClickTime = now;\n\t\tthis.lastClickPosition = { x: e.clientX, y: e.clientY };\n\t};\n\n\tprivate updateOverlayPosition(overlay: HTMLDivElement, element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect();\n\t\tObject.assign(overlay.style, {\n\t\t\ttop: `${rect.top + window.scrollY}px`,\n\t\t\tleft: `${rect.left + window.scrollX}px`,\n\t\t\twidth: `${rect.width}px`,\n\t\t\theight: `${rect.height}px`,\n\t\t});\n\t}\n\n\tprivate updateTagLabel(element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect();\n\t\tconst tagName = element.tagName.toLowerCase();\n\n\t\tthis.selectionTagLabel.textContent = tagName;\n\t\tObject.assign(this.selectionTagLabel.style, {\n\t\t\ttop: `${rect.top + window.scrollY}px`,\n\t\t\tleft: `${rect.left + window.scrollX}px`,\n\t\t});\n\t}\n\n\tprivate getRelevantStyles(element: HTMLElement): Record<string, string> {\n\t\tconst computed = window.getComputedStyle(element);\n\t\tconst relevantProps = [\n\t\t\t\"display\",\n\t\t\t\"position\",\n\t\t\t\"width\",\n\t\t\t\"height\",\n\t\t\t\"padding\",\n\t\t\t\"margin\",\n\t\t\t\"backgroundColor\",\n\t\t\t\"color\",\n\t\t\t\"fontSize\",\n\t\t\t\"fontFamily\",\n\t\t];\n\n\t\tconst styles: Record<string, string> = {};\n\t\tfor (const prop of relevantProps) {\n\t\t\tstyles[prop] = computed.getPropertyValue(prop);\n\t\t}\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Extract direct text content from DOM (not from nested children)\n\t */\n\tprivate getDirectTextContent(element: HTMLElement): string | null {\n\t\tconst directTextNodes = Array.from(element.childNodes)\n\t\t\t.filter((node) => node.nodeType === Node.TEXT_NODE)\n\t\t\t.map((node) => node.textContent?.trim())\n\t\t\t.filter(Boolean);\n\n\t\treturn directTextNodes.length > 0 ? directTextNodes.join(\" \") : null;\n\t}\n\n\tprivate sendElementData(element: HTMLElement, source: SourceLocation) {\n\t\tconst directText = this.getDirectTextContent(element);\n\n\t\t// Detect if dark mode is active\n\t\tconst isDarkMode = document.documentElement.classList.contains(\"dark\");\n\n\t\tconst data: ElementSelectedMessage = {\n\t\t\ttype: \"FB_ELEMENT_SELECTED\",\n\t\t\tdata: {\n\t\t\t\t// Source location from React Fiber\n\t\t\t\tsourceFile: source.fileName,\n\t\t\t\tsourceLine: source.lineNumber,\n\t\t\t\tsourceColumn: source.columnNumber,\n\n\t\t\t\t// DOM properties\n\t\t\t\ttagName: element.tagName,\n\t\t\t\tclassName: element.className,\n\t\t\t\ttextContent: directText,\n\t\t\t\tsrc: element.getAttribute(\"src\") || undefined,\n\t\t\t\talt: element.getAttribute(\"alt\") || undefined,\n\t\t\t\thref: element.getAttribute(\"href\") || undefined,\n\t\t\t\ttarget: element.getAttribute(\"target\") || undefined,\n\t\t\t\trel: element.getAttribute(\"rel\") || undefined,\n\t\t\t\tcomputedStyles: this.getRelevantStyles(element),\n\t\t\t\tisDarkMode,\n\t\t\t},\n\t\t};\n\n\t\t// Send to parent window\n\t\twindow.parent.postMessage(data, \"*\");\n\t}\n\n\t/**\n\t * Handle request to get all elements' current state\n\t * Used for computing diffs on save (Lovable's approach)\n\t */\n\tprivate handleGetAllElementsState() {\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\t\tconst elementsState: Array<{\n\t\t\tsourceFile: string;\n\t\t\tsourceLine: number;\n\t\t\tsourceColumn: number;\n\t\t\tclassName: string;\n\t\t\ttextContent: string | null;\n\t\t\tsrc?: string;\n\t\t\talt?: string;\n\t\t\thref?: string;\n\t\t\ttarget?: string;\n\t\t\trel?: string;\n\t\t}> = [];\n\n\t\tfor (const el of allElements) {\n\t\t\t// Skip our own overlays\n\t\t\tif (\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (!source) continue;\n\n\t\t\tconst element = el as HTMLElement;\n\n\t\t\t// Check if this is an Image component wrapper with an <img> child\n\t\t\tlet actualElement = element;\n\t\t\tif (element.tagName !== \"IMG\") {\n\t\t\t\tconst imgChild = element.querySelector(\"img\");\n\t\t\t\tif (imgChild) {\n\t\t\t\t\tactualElement = imgChild as HTMLElement;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst textContent = this.getDirectTextContent(element);\n\n\t\t\t// Get className as string - handle SVG elements which have className as SVGAnimatedString\n\t\t\tlet className = \"\";\n\t\t\tif (element.className) {\n\t\t\t\t// For SVG elements, className is SVGAnimatedString with .baseVal property\n\t\t\t\tif (typeof element.className === \"string\") {\n\t\t\t\t\tclassName = element.className;\n\t\t\t\t} else if (\"baseVal\" in element.className) {\n\t\t\t\t\tclassName = (element.className as { baseVal: string }).baseVal;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telementsState.push({\n\t\t\t\tsourceFile: source.fileName,\n\t\t\t\tsourceLine: source.lineNumber,\n\t\t\t\tsourceColumn: source.columnNumber,\n\t\t\t\tclassName,\n\t\t\t\ttextContent,\n\t\t\t\tsrc: actualElement.getAttribute(\"src\") || undefined,\n\t\t\t\talt: actualElement.getAttribute(\"alt\") || undefined,\n\t\t\t\thref: element.getAttribute(\"href\") || undefined,\n\t\t\t\ttarget: element.getAttribute(\"target\") || undefined,\n\t\t\t\trel: element.getAttribute(\"rel\") || undefined,\n\t\t\t});\n\t\t}\n\n\t\t// Send back to parent\n\t\twindow.parent.postMessage(\n\t\t\t{\n\t\t\t\ttype: \"FB_ALL_ELEMENTS_STATE\",\n\t\t\t\tdata: elementsState,\n\t\t\t},\n\t\t\t\"*\",\n\t\t);\n\t}\n\n\t/**\n\t * Handle optimistic element updates from parent window\n\t * Uses React Fiber source to find the correct element\n\t */\n\tprivate handleUpdateElement(message: DesignModeMessage) {\n\t\tconst { sourceFile, sourceLine, sourceColumn, updates } = message;\n\n\t\tif (!sourceFile || !sourceLine || !updates) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find element by matching React Fiber source\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\n\t\tfor (const el of allElements) {\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (\n\t\t\t\tsource?.fileName === sourceFile &&\n\t\t\t\tsource?.lineNumber === sourceLine &&\n\t\t\t\tsource?.columnNumber === sourceColumn\n\t\t\t) {\n\t\t\t\tlet element = el as HTMLElement;\n\n\t\t\t\t// Special case: if we're updating image properties (src/alt) but found a container,\n\t\t\t\t// look for an <img> child element\n\t\t\t\tif (\n\t\t\t\t\t(updates.src !== undefined || updates.alt !== undefined) &&\n\t\t\t\t\telement.tagName !== \"IMG\"\n\t\t\t\t) {\n\t\t\t\t\tconst imgChild = element.querySelector(\"img\");\n\t\t\t\t\tif (imgChild) {\n\t\t\t\t\t\telement = imgChild as HTMLElement;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Apply optimistic updates\n\t\t\t\tif (updates.className !== undefined) {\n\t\t\t\t\t// Apply the className - Tailwind v4 Browser CDN will auto-generate CSS\n\t\t\t\t\telement.className = updates.className;\n\t\t\t\t}\n\n\t\t\t\tif (updates.textContent !== undefined) {\n\t\t\t\t\t// Only update first text node to preserve child elements\n\t\t\t\t\tconst textNode = Array.from(element.childNodes).find(\n\t\t\t\t\t\t(node) => node.nodeType === Node.TEXT_NODE,\n\t\t\t\t\t);\n\t\t\t\t\tif (textNode) {\n\t\t\t\t\t\ttextNode.textContent = updates.textContent;\n\t\t\t\t\t} else {\n\t\t\t\t\t\telement.textContent = updates.textContent;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (updates.src !== undefined && \"src\" in element) {\n\t\t\t\t\t// Use setAttribute to force browser reload, bypassing React's state management\n\t\t\t\t\telement.setAttribute(\"src\", updates.src);\n\t\t\t\t\t// Also update srcset to prevent fallback\n\t\t\t\t\tif (element.hasAttribute(\"srcset\")) {\n\t\t\t\t\t\telement.removeAttribute(\"srcset\");\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (updates.alt !== undefined && \"alt\" in element) {\n\t\t\t\t\t(element as HTMLImageElement).alt = updates.alt;\n\t\t\t\t}\n\n\t\t\t\tif (updates.href !== undefined && \"href\" in element) {\n\t\t\t\t\telement.setAttribute(\"href\", updates.href);\n\t\t\t\t}\n\n\t\t\t\tif (updates.target !== undefined && \"target\" in element) {\n\t\t\t\t\telement.setAttribute(\"target\", updates.target);\n\t\t\t\t}\n\n\t\t\t\tif (updates.rel !== undefined && \"rel\" in element) {\n\t\t\t\t\telement.setAttribute(\"rel\", updates.rel);\n\t\t\t\t}\n\n\t\t\t\t// Update overlays if this is the hovered or selected element\n\t\t\t\tif (element === this.hoveredElement) {\n\t\t\t\t\tthis.updateOverlayPosition(this.hoverOverlay, element);\n\t\t\t\t}\n\t\t\t\tif (element === this.selectedElement) {\n\t\t\t\t\tthis.updateOverlayPosition(this.selectionOverlay, element);\n\t\t\t\t\tthis.updateTagLabel(element);\n\t\t\t\t}\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate handleDeleteElement(message: DesignModeMessage) {\n\t\tconst { sourceFile, sourceLine, sourceColumn } = message;\n\n\t\tif (!sourceFile || !sourceLine || !sourceColumn) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find element by matching React Fiber source\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\n\t\tfor (const el of allElements) {\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (\n\t\t\t\tsource?.fileName === sourceFile &&\n\t\t\t\tsource?.lineNumber === sourceLine &&\n\t\t\t\tsource?.columnNumber === sourceColumn\n\t\t\t) {\n\t\t\t\tconst element = el as HTMLElement;\n\n\t\t\t\t// If this is the selected element, deselect it\n\t\t\t\tif (element === this.selectedElement) {\n\t\t\t\t\tthis.deselectElement();\n\t\t\t\t}\n\n\t\t\t\t// If this is the hovered element, clear hover\n\t\t\t\tif (element === this.hoveredElement) {\n\t\t\t\t\tthis.hoveredElement = null;\n\t\t\t\t\tthis.hoverOverlay.style.display = \"none\";\n\t\t\t\t}\n\n\t\t\t\t// Remove the element from DOM\n\t\t\t\telement.remove();\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Load fonts that are already defined in :root CSS on initial page load\n\t */\n\tprivate loadInitialFonts() {\n\t\ttry {\n\t\t\t// Get computed styles from :root\n\t\t\tconst rootStyles = getComputedStyle(document.documentElement);\n\n\t\t\t// Check for font CSS variables\n\t\t\tconst fontSans = rootStyles.getPropertyValue(\"--font-sans\").trim();\n\t\t\tconst fontSerif = rootStyles.getPropertyValue(\"--font-serif\").trim();\n\t\t\tconst fontMono = rootStyles.getPropertyValue(\"--font-mono\").trim();\n\n\t\t\t// Load each font if it exists\n\t\t\tif (fontSans) loadGoogleFontInIframe(fontSans);\n\t\t\tif (fontSerif) loadGoogleFontInIframe(fontSerif);\n\t\t\tif (fontMono) loadGoogleFontInIframe(fontMono);\n\t\t} catch (error) {\n\t\t\tconsole.error(\"Error loading initial fonts:\", error);\n\t\t}\n\t}\n\n\t/**\n\t * Handle theme update from parent window\n\t * Apply CSS variables using a style tag (NOT inline styles) to maintain proper CSS cascade\n\t * Note: We don't change the dark class - that's controlled by the native theme switcher\n\t */\n\tprivate handleUpdateTheme(theme?: {\n\t\tlightVariables?: Record<string, string>;\n\t\tdarkVariables?: Record<string, string>;\n\t}) {\n\t\tif (!theme) return;\n\n\t\t// Find or create the style element for design mode theme overrides\n\t\tlet styleEl = document.getElementById(\n\t\t\t\"fb-design-mode-theme\",\n\t\t) as HTMLStyleElement;\n\t\tif (!styleEl) {\n\t\t\tstyleEl = document.createElement(\"style\");\n\t\t\tstyleEl.id = \"fb-design-mode-theme\";\n\t\t\tdocument.head.appendChild(styleEl);\n\t\t}\n\n\t\t// Build CSS with both light and dark theme variables\n\t\tlet css = \"\";\n\n\t\t// Light theme variables in :root (includes colors, fonts, radius)\n\t\tif (theme.lightVariables && Object.keys(theme.lightVariables).length > 0) {\n\t\t\tcss += \":root {\\n\";\n\t\t\tfor (const [key, value] of Object.entries(theme.lightVariables)) {\n\t\t\t\tcss += ` ${key}: ${value};\\n`;\n\n\t\t\t\t// Load Google Fonts when font variables are updated\n\t\t\t\tif (\n\t\t\t\t\tkey === \"--font-sans\" ||\n\t\t\t\t\tkey === \"--font-serif\" ||\n\t\t\t\t\tkey === \"--font-mono\"\n\t\t\t\t) {\n\t\t\t\t\t// Extract font name from value like '\"Roboto\", sans-serif'\n\t\t\t\t\tconst match = value.match(/\"([^\"]+)\"/);\n\t\t\t\t\tconst fontName = match?.[1] || value.split(\",\")[0]?.trim() || value;\n\t\t\t\t\tloadGoogleFontInIframe(fontName);\n\t\t\t\t}\n\t\t\t}\n\t\t\tcss += \"}\\n\\n\";\n\t\t}\n\n\t\t// Dark theme variables in .dark (only colors, not fonts/radius)\n\t\tif (theme.darkVariables && Object.keys(theme.darkVariables).length > 0) {\n\t\t\tcss += \".dark {\\n\";\n\t\t\tfor (const [key, value] of Object.entries(theme.darkVariables)) {\n\t\t\t\tcss += ` ${key}: ${value};\\n`;\n\t\t\t}\n\t\t\tcss += \"}\\n\";\n\t\t}\n\n\t\t// Apply the CSS\n\t\tstyleEl.textContent = css;\n\t}\n}\n\n// Initialize when script loads - only in browser environment\n// Tailwind Play CDN handles all CSS generation automatically\nif (typeof window !== \"undefined\" && typeof document !== \"undefined\") {\n\tnew DesignModeOverlay();\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/overlay.ts"],"names":["loadedFonts","loadGoogleFontInIframe","fontValue","cleanFont","sf","fontUrl","link","DesignModeOverlay","border","zIndex","overlay","label","children","child","index","data","allElements","el","source","element","currentElement","depth","relativePath","line","column","node","selectableElements","topElement","parent","i","now","timeSinceLastClick","distanceMoved","target","rect","tagName","computed","relevantProps","styles","prop","directTextNodes","directText","isDarkMode","className","elementsState","actualElement","imgChild","textContent","message","sourceFile","sourceLine","sourceColumn","updates","textNode","rootStyles","fontSans","fontSerif","fontMono","error","theme","styleEl","css","key","value","fontName"],"mappings":"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","file":"overlay.js","sourcesContent":["/**\n * Design Mode Overlay Script\n * Injected into the preview iframe to enable element selection\n *\n * Uses React Fiber's _debugSource to track element source locations at runtime.\n * No build-time tagging required - everything is resolved from React's internal data.\n *\n * Runtime CSS generation is handled by Tailwind v4 Browser CDN.\n */\n\nimport type {\n\tDesignModeMessage,\n\tElementSelectedMessage,\n\tSourceLocation,\n} from \"./types\";\n\n// Track loaded fonts to avoid duplicate loads\nconst loadedFonts = new Set<string>();\n\n/**\n * Load Google Font in the iframe\n * Dynamically injects font <link> tag into iframe head\n */\nfunction loadGoogleFontInIframe(fontValue: string): void {\n\t// Extract clean font name from CSS value (remove quotes and fallbacks)\n\tconst cleanFont = fontValue.replace(/['\"]/g, \"\").split(\",\")[0]?.trim();\n\tif (!cleanFont) {\n\t\treturn;\n\t}\n\n\t// Skip if already loaded\n\tif (loadedFonts.has(cleanFont)) {\n\t\treturn;\n\t}\n\n\t// System fonts don't need to be loaded\n\tconst systemFonts = [\n\t\t\"Arial\",\n\t\t\"Helvetica\",\n\t\t\"Helvetica Neue\",\n\t\t\"Segoe UI\",\n\t\t\"San Francisco\",\n\t\t\"system-ui\",\n\t\t\"sans-serif\",\n\t\t\"Times New Roman\",\n\t\t\"Georgia\",\n\t\t\"Times\",\n\t\t\"serif\",\n\t\t\"Monaco\",\n\t\t\"Consolas\",\n\t\t\"SF Mono\",\n\t\t\"Menlo\",\n\t\t\"Courier New\",\n\t\t\"Courier\",\n\t\t\"monospace\",\n\t];\n\tif (systemFonts.some((sf) => cleanFont.includes(sf))) {\n\t\treturn;\n\t}\n\n\t// Build Google Fonts URL (spaces should be +, not encoded)\n\tconst fontUrl = `https://fonts.googleapis.com/css2?family=${cleanFont.replace(/\\s+/g, \"+\")}:wght@400;500;600&display=swap`;\n\n\t// Check if already in DOM\n\tconst existingLink = document.querySelector(`link[href=\"${fontUrl}\"]`);\n\tif (existingLink) {\n\t\tloadedFonts.add(cleanFont);\n\t\treturn;\n\t}\n\n\t// Create and inject <link> tag\n\tconst link = document.createElement(\"link\");\n\tlink.rel = \"stylesheet\";\n\tlink.href = fontUrl;\n\tlink.onload = () => {\n\t\tloadedFonts.add(cleanFont);\n\t};\n\tlink.onerror = () => {};\n\tdocument.head.appendChild(link);\n}\n\nclass DesignModeOverlay {\n\tprivate isEnabled = false;\n\tprivate selectedElement: HTMLElement | null = null;\n\tprivate hoveredElement: HTMLElement | null = null;\n\n\t// Separate overlays for different states\n\tprivate hoverOverlay: HTMLDivElement;\n\tprivate selectionOverlay: HTMLDivElement;\n\tprivate selectionTagLabel: HTMLDivElement;\n\tprivate childrenOverlays: HTMLDivElement[] = [];\n\tprivate resizeObserver: ResizeObserver | null = null;\n\n\tconstructor() {\n\t\t// Load any fonts that are already defined in CSS on initial load\n\t\tthis.loadInitialFonts();\n\n\t\t// Create persistent overlay elements\n\t\tthis.hoverOverlay = this.createOverlay(\"2px solid #3b82f6\", 999991);\n\t\tthis.selectionOverlay = this.createOverlay(\"1px solid #3b82f6\", 999990);\n\t\tthis.selectionTagLabel = this.createTagLabel();\n\n\t\tthis.listen();\n\t\tthis.setupResizeObserver();\n\t}\n\n\tprivate createOverlay(border: string, zIndex: number): HTMLDivElement {\n\t\tconst overlay = document.createElement(\"div\");\n\t\toverlay.className = \"fb-design-mode-overlay\";\n\t\tObject.assign(overlay.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tborder,\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: String(zIndex),\n\t\t\tdisplay: \"none\",\n\t\t\tboxShadow: \"0 0 0 1px rgba(59, 130, 246, 0.2)\",\n\t\t\ttransition: \"all 0.1s ease-out\",\n\t\t});\n\t\tdocument.body.appendChild(overlay);\n\t\treturn overlay;\n\t}\n\n\tprivate createChildOverlay(): HTMLDivElement {\n\t\tconst overlay = document.createElement(\"div\");\n\t\toverlay.className = \"fb-design-mode-overlay fb-child-overlay\";\n\t\tObject.assign(overlay.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tborder: \"1px dashed rgba(59, 130, 246, 0.4)\",\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: \"999989\",\n\t\t\tdisplay: \"none\",\n\t\t\tboxShadow: \"0 0 0 1px rgba(59, 130, 246, 0.1)\",\n\t\t\ttransition: \"all 0.1s ease-out\",\n\t\t});\n\t\tdocument.body.appendChild(overlay);\n\t\treturn overlay;\n\t}\n\n\tprivate createTagLabel(): HTMLDivElement {\n\t\tconst label = document.createElement(\"div\");\n\t\tlabel.className = \"fb-design-mode-tag\";\n\t\tObject.assign(label.style, {\n\t\t\tposition: \"absolute\",\n\t\t\tbackground: \"#3b82f6\",\n\t\t\tcolor: \"white\",\n\t\t\tpadding: \"2px 6px\",\n\t\t\tfontSize: \"11px\",\n\t\t\tfontFamily: \"monospace\",\n\t\t\tfontWeight: \"500\",\n\t\t\tborderRadius: \"0 0 4px 0\",\n\t\t\tpointerEvents: \"none\",\n\t\t\tzIndex: \"999999\",\n\t\t\tdisplay: \"none\",\n\t\t});\n\t\tdocument.body.appendChild(label);\n\t\treturn label;\n\t}\n\n\tprivate listen() {\n\t\twindow.addEventListener(\"message\", (e: MessageEvent<DesignModeMessage>) => {\n\t\t\tif (e.data.type === \"ENABLE_DESIGN_MODE\") {\n\t\t\t\tthis.enable();\n\t\t\t} else if (e.data.type === \"DISABLE_DESIGN_MODE\") {\n\t\t\t\tthis.disable();\n\t\t\t} else if (e.data.type === \"FB_UPDATE_ELEMENT\") {\n\t\t\t\tthis.handleUpdateElement(e.data);\n\t\t\t} else if (e.data.type === \"FB_DELETE_ELEMENT\") {\n\t\t\t\tthis.handleDeleteElement(e.data);\n\t\t\t} else if (e.data.type === \"FB_GET_ALL_ELEMENTS_STATE\") {\n\t\t\t\tthis.handleGetAllElementsState();\n\t\t\t} else if (e.data.type === \"FB_UPDATE_THEME\") {\n\t\t\t\tthis.handleUpdateTheme(e.data.theme);\n\t\t\t} else if (e.data.type === \"FB_DESELECT_ELEMENT\") {\n\t\t\t\tthis.deselectElement();\n\t\t\t} else if (e.data.type === \"FB_SELECT_ELEMENT\") {\n\t\t\t\tthis.handleSelectElement(e.data);\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate setupResizeObserver() {\n\t\t// Listen for window resize and scroll events\n\t\twindow.addEventListener(\"resize\", this.updateOverlayPositions);\n\t\twindow.addEventListener(\"scroll\", this.updateOverlayPositions, true);\n\n\t\t// Use ResizeObserver to detect when elements change size\n\t\tthis.resizeObserver = new ResizeObserver(() => {\n\t\t\tthis.updateOverlayPositions();\n\t\t});\n\n\t\t// Observe the document body for any size changes\n\t\tthis.resizeObserver.observe(document.body);\n\t}\n\n\tprivate updateOverlayPositions = () => {\n\t\t// Update selected element overlay\n\t\tif (\n\t\t\tthis.selectedElement &&\n\t\t\tthis.selectionOverlay.style.display !== \"none\"\n\t\t) {\n\t\t\tthis.updateOverlayPosition(this.selectionOverlay, this.selectedElement);\n\t\t\tthis.updateTagLabel(this.selectedElement);\n\t\t}\n\n\t\t// Update hovered element overlay\n\t\tif (this.hoveredElement && this.hoverOverlay.style.display !== \"none\") {\n\t\t\tthis.updateOverlayPosition(this.hoverOverlay, this.hoveredElement);\n\t\t}\n\n\t\t// Update children overlays\n\t\tfor (const overlay of this.childrenOverlays) {\n\t\t\tif (overlay.style.display !== \"none\" && this.hoveredElement) {\n\t\t\t\t// Find the corresponding child element\n\t\t\t\tconst children = Array.from(this.hoveredElement.children).filter(\n\t\t\t\t\t(child) => {\n\t\t\t\t\t\tconst source = this.getReactFiberSource(child as HTMLElement);\n\t\t\t\t\t\treturn source !== null;\n\t\t\t\t\t},\n\t\t\t\t) as HTMLElement[];\n\n\t\t\t\tconst index = this.childrenOverlays.indexOf(overlay);\n\t\t\t\tconst child = children[index];\n\t\t\t\tif (child) {\n\t\t\t\t\tthis.updateOverlayPosition(overlay, child);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tenable() {\n\t\tif (this.isEnabled) return;\n\t\tthis.isEnabled = true;\n\n\t\tdocument.addEventListener(\"mousemove\", this.handleMouseMove);\n\t\tdocument.addEventListener(\"click\", this.handleClick, true);\n\t\tdocument.addEventListener(\"mouseleave\", this.handleMouseLeave);\n\n\t\t// Add cursor style\n\t\tdocument.body.style.cursor = \"crosshair\";\n\t}\n\n\tdisable() {\n\t\tif (!this.isEnabled) return;\n\t\tthis.isEnabled = false;\n\n\t\tdocument.removeEventListener(\"mousemove\", this.handleMouseMove);\n\t\tdocument.removeEventListener(\"click\", this.handleClick, true);\n\t\tdocument.removeEventListener(\"mouseleave\", this.handleMouseLeave);\n\n\t\t// Hide all overlays\n\t\tthis.hoverOverlay.style.display = \"none\";\n\t\tthis.selectionOverlay.style.display = \"none\";\n\t\tthis.selectionTagLabel.style.display = \"none\";\n\t\tthis.hideChildrenOverlays();\n\n\t\t// Remove runtime markers\n\t\tif (this.selectedElement) {\n\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t}\n\t\tif (this.hoveredElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\n\t\tdocument.body.style.cursor = \"\";\n\t\tthis.selectedElement = null;\n\t\tthis.hoveredElement = null;\n\t}\n\n\t/**\n\t * Deselect the currently selected element\n\t * Keeps design mode active but clears the selection\n\t */\n\tdeselectElement() {\n\t\tif (!this.selectedElement) return;\n\n\t\t// Remove selection marker\n\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\tthis.selectedElement = null;\n\n\t\t// Hide selection overlay and tag\n\t\tthis.selectionOverlay.style.display = \"none\";\n\t\tthis.selectionTagLabel.style.display = \"none\";\n\t}\n\n\t/**\n\t * Programmatically select an element by its source location\n\t * Used when restoring selection after page reload\n\t */\n\tprivate handleSelectElement(data: DesignModeMessage) {\n\t\tif (\n\t\t\t!data.sourceFile ||\n\t\t\t!data.sourceLine ||\n\t\t\tdata.sourceColumn === undefined\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find element by source location\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\t\tfor (const el of allElements) {\n\t\t\t// Skip our own overlays\n\t\t\tif (\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (\n\t\t\t\tsource &&\n\t\t\t\tsource.fileName === data.sourceFile &&\n\t\t\t\tsource.lineNumber === data.sourceLine &&\n\t\t\t\tsource.columnNumber === data.sourceColumn\n\t\t\t) {\n\t\t\t\tconst element = el as HTMLElement;\n\n\t\t\t\t// Update selected element marker\n\t\t\t\tif (this.selectedElement) {\n\t\t\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t\t\t}\n\n\t\t\t\tthis.selectedElement = element;\n\t\t\t\tthis.selectedElement.setAttribute(\"data-fb-selected\", \"true\");\n\n\t\t\t\t// Update selection overlay and tag\n\t\t\t\tthis.updateOverlayPosition(this.selectionOverlay, element);\n\t\t\t\tthis.selectionOverlay.style.display = \"block\";\n\n\t\t\t\tthis.updateTagLabel(element);\n\t\t\t\tthis.selectionTagLabel.style.display = \"block\";\n\n\t\t\t\t// Send selection data to parent\n\t\t\t\tthis.sendElementData(element, source);\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Extract source location from babel plugin attributes\n\t * Attributes: data-inspector-relative-path, data-inspector-line, data-inspector-column\n\t */\n\tprivate getReactFiberSource(element: HTMLElement): SourceLocation | null {\n\t\t// Check current element and up to 5 parent elements\n\t\tlet currentElement: HTMLElement | null = element;\n\t\tlet depth = 0;\n\n\t\twhile (currentElement && depth < 5) {\n\t\t\tconst relativePath = currentElement.getAttribute(\n\t\t\t\t\"data-inspector-relative-path\",\n\t\t\t);\n\t\t\tconst line = currentElement.getAttribute(\"data-inspector-line\");\n\t\t\tconst column = currentElement.getAttribute(\"data-inspector-column\");\n\n\t\t\tif (relativePath && line && column) {\n\t\t\t\treturn {\n\t\t\t\t\tfileName: relativePath,\n\t\t\t\t\tlineNumber: Number.parseInt(line, 10),\n\t\t\t\t\tcolumnNumber: Number.parseInt(column, 10),\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tcurrentElement = currentElement.parentElement;\n\t\t\tdepth++;\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tprivate isContainer(element: HTMLElement): boolean {\n\t\tconst containerTags = [\n\t\t\t\"div\",\n\t\t\t\"section\",\n\t\t\t\"header\",\n\t\t\t\"footer\",\n\t\t\t\"main\",\n\t\t\t\"aside\",\n\t\t\t\"nav\",\n\t\t\t\"article\",\n\t\t\t\"ul\",\n\t\t\t\"ol\",\n\t\t\t\"li\",\n\t\t];\n\t\treturn containerTags.includes(element.tagName.toLowerCase());\n\t}\n\n\tprivate hasDirectTextContent(element: HTMLElement): boolean {\n\t\treturn Array.from(element.childNodes).some(\n\t\t\t(node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim(),\n\t\t);\n\t}\n\n\tprivate handleMouseLeave = () => {\n\t\tif (!this.isEnabled) return;\n\n\t\t// Hide hover overlay when mouse leaves the document\n\t\tif (this.hoveredElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\t\tthis.hoveredElement = null;\n\t\tthis.hoverOverlay.style.display = \"none\";\n\t\tthis.hideChildrenOverlays();\n\t};\n\n\tprivate handleMouseMove = (e: MouseEvent) => {\n\t\tif (!this.isEnabled) return;\n\n\t\t// Get all elements at this point\n\t\tconst elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);\n\n\t\t// Filter to only elements with React Fiber source, excluding overlays\n\t\tconst selectableElements = elementsAtPoint.filter((el) => {\n\t\t\tif (\n\t\t\t\tel.classList.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\tel.classList.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Must have React Fiber source location\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (source === null) {\n\t\t\t\t// Debug: log elements without fiber\n\t\t\t}\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\tif (selectableElements.length === 0) {\n\t\t\tif (this.hoveredElement) {\n\t\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t\t}\n\t\t\tthis.hoveredElement = null;\n\t\t\tthis.hoverOverlay.style.display = \"none\";\n\t\t\tthis.hideChildrenOverlays();\n\t\t\treturn;\n\t\t}\n\n\t\t// Get topmost element (first in array)\n\t\tconst topElement = selectableElements[0];\n\t\tif (!topElement) return; // Type guard for noUncheckedIndexedAccess\n\n\t\t// Don't show hover overlay if this is the selected element\n\t\tif (topElement === this.selectedElement) {\n\t\t\tthis.hoverOverlay.style.display = \"none\";\n\t\t\tthis.hideChildrenOverlays();\n\t\t\treturn;\n\t\t}\n\n\t\t// Update hovered element\n\t\tif (this.hoveredElement && this.hoveredElement !== topElement) {\n\t\t\tthis.hoveredElement.removeAttribute(\"data-fb-hovered\");\n\t\t}\n\n\t\tthis.hoveredElement = topElement;\n\t\tthis.hoveredElement.setAttribute(\"data-fb-hovered\", \"true\");\n\n\t\t// Show hover overlay\n\t\tthis.updateOverlayPosition(this.hoverOverlay, topElement);\n\t\tthis.hoverOverlay.style.display = \"block\";\n\n\t\t// Show children overlays if this is a container without direct text\n\t\tif (\n\t\t\tthis.isContainer(topElement) &&\n\t\t\t!this.hasDirectTextContent(topElement)\n\t\t) {\n\t\t\tthis.showChildrenOverlays(topElement);\n\t\t} else {\n\t\t\tthis.hideChildrenOverlays();\n\t\t}\n\t};\n\n\tprivate showChildrenOverlays(parent: HTMLElement) {\n\t\t// Get direct children with React Fiber source\n\t\tconst children = Array.from(parent.children).filter((child) => {\n\t\t\tconst source = this.getReactFiberSource(child as HTMLElement);\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\t// Ensure we have enough child overlays\n\t\twhile (this.childrenOverlays.length < children.length) {\n\t\t\tthis.childrenOverlays.push(this.createChildOverlay());\n\t\t}\n\n\t\t// Show overlay for each child\n\t\tchildren.forEach((child, index) => {\n\t\t\tconst overlay = this.childrenOverlays[index];\n\t\t\tif (overlay) {\n\t\t\t\tthis.updateOverlayPosition(overlay, child);\n\t\t\t\toverlay.style.display = \"block\";\n\t\t\t}\n\t\t});\n\n\t\t// Hide unused child overlays\n\t\tfor (let i = children.length; i < this.childrenOverlays.length; i++) {\n\t\t\tconst overlay = this.childrenOverlays[i];\n\t\t\tif (overlay) {\n\t\t\t\toverlay.style.display = \"none\";\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate hideChildrenOverlays() {\n\t\tfor (const overlay of this.childrenOverlays) {\n\t\t\toverlay.style.display = \"none\";\n\t\t}\n\t}\n\n\tprivate currentSelectionIndex = 0;\n\tprivate lastClickTime = 0;\n\tprivate lastClickPosition = { x: 0, y: 0 };\n\n\tprivate handleClick = (e: MouseEvent) => {\n\t\tif (!this.isEnabled) return;\n\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\tif (!this.hoveredElement) return;\n\n\t\tconst now = Date.now();\n\t\tconst timeSinceLastClick = now - this.lastClickTime;\n\t\tconst distanceMoved = Math.hypot(\n\t\t\te.clientX - this.lastClickPosition.x,\n\t\t\te.clientY - this.lastClickPosition.y,\n\t\t);\n\n\t\t// Get all elements at click point for cycling\n\t\tconst elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);\n\t\tconst selectableElements = elementsAtPoint.filter((el) => {\n\t\t\tif (\n\t\t\t\tel.classList.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\tel.classList.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Must have React Fiber source location\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\treturn source !== null;\n\t\t}) as HTMLElement[];\n\n\t\t// Cycle through nested elements on repeated clicks\n\t\tif (\n\t\t\ttimeSinceLastClick < 1000 &&\n\t\t\tdistanceMoved < 10 &&\n\t\t\tselectableElements.length > 1\n\t\t) {\n\t\t\tthis.currentSelectionIndex =\n\t\t\t\t(this.currentSelectionIndex + 1) % selectableElements.length;\n\t\t} else {\n\t\t\tthis.currentSelectionIndex = 0;\n\t\t}\n\n\t\tconst target = selectableElements[this.currentSelectionIndex];\n\t\tif (!target) return; // Type guard for noUncheckedIndexedAccess\n\n\t\t// Get source location\n\t\tconst source = this.getReactFiberSource(target);\n\t\tif (!source) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update selected element marker\n\t\tif (this.selectedElement) {\n\t\t\tthis.selectedElement.removeAttribute(\"data-fb-selected\");\n\t\t}\n\n\t\tthis.selectedElement = target;\n\t\tthis.selectedElement.setAttribute(\"data-fb-selected\", \"true\");\n\n\t\t// Update selection overlay and tag\n\t\tthis.updateOverlayPosition(this.selectionOverlay, target);\n\t\tthis.selectionOverlay.style.display = \"block\";\n\n\t\tthis.updateTagLabel(target);\n\t\tthis.selectionTagLabel.style.display = \"block\";\n\n\t\t// Send selection data to parent\n\t\tthis.sendElementData(target, source);\n\n\t\t// Update last click info\n\t\tthis.lastClickTime = now;\n\t\tthis.lastClickPosition = { x: e.clientX, y: e.clientY };\n\t};\n\n\tprivate updateOverlayPosition(overlay: HTMLDivElement, element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect();\n\t\tObject.assign(overlay.style, {\n\t\t\ttop: `${rect.top + window.scrollY}px`,\n\t\t\tleft: `${rect.left + window.scrollX}px`,\n\t\t\twidth: `${rect.width}px`,\n\t\t\theight: `${rect.height}px`,\n\t\t});\n\t}\n\n\tprivate updateTagLabel(element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect();\n\t\tconst tagName = element.tagName.toLowerCase();\n\n\t\tthis.selectionTagLabel.textContent = tagName;\n\t\tObject.assign(this.selectionTagLabel.style, {\n\t\t\ttop: `${rect.top + window.scrollY}px`,\n\t\t\tleft: `${rect.left + window.scrollX}px`,\n\t\t});\n\t}\n\n\tprivate getRelevantStyles(element: HTMLElement): Record<string, string> {\n\t\tconst computed = window.getComputedStyle(element);\n\t\tconst relevantProps = [\n\t\t\t\"display\",\n\t\t\t\"position\",\n\t\t\t\"width\",\n\t\t\t\"height\",\n\t\t\t\"padding\",\n\t\t\t\"margin\",\n\t\t\t\"backgroundColor\",\n\t\t\t\"color\",\n\t\t\t\"fontSize\",\n\t\t\t\"fontFamily\",\n\t\t];\n\n\t\tconst styles: Record<string, string> = {};\n\t\tfor (const prop of relevantProps) {\n\t\t\tstyles[prop] = computed.getPropertyValue(prop);\n\t\t}\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Extract direct text content from DOM (not from nested children)\n\t */\n\tprivate getDirectTextContent(element: HTMLElement): string | null {\n\t\tconst directTextNodes = Array.from(element.childNodes)\n\t\t\t.filter((node) => node.nodeType === Node.TEXT_NODE)\n\t\t\t.map((node) => node.textContent?.trim())\n\t\t\t.filter(Boolean);\n\n\t\treturn directTextNodes.length > 0 ? directTextNodes.join(\" \") : null;\n\t}\n\n\tprivate sendElementData(element: HTMLElement, source: SourceLocation) {\n\t\tconst directText = this.getDirectTextContent(element);\n\n\t\t// Detect if dark mode is active\n\t\tconst isDarkMode = document.documentElement.classList.contains(\"dark\");\n\n\t\t// Extract className as string (handle SVGAnimatedString for SVG elements)\n\t\tlet className = \"\";\n\t\tif (element.className) {\n\t\t\tif (typeof element.className === \"string\") {\n\t\t\t\tclassName = element.className;\n\t\t\t} else if (\"baseVal\" in element.className) {\n\t\t\t\tclassName = (element.className as { baseVal: string }).baseVal;\n\t\t\t}\n\t\t}\n\n\t\tconst data: ElementSelectedMessage = {\n\t\t\ttype: \"FB_ELEMENT_SELECTED\",\n\t\t\tdata: {\n\t\t\t\t// Source location from React Fiber\n\t\t\t\tsourceFile: source.fileName,\n\t\t\t\tsourceLine: source.lineNumber,\n\t\t\t\tsourceColumn: source.columnNumber,\n\n\t\t\t\t// DOM properties\n\t\t\t\ttagName: element.tagName,\n\t\t\t\tclassName,\n\t\t\t\ttextContent: directText,\n\t\t\t\tsrc: element.getAttribute(\"src\") || undefined,\n\t\t\t\talt: element.getAttribute(\"alt\") || undefined,\n\t\t\t\thref: element.getAttribute(\"href\") || undefined,\n\t\t\t\ttarget: element.getAttribute(\"target\") || undefined,\n\t\t\t\trel: element.getAttribute(\"rel\") || undefined,\n\t\t\t\tcomputedStyles: this.getRelevantStyles(element),\n\t\t\t\tisDarkMode,\n\t\t\t},\n\t\t};\n\n\t\t// Send to parent window\n\t\twindow.parent.postMessage(data, \"*\");\n\t}\n\n\t/**\n\t * Handle request to get all elements' current state\n\t * Used for computing diffs on save (Lovable's approach)\n\t */\n\tprivate handleGetAllElementsState() {\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\t\tconst elementsState: Array<{\n\t\t\tsourceFile: string;\n\t\t\tsourceLine: number;\n\t\t\tsourceColumn: number;\n\t\t\tclassName: string;\n\t\t\ttextContent: string | null;\n\t\t\tsrc?: string;\n\t\t\talt?: string;\n\t\t\thref?: string;\n\t\t\ttarget?: string;\n\t\t\trel?: string;\n\t\t}> = [];\n\n\t\tfor (const el of allElements) {\n\t\t\t// Skip our own overlays\n\t\t\tif (\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-overlay\") ||\n\t\t\t\t(el as HTMLElement).classList?.contains(\"fb-design-mode-tag\")\n\t\t\t) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (!source) continue;\n\n\t\t\tconst element = el as HTMLElement;\n\n\t\t\t// Check if this is an Image component wrapper with an <img> child\n\t\t\tlet actualElement = element;\n\t\t\tif (element.tagName !== \"IMG\") {\n\t\t\t\tconst imgChild = element.querySelector(\"img\");\n\t\t\t\tif (imgChild) {\n\t\t\t\t\tactualElement = imgChild as HTMLElement;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst textContent = this.getDirectTextContent(element);\n\n\t\t\t// Get className as string - handle SVG elements which have className as SVGAnimatedString\n\t\t\tlet className = \"\";\n\t\t\tif (element.className) {\n\t\t\t\t// For SVG elements, className is SVGAnimatedString with .baseVal property\n\t\t\t\tif (typeof element.className === \"string\") {\n\t\t\t\t\tclassName = element.className;\n\t\t\t\t} else if (\"baseVal\" in element.className) {\n\t\t\t\t\tclassName = (element.className as { baseVal: string }).baseVal;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telementsState.push({\n\t\t\t\tsourceFile: source.fileName,\n\t\t\t\tsourceLine: source.lineNumber,\n\t\t\t\tsourceColumn: source.columnNumber,\n\t\t\t\tclassName,\n\t\t\t\ttextContent,\n\t\t\t\tsrc: actualElement.getAttribute(\"src\") || undefined,\n\t\t\t\talt: actualElement.getAttribute(\"alt\") || undefined,\n\t\t\t\thref: element.getAttribute(\"href\") || undefined,\n\t\t\t\ttarget: element.getAttribute(\"target\") || undefined,\n\t\t\t\trel: element.getAttribute(\"rel\") || undefined,\n\t\t\t});\n\t\t}\n\n\t\t// Send back to parent\n\t\twindow.parent.postMessage(\n\t\t\t{\n\t\t\t\ttype: \"FB_ALL_ELEMENTS_STATE\",\n\t\t\t\tdata: elementsState,\n\t\t\t},\n\t\t\t\"*\",\n\t\t);\n\t}\n\n\t/**\n\t * Handle optimistic element updates from parent window\n\t * Uses React Fiber source to find the correct element\n\t */\n\tprivate handleUpdateElement(message: DesignModeMessage) {\n\t\tconst { sourceFile, sourceLine, sourceColumn, updates } = message;\n\n\t\tif (!sourceFile || !sourceLine || !updates) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find element by matching React Fiber source\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\n\t\tfor (const el of allElements) {\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (\n\t\t\t\tsource?.fileName === sourceFile &&\n\t\t\t\tsource?.lineNumber === sourceLine &&\n\t\t\t\tsource?.columnNumber === sourceColumn\n\t\t\t) {\n\t\t\t\tlet element = el as HTMLElement;\n\n\t\t\t\t// Special case: if we're updating image properties (src/alt) but found a container,\n\t\t\t\t// look for an <img> child element\n\t\t\t\tif (\n\t\t\t\t\t(updates.src !== undefined || updates.alt !== undefined) &&\n\t\t\t\t\telement.tagName !== \"IMG\"\n\t\t\t\t) {\n\t\t\t\t\tconst imgChild = element.querySelector(\"img\");\n\t\t\t\t\tif (imgChild) {\n\t\t\t\t\t\telement = imgChild as HTMLElement;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Apply optimistic updates\n\t\t\t\tif (updates.className !== undefined) {\n\t\t\t\t\t// Apply the className - Tailwind v4 Browser CDN will auto-generate CSS\n\t\t\t\t\t// Handle SVGAnimatedString for SVG elements\n\t\t\t\t\tif (typeof element.className === \"string\") {\n\t\t\t\t\t\telement.className = updates.className;\n\t\t\t\t\t} else if (\"baseVal\" in element.className) {\n\t\t\t\t\t\t(element.className as SVGAnimatedString).baseVal =\n\t\t\t\t\t\t\tupdates.className;\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Fallback: use setAttribute for any element type\n\t\t\t\t\t\telement.setAttribute(\"class\", updates.className);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (updates.textContent !== undefined) {\n\t\t\t\t\t// Only update first text node to preserve child elements\n\t\t\t\t\tconst textNode = Array.from(element.childNodes).find(\n\t\t\t\t\t\t(node) => node.nodeType === Node.TEXT_NODE,\n\t\t\t\t\t);\n\t\t\t\t\tif (textNode) {\n\t\t\t\t\t\ttextNode.textContent = updates.textContent;\n\t\t\t\t\t} else {\n\t\t\t\t\t\telement.textContent = updates.textContent;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (updates.src !== undefined && \"src\" in element) {\n\t\t\t\t\t// Use setAttribute to force browser reload, bypassing React's state management\n\t\t\t\t\telement.setAttribute(\"src\", updates.src);\n\t\t\t\t\t// Also update srcset to prevent fallback\n\t\t\t\t\tif (element.hasAttribute(\"srcset\")) {\n\t\t\t\t\t\telement.removeAttribute(\"srcset\");\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (updates.alt !== undefined && \"alt\" in element) {\n\t\t\t\t\t(element as HTMLImageElement).alt = updates.alt;\n\t\t\t\t}\n\n\t\t\t\tif (updates.href !== undefined && \"href\" in element) {\n\t\t\t\t\telement.setAttribute(\"href\", updates.href);\n\t\t\t\t}\n\n\t\t\t\tif (updates.target !== undefined && \"target\" in element) {\n\t\t\t\t\telement.setAttribute(\"target\", updates.target);\n\t\t\t\t}\n\n\t\t\t\tif (updates.rel !== undefined && \"rel\" in element) {\n\t\t\t\t\telement.setAttribute(\"rel\", updates.rel);\n\t\t\t\t}\n\n\t\t\t\t// Update overlays if this is the hovered or selected element\n\t\t\t\tif (element === this.hoveredElement) {\n\t\t\t\t\tthis.updateOverlayPosition(this.hoverOverlay, element);\n\t\t\t\t}\n\t\t\t\tif (element === this.selectedElement) {\n\t\t\t\t\tthis.updateOverlayPosition(this.selectionOverlay, element);\n\t\t\t\t\tthis.updateTagLabel(element);\n\t\t\t\t}\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate handleDeleteElement(message: DesignModeMessage) {\n\t\tconst { sourceFile, sourceLine, sourceColumn } = message;\n\n\t\tif (!sourceFile || !sourceLine || !sourceColumn) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find element by matching React Fiber source\n\t\tconst allElements = document.querySelectorAll(\"*\");\n\n\t\tfor (const el of allElements) {\n\t\t\tconst source = this.getReactFiberSource(el as HTMLElement);\n\t\t\tif (\n\t\t\t\tsource?.fileName === sourceFile &&\n\t\t\t\tsource?.lineNumber === sourceLine &&\n\t\t\t\tsource?.columnNumber === sourceColumn\n\t\t\t) {\n\t\t\t\tconst element = el as HTMLElement;\n\n\t\t\t\t// If this is the selected element, deselect it\n\t\t\t\tif (element === this.selectedElement) {\n\t\t\t\t\tthis.deselectElement();\n\t\t\t\t}\n\n\t\t\t\t// If this is the hovered element, clear hover\n\t\t\t\tif (element === this.hoveredElement) {\n\t\t\t\t\tthis.hoveredElement = null;\n\t\t\t\t\tthis.hoverOverlay.style.display = \"none\";\n\t\t\t\t}\n\n\t\t\t\t// Remove the element from DOM\n\t\t\t\telement.remove();\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Load fonts that are already defined in :root CSS on initial page load\n\t */\n\tprivate loadInitialFonts() {\n\t\ttry {\n\t\t\t// Get computed styles from :root\n\t\t\tconst rootStyles = getComputedStyle(document.documentElement);\n\n\t\t\t// Check for font CSS variables\n\t\t\tconst fontSans = rootStyles.getPropertyValue(\"--font-sans\").trim();\n\t\t\tconst fontSerif = rootStyles.getPropertyValue(\"--font-serif\").trim();\n\t\t\tconst fontMono = rootStyles.getPropertyValue(\"--font-mono\").trim();\n\n\t\t\t// Load each font if it exists\n\t\t\tif (fontSans) loadGoogleFontInIframe(fontSans);\n\t\t\tif (fontSerif) loadGoogleFontInIframe(fontSerif);\n\t\t\tif (fontMono) loadGoogleFontInIframe(fontMono);\n\t\t} catch (error) {\n\t\t\tconsole.error(\"Error loading initial fonts:\", error);\n\t\t}\n\t}\n\n\t/**\n\t * Handle theme update from parent window\n\t * Apply CSS variables using a style tag (NOT inline styles) to maintain proper CSS cascade\n\t * Note: We don't change the dark class - that's controlled by the native theme switcher\n\t */\n\tprivate handleUpdateTheme(theme?: {\n\t\tlightVariables?: Record<string, string>;\n\t\tdarkVariables?: Record<string, string>;\n\t}) {\n\t\tif (!theme) return;\n\n\t\t// Find or create the style element for design mode theme overrides\n\t\tlet styleEl = document.getElementById(\n\t\t\t\"fb-design-mode-theme\",\n\t\t) as HTMLStyleElement;\n\t\tif (!styleEl) {\n\t\t\tstyleEl = document.createElement(\"style\");\n\t\t\tstyleEl.id = \"fb-design-mode-theme\";\n\t\t\tdocument.head.appendChild(styleEl);\n\t\t}\n\n\t\t// Build CSS with both light and dark theme variables\n\t\tlet css = \"\";\n\n\t\t// Light theme variables in :root (includes colors, fonts, radius)\n\t\tif (theme.lightVariables && Object.keys(theme.lightVariables).length > 0) {\n\t\t\tcss += \":root {\\n\";\n\t\t\tfor (const [key, value] of Object.entries(theme.lightVariables)) {\n\t\t\t\tcss += ` ${key}: ${value};\\n`;\n\n\t\t\t\t// Load Google Fonts when font variables are updated\n\t\t\t\tif (\n\t\t\t\t\tkey === \"--font-sans\" ||\n\t\t\t\t\tkey === \"--font-serif\" ||\n\t\t\t\t\tkey === \"--font-mono\"\n\t\t\t\t) {\n\t\t\t\t\t// Extract font name from value like '\"Roboto\", sans-serif'\n\t\t\t\t\tconst match = value.match(/\"([^\"]+)\"/);\n\t\t\t\t\tconst fontName = match?.[1] || value.split(\",\")[0]?.trim() || value;\n\t\t\t\t\tloadGoogleFontInIframe(fontName);\n\t\t\t\t}\n\t\t\t}\n\t\t\tcss += \"}\\n\\n\";\n\t\t}\n\n\t\t// Dark theme variables in .dark (only colors, not fonts/radius)\n\t\tif (theme.darkVariables && Object.keys(theme.darkVariables).length > 0) {\n\t\t\tcss += \".dark {\\n\";\n\t\t\tfor (const [key, value] of Object.entries(theme.darkVariables)) {\n\t\t\t\tcss += ` ${key}: ${value};\\n`;\n\t\t\t}\n\t\t\tcss += \"}\\n\";\n\t\t}\n\n\t\t// Apply the CSS\n\t\tstyleEl.textContent = css;\n\t}\n}\n\n// Initialize when script loads - only in browser environment\n// Tailwind Play CDN handles all CSS generation automatically\nif (typeof window !== \"undefined\" && typeof document !== \"undefined\") {\n\tnew DesignModeOverlay();\n}\n"]}
|
package/dist/overlay.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
var h=new Set;function c(m){let e=m.replace(/['"]/g,"").split(",")[0]?.trim();if(!e||h.has(e)||["Arial","Helvetica","Helvetica Neue","Segoe UI","San Francisco","system-ui","sans-serif","Times New Roman","Georgia","Times","serif","Monaco","Consolas","SF Mono","Menlo","Courier New","Courier","monospace"].some(r=>e.includes(r)))return;let n=`https://fonts.googleapis.com/css2?family=${e.replace(/\s+/g,"+")}:wght@400;500;600&display=swap`;if(document.querySelector(`link[href="${n}"]`)){h.add(e);return}let t=document.createElement("link");t.rel="stylesheet",t.href=n,t.onload=()=>{h.add(e);},t.onerror=()=>{},document.head.appendChild(t);}var u=class{isEnabled=false;selectedElement=null;hoveredElement=null;hoverOverlay;selectionOverlay;selectionTagLabel;childrenOverlays=[];resizeObserver=null;constructor(){this.loadInitialFonts(),this.hoverOverlay=this.createOverlay("2px solid #3b82f6",999991),this.selectionOverlay=this.createOverlay("1px solid #3b82f6",999990),this.selectionTagLabel=this.createTagLabel(),this.listen(),this.setupResizeObserver();}createOverlay(e,s){let n=document.createElement("div");return n.className="fb-design-mode-overlay",Object.assign(n.style,{position:"absolute",border:e,pointerEvents:"none",zIndex:String(s),display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.2)",transition:"all 0.1s ease-out"}),document.body.appendChild(n),n}createChildOverlay(){let e=document.createElement("div");return e.className="fb-design-mode-overlay fb-child-overlay",Object.assign(e.style,{position:"absolute",border:"1px dashed rgba(59, 130, 246, 0.4)",pointerEvents:"none",zIndex:"999989",display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.1)",transition:"all 0.1s ease-out"}),document.body.appendChild(e),e}createTagLabel(){let e=document.createElement("div");return e.className="fb-design-mode-tag",Object.assign(e.style,{position:"absolute",background:"#3b82f6",color:"white",padding:"2px 6px",fontSize:"11px",fontFamily:"monospace",fontWeight:"500",borderRadius:"0 0 4px 0",pointerEvents:"none",zIndex:"999999",display:"none"}),document.body.appendChild(e),e}listen(){window.addEventListener("message",e=>{e.data.type==="ENABLE_DESIGN_MODE"?this.enable():e.data.type==="DISABLE_DESIGN_MODE"?this.disable():e.data.type==="FB_UPDATE_ELEMENT"?this.handleUpdateElement(e.data):e.data.type==="FB_DELETE_ELEMENT"?this.handleDeleteElement(e.data):e.data.type==="FB_GET_ALL_ELEMENTS_STATE"?this.handleGetAllElementsState():e.data.type==="FB_UPDATE_THEME"?this.handleUpdateTheme(e.data.theme):e.data.type==="FB_DESELECT_ELEMENT"?this.deselectElement():e.data.type==="FB_SELECT_ELEMENT"&&this.handleSelectElement(e.data);});}setupResizeObserver(){window.addEventListener("resize",this.updateOverlayPositions),window.addEventListener("scroll",this.updateOverlayPositions,true),this.resizeObserver=new ResizeObserver(()=>{this.updateOverlayPositions();}),this.resizeObserver.observe(document.body);}updateOverlayPositions=()=>{this.selectedElement&&this.selectionOverlay.style.display!=="none"&&(this.updateOverlayPosition(this.selectionOverlay,this.selectedElement),this.updateTagLabel(this.selectedElement)),this.hoveredElement&&this.hoverOverlay.style.display!=="none"&&this.updateOverlayPosition(this.hoverOverlay,this.hoveredElement);for(let e of this.childrenOverlays)if(e.style.display!=="none"&&this.hoveredElement){let s=Array.from(this.hoveredElement.children).filter(t=>this.getReactFiberSource(t)!==null),n=this.childrenOverlays.indexOf(e),i=s[n];i&&this.updateOverlayPosition(e,i);}};enable(){this.isEnabled||(this.isEnabled=true,document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("click",this.handleClick,true),document.addEventListener("mouseleave",this.handleMouseLeave),document.body.style.cursor="crosshair");}disable(){this.isEnabled&&(this.isEnabled=false,document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("click",this.handleClick,true),document.removeEventListener("mouseleave",this.handleMouseLeave),this.hoverOverlay.style.display="none",this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none",this.hideChildrenOverlays(),this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),document.body.style.cursor="",this.selectedElement=null,this.hoveredElement=null);}deselectElement(){this.selectedElement&&(this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=null,this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none");}handleSelectElement(e){if(!e.sourceFile||!e.sourceLine||e.sourceColumn===void 0)return;let s=document.querySelectorAll("*");for(let n of s){if(n.classList?.contains("fb-design-mode-overlay")||n.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(n);if(i&&i.fileName===e.sourceFile&&i.lineNumber===e.sourceLine&&i.columnNumber===e.sourceColumn){let t=n;this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=t,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,t),this.selectionOverlay.style.display="block",this.updateTagLabel(t),this.selectionTagLabel.style.display="block",this.sendElementData(t,i);return}}}getReactFiberSource(e){let s=e,n=0;for(;s&&n<5;){let i=s.getAttribute("data-inspector-relative-path"),t=s.getAttribute("data-inspector-line"),r=s.getAttribute("data-inspector-column");if(i&&t&&r)return {fileName:i,lineNumber:Number.parseInt(t,10),columnNumber:Number.parseInt(r,10)};s=s.parentElement,n++;}return null}isContainer(e){return ["div","section","header","footer","main","aside","nav","article","ul","ol","li"].includes(e.tagName.toLowerCase())}hasDirectTextContent(e){return Array.from(e.childNodes).some(s=>s.nodeType===Node.TEXT_NODE&&s.textContent?.trim())}handleMouseLeave=()=>{this.isEnabled&&(this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays());};handleMouseMove=e=>{if(!this.isEnabled)return;let n=document.elementsFromPoint(e.clientX,e.clientY).filter(t=>{if(t.classList.contains("fb-design-mode-overlay")||t.classList.contains("fb-design-mode-tag"))return false;let r=this.getReactFiberSource(t);return r!==null});if(n.length===0){this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}let i=n[0];if(i){if(i===this.selectedElement){this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}this.hoveredElement&&this.hoveredElement!==i&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=i,this.hoveredElement.setAttribute("data-fb-hovered","true"),this.updateOverlayPosition(this.hoverOverlay,i),this.hoverOverlay.style.display="block",this.isContainer(i)&&!this.hasDirectTextContent(i)?this.showChildrenOverlays(i):this.hideChildrenOverlays();}};showChildrenOverlays(e){let s=Array.from(e.children).filter(n=>this.getReactFiberSource(n)!==null);for(;this.childrenOverlays.length<s.length;)this.childrenOverlays.push(this.createChildOverlay());s.forEach((n,i)=>{let t=this.childrenOverlays[i];t&&(this.updateOverlayPosition(t,n),t.style.display="block");});for(let n=s.length;n<this.childrenOverlays.length;n++){let i=this.childrenOverlays[n];i&&(i.style.display="none");}}hideChildrenOverlays(){for(let e of this.childrenOverlays)e.style.display="none";}currentSelectionIndex=0;lastClickTime=0;lastClickPosition={x:0,y:0};handleClick=e=>{if(!this.isEnabled||(e.preventDefault(),e.stopPropagation(),!this.hoveredElement))return;let s=Date.now(),n=s-this.lastClickTime,i=Math.hypot(e.clientX-this.lastClickPosition.x,e.clientY-this.lastClickPosition.y),r=document.elementsFromPoint(e.clientX,e.clientY).filter(l=>l.classList.contains("fb-design-mode-overlay")||l.classList.contains("fb-design-mode-tag")?false:this.getReactFiberSource(l)!==null);n<1e3&&i<10&&r.length>1?this.currentSelectionIndex=(this.currentSelectionIndex+1)%r.length:this.currentSelectionIndex=0;let o=r[this.currentSelectionIndex];if(!o)return;let a=this.getReactFiberSource(o);a&&(this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=o,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,o),this.selectionOverlay.style.display="block",this.updateTagLabel(o),this.selectionTagLabel.style.display="block",this.sendElementData(o,a),this.lastClickTime=s,this.lastClickPosition={x:e.clientX,y:e.clientY});};updateOverlayPosition(e,s){let n=s.getBoundingClientRect();Object.assign(e.style,{top:`${n.top+window.scrollY}px`,left:`${n.left+window.scrollX}px`,width:`${n.width}px`,height:`${n.height}px`});}updateTagLabel(e){let s=e.getBoundingClientRect(),n=e.tagName.toLowerCase();this.selectionTagLabel.textContent=n,Object.assign(this.selectionTagLabel.style,{top:`${s.top+window.scrollY}px`,left:`${s.left+window.scrollX}px`});}getRelevantStyles(e){let s=window.getComputedStyle(e),n=["display","position","width","height","padding","margin","backgroundColor","color","fontSize","fontFamily"],i={};for(let t of n)i[t]=s.getPropertyValue(t);return i}getDirectTextContent(e){let s=Array.from(e.childNodes).filter(n=>n.nodeType===Node.TEXT_NODE).map(n=>n.textContent?.trim()).filter(Boolean);return s.length>0?s.join(" "):null}sendElementData(e,s){let n=this.getDirectTextContent(e),i=document.documentElement.classList.contains("dark"),t={type:"FB_ELEMENT_SELECTED",data:{sourceFile:s.fileName,sourceLine:s.lineNumber,sourceColumn:s.columnNumber,tagName:e.tagName,className:e.className,textContent:n,src:e.getAttribute("src")||void 0,alt:e.getAttribute("alt")||void 0,href:e.getAttribute("href")||void 0,target:e.getAttribute("target")||void 0,rel:e.getAttribute("rel")||void 0,computedStyles:this.getRelevantStyles(e),isDarkMode:i}};window.parent.postMessage(t,"*");}handleGetAllElementsState(){let e=document.querySelectorAll("*"),s=[];for(let n of e){if(n.classList?.contains("fb-design-mode-overlay")||n.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(n);if(!i)continue;let t=n,r=t;if(t.tagName!=="IMG"){let l=t.querySelector("img");l&&(r=l);}let o=this.getDirectTextContent(t),a="";t.className&&(typeof t.className=="string"?a=t.className:"baseVal"in t.className&&(a=t.className.baseVal)),s.push({sourceFile:i.fileName,sourceLine:i.lineNumber,sourceColumn:i.columnNumber,className:a,textContent:o,src:r.getAttribute("src")||void 0,alt:r.getAttribute("alt")||void 0,href:t.getAttribute("href")||void 0,target:t.getAttribute("target")||void 0,rel:t.getAttribute("rel")||void 0});}window.parent.postMessage({type:"FB_ALL_ELEMENTS_STATE",data:s},"*");}handleUpdateElement(e){let{sourceFile:s,sourceLine:n,sourceColumn:i,updates:t}=e;if(!s||!n||!t)return;let r=document.querySelectorAll("*");for(let o of r){let a=this.getReactFiberSource(o);if(a?.fileName===s&&a?.lineNumber===n&&a?.columnNumber===i){let l=o;if((t.src!==void 0||t.alt!==void 0)&&l.tagName!=="IMG"){let d=l.querySelector("img");d&&(l=d);}if(t.className!==void 0&&(l.className=t.className),t.textContent!==void 0){let d=Array.from(l.childNodes).find(f=>f.nodeType===Node.TEXT_NODE);d?d.textContent=t.textContent:l.textContent=t.textContent;}t.src!==void 0&&"src"in l&&(l.setAttribute("src",t.src),l.hasAttribute("srcset")&&l.removeAttribute("srcset")),t.alt!==void 0&&"alt"in l&&(l.alt=t.alt),t.href!==void 0&&"href"in l&&l.setAttribute("href",t.href),t.target!==void 0&&"target"in l&&l.setAttribute("target",t.target),t.rel!==void 0&&"rel"in l&&l.setAttribute("rel",t.rel),l===this.hoveredElement&&this.updateOverlayPosition(this.hoverOverlay,l),l===this.selectedElement&&(this.updateOverlayPosition(this.selectionOverlay,l),this.updateTagLabel(l));return}}}handleDeleteElement(e){let{sourceFile:s,sourceLine:n,sourceColumn:i}=e;if(!s||!n||!i)return;let t=document.querySelectorAll("*");for(let r of t){let o=this.getReactFiberSource(r);if(o?.fileName===s&&o?.lineNumber===n&&o?.columnNumber===i){let a=r;a===this.selectedElement&&this.deselectElement(),a===this.hoveredElement&&(this.hoveredElement=null,this.hoverOverlay.style.display="none"),a.remove();return}}}loadInitialFonts(){try{let e=getComputedStyle(document.documentElement),s=e.getPropertyValue("--font-sans").trim(),n=e.getPropertyValue("--font-serif").trim(),i=e.getPropertyValue("--font-mono").trim();s&&c(s),n&&c(n),i&&c(i);}catch(e){console.error("Error loading initial fonts:",e);}}handleUpdateTheme(e){if(!e)return;let s=document.getElementById("fb-design-mode-theme");s||(s=document.createElement("style"),s.id="fb-design-mode-theme",document.head.appendChild(s));let n="";if(e.lightVariables&&Object.keys(e.lightVariables).length>0){n+=`:root {
|
|
2
|
-
`;for(let[i,t]of Object.entries(e.lightVariables))if(
|
|
3
|
-
`,i==="--font-sans"||i==="--font-serif"||i==="--font-mono"){let
|
|
1
|
+
var h=new Set;function d(m){let e=m.replace(/['"]/g,"").split(",")[0]?.trim();if(!e||h.has(e)||["Arial","Helvetica","Helvetica Neue","Segoe UI","San Francisco","system-ui","sans-serif","Times New Roman","Georgia","Times","serif","Monaco","Consolas","SF Mono","Menlo","Courier New","Courier","monospace"].some(r=>e.includes(r)))return;let s=`https://fonts.googleapis.com/css2?family=${e.replace(/\s+/g,"+")}:wght@400;500;600&display=swap`;if(document.querySelector(`link[href="${s}"]`)){h.add(e);return}let t=document.createElement("link");t.rel="stylesheet",t.href=s,t.onload=()=>{h.add(e);},t.onerror=()=>{},document.head.appendChild(t);}var u=class{isEnabled=false;selectedElement=null;hoveredElement=null;hoverOverlay;selectionOverlay;selectionTagLabel;childrenOverlays=[];resizeObserver=null;constructor(){this.loadInitialFonts(),this.hoverOverlay=this.createOverlay("2px solid #3b82f6",999991),this.selectionOverlay=this.createOverlay("1px solid #3b82f6",999990),this.selectionTagLabel=this.createTagLabel(),this.listen(),this.setupResizeObserver();}createOverlay(e,n){let s=document.createElement("div");return s.className="fb-design-mode-overlay",Object.assign(s.style,{position:"absolute",border:e,pointerEvents:"none",zIndex:String(n),display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.2)",transition:"all 0.1s ease-out"}),document.body.appendChild(s),s}createChildOverlay(){let e=document.createElement("div");return e.className="fb-design-mode-overlay fb-child-overlay",Object.assign(e.style,{position:"absolute",border:"1px dashed rgba(59, 130, 246, 0.4)",pointerEvents:"none",zIndex:"999989",display:"none",boxShadow:"0 0 0 1px rgba(59, 130, 246, 0.1)",transition:"all 0.1s ease-out"}),document.body.appendChild(e),e}createTagLabel(){let e=document.createElement("div");return e.className="fb-design-mode-tag",Object.assign(e.style,{position:"absolute",background:"#3b82f6",color:"white",padding:"2px 6px",fontSize:"11px",fontFamily:"monospace",fontWeight:"500",borderRadius:"0 0 4px 0",pointerEvents:"none",zIndex:"999999",display:"none"}),document.body.appendChild(e),e}listen(){window.addEventListener("message",e=>{e.data.type==="ENABLE_DESIGN_MODE"?this.enable():e.data.type==="DISABLE_DESIGN_MODE"?this.disable():e.data.type==="FB_UPDATE_ELEMENT"?this.handleUpdateElement(e.data):e.data.type==="FB_DELETE_ELEMENT"?this.handleDeleteElement(e.data):e.data.type==="FB_GET_ALL_ELEMENTS_STATE"?this.handleGetAllElementsState():e.data.type==="FB_UPDATE_THEME"?this.handleUpdateTheme(e.data.theme):e.data.type==="FB_DESELECT_ELEMENT"?this.deselectElement():e.data.type==="FB_SELECT_ELEMENT"&&this.handleSelectElement(e.data);});}setupResizeObserver(){window.addEventListener("resize",this.updateOverlayPositions),window.addEventListener("scroll",this.updateOverlayPositions,true),this.resizeObserver=new ResizeObserver(()=>{this.updateOverlayPositions();}),this.resizeObserver.observe(document.body);}updateOverlayPositions=()=>{this.selectedElement&&this.selectionOverlay.style.display!=="none"&&(this.updateOverlayPosition(this.selectionOverlay,this.selectedElement),this.updateTagLabel(this.selectedElement)),this.hoveredElement&&this.hoverOverlay.style.display!=="none"&&this.updateOverlayPosition(this.hoverOverlay,this.hoveredElement);for(let e of this.childrenOverlays)if(e.style.display!=="none"&&this.hoveredElement){let n=Array.from(this.hoveredElement.children).filter(t=>this.getReactFiberSource(t)!==null),s=this.childrenOverlays.indexOf(e),i=n[s];i&&this.updateOverlayPosition(e,i);}};enable(){this.isEnabled||(this.isEnabled=true,document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("click",this.handleClick,true),document.addEventListener("mouseleave",this.handleMouseLeave),document.body.style.cursor="crosshair");}disable(){this.isEnabled&&(this.isEnabled=false,document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("click",this.handleClick,true),document.removeEventListener("mouseleave",this.handleMouseLeave),this.hoverOverlay.style.display="none",this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none",this.hideChildrenOverlays(),this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),document.body.style.cursor="",this.selectedElement=null,this.hoveredElement=null);}deselectElement(){this.selectedElement&&(this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=null,this.selectionOverlay.style.display="none",this.selectionTagLabel.style.display="none");}handleSelectElement(e){if(!e.sourceFile||!e.sourceLine||e.sourceColumn===void 0)return;let n=document.querySelectorAll("*");for(let s of n){if(s.classList?.contains("fb-design-mode-overlay")||s.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(s);if(i&&i.fileName===e.sourceFile&&i.lineNumber===e.sourceLine&&i.columnNumber===e.sourceColumn){let t=s;this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=t,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,t),this.selectionOverlay.style.display="block",this.updateTagLabel(t),this.selectionTagLabel.style.display="block",this.sendElementData(t,i);return}}}getReactFiberSource(e){let n=e,s=0;for(;n&&s<5;){let i=n.getAttribute("data-inspector-relative-path"),t=n.getAttribute("data-inspector-line"),r=n.getAttribute("data-inspector-column");if(i&&t&&r)return {fileName:i,lineNumber:Number.parseInt(t,10),columnNumber:Number.parseInt(r,10)};n=n.parentElement,s++;}return null}isContainer(e){return ["div","section","header","footer","main","aside","nav","article","ul","ol","li"].includes(e.tagName.toLowerCase())}hasDirectTextContent(e){return Array.from(e.childNodes).some(n=>n.nodeType===Node.TEXT_NODE&&n.textContent?.trim())}handleMouseLeave=()=>{this.isEnabled&&(this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays());};handleMouseMove=e=>{if(!this.isEnabled)return;let s=document.elementsFromPoint(e.clientX,e.clientY).filter(t=>{if(t.classList.contains("fb-design-mode-overlay")||t.classList.contains("fb-design-mode-tag"))return false;let r=this.getReactFiberSource(t);return r!==null});if(s.length===0){this.hoveredElement&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=null,this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}let i=s[0];if(i){if(i===this.selectedElement){this.hoverOverlay.style.display="none",this.hideChildrenOverlays();return}this.hoveredElement&&this.hoveredElement!==i&&this.hoveredElement.removeAttribute("data-fb-hovered"),this.hoveredElement=i,this.hoveredElement.setAttribute("data-fb-hovered","true"),this.updateOverlayPosition(this.hoverOverlay,i),this.hoverOverlay.style.display="block",this.isContainer(i)&&!this.hasDirectTextContent(i)?this.showChildrenOverlays(i):this.hideChildrenOverlays();}};showChildrenOverlays(e){let n=Array.from(e.children).filter(s=>this.getReactFiberSource(s)!==null);for(;this.childrenOverlays.length<n.length;)this.childrenOverlays.push(this.createChildOverlay());n.forEach((s,i)=>{let t=this.childrenOverlays[i];t&&(this.updateOverlayPosition(t,s),t.style.display="block");});for(let s=n.length;s<this.childrenOverlays.length;s++){let i=this.childrenOverlays[s];i&&(i.style.display="none");}}hideChildrenOverlays(){for(let e of this.childrenOverlays)e.style.display="none";}currentSelectionIndex=0;lastClickTime=0;lastClickPosition={x:0,y:0};handleClick=e=>{if(!this.isEnabled||(e.preventDefault(),e.stopPropagation(),!this.hoveredElement))return;let n=Date.now(),s=n-this.lastClickTime,i=Math.hypot(e.clientX-this.lastClickPosition.x,e.clientY-this.lastClickPosition.y),r=document.elementsFromPoint(e.clientX,e.clientY).filter(l=>l.classList.contains("fb-design-mode-overlay")||l.classList.contains("fb-design-mode-tag")?false:this.getReactFiberSource(l)!==null);s<1e3&&i<10&&r.length>1?this.currentSelectionIndex=(this.currentSelectionIndex+1)%r.length:this.currentSelectionIndex=0;let a=r[this.currentSelectionIndex];if(!a)return;let o=this.getReactFiberSource(a);o&&(this.selectedElement&&this.selectedElement.removeAttribute("data-fb-selected"),this.selectedElement=a,this.selectedElement.setAttribute("data-fb-selected","true"),this.updateOverlayPosition(this.selectionOverlay,a),this.selectionOverlay.style.display="block",this.updateTagLabel(a),this.selectionTagLabel.style.display="block",this.sendElementData(a,o),this.lastClickTime=n,this.lastClickPosition={x:e.clientX,y:e.clientY});};updateOverlayPosition(e,n){let s=n.getBoundingClientRect();Object.assign(e.style,{top:`${s.top+window.scrollY}px`,left:`${s.left+window.scrollX}px`,width:`${s.width}px`,height:`${s.height}px`});}updateTagLabel(e){let n=e.getBoundingClientRect(),s=e.tagName.toLowerCase();this.selectionTagLabel.textContent=s,Object.assign(this.selectionTagLabel.style,{top:`${n.top+window.scrollY}px`,left:`${n.left+window.scrollX}px`});}getRelevantStyles(e){let n=window.getComputedStyle(e),s=["display","position","width","height","padding","margin","backgroundColor","color","fontSize","fontFamily"],i={};for(let t of s)i[t]=n.getPropertyValue(t);return i}getDirectTextContent(e){let n=Array.from(e.childNodes).filter(s=>s.nodeType===Node.TEXT_NODE).map(s=>s.textContent?.trim()).filter(Boolean);return n.length>0?n.join(" "):null}sendElementData(e,n){let s=this.getDirectTextContent(e),i=document.documentElement.classList.contains("dark"),t="";e.className&&(typeof e.className=="string"?t=e.className:"baseVal"in e.className&&(t=e.className.baseVal));let r={type:"FB_ELEMENT_SELECTED",data:{sourceFile:n.fileName,sourceLine:n.lineNumber,sourceColumn:n.columnNumber,tagName:e.tagName,className:t,textContent:s,src:e.getAttribute("src")||void 0,alt:e.getAttribute("alt")||void 0,href:e.getAttribute("href")||void 0,target:e.getAttribute("target")||void 0,rel:e.getAttribute("rel")||void 0,computedStyles:this.getRelevantStyles(e),isDarkMode:i}};window.parent.postMessage(r,"*");}handleGetAllElementsState(){let e=document.querySelectorAll("*"),n=[];for(let s of e){if(s.classList?.contains("fb-design-mode-overlay")||s.classList?.contains("fb-design-mode-tag"))continue;let i=this.getReactFiberSource(s);if(!i)continue;let t=s,r=t;if(t.tagName!=="IMG"){let l=t.querySelector("img");l&&(r=l);}let a=this.getDirectTextContent(t),o="";t.className&&(typeof t.className=="string"?o=t.className:"baseVal"in t.className&&(o=t.className.baseVal)),n.push({sourceFile:i.fileName,sourceLine:i.lineNumber,sourceColumn:i.columnNumber,className:o,textContent:a,src:r.getAttribute("src")||void 0,alt:r.getAttribute("alt")||void 0,href:t.getAttribute("href")||void 0,target:t.getAttribute("target")||void 0,rel:t.getAttribute("rel")||void 0});}window.parent.postMessage({type:"FB_ALL_ELEMENTS_STATE",data:n},"*");}handleUpdateElement(e){let{sourceFile:n,sourceLine:s,sourceColumn:i,updates:t}=e;if(!n||!s||!t)return;let r=document.querySelectorAll("*");for(let a of r){let o=this.getReactFiberSource(a);if(o?.fileName===n&&o?.lineNumber===s&&o?.columnNumber===i){let l=a;if((t.src!==void 0||t.alt!==void 0)&&l.tagName!=="IMG"){let c=l.querySelector("img");c&&(l=c);}if(t.className!==void 0&&(typeof l.className=="string"?l.className=t.className:"baseVal"in l.className?l.className.baseVal=t.className:l.setAttribute("class",t.className)),t.textContent!==void 0){let c=Array.from(l.childNodes).find(f=>f.nodeType===Node.TEXT_NODE);c?c.textContent=t.textContent:l.textContent=t.textContent;}t.src!==void 0&&"src"in l&&(l.setAttribute("src",t.src),l.hasAttribute("srcset")&&l.removeAttribute("srcset")),t.alt!==void 0&&"alt"in l&&(l.alt=t.alt),t.href!==void 0&&"href"in l&&l.setAttribute("href",t.href),t.target!==void 0&&"target"in l&&l.setAttribute("target",t.target),t.rel!==void 0&&"rel"in l&&l.setAttribute("rel",t.rel),l===this.hoveredElement&&this.updateOverlayPosition(this.hoverOverlay,l),l===this.selectedElement&&(this.updateOverlayPosition(this.selectionOverlay,l),this.updateTagLabel(l));return}}}handleDeleteElement(e){let{sourceFile:n,sourceLine:s,sourceColumn:i}=e;if(!n||!s||!i)return;let t=document.querySelectorAll("*");for(let r of t){let a=this.getReactFiberSource(r);if(a?.fileName===n&&a?.lineNumber===s&&a?.columnNumber===i){let o=r;o===this.selectedElement&&this.deselectElement(),o===this.hoveredElement&&(this.hoveredElement=null,this.hoverOverlay.style.display="none"),o.remove();return}}}loadInitialFonts(){try{let e=getComputedStyle(document.documentElement),n=e.getPropertyValue("--font-sans").trim(),s=e.getPropertyValue("--font-serif").trim(),i=e.getPropertyValue("--font-mono").trim();n&&d(n),s&&d(s),i&&d(i);}catch(e){console.error("Error loading initial fonts:",e);}}handleUpdateTheme(e){if(!e)return;let n=document.getElementById("fb-design-mode-theme");n||(n=document.createElement("style"),n.id="fb-design-mode-theme",document.head.appendChild(n));let s="";if(e.lightVariables&&Object.keys(e.lightVariables).length>0){s+=`:root {
|
|
2
|
+
`;for(let[i,t]of Object.entries(e.lightVariables))if(s+=` ${i}: ${t};
|
|
3
|
+
`,i==="--font-sans"||i==="--font-serif"||i==="--font-mono"){let a=t.match(/"([^"]+)"/)?.[1]||t.split(",")[0]?.trim()||t;d(a);}s+=`}
|
|
4
4
|
|
|
5
|
-
`;}if(e.darkVariables&&Object.keys(e.darkVariables).length>0){
|
|
6
|
-
`;for(let[i,t]of Object.entries(e.darkVariables))
|
|
7
|
-
`;
|
|
8
|
-
`;}
|
|
5
|
+
`;}if(e.darkVariables&&Object.keys(e.darkVariables).length>0){s+=`.dark {
|
|
6
|
+
`;for(let[i,t]of Object.entries(e.darkVariables))s+=` ${i}: ${t};
|
|
7
|
+
`;s+=`}
|
|
8
|
+
`;}n.textContent=s;}};typeof window<"u"&&typeof document<"u"&&new u;//# sourceMappingURL=overlay.mjs.map
|
|
9
9
|
//# sourceMappingURL=overlay.mjs.map
|