schema-components 2.0.2 → 2.1.0

package/dist/types-BCy7K3nk.d.mts

@@ -0,0 +1,125 @@
+import { j as WalkedField, w as SchemaMeta } from "./types-BBQaEPfE.mjs";
+import { t as AllConstraints } from "./renderer-ab9E52Bp.mjs";
+import { TemplateResult } from "lit";
+
+//#region src/lit/types.d.ts
+/**
+ * Props handed to a Lit render function.
+ *
+ * Shares the same per-field data as `RenderProps` (React) and
+ * `HtmlRenderProps` (HTML-string) but with a `renderChild` typed
+ * over Lit's {@link TemplateResult}. Editable fields receive a
+ * `change` callback that emits a Custom Event up the DOM tree —
+ * unlike React's prop-callback model, Custom Elements communicate via
+ * DOM events, so the renderer wires the input event to a
+ * `dispatchEvent(new CustomEvent("sc-change", { detail: { value } }))`
+ * on the host element.
+ *
+ * Renderers narrow on `tree.type` for per-variant data
+ * (object fields, array element schema, union options, etc.) — the
+ * walker's discriminated union enforces type-correct access.
+ */
+interface LitRenderProps {
+  /** Current field value. */
+  value: unknown;
+  /** Whether to render as read-only display. */
+  readOnly: boolean;
+  /** Whether to render as an empty input. */
+  writeOnly: boolean;
+  /** Schema metadata for this field. */
+  meta: SchemaMeta;
+  /** Constraints from schema checks. */
+  constraints: AllConstraints;
+  /** Dot-separated path from root (e.g. "address.city"). */
+  path: string;
+  /** Example values from the schema's `examples` keyword. */
+  examples?: unknown[];
+  /** Walked field tree for recursive rendering. */
+  tree: WalkedField;
+  /**
+   * Callback to propagate the next value back to the host element.
+   *
+   * Renderers wire DOM events (`@input`, `@change`, `@click` on add /
+   * remove controls) to this callback. The host element catches the
+   * resulting change and emits a `change` Custom Event on itself so
+   * framework consumers can observe via standard `addEventListener`.
+   */
+  change: (value: unknown) => void;
+  /**
+   * Render a child field. Resolver overrides call this to recursively
+   * render nested structures (object fields, array elements, union
+   * options) without re-running the resolver dispatch loop.
+   *
+   * @param tree - The walked field tree for the child
+   * @param value - The child's current value
+   * @param change - Callback receiving the child's next value
+   * @param pathSuffix - Path segment from the parent (e.g. `city` for
+   *   an object key, `[0]` for an array index). Required for every
+   *   container — without it children inherit no path and DOM id
+   *   derivation throws.
+   */
+  renderChild: (tree: WalkedField, value: unknown, change: (next: unknown) => void, pathSuffix?: string) => TemplateResult;
+}
+/**
+ * Signature for a Lit render function attached to a
+ * {@link LitComponentResolver}. Receives the per-field
+ * {@link LitRenderProps} built by the walker and returns a Lit
+ * {@link TemplateResult} for direct interpolation into the host
+ * element's `render()` method.
+ *
+ * The return type is `TemplateResult`, the type produced by
+ * the `html`-tagged template literal. Unlike `RenderFunction` (React)
+ * which returns `unknown` so React elements, primitive children, and
+ * arbitrary value types can flow through, Lit templates have a single
+ * canonical type — narrowing makes the resolver dispatch loop simpler
+ * and forces every renderer to return a structurally compatible value.
+ */
+type LitRenderFunction = (props: LitRenderProps) => TemplateResult;
+/**
+ * Theme adapter — maps every schema field type to its Lit renderer.
+ *
+ * Structurally mirrors `ComponentResolver` (React) and `HtmlResolver`
+ * (HTML-string) so the resolver-key tuple in `core/renderer.ts`
+ * (`RESOLVER_KEYS`) drives every dispatch surface from a single
+ * source-of-truth list.
+ *
+ * Unset keys fall through to the default Lit resolver
+ * (`defaultLitResolver` in `lit/renderers/registry.ts`). The default
+ * resolver is composed from the built-in `<sc-*>` Custom Elements
+ * registered by {@link registerSchemaComponents} — overriding a key
+ * here lets a consumer bypass the Custom Element registry for a
+ * specific schema type without unregistering the element.
+ */
+interface LitComponentResolver {
+  string?: LitRenderFunction;
+  number?: LitRenderFunction;
+  boolean?: LitRenderFunction;
+  null?: LitRenderFunction;
+  enum?: LitRenderFunction;
+  object?: LitRenderFunction;
+  array?: LitRenderFunction;
+  tuple?: LitRenderFunction;
+  record?: LitRenderFunction;
+  union?: LitRenderFunction;
+  discriminatedUnion?: LitRenderFunction;
+  conditional?: LitRenderFunction;
+  negation?: LitRenderFunction;
+  literal?: LitRenderFunction;
+  file?: LitRenderFunction;
+  never?: LitRenderFunction;
+  unknown?: LitRenderFunction;
+}
+/**
+ * Compile-time witness that {@link LitRenderFunction} is a
+ * `(props: P) => O` shape exactly matching the parallel signatures
+ * carried by `core/renderer.ts`. The walker's dispatch loop is
+ * parameterised over `O` (React's `unknown`, HTML's `string`, Lit's
+ * `TemplateResult`) and `P` (the matching per-renderer props), so this
+ * alias documents the contract without forcing `core/renderer.ts` to
+ * import Lit.
+ *
+ * @internal
+ */
+type _LitFunctionShapeAssertion = LitRenderFunction extends ((props: LitRenderProps) => TemplateResult) ? true : false;
+//#endregion
+export { _LitFunctionShapeAssertion as i, LitRenderFunction as n, LitRenderProps as r, LitComponentResolver as t };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "schema-components",
-    "version": "2.0.2",
+    "version": "2.1.0",
     "description": "React components that render UI from Zod schemas, JSON Schema, and OpenAPI documents",
     "type": "module",
     "exports": {
@@ -13,6 +13,10 @@
             "types": "./dist/react/*.d.mts",
             "import": "./dist/react/*.mjs"
         },
