@m4l/components 9.3.10-BE220825-beta.2 → 9.3.10-BE250825-beta.1

package/not_recognized/index.js

@@ -0,0 +1,1942 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { createTheme, ThemeProvider, Paper, Box, SvgIcon, NoSsr, InputBase } from "@mui/material";
+import { useMemo, createContext, useState, useEffect, useContext, useRef, useCallback, memo } from "react";
+import { create, createStore, useStore } from "zustand";
+import { g as getDefaultExportFromCjs } from "../commonjs/index.js";
+var toggleSelection;
+var hasRequiredToggleSelection;
+function requireToggleSelection() {
+  if (hasRequiredToggleSelection) return toggleSelection;
+  hasRequiredToggleSelection = 1;
+  toggleSelection = function() {
+    var selection = document.getSelection();
+    if (!selection.rangeCount) {
+      return function() {
+      };
+    }
+    var active = document.activeElement;
+    var ranges = [];
+    for (var i = 0; i < selection.rangeCount; i++) {
+      ranges.push(selection.getRangeAt(i));
+    }
+    switch (active.tagName.toUpperCase()) {
+      // .toUpperCase handles XHTML
+      case "INPUT":
+      case "TEXTAREA":
+        active.blur();
+        break;
+      default:
+        active = null;
+        break;
+    }
+    selection.removeAllRanges();
+    return function() {
+      selection.type === "Caret" && selection.removeAllRanges();
+      if (!selection.rangeCount) {
+        ranges.forEach(function(range) {
+          selection.addRange(range);
+        });
+      }
+      active && active.focus();
+    };
+  };
+  return toggleSelection;
+}
+var copyToClipboard$1;
+var hasRequiredCopyToClipboard;
+function requireCopyToClipboard() {
+  if (hasRequiredCopyToClipboard) return copyToClipboard$1;
+  hasRequiredCopyToClipboard = 1;
+  var deselectCurrent = requireToggleSelection();
+  var clipboardToIE11Formatting = {
+    "text/plain": "Text",
+    "text/html": "Url",
+    "default": "Text"
+  };
+  var defaultMessage = "Copy to clipboard: #{key}, Enter";
+  function format(message) {
+    var copyKey = (/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl") + "+C";
+    return message.replace(/#{\s*key\s*}/g, copyKey);
+  }
+  function copy(text, options) {
+    var debug, message, reselectPrevious, range, selection, mark, success = false;
+    if (!options) {
+      options = {};
+    }
+    debug = options.debug || false;
+    try {
+      reselectPrevious = deselectCurrent();
+      range = document.createRange();
+      selection = document.getSelection();
+      mark = document.createElement("span");
+      mark.textContent = text;
+      mark.ariaHidden = "true";
+      mark.style.all = "unset";
+      mark.style.position = "fixed";
+      mark.style.top = 0;
+      mark.style.clip = "rect(0, 0, 0, 0)";
+      mark.style.whiteSpace = "pre";
+      mark.style.webkitUserSelect = "text";
+      mark.style.MozUserSelect = "text";
+      mark.style.msUserSelect = "text";
+      mark.style.userSelect = "text";
+      mark.addEventListener("copy", function(e) {
+        e.stopPropagation();
+        if (options.format) {
+          e.preventDefault();
+          if (typeof e.clipboardData === "undefined") {
+            debug && console.warn("unable to use e.clipboardData");
+            debug && console.warn("trying IE specific stuff");
+            window.clipboardData.clearData();
+            var format2 = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting["default"];
+            window.clipboardData.setData(format2, text);
+          } else {
+            e.clipboardData.clearData();
+            e.clipboardData.setData(options.format, text);
+          }
+        }
+        if (options.onCopy) {
+          e.preventDefault();
+          options.onCopy(e.clipboardData);
+        }
+      });
+      document.body.appendChild(mark);
+      range.selectNodeContents(mark);
+      selection.addRange(range);
+      var successful = document.execCommand("copy");
+      if (!successful) {
+        throw new Error("copy command was unsuccessful");
+      }
+      success = true;
+    } catch (err) {
+      debug && console.error("unable to copy using execCommand: ", err);
+      debug && console.warn("trying IE specific stuff");
+      try {
+        window.clipboardData.setData(options.format || "text", text);
+        options.onCopy && options.onCopy(window.clipboardData);
+        success = true;
+      } catch (err2) {
+        debug && console.error("unable to copy using clipboardData: ", err2);
+        debug && console.error("falling back to prompt");
+        message = format("message" in options ? options.message : defaultMessage);
+        window.prompt(message, text);
+      }
+    } finally {
+      if (selection) {
+        if (typeof selection.removeRange == "function") {
+          selection.removeRange(range);
+        } else {
+          selection.removeAllRanges();
+        }
+      }
+      if (mark) {
+        document.body.removeChild(mark);
+      }
+      reselectPrevious();
+    }
+    return success;
+  }
+  copyToClipboard$1 = copy;
+  return copyToClipboard$1;
+}
+var copyToClipboardExports = requireCopyToClipboard();
+const copyToClipboard = /* @__PURE__ */ getDefaultExportFromCjs(copyToClipboardExports);
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+const 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"
+};
+const 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"
+};
+const DefaultKeyRenderer = () => null;
+DefaultKeyRenderer.when = () => false;
+const createJsonViewerStore = (props) => {
+  return create()((set, get) => {
+    var _props_rootName, _props_indentWidth, _props_keyRenderer, _props_enableAdd, _props_enableDelete, _props_enableClipboard, _props_editable, _props_onChange, _props_onCopy, _props_onSelect, _props_onAdd, _props_onDelete, _props_defaultInspectDepth, _props_defaultInspectControl, _props_maxDisplayLength, _props_groupArraysAfterLength, _props_collapseStringsAfterLength, _props_objectSortKeys, _props_quotesOnKeys, _props_displayDataTypes, _props_displaySize, _props_displayComma, _props_highlightUpdates;
+    return {
+      // provided by user
+      rootName: (_props_rootName = props.rootName) !== null && _props_rootName !== void 0 ? _props_rootName : "root",
+      indentWidth: (_props_indentWidth = props.indentWidth) !== null && _props_indentWidth !== void 0 ? _props_indentWidth : 3,
+      keyRenderer: (_props_keyRenderer = props.keyRenderer) !== null && _props_keyRenderer !== void 0 ? _props_keyRenderer : DefaultKeyRenderer,
+      enableAdd: (_props_enableAdd = props.enableAdd) !== null && _props_enableAdd !== void 0 ? _props_enableAdd : false,
+      enableDelete: (_props_enableDelete = props.enableDelete) !== null && _props_enableDelete !== void 0 ? _props_enableDelete : false,
+      enableClipboard: (_props_enableClipboard = props.enableClipboard) !== null && _props_enableClipboard !== void 0 ? _props_enableClipboard : true,
+      editable: (_props_editable = props.editable) !== null && _props_editable !== void 0 ? _props_editable : false,
+      onChange: (_props_onChange = props.onChange) !== null && _props_onChange !== void 0 ? _props_onChange : () => {
+      },
+      onCopy: (_props_onCopy = props.onCopy) !== null && _props_onCopy !== void 0 ? _props_onCopy : void 0,
+      onSelect: (_props_onSelect = props.onSelect) !== null && _props_onSelect !== void 0 ? _props_onSelect : void 0,
+      onAdd: (_props_onAdd = props.onAdd) !== null && _props_onAdd !== void 0 ? _props_onAdd : void 0,
+      onDelete: (_props_onDelete = props.onDelete) !== null && _props_onDelete !== void 0 ? _props_onDelete : void 0,
+      defaultInspectDepth: (_props_defaultInspectDepth = props.defaultInspectDepth) !== null && _props_defaultInspectDepth !== void 0 ? _props_defaultInspectDepth : 5,
+      defaultInspectControl: (_props_defaultInspectControl = props.defaultInspectControl) !== null && _props_defaultInspectControl !== void 0 ? _props_defaultInspectControl : void 0,
+      maxDisplayLength: (_props_maxDisplayLength = props.maxDisplayLength) !== null && _props_maxDisplayLength !== void 0 ? _props_maxDisplayLength : 30,
+      groupArraysAfterLength: (_props_groupArraysAfterLength = props.groupArraysAfterLength) !== null && _props_groupArraysAfterLength !== void 0 ? _props_groupArraysAfterLength : 100,
+      collapseStringsAfterLength: props.collapseStringsAfterLength === false ? Number.MAX_VALUE : (_props_collapseStringsAfterLength = props.collapseStringsAfterLength) !== null && _props_collapseStringsAfterLength !== void 0 ? _props_collapseStringsAfterLength : 50,
+      objectSortKeys: (_props_objectSortKeys = props.objectSortKeys) !== null && _props_objectSortKeys !== void 0 ? _props_objectSortKeys : false,
+      quotesOnKeys: (_props_quotesOnKeys = props.quotesOnKeys) !== null && _props_quotesOnKeys !== void 0 ? _props_quotesOnKeys : true,
+      displayDataTypes: (_props_displayDataTypes = props.displayDataTypes) !== null && _props_displayDataTypes !== void 0 ? _props_displayDataTypes : true,
+      displaySize: (_props_displaySize = props.displaySize) !== null && _props_displaySize !== void 0 ? _props_displaySize : true,
+      displayComma: (_props_displayComma = props.displayComma) !== null && _props_displayComma !== void 0 ? _props_displayComma : false,
+      highlightUpdates: (_props_highlightUpdates = props.highlightUpdates) !== null && _props_highlightUpdates !== void 0 ? _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(".") + "[".concat(nestedIndex, "]nt") : path.join(".");
+        return get().inspectCache[target];
+      },
+      setInspectCache: (path, action, nestedIndex) => {
+        const target = nestedIndex !== void 0 ? path.join(".") + "[".concat(nestedIndex, "]nt") : path.join(".");
+        set((state) => ({
+          inspectCache: {
+            ...state.inspectCache,
+            [target]: typeof action === "function" ? action(state.inspectCache[target]) : action
+          }
+        }));
+      },
+      setHover: (path, nestedIndex) => {
+        set({
+          hoverPath: path ? {
+            path,
+            nestedIndex
+          } : null
+        });
+      }
+    };
+  });
+};
+const JsonViewerStoreContext = createContext(void 0);
+JsonViewerStoreContext.Provider;
+const useJsonViewerStore = (selector, equalityFn) => {
+  const store = useContext(JsonViewerStoreContext);
+  return useStore(store, selector, equalityFn);
+};
+const useTextColor = () => {
+  return useJsonViewerStore((store) => store.colorspace.base07);
+};
+const 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;
+}
+const 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 + "[".concat(value2, "]");
+        }
+        return path2 + "".concat(currentIndex === 0 ? "" : ".").concat(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 = Array.from(value.entries());
+      if (entries.every((param) => {
+        let [key2] = param;
+        return 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 Array.from(value.values());
+    }
+    if (typeof value === "object" && value !== null && Object.keys(value).length) {
+      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);
+}
+async function copyString(value) {
+  if ("clipboard" in navigator) {
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+    }
+  }
+  copyToClipboard(value);
+}
+function useClipboard() {
+  let { timeout = 2e3 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  const [copied, setCopied] = useState(false);
+  const copyTimeout = useRef(null);
+  const handleCopyResult = useCallback((value) => {
+    const current = copyTimeout.current;
+    if (current) {
+      window.clearTimeout(current);
+    }
+    copyTimeout.current = window.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 ".concat(path.length === 0 ? "src" : "src[".concat(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 ".concat(path.length === 0 ? "src" : "src[".concat(path.join(".")), "]"), error);
+      }
+    }
+  }, [
+    handleCopyResult,
+    onCopy
+  ]);
+  const reset = useCallback(() => {
+    setCopied(false);
+    if (copyTimeout.current) {
+      clearTimeout(copyTimeout.current);
+    }
+  }, []);
+  return {
+    copy,
+    reset,
+    copied
+  };
+}
+function useIsCycleReference(path, value) {
+  const rootValue = useJsonViewerStore((store) => store.value);
+  return useMemo(() => isCycleReference(rootValue, path, value), [
+    path,
+    value,
+    rootValue
+  ]);
+}
+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] = useState(() => {
+    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 = useCallback((apply) => {
+    set((oldState) => {
+      const newState = typeof apply === "boolean" ? apply : apply(oldState);
+      setInspectCache(path, newState, nestedIndex);
+      return newState;
+    });
+  }, [
+    nestedIndex,
+    path,
+    setInspectCache
+  ]);
+  return [
+    inspect,
+    setInspect
+  ];
+}
+const DataBox = (props) => /* @__PURE__ */ jsx(Box, {
+  component: "div",
+  ...props,
+  sx: {
+    display: "inline-block",
+    ...props.sx
+  }
+});
+const DataTypeLabel = (param) => {
+  let { dataType, enable = true } = param;
+  if (!enable) return null;
+  return /* @__PURE__ */ jsx(DataBox, {
+    className: "data-type-label",
+    sx: {
+      mx: 0.5,
+      fontSize: "0.7rem",
+      opacity: 0.8,
+      userSelect: "none"
+    },
+    children: dataType
+  });
+};
+function defineEasyType(param) {
+  let { is, serialize, deserialize, type, colorKey, displayTypeLabel = true, Renderer } = param;
+  const Render = /* @__PURE__ */ 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 === null || onSelect === void 0 ? void 0 : onSelect(props.path, props.value),
+      sx: {
+        color
+      },
+      children: [
+        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx(DataTypeLabel, {
+          dataType: type
+        }),
+        /* @__PURE__ */ jsx(DataBox, {
+          className: "".concat(type, "-value"),
+          children: /* @__PURE__ */ jsx(Render, {
+            path: props.path,
+            inspect: props.inspect,
+            setInspect: props.setInspect,
+            value: props.value,
+            prevValue: props.prevValue
+          })
+        })
+      ]
+    });
+  };
+  EasyType.displayName = "easy-".concat(type, "-type");
+  if (!serialize || !deserialize) {
+    return {
+      is,
+      Component: EasyType
+    };
+  }
+  const EasyTypeEditor = (param2) => {
+    let { value, setValue, abortEditing, commitEditing } = param2;
+    const color = useJsonViewerStore((store) => store.colorspace[colorKey]);
+    const handleKeyDown = useCallback((event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        commitEditing(value);
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        abortEditing();
+      }
+    }, [
+      abortEditing,
+      commitEditing,
+      value
+    ]);
+    const handleChange = useCallback((event) => {
+      setValue(event.target.value);
+    }, [
+      setValue
+    ]);
+    return /* @__PURE__ */ jsx(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-".concat(type, "-type-editor");
+  return {
+    is,
+    serialize,
+    deserialize,
+    Component: EasyType,
+    Editor: EasyTypeEditor
+  };
+}
+const 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: (param) => {
+    let { value } = param;
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: value ? "true" : "false"
+    });
+  }
+});
+const displayOptions = {
+  weekday: "short",
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "2-digit",
+  minute: "2-digit"
+};
+const dateType = defineEasyType({
+  is: (value) => value instanceof Date,
+  type: "date",
+  colorKey: "base0D",
+  Renderer: (param) => {
+    let { value } = param;
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: value.toLocaleTimeString("en-us", displayOptions)
+    });
+  }
+});
+const 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.substring(funcString.indexOf("=>") + 2);
+};
+const functionName = (func) => {
+  const funcString = func.toString();
+  const isUsualFunction = funcString.indexOf("function") !== -1;
+  if (isUsualFunction) {
+    return funcString.substring(8, funcString.indexOf("{")).trim();
+  }
+  return funcString.substring(0, funcString.indexOf("=>") + 2).trim();
+};
+const lb = "{";
+const rb = "}";
+const PreFunctionType = (props) => {
+  return /* @__PURE__ */ jsxs(NoSsr, {
+    children: [
+      /* @__PURE__ */ jsx(DataTypeLabel, {
+        dataType: "function"
+      }),
+      /* @__PURE__ */ jsxs(Box, {
+        component: "span",
+        className: "data-function-start",
+        sx: {
+          letterSpacing: 0.5
+        },
+        children: [
+          functionName(props.value),
+          " ",
+          lb
+        ]
+      })
+    ]
+  });
+};
+const PostFunctionType = () => {
+  return /* @__PURE__ */ jsx(NoSsr, {
+    children: /* @__PURE__ */ jsx(Box, {
+      component: "span",
+      className: "data-function-end",
+      children: rb
+    })
+  });
+};
+const FunctionType = (props) => {
+  const functionColor = useJsonViewerStore((store) => store.colorspace.base05);
+  return /* @__PURE__ */ jsx(NoSsr, {
+    children: /* @__PURE__ */ jsx(Box, {
+      className: "data-function",
+      sx: {
+        display: props.inspect ? "block" : "inline-block",
+        pl: props.inspect ? 2 : 0,
+        color: functionColor
+      },
+      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ jsx(Box, {
+        component: "span",
+        className: "data-function-body",
+        onClick: () => props.setInspect(true),
+        sx: {
+          "&:hover": {
+            cursor: "pointer"
+          },
+          padding: 0.5
+        },
+        children: "…"
+      })
+    })
+  });
+};
+const functionType = {
+  is: (value) => typeof value === "function",
+  Component: FunctionType,
+  PreComponent: PreFunctionType,
+  PostComponent: PostFunctionType
+};
+const nullType = defineEasyType({
+  is: (value) => value === null,
+  type: "null",
+  colorKey: "base08",
+  displayTypeLabel: false,
+  Renderer: () => {
+    const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
+    return /* @__PURE__ */ jsx(Box, {
+      sx: {
+        fontSize: "0.8rem",
+        backgroundColor,
+        fontWeight: "bold",
+        borderRadius: "3px",
+        padding: "0.5px 2px"
+      },
+      children: "NULL"
+    });
+  }
+});
+const isInt = (n) => n % 1 === 0;
+const 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) => parseFloat(value),
+  Renderer: () => {
+    const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
+    return /* @__PURE__ */ jsx(Box, {
+      sx: {
+        backgroundColor,
+        fontSize: "0.8rem",
+        fontWeight: "bold",
+        borderRadius: "3px",
+        padding: "0.5px 2px"
+      },
+      children: "NaN"
+    });
+  }
+});
+const floatType = defineEasyType({
+  is: (value) => typeof value === "number" && !isInt(value) && !isNaN(value),
+  type: "float",
+  colorKey: "base0B",
+  serialize: (value) => value.toString(),
+  deserialize: (value) => parseFloat(value),
+  Renderer: (param) => {
+    let { value } = param;
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: value
+    });
+  }
+});
+const 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) => parseFloat(value),
+  Renderer: (param) => {
+    let { value } = param;
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: value
+    });
+  }
+});
+const bigIntType = defineEasyType({
+  is: (value) => typeof value === "bigint",
+  type: "bigint",
+  colorKey: "base0F",
+  serialize: (value) => value.toString(),
+  deserialize: (value) => BigInt(value.replace(/\D/g, "")),
+  Renderer: (param) => {
+    let { value } = param;
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: "".concat(value, "n")
+    });
+  }
+});
+const BaseIcon = (param) => {
+  let { d, ...props } = param;
+  return /* @__PURE__ */ jsx(SvgIcon, {
+    ...props,
+    children: /* @__PURE__ */ jsx("path", {
+      d
+    })
+  });
+};
+const 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";
+const Check = "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z";
+const ChevronRight = "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z";
+const 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";
+const 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";
+const 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";
+const 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";
+const ExpandMore = "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z";
+const Delete = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM8 9h8v10H8zm7.5-5l-1-1h-5l-1 1H5v2h14V4z";
+const AddBoxIcon = (props) => {
+  return /* @__PURE__ */ jsx(BaseIcon, {
+    d: AddBox,
+    ...props
+  });
+};
+const CheckIcon = (props) => {
+  return /* @__PURE__ */ jsx(BaseIcon, {
+    d: Check,
+    ...props
+  });
+};
+const ChevronRightIcon = (props) => {
+  return /* @__PURE__ */ jsx(BaseIcon, {
+    d: ChevronRight,
+    ...props
+  });
+};
+const CircularArrowsIcon = (props) => {
+  return /* @__PURE__ */ jsx(BaseIcon, {
+    d: CircularArrows,
+    ...props
+  });
+};
+const CloseIcon = (props) => {
+  return /* @__PURE__ */ jsx(BaseIcon, {
+    d: Close,
+    ...props
+  });
+};
+const ContentCopyIcon = (props) => {
+  return /* @__PURE__ */ jsx(BaseIcon, {
+    d: ContentCopy,
+    ...props
+  });
+};
+const EditIcon = (props) => {
+  return /* @__PURE__ */ jsx(BaseIcon, {
+    d: Edit,
+    ...props
+  });
+};
+const ExpandMoreIcon = (props) => {
+  return /* @__PURE__ */ jsx(BaseIcon, {
+    d: ExpandMore,
+    ...props
+  });
+};
+const DeleteIcon = (props) => {
+  return /* @__PURE__ */ jsx(BaseIcon, {
+    d: Delete,
+    ...props
+  });
+};
+const objectLb = "{";
+const arrayLb = "[";
+const objectRb = "}";
+const 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 "".concat(length, " ").concat(itemsPluralized).concat(name ? " (".concat(name, ")") : "");
+}
+const PreObjectType = (props) => {
+  const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
+  const textColor = useTextColor();
+  const isArrayLike = useMemo(() => Array.isArray(props.value) || props.value instanceof Set, [
+    props.value
+  ]);
+  const isEmptyValue = useMemo(() => getValueSize(props.value) === 0, [
+    props.value
+  ]);
+  const sizeOfValue = useMemo(() => inspectMetadata(props.value), [
+    props.value
+  ]);
+  const displaySize = useJsonViewerStore((store) => store.displaySize);
+  const shouldDisplaySize = useMemo(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
+    displaySize,
+    props.path,
+    props.value
+  ]);
+  const isTrap = useIsCycleReference(props.path, props.value);
+  return /* @__PURE__ */ jsxs(Box, {
+    component: "span",
+    className: "data-object-start",
+    sx: {
+      letterSpacing: 0.5
+    },
+    children: [
+      isArrayLike ? arrayLb : objectLb,
+      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx(Box, {
+        component: "span",
+        sx: {
+          pl: 0.5,
+          fontStyle: "italic",
+          color: metadataColor,
+          userSelect: "none"
+        },
+        children: sizeOfValue
+      }),
+      isTrap && !props.inspect && /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx(CircularArrowsIcon, {
+            sx: {
+              fontSize: 12,
+              color: textColor,
+              mx: 0.5
+            }
+          }),
+          /* @__PURE__ */ jsx(DataBox, {
+            sx: {
+              cursor: "pointer",
+              userSelect: "none"
+            },
+            children: isTrap
+          })
+        ]
+      })
+    ]
+  });
+};
+const PostObjectType = (props) => {
+  const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
+  const textColor = useTextColor();
+  const isArrayLike = useMemo(() => Array.isArray(props.value) || props.value instanceof Set, [
+    props.value
+  ]);
+  const isEmptyValue = useMemo(() => getValueSize(props.value) === 0, [
+    props.value
+  ]);
+  const sizeOfValue = useMemo(() => inspectMetadata(props.value), [
+    props.value
+  ]);
+  const displaySize = useJsonViewerStore((store) => store.displaySize);
+  const shouldDisplaySize = useMemo(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
+    displaySize,
+    props.path,
+    props.value
+  ]);
+  return /* @__PURE__ */ jsxs(Box, {
+    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__ */ jsx(Box, {
+        component: "span",
+        sx: {
+          pl: 0.5,
+          fontStyle: "italic",
+          color: metadataColor,
+          userSelect: "none"
+        },
+        children: sizeOfValue
+      }) : null
+    ]
+  });
+};
+function getIterator(value) {
+  return typeof (value === null || value === void 0 ? void 0 : value[Symbol.iterator]) === "function";
+}
+const 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] = useState(useJsonViewerStore((store) => store.maxDisplayLength));
+  const objectSortKeys = useJsonViewerStore((store) => store.objectSortKeys);
+  const elements = useMemo(() => {
+    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__ */ jsx(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();
+          var _nextResult_done;
+          elements3.push(/* @__PURE__ */ jsx(DataKeyPair, {
+            path: [
+              ...props.path,
+              "iterator:".concat(count)
+            ],
+            value: result.value,
+            nestedIndex: count,
+            editable: false,
+            last: (_nextResult_done = nextResult.done) !== null && _nextResult_done !== void 0 ? _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__ */ jsx(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__ */ jsxs(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__ */ jsx(DataKeyPair, {
+          path: props.path,
+          value: list,
+          nestedIndex: index,
+          prevValue: prevElements === null || prevElements === void 0 ? void 0 : prevElements[index],
+          last: index === elementsLastIndex
+        }, index);
+      });
+    }
+    let entries = Object.entries(value);
+    if (objectSortKeys) {
+      entries = objectSortKeys === true ? entries.sort((param, param1) => {
+        let [a] = param, [b] = param1;
+        return a.localeCompare(b);
+      }) : entries.sort((param, param1) => {
+        let [a] = param, [b] = param1;
+        return objectSortKeys(a, b);
+      });
+    }
+    const lastIndex = entries.length - 1;
+    const elements2 = entries.slice(0, displayLength).map((param, index) => {
+      let [key, value2] = param;
+      var _props_prevValue;
+      const path = [
+        ...props.path,
+        key
+      ];
+      return /* @__PURE__ */ jsx(DataKeyPair, {
+        path,
+        value: value2,
+        prevValue: (_props_prevValue = props.prevValue) === null || _props_prevValue === void 0 ? void 0 : _props_prevValue[key],
+        last: index === lastIndex
+      }, key);
+    });
+    if (entries.length > displayLength) {
+      const rest = entries.length - displayLength;
+      elements2.push(/* @__PURE__ */ jsxs(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 = useMemo(() => getValueSize(props.value) === 0, [
+    props.value
+  ]);
+  if (isEmptyValue) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Box, {
+    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 ".concat(borderColor) : "none"
+    },
+    children: props.inspect ? elements : !isTrap && /* @__PURE__ */ jsx(Box, {
+      component: "span",
+      className: "data-object-body",
+      onClick: () => props.setInspect(true),
+      sx: {
+        "&:hover": {
+          cursor: "pointer"
+        },
+        padding: 0.5,
+        userSelect: "none"
+      },
+      children: "…"
+    })
+  });
+};
+const objectType = {
+  is: (value) => typeof value === "object",
+  Component: ObjectType,
+  PreComponent: PreObjectType,
+  PostComponent: PostObjectType
+};
+const stringType = defineEasyType({
+  is: (value) => typeof value === "string",
+  type: "string",
+  colorKey: "base09",
+  serialize: (value) => value,
+  deserialize: (value) => value,
+  Renderer: (props) => {
+    const [showRest, setShowRest] = useState(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__ */ jsxs(Box, {
+      component: "span",
+      sx: {
+        overflowWrap: "anywhere",
+        cursor: hasRest ? "pointer" : "inherit"
+      },
+      onClick: () => {
+        var _window_getSelection;
+        if (((_window_getSelection = window.getSelection()) === null || _window_getSelection === void 0 ? void 0 : _window_getSelection.type) === "Range") {
+          return;
+        }
+        if (hasRest) {
+          setShowRest((value2) => !value2);
+        }
+      },
+      children: [
+        '"',
+        value,
+        hasRest && !showRest && /* @__PURE__ */ jsx(Box, {
+          component: "span",
+          sx: {
+            padding: 0.5
+          },
+          children: "…"
+        }),
+        '"'
+      ]
+    });
+  }
+});
+const undefinedType = defineEasyType({
+  is: (value) => value === void 0,
+  type: "undefined",
+  colorKey: "base05",
+  displayTypeLabel: false,
+  Renderer: () => {
+    const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
+    return /* @__PURE__ */ jsx(Box, {
+      sx: {
+        fontSize: "0.7rem",
+        backgroundColor,
+        borderRadius: "3px",
+        padding: "0.5px 2px"
+      },
+      children: "undefined"
+    });
+  }
+});
+function memorizeDataType(dataType) {
+  function compare(prevProps, nextProps) {
+    var _prevProps_path, _nextProps_path;
+    return Object.is(prevProps.value, nextProps.value) && prevProps.inspect && nextProps.inspect && ((_prevProps_path = prevProps.path) === null || _prevProps_path === void 0 ? void 0 : _prevProps_path.join(".")) === ((_nextProps_path = nextProps.path) === null || _nextProps_path === void 0 ? void 0 : _nextProps_path.join("."));
+  }
+  dataType.Component = /* @__PURE__ */ memo(dataType.Component, compare);
+  if (dataType.Editor) {
+    dataType.Editor = /* @__PURE__ */ memo(dataType.Editor, function compare2(prevProps, nextProps) {
+      return Object.is(prevProps.value, nextProps.value);
+    });
+  }
+  if (dataType.PreComponent) {
+    dataType.PreComponent = /* @__PURE__ */ memo(dataType.PreComponent, compare);
+  }
+  if (dataType.PostComponent) {
+    dataType.PostComponent = /* @__PURE__ */ memo(dataType.PostComponent, compare);
+  }
+  return dataType;
+}
+const predefinedTypes = [
+  memorizeDataType(booleanType),
+  memorizeDataType(dateType),
+  memorizeDataType(nullType),
+  memorizeDataType(undefinedType),
+  memorizeDataType(stringType),
+  memorizeDataType(functionType),
+  memorizeDataType(nanType),
+  memorizeDataType(intType),
+  memorizeDataType(floatType),
+  memorizeDataType(bigIntType)
+];
+const createTypeRegistryStore = () => {
+  return createStore()((set) => ({
+    registry: predefinedTypes,
+    registerTypes: (setState) => {
+      set((state) => ({
+        registry: typeof setState === "function" ? setState(state.registry) : setState
+      }));
+    }
+  }));
+};
+const TypeRegistryStoreContext = /* @__PURE__ */ createContext(void 0);
+TypeRegistryStoreContext.Provider;
+const useTypeRegistryStore = (selector, equalityFn) => {
+  const store = useContext(TypeRegistryStoreContext);
+  return useStore(store, selector, equalityFn);
+};
+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: ".concat(value));
+  }
+  return potential;
+}
+function useTypeComponents(value, path) {
+  const registry = useTypeRegistryStore((store) => store.registry);
+  return useMemo(() => matchTypeComponents(value, path, registry), [
+    value,
+    path,
+    registry
+  ]);
+}
+const IconBox = (props) => /* @__PURE__ */ jsx(Box, {
+  component: "span",
+  ...props,
+  sx: {
+    cursor: "pointer",
+    paddingLeft: "0.7rem",
+    ...props.sx
+  }
+});
+const DataKeyPair = (props) => {
+  const { value, prevValue, path, nestedIndex, last } = props;
+  const { Component, PreComponent, PostComponent, Editor, serialize, deserialize } = useTypeComponents(value, path);
+  var _props_editable;
+  const propsEditable = (_props_editable = props.editable) !== null && _props_editable !== void 0 ? _props_editable : void 0;
+  const storeEditable = useJsonViewerStore((store) => store.editable);
+  const editable = useMemo(() => {
+    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] = useState("");
+  const depth = path.length;
+  const key = path[depth - 1];
+  const hoverPath = useJsonViewerStore((store) => store.hoverPath);
+  const isHover = useMemo(() => {
+    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] = useState(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 = useMemo(() => {
+    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 = useMemo(() => {
+    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 = useMemo(() => {
+    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 = useRef();
+  useEffect(() => {
+    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 = useCallback((event) => {
+    event.preventDefault();
+    if (serialize) setTempValue(serialize(value));
+    setEditing(true);
+  }, [
+    serialize,
+    value
+  ]);
+  const abortEditing = useCallback(() => {
+    setEditing(false);
+    setTempValue("");
+  }, [
+    setEditing,
+    setTempValue
+  ]);
+  const commitEditing = useCallback((newValue) => {
+    setEditing(false);
+    if (!deserialize) return;
+    try {
+      onChange(path, value, deserialize(newValue));
+    } catch {
+    }
+  }, [
+    setEditing,
+    deserialize,
+    onChange,
+    path,
+    value
+  ]);
+  const actionIcons = useMemo(() => {
+    if (editing) {
+      return /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx(IconBox, {
+            children: /* @__PURE__ */ jsx(CloseIcon, {
+              sx: {
+                fontSize: ".8rem"
+              },
+              onClick: abortEditing
+            })
+          }),
+          /* @__PURE__ */ jsx(IconBox, {
+            children: /* @__PURE__ */ jsx(CheckIcon, {
+              sx: {
+                fontSize: ".8rem"
+              },
+              onClick: () => commitEditing(tempValue)
+            })
+          })
+        ]
+      });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        enableClipboard && /* @__PURE__ */ jsx(IconBox, {
+          onClick: (event) => {
+            event.preventDefault();
+            try {
+              copy(path, value, copyString);
+            } catch (e) {
+              console.error(e);
+            }
+          },
+          children: copied ? /* @__PURE__ */ jsx(CheckIcon, {
+            sx: {
+              fontSize: ".8rem"
+            }
+          }) : /* @__PURE__ */ jsx(ContentCopyIcon, {
+            sx: {
+              fontSize: ".8rem"
+            }
+          })
+        }),
+        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx(IconBox, {
+          onClick: startEditing,
+          children: /* @__PURE__ */ jsx(EditIcon, {
+            sx: {
+              fontSize: ".8rem"
+            }
+          })
+        }),
+        enableAdd && /* @__PURE__ */ jsx(IconBox, {
+          onClick: (event) => {
+            event.preventDefault();
+            onAdd === null || onAdd === void 0 ? void 0 : onAdd(path);
+          },
+          children: /* @__PURE__ */ jsx(AddBoxIcon, {
+            sx: {
+              fontSize: ".8rem"
+            }
+          })
+        }),
+        enableDelete && /* @__PURE__ */ jsx(IconBox, {
+          onClick: (event) => {
+            event.preventDefault();
+            onDelete === null || onDelete === void 0 ? void 0 : onDelete(path, value);
+          },
+          children: /* @__PURE__ */ jsx(DeleteIcon, {
+            sx: {
+              fontSize: ".9rem"
+            }
+          })
+        })
+      ]
+    });
+  }, [
+    Editor,
+    serialize,
+    deserialize,
+    copied,
+    copy,
+    editable,
+    editing,
+    enableClipboard,
+    enableAdd,
+    enableDelete,
+    tempValue,
+    path,
+    value,
+    onAdd,
+    onDelete,
+    startEditing,
+    abortEditing,
+    commitEditing
+  ]);
+  const isEmptyValue = useMemo(() => getValueSize(value) === 0, [
+    value
+  ]);
+  const expandable = !isEmptyValue && !!(PreComponent && PostComponent);
+  const KeyRenderer = useJsonViewerStore((store) => store.keyRenderer);
+  const downstreamProps = useMemo(() => ({
+    path,
+    inspect,
+    setInspect,
+    value,
+    prevValue,
+    nestedIndex
+  }), [
+    inspect,
+    path,
+    setInspect,
+    value,
+    prevValue,
+    nestedIndex
+  ]);
+  return /* @__PURE__ */ jsxs(Box, {
+    className: "data-key-pair",
+    "data-testid": "data-key-pair" + path.join("."),
+    sx: {
+      userSelect: "text"
+    },
+    onMouseEnter: useCallback(() => setHover(path, nestedIndex), [
+      setHover,
+      path,
+      nestedIndex
+    ]),
+    children: [
+      /* @__PURE__ */ jsxs(DataBox, {
+        component: "span",
+        className: "data-key",
+        sx: {
+          lineHeight: 1.5,
+          color: keyColor,
+          letterSpacing: 0.5,
+          opacity: 0.8
+        },
+        onClick: useCallback((event) => {
+          if (event.isDefaultPrevented()) {
+            return;
+          }
+          if (!isEmptyValue) {
+            setInspect((state) => !state);
+          }
+        }, [
+          isEmptyValue,
+          setInspect
+        ]),
+        children: [
+          expandable ? inspect ? /* @__PURE__ */ jsx(ExpandMoreIcon, {
+            className: "data-key-toggle-expanded",
+            sx: {
+              fontSize: ".8rem",
+              "&:hover": {
+                cursor: "pointer"
+              }
+            }
+          }) : /* @__PURE__ */ jsx(ChevronRightIcon, {
+            className: "data-key-toggle-collapsed",
+            sx: {
+              fontSize: ".8rem",
+              "&:hover": {
+                cursor: "pointer"
+              }
+            }
+          }) : null,
+          /* @__PURE__ */ jsx(Box, {
+            ref: highlightContainer,
+            className: "data-key-key",
+            component: "span",
+            children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                '"',
+                rootName,
+                '"'
+              ]
+            }) : /* @__PURE__ */ jsx(Fragment, {
+              children: rootName
+            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx(KeyRenderer, {
+              ...downstreamProps
+            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx(Box, {
+              component: "span",
+              style: {
+                color: numberKeyColor,
+                userSelect: isNumberKey ? "none" : "auto"
+              },
+              children: key
+            }) : quotesOnKeys ? /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                '"',
+                key,
+                '"'
+              ]
+            }) : /* @__PURE__ */ jsx(Fragment, {
+              children: key
+            }))
+          }),
+          isRoot ? rootName !== false && /* @__PURE__ */ jsx(DataBox, {
+            className: "data-key-colon",
+            sx: {
+              mr: 0.5
+            },
+            children: ":"
+          }) : nestedIndex === void 0 && /* @__PURE__ */ jsx(DataBox, {
+            className: "data-key-colon",
+            sx: {
+              mr: 0.5,
+              ".data-key-key:empty + &": {
+                display: "none"
+              },
+              userSelect: isNumberKey ? "none" : "auto"
+            },
+            children: ":"
+          }),
+          PreComponent && /* @__PURE__ */ jsx(PreComponent, {
+            ...downstreamProps
+          }),
+          isHover && expandable && inspect && actionIcons
+        ]
+      }),
+      editing && editable ? Editor && /* @__PURE__ */ jsx(Editor, {
+        path,
+        value: tempValue,
+        setValue: setTempValue,
+        abortEditing,
+        commitEditing
+      }) : Component ? /* @__PURE__ */ jsx(Component, {
+        ...downstreamProps
+      }) : /* @__PURE__ */ jsx(Box, {
+        component: "span",
+        className: "data-value-fallback",
+        children: "fallback: ".concat(value)
+      }),
+      PostComponent && /* @__PURE__ */ jsx(PostComponent, {
+        ...downstreamProps
+      }),
+      !last && displayComma && /* @__PURE__ */ jsx(DataBox, {
+        children: ","
+      }),
+      isHover && expandable && !inspect && actionIcons,
+      isHover && !expandable && actionIcons,
+      !isHover && editing && actionIcons
+    ]
+  });
+};
+const query = "(prefers-color-scheme: dark)";
+function useThemeDetector() {
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    const listener = (e) => setIsDark(e.matches);
+    setIsDark(window.matchMedia(query).matches);
+    const queryMedia = window.matchMedia(query);
+    queryMedia.addEventListener("change", listener);
+    return () => queryMedia.removeEventListener("change", listener);
+  }, []);
+  return isDark;
+}
+function useSetIfNotUndefinedEffect(key, value) {
+  const { setState } = useContext(JsonViewerStoreContext);
+  useEffect(() => {
+    if (value !== void 0) {
+      setState({
+        [key]: value
+      });
+    }
+  }, [
+    key,
+    value,
+    setState
+  ]);
+}
+const JsonViewerInner = (props) => {
+  const { setState } = useContext(JsonViewerStoreContext);
+  useEffect(() => {
+    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);
+  useEffect(() => {
+    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 = useMemo(() => {
+    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 = useRef(true);
+  const registerTypes = useTypeRegistryStore((store) => store.registerTypes);
+  if (onceRef.current) {
+    const allTypes = props.valueTypes ? [
+      ...predefinedTypes,
+      ...props.valueTypes
+    ] : [
+      ...predefinedTypes
+    ];
+    registerTypes(allTypes);
+    onceRef.current = false;
+  }
+  useEffect(() => {
+    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 = useMemo(() => [], []);
+  const setHover = useJsonViewerStore((store) => store.setHover);
+  const onMouseLeave = useCallback(() => setHover(null), [
+    setHover
+  ]);
+  return /* @__PURE__ */ jsx(Paper, {
+    elevation: 0,
+    className: clsx(themeCls, props.className),
+    style: props.style,
+    sx: {
+      fontFamily: "monospace",
+      userSelect: "none",
+      contentVisibility: "auto",
+      ...props.sx
+    },
+    onMouseLeave,
+    children: /* @__PURE__ */ jsx(DataKeyPair, {
+      value,
+      prevValue,
+      path: emptyPath,
+      last: true
+    })
+  });
+};
+const JsonViewer = function JsonViewer2(props) {
+  const isAutoDarkTheme = useThemeDetector();
+  const themeType = useMemo(() => {
+    var _props_theme;
+    return props.theme === "auto" ? isAutoDarkTheme ? "dark" : "light" : (_props_theme = props.theme) !== null && _props_theme !== void 0 ? _props_theme : "light";
+  }, [
+    isAutoDarkTheme,
+    props.theme
+  ]);
+  const theme = useMemo(() => {
+    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 = useMemo(() => createJsonViewerStore(props), []);
+  const typeRegistryStore = useMemo(() => createTypeRegistryStore(), []);
+  return /* @__PURE__ */ jsx(ThemeProvider, {
+    theme,
+    children: /* @__PURE__ */ jsx(TypeRegistryStoreContext.Provider, {
+      value: typeRegistryStore,
+      children: /* @__PURE__ */ jsx(JsonViewerStoreContext.Provider, {
+        value: jsonViewerStore,
+        children: /* @__PURE__ */ jsx(JsonViewerInner, {
+          ...mixedProps
+        })
+      })
+    })
+  });
+};
+export {
+  JsonViewer as J
+};