@keboola/design 11.0.1 → 11.3.0

package/dist/rjsf.js

@@ -1,111 +1,26 @@
-import { Tooltip, debounce } from "./utils-D0c5VAyF.js";
+import { Tooltip, debounce } from "./utils-B-g7d_Jb.js";
 import { BookOpen, Info, Trash2 } from "./icons-Cek151jC.js";
-import { Button } from "./Button-nzmDNS2q.js";
+import { Button } from "./Button-CPsEQuTN.js";
 import { Label } from "./internal/components/Label.js";
 import { Link } from "./internal/components/Link.js";
-import { TextInput } from "./TextInput-BGed-V13.js";
-import { RadioGroup } from "./RadioGroup-sIveSsNa.js";
-import { Checkbox } from "./Checkbox-GJ8-srt4.js";
-import { Combobox } from "./Combobox-c_xBjf0P.js";
-import { Textarea } from "./internal/blocks/Textarea.js";
-import { DateInput } from "./DateInput-CMD3dY-T.js";
+import { TextInput } from "./TextInput-DhdRk8qm.js";
+import { RadioGroup } from "./RadioGroup-BMxuZEbT.js";
+import { Checkbox } from "./Checkbox-5VNCcV7E.js";
+import { Combobox } from "./Combobox-CyoRA7oY.js";
+import { FormGroup } from "./FormGroup-BnwP0jNu.js";
 import { NumberInput } from "./internal/blocks/NumberInput.js";
+import { Textarea } from "./internal/blocks/Textarea.js";
+import { DateInput } from "./DateInput-BPj2pzsn.js";
 import { PasswordInput } from "./internal/blocks/PasswordInput.js";
-import { FormGroup } from "./FormGroup-S9mPNHKH.js";
-import { Alert } from "./Alert-DfZq9kGe.js";
+import { Alert } from "./Alert-CseY3yAj.js";
 import { CollapsiblePanel } from "./internal/components/CollapsiblePanel.js";
