schema-components 1.12.11 → 1.14.0

package/dist/react/headlessRenderers.mjs

@@ -0,0 +1,507 @@
+import { isObject } from "../core/guards.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement, useCallback, useRef } from "react";
+//#region src/react/headlessRenderers.tsx
+/**
+* Headless renderer functions — one per schema type.
+*
+* Produces plain React elements for every schema type. These functions
+* are composed into `headlessResolver` by `headless.tsx`.
+*
+* This module contains the individual render functions, date/time helpers,
+* ID generation, union matching, and the discriminated union tabs component.
+*/
+/**
+* Coerce an unknown render result into a React node.
+* Returns `null` for unrecognised values.
+*/
+function toReactNode(value) {
+	if (value === null || value === void 0) return null;
+	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return 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", {
+			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
+		});
+	}
+	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\\u2026"
+		}), props.enumValues.map((v) => {
+			const display = v === null ? "null" : typeof v === "string" ? v : String(v);
+			return /* @__PURE__ */ jsx("option", {
+				value: display,
+				children: display
+			}, display);
+		})]
+	});
+	return /* @__PURE__ */ jsx("input", {
+		id,
+		type: props.constraints.format === "email" ? "email" : props.constraints.format === "uri" ? "url" : "text",
+		value: props.writeOnly ? "" : strValue,
+		onChange: (e) => {
+			props.onChange(e.target.value);
+		},
+		placeholder: typeof props.meta.description === "string" ? props.meta.description : void 0,
+		minLength: props.constraints.minLength,
+		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", {
+			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,
+		...ariaAttrs
+	});
+}
+function renderBoolean(props) {
+	const id = inputId(props.path);
+	if (props.readOnly) {
+		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.writeOnly ? false : 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", {
+		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\\u2026"
+		}), props.enumValues?.map((v) => {
+			const display = v === null ? "null" : typeof v === "string" ? v : String(v);
+			return /* @__PURE__ */ jsx("option", {
+				value: display,
+				children: display
+			}, display);
+		})]
+	});
+}
+function renderObject(props) {
+	const obj = isObject(props.value) ? props.value : {};
+	const fields = props.fields;
+	if (fields === void 0) return null;
+	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);
+	});
+	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 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));
+		if (child === null || child === void 0) return null;
+		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: [" ", "*"]
+			})]
+		}), child] }, key);
+	})] });
+}
+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", {
+		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);
+		})
+	});
+}
+function renderArray(props) {
+	const arr = Array.isArray(props.value) ? props.value : [];
+	const element = props.element;
+	if (element === void 0) return null;
+	if (arr.length === 0) return null;
+	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) => {
+		if (opt.type === "object") {
+			const discriminatorField = opt.fields[discKey];
+			if (discriminatorField?.type === "literal") {
+				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 renderRecursive(props) {
+	const refTarget = props.refTarget ?? "";
+	return /* @__PURE__ */ jsx("fieldset", { children: /* @__PURE__ */ jsxs("em", { children: [
+		"↻ ",
+		typeof props.meta.description === "string" ? props.meta.description : refTarget,
+		" (recursive)"
+	] }) });
+}
+function renderUnknown(props) {
+	const id = inputId(props.path);
+	if (props.readOnly) {
+		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) => {
+			props.onChange(e.target.value);
+		}
+	});
+}
+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");
+}
+//#endregion
+export { renderArray, renderBoolean, renderDiscriminatedUnion, renderEnum, renderFile, renderNumber, renderObject, renderRecord, renderRecursive, renderString, renderUnion, renderUnknown, toReactNode };

package/dist/ref-DvWoULcy.d.mts

@@ -0,0 +1,44 @@
+import { i as DiagnosticsOptions } from "./diagnostics-DzbZmcLI.mjs";
+
+//#region src/core/ref.d.ts
+/**
+ * Resolver function for external $ref URIs.
+ * Called with the URI portion (everything before `#`) of an external ref.
+ * Returns the parsed document (JSON object) or undefined.
+ */
+type ExternalResolver = (uri: string) => unknown;
+/**
+ * Options for $ref resolution.
+ */
+interface RefOptions {
+  diagnostics?: DiagnosticsOptions;
+  externalResolver?: ExternalResolver;
+}
+/**
+ * Count all distinct `$ref` strings reachable from a root document.
+ * A chain longer than the number of distinct refs is necessarily cyclic.
+ * Returns at least 1 so that single-ref schemas have a usable bound.
+ */
+declare function countDistinctRefs(root: Record<string, unknown>): number;
+/**
+ * Resolve a `$ref` in a schema against a root document.
+ * Returns the original schema if no `$ref` is present.
+ * Returns an unknown-schema placeholder on cycle or depth exceeded.
+ *
+ * The depth bound is derived from the number of distinct `$ref` strings
+ * in the root document — a chain longer than that count is necessarily
+ * cyclic. When `maxDepth` is not provided, a reasonable default is used.
+ */
+declare function resolveRef(schema: Record<string, unknown>, rootDocument: Record<string, unknown>, visited: Set<string>, diagnostics?: DiagnosticsOptions, maxDepth?: number, externalResolver?: ExternalResolver): Record<string, unknown>;
+/**
+ * Dereference a JSON Pointer fragment (`#/path/to/schema`) or an
+ * `$anchor` (`#SomeName`) against a root document.
+ */
+declare function dereference(ref: string, root: Record<string, unknown>): Record<string, unknown> | undefined;
+/**
+ * Recursively scan a schema document for a `$anchor` matching the given name.
+ * Returns the schema object containing the anchor, or undefined.
+ */
+declare function findAnchor(node: unknown, anchorName: string): Record<string, unknown> | undefined;
+//#endregion
+export { findAnchor as a, dereference as i, RefOptions as n, resolveRef as o, countDistinctRefs as r, ExternalResolver as t };