schema-components 1.12.11 → 1.14.0

package/dist/react/fieldPath.mjs

@@ -0,0 +1,81 @@
+import { isObject } from "../core/guards.mjs";
+//#region src/react/fieldPath.ts
+/**
+* Resolve a dot-separated path through a WalkedField tree.
+* Supports array index notation: `field[0]`.
+*/
+function resolvePath(tree, path) {
+	if (path.length === 0) return tree;
+	const parts = path.split(".");
+	let current = tree;
+	for (const part of parts) {
+		if (current === void 0) return void 0;
+		const bracketMatch = /^(.+)\[(\d+)\]$/.exec(part);
+		if (bracketMatch?.[1] !== void 0 && bracketMatch[2] !== void 0) {
+			const arrayField = bracketMatch[1];
+			if (current.type === "object") current = current.fields[arrayField];
+			if (current?.type === "array") current = current.element;
+			continue;
+		}
+		if (current.type === "object") current = current.fields[part];
+		else if (current.type === "array") current = current.element;
+		else return;
+	}
+	return current;
+}
+/**
+* Resolve a dot-separated path through a data value.
+* Supports array index notation: `field[0]`.
+*/
+function resolveValue(root, path) {
+	if (path.length === 0) return root;
+	const parts = path.split(".");
+	let current = root;
+	for (const part of parts) {
+		if (!isObject(current)) return void 0;
+		const bracketMatch = /^(.+)\[(\d+)\]$/.exec(part);
+		if (bracketMatch?.[1] !== void 0 && bracketMatch[2] !== void 0) {
+			const key = bracketMatch[1];
+			const index = Number(bracketMatch[2]);
+			const arr = current[key];
+			if (Array.isArray(arr)) current = arr[index];
+			else return;
+		} else current = current[part];
+	}
+	return current;
+}
+/**
+* Set a value at a dot-separated path, producing a new root object.
+* Does not mutate the input — returns a shallow-updated copy at each level.
+*/
+function setNestedValue(root, path, leafValue) {
+	if (path.length === 0) return leafValue;
+	const parts = path.split(".");
+	const result = isObject(root) ? { ...root } : {};
+	let current = result;
+	for (let i = 0; i < parts.length; i++) {
+		const part = parts[i];
+		if (part === void 0) break;
+		const isLast = i === parts.length - 1;
+		const bracketMatch = /^(.+)\[(\d+)\]$/.exec(part);
+		if (bracketMatch?.[1] !== void 0 && bracketMatch[2] !== void 0) {
+			const key = bracketMatch[1];
+			const index = Number(bracketMatch[2]);
+			const existing = current[key];
+			const arr = Array.isArray(existing) ? existing.slice() : [];
+			if (isLast) arr[index] = leafValue;
+			current[key] = arr;
+			const nextCurrent = arr[index];
+			if (nextCurrent !== void 0 && isObject(nextCurrent)) current = nextCurrent;
+		} else if (isLast) current[part] = leafValue;
+		else {
+			const existing = current[part];
+			const next = isObject(existing) ? { ...existing } : {};
+			current[part] = next;
+			current = next;
+		}
+	}
+	return result;
+}
+//#endregion
+export { resolvePath, resolveValue, setNestedValue };

package/dist/react/headless.d.mts

@@ -1,8 +1,6 @@
-import { b as ComponentResolver } from "../types-BJzEgJdX.mjs";
-import { ReactNode } from "react";
+import { r as ComponentResolver } from "../renderer-BdSqllx5.mjs";
 
 //#region src/react/headless.d.ts
-declare function toReactNode(value: unknown): ReactNode;
 /**
  * The headless resolver uses props.renderChild for recursive rendering.
  * No factory function needed — the renderChild is always available
@@ -10,4 +8,4 @@ declare function toReactNode(value: unknown): ReactNode;
  */
 declare const headlessResolver: ComponentResolver;
 //#endregion
-export { headlessResolver, toReactNode };
+export { headlessResolver };

package/dist/react/headless.mjs

@@ -1,496 +1,6 @@
-import { isObject } from "../core/guards.mjs";
-import { isValidElement, useCallback, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { renderArray, renderBoolean, renderDiscriminatedUnion, renderEnum, renderFile, renderNumber, renderObject, renderRecord, renderRecursive, renderString, renderUnion, renderUnknown } from "./headlessRenderers.mjs";
 //#region src/react/headless.tsx
 /**
-* React headless renderer — the default ComponentResolver implementation.
-*
-* 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.
-*/
-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) => /* @__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) => {
-			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) => /* @__PURE__ */ jsx("option", {
-			value: v,
-			children: v
-		}, v))]
-	});
-}
-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) => {
-		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", {
-			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");
-}
-/**
 * The headless resolver uses props.renderChild for recursive rendering.
 * No factory function needed — the renderChild is always available
 * on RenderProps.
@@ -506,7 +16,8 @@ const headlessResolver = {
 	union: renderUnion,
 	discriminatedUnion: renderDiscriminatedUnion,
 	file: renderFile,
+	recursive: renderRecursive,
 	unknown: renderUnknown
 };
 //#endregion
-export { headlessResolver, toReactNode };
+export { headlessResolver };

package/dist/react/headlessRenderers.d.mts

@@ -0,0 +1,23 @@
+import { l as RenderProps } from "../renderer-BdSqllx5.mjs";
+import { ReactNode } from "react";
+
+//#region src/react/headlessRenderers.d.ts
+/**
+ * Coerce an unknown render result into a React node.
+ * Returns `null` for unrecognised values.
+ */
+declare function toReactNode(value: unknown): ReactNode;
+declare function renderString(props: RenderProps): ReactNode;
+declare function renderNumber(props: RenderProps): ReactNode;
+declare function renderBoolean(props: RenderProps): ReactNode;
+declare function renderEnum(props: RenderProps): ReactNode;
+declare function renderObject(props: RenderProps): ReactNode;
+declare function renderRecord(props: RenderProps): ReactNode;
+declare function renderArray(props: RenderProps): ReactNode;
+declare function renderUnion(props: RenderProps): ReactNode;
+declare function renderDiscriminatedUnion(props: RenderProps): ReactNode;
+declare function renderFile(props: RenderProps): ReactNode;
+declare function renderRecursive(props: RenderProps): ReactNode;
+declare function renderUnknown(props: RenderProps): ReactNode;
+//#endregion
+export { renderArray, renderBoolean, renderDiscriminatedUnion, renderEnum, renderFile, renderNumber, renderObject, renderRecord, renderRecursive, renderString, renderUnion, renderUnknown, toReactNode };