-import { Tabs, TabsContent } from "./Tabs-EAihyqCt.js";
-import { CodeEditor, isLanguageMode } from "./CodeEditor-BfQJfbhL.js";
+import { Tabs, TabsContent } from "./Tabs-l72-WuhK.js";
+import { CodeEditor, isLanguageMode } from "./CodeEditor-CUse8znx.js";
 import { createContext, isValidElement, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import DOMPurify from "dompurify";
 import Form from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
-//#region src/blocks/RjsfSchemaEditor/markdownContext.ts
-/** Falls back to plain text when the host app doesn't provide a markdown renderer. */
-const RenderMarkdownContext = createContext((source) => source);
-const RenderMarkdownProvider = RenderMarkdownContext;
-const useRenderMarkdown = () => use(RenderMarkdownContext);
-//#endregion
-//#region src/blocks/RjsfSchemaEditor/widgets/CodeEditorWidget.tsx
-const isValidJson = (raw) => {
-	try {
-		const parsed = JSON.parse(raw);
-		return Boolean(parsed && typeof parsed === "object");
-	} catch {
-		return false;
-	}
-};
-const sanitize = (val) => {
-	if (typeof val === "object" && val !== null) return JSON.stringify(val, null, "  ");
-	return String(val ?? "");
-};
-const CodeEditorWidget = ({ id, value, onChange, disabled, readonly, options }) => {
-	const editorOptions = options.editor ?? {};
-	const rawMode = editorOptions.mode ?? "application/json";
-	const mode = isLanguageMode(rawMode) ? rawMode : "application/json";
-	const isJsonMode = mode === "application/json";
-	const isReadOnly = disabled || readonly || !!editorOptions.readOnly;
-	const [text, setText] = useState(() => sanitize(value));
-	useEffect(() => {
-		setText((currentText) => {
-			const sanitized = sanitize(value);
-			if (currentText === sanitized) return currentText;
-			if (isJsonMode && isValidJson(currentText)) try {
-				if (JSON.stringify(JSON.parse(currentText)) === JSON.stringify(typeof value === "object" ? value : JSON.parse(sanitized))) return currentText;
-			} catch {}
-			return sanitized;
-		});
-	}, [value, isJsonMode]);
-	const handleChange = (raw) => {
-		setText(raw);
-		if (isJsonMode && isValidJson(raw)) onChange(JSON.parse(raw));
-		else onChange(raw);
-	};
-	const help = isJsonMode && !isReadOnly && options.encryptionHint !== false ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		"Properties prefixed with ",
-		/* @__PURE__ */ jsx("code", { children: "#" }),
-		" sign will be encrypted on save. Already encrypted strings will persist."
-	] }) : null;
-	return /* @__PURE__ */ jsx("div", {
-		id,
-		children: isReadOnly ? /* @__PURE__ */ jsx(CodeEditor, {
-			variant: "field",
-			value: text,
-			mode,
-			readOnly: true,
-			withCopyButton: true,
-			withLineNumbers: editorOptions.lineNumbers !== false
-		}) : /* @__PURE__ */ jsx(CodeEditor, {
-			variant: "field",
-			value: text,
-			mode,
-			onChange: handleChange,
-			withCopyButton: true,
-			withLineNumbers: editorOptions.lineNumbers !== false,
-			help
-		})
-	});
-};
-//#endregion
-//#region src/blocks/RjsfSchemaEditor/fields/CodeEditorField.tsx
-/**
-* Field wrapper for CodeEditorWidget when used with type: "object".
-* RJSF only applies ui:widget to primitive types, so object-typed
-* code editors need a custom field that delegates to the widget.
-*/
-const CodeEditorField = ({ fieldPathId, formData, onChange, disabled, readonly, uiSchema }) => {
-	const uiOptions = uiSchema?.["ui:options"];
-	return /* @__PURE__ */ jsx(CodeEditorWidget, {
-		id: fieldPathId.$id,
-		value: formData,
-		onChange: (val) => onChange(val, fieldPathId.path),
-		disabled: !!disabled,
-		readonly: !!readonly,
-		options: uiOptions ?? {}
-	});
-};
-//#endregion
 //#region src/blocks/RjsfSchemaEditor/fieldHelpers.ts
 /** No-op function reused as onBlur/onFocus stub in custom fields. */
 const noop = () => {};
@@ -118,6 +33,8 @@ const SCHEMA_FIELD_STUBS = {
 	onFocus: noop,
 	errorSchema: {}
 };
+/** Whether a value is a keyed namespace — an object that is neither `null` nor an array. */
+const isRecord = (value) => !!value && typeof value === "object" && !Array.isArray(value);
 /**
 * Resolves a dot-path against an object (e.g. "_metadata_.table.columns").
 *
@@ -143,17 +60,6 @@ const resolveByPath = (path, data) => {
 	return result;
 };
 /**
-* Whether a `template-watch` field is the invisible computed-helper variant.
-*
-* - `template-watch` replaces `ui:widget: 'hidden'`, so `ui:options.hidden` carries the schema's
-*   `options.hidden` instead.
-* - The field stays mounted either way; only its wrapper is hidden.
-*/
-const isHiddenTemplateWatch = (uiSchema) => {
-	if (uiSchema?.["ui:widget"] !== "template-watch") return false;
-	return !!uiSchema["ui:options"]?.hidden;
-};
-/**
 * Extracts a property name from a simple Mustache-like template.
 * e.g. "{{item.field_name}}" → "field_name"
 */
