schema-components 1.12.10 → 1.13.0

package/dist/html/renderToHtml.mjs

@@ -1,11 +1,11 @@
 import { normaliseSchema } from "../core/adapter.mjs";
 import { getHtmlRenderFn, mergeHtmlResolvers } from "../core/renderer.mjs";
 import { walk } from "../core/walker.mjs";
-import { h, raw, serialize } from "./html.mjs";
-import { ariaDescribedByAttrs, ariaLabelAttrs, ariaReadonlyAttrs, ariaRequiredAttrs, buildHintElement, buildInputId, requiredIndicator } from "./a11y.mjs";
+import { h, serialize } from "./html.mjs";
+import { defaultHtmlResolver } from "./renderers.mjs";
 //#region src/html/renderToHtml.ts
 /**
-* HTML renderer — produces semantic HTML from schemas using the typed `h()` builder.
+* HTML renderer entry point — produces semantic HTML from schemas.
 *
 * Framework-agnostic alternative to the React rendering pipeline.
 * Uses the same walker and adapter (normalise → walk → render) but
@@ -24,372 +24,6 @@ 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));
-}
-function renderStringReadOnly(props) {
-	const strValue = typeof props.value === "string" ? props.value : void 0;
-	if (strValue === void 0 || strValue.length === 0) return h("span", {
-		class: "sc-value sc-value--empty",
-		...ariaReadonlyAttrs()
-	}, "—");
-	const format = props.constraints.format;
-	if (format === "email") return h("a", {
-		class: "sc-value",
-		href: `mailto:${strValue}`,
-		...ariaReadonlyAttrs()
-	}, strValue);
-	if (format === "uri" || format === "url") return h("a", {
-		class: "sc-value",
-		href: strValue,
-		...ariaReadonlyAttrs()
-	}, strValue);
-	return h("span", {
-		class: "sc-value",
-		...ariaReadonlyAttrs()
-	}, strValue);
-}
-function renderStringEditable(props) {
-	const strValue = typeof props.value === "string" ? props.value : "";
-	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,
-		type: inputType,
-		name: id
-	};
-	if (!props.writeOnly) attrs.value = strValue;
-	if (typeof props.meta.description === "string") attrs.placeholder = props.meta.description;
-	if (props.constraints.minLength !== void 0) attrs.minlength = String(props.constraints.minLength);
-	if (props.constraints.maxLength !== void 0) attrs.maxlength = String(props.constraints.maxLength);
-	Object.assign(attrs, ariaRequiredAttrs(props.tree));
-	Object.assign(attrs, ariaDescribedByAttrs(id, props.constraints));
-	return h("input", attrs);
-}
-function renderNumberHtml(props) {
-	if (props.readOnly) return serialize(renderNumberReadOnly(props));
-	return serialize(renderNumberEditable(props));
-}
-function renderNumberReadOnly(props) {
-	if (typeof props.value !== "number") return h("span", {
-		class: "sc-value sc-value--empty",
-		...ariaReadonlyAttrs()
-	}, "—");
-	return h("span", {
-		class: "sc-value",
-		...ariaReadonlyAttrs()
-	}, props.value.toLocaleString());
-}
-function renderNumberEditable(props) {
-	const numValue = typeof props.value === "number" ? String(props.value) : "";
-	const id = fieldId(props.path);
-	const attrs = {
-		class: "sc-input",
-		id,
-		type: "number",
-		name: id
-	};
-	if (!props.writeOnly) attrs.value = numValue;
-	if (props.constraints.minimum !== void 0) attrs.min = String(props.constraints.minimum);
-	if (props.constraints.maximum !== void 0) attrs.max = String(props.constraints.maximum);
-	Object.assign(attrs, ariaRequiredAttrs(props.tree));
-	Object.assign(attrs, ariaDescribedByAttrs(id, props.constraints));
-	return h("input", attrs);
-}
-function renderBooleanHtml(props) {
-	if (props.readOnly) return serialize(renderBooleanReadOnly(props));
-	return serialize(renderBooleanEditable(props));
-}
-function renderBooleanReadOnly(props) {
-	if (typeof props.value !== "boolean") return h("span", {
-		class: "sc-value sc-value--empty",
-		...ariaReadonlyAttrs()
-	}, "—");
-	return h("span", {
-		class: "sc-value sc-value--boolean",
-		...ariaReadonlyAttrs()
-	}, props.value ? "Yes" : "No");
-}
-function renderBooleanEditable(props) {
-	const id = fieldId(props.path);
-	const attrs = {
-		class: "sc-input",
-		id,
-		type: "checkbox",
-		name: id
-	};
-	if (!props.writeOnly && props.value === true) attrs.checked = true;
-	Object.assign(attrs, ariaRequiredAttrs(props.tree));
-	Object.assign(attrs, ariaLabelAttrs(props.meta.description));
-	return h("input", attrs);
-}
-function renderEnumHtml(props) {
-	if (props.readOnly) return serialize(renderEnumReadOnly(props));
-	return serialize(renderEnumEditable(props));
-}
-function renderEnumReadOnly(props) {
-	const enumValue = typeof props.value === "string" ? props.value : "";
-	if (enumValue.length === 0) return h("span", {
-		class: "sc-value sc-value--empty",
-		...ariaReadonlyAttrs()
-	}, "—");
-	return h("span", {
-		class: "sc-value",
-		...ariaReadonlyAttrs()
-	}, enumValue);
-}
-function renderEnumEditable(props) {
-	const enumValue = typeof props.value === "string" ? props.value : "";
-	const id = fieldId(props.path);
-	const selectedValue = props.writeOnly ? "" : enumValue;
-	const optionNodes = [h("option", { value: "" }, "Select…"), ...(props.enumValues ?? []).map((v) => {
-		const attrs = { value: v };
-		if (v === selectedValue) attrs.selected = true;
-		return h("option", attrs, v);
-	})];
-	const selectAttrs = {
-		class: "sc-input",
-		id,
-		name: id
-	};
-	Object.assign(selectAttrs, ariaRequiredAttrs(props.tree));
-	return h("select", selectAttrs, ...optionNodes);
-}
-function renderObjectHtml(props) {
-	return serialize(renderObjectNode(props));
-}
-function renderObjectNode(props) {
-	const fields = props.fields;
-	if (fields === void 0) return "";
-	const isRecord = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
-	const obj = isRecord(props.value) ? props.value : {};
-	const descriptionText = typeof props.meta.description === "string" ? props.meta.description : void 0;
-	const legend = descriptionText !== void 0 ? h("legend", {}, descriptionText) : void 0;
-	const sortedEntries = Object.entries(fields).sort((a, b) => {
-		return (typeof a[1].meta.order === "number" ? a[1].meta.order : Infinity) - (typeof b[1].meta.order === "number" ? b[1].meta.order : Infinity);
-	}).filter(([, field]) => field.meta.visible !== false);
-	if (props.readOnly) {
-		const children = [];
-		if (legend !== void 0) children.push(legend);
-		for (const [key, field] of sortedEntries) {
-			const label = typeof field.meta.description === "string" ? field.meta.description : key;
-			const childValue = obj[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)));
-		}
-		const dlAttrs = { class: "sc-object" };
-		Object.assign(dlAttrs, ariaLabelAttrs(descriptionText));
-		return h("dl", dlAttrs, ...children);
-	}
-	const children = [];
-	if (legend !== void 0) children.push(legend);
-	for (const [key, field] of sortedEntries) {
-		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, childPath);
-		const required = requiredIndicator(field);
-		const labelContent = [label];
-		if (required !== void 0) labelContent.push(required);
-		const fieldChildren = [h("label", {
-			class: "sc-label",
-			for: fieldId
-		}, ...labelContent), raw(childHtml)];
-		const hint = buildHintElement(fieldId, field.constraints);
-		if (hint !== void 0) fieldChildren.push(hint);
-		children.push(h("div", { class: "sc-field" }, ...fieldChildren));
-	}
-	const fieldsetAttrs = { class: "sc-object" };
-	Object.assign(fieldsetAttrs, ariaLabelAttrs(descriptionText));
-	return h("fieldset", fieldsetAttrs, ...children);
-}
-function renderArrayHtml(props) {
-	return serialize(renderArrayNode(props));
-}
-function renderArrayNode(props) {
-	const arr = Array.isArray(props.value) ? props.value : [];
-	const element = props.element;
-	if (element === void 0) return "";
-	const items = arr.map((item) => {
-		return h("li", { class: "sc-item" }, raw(props.renderChild(element, item)));
-	});
-	if (props.readOnly) return h("ul", { class: "sc-array" }, ...items);
-	return h("div", { class: "sc-array" }, ...arr.map((item) => {
-		return h("div", {}, raw(props.renderChild(element, item)));
-	}));
-}
-function renderRecordHtml(props) {
-	return serialize(renderRecordNode(props));
-}
-function renderRecordNode(props) {
-	const isRecord = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
-	const obj = isRecord(props.value) ? props.value : {};
-	const valueType = props.valueType;
-	if (valueType === void 0) return "";
-	const attrs = {
-		class: "sc-record",
-		role: "group"
-	};
-	if (props.readOnly) {
-		const children = [];
-		for (const [key, val] of Object.entries(obj)) {
-			const childHtml = props.renderChild(valueType, val, key);
-			children.push(h("dt", { class: "sc-label" }, key));
-			children.push(h("dd", { class: "sc-value" }, raw(childHtml)));
-		}
-		return h("dl", attrs, ...children);
-	}
-	const children = [];
-	for (const [key, val] of Object.entries(obj)) {
-		const childHtml = props.renderChild(valueType, val, key);
-		children.push(h("div", { class: "sc-field" }, h("label", { class: "sc-label" }, key), raw(childHtml)));
-	}
-	return h("div", attrs, ...children);
-}
-function renderLiteralHtml(props) {
-	const values = props.tree.literalValues;
-	if (values === void 0 || values.length === 0) return serialize(h("span", { class: "sc-value sc-value--empty" }, "—"));
-	return serialize(h("span", { class: "sc-value" }, values.map((v) => v === null ? "null" : String(v)).join(", ")));
-}
-function renderUnionHtml(props) {
-	const options = props.options;
-	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 matched = matchUnionOption(options, props.value);
-	if (matched !== void 0) return props.renderChild(matched, props.value);
-	const firstOption = options[0];
-	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" }, "—"));
-		if (typeof props.value === "string") return serialize(h("span", { class: "sc-value" }, props.value));
-		return serialize(h("span", { class: "sc-value" }, JSON.stringify(props.value)));
-	}
-	const strValue = typeof props.value === "string" ? props.value : "";
-	const attrs = {
-		class: "sc-input",
-		type: "text",
-		name: props.path
-	};
-	if (!props.writeOnly) attrs.value = strValue;
-	return serialize(h("input", attrs));
-}
-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");
-}
-const defaultHtmlResolver = {
-	string: renderStringHtml,
-	number: renderNumberHtml,
-	boolean: renderBooleanHtml,
-	enum: renderEnumHtml,
-	object: renderObjectHtml,
-	array: renderArrayHtml,
-	record: renderRecordHtml,
-	literal: renderLiteralHtml,
-	union: renderUnionHtml,
-	discriminatedUnion: renderDiscriminatedUnionHtml,
-	file: renderFileHtml,
-	unknown: renderUnknownHtml
-};
 /**
 * Render a schema to an HTML string.
 *
@@ -410,9 +44,12 @@ function renderToHtml(schema, options = {}) {
 		rootDocument
 	});
 	const resolver = options.resolver ?? defaultHtmlResolver;
-	const renderChild = (childTree, childValue, pathSuffix) => {
-		return renderFieldHtml(childTree, childValue, resolver, pathSuffix ?? childTree.meta.description ?? "", renderChild);
+	const MAX_HTML_DEPTH = 10;
+	const makeRenderChild = (currentDepth) => (childTree, childValue, pathSuffix) => {
+		if (currentDepth >= MAX_HTML_DEPTH) return `<fieldset class="sc-recursive"><em>\u21bb ${typeof childTree.meta.description === "string" ? childTree.meta.description : "schema"} (recursive)</em></fieldset>`;
+		return renderFieldHtml(childTree, childValue, resolver, pathSuffix ?? childTree.meta.description ?? "", makeRenderChild(currentDepth + 1));
 	};
+	const renderChild = makeRenderChild(0);
 	return renderFieldHtml(tree, options.value ?? tree.defaultValue, resolver, "", renderChild);
 }
 function renderFieldHtml(tree, value, resolver, path, renderChild) {
@@ -431,17 +68,24 @@ function renderFieldHtml(tree, value, resolver, path, renderChild) {
 			tree,
 			renderChild
 		};
-		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;
+		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 === "literal") props.literalValues = tree.literalValues;
+		if (tree.examples !== void 0) props.examples = tree.examples;
 		return renderFn(props);
 	}
 	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 };
+export { renderToHtml };

package/dist/html/renderToHtmlStream.d.mts

@@ -1,57 +1,39 @@
-import { RenderToHtmlOptions } from "./renderToHtml.mjs";
+import { w as SchemaMeta } from "../types-ag2jYLqQ.mjs";
+import { o as HtmlResolver } from "../renderer-DseHeliw.mjs";
 
 //#region src/html/renderToHtmlStream.d.ts
+interface StreamRenderOptions {
+  /** The data value to render. */
+  value?: unknown;
+  /** For OpenAPI: a ref string like "#/components/schemas/User". */
+  ref?: string;
+  /** Per-field meta overrides. */
+  fields?: Record<string, unknown>;
+  /** Meta overrides applied to the root schema. */
+  meta?: SchemaMeta;
+  /** Force all fields read-only. */
+  readOnly?: boolean;
+  /** Force all fields as inputs. */
+  writeOnly?: boolean;
+  /** Root description. */
+  description?: string;
+  /** Custom HTML resolver. Falls back to defaultHtmlResolver. */
+  resolver?: HtmlResolver;
+}
 /**
- * Streaming HTML renderer — yields HTML chunks incrementally.
- *
- * Same rendering pipeline as `renderToHtml` but yields string fragments
- * as each field/element is produced instead of building the entire string
- * in memory. Use for server-side rendering where you want to start
- * flushing the response before the full schema is rendered.
- *
- * Three output formats:
- *
- * - `renderToHtmlChunks(schema, options)` → sync `Iterable<string>`
- * - `renderToHtmlStream(schema, options)` → async `AsyncIterable<string>`
- * - `renderToHtmlReadable(schema, options)` → web `ReadableStream<string>`
- *
- * Chunk boundaries:
- * - Object: opening tag, one chunk per field, closing tag
- * - Array: opening tag, one chunk per item, closing tag
- * - Record: opening tag, one chunk per entry, closing tag
- * - Leaf types (string, number, boolean, enum, literal, unknown):
- *   rendered entirely as one chunk
- *
- * All HTML construction uses `h()` from `html.ts` — the streaming module
- * manually yields the opening tag, then children, then the closing tag.
+ * Render a schema as an iterable of HTML string chunks.
+ * Each chunk is a self-contained HTML fragment.
  */
