@fungi.computer/caps 0.3.1 → 0.5.0

package/dist/schema-form.d.ts

@@ -33,6 +33,10 @@ export type SchemaFormOptions<V extends FormValues, Out> = {
     defaultValues: V;
     /** Receives the parsed value, never the raw input. */
     onSubmit: (value: Out, raw: V) => Promise<SubmitResult<V> | undefined> | Promise<void> | SubmitResult<V> | undefined;
+    /** Called only after a saved result, with the new raw-value baseline. */
+    onSaved?: ((values: V) => void) | undefined;
+    /** Safe message for a thrown submit; the cause is logged, never shown. */
+    failure?: string | undefined;
 };
 /** The schema as TanStack validates it: raw values in, any output. */
 export type Validator<V> = StandardSchemaV1<V, unknown>;
@@ -75,6 +79,9 @@ export type SchemaFormPresentation = {
     submitLabel?: ReactNode;
     /** Show a Discard action while there are unsaved changes. */
     discardLabel?: ReactNode;
+    /** A secondary exit action, shown even when clean; never submits or discards. */
+    onCancel?: () => void;
+    cancelLabel?: ReactNode;
     /** Keep the primary action available on a clean form (create forms). */
     allowClean?: boolean;
     /** Replaces the SaveBar, such as a footer with a retry key; `null` drops it. */
@@ -90,6 +97,8 @@ export type SchemaFormPresentation = {
 /** Props accepted by SchemaForm: a model from useSchemaForm, or its options. */
 export type SchemaFormProps<V extends FormValues, Out> = SchemaFormPresentation & ({
     model: SchemaFormModel<V>;
+    onSaved?: never;
+    failure?: never;
 } | SchemaFormOptions<V, Out>);
 /**
  * A whole form from its schema: fields, sections, validation, busy state and
@@ -104,6 +113,9 @@ export type SaveBarProps<V extends FormValues> = {
     label: ReactNode;
     /** Show a Discard action while there are unsaved changes. */
     discardLabel?: ReactNode;
+    /** A secondary exit action that never submits or resets the form. */
+    onCancel?: (() => void) | undefined;
+    cancelLabel?: ReactNode;
     /**
      * Keep the primary action available on a clean form (create forms that may
      * submit their defaults). By default a clean form has nothing to save.
@@ -117,4 +129,4 @@ export type SaveBarProps<V extends FormValues> = {
  * The form's action row: the refused-submit error, a quiet "Unsaved changes"
  * or "Saved" readout, an optional Discard, and the one primary submit.
  */
-export declare function SaveBar<V extends FormValues>({ model, label, discardLabel, allowClean, dirtyLabel, buttonProps, ...props }: SaveBarProps<V>): import("react/jsx-runtime").JSX.Element;
+export declare function SaveBar<V extends FormValues>({ model, label, discardLabel, onCancel, cancelLabel, allowClean, dirtyLabel, buttonProps, ...props }: SaveBarProps<V>): import("react/jsx-runtime").JSX.Element;

package/dist/schema-form.js

@@ -1,12 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { evaluate, useForm, useSelector, } from "@tanstack/react-form";
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { Button } from "./components/button.js";
 import { Form, FormFooter, } from "./components/field.js";
 import { Status } from "./components/status.js";
 import { FormFields } from "./form-fields.js";
 import { describeSchema, standardSchema, } from "./form-schema.js";
 const serverKey = "onServer";
+/** Keep the user's place when a submitted form reveals validation errors. */
+function focusFirstInvalid(form) {
+    const invalid = form?.querySelector('[aria-invalid="true"]');
+    if (invalid?.matches("input, select, textarea, button, [tabindex]")) {
+        invalid.focus();
+    }
+    else {
+        invalid
+            ?.querySelector("input, select, textarea, button")
+            ?.focus();
+    }
+}
 function hasServerError(field) {
     return field.state.meta.errorMap.onServer !== undefined;
 }
@@ -61,9 +73,17 @@ export function useSchemaForm(options) {
                 setError(parsed.issues[0]?.message ?? "Check the form and try again.");
                 return;
             }
-            const result = (await options.onSubmit(parsed.value, value)) ?? {
-                kind: "saved",
-            };
+            let result;
+            try {
+                result = (await options.onSubmit(parsed.value, value)) ?? {
+                    kind: "saved",
+                };
+            }
+            catch (cause) {
+                console.error("SchemaForm submit failed", cause);
+                setError(options.failure ?? "Couldn't save changes. Try again.");
+                return;
+            }
             if (result.kind === "refused") {
                 setError(result.error ?? null);
                 const wide = formApi;
@@ -76,6 +96,7 @@ export function useSchemaForm(options) {
             setSavedBaseline(baseline);
             formApi.reset(baseline);
             setSaved(result.message ?? "Saved");
+            options.onSaved?.(baseline);
         },
     });
     return {
@@ -98,16 +119,28 @@ export function useSchemaFormStatus(model) {
     const canSubmit = useSelector(model.form.store, (state) => state.canSubmit);
     return { dirty, submitting, canSubmit };
 }
-function BoundSchemaForm({ model, submitLabel = "Save changes", discardLabel, allowClean, footer, children, disabled = false, ...props }) {
+function BoundSchemaForm({ model, submitLabel = "Save changes", discardLabel, onCancel, cancelLabel, allowClean, layout, footer, children, disabled = false, ...props }) {
     const { submitting } = useSchemaFormStatus(model);
-    return (_jsxs(Form, { ...props, busy: submitting, noValidate: true, onSubmit: (event) => {
+    const formRef = useRef(null);
+    return (_jsxs(Form, { ...props, ref: formRef, layout: layout, busy: submitting, noValidate: true, onSubmit: (event) => {
             event.preventDefault();
             if (!model.form.state.isSubmitting)
-                void model.submit();
-        }, children: [children ?? _jsx(FormFields, { model: model, disabled: disabled }), footer !== undefined ? (footer) : (_jsx(SaveBar, { model: model, label: submitLabel, ...(discardLabel === undefined ? {} : { discardLabel }), ...(allowClean === undefined ? {} : { allowClean }) }))] }));
+                void model.submit().then(() => {
+                    // React commits field errors after TanStack completes validation.
+                    setTimeout(() => {
+                        focusFirstInvalid(formRef.current);
+                    }, 0);
+                });
+        }, children: [children ?? (_jsx(FormFields, { model: model, disabled: disabled, layout: layout })), footer !== undefined ? (footer) : (_jsx(SaveBar, { model: model, label: submitLabel, discardLabel: onCancel === undefined ? discardLabel : undefined, onCancel: onCancel, cancelLabel: cancelLabel, allowClean: allowClean ?? onCancel !== undefined, divider: onCancel === undefined }))] }));
 }
-function OwnedSchemaForm({ schema, defaultValues, onSubmit, ...props }) {
-    const model = useSchemaForm({ schema, defaultValues, onSubmit });
+function OwnedSchemaForm({ schema, defaultValues, onSubmit, onSaved, failure, ...props }) {
+    const model = useSchemaForm({
+        schema,
+        defaultValues,
+        onSubmit,
+        onSaved,
+        failure,
+    });
     return _jsx(BoundSchemaForm, { ...props, model: model });
 }
 /**
@@ -122,8 +155,8 @@ export function SchemaForm(props) {
  * The form's action row: the refused-submit error, a quiet "Unsaved changes"
  * or "Saved" readout, an optional Discard, and the one primary submit.
  */
-export function SaveBar({ model, label, discardLabel, allowClean = false, dirtyLabel = "Unsaved changes", buttonProps, ...props }) {
-    const { dirty, submitting, canSubmit } = useSchemaFormStatus(model);
+export function SaveBar({ model, label, discardLabel, onCancel, cancelLabel = "Cancel", allowClean = false, dirtyLabel = "Unsaved changes", buttonProps, ...props }) {
+    const { dirty, submitting } = useSchemaFormStatus(model);
     const status = submitting ? null : model.saved && !dirty ? (_jsx(Status, { tone: "success", size: "compact", label: model.saved })) : dirty ? (_jsx(Status, { tone: "neutral", size: "compact", label: dirtyLabel })) : null;
-    return (_jsxs(FormFooter, { ...props, error: model.error, status: status, children: [discardLabel && dirty ? (_jsx(Button, { type: "button", variant: "ghost", disabled: submitting, onClick: model.discard, children: discardLabel })) : null, _jsx(Button, { ...buttonProps, type: "submit", loading: submitting, disabled: submitting || !canSubmit || (!dirty && !allowClean), children: label })] }));
+    return (_jsxs(FormFooter, { ...props, error: model.error, status: status, children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", disabled: submitting, onClick: onCancel, children: cancelLabel })) : discardLabel && dirty ? (_jsx(Button, { type: "button", variant: "ghost", disabled: submitting, onClick: model.discard, children: discardLabel })) : null, _jsx(Button, { ...buttonProps, type: "submit", loading: submitting, disabled: submitting || (!dirty && !allowClean), title: !dirty && !allowClean ? "No changes to save" : undefined, children: label })] }));
 }