@@ -210,6 +116,122 @@ const childFieldPathId = (parentFieldPathId, ...segments) => ({
 * for properties without an explicit order.
 */
 const sortByPropertyOrder = (properties) => Object.entries(properties).sort(([, a], [, b]) => (a.propertyOrder ?? Number.MAX_SAFE_INTEGER) - (b.propertyOrder ?? Number.MAX_SAFE_INTEGER)).map(([key]) => key);
+/**
+* Whether the schema asked for this field to be hidden.
+*
+* - `ui:widget: 'hidden'` is what RJSF itself reads, but any widget branch in
+*   `generateUiSchema` that runs later claims the slot and erases it.
+* - `ui:options.hidden` is the copy written last, so it survives all of them.
+*/
+const isHiddenField = (fieldUiSchema) => fieldUiSchema?.["ui:widget"] === "hidden" || !!fieldUiSchema?.["ui:options"]?.hidden;
+/**
+* Whether a schema node holds children.
+*
+* - `properties`, `additionalProperties`, `patternProperties` or `items` alone qualify —
+*   json-editor infers the container type from them and omits `type`.
+* - `type` may be a union (`['object', 'null']`).
+*/
+const isContainerSchema = (schema) => {
+	if (!schema) return false;
+	if (schema.properties || schema.additionalProperties || schema.patternProperties) return true;
+	if (schema.items) return true;
+	if (Array.isArray(schema.type)) return schema.type.includes("object") || schema.type.includes("array");
+	return schema.type === "object" || schema.type === "array";
+};
+/**
+* Whether a hidden field's whole subtree should leave the form.
+*
+* - Hidden containers mount nothing. RJSF recurses into objects and arrays regardless of
+*   hiddenness, so a `_metadata_` subtree costs hundreds of fields for no visible output.
+* - Hidden leaves are kept, wrapped in `tw:hidden`: their mount-phase onChange writes the
+*   schema default that sibling `options.dependencies` resolve against.
+*/
+const isHiddenContainer = (fieldUiSchema, schema) => isHiddenField(fieldUiSchema) && isContainerSchema(schema);
+//#endregion
+//#region src/blocks/RjsfSchemaEditor/markdownContext.ts
+/** Falls back to plain text when the host app doesn't provide a markdown renderer. */
+const RenderMarkdownContext = createContext((source) => source);
+const RenderMarkdownProvider = RenderMarkdownContext;
+const useRenderMarkdown = () => use(RenderMarkdownContext);
+//#endregion
+//#region src/blocks/RjsfSchemaEditor/widgets/CodeEditorWidget.tsx
+const isValidJson = (raw) => {
+	try {
+		const parsed = JSON.parse(raw);
+		return Boolean(parsed && typeof parsed === "object");
+	} catch {
+		return false;
+	}
+};
+const sanitize = (val) => {
+	if (typeof val === "object" && val !== null) return JSON.stringify(val, null, "  ");
+	return String(val ?? "");
+};
+const CodeEditorWidget = ({ id, value, onChange, disabled, readonly, options }) => {
+	const editorOptions = options.editor ?? {};
+	const rawMode = editorOptions.mode ?? "application/json";
+	const mode = isLanguageMode(rawMode) ? rawMode : "application/json";
+	const isJsonMode = mode === "application/json";
+	const isReadOnly = disabled || readonly || !!editorOptions.readOnly;
+	const [text, setText] = useState(() => sanitize(value));
+	useEffect(() => {
+		setText((currentText) => {
+			const sanitized = sanitize(value);
+			if (currentText === sanitized) return currentText;
+			if (isJsonMode && isValidJson(currentText)) try {
+				if (JSON.stringify(JSON.parse(currentText)) === JSON.stringify(typeof value === "object" ? value : JSON.parse(sanitized))) return currentText;
+			} catch {}
+			return sanitized;
+		});
+	}, [value, isJsonMode]);
+	const handleChange = (raw) => {
+		setText(raw);
+		if (isJsonMode && isValidJson(raw)) onChange(JSON.parse(raw));
+		else onChange(raw);
+	};
+	const help = isJsonMode && !isReadOnly && options.encryptionHint !== false ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		"Properties prefixed with ",
+		/* @__PURE__ */ jsx("code", { children: "#" }),
+		" sign will be encrypted on save. Already encrypted strings will persist."
+	] }) : null;
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		children: isReadOnly ? /* @__PURE__ */ jsx(CodeEditor, {
+			variant: "field",
+			value: text,
+			mode,
+			readOnly: true,
+			withCopyButton: true,
+			withLineNumbers: editorOptions.lineNumbers !== false
+		}) : /* @__PURE__ */ jsx(CodeEditor, {
+			variant: "field",
+			value: text,
+			mode,
+			onChange: handleChange,
+			withCopyButton: true,
+			withLineNumbers: editorOptions.lineNumbers !== false,
+			help
+		})
+	});
+};
+//#endregion
+//#region src/blocks/RjsfSchemaEditor/fields/CodeEditorField.tsx
+/**
+* Field wrapper for CodeEditorWidget when used with type: "object".
+* RJSF only applies ui:widget to primitive types, so object-typed
+* code editors need a custom field that delegates to the widget.
+*/
+const CodeEditorField = ({ fieldPathId, formData, onChange, disabled, readonly, uiSchema }) => {
+	const uiOptions = uiSchema?.["ui:options"];
+	return /* @__PURE__ */ jsx(CodeEditorWidget, {
+		id: fieldPathId.$id,
+		value: formData,
+		onChange: (val) => onChange(val, fieldPathId.path),
+		disabled: !!disabled,
+		readonly: !!readonly,
+		options: uiOptions ?? {}
+	});
+};
 //#endregion
 //#region src/blocks/RjsfSchemaEditor/SchemaDescription.tsx
 /** Renders a schema description with sanitized HTML support (links, formatting, etc.). */