-type StreamRenderOptions = RenderToHtmlOptions;
+declare function renderToHtmlChunks(schema: unknown, options?: StreamRenderOptions): Iterable<string>;
 /**
- * Render a schema to HTML string chunks, yielded incrementally.
- *
- * Each yielded chunk is a self-contained HTML fragment. Concatenating
- * all chunks produces the same output as `renderToHtml`.
- *
- * @returns Sync iterable of HTML string chunks
+ * Render a schema as an async iterable of HTML string chunks.
+ * Yields `undefined` between chunks to allow the event loop to process
+ * other tasks (cooperative scheduling).
  */
-declare function renderToHtmlChunks(schema: unknown, options?: StreamRenderOptions): Iterable<string, void, undefined>;
+declare function renderToHtmlStream(schema: unknown, options?: StreamRenderOptions): AsyncIterable<string>;
 /**
- * Render a schema to HTML string chunks asynchronously.
- *
- * Identical chunk boundaries to `renderToHtmlChunks` but yields via
- * an async generator. Use with `for await...of` or pipe to a response.
- *
- * @returns Async iterable of HTML string chunks
- */
-declare function renderToHtmlStream(schema: unknown, options?: StreamRenderOptions): AsyncIterable<string, void, undefined>;
-/**
- * Render a schema to a web `ReadableStream<string>`.
- *
- * ```ts
- * return new Response(renderToHtmlReadable(schema, { value }), {
- *     headers: { "Content-Type": "text/html" },
- * });
- * ```
+ * Render a schema as a web `ReadableStream<string>`.
+ * Uses the async rendering pipeline internally.
  */
 declare function renderToHtmlReadable(schema: unknown, options?: StreamRenderOptions): ReadableStream<string>;
 //#endregion