+        "./preact/*": {
+            "types": "./dist/preact/*.d.mts",
+            "import": "./dist/preact/*.mjs"
+        },
         "./openapi/*": {
             "types": "./dist/openapi/*.d.mts",
             "import": "./dist/openapi/*.mjs"
@@ -24,10 +28,30 @@
         "./themes/*": {
             "types": "./dist/themes/*.d.mts",
             "import": "./dist/themes/*.mjs"
+        },
+        "./vue/*": {
+            "types": "./dist/vue/*.d.mts",
+            "import": "./dist/vue/*.mjs"
+        },
+        "./svelte/*.svelte": "./src/svelte/*.svelte",
+        "./svelte/renderers/*.svelte": "./src/svelte/renderers/*.svelte",
+        "./svelte/*": {
+            "types": "./src/svelte/*.ts",
+            "svelte": "./src/svelte/*.ts",
+            "import": "./src/svelte/*.ts"
+        },
+        "./solid/*": {
+            "types": "./dist/solid/*.d.mts",
+            "import": "./dist/solid/*.mjs"
+        },
+        "./lit/*": {
+            "types": "./dist/lit/*.d.mts",
+            "import": "./dist/lit/*.mjs"
         }
     },
     "files": [
         "dist",
+        "src/svelte",
         "LICENSE",
         "README.md",
         "CHANGELOG.md"
@@ -38,6 +62,11 @@
         "_lint:fix": "eslint --cache --fix 'src/**/*.{ts,tsx}'",
         "_test": "vitest run --project=unit",
         "_test:e2e": "vitest run --project=e2e",
+        "_test:preact": "vitest run --project=unit-preact",
+        "_test:vue": "vitest run --project=unit-vue",
+        "_test:svelte": "vitest run --project=unit-svelte",
+        "_test:solid": "vitest run --project=unit-solid",
+        "_test:lit": "vitest run --project=unit-lit",
         "_test:coverage": "vitest run --project=unit --coverage",
         "_build": "tsdown && cp src/html/styles.css dist/html/styles.css",
         "_typedoc": "typedoc",
@@ -47,6 +76,10 @@
         "lint": "turbo run _lint",
         "lint:fix": "turbo run _lint:fix",
         "test": "turbo run _test",
+        "test:preact": "turbo run _test:preact",
+        "test:svelte": "turbo run _test:svelte",
+        "test:solid": "turbo run _test:solid",
+        "test:lit": "turbo run _test:lit",
         "test:coverage": "turbo run _test:coverage",
         "check": "turbo run _check",
         "validate": "turbo run _validate",
@@ -77,17 +110,47 @@
         "provenance": true
     },
     "peerDependencies": {
+        "lit": ">=3.0.0",
+        "preact": ">=10.0.0",
         "react": "^18.0.0 || ^19.0.0",
+        "solid-js": ">=1.8.0",
+        "svelte": ">=5.0.0",
+        "vue": ">=3.5.0",
         "zod": "^4.0.0"
     },
