schema-components 1.16.3 → 1.18.0

package/dist/react/SchemaComponent.mjs

@@ -2,13 +2,13 @@
 import { isObject, toRecordOrUndefined } from "../core/guards.mjs";
 import { SchemaFieldError, SchemaNormalisationError, SchemaRenderError } from "../core/errors.mjs";
 import { normaliseSchema } from "../core/adapter.mjs";
-import { getRenderFunction, mergeResolvers } from "../core/renderer.mjs";
+import { buildRenderProps, getRenderFunction, mergeResolvers } from "../core/renderer.mjs";
 import { walk } from "../core/walker.mjs";
 import { headlessResolver } from "./headless.mjs";
 import { resolvePath, resolveValue, setNestedValue } from "./fieldPath.mjs";
 import { z } from "zod";
+import { createContext, isValidElement, useCallback, useContext, useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, isValidElement, useCallback, useContext, useMemo } from "react";
 //#region src/react/SchemaComponent.tsx
 /**
 * <SchemaComponent> — renders UI from Zod, JSON Schema, or OpenAPI schemas.
@@ -46,9 +46,11 @@ const globalWidgets = /* @__PURE__ */ new Map();
 function registerWidget(name, render) {
 	globalWidgets.set(name, render);
 }
-function SchemaComponent({ schema: schemaInput, ref: refInput, value, onChange, validate, onValidationError, onError, onDiagnostic, strict, fields, meta: componentMeta, readOnly, writeOnly, description, widgets: instanceWidgets }) {
+function SchemaComponent({ schema: schemaInput, ref: refInput, value, onChange, validate, onValidationError, onError, onDiagnostic, strict, fields, meta: componentMeta, readOnly, writeOnly, description, widgets: instanceWidgets, idPrefix }) {
 	const userResolver = useContext(UserResolverContext);
 	const contextWidgets = useContext(WidgetsContext);
+	const generatedId = useId();
+	const rootPath = idPrefix ?? sanitisePrefix(generatedId);
 	const mergedMeta = useMemo(() => {
 		const merged = { ...componentMeta };
 		if (readOnly === true) merged.readOnly = true;
@@ -108,11 +110,40 @@ function SchemaComponent({ schema: schemaInput, ref: refInput, value, onChange,
 		...diagnostics !== void 0 ? { diagnostics } : {}
 	};
 	const tree = walk(jsonSchema, walkOptions);
-	const makeRenderChild = (currentDepth) => (childTree, childValue, childOnChange) => {
-		return renderField(childTree, childValue, childOnChange, userResolver, makeRenderChild(currentDepth + 1), instanceWidgets, contextWidgets, currentDepth + 1);
+	const makeRenderChild = (currentDepth, parentPath) => (childTree, childValue, childOnChange, pathSuffix) => {
+		const childPath = joinPath(parentPath, pathSuffix);
+		return renderField(childTree, childValue, childOnChange, userResolver, makeRenderChild(currentDepth + 1, childPath), childPath, instanceWidgets, contextWidgets, currentDepth + 1);
 	};
-	const renderChild = makeRenderChild(0);
-	return renderField(tree, value ?? tree.defaultValue, handleChange, userResolver, renderChild, instanceWidgets, contextWidgets, 0);
+	const renderChild = makeRenderChild(0, rootPath);
+	return renderField(tree, value ?? tree.defaultValue, handleChange, userResolver, renderChild, rootPath, instanceWidgets, contextWidgets, 0);
+}
+/**
+* Default root-path sentinel used when no `idPrefix` is supplied AND the
+* component is rendered outside a React tree (e.g. server-side bundling
+* test harnesses). Production callers receive a `useId()`-derived prefix
+* that is unique per instance.
+*/
+const ROOT_PATH = "root";
+/**
+* Append a child path suffix to a parent path. When the suffix is omitted
+* (e.g. transparent wrappers like union options), the parent path is
+* returned unchanged so the child inherits the parent's id.
+*/
+function joinPath(parent, suffix) {
+	if (suffix === void 0 || suffix.length === 0) return parent;
+	if (parent.length === 0) return suffix;
+	return `${parent}.${suffix}`;
+}
+/**
+* Normalise a `useId()` value into a DOM-id-safe prefix. React's `useId`
+* returns values containing `:` characters (e.g. `«:r0:»`) which are
+* invalid in CSS selectors. Replace any run of non-alphanumeric characters
+* with a single hyphen and trim leading/trailing hyphens.
+*/
+function sanitisePrefix(value) {
+	const sanitised = value.replace(/[^a-zA-Z0-9_]+/g, "-").replace(/^-+|-+$/g, "");
+	if (sanitised.length === 0) throw new Error(`Cannot derive a DOM-safe id prefix from "${value}". Pass an explicit idPrefix prop.`);
+	return sanitised;
 }
 function runValidation(zodSchema, jsonSchema, value) {
 	if (zodSchema !== void 0 && isObject(zodSchema)) {
@@ -134,7 +165,8 @@ function runValidation(zodSchema, jsonSchema, value) {
 }
 /** Maximum rendering depth before treating a field as recursive. */
 const MAX_RENDER_DEPTH = 10;
-function renderField(tree, value, onChange, userResolver, renderChild, instanceWidgets, contextWidgets, depth = 0) {
+function renderField(tree, value, onChange, userResolver, renderChild, path, instanceWidgets, contextWidgets, depth = 0) {
+	if (path.length === 0) throw new Error("renderField requires a non-empty path. Pass ROOT_PATH for the root field and use renderChild's pathSuffix to derive child paths.");
 	if (depth >= MAX_RENDER_DEPTH) {
 		const refTarget = tree.type === "recursive" ? tree.refTarget : "";
 		return /* @__PURE__ */ jsx("fieldset", { children: /* @__PURE__ */ jsxs("em", { children: [
@@ -147,7 +179,7 @@ function renderField(tree, value, onChange, userResolver, renderChild, instanceW
 	if (typeof componentHint === "string") {
 		const widget = instanceWidgets?.get(componentHint) ?? contextWidgets?.get(componentHint) ?? globalWidgets.get(componentHint);
 		if (widget !== void 0) {
-			const result = widget(buildRenderProps(tree, value, onChange, renderChild));
+			const result = widget(buildRenderProps(tree, value, onChange, renderChild, path));
 			if (result !== void 0 && result !== null) {
 				if (isValidElement(result)) return result;
 				if (typeof result === "string" || typeof result === "number") return result;
@@ -160,7 +192,7 @@ function renderField(tree, value, onChange, userResolver, renderChild, instanceW
 	if (renderFn !== void 0) {
 		let result;
 		try {
-			result = renderFn(buildRenderProps(tree, value, onChange, renderChild));
+			result = renderFn(buildRenderProps(tree, value, onChange, renderChild, path));
 		} catch (err) {
 			throw new SchemaRenderError(err instanceof Error ? err.message : `Render function threw for type "${tree.type}"`, tree, tree.type, err);
 		}
@@ -171,38 +203,10 @@ function renderField(tree, value, onChange, userResolver, renderChild, instanceW
 	if (value === void 0 || value === null) return /* @__PURE__ */ jsx("span", { children: "—" });
 	return /* @__PURE__ */ jsx("span", { children: typeof value === "string" ? value : JSON.stringify(value) });
 }
-function buildRenderProps(tree, value, onChange, renderChild) {
-	const props = {
-		value,
-		onChange,
-		readOnly: tree.editability === "presentation",
-		writeOnly: tree.editability === "input",
-		meta: tree.meta,
-		constraints: tree.constraints,
-		path: "",
-		tree,
-		renderChild
-	};
-	if (tree.type === "enum") props.enumValues = tree.enumValues;
-	if (tree.type === "array" && tree.element !== void 0) props.element = tree.element;
-	if (tree.type === "object") props.fields = tree.fields;
-	if (tree.type === "union" || tree.type === "discriminatedUnion") props.options = tree.options;
-	if (tree.type === "discriminatedUnion") props.discriminator = tree.discriminator;
-	if (tree.type === "record") props.keyType = tree.keyType;
-	if (tree.type === "record") props.valueType = tree.valueType;
-	if (tree.type === "tuple") props.prefixItems = tree.prefixItems;
-	if (tree.type === "conditional") props.ifClause = tree.ifClause;
-	if (tree.type === "conditional" && tree.thenClause !== void 0) props.thenClause = tree.thenClause;
-	if (tree.type === "conditional" && tree.elseClause !== void 0) props.elseClause = tree.elseClause;
-	if (tree.type === "negation") props.negated = tree.negated;
-	if (tree.type === "recursive") props.refTarget = tree.refTarget;
-	if (tree.type === "literal") props.literalValues = tree.literalValues;
-	if (tree.examples !== void 0) props.examples = tree.examples;
-	return props;
-}
 function SchemaField({ path, schema: schemaInput, ref: refInput, value, onChange, meta: fieldMeta, validate, onValidationError }) {
 	const userResolver = useContext(UserResolverContext);
 	const contextWidgets = useContext(WidgetsContext);
+	const generatedId = useId();
 	let jsonSchema;
 	let zodSchema;
 	let rootMeta;
@@ -240,10 +244,12 @@ function SchemaField({ path, schema: schemaInput, ref: refInput, value, onChange
 		onChange,
 		onValidationError
 	]);
-	const makeRenderChild = (currentDepth) => (childTree, childValue, childOnChange) => {
-		return renderField(childTree, childValue, childOnChange, userResolver, makeRenderChild(currentDepth + 1), void 0, contextWidgets, currentDepth + 1);
+	const makeRenderChild = (currentDepth, parentPath) => (childTree, childValue, childOnChange, pathSuffix) => {
+		const childPath = joinPath(parentPath, pathSuffix);
+		return renderField(childTree, childValue, childOnChange, userResolver, makeRenderChild(currentDepth + 1, childPath), childPath, void 0, contextWidgets, currentDepth + 1);
 	};
-	return renderField(fieldTree, fieldValue, handleChange, userResolver, makeRenderChild(0), void 0, contextWidgets, 0);
+	const rootPath = joinPath(sanitisePrefix(generatedId), path);
+	return renderField(fieldTree, fieldValue, handleChange, userResolver, makeRenderChild(0, rootPath), rootPath, void 0, contextWidgets, 0);
 }
 /**
 * Dispatch Zod errors to per-field onValidationError callbacks.
@@ -290,4 +296,4 @@ function detectNormalisationKind(err) {
 	return "unknown";
 }
 //#endregion
-export { SchemaComponent, SchemaField, SchemaProvider, registerWidget, renderField };
+export { ROOT_PATH, SchemaComponent, SchemaField, SchemaProvider, joinPath, registerWidget, renderField, sanitisePrefix };

package/dist/react/SchemaView.d.mts

@@ -1,6 +1,6 @@
 import { T as SchemaMeta } from "../types-D_5ST7SS.mjs";
-import { t as Diagnostic } from "../diagnostics-DzbZmcLI.mjs";
-import { r as ComponentResolver } from "../renderer-BdSqllx5.mjs";
+import { t as Diagnostic } from "../diagnostics-BYk63jsC.mjs";
+import { r as ComponentResolver } from "../renderer-DXo-rXHJ.mjs";
 import { WidgetMap } from "./SchemaComponent.mjs";
 import { ReactNode } from "react";
 
@@ -30,9 +30,16 @@ interface SchemaViewProps {
   onDiagnostic?: (diagnostic: Diagnostic) => void;
   /** When true, any diagnostic becomes a thrown error. */
   strict?: boolean;
+  /**
+   * Prefix used for every input `id`/label `htmlFor` in this view subtree.
+   * Defaults to a per-instance value from `useId()`; pass a deterministic
+   * value when stable ids matter (e.g. snapshot tests).
+   */
+  idPrefix?: string;
 }
 /**
- * Server-safe schema renderer — no hooks, no context, no state.
+ * Server-safe schema renderer — no context and no state. The only hook
+ * called is `useId()`, which is RSC-safe.
  *
  * Always renders in read-only mode. For editable forms, use
  * `<SchemaComponent>` with `"use client"`.
@@ -47,7 +54,8 @@ declare function SchemaView({
   resolver,
   widgets,
   onDiagnostic,
-  strict
+  strict,
+  idPrefix
 }: SchemaViewProps): ReactNode;
 //#endregion
 export { SchemaView, SchemaViewProps };

package/dist/react/SchemaView.mjs

@@ -1,17 +1,21 @@
 import { SchemaNormalisationError, SchemaRenderError } from "../core/errors.mjs";
 import { normaliseSchema } from "../core/adapter.mjs";
-import { getRenderFunction, mergeResolvers } from "../core/renderer.mjs";
+import { buildRenderProps, getRenderFunction, mergeResolvers } from "../core/renderer.mjs";
 import { walk } from "../core/walker.mjs";
 import { headlessResolver } from "./headless.mjs";
+import { joinPath, sanitisePrefix } from "./SchemaComponent.mjs";
+import { createElement, isValidElement, useId } from "react";
 import { jsx } from "react/jsx-runtime";
-import { createElement, isValidElement } from "react";
 //#region src/react/SchemaView.tsx
 /**
 * React Server Component for read-only schema rendering.
 *
-* This component has zero hooks — no `useContext`, no `useMemo`,
-* no `useCallback`. It can run in a React Server Component environment
-* without the `"use client"` directive.
+* Uses no React state, context, or effects — no `useContext`, `useMemo`,
+* `useCallback`, `useState`, or `useEffect`. The single hook called is
+* `useId()`, which is one of the few hooks permitted inside a React
+* Server Component (it is RSC-safe by design) and is used solely to
+* derive a stable per-instance `idPrefix`. The component therefore runs
+* in an RSC environment without the `"use client"` directive.
 *
 * **Read-only only.** For interactive forms with `onChange`, use
 * `<SchemaComponent>` (which requires `"use client"`).
@@ -30,14 +34,16 @@ import { createElement, isValidElement } from "react";
 * Server Components cannot use React context, so the resolver
 * is passed explicitly.
 */
-function noop() {}
 /**
-* Server-safe schema renderer — no hooks, no context, no state.
+* Server-safe schema renderer — no context and no state. The only hook
+* called is `useId()`, which is RSC-safe.
 *
 * Always renders in read-only mode. For editable forms, use
 * `<SchemaComponent>` with `"use client"`.
 */
-function SchemaView({ schema: schemaInput, ref: refInput, value, fields, meta: componentMeta, description, resolver, widgets, onDiagnostic, strict }) {
+function SchemaView({ schema: schemaInput, ref: refInput, value, fields, meta: componentMeta, description, resolver, widgets, onDiagnostic, strict, idPrefix }) {
+	const generatedId = useId();
+	const rootPath = idPrefix ?? sanitisePrefix(generatedId);
 	const mergedMeta = {
 		...componentMeta,
 		readOnly: true
@@ -68,29 +74,22 @@ function SchemaView({ schema: schemaInput, ref: refInput, value, fields, meta: c
 	const tree = walk(jsonSchema, walkOptions);
 	const userResolver = resolver !== void 0 ? mergeResolvers(resolver, headlessResolver) : headlessResolver;
 	const MAX_SERVER_DEPTH = 10;
-	const makeRenderChild = (currentDepth) => (childTree, childValue) => {
+	const makeRenderChild = (currentDepth, parentPath) => (childTree, childValue, pathSuffix) => {
+		const childPath = joinPath(parentPath, pathSuffix);
 		if (currentDepth >= MAX_SERVER_DEPTH) return createElement("fieldset", null, createElement("em", null, `\u21bb ${typeof childTree.meta.description === "string" ? childTree.meta.description : childTree.type === "recursive" ? childTree.refTarget : "schema"} (recursive)`));
-		return renderFieldServer(childTree, childValue, userResolver, makeRenderChild(currentDepth + 1), widgets);
+		return renderFieldServer(childTree, childValue, userResolver, makeRenderChild(currentDepth + 1, childPath), childPath, widgets);
 	};
-	const renderChild = makeRenderChild(0);
-	return renderFieldServer(tree, value ?? tree.defaultValue, userResolver, renderChild, widgets);
+	const renderChild = makeRenderChild(0, rootPath);
+	return renderFieldServer(tree, value ?? tree.defaultValue, userResolver, renderChild, rootPath, widgets);
 }
-function renderFieldServer(tree, value, resolver, renderChild, widgets) {
+function renderFieldServer(tree, value, resolver, renderChild, path, widgets) {
+	if (path.length === 0) throw new Error("renderFieldServer requires a non-empty path. Pass ROOT_PATH at the root and join children via joinPath().");
+	const adaptedRenderChild = (childTree, childValue, _childOnChange, pathSuffix) => renderChild(childTree, childValue, pathSuffix);
 	const componentHint = tree.meta.component;
 	if (typeof componentHint === "string") {
 		const widget = widgets?.get(componentHint);
 		if (widget !== void 0) {
-			const result = widget({
-				value,
-				onChange: noop,
-				readOnly: true,
-				writeOnly: false,
-				meta: tree.meta,
-				constraints: tree.constraints,
-				path: "",
-				tree,
-				renderChild: (childTree, childValue) => renderChild(childTree, childValue)
-			});
+			const result = widget(buildRenderProps(tree, value, void 0, adaptedRenderChild, path));
 			if (result !== void 0 && result !== null) {
 				if (isValidElement(result)) return result;
 				if (typeof result === "string" || typeof result === "number") return result;
@@ -99,31 +98,7 @@ function renderFieldServer(tree, value, resolver, renderChild, widgets) {
 	}
 	const renderFn = getRenderFunction(tree.type, resolver);
 	if (renderFn !== void 0) {
-		const props = {
-			value,
-			onChange: noop,
-			readOnly: true,
-			writeOnly: false,
-			meta: tree.meta,
-			constraints: tree.constraints,
-			path: "",
-			tree,
-			renderChild: (childTree, childValue) => renderChild(childTree, childValue)
-		};
-		if (tree.type === "enum") props.enumValues = tree.enumValues;
-		if (tree.type === "array" && tree.element !== void 0) props.element = tree.element;
-		if (tree.type === "object") props.fields = tree.fields;
-		if (tree.type === "union" || tree.type === "discriminatedUnion") props.options = tree.options;
-		if (tree.type === "discriminatedUnion") props.discriminator = tree.discriminator;
-		if (tree.type === "record") props.keyType = tree.keyType;
-		if (tree.type === "record") props.valueType = tree.valueType;
-		if (tree.type === "tuple") props.prefixItems = tree.prefixItems;
-		if (tree.type === "conditional") props.ifClause = tree.ifClause;
-		if (tree.type === "conditional" && tree.thenClause !== void 0) props.thenClause = tree.thenClause;
-		if (tree.type === "conditional" && tree.elseClause !== void 0) props.elseClause = tree.elseClause;
-		if (tree.type === "negation") props.negated = tree.negated;
-		if (tree.type === "recursive") props.refTarget = tree.refTarget;
-		if (tree.type === "literal") props.literalValues = tree.literalValues;
+		const props = buildRenderProps(tree, value, void 0, adaptedRenderChild, path);
 		try {
 			const result = renderFn(props);
 			if (result !== void 0 && result !== null) {

package/dist/react/headless.d.mts

@@ -1,4 +1,4 @@
-import { r as ComponentResolver } from "../renderer-BdSqllx5.mjs";
+import { r as ComponentResolver } from "../renderer-DXo-rXHJ.mjs";
 
 //#region src/react/headless.d.ts
 /**

package/dist/react/headlessRenderers.d.mts

@@ -1,5 +1,5 @@
 import { M as WalkedField } from "../types-D_5ST7SS.mjs";
-import { l as RenderProps } from "../renderer-BdSqllx5.mjs";
+import { l as RenderProps } from "../renderer-DXo-rXHJ.mjs";
 import { ReactNode } from "react";
 
 //#region src/react/headlessRenderers.d.ts
@@ -8,6 +8,19 @@ import { ReactNode } from "react";
  * Returns `null` for unrecognised values.
  */
 declare function toReactNode(value: unknown): ReactNode;
+/**
+ * Build a stable, unique input ID from the path.
+ * Used for `htmlFor`/`id` association between labels and inputs.
+ *
+ * Throws on an empty path: the previous "sc-field" fallback caused every
+ * input across a form to share the same id, breaking label-input pairing
+ * and screen reader navigation. Callers must thread a non-empty path
+ * (see `ROOT_PATH` and `joinPath` in `SchemaComponent.tsx`).
+ *
+ * Dots and bracket indices in paths are converted to hyphens to keep the
+ * id valid as a CSS selector and predictable in test queries.
+ */
+declare function inputId(path: string): string;
 declare function renderString(props: RenderProps): ReactNode;
 declare function renderNumber(props: RenderProps): ReactNode;
 declare function renderBoolean(props: RenderProps): ReactNode;
@@ -46,4 +59,4 @@ declare function renderFile(props: RenderProps): ReactNode;
 declare function renderRecursive(props: RenderProps): ReactNode;
 declare function renderUnknown(props: RenderProps): ReactNode;
 //#endregion
-export { defaultRecordValue, discriminatedUnionValueForTab, nextRecordKey, renameRecordKey, renderArray, renderBoolean, renderDiscriminatedUnion, renderEnum, renderFile, renderNumber, renderObject, renderRecord, renderRecursive, renderString, renderUnion, renderUnknown, toReactNode };
+export { defaultRecordValue, discriminatedUnionValueForTab, inputId, nextRecordKey, renameRecordKey, renderArray, renderBoolean, renderDiscriminatedUnion, renderEnum, renderFile, renderNumber, renderObject, renderRecord, renderRecursive, renderString, renderUnion, renderUnknown, toReactNode };

package/dist/react/headlessRenderers.mjs

@@ -1,6 +1,6 @@
 import { isObject } from "../core/guards.mjs";
+import { isValidElement, useCallback, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { isValidElement, useCallback, useRef } from "react";
 //#region src/react/headlessRenderers.tsx
 /**
 * Headless renderer functions — one per schema type.
@@ -57,12 +57,20 @@ function dateInputType(format) {
 	if (format === "date-time" || format === "datetime") return "datetime-local";
 }
 /**
-* Build a stable, unique-ish input ID from the path.
+* Build a stable, unique input ID from the path.
 * Used for `htmlFor`/`id` association between labels and inputs.
+*
+* Throws on an empty path: the previous "sc-field" fallback caused every
+* input across a form to share the same id, breaking label-input pairing
+* and screen reader navigation. Callers must thread a non-empty path
+* (see `ROOT_PATH` and `joinPath` in `SchemaComponent.tsx`).
+*
+* Dots and bracket indices in paths are converted to hyphens to keep the
+* id valid as a CSS selector and predictable in test queries.
 */
 function inputId(path) {
-	if (path.length === 0) return "sc-field";
-	return `sc-${path}`;
+	if (path.length === 0) throw new Error("inputId requires a non-empty path. Pass ROOT_PATH for the root field and use renderChild's pathSuffix to derive child paths.");
+	return `sc-${path.replace(/[.[\]]+/g, "-").replace(/-+$/g, "")}`;
 }
 function renderString(props) {
 	const id = inputId(props.path);
@@ -245,14 +253,14 @@ function renderObject(props) {
 	});
 	return /* @__PURE__ */ jsxs("fieldset", { children: [typeof props.meta.description === "string" && /* @__PURE__ */ jsx("legend", { children: props.meta.description }), sortedEntries.filter(([, field]) => field.meta.visible !== false).map(([key, field]) => {
 		const childValue = obj[key];
-		const childId = inputId(props.path ? `${props.path}.${key}` : key);
+		const childId = inputId(`${props.path}.${key}`);
 		const childOnChange = (v) => {
 			const updated = {};
 			for (const [k, val] of Object.entries(obj)) updated[k] = val;
 			updated[key] = v;
 			props.onChange(updated);
 		};
-		const child = toReactNode(props.renderChild(field, childValue, childOnChange));
+		const child = toReactNode(props.renderChild(field, childValue, childOnChange, key));
 		if (child === null || child === void 0) return null;
 		return /* @__PURE__ */ jsxs("div", { children: [typeof field.meta.description === "string" && /* @__PURE__ */ jsxs("label", {
 			htmlFor: childId,
@@ -318,9 +326,9 @@ function renderRecord(props) {
 			"aria-label": props.meta.description ?? "Record",
 			children: entries.map(([key, value]) => {
 				return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
-					htmlFor: inputId(props.path ? `${props.path}.${key}` : key),
+					htmlFor: inputId(`${props.path}.${key}`),
 					children: key
-				}), toReactNode(props.renderChild(valueType, value, () => {}))] }, key);
+				}), toReactNode(props.renderChild(valueType, value, () => {}, key))] }, key);
 			})
 		});
 	}
@@ -355,7 +363,7 @@ function renderRecord(props) {
 		children: [entries.map(([key, value]) => {
 			return /* @__PURE__ */ jsxs("div", { children: [
 				/* @__PURE__ */ jsx("input", {
-					id: `${inputId(props.path ? `${props.path}.${key}` : key)}-key`,
+					id: `${inputId(`${props.path}.${key}`)}-key`,
 					type: "text",
 					"aria-label": "Entry key",
 					defaultValue: key,
@@ -365,7 +373,7 @@ function renderRecord(props) {
 				}),
 				toReactNode(props.renderChild(valueType, value, (nextValue) => {
 					handleValueChange(key, nextValue);
-				})),
+				}, key)),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					"aria-label": `Remove entry ${key}`,
@@ -397,7 +405,7 @@ function renderArray(props) {
 				next[i] = v;
 				props.onChange(next);
 			};
-			return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(element, item, childOnChange)) }, String(i));
+			return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(element, item, childOnChange, `[${String(i)}]`)) }, String(i));
 		})
 	});
 }
@@ -467,14 +475,20 @@ function discriminatedUnionValueForTab(optionLabels, discKey, newIndex) {
 }
 /**
 * WAI-ARIA tabs component for discriminated unions.
-* Implements the full tabs keyboard pattern:
-* - Left/Right arrow keys move between tabs
-* - Home/End move to first/last tab
-* - Tab moves focus into the active panel
-* - aria-selected, aria-controls, role="tablist"/"tab"/"tabpanel"
+*
+* Implements the WAI-ARIA "Tabs with Automatic Activation" pattern
+* (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/):
+* - ArrowRight / ArrowLeft move between tabs, wrapping at the extremes
+* - Home / End jump to the first / last tab
+* - aria-selected, aria-controls, role="tablist" / "tab" / "tabpanel"
+* - Roving tabindex: the active tab has tabindex=0, the rest tabindex=-1
+*
+* "Automatic activation" means each arrow key both moves focus and
+* activates the new tab in one step — selection and focus stay aligned.
 */
 function DiscriminatedUnionTabs({ options, optionLabels, activeIndex, panelId, discKey, props }) {
 	const tabRefs = useRef([]);
+	const pendingFocusRef = useRef(false);
 	const handleTabChange = useCallback((newIndex) => {
 		const next = discriminatedUnionValueForTab(optionLabels, discKey, newIndex);
 		if (next === void 0) return;
@@ -482,31 +496,31 @@ function DiscriminatedUnionTabs({ options, optionLabels, activeIndex, panelId, d
 	}, [
 		optionLabels,
 		discKey,
-		props
+		props.onChange
 	]);
-	const focusTab = useCallback((index) => {
-		const clamped = (index % options.length + options.length) % options.length;
-		tabRefs.current[clamped]?.focus();
-	}, [options.length]);
+	const wrapIndex = useCallback((index) => (index % options.length + options.length) % options.length, [options.length]);
 	const handleKeyDown = useCallback((e) => {
-		if (e.key === "ArrowRight") {
-			e.preventDefault();
-			focusTab(activeIndex + 1);
-		} else if (e.key === "ArrowLeft") {
-			e.preventDefault();
-			focusTab(activeIndex - 1);
-		} else if (e.key === "Home") {
-			e.preventDefault();
-			focusTab(0);
-		} else if (e.key === "End") {
-			e.preventDefault();
-			focusTab(options.length - 1);
-		}
+		let target;
+		if (e.key === "ArrowRight") target = wrapIndex(activeIndex + 1);
+		else if (e.key === "ArrowLeft") target = wrapIndex(activeIndex - 1);
+		else if (e.key === "Home") target = 0;
+		else if (e.key === "End") target = options.length - 1;
+		if (target === void 0) return;
+		e.preventDefault();
+		if (target === activeIndex) return;
+		pendingFocusRef.current = true;
+		handleTabChange(target);
 	}, [
 		activeIndex,
-		focusTab,
-		options.length
+		handleTabChange,
+		options.length,
+		wrapIndex
 	]);
+	useEffect(() => {
+		if (!pendingFocusRef.current) return;
+		pendingFocusRef.current = false;
+		tabRefs.current[activeIndex]?.focus();
+	}, [activeIndex]);
 	const activeOption = options[activeIndex];
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
 		role: "tablist",
@@ -523,6 +537,7 @@ function DiscriminatedUnionTabs({ options, optionLabels, activeIndex, panelId, d
 			},
 			type: "button",
 			role: "tab",
+			id: `${panelId}-tab-${String(i)}`,
 			"aria-selected": i === activeIndex ? "true" : void 0,
 			"aria-controls": `${panelId}-panel`,
 			tabIndex: i === activeIndex ? 0 : -1,
@@ -608,4 +623,4 @@ function matchUnionOption(options, value) {
 	if (typeof value === "object" && value !== null) return options.find((o) => o.type === "object");
 }
 //#endregion
-export { defaultRecordValue, discriminatedUnionValueForTab, nextRecordKey, renameRecordKey, renderArray, renderBoolean, renderDiscriminatedUnion, renderEnum, renderFile, renderNumber, renderObject, renderRecord, renderRecursive, renderString, renderUnion, renderUnknown, toReactNode };
+export { defaultRecordValue, discriminatedUnionValueForTab, inputId, nextRecordKey, renameRecordKey, renderArray, renderBoolean, renderDiscriminatedUnion, renderEnum, renderFile, renderNumber, renderObject, renderRecord, renderRecursive, renderString, renderUnion, renderUnknown, toReactNode };

package/dist/{ref-DvWoULcy.d.mts → ref-Ckt5liZs.d.mts}

@@ -1,4 +1,4 @@
-import { i as DiagnosticsOptions } from "./diagnostics-DzbZmcLI.mjs";
+import { i as DiagnosticsOptions } from "./diagnostics-BYk63jsC.mjs";
 
 //#region src/core/ref.d.ts
 /**

package/dist/{renderer-BdSqllx5.d.mts → renderer-DXo-rXHJ.d.mts}

@@ -69,8 +69,17 @@ interface RenderProps extends BaseFieldProps {
    * Render a child field. Theme adapters call this to recursively render
    * nested structures (object fields, array elements, union options).
    * The resolver and rendering context are already wired in.
+   *
+   * @param tree - The walked field tree for the child
+   * @param value - The child's current value
+   * @param onChange - Callback receiving the child's next value
+   * @param pathSuffix - Path segment from the parent (e.g. "city",
+   *   "[0]"). Joined to the parent's path with a dot, or substituted
+   *   when the parent acts as a transparent wrapper (union options).
+   *   Required for every container — without it children inherit no
+   *   path and `inputId()` will throw.
    */
-  renderChild: (tree: WalkedField, value: unknown, onChange: (v: unknown) => void) => unknown;
+  renderChild: (tree: WalkedField, value: unknown, onChange: (v: unknown) => void, pathSuffix?: string) => unknown;
 }
 /**
  * Props for HTML render functions. Extends BaseFieldProps with:
@@ -90,6 +99,23 @@ interface HtmlRenderProps extends BaseFieldProps {
    */
   renderChild: (tree: WalkedField, value: unknown, pathSuffix?: string) => string;
 }
+/**
+ * Build the `RenderProps` object handed to a resolver render function or a
+ * widget. Used by both the server-side `<SchemaView>` (which has no
+ * `onChange`) and the client-side `<SchemaComponent>` (which threads an
+ * `onChange` callback).
+ *
+ * When `onChange` is `undefined` the caller is rendering in read-only mode:
+ * a noop `onChange` is wired up, `readOnly` is forced to `true`, and
+ * `writeOnly` is forced to `false`. Otherwise the editability is taken
+ * from `tree.editability`.
+ *
+ * The duplicate sibling fields (`enumValues`, `element`, `fields`, etc.)
+ * are populated for backwards compatibility with renderers that have not
+ * yet migrated to reading from `tree` directly. New renderers should
+ * narrow on `tree.type` and read from `tree`.
+ */
+declare function buildRenderProps(tree: WalkedField, value: unknown, onChange: ((next: unknown) => void) | undefined, renderChild: RenderProps["renderChild"], path: string): RenderProps;
 type RenderFunction = (props: RenderProps) => unknown;
 interface ComponentResolver {
   string?: RenderFunction;
@@ -157,4 +183,4 @@ declare function mergeResolvers(user: ComponentResolver, fallback: ComponentReso
  */
 declare function mergeHtmlResolvers(user: HtmlResolver, fallback: HtmlResolver): HtmlResolver;
 //#endregion
-export { HtmlRenderProps as a, RenderFunction as c, getRenderFunction as d, mergeHtmlResolvers as f, HtmlRenderFunction as i, RenderProps as l, typeToKey as m, BaseFieldProps as n, HtmlResolver as o, mergeResolvers as p, ComponentResolver as r, RESOLVER_KEYS as s, AllConstraints as t, getHtmlRenderFn as u };
+export { HtmlRenderProps as a, RenderFunction as c, getHtmlRenderFn as d, getRenderFunction as f, typeToKey as h, HtmlRenderFunction as i, RenderProps as l, mergeResolvers as m, BaseFieldProps as n, HtmlResolver as o, mergeHtmlResolvers as p, ComponentResolver as r, RESOLVER_KEYS as s, AllConstraints as t, buildRenderProps as u };

package/dist/themes/mantine.d.mts

@@ -1,9 +1,13 @@
-import { r as ComponentResolver } from "../renderer-BdSqllx5.mjs";
+import { r as ComponentResolver } from "../renderer-DXo-rXHJ.mjs";
 
 //#region src/themes/mantine.d.ts
 /**
  * Register real Mantine components for the resolver to use.
  * Call once at app startup before rendering.
+ *
+ * `Text` is required so read-only scalars render as a styled Mantine
+ * `<Text>` element instead of a bare `<span>`, matching the visual
+ * weight of the editable variants.
  */
 declare function registerMantineComponents(components: {
   TextInput: React.ElementType;
@@ -11,6 +15,7 @@ declare function registerMantineComponents(components: {
   Switch: React.ElementType;
   Select: React.ElementType;
   Fieldset: React.ElementType;
+  Text: React.ElementType;
 }): void;
 declare const mantineResolver: ComponentResolver;
 //#endregion