27:Ta06a,
// Rows: a playlist's tracks, added, removed and reordered, each keyed so a row keeps
// its state wherever it moves; the rows' messages and touched marks move with them.
const Playlist = z.object({
  title: z.string().min(1, "a name for it"),
  tracks: z
    .array(
      z.object({
        title: z.string().min(1, "a title"),
        length: z.number().min(1000, "a second at least"),
      }),
    )
    .min(1, "one track at least"),
})
type Playlist = z.infer<typeof Playlist>

function PlaylistForm() {
  const form = useForm<Playlist>({
    initial: {
      title: "night drive",
      tracks: [
        { title: "harbour lights", length: 214_000 },
        { title: "", length: 187_000 },
      ],
    },
    schema: Playlist,
    // A rule over the rows the schema does not say: no title twice.
    validate: (v) => {
      const seen = new Map<string, number>()
      const out: Record<string, string> = {}
      v.tracks.forEach((t, i) => {
        const key = t.title.trim().toLowerCase()
        if (!key) return
        if (seen.has(key)) out[`tracks.${i}.title`] = "already in the list"
        else seen.set(key, i)
      })
      return out
    },
    onSubmit: async () => {
      await wait(700)
    },
  })
  return (
    <Form form={form} guard={false} className="w-full max-w-lg">
      <form.Field name="title" label="playlist">
        {(c) => <Input {...c.input} />}
      </form.Field>
      <form.FieldArray name="tracks">
        {(rows, { append, remove, move }) => (
          <FieldSet legend="tracks">
            {rows.map((row) => (
              <div key={row.key} className="flex items-start gap-2">
                <span className="mt-[30px] w-5 font-mono text-muted-foreground text-xs tabular-nums">
                  {row.index + 1}
                </span>
                <form.Field
                  name={`${row.path}.title`}
                  label="title"
                  className="flex-1"
                >
                  {(c) => <Input {...c.input} />}
                </form.Field>
                <form.Field name={`${row.path}.length`} label="length">
                  {(c) => (
                    <NumberField
                      label={c.label}
                      unit={SECONDS}
                      min={0}
                      step={1000}
                      value={c.value}
                      onValueChange={c.onValueChange}
                    />
                  )}
                </form.Field>
                <div className="mt-6 flex">
                  <Button
                    type="button"
                    size="icon-sm"
                    variant="ghost"
                    aria-label="up"
                    disabled={row.index === 0}
                    onClick={() => move(row.index, row.index - 1)}
                  >
                    <ArrowUp />
                  </Button>
                  <Button
                    type="button"
                    size="icon-sm"
                    variant="ghost"
                    aria-label="down"
                    disabled={row.index === rows.length - 1}
                    onClick={() => move(row.index, row.index + 1)}
                  >
                    <ArrowDown />
                  </Button>
                  <Button
                    type="button"
                    size="icon-sm"
                    variant="ghost"
                    aria-label="remove"
                    onClick={() => remove(row.index)}
                  >
                    <X />
                  </Button>
                </div>
              </div>
            ))}
            <Button
              type="button"
              size="sm"
              variant="outline"
              className="self-start"
              onClick={() => append({ title: "", length: 180_000 })}
            >
              <Plus /> add a track
            </Button>
          </FieldSet>
        )}
      </form.FieldArray>
      <FormSummary />
      <div className="flex items-center gap-2">
        <FormSubmit />
        <FormReset />
      </div>
    </Form>
  )
}

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