@refinedev/devtools 1.1.0 → 1.1.2

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.
Files changed (12) hide show
  1. package/dist/components/devtools-selector.d.ts.map +1 -1
  2. package/dist/esm/index.js +1 -1
  3. package/dist/esm/index.js.map +1 -1
  4. package/dist/iife/index.js +2 -2
  5. package/dist/iife/index.js.map +1 -1
  6. package/dist/index.js +1 -1
  7. package/dist/index.js.map +1 -1
  8. package/dist/panel.d.ts.map +1 -1
  9. package/package.json +4 -4
  10. package/src/components/devtools-selector.tsx +19 -11
  11. package/src/components/selector-hint.tsx +1 -1
  12. package/src/panel.tsx +1 -0
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var se=Object.create;var L=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var ue=(e,r)=>{for(var s in r)L(e,s,{get:r[s],enumerable:!0})},I=(e,r,s,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of ae(r))!pe.call(e,a)&&a!==s&&L(e,a,{get:()=>r[a],enumerable:!(n=le(r,a))||n.enumerable});return e};var C=(e,r,s)=>(s=e!=null?se(de(e)):{},I(r||!e||!e.__esModule?L(s,"default",{value:e,enumerable:!0}):s,e)),ce=e=>I(L({},"__esModule",{value:!0}),e);var ve={};ue(ve,{DevtoolsPanel:()=>oe,DevtoolsProvider:()=>ie});module.exports=ce(ve);var P=C(require("react"));var D=C(require("react"));var f=C(require("react")),V=({active:e,hovered:r,...s})=>f.default.createElement("svg",{width:42,height:42,viewBox:"0 0 42 42",fill:"none",xmlns:"http://www.w3.org/2000/svg",...s},f.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.3043 1.10851C19.2603 -0.369505 22.7397 -0.369505 25.6957 1.10851L36.1957 6.35852C39.753 8.13713 42 11.7729 42 15.75V26.25C42 30.2271 39.753 33.8629 36.1957 35.6415L25.6957 40.8915C22.7397 42.3695 19.2603 42.3695 16.3043 40.8915L5.80426 35.6415C2.24702 33.8629 0 30.2271 0 26.25V15.75C0 11.7729 2.24702 8.13713 5.80426 6.35852L16.3043 1.10851Z",fill:"#1D1E30"}),f.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14.7975 13.2C14.7975 9.77583 17.5733 7 20.9975 7C24.4217 7 27.1975 9.77583 27.1975 13.2V28.8C27.1975 32.2242 24.4217 35 20.9975 35C17.5733 35 14.7975 32.2242 14.7975 28.8V13.2ZM20.9975 8C18.1256 8 15.7975 10.3281 15.7975 13.2V28.8C15.7975 31.6719 18.1256 34 20.9975 34C23.8694 34 26.1975 31.6719 26.1975 28.8V13.2C26.1975 10.3281 23.8694 8 20.9975 8Z",fill:"url(#devtools_icon_gradient_1)"}),f.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.5279 2.05573C19.3431 0.648091 22.6569 0.648091 25.4721 2.05573L35.4721 7.05573C38.86 8.74965 41 12.2123 41 16V26C41 29.7877 38.86 33.2504 35.4721 34.9443L25.4721 39.9443C22.6569 41.3519 19.3431 41.3519 16.5279 39.9443L6.52786 34.9443C3.14002 33.2504 1 29.7877 1 26V16C1 12.2123 3.14002 8.74965 6.52786 7.05573L16.5279 2.05573ZM16.9751 2.95016C19.5088 1.68328 22.4912 1.68328 25.0249 2.95016L35.0249 7.95016C38.074 9.47468 40 12.5911 40 16V26C40 29.4089 38.074 32.5253 35.0249 34.0498L25.0249 39.0498C22.4912 40.3167 19.5088 40.3167 16.9751 39.0498L6.97508 34.0498C3.92602 32.5253 2 29.4089 2 26V16C2 12.5911 3.92602 9.47468 6.97508 7.95016L16.9751 2.95016Z",fill:"url(#devtools_icon_gradient_2)"}),f.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.9751 2.95016C19.5088 1.68328 22.4912 1.68328 25.0249 2.95016L35.0249 7.95016C38.074 9.47468 40 12.5911 40 16V26C40 29.4089 38.074 32.5253 35.0249 34.0498L25.0249 39.0498C22.4912 40.3167 19.5088 40.3167 16.9751 39.0498L6.97508 34.0498C3.92602 32.5253 2 29.4089 2 26V16C2 12.5911 3.92602 9.47468 6.97508 7.95016L16.9751 2.95016ZM20.9975 7C17.5733 7 14.7975 9.77583 14.7975 13.2V28.8C14.7975 32.2242 17.5733 35 20.9975 35C24.4217 35 27.1975 32.2242 27.1975 28.8V13.2C27.1975 9.77583 24.4217 7 20.9975 7Z",fill:"url(#devtools_icon_gradient_3)"}),f.default.createElement("circle",{cx:21,cy:13.3301,r:4,fill:"url(#devtools_icon_gradient_2)",style:{transition:"transform ease-in-out 0.2s",transform:`translateY(${e?"0":"15px"})`}}),f.default.createElement("defs",null,f.default.createElement("linearGradient",{id:"devtools_icon_gradient_1",x1:21,y1:7,x2:21,y2:35,gradientUnits:"userSpaceOnUse"},f.default.createElement("stop",{stopColor:"#47EBEB"}),f.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),f.default.createElement("linearGradient",{id:"devtools_icon_gradient_2",x1:21,y1:1,x2:21,y2:41,gradientUnits:"userSpaceOnUse"},f.default.createElement("stop",{stopColor:"#47EBEB"}),f.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.5}),f.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),f.default.createElement("radialGradient",{id:"devtools_icon_gradient_3",cx:0,cy:0,r:1,gradientUnits:"userSpaceOnUse",gradientTransform:"translate(21 1) rotate(90) scale(40)"},f.default.createElement("stop",{stopColor:"#47EBEB",stopOpacity:0}),f.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.25}),f.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5}))));var A=e=>e?"scaleX(1) translateY(0)":"scaleX(0) translateY(25vw)",y=50,x=10,me=()=>typeof window<"u"?window.innerWidth*.7:1440*.7,fe=()=>typeof window<"u"?window.innerHeight*.7:900*.7,X=640,z=360,G=`translateY(calc((100vh - ${y}px) / 2))`,W=`translateX(calc((100vw - ${y*2}px) / 2))`,he=`translateX(calc((100vw - ${y}px) - ${x}px))`,xe=`translateX(${x}px)`,ge=`translateY(${x}px)`,be=`translateY(calc((100vh - ${y}px) - 0px))`,Y=e=>{switch(e){case"left":return`${xe} ${G}`;case"right":return`${he} ${G}`;case"top":return`${ge} ${W}`;default:case"bottom":return`${be} ${W}`}},U=e=>`translateY(${e?"0":"50%"})`,_=e=>{switch(e){case"left":return{left:`calc(${y}px + ${x}px)`,top:"50%",transform:"translateY(-50%)"};case"right":return{right:`calc(${y}px + ${x}px)`,top:"50%",transform:"translateY(-50%)"};case"top":return{left:"50%",top:`calc(${y}px + ${x}px)`,transform:"translateX(-50%)"};default:case"bottom":return{left:"50%",bottom:`calc(${y}px + ${x}px)`,transform:"translateX(-50%)"}}},N=e=>{switch(e){case"left":case"right":return-x-y-x+(typeof window<"u"?window.innerWidth:1440)-x;case"top":case"bottom":return-x+(typeof window<"u"?window.innerWidth:1440)-x}},O=e=>{switch(e){case"left":case"right":return-x+(typeof window<"u"?window.innerHeight:900)-x;case"top":case"bottom":return-x-y-x+(typeof window<"u"?window.innerHeight:900)-x}},$=(e,r)=>{let s={width:me(),height:fe()},n=N(e),a=O(e),t=Math.min(n,(r??s).width),d=Math.min(a,(r??s).height);return{width:t,height:d}};var w=C(require("react")),Q=require("react-dom");var E=C(require("react")),Z=C(require("lodash/debounce")),b=require("@aliemir/dom-to-fiber-utils"),j=e=>{let[r,s]=E.default.useState([]);E.default.useEffect(()=>{e&&fetch("http://localhost:5001/api/unique-trace-items").then(i=>i.json().then(l=>s(l.data)))},[e]);let[n,a]=E.default.useState({stateNode:null,nameFiber:null}),[t,d]=E.default.useState({stateNode:null,nameFiber:null,derived:!1});E.default.useEffect(()=>e?()=>{a({stateNode:null,nameFiber:null}),d({stateNode:null,nameFiber:null,derived:!1})}:()=>0,[e]);let v=E.default.useCallback(i=>{let l=i,p,h,H=!1;for(;!H&&l;)p=(0,b.getFirstFiberHasName)(l),h=(0,b.getFirstStateNodeFiber)(p),H=r.includes((0,b.getNameFromFiber)(p)??""),H||(l=(0,b.getParentOfFiber)(l));return h&&p?{stateNode:h,nameFiber:p}:{stateNode:null,nameFiber:null}},[r]),g=E.default.useCallback(i=>{let l=(0,b.getFiberFromElement)(i);a(v(l))},[r]);E.default.useEffect(()=>{(t.stateNode!==n.stateNode||t.nameFiber!==n.nameFiber)&&d({stateNode:n.stateNode,nameFiber:n.nameFiber,derived:!1})},[n]);let c=E.default.useRef({rect:{width:0,height:0,x:0,y:0},name:""}),{rect:S,name:o}=E.default.useMemo(()=>{var i;if(!e)return{rect:{width:0,height:0,x:0,y:0},name:""};if(t.stateNode||t.nameFiber){let l=t.stateNode?(0,b.getElementFromFiber)(t.stateNode):null,p=t.nameFiber?(0,b.getNameFromFiber)(t.nameFiber):null;if(!l)return{rect:c.current.rect,name:p??c.current.name};let h=(i=l.getBoundingClientRect)==null?void 0:i.call(l);return h?{rect:{width:h.width,height:h.height,x:h.left,y:h.top},name:p??c.current.name}:{rect:c.current.rect,name:p??c.current.name}}return c.current},[t,e]);return c.current={rect:S,name:o},E.default.useEffect(()=>{if(e){let i=l=>{if(l.key==="Shift"&&t.stateNode){l.stopPropagation(),l.preventDefault();let p=(0,b.getParentOfFiber)(t.nameFiber),h=v(p);if(h.nameFiber&&h.stateNode){d({...h,derived:!0});return}}};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)}return()=>0},[t,e]),E.default.useEffect(()=>{if(e){let i=null,l=(0,Z.default)(p=>{if(p!=null&&p.target){if(i===p.target)return;g(p.target),i=p.target}},50);return document.addEventListener("mousemove",l),()=>document.removeEventListener("mousemove",l)}else return()=>0},[e,g]),{rect:S,name:o}};var u=C(require("react")),K=e=>u.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:42,height:42,viewBox:"0 0 42 42",fill:"none",...e},u.default.createElement("g",{clipPath:"url(#selector-button-a)"},u.default.createElement("path",{fill:"#1D1E30",fillRule:"evenodd",d:"M16.304 1.109a10.5 10.5 0 0 1 9.392 0l10.5 5.25A10.5 10.5 0 0 1 42 15.75v10.5a10.5 10.5 0 0 1-5.804 9.392l-10.5 5.25a10.5 10.5 0 0 1-9.392 0l-10.5-5.25A10.5 10.5 0 0 1 0 26.25v-10.5a10.5 10.5 0 0 1 5.804-9.391l10.5-5.25Z",clipRule:"evenodd"}),u.default.createElement("path",{fill:"url(#selector-button-b)",fillRule:"evenodd",d:"M16.528 2.056a10 10 0 0 1 8.944 0l10 5A10 10 0 0 1 41 16v10a10 10 0 0 1-5.528 8.944l-10 5a10 10 0 0 1-8.944 0l-10-5A10 10 0 0 1 1 26V16a10 10 0 0 1 5.528-8.944l10-5Zm.447.894a9 9 0 0 1 8.05 0l10 5A9 9 0 0 1 40 16v10a9 9 0 0 1-4.975 8.05l-10 5a9 9 0 0 1-8.05 0l-10-5A9 9 0 0 1 2 26V16a9 9 0 0 1 4.975-8.05l10-5Z",clipRule:"evenodd"}),u.default.createElement("path",{fill:"url(#selector-button-c)",fillRule:"evenodd",d:"M16.975 2.95a9 9 0 0 1 8.05 0l10 5A9 9 0 0 1 40 16v10a9 9 0 0 1-4.975 8.05l-10 5a9 9 0 0 1-8.05 0l-10-5A9 9 0 0 1 2 26V16a9 9 0 0 1 4.975-8.05l10-5Z",clipRule:"evenodd"}),u.default.createElement("path",{stroke:"url(#selector-button-d)",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M32 21c0 6.075-4.925 11-11 11m11-11c0-6.075-4.925-11-11-11m11 11h-4.4M21 32c-6.075 0-11-4.925-11-11m11 11v-4.4M10 21c0-6.075 4.925-11 11-11M10 21h4.4M21 10v4.4"})),u.default.createElement("defs",null,u.default.createElement("radialGradient",{id:"selector-button-c",cx:0,cy:0,r:1,gradientTransform:"matrix(0 40 -40 0 21 1)",gradientUnits:"userSpaceOnUse"},u.default.createElement("stop",{stopColor:"#47EBEB",stopOpacity:0}),u.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.25}),u.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),u.default.createElement("linearGradient",{id:"selector-button-b",x1:21,x2:21,y1:1,y2:41,gradientUnits:"userSpaceOnUse"},u.default.createElement("stop",{stopColor:"#47EBEB"}),u.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.5}),u.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),u.default.createElement("linearGradient",{id:"selector-button-d",x1:21,y1:1,x2:21,y2:41,gradientUnits:"userSpaceOnUse"},u.default.createElement("stop",{stopColor:"#47EBEB"}),u.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.75}),u.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),u.default.createElement("clipPath",{id:"selector-button-a"},u.default.createElement("path",{fill:"#fff",d:"M0 0h42v42H0z"}))));var k=C(require("react")),q=({width:e,height:r,x:s,y:n,name:a})=>{let t=n-6>25?"top":"bottom",d=s>7?"outside":"inside";return k.default.createElement("div",{id:"selector-box",style:{pointerEvents:"none",position:"fixed",opacity:a?1:0,transitionProperty:"width, height, transform, opacity",transitionDuration:"0.15s",transitionTimingFunction:"ease-out",border:"1.5px solid #47EBEB",borderRadius:"4px",borderTopLeftRadius:0,background:"rgba(37,160,160, 0.25)",backdropFilter:"sepia(30%) hue-rotate(180deg)",zIndex:99998,...d==="outside"?{left:-6,top:-6,width:e+10,height:r+10,transform:`translate(${s}px, ${n}px)`}:{left:0,top:0,width:e-10,height:r-20,transform:`translate(${s+4}px, ${n+4}px)`}}},k.default.createElement("div",{style:{position:"absolute",left:"-1.5px",background:"#1D1E30",padding:"4px 6px",border:"1.5px solid #47EBEB",fontSize:"13px",lineHeight:"16px",fontWeight:600,color:"#CFD7E2",display:a?"block":"none",...t==="top"?{top:"-27px",borderTopLeftRadius:"4px",borderTopRightRadius:"4px"}:{top:"-1.5px",borderBottomLeftRadius:"0",borderBottomRightRadius:"4px"}}},a))};var T=C(require("react")),J=({active:e,groupHover:r})=>T.default.createElement("div",{style:{pointerEvents:"none",position:"absolute",left:"calc(-50% - 100px - 14px)",top:"-50px",width:"200px",opacity:e?1:0,transform:r?"translateX(0)":"translateX(40px)",transitionDuration:"0.2s",transitionProperty:"transform,opacity",transitionTimingFunction:"ease-in-out",padding:"8px",fontSize:"10px",lineHeight:"12px",fontWeight:400,textShadow:"0 0 2px #1D1E30, 1px 0 2px #1D1E30, -1px 0 2px #1D1E30, 0 1px 2px #1D1E30, 0 -1px 2px #1D1E30"}},T.default.createElement("kbd",{style:{marginLeft:"4px",padding:"1px 2px",borderRadius:"2px",background:"whitesmoke",color:"dimgray",border:"0.5px solid silver",boxShadow:"0 1px 1px silver",textShadow:"none"}},"shift")," ","to move to parent.",T.default.createElement("kbd",{style:{marginLeft:"4px",padding:"1px 2px",borderRadius:"2px",background:"whitesmoke",color:"dimgray",border:"0.5px solid silver",boxShadow:"0 1px 1px silver",textShadow:"none"}},"space")," ","to highlight in monitor.");var R=({onSelectorOpen:e,onHighlight:r,groupHover:s})=>{let[n,a]=w.default.useState(!1),[t,d]=w.default.useState(!1),{rect:v,name:g}=j(n),[c,S]=w.default.useState(null);return w.default.useEffect(()=>{if(!c){let o=document.createElement("div");o.id="selector-box-root",document.body.appendChild(o),S(o)}},[]),w.default.useEffect(()=>{n?document.body.style.cursor="crosshair":document.body.style.cursor="default"},[n]),w.default.useEffect(()=>{let o=i=>{n&&g&&i.code==="Space"&&(i==null||i.preventDefault(),i==null||i.stopPropagation(),r(g),a(!1))};return document.addEventListener("keydown",o),()=>{document.removeEventListener("keydown",o)}},[g,r,n]),w.default.useEffect(()=>{n&&e()},[n,e]),w.default.createElement("div",{style:{position:"absolute",left:"calc((100px - ((100% - 42px) / 2)) + 7px)",top:"calc((100% - 28px) / 2)",transform:s?"translateX(0)":"translateX(-40px)",transitionDuration:"0.2s",transitionProperty:"transform,opacity",transitionTimingFunction:"ease-in-out",pointerEvents:s?"auto":"none",height:28,width:28}},w.default.createElement("div",{role:"button",title:"Element Selector",onMouseOver:()=>d(!0),onMouseOut:()=>d(!1),onClick:o=>{var i;o.preventDefault(),o.stopPropagation(),(i=document==null?void 0:document.activeElement)==null||i.blur(),a(l=>!l)},style:{width:28,height:28,border:"none",background:"none",outline:"none",margin:0,padding:0,cursor:"pointer",transform:`scale(${t?1.05:1})`,transitionProperty:"transform,opacity",transitionTimingFunction:"ease-in-out",transitionDuration:"0.1s",opacity:s?1:0}},w.default.createElement(K,{width:28,height:28,style:{pointerEvents:"none"}})),w.default.createElement(J,{active:n,groupHover:s}),n&&c&&(0,Q.createPortal)(w.default.createElement(q,{...v,name:g}),c))};var ee=({active:e,onClick:r,groupHover:s,onSelectorHighlight:n,onSelectorOpen:a})=>{let[t,d]=D.default.useState(!1);return D.default.createElement("button",{type:"button",style:{position:"relative",userSelect:"none",WebkitUserSelect:"none",background:"none",border:"none",padding:0,margin:0,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:"bold",color:"white",cursor:"pointer",width:"100%",height:"100%",transition:"all ease-in-out 0.2s",transform:`scale(${t?1.05:1}) ${U(s)}`,filter:`drop-shadow(0 0 ${t?"8px":"5px"} rgba(71, 235, 235, ${t?"0.5":"0.25"}))`},onMouseOver:()=>d(!0),onMouseOut:()=>d(!1),onClick:r},D.default.createElement(V,{active:e,hovered:t}),D.default.createElement(R,{onSelectorOpen:a,onHighlight:n,groupHover:t}))};var m=C(require("react"));var F=C(require("react")),B=e=>F.default.createElement("svg",{width:10,height:26,viewBox:"0 0 10 26",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},F.default.createElement("rect",{x:.5,y:.5,width:9,height:25,rx:4.5,fill:"#1D1E30"}),F.default.createElement("path",{d:"M7 5C7 6.10457 6.10457 7 5 7C3.89543 7 3 6.10457 3 5C3 3.89543 3.89543 3 5 3C6.10457 3 7 3.89543 7 5Z",fill:"#303450"}),F.default.createElement("path",{d:"M7 13C7 14.1046 6.10457 15 5 15C3.89543 15 3 14.1046 3 13C3 11.8954 3.89543 11 5 11C6.10457 11 7 11.8954 7 13Z",fill:"#303450"}),F.default.createElement("path",{d:"M7 21C7 22.1046 6.10457 23 5 23C3.89543 23 3 22.1046 3 21C3 19.8954 3.89543 19 5 19C6.10457 19 7 19.8954 7 21Z",fill:"#303450"}),F.default.createElement("rect",{x:.5,y:.5,width:9,height:25,rx:4.5,stroke:"#303450"}));var te=({placement:e,visible:r,children:s})=>{let[n,a]=m.default.useState(!1),[t,d]=m.default.useState(null),[v,g]=m.default.useState(null),[c,S]=m.default.useState($(e));return m.default.useEffect(()=>{let o=()=>{S(i=>$(e,i))};return o(),window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)}},[e]),m.default.useEffect(()=>{let o=()=>{d(null)};if(t!==null)return window.addEventListener("mouseup",o),()=>{window.removeEventListener("mouseup",o)}},[t]),m.default.useEffect(()=>{let o=document.body.style.cursor;return t!=null&&t.includes("x")?document.body.style.cursor="col-resize":t!=null&&t.includes("y")&&(document.body.style.cursor="row-resize"),()=>{document.body.style.cursor=o}},[t]),m.default.useEffect(()=>{let o=i=>{if((t==null?void 0:t[1])==="x"){let l=i.clientX-((v==null?void 0:v.x)??i.clientX),p=c.width+(t==="lx"?-l:l)*2;S(h=>({...h,width:Math.min(N(e),Math.max(X,p))}))}else if((t==null?void 0:t[1])==="y"){let l=i.clientY-((v==null?void 0:v.y)??i.clientY),p=c.height+(t==="ty"?-l:l)*1;S(h=>({...h,height:Math.min(O(e),Math.max(z,p))}))}};if(t!==null)return window.addEventListener("mousemove",o),()=>{window.removeEventListener("mousemove",o)}},[t,e]),m.default.createElement("div",{style:{position:"absolute",borderRadius:"8px",boxShadow:"0 0 10px rgba(0, 0, 0, 0.5)",border:"1px solid rgba(0, 0, 0, 0.5)",transitionProperty:"transform, opacity",transitionTimingFunction:"ease-in-out",transitionDuration:"0.2s",..._(e),opacity:r?1:0,transform:`${_(e).transform} ${A(r??!1)}`,...c},onMouseEnter:()=>{a(!0)},onMouseLeave:()=>{a(!1)}},s({resizing:t}),m.default.createElement(m.default.Fragment,null,m.default.createElement("div",{style:{position:"absolute",left:0,top:"50%",width:"10px",height:"26px",transform:"translateY(-13px) translateX(-5px)",cursor:"col-resize",transition:"opacity ease-in-out 0.2s",pointerEvents:n||t?"auto":"none",opacity:n||t?1:0},onMouseDown:o=>{d("lx"),g({x:o.clientX,y:o.clientY}),o.preventDefault()}},m.default.createElement(B,null)),m.default.createElement("div",{style:{position:"absolute",right:0,top:"50%",width:"10px",height:"26px",transform:"translateY(-13px) translateX(5px)",cursor:"col-resize",transition:"opacity ease-in-out 0.2s",pointerEvents:n||t?"auto":"none",opacity:n||t?1:0},onMouseDown:o=>{d("rx"),g({x:o.clientX,y:o.clientY}),o.preventDefault()}},m.default.createElement(B,null)),m.default.createElement("div",{style:{position:"absolute",left:"50%",top:0,width:"26px",height:"10px",transform:"translateY(-5px) translateX(-13px)",cursor:"row-resize",transition:"opacity ease-in-out 0.2s",pointerEvents:n||t?"auto":"none",opacity:n||t?1:0},onMouseDown:o=>{d("ty"),g({x:o.clientX,y:o.clientY}),o.preventDefault()}},m.default.createElement(B,{style:{transform:"rotate(90deg)",transformOrigin:"13px 13px"}})),m.default.createElement("div",{style:{position:"absolute",left:"50%",bottom:0,width:"26px",height:"10px",transform:"translateY(5px) translateX(-13px)",cursor:"row-resize",transition:"opacity ease-in-out 0.2s",pointerEvents:n||t?"auto":"none",opacity:n||t?1:0},onMouseDown:o=>{d("by"),g({x:o.clientX,y:o.clientY}),o.preventDefault()}},m.default.createElement(B,{style:{transform:"rotate(90deg)",transformOrigin:"13px 13px"}}))))};var M=require("@refinedev/devtools-shared"),oe=process.env.NODE_ENV!=="development"?()=>null:()=>{let[e,r]=P.default.useState(!1),[s]=P.default.useState("bottom"),{devtoolsUrl:n,ws:a}=P.default.useContext(M.DevToolsContext),[t,d]=P.default.useState(!1),v=P.default.useCallback(c=>{a&&(0,M.send)(a,M.DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR,{name:c}),r(!0)},[a]),g=P.default.useCallback(()=>{r(!1)},[]);return P.default.createElement("div",{style:{position:"fixed",left:0,top:0,zIndex:99999,width:`${y*2}px`,height:`${y}px`,transform:Y(s)},onMouseEnter:()=>d(!0),onMouseLeave:()=>d(!1)},P.default.createElement(ee,{active:e,onClick:()=>r(c=>!c),groupHover:t,onSelectorHighlight:v,onSelectorOpen:g}),P.default.createElement(te,{visible:e,placement:s},({resizing:c})=>P.default.createElement("iframe",{src:n,srcDoc:n?void 0:`
1
+ var se=Object.create;var L=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var ue=(e,r)=>{for(var s in r)L(e,s,{get:r[s],enumerable:!0})},I=(e,r,s,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of ae(r))!pe.call(e,a)&&a!==s&&L(e,a,{get:()=>r[a],enumerable:!(n=le(r,a))||n.enumerable});return e};var C=(e,r,s)=>(s=e!=null?se(de(e)):{},I(r||!e||!e.__esModule?L(s,"default",{value:e,enumerable:!0}):s,e)),ce=e=>I(L({},"__esModule",{value:!0}),e);var ve={};ue(ve,{DevtoolsPanel:()=>oe,DevtoolsProvider:()=>ie});module.exports=ce(ve);var P=C(require("react"));var D=C(require("react"));var f=C(require("react")),V=({active:e,hovered:r,...s})=>f.default.createElement("svg",{width:42,height:42,viewBox:"0 0 42 42",fill:"none",xmlns:"http://www.w3.org/2000/svg",...s},f.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.3043 1.10851C19.2603 -0.369505 22.7397 -0.369505 25.6957 1.10851L36.1957 6.35852C39.753 8.13713 42 11.7729 42 15.75V26.25C42 30.2271 39.753 33.8629 36.1957 35.6415L25.6957 40.8915C22.7397 42.3695 19.2603 42.3695 16.3043 40.8915L5.80426 35.6415C2.24702 33.8629 0 30.2271 0 26.25V15.75C0 11.7729 2.24702 8.13713 5.80426 6.35852L16.3043 1.10851Z",fill:"#1D1E30"}),f.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14.7975 13.2C14.7975 9.77583 17.5733 7 20.9975 7C24.4217 7 27.1975 9.77583 27.1975 13.2V28.8C27.1975 32.2242 24.4217 35 20.9975 35C17.5733 35 14.7975 32.2242 14.7975 28.8V13.2ZM20.9975 8C18.1256 8 15.7975 10.3281 15.7975 13.2V28.8C15.7975 31.6719 18.1256 34 20.9975 34C23.8694 34 26.1975 31.6719 26.1975 28.8V13.2C26.1975 10.3281 23.8694 8 20.9975 8Z",fill:"url(#devtools_icon_gradient_1)"}),f.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.5279 2.05573C19.3431 0.648091 22.6569 0.648091 25.4721 2.05573L35.4721 7.05573C38.86 8.74965 41 12.2123 41 16V26C41 29.7877 38.86 33.2504 35.4721 34.9443L25.4721 39.9443C22.6569 41.3519 19.3431 41.3519 16.5279 39.9443L6.52786 34.9443C3.14002 33.2504 1 29.7877 1 26V16C1 12.2123 3.14002 8.74965 6.52786 7.05573L16.5279 2.05573ZM16.9751 2.95016C19.5088 1.68328 22.4912 1.68328 25.0249 2.95016L35.0249 7.95016C38.074 9.47468 40 12.5911 40 16V26C40 29.4089 38.074 32.5253 35.0249 34.0498L25.0249 39.0498C22.4912 40.3167 19.5088 40.3167 16.9751 39.0498L6.97508 34.0498C3.92602 32.5253 2 29.4089 2 26V16C2 12.5911 3.92602 9.47468 6.97508 7.95016L16.9751 2.95016Z",fill:"url(#devtools_icon_gradient_2)"}),f.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.9751 2.95016C19.5088 1.68328 22.4912 1.68328 25.0249 2.95016L35.0249 7.95016C38.074 9.47468 40 12.5911 40 16V26C40 29.4089 38.074 32.5253 35.0249 34.0498L25.0249 39.0498C22.4912 40.3167 19.5088 40.3167 16.9751 39.0498L6.97508 34.0498C3.92602 32.5253 2 29.4089 2 26V16C2 12.5911 3.92602 9.47468 6.97508 7.95016L16.9751 2.95016ZM20.9975 7C17.5733 7 14.7975 9.77583 14.7975 13.2V28.8C14.7975 32.2242 17.5733 35 20.9975 35C24.4217 35 27.1975 32.2242 27.1975 28.8V13.2C27.1975 9.77583 24.4217 7 20.9975 7Z",fill:"url(#devtools_icon_gradient_3)"}),f.default.createElement("circle",{cx:21,cy:13.3301,r:4,fill:"url(#devtools_icon_gradient_2)",style:{transition:"transform ease-in-out 0.2s",transform:`translateY(${e?"0":"15px"})`}}),f.default.createElement("defs",null,f.default.createElement("linearGradient",{id:"devtools_icon_gradient_1",x1:21,y1:7,x2:21,y2:35,gradientUnits:"userSpaceOnUse"},f.default.createElement("stop",{stopColor:"#47EBEB"}),f.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),f.default.createElement("linearGradient",{id:"devtools_icon_gradient_2",x1:21,y1:1,x2:21,y2:41,gradientUnits:"userSpaceOnUse"},f.default.createElement("stop",{stopColor:"#47EBEB"}),f.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.5}),f.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),f.default.createElement("radialGradient",{id:"devtools_icon_gradient_3",cx:0,cy:0,r:1,gradientUnits:"userSpaceOnUse",gradientTransform:"translate(21 1) rotate(90) scale(40)"},f.default.createElement("stop",{stopColor:"#47EBEB",stopOpacity:0}),f.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.25}),f.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5}))));var A=e=>e?"scaleX(1) translateY(0)":"scaleX(0) translateY(25vw)",y=50,x=10,me=()=>typeof window<"u"?window.innerWidth*.7:1440*.7,fe=()=>typeof window<"u"?window.innerHeight*.7:900*.7,X=640,z=360,G=`translateY(calc((100vh - ${y}px) / 2))`,W=`translateX(calc((100vw - ${y*2}px) / 2))`,he=`translateX(calc((100vw - ${y}px) - ${x}px))`,xe=`translateX(${x}px)`,ge=`translateY(${x}px)`,be=`translateY(calc((100vh - ${y}px) - 0px))`,Y=e=>{switch(e){case"left":return`${xe} ${G}`;case"right":return`${he} ${G}`;case"top":return`${ge} ${W}`;default:case"bottom":return`${be} ${W}`}},U=e=>`translateY(${e?"0":"50%"})`,_=e=>{switch(e){case"left":return{left:`calc(${y}px + ${x}px)`,top:"50%",transform:"translateY(-50%)"};case"right":return{right:`calc(${y}px + ${x}px)`,top:"50%",transform:"translateY(-50%)"};case"top":return{left:"50%",top:`calc(${y}px + ${x}px)`,transform:"translateX(-50%)"};default:case"bottom":return{left:"50%",bottom:`calc(${y}px + ${x}px)`,transform:"translateX(-50%)"}}},N=e=>{switch(e){case"left":case"right":return-x-y-x+(typeof window<"u"?window.innerWidth:1440)-x;case"top":case"bottom":return-x+(typeof window<"u"?window.innerWidth:1440)-x}},O=e=>{switch(e){case"left":case"right":return-x+(typeof window<"u"?window.innerHeight:900)-x;case"top":case"bottom":return-x-y-x+(typeof window<"u"?window.innerHeight:900)-x}},$=(e,r)=>{let s={width:me(),height:fe()},n=N(e),a=O(e),t=Math.min(n,(r??s).width),d=Math.min(a,(r??s).height);return{width:t,height:d}};var w=C(require("react")),Q=require("react-dom");var E=C(require("react")),Z=C(require("lodash/debounce")),b=require("@aliemir/dom-to-fiber-utils"),j=e=>{let[r,s]=E.default.useState([]);E.default.useEffect(()=>{e&&fetch("http://localhost:5001/api/unique-trace-items").then(i=>i.json().then(l=>s(l.data)))},[e]);let[n,a]=E.default.useState({stateNode:null,nameFiber:null}),[t,d]=E.default.useState({stateNode:null,nameFiber:null,derived:!1});E.default.useEffect(()=>e?()=>{a({stateNode:null,nameFiber:null}),d({stateNode:null,nameFiber:null,derived:!1})}:()=>0,[e]);let v=E.default.useCallback(i=>{let l=i,p,h,H=!1;for(;!H&&l;)p=(0,b.getFirstFiberHasName)(l),h=(0,b.getFirstStateNodeFiber)(p),H=r.includes((0,b.getNameFromFiber)(p)??""),H||(l=(0,b.getParentOfFiber)(l));return h&&p?{stateNode:h,nameFiber:p}:{stateNode:null,nameFiber:null}},[r]),g=E.default.useCallback(i=>{let l=(0,b.getFiberFromElement)(i);a(v(l))},[r]);E.default.useEffect(()=>{(t.stateNode!==n.stateNode||t.nameFiber!==n.nameFiber)&&d({stateNode:n.stateNode,nameFiber:n.nameFiber,derived:!1})},[n]);let c=E.default.useRef({rect:{width:0,height:0,x:0,y:0},name:""}),{rect:S,name:o}=E.default.useMemo(()=>{var i;if(!e)return{rect:{width:0,height:0,x:0,y:0},name:""};if(t.stateNode||t.nameFiber){let l=t.stateNode?(0,b.getElementFromFiber)(t.stateNode):null,p=t.nameFiber?(0,b.getNameFromFiber)(t.nameFiber):null;if(!l)return{rect:c.current.rect,name:p??c.current.name};let h=(i=l.getBoundingClientRect)==null?void 0:i.call(l);return h?{rect:{width:h.width,height:h.height,x:h.left,y:h.top},name:p??c.current.name}:{rect:c.current.rect,name:p??c.current.name}}return c.current},[t,e]);return c.current={rect:S,name:o},E.default.useEffect(()=>{if(e){let i=l=>{if(l.key==="Shift"&&t.stateNode){l.stopPropagation(),l.preventDefault();let p=(0,b.getParentOfFiber)(t.nameFiber),h=v(p);if(h.nameFiber&&h.stateNode){d({...h,derived:!0});return}}};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)}return()=>0},[t,e]),E.default.useEffect(()=>{if(e){let i=null,l=(0,Z.default)(p=>{if(p!=null&&p.target){if(i===p.target)return;g(p.target),i=p.target}},50);return document.addEventListener("mousemove",l),()=>document.removeEventListener("mousemove",l)}else return()=>0},[e,g]),{rect:S,name:o}};var u=C(require("react")),q=e=>u.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:42,height:42,viewBox:"0 0 42 42",fill:"none",...e},u.default.createElement("g",{clipPath:"url(#selector-button-a)"},u.default.createElement("path",{fill:"#1D1E30",fillRule:"evenodd",d:"M16.304 1.109a10.5 10.5 0 0 1 9.392 0l10.5 5.25A10.5 10.5 0 0 1 42 15.75v10.5a10.5 10.5 0 0 1-5.804 9.392l-10.5 5.25a10.5 10.5 0 0 1-9.392 0l-10.5-5.25A10.5 10.5 0 0 1 0 26.25v-10.5a10.5 10.5 0 0 1 5.804-9.391l10.5-5.25Z",clipRule:"evenodd"}),u.default.createElement("path",{fill:"url(#selector-button-b)",fillRule:"evenodd",d:"M16.528 2.056a10 10 0 0 1 8.944 0l10 5A10 10 0 0 1 41 16v10a10 10 0 0 1-5.528 8.944l-10 5a10 10 0 0 1-8.944 0l-10-5A10 10 0 0 1 1 26V16a10 10 0 0 1 5.528-8.944l10-5Zm.447.894a9 9 0 0 1 8.05 0l10 5A9 9 0 0 1 40 16v10a9 9 0 0 1-4.975 8.05l-10 5a9 9 0 0 1-8.05 0l-10-5A9 9 0 0 1 2 26V16a9 9 0 0 1 4.975-8.05l10-5Z",clipRule:"evenodd"}),u.default.createElement("path",{fill:"url(#selector-button-c)",fillRule:"evenodd",d:"M16.975 2.95a9 9 0 0 1 8.05 0l10 5A9 9 0 0 1 40 16v10a9 9 0 0 1-4.975 8.05l-10 5a9 9 0 0 1-8.05 0l-10-5A9 9 0 0 1 2 26V16a9 9 0 0 1 4.975-8.05l10-5Z",clipRule:"evenodd"}),u.default.createElement("path",{stroke:"url(#selector-button-d)",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M32 21c0 6.075-4.925 11-11 11m11-11c0-6.075-4.925-11-11-11m11 11h-4.4M21 32c-6.075 0-11-4.925-11-11m11 11v-4.4M10 21c0-6.075 4.925-11 11-11M10 21h4.4M21 10v4.4"})),u.default.createElement("defs",null,u.default.createElement("radialGradient",{id:"selector-button-c",cx:0,cy:0,r:1,gradientTransform:"matrix(0 40 -40 0 21 1)",gradientUnits:"userSpaceOnUse"},u.default.createElement("stop",{stopColor:"#47EBEB",stopOpacity:0}),u.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.25}),u.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),u.default.createElement("linearGradient",{id:"selector-button-b",x1:21,x2:21,y1:1,y2:41,gradientUnits:"userSpaceOnUse"},u.default.createElement("stop",{stopColor:"#47EBEB"}),u.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.5}),u.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),u.default.createElement("linearGradient",{id:"selector-button-d",x1:21,y1:1,x2:21,y2:41,gradientUnits:"userSpaceOnUse"},u.default.createElement("stop",{stopColor:"#47EBEB"}),u.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.75}),u.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),u.default.createElement("clipPath",{id:"selector-button-a"},u.default.createElement("path",{fill:"#fff",d:"M0 0h42v42H0z"}))));var k=C(require("react")),K=({width:e,height:r,x:s,y:n,name:a})=>{let t=n-6>25?"top":"bottom",d=s>7?"outside":"inside";return k.default.createElement("div",{id:"selector-box",style:{pointerEvents:"none",position:"fixed",opacity:a?1:0,transitionProperty:"width, height, transform, opacity",transitionDuration:"0.15s",transitionTimingFunction:"ease-out",border:"1.5px solid #47EBEB",borderRadius:"4px",borderTopLeftRadius:0,background:"rgba(37,160,160, 0.25)",backdropFilter:"sepia(30%) hue-rotate(180deg)",zIndex:99998,...d==="outside"?{left:-6,top:-6,width:e+10,height:r+10,transform:`translate(${s}px, ${n}px)`}:{left:0,top:0,width:e-10,height:r-20,transform:`translate(${s+4}px, ${n+4}px)`}}},k.default.createElement("div",{style:{position:"absolute",left:"-1.5px",background:"#1D1E30",padding:"4px 6px",border:"1.5px solid #47EBEB",fontSize:"13px",lineHeight:"16px",fontWeight:600,color:"#CFD7E2",display:a?"block":"none",...t==="top"?{top:"-27px",borderTopLeftRadius:"4px",borderTopRightRadius:"4px"}:{top:"-1.5px",borderBottomLeftRadius:"0",borderBottomRightRadius:"4px"}}},a))};var T=C(require("react")),J=({active:e,groupHover:r})=>T.default.createElement("div",{style:{pointerEvents:"none",position:"absolute",left:"calc(-50% - 100px - 14px)",top:"-50px",width:"200px",opacity:e?1:0,transform:r?"translateX(0)":"translateX(40px)",transitionDuration:"0.2s",transitionProperty:"transform,opacity",transitionTimingFunction:"ease-in-out",padding:"8px",fontSize:"10px",lineHeight:"12px",fontWeight:400,textShadow:"0 0 2px #1D1E30, 1px 0 2px #1D1E30, -1px 0 2px #1D1E30, 0 1px 2px #1D1E30, 0 -1px 2px #1D1E30"}},T.default.createElement("kbd",{style:{marginLeft:"4px",padding:"1px 2px",borderRadius:"2px",background:"whitesmoke",color:"dimgray",border:"0.5px solid silver",boxShadow:"0 1px 1px silver",textShadow:"none"}},"shift")," ","to move to parent.",T.default.createElement("kbd",{style:{marginLeft:"4px",padding:"1px 2px",borderRadius:"2px",background:"whitesmoke",color:"dimgray",border:"0.5px solid silver",boxShadow:"0 1px 1px silver",textShadow:"none"}},"click")," ","to highlight in monitor.");var R=({onSelectorOpen:e,onHighlight:r,groupHover:s})=>{let[n,a]=w.default.useState(!1),[t,d]=w.default.useState(!1),{rect:v,name:g}=j(n),[c,S]=w.default.useState(null);return w.default.useEffect(()=>{if(!c){let o=document.createElement("div");o.id="selector-box-root",document.body.appendChild(o),S(o)}},[]),w.default.useEffect(()=>{n?document.body.style.cursor="crosshair":document.body.style.cursor="default"},[n]),w.default.useEffect(()=>{let o=i=>{n&&g&&(i==null||i.preventDefault(),i==null||i.stopPropagation(),i.stopImmediatePropagation(),r(g),a(!1))};return n?(document.addEventListener("click",o,{capture:!0}),()=>{document.removeEventListener("click",o,{capture:!0})}):()=>0},[g,r,n]),w.default.useEffect(()=>{n&&e()},[n,e]),w.default.createElement("div",{style:{position:"absolute",left:"calc((100px - ((100% - 42px) / 2)) + 7px)",top:"calc((100% - 28px) / 2)",transform:s?"translateX(0)":"translateX(-40px)",transitionDuration:"0.2s",transitionProperty:"transform,opacity",transitionTimingFunction:"ease-in-out",pointerEvents:s?"auto":"none",height:28,width:28}},w.default.createElement("div",{role:"button",title:"Element Selector",onMouseOver:()=>d(!0),onMouseOut:()=>d(!1),onClick:o=>{var i;o.preventDefault(),o.stopPropagation(),(i=document==null?void 0:document.activeElement)==null||i.blur(),a(l=>!l)},style:{width:28,height:28,border:"none",background:"none",outline:"none",margin:0,padding:0,cursor:"pointer",transform:`scale(${t?1.05:1})`,transitionProperty:"transform,opacity",transitionTimingFunction:"ease-in-out",transitionDuration:"0.1s",opacity:s?1:0}},w.default.createElement(q,{width:28,height:28,style:{pointerEvents:"none"}})),w.default.createElement(J,{active:n,groupHover:s}),n&&c&&(0,Q.createPortal)(w.default.createElement(K,{...v,name:g}),c))};var ee=({active:e,onClick:r,groupHover:s,onSelectorHighlight:n,onSelectorOpen:a})=>{let[t,d]=D.default.useState(!1);return D.default.createElement("button",{type:"button",style:{position:"relative",userSelect:"none",WebkitUserSelect:"none",background:"none",border:"none",padding:0,margin:0,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:"bold",color:"white",cursor:"pointer",width:"100%",height:"100%",transition:"all ease-in-out 0.2s",transform:`scale(${t?1.05:1}) ${U(s)}`,filter:`drop-shadow(0 0 ${t?"8px":"5px"} rgba(71, 235, 235, ${t?"0.5":"0.25"}))`},onMouseOver:()=>d(!0),onMouseOut:()=>d(!1),onClick:r},D.default.createElement(V,{active:e,hovered:t}),D.default.createElement(R,{onSelectorOpen:a,onHighlight:n,groupHover:t}))};var m=C(require("react"));var F=C(require("react")),B=e=>F.default.createElement("svg",{width:10,height:26,viewBox:"0 0 10 26",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},F.default.createElement("rect",{x:.5,y:.5,width:9,height:25,rx:4.5,fill:"#1D1E30"}),F.default.createElement("path",{d:"M7 5C7 6.10457 6.10457 7 5 7C3.89543 7 3 6.10457 3 5C3 3.89543 3.89543 3 5 3C6.10457 3 7 3.89543 7 5Z",fill:"#303450"}),F.default.createElement("path",{d:"M7 13C7 14.1046 6.10457 15 5 15C3.89543 15 3 14.1046 3 13C3 11.8954 3.89543 11 5 11C6.10457 11 7 11.8954 7 13Z",fill:"#303450"}),F.default.createElement("path",{d:"M7 21C7 22.1046 6.10457 23 5 23C3.89543 23 3 22.1046 3 21C3 19.8954 3.89543 19 5 19C6.10457 19 7 19.8954 7 21Z",fill:"#303450"}),F.default.createElement("rect",{x:.5,y:.5,width:9,height:25,rx:4.5,stroke:"#303450"}));var te=({placement:e,visible:r,children:s})=>{let[n,a]=m.default.useState(!1),[t,d]=m.default.useState(null),[v,g]=m.default.useState(null),[c,S]=m.default.useState($(e));return m.default.useEffect(()=>{let o=()=>{S(i=>$(e,i))};return o(),window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)}},[e]),m.default.useEffect(()=>{let o=()=>{d(null)};if(t!==null)return window.addEventListener("mouseup",o),()=>{window.removeEventListener("mouseup",o)}},[t]),m.default.useEffect(()=>{let o=document.body.style.cursor;return t!=null&&t.includes("x")?document.body.style.cursor="col-resize":t!=null&&t.includes("y")&&(document.body.style.cursor="row-resize"),()=>{document.body.style.cursor=o}},[t]),m.default.useEffect(()=>{let o=i=>{if((t==null?void 0:t[1])==="x"){let l=i.clientX-((v==null?void 0:v.x)??i.clientX),p=c.width+(t==="lx"?-l:l)*2;S(h=>({...h,width:Math.min(N(e),Math.max(X,p))}))}else if((t==null?void 0:t[1])==="y"){let l=i.clientY-((v==null?void 0:v.y)??i.clientY),p=c.height+(t==="ty"?-l:l)*1;S(h=>({...h,height:Math.min(O(e),Math.max(z,p))}))}};if(t!==null)return window.addEventListener("mousemove",o),()=>{window.removeEventListener("mousemove",o)}},[t,e]),m.default.createElement("div",{style:{position:"absolute",borderRadius:"8px",boxShadow:"0 0 10px rgba(0, 0, 0, 0.5)",border:"1px solid rgba(0, 0, 0, 0.5)",transitionProperty:"transform, opacity",transitionTimingFunction:"ease-in-out",transitionDuration:"0.2s",..._(e),opacity:r?1:0,transform:`${_(e).transform} ${A(r??!1)}`,...c},onMouseEnter:()=>{a(!0)},onMouseLeave:()=>{a(!1)}},s({resizing:t}),m.default.createElement(m.default.Fragment,null,m.default.createElement("div",{style:{position:"absolute",left:0,top:"50%",width:"10px",height:"26px",transform:"translateY(-13px) translateX(-5px)",cursor:"col-resize",transition:"opacity ease-in-out 0.2s",pointerEvents:n||t?"auto":"none",opacity:n||t?1:0},onMouseDown:o=>{d("lx"),g({x:o.clientX,y:o.clientY}),o.preventDefault()}},m.default.createElement(B,null)),m.default.createElement("div",{style:{position:"absolute",right:0,top:"50%",width:"10px",height:"26px",transform:"translateY(-13px) translateX(5px)",cursor:"col-resize",transition:"opacity ease-in-out 0.2s",pointerEvents:n||t?"auto":"none",opacity:n||t?1:0},onMouseDown:o=>{d("rx"),g({x:o.clientX,y:o.clientY}),o.preventDefault()}},m.default.createElement(B,null)),m.default.createElement("div",{style:{position:"absolute",left:"50%",top:0,width:"26px",height:"10px",transform:"translateY(-5px) translateX(-13px)",cursor:"row-resize",transition:"opacity ease-in-out 0.2s",pointerEvents:n||t?"auto":"none",opacity:n||t?1:0},onMouseDown:o=>{d("ty"),g({x:o.clientX,y:o.clientY}),o.preventDefault()}},m.default.createElement(B,{style:{transform:"rotate(90deg)",transformOrigin:"13px 13px"}})),m.default.createElement("div",{style:{position:"absolute",left:"50%",bottom:0,width:"26px",height:"10px",transform:"translateY(5px) translateX(-13px)",cursor:"row-resize",transition:"opacity ease-in-out 0.2s",pointerEvents:n||t?"auto":"none",opacity:n||t?1:0},onMouseDown:o=>{d("by"),g({x:o.clientX,y:o.clientY}),o.preventDefault()}},m.default.createElement(B,{style:{transform:"rotate(90deg)",transformOrigin:"13px 13px"}}))))};var M=require("@refinedev/devtools-shared"),oe=process.env.NODE_ENV!=="development"?()=>null:()=>{let[e,r]=P.default.useState(!1),[s]=P.default.useState("bottom"),{devtoolsUrl:n,ws:a}=P.default.useContext(M.DevToolsContext),[t,d]=P.default.useState(!1),v=P.default.useCallback(c=>{a&&(0,M.send)(a,M.DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR,{name:c}),r(!0)},[a]),g=P.default.useCallback(()=>{r(!1)},[]);return P.default.createElement("div",{style:{position:"fixed",left:0,top:0,zIndex:99999,width:`${y*2}px`,height:`${y}px`,transform:Y(s)},onMouseEnter:()=>d(!0),onMouseLeave:()=>d(!1)},P.default.createElement(ee,{active:e,onClick:()=>r(c=>!c),groupHover:t,onSelectorHighlight:v,onSelectorOpen:g}),P.default.createElement(te,{visible:e,placement:s},({resizing:c})=>P.default.createElement("iframe",{allow:"clipboard-write;",src:n,srcDoc:n?void 0:`
2
2
  <html style="height:100%;padding:0;margin:0;">
3
3
  <body style="display:flex;justify-content:center;height:100%;padding:24px;margin:0;align-items:center;box-sizing:border-box;">
4
4
  <h1 style="font-family:ui-monospace,monospace;color:#CFD7E2;text-align:center;">Could not connect to the devtools server</h1>
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/panel.tsx","../src/components/devtools-pin.tsx","../src/components/icons/devtools-icon.tsx","../src/utilities/index.ts","../src/components/devtools-selector.tsx","../src/utilities/use-selector.tsx","../src/components/icons/selector-button.tsx","../src/components/selector-box.tsx","../src/components/selector-hint.tsx","../src/components/resizable-pane.tsx","../src/components/icons/resize-handle-icon.tsx","../src/provider.tsx"],"sourcesContent":["export { DevtoolsPanel } from \"./panel\";\nexport { DevtoolsProvider } from \"./provider\";\n","import React from \"react\";\nimport { DevtoolsPin } from \"./components/devtools-pin\";\nimport { ResizablePane } from \"./components/resizable-pane\";\n\nimport { SIZE, getPinTransform } from \"./utilities\";\n\nimport { Placement } from \"./interfaces/placement\";\nimport {\n DevToolsContext,\n DevtoolsEvent,\n send,\n} from \"@refinedev/devtools-shared\";\n\nexport const DevtoolsPanel =\n __DEV_CONDITION__ !== \"development\"\n ? () => null\n : () => {\n const [visible, setVisible] = React.useState(false);\n const [placement] = React.useState<Placement>(\"bottom\");\n const { devtoolsUrl, ws } = React.useContext(DevToolsContext);\n const [hover, setHover] = React.useState(false);\n\n const onSelectorHighlight = React.useCallback(\n (name: string) => {\n if (ws) {\n send(\n ws,\n DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR,\n {\n name,\n },\n );\n }\n setVisible(true);\n },\n [ws],\n );\n\n const onSelectorOpen = React.useCallback(() => {\n setVisible(false);\n }, []);\n\n return (\n <div\n style={{\n position: \"fixed\",\n left: 0,\n top: 0,\n zIndex: 99999,\n width: `${SIZE * 2}px`,\n height: `${SIZE}px`,\n\n transform: getPinTransform(placement),\n }}\n onMouseEnter={() => setHover(true)}\n onMouseLeave={() => setHover(false)}\n >\n <DevtoolsPin\n active={visible}\n onClick={() => setVisible((v) => !v)}\n groupHover={hover}\n onSelectorHighlight={onSelectorHighlight}\n onSelectorOpen={onSelectorOpen}\n />\n <ResizablePane visible={visible} placement={placement}>\n {({ resizing }) => (\n <iframe\n src={devtoolsUrl}\n srcDoc={\n devtoolsUrl\n ? undefined\n : `\n <html style=\"height:100%;padding:0;margin:0;\">\n <body style=\"display:flex;justify-content:center;height:100%;padding:24px;margin:0;align-items:center;box-sizing:border-box;\">\n <h1 style=\"font-family:ui-monospace,monospace;color:#CFD7E2;text-align:center;\">Could not connect to the devtools server</h1>\n </body>\n </html>\n `\n }\n style={{\n width: \"100%\",\n height: \"100%\",\n border: \"none\",\n borderRadius: \"7px\",\n pointerEvents: resizing ? \"none\" : \"auto\",\n background: \"#14141F\",\n }}\n />\n )}\n </ResizablePane>\n </div>\n );\n };\n","import React from \"react\";\nimport { RefineDevtoolsIcon } from \"./icons/devtools-icon\";\nimport { getPinButtonTransform } from \"src/utilities\";\nimport { DevtoolsSelector } from \"./devtools-selector\";\n\ntype Props = {\n onClick?: () => void;\n active?: boolean;\n groupHover?: boolean;\n onSelectorHighlight: (name: string) => void;\n onSelectorOpen: () => void;\n};\n\nexport const DevtoolsPin = ({\n active,\n onClick,\n groupHover,\n onSelectorHighlight,\n onSelectorOpen,\n}: Props) => {\n const [hover, setHover] = React.useState(false);\n\n return (\n <button\n type=\"button\"\n style={{\n position: \"relative\",\n userSelect: \"none\",\n WebkitUserSelect: \"none\",\n background: \"none\",\n border: \"none\",\n padding: 0,\n margin: 0,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontWeight: \"bold\",\n color: \"white\",\n cursor: \"pointer\",\n width: \"100%\",\n height: \"100%\",\n transition: \"all ease-in-out 0.2s\",\n transform: `scale(${hover ? 1.05 : 1}) ${getPinButtonTransform(\n groupHover,\n )}`,\n filter: `drop-shadow(0 0 ${\n hover ? \"8px\" : \"5px\"\n } rgba(71, 235, 235, ${hover ? \"0.5\" : \"0.25\"}))`,\n }}\n onMouseOver={() => setHover(true)}\n onMouseOut={() => setHover(false)}\n onClick={onClick}\n >\n <RefineDevtoolsIcon active={active} hovered={hover} />\n <DevtoolsSelector\n onSelectorOpen={onSelectorOpen}\n onHighlight={onSelectorHighlight}\n groupHover={hover}\n />\n </button>\n );\n};\n","import React from \"react\";\n\ntype Props = React.SVGProps<SVGSVGElement> & {\n active?: boolean;\n hovered?: boolean;\n};\n\nexport const RefineDevtoolsIcon = ({ active, hovered, ...props }: Props) => (\n <svg\n width={42}\n height={42}\n viewBox=\"0 0 42 42\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M16.3043 1.10851C19.2603 -0.369505 22.7397 -0.369505 25.6957 1.10851L36.1957 6.35852C39.753 8.13713 42 11.7729 42 15.75V26.25C42 30.2271 39.753 33.8629 36.1957 35.6415L25.6957 40.8915C22.7397 42.3695 19.2603 42.3695 16.3043 40.8915L5.80426 35.6415C2.24702 33.8629 0 30.2271 0 26.25V15.75C0 11.7729 2.24702 8.13713 5.80426 6.35852L16.3043 1.10851Z\"\n fill=\"#1D1E30\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M14.7975 13.2C14.7975 9.77583 17.5733 7 20.9975 7C24.4217 7 27.1975 9.77583 27.1975 13.2V28.8C27.1975 32.2242 24.4217 35 20.9975 35C17.5733 35 14.7975 32.2242 14.7975 28.8V13.2ZM20.9975 8C18.1256 8 15.7975 10.3281 15.7975 13.2V28.8C15.7975 31.6719 18.1256 34 20.9975 34C23.8694 34 26.1975 31.6719 26.1975 28.8V13.2C26.1975 10.3281 23.8694 8 20.9975 8Z\"\n fill=\"url(#devtools_icon_gradient_1)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M16.5279 2.05573C19.3431 0.648091 22.6569 0.648091 25.4721 2.05573L35.4721 7.05573C38.86 8.74965 41 12.2123 41 16V26C41 29.7877 38.86 33.2504 35.4721 34.9443L25.4721 39.9443C22.6569 41.3519 19.3431 41.3519 16.5279 39.9443L6.52786 34.9443C3.14002 33.2504 1 29.7877 1 26V16C1 12.2123 3.14002 8.74965 6.52786 7.05573L16.5279 2.05573ZM16.9751 2.95016C19.5088 1.68328 22.4912 1.68328 25.0249 2.95016L35.0249 7.95016C38.074 9.47468 40 12.5911 40 16V26C40 29.4089 38.074 32.5253 35.0249 34.0498L25.0249 39.0498C22.4912 40.3167 19.5088 40.3167 16.9751 39.0498L6.97508 34.0498C3.92602 32.5253 2 29.4089 2 26V16C2 12.5911 3.92602 9.47468 6.97508 7.95016L16.9751 2.95016Z\"\n fill=\"url(#devtools_icon_gradient_2)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M16.9751 2.95016C19.5088 1.68328 22.4912 1.68328 25.0249 2.95016L35.0249 7.95016C38.074 9.47468 40 12.5911 40 16V26C40 29.4089 38.074 32.5253 35.0249 34.0498L25.0249 39.0498C22.4912 40.3167 19.5088 40.3167 16.9751 39.0498L6.97508 34.0498C3.92602 32.5253 2 29.4089 2 26V16C2 12.5911 3.92602 9.47468 6.97508 7.95016L16.9751 2.95016ZM20.9975 7C17.5733 7 14.7975 9.77583 14.7975 13.2V28.8C14.7975 32.2242 17.5733 35 20.9975 35C24.4217 35 27.1975 32.2242 27.1975 28.8V13.2C27.1975 9.77583 24.4217 7 20.9975 7Z\"\n fill=\"url(#devtools_icon_gradient_3)\"\n />\n <circle\n cx={21}\n cy={13.3301}\n r={4}\n fill=\"url(#devtools_icon_gradient_2)\"\n style={{\n transition: \"transform ease-in-out 0.2s\",\n transform: `translateY(${\n active ? \"0\" : hovered ? \"15px\" : \"15px\"\n })`,\n }}\n />\n <defs>\n <linearGradient\n id=\"devtools_icon_gradient_1\"\n x1={21}\n y1={7}\n x2={21}\n y2={35}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#47EBEB\" />\n <stop offset={1} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n </linearGradient>\n <linearGradient\n id=\"devtools_icon_gradient_2\"\n x1={21}\n y1={1}\n x2={21}\n y2={41}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#47EBEB\" />\n <stop offset={0.5} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n <stop offset={1} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n </linearGradient>\n <radialGradient\n id=\"devtools_icon_gradient_3\"\n cx={0}\n cy={0}\n r={1}\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(21 1) rotate(90) scale(40)\"\n >\n <stop stopColor=\"#47EBEB\" stopOpacity={0} />\n <stop offset={0.5} stopColor=\"#47EBEB\" stopOpacity={0.25} />\n <stop offset={1} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n </radialGradient>\n </defs>\n </svg>\n);\n","import { Placement } from \"src/interfaces/placement\";\n\nexport const getPanelToggleTransforms = (visible: boolean) => {\n return visible ? \"scaleX(1) translateY(0)\" : `scaleX(0) translateY(25vw)`;\n};\n\nexport const SIZE = 50;\nexport const BUFFER = 10;\n\nconst PREFERRED_DEFAULT_WIDTH = () =>\n typeof window !== \"undefined\" ? window.innerWidth * 0.7 : 1440 * 0.7; // 70% of window width\nconst PREFERRED_DEFAULT_HEIGHT = () =>\n typeof window !== \"undefined\" ? window.innerHeight * 0.7 : 900 * 0.7; // 70% of window height\n\nexport const MIN_PANEL_WIDTH = 640;\nexport const MIN_PANEL_HEIGHT = 360;\n\nconst verticalCenterTransform = `translateY(calc((100vh - ${SIZE}px) / 2))`;\nconst horizontalCenterTransform = `translateX(calc((100vw - ${\n SIZE * 2\n}px) / 2))`;\nconst rightAlignTransform = `translateX(calc((100vw - ${SIZE}px) - ${BUFFER}px))`;\nconst leftAlignTransform = `translateX(${BUFFER}px)`;\nconst topAlignTransform = `translateY(${BUFFER}px)`;\nconst bottomAlignTransform = `translateY(calc((100vh - ${SIZE}px) - ${0}px))`;\n\nexport const getPinTransform = (placement: Placement) => {\n switch (placement) {\n case \"left\":\n return `${leftAlignTransform} ${verticalCenterTransform}`;\n case \"right\":\n return `${rightAlignTransform} ${verticalCenterTransform}`;\n case \"top\":\n return `${topAlignTransform} ${horizontalCenterTransform}`;\n default:\n case \"bottom\":\n return `${bottomAlignTransform} ${horizontalCenterTransform}`;\n }\n};\n\nexport const getPinButtonTransform = (hover?: boolean) => {\n return `translateY(${hover ? \"0\" : \"50%\"})`;\n};\n\nexport const getPanelPosition = (placement: Placement) => {\n switch (placement) {\n case \"left\":\n return {\n left: `calc(${SIZE}px + ${BUFFER}px)`,\n top: \"50%\",\n transform: \"translateY(-50%)\",\n };\n case \"right\":\n return {\n right: `calc(${SIZE}px + ${BUFFER}px)`,\n top: \"50%\",\n transform: \"translateY(-50%)\",\n };\n case \"top\":\n return {\n left: \"50%\",\n top: `calc(${SIZE}px + ${BUFFER}px)`,\n transform: \"translateX(-50%)\",\n };\n default:\n case \"bottom\":\n return {\n left: \"50%\",\n bottom: `calc(${SIZE}px + ${BUFFER}px)`,\n transform: \"translateX(-50%)\",\n };\n }\n};\n\nexport const getMaxPanelWidth = (placement: Placement) => {\n switch (placement) {\n case \"left\":\n case \"right\":\n return (\n -BUFFER -\n SIZE -\n BUFFER +\n (typeof window !== \"undefined\" ? window.innerWidth : 1440) -\n BUFFER\n );\n case \"top\":\n case \"bottom\":\n return (\n -BUFFER +\n (typeof window !== \"undefined\" ? window.innerWidth : 1440) -\n BUFFER\n );\n }\n};\n\nexport const getMaxPanelHeight = (placement: Placement) => {\n switch (placement) {\n case \"left\":\n case \"right\":\n return (\n -BUFFER +\n (typeof window !== \"undefined\" ? window.innerHeight : 900) -\n BUFFER\n );\n case \"top\":\n case \"bottom\":\n return (\n -BUFFER -\n SIZE -\n BUFFER +\n (typeof window !== \"undefined\" ? window.innerHeight : 900) -\n BUFFER\n );\n }\n};\n\nexport const getDefaultPanelSize = (\n placement: Placement,\n preferredSize?: { width: number; height: number },\n): { width: number; height: number } => {\n const defaultPreferred = {\n width: PREFERRED_DEFAULT_WIDTH(),\n height: PREFERRED_DEFAULT_HEIGHT(),\n };\n\n const maxPanelWidth = getMaxPanelWidth(placement);\n const maxPanelHeight = getMaxPanelHeight(placement);\n\n const width = Math.min(\n maxPanelWidth,\n (preferredSize ?? defaultPreferred).width,\n );\n const height = Math.min(\n maxPanelHeight,\n (preferredSize ?? defaultPreferred).height,\n );\n\n return {\n width: width,\n height: height,\n };\n};\n","import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useSelector } from \"src/utilities/use-selector\";\nimport { SelectorButtonIcon } from \"./icons/selector-button\";\nimport { SelectorBox } from \"./selector-box\";\nimport { SelectorHint } from \"./selector-hint\";\n\ntype Props = {\n onSelectorOpen: () => void;\n onHighlight: (name: string) => void;\n groupHover?: boolean;\n};\n\nexport const DevtoolsSelector = ({\n onSelectorOpen,\n onHighlight,\n groupHover,\n}: Props) => {\n const [active, setActive] = React.useState(false);\n const [hover, setHover] = React.useState(false);\n const { rect, name } = useSelector(active);\n\n const [selectorBoxRoot, setSelectorBoxRoot] =\n React.useState<HTMLElement | null>(null);\n\n React.useEffect(() => {\n if (!selectorBoxRoot) {\n const element = document.createElement(\"div\");\n element.id = \"selector-box-root\";\n\n document.body.appendChild(element);\n\n setSelectorBoxRoot(element);\n }\n }, []);\n\n React.useEffect(() => {\n if (active) {\n document.body.style.cursor = \"crosshair\";\n } else {\n document.body.style.cursor = \"default\";\n }\n }, [active]);\n\n React.useEffect(() => {\n const onKeyDown = (e: KeyboardEvent) => {\n if (!active) return;\n if (!name) return;\n if (e.code === \"Space\") {\n e?.preventDefault();\n e?.stopPropagation();\n onHighlight(name);\n setActive(false);\n }\n };\n\n document.addEventListener(\"keydown\", onKeyDown);\n\n return () => {\n document.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [name, onHighlight, active]);\n\n React.useEffect(() => {\n if (active) {\n onSelectorOpen();\n }\n }, [active, onSelectorOpen]);\n\n return (\n <div\n style={{\n position: \"absolute\",\n left: \"calc((100px - ((100% - 42px) / 2)) + 7px)\",\n top: \"calc((100% - 28px) / 2)\",\n transform: groupHover ? \"translateX(0)\" : \"translateX(-40px)\",\n transitionDuration: \"0.2s\",\n transitionProperty: \"transform,opacity\",\n transitionTimingFunction: \"ease-in-out\",\n pointerEvents: groupHover ? \"auto\" : \"none\",\n height: 28,\n width: 28,\n }}\n >\n <div\n role=\"button\"\n title=\"Element Selector\"\n onMouseOver={() => setHover(true)}\n onMouseOut={() => setHover(false)}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n (document?.activeElement as HTMLElement)?.blur();\n setActive((active) => !active);\n }}\n style={{\n width: 28,\n height: 28,\n border: \"none\",\n background: \"none\",\n outline: \"none\",\n margin: 0,\n padding: 0,\n cursor: \"pointer\",\n transform: `scale(${hover ? 1.05 : 1})`,\n transitionProperty: \"transform,opacity\",\n transitionTimingFunction: \"ease-in-out\",\n transitionDuration: \"0.1s\",\n opacity: groupHover ? 1 : 0,\n }}\n >\n <SelectorButtonIcon\n width={28}\n height={28}\n style={{ pointerEvents: \"none\" }}\n />\n </div>\n <SelectorHint active={active} groupHover={groupHover} />\n {active &&\n selectorBoxRoot &&\n createPortal(\n <SelectorBox {...rect} name={name} />,\n selectorBoxRoot,\n )}\n </div>\n );\n};\n","import React from \"react\";\nimport debounce from \"lodash/debounce\";\nimport {\n getElementFromFiber,\n getFiberFromElement,\n getFirstFiberHasName,\n getFirstStateNodeFiber,\n getNameFromFiber,\n getParentOfFiber,\n} from \"@aliemir/dom-to-fiber-utils\";\n\ntype Fiber = Exclude<ReturnType<typeof getFiberFromElement>, null>;\n\nexport const useSelector = (active: boolean) => {\n const [traceItems, setTraceItems] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (active) {\n fetch(\"http://localhost:5001/api/unique-trace-items\").then((res) =>\n res\n .json()\n .then((data: { data: string[] }) =>\n setTraceItems(data.data),\n ),\n );\n }\n }, [active]);\n\n const [selectedFiber, setSelectedFiber] = React.useState<{\n stateNode: Fiber | null;\n nameFiber: Fiber | null;\n }>({\n stateNode: null,\n nameFiber: null,\n });\n const [activeFiber, setActiveFiber] = React.useState<{\n stateNode: Fiber | null;\n nameFiber: Fiber | null;\n derived?: boolean;\n }>({\n stateNode: null,\n nameFiber: null,\n derived: false,\n });\n\n React.useEffect(() => {\n if (active) {\n return () => {\n setSelectedFiber({\n stateNode: null,\n nameFiber: null,\n });\n setActiveFiber({\n stateNode: null,\n nameFiber: null,\n derived: false,\n });\n };\n }\n\n return () => 0;\n }, [active]);\n\n const selectAppropriateFiber = React.useCallback(\n (start: Fiber | null) => {\n let fiber = start;\n let firstParentOfNodeWithName: Fiber | null;\n let fiberWithStateNode: Fiber | null;\n\n let acceptedName = false;\n\n while (!acceptedName && fiber) {\n // Get the first fiber node that has a name (look up the tree)\n firstParentOfNodeWithName = getFirstFiberHasName(fiber);\n // Get the first fiber node that has a state node (look up the tree)\n fiberWithStateNode = getFirstStateNodeFiber(\n firstParentOfNodeWithName,\n );\n acceptedName = traceItems.includes(\n getNameFromFiber(firstParentOfNodeWithName) ?? \"\",\n );\n if (!acceptedName) {\n fiber = getParentOfFiber(fiber);\n }\n }\n\n if (fiberWithStateNode && firstParentOfNodeWithName) {\n return {\n stateNode: fiberWithStateNode,\n nameFiber: firstParentOfNodeWithName,\n };\n } else {\n return {\n stateNode: null,\n nameFiber: null,\n };\n }\n },\n [traceItems],\n );\n\n const pickFiber = React.useCallback(\n (target: HTMLElement) => {\n const fiber = getFiberFromElement(target);\n\n setSelectedFiber(selectAppropriateFiber(fiber));\n return;\n },\n [traceItems],\n );\n\n React.useEffect(() => {\n if (\n activeFiber.stateNode !== selectedFiber.stateNode ||\n activeFiber.nameFiber !== selectedFiber.nameFiber\n ) {\n setActiveFiber({\n stateNode: selectedFiber.stateNode,\n nameFiber: selectedFiber.nameFiber,\n derived: false,\n });\n }\n }, [selectedFiber]);\n\n const previousValues = React.useRef<{\n rect: {\n width: number;\n height: number;\n x: number;\n y: number;\n };\n name: string;\n }>({\n rect: {\n width: 0,\n height: 0,\n x: 0,\n y: 0,\n },\n name: \"\",\n });\n\n const { rect, name } = React.useMemo(() => {\n if (!active) {\n return {\n rect: {\n width: 0,\n height: 0,\n x: 0,\n y: 0,\n },\n name: \"\",\n };\n }\n if (activeFiber.stateNode || activeFiber.nameFiber) {\n // Get the element from the fiber with a state node\n const element = activeFiber.stateNode\n ? getElementFromFiber(activeFiber.stateNode)\n : null;\n // Get the name of the fiber node with a name\n const fiberName = activeFiber.nameFiber\n ? getNameFromFiber(activeFiber.nameFiber)\n : null;\n\n if (!element) {\n return {\n rect: previousValues.current.rect,\n name: fiberName ?? previousValues.current.name,\n };\n }\n\n const bounding = element.getBoundingClientRect?.();\n\n if (!bounding) {\n return {\n rect: previousValues.current.rect,\n name: fiberName ?? previousValues.current.name,\n };\n }\n\n return {\n rect: {\n width: bounding.width,\n height: bounding.height,\n x: bounding.left,\n y: bounding.top,\n },\n name: fiberName ?? previousValues.current.name,\n };\n }\n\n return previousValues.current;\n }, [activeFiber, active]);\n\n previousValues.current = {\n rect,\n name,\n };\n\n React.useEffect(() => {\n if (active) {\n const listener = (e: KeyboardEvent) => {\n // if user presses shift, toggle the derived state and set the active fiber to the parent\n if (e.key === \"Shift\" && activeFiber.stateNode) {\n e.stopPropagation();\n e.preventDefault();\n\n const parent = getParentOfFiber(activeFiber.nameFiber);\n\n const fibers = selectAppropriateFiber(parent);\n\n if (fibers.nameFiber && fibers.stateNode) {\n setActiveFiber({\n ...fibers,\n derived: true,\n });\n return;\n }\n }\n };\n\n document.addEventListener(\"keydown\", listener);\n return () => document.removeEventListener(\"keydown\", listener);\n }\n return () => 0;\n }, [activeFiber, active]);\n\n React.useEffect(() => {\n if (active) {\n let previousTarget: HTMLElement | null = null;\n const listener = debounce((e: MouseEvent) => {\n if (e?.target) {\n if (previousTarget === e.target) {\n return;\n }\n pickFiber(e.target as HTMLElement);\n previousTarget = e.target as HTMLElement;\n }\n }, 50);\n\n document.addEventListener(\"mousemove\", listener);\n\n return () => document.removeEventListener(\"mousemove\", listener);\n } else {\n return () => 0;\n }\n }, [active, pickFiber]);\n\n return {\n rect,\n name,\n };\n};\n","import React from \"react\";\n\nexport const SelectorButtonIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={42}\n height={42}\n viewBox=\"0 0 42 42\"\n fill=\"none\"\n {...props}\n >\n <g clipPath=\"url(#selector-button-a)\">\n <path\n fill=\"#1D1E30\"\n fillRule=\"evenodd\"\n d=\"M16.304 1.109a10.5 10.5 0 0 1 9.392 0l10.5 5.25A10.5 10.5 0 0 1 42 15.75v10.5a10.5 10.5 0 0 1-5.804 9.392l-10.5 5.25a10.5 10.5 0 0 1-9.392 0l-10.5-5.25A10.5 10.5 0 0 1 0 26.25v-10.5a10.5 10.5 0 0 1 5.804-9.391l10.5-5.25Z\"\n clipRule=\"evenodd\"\n />\n <path\n fill=\"url(#selector-button-b)\"\n fillRule=\"evenodd\"\n d=\"M16.528 2.056a10 10 0 0 1 8.944 0l10 5A10 10 0 0 1 41 16v10a10 10 0 0 1-5.528 8.944l-10 5a10 10 0 0 1-8.944 0l-10-5A10 10 0 0 1 1 26V16a10 10 0 0 1 5.528-8.944l10-5Zm.447.894a9 9 0 0 1 8.05 0l10 5A9 9 0 0 1 40 16v10a9 9 0 0 1-4.975 8.05l-10 5a9 9 0 0 1-8.05 0l-10-5A9 9 0 0 1 2 26V16a9 9 0 0 1 4.975-8.05l10-5Z\"\n clipRule=\"evenodd\"\n />\n <path\n fill=\"url(#selector-button-c)\"\n fillRule=\"evenodd\"\n d=\"M16.975 2.95a9 9 0 0 1 8.05 0l10 5A9 9 0 0 1 40 16v10a9 9 0 0 1-4.975 8.05l-10 5a9 9 0 0 1-8.05 0l-10-5A9 9 0 0 1 2 26V16a9 9 0 0 1 4.975-8.05l10-5Z\"\n clipRule=\"evenodd\"\n />\n <path\n stroke=\"url(#selector-button-d)\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M32 21c0 6.075-4.925 11-11 11m11-11c0-6.075-4.925-11-11-11m11 11h-4.4M21 32c-6.075 0-11-4.925-11-11m11 11v-4.4M10 21c0-6.075 4.925-11 11-11M10 21h4.4M21 10v4.4\"\n />\n </g>\n <defs>\n <radialGradient\n id=\"selector-button-c\"\n cx={0}\n cy={0}\n r={1}\n gradientTransform=\"matrix(0 40 -40 0 21 1)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#47EBEB\" stopOpacity={0} />\n <stop offset={0.5} stopColor=\"#47EBEB\" stopOpacity={0.25} />\n <stop offset={1} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n </radialGradient>\n <linearGradient\n id=\"selector-button-b\"\n x1={21}\n x2={21}\n y1={1}\n y2={41}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#47EBEB\" />\n <stop offset={0.5} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n <stop offset={1} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n </linearGradient>\n <linearGradient\n id=\"selector-button-d\"\n x1={21}\n y1={1}\n x2={21}\n y2={41}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#47EBEB\" />\n <stop offset={0.5} stopColor=\"#47EBEB\" stopOpacity={0.75} />\n <stop offset={1} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n </linearGradient>\n <clipPath id=\"selector-button-a\">\n <path fill=\"#fff\" d=\"M0 0h42v42H0z\" />\n </clipPath>\n </defs>\n </svg>\n);\n","import React from \"react\";\n\nexport const SelectorBox = ({\n width,\n height,\n x,\n y,\n name,\n}: {\n width: number;\n height: number;\n x: number;\n y: number;\n name: string;\n}) => {\n const namePosition = y - 6 > 25 ? \"top\" : \"bottom\";\n\n const outlinePosition = x > 7 ? \"outside\" : \"inside\";\n\n return (\n <div\n id=\"selector-box\"\n style={{\n pointerEvents: \"none\",\n position: \"fixed\",\n opacity: name ? 1 : 0,\n transitionProperty: \"width, height, transform, opacity\",\n transitionDuration: \"0.15s\",\n transitionTimingFunction: \"ease-out\",\n border: \"1.5px solid #47EBEB\",\n borderRadius: \"4px\",\n borderTopLeftRadius: 0,\n background: \"rgba(37,160,160, 0.25)\",\n backdropFilter: \"sepia(30%) hue-rotate(180deg)\",\n zIndex: 99998,\n ...(outlinePosition === \"outside\"\n ? {\n left: -6,\n top: -6,\n width: width + 10,\n height: height + 10,\n transform: `translate(${x}px, ${y}px)`,\n }\n : {\n left: 0,\n top: 0,\n width: width - 10,\n height: height - 20,\n transform: `translate(${x + 4}px, ${y + 4}px)`,\n }),\n }}\n >\n <div\n style={{\n position: \"absolute\",\n left: \"-1.5px\",\n background: \"#1D1E30\",\n padding: \"4px 6px\",\n border: \"1.5px solid #47EBEB\",\n fontSize: \"13px\",\n lineHeight: \"16px\",\n fontWeight: 600,\n color: \"#CFD7E2\",\n display: name ? \"block\" : \"none\",\n ...(namePosition === \"top\"\n ? {\n top: \"-27px\",\n borderTopLeftRadius: \"4px\",\n borderTopRightRadius: \"4px\",\n }\n : {\n top: \"-1.5px\",\n borderBottomLeftRadius: \"0\",\n borderBottomRightRadius: \"4px\",\n }),\n }}\n >\n {name}\n </div>\n </div>\n );\n};\n","import React from \"react\";\n\nexport const SelectorHint = ({\n active,\n groupHover,\n}: {\n active: boolean;\n groupHover?: boolean;\n}) => {\n return (\n <div\n style={{\n pointerEvents: \"none\",\n position: \"absolute\",\n left: \"calc(-50% - 100px - 14px)\",\n top: \"-50px\",\n width: \"200px\",\n opacity: active ? 1 : 0,\n transform: groupHover ? \"translateX(0)\" : \"translateX(40px)\",\n transitionDuration: \"0.2s\",\n transitionProperty: \"transform,opacity\",\n transitionTimingFunction: \"ease-in-out\",\n padding: \"8px\",\n fontSize: \"10px\",\n lineHeight: \"12px\",\n fontWeight: 400,\n textShadow:\n \"0 0 2px #1D1E30, 1px 0 2px #1D1E30, -1px 0 2px #1D1E30, 0 1px 2px #1D1E30, 0 -1px 2px #1D1E30\",\n }}\n >\n <kbd\n style={{\n marginLeft: \"4px\",\n padding: \"1px 2px\",\n borderRadius: \"2px\",\n background: \"whitesmoke\",\n color: \"dimgray\",\n border: \"0.5px solid silver\",\n boxShadow: \"0 1px 1px silver\",\n textShadow: \"none\",\n }}\n >\n shift\n </kbd>{\" \"}\n to move to parent.\n <kbd\n style={{\n marginLeft: \"4px\",\n padding: \"1px 2px\",\n borderRadius: \"2px\",\n background: \"whitesmoke\",\n color: \"dimgray\",\n border: \"0.5px solid silver\",\n boxShadow: \"0 1px 1px silver\",\n textShadow: \"none\",\n }}\n >\n space\n </kbd>{\" \"}\n to highlight in monitor.\n </div>\n );\n};\n","import React from \"react\";\nimport { Placement } from \"src/interfaces/placement\";\nimport {\n MIN_PANEL_HEIGHT,\n MIN_PANEL_WIDTH,\n getDefaultPanelSize,\n getMaxPanelHeight,\n getMaxPanelWidth,\n getPanelPosition,\n getPanelToggleTransforms,\n} from \"src/utilities\";\nimport { ResizeHandleIcon } from \"./icons/resize-handle-icon\";\n\ntype Props = {\n placement: Placement;\n defaultWidth?: number;\n minWidth?: number;\n maxWidth?: number;\n defaultHeight?: number;\n minHeight?: number;\n maxHeight?: number;\n children: ({ resizing }: { resizing: string | null }) => React.ReactNode;\n onResize?: (width: number, height: number) => void;\n visible?: boolean;\n};\n\nexport const ResizablePane = ({ placement, visible, children }: Props) => {\n const [hover, setHover] = React.useState(false);\n const [resizing, setResizing] = React.useState<\n \"lx\" | \"rx\" | \"ty\" | \"by\" | null\n >(null);\n const [resizePosition, setResizePosition] = React.useState<{\n x: number;\n y: number;\n } | null>(null);\n const [panelSize, setPanelSize] = React.useState<\n Record<\"width\" | \"height\", number>\n >(getDefaultPanelSize(placement));\n\n React.useEffect(() => {\n const handleResize = () => {\n setPanelSize((p) => getDefaultPanelSize(placement, p));\n };\n\n handleResize();\n\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [placement]);\n\n React.useEffect(() => {\n const handleMouseUp = () => {\n setResizing(null);\n };\n\n if (resizing !== null) {\n window.addEventListener(\"mouseup\", handleMouseUp);\n\n return () => {\n window.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }\n\n return;\n }, [resizing]);\n\n React.useEffect(() => {\n const currentCursor = document.body.style.cursor;\n\n if (resizing?.includes(\"x\")) {\n document.body.style.cursor = \"col-resize\";\n } else if (resizing?.includes(\"y\")) {\n document.body.style.cursor = \"row-resize\";\n }\n\n return () => {\n document.body.style.cursor = currentCursor;\n };\n }, [resizing]);\n\n React.useEffect(() => {\n const handleMouseMove = (e: MouseEvent) => {\n if (resizing?.[1] === \"x\") {\n const diff = e.clientX - (resizePosition?.x ?? e.clientX);\n const newWidth =\n panelSize.width + (resizing === \"lx\" ? -diff : diff) * 2;\n\n setPanelSize((p) => ({\n ...p,\n width: Math.min(\n getMaxPanelWidth(placement),\n Math.max(MIN_PANEL_WIDTH, newWidth),\n ),\n }));\n } else if (resizing?.[1] === \"y\") {\n const diff = e.clientY - (resizePosition?.y ?? e.clientY);\n const newHeight =\n panelSize.height + (resizing === \"ty\" ? -diff : diff) * 1;\n\n setPanelSize((p) => ({\n ...p,\n height: Math.min(\n getMaxPanelHeight(placement),\n Math.max(MIN_PANEL_HEIGHT, newHeight),\n ),\n }));\n }\n };\n\n if (resizing !== null) {\n window.addEventListener(\"mousemove\", handleMouseMove);\n\n return () => {\n window.removeEventListener(\"mousemove\", handleMouseMove);\n };\n }\n\n return;\n }, [resizing, placement]);\n\n return (\n <div\n style={{\n position: \"absolute\",\n borderRadius: \"8px\",\n boxShadow: \"0 0 10px rgba(0, 0, 0, 0.5)\",\n border: \"1px solid rgba(0, 0, 0, 0.5)\",\n transitionProperty: \"transform, opacity\",\n transitionTimingFunction: \"ease-in-out\",\n transitionDuration: \"0.2s\",\n ...getPanelPosition(placement),\n opacity: visible ? 1 : 0,\n transform: `${\n getPanelPosition(placement).transform\n } ${getPanelToggleTransforms(visible ?? false)}`,\n ...panelSize,\n }}\n onMouseEnter={() => {\n setHover(true);\n }}\n onMouseLeave={() => {\n setHover(false);\n }}\n >\n {children({ resizing })}\n {/* */}\n <React.Fragment>\n <div\n style={{\n position: \"absolute\",\n left: 0,\n top: \"50%\",\n width: \"10px\",\n height: \"26px\",\n transform: \"translateY(-13px) translateX(-5px)\",\n cursor: \"col-resize\",\n transition: \"opacity ease-in-out 0.2s\",\n pointerEvents: hover || resizing ? \"auto\" : \"none\",\n opacity: hover || resizing ? 1 : 0,\n }}\n onMouseDown={(event) => {\n setResizing(\"lx\");\n setResizePosition({\n x: event.clientX,\n y: event.clientY,\n });\n\n event.preventDefault();\n }}\n >\n <ResizeHandleIcon />\n </div>\n <div\n style={{\n position: \"absolute\",\n right: 0,\n top: \"50%\",\n width: \"10px\",\n height: \"26px\",\n transform: `translateY(-13px) translateX(5px)`,\n cursor: \"col-resize\",\n transition: \"opacity ease-in-out 0.2s\",\n pointerEvents: hover || resizing ? \"auto\" : \"none\",\n opacity: hover || resizing ? 1 : 0,\n }}\n onMouseDown={(event) => {\n setResizing(\"rx\");\n setResizePosition({\n x: event.clientX,\n y: event.clientY,\n });\n\n event.preventDefault();\n }}\n >\n <ResizeHandleIcon />\n </div>\n <div\n style={{\n position: \"absolute\",\n left: \"50%\",\n top: 0,\n width: \"26px\",\n height: \"10px\",\n transform: \"translateY(-5px) translateX(-13px)\",\n cursor: \"row-resize\",\n transition: \"opacity ease-in-out 0.2s\",\n pointerEvents: hover || resizing ? \"auto\" : \"none\",\n opacity: hover || resizing ? 1 : 0,\n }}\n onMouseDown={(event) => {\n setResizing(\"ty\");\n setResizePosition({\n x: event.clientX,\n y: event.clientY,\n });\n\n event.preventDefault();\n }}\n >\n <ResizeHandleIcon\n style={{\n transform: \"rotate(90deg)\",\n transformOrigin: \"13px 13px\",\n }}\n />\n </div>\n <div\n style={{\n position: \"absolute\",\n left: \"50%\",\n bottom: 0,\n width: \"26px\",\n height: \"10px\",\n transform: \"translateY(5px) translateX(-13px)\",\n cursor: \"row-resize\",\n transition: \"opacity ease-in-out 0.2s\",\n pointerEvents: hover || resizing ? \"auto\" : \"none\",\n opacity: hover || resizing ? 1 : 0,\n }}\n onMouseDown={(event) => {\n setResizing(\"by\");\n setResizePosition({\n x: event.clientX,\n y: event.clientY,\n });\n\n event.preventDefault();\n }}\n >\n <ResizeHandleIcon\n style={{\n transform: \"rotate(90deg)\",\n transformOrigin: \"13px 13px\",\n }}\n />\n </div>\n </React.Fragment>\n </div>\n );\n};\n","import React from \"react\";\n\nexport const ResizeHandleIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n width={10}\n height={26}\n viewBox=\"0 0 10 26\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <rect x={0.5} y={0.5} width={9} height={25} rx={4.5} fill=\"#1D1E30\" />\n <path\n d=\"M7 5C7 6.10457 6.10457 7 5 7C3.89543 7 3 6.10457 3 5C3 3.89543 3.89543 3 5 3C6.10457 3 7 3.89543 7 5Z\"\n fill=\"#303450\"\n />\n <path\n d=\"M7 13C7 14.1046 6.10457 15 5 15C3.89543 15 3 14.1046 3 13C3 11.8954 3.89543 11 5 11C6.10457 11 7 11.8954 7 13Z\"\n fill=\"#303450\"\n />\n <path\n d=\"M7 21C7 22.1046 6.10457 23 5 23C3.89543 23 3 22.1046 3 21C3 19.8954 3.89543 19 5 19C6.10457 19 7 19.8954 7 21Z\"\n fill=\"#303450\"\n />\n <rect x={0.5} y={0.5} width={9} height={25} rx={4.5} stroke=\"#303450\" />\n </svg>\n);\n","import React from \"react\";\nimport { DevToolsContextProvider } from \"@refinedev/devtools-shared\";\n\nexport const DevtoolsProvider =\n __DEV_CONDITION__ !== \"development\"\n ? ({ children }: React.PropsWithChildren) => children as any\n : ({ children }: React.PropsWithChildren) => {\n return (\n <DevToolsContextProvider>{children}</DevToolsContextProvider>\n );\n };\n"],"mappings":"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","names":["src_exports","__export","DevtoolsPanel","DevtoolsProvider","__toCommonJS","import_react","import_react","import_react","RefineDevtoolsIcon","active","hovered","props","React","getPanelToggleTransforms","visible","SIZE","BUFFER","PREFERRED_DEFAULT_WIDTH","PREFERRED_DEFAULT_HEIGHT","MIN_PANEL_WIDTH","MIN_PANEL_HEIGHT","verticalCenterTransform","horizontalCenterTransform","rightAlignTransform","leftAlignTransform","topAlignTransform","bottomAlignTransform","getPinTransform","placement","getPinButtonTransform","hover","getPanelPosition","getMaxPanelWidth","getMaxPanelHeight","getDefaultPanelSize","preferredSize","defaultPreferred","maxPanelWidth","maxPanelHeight","width","height","import_react","import_react_dom","import_react","import_debounce","import_dom_to_fiber_utils","useSelector","active","traceItems","setTraceItems","React","res","data","selectedFiber","setSelectedFiber","activeFiber","setActiveFiber","selectAppropriateFiber","start","fiber","firstParentOfNodeWithName","fiberWithStateNode","acceptedName","pickFiber","target","previousValues","rect","name","_a","element","fiberName","bounding","listener","e","parent","fibers","previousTarget","debounce","import_react","SelectorButtonIcon","props","React","import_react","SelectorBox","width","height","x","y","name","namePosition","outlinePosition","React","import_react","SelectorHint","active","groupHover","React","DevtoolsSelector","onSelectorOpen","onHighlight","groupHover","active","setActive","React","hover","setHover","rect","name","useSelector","selectorBoxRoot","setSelectorBoxRoot","element","onKeyDown","e","event","_a","SelectorButtonIcon","SelectorHint","SelectorBox","DevtoolsPin","active","onClick","groupHover","onSelectorHighlight","onSelectorOpen","hover","setHover","React","getPinButtonTransform","RefineDevtoolsIcon","DevtoolsSelector","import_react","import_react","ResizeHandleIcon","props","React","ResizablePane","placement","visible","children","hover","setHover","React","resizing","setResizing","resizePosition","setResizePosition","panelSize","setPanelSize","getDefaultPanelSize","handleResize","p","handleMouseUp","currentCursor","handleMouseMove","e","diff","newWidth","getMaxPanelWidth","MIN_PANEL_WIDTH","newHeight","getMaxPanelHeight","MIN_PANEL_HEIGHT","getPanelPosition","getPanelToggleTransforms","event","ResizeHandleIcon","import_devtools_shared","DevtoolsPanel","visible","setVisible","React","placement","devtoolsUrl","ws","hover","setHover","onSelectorHighlight","name","onSelectorOpen","SIZE","getPinTransform","DevtoolsPin","v","ResizablePane","resizing","import_react","import_devtools_shared","DevtoolsProvider","children","React"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/panel.tsx","../src/components/devtools-pin.tsx","../src/components/icons/devtools-icon.tsx","../src/utilities/index.ts","../src/components/devtools-selector.tsx","../src/utilities/use-selector.tsx","../src/components/icons/selector-button.tsx","../src/components/selector-box.tsx","../src/components/selector-hint.tsx","../src/components/resizable-pane.tsx","../src/components/icons/resize-handle-icon.tsx","../src/provider.tsx"],"sourcesContent":["export { DevtoolsPanel } from \"./panel\";\nexport { DevtoolsProvider } from \"./provider\";\n","import React from \"react\";\nimport { DevtoolsPin } from \"./components/devtools-pin\";\nimport { ResizablePane } from \"./components/resizable-pane\";\n\nimport { SIZE, getPinTransform } from \"./utilities\";\n\nimport { Placement } from \"./interfaces/placement\";\nimport {\n DevToolsContext,\n DevtoolsEvent,\n send,\n} from \"@refinedev/devtools-shared\";\n\nexport const DevtoolsPanel =\n __DEV_CONDITION__ !== \"development\"\n ? () => null\n : () => {\n const [visible, setVisible] = React.useState(false);\n const [placement] = React.useState<Placement>(\"bottom\");\n const { devtoolsUrl, ws } = React.useContext(DevToolsContext);\n const [hover, setHover] = React.useState(false);\n\n const onSelectorHighlight = React.useCallback(\n (name: string) => {\n if (ws) {\n send(\n ws,\n DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR,\n {\n name,\n },\n );\n }\n setVisible(true);\n },\n [ws],\n );\n\n const onSelectorOpen = React.useCallback(() => {\n setVisible(false);\n }, []);\n\n return (\n <div\n style={{\n position: \"fixed\",\n left: 0,\n top: 0,\n zIndex: 99999,\n width: `${SIZE * 2}px`,\n height: `${SIZE}px`,\n\n transform: getPinTransform(placement),\n }}\n onMouseEnter={() => setHover(true)}\n onMouseLeave={() => setHover(false)}\n >\n <DevtoolsPin\n active={visible}\n onClick={() => setVisible((v) => !v)}\n groupHover={hover}\n onSelectorHighlight={onSelectorHighlight}\n onSelectorOpen={onSelectorOpen}\n />\n <ResizablePane visible={visible} placement={placement}>\n {({ resizing }) => (\n <iframe\n allow=\"clipboard-write;\"\n src={devtoolsUrl}\n srcDoc={\n devtoolsUrl\n ? undefined\n : `\n <html style=\"height:100%;padding:0;margin:0;\">\n <body style=\"display:flex;justify-content:center;height:100%;padding:24px;margin:0;align-items:center;box-sizing:border-box;\">\n <h1 style=\"font-family:ui-monospace,monospace;color:#CFD7E2;text-align:center;\">Could not connect to the devtools server</h1>\n </body>\n </html>\n `\n }\n style={{\n width: \"100%\",\n height: \"100%\",\n border: \"none\",\n borderRadius: \"7px\",\n pointerEvents: resizing ? \"none\" : \"auto\",\n background: \"#14141F\",\n }}\n />\n )}\n </ResizablePane>\n </div>\n );\n };\n","import React from \"react\";\nimport { RefineDevtoolsIcon } from \"./icons/devtools-icon\";\nimport { getPinButtonTransform } from \"src/utilities\";\nimport { DevtoolsSelector } from \"./devtools-selector\";\n\ntype Props = {\n onClick?: () => void;\n active?: boolean;\n groupHover?: boolean;\n onSelectorHighlight: (name: string) => void;\n onSelectorOpen: () => void;\n};\n\nexport const DevtoolsPin = ({\n active,\n onClick,\n groupHover,\n onSelectorHighlight,\n onSelectorOpen,\n}: Props) => {\n const [hover, setHover] = React.useState(false);\n\n return (\n <button\n type=\"button\"\n style={{\n position: \"relative\",\n userSelect: \"none\",\n WebkitUserSelect: \"none\",\n background: \"none\",\n border: \"none\",\n padding: 0,\n margin: 0,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontWeight: \"bold\",\n color: \"white\",\n cursor: \"pointer\",\n width: \"100%\",\n height: \"100%\",\n transition: \"all ease-in-out 0.2s\",\n transform: `scale(${hover ? 1.05 : 1}) ${getPinButtonTransform(\n groupHover,\n )}`,\n filter: `drop-shadow(0 0 ${\n hover ? \"8px\" : \"5px\"\n } rgba(71, 235, 235, ${hover ? \"0.5\" : \"0.25\"}))`,\n }}\n onMouseOver={() => setHover(true)}\n onMouseOut={() => setHover(false)}\n onClick={onClick}\n >\n <RefineDevtoolsIcon active={active} hovered={hover} />\n <DevtoolsSelector\n onSelectorOpen={onSelectorOpen}\n onHighlight={onSelectorHighlight}\n groupHover={hover}\n />\n </button>\n );\n};\n","import React from \"react\";\n\ntype Props = React.SVGProps<SVGSVGElement> & {\n active?: boolean;\n hovered?: boolean;\n};\n\nexport const RefineDevtoolsIcon = ({ active, hovered, ...props }: Props) => (\n <svg\n width={42}\n height={42}\n viewBox=\"0 0 42 42\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M16.3043 1.10851C19.2603 -0.369505 22.7397 -0.369505 25.6957 1.10851L36.1957 6.35852C39.753 8.13713 42 11.7729 42 15.75V26.25C42 30.2271 39.753 33.8629 36.1957 35.6415L25.6957 40.8915C22.7397 42.3695 19.2603 42.3695 16.3043 40.8915L5.80426 35.6415C2.24702 33.8629 0 30.2271 0 26.25V15.75C0 11.7729 2.24702 8.13713 5.80426 6.35852L16.3043 1.10851Z\"\n fill=\"#1D1E30\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M14.7975 13.2C14.7975 9.77583 17.5733 7 20.9975 7C24.4217 7 27.1975 9.77583 27.1975 13.2V28.8C27.1975 32.2242 24.4217 35 20.9975 35C17.5733 35 14.7975 32.2242 14.7975 28.8V13.2ZM20.9975 8C18.1256 8 15.7975 10.3281 15.7975 13.2V28.8C15.7975 31.6719 18.1256 34 20.9975 34C23.8694 34 26.1975 31.6719 26.1975 28.8V13.2C26.1975 10.3281 23.8694 8 20.9975 8Z\"\n fill=\"url(#devtools_icon_gradient_1)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M16.5279 2.05573C19.3431 0.648091 22.6569 0.648091 25.4721 2.05573L35.4721 7.05573C38.86 8.74965 41 12.2123 41 16V26C41 29.7877 38.86 33.2504 35.4721 34.9443L25.4721 39.9443C22.6569 41.3519 19.3431 41.3519 16.5279 39.9443L6.52786 34.9443C3.14002 33.2504 1 29.7877 1 26V16C1 12.2123 3.14002 8.74965 6.52786 7.05573L16.5279 2.05573ZM16.9751 2.95016C19.5088 1.68328 22.4912 1.68328 25.0249 2.95016L35.0249 7.95016C38.074 9.47468 40 12.5911 40 16V26C40 29.4089 38.074 32.5253 35.0249 34.0498L25.0249 39.0498C22.4912 40.3167 19.5088 40.3167 16.9751 39.0498L6.97508 34.0498C3.92602 32.5253 2 29.4089 2 26V16C2 12.5911 3.92602 9.47468 6.97508 7.95016L16.9751 2.95016Z\"\n fill=\"url(#devtools_icon_gradient_2)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M16.9751 2.95016C19.5088 1.68328 22.4912 1.68328 25.0249 2.95016L35.0249 7.95016C38.074 9.47468 40 12.5911 40 16V26C40 29.4089 38.074 32.5253 35.0249 34.0498L25.0249 39.0498C22.4912 40.3167 19.5088 40.3167 16.9751 39.0498L6.97508 34.0498C3.92602 32.5253 2 29.4089 2 26V16C2 12.5911 3.92602 9.47468 6.97508 7.95016L16.9751 2.95016ZM20.9975 7C17.5733 7 14.7975 9.77583 14.7975 13.2V28.8C14.7975 32.2242 17.5733 35 20.9975 35C24.4217 35 27.1975 32.2242 27.1975 28.8V13.2C27.1975 9.77583 24.4217 7 20.9975 7Z\"\n fill=\"url(#devtools_icon_gradient_3)\"\n />\n <circle\n cx={21}\n cy={13.3301}\n r={4}\n fill=\"url(#devtools_icon_gradient_2)\"\n style={{\n transition: \"transform ease-in-out 0.2s\",\n transform: `translateY(${\n active ? \"0\" : hovered ? \"15px\" : \"15px\"\n })`,\n }}\n />\n <defs>\n <linearGradient\n id=\"devtools_icon_gradient_1\"\n x1={21}\n y1={7}\n x2={21}\n y2={35}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#47EBEB\" />\n <stop offset={1} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n </linearGradient>\n <linearGradient\n id=\"devtools_icon_gradient_2\"\n x1={21}\n y1={1}\n x2={21}\n y2={41}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#47EBEB\" />\n <stop offset={0.5} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n <stop offset={1} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n </linearGradient>\n <radialGradient\n id=\"devtools_icon_gradient_3\"\n cx={0}\n cy={0}\n r={1}\n gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(21 1) rotate(90) scale(40)\"\n >\n <stop stopColor=\"#47EBEB\" stopOpacity={0} />\n <stop offset={0.5} stopColor=\"#47EBEB\" stopOpacity={0.25} />\n <stop offset={1} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n </radialGradient>\n </defs>\n </svg>\n);\n","import { Placement } from \"src/interfaces/placement\";\n\nexport const getPanelToggleTransforms = (visible: boolean) => {\n return visible ? \"scaleX(1) translateY(0)\" : `scaleX(0) translateY(25vw)`;\n};\n\nexport const SIZE = 50;\nexport const BUFFER = 10;\n\nconst PREFERRED_DEFAULT_WIDTH = () =>\n typeof window !== \"undefined\" ? window.innerWidth * 0.7 : 1440 * 0.7; // 70% of window width\nconst PREFERRED_DEFAULT_HEIGHT = () =>\n typeof window !== \"undefined\" ? window.innerHeight * 0.7 : 900 * 0.7; // 70% of window height\n\nexport const MIN_PANEL_WIDTH = 640;\nexport const MIN_PANEL_HEIGHT = 360;\n\nconst verticalCenterTransform = `translateY(calc((100vh - ${SIZE}px) / 2))`;\nconst horizontalCenterTransform = `translateX(calc((100vw - ${\n SIZE * 2\n}px) / 2))`;\nconst rightAlignTransform = `translateX(calc((100vw - ${SIZE}px) - ${BUFFER}px))`;\nconst leftAlignTransform = `translateX(${BUFFER}px)`;\nconst topAlignTransform = `translateY(${BUFFER}px)`;\nconst bottomAlignTransform = `translateY(calc((100vh - ${SIZE}px) - ${0}px))`;\n\nexport const getPinTransform = (placement: Placement) => {\n switch (placement) {\n case \"left\":\n return `${leftAlignTransform} ${verticalCenterTransform}`;\n case \"right\":\n return `${rightAlignTransform} ${verticalCenterTransform}`;\n case \"top\":\n return `${topAlignTransform} ${horizontalCenterTransform}`;\n default:\n case \"bottom\":\n return `${bottomAlignTransform} ${horizontalCenterTransform}`;\n }\n};\n\nexport const getPinButtonTransform = (hover?: boolean) => {\n return `translateY(${hover ? \"0\" : \"50%\"})`;\n};\n\nexport const getPanelPosition = (placement: Placement) => {\n switch (placement) {\n case \"left\":\n return {\n left: `calc(${SIZE}px + ${BUFFER}px)`,\n top: \"50%\",\n transform: \"translateY(-50%)\",\n };\n case \"right\":\n return {\n right: `calc(${SIZE}px + ${BUFFER}px)`,\n top: \"50%\",\n transform: \"translateY(-50%)\",\n };\n case \"top\":\n return {\n left: \"50%\",\n top: `calc(${SIZE}px + ${BUFFER}px)`,\n transform: \"translateX(-50%)\",\n };\n default:\n case \"bottom\":\n return {\n left: \"50%\",\n bottom: `calc(${SIZE}px + ${BUFFER}px)`,\n transform: \"translateX(-50%)\",\n };\n }\n};\n\nexport const getMaxPanelWidth = (placement: Placement) => {\n switch (placement) {\n case \"left\":\n case \"right\":\n return (\n -BUFFER -\n SIZE -\n BUFFER +\n (typeof window !== \"undefined\" ? window.innerWidth : 1440) -\n BUFFER\n );\n case \"top\":\n case \"bottom\":\n return (\n -BUFFER +\n (typeof window !== \"undefined\" ? window.innerWidth : 1440) -\n BUFFER\n );\n }\n};\n\nexport const getMaxPanelHeight = (placement: Placement) => {\n switch (placement) {\n case \"left\":\n case \"right\":\n return (\n -BUFFER +\n (typeof window !== \"undefined\" ? window.innerHeight : 900) -\n BUFFER\n );\n case \"top\":\n case \"bottom\":\n return (\n -BUFFER -\n SIZE -\n BUFFER +\n (typeof window !== \"undefined\" ? window.innerHeight : 900) -\n BUFFER\n );\n }\n};\n\nexport const getDefaultPanelSize = (\n placement: Placement,\n preferredSize?: { width: number; height: number },\n): { width: number; height: number } => {\n const defaultPreferred = {\n width: PREFERRED_DEFAULT_WIDTH(),\n height: PREFERRED_DEFAULT_HEIGHT(),\n };\n\n const maxPanelWidth = getMaxPanelWidth(placement);\n const maxPanelHeight = getMaxPanelHeight(placement);\n\n const width = Math.min(\n maxPanelWidth,\n (preferredSize ?? defaultPreferred).width,\n );\n const height = Math.min(\n maxPanelHeight,\n (preferredSize ?? defaultPreferred).height,\n );\n\n return {\n width: width,\n height: height,\n };\n};\n","import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useSelector } from \"src/utilities/use-selector\";\nimport { SelectorButtonIcon } from \"./icons/selector-button\";\nimport { SelectorBox } from \"./selector-box\";\nimport { SelectorHint } from \"./selector-hint\";\n\ntype Props = {\n onSelectorOpen: () => void;\n onHighlight: (name: string) => void;\n groupHover?: boolean;\n};\n\nexport const DevtoolsSelector = ({\n onSelectorOpen,\n onHighlight,\n groupHover,\n}: Props) => {\n const [active, setActive] = React.useState(false);\n const [hover, setHover] = React.useState(false);\n const { rect, name } = useSelector(active);\n\n const [selectorBoxRoot, setSelectorBoxRoot] =\n React.useState<HTMLElement | null>(null);\n\n React.useEffect(() => {\n if (!selectorBoxRoot) {\n const element = document.createElement(\"div\");\n element.id = \"selector-box-root\";\n\n document.body.appendChild(element);\n\n setSelectorBoxRoot(element);\n }\n }, []);\n\n React.useEffect(() => {\n if (active) {\n document.body.style.cursor = \"crosshair\";\n } else {\n document.body.style.cursor = \"default\";\n }\n }, [active]);\n\n React.useEffect(() => {\n const onMouseClick = (e: MouseEvent) => {\n if (!active) return;\n if (!name) return;\n\n e?.preventDefault();\n e?.stopPropagation();\n e.stopImmediatePropagation();\n onHighlight(name);\n setActive(false);\n };\n\n if (active) {\n document.addEventListener(\"click\", onMouseClick, {\n capture: true,\n });\n\n return () => {\n document.removeEventListener(\"click\", onMouseClick, {\n capture: true,\n });\n };\n }\n\n return () => 0;\n }, [name, onHighlight, active]);\n\n React.useEffect(() => {\n if (active) {\n onSelectorOpen();\n }\n }, [active, onSelectorOpen]);\n\n return (\n <div\n style={{\n position: \"absolute\",\n left: \"calc((100px - ((100% - 42px) / 2)) + 7px)\",\n top: \"calc((100% - 28px) / 2)\",\n transform: groupHover ? \"translateX(0)\" : \"translateX(-40px)\",\n transitionDuration: \"0.2s\",\n transitionProperty: \"transform,opacity\",\n transitionTimingFunction: \"ease-in-out\",\n pointerEvents: groupHover ? \"auto\" : \"none\",\n height: 28,\n width: 28,\n }}\n >\n <div\n role=\"button\"\n title=\"Element Selector\"\n onMouseOver={() => setHover(true)}\n onMouseOut={() => setHover(false)}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n (document?.activeElement as HTMLElement)?.blur();\n setActive((active) => !active);\n }}\n style={{\n width: 28,\n height: 28,\n border: \"none\",\n background: \"none\",\n outline: \"none\",\n margin: 0,\n padding: 0,\n cursor: \"pointer\",\n transform: `scale(${hover ? 1.05 : 1})`,\n transitionProperty: \"transform,opacity\",\n transitionTimingFunction: \"ease-in-out\",\n transitionDuration: \"0.1s\",\n opacity: groupHover ? 1 : 0,\n }}\n >\n <SelectorButtonIcon\n width={28}\n height={28}\n style={{ pointerEvents: \"none\" }}\n />\n </div>\n <SelectorHint active={active} groupHover={groupHover} />\n {active &&\n selectorBoxRoot &&\n createPortal(\n <SelectorBox {...rect} name={name} />,\n selectorBoxRoot,\n )}\n </div>\n );\n};\n","import React from \"react\";\nimport debounce from \"lodash/debounce\";\nimport {\n getElementFromFiber,\n getFiberFromElement,\n getFirstFiberHasName,\n getFirstStateNodeFiber,\n getNameFromFiber,\n getParentOfFiber,\n} from \"@aliemir/dom-to-fiber-utils\";\n\ntype Fiber = Exclude<ReturnType<typeof getFiberFromElement>, null>;\n\nexport const useSelector = (active: boolean) => {\n const [traceItems, setTraceItems] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (active) {\n fetch(\"http://localhost:5001/api/unique-trace-items\").then((res) =>\n res\n .json()\n .then((data: { data: string[] }) =>\n setTraceItems(data.data),\n ),\n );\n }\n }, [active]);\n\n const [selectedFiber, setSelectedFiber] = React.useState<{\n stateNode: Fiber | null;\n nameFiber: Fiber | null;\n }>({\n stateNode: null,\n nameFiber: null,\n });\n const [activeFiber, setActiveFiber] = React.useState<{\n stateNode: Fiber | null;\n nameFiber: Fiber | null;\n derived?: boolean;\n }>({\n stateNode: null,\n nameFiber: null,\n derived: false,\n });\n\n React.useEffect(() => {\n if (active) {\n return () => {\n setSelectedFiber({\n stateNode: null,\n nameFiber: null,\n });\n setActiveFiber({\n stateNode: null,\n nameFiber: null,\n derived: false,\n });\n };\n }\n\n return () => 0;\n }, [active]);\n\n const selectAppropriateFiber = React.useCallback(\n (start: Fiber | null) => {\n let fiber = start;\n let firstParentOfNodeWithName: Fiber | null;\n let fiberWithStateNode: Fiber | null;\n\n let acceptedName = false;\n\n while (!acceptedName && fiber) {\n // Get the first fiber node that has a name (look up the tree)\n firstParentOfNodeWithName = getFirstFiberHasName(fiber);\n // Get the first fiber node that has a state node (look up the tree)\n fiberWithStateNode = getFirstStateNodeFiber(\n firstParentOfNodeWithName,\n );\n acceptedName = traceItems.includes(\n getNameFromFiber(firstParentOfNodeWithName) ?? \"\",\n );\n if (!acceptedName) {\n fiber = getParentOfFiber(fiber);\n }\n }\n\n if (fiberWithStateNode && firstParentOfNodeWithName) {\n return {\n stateNode: fiberWithStateNode,\n nameFiber: firstParentOfNodeWithName,\n };\n } else {\n return {\n stateNode: null,\n nameFiber: null,\n };\n }\n },\n [traceItems],\n );\n\n const pickFiber = React.useCallback(\n (target: HTMLElement) => {\n const fiber = getFiberFromElement(target);\n\n setSelectedFiber(selectAppropriateFiber(fiber));\n return;\n },\n [traceItems],\n );\n\n React.useEffect(() => {\n if (\n activeFiber.stateNode !== selectedFiber.stateNode ||\n activeFiber.nameFiber !== selectedFiber.nameFiber\n ) {\n setActiveFiber({\n stateNode: selectedFiber.stateNode,\n nameFiber: selectedFiber.nameFiber,\n derived: false,\n });\n }\n }, [selectedFiber]);\n\n const previousValues = React.useRef<{\n rect: {\n width: number;\n height: number;\n x: number;\n y: number;\n };\n name: string;\n }>({\n rect: {\n width: 0,\n height: 0,\n x: 0,\n y: 0,\n },\n name: \"\",\n });\n\n const { rect, name } = React.useMemo(() => {\n if (!active) {\n return {\n rect: {\n width: 0,\n height: 0,\n x: 0,\n y: 0,\n },\n name: \"\",\n };\n }\n if (activeFiber.stateNode || activeFiber.nameFiber) {\n // Get the element from the fiber with a state node\n const element = activeFiber.stateNode\n ? getElementFromFiber(activeFiber.stateNode)\n : null;\n // Get the name of the fiber node with a name\n const fiberName = activeFiber.nameFiber\n ? getNameFromFiber(activeFiber.nameFiber)\n : null;\n\n if (!element) {\n return {\n rect: previousValues.current.rect,\n name: fiberName ?? previousValues.current.name,\n };\n }\n\n const bounding = element.getBoundingClientRect?.();\n\n if (!bounding) {\n return {\n rect: previousValues.current.rect,\n name: fiberName ?? previousValues.current.name,\n };\n }\n\n return {\n rect: {\n width: bounding.width,\n height: bounding.height,\n x: bounding.left,\n y: bounding.top,\n },\n name: fiberName ?? previousValues.current.name,\n };\n }\n\n return previousValues.current;\n }, [activeFiber, active]);\n\n previousValues.current = {\n rect,\n name,\n };\n\n React.useEffect(() => {\n if (active) {\n const listener = (e: KeyboardEvent) => {\n // if user presses shift, toggle the derived state and set the active fiber to the parent\n if (e.key === \"Shift\" && activeFiber.stateNode) {\n e.stopPropagation();\n e.preventDefault();\n\n const parent = getParentOfFiber(activeFiber.nameFiber);\n\n const fibers = selectAppropriateFiber(parent);\n\n if (fibers.nameFiber && fibers.stateNode) {\n setActiveFiber({\n ...fibers,\n derived: true,\n });\n return;\n }\n }\n };\n\n document.addEventListener(\"keydown\", listener);\n return () => document.removeEventListener(\"keydown\", listener);\n }\n return () => 0;\n }, [activeFiber, active]);\n\n React.useEffect(() => {\n if (active) {\n let previousTarget: HTMLElement | null = null;\n const listener = debounce((e: MouseEvent) => {\n if (e?.target) {\n if (previousTarget === e.target) {\n return;\n }\n pickFiber(e.target as HTMLElement);\n previousTarget = e.target as HTMLElement;\n }\n }, 50);\n\n document.addEventListener(\"mousemove\", listener);\n\n return () => document.removeEventListener(\"mousemove\", listener);\n } else {\n return () => 0;\n }\n }, [active, pickFiber]);\n\n return {\n rect,\n name,\n };\n};\n","import React from \"react\";\n\nexport const SelectorButtonIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={42}\n height={42}\n viewBox=\"0 0 42 42\"\n fill=\"none\"\n {...props}\n >\n <g clipPath=\"url(#selector-button-a)\">\n <path\n fill=\"#1D1E30\"\n fillRule=\"evenodd\"\n d=\"M16.304 1.109a10.5 10.5 0 0 1 9.392 0l10.5 5.25A10.5 10.5 0 0 1 42 15.75v10.5a10.5 10.5 0 0 1-5.804 9.392l-10.5 5.25a10.5 10.5 0 0 1-9.392 0l-10.5-5.25A10.5 10.5 0 0 1 0 26.25v-10.5a10.5 10.5 0 0 1 5.804-9.391l10.5-5.25Z\"\n clipRule=\"evenodd\"\n />\n <path\n fill=\"url(#selector-button-b)\"\n fillRule=\"evenodd\"\n d=\"M16.528 2.056a10 10 0 0 1 8.944 0l10 5A10 10 0 0 1 41 16v10a10 10 0 0 1-5.528 8.944l-10 5a10 10 0 0 1-8.944 0l-10-5A10 10 0 0 1 1 26V16a10 10 0 0 1 5.528-8.944l10-5Zm.447.894a9 9 0 0 1 8.05 0l10 5A9 9 0 0 1 40 16v10a9 9 0 0 1-4.975 8.05l-10 5a9 9 0 0 1-8.05 0l-10-5A9 9 0 0 1 2 26V16a9 9 0 0 1 4.975-8.05l10-5Z\"\n clipRule=\"evenodd\"\n />\n <path\n fill=\"url(#selector-button-c)\"\n fillRule=\"evenodd\"\n d=\"M16.975 2.95a9 9 0 0 1 8.05 0l10 5A9 9 0 0 1 40 16v10a9 9 0 0 1-4.975 8.05l-10 5a9 9 0 0 1-8.05 0l-10-5A9 9 0 0 1 2 26V16a9 9 0 0 1 4.975-8.05l10-5Z\"\n clipRule=\"evenodd\"\n />\n <path\n stroke=\"url(#selector-button-d)\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M32 21c0 6.075-4.925 11-11 11m11-11c0-6.075-4.925-11-11-11m11 11h-4.4M21 32c-6.075 0-11-4.925-11-11m11 11v-4.4M10 21c0-6.075 4.925-11 11-11M10 21h4.4M21 10v4.4\"\n />\n </g>\n <defs>\n <radialGradient\n id=\"selector-button-c\"\n cx={0}\n cy={0}\n r={1}\n gradientTransform=\"matrix(0 40 -40 0 21 1)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#47EBEB\" stopOpacity={0} />\n <stop offset={0.5} stopColor=\"#47EBEB\" stopOpacity={0.25} />\n <stop offset={1} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n </radialGradient>\n <linearGradient\n id=\"selector-button-b\"\n x1={21}\n x2={21}\n y1={1}\n y2={41}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#47EBEB\" />\n <stop offset={0.5} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n <stop offset={1} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n </linearGradient>\n <linearGradient\n id=\"selector-button-d\"\n x1={21}\n y1={1}\n x2={21}\n y2={41}\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#47EBEB\" />\n <stop offset={0.5} stopColor=\"#47EBEB\" stopOpacity={0.75} />\n <stop offset={1} stopColor=\"#47EBEB\" stopOpacity={0.5} />\n </linearGradient>\n <clipPath id=\"selector-button-a\">\n <path fill=\"#fff\" d=\"M0 0h42v42H0z\" />\n </clipPath>\n </defs>\n </svg>\n);\n","import React from \"react\";\n\nexport const SelectorBox = ({\n width,\n height,\n x,\n y,\n name,\n}: {\n width: number;\n height: number;\n x: number;\n y: number;\n name: string;\n}) => {\n const namePosition = y - 6 > 25 ? \"top\" : \"bottom\";\n\n const outlinePosition = x > 7 ? \"outside\" : \"inside\";\n\n return (\n <div\n id=\"selector-box\"\n style={{\n pointerEvents: \"none\",\n position: \"fixed\",\n opacity: name ? 1 : 0,\n transitionProperty: \"width, height, transform, opacity\",\n transitionDuration: \"0.15s\",\n transitionTimingFunction: \"ease-out\",\n border: \"1.5px solid #47EBEB\",\n borderRadius: \"4px\",\n borderTopLeftRadius: 0,\n background: \"rgba(37,160,160, 0.25)\",\n backdropFilter: \"sepia(30%) hue-rotate(180deg)\",\n zIndex: 99998,\n ...(outlinePosition === \"outside\"\n ? {\n left: -6,\n top: -6,\n width: width + 10,\n height: height + 10,\n transform: `translate(${x}px, ${y}px)`,\n }\n : {\n left: 0,\n top: 0,\n width: width - 10,\n height: height - 20,\n transform: `translate(${x + 4}px, ${y + 4}px)`,\n }),\n }}\n >\n <div\n style={{\n position: \"absolute\",\n left: \"-1.5px\",\n background: \"#1D1E30\",\n padding: \"4px 6px\",\n border: \"1.5px solid #47EBEB\",\n fontSize: \"13px\",\n lineHeight: \"16px\",\n fontWeight: 600,\n color: \"#CFD7E2\",\n display: name ? \"block\" : \"none\",\n ...(namePosition === \"top\"\n ? {\n top: \"-27px\",\n borderTopLeftRadius: \"4px\",\n borderTopRightRadius: \"4px\",\n }\n : {\n top: \"-1.5px\",\n borderBottomLeftRadius: \"0\",\n borderBottomRightRadius: \"4px\",\n }),\n }}\n >\n {name}\n </div>\n </div>\n );\n};\n","import React from \"react\";\n\nexport const SelectorHint = ({\n active,\n groupHover,\n}: {\n active: boolean;\n groupHover?: boolean;\n}) => {\n return (\n <div\n style={{\n pointerEvents: \"none\",\n position: \"absolute\",\n left: \"calc(-50% - 100px - 14px)\",\n top: \"-50px\",\n width: \"200px\",\n opacity: active ? 1 : 0,\n transform: groupHover ? \"translateX(0)\" : \"translateX(40px)\",\n transitionDuration: \"0.2s\",\n transitionProperty: \"transform,opacity\",\n transitionTimingFunction: \"ease-in-out\",\n padding: \"8px\",\n fontSize: \"10px\",\n lineHeight: \"12px\",\n fontWeight: 400,\n textShadow:\n \"0 0 2px #1D1E30, 1px 0 2px #1D1E30, -1px 0 2px #1D1E30, 0 1px 2px #1D1E30, 0 -1px 2px #1D1E30\",\n }}\n >\n <kbd\n style={{\n marginLeft: \"4px\",\n padding: \"1px 2px\",\n borderRadius: \"2px\",\n background: \"whitesmoke\",\n color: \"dimgray\",\n border: \"0.5px solid silver\",\n boxShadow: \"0 1px 1px silver\",\n textShadow: \"none\",\n }}\n >\n shift\n </kbd>{\" \"}\n to move to parent.\n <kbd\n style={{\n marginLeft: \"4px\",\n padding: \"1px 2px\",\n borderRadius: \"2px\",\n background: \"whitesmoke\",\n color: \"dimgray\",\n border: \"0.5px solid silver\",\n boxShadow: \"0 1px 1px silver\",\n textShadow: \"none\",\n }}\n >\n click\n </kbd>{\" \"}\n to highlight in monitor.\n </div>\n );\n};\n","import React from \"react\";\nimport { Placement } from \"src/interfaces/placement\";\nimport {\n MIN_PANEL_HEIGHT,\n MIN_PANEL_WIDTH,\n getDefaultPanelSize,\n getMaxPanelHeight,\n getMaxPanelWidth,\n getPanelPosition,\n getPanelToggleTransforms,\n} from \"src/utilities\";\nimport { ResizeHandleIcon } from \"./icons/resize-handle-icon\";\n\ntype Props = {\n placement: Placement;\n defaultWidth?: number;\n minWidth?: number;\n maxWidth?: number;\n defaultHeight?: number;\n minHeight?: number;\n maxHeight?: number;\n children: ({ resizing }: { resizing: string | null }) => React.ReactNode;\n onResize?: (width: number, height: number) => void;\n visible?: boolean;\n};\n\nexport const ResizablePane = ({ placement, visible, children }: Props) => {\n const [hover, setHover] = React.useState(false);\n const [resizing, setResizing] = React.useState<\n \"lx\" | \"rx\" | \"ty\" | \"by\" | null\n >(null);\n const [resizePosition, setResizePosition] = React.useState<{\n x: number;\n y: number;\n } | null>(null);\n const [panelSize, setPanelSize] = React.useState<\n Record<\"width\" | \"height\", number>\n >(getDefaultPanelSize(placement));\n\n React.useEffect(() => {\n const handleResize = () => {\n setPanelSize((p) => getDefaultPanelSize(placement, p));\n };\n\n handleResize();\n\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [placement]);\n\n React.useEffect(() => {\n const handleMouseUp = () => {\n setResizing(null);\n };\n\n if (resizing !== null) {\n window.addEventListener(\"mouseup\", handleMouseUp);\n\n return () => {\n window.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }\n\n return;\n }, [resizing]);\n\n React.useEffect(() => {\n const currentCursor = document.body.style.cursor;\n\n if (resizing?.includes(\"x\")) {\n document.body.style.cursor = \"col-resize\";\n } else if (resizing?.includes(\"y\")) {\n document.body.style.cursor = \"row-resize\";\n }\n\n return () => {\n document.body.style.cursor = currentCursor;\n };\n }, [resizing]);\n\n React.useEffect(() => {\n const handleMouseMove = (e: MouseEvent) => {\n if (resizing?.[1] === \"x\") {\n const diff = e.clientX - (resizePosition?.x ?? e.clientX);\n const newWidth =\n panelSize.width + (resizing === \"lx\" ? -diff : diff) * 2;\n\n setPanelSize((p) => ({\n ...p,\n width: Math.min(\n getMaxPanelWidth(placement),\n Math.max(MIN_PANEL_WIDTH, newWidth),\n ),\n }));\n } else if (resizing?.[1] === \"y\") {\n const diff = e.clientY - (resizePosition?.y ?? e.clientY);\n const newHeight =\n panelSize.height + (resizing === \"ty\" ? -diff : diff) * 1;\n\n setPanelSize((p) => ({\n ...p,\n height: Math.min(\n getMaxPanelHeight(placement),\n Math.max(MIN_PANEL_HEIGHT, newHeight),\n ),\n }));\n }\n };\n\n if (resizing !== null) {\n window.addEventListener(\"mousemove\", handleMouseMove);\n\n return () => {\n window.removeEventListener(\"mousemove\", handleMouseMove);\n };\n }\n\n return;\n }, [resizing, placement]);\n\n return (\n <div\n style={{\n position: \"absolute\",\n borderRadius: \"8px\",\n boxShadow: \"0 0 10px rgba(0, 0, 0, 0.5)\",\n border: \"1px solid rgba(0, 0, 0, 0.5)\",\n transitionProperty: \"transform, opacity\",\n transitionTimingFunction: \"ease-in-out\",\n transitionDuration: \"0.2s\",\n ...getPanelPosition(placement),\n opacity: visible ? 1 : 0,\n transform: `${\n getPanelPosition(placement).transform\n } ${getPanelToggleTransforms(visible ?? false)}`,\n ...panelSize,\n }}\n onMouseEnter={() => {\n setHover(true);\n }}\n onMouseLeave={() => {\n setHover(false);\n }}\n >\n {children({ resizing })}\n {/* */}\n <React.Fragment>\n <div\n style={{\n position: \"absolute\",\n left: 0,\n top: \"50%\",\n width: \"10px\",\n height: \"26px\",\n transform: \"translateY(-13px) translateX(-5px)\",\n cursor: \"col-resize\",\n transition: \"opacity ease-in-out 0.2s\",\n pointerEvents: hover || resizing ? \"auto\" : \"none\",\n opacity: hover || resizing ? 1 : 0,\n }}\n onMouseDown={(event) => {\n setResizing(\"lx\");\n setResizePosition({\n x: event.clientX,\n y: event.clientY,\n });\n\n event.preventDefault();\n }}\n >\n <ResizeHandleIcon />\n </div>\n <div\n style={{\n position: \"absolute\",\n right: 0,\n top: \"50%\",\n width: \"10px\",\n height: \"26px\",\n transform: `translateY(-13px) translateX(5px)`,\n cursor: \"col-resize\",\n transition: \"opacity ease-in-out 0.2s\",\n pointerEvents: hover || resizing ? \"auto\" : \"none\",\n opacity: hover || resizing ? 1 : 0,\n }}\n onMouseDown={(event) => {\n setResizing(\"rx\");\n setResizePosition({\n x: event.clientX,\n y: event.clientY,\n });\n\n event.preventDefault();\n }}\n >\n <ResizeHandleIcon />\n </div>\n <div\n style={{\n position: \"absolute\",\n left: \"50%\",\n top: 0,\n width: \"26px\",\n height: \"10px\",\n transform: \"translateY(-5px) translateX(-13px)\",\n cursor: \"row-resize\",\n transition: \"opacity ease-in-out 0.2s\",\n pointerEvents: hover || resizing ? \"auto\" : \"none\",\n opacity: hover || resizing ? 1 : 0,\n }}\n onMouseDown={(event) => {\n setResizing(\"ty\");\n setResizePosition({\n x: event.clientX,\n y: event.clientY,\n });\n\n event.preventDefault();\n }}\n >\n <ResizeHandleIcon\n style={{\n transform: \"rotate(90deg)\",\n transformOrigin: \"13px 13px\",\n }}\n />\n </div>\n <div\n style={{\n position: \"absolute\",\n left: \"50%\",\n bottom: 0,\n width: \"26px\",\n height: \"10px\",\n transform: \"translateY(5px) translateX(-13px)\",\n cursor: \"row-resize\",\n transition: \"opacity ease-in-out 0.2s\",\n pointerEvents: hover || resizing ? \"auto\" : \"none\",\n opacity: hover || resizing ? 1 : 0,\n }}\n onMouseDown={(event) => {\n setResizing(\"by\");\n setResizePosition({\n x: event.clientX,\n y: event.clientY,\n });\n\n event.preventDefault();\n }}\n >\n <ResizeHandleIcon\n style={{\n transform: \"rotate(90deg)\",\n transformOrigin: \"13px 13px\",\n }}\n />\n </div>\n </React.Fragment>\n </div>\n );\n};\n","import React from \"react\";\n\nexport const ResizeHandleIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n width={10}\n height={26}\n viewBox=\"0 0 10 26\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <rect x={0.5} y={0.5} width={9} height={25} rx={4.5} fill=\"#1D1E30\" />\n <path\n d=\"M7 5C7 6.10457 6.10457 7 5 7C3.89543 7 3 6.10457 3 5C3 3.89543 3.89543 3 5 3C6.10457 3 7 3.89543 7 5Z\"\n fill=\"#303450\"\n />\n <path\n d=\"M7 13C7 14.1046 6.10457 15 5 15C3.89543 15 3 14.1046 3 13C3 11.8954 3.89543 11 5 11C6.10457 11 7 11.8954 7 13Z\"\n fill=\"#303450\"\n />\n <path\n d=\"M7 21C7 22.1046 6.10457 23 5 23C3.89543 23 3 22.1046 3 21C3 19.8954 3.89543 19 5 19C6.10457 19 7 19.8954 7 21Z\"\n fill=\"#303450\"\n />\n <rect x={0.5} y={0.5} width={9} height={25} rx={4.5} stroke=\"#303450\" />\n </svg>\n);\n","import React from \"react\";\nimport { DevToolsContextProvider } from \"@refinedev/devtools-shared\";\n\nexport const DevtoolsProvider =\n __DEV_CONDITION__ !== \"development\"\n ? ({ children }: React.PropsWithChildren) => children as any\n : ({ children }: React.PropsWithChildren) => {\n return (\n <DevToolsContextProvider>{children}</DevToolsContextProvider>\n );\n };\n"],"mappings":"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","names":["src_exports","__export","DevtoolsPanel","DevtoolsProvider","__toCommonJS","import_react","import_react","import_react","RefineDevtoolsIcon","active","hovered","props","React","getPanelToggleTransforms","visible","SIZE","BUFFER","PREFERRED_DEFAULT_WIDTH","PREFERRED_DEFAULT_HEIGHT","MIN_PANEL_WIDTH","MIN_PANEL_HEIGHT","verticalCenterTransform","horizontalCenterTransform","rightAlignTransform","leftAlignTransform","topAlignTransform","bottomAlignTransform","getPinTransform","placement","getPinButtonTransform","hover","getPanelPosition","getMaxPanelWidth","getMaxPanelHeight","getDefaultPanelSize","preferredSize","defaultPreferred","maxPanelWidth","maxPanelHeight","width","height","import_react","import_react_dom","import_react","import_debounce","import_dom_to_fiber_utils","useSelector","active","traceItems","setTraceItems","React","res","data","selectedFiber","setSelectedFiber","activeFiber","setActiveFiber","selectAppropriateFiber","start","fiber","firstParentOfNodeWithName","fiberWithStateNode","acceptedName","pickFiber","target","previousValues","rect","name","_a","element","fiberName","bounding","listener","e","parent","fibers","previousTarget","debounce","import_react","SelectorButtonIcon","props","React","import_react","SelectorBox","width","height","x","y","name","namePosition","outlinePosition","React","import_react","SelectorHint","active","groupHover","React","DevtoolsSelector","onSelectorOpen","onHighlight","groupHover","active","setActive","React","hover","setHover","rect","name","useSelector","selectorBoxRoot","setSelectorBoxRoot","element","onMouseClick","e","event","_a","SelectorButtonIcon","SelectorHint","SelectorBox","DevtoolsPin","active","onClick","groupHover","onSelectorHighlight","onSelectorOpen","hover","setHover","React","getPinButtonTransform","RefineDevtoolsIcon","DevtoolsSelector","import_react","import_react","ResizeHandleIcon","props","React","ResizablePane","placement","visible","children","hover","setHover","React","resizing","setResizing","resizePosition","setResizePosition","panelSize","setPanelSize","getDefaultPanelSize","handleResize","p","handleMouseUp","currentCursor","handleMouseMove","e","diff","newWidth","getMaxPanelWidth","MIN_PANEL_WIDTH","newHeight","getMaxPanelHeight","MIN_PANEL_HEIGHT","getPanelPosition","getPanelToggleTransforms","event","ResizeHandleIcon","import_devtools_shared","DevtoolsPanel","visible","setVisible","React","placement","devtoolsUrl","ws","hover","setHover","onSelectorHighlight","name","onSelectorOpen","SIZE","getPinTransform","DevtoolsPin","v","ResizablePane","resizing","import_react","import_devtools_shared","DevtoolsProvider","children","React"]}
package/dist/panel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../src/panel.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,aAAa,oCA+Ef,CAAC"}
1
+ {"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../src/panel.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,aAAa,oCAgFf,CAAC"}
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.1.0",
2
+ "version": "1.1.2",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
@@ -34,9 +34,9 @@
34
34
  "react-dom": "^17.0.0 || ^18.0.0",
