schema-components 1.0.0 → 1.2.0

package/dist/react/SchemaView.d.mts

@@ -0,0 +1,41 @@
+import { b as ComponentResolver, m as SchemaMeta } from "../types-DDCD6Xnx.mjs";
+import { ReactNode } from "react";
+
+//#region src/react/SchemaView.d.ts
+interface SchemaViewProps {
+  /** Zod schema, JSON Schema object, or OpenAPI document. */
+  schema: unknown;
+  /** For OpenAPI: a ref string like "#/components/schemas/User". */
+  ref?: string;
+  /** Current value to render. */
+  value?: unknown;
+  /** Per-field meta overrides. */
+  fields?: Record<string, unknown>;
+  /** Meta overrides applied to the root schema. */
+  meta?: SchemaMeta;
+  /** Convenience: sets description on the root. */
+  description?: string;
+  /**
+   * Theme resolver. In a Server Component you pass this explicitly
+   * since `SchemaProvider` (React context) is unavailable.
+   * Falls back to the headless resolver if omitted.
+   */
+  resolver?: ComponentResolver;
+}
+/**
+ * Server-safe schema renderer — no hooks, no context, no state.
+ *
+ * Always renders in read-only mode. For editable forms, use
+ * `<SchemaComponent>` with `"use client"`.
+ */
+declare function SchemaView({
+  schema: schemaInput,
+  ref: refInput,
+  value,
+  fields,
+  meta: componentMeta,
+  description,
+  resolver
+}: SchemaViewProps): ReactNode;
+//#endregion
+export { SchemaView, SchemaViewProps };

package/dist/react/SchemaView.mjs

@@ -0,0 +1,102 @@
+import { normaliseSchema } from "../core/adapter.mjs";
+import { SchemaNormalisationError, SchemaRenderError } from "../core/errors.mjs";
+import { getRenderFunction, mergeResolvers } from "../core/renderer.mjs";
+import { walk } from "../core/walker.mjs";
+import { headlessResolver } from "./headless.mjs";
+import { isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#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.
+*
+* **Read-only only.** For interactive forms with `onChange`, use
+* `<SchemaComponent>` (which requires `"use client"`).
+*
+* Usage in a Server Component:
+* ```tsx
+* import { SchemaView } from "schema-components/react/SchemaView";
+*
+* export default async function Page() {
+*   const user = await getUser();
+*   return <SchemaView schema={userSchema} value={user} />;
+* }
+* ```
+*
+* The `resolver` prop replaces the `SchemaProvider` context —
+* Server Components cannot use React context, so the resolver
+* is passed explicitly.
+*/
+function noop() {}
+/**
+* Server-safe schema renderer — no hooks, no context, no state.
+*
+* 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 }) {
+	const mergedMeta = {
+		...componentMeta,
+		readOnly: true
+	};
+	if (description !== void 0) mergedMeta.description = description;
+	let jsonSchema;
+	let rootMeta;
+	let rootDocument;
+	try {
+		const normalised = normaliseSchema(schemaInput, refInput);
+		jsonSchema = normalised.jsonSchema;
+		rootMeta = normalised.rootMeta;
+		rootDocument = normalised.rootDocument;
+	} catch (err) {
+		throw new SchemaNormalisationError(err instanceof Error ? err.message : "Failed to normalise schema", schemaInput, "unknown");
+	}
+	const tree = walk(jsonSchema, {
+		componentMeta: mergedMeta,
+		rootMeta,
+		fieldOverrides: fields,
+		rootDocument
+	});
+	const userResolver = resolver !== void 0 ? mergeResolvers(resolver, headlessResolver) : headlessResolver;
+	const renderChild = (childTree, childValue) => renderFieldServer(childTree, childValue, userResolver, renderChild);
+	return renderFieldServer(tree, value ?? tree.defaultValue, userResolver, renderChild);
+}
+function renderFieldServer(tree, value, resolver, renderChild) {
+	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.enumValues !== void 0) props.enumValues = tree.enumValues;
+		if (tree.element !== void 0) props.element = tree.element;
+		if (tree.fields !== void 0) props.fields = tree.fields;
+		if (tree.options !== void 0) props.options = tree.options;
+		if (tree.discriminator !== void 0) props.discriminator = tree.discriminator;
+		if (tree.keyType !== void 0) props.keyType = tree.keyType;
+		if (tree.valueType !== void 0) props.valueType = tree.valueType;
+		try {
+			const result = renderFn(props);
+			if (result !== void 0 && result !== null) {
+				if (isValidElement(result)) return result;
+				if (typeof result === "string" || typeof result === "number") return result;
+			}
+		} catch (err) {
+			throw new SchemaRenderError(err instanceof Error ? err.message : `Render function threw for type "${tree.type}"`, tree, tree.type, err);
+		}
+	}
+	if (value === void 0 || value === null) return /* @__PURE__ */ jsx("span", { children: "\\u2014" });
+	return /* @__PURE__ */ jsx("span", { children: typeof value === "string" ? value : JSON.stringify(value) });
+}
+//#endregion
+export { SchemaView };

