@refinedev/devtools 2.0.1 → 2.0.3

package/dist/index.cjs

@@ -1,5 +1,404 @@
 "use client"
-var se=Object.create;var C=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var ce=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var me=(e,t)=>{for(var r in t)C(e,r,{get:t[r],enumerable:!0})},U=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of ce(t))!pe.call(e,i)&&i!==r&&C(e,i,{get:()=>t[i],enumerable:!(o=ae(t,i))||o.enumerable});return e};var g=(e,t,r)=>(r=e!=null?se(de(e)):{},U(t||!e||!e.__esModule?C(r,"default",{value:e,enumerable:!0}):r,e)),ue=e=>U(C({},"__esModule",{value:!0}),e);var Me={};me(Me,{DevtoolsPanel:()=>oe,DevtoolsProvider:()=>le});module.exports=ue(Me);var u=g(require("react"));var F=g(require("react"));var D=g(require("react"));var S=g(require("react")),k=require("@refinedev/devtools-shared");var f=require("@aliemir/dom-to-fiber-utils"),he=e=>e?e.child:null,fe=e=>{let t=e;for(;t;){let r=(0,f.getElementFromFiber)(t);if(r&&r instanceof HTMLElement)return r;t=he(t)}return null},ge=e=>{let t=e;for(;t;){let r=(0,f.getElementFromFiber)(t);if(r&&r instanceof HTMLElement)return r;t=(0,f.getParentOfFiber)(t)}return null},xe=e=>{let t=fe(e);return t?[t,"child"]:(t=ge(e),t?[t,"parent"]:[document.body,"body"])},Ee=(e,t)=>{let r=e,o=null,i=null,n=!1;for(;!n&&r;)o=(0,f.getFirstFiberHasName)(r),i=(0,f.getFirstStateNodeFiber)(o),n=t.includes((0,f.getNameFromFiber)(o)??""),n||(r=(0,f.getParentOfFiber)(r));return i&&o?{stateNode:i,nameFiber:o}:{stateNode:null,nameFiber:null}},z=e=>e.filter(t=>t.element.offsetWidth>0&&t.element.offsetHeight>0),Z=e=>{let t=[];return e.forEach(r=>{t.find(i=>i.element===r.element&&i.name===r.name)||t.push(r)}),t},L=(e,t)=>{var n;if(!e)return[];let r=[],o=(0,f.getFiberFromElement)(e),i=Ee(o,t);if(i.nameFiber){let[s]=xe(i.nameFiber),c=(0,f.getNameFromFiber)(i.nameFiber);s&&c&&r.push({element:s,name:c})}for(let s=0;s<(((n=e==null?void 0:e.children)==null?void 0:n.length)??0);s++)r.push(...L(e.children[s],t));return r};var W=e=>{let{httpUrl:t}=S.default.useContext(k.DevToolsContext),[r,o]=S.default.useState([]),i=S.default.useCallback(async()=>(await(await fetch(`${t}/api/unique-trace-items`)).json()).data,[t]),n=S.default.useCallback(async()=>{let s=await i(),c=L(document.body,s),a=z(c),d=Z(a);o(d)},[i]);return S.default.useEffect(()=>{e&&n()},[e,n]),{selectableElements:r}};var Y=g(require("react")),_=({children:e})=>(Y.default.useEffect(()=>{let t=document.createElement("style");return t.innerHTML=e,document.head.appendChild(t),()=>{document.head.removeChild(t)}},[e]),null);var h=g(require("react")),A=g(require("lodash/debounce")),K=require("react-dom");var T=g(require("react")),$=e=>T.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:16,height:16,viewBox:"0 0 16 16",fill:"none",...e},T.default.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"})),G=e=>T.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:16,height:16,viewBox:"0 0 16 16",fill:"none",...e},T.default.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 I=22,X=(e,t)=>{let{top:r,left:o,width:i,height:n}=e.getBoundingClientRect(),{scrollLeft:s,scrollTop:c}=t.documentElement,a=o+s-Math.max(0,I-i)/2,d=r+c-Math.max(0,I-n)/2;return{left:a,top:d,width:Math.max(I,i),height:Math.max(I,n)}},ve=({element:e,name:t,onSelect:r})=>{let[o]=h.default.useState(()=>X(e,document)),i=h.default.useRef(null);h.default.useEffect(()=>{let s=(0,A.default)(()=>{var d;let a=X(e,document);["left","top","width","height"].forEach(E=>{var l;(l=i.current)==null||l.style.setProperty(E,`${a[E]}px`)}),(d=i.current)==null||d.style.setProperty("opacity","1")},200,{leading:!1,trailing:!0}),c=(0,A.default)(()=>{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 n=h.default.useMemo(()=>{let s={width:22,height:22},c=t.length*7.5,a={width:s.width+c,height:s.height},d=4;return o.top-a.height>0&&o.left+a.width<window.innerWidth&&o.width>a.width?{left:d/2,top:a.height*-1-d}:o.height>=a.height*1.5&&o.width>=a.width*1.5?{left:0+d,top:0+d}:o.left-a.width>0?{right:o.width+d,top:0-1}:o.left+o.width+a.width<window.innerWidth?{left:o.width+d,top:0-1}:o.top+o.height+a.height<document.documentElement.scrollHeight?{left:0-1,top:o.height+d}:{left:0,top:0}},[o,t.length]);return h.default.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",...o}},h.default.createElement("div",{style:{position:"absolute",...n},className:"selector-xray-info"},h.default.createElement("span",{className:"selector-xray-info-icon"},h.default.createElement(G,{width:12,height:12,style:{pointerEvents:"none"}})),h.default.createElement("span",{className:"selector-xray-info-title"},` ${t}`)))},j=({elements:e,onSelect:t})=>{let[r,o]=h.default.useState(null);return h.default.useEffect(()=>{if(!r){let i=document.createElement("div");return i.id="selector-box-root",document.body.appendChild(i),o(i),()=>{document.body.removeChild(i),o(null)}}return()=>0},[]),r?h.default.createElement(h.default.Fragment,null,(0,K.createPortal)(e.map((i,n)=>h.default.createElement(ve,{key:`selector-element-${n}-${i.name}`,...i,onSelect:t})),r),h.default.createElement(_,null,`
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DevtoolsPanel: () => DevtoolsPanel,
+  DevtoolsProvider: () => DevtoolsProvider
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/panel.tsx
+var import_react9 = __toESM(require("react"));
+
+// src/components/devtools-pin.tsx
+var import_react6 = __toESM(require("react"));
+
+// src/components/devtools-selector.tsx
+var import_react5 = __toESM(require("react"));
+
+// src/utilities/use-selector.tsx
+var import_react = __toESM(require("react"));
+var import_devtools_shared = require("@refinedev/devtools-shared");
+
+// src/utilities/selector-helpers.ts
+var import_dom_to_fiber_utils = require("@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 = (0, import_dom_to_fiber_utils.getElementFromFiber)(child);
+    if (element && element instanceof HTMLElement) {
+      return element;
+    }
+    child = getChildOfFiber(child);
+  }
+  return null;
+};
+var getFirstHTMLElementFromFiberByParent = (fiber) => {
+  let parent = fiber;
+  while (parent) {
+    const element = (0, import_dom_to_fiber_utils.getElementFromFiber)(parent);
+    if (element && element instanceof HTMLElement) {
+      return element;
+    }
+    parent = (0, import_dom_to_fiber_utils.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 = (0, import_dom_to_fiber_utils.getFirstFiberHasName)(fiber);
+    fiberWithStateNode = (0, import_dom_to_fiber_utils.getFirstStateNodeFiber)(firstParentOfNodeWithName);
+    acceptedName = activeTraceItems.includes(
+      (0, import_dom_to_fiber_utils.getNameFromFiber)(firstParentOfNodeWithName) ?? ""
+    );
+    if (!acceptedName) {
+      fiber = (0, import_dom_to_fiber_utils.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 = (0, import_dom_to_fiber_utils.getFiberFromElement)(node);
+  const targetFiber = selectFiber(fiber, activeTraceItems);
+  if (targetFiber.nameFiber) {
+    const [element] = getFirstHTMLElementFromFiber(targetFiber.nameFiber);
+    const name = (0, import_dom_to_fiber_utils.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 } = import_react.default.useContext(import_devtools_shared.DevToolsContext);
+  const [selectableElements, setSelectableElements] = import_react.default.useState([]);
+  const fetchTraceItems = import_react.default.useCallback(async () => {
+    const response = await fetch(`${httpUrl}/api/unique-trace-items`);
+    const data = await response.json();
+    return data.data;
+  }, [httpUrl]);
+  const prepareSelector = import_react.default.useCallback(async () => {
+    const fetchedTraceItems = await fetchTraceItems();
+    const traversedNodes = traverseDom(document.body, fetchedTraceItems);
+    const filterInvisible = filterInvisibleNodes(traversedNodes);
+    const uniqueNodes = getUniqueNodes(filterInvisible);
+    setSelectableElements(uniqueNodes);
+  }, [fetchTraceItems]);
+  import_react.default.useEffect(() => {
+    if (active) {
+      prepareSelector();
+    }
+  }, [active, prepareSelector]);
+  return {
+    selectableElements
+  };
+};
+
+// src/components/apply-styles.tsx
+var import_react2 = __toESM(require("react"));
+var ApplyStyles = ({ children }) => {
+  import_react2.default.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
+var import_react4 = __toESM(require("react"));
+var import_debounce = __toESM(require("lodash/debounce"));
+var import_react_dom = require("react-dom");
+
+// src/components/icons/selector-button.tsx
+var import_react3 = __toESM(require("react"));
+var SelectorButtonIcon = (props) => /* @__PURE__ */ import_react3.default.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    ...props
+  },
+  /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    ...props
+  },
+  /* @__PURE__ */ import_react3.default.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] = import_react4.default.useState(() => getPosition(element, document));
+  const elementRef = import_react4.default.useRef(null);
+  import_react4.default.useEffect(() => {
+    const onScroll = (0, import_debounce.default)(
+      () => {
+        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 = (0, import_debounce.default)(
+      () => {
+        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 = import_react4.default.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__ */ import_react4.default.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__ */ import_react4.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          ...placement
+        },
+        className: "selector-xray-info"
+      },
+      /* @__PURE__ */ import_react4.default.createElement("span", { className: "selector-xray-info-icon" }, /* @__PURE__ */ import_react4.default.createElement(
+        SelectorIcon,
+        {
+          width: 12,
+          height: 12,
+          style: { pointerEvents: "none" }
+        }
+      )),
+      /* @__PURE__ */ import_react4.default.createElement("span", { className: "selector-xray-info-title" }, ` ${name}`)
+    )
+  );
+};
+var SelectableElements = ({
+  elements,
+  onSelect
+}) => {
+  const [selectorBoxRoot, setSelectorBoxRoot] = import_react4.default.useState(null);
+  import_react4.default.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__ */ import_react4.default.createElement(import_react4.default.Fragment, null, (0, import_react_dom.createPortal)(
+    elements.map((element, idx) => /* @__PURE__ */ import_react4.default.createElement(
+      SelectableElement,
+      {
+        key: `selector-element-${idx}-${element.name}`,
+        ...element,
+        onSelect
+      }
+    )),
+    selectorBoxRoot
+  ), /* @__PURE__ */ import_react4.default.createElement(
+    ApplyStyles,
+    null,
+    /* css */
+    `
           .selector-xray-box {
             display: flex;
             margin: 0;
@@ -58,7 +457,43 @@ var se=Object.create;var C=Object.defineProperty;var ae=Object.getOwnPropertyDes
           .selector-xray-box:hover .selector-xray-info-title {
             z-index: 90;
           }
-        `)):null};var q=({active:e,setActive:t,onHighlight:r,icon:o,style:i})=>{let{selectableElements:n}=W(e);return D.default.createElement("div",{style:i},D.default.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)}},o),e&&D.default.createElement(j,{elements:n,onSelect:c=>{r(c),t(!1)}}),D.default.createElement(_,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__ */ import_react5.default.createElement("div", { style }, /* @__PURE__ */ import_react5.default.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__ */ import_react5.default.createElement(SelectableElements, { elements: selectableElements, onSelect }), /* @__PURE__ */ import_react5.default.createElement(
+    ApplyStyles,
+    null,
+    /* css */
+    `
         .refine-devtools-selector-button {
           padding: 0;
           margin: 0;
@@ -72,7 +507,85 @@ var se=Object.create;var C=Object.defineProperty;var ae=Object.getOwnPropertyDes
         .refine-devtools-selector-button:hover {
           transform: rotate(180deg);
         }
-    `))};var b=g(require("react")),J=e=>b.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:157,height:25,viewBox:"0 0 157 25",fill:"none",...e},b.createElement("g",null,b.createElement("path",{fill:"#1D1E30",d:"M17 1h123v24H17z"}),b.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"}),b.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"}),b.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"}),b.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 Q=({onClick:e,onSelectorHighlight:t,selectorActive:r,setSelectorActive:o})=>F.default.createElement("div",{role:"button",className:"devtools-selector-pin-box",onClick:e},F.default.createElement(J,null),F.default.createElement(q,{style:{position:"absolute",top:5,right:18,width:"16px",height:"16px"},icon:F.default.createElement($,{width:16,height:16,style:{pointerEvents:"none"}}),onHighlight:t,active:r,setActive:o}),F.default.createElement(_,null,`
+    `
+  ));
+};
+
+// src/components/icons/devtools-icon.tsx
+var React6 = __toESM(require("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__ */ import_react6.default.createElement("div", { role: "button", className: "devtools-selector-pin-box", onClick }, /* @__PURE__ */ import_react6.default.createElement(DevtoolsIcon, null), /* @__PURE__ */ import_react6.default.createElement(
+    DevtoolsSelector,
+    {
+      style: {
+        position: "absolute",
+        top: 5,
+        right: 18,
+        width: "16px",
+        height: "16px"
+      },
+      icon: /* @__PURE__ */ import_react6.default.createElement(
+        SelectorButtonIcon,
+        {
+          width: 16,
+          height: 16,
+          style: { pointerEvents: "none" }
+        }
+      ),
+      onHighlight: onSelectorHighlight,
+      active: selectorActive,
+      setActive: setSelectorActive
+    }
+  ), /* @__PURE__ */ import_react6.default.createElement(
+    ApplyStyles,
+    null,
+    /* css */
+    `
             .devtools-selector-pin-box {
               z-index: 9999;
               position: relative;
@@ -95,18 +608,514 @@ var se=Object.create;var C=Object.defineProperty;var ae=Object.getOwnPropertyDes
             .devtools-selector-pin-box:hover {
               color: #0FBDBD;
             }
-          `));var m=g(require("react"));var ee=e=>e?"scaleX(1) translateY(0)":"scaleX(0) translateY(25vw)";var be=()=>typeof window<"u"?window.innerWidth*.7:1007.9999999999999,we=()=>typeof window<"u"?window.innerHeight*.7:630;var N=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%)"}}},O=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}},V=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}},B=(e,t)=>{let r={width:be(),height:we()},o=O(e),i=V(e),n=Math.min(o,(t??r).width),s=Math.min(i,(t??r).height);return{width:n,height:s}},w=e=>{let t=Math.round(e);return t%2===0?t:t+1};var y=g(require("react")),H=e=>y.default.createElement("svg",{width:10,height:26,viewBox:"0 0 10 26",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},y.default.createElement("rect",{x:.5,y:.5,width:9,height:25,rx:4.5,fill:"#1D1E30"}),y.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"}),y.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"}),y.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"}),y.default.createElement("rect",{x:.5,y:.5,width:9,height:25,rx:4.5,stroke:"#303450"}));var te=({placement:e,visible:t,children:r})=>{let[o,i]=m.default.useState(!1),[n,s]=m.default.useState(null),[c,a]=m.default.useState(null),[d,E]=m.default.useState(()=>{let l=B(e);return{width:w(l.width),height:w(l.height)}});return m.default.useEffect(()=>{let l=()=>{E(v=>{let x=B(e,v);return{width:w(x.width),height:w(x.height)}})};return l(),window.addEventListener("resize",l),()=>{window.removeEventListener("resize",l)}},[e]),m.default.useEffect(()=>{let l=()=>{s(null)};if(n!==null)return window.addEventListener("mouseup",l),()=>{window.removeEventListener("mouseup",l)}},[n]),m.default.useEffect(()=>{let l=document.body.style.cursor;return n!=null&&n.includes("x")?document.body.style.cursor="col-resize":n!=null&&n.includes("y")&&(document.body.style.cursor="row-resize"),()=>{document.body.style.cursor=l}},[n]),m.default.useEffect(()=>{let l=v=>{if((n==null?void 0:n[1])==="x"){let x=v.clientX-((c==null?void 0:c.x)??v.clientX),p=d.width+(n==="lx"?-x:x)*2;E(M=>({...M,width:w(Math.min(O(e),Math.max(640,p)))}))}else if((n==null?void 0:n[1])==="y"){let x=v.clientY-((c==null?void 0:c.y)??v.clientY),p=d.height+(n==="ty"?-x:x)*1;E(M=>({...M,height:w(Math.min(V(e),Math.max(360,p)))}))}};if(n!==null)return window.addEventListener("mousemove",l),()=>{window.removeEventListener("mousemove",l)}},[n,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",...N(e),opacity:t?1:0,transform:`${N(e).transform} ${ee(t??!1)}`,...d},onMouseEnter:()=>{i(!0)},onMouseLeave:()=>{i(!1)}},r({resizing:n}),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:o||n?"auto":"none",opacity:o||n?1:0},onMouseDown:l=>{s("lx"),a({x:l.clientX,y:l.clientY}),l.preventDefault()}},m.default.createElement(H,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:o||n?"auto":"none",opacity:o||n?1:0},onMouseDown:l=>{s("rx"),a({x:l.clientX,y:l.clientY}),l.preventDefault()}},m.default.createElement(H,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:o||n?"auto":"none",opacity:o||n?1:0},onMouseDown:l=>{s("ty"),a({x:l.clientX,y:l.clientY}),l.preventDefault()}},m.default.createElement(H,{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:o||n?"auto":"none",opacity:o||n?1:0},onMouseDown:l=>{s("by"),a({x:l.clientX,y:l.clientY}),l.preventDefault()}},m.default.createElement(H,{style:{transform:"rotate(90deg)",transformOrigin:"13px 13px"}}))))};var P=require("@refinedev/devtools-shared"),_e=1500,oe=process.env.NODE_ENV!=="development"?()=>null:()=>{let[e,t]=u.default.useState(!1),[r,o]=u.default.useState(!1),[i]=u.default.useState("bottom"),{httpUrl:n,ws:s}=u.default.useContext(P.DevToolsContext),[c,a]=u.default.useState(0),[d,E]=u.default.useState(!1),[l,v]=u.default.useState("loading"),x=u.default.useCallback(p=>{s&&(0,P.send)(s,P.DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR,{name:p}),o(!0)},[s]);return u.default.useEffect(()=>{d&&o(!1)},[d]),u.default.useEffect(()=>{typeof window<"u"&&t(!0)},[]),u.default.useEffect(()=>{if(e){a(window.innerWidth);let p=()=>{a(window.innerWidth)};return window.addEventListener("resize",p),()=>{window.removeEventListener("resize",p)}}return()=>{}},[e]),u.default.useEffect(()=>{if(l!=="loaded"){let p=M=>{M.data.type==="refine-devtools-iframe-loaded"&&v("loaded")};return window.addEventListener("message",p),()=>{window.removeEventListener("message",p)}}return()=>0},[]),u.default.useEffect(()=>{let p;return l==="loading"&&(p=window.setTimeout(()=>{v("failed"),p&&clearInterval(p)},_e)),()=>{typeof p<"u"&&clearInterval(p)}},[l]),e?u.default.createElement("div",{style:{position:"fixed",left:`${Math.round(c/2)}px`,transform:"translateX(-50%)",bottom:0,zIndex:99999}},u.default.createElement(Q,{onClick:()=>{o(p=>!p),E(!1)},onSelectorHighlight:x,selectorActive:d,setSelectorActive:E}),u.default.createElement(te,{visible:r,placement:i},({resizing:p})=>u.default.createElement("iframe",{allow:"clipboard-write;",src:n,srcDoc:n?l==="failed"?Pe:void 0:Fe,style:{width:"100%",height:"100%",border:"none",borderRadius:"7px",pointerEvents:p?"none":"auto",background:"#14141F"}}))):null},Fe=`
+          `
+  ));
+};
+
+// src/components/resizable-pane.tsx
+var import_react8 = __toESM(require("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
+var import_react7 = __toESM(require("react"));
+var ResizeHandleIcon = (props) => /* @__PURE__ */ import_react7.default.createElement(
+  "svg",
+  {
+    width: 10,
+    height: 26,
+    viewBox: "0 0 10 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ import_react7.default.createElement("rect", { x: 0.5, y: 0.5, width: 9, height: 25, rx: 4.5, fill: "#1D1E30" }),
+  /* @__PURE__ */ import_react7.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"
+    }
+  ),
+  /* @__PURE__ */ import_react7.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"
+    }
+  ),
+  /* @__PURE__ */ import_react7.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"
+    }
+  ),
+  /* @__PURE__ */ import_react7.default.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] = import_react8.default.useState(false);
+  const [resizing, setResizing] = import_react8.default.useState(null);
+  const [resizePosition, setResizePosition] = import_react8.default.useState(null);
+  const [panelSize, setPanelSize] = import_react8.default.useState(() => {
+    const defaultSize = getDefaultPanelSize(placement);
+    return {
+      width: roundToEven(defaultSize.width),
+      height: roundToEven(defaultSize.height)
+    };
+  });
+  import_react8.default.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]);
+  import_react8.default.useEffect(() => {
+    const handleMouseUp = () => {
+      setResizing(null);
+    };
+    if (resizing !== null) {
+      window.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+    return;
+  }, [resizing]);
+  import_react8.default.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]);
+  import_react8.default.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__ */ import_react8.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",
+        ...getPanelPosition(placement),
+        opacity: visible ? 1 : 0,
+        transform: `${getPanelPosition(placement).transform} ${getPanelToggleTransforms(visible ?? false)}`,
+        ...panelSize
+      },
+      onMouseEnter: () => {
+        setHover(true);
+      },
+      onMouseLeave: () => {
+        setHover(false);
+      }
+    },
+    children({ resizing }),
+    /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.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: hover || resizing ? "auto" : "none",
+          opacity: hover || resizing ? 1 : 0
+        },
+        onMouseDown: (event) => {
+          setResizing("lx");
+          setResizePosition({
+            x: event.clientX,
+            y: event.clientY
+          });
+          event.preventDefault();
+        }
+      },
+      /* @__PURE__ */ import_react8.default.createElement(ResizeHandleIcon, null)
+    ), /* @__PURE__ */ import_react8.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: hover || resizing ? "auto" : "none",
+          opacity: hover || resizing ? 1 : 0
+        },
+        onMouseDown: (event) => {
+          setResizing("rx");
+          setResizePosition({
+            x: event.clientX,
+            y: event.clientY
+          });
+          event.preventDefault();
+        }
+      },
+      /* @__PURE__ */ import_react8.default.createElement(ResizeHandleIcon, null)
+    ), /* @__PURE__ */ import_react8.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: hover || resizing ? "auto" : "none",
+          opacity: hover || resizing ? 1 : 0
+        },
+        onMouseDown: (event) => {
+          setResizing("ty");
+          setResizePosition({
+            x: event.clientX,
+            y: event.clientY
+          });
+          event.preventDefault();
+        }
+      },
+      /* @__PURE__ */ import_react8.default.createElement(
+        ResizeHandleIcon,
+        {
+          style: {
+            transform: "rotate(90deg)",
+            transformOrigin: "13px 13px"
+          }
+        }
+      )
+    ), /* @__PURE__ */ import_react8.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: hover || resizing ? "auto" : "none",
+          opacity: hover || resizing ? 1 : 0
+        },
+        onMouseDown: (event) => {
+          setResizing("by");
+          setResizePosition({
+            x: event.clientX,
+            y: event.clientY
+          });
+          event.preventDefault();
+        }
+      },
+      /* @__PURE__ */ import_react8.default.createElement(
+        ResizeHandleIcon,
+        {
+          style: {
+            transform: "rotate(90deg)",
+            transformOrigin: "13px 13px"
+          }
+        }
+      )
+    ))
+  );
+};
+
+// src/panel.tsx
+var import_devtools_shared2 = require("@refinedev/devtools-shared");
+var MAX_IFRAME_WAIT_TIME = 1500;
+var DevtoolsPanel = process.env.NODE_ENV !== "development" ? () => null : () => {
+  const [browser, setBrowser] = import_react9.default.useState(false);
+  const [visible, setVisible] = import_react9.default.useState(false);
+  const [placement] = import_react9.default.useState("bottom");
+  const { httpUrl, ws } = import_react9.default.useContext(import_devtools_shared2.DevToolsContext);
+  const [width, setWidth] = import_react9.default.useState(0);
+  const [selectorActive, setSelectorActive] = import_react9.default.useState(false);
+  const [iframeStatus, setIframeStatus] = import_react9.default.useState("loading");
+  const onSelectorHighlight = import_react9.default.useCallback(
+    (name) => {
+      if (ws) {
+        (0, import_devtools_shared2.send)(ws, import_devtools_shared2.DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR, {
+          name
+        });
+      }
+      setVisible(true);
+    },
+    [ws]
+  );
+  import_react9.default.useEffect(() => {
+    if (selectorActive) {
+      setVisible(false);
+    }
+  }, [selectorActive]);
+  import_react9.default.useEffect(() => {
+    if (typeof window !== "undefined") {
+      setBrowser(true);
+    }
+  }, []);
+  import_react9.default.useEffect(() => {
+    if (browser) {
+      setWidth(window.innerWidth);
+      const onResize = () => {
+        setWidth(window.innerWidth);
+      };
+      window.addEventListener("resize", onResize);
+      return () => {
+        window.removeEventListener("resize", onResize);
+      };
+    }
+    return () => void 0;
+  }, [browser]);
+  import_react9.default.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;
+  }, []);
+  import_react9.default.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__ */ import_react9.default.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        left: `${Math.round(width / 2)}px`,
+        transform: "translateX(-50%)",
+        bottom: 0,
+        zIndex: 99999
+      }
+    },
+    /* @__PURE__ */ import_react9.default.createElement(
+      DevtoolsPin,
+      {
+        onClick: () => {
+          setVisible((v) => !v);
+          setSelectorActive(false);
+        },
+        onSelectorHighlight,
+        selectorActive,
+        setSelectorActive
+      }
+    ),
+    /* @__PURE__ */ import_react9.default.createElement(ResizablePane, { visible, placement }, ({ resizing }) => /* @__PURE__ */ import_react9.default.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>
-      `,Pe=`
+      `;
+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>
-      `;var re=g(require("react")),ie=require("@refinedev/devtools-shared");var R={};var ne=()=>{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 R<"u"&&R.env?R.env.REFINE_DEVTOOLS_PORT||R.env.VITE_REFINE_DEVTOOLS_PORT:null)||5001;return[`http://localhost:${t}`,`ws://localhost:${t}`]};var le=process.env.NODE_ENV!=="development"?({children:e})=>e:({children:e,url:t=ne()})=>re.default.createElement(ie.DevToolsContextProvider,{url:t},e);
+      `;
+
+// src/provider.tsx
+var import_react10 = __toESM(require("react"));
+var import_devtools_shared3 = require("@refinedev/devtools-shared");
+
+// src/utilities/get-devtools-url-from-env.ts
+var import_meta = {};
+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__ */ import_react10.default.createElement(import_devtools_shared3.DevToolsContextProvider, { url }, children);
+};
 //# sourceMappingURL=index.cjs.map