@ariestools/sdk-react 10.0.2

package/dist/_pkg/json-viewer/browser/index.mjs

@@ -0,0 +1,1905 @@
+// src/JsonViewer.tsx
+import {
+  createTheme,
+  Paper,
+  ThemeProvider
+} from "@mui/material";
+import clsx from "clsx";
+import {
+  useCallback as useCallback5,
+  useContext as useContext3,
+  useEffect as useEffect4,
+  useMemo as useMemo5,
+  useRef as useRef3
+} from "react";
+
+// src/components/DataKeyPair.tsx
+import { Box as Box8 } from "@mui/material";
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect2,
+  useMemo as useMemo4,
+  useRef as useRef2,
+  useState as useState5
+} from "react";
+
+// src/stores/JsonViewerStore.ts
+import { createContext, useContext } from "react";
+import { create, useStore } from "zustand";
+
+// src/theme/base16.ts
+var lightColorspace = {
+  scheme: "Light Theme",
+  author: "mac gainor (https://github.com/mac-s-g)",
+  base00: "rgba(0, 0, 0, 0)",
+  base01: "rgb(245, 245, 245)",
+  base02: "rgb(235, 235, 235)",
+  base03: "#93a1a1",
+  base04: "rgba(0, 0, 0, 0.3)",
+  base05: "#586e75",
+  base06: "#073642",
+  base07: "#002b36",
+  base08: "#d33682",
+  base09: "#cb4b16",
+  base0A: "#ffd500",
+  base0B: "#859900",
+  base0C: "#6c71c4",
+  base0D: "#586e75",
+  base0E: "#2aa198",
+  base0F: "#268bd2"
+};
+var darkColorspace = {
+  scheme: "Dark Theme",
+  author: "Chris Kempson (http://chriskempson.com)",
+  base00: "#181818",
+  base01: "#282828",
+  base02: "#383838",
+  base03: "#585858",
+  base04: "#b8b8b8",
+  base05: "#d8d8d8",
+  base06: "#e8e8e8",
+  base07: "#f8f8f8",
+  base08: "#ab4642",
+  base09: "#dc9656",
+  base0A: "#f7ca88",
+  base0B: "#a1b56c",
+  base0C: "#86c1b9",
+  base0D: "#7cafc2",
+  base0E: "#ba8baf",
+  base0F: "#a16946"
+};
+
+// src/stores/JsonViewerStore.ts
+var DefaultKeyRenderer = () => null;
+DefaultKeyRenderer.when = () => false;
+var createJsonViewerStore = (props) => {
+  return create()((set, get) => ({
+    // provided by user
+    rootName: props.rootName ?? "root",
+    indentWidth: props.indentWidth ?? 3,
+    keyRenderer: props.keyRenderer ?? DefaultKeyRenderer,
+    enableAdd: props.enableAdd ?? false,
+    enableDelete: props.enableDelete ?? false,
+    enableClipboard: props.enableClipboard ?? true,
+    editable: props.editable ?? false,
+    onChange: props.onChange ?? (() => {
+    }),
+    onCopy: props.onCopy ?? void 0,
+    onSelect: props.onSelect ?? void 0,
+    onAdd: props.onAdd ?? void 0,
+    onDelete: props.onDelete ?? void 0,
+    defaultInspectDepth: props.defaultInspectDepth ?? 5,
+    defaultInspectControl: props.defaultInspectControl ?? void 0,
+    maxDisplayLength: props.maxDisplayLength ?? 30,
+    groupArraysAfterLength: props.groupArraysAfterLength ?? 100,
+    collapseStringsAfterLength: props.collapseStringsAfterLength === false ? Number.MAX_VALUE : props.collapseStringsAfterLength ?? 50,
+    objectSortKeys: props.objectSortKeys ?? false,
+    quotesOnKeys: props.quotesOnKeys ?? true,
+    displayDataTypes: props.displayDataTypes ?? true,
+    displaySize: props.displaySize ?? true,
+    displayComma: props.displayComma ?? false,
+    highlightUpdates: props.highlightUpdates ?? false,
+    // internal state
+    inspectCache: {},
+    hoverPath: null,
+    colorspace: lightColorspace,
+    value: props.value,
+    prevValue: void 0,
+    getInspectCache: (path, nestedIndex) => {
+      const target = nestedIndex === void 0 ? path.join(".") : path.join(".") + `[${nestedIndex}]nt`;
+      return get().inspectCache[target];
+    },
+    setInspectCache: (path, action, nestedIndex) => {
+      const target = nestedIndex === void 0 ? path.join(".") : path.join(".") + `[${nestedIndex}]nt`;
+      set((state) => ({
+        inspectCache: {
+          ...state.inspectCache,
+          [target]: typeof action === "function" ? action(
+            state.inspectCache[target]
+          ) : action
+        }
+      }));
+    },
+    setHover: (path, nestedIndex) => {
+      set({
+        hoverPath: path ? { path, nestedIndex } : null
+      });
+    }
+  }));
+};
+var JsonViewerStoreContext = createContext(void 0);
+var JsonViewerProvider = JsonViewerStoreContext.Provider;
+var useJsonViewerStore = (selector) => {
+  const store = useContext(JsonViewerStoreContext);
+  return useStore(store, selector);
+};
+
+// src/hooks/useColor.ts
+var useTextColor = () => {
+  return useJsonViewerStore((store) => store.colorspace.base07);
+};
+
+// src/hooks/useCopyToClipboard.ts
+import {
+  useCallback,
+  useRef,
+  useState
+} from "react";
+
+// src/utils/index.ts
+var objectCtorString = Object.prototype.constructor.toString();
+function isPlainObject(value) {
+  if (!value || typeof value !== "object") return false;
+  const proto = Object.getPrototypeOf(value);
+  if (proto === null) return true;
+  const Ctor = Object.hasOwnProperty.call(proto, "constructor") && proto.constructor;
+  if (Ctor === Object) return true;
+  return typeof Ctor === "function" && Function.toString.call(Ctor) === objectCtorString;
+}
+function shouldShallowCopy(value) {
+  if (!value) return false;
+  return isPlainObject(value) || Array.isArray(value) || value instanceof Map || value instanceof Set;
+}
+function shallowCopy(value) {
+  if (Array.isArray(value)) return Array.prototype.slice.call(value);
+  if (value instanceof Set) return new Set(value);
+  if (value instanceof Map) return new Map(value);
+  if (typeof value === "object" && value !== null) {
+    return Object.assign({}, value);
+  }
+  return value;
+}
+function _applyValue(input, path, value, visitedMapping = /* @__PURE__ */ new Map()) {
+  if (typeof input !== "object" || input === null) {
+    if (path.length > 0) {
+      throw new Error("path is incorrect");
+    }
+    return value;
+  }
+  const shouldCopy = shouldShallowCopy(input);
+  if (shouldCopy) {
+    let copiedInput = visitedMapping.get(input);
+    if (!copiedInput) {
+      copiedInput = shallowCopy(input);
+      visitedMapping.set(input, copiedInput);
+    }
+    input = copiedInput;
+  }
+  const [key, ...restPath] = path;
+  if (key !== void 0) {
+    if (key === "__proto__") {
+      throw new TypeError("Modification of prototype is not allowed");
+    }
+    input[key] = restPath.length > 0 ? _applyValue(input[key], restPath, value, visitedMapping) : value;
+  }
+  return input;
+}
+function applyValue(input, path, value) {
+  return _applyValue(input, path, value);
+}
+function deleteValue(input, path, value) {
+  if (typeof input !== "object" || input === null) {
+    if (path.length > 0) {
+      throw new Error("path is incorrect");
+    }
+    return value;
+  }
+  const shouldCopy = shouldShallowCopy(input);
+  if (shouldCopy) input = shallowCopy(input);
+  const [key, ...restPath] = path;
+  if (key !== void 0) {
+    if (key === "__proto__") {
+      throw new TypeError("Modification of prototype is not allowed");
+    }
+    if (restPath.length > 0) {
+      input[key] = deleteValue(input[key], restPath, value);
+    } else {
+      if (Array.isArray(input)) {
+        input.splice(Number(key), 1);
+      } else {
+        delete input[key];
+      }
+    }
+  }
+  return input;
+}
+function defineDataType({
+  is,
+  serialize,
+  deserialize,
+  Component,
+  Editor,
+  PreComponent,
+  PostComponent
+}) {
+  return {
+    is,
+    serialize,
+    deserialize,
+    Component,
+    Editor,
+    PreComponent,
+    PostComponent
+  };
+}
+var isCycleReference = (root, path, value) => {
+  if (root === null || value === null) {
+    return false;
+  }
+  if (typeof root !== "object") {
+    return false;
+  }
+  if (typeof value !== "object") {
+    return false;
+  }
+  if (Object.is(root, value) && path.length > 0) {
+    return "";
+  }
+  const currentPath = [];
+  const arr = [...path];
+  let currentRoot = root;
+  while (currentRoot !== value || arr.length > 0) {
+    if (typeof currentRoot !== "object" || currentRoot === null) {
+      return false;
+    }
+    if (Object.is(currentRoot, value)) {
+      return currentPath.reduce((path2, value2, currentIndex) => {
+        if (typeof value2 === "number") {
+          return path2 + `[${value2}]`;
+        }
+        return path2 + `${currentIndex === 0 ? "" : "."}${value2}`;
+      }, "");
+    }
+    const target = arr.shift();
+    currentPath.push(target);
+    currentRoot = currentRoot[target];
+  }
+  return false;
+};
+function getValueSize(value) {
+  if (value === null || void 0) {
+    return 0;
+  } else if (Array.isArray(value)) {
+    return value.length;
+  } else if (value instanceof Map || value instanceof Set) {
+    return value.size;
+  } else if (value instanceof Date) {
+    return 1;
+  } else if (typeof value === "object") {
+    return Object.keys(value).length;
+  } else if (typeof value === "string") {
+    return value.length;
+  }
+  return 1;
+}
+function segmentArray(arr, size) {
+  const result = [];
+  let index = 0;
+  while (index < arr.length) {
+    result.push(arr.slice(index, index + size));
+    index += size;
+  }
+  return result;
+}
+function safeStringify(obj, space) {
+  const seenValues = [];
+  function replacer(key, value) {
+    if (typeof value === "bigint") return value.toString();
+    if (value instanceof Map) {
+      if ("toJSON" in value && typeof value.toJSON === "function") return value.toJSON();
+      if (value.size === 0) return {};
+      if (seenValues.includes(value)) return "[Circular]";
+      seenValues.push(value);
+      const entries = [...value.entries()];
+      if (entries.every(([key2]) => typeof key2 === "string" || typeof key2 === "number")) {
+        return Object.fromEntries(entries);
+      }
+      return {};
+    }
+    if (value instanceof Set) {
+      if ("toJSON" in value && typeof value.toJSON === "function") return value.toJSON();
+      if (seenValues.includes(value)) return "[Circular]";
+      seenValues.push(value);
+      return [...value.values()];
+    }
+    if (typeof value === "object" && value !== null && Object.keys(value).length > 0) {
+      const stackSize = seenValues.length;
+      if (stackSize) {
+        for (let n = stackSize - 1; n >= 0 && seenValues[n][key] !== value; --n) {
+          seenValues.pop();
+        }
+        if (seenValues.includes(value)) return "[Circular]";
+      }
+      seenValues.push(value);
+    }
+    return value;
+  }
+  return JSON.stringify(obj, replacer, space);
+}
+function fallbackCopyString(value) {
+  if (typeof document === "undefined") {
+    throw new TypeError("Clipboard API is not available");
+  }
+  const textArea = document.createElement("textarea");
+  textArea.value = value;
+  textArea.setAttribute("readonly", "");
+  textArea.style.position = "fixed";
+  textArea.style.top = "-9999px";
+  textArea.style.left = "-9999px";
+  document.body.append(textArea);
+  textArea.select();
+  try {
+    if (!document.execCommand("copy")) {
+      throw new Error("Unable to copy text to clipboard");
+    }
+  } finally {
+    textArea.remove();
+  }
+}
+async function copyString(value) {
+  if (typeof navigator !== "undefined" && "clipboard" in navigator) {
+    try {
+      await navigator.clipboard.writeText(value);
+      return;
+    } catch {
+    }
+  }
+  fallbackCopyString(value);
+}
+function pathValueDefaultGetter(value, key) {
+  if (value === null || value === void 0) {
+    return null;
+  }
+  if (value instanceof Map || value instanceof WeakMap) {
+    return value.get(key);
+  }
+  if (value instanceof Set) {
+    return [...value][key];
+  }
+  if (value instanceof WeakSet) {
+    throw new TypeError("WeakSet is not supported");
+  }
+  if (Array.isArray(value)) {
+    return value[Number(key)];
+  }
+  if (typeof value === "object") {
+    return value[key];
+  }
+  return null;
+}
+function getPathValue(obj, path, customGetters = []) {
+  try {
+    return path.reduce((acc, key, index) => {
+      if (acc === null || acc === void 0) {
+        console.error("Invalid path or value encountered at path", path.slice(0, index));
+        throw new Error("Invalid path or value encountered");
+      }
+      for (const handler of customGetters) {
+        const currentPath = path.slice(0, index + 1);
+        if (handler.is(acc, currentPath)) {
+          return handler.handler(acc, key);
+        }
+      }
+      return pathValueDefaultGetter(acc, key);
+    }, obj);
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
+// src/hooks/useCopyToClipboard.ts
+function useClipboard({ timeout = 2e3 } = {}) {
+  const [copied, setCopied] = useState(false);
+  const copyTimeout = useRef(null);
+  const handleCopyResult = useCallback((value) => {
+    const current = copyTimeout.current;
+    if (current) {
+      globalThis.clearTimeout(current);
+    }
+    copyTimeout.current = globalThis.setTimeout(() => setCopied(false), timeout);
+    setCopied(value);
+  }, [timeout]);
+  const onCopy = useJsonViewerStore((store) => store.onCopy);
+  const copy = useCallback(async (path, value) => {
+    if (typeof onCopy === "function") {
+      try {
+        await onCopy(path, value, copyString);
+        handleCopyResult(true);
+      } catch (error) {
+        console.error(`error when copy ${path.length === 0 ? "src" : `src[${path.join(
+          "."
+        )}`}]`, error);
+      }
+    } else {
+      try {
+        const valueToCopy = safeStringify(
+          typeof value === "function" ? value.toString() : value,
+          "  "
+        );
+        await copyString(valueToCopy);
+        handleCopyResult(true);
+      } catch (error) {
+        console.error(`error when copy ${path.length === 0 ? "src" : `src[${path.join(
+          "."
+        )}`}]`, error);
+      }
+    }
+  }, [handleCopyResult, onCopy]);
+  const reset = useCallback(() => {
+    setCopied(false);
+    if (copyTimeout.current) {
+      clearTimeout(copyTimeout.current);
+    }
+  }, []);
+  return {
+    copy,
+    reset,
+    copied
+  };
+}
+
+// src/hooks/useInspect.ts
+import {
+  useCallback as useCallback2,
+  useEffect,
+  useState as useState2
+} from "react";
+
+// src/hooks/useIsCycleReference.ts
+import { useMemo } from "react";
+function useIsCycleReference(path, value) {
+  const rootValue = useJsonViewerStore((store) => store.value);
+  return useMemo(
+    () => isCycleReference(rootValue, path, value),
+    [path, value, rootValue]
+  );
+}
+
+// src/hooks/useInspect.ts
+function useInspect(path, value, nestedIndex) {
+  const depth = path.length;
+  const isTrap = useIsCycleReference(path, value);
+  const getInspectCache = useJsonViewerStore((store) => store.getInspectCache);
+  const setInspectCache = useJsonViewerStore((store) => store.setInspectCache);
+  const defaultInspectDepth = useJsonViewerStore((store) => store.defaultInspectDepth);
+  const defaultInspectControl = useJsonViewerStore((store) => store.defaultInspectControl);
+  useEffect(() => {
+    const inspect2 = getInspectCache(path, nestedIndex);
+    if (inspect2 !== void 0) {
+      return;
+    }
+    if (nestedIndex !== void 0) {
+      setInspectCache(path, false, nestedIndex);
+      return;
+    }
+    const shouldInspect = isTrap ? false : typeof defaultInspectControl === "function" ? defaultInspectControl(path, value) : depth < defaultInspectDepth;
+    setInspectCache(path, shouldInspect);
+  }, [defaultInspectDepth, defaultInspectControl, depth, getInspectCache, isTrap, nestedIndex, path, value, setInspectCache]);
+  const [inspect, set] = useState2(() => {
+    const shouldInspect = getInspectCache(path, nestedIndex);
+    if (shouldInspect !== void 0) {
+      return shouldInspect;
+    }
+    if (nestedIndex !== void 0) {
+      return false;
+    }
+    return isTrap ? false : typeof defaultInspectControl === "function" ? defaultInspectControl(path, value) : depth < defaultInspectDepth;
+  });
+  const setInspect = useCallback2((apply) => {
+    set((oldState) => {
+      const newState = typeof apply === "boolean" ? apply : apply(oldState);
+      setInspectCache(path, newState, nestedIndex);
+      return newState;
+    });
+  }, [nestedIndex, path, setInspectCache]);
+  return [inspect, setInspect];
+}
+
+// src/stores/typeRegistry.tsx
+import {
+  createContext as createContext2,
+  memo as memo2,
+  useContext as useContext2,
+  useMemo as useMemo3
+} from "react";
+import { createStore, useStore as useStore2 } from "zustand";
+
+// src/components/DataTypes/defineEasyType.tsx
+import { InputBase } from "@mui/material";
+import { memo, useCallback as useCallback3 } from "react";
+
+// src/components/mui/DataBox.tsx
+import { Box } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var DataBox = (props) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    component: "div",
+    ...props,
+    sx: {
+      display: "inline-block",
+      ...props.sx
+    }
+  }
+);
+
+// src/components/DataTypeLabel.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DataTypeLabel = ({ dataType, enable = true }) => {
+  if (!enable) return null;
+  return /* @__PURE__ */ jsx2(
+    DataBox,
+    {
+      className: "data-type-label",
+      sx: {
+        mx: 0.5,
+        fontSize: "0.7rem",
+        opacity: 0.8,
+        userSelect: "none"
+      },
+      children: dataType
+    }
+  );
+};
+
+// src/components/DataTypes/defineEasyType.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function defineEasyType({
+  is,
+  serialize,
+  deserialize,
+  type,
+  colorKey,
+  displayTypeLabel = true,
+  Renderer
+}) {
+  const Render = memo(Renderer);
+  const EasyType = (props) => {
+    const storeDisplayDataTypes = useJsonViewerStore((store) => store.displayDataTypes);
+    const color = useJsonViewerStore((store) => store.colorspace[colorKey]);
+    const onSelect = useJsonViewerStore((store) => store.onSelect);
+    return /* @__PURE__ */ jsxs(DataBox, { onClick: () => onSelect?.(props.path, props.value), sx: { color }, children: [
+      displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx3(DataTypeLabel, { dataType: type }),
+      /* @__PURE__ */ jsx3(DataBox, { className: `${type}-value`, children: /* @__PURE__ */ jsx3(
+        Render,
+        {
+          path: props.path,
+          inspect: props.inspect,
+          setInspect: props.setInspect,
+          value: props.value,
+          prevValue: props.prevValue
+        }
+      ) })
+    ] });
+  };
+  EasyType.displayName = `easy-${type}-type`;
+  if (!serialize || !deserialize) {
+    return {
+      is,
+      Component: EasyType
+    };
+  }
+  const EasyTypeEditor = ({
+    value,
+    setValue,
+    abortEditing,
+    commitEditing
+  }) => {
+    const color = useJsonViewerStore((store) => store.colorspace[colorKey]);
+    const handleKeyDown = useCallback3((event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        commitEditing(value);
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        abortEditing();
+      }
+    }, [abortEditing, commitEditing, value]);
+    const handleChange = useCallback3((event) => {
+      setValue(event.target.value);
+    }, [setValue]);
+    return /* @__PURE__ */ jsx3(
+      InputBase,
+      {
+        autoFocus: true,
+        value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        size: "small",
+        multiline: true,
+        sx: {
+          color,
+          padding: 0.5,
+          borderStyle: "solid",
+          borderColor: "black",
+          borderWidth: 1,
+          fontSize: "0.8rem",
+          fontFamily: "monospace",
+          display: "inline-flex"
+        }
+      }
+    );
+  };
+  EasyTypeEditor.displayName = `easy-${type}-type-editor`;
+  return {
+    is,
+    serialize,
+    deserialize,
+    Component: EasyType,
+    Editor: EasyTypeEditor
+  };
+}
+
+// src/components/DataTypes/Boolean.tsx
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+var booleanType = defineEasyType({
+  is: (value) => typeof value === "boolean",
+  type: "bool",
+  colorKey: "base0E",
+  serialize: (value) => value.toString(),
+  deserialize: (value) => {
+    if (value === "true") return true;
+    if (value === "false") return false;
+    throw new Error("Invalid boolean value");
+  },
+  Renderer: ({ value }) => /* @__PURE__ */ jsx4(Fragment, { children: value ? "true" : "false" })
+});
+
+// src/components/DataTypes/Date.tsx
+import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
+var displayOptions = {
+  weekday: "short",
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "2-digit",
+  minute: "2-digit"
+};
+var dateType = defineEasyType({
+  is: (value) => value instanceof Date,
+  type: "date",
+  colorKey: "base0D",
+  Renderer: ({ value }) => /* @__PURE__ */ jsx5(Fragment2, { children: value.toLocaleTimeString("en-us", displayOptions) })
+});
+
+// src/components/DataTypes/Function.tsx
+import { Box as Box2, NoSsr } from "@mui/material";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var functionBody = (func) => {
+  const funcString = func.toString();
+  let isUsualFunction = true;
+  const parenthesisPos = funcString.indexOf(")");
+  const arrowPos = funcString.indexOf("=>");
+  if (arrowPos !== -1 && arrowPos > parenthesisPos) {
+    isUsualFunction = false;
+  }
+  if (isUsualFunction) {
+    return funcString.substring(
+      funcString.indexOf("{", parenthesisPos) + 1,
+      funcString.lastIndexOf("}")
+    );
+  }
+  return funcString.slice(Math.max(0, funcString.indexOf("=>") + 2));
+};
+var functionName = (func) => {
+  const funcString = func.toString();
+  const isUsualFunction = funcString.includes("function");
+  if (isUsualFunction) {
+    return funcString.substring(8, funcString.indexOf("{")).trim();
+  }
+  return funcString.slice(0, Math.max(0, funcString.indexOf("=>") + 2)).trim();
+};
+var lb = "{";
+var rb = "}";
+var PreFunctionType = (props) => {
+  return /* @__PURE__ */ jsxs2(NoSsr, { children: [
+    /* @__PURE__ */ jsx6(DataTypeLabel, { dataType: "function" }),
+    /* @__PURE__ */ jsxs2(
+      Box2,
+      {
+        component: "span",
+        className: "data-function-start",
+        sx: { letterSpacing: 0.5 },
+        children: [
+          functionName(props.value),
+          " ",
+          lb
+        ]
+      }
+    )
+  ] });
+};
+var PostFunctionType = () => {
+  return /* @__PURE__ */ jsx6(NoSsr, { children: /* @__PURE__ */ jsx6(Box2, { component: "span", className: "data-function-end", children: rb }) });
+};
+var FunctionType = (props) => {
+  const functionColor = useJsonViewerStore((store) => store.colorspace.base05);
+  return /* @__PURE__ */ jsx6(NoSsr, { children: /* @__PURE__ */ jsx6(
+    Box2,
+    {
+      className: "data-function",
+      sx: {
+        display: props.inspect ? "block" : "inline-block",
+        pl: props.inspect ? 2 : 0,
+        color: functionColor
+      },
+      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ jsx6(
+        Box2,
+        {
+          component: "span",
+          className: "data-function-body",
+          onClick: () => props.setInspect(true),
+          sx: {
+            "&:hover": { cursor: "pointer" },
+            "padding": 0.5
+          },
+          children: "..."
+        }
+      )
+    }
+  ) });
+};
+var functionType = {
+  is: (value) => typeof value === "function",
+  Component: FunctionType,
+  PreComponent: PreFunctionType,
+  PostComponent: PostFunctionType
+};
+
+// src/components/DataTypes/Null.tsx
+import { Box as Box3 } from "@mui/material";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var nullType = defineEasyType({
+  is: (value) => value === null,
+  type: "null",
+  colorKey: "base08",
+  displayTypeLabel: false,
+  Renderer: () => {
+    const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
+    return /* @__PURE__ */ jsx7(
+      Box3,
+      {
+        sx: {
+          fontSize: "0.8rem",
+          backgroundColor,
+          fontWeight: "bold",
+          borderRadius: "3px",
+          padding: "0.5px 2px"
+        },
+        children: "NULL"
+      }
+    );
+  }
+});
+
+// src/components/DataTypes/Number.tsx
+import { Box as Box4 } from "@mui/material";
+import { Fragment as Fragment3, jsx as jsx8 } from "react/jsx-runtime";
+var isInt = (n) => n % 1 === 0;
+var nanType = defineEasyType({
+  is: (value) => typeof value === "number" && isNaN(value),
+  type: "NaN",
+  colorKey: "base08",
+  displayTypeLabel: false,
+  serialize: () => "NaN",
+  // allow deserialize the value back to number
+  deserialize: (value) => Number.parseFloat(value),
+  Renderer: () => {
+    const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
+    return /* @__PURE__ */ jsx8(
+      Box4,
+      {
+        sx: {
+          backgroundColor,
+          fontSize: "0.8rem",
+          fontWeight: "bold",
+          borderRadius: "3px",
+          padding: "0.5px 2px"
+        },
+        children: "NaN"
+      }
+    );
+  }
+});
+var floatType = defineEasyType({
+  is: (value) => typeof value === "number" && !isInt(value) && !isNaN(value),
+  type: "float",
+  colorKey: "base0B",
+  serialize: (value) => value.toString(),
+  deserialize: (value) => Number.parseFloat(value),
+  Renderer: ({ value }) => /* @__PURE__ */ jsx8(Fragment3, { children: value })
+});
+var intType = defineEasyType({
+  is: (value) => typeof value === "number" && isInt(value),
+  type: "int",
+  colorKey: "base0F",
+  serialize: (value) => value.toString(),
+  // allow deserialize the value to float
+  deserialize: (value) => Number.parseFloat(value),
+  Renderer: ({ value }) => /* @__PURE__ */ jsx8(Fragment3, { children: value })
+});
+var bigIntType = defineEasyType({
+  is: (value) => typeof value === "bigint",
+  type: "bigint",
+  colorKey: "base0F",
+  serialize: (value) => value.toString(),
+  deserialize: (value) => BigInt(value.replaceAll(/\D/g, "")),
+  Renderer: ({ value }) => /* @__PURE__ */ jsx8(Fragment3, { children: `${value}n` })
+});
+
+// src/components/DataTypes/Object.tsx
+import { Box as Box5 } from "@mui/material";
+import { useMemo as useMemo2, useState as useState3 } from "react";
+
+// src/components/Icons.tsx
+import { SvgIcon } from "@mui/material";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var BaseIcon = ({ d, ...props }) => {
+  return /* @__PURE__ */ jsx9(SvgIcon, { ...props, children: /* @__PURE__ */ jsx9("path", { d }) });
+};
+var AddBox = "M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z";
+var Check = "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z";
+var ChevronRight = "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z";
+var CircularArrows = "M 12 2 C 10.615 1.998 9.214625 2.2867656 7.890625 2.8847656 L 8.9003906 4.6328125 C 9.9043906 4.2098125 10.957 3.998 12 4 C 15.080783 4 17.738521 5.7633175 19.074219 8.3222656 L 17.125 9 L 21.25 11 L 22.875 7 L 20.998047 7.6523438 C 19.377701 4.3110398 15.95585 2 12 2 z M 6.5097656 4.4882812 L 2.2324219 5.0820312 L 3.734375 6.3808594 C 1.6515335 9.4550558 1.3615962 13.574578 3.3398438 17 C 4.0308437 18.201 4.9801562 19.268234 6.1601562 20.115234 L 7.1699219 18.367188 C 6.3019219 17.710187 5.5922656 16.904 5.0722656 16 C 3.5320014 13.332354 3.729203 10.148679 5.2773438 7.7128906 L 6.8398438 9.0625 L 6.5097656 4.4882812 z M 19.929688 13 C 19.794687 14.08 19.450734 15.098 18.927734 16 C 17.386985 18.668487 14.531361 20.090637 11.646484 19.966797 L 12.035156 17.9375 L 8.2402344 20.511719 L 10.892578 23.917969 L 11.265625 21.966797 C 14.968963 22.233766 18.681899 20.426323 20.660156 17 C 21.355156 15.801 21.805219 14.445 21.949219 13 L 19.929688 13 z";
+var Close = "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z";
+var ContentCopy = "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z";
+var Edit = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z";
+var ExpandMore = "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z";
+var Delete = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM8 9h8v10H8zm7.5-5l-1-1h-5l-1 1H5v2h14V4z";
+var AddBoxIcon = (props) => {
+  return /* @__PURE__ */ jsx9(BaseIcon, { d: AddBox, ...props });
+};
+var CheckIcon = (props) => {
+  return /* @__PURE__ */ jsx9(BaseIcon, { d: Check, ...props });
+};
+var ChevronRightIcon = (props) => {
+  return /* @__PURE__ */ jsx9(BaseIcon, { d: ChevronRight, ...props });
+};
+var CircularArrowsIcon = (props) => {
+  return /* @__PURE__ */ jsx9(BaseIcon, { d: CircularArrows, ...props });
+};
+var CloseIcon = (props) => {
+  return /* @__PURE__ */ jsx9(BaseIcon, { d: Close, ...props });
+};
+var ContentCopyIcon = (props) => {
+  return /* @__PURE__ */ jsx9(BaseIcon, { d: ContentCopy, ...props });
+};
+var EditIcon = (props) => {
+  return /* @__PURE__ */ jsx9(BaseIcon, { d: Edit, ...props });
+};
+var ExpandMoreIcon = (props) => {
+  return /* @__PURE__ */ jsx9(BaseIcon, { d: ExpandMore, ...props });
+};
+var DeleteIcon = (props) => {
+  return /* @__PURE__ */ jsx9(BaseIcon, { d: Delete, ...props });
+};
+
+// src/components/DataTypes/Object.tsx
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var objectLb = "{";
+var arrayLb = "[";
+var objectRb = "}";
+var arrayRb = "]";
+function inspectMetadata(value) {
+  const length = getValueSize(value);
+  let name = "";
+  if (value instanceof Map || value instanceof Set) {
+    name = value[Symbol.toStringTag];
+  }
+  if (Object.prototype.hasOwnProperty.call(value, Symbol.toStringTag)) {
+    name = value[Symbol.toStringTag];
+  }
+  const itemsPluralized = length === 1 ? "Item" : "Items";
+  return `${length} ${itemsPluralized}${name ? ` (${name})` : ""}`;
+}
+var PreObjectType = (props) => {
+  const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
+  const textColor = useTextColor();
+  const isArrayLike = useMemo2(() => Array.isArray(props.value) || props.value instanceof Set, [props.value]);
+  const isEmptyValue = useMemo2(() => getValueSize(props.value) === 0, [props.value]);
+  const sizeOfValue = useMemo2(() => inspectMetadata(props.value), [props.value]);
+  const displaySize = useJsonViewerStore((store) => store.displaySize);
+  const shouldDisplaySize = useMemo2(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [displaySize, props.path, props.value]);
+  const isTrap = useIsCycleReference(props.path, props.value);
+  return /* @__PURE__ */ jsxs3(
+    Box5,
+    {
+      component: "span",
+      className: "data-object-start",
+      sx: { letterSpacing: 0.5 },
+      children: [
+        isArrayLike ? arrayLb : objectLb,
+        shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx10(
+          Box5,
+          {
+            component: "span",
+            sx: {
+              pl: 0.5,
+              fontStyle: "italic",
+              color: metadataColor,
+              userSelect: "none"
+            },
+            children: sizeOfValue
+          }
+        ),
+        isTrap && !props.inspect && /* @__PURE__ */ jsxs3(Fragment4, { children: [
+          /* @__PURE__ */ jsx10(
+            CircularArrowsIcon,
+            {
+              sx: {
+                fontSize: 12,
+                color: textColor,
+                mx: 0.5
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            DataBox,
+            {
+              sx: {
+                cursor: "pointer",
+                userSelect: "none"
+              },
+              children: isTrap
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var PostObjectType = (props) => {
+  const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
+  const textColor = useTextColor();
+  const isArrayLike = useMemo2(() => Array.isArray(props.value) || props.value instanceof Set, [props.value]);
+  const isEmptyValue = useMemo2(() => getValueSize(props.value) === 0, [props.value]);
+  const sizeOfValue = useMemo2(() => inspectMetadata(props.value), [props.value]);
+  const displaySize = useJsonViewerStore((store) => store.displaySize);
+  const shouldDisplaySize = useMemo2(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [displaySize, props.path, props.value]);
+  return /* @__PURE__ */ jsxs3(
+    Box5,
+    {
+      component: "span",
+      className: "data-object-end",
+      sx: {
+        lineHeight: 1.5,
+        color: textColor,
+        letterSpacing: 0.5,
+        opacity: 0.8
+      },
+      children: [
+        isArrayLike ? arrayRb : objectRb,
+        shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ jsx10(
+          Box5,
+          {
+            component: "span",
+            sx: {
+              pl: 0.5,
+              fontStyle: "italic",
+              color: metadataColor,
+              userSelect: "none"
+            },
+            children: sizeOfValue
+          }
+        ) : null
+      ]
+    }
+  );
+};
+function getIterator(value) {
+  return typeof value?.[Symbol.iterator] === "function";
+}
+var ObjectType = (props) => {
+  const keyColor = useTextColor();
+  const borderColor = useJsonViewerStore((store) => store.colorspace.base02);
+  const groupArraysAfterLength = useJsonViewerStore((store) => store.groupArraysAfterLength);
+  const isTrap = useIsCycleReference(props.path, props.value);
+  const [displayLength, setDisplayLength] = useState3(useJsonViewerStore((store) => store.maxDisplayLength));
+  const objectSortKeys = useJsonViewerStore((store) => store.objectSortKeys);
+  const elements = useMemo2(() => {
+    if (!props.inspect) {
+      return null;
+    }
+    const value = props.value;
+    const iterator = getIterator(value);
+    if (iterator && !Array.isArray(value)) {
+      const elements3 = [];
+      if (value instanceof Map) {
+        const lastIndex2 = value.size - 1;
+        let index = 0;
+        value.forEach((value2, k) => {
+          const key = k.toString();
+          const path = [...props.path, key];
+          elements3.push(
+            /* @__PURE__ */ jsx10(
+              DataKeyPair,
+              {
+                path,
+                value: value2,
+                prevValue: props.prevValue instanceof Map ? props.prevValue.get(k) : void 0,
+                editable: false,
+                last: index === lastIndex2
+              },
+              key
+            )
+          );
+          index++;
+        });
+      } else {
+        const iterator2 = value[Symbol.iterator]();
+        let result = iterator2.next();
+        let count = 0;
+        while (true) {
+          const nextResult = iterator2.next();
+          elements3.push(
+            /* @__PURE__ */ jsx10(
+              DataKeyPair,
+              {
+                path: [...props.path, `iterator:${count}`],
+                value: result.value,
+                nestedIndex: count,
+                editable: false,
+                last: nextResult.done ?? false
+              },
+              count
+            )
+          );
+          if (nextResult.done) {
+            break;
+          }
+          count++;
+          result = nextResult;
+        }
+      }
+      return elements3;
+    }
+    if (Array.isArray(value)) {
+      const lastIndex2 = value.length - 1;
+      if (value.length <= groupArraysAfterLength) {
+        const elements4 = value.slice(0, displayLength).map((value2, _index) => {
+          const index = props.nestedIndex ? props.nestedIndex * groupArraysAfterLength + _index : _index;
+          const path = [...props.path, index];
+          return /* @__PURE__ */ jsx10(
+            DataKeyPair,
+            {
+              path,
+              value: value2,
+              prevValue: Array.isArray(props.prevValue) ? props.prevValue[index] : void 0,
+              last: _index === lastIndex2
+            },
+            index
+          );
+        });
+        if (value.length > displayLength) {
+          const rest = value.length - displayLength;
+          elements4.push(
+            /* @__PURE__ */ jsxs3(
+              DataBox,
+              {
+                sx: {
+                  cursor: "pointer",
+                  lineHeight: 1.5,
+                  color: keyColor,
+                  letterSpacing: 0.5,
+                  opacity: 0.8,
+                  userSelect: "none"
+                },
+                onClick: () => setDisplayLength((length) => length * 2),
+                children: [
+                  "hidden",
+                  " ",
+                  rest,
+                  " ",
+                  "items..."
+                ]
+              },
+              "last"
+            )
+          );
+        }
+        return elements4;
+      }
+      const elements3 = segmentArray(value, groupArraysAfterLength);
+      const prevElements = Array.isArray(props.prevValue) ? segmentArray(props.prevValue, groupArraysAfterLength) : void 0;
+      const elementsLastIndex = elements3.length - 1;
+      return elements3.map((list, index) => {
+        return /* @__PURE__ */ jsx10(
+          DataKeyPair,
+          {
+            path: props.path,
+            value: list,
+            nestedIndex: index,
+            prevValue: prevElements?.[index],
+            last: index === elementsLastIndex
+          },
+          index
+        );
+      });
+    }
+    let entries = Object.entries(value);
+    if (objectSortKeys) {
+      entries = objectSortKeys === true ? entries.sort(([a], [b]) => a.localeCompare(b)) : entries.sort(([a], [b]) => objectSortKeys(a, b));
+    }
+    const lastIndex = entries.length - 1;
+    const elements2 = entries.slice(0, displayLength).map(([key, value2], index) => {
+      const path = [...props.path, key];
+      return /* @__PURE__ */ jsx10(
+        DataKeyPair,
+        {
+          path,
+          value: value2,
+          prevValue: props.prevValue?.[key],
+          last: index === lastIndex
+        },
+        key
+      );
+    });
+    if (entries.length > displayLength) {
+      const rest = entries.length - displayLength;
+      elements2.push(
+        /* @__PURE__ */ jsxs3(
+          DataBox,
+          {
+            sx: {
+              cursor: "pointer",
+              lineHeight: 1.5,
+              color: keyColor,
+              letterSpacing: 0.5,
+              opacity: 0.8,
+              userSelect: "none"
+            },
+            onClick: () => setDisplayLength((length) => length * 2),
+            children: [
+              "hidden",
+              " ",
+              rest,
+              " ",
+              "items..."
+            ]
+          },
+          "last"
+        )
+      );
+    }
+    return elements2;
+  }, [
+    props.inspect,
+    props.value,
+    props.prevValue,
+    props.path,
+    props.nestedIndex,
+    groupArraysAfterLength,
+    displayLength,
+    keyColor,
+    objectSortKeys
+  ]);
+  const marginLeft = props.inspect ? 0.6 : 0;
+  const width = useJsonViewerStore((store) => store.indentWidth);
+  const indentWidth = props.inspect ? width - marginLeft : width;
+  const isEmptyValue = useMemo2(() => getValueSize(props.value) === 0, [props.value]);
+  if (isEmptyValue) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx10(
+    Box5,
+    {
+      className: "data-object",
+      sx: {
+        display: props.inspect ? "block" : "inline-block",
+        pl: props.inspect ? indentWidth - 0.6 : 0,
+        marginLeft,
+        color: keyColor,
+        borderLeft: props.inspect ? `1px solid ${borderColor}` : "none"
+      },
+      children: props.inspect ? elements : !isTrap && /* @__PURE__ */ jsx10(
+        Box5,
+        {
+          component: "span",
+          className: "data-object-body",
+          onClick: () => props.setInspect(true),
+          sx: {
+            "&:hover": { cursor: "pointer" },
+            "padding": 0.5,
+            "userSelect": "none"
+          },
+          children: "..."
+        }
+      )
+    }
+  );
+};
+var objectType = {
+  is: (value) => typeof value === "object",
+  Component: ObjectType,
+  PreComponent: PreObjectType,
+  PostComponent: PostObjectType
+};
+
+// src/components/DataTypes/String.tsx
+import { Box as Box6 } from "@mui/material";
+import { useState as useState4 } from "react";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+var stringType = defineEasyType({
+  is: (value) => typeof value === "string",
+  type: "string",
+  colorKey: "base09",
+  serialize: (value) => value,
+  deserialize: (value) => value,
+  Renderer: (props) => {
+    const [showRest, setShowRest] = useState4(false);
+    const collapseStringsAfterLength = useJsonViewerStore((store) => store.collapseStringsAfterLength);
+    const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength);
+    const hasRest = props.value.length > collapseStringsAfterLength;
+    return /* @__PURE__ */ jsxs4(
+      Box6,
+      {
+        component: "span",
+        sx: {
+          overflowWrap: "anywhere",
+          cursor: hasRest ? "pointer" : "inherit"
+        },
+        onClick: () => {
+          if (globalThis.getSelection()?.type === "Range") {
+            return;
+          }
+          if (hasRest) {
+            setShowRest((value2) => !value2);
+          }
+        },
+        children: [
+          '"',
+          value,
+          hasRest && !showRest && /* @__PURE__ */ jsx11(Box6, { component: "span", sx: { padding: 0.5 }, children: "..." }),
+          '"'
+        ]
+      }
+    );
+  }
+});
+
+// src/components/DataTypes/Undefined.tsx
+import { Box as Box7 } from "@mui/material";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var undefinedType = defineEasyType({
+  is: (value) => value === void 0,
+  type: "undefined",
+  colorKey: "base05",
+  displayTypeLabel: false,
+  Renderer: () => {
+    const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
+    return /* @__PURE__ */ jsx12(
+      Box7,
+      {
+        sx: {
+          fontSize: "0.7rem",
+          backgroundColor,
+          borderRadius: "3px",
+          padding: "0.5px 2px"
+        },
+        children: "undefined"
+      }
+    );
+  }
+});
+
+// src/stores/typeRegistry.tsx
+function memorizeDataType(dataType) {
+  function compare(prevProps, nextProps) {
+    return Object.is(prevProps.value, nextProps.value) && prevProps.inspect && nextProps.inspect && prevProps.path?.join(".") === nextProps.path?.join(".");
+  }
+  dataType.Component = memo2(dataType.Component, compare);
+  if (dataType.Editor) {
+    dataType.Editor = memo2(dataType.Editor, function compare2(prevProps, nextProps) {
+      return Object.is(prevProps.value, nextProps.value);
+    });
+  }
+  if (dataType.PreComponent) {
+    dataType.PreComponent = memo2(dataType.PreComponent, compare);
+  }
+  if (dataType.PostComponent) {
+    dataType.PostComponent = memo2(dataType.PostComponent, compare);
+  }
+  return dataType;
+}
+var predefinedTypes = [
+  memorizeDataType(booleanType),
+  memorizeDataType(dateType),
+  memorizeDataType(nullType),
+  memorizeDataType(undefinedType),
+  memorizeDataType(stringType),
+  memorizeDataType(functionType),
+  memorizeDataType(nanType),
+  memorizeDataType(intType),
+  memorizeDataType(floatType),
+  memorizeDataType(bigIntType)
+];
+var createTypeRegistryStore = () => {
+  return createStore()((set) => ({
+    registry: predefinedTypes,
+    registerTypes: (setState) => {
+      set((state) => ({
+        registry: typeof setState === "function" ? setState(state.registry) : setState
+      }));
+    }
+  }));
+};
+var TypeRegistryStoreContext = createContext2(void 0);
+var TypeRegistryProvider = TypeRegistryStoreContext.Provider;
+var useTypeRegistryStore = (selector) => {
+  const store = useContext2(TypeRegistryStoreContext);
+  return useStore2(store, selector);
+};
+function matchTypeComponents(value, path, registry) {
+  let potential;
+  for (const T of registry) {
+    if (T.is(value, path)) {
+      potential = T;
+    }
+  }
+  if (potential === void 0) {
+    if (typeof value === "object") {
+      return objectType;
+    }
+    throw new Error(`No type matched for value: ${value}`);
+  }
+  return potential;
+}
+function useTypeComponents(value, path) {
+  const registry = useTypeRegistryStore((store) => store.registry);
+  return useMemo3(() => matchTypeComponents(value, path, registry), [value, path, registry]);
+}
+
+// src/components/DataKeyPair.tsx
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var IconBox = (props) => /* @__PURE__ */ jsx13(
+  Box8,
+  {
+    component: "span",
+    ...props,
+    sx: {
+      cursor: "pointer",
+      paddingLeft: "0.7rem",
+      ...props.sx
+    }
+  }
+);
+var DataKeyPair = (props) => {
+  const {
+    value,
+    prevValue,
+    path,
+    nestedIndex,
+    last
+  } = props;
+  const {
+    Component,
+    PreComponent,
+    PostComponent,
+    Editor,
+    serialize,
+    deserialize
+  } = useTypeComponents(value, path);
+  const propsEditable = props.editable ?? void 0;
+  const storeEditable = useJsonViewerStore((store) => store.editable);
+  const editable = useMemo4(() => {
+    if (storeEditable === false) {
+      return false;
+    }
+    if (propsEditable === false) {
+      return false;
+    }
+    if (typeof storeEditable === "function") {
+      return !!storeEditable(path, value);
+    }
+    return storeEditable;
+  }, [path, propsEditable, storeEditable, value]);
+  const [tempValue, setTempValue] = useState5("");
+  const depth = path.length;
+  const key = path[depth - 1];
+  const hoverPath = useJsonViewerStore((store) => store.hoverPath);
+  const isHover = useMemo4(() => {
+    return hoverPath && path.every(
+      (value2, index) => value2 === hoverPath.path[index] && nestedIndex === hoverPath.nestedIndex
+    );
+  }, [hoverPath, path, nestedIndex]);
+  const setHover = useJsonViewerStore((store) => store.setHover);
+  const root = useJsonViewerStore((store) => store.value);
+  const [inspect, setInspect] = useInspect(path, value, nestedIndex);
+  const [editing, setEditing] = useState5(false);
+  const onChange = useJsonViewerStore((store) => store.onChange);
+  const keyColor = useTextColor();
+  const numberKeyColor = useJsonViewerStore((store) => store.colorspace.base0C);
+  const highlightColor = useJsonViewerStore((store) => store.colorspace.base0A);
+  const displayComma = useJsonViewerStore((store) => store.displayComma);
+  const quotesOnKeys = useJsonViewerStore((store) => store.quotesOnKeys);
+  const rootName = useJsonViewerStore((store) => store.rootName);
+  const isRoot = root === value;
+  const isNumberKey = Number.isInteger(Number(key));
+  const storeEnableAdd = useJsonViewerStore((store) => store.enableAdd);
+  const onAdd = useJsonViewerStore((store) => store.onAdd);
+  const enableAdd = useMemo4(() => {
+    if (!onAdd || nestedIndex !== void 0) return false;
+    if (storeEnableAdd === false) {
+      return false;
+    }
+    if (propsEditable === false) {
+      return false;
+    }
+    if (typeof storeEnableAdd === "function") {
+      return !!storeEnableAdd(path, value);
+    }
+    if (Array.isArray(value) || isPlainObject(value)) {
+      return true;
+    }
+    return false;
+  }, [onAdd, nestedIndex, path, storeEnableAdd, propsEditable, value]);
+  const storeEnableDelete = useJsonViewerStore((store) => store.enableDelete);
+  const onDelete = useJsonViewerStore((store) => store.onDelete);
+  const enableDelete = useMemo4(() => {
+    if (!onDelete || nestedIndex !== void 0) return false;
+    if (isRoot) {
+      return false;
+    }
+    if (storeEnableDelete === false) {
+      return false;
+    }
+    if (propsEditable === false) {
+      return false;
+    }
+    if (typeof storeEnableDelete === "function") {
+      return !!storeEnableDelete(path, value);
+    }
+    return storeEnableDelete;
+  }, [onDelete, nestedIndex, isRoot, path, storeEnableDelete, propsEditable, value]);
+  const enableClipboard = useJsonViewerStore((store) => store.enableClipboard);
+  const { copy, copied } = useClipboard();
+  const highlightUpdates = useJsonViewerStore((store) => store.highlightUpdates);
+  const isHighlight = useMemo4(() => {
+    if (!highlightUpdates || prevValue === void 0) return false;
+    if (typeof value !== typeof prevValue) {
+      return true;
+    }
+    if (typeof value === "number") {
+      if (isNaN(value) && isNaN(prevValue)) return false;
+      return value !== prevValue;
+    }
+    if (Array.isArray(value) !== Array.isArray(prevValue)) {
+      return true;
+    }
+    if (typeof value === "object" || typeof value === "function") {
+      return false;
+    }
+    if (value !== prevValue) {
+      return true;
+    }
+    return false;
+  }, [highlightUpdates, prevValue, value]);
+  const highlightContainer = useRef2(null);
+  useEffect2(() => {
+    if (highlightContainer.current && isHighlight && "animate" in highlightContainer.current) {
+      highlightContainer.current.animate(
+        [
+          { backgroundColor: highlightColor },
+          { backgroundColor: "" }
+        ],
+        {
+          duration: 1e3,
+          easing: "ease-in"
+        }
+      );
+    }
+  }, [highlightColor, isHighlight, prevValue, value]);
+  const startEditing = useCallback4((event) => {
+    event.preventDefault();
+    if (serialize) setTempValue(serialize(value));
+    setEditing(true);
+  }, [serialize, value]);
+  const abortEditing = useCallback4(() => {
+    setEditing(false);
+    setTempValue("");
+  }, [setEditing, setTempValue]);
+  const commitEditing = useCallback4((newValue) => {
+    setEditing(false);
+    if (!deserialize) return;
+    try {
+      onChange(path, value, deserialize(newValue));
+    } catch {
+    }
+  }, [setEditing, deserialize, onChange, path, value]);
+  const actionIcons = useMemo4(
+    () => {
+      if (editing) {
+        return /* @__PURE__ */ jsxs5(Fragment5, { children: [
+          /* @__PURE__ */ jsx13(IconBox, { children: /* @__PURE__ */ jsx13(
+            CloseIcon,
+            {
+              sx: { fontSize: ".8rem" },
+              onClick: abortEditing
+            }
+          ) }),
+          /* @__PURE__ */ jsx13(IconBox, { children: /* @__PURE__ */ jsx13(
+            CheckIcon,
+            {
+              sx: { fontSize: ".8rem" },
+              onClick: () => commitEditing(tempValue)
+            }
+          ) })
+        ] });
+      }
+      return /* @__PURE__ */ jsxs5(Fragment5, { children: [
+        enableClipboard && /* @__PURE__ */ jsx13(
+          IconBox,
+          {
+            onClick: (event) => {
+              event.preventDefault();
+              try {
+                copy(path, value, copyString);
+              } catch (e) {
+                console.error(e);
+              }
+            },
+            children: copied ? /* @__PURE__ */ jsx13(CheckIcon, { sx: { fontSize: ".8rem" } }) : /* @__PURE__ */ jsx13(ContentCopyIcon, { sx: { fontSize: ".8rem" } })
+          }
+        ),
+        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx13(
+          IconBox,
+          {
+            onClick: startEditing,
+            children: /* @__PURE__ */ jsx13(EditIcon, { sx: { fontSize: ".8rem" } })
+          }
+        ),
+        enableAdd && /* @__PURE__ */ jsx13(
+          IconBox,
+          {
+            onClick: (event) => {
+              event.preventDefault();
+              onAdd?.(path);
+            },
+            children: /* @__PURE__ */ jsx13(AddBoxIcon, { sx: { fontSize: ".8rem" } })
+          }
+        ),
+        enableDelete && /* @__PURE__ */ jsx13(
+          IconBox,
+          {
+            onClick: (event) => {
+              event.preventDefault();
+              onDelete?.(path, value);
+            },
+            children: /* @__PURE__ */ jsx13(DeleteIcon, { sx: { fontSize: ".9rem" } })
+          }
+        )
+      ] });
+    },
+    [
+      Editor,
+      serialize,
+      deserialize,
+      copied,
+      copy,
+      editable,
+      editing,
+      enableClipboard,
+      enableAdd,
+      enableDelete,
+      tempValue,
+      path,
+      value,
+      onAdd,
+      onDelete,
+      startEditing,
+      abortEditing,
+      commitEditing
+    ]
+  );
+  const isEmptyValue = useMemo4(() => getValueSize(value) === 0, [value]);
+  const expandable = !isEmptyValue && !!(PreComponent && PostComponent);
+  const KeyRenderer = useJsonViewerStore((store) => store.keyRenderer);
+  const downstreamProps = useMemo4(() => ({
+    path,
+    inspect,
+    setInspect,
+    value,
+    prevValue,
+    nestedIndex
+  }), [inspect, path, setInspect, value, prevValue, nestedIndex]);
+  return /* @__PURE__ */ jsxs5(
+    Box8,
+    {
+      className: "data-key-pair",
+      "data-testid": "data-key-pair" + path.join("."),
+      sx: { userSelect: "text" },
+      onMouseEnter: useCallback4(
+        () => setHover(path, nestedIndex),
+        [setHover, path, nestedIndex]
+      ),
+      children: [
+        /* @__PURE__ */ jsxs5(
+          DataBox,
+          {
+            component: "span",
+            className: "data-key",
+            sx: {
+              lineHeight: 1.5,
+              color: keyColor,
+              letterSpacing: 0.5,
+              opacity: 0.8
+            },
+            onClick: useCallback4((event) => {
+              if (event.isDefaultPrevented()) {
+                return;
+              }
+              if (!isEmptyValue) {
+                setInspect((state) => !state);
+              }
+            }, [isEmptyValue, setInspect]),
+            children: [
+              expandable ? inspect ? /* @__PURE__ */ jsx13(
+                ExpandMoreIcon,
+                {
+                  className: "data-key-toggle-expanded",
+                  sx: {
+                    "fontSize": ".8rem",
+                    "&:hover": { cursor: "pointer" }
+                  }
+                }
+              ) : /* @__PURE__ */ jsx13(
+                ChevronRightIcon,
+                {
+                  className: "data-key-toggle-collapsed",
+                  sx: {
+                    "fontSize": ".8rem",
+                    "&:hover": { cursor: "pointer" }
+                  }
+                }
+              ) : null,
+              /* @__PURE__ */ jsx13(
+                Box8,
+                {
+                  ref: highlightContainer,
+                  className: "data-key-key",
+                  component: "span",
+                  children: isRoot && depth === 0 ? rootName === false ? null : quotesOnKeys ? /* @__PURE__ */ jsxs5(Fragment5, { children: [
+                    '"',
+                    rootName,
+                    '"'
+                  ] }) : /* @__PURE__ */ jsx13(Fragment5, { children: rootName }) : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx13(KeyRenderer, { ...downstreamProps }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx13(
+                    Box8,
+                    {
+                      component: "span",
+                      style: {
+                        color: numberKeyColor,
+                        userSelect: isNumberKey ? "none" : "auto"
+                      },
+                      children: key
+                    }
+                  ) : quotesOnKeys ? /* @__PURE__ */ jsxs5(Fragment5, { children: [
+                    '"',
+                    key,
+                    '"'
+                  ] }) : /* @__PURE__ */ jsx13(Fragment5, { children: key }))
+                }
+              ),
+              isRoot ? rootName !== false && /* @__PURE__ */ jsx13(
+                DataBox,
+                {
+                  className: "data-key-colon",
+                  sx: { mr: 0.5 },
+                  children: ":"
+                }
+              ) : nestedIndex === void 0 && /* @__PURE__ */ jsx13(
+                DataBox,
+                {
+                  className: "data-key-colon",
+                  sx: {
+                    "mr": 0.5,
+                    ".data-key-key:empty + &": { display: "none" },
+                    "userSelect": isNumberKey ? "none" : "auto"
+                  },
+                  children: ":"
+                }
+              ),
+              PreComponent && /* @__PURE__ */ jsx13(PreComponent, { ...downstreamProps }),
+              isHover && expandable && inspect && actionIcons
+            ]
+          }
+        ),
+        editing && editable ? Editor && /* @__PURE__ */ jsx13(
+          Editor,
+          {
+            path,
+            value: tempValue,
+            setValue: setTempValue,
+            abortEditing,
+            commitEditing
+          }
+        ) : Component ? /* @__PURE__ */ jsx13(Component, { ...downstreamProps }) : /* @__PURE__ */ jsx13(Box8, { component: "span", className: "data-value-fallback", children: `fallback: ${value}` }),
+        PostComponent && /* @__PURE__ */ jsx13(PostComponent, { ...downstreamProps }),
+        !last && displayComma && /* @__PURE__ */ jsx13(DataBox, { children: "," }),
+        isHover && expandable && !inspect && actionIcons,
+        isHover && !expandable && actionIcons,
+        !isHover && editing && actionIcons
+      ]
+    }
+  );
+};
+
+// src/hooks/useThemeDetector.ts
+import { useEffect as useEffect3, useState as useState6 } from "react";
+var query = "(prefers-color-scheme: dark)";
+function useThemeDetector() {
+  const [isDark, setIsDark] = useState6(false);
+  useEffect3(() => {
+    const listener = (e) => setIsDark(e.matches);
+    setIsDark(globalThis.matchMedia(query).matches);
+    const queryMedia = globalThis.matchMedia(query);
+    queryMedia.addEventListener("change", listener);
+    return () => queryMedia.removeEventListener("change", listener);
+  }, []);
+  return isDark;
+}
+
+// src/JsonViewer.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function useSetIfNotUndefinedEffect(key, value) {
+  const { setState } = useContext3(JsonViewerStoreContext);
+  useEffect4(() => {
+    if (value !== void 0) {
+      setState({ [key]: value });
+    }
+  }, [key, value, setState]);
+}
+var JsonViewerInner = (props) => {
+  const { setState } = useContext3(JsonViewerStoreContext);
+  useEffect4(() => {
+    setState((state) => ({
+      prevValue: state.value,
+      value: props.value
+    }));
+  }, [props.value, setState]);
+  useSetIfNotUndefinedEffect("rootName", props.rootName);
+  useSetIfNotUndefinedEffect("indentWidth", props.indentWidth);
+  useSetIfNotUndefinedEffect("keyRenderer", props.keyRenderer);
+  useSetIfNotUndefinedEffect("enableAdd", props.enableAdd);
+  useSetIfNotUndefinedEffect("enableDelete", props.enableDelete);
+  useSetIfNotUndefinedEffect("enableClipboard", props.enableClipboard);
+  useSetIfNotUndefinedEffect("editable", props.editable);
+  useSetIfNotUndefinedEffect("onChange", props.onChange);
+  useSetIfNotUndefinedEffect("onCopy", props.onCopy);
+  useSetIfNotUndefinedEffect("onSelect", props.onSelect);
+  useSetIfNotUndefinedEffect("onAdd", props.onAdd);
+  useSetIfNotUndefinedEffect("onDelete", props.onDelete);
+  useSetIfNotUndefinedEffect("maxDisplayLength", props.maxDisplayLength);
+  useSetIfNotUndefinedEffect("groupArraysAfterLength", props.groupArraysAfterLength);
+  useSetIfNotUndefinedEffect("quotesOnKeys", props.quotesOnKeys);
+  useSetIfNotUndefinedEffect("displayDataTypes", props.displayDataTypes);
+  useSetIfNotUndefinedEffect("displaySize", props.displaySize);
+  useSetIfNotUndefinedEffect("displayComma", props.displayComma);
+  useSetIfNotUndefinedEffect("highlightUpdates", props.highlightUpdates);
+  useEffect4(() => {
+    if (props.theme === "light") {
+      setState({ colorspace: lightColorspace });
+    } else if (props.theme === "dark") {
+      setState({ colorspace: darkColorspace });
+    } else if (typeof props.theme === "object") {
+      setState({ colorspace: props.theme });
+    }
+  }, [setState, props.theme]);
+  const themeCls = useMemo5(() => {
+    if (typeof props.theme === "object") return "json-viewer-theme-custom";
+    return props.theme === "dark" ? "json-viewer-theme-dark" : "json-viewer-theme-light";
+  }, [props.theme]);
+  const onceRef = useRef3(true);
+  const registerTypes = useTypeRegistryStore((store) => store.registerTypes);
+  if (onceRef.current) {
+    const allTypes = props.valueTypes ? [...predefinedTypes, ...props.valueTypes] : [...predefinedTypes];
+    registerTypes(allTypes);
+    onceRef.current = false;
+  }
+  useEffect4(() => {
+    const allTypes = props.valueTypes ? [...predefinedTypes, ...props.valueTypes] : [...predefinedTypes];
+    registerTypes(allTypes);
+  }, [props.valueTypes, registerTypes]);
+  const value = useJsonViewerStore((store) => store.value);
+  const prevValue = useJsonViewerStore((store) => store.prevValue);
+  const emptyPath = useMemo5(() => [], []);
+  const setHover = useJsonViewerStore((store) => store.setHover);
+  const onMouseLeave = useCallback5(() => setHover(null), [setHover]);
+  return /* @__PURE__ */ jsx14(
+    Paper,
+    {
+      elevation: 0,
+      className: clsx(themeCls, props.className),
+      style: props.style,
+      sx: {
+        fontFamily: "monospace",
+        userSelect: "none",
+        contentVisibility: "auto",
+        ...props.sx
+      },
+      onMouseLeave,
+      children: /* @__PURE__ */ jsx14(
+        DataKeyPair,
+        {
+          value,
+          prevValue,
+          path: emptyPath,
+          last: true
+        }
+      )
+    }
+  );
+};
+var JsonViewer = function JsonViewer2(props) {
+  const isAutoDarkTheme = useThemeDetector();
+  const themeType = useMemo5(() => props.theme === "auto" ? isAutoDarkTheme ? "dark" : "light" : props.theme ?? "light", [isAutoDarkTheme, props.theme]);
+  const theme = useMemo5(() => {
+    const backgroundColor = typeof themeType === "object" ? themeType.base00 : themeType === "dark" ? darkColorspace.base00 : lightColorspace.base00;
+    const foregroundColor = typeof themeType === "object" ? themeType.base07 : themeType === "dark" ? darkColorspace.base07 : lightColorspace.base07;
+    return createTheme({
+      components: {
+        MuiPaper: {
+          styleOverrides: {
+            root: {
+              backgroundColor,
+              color: foregroundColor
+            }
+          }
+        }
+      },
+      palette: {
+        mode: themeType === "dark" ? "dark" : "light",
+        background: { default: backgroundColor }
+      }
+    });
+  }, [themeType]);
+  const mixedProps = { ...props, theme: themeType };
+  const jsonViewerStore = useMemo5(() => createJsonViewerStore(props), []);
+  const typeRegistryStore = useMemo5(() => createTypeRegistryStore(), []);
+  return /* @__PURE__ */ jsx14(ThemeProvider, { theme, children: /* @__PURE__ */ jsx14(TypeRegistryStoreContext.Provider, { value: typeRegistryStore, children: /* @__PURE__ */ jsx14(JsonViewerStoreContext.Provider, { value: jsonViewerStore, children: /* @__PURE__ */ jsx14(JsonViewerInner, { ...mixedProps }) }) }) });
+};
+export {
+  JsonViewer,
+  applyValue,
+  bigIntType,
+  booleanType,
+  darkColorspace,
+  dateType,
+  defineDataType,
+  defineEasyType,
+  deleteValue,
+  floatType,
+  functionType,
+  getPathValue,
+  intType,
+  isCycleReference,
+  lightColorspace,
+  nanType,
+  nullType,
+  objectType,
+  pathValueDefaultGetter,
+  safeStringify,
+  stringType,
+  undefinedType
+};