@promakeai/inspector 1.4.2 → 1.4.3
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/dist/App.d.ts.map +1 -1
- package/dist/inspector.cdn.js +1 -1
- package/dist/inspector.js +11 -4
- package/package.json +2 -3
package/dist/App.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAAA;;GAEG;
|
|
1
|
+
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAgTH,wBAAgB,GAAG,4CA24BlB"}
|
package/dist/inspector.cdn.js
CHANGED
|
@@ -38,7 +38,7 @@ Error generating stack: `+i.message+`
|
|
|
38
38
|
0% { opacity: 0; transform: scale(0.98); }
|
|
39
39
|
100% { opacity: 0.85; transform: scale(1); }
|
|
40
40
|
}
|
|
41
|
-
`,document.head.appendChild(a)}}const fu={version:"1.4.2"},Dn="data-dev-id",Mi=o=>o.replace(/\\/g,"/"),al=o=>{const s=typeof o=="string"?o:o.id,a=s.replace(/\//g,"\\"),u=CSS.escape(a);let c=document.querySelector(`[${Dn}="${u}"]`)||document.querySelector(`[${Dn}="${CSS.escape(s)}"]`)||document.querySelector(`[${Dn}="${CSS.escape(Mi(s))}"]`);if(!c){const p=document.querySelectorAll(`[${Dn}]`);for(const x of p){const v=x.getAttribute(Dn);if(v&&v.includes(s)){c=x;break}}}return!c&&typeof o=="object"&&o.selector&&(c=document.querySelector(o.selector)),c};function pu(o){if(o.id)return"#"+o.id;let s=o.tagName.toLowerCase();if(o.className&&typeof o.className=="string"){const a=o.className.trim().split(/\s+/).filter(u=>u);a.length>0&&(s+="."+a.join("."))}return s}function gu(o){const s=o.hasAttribute(Dn)?o:o.closest(`[${Dn}]`),a=s?.getAttribute(Dn),u=s?.getAttribute("data-dev-name"),c=s?.getAttribute("data-dev-path"),p=s?.getAttribute("data-dev-component"),x=c?Mi(c):void 0,v=a?Mi(a):void 0,h=a?.split(":"),C=h?.[1]?parseInt(h[1],10):0,E=h?.[2]?parseInt(h[2],10):0;return{id:v,name:u||void 0,path:x||void 0,fileName:x||"production build",lineNumber:C,columnNumber:E,component:p||u||"Unknown"}}function hu(o){return{id:gu(o)?.id||"",tagName:o.tagName,className:o.className,selector:pu(o)}}function Tp(o){const s=[];let a=o.parentElement,u=0;for(;a&&u<3;)a.closest("[data-inspector-ignore]")||(s.push(hu(a)),u++),a=a.parentElement;return s}function jp(o){const s=[],a=Array.from(o.children);for(let u=0;u<Math.min(3,a.length);u++)s.push(hu(a[u]));return s}function Di(o,s){const a=[];let u=document.elementFromPoint(o,s);if(!u||u.closest("[data-inspector-ignore]"))return a;if(u instanceof SVGElement){let x=u.parentElement;for(;x&&x instanceof SVGElement;)x=x.parentElement;if(x)u=x;else return a}a.push(u);const c=10,p=(x,v)=>{if(v>2||a.length>=c)return;const h=Array.from(x.children),C=[];for(const A of h){if(!(A instanceof HTMLElement)||A.closest("[data-inspector-ignore]"))continue;const G=A.getBoundingClientRect(),R=A.hasAttribute("data-dev-id"),M=G.width>0&&G.height>0,T=A.children.length>0,j=A.textContent&&A.textContent.trim().length>0,I=["BUTTON","A","INPUT","IMG","VIDEO","SELECT","TEXTAREA"].includes(A.tagName);(R||M&&(T||j||I))&&C.push(A)}const E=C.filter(A=>A.hasAttribute("data-dev-id")),L=C.filter(A=>!A.hasAttribute("data-dev-id")),N=[...E,...L];for(const A of N){if(a.length>=c)return;a.push(A),p(A,v+1)}};return p(u,1),a}function uo(o){const s=o.textContent&&o.children.length===0,a=o.tagName==="IMG",u=gu(o);return{id:u?.id||"",tagName:o.tagName,className:o.className,component:u,position:{top:o.getBoundingClientRect().top,left:o.getBoundingClientRect().left,width:o.getBoundingClientRect().width,height:o.getBoundingClientRect().height},isTextNode:!!s,textContent:s?o.textContent?.trim():"",isImageNode:a,imageUrl:a?o.src:"",selector:pu(o),currentRoute:window.location.pathname,parents:Tp(o),children:jp(o)}}function ul(o){if(o===document.body||o===document.documentElement)return!1;const s=o.getBoundingClientRect(),a=window.innerWidth*window.innerHeight;return!(s.width*s.height/a>1)}function Ip(){const{setTheme:o,setLabels:s,labels:a,discardAllChanges:u,setImageValidation:c}=He(),[p,x]=m.useState(!1),v=m.useRef(null);m.useEffect(()=>{v.current=new Np},[]);const[h,C]=m.useState(!1),[E,L]=m.useState(null),[N,A]=m.useState(null),[G,R]=m.useState(null),[M,T]=m.useState(null),[j,I]=m.useState(!1),[Y,J]=m.useState(!1),[Q,ce]=m.useState(!1),[be,q]=m.useState(null),[U,oe]=m.useState(!1),[je,he]=m.useState(!1),[Oe,Ue]=m.useState(!0),[we,X]=m.useState(!1),[B,Z]=m.useState(!0),[W,S]=m.useState([]),[z,ae]=m.useState(!1),[de,ve]=m.useState(!1),[_e,Pe]=m.useState(!0),[Ie,Me]=m.useState(!0),{sendToParent:Ne,listenToParent:mn}=Ba(),jr=m.useCallback((D,me)=>{const pe=uo(me),Ce=Di(D.clientX,D.clientY);p||(x(!0),Ne("INSPECTOR_STARTED",{triggeredBy:"contextmenu"})),S(Ce),A(me),R(pe),oe(!0),he(!0),C(!0),document.body.style.overflow="hidden",Ne("INSPECTOR_ELEMENT_SELECTED",pe)},[Ne,p]),{setShouldInspectOnRightClick:vn}=Qd({onElementSelect:jr,isElementSafeToSelect:ul}),yn=m.useRef(null),qt=m.useRef(null);m.useEffect(()=>{if(be!==null){ce(be);return}if(!N){ce(!1);return}if(N.tagName==="IMG"){ce(!1);return}const me=Za(N);ce(me.length>0)},[N,be]);const nn=m.useMemo(()=>{const D=[];return j&&D.push("text"),Y&&D.push("image"),Q&&D.push("images"),U&&D.push("style"),Oe&&W.length>1&&D.push("subElements"),D},[j,Y,Q,U,Oe,W.length]);m.useEffect(()=>{Q&&T("images")},[Q]),m.useEffect(()=>{nn.length>0?(!M||!nn.includes(M))&&T(nn[0]):T(null)},[nn,M]),m.useEffect(()=>(yn.current=new Kd(D=>{Ne("INSPECTOR_ERROR",D)}),yn.current.start(),qt.current=new Yd(D=>{Ne("URL_CHANGED",D)}),qt.current.start(),()=>{yn.current?.stop()}),[Ne]),m.useEffect(()=>()=>{Ne("INSPECTOR_UNMOUNTED",{})},[Ne]),m.useEffect(()=>{Ne("INSPECTOR_INITIALIZED",{version:fu.version})},[Ne]),m.useEffect(()=>mn(D=>{switch(D.type){case"TOGGLE_INSPECTOR":D.active?x(!0):xn(),D.labels&&s(D.labels),D.theme&&o(D.theme);break;case"SHOW_CONTENT_INPUT":I(D.show);break;case"SHOW_IMAGE_INPUT":J(D.show);break;case"SHOW_STYLE_EDITOR":oe(D.show);break;case"SET_BADGE_VISIBLE":X(D.visible),D.badgeText&&s({badgeText:D.badgeText});break;case"HIGHLIGHT_ELEMENT":rn(D.identifier,D.options);break;case"GET_ELEMENT_BY_ID":wn(D.inspectorId);break;case"SET_SHOW_CHILD_BORDERS":Z(D.show);break;case"SHOW_ACTIONS_TAB":he(D.show);break;case"SHOW_SUB_ELEMENTS":Ue(D.show);break;case"FORCE_CLOSE_INSPECTOR":xn();break;case"SET_ACTIVE_TAB":T(D.tab);break;case"SET_LOADING":ae(D.loading);break;case"SET_INSPECT_ON_RIGHT_CLICK":vn(D.enabled);break;case"SET_ALLOW_EDIT_FOR_MULTIPLE_INSTANCES":ve(D.enabled);break;case"SET_IS_DRAGGABLE":Pe(D.enabled);break;case"SET_IS_RESIZABLE":Me(D.enabled);break;case"SET_IMAGE_VALIDATION":c({maxImageSize:D.maxImageSize,allowedImageTypes:D.allowedImageTypes});break;case"SHOW_IMAGES_TAB":q(D.show);break}}),[mn,vn,c]),m.useEffect(()=>{if(!p||h)return;const D=me=>{const pe=me.target;if(pe.closest("[data-inspector-ignore]")){L(null);return}L(pe)};return document.addEventListener("mousemove",D,!0),()=>document.removeEventListener("mousemove",D,!0)},[p,h]),m.useEffect(()=>{if(!p)return;const D=me=>{let pe=me.target;if(pe.closest&&pe.closest("[data-inspector-ignore]"))return;if(pe instanceof SVGElement){let ge=pe.parentElement;for(;ge&&ge instanceof SVGElement;)ge=ge.parentElement;if(ge)pe=ge;else return}if(h){if(window.__controlBoxDragging){me.preventDefault(),me.stopPropagation();return}if(N&&(pe===N||N.contains(pe))){N.isContentEditable&&N.focus();return}me.preventDefault(),me.stopPropagation(),Gt();return}if(me.preventDefault(),me.stopPropagation(),!ul(pe))return;const Ce=uo(pe),tt=Di(me.clientX,me.clientY);S(tt),A(pe),R(Ce),oe(!0),he(!0),An(),Ne("INSPECTOR_ELEMENT_SELECTED",Ce)};return document.addEventListener("click",D,!0),()=>document.removeEventListener("click",D,!0)},[p,h,N,Ne]),m.useEffect(()=>{p&&!h?document.body.style.cursor="crosshair":document.body.style.cursor=""},[p,h]);function An(){C(!0),document.body.style.overflow="hidden"}async function Gt(){C(!1),A(null),R(null),T(null),S([]),I(!1),J(!1),oe(!1),he(!1),document.body.style.overflow="",window.__styleEditorHasChanges=!1,window.__styleEditorSave=null}function xn(){u(),x(!1),C(!1),A(null),R(null),L(null),T(null),S([]),I(!1),J(!1),oe(!1),he(!1),document.body.style.overflow="",document.body.style.cursor="",window.__styleEditorHasChanges=!1,window.__styleEditorSave=null,Ne("INSPECTOR_CLOSED",{})}function Cn(D){if(!ul(D))return;const me=uo(D);A(D),R(me),oe(!0),he(!0);const pe=D.getBoundingClientRect();pe.top>=0&&pe.bottom<=window.innerHeight||D.scrollIntoView({behavior:"smooth",block:"center"}),Ne("INSPECTOR_ELEMENT_SELECTED",me)}function dt(D){Gt(),requestAnimationFrame(()=>{if(!ul(D))return;const me=uo(D),pe=D.getBoundingClientRect(),Ce=pe.left+pe.width/2,tt=pe.top+pe.height/2,ge=Di(Ce,tt);S(ge),A(D),R(me),oe(!0),he(!0),An(),pe.top>=0&&pe.bottom<=window.innerHeight||D.scrollIntoView({behavior:"smooth",block:"center"}),Ne("INSPECTOR_ELEMENT_SELECTED",me)})}function rn(D,me){const pe=typeof D=="object"?D.targetRoute:me?.targetRoute;if(pe&&pe!==window.location.pathname){window.history.pushState({},"",pe),window.dispatchEvent(new PopStateEvent("popstate")),setTimeout(()=>{rn(D,me)},300);return}let Ce=null;if(typeof D=="object"&&D!==null){if(D.id&&(Ce=al(D.id)),(!Ce||Ce.getBoundingClientRect().width===0)&&D.selector){const ge=document.querySelectorAll(D.selector);if(ge.length===1)Ce=ge[0];else if(ge.length>1){for(const Te of ge){const fe=Te.getBoundingClientRect();if(!(fe.width===0||fe.height===0)){if(D.textContent&&Te.textContent?.trim()===D.textContent.trim()){Ce=Te;break}if(D.position&&Math.abs(fe.top-D.position.top)<5&&Math.abs(fe.left-D.position.left)<5){Ce=Te;break}}}if(!Ce)for(const Te of ge){const fe=Te.getBoundingClientRect();if(fe.width>0&&fe.height>0){Ce=Te;break}}}if(!Ce&&D.className){const Te=D.className.split(" ").filter(Boolean);if(Te.length>0){const fe=document.getElementsByClassName(Te[0]);for(let At=0;At<fe.length;At++){const Hn=fe[At].getBoundingClientRect();if(Hn.width>0&&Hn.height>0){Ce=fe[At];break}}}}}}else if(typeof D=="string"){if(Ce=al(D),!Ce)try{Ce=document.querySelector(D)}catch{}if(!Ce&&D.includes(".")){const ge=D.split(".").filter(Boolean).join(" "),Te=document.getElementsByClassName(ge);Te.length>0&&(Ce=Te[0])}}if(!Ce)return;const tt=Ce.getBoundingClientRect();if((tt.width===0||tt.height===0)&&typeof D=="object"&&D.parents)for(const ge of D.parents){let Te=null;if(ge.id&&(Te=al(ge.id)),!Te&&ge.selector&&(Te=document.querySelector(ge.selector)),Te){const fe=Te.getBoundingClientRect();if(fe.width>0&&fe.height>0){Ce=Te;break}}}v.current&&Ce instanceof HTMLElement&&(v.current?.highlight(Ce,{color:me?.color||"#4417db",duration:me?.duration||2e3}),me?.scrollIntoView!==!1&&Ce.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}))}function wn(D){const me=al(D);if(me&&me instanceof HTMLElement){const pe=uo(me);Ne("ELEMENT_INFO_RESPONSE",pe)}else Ne("ELEMENT_INFO_RESPONSE",{error:"Element not found",inspectorId:D})}return m.useEffect(()=>{if(h){let D=!1;const me=()=>{D=!0},pe=()=>{D=!1},Ce=document.getElementById("inspector-canvas-root");Ce&&(Ce.addEventListener("pointerdown",me),Ce.addEventListener("pointerup",pe),document.addEventListener("pointerup",pe));const tt=fe=>{if(fe.target.closest("#inspector-canvas-root")){fe.stopPropagation();return}fe.preventDefault(),fe.stopPropagation()},ge=fe=>{fe.target.closest("#inspector-canvas-root")||D||fe.type==="mouseleave"||fe.type==="mouseout"||(fe.preventDefault(),fe.stopPropagation())};document.addEventListener("wheel",tt,{passive:!1,capture:!0}),document.addEventListener("touchmove",tt,{passive:!1,capture:!0}),document.addEventListener("pointerdown",ge,{capture:!0}),document.addEventListener("pointerup",ge,{capture:!0}),document.addEventListener("pointermove",ge,{capture:!0}),document.addEventListener("mousedown",ge,{capture:!0}),document.addEventListener("mouseup",ge,{capture:!0}),document.addEventListener("mousemove",ge,{capture:!0}),document.addEventListener("click",ge,{capture:!0});const Te=fe=>{if(fe.key==="Escape"&&fe.ctrlKey&&fe.shiftKey){xn();return}if(fe.key==="Escape"){Gt();return}fe.target.closest("#inspector-canvas-root")||(fe.preventDefault(),fe.stopPropagation())};return document.addEventListener("keydown",Te,{capture:!0}),document.addEventListener("keyup",Te,{capture:!0}),()=>{const fe=document.getElementById("inspector-canvas-root");fe&&(fe.removeEventListener("pointerdown",me),fe.removeEventListener("pointerup",pe)),document.removeEventListener("pointerup",pe),document.removeEventListener("wheel",tt,{capture:!0}),document.removeEventListener("touchmove",tt,{capture:!0}),document.removeEventListener("pointerdown",ge,{capture:!0}),document.removeEventListener("pointerup",ge,{capture:!0}),document.removeEventListener("pointermove",ge,{capture:!0}),document.removeEventListener("mousedown",ge,{capture:!0}),document.removeEventListener("mouseup",ge,{capture:!0}),document.removeEventListener("mousemove",ge,{capture:!0}),document.removeEventListener("click",ge,{capture:!0}),document.removeEventListener("keydown",Te,{capture:!0}),document.removeEventListener("keyup",Te,{capture:!0})}}},[h]),f.jsxs("div",{id:"inspector-canvas-root","data-inspector-ignore":!0,className:h?"pi-inspector-active":"",children:[h&&f.jsx("div",{className:"pi-inspector-backdrop",onClick:D=>{D.preventDefault(),D.stopPropagation()}}),f.jsx(Jd,{element:p&&!h?E:null,selectedElement:h?N:null,showChildBorders:B}),h&&N&&G&&f.jsx(bp,{element:N,elementData:G,activeTab:M,availableTabs:nn,showActionsEditor:je,onTabChange:T,onClose:Gt,onPromptSubmit:D=>{Ne("INSPECTOR_PROMPT_SUBMITTED",{prompt:D,element:G}),x(!1),Gt()},elementStack:W,onElementSelect:Cn,onFocusChild:dt,labels:a,isLoading:z,allowEditForMultipleInstances:de,isDraggableEnabled:_e,isResizableEnabled:Ie})]})}let co=null,tn=null,fo=!1;function Lp(){const o=document.createElement("div");return o.id="__promake_inspector_root__",o.setAttribute("data-promake-inspector","true"),o.style.cssText=`
|
|
41
|
+
`,document.head.appendChild(a)}}const fu={version:"1.4.3"},Dn="data-dev-id",Mi=o=>o.replace(/\\/g,"/"),al=o=>{const s=typeof o=="string"?o:o.id,a=s.replace(/\//g,"\\"),u=CSS.escape(a);let c=document.querySelector(`[${Dn}="${u}"]`)||document.querySelector(`[${Dn}="${CSS.escape(s)}"]`)||document.querySelector(`[${Dn}="${CSS.escape(Mi(s))}"]`);if(!c){const p=document.querySelectorAll(`[${Dn}]`);for(const x of p){const v=x.getAttribute(Dn);if(v&&v.includes(s)){c=x;break}}}return!c&&typeof o=="object"&&o.selector&&(c=document.querySelector(o.selector)),c};function pu(o){if(o.id)return"#"+o.id;let s=o.tagName.toLowerCase();if(o.className&&typeof o.className=="string"){const a=o.className.trim().split(/\s+/).filter(u=>u);a.length>0&&(s+="."+a.join("."))}return s}function gu(o){const s=o.hasAttribute(Dn)?o:o.closest(`[${Dn}]`),a=s?.getAttribute(Dn),u=s?.getAttribute("data-dev-name"),c=s?.getAttribute("data-dev-path"),p=s?.getAttribute("data-dev-component"),x=c?Mi(c):void 0,v=a?Mi(a):void 0,h=a?.split(":"),C=h?.[1]?parseInt(h[1],10):0,E=h?.[2]?parseInt(h[2],10):0;return{id:v,name:u||void 0,path:x||void 0,fileName:x||"production build",lineNumber:C,columnNumber:E,component:p||u||"Unknown"}}function hu(o){return{id:gu(o)?.id||"",tagName:o.tagName,className:o.className,selector:pu(o)}}function Tp(o){const s=[];let a=o.parentElement,u=0;for(;a&&u<3;)a.closest("[data-inspector-ignore]")||(s.push(hu(a)),u++),a=a.parentElement;return s}function jp(o){const s=[],a=Array.from(o.children);for(let u=0;u<Math.min(3,a.length);u++)s.push(hu(a[u]));return s}function Di(o,s){const a=[];let u=document.elementFromPoint(o,s);if(!u||u.closest("[data-inspector-ignore]"))return a;if(u instanceof SVGElement){let x=u.parentElement;for(;x&&x instanceof SVGElement;)x=x.parentElement;if(x)u=x;else return a}a.push(u);const c=10,p=(x,v)=>{if(v>2||a.length>=c)return;const h=Array.from(x.children),C=[];for(const A of h){if(!(A instanceof HTMLElement)||A.closest("[data-inspector-ignore]"))continue;const G=A.getBoundingClientRect(),R=A.hasAttribute("data-dev-id"),M=G.width>0&&G.height>0,T=A.children.length>0,j=A.textContent&&A.textContent.trim().length>0,I=["BUTTON","A","INPUT","IMG","VIDEO","SELECT","TEXTAREA"].includes(A.tagName);(R||M&&(T||j||I))&&C.push(A)}const E=C.filter(A=>A.hasAttribute("data-dev-id")),L=C.filter(A=>!A.hasAttribute("data-dev-id")),N=[...E,...L];for(const A of N){if(a.length>=c)return;a.push(A),p(A,v+1)}};return p(u,1),a}function uo(o){const s=o.textContent&&o.children.length===0,a=o.tagName==="IMG",u=gu(o);return{id:u?.id||"",tagName:o.tagName,className:o.className,component:u,position:{top:o.getBoundingClientRect().top,left:o.getBoundingClientRect().left,width:o.getBoundingClientRect().width,height:o.getBoundingClientRect().height},isTextNode:!!s,textContent:s?o.textContent?.trim():"",isImageNode:a,imageUrl:a?o.src:"",selector:pu(o),currentRoute:window.location.pathname,parents:Tp(o),children:jp(o)}}function ul(o){if(o===document.body||o===document.documentElement)return!1;const s=["MAIN","BODY","HTML"],a=["root","app","__next","__nuxt"];return!(s.includes(o.tagName)||o.id&&a.includes(o.id.toLowerCase()))}function Ip(){const{setTheme:o,setLabels:s,labels:a,discardAllChanges:u,setImageValidation:c}=He(),[p,x]=m.useState(!1),v=m.useRef(null);m.useEffect(()=>{v.current=new Np},[]);const[h,C]=m.useState(!1),[E,L]=m.useState(null),[N,A]=m.useState(null),[G,R]=m.useState(null),[M,T]=m.useState(null),[j,I]=m.useState(!1),[Y,J]=m.useState(!1),[Q,ce]=m.useState(!1),[be,q]=m.useState(null),[U,oe]=m.useState(!1),[je,he]=m.useState(!1),[Oe,Ue]=m.useState(!0),[we,X]=m.useState(!1),[B,Z]=m.useState(!0),[W,S]=m.useState([]),[z,ae]=m.useState(!1),[de,ve]=m.useState(!1),[_e,Pe]=m.useState(!0),[Ie,Me]=m.useState(!0),{sendToParent:Ne,listenToParent:mn}=Ba(),jr=m.useCallback((D,me)=>{const pe=uo(me),Ce=Di(D.clientX,D.clientY);p||(x(!0),Ne("INSPECTOR_STARTED",{triggeredBy:"contextmenu"})),S(Ce),A(me),R(pe),oe(!0),he(!0),C(!0),document.body.style.overflow="hidden",Ne("INSPECTOR_ELEMENT_SELECTED",pe)},[Ne,p]),{setShouldInspectOnRightClick:vn}=Qd({onElementSelect:jr,isElementSafeToSelect:ul}),yn=m.useRef(null),qt=m.useRef(null);m.useEffect(()=>{if(be!==null){ce(be);return}if(!N){ce(!1);return}if(N.tagName==="IMG"){ce(!1);return}const me=Za(N);ce(me.length>0)},[N,be]);const nn=m.useMemo(()=>{const D=[];return j&&D.push("text"),Y&&D.push("image"),Q&&D.push("images"),U&&D.push("style"),Oe&&W.length>1&&D.push("subElements"),D},[j,Y,Q,U,Oe,W.length]);m.useEffect(()=>{Q&&T("images")},[Q]),m.useEffect(()=>{nn.length>0?(!M||!nn.includes(M))&&T(nn[0]):T(null)},[nn,M]),m.useEffect(()=>(yn.current=new Kd(D=>{Ne("INSPECTOR_ERROR",D)}),yn.current.start(),qt.current=new Yd(D=>{Ne("URL_CHANGED",D)}),qt.current.start(),()=>{yn.current?.stop()}),[Ne]),m.useEffect(()=>()=>{Ne("INSPECTOR_UNMOUNTED",{})},[Ne]),m.useEffect(()=>{Ne("INSPECTOR_INITIALIZED",{version:fu.version})},[Ne]),m.useEffect(()=>mn(D=>{switch(D.type){case"TOGGLE_INSPECTOR":D.active?x(!0):xn(),D.labels&&s(D.labels),D.theme&&o(D.theme);break;case"SHOW_CONTENT_INPUT":I(D.show);break;case"SHOW_IMAGE_INPUT":J(D.show);break;case"SHOW_STYLE_EDITOR":oe(D.show);break;case"SET_BADGE_VISIBLE":X(D.visible),D.badgeText&&s({badgeText:D.badgeText});break;case"HIGHLIGHT_ELEMENT":rn(D.identifier,D.options);break;case"GET_ELEMENT_BY_ID":wn(D.inspectorId);break;case"SET_SHOW_CHILD_BORDERS":Z(D.show);break;case"SHOW_ACTIONS_TAB":he(D.show);break;case"SHOW_SUB_ELEMENTS":Ue(D.show);break;case"FORCE_CLOSE_INSPECTOR":xn();break;case"SET_ACTIVE_TAB":T(D.tab);break;case"SET_LOADING":ae(D.loading);break;case"SET_INSPECT_ON_RIGHT_CLICK":vn(D.enabled);break;case"SET_ALLOW_EDIT_FOR_MULTIPLE_INSTANCES":ve(D.enabled);break;case"SET_IS_DRAGGABLE":Pe(D.enabled);break;case"SET_IS_RESIZABLE":Me(D.enabled);break;case"SET_IMAGE_VALIDATION":c({maxImageSize:D.maxImageSize,allowedImageTypes:D.allowedImageTypes});break;case"SHOW_IMAGES_TAB":q(D.show);break}}),[mn,vn,c]),m.useEffect(()=>{if(!p||h)return;const D=me=>{const pe=me.target;if(pe.closest("[data-inspector-ignore]")){L(null);return}L(pe)};return document.addEventListener("mousemove",D,!0),()=>document.removeEventListener("mousemove",D,!0)},[p,h]),m.useEffect(()=>{if(!p)return;const D=me=>{let pe=me.target;if(pe.closest&&pe.closest("[data-inspector-ignore]"))return;if(pe instanceof SVGElement){let ge=pe.parentElement;for(;ge&&ge instanceof SVGElement;)ge=ge.parentElement;if(ge)pe=ge;else return}if(h){if(window.__controlBoxDragging){me.preventDefault(),me.stopPropagation();return}if(N&&(pe===N||N.contains(pe))){N.isContentEditable&&N.focus();return}me.preventDefault(),me.stopPropagation(),Gt();return}if(me.preventDefault(),me.stopPropagation(),!ul(pe))return;const Ce=uo(pe),tt=Di(me.clientX,me.clientY);S(tt),A(pe),R(Ce),oe(!0),he(!0),An(),Ne("INSPECTOR_ELEMENT_SELECTED",Ce)};return document.addEventListener("click",D,!0),()=>document.removeEventListener("click",D,!0)},[p,h,N,Ne]),m.useEffect(()=>{p&&!h?document.body.style.cursor="crosshair":document.body.style.cursor=""},[p,h]);function An(){C(!0),document.body.style.overflow="hidden"}async function Gt(){C(!1),A(null),R(null),T(null),S([]),I(!1),J(!1),oe(!1),he(!1),document.body.style.overflow="",window.__styleEditorHasChanges=!1,window.__styleEditorSave=null}function xn(){u(),x(!1),C(!1),A(null),R(null),L(null),T(null),S([]),I(!1),J(!1),oe(!1),he(!1),document.body.style.overflow="",document.body.style.cursor="",window.__styleEditorHasChanges=!1,window.__styleEditorSave=null,Ne("INSPECTOR_CLOSED",{})}function Cn(D){if(!ul(D))return;const me=uo(D);A(D),R(me),oe(!0),he(!0);const pe=D.getBoundingClientRect();pe.top>=0&&pe.bottom<=window.innerHeight||D.scrollIntoView({behavior:"smooth",block:"center"}),Ne("INSPECTOR_ELEMENT_SELECTED",me)}function dt(D){Gt(),requestAnimationFrame(()=>{if(!ul(D))return;const me=uo(D),pe=D.getBoundingClientRect(),Ce=pe.left+pe.width/2,tt=pe.top+pe.height/2,ge=Di(Ce,tt);S(ge),A(D),R(me),oe(!0),he(!0),An(),pe.top>=0&&pe.bottom<=window.innerHeight||D.scrollIntoView({behavior:"smooth",block:"center"}),Ne("INSPECTOR_ELEMENT_SELECTED",me)})}function rn(D,me){const pe=typeof D=="object"?D.targetRoute:me?.targetRoute;if(pe&&pe!==window.location.pathname){window.history.pushState({},"",pe),window.dispatchEvent(new PopStateEvent("popstate")),setTimeout(()=>{rn(D,me)},300);return}let Ce=null;if(typeof D=="object"&&D!==null){if(D.id&&(Ce=al(D.id)),(!Ce||Ce.getBoundingClientRect().width===0)&&D.selector){const ge=document.querySelectorAll(D.selector);if(ge.length===1)Ce=ge[0];else if(ge.length>1){for(const Te of ge){const fe=Te.getBoundingClientRect();if(!(fe.width===0||fe.height===0)){if(D.textContent&&Te.textContent?.trim()===D.textContent.trim()){Ce=Te;break}if(D.position&&Math.abs(fe.top-D.position.top)<5&&Math.abs(fe.left-D.position.left)<5){Ce=Te;break}}}if(!Ce)for(const Te of ge){const fe=Te.getBoundingClientRect();if(fe.width>0&&fe.height>0){Ce=Te;break}}}if(!Ce&&D.className){const Te=D.className.split(" ").filter(Boolean);if(Te.length>0){const fe=document.getElementsByClassName(Te[0]);for(let At=0;At<fe.length;At++){const Hn=fe[At].getBoundingClientRect();if(Hn.width>0&&Hn.height>0){Ce=fe[At];break}}}}}}else if(typeof D=="string"){if(Ce=al(D),!Ce)try{Ce=document.querySelector(D)}catch{}if(!Ce&&D.includes(".")){const ge=D.split(".").filter(Boolean).join(" "),Te=document.getElementsByClassName(ge);Te.length>0&&(Ce=Te[0])}}if(!Ce)return;const tt=Ce.getBoundingClientRect();if((tt.width===0||tt.height===0)&&typeof D=="object"&&D.parents)for(const ge of D.parents){let Te=null;if(ge.id&&(Te=al(ge.id)),!Te&&ge.selector&&(Te=document.querySelector(ge.selector)),Te){const fe=Te.getBoundingClientRect();if(fe.width>0&&fe.height>0){Ce=Te;break}}}v.current&&Ce instanceof HTMLElement&&(v.current?.highlight(Ce,{color:me?.color||"#4417db",duration:me?.duration||2e3}),me?.scrollIntoView!==!1&&Ce.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}))}function wn(D){const me=al(D);if(me&&me instanceof HTMLElement){const pe=uo(me);Ne("ELEMENT_INFO_RESPONSE",pe)}else Ne("ELEMENT_INFO_RESPONSE",{error:"Element not found",inspectorId:D})}return m.useEffect(()=>{if(h){let D=!1;const me=()=>{D=!0},pe=()=>{D=!1},Ce=document.getElementById("inspector-canvas-root");Ce&&(Ce.addEventListener("pointerdown",me),Ce.addEventListener("pointerup",pe),document.addEventListener("pointerup",pe));const tt=fe=>{if(fe.target.closest("#inspector-canvas-root")){fe.stopPropagation();return}fe.preventDefault(),fe.stopPropagation()},ge=fe=>{fe.target.closest("#inspector-canvas-root")||D||fe.type==="mouseleave"||fe.type==="mouseout"||(fe.preventDefault(),fe.stopPropagation())};document.addEventListener("wheel",tt,{passive:!1,capture:!0}),document.addEventListener("touchmove",tt,{passive:!1,capture:!0}),document.addEventListener("pointerdown",ge,{capture:!0}),document.addEventListener("pointerup",ge,{capture:!0}),document.addEventListener("pointermove",ge,{capture:!0}),document.addEventListener("mousedown",ge,{capture:!0}),document.addEventListener("mouseup",ge,{capture:!0}),document.addEventListener("mousemove",ge,{capture:!0}),document.addEventListener("click",ge,{capture:!0});const Te=fe=>{if(fe.key==="Escape"&&fe.ctrlKey&&fe.shiftKey){xn();return}if(fe.key==="Escape"){Gt();return}fe.target.closest("#inspector-canvas-root")||(fe.preventDefault(),fe.stopPropagation())};return document.addEventListener("keydown",Te,{capture:!0}),document.addEventListener("keyup",Te,{capture:!0}),()=>{const fe=document.getElementById("inspector-canvas-root");fe&&(fe.removeEventListener("pointerdown",me),fe.removeEventListener("pointerup",pe)),document.removeEventListener("pointerup",pe),document.removeEventListener("wheel",tt,{capture:!0}),document.removeEventListener("touchmove",tt,{capture:!0}),document.removeEventListener("pointerdown",ge,{capture:!0}),document.removeEventListener("pointerup",ge,{capture:!0}),document.removeEventListener("pointermove",ge,{capture:!0}),document.removeEventListener("mousedown",ge,{capture:!0}),document.removeEventListener("mouseup",ge,{capture:!0}),document.removeEventListener("mousemove",ge,{capture:!0}),document.removeEventListener("click",ge,{capture:!0}),document.removeEventListener("keydown",Te,{capture:!0}),document.removeEventListener("keyup",Te,{capture:!0})}}},[h]),f.jsxs("div",{id:"inspector-canvas-root","data-inspector-ignore":!0,className:h?"pi-inspector-active":"",children:[h&&f.jsx("div",{className:"pi-inspector-backdrop",onClick:D=>{D.preventDefault(),D.stopPropagation()}}),f.jsx(Jd,{element:p&&!h?E:null,selectedElement:h?N:null,showChildBorders:B}),h&&N&&G&&f.jsx(bp,{element:N,elementData:G,activeTab:M,availableTabs:nn,showActionsEditor:je,onTabChange:T,onClose:Gt,onPromptSubmit:D=>{Ne("INSPECTOR_PROMPT_SUBMITTED",{prompt:D,element:G}),x(!1),Gt()},elementStack:W,onElementSelect:Cn,onFocusChild:dt,labels:a,isLoading:z,allowEditForMultipleInstances:de,isDraggableEnabled:_e,isResizableEnabled:Ie})]})}let co=null,tn=null,fo=!1;function Lp(){const o=document.createElement("div");return o.id="__promake_inspector_root__",o.setAttribute("data-promake-inspector","true"),o.style.cssText=`
|
|
42
42
|
position: fixed;
|
|
43
43
|
top: 0;
|
|
44
44
|
left: 0;
|
package/dist/inspector.js
CHANGED
|
@@ -24767,7 +24767,7 @@ class Uz {
|
|
|
24767
24767
|
`, document.head.appendChild(h);
|
|
24768
24768
|
}
|
|
24769
24769
|
}
|
|
24770
|
-
const Iz = "1.4.
|
|
24770
|
+
const Iz = "1.4.3", Fz = {
|
|
24771
24771
|
version: Iz
|
|
24772
24772
|
}, Hu = "data-dev-id", p0 = (c) => c.replace(/\\/g, "/"), Sg = (c) => {
|
|
24773
24773
|
const v = typeof c == "string" ? c : c.id, h = v.replace(/\//g, "\\"), S = CSS.escape(h);
|
|
@@ -24898,8 +24898,8 @@ function yv(c) {
|
|
|
24898
24898
|
function bg(c) {
|
|
24899
24899
|
if (c === document.body || c === document.documentElement)
|
|
24900
24900
|
return !1;
|
|
24901
|
-
const v =
|
|
24902
|
-
return !(v.
|
|
24901
|
+
const v = ["MAIN", "BODY", "HTML"], h = ["root", "app", "__next", "__nuxt"];
|
|
24902
|
+
return !(v.includes(c.tagName) || c.id && h.includes(c.id.toLowerCase()));
|
|
24903
24903
|
}
|
|
24904
24904
|
function Gz() {
|
|
24905
24905
|
const { setTheme: c, setLabels: v, labels: h, discardAllChanges: S, setImageValidation: C } = Zt(), [x, y] = Ne(!1), D = ct(null);
|
|
@@ -24939,7 +24939,14 @@ function Gz() {
|
|
|
24939
24939
|
const Qn = bv(() => {
|
|
24940
24940
|
const J = [];
|
|
24941
24941
|
return q && J.push("text"), ge && J.push("image"), ye && J.push("images"), de && J.push("style"), Nt && me.length > 1 && J.push("subElements"), J;
|
|
24942
|
-
}, [
|
|
24942
|
+
}, [
|
|
24943
|
+
q,
|
|
24944
|
+
ge,
|
|
24945
|
+
ye,
|
|
24946
|
+
de,
|
|
24947
|
+
Nt,
|
|
24948
|
+
me.length
|
|
24949
|
+
]);
|
|
24943
24950
|
rt(() => {
|
|
24944
24951
|
ye && Y("images");
|
|
24945
24952
|
}, [ye]), rt(() => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@promakeai/inspector",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.3",
|
|
4
4
|
"description": "Visual element inspector React component with AI prompt support",
|
|
5
5
|
"author": "Promake",
|
|
6
6
|
"type": "module",
|
|
@@ -29,8 +29,7 @@
|
|
|
29
29
|
"build": "vite build && tsc --build --emitDeclarationOnly",
|
|
30
30
|
"build:cdn": "vite build --config vite.cdn.config.ts",
|
|
31
31
|
"build:all": "npm run build && npm run build:cdn",
|
|
32
|
-
"dev": "vite",
|
|
33
|
-
"dev:watch": "vite build --watch",
|
|
32
|
+
"dev": "vite build --watch",
|
|
34
33
|
"preview": "vite preview",
|
|
35
34
|
"clean": "rm -rf dist",
|
|
36
35
|
"lint": "tsc --build --force --dry",
|