+    "peerDependenciesMeta": {
+        "lit": {
+            "optional": true
+        },
+        "preact": {
+            "optional": true
+        },
+        "solid-js": {
+            "optional": true
+        },
+        "svelte": {
+            "optional": true
+        },
+        "vue": {
+            "optional": true
+        }
+    },
     "devDependencies": {
         "@eslint/js": "10.0.1",
+        "@lit-labs/ssr": "4.0.0",
+        "@lit-labs/ssr-client": "1.1.8",
+        "@lit/context": "1.1.6",
+        "@solidjs/testing-library": "0.8.10",
+        "@sveltejs/vite-plugin-svelte": "7.1.2",
         "@testing-library/react": "16.3.2",
+        "@testing-library/svelte": "5.3.1",
         "@testing-library/user-event": "14.6.1",
         "@types/node": "25.6.2",
         "@types/react": "19.2.14",
         "@types/react-dom": "19.2.3",
+        "@vitejs/plugin-vue": "6.0.6",
         "@vitest/coverage-v8": "4.1.5",
+        "@vue/test-utils": "2.4.10",
         "eslint": "10.3.0",
         "eslint-config-prettier": "10.1.8",
         "eslint-plugin-import": "2.32.0",
@@ -96,9 +159,14 @@
         "eslint-plugin-prettier": "5.5.5",
         "eslint-plugin-tsdoc": "0.5.2",
         "happy-dom": "20.9.0",
+        "lit": "3.3.2",
+        "preact": "10.29.1",
+        "preact-render-to-string": "6.6.7",
         "prettier": "3.8.3",
         "react": "19.2.6",
         "react-dom": "19.2.6",
+        "solid-js": "1.9.12",
+        "svelte": "5.55.5",
         "tsdown": "0.22.0",
         "tslib": "2.8.1",
         "typedoc": "0.28.19",
@@ -107,7 +175,9 @@
         "typedoc-plugin-missing-exports": "4.1.3",
         "typescript": "6.0.3",
         "typescript-eslint": "8.59.2",
+        "vite-plugin-solid": "2.11.12",
         "vitest": "4.1.5",
+        "vue": "3.5.34",
         "zod": "4.4.3"
     }
 }

package/src/svelte/SchemaComponent.svelte