package/dist/react/headless.d.mts

@@ -1,4 +1,4 @@
-import { b as ComponentResolver } from "../types-BU0ETFHk.mjs";
+import { b as ComponentResolver } from "../types-DDCD6Xnx.mjs";
 import { ReactNode } from "react";
 
 //#region src/react/headless.d.ts

package/dist/react/headless.mjs

@@ -1,5 +1,5 @@
 import { isObject } from "../core/guards.mjs";
-import { isValidElement } from "react";
+import { isValidElement, useCallback, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/headless.tsx
 /**
@@ -8,6 +8,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Produces plain HTML elements for every schema type. Theme adapters
 * replace this by implementing ComponentResolver with their own components.
 *
+* Accessibility:
+* - All inputs have `id`; labels use `htmlFor` for programmatic association
+* - Discriminated union tabs follow WAI-ARIA tabs pattern (role, aria-selected,
+*   arrow key navigation, Home/End)
+* - Checkboxes are linked to visible labels where available
+* - Validation state surfaced via `aria-invalid` and `aria-errormessage`
+*
 * This module imports React and lives in the react layer, not core,
 * because it produces ReactNode values.
 */
@@ -17,36 +24,122 @@ function toReactNode(value) {
 	if (isValidElement(value)) return value;
 	return null;
 }
+function formatDateTime(value) {
+	if (typeof value !== "string" || value.length === 0) return void 0;
+	try {
+		const date = new Date(value);
+		if (isNaN(date.getTime())) return void 0;
+		return date.toLocaleString();
+	} catch {
+		return;
+	}
+}
+function formatDate(value) {
+	if (typeof value !== "string" || value.length === 0) return void 0;
+	try {
+		const date = new Date(value);
+		if (isNaN(date.getTime())) return void 0;
+		return date.toLocaleDateString();
+	} catch {
+		return;
+	}
+}
+function formatTime(value) {
+	if (typeof value !== "string" || value.length === 0) return void 0;
+	try {
+		const date = new Date(value);
+		if (isNaN(date.getTime())) return void 0;
+		return date.toLocaleTimeString();
+	} catch {
+		return;
+	}
+}
+function dateInputType(format) {
+	if (format === "date") return "date";
+	if (format === "time") return "time";
+	if (format === "date-time" || format === "datetime") return "datetime-local";
+}
+/**
+* Build a stable, unique-ish input ID from the path.
+* Used for `htmlFor`/`id` association between labels and inputs.
+*/
+function inputId(path) {
+	if (path.length === 0) return "sc-field";
+	return `sc-${path}`;
+}
 function renderString(props) {
+	const id = inputId(props.path);
 	if (props.readOnly) {
 		const strValue = typeof props.value === "string" ? props.value : void 0;
-		if (strValue === void 0 || strValue.length === 0) return /* @__PURE__ */ jsx("span", { children: "—" });
+		if (strValue === void 0 || strValue.length === 0) return /* @__PURE__ */ jsx("span", {
+			id,
+			"aria-readonly": "true",
+			children: "\\u2014"
+		});
 		const format = props.constraints.format;
 		if (format === "email") return /* @__PURE__ */ jsx("a", {
 			href: `mailto:${strValue}`,
+			id,
+			"aria-readonly": "true",
 			children: strValue
 		});
 		if (format === "uri" || format === "url") return /* @__PURE__ */ jsx("a", {
 			href: strValue,
+			id,
+			"aria-readonly": "true",
+			children: strValue
+		});
+		if (format === "date") return /* @__PURE__ */ jsx("span", {
+			id,
+			"aria-readonly": "true",
+			children: formatDate(strValue) ?? strValue
+		});
+		if (format === "time") return /* @__PURE__ */ jsx("span", {
+			id,
+			"aria-readonly": "true",
+			children: formatTime(strValue) ?? strValue
+		});
+		if (format === "date-time" || format === "datetime") return /* @__PURE__ */ jsx("span", {
+			id,
+			"aria-readonly": "true",
+			children: formatDateTime(strValue) ?? strValue
+		});
+		return /* @__PURE__ */ jsx("span", {
+			id,
+			"aria-readonly": "true",
 			children: strValue
 		});
-		return /* @__PURE__ */ jsx("span", { children: strValue });
 	}
 	const strValue = typeof props.value === "string" ? props.value : "";
+	const dateType = dateInputType(props.constraints.format);
+	const ariaAttrs = {};
+	if (props.tree.isOptional === false) ariaAttrs["aria-required"] = "true";
+	if (dateType !== void 0) return /* @__PURE__ */ jsx("input", {
+		id,
+		type: dateType,
+		value: props.writeOnly ? "" : strValue,
+		onChange: (e) => {
+			props.onChange(e.target.value);
+		},
+		...ariaAttrs
+	});
 	if (props.enumValues !== void 0 && props.enumValues.length > 0) return /* @__PURE__ */ jsxs("select", {
+		id,
 		value: strValue,
 		onChange: (e) => {
 			props.onChange(e.target.value);
 		},
+		...ariaAttrs,
 		children: [/* @__PURE__ */ jsx("option", {
 			value: "",
-			children: "Select…"
+			children: "Select\\u2026"
 		}), props.enumValues.map((v) => /* @__PURE__ */ jsx("option", {
 			value: v,
 			children: v
 		}, v))]
 	});
 	return /* @__PURE__ */ jsx("input", {
+		id,
 		type: props.constraints.format === "email" ? "email" : props.constraints.format === "uri" ? "url" : "text",
 		value: props.writeOnly ? "" : strValue,
 		onChange: (e) => {
@@ -54,49 +147,86 @@ function renderString(props) {
 		},
 		placeholder: typeof props.meta.description === "string" ? props.meta.description : void 0,
 		minLength: props.constraints.minLength,
-		maxLength: props.constraints.maxLength
+		maxLength: props.constraints.maxLength,
+		...ariaAttrs
 	});
 }
 function renderNumber(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("span", {
+			id,
+			"aria-readonly": "true",
+			children: "\\u2014"
+		});
+		return /* @__PURE__ */ jsx("span", {
+			id,
+			"aria-readonly": "true",
+			children: props.value.toLocaleString()
+		});
 	}
 	const numValue = typeof props.value === "number" ? props.value : "";
+	const ariaAttrs = {};
+	if (props.tree.isOptional === false) ariaAttrs["aria-required"] = "true";
 	return /* @__PURE__ */ jsx("input", {
+		id,
 		type: "number",
 		value: props.writeOnly ? "" : numValue,
 		onChange: (e) => {
 			props.onChange(Number(e.target.value));
 		},
 		min: props.constraints.minimum,
-		max: props.constraints.maximum
+		max: props.constraints.maximum,
+		...ariaAttrs
 	});
 }
 function renderBoolean(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("span", {
+			id,
+			"aria-readonly": "true",
+			children: "\\u2014"
+		});
+		return /* @__PURE__ */ jsx("span", {
+			id,
+			"aria-readonly": "true",
+			children: props.value ? "Yes" : "No"
+		});
 	}
+	const ariaAttrs = {};
+	if (props.tree.isOptional === false) ariaAttrs["aria-required"] = "true";
+	if (typeof props.meta.description === "string") ariaAttrs["aria-label"] = props.meta.description;
 	return /* @__PURE__ */ jsx("input", {
+		id,
 		type: "checkbox",
 		checked: props.value === true,
 		onChange: (e) => {
 			props.onChange(e.target.checked);
-		}
+		},
+		...ariaAttrs
 	});
 }
 function renderEnum(props) {
+	const id = inputId(props.path);
 	const enumValue = typeof props.value === "string" ? props.value : "";
-	if (props.readOnly) return /* @__PURE__ */ jsx("span", { children: enumValue || "—" });
+	if (props.readOnly) return /* @__PURE__ */ jsx("span", {
+		id,
+		"aria-readonly": "true",
+		children: enumValue || "—"
+	});
+	const ariaAttrs = {};
+	if (props.tree.isOptional === false) ariaAttrs["aria-required"] = "true";
 	return /* @__PURE__ */ jsxs("select", {
+		id,
 		value: props.writeOnly ? "" : enumValue,
 		onChange: (e) => {
 			props.onChange(e.target.value);
 		},
+		...ariaAttrs,
 		children: [/* @__PURE__ */ jsx("option", {
 			value: "",
-			children: "Select…"
+			children: "Select\\u2026"
 		}), props.enumValues?.map((v) => /* @__PURE__ */ jsx("option", {
 			value: v,
 			children: v
@@ -109,35 +239,210 @@ function renderObject(props) {
 	if (fields === void 0) return null;
 	return /* @__PURE__ */ jsxs("fieldset", { children: [typeof props.meta.description === "string" && /* @__PURE__ */ jsx("legend", { children: props.meta.description }), Object.entries(fields).map(([key, field]) => {
 		const childValue = obj[key];
+		const childId = inputId(props.path ? `${props.path}.${key}` : key);
 		const childOnChange = (v) => {
 			const updated = {};
 			for (const [k, val] of Object.entries(obj)) updated[k] = val;
 			updated[key] = v;
 			props.onChange(updated);
 		};
-		return /* @__PURE__ */ jsxs("div", { children: [typeof field.meta.description === "string" && /* @__PURE__ */ jsx("label", { children: field.meta.description }), toReactNode(props.renderChild(field, childValue, childOnChange))] }, key);
+		return /* @__PURE__ */ jsxs("div", { children: [typeof field.meta.description === "string" && /* @__PURE__ */ jsxs("label", {
+			htmlFor: childId,
+			children: [field.meta.description, field.isOptional === false && /* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				style: { color: "#dc2626" },
+				children: [" ", "*"]
+			})]
+		}), toReactNode(props.renderChild(field, childValue, childOnChange))] }, key);
 	})] });
 }
 function renderArray(props) {
 	const arr = Array.isArray(props.value) ? props.value : [];
 	const element = props.element;
 	if (element === void 0) return null;
-	return /* @__PURE__ */ jsx("div", { children: arr.map((item, i) => {
-		const childOnChange = (v) => {
-			const next = arr.slice();
-			next[i] = v;
-			props.onChange(next);
-		};
-		return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(element, item, childOnChange)) }, String(i));
-	}) });
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": props.meta.description ?? void 0,
+		children: arr.map((item, i) => {
+			const childOnChange = (v) => {
+				const next = arr.slice();
+				next[i] = v;
+				props.onChange(next);
+			};
+			return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(element, item, childOnChange)) }, String(i));
+		})
+	});
+}
+function renderUnion(props) {
+	const options = props.options;
+	if (options === void 0 || options.length === 0) {
+		if (props.value === void 0 || props.value === null) return /* @__PURE__ */ jsx("span", { children: "\\u2014" });
+		return /* @__PURE__ */ jsx("span", { children: JSON.stringify(props.value) });
+	}
+	const matched = matchUnionOption(options, props.value);
+	if (matched !== void 0) return toReactNode(props.renderChild(matched, props.value, props.onChange));
+	const firstOption = options[0];
+	if (firstOption !== void 0) return toReactNode(props.renderChild(firstOption, props.value, props.onChange));
+	return /* @__PURE__ */ jsx("span", { children: "\\u2014" });
+}
+function renderDiscriminatedUnion(props) {
+	const options = props.options;
+	const discriminator = props.discriminator;
+	if (options === void 0 || options.length === 0) {
+		if (props.value === void 0 || props.value === null) return /* @__PURE__ */ jsx("span", { children: "\\u2014" });
+		return /* @__PURE__ */ jsx("span", { children: JSON.stringify(props.value) });
+	}
+	const obj = isObject(props.value) ? props.value : {};
+	const discKey = discriminator ?? "";
+	const currentDiscriminatorValue = typeof obj[discKey] === "string" ? obj[discKey] : void 0;
+	const optionLabels = options.map((opt) => {
+		const discriminatorField = opt.fields?.[discKey];
+		if (discriminatorField !== void 0) {
+			const constVal = discriminatorField.literalValues?.[0];
+			if (typeof constVal === "string") return constVal;
+		}
+		return typeof opt.meta.title === "string" ? opt.meta.title : opt.type;
+	});
+	let activeIndex = 0;
+	if (currentDiscriminatorValue !== void 0) {
+		const found = optionLabels.indexOf(currentDiscriminatorValue);
+		if (found !== -1) activeIndex = found;
+	}
+	const activeOption = options[activeIndex];
+	const panelId = inputId(props.path);
+	if (props.readOnly) {
+		if (activeOption !== void 0) return toReactNode(props.renderChild(activeOption, props.value, props.onChange));
+		return /* @__PURE__ */ jsx("span", { children: "\\u2014" });
+	}
+	return /* @__PURE__ */ jsx(DiscriminatedUnionTabs, {
+		options,
+		optionLabels,
+		activeIndex,
+		panelId,
+		discKey,
+		props
+	});
+}
+/**
+* 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"
+*/
+function DiscriminatedUnionTabs({ options, optionLabels, activeIndex, panelId, discKey, props }) {
+	const tabRefs = useRef([]);
+	const handleTabChange = useCallback((newIndex) => {
+		const label = optionLabels[newIndex];
+		if (label === void 0) return;
+		props.onChange({ [discKey]: label });
+	}, [
+		optionLabels,
+		discKey,
+		props
+	]);
+	const focusTab = useCallback((index) => {
+		const clamped = (index % options.length + options.length) % options.length;
+		tabRefs.current[clamped]?.focus();
+	}, [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);
+		}
+	}, [
+		activeIndex,
+		focusTab,
+		options.length
+	]);
+	const activeOption = options[activeIndex];
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+		role: "tablist",
+		"aria-label": "Select variant",
+		style: {
+			display: "flex",
+			gap: "0.25rem",
+			marginBottom: "0.5rem"
+		},
+		onKeyDown: handleKeyDown,
+		children: options.map((_opt, i) => /* @__PURE__ */ jsx("button", {
+			ref: (el) => {
+				tabRefs.current[i] = el;
+			},
+			type: "button",
+			role: "tab",
+			"aria-selected": i === activeIndex ? "true" : void 0,
+			"aria-controls": `${panelId}-panel`,
+			tabIndex: i === activeIndex ? 0 : -1,
+			onClick: () => {
+				handleTabChange(i);
+			},
+			style: {
+				padding: "0.25rem 0.75rem",
+				border: i === activeIndex ? "1px solid #3b82f6" : "1px solid #d1d5db",
+				borderRadius: "0.25rem",
+				background: i === activeIndex ? "#eff6ff" : "transparent",
+				cursor: "pointer",
+				fontSize: "0.875rem"
+			},
+			children: optionLabels[i]
+		}, String(i)))
+	}), /* @__PURE__ */ jsx("div", {
+		role: "tabpanel",
+		id: `${panelId}-panel`,
+		"aria-labelledby": `${panelId}-tab-${String(activeIndex)}`,
+		children: activeOption !== void 0 && toReactNode(props.renderChild(activeOption, props.value, props.onChange))
+	})] });
+}
+function renderFile(props) {
+	const id = inputId(props.path);
+	const accept = props.constraints.mimeTypes?.join(",");
+	if (props.readOnly) return /* @__PURE__ */ jsx("span", {
+		id,
+		"aria-readonly": "true",
+		children: "File field"
+	});
+	const ariaAttrs = {};
+	if (props.tree.isOptional === false) ariaAttrs["aria-required"] = "true";
+	if (typeof props.meta.description === "string") ariaAttrs["aria-label"] = props.meta.description;
+	return /* @__PURE__ */ jsx("input", {
+		id,
+		type: "file",
+		accept,
+		onChange: (e) => {
+			const file = e.target.files?.[0];
+			if (file !== void 0) props.onChange(file);
+		},
+		...ariaAttrs
+	});
 }
 function renderUnknown(props) {
+	const id = inputId(props.path);
 	if (props.readOnly) {
-		if (props.value === void 0 || props.value === null) return /* @__PURE__ */ jsx("span", { children: "—" });
-		return /* @__PURE__ */ jsx("span", { children: typeof props.value === "string" ? props.value : JSON.stringify(props.value) });
+		if (props.value === void 0 || props.value === null) return /* @__PURE__ */ jsx("span", {
+			id,
+			"aria-readonly": "true",
+			children: "\\u2014"
+		});
+		return /* @__PURE__ */ jsx("span", {
+			id,
+			"aria-readonly": "true",
+			children: typeof props.value === "string" ? props.value : JSON.stringify(props.value)
+		});
 	}
 	const strValue = typeof props.value === "string" ? props.value : "";
 	return /* @__PURE__ */ jsx("input", {
+		id,
 		type: "text",
 		value: props.writeOnly ? "" : strValue,
 		onChange: (e) => {
@@ -145,6 +450,13 @@ function renderUnknown(props) {
 		}
 	});
 }
+function matchUnionOption(options, value) {
+	if (typeof value === "string") return options.find((o) => o.type === "string" || o.type === "enum");
+	if (typeof value === "number") return options.find((o) => o.type === "number");
+	if (typeof value === "boolean") return options.find((o) => o.type === "boolean");
+	if (Array.isArray(value)) return options.find((o) => o.type === "array");
+	if (typeof value === "object" && value !== null) return options.find((o) => o.type === "object");
+}
 /**
 * The headless resolver uses props.renderChild for recursive rendering.
 * No factory function needed — the renderChild is always available
@@ -157,6 +469,9 @@ const headlessResolver = {
 	enum: renderEnum,
 	object: renderObject,
 	array: renderArray,
+	union: renderUnion,
+	discriminatedUnion: renderDiscriminatedUnion,
+	file: renderFile,
 	unknown: renderUnknown
 };
 //#endregion

package/dist/themes/mui.d.mts

@@ -0,0 +1,17 @@
+import { b as ComponentResolver } from "../types-DDCD6Xnx.mjs";
+
+//#region src/themes/mui.d.ts
+/**
+ * Register real MUI components. Call once at app startup.
+ */
+declare function registerMuiComponents(components: {
+  TextField: React.ComponentType<Record<string, unknown>>;
+  Checkbox: React.ComponentType<Record<string, unknown>>;
+  Typography: React.ComponentType<Record<string, unknown>>;
+  Box: React.ComponentType<Record<string, unknown>>;
+  MenuItem: React.ComponentType<Record<string, unknown>>;
+  FormControlLabel: React.ComponentType<Record<string, unknown>>;
+}): void;
+declare const muiResolver: ComponentResolver;
+//#endregion
+export { muiResolver, registerMuiComponents };