modern-json-react 1.0.0 → 1.1.0

package/dist/index.js

@@ -84,6 +84,179 @@ var Toolbar = ({
     )
   ] });
 };
+var SearchBar = ({
+  query,
+  onQueryChange,
+  currentMatchIndex,
+  totalMatches,
+  onNext,
+  onPrevious,
+  onClose,
+  options,
+  onOptionsChange
+}) => {
+  const inputRef = react.useRef(null);
+  react.useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (e.shiftKey) {
+          onPrevious();
+        } else {
+          onNext();
+        }
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    },
+    [onNext, onPrevious, onClose]
+  );
+  const matchLabel = totalMatches === 0 ? query ? "No results" : "" : `${currentMatchIndex + 1} of ${totalMatches}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mjr-search", role: "search", "aria-label": "Search in editor", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mjr-search__input-group", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          className: "mjr-search__icon",
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: inputRef,
+          className: "mjr-search__input",
+          type: "text",
+          value: query,
+          onChange: (e) => onQueryChange(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder: "Search...",
+          "aria-label": "Search query",
+          spellCheck: false,
+          autoComplete: "off"
+        }
+      ),
+      query && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-search__count", "aria-live": "polite", children: matchLabel })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mjr-search__options", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: `mjr-search__option-btn ${options.caseSensitive ? "mjr-search__option-btn--active" : ""}`,
+          onClick: () => onOptionsChange({ caseSensitive: !options.caseSensitive }),
+          "aria-pressed": options.caseSensitive,
+          title: "Match case",
+          "aria-label": "Match case",
+          children: "Aa"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: `mjr-search__option-btn ${options.useRegex ? "mjr-search__option-btn--active" : ""}`,
+          onClick: () => onOptionsChange({ useRegex: !options.useRegex }),
+          "aria-pressed": options.useRegex,
+          title: "Use regular expression",
+          "aria-label": "Use regular expression",
+          children: ".*"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mjr-search__nav", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "mjr-search__nav-btn",
+          onClick: onPrevious,
+          disabled: totalMatches === 0,
+          "aria-label": "Previous match",
+          title: "Previous match (Shift+Enter)",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "18 15 12 9 6 15" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "mjr-search__nav-btn",
+          onClick: onNext,
+          disabled: totalMatches === 0,
+          "aria-label": "Next match",
+          title: "Next match (Enter)",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "mjr-search__close",
+        onClick: onClose,
+        "aria-label": "Close search",
+        title: "Close (Escape)",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
 var CodeEditor = ({
   value,
   onChange,
@@ -96,6 +269,7 @@ var CodeEditor = ({
   className = ""
 }) => {
   const textareaRef = react.useRef(null);
+  const wrapperRef = react.useRef(null);
   const lines = react.useMemo(() => value.split("\n"), [value]);
   const handleChange = react.useCallback(
     (e) => {
@@ -138,6 +312,19 @@ var CodeEditor = ({
     },
     [value, onChange, readOnly]
   );
+  react.useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+    const syncScroll = () => {
+      const textarea = textareaRef.current;
+      if (textarea) {
+        textarea.scrollTop = wrapper.scrollTop;
+        textarea.scrollLeft = wrapper.scrollLeft;
+      }
+    };
+    wrapper.addEventListener("scroll", syncScroll, { passive: true });
+    return () => wrapper.removeEventListener("scroll", syncScroll);
+  }, []);
   const handleCursorMove = react.useCallback(() => {
     const textarea = textareaRef.current;
     if (!textarea) return;
@@ -148,24 +335,37 @@ var CodeEditor = ({
     const column = linesBefore[linesBefore.length - 1].length + 1;
     onCursorChange({ line, column, offset: pos });
   }, [value, onCursorChange]);
+  const matchesByLine = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    searchMatches.forEach((m, i) => {
+      if (!map.has(m.line)) map.set(m.line, []);
+      map.get(m.line).push({ match: m, isActive: i === currentMatchIndex });
+    });
+    return map;
+  }, [searchMatches, currentMatchIndex]);
+  react.useEffect(() => {
+    if (searchMatches.length === 0) return;
+    const currentMatch = searchMatches[currentMatchIndex];
+    if (!currentMatch) return;
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+    const activeEl = wrapper.querySelector(".mjr-code__match--active");
+    if (activeEl) {
+      activeEl.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    }
+  }, [currentMatchIndex, searchMatches]);
   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
-      );
+      const lineMatches = matchesByLine.get(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: lineMatches && lineMatches.length > 0 ? highlightLineWithMatches(line, lineMatches) : highlightJsonLine(line) })
+      ] }, idx);
     });
-  }, [lines, lineNumbers, parseError]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mjr-code-editor ${className}`, children: [
+  }, [lines, lineNumbers, parseError, matchesByLine]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: `mjr-code-editor ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mjr-code__display", "aria-hidden": "true", children: highlightedLines }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "textarea",
@@ -206,6 +406,36 @@ var CodeEditor = ({
     )
   ] });
 };
+function highlightLineWithMatches(line, lineMatches) {
+  const sorted = [...lineMatches].sort((a, b) => a.match.columnStart - b.match.columnStart);
+  const result = [];
+  let pos = 0;
+  let key = 0;
+  for (const { match, isActive } of sorted) {
+    if (match.columnStart > pos) {
+      const before = line.substring(pos, match.columnStart);
+      result.push(/* @__PURE__ */ jsxRuntime.jsx("span", { children: highlightJsonLine(before) }, key++));
+    }
+    const matchText = line.substring(match.columnStart, match.columnEnd);
+    const cls = isActive ? "mjr-code__match mjr-code__match--active" : "mjr-code__match";
+    result.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "mark",
+        {
+          className: cls,
+          "data-testid": isActive ? "search-match-active" : "search-match",
+          children: highlightJsonLine(matchText)
+        },
+        key++
+      )
+    );
+    pos = match.columnEnd;
+  }
+  if (pos < line.length) {
+    result.push(/* @__PURE__ */ jsxRuntime.jsx("span", { children: highlightJsonLine(line.substring(pos)) }, key++));
+  }
+  return result;
+}
 function highlightJsonLine(line) {
   const tokens = [];
   let i = 0;
@@ -246,7 +476,7 @@ function highlightJsonLine(line) {
     }
     if (ch === "-" || ch >= "0" && ch <= "9") {
       let num = "";
-      while (i < line.length && /[\d.eE+\-]/.test(line[i])) {
+      while (i < line.length && /[\d.eE+-]/.test(line[i])) {
         num += line[i];
         i++;
       }
@@ -256,26 +486,36 @@ function highlightJsonLine(line) {
       continue;
     }
     if (line.substring(i, i + 4) === "true") {
-      tokens.push(/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-syn-boolean", children: "true" }, key++));
+      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++));
+      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++));
+      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++));
+      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++));
+    tokens.push(
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-syn-punctuation", children: ch }, key++)
+    );
     i++;
   }
   return tokens;
@@ -288,6 +528,14 @@ var TYPE_LABELS = {
   object: "obj",
   array: "arr"
 };
+var TYPE_COLORS = {
+  string: "mjr-badge--string",
+  number: "mjr-badge--number",
+  boolean: "mjr-badge--boolean",
+  null: "mjr-badge--null",
+  object: "mjr-badge--object",
+  array: "mjr-badge--array"
+};
 var TreeNodeComponent = ({
   node,
   onToggle,
@@ -295,7 +543,9 @@ var TreeNodeComponent = ({
   onKeyChange,
   onDelete,
   onTypeChange,
-  readOnly
+  readOnly,
+  searchQuery = "",
+  searchCaseSensitive = false
 }) => {
   const [isEditing, setIsEditing] = react.useState(false);
   const [editValue, setEditValue] = react.useState("");
@@ -303,9 +553,7 @@ var TreeNodeComponent = ({
   const [editKey, setEditKey] = react.useState("");
   const isExpandable = node.type === "object" || node.type === "array";
   const handleToggle = react.useCallback(() => {
-    if (isExpandable) {
-      onToggle(node.id);
-    }
+    if (isExpandable) onToggle(node.id);
   }, [isExpandable, node.id, onToggle]);
   const handleStartEdit = react.useCallback(() => {
     if (readOnly || isExpandable) return;
@@ -346,17 +594,80 @@ var TreeNodeComponent = ({
   }, [editKey, node.key, node.path, onKeyChange]);
   const handleTypeChange = react.useCallback(
     (e) => {
-      const newType = e.target.value;
-      onTypeChange(node.path, newType);
+      onTypeChange(node.path, e.target.value);
     },
     [node.path, onTypeChange]
   );
+  const renderArrow = () => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      className: `mjr-tree__arrow ${isExpandable ? "mjr-tree__arrow--expandable" : ""}`,
+      onClick: handleToggle,
+      tabIndex: isExpandable ? 0 : -1,
+      "aria-hidden": !isExpandable,
+      "aria-label": isExpandable ? node.expanded ? "Collapse" : "Expand" : void 0,
+      children: isExpandable ? /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: `mjr-tree__chevron ${node.expanded ? "mjr-tree__chevron--open" : ""}`,
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M4.5 2.5L8 6L4.5 9.5",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-tree__arrow-spacer" })
+    }
+  );
+  const renderKey = () => {
+    if (isEditingKey) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          className: "mjr-tree__input mjr-tree__input--key",
+          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"
+        }
+      );
+    }
+    const keyStr = String(node.key);
+    const keyContent = searchQuery ? highlightText(keyStr, searchQuery, searchCaseSensitive) : keyStr;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: `mjr-tree__key ${typeof node.key !== "number" && !readOnly ? "mjr-tree__key--editable" : ""}`,
+        onDoubleClick: handleKeyEdit,
+        "data-testid": `key-${node.path}`,
+        children: typeof node.key === "number" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-tree__index", children: node.key }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          '"',
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-tree__key-text", children: keyContent }),
+          '"'
+        ] })
+      }
+    );
+  };
   const renderValue = () => {
     if (isEditing) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
-          className: "mjr-tree-node__edit-input",
+          className: "mjr-tree__input mjr-tree__input--value",
           value: editValue,
           onChange: (e) => setEditValue(e.target.value),
           onBlur: handleFinishEdit,
@@ -371,31 +682,79 @@ var TreeNodeComponent = ({
       );
     }
     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",
-          ")"
+      const open = node.type === "object" ? "{" : "[";
+      const close = node.type === "object" ? "}" : "]";
+      return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mjr-tree__preview", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-tree__bracket", children: open }),
+        !node.expanded && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mjr-tree__ellipsis", children: [
+            node.childCount,
+            " ",
+            node.childCount === 1 ? "item" : "items"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-tree__bracket", children: close })
         ] })
       ] });
     }
+    const display = formatDisplayValue(node.value, node.type);
+    const displayContent = searchQuery ? highlightText(display, searchQuery, searchCaseSensitive) : display;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        className: `mjr-tree-node__value mjr-tree-node__value--${node.type}`,
+        className: `mjr-tree__value mjr-tree__value--${node.type} ${!readOnly ? "mjr-tree__value--editable" : ""}`,
         onDoubleClick: handleStartEdit,
         role: "button",
         tabIndex: 0,
-        "aria-label": `Value: ${formatDisplayValue(node.value, node.type)}. Double-click to edit.`,
+        "aria-label": `Value: ${display}. Double-click to edit.`,
         "data-testid": `value-${node.path}`,
-        children: formatDisplayValue(node.value, node.type)
+        children: displayContent
       }
     );
   };
+  const renderBadge = () => {
+    const colorClass = TYPE_COLORS[node.type];
+    if (!readOnly) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "select",
+        {
+          className: `mjr-tree__badge ${colorClass}`,
+          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))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `mjr-tree__badge mjr-tree__badge--ro ${colorClass}`, children: TYPE_LABELS[node.type] });
+  };
+  const renderActions = () => {
+    if (readOnly) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mjr-tree__actions", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "mjr-tree__delete",
+        onClick: () => onDelete(node.path),
+        "aria-label": `Delete ${node.key}`,
+        title: "Delete",
+        "data-testid": `delete-${node.path}`,
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M9 3L3 9M3 3l6 6",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        ) })
+      }
+    ) });
+  };
+  const renderClosingBracket = () => {
+    if (!isExpandable || !node.expanded) return null;
+    const close = node.type === "object" ? "}" : "]";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mjr-tree__close-bracket", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-tree__bracket", children: close }) });
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -404,85 +763,67 @@ var TreeNodeComponent = ({
       "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);
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mjr-tree__row", children: [
+          renderArrow(),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mjr-tree__content", children: [
+            renderKey(),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mjr-tree__colon", "aria-hidden": "true", children: ":" }),
+            renderValue(),
+            renderBadge()
+          ] }),
+          renderActions()
+        ] }),
+        isExpandable && node.expanded && node.children.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", className: "mjr-tree__children", children: [
+          node.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+            TreeNodeComponent,
+            {
+              node: child,
+              onToggle,
+              onValueChange,
+              onKeyChange,
+              onDelete,
+              onTypeChange,
+              readOnly,
+              searchQuery,
+              searchCaseSensitive
             },
-            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
-        )) })
+            child.id
+          )),
+          renderClosingBracket()
+        ] }),
+        isExpandable && node.expanded && node.children.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mjr-tree__children", children: renderClosingBracket() })
       ]
     }
   );
 };
+function highlightText(text, query, caseSensitive) {
+  if (!query || !text) return text;
+  try {
+    const flags = caseSensitive ? "g" : "gi";
+    const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const regex = new RegExp(`(${escaped})`, flags);
+    const parts = text.split(regex);
+    if (parts.length === 1) return text;
+    return parts.map((part, i) => {
+      if (regex.test(part)) {
+        regex.lastIndex = 0;
+        return /* @__PURE__ */ jsxRuntime.jsx("mark", { className: "mjr-tree__match", "data-testid": "tree-search-match", children: part }, i);
+      }
+      return part;
+    });
+  } catch {
+    return text;
+  }
+}
 function formatDisplayValue(value, type) {
   if (type === "null") return "null";
-  if (type === "string") return `"${String(value)}"`;
+  if (type === "string") {
+    const str = String(value);
+    if (str.length > 80) return `"${str.slice(0, 77)}..."`;
+    return `"${str}"`;
+  }
   if (type === "boolean") return String(value);
   if (type === "number") return String(value);
   return "";
@@ -552,7 +893,7 @@ function deleteBySegments(current, segments, index) {
       return current.filter((_, i) => i !== arrIndex);
     }
     if (typeof current === "object" && current !== null) {
-      const { [segment2]: _, ...rest } = current;
+      const { [segment2]: _omit, ...rest } = current;
       return rest;
     }
     return current;
@@ -591,6 +932,8 @@ var TreeEditor = ({
   value,
   onChange,
   readOnly,
+  searchQuery = "",
+  searchCaseSensitive = false,
   className = ""
 }) => {
   const [expandedPaths, setExpandedPaths] = react.useState(/* @__PURE__ */ new Set(["$"]));
@@ -601,18 +944,14 @@ var TreeEditor = ({
     setExpandedPaths((prev) => {
       const next = new Set(prev);
       const path = id;
-      if (next.has(path)) {
-        next.delete(path);
-      } else {
-        next.add(path);
-      }
+      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);
+      onChange(setByPath(value, path, newValue));
     },
     [value, onChange]
   );
@@ -630,8 +969,7 @@ var TreeEditor = ({
   );
   const handleDelete = react.useCallback(
     (path) => {
-      const updated = deleteByPath(value, path);
-      onChange(updated);
+      onChange(deleteByPath(value, path));
     },
     [value, onChange]
   );
@@ -645,8 +983,7 @@ var TreeEditor = ({
         object: {},
         array: []
       };
-      const updated = setByPath(value, path, defaults[newType]);
-      onChange(updated);
+      onChange(setByPath(value, path, defaults[newType]));
     },
     [value, onChange]
   );
@@ -659,19 +996,39 @@ var TreeEditor = ({
       const obj = value;
       let newKey = "newKey";
       let counter = 1;
-      while (newKey in obj) {
-        newKey = `newKey${counter++}`;
-      }
+      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.jsx("div", { className: `mjr-tree-editor mjr-tree-editor--empty ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mjr-tree__empty", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", opacity: "0.3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M3 7V17C3 18.1 3.9 19 5 19H19C20.1 19 21 18.1 21 17V7C21 5.9 20.1 5 19 5H5C3.9 5 3 5.9 3 7Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M7 9H17M7 13H13",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No valid JSON to display" }),
+      !readOnly && /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "mjr-tree__add-btn", onClick: () => onChange({}), children: [
+        "+",
+        " Create empty object"
+      ] })
+    ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -690,16 +1047,21 @@ var TreeEditor = ({
             onKeyChange: handleKeyChange,
             onDelete: handleDelete,
             onTypeChange: handleTypeChange,
-            readOnly
+            readOnly,
+            searchQuery,
+            searchCaseSensitive
           }
         ),
