@refinedev/devtools 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Refine Dev Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+<div align="center" style="margin: 30px;">
+    <a href="https://refine.dev">
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/refine_logo.png"  align="center" />
+    </a>
+</div>
+<br/>
+<div align="center">refine is an open-source, headless React framework for developers building enterprise web applications.
+
+It eliminates repetitive tasks in CRUD operations and provides industry-standard solutions for critical project components like **authentication**, **access control**, **routing**, **networking**, **state management**, and **i18n**.
+
+</div>
+<br/>
+
+<div align="center">
+  <sub>Created by <a href="https://refine.dev">refine</a></sub>
+</div>
+
+## About
+
+The [refine](https://refine.dev/) is **headless by design**, offering unlimited styling and customization options. Moreover, refine ships with ready-made integrations for [Ant Design](https://ant.design/), [Material UI](https://mui.com/material-ui/getting-started/overview/), [Mantine](https://mantine.dev/), and [Chakra UI](https://chakra-ui.com/) for convenience.
+
+refine has connectors for 15+ backend services, including REST API, [GraphQL](https://graphql.org/), and popular services like [Airtable](https://www.airtable.com/), [Strapi](https://strapi.io/), [Supabase](https://supabase.com/), [Firebase](https://firebase.google.com/), and [Directus](https://directus.io/)
+
+[Refer to documentation for more info about refine&#8594](https://refine.dev/docs/)
+[Step up to refine tutorials &#8594](https://refine.dev/docs/tutorial/introduction/index/)
+
+## Documentation
+
+For more detailed information an usage, refer to the [refine devtools documentation](https://refine.dev/docs/packages/devtools)
+
+## Install
+
+```
+npm install @refinedev/devtools
+```

package/dist/components/devtools-pin.d.ts

@@ -0,0 +1,10 @@
+declare type Props = {
+    onClick?: () => void;
+    active?: boolean;
+    groupHover?: boolean;
+    onSelectorHighlight: (name: string) => void;
+    onSelectorOpen: () => void;
+};
+export declare const DevtoolsPin: ({ active, onClick, groupHover, onSelectorHighlight, onSelectorOpen, }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=devtools-pin.d.ts.map

package/dist/components/devtools-pin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-pin.d.ts","sourceRoot":"","sources":["../../src/components/devtools-pin.tsx"],"names":[],"mappings":"AAKA,aAAK,KAAK,GAAG;IACT,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,cAAc,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,WAAW,0EAMrB,KAAK,gBA0CP,CAAC"}

package/dist/components/devtools-selector.d.ts

@@ -0,0 +1,8 @@
+declare type Props = {
+    onSelectorOpen: () => void;
+    onHighlight: (name: string) => void;
+    groupHover?: boolean;
+};
+export declare const DevtoolsSelector: ({ onSelectorOpen, onHighlight, groupHover, }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=devtools-selector.d.ts.map

package/dist/components/devtools-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-selector.d.ts","sourceRoot":"","sources":["../../src/components/devtools-selector.tsx"],"names":[],"mappings":"AAOA,aAAK,KAAK,GAAG;IACT,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,iDAI1B,KAAK,gBA6GP,CAAC"}

package/dist/components/icons/devtools-icon.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare type Props = React.SVGProps<SVGSVGElement> & {
+    active?: boolean;
+    hovered?: boolean;
+};
+export declare const RefineDevtoolsIcon: ({ active, hovered, ...props }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=devtools-icon.d.ts.map

package/dist/components/icons/devtools-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-icon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/devtools-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,aAAK,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG;IACzC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,kCAAmC,KAAK,gBAmFtE,CAAC"}

package/dist/components/icons/resize-handle-icon.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const ResizeHandleIcon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+//# sourceMappingURL=resize-handle-icon.d.ts.map

package/dist/components/icons/resize-handle-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-handle-icon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/resize-handle-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,gBAAgB,UAAW,MAAM,QAAQ,CAAC,aAAa,CAAC,gBAwBpE,CAAC"}

package/dist/components/icons/selector-button.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const SelectorButtonIcon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+//# sourceMappingURL=selector-button.d.ts.map

package/dist/components/icons/selector-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector-button.d.ts","sourceRoot":"","sources":["../../../src/components/icons/selector-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,kBAAkB,UAAW,MAAM,QAAQ,CAAC,aAAa,CAAC,gBA8EtE,CAAC"}

package/dist/components/resizable-pane.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { Placement } from "src/interfaces/placement";
+declare type Props = {
+    placement: Placement;
+    defaultWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    defaultHeight?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    children: ({ resizing }: {
+        resizing: string | null;
+    }) => React.ReactNode;
+    onResize?: (width: number, height: number) => void;
+    visible?: boolean;
+};
+export declare const ResizablePane: ({ placement, visible, children }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=resizable-pane.d.ts.map

package/dist/components/resizable-pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-pane.d.ts","sourceRoot":"","sources":["../../src/components/resizable-pane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAYrD,aAAK,KAAK,GAAG;IACT,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE;QAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACzE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,aAAa,qCAAsC,KAAK,gBA6OpE,CAAC"}

package/dist/components/selector-box.d.ts

@@ -0,0 +1,8 @@
+export declare const SelectorBox: ({ width, height, x, y, name, }: {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    name: string;
+}) => JSX.Element;
+//# sourceMappingURL=selector-box.d.ts.map

package/dist/components/selector-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector-box.d.ts","sourceRoot":"","sources":["../../src/components/selector-box.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;WAOb,MAAM;YACL,MAAM;OACX,MAAM;OACN,MAAM;UACH,MAAM;iBAkEf,CAAC"}

package/dist/components/selector-hint.d.ts

@@ -0,0 +1,5 @@
+export declare const SelectorHint: ({ active, groupHover, }: {
+    active: boolean;
+    groupHover?: boolean | undefined;
+}) => JSX.Element;
+//# sourceMappingURL=selector-hint.d.ts.map

package/dist/components/selector-hint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector-hint.d.ts","sourceRoot":"","sources":["../../src/components/selector-hint.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;YAIb,OAAO;;iBAwDlB,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+import w from"react";import F from"react";import m from"react";var _=({active:e,hovered:s,...l})=>m.createElement("svg",{width:42,height:42,viewBox:"0 0 42 42",fill:"none",xmlns:"http://www.w3.org/2000/svg",...l},m.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"}),m.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)"}),m.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)"}),m.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)"}),m.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"})`}}),m.createElement("defs",null,m.createElement("linearGradient",{id:"devtools_icon_gradient_1",x1:21,y1:7,x2:21,y2:35,gradientUnits:"userSpaceOnUse"},m.createElement("stop",{stopColor:"#47EBEB"}),m.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),m.createElement("linearGradient",{id:"devtools_icon_gradient_2",x1:21,y1:1,x2:21,y2:41,gradientUnits:"userSpaceOnUse"},m.createElement("stop",{stopColor:"#47EBEB"}),m.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.5}),m.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),m.createElement("radialGradient",{id:"devtools_icon_gradient_3",cx:0,cy:0,r:1,gradientUnits:"userSpaceOnUse",gradientTransform:"translate(21 1) rotate(90) scale(40)"},m.createElement("stop",{stopColor:"#47EBEB",stopOpacity:0}),m.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.25}),m.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5}))));var $=e=>e?"scaleX(1) translateY(0)":"scaleX(0) translateY(25vw)",v=50,x=10,J=()=>typeof window<"u"?window.innerWidth*.7:1440*.7,Q=()=>typeof window<"u"?window.innerHeight*.7:900*.7,k=640,I=360,N=`translateY(calc((100vh - ${v}px) / 2))`,O=`translateX(calc((100vw - ${v*2}px) / 2))`,R=`translateX(calc((100vw - ${v}px) - ${x}px))`,ee=`translateX(${x}px)`,te=`translateY(${x}px)`,oe=`translateY(calc((100vh - ${v}px) - 0px))`,V=e=>{switch(e){case"left":return`${ee} ${N}`;case"right":return`${R} ${N}`;case"top":return`${te} ${O}`;default:case"bottom":return`${oe} ${O}`}},G=e=>`translateY(${e?"0":"50%"})`,D=e=>{switch(e){case"left":return{left:`calc(${v}px + ${x}px)`,top:"50%",transform:"translateY(-50%)"};case"right":return{right:`calc(${v}px + ${x}px)`,top:"50%",transform:"translateY(-50%)"};case"top":return{left:"50%",top:`calc(${v}px + ${x}px)`,transform:"translateX(-50%)"};default:case"bottom":return{left:"50%",bottom:`calc(${v}px + ${x}px)`,transform:"translateX(-50%)"}}},B=e=>{switch(e){case"left":case"right":return-x-v-x+(typeof window<"u"?window.innerWidth:1440)-x;case"top":case"bottom":return-x+(typeof window<"u"?window.innerWidth:1440)-x}},L=e=>{switch(e){case"left":case"right":return-x+(typeof window<"u"?window.innerHeight:900)-x;case"top":case"bottom":return-x-v-x+(typeof window<"u"?window.innerHeight:900)-x}},T=(e,s)=>{let l={width:J(),height:Q()},n=B(e),c=L(e),t=Math.min(n,(s??l).width),a=Math.min(c,(s??l).height);return{width:t,height:a}};import E from"react";import{createPortal as ae}from"react-dom";import y from"react";import ne from"lodash/debounce";import{getElementFromFiber as re,getFiberFromElement as ie,getFirstFiberHasName as se,getFirstStateNodeFiber as le,getNameFromFiber as W,getParentOfFiber as A}from"@aliemir/dom-to-fiber-utils";var X=e=>{let[s,l]=y.useState([]);y.useEffect(()=>{e&&fetch("http://localhost:5001/api/unique-trace-items").then(r=>r.json().then(i=>l(i.data)))},[e]);let[n,c]=y.useState({stateNode:null,nameFiber:null}),[t,a]=y.useState({stateNode:null,nameFiber:null,derived:!1});y.useEffect(()=>e?()=>{c({stateNode:null,nameFiber:null}),a({stateNode:null,nameFiber:null,derived:!1})}:()=>0,[e]);let b=y.useCallback(r=>{let i=r,d,h,M=!1;for(;!M&&i;)d=se(i),h=le(d),M=s.includes(W(d)??""),M||(i=A(i));return h&&d?{stateNode:h,nameFiber:d}:{stateNode:null,nameFiber:null}},[s]),g=y.useCallback(r=>{let i=ie(r);c(b(i))},[s]);y.useEffect(()=>{(t.stateNode!==n.stateNode||t.nameFiber!==n.nameFiber)&&a({stateNode:n.stateNode,nameFiber:n.nameFiber,derived:!1})},[n]);let p=y.useRef({rect:{width:0,height:0,x:0,y:0},name:""}),{rect:C,name:o}=y.useMemo(()=>{var r;if(t.stateNode||t.nameFiber){let i=t.stateNode?re(t.stateNode):null,d=t.nameFiber?W(t.nameFiber):null;if(!i)return{rect:p.current.rect,name:d??p.current.name};let h=(r=i.getBoundingClientRect)==null?void 0:r.call(i);return h?{rect:{width:h.width,height:h.height,x:h.left,y:h.top},name:d??p.current.name}:{rect:p.current.rect,name:d??p.current.name}}return p.current},[t]);return p.current={rect:C,name:o},y.useEffect(()=>{if(e){let r=i=>{if(i.key==="Shift"&&t.stateNode){i.stopPropagation(),i.preventDefault();let d=A(t.nameFiber),h=b(d);if(h.nameFiber&&h.stateNode){a({...h,derived:!0});return}}};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)}return()=>0},[t,e]),y.useEffect(()=>{if(e){let r=null,i=ne(d=>{if(d!=null&&d.target){if(r===d.target)return;g(d.target),r=d.target}},30);return document.addEventListener("mousemove",i),()=>document.removeEventListener("mousemove",i)}else return()=>0},[e,g]),{rect:C,name:o}};import u from"react";var z=e=>u.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:42,height:42,viewBox:"0 0 42 42",fill:"none",...e},u.createElement("g",{clipPath:"url(#selector-button-a)"},u.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.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.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.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.createElement("defs",null,u.createElement("radialGradient",{id:"selector-button-c",cx:0,cy:0,r:1,gradientTransform:"matrix(0 40 -40 0 21 1)",gradientUnits:"userSpaceOnUse"},u.createElement("stop",{stopColor:"#47EBEB",stopOpacity:0}),u.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.25}),u.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),u.createElement("linearGradient",{id:"selector-button-b",x1:21,x2:21,y1:1,y2:41,gradientUnits:"userSpaceOnUse"},u.createElement("stop",{stopColor:"#47EBEB"}),u.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.5}),u.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),u.createElement("linearGradient",{id:"selector-button-d",x1:21,y1:1,x2:21,y2:41,gradientUnits:"userSpaceOnUse"},u.createElement("stop",{stopColor:"#47EBEB"}),u.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.75}),u.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),u.createElement("clipPath",{id:"selector-button-a"},u.createElement("path",{fill:"#fff",d:"M0 0h42v42H0z"}))));import Y from"react";var U=({width:e,height:s,x:l,y:n,name:c})=>{let t=n-6>25?"top":"bottom",a=l>7?"outside":"inside";return Y.createElement("div",{id:"selector-box",style:{pointerEvents:"none",position:"fixed",opacity:c?1:0,transition:"all 0.2s ease-in-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,...a==="outside"?{left:-6,top:-6,width:e+10,height:s+10,transform:`translate(${l}px, ${n}px)`}:{left:0,top:0,width:e-10,height:s-20,transform:`translate(${l+4}px, ${n+4}px)`}}},Y.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:c?"block":"none",...t==="top"?{top:"-27px",borderTopLeftRadius:"4px",borderTopRightRadius:"4px"}:{top:"-1.5px",borderBottomLeftRadius:"0",borderBottomRightRadius:"4px"}}},c))};import H from"react";var Z=({active:e,groupHover:s})=>H.createElement("div",{style:{pointerEvents:"none",position:"absolute",left:"calc(-50% - 100px - 14px)",top:"-50px",width:"200px",opacity:e?1:0,transform:s?"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"}},H.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.",H.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 j=({onSelectorOpen:e,onHighlight:s,groupHover:l})=>{let[n,c]=E.useState(!1),[t,a]=E.useState(!1),{rect:b,name:g}=X(n),[p,C]=E.useState(null);return E.useEffect(()=>{if(!p){let o=document.createElement("div");o.id="selector-box-root",document.body.appendChild(o),C(o)}},[]),E.useEffect(()=>{n?document.body.style.cursor="crosshair":document.body.style.cursor="default"},[n]),E.useEffect(()=>{let o=r=>{n&&g&&r.code==="Space"&&(r==null||r.preventDefault(),r==null||r.stopPropagation(),s(g),c(!1))};return document.addEventListener("keydown",o),()=>{document.removeEventListener("keydown",o)}},[g,s,n]),E.useEffect(()=>{n&&e()},[n,e]),E.createElement("div",{style:{position:"absolute",left:"calc((100px - ((100% - 42px) / 2)) + 7px)",top:"calc((100% - 28px) / 2)",transform:l?"translateX(0)":"translateX(-40px)",transitionDuration:"0.2s",transitionProperty:"transform,opacity",transitionTimingFunction:"ease-in-out",pointerEvents:l?"auto":"none",height:28,width:28}},E.createElement("div",{role:"button",title:"Element Selector",onMouseOver:()=>a(!0),onMouseOut:()=>a(!1),onClick:o=>{var r;o.preventDefault(),o.stopPropagation(),(r=document==null?void 0:document.activeElement)==null||r.blur(),c(i=>!i)},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:l?1:0}},E.createElement(z,{width:28,height:28,style:{pointerEvents:"none"}})),E.createElement(Z,{active:n,groupHover:l}),n&&p&&ae(E.createElement(U,{...b,name:g}),p))};var K=({active:e,onClick:s,groupHover:l,onSelectorHighlight:n,onSelectorOpen:c})=>{let[t,a]=F.useState(!1);return F.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}) ${G(l)}`,filter:`drop-shadow(0 0 ${t?"8px":"5px"} rgba(71, 235, 235, ${t?"0.5":"0.25"}))`},onMouseOver:()=>a(!0),onMouseOut:()=>a(!1),onClick:s},F.createElement(_,{active:e,hovered:t}),F.createElement(j,{onSelectorOpen:c,onHighlight:n,groupHover:t}))};import f from"react";import P from"react";var S=e=>P.createElement("svg",{width:10,height:26,viewBox:"0 0 10 26",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},P.createElement("rect",{x:.5,y:.5,width:9,height:25,rx:4.5,fill:"#1D1E30"}),P.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"}),P.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"}),P.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"}),P.createElement("rect",{x:.5,y:.5,width:9,height:25,rx:4.5,stroke:"#303450"}));var q=({placement:e,visible:s,children:l})=>{let[n,c]=f.useState(!1),[t,a]=f.useState(null),[b,g]=f.useState(null),[p,C]=f.useState(T(e));return f.useEffect(()=>{let o=()=>{C(r=>T(e,r))};return o(),window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)}},[e]),f.useEffect(()=>{let o=()=>{a(null)};if(t!==null)return window.addEventListener("mouseup",o),()=>{window.removeEventListener("mouseup",o)}},[t]),f.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]),f.useEffect(()=>{let o=r=>{if((t==null?void 0:t[1])==="x"){let i=r.clientX-((b==null?void 0:b.x)??r.clientX),d=p.width+(t==="lx"?-i:i)*2;C(h=>({...h,width:Math.min(B(e),Math.max(k,d))}))}else if((t==null?void 0:t[1])==="y"){let i=r.clientY-((b==null?void 0:b.y)??r.clientY),d=p.height+(t==="ty"?-i:i)*1;C(h=>({...h,height:Math.min(L(e),Math.max(I,d))}))}};if(t!==null)return window.addEventListener("mousemove",o),()=>{window.removeEventListener("mousemove",o)}},[t,e]),f.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",...D(e),opacity:s?1:0,transform:`${D(e).transform} ${$(s??!1)}`,...p},onMouseEnter:()=>{c(!0)},onMouseLeave:()=>{c(!1)}},l({resizing:t}),f.createElement(f.Fragment,null,f.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=>{a("lx"),g({x:o.clientX,y:o.clientY}),o.preventDefault()}},f.createElement(S,null)),f.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=>{a("rx"),g({x:o.clientX,y:o.clientY}),o.preventDefault()}},f.createElement(S,null)),f.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=>{a("ty"),g({x:o.clientX,y:o.clientY}),o.preventDefault()}},f.createElement(S,{style:{transform:"rotate(90deg)",transformOrigin:"13px 13px"}})),f.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=>{a("by"),g({x:o.clientX,y:o.clientY}),o.preventDefault()}},f.createElement(S,{style:{transform:"rotate(90deg)",transformOrigin:"13px 13px"}}))))};import{DevToolsContext as de,DevtoolsEvent as pe,send as ue}from"@refinedev/devtools-shared";var ce=process.env.NODE_ENV!=="development"?()=>null:()=>{let[e,s]=w.useState(!1),[l]=w.useState("bottom"),{devtoolsUrl:n,ws:c}=w.useContext(de),[t,a]=w.useState(!1),b=w.useCallback(p=>{c&&ue(c,pe.DEVTOOLS_HIGHLIGHT_IN_MONITOR,{name:p}),s(!0)},[c]),g=w.useCallback(()=>{s(!1)},[]);return w.createElement("div",{style:{position:"fixed",left:0,top:0,zIndex:99999,width:`${v*2}px`,height:`${v}px`,transform:V(l)},onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1)},w.createElement(K,{active:e,onClick:()=>s(p=>!p),groupHover:t,onSelectorHighlight:b,onSelectorOpen:g}),w.createElement(q,{visible:e,placement:l},({resizing:p})=>w.createElement("iframe",{src:n,srcDoc:n?void 0:`
+                            <html style="height:100%;padding:0;margin:0;">
+                                <body style="display:flex;justify-content:center;height:100%;padding:24px;margin:0;align-items:center;box-sizing:border-box;">
+                                    <h1 style="font-family:ui-monospace,monospace;color:#CFD7E2;text-align:center;">Could not connect to the devtools server</h1>
+                                </body>
+                            </html>
+                        `,style:{width:"100%",height:"100%",border:"none",borderRadius:"7px",pointerEvents:p?"none":"auto",background:"#14141F"}})))};import fe from"react";import{DevToolsContextProvider as me}from"@refinedev/devtools-shared";var he=process.env.NODE_ENV!=="development"?({children:e})=>e:({children:e})=>fe.createElement(me,null,e);export{ce as DevtoolsPanel,he as DevtoolsProvider};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../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":["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 (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]);\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            }, 30);\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                transition: \"all 0.2s ease-in-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":["React","React","React","RefineDevtoolsIcon","active","hovered","props","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","React","createPortal","React","debounce","getElementFromFiber","getFiberFromElement","getFirstFiberHasName","getFirstStateNodeFiber","getNameFromFiber","getParentOfFiber","useSelector","active","traceItems","setTraceItems","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","React","SelectorButtonIcon","props","React","SelectorBox","width","height","x","y","name","namePosition","outlinePosition","React","SelectorHint","active","groupHover","DevtoolsSelector","onSelectorOpen","onHighlight","groupHover","active","setActive","React","hover","setHover","rect","name","useSelector","selectorBoxRoot","setSelectorBoxRoot","element","onKeyDown","e","event","_a","SelectorButtonIcon","SelectorHint","createPortal","SelectorBox","DevtoolsPin","active","onClick","groupHover","onSelectorHighlight","onSelectorOpen","hover","setHover","React","getPinButtonTransform","RefineDevtoolsIcon","DevtoolsSelector","React","React","ResizeHandleIcon","props","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","DevToolsContext","DevtoolsEvent","send","DevtoolsPanel","visible","setVisible","React","placement","devtoolsUrl","ws","hover","setHover","onSelectorHighlight","name","onSelectorOpen","SIZE","getPinTransform","DevtoolsPin","v","ResizablePane","resizing","React","DevToolsContextProvider","DevtoolsProvider","children"]}

package/dist/iife/index.js

@@ -0,0 +1,8 @@
+(()=>{var he=Object.create;var G=Object.defineProperty;var ve=Object.getOwnPropertyDescriptor;var ge=Object.getOwnPropertyNames;var xe=Object.getPrototypeOf,be=Object.prototype.hasOwnProperty;var b=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,r)=>(typeof require<"u"?require:t)[r]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw new Error('Dynamic require of "'+e+'" is not supported')});var Ee=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var ye=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of ge(t))!be.call(e,s)&&s!==r&&G(e,s,{get:()=>t[s],enumerable:!(n=ve(t,s))||n.enumerable});return e};var E=(e,t,r)=>(r=e!=null?he(xe(e)):{},ye(t||!e||!e.__esModule?G(r,"default",{value:e,enumerable:!0}):r,e));var A=Ee((st,ce)=>{var Le=Object.create,N=Object.defineProperty,_e=Object.getOwnPropertyDescriptor,Te=Object.getOwnPropertyNames,Me=Object.getPrototypeOf,Fe=Object.prototype.hasOwnProperty,Ne=(e,t)=>{for(var r in t)N(e,r,{get:t[r],enumerable:!0})},ie=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of Te(t))!Fe.call(e,s)&&s!==r&&N(e,s,{get:()=>t[s],enumerable:!(n=_e(t,s))||n.enumerable});return e},He=(e,t,r)=>(r=e!=null?Le(Me(e)):{},ie(t||!e||!e.__esModule?N(r,"default",{value:e,enumerable:!0}):r,e)),Be=e=>ie(N({},"__esModule",{value:!0}),e),se={};Ne(se,{DevToolsContext:()=>pe,DevToolsContextProvider:()=>Ve,DevtoolsEvent:()=>ae,hooksByScope:()=>Ie,receive:()=>ue,scopes:()=>le,send:()=>de});ce.exports=Be(se);var ae=(e=>(e.RELOAD="devtools:reload",e.DEVTOOLS_INIT="devtools:init",e.DEVTOOLS_HANDSHAKE="devtools:handshake",e.DEVTOOLS_ALREADY_CONNECTED="devtools:already-connected",e.ACTIVITY="devtools:send-activity",e.DEVTOOLS_ACTIVITY_UPDATE="devtools:activity-update",e.DEVTOOLS_CONNECTED_APP="devtools:connected-app",e.DEVTOOLS_DISCONNECTED_APP="devtools:disconnected-app",e.DEVTOOLS_HIGHLIGHT_IN_MONITOR="devtools:highlight-in-monitor",e.DEVTOOLS_HIGHLIGHT_IN_MONITOR_ACTION="devtools:highlight-in-monitor-action",e.DEVTOOLS_LOGIN_SUCCESS="devtools:login-success",e.DEVTOOLS_RELOAD_AFTER_LOGIN="devtools:reload-after-login",e))(ae||{}),le={useCan:"access-control",useLog:"audit-log",useLogList:"audit-log",useCreate:"data",useCreateMany:"data",useCustom:"data",useCustomMutation:"data",useDelete:"data",useDeleteMany:"data",useInfiniteList:"data",useList:"data",useMany:"data",useOne:"data",useUpdate:"data",useUpdateMany:"data",useForgotPassword:"auth",useGetIdentity:"auth",useIsAuthenticated:"auth",useLogin:"auth",useLogout:"auth",useOnError:"auth",usePermissions:"auth",useRegister:"auth",useUpdatePassword:"auth"},Ie=Object.entries(le).reduce((e,[t,r])=>(e[r]||(e[r]=[]),e[r].push(t),e),{}),L=He(b("react"));async function de(e,t,r){if(e.readyState!==e.OPEN){await new Promise(n=>{let s=()=>{e.send(JSON.stringify({event:t,payload:r})),n(),e.removeEventListener("open",s)};e.addEventListener("open",s)});return}else{e.send(JSON.stringify({event:t,payload:r}));return}}function ue(e,t,r){let n=s=>{let{event:o,payload:d}=JSON.parse(s.data);t===o&&r(d)};return e.addEventListener("message",n),()=>{e.removeEventListener("message",n)}}var pe=L.default.createContext({__devtools:!1,port:5002,url:"localhost",secure:!1,ws:null}),Ve=({__devtools:e,port:t,children:r})=>{let[n,s]=L.default.useState({__devtools:e??!1,port:t??5002,url:"localhost",secure:!1,ws:null}),[o,d]=L.default.useState(null);L.default.useEffect(()=>{let f=new WebSocket(`${n.secure?"wss":"ws"}://localhost:${n.port}`),u=ue(f,"devtools:handshake",O=>{s(i=>({...i,devtoolsUrl:O.url})),u()});return f.addEventListener("open",()=>{n.__devtools||de(f,"devtools:init",{url:window.location.origin})}),d(f),()=>{u(),f.close(1e3,window.location.origin)}},[]);let x=L.default.useMemo(()=>({...n,ws:o}),[n,o]);return L.default.createElement(pe.Provider,{value:x},r)}});var P=E(b("react"));var T=E(b("react"));var h=E(b("react")),U=({active:e,hovered:t,...r})=>h.default.createElement("svg",{width:42,height:42,viewBox:"0 0 42 42",fill:"none",xmlns:"http://www.w3.org/2000/svg",...r},h.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"}),h.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)"}),h.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)"}),h.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)"}),h.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"})`}}),h.default.createElement("defs",null,h.default.createElement("linearGradient",{id:"devtools_icon_gradient_1",x1:21,y1:7,x2:21,y2:35,gradientUnits:"userSpaceOnUse"},h.default.createElement("stop",{stopColor:"#47EBEB"}),h.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),h.default.createElement("linearGradient",{id:"devtools_icon_gradient_2",x1:21,y1:1,x2:21,y2:41,gradientUnits:"userSpaceOnUse"},h.default.createElement("stop",{stopColor:"#47EBEB"}),h.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.5}),h.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),h.default.createElement("radialGradient",{id:"devtools_icon_gradient_3",cx:0,cy:0,r:1,gradientUnits:"userSpaceOnUse",gradientTransform:"translate(21 1) rotate(90) scale(40)"},h.default.createElement("stop",{stopColor:"#47EBEB",stopOpacity:0}),h.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.25}),h.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5}))));var X=e=>e?"scaleX(1) translateY(0)":"scaleX(0) translateY(25vw)",w=50,g=10,we=()=>typeof window<"u"?window.innerWidth*.7:1440*.7,Ce=()=>typeof window<"u"?window.innerHeight*.7:900*.7,z=640,Z=360,W=`translateY(calc((100vh - ${w}px) / 2))`,Y=`translateX(calc((100vw - ${w*2}px) / 2))`,Se=`translateX(calc((100vw - ${w}px) - ${g}px))`,Pe=`translateX(${g}px)`,Oe=`translateY(${g}px)`,De=`translateY(calc((100vh - ${w}px) - 0px))`,j=e=>{switch(e){case"left":return`${Pe} ${W}`;case"right":return`${Se} ${W}`;case"top":return`${Oe} ${Y}`;default:case"bottom":return`${De} ${Y}`}},K=e=>`translateY(${e?"0":"50%"})`,B=e=>{switch(e){case"left":return{left:`calc(${w}px + ${g}px)`,top:"50%",transform:"translateY(-50%)"};case"right":return{right:`calc(${w}px + ${g}px)`,top:"50%",transform:"translateY(-50%)"};case"top":return{left:"50%",top:`calc(${w}px + ${g}px)`,transform:"translateX(-50%)"};default:case"bottom":return{left:"50%",bottom:`calc(${w}px + ${g}px)`,transform:"translateX(-50%)"}}},I=e=>{switch(e){case"left":case"right":return-g-w-g+(typeof window<"u"?window.innerWidth:1440)-g;case"top":case"bottom":return-g+(typeof window<"u"?window.innerWidth:1440)-g}},V=e=>{switch(e){case"left":case"right":return-g+(typeof window<"u"?window.innerHeight:900)-g;case"top":case"bottom":return-g-w-g+(typeof window<"u"?window.innerHeight:900)-g}},$=(e,t)=>{let r={width:we(),height:Ce()},n=I(e),s=V(e),o=Math.min(n,(t??r).width),d=Math.min(s,(t??r).height);return{width:o,height:d}};var S=E(b("react")),te=b("react-dom");var C=E(b("react")),R=E(b("lodash/debounce")),y=b("@aliemir/dom-to-fiber-utils"),J=e=>{let[t,r]=C.default.useState([]);C.default.useEffect(()=>{e&&fetch("http://localhost:5001/api/unique-trace-items").then(a=>a.json().then(l=>r(l.data)))},[e]);let[n,s]=C.default.useState({stateNode:null,nameFiber:null}),[o,d]=C.default.useState({stateNode:null,nameFiber:null,derived:!1});C.default.useEffect(()=>e?()=>{s({stateNode:null,nameFiber:null}),d({stateNode:null,nameFiber:null,derived:!1})}:()=>0,[e]);let x=C.default.useCallback(a=>{let l=a,p,v,H=!1;for(;!H&&l;)p=(0,y.getFirstFiberHasName)(l),v=(0,y.getFirstStateNodeFiber)(p),H=t.includes((0,y.getNameFromFiber)(p)??""),H||(l=(0,y.getParentOfFiber)(l));return v&&p?{stateNode:v,nameFiber:p}:{stateNode:null,nameFiber:null}},[t]),f=C.default.useCallback(a=>{let l=(0,y.getFiberFromElement)(a);s(x(l))},[t]);C.default.useEffect(()=>{(o.stateNode!==n.stateNode||o.nameFiber!==n.nameFiber)&&d({stateNode:n.stateNode,nameFiber:n.nameFiber,derived:!1})},[n]);let u=C.default.useRef({rect:{width:0,height:0,x:0,y:0},name:""}),{rect:O,name:i}=C.default.useMemo(()=>{var a;if(o.stateNode||o.nameFiber){let l=o.stateNode?(0,y.getElementFromFiber)(o.stateNode):null,p=o.nameFiber?(0,y.getNameFromFiber)(o.nameFiber):null;if(!l)return{rect:u.current.rect,name:p??u.current.name};let v=(a=l.getBoundingClientRect)==null?void 0:a.call(l);return v?{rect:{width:v.width,height:v.height,x:v.left,y:v.top},name:p??u.current.name}:{rect:u.current.rect,name:p??u.current.name}}return u.current},[o]);return u.current={rect:O,name:i},C.default.useEffect(()=>{if(e){let a=l=>{if(l.key==="Shift"&&o.stateNode){l.stopPropagation(),l.preventDefault();let p=(0,y.getParentOfFiber)(o.nameFiber),v=x(p);if(v.nameFiber&&v.stateNode){d({...v,derived:!0});return}}};return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)}return()=>0},[o,e]),C.default.useEffect(()=>{if(e){let a=null,l=(0,R.default)(p=>{if(p!=null&&p.target){if(a===p.target)return;f(p.target),a=p.target}},30);return document.addEventListener("mousemove",l),()=>document.removeEventListener("mousemove",l)}else return()=>0},[e,f]),{rect:O,name:i}};var c=E(b("react")),q=e=>c.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:42,height:42,viewBox:"0 0 42 42",fill:"none",...e},c.default.createElement("g",{clipPath:"url(#selector-button-a)"},c.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"}),c.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"}),c.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"}),c.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"})),c.default.createElement("defs",null,c.default.createElement("radialGradient",{id:"selector-button-c",cx:0,cy:0,r:1,gradientTransform:"matrix(0 40 -40 0 21 1)",gradientUnits:"userSpaceOnUse"},c.default.createElement("stop",{stopColor:"#47EBEB",stopOpacity:0}),c.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.25}),c.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),c.default.createElement("linearGradient",{id:"selector-button-b",x1:21,x2:21,y1:1,y2:41,gradientUnits:"userSpaceOnUse"},c.default.createElement("stop",{stopColor:"#47EBEB"}),c.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.5}),c.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),c.default.createElement("linearGradient",{id:"selector-button-d",x1:21,y1:1,x2:21,y2:41,gradientUnits:"userSpaceOnUse"},c.default.createElement("stop",{stopColor:"#47EBEB"}),c.default.createElement("stop",{offset:.5,stopColor:"#47EBEB",stopOpacity:.75}),c.default.createElement("stop",{offset:1,stopColor:"#47EBEB",stopOpacity:.5})),c.default.createElement("clipPath",{id:"selector-button-a"},c.default.createElement("path",{fill:"#fff",d:"M0 0h42v42H0z"}))));var k=E(b("react")),Q=({width:e,height:t,x:r,y:n,name:s})=>{let o=n-6>25?"top":"bottom",d=r>7?"outside":"inside";return k.default.createElement("div",{id:"selector-box",style:{pointerEvents:"none",position:"fixed",opacity:s?1:0,transition:"all 0.2s ease-in-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:t+10,transform:`translate(${r}px, ${n}px)`}:{left:0,top:0,width:e-10,height:t-20,transform:`translate(${r+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:s?"block":"none",...o==="top"?{top:"-27px",borderTopLeftRadius:"4px",borderTopRightRadius:"4px"}:{top:"-1.5px",borderBottomLeftRadius:"0",borderBottomRightRadius:"4px"}}},s))};var F=E(b("react")),ee=({active:e,groupHover:t})=>F.default.createElement("div",{style:{pointerEvents:"none",position:"absolute",left:"calc(-50% - 100px - 14px)",top:"-50px",width:"200px",opacity:e?1:0,transform:t?"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"}},F.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.",F.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 oe=({onSelectorOpen:e,onHighlight:t,groupHover:r})=>{let[n,s]=S.default.useState(!1),[o,d]=S.default.useState(!1),{rect:x,name:f}=J(n),[u,O]=S.default.useState(null);return S.default.useEffect(()=>{if(!u){let i=document.createElement("div");i.id="selector-box-root",document.body.appendChild(i),O(i)}},[]),S.default.useEffect(()=>{n?document.body.style.cursor="crosshair":document.body.style.cursor="default"},[n]),S.default.useEffect(()=>{let i=a=>{n&&f&&a.code==="Space"&&(a==null||a.preventDefault(),a==null||a.stopPropagation(),t(f),s(!1))};return document.addEventListener("keydown",i),()=>{document.removeEventListener("keydown",i)}},[f,t,n]),S.default.useEffect(()=>{n&&e()},[n,e]),S.default.createElement("div",{style:{position:"absolute",left:"calc((100px - ((100% - 42px) / 2)) + 7px)",top:"calc((100% - 28px) / 2)",transform:r?"translateX(0)":"translateX(-40px)",transitionDuration:"0.2s",transitionProperty:"transform,opacity",transitionTimingFunction:"ease-in-out",pointerEvents:r?"auto":"none",height:28,width:28}},S.default.createElement("div",{role:"button",title:"Element Selector",onMouseOver:()=>d(!0),onMouseOut:()=>d(!1),onClick:i=>{var a;i.preventDefault(),i.stopPropagation(),(a=document==null?void 0:document.activeElement)==null||a.blur(),s(l=>!l)},style:{width:28,height:28,border:"none",background:"none",outline:"none",margin:0,padding:0,cursor:"pointer",transform:`scale(${o?1.05:1})`,transitionProperty:"transform,opacity",transitionTimingFunction:"ease-in-out",transitionDuration:"0.1s",opacity:r?1:0}},S.default.createElement(q,{width:28,height:28,style:{pointerEvents:"none"}})),S.default.createElement(ee,{active:n,groupHover:r}),n&&u&&(0,te.createPortal)(S.default.createElement(Q,{...x,name:f}),u))};var ne=({active:e,onClick:t,groupHover:r,onSelectorHighlight:n,onSelectorOpen:s})=>{let[o,d]=T.default.useState(!1);return T.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(${o?1.05:1}) ${K(r)}`,filter:`drop-shadow(0 0 ${o?"8px":"5px"} rgba(71, 235, 235, ${o?"0.5":"0.25"}))`},onMouseOver:()=>d(!0),onMouseOut:()=>d(!1),onClick:t},T.default.createElement(U,{active:e,hovered:o}),T.default.createElement(oe,{onSelectorOpen:s,onHighlight:n,groupHover:o}))};var m=E(b("react"));var D=E(b("react")),M=e=>D.default.createElement("svg",{width:10,height:26,viewBox:"0 0 10 26",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},D.default.createElement("rect",{x:.5,y:.5,width:9,height:25,rx:4.5,fill:"#1D1E30"}),D.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"}),D.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"}),D.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"}),D.default.createElement("rect",{x:.5,y:.5,width:9,height:25,rx:4.5,stroke:"#303450"}));var re=({placement:e,visible:t,children:r})=>{let[n,s]=m.default.useState(!1),[o,d]=m.default.useState(null),[x,f]=m.default.useState(null),[u,O]=m.default.useState($(e));return m.default.useEffect(()=>{let i=()=>{O(a=>$(e,a))};return i(),window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)}},[e]),m.default.useEffect(()=>{let i=()=>{d(null)};if(o!==null)return window.addEventListener("mouseup",i),()=>{window.removeEventListener("mouseup",i)}},[o]),m.default.useEffect(()=>{let i=document.body.style.cursor;return o!=null&&o.includes("x")?document.body.style.cursor="col-resize":o!=null&&o.includes("y")&&(document.body.style.cursor="row-resize"),()=>{document.body.style.cursor=i}},[o]),m.default.useEffect(()=>{let i=a=>{if((o==null?void 0:o[1])==="x"){let l=a.clientX-((x==null?void 0:x.x)??a.clientX),p=u.width+(o==="lx"?-l:l)*2;O(v=>({...v,width:Math.min(I(e),Math.max(z,p))}))}else if((o==null?void 0:o[1])==="y"){let l=a.clientY-((x==null?void 0:x.y)??a.clientY),p=u.height+(o==="ty"?-l:l)*1;O(v=>({...v,height:Math.min(V(e),Math.max(Z,p))}))}};if(o!==null)return window.addEventListener("mousemove",i),()=>{window.removeEventListener("mousemove",i)}},[o,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",...B(e),opacity:t?1:0,transform:`${B(e).transform} ${X(t??!1)}`,...u},onMouseEnter:()=>{s(!0)},onMouseLeave:()=>{s(!1)}},r({resizing:o}),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||o?"auto":"none",opacity:n||o?1:0},onMouseDown:i=>{d("lx"),f({x:i.clientX,y:i.clientY}),i.preventDefault()}},m.default.createElement(M,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||o?"auto":"none",opacity:n||o?1:0},onMouseDown:i=>{d("rx"),f({x:i.clientX,y:i.clientY}),i.preventDefault()}},m.default.createElement(M,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||o?"auto":"none",opacity:n||o?1:0},onMouseDown:i=>{d("ty"),f({x:i.clientX,y:i.clientY}),i.preventDefault()}},m.default.createElement(M,{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||o?"auto":"none",opacity:n||o?1:0},onMouseDown:i=>{d("by"),f({x:i.clientX,y:i.clientY}),i.preventDefault()}},m.default.createElement(M,{style:{transform:"rotate(90deg)",transformOrigin:"13px 13px"}}))))};var _=E(A()),$e=process.env.NODE_ENV!=="development"?()=>null:()=>{let[e,t]=P.default.useState(!1),[r]=P.default.useState("bottom"),{devtoolsUrl:n,ws:s}=P.default.useContext(_.DevToolsContext),[o,d]=P.default.useState(!1),x=P.default.useCallback(u=>{s&&(0,_.send)(s,_.DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR,{name:u}),t(!0)},[s]),f=P.default.useCallback(()=>{t(!1)},[]);return P.default.createElement("div",{style:{position:"fixed",left:0,top:0,zIndex:99999,width:`${w*2}px`,height:`${w}px`,transform:j(r)},onMouseEnter:()=>d(!0),onMouseLeave:()=>d(!1)},P.default.createElement(ne,{active:e,onClick:()=>t(u=>!u),groupHover:o,onSelectorHighlight:x,onSelectorOpen:f}),P.default.createElement(re,{visible:e,placement:r},({resizing:u})=>P.default.createElement("iframe",{src:n,srcDoc:n?void 0:`
+                            <html style="height:100%;padding:0;margin:0;">
+                                <body style="display:flex;justify-content:center;height:100%;padding:24px;margin:0;align-items:center;box-sizing:border-box;">
+                                    <h1 style="font-family:ui-monospace,monospace;color:#CFD7E2;text-align:center;">Could not connect to the devtools server</h1>
+                                </body>
+                            </html>
+                        `,style:{width:"100%",height:"100%",border:"none",borderRadius:"7px",pointerEvents:u?"none":"auto",background:"#14141F"}})))};var fe=E(b("react")),me=E(A()),ke=process.env.NODE_ENV!=="development"?({children:e})=>e:({children:e})=>fe.default.createElement(me.DevToolsContextProvider,null,e);})();
+//# sourceMappingURL=index.js.map