schema-components 1.16.2 → 1.17.0

package/dist/react/headlessRenderers.mjs

@@ -1,6 +1,6 @@
 import { isObject } from "../core/guards.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { isValidElement, useCallback, useRef } from "react";
+import { isValidElement, useCallback, useEffect, 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,
@@ -264,31 +272,123 @@ function renderObject(props) {
 		}), child] }, key);
 	})] });
 }
+/**
+* Compute the default value for a freshly added record entry based on the
+* record's value-type schema. Mirrors the read of `defaultValue` used
+* elsewhere in the renderer, falling back to a type-appropriate empty value.
+*/
+function defaultRecordValue(valueType) {
+	if (valueType.defaultValue !== void 0) return valueType.defaultValue;
+	switch (valueType.type) {
+		case "string": return "";
+		case "number": return 0;
+		case "boolean": return false;
+		case "array": return [];
+		case "object":
+		case "record": return {};
+		default: return;
+	}
+}
+/**
+* Generate a unique, currently-unused key for a new record entry.
+* Picks the first of `key`, `key-1`, `key-2`, … that is not in `existing`.
+*/
+function nextRecordKey(existing, base = "key") {
+	if (!existing.includes(base)) return base;
+	let i = 1;
+	while (existing.includes(`${base}-${String(i)}`)) i += 1;
+	return `${base}-${String(i)}`;
+}
+/**
+* Rename a key in an object while preserving insertion order. Returns the
+* original object reference when the rename is a no-op (oldKey === newKey)
+* or when newKey collides with an existing key.
+*/
+function renameRecordKey(obj, oldKey, newKey) {
+	if (oldKey === newKey) return obj;
+	if (newKey in obj && newKey !== oldKey) return obj;
+	const renamed = {};
+	for (const [k, v] of Object.entries(obj)) renamed[k === oldKey ? newKey : k] = v;
+	return renamed;
+}
 function renderRecord(props) {
 	const obj = isObject(props.value) ? props.value : {};
 	const valueType = props.valueType;
 	if (valueType === void 0) return null;
 	const entries = Object.entries(obj);
-	if (entries.length === 0) return /* @__PURE__ */ jsx("span", {
-		"aria-readonly": props.readOnly ? "true" : void 0,
-		children: "—"
-	});
-	return /* @__PURE__ */ jsx("div", {
+	if (props.readOnly) {
+		if (entries.length === 0) return /* @__PURE__ */ jsx("span", {
+			"aria-readonly": "true",
+			children: "—"
+		});
+		return /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-label": props.meta.description ?? "Record",
+			children: entries.map(([key, value]) => {
+				return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: inputId(`${props.path}.${key}`),
+					children: key
+				}), toReactNode(props.renderChild(valueType, value, () => {}, key))] }, key);
+			})
+		});
+	}
+	const handleRename = (oldKey, newKey) => {
+		const renamed = renameRecordKey(obj, oldKey, newKey);
+		if (renamed === obj) return;
+		props.onChange(renamed);
+	};
+	const handleValueChange = (key, nextValue) => {
+		const updated = {};
+		for (const [k, val] of Object.entries(obj)) updated[k] = val;
+		updated[key] = nextValue;
+		props.onChange(updated);
+	};
+	const handleRemove = (key) => {
+		const next = {};
+		for (const [k, v] of Object.entries(obj)) {
+			if (k === key) continue;
+			next[k] = v;
+		}
+		props.onChange(next);
+	};
+	const handleAdd = () => {
+		const newKey = nextRecordKey(Object.keys(obj));
+		const next = { ...obj };
+		next[newKey] = defaultRecordValue(valueType);
+		props.onChange(next);
+	};
+	return /* @__PURE__ */ jsxs("div", {
 		role: "group",
 		"aria-label": props.meta.description ?? "Record",
-		children: entries.map(([key, value]) => {
-			const childId = inputId(props.path ? `${props.path}.${key}` : key);
-			const childOnChange = (nextValue) => {
-				const updated = {};
-				for (const [k, val] of Object.entries(obj)) updated[k] = val;
-				updated[key] = nextValue;
-				props.onChange(updated);
-			};
-			return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
-				htmlFor: childId,
-				children: key
-			}), toReactNode(props.renderChild(valueType, value, childOnChange))] }, key);
-		})
+		children: [entries.map(([key, value]) => {
+			return /* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx("input", {
+					id: `${inputId(`${props.path}.${key}`)}-key`,
+					type: "text",
+					"aria-label": "Entry key",
+					defaultValue: key,
+					onBlur: (e) => {
+						handleRename(key, e.target.value);
+					}
+				}),
+				toReactNode(props.renderChild(valueType, value, (nextValue) => {
+					handleValueChange(key, nextValue);
+				}, key)),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": `Remove entry ${key}`,
+					onClick: () => {
+						handleRemove(key);
+					},
+					children: "Remove"
+				})
+			] }, key);
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Add entry",
+			onClick: handleAdd,
+			children: "Add"
+		})]
 	});
 }
 function renderArray(props) {
@@ -305,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));
 		})
 	});
 }
@@ -362,47 +462,65 @@ function renderDiscriminatedUnion(props) {
 	});
 }
 /**
+* Pure helper: convert a tab index into the new value the discriminated
+* union should emit. Returns `undefined` when the index is out of bounds.
+*
+* Extracted from `DiscriminatedUnionTabs` so the contract is unit-testable
+* without rendering the tabs component (which relies on React hooks).
+*/
+function discriminatedUnionValueForTab(optionLabels, discKey, newIndex) {
+	const label = optionLabels[newIndex];
+	if (label === void 0) return void 0;
+	return { [discKey]: label };
+}
+/**
 * 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 label = optionLabels[newIndex];
-		if (label === void 0) return;
-		props.onChange({ [discKey]: label });
+		const next = discriminatedUnionValueForTab(optionLabels, discKey, newIndex);
+		if (next === void 0) return;
+		props.onChange(next);
 	}, [
 		optionLabels,
 		discKey,
 		props
 	]);
-	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",
@@ -504,4 +622,4 @@ function matchUnionOption(options, value) {
 	if (typeof value === "object" && value !== null) return options.find((o) => o.type === "object");
 }
 //#endregion
-export { 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/{renderer-BdSqllx5.d.mts → renderer-B3s8o2B8.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:

package/dist/themes/mantine.d.mts

@@ -1,9 +1,13 @@
-import { r as ComponentResolver } from "../renderer-BdSqllx5.mjs";
+import { r as ComponentResolver } from "../renderer-B3s8o2B8.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

package/dist/themes/mantine.mjs

@@ -1,5 +1,5 @@
 import { isObject } from "../core/guards.mjs";
-import { toReactNode } from "../react/headlessRenderers.mjs";
+import { inputId, toReactNode } from "../react/headlessRenderers.mjs";
 import { headlessResolver } from "../react/headless.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/themes/mantine.tsx
@@ -17,9 +17,14 @@ let MantineSwitch = (props) => /* @__PURE__ */ jsx("input", {
 });
 let MantineSelect = (props) => /* @__PURE__ */ jsx("select", { ...props });
 let MantineFieldset = (props) => /* @__PURE__ */ jsx("fieldset", { ...props });
+let MantineText = (props) => /* @__PURE__ */ jsx("span", { ...props });
 /**
 * 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.
 */
 function registerMantineComponents(components) {
 	MantineTextInput = components.TextInput;
@@ -27,12 +32,18 @@ function registerMantineComponents(components) {
 	MantineSwitch = components.Switch;
 	MantineSelect = components.Select;
 	MantineFieldset = components.Fieldset;
+	MantineText = components.Text;
 }
 function renderStringInput(props) {
 	const strValue = typeof props.value === "string" ? props.value : "";
 	const label = getLabel(props);
-	if (props.readOnly) return /* @__PURE__ */ jsx("span", { children: strValue || "—" });
+	const id = inputId(props.path);
+	if (props.readOnly) return /* @__PURE__ */ jsx(MantineText, {
+		id,
+		children: strValue || "—"
+	});
 	return /* @__PURE__ */ jsx(MantineTextInput, {
+		id,
 		label,
 		value: props.writeOnly ? "" : strValue,
 		onChange: (e) => {
@@ -42,11 +53,19 @@ function renderStringInput(props) {
 }
 function renderNumberInput(props) {
 	const label = getLabel(props);
+	const id = inputId(props.path);
 	if (props.readOnly) {
-		if (typeof props.value !== "number") return /* @__PURE__ */ jsx("span", { children: "—" });
-		return /* @__PURE__ */ jsx("span", { children: props.value.toLocaleString() });
+		if (typeof props.value !== "number") return /* @__PURE__ */ jsx(MantineText, {
+			id,
+			children: "—"
+		});
+		return /* @__PURE__ */ jsx(MantineText, {
+			id,
+			children: props.value.toLocaleString()
+		});
 	}
 	return /* @__PURE__ */ jsx(MantineNumberInput, {
+		id,
 		label,
 		value: props.writeOnly ? void 0 : typeof props.value === "number" ? props.value : void 0,
 		onChange: (v) => {
@@ -56,11 +75,19 @@ function renderNumberInput(props) {
 }
 function renderBooleanInput(props) {
 	const label = getLabel(props);
+	const id = inputId(props.path);
 	if (props.readOnly) {
-		if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx("span", { children: "—" });
-		return /* @__PURE__ */ jsx("span", { children: props.value ? "Yes" : "No" });
+		if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx(MantineText, {
+			id,
+			children: "—"
+		});
+		return /* @__PURE__ */ jsx(MantineText, {
+			id,
+			children: props.value ? "Yes" : "No"
+		});
 	}
 	return /* @__PURE__ */ jsx(MantineSwitch, {
+		id,
 		label,
 		checked: props.writeOnly ? false : props.value === true,
 		onChange: (e) => {
@@ -71,8 +98,13 @@ function renderBooleanInput(props) {
 function renderEnumInput(props) {
 	const enumValue = typeof props.value === "string" ? props.value : "";
 	const label = getLabel(props);
-	if (props.readOnly) return /* @__PURE__ */ jsx("span", { children: enumValue || "—" });
+	const id = inputId(props.path);
+	if (props.readOnly) return /* @__PURE__ */ jsx(MantineText, {
+		id,
+		children: enumValue || "—"
+	});
 	return /* @__PURE__ */ jsx(MantineSelect, {
+		id,
 		label,
 		value: props.writeOnly ? null : enumValue || null,
 		onChange: (v) => {
@@ -100,7 +132,7 @@ function renderObjectContainer(props) {
 			};
 			return /* @__PURE__ */ jsx("div", {
 				style: { marginBottom: "0.5rem" },
-				children: toReactNode(props.renderChild(field, childValue, childOnChange))
+				children: toReactNode(props.renderChild(field, childValue, childOnChange, key))
 			}, key);
 		})
 	});

package/dist/themes/mui.d.mts

@@ -1,4 +1,4 @@
-import { r as ComponentResolver } from "../renderer-BdSqllx5.mjs";
+import { r as ComponentResolver } from "../renderer-B3s8o2B8.mjs";
 
 //#region src/themes/mui.d.ts
 /**

package/dist/themes/mui.mjs

@@ -1,5 +1,5 @@
 import { isObject } from "../core/guards.mjs";
-import { toReactNode } from "../react/headlessRenderers.mjs";
+import { inputId, toReactNode } from "../react/headlessRenderers.mjs";
 import { headlessResolver } from "../react/headless.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isValidElement } from "react";
@@ -10,11 +10,14 @@ function ariaRequired(tree) {
 function renderStringInput(props) {
 	const strValue = typeof props.value === "string" ? props.value : "";
 	const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
+	const id = inputId(props.path);
 	if (props.readOnly) return /* @__PURE__ */ jsx(MuiTypography, {
+		id,
 		variant: "body2",
 		children: strValue || "—"
 	});
 	return /* @__PURE__ */ jsx(MuiTextField, {
+		id,
 		label,
 		type: props.constraints.format === "email" ? "email" : props.constraints.format === "uri" ? "url" : "text",
 		value: props.writeOnly ? "" : strValue,
@@ -33,17 +36,21 @@ function renderStringInput(props) {
 }
 function renderNumberInput(props) {
 	const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
+	const id = inputId(props.path);
 	if (props.readOnly) {
 		if (typeof props.value !== "number") return /* @__PURE__ */ jsx(MuiTypography, {
+			id,
 			variant: "body2",
 			children: "—"
 		});
 		return /* @__PURE__ */ jsx(MuiTypography, {
+			id,
 			variant: "body2",
 			children: props.value.toLocaleString()
 		});
 	}
 	return /* @__PURE__ */ jsx(MuiTextField, {
+		id,
 		label,
 		type: "number",
 		value: props.writeOnly ? "" : typeof props.value === "number" ? props.value : "",
@@ -62,18 +69,22 @@ function renderNumberInput(props) {
 }
 function renderBooleanInput(props) {
 	const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
+	const id = inputId(props.path);
 	if (props.readOnly) {
 		if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx(MuiTypography, {
+			id,
 			variant: "body2",
 			children: "—"
 		});
 		return /* @__PURE__ */ jsx(MuiTypography, {
+			id,
 			variant: "body2",
 			children: props.value ? "Yes" : "No"
 		});
 	}
 	return /* @__PURE__ */ jsx(MuiFormControlLabel, {
 		control: /* @__PURE__ */ jsx(MuiCheckbox, {
+			id,
 			checked: props.writeOnly ? false : props.value === true,
 			onChange: (e) => {
 				props.onChange(e.target.checked);
@@ -85,11 +96,14 @@ function renderBooleanInput(props) {
 function renderEnumInput(props) {
 	const enumValue = typeof props.value === "string" ? props.value : "";
 	const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
+	const id = inputId(props.path);
 	if (props.readOnly) return /* @__PURE__ */ jsx(MuiTypography, {
+		id,
 		variant: "body2",
 		children: enumValue || "—"
 	});
 	return /* @__PURE__ */ jsxs(MuiTextField, {
+		id,
 		select: true,
 		label,
 		value: props.writeOnly ? "" : enumValue,
@@ -130,7 +144,7 @@ function renderObjectContainer(props) {
 				updated[key] = v;
 				props.onChange(updated);
 			};
-			return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(field, childValue, childOnChange)) }, key);
+			return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(field, childValue, childOnChange, key)) }, key);
 		})]
 	});
 }
@@ -150,7 +164,7 @@ function renderArrayContainer(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));
 		})
 	});
 }

package/dist/themes/radix.d.mts

@@ -1,4 +1,4 @@
-import { r as ComponentResolver } from "../renderer-BdSqllx5.mjs";
+import { r as ComponentResolver } from "../renderer-B3s8o2B8.mjs";
 
 //#region src/themes/radix.d.ts
 /**