@thebuoyant-tsdev/mui-ts-library 3.6.1 → 3.7.0

package/README.de.md

@@ -12,19 +12,35 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
 
 ## Komponenten
 
-| Komponente | Beschreibung | Docs |
+11 produktionsreife Komponenten in drei Kategorien. Jede verlinkt zu einer interaktiven Live-Demo und einem vollständigen Manual mit allen Props, Typen und Mustern.
+
+### Interaktive UI
+
+| Komponente | Wofür | Ausprobieren |
+|---|---|---|
+| [`GanttChart`](#ganttchart) | Drag-and-Drop-Projekt-Timelines mit Meilensteinen, Abhängigkeiten und CSV-Export | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-ganttchart--default) · [Docs](user-manuals/GanttChart.de.md) |
+| [`TagSelection`](#tagselection) | Multi-Tag-Autocomplete mit freier Tag-Erstellung und Suchergebnis-Highlighting | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-tagselection--default) · [Docs](user-manuals/TagSelection.de.md) |
+| [`PasswordStrengthMeter`](#passwordstrengthmeter) | Echtzeit-Stärke-Feedback mit eingebautem sicheren Passwort-Generator | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-passwordstrengthmeter--default) · [Docs](user-manuals/PasswordStrengthMeter.de.md) |
+
+### Code-Editoren
+
+| Komponente | Wofür | Ausprobieren |
 |---|---|---|
-| [`GanttChart`](#ganttchart) | Projekt-Timeline mit hierarchischen Aufgaben, Meilensteinen, Drag & Drop, Ctrl / Cmd ⌘+Scroll-Zoom, Heute-Chip, Assignee-Spalte, CSV-Export und integrierten CRUD-Dialogen | [Vollständiges Manual →](user-manuals/GanttChart.de.md) |
-| [`TagSelection`](#tagselection) | Multi-Tag-Auswahlfeld mit Autocomplete, freier Tag-Erstellung, Overflow-Chips und MUI-Theme-Farben | [Vollständiges Manual →](user-manuals/TagSelection.de.md) |
-| [`PasswordStrengthMeter`](#passwordstrengthmeter) | Passwort-Eingabe mit animiertem Stärke-Meter, Confirm-Feld mit Match-Validierung, eigenen Anforderungen und eingebautem sicheren Passwort-Generator | [Vollständiges Manual →](user-manuals/PasswordStrengthMeter.de.md) |
-| [`RichTextEditor`](#richtexteditor) | WYSIWYG-Editor (TipTap v3) mit Toolbar, Link-Dialog, Textfarbe, Hervorhebung, Wörter-Zähler, Vollbild-Modus, Markdown-Einfügen, Tabellen-Bearbeitung, Bild-Embed und Emoji-Picker | [Vollständiges Manual →](user-manuals/RichTextEditor.de.md) |
-| [`SqlEditor`](#sqleditor) | SQL-Code-Editor (CodeMirror 6) mit Syntax-Highlighting, Multi-Dialekt, Autocomplete, Linting und `Cmd+Enter`-Ausführen-Shortcut | [Vollständiges Manual →](user-manuals/SqlEditor.de.md) |
-| [`JsonEditor`](#jsoneditor) | JSON-Code-Editor (CodeMirror 6) mit Echtzeit-Validierung, Format- und Komprimieren-Schaltfläche sowie optionaler Minimap | [Vollständiges Manual →](user-manuals/JsonEditor.de.md) |
-| [`SunburstChart`](#sunburstchart) | D3 v7 hierarchisches Chart — konzentrische Ringe, Ctrl / Cmd ⌘+Click Drill-Down, Ctrl / Cmd ⌘+Scroll Zoom, Donut-Modus, eigene Farben, MUI-Theme-Integration. Erste der D3-Chart-Familie. | [Vollständiges Manual →](user-manuals/SunburstChart.de.md) |
-| [`ChordChart`](#chordchart) | D3 v7 Fluss-Chart — Arc-Gruppen, Bänder, Hover-Highlight, Ctrl / Cmd ⌘+Scroll-Zoom, gerichtet/ungerichtet, MUI-Theme-Integration | [Vollständiges Manual →](user-manuals/ChordChart.de.md) |
-| [`RadialTreeChart`](#radialtreechart) | D3 v7 radialer Baum — Knoten auf konzentrischen Ringen, MUI-Icons, Ctrl / Cmd ⌘+Click Drill-Down, Ctrl / Cmd ⌘+Scroll Zoom, MUI-Theme-Integration | [Vollständiges Manual →](user-manuals/RadialTreeChart.de.md) |
-| [`CirclePackingChart`](#circlepackingchart) | D3 v7 Circle Packing — verschachtelte Kreise, animierter D3-Zoom, Ctrl / Cmd ⌘+Scroll-Zoom, Tiefen-Gradient oder Palette, MUI-Theme-Integration | [Vollständiges Manual →](user-manuals/CirclePackingChart.de.md) |
-| [`HorizontalTreeChart`](#horizontaltreechart) | D3 v7 Baum-Chart — 4 Orientierungen (LR/RL/TB/BT), geschwungene Links, Drill-Down, Ctrl / Cmd ⌘+Scroll-Zoom, MUI-Icons und Theme-Integration | [Vollständiges Manual →](user-manuals/HorizontalTreeChart.de.md) |
+| [`RichTextEditor`](#richtexteditor) | WYSIWYG-Editing (TipTap v3) mit Tabellen, Bildern und Emoji-Picker | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-richtexteditor--default) · [Docs](user-manuals/RichTextEditor.de.md) |
+| [`SqlEditor`](#sqleditor) | SQL-Editing (CodeMirror 6) mit dialekt-bewusstem Autocomplete und Query-Verlauf | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-sqleditor--default) · [Docs](user-manuals/SqlEditor.de.md) |
+| [`JsonEditor`](#jsoneditor) | JSON-Editing (CodeMirror 6) mit Schema-Validierung, Folding und Path Finder | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-jsoneditor--default) · [Docs](user-manuals/JsonEditor.de.md) |
+
+### D3-Datenvisualisierung
+
+| Komponente | Wofür | Ausprobieren |
+|---|---|---|
+| [`SunburstChart`](#sunburstchart) | Hierarchische Daten als konzentrische Ringe — Drill-Down mit `Ctrl+Click` | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-sunburstchart--default) · [Docs](user-manuals/SunburstChart.de.md) |
+| [`ChordChart`](#chordchart) | Fluss und Beziehungen zwischen benannten Gruppen als kreisförmiges Diagramm | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-chordchart--default) · [Docs](user-manuals/ChordChart.de.md) |
+| [`RadialTreeChart`](#radialtreechart) | Org-Charts und Taxonomien als radialer Baum, mit Drill-Down | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-radialtreechart--default) · [Docs](user-manuals/RadialTreeChart.de.md) |
+| [`CirclePackingChart`](#circlepackingchart) | Verschachtelte Kreise mit animiertem Zoom — Speicher und Hierarchie auf einen Blick | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-circlepackingchart--default) · [Docs](user-manuals/CirclePackingChart.de.md) |
+| [`HorizontalTreeChart`](#horizontaltreechart) | Entscheidungsbäume und Hierarchien in 4 Orientierungen (LR/RL/TB/BT) | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-horizontaltreechart--default) · [Docs](user-manuals/HorizontalTreeChart.de.md) |
+
+Alle Charts teilen sich Ctrl / Cmd ⌘+Scroll-Zoom und vollständige MUI-Theme-Integration (Dark Mode inklusive).
 
 ---
 
@@ -311,8 +327,29 @@ import type {
 
 ---
 
+## Versionierung & Abwärtskompatibilität
+
+Dieses Projekt folgt [Semantic Versioning](https://semver.org/). In der Praxis bedeutet das:
+
+- **Patch** (`3.7.0` → `3.7.1`) — nur Bugfixes, jederzeit gefahrlos aktualisierbar.
+- **Minor** (`3.6.0` → `3.7.0`) — neue Features, vollständig abwärtskompatibel.
+- **Major** (`2.x` → `3.0.0`) — Breaking Changes, explizit im [Changelog](#changelog) gekennzeichnet.
+
+**Bisher nur ein Breaking Release:** [`3.0.0`](#300--2026-06-15--breaking-changes) hat `ConfirmDialog` / `ConfirmDialogProvider` / `useConfirm` entfernt und die Signatur von `TagSelection`s `onTagCreate` geändert. Jedes Release seitdem war additiv.
+
+**TypeScript-Hinweis:** Translation-Typen (z.B. `TagSelectionTranslation`, `SqlEditorTranslation`) bekommen mit der Zeit neue optionale Felder, wenn Features hinzukommen — ein `Partial<...>`-Objekt direkt an die `translation`-Prop zu übergeben (das in dieser README durchgängig verwendete Muster) ist immer vorwärtskompatibel. Eine eigenständige Variable, die gegen den vollen benannten Typ deklariert wird, bleibt nur kompatibel, solange neue Felder optional sind — was seit `3.6.1` der Fall ist (siehe [Changelog](#361--2026-06-22)).
+
+---
+
 ## Changelog
 
+### [3.7.0] — 2026-06-23
+
+**JsonEditor — Folding, Path Finder und Schema-Validierung**
+- Neu: `showFolding` (Fold-Gutter für Objects/Arrays), `enablePathFinder` (`Ctrl+Click` auf einen Wert kopiert den JSON-Path), und `schema`-Prop (strukturelle Validierung mit Inline-Fehler-Diagnostics — Typ, Required, Enum, verschachtelte Strukturen).
+
+---
+
 ### [3.6.1] — 2026-06-22
 
 **⚠️ TypeScript-Kompatibilitäts-Fix**

package/README.md

@@ -12,19 +12,35 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
 
 ## Components
 
-| Component | Description | Docs |
+11 production-ready components across three categories. Each links to a live, interactive demo and a full manual covering every prop, type, and pattern.
+
+### Interactive UI
+
+| Component | What it's for | Try it |
+|---|---|---|
+| [`GanttChart`](#ganttchart) | Drag-and-drop project timelines with milestones, dependencies, and CSV export | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-ganttchart--default) · [Docs](user-manuals/GanttChart.md) |
+| [`TagSelection`](#tagselection) | Multi-tag autocomplete with free-form tag creation and search highlighting | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-tagselection--default) · [Docs](user-manuals/TagSelection.md) |
+| [`PasswordStrengthMeter`](#passwordstrengthmeter) | Real-time strength feedback with a built-in secure password generator | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-passwordstrengthmeter--default) · [Docs](user-manuals/PasswordStrengthMeter.md) |
+
+### Code Editors
+
+| Component | What it's for | Try it |
 |---|---|---|
-| [`GanttChart`](#ganttchart) | Project timeline with hierarchical tasks, milestones, drag & drop, Ctrl / Cmd ⌘+Scroll zoom, today chip, assignee column, CSV export, and built-in CRUD dialogs | [Full Manual →](user-manuals/GanttChart.md) |
-| [`TagSelection`](#tagselection) | Multi-tag selector with autocomplete, free tag creation, overflow chips, and MUI theme colors | [Full Manual →](user-manuals/TagSelection.md) |
-| [`PasswordStrengthMeter`](#passwordstrengthmeter) | Password input with animated strength meter, segmented bar, custom requirements, confirm field with match validation, and built-in secure password generator | [Full Manual →](user-manuals/PasswordStrengthMeter.md) |
-| [`RichTextEditor`](#richtexteditor) | WYSIWYG editor (TipTap v3) with toolbar, link dialog, text color, highlight, word count, fullscreen mode, Markdown paste, table editing, image embed, and emoji picker | [Full Manual →](user-manuals/RichTextEditor.md) |
-| [`SqlEditor`](#sqleditor) | SQL code editor (CodeMirror 6) with syntax highlighting, multi-dialect, autocomplete, linting, and `Cmd+Enter` execute shortcut | [Full Manual →](user-manuals/SqlEditor.md) |
-| [`JsonEditor`](#jsoneditor) | JSON code editor (CodeMirror 6) with real-time validation, Format, Compact buttons, and optional minimap | [Full Manual →](user-manuals/JsonEditor.md) |
-| [`SunburstChart`](#sunburstchart) | D3 v7 hierarchical chart — concentric rings, Ctrl / Cmd ⌘+Click drill-down, Ctrl / Cmd ⌘+Scroll zoom, donut mode, MUI theme integration | [Full Manual →](user-manuals/SunburstChart.md) |
-| [`ChordChart`](#chordchart) | D3 v7 flow chart — arc groups, ribbons, hover highlight, Ctrl / Cmd ⌘+Scroll zoom, directed/undirected, MUI theme integration | [Full Manual →](user-manuals/ChordChart.md) |
-| [`RadialTreeChart`](#radialtreechart) | D3 v7 radial tree — hierarchical nodes on concentric rings, MUI icons, Ctrl / Cmd ⌘+Click drill-down, Ctrl / Cmd ⌘+Scroll zoom, MUI theme integration | [Full Manual →](user-manuals/RadialTreeChart.md) |
-| [`CirclePackingChart`](#circlepackingchart) | D3 v7 circle packing — nested circles, animated D3 zoom, Ctrl / Cmd ⌘+Scroll zoom, depth gradient or palette, MUI theme integration | [Full Manual →](user-manuals/CirclePackingChart.md) |
-| [`HorizontalTreeChart`](#horizontaltreechart) | D3 v7 tree chart — 4 orientations (LR/RL/TB/BT), curved links, drill-down, Ctrl / Cmd ⌘+Scroll zoom, MUI icons and theme integration | [Full Manual →](user-manuals/HorizontalTreeChart.md) |
+| [`RichTextEditor`](#richtexteditor) | WYSIWYG editing (TipTap v3) with tables, images, and an emoji picker | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-richtexteditor--default) · [Docs](user-manuals/RichTextEditor.md) |
+| [`SqlEditor`](#sqleditor) | SQL editing (CodeMirror 6) with dialect-aware autocomplete and query history | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-sqleditor--default) · [Docs](user-manuals/SqlEditor.md) |
+| [`JsonEditor`](#jsoneditor) | JSON editing (CodeMirror 6) with schema validation, folding, and a path finder | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-jsoneditor--default) · [Docs](user-manuals/JsonEditor.md) |
+
+### D3 Data Visualization
+
+| Component | What it's for | Try it |
+|---|---|---|
+| [`SunburstChart`](#sunburstchart) | Hierarchical data as concentric rings — drill down with `Ctrl+Click` | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-sunburstchart--default) · [Docs](user-manuals/SunburstChart.md) |
+| [`ChordChart`](#chordchart) | Flow and relationships between named groups as a circular diagram | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-chordchart--default) · [Docs](user-manuals/ChordChart.md) |
+| [`RadialTreeChart`](#radialtreechart) | Org charts and taxonomies as a radial tree, with drill-down | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-radialtreechart--default) · [Docs](user-manuals/RadialTreeChart.md) |
+| [`CirclePackingChart`](#circlepackingchart) | Nested circles with animated zoom — storage and hierarchy at a glance | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-circlepackingchart--default) · [Docs](user-manuals/CirclePackingChart.md) |
+| [`HorizontalTreeChart`](#horizontaltreechart) | Decision trees and hierarchies in 4 orientations (LR/RL/TB/BT) | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-horizontaltreechart--default) · [Docs](user-manuals/HorizontalTreeChart.md) |
+
+All charts share Ctrl / Cmd ⌘+Scroll zoom and full MUI theme integration (dark mode included).
 
 ---
 
@@ -311,8 +327,29 @@ import type {
 
 ---
 
+## Versioning & Compatibility
+
+This project follows [Semantic Versioning](https://semver.org/). In practice:
+
+- **Patch** (`3.7.0` → `3.7.1`) — bug fixes only, always safe to upgrade.
+- **Minor** (`3.6.0` → `3.7.0`) — new features, fully backwards compatible.
+- **Major** (`2.x` → `3.0.0`) — breaking changes, called out explicitly in the [Changelog](#changelog).
+
+**Only one breaking release to date:** [`3.0.0`](#300--2026-06-15--breaking-changes) removed `ConfirmDialog` / `ConfirmDialogProvider` / `useConfirm` and changed `TagSelection`'s `onTagCreate` signature. Every other release since has been additive.
+
+**TypeScript note:** translation types (e.g. `TagSelectionTranslation`, `SqlEditorTranslation`) gain new optional fields over time as features are added — passing a `Partial<...>` object straight to the `translation` prop (the pattern used throughout this README) is always forward-compatible. Declaring a standalone variable typed against the full named type only stays compatible if new fields are optional, which they are as of `3.6.1` (see [Changelog](#361--2026-06-22)).
+
+---
+
 ## Changelog
 
+### [3.7.0] — 2026-06-23
+
+**JsonEditor — Folding, Path Finder, and Schema Validation**
+- New `showFolding` (fold gutter for objects/arrays), `enablePathFinder` (`Ctrl+Click` a value to copy its JSON path), and `schema` prop (structural validation with inline error diagnostics — type, required, enum, nested shapes).
+
+---
+
 ### [3.6.1] — 2026-06-22
 
 **⚠️ TypeScript Compatibility Fix**

package/dist/components/json-editor/JsonEditor.d.ts

@@ -1,2 +1,2 @@
 import { type JsonEditorProps } from "./JsonEditor.types";
-export declare function JsonEditor({ value, onChange, onValidChange, placeholder, height, width, disabled, readonly, error, helperText, name, indent, showLineNumbers, showLineColumn, showMinimap, showValidation, toolbarConfig, translation, highlightColors, onBlur, onFocus, }: JsonEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function JsonEditor({ value, onChange, onValidChange, placeholder, height, width, disabled, readonly, error, helperText, name, indent, schema, showLineNumbers, showLineColumn, showMinimap, showFolding, showValidation, enablePathFinder, toolbarConfig, translation, highlightColors, onBlur, onFocus, onPathCopy, }: JsonEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/json-editor/JsonEditor.js

@@ -15,31 +15,31 @@ function h(e) {
 		return !1;
 	}
 }
-function g({ value: g, onChange: _, onValidChange: v, placeholder: y, height: b, width: x, disabled: S = !1, readonly: C = !1, error: w = !1, helperText: T, name: E, indent: D = 2, showLineNumbers: O = !0, showLineColumn: k = !0, showMinimap: A = !1, showValidation: j = !1, toolbarConfig: M, translation: N, highlightColors: P, onBlur: F, onFocus: I }) {
-	let L = {
+function g({ value: g, onChange: _, onValidChange: v, placeholder: y, height: b, width: x, disabled: S = !1, readonly: C = !1, error: w = !1, helperText: T, name: E, indent: D = 2, schema: O, showLineNumbers: k = !0, showLineColumn: A = !0, showMinimap: j = !1, showFolding: M = !0, showValidation: N = !1, enablePathFinder: P = !0, toolbarConfig: F, translation: I, highlightColors: L, onBlur: R, onFocus: ee, onPathCopy: z }) {
+	let B = {
 		...t,
-		...N
-	}, R = {
+		...I
+	}, V = {
 		...e,
-		...M
-	}, z = a(b), B = a(x), V = z === "auto", H = V ? void 0 : z ?? 300, U = s(null), [W, G] = c(null), [K, q] = c({
+		...F
+	}, H = a(b), U = a(x), W = H === "auto", G = W ? void 0 : H ?? 300, K = s(null), [q, J] = c(null), [Y, X] = c({
 		line: 1,
 		col: 1
-	}), [J, Y] = c(() => h(g ?? "")), X = o((e) => {
-		U.current = e, G(e);
-	}, []), Z = o((e, t) => {
-		q({
+	}), [Z, Q] = c(() => h(g ?? "")), $ = o((e) => {
+		K.current = e, J(e);
+	}, []), te = o((e, t) => {
+		X({
 			line: e,
 			col: t
 		});
-	}, []), Q = o((e) => {
+	}, []), ne = o((e) => {
 		let t = h(e);
-		Y(t), v?.(t), _?.(e);
-	}, [_, v]), $ = k || j || !!T;
+		Q(t), v?.(t), _?.(e);
+	}, [_, v]), re = A || N || !!T;
 	return /* @__PURE__ */ m(l, {
 		sx: {
-			width: B ?? "100%",
-			...V ? {
+			width: U ?? "100%",
+			...W ? {
 				display: "flex",
 				flexDirection: "column",
 				flex: 1
@@ -52,7 +52,7 @@ function g({ value: g, onChange: _, onValidChange: v, placeholder: y, height: b,
 					display: "flex",
 					flexDirection: "column",
 					overflow: "hidden",
-					...V ? { flex: 1 } : { height: H },
+					...W ? { flex: 1 } : { height: G },
 					borderColor: w ? "error.main" : void 0,
 					"&:focus-within": {
 						borderColor: w ? "error.main" : "primary.main",
@@ -60,35 +60,39 @@ function g({ value: g, onChange: _, onValidChange: v, placeholder: y, height: b,
 					}
 				},
 				children: [!C && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(r, {
-					editorView: W,
-					toolbarConfig: R,
-					translation: L,
+					editorView: q,
+					toolbarConfig: V,
+					translation: B,
 					indent: D,
 					disabled: S
 				}), /* @__PURE__ */ p(u, {})] }), /* @__PURE__ */ p(n, {
 					value: g,
-					onChange: Q,
+					onChange: ne,
 					placeholder: y,
 					disabled: S,
 					readonly: C,
-					showLineNumbers: O,
-					showMinimap: A,
-					highlightColors: P,
-					onViewReady: X,
-					onCursorChange: Z,
-					onBlur: F,
-					onFocus: I
+					schema: O,
+					showLineNumbers: k,
+					showMinimap: j,
+					showFolding: M,
+					enablePathFinder: P,
+					highlightColors: L,
+					onViewReady: $,
+					onCursorChange: te,
+					onBlur: R,
+					onFocus: ee,
+					onPathCopy: z
 				})]
 			}),
-			$ && /* @__PURE__ */ p(i, {
+			re && /* @__PURE__ */ p(i, {
 				helperText: T,
 				error: w,
-				showLineColumn: k,
-				showValidation: j,
-				isValid: J,
-				cursorLine: K.line,
-				cursorCol: K.col,
-				translation: L
+				showLineColumn: A,
+				showValidation: N,
+				isValid: Z,
+				cursorLine: Y.line,
+				cursorCol: Y.col,
+				translation: B
 			}),
 			E && /* @__PURE__ */ p("input", {
 				type: "hidden",

package/dist/components/json-editor/JsonEditor.types.d.ts

@@ -31,6 +31,19 @@ export type JsonEditorHighlightColors = {
     /** Null values. Default: theme text.secondary. */
     null?: string;
 };
+export type JsonSchemaType = "string" | "number" | "integer" | "boolean" | "object" | "array" | "null";
+/**
+ * A focused subset of JSON Schema — type checking, required fields, enum, and
+ * nested object/array shapes. Not a full JSON Schema implementation (no $ref,
+ * oneOf/anyOf, pattern, min/max, etc.).
+ */
+export type JsonEditorSchema = {
+    type?: JsonSchemaType | JsonSchemaType[];
+    properties?: Record<string, JsonEditorSchema>;
+    required?: string[];
+    items?: JsonEditorSchema;
+    enum?: unknown[];
+};
 export type JsonEditorProps = {
     disabled?: boolean;
     error?: boolean;
@@ -44,10 +57,19 @@ export type JsonEditorProps = {
     name?: string;
     placeholder?: string;
     readonly?: boolean;
+    /**
+     * Structurally validates the document against a focused JSON Schema subset
+     * (type, required, enum, nested properties/items). Errors are shown as
+     * inline diagnostics, same as parse errors. Skipped while the document
+     * doesn't parse as valid JSON.
+     */
+    schema?: JsonEditorSchema;
     showLineColumn?: boolean;
     showLineNumbers?: boolean;
     /** Shows a scaled-down document overview (minimap) on the right side of the editor. */
     showMinimap?: boolean;
+    /** Shows a fold gutter — click the arrows to collapse/expand objects and arrays (default: true). */
+    showFolding?: boolean;
     /** Shows a Valid / Invalid JSON indicator in the footer. */
     showValidation?: boolean;
     toolbarConfig?: JsonEditorToolbarConfig;
@@ -55,8 +77,15 @@ export type JsonEditorProps = {
     value?: string;
     /** Width. Numbers → px. Default → 100%. */
     width?: number | string;
+    /**
+     * Enables Ctrl / Cmd ⌘+Click on a value or property name to copy its full
+     * JSON path (e.g. `$.users[0].name`) to the clipboard (default: true).
+     */
+    enablePathFinder?: boolean;
     onBlur?: () => void;
     onChange?: (json: string) => void;
     onFocus?: () => void;
+    /** Fired after Ctrl / Cmd ⌘+Click successfully copies a path via the path finder. */
+    onPathCopy?: (path: string) => void;
     onValidChange?: (isValid: boolean) => void;
 };

package/dist/components/json-editor/JsonEditorContent.d.ts

@@ -1,18 +1,22 @@
 import { EditorView } from "@codemirror/view";
-import type { JsonEditorHighlightColors } from "./JsonEditor.types";
+import type { JsonEditorHighlightColors, JsonEditorSchema } from "./JsonEditor.types";
 type JsonEditorContentProps = {
     value?: string;
     onChange?: (json: string) => void;
     placeholder?: string;
     disabled?: boolean;
     readonly?: boolean;
+    schema?: JsonEditorSchema;
     showLineNumbers?: boolean;
     showMinimap?: boolean;
+    showFolding?: boolean;
+    enablePathFinder?: boolean;
     highlightColors?: JsonEditorHighlightColors;
     onViewReady: (view: EditorView | null) => void;
     onCursorChange: (line: number, col: number) => void;
     onBlur?: () => void;
     onFocus?: () => void;
+    onPathCopy?: (path: string) => void;
 };
-export declare function JsonEditorContent({ value, onChange, placeholder, disabled, readonly, showLineNumbers, showMinimap, highlightColors, onViewReady, onCursorChange, onBlur, onFocus, }: JsonEditorContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function JsonEditorContent({ value, onChange, placeholder, disabled, readonly, schema, showLineNumbers, showMinimap, showFolding, enablePathFinder, highlightColors, onViewReady, onCursorChange, onBlur, onFocus, onPathCopy, }: JsonEditorContentProps): import("react/jsx-runtime").JSX.Element;
 export {};