@zerolith/forms 0.0.0-canary.20261102.g8292c77

package/dist/problem.js

@@ -0,0 +1,17 @@
+/**
+ * The server side of the problem document: writing a `Problem` as a
+ * WinterTC `Response` with the problem details media type.
+ */
+import { PROBLEM_MEDIA_TYPE } from "zerolith";
+/**
+ * Writes a problem as a `Response` with the problem details media type.
+ * The status comes from `init`, or the problem, or defaults to 400.
+ */
+export function problemResponse(problem, init = {}) {
+    const status = init.status ?? problem.status ?? 400;
+    const headers = new Headers(init.headers);
+    headers.set("content-type", `${PROBLEM_MEDIA_TYPE}; charset=utf-8`);
+    const body = { ...problem, status };
+    return new Response(JSON.stringify(body), { ...init, status, headers });
+}
+//# sourceMappingURL=problem.js.map

package/dist/problem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"problem.js","sourceRoot":"","sources":["../src/problem.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,kBAAkB,EAAgB,MAAM,UAAU,CAAC;AAE5D;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,OAAgB,EAAE,IAAI,GAAiB,EAAE;IAErE,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,IAAI,GAAG,CAAC;IACpD,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1C,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,GAAG,kBAAkB,iBAAiB,CAAC,CAAC;IACpE,MAAM,IAAI,GAAY,EAAE,GAAG,OAAO,EAAE,MAAM,EAAE,CAAC;IAC7C,OAAO,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;AAC5E,CAAC"}

package/dist/schema.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Validation through Standard Schema, the interface that zod, valibot,
+ * arktype, and others implement, so a schema written once validates a
+ * submission in the browser before it is sent and on the server when it
+ * arrives, producing the same problem document in both places.
+ */
+import type { Problem } from "zerolith";
+/** One segment of an issue path in object form. */
+export interface StandardPathSegment {
+    /** The key representing the path segment; `problemFromIssues` converts it to a string and joins the path's keys with dots to name the field. */
+    readonly key: PropertyKey;
+}
+/** One validation failure. */
+export interface StandardIssue {
+    /** The error message of the issue; `problemFromIssues` lists it under the field its path names, or in `detail` when the path is absent or empty. */
+    readonly message: string;
+    /** The path to the failing value; absent for an issue about the whole input. */
+    readonly path?: ReadonlyArray<PropertyKey | StandardPathSegment> | undefined;
+}
+/** What `validate` resolves to: a value, or issues. */
+export type StandardResult<Output> = {
+    readonly value: Output;
+    readonly issues?: undefined;
+} | {
+    readonly issues: ReadonlyArray<StandardIssue>;
+};
+/** The Standard Schema V1 interface, as published at standardschema.dev. */
+export interface StandardSchema<Input = unknown, Output = Input> {
+    /** The Standard properties: the `version` of the specification, the `vendor` name of the schema library, the optional inferred `types`, and the `validate` function that `validateForm` calls and awaits. */
+    readonly "~standard": {
+        readonly version: 1;
+        readonly vendor: string;
+        readonly validate: (value: unknown) => StandardResult<Output> | Promise<StandardResult<Output>>;
+        readonly types?: {
+            readonly input: Input;
+            readonly output: Output;
+        } | undefined;
+    };
+}
+/** The output type of a schema. */
+export type InferOutput<S extends StandardSchema> = S extends StandardSchema<unknown, infer Output> ? Output : never;
+/** A form's values as a plain object: repeated names become arrays. */
+export type FormValues = Record<string, FormDataEntryValue | FormDataEntryValue[]>;
+/** What `validateForm` resolves to: the parsed value, or the problem to show. */
+export type Validation<Output> = {
+    readonly value: Output;
+    readonly problem?: undefined;
+} | {
+    readonly value?: undefined;
+    readonly problem: Problem;
+};
+/** Turns `FormData` into a plain object with no prototype, so a field named `constructor` or `__proto__` is a field like any other. A name that appears once maps to its value; a name that appears more than once maps to an array of its values, in order. */
+export declare function formValues(data: FormData): FormValues;
+/** Groups issues into a problem: path-bearing issues under `fields`, the rest in `detail`. */
+export declare function problemFromIssues(issues: ReadonlyArray<StandardIssue>): Problem;
+/**
+ * Validates a submission with a Standard Schema. `FormData` is converted
+ * with `formValues` first; any other value is validated as it is. Issues
+ * become a problem whose `fields` carry the messages per path.
+ */
+export declare function validateForm<S extends StandardSchema>(schema: S, data: FormData | Record<string, unknown>): Promise<Validation<InferOutput<S>>>;
+//# sourceMappingURL=schema.d.ts.map

