schema-components 2.0.2 → 2.1.0

package/dist/solid/renderers.mjs

@@ -0,0 +1,840 @@
+import { isObject } from "../core/guards.mjs";
+import { dateInputType } from "../core/formats.mjs";
+import { isSafeHyperlink, isSafeMailtoAddress } from "../core/uri.mjs";
+import { SC_CLASSES } from "../core/cssClasses.mjs";
+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 { ariaLabel, buildAriaAttrs, buildHintInfo } from "./a11y.mjs";
+import { For, Show, createEffect, createSignal } from "solid-js";
+import { Fragment, jsx, jsxs } from "solid-js/jsx-runtime";
+//#region src/solid/renderers.tsx
+/** @jsxImportSource solid-js */
+/**
+* Solid headless renderer functions — one per schema type.
+*
+* Mirrors `react/headlessRenderers.tsx` field-for-field, adapted to
+* Solid's idiom. Key differences:
+*
+* - `<Show when={...}>` replaces `condition && <X />` so the
+*   conditional branch is reactive rather than re-evaluated by parent
+*   re-renders.
+* - `<For each={...}>` replaces `.map(...)` so list children are
+*   tracked per-item — array mutations don't tear the rendered tree
+*   down and rebuild it.
+* - No `useRef`/`useState`/`useCallback`/`useMemo` — Solid's
+*   reactivity model makes those redundant. Element refs use the
+*   `ref={el => ...}` callback (Solid's documented escape hatch);
+*   keyboard focus state in `DiscriminatedUnionTabs` is held in a
+*   plain array with no per-render allocation.
+* - `onChange` semantics: Solid's `onInput` fires on every keystroke
+*   (matching React's `onChange` semantics), and `onChange` on Solid
+*   fires on commit (matching the DOM `change` event). The headless
+*   renderers wire `onInput` for text/number inputs so live state
+*   updates match the React adapter's behaviour; `onChange` is used
+*   for `<input type="checkbox">`, `<input type="file">`, and
+*   `<select>` where commit semantics are the right contract.
+*
+* Per-type schema data is read directly from the discriminated `tree`
+* (mirroring the React adapter); the helpers from `core/walkBuilders.ts`,
+* `core/idPath.ts`, `core/unionMatch.ts`, and `core/cssClasses.ts` are
+* shared between adapters.
+*/
+function formatDateTime(value) {
+	if (typeof value !== "string" || value.length === 0) return void 0;
+	const date = new Date(value);
+	if (isNaN(date.getTime())) return void 0;
+	return date.toLocaleString();
+}
+function formatDate(value) {
+	if (typeof value !== "string" || value.length === 0) return void 0;
+	const date = new Date(value);
+	if (isNaN(date.getTime())) return void 0;
+	return date.toLocaleDateString();
+}
+function formatTime(value) {
+	if (typeof value !== "string" || value.length === 0) return void 0;
+	const date = new Date(value);
+	if (isNaN(date.getTime())) return void 0;
+	return date.toLocaleTimeString();
+}
+/**
+* Build a stable, unique input ID from the path. Re-exported alias for
+* {@link fieldDomId} so the Solid adapter has the same import shape as
+* the React adapter's `inputId`.
+*/
+function inputId(path) {
+	return fieldDomId(path);
+}
+/** Headless renderer for `StringField` — plain `<input>` / `<span>`. */
+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,
+			children: "—"
+		});
+		const format = props.constraints.format;
+		if (format === "email" && isSafeMailtoAddress(strValue)) return /* @__PURE__ */ jsx("a", {
+			href: `mailto:${strValue}`,
+			id,
+			"aria-readonly": "true",
+			children: strValue
+		});
+		if ((format === "uri" || format === "url") && isSafeHyperlink(strValue)) return /* @__PURE__ */ jsx("a", {
+			href: strValue,
+			id,
+			"aria-readonly": "true",
+			children: strValue
+		});
+		if (format === "date") return /* @__PURE__ */ jsx("span", {
+			id,
+			children: formatDate(strValue) ?? strValue
+		});
+		if (format === "time") return /* @__PURE__ */ jsx("span", {
+			id,
+			children: formatTime(strValue) ?? strValue
+		});
+		if (format === "date-time" || format === "datetime") return /* @__PURE__ */ jsx("span", {
+			id,
+			children: formatDateTime(strValue) ?? strValue
+		});
+		return /* @__PURE__ */ jsx("span", {
+			id,
+			children: strValue
+		});
+	}
+	const strValue = typeof props.value === "string" ? props.value : "";
+	const dateType = dateInputType(props.constraints.format);
+	const ariaAttrs = buildAriaAttrs(props.tree);
+	const hintInfo = buildHintInfo(id, props.constraints);
+	const hintElement = () => hintInfo === void 0 ? null : /* @__PURE__ */ jsx("small", {
+		id: hintInfo.id,
+		class: "sc-hint",
+		children: hintInfo.hint
+	});
+	if (dateType !== void 0) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		id,
+		type: dateType,
+		value: props.writeOnly ? "" : strValue,
+		onInput: (e) => {
+			props.onChange(e.currentTarget.value);
+		},
+		"aria-describedby": hintInfo?.ariaDescribedBy,
+		...ariaAttrs
+	}), hintElement()] });
+	if (props.tree.type === "enum" && props.tree.enumValues.length > 0) {
+		const enumValues = props.tree.enumValues;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("select", {
+			id,
+			value: strValue,
+			onChange: (e) => {
+				props.onChange(e.currentTarget.value);
+			},
+			"aria-describedby": hintInfo?.ariaDescribedBy,
+			...ariaAttrs,
+			children: [/* @__PURE__ */ jsxs("option", {
+				value: "",
+				children: ["Select", "…"]
+			}), /* @__PURE__ */ jsx(For, {
+				each: enumValues,
+				children: (v) => {
+					const display = displayJsonValue(v);
+					return /* @__PURE__ */ jsx("option", {
+						value: display,
+						children: display
+					});
+				}
+			})]
+		}), hintElement()] });
+	}
+	const isCredential = props.writeOnly && props.constraints.format === "password";
+	const inputType = isCredential ? "password" : props.constraints.format === "email" ? "email" : props.constraints.format === "uri" ? "url" : "text";
+	const autoComplete = isCredential ? strValue.length > 0 ? "current-password" : "new-password" : void 0;
+	const placeholder = typeof props.meta.description === "string" ? props.meta.description : void 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		id,
+		type: inputType,
+		autocomplete: autoComplete,
+		value: props.writeOnly ? "" : strValue,
+		onInput: (e) => {
+			props.onChange(e.currentTarget.value);
+		},
+		placeholder,
+		minlength: props.constraints.minLength,
+		maxlength: props.constraints.maxLength,
+		"aria-describedby": hintInfo?.ariaDescribedBy,
+		...ariaAttrs
+	}), hintElement()] });
+}
+/** Headless renderer for `NumberField` — plain `<input type="number">`. */
+function renderNumber(props) {
+	const id = inputId(props.path);
+	if (props.readOnly) {
+		if (typeof props.value !== "number") return /* @__PURE__ */ jsx("span", {
+			id,
+			children: "—"
+		});
+		return /* @__PURE__ */ jsx("span", {
+			id,
+			children: props.value.toLocaleString()
+		});
+	}
+	const numValue = typeof props.value === "number" ? props.value : "";
+	const ariaAttrs = buildAriaAttrs(props.tree);
+	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;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		id,
+		type: "number",
+		inputmode: inputMode,
+		step: multipleOf !== void 0 ? String(multipleOf) : isInteger ? "1" : void 0,
+		value: props.writeOnly ? "" : numValue,
+		onInput: (e) => {
+			props.onChange(Number(e.currentTarget.value));
+		},
+		min: props.constraints.minimum,
+		max: props.constraints.maximum,
+		"aria-describedby": hintInfo?.ariaDescribedBy,
+		...ariaAttrs
+	}), /* @__PURE__ */ jsx(Show, {
+		when: hintInfo !== void 0,
+		children: /* @__PURE__ */ jsx("small", {
+			id: hintInfo?.id,
+			class: "sc-hint",
+			children: hintInfo?.hint
+		})
+	})] });
+}
+/** Headless renderer for `BooleanField` — plain `<input type="checkbox">`. */
+function renderBoolean(props) {
+	const id = inputId(props.path);
+	if (props.readOnly) {
+		if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx("span", {
+			id,
+			children: "—"
+		});
+		return /* @__PURE__ */ jsx("span", {
+			id,
+			children: props.value ? "Yes" : "No"
+		});
+	}
+	const ariaAttrs = buildAriaAttrs(props.tree, props.meta.description);
+	return /* @__PURE__ */ jsx("input", {
+		id,
+		type: "checkbox",
+		checked: props.writeOnly ? false : props.value === true,
+		onChange: (e) => {
+			props.onChange(e.currentTarget.checked);
+		},
+		...ariaAttrs
+	});
+}
+/** Headless renderer for `EnumField` — plain `<select>` listing each option. */
+function renderEnum(props) {
+	const id = inputId(props.path);
+	const enumValue = typeof props.value === "string" ? props.value : "";
+	if (props.readOnly) return /* @__PURE__ */ jsx("span", {
+		id,
+		children: enumValue.length === 0 ? "—" : enumValue
+	});
+	const ariaAttrs = buildAriaAttrs(props.tree);
+	const hintInfo = buildHintInfo(id, props.constraints);
+	const enumValues = props.tree.type === "enum" ? props.tree.enumValues : [];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("select", {
+		id,
+		value: props.writeOnly ? "" : enumValue,
+		onChange: (e) => {
+			props.onChange(e.currentTarget.value);
+		},
+		"aria-describedby": hintInfo?.ariaDescribedBy,
+		...ariaAttrs,
+		children: [/* @__PURE__ */ jsxs("option", {
+			value: "",
+			children: ["Select", "…"]
+		}), /* @__PURE__ */ jsx(For, {
+			each: enumValues,
+			children: (v) => {
+				const display = displayJsonValue(v);
+				return /* @__PURE__ */ jsx("option", {
+					value: display,
+					children: display
+				});
+			}
+		})]
+	}), /* @__PURE__ */ jsx(Show, {
+		when: hintInfo !== void 0,
+		children: /* @__PURE__ */ jsx("small", {
+			id: hintInfo?.id,
+			class: "sc-hint",
+			children: hintInfo?.hint
+		})
+	})] });
+}
+/**
+* Compute the default value for a freshly added record entry based on
+* the record's value-type schema. Mirrors the React headless
+* implementation byte-for-byte so both adapters seed new entries the
+* same way.
+*/
+function defaultRecordValue(valueType) {
+	if (valueType.defaultValue !== void 0) return valueType.defaultValue;
+	switch (valueType.type) {
+		case "string": return "";
+		case "number": return 0;
+		case "boolean": return false;
+		case "array": return [];
+		case "object":
+		case "record": 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;
+	}
+}
+/**
+* Generate a unique, currently-unused key for a new record entry.
+* Picks the first of `key`, `key-1`, `key-2`, … not in `existing`.
+*/
+function nextRecordKey(existing, base = "key") {
+	if (!existing.includes(base)) return base;
+	let i = 1;
+	while (existing.includes(`${base}-${String(i)}`)) i += 1;
+	return `${base}-${String(i)}`;
+}
+/**
+* Rename a key in an object while preserving insertion order. Returns
+* the original object reference when the rename is a no-op
+* (oldKey === newKey) or when newKey collides with an existing key.
+*/
+function renameRecordKey(obj, oldKey, newKey) {
+	if (oldKey === newKey) return obj;
+	if (newKey in obj && newKey !== oldKey) return obj;
+	const renamed = {};
+	for (const [k, v] of Object.entries(obj)) renamed[k === oldKey ? newKey : k] = v;
+	return renamed;
+}
+/** Headless renderer for `ObjectField` — `<fieldset>` per object. */
+function renderObject(props) {
+	if (props.tree.type !== "object") return null;
+	const obj = isObject(props.value) ? props.value : {};
+	const fields = props.tree.fields;
+	const sortedEntries = sortFieldsByOrder(fields).filter(([, field]) => field.meta.visible !== false);
+	return /* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsx(Show, {
+		when: typeof props.meta.description === "string",
+		children: /* @__PURE__ */ jsx("legend", { children: props.meta.description })
+	}), /* @__PURE__ */ jsx(For, {
+		each: sortedEntries,
+		children: ([key, field]) => {
+			const childValue = obj[key];
+			const childId = inputId(`${props.path}.${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 = props.renderChild(field, childValue, childOnChange, key);
+			if (child === null || child === void 0) return null;
+			return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("label", {
+				for: childId,
+				children: [typeof field.meta.description === "string" ? field.meta.description : key, /* @__PURE__ */ jsx(Show, {
+					when: field.isOptional === false,
+					children: /* @__PURE__ */ jsxs("span", {
+						"aria-hidden": "true",
+						style: { color: "#dc2626" },
+						children: [" ", "*"]
+					})
+				})]
+			}), child] });
+		}
+	})] });
+}
+/** Headless renderer for `RecordField` — editable key/value rows. */
+function renderRecord(props) {
+	if (props.tree.type !== "record") return null;
+	const obj = isObject(props.value) ? props.value : {};
+	const valueType = props.tree.valueType;
+	const entries = Object.entries(obj);
+	if (props.readOnly) {
+		if (entries.length === 0) return /* @__PURE__ */ jsx("span", { children: "—" });
+		return /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-label": ariaLabel(props.meta.description),
+			children: /* @__PURE__ */ jsx(For, {
+				each: entries,
+				children: ([key, value]) => {
+					return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+						for: inputId(`${props.path}.${key}`),
+						children: key
+					}), props.renderChild(valueType, value, () => {}, key)] });
+				}
+			})
+		});
+	}
+	const handleRename = (oldKey, newKey) => {
+		const renamed = renameRecordKey(obj, oldKey, newKey);
+		if (renamed === obj) return;
+		props.onChange(renamed);
+	};
+	const handleValueChange = (key, nextValue) => {
+		const updated = {};
+		for (const [k, val] of Object.entries(obj)) updated[k] = val;
+		updated[key] = nextValue;
+		props.onChange(updated);
+	};
+	const handleRemove = (key) => {
+		const next = {};
+		for (const [k, v] of Object.entries(obj)) {
+			if (k === key) continue;
+			next[k] = v;
+		}
+		props.onChange(next);
+	};
+	const handleAdd = () => {
+		const newKey = nextRecordKey(Object.keys(obj));
+		const next = { ...obj };
+		next[newKey] = defaultRecordValue(valueType);
+		props.onChange(next);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": ariaLabel(props.meta.description),
+		children: [/* @__PURE__ */ jsx(For, {
+			each: entries,
+			children: ([key, value]) => {
+				return /* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("input", {
+						id: `${inputId(`${props.path}.${key}`)}-key`,
+						type: "text",
+						"aria-label": "Entry key",
+						value: key,
+						onChange: (e) => {
+							handleRename(key, e.currentTarget.value);
+						}
+					}),
+					props.renderChild(valueType, value, (nextValue) => {
+						handleValueChange(key, nextValue);
+					}, key),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Remove entry ${key}`,
+						onClick: () => {
+							handleRemove(key);
+						},
+						children: "Remove"
+					})
+				] });
+			}
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Add entry",
+			onClick: handleAdd,
+			children: "Add"
+		})]
+	});
+}
+/** Headless renderer for `ArrayField` — ordered list with add/remove controls. */
+function renderArray(props) {
+	if (props.tree.type !== "array") return null;
+	const arr = Array.isArray(props.value) ? props.value : [];
+	const element = props.tree.element;
+	if (element === void 0) return null;
+	if (props.readOnly) {
+		if (arr.length === 0) return null;
+		return /* @__PURE__ */ jsx("ul", {
+			role: "group",
+			"aria-label": ariaLabel(props.meta.description),
+			children: /* @__PURE__ */ jsx(For, {
+				each: arr,
+				children: (item, i) => /* @__PURE__ */ jsx("li", { children: props.renderChild(element, item, () => {}, `[${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": ariaLabel(props.meta.description),
+		children: [/* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(For, {
+			each: arr,
+			children: (item, i) => {
+				const childOnChange = (v) => {
+					const nextArr = arr.slice();
+					nextArr[i()] = v;
+					props.onChange(nextArr);
+				};
+				return /* @__PURE__ */ jsxs("li", { children: [props.renderChild(element, item, childOnChange, `[${String(i())}]`), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": `Remove item ${String(i())}`,
+					onClick: () => {
+						handleRemove(i());
+					},
+					children: "Remove"
+				})] });
+			}
+		}) }), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Add item",
+			onClick: handleAdd,
+			children: "Add"
+		})]
+	});
+}
+/** Headless renderer for plain `UnionField` — picks the matching option. */
+function renderUnion(props) {
+	const options = props.tree.type === "union" || props.tree.type === "discriminatedUnion" ? props.tree.options : void 0;
+	if (options === void 0 || options.length === 0) {
+		if (props.value === void 0 || props.value === null) return /* @__PURE__ */ jsx("span", { children: "—" });
+		return /* @__PURE__ */ jsx("span", { children: JSON.stringify(props.value) });
+	}
+	const matched = matchUnionOption(options, props.value);
+	if (matched !== void 0) return props.renderChild(matched, props.value, props.onChange);
+	const firstOption = options[0];
+	if (firstOption !== void 0) return props.renderChild(firstOption, props.value, props.onChange);
+	return /* @__PURE__ */ jsx("span", { children: "—" });
+}
+/**
+* Pure helper: convert a tab index into the new value the discriminated
+* union should emit. Returns `undefined` when the index is out of bounds.
+*
+* Extracted so the contract is unit-testable without rendering the tabs
+* component. Mirrors the React adapter's `discriminatedUnionValueForTab`.
+*/
+function discriminatedUnionValueForTab(optionLabels, discKey, newIndex) {
+	const label = optionLabels[newIndex];
+	if (label === void 0) return void 0;
+	return { [discKey]: label };
+}
+/** Headless renderer for `DiscriminatedUnionField` — tabbed UI. */
+function renderDiscriminatedUnion(props) {
+	if (props.tree.type !== "discriminatedUnion") {
+		if (props.value === void 0 || props.value === null) return /* @__PURE__ */ jsx("span", { children: "—" });
+		return /* @__PURE__ */ jsx("span", { children: JSON.stringify(props.value) });
+	}
+	const { options, discriminator: discKey } = props.tree;
+	if (options.length === 0) {
+		if (props.value === void 0 || props.value === null) return /* @__PURE__ */ jsx("span", { children: "—" });
+		return /* @__PURE__ */ jsx("span", { children: JSON.stringify(props.value) });
+	}
+	const { optionLabels, activeIndex, activeOption } = resolveDiscriminatedActive(options, discKey, isObject(props.value) ? props.value : void 0);
+	if (props.readOnly) {
+		if (activeOption !== void 0) return props.renderChild(activeOption, props.value, props.onChange);
+		return /* @__PURE__ */ jsx("span", { children: "—" });
+	}
+	return /* @__PURE__ */ jsx(DiscriminatedUnionTabs, {
+		options,
+		optionLabels,
+		activeIndex,
+		path: props.path,
+		discKey,
+		props
+	});
+}
+/**
+* WAI-ARIA tabs component for discriminated unions, Solid-flavoured.
+*
+* Implements the WAI-ARIA "Tabs with Automatic Activation" pattern:
+* - ArrowRight / ArrowLeft move between tabs, wrapping at the extremes.
+* - Home / End jump to the first / last tab.
+* - `aria-selected`, `aria-controls`, `role="tablist" | "tab" | "tabpanel"`.
+* - Roving tabindex: the active tab carries `tabindex=0`, the rest
+*   `tabindex=-1`.
+*
+* "Automatic activation" means each arrow key both moves focus and
+* activates the new tab in one step — selection and focus stay aligned.
+*
+* The Solid implementation differs from the React equivalent in:
+*
+* - Element refs use Solid's `ref={el => ...}` callback rather than
+*   `useRef`. The refs array is module-local to the JSX closure — no
+*   `createSignal` needed because we never derive reactive state from
+*   the refs themselves, only the array's contents.
+* - A `pendingFocus` signal tracks "the user just pressed an arrow key,
+*   focus should follow the next active index". `createEffect`
+*   consumes the signal — Solid runs the effect after the DOM update
+*   so `.focus()` lands on the freshly-active button.
+* - The handler reads `props.activeIndex` reactively because the parent
+*   re-derives it from `props.props.value` on every tab change.
+*/
+function DiscriminatedUnionTabs(props) {
+	const panelId = panelIdFor(props.path);
+	const tabRefs = [];
+	const [pendingFocus, setPendingFocus] = createSignal(false);
+	const handleTabChange = (newIndex) => {
+		const next = discriminatedUnionValueForTab(props.optionLabels, props.discKey, newIndex);
+		if (next === void 0) return;
+		props.props.onChange(next);
+	};
+	const wrapIndex = (index) => (index % props.options.length + props.options.length) % props.options.length;
+	const handleKeyDown = (e) => {
+		let target;
+		if (e.key === "ArrowRight") target = wrapIndex(props.activeIndex + 1);
+		else if (e.key === "ArrowLeft") target = wrapIndex(props.activeIndex - 1);
+		else if (e.key === "Home") target = 0;
+		else if (e.key === "End") target = props.options.length - 1;
+		if (target === void 0) return;
+		e.preventDefault();
+		if (target === props.activeIndex) return;
+		setPendingFocus(true);
+		handleTabChange(target);
+	};
+	createEffect(() => {
+		if (!pendingFocus()) return;
+		const idx = props.activeIndex;
+		setPendingFocus(false);
+		tabRefs[idx]?.focus();
+	});
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+		role: "tablist",
+		"aria-label": "Select variant",
+		"aria-orientation": "horizontal",
+		style: {
+			display: "flex",
+			gap: "0.25rem",
+			"margin-bottom": "0.5rem"
+		},
+		onKeyDown: handleKeyDown,
+		children: /* @__PURE__ */ jsx(For, {
+			each: props.options,
+			children: (_opt, i) => {
+				const idx = i();
+				const isActive = () => idx === props.activeIndex;
+				const tabStyle = () => ({
+					padding: "0.25rem 0.75rem",
+					border: isActive() ? "1px solid #3b82f6" : "1px solid #d1d5db",
+					"border-radius": "0.25rem",
+					background: isActive() ? "#eff6ff" : "transparent",
+					cursor: "pointer",
+					"font-size": "0.875rem"
+				});
+				return /* @__PURE__ */ jsx("button", {
+					ref: (el) => {
+						tabRefs[idx] = el;
+					},
+					type: "button",
+					role: "tab",
+					id: tabIdFor(props.path, idx),
+					"aria-selected": isActive() ? "true" : "false",
+					"aria-controls": panelId,
+					tabindex: isActive() ? 0 : -1,
+					onClick: () => {
+						handleTabChange(idx);
+					},
+					style: tabStyle(),
+					children: props.optionLabels[idx]
+				});
+			}
+		})
+	}), /* @__PURE__ */ jsx("div", {
+		role: "tabpanel",
+		id: panelId,
+		"aria-labelledby": tabIdFor(props.path, props.activeIndex),
+		children: /* @__PURE__ */ jsx(Show, {
+			when: props.options[props.activeIndex],
+			children: (activeOption) => props.props.renderChild(activeOption(), props.props.value, props.props.onChange)
+		})
+	})] });
+}
+/** Headless renderer for `FileField` — plain `<input type="file">`. */
+function renderFile(props) {
+	const id = inputId(props.path);
+	const accept = props.constraints.mimeTypes?.join(",");
+	if (props.readOnly) return /* @__PURE__ */ jsx("span", {
+		id,
+		children: "File field"
+	});
+	const ariaAttrs = buildAriaAttrs(props.tree, props.meta.description);
+	const hintInfo = buildHintInfo(id, props.constraints);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		id,
+		type: "file",
+		accept,
+		onChange: (e) => {
+			const file = e.currentTarget.files?.[0];
+			if (file !== void 0) props.onChange(file);
+		},
+		"aria-describedby": hintInfo?.ariaDescribedBy,
+		...ariaAttrs
+	}), /* @__PURE__ */ jsx(Show, {
+		when: hintInfo !== void 0,
+		children: /* @__PURE__ */ jsx("small", {
+			id: hintInfo?.id,
+			class: "sc-hint",
+			children: hintInfo?.hint
+		})
+	})] });
+}
+/**
+* Render a literal field — `z.literal("a")` or `{ const: 5 }`.
+*
+* Literals are non-editable by nature; both read-only and editable modes
+* display the literal value(s). Multiple literals (`z.literal(["a","b"])`)
+* render comma-separated.
+*/
+function renderLiteral(props) {
+	const id = inputId(props.path);
+	if (props.tree.type !== "literal") return null;
+	const values = props.tree.literalValues;
+	if (values.length === 0) return /* @__PURE__ */ jsx("span", {
+		id,
+		children: "—"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		id,
+		children: values.map((v) => displayJsonValue(v)).join(", ")
+	});
+}
+/** Render a null field — `z.null()` or `{ type: "null" }`. */
+function renderNull(props) {
+	return /* @__PURE__ */ jsx("span", {
+		id: inputId(props.path),
+		children: "—"
+	});
+}
+/** Render a never field — `z.never()` or `{ not: {} }` / `false` schema. */
+function renderNever(props) {
+	return /* @__PURE__ */ jsx("span", {
+		id: inputId(props.path),
+		class: SC_CLASSES.never,
+		children: /* @__PURE__ */ jsx("em", { children: "never matches" })
+	});
+}
+/** Render a tuple field — positional rendering of each prefix item. */
+function renderTuple(props) {
+	if (props.tree.type !== "tuple") return null;
+	const prefixItems = props.tree.prefixItems;
+	const restItems = props.tree.restItems;
+	const arr = Array.isArray(props.value) ? props.value : [];
+	if (prefixItems.length === 0 && restItems === void 0 && arr.length === 0) return null;
+	const restCount = restItems !== void 0 ? Math.max(arr.length - prefixItems.length, 0) : 0;
+	const restRange = Array.from({ length: restCount }, (_, j) => j);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": ariaLabel(props.meta.description),
+		children: [/* @__PURE__ */ jsx(For, {
+			each: prefixItems,
+			children: (element, i) => {
+				const idx = i();
+				const itemValue = arr[idx];
+				const childOnChange = (v) => {
+					const next = arr.slice();
+					next[idx] = v;
+					props.onChange(next);
+				};
+				return /* @__PURE__ */ jsx("div", { children: props.renderChild(element, itemValue, childOnChange, `[${String(idx)}]`) });
+			}
+		}), /* @__PURE__ */ jsx(Show, {
+			when: restItems,
+			children: (rest) => /* @__PURE__ */ jsx(For, {
+				each: restRange,
+				children: (j) => {
+					const idx = prefixItems.length + j;
+					const itemValue = arr[idx];
+					const childOnChange = (v) => {
+						const next = arr.slice();
+						next[idx] = v;
+						props.onChange(next);
+					};
+					return /* @__PURE__ */ jsx("div", { children: props.renderChild(rest(), itemValue, childOnChange, `[${String(idx)}]`) });
+				}
+			})
+		})]
+	});
+}
+/** Render a conditional field — JSON Schema `if`/`then`/`else`. */
+function renderConditional(props) {
+	if (props.tree.type !== "conditional") return null;
+	const { ifClause, thenClause, elseClause } = props.tree;
+	return /* @__PURE__ */ jsxs("fieldset", {
+		class: SC_CLASSES.conditional,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				class: SC_CLASSES.conditionalIf,
+				children: [
+					/* @__PURE__ */ jsx("strong", { children: "if:" }),
+					" ",
+					props.renderChild(ifClause, props.value, props.onChange)
+				]
+			}),
+			/* @__PURE__ */ jsx(Show, {
+				when: thenClause,
+				children: (then) => /* @__PURE__ */ jsxs("div", {
+					class: SC_CLASSES.conditionalThen,
+					children: [
+						/* @__PURE__ */ jsx("strong", { children: "then:" }),
+						" ",
+						props.renderChild(then(), props.value, props.onChange)
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(Show, {
+				when: elseClause,
+				children: (other) => /* @__PURE__ */ jsxs("div", {
+					class: SC_CLASSES.conditionalElse,
+					children: [
+						/* @__PURE__ */ jsx("strong", { children: "else:" }),
+						" ",
+						props.renderChild(other(), props.value, props.onChange)
+					]
+				})
+			})
+		]
+	});
+}
+/** Render a negation field — JSON Schema `{ not: { ... } }`. */
+function renderNegation(props) {
+	if (props.tree.type !== "negation") return null;
+	return /* @__PURE__ */ jsxs("fieldset", {
+		class: SC_CLASSES.negation,
+		children: [
+			/* @__PURE__ */ jsx("strong", { children: "Must NOT match:" }),
+			" ",
+			props.renderChild(props.tree.negated, props.value, props.onChange)
+		]
+	});
+}
+/** Headless renderer for `UnknownField` — JSON-encoded fallback. */
+function renderUnknown(props) {
+	const id = inputId(props.path);
+	if (props.readOnly) {
+		if (props.value === void 0 || props.value === null) return /* @__PURE__ */ jsx("span", {
+			id,
+			children: "—"
+		});
+		return /* @__PURE__ */ jsx("span", {
+			id,
+			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,
+		onInput: (e) => {
+			props.onChange(e.currentTarget.value);
+		}
+	});
+}
+//#endregion
+export { defaultRecordValue, discriminatedUnionValueForTab, inputId, nextRecordKey, renameRecordKey, renderArray, renderBoolean, renderConditional, renderDiscriminatedUnion, renderEnum, renderFile, renderLiteral, renderNegation, renderNever, renderNull, renderNumber, renderObject, renderRecord, renderString, renderTuple, renderUnion, renderUnknown };