@hrnec06/react_utils 1.1.0

package/dist/index.js

@@ -0,0 +1,934 @@
+"use strict";
+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.tsx
+var index_exports = {};
+__export(index_exports, {
+  Debugger: () => Debug,
+  useKeyListener: () => useKeyListener,
+  useListener: () => useListener,
+  useSignal: () => useSignal,
+  useUpdateEffect: () => useUpdateEffect,
+  useUpdatedRef: () => useUpdatedRef,
+  useWindowSize: () => useWindowSize
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/hooks/useKeyListener.ts
+var import_react = require("react");
+function useKeyListener(key, options) {
+  const [pressing, setPressing] = (0, import_react.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;
+  };
+  (0, import_react.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
+var import_react2 = require("react");
+function useListener(element, event, listener, deps) {
+  (0, import_react2.useEffect)(() => {
+    element.addEventListener(event, listener);
+    return () => {
+      element.removeEventListener(event, listener);
+    };
+  }, deps);
+}
+
+// src/hooks/useUpdatedRef.ts
+var import_react4 = require("react");
+
+// src/hooks/useUpdateEffect.ts
+var import_react3 = require("react");
+function useUpdateEffect(callback, value) {
+  const isFirstRun = (0, import_react3.useRef)(true);
+  (0, import_react3.useEffect)(() => {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+      return;
+    }
+    return callback();
+  }, value);
+}
+
+// src/hooks/useUpdatedRef.ts
+function useUpdatedRef(value) {
+  const ref = (0, import_react4.useRef)(value);
+  useUpdateEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
+
+// src/hooks/useWindowSize.ts
+var import_react5 = require("react");
+function useWindowSize() {
+  const [dimensions, setDimensions] = (0, import_react5.useState)([1920, 1080]);
+  (0, import_react5.useEffect)(() => {
+    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
+var import_react6 = require("react");
+function useSignal(value) {
+  const [_value, _setValue] = (0, import_react6.useState)(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
+var import_util4 = require("@hrnec06/util");
+var import_react12 = require("react");
+
+// src/debugger/DebuggerContext.ts
+var import_react7 = require("react");
+var DebuggerContext = (0, import_react7.createContext)(void 0);
+function useDebugger() {
+  const ctx = (0, import_react7.useContext)(DebuggerContext);
+  if (!ctx)
+    throw new Error(`useDebugger may be used only within DebuggerContext.Provider!`);
+  return ctx;
+}
+
+// src/debugger/Debugger.tsx
+var import_clsx3 = __toESM(require("clsx"));
+
+// src/debugger/DebuggerWindowResize.tsx
+var import_util = require("@hrnec06/util");
+var import_react8 = require("react");
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function ResizeBorder() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ResizeBar,
+      {
+        className: "-top-1.5 h-3 w-full cursor-ns-resize",
+        applyReposition: true,
+        onMove: ([, y]) => [0, y]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ResizeBar,
+      {
+        className: "-right-1.5 h-full w-3 cursor-ew-resize",
+        onMove: ([x]) => [-x, 0]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ResizeBar,
+      {
+        className: "-bottom-1.5 h-3 w-full cursor-ns-resize",
+        onMove: ([, y]) => [0, -y]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ResizeBar,
+      {
+        className: "-left-1.5 h-full w-3 cursor-ew-resize",
+        applyReposition: true,
+        onMove: ([x]) => [x, 0]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ResizeBar,
+      {
+        className: "-top-1.5 -left-1.5 size-3 cursor-nwse-resize",
+        applyReposition: true,
+        onMove: ([x, y]) => [x, y]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ResizeBar,
+      {
+        className: "-top-1.5 -right-1.5 size-3 cursor-nesw-resize",
+        applyReposition: "y",
+        onMove: ([x, y]) => [-x, y]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ResizeBar,
+      {
+        className: "-bottom-1.5 -right-1.5 size-3 cursor-nwse-resize",
+        onMove: ([x, y]) => [-x, -y]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
+    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 = (0, import_util.cloneVector2)(newSize);
+        (0, import_util.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__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      onMouseDown: handleMouseDown,
+      className: (0, import_clsx.default)(
+        "absolute",
+        className
+      )
+    }
+  );
+}
+
+// src/debugger/DebugParser.tsx
+var import_react9 = require("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
+var import_util2 = require("@hrnec06/util");
+var import_react10 = __toESM(require("react"));
+
+// src/debugger/DebuggerSymbols.tsx
+var import_clsx2 = __toESM(require("clsx"));
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Char_Colon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[#ccccab]", children: ": " });
+}
+function Char_Comma() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[#ccccab]", children: ", " });
+}
+function Char_Bracket({
+  text
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[#da70d6]", children: text });
+}
+function Chevron_Toggle({
+  expanded,
+  onToggle
+}) {
+  const handleClick = () => {
+    onToggle?.(!expanded);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      onClick: handleClick,
+      className: (0, import_clsx2.default)(
+        "absolute",
+        "left-1 translate-y-0.5"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_lucide_react.ChevronDown,
+        {
+          className: (0, import_clsx2.default)(
+            "size-4 text-primary-400 hover:text-zinc-500",
+            !expanded && "-rotate-90"
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/debugger/DebugParser.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ParseValue({
+  value,
+  path = []
+}) {
+  const debug = useDebugger();
+  switch (typeof value) {
+    case "string":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_String, { value });
+    case "bigint":
+    case "number":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Number, { value });
+    case "boolean":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Boolean, { value });
+    case "undefined":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Keyword, { value: "undefined" });
+    case "function":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Function, { value });
+    case "symbol":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Symbol, { value });
+    case "object": {
+      if (value === null)
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime3.jsx)(Value_Array, { value, path, defaultExpanded: shouldBeExpanded });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Object, { value, path, defaultExpanded: shouldBeExpanded });
+    }
+  }
+}
+function Value_String({
+  value,
+  noEncase = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[#ce9178]", children: (0, import_util2.padString)(value, noEncase ? 0 : 1, '"') });
+}
+function Value_Number({
+  value
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[#a7ce9b]", children: value });
+}
+function Value_Boolean({
+  value
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[#f2824a]", children: "\u0192 " }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: `${value.name}(${args})` })
+  ] });
+}
+function Value_Keyword({
+  value
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[#439ccb]", children: value });
+}
+function Value_Object({
+  value,
+  path,
+  defaultExpanded = false
+}) {
+  const debug = useDebugger();
+  const [expanded, setExpanded] = (0, import_react9.useState)(defaultExpanded);
+  const objectEntries = (0, import_util2.entries)(value);
+  const collapsedPreview = (0, import_react9.useMemo)(() => {
+    const children = [];
+    const keyList = (0, import_util2.keys)(value);
+    for (let i = 0; i < Math.min(keyList.length, 6); i++) {
+      children.push(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react10.default.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Object_Key, { text: keyList[i] }),
+          i < keyList.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Char_Comma, {})
+        ] }, i)
+      );
+    }
+    if (keyList.length > 6)
+      children.push(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-zinc-500", children: "..." }, "rest"));
+    return children;
+  }, [value]);
+  (0, import_react9.useLayoutEffect)(() => {
+    debug.event.expand(path, expanded);
+  }, [expanded]);
+  const handleExpand = (state) => {
+    setExpanded(state);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chevron_Toggle, { expanded, onToggle: handleExpand }),
+    Object.getPrototypeOf(value) !== Object.prototype && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+      "(",
+      value.constructor.name,
+      ") "
+    ] }),
+    expanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Char_Bracket, { text: "{" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "pl-4 ml-1 border-l border-l-primary-400", children: objectEntries.map(([key, value2], ix) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Object_Key, { text: key }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Char_Colon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ParseValue, { value: value2, path: [...path, `${key}`] }),
+          ix < objectEntries.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Char_Comma, {})
+        ] }, ix);
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Char_Bracket, { text: "}" })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: "inline-block cursor-pointer",
+        onClick: () => setExpanded(true),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Char_Bracket, { text: "{" }),
+          " ",
+          collapsedPreview,
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Char_Bracket, { text: "}" })
+        ]
+      }
+    )
+  ] });
+}
+function Value_Array({
+  value,
+  path,
+  defaultExpanded = false
+}) {
+  const debug = useDebugger();
+  const [expanded, setExpanded] = (0, import_react9.useState)(defaultExpanded);
+  const children = (0, import_react9.useMemo)(() => {
+    const children2 = [];
+    let ix = 0;
+    while (ix < value.length) {
+      const nextTarget = Math.min(ix + debug.options.compactArrays, value.length);
+      children2.push(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: (() => {
+          const children3 = [];
+          for (; ix < nextTarget; ix++) {
+            children3.push(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react10.default.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ParseValue, { value: value[ix], path: [...path, `${ix}`] }),
+                ix < value.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Char_Comma, {})
+              ] }, ix)
+            );
+          }
+          return children3;
+        })() }, ix)
+      );
+      ix = nextTarget;
+    }
+    return children2;
+  }, [debug.options.compactArrays, value]);
+  const collapsedPreview = (0, import_react9.useMemo)(() => {
+    const children2 = [];
+    for (let i = 0; i < Math.min(value.length, 6); i++) {
+      children2.push(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react10.default.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ParseValue_ToSimple, { value: value[i] }),
+          i < value.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Char_Comma, {})
+        ] }, i)
+      );
+    }
+    if (value.length > 6)
+      children2.push(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-zinc-500", children: "..." }, "rest"));
+    return children2;
+  }, [value]);
+  (0, import_react9.useLayoutEffect)(() => {
+    debug.event.expand(path, expanded);
+  }, [expanded]);
+  const handleExpand = (state) => {
+    setExpanded(state);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chevron_Toggle, { expanded, onToggle: handleExpand }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: `(${value.length}) ` }),
+    expanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Char_Bracket, { text: "[" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "pl-4 ml-1 border-l border-l-primary-400", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Char_Bracket, { text: "]" })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: "inline-block cursor-pointer",
+        onClick: () => setExpanded(true),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Char_Bracket, { text: "[" }),
+          collapsedPreview,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Char_Bracket, { text: "]" })
+        ]
+      }
+    )
+  ] });
+}
+function Value_Object_Key({
+  text
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[#9CDCF0]", children: text });
+}
+function Value_Symbol({
+  value
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Keyword, { value: "Symbol" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Char_Bracket, { text: "(" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: value.description }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime3.jsx)(Value_Keyword, { value: typeof value });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Number, { value });
+    }
+    case "boolean":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Boolean, { value });
+    case "function":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Function, { value });
+    case "object": {
+      if (value === null)
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Keyword, { value: "null" });
+      const className = Object.getPrototypeOf(value) !== Object.prototype ? value.constructor.name : null;
+      if (className === null || className.length > MAX_LENGTH)
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Keyword, { value: "object" });
+      return className;
+    }
+    case "string": {
+      if (value.length > MAX_LENGTH)
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_String, { value: "string", noEncase: true });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_String, { value });
+    }
+    case "symbol": {
+      if (!value.description || value.description.length > MAX_LENGTH)
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Keyword, { value: "Symbol" });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Symbol, { value });
+    }
+    case "undefined":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Value_Keyword, { value: "undefined" });
+  }
+}
+
+// src/debugger/DebuggerScrollBar.tsx
+var import_util3 = require("@hrnec06/util");
+var import_react11 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ScrollBar({
+  containerHeight,
+  scrollHeight
+}) {
+  const debug = useDebugger();
+  const [wrapperHeight, setWrapperHeight] = (0, import_react11.useState)(0);
+  const barHeight = containerHeight / (scrollHeight + containerHeight) * wrapperHeight;
+  const barTop = (wrapperHeight - barHeight) * debug.scroll.progress;
+  const [grab, setGrab] = (0, import_react11.useState)(null);
+  const [grabOffset, setGrabOffset] = (0, import_react11.useState)(null);
+  const wrapperRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
+    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]);
+  (0, import_react11.useEffect)(() => {
+    if (grabOffset === null) return;
+    const fixedOffset = (0, import_util3.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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-1 border-l border-l-primary-600", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      onMouseDown: handleWraperMouseDown,
+      ref: wrapperRef,
+      className: "h-full flex-shrink-0",
+      children: debug.scroll.isScrollable && wrapperHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "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
+var import_jsx_runtime5 = require("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] = (0, import_react12.useState)([0, 0]);
+  const [grab, setGrab] = (0, import_react12.useState)(null);
+  const [grabOffset, setGrabOffset] = (0, import_react12.useState)(null);
+  const [windowSize, setWindowSize] = (0, import_react12.useState)([500, 500]);
+  const [scrollHeight, setScrollHeight] = (0, import_react12.useState)(0);
+  const [containerHeight, setContainerHeight] = (0, import_react12.useState)(0);
+  const [scrollProgress, setScrollProgress] = (0, import_react12.useState)(0);
+  const font = (0, import_react12.useMemo)(() => {
+    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 = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
+    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]);
+  (0, import_react12.useLayoutEffect)(() => {
+    updateScrollHeight();
+  }, [windowSize, value, size, containerRef]);
+  const isScrollable = (0, import_react12.useMemo)(() => scrollHeight > 0, [scrollHeight]);
+  (0, import_react12.useEffect)(() => {
+    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);
+    }
+  }, []);
+  (0, import_react12.useEffect)(() => {
+    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]);
+  (0, import_react12.useEffect)(() => {
+    if (!f9_pressed)
+      return;
+    setPosition([0, 0]);
+  }, [f9_pressed]);
+  const finalPosition = (0, import_react12.useMemo)(() => {
+    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((0, import_util4.minmax)(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) => (0, import_util4.minmax)(p + addProgress, 0, 1));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    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__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fixed pointer-events-none w-full h-full left-0 top-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          className: (0, import_clsx3.default)(
+            "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__ */ (0, import_jsx_runtime5.jsx)(ResizeBorder, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              "div",
+              {
+                onWheel: handleWheel,
+                className: "bg-[#1f1f1f] shadow-lg rounded-md border border-primary-400 w-full h-full overflow-hidden flex",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    "div",
+                    {
+                      ref: containerRef,
+                      onMouseDown: handleMouseDown,
+                      className: " cursor-grab w-full",
+                      style: {
+                        transform: `translateY(${-(scrollProgress * scrollHeight)}px)`
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-3 pl-5", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ParseValue, { value }) })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    ScrollBar,
+                    {
+                      containerHeight,
+                      scrollHeight
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Debugger,
+  useKeyListener,
+  useListener,
+  useSignal,
+  useUpdateEffect,
+  useUpdatedRef,
+  useWindowSize
+});