schema-components 1.29.0 → 2.0.0

package/dist/react/headlessRenderers.mjs

@@ -6,8 +6,8 @@ import { sortFieldsByOrder } from "../core/fieldOrder.mjs";
 import { fieldDomId, panelIdFor, tabIdFor } from "../core/idPath.mjs";
 import { matchUnionOption, resolveDiscriminatedActive } from "../core/unionMatch.mjs";
 import { displayJsonValue } from "../core/walkBuilders.mjs";
-import { buildAriaAttrs } from "./a11y.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { ariaLabel, buildAriaAttrs, buildHintInfo } from "./a11y.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isValidElement, useCallback, useEffect, useRef } from "react";
 //#region src/react/headlessRenderers.tsx
 /**
@@ -68,7 +68,6 @@ function renderString(props) {
 		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: "—"
 		});
 		const format = props.constraints.format;
@@ -86,45 +85,53 @@ function renderString(props) {
 		});
 		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 = buildAriaAttrs(props.tree);
-	if (dateType !== void 0) return /* @__PURE__ */ jsx("input", {
-		id,
-		type: dateType,
-		value: props.writeOnly ? "" : strValue,
-		onChange: (e) => {
-			props.onChange(e.target.value);
-		},
-		...ariaAttrs
+	const hintInfo = buildHintInfo(id, props.constraints);
+	const renderHint = () => hintInfo === void 0 ? null : /* @__PURE__ */ jsx("small", {
+		id: hintInfo.id,
+		className: "sc-hint",
+		children: hintInfo.hint
 	});
+	if (dateType !== void 0) {
+		const dateInput = /* @__PURE__ */ jsx("input", {
+			id,
+			type: dateType,
+			value: props.writeOnly ? "" : strValue,
+			onChange: (e) => {
+				props.onChange(e.target.value);
+			},
+			"aria-describedby": hintInfo?.ariaDescribedBy,
+			...ariaAttrs
+		});
+		if (hintInfo === void 0) return dateInput;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [dateInput, renderHint()] });
+	}
 	if (props.tree.type === "enum" && props.tree.enumValues.length > 0) {
 		const enumValues = props.tree.enumValues;
-		return /* @__PURE__ */ jsxs("select", {
+		const select = /* @__PURE__ */ jsxs("select", {
 			id,
 			value: strValue,
 			onChange: (e) => {
 				props.onChange(e.target.value);
 			},
+			"aria-describedby": hintInfo?.ariaDescribedBy,
 			...ariaAttrs,
 			children: [/* @__PURE__ */ jsxs("option", {
 				value: "",
@@ -137,10 +144,14 @@ function renderString(props) {
 				}, display);
 			})]
 		});
+		if (hintInfo === void 0) return select;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [select, renderHint()] });
 	}