@@ -245,14 +267,15 @@ const GridObjectField = ({ schema, uiSchema = {}, formData, onChange, disabled,
 	const hasCollapsed = uiOptions?.collapsed !== void 0;
 	const collapsed = !!uiOptions?.collapsed;
 	const disableCollapse = !!uiOptions?.disableCollapse;
-	const sortedKeys = sortByPropertyOrder(properties);
-	if (sortedKeys.length === 0) return null;
+	const mountedKeys = sortByPropertyOrder(properties).filter((key) => !isHiddenContainer(uiSchema[key], properties[key]));
+	if (mountedKeys.length === 0) return null;
 	const gridContent = /* @__PURE__ */ jsx("div", {
 		className: "tw:grid tw:grid-cols-12 tw:gap-4 tw:[&>div:empty]:hidden",
-		children: sortedKeys.map((key) => {
+		children: mountedKeys.map((key) => {
 			const gridCols = properties[key]?.options?.grid_columns ?? 12;
 			const gridBreak = !!properties[key]?.options?.grid_break;
 			return /* @__PURE__ */ jsx("div", {
+				className: isHiddenField(uiSchema[key]) ? "tw:hidden" : void 0,
 				style: { gridColumn: gridBreak ? "1 / -1" : `span ${Math.min(gridCols, 12)}` },
 				children: /* @__PURE__ */ jsx(SchemaField, {
 					name: key,
@@ -364,8 +387,9 @@ const TableArrayField = ({ schema, uiSchema = {}, formData, onChange, disabled,
 	const properties = itemSchema?.properties ?? {};
 	const itemUiSchema = uiSchema.items ?? {};
 	const SchemaField = getSchemaField(registry);
-	const sortedKeys = sortByPropertyOrder(properties);
-	const isPrimitiveItems = sortedKeys.length === 0 && itemSchema != null;
+	const allKeys = sortByPropertyOrder(properties);
+	const columnKeys = allKeys.filter((key) => !isHiddenField(itemUiSchema[key]));
+	const isPrimitiveItems = allKeys.length === 0 && itemSchema != null;
 	const isReadOnly = disabled || readonly;
 	const fieldPath = fieldPathId?.path ?? [];
 	const itemsRef = useRef(items);
@@ -395,7 +419,7 @@ const TableArrayField = ({ schema, uiSchema = {}, formData, onChange, disabled,
 			return;
 		}
 		const newItem = {};
-		for (const key of sortedKeys) newItem[key] = defaultValueFor(properties[key] ?? {});
+		for (const key of allKeys) newItem[key] = defaultValueFor(properties[key] ?? {});
 		onChange([...itemsRef.current, newItem], fieldPath);
 	};
 	const withHiddenLabel = (base) => ({
@@ -411,7 +435,7 @@ const TableArrayField = ({ schema, uiSchema = {}, formData, onChange, disabled,
 		children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [isPrimitiveItems ? /* @__PURE__ */ jsx("th", {
 			className: "tw:border-b tw:border-neutral-200 tw:p-2 tw:text-left tw:text-xs tw:font-medium tw:text-neutral-600",
 			children: itemSchema?.title ?? ""
-		}) : sortedKeys.map((key) => /* @__PURE__ */ jsx("th", {
+		}) : columnKeys.map((key) => /* @__PURE__ */ jsx("th", {
 			className: "tw:border-b tw:border-neutral-200 tw:p-2 tw:text-left tw:text-xs tw:font-medium tw:text-neutral-600",
 			children: properties[key]?.title ?? key
 		}, key)), !isReadOnly && /* @__PURE__ */ jsx("th", { className: "tw:w-20" })] }) }), /* @__PURE__ */ jsx("tbody", { children: items.map((item, rowIndex) => /* @__PURE__ */ jsxs("tr", {
@@ -430,7 +454,7 @@ const TableArrayField = ({ schema, uiSchema = {}, formData, onChange, disabled,
 					disabled: !!disabled,
 					readonly: !!readonly
 				})
-			}) : sortedKeys.map((key) => /* @__PURE__ */ jsx("td", {
+			}) : columnKeys.map((key) => /* @__PURE__ */ jsx("td", {
 				className: "tw:px-2 tw:py-1.5 tw:[&>div]:mb-0",
 				children: /* @__PURE__ */ jsx(SchemaField, {
 					name: key,
@@ -507,13 +531,27 @@ const TabsObjectField = ({ schema, uiSchema = {}, formData, onChange, disabled,
 			[key]: value
 		}, path, errorSchema, id);
 	}, [onChange]);
-	const sortedKeys = sortByPropertyOrder(properties);
-	const [activeTab, setActiveTab] = useState(sortedKeys[0] ?? "");
-	if (sortedKeys.length === 0) return null;
-	const triggers = sortedKeys.map((key) => ({
+	const mountedKeys = sortByPropertyOrder(properties).filter((key) => !isHiddenContainer(uiSchema[key], properties[key]));
+	const tabKeys = mountedKeys.filter((key) => !isHiddenField(uiSchema[key]));
+	const hiddenLeafKeys = mountedKeys.filter((key) => isHiddenField(uiSchema[key]));
+	const [activeTab, setActiveTab] = useState(tabKeys[0] ?? "");
+	if (mountedKeys.length === 0) return null;
+	const triggers = tabKeys.map((key) => ({
 		value: key,
 		title: properties[key]?.title ?? key
 	}));
+	const renderField = (key) => /* @__PURE__ */ jsx(SchemaField, {
+		name: key,
+		schema: schema.properties[key],
+		uiSchema: uiSchema[key] ?? {},
+		formData: data[key],
+		...SCHEMA_FIELD_STUBS,
+		fieldPathId: childFieldPathId(fieldPathId, key),
+		registry,
+		onChange: onPropertyChange(key),
+		disabled: !!disabled,
+		readonly: !!readonly
+	}, key);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "tw:flex tw:flex-col tw:gap-4",
 		children: [
@@ -522,27 +560,17 @@ const TabsObjectField = ({ schema, uiSchema = {}, formData, onChange, disabled,
 				children: schema.title
 			}),
 			/* @__PURE__ */ jsx(SchemaDescription, { description: schema.description }),
-			/* @__PURE__ */ jsx(Tabs, {
+			tabKeys.length > 0 && /* @__PURE__ */ jsx(Tabs, {
 				triggers,
 				value: activeTab,
 				onValueChange: setActiveTab,
 				compact: true,
-				children: sortedKeys.map((key) => /* @__PURE__ */ jsx(TabsContent, {
+				children: tabKeys.map((key) => /* @__PURE__ */ jsx(TabsContent, {
 					value: key,
-					children: /* @__PURE__ */ jsx(SchemaField, {
-						name: key,
-						schema: schema.properties[key],
-						uiSchema: uiSchema[key] ?? {},
-						formData: data[key],
-						...SCHEMA_FIELD_STUBS,
-						fieldPathId: childFieldPathId(fieldPathId, key),
-						registry,
-						onChange: onPropertyChange(key),
-						disabled: !!disabled,
-						readonly: !!readonly
-					})
+					children: renderField(key)
 				}, key))
-			})
+			}),
+			hiddenLeafKeys.map(renderField)
 		]
 	});
 };
@@ -654,9 +682,13 @@ const ErrorListTemplate = ({ errors }) => {
 };
 //#endregion
 //#region src/blocks/RjsfSchemaEditor/RootFormDataContext.ts
-const RootFormDataContext = createContext({});
+const RootFormDataContext = createContext({
+	data: {},
+	context: {}
+});
 const RootFormDataProvider = RootFormDataContext;
-const useRootFormData = () => use(RootFormDataContext);
+const useRootFormData = () => use(RootFormDataContext).data;
+const useRootContext = () => use(RootFormDataContext).context;
 //#endregion
 //#region src/blocks/RjsfSchemaEditor/templates/FieldTemplate.tsx
 /**
@@ -776,16 +808,11 @@ const FieldTemplateWithDependencies = ({ dependencies, keepMounted, ...props })
 	return /* @__PURE__ */ jsx(FieldTemplateBody, { ...props });
 };
 const FieldTemplate = (props) => {
-	if (props.hidden) return /* @__PURE__ */ jsx("div", {
+	if (isHiddenField(props.uiSchema)) return /* @__PURE__ */ jsx("div", {
 		className: "tw:hidden",
 		children: props.children
 	});
-	const uiOptions = props.uiSchema?.["ui:options"];
-	if (isHiddenTemplateWatch(props.uiSchema)) return /* @__PURE__ */ jsx("div", {
-		className: "tw:hidden",
-		children: props.children
-	});
-	const dependencies = uiOptions?.dependencies;
+	const dependencies = (props.uiSchema?.["ui:options"])?.dependencies;
 	if (dependencies) return /* @__PURE__ */ jsx(FieldTemplateWithDependencies, {
 		dependencies,
 		keepMounted: props.uiSchema?.["ui:widget"] === "template-watch",
@@ -803,22 +830,9 @@ const ObjectFieldTemplate = ({ title, description, properties, formData, uiSchem
 	const disableCollapse = !!uiOptions?.disableCollapse;
 	const isArrayItem = typeof fieldPathId?.path?.at(-1) === "number";
 	const childSchemas = schema.properties;
-	const isContainerSchema = (s) => {
-		if (!s) return false;
-		if (s.properties || s.items) return true;
-		if (Array.isArray(s.type)) return s.type.includes("object") || s.type.includes("array");
-		return s.type === "object" || s.type === "array";
-	};
-	const visibleProperties = properties.filter((prop) => {
-		if (uiSchema?.[prop.name]?.["ui:widget"] !== "hidden") return true;
-		return !isContainerSchema(childSchemas?.[prop.name]);
-	});
-	const isHiddenMount = (name) => {
-		const childUi = uiSchema?.[name];
-		return childUi?.["ui:widget"] === "hidden" || isHiddenTemplateWatch(childUi);
-	};
+	const visibleProperties = properties.filter((prop) => !isHiddenContainer(uiSchema?.[prop.name], childSchemas?.[prop.name]));
 	const renderChildren = (props) => props.map((prop) => /* @__PURE__ */ jsx("div", {
-		className: isHiddenMount(prop.name) ? "tw:hidden" : void 0,
+		className: isHiddenField(uiSchema?.[prop.name]) ? "tw:hidden" : void 0,
 		children: prop.content
 	}, prop.name));
 	if (isRoot) return /* @__PURE__ */ jsx("div", {
@@ -1029,24 +1043,62 @@ const resolveTemplate = (template, watch, rootFormData) => {
 	});
 };
 /**
+* Whether `rootContext` declares the value a path reads.
+*
+* - A context entry shares its top-level key with the form data — a sync action writes its own
+*   keys under the same key — so the entry key alone does not settle it.
+* - Both the entry and the segment under it must be own properties — plain-object lookups also
+*   answer for `toString` and the rest of the prototype chain.
+* - A path naming an entry and nothing under it reads the whole namespace, context included.
+*/
+const declaresPath = (segments, rootContext) => {
+	const [entryKey = "", key] = segments;
+	const entry = rootContext[entryKey];
+	return isRecord(entry) && (key === void 0 || Object.hasOwn(entry, key));
+};
+/**
+* Whether every watched path reads a value `rootContext` declares.
+*
+* - No watched paths means nothing is derived, which is not a context view.
+*/
+const readsOnlyContext = (watch, rootContext) => {
+	const paths = Object.values(watch);
+	return paths.length > 0 && paths.every((path) => {
+		const segments = path.split(".");
+		return declaresPath(segments, rootContext) || declaresPath(segments.slice(1), rootContext);
+	});
+};
+/**
 * Widget for json-editor's `template`/`watch` pattern (without `enumSource`).
-* Computes a value from watched form data paths and keeps the field in sync.
+* Computes a value from watched paths and shows it.
 *
 * - With `options.hidden` it renders nothing — a helper for cross-object dependencies.
 * - Without it, the value is shown in a read-only input; `FieldTemplate` supplies the label.
+* - It writes the computed value into the form data, so a component reads it back from the
+*   saved configuration.
+* - It stops writing when every watched path reads `rootContext` — the configuration does not
+*   own that context.
+* - `options.hidden` fields always write; they exist to feed cross-object dependencies.
 */
 const TemplateWatchWidget = ({ id, value, onChange, disabled, readonly, rawErrors, options: widgetOptions }) => {
 	const data = useRootFormData();
+	const rootContext = useRootContext();
 	const watch = widgetOptions.watch;
 	const template = widgetOptions.template;
+	const isContextView = !widgetOptions.hidden && !!watch && readsOnlyContext(watch, rootContext);
 	const computed = watch && template ? resolveTemplate(template, watch, data) : stringify(value);
 	const lastSetRef = useRef(stringify(value));
 	useEffect(() => {
+		if (isContextView) return;
 		if (computed !== lastSetRef.current) {
 			lastSetRef.current = computed;
 			onChange(computed);
 		}
-	}, [computed, onChange]);
+	}, [
+		computed,
+		onChange,
+		isContextView
+	]);
 	if (widgetOptions.hidden) return null;
 	return /* @__PURE__ */ jsx(TextInput, {
 		id,
@@ -1167,7 +1219,8 @@ const generateUiSchema = (schema, readOnly = false, definitions, globalConfig, h
 			const type = propSchema.type ?? (propSchema.properties ? "object" : void 0);
 			const options = propSchema.options;
 			const fieldUi = {};
-			if (options?.hidden) fieldUi["ui:widget"] = "hidden";
+			const isHidden = !!options?.hidden;
+			if (isHidden) fieldUi["ui:widget"] = "hidden";
 			if (type === "array" && format === "table") fieldUi["ui:field"] = "tableArray";
 			if (type === "array" && format === "checkbox") fieldUi["ui:widget"] = "checkboxes";
 			if (format === "radio" && propSchema.enum) fieldUi["ui:widget"] = "radio";
@@ -1241,7 +1294,7 @@ const generateUiSchema = (schema, readOnly = false, definitions, globalConfig, h
 					...fieldUi["ui:options"],
 					watch: propSchema.watch,
 					template: propSchema.template,
-					hidden: !!options?.hidden || isContainerType(propSchema)
+					...isContainerSchema(propSchema) && { hidden: true }
 				};
 			}
 			if (type === "boolean" && options?.enum_titles) fieldUi["ui:widget"] = "select";
@@ -1297,6 +1350,10 @@ const generateUiSchema = (schema, readOnly = false, definitions, globalConfig, h
 				if (Object.keys(itemsUi).length > 0) fieldUi.items = itemsUi;
 			}
 			if ((propSchema.enumSource || propSchema.watch) && !fieldUi["ui:widget"]) console.warn(`[RJSF] Property "${key}" uses enumSource/watch which is not yet supported. It will render as a plain input.`);
+			if (isHidden) fieldUi["ui:options"] = {
+				...fieldUi["ui:options"],
+				hidden: true
+			};
 			if (Object.keys(fieldUi).length > 0) uiSchema[key] = fieldUi;
 		}
 		const orderedEntries = Object.entries(properties).filter(([, prop]) => prop.propertyOrder !== void 0).sort(([, a], [, b]) => (a.propertyOrder ?? Number.MAX_SAFE_INTEGER) - (b.propertyOrder ?? Number.MAX_SAFE_INTEGER));
@@ -1332,18 +1389,6 @@ const isDynamicSelectSchema = (schema) => {
 const isTemplateWatchSchema = (schema) => {
 	return !!(schema.template && schema.watch && !schema.enumSource);
 };
-/**
-* Whether a schema describes an object or an array.
-*
-* - `properties` or `items` imply the type even when json-editor omits it.
-* - `type` may be a union, e.g. `['object', 'null']`.
-*/
-const isContainerType = (schema) => {
-	if (schema.properties || schema.items) return true;
-	const { type } = schema;
-	if (Array.isArray(type)) return type.includes("object") || type.includes("array");
-	return type === "object" || type === "array";
-};
 const isAsyncSelectSchema = (schema) => {
 	return !!(schema.options?.async || schema.options?.creatable);
 };
@@ -1468,7 +1513,7 @@ const stableStringify = (obj) => JSON.stringify(obj, (_key, val) => {
 	}
 	return val;
 });
-const RjsfSchemaEditor = ({ schema, value, onChange, readOnly, inForm, globalConfig, onRegisterValidate, widgets, fields, renderMarkdown, hasProtectedDefaultBranch = false }) => {
+const RjsfSchemaEditor = ({ schema, value, onChange, readOnly, inForm, globalConfig, rootContext, onRegisterValidate, widgets, fields, renderMarkdown, hasProtectedDefaultBranch = false }) => {
 	const schemaJs = useMemo(() => sanitizeSchema(schema), [schema]);
 	const uiSchema = useMemo(() => generateUiSchema(schema, readOnly, void 0, globalConfig ?? void 0, hasProtectedDefaultBranch), [
 		schema,
@@ -1564,12 +1609,27 @@ const RjsfSchemaEditor = ({ schema, value, onChange, readOnly, inForm, globalCon
 			return formRef.current?.validateForm() ?? true;
 		});
 	}, [onRegisterValidate, formKey]);
+	const rootFormDataValue = useMemo(() => {
+		const context = rootContext ?? {};
+		const merged = { ...rootFormData };
+		for (const [key, entry] of Object.entries(context)) {
+			const existing = merged[key];
+			merged[key] = isRecord(existing) ? {
+				...existing,
+				...entry
+			} : entry;
+		}
+		return {
+			data: merged,
+			context
+		};
+	}, [rootFormData, rootContext]);
 	return /* @__PURE__ */ jsx("div", {
 		className: "json-editor",
 		children: /* @__PURE__ */ jsx(RenderMarkdownProvider, {
 			value: renderMarkdown ?? defaultRenderMarkdown,
 			children: /* @__PURE__ */ jsx(RootFormDataProvider, {
-				value: rootFormData,
+				value: rootFormDataValue,
 				children: /* @__PURE__ */ jsx(Form, {
 					ref: formRef,
 					schema: schemaJs,