package/dist/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../src/schema.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAe,OAAO,EAAE,MAAM,UAAU,CAAC;AAErD,mDAAmD;AACnD,MAAM,WAAW,mBAAmB;IAEhC,gJAAgJ;IAChJ,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC;CAC7B;AAED,8BAA8B;AAC9B,MAAM,WAAW,aAAa;IAE1B,oJAAoJ;IACpJ,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,gFAAgF;IAChF,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,CAAC,WAAW,GAAG,mBAAmB,CAAC,GAAG,SAAS,CAAC;CAChF;AAED,uDAAuD;AACvD,MAAM,MAAM,cAAc,CAAC,MAAM,IAC3B;IAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAA;CAAE,GACvD;IAAE,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC,aAAa,CAAC,CAAA;CAAE,CAAC;AAExD,4EAA4E;AAC5E,MAAM,WAAW,cAAc,CAAC,KAAK,GAAG,OAAO,EAAE,MAAM,GAAG,KAAK;IAE3D,6MAA6M;IAC7M,QAAQ,CAAC,WAAW,EAAE;QAClB,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;QACpB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,cAAc,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;QAChG,QAAQ,CAAC,KAAK,CAAC,EAAE;YAAE,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;YAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;SAAE,GAAG,SAAS,CAAC;KACnF,CAAC;CACL;AAED,mCAAmC;AACnC,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,cAAc,IAAI,CAAC,SAAS,cAAc,CAAC,OAAO,EAAE,MAAM,MAAM,CAAC,GAAG,MAAM,GAAG,KAAK,CAAC;AAErH,uEAAuE;AACvE,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,kBAAkB,GAAG,kBAAkB,EAAE,CAAC,CAAC;AAEnF,iFAAiF;AACjF,MAAM,MAAM,UAAU,CAAC,MAAM,IACvB;IAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAA;CAAE,GACxD;IAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhE,gQAAgQ;AAChQ,wBAAgB,UAAU,CAAC,IAAI,EAAE,QAAQ,GAAG,UAAU,CAoBrD;AAWD,8FAA8F;AAC9F,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,aAAa,CAAC,aAAa,CAAC,GAAG,OAAO,CAoB/E;AAED;;;;GAIG;AACH,wBAAsB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CASrJ"}

package/dist/schema.js