@@ -0,0 +1,427 @@
+<!--
+    Editable Svelte 5 entry point that renders UI from a Zod schema,
+    JSON Schema, or OpenAPI document.
+
+    Mirror of `react/SchemaComponent.tsx :: SchemaComponent` adapted
+    to Svelte 5 runes:
+
+      - `$props<…>()` destructures inputs (no React `useContext` /
+        `useId` / `useMemo` / `useCallback`).
+      - `$derived(...)` for memoised values (the merged meta, the
+        normalised JSON schema, the walked tree, the dispatcher's
+        rootPath).
+      - `$state` for the per-mount default `idPrefix` (computed once
+        and held; `useId()` equivalent provided by Svelte 5's
+        `$props.id()` rune is intentionally not used here — every
+        path generated downstream is structurally suffixed and
+        passing a deterministic `idPrefix` is the contracted
+        override for snapshot tests).
+      - The dispatcher is the same `dispatchRenderField` shared with
+        the React and HTML adapters, wired through `renderFieldSvelte`
+        in `./dispatch.ts`.
+
+    External-value reactivity contract: `value` is consumed as an
+    immutable prop and any internal edit fires `onChange(next)` with
+    a freshly cloned object. Consumers can either:
+
+      - Pass a plain object and a function `onChange` that mutates
+        local state — typical controlled-component pattern; works
+        identically across React / Solid / Svelte.
+      - Use Svelte's `bind:value` ergonomics — Svelte translates
+        `bind:value` into an `onChange` that mutates the bound
+        reference, so this component does not need to know about
+        the binding.
+
+    Svelte's reactivity tracks reference identity on the `value`
+    prop. Internal edits emit fresh objects (`{ ...obj, key: v }`)
+    rather than mutating the prop, so consumers using
+    `$state(value)` see new identities propagated correctly. Deep
+    mutations of the prop object from outside the component — e.g.
+    `value.foo = "bar"` — would not be observed; that is the same
+    constraint Vue, Solid, and React impose on shared mutable
+    state and is documented in the package README.
+-->
+<script lang="ts" generics="T = unknown, Ref extends string | undefined = undefined">
+    import { z } from "zod";
+    import { walk } from "../core/walker.ts";
+    import type { WalkOptions } from "../core/walkBuilders.ts";
+    import {
+        isCodecSchema,
+        normaliseSchema,
+        type SchemaIoSide,
+    } from "../core/adapter.ts";
+    import type {
+        DiagnosticsOptions,
+        Diagnostic,
+    } from "../core/diagnostics.ts";
+    import { SchemaNormalisationError } from "../core/errors.ts";
+    import type { SchemaMeta, WalkedField } from "../core/types.ts";
+    import type { SchemaError } from "../core/errors.ts";
+    import { isObject, toRecordOrUndefined } from "../core/guards.ts";
+    import type {
+        InferFields,
+        InferSchemaValue,
+    } from "../core/inferValue.ts";
+    import { resolverContext, widgetsContext } from "./contexts.ts";
+    import { renderFieldSvelte } from "./dispatch.ts";
+    import RecursionSentinel from "./renderers/RecursionSentinel.svelte";
+    import Fallback from "./renderers/Fallback.svelte";
+    import Mount from "./renderers/Mount.svelte";
+    import type {
+        SvelteComponentResolver,
+        SvelteRenderDescriptor,
+        SvelteRenderProps,
+        SvelteWidgetMap,
+    } from "./types.ts";
+
+    interface Props {
+        /** Zod 4, JSON Schema, or OpenAPI document. */
+        schema: T;
+        /** OpenAPI ref string, e.g. "#/components/schemas/User". */
+        ref?: Ref;
+        /** Direction (`"output"` / `"input"`) for codec / transform schemas. */
+        io?: SchemaIoSide;
+        /** Current value to render. */
+        value?: InferSchemaValue<T, Ref, "output">;
+        /** Called when the value changes. */
+        onChange?: (value: InferSchemaValue<T, Ref, "output">) => void;
+        /** Run `safeParse` / `safeEncode` on change. */
+        validate?: boolean;
+        /** Called with the ZodError on validation failure. */
+        onValidationError?: (error: unknown) => void;
+        /** Called when schema normalisation or rendering fails. */
+        onError?: (error: SchemaError) => void;
+        /** Called with each diagnostic emitted during processing. */
+        onDiagnostic?: (diagnostic: Diagnostic) => void;
+        /** When true, any diagnostic becomes a thrown error. */
+        strict?: boolean;
+        /** Per-field meta overrides. */
+        fields?: InferFields<T, Ref>;
+        /** Meta overrides applied to the root schema. */
+        meta?: SchemaMeta;
+        /** Convenience: sets readOnly on all fields. */
+        readOnly?: boolean;
+        /** Convenience: sets writeOnly on all fields. */
+        writeOnly?: boolean;
+        /** Convenience: sets description on the root. */
+        description?: string;
+        /** Instance-scoped widgets. */
+        widgets?: SvelteWidgetMap;
+        /**
+         * Prefix used for every input `id` / label `for` in this
+         * component subtree. Defaults to a sanitised, mount-stable
+         * value derived from `crypto.randomUUID()` when available
+         * (falling back to a counter). Override for deterministic
+         * ids in snapshot tests.
+         */
+        idPrefix?: string;
+    }
+
+    const {
+        schema,
+        ref,
+        io,
+        value,
+        onChange,
+        validate,
+        onValidationError,
+        onError,
+        onDiagnostic,
+        strict,
+        fields,
+        meta: componentMeta,
+        readOnly,
+        writeOnly,
+        description,
+        widgets: instanceWidgets,
+        idPrefix,
+    }: Props = $props();
+
+    const userResolver = resolverContext.consume();
+    const contextWidgets = widgetsContext.consume();
+
+    /**
+     * Per-mount fallback prefix used when the consumer doesn't pass
+     * `idPrefix`. Module-level counter incremented once per
+     * component instance — deterministic enough for typical
+     * applications without requiring `crypto.randomUUID()` in
+     * non-browser environments.
+     */
+    const fallbackPrefix = `sc-svelte-${String(nextInstanceId())}`;
+    const rootPath = $derived(idPrefix ?? fallbackPrefix);
+
+    const mergedMeta = $derived<SchemaMeta>({
+        ...componentMeta,
+        ...(readOnly === true ? { readOnly: true } : {}),
+        ...(writeOnly === true ? { writeOnly: true } : {}),
+        ...(description !== undefined ? { description } : {}),
+    });
+
+    const diagnostics: DiagnosticsOptions | undefined = $derived(
+        onDiagnostic !== undefined || strict === true
+            ? {
+                  ...(onDiagnostic !== undefined
+                      ? { diagnostics: onDiagnostic }
+                      : {}),
+                  ...(strict !== undefined ? { strict } : {}),
+              }
+            : undefined
+    );
+
+    interface NormalisedShape {
+        jsonSchema: Record<string, unknown>;
+        zodSchema: unknown;
+        rootMeta: SchemaMeta | undefined;
+        rootDocument: Record<string, unknown>;
+    }
+
+    const normalisedResult = $derived<NormalisedShape | SchemaError>(
+        normaliseSafely(schema, ref, io, diagnostics)
+    );
+
+    /**
+     * If normalisation failed and the consumer wired up `onError`,
+     * surface the structured error through the callback once per
+     * change. Mirrors the React adapter's behaviour where
+     * `SchemaNormalisationError` is routed through `onError` rather
+     * than thrown at render time.
+     */
+    $effect(() => {
+        if (normalisedResult instanceof Error && onError !== undefined) {
+            onError(normalisedResult);
+        }
+    });
+
+    const fieldsRecord = $derived(toRecordOrUndefined(fields));
+
+    const walkOptions = $derived<WalkOptions | undefined>(
+        normalisedResult instanceof Error
+            ? undefined
+            : {
+                  componentMeta: mergedMeta,
+                  ...(normalisedResult.rootMeta !== undefined
+                      ? { rootMeta: normalisedResult.rootMeta }
+                      : {}),
+                  ...(fieldsRecord !== undefined
+                      ? { fieldOverrides: fieldsRecord }
+                      : {}),
+                  rootDocument: normalisedResult.rootDocument,
+                  ...(diagnostics !== undefined ? { diagnostics } : {}),
+              }
+    );
+
+    const tree = $derived<WalkedField | undefined>(
+        normalisedResult instanceof Error || walkOptions === undefined
+            ? undefined
+            : walk(normalisedResult.jsonSchema, walkOptions)
+    );
+
+    function handleChange(nextValue: unknown): void {
+        if (validate === true && !(normalisedResult instanceof Error)) {
+            const error = runValidation(
+                normalisedResult.zodSchema,
+                normalisedResult.jsonSchema,
+                nextValue,
+                io,
+                onDiagnostic
+            );
+            if (error !== undefined) onValidationError?.(error);
+        }
+        if (onChange !== undefined) {
+            // Library boundary identical to the React adapter — the
+            // walker produces `unknown` typed values that downstream
+            // call sites receive as the inferred schema shape. The
+            // contravariant assignment cannot be proven by
+            // TypeScript and is the same pattern used in
+            // `react/SchemaComponent.tsx`.
+            onChange(nextValue as InferSchemaValue<T, Ref, "output">);
+        }
+    }
+
+    function makeRenderChild(
+        currentDepth: number,
+        parentPath: string,
+        currentValue: unknown,
+        currentOnChange: (v: unknown) => void
+    ): SvelteRenderProps["renderChild"] {
+        return (
+            childTree: WalkedField,
+            childValue: unknown,
+            childOnChange: (v: unknown) => void,
+            pathSuffix?: string
+        ): SvelteRenderDescriptor | null => {
+            const childPath = joinPath(parentPath, pathSuffix);
+            return renderFieldSvelte(
+                childTree,
+                childValue,
+                childOnChange,
+                userResolver,
+                makeRenderChild(
+                    currentDepth + 1,
+                    childPath,
+                    childValue,
+                    childOnChange
+                ),
+                childPath,
+                instanceWidgets,
+                contextWidgets,
+                currentDepth + 1,
+                Fallback,
+                RecursionSentinel
+            );
+        };
+    }
+
+    const renderChild = $derived(
+        tree === undefined
+            ? undefined
+            : makeRenderChild(0, rootPath, value ?? tree.defaultValue, handleChange)
+    );
+
+    const effectiveValue = $derived(
+        tree === undefined ? value : (value ?? tree.defaultValue)
+    );
+
+    const rootDescriptor = $derived<SvelteRenderDescriptor | null>(
+        tree === undefined || renderChild === undefined
+            ? null
+            : renderFieldSvelte(
+                  tree,
+                  effectiveValue,
+                  handleChange,
+                  userResolver,
+                  renderChild,
+                  rootPath,
+                  instanceWidgets,
+                  contextWidgets,
+                  0,
+                  Fallback,
+                  RecursionSentinel
+              )
+    );
+
+    /**
+     * Append a child path suffix to a parent path. When the suffix
+     * is omitted (e.g. transparent wrappers like union options), the
+     * parent path is returned unchanged so the child inherits the
+     * parent's id. Matches `react/SchemaComponent.tsx :: joinPath`.
+     */
+    function joinPath(parent: string, suffix: string | undefined): string {
+        if (suffix === undefined || suffix.length === 0) return parent;
+        if (parent.length === 0) return suffix;
+        if (suffix.startsWith("[")) return `${parent}${suffix}`;
+        return `${parent}.${suffix}`;
+    }
+
+    function normaliseSafely(
+        schemaInput: unknown,
+        refInput: string | undefined,
+        ioSide: SchemaIoSide | undefined,
+        diags: DiagnosticsOptions | undefined
+    ): NormalisedShape | SchemaError {
+        try {
+            const opts =
+                diags !== undefined || ioSide !== undefined
+                    ? {
+                          ...(diags !== undefined ? { diagnostics: diags } : {}),
+                          ...(ioSide !== undefined ? { io: ioSide } : {}),
+                      }
+                    : undefined;
+            const out = normaliseSchema(schemaInput, refInput, opts);
+            return out;
+        } catch (err: unknown) {
+            if (err instanceof SchemaNormalisationError) return err;
+            return new SchemaNormalisationError(
+                err instanceof Error
+                    ? err.message
+                    : "Failed to normalise schema",
+                schemaInput,
+                "unknown"
+            );
+        }
+    }
+
+    function runValidation(
+        zodSchema: unknown,
+        jsonSchema: Record<string, unknown>,
+        nextValue: unknown,
+        ioSide: SchemaIoSide | undefined,
+        diag: ((diagnostic: Diagnostic) => void) | undefined
+    ): unknown {
+        if (zodSchema !== undefined && isObject(zodSchema)) {
+            const resolvedIo: SchemaIoSide = ioSide ?? "output";
+            const useSafeEncode =
+                isCodecSchema(zodSchema) && resolvedIo === "output";
+            const validateFn = useSafeEncode
+                ? zodSchema.safeEncode
+                : zodSchema.safeParse;
+            if (typeof validateFn === "function") {
+                const result: unknown = validateFn(nextValue);
+                if (
+                    isObject(result) &&
+                    "success" in result &&
+                    result.success !== true
+                ) {
+                    return result.error;
+                }
+                return undefined;
+            }
+        }
+        let parsed: unknown;
+        try {
+            parsed = z.fromJSONSchema(jsonSchema);
+        } catch (err: unknown) {
+            if (diag !== undefined) {
+                const message =
+                    err instanceof Error
+                        ? err.message
+                        : "z.fromJSONSchema threw a non-Error value";
+                diag({
+                    code: "unsupported-type",
+                    message:
+                        "Skipping fallback validation: z.fromJSONSchema could not " +
+                        `round-trip the normalised JSON Schema. Original message: ${message}`,
+                    pointer: "",
+                    detail: { source: "z.fromJSONSchema" },
+                });
+                return undefined;
+            }
+            return undefined;
+        }
+        if (isObject(parsed) && typeof parsed.safeParse === "function") {
+            const result: unknown = parsed.safeParse(nextValue);
+            if (
+                isObject(result) &&
+                "success" in result &&
+                result.success !== true
+            ) {
+                return result.error;
+            }
+        }
+        return undefined;
+    }
+</script>
+
+<script lang="ts" module>
+    let instanceCounter = 0;
+    /**
+     * Module-scoped counter feeding the default `idPrefix` for every
+     * `<SchemaComponent>` instance. Bumped once per mount so two
+     * components on the same page never share generated ids.
+     *
+     * Counter rather than `crypto.randomUUID()` because the renderer
+     * also runs in SSR / Node environments where the Web Crypto API
+     * is conditional. A monotonically increasing integer per process
+     * is sufficient for the per-page-uniqueness contract.
+     *
+     * @returns The next per-instance integer (1, 2, …).
+     */
+    export function nextInstanceId(): number {
+        instanceCounter += 1;
+        return instanceCounter;
+    }
+</script>
+
+{#if rootDescriptor !== null}
+    <Mount descriptor={rootDescriptor} />
+{/if}