35
35
  "@types/react": "^17.0.0 || ^18.0.0",
36
36
  "@types/react-dom": "^17.0.0 || ^18.0.0",
37
- "@refinedev/devtools-server": "^1.0.2",
38
- "@refinedev/cli": "^2.12.2",
39
- "@refinedev/core": "^4.41.0"
37
+ "@refinedev/devtools-server": "^1.1.2",
38
+ "@refinedev/cli": "^2.15.2",
39
+ "@refinedev/core": "^4.42.0"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@testing-library/jest-dom": "^5.16.4",
package/src/components/devtools-selector.tsx CHANGED
@@ -43,22 +43,30 @@ export const DevtoolsSelector = ({
43
43
  }, [active]);
44
44
 
45
45
  React.useEffect(() => {
46
- const onKeyDown = (e: KeyboardEvent) => {
46
+ const onMouseClick = (e: MouseEvent) => {
47
47
  if (!active) return;
48
48
  if (!name) return;
49
- if (e.code === "Space") {
50
- e?.preventDefault();
51
- e?.stopPropagation();
52
- onHighlight(name);
53
- setActive(false);
54
- }
49
+
50
+ e?.preventDefault();
51
+ e?.stopPropagation();
52
+ e.stopImmediatePropagation();
53
+ onHighlight(name);
54
+ setActive(false);
55
55
  };
56
56
 
57
- document.addEventListener("keydown", onKeyDown);
57
+ if (active) {
58
+ document.addEventListener("click", onMouseClick, {
59
+ capture: true,
60
+ });
58
61
 
59
- return () => {
60
- document.removeEventListener("keydown", onKeyDown);
61
- };
62
+ return () => {
63
+ document.removeEventListener("click", onMouseClick, {
64
+ capture: true,
65
+ });
66
+ };
67
+ }
68
+
69
+ return () => 0;
62
70
  }, [name, onHighlight, active]);
63
71
 
64
72
  React.useEffect(() => {
package/src/components/selector-hint.tsx CHANGED
@@ -55,7 +55,7 @@ export const SelectorHint = ({
55
55
  textShadow: "none",
56
56
  }}
57
57
  >
58
- space
58
+ click
59
59
  </kbd>{" "}
60
60
  to highlight in monitor.
61
61
  </div>
package/src/panel.tsx CHANGED
@@ -65,6 +65,7 @@ export const DevtoolsPanel =
65
65
  <ResizablePane visible={visible} placement={placement}>
66
66
  {({ resizing }) => (
67
67
  <iframe
68
+ allow="clipboard-write;"
68
69
  src={devtoolsUrl}
69
70
  srcDoc={
70
71
  devtoolsUrl