modern-json-react 1.0.0

package/dist/index.js

@@ -0,0 +1,1691 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/JsonEditor.tsx
+var MODE_OPTIONS = [
+  { value: "code", label: "Code" },
+  { value: "tree", label: "Tree" },
+  { value: "split", label: "Split" }
+];
+var Toolbar = ({
+  mode,
+  onModeChange,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  onFormat,
+  searchable,
+  isSearchOpen,
+  onToggleSearch,
+  readOnly,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mjr-toolbar ${className}`, role: "toolbar", "aria-label": "Editor controls", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mjr-toolbar__modes", role: "tablist", "aria-label": "Editor mode", children: MODE_OPTIONS.map(({ value, label }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        role: "tab",
+        "aria-selected": mode === value,
+        className: `mjr-toolbar__mode-btn ${mode === value ? "mjr-toolbar__mode-btn--active" : ""}`,
+        onClick: () => onModeChange(value),
+        children: label
+      },
+      value
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mjr-toolbar__separator", "aria-hidden": "true" }),
+    searchable && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: `mjr-toolbar__btn ${isSearchOpen ? "mjr-toolbar__btn--active" : ""}`,
+        onClick: onToggleSearch,
+        "aria-label": "Toggle search",
+        "aria-pressed": isSearchOpen,
+        title: "Search (Ctrl+F)",
+        children: "\u{1F50D}"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mjr-toolbar__separator", "aria-hidden": "true" }),
+    !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "mjr-toolbar__btn",
+          onClick: onUndo,
+          disabled: !canUndo,
+          "aria-label": "Undo",
+          title: "Undo (Ctrl+Z)",
+          children: "\u21B6"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "mjr-toolbar__btn",
+          onClick: onRedo,
+          disabled: !canRedo,
+          "aria-label": "Redo",
+          title: "Redo (Ctrl+Shift+Z)",
+          children: "\u21B7"
+        }
+      )
+    ] }),
+    !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "mjr-toolbar__btn",
+        onClick: onFormat,
+        "aria-label": "Format document",
+        title: "Format (Ctrl+Shift+P)",
+        children: "{ }"
+      }
+    )
+  ] });
+};
+var CodeEditor = ({
+  value,
+  onChange,
+  parseError,
+  readOnly,
+  lineNumbers,
+  searchMatches,
+  currentMatchIndex,
+  onCursorChange,
+  className = ""
+}) => {
+  const textareaRef = react.useRef(null);
+  const lines = react.useMemo(() => value.split("\n"), [value]);
+  const handleChange = react.useCallback(
+    (e) => {
+      if (readOnly) return;
+      onChange(e.target.value);
+    },
+    [onChange, readOnly]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (readOnly) return;
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const textarea = textareaRef.current;
+        if (!textarea) return;
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const indent = "  ";
+        const newValue = value.substring(0, start) + indent + value.substring(end);
+        onChange(newValue);
+        requestAnimationFrame(() => {
+          textarea.selectionStart = textarea.selectionEnd = start + indent.length;
+        });
+      }
+      if (e.key === "{" || e.key === "[" || e.key === '"') {
+        const textarea = textareaRef.current;
+        if (!textarea) return;
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const closeChar = e.key === "{" ? "}" : e.key === "[" ? "]" : '"';
+        if (start === end) {
+          e.preventDefault();
+          const newValue = value.substring(0, start) + e.key + closeChar + value.substring(end);
+          onChange(newValue);
+          requestAnimationFrame(() => {
+            textarea.selectionStart = textarea.selectionEnd = start + 1;
+          });
+        }
+      }
+    },
+    [value, onChange, readOnly]
+  );
+  const handleCursorMove = react.useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const pos = textarea.selectionStart;
+    const textBefore = value.substring(0, pos);
+    const linesBefore = textBefore.split("\n");
+    const line = linesBefore.length;
+    const column = linesBefore[linesBefore.length - 1].length + 1;
+    onCursorChange({ line, column, offset: pos });
+  }, [value, onCursorChange]);
+  const highlightedLines = react.useMemo(() => {
+    return lines.map((line, idx) => {
+      const lineNum = idx + 1;
+      const isErrorLine = parseError?.line === lineNum;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `mjr-code__line ${isErrorLine ? "mjr-code__line--error" : ""}`,
+          children: [
+            lineNumbers && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-code__line-number", "aria-hidden": "true", children: lineNum }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-code__line-content", children: highlightJsonLine(line) })
+          ]
+        },
+        idx
+      );
+    });
+  }, [lines, lineNumbers, parseError]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mjr-code-editor ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mjr-code__display", "aria-hidden": "true", children: highlightedLines }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ref: textareaRef,
+        className: "mjr-code__textarea",
+        value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleCursorMove,
+        onClick: handleCursorMove,
+        readOnly,
+        spellCheck: false,
+        autoCapitalize: "off",
+        autoComplete: "off",
+        autoCorrect: "off",
+        "aria-label": "JSON code editor",
+        "aria-multiline": "true",
+        "aria-readonly": readOnly,
+        "data-testid": "code-editor-textarea"
+      }
+    ),
+    parseError && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "mjr-code__error-tooltip",
+        role: "alert",
+        style: { top: `${(parseError.line - 1) * 1.5}em` },
+        children: [
+          "Line ",
+          parseError.line,
+          ", Col ",
+          parseError.column,
+          ": ",
+          parseError.message
+        ]
+      }
+    )
+  ] });
+};
+function highlightJsonLine(line) {
+  const tokens = [];
+  let i = 0;
+  let key = 0;
+  while (i < line.length) {
+    const ch = line[i];
+    if (ch === " " || ch === "	") {
+      let ws = "";
+      while (i < line.length && (line[i] === " " || line[i] === "	")) {
+        ws += line[i];
+        i++;
+      }
+      tokens.push(/* @__PURE__ */ jsxRuntime.jsx("span", { children: ws }, key++));
+      continue;
+    }
+    if (ch === '"') {
+      let str = '"';
+      i++;
+      while (i < line.length) {
+        if (line[i] === "\\") {
+          str += line[i] + (line[i + 1] || "");
+          i += 2;
+          continue;
+        }
+        str += line[i];
+        if (line[i] === '"') {
+          i++;
+          break;
+        }
+        i++;
+      }
+      const rest = line.substring(i).trimStart();
+      const isKey = rest.startsWith(":");
+      tokens.push(
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: isKey ? "mjr-syn-key" : "mjr-syn-string", children: str }, key++)
+      );
+      continue;
+    }
+    if (ch === "-" || ch >= "0" && ch <= "9") {
+      let num = "";
+      while (i < line.length && /[\d.eE+\-]/.test(line[i])) {
+        num += line[i];
+        i++;
+      }
+      tokens.push(
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-syn-number", children: num }, key++)
+      );
+      continue;
+    }
+    if (line.substring(i, i + 4) === "true") {
+      tokens.push(/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-syn-boolean", children: "true" }, key++));
+      i += 4;
+      continue;
+    }
+    if (line.substring(i, i + 5) === "false") {
+      tokens.push(/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-syn-boolean", children: "false" }, key++));
+      i += 5;
+      continue;
+    }
+    if (line.substring(i, i + 4) === "null") {
+      tokens.push(/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-syn-null", children: "null" }, key++));
+      i += 4;
+      continue;
+    }
+    if (ch === "{" || ch === "}" || ch === "[" || ch === "]") {
+      tokens.push(/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-syn-bracket", children: ch }, key++));
+      i++;
+      continue;
+    }
+    tokens.push(/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-syn-punctuation", children: ch }, key++));
+    i++;
+  }
+  return tokens;
+}
+var TYPE_LABELS = {
+  string: "str",
+  number: "num",
+  boolean: "bool",
+  null: "null",
+  object: "obj",
+  array: "arr"
+};
+var TreeNodeComponent = ({
+  node,
+  onToggle,
+  onValueChange,
+  onKeyChange,
+  onDelete,
+  onTypeChange,
+  readOnly
+}) => {
+  const [isEditing, setIsEditing] = react.useState(false);
+  const [editValue, setEditValue] = react.useState("");
+  const [isEditingKey, setIsEditingKey] = react.useState(false);
+  const [editKey, setEditKey] = react.useState("");
+  const isExpandable = node.type === "object" || node.type === "array";
+  const handleToggle = react.useCallback(() => {
+    if (isExpandable) {
+      onToggle(node.id);
+    }
+  }, [isExpandable, node.id, onToggle]);
+  const handleStartEdit = react.useCallback(() => {
+    if (readOnly || isExpandable) return;
+    setEditValue(node.type === "string" ? String(node.value) : JSON.stringify(node.value));
+    setIsEditing(true);
+  }, [readOnly, isExpandable, node.value, node.type]);
+  const handleFinishEdit = react.useCallback(() => {
+    setIsEditing(false);
+    let newValue;
+    if (node.type === "string") {
+      newValue = editValue;
+    } else if (node.type === "number") {
+      const num = Number(editValue);
+      newValue = isNaN(num) ? node.value : num;
+    } else if (node.type === "boolean") {
+      newValue = editValue === "true";
+    } else if (node.type === "null") {
+      newValue = null;
+    } else {
+      try {
+        newValue = JSON.parse(editValue);
+      } catch {
+        newValue = node.value;
+      }
+    }
+    onValueChange(node.path, newValue);
+  }, [editValue, node.type, node.value, node.path, onValueChange]);
+  const handleKeyEdit = react.useCallback(() => {
+    if (readOnly || typeof node.key === "number") return;
+    setEditKey(String(node.key));
+    setIsEditingKey(true);
+  }, [readOnly, node.key]);
+  const handleFinishKeyEdit = react.useCallback(() => {
+    setIsEditingKey(false);
+    if (editKey !== String(node.key)) {
+      onKeyChange(node.path, String(node.key), editKey);
+    }
+  }, [editKey, node.key, node.path, onKeyChange]);
+  const handleTypeChange = react.useCallback(
+    (e) => {
+      const newType = e.target.value;
+      onTypeChange(node.path, newType);
+    },
+    [node.path, onTypeChange]
+  );
+  const renderValue = () => {
+    if (isEditing) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          className: "mjr-tree-node__edit-input",
+          value: editValue,
+          onChange: (e) => setEditValue(e.target.value),
+          onBlur: handleFinishEdit,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") handleFinishEdit();
+            if (e.key === "Escape") setIsEditing(false);
+          },
+          autoFocus: true,
+          "aria-label": `Edit value for ${node.key}`,
+          "data-testid": `edit-value-${node.path}`
+        }
+      );
+    }
+    if (isExpandable) {
+      const symbol = node.type === "object" ? "{}" : "[]";
+      return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mjr-tree-node__preview", children: [
+        node.expanded ? "" : `${symbol}`,
+        !node.expanded && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mjr-tree-node__count", children: [
+          "(",
+          node.childCount,
+          " ",
+          node.childCount === 1 ? "item" : "items",
+          ")"
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: `mjr-tree-node__value mjr-tree-node__value--${node.type}`,
+        onDoubleClick: handleStartEdit,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": `Value: ${formatDisplayValue(node.value, node.type)}. Double-click to edit.`,
+        "data-testid": `value-${node.path}`,
+        children: formatDisplayValue(node.value, node.type)
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "mjr-tree-node",
+      role: "treeitem",
+      "aria-expanded": isExpandable ? node.expanded : void 0,
+      "aria-level": node.depth + 1,
+      "aria-label": `${node.key}: ${node.type}`,
+      style: { paddingLeft: `${node.depth * 20}px` },
+      "data-testid": `tree-node-${node.path}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: `mjr-tree-node__arrow ${isExpandable ? "mjr-tree-node__arrow--expandable" : ""} ${node.expanded ? "mjr-tree-node__arrow--expanded" : ""}`,
+            onClick: handleToggle,
+            "aria-hidden": "true",
+            children: isExpandable ? node.expanded ? "\u25BC" : "\u25B6" : "\xA0"
+          }
+        ),
+        isEditingKey ? /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            className: "mjr-tree-node__key-input",
+            value: editKey,
+            onChange: (e) => setEditKey(e.target.value),
+            onBlur: handleFinishKeyEdit,
+            onKeyDown: (e) => {
+              if (e.key === "Enter") handleFinishKeyEdit();
+              if (e.key === "Escape") setIsEditingKey(false);
+            },
+            autoFocus: true,
+            "aria-label": `Edit key name`
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "mjr-tree-node__key",
+            onDoubleClick: handleKeyEdit,
+            "data-testid": `key-${node.path}`,
+            children: typeof node.key === "number" ? node.key : `"${node.key}"`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-tree-node__colon", "aria-hidden": "true", children: ":" }),
+        renderValue(),
+        !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            className: "mjr-tree-node__type-badge",
+            value: node.type,
+            onChange: handleTypeChange,
+            "aria-label": `Type for ${node.key}`,
+            "data-testid": `type-${node.path}`,
+            children: Object.entries(TYPE_LABELS).map(([type, label]) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: type, children: label }, type))
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-tree-node__type-badge-ro", children: TYPE_LABELS[node.type] }),
+        !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "mjr-tree-node__delete",
+            onClick: () => onDelete(node.path),
+            "aria-label": `Delete ${node.key}`,
+            title: "Delete",
+            "data-testid": `delete-${node.path}`,
+            children: "\\u2715"
+          }
+        ),
+        isExpandable && node.expanded && node.children.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", className: "mjr-tree-node__children", children: node.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+          TreeNodeComponent,
+          {
+            node: child,
+            onToggle,
+            onValueChange,
+            onKeyChange,
+            onDelete,
+            onTypeChange,
+            readOnly
+          },
+          child.id
+        )) })
+      ]
+    }
+  );
+};
+function formatDisplayValue(value, type) {
+  if (type === "null") return "null";
+  if (type === "string") return `"${String(value)}"`;
+  if (type === "boolean") return String(value);
+  if (type === "number") return String(value);
+  return "";
+}
+
+// src/core/path.ts
+function getByPath(obj, path) {
+  if (path === "$" || path === "") return obj;
+  const segments = parsePath(path);
+  let current = obj;
+  for (const segment of segments) {
+    if (current === null || current === void 0) return void 0;
+    if (Array.isArray(current)) {
+      const index = parseInt(segment, 10);
+      if (isNaN(index)) return void 0;
+      current = current[index];
+    } else if (typeof current === "object") {
+      current = current[segment];
+    } else {
+      return void 0;
+    }
+  }
+  return current;
+}
+function setByPath(obj, path, value) {
+  if (path === "$" || path === "") return value;
+  const segments = parsePath(path);
+  return setBySegments(obj, segments, 0, value);
+}
+function setBySegments(current, segments, index, value) {
+  if (index === segments.length) return value;
+  const segment = segments[index];
+  if (Array.isArray(current)) {
+    const arrIndex = parseInt(segment, 10);
+    const newArr = [...current];
+    newArr[arrIndex] = setBySegments(current[arrIndex], segments, index + 1, value);
+    return newArr;
+  }
+  if (typeof current === "object" && current !== null) {
+    return {
+      ...current,
+      [segment]: setBySegments(
+        current[segment],
+        segments,
+        index + 1,
+        value
+      )
+    };
+  }
+  const nextSegment = segments[index + 1];
+  const isArrayIndex = nextSegment !== void 0 && /^\d+$/.test(nextSegment);
+  const container = isArrayIndex ? [] : {};
+  return {
+    [segment]: setBySegments(container, segments, index + 1, value)
+  };
+}
+function deleteByPath(obj, path) {
+  if (path === "$" || path === "") return void 0;
+  const segments = parsePath(path);
+  return deleteBySegments(obj, segments, 0);
+}
+function deleteBySegments(current, segments, index) {
+  if (index === segments.length - 1) {
+    const segment2 = segments[index];
+    if (Array.isArray(current)) {
+      const arrIndex = parseInt(segment2, 10);
+      return current.filter((_, i) => i !== arrIndex);
+    }
+    if (typeof current === "object" && current !== null) {
+      const { [segment2]: _, ...rest } = current;
+      return rest;
+    }
+    return current;
+  }
+  const segment = segments[index];
+  if (Array.isArray(current)) {
+    const arrIndex = parseInt(segment, 10);
+    const newArr = [...current];
+    newArr[arrIndex] = deleteBySegments(current[arrIndex], segments, index + 1);
+    return newArr;
+  }
+  if (typeof current === "object" && current !== null) {
+    return {
+      ...current,
+      [segment]: deleteBySegments(
+        current[segment],
+        segments,
+        index + 1
+      )
+    };
+  }
+  return current;
+}
+function parsePath(path) {
+  let normalized = path.replace(/^\$\.?/, "");
+  normalized = normalized.replace(/\[(\d+)\]/g, ".$1");
+  normalized = normalized.replace(/\["([^"]+)"\]/g, ".$1");
+  normalized = normalized.replace(/\['([^']+)'\]/g, ".$1");
+  return normalized.split(".").filter((s) => s !== "");
+}
+function buildPath(segments) {
+  if (segments.length === 0) return "$";
+  return "$." + segments.map((s) => typeof s === "number" ? `[${s}]` : s).join(".");
+}
+var TreeEditor = ({
+  value,
+  onChange,
+  readOnly,
+  className = ""
+}) => {
+  const [expandedPaths, setExpandedPaths] = react.useState(/* @__PURE__ */ new Set(["$"]));
+  const tree = react.useMemo(() => {
+    return buildTree(value, "$", "root", 0, expandedPaths);
+  }, [value, expandedPaths]);
+  const handleToggle = react.useCallback((id) => {
+    setExpandedPaths((prev) => {
+      const next = new Set(prev);
+      const path = id;
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  }, []);
+  const handleValueChange = react.useCallback(
+    (path, newValue) => {
+      const updated = setByPath(value, path, newValue);
+      onChange(updated);
+    },
+    [value, onChange]
+  );
+  const handleKeyChange = react.useCallback(
+    (path, oldKey, newKey) => {
+      const segments = path.split(".");
+      const parentPath = segments.slice(0, -1).join(".") || "$";
+      const currentValue = getNestedValue(value, path);
+      let updated = deleteByPath(value, path);
+      const newPath = parentPath === "$" ? `$.${newKey}` : `${parentPath}.${newKey}`;
+      updated = setByPath(updated, newPath, currentValue);
+      onChange(updated);
+    },
+    [value, onChange]
+  );
+  const handleDelete = react.useCallback(
+    (path) => {
+      const updated = deleteByPath(value, path);
+      onChange(updated);
+    },
+    [value, onChange]
+  );
+  const handleTypeChange = react.useCallback(
+    (path, newType) => {
+      const defaults = {
+        string: "",
+        number: 0,
+        boolean: false,
+        null: null,
+        object: {},
+        array: []
+      };
+      const updated = setByPath(value, path, defaults[newType]);
+      onChange(updated);
+    },
+    [value, onChange]
+  );
+  const handleAddProperty = react.useCallback(() => {
+    if (value === void 0 || value === null) {
+      onChange({});
+      return;
+    }
+    if (typeof value === "object" && !Array.isArray(value)) {
+      const obj = value;
+      let newKey = "newKey";
+      let counter = 1;
+      while (newKey in obj) {
+        newKey = `newKey${counter++}`;
+      }
+      onChange({ ...obj, [newKey]: "" });
+    } else if (Array.isArray(value)) {
+      onChange([...value, ""]);
+    }
+  }, [value, onChange]);
+  if (tree === null) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mjr-tree-editor mjr-tree-editor--empty ${className}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mjr-tree-editor__empty-msg", children: "No valid JSON to display" }),
+      !readOnly && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "mjr-tree-editor__add-btn", onClick: () => onChange({}), children: "+ Create empty object" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `mjr-tree-editor ${className}`,
+      role: "tree",
+      "aria-label": "JSON tree editor",
+      "data-testid": "tree-editor",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TreeNodeComponent,
+          {
+            node: tree,
+            onToggle: handleToggle,
+            onValueChange: handleValueChange,
+            onKeyChange: handleKeyChange,
+            onDelete: handleDelete,
+            onTypeChange: handleTypeChange,
+            readOnly
+          }
+        ),
+        !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "mjr-tree-editor__add-root",
+            onClick: handleAddProperty,
+            "data-testid": "add-property",
+            children: "+ Add property"
+          }
+        )
+      ]
+    }
+  );
+};
+function buildTree(value, path, key, depth, expandedPaths) {
+  if (value === void 0) return null;
+  const type = getType(value);
+  const expanded = expandedPaths.has(path);
+  const id = path;
+  const node = {
+    id,
+    key,
+    value,
+    type,
+    path,
+    depth,
+    expanded,
+    children: [],
+    childCount: 0
+  };
+  if (type === "object" && value !== null) {
+    const obj = value;
+    const keys = Object.keys(obj);
+    node.childCount = keys.length;
+    if (expanded) {
+      node.children = keys.map(
+        (k) => buildTree(obj[k], `${path}.${k}`, k, depth + 1, expandedPaths)
+      ).filter(Boolean);
+    }
+  } else if (type === "array") {
+    const arr = value;
+    node.childCount = arr.length;
+    if (expanded) {
+      node.children = arr.map(
+        (item, i) => buildTree(item, `${path}[${i}]`, i, depth + 1, expandedPaths)
+      ).filter(Boolean);
+    }
+  }
+  return node;
+}
+function getType(value) {
+  if (value === null) return "null";
+  if (Array.isArray(value)) return "array";
+  const t = typeof value;
+  if (t === "string") return "string";
+  if (t === "number") return "number";
+  if (t === "boolean") return "boolean";
+  if (t === "object") return "object";
+  return "string";
+}
+function getNestedValue(obj, path) {
+  const segments = path.replace(/^\$\.?/, "").replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
+  let current = obj;
+  for (const seg of segments) {
+    if (current === null || current === void 0) return void 0;
+    if (Array.isArray(current)) {
+      current = current[parseInt(seg, 10)];
+    } else if (typeof current === "object") {
+      current = current[seg];
+    }
+  }
+  return current;
+}
+var StatusBar = ({
+  parseError,
+  validationErrors,
+  cursor,
+  stats,
+  className = ""
+}) => {
+  const hasErrors = parseError !== null;
+  const hasWarnings = validationErrors.length > 0;
+  let statusIcon;
+  let statusText;
+  let statusClass;
+  if (hasErrors) {
+    statusIcon = "\u2715";
+    statusText = `Invalid JSON (line ${parseError.line})`;
+    statusClass = "mjr-status--error";
+  } else if (hasWarnings) {
+    statusIcon = "\u26A0";
+    statusText = `${validationErrors.length} validation ${validationErrors.length === 1 ? "issue" : "issues"}`;
+    statusClass = "mjr-status--warning";
+  } else {
+    statusIcon = "\u2713";
+    statusText = "Valid JSON";
+    statusClass = "mjr-status--valid";
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `mjr-status-bar ${statusClass} ${className}`,
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mjr-status-bar__indicator", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-status-bar__icon", "aria-hidden": "true", children: statusIcon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-status-bar__text", children: statusText })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-status-bar__separator", "aria-hidden": "true", children: "|" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mjr-status-bar__cursor", children: [
+          "Ln ",
+          cursor.line,
+          ", Col ",
+          cursor.column
+        ] }),
+        stats && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-status-bar__separator", "aria-hidden": "true", children: "|" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mjr-status-bar__stats", children: [
+            stats.properties,
+            " ",
+            stats.properties === 1 ? "property" : "properties",
+            stats.arrays > 0 && `, ${stats.arrays} ${stats.arrays === 1 ? "array" : "arrays"}`
+          ] })
+        ] }),
+        stats && stats.byteSize > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-status-bar__separator", "aria-hidden": "true", children: "|" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-status-bar__size", children: formatBytes(stats.byteSize) })
+        ] })
+      ]
+    }
+  );
+};
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// src/core/parser.ts
+function parseJson(text) {
+  if (text.trim() === "") {
+    return { value: void 0, error: null };
+  }
+  try {
+    const value = JSON.parse(text);
+    return { value, error: null };
+  } catch (e) {
+    const error = extractParseError(e, text);
+    return { value: void 0, error };
+  }
+}
+function extractParseError(err, text) {
+  const message = err.message;
+  let offset = -1;
+  let line = 1;
+  let column = 1;
+  const posMatch = message.match(/at position (\d+)/);
+  const lineColMatch = message.match(/at line (\d+) column (\d+)/);
+  if (lineColMatch) {
+    line = parseInt(lineColMatch[1], 10);
+    column = parseInt(lineColMatch[2], 10);
+    offset = getOffsetFromLineCol(text, line, column);
+  } else if (posMatch) {
+    offset = parseInt(posMatch[1], 10);
+    const loc = getLineColFromOffset(text, offset);
+    line = loc.line;
+    column = loc.column;
+  }
+  const cleanMessage = message.replace(/^JSON\.parse: /, "").replace(/ at position \d+.*$/, "").replace(/ at line \d+ column \d+.*$/, "");
+  return {
+    message: cleanMessage || "Invalid JSON",
+    line,
+    column,
+    offset: Math.max(0, offset)
+  };
+}
+function getLineColFromOffset(text, offset) {
+  let line = 1;
+  let lastNewline = -1;
+  for (let i = 0; i < offset && i < text.length; i++) {
+    if (text[i] === "\n") {
+      line++;
+      lastNewline = i;
+    }
+  }
+  return { line, column: offset - lastNewline };
+}
+function getOffsetFromLineCol(text, line, column) {
+  let currentLine = 1;
+  for (let i = 0; i < text.length; i++) {
+    if (currentLine === line) {
+      return i + column - 1;
+    }
+    if (text[i] === "\n") {
+      currentLine++;
+    }
+  }
+  return text.length;
+}
+function stringifyJson(value, indent = 2) {
+  if (value === void 0) return "";
+  try {
+    return JSON.stringify(value, null, indent);
+  } catch {
+    return "";
+  }
+}
+function isValidJson(text) {
+  try {
+    JSON.parse(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/core/validator.ts
+function validateSchema(value, schema, path = "$") {
+  const errors = [];
+  if (value === void 0 || value === null) {
+    if (schema.type && schema.type !== "null") {
+      errors.push(makeError(`Expected type "${schema.type}", got null`, path, "type", schema.type));
+    }
+    return { valid: errors.length === 0, errors };
+  }
+  if (schema.type) {
+    const actualType = getJsonType(value);
+    const allowedTypes = Array.isArray(schema.type) ? schema.type : [schema.type];
+    const typeMatches = allowedTypes.includes(actualType) || actualType === "integer" && allowedTypes.includes("number");
+    if (!typeMatches) {
+      errors.push(
+        makeError(
+          `Expected type "${allowedTypes.join(" | ")}", got "${actualType}"`,
+          path,
+          "type",
+          schema.type,
+          value
+        )
+      );
+    }
+  }
+  if (schema.enum && Array.isArray(schema.enum)) {
+    if (!schema.enum.some((e) => deepEqual(e, value))) {
+      errors.push(
+        makeError(
+          `Value must be one of: ${schema.enum.map((e) => JSON.stringify(e)).join(", ")}`,
+          path,
+          "enum",
+          schema.enum,
+          value
+        )
+      );
+    }
+  }
+  if (typeof value === "string") {
+    if (schema.minLength !== void 0 && value.length < schema.minLength) {
+      errors.push(
+        makeError(
+          `String must be at least ${schema.minLength} characters`,
+          path,
+          "minLength",
+          schema.minLength,
+          value
+        )
+      );
+    }
+    if (schema.maxLength !== void 0 && value.length > schema.maxLength) {
+      errors.push(
+        makeError(
+          `String must be at most ${schema.maxLength} characters`,
+          path,
+          "maxLength",
+          schema.maxLength,
+          value
+        )
+      );
+    }
+    if (schema.pattern) {
+      const re = new RegExp(schema.pattern);
+      if (!re.test(value)) {
+        errors.push(
+          makeError(`String must match pattern "${schema.pattern}"`, path, "pattern", schema.pattern, value)
+        );
+      }
+    }
+  }
+  if (typeof value === "number") {
+    if (schema.minimum !== void 0 && value < schema.minimum) {
+      errors.push(
+        makeError(`Value must be >= ${schema.minimum}`, path, "minimum", schema.minimum, value)
+      );
+    }
+    if (schema.maximum !== void 0 && value > schema.maximum) {
+      errors.push(
+        makeError(`Value must be <= ${schema.maximum}`, path, "maximum", schema.maximum, value)
+      );
+    }
+    if (schema.exclusiveMinimum !== void 0 && value <= schema.exclusiveMinimum) {
+      errors.push(
+        makeError(
+          `Value must be > ${schema.exclusiveMinimum}`,
+          path,
+          "exclusiveMinimum",
+          schema.exclusiveMinimum,
+          value
+        )
+      );
+    }
+    if (schema.exclusiveMaximum !== void 0 && value >= schema.exclusiveMaximum) {
+      errors.push(
+        makeError(
+          `Value must be < ${schema.exclusiveMaximum}`,
+          path,
+          "exclusiveMaximum",
+          schema.exclusiveMaximum,
+          value
+        )
+      );
+    }
+    if (schema.multipleOf !== void 0 && value % schema.multipleOf !== 0) {
+      errors.push(
+        makeError(`Value must be a multiple of ${schema.multipleOf}`, path, "multipleOf", schema.multipleOf, value)
+      );
+    }
+  }
+  if (Array.isArray(value)) {
+    if (schema.minItems !== void 0 && value.length < schema.minItems) {
+      errors.push(
+        makeError(`Array must have at least ${schema.minItems} items`, path, "minItems", schema.minItems, value)
+      );
+    }
+    if (schema.maxItems !== void 0 && value.length > schema.maxItems) {
+      errors.push(
+        makeError(`Array must have at most ${schema.maxItems} items`, path, "maxItems", schema.maxItems, value)
+      );
+    }
+    if (schema.uniqueItems && new Set(value.map((v) => JSON.stringify(v))).size !== value.length) {
+      errors.push(makeError("Array items must be unique", path, "uniqueItems", true, value));
+    }
+    if (schema.items && !Array.isArray(schema.items)) {
+      value.forEach((item, index) => {
+        const result = validateSchema(item, schema.items, `${path}[${index}]`);
+        errors.push(...result.errors);
+      });
+    }
+  }
+  if (isPlainObject(value)) {
+    const obj = value;
+    const keys = Object.keys(obj);
+    if (schema.required && Array.isArray(schema.required)) {
+      for (const req of schema.required) {
+        if (!(req in obj)) {
+          errors.push(
+            makeError(`Missing required property "${req}"`, path, "required", schema.required)
+          );
+        }
+      }
+    }
+    if (schema.minProperties !== void 0 && keys.length < schema.minProperties) {
+      errors.push(
+        makeError(
+          `Object must have at least ${schema.minProperties} properties`,
+          path,
+          "minProperties",
+          schema.minProperties,
+          value
+        )
+      );
+    }
+    if (schema.maxProperties !== void 0 && keys.length > schema.maxProperties) {
+      errors.push(
+        makeError(
+          `Object must have at most ${schema.maxProperties} properties`,
+          path,
+          "maxProperties",
+          schema.maxProperties,
+          value
+        )
+      );
+    }
+    if (schema.properties) {
+      const props = schema.properties;
+      for (const key of keys) {
+        if (props[key]) {
+          const result = validateSchema(obj[key], props[key], `${path}.${key}`);
+          errors.push(...result.errors);
+        } else if (schema.additionalProperties === false) {
+          errors.push(
+            makeError(
+              `Unexpected property "${key}"`,
+              `${path}.${key}`,
+              "additionalProperties",
+              false,
+              obj[key]
+            )
+          );
+        }
+      }
+    }
+  }
+  return { valid: errors.length === 0, errors };
+}
+async function runCustomValidators(value, validators, path = "$") {
+  const results = await Promise.all(validators.map((v) => v(value, path)));
+  return results.flat();
+}
+function getJsonType(value) {
+  if (value === null) return "null";
+  if (Array.isArray(value)) return "array";
+  if (typeof value === "number") {
+    return Number.isInteger(value) ? "integer" : "number";
+  }
+  return typeof value;
+}
+function makeError(message, path, schemaKeyword, schemaRule, actualValue, severity = "error") {
+  return { message, path, severity, schemaKeyword, schemaRule, actualValue };
+}
+function isPlainObject(val) {
+  return typeof val === "object" && val !== null && !Array.isArray(val);
+}
+function deepEqual(a, b) {
+  if (a === b) return true;
+  if (typeof a !== typeof b) return false;
+  if (a === null || b === null) return false;
+  if (typeof a !== "object") return false;
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+
+// src/hooks/useJsonParser.ts
+function useJsonParser(initialValue, options = {}) {
+  const { schema, validators, debounce = 300 } = options;
+  const [text, setText] = react.useState(
+    () => initialValue !== void 0 ? stringifyJson(initialValue) : ""
+  );
+  const [parsedValue, setParsedValue] = react.useState(initialValue);
+  const [parseError, setParseError] = react.useState(null);
+  const [validationErrors, setValidationErrors] = react.useState([]);
+  const debounceTimer = react.useRef();
+  react.useEffect(() => {
+    const result = parseJson(text);
+    setParsedValue(result.value);
+    setParseError(result.error);
+    if (!result.error && result.value !== void 0) {
+      if (debounceTimer.current) clearTimeout(debounceTimer.current);
+      debounceTimer.current = setTimeout(async () => {
+        let errors = [];
+        if (schema) {
+          const schemaResult = validateSchema(result.value, schema);
+          errors = [...schemaResult.errors];
+        }
+        if (validators && validators.length > 0) {
+          const customErrors = await runCustomValidators(result.value, validators);
+          errors = [...errors, ...customErrors];
+        }
+        setValidationErrors(errors);
+      }, debounce);
+    } else {
+      setValidationErrors([]);
+    }
+    return () => {
+      if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    };
+  }, [text, schema, validators, debounce]);
+  const handleSetText = react.useCallback((newText) => {
+    setText(newText);
+  }, []);
+  const handleSetValue = react.useCallback((value) => {
+    const newText = stringifyJson(value);
+    setText(newText);
+  }, []);
+  const format = react.useCallback(
+    (indent = 2) => {
+      if (parsedValue !== void 0) {
+        setText(stringifyJson(parsedValue, indent));
+      }
+    },
+    [parsedValue]
+  );
+  return {
+    text,
+    parsedValue,
+    parseError,
+    validationErrors,
+    isValid: parseError === null && validationErrors.length === 0,
+    setText: handleSetText,
+    setValue: handleSetValue,
+    format
+  };
+}
+function useUndoRedo(initialValue, options = {}) {
+  const { maxHistory = 100, groupingInterval = 300 } = options;
+  const historyRef = react.useRef([initialValue]);
+  const positionRef = react.useRef(0);
+  const lastUpdateTime = react.useRef(0);
+  const [, forceUpdate] = react.useState(0);
+  const rerender = react.useCallback(() => forceUpdate((n) => n + 1), []);
+  const current = historyRef.current[positionRef.current];
+  const set = react.useCallback(
+    (value) => {
+      const now = Date.now();
+      const shouldGroup = now - lastUpdateTime.current < groupingInterval;
+      lastUpdateTime.current = now;
+      const prev = historyRef.current;
+      const pos = positionRef.current;
+      let newHistory;
+      let newPos;
+      if (shouldGroup && pos > 0) {
+        newHistory = [...prev.slice(0, pos), value];
+        newPos = pos;
+      } else {
+        newHistory = [...prev.slice(0, pos + 1), value];
+        newPos = pos + 1;
+      }
+      if (newHistory.length > maxHistory) {
+        const trimCount = newHistory.length - maxHistory;
+        newHistory = newHistory.slice(trimCount);
+        newPos = newPos - trimCount;
+      }
+      historyRef.current = newHistory;
+      positionRef.current = Math.max(0, newPos);
+      rerender();
+    },
+    [maxHistory, groupingInterval, rerender]
+  );
+  const undo = react.useCallback(() => {
+    if (positionRef.current > 0) {
+      positionRef.current -= 1;
+      rerender();
+    }
+  }, [rerender]);
+  const redo = react.useCallback(() => {
+    if (positionRef.current < historyRef.current.length - 1) {
+      positionRef.current += 1;
+      rerender();
+    }
+  }, [rerender]);
+  const reset = react.useCallback(
+    (value) => {
+      historyRef.current = [value];
+      positionRef.current = 0;
+      lastUpdateTime.current = 0;
+      rerender();
+    },
+    [rerender]
+  );
+  return {
+    current,
+    canUndo: positionRef.current > 0,
+    canRedo: positionRef.current < historyRef.current.length - 1,
+    historyLength: historyRef.current.length,
+    set,
+    undo,
+    redo,
+    reset
+  };
+}
+function useSearch(text) {
+  const [query, setQuery] = react.useState("");
+  const [currentMatchIndex, setCurrentMatchIndex] = react.useState(0);
+  const [isActive, setIsActive] = react.useState(false);
+  const [options, setOptionsState] = react.useState({
+    caseSensitive: false,
+    useRegex: false,
+    searchKeys: true,
+    searchValues: true
+  });
+  const matches = react.useMemo(() => {
+    if (!query || !text) return [];
+    try {
+      const flags = options.caseSensitive ? "g" : "gi";
+      const pattern = options.useRegex ? query : escapeRegex(query);
+      const regex = new RegExp(pattern, flags);
+      const results = [];
+      const lines = text.split("\n");
+      for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
+        const line = lines[lineIdx];
+        let match;
+        regex.lastIndex = 0;
+        while ((match = regex.exec(line)) !== null) {
+          results.push({
+            line: lineIdx + 1,
+            columnStart: match.index,
+            columnEnd: match.index + match[0].length,
+            matchText: match[0]
+          });
+          if (match.index === regex.lastIndex) regex.lastIndex++;
+        }
+      }
+      return results;
+    } catch {
+      return [];
+    }
+  }, [query, text, options.caseSensitive, options.useRegex]);
+  const goToNext = react.useCallback(() => {
+    if (matches.length === 0) return;
+    setCurrentMatchIndex((i) => (i + 1) % matches.length);
+  }, [matches.length]);
+  const goToPrevious = react.useCallback(() => {
+    if (matches.length === 0) return;
+    setCurrentMatchIndex((i) => (i - 1 + matches.length) % matches.length);
+  }, [matches.length]);
+  const setOptions = react.useCallback((opts) => {
+    setOptionsState((prev) => ({ ...prev, ...opts }));
+    setCurrentMatchIndex(0);
+  }, []);
+  const open = react.useCallback(() => setIsActive(true), []);
+  const close = react.useCallback(() => {
+    setIsActive(false);
+    setQuery("");
+    setCurrentMatchIndex(0);
+  }, []);
+  return {
+    query,
+    setQuery: (q) => {
+      setQuery(q);
+      setCurrentMatchIndex(0);
+    },
+    matches,
+    currentMatchIndex,
+    totalMatches: matches.length,
+    goToNext,
+    goToPrevious,
+    options,
+    setOptions,
+    isActive,
+    open,
+    close
+  };
+}
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+// src/core/formatter.ts
+function formatJson(text, indent = 2) {
+  try {
+    const parsed = JSON.parse(text);
+    const space = indent === "tab" ? "	" : indent;
+    return JSON.stringify(parsed, null, space);
+  } catch {
+    return text;
+  }
+}
+function minifyJson(text) {
+  try {
+    return JSON.stringify(JSON.parse(text));
+  } catch {
+    return text;
+  }
+}
+function sortJsonKeys(text, order = "asc", indent = 2) {
+  try {
+    const parsed = JSON.parse(text);
+    const sorted = deepSortKeys(parsed, order);
+    const space = indent === "tab" ? "	" : indent;
+    return JSON.stringify(sorted, null, space);
+  } catch {
+    return text;
+  }
+}
+function deepSortKeys(value, order) {
+  if (Array.isArray(value)) {
+    return value.map((item) => deepSortKeys(item, order));
+  }
+  if (value !== null && typeof value === "object") {
+    const obj = value;
+    const comparator = typeof order === "function" ? order : order === "desc" ? (a, b) => b.localeCompare(a) : (a, b) => a.localeCompare(b);
+    const sorted = {};
+    const keys = Object.keys(obj).sort(comparator);
+    for (const key of keys) {
+      sorted[key] = deepSortKeys(obj[key], order);
+    }
+    return sorted;
+  }
+  return value;
+}
+function computeStats(value, text) {
+  const stats = {
+    properties: 0,
+    arrays: 0,
+    totalNodes: 0,
+    maxDepth: 0,
+    byteSize: text ? new TextEncoder().encode(text).length : 0
+  };
+  function walk(val, depth) {
+    stats.totalNodes++;
+    stats.maxDepth = Math.max(stats.maxDepth, depth);
+    if (Array.isArray(val)) {
+      stats.arrays++;
+      val.forEach((item) => walk(item, depth + 1));
+    } else if (val !== null && typeof val === "object") {
+      const keys = Object.keys(val);
+      stats.properties += keys.length;
+      keys.forEach((key) => walk(val[key], depth + 1));
+    }
+  }
+  if (value !== void 0) {
+    walk(value, 0);
+  }
+  return stats;
+}
+
+// src/themes/light.ts
+var lightTheme = {
+  name: "light",
+  bg: "#ffffff",
+  fg: "#1e1e1e",
+  border: "#e0e0e0",
+  gutterBg: "#f5f5f5",
+  gutterFg: "#999999",
+  selection: "#add6ff",
+  cursor: "#000000",
+  keyColor: "#0451a5",
+  stringColor: "#0a7e07",
+  numberColor: "#098658",
+  booleanColor: "#7a3e9d",
+  nullColor: "#808080",
+  bracketColor: "#333333",
+  bracketMatchBg: "#bad0f847",
+  errorColor: "#e51400",
+  warningColor: "#bf8803",
+  successColor: "#16825d",
+  treeLine: "#d0d0d0",
+  treeHover: "#f0f4ff",
+  treeSelected: "#e0ecff",
+  typeBadgeBg: "#eef2f7"
+};
+
+// src/themes/dark.ts
+var darkTheme = {
+  name: "dark",
+  bg: "#1e1e1e",
+  fg: "#d4d4d4",
+  border: "#3c3c3c",
+  gutterBg: "#252526",
+  gutterFg: "#858585",
+  selection: "#264f78",
+  cursor: "#ffffff",
+  keyColor: "#9cdcfe",
+  stringColor: "#ce9178",
+  numberColor: "#b5cea8",
+  booleanColor: "#569cd6",
+  nullColor: "#808080",
+  bracketColor: "#cccccc",
+  bracketMatchBg: "#0064001a",
+  errorColor: "#f14c4c",
+  warningColor: "#cca700",
+  successColor: "#89d185",
+  treeLine: "#4a4a4a",
+  treeHover: "#2a2d2e",
+  treeSelected: "#094771",
+  typeBadgeBg: "#2d2d30"
+};
+var JsonEditor = ({
+  value: externalValue,
+  onChange,
+  mode: controlledMode,
+  onModeChange,
+  schema,
+  validators,
+  validationMode = "onChange",
+  onValidate,
+  theme = "light",
+  height = 400,
+  readOnly = false,
+  searchable = true,
+  sortable = true,
+  indentation = 2,
+  lineNumbers = true,
+  bracketMatching = true,
+  maxSize,
+  virtualize = "auto",
+  onError,
+  onFocus,
+  onBlur,
+  className = "",
+  style,
+  "aria-label": ariaLabel = "JSON Editor"
+}) => {
+  const [internalMode, setInternalMode] = react.useState("code");
+  const mode = controlledMode ?? internalMode;
+  const handleModeChange = react.useCallback(
+    (newMode) => {
+      if (onModeChange) onModeChange(newMode);
+      else setInternalMode(newMode);
+    },
+    [onModeChange]
+  );
+  const parser = useJsonParser(externalValue, {
+    schema,
+    validators,
+    debounce: validationMode === "onChange" ? 300 : void 0
+  });
+  const history = useUndoRedo(parser.text, { maxHistory: 100 });
+  react.useEffect(() => {
+    if (externalValue !== void 0) {
+      const text = typeof externalValue === "string" ? externalValue : JSON.stringify(externalValue, null, indentation === "tab" ? "	" : indentation);
+      if (text !== parser.text) {
+        parser.setText(text);
+        history.reset(text);
+      }
+    }
+  }, [externalValue]);
+  const handleTextChange = react.useCallback(
+    (text) => {
+      parser.setText(text);
+      history.set(text);
+      if (onChange) {
+        try {
+          const parsed = JSON.parse(text);
+          onChange(parsed, text);
+        } catch {
+          onChange(void 0, text);
+        }
+      }
+    },
+    [parser, history, onChange]
+  );
+  const handleTreeChange = react.useCallback(
+    (newValue) => {
+      const indent = indentation === "tab" ? "	" : indentation;
+      const text = JSON.stringify(newValue, null, indent);
+      handleTextChange(text);
+    },
+    [handleTextChange, indentation]
+  );
+  react.useEffect(() => {
+    if (onValidate) {
+      onValidate(parser.validationErrors);
+    }
+  }, [parser.validationErrors, onValidate]);
+  const search = useSearch(parser.text);
+  const [cursor, setCursor] = react.useState({ line: 1, column: 1, offset: 0 });
+  const stats = react.useMemo(
+    () => parser.parsedValue !== void 0 ? computeStats(parser.parsedValue, parser.text) : null,
+    [parser.parsedValue, parser.text]
+  );
+  const resolvedTheme = react.useMemo(() => {
+    if (typeof theme === "object") return theme;
+    if (theme === "dark") return darkTheme;
+    if (theme === "auto") {
+      if (typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+        return darkTheme;
+      }
+      return lightTheme;
+    }
+    return lightTheme;
+  }, [theme]);
+  const themeVars = react.useMemo(() => {
+    const vars = {};
+    vars["--mjr-bg"] = resolvedTheme.bg;
+    vars["--mjr-fg"] = resolvedTheme.fg;
+    vars["--mjr-border"] = resolvedTheme.border;
+    vars["--mjr-gutter-bg"] = resolvedTheme.gutterBg;
+    vars["--mjr-gutter-fg"] = resolvedTheme.gutterFg;
+    vars["--mjr-selection"] = resolvedTheme.selection;
+    vars["--mjr-cursor"] = resolvedTheme.cursor;
+    vars["--mjr-key"] = resolvedTheme.keyColor;
+    vars["--mjr-string"] = resolvedTheme.stringColor;
+    vars["--mjr-number"] = resolvedTheme.numberColor;
+    vars["--mjr-boolean"] = resolvedTheme.booleanColor;
+    vars["--mjr-null"] = resolvedTheme.nullColor;
+    vars["--mjr-bracket"] = resolvedTheme.bracketColor;
+    vars["--mjr-bracket-match"] = resolvedTheme.bracketMatchBg;
+    vars["--mjr-error"] = resolvedTheme.errorColor;
+    vars["--mjr-warning"] = resolvedTheme.warningColor;
+    vars["--mjr-success"] = resolvedTheme.successColor;
+    vars["--mjr-tree-line"] = resolvedTheme.treeLine;
+    vars["--mjr-tree-hover"] = resolvedTheme.treeHover;
+    vars["--mjr-tree-selected"] = resolvedTheme.treeSelected;
+    vars["--mjr-type-badge-bg"] = resolvedTheme.typeBadgeBg;
+    return vars;
+  }, [resolvedTheme]);
+  react.useEffect(() => {
+    const handleKeyDown = (e) => {
+      const mod = e.metaKey || e.ctrlKey;
+      if (mod && e.key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        history.undo();
+        const undoneText = history.current;
+        if (undoneText !== void 0) {
+          parser.setText(undoneText);
+        }
+      }
+      if (mod && e.key === "z" && e.shiftKey) {
+        e.preventDefault();
+        history.redo();
+        const redoneText = history.current;
+        if (redoneText !== void 0) {
+          parser.setText(redoneText);
+        }
+      }
+      if (mod && e.key === "f") {
+        e.preventDefault();
+        if (searchable) search.open();
+      }
+      if (e.key === "Escape") {
+        search.close();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [history, parser, search, searchable]);
+  const heightStyle = typeof height === "number" ? `${height}px` : height;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `mjr-editor ${className}`,
+      style: { ...themeVars, height: heightStyle, ...style },
+      role: "application",
+      "aria-label": ariaLabel,
+      onFocus,
+      onBlur,
+      "data-testid": "json-editor",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Toolbar,
+          {
+            mode,
+            onModeChange: handleModeChange,
+            canUndo: history.canUndo,
+            canRedo: history.canRedo,
+            onUndo: () => {
+              history.undo();
+            },
+            onRedo: () => {
+              history.redo();
+            },
+            onFormat: () => parser.format(indentation === "tab" ? "	" : indentation),
+            searchable,
+            isSearchOpen: search.isActive,
+            onToggleSearch: () => search.isActive ? search.close() : search.open(),
+            readOnly
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mjr-editor__content", children: [
+          (mode === "code" || mode === "split") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mjr-editor__panel ${mode === "split" ? "mjr-editor__panel--half" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+            CodeEditor,
+            {
+              value: parser.text,
+              onChange: handleTextChange,
+              parseError: parser.parseError,
+              readOnly,
+              lineNumbers,
+              bracketMatching,
+              searchMatches: search.matches,
+              currentMatchIndex: search.currentMatchIndex,
+              onCursorChange: setCursor
+            }
+          ) }),
+          (mode === "tree" || mode === "split") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mjr-editor__panel ${mode === "split" ? "mjr-editor__panel--half" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+            TreeEditor,
+            {
+              value: parser.parsedValue,
+              onChange: handleTreeChange,
+              readOnly
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatusBar,
+          {
+            parseError: parser.parseError,
+            validationErrors: parser.validationErrors,
+            cursor,
+            stats
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.JsonEditor = JsonEditor;
+exports.buildPath = buildPath;
+exports.computeStats = computeStats;
+exports.darkTheme = darkTheme;
+exports.deleteByPath = deleteByPath;
+exports.formatJson = formatJson;
+exports.getByPath = getByPath;
+exports.isValidJson = isValidJson;
+exports.lightTheme = lightTheme;
+exports.minifyJson = minifyJson;
+exports.parseJson = parseJson;
+exports.parsePath = parsePath;
+exports.runCustomValidators = runCustomValidators;
+exports.setByPath = setByPath;
+exports.sortJsonKeys = sortJsonKeys;
+exports.stringifyJson = stringifyJson;
+exports.useJsonParser = useJsonParser;
+exports.useSearch = useSearch;
+exports.useUndoRedo = useUndoRedo;
+exports.validateSchema = validateSchema;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map