@refinedev/devtools 1.1.35 → 1.1.37

package/dist/iife/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../devtools-shared/src/index.ts","../../../devtools-shared/src/event-types.ts","../../../devtools-shared/src/scopes.ts","../../../devtools-shared/src/context.tsx","../../../devtools-shared/src/send.ts","../../../devtools-shared/src/receive.ts","../../src/panel.tsx","../../src/components/devtools-pin.tsx","../../src/components/devtools-selector.tsx","../../src/utilities/use-selector.tsx","../../src/components/selector-box.tsx","../../src/components/icons/arrow-union-icon.tsx","../../src/components/selector-hint.tsx","../../src/components/icons/devtools-icon.tsx","../../src/components/icons/selector-button.tsx","../../src/components/resizable-pane.tsx","../../src/utilities/index.ts","../../src/components/icons/resize-handle-icon.tsx","../../src/provider.tsx"],"sourcesContent":["export { DevtoolsEvent, DevtoolsEventPayloads } from \"./event-types\";\nexport { TraceType } from \"./trace\";\nexport { Feed, FeedSection } from \"./feed\";\nexport {\n  PackageType,\n  PackageLatestVersionType,\n  AvailablePackageType,\n} from \"./package\";\nexport { RefineHook, Scopes, hooksByScope, scopes } from \"./scopes\";\n\nexport { DevToolsContextProvider, DevToolsContext } from \"./context\";\n\nexport { send } from \"./send\";\nexport { receive } from \"./receive\";\n","import {\n  Mutation,\n  MutationKey,\n  MutationStatus,\n  QueryKey,\n  QueryState,\n  QueryStatus,\n} from \"@tanstack/react-query\";\nimport { TraceType } from \"./trace\";\n\nexport enum DevtoolsEvent {\n  RELOAD = \"devtools:reload\",\n  DEVTOOLS_INIT = \"devtools:init\",\n  DEVTOOLS_HANDSHAKE = \"devtools:handshake\",\n  DEVTOOLS_ALREADY_CONNECTED = \"devtools:already-connected\",\n  ACTIVITY = \"devtools:send-activity\",\n  DEVTOOLS_ACTIVITY_UPDATE = \"devtools:activity-update\",\n  DEVTOOLS_CONNECTED_APP = \"devtools:connected-app\",\n  DEVTOOLS_DISCONNECTED_APP = \"devtools:disconnected-app\",\n  DEVTOOLS_HIGHLIGHT_IN_MONITOR = \"devtools:highlight-in-monitor\",\n  DEVTOOLS_HIGHLIGHT_IN_MONITOR_ACTION = \"devtools:highlight-in-monitor-action\",\n  DEVTOOLS_LOGIN_SUCCESS = \"devtools:login-success\",\n  DEVTOOLS_RELOAD_AFTER_LOGIN = \"devtools:reload-after-login\",\n}\n\ntype Timestamps = {\n  createdAt: number;\n  updatedAt: number;\n};\n\ntype ActivityPayload =\n  | {\n      type: \"mutation\";\n      identifier: string;\n      key?: MutationKey;\n      status?: MutationStatus;\n      trace?: TraceType[];\n      state: Mutation<any, any, any, any>[\"state\"];\n      variables?: Mutation<any, any, any, any>[\"state\"][\"variables\"];\n      hookName: string;\n      resourcePath: string | null;\n      legacyKey: boolean;\n    }\n  | {\n      type: \"query\";\n      identifier: string;\n      key?: QueryKey;\n      status?: QueryStatus;\n      trace?: TraceType[];\n      state: QueryState<any, any>;\n      hookName: string;\n      resourcePath: string | null;\n      legacyKey: boolean;\n    };\n\nexport type DevtoolsEventPayloads = {\n  [DevtoolsEvent.RELOAD]: {};\n  [DevtoolsEvent.DEVTOOLS_INIT]: { url: string };\n  [DevtoolsEvent.DEVTOOLS_HANDSHAKE]: { url: string };\n  [DevtoolsEvent.DEVTOOLS_ALREADY_CONNECTED]: { url: string };\n  [DevtoolsEvent.ACTIVITY]: ActivityPayload;\n  [DevtoolsEvent.DEVTOOLS_ACTIVITY_UPDATE]: {\n    updatedActivities: (ActivityPayload & Timestamps)[];\n  };\n  [DevtoolsEvent.DEVTOOLS_CONNECTED_APP]: { url: string | null };\n  [DevtoolsEvent.DEVTOOLS_DISCONNECTED_APP]: {};\n  [DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR]: { name: string };\n  [DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR_ACTION]: { name: string };\n  [DevtoolsEvent.DEVTOOLS_LOGIN_SUCCESS]: {};\n  [DevtoolsEvent.DEVTOOLS_RELOAD_AFTER_LOGIN]: {};\n};\n","export type RefineHook =\n  | \"useCan\"\n  | \"useLog\"\n  | \"useLogList\"\n  | \"useCreate\"\n  | \"useCreateMany\"\n  | \"useCustom\"\n  | \"useCustomMutation\"\n  | \"useDelete\"\n  | \"useDeleteMany\"\n  | \"useInfiniteList\"\n  | \"useList\"\n  | \"useMany\"\n  | \"useOne\"\n  | \"useUpdate\"\n  | \"useUpdateMany\"\n  | \"useForgotPassword\"\n  | \"useGetIdentity\"\n  | \"useIsAuthenticated\"\n  | \"useLogin\"\n  | \"useLogout\"\n  | \"useOnError\"\n  | \"usePermissions\"\n  | \"useRegister\"\n  | \"useUpdatePassword\";\n\nexport type Scopes = \"data\" | \"audit-log\" | \"access-control\" | \"auth\";\n\nexport const scopes: Record<RefineHook, Scopes> = {\n  useCan: \"access-control\",\n  useLog: \"audit-log\",\n  useLogList: \"audit-log\",\n  useCreate: \"data\",\n  useCreateMany: \"data\",\n  useCustom: \"data\",\n  useCustomMutation: \"data\",\n  useDelete: \"data\",\n  useDeleteMany: \"data\",\n  useInfiniteList: \"data\",\n  useList: \"data\",\n  useMany: \"data\",\n  useOne: \"data\",\n  useUpdate: \"data\",\n  useUpdateMany: \"data\",\n  useForgotPassword: \"auth\",\n  useGetIdentity: \"auth\",\n  useIsAuthenticated: \"auth\",\n  useLogin: \"auth\",\n  useLogout: \"auth\",\n  useOnError: \"auth\",\n  usePermissions: \"auth\",\n  useRegister: \"auth\",\n  useUpdatePassword: \"auth\",\n};\n\nexport const hooksByScope = Object.entries(scopes).reduce(\n  (acc, [hook, scope]) => {\n    if (!acc[scope]) {\n      acc[scope] = [];\n    }\n\n    acc[scope].push(hook as RefineHook);\n\n    return acc;\n  },\n  {} as Record<Scopes, RefineHook[]>,\n);\n","import React from \"react\";\nimport { DevtoolsEvent } from \"./event-types\";\nimport { send } from \"./send\";\nimport { receive } from \"./receive\";\n\ntype DevToolsContextValue = {\n  __devtools: boolean;\n  port: number;\n  url: string;\n  secure: boolean;\n  ws: WebSocket | null;\n  devtoolsUrl?: string;\n};\n\nexport const DevToolsContext = React.createContext<DevToolsContextValue>({\n  __devtools: false,\n  port: 5002,\n  url: \"localhost\",\n  secure: false,\n  ws: null,\n});\n\ntype Props = React.PropsWithChildren<\n  Partial<Pick<DevToolsContextValue, \"port\" | \"__devtools\">>\n>;\n\nexport const DevToolsContextProvider: React.FC<Props> = ({\n  __devtools,\n  port,\n  children,\n}) => {\n  const [values, setValues] = React.useState<DevToolsContextValue>({\n    __devtools: __devtools ?? false,\n    port: port ?? 5002,\n    url: \"localhost\",\n    secure: false,\n    ws: null,\n  });\n\n  const [ws, setWs] = React.useState<WebSocket | null>(null);\n\n  React.useEffect(() => {\n    const wsInstance = new WebSocket(\n      `${values.secure ? \"wss\" : \"ws\"}://localhost:${values.port}`,\n    );\n\n    const unsubscribe = receive(\n      wsInstance,\n      DevtoolsEvent.DEVTOOLS_HANDSHAKE,\n      (data) => {\n        setValues((v) => ({\n          ...v,\n          devtoolsUrl: data.url,\n        }));\n        unsubscribe();\n      },\n    );\n\n    wsInstance.addEventListener(\"open\", () => {\n      if (!values.__devtools) {\n        send(wsInstance, DevtoolsEvent.DEVTOOLS_INIT, {\n          url: window.location.origin,\n        });\n      }\n    });\n\n    setWs(wsInstance);\n\n    return () => {\n      unsubscribe();\n\n      wsInstance.close(1000, window.location.origin);\n    };\n  }, []);\n\n  const contextValues = React.useMemo<DevToolsContextValue>(\n    () => ({\n      ...values,\n      ws,\n    }),\n    [values, ws],\n  );\n\n  return (\n    <DevToolsContext.Provider value={contextValues}>\n      {children}\n    </DevToolsContext.Provider>\n  );\n};\n","import { DevtoolsEvent, DevtoolsEventPayloads } from \"./event-types\";\n\nexport async function send<T extends DevtoolsEvent>(\n  ws: WebSocket,\n  event: T,\n  payload: DevtoolsEventPayloads[T],\n) {\n  // check if the socket is open\n  // if not, wait for it to open\n  if (ws.readyState !== ws.OPEN) {\n    await new Promise<void>((resolve) => {\n      const listener = () => {\n        ws.send(JSON.stringify({ event, payload }));\n        resolve();\n        ws.removeEventListener(\"open\", listener);\n      };\n\n      ws.addEventListener(\"open\", listener);\n    });\n    return;\n  }\n  ws.send(JSON.stringify({ event, payload }));\n  return;\n}\n","// receive ws message by adding a listener to the ws object\n\nimport { DevtoolsEvent, DevtoolsEventPayloads } from \"./event-types\";\n\nexport function receive<T extends DevtoolsEvent>(\n  ws: WebSocket,\n  event: T,\n  callback: (payload: DevtoolsEventPayloads[T]) => void,\n) {\n  const listener = (e: MessageEvent) => {\n    const { event: receivedEvent, payload } = JSON.parse(e.data);\n    if (event === receivedEvent) {\n      callback(payload);\n    }\n  };\n\n  ws.addEventListener(\"message\", listener);\n\n  return () => {\n    ws.removeEventListener(\"message\", listener);\n  };\n}\n","import React from \"react\";\nimport { DevtoolsPin } from \"./components/devtools-pin\";\nimport { ResizablePane } from \"./components/resizable-pane\";\n\nimport {\n  DevToolsContext,\n  DevtoolsEvent,\n  send,\n} from \"@refinedev/devtools-shared\";\n\nimport { Placement } from \"./interfaces/placement\";\n\nexport const DevtoolsPanel =\n  __DEV_CONDITION__ !== \"development\"\n    ? () => null\n    : () => {\n        const [browser, setBrowser] = React.useState<boolean>(false);\n        const [visible, setVisible] = React.useState(false);\n        const [placement] = React.useState<Placement>(\"bottom\");\n        const { devtoolsUrl, ws } = React.useContext(DevToolsContext);\n        const [width, setWidth] = React.useState<number>(0);\n\n        const onSelectorHighlight = React.useCallback(\n          (name: string) => {\n            if (ws) {\n              send(ws, DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR, {\n                name,\n              });\n            }\n            setVisible(true);\n          },\n          [ws],\n        );\n\n        const onSelectorOpen = React.useCallback(() => {\n          setVisible(false);\n        }, []);\n\n        React.useEffect(() => {\n          if (typeof window !== \"undefined\") {\n            setBrowser(true);\n          }\n        }, []);\n\n        React.useEffect(() => {\n          if (browser) {\n            // set width by window size dynamically\n            setWidth(window.innerWidth);\n\n            const onResize = () => {\n              setWidth(window.innerWidth);\n            };\n\n            window.addEventListener(\"resize\", onResize);\n\n            return () => {\n              window.removeEventListener(\"resize\", onResize);\n            };\n          }\n\n          return () => undefined;\n        }, [browser]);\n\n        if (!browser) {\n          return null;\n        }\n\n        return (\n          <div\n            style={{\n              position: \"fixed\",\n              left: `${Math.round(width / 2)}px`,\n              transform: \"translateX(-50%)\",\n              bottom: 0,\n              zIndex: 99999,\n            }}\n          >\n            <DevtoolsPin\n              onClick={() => setVisible((v) => !v)}\n              onSelectorHighlight={onSelectorHighlight}\n              onSelectorOpen={onSelectorOpen}\n            />\n            <ResizablePane visible={visible} placement={placement}>\n              {({ resizing }) => (\n                <iframe\n                  allow=\"clipboard-write;\"\n                  src={devtoolsUrl}\n                  srcDoc={\n                    devtoolsUrl\n                      ? undefined\n                      : `\n                            <html style=\"height:100%;padding:0;margin:0;\">\n                                <body style=\"display:flex;justify-content:center;height:100%;padding:24px;margin:0;align-items:center;box-sizing:border-box;\">\n                                    <h1 style=\"font-family:ui-monospace,monospace;color:#CFD7E2;text-align:center;\">Could not connect to the devtools server</h1>\n                                </body>\n                            </html>\n                        `\n                  }\n                  style={{\n                    width: \"100%\",\n                    height: \"100%\",\n                    border: \"none\",\n                    borderRadius: \"7px\",\n                    pointerEvents: resizing ? \"none\" : \"auto\",\n                    background: \"#14141F\",\n                  }}\n                />\n              )}\n            </ResizablePane>\n          </div>\n        );\n      };\n","import React from \"react\";\nimport { DevtoolsSelector } from \"./devtools-selector\";\nimport { DevtoolsIcon } from \"./icons/devtools-icon\";\nimport { SelectorButtonIcon } from \"./icons/selector-button\";\n\ntype Props = {\n  onClick?: () => void;\n  groupHover?: boolean;\n  onSelectorHighlight: (name: string) => void;\n  onSelectorOpen: () => void;\n};\n\nexport const DevtoolsPin = ({\n  onClick,\n  onSelectorHighlight,\n  onSelectorOpen,\n}: Props) => {\n  const [hover, setHover] = React.useState(false);\n\n  return (\n    <div\n      onMouseOver={() => setHover(true)}\n      onMouseOut={() => setHover(false)}\n      style={{\n        position: \"relative\",\n        userSelect: \"none\",\n        WebkitUserSelect: \"none\",\n        background: \"none\",\n        border: \"none\",\n        padding: 0,\n        paddingRight: \"1px\",\n        margin: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        cursor: \"pointer\",\n        color: hover ? \"#0FBDBD\" : \"#6C7793\",\n        transition: \"color 0.1s ease-in-out\",\n      }}\n      onClick={onClick}\n    >\n      <DevtoolsIcon />\n      <DevtoolsSelector\n        style={{\n          position: \"absolute\",\n          top: 5,\n          right: 18,\n          width: \"16px\",\n          height: \"16px\",\n        }}\n        icon={\n          <SelectorButtonIcon\n            width={16}\n            height={16}\n            style={{ pointerEvents: \"none\" }}\n          />\n        }\n        onSelectorOpen={onSelectorOpen}\n        onHighlight={onSelectorHighlight}\n      />\n    </div>\n  );\n};\n","import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useSelector } from \"src/utilities/use-selector\";\nimport { SelectorBox } from \"./selector-box\";\nimport { SelectorHint } from \"./selector-hint\";\n\ntype Props = {\n  onSelectorOpen: () => void;\n  onHighlight: (name: string) => void;\n  icon?: React.ReactNode;\n  style?: React.CSSProperties;\n};\n\nexport const DevtoolsSelector = ({\n  onSelectorOpen,\n  onHighlight,\n  icon,\n  style,\n}: Props) => {\n  const [hover, setHover] = React.useState(false);\n  const [active, setActive] = React.useState(false);\n  const { rect, name } = useSelector(active);\n\n  const [selectorBoxRoot, setSelectorBoxRoot] =\n    React.useState<HTMLElement | null>(null);\n\n  React.useEffect(() => {\n    if (!selectorBoxRoot) {\n      const element = document.createElement(\"div\");\n      element.id = \"selector-box-root\";\n\n      document.body.appendChild(element);\n\n      setSelectorBoxRoot(element);\n    }\n  }, []);\n\n  React.useEffect(() => {\n    if (active) {\n      document.body.style.cursor = \"crosshair\";\n    } else {\n      document.body.style.cursor = \"default\";\n    }\n  }, [active]);\n\n  React.useEffect(() => {\n    const onMouseClick = (e: MouseEvent) => {\n      if (!active) return;\n      if (!name) return;\n\n      e?.preventDefault();\n      e?.stopPropagation();\n      e.stopImmediatePropagation();\n      onHighlight(name);\n      setActive(false);\n    };\n\n    if (active) {\n      document.addEventListener(\"click\", onMouseClick, {\n        capture: true,\n      });\n\n      return () => {\n        document.removeEventListener(\"click\", onMouseClick, {\n          capture: true,\n        });\n      };\n    }\n\n    return () => 0;\n  }, [name, onHighlight, active]);\n\n  React.useEffect(() => {\n    if (active) {\n      onSelectorOpen();\n    }\n  }, [active, onSelectorOpen]);\n\n  return (\n    <div style={style}>\n      <div\n        role=\"button\"\n        title=\"Element Selector\"\n        onMouseOver={() => setHover(true)}\n        onMouseOut={() => setHover(false)}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          (document?.activeElement as HTMLElement)?.blur();\n          setActive((active) => !active);\n        }}\n        style={{\n          padding: 0,\n          margin: 0,\n          height: \"100%\",\n          width: \"100%\",\n          transform: hover ? \"rotate(180deg)\" : \"rotate(0deg)\",\n          transition: \"transform 0.2s ease-in-out\",\n        }}\n      >\n        {icon}\n      </div>\n      <SelectorHint active={active} />\n      {active &&\n        selectorBoxRoot &&\n        createPortal(<SelectorBox {...rect} name={name} />, selectorBoxRoot)}\n    </div>\n  );\n};\n","import {\n  getElementFromFiber,\n  getFiberFromElement,\n  getFirstFiberHasName,\n  getFirstStateNodeFiber,\n  getNameFromFiber,\n  getParentOfFiber,\n} from \"@aliemir/dom-to-fiber-utils\";\nimport { DevToolsContext } from \"@refinedev/devtools-shared\";\nimport debounce from \"lodash/debounce\";\nimport React from \"react\";\n\ntype Fiber = Exclude<ReturnType<typeof getFiberFromElement>, null>;\n\nexport const useSelector = (active: boolean) => {\n  const { devtoolsUrl } = React.useContext(DevToolsContext);\n  const [traceItems, setTraceItems] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (active) {\n      fetch(\n        `${devtoolsUrl ?? \"http://localhost:5001\"}/api/unique-trace-items`,\n      ).then((res) =>\n        res.json().then((data: { data: string[] }) => setTraceItems(data.data)),\n      );\n    }\n  }, [active, devtoolsUrl]);\n\n  const [selectedFiber, setSelectedFiber] = React.useState<{\n    stateNode: Fiber | null;\n    nameFiber: Fiber | null;\n  }>({\n    stateNode: null,\n    nameFiber: null,\n  });\n  const [activeFiber, setActiveFiber] = React.useState<{\n    stateNode: Fiber | null;\n    nameFiber: Fiber | null;\n    derived?: boolean;\n  }>({\n    stateNode: null,\n    nameFiber: null,\n    derived: false,\n  });\n\n  React.useEffect(() => {\n    if (active) {\n      return () => {\n        setSelectedFiber({\n          stateNode: null,\n          nameFiber: null,\n        });\n        setActiveFiber({\n          stateNode: null,\n          nameFiber: null,\n          derived: false,\n        });\n      };\n    }\n\n    return () => 0;\n  }, [active]);\n\n  const selectAppropriateFiber = React.useCallback(\n    (start: Fiber | null) => {\n      let fiber = start;\n      let firstParentOfNodeWithName: Fiber | null;\n      let fiberWithStateNode: Fiber | null;\n\n      let acceptedName = false;\n\n      while (!acceptedName && fiber) {\n        // Get the first fiber node that has a name (look up the tree)\n        firstParentOfNodeWithName = getFirstFiberHasName(fiber);\n        // Get the first fiber node that has a state node (look up the tree)\n        fiberWithStateNode = getFirstStateNodeFiber(firstParentOfNodeWithName);\n        acceptedName = traceItems.includes(\n          getNameFromFiber(firstParentOfNodeWithName) ?? \"\",\n        );\n        if (!acceptedName) {\n          fiber = getParentOfFiber(fiber);\n        }\n      }\n\n      if (fiberWithStateNode && firstParentOfNodeWithName) {\n        return {\n          stateNode: fiberWithStateNode,\n          nameFiber: firstParentOfNodeWithName,\n        };\n      }\n      return {\n        stateNode: null,\n        nameFiber: null,\n      };\n    },\n    [traceItems],\n  );\n\n  const pickFiber = React.useCallback(\n    (target: HTMLElement) => {\n      const fiber = getFiberFromElement(target);\n\n      setSelectedFiber(selectAppropriateFiber(fiber));\n      return;\n    },\n    [traceItems],\n  );\n\n  React.useEffect(() => {\n    if (\n      activeFiber.stateNode !== selectedFiber.stateNode ||\n      activeFiber.nameFiber !== selectedFiber.nameFiber\n    ) {\n      setActiveFiber({\n        stateNode: selectedFiber.stateNode,\n        nameFiber: selectedFiber.nameFiber,\n        derived: false,\n      });\n    }\n  }, [selectedFiber]);\n\n  const previousValues = React.useRef<{\n    rect: {\n      width: number;\n      height: number;\n      x: number;\n      y: number;\n    };\n    name: string;\n  }>({\n    rect: {\n      width: 0,\n      height: 0,\n      x: 0,\n      y: 0,\n    },\n    name: \"\",\n  });\n\n  const { rect, name } = React.useMemo(() => {\n    if (!active) {\n      return {\n        rect: {\n          width: 0,\n          height: 0,\n          x: 0,\n          y: 0,\n        },\n        name: \"\",\n      };\n    }\n    if (activeFiber.stateNode || activeFiber.nameFiber) {\n      // Get the element from the fiber with a state node\n      const element = activeFiber.stateNode\n        ? getElementFromFiber(activeFiber.stateNode)\n        : null;\n      // Get the name of the fiber node with a name\n      const fiberName = activeFiber.nameFiber\n        ? getNameFromFiber(activeFiber.nameFiber)\n        : null;\n\n      if (!element) {\n        return {\n          rect: previousValues.current.rect,\n          name: fiberName ?? previousValues.current.name,\n        };\n      }\n\n      const bounding = element.getBoundingClientRect?.();\n\n      if (!bounding) {\n        return {\n          rect: previousValues.current.rect,\n          name: fiberName ?? previousValues.current.name,\n        };\n      }\n\n      return {\n        rect: {\n          width: bounding.width,\n          height: bounding.height,\n          x: bounding.left,\n          y: bounding.top,\n        },\n        name: fiberName ?? previousValues.current.name,\n      };\n    }\n\n    return previousValues.current;\n  }, [activeFiber, active]);\n\n  previousValues.current = {\n    rect,\n    name,\n  };\n\n  React.useEffect(() => {\n    if (active) {\n      const listener = (e: KeyboardEvent) => {\n        // if user presses shift, toggle the derived state and set the active fiber to the parent\n        if (e.key === \"Shift\" && activeFiber.stateNode) {\n          e.stopPropagation();\n          e.preventDefault();\n\n          const parent = getParentOfFiber(activeFiber.nameFiber);\n\n          const fibers = selectAppropriateFiber(parent);\n\n          if (fibers.nameFiber && fibers.stateNode) {\n            setActiveFiber({\n              ...fibers,\n              derived: true,\n            });\n            return;\n          }\n        }\n      };\n\n      document.addEventListener(\"keydown\", listener);\n      return () => document.removeEventListener(\"keydown\", listener);\n    }\n    return () => 0;\n  }, [activeFiber, active]);\n\n  React.useEffect(() => {\n    if (active) {\n      let previousTarget: HTMLElement | null = null;\n      const listener = debounce((e: MouseEvent) => {\n        if (e?.target) {\n          if (previousTarget === e.target) {\n            return;\n          }\n          pickFiber(e.target as HTMLElement);\n          previousTarget = e.target as HTMLElement;\n        }\n      }, 50);\n\n      document.addEventListener(\"mousemove\", listener);\n\n      return () => document.removeEventListener(\"mousemove\", listener);\n    }\n    return () => 0;\n  }, [active, pickFiber]);\n\n  return {\n    rect,\n    name,\n  };\n};\n","import React from \"react\";\nimport { ArrowUnionIcon } from \"./icons/arrow-union-icon\";\n\nconst Y_OFFSET = 38;\nconst X_OFFSET = 7;\n\nexport const SelectorBox = ({\n  width,\n  height,\n  x,\n  y,\n  name,\n}: {\n  width: number;\n  height: number;\n  x: number;\n  y: number;\n  name: string;\n}) => {\n  const namePosition =\n    y > Y_OFFSET ? \"top\" : height > 3 * Y_OFFSET ? \"inset\" : \"bottom\";\n\n  const outlinePosition = x > X_OFFSET && y > X_OFFSET ? \"outside\" : \"inside\";\n\n  return (\n    <div\n      id=\"selector-box\"\n      style={{\n        pointerEvents: \"none\",\n        position: \"fixed\",\n        opacity: name ? 1 : 0,\n        transitionProperty: \"width, height, transform, opacity\",\n        transitionDuration: \"0.15s\",\n        transitionTimingFunction: \"ease-out\",\n        border: \"1.5px solid #47EBEB\",\n        borderRadius: \"4px\",\n        background: \"rgba(37,160,160, 0.25)\",\n        backdropFilter: \"sepia(30%) hue-rotate(180deg)\",\n        zIndex: 99998,\n        ...(outlinePosition === \"outside\"\n          ? {\n              left: -6,\n              top: -6,\n              width: width + 10,\n              height: height + 10,\n              transform: `translate(${x}px, ${y}px)`,\n            }\n          : {\n              left: 0,\n              top: 0,\n              width: width - 10,\n              height: height - 20,\n              transform: `translate(${x + 4}px, ${y + 4}px)`,\n            }),\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"-1.5px\",\n          background: \"#303450\",\n          border: \"1px solid #474E6B\",\n          borderRadius: \"4px\",\n          padding: \"8px 12px\",\n          fontSize: \"12px\",\n          lineHeight: \"16px\",\n          fontWeight: 400,\n          color: \"#ffffff\",\n          display: name ? \"block\" : \"none\",\n          ...(namePosition === \"top\" && {\n            top: \"-38px\",\n          }),\n          ...(namePosition === \"bottom\" && {\n            bottom: \"-38px\",\n          }),\n          ...(namePosition === \"inset\" && {\n            top: \"4px\",\n            left: \"8px\",\n          }),\n        }}\n      >\n        {name}\n\n        <ArrowUnionIcon\n          style={{\n            position: \"absolute\",\n            left: \"30%\",\n            ...(namePosition === \"top\" && {\n              transform: \"translateX(-50%) rotate(180deg)\",\n              bottom: \"-9px\",\n            }),\n            ...(namePosition === \"bottom\" && {\n              transform: \"translateX(-50%) \",\n              top: \"-9px\",\n            }),\n            ...(namePosition === \"inset\" && {\n              transform: \"translateX(-50%) rotate(-90deg)\",\n              top: \"8px\",\n              left: \"-1px\",\n            }),\n            display: name ? \"block\" : \"none\",\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n","import * as React from \"react\";\nimport { SVGProps } from \"react\";\n\nexport const ArrowUnionIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={16}\n    height={16}\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    {...props}\n  >\n    <path\n      fill=\"#303450\"\n      stroke=\"url(#arrow-union-icon)\"\n      d=\"M.5 8.495V15.5h15V8.495a4.5 4.5 0 0 1-3.816-2.483L9.341 1.33c-.553-1.105-2.13-1.105-2.683 0L4.317 6.012A4.5 4.5 0 0 1 .5 8.495Z\"\n    />\n    <defs>\n      <linearGradient\n        id=\"arrow-union-icon\"\n        x1={8}\n        x2={8}\n        y1={0}\n        y2={10}\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stopColor=\"#474E6B\" />\n        <stop offset={0.9} stopColor=\"#474E6B\" />\n        <stop offset={0.901} stopColor=\"#474E6B\" stopOpacity={0} />\n      </linearGradient>\n    </defs>\n  </svg>\n);\n","import React from \"react\";\n\nexport const SelectorHint = ({ active }: { active: boolean }) => {\n  return (\n    <div\n      style={{\n        color: \"white\",\n        pointerEvents: \"none\",\n        position: \"absolute\",\n        left: \"calc(-50% - 144px - 14px)\",\n        top: \"-36px\",\n        width: \"max-content\",\n        borderRadius: \"8px\",\n        backgroundColor: \"#40414A\",\n        opacity: active ? 1 : 0,\n        transitionDuration: \"0.2s\",\n        transitionProperty: \"transform,opacity\",\n        transitionTimingFunction: \"ease-in-out\",\n        padding: \"8px\",\n        fontSize: \"12px\",\n        lineHeight: \"12px\",\n        fontWeight: 400,\n        textShadow:\n          \"0 0 2px #1D1E30, 1px 0 2px #1D1E30, -1px 0 2px #1D1E30, 0 1px 2px #1D1E30, 0 -1px 2px #1D1E30\",\n      }}\n    >\n      <kbd\n        style={{\n          marginLeft: \"4px\",\n          padding: \"2px 4px\",\n          borderRadius: \"2px\",\n          background: \"#1D1E30\",\n          color: \"#CFD7E2\",\n          border: \"none\",\n          textShadow: \"none\",\n        }}\n      >\n        shift\n      </kbd>{\" \"}\n      to move to parent.\n      <kbd\n        style={{\n          marginLeft: \"4px\",\n          padding: \"2px 4px\",\n          borderRadius: \"2px\",\n          background: \"#1D1E30\",\n          color: \"#CFD7E2\",\n          border: \"none\",\n          textShadow: \"none\",\n        }}\n      >\n        space\n      </kbd>{\" \"}\n      to highlight in monitor.\n    </div>\n  );\n};\n","import * as React from \"react\";\nimport { SVGProps } from \"react\";\n\nexport const DevtoolsIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={157}\n    height={25}\n    viewBox=\"0 0 157 25\"\n    fill=\"none\"\n    {...props}\n  >\n    <g>\n      <path fill=\"#1D1E30\" d=\"M17 1h123v24H17z\" />\n      <path\n        fill=\"#1D1E30\"\n        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\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M25 14.333A1.333 1.333 0 1 1 25 17a1.333 1.333 0 0 1 0-2.667Z\"\n      />\n      <path\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        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\"\n        clipRule=\"evenodd\"\n      />\n      <path\n        fill=\"#CFD7E2\"\n        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\"\n      />\n    </g>\n  </svg>\n);\n","import React from \"react\";\n\nexport const SelectorButtonIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={16}\n    height={16}\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    {...props}\n  >\n    <path\n      fill=\"#0FBDBD\"\n      fillRule=\"evenodd\"\n      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\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n","import React from \"react\";\nimport { Placement } from \"src/interfaces/placement\";\nimport {\n  getDefaultPanelSize,\n  getMaxPanelHeight,\n  getMaxPanelWidth,\n  getPanelPosition,\n  getPanelToggleTransforms,\n  MIN_PANEL_HEIGHT,\n  MIN_PANEL_WIDTH,\n  roundToEven,\n} from \"src/utilities\";\nimport { ResizeHandleIcon } from \"./icons/resize-handle-icon\";\n\ntype Props = {\n  placement: Placement;\n  defaultWidth?: number;\n  minWidth?: number;\n  maxWidth?: number;\n  defaultHeight?: number;\n  minHeight?: number;\n  maxHeight?: number;\n  children: ({ resizing }: { resizing: string | null }) => React.ReactNode;\n  onResize?: (width: number, height: number) => void;\n  visible?: boolean;\n};\n\nexport const ResizablePane = ({ placement, visible, children }: Props) => {\n  const [hover, setHover] = React.useState(false);\n  const [resizing, setResizing] = React.useState<\n    \"lx\" | \"rx\" | \"ty\" | \"by\" | null\n  >(null);\n  const [resizePosition, setResizePosition] = React.useState<{\n    x: number;\n    y: number;\n  } | null>(null);\n  const [panelSize, setPanelSize] = React.useState<\n    Record<\"width\" | \"height\", number>\n  >(() => {\n    const defaultSize = getDefaultPanelSize(placement);\n\n    return {\n      width: roundToEven(defaultSize.width),\n      height: roundToEven(defaultSize.height),\n    };\n  });\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      setPanelSize((p) => {\n        const defaultSize = getDefaultPanelSize(placement, p);\n\n        return {\n          width: roundToEven(defaultSize.width),\n          height: roundToEven(defaultSize.height),\n        };\n      });\n    };\n\n    handleResize();\n\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [placement]);\n\n  React.useEffect(() => {\n    const handleMouseUp = () => {\n      setResizing(null);\n    };\n\n    if (resizing !== null) {\n      window.addEventListener(\"mouseup\", handleMouseUp);\n\n      return () => {\n        window.removeEventListener(\"mouseup\", handleMouseUp);\n      };\n    }\n\n    return;\n  }, [resizing]);\n\n  React.useEffect(() => {\n    const currentCursor = document.body.style.cursor;\n\n    if (resizing?.includes(\"x\")) {\n      document.body.style.cursor = \"col-resize\";\n    } else if (resizing?.includes(\"y\")) {\n      document.body.style.cursor = \"row-resize\";\n    }\n\n    return () => {\n      document.body.style.cursor = currentCursor;\n    };\n  }, [resizing]);\n\n  React.useEffect(() => {\n    const handleMouseMove = (e: MouseEvent) => {\n      if (resizing?.[1] === \"x\") {\n        const diff = e.clientX - (resizePosition?.x ?? e.clientX);\n        const newWidth =\n          panelSize.width + (resizing === \"lx\" ? -diff : diff) * 2;\n\n        setPanelSize((p) => ({\n          ...p,\n          width: roundToEven(\n            Math.min(\n              getMaxPanelWidth(placement),\n              Math.max(MIN_PANEL_WIDTH, newWidth),\n            ),\n          ),\n        }));\n      } else if (resizing?.[1] === \"y\") {\n        const diff = e.clientY - (resizePosition?.y ?? e.clientY);\n        const newHeight =\n          panelSize.height + (resizing === \"ty\" ? -diff : diff) * 1;\n\n        setPanelSize((p) => ({\n          ...p,\n          height: roundToEven(\n            Math.min(\n              getMaxPanelHeight(placement),\n              Math.max(MIN_PANEL_HEIGHT, newHeight),\n            ),\n          ),\n        }));\n      }\n    };\n\n    if (resizing !== null) {\n      window.addEventListener(\"mousemove\", handleMouseMove);\n\n      return () => {\n        window.removeEventListener(\"mousemove\", handleMouseMove);\n      };\n    }\n\n    return;\n  }, [resizing, placement]);\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        borderRadius: \"8px\",\n        boxShadow: \"0 0 10px rgba(0, 0, 0, 0.5)\",\n        border: \"1px solid rgba(0, 0, 0, 0.5)\",\n        transitionProperty: \"transform, opacity\",\n        transitionTimingFunction: \"ease-in-out\",\n        transitionDuration: \"0.2s\",\n        ...getPanelPosition(placement),\n        opacity: visible ? 1 : 0,\n        transform: `${\n          getPanelPosition(placement).transform\n        } ${getPanelToggleTransforms(visible ?? false)}`,\n        ...panelSize,\n      }}\n      onMouseEnter={() => {\n        setHover(true);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n    >\n      {children({ resizing })}\n      {/*  */}\n      <React.Fragment>\n        <div\n          style={{\n            position: \"absolute\",\n            left: 0,\n            top: \"50%\",\n            width: \"10px\",\n            height: \"26px\",\n            transform: \"translateY(-13px) translateX(-5px)\",\n            cursor: \"col-resize\",\n            transition: \"opacity ease-in-out 0.2s\",\n            pointerEvents: hover || resizing ? \"auto\" : \"none\",\n            opacity: hover || resizing ? 1 : 0,\n          }}\n          onMouseDown={(event) => {\n            setResizing(\"lx\");\n            setResizePosition({\n              x: event.clientX,\n              y: event.clientY,\n            });\n\n            event.preventDefault();\n          }}\n        >\n          <ResizeHandleIcon />\n        </div>\n        <div\n          style={{\n            position: \"absolute\",\n            right: 0,\n            top: \"50%\",\n            width: \"10px\",\n            height: \"26px\",\n            transform: \"translateY(-13px) translateX(5px)\",\n            cursor: \"col-resize\",\n            transition: \"opacity ease-in-out 0.2s\",\n            pointerEvents: hover || resizing ? \"auto\" : \"none\",\n            opacity: hover || resizing ? 1 : 0,\n          }}\n          onMouseDown={(event) => {\n            setResizing(\"rx\");\n            setResizePosition({\n              x: event.clientX,\n              y: event.clientY,\n            });\n\n            event.preventDefault();\n          }}\n        >\n          <ResizeHandleIcon />\n        </div>\n        <div\n          style={{\n            position: \"absolute\",\n            left: \"50%\",\n            top: 0,\n            width: \"26px\",\n            height: \"10px\",\n            transform: \"translateY(-5px) translateX(-13px)\",\n            cursor: \"row-resize\",\n            transition: \"opacity ease-in-out 0.2s\",\n            pointerEvents: hover || resizing ? \"auto\" : \"none\",\n            opacity: hover || resizing ? 1 : 0,\n          }}\n          onMouseDown={(event) => {\n            setResizing(\"ty\");\n            setResizePosition({\n              x: event.clientX,\n              y: event.clientY,\n            });\n\n            event.preventDefault();\n          }}\n        >\n          <ResizeHandleIcon\n            style={{\n              transform: \"rotate(90deg)\",\n              transformOrigin: \"13px 13px\",\n            }}\n          />\n        </div>\n        <div\n          style={{\n            position: \"absolute\",\n            left: \"50%\",\n            bottom: 0,\n            width: \"26px\",\n            height: \"10px\",\n            transform: \"translateY(5px) translateX(-13px)\",\n            cursor: \"row-resize\",\n            transition: \"opacity ease-in-out 0.2s\",\n            pointerEvents: hover || resizing ? \"auto\" : \"none\",\n            opacity: hover || resizing ? 1 : 0,\n          }}\n          onMouseDown={(event) => {\n            setResizing(\"by\");\n            setResizePosition({\n              x: event.clientX,\n              y: event.clientY,\n            });\n\n            event.preventDefault();\n          }}\n        >\n          <ResizeHandleIcon\n            style={{\n              transform: \"rotate(90deg)\",\n              transformOrigin: \"13px 13px\",\n            }}\n          />\n        </div>\n      </React.Fragment>\n    </div>\n  );\n};\n","import { Placement } from \"src/interfaces/placement\";\n\nexport const getPanelToggleTransforms = (visible: boolean) => {\n  return visible ? \"scaleX(1) translateY(0)\" : \"scaleX(0) translateY(25vw)\";\n};\n\nexport const SIZE = 50;\nexport const BUFFER = 10;\n\nconst PREFERRED_DEFAULT_WIDTH = () =>\n  typeof window !== \"undefined\" ? window.innerWidth * 0.7 : 1440 * 0.7; // 70% of window width\nconst PREFERRED_DEFAULT_HEIGHT = () =>\n  typeof window !== \"undefined\" ? window.innerHeight * 0.7 : 900 * 0.7; // 70% of window height\n\nexport const MIN_PANEL_WIDTH = 640;\nexport const MIN_PANEL_HEIGHT = 360;\n\nexport const getPinButtonTransform = (hover?: boolean) => {\n  return `translateY(${hover ? \"0\" : \"50%\"})`;\n};\n\nexport const getPanelPosition = (placement: Placement) => {\n  switch (placement) {\n    case \"left\":\n      return {\n        left: `calc(${SIZE}px + ${BUFFER}px)`,\n        top: \"50%\",\n        transform: \"translateY(-50%)\",\n      };\n    case \"right\":\n      return {\n        right: `calc(${SIZE}px + ${BUFFER}px)`,\n        top: \"50%\",\n        transform: \"translateY(-50%)\",\n      };\n    case \"top\":\n      return {\n        left: \"50%\",\n        top: `calc(${SIZE}px + ${BUFFER}px)`,\n        transform: \"translateX(-50%)\",\n      };\n    case \"bottom\":\n      return {\n        left: \"50%\",\n        bottom: `calc(${SIZE}px + ${BUFFER}px)`,\n        transform: \"translateX(-50%)\",\n      };\n  }\n};\n\nexport const getMaxPanelWidth = (placement: Placement) => {\n  switch (placement) {\n    case \"left\":\n    case \"right\":\n      return (\n        -BUFFER -\n        SIZE -\n        BUFFER +\n        (typeof window !== \"undefined\" ? window.innerWidth : 1440) -\n        BUFFER\n      );\n    case \"top\":\n    case \"bottom\":\n      return (\n        -BUFFER +\n        (typeof window !== \"undefined\" ? window.innerWidth : 1440) -\n        BUFFER\n      );\n  }\n};\n\nexport const getMaxPanelHeight = (placement: Placement) => {\n  switch (placement) {\n    case \"left\":\n    case \"right\":\n      return (\n        -BUFFER +\n        (typeof window !== \"undefined\" ? window.innerHeight : 900) -\n        BUFFER\n      );\n    case \"top\":\n    case \"bottom\":\n      return (\n        -BUFFER -\n        SIZE -\n        BUFFER +\n        (typeof window !== \"undefined\" ? window.innerHeight : 900) -\n        BUFFER\n      );\n  }\n};\n\nexport const getDefaultPanelSize = (\n  placement: Placement,\n  preferredSize?: { width: number; height: number },\n): { width: number; height: number } => {\n  const defaultPreferred = {\n    width: PREFERRED_DEFAULT_WIDTH(),\n    height: PREFERRED_DEFAULT_HEIGHT(),\n  };\n\n  const maxPanelWidth = getMaxPanelWidth(placement);\n  const maxPanelHeight = getMaxPanelHeight(placement);\n\n  const width = Math.min(\n    maxPanelWidth,\n    (preferredSize ?? defaultPreferred).width,\n  );\n  const height = Math.min(\n    maxPanelHeight,\n    (preferredSize ?? defaultPreferred).height,\n  );\n\n  return {\n    width: width,\n    height: height,\n  };\n};\n\nexport const roundToEven = (num: number) => {\n  const rounded = Math.round(num);\n  return rounded % 2 === 0 ? rounded : rounded + 1;\n};\n","import React from \"react\";\n\nexport const ResizeHandleIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    width={10}\n    height={26}\n    viewBox=\"0 0 10 26\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <rect x={0.5} y={0.5} width={9} height={25} rx={4.5} fill=\"#1D1E30\" />\n    <path\n      d=\"M7 5C7 6.10457 6.10457 7 5 7C3.89543 7 3 6.10457 3 5C3 3.89543 3.89543 3 5 3C6.10457 3 7 3.89543 7 5Z\"\n      fill=\"#303450\"\n    />\n    <path\n      d=\"M7 13C7 14.1046 6.10457 15 5 15C3.89543 15 3 14.1046 3 13C3 11.8954 3.89543 11 5 11C6.10457 11 7 11.8954 7 13Z\"\n      fill=\"#303450\"\n    />\n    <path\n      d=\"M7 21C7 22.1046 6.10457 23 5 23C3.89543 23 3 22.1046 3 21C3 19.8954 3.89543 19 5 19C6.10457 19 7 19.8954 7 21Z\"\n      fill=\"#303450\"\n    />\n    <rect x={0.5} y={0.5} width={9} height={25} rx={4.5} stroke=\"#303450\" />\n  </svg>\n);\n","import React from \"react\";\nimport { DevToolsContextProvider } from \"@refinedev/devtools-shared\";\n\nexport const DevtoolsProvider =\n  __DEV_CONDITION__ !== \"development\"\n    ? ({ children }: React.PropsWithChildren) => children as any\n    : ({ children }: React.PropsWithChildren) => {\n        return <DevToolsContextProvider>{children}</DevToolsContextProvider>;\n      };\n"],"mappings":"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","names":["src_exports","__export","DevToolsContext","DevToolsContextProvider","DevtoolsEvent","hooksByScope","receive","scopes","send","module","__toCommonJS","acc","hook","scope","import_react","A","ws","event","payload","resolve","listener","callback","e","receivedEvent","r","React","__devtools","port","children","values","setValues","setWs","wsInstance","unsubscribe","data","v","contextValues","import_react","import_react","import_react","import_react_dom","import_dom_to_fiber_utils","import_devtools_shared","import_debounce","import_react","useSelector","active","devtoolsUrl","React","traceItems","setTraceItems","res","data","selectedFiber","setSelectedFiber","activeFiber","setActiveFiber","selectAppropriateFiber","start","fiber","firstParentOfNodeWithName","fiberWithStateNode","acceptedName","pickFiber","target","previousValues","rect","name","_a","element","fiberName","bounding","listener","e","parent","fibers","previousTarget","debounce","import_react","React","ArrowUnionIcon","props","Y_OFFSET","X_OFFSET","SelectorBox","width","height","x","y","name","namePosition","outlinePosition","React","ArrowUnionIcon","import_react","SelectorHint","active","React","DevtoolsSelector","onSelectorOpen","onHighlight","icon","style","hover","setHover","React","active","setActive","rect","name","useSelector","selectorBoxRoot","setSelectorBoxRoot","element","onMouseClick","e","event","_a","SelectorHint","SelectorBox","React","DevtoolsIcon","props","import_react","SelectorButtonIcon","props","React","DevtoolsPin","onClick","onSelectorHighlight","onSelectorOpen","hover","setHover","React","DevtoolsIcon","DevtoolsSelector","SelectorButtonIcon","import_react","getPanelToggleTransforms","visible","SIZE","BUFFER","PREFERRED_DEFAULT_WIDTH","PREFERRED_DEFAULT_HEIGHT","MIN_PANEL_WIDTH","MIN_PANEL_HEIGHT","getPanelPosition","placement","SIZE","BUFFER","getMaxPanelWidth","getMaxPanelHeight","getDefaultPanelSize","preferredSize","defaultPreferred","PREFERRED_DEFAULT_WIDTH","PREFERRED_DEFAULT_HEIGHT","maxPanelWidth","maxPanelHeight","width","height","roundToEven","num","rounded","import_react","ResizeHandleIcon","props","React","ResizablePane","placement","visible","children","hover","setHover","React","resizing","setResizing","resizePosition","setResizePosition","panelSize","setPanelSize","defaultSize","getDefaultPanelSize","roundToEven","handleResize","p","handleMouseUp","currentCursor","handleMouseMove","e","diff","newWidth","getMaxPanelWidth","MIN_PANEL_WIDTH","newHeight","getMaxPanelHeight","MIN_PANEL_HEIGHT","getPanelPosition","getPanelToggleTransforms","event","ResizeHandleIcon","import_devtools_shared","DevtoolsPanel","browser","setBrowser","React","visible","setVisible","placement","devtoolsUrl","ws","width","setWidth","onSelectorHighlight","name","onSelectorOpen","onResize","DevtoolsPin","v","ResizablePane","resizing","import_react","import_devtools_shared","DevtoolsProvider","children","React"]}