@promakeai/inspector 1.7.2 → 1.7.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.
@@ -38,7 +38,7 @@ Error generating stack: `+s.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 yu={version:"1.7.2"},On="data-dev-id",al=o=>o.replace(/\\/g,"/"),ul=o=>{const i=typeof o=="string"?o:o.id,a=i.replace(/\//g,"\\"),u=CSS.escape(a);let c=document.querySelector(`[${On}="${u}"]`)||document.querySelector(`[${On}="${CSS.escape(i)}"]`)||document.querySelector(`[${On}="${CSS.escape(al(i))}"]`);if(!c){const p=document.querySelectorAll(`[${On}]`);for(const v of p){const y=v.getAttribute(On);if(y&&y.includes(i)){c=v;break}}}return!c&&typeof o=="object"&&o.selector&&(c=document.querySelector(o.selector)),c};function vu(o){if(o.id)return"#"+o.id;let i=o.tagName.toLowerCase();if(o.className&&typeof o.className=="string"){const a=o.className.trim().split(/\s+/).filter(u=>u);a.length>0&&(i+="."+a.join("."))}return i}function Cu(o){const i=o.hasAttribute(On)?o:o.closest(`[${On}]`),a=i?.getAttribute(On),u=i?.getAttribute("data-dev-name"),c=i?.getAttribute("data-dev-path"),p=i?.getAttribute("data-dev-component"),v=c?al(c):void 0,y=a?al(a):void 0,g=a?.split(":"),C=g?.[1]?parseInt(g[1],10):0,k=g?.[2]?parseInt(g[2],10):0;return{id:y,name:u||void 0,path:v||void 0,fileName:v||"production build",lineNumber:C,columnNumber:k,component:p||u||"Unknown"}}function xu(o){return{id:Cu(o)?.id||"",tagName:o.tagName,className:o.className,selector:vu(o)}}function Dp(o){const i=[];let a=o.parentElement,u=0;for(;a&&u<3;)a.closest("[data-inspector-ignore]")||(i.push(xu(a)),u++),a=a.parentElement;return i}function Ap(o){const i=[],a=Array.from(o.children);for(let u=0;u<Math.min(3,a.length);u++)i.push(xu(a[u]));return i}function Op(o){const i={};for(const a of o.attributes)a.name.startsWith("data-")&&(i[a.name]=a.value);return i}function Hp(o){const i=o.tagName.toLowerCase();if(i==="img")return o.src;if(i==="a")return o.href;if(i==="input"||i==="textarea")return o.value;const a=o.textContent?.trim();if(a&&o.children.length===0)return a}function Fp(o){const i={};return o.querySelectorAll("[data-dev-id]").forEach(u=>{const c=u,p=c.getAttribute("data-dev-id");if(!p)return;const v=Hp(c);if(v===void 0)return;const y=c.tagName.toLowerCase(),g=`${al(p)}-${y}`;i[g]?Array.isArray(i[g])?i[g].push(v):i[g]=[i[g],v]:i[g]=v}),i}function $p(o){let i=o;for(;i;){const a=i.getAttribute("data-db-id"),u=i.getAttribute("data-db-table");if(a&&u)return{table:u,id:a,values:Fp(i)};i=i.parentElement}}function yo(o,i){const a=[];let u=document.elementFromPoint(o,i);if(!u||u.closest("[data-inspector-ignore]"))return a;if(u instanceof SVGElement){let v=u.parentElement;for(;v&&v instanceof SVGElement;)v=v.parentElement;if(v)u=v;else return a}a.push(u);const c=10,p=(v,y)=>{if(y>2||a.length>=c)return;const g=Array.from(v.children),C=[];for(const D of g){if(!(D instanceof HTMLElement)||D.closest("[data-inspector-ignore]"))continue;const Q=D.getBoundingClientRect(),B=D.hasAttribute("data-dev-id"),R=Q.width>0&&Q.height>0,T=D.children.length>0,E=D.textContent&&D.textContent.trim().length>0,_=["BUTTON","A","INPUT","IMG","VIDEO","SELECT","TEXTAREA"].includes(D.tagName);(B||R&&(T||E||_))&&C.push(D)}const k=C.filter(D=>D.hasAttribute("data-dev-id")),L=C.filter(D=>!D.hasAttribute("data-dev-id")),z=[...k,...L];for(const D of z){if(a.length>=c)return;a.push(D),p(D,y+1)}};return p(u,1),a}function Up(o){const i=o.textContent&&o.children.length===0,a=o.tagName==="IMG",u=Cu(o),p=_i(o).instanceCount>1;let v=o.getAttribute("data-inspector-unique-id");return v||(v=`inspector-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,o.setAttribute("data-inspector-unique-id",v),console.log("🆔 Assigned unique ID to element:",v)),{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},uniqueId:v,isTextNode:!!i,textContent:i?o.textContent?.trim():"",isImageNode:a,imageUrl:a?o.src:"",selector:vu(o),currentRoute:window.location.pathname,parents:Dp(o),children:Ap(o),isMultipleInstance:p,properties:Op(o),database:$p(o)}}function Br(o){if(o===document.body||o===document.documentElement)return!1;const i=["MAIN","BODY","HTML"],a=["root","app","__next","__nuxt"];return!(i.includes(o.tagName)||o.id&&a.includes(o.id.toLowerCase()))}async function Vp(){try{const o=window.ENV?.VITE_TENANT_UUID;if(!o)return!1;const u=await(await fetch(`https://testb.promake.ai/api/conversations/${o}/user-plan`)).json();return u.success&&u.plan==="free"}catch{return!1}}function Wp(){const{setTheme:o,setLabels:i,labels:a,discardAllChanges:u,setImageValidation:c,setShowMultipleInstanceWarning:p,changes:v}=Oe(),y=v.length>0,[g,C]=h.useState(!1),k=h.useRef(null);h.useEffect(()=>{k.current=new Mp},[]);const[L,z]=h.useState(!1),[D,Q]=h.useState(null),[B,R]=h.useState(null),[T,E]=h.useState(null),[_,j]=h.useState(null),[F,G]=h.useState(!1),[de,xe]=h.useState(!1),[se,re]=h.useState(!1),[ve,te]=h.useState(null),[le,Pe]=h.useState(!1),[Ae,Ce]=h.useState(!1),[K,$]=h.useState(!0),[X,U]=h.useState(!1),[w,M]=h.useState(null),[fe,ge]=h.useState(!1),[we,Se]=h.useState(null),[be,Le]=h.useState(new Map),[Fe,lt]=h.useState(!1);h.useEffect(()=>{Vp().then(P=>{P&&lt(!0)})},[]);const[_n,Rr]=h.useState(!0),[sn,Bt]=h.useState([]),[Pr,Mr]=h.useState(!1),[Xt,Dr]=h.useState(!1),[pr,an]=h.useState(!0),[un,gr]=h.useState(!0),{sendToParent:Ie,listenToParent:En}=Pa(),et=h.useCallback(P=>{const J=Up(P),Y=be.get(J.id);return Y&&Y.length>0?{...J,custom:{fields:Y}}:J},[be]),Ar=h.useCallback((P,J)=>{const Y=et(J),he=yo(P.clientX,P.clientY);g||(C(!0),Ie("INSPECTOR_STARTED",{triggeredBy:"contextmenu"})),Bt(he),R(J),E(Y),Pe(!0),Ce(!0),z(!0),document.body.style.overflow="hidden",Ie("INSPECTOR_ELEMENT_SELECTED",Y)},[Ie,g,et]),{setShouldInspectOnRightClick:cn}=tf({onElementSelect:Ar,isElementSafeToSelect:Br}),Qt=h.useRef(null),Hn=h.useRef(null);h.useEffect(()=>{if(ve!==null){re(ve);return}if(!B){re(!1);return}if(B.tagName==="IMG"){re(!1);return}const J=nu(B);re(J.length>0)},[B,ve]);const Et=h.useMemo(()=>{const P=[];return fe&&P.push("custom"),F&&P.push("text"),de&&P.push("image"),se&&P.push("images"),le&&P.push("style"),K&&sn.length>1&&P.push("subElements"),X&&P.push("database"),P},[F,de,se,le,K,X,fe,sn.length]);h.useEffect(()=>{se&&j("images")},[se]),h.useEffect(()=>{if(w!==null){U(w);return}if(!B||!T){U(!1);return}U(!!T.database)},[B,T,w]),h.useEffect(()=>{X&&T?.database&&j("database")},[X,T?.database]),h.useEffect(()=>{if(we!==null){ge(we);return}if(!B||!T){ge(!1);return}ge(!!T.custom)},[B,T,we]),h.useEffect(()=>{fe&&T?.custom&&j("custom")},[fe,T?.custom]),h.useEffect(()=>{Et.length>0?(!_||!Et.includes(_))&&j(Et[0]):j(null)},[Et,_]),h.useEffect(()=>(Qt.current=new nf(P=>{Ie("INSPECTOR_ERROR",P)}),Qt.current.start(),Hn.current=new rf(P=>{Ie("URL_CHANGED",P)}),Hn.current.start(),()=>{Qt.current?.stop()}),[Ie]),h.useEffect(()=>()=>{Ie("INSPECTOR_UNMOUNTED",{})},[Ie]),h.useEffect(()=>{Ie("INSPECTOR_INITIALIZED",{version:yu.version})},[Ie]),h.useEffect(()=>En(P=>{switch(P.type){case"TOGGLE_INSPECTOR":P.active?C(!0):$n(),P.labels&&i(P.labels),P.theme&&o(P.theme);break;case"SHOW_CONTENT_INPUT":G(P.show);break;case"SHOW_IMAGE_INPUT":xe(P.show);break;case"SHOW_STYLE_EDITOR":Pe(P.show);break;case"SET_BADGE_VISIBLE":lt(P.visible),P.badgeText&&i({badgeText:P.badgeText});break;case"HIGHLIGHT_ELEMENT":bn(P.identifier,P.options);break;case"GET_ELEMENT_BY_ID":Ht(P.inspectorId);break;case"SET_SHOW_CHILD_BORDERS":Rr(P.show);break;case"SHOW_ACTIONS_TAB":Ce(P.show);break;case"SHOW_SUB_ELEMENTS":$(P.show);break;case"FORCE_CLOSE_INSPECTOR":$n();break;case"SET_ACTIVE_TAB":j(P.tab);break;case"SET_LOADING":Mr(P.loading);break;case"SET_INSPECT_ON_RIGHT_CLICK":cn(P.enabled);break;case"SET_ALLOW_EDIT_FOR_MULTIPLE_INSTANCES":Dr(P.enabled);break;case"SET_SHOW_MULTIPLE_INSTANCE_WARNING":p(P.show);break;case"SET_IS_DRAGGABLE":an(P.enabled);break;case"SET_IS_RESIZABLE":gr(P.enabled);break;case"SET_IMAGE_VALIDATION":c({maxImageSize:P.maxImageSize,allowedImageTypes:P.allowedImageTypes});break;case"SHOW_IMAGES_TAB":te(P.show);break;case"SHOW_DATABASE_TAB":M(P.show);break;case"SHOW_CUSTOM_TAB":Se(P.show);break;case"SET_CUSTOM_FIELDS":Le(J=>{const Y=new Map(J);return Y.set(P.data.elementId,P.data.fields),Y}),T&&T.id===P.data.elementId&&E({...T,custom:{fields:P.data.fields,groupId:P.data.groupId}});break}}),[En,cn,c,T]),h.useEffect(()=>{if(!g)return;const P=J=>{let Y=J.target;const he=Y.classList.contains("pi-inspector-overlay")||Y.classList.contains("pi-inspector-overlay-child"),bt=Y.id==="inspector-canvas-root";if(he||bt){const Ne=document.elementsFromPoint(J.clientX,J.clientY).find(ke=>{const Qe=ke;return Qe.id!=="inspector-canvas-root"&&!Qe.closest("[data-inspector-ignore]")});if(Ne)Y=Ne;else{Q(null);return}}else if(Y.closest("[data-inspector-ignore]")){Q(null);return}Q(me=>me===Y?me:Y)};return document.addEventListener("mousemove",P,!0),()=>document.removeEventListener("mousemove",P,!0)},[g,L]),h.useEffect(()=>{if(!g)return;const P=J=>{let Y=J.target;if(Y.closest&&Y.closest("[data-inspector-ignore]")){if(Y.closest("[data-inspector-controlbox]"))return;const Ne=Y.classList.contains("pi-inspector-overlay")||Y.classList.contains("pi-inspector-overlay-child"),ke=Y.id==="inspector-canvas-root";if(Ne||ke){const Ft=document.elementsFromPoint(J.clientX,J.clientY).find(tt=>{const Ct=tt;return Ct.id!=="inspector-canvas-root"&&!Ct.closest("[data-inspector-ignore]")});if(Ft)Y=Ft;else return}else return}if(Y instanceof SVGElement){let me=Y.parentElement;for(;me&&me instanceof SVGElement;)me=me.parentElement;if(me)Y=me;else return}if(L){if(window.__controlBoxDragging){J.preventDefault(),J.stopPropagation();return}if(B&&Y===B){B.isContentEditable&&B.focus();return}if(B&&B.contains(Y)&&Y!==B){if(J.preventDefault(),J.stopPropagation(),!Br(Y))return;if(Y!==B){if(y){window.dispatchEvent(new CustomEvent("inspector-pending-element-select",{detail:{element:Y}}));return}const me=et(Y),Ne=yo(J.clientX,J.clientY);Bt(Ne),R(Y),E(me),Pe(!0),Ce(!0),Ie("INSPECTOR_ELEMENT_SELECTED",me)}return}if(J.preventDefault(),J.stopPropagation(),!Br(Y))return;if(Y!==B){if(y){window.dispatchEvent(new CustomEvent("inspector-pending-element-select",{detail:{element:Y}}));return}const me=et(Y),Ne=yo(J.clientX,J.clientY);Bt(Ne),R(Y),E(me),Pe(!0),Ce(!0),Ie("INSPECTOR_ELEMENT_SELECTED",me)}return}if(J.preventDefault(),J.stopPropagation(),!Br(Y))return;const he=et(Y),bt=yo(J.clientX,J.clientY);Bt(bt),R(Y),E(he),Pe(!0),Ce(!0),Kt(),Ie("INSPECTOR_ELEMENT_SELECTED",he)};return document.addEventListener("click",P,!0),()=>document.removeEventListener("click",P,!0)},[g,L,B,Ie,v,y,et]),h.useEffect(()=>{g?document.body.style.cursor="crosshair":document.body.style.cursor=""},[g]);function Kt(){z(!0),document.body.style.overflow="hidden"}async function Fn(){z(!1),R(null),E(null),j(null),Bt([]),G(!1),xe(!1),Pe(!1),Ce(!1),document.body.style.overflow="",window.__styleEditorHasChanges=!1,window.__styleEditorSave=null}function $n(){u(),C(!1),z(!1),R(null),E(null),Q(null),j(null),Bt([]),G(!1),xe(!1),Pe(!1),Ce(!1),document.body.style.overflow="",document.body.style.cursor="",window.__styleEditorHasChanges=!1,window.__styleEditorSave=null,Ie("INSPECTOR_CLOSED",{})}const Or=h.useCallback(P=>{if(!Br(P))return;const J=et(P);R(P),E(J),Pe(!0),Ce(!0);const Y=P.getBoundingClientRect();Y.top>=0&&Y.bottom<=window.innerHeight||P.scrollIntoView({behavior:"smooth",block:"center"}),Ie("INSPECTOR_ELEMENT_SELECTED",J)},[Ie,v,y,et]),Hr=h.useCallback(P=>{Fn(),requestAnimationFrame(()=>{if(!Br(P))return;const J=et(P),Y=P.getBoundingClientRect(),he=Y.left+Y.width/2,bt=Y.top+Y.height/2,me=yo(he,bt);Bt(me),R(P),E(J),Pe(!0),Ce(!0),Kt(),Y.top>=0&&Y.bottom<=window.innerHeight||P.scrollIntoView({behavior:"smooth",block:"center"}),Ie("INSPECTOR_ELEMENT_SELECTED",J)})},[Ie,et]);function bn(P,J){const Y=typeof P=="object"?P.targetRoute:J?.targetRoute;if(Y&&Y!==window.location.pathname){window.history.pushState({},"",Y),window.dispatchEvent(new PopStateEvent("popstate")),setTimeout(()=>{bn(P,J)},300);return}let he=null;if(typeof P=="object"&&P!==null){if(P.id&&(he=ul(P.id)),(!he||he.getBoundingClientRect().width===0)&&P.selector){const me=document.querySelectorAll(P.selector);if(me.length===1)he=me[0];else if(me.length>1){for(const Ne of me){const ke=Ne.getBoundingClientRect();if(!(ke.width===0||ke.height===0)){if(P.textContent&&Ne.textContent?.trim()===P.textContent.trim()){he=Ne;break}if(P.position&&Math.abs(ke.top-P.position.top)<5&&Math.abs(ke.left-P.position.left)<5){he=Ne;break}}}if(!he)for(const Ne of me){const ke=Ne.getBoundingClientRect();if(ke.width>0&&ke.height>0){he=Ne;break}}}if(!he&&P.className){const Ne=P.className.split(" ").filter(Boolean);if(Ne.length>0){const ke=document.getElementsByClassName(Ne[0]);for(let Qe=0;Qe<ke.length;Qe++){const Ft=ke[Qe].getBoundingClientRect();if(Ft.width>0&&Ft.height>0){he=ke[Qe];break}}}}}}else if(typeof P=="string"){if(he=ul(P),!he)try{he=document.querySelector(P)}catch{}if(!he&&P.includes(".")){const me=P.split(".").filter(Boolean).join(" "),Ne=document.getElementsByClassName(me);Ne.length>0&&(he=Ne[0])}}if(!he)return;const bt=he.getBoundingClientRect();if((bt.width===0||bt.height===0)&&typeof P=="object"&&P.parents)for(const me of P.parents){let Ne=null;if(me.id&&(Ne=ul(me.id)),!Ne&&me.selector&&(Ne=document.querySelector(me.selector)),Ne){const ke=Ne.getBoundingClientRect();if(ke.width>0&&ke.height>0){he=Ne;break}}}k.current&&he instanceof HTMLElement&&(k.current?.highlight(he,{color:J?.color||"#4417db",duration:J?.duration||2e3}),J?.scrollIntoView!==!1&&he.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}))}function Ht(P){const J=ul(P);if(J&&J instanceof HTMLElement){const Y=et(J);Ie("ELEMENT_INFO_RESPONSE",Y)}else Ie("ELEMENT_INFO_RESPONSE",{error:"Element not found",inspectorId:P})}h.useEffect(()=>{if(L){const P=J=>{if(J.key==="Escape"&&J.ctrlKey&&J.shiftKey){$n();return}if(J.key==="Escape"){if(J.target.closest("#inspector-canvas-root"))return;Fn();return}};return document.addEventListener("keydown",P,{capture:!0}),()=>{document.removeEventListener("keydown",P,{capture:!0})}}},[L]),h.useEffect(()=>{if(!L)return;const P=()=>{};return window.addEventListener("scroll",P,{capture:!0,passive:!0}),()=>window.removeEventListener("scroll",P,{capture:!0})},[L]),h.useEffect(()=>{if(g&&!L){const P=J=>{J.key==="Escape"&&(J.preventDefault(),J.stopPropagation(),$n())};return document.addEventListener("keydown",P,{capture:!0}),()=>{document.removeEventListener("keydown",P,{capture:!0})}}},[g,L]);const Un=h.useCallback(P=>{Ie("INSPECTOR_PROMPT_SUBMITTED",{prompt:P,element:T}),C(!1),Fn()},[Ie,T]);return d.jsxs("div",{id:"inspector-canvas-root","data-inspector-ignore":!0,className:L?"pi-inspector-active":"",children:[d.jsx(of,{element:g?D:null,selectedElement:B,showChildBorders:_n}),B&&T&&d.jsx(Rp,{element:B,elementData:T,activeTab:_,availableTabs:Et,showActionsEditor:Ae,onTabChange:j,onClose:Fn,onPromptSubmit:Un,elementStack:sn,onElementSelect:Or,onFocusChild:Hr,labels:a,isLoading:Pr,allowEditForMultipleInstances:Xt,isDraggableEnabled:pr,isResizableEnabled:un}),d.jsx(Pp,{visible:Fe})]})}let vo=null,ln=null,Co=!1;function qp(){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 yu={version:"1.7.3"},On="data-dev-id",al=o=>o.replace(/\\/g,"/"),ul=o=>{const i=typeof o=="string"?o:o.id,a=i.replace(/\//g,"\\"),u=CSS.escape(a);let c=document.querySelector(`[${On}="${u}"]`)||document.querySelector(`[${On}="${CSS.escape(i)}"]`)||document.querySelector(`[${On}="${CSS.escape(al(i))}"]`);if(!c){const p=document.querySelectorAll(`[${On}]`);for(const v of p){const y=v.getAttribute(On);if(y&&y.includes(i)){c=v;break}}}return!c&&typeof o=="object"&&o.selector&&(c=document.querySelector(o.selector)),c};function vu(o){if(o.id)return"#"+o.id;let i=o.tagName.toLowerCase();if(o.className&&typeof o.className=="string"){const a=o.className.trim().split(/\s+/).filter(u=>u);a.length>0&&(i+="."+a.join("."))}return i}function Cu(o){const i=o.hasAttribute(On)?o:o.closest(`[${On}]`),a=i?.getAttribute(On),u=i?.getAttribute("data-dev-name"),c=i?.getAttribute("data-dev-path"),p=i?.getAttribute("data-dev-component"),v=c?al(c):void 0,y=a?al(a):void 0,g=a?.split(":"),C=g?.[1]?parseInt(g[1],10):0,k=g?.[2]?parseInt(g[2],10):0;return{id:y,name:u||void 0,path:v||void 0,fileName:v||"production build",lineNumber:C,columnNumber:k,component:p||u||"Unknown"}}function xu(o){return{id:Cu(o)?.id||"",tagName:o.tagName,className:o.className,selector:vu(o)}}function Dp(o){const i=[];let a=o.parentElement,u=0;for(;a&&u<3;)a.closest("[data-inspector-ignore]")||(i.push(xu(a)),u++),a=a.parentElement;return i}function Ap(o){const i=[],a=Array.from(o.children);for(let u=0;u<Math.min(3,a.length);u++)i.push(xu(a[u]));return i}function Op(o){const i={};for(const a of o.attributes)a.name.startsWith("data-")&&(i[a.name]=a.value);return i}function Hp(o){const i=o.tagName.toLowerCase();if(i==="img")return o.src;if(i==="a")return o.href;if(i==="input"||i==="textarea")return o.value;const a=o.textContent?.trim();if(a&&o.children.length===0)return a}function Fp(o){const i={};return o.querySelectorAll("[data-dev-id]").forEach(u=>{const c=u,p=c.getAttribute("data-dev-id");if(!p)return;const v=Hp(c);if(v===void 0)return;const y=c.tagName.toLowerCase(),g=`${al(p)}-${y}`;i[g]?Array.isArray(i[g])?i[g].push(v):i[g]=[i[g],v]:i[g]=v}),i}function $p(o){let i=o;for(;i;){const a=i.getAttribute("data-db-id"),u=i.getAttribute("data-db-table");if(a&&u)return{table:u,id:a,values:Fp(i)};i=i.parentElement}}function yo(o,i){const a=[];let u=document.elementFromPoint(o,i);if(!u||u.closest("[data-inspector-ignore]"))return a;if(u instanceof SVGElement){let v=u.parentElement;for(;v&&v instanceof SVGElement;)v=v.parentElement;if(v)u=v;else return a}a.push(u);const c=10,p=(v,y)=>{if(y>2||a.length>=c)return;const g=Array.from(v.children),C=[];for(const D of g){if(!(D instanceof HTMLElement)||D.closest("[data-inspector-ignore]"))continue;const Q=D.getBoundingClientRect(),B=D.hasAttribute("data-dev-id"),R=Q.width>0&&Q.height>0,T=D.children.length>0,E=D.textContent&&D.textContent.trim().length>0,_=["BUTTON","A","INPUT","IMG","VIDEO","SELECT","TEXTAREA"].includes(D.tagName);(B||R&&(T||E||_))&&C.push(D)}const k=C.filter(D=>D.hasAttribute("data-dev-id")),L=C.filter(D=>!D.hasAttribute("data-dev-id")),z=[...k,...L];for(const D of z){if(a.length>=c)return;a.push(D),p(D,y+1)}};return p(u,1),a}function Up(o){const i=o.textContent&&o.children.length===0,a=o.tagName==="IMG",u=Cu(o),p=_i(o).instanceCount>1;let v=o.getAttribute("data-inspector-unique-id");return v||(v=`inspector-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,o.setAttribute("data-inspector-unique-id",v),console.log("🆔 Assigned unique ID to element:",v)),{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},uniqueId:v,isTextNode:!!i,textContent:i?o.textContent?.trim():"",isImageNode:a,imageUrl:a?o.src:"",selector:vu(o),currentRoute:window.location.pathname,parents:Dp(o),children:Ap(o),isMultipleInstance:p,properties:Op(o),database:$p(o)}}function Br(o){if(o===document.body||o===document.documentElement)return!1;const i=["MAIN","BODY","HTML"],a=["root","app","__next","__nuxt"];return!(i.includes(o.tagName)||o.id&&a.includes(o.id.toLowerCase()))}async function Vp(){try{const o=window.ENV?.VITE_TENANT_UUID;if(!o)return!1;const i=window.ENV?.VITE_PROMAKE_ENV||"testb",u=await(await fetch(`https://${i}.promake.ai/api/conversations/${o}/user-plan`)).json();return u.success&&u.plan==="free"}catch{return!1}}function Wp(){const{setTheme:o,setLabels:i,labels:a,discardAllChanges:u,setImageValidation:c,setShowMultipleInstanceWarning:p,changes:v}=Oe(),y=v.length>0,[g,C]=h.useState(!1),k=h.useRef(null);h.useEffect(()=>{k.current=new Mp},[]);const[L,z]=h.useState(!1),[D,Q]=h.useState(null),[B,R]=h.useState(null),[T,E]=h.useState(null),[_,j]=h.useState(null),[F,G]=h.useState(!1),[de,xe]=h.useState(!1),[se,re]=h.useState(!1),[ve,te]=h.useState(null),[le,Pe]=h.useState(!1),[Ae,Ce]=h.useState(!1),[K,$]=h.useState(!0),[X,U]=h.useState(!1),[w,M]=h.useState(null),[fe,ge]=h.useState(!1),[we,Se]=h.useState(null),[be,Le]=h.useState(new Map),[Fe,lt]=h.useState(!1);h.useEffect(()=>{Vp().then(P=>{P&&lt(!0)})},[]);const[_n,Rr]=h.useState(!0),[sn,Bt]=h.useState([]),[Pr,Mr]=h.useState(!1),[Xt,Dr]=h.useState(!1),[pr,an]=h.useState(!0),[un,gr]=h.useState(!0),{sendToParent:Ie,listenToParent:En}=Pa(),et=h.useCallback(P=>{const J=Up(P),Y=be.get(J.id);return Y&&Y.length>0?{...J,custom:{fields:Y}}:J},[be]),Ar=h.useCallback((P,J)=>{const Y=et(J),he=yo(P.clientX,P.clientY);g||(C(!0),Ie("INSPECTOR_STARTED",{triggeredBy:"contextmenu"})),Bt(he),R(J),E(Y),Pe(!0),Ce(!0),z(!0),document.body.style.overflow="hidden",Ie("INSPECTOR_ELEMENT_SELECTED",Y)},[Ie,g,et]),{setShouldInspectOnRightClick:cn}=tf({onElementSelect:Ar,isElementSafeToSelect:Br}),Qt=h.useRef(null),Hn=h.useRef(null);h.useEffect(()=>{if(ve!==null){re(ve);return}if(!B){re(!1);return}if(B.tagName==="IMG"){re(!1);return}const J=nu(B);re(J.length>0)},[B,ve]);const Et=h.useMemo(()=>{const P=[];return fe&&P.push("custom"),F&&P.push("text"),de&&P.push("image"),se&&P.push("images"),le&&P.push("style"),K&&sn.length>1&&P.push("subElements"),X&&P.push("database"),P},[F,de,se,le,K,X,fe,sn.length]);h.useEffect(()=>{se&&j("images")},[se]),h.useEffect(()=>{if(w!==null){U(w);return}if(!B||!T){U(!1);return}U(!!T.database)},[B,T,w]),h.useEffect(()=>{X&&T?.database&&j("database")},[X,T?.database]),h.useEffect(()=>{if(we!==null){ge(we);return}if(!B||!T){ge(!1);return}ge(!!T.custom)},[B,T,we]),h.useEffect(()=>{fe&&T?.custom&&j("custom")},[fe,T?.custom]),h.useEffect(()=>{Et.length>0?(!_||!Et.includes(_))&&j(Et[0]):j(null)},[Et,_]),h.useEffect(()=>(Qt.current=new nf(P=>{Ie("INSPECTOR_ERROR",P)}),Qt.current.start(),Hn.current=new rf(P=>{Ie("URL_CHANGED",P)}),Hn.current.start(),()=>{Qt.current?.stop()}),[Ie]),h.useEffect(()=>()=>{Ie("INSPECTOR_UNMOUNTED",{})},[Ie]),h.useEffect(()=>{Ie("INSPECTOR_INITIALIZED",{version:yu.version})},[Ie]),h.useEffect(()=>En(P=>{switch(P.type){case"TOGGLE_INSPECTOR":P.active?C(!0):$n(),P.labels&&i(P.labels),P.theme&&o(P.theme);break;case"SHOW_CONTENT_INPUT":G(P.show);break;case"SHOW_IMAGE_INPUT":xe(P.show);break;case"SHOW_STYLE_EDITOR":Pe(P.show);break;case"SET_BADGE_VISIBLE":lt(P.visible),P.badgeText&&i({badgeText:P.badgeText});break;case"HIGHLIGHT_ELEMENT":bn(P.identifier,P.options);break;case"GET_ELEMENT_BY_ID":Ht(P.inspectorId);break;case"SET_SHOW_CHILD_BORDERS":Rr(P.show);break;case"SHOW_ACTIONS_TAB":Ce(P.show);break;case"SHOW_SUB_ELEMENTS":$(P.show);break;case"FORCE_CLOSE_INSPECTOR":$n();break;case"SET_ACTIVE_TAB":j(P.tab);break;case"SET_LOADING":Mr(P.loading);break;case"SET_INSPECT_ON_RIGHT_CLICK":cn(P.enabled);break;case"SET_ALLOW_EDIT_FOR_MULTIPLE_INSTANCES":Dr(P.enabled);break;case"SET_SHOW_MULTIPLE_INSTANCE_WARNING":p(P.show);break;case"SET_IS_DRAGGABLE":an(P.enabled);break;case"SET_IS_RESIZABLE":gr(P.enabled);break;case"SET_IMAGE_VALIDATION":c({maxImageSize:P.maxImageSize,allowedImageTypes:P.allowedImageTypes});break;case"SHOW_IMAGES_TAB":te(P.show);break;case"SHOW_DATABASE_TAB":M(P.show);break;case"SHOW_CUSTOM_TAB":Se(P.show);break;case"SET_CUSTOM_FIELDS":Le(J=>{const Y=new Map(J);return Y.set(P.data.elementId,P.data.fields),Y}),T&&T.id===P.data.elementId&&E({...T,custom:{fields:P.data.fields,groupId:P.data.groupId}});break}}),[En,cn,c,T]),h.useEffect(()=>{if(!g)return;const P=J=>{let Y=J.target;const he=Y.classList.contains("pi-inspector-overlay")||Y.classList.contains("pi-inspector-overlay-child"),bt=Y.id==="inspector-canvas-root";if(he||bt){const Ne=document.elementsFromPoint(J.clientX,J.clientY).find(ke=>{const Qe=ke;return Qe.id!=="inspector-canvas-root"&&!Qe.closest("[data-inspector-ignore]")});if(Ne)Y=Ne;else{Q(null);return}}else if(Y.closest("[data-inspector-ignore]")){Q(null);return}Q(me=>me===Y?me:Y)};return document.addEventListener("mousemove",P,!0),()=>document.removeEventListener("mousemove",P,!0)},[g,L]),h.useEffect(()=>{if(!g)return;const P=J=>{let Y=J.target;if(Y.closest&&Y.closest("[data-inspector-ignore]")){if(Y.closest("[data-inspector-controlbox]"))return;const Ne=Y.classList.contains("pi-inspector-overlay")||Y.classList.contains("pi-inspector-overlay-child"),ke=Y.id==="inspector-canvas-root";if(Ne||ke){const Ft=document.elementsFromPoint(J.clientX,J.clientY).find(tt=>{const Ct=tt;return Ct.id!=="inspector-canvas-root"&&!Ct.closest("[data-inspector-ignore]")});if(Ft)Y=Ft;else return}else return}if(Y instanceof SVGElement){let me=Y.parentElement;for(;me&&me instanceof SVGElement;)me=me.parentElement;if(me)Y=me;else return}if(L){if(window.__controlBoxDragging){J.preventDefault(),J.stopPropagation();return}if(B&&Y===B){B.isContentEditable&&B.focus();return}if(B&&B.contains(Y)&&Y!==B){if(J.preventDefault(),J.stopPropagation(),!Br(Y))return;if(Y!==B){if(y){window.dispatchEvent(new CustomEvent("inspector-pending-element-select",{detail:{element:Y}}));return}const me=et(Y),Ne=yo(J.clientX,J.clientY);Bt(Ne),R(Y),E(me),Pe(!0),Ce(!0),Ie("INSPECTOR_ELEMENT_SELECTED",me)}return}if(J.preventDefault(),J.stopPropagation(),!Br(Y))return;if(Y!==B){if(y){window.dispatchEvent(new CustomEvent("inspector-pending-element-select",{detail:{element:Y}}));return}const me=et(Y),Ne=yo(J.clientX,J.clientY);Bt(Ne),R(Y),E(me),Pe(!0),Ce(!0),Ie("INSPECTOR_ELEMENT_SELECTED",me)}return}if(J.preventDefault(),J.stopPropagation(),!Br(Y))return;const he=et(Y),bt=yo(J.clientX,J.clientY);Bt(bt),R(Y),E(he),Pe(!0),Ce(!0),Kt(),Ie("INSPECTOR_ELEMENT_SELECTED",he)};return document.addEventListener("click",P,!0),()=>document.removeEventListener("click",P,!0)},[g,L,B,Ie,v,y,et]),h.useEffect(()=>{g?document.body.style.cursor="crosshair":document.body.style.cursor=""},[g]);function Kt(){z(!0),document.body.style.overflow="hidden"}async function Fn(){z(!1),R(null),E(null),j(null),Bt([]),G(!1),xe(!1),Pe(!1),Ce(!1),document.body.style.overflow="",window.__styleEditorHasChanges=!1,window.__styleEditorSave=null}function $n(){u(),C(!1),z(!1),R(null),E(null),Q(null),j(null),Bt([]),G(!1),xe(!1),Pe(!1),Ce(!1),document.body.style.overflow="",document.body.style.cursor="",window.__styleEditorHasChanges=!1,window.__styleEditorSave=null,Ie("INSPECTOR_CLOSED",{})}const Or=h.useCallback(P=>{if(!Br(P))return;const J=et(P);R(P),E(J),Pe(!0),Ce(!0);const Y=P.getBoundingClientRect();Y.top>=0&&Y.bottom<=window.innerHeight||P.scrollIntoView({behavior:"smooth",block:"center"}),Ie("INSPECTOR_ELEMENT_SELECTED",J)},[Ie,v,y,et]),Hr=h.useCallback(P=>{Fn(),requestAnimationFrame(()=>{if(!Br(P))return;const J=et(P),Y=P.getBoundingClientRect(),he=Y.left+Y.width/2,bt=Y.top+Y.height/2,me=yo(he,bt);Bt(me),R(P),E(J),Pe(!0),Ce(!0),Kt(),Y.top>=0&&Y.bottom<=window.innerHeight||P.scrollIntoView({behavior:"smooth",block:"center"}),Ie("INSPECTOR_ELEMENT_SELECTED",J)})},[Ie,et]);function bn(P,J){const Y=typeof P=="object"?P.targetRoute:J?.targetRoute;if(Y&&Y!==window.location.pathname){window.history.pushState({},"",Y),window.dispatchEvent(new PopStateEvent("popstate")),setTimeout(()=>{bn(P,J)},300);return}let he=null;if(typeof P=="object"&&P!==null){if(P.id&&(he=ul(P.id)),(!he||he.getBoundingClientRect().width===0)&&P.selector){const me=document.querySelectorAll(P.selector);if(me.length===1)he=me[0];else if(me.length>1){for(const Ne of me){const ke=Ne.getBoundingClientRect();if(!(ke.width===0||ke.height===0)){if(P.textContent&&Ne.textContent?.trim()===P.textContent.trim()){he=Ne;break}if(P.position&&Math.abs(ke.top-P.position.top)<5&&Math.abs(ke.left-P.position.left)<5){he=Ne;break}}}if(!he)for(const Ne of me){const ke=Ne.getBoundingClientRect();if(ke.width>0&&ke.height>0){he=Ne;break}}}if(!he&&P.className){const Ne=P.className.split(" ").filter(Boolean);if(Ne.length>0){const ke=document.getElementsByClassName(Ne[0]);for(let Qe=0;Qe<ke.length;Qe++){const Ft=ke[Qe].getBoundingClientRect();if(Ft.width>0&&Ft.height>0){he=ke[Qe];break}}}}}}else if(typeof P=="string"){if(he=ul(P),!he)try{he=document.querySelector(P)}catch{}if(!he&&P.includes(".")){const me=P.split(".").filter(Boolean).join(" "),Ne=document.getElementsByClassName(me);Ne.length>0&&(he=Ne[0])}}if(!he)return;const bt=he.getBoundingClientRect();if((bt.width===0||bt.height===0)&&typeof P=="object"&&P.parents)for(const me of P.parents){let Ne=null;if(me.id&&(Ne=ul(me.id)),!Ne&&me.selector&&(Ne=document.querySelector(me.selector)),Ne){const ke=Ne.getBoundingClientRect();if(ke.width>0&&ke.height>0){he=Ne;break}}}k.current&&he instanceof HTMLElement&&(k.current?.highlight(he,{color:J?.color||"#4417db",duration:J?.duration||2e3}),J?.scrollIntoView!==!1&&he.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}))}function Ht(P){const J=ul(P);if(J&&J instanceof HTMLElement){const Y=et(J);Ie("ELEMENT_INFO_RESPONSE",Y)}else Ie("ELEMENT_INFO_RESPONSE",{error:"Element not found",inspectorId:P})}h.useEffect(()=>{if(L){const P=J=>{if(J.key==="Escape"&&J.ctrlKey&&J.shiftKey){$n();return}if(J.key==="Escape"){if(J.target.closest("#inspector-canvas-root"))return;Fn();return}};return document.addEventListener("keydown",P,{capture:!0}),()=>{document.removeEventListener("keydown",P,{capture:!0})}}},[L]),h.useEffect(()=>{if(!L)return;const P=()=>{};return window.addEventListener("scroll",P,{capture:!0,passive:!0}),()=>window.removeEventListener("scroll",P,{capture:!0})},[L]),h.useEffect(()=>{if(g&&!L){const P=J=>{J.key==="Escape"&&(J.preventDefault(),J.stopPropagation(),$n())};return document.addEventListener("keydown",P,{capture:!0}),()=>{document.removeEventListener("keydown",P,{capture:!0})}}},[g,L]);const Un=h.useCallback(P=>{Ie("INSPECTOR_PROMPT_SUBMITTED",{prompt:P,element:T}),C(!1),Fn()},[Ie,T]);return d.jsxs("div",{id:"inspector-canvas-root","data-inspector-ignore":!0,className:L?"pi-inspector-active":"",children:[d.jsx(of,{element:g?D:null,selectedElement:B,showChildBorders:_n}),B&&T&&d.jsx(Rp,{element:B,elementData:T,activeTab:_,availableTabs:Et,showActionsEditor:Ae,onTabChange:j,onClose:Fn,onPromptSubmit:Un,elementStack:sn,onElementSelect:Or,onFocusChild:Hr,labels:a,isLoading:Pr,allowEditForMultipleInstances:Xt,isDraggableEnabled:pr,isResizableEnabled:un}),d.jsx(Pp,{visible:Fe})]})}let vo=null,ln=null,Co=!1;function qp(){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
@@ -25402,7 +25402,7 @@ class KM {
25402
25402
  `, document.head.appendChild(h);
25403
25403
  }
25404
25404
  }
25405
- const ZM = "1.7.2", JM = {
25405
+ const ZM = "1.7.3", JM = {
25406
25406
  version: ZM
25407
25407
  }, Au = "data-dev-id", xg = (c) => c.replace(/\\/g, "/"), bg = (c) => {
25408
25408
  const p = typeof c == "string" ? c : c.id, h = p.replace(/\//g, "\\"), C = CSS.escape(h);
@@ -25588,8 +25588,8 @@ async function lz() {
25588
25588
  try {
25589
25589
  const c = window.ENV?.VITE_TENANT_UUID;
25590
25590
  if (!c) return !1;
25591
- const C = await (await fetch(
25592
- `https://testb.promake.ai/api/conversations/${c}/user-plan`
25591
+ const p = window.ENV?.VITE_PROMAKE_ENV || "testb", C = await (await fetch(
25592
+ `https://${p}.promake.ai/api/conversations/${c}/user-plan`
25593
25593
  )).json();
25594
25594
  return C.success && C.plan === "free";
25595
25595
  } catch {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@promakeai/inspector",
3
- "version": "1.7.2",
3
+ "version": "1.7.3",
4
4
  "description": "Visual element inspector React component with AI prompt support",
5
5
  "author": "Promake",
6
6
  "type": "module",