schema-components 2.0.2 → 2.1.1

package/src/svelte/renderers/Record.svelte

@@ -0,0 +1,134 @@
+<!--
+    Headless Svelte 5 renderer for `RecordField` — editable key/value
+    rows with add / remove controls. Mirror of
+    `react/headlessRenderers.tsx :: renderRecord`.
+
+    Read-only mode renders a labelled list, falling back to an
+    em-dash placeholder when empty. Editable mode wraps each entry
+    in a row with a renameable key input, the value editor, and a
+    Remove button; the footer Add button appends a new entry with a
+    type-appropriate default via `defaultRecordValue`.
+
+    Key rename uses `onblur` rather than `oninput` so intermediate
+    typing states don't trigger early `onChange` calls — matches the
+    React renderer's `onBlur` semantics.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { fieldDomId } from "../../core/idPath.ts";
+    import { EM_DASH } from "../../core/cssClasses.ts";
+    import { isObject } from "../../core/guards.ts";
+    import { ariaLabel } from "../a11y.ts";
+    import {
+        defaultRecordValue,
+        nextRecordKey,
+        renameRecordKey,
+    } from "../headlessFns.ts";
+    import Mount from "./Mount.svelte";
+
+    const props = $props<SvelteRenderProps>();
+
+    const obj = $derived<Record<string, unknown>>(
+        isObject(props.value) ? props.value : {}
+    );
+    const valueType = $derived(
+        props.tree.type === "record" ? props.tree.valueType : undefined
+    );
+    const entries = $derived(Object.entries(obj));
+</script>
+
+{#if props.tree.type === "record" && valueType !== undefined}
+    {#if props.readOnly}
+        {#if entries.length === 0}
+            <span>{EM_DASH}</span>
+        {:else}
+            <div role="group" aria-label={ariaLabel(props.meta.description)}>
+                {#each entries as [key, value] (key)}
+                    {@const childId = fieldDomId(`${props.path}.${key}`)}
+                    {@const child = props.renderChild(
+                        valueType,
+                        value,
+                        () => {
+                            /* read-only: noop */
+                        },
+                        key
+                    )}
+                    <div>
+                        <label for={childId}>{key}</label>
+                        {#if child !== null}
+                            <Mount descriptor={child} />
+                        {/if}
+                    </div>
+                {/each}
+            </div>
+        {/if}
+    {:else}
+        {@const handleRename = (oldKey: string, newKey: string) => {
+            const renamed = renameRecordKey(obj, oldKey, newKey);
+            if (renamed === obj) return;
+            props.onChange(renamed);
+        }}
+        {@const handleValueChange = (key: string, nextValue: unknown) => {
+            const updated: Record<string, unknown> = {};
+            for (const [k, val] of Object.entries(obj)) {
+                updated[k] = val;
+            }
+            updated[key] = nextValue;
+            props.onChange(updated);
+        }}
+        {@const handleRemove = (key: string) => {
+            const next: Record<string, unknown> = {};
+            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: Record<string, unknown> = { ...obj };
+            next[newKey] = defaultRecordValue(valueType);
+            props.onChange(next);
+        }}
+        <div role="group" aria-label={ariaLabel(props.meta.description)}>
+            {#each entries as [key, value] (key)}
+                {@const childId = fieldDomId(`${props.path}.${key}`)}
+                {@const keyId = `${childId}-key`}
+                {@const childOnChange = (v: unknown) => {
+                    handleValueChange(key, v);
+                }}
+                {@const child = props.renderChild(
+                    valueType,
+                    value,
+                    childOnChange,
+                    key
+                )}
+                <div>
+                    <input
+                        id={keyId}
+                        type="text"
+                        aria-label="Entry key"
+                        value={key}
+                        onblur={(e) => {
+                            const target = e.currentTarget;
+                            if (target instanceof HTMLInputElement) {
+                                handleRename(key, target.value);
+                            }
+                        }}
+                    />
+                    {#if child !== null}
+                        <Mount descriptor={child} />
+                    {/if}
+                    <button
+                        type="button"
+                        aria-label={`Remove entry ${key}`}
+                        onclick={() => handleRemove(key)}>Remove</button
+                    >
+                </div>
+            {/each}
+            <button type="button" aria-label="Add entry" onclick={handleAdd}
+                >Add</button
+            >
+        </div>
+    {/if}
+{/if}

package/src/svelte/renderers/RecursionSentinel.svelte

@@ -0,0 +1,27 @@
+<!--
+    Recursion-cap sentinel rendered when the Svelte dispatcher reaches
+    `MAX_RENDER_DEPTH`. Mirror of the React recursion sentinel
+    (a `<fieldset>` with an em-dashed "(recursive)" label) from
+    `react/SchemaComponent.tsx :: renderField`.
+
+    Receives the standard {@link SvelteRenderProps} bag and renders
+    only the `meta.description` (falling back to "schema") inside a
+    `<fieldset>` — the children are intentionally elided to break the
+    recursion.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { SC_CLASSES } from "../../core/cssClasses.ts";
+
+    const props = $props<SvelteRenderProps>();
+
+    const label = $derived(
+        typeof props.meta.description === "string"
+            ? props.meta.description
+            : "schema"
+    );
+</script>
+
+<fieldset class={SC_CLASSES.recursive}>
+    <em>{`↻ ${label} (recursive)`}</em>
+</fieldset>

package/src/svelte/renderers/String.svelte

@@ -0,0 +1,152 @@
+<!--
+    Headless Svelte 5 renderer for `StringField` — plain `<input>` /
+    `<span>` mirror of `react/headlessRenderers.tsx :: renderString`.
+
+    Honours the same accessibility wiring as the React equivalent:
+    `aria-required`, `aria-describedby`, an optional sibling
+    `<small class="sc-hint">` and a forced `aria-label` when the
+    `meta.description` is supplied. Date / time / email / URL formats
+    swap the `<input type="…">` accordingly; password format triggers
+    masking and an `autocomplete="(current|new)-password"` hint.
+
+    Read-only mode renders a `<span>` (or a safe `<a>` for valid
+    `mailto:` / `https:` URIs). All editable inputs propagate value
+    changes via the supplied `props.onChange` callback — no synthetic
+    events, no two-way binding, just a raw DOM `onchange` handler.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { fieldDomId } from "../../core/idPath.ts";
+    import { dateInputType } from "../../core/formats.ts";
+    import { isSafeHyperlink, isSafeMailtoAddress } from "../../core/uri.ts";
+    import { displayJsonValue } from "../../core/walkBuilders.ts";
+    import { EM_DASH, ELLIPSIS } from "../../core/cssClasses.ts";
+    import { buildAriaAttrs, buildHintInfo } from "../a11y.ts";
+
+    const props = $props<SvelteRenderProps>();
+
+    const id = $derived(fieldDomId(props.path));
+    const strValue = $derived(
+        typeof props.value === "string" ? props.value : ""
+    );
+
+    function formatDateTime(value: string): string {
+        const date = new Date(value);
+        if (Number.isNaN(date.getTime())) return value;
+        return date.toLocaleString();
+    }
+
+    function formatDate(value: string): string {
+        const date = new Date(value);
+        if (Number.isNaN(date.getTime())) return value;
+        return date.toLocaleDateString();
+    }
+
+    function formatTime(value: string): string {
+        const date = new Date(value);
+        if (Number.isNaN(date.getTime())) return value;
+        return date.toLocaleTimeString();
+    }
+</script>
+
+{#if props.readOnly}
+    {@const readValue = typeof props.value === "string" ? props.value : ""}
+    {#if readValue.length === 0}
+        <span {id}>{EM_DASH}</span>
+    {:else if props.constraints.format === "email" && isSafeMailtoAddress(readValue)}
+        <!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
+        <a href={`mailto:${readValue}`} {id} aria-readonly="true">{readValue}</a>
+    {:else if (props.constraints.format === "uri" || props.constraints.format === "url") && isSafeHyperlink(readValue)}
+        <!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
+        <a href={readValue} {id} aria-readonly="true">{readValue}</a>
+    {:else if props.constraints.format === "date"}
+        <span {id}>{formatDate(readValue)}</span>
+    {:else if props.constraints.format === "time"}
+        <span {id}>{formatTime(readValue)}</span>
+    {:else if props.constraints.format === "date-time" || props.constraints.format === "datetime"}
+        <span {id}>{formatDateTime(readValue)}</span>
+    {:else}
+        <span {id}>{readValue}</span>
+    {/if}
+{:else}
+    {@const dateType = dateInputType(props.constraints.format)}
+    {@const ariaAttrs = buildAriaAttrs(props.tree)}
+    {@const hintInfo = buildHintInfo(id, props.constraints)}
+    {@const enumValues =
+        props.tree.type === "enum" ? props.tree.enumValues : []}
+    {@const isCredential =
+        props.writeOnly === true && 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"
+        : undefined}
+    {@const placeholderText =
+        typeof props.meta.description === "string"
+            ? props.meta.description
+            : undefined}
+
+    {#if dateType !== undefined}
+        <input
+            {id}
+            type={dateType}
+            value={props.writeOnly ? "" : strValue}
+            onchange={(e) => {
+                const target = e.currentTarget;
+                if (target instanceof HTMLInputElement) {
+                    props.onChange(target.value);
+                }
+            }}
+            aria-describedby={hintInfo?.ariaDescribedBy}
+            {...ariaAttrs}
+        />
+    {:else if props.tree.type === "enum" && enumValues.length > 0}
+        <select
+            {id}
+            value={props.writeOnly ? "" : strValue}
+            onchange={(e) => {
+                const target = e.currentTarget;
+                if (target instanceof HTMLSelectElement) {
+                    props.onChange(target.value);
+                }
+            }}
+            aria-describedby={hintInfo?.ariaDescribedBy}
+            {...ariaAttrs}
+        >
+            <option value="">Select{ELLIPSIS}</option>
+            {#each enumValues as v (displayJsonValue(v))}
+                <option value={displayJsonValue(v)}
+                    >{displayJsonValue(v)}</option
+                >
+            {/each}
+        </select>
+    {:else}
+        <input
+            {id}
+            type={inputType}
+            autocomplete={autoComplete}
+            value={props.writeOnly ? "" : strValue}
+            onchange={(e) => {
+                const target = e.currentTarget;
+                if (target instanceof HTMLInputElement) {
+                    props.onChange(target.value);
+                }
+            }}
+            placeholder={placeholderText}
+            minlength={props.constraints.minLength}
+            maxlength={props.constraints.maxLength}
+            aria-describedby={hintInfo?.ariaDescribedBy}
+            {...ariaAttrs}
+        />
+    {/if}
+    {#if hintInfo !== undefined}
+        <small id={hintInfo.id} class="sc-hint">{hintInfo.hint}</small>
+    {/if}
+{/if}

package/src/svelte/renderers/Tuple.svelte

@@ -0,0 +1,84 @@
+<!--
+    Headless Svelte 5 renderer for tuple fields — positional
+    rendering of `prefixItems` followed by any `restItems`. Mirror of
+    `react/headlessRenderers.tsx :: renderTuple`.
+
+    Each prefix entry is rendered at its index with structural suffix
+    `[i]`. Rest items beyond `prefixItems.length` are rendered when a
+    `restItems` schema is present and the value array is longer than
+    the prefix.
+
+    Renders nothing when the tuple has no prefix items, no rest
+    schema, and no values — keeps empty positions from emitting
+    pointless wrappers.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { ariaLabel } from "../a11y.ts";
+    import Mount from "./Mount.svelte";
+
+    const props = $props<SvelteRenderProps>();
+
+    const prefixItems = $derived(
+        props.tree.type === "tuple" ? props.tree.prefixItems : []
+    );
+    const restItems = $derived(
+        props.tree.type === "tuple" ? props.tree.restItems : undefined
+    );
+    const arr = $derived<unknown[]>(
+        Array.isArray(props.value) ? props.value : []
+    );
+    const restCount = $derived(
+        restItems !== undefined
+            ? Math.max(arr.length - prefixItems.length, 0)
+            : 0
+    );
+    const shouldRender = $derived(
+        prefixItems.length > 0 || restItems !== undefined || arr.length > 0
+    );
+</script>
+
+{#if props.tree.type === "tuple" && shouldRender}
+    <div role="group" aria-label={ariaLabel(props.meta.description)}>
+        {#each prefixItems as element, i (i)}
+            {@const itemValue = arr[i]}
+            {@const childOnChange = (v: unknown) => {
+                const next = arr.slice();
+                next[i] = v;
+                props.onChange(next);
+            }}
+            {@const child = props.renderChild(
+                element,
+                itemValue,
+                childOnChange,
+                `[${String(i)}]`
+            )}
+            <div>
+                {#if child !== null}
+                    <Mount descriptor={child} />
+                {/if}
+            </div>
+        {/each}
+        {#if restItems !== undefined}
+            {#each Array.from({ length: restCount }, (_, j) => prefixItems.length + j) as i (i)}
+                {@const itemValue = arr[i]}
+                {@const childOnChange = (v: unknown) => {
+                    const next = arr.slice();
+                    next[i] = v;
+                    props.onChange(next);
+                }}
+                {@const child = props.renderChild(
+                    restItems,
+                    itemValue,
+                    childOnChange,
+                    `[${String(i)}]`
+                )}
+                <div>
+                    {#if child !== null}
+                        <Mount descriptor={child} />
+                    {/if}
+                </div>
+            {/each}
+        {/if}
+    </div>
+{/if}

package/src/svelte/renderers/Union.svelte

@@ -0,0 +1,49 @@
+<!--
+    Headless Svelte 5 renderer for plain `UnionField` — picks the
+    matching option from the union's `options` list and renders it.
+    Mirror of `react/headlessRenderers.tsx :: renderUnion`.
+
+    Falls back to the first option when no structural match is found,
+    matching React's behaviour. Empty unions render an em-dash for
+    nullish values or `JSON.stringify(value)` otherwise.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { EM_DASH } from "../../core/cssClasses.ts";
+    import { matchUnionOption } from "../../core/unionMatch.ts";
+    import Mount from "./Mount.svelte";
+
+    const props = $props<SvelteRenderProps>();
+
+    const options = $derived(
+        props.tree.type === "union" ||
+            props.tree.type === "discriminatedUnion"
+            ? props.tree.options
+            : undefined
+    );
+</script>
+
+{#if options === undefined || options.length === 0}
+    {#if props.value === undefined || props.value === null}
+        <span>{EM_DASH}</span>
+    {:else}
+        <span>{JSON.stringify(props.value)}</span>
+    {/if}
+{:else}
+    {@const matched = matchUnionOption(options, props.value)}
+    {@const chosen = matched ?? options[0]}
+    {#if chosen !== undefined}
+        {@const child = props.renderChild(
+            chosen,
+            props.value,
+            props.onChange
+        )}
+        {#if child !== null}
+            <Mount descriptor={child} />
+        {:else}
+            <span>{EM_DASH}</span>
+        {/if}
+    {:else}
+        <span>{EM_DASH}</span>
+    {/if}
+{/if}

package/src/svelte/renderers/Unknown.svelte

@@ -0,0 +1,42 @@
+<!--
+    Headless Svelte 5 renderer for `UnknownField` — JSON-encoded
+    fallback for unconstrained values. Mirror of
+    `react/headlessRenderers.tsx :: renderUnknown`.
+
+    Read-only mode stringifies non-string values through
+    `JSON.stringify` so any JSON-shaped value renders intelligibly.
+    Editable mode emits a plain text input so the user can edit at
+    least the string projection of the value.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { fieldDomId } from "../../core/idPath.ts";
+    import { EM_DASH } from "../../core/cssClasses.ts";
+
+    const props = $props<SvelteRenderProps>();
+
+    const id = $derived(fieldDomId(props.path));
+</script>
+
+{#if props.readOnly}
+    {#if props.value === undefined || props.value === null}
+        <span {id}>{EM_DASH}</span>
+    {:else if typeof props.value === "string"}
+        <span {id}>{props.value}</span>
+    {:else}
+        <span {id}>{JSON.stringify(props.value)}</span>
+    {/if}
+{:else}
+    {@const strValue = typeof props.value === "string" ? props.value : ""}
+    <input
+        {id}
+        type="text"
+        value={props.writeOnly ? "" : strValue}
+        onchange={(e) => {
+            const target = e.currentTarget;
+            if (target instanceof HTMLInputElement) {
+                props.onChange(target.value);
+            }
+        }}
+    />
+{/if}

package/src/svelte/svelte-modules.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Ambient module declaration for `.svelte` imports inside the
+ * Svelte adapter source tree.
+ *
+ * TypeScript does not natively understand `.svelte` files — the
+ * `@sveltejs/vite-plugin-svelte` toolchain compiles them at build /
+ * test time. This declaration tells TypeScript that any `.svelte`
+ * import resolves to a default-exported
+ * `Component<SvelteRenderProps>` constructor (or a
+ * `Record<string, unknown>`-keyed superset for renderer-internal
+ * components like `Mount.svelte` that accept their own shape).
+ *
+ * The declaration is intentionally broad — every `.svelte` module
+ * is treated as a `Component<Record<string, unknown>>` constructor.
+ * The Svelte 5 `Component<Props>` type is contravariant in `Props`,
+ * so the broad declaration is assignable to any specific
+ * `Component<…>` slot at the consumer site without casts.
+ */
+
+declare module "*.svelte" {
+    import type { Component } from "svelte";
+
+    const component: Component<Record<string, unknown>>;
+    export default component;
+}