schema-components 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -1,3 +1,42 @@
+## [1.2.0](https://github.com/Mearman/schema-components/compare/v1.1.0...v1.2.0) (2026-05-14)
+
+### Features
+
+* add date/time and discriminated union stories ([595c559](https://github.com/Mearman/schema-components/commit/595c559c98beab7fdf28790513597bfce8c773cd))
+* comprehensive accessibility improvements ([ed11b2e](https://github.com/Mearman/schema-components/commit/ed11b2e7c408960a94c27d65f0869836720e179c))
+* discriminated union UI, date/time inputs, schema defaults ([5cde96e](https://github.com/Mearman/schema-components/commit/5cde96e77e6af642b4973cc84b0aff129813318f))
+* file upload renderer ([3742384](https://github.com/Mearman/schema-components/commit/37423849d045e9e044667d1206336207b7c60f05))
+* mui theme adapter and coverage enforcement ([adeb0b6](https://github.com/Mearman/schema-components/commit/adeb0b6bab3ee2c34fe78d26db10f5d082396cc6))
+* ssr tests and server component (SchemaView) ([7268f09](https://github.com/Mearman/schema-components/commit/7268f0918981030b55005678168cb3726c75dd74))
+
+### Bug Fixes
+
+* exclude ssr e2e test from tsconfig ([f9248cd](https://github.com/Mearman/schema-components/commit/f9248cd32c809992873153e268c77b26d4b3f1a1))
+
+### Refactoring
+
+* rename ssr test from integration to e2e ([b373e3a](https://github.com/Mearman/schema-components/commit/b373e3aa8842906ce4a53259b640eaad9f410fb6))
+
+### Documentation
+
+* add discriminated unions, date/time, defaults to README ([91bc96c](https://github.com/Mearman/schema-components/commit/91bc96c7700c81c8c903f2ba9e1a6ced4e4b5c83))
+
+### CI
+
+* add ssr e2e step and separate test script ([e023d8b](https://github.com/Mearman/schema-components/commit/e023d8bddb2f34d88059a74cab05ef391f4957b8))
+
+### Chores
+
+* downgrade storybook 10.4.0 to 10.3.6 and vite 8.0.12 to 8.0.11 ([e3f8341](https://github.com/Mearman/schema-components/commit/e3f83419cea890517d69fda8ea0a3ef3ba8fb619))
+* update dependencies (tsdown 0.22.0) ([1fc7dc0](https://github.com/Mearman/schema-components/commit/1fc7dc05f91fdabd98317684eb8bce49136c3c32))
+
+## [1.1.0](https://github.com/Mearman/schema-components/compare/v1.0.0...v1.1.0) (2026-05-14)
+
+### Features
+
+* add validation, recursive, and OpenAPI operation stories ([d1b742e](https://github.com/Mearman/schema-components/commit/d1b742e58e57e7c11ce36a7a868e1efc2574a04b))
+* expand Storybook coverage with JSON Schema, streaming, and error stories ([4378701](https://github.com/Mearman/schema-components/commit/4378701b29bcd1ebec5b8caf46bdd452d4b0f766))
+
 ## 1.0.0 (2026-05-14)
 
 ### Features

package/README.md

@@ -465,6 +465,98 @@ Resolution order: `.meta({ component })` → registered widget → theme adapter
 
 Validation uses the original Zod schema (if input was Zod) or `z.fromJSONSchema()` (if input was JSON Schema / OpenAPI).
 
+## Discriminated unions
+
+Discriminated unions (`z.discriminatedUnion` or JSON Schema `oneOf` with `const` properties) render as tabbed panels. Each tab is labelled by the discriminator's `const` value. Clicking a tab resets the value with the new discriminator.
+
+```tsx
+const payment = z.discriminatedUnion("method", [
+  z.object({
+    method: z.literal("card"),
+    cardNumber: z.string(),
+    expiry: z.string(),
+  }),
+  z.object({
+    method: z.literal("bank"),
+    accountNumber: z.string(),
+    sortCode: z.string(),
+  }),
+]);
+
+<SchemaComponent schema={payment} value={{ method: "card", cardNumber: "4111...", expiry: "12/28" }} />
+```
+
+In read-only mode, only the active variant is rendered (no tabs).
+
+## Date and time inputs
+
+String schemas with `format: "date"`, `format: "time"`, or `format: "date-time"` render as the corresponding HTML5 input types:
+
+```tsx
+const eventSchema = z.object({
+  date: z.string().meta({ format: "date" }),
+  startTime: z.string().meta({ format: "time" }),
+  createdAt: z.string().meta({ format: "date-time" }),
+});
+```
+
+This produces `<input type="date">`, `<input type="time">`, and `<input type="datetime-local">` respectively. In read-only mode, dates are formatted using `toLocaleDateString()` / `toLocaleString()`.
+
+## Schema defaults
+
+Default values from `z.string().default("hello")` or JSON Schema `"default": "hello"` are used when the `value` prop is `undefined`:
+
+```tsx
+const schema = z.object({
+  name: z.string().default("World"),
+  count: z.number().default(0),
+});
+
+// Renders with "World" and 0 pre-filled
+<SchemaComponent schema={schema} />
+```
+
+Defaults propagate through nested objects — each field uses its own default independently.
+
+## Server Components
+
+For read-only rendering in a React Server Component, use `<SchemaView>`. It has zero hooks — no `useContext`, no `useMemo`, no `useCallback` — so it works without the `"use client"` directive.
+
+```tsx
+import { SchemaView } from "schema-components/react/SchemaView";
+
+export default async function Page() {
+  const user = await getUser();
+  return <SchemaView schema={userSchema} value={user} />;
+}
+```
+
+`SchemaView` always renders read-only. For editable forms, use `<SchemaComponent>` (which requires `"use client"`).
+
+Pass the resolver explicitly since React context is unavailable in Server Components:
+
+```tsx
+import { SchemaView } from "schema-components/react/SchemaView";
+import { shadcnResolver } from "schema-components/themes/shadcn";
+
+<SchemaView schema={schema} value={data} resolver={shadcnResolver} />
+```
+
+`SchemaView` produces identical output to `<SchemaComponent readOnly>` — verified by parity tests.
+
+## File uploads
+
+String schemas with `format: "binary"` render as `<input type="file">`. Use `contentMediaType` to restrict accepted MIME types:
+
+```tsx
+const schema = z.object({
+  avatar: z.string().meta({ format: "binary" }),
+  resume: z.string().meta({ format: "binary", contentMediaType: "application/pdf" }),
+});
+```
+
+In read-only mode, file fields display a static label ("File field") since there is no value to show. The `onChange` callback receives the `File` object from the browser.
+
 ## Error handling
 
 Typed errors with `onError` callback for graceful degradation:
@@ -496,31 +588,19 @@ Without `onError`, errors re-throw. Error hierarchy: `SchemaError` → `SchemaNo
 ```
 schema-components
 ├── core            # JSON Schema walker, ComponentResolver, RenderProps, typed errors, type guards
-├── react           # SchemaComponent, SchemaProvider, SchemaField, headless renderer, error boundary
+├── react           # SchemaComponent ("use client"), SchemaView (server component), headless renderer, error boundary
 ├── openapi         # Document parser, ApiOperation, ApiParameters, ApiRequestBody, ApiResponse
 ├── html            # h() builder, renderToHtml, streaming renderers, ARIA helpers
 └── themes          # shadcn, MUI, custom adapters (separate packages)
 ```
 
-## Source files
-
-Every module is imported directly — no barrel files.
+Every module is imported directly — no barrel files. Organised exports:
 
-| File | Role |
-|---|---|
-| `core/types.ts` | SchemaMeta, Editability, WalkedField, FieldConstraints, FieldOverrides, FromJSONSchema, PathOfType |
-| `core/walker.ts` | JSON Schema walker (Draft 2020-12), `$ref` resolution, `allOf` merging, nullable/discriminated union detection |
-| `core/adapter.ts` | Normalises all inputs to JSON Schema. WeakMap schema cache. |
-| `core/renderer.ts` | `BaseFieldProps`, `RenderProps`, `HtmlRenderProps`, `ComponentResolver`, `HtmlResolver`, `mergeResolvers` |
-| `core/guards.ts` | Shared type guards: `isObject`, `getProperty`, `hasProperty`, `toRecord` |
-| `core/errors.ts` | `SchemaError`, `SchemaNormalisationError`, `SchemaRenderError`, `SchemaFieldError` |
-| `react/SchemaComponent.tsx` | Generic `<SchemaComponent<T, Ref>>`, `SchemaProvider`, `registerWidget`, `SchemaField<P>` |
-| `react/headless.tsx` | Headless default resolver, `createHeadlessResolver(renderChild)` factory |
-| `react/SchemaErrorBoundary.tsx` | React error boundary catching render errors |
-| `html/html.ts` | Typed `h()` builder — `serialize()`, `serializeChunks()`, `raw()`, `text()`, `fragment()` |
-| `html/a11y.ts` | ARIA helpers — `ariaRequiredAttrs()`, `ariaDescribedByAttrs()`, `buildHintElement()`, `requiredIndicator()` |
-| `html/renderToHtml.ts` | `renderToHtml()`, `defaultHtmlResolver` — schema → HTML string via `h()` builder |
-| `html/renderToHtmlStream.ts` | `renderToHtmlChunks()` (sync), `renderToHtmlStream()` (async), `renderToHtmlReadable()` (web ReadableStream) |
-| `openapi/parser.ts` | OpenAPI document parsing, operation extraction, `$ref` resolution |
-| `openapi/components.tsx` | `ApiOperation`, `ApiParameters`, `ApiRequestBody`, `ApiResponse` with generic type inference |
-| `themes/shadcn.tsx` | shadcn/ui theme adapter |
+```
+schema-components/core/*         # Walker, types, guards, errors, resolver
+schema-components/react/*        # SchemaComponent, SchemaView, SchemaErrorBoundary, headless
+schema-components/openapi/*      # Parser, ApiOperation, ApiParameters, etc.
+schema-components/html/*         # renderToHtml, renderToHtmlChunks, h() builder, styles
+schema-components/themes/*       # shadcn, MUI, custom adapters
+schema-components/styles.css     # Default stylesheet for HTML output
+```

package/dist/core/adapter.d.mts

@@ -1,4 +1,4 @@
-import { l as JsonObject, m as SchemaMeta } from "../types-BU0ETFHk.mjs";
+import { l as JsonObject, m as SchemaMeta } from "../types-DDCD6Xnx.mjs";
 
 //#region src/core/adapter.d.ts
 type SchemaInput = Record<string, unknown>;

package/dist/core/renderer.d.mts

@@ -1,2 +1,2 @@
-import { A as mergeResolvers, C as HtmlResolver, D as getHtmlRenderFn, E as RenderProps, O as getRenderFunction, S as HtmlRenderProps, T as RenderFunction, b as ComponentResolver, j as typeToKey, k as mergeHtmlResolvers, w as RESOLVER_KEYS, x as HtmlRenderFunction, y as BaseFieldProps } from "../types-BU0ETFHk.mjs";
+import { A as mergeResolvers, C as HtmlResolver, D as getHtmlRenderFn, E as RenderProps, O as getRenderFunction, S as HtmlRenderProps, T as RenderFunction, b as ComponentResolver, j as typeToKey, k as mergeHtmlResolvers, w as RESOLVER_KEYS, x as HtmlRenderFunction, y as BaseFieldProps } from "../types-DDCD6Xnx.mjs";
 export { BaseFieldProps, ComponentResolver, HtmlRenderFunction, HtmlRenderProps, HtmlResolver, RESOLVER_KEYS, RenderFunction, RenderProps, getHtmlRenderFn, getRenderFunction, mergeHtmlResolvers, mergeResolvers, typeToKey };

package/dist/core/renderer.mjs

@@ -8,6 +8,7 @@ const RESOLVER_KEYS = [
 	"array",
 	"record",
 	"union",
+	"discriminatedUnion",
 	"literal",
 	"file",
 	"unknown"
@@ -26,10 +27,10 @@ function typeToKey(type) {
 		case "array":
 		case "record":
 		case "union":
+		case "discriminatedUnion":
 		case "literal":
 		case "file":
 		case "unknown": return type;
-		case "discriminatedUnion": return "union";
 		default: return "unknown";
 	}
 }

package/dist/core/types.d.mts

@@ -1,3 +1,3 @@
-import { C as HtmlResolver, E as RenderProps, S as HtmlRenderProps, T as RenderFunction, _ as WalkedField, a as FromJSONSchema, b as ComponentResolver, c as InferResponseFields, d as OpenAPIResponseType, f as PathOfType, g as TypeAtPath, h as SchemaType, i as FieldOverrides, l as JsonObject, m as SchemaMeta, n as FieldConstraints, o as InferParameterOverrides, p as ResolveOpenAPIRef, r as FieldOverride, s as InferRequestBodyFields, t as Editability, u as OpenAPIRequestBodyType, v as resolveEditability, x as HtmlRenderFunction, y as BaseFieldProps } from "../types-BU0ETFHk.mjs";
+import { C as HtmlResolver, E as RenderProps, S as HtmlRenderProps, T as RenderFunction, _ as WalkedField, a as FromJSONSchema, b as ComponentResolver, c as InferResponseFields, d as OpenAPIResponseType, f as PathOfType, g as TypeAtPath, h as SchemaType, i as FieldOverrides, l as JsonObject, m as SchemaMeta, n as FieldConstraints, o as InferParameterOverrides, p as ResolveOpenAPIRef, r as FieldOverride, s as InferRequestBodyFields, t as Editability, u as OpenAPIRequestBodyType, v as resolveEditability, x as HtmlRenderFunction, y as BaseFieldProps } from "../types-DDCD6Xnx.mjs";
 import { i as SchemaRenderError, n as SchemaFieldError, r as SchemaNormalisationError, t as SchemaError } from "../errors-DIKI2C78.mjs";
 export { BaseFieldProps, ComponentResolver, Editability, FieldConstraints, FieldOverride, FieldOverrides, FromJSONSchema, HtmlRenderFunction, HtmlRenderProps, HtmlResolver, InferParameterOverrides, InferRequestBodyFields, InferResponseFields, JsonObject, OpenAPIRequestBodyType, OpenAPIResponseType, PathOfType, RenderFunction, RenderProps, ResolveOpenAPIRef, SchemaError, SchemaFieldError, SchemaMeta, SchemaNormalisationError, SchemaRenderError, SchemaType, TypeAtPath, WalkedField, resolveEditability };

package/dist/core/walker.d.mts

@@ -1,4 +1,4 @@
-import { _ as WalkedField, m as SchemaMeta } from "../types-BU0ETFHk.mjs";
+import { _ as WalkedField, m as SchemaMeta } from "../types-DDCD6Xnx.mjs";
 
 //#region src/core/walker.d.ts
 interface WalkOptions {

package/dist/html/a11y.d.mts

@@ -1,4 +1,4 @@
-import { _ as WalkedField, n as FieldConstraints } from "../types-BU0ETFHk.mjs";
+import { _ as WalkedField, n as FieldConstraints } from "../types-DDCD6Xnx.mjs";
 import { HtmlAttributes, HtmlNode } from "./html.mjs";
 
 //#region src/html/a11y.d.ts

package/dist/html/renderToHtml.d.mts

@@ -1,4 +1,4 @@
-import { C as HtmlResolver, S as HtmlRenderProps, m as SchemaMeta, x as HtmlRenderFunction } from "../types-BU0ETFHk.mjs";
+import { C as HtmlResolver, S as HtmlRenderProps, m as SchemaMeta, x as HtmlRenderFunction } from "../types-DDCD6Xnx.mjs";
 
 //#region src/html/renderToHtml.d.ts
 interface RenderToHtmlOptions {

package/dist/html/renderToHtml.mjs

@@ -24,6 +24,18 @@ import { ariaDescribedByAttrs, ariaLabelAttrs, ariaReadonlyAttrs, ariaRequiredAt
 *     resolver: { string: (props) => h("b", {}, String(props.value)) },
 *   });
 */
+function dateInputType(format) {
+	if (format === "date") return "date";
+	if (format === "time") return "time";
+	if (format === "date-time" || format === "datetime") return "datetime-local";
+}
+/**
+* Normalise a dot-separated path into a valid, `sc-` prefixed HTML ID.
+* Dots in paths (from nested objects) become hyphens.
+*/
+function fieldId(path) {
+	return `sc-${path.replace(/\./g, "-")}`;
+}
 function renderStringHtml(props) {
 	if (props.readOnly) return serialize(renderStringReadOnly(props));
 	return serialize(renderStringEditable(props));
@@ -52,8 +64,9 @@ function renderStringReadOnly(props) {
 }
 function renderStringEditable(props) {
 	const strValue = typeof props.value === "string" ? props.value : "";
-	const inputType = props.constraints.format === "email" ? "email" : props.constraints.format === "uri" ? "url" : "text";
-	const id = props.path;
+	const format = props.constraints.format;
+	const inputType = dateInputType(format) ?? (format === "email" ? "email" : format === "uri" ? "url" : "text");
+	const id = fieldId(props.path);
 	const attrs = {
 		class: "sc-input",
 		id,
@@ -84,7 +97,7 @@ function renderNumberReadOnly(props) {
 }
 function renderNumberEditable(props) {
 	const numValue = typeof props.value === "number" ? String(props.value) : "";
-	const id = props.path;
+	const id = fieldId(props.path);
 	const attrs = {
 		class: "sc-input",
 		id,
@@ -113,7 +126,7 @@ function renderBooleanReadOnly(props) {
 	}, props.value ? "Yes" : "No");
 }
 function renderBooleanEditable(props) {
-	const id = props.path;
+	const id = fieldId(props.path);
 	const attrs = {
 		class: "sc-input",
 		id,
@@ -142,7 +155,7 @@ function renderEnumReadOnly(props) {
 }
 function renderEnumEditable(props) {
 	const enumValue = typeof props.value === "string" ? props.value : "";
-	const id = props.path;
+	const id = fieldId(props.path);
 	const selectedValue = props.writeOnly ? "" : enumValue;
 	const optionNodes = [h("option", { value: "" }, "Select…"), ...(props.enumValues ?? []).map((v) => {
 		const attrs = { value: v };
@@ -173,7 +186,7 @@ function renderObjectNode(props) {
 		for (const [key, field] of Object.entries(fields)) {
 			const label = typeof field.meta.description === "string" ? field.meta.description : key;
 			const childValue = obj[key];
-			const childHtml = props.renderChild(field, childValue, key);
+			const childHtml = props.renderChild(field, childValue, props.path ? `${props.path}.${key}` : key);
 			children.push(h("dt", { class: "sc-label" }, label));
 			children.push(h("dd", { class: "sc-value" }, raw(childHtml)));
 		}
@@ -186,8 +199,9 @@ function renderObjectNode(props) {
 	for (const [key, field] of Object.entries(fields)) {
 		const label = typeof field.meta.description === "string" ? field.meta.description : key;
 		const fieldId = buildInputId(props.path, key);
+		const childPath = props.path ? `${props.path}.${key}` : key;
 		const childValue = obj[key];
-		const childHtml = props.renderChild(field, childValue, key);
+		const childHtml = props.renderChild(field, childValue, childPath);
 		const required = requiredIndicator(field);
 		const labelContent = [label];
 		if (required !== void 0) labelContent.push(required);
@@ -195,7 +209,7 @@ function renderObjectNode(props) {
 			class: "sc-label",
 			for: fieldId
 		}, ...labelContent), raw(childHtml)];
-		const hint = buildHintElement(key, field.constraints);
+		const hint = buildHintElement(fieldId, field.constraints);
 		if (hint !== void 0) fieldChildren.push(hint);
 		children.push(h("div", { class: "sc-field" }, ...fieldChildren));
 	}
@@ -263,6 +277,80 @@ function renderUnionHtml(props) {
 	if (firstOption !== void 0) return props.renderChild(firstOption, props.value);
 	return serialize(h("span", { class: "sc-value sc-value--empty" }, "—"));
 }
+function renderDiscriminatedUnionHtml(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 serialize(h("span", { class: "sc-value sc-value--empty" }, "—"));
+		return serialize(h("span", { class: "sc-value" }, JSON.stringify(props.value)));
+	}
+	const isRecord = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+	const obj = isRecord(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];
+	if (props.readOnly) {
+		if (activeOption !== void 0) return props.renderChild(activeOption, props.value);
+		return serialize(h("span", { class: "sc-value sc-value--empty" }, "—"));
+	}
+	const panelId = `sc-${props.path}-panel`;
+	const children = [h("div", {
+		role: "tablist",
+		class: "sc-tabs",
+		"aria-label": "Select variant"
+	}, ...options.map((_opt, i) => {
+		return h("button", {
+			type: "button",
+			role: "tab",
+			class: i === activeIndex ? "sc-tab sc-tab--active" : "sc-tab",
+			id: `sc-${props.path}-tab-${String(i)}`,
+			"aria-selected": i === activeIndex ? "true" : void 0,
+			"aria-controls": panelId,
+			tabindex: i === activeIndex ? "0" : "-1"
+		}, optionLabels[i]);
+	}))];
+	if (activeOption !== void 0) {
+		const childHtml = props.renderChild(activeOption, props.value);
+		children.push(h("div", {
+			role: "tabpanel",
+			id: panelId,
+			"aria-labelledby": `sc-${props.path}-tab-${String(activeIndex)}`
+		}, raw(childHtml)));
+	}
+	return serialize(h("div", { class: "sc-discriminated-union" }, ...children));
+}
+function renderFileHtml(props) {
+	const id = fieldId(props.path);
+	const accept = props.constraints.mimeTypes?.join(",");
+	if (props.readOnly) return serialize(h("span", {
+		class: "sc-value",
+		id,
+		...ariaReadonlyAttrs()
+	}, "File field"));
+	const attrs = {
+		class: "sc-input",
+		id,
+		type: "file",
+		name: id
+	};
+	if (accept !== void 0) attrs.accept = accept;
+	Object.assign(attrs, ariaRequiredAttrs(props.tree));
+	if (typeof props.meta.description === "string") Object.assign(attrs, ariaLabelAttrs(props.meta.description));
+	return serialize(h("input", attrs));
+}
 function renderUnknownHtml(props) {
 	if (props.readOnly) {
 		if (props.value === void 0 || props.value === null) return serialize(h("span", { class: "sc-value sc-value--empty" }, "—"));
@@ -295,6 +383,8 @@ const defaultHtmlResolver = {
 	record: renderRecordHtml,
 	literal: renderLiteralHtml,
 	union: renderUnionHtml,
+	discriminatedUnion: renderDiscriminatedUnionHtml,
+	file: renderFileHtml,
 	unknown: renderUnknownHtml
 };
 /**
@@ -320,14 +410,15 @@ function renderToHtml(schema, options = {}) {
 	const renderChild = (childTree, childValue, pathSuffix) => {
 		return renderFieldHtml(childTree, childValue, resolver, pathSuffix ?? childTree.meta.description ?? "", renderChild);
 	};
-	return renderFieldHtml(tree, options.value, resolver, "", renderChild);
+	return renderFieldHtml(tree, options.value ?? tree.defaultValue, resolver, "", renderChild);
 }
 function renderFieldHtml(tree, value, resolver, path, renderChild) {
+	const effectiveValue = value ?? tree.defaultValue;
 	const mergedResolver = mergeHtmlResolvers(resolver, defaultHtmlResolver);
 	const renderFn = getHtmlRenderFn(tree.type, mergedResolver);
 	if (renderFn !== void 0) {
 		const props = {
-			value,
+			value: effectiveValue,
 			readOnly: tree.editability === "presentation",
 			writeOnly: tree.editability === "input",
 			meta: tree.meta,
@@ -345,8 +436,8 @@ function renderFieldHtml(tree, value, resolver, path, renderChild) {
 		if (tree.valueType !== void 0) props.valueType = tree.valueType;
 		return renderFn(props);
 	}
-	if (value === void 0 || value === null) return serialize(h("span", { class: "sc-value sc-value--empty" }, "—"));
-	return serialize(h("span", { class: "sc-value" }, typeof value === "string" ? value : JSON.stringify(value)));
+	if (effectiveValue === void 0 || effectiveValue === null) return serialize(h("span", { class: "sc-value sc-value--empty" }, "—"));
+	return serialize(h("span", { class: "sc-value" }, typeof effectiveValue === "string" ? effectiveValue : JSON.stringify(effectiveValue)));
 }
 //#endregion
 export { defaultHtmlResolver, renderToHtml };

package/dist/html/renderToHtmlStream.mjs

@@ -58,7 +58,7 @@ function* renderToHtmlChunks(schema, options = {}) {
 	const tree = prepareTree(schema, options);
 	const resolver = options.resolver ?? defaultHtmlResolver;
 	const mergedResolver = mergeHtmlResolvers(resolver, defaultHtmlResolver);
-	yield* streamField(tree, options.value, mergedResolver, "", resolver);
+	yield* streamField(tree, options.value ?? tree.defaultValue, mergedResolver, "", resolver);
 }
 /**
 * Render a schema to HTML string chunks asynchronously.
@@ -119,13 +119,18 @@ function prepareTree(schema, options) {
 	});
 }
 function* streamField(tree, value, mergedResolver, path, rawResolver) {
+	const effectiveValue = value ?? tree.defaultValue;
 	const type = tree.type;
 	if (type === "string" || type === "number" || type === "boolean" || type === "enum" || type === "literal" || type === "file" || type === "unknown") {
-		yield renderLeaf(tree, value, mergedResolver, path);
+		yield renderLeaf(tree, effectiveValue, mergedResolver, path);
 		return;
 	}
-	if (type === "union" || type === "discriminatedUnion") {
-		yield* streamUnion(tree, value, mergedResolver, path, rawResolver);
+	if (type === "union") {
+		yield* streamUnion(tree, effectiveValue, mergedResolver, path, rawResolver);
+		return;
+	}
+	if (type === "discriminatedUnion") {
+		yield* streamDiscriminatedUnion(tree, value, mergedResolver, path, rawResolver);
 		return;
 	}
 	if (type === "object") {
@@ -243,6 +248,64 @@ function* streamUnion(tree, value, mergedResolver, path, rawResolver) {
 	if (target !== void 0) yield* streamField(target, value, mergedResolver, typeof target.meta.description === "string" ? target.meta.description : "", rawResolver);
 	else yield serialize(h("span", { class: "sc-value sc-value--empty" }, "—"));
 }
+function* streamDiscriminatedUnion(tree, value, mergedResolver, path, rawResolver) {
+	const options = tree.options;
+	const discriminator = tree.discriminator;
+	if (options === void 0 || options.length === 0) {
+		if (value === void 0 || value === null) yield serialize(h("span", { class: "sc-value sc-value--empty" }, "—"));
+		else yield serialize(h("span", { class: "sc-value" }, JSON.stringify(value)));
+		return;
+	}
+	const isRecord = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+	const obj = isRecord(value) ? 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];
+	if (tree.editability === "presentation") {
+		if (activeOption !== void 0) yield* streamField(activeOption, value, mergedResolver, typeof activeOption.meta.description === "string" ? activeOption.meta.description : "", rawResolver);
+		return;
+	}
+	const panelId = `sc-${path}-panel`;
+	const wrapper = h("div", { class: "sc-discriminated-union" });
+	yield yieldOpen(wrapper);
+	yield serialize(h("div", {
+		role: "tablist",
+		class: "sc-tabs",
+		"aria-label": "Select variant"
+	}, ...options.map((_opt, i) => {
+		return h("button", {
+			type: "button",
+			role: "tab",
+			class: i === activeIndex ? "sc-tab sc-tab--active" : "sc-tab",
+			id: `sc-${path}-tab-${String(i)}`,
+			"aria-selected": i === activeIndex ? "true" : void 0,
+			"aria-controls": panelId,
+			tabindex: i === activeIndex ? "0" : "-1"
+		}, optionLabels[i]);
+	})));
+	const panelOpen = h("div", {
+		role: "tabpanel",
+		id: panelId,
+		"aria-labelledby": `sc-${path}-tab-${String(activeIndex)}`
+	});
+	yield yieldOpen(panelOpen);
+	if (activeOption !== void 0) yield* streamField(activeOption, value, mergedResolver, typeof activeOption.meta.description === "string" ? activeOption.meta.description : "", rawResolver);
+	yield yieldClose(panelOpen);
+	yield yieldClose(wrapper);
+}
 function renderLeaf(tree, value, mergedResolver, path) {
 	const renderFn = getHtmlRenderFn(tree.type, mergedResolver);
 	if (renderFn !== void 0) {

package/dist/html/styles.css

@@ -79,6 +79,12 @@
     margin: 0;
 }
 
+.sc-input[type="file"] {
+    padding: 0.25rem 0;
+    border: none;
+    background: none;
+}
+
 /* ---------------------------------------------------------------------- */
 /* Read-only values                                                       */
 /* ---------------------------------------------------------------------- */
@@ -149,3 +155,40 @@
     color: #6b7280;
     margin-top: 0.25rem;
 }
+
+/* ---------------------------------------------------------------------- */
+/* Discriminated union tabs                                               */
+/* ---------------------------------------------------------------------- */
+
+.sc-discriminated-union {
+    border: 1px solid #e2e8f0;
+    border-radius: 0.375rem;
+    padding: 1rem;
+}
+
+.sc-tabs {
+    display: flex;
+    gap: 0.25rem;
+    margin-bottom: 0.75rem;
+}
+
+.sc-tab {
+    padding: 0.25rem 0.75rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    background: transparent;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: #374151;
+}
+
+.sc-tab:focus-visible {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+}
+
+.sc-tab--active {
+    border-color: #3b82f6;
+    background: #eff6ff;
+    color: #1d4ed8;
+}

package/dist/openapi/components.d.mts

@@ -1,4 +1,4 @@
-import { c as InferResponseFields, m as SchemaMeta, o as InferParameterOverrides, r as FieldOverride, s as InferRequestBodyFields } from "../types-BU0ETFHk.mjs";
+import { c as InferResponseFields, m as SchemaMeta, o as InferParameterOverrides, r as FieldOverride, s as InferRequestBodyFields } from "../types-DDCD6Xnx.mjs";
 import { ReactNode } from "react";
 
 //#region src/openapi/components.d.ts

package/dist/openapi/parser.d.mts

@@ -1,4 +1,4 @@
-import { l as JsonObject } from "../types-BU0ETFHk.mjs";
+import { l as JsonObject } from "../types-DDCD6Xnx.mjs";
 
 //#region src/openapi/parser.d.ts
 interface OpenApiDocument {

package/dist/react/SchemaComponent.d.mts

@@ -1,4 +1,4 @@
-import { E as RenderProps, _ as WalkedField, a as FromJSONSchema, b as ComponentResolver, f as PathOfType, i as FieldOverrides, m as SchemaMeta, p as ResolveOpenAPIRef, r as FieldOverride } from "../types-BU0ETFHk.mjs";
+import { E as RenderProps, _ as WalkedField, a as FromJSONSchema, b as ComponentResolver, f as PathOfType, i as FieldOverrides, m as SchemaMeta, p as ResolveOpenAPIRef, r as FieldOverride } from "../types-DDCD6Xnx.mjs";
 import { t as SchemaError } from "../errors-DIKI2C78.mjs";
 import { z } from "zod";
 import { ReactNode } from "react";

package/dist/react/SchemaComponent.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { isObject, toRecord } from "../core/guards.mjs";
 import { normaliseSchema } from "../core/adapter.mjs";
 import { SchemaFieldError, SchemaNormalisationError, SchemaRenderError } from "../core/errors.mjs";
@@ -83,7 +84,7 @@ function SchemaComponent({ schema: schemaInput, ref: refInput, value, onChange,
 	const renderChild = (childTree, childValue, childOnChange) => {
 		return renderField(childTree, childValue, childOnChange, userResolver, renderChild);
 	};
-	return renderField(tree, value, handleChange, userResolver, renderChild);
+	return renderField(tree, value ?? tree.defaultValue, handleChange, userResolver, renderChild);
 }
 function runValidation(zodSchema, jsonSchema, value, onError) {
 	if (zodSchema !== void 0 && isObject(zodSchema)) {

package/dist/react/SchemaErrorBoundary.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { SchemaError } from "../core/errors.mjs";
 import { Component } from "react";
 //#region src/react/SchemaErrorBoundary.tsx