@krizaka/ui 2.10.0 → 3.1.0

package/registry/form.json

@@ -0,0 +1,2940 @@
+{
+  "name": "form",
+  "type": "primitive",
+  "title": "Form",
+  "summary": "A form = a schema (zod 4) + the package's fields, on TanStack Form v1: each error shows once the field is left and goes as soon as it is fixed, in the person's language (i18n keys, never the engine's English), a value can be checked on the server as it is typed, and the server's refusals land under their fields — web and React Native, the same schema.",
+  "description": "A form = a schema (zod 4) + the package's fields, on TanStack Form v1: each error shows once the field is left and goes as soon as it is fixed, in the person's language (i18n keys, never the engine's English), a value can be checked on the server as it is typed, and the server's refusals land under their fields — web and React Native, the same schema.",
+  "status": "beta",
+  "category": "forms",
+  "platforms": "both",
+  "whenToUse": [
+    "Any form that sends something: sign-up, profile, upload details, an amount, an audience, a report, settings.",
+    "When the server must re-check the same rules: the schema is shared (a product keeps it in `packages/core`) and `@krizaka/ui/form/server` parses with it in a Server Action.",
+    "When a value depends on the server (a username's availability): `validateAsync` on the field, debounced and aborted."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For a single search box that filters as you type: no submit, no validation.",
+      "use": "search-field"
+    },
+    {
+      "when": "For a filter bar over a list: its state is the address, not a form.",
+      "use": "filter-bar"
+    },
+    {
+      "when": "For a setting that applies at once on its own (a theme switch): the control alone.",
+      "use": "switch"
+    }
+  ],
+  "bestPractices": [
+    "Define the form once (`createKrizakaForm({ schema, defaultValues })`) beside the API's contract; use it in components with `form.useForm({ onSubmit })`.",
+    "Name refusals with keys in the schema (`z.string().regex(re, \"signUp.username.format\")`) and give the words in `messages/*.json`; the generic ones are `form.errors.*` (required, tooShort {minimum}…).",
+    "Send with a mutation of @krizaka/query (`onSubmit: (v) => mutation.mutateAsync(v)`) or a Server Action (`useFormWithAction`): a thrown `KrizakaApiError` or `{ ok: false, problem }` puts its `fields` under their fields.",
+    "Never disable the submit button for an invalid form: a refused submit shows every error and focuses the first.",
+    "Pick the field for the value: `DateField entry=\"parts\"` for a memorable date (a birth date), the calendar for a date near today; `Money` stores cents; `RadioGroup` for two to five visible choices, `Select` beyond.",
+    "Need a control the package does not have? `form.Field` gives its value, setter, error and ids — never import @tanstack/* in a product."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Enter",
+        "action": "Sends the form from a text field (web); the keyboard's return key moves to the next field (native)."
+      },
+      {
+        "keys": "Tab",
+        "action": "Leaves a field: from then on its error shows, and goes as soon as it is fixed."
+      }
+    ],
+    "notes": [
+      "Every control is named by its visible label; its hint and its error are in `aria-describedby`, and an invalid control has `aria-invalid`.",
+      "Errors are announced (`role=\"alert\"`); a refused submit focuses the first invalid field on the web and announces the first error on native.",
+      "An availability check names its wait (`checkingLabel`) and says when the value is free (`availableHint`): never by colour alone.",
+      "A date of birth is three labelled boxes in the locale's order with numeric keypads and `bday` autofill, not a calendar to scroll through decades."
+    ]
+  },
+  "related": [
+    "field",
+    "checkbox",
+    "switch",
+    "radio-group",
+    "combobox",
+    "date-picker",
+    "tag-input",
+    "file-upload",
+    "slider"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/form",
+    "import": "import { createKrizakaForm, useFormWithAction, latestBirthDate, useKrizakaField, formMessage } from \"@krizaka/ui/form\";",
+    "props": [
+      {
+        "component": "Checkbox",
+        "description": "A box of the form (`boolean`): terms to accept, an option.",
+        "props": [
+          {
+            "name": "label",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The words next to the box, clickable with it — text, or a sentence with links (terms, privacy).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the field's root.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control, read with it; the error takes its place when there is one.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Combobox",
+        "description": "A choice among many, typed to filter or fetched: one value (`string`) or several (`string[]`).",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the control's accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the field's root.",
+            "required": false
+          },
+          {
+            "name": "creatable",
+            "type": "boolean",
+            "default": null,
+            "description": "Offers to create the query as a value.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control, read with it; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<ComboboxLabels>",
+            "default": null,
+            "description": "The words of the control, passed translated.",
+            "required": false
+          },
+          {
+            "name": "multiple",
+            "type": "boolean",
+            "default": null,
+            "description": "Several values (`string[]`), shown as chips; one (`string`) by default.",
+            "required": false
+          },
+          {
+            "name": "onSearch",
+            "type": "((query: string, signal: AbortSignal) => Promise<readonly ComboboxOption[]>)",
+            "default": null,
+            "description": "Fetches the options for a query (debounced, aborted by a newer one).",
+            "required": false
+          },
+          {
+            "name": "options",
+            "type": "readonly ComboboxOption[]",
+            "default": "[]",
+            "description": "The options, filtered as the person types.",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": null,
+            "description": "The input's placeholder, passed translated.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "DateField",
+        "description": "A date of the form (`YYYY-MM-DD`, `\"\"` for none): a calendar, or day · month · year typed in the locale's order.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the control's accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "autoComplete",
+            "type": "\"off\" | \"bday\"",
+            "default": null,
+            "description": "`bday` for a date of birth.",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the field's root.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "entry",
+            "type": "\"calendar\" | \"parts\"",
+            "default": "calendar",
+            "description": "`calendar` (default: a date near today — a publication, an appointment) or `parts` (day · month · year typed: a\nmemorable date, a birth date).",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control, read with it; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "(Partial<DatePickerLabels> & Partial<Record<DatePart, string>>)",
+            "default": null,
+            "description": "The words of the calendar, or the names of the boxes (`day`, `month`, `year`), passed translated.",
+            "required": false
+          },
+          {
+            "name": "max",
+            "type": "string",
+            "default": null,
+            "description": "The latest date (ISO), for the calendar (`latestBirthDate(18)` for an age gate).",
+            "required": false
+          },
+          {
+            "name": "min",
+            "type": "string",
+            "default": null,
+            "description": "The earliest date (ISO), for the calendar.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "FieldArray",
+        "description": "A list of fields that grows and shrinks (links, tiers, guests): each item's fields named `links[0].url`.",
+        "props": [
+          {
+            "name": "children",
+            "type": "(array: KrizakaFieldArray<unknown>) => ReactNode",
+            "default": null,
+            "description": "Draws the items: `items`, `push`, `remove`, `move`, `fieldName(i, \"url\")` for the fields of an item.",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The array's name in the schema (typed by the form).",
+            "required": true
+          }
+        ]
+      },
+      {
+        "component": "FileUpload",
+        "description": "Files of the form (`File[]`): a drop zone, then the chosen files, each removable.",
+        "props": [
+          {
+            "name": "browseLabel",
+            "type": "string",
+            "default": null,
+            "description": "The button that opens the file picker, passed translated.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the control's accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "removeLabel",
+            "type": "(fileName: string) => string",
+            "default": null,
+            "description": "The name of a file's remove button (`(name) => \"Remove \" + name`), passed translated.",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "The title in the zone (\"Drop your video here\"), passed translated.",
+            "required": true
+          },
+          {
+            "name": "accept",
+            "type": "string",
+            "default": null,
+            "description": "The types accepted (`video/*`, `image/png,.pdf`).",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the field's root.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "What is accepted, in words (\"MP4 or MOV, up to 4 GB\").",
+            "required": false
+          },
+          {
+            "name": "maxFiles",
+            "type": "number",
+            "default": null,
+            "description": "The most files.",
+            "required": false
+          },
+          {
+            "name": "maxSize",
+            "type": "number",
+            "default": null,
+            "description": "The largest file, in bytes.",
+            "required": false
+          },
+          {
+            "name": "multiple",
+            "type": "boolean",
+            "default": null,
+            "description": "Several files (`File[]`, up to `maxFiles`); one by default (still a `File[]` of one).",
+            "required": false
+          },
+          {
+            "name": "refusalLabel",
+            "type": "((rejection: FileRejection) => string)",
+            "default": null,
+            "description": "The words of a refused file (`(r) => r.file.name + \" is too large\"`).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "FormError",
+        "description": "The whole form's error — a refusal of the server that belongs to no field (a conflict, too many tries, no network).",
+        "props": [
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the alert.",
+            "required": false
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "A headline above the message (\"We could not create your account\"), passed translated.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "FormField",
+        "description": "A field drawn by the app (a control the package does not have): the form's value, errors and ids, any markup.",
+        "props": [
+          {
+            "name": "children",
+            "type": "(field: KrizakaField<unknown>) => ReactNode",
+            "default": null,
+            "description": "Draws the field: its value, setter, error and ids (`useKrizakaField`).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "asyncDebounceMs",
+            "type": "number",
+            "default": null,
+            "description": "The wait, in ms, before `validateAsync`.",
+            "required": false
+          },
+          {
+            "name": "validateAsync",
+            "type": "FieldCheck<unknown>",
+            "default": null,
+            "description": "Checks the value on the server as it changes.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Money",
+        "description": "An amount of the form, stored as integer minor units (cents: `1250` = 12.50), typed the locale's way.",
+        "props": [
+          {
+            "name": "currency",
+            "type": "string",
+            "default": null,
+            "description": "The currency (ISO 4217: `USD`, `EUR`, `JPY`): its sign before the amount, its decimals.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the control's accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the field's root.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control, read with it; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": null,
+            "description": "An example of an amount, passed translated.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "RadioGroup",
+        "description": "One choice among a few, all visible.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the control's accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "options",
+            "type": "readonly FormOption[]",
+            "default": null,
+            "description": "The choices, all visible (two to five).",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the field's root.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control, read with it; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "orientation",
+            "type": "\"horizontal\" | \"vertical\"",
+            "default": "vertical",
+            "description": "`vertical` (default) or `horizontal`.",
+            "required": false
+          },
+          {
+            "name": "variant",
+            "type": "\"list\" | \"cards\"",
+            "default": "list",
+            "description": "`list` (a dot and its words, default) or `cards` (a whole card is the radio: an amount, a plan, an audience).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Select",
+        "description": "One choice among many, in the platform's menu (`<select>`: accessible and right on phones).",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the control's accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "options",
+            "type": "readonly FormOption[]",
+            "default": null,
+            "description": "The choices, in the platform's own menu (a country, a category).",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the field's root.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control, read with it; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": null,
+            "description": "The first line while nothing is chosen (\"Choose a category\"), passed translated.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Slider",
+        "description": "A number (or a range) of the form, chosen by feel: a share, a volume, a price range.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the control's accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the field's root.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "formatValue",
+            "type": "((value: number) => string)",
+            "default": null,
+            "description": "The value as words (\"15 %\", \"3 min\"), shown and read.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control, read with it; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "max",
+            "type": "number",
+            "default": null,
+            "description": "The highest value. Default 100.",
+            "required": false
+          },
+          {
+            "name": "min",
+            "type": "number",
+            "default": null,
+            "description": "The lowest value. Default 0.",
+            "required": false
+          },
+          {
+            "name": "step",
+            "type": "number",
+            "default": null,
+            "description": "The step. Default 1.",
+            "required": false
+          },
+          {
+            "name": "thumbLabels",
+            "type": "[string, string]",
+            "default": null,
+            "description": "For a range (`[number, number]`): each thumb's name, passed translated.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Submit",
+        "description": "The submit button: busy while the form is sent (not pressable twice), never disabled for an invalid form.",
+        "props": [
+          {
+            "name": "announce",
+            "type": "string",
+            "default": null,
+            "description": "A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated.",
+            "required": false
+          },
+          {
+            "name": "asChild",
+            "type": "boolean",
+            "default": null,
+            "description": "Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged.",
+            "required": false
+          },
+          {
+            "name": "indicator",
+            "type": "boolean",
+            "default": "true",
+            "description": "Shows the glyph while `loading` / with a `status`. `false`: you draw your own.",
+            "required": false
+          },
+          {
+            "name": "magnetic",
+            "type": "boolean",
+            "default": null,
+            "description": "The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch).",
+            "required": false
+          },
+          {
+            "name": "progress",
+            "type": "number | null",
+            "default": null,
+            "description": "Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an\nupload, an export).",
+            "required": false
+          },
+          {
+            "name": "shape",
+            "type": "\"rounded\" | \"pill\" | \"cut\"",
+            "default": "rounded",
+            "description": "rounded · pill · cut (45° corners, the Krizaka chamfer).",
+            "required": false
+          },
+          {
+            "name": "shimmer",
+            "type": "boolean",
+            "default": null,
+            "description": "A sheen of light crosses the button on hover — for the one action a page is about.",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "\"icon\" | \"sm\" | \"md\" | \"lg\"",
+            "default": "md",
+            "description": "sm · md · lg, or `icon` (a square).",
+            "required": false
+          },
+          {
+            "name": "status",
+            "type": "\"success\" | \"error\" | null",
+            "default": null,
+            "description": "How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of\nthe status colour opens around it. Clear it to return to rest.",
+            "required": false
+          },
+          {
+            "name": "variant",
+            "type": "\"danger\" | \"primary\" | \"gradient\" | \"secondary\" | \"outline\" | \"ghost\"",
+            "default": "primary",
+            "description": "The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,\n`ghost`, `danger`.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Switch",
+        "description": "An on/off setting of the form (`boolean`): the label and its hint beside the switch.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the control's accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the field's root.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control, read with it; the error takes its place when there is one.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "TagInput",
+        "description": "Free words of the form as chips (`string[]`): tags, keywords.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the control's accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the field's root.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control, read with it; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<Pick<ComboboxLabels, \"results\" | \"toggle\" | \"remove\" | \"empty\" | \"create\">>",
+            "default": null,
+            "description": "The words of the field, passed translated; English by default.",
+            "required": false
+          },
+          {
+            "name": "max",
+            "type": "number",
+            "default": null,
+            "description": "Most tags; the field stops offering more past it.",
+            "required": false
+          },
+          {
+            "name": "normalize",
+            "type": "((tag: string) => string)",
+            "default": null,
+            "description": "Cleans a word before it is added (`(t) => t.toLowerCase().replace(/^#/, \"\")`). An empty result is ignored.",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": null,
+            "description": "The input's placeholder, passed translated.",
+            "required": false
+          },
+          {
+            "name": "separators",
+            "type": "readonly string[]",
+            "default": null,
+            "description": "Keys that add the word, besides Enter. Default `[\",\"]`.",
+            "required": false
+          },
+          {
+            "name": "suggestions",
+            "type": "readonly string[]",
+            "default": null,
+            "description": "Words offered as the person types (their own history, a curated list).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "TextArea",
+        "description": "A longer text of the form (a bio, a description, a report).",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the control's accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the field's root.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control, read with it; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "maxLength",
+            "type": "number",
+            "default": null,
+            "description": "The most characters.",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": null,
+            "description": "An example of a value, passed translated.",
+            "required": false
+          },
+          {
+            "name": "rows",
+            "type": "number",
+            "default": "4",
+            "description": "The visible lines. Default 4.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "TextField",
+        "description": "A text field of the form: label, input, hint or error, an optional check on the server.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the control's accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "asyncDebounceMs",
+            "type": "number",
+            "default": null,
+            "description": "The wait, in ms, between the last key and `validateAsync`. Default 350.",
+            "required": false
+          },
+          {
+            "name": "autoComplete",
+            "type": "string",
+            "default": null,
+            "description": "The browser's autofill (`email`, `username`, `new-password`, `name`).",
+            "required": false
+          },
+          {
+            "name": "availableHint",
+            "type": "string",
+            "default": null,
+            "description": "The words once `validateAsync` accepted the value (\"@eric is free\"), passed translated.",
+            "required": false
+          },
+          {
+            "name": "checkingLabel",
+            "type": "string",
+            "default": "Checking",
+            "description": "The name of the wait while it checks (\"Checking\"), passed translated.",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the field's root.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control, read with it; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "inputMode",
+            "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\"",
+            "default": null,
+            "description": "The keyboard on a phone (`numeric`, `decimal`).",
+            "required": false
+          },
+          {
+            "name": "maxLength",
+            "type": "number",
+            "default": null,
+            "description": "The most characters.",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": null,
+            "description": "An example of a value, passed translated — never the label.",
+            "required": false
+          },
+          {
+            "name": "start",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Something before the text (an `@`, an icon).",
+            "required": false
+          },
+          {
+            "name": "transform",
+            "type": "((raw: string) => string)",
+            "default": null,
+            "description": "Cleans what is typed before it is stored (`(v) => v.toLowerCase().replace(/\\s+/g, \"_\")`).",
+            "required": false
+          },
+          {
+            "name": "type",
+            "type": "\"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"password\"",
+            "default": "text",
+            "description": "`text` (default), `email`, `password`, `url`, `tel`, `search`: the right keyboard on a phone.",
+            "required": false
+          },
+          {
+            "name": "validateAsync",
+            "type": "FieldCheck<string>",
+            "default": null,
+            "description": "Checks the value on the server as it is typed (availability): an error key, or nothing when it is fine.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Watch",
+        "description": "Renders from a field's current value (a part shown only when a box is ticked, a total).",
+        "props": [
+          {
+            "name": "children",
+            "type": "(value: unknown) => ReactNode",
+            "default": null,
+            "description": "Draws from its current value: show a part of the form only when a box is ticked.",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field to follow (typed by the form).",
+            "required": true
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "sign-up",
+        "title": "Sign-up",
+        "description": "Orochia's sign-up: a username checked as it is typed with a free one offered, an 18+ date of birth typed as day · month · year, a server refusal on its field.",
+        "path": "examples/form/sign-up.tsx",
+        "module": "@krizaka/ui/registry/examples/form/sign-up",
+        "code": "\"use client\";\n\nimport { KrizakaApiError } from \"@krizaka/query\";\nimport { createKrizakaForm, latestBirthDate } from \"@krizaka/ui/form\";\nimport { z } from \"zod\";\n\n// The schema the sign-up API parses with: the same rules, the same keys. `signUp.*` are the app's own words.\nconst signUp = createKrizakaForm({\n  schema: z.object({\n    email: z.email(),\n    username: z.string().min(3).max(30).regex(/^[a-z0-9_]+$/, \"signUp.username.format\"),\n    password: z.string().min(8),\n    dateOfBirth: z.iso.date().refine((d) => d <= latestBirthDate(18), \"form.errors.UNDERAGE\"),\n    acceptTerms: z.boolean().refine(Boolean, \"signUp.terms.required\"),\n  }),\n  defaultValues: { email: \"\", username: \"\", password: \"\", dateOfBirth: \"\", acceptTerms: false },\n});\nconst WORDS: Record<string, string> = { \"signUp.username.format\": \"Lowercase letters, digits and _ only.\", \"signUp.username.taken\": \"This username is taken.\", \"signUp.terms.required\": \"Accept the terms to continue.\", \"form.errors.UNDERAGE\": \"You must be 18 or older.\", \"form.errors.BIRTH_DATE_INVALID\": \"Enter your real date of birth.\", \"form.errors.USERNAME_RESERVED\": \"This username is reserved.\", \"apiErrors.ACCOUNT_EXISTS\": \"This e-mail already has an account. Sign in instead.\" };\nconst taken = (u: string) => new Promise<boolean>((done) => setTimeout(() => done([\"eric\", \"elena\"].includes(u)), 300));\n// The server's codes (Orochia's register API): the ones that belong to a field land under it, the others above the button.\nconst register = async (v: { email: string; username: string }) => { if (v.username === \"admin\") throw new KrizakaApiError({ status: 400, code: \"USERNAME_RESERVED\" }); if (v.email.endsWith(\"@orochia.com\")) throw new KrizakaApiError({ status: 409, code: \"ACCOUNT_EXISTS\" }); };\n\n// Orochia's sign-up: the username checked as it is typed (a free one offered), an 18+ birth date, the server's refusals in place.\nexport default function FormSignUp() {\n  const form = signUp.useForm({ i18n: { t: (key) => WORDS[key] }, codeFields: { UNDERAGE: \"dateOfBirth\", BIRTH_DATE_INVALID: \"dateOfBirth\", USERNAME_RESERVED: \"username\" }, onSubmit: register });\n  return (\n    <form.Form aria-label=\"Create your account\" className=\"flex w-80 flex-col gap-4\">\n      <form.TextField name=\"email\" label=\"E-mail\" type=\"email\" autoComplete=\"email\" hint=\"We send a link to confirm it.\" />\n      <form.TextField name=\"username\" label=\"Username\" start=\"@\" autoComplete=\"username\" transform={(v) => v.toLowerCase().replace(/\\s+/g, \"_\")} availableHint=\"Free\" validateAsync={async (u) => ((await taken(u)) ? { key: \"signUp.username.taken\", suggestion: { label: `Use @${u}_${u.length}`, value: `${u}_${u.length}` } } : null)} />\n      <form.TextField name=\"password\" label=\"Password\" type=\"password\" autoComplete=\"new-password\" hint=\"At least 8 characters.\" />\n      <form.DateField name=\"dateOfBirth\" label=\"Date of birth\" entry=\"parts\" autoComplete=\"bday\" hint=\"Private, never shown.\" />\n      <form.Checkbox name=\"acceptTerms\" label=\"I accept the terms and the privacy policy\" />\n      <form.FormError />\n      <form.Submit>Create my account</form.Submit>\n    </form.Form>\n  );\n}\n"
+      },
+      {
+        "name": "profile",
+        "title": "Profile",
+        "description": "Saved by a mutation of @krizaka/query: categories, tags, a list of links that grows (`form.FieldArray`).",
+        "path": "examples/form/profile.tsx",
+        "module": "@krizaka/ui/registry/examples/form/profile",
+        "code": "\"use client\";\n\nimport { KrizakaQueryProvider, useMutation } from \"@krizaka/query\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { createKrizakaForm } from \"@krizaka/ui/form\";\nimport { z } from \"zod\";\n\nconst profile = createKrizakaForm({\n  schema: z.object({ displayName: z.string().min(2).max(40), bio: z.string().max(160), categories: z.array(z.string()).min(1).max(3), tags: z.array(z.string()).max(10), links: z.array(z.object({ url: z.url() })).max(3) }),\n  defaultValues: { displayName: \"Elena Varga\", bio: \"Night skies over the Tatras.\", categories: [\"travel\"], tags: [\"astro\", \"mountains\"], links: [{ url: \"https://elena.example\" }] },\n});\nconst CATEGORIES = [{ value: \"travel\", label: \"Travel\" }, { value: \"music\", label: \"Music\" }, { value: \"science\", label: \"Science\" }, { value: \"sport\", label: \"Sport\" }];\n\nfunction ProfileForm() {\n  const mutation = useMutation({ mutationFn: (values: unknown) => new Promise((done) => setTimeout(() => done(values), 400)) });\n  const form = profile.useForm({ onSubmit: (values) => mutation.mutateAsync(values) });\n  return (\n    <form.Form aria-label=\"Your profile\" className=\"flex w-96 flex-col gap-4\">\n      <form.TextField name=\"displayName\" label=\"Display name\" autoComplete=\"name\" />\n      <form.TextArea name=\"bio\" label=\"Bio\" rows={3} maxLength={160} hint=\"Up to 160 characters.\" />\n      <form.Combobox name=\"categories\" label=\"Categories\" multiple options={CATEGORIES} hint=\"Up to three.\" />\n      <form.TagInput name=\"tags\" label=\"Tags\" max={10} normalize={(t) => t.toLowerCase().replace(/^#/, \"\")} />\n      <form.FieldArray name=\"links\">\n        {(links) => (\n          <fieldset className=\"flex flex-col gap-2\">\n            <legend className=\"text-xs font-semibold text-fg-secondary\">Links</legend>\n            {links.items.map((_, i) => <form.TextField key={i} name={`links[${i}].url`} label={`Link ${i + 1}`} type=\"url\" />)}\n            {links.items.length < 3 ? <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={() => links.push({ url: \"\" })}>Add a link</Button> : null}\n          </fieldset>\n        )}\n      </form.FieldArray>\n      <form.Submit>Save the profile</form.Submit>\n    </form.Form>\n  );\n}\n\n// A profile saved by a mutation of @krizaka/query: categories, tags, a list of links that grows.\nexport default function FormProfile() {\n  return <KrizakaQueryProvider><ProfileForm /></KrizakaQueryProvider>;\n}\n"
+      },
+      {
+        "name": "upload",
+        "title": "Upload",
+        "description": "A video and what describes it — the file, a title, a description, tags, who can watch — sent together.",
+        "path": "examples/form/upload.tsx",
+        "module": "@krizaka/ui/registry/examples/form/upload",
+        "code": "\"use client\";\n\nimport { createKrizakaForm } from \"@krizaka/ui/form\";\nimport { z } from \"zod\";\n\nconst upload = createKrizakaForm({\n  schema: z.object({\n    video: z.array(z.instanceof(Blob)).length(1, \"upload.video.required\"),\n    title: z.string().min(3).max(100),\n    description: z.string().max(2000),\n    tags: z.array(z.string()).max(10),\n    visibility: z.enum([\"public\", \"followers\", \"private\"]),\n  }),\n  defaultValues: { video: [] as Blob[], title: \"\", description: \"\", tags: [] as string[], visibility: \"public\" as const },\n  i18n: { t: (key) => (key === \"upload.video.required\" ? \"Choose the video to publish.\" : undefined) },\n});\nconst VISIBILITY = [{ value: \"public\", label: \"Everyone\" }, { value: \"followers\", label: \"My followers\" }, { value: \"private\", label: \"Only me\" }];\n\n// A video and what describes it: the file, a title, a description, tags and who sees it — sent once, together.\nexport default function FormUpload() {\n  const form = upload.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 600)) });\n  return (\n    <form.Form aria-label=\"Publish a video\" className=\"flex w-96 flex-col gap-4\">\n      <form.FileUpload name=\"video\" label=\"Video\" title=\"Drop your video here\" browseLabel=\"Choose a file\" hint=\"MP4 or MOV, up to 4 GB.\" accept=\"video/*\" maxSize={4 * 1024 ** 3} removeLabel={(file) => `Remove ${file}`} />\n      <form.TextField name=\"title\" label=\"Title\" maxLength={100} />\n      <form.TextArea name=\"description\" label=\"Description\" rows={3} />\n      <form.TagInput name=\"tags\" label=\"Tags\" max={10} hint=\"Up to 10, separated by commas.\" />\n      <form.Select name=\"visibility\" label=\"Who can watch\" options={VISIBILITY} />\n      <form.Submit>Publish</form.Submit>\n    </form.Form>\n  );\n}\n"
+      },
+      {
+        "name": "amount",
+        "title": "Amount",
+        "description": "A tip stored in cents (`Money`), typed the locale's way; presets set the field from outside.",
+        "path": "examples/form/amount.tsx",
+        "module": "@krizaka/ui/registry/examples/form/amount",
+        "code": "\"use client\";\n\nimport { Chip } from \"@krizaka/ui/chip\";\nimport { createKrizakaForm } from \"@krizaka/ui/form\";\nimport { z } from \"zod\";\n\nconst tip = createKrizakaForm({\n  schema: z.object({\n    amount: z.number({ message: \"tip.amount.invalid\" }).int().min(100, \"tip.amount.min\").max(50_000, \"tip.amount.max\"),\n    message: z.string().max(140),\n    anonymous: z.boolean(),\n  }),\n  defaultValues: { amount: 500, message: \"\", anonymous: false },\n  i18n: { t: (key) => ({ \"tip.amount.invalid\": \"Enter an amount.\", \"tip.amount.min\": \"At least $1.\", \"tip.amount.max\": \"At most $500.\" })[key] },\n});\nconst PRESETS = [200, 500, 1000];\n\n// A tip in cents: typed the locale's way (`12.50`), never a float; presets set the field from outside.\nexport default function FormAmount() {\n  const form = tip.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 400)) });\n  return (\n    <form.Form aria-label=\"Send a tip\" className=\"flex w-80 flex-col gap-4\">\n      <form.Money name=\"amount\" label=\"Amount\" currency=\"USD\" hint=\"Between $1 and $500.\" />\n      <form.Watch name=\"amount\">\n        {(amount) => (\n          <div className=\"flex gap-2\" role=\"group\" aria-label=\"Suggested amounts\">\n            {PRESETS.map((cents) => <Chip key={cents} selected={amount === cents} onSelectedChange={() => form.setValue(\"amount\", cents)}>{`$${cents / 100}`}</Chip>)}\n          </div>\n        )}\n      </form.Watch>\n      <form.TextArea name=\"message\" label=\"A word for the creator\" rows={2} maxLength={140} />\n      <form.Checkbox name=\"anonymous\" label=\"Send it anonymously\" />\n      <form.Submit>Send the tip</form.Submit>\n    </form.Form>\n  );\n}\n"
+      },
+      {
+        "name": "audience",
+        "title": "Audience",
+        "description": "Cards to choose who watches, the price only for subscribers (`form.Watch`), a publication date.",
+        "path": "examples/form/audience.tsx",
+        "module": "@krizaka/ui/registry/examples/form/audience",
+        "code": "\"use client\";\n\nimport { createKrizakaForm } from \"@krizaka/ui/form\";\nimport { z } from \"zod\";\n\nconst audience = createKrizakaForm({\n  schema: z\n    .object({ audience: z.enum([\"everyone\", \"followers\", \"subscribers\"]), price: z.number().int().nullable(), publishOn: z.iso.date().or(z.literal(\"\")), comments: z.boolean() })\n    .refine((v) => v.audience !== \"subscribers\" || (v.price ?? 0) >= 100, { path: [\"price\"], message: \"audience.price.min\" }),\n  defaultValues: { audience: \"subscribers\" as \"everyone\" | \"followers\" | \"subscribers\", price: 499 as number | null, publishOn: \"\", comments: true },\n  i18n: { t: (key) => (key === \"audience.price.min\" ? \"Subscribers pay at least $1.\" : undefined) },\n});\nconst AUDIENCES = [\n  { value: \"everyone\", label: \"Everyone\", description: \"Free, in the feed\" },\n  { value: \"followers\", label: \"Followers\", description: \"Free, for them\" },\n  { value: \"subscribers\", label: \"Subscribers\", description: \"Paid, once\" },\n];\n\n// Who sees a video: cards to choose from, the price only when it is for subscribers, a publication date.\nexport default function FormAudience() {\n  const form = audience.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 400)) });\n  return (\n    <form.Form aria-label=\"Audience\" className=\"flex w-[28rem] max-w-full flex-col gap-4\">\n      <form.RadioGroup name=\"audience\" label=\"Who can watch\" variant=\"cards\" options={AUDIENCES} />\n      <form.Watch name=\"audience\">{(value) => (value === \"subscribers\" ? <form.Money name=\"price\" label=\"Price\" currency=\"USD\" /> : null)}</form.Watch>\n      <form.DateField name=\"publishOn\" label=\"Publish on\" hint=\"Empty: at once.\" />\n      <form.Switch name=\"comments\" label=\"Comments\" hint=\"Viewers can comment under the video.\" />\n      <form.Submit>Save</form.Submit>\n    </form.Form>\n  );\n}\n"
+      },
+      {
+        "name": "settings",
+        "title": "Settings",
+        "description": "Sent by a Server Action (`useFormWithAction`): switches, a menu, a slider, a choice.",
+        "path": "examples/form/settings.tsx",
+        "module": "@krizaka/ui/registry/examples/form/settings",
+        "code": "\"use client\";\n\nimport { createKrizakaForm, type FormActionResult } from \"@krizaka/ui/form\";\nimport { z } from \"zod\";\n\nconst settings = createKrizakaForm({\n  schema: z.object({ language: z.enum([\"en\", \"fr\", \"es\"]), emailDigest: z.boolean(), pushMessages: z.boolean(), autoplayVolume: z.number().min(0).max(100), quality: z.enum([\"auto\", \"data-saver\", \"best\"]) }),\n  defaultValues: { language: \"en\" as \"en\" | \"fr\" | \"es\", emailDigest: true, pushMessages: false, autoplayVolume: 40, quality: \"auto\" as \"auto\" | \"data-saver\" | \"best\" },\n});\nconst LANGUAGES = [{ value: \"en\", label: \"English\" }, { value: \"fr\", label: \"Français\" }, { value: \"es\", label: \"Español\" }];\nconst QUALITY = [{ value: \"auto\", label: \"Automatic\" }, { value: \"data-saver\", label: \"Data saver\" }, { value: \"best\", label: \"Best\" }];\n// What a Server Action answers (`\"use server\"` in the app): done, or a refusal the form shows.\nasync function saveSettings(): Promise<FormActionResult> {\n  await new Promise((done) => setTimeout(done, 400));\n  return { ok: true };\n}\n\n// Settings sent by a Server Action (`useFormWithAction`): switches, a menu, a slider, a choice.\nexport default function FormSettings() {\n  const form = settings.useFormWithAction(saveSettings);\n  return (\n    <form.Form aria-label=\"Settings\" className=\"flex w-96 flex-col gap-5\">\n      <form.Select name=\"language\" label=\"Language\" options={LANGUAGES} />\n      <form.Switch name=\"emailDigest\" label=\"Weekly e-mail\" hint=\"What happened on your channel.\" />\n      <form.Switch name=\"pushMessages\" label=\"Message notifications\" />\n      <form.Slider name=\"autoplayVolume\" label=\"Autoplay volume\" step={10} formatValue={(v) => `${v} %`} />\n      <form.RadioGroup name=\"quality\" label=\"Video quality\" options={QUALITY} orientation=\"horizontal\" />\n      <form.Submit>Save the settings</form.Submit>\n    </form.Form>\n  );\n}\n"
+      },
+      {
+        "name": "report",
+        "title": "Report",
+        "description": "One reason among a few, details, and blocking the account in the same step.",
+        "path": "examples/form/report.tsx",
+        "module": "@krizaka/ui/registry/examples/form/report",
+        "code": "\"use client\";\n\nimport { createKrizakaForm } from \"@krizaka/ui/form\";\nimport { z } from \"zod\";\n\nconst report = createKrizakaForm({\n  schema: z.object({ reason: z.enum([\"spam\", \"harassment\", \"minor\", \"copyright\", \"other\"], { message: \"report.reason.required\" }), details: z.string().max(500), block: z.boolean() }),\n  defaultValues: { reason: \"\" as unknown as \"spam\", details: \"\", block: false },\n  i18n: { t: (key) => (key === \"report.reason.required\" ? \"Choose what is wrong.\" : undefined) },\n});\nconst REASONS = [\n  { value: \"spam\", label: \"Spam or a scam\" },\n  { value: \"harassment\", label: \"Harassment\" },\n  { value: \"minor\", label: \"It may involve a minor\" },\n  { value: \"copyright\", label: \"It uses my work\" },\n  { value: \"other\", label: \"Something else\" },\n];\n\n// A report: one reason among a few, details, and blocking the account in the same step.\nexport default function FormReport() {\n  const form = report.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 400)) });\n  return (\n    <form.Form aria-label=\"Report this video\" className=\"flex w-80 flex-col gap-4\">\n      <form.RadioGroup name=\"reason\" label=\"What is wrong?\" options={REASONS} />\n      <form.TextArea name=\"details\" label=\"Details\" hint=\"Optional. What should our team look at?\" rows={3} maxLength={500} />\n      <form.Checkbox name=\"block\" label=\"Also block this account\" />\n      <form.Submit variant=\"danger\">Send the report</form.Submit>\n    </form.Form>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": {
+    "entry": "@krizaka/ui/native/form",
+    "import": "import { createKrizakaForm, TextField, DateField, Money, Submit, FormError } from \"@krizaka/ui/native/form\";",
+    "differences": [
+      "Import `createKrizakaForm` from `@krizaka/ui/native/form`: the same definition (schema, defaults, i18n), the same `useForm`, `form.*` fields drawn with the native ones.",
+      "`form.Form` is a View; `form.Submit` takes `label` and announces the first error of a refused submit (no focus to move).",
+      "`DateField` is always day · month · year; `RadioGroup` and `Select` are chips (a radio group); `Switch` is the system's; `Money` uses the decimal keypad.",
+      "No `Combobox`, `TagInput`, `FileUpload` or `Slider` field yet: a screen of its own (a picker) sets the value, or `form.Field` draws it."
+    ],
+    "props": [
+      {
+        "component": "Submit",
+        "description": "Sends the form: busy while it is sent (the product's mark turning, or a spinner); a refused submit announces its first error.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The button's words, passed translated (\"Create my account\").",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The product whose animated mark turns in the button while the form is sent (the brand's loader); the system's spinner otherwise.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the button.",
+            "required": false
+          },
+          {
+            "name": "variant",
+            "type": "\"danger\" | \"primary\" | \"gradient\" | \"secondary\" | \"outline\" | \"ghost\"",
+            "default": "primary",
+            "description": "The look. Default `primary`.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "FormError",
+        "description": "The whole form's error — a refusal that belongs to no field (a conflict, too many tries, no network).",
+        "props": [
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last.",
+            "required": false
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "A headline above the message, passed translated.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "TextField",
+        "description": "A text field of the form: its label, the input, the hint or the error, an optional check on the server.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "asyncDebounceMs",
+            "type": "number",
+            "default": null,
+            "description": "The wait, in ms, before `validateAsync`. Default 350.",
+            "required": false
+          },
+          {
+            "name": "availableHint",
+            "type": "string",
+            "default": null,
+            "description": "The words once `validateAsync` accepted the value (\"@eric is free\"), passed translated.",
+            "required": false
+          },
+          {
+            "name": "checkingLabel",
+            "type": "string",
+            "default": "Checking",
+            "description": "The name of the wait while it checks (\"Checking\"), passed translated.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "inputRef",
+            "type": "Ref<TextInput>",
+            "default": null,
+            "description": "The input itself, to focus it (`ref.current?.focus()`) or move to the next field.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the field.",
+            "required": false
+          },
+          {
+            "name": "transform",
+            "type": "((raw: string) => string)",
+            "default": null,
+            "description": "Cleans what is typed before it is stored (`(v) => v.toLowerCase()`).",
+            "required": false
+          },
+          {
+            "name": "validateAsync",
+            "type": "FieldCheck<string>",
+            "default": null,
+            "description": "Checks the value on the server as it is typed (availability): an error key, or nothing when it is fine.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "TextArea",
+        "description": "A longer text of the form (a bio, a description, a report).",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "maxLength",
+            "type": "number",
+            "default": null,
+            "description": "The most characters.",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": null,
+            "description": "An example, passed translated.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the field.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Checkbox",
+        "description": "A box of the form (`boolean`): terms to accept, an option.",
+        "props": [
+          {
+            "name": "label",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The words next to the box: text, or a `Txt` with links inside (then name it with `accessibleLabel`).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "accessibleLabel",
+            "type": "string",
+            "default": null,
+            "description": "The accessible name when `label` is not plain text, passed translated.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the field.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Switch",
+        "description": "An on/off setting of the form (`boolean`): its label and hint beside the system's switch.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the field.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "RadioGroup",
+        "description": "One choice among a few, as chips (a radio group). On native, `Select` is the same control.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "options",
+            "type": "readonly FormOption[]",
+            "default": null,
+            "description": "The choices, as chips (one chosen).",
+            "required": true
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "scrollable",
+            "type": "boolean",
+            "default": null,
+            "description": "Scrolls the chips sideways instead of wrapping them (many choices).",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the field.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Select",
+        "description": "One choice among several (the web's `<select>`): chips on native, scrolled sideways when they are many.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "options",
+            "type": "readonly FormOption[]",
+            "default": null,
+            "description": "The choices, as chips (one chosen).",
+            "required": true
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "scrollable",
+            "type": "boolean",
+            "default": null,
+            "description": "Scrolls the chips sideways instead of wrapping them (many choices).",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the field.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "DateField",
+        "description": "A date of the form (`YYYY-MM-DD`): day, month and year typed in the locale's order — the schema checks it.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "autoComplete",
+            "type": "\"off\" | \"bday\"",
+            "default": null,
+            "description": "`bday` for a date of birth.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<DateFieldLabels>",
+            "default": null,
+            "description": "The names of the boxes (`day`, `month`, `year`), passed translated.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the field.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Money",
+        "description": "An amount of the form, stored as integer minor units (cents), typed on the decimal keypad the locale's way.",
+        "props": [
+          {
+            "name": "currency",
+            "type": "string",
+            "default": null,
+            "description": "The currency (ISO 4217): its sign beside the amount, its decimals.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": null,
+            "description": "An example of an amount, passed translated.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the field.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "FormField",
+        "description": "A field drawn by the app (a control the package does not have).",
+        "props": [
+          {
+            "name": "children",
+            "type": "(field: KrizakaField<unknown>) => ReactNode",
+            "default": null,
+            "description": "Draws the field: its value, setter, error (`useKrizakaField`).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "asyncDebounceMs",
+            "type": "number",
+            "default": null,
+            "description": "The wait, in ms, before `validateAsync`.",
+            "required": false
+          },
+          {
+            "name": "validateAsync",
+            "type": "FieldCheck<unknown>",
+            "default": null,
+            "description": "Checks the value on the server as it changes.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "FieldArray",
+        "description": "A list of fields that grows and shrinks: each item's fields named `links[0].url`.",
+        "props": [
+          {
+            "name": "children",
+            "type": "(array: KrizakaFieldArray<unknown>) => ReactNode",
+            "default": null,
+            "description": "Draws the items: `items`, `push`, `remove`, `move`, `fieldName(i, \"url\")`.",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The array's name in the schema (typed by the form).",
+            "required": true
+          }
+        ]
+      },
+      {
+        "component": "Watch",
+        "description": "Renders from a field's current value (a part shown only when a choice is made).",
+        "props": [
+          {
+            "name": "children",
+            "type": "(value: unknown) => ReactNode",
+            "default": null,
+            "description": "Draws from its current value.",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field to follow (typed by the form).",
+            "required": true
+          }
+        ]
+      },
+      {
+        "component": "FieldCheck",
+        "description": "A value checked on the server as it is typed: an error (or its key), or nothing when the value is fine.",
+        "props": []
+      },
+      {
+        "component": "KrizakaField",
+        "description": "A field as its component draws it: the value, its setter, its error in words, its state.",
+        "props": []
+      },
+      {
+        "component": "KrizakaFieldArray",
+        "description": "The array of a field array, with its operations (`form.FieldArray`).",
+        "props": []
+      },
+      {
+        "component": "FormActionResult",
+        "description": "What a Server Action (or any submit) answers: done, or a refusal the form shows.",
+        "props": []
+      },
+      {
+        "component": "FormOutput",
+        "description": "The values a form sends: the schema's output (zod transforms applied).",
+        "props": []
+      },
+      {
+        "component": "FormSchema",
+        "description": "A schema the form validates with: any Standard Schema — zod 4 (`z.object`), valibot, arktype.",
+        "props": []
+      },
+      {
+        "component": "FormValues",
+        "description": "The values a form holds: the schema's input.",
+        "props": []
+      },
+      {
+        "component": "KrizakaFormFactory",
+        "description": "A form defined once (schema + defaults), used in components: `signUp.useForm({ onSubmit })`.",
+        "props": []
+      },
+      {
+        "component": "KrizakaFormInstance",
+        "description": "A form in a component: its fields (typed by the schema), its submit and its state.",
+        "props": []
+      },
+      {
+        "component": "FormFieldError",
+        "description": "An error of a field or of the whole form: the key of its words in the app's catalogue, and what fills them in.",
+        "props": []
+      },
+      {
+        "component": "FormI18n",
+        "description": "How a form finds its words: the app's translate function, and the prefixes of its keys.",
+        "props": []
+      },
+      {
+        "component": "FormProblem",
+        "description": "A refusal the form shows, serialisable (a Server Action returns it): the shape of `KrizakaApiError` of",
+        "props": []
+      }
+    ],
+    "examples": [
+      {
+        "name": "sign-up",
+        "title": "Sign-up",
+        "description": "E-mail, a username checked as it is typed, the 18+ birth date as day · month · year, the terms.",
+        "path": "examples/form/native/sign-up.tsx",
+        "module": "@krizaka/ui/registry/examples/form/native/sign-up",
+        "code": "import { KrizakaApiError } from \"@krizaka/query\";\nimport { createKrizakaForm, latestBirthDate } from \"@krizaka/ui/native/form\";\nimport { z } from \"zod\";\n\n// The same schema as the web form (a product keeps it in packages/core): the same rules, the same keys.\nconst signUp = createKrizakaForm({\n  schema: z.object({\n    email: z.email(),\n    username: z.string().min(3).max(30).regex(/^[a-z0-9_]+$/, \"signUp.username.format\"),\n    password: z.string().min(8),\n    dateOfBirth: z.iso.date().refine((d) => d <= latestBirthDate(18), \"form.errors.UNDERAGE\"),\n    acceptTerms: z.boolean().refine(Boolean, \"signUp.terms.required\"),\n  }),\n  defaultValues: { email: \"\", username: \"\", password: \"\", dateOfBirth: \"\", acceptTerms: false },\n});\nconst WORDS: Record<string, string> = { \"signUp.username.format\": \"Lowercase letters, digits and _ only.\", \"signUp.username.taken\": \"This username is taken.\", \"signUp.terms.required\": \"Accept the terms to continue.\", \"form.errors.UNDERAGE\": \"You must be 18 or older.\", \"form.errors.BIRTH_DATE_INVALID\": \"Enter your real date of birth.\", \"form.errors.USERNAME_RESERVED\": \"This username is reserved.\", \"apiErrors.ACCOUNT_EXISTS\": \"This e-mail already has an account. Sign in instead.\" };\nconst taken = (u: string) => new Promise<boolean>((done) => setTimeout(() => done([\"eric\", \"elena\"].includes(u)), 300));\nconst register = async (v: { email: string; username: string }) => { if (v.username === \"admin\") throw new KrizakaApiError({ status: 400, code: \"USERNAME_RESERVED\" }); if (v.email.endsWith(\"@orochia.com\")) throw new KrizakaApiError({ status: 409, code: \"ACCOUNT_EXISTS\" }); };\n\n// Sign-up in the app: the return key walks the fields, the username is checked as typed, the 18+ birth date is day · month · year.\nexport default function NativeFormSignUp() {\n  const form = signUp.useForm({ i18n: { t: (key) => WORDS[key], locale: \"en-GB\" }, codeFields: { UNDERAGE: \"dateOfBirth\", BIRTH_DATE_INVALID: \"dateOfBirth\", USERNAME_RESERVED: \"username\" }, onSubmit: register });\n  return (\n    <form.Form aria-label=\"Create your account\" style={{ width: 312 }}>\n      <form.TextField name=\"email\" label=\"E-mail\" keyboardType=\"email-address\" autoComplete=\"email\" autoCapitalize=\"none\" textContentType=\"emailAddress\" />\n      <form.TextField name=\"username\" label=\"Username\" autoCapitalize=\"none\" autoComplete=\"username\" transform={(v) => v.toLowerCase().replace(/\\s+/g, \"_\")} availableHint=\"Free\" validateAsync={async (u) => ((await taken(u)) ? { key: \"signUp.username.taken\", suggestion: { label: `Use @${u}_${u.length}`, value: `${u}_${u.length}` } } : null)} />\n      <form.TextField name=\"password\" label=\"Password\" secureTextEntry autoComplete=\"new-password\" textContentType=\"newPassword\" hint=\"At least 8 characters.\" />\n      <form.DateField name=\"dateOfBirth\" label=\"Date of birth\" autoComplete=\"bday\" hint=\"Private, never shown.\" />\n      <form.Checkbox name=\"acceptTerms\" label=\"I accept the terms and the privacy policy\" />\n      <form.FormError />\n      <form.Submit label=\"Create my account\" brand=\"orochia\" />\n    </form.Form>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/form/native/sign-up.dark.png",
+          "light": "examples/form/native/sign-up.light.png"
+        }
+      },
+      {
+        "name": "profile",
+        "title": "Profile",
+        "description": "Saved by a mutation of @krizaka/query; a category as chips, the list of links grows.",
+        "path": "examples/form/native/profile.tsx",
+        "module": "@krizaka/ui/registry/examples/form/native/profile",
+        "code": "import { KrizakaQueryProvider, useMutation } from \"@krizaka/query\";\nimport { Button } from \"@krizaka/ui/native\";\nimport { createKrizakaForm } from \"@krizaka/ui/native/form\";\nimport { z } from \"zod\";\n\nconst profile = createKrizakaForm({\n  schema: z.object({ displayName: z.string().min(2).max(40), bio: z.string().max(160), category: z.enum([\"travel\", \"music\", \"science\", \"sport\"]), links: z.array(z.object({ url: z.url() })).max(3) }),\n  defaultValues: { displayName: \"Elena Varga\", bio: \"Night skies over the Tatras.\", category: \"travel\" as \"travel\" | \"music\" | \"science\" | \"sport\", links: [{ url: \"https://elena.example\" }] },\n});\nconst CATEGORIES = [{ value: \"travel\", label: \"Travel\" }, { value: \"music\", label: \"Music\" }, { value: \"science\", label: \"Science\" }, { value: \"sport\", label: \"Sport\" }];\n\nfunction ProfileForm() {\n  const mutation = useMutation({ mutationFn: (values: unknown) => new Promise((done) => setTimeout(() => done(values), 400)) });\n  const form = profile.useForm({ onSubmit: (values) => mutation.mutateAsync(values) });\n  return (\n    <form.Form aria-label=\"Your profile\" style={{ width: 312 }}>\n      <form.TextField name=\"displayName\" label=\"Display name\" autoComplete=\"name\" />\n      <form.TextArea name=\"bio\" label=\"Bio\" maxLength={160} />\n      <form.RadioGroup name=\"category\" label=\"Category\" options={CATEGORIES} />\n      <form.FieldArray name=\"links\">\n        {(links) => (\n          <>\n            {links.items.map((_, i) => <form.TextField key={i} name={`links[${i}].url`} label={`Link ${i + 1}`} keyboardType=\"url\" autoCapitalize=\"none\" />)}\n            {links.items.length < 3 ? <Button label=\"Add a link\" variant=\"ghost\" size=\"sm\" onPress={() => links.push({ url: \"\" })} /> : null}\n          </>\n        )}\n      </form.FieldArray>\n      <form.Submit label=\"Save the profile\" />\n    </form.Form>\n  );\n}\n\n// A profile saved by a mutation of @krizaka/query; the list of links grows.\nexport default function NativeFormProfile() {\n  return <KrizakaQueryProvider><ProfileForm /></KrizakaQueryProvider>;\n}\n",
+        "screenshots": {
+          "dark": "examples/form/native/profile.dark.png",
+          "light": "examples/form/native/profile.light.png"
+        }
+      },
+      {
+        "name": "upload",
+        "title": "Upload details",
+        "description": "Title, description and audience of a video picked from the library.",
+        "path": "examples/form/native/upload.tsx",
+        "module": "@krizaka/ui/registry/examples/form/native/upload",
+        "code": "import { createKrizakaForm } from \"@krizaka/ui/native/form\";\nimport { z } from \"zod\";\n\n// What describes a video picked from the library (the picker is the app's: expo-image-picker): title, description, audience.\nconst upload = createKrizakaForm({\n  schema: z.object({ title: z.string().min(3).max(100), description: z.string().max(2000), visibility: z.enum([\"public\", \"followers\", \"private\"]) }),\n  defaultValues: { title: \"Sunrise over Rysy\", description: \"\", visibility: \"public\" as \"public\" | \"followers\" | \"private\" },\n});\nconst VISIBILITY = [{ value: \"public\", label: \"Everyone\" }, { value: \"followers\", label: \"Followers\" }, { value: \"private\", label: \"Only me\" }];\n\n// The details of an upload, then the button that publishes them with the file.\nexport default function NativeFormUpload() {\n  const form = upload.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 600)) });\n  return (\n    <form.Form aria-label=\"Publish a video\" style={{ width: 312 }}>\n      <form.TextField name=\"title\" label=\"Title\" maxLength={100} />\n      <form.TextArea name=\"description\" label=\"Description\" placeholder=\"What happens in it?\" />\n      <form.RadioGroup name=\"visibility\" label=\"Who can watch\" options={VISIBILITY} />\n      <form.Submit label=\"Publish\" />\n    </form.Form>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/form/native/upload.dark.png",
+          "light": "examples/form/native/upload.light.png"
+        }
+      },
+      {
+        "name": "amount",
+        "title": "Amount",
+        "description": "A tip in cents on the decimal keypad, typed the French way; presets set the field.",
+        "path": "examples/form/native/amount.tsx",
+        "module": "@krizaka/ui/registry/examples/form/native/amount",
+        "code": "import { Chip } from \"@krizaka/ui/native\";\nimport { createKrizakaForm } from \"@krizaka/ui/native/form\";\nimport { z } from \"zod\";\n\nconst tip = createKrizakaForm({\n  schema: z.object({ amount: z.number({ message: \"tip.amount.invalid\" }).int().min(100, \"tip.amount.min\").max(50_000, \"tip.amount.max\"), message: z.string().max(140), anonymous: z.boolean() }),\n  defaultValues: { amount: 500, message: \"\", anonymous: false },\n  i18n: { t: (key) => ({ \"tip.amount.invalid\": \"Enter an amount.\", \"tip.amount.min\": \"At least €1.\", \"tip.amount.max\": \"At most €500.\" })[key], locale: \"fr-FR\" },\n});\nconst PRESETS = [200, 500, 1000];\n\n// A tip in cents on the decimal keypad, typed the locale's way (`12,50` in French); presets set the field from outside.\nexport default function NativeFormAmount() {\n  const form = tip.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 400)) });\n  return (\n    <form.Form aria-label=\"Send a tip\" style={{ width: 312 }}>\n      <form.Money name=\"amount\" label=\"Amount\" currency=\"EUR\" hint=\"Between €1 and €500.\" />\n      <form.Watch name=\"amount\">\n        {(amount) => (\n          <Chip.Group type=\"single\" aria-label=\"Suggested amounts\" value={String(amount)} onValueChange={(v) => form.setValue(\"amount\", Number(v))}>\n            {PRESETS.map((cents) => <Chip key={cents} value={String(cents)}>{`${cents / 100} €`}</Chip>)}\n          </Chip.Group>\n        )}\n      </form.Watch>\n      <form.TextArea name=\"message\" label=\"A word for the creator\" maxLength={140} />\n      <form.Checkbox name=\"anonymous\" label=\"Send it anonymously\" />\n      <form.Submit label=\"Send the tip\" />\n    </form.Form>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/form/native/amount.dark.png",
+          "light": "examples/form/native/amount.light.png"
+        }
+      },
+      {
+        "name": "audience",
+        "title": "Audience",
+        "description": "The price only when the video is for subscribers; comments on or off.",
+        "path": "examples/form/native/audience.tsx",
+        "module": "@krizaka/ui/registry/examples/form/native/audience",
+        "code": "import { createKrizakaForm } from \"@krizaka/ui/native/form\";\nimport { z } from \"zod\";\n\nconst audience = createKrizakaForm({\n  schema: z\n    .object({ audience: z.enum([\"everyone\", \"followers\", \"subscribers\"]), price: z.number().int().nullable(), comments: z.boolean() })\n    .refine((v) => v.audience !== \"subscribers\" || (v.price ?? 0) >= 100, { path: [\"price\"], message: \"audience.price.min\" }),\n  defaultValues: { audience: \"subscribers\" as \"everyone\" | \"followers\" | \"subscribers\", price: 499 as number | null, comments: true },\n  i18n: { t: (key) => (key === \"audience.price.min\" ? \"Subscribers pay at least $1.\" : undefined) },\n});\nconst AUDIENCES = [{ value: \"everyone\", label: \"Everyone\" }, { value: \"followers\", label: \"Followers\" }, { value: \"subscribers\", label: \"Subscribers\" }];\n\n// Who sees a video: the price only when it is for subscribers (`Watch`), comments on or off.\nexport default function NativeFormAudience() {\n  const form = audience.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 400)) });\n  return (\n    <form.Form aria-label=\"Audience\" style={{ width: 312 }}>\n      <form.RadioGroup name=\"audience\" label=\"Who can watch\" options={AUDIENCES} />\n      <form.Watch name=\"audience\">{(value) => (value === \"subscribers\" ? <form.Money name=\"price\" label=\"Price\" currency=\"USD\" /> : null)}</form.Watch>\n      <form.Switch name=\"comments\" label=\"Comments\" hint=\"Viewers can comment under the video.\" />\n      <form.Submit label=\"Save\" />\n    </form.Form>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/form/native/audience.dark.png",
+          "light": "examples/form/native/audience.light.png"
+        }
+      },
+      {
+        "name": "settings",
+        "title": "Settings",
+        "description": "The system's switches and chips for a choice, saved in one go.",
+        "path": "examples/form/native/settings.tsx",
+        "module": "@krizaka/ui/registry/examples/form/native/settings",
+        "code": "import { createKrizakaForm } from \"@krizaka/ui/native/form\";\nimport { z } from \"zod\";\n\nconst settings = createKrizakaForm({\n  schema: z.object({ language: z.enum([\"en\", \"fr\", \"es\"]), emailDigest: z.boolean(), pushMessages: z.boolean(), quality: z.enum([\"auto\", \"data-saver\", \"best\"]) }),\n  defaultValues: { language: \"en\" as \"en\" | \"fr\" | \"es\", emailDigest: true, pushMessages: false, quality: \"auto\" as \"auto\" | \"data-saver\" | \"best\" },\n});\nconst LANGUAGES = [{ value: \"en\", label: \"English\" }, { value: \"fr\", label: \"Français\" }, { value: \"es\", label: \"Español\" }];\nconst QUALITY = [{ value: \"auto\", label: \"Automatic\" }, { value: \"data-saver\", label: \"Data saver\" }, { value: \"best\", label: \"Best\" }];\n\n// The app's settings: the system's switches, chips for a choice — saved in one go.\nexport default function NativeFormSettings() {\n  const form = settings.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 400)) });\n  return (\n    <form.Form aria-label=\"Settings\" style={{ width: 312 }}>\n      <form.Select name=\"language\" label=\"Language\" options={LANGUAGES} />\n      <form.Switch name=\"emailDigest\" label=\"Weekly e-mail\" hint=\"What happened on your channel.\" />\n      <form.Switch name=\"pushMessages\" label=\"Message notifications\" />\n      <form.RadioGroup name=\"quality\" label=\"Video quality\" options={QUALITY} />\n      <form.Submit label=\"Save the settings\" />\n    </form.Form>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/form/native/settings.dark.png",
+          "light": "examples/form/native/settings.light.png"
+        }
+      }
+    ]
+  },
+  "files": [
+    {
+      "path": "form/core.tsx",
+      "content": "// Platform-neutral React (web and React Native): the engine of a Krizaka form, TanStack Form v1 behind the facade\n// (ADR-001: a product never imports @tanstack/*). A form = a Standard Schema (zod 4) + its default values; the schema\n// validates every change, an error shows once the person leaves the field or tries to send (and goes as soon as it is\n// fixed), a field may check a value on the server (debounced, aborted when the value changes), and a refusal of the\n// server (Problem Details `fields`) lands under its fields. The fields themselves are the platform's (web.tsx, native).\nimport { type AnyFieldApi, type AnyFormApi, type DeepKeys, type StandardSchemaV1, useField, useForm, useStore } from \"@tanstack/react-form\";\nimport * as React from \"react\";\n\nimport { type FormFieldError, type FormI18n, formMessage, type FormProblem, isFormProblem, issuesToFields, problemToErrors, type SchemaIssue } from \"./errors\";\n\n/** A schema the form validates with: any Standard Schema — zod 4 (`z.object`), valibot, arktype. */\nexport type FormSchema<Input = unknown, Output = Input> = StandardSchemaV1<Input, Output>;\n/** The values a form holds: the schema's input. */\nexport type FormValues<S> = S extends { readonly \"~standard\": { readonly types?: { readonly input: infer I } } } ? I : never;\n/** The values a form sends: the schema's output (zod transforms applied). */\nexport type FormOutput<S> = S extends { readonly \"~standard\": { readonly types?: { readonly output: infer O } } } ? O : never;\n/** A field's name: `email`, `address.city`, `links[0].url`. */\nexport type FieldName<V> = DeepKeys<V> & string;\n\n/** What a Server Action (or any submit) answers: done, or a refusal the form shows. */\nexport type FormActionResult<T = unknown> = { ok: true; data?: T } | { ok: false; problem: FormProblem };\n\n/** A value checked on the server as it is typed: an error (or its key), or nothing when the value is fine. */\nexport type FieldCheck<T = unknown> = (value: T, signal: AbortSignal) => Promise<FormFieldError | string | null | undefined> | FormFieldError | string | null | undefined;\n\nexport interface KrizakaFormDefinition<S extends FormSchema> {\n  /** The schema of the values (zod 4): the same one the server parses with. */\n  schema: S;\n  /** The values at first: every field of the schema. */\n  defaultValues: FormValues<S>;\n  /** The words: the app's translate function, the key prefixes, the locale. */\n  i18n?: FormI18n;\n}\n\nexport interface UseKrizakaFormOptions<S extends FormSchema, R = unknown> {\n  /** Sends the values (the schema's output): a mutation of @krizaka/query, a Server Action. Throw a `KrizakaApiError` or\n   * return `{ ok: false, problem }` to refuse: its `fields` go under their fields, the rest above the button. */\n  onSubmit?: (values: FormOutput<S>) => R | Promise<R>;\n  /** Called after a successful submit with what `onSubmit` returned (`data` of a `{ ok: true, data }`). */\n  onSuccess?: (result: R extends FormActionResult<infer T> ? T | undefined : R) => void;\n  /** Values that replace the definition's (a profile loaded from the server). */\n  defaultValues?: FormValues<S>;\n  /** Overrides the definition's words (the translate function of a hook). */\n  i18n?: FormI18n;\n  /** The server's codes that belong to a field (`{ UNDERAGE: \"dateOfBirth\", USERNAME_RESERVED: \"username\" }`): a refusal\n   * with that code shows under the field, as `form.errors.<CODE>`, instead of above the button. */\n  codeFields?: Readonly<Record<string, string>>;\n}\n\n/** The state of a form, for its fields and its button. */\nexport interface FormContextValue {\n  /** TanStack's form, through the facade: never import @tanstack/* in a product. */\n  readonly api: AnyFormApi;\n  readonly i18n: FormI18n;\n  /** The whole form's error (a refusal without a field), or null. */\n  readonly error: FormFieldError | null;\n  /** Sends the form: validates, focuses (web) or announces (native) the first error, else calls `onSubmit`. */\n  readonly submit: () => Promise<boolean>;\n}\n\nexport const FormContext = React.createContext<FormContextValue | null>(null);\n\n/** The form around a field: inside `form.Form`. */\nexport function useFormContext(): FormContextValue {\n  const ctx = React.useContext(FormContext);\n  if (!ctx) throw new Error(\"A Krizaka form field must be inside its form's `form.Form`.\");\n  return ctx;\n}\n\ntype StandardResult = { readonly value?: unknown; readonly issues?: readonly SchemaIssue[] };\n\nconst run = (schema: FormSchema, value: unknown) => schema[\"~standard\"].validate(value) as StandardResult | Promise<StandardResult>;\n\n/** The engine of a form: TanStack's form wired to the schema, the server's refusals and the submit. */\nexport function useKrizakaFormCore<S extends FormSchema, R>(definition: KrizakaFormDefinition<S>, options: UseKrizakaFormOptions<S, R> = {}): FormContextValue {\n  const i18n = { ...definition.i18n, ...options.i18n };\n  const latest = React.useRef({ options, i18n });\n  // The latest options for the engine's callbacks (a submit, a change), which outlive the render that made them.\n  React.useLayoutEffect(() => {\n    latest.current = { options, i18n };\n  });\n  const [error, setError] = React.useState<FormFieldError | null>(null);\n  const refused = React.useRef(false);\n\n  const api = useForm({\n    defaultValues: options.defaultValues ?? definition.defaultValues,\n    validators: {\n      // Every change: the schema, synchronously (an async refinement waits for the submit). Errors are computed for\n      // every field; each field shows its own once the person left it or tried to send.\n      onChange: ({ value }: { value: unknown }) => {\n        const result = run(definition.schema, value);\n        if (result instanceof Promise || !result.issues?.length) return undefined;\n        const fields = issuesToFields(result.issues, latest.current.i18n.prefix);\n        delete fields[\"\"];\n        return { fields };\n      },\n    },\n    onSubmit: async ({ value }: { value: unknown }) => {\n      const parsed = await run(definition.schema, value);\n      if (parsed.issues?.length) {\n        apply({ fields: issuesToFields(parsed.issues, latest.current.i18n.prefix) as FormProblem[\"fields\"] });\n        return;\n      }\n      let result: unknown;\n      try {\n        result = await latest.current.options.onSubmit?.(parsed.value as FormOutput<S>);\n      } catch (thrown) {\n        apply(isFormProblem(thrown) ? thrown : { code: \"server\" });\n        return;\n      }\n      if (result && typeof result === \"object\" && \"ok\" in result && (result as FormActionResult).ok === false) {\n        apply((result as unknown as { problem: FormProblem }).problem);\n        return;\n      }\n      const data = result && typeof result === \"object\" && \"ok\" in result ? (result as { data?: unknown }).data : result;\n      latest.current.options.onSuccess?.(data as never);\n    },\n  });\n\n  const known = (name: string) => name in api.fieldInfo;\n  function apply(problem: FormProblem) {\n    refused.current = true;\n    const { fields, form } = problemToErrors(problem, latest.current.i18n, known, latest.current.options.codeFields);\n    for (const [name, fieldError] of Object.entries(fields)) {\n      api.setFieldMeta(name as never, (meta) => ({ ...meta, isBlurred: true, errorMap: { ...meta.errorMap, onServer: fieldError } }));\n    }\n    setError(form);\n  }\n\n  const submit = React.useCallback(async () => {\n    setError(null);\n    refused.current = false;\n    for (const name of Object.keys(api.fieldInfo)) {\n      if ((api.getFieldMeta(name as never) as { errorMap?: Record<string, unknown> } | undefined)?.errorMap?.onServer) api.setFieldMeta(name as never, (meta) => ({ ...meta, errorMap: { ...meta.errorMap, onServer: undefined } }));\n    }\n    await api.handleSubmit();\n    const state = api.state;\n    return !refused.current && state.isSubmitSuccessful && state.isValid && !(Object.values(state.fieldMeta) as { errorMap?: Record<string, unknown> }[]).some((meta) => meta?.errorMap?.onServer);\n  }, [api]);\n\n  return React.useMemo(() => ({ api, i18n, error, submit }), [api, error, submit, i18n.t, i18n.prefix, i18n.apiPrefix, i18n.locale]); // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nconst UNCHECKED = Symbol(\"unchecked\");\n\nexport interface FieldOptions<T> {\n  /** Checks the value on the server as it is typed (a username's availability): debounced, aborted when it changes. */\n  validateAsync?: FieldCheck<T>;\n  /** The wait, in ms, between the last change and `validateAsync`. Default 350. */\n  asyncDebounceMs?: number;\n}\n\n/** A field as its component draws it: the value, its setter, its error in words, its state. */\nexport interface KrizakaField<T = unknown> {\n  /** The id of the control (`htmlFor` of its label). */\n  readonly id: string;\n  readonly name: string;\n  readonly value: T;\n  /** Sets the value (clears a refusal of the server on it). */\n  setValue(value: T): void;\n  /** Call when the control loses focus: from then on, its errors show. */\n  readonly onBlur: () => void;\n  /** The error to show, in words — only once it should show. */\n  readonly error: string | undefined;\n  /** The error itself, with its suggestion. */\n  readonly errorDetail: FormFieldError | undefined;\n  /** A check (`validateAsync`) is running. */\n  readonly validating: boolean;\n  /** The check passed for the current value. */\n  readonly available: boolean;\n  /** The ids of the hint and the error (`aria-describedby`). */\n  readonly hintId: string;\n  readonly errorId: string;\n  /** The form's locale (numbers, money, dates). */\n  readonly locale: string;\n  /** TanStack's field, through the facade. */\n  readonly api: AnyFieldApi;\n}\n\n/** Binds a field of the form around it (inside `form.Form`): what the platform's field components are made of. */\nexport function useKrizakaField<T = unknown>(name: string, options: FieldOptions<T> = {}): KrizakaField<T> {\n  const ctx = useFormContext();\n  const id = React.useId();\n  const [checked, setChecked] = React.useState<unknown>(UNCHECKED);\n  const check = options.validateAsync;\n  const field = useField({\n    form: ctx.api,\n    name: name as never,\n    ...(check\n      ? {\n          asyncDebounceMs: options.asyncDebounceMs ?? 350,\n          validators: {\n            onChangeAsyncDebounceMs: options.asyncDebounceMs ?? 350,\n            onChangeAsync: async ({ value, signal }: { value: T; signal: AbortSignal }) => {\n              const answer = await check(value, signal);\n              if (signal.aborted) return undefined;\n              if (!answer) {\n                setChecked(value);\n                return undefined;\n              }\n              setChecked(UNCHECKED);\n              const error = typeof answer === \"string\" ? { key: answer } : answer;\n              return { ...error, immediate: true, source: \"check\" } satisfies FormFieldError;\n            },\n          },\n        }\n      : {}),\n  } as never) as unknown as AnyFieldApi;\n  const attempts = useStore(ctx.api.store, (state: { submissionAttempts: number }) => state.submissionAttempts);\n  const meta = field.state.meta;\n  const map = meta.errorMap as Record<string, unknown>;\n  const all = [map.onServer, map.onChange, map.onBlur, map.onSubmit, map.onMount].filter(Boolean) as (FormFieldError | string)[];\n  const first = all[0];\n  const detail = typeof first === \"string\" ? { key: first } : first;\n  const visible = detail && (detail.immediate || detail.source === \"server\" || meta.isBlurred || attempts > 0) ? detail : undefined;\n  const value = field.state.value as T;\n\n  return {\n    id,\n    name,\n    value,\n    setValue: (next: T) => {\n      if (map.onServer) ctx.api.setFieldMeta(name as never, (m: { errorMap: Record<string, unknown> }) => ({ ...m, errorMap: { ...m.errorMap, onServer: undefined } }) as never);\n      field.handleChange(next as never);\n    },\n    onBlur: () => field.handleBlur(),\n    error: visible ? formMessage(visible, ctx.i18n) : undefined,\n    errorDetail: visible,\n    validating: Boolean(meta.isValidating),\n    available: Boolean(check) && checked !== UNCHECKED && Object.is(checked, value) && !meta.isValidating && all.length === 0,\n    hintId: `${id}-hint`,\n    errorId: `${id}-error`,\n    locale: ctx.i18n.locale ?? \"en\",\n    api: field,\n  };\n}\n\n/** The array of a field array, with its operations (`form.FieldArray`). */\nexport interface KrizakaFieldArray<T = unknown> {\n  readonly name: string;\n  readonly items: readonly T[];\n  /** Adds an item at the end. */\n  readonly push: (item: T) => void;\n  /** Removes the item at `index`. */\n  readonly remove: (index: number) => void;\n  /** Moves an item. */\n  readonly move: (from: number, to: number) => void;\n  /** The name of a sub-field of an item: `name(0, \"url\")` → `links[0].url`. */\n  readonly fieldName: (index: number, key?: string) => string;\n  /** The error of the array itself (too few, too many), in words, once it should show. */\n  readonly error: string | undefined;\n}\n\n/** Binds an array of the form (a list of links, of tiers): its items and their operations. */\nexport function useKrizakaFieldArray<T = unknown>(name: string): KrizakaFieldArray<T> {\n  const ctx = useFormContext();\n  const field = useField({ form: ctx.api, name: name as never, mode: \"array\" } as never) as unknown as AnyFieldApi;\n  const attempts = useStore(ctx.api.store, (state: { submissionAttempts: number }) => state.submissionAttempts);\n  const map = field.state.meta.errorMap as Record<string, FormFieldError | undefined>;\n  const first = map.onServer ?? map.onChange ?? map.onSubmit;\n  return {\n    name,\n    items: (field.state.value as T[] | undefined) ?? [],\n    push: (item) => field.pushValue(item as never),\n    remove: (index) => void field.removeValue(index),\n    move: (from, to) => field.moveValue(from, to),\n    fieldName: (index, key) => `${name}[${index}]${key ? `.${key}` : \"\"}`,\n    error: first && (attempts > 0 || first.source === \"server\" || field.state.meta.isDirty) ? formMessage(first, ctx.i18n) : undefined,\n  };\n}\n\n/** The value of a field, kept up to date (`form.Watch`): show a part of the form only when a box is ticked. */\nexport function useFormValue<T = unknown>(name: string): T {\n  const ctx = useFormContext();\n  return useStore(ctx.api.store, (state: { values: unknown }) => getPath(state.values, name)) as T;\n}\n\n/** The state of the submit, for a button: sending, and whether the last try succeeded. */\nexport function useFormStatus(): { submitting: boolean; succeeded: boolean; attempts: number } {\n  const ctx = useFormContext();\n  const submitting = useStore(ctx.api.store, (s: { isSubmitting: boolean }) => s.isSubmitting);\n  const succeeded = useStore(ctx.api.store, (s: { isSubmitSuccessful: boolean }) => s.isSubmitSuccessful);\n  const attempts = useStore(ctx.api.store, (s: { submissionAttempts: number }) => s.submissionAttempts);\n  return { submitting, succeeded: succeeded && !ctx.error, attempts };\n}\n\nfunction getPath(source: unknown, path: string): unknown {\n  let current = source;\n  for (const part of path.replace(/\\[(\\d+)\\]/g, \".$1\").split(\".\")) {\n    if (current === null || typeof current !== \"object\") return undefined;\n    current = (current as Record<string, unknown>)[part];\n  }\n  return current;\n}\n\n/** The first visible error of a form, in words (native: announced after a refused submit). */\nexport function firstVisibleError(ctx: FormContextValue): string | undefined {\n  if (ctx.error) return formMessage(ctx.error, ctx.i18n);\n  for (const meta of Object.values(ctx.api.state.fieldMeta) as { errorMap?: Record<string, FormFieldError | string | undefined> }[]) {\n    const error = meta?.errorMap && Object.values(meta.errorMap).find(Boolean);\n    if (error) return formMessage(error, ctx.i18n);\n  }\n  return undefined;\n}\n\n/** The platform's components, typed by the form's field names: `name` completes and is checked against the schema. */\nexport type BoundFields<C, N extends string> = {\n  [K in keyof C]: C[K] extends (props: infer P) => infer R ? (P extends { name: string } ? (props: Omit<P, \"name\"> & { name: N }) => R : C[K]) : C[K];\n};\n\n/** A form in a component: its fields (typed by the schema), its submit and its state. */\nexport type KrizakaFormInstance<S extends FormSchema, C, RootProps> = BoundFields<C, FieldName<FormValues<S>>> & {\n  /** The form element (web) or view (native): renders its fields and provides them the form. */\n  Form: (props: RootProps) => React.ReactElement;\n  /** Sends the form (what `Submit` does): `true` when it went through. */\n  submit: () => Promise<boolean>;\n  /** Back to the default values (or the given ones), errors cleared. */\n  reset: (values?: FormValues<S>) => void;\n  /** Sets a field's value from outside (a suggestion, a preset). */\n  setValue: (name: FieldName<FormValues<S>>, value: unknown) => void;\n  /** The values now. */\n  getValues: () => FormValues<S>;\n  /** The whole form's error (a refusal without a field), or null. */\n  error: FormFieldError | null;\n  /** TanStack's form, the escape hatch — never import @tanstack/* in a product. */\n  api: AnyFormApi;\n};\n\n/** A form defined once (schema + defaults), used in components: `signUp.useForm({ onSubmit })`. */\nexport interface KrizakaFormFactory<S extends FormSchema, C, RootProps> {\n  readonly schema: S;\n  readonly defaultValues: FormValues<S>;\n  /** The form in a component: `onSubmit` sends the values (a mutation), a thrown `KrizakaApiError` lands on the fields. */\n  useForm<R = unknown>(options?: UseKrizakaFormOptions<S, R>): KrizakaFormInstance<S, C, RootProps>;\n  /** The form sent by a Server Action: it receives the values and answers `{ ok: true, data }` or `{ ok: false, problem }`. */\n  useFormWithAction<T = unknown>(action: (values: FormOutput<S>) => Promise<FormActionResult<T>>, options?: Omit<UseKrizakaFormOptions<S, FormActionResult<T>>, \"onSubmit\">): KrizakaFormInstance<S, C, RootProps>;\n}\n\n/** Builds a platform's `createKrizakaForm` from its field components and its root (web `<form>`, native `View`). */\nexport function makeCreateKrizakaForm<C extends object, RootProps extends object>(components: C, Root: (props: RootProps & { value: FormContextValue }) => React.ReactElement) {\n  return function createKrizakaForm<S extends FormSchema>(definition: KrizakaFormDefinition<S>): KrizakaFormFactory<S, C, RootProps> {\n    function useForm<R>(options?: UseKrizakaFormOptions<S, R>): KrizakaFormInstance<S, C, RootProps> {\n      const ctx = useKrizakaFormCore(definition, options);\n      // One `Form` for the life of the form (never remounted, so focus and fields stay): it reads the latest state from a\n      // small store the hook updates.\n      const [store] = React.useState(() => createStore(ctx));\n      React.useLayoutEffect(() => store.set(ctx), [store, ctx]);\n      const Form = React.useCallback((props: RootProps) => <Bound store={store} Root={Root} props={props} />, [store]);\n      return React.useMemo(\n        () =>\n          ({\n            ...components,\n            Form,\n            submit: ctx.submit,\n            reset: (values?: FormValues<S>) => ctx.api.reset(values),\n            setValue: (name: string, value: unknown) => ctx.api.setFieldValue(name as never, value as never),\n            getValues: () => ctx.api.state.values as FormValues<S>,\n            error: ctx.error,\n            api: ctx.api,\n          }) as unknown as KrizakaFormInstance<S, C, RootProps>,\n        [ctx, Form],\n      );\n    }\n    return {\n      schema: definition.schema,\n      defaultValues: definition.defaultValues,\n      useForm,\n      useFormWithAction: (action, options) => useForm({ ...options, onSubmit: action }),\n    };\n  };\n}\n\ntype Store<T> = { get: () => T; set: (value: T) => void; subscribe: (listener: () => void) => () => void };\n\nfunction createStore<T>(initial: T): Store<T> {\n  let value = initial;\n  const listeners = new Set<() => void>();\n  return {\n    get: () => value,\n    set: (next) => {\n      if (Object.is(next, value)) return;\n      value = next;\n      listeners.forEach((listener) => listener());\n    },\n    subscribe: (listener) => {\n      listeners.add(listener);\n      return () => listeners.delete(listener);\n    },\n  };\n}\n\nfunction Bound<RootProps extends object>({ store, Root, props }: { store: Store<FormContextValue>; Root: (props: RootProps & { value: FormContextValue }) => React.ReactElement; props: RootProps }) {\n  const value = React.useSyncExternalStore(store.subscribe, store.get, store.get);\n  return <Root {...props} value={value} />;\n}\n"
+    },
+    {
+      "path": "form/errors.ts",
+      "content": "// Platform-neutral and server-safe: no React, no DOM, no React Native. The errors of a Krizaka form — a schema's issues,\n// a server's Problem Details, an availability check — as one shape, `FormFieldError`, whose words come from a key of the\n// app's catalogue (`form.errors.tooShort`), never from the validation engine's English.\n\n/** A value a message placeholder takes (`{minimum}`, `{suggestion}`). */\nexport type FormMessageValue = string | number;\n\n/** An error of a field or of the whole form: the key of its words in the app's catalogue, and what fills them in. */\nexport interface FormFieldError {\n  /** The i18n key: `form.errors.required`, or the key a schema names (`z.string().min(3, \"signUp.username.short\")`). */\n  key: string;\n  /** The placeholders of the message (`{ minimum: 3 }`). */\n  values?: Readonly<Record<string, FormMessageValue>>;\n  /** The server's own words, in English: shown only when the catalogue has no message for the key. */\n  message?: string;\n  /** A value to offer instead (a free username): a button under the error sets it. Its label is passed translated. */\n  suggestion?: { readonly label: string; readonly value: unknown };\n  /** Shown at once, while the person types (an availability check), not only once they leave the field. */\n  immediate?: boolean;\n  /** Where it comes from: the schema (default), a field's check, or the server's answer (kept until the field changes). */\n  source?: \"schema\" | \"check\" | \"server\";\n}\n\n/** The English defaults of the generic errors, by code — the words a form shows when the app's catalogue has none. */\nexport const formMessages: Readonly<Record<string, string>> = {\n  required: \"This field is required.\",\n  tooShort: \"Use at least {minimum} characters.\",\n  tooLong: \"Use at most {maximum} characters.\",\n  tooSmall: \"Enter {minimum} or more.\",\n  tooBig: \"Enter {maximum} or less.\",\n  tooFew: \"Choose at least {minimum}.\",\n  tooMany: \"Choose at most {maximum}.\",\n  invalidEmail: \"Enter an e-mail address, like name@example.com.\",\n  invalidUrl: \"Enter a web address, like https://example.com.\",\n  invalidDate: \"Enter a real date.\",\n  invalidNumber: \"Enter a number.\",\n  invalidFormat: \"Check the format of this field.\",\n  invalidChoice: \"Choose one of the options.\",\n  invalid: \"Check this field.\",\n  // The whole form (a server's answer without fields): the codes of @krizaka/query's KrizakaApiError.\n  network: \"No connection. Check your network and try again.\",\n  \"rate-limited\": \"Too many tries. Wait a moment and try again.\",\n  unauthorized: \"Your session has ended. Sign in again.\",\n  forbidden: \"You are not allowed to do this.\",\n  conflict: \"This was changed meanwhile. Reload and try again.\",\n  \"validation-failed\": \"Some fields need your attention.\",\n  unavailable: \"The service is unavailable for a moment. Try again shortly.\",\n  server: \"Something went wrong on our side. Try again.\",\n};\n\n/** How a form finds its words: the app's translate function, and the prefixes of its keys. */\nexport interface FormI18n {\n  /** The app's translate function (`(key, values) => t(key, values)`): a string, or `undefined` when the key is missing. */\n  t?: (key: string, values?: Readonly<Record<string, FormMessageValue>>) => string | undefined;\n  /** The prefix of the generic field errors. Default `form.errors` (→ `form.errors.tooShort`). */\n  prefix?: string;\n  /** The prefix of the server's codes for the whole form, as `KrizakaApiError.messageKey()`. Default `apiErrors`. */\n  apiPrefix?: string;\n  /** The locale of numbers, money and dates. Default `en`. */\n  locale?: string;\n}\n\nconst KEY = /^[\\w-]+(\\.[\\w-]+)+$/;\n\nconst fill = (text: string, values?: Readonly<Record<string, FormMessageValue>>) =>\n  values ? text.replace(/\\{(\\w+)\\}/g, (all, name: string) => (values[name] === undefined ? all : String(values[name]))) : text;\n\n/** The words of an error: the app's catalogue, else the English default of its code, else the server's words, else the key. */\nexport function formMessage(error: FormFieldError | string, i18n: FormI18n = {}): string {\n  const e = typeof error === \"string\" ? { key: error } : error;\n  const translated = i18n.t?.(e.key, e.values);\n  if (translated && translated !== e.key) return translated;\n  const code = e.key.slice(e.key.lastIndexOf(\".\") + 1);\n  const fallback = formMessages[code];\n  // The server's words beat a generic default (a refusal without a code), never a default for its own code.\n  if (e.message && (code === \"invalid\" || !fallback)) return e.message;\n  if (fallback && (e.key.startsWith(`${i18n.prefix ?? \"form.errors\"}.`) || e.key.startsWith(`${i18n.apiPrefix ?? \"apiErrors\"}.`))) return fill(fallback, e.values);\n  return e.message ?? (KEY.test(e.key) ? fill(fallback ?? formMessages.invalid!, e.values) : e.key);\n}\n\n/** One issue of a Standard Schema (zod 4, valibot, arktype): zod adds its `code` and limits, read when present. */\nexport interface SchemaIssue {\n  readonly message: string;\n  readonly path?: ReadonlyArray<PropertyKey | { readonly key: PropertyKey }>;\n  readonly code?: string;\n  readonly minimum?: number | bigint;\n  readonly maximum?: number | bigint;\n  readonly origin?: string;\n  readonly format?: string;\n  readonly input?: unknown;\n  readonly expected?: string;\n}\n\n/** A field's name from an issue's path, as the form writes it: `links[0].url`. */\nexport function pathName(path: SchemaIssue[\"path\"]): string {\n  let name = \"\";\n  for (const part of path ?? []) {\n    const key = typeof part === \"object\" && part !== null ? part.key : part;\n    if (typeof key === \"number\") name += `[${key}]`;\n    else name += name ? `.${String(key)}` : String(key);\n  }\n  return name;\n}\n\nconst num = (value: number | bigint | undefined) => (value === undefined ? undefined : Number(value));\n\n/** The key and values of an issue: the schema's own key when it names one, else the generic code of what failed. */\nexport function issueError(issue: SchemaIssue, prefix = \"form.errors\"): FormFieldError {\n  if (KEY.test(issue.message)) return { key: issue.message };\n  const key = (code: string, values?: Record<string, FormMessageValue>) => ({ key: `${prefix}.${code}`, ...(values ? { values } : {}) });\n  const collection = issue.origin === \"array\" || issue.origin === \"set\";\n  switch (issue.code) {\n    case \"invalid_type\":\n      return issue.input === undefined || issue.input === null || issue.input === \"\" ? key(\"required\") : issue.expected === \"number\" ? key(\"invalidNumber\") : issue.expected === \"date\" ? key(\"invalidDate\") : key(\"invalid\");\n    case \"too_small\": {\n      const minimum = num(issue.minimum)!;\n      if (issue.origin === \"string\") return minimum <= 1 ? key(\"required\") : key(\"tooShort\", { minimum });\n      if (collection) return minimum <= 1 ? key(\"required\") : key(\"tooFew\", { minimum });\n      return key(\"tooSmall\", { minimum });\n    }\n    case \"too_big\": {\n      const maximum = num(issue.maximum)!;\n      return issue.origin === \"string\" ? key(\"tooLong\", { maximum }) : collection ? key(\"tooMany\", { maximum }) : key(\"tooBig\", { maximum });\n    }\n    case \"invalid_format\":\n      if (issue.format === \"email\") return key(\"invalidEmail\");\n      if (issue.format === \"url\") return key(\"invalidUrl\");\n      if (issue.format === \"date\" || issue.format === \"datetime\") return key(\"invalidDate\");\n      return key(\"invalidFormat\");\n    case \"invalid_value\":\n      // `z.literal(true)`: a box that must be ticked.\n      return issue.input === false || issue.input === undefined ? key(\"required\") : key(\"invalidChoice\");\n    case \"invalid_union\":\n    case \"invalid_key\":\n    case \"invalid_element\":\n      return key(\"invalidChoice\");\n    default:\n      return key(\"invalid\");\n  }\n}\n\n/** The first error of each field of a schema's issues (an issue without a path is the whole form's: `\"\"`). */\nexport function issuesToFields(issues: readonly SchemaIssue[], prefix?: string): Record<string, FormFieldError> {\n  const fields: Record<string, FormFieldError> = {};\n  for (const issue of issues) {\n    const name = pathName(issue.path);\n    if (!(name in fields)) fields[name] = { ...issueError(issue, prefix), source: \"schema\" };\n  }\n  return fields;\n}\n\n/**\n * A refusal the form shows, serialisable (a Server Action returns it): the shape of `KrizakaApiError` of @krizaka/query —\n * a `KrizakaApiError` *is* a `FormProblem`. `fields` go under their fields, the rest above the submit button.\n */\nexport interface FormProblem {\n  /** The HTTP status (0 when no response arrived). */\n  status?: number;\n  /** The stable code of the refusal (`rate-limited`, `conflict`, `ACCOUNT_EXISTS`): the key of its words. */\n  code?: string;\n  /** The server's sentence, in English: shown only when the catalogue has no message for the code. */\n  detail?: string;\n  /** The refused fields, by name: a server's `{ code, message }`, or an error the form already knows (`key`). */\n  fields?: Readonly<Record<string, { code?: string; message: string } | FormFieldError | string>>;\n  /** Epoch ms before which the same call is refused (a 429). */\n  retryAt?: number;\n}\n\n/** True for what a form can read as a problem: a `KrizakaApiError`, a `FormProblem`, an `{ ok: false, problem }` result. */\nexport function isFormProblem(value: unknown): value is FormProblem {\n  return typeof value === \"object\" && value !== null && (\"fields\" in value || \"code\" in value || \"status\" in value);\n}\n\n/** A problem as field errors (by name) and the whole form's error (or `null` when every refusal has its field). */\nexport function problemToErrors(\n  problem: FormProblem,\n  i18n: FormI18n = {},\n  known?: (name: string) => boolean,\n  codeFields: Readonly<Record<string, string>> = {},\n): { fields: Record<string, FormFieldError>; form: FormFieldError | null } {\n  const prefix = i18n.prefix ?? \"form.errors\";\n  const fields: Record<string, FormFieldError> = {};\n  let unplaced = false;\n  // A refusal named by a code that belongs to a field (`UNDERAGE` → `dateOfBirth`): under that field, in its words.\n  const owner = problem.code ? codeFields[problem.code] : undefined;\n  if (owner && (!known || known(owner)) && !problem.fields?.[owner]) {\n    fields[owner] = { key: `${prefix}.${problem.code}`, ...(problem.detail ? { message: problem.detail } : {}), source: \"server\" };\n    if (!problem.fields || Object.keys(problem.fields).length === 0) return { fields, form: null };\n  }\n  for (const [name, refusal] of Object.entries(problem.fields ?? {})) {\n    if (known && !known(name)) {\n      unplaced = true;\n      continue;\n    }\n    const error: FormFieldError =\n      typeof refusal === \"string\"\n        ? { key: refusal }\n        : \"key\" in refusal\n          ? refusal\n          : { key: refusal.code ? (KEY.test(refusal.code) ? refusal.code : `${prefix}.${refusal.code}`) : `${prefix}.invalid`, message: refusal.message };\n    fields[name] = { ...error, source: \"server\" };\n  }\n  const placed = Object.keys(fields).length > 0;\n  if (placed && !unplaced) return { fields, form: null };\n  const code = problem.code ?? (problem.status === 0 ? \"network\" : problem.status && problem.status >= 500 ? \"server\" : \"invalid\");\n  const retryIn = problem.retryAt ? Math.max(1, Math.ceil((problem.retryAt - Date.now()) / 1000)) : undefined;\n  return {\n    fields,\n    form: { key: KEY.test(code) ? code : `${i18n.apiPrefix ?? \"apiErrors\"}.${code}`, ...(problem.detail ? { message: problem.detail } : {}), ...(retryIn ? { values: { seconds: retryIn } } : {}), source: \"server\" },\n  };\n}\n"
+    },
+    {
+      "path": "form/index.ts",
+      "content": "/**\n * @krizaka/ui/form — a form = a schema (zod 4) + the package's fields, on TanStack Form v1 behind the facade:\n * `createKrizakaForm`, `useFormWithAction`, the fields (`TextField`, `TextArea`, `Checkbox`, `Switch`, `RadioGroup`,\n * `Select`, `Combobox`, `DateField`, `TagInput`, `FileUpload`, `Money`, `Slider`), `Submit`, `FormError`, `FormField`,\n * `FieldArray`, `Watch`, the hooks to draw a field of your own, and the errors' words. Client (\"use client\"). The server\n * side (a Server Action re-validating with the same schema) is `@krizaka/ui/form/server`.\n */\nexport { composeDate, datePartsOrder, isRealDate, latestBirthDate } from \"../date-picker/parts\";\nexport {\n  type FieldCheck,\n  type FieldName,\n  type FieldOptions,\n  type FormActionResult,\n  type FormContextValue,\n  type FormOutput,\n  type FormSchema,\n  type FormValues,\n  type KrizakaField,\n  type KrizakaFieldArray,\n  type KrizakaFormDefinition,\n  type KrizakaFormFactory,\n  type KrizakaFormInstance,\n  useFormContext,\n  useFormStatus,\n  useFormValue,\n  useKrizakaField,\n  useKrizakaFieldArray,\n  type UseKrizakaFormOptions,\n} from \"./core\";\nexport { type FormFieldError, type FormI18n, formMessage, formMessages, type FormMessageValue, type FormProblem, issueError, issuesToFields, problemToErrors } from \"./errors\";\nexport { currencySymbol, moneyInputText, parseMoney } from \"./money\";\nexport {\n  Checkbox,\n  type CheckboxProps,\n  Combobox,\n  type ComboboxProps,\n  createKrizakaForm,\n  DateField,\n  type DateFieldProps,\n  FieldArray,\n  type FieldArrayProps,\n  FileUpload,\n  type FileUploadProps,\n  FormError,\n  type FormErrorProps,\n  FormField,\n  type FormFieldProps,\n  type FormOption,\n  type FormProps,\n  Money,\n  type MoneyProps,\n  RadioGroup,\n  type RadioGroupProps,\n  Select,\n  type SelectProps,\n  Slider,\n  type SliderProps,\n  Submit,\n  type SubmitProps,\n  Switch,\n  TagInput,\n  type TagsProps,\n  TextArea,\n  type TextAreaProps,\n  TextField,\n  type TextFieldProps,\n  useFormWithAction,\n  Watch,\n  type WatchProps,\n} from \"./web\";\n"
+    },
+    {
+      "path": "form/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Form\",\n  summary:\n    \"A form = a schema (zod 4) + the package's fields, on TanStack Form v1: each error shows once the field is left and goes as soon as it is fixed, in the person's language (i18n keys, never the engine's English), a value can be checked on the server as it is typed, and the server's refusals land under their fields — web and React Native, the same schema.\",\n  status: \"beta\",\n  category: \"forms\",\n  platforms: \"both\",\n  whenToUse: [\n    \"Any form that sends something: sign-up, profile, upload details, an amount, an audience, a report, settings.\",\n    \"When the server must re-check the same rules: the schema is shared (a product keeps it in `packages/core`) and `@krizaka/ui/form/server` parses with it in a Server Action.\",\n    \"When a value depends on the server (a username's availability): `validateAsync` on the field, debounced and aborted.\",\n  ],\n  whenNotToUse: [\n    { when: \"For a single search box that filters as you type: no submit, no validation.\", use: \"search-field\" },\n    { when: \"For a filter bar over a list: its state is the address, not a form.\", use: \"filter-bar\" },\n    { when: \"For a setting that applies at once on its own (a theme switch): the control alone.\", use: \"switch\" },\n  ],\n  bestPractices: [\n    \"Define the form once (`createKrizakaForm({ schema, defaultValues })`) beside the API's contract; use it in components with `form.useForm({ onSubmit })`.\",\n    \"Name refusals with keys in the schema (`z.string().regex(re, \\\"signUp.username.format\\\")`) and give the words in `messages/*.json`; the generic ones are `form.errors.*` (required, tooShort {minimum}…).\",\n    \"Send with a mutation of @krizaka/query (`onSubmit: (v) => mutation.mutateAsync(v)`) or a Server Action (`useFormWithAction`): a thrown `KrizakaApiError` or `{ ok: false, problem }` puts its `fields` under their fields.\",\n    \"Never disable the submit button for an invalid form: a refused submit shows every error and focuses the first.\",\n    \"Pick the field for the value: `DateField entry=\\\"parts\\\"` for a memorable date (a birth date), the calendar for a date near today; `Money` stores cents; `RadioGroup` for two to five visible choices, `Select` beyond.\",\n    \"Need a control the package does not have? `form.Field` gives its value, setter, error and ids — never import @tanstack/* in a product.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Enter\", action: \"Sends the form from a text field (web); the keyboard's return key moves to the next field (native).\" },\n      { keys: \"Tab\", action: \"Leaves a field: from then on its error shows, and goes as soon as it is fixed.\" },\n    ],\n    notes: [\n      \"Every control is named by its visible label; its hint and its error are in `aria-describedby`, and an invalid control has `aria-invalid`.\",\n      \"Errors are announced (`role=\\\"alert\\\"`); a refused submit focuses the first invalid field on the web and announces the first error on native.\",\n      \"An availability check names its wait (`checkingLabel`) and says when the value is free (`availableHint`): never by colour alone.\",\n      \"A date of birth is three labelled boxes in the locale's order with numeric keypads and `bday` autofill, not a calendar to scroll through decades.\",\n    ],\n  },\n  related: [\"field\", \"checkbox\", \"switch\", \"radio-group\", \"combobox\", \"date-picker\", \"tag-input\", \"file-upload\", \"slider\"],\n  web: {\n    imports: [\"createKrizakaForm\", \"useFormWithAction\", \"latestBirthDate\", \"useKrizakaField\", \"formMessage\"],\n    examples: [\n      { name: \"sign-up\", title: \"Sign-up\", description: \"Orochia's sign-up: a username checked as it is typed with a free one offered, an 18+ date of birth typed as day · month · year, a server refusal on its field.\" },\n      { name: \"profile\", title: \"Profile\", description: \"Saved by a mutation of @krizaka/query: categories, tags, a list of links that grows (`form.FieldArray`).\" },\n      { name: \"upload\", title: \"Upload\", description: \"A video and what describes it — the file, a title, a description, tags, who can watch — sent together.\" },\n      { name: \"amount\", title: \"Amount\", description: \"A tip stored in cents (`Money`), typed the locale's way; presets set the field from outside.\" },\n      { name: \"audience\", title: \"Audience\", description: \"Cards to choose who watches, the price only for subscribers (`form.Watch`), a publication date.\" },\n      { name: \"settings\", title: \"Settings\", description: \"Sent by a Server Action (`useFormWithAction`): switches, a menu, a slider, a choice.\" },\n      { name: \"report\", title: \"Report\", description: \"One reason among a few, details, and blocking the account in the same step.\" },\n    ],\n  },\n  native: {\n    entry: \"@krizaka/ui/native/form\",\n    imports: [\"createKrizakaForm\", \"TextField\", \"DateField\", \"Money\", \"Submit\", \"FormError\"],\n    differences: [\n      \"Import `createKrizakaForm` from `@krizaka/ui/native/form`: the same definition (schema, defaults, i18n), the same `useForm`, `form.*` fields drawn with the native ones.\",\n      \"`form.Form` is a View; `form.Submit` takes `label` and announces the first error of a refused submit (no focus to move).\",\n      \"`DateField` is always day · month · year; `RadioGroup` and `Select` are chips (a radio group); `Switch` is the system's; `Money` uses the decimal keypad.\",\n      \"No `Combobox`, `TagInput`, `FileUpload` or `Slider` field yet: a screen of its own (a picker) sets the value, or `form.Field` draws it.\",\n    ],\n    examples: [\n      { name: \"sign-up\", title: \"Sign-up\", description: \"E-mail, a username checked as it is typed, the 18+ birth date as day · month · year, the terms.\" },\n      { name: \"profile\", title: \"Profile\", description: \"Saved by a mutation of @krizaka/query; a category as chips, the list of links grows.\" },\n      { name: \"upload\", title: \"Upload details\", description: \"Title, description and audience of a video picked from the library.\" },\n      { name: \"amount\", title: \"Amount\", description: \"A tip in cents on the decimal keypad, typed the French way; presets set the field.\" },\n      { name: \"audience\", title: \"Audience\", description: \"The price only when the video is for subscribers; comments on or off.\" },\n      { name: \"settings\", title: \"Settings\", description: \"The system's switches and chips for a choice, saved in one go.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "form/money.ts",
+      "content": "// Platform-neutral: an amount typed in a field ↔ integer minor units (cents), never a float on the way.\nimport { currencyDigits } from \"@krizaka/intl\";\n\n/** The decimal separator of a locale (`en` → `.`, `fr` → `,`). */\nexport function decimalSeparator(locale: string): string {\n  return new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === \"decimal\")?.value ?? \".\";\n}\n\n/** The currency's sign in a locale (`USD`, `en-US` → `$`; `EUR`, `fr` → `€`). */\nexport function currencySymbol(currency: string, locale: string): string {\n  return new Intl.NumberFormat(locale, { style: \"currency\", currency }).formatToParts(0).find((p) => p.type === \"currency\")?.value ?? currency;\n}\n\n/**\n * An amount as typed (`12.5`, `12,50`, `1,234.56`, `1 234,56`) → integer minor units (`1250`). `undefined` when empty,\n * `null` when it is not an amount (letters, more decimals than the currency has).\n */\nexport function parseMoney(text: string, currency: string, locale = \"en\"): number | null | undefined {\n  const digits = currencyDigits(currency);\n  const t = text.replace(/[\\s\\u00a0\\u202f']/g, \"\");\n  if (!t) return undefined;\n  const negative = t.startsWith(\"-\");\n  const body = negative ? t.slice(1) : t;\n  if (!/^[\\d.,]+$/.test(body)) return null;\n  let int = body;\n  let frac = \"\";\n  const last = Math.max(body.lastIndexOf(\".\"), body.lastIndexOf(\",\"));\n  if (last >= 0) {\n    const tail = body.slice(last + 1);\n    // The last separator is the decimal one when it is the locale's, or when it is not followed by a group of three.\n    if (body[last] === decimalSeparator(locale) || tail.length !== 3) {\n      if (tail.length > digits || !/^\\d*$/.test(tail)) return null;\n      int = body.slice(0, last);\n      frac = tail;\n    }\n  }\n  // What is left before the decimals: digits, grouped by three when separated (`1,234,567`).\n  if (!/^(\\d*|\\d{1,3}([.,]\\d{3})+)$/.test(int)) return null;\n  int = int.replace(/[.,]/g, \"\");\n  if (!int && !frac) return null;\n  const units = BigInt(int || \"0\") * 10n ** BigInt(digits) + BigInt((frac || \"\").padEnd(digits, \"0\") || \"0\");\n  const value = Number(negative ? -units : units);\n  return Number.isSafeInteger(value) ? value : null;\n}\n\n/** Minor units as the field writes them while editing (`1250`, `USD`, `fr` → `12,50`): no symbol, no grouping. */\nexport function moneyInputText(minorUnits: number | null | undefined, currency: string, locale = \"en\"): string {\n  if (minorUnits === null || minorUnits === undefined || !Number.isFinite(minorUnits)) return \"\";\n  const digits = currencyDigits(currency);\n  const sign = minorUnits < 0 ? \"-\" : \"\";\n  const abs = String(Math.abs(Math.trunc(minorUnits))).padStart(digits + 1, \"0\");\n  return digits === 0 ? sign + abs : `${sign}${abs.slice(0, -digits)}${decimalSeparator(locale)}${abs.slice(-digits)}`;\n}\n"
+    },
+    {
+      "path": "form/server.ts",
+      "content": "/**\n * @krizaka/ui/form/server — the server side of a Krizaka form, for a Server Action or a route handler (no \"use client\",\n * no React): `validateForm` parses with the form's own schema and answers the errors with the same keys the form shows,\n * `formProblem` turns a thrown error (a `KrizakaApiError` of @krizaka/query) into the serialisable refusal a form reads.\n */\nimport { type FormFieldError, type FormProblem, issuesToFields, type SchemaIssue } from \"./errors\";\n\nexport type { FormFieldError, FormProblem } from \"./errors\";\n\n/** What a Server Action answers a form: done (with what it made), or a refusal (`fields` under their fields). */\nexport type FormActionResult<T = unknown> = { ok: true; data?: T } | { ok: false; problem: FormProblem };\n\ntype Schema<O> = { readonly \"~standard\": { validate: (value: unknown) => { value?: O; issues?: readonly SchemaIssue[] } | Promise<{ value?: O; issues?: readonly SchemaIssue[] }> } };\n\n/**\n * Parses what a form sent with its schema (never trust the client): the value, or a `validation-failed` problem whose\n * fields carry the keys the form would show (`form.errors.tooShort`, the schema's own keys).\n */\nexport async function validateForm<O>(schema: Schema<O>, input: unknown, options: { prefix?: string } = {}): Promise<{ ok: true; value: O } | { ok: false; problem: FormProblem }> {\n  const result = await schema[\"~standard\"].validate(input);\n  if (!result.issues?.length) return { ok: true, value: result.value as O };\n  const fields: Record<string, FormFieldError> = issuesToFields(result.issues, options.prefix);\n  const general = fields[\"\"];\n  delete fields[\"\"];\n  return { ok: false, problem: { status: 422, code: general ? general.key : \"validation-failed\", fields } };\n}\n\n/** A thrown error as a refusal a form reads — a `KrizakaApiError` keeps its status, code, fields and retry time. */\nexport function formProblem(error: unknown): FormProblem {\n  if (error && typeof error === \"object\") {\n    const e = error as { status?: unknown; code?: unknown; detail?: unknown; fields?: unknown; retryAt?: unknown };\n    if (typeof e.status === \"number\" || typeof e.code === \"string\") {\n      return {\n        ...(typeof e.status === \"number\" ? { status: e.status } : {}),\n        ...(typeof e.code === \"string\" ? { code: e.code } : {}),\n        ...(typeof e.detail === \"string\" ? { detail: e.detail } : {}),\n        ...(e.fields && typeof e.fields === \"object\" ? { fields: JSON.parse(JSON.stringify(e.fields)) as FormProblem[\"fields\"] } : {}),\n        ...(typeof e.retryAt === \"number\" ? { retryAt: e.retryAt } : {}),\n      };\n    }\n  }\n  return { status: 500, code: \"server\" };\n}\n"
+    },
+    {
+      "path": "form/web.tsx",
+      "content": "// Client. The form's fields for the web: thin adapters from a form field (useKrizakaField) to the platform's current\n// primitives — Field + Input, Checkbox, Switch, RadioGroup, Combobox, DatePicker, TagInput, Dropzone, Slider. A new look\n// for a primitive (a new date picker, a new radio) changes an adapter here, never a form.\nimport { Alert } from \"@krizaka/ui/alert\";\nimport { Button, type ButtonProps } from \"@krizaka/ui/button\";\nimport { Checkbox as CheckboxControl } from \"@krizaka/ui/checkbox\";\nimport { Combobox as ComboboxControl, type ComboboxLabels, type ComboboxOption } from \"@krizaka/ui/combobox\";\nimport { DatePicker, type DatePickerLabels } from \"@krizaka/ui/date-picker\";\nimport { Field, Input, Select as SelectControl, Textarea } from \"@krizaka/ui/field\";\nimport { Dropzone, formatBytes } from \"@krizaka/ui/file-upload\";\nimport { RadioGroup as RadioGroupControl } from \"@krizaka/ui/radio-group\";\nimport { Slider as SliderControl, type SliderValue } from \"@krizaka/ui/slider\";\nimport { Spinner } from \"@krizaka/ui/spinner\";\nimport { Switch as SwitchControl } from \"@krizaka/ui/switch\";\nimport { TagInput as TagInputControl, type TagInputProps } from \"@krizaka/ui/tag-input\";\nimport * as React from \"react\";\n\nimport { composeDate, DATE_PART_LENGTH, type DatePart, datePartsOrder, splitDate } from \"../date-picker/parts\";\nimport {\n  type FieldCheck,\n  FormContext,\n  type FormContextValue,\n  type KrizakaField,\n  type KrizakaFieldArray,\n  makeCreateKrizakaForm,\n  useFormContext,\n  useFormStatus,\n  useFormValue,\n  useKrizakaField,\n  useKrizakaFieldArray,\n} from \"./core\";\nimport { formMessage } from \"./errors\";\nimport { currencySymbol, moneyInputText, parseMoney } from \"./money\";\n\ntype Base = {\n  /** The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form). */\n  name: string;\n  /** The visible label, passed translated (also the control's accessible name). */\n  label: string;\n  /** A help text under the control, read with it; the error takes its place when there is one. */\n  hint?: string;\n  /** Not available. */\n  disabled?: boolean;\n  /** Classes merged on the field's root. */\n  className?: string;\n};\n\nconst ids = (f: KrizakaField, hint?: string) => [hint && !f.error ? f.hintId : null, f.error ? f.errorId : null].filter(Boolean).join(\" \") || undefined;\n\nfunction Caption({ field, hint, ok }: { field: KrizakaField; hint?: string; ok?: string }) {\n  const suggestion = field.errorDetail?.suggestion;\n  if (field.error)\n    return (\n      <Field.Error id={field.errorId}>\n        <span>\n          {field.error}\n          {suggestion ? (\n            <>\n              {\" \"}\n              <button type=\"button\" className=\"font-semibold text-accent-text underline underline-offset-2\" onClick={() => field.setValue(suggestion.value)}>\n                {suggestion.label}\n              </button>\n            </>\n          ) : null}\n        </span>\n      </Field.Error>\n    );\n  const text = field.available && ok ? (hint ? `${ok} · ${hint}` : ok) : hint;\n  return text ? <Field.Hint id={field.hintId}>{text}</Field.Hint> : null;\n}\n\nconst Check = () => (\n  <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4 text-fg-success\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </svg>\n);\n\nexport type FormProps = Omit<React.ComponentProps<\"form\">, \"onSubmit\" | \"noValidate\"> & {\n  /** The fields, the error and the button. */\n  children?: React.ReactNode;\n};\n\n/** The `<form>` of a form (`form.Form`): `noValidate` (the schema validates), the first error focused after a refused submit. */\nfunction FormRoot({ value, className, children, ...props }: FormProps & { value: FormContextValue }) {\n  const ref = React.useRef<HTMLFormElement>(null);\n  return (\n    <FormContext.Provider value={value}>\n      <form\n        ref={ref}\n        noValidate\n        className={className ?? \"flex flex-col gap-4\"}\n        onSubmit={async (event) => {\n          event.preventDefault();\n          if (!(await value.submit())) requestAnimationFrame(() => ref.current?.querySelector<HTMLElement>('[aria-invalid=\"true\"], [data-invalid] input')?.focus());\n        }}\n        {...props}\n      >\n        {children}\n      </form>\n    </FormContext.Provider>\n  );\n}\n\nexport type SubmitProps = Omit<ButtonProps, \"type\" | \"loading\"> & {\n  /** The button's words, passed translated (\"Create my account\"). */\n  children: React.ReactNode;\n};\n\n/** The submit button: busy while the form is sent (not pressable twice), never disabled for an invalid form. */\nexport function Submit({ variant = \"primary\", children, ...props }: SubmitProps) {\n  const { submitting } = useFormStatus();\n  return (\n    <Button type=\"submit\" variant={variant} loading={submitting} {...props}>\n      {children}\n    </Button>\n  );\n}\n\nexport type FormErrorProps = {\n  /** A headline above the message (\"We could not create your account\"), passed translated. */\n  title?: string;\n  /** Classes merged on the alert. */\n  className?: string;\n};\n\n/** The whole form's error — a refusal of the server that belongs to no field (a conflict, too many tries, no network). */\nexport function FormError({ title, className }: FormErrorProps) {\n  const ctx = useFormContext();\n  if (!ctx.error) return null;\n  return (\n    <Alert tone=\"danger\" title={title} className={className}>\n      {formMessage(ctx.error, ctx.i18n)}\n    </Alert>\n  );\n}\n\nexport type TextFieldProps = Base & {\n  /** `text` (default), `email`, `password`, `url`, `tel`, `search`: the right keyboard on a phone. */\n  type?: \"text\" | \"email\" | \"password\" | \"url\" | \"tel\" | \"search\";\n  /** The browser's autofill (`email`, `username`, `new-password`, `name`). */\n  autoComplete?: string;\n  /** An example of a value, passed translated — never the label. */\n  placeholder?: string;\n  /** The keyboard on a phone (`numeric`, `decimal`). */\n  inputMode?: React.HTMLAttributes<HTMLInputElement>[\"inputMode\"];\n  /** The most characters. */\n  maxLength?: number;\n  /** Cleans what is typed before it is stored (`(v) => v.toLowerCase().replace(/\\s+/g, \"_\")`). */\n  transform?: (raw: string) => string;\n  /** Checks the value on the server as it is typed (availability): an error key, or nothing when it is fine. */\n  validateAsync?: FieldCheck<string>;\n  /** The wait, in ms, between the last key and `validateAsync`. Default 350. */\n  asyncDebounceMs?: number;\n  /** The words once `validateAsync` accepted the value (\"@eric is free\"), passed translated. */\n  availableHint?: string;\n  /** The name of the wait while it checks (\"Checking\"), passed translated. */\n  checkingLabel?: string;\n  /** Something before the text (an `@`, an icon). */\n  start?: React.ReactNode;\n};\n\n/** A text field of the form: label, input, hint or error, an optional check on the server. */\nexport function TextField({ name, label, hint, disabled, className, type = \"text\", transform, validateAsync, asyncDebounceMs, availableHint, checkingLabel = \"Checking\", start, ...input }: TextFieldProps) {\n  const f = useKrizakaField<string>(name, { validateAsync, asyncDebounceMs });\n  const end = f.validating ? <Spinner size=\"sm\" label={checkingLabel} /> : f.available ? <Check /> : null;\n  return (\n    <Field.Root className={className}>\n      <Field.Label htmlFor={f.id}>{label}</Field.Label>\n      <span className=\"relative flex items-center\">\n        {start ? <span className=\"pointer-events-none absolute left-3 text-fg-muted\">{start}</span> : null}\n        <Input\n          id={f.id}\n          name={name}\n          type={type}\n          value={f.value ?? \"\"}\n          disabled={disabled}\n          invalid={Boolean(f.error)}\n          aria-describedby={ids(f, hint ?? availableHint)}\n          onChange={(event) => f.setValue(transform ? transform(event.target.value) : event.target.value)}\n          onBlur={f.onBlur}\n          className={[start ? \"pl-9\" : \"\", end ? \"pr-10\" : \"\"].join(\" \").trim() || undefined}\n          {...input}\n        />\n        {end ? <span className=\"absolute right-3 flex\">{end}</span> : null}\n      </span>\n      <Caption field={f} hint={hint} ok={availableHint} />\n    </Field.Root>\n  );\n}\n\nexport type TextAreaProps = Base & {\n  /** An example of a value, passed translated. */\n  placeholder?: string;\n  /** The visible lines. Default 4. */\n  rows?: number;\n  /** The most characters. */\n  maxLength?: number;\n};\n\n/** A longer text of the form (a bio, a description, a report). */\nexport function TextArea({ name, label, hint, disabled, className, rows = 4, ...input }: TextAreaProps) {\n  const f = useKrizakaField<string>(name);\n  return (\n    <Field.Root className={className}>\n      <Field.Label htmlFor={f.id}>{label}</Field.Label>\n      <Textarea id={f.id} name={name} rows={rows} value={f.value ?? \"\"} disabled={disabled} invalid={Boolean(f.error)} aria-describedby={ids(f, hint)} onChange={(e) => f.setValue(e.target.value)} onBlur={f.onBlur} {...input} />\n      <Caption field={f} hint={hint} />\n    </Field.Root>\n  );\n}\n\nexport type CheckboxProps = Omit<Base, \"label\"> & {\n  /** The words next to the box, clickable with it — text, or a sentence with links (terms, privacy). */\n  label: React.ReactNode;\n};\n\n/** A box of the form (`boolean`): terms to accept, an option. */\nexport function Checkbox({ name, label, hint, disabled, className }: CheckboxProps) {\n  const f = useKrizakaField<boolean>(name);\n  return (\n    <div className={className ?? \"flex flex-col gap-1.5\"}>\n      <CheckboxControl id={f.id} name={name} checked={f.value === true} disabled={disabled} invalid={Boolean(f.error)} aria-describedby={ids(f, hint)} onCheckedChange={(c) => f.setValue(c === true)} onBlur={f.onBlur}>\n        {label}\n      </CheckboxControl>\n      <Caption field={f} hint={hint} />\n    </div>\n  );\n}\n\n/** An on/off setting of the form (`boolean`): the label and its hint beside the switch. */\nexport function Switch({ name, label, hint, disabled, className }: Base) {\n  const f = useKrizakaField<boolean>(name);\n  return (\n    <div className={className ?? \"flex items-start justify-between gap-4\"}>\n      <div className=\"flex min-w-0 flex-col gap-0.5\">\n        <Field.Label htmlFor={f.id} className=\"text-sm font-medium text-fg\">\n          {label}\n        </Field.Label>\n        <Caption field={f} hint={hint} />\n      </div>\n      <SwitchControl id={f.id} name={name} checked={f.value === true} disabled={disabled} invalid={Boolean(f.error)} aria-describedby={ids(f, hint)} onCheckedChange={(c) => f.setValue(c)} onBlur={f.onBlur} />\n    </div>\n  );\n}\n\n/** A choice of the form: the value stored, its words (passed translated), a line under them. */\nexport type FormOption = { value: string; label: string; description?: string; disabled?: boolean };\n\nexport type RadioGroupProps = Base & {\n  /** The choices, all visible (two to five). */\n  options: readonly FormOption[];\n  /** `list` (a dot and its words, default) or `cards` (a whole card is the radio: an amount, a plan, an audience). */\n  variant?: \"list\" | \"cards\";\n  /** `vertical` (default) or `horizontal`. */\n  orientation?: \"vertical\" | \"horizontal\";\n};\n\n/** One choice among a few, all visible. */\nexport function RadioGroup({ name, label, hint, disabled, className, options, variant = \"list\", orientation = \"vertical\" }: RadioGroupProps) {\n  const f = useKrizakaField<string>(name);\n  return (\n    <Field.Root className={className} role=\"group\" aria-labelledby={`${f.id}-label`}>\n      <span id={`${f.id}-label`} className=\"text-xs font-semibold text-fg-secondary\">\n        {label}\n      </span>\n      <RadioGroupControl.Root\n        aria-labelledby={`${f.id}-label`}\n        value={f.value ?? \"\"}\n        onValueChange={(v) => f.setValue(v)}\n        onBlur={f.onBlur}\n        orientation={orientation}\n        disabled={disabled}\n        invalid={Boolean(f.error)}\n        aria-describedby={ids(f, hint)}\n        name={name}\n        className={variant === \"cards\" ? \"grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-2\" : undefined}\n      >\n        {options.map((o) =>\n          variant === \"cards\" ? (\n            <RadioGroupControl.Card key={o.value} value={o.value} disabled={o.disabled}>\n              <span className=\"font-semibold\">{o.label}</span>\n              {o.description ? <span className=\"text-xs text-fg-secondary\">{o.description}</span> : null}\n            </RadioGroupControl.Card>\n          ) : (\n            <RadioGroupControl.Item key={o.value} value={o.value} disabled={o.disabled}>\n              {o.label}\n              {o.description ? <span className=\"block text-xs text-fg-secondary\">{o.description}</span> : null}\n            </RadioGroupControl.Item>\n          ),\n        )}\n      </RadioGroupControl.Root>\n      <Caption field={f} hint={hint} />\n    </Field.Root>\n  );\n}\n\nexport type SelectProps = Base & {\n  /** The choices, in the platform's own menu (a country, a category). */\n  options: readonly FormOption[];\n  /** The first line while nothing is chosen (\"Choose a category\"), passed translated. */\n  placeholder?: string;\n};\n\n/** One choice among many, in the platform's menu (`<select>`: accessible and right on phones). */\nexport function Select({ name, label, hint, disabled, className, options, placeholder }: SelectProps) {\n  const f = useKrizakaField<string>(name);\n  return (\n    <Field.Root className={className}>\n      <Field.Label htmlFor={f.id}>{label}</Field.Label>\n      <SelectControl id={f.id} name={name} value={f.value ?? \"\"} disabled={disabled} invalid={Boolean(f.error)} aria-describedby={ids(f, hint)} onChange={(e) => f.setValue(e.target.value)} onBlur={f.onBlur}>\n        {placeholder !== undefined ? (\n          <option value=\"\" disabled>\n            {placeholder}\n          </option>\n        ) : null}\n        {options.map((o) => (\n          <option key={o.value} value={o.value} disabled={o.disabled}>\n            {o.label}\n          </option>\n        ))}\n      </SelectControl>\n      <Caption field={f} hint={hint} />\n    </Field.Root>\n  );\n}\n\nexport type ComboboxProps = Base & {\n  /** The options, filtered as the person types. */\n  options?: readonly ComboboxOption[];\n  /** Fetches the options for a query (debounced, aborted by a newer one). */\n  onSearch?: (query: string, signal: AbortSignal) => Promise<readonly ComboboxOption[]>;\n  /** Several values (`string[]`), shown as chips; one (`string`) by default. */\n  multiple?: boolean;\n  /** Offers to create the query as a value. */\n  creatable?: boolean;\n  /** The input's placeholder, passed translated. */\n  placeholder?: string;\n  /** The words of the control, passed translated. */\n  labels?: Partial<ComboboxLabels>;\n};\n\n/** A choice among many, typed to filter or fetched: one value (`string`) or several (`string[]`). */\nexport function Combobox({ name, label, hint, disabled, className, options = [], onSearch, multiple, creatable, placeholder, labels }: ComboboxProps) {\n  const f = useKrizakaField<string | string[]>(name);\n  // The options chosen from a search, by value: their labels once the search has moved on.\n  const [seen, setSeen] = React.useState<Record<string, ComboboxOption>>({});\n  const option = (value: string) => options.find((o) => o.value === value) ?? seen[value] ?? { value, label: value };\n  const remember = (o: ComboboxOption) => setSeen((known) => (known[o.value] === o ? known : { ...known, [o.value]: o }));\n  const shared = { id: f.id, label, hint, error: f.error, disabled, placeholder, labels, options, onSearch, creatable, name };\n  return (\n    <div className={className} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && f.onBlur()}>\n      {multiple ? (\n        <ComboboxControl\n          {...shared}\n          multiple\n          value={((f.value as string[] | undefined) ?? []).map(option)}\n          onValueChange={(next) => {\n            next.forEach(remember);\n            f.setValue(next.map((o) => o.value));\n          }}\n        />\n      ) : (\n        <ComboboxControl\n          {...shared}\n          value={f.value ? option(f.value as string) : null}\n          onValueChange={(next) => {\n            if (next) remember(next);\n            f.setValue(next?.value ?? \"\");\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nexport type DateFieldProps = Base & {\n  /** `calendar` (default: a date near today — a publication, an appointment) or `parts` (day · month · year typed: a\n   * memorable date, a birth date). */\n  entry?: \"calendar\" | \"parts\";\n  /** The earliest date (ISO), for the calendar. */\n  min?: string;\n  /** The latest date (ISO), for the calendar (`latestBirthDate(18)` for an age gate). */\n  max?: string;\n  /** The words of the calendar, or the names of the boxes (`day`, `month`, `year`), passed translated. */\n  labels?: Partial<DatePickerLabels> & Partial<Record<DatePart, string>>;\n  /** `bday` for a date of birth. */\n  autoComplete?: \"bday\" | \"off\";\n};\n\nconst PART_NAMES: Record<DatePart, string> = { day: \"Day\", month: \"Month\", year: \"Year\" };\n\n/** A date of the form (`YYYY-MM-DD`, `\"\"` for none): a calendar, or day · month · year typed in the locale's order. */\nexport function DateField({ name, label, hint, disabled, className, entry = \"calendar\", min, max, labels, autoComplete }: DateFieldProps) {\n  const f = useKrizakaField<string>(name);\n  if (entry === \"calendar\")\n    return (\n      <div className={className} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && f.onBlur()}>\n        <DatePicker label={label} hint={hint} error={f.error} disabled={disabled} name={name} locale={f.locale} min={min} max={max} labels={labels} value={f.value || null} onValueChange={(v) => f.setValue(v ?? \"\")} />\n      </div>\n    );\n  return <DateParts field={f} label={label} hint={hint} disabled={disabled} className={className} names={{ ...PART_NAMES, ...labels }} autoComplete={autoComplete} />;\n}\n\nfunction DateParts({ field: f, label, hint, disabled, className, names, autoComplete }: { field: KrizakaField<string>; label: string; hint?: string; disabled?: boolean; className?: string; names: Record<DatePart, string>; autoComplete?: string }) {\n  const order = React.useMemo(() => datePartsOrder(f.locale), [f.locale]);\n  const [parts, setParts] = React.useState(() => splitDate(f.value));\n  if ((f.value ?? \"\") !== composeDate(parts) && composeDate(splitDate(f.value)) === (f.value ?? \"\")) setParts(splitDate(f.value));\n  const refs = { day: React.useRef<HTMLInputElement>(null), month: React.useRef<HTMLInputElement>(null), year: React.useRef<HTMLInputElement>(null) };\n  return (\n    <fieldset className={className ?? \"flex flex-col gap-1.5\"} aria-describedby={ids(f, hint)} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && f.onBlur()}>\n      <legend className=\"mb-1.5 text-xs font-semibold text-fg-secondary\">{label}</legend>\n      <div className=\"flex gap-2\">\n        {order.map((part) => (\n          <label key={part} className=\"flex flex-col gap-1 text-xs text-fg-secondary\">\n            {names[part]}\n            <Input\n              ref={refs[part]}\n              inputMode=\"numeric\"\n              autoComplete={autoComplete === \"bday\" ? `bday-${part}` : \"off\"}\n              maxLength={DATE_PART_LENGTH[part]}\n              value={parts[part]}\n              disabled={disabled}\n              invalid={Boolean(f.error)}\n              className={part === \"year\" ? \"w-20 text-center tabular-nums\" : \"w-14 text-center tabular-nums\"}\n              onChange={(e) => {\n                const digits = e.target.value.replace(/\\D/g, \"\").slice(0, DATE_PART_LENGTH[part]);\n                const next = { ...parts, [part]: digits };\n                setParts(next);\n                f.setValue(composeDate(next));\n                const following = order[order.indexOf(part) + 1];\n                if (digits.length === DATE_PART_LENGTH[part] && following) refs[following].current?.focus();\n              }}\n            />\n          </label>\n        ))}\n      </div>\n      <Caption field={f} hint={hint} />\n    </fieldset>\n  );\n}\n\nexport type TagsProps = Base & Pick<TagInputProps, \"suggestions\" | \"normalize\" | \"max\" | \"separators\" | \"placeholder\" | \"labels\">;\n\n/** Free words of the form as chips (`string[]`): tags, keywords. */\nexport function TagInput({ name, label, hint, disabled, className, ...props }: TagsProps) {\n  const f = useKrizakaField<string[]>(name);\n  return (\n    <div className={className} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && f.onBlur()}>\n      <TagInputControl label={label} hint={hint} error={f.error} disabled={disabled} name={name} value={f.value ?? []} onValueChange={(tags) => f.setValue(tags)} {...props} />\n    </div>\n  );\n}\n\nexport type FileUploadProps = Omit<Base, \"hint\"> & {\n  /** The title in the zone (\"Drop your video here\"), passed translated. */\n  title: string;\n  /** The button that opens the file picker, passed translated. */\n  browseLabel: string;\n  /** What is accepted, in words (\"MP4 or MOV, up to 4 GB\"). */\n  hint?: string;\n  /** The types accepted (`video/*`, `image/png,.pdf`). */\n  accept?: string;\n  /** The largest file, in bytes. */\n  maxSize?: number;\n  /** Several files (`File[]`, up to `maxFiles`); one by default (still a `File[]` of one). */\n  multiple?: boolean;\n  /** The most files. */\n  maxFiles?: number;\n  /** The name of a file's remove button (`(name) => \"Remove \" + name`), passed translated. */\n  removeLabel: (fileName: string) => string;\n  /** The words of a refused file (`(r) => r.file.name + \" is too large\"`). */\n  refusalLabel?: React.ComponentProps<typeof Dropzone>[\"refusalLabel\"];\n};\n\n/** Files of the form (`File[]`): a drop zone, then the chosen files, each removable. */\nexport function FileUpload({ name, label, hint, disabled, className, title, browseLabel, accept, maxSize, multiple, maxFiles, removeLabel, refusalLabel }: FileUploadProps) {\n  const f = useKrizakaField<File[]>(name);\n  const files = f.value ?? [];\n  return (\n    <div className={className ?? \"flex flex-col gap-2\"} role=\"group\" aria-label={label} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && f.onBlur()}>\n      <span className=\"text-xs font-semibold text-fg-secondary\">{label}</span>\n      <Dropzone\n        title={title}\n        browseLabel={browseLabel}\n        hint={hint}\n        accept={accept}\n        maxSize={maxSize}\n        multiple={multiple}\n        maxFiles={maxFiles}\n        disabled={disabled}\n        refusalLabel={refusalLabel}\n        onFiles={(chosen) => f.setValue(multiple ? [...files, ...chosen].slice(0, maxFiles ?? Infinity) : chosen.slice(0, 1))}\n      />\n      {files.length > 0 ? (\n        <ul className=\"flex flex-col gap-1.5\">\n          {files.map((file, i) => (\n            <li key={`${file.name}-${i}`} className=\"flex items-center justify-between gap-3 rounded-lg border border-border-default bg-surface-1 px-3 py-2 text-sm\">\n              <span className=\"min-w-0 truncate text-fg\">{file.name}</span>\n              <span className=\"flex shrink-0 items-center gap-2\">\n                <span className=\"font-mono text-xs text-fg-secondary\">{formatBytes(file.size, f.locale)}</span>\n                <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={() => f.setValue(files.filter((_, j) => j !== i))}>\n                  {removeLabel(file.name)}\n                </Button>\n              </span>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n      {f.error ? <Field.Error id={f.errorId}>{f.error}</Field.Error> : null}\n    </div>\n  );\n}\n\nexport type MoneyProps = Base & {\n  /** The currency (ISO 4217: `USD`, `EUR`, `JPY`): its sign before the amount, its decimals. */\n  currency: string;\n  /** An example of an amount, passed translated. */\n  placeholder?: string;\n};\n\n/** An amount of the form, stored as integer minor units (cents: `1250` = 12.50), typed the locale's way. */\nexport function Money({ name, label, hint, disabled, className, currency, placeholder }: MoneyProps) {\n  const f = useKrizakaField<number | null>(name);\n  const [text, setText] = React.useState(() => moneyInputText(f.value, currency, f.locale));\n  const [editing, setEditing] = React.useState(false);\n  const shown = editing ? text : moneyInputText(f.value, currency, f.locale);\n  return (\n    <Field.Root className={className}>\n      <Field.Label htmlFor={f.id}>{label}</Field.Label>\n      <span className=\"relative flex items-center\">\n        <span className=\"pointer-events-none absolute left-3 text-sm text-fg-secondary\" aria-hidden>\n          {currencySymbol(currency, f.locale)}\n        </span>\n        <Input\n          id={f.id}\n          name={name}\n          inputMode=\"decimal\"\n          value={shown}\n          placeholder={placeholder}\n          disabled={disabled}\n          invalid={Boolean(f.error)}\n          aria-describedby={ids(f, hint)}\n          className=\"pl-9 tabular-nums\"\n          onFocus={() => {\n            setText(moneyInputText(f.value, currency, f.locale));\n            setEditing(true);\n          }}\n          onChange={(e) => {\n            setText(e.target.value);\n            const units = parseMoney(e.target.value, currency, f.locale);\n            f.setValue(units === undefined ? null : units === null ? Number.NaN : units);\n          }}\n          onBlur={() => {\n            setEditing(false);\n            f.onBlur();\n          }}\n        />\n      </span>\n      <Caption field={f} hint={hint} />\n    </Field.Root>\n  );\n}\n\nexport type SliderProps = Base & {\n  /** The lowest value. Default 0. */\n  min?: number;\n  /** The highest value. Default 100. */\n  max?: number;\n  /** The step. Default 1. */\n  step?: number;\n  /** The value as words (\"15 %\", \"3 min\"), shown and read. */\n  formatValue?: (value: number) => string;\n  /** For a range (`[number, number]`): each thumb's name, passed translated. */\n  thumbLabels?: [string, string];\n};\n\n/** A number (or a range) of the form, chosen by feel: a share, a volume, a price range. */\nexport function Slider({ name, label, hint, disabled, className, min, max, step, formatValue, thumbLabels }: SliderProps) {\n  const f = useKrizakaField<SliderValue>(name);\n  return (\n    <div className={className ?? \"flex flex-col gap-1.5\"}>\n      <SliderControl label={label} showLabel value={f.value} min={min} max={max} step={step} disabled={disabled} formatValue={formatValue} thumbLabels={thumbLabels} aria-describedby={ids(f, hint)} onValueChange={(v) => f.setValue(v)} onValueCommit={() => f.onBlur()} />\n      <Caption field={f} hint={hint} />\n    </div>\n  );\n}\n\nexport type FormFieldProps<T = unknown> = {\n  /** The field's name in the schema (typed by the form). */\n  name: string;\n  /** Checks the value on the server as it changes. */\n  validateAsync?: FieldCheck<T>;\n  /** The wait, in ms, before `validateAsync`. */\n  asyncDebounceMs?: number;\n  /** Draws the field: its value, setter, error and ids (`useKrizakaField`). */\n  children: (field: KrizakaField<T>) => React.ReactNode;\n};\n\n/** A field drawn by the app (a control the package does not have): the form's value, errors and ids, any markup. */\nexport function FormField({ name, validateAsync, asyncDebounceMs, children }: FormFieldProps) {\n  return <>{children(useKrizakaField(name, { validateAsync, asyncDebounceMs }))}</>;\n}\n\nexport type FieldArrayProps<T = unknown> = {\n  /** The array's name in the schema (typed by the form). */\n  name: string;\n  /** Draws the items: `items`, `push`, `remove`, `move`, `fieldName(i, \"url\")` for the fields of an item. */\n  children: (array: KrizakaFieldArray<T>) => React.ReactNode;\n};\n\n/** A list of fields that grows and shrinks (links, tiers, guests): each item's fields named `links[0].url`. */\nexport function FieldArray({ name, children }: FieldArrayProps) {\n  return <>{children(useKrizakaFieldArray(name))}</>;\n}\n\nexport type WatchProps<T = unknown> = {\n  /** The field to follow (typed by the form). */\n  name: string;\n  /** Draws from its current value: show a part of the form only when a box is ticked. */\n  children: (value: T) => React.ReactNode;\n};\n\n/** Renders from a field's current value (a part shown only when a box is ticked, a total). */\nexport function Watch({ name, children }: WatchProps) {\n  return <>{children(useFormValue(name))}</>;\n}\n\nconst fields = { TextField, TextArea, Checkbox, Switch, RadioGroup, Select, Combobox, DateField, TagInput, FileUpload, Money, Slider, Field: FormField, FieldArray, Watch, Submit, FormError };\n\n/**\n * A form, defined once: its schema (zod 4) and default values — the same schema the server parses with. In a component,\n * `signUp.useForm({ onSubmit })` gives the form and its fields, typed by the schema: `<form.Form>`, `<form.TextField\n * name=\"email\" …/>`, `<form.Submit>`. Errors are i18n keys (`form.errors.tooShort`), never the engine's English.\n */\nexport const createKrizakaForm = makeCreateKrizakaForm(fields, FormRoot);\n\n/** The form sent by a Server Action: `useFormWithAction(signUp, createAccount)` — `signUp.useFormWithAction(createAccount)`. */\nexport function useFormWithAction<F extends { useFormWithAction: (...args: never[]) => unknown }>(form: F, ...args: Parameters<F[\"useFormWithAction\"]>): ReturnType<F[\"useFormWithAction\"]> {\n  return form.useFormWithAction(...args) as ReturnType<F[\"useFormWithAction\"]>;\n}\n"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    }
+  ],
+  "dependencies": [
+    "@krizaka/intl@^0.1.0",
+    "@tanstack/react-form@1.33.5"
+  ],
+  "registryDependencies": [
+    "alert",
+    "button",
+    "checkbox",
+    "combobox",
+    "date-picker",
+    "field",
+    "file-upload",
+    "radio-group",
+    "slider",
+    "spinner",
+    "switch",
+    "tag-input"
+  ],
+  "demo": {
+    "path": "examples/form/sign-up.tsx",
+    "content": "\"use client\";\n\nimport { KrizakaApiError } from \"@krizaka/query\";\nimport { createKrizakaForm, latestBirthDate } from \"@krizaka/ui/form\";\nimport { z } from \"zod\";\n\n// The schema the sign-up API parses with: the same rules, the same keys. `signUp.*` are the app's own words.\nconst signUp = createKrizakaForm({\n  schema: z.object({\n    email: z.email(),\n    username: z.string().min(3).max(30).regex(/^[a-z0-9_]+$/, \"signUp.username.format\"),\n    password: z.string().min(8),\n    dateOfBirth: z.iso.date().refine((d) => d <= latestBirthDate(18), \"form.errors.UNDERAGE\"),\n    acceptTerms: z.boolean().refine(Boolean, \"signUp.terms.required\"),\n  }),\n  defaultValues: { email: \"\", username: \"\", password: \"\", dateOfBirth: \"\", acceptTerms: false },\n});\nconst WORDS: Record<string, string> = { \"signUp.username.format\": \"Lowercase letters, digits and _ only.\", \"signUp.username.taken\": \"This username is taken.\", \"signUp.terms.required\": \"Accept the terms to continue.\", \"form.errors.UNDERAGE\": \"You must be 18 or older.\", \"form.errors.BIRTH_DATE_INVALID\": \"Enter your real date of birth.\", \"form.errors.USERNAME_RESERVED\": \"This username is reserved.\", \"apiErrors.ACCOUNT_EXISTS\": \"This e-mail already has an account. Sign in instead.\" };\nconst taken = (u: string) => new Promise<boolean>((done) => setTimeout(() => done([\"eric\", \"elena\"].includes(u)), 300));\n// The server's codes (Orochia's register API): the ones that belong to a field land under it, the others above the button.\nconst register = async (v: { email: string; username: string }) => { if (v.username === \"admin\") throw new KrizakaApiError({ status: 400, code: \"USERNAME_RESERVED\" }); if (v.email.endsWith(\"@orochia.com\")) throw new KrizakaApiError({ status: 409, code: \"ACCOUNT_EXISTS\" }); };\n\n// Orochia's sign-up: the username checked as it is typed (a free one offered), an 18+ birth date, the server's refusals in place.\nexport default function FormSignUp() {\n  const form = signUp.useForm({ i18n: { t: (key) => WORDS[key] }, codeFields: { UNDERAGE: \"dateOfBirth\", BIRTH_DATE_INVALID: \"dateOfBirth\", USERNAME_RESERVED: \"username\" }, onSubmit: register });\n  return (\n    <form.Form aria-label=\"Create your account\" className=\"flex w-80 flex-col gap-4\">\n      <form.TextField name=\"email\" label=\"E-mail\" type=\"email\" autoComplete=\"email\" hint=\"We send a link to confirm it.\" />\n      <form.TextField name=\"username\" label=\"Username\" start=\"@\" autoComplete=\"username\" transform={(v) => v.toLowerCase().replace(/\\s+/g, \"_\")} availableHint=\"Free\" validateAsync={async (u) => ((await taken(u)) ? { key: \"signUp.username.taken\", suggestion: { label: `Use @${u}_${u.length}`, value: `${u}_${u.length}` } } : null)} />\n      <form.TextField name=\"password\" label=\"Password\" type=\"password\" autoComplete=\"new-password\" hint=\"At least 8 characters.\" />\n      <form.DateField name=\"dateOfBirth\" label=\"Date of birth\" entry=\"parts\" autoComplete=\"bday\" hint=\"Private, never shown.\" />\n      <form.Checkbox name=\"acceptTerms\" label=\"I accept the terms and the privacy policy\" />\n      <form.FormError />\n      <form.Submit>Create my account</form.Submit>\n    </form.Form>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "Checkbox",
+      "description": "A box of the form (`boolean`): terms to accept, an option.",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The words next to the box, clickable with it — text, or a sentence with links (terms, privacy).",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the field's root.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the control, read with it; the error takes its place when there is one.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Combobox",
+      "description": "A choice among many, typed to filter or fetched: one value (`string`) or several (`string[]`).",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (also the control's accessible name).",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the field's root.",
+          "required": false
+        },
+        {
+          "name": "creatable",
+          "type": "boolean",
+          "default": null,
+          "description": "Offers to create the query as a value.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the control, read with it; the error takes its place when there is one.",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "Partial<ComboboxLabels>",
+          "default": null,
+          "description": "The words of the control, passed translated.",
+          "required": false
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "default": null,
+          "description": "Several values (`string[]`), shown as chips; one (`string`) by default.",
+          "required": false
+        },
+        {
+          "name": "onSearch",
+          "type": "((query: string, signal: AbortSignal) => Promise<readonly ComboboxOption[]>)",
+          "default": null,
+          "description": "Fetches the options for a query (debounced, aborted by a newer one).",
+          "required": false
+        },
+        {
+          "name": "options",
+          "type": "readonly ComboboxOption[]",
+          "default": "[]",
+          "description": "The options, filtered as the person types.",
+          "required": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "default": null,
+          "description": "The input's placeholder, passed translated.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "DateField",
+      "description": "A date of the form (`YYYY-MM-DD`, `\"\"` for none): a calendar, or day · month · year typed in the locale's order.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (also the control's accessible name).",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+          "required": true
+        },
+        {
+          "name": "autoComplete",
+          "type": "\"off\" | \"bday\"",
+          "default": null,
+          "description": "`bday` for a date of birth.",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the field's root.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "entry",
+          "type": "\"calendar\" | \"parts\"",
+          "default": "calendar",
+          "description": "`calendar` (default: a date near today — a publication, an appointment) or `parts` (day · month · year typed: a\nmemorable date, a birth date).",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the control, read with it; the error takes its place when there is one.",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "(Partial<DatePickerLabels> & Partial<Record<DatePart, string>>)",
+          "default": null,
+          "description": "The words of the calendar, or the names of the boxes (`day`, `month`, `year`), passed translated.",
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "string",
+          "default": null,
+          "description": "The latest date (ISO), for the calendar (`latestBirthDate(18)` for an age gate).",
+          "required": false
+        },
+        {
+          "name": "min",
+          "type": "string",
+          "default": null,
+          "description": "The earliest date (ISO), for the calendar.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "FieldArray",
+      "description": "A list of fields that grows and shrinks (links, tiers, guests): each item's fields named `links[0].url`.",
+      "props": [
+        {
+          "name": "children",
+          "type": "(array: KrizakaFieldArray<unknown>) => ReactNode",
+          "default": null,
+          "description": "Draws the items: `items`, `push`, `remove`, `move`, `fieldName(i, \"url\")` for the fields of an item.",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The array's name in the schema (typed by the form).",
+          "required": true
+        }
+      ]
+    },
+    {
+      "component": "FileUpload",
+      "description": "Files of the form (`File[]`): a drop zone, then the chosen files, each removable.",
+      "props": [
+        {
+          "name": "browseLabel",
+          "type": "string",
+          "default": null,
+          "description": "The button that opens the file picker, passed translated.",
+          "required": true
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (also the control's accessible name).",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+          "required": true
+        },
+        {
+          "name": "removeLabel",
+          "type": "(fileName: string) => string",
+          "default": null,
+          "description": "The name of a file's remove button (`(name) => \"Remove \" + name`), passed translated.",
+          "required": true
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "default": null,
+          "description": "The title in the zone (\"Drop your video here\"), passed translated.",
+          "required": true
+        },
+        {
+          "name": "accept",
+          "type": "string",
+          "default": null,
+          "description": "The types accepted (`video/*`, `image/png,.pdf`).",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the field's root.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "What is accepted, in words (\"MP4 or MOV, up to 4 GB\").",
+          "required": false
+        },
+        {
+          "name": "maxFiles",
+          "type": "number",
+          "default": null,
+          "description": "The most files.",
+          "required": false
+        },
+        {
+          "name": "maxSize",
+          "type": "number",
+          "default": null,
+          "description": "The largest file, in bytes.",
+          "required": false
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "default": null,
+          "description": "Several files (`File[]`, up to `maxFiles`); one by default (still a `File[]` of one).",
+          "required": false
+        },
+        {
+          "name": "refusalLabel",
+          "type": "((rejection: FileRejection) => string)",
+          "default": null,
+          "description": "The words of a refused file (`(r) => r.file.name + \" is too large\"`).",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "FormError",
+      "description": "The whole form's error — a refusal of the server that belongs to no field (a conflict, too many tries, no network).",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the alert.",
+          "required": false
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "default": null,
+          "description": "A headline above the message (\"We could not create your account\"), passed translated.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "FormField",
+      "description": "A field drawn by the app (a control the package does not have): the form's value, errors and ids, any markup.",
+      "props": [
+        {
+          "name": "children",
+          "type": "(field: KrizakaField<unknown>) => ReactNode",
+          "default": null,
+          "description": "Draws the field: its value, setter, error and ids (`useKrizakaField`).",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The field's name in the schema (typed by the form).",
+          "required": true
+        },
+        {
+          "name": "asyncDebounceMs",
+          "type": "number",
+          "default": null,
+          "description": "The wait, in ms, before `validateAsync`.",
+          "required": false
+        },
+        {
+          "name": "validateAsync",
+          "type": "FieldCheck<unknown>",
+          "default": null,
+          "description": "Checks the value on the server as it changes.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Money",
+      "description": "An amount of the form, stored as integer minor units (cents: `1250` = 12.50), typed the locale's way.",
+      "props": [
+        {
+          "name": "currency",
+          "type": "string",
+          "default": null,
+          "description": "The currency (ISO 4217: `USD`, `EUR`, `JPY`): its sign before the amount, its decimals.",
+          "required": true
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (also the control's accessible name).",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the field's root.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the control, read with it; the error takes its place when there is one.",
+          "required": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "default": null,
+          "description": "An example of an amount, passed translated.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "RadioGroup",
+      "description": "One choice among a few, all visible.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (also the control's accessible name).",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+          "required": true
+        },
+        {
+          "name": "options",
+          "type": "readonly FormOption[]",
+          "default": null,
+          "description": "The choices, all visible (two to five).",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the field's root.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the control, read with it; the error takes its place when there is one.",
+          "required": false
+        },
+        {
+          "name": "orientation",
+          "type": "\"horizontal\" | \"vertical\"",
+          "default": "vertical",
+          "description": "`vertical` (default) or `horizontal`.",
+          "required": false
+        },
+        {
+          "name": "variant",
+          "type": "\"list\" | \"cards\"",
+          "default": "list",
+          "description": "`list` (a dot and its words, default) or `cards` (a whole card is the radio: an amount, a plan, an audience).",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Select",
+      "description": "One choice among many, in the platform's menu (`<select>`: accessible and right on phones).",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (also the control's accessible name).",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+          "required": true
+        },
+        {
+          "name": "options",
+          "type": "readonly FormOption[]",
+          "default": null,
+          "description": "The choices, in the platform's own menu (a country, a category).",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the field's root.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the control, read with it; the error takes its place when there is one.",
+          "required": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "default": null,
+          "description": "The first line while nothing is chosen (\"Choose a category\"), passed translated.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Slider",
+      "description": "A number (or a range) of the form, chosen by feel: a share, a volume, a price range.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (also the control's accessible name).",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the field's root.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "formatValue",
+          "type": "((value: number) => string)",
+          "default": null,
+          "description": "The value as words (\"15 %\", \"3 min\"), shown and read.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the control, read with it; the error takes its place when there is one.",
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "default": null,
+          "description": "The highest value. Default 100.",
+          "required": false
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "default": null,
+          "description": "The lowest value. Default 0.",
+          "required": false
+        },
+        {
+          "name": "step",
+          "type": "number",
+          "default": null,
+          "description": "The step. Default 1.",
+          "required": false
+        },
+        {
+          "name": "thumbLabels",
+          "type": "[string, string]",
+          "default": null,
+          "description": "For a range (`[number, number]`): each thumb's name, passed translated.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Submit",
+      "description": "The submit button: busy while the form is sent (not pressable twice), never disabled for an invalid form.",
+      "props": [
+        {
+          "name": "announce",
+          "type": "string",
+          "default": null,
+          "description": "A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated.",
+          "required": false
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "default": null,
+          "description": "Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged.",
+          "required": false
+        },
+        {
+          "name": "indicator",
+          "type": "boolean",
+          "default": "true",
+          "description": "Shows the glyph while `loading` / with a `status`. `false`: you draw your own.",
+          "required": false
+        },
+        {
+          "name": "magnetic",
+          "type": "boolean",
+          "default": null,
+          "description": "The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch).",
+          "required": false
+        },
+        {
+          "name": "progress",
+          "type": "number | null",
+          "default": null,
+          "description": "Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an\nupload, an export).",
+          "required": false
+        },
+        {
+          "name": "shape",
+          "type": "\"rounded\" | \"pill\" | \"cut\"",
+          "default": "rounded",
+          "description": "rounded · pill · cut (45° corners, the Krizaka chamfer).",
+          "required": false
+        },
+        {
+          "name": "shimmer",
+          "type": "boolean",
+          "default": null,
+          "description": "A sheen of light crosses the button on hover — for the one action a page is about.",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "\"icon\" | \"sm\" | \"md\" | \"lg\"",
+          "default": "md",
+          "description": "sm · md · lg, or `icon` (a square).",
+          "required": false
+        },
+        {
+          "name": "status",
+          "type": "\"success\" | \"error\" | null",
+          "default": null,
+          "description": "How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of\nthe status colour opens around it. Clear it to return to rest.",
+          "required": false
+        },
+        {
+          "name": "variant",
+          "type": "\"danger\" | \"primary\" | \"gradient\" | \"secondary\" | \"outline\" | \"ghost\"",
+          "default": "primary",
+          "description": "The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,\n`ghost`, `danger`.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Switch",
+      "description": "An on/off setting of the form (`boolean`): the label and its hint beside the switch.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (also the control's accessible name).",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the field's root.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the control, read with it; the error takes its place when there is one.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "TagInput",
+      "description": "Free words of the form as chips (`string[]`): tags, keywords.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (also the control's accessible name).",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the field's root.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the control, read with it; the error takes its place when there is one.",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "Partial<Pick<ComboboxLabels, \"results\" | \"toggle\" | \"remove\" | \"empty\" | \"create\">>",
+          "default": null,
+          "description": "The words of the field, passed translated; English by default.",
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "default": null,
+          "description": "Most tags; the field stops offering more past it.",
+          "required": false
+        },
+        {
+          "name": "normalize",
+          "type": "((tag: string) => string)",
+          "default": null,
+          "description": "Cleans a word before it is added (`(t) => t.toLowerCase().replace(/^#/, \"\")`). An empty result is ignored.",
+          "required": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "default": null,
+          "description": "The input's placeholder, passed translated.",
+          "required": false
+        },
+        {
+          "name": "separators",
+          "type": "readonly string[]",
+          "default": null,
+          "description": "Keys that add the word, besides Enter. Default `[\",\"]`.",
+          "required": false
+        },
+        {
+          "name": "suggestions",
+          "type": "readonly string[]",
+          "default": null,
+          "description": "Words offered as the person types (their own history, a curated list).",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "TextArea",
+      "description": "A longer text of the form (a bio, a description, a report).",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (also the control's accessible name).",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the field's root.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the control, read with it; the error takes its place when there is one.",
+          "required": false
+        },
+        {
+          "name": "maxLength",
+          "type": "number",
+          "default": null,
+          "description": "The most characters.",
+          "required": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "default": null,
+          "description": "An example of a value, passed translated.",
+          "required": false
+        },
+        {
+          "name": "rows",
+          "type": "number",
+          "default": "4",
+          "description": "The visible lines. Default 4.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "TextField",
+      "description": "A text field of the form: label, input, hint or error, an optional check on the server.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The visible label, passed translated (also the control's accessible name).",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form).",
+          "required": true
+        },
+        {
+          "name": "asyncDebounceMs",
+          "type": "number",
+          "default": null,
+          "description": "The wait, in ms, between the last key and `validateAsync`. Default 350.",
+          "required": false
+        },
+        {
+          "name": "autoComplete",
+          "type": "string",
+          "default": null,
+          "description": "The browser's autofill (`email`, `username`, `new-password`, `name`).",
+          "required": false
+        },
+        {
+          "name": "availableHint",
+          "type": "string",
+          "default": null,
+          "description": "The words once `validateAsync` accepted the value (\"@eric is free\"), passed translated.",
+          "required": false
+        },
+        {
+          "name": "checkingLabel",
+          "type": "string",
+          "default": "Checking",
+          "description": "The name of the wait while it checks (\"Checking\"), passed translated.",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the field's root.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available.",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "A help text under the control, read with it; the error takes its place when there is one.",
+          "required": false
+        },
+        {
+          "name": "inputMode",
+          "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\"",
+          "default": null,
+          "description": "The keyboard on a phone (`numeric`, `decimal`).",
+          "required": false
+        },
+        {
+          "name": "maxLength",
+          "type": "number",
+          "default": null,
+          "description": "The most characters.",
+          "required": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "default": null,
+          "description": "An example of a value, passed translated — never the label.",
+          "required": false
+        },
+        {
+          "name": "start",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Something before the text (an `@`, an icon).",
+          "required": false
+        },
+        {
+          "name": "transform",
+          "type": "((raw: string) => string)",
+          "default": null,
+          "description": "Cleans what is typed before it is stored (`(v) => v.toLowerCase().replace(/\\s+/g, \"_\")`).",
+          "required": false
+        },
+        {
+          "name": "type",
+          "type": "\"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"password\"",
+          "default": "text",
+          "description": "`text` (default), `email`, `password`, `url`, `tel`, `search`: the right keyboard on a phone.",
+          "required": false
+        },
+        {
+          "name": "validateAsync",
+          "type": "FieldCheck<string>",
+          "default": null,
+          "description": "Checks the value on the server as it is typed (availability): an error key, or nothing when it is fine.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Watch",
+      "description": "Renders from a field's current value (a part shown only when a box is ticked, a total).",
+      "props": [
+        {
+          "name": "children",
+          "type": "(value: unknown) => ReactNode",
+          "default": null,
+          "description": "Draws from its current value: show a part of the form only when a box is ticked.",
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "default": null,
+          "description": "The field to follow (typed by the form).",
+          "required": true
+        }
+      ]
+    }
+  ]
+}