effect-atom-svelte 0.3.0 → 0.4.0

package/dist/ScopedAtom.js

@@ -1,6 +1,4 @@
 import { createContext } from "svelte";
-// A const and a type of the same name, as in Effect's modules.
-/* oxlint-disable eslint/no-redeclare */
 /**
  * Marks a value as a `ScopedAtom`: every scoped atom has this key, set to this same string, as
  * Effect's own types carry a type id.
@@ -37,17 +35,27 @@ export const TypeId = "~effect-atom-svelte/ScopedAtom";
  */
 export const make = (f, options) => {
     const [get, set, has] = createContext();
-    const provide = (...args) => set(args.length === 0
-        ? f()
-        : f(args[0]));
+    const provide = (...args) => {
+        if (args.length === 1) {
+            return set(f(args[0]));
+        }
+        // SAFETY: `provide`'s type allows no input only when `Input` is never or includes undefined, so
+        // `f` is the factory without input or one whose input is optional.
+        // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- the union of factories can't be narrowed by the argument count
+        return set(f());
+    };
     return {
         [TypeId]: TypeId,
+        // SAFETY: `provide` takes no input or one, which every branch of the conditional type accepts;
+        // TypeScript can't pick a branch while `Input` is generic.
+        // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- the conditional type can't be narrowed for a generic `Input`
         provide: provide,
         use: () => {
             if (!has()) {
                 const name = options?.name;
-                const which = name ? `ScopedAtom "${name}"` : "ScopedAtom";
-                const call = name ? `${name}.provide()` : "its provide()";
+                const named = name !== undefined && name !== "";
+                const which = named ? `ScopedAtom "${name}"` : "ScopedAtom";
+                const call = named ? `${name}.provide()` : "its provide()";
                 throw new Error(`${which} used outside of the component that provides it. Call ${call} in a parent component's script.`);
             }
             return get();

package/dist/SvelteKit.d.ts

@@ -1,15 +1,3 @@
-/**
- * SvelteKit `handleError` hooks that keep an Effect error's `_tag`, so a `<svelte:boundary>`
- * `failed` snippet can tell typed errors apart. Import them from `effect-atom-svelte/sveltekit`.
- *
- * The module does not import SvelteKit: the hooks take the fields of SvelteKit's input they read
- * and return the fields they set, so they type-check against `HandleClientError` and
- * `HandleServerError` once `App.Error` declares `tag?: string`. In SvelteKit 2, whose `App.Error`
- * requires a message, they are typed to return one when there is no `kind`, as they then always
- * set one.
- *
- * @since 0.1.0
- */
 /**
  * The part of SvelteKit's `handleError` input that the hooks read. In SvelteKit 3, `kind` is
  * `"unknown"` for errors thrown by your code, `"app"` for `error(...)`, `"framework"` for
@@ -101,3 +89,49 @@ export declare function handleClientError(input: CaughtError): EffectErrorBody |
  */
 export declare function handleServerError(input: CaughtErrorWithoutKind): EffectErrorBodyWithMessage;
 export declare function handleServerError(input: CaughtError): EffectErrorBody | undefined;
+/**
+ * Options for `useUnsavedChangesGuard`.
+ *
+ * @stability unstable
+ * @since 0.4.0
+ * @category models
+ */
+export interface UnsavedChangesGuardOptions {
+    /**
+     * Asks whether to leave and lose the changes, resolving `true` to leave. Called for links,
+     * `goto`, form navigations and the back and forward buttons. Closing the tab, reloading and
+     * typing a URL show the browser's own dialog instead, as a page can't show its own then.
+     */
+    readonly confirm: () => boolean | Promise<boolean>;
+}
+/**
+ * Asks before the user navigates away from a page whose form is dirty, using SvelteKit's
+ * `beforeNavigate`. Call it while a component initializes, with any object that has `dirty`, such
+ * as a form instance from `useForm`.
+ *
+ * While the form is dirty, a navigation is cancelled and `confirm` asked; on yes it is retried, and
+ * the retry goes through. Closing the tab, reloading or typing a URL show the browser's own dialog
+ * instead. SvelteKit doesn't call `beforeNavigate` for back and forward over shallow history entries
+ * (from `pushState` or a hash change) or for links to a hash on the same page, so those aren't
+ * guarded.
+ *
+ * **Example** (Asking before leaving an edit page)
+ *
+ * ```ts
+ * import { useForm } from "effect-atom-svelte";
+ * import { useUnsavedChangesGuard } from "effect-atom-svelte/sveltekit";
+ *
+ * const form = useForm(EditProject, { id, initialValues, submit });
+ * useUnsavedChangesGuard(form, {
+ *   confirm: () => window.confirm("Leave without saving your changes?"),
+ * });
+ * ```
+ *
+ * @see {@link https://atom.jarrednorris.dev/forms | Forms}
+ * @stability unstable
+ * @since 0.4.0
+ * @category forms
+ */
+export declare const useUnsavedChangesGuard: (form: {
+    readonly dirty: boolean;
+}, options: UnsavedChangesGuardOptions) => void;

package/dist/SvelteKit.js

@@ -1,21 +1,26 @@
 /**
- * SvelteKit `handleError` hooks that keep an Effect error's `_tag`, so a `<svelte:boundary>`
- * `failed` snippet can tell typed errors apart. Import them from `effect-atom-svelte/sveltekit`.
+ * SvelteKit helpers. Import them from `effect-atom-svelte/sveltekit`.
  *
- * The module does not import SvelteKit: the hooks take the fields of SvelteKit's input they read
- * and return the fields they set, so they type-check against `HandleClientError` and
- * `HandleServerError` once `App.Error` declares `tag?: string`. In SvelteKit 2, whose `App.Error`
- * requires a message, they are typed to return one when there is no `kind`, as they then always
- * set one.
+ * `handleClientError` and `handleServerError` are `handleError` hooks that keep an Effect error's
+ * `_tag`, so a `<svelte:boundary>` `failed` snippet can tell typed errors apart. They take the
+ * fields of SvelteKit's input they read and return the fields they set, so they type-check against
+ * `HandleClientError` and `HandleServerError` once `App.Error` declares `tag?: string`. In
+ * SvelteKit 2, whose `App.Error` requires a message, they are typed to return one when there is no
+ * `kind`, as they then always set one.
+ *
+ * `useUnsavedChangesGuard` asks before leaving a page with a dirty form.
  *
  * @since 0.1.0
  */
-const tagOf = (error) => typeof error === "object" &&
-    error !== null &&
-    "_tag" in error &&
-    typeof error._tag === "string"
-    ? error._tag
-    : undefined;
+/// <reference types="@sveltejs/kit" />
+import { beforeNavigate, goto } from "$app/navigation";
+import { Effect } from "effect";
+const tagOf = (error) => {
+    if (typeof error !== "object" || error === null || !("_tag" in error)) {
+        return undefined;
+    }
+    return typeof error._tag === "string" ? error._tag : undefined;
+};
 const messageOf = (error) => {
     if (error instanceof Error) {
         return error.message;
@@ -28,10 +33,16 @@ const messageOf = (error) => {
 const fallbackMessage = (input) => input.kind === undefined ? input.message : undefined;
 // Leaves out empty fields, so SvelteKit's defaults apply, and returns nothing when both are empty.
 const body = (message, tag) => {
-    if (!(message || tag)) {
-        return undefined;
+    const fields = {};
+    if (message !== undefined && message !== "") {
+        fields.message = message;
+    }
+    if (tag !== undefined && tag !== "") {
+        fields.tag = tag;
     }
-    return { ...(message ? { message } : {}), ...(tag ? { tag } : {}) };
+    return fields.message === undefined && fields.tag === undefined
+        ? undefined
+        : fields;
 };
 export function handleClientError(input) {
     // Destructured here, not in the parameter list, so the API reference shows a named parameter.
@@ -40,8 +51,9 @@ export function handleClientError(input) {
         return undefined;
     }
     console.error(error);
-    // `||`, not `??`: an error with an empty message gets SvelteKit 2's instead.
-    return body(messageOf(error) || fallbackMessage(input), tagOf(error));
+    // An error with an empty message gets SvelteKit 2's instead.
+    const message = messageOf(error);
+    return body(message === undefined || message === "" ? fallbackMessage(input) : message, tagOf(error));
 }
 export function handleServerError(input) {
     const { error, issues, kind = "unknown" } = input;
@@ -55,3 +67,103 @@ export function handleServerError(input) {
     console.error(error);
     return body(fallbackMessage(input), tagOf(error));
 }
+// Waits for the next popstate, or a second, should none come.
+const nextPopState = () => Effect.runPromise(Effect.callback((resume) => {
+    const done = () => {
+        resume(Effect.undefined);
+    };
+    addEventListener("popstate", done, { once: true });
+    return Effect.sync(() => {
+        removeEventListener("popstate", done);
+    });
+}).pipe(Effect.timeoutOption("1 second")));
+// How long a "yes" lets the retried navigation through. The retry reaches beforeNavigate at once;
+// a navigation that never does, such as a link to a download, doesn't leave a bypass behind.
+const bypassFor = 2000;
+/**
+ * Asks before the user navigates away from a page whose form is dirty, using SvelteKit's
+ * `beforeNavigate`. Call it while a component initializes, with any object that has `dirty`, such
+ * as a form instance from `useForm`.
+ *
+ * While the form is dirty, a navigation is cancelled and `confirm` asked; on yes it is retried, and
+ * the retry goes through. Closing the tab, reloading or typing a URL show the browser's own dialog
+ * instead. SvelteKit doesn't call `beforeNavigate` for back and forward over shallow history entries
+ * (from `pushState` or a hash change) or for links to a hash on the same page, so those aren't
+ * guarded.
+ *
+ * **Example** (Asking before leaving an edit page)
+ *
+ * ```ts
+ * import { useForm } from "effect-atom-svelte";
+ * import { useUnsavedChangesGuard } from "effect-atom-svelte/sveltekit";
+ *
+ * const form = useForm(EditProject, { id, initialValues, submit });
+ * useUnsavedChangesGuard(form, {
+ *   confirm: () => window.confirm("Leave without saving your changes?"),
+ * });
+ * ```
+ *
+ * @see {@link https://atom.jarrednorris.dev/forms | Forms}
+ * @stability unstable
+ * @since 0.4.0
+ * @category forms
+ */
+export const useUnsavedChangesGuard = (form, options) => {
+    // The retry of a navigation the user agreed to: where it goes, whether it unloads the page, and
+    // until when to expect it.
+    let retry;
+    beforeNavigate((navigation) => {
+        // Let the retry through, once. Any other navigation is asked about as usual.
+        if (retry !== undefined &&
+            // oxlint-disable-next-line effecttsgo/global-date -- SvelteKit calls beforeNavigate synchronously, outside any Effect program
+            retry.until > Date.now() &&
+            (navigation.type === "leave"
+                ? retry.unloads
+                : navigation.to?.url.href === retry.href)) {
+            retry = undefined;
+            return;
+        }
+        if (!form.dirty) {
+            return;
+        }
+        // Closing the tab, reloading or typing a URL: cancelling shows the browser's dialog, and no
+        // code of ours can run before the page goes.
+        navigation.cancel();
+        const { to } = navigation;
+        if (navigation.type === "leave" || to === null) {
+            return;
+        }
+        // Cancelling back or forward makes SvelteKit undo the move with history.go, which finishes with
+        // a popstate. A retry before then would be lost to it, so the retry waits for it.
+        const undone = navigation.type === "popstate" ? nextPopState() : undefined;
+        // oxlint-disable-next-line effecttsgo/async-function -- awaits the app's confirm, which may return a Promise, from SvelteKit's beforeNavigate, outside any Effect program
+        void (async () => {
+            if (!(await options.confirm())) {
+                return;
+            }
+            retry = {
+                href: to.url.href,
+                unloads: navigation.type !== "popstate" && navigation.willUnload,
+                // oxlint-disable-next-line effecttsgo/global-date -- compared with Date.now in beforeNavigate, outside any Effect program
+                until: Date.now() + bypassFor,
+            };
+            if (navigation.type === "popstate") {
+                await undone;
+                history.go(navigation.delta);
+            }
+            else if (navigation.willUnload) {
+                // An external link, or one SvelteKit hands to the browser: goto can't follow it. The page
+                // unloading fires a "leave", which the bypass lets through.
+                location.href = to.url.href;
+            }
+            else {
+                // SvelteKit 3 warns in dev whenever the `replaceState` key is there, even false, so it is
+                // passed only when true.
+                await goto(to.url, to.url.href === location.href
+                    ? // oxlint-disable-next-line typescript/no-deprecated -- the peer range includes SvelteKit 2, whose goto has no `replace`, only `replaceState`
+                        { replaceState: true }
+                    : {});
+            }
+        })();
+    });
+};

package/dist/index.d.ts

@@ -40,6 +40,15 @@ export { default as RegistryProvider } from "./RegistryProvider.svelte";
  * @category scoped atoms
  */
 export * as ScopedAtom from "./ScopedAtom.ts";
+/**
+ * Forms driven by one Effect Schema: `Form.make` defines one, `useForm` creates an instance in a
+ * component.
+ *
+ * @stability unstable
+ * @since 0.4.0
+ * @category forms
+ */
+export * as Form from "./Form.ts";
 /**
  * Effect Atom's modules, so an app can import everything from one place.
  *

package/dist/index.js

@@ -40,6 +40,15 @@ export { default as RegistryProvider } from "./RegistryProvider.svelte";
  * @category scoped atoms
  */
 export * as ScopedAtom from "./ScopedAtom.js";
+/**
+ * Forms driven by one Effect Schema: `Form.make` defines one, `useForm` creates an instance in a
+ * component.
+ *
+ * @stability unstable
+ * @since 0.4.0
+ * @category forms
+ */
+export * as Form from "./Form.js";
 /**
  * Effect Atom's modules, so an app can import everything from one place.
  *

package/dist/internal/awaitWrite.d.ts

@@ -0,0 +1,11 @@
+import { Exit } from "effect";
+import type { Cause } from "effect";
+import { AsyncResult } from "effect/reactivity";
+import type { Atom, AtomRegistry } from "effect/reactivity";
+/**
+ * A promise-mode setter's wait: as `awaitResult` with `suspendOnWaiting`, but a change to a result
+ * from before the call, which is what `Atom.Reset` from another setter leaves (an idle `Initial`,
+ * or an `Atom.fn`'s `initialValue`), ends it as interrupted. The reset interrupts the call, so
+ * otherwise the wait would hang until the next call, or settle with the initial value.
+ */
+export declare const awaitWrite: <A, E>(registry: AtomRegistry.AtomRegistry, atom: Atom.Atom<AsyncResult.AsyncResult<A, E>>, start: number, signal: AbortSignal) => Promise<Exit.Exit<A, E | Cause.NoSuchElementError>>;

package/dist/internal/awaitWrite.js

@@ -0,0 +1,27 @@
+// Waiting for a write to an async atom to settle, for useAtomSet's promise modes and a form's
+// submit. Internal: not exported from the package.
+import { Effect, Exit } from "effect";
+import { AsyncResult } from "effect/reactivity";
+/**
+ * A promise-mode setter's wait: as `awaitResult` with `suspendOnWaiting`, but a change to a result
+ * from before the call, which is what `Atom.Reset` from another setter leaves (an idle `Initial`,
+ * or an `Atom.fn`'s `initialValue`), ends it as interrupted. The reset interrupts the call, so
+ * otherwise the wait would hang until the next call, or settle with the initial value.
+ */
+export const awaitWrite = (registry, atom, start, signal) => Effect.runPromiseExit(Effect.callback((resume) => {
+    const first = registry.get(atom);
+    if (first._tag !== "Initial" && !first.waiting) {
+        resume(AsyncResult.toExit(first));
+        return;
+    }
+    const cancel = registry.subscribe(atom, (result) => {
+        if (result.waiting) {
+            return;
+        }
+        cancel();
+        const reset = result._tag === "Initial" ||
+            (result._tag === "Success" && result.timestamp < start);
+        resume(reset ? Exit.interrupt() : AsyncResult.toExit(result));
+    });
+    return Effect.sync(cancel);
+}), { signal });

package/dist/internal/boundaries.js

@@ -5,4 +5,6 @@
  */
 export const queuedBy = new WeakMap();
 /** Whether a live boundary brought a value for the key: it sends that value to the browser itself. */
-export const queuedByBoundary = (registry, key) => queuedBy.get(registry)?.has(key) === true;
+export const queuedByBoundary = (registry, key) => 
+// oxlint-disable-next-line sonarjs/no-empty-collection -- HydrationBoundary.svelte fills it; this module only declares it
+queuedBy.get(registry)?.has(key) === true;

package/dist/internal/form/array.d.ts

@@ -0,0 +1,21 @@
+import type { Engine } from "./engine.ts";
+import type { FieldImpl } from "./field.ts";
+import type { GroupImpl } from "./group.ts";
+import type { IndexPath, KeyPath } from "./paths.ts";
+export declare class ArrayImpl {
+    #private;
+    readonly keyPath: KeyPath;
+    constructor(engine: Engine, keyPath: KeyPath);
+    get path(): IndexPath;
+    get items(): readonly {
+        readonly key: number;
+        readonly index: number;
+        readonly fields: GroupImpl;
+        readonly field: FieldImpl;
+    }[];
+    get error(): string | undefined;
+    append(item: unknown): void;
+    remove(index: number): void;
+    move(from: number, to: number): void;
+    replace(index: number, item: unknown): void;
+}

package/dist/internal/form/array.js

@@ -0,0 +1,57 @@
+import { pathId } from "./paths.js";
+export class ArrayImpl {
+    #engine;
+    keyPath;
+    constructor(engine, keyPath) {
+        this.#engine = engine;
+        this.keyPath = keyPath;
+    }
+    get path() {
+        return this.#engine.indexPath(this.keyPath) ?? [];
+    }
+    get items() {
+        const keys = this.#engine.state.keys.get(pathId(this.keyPath)) ?? [];
+        return keys.map((key, index) => ({
+            field: this.#engine.field([...this.keyPath, key]),
+            fields: this.#engine.group([...this.keyPath, key]),
+            index,
+            key,
+        }));
+    }
+    get error() {
+        return this.#engine.errorAt(this.keyPath);
+    }
+    append(item) {
+        this.#engine.updateArray(this.keyPath, (items, keys) => {
+            items.push(item);
+            keys.push(this.#engine.newKey());
+        });
+    }
+    remove(index) {
+        this.#engine.updateArray(this.keyPath, (items, keys) => {
+            if (index >= 0 && index < items.length) {
+                items.splice(index, 1);
+                keys.splice(index, 1);
+            }
+        });
+    }
+    move(from, to) {
+        this.#engine.updateArray(this.keyPath, (items, keys) => {
+            const inRange = (index) => index >= 0 && index < items.length;
+            if (!(inRange(from) && inRange(to)) || from === to) {
+                return;
+            }
+            items.splice(to, 0, ...items.splice(from, 1));
+            keys.splice(to, 0, ...keys.splice(from, 1));
+        });
+    }
+    replace(index, item) {
+        this.#engine.updateArray(this.keyPath, (items, keys) => {
+            if (index >= 0 && index < items.length) {
+                items[index] = item;
+                // A new item: the old one's errors and touched state don't carry over.
+                keys[index] = this.#engine.newKey();
+            }
+        });
+    }
+}

package/dist/internal/form/constraints.d.ts

@@ -0,0 +1,13 @@
+import { SchemaAST } from "effect";
+import type { IndexPath } from "./paths.ts";
+/** The attributes `field.constraints` can set. */
+export interface Constraints {
+    readonly required?: boolean | undefined;
+    readonly minlength?: number | undefined;
+    readonly maxlength?: number | undefined;
+    readonly min?: number | undefined;
+    readonly max?: number | undefined;
+    readonly pattern?: string | undefined;
+}
+/** The HTML constraints for the field at `path` in `schema`'s AST. */
+export declare const constraintsAt: (root: SchemaAST.AST, path: IndexPath) => Constraints;

package/dist/internal/form/constraints.js

@@ -0,0 +1,166 @@
+import { SchemaAST } from "effect";
+const isJsonArray = (json) => Array.isArray(json);
+const objectPayload = (payload) => typeof payload === "object" && payload !== null && !isJsonArray(payload)
+    ? payload
+    : undefined;
+const finite = (payload, key) => {
+    const value = payload?.[key];
+    return typeof value === "number" && Number.isFinite(value)
+        ? value
+        : undefined;
+};
+// An HTML pattern is compiled with the v flag and must match the whole value, while a Schema
+// pattern matches anywhere in it: only one anchored at both ends, with no flags but u or v, means
+// the same to both.
+const sameAsHtmlPattern = (source, flags) => {
+    if (flags !== undefined &&
+        !(typeof flags === "string" && ["", "u", "v"].includes(flags))) {
+        return false;
+    }
+    if (!(source.startsWith("^") && source.endsWith("$"))) {
+        return false;
+    }
+    // `^a|b$` is anchored only at its ends: the browser wraps it as `^(?:^a|b$)$`.
+    return !source.includes("|") && !source.endsWith("\\$");
+};
+// Effect's built-in checks say what they are in a `representation` annotation (`Schema.ts`, for
+// example `isMinLength`). Only the ones that map exactly onto an HTML attribute are read; exclusive
+// bounds and custom filters are left out.
+const readers = {
+    "effect/schema/isBetween": (payload) => ({
+        max: payload?.exclusiveMaximum === true
+            ? undefined
+            : finite(payload, "maximum"),
+        min: payload?.exclusiveMinimum === true
+            ? undefined
+            : finite(payload, "minimum"),
+    }),
+    "effect/schema/isBetweenLength": (payload) => ({
+        maxlength: finite(payload, "maximum"),
+        minlength: finite(payload, "minimum"),
+    }),
+    "effect/schema/isGreaterThanOrEqualTo": (payload) => ({
+        min: finite(payload, "minimum"),
+    }),
+    "effect/schema/isLessThanOrEqualTo": (payload) => ({
+        max: finite(payload, "maximum"),
+    }),
+    "effect/schema/isMaxLength": (payload) => ({
+        maxlength: finite(payload, "maxLength"),
+    }),
+    "effect/schema/isMinLength": (payload) => ({
+        minlength: finite(payload, "minLength"),
+    }),
+    "effect/schema/isPattern": (payload) => {
+        const source = payload?.source;
+        return typeof source === "string" &&
+            sameAsHtmlPattern(source, payload?.flags)
+            ? { pattern: source }
+            : {};
+    },
+};
+/** Copies `from`'s defined constraints into `into`, in `from`'s order. */
+const merge = (into, from) => {
+    Object.assign(into, Object.fromEntries(Object.entries(from).filter(([, value]) => value !== undefined)));
+};
+const readCheck = (check, into) => {
+    if (check._tag === "FilterGroup") {
+        for (const inner of check.checks) {
+            readCheck(inner, into);
+        }
+        return;
+    }
+    const representation = check.annotations?.representation;
+    if (representation === undefined) {
+        return;
+    }
+    const reader = readers[representation.id];
+    if (reader !== undefined) {
+        merge(into, reader(objectPayload(representation.payload)));
+    }
+};
+// The node's checks, then the checks along its encoding chain (NumberFromString keeps a range check
+// on the decoded Number and a NonEmpty check on the encoded String).
+const readNode = (ast, into) => {
+    for (const check of ast.checks ?? []) {
+        readCheck(check, into);
+    }
+    for (const link of ast.encoding ?? []) {
+        readNode(link.to, into);
+    }
+};
+// Steps into declarations (a Schema.Class wraps its Struct) and suspensions, to a node with fields.
+const unwrap = (ast) => {
+    if (SchemaAST.isSuspend(ast)) {
+        return unwrap(ast.thunk());
+    }
+    if (SchemaAST.isDeclaration(ast)) {
+        const [inner] = ast.typeParameters;
+        if (inner !== undefined) {
+            return unwrap(inner);
+        }
+        const last = ast.encoding?.at(-1)?.to;
+        return last === undefined ? ast : unwrap(last);
+    }
+    return ast;
+};
+// The field at one step below `ast`, with whether its key is optional. In a union, the first member
+// that has the step.
+const step = (ast, segment) => {
+    const node = unwrap(ast);
+    if (SchemaAST.isUnion(node)) {
+        for (const member of node.types) {
+            const found = step(member, segment);
+            if (found !== undefined) {
+                return found;
+            }
+        }
+        return undefined;
+    }
+    if (SchemaAST.isObjects(node) && typeof segment === "string") {
+        const property = node.propertySignatures.find((candidate) => candidate.name === segment);
+        return property === undefined
+            ? undefined
+            : { ast: property.type, optional: SchemaAST.isOptional(property.type) };
+    }
+    if (SchemaAST.isArrays(node) && typeof segment === "number") {
+        const element = node.elements[segment] ?? node.rest[0];
+        return element === undefined
+            ? undefined
+            : { ast: element, optional: SchemaAST.isOptional(element) };
+    }
+    return undefined;
+};
+// `optional(X)` is an optional key holding `X | undefined`; the constraints are X's.
+const withoutUndefined = (ast) => {
+    if (!SchemaAST.isUnion(ast)) {
+        return ast;
+    }
+    const types = ast.types.filter((member) => member._tag !== "Undefined");
+    return types.length === 1 && types[0] !== undefined ? types[0] : ast;
+};
+/** The HTML constraints for the field at `path` in `schema`'s AST. */
+export const constraintsAt = (root, path) => {
+    let found = {
+        ast: root,
+        optional: false,
+    };
+    for (const segment of path) {
+        found &&= step(found.ast, segment);
+    }
+    if (found === undefined) {
+        return {};
+    }
+    const { ast, optional } = found;
+    const into = {};
+    readNode(withoutUndefined(ast), into);
+    // `required` means "not empty" to a browser, so it is set only where the Schema rejects an empty
+    // string: a required key alone allows "", and a checkbox's boolean is always present.
+    const { minlength } = into;
+    const out = {};
+    if (!optional && typeof minlength === "number" && minlength >= 1) {
+        out.required = true;
+    }
+    merge(out, into);
+    return out;
+};