-        !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+        !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
-            className: "mjr-tree-editor__add-root",
+            className: "mjr-tree__add-btn mjr-tree__add-btn--root",
             onClick: handleAddProperty,
             "data-testid": "add-property",
-            children: "+ Add property"
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 2v8M2 6h8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
+              "Add property"
+            ]
           }
         )
       ]
@@ -727,17 +1089,13 @@ function buildTree(value, path, key, depth, expandedPaths) {
     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);
+      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);
+      node.children = arr.map((item, i) => buildTree(item, `${path}[${i}]`, i, depth + 1, expandedPaths)).filter(Boolean);
     }
   }
   return node;
@@ -757,11 +1115,8 @@ function getNestedValue(obj, path) {
   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];
-    }
+    if (Array.isArray(current)) current = current[parseInt(seg, 10)];
+    else if (typeof current === "object") current = current[seg];
   }
   return current;
 }
@@ -975,7 +1330,13 @@ function validateSchema(value, schema, path = "$") {
       const re = new RegExp(schema.pattern);
       if (!re.test(value)) {
         errors.push(
-          makeError(`String must match pattern "${schema.pattern}"`, path, "pattern", schema.pattern, value)
+          makeError(
+            `String must match pattern "${schema.pattern}"`,
+            path,
+            "pattern",
+            schema.pattern,
+            value
+          )
         );
       }
     }