@@ -0,0 +1,55 @@
+/** Turns `FormData` into a plain object with no prototype, so a field named `constructor` or `__proto__` is a field like any other. A name that appears once maps to its value; a name that appears more than once maps to an array of its values, in order. */
+export function formValues(data) {
+    const values = Object.create(null);
+    for (const [name, value] of data) {
+        const current = values[name];
+        if (current === undefined) {
+            values[name] = value;
+        }
+        else if (Array.isArray(current)) {
+            current.push(value);
+        }
+        else {
+            values[name] = [current, value];
+        }
+    }
+    return values;
+}
+function fieldName(path) {
+    if (path === undefined || path.length === 0) {
+        return undefined;
+    }
+    return path.map((segment) => String(typeof segment === "object" ? segment.key : segment)).join(".");
+}
+/** Groups issues into a problem: path-bearing issues under `fields`, the rest in `detail`. */
+export function problemFromIssues(issues) {
+    const fields = Object.create(null);
+    const general = [];
+    for (const issue of issues) {
+        const name = fieldName(issue.path);
+        if (name === undefined) {
+            general.push(issue.message);
+            continue;
+        }
+        (fields[name] ??= []).push(issue.message);
+    }
+    const problem = { type: "about:blank", title: "The submission has invalid fields", status: 400, fields: fields };
+    if (general.length > 0) {
+        problem.detail = general.join(" ");
+    }
+    return problem;
+}
+/**
+ * Validates a submission with a Standard Schema. `FormData` is converted
+ * with `formValues` first; any other value is validated as it is. Issues
+ * become a problem whose `fields` carry the messages per path.
+ */
+export async function validateForm(schema, data) {
+    const input = data instanceof FormData ? formValues(data) : data;
+    const result = await schema["~standard"].validate(input);
+    if (result.issues !== undefined && result.issues.length > 0) {
+        return { problem: problemFromIssues(result.issues) };
+    }
+    return { value: result.value };
+}
+//# sourceMappingURL=schema.js.map

package/dist/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../src/schema.ts"],"names":[],"mappings":"AAoDA,gQAAgQ;AAChQ,MAAM,UAAU,UAAU,CAAC,IAAc;IAErC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAe,CAAC;IACjD,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,EAChC,CAAC;QACG,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,OAAO,KAAK,SAAS,EACzB,CAAC;YACG,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;QACzB,CAAC;aACI,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAC/B,CAAC;YACG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;aAED,CAAC;YACG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACpC,CAAC;IACL,CAAC;IACD,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,SAAS,SAAS,CAAC,IAAkE;IAEjF,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAC3C,CAAC;QACG,OAAO,SAAS,CAAC;IACrB,CAAC;IACD,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACxG,CAAC;AAED,8FAA8F;AAC9F,MAAM,UAAU,iBAAiB,CAAC,MAAoC;IAElE,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAA6B,CAAC;IAC/D,MAAM,OAAO,GAAa,EAAE,CAAC;IAC7B,KAAK,MAAM,KAAK,IAAI,MAAM,EAC1B,CAAC;QACG,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACnC,IAAI,IAAI,KAAK,SAAS,EACtB,CAAC;YACG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAC5B,SAAS;QACb,CAAC;QACD,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC9C,CAAC;IACD,MAAM,OAAO,GAAY,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,mCAAmC,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,MAAqB,EAAE,CAAC;IACzI,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EACtB,CAAC;QACG,OAAO,CAAC,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACvC,CAAC;IACD,OAAO,OAAO,CAAC;AACnB,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,YAAY,CAA2B,MAAS,EAAE,IAAwC;IAE5G,MAAM,KAAK,GAAG,IAAI,YAAY,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACjE,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACzD,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAC3D,CAAC;QACG,OAAO,EAAE,OAAO,EAAE,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;IACzD,CAAC;IACD,OAAO,EAAE,KAAK,EAAG,MAAoC,CAAC,KAAK,EAAE,CAAC;AAClE,CAAC"}

package/package.json

@@ -0,0 +1,50 @@
+{
+    "name": "@zerolith/forms",
+    "version": "0.0.0-canary.20261102.g8292c77",
+    "description": "Forms for zerolith: native forms that post FormData and work without JavaScript, enhanced with fetch, pending state, and RFC 9457 problem+json field errors when it runs, with Standard Schema validation shared by client and server",
+    "license": "Apache-2.0",
+    "author": "molexxxx",
+    "homepage": "https://zerolith.dev/",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/molexxxx/zerolith.git",
+        "directory": "packages/forms"
+    },
+    "bugs": {
+        "url": "https://github.com/molexxxx/zerolith/issues"
+    },
+    "keywords": [
+        "zerolith",
+        "forms",
+        "progressive-enhancement",
+        "problem-details",
+        "standard-schema"
+    ],
+    "type": "module",
+    "sideEffects": false,
+    "engines": {
+        "node": ">=24.0.0"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./package.json": "./package.json"
+    },
+    "files": [
+        "dist",
+        "src",
+        "LICENSE",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "tsc -p tsconfig.build.json"
+    },
+    "peerDependencies": {
+        "zerolith": "^0.0.0-canary.20261102.g8292c77"
+    },
+    "devDependencies": {
+        "zerolith": "^0.0.0-canary.20261102.g8292c77"
+    }
+}

