@refinedev/devtools 1.1.34 → 1.1.36

package/src/utilities/use-selector.tsx

@@ -1,10 +1,10 @@
 import {
-    getElementFromFiber,
-    getFiberFromElement,
-    getFirstFiberHasName,
-    getFirstStateNodeFiber,
-    getNameFromFiber,
-    getParentOfFiber,
+  getElementFromFiber,
+  getFiberFromElement,
+  getFirstFiberHasName,
+  getFirstStateNodeFiber,
+  getNameFromFiber,
+  getParentOfFiber,
 } from "@aliemir/dom-to-fiber-utils";
 import { DevToolsContext } from "@refinedev/devtools-shared";
 import debounce from "lodash/debounce";
@@ -13,247 +13,237 @@ import React from "react";
 type Fiber = Exclude<ReturnType<typeof getFiberFromElement>, null>;
 
 export const useSelector = (active: boolean) => {
-    const { devtoolsUrl } = React.useContext(DevToolsContext);
-    const [traceItems, setTraceItems] = React.useState<string[]>([]);
-
-    React.useEffect(() => {
-        if (active) {
-            fetch(
-                `${
-                    devtoolsUrl ?? "http://localhost:5001"
-                }/api/unique-trace-items`,
-            ).then((res) =>
-                res
-                    .json()
-                    .then((data: { data: string[] }) =>
-                        setTraceItems(data.data),
-                    ),
-            );
+  const { devtoolsUrl } = React.useContext(DevToolsContext);
+  const [traceItems, setTraceItems] = React.useState<string[]>([]);
+
+  React.useEffect(() => {
+    if (active) {
+      fetch(
+        `${devtoolsUrl ?? "http://localhost:5001"}/api/unique-trace-items`,
+      ).then((res) =>
+        res.json().then((data: { data: string[] }) => setTraceItems(data.data)),
+      );
+    }
+  }, [active, devtoolsUrl]);
+
+  const [selectedFiber, setSelectedFiber] = React.useState<{
+    stateNode: Fiber | null;
+    nameFiber: Fiber | null;
+  }>({
+    stateNode: null,
+    nameFiber: null,
+  });
+  const [activeFiber, setActiveFiber] = React.useState<{
+    stateNode: Fiber | null;
+    nameFiber: Fiber | null;
+    derived?: boolean;
+  }>({
+    stateNode: null,
+    nameFiber: null,
+    derived: false,
+  });
+
+  React.useEffect(() => {
+    if (active) {
+      return () => {
+        setSelectedFiber({
+          stateNode: null,
+          nameFiber: null,
+        });
+        setActiveFiber({
+          stateNode: null,
+          nameFiber: null,
+          derived: false,
+        });
+      };
+    }
+
+    return () => 0;
+  }, [active]);
+
+  const selectAppropriateFiber = React.useCallback(
+    (start: Fiber | null) => {
+      let fiber = start;
+      let firstParentOfNodeWithName: Fiber | null;
+      let fiberWithStateNode: Fiber | null;
+
+      let acceptedName = false;
+
+      while (!acceptedName && fiber) {
+        // Get the first fiber node that has a name (look up the tree)
+        firstParentOfNodeWithName = getFirstFiberHasName(fiber);
+        // Get the first fiber node that has a state node (look up the tree)
+        fiberWithStateNode = getFirstStateNodeFiber(firstParentOfNodeWithName);
+        acceptedName = traceItems.includes(
+          getNameFromFiber(firstParentOfNodeWithName) ?? "",
+        );
+        if (!acceptedName) {
+          fiber = getParentOfFiber(fiber);
         }
-    }, [active, devtoolsUrl]);
+      }
 
-    const [selectedFiber, setSelectedFiber] = React.useState<{
-        stateNode: Fiber | null;
-        nameFiber: Fiber | null;
-    }>({
-        stateNode: null,
-        nameFiber: null,
-    });
-    const [activeFiber, setActiveFiber] = React.useState<{
-        stateNode: Fiber | null;
-        nameFiber: Fiber | null;
-        derived?: boolean;
-    }>({
+      if (fiberWithStateNode && firstParentOfNodeWithName) {
+        return {
+          stateNode: fiberWithStateNode,
+          nameFiber: firstParentOfNodeWithName,
+        };
+      }
+      return {
         stateNode: null,
         nameFiber: null,
+      };
+    },
+    [traceItems],
+  );
+
+  const pickFiber = React.useCallback(
+    (target: HTMLElement) => {
+      const fiber = getFiberFromElement(target);
+
+      setSelectedFiber(selectAppropriateFiber(fiber));
+      return;
+    },
+    [traceItems],
+  );
+
+  React.useEffect(() => {
+    if (
+      activeFiber.stateNode !== selectedFiber.stateNode ||
+      activeFiber.nameFiber !== selectedFiber.nameFiber
+    ) {
+      setActiveFiber({
+        stateNode: selectedFiber.stateNode,
+        nameFiber: selectedFiber.nameFiber,
         derived: false,
-    });
-
-    React.useEffect(() => {
-        if (active) {
-            return () => {
-                setSelectedFiber({
-                    stateNode: null,
-                    nameFiber: null,
-                });
-                setActiveFiber({
-                    stateNode: null,
-                    nameFiber: null,
-                    derived: false,
-                });
-            };
-        }
-
-        return () => 0;
-    }, [active]);
-
-    const selectAppropriateFiber = React.useCallback(
-        (start: Fiber | null) => {
-            let fiber = start;
-            let firstParentOfNodeWithName: Fiber | null;
-            let fiberWithStateNode: Fiber | null;
-
-            let acceptedName = false;
-
-            while (!acceptedName && fiber) {
-                // Get the first fiber node that has a name (look up the tree)
-                firstParentOfNodeWithName = getFirstFiberHasName(fiber);
-                // Get the first fiber node that has a state node (look up the tree)
-                fiberWithStateNode = getFirstStateNodeFiber(
-                    firstParentOfNodeWithName,
-                );
-                acceptedName = traceItems.includes(
-                    getNameFromFiber(firstParentOfNodeWithName) ?? "",
-                );
-                if (!acceptedName) {
-                    fiber = getParentOfFiber(fiber);
-                }
-            }
-
-            if (fiberWithStateNode && firstParentOfNodeWithName) {
-                return {
-                    stateNode: fiberWithStateNode,
-                    nameFiber: firstParentOfNodeWithName,
-                };
-            } else {
-                return {
-                    stateNode: null,
-                    nameFiber: null,
-                };
-            }
-        },
-        [traceItems],
-    );
-
-    const pickFiber = React.useCallback(
-        (target: HTMLElement) => {
-            const fiber = getFiberFromElement(target);
-
-            setSelectedFiber(selectAppropriateFiber(fiber));
-            return;
-        },
-        [traceItems],
-    );
-
-    React.useEffect(() => {
-        if (
-            activeFiber.stateNode !== selectedFiber.stateNode ||
-            activeFiber.nameFiber !== selectedFiber.nameFiber
-        ) {
-            setActiveFiber({
-                stateNode: selectedFiber.stateNode,
-                nameFiber: selectedFiber.nameFiber,
-                derived: false,
-            });
-        }
-    }, [selectedFiber]);
-
-    const previousValues = React.useRef<{
-        rect: {
-            width: number;
-            height: number;
-            x: number;
-            y: number;
-        };
-        name: string;
-    }>({
+      });
+    }
+  }, [selectedFiber]);
+
+  const previousValues = React.useRef<{
+    rect: {
+      width: number;
+      height: number;
+      x: number;
+      y: number;
+    };
+    name: string;
+  }>({
+    rect: {
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+    },
+    name: "",
+  });
+
+  const { rect, name } = React.useMemo(() => {
+    if (!active) {
+      return {
         rect: {
-            width: 0,
-            height: 0,
-            x: 0,
-            y: 0,
+          width: 0,
+          height: 0,
+          x: 0,
+          y: 0,
         },
         name: "",
-    });
-
-    const { rect, name } = React.useMemo(() => {
-        if (!active) {
-            return {
-                rect: {
-                    width: 0,
-                    height: 0,
-                    x: 0,
-                    y: 0,
-                },
-                name: "",
-            };
-        }
-        if (activeFiber.stateNode || activeFiber.nameFiber) {
-            // Get the element from the fiber with a state node
-            const element = activeFiber.stateNode
-                ? getElementFromFiber(activeFiber.stateNode)
-                : null;
-            // Get the name of the fiber node with a name
-            const fiberName = activeFiber.nameFiber
-                ? getNameFromFiber(activeFiber.nameFiber)
-                : null;
-
-            if (!element) {
-                return {
-                    rect: previousValues.current.rect,
-                    name: fiberName ?? previousValues.current.name,
-                };
-            }
-
-            const bounding = element.getBoundingClientRect?.();
+      };
+    }
+    if (activeFiber.stateNode || activeFiber.nameFiber) {
+      // Get the element from the fiber with a state node
+      const element = activeFiber.stateNode
+        ? getElementFromFiber(activeFiber.stateNode)
+        : null;
+      // Get the name of the fiber node with a name
+      const fiberName = activeFiber.nameFiber
+        ? getNameFromFiber(activeFiber.nameFiber)
+        : null;
+
+      if (!element) {
+        return {
+          rect: previousValues.current.rect,
+          name: fiberName ?? previousValues.current.name,
+        };
+      }
 
-            if (!bounding) {
-                return {
-                    rect: previousValues.current.rect,
-                    name: fiberName ?? previousValues.current.name,
-                };
-            }
+      const bounding = element.getBoundingClientRect?.();
 
-            return {
-                rect: {
-                    width: bounding.width,
-                    height: bounding.height,
-                    x: bounding.left,
-                    y: bounding.top,
-                },
-                name: fiberName ?? previousValues.current.name,
-            };
-        }
+      if (!bounding) {
+        return {
+          rect: previousValues.current.rect,
+          name: fiberName ?? previousValues.current.name,
+        };
+      }
 
-        return previousValues.current;
-    }, [activeFiber, active]);
+      return {
+        rect: {
+          width: bounding.width,
+          height: bounding.height,
+          x: bounding.left,
+          y: bounding.top,
+        },
+        name: fiberName ?? previousValues.current.name,
+      };
+    }
 
-    previousValues.current = {
-        rect,
-        name,
-    };
+    return previousValues.current;
+  }, [activeFiber, active]);
 
-    React.useEffect(() => {
-        if (active) {
-            const listener = (e: KeyboardEvent) => {
-                // if user presses shift, toggle the derived state and set the active fiber to the parent
-                if (e.key === "Shift" && activeFiber.stateNode) {
-                    e.stopPropagation();
-                    e.preventDefault();
+  previousValues.current = {
+    rect,
+    name,
+  };
 
-                    const parent = getParentOfFiber(activeFiber.nameFiber);
+  React.useEffect(() => {
+    if (active) {
+      const listener = (e: KeyboardEvent) => {
+        // if user presses shift, toggle the derived state and set the active fiber to the parent
+        if (e.key === "Shift" && activeFiber.stateNode) {
+          e.stopPropagation();
+          e.preventDefault();
 
-                    const fibers = selectAppropriateFiber(parent);
+          const parent = getParentOfFiber(activeFiber.nameFiber);
 
-                    if (fibers.nameFiber && fibers.stateNode) {
-                        setActiveFiber({
-                            ...fibers,
-                            derived: true,
-                        });
-                        return;
-                    }
-                }
-            };
+          const fibers = selectAppropriateFiber(parent);
 
-            document.addEventListener("keydown", listener);
-            return () => document.removeEventListener("keydown", listener);
+          if (fibers.nameFiber && fibers.stateNode) {
+            setActiveFiber({
+              ...fibers,
+              derived: true,
+            });
+            return;
+          }
         }
-        return () => 0;
-    }, [activeFiber, active]);
+      };
+
+      document.addEventListener("keydown", listener);
+      return () => document.removeEventListener("keydown", listener);
+    }
+    return () => 0;
+  }, [activeFiber, active]);
+
+  React.useEffect(() => {
+    if (active) {
+      let previousTarget: HTMLElement | null = null;
+      const listener = debounce((e: MouseEvent) => {
+        if (e?.target) {
+          if (previousTarget === e.target) {
+            return;
+          }
+          pickFiber(e.target as HTMLElement);
+          previousTarget = e.target as HTMLElement;
+        }
+      }, 50);
 
-    React.useEffect(() => {
-        if (active) {
-            let previousTarget: HTMLElement | null = null;
-            const listener = debounce((e: MouseEvent) => {
-                if (e?.target) {
-                    if (previousTarget === e.target) {
-                        return;
-                    }
-                    pickFiber(e.target as HTMLElement);
-                    previousTarget = e.target as HTMLElement;
-                }
-            }, 50);
+      document.addEventListener("mousemove", listener);
 
-            document.addEventListener("mousemove", listener);
+      return () => document.removeEventListener("mousemove", listener);
+    }
+    return () => 0;
+  }, [active, pickFiber]);
 
-            return () => document.removeEventListener("mousemove", listener);
-        } else {
-            return () => 0;
-        }
-    }, [active, pickFiber]);
-
-    return {
-        rect,
-        name,
-    };
+  return {
+    rect,
+    name,
+  };
 };

package/dist/esm/index.js

@@ -1,9 +0,0 @@
-"use client"
-import b from"react";import M from"react";import E from"react";import{createPortal as ie}from"react-dom";import{getElementFromFiber as Q,getFiberFromElement as ee,getFirstFiberHasName as te,getFirstStateNodeFiber as oe,getNameFromFiber as _,getParentOfFiber as B}from"@aliemir/dom-to-fiber-utils";import{DevToolsContext as ne}from"@refinedev/devtools-shared";import re from"lodash/debounce";import g from"react";var O=e=>{let{devtoolsUrl:a}=g.useContext(ne),[p,s]=g.useState([]);g.useEffect(()=>{e&&fetch(`${a??"http://localhost:5001"}/api/unique-trace-items`).then(r=>r.json().then(i=>s(i.data)))},[e,a]);let[l,t]=g.useState({stateNode:null,nameFiber:null}),[n,h]=g.useState({stateNode:null,nameFiber:null,derived:!1});g.useEffect(()=>e?()=>{t({stateNode:null,nameFiber:null}),h({stateNode:null,nameFiber:null,derived:!1})}:()=>0,[e]);let w=g.useCallback(r=>{let i=r,d,x,C=!1;for(;!C&&i;)d=te(i),x=oe(d),C=p.includes(_(d)??""),C||(i=B(i));return x&&d?{stateNode:x,nameFiber:d}:{stateNode:null,nameFiber:null}},[p]),v=g.useCallback(r=>{let i=ee(r);t(w(i))},[p]);g.useEffect(()=>{(n.stateNode!==l.stateNode||n.nameFiber!==l.nameFiber)&&h({stateNode:l.stateNode,nameFiber:l.nameFiber,derived:!1})},[l]);let m=g.useRef({rect:{width:0,height:0,x:0,y:0},name:""}),{rect:o,name:c}=g.useMemo(()=>{var r;if(!e)return{rect:{width:0,height:0,x:0,y:0},name:""};if(n.stateNode||n.nameFiber){let i=n.stateNode?Q(n.stateNode):null,d=n.nameFiber?_(n.nameFiber):null;if(!i)return{rect:m.current.rect,name:d??m.current.name};let x=(r=i.getBoundingClientRect)==null?void 0:r.call(i);return x?{rect:{width:x.width,height:x.height,x:x.left,y:x.top},name:d??m.current.name}:{rect:m.current.rect,name:d??m.current.name}}return m.current},[n,e]);return m.current={rect:o,name:c},g.useEffect(()=>{if(e){let r=i=>{if(i.key==="Shift"&&n.stateNode){i.stopPropagation(),i.preventDefault();let d=B(n.nameFiber),x=w(d);if(x.nameFiber&&x.stateNode){h({...x,derived:!0});return}}};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)}return()=>0},[n,e]),g.useEffect(()=>{if(e){let r=null,i=re(d=>{if(d!=null&&d.target){if(r===d.target)return;v(d.target),r=d.target}},50);return document.addEventListener("mousemove",i),()=>document.removeEventListener("mousemove",i)}else return()=>0},[e,v]),{rect:o,name:c}};import N from"react";import*as y from"react";var z=e=>y.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:16,height:16,viewBox:"0 0 16 16",fill:"none",...e},y.createElement("path",{fill:"#303450",stroke:"url(#arrow-union-icon)",d:"M.5 8.495V15.5h15V8.495a4.5 4.5 0 0 1-3.816-2.483L9.341 1.33c-.553-1.105-2.13-1.105-2.683 0L4.317 6.012A4.5 4.5 0 0 1 .5 8.495Z"}),y.createElement("defs",null,y.createElement("linearGradient",{id:"arrow-union-icon",x1:8,x2:8,y1:0,y2:10,gradientUnits:"userSpaceOnUse"},y.createElement("stop",{stopColor:"#474E6B"}),y.createElement("stop",{offset:.9,stopColor:"#474E6B"}),y.createElement("stop",{offset:.901,stopColor:"#474E6B",stopOpacity:0}))));var W=38,Z=7,A=({width:e,height:a,x:p,y:s,name:l})=>{let t=s>W?"top":a>3*W?"inset":"bottom",n=p>Z&&s>Z?"outside":"inside";return N.createElement("div",{id:"selector-box",style:{pointerEvents:"none",position:"fixed",opacity:l?1:0,transitionProperty:"width, height, transform, opacity",transitionDuration:"0.15s",transitionTimingFunction:"ease-out",border:"1.5px solid #47EBEB",borderRadius:"4px",background:"rgba(37,160,160, 0.25)",backdropFilter:"sepia(30%) hue-rotate(180deg)",zIndex:99998,...n==="outside"?{left:-6,top:-6,width:e+10,height:a+10,transform:`translate(${p}px, ${s}px)`}:{left:0,top:0,width:e-10,height:a-20,transform:`translate(${p+4}px, ${s+4}px)`}}},N.createElement("div",{style:{position:"absolute",left:"-1.5px",background:"#303450",border:"1px solid #474E6B",borderRadius:"4px",padding:"8px 12px",fontSize:"12px",lineHeight:"16px",fontWeight:400,color:"#ffffff",display:l?"block":"none",...t==="top"&&{top:"-38px"},...t==="bottom"&&{bottom:"-38px"},...t==="inset"&&{top:"4px",left:"8px"}}},l,N.createElement(z,{style:{position:"absolute",left:"30%",...t==="top"&&{transform:"translateX(-50%) rotate(180deg)",bottom:"-9px"},...t==="bottom"&&{transform:"translateX(-50%) ",top:"-9px"},...t==="inset"&&{transform:"translateX(-50%) rotate(-90deg)",top:"8px",left:"-1px"},display:l?"block":"none"}})))};import T from"react";var G=({active:e})=>T.createElement("div",{style:{color:"white",pointerEvents:"none",position:"absolute",left:"calc(-50% - 144px - 14px)",top:"-36px",width:"max-content",borderRadius:"8px",backgroundColor:"#40414A",opacity:e?1:0,transitionDuration:"0.2s",transitionProperty:"transform,opacity",transitionTimingFunction:"ease-in-out",padding:"8px",fontSize:"12px",lineHeight:"12px",fontWeight:400,textShadow:"0 0 2px #1D1E30, 1px 0 2px #1D1E30, -1px 0 2px #1D1E30, 0 1px 2px #1D1E30, 0 -1px 2px #1D1E30"}},T.createElement("kbd",{style:{marginLeft:"4px",padding:"2px 4px",borderRadius:"2px",background:"#1D1E30",color:"#CFD7E2",border:"none",textShadow:"none"}},"shift")," ","to move to parent.",T.createElement("kbd",{style:{marginLeft:"4px",padding:"2px 4px",borderRadius:"2px",background:"#1D1E30",color:"#CFD7E2",border:"none",textShadow:"none"}},"space")," ","to highlight in monitor.");var R=({onSelectorOpen:e,onHighlight:a,icon:p,style:s})=>{let[l,t]=E.useState(!1),[n,h]=E.useState(!1),{rect:w,name:v}=O(n),[m,o]=E.useState(null);return E.useEffect(()=>{if(!m){let c=document.createElement("div");c.id="selector-box-root",document.body.appendChild(c),o(c)}},[]),E.useEffect(()=>{n?document.body.style.cursor="crosshair":document.body.style.cursor="default"},[n]),E.useEffect(()=>{let c=r=>{n&&v&&(r==null||r.preventDefault(),r==null||r.stopPropagation(),r.stopImmediatePropagation(),a(v),h(!1))};return n?(document.addEventListener("click",c,{capture:!0}),()=>{document.removeEventListener("click",c,{capture:!0})}):()=>0},[v,a,n]),E.useEffect(()=>{n&&e()},[n,e]),E.createElement("div",{style:s},E.createElement("div",{role:"button",title:"Element Selector",onMouseOver:()=>t(!0),onMouseOut:()=>t(!1),onClick:c=>{var r;c.preventDefault(),c.stopPropagation(),(r=document==null?void 0:document.activeElement)==null||r.blur(),h(i=>!i)},style:{padding:0,margin:0,height:"100%",width:"100%",transform:l?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease-in-out"}},p),E.createElement(G,{active:n}),n&&m&&ie(E.createElement(A,{...w,name:v}),m))};import*as S from"react";var X=e=>S.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:157,height:25,viewBox:"0 0 157 25",fill:"none",...e},S.createElement("g",null,S.createElement("path",{fill:"#1D1E30",d:"M17 1h123v24H17z"}),S.createElement("path",{fill:"#1D1E30",d:"M6.265 9.205A12 12 0 0 1 17.649 1H25v24H1L6.265 9.205ZM150.735 9.205A12 12 0 0 0 139.351 1H132v24h24l-5.265-15.795Z"}),S.createElement("path",{fill:"currentColor",d:"M25 14.333A1.333 1.333 0 1 1 25 17a1.333 1.333 0 0 1 0-2.667Z"}),S.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M23.211 20.578a4 4 0 0 0 3.578 0l4-2A4 4 0 0 0 33 15v-4a4 4 0 0 0-2.211-3.578l-4-2a4 4 0 0 0-3.578 0l-4 2A4 4 0 0 0 17 11v4a4 4 0 0 0 2.211 3.578l4 2Zm-.878-4.911a2.667 2.667 0 0 0 5.334 0v-5.334a2.667 2.667 0 0 0-5.334 0v5.334Z",clipRule:"evenodd"}),S.createElement("path",{fill:"#CFD7E2",d:"M42.152 17a.287.287 0 0 1-.192-.072.287.287 0 0 1-.072-.192V9.032c0-.072.024-.132.072-.18a.264.264 0 0 1 .192-.084h4.2c.288 0 .56.056.816.168a2.135 2.135 0 0 1 1.14 1.128c.112.256.168.532.168.828v3.984c0 .296-.056.572-.168.828a2.135 2.135 0 0 1-1.14 1.128 2.014 2.014 0 0 1-.816.168h-4.2Zm1.38-1.644h2.82a.455.455 0 0 0 .336-.132.497.497 0 0 0 .132-.348v-3.984a.455.455 0 0 0-.132-.336.436.436 0 0 0-.336-.144h-2.82v4.944Zm13.18-5.196a.244.244 0 0 1-.253.252h-4.44v1.656h4.02c.072 0 .132.024.18.072a.227.227 0 0 1 .084.18v1.128a.264.264 0 0 1-.084.192.244.244 0 0 1-.18.072h-4.02v1.644h4.44c.072 0 .132.028.18.084a.244.244 0 0 1 .072.18v1.116a.287.287 0 0 1-.072.192.244.244 0 0 1-.18.072h-5.832a.244.244 0 0 1-.18-.072.287.287 0 0 1-.072-.192V9.032c0-.072.024-.132.072-.18a.227.227 0 0 1 .18-.084h5.832c.072 0 .132.028.18.084a.244.244 0 0 1 .072.18v1.128ZM63.014 17h-2.232a.387.387 0 0 1-.216-.072.356.356 0 0 1-.144-.168l-1.716-4.296a.853.853 0 0 1-.072-.24 1.783 1.783 0 0 1-.024-.264V9.032c0-.072.024-.132.072-.18a.227.227 0 0 1 .18-.084h1.128c.072 0 .132.028.18.084a.227.227 0 0 1 .084.18v2.616c0 .072.008.156.024.252s.04.176.072.24l1.284 3.216h.528l1.284-3.216a.853.853 0 0 0 .072-.24c.016-.096.024-.18.024-.252V9.032c0-.072.024-.132.072-.18a.264.264 0 0 1 .192-.084h1.128c.072 0 .132.028.18.084a.244.244 0 0 1 .072.18v2.928c0 .072-.008.16-.024.264a.853.853 0 0 1-.072.24l-1.716 4.296a.356.356 0 0 1-.144.168.387.387 0 0 1-.216.072ZM73.29 8.768c.072 0 .132.028.18.084a.227.227 0 0 1 .084.18v1.128a.227.227 0 0 1-.084.18.244.244 0 0 1-.18.072h-2.208v6.324a.264.264 0 0 1-.084.192.244.244 0 0 1-.18.072H69.69a.244.244 0 0 1-.18-.072.287.287 0 0 1-.072-.192v-6.324H67.23a.287.287 0 0 1-.192-.072.244.244 0 0 1-.072-.18V9.032c0-.072.024-.132.072-.18a.264.264 0 0 1 .192-.084h6.06Zm6.507.012c.296 0 .572.056.828.168a2.171 2.171 0 0 1 1.128 1.128c.112.256.168.528.168.816v3.996c0 .288-.056.56-.168.816a2.171 2.171 0 0 1-1.128 1.128 2.043 2.043 0 0 1-.828.168h-2.34c-.296 0-.572-.056-.828-.168a2.171 2.171 0 0 1-1.128-1.128 2.014 2.014 0 0 1-.168-.816v-3.996c0-.288.056-.56.168-.816a2.171 2.171 0 0 1 1.128-1.128c.256-.112.532-.168.828-.168h2.34Zm.48 2.112a.436.436 0 0 0-.144-.336.455.455 0 0 0-.336-.132h-2.34a.497.497 0 0 0-.348.132.455.455 0 0 0-.132.336v3.996c0 .136.044.248.132.336a.497.497 0 0 0 .348.132h2.34a.455.455 0 0 0 .336-.132.436.436 0 0 0 .144-.336v-3.996Zm7.888-2.112c.295 0 .572.056.828.168a2.171 2.171 0 0 1 1.128 1.128c.112.256.168.528.168.816v3.996c0 .288-.056.56-.168.816a2.171 2.171 0 0 1-1.128 1.128 2.043 2.043 0 0 1-.828.168h-2.34c-.297 0-.573-.056-.829-.168a2.171 2.171 0 0 1-1.127-1.128 2.014 2.014 0 0 1-.168-.816v-3.996c0-.288.056-.56.168-.816a2.171 2.171 0 0 1 1.127-1.128c.257-.112.532-.168.829-.168h2.34Zm.48 2.112a.436.436 0 0 0-.144-.336.455.455 0 0 0-.337-.132h-2.34a.497.497 0 0 0-.347.132.455.455 0 0 0-.133.336v3.996c0 .136.044.248.133.336a.497.497 0 0 0 .347.132h2.34a.455.455 0 0 0 .337-.132.436.436 0 0 0 .143-.336v-3.996ZM98.294 17H92.68a.287.287 0 0 1-.192-.072.287.287 0 0 1-.072-.192V9.032c0-.072.024-.132.072-.18a.264.264 0 0 1 .192-.084h1.116c.072 0 .132.028.18.084a.227.227 0 0 1 .084.18v6.324h4.236c.072 0 .132.028.18.084a.244.244 0 0 1 .072.18v1.116a.287.287 0 0 1-.072.192.244.244 0 0 1-.18.072Zm7.336-5.76a.287.287 0 0 1-.192-.072.287.287 0 0 1-.072-.192v-.084a.455.455 0 0 0-.132-.336.436.436 0 0 0-.336-.144h-2.352a.46.46 0 0 0-.336.144.455.455 0 0 0-.132.336v.696c0 .136.044.252.132.348a.482.482 0 0 0 .336.132h2.352c.288 0 .56.056.816.168a2.171 2.171 0 0 1 1.128 1.128c.112.256.168.528.168.816v.696c0 .296-.056.572-.168.828a2.171 2.171 0 0 1-1.128 1.128 2.014 2.014 0 0 1-.816.168h-2.352c-.288 0-.56-.056-.816-.168a2.171 2.171 0 0 1-1.128-1.128 2.043 2.043 0 0 1-.168-.828v-.084c0-.072.024-.132.072-.18a.264.264 0 0 1 .192-.084h1.116c.072 0 .132.028.18.084a.227.227 0 0 1 .084.18v.084c0 .136.044.252.132.348a.482.482 0 0 0 .336.132h2.352a.455.455 0 0 0 .336-.132.497.497 0 0 0 .132-.348v-.696a.455.455 0 0 0-.132-.336.455.455 0 0 0-.336-.132h-2.352c-.288 0-.56-.056-.816-.168a2.171 2.171 0 0 1-1.128-1.128 2.099 2.099 0 0 1-.168-.828v-.696c0-.296.056-.572.168-.828a2.171 2.171 0 0 1 1.128-1.128c.256-.112.528-.168.816-.168h2.352c.288 0 .56.056.816.168a2.171 2.171 0 0 1 1.128 1.128c.112.256.168.532.168.828v.084a.287.287 0 0 1-.072.192.244.244 0 0 1-.18.072h-1.128Z"})));import $ from"react";var Y=e=>$.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:16,height:16,viewBox:"0 0 16 16",fill:"none",...e},$.createElement("path",{fill:"#0FBDBD",fillRule:"evenodd",d:"M9 1a1 1 0 0 0-2 0v2.1A5.006 5.006 0 0 0 3.1 7H1a1 1 0 0 0 0 2h2.1A5.006 5.006 0 0 0 7 12.9V15a1 1 0 1 0 2 0v-2.1A5.006 5.006 0 0 0 12.9 9H15a1 1 0 1 0 0-2h-2.1A5.006 5.006 0 0 0 9 3.1V1Zm2 7a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z",clipRule:"evenodd"}));var U=({onClick:e,onSelectorHighlight:a,onSelectorOpen:p})=>{let[s,l]=M.useState(!1);return M.createElement("div",{onMouseOver:()=>l(!0),onMouseOut:()=>l(!1),style:{position:"relative",userSelect:"none",WebkitUserSelect:"none",background:"none",border:"none",padding:0,paddingRight:"1px",margin:0,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",color:s?"#0FBDBD":"#6C7793",transition:"color 0.1s ease-in-out"},onClick:e},M.createElement(X,null),M.createElement(R,{style:{position:"absolute",top:5,right:18,width:"16px",height:"16px"},icon:M.createElement(Y,{width:16,height:16,style:{pointerEvents:"none"}}),onSelectorOpen:p,onHighlight:a}))};import u from"react";var j=e=>e?"scaleX(1) translateY(0)":"scaleX(0) translateY(25vw)",F=50,f=10,se=()=>typeof window<"u"?window.innerWidth*.7:1440*.7,ae=()=>typeof window<"u"?window.innerHeight*.7:900*.7,q=640,K=360;var L=e=>{switch(e){case"left":return{left:`calc(${F}px + ${f}px)`,top:"50%",transform:"translateY(-50%)"};case"right":return{right:`calc(${F}px + ${f}px)`,top:"50%",transform:"translateY(-50%)"};case"top":return{left:"50%",top:`calc(${F}px + ${f}px)`,transform:"translateX(-50%)"};default:case"bottom":return{left:"50%",bottom:`calc(${F}px + ${f}px)`,transform:"translateX(-50%)"}}},I=e=>{switch(e){case"left":case"right":return-f-F-f+(typeof window<"u"?window.innerWidth:1440)-f;case"top":case"bottom":return-f+(typeof window<"u"?window.innerWidth:1440)-f}},k=e=>{switch(e){case"left":case"right":return-f+(typeof window<"u"?window.innerHeight:900)-f;case"top":case"bottom":return-f-F-f+(typeof window<"u"?window.innerHeight:900)-f}},V=(e,a)=>{let p={width:se(),height:ae()},s=I(e),l=k(e),t=Math.min(s,(a??p).width),n=Math.min(l,(a??p).height);return{width:t,height:n}},P=e=>{let a=Math.round(e);return a%2===0?a:a+1};import D from"react";var H=e=>D.createElement("svg",{width:10,height:26,viewBox:"0 0 10 26",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},D.createElement("rect",{x:.5,y:.5,width:9,height:25,rx:4.5,fill:"#1D1E30"}),D.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.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.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.createElement("rect",{x:.5,y:.5,width:9,height:25,rx:4.5,stroke:"#303450"}));var J=({placement:e,visible:a,children:p})=>{let[s,l]=u.useState(!1),[t,n]=u.useState(null),[h,w]=u.useState(null),[v,m]=u.useState(()=>{let o=V(e);return{width:P(o.width),height:P(o.height)}});return u.useEffect(()=>{let o=()=>{m(c=>{let r=V(e,c);return{width:P(r.width),height:P(r.height)}})};return o(),window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)}},[e]),u.useEffect(()=>{let o=()=>{n(null)};if(t!==null)return window.addEventListener("mouseup",o),()=>{window.removeEventListener("mouseup",o)}},[t]),u.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]),u.useEffect(()=>{let o=c=>{if((t==null?void 0:t[1])==="x"){let r=c.clientX-((h==null?void 0:h.x)??c.clientX),i=v.width+(t==="lx"?-r:r)*2;m(d=>({...d,width:P(Math.min(I(e),Math.max(q,i)))}))}else if((t==null?void 0:t[1])==="y"){let r=c.clientY-((h==null?void 0:h.y)??c.clientY),i=v.height+(t==="ty"?-r:r)*1;m(d=>({...d,height:P(Math.min(k(e),Math.max(K,i)))}))}};if(t!==null)return window.addEventListener("mousemove",o),()=>{window.removeEventListener("mousemove",o)}},[t,e]),u.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",...L(e),opacity:a?1:0,transform:`${L(e).transform} ${j(a??!1)}`,...v},onMouseEnter:()=>{l(!0)},onMouseLeave:()=>{l(!1)}},p({resizing:t}),u.createElement(u.Fragment,null,u.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:s||t?"auto":"none",opacity:s||t?1:0},onMouseDown:o=>{n("lx"),w({x:o.clientX,y:o.clientY}),o.preventDefault()}},u.createElement(H,null)),u.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:s||t?"auto":"none",opacity:s||t?1:0},onMouseDown:o=>{n("rx"),w({x:o.clientX,y:o.clientY}),o.preventDefault()}},u.createElement(H,null)),u.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:s||t?"auto":"none",opacity:s||t?1:0},onMouseDown:o=>{n("ty"),w({x:o.clientX,y:o.clientY}),o.preventDefault()}},u.createElement(H,{style:{transform:"rotate(90deg)",transformOrigin:"13px 13px"}})),u.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:s||t?"auto":"none",opacity:s||t?1:0},onMouseDown:o=>{n("by"),w({x:o.clientX,y:o.clientY}),o.preventDefault()}},u.createElement(H,{style:{transform:"rotate(90deg)",transformOrigin:"13px 13px"}}))))};import{DevToolsContext as le,DevtoolsEvent as de,send as ce}from"@refinedev/devtools-shared";var ue=process.env.NODE_ENV!=="development"?()=>null:()=>{let[e,a]=b.useState(!1),[p,s]=b.useState(!1),[l]=b.useState("bottom"),{devtoolsUrl:t,ws:n}=b.useContext(le),[h,w]=b.useState(0),v=b.useCallback(o=>{n&&ce(n,de.DEVTOOLS_HIGHLIGHT_IN_MONITOR,{name:o}),s(!0)},[n]),m=b.useCallback(()=>{s(!1)},[]);return b.useEffect(()=>{typeof window<"u"&&a(!0)},[]),b.useEffect(()=>{if(e){w(window.innerWidth);let o=()=>{w(window.innerWidth)};return window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)}}return()=>{}},[e]),e?b.createElement("div",{style:{position:"fixed",left:`${Math.round(h/2)}px`,transform:"translateX(-50%)",bottom:0,zIndex:99999}},b.createElement(U,{onClick:()=>s(o=>!o),onSelectorHighlight:v,onSelectorOpen:m}),b.createElement(J,{visible:p,placement:l},({resizing:o})=>b.createElement("iframe",{allow:"clipboard-write;",src:t,srcDoc:t?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:o?"none":"auto",background:"#14141F"}}))):null};import pe from"react";import{DevToolsContextProvider as me}from"@refinedev/devtools-shared";var he=process.env.NODE_ENV!=="development"?({children:e})=>e:({children:e})=>pe.createElement(me,null,e);export{ue as DevtoolsPanel,he as DevtoolsProvider};
-//# sourceMappingURL=index.js.map