@refinedev/devtools 2.0.2 → 2.0.4

package/dist/index.mjs

@@ -1,5 +1,376 @@
 "use client"
-import u from"react";import _ from"react";import T from"react";import S from"react";import{DevToolsContext as ie}from"@refinedev/devtools-shared";import{getElementFromFiber as L,getFiberFromElement as q,getFirstFiberHasName as J,getFirstStateNodeFiber as Q,getNameFromFiber as A,getParentOfFiber as N}from"@aliemir/dom-to-fiber-utils";var ee=e=>e?e.child:null,te=e=>{let t=e;for(;t;){let r=L(t);if(r&&r instanceof HTMLElement)return r;t=ee(t)}return null},oe=e=>{let t=e;for(;t;){let r=L(t);if(r&&r instanceof HTMLElement)return r;t=N(t)}return null},ne=e=>{let t=te(e);return t?[t,"child"]:(t=oe(e),t?[t,"parent"]:[document.body,"body"])},re=(e,t)=>{let r=e,n=null,i=null,o=!1;for(;!o&&r;)n=J(r),i=Q(n),o=t.includes(A(n)??""),o||(r=N(r));return i&&n?{stateNode:i,nameFiber:n}:{stateNode:null,nameFiber:null}},O=e=>e.filter(t=>t.element.offsetWidth>0&&t.element.offsetHeight>0),V=e=>{let t=[];return e.forEach(r=>{t.find(i=>i.element===r.element&&i.name===r.name)||t.push(r)}),t},D=(e,t)=>{var o;if(!e)return[];let r=[],n=q(e),i=re(n,t);if(i.nameFiber){let[s]=ne(i.nameFiber),c=A(i.nameFiber);s&&c&&r.push({element:s,name:c})}for(let s=0;s<(((o=e==null?void 0:e.children)==null?void 0:o.length)??0);s++)r.push(...D(e.children[s],t));return r};var B=e=>{let{httpUrl:t}=S.useContext(ie),[r,n]=S.useState([]),i=S.useCallback(async()=>(await(await fetch(`${t}/api/unique-trace-items`)).json()).data,[t]),o=S.useCallback(async()=>{let s=await i(),c=D(document.body,s),a=O(c),d=V(a);n(d)},[i]);return S.useEffect(()=>{e&&o()},[e,o]),{selectableElements:r}};import le from"react";var b=({children:e})=>(le.useEffect(()=>{let t=document.createElement("style");return t.innerHTML=e,document.head.appendChild(t),()=>{document.head.removeChild(t)}},[e]),null);import h from"react";import Z from"lodash-es/debounce.js";import{createPortal as se}from"react-dom";import P from"react";var U=e=>P.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:16,height:16,viewBox:"0 0 16 16",fill:"none",...e},P.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"})),z=e=>P.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:16,height:16,viewBox:"0 0 16 16",fill:"none",...e},P.createElement("path",{fill:"#14141F",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 M=22,k=(e,t)=>{let{top:r,left:n,width:i,height:o}=e.getBoundingClientRect(),{scrollLeft:s,scrollTop:c}=t.documentElement,a=n+s-Math.max(0,M-i)/2,d=r+c-Math.max(0,M-o)/2;return{left:a,top:d,width:Math.max(M,i),height:Math.max(M,o)}},ae=({element:e,name:t,onSelect:r})=>{let[n]=h.useState(()=>k(e,document)),i=h.useRef(null);h.useEffect(()=>{let s=Z(()=>{var d;let a=k(e,document);["left","top","width","height"].forEach(g=>{var l;(l=i.current)==null||l.style.setProperty(g,`${a[g]}px`)}),(d=i.current)==null||d.style.setProperty("opacity","1")},200,{leading:!1,trailing:!0}),c=Z(()=>{var a;(a=i.current)==null||a.style.setProperty("opacity","0")},200,{leading:!0,trailing:!1});return document.addEventListener("scroll",s),document.addEventListener("scroll",c),()=>{document.removeEventListener("scroll",s),document.removeEventListener("scroll",c)}},[e]);let o=h.useMemo(()=>{let s={width:22,height:22},c=t.length*7.5,a={width:s.width+c,height:s.height},d=4;return n.top-a.height>0&&n.left+a.width<window.innerWidth&&n.width>a.width?{left:d/2,top:a.height*-1-d}:n.height>=a.height*1.5&&n.width>=a.width*1.5?{left:0+d,top:0+d}:n.left-a.width>0?{right:n.width+d,top:0-1}:n.left+n.width+a.width<window.innerWidth?{left:n.width+d,top:0-1}:n.top+n.height+a.height<document.documentElement.scrollHeight?{left:0-1,top:n.height+d}:{left:0,top:0}},[n,t.length]);return h.createElement("button",{type:"button",className:"selector-xray-box",onClick:s=>{s==null||s.preventDefault(),s==null||s.stopPropagation(),r(t)},ref:i,style:{position:"absolute",...n}},h.createElement("div",{style:{position:"absolute",...o},className:"selector-xray-info"},h.createElement("span",{className:"selector-xray-info-icon"},h.createElement(z,{width:12,height:12,style:{pointerEvents:"none"}})),h.createElement("span",{className:"selector-xray-info-title"},` ${t}`)))},W=({elements:e,onSelect:t})=>{let[r,n]=h.useState(null);return h.useEffect(()=>{if(!r){let i=document.createElement("div");return i.id="selector-box-root",document.body.appendChild(i),n(i),()=>{document.body.removeChild(i),n(null)}}return()=>0},[]),r?h.createElement(h.Fragment,null,se(e.map((i,o)=>h.createElement(ae,{key:`selector-element-${o}-${i.name}`,...i,onSelect:t})),r),h.createElement(b,null,`
+
+// src/panel.tsx
+import React10 from "react";
+
+// src/components/devtools-pin.tsx
+import React7 from "react";
+
+// src/components/devtools-selector.tsx
+import React5 from "react";
+
+// src/utilities/use-selector.tsx
+import React from "react";
+import { DevToolsContext } from "@refinedev/devtools-shared";
+
+// src/utilities/selector-helpers.ts
+import {
+  getElementFromFiber,
+  getFiberFromElement,
+  getFirstFiberHasName,
+  getFirstStateNodeFiber,
+  getNameFromFiber,
+  getParentOfFiber
+} from "@aliemir/dom-to-fiber-utils";
+var getChildOfFiber = (fiber) => {
+  if (!fiber) {
+    return null;
+  }
+  return fiber.child;
+};
+var getFirstHTMLElementFromFiberByChild = (fiber) => {
+  let child = fiber;
+  while (child) {
+    const element = getElementFromFiber(child);
+    if (element && element instanceof HTMLElement) {
+      return element;
+    }
+    child = getChildOfFiber(child);
+  }
+  return null;
+};
+var getFirstHTMLElementFromFiberByParent = (fiber) => {
+  let parent = fiber;
+  while (parent) {
+    const element = getElementFromFiber(parent);
+    if (element && element instanceof HTMLElement) {
+      return element;
+    }
+    parent = getParentOfFiber(parent);
+  }
+  return null;
+};
+var getFirstHTMLElementFromFiber = (fiber) => {
+  let element = getFirstHTMLElementFromFiberByChild(fiber);
+  if (element) {
+    return [element, "child"];
+  }
+  element = getFirstHTMLElementFromFiberByParent(fiber);
+  if (element) {
+    return [element, "parent"];
+  }
+  return [document.body, "body"];
+};
+var selectFiber = (start, activeTraceItems) => {
+  let fiber = start;
+  let firstParentOfNodeWithName = null;
+  let fiberWithStateNode = null;
+  let acceptedName = false;
+  while (!acceptedName && fiber) {
+    firstParentOfNodeWithName = getFirstFiberHasName(fiber);
+    fiberWithStateNode = getFirstStateNodeFiber(firstParentOfNodeWithName);
+    acceptedName = activeTraceItems.includes(
+      getNameFromFiber(firstParentOfNodeWithName) ?? ""
+    );
+    if (!acceptedName) {
+      fiber = getParentOfFiber(fiber);
+    }
+  }
+  if (fiberWithStateNode && firstParentOfNodeWithName) {
+    return {
+      stateNode: fiberWithStateNode,
+      nameFiber: firstParentOfNodeWithName
+    };
+  }
+  return {
+    stateNode: null,
+    nameFiber: null
+  };
+};
+var filterInvisibleNodes = (nodes) => {
+  return nodes.filter(
+    (item) => item.element.offsetWidth > 0 && item.element.offsetHeight > 0
+  );
+};
+var getUniqueNodes = (nodes) => {
+  const uniques = [];
+  nodes.forEach((node) => {
+    const isElementExist = uniques.find(
+      (item) => item.element === node.element && item.name === node.name
+    );
+    if (!isElementExist) {
+      uniques.push(node);
+    }
+  });
+  return uniques;
+};
+var traverseDom = (node, activeTraceItems) => {
+  var _a;
+  if (!node) {
+    return [];
+  }
+  const items = [];
+  const fiber = getFiberFromElement(node);
+  const targetFiber = selectFiber(fiber, activeTraceItems);
+  if (targetFiber.nameFiber) {
+    const [element] = getFirstHTMLElementFromFiber(targetFiber.nameFiber);
+    const name = getNameFromFiber(targetFiber.nameFiber);
+    if (element && name) {
+      items.push({
+        element,
+        name
+      });
+    }
+  }
+  for (let i = 0; i < (((_a = node == null ? void 0 : node.children) == null ? void 0 : _a.length) ?? 0); i++) {
+    items.push(
+      ...traverseDom(node.children[i], activeTraceItems)
+    );
+  }
+  return items;
+};
+
+// src/utilities/use-selector.tsx
+var useSelector = (active) => {
+  const { httpUrl } = React.useContext(DevToolsContext);
+  const [selectableElements, setSelectableElements] = React.useState([]);
+  const fetchTraceItems = React.useCallback(async () => {
+    const response = await fetch(`${httpUrl}/api/unique-trace-items`);
+    const data = await response.json();
+    return data.data;
+  }, [httpUrl]);
+  const prepareSelector = React.useCallback(async () => {
+    const fetchedTraceItems = await fetchTraceItems();
+    const traversedNodes = traverseDom(document.body, fetchedTraceItems);
+    const filterInvisible = filterInvisibleNodes(traversedNodes);
+    const uniqueNodes = getUniqueNodes(filterInvisible);
+    setSelectableElements(uniqueNodes);
+  }, [fetchTraceItems]);
+  React.useEffect(() => {
+    if (active) {
+      prepareSelector();
+    }
+  }, [active, prepareSelector]);
+  return {
+    selectableElements
+  };
+};
+
+// src/components/apply-styles.tsx
+import React2 from "react";
+var ApplyStyles = ({ children }) => {
+  React2.useEffect(() => {
+    const element = document.createElement("style");
+    element.innerHTML = children;
+    document.head.appendChild(element);
+    return () => {
+      document.head.removeChild(element);
+    };
+  }, [children]);
+  return null;
+};
+
+// src/components/selectable-elements.tsx
+import React4 from "react";
+import debounce from "lodash-es/debounce.js";
+import { createPortal } from "react-dom";
+
+// src/components/icons/selector-button.tsx
+import React3 from "react";
+var SelectorButtonIcon = (props) => /* @__PURE__ */ React3.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    ...props
+  },
+  /* @__PURE__ */ React3.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 SelectorIcon = (props) => /* @__PURE__ */ React3.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    ...props
+  },
+  /* @__PURE__ */ React3.createElement(
+    "path",
+    {
+      fill: "#14141F",
+      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"
+    }
+  )
+);
+
+// src/components/selectable-elements.tsx
+var MIN_SIZE = 22;
+var getPosition = (element, document2) => {
+  const { top, left, width, height } = element.getBoundingClientRect();
+  const { scrollLeft, scrollTop } = document2.documentElement;
+  const positionLeft = left + scrollLeft - Math.max(0, MIN_SIZE - width) / 2;
+  const positionTop = top + scrollTop - Math.max(0, MIN_SIZE - height) / 2;
+  return {
+    left: positionLeft,
+    top: positionTop,
+    width: Math.max(MIN_SIZE, width),
+    height: Math.max(MIN_SIZE, height)
+  };
+};
+var SelectableElement = ({
+  element,
+  name,
+  onSelect
+}) => {
+  const [position] = React4.useState(() => getPosition(element, document));
+  const elementRef = React4.useRef(null);
+  React4.useEffect(() => {
+    const onScroll = debounce(
+      () => {
+        var _a;
+        const nextPos = getPosition(element, document);
+        ["left", "top", "width", "height"].forEach((prop) => {
+          var _a2;
+          (_a2 = elementRef.current) == null ? void 0 : _a2.style.setProperty(prop, `${nextPos[prop]}px`);
+        });
+        (_a = elementRef.current) == null ? void 0 : _a.style.setProperty("opacity", "1");
+      },
+      200,
+      {
+        leading: false,
+        trailing: true
+      }
+    );
+    const opacityOnScroll = debounce(
+      () => {
+        var _a;
+        (_a = elementRef.current) == null ? void 0 : _a.style.setProperty("opacity", "0");
+      },
+      200,
+      {
+        leading: true,
+        trailing: false
+      }
+    );
+    document.addEventListener("scroll", onScroll);
+    document.addEventListener("scroll", opacityOnScroll);
+    return () => {
+      document.removeEventListener("scroll", onScroll);
+      document.removeEventListener("scroll", opacityOnScroll);
+    };
+  }, [element]);
+  const placement = React4.useMemo(() => {
+    const tooltipBaseSize = { width: 22, height: 22 };
+    const nameWidth = name.length * 7.5;
+    const tooltipSize = {
+      width: tooltipBaseSize.width + nameWidth,
+      height: tooltipBaseSize.height
+    };
+    const gap = 4;
+    if (position.top - tooltipSize.height > 0 && position.left + tooltipSize.width < window.innerWidth && position.width > tooltipSize.width) {
+      return { left: gap / 2, top: tooltipSize.height * -1 - gap };
+    }
+    if (position.height >= tooltipSize.height * 1.5 && position.width >= tooltipSize.width * 1.5) {
+      return { left: 0 + gap, top: 0 + gap };
+    }
+    if (position.left - tooltipSize.width > 0) {
+      return { right: position.width + gap, top: 0 - 1 };
+    }
+    if (position.left + position.width + tooltipSize.width < window.innerWidth) {
+      return { left: position.width + gap, top: 0 - 1 };
+    }
+    if (position.top + position.height + tooltipSize.height < document.documentElement.scrollHeight) {
+      return { left: 0 - 1, top: position.height + gap };
+    }
+    return { left: 0, top: 0 };
+  }, [position, name.length]);
+  return /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      type: "button",
+      className: "selector-xray-box",
+      onClick: (event) => {
+        event == null ? void 0 : event.preventDefault();
+        event == null ? void 0 : event.stopPropagation();
+        onSelect(name);
+      },
+      ref: elementRef,
+      style: {
+        position: "absolute",
+        ...position
+      }
+    },
+    /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          ...placement
+        },
+        className: "selector-xray-info"
+      },
+      /* @__PURE__ */ React4.createElement("span", { className: "selector-xray-info-icon" }, /* @__PURE__ */ React4.createElement(
+        SelectorIcon,
+        {
+          width: 12,
+          height: 12,
+          style: { pointerEvents: "none" }
+        }
+      )),
+      /* @__PURE__ */ React4.createElement("span", { className: "selector-xray-info-title" }, ` ${name}`)
+    )
+  );
+};
+var SelectableElements = ({
+  elements,
+  onSelect
+}) => {
+  const [selectorBoxRoot, setSelectorBoxRoot] = React4.useState(null);
+  React4.useEffect(() => {
+    if (!selectorBoxRoot) {
+      const element = document.createElement("div");
+      element.id = "selector-box-root";
+      document.body.appendChild(element);
+      setSelectorBoxRoot(element);
+      return () => {
+        document.body.removeChild(element);
+        setSelectorBoxRoot(null);
+      };
+    }
+    return () => 0;
+  }, []);
+  if (!selectorBoxRoot)
+    return null;
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, createPortal(
+    elements.map((element, idx) => /* @__PURE__ */ React4.createElement(
+      SelectableElement,
+      {
+        key: `selector-element-${idx}-${element.name}`,
+        ...element,
+        onSelect
+      }
+    )),
+    selectorBoxRoot
+  ), /* @__PURE__ */ React4.createElement(
+    ApplyStyles,
+    null,
+    /* css */
+    `
           .selector-xray-box {
             display: flex;
             margin: 0;
@@ -58,7 +429,43 @@ import u from"react";import _ from"react";import T from"react";import S from"rea
           .selector-xray-box:hover .selector-xray-info-title {
             z-index: 90;
           }
-        `)):null};var Y=({active:e,setActive:t,onHighlight:r,icon:n,style:i})=>{let{selectableElements:o}=B(e);return T.createElement("div",{style:i},T.createElement("div",{role:"button",title:"Element Selector",className:"refine-devtools-selector-button",onClick:c=>{var a;c.preventDefault(),c.stopPropagation(),(a=document==null?void 0:document.activeElement)==null||a.blur(),t(d=>!d)}},n),e&&T.createElement(W,{elements:o,onSelect:c=>{r(c),t(!1)}}),T.createElement(b,null,`
+        `
+  ));
+};
+
+// src/components/devtools-selector.tsx
+var DevtoolsSelector = ({
+  active,
+  setActive,
+  onHighlight,
+  icon,
+  style
+}) => {
+  const { selectableElements } = useSelector(active);
+  const onSelect = (name) => {
+    onHighlight(name);
+    setActive(false);
+  };
+  return /* @__PURE__ */ React5.createElement("div", { style }, /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      role: "button",
+      title: "Element Selector",
+      className: "refine-devtools-selector-button",
+      onClick: (event) => {
+        var _a;
+        event.preventDefault();
+        event.stopPropagation();
+        (_a = document == null ? void 0 : document.activeElement) == null ? void 0 : _a.blur();
+        setActive((active2) => !active2);
+      }
+    },
+    icon
+  ), active && /* @__PURE__ */ React5.createElement(SelectableElements, { elements: selectableElements, onSelect }), /* @__PURE__ */ React5.createElement(
+    ApplyStyles,
+    null,
+    /* css */
+    `
         .refine-devtools-selector-button {
           padding: 0;
           margin: 0;
@@ -72,7 +479,85 @@ import u from"react";import _ from"react";import T from"react";import S from"rea
         .refine-devtools-selector-button:hover {
           transform: rotate(180deg);
         }
-    `))};import*as E from"react";var $=e=>E.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:157,height:25,viewBox:"0 0 157 25",fill:"none",...e},E.createElement("g",null,E.createElement("path",{fill:"#1D1E30",d:"M17 1h123v24H17z"}),E.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"}),E.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"}),E.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"}),E.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"})));var G=({onClick:e,onSelectorHighlight:t,selectorActive:r,setSelectorActive:n})=>_.createElement("div",{role:"button",className:"devtools-selector-pin-box",onClick:e},_.createElement($,null),_.createElement(Y,{style:{position:"absolute",top:5,right:18,width:"16px",height:"16px"},icon:_.createElement(U,{width:16,height:16,style:{pointerEvents:"none"}}),onHighlight:t,active:r,setActive:n}),_.createElement(b,null,`
+    `
+  ));
+};
+
+// src/components/icons/devtools-icon.tsx
+import * as React6 from "react";
+var DevtoolsIcon = (props) => /* @__PURE__ */ React6.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 157,
+    height: 25,
+    viewBox: "0 0 157 25",
+    fill: "none",
+    ...props
+  },
+  /* @__PURE__ */ React6.createElement("g", null, /* @__PURE__ */ React6.createElement("path", { fill: "#1D1E30", d: "M17 1h123v24H17z" }), /* @__PURE__ */ React6.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"
+    }
+  ), /* @__PURE__ */ React6.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"
+    }
+  ), /* @__PURE__ */ React6.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"
+    }
+  ), /* @__PURE__ */ React6.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"
+    }
+  ))
+);
+
+// src/components/devtools-pin.tsx
+var DevtoolsPin = ({
+  onClick,
+  onSelectorHighlight,
+  selectorActive,
+  setSelectorActive
+}) => {
+  return /* @__PURE__ */ React7.createElement("div", { role: "button", className: "devtools-selector-pin-box", onClick }, /* @__PURE__ */ React7.createElement(DevtoolsIcon, null), /* @__PURE__ */ React7.createElement(
+    DevtoolsSelector,
+    {
+      style: {
+        position: "absolute",
+        top: 5,
+        right: 18,
+        width: "16px",
+        height: "16px"
+      },
+      icon: /* @__PURE__ */ React7.createElement(
+        SelectorButtonIcon,
+        {
+          width: 16,
+          height: 16,
+          style: { pointerEvents: "none" }
+        }
+      ),
+      onHighlight: onSelectorHighlight,
+      active: selectorActive,
+      setActive: setSelectorActive
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    ApplyStyles,
+    null,
+    /* css */
+    `
             .devtools-selector-pin-box {
               z-index: 9999;
               position: relative;
@@ -95,18 +580,521 @@ import u from"react";import _ from"react";import T from"react";import S from"rea
             .devtools-selector-pin-box:hover {
               color: #0FBDBD;
             }
-          `));import m from"react";var X=e=>e?"scaleX(1) translateY(0)":"scaleX(0) translateY(25vw)";var ce=()=>typeof window<"u"?window.innerWidth*.7:1007.9999999999999,de=()=>typeof window<"u"?window.innerHeight*.7:630;var H=e=>{switch(e){case"left":return{left:"calc(50px + 10px)",top:"50%",transform:"translateY(-50%)"};case"right":return{right:"calc(50px + 10px)",top:"50%",transform:"translateY(-50%)"};case"top":return{left:"50%",top:"calc(50px + 10px)",transform:"translateX(-50%)"};case"bottom":return{left:"50%",bottom:"calc(50px + 10px)",transform:"translateX(-50%)"}}},C=e=>{switch(e){case"left":case"right":return-70+(typeof window<"u"?window.innerWidth:1440)-10;case"top":case"bottom":return-10+(typeof window<"u"?window.innerWidth:1440)-10}},I=e=>{switch(e){case"left":case"right":return-10+(typeof window<"u"?window.innerHeight:900)-10;case"top":case"bottom":return-70+(typeof window<"u"?window.innerHeight:900)-10}},R=(e,t)=>{let r={width:ce(),height:de()},n=C(e),i=I(e),o=Math.min(n,(t??r).width),s=Math.min(i,(t??r).height);return{width:o,height:s}},v=e=>{let t=Math.round(e);return t%2===0?t:t+1};import w from"react";var F=e=>w.createElement("svg",{width:10,height:26,viewBox:"0 0 10 26",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},w.createElement("rect",{x:.5,y:.5,width:9,height:25,rx:4.5,fill:"#1D1E30"}),w.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"}),w.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"}),w.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"}),w.createElement("rect",{x:.5,y:.5,width:9,height:25,rx:4.5,stroke:"#303450"}));var K=({placement:e,visible:t,children:r})=>{let[n,i]=m.useState(!1),[o,s]=m.useState(null),[c,a]=m.useState(null),[d,g]=m.useState(()=>{let l=R(e);return{width:v(l.width),height:v(l.height)}});return m.useEffect(()=>{let l=()=>{g(x=>{let f=R(e,x);return{width:v(f.width),height:v(f.height)}})};return l(),window.addEventListener("resize",l),()=>{window.removeEventListener("resize",l)}},[e]),m.useEffect(()=>{let l=()=>{s(null)};if(o!==null)return window.addEventListener("mouseup",l),()=>{window.removeEventListener("mouseup",l)}},[o]),m.useEffect(()=>{let l=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=l}},[o]),m.useEffect(()=>{let l=x=>{if((o==null?void 0:o[1])==="x"){let f=x.clientX-((c==null?void 0:c.x)??x.clientX),p=d.width+(o==="lx"?-f:f)*2;g(y=>({...y,width:v(Math.min(C(e),Math.max(640,p)))}))}else if((o==null?void 0:o[1])==="y"){let f=x.clientY-((c==null?void 0:c.y)??x.clientY),p=d.height+(o==="ty"?-f:f)*1;g(y=>({...y,height:v(Math.min(I(e),Math.max(360,p)))}))}};if(o!==null)return window.addEventListener("mousemove",l),()=>{window.removeEventListener("mousemove",l)}},[o,e]),m.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",...H(e),opacity:t?1:0,transform:`${H(e).transform} ${X(t??!1)}`,...d},onMouseEnter:()=>{i(!0)},onMouseLeave:()=>{i(!1)}},r({resizing:o}),m.createElement(m.Fragment,null,m.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:l=>{s("lx"),a({x:l.clientX,y:l.clientY}),l.preventDefault()}},m.createElement(F,null)),m.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:l=>{s("rx"),a({x:l.clientX,y:l.clientY}),l.preventDefault()}},m.createElement(F,null)),m.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:l=>{s("ty"),a({x:l.clientX,y:l.clientY}),l.preventDefault()}},m.createElement(F,{style:{transform:"rotate(90deg)",transformOrigin:"13px 13px"}})),m.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:l=>{s("by"),a({x:l.clientX,y:l.clientY}),l.preventDefault()}},m.createElement(F,{style:{transform:"rotate(90deg)",transformOrigin:"13px 13px"}}))))};import{DevToolsContext as ue,DevtoolsEvent as he,send as fe}from"@refinedev/devtools-shared";var ge=1500,xe=process.env.NODE_ENV!=="development"?()=>null:()=>{let[e,t]=u.useState(!1),[r,n]=u.useState(!1),[i]=u.useState("bottom"),{httpUrl:o,ws:s}=u.useContext(ue),[c,a]=u.useState(0),[d,g]=u.useState(!1),[l,x]=u.useState("loading"),f=u.useCallback(p=>{s&&fe(s,he.DEVTOOLS_HIGHLIGHT_IN_MONITOR,{name:p}),n(!0)},[s]);return u.useEffect(()=>{d&&n(!1)},[d]),u.useEffect(()=>{typeof window<"u"&&t(!0)},[]),u.useEffect(()=>{if(e){a(window.innerWidth);let p=()=>{a(window.innerWidth)};return window.addEventListener("resize",p),()=>{window.removeEventListener("resize",p)}}return()=>{}},[e]),u.useEffect(()=>{if(l!=="loaded"){let p=y=>{y.data.type==="refine-devtools-iframe-loaded"&&x("loaded")};return window.addEventListener("message",p),()=>{window.removeEventListener("message",p)}}return()=>0},[]),u.useEffect(()=>{let p;return l==="loading"&&(p=window.setTimeout(()=>{x("failed"),p&&clearInterval(p)},ge)),()=>{typeof p<"u"&&clearInterval(p)}},[l]),e?u.createElement("div",{style:{position:"fixed",left:`${Math.round(c/2)}px`,transform:"translateX(-50%)",bottom:0,zIndex:99999}},u.createElement(G,{onClick:()=>{n(p=>!p),g(!1)},onSelectorHighlight:f,selectorActive:d,setSelectorActive:g}),u.createElement(K,{visible:r,placement:i},({resizing:p})=>u.createElement("iframe",{allow:"clipboard-write;",src:o,srcDoc:o?l==="failed"?ve:void 0:Ee,style:{width:"100%",height:"100%",border:"none",borderRadius:"7px",pointerEvents:p?"none":"auto",background:"#14141F"}}))):null},Ee=`
+          `
+  ));
+};
+
+// src/components/resizable-pane.tsx
+import React9 from "react";
+
+// src/utilities/index.ts
+var getPanelToggleTransforms = (visible) => {
+  return visible ? "scaleX(1) translateY(0)" : "scaleX(0) translateY(25vw)";
+};
+var SIZE = 50;
+var BUFFER = 10;
+var PREFERRED_DEFAULT_WIDTH = () => typeof window !== "undefined" ? window.innerWidth * 0.7 : 1440 * 0.7;
+var PREFERRED_DEFAULT_HEIGHT = () => typeof window !== "undefined" ? window.innerHeight * 0.7 : 900 * 0.7;
+var MIN_PANEL_WIDTH = 640;
+var MIN_PANEL_HEIGHT = 360;
+var getPanelPosition = (placement) => {
+  switch (placement) {
+    case "left":
+      return {
+        left: `calc(${SIZE}px + ${BUFFER}px)`,
+        top: "50%",
+        transform: "translateY(-50%)"
+      };
+    case "right":
+      return {
+        right: `calc(${SIZE}px + ${BUFFER}px)`,
+        top: "50%",
+        transform: "translateY(-50%)"
+      };
+    case "top":
+      return {
+        left: "50%",
+        top: `calc(${SIZE}px + ${BUFFER}px)`,
+        transform: "translateX(-50%)"
+      };
+    case "bottom":
+      return {
+        left: "50%",
+        bottom: `calc(${SIZE}px + ${BUFFER}px)`,
+        transform: "translateX(-50%)"
+      };
+  }
+};
+var getMaxPanelWidth = (placement) => {
+  switch (placement) {
+    case "left":
+    case "right":
+      return -BUFFER - SIZE - BUFFER + (typeof window !== "undefined" ? window.innerWidth : 1440) - BUFFER;
+    case "top":
+    case "bottom":
+      return -BUFFER + (typeof window !== "undefined" ? window.innerWidth : 1440) - BUFFER;
+  }
+};
+var getMaxPanelHeight = (placement) => {
+  switch (placement) {
+    case "left":
+    case "right":
+      return -BUFFER + (typeof window !== "undefined" ? window.innerHeight : 900) - BUFFER;
+    case "top":
+    case "bottom":
+      return -BUFFER - SIZE - BUFFER + (typeof window !== "undefined" ? window.innerHeight : 900) - BUFFER;
+  }
+};
+var getDefaultPanelSize = (placement, preferredSize) => {
+  const defaultPreferred = {
+    width: PREFERRED_DEFAULT_WIDTH(),
+    height: PREFERRED_DEFAULT_HEIGHT()
+  };
+  const maxPanelWidth = getMaxPanelWidth(placement);
+  const maxPanelHeight = getMaxPanelHeight(placement);
+  const width = Math.min(
+    maxPanelWidth,
+    (preferredSize ?? defaultPreferred).width
+  );
+  const height = Math.min(
+    maxPanelHeight,
+    (preferredSize ?? defaultPreferred).height
+  );
+  return {
+    width,
+    height
+  };
+};
+var roundToEven = (num) => {
+  const rounded = Math.round(num);
+  return rounded % 2 === 0 ? rounded : rounded + 1;
+};
+
+// src/components/icons/resize-handle-icon.tsx
+import React8 from "react";
+var ResizeHandleIcon = (props) => /* @__PURE__ */ React8.createElement(
+  "svg",
+  {
+    width: 10,
+    height: 26,
+    viewBox: "0 0 10 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React8.createElement("rect", { x: 0.5, y: 0.5, width: 9, height: 25, rx: 4.5, fill: "#1D1E30" }),
+  /* @__PURE__ */ React8.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"
+    }
+  ),
+  /* @__PURE__ */ React8.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"
+    }
+  ),
+  /* @__PURE__ */ React8.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"
+    }
+  ),
+  /* @__PURE__ */ React8.createElement("rect", { x: 0.5, y: 0.5, width: 9, height: 25, rx: 4.5, stroke: "#303450" })
+);
+
+// src/components/resizable-pane.tsx
+var ResizablePane = ({ placement, visible, children }) => {
+  const [hover, setHover] = React9.useState(false);
+  const [resizing, setResizing] = React9.useState(null);
+  const [resizePosition, setResizePosition] = React9.useState(null);
+  const [panelSize, setPanelSize] = React9.useState(() => {
+    const defaultSize = getDefaultPanelSize(placement);
+    return {
+      width: roundToEven(defaultSize.width),
+      height: roundToEven(defaultSize.height)
+    };
+  });
+  React9.useEffect(() => {
+    const handleResize = () => {
+      setPanelSize((p) => {
+        const defaultSize = getDefaultPanelSize(placement, p);
+        return {
+          width: roundToEven(defaultSize.width),
+          height: roundToEven(defaultSize.height)
+        };
+      });
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [placement]);
+  React9.useEffect(() => {
+    const handleMouseUp = () => {
+      setResizing(null);
+    };
+    if (resizing !== null) {
+      window.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+    return;
+  }, [resizing]);
+  React9.useEffect(() => {
+    const currentCursor = document.body.style.cursor;
+    if (resizing == null ? void 0 : resizing.includes("x")) {
+      document.body.style.cursor = "col-resize";
+    } else if (resizing == null ? void 0 : resizing.includes("y")) {
+      document.body.style.cursor = "row-resize";
+    }
+    return () => {
+      document.body.style.cursor = currentCursor;
+    };
+  }, [resizing]);
+  React9.useEffect(() => {
+    const handleMouseMove = (e) => {
+      if ((resizing == null ? void 0 : resizing[1]) === "x") {
+        const diff = e.clientX - ((resizePosition == null ? void 0 : resizePosition.x) ?? e.clientX);
+        const newWidth = panelSize.width + (resizing === "lx" ? -diff : diff) * 2;
+        setPanelSize((p) => ({
+          ...p,
+          width: roundToEven(
+            Math.min(
+              getMaxPanelWidth(placement),
+              Math.max(MIN_PANEL_WIDTH, newWidth)
+            )
+          )
+        }));
+      } else if ((resizing == null ? void 0 : resizing[1]) === "y") {
+        const diff = e.clientY - ((resizePosition == null ? void 0 : resizePosition.y) ?? e.clientY);
+        const newHeight = panelSize.height + (resizing === "ty" ? -diff : diff) * 1;
+        setPanelSize((p) => ({
+          ...p,
+          height: roundToEven(
+            Math.min(
+              getMaxPanelHeight(placement),
+              Math.max(MIN_PANEL_HEIGHT, newHeight)
+            )
+          )
+        }));
+      }
+    };
+    if (resizing !== null) {
+      window.addEventListener("mousemove", handleMouseMove);
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+      };
+    }
+    return;
+  }, [resizing, placement]);
+  return /* @__PURE__ */ React9.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",
+        ...getPanelPosition(placement),
+        opacity: visible ? 1 : 0,
+        transform: `${getPanelPosition(placement).transform} ${getPanelToggleTransforms(visible ?? false)}`,
+        ...panelSize
+      },
+      onMouseEnter: () => {
+        setHover(true);
+      },
+      onMouseLeave: () => {
+        setHover(false);
+      }
+    },
+    children({ resizing }),
+    /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.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: hover || resizing ? "auto" : "none",
+          opacity: hover || resizing ? 1 : 0
+        },
+        onMouseDown: (event) => {
+          setResizing("lx");
+          setResizePosition({
+            x: event.clientX,
+            y: event.clientY
+          });
+          event.preventDefault();
+        }
+      },
+      /* @__PURE__ */ React9.createElement(ResizeHandleIcon, null)
+    ), /* @__PURE__ */ React9.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: hover || resizing ? "auto" : "none",
+          opacity: hover || resizing ? 1 : 0
+        },
+        onMouseDown: (event) => {
+          setResizing("rx");
+          setResizePosition({
+            x: event.clientX,
+            y: event.clientY
+          });
+          event.preventDefault();
+        }
+      },
+      /* @__PURE__ */ React9.createElement(ResizeHandleIcon, null)
+    ), /* @__PURE__ */ React9.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: hover || resizing ? "auto" : "none",
+          opacity: hover || resizing ? 1 : 0
+        },
+        onMouseDown: (event) => {
+          setResizing("ty");
+          setResizePosition({
+            x: event.clientX,
+            y: event.clientY
+          });
+          event.preventDefault();
+        }
+      },
+      /* @__PURE__ */ React9.createElement(
+        ResizeHandleIcon,
+        {
+          style: {
+            transform: "rotate(90deg)",
+            transformOrigin: "13px 13px"
+          }
+        }
+      )
+    ), /* @__PURE__ */ React9.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: hover || resizing ? "auto" : "none",
+          opacity: hover || resizing ? 1 : 0
+        },
+        onMouseDown: (event) => {
+          setResizing("by");
+          setResizePosition({
+            x: event.clientX,
+            y: event.clientY
+          });
+          event.preventDefault();
+        }
+      },
+      /* @__PURE__ */ React9.createElement(
+        ResizeHandleIcon,
+        {
+          style: {
+            transform: "rotate(90deg)",
+            transformOrigin: "13px 13px"
+          }
+        }
+      )
+    ))
+  );
+};
+
+// src/panel.tsx
+import {
+  DevToolsContext as DevToolsContext2,
+  DevtoolsEvent,
+  send
+} from "@refinedev/devtools-shared";
+var MAX_IFRAME_WAIT_TIME = 1500;
+var DevtoolsPanel = process.env.NODE_ENV !== "development" ? () => null : () => {
+  const [browser, setBrowser] = React10.useState(false);
+  const [visible, setVisible] = React10.useState(false);
+  const [placement] = React10.useState("bottom");
+  const { httpUrl, ws } = React10.useContext(DevToolsContext2);
+  const [width, setWidth] = React10.useState(0);
+  const [selectorActive, setSelectorActive] = React10.useState(false);
+  const [iframeStatus, setIframeStatus] = React10.useState("loading");
+  const onSelectorHighlight = React10.useCallback(
+    (name) => {
+      if (ws) {
+        send(ws, DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR, {
+          name
+        });
+      }
+      setVisible(true);
+    },
+    [ws]
+  );
+  React10.useEffect(() => {
+    if (selectorActive) {
+      setVisible(false);
+    }
+  }, [selectorActive]);
+  React10.useEffect(() => {
+    if (typeof window !== "undefined") {
+      setBrowser(true);
+    }
+  }, []);
+  React10.useEffect(() => {
+    if (browser) {
+      setWidth(window.innerWidth);
+      const onResize = () => {
+        setWidth(window.innerWidth);
+      };
+      window.addEventListener("resize", onResize);
+      return () => {
+        window.removeEventListener("resize", onResize);
+      };
+    }
+    return () => void 0;
+  }, [browser]);
+  React10.useEffect(() => {
+    if (iframeStatus !== "loaded") {
+      const onMessage = (event) => {
+        if (event.data.type === "refine-devtools-iframe-loaded") {
+          setIframeStatus("loaded");
+        }
+      };
+      window.addEventListener("message", onMessage);
+      return () => {
+        window.removeEventListener("message", onMessage);
+      };
+    }
+    return () => 0;
+  }, []);
+  React10.useEffect(() => {
+    let timeout;
+    if (iframeStatus === "loading") {
+      timeout = window.setTimeout(() => {
+        setIframeStatus("failed");
+        if (timeout) {
+          clearInterval(timeout);
+        }
+      }, MAX_IFRAME_WAIT_TIME);
+    }
+    return () => {
+      if (typeof timeout !== "undefined") {
+        clearInterval(timeout);
+      }
+    };
+  }, [iframeStatus]);
+  if (!browser) {
+    return null;
+  }
+  return /* @__PURE__ */ React10.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        left: `${Math.round(width / 2)}px`,
+        transform: "translateX(-50%)",
+        bottom: 0,
+        zIndex: 99999
+      }
+    },
+    /* @__PURE__ */ React10.createElement(
+      DevtoolsPin,
+      {
+        onClick: () => {
+          setVisible((v) => !v);
+          setSelectorActive(false);
+        },
+        onSelectorHighlight,
+        selectorActive,
+        setSelectorActive
+      }
+    ),
+    /* @__PURE__ */ React10.createElement(ResizablePane, { visible, placement }, ({ resizing }) => /* @__PURE__ */ React10.createElement(
+      "iframe",
+      {
+        allow: "clipboard-write;",
+        src: httpUrl,
+        srcDoc: httpUrl ? iframeStatus === "failed" ? failedConnectionContent : void 0 : missingUrlContent,
+        style: {
+          width: "100%",
+          height: "100%",
+          border: "none",
+          borderRadius: "7px",
+          pointerEvents: resizing ? "none" : "auto",
+          background: "#14141F"
+        }
+      }
+    ))
+  );
+};
+var missingUrlContent = `
       <html style="height:100%;padding:0;margin:0;background:#14141F;">
         <body style="background:#14141F;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;font-weight:400;color:#CFD7E2;text-align:center;font-size:24px;">Could not connect to the devtools server.</h1>
         </body>
       </html>
-      `,ve=`
+      `;
+var failedConnectionContent = `
       <html style="height:100%;padding:0;margin:0;background:#14141F;">
         <body style="background:#14141F;display:flex;flex-direction:column;justify-content:center;height:100%;padding:24px;margin:0;align-items:center;box-sizing:border-box;">
           <h1 style="max-width:480px;min-width:480px;font-family:ui-monospace,monospace;font-weight:400;color:#CFD7E2;text-align:left;font-size:24px;margin-bottom:12px;line-height:24px;">Devtools Server is unreachable.</h1>
           <p style="max-width:480px;font-family:ui-monospace,monospace;font-weight:400;color:#6C7793;text-align:left;font-size:16px;line-height:32px;">Please make sure Refine Devtools is running and <code style="background:#303450;color:#A3ADC2;padding:3px 6px;border-radius:4px;">&lt;DevtoolsProvider /&gt;</code> has valid <code style="background:#303450;color:#A3ADC2;padding:3px 6px;border-radius:4px;">url</code> prop. Environment variables may not always be available in browser depending on your project setup.</p>
         </body>
       </html>
-      `;import be from"react";import{DevToolsContextProvider as we}from"@refinedev/devtools-shared";var j=()=>{let t=(typeof process<"u"&&"env"in process?process.env.REFINE_DEVTOOLS_PORT||process.env.NEXT_PUBLIC_REFINE_DEVTOOLS_PORT||process.env.REACT_APP_REFINE_DEVTOOLS_PORT:typeof import.meta<"u"&&import.meta.env?import.meta.env.REFINE_DEVTOOLS_PORT||import.meta.env.VITE_REFINE_DEVTOOLS_PORT:null)||5001;return[`http://localhost:${t}`,`ws://localhost:${t}`]};var ye=process.env.NODE_ENV!=="development"?({children:e})=>e:({children:e,url:t=j()})=>be.createElement(we,{url:t},e);export{xe as DevtoolsPanel,ye as DevtoolsProvider};
+      `;
+
+// src/provider.tsx
+import React11 from "react";
+import { DevToolsContextProvider } from "@refinedev/devtools-shared";
+
+// src/utilities/get-devtools-url-from-env.ts
+var DEFAULT_DEVTOOLS_PORT = 5001;
+var getDevtoolsUrlFromEnv = () => {
+  const PORT_FROM_ENV = typeof process !== "undefined" && "env" in process ? process.env.REFINE_DEVTOOLS_PORT || process.env.NEXT_PUBLIC_REFINE_DEVTOOLS_PORT || process.env.REACT_APP_REFINE_DEVTOOLS_PORT : typeof import.meta !== "undefined" && import.meta.env ? import.meta.env.REFINE_DEVTOOLS_PORT || import.meta.env.VITE_REFINE_DEVTOOLS_PORT : null;
+  const port = PORT_FROM_ENV || DEFAULT_DEVTOOLS_PORT;
+  return [`http://localhost:${port}`, `ws://localhost:${port}`];
+};
+
+// src/provider.tsx
+var DevtoolsProvider = process.env.NODE_ENV !== "development" ? ({ children }) => children : ({ children, url = getDevtoolsUrlFromEnv() }) => {
+  return /* @__PURE__ */ React11.createElement(DevToolsContextProvider, { url }, children);
+};
+export {
+  DevtoolsPanel,
+  DevtoolsProvider
+};
 //# sourceMappingURL=index.mjs.map