@hrnec06/react_utils 1.1.0

package/dist/index.mjs

@@ -0,0 +1,891 @@
+// src/hooks/useKeyListener.ts
+import { useEffect, useState } from "react";
+function useKeyListener(key, options) {
+  const [pressing, setPressing] = useState(false);
+  const keyMatching = (e, strict) => {
+    if (strict && options?.ctrl && !e.ctrlKey)
+      return false;
+    if (strict && options?.shift && !e.shiftKey)
+      return false;
+    if (strict && options?.alt && !e.altKey)
+      return false;
+    return e.code == key;
+  };
+  useEffect(() => {
+    const downListener = (e) => {
+      if (!keyMatching(e, true)) return;
+      setPressing(true);
+    };
+    const upListener = (e) => {
+      if (!keyMatching(e, false)) return;
+      setPressing(false);
+    };
+    window.addEventListener("keydown", downListener);
+    window.addEventListener("keyup", upListener);
+    return () => {
+      window.removeEventListener("keydown", downListener);
+      window.removeEventListener("keyup", upListener);
+    };
+  }, []);
+  return pressing;
+}
+
+// src/hooks/useListener.ts
+import { useEffect as useEffect2 } from "react";
+function useListener(element, event, listener, deps) {
+  useEffect2(() => {
+    element.addEventListener(event, listener);
+    return () => {
+      element.removeEventListener(event, listener);
+    };
+  }, deps);
+}
+
+// src/hooks/useUpdatedRef.ts
+import { useRef as useRef2 } from "react";
+
+// src/hooks/useUpdateEffect.ts
+import { useEffect as useEffect3, useRef } from "react";
+function useUpdateEffect(callback, value) {
+  const isFirstRun = useRef(true);
+  useEffect3(() => {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+      return;
+    }
+    return callback();
+  }, value);
+}
+
+// src/hooks/useUpdatedRef.ts
+function useUpdatedRef(value) {
+  const ref = useRef2(value);
+  useUpdateEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
+
+// src/hooks/useWindowSize.ts
+import { useEffect as useEffect4, useState as useState3 } from "react";
+function useWindowSize() {
+  const [dimensions, setDimensions] = useState3([1920, 1080]);
+  useEffect4(() => {
+    setDimensions([window.innerWidth, window.innerHeight]);
+    const listener = () => {
+      setDimensions([window.innerWidth, window.innerHeight]);
+    };
+    window.addEventListener("resize", listener);
+    return () => {
+      window.removeEventListener("resize", listener);
+    };
+  }, []);
+  return dimensions;
+}
+
+// src/hooks/useSignal.ts
+import { useState as useState4 } from "react";
+function useSignal(value) {
+  const [_value, _setValue] = useState4(value);
+  const signal = new Signal(_value, _setValue);
+  return signal;
+}
+var Signal = class {
+  constructor(_value, setState) {
+    this._value = _value;
+    this.setState = setState;
+  }
+  set value(value) {
+    this.setState(value);
+  }
+  get value() {
+    return this._value;
+  }
+};
+
+// src/debugger/Debugger.tsx
+import { minmax as minmax2 } from "@hrnec06/util";
+import { useEffect as useEffect7, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useRef as useRef4, useState as useState8 } from "react";
+
+// src/debugger/DebuggerContext.ts
+import { createContext, useContext } from "react";
+var DebuggerContext = createContext(void 0);
+function useDebugger() {
+  const ctx = useContext(DebuggerContext);
+  if (!ctx)
+    throw new Error(`useDebugger may be used only within DebuggerContext.Provider!`);
+  return ctx;
+}
+
+// src/debugger/Debugger.tsx
+import clsx3 from "clsx";
+
+// src/debugger/DebuggerWindowResize.tsx
+import { cloneVector2, removeVector2 } from "@hrnec06/util";
+import { useEffect as useEffect5, useState as useState5 } from "react";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ResizeBorder() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ResizeBar,
+      {
+        className: "-top-1.5 h-3 w-full cursor-ns-resize",
+        applyReposition: true,
+        onMove: ([, y]) => [0, y]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeBar,
+      {
+        className: "-right-1.5 h-full w-3 cursor-ew-resize",
+        onMove: ([x]) => [-x, 0]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeBar,
+      {
+        className: "-bottom-1.5 h-3 w-full cursor-ns-resize",
+        onMove: ([, y]) => [0, -y]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeBar,
+      {
+        className: "-left-1.5 h-full w-3 cursor-ew-resize",
+        applyReposition: true,
+        onMove: ([x]) => [x, 0]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeBar,
+      {
+        className: "-top-1.5 -left-1.5 size-3 cursor-nwse-resize",
+        applyReposition: true,
+        onMove: ([x, y]) => [x, y]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeBar,
+      {
+        className: "-top-1.5 -right-1.5 size-3 cursor-nesw-resize",
+        applyReposition: "y",
+        onMove: ([x, y]) => [-x, y]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeBar,
+      {
+        className: "-bottom-1.5 -right-1.5 size-3 cursor-nwse-resize",
+        onMove: ([x, y]) => [-x, -y]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ResizeBar,
+      {
+        className: "-bottom-1.5 -left-1.5 size-3 cursor-nesw-resize",
+        applyReposition: "x",
+        onMove: ([x, y]) => [x, -y]
+      }
+    )
+  ] });
+}
+function ResizeBar({
+  className,
+  applyReposition = false,
+  onMove
+}) {
+  const debug = useDebugger();
+  const [drag, setDrag] = useState5(null);
+  useEffect5(() => {
+    const mouseUp = () => {
+      if (!drag) return;
+      setDrag(null);
+    };
+    const mouseMove = (e) => {
+      if (!drag) return;
+      const offset = [
+        e.clientX - drag.dragOrigin[0],
+        e.clientY - drag.dragOrigin[1]
+      ];
+      const newSize = onMove(
+        offset,
+        drag.originalSize,
+        drag.originalPosition
+      );
+      newSize[0] = drag.originalSize[0] - newSize[0];
+      newSize[1] = drag.originalSize[1] - newSize[1];
+      if (applyReposition !== false) {
+        const repositionOffset = cloneVector2(newSize);
+        removeVector2(repositionOffset, drag.originalSize);
+        debug.placement.reposition([
+          drag.originalPosition[0] - (applyReposition === true || applyReposition === "x" ? repositionOffset[0] : 0),
+          drag.originalPosition[1] - (applyReposition === true || applyReposition === "y" ? repositionOffset[1] : 0)
+        ]);
+      }
+      debug.window.resize(newSize);
+    };
+    document.addEventListener("mouseup", mouseUp);
+    document.addEventListener("mousemove", mouseMove);
+    return () => {
+      document.removeEventListener("mouseup", mouseUp);
+      document.removeEventListener("mousemove", mouseMove);
+    };
+  }, [drag]);
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    setDrag({
+      dragOrigin: [e.clientX, e.clientY],
+      originalSize: debug.window.size,
+      originalPosition: debug.placement.position
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseDown: handleMouseDown,
+      className: clsx(
+        "absolute",
+        className
+      )
+    }
+  );
+}
+
+// src/debugger/DebugParser.tsx
+import { useLayoutEffect, useMemo, useState as useState6 } from "react";
+
+// src/debugger/DebuggerLogic.ts
+function matchPath(_path, openPaths) {
+  for (const openPath of openPaths) {
+    const matchers = openPath.split(".");
+    const path = [..._path];
+    let passed = true;
+    while (path.length && passed) {
+      const pathItem = path.shift();
+      const matcher = matchers.shift();
+      if (matcher === "**")
+        return true;
+      if (matcher === "*") {
+        if (path.length > 1)
+          passed = false;
+        continue;
+      }
+      if (pathItem !== matcher)
+        passed = false;
+    }
+    if (path.length === 0 && passed)
+      return true;
+  }
+  return false;
+}
+
+// src/debugger/DebugParser.tsx
+import { entries, keys, padString } from "@hrnec06/util";
+import React from "react";
+
+// src/debugger/DebuggerSymbols.tsx
+import clsx2 from "clsx";
+import { ChevronDown } from "lucide-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Char_Colon() {
+  return /* @__PURE__ */ jsx2("span", { className: "text-[#ccccab]", children: ": " });
+}
+function Char_Comma() {
+  return /* @__PURE__ */ jsx2("span", { className: "text-[#ccccab]", children: ", " });
+}
+function Char_Bracket({
+  text
+}) {
+  return /* @__PURE__ */ jsx2("span", { className: "text-[#da70d6]", children: text });
+}
+function Chevron_Toggle({
+  expanded,
+  onToggle
+}) {
+  const handleClick = () => {
+    onToggle?.(!expanded);
+  };
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      onClick: handleClick,
+      className: clsx2(
+        "absolute",
+        "left-1 translate-y-0.5"
+      ),
+      children: /* @__PURE__ */ jsx2(
+        ChevronDown,
+        {
+          className: clsx2(
+            "size-4 text-primary-400 hover:text-zinc-500",
+            !expanded && "-rotate-90"
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/debugger/DebugParser.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ParseValue({
+  value,
+  path = []
+}) {
+  const debug = useDebugger();
+  switch (typeof value) {
+    case "string":
+      return /* @__PURE__ */ jsx3(Value_String, { value });
+    case "bigint":
+    case "number":
+      return /* @__PURE__ */ jsx3(Value_Number, { value });
+    case "boolean":
+      return /* @__PURE__ */ jsx3(Value_Boolean, { value });
+    case "undefined":
+      return /* @__PURE__ */ jsx3(Value_Keyword, { value: "undefined" });
+    case "function":
+      return /* @__PURE__ */ jsx3(Value_Function, { value });
+    case "symbol":
+      return /* @__PURE__ */ jsx3(Value_Symbol, { value });
+    case "object": {
+      if (value === null)
+        return /* @__PURE__ */ jsx3(Value_Keyword, { value: "null" });
+      const isRootObject = path.length === 0;
+      const shouldBeExpanded = isRootObject && debug.options.openRoot || matchPath(path, debug.paths.open) && !matchPath(path, debug.paths.exclude);
+      if (Array.isArray(value)) {
+        return /* @__PURE__ */ jsx3(Value_Array, { value, path, defaultExpanded: shouldBeExpanded });
+      }
+      return /* @__PURE__ */ jsx3(Value_Object, { value, path, defaultExpanded: shouldBeExpanded });
+    }
+  }
+}
+function Value_String({
+  value,
+  noEncase = false
+}) {
+  return /* @__PURE__ */ jsx3("span", { className: "text-[#ce9178]", children: padString(value, noEncase ? 0 : 1, '"') });
+}
+function Value_Number({
+  value
+}) {
+  return /* @__PURE__ */ jsx3("span", { className: "text-[#a7ce9b]", children: value });
+}
+function Value_Boolean({
+  value
+}) {
+  return /* @__PURE__ */ jsx3(Value_Keyword, { value: value ? "true" : "false" });
+}
+function Value_Function({
+  value
+}) {
+  const argsMatch = value.toString().match(/^[^(]*\(\s*([^)]*)\)/);
+  let args = "";
+  if (argsMatch && argsMatch.length > 1) {
+    args = argsMatch[1];
+  }
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3("span", { className: "text-[#f2824a]", children: "\u0192 " }),
+    /* @__PURE__ */ jsx3("span", { children: `${value.name}(${args})` })
+  ] });
+}
+function Value_Keyword({
+  value
+}) {
+  return /* @__PURE__ */ jsx3("span", { className: "text-[#439ccb]", children: value });
+}
+function Value_Object({
+  value,
+  path,
+  defaultExpanded = false
+}) {
+  const debug = useDebugger();
+  const [expanded, setExpanded] = useState6(defaultExpanded);
+  const objectEntries = entries(value);
+  const collapsedPreview = useMemo(() => {
+    const children = [];
+    const keyList = keys(value);
+    for (let i = 0; i < Math.min(keyList.length, 6); i++) {
+      children.push(
+        /* @__PURE__ */ jsxs2(React.Fragment, { children: [
+          /* @__PURE__ */ jsx3(Value_Object_Key, { text: keyList[i] }),
+          i < keyList.length - 1 && /* @__PURE__ */ jsx3(Char_Comma, {})
+        ] }, i)
+      );
+    }
+    if (keyList.length > 6)
+      children.push(/* @__PURE__ */ jsx3("span", { className: "text-zinc-500", children: "..." }, "rest"));
+    return children;
+  }, [value]);
+  useLayoutEffect(() => {
+    debug.event.expand(path, expanded);
+  }, [expanded]);
+  const handleExpand = (state) => {
+    setExpanded(state);
+  };
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(Chevron_Toggle, { expanded, onToggle: handleExpand }),
+    Object.getPrototypeOf(value) !== Object.prototype && /* @__PURE__ */ jsxs2("span", { children: [
+      "(",
+      value.constructor.name,
+      ") "
+    ] }),
+    expanded ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(Char_Bracket, { text: "{" }),
+      /* @__PURE__ */ jsx3("ul", { className: "pl-4 ml-1 border-l border-l-primary-400", children: objectEntries.map(([key, value2], ix) => {
+        return /* @__PURE__ */ jsxs2("li", { children: [
+          /* @__PURE__ */ jsx3(Value_Object_Key, { text: key }),
+          /* @__PURE__ */ jsx3(Char_Colon, {}),
+          /* @__PURE__ */ jsx3(ParseValue, { value: value2, path: [...path, `${key}`] }),
+          ix < objectEntries.length - 1 && /* @__PURE__ */ jsx3(Char_Comma, {})
+        ] }, ix);
+      }) }),
+      /* @__PURE__ */ jsx3(Char_Bracket, { text: "}" })
+    ] }) : /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "inline-block cursor-pointer",
+        onClick: () => setExpanded(true),
+        children: [
+          /* @__PURE__ */ jsx3(Char_Bracket, { text: "{" }),
+          " ",
+          collapsedPreview,
+          " ",
+          /* @__PURE__ */ jsx3(Char_Bracket, { text: "}" })
+        ]
+      }
+    )
+  ] });
+}
+function Value_Array({
+  value,
+  path,
+  defaultExpanded = false
+}) {
+  const debug = useDebugger();
+  const [expanded, setExpanded] = useState6(defaultExpanded);
+  const children = useMemo(() => {
+    const children2 = [];
+    let ix = 0;
+    while (ix < value.length) {
+      const nextTarget = Math.min(ix + debug.options.compactArrays, value.length);
+      children2.push(
+        /* @__PURE__ */ jsx3("li", { children: (() => {
+          const children3 = [];
+          for (; ix < nextTarget; ix++) {
+            children3.push(
+              /* @__PURE__ */ jsxs2(React.Fragment, { children: [
+                /* @__PURE__ */ jsx3(ParseValue, { value: value[ix], path: [...path, `${ix}`] }),
+                ix < value.length - 1 && /* @__PURE__ */ jsx3(Char_Comma, {})
+              ] }, ix)
+            );
+          }
+          return children3;
+        })() }, ix)
+      );
+      ix = nextTarget;
+    }
+    return children2;
+  }, [debug.options.compactArrays, value]);
+  const collapsedPreview = useMemo(() => {
+    const children2 = [];
+    for (let i = 0; i < Math.min(value.length, 6); i++) {
+      children2.push(
+        /* @__PURE__ */ jsxs2(React.Fragment, { children: [
+          /* @__PURE__ */ jsx3(ParseValue_ToSimple, { value: value[i] }),
+          i < value.length - 1 && /* @__PURE__ */ jsx3(Char_Comma, {})
+        ] }, i)
+      );
+    }
+    if (value.length > 6)
+      children2.push(/* @__PURE__ */ jsx3("span", { className: "text-zinc-500", children: "..." }, "rest"));
+    return children2;
+  }, [value]);
+  useLayoutEffect(() => {
+    debug.event.expand(path, expanded);
+  }, [expanded]);
+  const handleExpand = (state) => {
+    setExpanded(state);
+  };
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(Chevron_Toggle, { expanded, onToggle: handleExpand }),
+    /* @__PURE__ */ jsx3("span", { children: `(${value.length}) ` }),
+    expanded ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(Char_Bracket, { text: "[" }),
+      /* @__PURE__ */ jsx3("ul", { className: "pl-4 ml-1 border-l border-l-primary-400", children }),
+      /* @__PURE__ */ jsx3(Char_Bracket, { text: "]" })
+    ] }) : /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "inline-block cursor-pointer",
+        onClick: () => setExpanded(true),
+        children: [
+          /* @__PURE__ */ jsx3(Char_Bracket, { text: "[" }),
+          collapsedPreview,
+          /* @__PURE__ */ jsx3(Char_Bracket, { text: "]" })
+        ]
+      }
+    )
+  ] });
+}
+function Value_Object_Key({
+  text
+}) {
+  return /* @__PURE__ */ jsx3("span", { className: "text-[#9CDCF0]", children: text });
+}
+function Value_Symbol({
+  value
+}) {
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(Value_Keyword, { value: "Symbol" }),
+    /* @__PURE__ */ jsx3(Char_Bracket, { text: "(" }),
+    /* @__PURE__ */ jsx3("span", { children: value.description }),
+    /* @__PURE__ */ jsx3(Char_Bracket, { text: ")" })
+  ] });
+}
+function ParseValue_ToSimple({
+  value
+}) {
+  const MAX_LENGTH = 16;
+  switch (typeof value) {
+    case "bigint":
+    case "number": {
+      const numStr = value.toString();
+      if (numStr.length > MAX_LENGTH)
+        return /* @__PURE__ */ jsx3(Value_Keyword, { value: typeof value });
+      return /* @__PURE__ */ jsx3(Value_Number, { value });
+    }
+    case "boolean":
+      return /* @__PURE__ */ jsx3(Value_Boolean, { value });
+    case "function":
+      return /* @__PURE__ */ jsx3(Value_Function, { value });
+    case "object": {
+      if (value === null)
+        return /* @__PURE__ */ jsx3(Value_Keyword, { value: "null" });
+      const className = Object.getPrototypeOf(value) !== Object.prototype ? value.constructor.name : null;
+      if (className === null || className.length > MAX_LENGTH)
+        return /* @__PURE__ */ jsx3(Value_Keyword, { value: "object" });
+      return className;
+    }
+    case "string": {
+      if (value.length > MAX_LENGTH)
+        return /* @__PURE__ */ jsx3(Value_String, { value: "string", noEncase: true });
+      return /* @__PURE__ */ jsx3(Value_String, { value });
+    }
+    case "symbol": {
+      if (!value.description || value.description.length > MAX_LENGTH)
+        return /* @__PURE__ */ jsx3(Value_Keyword, { value: "Symbol" });
+      return /* @__PURE__ */ jsx3(Value_Symbol, { value });
+    }
+    case "undefined":
+      return /* @__PURE__ */ jsx3(Value_Keyword, { value: "undefined" });
+  }
+}
+
+// src/debugger/DebuggerScrollBar.tsx
+import { minmax } from "@hrnec06/util";
+import { useEffect as useEffect6, useRef as useRef3, useState as useState7 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ScrollBar({
+  containerHeight,
+  scrollHeight
+}) {
+  const debug = useDebugger();
+  const [wrapperHeight, setWrapperHeight] = useState7(0);
+  const barHeight = containerHeight / (scrollHeight + containerHeight) * wrapperHeight;
+  const barTop = (wrapperHeight - barHeight) * debug.scroll.progress;
+  const [grab, setGrab] = useState7(null);
+  const [grabOffset, setGrabOffset] = useState7(null);
+  const wrapperRef = useRef3(null);
+  useEffect6(() => {
+    if (!wrapperRef.current) return;
+    const observer = new ResizeObserver(() => updateWrapperHeight());
+    observer.observe(wrapperRef.current);
+    updateWrapperHeight();
+    return () => {
+      observer.disconnect();
+    };
+  }, [wrapperRef]);
+  useListener(document, "mouseup", (event) => {
+    if (!grab) return;
+    setGrab(null);
+    setGrabOffset(null);
+  }, [grab]);
+  useListener(document, "mousemove", (event) => {
+    if (!grab) return;
+    setGrabOffset(event.clientY - (grab.windowOrigin - grab.positionOrigin * (wrapperHeight - barHeight)));
+  }, [grab]);
+  useEffect6(() => {
+    if (grabOffset === null) return;
+    const fixedOffset = minmax(grabOffset, 0, wrapperHeight - barHeight) / (wrapperHeight - barHeight);
+    debug.scroll.setProgress(fixedOffset);
+  }, [grabOffset]);
+  const updateWrapperHeight = () => {
+    if (!wrapperRef.current) return;
+    setWrapperHeight(wrapperRef.current.clientHeight);
+  };
+  const handleWraperMouseDown = (e) => {
+    e.preventDefault();
+    if (grab) return;
+  };
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    if (grab) return;
+    setGrab({
+      positionOrigin: debug.scroll.progress,
+      windowOrigin: e.clientY
+    });
+  };
+  return /* @__PURE__ */ jsx4("div", { className: "p-1 border-l border-l-primary-600", children: /* @__PURE__ */ jsx4(
+    "div",
+    {
+      onMouseDown: handleWraperMouseDown,
+      ref: wrapperRef,
+      className: "h-full flex-shrink-0",
+      children: debug.scroll.isScrollable && wrapperHeight > 0 && /* @__PURE__ */ jsx4(
+        "div",
+        {
+          onMouseDown: handleMouseDown,
+          className: "bg-primary-500 hover:bg-primary-400 w-2 rounded-lg",
+          style: {
+            transform: `translateY(${barTop}px)`,
+            height: `${barHeight}px`
+          }
+        }
+      )
+    }
+  ) });
+}
+
+// src/debugger/Debugger.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Debug({
+  value,
+  openPaths,
+  excludePaths,
+  size = "normal",
+  compactArrays = 1,
+  autoHeight = false,
+  openRoot = true
+}) {
+  const LS_POS_KEY = "debugger_position";
+  const LS_SIZE_KEY = "debugger_size";
+  const LS_EXPAND_KEY = "debugger_expanded";
+  const f9_pressed = useKeyListener("F9");
+  const [position, setPosition] = useState8([0, 0]);
+  const [grab, setGrab] = useState8(null);
+  const [grabOffset, setGrabOffset] = useState8(null);
+  const [windowSize, setWindowSize] = useState8([500, 500]);
+  const [scrollHeight, setScrollHeight] = useState8(0);
+  const [containerHeight, setContainerHeight] = useState8(0);
+  const [scrollProgress, setScrollProgress] = useState8(0);
+  const font = useMemo3(() => {
+    switch (size) {
+      case "tiny":
+        return { fontSize: 12, lineHeight: 16 };
+      case "normal":
+        return { fontSize: 14, lineHeight: 20 };
+      case "big":
+        return { fontSize: 16, lineHeight: 24 };
+    }
+  }, [size]);
+  const containerRef = useRef4(null);
+  useEffect7(() => {
+    const mouseUp = (e) => {
+      if (!grab) return;
+      setPosition(finalPositionRef.current);
+      setGrab(null);
+      setGrabOffset(null);
+    };
+    const mouseMove = (e) => {
+      if (!grab) return;
+      setGrabOffset([
+        e.clientX - grab.windowOrigin[0],
+        e.clientY - grab.windowOrigin[1]
+      ]);
+    };
+    document.addEventListener("mouseup", mouseUp);
+    document.addEventListener("mousemove", mouseMove);
+    return () => {
+      document.removeEventListener("mouseup", mouseUp);
+      document.removeEventListener("mousemove", mouseMove);
+    };
+  }, [grab]);
+  useLayoutEffect2(() => {
+    updateScrollHeight();
+  }, [windowSize, value, size, containerRef]);
+  const isScrollable = useMemo3(() => scrollHeight > 0, [scrollHeight]);
+  useEffect7(() => {
+    try {
+      const saved_position = localStorage.getItem(LS_POS_KEY);
+      if (saved_position) {
+        const [v1, v2] = saved_position.split(",");
+        if (v1 === void 0 || v2 === void 0)
+          throw new Error("Invalid vector: " + saved_position);
+        const [v1_p, v2_p] = [parseInt(v1), parseInt(v2)];
+        if (isNaN(v1_p) || isNaN(v2_p))
+          throw new Error("Invalid vector values: " + saved_position);
+        setPosition([v1_p, v2_p]);
+      }
+    } catch (error) {
+      console.error(`Error loading saved position: `, error);
+      localStorage.removeItem(LS_POS_KEY);
+    }
+  }, []);
+  useEffect7(() => {
+    try {
+      const saved_size = localStorage.getItem(LS_SIZE_KEY);
+      if (saved_size) {
+        const [v1, v2] = saved_size.split(",");
+        if (v1 === void 0 || v2 === void 0)
+          throw new Error("Invalid vector: " + saved_size);
+        const [v1_p, v2_p] = [parseInt(v1), parseInt(v2)];
+        if (isNaN(v1_p) || isNaN(v2_p))
+          throw new Error("Invalid vector values: " + saved_size);
+        setWindowSize([v1_p, v2_p]);
+      }
+    } catch (error) {
+      console.error(`Error loading saved size: `, error);
+      localStorage.removeItem(LS_POS_KEY);
+    }
+  }, []);
+  useUpdateEffect(() => {
+    localStorage.setItem(LS_POS_KEY, `${position[0]},${position[1]}`);
+  }, [position]);
+  useUpdateEffect(() => {
+    localStorage.setItem(LS_SIZE_KEY, `${windowSize[0]},${windowSize[1]}`);
+  }, [windowSize]);
+  useEffect7(() => {
+    if (!f9_pressed)
+      return;
+    setPosition([0, 0]);
+  }, [f9_pressed]);
+  const finalPosition = useMemo3(() => {
+    return [
+      position[0] + (grabOffset?.[0] ?? 0),
+      position[1] + (grabOffset?.[1] ?? 0)
+    ];
+  }, [position, grabOffset]);
+  const finalPositionRef = useUpdatedRef(finalPosition);
+  const calculateContainerHeight = () => {
+    if (!containerRef.current) return 0;
+    return containerRef.current.clientHeight;
+  };
+  const calculateScrollHeight = () => {
+    if (!containerRef.current) return 0;
+    return containerRef.current.scrollHeight - calculateContainerHeight();
+  };
+  const updateScrollHeight = () => {
+    if (!containerRef.current) return;
+    setScrollHeight(calculateScrollHeight());
+    setContainerHeight(calculateContainerHeight());
+  };
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    setGrab({
+      positionOrigin: position,
+      windowOrigin: [e.clientX, e.clientY]
+    });
+  };
+  const handleExpandChange = (path, state) => {
+    if (!containerRef.current) return;
+    setScrollProgress(minmax2(scrollProgress * scrollHeight / calculateScrollHeight(), 0, 1));
+    updateScrollHeight();
+  };
+  const handleWheel = (e) => {
+    const moveByPX = font.lineHeight * 3;
+    let addProgress = moveByPX / scrollHeight;
+    if (e.deltaY < 0)
+      addProgress *= -1;
+    setScrollProgress((p) => minmax2(p + addProgress, 0, 1));
+  };
+  return /* @__PURE__ */ jsx5(
+    DebuggerContext.Provider,
+    {
+      value: {
+        paths: {
+          exclude: excludePaths ?? [],
+          open: openPaths ?? []
+        },
+        options: {
+          compactArrays,
+          autoHeight,
+          openRoot
+        },
+        window: {
+          resize: setWindowSize,
+          size: windowSize
+        },
+        placement: {
+          reposition: setPosition,
+          position
+        },
+        event: {
+          expand: handleExpandChange
+        },
+        scroll: {
+          setProgress: setScrollProgress,
+          progress: scrollProgress,
+          isScrollable
+        }
+      },
+      children: /* @__PURE__ */ jsx5("div", { className: "fixed pointer-events-none w-full h-full left-0 top-0 overflow-hidden", children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: clsx3(
+            "absolute font-jetbrains pointer-events-auto",
+            size === "tiny" && "text-xs",
+            size === "normal" && "text-sm",
+            size === "big" && "text-base"
+          ),
+          style: {
+            left: finalPosition[0],
+            top: finalPosition[1],
+            width: windowSize[0],
+            height: windowSize[1]
+          },
+          children: [
+            /* @__PURE__ */ jsx5(ResizeBorder, {}),
+            /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                onWheel: handleWheel,
+                className: "bg-[#1f1f1f] shadow-lg rounded-md border border-primary-400 w-full h-full overflow-hidden flex",
+                children: [
+                  /* @__PURE__ */ jsx5(
+                    "div",
+                    {
+                      ref: containerRef,
+                      onMouseDown: handleMouseDown,
+                      className: " cursor-grab w-full",
+                      style: {
+                        transform: `translateY(${-(scrollProgress * scrollHeight)}px)`
+                      },
+                      children: /* @__PURE__ */ jsx5("div", { className: "p-3 pl-5", children: /* @__PURE__ */ jsx5(ParseValue, { value }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx5(
+                    ScrollBar,
+                    {
+                      containerHeight,
+                      scrollHeight
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+}
+export {
+  Debug as Debugger,
+  useKeyListener,
+  useListener,
+  useSignal,
+  useUpdateEffect,
+  useUpdatedRef,
+  useWindowSize
+};