@@ -1015,19 +1376,37 @@ function validateSchema(value, schema, path = "$") {
     }
     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)
+        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)
+        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)
+        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) {
@@ -1326,6 +1705,27 @@ function useSearch(text) {
 function escapeRegex(str) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
+function useContainerWidth(ref) {
+  const [width, setWidth] = react.useState(0);
+  const updateWidth = react.useCallback(() => {
+    if (ref.current) {
+      setWidth(ref.current.clientWidth);
+    }
+  }, [ref]);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    updateWidth();
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(() => updateWidth());
+      observer.observe(el);
+      return () => observer.disconnect();
+    }
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, [ref, updateWidth]);
+  return width;
+}
 
 // src/core/formatter.ts
 function formatJson(text, indent = 2) {
@@ -1447,6 +1847,8 @@ var darkTheme = {
   treeSelected: "#094771",
   typeBadgeBg: "#2d2d30"
 };
+var BREAKPOINT_SM = 480;
+var BREAKPOINT_MD = 768;
 var JsonEditor = ({
   value: externalValue,
   onChange,
@@ -1460,13 +1862,13 @@ var JsonEditor = ({
   height = 400,
   readOnly = false,
   searchable = true,
-  sortable = true,
+  sortable: _sortable = true,
   indentation = 2,
   lineNumbers = true,
   bracketMatching = true,
-  maxSize,
-  virtualize = "auto",
-  onError,
+  maxSize: _maxSize,
+  virtualize: _virtualize = "auto",
+  onError: _onError,
   onFocus,
   onBlur,
   className = "",
@@ -1597,11 +1999,18 @@ var JsonEditor = ({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [history, parser, search, searchable]);
+  const containerRef = react.useRef(null);
+  const containerWidth = useContainerWidth(containerRef);
+  const isSmall = containerWidth > 0 && containerWidth <= BREAKPOINT_SM;
+  const isMedium = containerWidth > 0 && containerWidth <= BREAKPOINT_MD;
+  const sizeClass = isSmall ? "mjr-editor--sm" : isMedium ? "mjr-editor--md" : "";
+  const shouldStackSplit = mode === "split" && isMedium;
   const heightStyle = typeof height === "number" ? `${height}px` : height;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `mjr-editor ${className}`,
+      ref: containerRef,
+      className: `mjr-editor ${sizeClass} ${className}`.trim(),
       style: { ...themeVars, height: heightStyle, ...style },
       role: "application",
       "aria-label": ariaLabel,
@@ -1629,30 +2038,53 @@ var JsonEditor = ({
             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
-            }
-          ) })
-        ] }),
+        search.isActive && /* @__PURE__ */ jsxRuntime.jsx(
+          SearchBar,
+          {
+            query: search.query,
+            onQueryChange: search.setQuery,
+            matches: search.matches,
+            currentMatchIndex: search.currentMatchIndex,
+            totalMatches: search.totalMatches,
+            onNext: search.goToNext,
+            onPrevious: search.goToPrevious,
+            onClose: search.close,
+            options: search.options,
+            onOptionsChange: search.setOptions
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `mjr-editor__content ${shouldStackSplit ? "mjr-editor__content--responsive-stack" : ""}`,
+            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: isSmall ? false : 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,
+                  searchQuery: search.isActive ? search.query : "",
+                  searchCaseSensitive: search.options.caseSensitive
+                }
+              ) })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           StatusBar,
           {
@@ -1683,6 +2115,7 @@ exports.runCustomValidators = runCustomValidators;
 exports.setByPath = setByPath;
 exports.sortJsonKeys = sortJsonKeys;
 exports.stringifyJson = stringifyJson;
+exports.useContainerWidth = useContainerWidth;
 exports.useJsonParser = useJsonParser;
 exports.useSearch = useSearch;
 exports.useUndoRedo = useUndoRedo;