-	return /* @__PURE__ */ jsx("input", {
+	const isCredential = props.writeOnly && props.constraints.format === "password";
+	const input = /* @__PURE__ */ jsx("input", {
 		id,
-		type: props.constraints.format === "email" ? "email" : props.constraints.format === "uri" ? "url" : "text",
+		type: isCredential ? "password" : props.constraints.format === "email" ? "email" : props.constraints.format === "uri" ? "url" : "text",
+		autoComplete: isCredential ? strValue.length > 0 ? "current-password" : "new-password" : void 0,
 		value: props.writeOnly ? "" : strValue,
 		onChange: (e) => {
 			props.onChange(e.target.value);
@@ -148,8 +159,11 @@ function renderString(props) {
 		placeholder: typeof props.meta.description === "string" ? props.meta.description : void 0,
 		minLength: props.constraints.minLength,
 		maxLength: props.constraints.maxLength,
+		"aria-describedby": hintInfo?.ariaDescribedBy,
 		...ariaAttrs
 	});
+	if (hintInfo === void 0) return input;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [input, renderHint()] });
 }
 /** Headless renderer for `NumberField` — plain `<input type="number">`. */
 function renderNumber(props) {
@@ -157,28 +171,39 @@ function renderNumber(props) {
 	if (props.readOnly) {
 		if (typeof props.value !== "number") return /* @__PURE__ */ jsx("span", {
 			id,
-			"aria-readonly": "true",
 			children: "—"
 		});
 		return /* @__PURE__ */ jsx("span", {
 			id,
-			"aria-readonly": "true",
 			children: props.value.toLocaleString()
 		});
 	}
 	const numValue = typeof props.value === "number" ? props.value : "";
 	const ariaAttrs = buildAriaAttrs(props.tree);
-	return /* @__PURE__ */ jsx("input", {
+	const hintInfo = buildHintInfo(id, props.constraints);
+	const isInteger = props.tree.type === "number" ? props.tree.isInteger : false;
+	const inputMode = isInteger ? "numeric" : "decimal";
+	const multipleOf = props.constraints.multipleOf;
+	const numberInput = /* @__PURE__ */ jsx("input", {
 		id,
 		type: "number",
+		inputMode,
+		step: multipleOf !== void 0 ? String(multipleOf) : isInteger ? "1" : void 0,
 		value: props.writeOnly ? "" : numValue,
 		onChange: (e) => {
 			props.onChange(Number(e.target.value));
 		},
 		min: props.constraints.minimum,
 		max: props.constraints.maximum,
+		"aria-describedby": hintInfo?.ariaDescribedBy,
 		...ariaAttrs
 	});
+	if (hintInfo === void 0) return numberInput;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [numberInput, /* @__PURE__ */ jsx("small", {
+		id: hintInfo.id,
+		className: "sc-hint",
+		children: hintInfo.hint
+	})] });
 }
 /** Headless renderer for `BooleanField` — plain `<input type="checkbox">`. */
 function renderBoolean(props) {
@@ -186,12 +211,10 @@ function renderBoolean(props) {
 	if (props.readOnly) {
 		if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx("span", {
 			id,
-			"aria-readonly": "true",
 			children: "—"
 		});
 		return /* @__PURE__ */ jsx("span", {
 			id,
-			"aria-readonly": "true",
 			children: props.value ? "Yes" : "No"
 		});
 	}
@@ -212,17 +235,18 @@ function renderEnum(props) {
 	const enumValue = typeof props.value === "string" ? props.value : "";
 	if (props.readOnly) return /* @__PURE__ */ jsx("span", {
 		id,
-		"aria-readonly": "true",
 		children: enumValue || "—"
 	});
 	const ariaAttrs = buildAriaAttrs(props.tree);
+	const hintInfo = buildHintInfo(id, props.constraints);
 	const enumValues = props.tree.type === "enum" ? props.tree.enumValues : [];
-	return /* @__PURE__ */ jsxs("select", {
+	const select = /* @__PURE__ */ jsxs("select", {
 		id,
 		value: props.writeOnly ? "" : enumValue,
 		onChange: (e) => {
 			props.onChange(e.target.value);
 		},
+		"aria-describedby": hintInfo?.ariaDescribedBy,
 		...ariaAttrs,
 		children: [/* @__PURE__ */ jsxs("option", {
 			value: "",
@@ -235,6 +259,12 @@ function renderEnum(props) {
 			}, display);
 		})]
 	});
+	if (hintInfo === void 0) return select;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [select, /* @__PURE__ */ jsx("small", {
+		id: hintInfo.id,
+		className: "sc-hint",
+		children: hintInfo.hint
+	})] });
 }
 /** Headless renderer for `ObjectField` — `<fieldset>` per object with one child per property. */
 function renderObject(props) {
@@ -253,9 +283,9 @@ function renderObject(props) {
 		};
 		const child = toReactNode(props.renderChild(field, childValue, childOnChange, key));
 		if (child === null || child === void 0) return null;
-		return /* @__PURE__ */ jsxs("div", { children: [typeof field.meta.description === "string" && /* @__PURE__ */ jsxs("label", {
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("label", {
 			htmlFor: childId,
-			children: [field.meta.description, field.isOptional === false && /* @__PURE__ */ jsxs("span", {
+			children: [typeof field.meta.description === "string" ? field.meta.description : key, field.isOptional === false && /* @__PURE__ */ jsxs("span", {
 				"aria-hidden": "true",
 				style: { color: "#dc2626" },
 				children: [" ", "*"]
@@ -277,7 +307,17 @@ function defaultRecordValue(valueType) {
 		case "array": return [];
 		case "object":
 		case "record": return {};
-		default: return;
+		case "null": return null;
+		case "unknown":
+		case "enum":
+		case "literal":
+		case "tuple":
+		case "union":
+		case "discriminatedUnion":
+		case "conditional":
+		case "negation":
+		case "file":
+		case "never": return;
 	}
 }
 /**
@@ -309,13 +349,10 @@ function renderRecord(props) {
 	const valueType = props.tree.valueType;
 	const entries = Object.entries(obj);
 	if (props.readOnly) {
-		if (entries.length === 0) return /* @__PURE__ */ jsx("span", {
-			"aria-readonly": "true",
-			children: "—"
-		});
+		if (entries.length === 0) return /* @__PURE__ */ jsx("span", { children: "—" });
 		return /* @__PURE__ */ jsx("div", {
 			role: "group",
-			"aria-label": typeof props.meta.description === "string" ? props.meta.description : void 0,
+			"aria-label": ariaLabel(props.meta.description),
 			children: entries.map(([key, value]) => {
 				return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
 					htmlFor: inputId(`${props.path}.${key}`),
@@ -351,7 +388,7 @@ function renderRecord(props) {
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		role: "group",
-		"aria-label": props.meta.description ?? "Record",
+		"aria-label": ariaLabel(props.meta.description),
 		children: [entries.map(([key, value]) => {
 			return /* @__PURE__ */ jsxs("div", { children: [
 				/* @__PURE__ */ jsx("input", {
@@ -389,18 +426,47 @@ function renderArray(props) {
 	const arr = Array.isArray(props.value) ? props.value : [];
 	const element = props.tree.element;
 	if (element === void 0) return null;
-	if (arr.length === 0) return null;
-	return /* @__PURE__ */ jsx("div", {
+	if (props.readOnly) {
+		if (arr.length === 0) return null;
+		return /* @__PURE__ */ jsx("ul", {
+			role: "group",
+			"aria-label": ariaLabel(props.meta.description),
+			children: arr.map((item, i) => /* @__PURE__ */ jsx("li", { children: toReactNode(props.renderChild(element, item, () => {}, `[${String(i)}]`)) }, String(i)))
+		});
+	}
+	const handleRemove = (index) => {
+		const next = arr.slice();
+		next.splice(index, 1);
+		props.onChange(next);
+	};
+	const handleAdd = () => {
+		const next = arr.slice();
+		next.push(defaultRecordValue(element));
+		props.onChange(next);
+	};
+	return /* @__PURE__ */ jsxs("div", {
 		role: "group",
-		"aria-label": props.meta.description ?? void 0,
-		children: arr.map((item, i) => {
+		"aria-label": ariaLabel(props.meta.description),
+		children: [/* @__PURE__ */ jsx("ul", { children: arr.map((item, i) => {
 			const childOnChange = (v) => {
-				const next = arr.slice();
-				next[i] = v;
-				props.onChange(next);
+				const nextArr = arr.slice();
+				nextArr[i] = v;
+				props.onChange(nextArr);
 			};
-			return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(element, item, childOnChange, `[${String(i)}]`)) }, String(i));
-		})
+			return /* @__PURE__ */ jsxs("li", { children: [toReactNode(props.renderChild(element, item, childOnChange, `[${String(i)}]`)), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Remove item ${String(i)}`,
+				onClick: () => {
+					handleRemove(i);
+				},
+				children: "Remove"
+			})] }, String(i));
+		}) }), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Add item",
+			onClick: handleAdd,
+			children: "Add"
+		})]
 	});
 }
 /** Headless renderer for plain `UnionField` — picks the matching option and renders it. */
@@ -506,6 +572,7 @@ function DiscriminatedUnionTabs({ options, optionLabels, activeIndex, path, disc
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
 		role: "tablist",
 		"aria-label": "Select variant",
+		"aria-orientation": "horizontal",
 		style: {
 			display: "flex",
 			gap: "0.25rem",
@@ -519,7 +586,7 @@ function DiscriminatedUnionTabs({ options, optionLabels, activeIndex, path, disc
 			type: "button",
 			role: "tab",
 			id: tabIdFor(path, i),
-			"aria-selected": i === activeIndex ? "true" : void 0,
+			"aria-selected": i === activeIndex ? "true" : "false",
 			"aria-controls": panelId,
 			tabIndex: i === activeIndex ? 0 : -1,
 			onClick: () => {
@@ -548,10 +615,11 @@ function renderFile(props) {
 	const accept = props.constraints.mimeTypes?.join(",");
 	if (props.readOnly) return /* @__PURE__ */ jsx("span", {
 		id,
-		"aria-readonly": "true",
 		children: "File field"
 	});
-	return /* @__PURE__ */ jsx("input", {
+	const ariaAttrs = buildAriaAttrs(props.tree, props.meta.description);
+	const hintInfo = buildHintInfo(id, props.constraints);
+	const fileInput = /* @__PURE__ */ jsx("input", {
 		id,
 		type: "file",
 		accept,
@@ -559,8 +627,15 @@ function renderFile(props) {
 			const file = e.target.files?.[0];
 			if (file !== void 0) props.onChange(file);
 		},
-		...buildAriaAttrs(props.tree, props.meta.description)
+		"aria-describedby": hintInfo?.ariaDescribedBy,
+		...ariaAttrs
 	});
+	if (hintInfo === void 0) return fileInput;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [fileInput, /* @__PURE__ */ jsx("small", {
+		id: hintInfo.id,
+		className: "sc-hint",
+		children: hintInfo.hint
+	})] });
 }
 /**
 * Render a literal field — `z.literal("a")` or `{ const: 5 }`.
@@ -575,12 +650,10 @@ function renderLiteral(props) {
 	const values = props.tree.literalValues;
 	if (values.length === 0) return /* @__PURE__ */ jsx("span", {
 		id,
-		"aria-readonly": "true",
 		children: "—"
 	});
 	return /* @__PURE__ */ jsx("span", {
 		id,
-		"aria-readonly": "true",
 		children: values.map((v) => displayJsonValue(v)).join(", ")
 	});
 }
@@ -593,7 +666,6 @@ function renderLiteral(props) {
 function renderNull(props) {
 	return /* @__PURE__ */ jsx("span", {
 		id: inputId(props.path),
-		"aria-readonly": "true",
 		children: "—"
 	});
 }
@@ -609,7 +681,6 @@ function renderNull(props) {
 function renderNever(props) {
 	return /* @__PURE__ */ jsx("span", {
 		id: inputId(props.path),
-		"aria-readonly": "true",
 		className: SC_CLASSES.never,
 		children: /* @__PURE__ */ jsx("em", { children: "never matches" })
 	});
@@ -631,7 +702,7 @@ function renderTuple(props) {
 	const restCount = restItems !== void 0 ? Math.max(arr.length - prefixItems.length, 0) : 0;
 	return /* @__PURE__ */ jsxs("div", {
 		role: "group",
-		"aria-label": props.meta.description ?? void 0,
+		"aria-label": ariaLabel(props.meta.description),
 		children: [prefixItems.map((element, i) => {
 			const itemValue = arr[i];
 			const childOnChange = (v) => {
@@ -717,12 +788,10 @@ function renderUnknown(props) {
 	if (props.readOnly) {
 		if (props.value === void 0 || props.value === null) return /* @__PURE__ */ jsx("span", {
 			id,
-			"aria-readonly": "true",
 			children: "—"
 		});
 		return /* @__PURE__ */ jsx("span", {
 			id,
-			"aria-readonly": "true",
 			children: typeof props.value === "string" ? props.value : JSON.stringify(props.value)
 		});
 	}

package/dist/{ref-CPh8rKQ3.d.mts → ref-DdsbekXX.d.mts}

@@ -1,4 +1,4 @@
-import { i as DiagnosticsOptions } from "./diagnostics-ByEzkjrA.mjs";
+import { i as DiagnosticsOptions } from "./diagnostics-BTrm3O6J.mjs";
 
 //#region src/core/ref.d.ts
 /**
@@ -12,6 +12,38 @@ declare const RECURSIVE_ANCHOR_SENTINEL = "__recursive__";
  * 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.
+ *
+ * ### Security warning — SSRF and local-file disclosure
+ *
+ * Consumers MUST validate the URI before fetching the target document.
+ * schema-components hands the resolver the raw `$ref` URI from the
+ * document — which is typically user-controlled — and any network or
+ * filesystem access the resolver performs runs with the host
+ * application's full privileges. An attacker-crafted schema that
+ * references an internal endpoint or a local filesystem path will
+ * happily exfiltrate or expose data the application never intended to
+ * surface.
+ *
+ * At a minimum the resolver should:
+ *
+ * - Refuse non-`https:` schemes by default. Permit `http:` only on an
+ *   explicit allow-list. Refuse `file:`, `data:`, `javascript:`,
+ *   `ftp:`, `gopher:`, and every other scheme outright.
+ * - Resolve the URI's hostname and refuse loopback addresses
+ *   (`127.0.0.0/8`, `::1`), link-local addresses (`169.254.0.0/16`,
+ *   `fe80::/10`), private ranges (`10.0.0.0/8`, `172.16.0.0/12`,
+ *   `192.168.0.0/16`, `fc00::/7`), and cloud-metadata IPs
+ *   (`169.254.169.254`, `fd00:ec2::254`).
+ * - Apply a strict allow-list of permitted hosts where possible.
+ * - Set request timeouts and a maximum response size.
+ * - Disable HTTP redirects, or re-validate the redirected URL against
+ *   the same denylist before following.
+ * - Reject responses that are not `application/json` or
+ *   `application/yaml`.
+ *
+ * schema-components performs no validation itself — that responsibility
+ * sits exclusively with the resolver implementation supplied by the
+ * caller.
  */
 type ExternalResolver = (uri: string) => unknown;
 /**

package/dist/themes/mantine.d.mts

@@ -1,42 +1,58 @@
-import { r as ComponentResolver } from "../renderer-OaOz-n6-.mjs";
+import { ComponentResolver } from "../core/renderer.mjs";
+import { ElementType } from "react";
 
 //#region src/themes/mantine.d.ts
 /**
- * Inject real Mantine element types into the resolver. Call once at
- * application startup before rendering any schema-driven component so
- * that {@link mantineResolver}'s renderers delegate to the supplied
- * Mantine primitives.
+ * Element types the Mantine resolver renders into. Every slot is the
+ * Mantine component the corresponding render function expects to find
+ * at the call site; consumers wire these in once via
+ * `createMantineResolver`.
  *
  * `Text` is required so read-only scalars render as a styled Mantine
  * `<Text>` element instead of a bare `<span>`, matching the visual
  * weight of the editable variants.
+ */
+interface MantineComponents {
+  TextInput: ElementType;
+  NumberInput: ElementType;
+  Switch: ElementType;
+  Select: ElementType;
+  Fieldset: ElementType;
+  Text: ElementType;
+}
+/**
+ * Build a Mantine-flavoured {@link ComponentResolver} bound to the
+ * supplied element types. Each render function captures the supplied
+ * components in a closure so two consumers can build different
+ * resolvers from the same package without leaking element types
+ * through module-level mutable state.
+ *
+ * Returns only the keys this theme actually overrides. The runtime
+ * `mergeResolvers` call inside `<SchemaComponent>` / `<SchemaView>`
+ * fills unset keys from `headlessResolver`, so variants this adapter
+ * leaves unset (literal, union, discriminatedUnion, array, record,
+ * file, unknown, …) still render via the headless fallback.
  *
  * @group Themes
  */
-declare function registerMantineComponents(components: {
-  TextInput: React.ElementType;
-  NumberInput: React.ElementType;
-  Switch: React.ElementType;
-  Select: React.ElementType;
-  Fieldset: React.ElementType;
-  Text: React.ElementType;
-}): void;
+declare function createMantineResolver(components: MantineComponents): ComponentResolver;
 /**
  * Component resolver mapping schema field types to Mantine primitives —
  * `TextInput`, `NumberInput`, `Switch`, `Select`, `Fieldset`, `Text`.
  *
- * Pass to `SchemaProvider` to render schema-driven UI through Mantine.
- * Requires `@mantine/core` installed in the consuming project and a
- * one-time call to {@link registerMantineComponents} to inject the
- * actual Mantine element types.
+ * Built against minimal HTML stubs so the resolver is usable without
+ * wiring up `@mantine/core` first — production usage should call
+ * {@link createMantineResolver} with real Mantine element types.
  *
  * @group Themes
  * @example
  * ```tsx
  * import { TextInput, NumberInput, Switch, Select, Fieldset, Text } from "@mantine/core";
- * import { mantineResolver, registerMantineComponents } from "schema-components/themes/mantine";
+ * import { createMantineResolver } from "schema-components/themes/mantine";
  *
- * registerMantineComponents({ TextInput, NumberInput, Switch, Select, Fieldset, Text });
+ * const mantineResolver = createMantineResolver({
+ *   TextInput, NumberInput, Switch, Select, Fieldset, Text,
+ * });
  *
  * <SchemaProvider resolver={mantineResolver}>
  *   <SchemaComponent schema={userSchema} value={user} onChange={setUser} />
@@ -45,4 +61,4 @@ declare function registerMantineComponents(components: {
  */
 declare const mantineResolver: ComponentResolver;
 //#endregion
-export { mantineResolver, registerMantineComponents };
+export { MantineComponents, createMantineResolver, mantineResolver };