package/src/form.ts

@@ -0,0 +1,397 @@
+/**
+ * The enhancer. A form stays a native `<form>` that posts to its action and
+ * works without JavaScript; `createForm` takes over its submit event when
+ * JavaScript runs, sends the same request with `fetch`, and exposes the
+ * outcome as signals: pending state, a parsed result, or a problem whose
+ * `fields` feed the inputs that failed.
+ */
+import { PROBLEM_MEDIA_TYPE, type Problem, type ReadableSignal, batch, computed, isProblem, signal } from "zerolith";
+import { type StandardSchema, validateForm } from "./schema.js";
+
+/** Where a form is in its current submission. */
+export type FormStatus = "idle" | "pending" | "success" | "failure" | "error";
+
+/** What the default sender, or a custom `send`, receives. */
+export interface Submission
+{
+    /** The form that was submitted. */
+    readonly element: HTMLFormElement;
+    /** The button or input that submitted it, when there was one. */
+    readonly submitter: HTMLElement | null;
+    /** The form's data, including the submitter's name and value. */
+    readonly data: FormData;
+    /** The lowercase method, after the submitter's `formmethod` override. */
+    readonly method: string;
+    /** The resolved action URL, after the submitter's `formaction` override. */
+    readonly action: URL;
+    /** Aborted when the form is submitted again or reset. */
+    readonly signal: AbortSignal;
+}
+
+/** The outcome of one submission. */
+export interface SubmissionOutcome
+{
+    /** The parsed body: JSON when the response says so, text otherwise, undefined for an empty body. */
+    readonly result: unknown;
+    /** The successful response, as `fetch` or a custom `send` returned it; its body has already been read into `result` unless it was redirected. */
+    readonly response: Response;
+    /** The form that was submitted, already reset when the `reset` option is set. */
+    readonly element: HTMLFormElement;
+}
+
+/** Options for `createForm`. */
+export interface FormOptions
+{
+    /** Validated on the client before anything is sent; failing issues become the problem's `fields`. */
+    schema?: StandardSchema;
+    /** Sends the submission. Defaults to a `fetch` of the form's method, action, and encoding that asks for JSON. */
+    send?: (submission: Submission) => Promise<Response>;
+    /** Headers added to the default request. */
+    headers?: HeadersInit;
+    /** The `fetch` the default sender uses; defaults to the global one. */
+    fetch?: typeof fetch;
+    /** Where a redirected response takes the page. Defaults to `location.assign`; pass the router's `navigate` to stay in the application. */
+    navigate?: (url: string) => void;
+    /** Resets the form element after a successful response. */
+    reset?: boolean;
+    /** Called after a successful response. */
+    onSuccess?: (outcome: SubmissionOutcome) => void;
+    /** Called with the problem from client-side validation or from the server. */
+    onFailure?: (problem: Problem, element: HTMLFormElement) => void;
+    /** Called when the request itself fails. */
+    onError?: (error: unknown, element: HTMLFormElement) => void;
+}
+
+/** One input's slice of the current problem. */
+export interface Field
+{
+    /** Every message for the field, oldest first. */
+    readonly errors: ReadableSignal<readonly string[]>;
+    /** The first message, or undefined. */
+    readonly error: ReadableSignal<string | undefined>;
+    /** True while the field has a message; bind it to `aria-invalid`. */
+    readonly invalid: ReadableSignal<boolean>;
+}
+
+/** The enhanced form. */
+export interface Form
+{
+    /** The current submission's stage: `pending` while in flight, then `success`, `failure` with a problem, or `error` when it did not complete; `idle` before the first submission and after `reset()`. */
+    readonly status: ReadableSignal<FormStatus>;
+    /** True while a submission is in flight. */
+    readonly pending: ReadableSignal<boolean>;
+    /** The problem from the last failed submission, or undefined. */
+    readonly problem: ReadableSignal<Problem | undefined>;
+    /** The parsed body of the last successful submission. */
+    readonly result: ReadableSignal<unknown>;
+    /** The error of the last submission that did not complete. */
+    readonly error: ReadableSignal<unknown>;
+    /** A field's view of the problem; the same object for the same name. */
+    field(name: string): Field;
+    /** The submit handler; bind it with `@submit`. */
+    submit(event: SubmitEvent): void;
+    /** Aborts any submission in flight and returns the form to idle. */
+    reset(): void;
+}
+
+const EMPTY: readonly string[] = [];
+
+/** Calls an application callback, reporting what it throws as an uncaught error would be, without changing the form's state. */
+function guarded(callback: () => void): void
+{
+    try
+    {
+        callback();
+    }
+    catch (thrown)
+    {
+        if (typeof reportError === "function")
+        {
+            reportError(thrown);
+        }
+        else
+        {
+            queueMicrotask(() =>
+            {
+                throw thrown;
+            });
+        }
+    }
+}
+
+/** The `FormData` implementation probed, and whether its constructor adds the submitter's entry, which browsers before Chrome 112 and Firefox 111 skip. */
+let probed: { implementation: typeof FormData; keepsSubmitter: boolean } | undefined;
+
+/** The form's data as the browser submits it, with the submitter's entry added where `new FormData(form, submitter)` leaves it out. */
+function submittedData(element: HTMLFormElement, submitter: HTMLElement | null): FormData
+{
+    const data = new FormData(element, submitter ?? undefined);
+    if (submitter === null)
+    {
+        return data;
+    }
+    if (probed?.implementation !== FormData)
+    {
+        const form = document.createElement("form");
+        const button = document.createElement("button");
+        button.name = "probe";
+        button.value = "kept";
+        form.append(button);
+        probed = { implementation: FormData, keepsSubmitter: new FormData(form, button).get("probe") === "kept" };
+    }
+    const name = submitter.getAttribute("name");
+    if (probed.keepsSubmitter || name === null || name === "")
+    {
+        return data;
+    }
+    if (submitter instanceof HTMLInputElement && submitter.type === "image")
+    {
+        data.append(`${name}.x`, "0");
+        data.append(`${name}.y`, "0");
+    }
+    else
+    {
+        data.append(name, (submitter as HTMLButtonElement | HTMLInputElement).value);
+    }
+    return data;
+}
+
+/**
+ * The problem a failed response describes: its body when that is a problem
+ * document, or one built from the status. The server is a trust boundary,
+ * so `fields` keeps only own keys whose value is a message or a list of
+ * messages, a lone message becoming a list of one.
+ */
+function problemOf(body: unknown, response: Response): Problem
+{
+    if (!isProblem(body))
+    {
+        return { status: response.status, title: response.statusText === "" ? `HTTP ${response.status}` : response.statusText };
+    }
+    if (body.fields === undefined)
+    {
+        return body;
+    }
+    const fields: Record<string, readonly string[]> = Object.create(null) as Record<string, readonly string[]>;
+    for (const [name, value] of Object.entries(body.fields as Record<string, unknown>))
+    {
+        if (typeof value === "string")
+        {
+            fields[name] = [value];
+        }
+        else if (Array.isArray(value))
+        {
+            const messages = value.filter((message): message is string => typeof message === "string");
+            if (messages.length > 0)
+            {
+                fields[name] = messages;
+            }
+        }
+    }
+    return { ...body, fields };
+}
+
+function entries(data: FormData): [string, string][]
+{
+    return [...data].map(([name, value]) => [name, typeof value === "string" ? value : value.name]);
+}
+
+async function defaultSend(submission: Submission, headers: HeadersInit | undefined, fetchImpl: typeof fetch): Promise<Response>
+{
+    const { element, submitter, data, method, action, signal: abort } = submission;
+    const requestHeaders = new Headers(headers);
+    if (!requestHeaders.has("accept"))
+    {
+        requestHeaders.set("accept", `application/json, ${PROBLEM_MEDIA_TYPE}`);
+    }
+    const init: RequestInit = { method: method.toUpperCase(), headers: requestHeaders, signal: abort, credentials: "same-origin" };
+    if (method === "get")
+    {
+        const url = new URL(action);
+        url.search = new URLSearchParams(entries(data)).toString();
+        return fetchImpl(url, init);
+    }
+    const enctype = submitter !== null && submitter.hasAttribute("formenctype") ? (submitter as HTMLButtonElement).formEnctype : element.enctype;
+    if (enctype === "multipart/form-data")
+    {
+        init.body = data;
+    }
+    else if (enctype === "text/plain")
+    {
+        requestHeaders.set("content-type", "text/plain; charset=utf-8");
+        init.body = entries(data).map(([name, value]) => `${name}=${value}\r\n`).join("");
+    }
+    else
+    {
+        init.body = new URLSearchParams(entries(data));
+    }
+    return fetchImpl(action, init);
+}
+
+async function parseBody(response: Response): Promise<unknown>
+{
+    if (response.status === 204 || response.status === 205)
+    {
+        return undefined;
+    }
+    const type = response.headers.get("content-type") ?? "";
+    if (type.includes("json"))
+    {
+        return response.json();
+    }
+    const text = await response.text();
+    return text === "" ? undefined : text;
+}
+
+/**
+ * Creates the enhancer for one form. Bind `submit` to the form's `@submit`;
+ * the method, action, and encoding stay on the form element, so the same
+ * markup submits natively when the script has not run.
+ */
+export function createForm(options: FormOptions = {}): Form
+{
+    const status = signal<FormStatus>("idle");
+    const problem = signal<Problem | undefined>(undefined);
+    const result = signal<unknown>(undefined);
+    const error = signal<unknown>(undefined);
+    const pending = computed(() => status.get() === "pending");
+    const fields = new Map<string, Field>();
+    let controller: AbortController | undefined;
+
+    const fail = (found: Problem, element: HTMLFormElement): void =>
+    {
+        batch(() =>
+        {
+            problem.set(found);
+            status.set("failure");
+        });
+        guarded(() => options.onFailure?.(found, element));
+    };
+
+    const run = async (element: HTMLFormElement, submitter: HTMLElement | null, method: string, action: URL, current: AbortController): Promise<void> =>
+    {
+        const data = submittedData(element, submitter);
+        batch(() =>
+        {
+            status.set("pending");
+            problem.set(undefined);
+            error.set(undefined);
+        });
+        if (options.schema !== undefined)
+        {
+            const validation = await validateForm(options.schema, data);
+            if (current.signal.aborted)
+            {
+                return;
+            }
+            if (validation.problem !== undefined)
+            {
+                fail(validation.problem, element);
+                return;
+            }
+        }
+        const submission: Submission = { element, submitter, data, method, action, signal: current.signal };
+        const response = await (options.send ?? ((request) => defaultSend(request, options.headers, options.fetch ?? fetch)))(submission);
+        if (current.signal.aborted)
+        {
+            return;
+        }
+        const type = (response.headers.get("content-type") ?? "").toLowerCase();
+        if (type.includes(PROBLEM_MEDIA_TYPE) || !response.ok)
+        {
+            const body: unknown = type.includes("json") ? await response.json().catch(() => undefined) : undefined;
+            if (current.signal.aborted)
+            {
+                return;
+            }
+            fail(problemOf(body, response), element);
+            return;
+        }
+        const parsed = response.redirected ? undefined : await parseBody(response);
+        if (current.signal.aborted)
+        {
+            return;
+        }
+        batch(() =>
+        {
+            result.set(parsed);
+            status.set("success");
+        });
+        if (options.reset === true)
+        {
+            element.reset();
+        }
+        guarded(() => options.onSuccess?.({ result: parsed, response, element }));
+        if (response.redirected)
+        {
+            (options.navigate ?? ((url) => location.assign(url)))(response.url);
+        }
+    };
+
+    return {
+        status,
+        pending,
+        problem,
+        result,
+        error,
+        field(name: string): Field
+        {
+            let field = fields.get(name);
+            if (field === undefined)
+            {
+                const errors = computed<readonly string[]>(() =>
+                {
+                    const found = problem.get()?.fields;
+                    return found !== undefined && Object.hasOwn(found, name) ? found[name] ?? EMPTY : EMPTY;
+                });
+                field = {
+                    errors,
+                    error: computed(() => errors.get()[0]),
+                    invalid: computed(() => errors.get().length > 0)
+                };
+                fields.set(name, field);
+            }
+            return field;
+        },
+        submit(event: SubmitEvent): void
+        {
+            const element = event.currentTarget as HTMLFormElement;
+            const submitter = event.submitter;
+            const method = submitter !== null && submitter.hasAttribute("formmethod") ? (submitter as HTMLButtonElement).formMethod : element.method;
+            if (method === "dialog")
+            {
+                return;
+            }
+            event.preventDefault();
+            const action = new URL(submitter?.hasAttribute("formaction") === true ? (submitter as HTMLButtonElement).formAction : element.action);
+            controller?.abort();
+            const current = new AbortController();
+            controller = current;
+            run(element, submitter, method, action, current).catch((thrown: unknown) =>
+            {
+                if (current.signal.aborted)
+                {
+                    return;
+                }
+                batch(() =>
+                {
+                    error.set(thrown);
+                    status.set("error");
+                });
+                guarded(() => options.onError?.(thrown, element));
+            });
+        },
+        reset(): void
+        {
+            controller?.abort();
+            controller = undefined;
+            batch(() =>
+            {
+                status.set("idle");
+                problem.set(undefined);
+                result.set(undefined);
+                error.set(undefined);
+            });
+        }
+    };
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @zerolith/forms: native forms, enhanced. The public surface is assembled here.
+ * The `Problem` type, `isProblem`, and `PROBLEM_MEDIA_TYPE` come from `zerolith`.
+ */
+export { problemResponse } from "./problem.js";
+
+export type { FormValues, InferOutput, StandardIssue, StandardPathSegment, StandardResult, StandardSchema, Validation } from "./schema.js";
+export { formValues, problemFromIssues, validateForm } from "./schema.js";
+
+export type { Field, Form, FormOptions, FormStatus, Submission, SubmissionOutcome } from "./form.js";
+export { createForm } from "./form.js";

package/src/problem.ts

@@ -0,0 +1,18 @@
+/**
+ * The server side of the problem document: writing a `Problem` as a
+ * WinterTC `Response` with the problem details media type.
+ */
+import { PROBLEM_MEDIA_TYPE, type Problem } from "zerolith";
+
+/**
+ * Writes a problem as a `Response` with the problem details media type.
+ * The status comes from `init`, or the problem, or defaults to 400.
+ */
+export function problemResponse(problem: Problem, init: ResponseInit = {}): Response
+{
+    const status = init.status ?? problem.status ?? 400;
+    const headers = new Headers(init.headers);
+    headers.set("content-type", `${PROBLEM_MEDIA_TYPE}; charset=utf-8`);
+    const body: Problem = { ...problem, status };
+    return new Response(JSON.stringify(body), { ...init, status, headers });
+}