26:T801a,
// Sign up: an async check (is the name taken?) that can also fail to answer, a rule
// across two fields (the passwords), and a server that refuses an address and,
// sometimes, everything.
const SignUp = z
  .object({
    username: z
      .string()
      .min(3, "three characters at least")
      .regex(/^[a-z0-9-]+$/, "lowercase letters, digits and dashes"),
    email: z.email("an address, like you@example.com"),
    password: z.string().min(8, "eight characters or more"),
    confirm: z.string(),
  })
  .refine((v) => v.password === v.confirm, {
    path: ["confirm"],
    message: "not the same password",
  })
type SignUp = z.infer<typeof SignUp>

const TAKEN = ["adrian", "admin", "root"]

function SignUpForm() {
  const [done, setDone] = React.useState<string | null>(null)
  const form = useForm<SignUp>({
    initial: { username: "", email: "", password: "", confirm: "" },
    schema: SignUp,
    checks: {
      username: {
        debounce: 400,
        run: async (value, { signal }) => {
          await wait(600)
          if (signal.aborted) return undefined
          // A check that cannot answer: said as such, asked again on submit.
          if (String(value).startsWith("offline"))
            throw new Error("the name service is not answering")
          return TAKEN.includes(String(value))
            ? "taken: try another"
            : undefined
        },
      },
    },
    onSubmit: async (values) => {
      await wait(800)
      if (values.email.endsWith("@example.com"))
        return { errors: { email: "already has an account" } }
      if (values.email.endsWith(".test"))
        return { error: "the server is down for a moment; try again" }
      setDone(values.username)
    },
  })
  if (done)
    return (
      <p className="text-sm">
        welcome, <span className="font-medium">{done}</span>.{" "}
        <Button
          variant="link"
          className="text-muted-foreground underline"
          onClick={() => {
            setDone(null)
            form.reset()
          }}
        >
          again
        </Button>
      </p>
    )
  return (
    <Form form={form} guard={false} className="w-full max-w-sm">
      <form.Field
        name="username"
        label="username"
        required
        description="try adrian: it is taken; one starting with offline cannot be checked"
      >
        {(c) => <Input {...c.input} autoComplete="username" />}
      </form.Field>
      <form.Field
        name="email"
        label="email"
        required
        description="an address at example.com is already registered; one ending in .test makes the server fail"
      >
        {(c) => <Input {...c.input} type="email" autoComplete="email" />}
      </form.Field>
      <form.Field name="password" label="password" required>
        {(c) => (
          <Input {...c.input} type="password" autoComplete="new-password" />
        )}
      </form.Field>
      <form.Field name="confirm" label="the same password" required>
        {(c) => (
          <Input {...c.input} type="password" autoComplete="new-password" />
        )}
      </form.Field>
      <FormSummary />
      <FormSubmit>create account</FormSubmit>
    </Form>
  )
}

<SignUpForm />
25:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$26"}}]