From 6b373d18d78c794c1916e1f807e5732951336868 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 12:41:46 +0500
Subject: [PATCH 01/18] Rename to @javaabu/forms; ESM + CJS build, prepare,
 coverage, examples and CI on next-gen

Closes #2

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/initial-release.md               |   5 -
 .changeset/rename-to-javaabu-forms.md       |   5 +
 .github/workflows/ci.yml                    |  25 ++++-
 .prettierignore                             |   1 +
 AGENTS.md                                   |   6 +-
 README.md                                   |  13 ++-
 docs/basic-usage/map-input.md               |   2 +-
 docs/basic-usage/wysiwyg.md                 |   2 +-
 docs/installation-and-setup.md              |  12 +-
 docs/migrating-from-blade.md                |   4 +-
 eslint.config.js                            |   2 +-
 examples/index.html                         |  24 ++++
 playground/index.html => examples/onu.html  |   4 +-
 {playground/src => examples/onu}/main.tsx   |   2 +-
 {playground/src => examples/onu}/styles.css |   0
 {playground/src => examples}/vite-env.d.ts  |   0
 examples/vite.config.ts                     |  19 ++++
 package.json                                |  31 +++++-
 playground/vite.config.ts                   |   9 --
 pnpm-lock.yaml                              | 115 ++++++++++++++++----
 src/components/textarea.tsx                 |   2 +-
 src/index.ts                                |   2 +-
 src/styles/tailwind.css                     |   4 +-
 tsconfig.json                               |   2 +-
 vite.config.ts                              |  23 ++--
 vitest.config.ts                            |   6 +
 26 files changed, 240 insertions(+), 80 deletions(-)
 delete mode 100644 .changeset/initial-release.md
 create mode 100644 .changeset/rename-to-javaabu-forms.md
 create mode 100644 examples/index.html
 rename playground/index.html => examples/onu.html (73%)
 rename {playground/src => examples/onu}/main.tsx (98%)
 rename {playground/src => examples/onu}/styles.css (100%)
 rename {playground/src => examples}/vite-env.d.ts (100%)
 create mode 100644 examples/vite.config.ts
 delete mode 100644 playground/vite.config.ts

diff --git a/.changeset/initial-release.md b/.changeset/initial-release.md
deleted file mode 100644
index 3c66eed..0000000
--- a/.changeset/initial-release.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@javaabu/react-forms": minor
----
-
-First release: React versions of the javaabu/forms Blade components on Onu. Includes model binding, old input, Laravel validation errors, method spoofing, the select2 cascades and fallbacks, file uploads, conditional sections, and listing tables with select-all and sorting.
diff --git a/.changeset/rename-to-javaabu-forms.md b/.changeset/rename-to-javaabu-forms.md
new file mode 100644
index 0000000..0f70a34
--- /dev/null
+++ b/.changeset/rename-to-javaabu-forms.md
@@ -0,0 +1,5 @@
+---
+"@javaabu/forms": minor
+---
+
+Renamed from `@javaabu/react-forms` to `@javaabu/forms`. The package now ships CommonJS next to ESM, and builds itself when installed from Git (`github:Javaabu/react-forms#next-gen`).
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 7270e4b..bba850e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -2,16 +2,24 @@ name: CI
 
 on:
   push:
-    branches: [main]
+    branches: [main, next-gen]
   pull_request:
 
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
 jobs:
   check:
+    name: Lint, typecheck, test, build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
           node-version: 22
           cache: pnpm
@@ -19,5 +27,14 @@ jobs:
       - run: pnpm lint
       - run: pnpm format:check
       - run: pnpm typecheck
-      - run: pnpm test
+      - name: Unit tests with coverage
+        run: pnpm test:coverage
+      - name: Upload coverage
+        uses: codecov/codecov-action@v5
+        with:
+          files: coverage/lcov.info
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: false
       - run: pnpm build
+      - name: Examples
+        run: pnpm examples:build
diff --git a/.prettierignore b/.prettierignore
index 941f8aa..ba0ab70 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,3 +3,4 @@ coverage
 pnpm-lock.yaml
 CHANGELOG.md
 docs
+examples/dist
diff --git a/AGENTS.md b/AGENTS.md
index 616d58f..d694cdf 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,6 +1,6 @@
 # React Forms: notes for AI coding agents
 
-`@javaabu/react-forms` is the React port of the [`javaabu/forms`](https://github.com/Javaabu/forms) Blade components and the form behaviour of [`@javaabu/js-utilities`](https://github.com/Javaabu/js-utilities), built on [`@javaabu/onu`](https://github.com/Javaabu/onu).
+`@javaabu/forms` is the React port of the [`javaabu/forms`](https://github.com/Javaabu/forms) Blade components and the form behaviour of [`@javaabu/js-utilities`](https://github.com/Javaabu/js-utilities), built on [`@javaabu/onu`](https://github.com/Javaabu/onu).
 
 ## Layout
 
@@ -11,7 +11,7 @@
 | `src/support`            | Ports of the Laravel / javaabu helpers (`Str`, `data_get`, `AllowedMimeTypes`, …)                                                         |
 | `src/locales`            | `en` / `dv` strings (from `lang/*/strings.php`)                                                                                           |
 | `src/editor`, `src/maps` | Separate entries for the heavy Onu editor and maps                                                                                        |
-| `playground`             | `pnpm dev`: every component on one page (`?dv` for Dhivehi)                                                                               |
+| `examples`               | `pnpm examples`: one page per integration (`?dv` for Dhivehi)                                                                             |
 | `docs`                   | One page per Blade docs page, plus `migrating-from-blade.md`                                                                              |
 
 ## Rules
@@ -28,5 +28,5 @@ pnpm install
 pnpm lint && pnpm format:check && pnpm typecheck
 pnpm test
 pnpm build
-pnpm dev
+pnpm examples
 ```
diff --git a/README.md b/README.md
index 2e75548..e706c31 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,11 @@
-# React Forms
+# Forms for React
 
-`@javaabu/react-forms` is the React port of [`javaabu/forms`](https://github.com/Javaabu/forms), the Laravel Blade components. It also covers the form behaviour of [`@javaabu/js-utilities`](https://github.com/Javaabu/js-utilities). It is built on [Onu](https://www.npmjs.com/package/@javaabu/onu), Javaabu's React UI library, so it inherits RTL and Dhivehi support, Thaana typing, theming and WCAG 2.2 AA accessibility.
+[![Tests](https://github.com/Javaabu/react-forms/actions/workflows/ci.yml/badge.svg?branch=next-gen)](https://github.com/Javaabu/react-forms/actions/workflows/ci.yml?query=branch%3Anext-gen)
+[![Coverage](https://codecov.io/gh/Javaabu/react-forms/branch/next-gen/graph/badge.svg)](https://codecov.io/gh/Javaabu/react-forms/tree/next-gen)
+[![npm](https://img.shields.io/npm/v/@javaabu/forms.svg)](https://www.npmjs.com/package/@javaabu/forms)
+[![License](https://img.shields.io/github/license/Javaabu/react-forms.svg)](LICENSE.md)
+
+`@javaabu/forms` is the React port of [`javaabu/forms`](https://github.com/Javaabu/forms), the Laravel Blade components. It also covers the form behaviour of [`@javaabu/js-utilities`](https://github.com/Javaabu/js-utilities). It is built on [Onu](https://www.npmjs.com/package/@javaabu/onu), Javaabu's React UI library, so it inherits RTL and Dhivehi support, Thaana typing, theming and WCAG 2.2 AA accessibility.
 
 The API follows the Blade components. Blade attributes become camelCase props, and slots become props or children.
 
@@ -14,7 +19,7 @@ The API follows the Blade components. Blade attributes become camelCase props, a
 ```
 
 ```tsx
-import * as Forms from "@javaabu/react-forms"
+import * as Forms from "@javaabu/forms"
 
 ;<Forms.Form model={article} method="PATCH" action={route("articles.update", article.id)}>
   <Forms.Text name="title" required />
@@ -43,7 +48,7 @@ import * as Forms from "@javaabu/react-forms"
 
 ```bash
 pnpm install
-pnpm dev          # playground with every component (add ?dv for Dhivehi)
+pnpm examples     # one page per integration (add ?dv for Dhivehi)
 pnpm test
 pnpm lint && pnpm typecheck && pnpm format:check
 pnpm build
diff --git a/docs/basic-usage/map-input.md b/docs/basic-usage/map-input.md
index 31d5403..7487f1f 100644
--- a/docs/basic-usage/map-input.md
+++ b/docs/basic-usage/map-input.md
@@ -4,7 +4,7 @@ sidebar_position: 8.5
 ---
 
 ```tsx
-import { MapInput } from "@javaabu/react-forms/maps"
+import { MapInput } from "@javaabu/forms/maps"
 
 <MapInput name="location" model={venue} />
 <MapInput name="area" enableRadius radiusUnit="km" />
diff --git a/docs/basic-usage/wysiwyg.md b/docs/basic-usage/wysiwyg.md
index 6929876..a378732 100644
--- a/docs/basic-usage/wysiwyg.md
+++ b/docs/basic-usage/wysiwyg.md
@@ -4,7 +4,7 @@ sidebar_position: 8
 ---
 
 ```tsx
-import { Wysiwyg } from "@javaabu/react-forms/editor"
+import { Wysiwyg } from "@javaabu/forms/editor"
 
 <Wysiwyg name="message" />
 <Wysiwyg name="body" model={article} thaana />
diff --git a/docs/installation-and-setup.md b/docs/installation-and-setup.md
index 1e814dd..5f30e89 100644
--- a/docs/installation-and-setup.md
+++ b/docs/installation-and-setup.md
@@ -4,7 +4,7 @@ sidebar_position: 1.2
 ---
 
 ```bash
-npm install @javaabu/react-forms @javaabu/onu
+npm install @javaabu/forms @javaabu/onu
 ```
 
 `@javaabu/onu` is a peer dependency. Set Onu up first (see its installation guide), then let Tailwind CSS v4 see this package's classes too:
@@ -12,14 +12,14 @@ npm install @javaabu/react-forms @javaabu/onu
 ```css
 @import "tailwindcss";
 @import "@javaabu/onu/tailwind.css";
-@import "@javaabu/react-forms/tailwind.css";
+@import "@javaabu/forms/tailwind.css";
 ```
 
 Wrap the app once:
 
 ```tsx
 import { OnuProvider, ThemeProvider } from "@javaabu/onu"
-import { FormsProvider } from "@javaabu/react-forms"
+import { FormsProvider } from "@javaabu/forms"
 
 <ThemeProvider>
   <OnuProvider locale={dv}>
@@ -48,7 +48,7 @@ The package strings follow Onu's locale. English and Dhivehi are built in.
 A namespace import reads like Blade's `x-forms::` prefix and avoids clashes with the globals `Date`, `Number`, `File` and `Image`:
 
 ```tsx
-import * as Forms from "@javaabu/react-forms"
+import * as Forms from "@javaabu/forms"
 
 <Forms.Date name="published_at" />
 ```
@@ -56,6 +56,6 @@ import * as Forms from "@javaabu/react-forms"
 The rich text editor and the map input have their own entries, so their heavy dependencies only load when you use them:
 
 ```tsx
-import { Wysiwyg } from "@javaabu/react-forms/editor"
-import { MapInput } from "@javaabu/react-forms/maps"
+import { Wysiwyg } from "@javaabu/forms/editor"
+import { MapInput } from "@javaabu/forms/maps"
 ```
diff --git a/docs/migrating-from-blade.md b/docs/migrating-from-blade.md
index d73ba2e..04f39db 100644
--- a/docs/migrating-from-blade.md
+++ b/docs/migrating-from-blade.md
@@ -14,12 +14,12 @@ Attributes become camelCase props (`show-label` → `showLabel`, `:options="$x"`
 | `x-forms::form-group`, `label`, `label-required`, `input-help`, `errors` | `FormGroup`, `Label`, `LabelRequired`, `InputHelp`, `Errors` | `FormField`, `Label`, `RequiredMarker`, `HelpText`, `FieldErrors` |
 | `x-forms::input`, `text`, `email`, `password`, `number`, `tel`, `url`, `hidden`, `latitude`, `longitude` | `Input`, `Text`, `Email`, `Password`, `Number`, `Tel`, `Url`, `Hidden`, `Latitude`, `Longitude` | `TextInput`, `EmailInput`, `PasswordInput`, `NumberInput`, `UrlInput`, `HiddenInput` |
 | `x-forms::textarea` | `Textarea` | `Textarea` |
-| `x-forms::wysiwyg`, `textarea wysiwyg` | `Wysiwyg` (`@javaabu/react-forms/editor`) | `WysiwygEditor` |
+| `x-forms::wysiwyg`, `textarea wysiwyg` | `Wysiwyg` (`@javaabu/forms/editor`) | `WysiwygEditor` |
 | `x-forms::checkbox`, `radio` | `Checkbox`, `Radio` | `Checkbox`, native radio |
 | `x-forms::date`, `datetime`, `time` | `Date`, `Datetime`, `Time` | `DatePicker`, `DateTimePicker`, `TimePicker` |
 | `x-forms::select`, `select2` | `Select`, `Select2` | `Select`, `SearchableSelect`, `MultiSelect`, `ApiSelect`, `QuickCreateSelect` |
 | `x-forms::file`, `file-upload`, `image`, `image-upload` | `File`, `FileUpload`, `Image`, `ImageUpload` | `FileInput`, `ImageInput` |
-| `x-forms::map-input` | `MapInput` (`@javaabu/react-forms/maps`) | `MapPicker`, `MapRadius`, `MapPolygon` |
+| `x-forms::map-input` | `MapInput` (`@javaabu/forms/maps`) | `MapPicker`, `MapRadius`, `MapPolygon` |
 | `x-forms::conditional-wrapper` | `ConditionalWrapper` | `ConditionalDisplay` |
 | `x-forms::button`, `submit`, `link-button`, `button-group` | `Button`, `Submit`, `LinkButton`, `ButtonGroup` | `Button`, `LinkButton`, `ButtonGroup` |
 | `x-forms::alert` | `Alert` | `Callout` |
diff --git a/eslint.config.js b/eslint.config.js
index 5256648..b78020d 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -8,7 +8,7 @@ const physical =
   /(^|[\s:"'`])-?(ml|mr|pl|pr|left|right|rounded-l|rounded-r|border-l|border-r|text-left|text-right)(-|\b)/
 
 export default tseslint.config(
-  { ignores: ["dist", "coverage", "node_modules"] },
+  { ignores: ["dist", "coverage", "node_modules", "examples/dist"] },
   js.configs.recommended,
   ...tseslint.configs.recommended,
   {
diff --git a/examples/index.html b/examples/index.html
new file mode 100644
index 0000000..b15d8e0
--- /dev/null
+++ b/examples/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@javaabu/forms examples</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        max-width: 40rem;
+        margin: 2rem auto;
+        padding: 0 1rem;
+        line-height: 1.6;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>@javaabu/forms examples</h1>
+    <p>Each page renders the same forms through a different integration.</p>
+    <ul id="pages">
+      <li><a href="./onu.html">Onu</a> (<a href="./onu.html?dv">Dhivehi</a>): every component on the Onu adapter</li>
+    </ul>
+  </body>
+</html>
diff --git a/playground/index.html b/examples/onu.html
similarity index 73%
rename from playground/index.html
rename to examples/onu.html
index d55dd8f..b6cf5aa 100644
--- a/playground/index.html
+++ b/examples/onu.html
@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="csrf-token" content="playground-token" />
-    <title>react-forms playground</title>
+    <title>@javaabu/forms with Onu</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/onu/main.tsx"></script>
   </body>
 </html>
diff --git a/playground/src/main.tsx b/examples/onu/main.tsx
similarity index 98%
rename from playground/src/main.tsx
rename to examples/onu/main.tsx
index a23313f..1a927d8 100644
--- a/playground/src/main.tsx
+++ b/examples/onu/main.tsx
@@ -46,7 +46,7 @@ function App() {
         <Forms.FormsProvider settings={{ max_upload_file_size: 10240, max_image_file_size: 2048 }}>
           <main className="mx-auto max-w-4xl gap-8 p-6 grid">
             <div className="flex items-center justify-between">
-              <h1 className="text-2xl font-semibold">@javaabu/react-forms</h1>
+              <h1 className="text-2xl font-semibold">@javaabu/forms</h1>
               <Forms.Button color="light" onClick={() => setRtl((v) => !v)}>
                 {rtl ? "English" : "ދިވެހި"}
               </Forms.Button>
diff --git a/playground/src/styles.css b/examples/onu/styles.css
similarity index 100%
rename from playground/src/styles.css
rename to examples/onu/styles.css
diff --git a/playground/src/vite-env.d.ts b/examples/vite-env.d.ts
similarity index 100%
rename from playground/src/vite-env.d.ts
rename to examples/vite-env.d.ts
diff --git a/examples/vite.config.ts b/examples/vite.config.ts
new file mode 100644
index 0000000..ccd7a39
--- /dev/null
+++ b/examples/vite.config.ts
@@ -0,0 +1,19 @@
+import { resolve } from "node:path"
+import tailwindcss from "@tailwindcss/vite"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+/** One page per integration, rendered against the source. `pnpm examples` serves them, `pnpm examples:build` builds them. */
+const pages = ["index", "onu"]
+
+export default defineConfig({
+  root: import.meta.dirname,
+  plugins: [react(), tailwindcss()],
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+    rollupOptions: {
+      input: Object.fromEntries(pages.map((page) => [page, resolve(import.meta.dirname, `${page}.html`)])),
+    },
+  },
+})
diff --git a/package.json b/package.json
index e9183c2..c128c00 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "@javaabu/react-forms",
+  "name": "@javaabu/forms",
   "version": "0.0.0",
-  "description": "React port of the javaabu/forms Laravel Blade components, built on the Onu UI library: model binding, old input, Laravel errors and the js-utilities behaviours.",
+  "description": "React version of the javaabu/forms Laravel Blade components: model binding, old input, Laravel validation errors, Inertia and Wayfinder support, with adapters for Onu, shadcn/ui or any UI framework.",
   "license": "MIT",
   "author": {
     "name": "Javaabu Pvt. Ltd.",
@@ -20,7 +20,9 @@
     "forms",
     "laravel",
     "inertia",
+    "wayfinder",
     "onu",
+    "shadcn",
     "rtl",
     "dhivehi",
     "javaabu"
@@ -33,20 +35,25 @@
     "dist",
     "src/styles",
     "docs",
+    "resources",
+    "llms.txt",
     "README.md"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./editor": {
       "types": "./dist/editor/index.d.ts",
-      "default": "./dist/editor/index.js"
+      "import": "./dist/editor/index.js",
+      "require": "./dist/editor/index.cjs"
     },
     "./maps": {
       "types": "./dist/maps/index.d.ts",
-      "default": "./dist/maps/index.js"
+      "import": "./dist/maps/index.js",
+      "require": "./dist/maps/index.cjs"
     },
     "./tailwind.css": "./src/styles/tailwind.css",
     "./package.json": "./package.json"
@@ -57,15 +64,18 @@
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.build.json",
+    "prepare": "pnpm build",
     "test": "vitest run",
     "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "lint": "eslint .",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "changeset": "changeset",
     "release": "pnpm build && changeset publish",
-    "dev": "vite --config playground/vite.config.ts"
+    "examples": "vite --config examples/vite.config.ts",
+    "examples:build": "vite build --config examples/vite.config.ts"
   },
   "peerDependencies": {
     "@javaabu/onu": "^0.1.0",
@@ -87,6 +97,7 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.2",
+    "@vitest/coverage-v8": "^5.1.0",
     "eslint": "^10.12.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "globals": "^17.13.0",
@@ -99,5 +110,13 @@
     "typescript-eslint": "^8.72.0",
     "vite": "^8.3.4",
     "vitest": "^5.0.5"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "peerDependenciesMeta": {
+    "@javaabu/onu": {
+      "optional": true
+    }
   }
 }
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
deleted file mode 100644
index a36064f..0000000
--- a/playground/vite.config.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import tailwindcss from "@tailwindcss/vite"
-import react from "@vitejs/plugin-react"
-import { defineConfig } from "vite"
-
-/** A page that renders every component against the source, for manual and screenshot checks. */
-export default defineConfig({
-  root: import.meta.dirname,
-  plugins: [react(), tailwindcss()],
-})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 49c9d3b..570e0bc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -31,7 +31,7 @@ importers:
         version: 4.3.3(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
       '@testing-library/jest-dom':
         specifier: ^7.0.1
-        version: 7.0.1(@testing-library/dom@10.4.2)(vitest@5.0.5(@types/node@26.6.5)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1)))
+        version: 7.0.1(@testing-library/dom@10.4.2)(vitest@5.0.5)
       '@testing-library/react':
         specifier: ^16.3.3
         version: 16.3.3(@testing-library/dom@10.4.2)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
@@ -50,6 +50,9 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^6.1.2
         version: 6.1.2(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+      '@vitest/coverage-v8':
+        specifier: ^5.1.0
+        version: 5.1.0(vitest@5.0.5)
       eslint:
         specifier: ^10.12.0
         version: 10.13.0(jiti@2.7.0)
@@ -85,7 +88,7 @@ importers:
         version: 8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1)
       vitest:
         specifier: ^5.0.5
-        version: 5.0.5(@types/node@26.6.5)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+        version: 5.0.5(@types/node@26.6.5)(@vitest/coverage-v8@5.1.0)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
 
 packages:
 
@@ -159,9 +162,6 @@ packages:
     resolution: {integrity: sha512-NpugTzbKgGrNe45Ui32cN8vCFFMxVtP/9rtfwv0nP5FRDAjvYBxJcLVpYA9mr1jxP6cnIT7x9LUzuDTbWYYNRA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/runtime@8.0.7':
-    resolution: {integrity: sha512-k0hagDDq/6w4v+0Sp4wFvIz/yswH5O7Va6aRTnD7N62Tnborp4X+YB+H3XUcWVSR4aE47WPEXiIIZchBs0GmYg==}
-
   '@babel/template@7.29.7':
     resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
     engines: {node: '>=6.9.0'}
@@ -201,6 +201,10 @@ packages:
       '@types/react':
         optional: true
 
+  '@bcoe/v8-coverage@1.0.2':
+    resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
+    engines: {node: '>=18'}
+
   '@bramus/specificity@2.4.3':
     resolution: {integrity: sha512-0GEz8qJWokkUVYQYRukmkSHIFNoBH8QTreeHrAFbvz1XFYc3Y+puhMs8PQ5x8GNugiC2l5jvDBXKLbBIByeSBw==}
     hasBin: true
@@ -1705,6 +1709,23 @@ packages:
       oxc-transform-react:
         optional: true
 
+  '@vitest/coverage-v8@5.1.0':
+    resolution: {integrity: sha512-OY9aShBQG5KOIw2zCo9fDoCHI9RHliNHJ//nM7m6jGg41Hyke9JOGWmeMlK74xYErsxMoK8mIB3gAeEyFVA7LA==}
+    peerDependencies:
+      '@vitest/browser': 5.1.0
+      vitest: 5.1.0
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
+
+  '@vitest/istanbul-lib-coverage@2.1.0':
+    resolution: {integrity: sha512-WOjuS+xcjSIy7ruYBQ+9BUcV7XZQ0FyVcbWbWxW9TRx/kLGx5SQaeFRIFDJxjNplb6YsT7SpKo2zuXXUo91OIQ==}
+    engines: {node: '>=22'}
+
+  '@vitest/istanbul-lib-report@2.1.0':
+    resolution: {integrity: sha512-+ZFta25nWtGCOBG9/IET8w1RO5Oawsd6H8Uf6AJ9EA/StFuKVtKAEJEJ6uRt84OH+T4YkI0ASmIHAhRA+0KVxw==}
+    engines: {node: '>=22'}
+
   '@vitest/mocker@5.0.5':
     resolution: {integrity: sha512-xLL3lkDegJZw+MGoGaCCsFayDZthGgpAtr3Vziyfc4p7xH89K7KRPcRBBh/kEYm0Aqkt5DtTmkYpBtRV/FrHZg==}
     peerDependencies:
@@ -1755,6 +1776,9 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
+  ast-v8-to-istanbul@1.0.7:
+    resolution: {integrity: sha512-kFL68AG6ajd8fg248zwM9GQrUWEp79gsmjum34OEXjs4yHuUMZfYKwOLW9GMmB4oNvVrj+EAGxsP7ye2UR9UlA==}
+
   attr-accept@4.0.1:
     resolution: {integrity: sha512-rOKAGOwbnTUvwTL8rNA0hWnU3uX9tOI20di4KjR5I1ez/RJmnA37W3zz4EMxGC2YnI289yPjRy63CdAZeQFZ4Q==}
     engines: {node: '>= 22'}
@@ -1996,8 +2020,8 @@ packages:
   file-entry-cache@11.1.5:
     resolution: {integrity: sha512-+PFTHITI08JIGhnNpGNI8T8inUpgZfk3GNEqfT9R2zZV2iFXg3CvqzSl/uEhs7TSGujYRELEANyDvS8Fj7+S7Q==}
 
-  file-selector@5.0.1:
-    resolution: {integrity: sha512-v0g/PTeuQgvKCBrVRsfVudvwXlRHSWHEQkVgKawgCGHkEpKA1clp3Om5jvEVhz8G9W/mOYjJH9FhkH4C888PgQ==}
+  file-selector@5.0.2:
+    resolution: {integrity: sha512-1hAy178VaMCWWj/vSUITOTpLWH1PoGW3eO7i3kPIppuSyOHBm3o1cHq+CvKAM5hQKQXlazrDt/3K1HCXgs7MpQ==}
     engines: {node: '>= 22'}
 
   find-up@5.0.0:
@@ -2115,6 +2139,9 @@ packages:
   jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
+  js-tokens@10.0.0:
+    resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -2333,6 +2360,9 @@ packages:
   magic-string@1.4.3:
     resolution: {integrity: sha512-z12OxmaPGE0F4xlpGdjuAUckipLpQlTAuAmyGhNoD7ODpYUzvDfvtxUbjM/jwznyP178oju/KDdyi220wNJ0RQ==}
 
+  magicast@0.5.5:
+    resolution: {integrity: sha512-UicdXN8zQ3JHlxVq+28afMXPr1z7WNY6+7EJnzTdQWkTAlMLF5fNCCKxJHBQwGaNGR11581EiQmQzx73+MvszA==}
+
   mdn-data@2.27.1:
     resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
 
@@ -2520,11 +2550,15 @@ packages:
       '@types/react':
         optional: true
 
-  react-resizable-panels@4.14.7:
-    resolution: {integrity: sha512-UP8lccy1yGA8p8c6UvPaMDnqYePv/CWOv3R6rTAJ9f+UmuaeiTFDJlvcp5rFu5GJcQ1ofCmkjbzp0HceJXZRbw==}
+  react-resizable-panels@4.18.0:
+    resolution: {integrity: sha512-ACofxw/KAyxYa+3uCT9FAFR38HeoDhnSP5Lw9Jgm8u3fDcrDlQxArgW67P6ohd/SUVKMv4Lw4u37aV/G76Sp3Q==}
     peerDependencies:
+      '@types/react': ^18.2.6 || ^19.0.0
       react: ^18.0.0 || ^19.0.0
       react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
   react-stately@3.51.0:
     resolution: {integrity: sha512-YJcmkAXu2XOQP97hO/qz/cC3qv9kni3oVhwBlxWr358BHePJUpY15XwL3YSRMKxYt4EkslPqAz11JRirMfANGw==}
@@ -2635,6 +2669,10 @@ packages:
     resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
     engines: {node: '>=12.0.0'}
 
+  tinyrainbow@3.2.0:
+    resolution: {integrity: sha512-LgO3D9yZJjApUiuUfl9iFAwrtaX4+lok3wJIqttGoKCHlWUqHqbQpnxCf82L8FjgKsh4iGo78hqJwgL8F6To2A==}
+    engines: {node: '>=14.0.0'}
+
   tldts-core@7.4.18:
     resolution: {integrity: sha512-KI2PKvCmvQI/xD6ypPqkU0i7oxNXR/O58RLRaHR4svsgVUQ2JE/XC8BtMbG6PSehD27I8sZJRcC1ASnCy6lp3g==}
 
@@ -2968,8 +3006,6 @@ snapshots:
 
   '@babel/runtime@7.29.10': {}
 
-  '@babel/runtime@8.0.7': {}
-
   '@babel/template@7.29.7':
     dependencies:
       '@babel/code-frame': 7.29.7
@@ -2995,7 +3031,7 @@ snapshots:
 
   '@base-ui/react@1.9.0(@date-fns/tz@1.5.0)(@types/react@19.3.0)(date-fns@4.4.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)':
     dependencies:
-      '@babel/runtime': 8.0.7
+      '@babel/runtime': 7.29.10
       '@base-ui/utils': 0.5.0(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
       '@floating-ui/react-dom': 2.1.9(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
       '@floating-ui/utils': 0.2.12
@@ -3009,7 +3045,7 @@ snapshots:
 
   '@base-ui/utils@0.5.0(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)':
     dependencies:
-      '@babel/runtime': 8.0.7
+      '@babel/runtime': 7.29.10
       '@floating-ui/utils': 0.2.12
       react: 19.3.1
       react-dom: 19.3.1(react@19.3.1)
@@ -3018,6 +3054,8 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.3.0
 
+  '@bcoe/v8-coverage@1.0.2': {}
+
   '@bramus/specificity@2.4.3':
     dependencies:
       css-tree: 3.2.1
@@ -3333,7 +3371,7 @@ snapshots:
       react-dropzone: 20.1.4(@types/react@19.3.0)(react@19.3.1)
       react-hook-form: 7.90.0(@types/react@19.3.0)(react@19.3.1)
       react-phone-number-input: 3.4.18(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
-      react-resizable-panels: 4.14.7(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
+      react-resizable-panels: 4.18.0(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
       sonner: 2.0.8(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
       tailwind-merge: 3.7.0
       tailwindcss: 4.3.3
@@ -4328,7 +4366,7 @@ snapshots:
       picocolors: 1.1.1
       pretty-format: 27.5.1
 
-  '@testing-library/jest-dom@7.0.1(@testing-library/dom@10.4.2)(vitest@5.0.5(@types/node@26.6.5)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1)))':
+  '@testing-library/jest-dom@7.0.1(@testing-library/dom@10.4.2)(vitest@5.0.5)':
     dependencies:
       '@adobe/css-tools': 4.5.0
       '@testing-library/dom': 10.4.2
@@ -4338,7 +4376,7 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
     optionalDependencies:
-      vitest: 5.0.5(@types/node@26.6.5)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+      vitest: 5.0.5(@types/node@26.6.5)(@vitest/coverage-v8@5.1.0)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
 
   '@testing-library/react@16.3.3(@testing-library/dom@10.4.2)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)':
     dependencies:
@@ -4477,6 +4515,24 @@ snapshots:
       '@rolldown/pluginutils': 1.0.1
       vite: 8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1)
 
+  '@vitest/coverage-v8@5.1.0(vitest@5.0.5)':
+    dependencies:
+      '@bcoe/v8-coverage': 1.0.2
+      '@vitest/istanbul-lib-coverage': 2.1.0
+      '@vitest/istanbul-lib-report': 2.1.0
+      ast-v8-to-istanbul: 1.0.7
+      magicast: 0.5.5
+      obug: 3.0.0
+      std-env: 4.3.0
+      tinyrainbow: 3.2.0
+      vitest: 5.0.5(@types/node@26.6.5)(@vitest/coverage-v8@5.1.0)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+
+  '@vitest/istanbul-lib-coverage@2.1.0': {}
+
+  '@vitest/istanbul-lib-report@2.1.0':
+    dependencies:
+      '@vitest/istanbul-lib-coverage': 2.1.0
+
   '@vitest/mocker@5.0.5(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))':
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
@@ -4517,6 +4573,12 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
+  ast-v8-to-istanbul@1.0.7:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      estree-walker: 3.0.3
+      js-tokens: 10.0.0
+
   attr-accept@4.0.1: {}
 
   balanced-match@4.0.4: {}
@@ -4757,7 +4819,7 @@ snapshots:
     dependencies:
       flat-cache: 6.1.23
 
-  file-selector@5.0.1: {}
+  file-selector@5.0.2: {}
 
   find-up@5.0.0:
     dependencies:
@@ -4845,6 +4907,8 @@ snapshots:
 
   jju@1.4.0: {}
 
+  js-tokens@10.0.0: {}
+
   js-tokens@4.0.0: {}
 
   jsdom@30.1.3:
@@ -5026,6 +5090,12 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.6.0
 
+  magicast@0.5.5:
+    dependencies:
+      '@babel/parser': 7.29.9
+      '@babel/types': 7.29.8
+      source-map-js: 1.2.2
+
   mdn-data@2.27.1: {}
 
   min-indent@1.0.1: {}
@@ -5211,7 +5281,7 @@ snapshots:
   react-dropzone@20.1.4(@types/react@19.3.0)(react@19.3.1):
     dependencies:
       attr-accept: 4.0.1
-      file-selector: 5.0.1
+      file-selector: 5.0.2
       react: 19.3.1
     optionalDependencies:
       '@types/react': 19.3.0
@@ -5255,10 +5325,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.3.0
 
-  react-resizable-panels@4.14.7(react-dom@19.3.1(react@19.3.1))(react@19.3.1):
+  react-resizable-panels@4.18.0(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1):
     dependencies:
       react: 19.3.1
       react-dom: 19.3.1(react@19.3.1)
+    optionalDependencies:
+      '@types/react': 19.3.0
 
   react-stately@3.51.0(react@19.3.1):
     dependencies:
@@ -5360,6 +5432,8 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.7)
       picomatch: 4.0.7
 
+  tinyrainbow@3.2.0: {}
+
   tldts-core@7.4.18: {}
 
   tldts@7.4.18:
@@ -5456,7 +5530,7 @@ snapshots:
       jiti: 2.7.0
       yaml: 2.9.1
 
-  vitest@5.0.5(@types/node@26.6.5)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1)):
+  vitest@5.0.5(@types/node@26.6.5)(@vitest/coverage-v8@5.1.0)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1)):
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/mocker': 5.0.5(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
@@ -5474,6 +5548,7 @@ snapshots:
       why-is-node-running: 3.2.1
     optionalDependencies:
       '@types/node': 26.6.5
+      '@vitest/coverage-v8': 5.1.0(vitest@5.0.5)
       jsdom: 30.1.3
     transitivePeerDependencies:
       - msw
diff --git a/src/components/textarea.tsx b/src/components/textarea.tsx
index b8a2d17..73f1ef6 100644
--- a/src/components/textarea.tsx
+++ b/src/components/textarea.tsx
@@ -25,7 +25,7 @@ export interface TextareaProps extends FieldProps, PlaceholderProps, NativeTexta
 
 /**
  * `<x-forms::textarea>`. For a rich text editor use `Wysiwyg` from
- * `@javaabu/react-forms/editor` (Blade's `wysiwyg` attribute).
+ * `@javaabu/forms/editor` (Blade's `wysiwyg` attribute).
  */
 export function Textarea(props: TextareaProps) {
   const { field, rest } = splitFieldProps(props)
diff --git a/src/index.ts b/src/index.ts
index 8f4ceff..d5fe4fd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
 // Recommended usage mirrors Blade's `<x-forms::input>`:
-//   import * as Forms from "@javaabu/react-forms"
+//   import * as Forms from "@javaabu/forms"
 //   <Forms.Form model={user}><Forms.Text name="name" /></Forms.Form>
 
 // Configuration, binding and the field registry
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index ddf1f00..0821b9c 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,8 +1,8 @@
 /*
- * Let Tailwind CSS v4 see the classes used inside @javaabu/react-forms.
+ * Let Tailwind CSS v4 see the classes used inside @javaabu/forms.
  *
  *   @import "tailwindcss";
  *   @import "@javaabu/onu/tailwind.css";
- *   @import "@javaabu/react-forms/tailwind.css";
+ *   @import "@javaabu/forms/tailwind.css";
  */
 @source "../../dist";
diff --git a/tsconfig.json b/tsconfig.json
index 4e5738f..f6286d7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,5 +16,5 @@
     "resolveJsonModule": true,
     "types": ["vitest/globals", "@testing-library/jest-dom"]
   },
-  "include": ["src", "test", "playground", "vite.config.ts", "vitest.config.ts"]
+  "include": ["src", "test", "examples", "vite.config.ts", "vitest.config.ts"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index cedb9b1..5700297 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,12 +12,19 @@ const isExternal = (id: string) =>
   externals.some((dep) => id === dep || id.startsWith(`${dep}/`)) || /^(react|react-dom)(\/|$)/.test(id)
 
 /** Library entry points, mirrored by package.json `exports`. */
-const entries = {
+export const entries: Record<string, string> = {
   index: "src/index.ts",
   "editor/index": "src/editor/index.tsx",
   "maps/index": "src/maps/index.tsx",
 }
 
+const output = {
+  preserveModules: true,
+  preserveModulesRoot: "src",
+  // Every module may run on the client; mark them for React Server Components.
+  banner: '"use client";',
+}
+
 export default defineConfig({
   plugins: [react()],
   build: {
@@ -27,18 +34,14 @@ export default defineConfig({
     sourcemap: true,
     minify: false,
     lib: {
-      entry: Object.fromEntries(Object.entries(entries).map(([k, v]) => [k, resolve(__dirname, v)])),
-      formats: ["es"],
+      entry: Object.fromEntries(Object.entries(entries).map(([k, v]) => [k, resolve(import.meta.dirname, v)])),
     },
     rollupOptions: {
       external: isExternal,
-      output: {
-        preserveModules: true,
-        preserveModulesRoot: "src",
-        entryFileNames: "[name].js",
-        // Every module may run on the client; mark them for React Server Components.
-        banner: '"use client";',
-      },
+      output: [
+        { ...output, format: "es" as const, entryFileNames: "[name].js" },
+        { ...output, format: "cjs" as const, entryFileNames: "[name].cjs", exports: "named" as const },
+      ],
     },
   },
 })
diff --git a/vitest.config.ts b/vitest.config.ts
index 811c195..e97a7e5 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -11,5 +11,11 @@ export default defineConfig({
     css: false,
     // Onu imports `lucide-react/dynamic` without an extension; let Vite resolve it as an app bundler would.
     server: { deps: { inline: [/@javaabu\/onu/] } },
+    coverage: {
+      provider: "v8",
+      include: ["src/**/*.{ts,tsx}"],
+      exclude: ["src/**/*.test.{ts,tsx}", "src/**/types.ts"],
+      reporter: ["text-summary", "lcov", "json-summary"],
+    },
   },
 })

From 4565fde555c98e3f59f45d714afb6f35e522b5fe Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 13:03:50 +0500
Subject: [PATCH 02/18] UI-framework-agnostic core with an adapter registry;
 Onu adapter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The core (binding, old input, errors, ids, labels, value precedence, submit)
no longer imports Onu. Components render through adapter slots resolved as
FormsProvider components → ui adapter → the HTML base adapter. The Onu
adapter lives in @javaabu/forms/onu (+ /onu/editor, /onu/maps) and the v0
component tests now run through it.

Refs #3, #4

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/ui-agnostic-core.md                |    5 +
 examples/onu/main.tsx                         |  139 +--
 examples/shared/demo.tsx                      |  149 +++
 package.json                                  |   51 +-
 pnpm-lock.yaml                                |  778 +++++++++---
 src/adapters/html/index.tsx                   | 1095 +++++++++++++++++
 src/adapters/onu/editor.tsx                   |   22 +
 src/adapters/onu/index.tsx                    |  537 ++++++++
 src/adapters/onu/maps.tsx                     |   61 +
 .../onu/onu.test.tsx}                         |   44 +-
 src/components/buttons.tsx                    |   66 +-
 src/components/checkbox.tsx                   |  235 ++--
 src/components/dates.tsx                      |  115 +-
 src/components/display.tsx                    |  224 ++--
 src/components/field.tsx                      |  176 ++-
 src/components/files.tsx                      |  269 ++--
 src/components/form.tsx                       |  555 ++++++++-
 src/components/format.tsx                     |   13 +-
 src/components/inputs.tsx                     |  256 ++--
 src/components/listing.tsx                    |  185 +--
 .../index.tsx => components/map-input.tsx}    |  129 +-
 src/components/select-cascade.ts              |    2 +-
 src/components/select.tsx                     |  165 +--
 src/components/textarea.tsx                   |   68 +-
 src/components/wysiwyg.tsx                    |   52 +
 src/context/forms-provider.tsx                |  126 --
 src/core/adapter.ts                           |  559 +++++++++
 src/{context => core}/binding.tsx             |    2 +-
 src/core/errors.ts                            |  228 ++++
 src/core/form-context.tsx                     |  103 ++
 src/core/locales/dv.ts                        |   75 ++
 src/core/locales/en.ts                        |   81 ++
 src/{ => core}/locales/index.ts               |    0
 src/core/provider.tsx                         |  167 +++
 src/{context => core}/registry.ts             |   20 +-
 src/core/remote.ts                            |   64 +
 src/core/router.ts                            |  202 +++
 src/core/strings.ts                           |   49 +
 src/core/thaana.ts                            |   53 +
 src/editor/index.tsx                          |   64 -
 src/html.ts                                   |    2 +
 src/index.ts                                  |   87 +-
 src/locales/dv.ts                             |   66 -
 src/locales/en.ts                             |   72 --
 src/onu-editor.ts                             |    2 +
 src/onu-maps.ts                               |    2 +
 src/onu.ts                                    |    2 +
 src/support/options.ts                        |    6 +-
 vite.config.ts                                |    6 +-
 49 files changed, 5796 insertions(+), 1633 deletions(-)
 create mode 100644 .changeset/ui-agnostic-core.md
 create mode 100644 examples/shared/demo.tsx
 create mode 100644 src/adapters/html/index.tsx
 create mode 100644 src/adapters/onu/editor.tsx
 create mode 100644 src/adapters/onu/index.tsx
 create mode 100644 src/adapters/onu/maps.tsx
 rename src/{components/forms.test.tsx => adapters/onu/onu.test.tsx} (92%)
 rename src/{maps/index.tsx => components/map-input.tsx} (57%)
 create mode 100644 src/components/wysiwyg.tsx
 delete mode 100644 src/context/forms-provider.tsx
 create mode 100644 src/core/adapter.ts
 rename src/{context => core}/binding.tsx (98%)
 create mode 100644 src/core/errors.ts
 create mode 100644 src/core/form-context.tsx
 create mode 100644 src/core/locales/dv.ts
 create mode 100644 src/core/locales/en.ts
 rename src/{ => core}/locales/index.ts (100%)
 create mode 100644 src/core/provider.tsx
 rename src/{context => core}/registry.ts (93%)
 create mode 100644 src/core/remote.ts
 create mode 100644 src/core/router.ts
 create mode 100644 src/core/strings.ts
 create mode 100644 src/core/thaana.ts
 delete mode 100644 src/editor/index.tsx
 create mode 100644 src/html.ts
 delete mode 100644 src/locales/dv.ts
 delete mode 100644 src/locales/en.ts
 create mode 100644 src/onu-editor.ts
 create mode 100644 src/onu-maps.ts
 create mode 100644 src/onu.ts

diff --git a/.changeset/ui-agnostic-core.md b/.changeset/ui-agnostic-core.md
new file mode 100644
index 0000000..2824fce
--- /dev/null
+++ b/.changeset/ui-agnostic-core.md
@@ -0,0 +1,5 @@
+---
+"@javaabu/forms": minor
+---
+
+The core no longer depends on Onu. Components render through an adapter: `<FormsProvider ui={onu}>` with `onu` from `@javaabu/forms/onu`, and `components={{ Select: MySelect }}` replaces single components for the whole app or one form. Without an adapter, components render plain HTML (`@javaabu/forms/html`). `Wysiwyg` and `MapInput` are now in the main entry. Onu's editor and maps come from `@javaabu/forms/onu/editor` and `/onu/maps`, combined with `mergeAdapters(onu, onuEditor, onuMaps)`. The `./editor` and `./maps` entries are gone. Onu is now an optional peer dependency (`^0.2.1`).
diff --git a/examples/onu/main.tsx b/examples/onu/main.tsx
index 1a927d8..2356af1 100644
--- a/examples/onu/main.tsx
+++ b/examples/onu/main.tsx
@@ -1,140 +1,25 @@
-import * as React from "react"
 import { createRoot } from "react-dom/client"
 import { OnuProvider, ThemeProvider } from "@javaabu/onu"
 import { dv } from "@javaabu/onu/locales/dv"
+import { useTranslation } from "@javaabu/i18n/react"
 
-import * as Forms from "../../src"
+import { FormsProvider, mergeAdapters } from "../../src"
+import { onu } from "../../src/onu"
+import { onuEditor } from "../../src/onu-editor"
+import { Demo } from "../shared/demo"
 import "./styles.css"
 
-const article = {
-  title: "Harbour works update",
-  slug: "harbour-works-update",
-  body: "First line\nSecond line",
-  status: "draft",
-  category: { id: 2, name: "News" },
-  tags: [{ id: 1 }, { id: 3 }],
-  published_at: "2026-10-01 09:30:00",
-  is_featured: true,
-  channels: ["email"],
-  type: "quiz",
-  views: 1250,
-  media: [{ collection_name: "attachment", original_url: "/storage/1/report.pdf", file_name: "report.pdf" }],
-}
-
-const users = [
-  {
-    id: 1,
-    name: "Aishath Ali",
-    email: "aishath@example.com",
-    active: true,
-    role: { value: "admin", label: "Admin", color: "success" },
-  },
-  {
-    id: 2,
-    name: "Ibrahim Hassan",
-    email: "ibrahim@example.com",
-    active: false,
-    role: { value: "editor", label: "Editor", color: "warning" },
-  },
-]
+const ui = mergeAdapters(onu, onuEditor)
 
 function App() {
-  const [rtl, setRtl] = React.useState(new URLSearchParams(location.search).has("dv"))
+  const { direction } = useTranslation()
   return (
     <ThemeProvider>
-      <OnuProvider locale={rtl ? dv : undefined}>
-        <Forms.FormsProvider settings={{ max_upload_file_size: 10240, max_image_file_size: 2048 }}>
-          <main className="mx-auto max-w-4xl gap-8 p-6 grid">
-            <div className="flex items-center justify-between">
-              <h1 className="text-2xl font-semibold">@javaabu/forms</h1>
-              <Forms.Button color="light" onClick={() => setRtl((v) => !v)}>
-                {rtl ? "English" : "ދިވެހި"}
-              </Forms.Button>
-            </div>
-
-            <Forms.Alert type="success" heading="Saved" dismissible>
-              Your changes have been saved.
-            </Forms.Alert>
-
-            <Forms.Card title="Edit article">
-              <Forms.Form
-                method="PATCH"
-                action="/articles/1"
-                model={article}
-                files
-                errors={{ slug: "The slug has already been taken." }}
-                onSubmit={(values) => new Promise((resolve) => setTimeout(() => resolve(values), 800))}
-              >
-                <Forms.Text name="title" required thaana />
-                <Forms.Text name="slug" help="Used in the article's URL." />
-                <Forms.Textarea name="body" rows={3} />
-                <Forms.Select name="status" options={{ draft: "Draft", published: "Published" }} />
-                <Forms.Select2
-                  name="category"
-                  relation
-                  options={[
-                    { id: 1, name: "Events" },
-                    { id: 2, name: "News" },
-                  ]}
-                />
-                <Forms.Select2 name="tags[]" multiple options={{ 1: "Harbour", 2: "Weather", 3: "Transport" }} />
-                <Forms.Datetime name="published_at" />
-                <Forms.Number name="views" />
-                <Forms.Checkbox name="is_featured" />
-                <Forms.Checkbox name="channels[]" value="email" label="Email" />
-                <Forms.Checkbox name="channels[]" value="sms" label="SMS" />
-                <Forms.Radio name="type" value="quiz" label="Quiz" />
-                <Forms.Radio name="type" value="video" label="Video" />
-                <Forms.ConditionalWrapper enableElem="type" enableValue="quiz" hideFields>
-                  <Forms.Date name="expires_at" />
-                </Forms.ConditionalWrapper>
-                <Forms.File name="attachment" />
-                <Forms.Image name="cover" width={800} height={450} />
-                <Forms.Text name="company_name" inline label="Inline label" />
-                <Forms.Submit>Save</Forms.Submit>
-              </Forms.Form>
-            </Forms.Card>
-
-            <Forms.Infolist title="Article" model={article}>
-              <Forms.TextEntry name="title" />
-              <Forms.TextEntry name="body" multiline />
-              <Forms.BooleanEntry name="is_featured" />
-              <Forms.TextEntry name="channels" />
-            </Forms.Infolist>
-
-            <Forms.Table
-              model="users"
-              noBulk
-              headers={
-                <>
-                  <Forms.TableHeading label="Name" sortable="name" />
-                  <Forms.TableHeading label="Email" />
-                  <Forms.TableHeading label="Active" />
-                  <Forms.TableHeading label="Role" />
-                </>
-              }
-            >
-              {users.map((user) => (
-                <Forms.TableRow key={user.id} model={user}>
-                  <Forms.TableCell name="name" />
-                  <Forms.TableCell name="email" />
-                  <Forms.TableCell name="active" />
-                  <Forms.TableCell name="role" />
-                </Forms.TableRow>
-              ))}
-            </Forms.Table>
-
-            <Forms.Tabs
-              tabs={[{ name: "home" }, { name: "profile", title: "Profile" }, { name: "contact", disabled: true }]}
-              active="profile"
-            >
-              <Forms.TabsPane name="home">Home content</Forms.TabsPane>
-              <Forms.TabsPane name="profile">Profile content</Forms.TabsPane>
-            </Forms.Tabs>
-
-            <Forms.NoItems modelType="users" showCreate createAction="/users/create" />
-          </main>
-        </Forms.FormsProvider>
+      {/* Onu has its own locale for its built-in strings; keep it in step with the page. */}
+      <OnuProvider locale={direction === "rtl" ? dv : undefined}>
+        <FormsProvider ui={ui} settings={{ max_upload_file_size: 10240, max_image_file_size: 2048 }}>
+          <Demo title="@javaabu/forms with Onu" />
+        </FormsProvider>
       </OnuProvider>
     </ThemeProvider>
   )
diff --git a/examples/shared/demo.tsx b/examples/shared/demo.tsx
new file mode 100644
index 0000000..e81d02a
--- /dev/null
+++ b/examples/shared/demo.tsx
@@ -0,0 +1,149 @@
+import * as React from "react"
+import { setLocale } from "@javaabu/i18n"
+import { useTranslation } from "@javaabu/i18n/react"
+
+import * as Forms from "../../src"
+
+const article = {
+  title: "Harbour works update",
+  slug: "harbour-works-update",
+  body: "First line\nSecond line",
+  status: "draft",
+  category: { id: 2, name: "News" },
+  tags: [{ id: 1 }, { id: 3 }],
+  published_at: "2026-10-01 09:30:00",
+  is_featured: true,
+  channels: ["email"],
+  type: "quiz",
+  views: 1250,
+  media: [{ collection_name: "attachment", original_url: "/storage/1/report.pdf", file_name: "report.pdf" }],
+}
+
+const users = [
+  {
+    id: 1,
+    name: "Aishath Ali",
+    email: "aishath@example.com",
+    active: true,
+    role: { value: "admin", label: "Admin", color: "success" },
+  },
+  {
+    id: 2,
+    name: "Ibrahim Hassan",
+    email: "ibrahim@example.com",
+    active: false,
+    role: { value: "editor", label: "Editor", color: "warning" },
+  },
+]
+
+/** `?dv` starts the page in Dhivehi. */
+export function useDemoLocale() {
+  const { locale, direction } = useTranslation()
+  React.useEffect(() => {
+    if (new URLSearchParams(location.search).has("dv")) setLocale("dv")
+  }, [])
+  React.useEffect(() => {
+    document.documentElement.lang = locale
+    document.documentElement.dir = direction
+  }, [locale, direction])
+  return { rtl: direction === "rtl", toggle: () => setLocale(direction === "rtl" ? "en" : "dv") }
+}
+
+/** The same forms on every example page; only the adapter around them changes. */
+export function Demo({ title }: { title: string }) {
+  const { rtl, toggle } = useDemoLocale()
+  return (
+    <main className="mx-auto max-w-4xl gap-8 p-6 grid">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-semibold">{title}</h1>
+        <Forms.Button color="light" onClick={toggle}>
+          {rtl ? "English" : "ދިވެހި"}
+        </Forms.Button>
+      </div>
+
+      <Forms.Alert type="success" heading="Saved" dismissible>
+        Your changes have been saved.
+      </Forms.Alert>
+
+      <Forms.Card title="Edit article">
+        <Forms.Form
+          method="PATCH"
+          action="/articles/1"
+          model={article}
+          files
+          errors={{ slug: "The slug has already been taken." }}
+          onSubmit={(values) => new Promise((resolve) => setTimeout(() => resolve(values), 800))}
+        >
+          <Forms.Text name="title" required thaana />
+          <Forms.Text name="title_dv" label="ސުރުޚީ" thaana />
+          <Forms.Text name="slug" help="Used in the article's URL." />
+          <Forms.Textarea name="body" rows={3} />
+          <Forms.Wysiwyg name="content" />
+          <Forms.Select name="status" options={{ draft: "Draft", published: "Published" }} />
+          <Forms.Select2
+            name="category"
+            relation
+            options={[
+              { id: 1, name: "Events" },
+              { id: 2, name: "News" },
+            ]}
+          />
+          <Forms.Select2 name="tags[]" multiple options={{ 1: "Harbour", 2: "Weather", 3: "Transport" }} />
+          <Forms.Datetime name="published_at" />
+          <Forms.Number name="views" />
+          <Forms.Checkbox name="is_featured" />
+          <Forms.Checkbox name="channels[]" value="email" label="Email" />
+          <Forms.Checkbox name="channels[]" value="sms" label="SMS" />
+          <Forms.Radio name="type" value="quiz" label="Quiz" />
+          <Forms.Radio name="type" value="video" label="Video" />
+          <Forms.ConditionalWrapper enableElem="type" enableValue="quiz" hideFields>
+            <Forms.Date name="expires_at" />
+          </Forms.ConditionalWrapper>
+          <Forms.File name="attachment" />
+          <Forms.Image name="cover" width={800} height={450} />
+          <Forms.Text name="company_name" inline label="Inline label" />
+          <Forms.Submit>Save</Forms.Submit>
+        </Forms.Form>
+      </Forms.Card>
+
+      <Forms.Infolist title="Article" model={article}>
+        <Forms.TextEntry name="title" />
+        <Forms.TextEntry name="body" multiline />
+        <Forms.BooleanEntry name="is_featured" />
+        <Forms.TextEntry name="channels" />
+      </Forms.Infolist>
+
+      <Forms.Table
+        model="users"
+        noBulk
+        headers={
+          <>
+            <Forms.TableHeading label="Name" sortable="name" />
+            <Forms.TableHeading label="Email" />
+            <Forms.TableHeading label="Active" />
+            <Forms.TableHeading label="Role" />
+          </>
+        }
+      >
+        {users.map((user) => (
+          <Forms.TableRow key={user.id} model={user}>
+            <Forms.TableCell name="name" />
+            <Forms.TableCell name="email" />
+            <Forms.TableCell name="active" />
+            <Forms.TableCell name="role" />
+          </Forms.TableRow>
+        ))}
+      </Forms.Table>
+
+      <Forms.Tabs
+        tabs={[{ name: "home" }, { name: "profile", title: "Profile" }, { name: "contact", disabled: true }]}
+        active="profile"
+      >
+        <Forms.TabsPane name="home">Home content</Forms.TabsPane>
+        <Forms.TabsPane name="profile">Profile content</Forms.TabsPane>
+      </Forms.Tabs>
+
+      <Forms.NoItems modelType="users" showCreate createAction="/users/create" />
+    </main>
+  )
+}
diff --git a/package.json b/package.json
index c128c00..5cb98df 100644
--- a/package.json
+++ b/package.json
@@ -45,15 +45,25 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./editor": {
-      "types": "./dist/editor/index.d.ts",
-      "import": "./dist/editor/index.js",
-      "require": "./dist/editor/index.cjs"
+    "./html": {
+      "types": "./dist/html.d.ts",
+      "import": "./dist/html.js",
+      "require": "./dist/html.cjs"
     },
-    "./maps": {
-      "types": "./dist/maps/index.d.ts",
-      "import": "./dist/maps/index.js",
-      "require": "./dist/maps/index.cjs"
+    "./onu": {
+      "types": "./dist/onu.d.ts",
+      "import": "./dist/onu.js",
+      "require": "./dist/onu.cjs"
+    },
+    "./onu/editor": {
+      "types": "./dist/onu-editor.d.ts",
+      "import": "./dist/onu-editor.js",
+      "require": "./dist/onu-editor.cjs"
+    },
+    "./onu/maps": {
+      "types": "./dist/onu-maps.d.ts",
+      "import": "./dist/onu-maps.js",
+      "require": "./dist/onu-maps.cjs"
     },
     "./tailwind.css": "./src/styles/tailwind.css",
     "./package.json": "./package.json"
@@ -78,7 +88,7 @@
     "examples:build": "vite build --config examples/vite.config.ts"
   },
   "peerDependencies": {
-    "@javaabu/onu": "^0.1.0",
+    "@javaabu/onu": "^0.2.1",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0"
   },
@@ -88,16 +98,27 @@
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/noto-sans-thaana": "^5.3.0",
-    "@javaabu/onu": "^0.1.0",
+    "@javaabu/onu": "^0.2.1",
     "@tailwindcss/vite": "^4.3.3",
+    "@tanstack/react-query": "^5.104.5",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.8",
+    "@tiptap/core": "^3.32.2",
+    "@tiptap/extension-image": "^3.32.2",
+    "@tiptap/extension-placeholder": "^3.32.2",
+    "@tiptap/extension-table": "^3.32.2",
+    "@tiptap/extension-text-align": "^3.32.2",
+    "@tiptap/pm": "^3.32.2",
+    "@tiptap/react": "^3.32.2",
+    "@tiptap/starter-kit": "^3.32.2",
+    "@tiptap/static-renderer": "^3.32.2",
+    "@tiptap/suggestion": "^3.32.2",
     "@types/node": "^26.6.4",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.2",
-    "@vitest/coverage-v8": "^5.1.0",
+    "@vitest/coverage-v8": "^5.0.5",
     "eslint": "^10.12.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "globals": "^17.13.0",
@@ -118,5 +139,13 @@
     "@javaabu/onu": {
       "optional": true
     }
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@javaabu/i18n"
+    ]
+  },
+  "dependencies": {
+    "@javaabu/i18n": "github:Javaabu/i18n#build-on-git-install"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 570e0bc..d25998f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      '@javaabu/i18n':
+        specifier: github:Javaabu/i18n#build-on-git-install
+        version: https://codeload.github.com/Javaabu/i18n/tar.gz/76730212d6f0f1d87a78635ed6e005dd5713cbba(react@19.3.1)
     devDependencies:
       '@changesets/cli':
         specifier: ^3.0.3
@@ -24,11 +28,14 @@ importers:
         specifier: ^5.3.0
         version: 5.3.0
       '@javaabu/onu':
-        specifier: ^0.1.0
-        version: 0.1.0(@date-fns/tz@1.5.0)(@fontsource-variable/inter@5.3.0)(@fontsource-variable/jetbrains-mono@5.3.0)(@fontsource-variable/noto-sans-thaana@5.3.0)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(tailwindcss@4.3.3)
+        specifier: ^0.2.1
+        version: 0.2.1(57d55d6dbb0eaaaa1f7be11acef43371)
       '@tailwindcss/vite':
         specifier: ^4.3.3
         version: 4.3.3(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+      '@tanstack/react-query':
+        specifier: ^5.104.5
+        version: 5.104.5(@types/react@19.3.0)(react@19.3.1)
       '@testing-library/jest-dom':
         specifier: ^7.0.1
         version: 7.0.1(@testing-library/dom@10.4.2)(vitest@5.0.5)
@@ -38,6 +45,36 @@ importers:
       '@testing-library/user-event':
         specifier: ^14.6.8
         version: 14.6.8(@testing-library/dom@10.4.2)
+      '@tiptap/core':
+        specifier: ^3.32.2
+        version: 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/extension-image':
+        specifier: ^3.32.2
+        version: 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))
+      '@tiptap/extension-placeholder':
+        specifier: ^3.32.2
+        version: 3.32.2(@tiptap/extensions@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))
+      '@tiptap/extension-table':
+        specifier: ^3.32.2
+        version: 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+      '@tiptap/extension-text-align':
+        specifier: ^3.32.2
+        version: 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))
+      '@tiptap/pm':
+        specifier: ^3.32.2
+        version: 3.32.2
+      '@tiptap/react':
+        specifier: ^3.32.2
+        version: 3.32.2(@floating-ui/dom@1.8.0)(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
+      '@tiptap/starter-kit':
+        specifier: ^3.32.2
+        version: 3.32.2
+      '@tiptap/static-renderer':
+        specifier: ^3.32.2
+        version: 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
+      '@tiptap/suggestion':
+        specifier: ^3.32.2
+        version: 3.32.2(@floating-ui/dom@1.8.0)(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
       '@types/node':
         specifier: ^26.6.4
         version: 26.6.5
@@ -51,8 +88,8 @@ importers:
         specifier: ^6.1.2
         version: 6.1.2(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
       '@vitest/coverage-v8':
-        specifier: ^5.1.0
-        version: 5.1.0(vitest@5.0.5)
+        specifier: ^5.0.5
+        version: 5.0.5(vitest@5.0.5)
       eslint:
         specifier: ^10.12.0
         version: 10.13.0(jiti@2.7.0)
@@ -88,7 +125,7 @@ importers:
         version: 8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1)
       vitest:
         specifier: ^5.0.5
-        version: 5.0.5(@types/node@26.6.5)(@vitest/coverage-v8@5.1.0)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+        version: 5.0.5(@types/node@26.6.5)(@vitest/coverage-v8@5.0.5)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
 
 packages:
 
@@ -174,33 +211,6 @@ packages:
     resolution: {integrity: sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==}
     engines: {node: '>=6.9.0'}
 
-  '@base-ui/react@1.9.0':
-    resolution: {integrity: sha512-S8CSYosASBKtpL8SWUfS78rFElfLijiCgA7oHOK22jCJ95FULsYyKwBNFOgudt0RA+/7yNc7F81bOvQnRgbBiQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      '@date-fns/tz': ^1.2.0
-      '@types/react': ^17 || ^18 || ^19
-      date-fns: ^4.0.0
-      react: ^17 || ^18 || ^19
-      react-dom: ^17 || ^18 || ^19
-    peerDependenciesMeta:
-      '@date-fns/tz':
-        optional: true
-      '@types/react':
-        optional: true
-      date-fns:
-        optional: true
-
-  '@base-ui/utils@0.5.0':
-    resolution: {integrity: sha512-dYGGcEttjkYiMoa5nHm8vLaJ2UcuTWxo3BFAwOYXeRg/q7UVVvA6cacEIXEs3FgBfK1CGtW1ptElqs7wsx+t9A==}
-    peerDependencies:
-      '@types/react': ^17 || ^18 || ^19
-      react: ^17 || ^18 || ^19
-      react-dom: ^17 || ^18 || ^19
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@bcoe/v8-coverage@1.0.2':
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
@@ -448,8 +458,21 @@ packages:
   '@internationalized/string@3.2.10':
     resolution: {integrity: sha512-PDx6//vHSpRnHfxqMqto11zQvhsaU74O3mKv2F/0eicGZcl9NLjQmGlbHz/LsJh5tLKp4A4L7ZVTzN1/MmMTvA==}
 
-  '@javaabu/onu@0.1.0':
-    resolution: {integrity: sha512-A31c8LX3LK73hLqkCfZ1fYTO8bM+T9MSZT/nChIOdO29R8ogCYHd9tuNcr2TmG7Xxj5M2SU1Z2F6XywETyu8wQ==}
+  '@javaabu/i18n@https://codeload.github.com/Javaabu/i18n/tar.gz/76730212d6f0f1d87a78635ed6e005dd5713cbba':
+    resolution: {tarball: https://codeload.github.com/Javaabu/i18n/tar.gz/76730212d6f0f1d87a78635ed6e005dd5713cbba}
+    version: 0.0.0
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      vue: ^3.3.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      vue:
+        optional: true
+
+  '@javaabu/onu@0.2.1':
+    resolution: {integrity: sha512-GE4takAQwNQqD9ZmQooH7KMBrLUoiR4UzJsDCGr6cLYigoLF22tjRD3CzrdVGVl+SAhz2jjwOozxzyvAyTNmxA==}
     peerDependencies:
       '@deck.gl/aggregation-layers': ^9.4.0
       '@deck.gl/core': ^9.4.0
@@ -470,11 +493,9 @@ packages:
       '@fullcalendar/timegrid': ^6.1.21
       '@googlemaps/markerclusterer': ^2.6.2
       '@iconify/react': ^6.0.2
+      '@tanstack/react-query': ^5.104.1
       '@tiptap/core': ^3.31.4
-      '@tiptap/extension-code-block-lowlight': ^3.31.4
-      '@tiptap/extension-drag-handle-react': ^3.31.4
       '@tiptap/extension-image': ^3.31.4
-      '@tiptap/extension-link': ^3.31.4
       '@tiptap/extension-placeholder': ^3.31.4
       '@tiptap/extension-table': ^3.31.4
       '@tiptap/extension-text-align': ^3.31.4
@@ -486,12 +507,11 @@ packages:
       '@turf/turf': ^7.4.0
       '@vis.gl/react-google-maps': ^1.10.1
       barcode-detector: ^3.2.2
-      lowlight: ^3.3.0
       media-chrome: ^4.19.3
-      react: ^18.3.0 || ^19.0.0
-      react-dom: ^18.3.0 || ^19.0.0
+      react: ^19.0.0
+      react-dom: ^19.0.0
       react-easy-crop: ^6.2.4
-      react-querybuilder: ^8.24.4
+      react-hook-form: ^7.89.0
       recharts: ^3.10.1
       shiki: ^4.5.0
       signature_pad: ^5.1.4
@@ -541,14 +561,8 @@ packages:
         optional: true
       '@tiptap/core':
         optional: true
-      '@tiptap/extension-code-block-lowlight':
-        optional: true
-      '@tiptap/extension-drag-handle-react':
-        optional: true
       '@tiptap/extension-image':
         optional: true
-      '@tiptap/extension-link':
-        optional: true
       '@tiptap/extension-placeholder':
         optional: true
       '@tiptap/extension-table':
@@ -571,14 +585,10 @@ packages:
         optional: true
       barcode-detector:
         optional: true
-      lowlight:
-        optional: true
       media-chrome:
         optional: true
       react-easy-crop:
         optional: true
-      react-querybuilder:
-        optional: true
       recharts:
         optional: true
       shiki:
@@ -1605,6 +1615,192 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
+  '@tiptap/core@3.32.2':
+    resolution: {integrity: sha512-EitM8KY3agYfnp/bqhfxcaReVq4CUqVzMqoSIl7xSfYABTGYoTDtVXUdYSGutcCBFjc86BbXjrOlDlqkgC8BsQ==}
+    peerDependencies:
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-blockquote@3.32.2':
+    resolution: {integrity: sha512-VLcdnbOm7G52NpUhgbyo3XIOz6Eky7/DyGYuYnCpEUe0TE5xk7Qs6ukrh9vaf2XhyeLDHsmVZuzybGrdtqoC0w==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-bold@3.32.2':
+    resolution: {integrity: sha512-5Q8bScZEZbIBB2tBgnc7Cr6XuH2Nt/6l1HP3FO0wWO7nqXPOcodEbjslePI3v1iag+LNWX16BZ8fDrJr/PbxXA==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+
+  '@tiptap/extension-bubble-menu@3.32.2':
+    resolution: {integrity: sha512-mwxWtLHiwhtzXpvdjoegH10eIA8CJr5INGAzUSfzRp4v13zH3rDbsoafljwEi+V5JfcSY/bbXf1akOtsny4yXw==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-bullet-list@3.32.2':
+    resolution: {integrity: sha512-YP7IlC3swrNPlnFHIgVDsDl70geqqWtcAkbuncQEs5FJ9UQg432VwVfwCUW4NsG532p5AqlTTwOKcSLS7p/pqA==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.32.2
+
+  '@tiptap/extension-code-block@3.32.2':
+    resolution: {integrity: sha512-KFkPMMgXEgXImGpbUsrHNaERtvOGbJ/JiWn0zHNGSJCf6frn44OLeRFPpEMptmwMqtJxftBVFbEbcPOlATYqDw==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-code@3.32.2':
+    resolution: {integrity: sha512-jm7qXuDmBzQYPemm/9chLepQjCNVtZhaoU9N2f4GxdUi8u/fi3AQLP7xlXjRCQUyam50FVqIIWgD567mLQ3sMg==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+
+  '@tiptap/extension-document@3.32.2':
+    resolution: {integrity: sha512-zKWj8jh1kpckfSwle+kqFn0ZnYvkhb7nz89nrNvpnnsQMbbGU2/+bUAfYU3XSEKZr3VBvW176FtlMPD8ggC3Cg==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+
+  '@tiptap/extension-dropcursor@3.32.2':
+    resolution: {integrity: sha512-mE9muf4KSY3s+LCaHG/G957pVHVF2q46i+YkZF3ZG70errQcyZ5YFKnce9PSL1fiL0VLL+2UhMAL2QDM5oDiNA==}
+    peerDependencies:
+      '@tiptap/extensions': 3.32.2
+
+  '@tiptap/extension-floating-menu@3.32.2':
+    resolution: {integrity: sha512-JPyJQvJlGDxn2v7Mr8Yft2BmcXaHiapVsXBMYiOJh5BeWbnwUYFWNH9h5PU/xTOz2zVEV79Kh4HmpgXZS3FCbg==}
+    peerDependencies:
+      '@floating-ui/dom': ^1.0.0
+      '@tiptap/core': 3.32.2
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-gapcursor@3.32.2':
+    resolution: {integrity: sha512-7W/iX8h6KQ2HK2SfvzCIgySOEJwTM4owqz1tXVOPiLPvKSvDDa9GQsp60+xNyqDNHuplE8bRsZ5dH1nilgAaAg==}
+    peerDependencies:
+      '@tiptap/extensions': 3.32.2
+
+  '@tiptap/extension-hard-break@3.32.2':
+    resolution: {integrity: sha512-oIdXmya2XBzp3Cw9Nr36agPvr9ZXP3p2fQXaFflxYYBKOG3UUzw38CId7J6K1jYxBf8c1zodbiKFEL7rttJ6fQ==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+
+  '@tiptap/extension-heading@3.32.2':
+    resolution: {integrity: sha512-AE2WNA3jVnPV/cVyTwTmtmGZqX8LiiGicDHXX4bdvfzv+Aez4sgzdkuFjOGWtnEy43NnXdoI1UX7y/984NM0iA==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+
+  '@tiptap/extension-horizontal-rule@3.32.2':
+    resolution: {integrity: sha512-Pl0YRS60R339yHrAWGhPT9WHIlD72BO6SGVdj8lBs2OAaYw5RQL/1BGZi+7UvAyc2yJxaRC4XN9X4jdQHDUq9A==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-image@3.32.2':
+    resolution: {integrity: sha512-TRjp//2r1MTE1emLXxEki6+D0bOPYaX41CnM1hrUnp1iw/cS0a4XBXAWXxK/EFEl94zrqWrafkarU9rXpnBHeg==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+
+  '@tiptap/extension-italic@3.32.2':
+    resolution: {integrity: sha512-aqk8OK4Xo59qZni7YSy42/ltQFb2IOmli3YERIq1XPQ4vl5sxoYhL+sFoOPmvbjHvaHZpK6n8vPh1SmAnB570A==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+
+  '@tiptap/extension-link@3.32.2':
+    resolution: {integrity: sha512-EwQtMXsU1Vc03n+yud7lfaR+RjHTPwFyI/hcEylvJba7iIXDSLA/ey4mnpwt2od8CEx/ZcOutIryORKVR9Py/Q==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-list-item@3.32.2':
+    resolution: {integrity: sha512-vTdPfzZODLVXog/NMs6zcaTOhtlh6ptJidlMg8l1TLhO+YQyEyO/K45aV429D9xTo/BOVazreav/C+hgemSnYg==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.32.2
+
+  '@tiptap/extension-list-keymap@3.32.2':
+    resolution: {integrity: sha512-SioQO8TqRb8aq9L+GpI/a/F7HCSBarm3Uvqtt2YttyazjSjEedu1zSnaa93V+WEFmlqyXnxVa24vv2zj6qlavQ==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.32.2
+
+  '@tiptap/extension-list@3.32.2':
+    resolution: {integrity: sha512-rLYk3GXSswrCakyZwo8VW0+yjnYhLJSBRvzClneIrlPhqQ2r/oDUjeqkpm8lGvwREw1lDSh7wefGhkhTRcQkAw==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-ordered-list@3.32.2':
+    resolution: {integrity: sha512-WQw2fLtJAxCYftKAk+YNlPDc+OxtXK4nNfXRBwr6oC67SoJtoLe0bo5jS6vF+cEqzHjDaboJi+O3MSNp2L2VQA==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.32.2
+
+  '@tiptap/extension-paragraph@3.32.2':
+    resolution: {integrity: sha512-3bqC//4GEhUiux3dhW/TJuveBp9ADv4nHlqBdVQa3A+USGbaBvE9YvXxA32wZL0leSRykxEnHbNHZ1J4KjIynQ==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+
+  '@tiptap/extension-placeholder@3.32.2':
+    resolution: {integrity: sha512-T+QVayKhakLbFhne7nEdo8omHcEevo8ksEYdKSCeTLoaVInaAiG9WwkKSJymhQ81EbOMS1WsO0XJnb3mrx9PHw==}
+    peerDependencies:
+      '@tiptap/extensions': 3.32.2
+
+  '@tiptap/extension-strike@3.32.2':
+    resolution: {integrity: sha512-i3d4vCrZySS9g5nGa5W0LS6LPMKxcAnJO6uADTnGVlKK0ewklcWWZbZ9GB/Fpx/IjKAvXWeayjfsNpTae/yVZg==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+
+  '@tiptap/extension-table@3.32.2':
+    resolution: {integrity: sha512-CIFQaKOwdNFPaApymZRNhAnpGpl3Y53V1sqTgQV9FtI4qi6H3mAR032GtasUzo7DpBaOHpNNbMgph0yyVCJF9g==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-text-align@3.32.2':
+    resolution: {integrity: sha512-o1DKPodB0FKqpdYp/OKyM6nYSbZXnPEC9rWx/O/Vccs2OOeF08iOO3cKYs1lS/qNg/xFeR8gKxGMrve7CfCkKA==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+
+  '@tiptap/extension-text@3.32.2':
+    resolution: {integrity: sha512-W6G7UbQ71TyvZvORDdj6u8By8B/Dymy8KoaKGaNHqB82SpM42ZK2TmeFBHI0Lo4wTkZJL3LuI+QthaDvh0USsA==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+
+  '@tiptap/extension-underline@3.32.2':
+    resolution: {integrity: sha512-kY7B5ocKx3JzqIl2kLXGvnLGZRxuYEFzMkpgJ6Vh6/VTTK+JCeOVItYEQGFrAxrodIMmhIrXpi1jF57s6iZswg==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+
+  '@tiptap/extensions@3.32.2':
+    resolution: {integrity: sha512-TUE1JedPjYQ/T527f2a4xz+4Xi1a5nIgW8KwC0DjmqbaHirlz0eCNI2nMEN70pu5WPpqgXmki3lCF3LScQxIGw==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/pm@3.32.2':
+    resolution: {integrity: sha512-4cuUbYf55NnYBIvDBK/K1VFVQ4pocKwAZC5TAy4s9dptvazxVHkQVMbiQsyhwfIbM4rxmHWkM/6omaFfTB++/g==}
+
+  '@tiptap/react@3.32.2':
+    resolution: {integrity: sha512-IrraXFTp6S9R+GlCzavMUQel0wK9wafXU3VnaujeC/REi6sYWNuyBe0jICimdbEk1dU32UvlkvPCuIDRPKlzaQ==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+      '@tiptap/pm': 3.32.2
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tiptap/starter-kit@3.32.2':
+    resolution: {integrity: sha512-6K+oOMF4orhnOxivgUTKiSpNAEftHyWOcfFIvIEMUP044b34obBUogzMTfM3RjtewZtQXVafO9zmGU30IllC1g==}
+
+  '@tiptap/static-renderer@3.32.2':
+    resolution: {integrity: sha512-2q+Ox47fWQQdHupAP1QAFoCTbFN69j0bM+Lemxw9KMLCUT0+ALjUJkkVEeme18uelJkaJ4hufH4buKaJpADh9A==}
+    peerDependencies:
+      '@tiptap/core': 3.32.2
+      '@tiptap/pm': 3.32.2
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tiptap/suggestion@3.32.2':
+    resolution: {integrity: sha512-AD6WQ+mEFLok8svJv6Ibffyao+vXBGn3klQo4gCXH+UHwtgct5tF4goL9Rsz8J6zcDmYfx5W8AqYjBiQIyRNHA==}
+    peerDependencies:
+      '@floating-ui/dom': ^1.0.0
+      '@tiptap/core': 3.32.2
+      '@tiptap/pm': 3.32.2
+
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
@@ -1634,6 +1830,9 @@ packages:
   '@types/react@19.3.0':
     resolution: {integrity: sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==}
 
+  '@types/use-sync-external-store@0.0.6':
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+
   '@typescript-eslint/eslint-plugin@8.72.0':
     resolution: {integrity: sha512-aysKgysPX9XOv/dk95UkvUDe++Q3n3dJPG9CEWT3RUccxfkPJ+Qn6nhKPDhZXU6Ofo9kgwGWwKyQCnZIXTgngg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1709,21 +1908,21 @@ packages:
       oxc-transform-react:
         optional: true
 
-  '@vitest/coverage-v8@5.1.0':
-    resolution: {integrity: sha512-OY9aShBQG5KOIw2zCo9fDoCHI9RHliNHJ//nM7m6jGg41Hyke9JOGWmeMlK74xYErsxMoK8mIB3gAeEyFVA7LA==}
+  '@vitest/coverage-v8@5.0.5':
+    resolution: {integrity: sha512-4KpkGdIrSqBihx/JyP/e+S+IKB98etg1XDQiLAxksLfcShnwi1VReGeOT9NI43hLHbknosKp/1CCLn9Zgcs8mg==}
     peerDependencies:
-      '@vitest/browser': 5.1.0
-      vitest: 5.1.0
+      '@vitest/browser': 5.0.5
+      vitest: 5.0.5
     peerDependenciesMeta:
       '@vitest/browser':
         optional: true
 
-  '@vitest/istanbul-lib-coverage@2.1.0':
-    resolution: {integrity: sha512-WOjuS+xcjSIy7ruYBQ+9BUcV7XZQ0FyVcbWbWxW9TRx/kLGx5SQaeFRIFDJxjNplb6YsT7SpKo2zuXXUo91OIQ==}
+  '@vitest/istanbul-lib-coverage@1.0.2':
+    resolution: {integrity: sha512-9J/JMwOf9AoJhAywhrn7ScKTL38hsWQP/qPG60OtaAFcQ5OXPwKsxZFlbnuCKmZ61m8/lGgHYnFpdyQZUvG/iA==}
     engines: {node: '>=22'}
 
-  '@vitest/istanbul-lib-report@2.1.0':
-    resolution: {integrity: sha512-+ZFta25nWtGCOBG9/IET8w1RO5Oawsd6H8Uf6AJ9EA/StFuKVtKAEJEJ6uRt84OH+T4YkI0ASmIHAhRA+0KVxw==}
+  '@vitest/istanbul-lib-report@1.0.2':
+    resolution: {integrity: sha512-gUsfXZJbzPamoIY5TvHFiMMoXESBrUMo+xqaj+rYrWI69+EnvRlYBlP96ZnHPY4vX8kyUpgAnFUCg5wZG/HkDQ==}
     engines: {node: '>=22'}
 
   '@vitest/mocker@5.0.5':
@@ -1779,10 +1978,6 @@ packages:
   ast-v8-to-istanbul@1.0.7:
     resolution: {integrity: sha512-kFL68AG6ajd8fg248zwM9GQrUWEp79gsmjum34OEXjs4yHuUMZfYKwOLW9GMmB4oNvVrj+EAGxsP7ye2UR9UlA==}
 
-  attr-accept@4.0.1:
-    resolution: {integrity: sha512-rOKAGOwbnTUvwTL8rNA0hWnU3uX9tOI20di4KjR5I1ez/RJmnA37W3zz4EMxGC2YnI289yPjRy63CdAZeQFZ4Q==}
-    engines: {node: '>= 22'}
-
   balanced-match@4.0.4:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
@@ -1993,6 +2188,10 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-equals@5.4.5:
+    resolution: {integrity: sha512-yKEpcFuRPu/pTQL2VB8YKE2yFldrLlIsoWtJeBnAdqEhvu21OgkFT0C8njf/xYc2LSZGEr3K9JGjthHJxnVLvQ==}
+    engines: {node: '>=6.0.0'}
+
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
@@ -2020,10 +2219,6 @@ packages:
   file-entry-cache@11.1.5:
     resolution: {integrity: sha512-+PFTHITI08JIGhnNpGNI8T8inUpgZfk3GNEqfT9R2zZV2iFXg3CvqzSl/uEhs7TSGujYRELEANyDvS8Fj7+S7Q==}
 
-  file-selector@5.0.2:
-    resolution: {integrity: sha512-1hAy178VaMCWWj/vSUITOTpLWH1PoGW3eO7i3kPIppuSyOHBm3o1cHq+CvKAM5hQKQXlazrDt/3K1HCXgs7MpQ==}
-    engines: {node: '>= 22'}
-
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -2326,6 +2521,9 @@ packages:
     resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
     engines: {node: '>= 12.0.0'}
 
+  linkifyjs@4.4.0:
+    resolution: {integrity: sha512-InTexvtbai+2c+dEVGcc6O6P2DMVIiwD9a/i4zFroazOIYLOS6FSVmAJ7kFeumnCMx6/gQqNAkbUvgMubV4+MA==}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -2401,6 +2599,9 @@ packages:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
+  orderedmap@2.1.1:
+    resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -2450,6 +2651,45 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  prosemirror-changeset@2.4.6:
+    resolution: {integrity: sha512-P0cY3DSLm4M2boUOCmHDyaID5o6HgWmb21Bvs9p8lLqfJjKBBEHG5Ma5qW5SCmwOYamtWOLf2k+yvt6077zlTg==}
+
+  prosemirror-commands@1.7.2:
+    resolution: {integrity: sha512-q6Q6szxqdu9Xd6EcdKsqXghu5nQdZTpB4Q9yd04WRc7/jt763e/rT60Owh0L1GYY+T46o5rD+9lEN36dZS43tw==}
+
+  prosemirror-dropcursor@1.8.4:
+    resolution: {integrity: sha512-VmKxhcA6a+h5oPSYmfF1ZNeQqPbyYaIxqZsKqeYCyTlPtrjUgNaHL3P8vVaO19oqAV0zuaM/axkowZHrB1P3Tg==}
+
+  prosemirror-gapcursor@1.4.1:
+    resolution: {integrity: sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==}
+
+  prosemirror-history@1.5.1:
+    resolution: {integrity: sha512-onlwnqKvgtFg6srZOmDOAhlAy1FIHQpOExORybX0S+DvJepE5tPALrB9iGet/2sqqqrelSnB10OoiOJqAvu2DA==}
+
+  prosemirror-inputrules@1.5.1:
+    resolution: {integrity: sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==}
+
+  prosemirror-keymap@1.2.3:
+    resolution: {integrity: sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==}
+
+  prosemirror-model@1.25.12:
+    resolution: {integrity: sha512-Ue2gTmXMa7EhpLNhC7J+h4+ykD8ha12K6rrZFFKKJHBForfIStw5gJ6Zrf1mqqAa9NmpmEB4wp9bKmA4eUVjWg==}
+
+  prosemirror-schema-list@1.6.0:
+    resolution: {integrity: sha512-G1srDtan+VqWn+qpmWFj/6j0YsZ5zMU+ZIlGVIW41a5JF2jAI3jzfMRWmSABmEH2Qoq1PmAG/o2mucMMdLOsLg==}
+
+  prosemirror-state@1.4.4:
+    resolution: {integrity: sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==}
+
+  prosemirror-tables@1.8.5:
+    resolution: {integrity: sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==}
+
+  prosemirror-transform@1.12.4:
+    resolution: {integrity: sha512-2/WuPum3pn+O/Vi2vzpi8210ICUe2kIPXdLYjQ09Pv5DtT5bcKWMJhAKPBwvpPjpp5iOYUVwVEr0gOM1BY1Mgw==}
+
+  prosemirror-view@1.42.9:
+    resolution: {integrity: sha512-bKbfzeKZOu2H2JQU2TaJmYu6EBcor3VnGIR4jR31cbEt1ztUnfUB6bKGV1+fJzOJdrVWR+tRU0208zM3oQx4wA==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -2498,16 +2738,6 @@ packages:
     peerDependencies:
       react: ^19.3.1
 
-  react-dropzone@20.1.4:
-    resolution: {integrity: sha512-LyjT9iQySNkJGC6yL+XTlmfTRxHhPx0eSoTh+WlR0Ge+W35rLcRH/oH7w5bzijfPHeCFcLnO9G7i+hX+LINAAA==}
-    engines: {node: '>= 22'}
-    peerDependencies:
-      '@types/react': '*'
-      react: '>= 18'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react-hook-form@7.90.0:
     resolution: {integrity: sha512-+NdG0FLzCPhFOp2NNxaUYLF9fyZhNjx9FTBBSYWF71/l6BBlmIc/j6xlp3DbaHWLJbIG7Zd8oznA19xJClU97w==}
     engines: {node: '>=18.0.0'}
@@ -2550,16 +2780,6 @@ packages:
       '@types/react':
         optional: true
 
-  react-resizable-panels@4.18.0:
-    resolution: {integrity: sha512-ACofxw/KAyxYa+3uCT9FAFR38HeoDhnSP5Lw9Jgm8u3fDcrDlQxArgW67P6ohd/SUVKMv4Lw4u37aV/G76Sp3Q==}
-    peerDependencies:
-      '@types/react': ^18.2.6 || ^19.0.0
-      react: ^18.0.0 || ^19.0.0
-      react-dom: ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react-stately@3.51.0:
     resolution: {integrity: sha512-YJcmkAXu2XOQP97hO/qz/cC3qv9kni3oVhwBlxWr358BHePJUpY15XwL3YSRMKxYt4EkslPqAz11JRirMfANGw==}
     peerDependencies:
@@ -2587,14 +2807,14 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
-  reselect@5.3.0:
-    resolution: {integrity: sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==}
-
   rolldown@1.2.14:
     resolution: {integrity: sha512-eTBTTqMR6uHKLgcUqpJP8ntzDI6V4LYA8negAMBEI7gkgVvOdrx6VsvS2Ym+83KhOPdLCHWJu0w7UQFJZhHKNw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
+  rope-sequence@1.3.4:
+    resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
+
   saxes@6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
@@ -2850,6 +3070,9 @@ packages:
       jsdom:
         optional: true
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   w3c-xmlserializer@6.0.0:
     resolution: {integrity: sha512-4Nsy8K5Tr6SPDH9jhKJOHf7ChDrc1zufZTVSF7x72hwuEXBqxqk9G6cK+K2NRUtB3iELRJqjXb4JPDMBjMTl2Q==}
     engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
@@ -3029,31 +3252,6 @@ snapshots:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
-  '@base-ui/react@1.9.0(@date-fns/tz@1.5.0)(@types/react@19.3.0)(date-fns@4.4.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)':
-    dependencies:
-      '@babel/runtime': 7.29.10
-      '@base-ui/utils': 0.5.0(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
-      '@floating-ui/react-dom': 2.1.9(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
-      '@floating-ui/utils': 0.2.12
-      react: 19.3.1
-      react-dom: 19.3.1(react@19.3.1)
-      use-sync-external-store: 1.7.0(react@19.3.1)
-    optionalDependencies:
-      '@date-fns/tz': 1.5.0
-      '@types/react': 19.3.0
-      date-fns: 4.4.0
-
-  '@base-ui/utils@0.5.0(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)':
-    dependencies:
-      '@babel/runtime': 7.29.10
-      '@floating-ui/utils': 0.2.12
-      react: 19.3.1
-      react-dom: 19.3.1(react@19.3.1)
-      reselect: 5.3.0
-      use-sync-external-store: 1.7.0(react@19.3.1)
-    optionalDependencies:
-      '@types/react': 19.3.0
-
   '@bcoe/v8-coverage@1.0.2': {}
 
   '@bramus/specificity@2.4.3':
@@ -3345,9 +3543,12 @@ snapshots:
     dependencies:
       '@swc/helpers': 0.5.23
 
-  '@javaabu/onu@0.1.0(@date-fns/tz@1.5.0)(@fontsource-variable/inter@5.3.0)(@fontsource-variable/jetbrains-mono@5.3.0)(@fontsource-variable/noto-sans-thaana@5.3.0)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(tailwindcss@4.3.3)':
+  '@javaabu/i18n@https://codeload.github.com/Javaabu/i18n/tar.gz/76730212d6f0f1d87a78635ed6e005dd5713cbba(react@19.3.1)':
+    optionalDependencies:
+      react: 19.3.1
+
+  '@javaabu/onu@0.2.1(57d55d6dbb0eaaaa1f7be11acef43371)':
     dependencies:
-      '@base-ui/react': 1.9.0(@date-fns/tz@1.5.0)(@types/react@19.3.0)(date-fns@4.4.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
       '@dnd-kit/dom': 0.5.1
       '@dnd-kit/helpers': 0.5.1
       '@dnd-kit/react': 0.5.1(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
@@ -3368,10 +3569,8 @@ snapshots:
       react-aria-components: 1.22.1(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
       react-day-picker: 10.0.2(@types/react@19.3.0)(react@19.3.1)
       react-dom: 19.3.1(react@19.3.1)
-      react-dropzone: 20.1.4(@types/react@19.3.0)(react@19.3.1)
       react-hook-form: 7.90.0(@types/react@19.3.0)(react@19.3.1)
       react-phone-number-input: 3.4.18(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
-      react-resizable-panels: 4.18.0(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
       sonner: 2.0.8(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
       tailwind-merge: 3.7.0
       tailwindcss: 4.3.3
@@ -3382,8 +3581,17 @@ snapshots:
       '@fontsource-variable/inter': 5.3.0
       '@fontsource-variable/jetbrains-mono': 5.3.0
       '@fontsource-variable/noto-sans-thaana': 5.3.0
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/extension-image': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))
+      '@tiptap/extension-placeholder': 3.32.2(@tiptap/extensions@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))
+      '@tiptap/extension-table': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+      '@tiptap/extension-text-align': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))
+      '@tiptap/pm': 3.32.2
+      '@tiptap/react': 3.32.2(@floating-ui/dom@1.8.0)(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
+      '@tiptap/starter-kit': 3.32.2
+      '@tiptap/static-renderer': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
+      '@tiptap/suggestion': 3.32.2(@floating-ui/dom@1.8.0)(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
     transitivePeerDependencies:
-      - '@date-fns/tz'
       - '@types/react'
       - '@types/react-dom'
 
@@ -4376,7 +4584,7 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
     optionalDependencies:
-      vitest: 5.0.5(@types/node@26.6.5)(@vitest/coverage-v8@5.1.0)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+      vitest: 5.0.5(@types/node@26.6.5)(@vitest/coverage-v8@5.0.5)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
 
   '@testing-library/react@16.3.3(@testing-library/dom@10.4.2)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)':
     dependencies:
@@ -4392,6 +4600,209 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.2
 
+  '@tiptap/core@3.32.2(@tiptap/pm@3.32.2)':
+    dependencies:
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-blockquote@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-bold@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-bubble-menu@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/pm': 3.32.2
+    optional: true
+
+  '@tiptap/extension-bullet-list@3.32.2(@tiptap/extension-list@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/extension-list': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-code-block@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-code@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-document@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-dropcursor@3.32.2(@tiptap/extensions@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/extensions': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-floating-menu@3.32.2(@floating-ui/dom@1.8.0)(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/pm': 3.32.2
+    optional: true
+
+  '@tiptap/extension-gapcursor@3.32.2(@tiptap/extensions@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/extensions': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-hard-break@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-heading@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-horizontal-rule@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-image@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-italic@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-link@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/pm': 3.32.2
+      linkifyjs: 4.4.0
+
+  '@tiptap/extension-list-item@3.32.2(@tiptap/extension-list@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/extension-list': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-list-keymap@3.32.2(@tiptap/extension-list@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/extension-list': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-list@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-ordered-list@3.32.2(@tiptap/extension-list@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/extension-list': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-paragraph@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-placeholder@3.32.2(@tiptap/extensions@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/extensions': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-strike@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-table@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/extension-text-align@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-text@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+
+  '@tiptap/extension-underline@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+
+  '@tiptap/extensions@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/pm@3.32.2':
+    dependencies:
+      prosemirror-changeset: 2.4.6
+      prosemirror-commands: 1.7.2
+      prosemirror-dropcursor: 1.8.4
+      prosemirror-gapcursor: 1.4.1
+      prosemirror-history: 1.5.1
+      prosemirror-inputrules: 1.5.1
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.12
+      prosemirror-schema-list: 1.6.0
+      prosemirror-state: 1.4.4
+      prosemirror-tables: 1.8.5
+      prosemirror-transform: 1.12.4
+      prosemirror-view: 1.42.9
+
+  '@tiptap/react@3.32.2(@floating-ui/dom@1.8.0)(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/pm': 3.32.2
+      '@types/react': 19.3.0
+      '@types/react-dom': 19.3.0(@types/react@19.3.0)
+      '@types/use-sync-external-store': 0.0.6
+      fast-equals: 5.4.5
+      react: 19.3.1
+      react-dom: 19.3.1(react@19.3.1)
+      use-sync-external-store: 1.7.0(react@19.3.1)
+    optionalDependencies:
+      '@tiptap/extension-bubble-menu': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+      '@tiptap/extension-floating-menu': 3.32.2(@floating-ui/dom@1.8.0)(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+    transitivePeerDependencies:
+      - '@floating-ui/dom'
+
+  '@tiptap/starter-kit@3.32.2':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/extension-blockquote': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+      '@tiptap/extension-bold': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))
+      '@tiptap/extension-bullet-list': 3.32.2(@tiptap/extension-list@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))
+      '@tiptap/extension-code': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))
+      '@tiptap/extension-code-block': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+      '@tiptap/extension-document': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))
+      '@tiptap/extension-dropcursor': 3.32.2(@tiptap/extensions@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))
+      '@tiptap/extension-gapcursor': 3.32.2(@tiptap/extensions@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))
+      '@tiptap/extension-hard-break': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))
+      '@tiptap/extension-heading': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))
+      '@tiptap/extension-horizontal-rule': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+      '@tiptap/extension-italic': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))
+      '@tiptap/extension-link': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+      '@tiptap/extension-list': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+      '@tiptap/extension-list-item': 3.32.2(@tiptap/extension-list@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))
+      '@tiptap/extension-list-keymap': 3.32.2(@tiptap/extension-list@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))
+      '@tiptap/extension-ordered-list': 3.32.2(@tiptap/extension-list@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2))
+      '@tiptap/extension-paragraph': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))
+      '@tiptap/extension-strike': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))
+      '@tiptap/extension-text': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))
+      '@tiptap/extension-underline': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))
+      '@tiptap/extensions': 3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)
+      '@tiptap/pm': 3.32.2
+
+  '@tiptap/static-renderer@3.32.2(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)':
+    dependencies:
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/pm': 3.32.2
+      react: 19.3.1
+      react-dom: 19.3.1(react@19.3.1)
+
+  '@tiptap/suggestion@3.32.2(@floating-ui/dom@1.8.0)(@tiptap/core@3.32.2(@tiptap/pm@3.32.2))(@tiptap/pm@3.32.2)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      '@tiptap/core': 3.32.2(@tiptap/pm@3.32.2)
+      '@tiptap/pm': 3.32.2
+
   '@types/aria-query@5.0.4': {}
 
   '@types/chai@5.2.3':
@@ -4419,6 +4830,8 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
+  '@types/use-sync-external-store@0.0.6': {}
+
   '@typescript-eslint/eslint-plugin@8.72.0(@typescript-eslint/parser@8.72.0(eslint@10.13.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.13.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -4515,23 +4928,23 @@ snapshots:
       '@rolldown/pluginutils': 1.0.1
       vite: 8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1)
 
-  '@vitest/coverage-v8@5.1.0(vitest@5.0.5)':
+  '@vitest/coverage-v8@5.0.5(vitest@5.0.5)':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
-      '@vitest/istanbul-lib-coverage': 2.1.0
-      '@vitest/istanbul-lib-report': 2.1.0
+      '@vitest/istanbul-lib-coverage': 1.0.2
+      '@vitest/istanbul-lib-report': 1.0.2
       ast-v8-to-istanbul: 1.0.7
       magicast: 0.5.5
       obug: 3.0.0
       std-env: 4.3.0
       tinyrainbow: 3.2.0
-      vitest: 5.0.5(@types/node@26.6.5)(@vitest/coverage-v8@5.1.0)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
+      vitest: 5.0.5(@types/node@26.6.5)(@vitest/coverage-v8@5.0.5)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
 
-  '@vitest/istanbul-lib-coverage@2.1.0': {}
+  '@vitest/istanbul-lib-coverage@1.0.2': {}
 
-  '@vitest/istanbul-lib-report@2.1.0':
+  '@vitest/istanbul-lib-report@1.0.2':
     dependencies:
-      '@vitest/istanbul-lib-coverage': 2.1.0
+      '@vitest/istanbul-lib-coverage': 1.0.2
 
   '@vitest/mocker@5.0.5(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))':
     dependencies:
@@ -4579,8 +4992,6 @@ snapshots:
       estree-walker: 3.0.3
       js-tokens: 10.0.0
 
-  attr-accept@4.0.1: {}
-
   balanced-match@4.0.4: {}
 
   baseline-browser-mapping@2.11.30: {}
@@ -4797,6 +5208,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-equals@5.4.5: {}
+
   fast-json-stable-stringify@2.1.0: {}
 
   fast-levenshtein@2.0.6: {}
@@ -4819,8 +5232,6 @@ snapshots:
     dependencies:
       flat-cache: 6.1.23
 
-  file-selector@5.0.2: {}
-
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -5060,6 +5471,8 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.33.0
       lightningcss-win32-x64-msvc: 1.33.0
 
+  linkifyjs@4.4.0: {}
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -5125,6 +5538,8 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
+  orderedmap@2.1.1: {}
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -5169,6 +5584,80 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  prosemirror-changeset@2.4.6:
+    dependencies:
+      prosemirror-transform: 1.12.4
+
+  prosemirror-commands@1.7.2:
+    dependencies:
+      prosemirror-model: 1.25.12
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.4
+
+  prosemirror-dropcursor@1.8.4:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.4
+      prosemirror-view: 1.42.9
+
+  prosemirror-gapcursor@1.4.1:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.12
+      prosemirror-state: 1.4.4
+      prosemirror-view: 1.42.9
+
+  prosemirror-history@1.5.1:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.4
+      prosemirror-view: 1.42.9
+      rope-sequence: 1.3.4
+
+  prosemirror-inputrules@1.5.1:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.4
+
+  prosemirror-keymap@1.2.3:
+    dependencies:
+      prosemirror-state: 1.4.4
+      w3c-keyname: 2.2.8
+
+  prosemirror-model@1.25.12:
+    dependencies:
+      orderedmap: 2.1.1
+
+  prosemirror-schema-list@1.6.0:
+    dependencies:
+      prosemirror-model: 1.25.12
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.4
+
+  prosemirror-state@1.4.4:
+    dependencies:
+      prosemirror-model: 1.25.12
+      prosemirror-transform: 1.12.4
+      prosemirror-view: 1.42.9
+
+  prosemirror-tables@1.8.5:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.12
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.4
+      prosemirror-view: 1.42.9
+
+  prosemirror-transform@1.12.4:
+    dependencies:
+      prosemirror-model: 1.25.12
+
+  prosemirror-view@1.42.9:
+    dependencies:
+      prosemirror-model: 1.25.12
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.4
+
   punycode@2.3.1: {}
 
   qified@0.10.1:
@@ -5278,14 +5767,6 @@ snapshots:
       react: 19.3.1
       scheduler: 0.28.0
 
-  react-dropzone@20.1.4(@types/react@19.3.0)(react@19.3.1):
-    dependencies:
-      attr-accept: 4.0.1
-      file-selector: 5.0.2
-      react: 19.3.1
-    optionalDependencies:
-      '@types/react': 19.3.0
-
   react-hook-form@7.90.0(@types/react@19.3.0)(react@19.3.1):
     dependencies:
       react: 19.3.1
@@ -5325,13 +5806,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.3.0
 
-  react-resizable-panels@4.18.0(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1):
-    dependencies:
-      react: 19.3.1
-      react-dom: 19.3.1(react@19.3.1)
-    optionalDependencies:
-      '@types/react': 19.3.0
-
   react-stately@3.51.0(react@19.3.1):
     dependencies:
       '@internationalized/date': 3.12.4
@@ -5359,8 +5833,6 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
-  reselect@5.3.0: {}
-
   rolldown@1.2.14:
     dependencies:
       '@oxc-project/types': 0.154.0
@@ -5382,6 +5854,8 @@ snapshots:
       '@rolldown/binding-win32-arm64-msvc': 1.2.14
       '@rolldown/binding-win32-x64-msvc': 1.2.14
 
+  rope-sequence@1.3.4: {}
+
   saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
@@ -5530,7 +6004,7 @@ snapshots:
       jiti: 2.7.0
       yaml: 2.9.1
 
-  vitest@5.0.5(@types/node@26.6.5)(@vitest/coverage-v8@5.1.0)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1)):
+  vitest@5.0.5(@types/node@26.6.5)(@vitest/coverage-v8@5.0.5)(jsdom@30.1.3)(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1)):
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/mocker': 5.0.5(vite@8.3.4(@types/node@26.6.5)(jiti@2.7.0)(yaml@2.9.1))
@@ -5548,11 +6022,13 @@ snapshots:
       why-is-node-running: 3.2.1
     optionalDependencies:
       '@types/node': 26.6.5
-      '@vitest/coverage-v8': 5.1.0(vitest@5.0.5)
+      '@vitest/coverage-v8': 5.0.5(vitest@5.0.5)
       jsdom: 30.1.3
     transitivePeerDependencies:
       - msw
 
+  w3c-keyname@2.2.8: {}
+
   w3c-xmlserializer@6.0.0:
     dependencies:
       xml-name-validator: 5.0.0
diff --git a/src/adapters/html/index.tsx b/src/adapters/html/index.tsx
new file mode 100644
index 0000000..09f20b5
--- /dev/null
+++ b/src/adapters/html/index.tsx
@@ -0,0 +1,1095 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  defineAdapter,
+  type AccordionSlotProps,
+  type ActionMenuSlotProps,
+  type AlertSlotProps,
+  type ButtonGroupSlotProps,
+  type ButtonSlotProps,
+  type CardSlotProps,
+  type CheckboxSlotProps,
+  type DateSlotProps,
+  type DescriptionItemSlotProps,
+  type DescriptionListSlotProps,
+  type EmptyStateSlotProps,
+  type ErrorSummarySlotProps,
+  type FieldErrorsSlotProps,
+  type FieldSlotProps,
+  type FileSlotProps,
+  type FormSlotProps,
+  type HelpTextSlotProps,
+  type IconName,
+  type IconSlotProps,
+  type ImageSlotProps,
+  type InputSlotProps,
+  type LabelSlotProps,
+  type LinkButtonSlotProps,
+  type LinkSlotProps,
+  type ModalSlotProps,
+  type NavTabsSlotProps,
+  type NumberSlotProps,
+  type PaginationSlotProps,
+  type RadioSlotProps,
+  type RequiredMarkerSlotProps,
+  type SelectOption,
+  type SelectSlotProps,
+  type StatusSlotProps,
+  type TabsSlotProps,
+  type TextareaSlotProps,
+  type WysiwygSlotProps,
+} from "../../core/adapter"
+import { useUi } from "../../core/provider"
+import { useRemoteOptions } from "../../core/remote"
+import { useFormsTranslation } from "../../core/strings"
+import { thaanaKeyDown } from "../../core/thaana"
+
+/**
+ * The HTML adapter renders plain, unstyled elements with `data-slot` attributes
+ * to style them by. It is the fallback for every slot another adapter leaves
+ * out, and the reference for writing your own (see `docs/advanced-usage/adapters.md`).
+ */
+
+function cx(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(" ") || undefined
+}
+
+/** Calls both handlers; the second is skipped when the first prevented the default. */
+function compose<E extends React.SyntheticEvent>(first?: (e: E) => void, second?: (e: E) => void) {
+  if (!first) return second
+  if (!second) return first
+  return (event: E) => {
+    first(event)
+    if (!event.defaultPrevented) second(event)
+  }
+}
+
+/* -------------------------------------------------------------------------- */
+/* Form scaffolding                                                           */
+/* -------------------------------------------------------------------------- */
+
+function Form({ processing: _processing, ...props }: FormSlotProps) {
+  return <form data-slot="form" {...props} />
+}
+
+function Field({
+  id,
+  label,
+  labelId,
+  hideLabel,
+  inline,
+  help,
+  helpId,
+  errors,
+  errorId,
+  disabled,
+  classNames,
+  children,
+}: FieldSlotProps) {
+  const ui = useUi()
+  return (
+    <div
+      data-slot="field"
+      data-inline={inline || undefined}
+      data-invalid={errors.length ? true : undefined}
+      data-disabled={disabled || undefined}
+      className={classNames?.group}
+    >
+      {label ? (
+        <ui.Label
+          id={labelId}
+          htmlFor={id}
+          className={cx(hideLabel && "sr-only", classNames?.label)}
+          style={hideLabel ? SR_ONLY : undefined}
+        >
+          {label}
+        </ui.Label>
+      ) : null}
+      <div data-slot="field-control" className={classNames?.control}>
+        {children}
+        {help ? <ui.HelpText id={helpId}>{help}</ui.HelpText> : null}
+        {errors.length ? <ui.FieldErrors id={errorId} errors={errors} /> : null}
+      </div>
+    </div>
+  )
+}
+
+const SR_ONLY: React.CSSProperties = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0,
+}
+
+function Label({ required: _required, ...props }: LabelSlotProps) {
+  return <label data-slot="label" {...props} />
+}
+
+function RequiredMarker({ symbol, className }: RequiredMarkerSlotProps) {
+  return (
+    <span data-slot="required-marker" aria-hidden="true" className={className}>
+      {" "}
+      {symbol}
+    </span>
+  )
+}
+
+function HelpText({ id, className, children }: HelpTextSlotProps) {
+  return (
+    <div data-slot="help-text" id={id} className={className}>
+      {children}
+    </div>
+  )
+}
+
+function FieldErrors({ id, errors, className }: FieldErrorsSlotProps) {
+  return (
+    <div data-slot="field-errors" id={id} aria-live="polite" className={className}>
+      {errors.map((message, i) => (
+        <p key={`${i}-${message}`}>{message}</p>
+      ))}
+    </div>
+  )
+}
+
+function ErrorSummary({ id, title, description, items, onSelect, className }: ErrorSummarySlotProps) {
+  const titleId = React.useId()
+  return (
+    <div data-slot="error-summary" id={id} role="alert" aria-labelledby={titleId} className={className}>
+      <p id={titleId} data-slot="error-summary-title">
+        <strong>{title}</strong>
+      </p>
+      {description ? <p>{description}</p> : null}
+      {items.length ? (
+        <ul>
+          {items.flatMap((item) =>
+            item.messages.map((message, i) => (
+              <li key={`${item.name}-${i}`}>
+                <a
+                  href={`#${item.name}`}
+                  onClick={(event) => {
+                    if (onSelect(item.name)) event.preventDefault()
+                  }}
+                >
+                  {message}
+                </a>
+              </li>
+            )),
+          )}
+        </ul>
+      ) : null}
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/* Controls                                                                   */
+/* -------------------------------------------------------------------------- */
+
+function Addons({
+  prepend,
+  append,
+  children,
+}: {
+  prepend?: React.ReactNode
+  append?: React.ReactNode
+  children: React.ReactNode
+}) {
+  if (!prepend && !append) return <>{children}</>
+  return (
+    <div data-slot="input-group">
+      {prepend ? <span data-slot="input-prepend">{prepend}</span> : null}
+      {children}
+      {append ? <span data-slot="input-append">{append}</span> : null}
+    </div>
+  )
+}
+
+function Input({ prepend, append, thaana, thaanaToggle, onKeyDown, ...props }: InputSlotProps) {
+  const { t } = useFormsTranslation()
+  const [on, setOn] = React.useState(true)
+  const typing = !!thaana && on
+  return (
+    <Addons
+      prepend={prepend}
+      append={
+        thaana && thaanaToggle ? (
+          <>
+            <button type="button" aria-pressed={on} aria-label={t("thaana_toggle")} onClick={() => setOn((v) => !v)}>
+              ތ
+            </button>
+            {append}
+          </>
+        ) : (
+          append
+        )
+      }
+    >
+      <input
+        data-slot="input"
+        {...props}
+        dir={props.dir ?? (typing ? "rtl" : undefined)}
+        lang={props.lang ?? (typing ? "dv" : undefined)}
+        onKeyDown={typing ? compose(onKeyDown, thaanaKeyDown) : onKeyDown}
+      />
+    </Addons>
+  )
+}
+
+function Textarea({ autoResize, thaana, onKeyDown, onInput, ...props }: TextareaSlotProps) {
+  const grow = (event: React.FormEvent<HTMLTextAreaElement>) => {
+    const el = event.currentTarget
+    el.style.height = "auto"
+    el.style.height = `${el.scrollHeight}px`
+  }
+  return (
+    <textarea
+      data-slot="textarea"
+      {...props}
+      dir={props.dir ?? (thaana ? "rtl" : undefined)}
+      lang={props.lang ?? (thaana ? "dv" : undefined)}
+      onKeyDown={thaana ? compose(onKeyDown, thaanaKeyDown) : onKeyDown}
+      onInput={autoResize ? compose(onInput, grow) : onInput}
+    />
+  )
+}
+
+function NumberInput({ value, onValueChange, decimals, prepend, append, ...props }: NumberSlotProps) {
+  // Keep what is typed ("1.", "-") while it stands for the current value.
+  const [state, setState] = React.useState({ text: value === null ? "" : String(value), value })
+  if (state.value !== value) setState({ text: value === null ? "" : String(value), value })
+  return (
+    <Addons prepend={prepend} append={append}>
+      <input
+        data-slot="number"
+        type="number"
+        inputMode="decimal"
+        dir="ltr"
+        {...props}
+        step={props.step ?? (decimals !== undefined ? 1 / 10 ** decimals : "any")}
+        value={state.text}
+        onChange={(event) => {
+          const raw = event.target.value
+          const n = raw === "" ? null : Number(raw)
+          if (n !== null && !Number.isFinite(n)) {
+            setState({ text: raw, value })
+            return
+          }
+          const next = n === null || decimals === undefined ? n : Number(n.toFixed(decimals))
+          setState({ text: raw, value: next })
+          onValueChange(next)
+        }}
+      />
+    </Addons>
+  )
+}
+
+function Checkbox({ checked, onCheckedChange, label, className, ...props }: CheckboxSlotProps) {
+  const ref = React.useRef<HTMLInputElement>(null)
+  React.useEffect(() => {
+    if (ref.current) ref.current.indeterminate = checked === "indeterminate"
+  }, [checked])
+  const input = (
+    <input
+      ref={ref}
+      data-slot="checkbox"
+      type="checkbox"
+      {...props}
+      name={props.name || undefined}
+      checked={checked === true}
+      onChange={(event) => onCheckedChange(event.target.checked)}
+    />
+  )
+  if (!label) return <span className={className}>{input}</span>
+  return (
+    <label data-slot="checkbox-label" className={className}>
+      {input} <span>{label}</span>
+    </label>
+  )
+}
+
+function Radio({ checked, onCheckedChange, label, className, ...props }: RadioSlotProps) {
+  const input = (
+    <input
+      data-slot="radio"
+      type="radio"
+      {...props}
+      checked={checked}
+      onChange={(event) => onCheckedChange(event.target.checked)}
+    />
+  )
+  if (!label) return <span className={className}>{input}</span>
+  return (
+    <label data-slot="radio-label" className={className}>
+      {input} <span>{label}</span>
+    </label>
+  )
+}
+
+function Select({
+  options,
+  value,
+  onValueChange,
+  multiple,
+  searchable,
+  clearable,
+  creatable,
+  placeholder,
+  loading,
+  remote,
+  className,
+  ...props
+}: SelectSlotProps) {
+  const { t } = useFormsTranslation()
+  const [query, setQuery] = React.useState("")
+  const found = useRemoteOptions(remote, query)
+  const base = remote
+    ? [...options, ...found.options.filter((o) => !options.some((x) => x.value === o.value))]
+    : options
+  const known = new Set(base.map((o) => o.value))
+  const all: SelectOption[] = [...base, ...value.filter((v) => !known.has(v)).map((v) => ({ value: v, label: v }))]
+  const q = query.trim().toLowerCase()
+  const shown =
+    searchable && !remote && q ? all.filter((o) => value.includes(o.value) || o.label.toLowerCase().includes(q)) : all
+  const searchId = props.id ? `${props.id}-search` : undefined
+
+  const select = (
+    <select
+      data-slot="select"
+      {...props}
+      className={searchable || creatable || remote ? undefined : className}
+      multiple={multiple}
+      aria-busy={loading || found.loading || undefined}
+      value={multiple ? value : (value[0] ?? "")}
+      onChange={(event) => {
+        const next = multiple
+          ? Array.from(event.target.selectedOptions, (o) => o.value)
+          : event.target.value
+            ? [event.target.value]
+            : []
+        onValueChange(next)
+      }}
+    >
+      {!multiple && (placeholder || clearable || !value.length) ? (
+        <option value="" disabled={!clearable && !!props.required && !!value.length}>
+          {placeholder ?? ""}
+        </option>
+      ) : null}
+      {shown.map((option) => (
+        <option key={option.value} value={option.value} disabled={option.disabled}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  )
+
+  if (!searchable && !creatable && !remote) return select
+
+  return (
+    <div data-slot="select-search" className={className}>
+      <input
+        type="search"
+        id={searchId}
+        aria-label={t("search")}
+        aria-controls={props.id}
+        disabled={props.disabled}
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key !== "Enter") return
+          event.preventDefault()
+          const text = query.trim()
+          if (!text) return
+          const match = shown.find((o) => o.label.toLowerCase() === text.toLowerCase()) ?? (creatable ? null : shown[0])
+          const picked = match ? match.value : creatable ? text : null
+          if (picked === null) return
+          onValueChange(multiple ? [...value.filter((v) => v !== picked), picked] : [picked])
+          setQuery("")
+        }}
+      />
+      {select}
+    </div>
+  )
+}
+
+const DATE_TYPES = { date: "date", datetime: "datetime-local", time: "time" } as const
+
+/** `yyyy-MM-dd HH:mm:ss` ⇄ the `datetime-local` value `yyyy-MM-ddTHH:mm:ss`. */
+function toNative(value: string, mode: DateSlotProps["mode"]) {
+  return mode === "datetime" ? value.replace(" ", "T") : value
+}
+
+function fromNative(value: string, mode: DateSlotProps["mode"]) {
+  if (mode !== "datetime" || !value) return value
+  const [date, time = "00:00"] = value.split("T")
+  return `${date} ${time.length === 5 ? `${time}:00` : time}`
+}
+
+function DateInput({ mode, value, onValueChange, name, min, max, ...props }: DateSlotProps) {
+  return (
+    <>
+      <input
+        data-slot="date"
+        type={DATE_TYPES[mode]}
+        dir="ltr"
+        step={mode === "datetime" ? 1 : undefined}
+        {...props}
+        min={min === undefined ? undefined : toNative(min, mode)}
+        max={max === undefined ? undefined : toNative(max, mode)}
+        value={toNative(value, mode)}
+        onChange={(event) => onValueChange(fromNative(event.target.value, mode))}
+      />
+      {/* The visible input's format varies by browser; this one submits the Laravel format. */}
+      <input type="hidden" name={name} value={value} disabled={props.disabled} />
+    </>
+  )
+}
+
+function FileInput({
+  onFilesChange,
+  buttonLabel,
+  placeholder,
+  showList,
+  maxSize: _maxSize,
+  className,
+  ...props
+}: FileSlotProps) {
+  const [names, setNames] = React.useState<string[]>([])
+  return (
+    <span data-slot="file" className={className}>
+      <input
+        type="file"
+        {...props}
+        name={props.name || undefined}
+        aria-label={buttonLabel}
+        onChange={(event) => {
+          const files = Array.from(event.target.files ?? [])
+          setNames(files.map((f) => f.name))
+          onFilesChange(files)
+        }}
+      />
+      {showList ? <span data-slot="file-list">{names.length ? names.join(", ") : placeholder}</span> : null}
+    </span>
+  )
+}
+
+function useObjectUrl(value: File | string | null) {
+  const objectUrl = React.useMemo(
+    () =>
+      value && typeof value !== "string" && typeof URL.createObjectURL === "function"
+        ? URL.createObjectURL(value)
+        : null,
+    [value],
+  )
+  React.useEffect(
+    () => () => {
+      if (objectUrl) URL.revokeObjectURL(objectUrl)
+    },
+    [objectUrl],
+  )
+  return typeof value === "string" ? value : objectUrl
+}
+
+function ImageInput({
+  value,
+  onValueChange,
+  alt,
+  shape,
+  aspectRatio,
+  cover,
+  fullWidth,
+  placeholder,
+  maxSize: _maxSize,
+  className,
+  ...props
+}: ImageSlotProps) {
+  const { t } = useFormsTranslation()
+  const url = useObjectUrl(value)
+  const ref = React.useRef<HTMLInputElement>(null)
+  return (
+    <span data-slot="image" data-shape={shape} data-full-width={fullWidth || undefined} className={className}>
+      <span
+        data-slot="image-preview"
+        style={{ display: "block", aspectRatio: String(aspectRatio), maxWidth: fullWidth ? undefined : "16rem" }}
+      >
+        {url ? (
+          <img
+            src={url}
+            alt={alt}
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: cover ? "cover" : "contain",
+              borderRadius: shape === "circle" ? "50%" : undefined,
+            }}
+          />
+        ) : (
+          placeholder
+        )}
+      </span>
+      <input
+        ref={ref}
+        type="file"
+        {...props}
+        name={props.name || undefined}
+        aria-label={alt}
+        onChange={(event) => onValueChange(event.target.files?.[0] ?? null)}
+      />
+      {value && !props.disabled ? (
+        <button
+          type="button"
+          onClick={() => {
+            if (ref.current) ref.current.value = ""
+            onValueChange(null)
+          }}
+        >
+          {t("fileinput_remove_file")}
+        </button>
+      ) : null}
+    </span>
+  )
+}
+
+function Wysiwyg({ value, onValueChange, ...props }: WysiwygSlotProps) {
+  return (
+    <textarea data-slot="wysiwyg" rows={8} {...props} value={value} onChange={(e) => onValueChange(e.target.value)} />
+  )
+}
+
+/** No map without a map library: `MapInput` still shows its coordinate fields. */
+function MapPlaceholder() {
+  return null
+}
+
+/* -------------------------------------------------------------------------- */
+/* Buttons, links, icons                                                      */
+/* -------------------------------------------------------------------------- */
+
+const ICON_PATHS: Record<IconName, string> = {
+  download: "M12 3v12m0 0-4-4m4 4 4-4M5 21h14",
+  close: "M6 6l12 12M18 6 6 18",
+  plus: "M12 5v14M5 12h14",
+  error: "M12 8v5m0 3h.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
+  "chevron-up": "m6 15 6-6 6 6",
+  "chevron-down": "m6 9 6 6 6-6",
+  "chevron-left": "m15 6-6 6 6 6",
+  "chevron-right": "m9 6 6 6-6 6",
+  "chevrons-up-down": "m7 15 5 5 5-5M7 9l5-5 5 5",
+}
+
+function Icon({ name, size = "md", className }: IconSlotProps) {
+  const px = size === "sm" ? 14 : 16
+  // Arrows that point to a side follow the reading direction.
+  const flip = name === "chevron-left" || name === "chevron-right"
+  return (
+    <svg
+      data-slot="icon"
+      data-icon={name}
+      width={px}
+      height={px}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={cx(flip && "rtl:-scale-x-100", className)}
+    >
+      <path d={ICON_PATHS[name]} />
+    </svg>
+  )
+}
+
+function ButtonContent({
+  startIcon,
+  endIcon,
+  loading,
+  children,
+}: Pick<ButtonSlotProps, "startIcon" | "endIcon" | "loading" | "children">) {
+  const ui = useUi()
+  return (
+    <>
+      {loading ? <span data-slot="spinner" aria-hidden="true" /> : startIcon ? <ui.Icon name={startIcon} /> : null}
+      {children}
+      {endIcon ? <ui.Icon name={endIcon} /> : null}
+    </>
+  )
+}
+
+function Button({ color, size, loading, startIcon, endIcon, children, disabled, ...props }: ButtonSlotProps) {
+  return (
+    <button
+      data-slot="button"
+      data-color={color}
+      data-size={size}
+      aria-busy={loading || undefined}
+      disabled={disabled || loading}
+      {...props}
+    >
+      <ButtonContent startIcon={startIcon} endIcon={endIcon} loading={loading}>
+        {children}
+      </ButtonContent>
+    </button>
+  )
+}
+
+function Link(props: LinkSlotProps) {
+  return <a data-slot="link" {...props} />
+}
+
+function LinkButton({ color, size, disabled, startIcon, endIcon, children, href, ...props }: LinkButtonSlotProps) {
+  const ui = useUi()
+  return (
+    <ui.Link
+      data-slot="link-button"
+      data-color={color}
+      data-size={size}
+      href={disabled ? undefined! : href}
+      aria-disabled={disabled || undefined}
+      {...props}
+    >
+      <ButtonContent startIcon={startIcon} endIcon={endIcon}>
+        {children}
+      </ButtonContent>
+    </ui.Link>
+  )
+}
+
+function ButtonGroup({ orientation, className, children }: ButtonGroupSlotProps) {
+  return (
+    <div data-slot="button-group" role="group" data-orientation={orientation} className={className}>
+      {children}
+    </div>
+  )
+}
+
+function ActionMenu({ label, items }: ActionMenuSlotProps) {
+  const ref = React.useRef<HTMLDetailsElement>(null)
+  return (
+    <details data-slot="action-menu" ref={ref}>
+      <summary aria-label={label}>▾</summary>
+      <ul role="menu">
+        {items.map((item, i) => (
+          <li key={i} role="none">
+            <button
+              type="button"
+              role="menuitem"
+              onClick={() => {
+                if (ref.current) ref.current.open = false
+                item.onSelect()
+              }}
+            >
+              {item.label}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </details>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/* Display                                                                    */
+/* -------------------------------------------------------------------------- */
+
+function Alert({ type, heading, icon, dismissible, className, children }: AlertSlotProps) {
+  const ui = useUi()
+  const { t } = useFormsTranslation()
+  const [open, setOpen] = React.useState(true)
+  if (!open) return null
+  return (
+    <div data-slot="alert" data-type={type} role={type === "danger" ? "alert" : "status"} className={className}>
+      {icon ? <span data-slot="alert-icon">{icon}</span> : null}
+      <div>
+        {heading ? <p data-slot="alert-heading">{heading}</p> : null}
+        {children}
+      </div>
+      {dismissible ? (
+        <button type="button" aria-label={t("close")} onClick={() => setOpen(false)}>
+          <ui.Icon name="close" />
+        </button>
+      ) : null}
+    </div>
+  )
+}
+
+function Card({ title, subtitle, footer, imageTop, className, children }: CardSlotProps) {
+  const ui = useUi()
+  const composed = title || subtitle || footer !== undefined || imageTop
+  if (!composed) {
+    return (
+      <div data-slot="card" className={className}>
+        {children}
+      </div>
+    )
+  }
+  return (
+    <div data-slot="card" className={className}>
+      {imageTop}
+      {title || subtitle ? (
+        <ui.CardHeader>
+          {title ? <ui.CardTitle>{title}</ui.CardTitle> : null}
+          {subtitle ? <ui.CardSubtitle>{subtitle}</ui.CardSubtitle> : null}
+        </ui.CardHeader>
+      ) : null}
+      <div data-slot="card-content">{children}</div>
+      {footer !== undefined ? <ui.CardFooter>{footer}</ui.CardFooter> : null}
+    </div>
+  )
+}
+
+const cardPart = (slot: string) =>
+  function CardPart(props: React.ComponentProps<"div">) {
+    return <div data-slot={slot} {...props} />
+  }
+
+function Accordion({ id, items, defaultValue, multiple, className }: AccordionSlotProps) {
+  const [open, setOpen] = React.useState<string[]>(defaultValue)
+  return (
+    <div data-slot="accordion" id={id} className={className}>
+      {items.map((item) => (
+        <details
+          key={item.value}
+          id={item.id}
+          open={open.includes(item.value)}
+          onToggle={(event) => {
+            const isOpen = (event.currentTarget as HTMLDetailsElement).open
+            setOpen((current) => {
+              if (isOpen === current.includes(item.value)) return current
+              if (!isOpen) return current.filter((v) => v !== item.value)
+              return multiple ? [...current, item.value] : [item.value]
+            })
+          }}
+        >
+          <summary aria-disabled={item.disabled || undefined}>{item.title}</summary>
+          <div id={item.value}>{item.content}</div>
+        </details>
+      ))}
+    </div>
+  )
+}
+
+function Tabs({ items, defaultValue, onValueChange, className }: TabsSlotProps) {
+  const [active, setActive] = React.useState(defaultValue)
+  const baseId = React.useId()
+  const select = (value: string) => {
+    setActive(value)
+    onValueChange(value)
+  }
+  return (
+    <div data-slot="tabs" className={className}>
+      <div role="tablist">
+        {items.map((item) => (
+          <button
+            key={item.value}
+            type="button"
+            role="tab"
+            id={`${baseId}-${item.value}-tab`}
+            aria-controls={`${baseId}-${item.value}`}
+            aria-selected={active === item.value}
+            disabled={item.disabled}
+            onClick={() => select(item.value)}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+      {items.map((item) => (
+        <TabPanel
+          key={item.value}
+          id={`${baseId}-${item.value}`}
+          hidden={active !== item.value}
+          onReveal={() => select(item.value)}
+        >
+          {item.content}
+        </TabPanel>
+      ))}
+    </div>
+  )
+}
+
+/** A tab panel that opens when a field inside asks to be revealed (errors focus it). */
+function TabPanel({
+  id,
+  hidden,
+  onReveal,
+  children,
+}: {
+  id: string
+  hidden: boolean
+  onReveal: () => void
+  children: React.ReactNode
+}) {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const reveal = React.useRef(onReveal)
+  React.useEffect(() => {
+    reveal.current = onReveal
+  })
+  React.useEffect(() => {
+    const node = ref.current
+    if (!node) return
+    const listener = () => reveal.current()
+    node.addEventListener("forms:reveal", listener)
+    return () => node.removeEventListener("forms:reveal", listener)
+  }, [])
+  return (
+    <div ref={ref} role="tabpanel" id={id} aria-labelledby={`${id}-tab`} hidden={hidden}>
+      {children}
+    </div>
+  )
+}
+
+function NavTabs({ items, className }: NavTabsSlotProps) {
+  const ui = useUi()
+  return (
+    <nav data-slot="nav-tabs" className={className}>
+      <ul>
+        {items.map((item, i) => (
+          <li key={i}>
+            <ui.Link
+              href={item.disabled ? undefined! : item.href}
+              aria-current={item.active ? "page" : undefined}
+              aria-disabled={item.disabled || undefined}
+            >
+              {item.icon}
+              {item.label}
+            </ui.Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+function Modal({
+  id,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  title,
+  description,
+  footer,
+  size,
+  className,
+  children,
+}: ModalSlotProps) {
+  const ui = useUi()
+  const { t } = useFormsTranslation()
+  const ref = React.useRef<HTMLDialogElement>(null)
+  const [own, setOwn] = React.useState(!!defaultOpen)
+  const open = openProp ?? own
+  const titleId = React.useId()
+  const setOpen = (next: boolean) => {
+    setOwn(next)
+    onOpenChange?.(next)
+  }
+
+  React.useEffect(() => {
+    const dialog = ref.current
+    if (!dialog) return
+    if (open && !dialog.open) {
+      if (typeof dialog.showModal === "function") dialog.showModal()
+      else dialog.setAttribute("open", "")
+    } else if (!open && dialog.open) {
+      if (typeof dialog.close === "function") dialog.close()
+      else dialog.removeAttribute("open")
+    }
+  }, [open])
+
+  return (
+    <>
+      {trigger
+        ? React.cloneElement(trigger as React.ReactElement<{ onClick?: (e: React.MouseEvent) => void }>, {
+            onClick: (event: React.MouseEvent) => {
+              ;(trigger.props as { onClick?: (e: React.MouseEvent) => void }).onClick?.(event)
+              setOpen(true)
+            },
+          })
+        : null}
+      <dialog
+        ref={ref}
+        id={id}
+        data-slot="modal"
+        data-size={size}
+        aria-labelledby={title ? titleId : undefined}
+        className={className}
+        onClose={() => {
+          if (open) setOpen(false)
+        }}
+      >
+        <div data-slot="modal-header">
+          {title ? <h2 id={titleId}>{title}</h2> : null}
+          <button type="button" aria-label={t("close")} onClick={() => setOpen(false)}>
+            <ui.Icon name="close" />
+          </button>
+        </div>
+        {description ? <p>{description}</p> : null}
+        <div data-slot="modal-body">{children}</div>
+        {footer ? <div data-slot="modal-footer">{footer}</div> : null}
+      </dialog>
+    </>
+  )
+}
+
+function Status({ tone, className, children }: StatusSlotProps) {
+  return (
+    <span data-slot="status" data-tone={tone} className={className}>
+      {children}
+    </span>
+  )
+}
+
+function DescriptionList({ layout, className, children }: DescriptionListSlotProps) {
+  return (
+    <dl data-slot="description-list" data-layout={layout} className={className}>
+      {children}
+    </dl>
+  )
+}
+
+function DescriptionItem({ label, classNames, className, children }: DescriptionItemSlotProps) {
+  return (
+    <div data-slot="description-item" className={className}>
+      {label !== null && label !== undefined && label !== "" ? <dt className={classNames?.label}>{label}</dt> : null}
+      <dd className={classNames?.value}>{children}</dd>
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/* Listing                                                                    */
+/* -------------------------------------------------------------------------- */
+
+function Table(props: React.ComponentProps<"table">) {
+  return <table data-slot="table" {...props} />
+}
+
+function EmptyState({ icon, title, description, action, className }: EmptyStateSlotProps) {
+  return (
+    <div data-slot="empty-state" className={className}>
+      {icon ? <div data-slot="empty-state-icon">{icon}</div> : null}
+      <p data-slot="empty-state-title">
+        <strong>{title}</strong>
+      </p>
+      {description ? <p>{description}</p> : null}
+      {action ? <div data-slot="empty-state-action">{action}</div> : null}
+    </div>
+  )
+}
+
+/** Page numbers around the current page, with gaps (`null`) for the rest. */
+export function pageWindow(current: number, last: number, around = 1): Array<number | null> {
+  const pages: Array<number | null> = []
+  for (let page = 1; page <= last; page++) {
+    if (page === 1 || page === last || Math.abs(page - current) <= around) pages.push(page)
+    else if (pages.at(-1) !== null) pages.push(null)
+  }
+  return pages
+}
+
+function Pagination({ currentPage, lastPage, hrefFor, onPageChange, className }: PaginationSlotProps) {
+  const ui = useUi()
+  const { t } = useFormsTranslation()
+  if (lastPage <= 1) return null
+
+  const item = (page: number, content: React.ReactNode, label: string, disabled = false, current = false) => {
+    if (disabled) return <span aria-disabled="true">{content}</span>
+    if (hrefFor) {
+      return (
+        <ui.Link href={hrefFor(page)} aria-label={label} aria-current={current ? "page" : undefined}>
+          {content}
+        </ui.Link>
+      )
+    }
+    return (
+      <button
+        type="button"
+        aria-label={label}
+        aria-current={current ? "page" : undefined}
+        onClick={() => onPageChange?.(page)}
+      >
+        {content}
+      </button>
+    )
+  }
+
+  return (
+    <nav data-slot="pagination" aria-label={t("pagination")} className={className}>
+      <ul>
+        <li>{item(currentPage - 1, <ui.Icon name="chevron-left" />, t("previous"), currentPage <= 1)}</li>
+        {pageWindow(currentPage, lastPage).map((page, i) => (
+          <li key={page ?? `gap-${i}`}>
+            {page === null ? "…" : item(page, page, t("page", { page }), false, page === currentPage)}
+          </li>
+        ))}
+        <li>{item(currentPage + 1, <ui.Icon name="chevron-right" />, t("next"), currentPage >= lastPage)}</li>
+      </ul>
+    </nav>
+  )
+}
+
+const element = <T extends keyof React.JSX.IntrinsicElements>(tag: T, slot: string) =>
+  function Element(props: React.ComponentProps<T>) {
+    return React.createElement(tag, { "data-slot": slot, ...props })
+  }
+
+/** Plain HTML for every slot. */
+export const html = defineAdapter({
+  name: "html",
+  components: {
+    Form,
+    Field,
+    Label,
+    RequiredMarker,
+    HelpText,
+    FieldErrors,
+    ErrorSummary,
+    Input,
+    Textarea,
+    Number: NumberInput,
+    Checkbox,
+    Radio,
+    Select,
+    Date: DateInput,
+    File: FileInput,
+    Image: ImageInput,
+    Wysiwyg,
+    Map: MapPlaceholder,
+    Button,
+    Link,
+    LinkButton,
+    ButtonGroup,
+    Icon,
+    ActionMenu,
+    Alert,
+    Card,
+    CardHeader: cardPart("card-header"),
+    CardTitle: cardPart("card-title"),
+    CardSubtitle: cardPart("card-subtitle"),
+    CardFooter: cardPart("card-footer"),
+    Accordion,
+    Tabs,
+    NavTabs,
+    Modal,
+    Status,
+    DescriptionList,
+    DescriptionItem,
+    Table,
+    TableHeader: element("thead", "table-header"),
+    TableBody: element("tbody", "table-body"),
+    TableRow: element("tr", "table-row"),
+    TableHead: element("th", "table-head"),
+    TableCell: element("td", "table-cell"),
+    EmptyState,
+    Pagination,
+  },
+})
diff --git a/src/adapters/onu/editor.tsx b/src/adapters/onu/editor.tsx
new file mode 100644
index 0000000..b048eac
--- /dev/null
+++ b/src/adapters/onu/editor.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import { WysiwygEditor } from "@javaabu/onu/editor"
+
+import { defineAdapter, type WysiwygSlotProps } from "../../core/adapter"
+
+function OnuWysiwyg({ value, onValueChange, ...props }: WysiwygSlotProps) {
+  return (
+    <WysiwygEditor
+      {...props}
+      format="html"
+      value={value}
+      onValueChange={(next) => onValueChange(typeof next === "string" ? next : "")}
+    />
+  )
+}
+
+/**
+ * Onu's Tiptap editor for `Wysiwyg`. A separate entry because the editor is
+ * large: `<FormsProvider ui={mergeAdapters(onu, onuEditor)}>`.
+ */
+export const onuEditor = defineAdapter({ name: "onu-editor", components: { Wysiwyg: OnuWysiwyg } })
diff --git a/src/adapters/onu/index.tsx b/src/adapters/onu/index.tsx
new file mode 100644
index 0000000..b8b158f
--- /dev/null
+++ b/src/adapters/onu/index.tsx
@@ -0,0 +1,537 @@
+"use client"
+
+import * as React from "react"
+import {
+  Accordion,
+  ActionMenu,
+  ApiSelect,
+  Button,
+  ButtonGroup,
+  Callout,
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  DatePicker,
+  DateTimePicker,
+  DescriptionList,
+  DescriptionListItem,
+  EmptyState,
+  FieldErrors,
+  FileInput,
+  FormField,
+  HelpText,
+  Icon,
+  ImageInput,
+  Label,
+  LinkButton,
+  Modal,
+  NavTabs,
+  NumberInput,
+  Pagination,
+  PasswordInput,
+  RequiredMarker,
+  SearchableSelect,
+  Select,
+  StatusBadge,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TextInput,
+  Textarea,
+  TimePicker,
+  ValidationSummary,
+  confirm,
+  toast,
+  type ButtonVariant,
+  type ChoiceOption,
+} from "@javaabu/onu"
+
+import {
+  defineAdapter,
+  type AccordionSlotProps,
+  type ActionMenuSlotProps,
+  type AlertSlotProps,
+  type ButtonColor,
+  type ButtonGroupSlotProps,
+  type ButtonSlotProps,
+  type CardSlotProps,
+  type CheckboxSlotProps,
+  type DateSlotProps,
+  type DescriptionItemSlotProps,
+  type DescriptionListSlotProps,
+  type EmptyStateSlotProps,
+  type ErrorSummarySlotProps,
+  type FieldErrorsSlotProps,
+  type FieldSlotProps,
+  type FileSlotProps,
+  type FormSlotProps,
+  type HelpTextSlotProps,
+  type IconSlotProps,
+  type ImageSlotProps,
+  type InputSlotProps,
+  type LabelSlotProps,
+  type LinkButtonSlotProps,
+  type ModalSlotProps,
+  type NavTabsSlotProps,
+  type NumberSlotProps,
+  type PaginationSlotProps,
+  type RadioSlotProps,
+  type RequiredMarkerSlotProps,
+  type SelectSlotProps,
+  type StatusSlotProps,
+  type TabsSlotProps,
+  type TextareaSlotProps,
+} from "../../core/adapter"
+import { parseDateValue, toDateString, toDateTimeString, toTimeString } from "../../support/dates"
+
+/** Bootstrap colours (Blade's `color`) and the Onu button variants they map to. */
+const VARIANTS: Record<string, ButtonVariant> = {
+  primary: "default",
+  secondary: "secondary",
+  success: "success",
+  danger: "destructive",
+  warning: "warning",
+  info: "default",
+  light: "outline",
+  dark: "secondary",
+  link: "link",
+}
+
+/** The Onu variant for a Blade button colour (`outline-*` → `outline`). */
+export function colorToVariant(color: ButtonColor | string | undefined): ButtonVariant {
+  if (!color) return "default"
+  if (color.startsWith("outline-")) return "outline"
+  return VARIANTS[color] ?? "default"
+}
+
+const BUTTON_SIZES = { sm: "sm", md: "default", lg: "lg", icon: "icon" } as const
+
+/* -------------------------------------------------------------------------- */
+/* Form scaffolding                                                           */
+/* -------------------------------------------------------------------------- */
+
+function OnuForm({ processing: _processing, className, ...props }: FormSlotProps) {
+  return <form data-slot="form" className={["gap-6 grid", className].filter(Boolean).join(" ")} {...props} />
+}
+
+function OnuField({
+  id,
+  name,
+  label,
+  hideLabel,
+  inline,
+  help,
+  errors,
+  disabled,
+  classNames,
+  children,
+}: FieldSlotProps) {
+  return (
+    <FormField
+      // The core already put the required marker in the label and computed ids.
+      label={label}
+      name={name}
+      id={id}
+      help={help}
+      error={errors}
+      disabled={disabled}
+      labelLayout={inline ? "inline" : undefined}
+      hideLabel={hideLabel}
+      className={classNames?.group}
+      classNames={{ label: classNames?.label, control: classNames?.control }}
+    >
+      {children}
+    </FormField>
+  )
+}
+
+function OnuLabel({ required: _required, ...props }: LabelSlotProps) {
+  return <Label {...props} />
+}
+
+function OnuRequiredMarker({ symbol, className }: RequiredMarkerSlotProps) {
+  return <RequiredMarker symbol={symbol} className={className} />
+}
+
+function OnuHelpText(props: HelpTextSlotProps) {
+  return <HelpText {...props} />
+}
+
+function OnuFieldErrors(props: FieldErrorsSlotProps) {
+  return <FieldErrors {...props} />
+}
+
+function OnuErrorSummary({ title, description, items, className }: ErrorSummarySlotProps) {
+  const errors = Object.fromEntries(items.map((item) => [item.name, item.messages]))
+  const labels = Object.fromEntries(items.filter((i) => i.label).map((item) => [item.name, item.label]))
+  return <ValidationSummary errors={errors} title={title} message={description} labels={labels} className={className} />
+}
+
+/* -------------------------------------------------------------------------- */
+/* Controls                                                                   */
+/* -------------------------------------------------------------------------- */
+
+function OnuInput({ prepend, append, thaana, thaanaToggle, type, size: _size, ...props }: InputSlotProps) {
+  const common = { ...props, startAddon: prepend, endAddon: append }
+  if (type === "password") return <PasswordInput {...common} />
+  return <TextInput {...common} type={type} thaana={thaana} thaanaToggle={thaanaToggle} urlProtocol={false} />
+}
+
+function OnuTextarea({ thaana, ...props }: TextareaSlotProps) {
+  return <Textarea {...props} thaana={thaana} />
+}
+
+function OnuNumber({ value, onValueChange, decimals, prepend, append, ...props }: NumberSlotProps) {
+  return (
+    <NumberInput
+      {...props}
+      startAddon={prepend}
+      endAddon={append}
+      // Blade prints the raw number; keep it ungrouped with all its decimals.
+      formatOptions={{ useGrouping: false, maximumFractionDigits: decimals ?? 10 }}
+      value={value}
+      onValueChange={(n) => onValueChange(n ?? null)}
+    />
+  )
+}
+
+function OnuCheckbox({ checked, onCheckedChange, label, ...props }: CheckboxSlotProps) {
+  return (
+    <Checkbox
+      {...props}
+      name={props.name || undefined}
+      checked={checked}
+      label={label}
+      onCheckedChange={(state) => onCheckedChange(state === true)}
+    />
+  )
+}
+
+function OnuRadio({ checked, onCheckedChange, label, className, ...props }: RadioSlotProps) {
+  return (
+    <div data-slot="radio" className={["gap-2 flex items-center", className].filter(Boolean).join(" ")}>
+      <input
+        {...props}
+        type="radio"
+        checked={checked}
+        onChange={(event) => onCheckedChange(event.target.checked)}
+        className="size-4 shrink-0 cursor-pointer accent-primary disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:outline aria-invalid:outline-destructive"
+      />
+      {label ? (
+        <label htmlFor={props.id} className="text-sm leading-none cursor-pointer select-none">
+          {label}
+        </label>
+      ) : null}
+    </div>
+  )
+}
+
+function OnuSelect({
+  options,
+  value,
+  onValueChange,
+  multiple,
+  searchable,
+  clearable,
+  creatable,
+  placeholder,
+  loading: _loading,
+  remote,
+  ...props
+}: SelectSlotProps) {
+  const choices = options as ChoiceOption[]
+  const create = creatable ? { onCreate: (label: string): ChoiceOption => ({ value: label, label }) } : {}
+
+  if (remote) {
+    const api = {
+      ...props,
+      placeholder,
+      clearable,
+      url: remote.url,
+      initialOptions: choices,
+      valueKey: remote.valueKey,
+      labelKey: remote.labelKey,
+      searchParam: remote.searchParam,
+      params: remote.params,
+      minChars: remote.minChars,
+      dependsOn: remote.dependsOn,
+    }
+    return multiple ? (
+      <ApiSelect {...api} multiple value={value} onValueChange={(v: string[]) => onValueChange(v)} />
+    ) : (
+      <ApiSelect {...api} value={value[0] ?? null} onValueChange={(v: string | null) => onValueChange(v ? [v] : [])} />
+    )
+  }
+
+  if (multiple || searchable || creatable) {
+    return multiple ? (
+      <SearchableSelect
+        {...props}
+        {...create}
+        multiple
+        options={choices}
+        placeholder={placeholder}
+        clearable={clearable}
+        value={value}
+        onValueChange={(v: string[]) => onValueChange(v)}
+      />
+    ) : (
+      <SearchableSelect
+        {...props}
+        {...create}
+        options={choices}
+        placeholder={placeholder}
+        clearable={clearable}
+        value={value[0] ?? null}
+        onValueChange={(v: string | null) => onValueChange(v ? [v] : [])}
+      />
+    )
+  }
+
+  return (
+    <Select
+      {...props}
+      options={choices}
+      placeholder={placeholder}
+      clearable={clearable}
+      value={value[0] ?? ""}
+      onValueChange={(v: string) => onValueChange(v ? [v] : [])}
+    />
+  )
+}
+
+const FORMAT = { date: toDateString, datetime: toDateTimeString, time: toTimeString } as const
+
+function OnuDate({ mode, value, onValueChange, name, min, max, ...props }: DateSlotProps) {
+  const date = parseDateValue(value)
+  const change = (next: Date | null) => onValueChange(next ? FORMAT[mode](next) : "")
+  const minDate = min ? (parseDateValue(min) ?? undefined) : undefined
+  const maxDate = max ? (parseDateValue(max) ?? undefined) : undefined
+  return (
+    <>
+      {mode === "date" ? (
+        <DatePicker {...props} value={date} onValueChange={change} min={minDate} max={maxDate} />
+      ) : mode === "datetime" ? (
+        <DateTimePicker {...props} value={date} onValueChange={change} min={minDate} max={maxDate} />
+      ) : (
+        <TimePicker {...props} value={date} onValueChange={change} />
+      )}
+      {/* Submit the Laravel format, whatever the picker shows. */}
+      <input type="hidden" name={name} value={value} disabled={props.disabled} />
+    </>
+  )
+}
+
+function OnuFile({ onFilesChange, name, ...props }: FileSlotProps) {
+  return (
+    <FileInput
+      {...props}
+      name={name || undefined}
+      onFilesAdded={onFilesChange}
+      onValueChange={(entries) => {
+        if (!entries.length) onFilesChange([])
+      }}
+    />
+  )
+}
+
+function OnuImage({ shape, cover, fullWidth, className, name, ...props }: ImageSlotProps) {
+  return (
+    <ImageInput
+      {...props}
+      name={name || undefined}
+      shape={shape === "circle" ? "circle" : undefined}
+      className={[fullWidth ? "max-w-none" : undefined, className].filter(Boolean).join(" ") || undefined}
+      classNames={cover ? { image: "object-cover" } : undefined}
+    />
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/* Buttons and links                                                          */
+/* -------------------------------------------------------------------------- */
+
+function OnuButton({ color, size, ...props }: ButtonSlotProps) {
+  return <Button {...props} variant={colorToVariant(color)} size={size ? BUTTON_SIZES[size] : undefined} />
+}
+
+function OnuLinkButton({ color, size, ...props }: LinkButtonSlotProps) {
+  return <LinkButton {...props} variant={colorToVariant(color)} size={size ? BUTTON_SIZES[size] : undefined} />
+}
+
+function OnuButtonGroup(props: ButtonGroupSlotProps) {
+  return <ButtonGroup {...props} />
+}
+
+function OnuIcon({ name, size, className }: IconSlotProps) {
+  return <Icon name={name} size={size === "sm" ? "sm" : undefined} className={className} />
+}
+
+function OnuActionMenu({ label, trigger, items }: ActionMenuSlotProps) {
+  return (
+    <ActionMenu
+      label={label}
+      trigger={trigger}
+      items={items.map((item) => ({ label: item.label, onSelect: item.onSelect }))}
+    />
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/* Display                                                                    */
+/* -------------------------------------------------------------------------- */
+
+const ALERT_TONES = {
+  primary: "info",
+  info: "info",
+  success: "success",
+  warning: "warning",
+  danger: "danger",
+} as const
+
+function OnuAlert({ type, heading, icon, ...props }: AlertSlotProps) {
+  const tone = ALERT_TONES[type as keyof typeof ALERT_TONES] ?? "neutral"
+  return <Callout {...props} tone={tone} title={heading} icon={icon === undefined ? false : icon} />
+}
+
+function OnuCard({ title, subtitle, footer, imageTop, children, className }: CardSlotProps) {
+  return (
+    <Card title={title} description={subtitle} footer={footer} media={imageTop} className={className}>
+      {children}
+    </Card>
+  )
+}
+
+function OnuAccordion({ id, items, defaultValue, multiple, className }: AccordionSlotProps) {
+  const list = items.map(({ value, title, content, disabled }) => ({ value, title, content, disabled }))
+  return multiple ? (
+    <Accordion id={id} type="multiple" defaultValue={defaultValue} items={list} className={className} />
+  ) : (
+    <Accordion id={id} type="single" defaultValue={defaultValue[0]} items={list} className={className} />
+  )
+}
+
+function OnuTabs({ items, defaultValue, onValueChange, className }: TabsSlotProps) {
+  return <Tabs className={className} defaultValue={defaultValue} onValueChange={onValueChange} items={items} />
+}
+
+function OnuNavTabs({ items, className }: NavTabsSlotProps) {
+  return (
+    <NavTabs
+      className={className}
+      items={items.map((item) => ({
+        label: item.label,
+        href: item.href,
+        isActive: item.active,
+        disabled: item.disabled,
+        icon: item.icon,
+      }))}
+    />
+  )
+}
+
+function OnuModal({ title, size, ...props }: ModalSlotProps) {
+  return <Modal {...props} size={size === "md" ? "default" : size} title={title ?? ""} hideTitle={!title} />
+}
+
+function OnuStatus({ tone, className, children }: StatusSlotProps) {
+  return (
+    <StatusBadge status={tone} icon={false} className={className}>
+      {children}
+    </StatusBadge>
+  )
+}
+
+function OnuDescriptionList({ layout, className, children }: DescriptionListSlotProps) {
+  return (
+    <DescriptionList layout={layout} divided={layout === "auto"} className={className}>
+      {children}
+    </DescriptionList>
+  )
+}
+
+function OnuDescriptionItem({ label, classNames, className, children }: DescriptionItemSlotProps) {
+  return (
+    <DescriptionListItem label={label} classNames={classNames} className={className}>
+      {children}
+    </DescriptionListItem>
+  )
+}
+
+function OnuEmptyState(props: EmptyStateSlotProps) {
+  return <EmptyState {...props} />
+}
+
+function OnuPagination({ currentPage, lastPage, hrefFor, onPageChange, className }: PaginationSlotProps) {
+  return (
+    <Pagination
+      className={className}
+      paginator={{ current_page: currentPage, last_page: lastPage, per_page: 0 }}
+      getPageHref={hrefFor}
+      onPageChange={onPageChange}
+    />
+  )
+}
+
+/** Form components on Onu, Javaabu's React UI library. */
+export const onu = defineAdapter({
+  name: "onu",
+  confirm: ({ title, description, confirmLabel, cancelLabel, destructive }) =>
+    confirm({ title, description, confirmLabel, cancelLabel, variant: destructive ? "destructive" : undefined }),
+  notify: (message, options) => {
+    if (options?.type === "error") toast.error(message)
+    else if (options?.type === "success") toast.success(message)
+    else toast(message)
+  },
+  components: {
+    Form: OnuForm,
+    Field: OnuField,
+    Label: OnuLabel,
+    RequiredMarker: OnuRequiredMarker,
+    HelpText: OnuHelpText,
+    FieldErrors: OnuFieldErrors,
+    ErrorSummary: OnuErrorSummary,
+    Input: OnuInput,
+    Textarea: OnuTextarea,
+    Number: OnuNumber,
+    Checkbox: OnuCheckbox,
+    Radio: OnuRadio,
+    Select: OnuSelect,
+    Date: OnuDate,
+    File: OnuFile,
+    Image: OnuImage,
+    Button: OnuButton,
+    LinkButton: OnuLinkButton,
+    ButtonGroup: OnuButtonGroup,
+    Icon: OnuIcon,
+    ActionMenu: OnuActionMenu,
+    Alert: OnuAlert,
+    Card: OnuCard,
+    CardHeader,
+    CardTitle,
+    CardSubtitle: CardDescription,
+    CardFooter,
+    Accordion: OnuAccordion,
+    Tabs: OnuTabs,
+    NavTabs: OnuNavTabs,
+    Modal: OnuModal,
+    Status: OnuStatus,
+    DescriptionList: OnuDescriptionList,
+    DescriptionItem: OnuDescriptionItem,
+    Table,
+    TableHeader,
+    TableBody,
+    TableRow,
+    TableHead,
+    TableCell,
+    EmptyState: OnuEmptyState,
+    Pagination: OnuPagination,
+  },
+})
diff --git a/src/adapters/onu/maps.tsx b/src/adapters/onu/maps.tsx
new file mode 100644
index 0000000..6adf275
--- /dev/null
+++ b/src/adapters/onu/maps.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import { MapPicker, MapPolygon, MapRadius, type PolygonCollection } from "@javaabu/onu/maps"
+
+import { defineAdapter, type MapSlotProps } from "../../core/adapter"
+
+function toCollection(polygons: number[][][][]): PolygonCollection | null {
+  if (!polygons.length) return null
+  return {
+    type: "FeatureCollection",
+    features: polygons.map((rings) => ({
+      type: "Feature",
+      properties: {},
+      geometry: { type: "Polygon", coordinates: rings as [number, number][][] },
+    })),
+  }
+}
+
+function OnuMap({
+  mode,
+  point,
+  onPointChange,
+  radius,
+  onRadiusChange,
+  maxRadius,
+  polygons,
+  onPolygonsChange,
+  ...props
+}: MapSlotProps) {
+  if (mode === "polygon") {
+    return (
+      <MapPolygon
+        {...props}
+        multiple={false}
+        value={toCollection(polygons)}
+        onValueChange={(value) => onPolygonsChange(value ? value.features.map((f) => f.geometry.coordinates) : [])}
+      />
+    )
+  }
+  if (mode === "radius") {
+    return (
+      <MapRadius
+        {...props}
+        max={maxRadius}
+        value={point && radius !== null ? { center: point, radius } : null}
+        onValueChange={(value) => {
+          onPointChange(value?.center ?? null)
+          onRadiusChange(value?.radius ?? null)
+        }}
+      />
+    )
+  }
+  // The core renders the latitude / longitude fields.
+  return <MapPicker {...props} coordinates={false} value={point} onValueChange={onPointChange} />
+}
+
+/**
+ * Onu's maps for `MapInput`. A separate entry because the maps are large:
+ * `<FormsProvider ui={mergeAdapters(onu, onuMaps)}>`.
+ */
+export const onuMaps = defineAdapter({ name: "onu-maps", components: { Map: OnuMap } })
diff --git a/src/components/forms.test.tsx b/src/adapters/onu/onu.test.tsx
similarity index 92%
rename from src/components/forms.test.tsx
rename to src/adapters/onu/onu.test.tsx
index 90ded14..4db2488 100644
--- a/src/components/forms.test.tsx
+++ b/src/adapters/onu/onu.test.tsx
@@ -1,16 +1,34 @@
-import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react"
+import * as React from "react"
+import {
+  act,
+  fireEvent,
+  render as rtlRender,
+  screen,
+  waitFor,
+  within,
+  type RenderOptions,
+} from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 
-import { FormsProvider } from "../context/forms-provider"
-import { Model } from "../context/binding"
-import { Checkbox, Radio } from "./checkbox"
-import { ConditionalWrapper, TextEntry } from "./display"
-import { File } from "./files"
-import { Form } from "./form"
-import { Email, Hidden, Input, Password, Text } from "./inputs"
-import { Table, TableCell, TableRow } from "./listing"
-import { Select, Select2 } from "./select"
-import { Textarea } from "./textarea"
+import { FormsProvider } from "../../core/provider"
+import { Model } from "../../core/binding"
+import { Checkbox, Radio } from "../../components/checkbox"
+import { ConditionalWrapper, TextEntry } from "../../components/display"
+import { File } from "../../components/files"
+import { Form } from "../../components/form"
+import { Email, Hidden, Input, Password, Text } from "../../components/inputs"
+import { Table, TableCell, TableRow } from "../../components/listing"
+import { Select, Select2 } from "../../components/select"
+import { Textarea } from "../../components/textarea"
+import { onu } from "."
+
+/** Every component test here renders through the Onu adapter. */
+function render(ui: React.ReactElement, options?: RenderOptions) {
+  return rtlRender(ui, {
+    wrapper: ({ children }) => <FormsProvider ui={onu}>{children}</FormsProvider>,
+    ...options,
+  })
+}
 
 function formData(container: HTMLElement) {
   return new FormData(container.querySelector("form")!)
@@ -235,7 +253,7 @@ describe("ConditionalWrapper", () => {
         </ConditionalWrapper>
       </Form>,
     )
-    const section = document.querySelector("[data-slot=conditional-display]")!
+    const section = document.querySelector("[data-slot=conditional-wrapper]")!
     expect(section).toHaveAttribute("data-state", "hidden")
     await userEvent.type(screen.getByLabelText("Type"), "quiz")
     await waitFor(() => expect(section).toHaveAttribute("data-state", "enabled"))
@@ -250,7 +268,7 @@ describe("ConditionalWrapper", () => {
         </ConditionalWrapper>
       </Form>,
     )
-    const section = document.querySelector("[data-slot=conditional-display]")!
+    const section = document.querySelector("[data-slot=conditional-wrapper]")!
     expect(section).toHaveAttribute("data-state", "enabled")
     await userEvent.click(screen.getByRole("checkbox", { name: "Online" }))
     await waitFor(() => expect(section).toHaveAttribute("data-state", "disabled"))
diff --git a/src/components/buttons.tsx b/src/components/buttons.tsx
index 859d838..175cda6 100644
--- a/src/components/buttons.tsx
+++ b/src/components/buttons.tsx
@@ -1,60 +1,36 @@
 "use client"
 
 import * as React from "react"
-import {
-  Button as OnuButton,
-  ButtonGroup as OnuButtonGroup,
-  LinkButton as OnuLinkButton,
-  useOnuForm,
-  type ButtonProps as OnuButtonProps,
-  type ButtonVariant,
-} from "@javaabu/onu"
-import { useSyncedState } from "../support/use-synced-state"
-
-/** Bootstrap colour names (Blade's `color`) and the Onu variants they map to. */
-export type ButtonColor =
-  "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | `outline-${string}`
 
-const VARIANTS: Record<string, ButtonVariant> = {
-  primary: "default",
-  secondary: "secondary",
-  success: "success",
-  danger: "destructive",
-  warning: "warning",
-  info: "default",
-  light: "outline",
-  dark: "secondary",
-  link: "link",
-}
+import type { ButtonColor, ButtonSlotProps, LinkButtonSlotProps } from "../core/adapter"
+import { useFormState } from "../core/form-context"
+import { useUi } from "../core/provider"
+import { useSyncedState } from "../support/use-synced-state"
 
-/** The Onu variant for a Blade button colour (`outline-*` → `outline`). */
-export function colorToVariant(color: string | undefined): ButtonVariant {
-  if (!color) return "default"
-  if (color.startsWith("outline-")) return "outline"
-  return VARIANTS[color] ?? "default"
-}
+export type { ButtonColor }
 
-export interface ButtonProps extends Omit<OnuButtonProps, "color"> {
-  /** Bootstrap colour (`primary`, `danger`, …). Ignored when `variant` is set. Default `primary`. */
+export interface ButtonProps extends Omit<ButtonSlotProps, "color"> {
+  /** Bootstrap colour (`primary`, `danger`, `outline-secondary`, …). Default `primary`. */
   color?: ButtonColor
   /**
    * Show a spinner once the form submits (js-utilities' `animate-submit`): on a
-   * valid native submit, or while the surrounding `Form`'s `onSubmit` runs.
+   * valid native submit, or while the surrounding `Form` processes.
    */
   animate?: boolean
 }
 
 /** `<x-forms::button>`. */
-export function Button({ color = "primary", variant, animate, type, onClick, loading, ...props }: ButtonProps) {
-  const form = useOnuForm()
+export function Button({ color = "primary", animate, type = "button", onClick, loading, ...props }: ButtonProps) {
+  const ui = useUi()
+  const form = useFormState()
   // A click starts the spinner; any change of the form's status (submitting, error, …) resets it.
   const [clicked, setClicked] = useSyncedState(false, form?.status)
 
   return (
-    <OnuButton
+    <ui.Button
       {...props}
       type={type}
-      variant={variant ?? colorToVariant(color)}
+      color={color}
       loading={loading ?? (animate ? clicked || !!form?.processing : undefined)}
       onClick={(event) => {
         onClick?.(event)
@@ -71,22 +47,26 @@ export function Submit({ animate = true, ...props }: Omit<ButtonProps, "type">)
   return <Button {...props} type="submit" animate={animate} />
 }
 
-export interface LinkButtonProps extends Omit<React.ComponentProps<typeof OnuLinkButton>, "href" | "color"> {
+export interface LinkButtonProps extends Omit<LinkButtonSlotProps, "href" | "color"> {
   url?: string
   color?: ButtonColor
 }
 
 /** `<x-forms::link-button>`: a link styled as a button. */
-export function LinkButton({ url, color = "primary", variant, ...props }: LinkButtonProps) {
-  return <OnuLinkButton {...props} href={url ?? "#"} variant={variant ?? colorToVariant(color)} />
+export function LinkButton({ url, color = "primary", ...props }: LinkButtonProps) {
+  const ui = useUi()
+  return <ui.LinkButton {...props} href={url ?? "#"} color={color} />
 }
 
-export interface ButtonGroupProps extends React.ComponentProps<typeof OnuButtonGroup> {
+export interface ButtonGroupProps {
   /** `false` stacks the buttons vertically. Default `true`. */
   inline?: boolean
+  className?: string
+  children?: React.ReactNode
 }
 
 /** `<x-forms::button-group>`. */
-export function ButtonGroup({ inline = true, orientation, ...props }: ButtonGroupProps) {
-  return <OnuButtonGroup {...props} orientation={orientation ?? (inline ? "horizontal" : "vertical")} />
+export function ButtonGroup({ inline = true, ...props }: ButtonGroupProps) {
+  const ui = useUi()
+  return <ui.ButtonGroup {...props} orientation={inline ? "horizontal" : "vertical"} />
 }
diff --git a/src/components/checkbox.tsx b/src/components/checkbox.tsx
index 387d738..1069304 100644
--- a/src/components/checkbox.tsx
+++ b/src/components/checkbox.tsx
@@ -1,19 +1,13 @@
 "use client"
 
 import * as React from "react"
-import {
-  Checkbox as OnuCheckbox,
-  RequiredMarker,
-  useFormFieldControl,
-  type CheckboxProps as OnuCheckboxProps,
-} from "@javaabu/onu"
-
-import { getBoundValue, useBindTarget, useOldInput, type ModelProp } from "../context/binding"
-import { usePublishField } from "../context/registry"
+import { getBoundValue, useBindTarget, useOldInput, type ModelProp } from "../core/binding"
+import { useFormValues } from "../core/form-context"
+import { useUi } from "../core/provider"
+import { usePublishField } from "../core/registry"
 import { isEmpty, isNil, looseIncludes, toFormString, wrap } from "../support/data"
-import { nameToId } from "../support/str"
-import { FieldWrapper, splitFieldProps, useFieldNames, type FieldProps } from "./field"
-import { useSyncedState } from "../support/use-synced-state"
+import { before, nameToId } from "../support/str"
+import { splitFieldProps, useField, useFieldState, useLabelWithMarker, type FieldProps } from "./field"
 
 /**
  * The checked state of a checkbox or radio, in javaabu/forms order:
@@ -51,107 +45,120 @@ export function choiceId(name: string, value: unknown, id?: string) {
   return name.endsWith("[]") ? `${base}-${toFormString(value)}` : base
 }
 
-type OnuControlProps = Omit<
-  OnuCheckboxProps,
-  "name" | "id" | "value" | "defaultChecked" | "checked" | "required" | "disabled" | "label" | "children"
->
-
-export interface CheckboxProps extends Omit<FieldProps, "default">, OnuControlProps {
+export interface CheckboxProps extends Omit<FieldProps, "default"> {
   /** Value submitted when checked. Default `1`. */
   value?: string | number | boolean
   /** Checked when there is no old input and the bound value is `null`. Default `false`. */
   default?: boolean
   /** Controlled checked state. */
   checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
   /** Label beside the box (Blade's default slot). With `inline`, `label` goes in the label column instead. */
   children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Checkboxes and radios in an Inertia `useForm` store: a group (`channels[]`) holds an
+ * array of the checked values, radios the selected value, a single checkbox its value or `false`.
+ */
+function useChoiceStore(name: string, value: string, kind: "checkbox" | "radio", initial: boolean) {
+  const store = useFormValues()
+  const group = kind === "checkbox" && name.endsWith("[]")
+  const key = group ? before(name, "[]") : name
+
+  React.useEffect(() => {
+    if (!store) return
+    if (group) {
+      store.update(key, (current) => {
+        const list = wrap(current as unknown).map(toFormString)
+        return initial && !list.includes(value) ? [...list, value] : list
+      })
+    } else if (kind === "radio") {
+      if (initial || !store.has(key)) store.update(key, (current) => (initial ? value : (current ?? "")))
+    } else if (!store.has(key)) {
+      store.set(key, initial ? value : false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [store, key])
+
+  if (!store) return null
+  const raw = store.get(key)
+  const checked = group
+    ? looseIncludes(wrap(raw as unknown), value)
+    : kind === "radio"
+      ? toFormString(raw) === value
+      : !isEmpty(raw)
+  const set = (on: boolean) => {
+    if (group) {
+      store.update(key, (current) => {
+        const list = wrap(current as unknown)
+          .map(toFormString)
+          .filter((v) => v !== value)
+        return on ? [...list, value] : list
+      })
+    } else if (kind === "radio") {
+      if (on) store.set(key, value)
+    } else store.set(key, on ? value : false)
+  }
+  return { checked, set }
 }
 
 /** `<x-forms::checkbox>`: a checkbox with model binding (booleans or arrays of values), old input and errors. */
 export function Checkbox(props: CheckboxProps) {
+  const ui = useUi()
   const { field, rest } = splitFieldProps(props)
-  const { value = 1, checked, onCheckedChange, children, ...checkboxProps } = rest
-  const names = useFieldNames(field)
+  const { value = 1, checked, onCheckedChange, children, className } = rest
+  const submitted = toFormString(value)
   const id = choiceId(field.name, value, field.id)
+  const f = useField({ ...field, controlId: id, labelInControl: !field.inline })
   const initial = useInitialChecked(field.name, field.model, value, field.default)
-  const [current, setCurrent] = useSyncedState(initial)
-  const isChecked = checked ?? current
+  const store = useChoiceStore(field.name, submitted, "checkbox", initial)
+  const [own, setOwn] = useFieldState(field.name, initial, { controlled: checked, key: String(initial), store: false })
+  const current = checked ?? store?.checked ?? own
+  const setCurrent = (on: boolean) => {
+    setOwn(on)
+    store?.set(on)
+  }
 
   usePublishField({
     id,
     name: field.name,
     kind: "checkbox",
-    value: toFormString(value),
-    checked: isChecked,
-    disabled: field.disabled,
+    value: submitted,
+    checked: current,
+    disabled: f.disabled,
+    label: f.labelText,
   })
 
-  const boxLabel = field.inline ? children : (children ?? names.label)
-
-  return (
-    <FieldWrapper {...field} id={id} label={field.inline ? names.label : undefined}>
-      <OnuCheckbox
-        {...checkboxProps}
-        key={checked === undefined ? String(initial) : undefined}
-        id={id}
-        name={field.name}
-        value={toFormString(value)}
-        required={field.required || undefined}
-        disabled={field.disabled || undefined}
-        {...(checked === undefined ? { defaultChecked: initial } : { checked })}
-        onCheckedChange={(state) => {
-          setCurrent(state === true)
-          onCheckedChange?.(state)
-        }}
-        label={
-          boxLabel ? (
-            <>
-              {boxLabel}
-              {field.required && !field.inline ? <RequiredMarker /> : null}
-            </>
-          ) : undefined
-        }
-      />
-    </FieldWrapper>
+  const boxLabel = useLabelWithMarker(field.inline ? children : (children ?? f.label), field.required && !field.inline)
+
+  return f.wrap(
+    <ui.Checkbox
+      {...f.control}
+      className={className}
+      value={submitted}
+      checked={current}
+      label={boxLabel || undefined}
+      onCheckedChange={(state) => {
+        setCurrent(state)
+        onCheckedChange?.(state)
+      }}
+    />,
   )
 }
 
-export interface RadioProps
-  extends
-    Omit<FieldProps, "default">,
-    Omit<
-      React.ComponentProps<"input">,
-      "name" | "id" | "value" | "type" | "defaultChecked" | "required" | "disabled" | "children"
-    > {
+export interface RadioProps extends Omit<FieldProps, "default"> {
   /** Value submitted when selected. Default `1`. */
   value?: string | number | boolean
   /** Selected when there is no old input and the bound value is `null`. Default `false`. */
   default?: boolean
+  /** Controlled selected state. */
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
   /** Label beside the radio (Blade's default slot). */
   children?: React.ReactNode
-}
-
-function RadioControl({
-  label,
-  marker,
-  ...props
-}: React.ComponentProps<"input"> & { label?: React.ReactNode; marker?: boolean }) {
-  const control = useFormFieldControl(props)
-  return (
-    <div data-slot="radio" className="gap-2 flex items-center">
-      <input
-        {...control}
-        type="radio"
-        className="size-4 shrink-0 cursor-pointer accent-primary disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:outline aria-invalid:outline-destructive"
-      />
-      {label ? (
-        <label htmlFor={control.id} className="text-sm leading-none cursor-pointer select-none">
-          {label}
-          {marker ? <RequiredMarker /> : null}
-        </label>
-      ) : null}
-    </div>
-  )
+  className?: string
 }
 
 /**
@@ -159,51 +166,61 @@ function RadioControl({
  * as in plain HTML; give each a different `value`.
  */
 export function Radio(props: RadioProps) {
+  const ui = useUi()
   const { field, rest } = splitFieldProps(props)
-  const { value = 1, checked, onChange, children, ...inputProps } = rest
-  const names = useFieldNames(field)
+  const { value = 1, checked, onCheckedChange, children, className } = rest
+  const submitted = toFormString(value)
   const id = choiceId(`${field.name}[]`, value, field.id)
+  const f = useField({ ...field, controlId: id, labelInControl: !field.inline })
   const initial = useInitialChecked(field.name, field.model, value, field.default, true)
-  const [current, setCurrent] = useSyncedState(initial)
+  const store = useChoiceStore(field.name, submitted, "radio", initial)
+  const [own, setOwn] = useFieldState(field.name, initial, { controlled: checked, key: String(initial), store: false })
+  const current = checked ?? store?.checked ?? own
+  const setCurrent = (on: boolean) => {
+    setOwn(on)
+    store?.set(on)
+  }
 
   // A radio only reports its own change; listen to the group to see it being unchecked.
   React.useEffect(() => {
     if (typeof document === "undefined") return
     const sync = (event: Event) => {
       const target = event.target as HTMLInputElement
-      if (target.type === "radio" && target.name === field.name && target.id !== id) setCurrent(false)
+      if (target.type === "radio" && target.name === field.name && target.id !== id && target.checked) {
+        setCurrent(false)
+      }
     }
     document.addEventListener("change", sync, true)
     return () => document.removeEventListener("change", sync, true)
-  }, [field.name, id, setCurrent])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [field.name, id])
 
   usePublishField({
     id,
     name: field.name,
     kind: "radio",
-    value: toFormString(value),
-    checked: checked ?? current,
-    disabled: field.disabled,
+    value: submitted,
+    checked: current,
+    disabled: f.disabled,
+    label: f.labelText,
   })
 
-  return (
-    <FieldWrapper {...field} id={id} label={field.inline ? names.label : undefined}>
-      <RadioControl
-        {...inputProps}
-        key={checked === undefined ? String(initial) : undefined}
-        id={id}
-        name={field.name}
-        value={toFormString(value)}
-        required={field.required || undefined}
-        marker={field.required && !field.inline}
-        disabled={field.disabled || undefined}
-        {...(checked === undefined ? { defaultChecked: initial } : { checked })}
-        onChange={(event) => {
-          setCurrent(event.target.checked)
-          onChange?.(event)
-        }}
-        label={field.inline ? children : (children ?? names.label)}
-      />
-    </FieldWrapper>
+  const radioLabel = useLabelWithMarker(
+    field.inline ? children : (children ?? f.label),
+    field.required && !field.inline,
+  )
+
+  return f.wrap(
+    <ui.Radio
+      {...f.control}
+      className={className}
+      value={submitted}
+      checked={current}
+      label={radioLabel || undefined}
+      onCheckedChange={(state) => {
+        if (state) setCurrent(true)
+        onCheckedChange?.(state)
+      }}
+    />,
   )
 }
diff --git a/src/components/dates.tsx b/src/components/dates.tsx
index 6471f11..0332c14 100644
--- a/src/components/dates.tsx
+++ b/src/components/dates.tsx
@@ -1,102 +1,91 @@
 "use client"
 
 import * as React from "react"
-import {
-  DatePicker,
-  DateTimePicker,
-  TimePicker,
-  type DatePickerProps,
-  type DateTimePickerProps,
-  type TimePickerProps,
-} from "@javaabu/onu"
 
-import { useFieldValue } from "../context/binding"
-import { usePublishField } from "../context/registry"
+import type { DateMode } from "../core/adapter"
+import { useFieldValue } from "../core/binding"
+import { useUi } from "../core/provider"
+import { usePublishField } from "../core/registry"
 import { parseDateValue, toDateString, toDateTimeString, toTimeString } from "../support/dates"
-import { FieldWrapper, splitFieldProps, useFieldNames, type FieldProps, type PlaceholderProps } from "./field"
-import { useSyncedState } from "../support/use-synced-state"
+import { splitFieldProps, useField, useFieldState, type FieldProps, type PlaceholderProps } from "./field"
 
-type PickerOwnProps = "name" | "id" | "value" | "defaultValue" | "placeholder" | "required" | "disabled"
-
-interface DateFieldBase extends FieldProps, PlaceholderProps {
+export interface DateProps extends FieldProps, PlaceholderProps {
   /** Controlled value: a `Date`, or a Laravel date string. */
   value?: Date | string | null
-  onChange?: (value: Date | null) => void
+  /** The new value, as submitted (`yyyy-MM-dd`, `yyyy-MM-dd HH:mm:ss` or `HH:mm`), and as a `Date`. */
+  onChange?: (value: string, date: Date | null) => void
+  /** Earliest value: a `Date` or a Laravel date string. */
+  min?: Date | string
+  /** Latest value. */
+  max?: Date | string
+  className?: string
 }
 
-export type DateProps = DateFieldBase & Omit<DatePickerProps, PickerOwnProps | "onChange">
-export type DatetimeProps = DateFieldBase & Omit<DateTimePickerProps, PickerOwnProps | "onChange">
-export type TimeProps = DateFieldBase & Omit<TimePickerProps, PickerOwnProps | "onChange">
-
-type Picker = "date" | "datetime" | "time"
+export type DatetimeProps = DateProps
+export type TimeProps = DateProps
 
-const FORMATTERS: Record<Picker, (d: Date) => string> = {
+const FORMATTERS: Record<DateMode, (d: Date) => string> = {
   date: toDateString,
   datetime: toDateTimeString,
   time: toTimeString,
 }
 
-function DateField({ picker, ...props }: (DateProps | DatetimeProps | TimeProps) & { picker: Picker }) {
+/** Formats any date value the way the field submits it, or `""`. */
+export function formatDateValue(value: unknown, mode: DateMode): string {
+  const date = parseDateValue(value)
+  return date ? FORMATTERS[mode](date) : ""
+}
+
+function DateField({ mode, ...props }: DateProps & { mode: DateMode }) {
+  const ui = useUi()
   const { field, rest } = splitFieldProps(props)
-  const { value, onChange, placeholder, showPlaceholder, ...pickerProps } = rest
-  const names = useFieldNames({ ...field, placeholder, showPlaceholder })
+  const { value, onChange, placeholder, showPlaceholder, min, max, className } = rest
+  const f = useField({ ...field, placeholder, showPlaceholder })
   const raw = useFieldValue(field.name, field.model, field.default)
-  const initial = React.useMemo(() => parseDateValue(raw), [raw])
-  const initialKey = initial ? initial.getTime() : ""
-  const controlled = value !== undefined
-  const [current, setCurrent] = useSyncedState<Date | null>(initial, initialKey)
-  const shown = controlled ? parseDateValue(value) : current
+  const initial = React.useMemo(() => formatDateValue(raw, mode), [raw, mode])
+  const [current, setCurrent] = useFieldState(field.name, initial, {
+    controlled: value === undefined ? undefined : formatDateValue(value, mode),
+  })
 
   usePublishField({
-    id: names.id,
+    id: f.id,
     name: field.name,
     kind: "value",
-    value: shown ? FORMATTERS[picker](shown) : "",
-    disabled: field.disabled,
+    value: current,
+    disabled: f.disabled,
+    label: f.labelText,
   })
 
-  const common = {
-    ...pickerProps,
-    id: names.id,
-    name: field.name,
-    placeholder: names.placeholder,
-    required: field.required || undefined,
-    disabled: field.disabled || undefined,
-    ...(controlled ? { value: parseDateValue(value) } : { defaultValue: initial }),
-    onChange: (next: Date | null) => {
-      setCurrent(next)
-      onChange?.(next)
-    },
-  }
-
-  return (
-    <FieldWrapper {...field} id={names.id} label={names.label}>
-      <React.Fragment key={controlled ? undefined : String(initialKey)}>
-        {picker === "date" ? (
-          <DatePicker {...(common as DatePickerProps)} />
-        ) : picker === "datetime" ? (
-          <DateTimePicker {...(common as DateTimePickerProps)} />
-        ) : (
-          <TimePicker {...(common as TimePickerProps)} />
-        )}
-      </React.Fragment>
-    </FieldWrapper>
+  return f.wrap(
+    <ui.Date
+      {...f.control}
+      className={className}
+      mode={mode}
+      placeholder={f.placeholder}
+      min={min === undefined ? undefined : formatDateValue(min, mode)}
+      max={max === undefined ? undefined : formatDateValue(max, mode)}
+      value={current}
+      onValueChange={(next) => {
+        setCurrent(next)
+        onChange?.(next, parseDateValue(next))
+      }}
+    />,
   )
 }
 
 /** `<x-forms::date>`: a date picker that submits `yyyy-MM-dd`. */
 function DateComponent(props: DateProps) {
-  return <DateField {...props} picker="date" />
+  return <DateField {...props} mode="date" />
 }
 
-/** `<x-forms::datetime>`: a date and time picker that submits `yyyy-MM-ddTHH:mm:ss`. */
+/** `<x-forms::datetime>`: a date and time picker that submits `yyyy-MM-dd HH:mm:ss`. */
 export function Datetime(props: DatetimeProps) {
-  return <DateField {...props} picker="datetime" />
+  return <DateField {...props} mode="datetime" />
 }
 
 /** `<x-forms::time>`: a time picker that submits `HH:mm`. */
 export function Time(props: TimeProps) {
-  return <DateField {...props} picker="time" />
+  return <DateField {...props} mode="time" />
 }
 
 // Exported as `Date`; named differently here so the global `Date` stays usable.
diff --git a/src/components/display.tsx b/src/components/display.tsx
index 747e6cd..c8ebc46 100644
--- a/src/components/display.tsx
+++ b/src/components/display.tsx
@@ -1,29 +1,11 @@
 "use client"
 
 import * as React from "react"
-import {
-  Accordion as OnuAccordion,
-  Callout,
-  Card as OnuCard,
-  CardContent,
-  CardDescription,
-  CardFooter as OnuCardFooter,
-  CardHeader as OnuCardHeader,
-  CardTitle as OnuCardTitle,
-  ConditionalDisplay,
-  ConditionalLink as OnuConditionalLink,
-  DescriptionList,
-  DescriptionListItem,
-  Modal as OnuModal,
-  NavTabs as OnuNavTabs,
-  StatusBadge,
-  Tabs as OnuTabs,
-  type ModalProps as OnuModalProps,
-} from "@javaabu/onu"
-
-import { getBoundValue, Model, useBindTarget, type ModelProp } from "../context/binding"
-import { useFormsConfig, useFormsTranslation } from "../context/forms-provider"
-import { useWatchField } from "../context/registry"
+import type { CardPartSlotProps, ModalSlotProps } from "../core/adapter"
+import { getBoundValue, Model, useBindTarget, type ModelProp } from "../core/binding"
+import { useFormsConfig, useUi } from "../core/provider"
+import { useWatchField } from "../core/registry"
+import { useFormsTranslation } from "../core/strings"
 import { isNil } from "../support/data"
 import { kebab, nameToId, nameToLabel, slotName } from "../support/str"
 import { colorToTone, FormattedValue } from "./format"
@@ -38,15 +20,7 @@ export function renderIconProp(icon: React.ReactNode): React.ReactNode {
 /* Alert                                                                      */
 /* -------------------------------------------------------------------------- */
 
-const ALERT_VARIANTS = {
-  primary: "info",
-  info: "info",
-  success: "success",
-  warning: "warning",
-  danger: "destructive",
-} as const
-
-export interface AlertProps extends Omit<React.ComponentProps<typeof Callout>, "variant" | "title" | "icon"> {
+export interface AlertProps {
   /** Bootstrap alert type (`primary`, `success`, `warning`, `danger`, `info`, …). Default `primary`. */
   type?: string
   /** Heading above the message. */
@@ -54,49 +28,62 @@ export interface AlertProps extends Omit<React.ComponentProps<typeof Callout>, "
   /** Icon: a semantic name or CSS classes. */
   icon?: React.ReactNode
   dismissible?: boolean
+  className?: string
+  children?: React.ReactNode
 }
 
-/** `<x-forms::alert>`: a message box (Onu `Callout`). */
-export function Alert({ type = "primary", heading, icon, ...props }: AlertProps) {
-  const variant = ALERT_VARIANTS[type as keyof typeof ALERT_VARIANTS] ?? "default"
-  return (
-    <Callout {...props} variant={variant} title={heading} icon={icon === undefined ? false : renderIconProp(icon)} />
-  )
+/** `<x-forms::alert>`: a message box. */
+export function Alert({ type = "primary", icon, ...props }: AlertProps) {
+  const ui = useUi()
+  return <ui.Alert {...props} type={type} icon={icon === undefined ? undefined : renderIconProp(icon)} />
 }
 
 /* -------------------------------------------------------------------------- */
 /* Card                                                                       */
 /* -------------------------------------------------------------------------- */
 
-export interface CardProps extends Omit<React.ComponentProps<typeof OnuCard>, "title" | "description"> {
+export interface CardProps {
   title?: React.ReactNode
   /** Text under the title (Blade's `subtitle` slot). */
   subtitle?: React.ReactNode
   /** Header content when there is no title (Blade's `header` slot). */
   header?: React.ReactNode
+  footer?: React.ReactNode
   /** Content before the header, e.g. an image (Blade's `image_top` slot). */
   imageTop?: React.ReactNode
+  className?: string
+  children?: React.ReactNode
 }
 
 /** `<x-forms::card>`. */
-export function Card({ title, subtitle, header, imageTop, footer, children, ...props }: CardProps) {
-  const composed = !!(title || subtitle || header || footer !== undefined || imageTop)
-  return (
-    <OnuCard {...props} title={title ?? header} description={subtitle} footer={footer}>
-      {imageTop}
-      {composed ? <CardContent>{children}</CardContent> : children}
-    </OnuCard>
-  )
+export function Card({ title, header, ...props }: CardProps) {
+  const ui = useUi()
+  return <ui.Card {...props} title={title ?? header} />
 }
 
 /** `<x-forms::card.header>`. */
-export const CardHeader = OnuCardHeader
+export function CardHeader(props: CardPartSlotProps) {
+  const ui = useUi()
+  return <ui.CardHeader {...props} />
+}
+
 /** `<x-forms::card.title>`. */
-export const CardTitle = OnuCardTitle
+export function CardTitle(props: CardPartSlotProps) {
+  const ui = useUi()
+  return <ui.CardTitle {...props} />
+}
+
 /** `<x-forms::card.subtitle>`. */
-export const CardSubtitle = CardDescription
+export function CardSubtitle(props: CardPartSlotProps) {
+  const ui = useUi()
+  return <ui.CardSubtitle {...props} />
+}
+
 /** `<x-forms::card.footer>`. */
-export const CardFooter = OnuCardFooter
+export function CardFooter(props: CardPartSlotProps) {
+  const ui = useUi()
+  return <ui.CardFooter {...props} />
+}
 
 /* -------------------------------------------------------------------------- */
 /* Accordion                                                                  */
@@ -140,7 +127,6 @@ export interface AccordionProps {
   slots?: Record<string, React.ReactNode>
   /** `AccordionItem` elements, after the generated items. */
   children?: React.ReactNode
-  variant?: React.ComponentProps<typeof OnuAccordion>["variant"]
   className?: string
 }
 
@@ -149,7 +135,8 @@ function textContent(content: React.ReactNode) {
 }
 
 /** `<x-forms::accordion>`: collapsible panels from `items` and/or `AccordionItem` children. */
-export function Accordion({ id, items, slots = {}, children, variant, className }: AccordionProps) {
+export function Accordion({ id, items, slots = {}, children, className }: AccordionProps) {
+  const ui = useUi()
   const slot = (key: string) => slots[key] ?? slots[kebab(key)]
   const entries: Array<{
     value: string
@@ -189,27 +176,15 @@ export function Accordion({ id, items, slots = {}, children, variant, className
   })
 
   const open = entries.filter((e) => e.show).map((e) => e.value)
-  const onuItems = entries.map(({ value, title, content, disabled }) => ({ value, title, content, disabled }))
-
-  return open.length > 1 ? (
-    <OnuAccordion
-      id={id}
-      type="multiple"
-      defaultValue={open}
-      items={onuItems}
-      variant={variant}
-      className={className}
-    />
-  ) : (
-    <OnuAccordion
-      id={id}
-      type="single"
-      defaultValue={open[0]}
-      items={onuItems}
-      variant={variant}
-      className={className}
-    />
-  )
+  const slotItems = entries.map(({ value, title, content, disabled, id: itemId }) => ({
+    value,
+    title,
+    content,
+    disabled,
+    id: itemId,
+  }))
+
+  return <ui.Accordion id={id} items={slotItems} defaultValue={open} multiple={open.length > 1} className={className} />
 }
 
 /* -------------------------------------------------------------------------- */
@@ -238,8 +213,10 @@ export function TabsPane(_props: TabsPaneProps): React.ReactNode {
   return null
 }
 
-export interface TabsProps extends Omit<React.ComponentProps<typeof OnuTabs>, "items" | "defaultValue" | "children"> {
+export interface TabsProps {
   tabs: TabData[]
+  onValueChange?: (value: string) => void
+  className?: string
   /** Name of the active tab. Default: the first. */
   active?: string
   /** Pane content by slot name (`profile`, `contactDetails`), like Blade's named slots. */
@@ -249,7 +226,8 @@ export interface TabsProps extends Omit<React.ComponentProps<typeof OnuTabs>, "i
 }
 
 /** `<x-forms::tabs>`. */
-export function Tabs({ tabs, active, slots = {}, children, onValueChange, ...props }: TabsProps) {
+export function Tabs({ tabs, active, slots = {}, children, onValueChange, className }: TabsProps) {
+  const ui = useUi()
   const { translate } = useFormsTranslation()
   const panes = new Map<string, React.ReactNode>()
   React.Children.forEach(children, (child) => {
@@ -259,8 +237,8 @@ export function Tabs({ tabs, active, slots = {}, children, onValueChange, ...pro
   const urls = new Map(tabs.filter((t) => t.url).map((t) => [nameToId(t.name), t.url!]))
 
   return (
-    <OnuTabs
-      {...props}
+    <ui.Tabs
+      className={className}
       defaultValue={nameToId(active || tabs[0]?.name || "")}
       onValueChange={(value) => {
         const url = urls.get(value)
@@ -286,19 +264,21 @@ export interface NavTabData {
   icon?: string
 }
 
-export interface NavTabsProps extends Omit<React.ComponentProps<typeof OnuNavTabs>, "items"> {
+export interface NavTabsProps {
   tabs: NavTabData[]
+  className?: string
 }
 
 /** `<x-forms::nav-tabs>`: tabs that are links to pages. */
-export function NavTabs({ tabs, ...props }: NavTabsProps) {
+export function NavTabs({ tabs, className }: NavTabsProps) {
+  const ui = useUi()
   return (
-    <OnuNavTabs
-      {...props}
+    <ui.NavTabs
+      className={className}
       items={tabs.map((tab) => ({
         label: tab.title,
         href: tab.url || "#",
-        isActive: tab.active,
+        active: tab.active,
         disabled: tab.disabled,
         icon: tab.icon ? renderIconProp(tab.icon) : undefined,
       }))}
@@ -310,42 +290,46 @@ export function NavTabs({ tabs, ...props }: NavTabsProps) {
 /* Modal                                                                      */
 /* -------------------------------------------------------------------------- */
 
-const MODAL_SIZES: Record<string, OnuModalProps["size"]> = {
+const MODAL_SIZES: Record<string, ModalSlotProps["size"]> = {
   "modal-sm": "sm",
   "modal-lg": "lg",
   "modal-xl": "xl",
   "modal-fullscreen": "full",
 }
 
-export interface ModalProps extends Omit<OnuModalProps, "size"> {
+export interface ModalProps extends Omit<ModalSlotProps, "size"> {
   /** Bootstrap size class (`modal-sm`, `modal-lg`, `modal-xl`, `modal-fullscreen`). Default `modal-lg`. */
   modalSizeClass?: string
-  size?: OnuModalProps["size"]
+  size?: ModalSlotProps["size"]
 }
 
 /** `<x-forms::modal>`. Open it with `trigger`, or control it with `open` / `onOpenChange`. */
 export function Modal({ modalSizeClass = "modal-lg", size, ...props }: ModalProps) {
+  const ui = useUi()
   const resolved =
     size ?? MODAL_SIZES[modalSizeClass] ?? (modalSizeClass.startsWith("modal-fullscreen") ? "full" : "lg")
-  return <OnuModal {...props} size={resolved} />
+  return <ui.Modal {...props} size={resolved} />
 }
 
 /* -------------------------------------------------------------------------- */
 /* Status                                                                     */
 /* -------------------------------------------------------------------------- */
 
-export interface StatusProps extends Omit<React.ComponentProps<typeof StatusBadge>, "status" | "color"> {
+export interface StatusProps {
   label?: React.ReactNode
   /** Bootstrap colour. Default `primary`. */
   color?: string
+  className?: string
+  children?: React.ReactNode
 }
 
 /** `<x-forms::status>`: a status badge. */
-export function Status({ label, color = "primary", children, ...props }: StatusProps) {
+export function Status({ label, color = "primary", children, className }: StatusProps) {
+  const ui = useUi()
   return (
-    <StatusBadge {...props} status={colorToTone(color)} icon={props.icon ?? false}>
+    <ui.Status tone={colorToTone(color)} className={className}>
       {children ?? label}
-    </StatusBadge>
+    </ui.Status>
   )
 }
 
@@ -360,7 +344,7 @@ export function useCan(can: string | undefined, arg: unknown, guard: string | nu
   return authorize ? authorize(can, arg, guard) : false
 }
 
-export interface ConditionalLinkProps extends Omit<React.ComponentProps<typeof OnuConditionalLink>, "href" | "when"> {
+export interface ConditionalLinkProps extends Omit<React.ComponentProps<"a">, "href"> {
   /** URL to link to. */
   url: string
   /** Link only when true. Default: the result of `can`, else `false`. */
@@ -390,13 +374,16 @@ export function ConditionalLink({
   children,
   ...props
 }: ConditionalLinkProps) {
+  const ui = useUi()
   const target = useBindTarget(model)
   const allowed = useCan(can, arg, guard)
   const shown = value !== undefined ? value : name ? getBoundValue(target, name) : ""
+  const content = children ?? <FormattedValue value={shown} multiline={multiline} />
+  if (!(showLink ?? allowed)) return <>{content}</>
   return (
-    <OnuConditionalLink {...props} href={url} when={showLink ?? allowed}>
-      {children ?? <FormattedValue value={shown} multiline={multiline} />}
-    </OnuConditionalLink>
+    <ui.Link {...props} href={url}>
+      {content}
+    </ui.Link>
   )
 }
 
@@ -413,6 +400,25 @@ export interface ConditionalWrapperProps extends Omit<React.ComponentProps<"fiel
   enableCheckbox?: boolean
 }
 
+function isBlank(value: unknown) {
+  return (
+    isNil(value) ||
+    value === "" ||
+    value === false ||
+    value === 0 ||
+    value === "0" ||
+    (Array.isArray(value) && value.length === 0)
+  )
+}
+
+/** js-utilities' matching: any of the values (or a checked box with `true`); without a value, anything non-empty. */
+export function matchesCondition(current: unknown, matcher: true | string | string[] | undefined): boolean {
+  if (matcher === undefined) return !isBlank(current)
+  const accepted = (Array.isArray(matcher) ? matcher : [matcher]).map(String)
+  const values = Array.isArray(current) ? current : [current]
+  return values.some((v) => accepted.includes(String(v)))
+}
+
 /**
  * `<x-forms::conditional-wrapper>` (js-utilities' `data-enable-section-value` and
  * `data-enable-section-checkbox`): enables, or shows, the fields inside depending
@@ -435,16 +441,20 @@ export function ConditionalWrapper({
       : isNil(enableValue)
         ? undefined
         : String(enableValue)
+  const current = enableCheckbox ? watched.checked : watched.value
+  const matches = matchesCondition(current, matcher)
+  const enabled = disable ? !matches : matches
   return (
-    <ConditionalDisplay
+    <fieldset
       {...props}
-      value={enableCheckbox ? watched.checked : watched.value}
-      when={matcher}
-      not={!!disable}
-      action={hideFields ? "show" : "enable"}
+      data-slot="conditional-wrapper"
+      data-state={enabled ? "enabled" : hideFields ? "hidden" : "disabled"}
+      disabled={!enabled}
+      hidden={hideFields && !enabled ? true : undefined}
+      style={{ border: 0, margin: 0, padding: 0, minInlineSize: 0, ...props.style }}
     >
       {children}
-    </ConditionalDisplay>
+    </fieldset>
   )
 }
 
@@ -493,24 +503,25 @@ export function TextEntry({
   className,
   children,
 }: TextEntryProps) {
+  const ui = useUi()
   const { translate } = useFormsTranslation()
   const inList = React.useContext(InfolistContext)
   const target = useBindTarget(model)
   const shown = value !== undefined ? value : name ? getBoundValue(target, name) : ""
   const item = (
-    <DescriptionListItem
+    <ui.DescriptionItem
       label={showLabel ? (label ?? (name ? translate(nameToLabel(name)) : "")) : null}
       classNames={{ label: inlineEntryLabelClass, value: inlineEntryClass }}
       className={inList ? className : undefined}
     >
       {children ?? <FormattedValue value={shown} multiline={multiline} wysiwyg={wysiwyg} />}
-    </DescriptionListItem>
+    </ui.DescriptionItem>
   )
   if (inList) return item
   return (
-    <DescriptionList layout={inline ? "inline" : "stacked"} divided={false} className={className}>
+    <ui.DescriptionList layout={inline ? "inline" : "stacked"} className={className}>
       {item}
-    </DescriptionList>
+    </ui.DescriptionList>
   )
 }
 
@@ -531,9 +542,10 @@ export interface InfolistProps extends Omit<CardProps, "children"> {
 
 /** `<x-forms::infolist>`: a card of `TextEntry`s bound to a model. */
 export function Infolist({ model, layout = "auto", children, ...props }: InfolistProps) {
+  const ui = useUi()
   const list = (
     <InfolistContext.Provider value>
-      <DescriptionList layout={layout}>{children}</DescriptionList>
+      <ui.DescriptionList layout={layout}>{children}</ui.DescriptionList>
     </InfolistContext.Provider>
   )
   return <Card {...props}>{model !== undefined ? <Model model={model}>{list}</Model> : list}</Card>
diff --git a/src/components/field.tsx b/src/components/field.tsx
index 13c8424..c9b608c 100644
--- a/src/components/field.tsx
+++ b/src/components/field.tsx
@@ -1,17 +1,19 @@
 "use client"
 
 import * as React from "react"
-import { FormErrorsProvider, FormField } from "@javaabu/onu"
 
-import { useFormsTranslation } from "../context/forms-provider"
-import type { ModelProp } from "../context/binding"
+import type { ModelProp } from "../core/binding"
+import { useFieldErrors, useFormState, useFormValues } from "../core/form-context"
+import { useUi } from "../core/provider"
+import { useFormsTranslation } from "../core/strings"
 import { nameToId, nameToLabel } from "../support/str"
+import { useSyncedState } from "../support/use-synced-state"
 
 /** Props shared by every form field, named after the javaabu/forms Blade attributes (camelCase). */
 export interface FieldProps {
   /** Input name. Generates the id and label, and looks up bound values, old input and errors. */
   name: string
-  /** Label. Default: a title-cased label generated from `name` (passed through `FormsProvider translate`). */
+  /** Label. Default: a title-cased label generated from `name`, translated with `__()`. */
   label?: React.ReactNode
   /** Control id. Default: generated from `name` (`address[city]` → `address-city`). */
   id?: string
@@ -65,55 +67,97 @@ export function useFieldNames({
   }
 }
 
-export interface FieldWrapperProps extends Omit<FieldProps, "model" | "default" | "label" | "id"> {
-  id?: string
-  label?: React.ReactNode
-  children: React.ReactNode
-  /** Render the control without the field around it (hidden inputs). */
-  bare?: boolean
+/** The label with the required marker, as every adapter receives it. */
+export function useLabelWithMarker(label: React.ReactNode, required: boolean | undefined): React.ReactNode {
+  const ui = useUi()
+  const { t } = useFormsTranslation()
+  if (!label) return label
+  if (!required) return label
+  const symbol = t("required_text")
+  return (
+    <>
+      {label}
+      {symbol ? <ui.RequiredMarker symbol={symbol} /> : null}
+    </>
+  )
+}
+
+export interface UseFieldOptions extends Omit<FieldProps, "model" | "default">, PlaceholderProps {
+  /** Override the generated id (e.g. grouped checkboxes). */
+  controlId?: string
+  /** The field wrapper's label is not shown (checkboxes show it beside the box). */
+  labelInControl?: boolean
 }
 
 /**
- * The Blade `form-group`: label, control, help and errors, on Onu's `FormField`.
- * `showErrors={false}` hides this field's server errors; `showLabel={false}`
- * keeps the label for screen readers only.
+ * Everything a field component needs from the core: ids, label, errors,
+ * the disabled state and the ARIA props of its control, and `wrap()` to put
+ * the control in the adapter's `Field`.
  */
-export function FieldWrapper({
-  name,
-  id,
-  label,
-  required,
-  disabled,
-  showLabel = true,
-  showErrors = true,
-  inline,
-  inlineLabelClass,
-  inlineInputClass,
-  formGroupClass,
-  help,
-  bare,
-  children,
-}: FieldWrapperProps) {
-  if (bare) return <>{children}</>
-
-  const field = (
-    <FormField
-      label={label}
-      name={name}
+export function useField(options: UseFieldOptions) {
+  const ui = useUi()
+  const form = useFormState()
+  const names = useFieldNames(options)
+  const generatedId = React.useId()
+  const id = options.controlId ?? names.id
+  const baseId = id ?? `field${generatedId.replace(/:/g, "")}`
+  const errors = useFieldErrors(options.name)
+  const shownErrors = options.showErrors === false ? [] : errors
+  const invalid = shownErrors.length > 0
+  const disabled = !!options.disabled || !!form?.disabled
+  const helpId = options.help ? `${baseId}-help` : undefined
+  const errorId = invalid ? `${baseId}-error` : undefined
+  const describedBy = [helpId, errorId].filter(Boolean).join(" ") || undefined
+  const markedLabel = useLabelWithMarker(names.label, options.required)
+
+  const control = {
+    id,
+    name: options.name,
+    required: options.required || undefined,
+    disabled: disabled || undefined,
+    "aria-invalid": invalid || undefined,
+    "aria-describedby": describedBy,
+  }
+
+  const wrap = (children: React.ReactNode, overrides: { label?: React.ReactNode; help?: React.ReactNode } = {}) => (
+    <ui.Field
       id={id}
-      help={help}
-      required={required}
+      name={options.name}
+      label={"label" in overrides ? overrides.label : options.labelInControl ? undefined : markedLabel}
+      labelId={`${baseId}-label`}
+      hideLabel={options.showLabel === false}
+      required={options.required}
       disabled={disabled}
-      labelLayout={inline ? "inline" : undefined}
-      hideLabel={!showLabel}
-      className={formGroupClass}
-      classNames={{ label: inlineLabelClass, control: inlineInputClass }}
+      inline={options.inline}
+      help={overrides.help ?? options.help}
+      helpId={(overrides.help ?? options.help) ? `${baseId}-help` : undefined}
+      errors={shownErrors}
+      errorId={errorId}
+      classNames={{
+        group: options.formGroupClass,
+        label: options.inlineLabelClass,
+        control: options.inlineInputClass,
+      }}
     >
       {children}
-    </FormField>
+    </ui.Field>
   )
 
-  return showErrors ? field : <FormErrorsProvider errors={null}>{field}</FormErrorsProvider>
+  return {
+    ...names,
+    id,
+    baseId,
+    label: names.label,
+    markedLabel,
+    errors: shownErrors,
+    invalid,
+    disabled,
+    helpId,
+    errorId,
+    describedBy,
+    control,
+    wrap,
+  }
 }
 
 /** Splits field props from the props passed on to the control. */
@@ -155,3 +199,49 @@ export function splitFieldProps<P extends FieldProps>(props: P) {
     rest,
   }
 }
+
+export interface FieldStateOptions<T> {
+  /** The user's controlled value; `undefined` when uncontrolled. */
+  controlled?: T
+  /** Changes when the starting value changes (the model loaded later). Default: `initial`. */
+  key?: unknown
+  /** Converts between the field's value and the external store's (`useForm` data). */
+  toStore?: (value: T) => unknown
+  fromStore?: (raw: unknown) => T
+  /** `false`: never read or write the form's external store (the component handles it). */
+  store?: boolean
+}
+
+/**
+ * A field's value. In order: the user's `value` prop, the form's external
+ * store (Inertia `useForm` data) when it has the field, or the field's own state,
+ * starting at `initial` (old input → model → default) and returning to it on a reset.
+ */
+export function useFieldState<T>(name: string, initial: T, options: FieldStateOptions<T> = {}) {
+  const external = useFormValues()
+  const store = options.store === false ? null : external
+  const form = useFormState()
+  const resets = !form || !form.resetNames || form.resetNames.includes(name)
+  const resetVersion = resets ? (form?.resetVersion ?? 0) : 0
+  const [own, setOwn] = useSyncedState(initial, `${String(options.key ?? JSON.stringify(initial))}:${resetVersion}`)
+  const inStore = !!store && store.has(name)
+  const stored = inStore ? (options.fromStore ? options.fromStore(store.get(name)) : (store.get(name) as T)) : own
+
+  // A store submits only what it holds, so give it the starting value of fields it doesn't know yet.
+  React.useEffect(() => {
+    if (store && name && !store.has(name)) store.set(name, options.toStore ? options.toStore(initial) : initial)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [store, name])
+
+  const set = React.useCallback(
+    (next: T) => {
+      setOwn(next)
+      if (store) store.set(name, options.toStore ? options.toStore(next) : next)
+      form?.clearErrors(name)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store, name, form?.clearErrors, setOwn],
+  )
+
+  return [options.controlled !== undefined ? options.controlled : stored, set] as const
+}
diff --git a/src/components/files.tsx b/src/components/files.tsx
index 154a37a..c072899 100644
--- a/src/components/files.tsx
+++ b/src/components/files.tsx
@@ -1,34 +1,21 @@
 "use client"
 
 import * as React from "react"
-import {
-  Button,
-  FileInput,
-  Icon,
-  ImageInput,
-  confirm,
-  readValidationErrors,
-  toast,
-  useOnuForm,
-  type FileInputProps,
-  type ImageInputProps,
-} from "@javaabu/onu"
-
-import { useBindTarget } from "../context/binding"
-import { useCsrfToken, useFormsConfig, useFormsTranslation } from "../context/forms-provider"
-import { usePublishField } from "../context/registry"
+import { useBindTarget } from "../core/binding"
+import { readValidationErrors } from "../core/errors"
+import { useFormState } from "../core/form-context"
+import { useCsrfToken, useFormsConfig, useFormsServices, useUi } from "../core/provider"
+import { usePublishField } from "../core/registry"
+import { useFormsTranslation } from "../core/strings"
 import { wrap } from "../support/data"
 import { mediaUrl, resolveBoundMedia, type ResolvedFile } from "../support/media"
 import { formatFileSize, getAllowedMimeTypes, getExtensions, getMaxFileSize } from "../support/mime-types"
 import { bracketsToDots } from "../support/str"
 import { submitFieldToForm } from "../support/upload"
-import { FieldWrapper, splitFieldProps, useFieldNames, type FieldProps } from "./field"
+import { splitFieldProps, useField, type FieldProps } from "./field"
 import { useSyncedState } from "../support/use-synced-state"
 
-export interface FileProps
-  extends
-    FieldProps,
-    Omit<FileInputProps, "name" | "id" | "value" | "defaultValue" | "required" | "disabled" | "accept" | "maxSize"> {
+export interface FileProps extends FieldProps {
   /** File type(s) from javaabu/helpers `AllowedMimeTypes` (`document`, `image`, `pdf`, …). Default `document`. */
   type?: string | string[]
   /** Allowed mime types. Default: those of `type`. */
@@ -51,6 +38,10 @@ export interface FileProps
   upload?: boolean
   /** After an upload or removal succeeds. Default: reload the page, as in Blade. */
   onUploaded?: (response: unknown) => void
+  /** Allow several files. */
+  multiple?: boolean
+  onChange?: (files: File[]) => void
+  className?: string
 }
 
 /** Accept list, extensions, max size and hint shared by `File` and `Image`. */
@@ -64,9 +55,9 @@ function useFileRules(props: Pick<FileProps, "type" | "mimetypes" | "extensions"
   const list = extensions.map((e) => `.${e}`)
   const types_ =
     list.length > 1
-      ? list.slice(0, -1).join(t("textListSeparator")) + t("textListSeparatorLastGlue") + list.at(-1)
+      ? list.slice(0, -1).join(t("text_list_separator")) + t("text_list_separator_last_glue") + list.at(-1)
       : (list[0] ?? "")
-  const hint = t("fileHint", {
+  const hint = t("file_hint", {
     types: types_,
     size: formatFileSize(maxSize, { kb: t("kb"), mb: t("mb"), gb: t("gb") }),
   })
@@ -87,7 +78,8 @@ function useExistingFile(
 function useFormUpload(name: string, onUploaded?: (response: unknown) => void) {
   const { t } = useFormsTranslation()
   const token = useCsrfToken()
-  const form = useOnuForm()
+  const form = useFormState()
+  const { confirm, notify } = useFormsServices()
   const anchor = React.useRef<HTMLSpanElement>(null)
   const [busy, setBusy] = React.useState<"uploading" | "removing" | null>(null)
 
@@ -102,7 +94,7 @@ function useFormUpload(name: string, onUploaded?: (response: unknown) => void) {
     } catch (error) {
       const payload = await readValidationErrors(error)
       if (payload && form) form.setErrors(payload.errors, payload.message)
-      else toast.error(payload?.message ?? (mode === "uploading" ? t("uploadError") : t("removeError")))
+      else notify(payload?.message ?? (mode === "uploading" ? t("upload_error") : t("remove_error")), { type: "error" })
     } finally {
       setBusy(null)
     }
@@ -110,11 +102,11 @@ function useFormUpload(name: string, onUploaded?: (response: unknown) => void) {
 
   const remove = async () => {
     const ok = await confirm({
-      title: t("areYouSure"),
-      description: t("removeFileConfirm"),
-      confirmLabel: t("removeFileConfirmButton"),
+      title: t("are_you_sure"),
+      description: t("remove_file_confirm"),
+      confirmLabel: t("remove_file_confirm_button"),
       cancelLabel: t("cancel"),
-      variant: "destructive",
+      destructive: true,
     })
     if (ok) await send("", "removing")
   }
@@ -123,17 +115,19 @@ function useFormUpload(name: string, onUploaded?: (response: unknown) => void) {
 }
 
 function ExistingFile({ file }: { file: ResolvedFile }) {
+  const ui = useUi()
   return (
-    <a
+    <ui.Link
       href={file.url}
       target="_blank"
       rel="noopener noreferrer"
       title={file.url}
-      className="gap-2 text-sm inline-flex max-w-full items-center text-primary underline-offset-4 hover:underline"
+      data-forms-existing-file=""
+      className="gap-2 text-sm inline-flex max-w-full items-center"
     >
-      <Icon name="download" size="sm" className="shrink-0" />
+      <ui.Icon name="download" size="sm" className="shrink-0" />
       <bdi className="truncate">{file.fileName || file.url}</bdi>
-    </a>
+    </ui.Link>
   )
 }
 
@@ -142,6 +136,7 @@ function ExistingFile({ file }: { file: ResolvedFile }) {
  * medialibrary `Media`) and shows the allowed types and size.
  */
 function FileComponent(props: FileProps) {
+  const ui = useUi()
   const { field, rest } = splitFieldProps(props)
   const {
     type,
@@ -155,71 +150,68 @@ function FileComponent(props: FileProps) {
     ignoreAccessor,
     upload,
     onUploaded,
+    multiple,
     className,
     onChange,
-    ...inputProps
   } = rest
   const { t } = useFormsTranslation()
-  const names = useFieldNames(field)
   const rules = useFileRules(
     { type, mimetypes: mimetypesProp, extensions: extensionsProp, maxSize: maxSizeProp },
     "document",
   )
+  const help = field.help ?? (showHint ? rules.hint : undefined)
+  const f = useField({ ...field, help })
   const existing = useExistingFile({ ...field, collection, conversion, ignoreAccessor })
   const { anchor, busy, upload: uploadFile, remove: removeFile } = useFormUpload(field.name, onUploaded)
   const [picked, setPicked] = React.useState(false)
 
   usePublishField({
-    id: names.id,
+    id: f.id,
     name: field.name,
     kind: "value",
     value: picked ? "file" : (existing?.url ?? ""),
-    disabled: field.disabled,
+    disabled: f.disabled,
+    label: f.labelText,
   })
 
-  const help = field.help ?? (showHint ? rules.hint : undefined)
-
-  return (
-    <FieldWrapper {...field} id={names.id} label={names.label} help={help}>
-      <span ref={anchor} className="gap-2 flex flex-col">
-        {existing ? <ExistingFile file={existing} /> : null}
-        <span className="gap-2 flex items-start">
-          <FileInput
-            {...inputProps}
-            id={names.id}
-            // An uploading input posts on its own, so it must not be part of the form's submit.
-            name={upload ? "" : field.name}
-            accept={rules.accept}
-            maxSize={rules.maxSize ? rules.maxSize * 1024 : undefined}
-            required={field.required || undefined}
-            disabled={field.disabled || !!busy || undefined}
-            showList={!upload}
-            buttonLabel={
-              upload ? t("fileinputUploadFile") : existing ? t("fileinputChangeFile") : t("fileinputSelectFile")
-            }
-            placeholder={busy ? t(busy) : t("fileinputNothingSelected")}
-            className={[fileInputClass, className].filter(Boolean).join(" ") || undefined}
-            onChange={(files) => {
-              setPicked(files.length > 0)
-              onChange?.(files)
-              if (upload && files[0]) void uploadFile(files[0])
-            }}
-          />
-          {upload && existing && !field.disabled ? (
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              aria-label={t("fileinputRemoveFile")}
-              loading={busy === "removing"}
-              onClick={() => void removeFile()}
-            >
-              <Icon name="close" />
-            </Button>
-          ) : null}
-        </span>
+  return f.wrap(
+    <span ref={anchor} className="gap-2 flex flex-col">
+      {existing ? <ExistingFile file={existing} /> : null}
+      <span className="gap-2 flex items-start">
+        <ui.File
+          {...f.control}
+          // An uploading input posts on its own, so it must not be part of the form's submit.
+          name={upload ? "" : field.name}
+          disabled={f.disabled || !!busy || undefined}
+          accept={rules.accept}
+          maxSize={rules.maxSize ? rules.maxSize * 1024 : undefined}
+          multiple={multiple}
+          showList={!upload}
+          buttonLabel={
+            upload ? t("fileinput_upload_file") : existing ? t("fileinput_change_file") : t("fileinput_select_file")
+          }
+          placeholder={busy ? t(busy) : t("fileinput_nothing_selected")}
+          className={[fileInputClass, className].filter(Boolean).join(" ") || undefined}
+          onFilesChange={(files) => {
+            setPicked(files.length > 0)
+            onChange?.(files)
+            if (upload && files[0]) void uploadFile(files[0])
+          }}
+        />
+        {upload && existing && !f.disabled ? (
+          <ui.Button
+            type="button"
+            color="light"
+            size="icon"
+            aria-label={t("fileinput_remove_file")}
+            loading={busy === "removing"}
+            onClick={() => void removeFile()}
+          >
+            <ui.Icon name="close" />
+          </ui.Button>
+        ) : null}
       </span>
-    </FieldWrapper>
+    </span>,
   )
 }
 
@@ -242,24 +234,7 @@ type FileRuleProps = Pick<
   | "onUploaded"
 >
 
-export interface ImageProps
-  extends
-    FieldProps,
-    FileRuleProps,
-    Omit<
-      ImageInputProps,
-      | "name"
-      | "id"
-      | "value"
-      | "defaultValue"
-      | "required"
-      | "disabled"
-      | "accept"
-      | "maxSize"
-      | "alt"
-      | "placeholder"
-      | "aspectRatio"
-    > {
+export interface ImageProps extends FieldProps, FileRuleProps {
   /** Recommended width in px, shown in the hint. Default `400`. */
   width?: number
   /** Recommended height in px, shown in the hint. Default `400`. */
@@ -276,10 +251,13 @@ export interface ImageProps
   maintainAspectRatio?: boolean
   /** Content of the empty preview. Default: "Click to select an image". */
   icon?: React.ReactNode
+  onChange?: (file: File | null) => void
+  className?: string
 }
 
 /** `<x-forms::image>`: an image input with a preview of the current image. */
 function ImageComponent(props: ImageProps) {
+  const ui = useUi()
   const { field, rest } = splitFieldProps(props)
   const {
     type,
@@ -302,75 +280,72 @@ function ImageComponent(props: ImageProps) {
     icon,
     className,
     onChange,
-    ...inputProps
   } = rest
   const { t } = useFormsTranslation()
-  const names = useFieldNames(field)
   const rules = useFileRules(
     { type, mimetypes: mimetypesProp, extensions: extensionsProp, maxSize: maxSizeProp },
     "image",
   )
+  const help =
+    field.help ??
+    (showHint ? (
+      <>
+        {t("image_hint", { width, height })}
+        <br />
+        {rules.hint}
+      </>
+    ) : undefined)
+  const f = useField({ ...field, help })
   const existing = useExistingFile({ ...field, collection, conversion, ignoreAccessor })
   const { anchor, busy, upload: uploadFile, remove: removeFile } = useFormUpload(field.name, onUploaded)
   const [value, setValue] = useSyncedState<File | string | null>(existing?.url ?? null)
 
   usePublishField({
-    id: names.id,
+    id: f.id,
     name: field.name,
     kind: "value",
     value: value ? "image" : "",
-    disabled: field.disabled,
+    disabled: f.disabled,
+    label: f.labelText,
   })
 
-  // Blade's ratio is height ÷ width (a padding percentage); Onu's is width ÷ height.
+  // Blade's ratio is height ÷ width (a padding percentage); the slot's is width ÷ height.
   const bladeRatio = circle ? 1 : (aspectRatio ?? (width ? height / width : 1))
   const ratio = maintainAspectRatio && bladeRatio ? 1 / bladeRatio : 1
-  const help =
-    field.help ??
-    (showHint ? (
-      <>
-        {t("imageHint", { width, height })}
-        <br />
-        {rules.hint}
-      </>
-    ) : undefined)
 
-  return (
-    <FieldWrapper {...field} id={names.id} label={names.label} help={help}>
-      <span ref={anchor} className="contents">
-        <ImageInput
-          {...inputProps}
-          id={names.id}
-          name={upload ? "" : field.name}
-          alt={names.labelText}
-          accept={rules.accept}
-          maxSize={rules.maxSize ? rules.maxSize * 1024 : undefined}
-          required={field.required || undefined}
-          disabled={field.disabled || !!busy || undefined}
-          shape={circle ? "circle" : undefined}
-          aspectRatio={ratio}
-          placeholder={icon ?? t("imageinputSelectImage")}
-          className={[fullwidth ? "max-w-none" : undefined, className].filter(Boolean).join(" ") || undefined}
-          classNames={cover || circle ? { image: "object-cover" } : undefined}
-          value={value}
-          onChange={(file) => {
-            onChange?.(file)
-            if (!upload) {
-              setValue(file)
-              return
-            }
-            if (file) {
-              setValue(file)
-              void uploadFile(file)
-            } else if (existing) {
-              void removeFile()
-            } else {
-              setValue(null)
-            }
-          }}
-        />
-      </span>
-    </FieldWrapper>
+  return f.wrap(
+    <span ref={anchor} className="contents">
+      <ui.Image
+        {...f.control}
+        name={upload ? "" : field.name}
+        disabled={f.disabled || !!busy || undefined}
+        alt={f.labelText}
+        accept={rules.accept}
+        maxSize={rules.maxSize ? rules.maxSize * 1024 : undefined}
+        shape={circle ? "circle" : "rectangle"}
+        aspectRatio={ratio}
+        cover={cover || circle}
+        fullWidth={fullwidth}
+        placeholder={icon ?? t("imageinput_select_image")}
+        className={className}
+        value={value}
+        onValueChange={(file) => {
+          onChange?.(file)
+          if (!upload) {
+            setValue(file)
+            return
+          }
+          if (file) {
+            setValue(file)
+            void uploadFile(file)
+          } else if (existing) {
+            void removeFile()
+          } else {
+            setValue(null)
+          }
+        }}
+      />
+    </span>,
   )
 }
 
diff --git a/src/components/form.tsx b/src/components/form.tsx
index dbf899e..3ed7c0f 100644
--- a/src/components/form.tsx
+++ b/src/components/form.tsx
@@ -1,25 +1,75 @@
 "use client"
 
 import * as React from "react"
+
+import type { FormsComponents } from "../core/adapter"
+import { Model, OldInput } from "../core/binding"
+import {
+  errorEntries,
+  errorsFor,
+  findField,
+  focusField,
+  focusFirstInvalid,
+  readValidationErrors,
+  selectErrorBag,
+  toDotNotation,
+  withoutField,
+  type FormErrors,
+  type ValidationPayload,
+} from "../core/errors"
 import {
-  FieldErrors,
-  Form as OnuForm,
-  HelpText,
-  Label as OnuLabel,
-  RequiredMarker,
+  FormStateProvider,
+  FormValuesProvider,
+  storeFor,
   useFieldErrors,
-  type FormProps as OnuFormProps,
+  useFormState,
+  type FormState,
+  type FormStatus,
+} from "../core/form-context"
+import { FormsProvider, useCsrfToken, useFormsConfig, useUi } from "../core/provider"
+import { registry } from "../core/registry"
+import {
+  formDataToObject,
+  isSpoofed,
+  resolveAction,
+  type FormAction,
   type FormValues,
-} from "@javaabu/onu"
+  type HttpMethod,
+  type VisitOptions,
+} from "../core/router"
+import { useFormsTranslation } from "../core/strings"
+import { useField, type FieldProps } from "./field"
+
+/**
+ * The parts of Inertia's `useForm()` result that `Form` uses. Pass the whole
+ * result: `<Form form={useForm({ name: "" })}>`.
+ */
+export interface InertiaFormLike {
+  data: unknown
+  setData: (...args: never[]) => void
+  errors: Record<string, string | undefined>
+  processing: boolean
+  progress?: { percentage?: number } | null
+  submit: (...args: never[]) => void
+  clearErrors: (...fields: string[]) => void
+  transform?: (callback: (data: never) => unknown) => void
+  reset?: (...fields: string[]) => void
+}
 
-import { Model, OldInput } from "../context/binding"
-import { useCsrfToken, useFormsTranslation } from "../context/forms-provider"
-import { FieldWrapper, useFieldNames, type FieldProps } from "./field"
+export type FormSubmitHandler<T> = (values: T, event: React.FormEvent<HTMLFormElement>) => unknown
 
-export interface FormProps<T extends FieldValues = FormValues> extends Omit<OnuFormProps<T>, "method"> {
-  /** HTTP method. `PUT`, `PATCH` and `DELETE` are sent as `POST` with a `_method` field. Default `POST`. */
+export interface FormProps<T = FormValues> extends Omit<
+  React.ComponentProps<"form">,
+  "onSubmit" | "onError" | "onProgress" | "action" | "method"
+> {
+  /**
+   * Where the form submits: a URL, or a Laravel Wayfinder route (`store()`) or route
+   * function (`update`, called with `model`). The route's method is used unless `method` is set.
+   */
+  action?: FormAction
+  /** HTTP method. `PUT`, `PATCH` and `DELETE` are sent as `POST` with a `_method` field. Default: the route's, else `POST`. */
   method?: string
-  /** Model the fields inside are bound to. */
+  /** Model the fields inside are bound to. Also passed to an `action` route function. */
   model?: unknown
   /** Allow file uploads (`enctype="multipart/form-data"`). */
   files?: boolean
@@ -27,48 +77,422 @@ export interface FormProps<T extends FieldValues = FormValues> extends Omit<OnuF
   old?: Record<string, unknown> | null
   /** Add the `_token` field to non-GET forms. Default `true`. */
   csrf?: boolean
+  /** Inertia's `useForm()` result. Fields bind to its data; its errors, `processing` and `progress` are shown. */
+  form?: InertiaFormLike
+  /**
+   * Submit with your own code. Gets the values (from `FormData`, or `useForm` data).
+   * Return a promise to show the processing state; throw a Laravel 422 body, an axios
+   * error, a 422 `Response` or a `ValidationError` to show field errors.
+   */
+  onSubmit?: FormSubmitHandler<T>
+  /** Errors to show, e.g. from your own request. Wins over page errors. */
+  errors?: FormErrors | null
+  /** The error bag to read (Laravel's `$errors->getBag()`, Inertia's `errorBag`). Also sent with Inertia visits. */
+  errorBag?: string
+  /** Mark the form as processing. */
+  processing?: boolean
+  /** Disable every field. */
+  disabled?: boolean
+  /** Disable fields while processing. Default `true`. */
+  disableWhileProcessing?: boolean
+  /** Show the error summary at the top. Default `true`. */
+  summary?: boolean
+  summaryTitle?: React.ReactNode
+  /** Focus the first invalid field when errors arrive. Default `true`. */
+  focusOnError?: boolean
+  /** Options for router visits: `preserveScroll`, `preserveState`, `only`, `headers`, … */
+  visitOptions?: VisitOptions
+  preserveScroll?: VisitOptions["preserveScroll"]
+  preserveState?: VisitOptions["preserveState"]
+  /** Reset the fields after a successful submit: `true`, or the names to reset. */
+  resetOnSuccess?: boolean | string[]
+  /** Upload progress, 0–100. */
+  onProgress?: (percentage: number) => void
+  onSuccess?: (result: unknown) => void
+  onError?: (error: unknown, payload: ValidationPayload | null) => void
+  /** Replace adapter components for this form: `{ Select: MySelect }`. */
+  components?: Partial<FormsComponents>
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type FieldValues = Record<string, any>
+const SAFE_METHODS = ["get", "head", "options"]
 
-const SAFE_METHODS = ["GET", "HEAD", "OPTIONS"]
+function isInertiaForm(value: unknown): value is InertiaFormLike {
+  return !!value && typeof value === "object" && "setData" in value && "submit" in value && "processing" in value
+}
 
 /**
- * `<x-forms::form>`: Onu's `Form` (server errors, error summary, processing
- * state) with Laravel's method spoofing, CSRF token, `files` and model binding.
+ * `<x-forms::form>`: a `<form>` with Laravel's method spoofing and CSRF token,
+ * `files`, model binding and old input. It shows validation errors under their
+ * fields and in a summary, and submits natively, through `onSubmit`, Inertia's
+ * `useForm()`, or the `FormsProvider router` (Inertia visits, fetch).
  */
-export function Form<T extends FieldValues = FormValues>({
-  method = "POST",
-  model,
-  files,
-  old,
-  csrf = true,
-  children,
-  encType,
-  ...props
-}: FormProps<T>) {
-  const verb = method.toUpperCase()
-  const spoof = ["PUT", "PATCH", "DELETE"].includes(verb)
+export function Form<T = FormValues>(props: FormProps<T>) {
+  const {
+    action,
+    method: methodProp,
+    model,
+    files,
+    old,
+    csrf = true,
+    form: inertiaForm,
+    onSubmit,
+    errors: errorsProp,
+    errorBag,
+    processing: processingProp,
+    disabled,
+    disableWhileProcessing = true,
+    summary = true,
+    summaryTitle,
+    focusOnError = true,
+    visitOptions,
+    preserveScroll,
+    preserveState,
+    resetOnSuccess,
+    onProgress,
+    onSuccess,
+    onError,
+    components,
+    children,
+    encType,
+    onChange,
+    ref,
+    ...formProps
+  } = props
+
+  const ui = useUi()
+  const config = useFormsConfig()
+  const { t } = useFormsTranslation()
   const token = useCsrfToken()
+  const router = config.router
+  const useForm = isInertiaForm(inertiaForm) ? inertiaForm : undefined
+
+  const resolved = resolveAction(action, model)
+  const method = ((methodProp?.toLowerCase() as HttpMethod | undefined) ?? resolved.method ?? "post") as HttpMethod
+  const spoof = isSpoofed(method)
+  const htmlMethod = method === "get" ? "GET" : "POST"
+
+  // Page-level errors and old input, from the router (Inertia page props) or the provider.
+  const pageErrors = router?.usePageErrors?.()
+  const routerOld = router?.useOldInput?.()
+
+  const formRef = React.useRef<HTMLFormElement>(null)
+  const busy = React.useRef(false)
+  const pendingFocus = React.useRef(false)
+  const [submitting, setSubmitting] = React.useState(false)
+  const [status, setStatus] = React.useState<FormStatus>("idle")
+  const [progress, setProgress] = React.useState<number | null>(null)
+  const [serverErrors, setServerErrors] = React.useState<FormErrors | null>(null)
+  const [message, setMessage] = React.useState<string | null>(null)
+  const [reset, setReset] = React.useState<{ version: number; names: string[] | null }>({ version: 0, names: null })
+
+  // External errors (page, provider, props, useForm). Editing a field hides its error until new errors arrive.
+  const external: FormErrors = {
+    ...selectErrorBag(pageErrors ?? config.errors, errorBag),
+    ...errorsProp,
+    ...(useForm ? (useForm.errors as FormErrors) : null),
+  }
+  const externalKey = JSON.stringify(external)
+  const [edited, setEdited] = React.useState<{ key: string; names: string[] }>({ key: externalKey, names: [] })
+  const editedNames = edited.key === externalKey ? edited.names : []
+  let visible = external
+  for (const name of editedNames) visible = withoutField(visible, name)
+  const merged = { ...visible, ...serverErrors }
+  const mergedKey = JSON.stringify(merged)
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- `mergedKey` stands for the contents of `merged`.
+  const errors = React.useMemo<FormErrors>(() => merged, [mergedKey])
+
+  // New external errors (e.g. after an Inertia visit) move focus too. Declared before the focus effect below.
+  const hasExternal = errorEntries(external).length > 0
+  React.useEffect(() => {
+    if (hasExternal) pendingFocus.current = true
+  }, [externalKey, hasExternal])
+
+  const processing = !!processingProp || submitting || !!useForm?.processing
+  const shownProgress = useForm?.progress?.percentage ?? progress
+
+  const setErrors = React.useCallback((next: FormErrors | null, nextMessage?: string | null) => {
+    const entries = errorEntries(next)
+    setServerErrors(entries.length ? Object.fromEntries(entries) : null)
+    setMessage(nextMessage ?? null)
+    if (entries.length || nextMessage) {
+      pendingFocus.current = true
+      setStatus("error")
+    }
+  }, [])
+
+  const formErrors = useForm?.errors
+  const formClearErrors = useForm?.clearErrors
+  const clearErrors = React.useCallback(
+    (name: string) => {
+      setServerErrors((current) => {
+        if (!current) return current
+        const next = withoutField(current, name)
+        return next === current ? current : Object.keys(next).length ? next : null
+      })
+      setEdited((current) => {
+        const names = current.key === externalKey ? current.names : []
+        return names.includes(name) ? current : { key: externalKey, names: [...names, name] }
+      })
+      if (formClearErrors && errorsFor(formErrors as FormErrors | undefined, name).length) {
+        formClearErrors(toDotNotation(name))
+      }
+    },
+    [externalKey, formErrors, formClearErrors, setEdited],
+  )
+
+  React.useEffect(() => {
+    if (!pendingFocus.current) return
+    pendingFocus.current = false
+    if (!focusOnError) return
+    if (!focusFirstInvalid(formRef.current, errors)) {
+      formRef.current?.querySelector<HTMLElement>("[data-forms-summary]")?.focus()
+    }
+  })
+
+  const finishWithSuccess = (result: unknown) => {
+    setStatus("success")
+    if (resetOnSuccess) {
+      setReset((r) => ({ version: r.version + 1, names: Array.isArray(resetOnSuccess) ? resetOnSuccess : null }))
+    }
+    onSuccess?.(result)
+  }
+
+  const fail = async (error: unknown) => {
+    const payload = await readValidationErrors(error)
+    if (payload) setErrors(payload.errors, null)
+    else {
+      setMessage(t("submit_failed"))
+      pendingFocus.current = true
+    }
+    setStatus("error")
+    onError?.(error, payload)
+  }
+
+  const options: VisitOptions = {
+    ...visitOptions,
+    ...(preserveScroll !== undefined ? { preserveScroll } : null),
+    ...(preserveState !== undefined ? { preserveState } : null),
+  }
+
+  async function runHandler(values: T, event: React.FormEvent<HTMLFormElement>) {
+    busy.current = true
+    setSubmitting(true)
+    setStatus("submitting")
+    setServerErrors(null)
+    setMessage(null)
+    try {
+      finishWithSuccess(await onSubmit!(values, event))
+    } catch (error) {
+      await fail(error)
+    } finally {
+      busy.current = false
+      setSubmitting(false)
+    }
+  }
+
+  function submitUseForm(form: InertiaFormLike) {
+    const url = resolved.url ?? (typeof window === "undefined" ? "" : window.location.href)
+    // Laravel can't read multipart bodies of PUT / PATCH requests: send those as POST with `_method`.
+    const viaPost = spoof && files
+    form.transform?.(((data: Record<string, unknown>) => (viaPost ? { ...data, _method: method } : data)) as never)
+    const submit = form.submit as unknown as (method: string, url: string, options: Record<string, unknown>) => void
+    submit(viaPost ? "post" : method, url, {
+      ...options,
+      errorBag,
+      forceFormData: files || undefined,
+      onStart: () => setStatus("submitting"),
+      onProgress: (event?: { percentage?: number }) => {
+        if (event?.percentage !== undefined) onProgress?.(event.percentage)
+      },
+      onSuccess: (page: unknown) => {
+        finishWithSuccess(page)
+        const names = Array.isArray(resetOnSuccess) ? resetOnSuccess : []
+        if (resetOnSuccess) form.reset?.(...names)
+      },
+      onError: (errs: FormErrors) => {
+        setStatus("error")
+        pendingFocus.current = true
+        onError?.(errs, { errors: errs })
+      },
+    })
+  }
+
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    if (busy.current || processing) {
+      event.preventDefault() // no double submits
+      return
+    }
+    const element = event.currentTarget
+
+    if (onSubmit) {
+      event.preventDefault()
+      const values = (useForm ? useForm.data : formDataToObject(new FormData(element))) as T
+      void runHandler(values, event)
+      return
+    }
+    if (useForm) {
+      event.preventDefault()
+      submitUseForm(useForm)
+      return
+    }
+    if (router) {
+      event.preventDefault()
+      const data = new FormData(element, (event.nativeEvent as SubmitEvent).submitter ?? undefined)
+      busy.current = true
+      setServerErrors(null)
+      setMessage(null)
+      router.submit(
+        {
+          url: resolved.url ?? window.location.href,
+          method,
+          data,
+          form: element,
+          errorBag,
+          options,
+        },
+        {
+          onStart: () => {
+            setSubmitting(true)
+            setStatus("submitting")
+            setProgress(null)
+          },
+          onProgress: (percentage) => {
+            setProgress(percentage)
+            onProgress?.(percentage)
+          },
+          onSuccess: (result) => finishWithSuccess(result),
+          onError: (errs, msg) => {
+            setErrors(errs, msg ?? null)
+            onError?.(errs, { errors: errs, message: msg ?? undefined })
+          },
+          onFailure: (error) => void fail(error),
+          onFinish: () => {
+            busy.current = false
+            setSubmitting(false)
+            setProgress(null)
+          },
+        },
+      )
+    }
+    // Otherwise the browser submits the form.
+  }
+
+  function handleChange(event: React.ChangeEvent<HTMLFormElement>) {
+    onChange?.(event)
+    const name = (event.target as unknown as HTMLInputElement).name
+    if (name) clearErrors(name)
+  }
+
+  const store = React.useMemo(
+    () => (useForm ? storeFor(useForm as unknown as Parameters<typeof storeFor>[0]) : null),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [useForm?.data, useForm?.setData],
+  )
+
+  // Fields re-render with the form anyway (they are its children), so this isn't memoized.
+  const state: FormState = {
+    processing,
+    status,
+    progress: shownProgress ?? null,
+    disabled: !!disabled || (disableWhileProcessing && processing),
+    errors,
+    message,
+    setErrors,
+    clearErrors,
+    resetVersion: reset.version,
+    resetNames: reset.names,
+    formRef,
+  }
 
   let content: React.ReactNode = (
-    <OnuForm<T>
-      method={spoof ? "POST" : verb}
-      encType={files ? "multipart/form-data" : encType}
-      {...(props as OnuFormProps<T>)}
-    >
-      {csrf && !SAFE_METHODS.includes(verb) && token ? <input type="hidden" name="_token" value={token} /> : null}
-      {spoof ? <input type="hidden" name="_method" value={verb} /> : null}
-      {children}
-    </OnuForm>
+    <FormStateProvider value={state}>
+      <ui.Form
+        {...formProps}
+        ref={(node: HTMLFormElement | null) => {
+          formRef.current = node
+          if (typeof ref === "function") ref(node)
+          else if (ref) ref.current = node
+        }}
+        action={resolved.url}
+        method={htmlMethod}
+        encType={files ? "multipart/form-data" : encType}
+        data-status={status}
+        aria-busy={processing || undefined}
+        processing={processing}
+        onSubmit={handleSubmit}
+        onChange={handleChange}
+      >
+        {csrf && !SAFE_METHODS.includes(method) && token ? <input type="hidden" name="_token" value={token} /> : null}
+        {spoof ? <input type="hidden" name="_method" value={method.toUpperCase()} /> : null}
+        {summary ? <ErrorSummary title={summaryTitle} /> : null}
+        {children}
+      </ui.Form>
+    </FormStateProvider>
   )
 
-  if (old !== undefined) content = <OldInput old={old}>{content}</OldInput>
+  if (store) content = <FormValuesProvider value={store}>{content}</FormValuesProvider>
+  const oldInput = old !== undefined ? old : routerOld
+  if (oldInput !== undefined) content = <OldInput old={oldInput}>{content}</OldInput>
   if (model !== undefined && model !== null) content = <Model model={model}>{content}</Model>
+  if (components) content = <FormsProvider components={components}>{content}</FormsProvider>
   return content
 }
 
+export interface ErrorSummaryProps {
+  /** Errors to list. Default: the surrounding form's. */
+  errors?: FormErrors | null
+  /** A general message. Default: the form's. */
+  message?: React.ReactNode
+  /** Heading. Default: "Please correct the errors below." */
+  title?: React.ReactNode
+  /** Field labels by name: `{ email: "Email" }`. Default: the labels of the fields on the page. */
+  labels?: Record<string, React.ReactNode>
+  className?: string
+}
+
+/**
+ * A summary of every error at the top of a form. Each entry links to its field
+ * and focuses it. `Form` renders one unless `summary={false}`; render it yourself
+ * to place it elsewhere.
+ */
+export function ErrorSummary({
+  errors: errorsProp,
+  message: messageProp,
+  title,
+  labels,
+  className,
+}: ErrorSummaryProps) {
+  const ui = useUi()
+  const form = useFormState()
+  const { t } = useFormsTranslation()
+  const errors = errorsProp !== undefined ? errorsProp : (form?.errors ?? null)
+  const message = messageProp !== undefined ? messageProp : form?.message
+  const entries = errorEntries(errors)
+  if (!entries.length && !message) return null
+
+  const items = entries.map(([name, messages]) => ({
+    name,
+    label: labels?.[name] ?? registry.labelOf(name),
+    messages,
+  }))
+
+  return (
+    <div data-forms-summary tabIndex={-1} className="contents outline-none">
+      <ui.ErrorSummary
+        title={title ?? (entries.length ? t("error_summary_title") : message)}
+        description={entries.length ? message : undefined}
+        items={items}
+        onSelect={(name) => {
+          const root = form?.formRef.current ?? document
+          const field = findField(root, name)
+          return field ? (focusField(field), true) : false
+        }}
+        className={className}
+      />
+    </div>
+  )
+}
+
 export interface FormGroupProps extends Omit<FieldProps, "model" | "default" | "name"> {
   /** Field name: generates the label and looks up errors. */
   name?: string
@@ -81,17 +505,13 @@ export interface FormGroupProps extends Omit<FieldProps, "model" | "default" | "
 
 /** `<x-forms::form-group>`: label, help and errors around any control. */
 export function FormGroup({ name = "", label, blankLabel, wrap = true, children, ...props }: FormGroupProps) {
-  const names = useFieldNames({ name, label, id: props.id })
+  const field = useField({ ...props, name, label })
   if (!wrap) return <>{children}</>
-  const resolved = blankLabel ? undefined : name || label ? names.label : undefined
-  return (
-    <FieldWrapper {...props} name={name} id={names.id} label={resolved}>
-      {children}
-    </FieldWrapper>
-  )
+  const shown = blankLabel ? undefined : name || label ? field.markedLabel : undefined
+  return field.wrap(children, { label: shown })
 }
 
-export interface LabelProps extends Omit<React.ComponentProps<typeof OnuLabel>, "children"> {
+export interface LabelProps extends Omit<React.ComponentProps<"label">, "children"> {
   /** Label text. The children (Blade's slot) win over it. */
   label?: React.ReactNode
   required?: boolean
@@ -100,35 +520,56 @@ export interface LabelProps extends Omit<React.ComponentProps<typeof OnuLabel>,
 
 /** `<x-forms::label>`: a label with the required marker. Renders nothing without content. */
 export function Label({ label, required, children, ...props }: LabelProps) {
+  const ui = useUi()
+  const { t } = useFormsTranslation()
   if (!children && !label) return null
+  const marker = !children && required ? t("required_text") : ""
   return (
-    <OnuLabel {...props} required={!children && required}>
+    <ui.Label {...props} required={!!marker}>
       {children ?? label}
-    </OnuLabel>
+      {marker ? <ui.RequiredMarker symbol={marker} /> : null}
+    </ui.Label>
   )
 }
 
 /** `<x-forms::label-required>`: the required marker. `text` defaults to the translated `*`. */
-export function LabelRequired({ text, ...props }: { text?: string } & Omit<React.ComponentProps<"span">, "children">) {
+export function LabelRequired({ text, className }: { text?: string; className?: string }) {
+  const ui = useUi()
   const { t } = useFormsTranslation()
-  const symbol = text ?? t("requiredText")
-  return symbol ? <RequiredMarker symbol={symbol} {...props} /> : null
+  const symbol = text ?? t("required_text")
+  return symbol ? <ui.RequiredMarker symbol={symbol} className={className} /> : null
 }
 
 /** `<x-forms::input-help>`: help text under a control. */
-export function InputHelp(props: React.ComponentProps<typeof HelpText>) {
-  return <HelpText {...props} />
+export function InputHelp(props: { id?: string; className?: string; children?: React.ReactNode }) {
+  const ui = useUi()
+  return <ui.HelpText {...props} />
 }
 
-export interface ErrorsProps extends Omit<React.ComponentProps<"div">, "children"> {
+export interface ErrorsProps {
   /** Field name (bracket or dot notation). */
   name: string
   /** Show only the first message, like Blade's `@error`. Default `true`. */
   firstOnly?: boolean
+  id?: string
+  className?: string
 }
 
 /** `<x-forms::errors>`: the validation errors of one field, from the surrounding `Form`. */
 export function Errors({ name, firstOnly = true, ...props }: ErrorsProps) {
+  const ui = useUi()
   const errors = useFieldErrors(name)
-  return <FieldErrors {...props} errors={errors} firstOnly={firstOnly} />
+  if (!errors.length) return null
+  return <ui.FieldErrors {...props} errors={firstOnly ? errors.slice(0, 1) : errors} />
+}
+
+/** The surrounding form's status, for custom submit buttons and progress bars. */
+export function useFormStatus() {
+  const form = useFormState()
+  return {
+    processing: form?.processing ?? false,
+    status: form?.status ?? "idle",
+    progress: form?.progress ?? null,
+    errors: form?.errors ?? {},
+  }
 }
diff --git a/src/components/format.tsx b/src/components/format.tsx
index 60c740e..6815e7b 100644
--- a/src/components/format.tsx
+++ b/src/components/format.tsx
@@ -1,13 +1,13 @@
 "use client"
 
 import * as React from "react"
-import { StatusBadge } from "@javaabu/onu"
-
-import { useFormsTranslation } from "../context/forms-provider"
+import type { StatusTone } from "../core/adapter"
+import { useUi } from "../core/provider"
+import { useFormsTranslation } from "../core/strings"
 import { isNil } from "../support/data"
 
 /** Bootstrap colours (`getColor()` of a status enum) mapped to Onu status tones. */
-export function colorToTone(color: string | undefined) {
+export function colorToTone(color: string | undefined): StatusTone {
   switch (color) {
     case "success":
       return "success"
@@ -55,11 +55,12 @@ export interface FormattedValueProps {
  * they have a colour), booleans Yes / No, empty values "-", arrays a list.
  */
 export function FormattedValue({ value, multiline, wysiwyg, arrays = "list" }: FormattedValueProps) {
+  const ui = useUi()
   const { t } = useFormsTranslation()
 
   if (React.isValidElement(value)) return value
   if (isEnumLike(value)) {
-    return value.color ? <StatusBadge status={colorToTone(value.color)}>{value.label}</StatusBadge> : <>{value.label}</>
+    return value.color ? <ui.Status tone={colorToTone(value.color)}>{value.label}</ui.Status> : <>{value.label}</>
   }
   if (typeof value === "boolean") return <>{value ? t("yes") : t("no")}</>
   if (Array.isArray(value)) {
@@ -69,7 +70,7 @@ export function FormattedValue({ value, multiline, wysiwyg, arrays = "list" }: F
         <>
           {value.map((item, i) => (
             <React.Fragment key={i}>
-              {i > 0 ? t("tableArraySeparator") : null}
+              {i > 0 ? t("table_array_separator") : null}
               {itemLabel(item)}
             </React.Fragment>
           ))}
diff --git a/src/components/inputs.tsx b/src/components/inputs.tsx
index 5d8f9d6..f2f677a 100644
--- a/src/components/inputs.tsx
+++ b/src/components/inputs.tsx
@@ -1,42 +1,42 @@
 "use client"
 
 import * as React from "react"
-import {
-  EmailInput,
-  HiddenInput,
-  NumberInput,
-  PasswordInput,
-  TextInput,
-  UrlInput,
-  type NumberInputProps,
-  type TextInputProps,
-} from "@javaabu/onu"
 
-import { useFieldValue } from "../context/binding"
-import { useFlagFor, usePublishField } from "../context/registry"
+import { useFieldValue } from "../core/binding"
+import { useUi } from "../core/provider"
+import { useFlagFor, usePublishField } from "../core/registry"
 import { isNil, toFormString } from "../support/data"
-import { FieldWrapper, splitFieldProps, useFieldNames, type FieldProps, type PlaceholderProps } from "./field"
-import { useSyncedState } from "../support/use-synced-state"
+import { nameToId } from "../support/str"
+import { splitFieldProps, useField, useFieldState, type FieldProps, type PlaceholderProps } from "./field"
 
 type NativeInputProps = Omit<
   React.ComponentProps<"input">,
-  "name" | "id" | "type" | "value" | "defaultValue" | "placeholder" | "required" | "disabled" | "size" | "children"
+  | "name"
+  | "id"
+  | "type"
+  | "value"
+  | "defaultValue"
+  | "placeholder"
+  | "required"
+  | "disabled"
+  | "size"
+  | "children"
+  | "prefix"
 >
 
 export interface InputProps extends FieldProps, PlaceholderProps, NativeInputProps {
-  /** HTML input type. `email`, `password`, `number`, `url` and `hidden` use the matching Onu input. */
+  /** HTML input type. `number` and `hidden` render `Number` and `Hidden`. */
   type?: string
-  /** Controlled value. Without it the field is uncontrolled and starts from old input / the model / `default`. */
+  /** Controlled value. Without it the field starts from old input / the model / `default`. */
   value?: string | number | null
   /** Content before the input (Blade's `prepend` slot). */
   prepend?: React.ReactNode
   /** Content after the input (Blade's `append` slot). */
   append?: React.ReactNode
   /** Type Thaana from a Latin keyboard. Use on free-text fields that may hold Dhivehi. */
-  thaana?: TextInputProps["thaana"]
-  /** Show a Thaana/Latin toggle when `thaana` is on. */
+  thaana?: boolean
+  /** Show a Thaana / Latin toggle when `thaana` is on. */
   thaanaToggle?: boolean
-  classNames?: TextInputProps["classNames"]
 }
 
 /**
@@ -48,15 +48,6 @@ export function useFallback(id: string | undefined, name: string) {
   return flag ? { hidden: !flag.active, disabled: !flag.active } : null
 }
 
-function useTextValue(props: Pick<InputProps, "name" | "model" | "default" | "value" | "type">) {
-  const fieldValue = useFieldValue(props.name, props.model, props.default)
-  // Like Blade, password fields never echo a value back.
-  const initial = props.type === "password" ? "" : toFormString(fieldValue)
-  const controlled = props.value !== undefined
-  const [current, setCurrent] = useSyncedState(initial)
-  return { initial, controlled, current: controlled ? toFormString(props.value) : current, setCurrent }
-}
-
 /**
  * `<x-forms::input>`: a labelled input with model binding, old input and
  * validation errors. The `type` picks the control; prefer the typed components
@@ -73,7 +64,10 @@ export function Input(props: InputProps) {
   }
 }
 
+const NO_THAANA = new Set(["email", "password", "url", "tel", "number"])
+
 function TextLikeField(props: InputProps) {
+  const ui = useUi()
   const { field, rest } = splitFieldProps(props)
   const {
     type = "text",
@@ -87,57 +81,52 @@ function TextLikeField(props: InputProps) {
     onChange,
     ...inputProps
   } = rest
-  const names = useFieldNames({ ...field, placeholder, showPlaceholder })
-  const id = names.id
-  const text = useTextValue({ ...field, value, type })
-  const fallback = useFallback(id, field.name)
-  const disabled = field.disabled || fallback?.disabled || undefined
-
-  usePublishField({ id, name: field.name, kind: "value", value: text.current, disabled })
+  const fallback = useFallback(field.id || nameToId(field.name) || undefined, field.name)
+  const f = useField({ ...field, placeholder, showPlaceholder, disabled: field.disabled || fallback?.disabled })
+  const fieldValue = useFieldValue(field.name, field.model, field.default)
+  // Like Blade, password fields never echo a value back.
+  const initial = type === "password" ? "" : toFormString(fieldValue)
+  const [current, setCurrent] = useFieldState(field.name, initial, {
+    controlled: value === undefined ? undefined : toFormString(value),
+  })
 
-  const control = {
-    ...inputProps,
-    id,
+  usePublishField({
+    id: f.id,
     name: field.name,
-    placeholder: names.placeholder,
-    required: field.required || undefined,
-    disabled,
-    startAddon: prepend,
-    endAddon: append,
-    ...(text.controlled ? { value: toFormString(value) } : { defaultValue: text.initial }),
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
-      text.setCurrent(event.target.value)
-      onChange?.(event)
-    },
-  }
-
-  let input: React.ReactNode
-  switch (type) {
-    case "email":
-      input = <EmailInput {...control} />
-      break
-    case "password":
-      input = <PasswordInput {...control} />
-      break
-    case "url":
-      input = <UrlInput {...control} />
-      break
-    case "tel":
-      input = (
-        <TextInput {...control} type="tel" dir="ltr" inputMode="tel" autoComplete={control.autoComplete ?? "tel"} />
-      )
-      break
-    default:
-      input = <TextInput {...control} type={type} thaana={thaana} thaanaToggle={thaanaToggle} />
-  }
+    kind: "value",
+    value: current,
+    disabled: f.disabled,
+    label: f.labelText,
+  })
 
-  const wrapped = (
-    <FieldWrapper {...field} id={id} label={names.label} disabled={disabled}>
-      {/* Remount when the starting value changes (e.g. the model loaded after the first render). */}
-      <React.Fragment key={text.controlled ? undefined : text.initial}>{input}</React.Fragment>
-    </FieldWrapper>
+  const ltr = NO_THAANA.has(type)
+  const input = (
+    <ui.Input
+      {...inputProps}
+      {...f.control}
+      type={type}
+      dir={inputProps.dir ?? (ltr ? "ltr" : undefined)}
+      inputMode={inputProps.inputMode ?? (type === "tel" ? "tel" : undefined)}
+      autoComplete={inputProps.autoComplete ?? (type === "tel" ? "tel" : undefined)}
+      placeholder={f.placeholder}
+      prepend={prepend}
+      append={append}
+      thaana={ltr ? undefined : thaana}
+      thaanaToggle={ltr ? undefined : thaanaToggle}
+      value={current}
+      onChange={(event) => {
+        setCurrent(event.target.value)
+        onChange?.(event)
+      }}
+      onBlur={(event) => {
+        // js-utilities' `urlInput`: add the scheme when it is missing.
+        if (type === "url" && current && !/^[a-z][a-z\d+.-]*:/i.test(current)) setCurrent(`https://${current}`)
+        inputProps.onBlur?.(event)
+      }}
+    />
   )
 
+  const wrapped = f.wrap(input)
   return fallback ? <div hidden={fallback.hidden}>{wrapped}</div> : wrapped
 }
 
@@ -151,8 +140,8 @@ export function Email(props: Omit<InputProps, "type" | "thaana" | "thaanaToggle"
   return <TextLikeField {...props} type="email" />
 }
 
-/** `<x-forms::password>`: never pre-filled, with a show/hide button. */
-export function Password(props: Omit<InputProps, "type" | "thaana" | "thaanaToggle" | "default" | "value">) {
+/** `<x-forms::password>`: never pre-filled. */
+export function Password(props: Omit<InputProps, "type" | "thaana" | "thaanaToggle" | "default">) {
   return <TextLikeField {...props} type="password" />
 }
 
@@ -166,16 +155,18 @@ export function Tel(props: Omit<InputProps, "type" | "thaana" | "thaanaToggle">)
   return <TextLikeField {...props} type="tel" />
 }
 
-type NumberControlProps = Omit<
-  NumberInputProps,
-  "name" | "id" | "value" | "defaultValue" | "placeholder" | "required" | "disabled" | "startAddon" | "endAddon"
->
-
-export interface NumberProps extends FieldProps, PlaceholderProps, NumberControlProps {
+export interface NumberProps extends FieldProps, PlaceholderProps {
   /** Controlled value. */
   value?: number | string | null
+  onValueChange?: (value: number | null) => void
+  min?: number
+  max?: number
+  step?: number
+  /** Most decimals. Default: as many as typed. */
+  decimals?: number
   prepend?: React.ReactNode
   append?: React.ReactNode
+  className?: string
 }
 
 function toNumber(value: unknown): number | null {
@@ -185,47 +176,42 @@ function toNumber(value: unknown): number | null {
 }
 
 function NumberField(props: NumberProps) {
+  const ui = useUi()
   const { field, rest } = splitFieldProps(props)
-  const { value, placeholder, showPlaceholder, prepend, append, onValueChange, formatOptions, ...numberProps } = rest
-  const names = useFieldNames({ ...field, placeholder, showPlaceholder })
-  const fieldValue = useFieldValue(field.name, field.model, field.default)
-  const initial = toNumber(fieldValue)
-  const [current, setCurrent] = useSyncedState(initial)
-  const controlled = value !== undefined
+  const { value, placeholder, showPlaceholder, prepend, append, onValueChange, ...numberProps } = rest
+  const f = useField({ ...field, placeholder, showPlaceholder })
+  const initial = toNumber(useFieldValue(field.name, field.model, field.default))
+  const [current, setCurrent] = useFieldState(field.name, initial, {
+    controlled: value === undefined ? undefined : toNumber(value),
+    fromStore: toNumber,
+  })
 
   usePublishField({
-    id: names.id,
+    id: f.id,
     name: field.name,
     kind: "value",
-    value: controlled ? toNumber(value) : current,
-    disabled: field.disabled,
+    value: current,
+    disabled: f.disabled,
+    label: f.labelText,
   })
 
-  return (
-    <FieldWrapper {...field} id={names.id} label={names.label}>
-      <NumberInput
-        {...numberProps}
-        key={controlled ? undefined : String(initial)}
-        id={names.id}
-        name={field.name}
-        placeholder={names.placeholder}
-        required={field.required || undefined}
-        disabled={field.disabled || undefined}
-        startAddon={prepend}
-        endAddon={append}
-        // Blade prints the raw number; keep it ungrouped with all its decimals.
-        formatOptions={formatOptions ?? { useGrouping: false, maximumFractionDigits: 10 }}
-        {...(controlled ? { value: toNumber(value) } : { defaultValue: initial })}
-        onValueChange={(n) => {
-          setCurrent(n)
-          onValueChange?.(n)
-        }}
-      />
-    </FieldWrapper>
+  return f.wrap(
+    <ui.Number
+      {...numberProps}
+      {...f.control}
+      placeholder={f.placeholder}
+      prepend={prepend}
+      append={append}
+      value={current}
+      onValueChange={(n) => {
+        setCurrent(n)
+        onValueChange?.(n)
+      }}
+    />,
   )
 }
 
-/** `<x-forms::number>`: locale-aware number field that submits the raw number. */
+/** `<x-forms::number>`: a number field that submits the raw number. */
 function NumberComponent(props: NumberProps) {
   return <NumberField {...props} />
 }
@@ -235,28 +221,12 @@ export { NumberComponent as Number }
 
 /** `<x-forms::latitude>`: a number between -90 and 90 with 6 decimals. */
 export function Latitude(props: NumberProps) {
-  return (
-    <NumberField
-      step={0.000001}
-      min={-90}
-      max={90}
-      formatOptions={{ useGrouping: false, maximumFractionDigits: 6 }}
-      {...props}
-    />
-  )
+  return <NumberField step={0.000001} min={-90} max={90} decimals={6} {...props} />
 }
 
 /** `<x-forms::longitude>`: a number between -180 and 180 with 6 decimals. */
 export function Longitude(props: NumberProps) {
-  return (
-    <NumberField
-      step={0.000001}
-      min={-180}
-      max={180}
-      formatOptions={{ useGrouping: false, maximumFractionDigits: 6 }}
-      {...props}
-    />
-  )
+  return <NumberField step={0.000001} min={-180} max={180} decimals={6} {...props} />
 }
 
 export interface HiddenProps extends Pick<FieldProps, "name" | "id" | "model" | "default" | "disabled"> {
@@ -265,13 +235,29 @@ export interface HiddenProps extends Pick<FieldProps, "name" | "id" | "model" |
   form?: string
 }
 
-/** `<x-forms::hidden>`: a hidden input with the same value precedence as the other fields. */
+/** `<x-forms::hidden>`: a hidden input with the same value precedence as the other fields. An array submits one input per item. */
 export function Hidden({ name, id, model, default: defaultValue, value, disabled, form }: HiddenProps) {
   const fieldValue = useFieldValue(name, model, defaultValue)
   const resolved =
-    value !== undefined ? value : Array.isArray(fieldValue) ? fieldValue.map(toFormString) : toFormString(fieldValue)
+    value !== undefined
+      ? Array.isArray(value)
+        ? value
+        : toFormString(value)
+      : Array.isArray(fieldValue)
+        ? fieldValue.map(toFormString)
+        : toFormString(fieldValue)
 
   usePublishField({ id, name, kind: "value", value: resolved, disabled })
 
-  return <HiddenInput id={id} name={name} value={resolved} disabled={disabled} form={form} />
+  if (Array.isArray(resolved)) {
+    const inputName = name.endsWith("[]") ? name : `${name}[]`
+    return (
+      <>
+        {resolved.map((item, i) => (
+          <input key={i} type="hidden" name={inputName} value={item} disabled={disabled} form={form} />
+        ))}
+      </>
+    )
+  }
+  return <input type="hidden" id={id} name={name} value={resolved} disabled={disabled} form={form} />
 }
diff --git a/src/components/listing.tsx b/src/components/listing.tsx
index bf08ba6..ddf1bab 100644
--- a/src/components/listing.tsx
+++ b/src/components/listing.tsx
@@ -1,27 +1,9 @@
 "use client"
 
 import * as React from "react"
-import {
-  ActionMenu,
-  Button as OnuButton,
-  ButtonGroup as OnuButtonGroup,
-  Checkbox as OnuCheckbox,
-  EmptyState,
-  Icon,
-  Pagination as OnuPagination,
-  Table as OnuTable,
-  TableBody,
-  TableCell as OnuTableCell,
-  TableHead,
-  TableHeader,
-  TableRow as OnuTableRow,
-  cn,
-  type LaravelPaginationMeta,
-  type LaravelResourceCollection,
-} from "@javaabu/onu"
-
-import { getBoundValue, Model, useBindTarget, useBoundModel, type ModelProp } from "../context/binding"
-import { useFormsTranslation, useSetting } from "../context/forms-provider"
+import { getBoundValue, Model, useBindTarget, useBoundModel, type ModelProp } from "../core/binding"
+import { useSetting, useUi } from "../core/provider"
+import { useFormsTranslation } from "../core/strings"
 import { isNil, toFormString } from "../support/data"
 import { nameToLabel } from "../support/str"
 import { Button, LinkButton } from "./buttons"
@@ -31,6 +13,27 @@ import { FormattedValue } from "./format"
 import { Hidden, Input } from "./inputs"
 import { Select2 } from "./select"
 
+/** Joins class names, skipping empty ones. */
+function cn(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(" ") || undefined
+}
+
+/** A Laravel length-aware paginator as JSON (`$users->toArray()`), or its `meta`. */
+export interface LaravelPaginationMeta {
+  current_page: number
+  last_page: number
+  per_page?: number
+  total?: number
+  from?: number | null
+  to?: number | null
+}
+
+/** An API resource collection: `{ data, meta, links }`. */
+export interface LaravelResourceCollection {
+  data?: unknown[]
+  meta: LaravelPaginationMeta
+}
+
 /** The current URL's query string (empty on the server). */
 function currentQuery(): URLSearchParams {
   return new URLSearchParams(typeof window === "undefined" ? "" : window.location.search)
@@ -121,6 +124,7 @@ export function Table({
   className,
   ...props
 }: TableProps) {
+  const ui = useUi()
   const { t } = useFormsTranslation()
   const [selected, setSelected] = React.useState<Set<string>>(() => new Set())
   const [all, setAll] = React.useState<Set<string>>(() => new Set())
@@ -158,29 +162,32 @@ export function Table({
   const table = (
     <TableContext.Provider value={ctx}>
       {beforeTable}
-      <OnuTable
+      <ui.Table
         data-form-sortable={`#${filterId}`}
+        data-striped={striped || undefined}
         className={cn(striped && "[&_tbody_tr:nth-child(odd)]:bg-muted/50", tableClass)}
       >
-        <TableHeader>
+        <ui.TableHeader>
           {beforeHeaders}
-          <OnuTableRow>
+          <ui.TableRow>
             {noCheckbox ? null : (
-              <TableHead className="w-10">
-                <OnuCheckbox
-                  aria-label={t("selectAll")}
+              <ui.TableHead className="w-10">
+                <ui.Checkbox
+                  name=""
+                  value=""
+                  aria-label={t("select_all")}
                   checked={allChecked ? true : someChecked ? "indeterminate" : false}
-                  onCheckedChange={(state) => toggleAll(state === true)}
+                  onCheckedChange={(state) => toggleAll(state)}
                 />
-              </TableHead>
+              </ui.TableHead>
             )}
             {headers}
-          </OnuTableRow>
+          </ui.TableRow>
           {afterHeaders}
-        </TableHeader>
-        <TableBody>{rows ?? children}</TableBody>
+        </ui.TableHeader>
+        <ui.TableBody>{rows ?? children}</ui.TableBody>
         {afterTbody}
-      </OnuTable>
+      </ui.Table>
     </TableContext.Provider>
   )
 
@@ -224,6 +231,7 @@ export function TableRow({
   children,
   ...props
 }: TableRowProps) {
+  const ui = useUi()
   const { t } = useFormsTranslation()
   const table = React.useContext(TableContext)
   const bound = useBoundModel()
@@ -234,6 +242,7 @@ export function TableRow({
   const generated = React.useId().replace(/:/g, "")
   const id = rowId || `${checkboxName ? `${checkboxName}-` : ""}${key || generated}-row`
   const register = table?.register
+  const [own, setOwn] = React.useState(false)
 
   React.useEffect(() => {
     if (!register || hideCheckbox || disableCheckbox || !key) return
@@ -241,22 +250,22 @@ export function TableRow({
   }, [register, hideCheckbox, disableCheckbox, key])
 
   const row = (
-    <OnuTableRow id={id} data-state={table?.selected.has(key) ? "selected" : undefined} {...props}>
+    <ui.TableRow id={id} data-state={table?.selected.has(key) ? "selected" : undefined} {...props}>
       {hideCheckbox ? null : (
-        <OnuTableCell className="w-10">
-          <OnuCheckbox
+        <ui.TableCell className="w-10">
+          <ui.Checkbox
             id={`${id}-check`}
             name={`${checkboxName}[]`}
             value={key}
             disabled={disableCheckbox}
-            aria-label={t("selectRow", { name: key })}
-            checked={table ? table.selected.has(key) : undefined}
-            onCheckedChange={(state) => table?.toggle(key, state === true)}
+            aria-label={t("select_row", { name: key })}
+            checked={table ? table.selected.has(key) : own}
+            onCheckedChange={(state) => (table ? table.toggle(key, state) : setOwn(state))}
           />
-        </OnuTableCell>
+        </ui.TableCell>
       )}
       {children}
-    </OnuTableRow>
+    </ui.TableRow>
   )
 
   return model !== undefined ? <Model model={model}>{row}</Model> : row
@@ -284,13 +293,14 @@ export function TableCell({
   children,
   ...props
 }: TableCellProps) {
+  const ui = useUi()
   const { translate } = useFormsTranslation()
   const target = useBindTarget(model)
   const shown = value !== undefined ? value : name ? getBoundValue(target, name) : ""
   return (
-    <OnuTableCell data-col={showLabel && name ? (label ?? translate(nameToLabel(name))) : undefined} {...props}>
+    <ui.TableCell data-col={showLabel && name ? (label ?? translate(nameToLabel(name))) : undefined} {...props}>
       {children ?? <FormattedValue value={shown} multiline={multiline} arrays="inline" />}
-    </OnuTableCell>
+    </ui.TableCell>
   )
 }
 
@@ -307,6 +317,7 @@ export interface TableHeadingProps extends Omit<React.ComponentProps<"th">, "chi
  * form's `orderby` / `order` and submit it (or update the URL without a form).
  */
 export function TableHeading({ label, colSpan, sortable, name, children, className, ...props }: TableHeadingProps) {
+  const ui = useUi()
   const { t } = useFormsTranslation()
   const table = React.useContext(TableContext)
   const field = sortable || name
@@ -317,9 +328,9 @@ export function TableHeading({ label, colSpan, sortable, name, children, classNa
 
   if (!field) {
     return (
-      <TableHead colSpan={colSpan} className={className} {...props}>
+      <ui.TableHead colSpan={colSpan} className={className} {...props}>
         {content}
-      </TableHead>
+      </ui.TableHead>
     )
   }
 
@@ -349,7 +360,7 @@ export function TableHeading({ label, colSpan, sortable, name, children, classNa
   }
 
   return (
-    <TableHead
+    <ui.TableHead
       colSpan={colSpan}
       aria-sort={active ? (order === "DESC" ? "descending" : "ascending") : "none"}
       data-sort-field={field}
@@ -359,17 +370,17 @@ export function TableHeading({ label, colSpan, sortable, name, children, classNa
       <button
         type="button"
         onClick={sort}
-        aria-label={typeof content === "string" ? t("sortBy", { label: content }) : undefined}
+        aria-label={typeof content === "string" ? t("sort_by", { label: content }) : undefined}
         className="gap-1 font-medium inline-flex items-center hover:text-foreground"
       >
         {content}
-        <Icon
+        <ui.Icon
           name={active ? (order === "DESC" ? "chevron-down" : "chevron-up") : "chevrons-up-down"}
           size="sm"
           className={cn(!active && "opacity-40")}
         />
       </button>
-    </TableHead>
+    </ui.TableHead>
   )
 }
 
@@ -381,14 +392,15 @@ export interface TableEmptyRowProps extends React.ComponentProps<"td"> {
 
 /** `<x-forms::table.empty-row>`: one cell across the table, e.g. for `NoItems`. */
 export function TableEmptyRow({ columns = 1, noCheckbox, children, ...props }: TableEmptyRowProps) {
+  const ui = useUi()
   const table = React.useContext(TableContext)
   const hide = noCheckbox ?? table?.noCheckbox ?? false
   return (
-    <OnuTableRow>
-      <OnuTableCell colSpan={columns + (hide ? 0 : 1)} {...props}>
+    <ui.TableRow>
+      <ui.TableCell colSpan={columns + (hide ? 0 : 1)} {...props}>
         {children}
-      </OnuTableCell>
-    </OnuTableRow>
+      </ui.TableCell>
+    </ui.TableRow>
   )
 }
 
@@ -414,8 +426,8 @@ export function BulkActions({ actions, className }: BulkActionsProps) {
         <Select2
           name="action"
           options={actions}
-          placeholder={t("bulkAction")}
-          label={t("bulkAction")}
+          placeholder={t("bulk_action")}
+          label={t("bulk_action")}
           showLabel={false}
           hideSearch
           required
@@ -467,6 +479,7 @@ export function FilterSubmit({
   children,
   className,
 }: FilterSubmitProps) {
+  const ui = useUi()
   const { t } = useFormsTranslation()
   const id = React.useId()
   const exports =
@@ -486,17 +499,17 @@ export function FilterSubmit({
         {t("filter")}
       </Button>
       {exports && keys.length ? (
-        <OnuButtonGroup>
-          <OnuButton type="submit" variant="secondary" name="download" value={keys[0]} startIcon="download">
+        <ui.ButtonGroup orientation="horizontal">
+          <ui.Button type="submit" color="secondary" name="download" value={keys[0]} startIcon="download">
             {t("export")}
-          </OnuButton>
+          </ui.Button>
           {keys.length > 1 ? (
-            <ActionMenu
+            <ui.ActionMenu
               label={t("export")}
               trigger={
-                <OnuButton type="button" variant="secondary" size="icon" aria-label={t("export")}>
-                  <Icon name="chevron-down" />
-                </OnuButton>
+                <ui.Button type="button" color="secondary" size="icon" aria-label={t("export")}>
+                  <ui.Icon name="chevron-down" />
+                </ui.Button>
               }
               items={keys.map((key) => ({
                 label: exports[key],
@@ -504,11 +517,11 @@ export function FilterSubmit({
               }))}
             />
           ) : null}
-        </OnuButtonGroup>
+        </ui.ButtonGroup>
       ) : exportProp === true ? (
-        <OnuButton type="submit" variant="secondary" name="download" value="1" startIcon="download">
+        <ui.Button type="submit" color="secondary" name="download" value="1" startIcon="download">
           {t("export")}
-        </OnuButton>
+        </ui.Button>
       ) : null}
       {after}
       <LinkButton url={cancelUrl} color="light">
@@ -574,7 +587,7 @@ export function SearchForm({
   const values = model ?? Object.fromEntries(currentQuery())
   return (
     <Form {...props} method={method} model={values} summary={false} className={cn("search", className)}>
-      <Input name={name} type="search" placeholder={placeholder ?? t("searchFormPlaceholder")} showLabel={false} />
+      <Input name={name} type="search" placeholder={placeholder ?? t("search_form_placeholder")} showLabel={false} />
     </Form>
   )
 }
@@ -583,7 +596,8 @@ export function SearchForm({
 /* No items, pagination                                                       */
 /* -------------------------------------------------------------------------- */
 
-export interface NoItemsProps extends Omit<React.ComponentProps<typeof EmptyState>, "title" | "action" | "icon"> {
+export interface NoItemsProps {
+  className?: string
   /** URL of the "Create New" button. Default `#`. */
   createAction?: string
   /** The listed model (class name or object), checked with `authorize("create", model)`. */
@@ -609,14 +623,15 @@ export function NoItems({
   title,
   message,
   children,
-  ...props
+  className,
 }: NoItemsProps) {
+  const ui = useUi()
   const { t } = useFormsTranslation()
   const allowed = useCan(model ? "create" : undefined, model, undefined)
   const create = showCreate ?? allowed
   return (
-    <EmptyState
-      {...props}
+    <ui.EmptyState
+      className={className}
       icon={
         icon === undefined ? undefined : typeof icon === "string" && icon.includes(" ") ? (
           <i className={icon} aria-hidden="true" />
@@ -624,13 +639,13 @@ export function NoItems({
           icon
         )
       }
-      title={isNil(title) ? t("noItemsTitle") : title}
-      description={isNil(message) ? t("noItemsMessage", { model_type: modelType ?? t("items") }) : message}
+      title={isNil(title) ? t("no_items_title") : title}
+      description={isNil(message) ? t("no_items_message", { model_type: modelType ?? t("items") }) : message}
       action={
         create
           ? (children ?? (
               <LinkButton url={createAction} startIcon="plus">
-                {t("createNew")}
+                {t("create_new")}
               </LinkButton>
             ))
           : undefined
@@ -646,23 +661,29 @@ interface CursorPaginator {
   prev_cursor?: string | null
 }
 
-export interface PaginationProps extends Omit<React.ComponentProps<typeof OnuPagination>, "paginator"> {
+export interface PaginationProps {
   /** A Laravel paginator, API resource collection or cursor paginator, as JSON. */
   paginator: LaravelPaginationMeta | LaravelResourceCollection | CursorPaginator
+  /** Link of a page. Default: the current URL with `page` set. */
+  getPageHref?: (page: number) => string
+  /** Handle page changes yourself (pages become buttons). */
+  onPageChange?: (page: number) => void
+  className?: string
 }
 
 /**
  * The pagination partials: numbered pages for length-aware paginators, previous /
  * next for cursor paginators. Pages are links that keep the rest of the query string.
  */
-export function Pagination({ paginator, getPageHref, onPageChange, ...props }: PaginationProps) {
+export function Pagination({ paginator, getPageHref, onPageChange, className }: PaginationProps) {
+  const ui = useUi()
   const { t } = useFormsTranslation()
-  const p = paginator as CursorPaginator & Partial<LaravelPaginationMeta> & { meta?: unknown }
+  const p = paginator as CursorPaginator & Partial<LaravelPaginationMeta> & { meta?: LaravelPaginationMeta }
   const isCursor = !p.meta && p.current_page === undefined && ("next_cursor" in p || "next_page_url" in p)
 
   if (isCursor) {
     return (
-      <nav aria-label={t("pagination")} className="gap-2 flex justify-between">
+      <nav aria-label={t("pagination")} className={cn("gap-2 flex justify-between", className)}>
         <LinkButton
           url={p.prev_page_url ?? undefined}
           color="light"
@@ -683,6 +704,7 @@ export function Pagination({ paginator, getPageHref, onPageChange, ...props }: P
     )
   }
 
+  const meta = p.meta ?? (p as LaravelPaginationMeta)
   const href =
     getPageHref ??
     (onPageChange
@@ -694,10 +716,11 @@ export function Pagination({ paginator, getPageHref, onPageChange, ...props }: P
         })
 
   return (
-    <OnuPagination
-      {...props}
-      paginator={paginator as LaravelPaginationMeta | LaravelResourceCollection}
-      getPageHref={href}
+    <ui.Pagination
+      className={className}
+      currentPage={meta.current_page ?? 1}
+      lastPage={meta.last_page ?? 1}
+      hrefFor={href}
       onPageChange={onPageChange}
     />
   )
diff --git a/src/maps/index.tsx b/src/components/map-input.tsx
similarity index 57%
rename from src/maps/index.tsx
rename to src/components/map-input.tsx
index d04ae9d..9310a9d 100644
--- a/src/maps/index.tsx
+++ b/src/components/map-input.tsx
@@ -1,14 +1,15 @@
 "use client"
 
 import * as React from "react"
-import { MapPicker, MapPolygon, MapRadius, type LatLng, type PolygonCollection } from "@javaabu/onu/maps"
 
-import { useFieldValue } from "../context/binding"
-import { useSetting } from "../context/forms-provider"
-import { FieldWrapper, splitFieldProps, useFieldNames, type FieldProps } from "../components/field"
-import { Hidden } from "../components/inputs"
+import type { LatLng } from "../core/adapter"
+import { useFieldValue } from "../core/binding"
+import { useSetting, useUi } from "../core/provider"
+import { useFormsTranslation } from "../core/strings"
 import { isNil } from "../support/data"
 import { parseWktPolygons, toWkt } from "../support/wkt"
+import { splitFieldProps, useField, type FieldProps } from "./field"
+import { Hidden, Latitude, Longitude, Number as NumberField } from "./inputs"
 
 export interface MapInputProps extends Omit<FieldProps, "default"> {
   /** Name of the latitude input. Default `lat`. */
@@ -67,22 +68,9 @@ function pointOf(value: unknown): LatLng | null {
   return lat === null || lng === null ? null : { lat, lng }
 }
 
-function toCollection(wkt: string | null): PolygonCollection | null {
-  const polygons = parseWktPolygons(wkt)
-  if (!polygons.length) return null
-  return {
-    type: "FeatureCollection",
-    features: polygons.map((rings) => ({
-      type: "Feature",
-      properties: {},
-      geometry: { type: "Polygon", coordinates: rings as [number, number][][] },
-    })),
-  }
-}
-
 /**
  * `<x-forms::map-input>`: pick a point, a radius or a boundary on a map
- * (`@javaabu/onu/maps`). Submits `lat`, `lng`, `radius` and `boundary` (WKT)
+ * (from the adapter: `@javaabu/forms/onu/maps` for Onu's maps). Submits `lat`, `lng`, `radius` and `boundary` (WKT)
  * as separate fields, like the Blade component.
  */
 export function MapInput(props: MapInputProps) {
@@ -92,6 +80,7 @@ export function MapInput(props: MapInputProps) {
     lngName = "lng",
     radiusName = "radius",
     polygonName = "boundary",
+    enableCoordinates,
     enableRadius,
     enablePolygon,
     hideInputs,
@@ -110,7 +99,9 @@ export function MapInput(props: MapInputProps) {
     defaultMapCenterLng,
     className,
   } = rest
-  const names = useFieldNames(field)
+  const ui = useUi()
+  const { t } = useFormsTranslation()
+  const f = useField(field)
   const settingLat = useSetting<number>("default_lat")
   const settingLng = useSetting<number>("default_lng")
 
@@ -127,51 +118,85 @@ export function MapInput(props: MapInputProps) {
 
   const [point, setPoint] = React.useState<LatLng | null>(lat !== null && lng !== null ? { lat, lng } : null)
   const [radius, setRadius] = React.useState<number | null>(initialRadius === null ? null : initialRadius * unitFactor)
-  const [polygons, setPolygons] = React.useState<PolygonCollection | null>(() =>
-    toCollection(polygonProp ?? (typeof boundPolygon === "string" ? boundPolygon : null)),
+  const [polygons, setPolygons] = React.useState<number[][][][]>(() =>
+    parseWktPolygons(polygonProp ?? (typeof boundPolygon === "string" ? boundPolygon : null)),
   )
 
   const centerLat = defaultMapCenterLat ?? toNumber(settingLat)
   const centerLng = defaultMapCenterLng ?? toNumber(settingLng)
   const center = centerLat !== null && centerLng !== null ? { lat: centerLat, lng: centerLng } : undefined
-  const common = { id: names.id, name: "", disabled: field.disabled, required: field.required, center, className }
   const round = (n: number, digits: number) => Number(n.toFixed(digits))
+  const mode = enablePolygon ? "polygon" : enableRadius ? "radius" : "point"
+  const disabled = f.disabled || undefined
+  const coordinates = mode !== "polygon" && enableCoordinates !== false && !hideInputs
 
-  let control: React.ReactNode
-  if (enablePolygon) {
-    control = <MapPolygon {...common} multiple={false} value={polygons} onChange={setPolygons} />
-  } else if (enableRadius) {
-    control = (
-      <MapRadius
-        {...common}
-        max={maxRadius}
-        value={point && radius !== null ? { center: point, radius } : null}
-        onChange={(v) => {
-          setPoint(v?.center ?? null)
-          setRadius(v?.radius ?? null)
-        }}
+  return f.wrap(
+    <div className="gap-3 grid">
+      <ui.Map
+        id={f.id}
+        disabled={disabled}
+        className={className}
+        mode={mode}
+        point={point}
+        onPointChange={setPoint}
+        radius={radius}
+        onRadiusChange={setRadius}
+        maxRadius={maxRadius}
+        polygons={polygons}
+        onPolygonsChange={setPolygons}
+        center={center}
       />
-    )
-  } else {
-    control = <MapPicker {...common} coordinates={!hideInputs} value={point} onChange={setPoint} />
-  }
-
-  const wkt = polygons ? toWkt(polygons.features.map((f) => f.geometry.coordinates as number[][][])) : ""
-
-  return (
-    <FieldWrapper {...field} id={names.id} label={names.label}>
-      {control}
-      <Hidden name={latName} value={point ? round(point.lat, 6) : ""} model={false} disabled={field.disabled} />
-      <Hidden name={lngName} value={point ? round(point.lng, 6) : ""} model={false} disabled={field.disabled} />
-      {enableRadius ? (
+      {coordinates ? (
+        <div className="gap-3 grid sm:grid-cols-2">
+          <Latitude
+            name={latName}
+            label={t("latitude")}
+            model={false}
+            disabled={disabled}
+            value={point ? round(point.lat, 6) : null}
+            onValueChange={(n) => setPoint(n === null ? null : { lat: n, lng: point?.lng ?? center?.lng ?? 0 })}
+          />
+          <Longitude
+            name={lngName}
+            label={t("longitude")}
+            model={false}
+            disabled={disabled}
+            value={point ? round(point.lng, 6) : null}
+            onValueChange={(n) => setPoint(n === null ? null : { lat: point?.lat ?? center?.lat ?? 0, lng: n })}
+          />
+        </div>
+      ) : null}
+      {mode === "radius" && !hideInputs ? (
+        <NumberField
+          name={radiusName}
+          label={t("radius")}
+          model={false}
+          min={0}
+          max={maxRadius / unitFactor}
+          decimals={radiusPrecision}
+          append={radiusUnit === "km" ? t("km_abbr") : t("meters_abbr")}
+          disabled={disabled}
+          value={radius === null ? null : round(radius / unitFactor, radiusPrecision)}
+          onValueChange={(n) => setRadius(n === null ? null : n * unitFactor)}
+        />
+      ) : null}
+      {coordinates ? null : (
+        <>
+          <Hidden name={latName} value={point ? round(point.lat, 6) : ""} model={false} disabled={disabled} />
+          <Hidden name={lngName} value={point ? round(point.lng, 6) : ""} model={false} disabled={disabled} />
+        </>
+      )}
+      {mode === "radius" && hideInputs ? (
         <Hidden
           name={radiusName}
           value={radius === null ? "" : round(radius / unitFactor, radiusPrecision)}
           model={false}
-          disabled={field.disabled}
+          disabled={disabled}
         />
       ) : null}
-      {enablePolygon ? <Hidden name={polygonName} value={wkt} model={false} disabled={field.disabled} /> : null}
-    </FieldWrapper>
+      {mode === "polygon" ? (
+        <Hidden name={polygonName} value={polygons.length ? toWkt(polygons) : ""} model={false} disabled={disabled} />
+      ) : null}
+    </div>,
   )
 }
diff --git a/src/components/select-cascade.ts b/src/components/select-cascade.ts
index 022c4bb..a3ff62e 100644
--- a/src/components/select-cascade.ts
+++ b/src/components/select-cascade.ts
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import type { ChoiceOption } from "@javaabu/onu"
+import type { SelectOption as ChoiceOption } from "../core/adapter"
 
 import { isEmpty, toFormString } from "../support/data"
 import { normalizeOptions } from "../support/options"
diff --git a/src/components/select.tsx b/src/components/select.tsx
index 2db63bc..b746e6b 100644
--- a/src/components/select.tsx
+++ b/src/components/select.tsx
@@ -1,17 +1,10 @@
 "use client"
 
 import * as React from "react"
-import {
-  ApiSelect,
-  MultiSelect,
-  QuickCreateSelect,
-  SearchableSelect,
-  Select as OnuSelect,
-  type ChoiceOption,
-} from "@javaabu/onu"
-
-import { getBoundValue, useBindTarget, useOldInput } from "../context/binding"
-import { useFormsTranslation } from "../context/forms-provider"
+import type { RemoteOptions } from "../core/adapter"
+import { getBoundValue, useBindTarget, useOldInput } from "../core/binding"
+import { useUi } from "../core/provider"
+import { useFormsTranslation } from "../core/strings"
 import {
   parseSelector,
   useFlag,
@@ -20,7 +13,7 @@ import {
   useLinkedFrom,
   usePublishField,
   useWatchField,
-} from "../context/registry"
+} from "../core/registry"
 import { isNil, toFormString } from "../support/data"
 import {
   normalizeOptions,
@@ -30,11 +23,10 @@ import {
   type OptionFields,
   type OptionsInput,
 } from "../support/options"
-import { before, bracketsToDots } from "../support/str"
-import { FieldWrapper, splitFieldProps, useFieldNames, type FieldProps, type PlaceholderProps } from "./field"
+import { before, bracketsToDots, nameToId } from "../support/str"
+import { splitFieldProps, useField, useFieldState, type FieldProps, type PlaceholderProps } from "./field"
 import { Hidden } from "./inputs"
 import { useCascadeOptions } from "./select-cascade"
-import { useSyncedState } from "../support/use-synced-state"
 
 export interface SelectProps extends FieldProps, PlaceholderProps, OptionFields {
   /** Options: a key → label object, a PHP list, ordered pairs, records or `ChoiceOption`s. */
@@ -115,6 +107,7 @@ function parseUrls(urls: Select2Props["ajaxUrl"]): string | Record<string, strin
 }
 
 function SelectField({ select2, ...props }: Select2Props & { select2: boolean }) {
+  const ui = useUi()
   const { t } = useFormsTranslation()
   const { field, rest } = splitFieldProps(props)
   const {
@@ -146,13 +139,16 @@ function SelectField({ select2, ...props }: Select2Props & { select2: boolean })
     className,
   } = rest
 
-  const placeholder = placeholderProp || (select2 && allowClear ? t("nothingSelected") : undefined)
-  const names = useFieldNames({ ...field, placeholder, showPlaceholder })
-  const id = names.id
+  const placeholder = placeholderProp || (select2 && allowClear ? t("nothing_selected") : undefined)
+  const id = field.id || nameToId(field.name) || undefined
   const initial = useInitialSelection(props)
   const initialKey = initial.join("\u0000")
-  const [inner, setInner] = useSyncedState<string[]>(initial, initialKey)
-  const selected = valueProp === undefined ? inner : toSelectedValues(valueProp)
+  const [selected, setInner] = useFieldState<string[]>(field.name, initial, {
+    key: initialKey,
+    controlled: valueProp === undefined ? undefined : toSelectedValues(valueProp),
+    toStore: (values) => (multiple ? values : (values[0] ?? "")),
+    fromStore: (raw) => toSelectedValues(raw, idField),
+  })
 
   const setSelected = (next: string[]) => {
     setInner(next)
@@ -225,109 +221,70 @@ function SelectField({ select2, ...props }: Select2Props & { select2: boolean })
     ? [...listed, ...selected.filter((v) => !knownValues.has(v)).map((v) => ({ value: v, label: v }))]
     : listed
 
-  const disabled =
-    field.disabled ||
-    (cascade.active && (!hasParentValue || cascade.loading || showFallback)) ||
-    (!!urlParent && !urlKey) ||
-    undefined
-
-  usePublishField({ id, name: field.name, kind: "value", value: multiple ? selected : (selected[0] ?? ""), disabled })
-
-  const clearable = clearableProp ?? (select2 ? allowClear : !!placeholder) ?? false
-  const shownPlaceholder = cascade.loading ? t("loading") : cascade.error ? t("errorLoadingOptions") : names.placeholder
-  const syncName = syncFieldName || `sync_${bracketsToDots(before(field.name, "[]"))}`
-  const showSync = multiple && !excludeSyncField && !disabled
+  const f = useField({
+    ...field,
+    placeholder,
+    showPlaceholder,
+    disabled:
+      field.disabled ||
+      (cascade.active && (!hasParentValue || cascade.loading || showFallback)) ||
+      (!!urlParent && !urlKey),
+  })
+  const disabled = f.disabled || undefined
 
-  const common = {
+  usePublishField({
     id,
     name: field.name,
-    required: field.required || undefined,
+    kind: "value",
+    value: multiple ? selected : (selected[0] ?? ""),
     disabled,
-    placeholder: shownPlaceholder,
-    className,
-  }
+    label: f.labelText,
+  })
+
+  const clearable = clearableProp ?? (select2 ? allowClear : !!placeholder)
+  const shownPlaceholder = cascade.loading ? t("loading") : cascade.error ? t("error_loading_options") : f.placeholder
+  const syncName = syncFieldName || `sync_${bracketsToDots(before(field.name, "[]"))}`
+  const showSync = multiple && !excludeSyncField && !disabled
 
-  let control: React.ReactNode
+  let remote: RemoteOptions | undefined
   if (isAjax && (dynamicUrl || typeof urls === "string")) {
     const valueKey = idField || "id"
     const labelKey = nameField || "name"
-    const apiProps = {
-      ...common,
+    remote = {
       url: (dynamicUrl ?? urls) as string,
-      initialOptions: staticOptions,
-      valueKey,
-      labelKey,
       searchParam: "filter[search]",
       params: { fields: `${valueKey},${labelKey}`, include: "", append: "" },
+      valueKey,
+      labelKey,
       minChars,
-      clearable,
       dependsOn: urlKey,
     }
-    control = multiple ? (
-      <ApiSelect {...apiProps} multiple value={selected} onValueChange={(v: string[]) => setSelected(v)} />
-    ) : (
-      <ApiSelect
-        {...apiProps}
-        value={selected[0] ?? null}
-        onValueChange={(v: string | null) => setSelected(v ? [v] : [])}
-      />
-    )
-  } else if (multiple) {
-    const multiProps = {
-      ...common,
-      options,
-      value: selected,
-      onValueChange: (v: string[]) => setSelected(v),
-      clearable,
-    }
-    control = tags ? (
-      <QuickCreateSelect
-        {...multiProps}
-        multiple
-        onCreate={(label: string): ChoiceOption => ({ value: label, label })}
-      />
-    ) : (
-      <MultiSelect {...multiProps} />
-    )
-  } else if (tags) {
-    control = (
-      <QuickCreateSelect
-        {...common}
-        options={options}
-        value={selected[0] ?? null}
-        onValueChange={(v: string | null) => setSelected(v ? [v] : [])}
-        clearable={clearable}
-        onCreate={(label: string): ChoiceOption => ({ value: label, label })}
-      />
-    )
-  } else if (!select2 || hideSearch) {
-    control = (
-      <OnuSelect
-        {...common}
-        options={options}
-        value={selected[0] ?? ""}
-        onValueChange={(v: string) => setSelected(v ? [v] : [])}
-        clearable={clearable && !field.required}
-      />
-    )
-  } else {
-    control = (
-      <SearchableSelect
-        {...common}
-        options={options}
-        value={selected[0] ?? null}
-        onValueChange={(v: string | null) => setSelected(v ? [v] : [])}
-        clearable={clearable}
-      />
-    )
   }
 
+  const control = (
+    <ui.Select
+      {...f.control}
+      // Laravel reads several values only from `name[]`.
+      name={multiple && !field.name.endsWith("[]") ? `${field.name}[]` : field.name}
+      disabled={disabled}
+      className={className}
+      options={remote ? staticOptions : options}
+      value={selected}
+      onValueChange={(next) => setSelected(multiple ? next : next.slice(0, 1))}
+      multiple={multiple}
+      searchable={select2 && !hideSearch}
+      clearable={!!clearable && !(field.required && !select2 && !multiple)}
+      creatable={!!tags}
+      placeholder={shownPlaceholder}
+      loading={cascade.loading}
+      remote={remote}
+    />
+  )
+
   return (
     <>
       <div hidden={showFallback || undefined} className={showFallback ? undefined : "contents"}>
-        <FieldWrapper {...field} id={id} label={names.label} disabled={disabled}>
-          {control}
-        </FieldWrapper>
+        {f.wrap(control)}
       </div>
       {showSync ? <Hidden name={syncName} value="1" model={false} /> : null}
     </>
diff --git a/src/components/textarea.tsx b/src/components/textarea.tsx
index 73f1ef6..422b1fb 100644
--- a/src/components/textarea.tsx
+++ b/src/components/textarea.tsx
@@ -1,16 +1,15 @@
 "use client"
 
 import * as React from "react"
-import { Textarea as OnuTextarea, type TextareaProps as OnuTextareaProps } from "@javaabu/onu"
 
-import { useFieldValue } from "../context/binding"
-import { usePublishField } from "../context/registry"
+import { useFieldValue } from "../core/binding"
+import { useUi } from "../core/provider"
+import { usePublishField } from "../core/registry"
 import { toFormString } from "../support/data"
-import { FieldWrapper, splitFieldProps, useFieldNames, type FieldProps, type PlaceholderProps } from "./field"
-import { useSyncedState } from "../support/use-synced-state"
+import { splitFieldProps, useField, useFieldState, type FieldProps, type PlaceholderProps } from "./field"
 
 type NativeTextareaProps = Omit<
-  OnuTextareaProps,
+  React.ComponentProps<"textarea">,
   "name" | "id" | "value" | "defaultValue" | "placeholder" | "required" | "disabled" | "children"
 >
 
@@ -21,46 +20,43 @@ export interface TextareaProps extends FieldProps, PlaceholderProps, NativeTexta
   value?: string | null
   /** Grow with the content. Default `false`, so `rows` is respected as in Blade. */
   autoResize?: boolean
+  /** Type Thaana from a Latin keyboard. */
+  thaana?: boolean
 }
 
-/**
- * `<x-forms::textarea>`. For a rich text editor use `Wysiwyg` from
- * `@javaabu/forms/editor` (Blade's `wysiwyg` attribute).
- */
+/** `<x-forms::textarea>`. For a rich text editor use `Wysiwyg` (Blade's `wysiwyg` attribute). */
 export function Textarea(props: TextareaProps) {
+  const ui = useUi()
   const { field, rest } = splitFieldProps(props)
-  const { value, placeholder, showPlaceholder, rows = 3, autoResize = false, onChange, ...textareaProps } = rest
-  const names = useFieldNames({ ...field, placeholder, showPlaceholder })
+  const { value, placeholder, showPlaceholder, rows = 3, autoResize = false, thaana, onChange, ...textareaProps } = rest
+  const f = useField({ ...field, placeholder, showPlaceholder })
   const initial = toFormString(useFieldValue(field.name, field.model, field.default))
-  const controlled = value !== undefined
-  const [current, setCurrent] = useSyncedState(initial)
+  const [current, setCurrent] = useFieldState(field.name, initial, {
+    controlled: value === undefined ? undefined : toFormString(value),
+  })
 
   usePublishField({
-    id: names.id,
+    id: f.id,
     name: field.name,
     kind: "value",
-    value: controlled ? toFormString(value) : current,
-    disabled: field.disabled,
+    value: current,
+    disabled: f.disabled,
+    label: f.labelText,
   })
 
-  return (
-    <FieldWrapper {...field} id={names.id} label={names.label}>
-      <OnuTextarea
-        {...textareaProps}
-        key={controlled ? undefined : initial}
-        id={names.id}
-        name={field.name}
-        rows={rows}
-        autoResize={autoResize}
-        placeholder={names.placeholder}
-        required={field.required || undefined}
-        disabled={field.disabled || undefined}
-        {...(controlled ? { value: toFormString(value) } : { defaultValue: initial })}
-        onChange={(event) => {
-          setCurrent(event.target.value)
-          onChange?.(event)
-        }}
-      />
-    </FieldWrapper>
+  return f.wrap(
+    <ui.Textarea
+      {...textareaProps}
+      {...f.control}
+      rows={rows}
+      autoResize={autoResize}
+      thaana={thaana}
+      placeholder={f.placeholder}
+      value={current}
+      onChange={(event) => {
+        setCurrent(event.target.value)
+        onChange?.(event)
+      }}
+    />,
   )
 }
diff --git a/src/components/wysiwyg.tsx b/src/components/wysiwyg.tsx
new file mode 100644
index 0000000..286a733
--- /dev/null
+++ b/src/components/wysiwyg.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import { useFieldValue } from "../core/binding"
+import { useUi } from "../core/provider"
+import { usePublishField } from "../core/registry"
+import { toFormString } from "../support/data"
+import { splitFieldProps, useField, useFieldState, type FieldProps, type PlaceholderProps } from "./field"
+
+export interface WysiwygProps extends FieldProps, PlaceholderProps {
+  /** Controlled HTML. */
+  value?: string | null
+  onChange?: (html: string) => void
+  className?: string
+}
+
+/**
+ * `<x-forms::wysiwyg>` (and `<x-forms::textarea wysiwyg>`): a rich text editor
+ * that submits HTML. The editor comes from the adapter (`@javaabu/forms/onu/editor`
+ * for Onu's Tiptap editor); without one it is a plain textarea.
+ */
+export function Wysiwyg(props: WysiwygProps) {
+  const ui = useUi()
+  const { field, rest } = splitFieldProps(props)
+  const { value, placeholder, showPlaceholder, onChange, className } = rest
+  const f = useField({ ...field, placeholder, showPlaceholder })
+  const initial = toFormString(useFieldValue(field.name, field.model, field.default))
+  const [current, setCurrent] = useFieldState(field.name, initial, {
+    controlled: value === undefined ? undefined : toFormString(value),
+  })
+
+  usePublishField({
+    id: f.id,
+    name: field.name,
+    kind: "value",
+    value: current,
+    disabled: f.disabled,
+    label: f.labelText,
+  })
+
+  return f.wrap(
+    <ui.Wysiwyg
+      {...f.control}
+      className={className}
+      placeholder={f.placeholder}
+      value={current}
+      onValueChange={(html) => {
+        setCurrent(html)
+        onChange?.(html)
+      }}
+    />,
+  )
+}
diff --git a/src/context/forms-provider.tsx b/src/context/forms-provider.tsx
deleted file mode 100644
index da8d705..0000000
--- a/src/context/forms-provider.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { useOnu } from "@javaabu/onu"
-
-import { locales, type FormsMessages } from "../locales"
-
-/** Who may do what, for `can` props (`ConditionalLink`, `NoItems`). Like Laravel's `Gate::allows`. */
-export type Authorize = (ability: string, argument?: unknown, guard?: string | null) => boolean
-
-/**
- * App settings the Blade components read with `get_setting()`: `per_page`,
- * `max_upload_file_size` and `max_image_file_size` (in KB), `default_lat`, `default_lng`, …
- */
-export type FormsSettings = Record<string, unknown>
-
-export interface FormsConfig {
-  /** Override package strings (merged over the active locale's). */
-  messages?: Partial<FormsMessages>
-  /**
-   * Translates labels and titles generated from field names, like Blade's `trans()`.
-   * Pass your app's translator (e.g. `laravel-react-i18n`'s `t`). Default: unchanged.
-   */
-  translate?: (text: string) => string
-  /** CSRF token for `_token` inputs and uploads. Default: the `csrf-token` meta tag. */
-  csrfToken?: string | null
-  /** Old input for every form (e.g. an Inertia shared prop). A form's `old` prop wins. */
-  old?: Record<string, unknown> | null
-  /** Resolves `can` / `arg` / `guard` props. Without it, `can` checks fail closed. */
-  authorize?: Authorize
-  /** Values for `get_setting()` lookups. */
-  settings?: FormsSettings
-}
-
-export interface FormsContextValue extends Required<Pick<FormsConfig, "translate" | "settings">> {
-  messages: FormsMessages
-  csrfToken?: string | null
-  old: Record<string, unknown> | null
-  authorize?: Authorize
-}
-
-/** The `get_setting()` defaults javaabu projects ship with. */
-export const DEFAULT_SETTINGS: FormsSettings = {
-  per_page: 20,
-  max_upload_file_size: 1024 * 10,
-  max_image_file_size: 1024 * 2,
-}
-
-const identity = (text: string) => text
-
-const FormsContext = React.createContext<FormsConfig | null>(null)
-
-export interface FormsProviderProps extends FormsConfig {
-  children?: React.ReactNode
-}
-
-/**
- * App-wide configuration, the counterpart of `config/forms.php`, the package
- * translations and `get_setting()`. Optional: every component works without it.
- * Nested providers override their parent's values.
- */
-export function FormsProvider({ children, ...config }: FormsProviderProps) {
-  const parent = React.useContext(FormsContext)
-  const value = React.useMemo<FormsConfig>(
-    () => ({
-      ...parent,
-      ...config,
-      messages: { ...parent?.messages, ...config.messages },
-      settings: { ...parent?.settings, ...config.settings },
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [parent, config.messages, config.translate, config.csrfToken, config.old, config.authorize, config.settings],
-  )
-  return <FormsContext.Provider value={value}>{children}</FormsContext.Provider>
-}
-
-/** The resolved configuration, with the active Onu locale's strings. */
-export function useFormsConfig(): FormsContextValue {
-  const config = React.useContext(FormsContext)
-  const { locale } = useOnu()
-  const code = locale.code.split("-")[0] ?? "en"
-  return React.useMemo(
-    () => ({
-      messages: { ...(locales[code] ?? locales.en!), ...config?.messages },
-      translate: config?.translate ?? identity,
-      csrfToken: config?.csrfToken,
-      old: config?.old ?? null,
-      authorize: config?.authorize,
-      settings: { ...DEFAULT_SETTINGS, ...config?.settings },
-    }),
-    [config, code],
-  )
-}
-
-/** Replaces Laravel-style `:placeholders`, longest names first (so `:widthpx` does not need a separator). */
-export function replacePlaceholders(text: string, replace?: Record<string, string | number>): string {
-  if (!replace) return text
-  const keys = Object.keys(replace).sort((a, b) => b.length - a.length)
-  let out = text
-  for (const key of keys) out = out.split(`:${key}`).join(String(replace[key]))
-  return out
-}
-
-/** `t("fileHint", { types, size })` with the package strings of the active locale. */
-export function useFormsTranslation() {
-  const { messages, translate } = useFormsConfig()
-  const t = React.useCallback(
-    (key: keyof FormsMessages, replace?: Record<string, string | number>) =>
-      replacePlaceholders(messages[key], replace),
-    [messages],
-  )
-  return { t, translate }
-}
-
-/** `get_setting($key)`. */
-export function useSetting<T = unknown>(key: string): T | undefined {
-  return useFormsConfig().settings[key] as T | undefined
-}
-
-/** The CSRF token from the provider or the `<meta name="csrf-token">` tag. */
-export function useCsrfToken(): string | null {
-  const { csrfToken } = useFormsConfig()
-  if (csrfToken !== undefined) return csrfToken
-  if (typeof document === "undefined") return null
-  return document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')?.content ?? null
-}
diff --git a/src/core/adapter.ts b/src/core/adapter.ts
new file mode 100644
index 0000000..99a8c93
--- /dev/null
+++ b/src/core/adapter.ts
@@ -0,0 +1,559 @@
+import type * as React from "react"
+
+/**
+ * The adapter contract: what a UI framework implements so the form components
+ * can render with it. Every slot is a React component that receives resolved,
+ * UI-neutral props. The core works out names, ids, labels, values, errors and
+ * ARIA wiring; a slot only renders them.
+ *
+ * Rules every slot follows (checked by `@javaabu/forms/testing`):
+ * - Value slots are controlled: render `value` / `checked` and report changes
+ *   through `onValueChange` / `onCheckedChange` (or the composed `onChange` of
+ *   native-element slots).
+ * - Native submit keeps working: a control with a `name` puts its value in the
+ *   form's `FormData` under that name, with a native or hidden input.
+ * - `id`, `aria-invalid` and `aria-describedby` go on the focusable element.
+ */
+
+/* -------------------------------------------------------------------------- */
+/* Shared                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/** Bootstrap colour names, as in the Blade components (`color="danger"`, `outline-primary`). */
+export type ButtonColor =
+  "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | `outline-${string}`
+
+/** The icons the components use. Adapters map them to their icon set. */
+export type IconName =
+  | "download"
+  | "close"
+  | "plus"
+  | "error"
+  | "chevron-up"
+  | "chevron-down"
+  | "chevron-left"
+  | "chevron-right"
+  | "chevrons-up-down"
+
+/** Status tones (`Status`, enum badges). */
+export type StatusTone = "success" | "danger" | "warning" | "info" | "neutral"
+
+/** An option of a select. */
+export interface SelectOption {
+  value: string
+  label: string
+  disabled?: boolean
+  /** The `<optgroup>` label, when options are grouped. */
+  group?: string
+}
+
+/** Props every control slot gets. */
+export interface ControlProps {
+  id?: string
+  name: string
+  required?: boolean
+  disabled?: boolean
+  /** Placed on the focusable element. `true` while the field has errors. */
+  "aria-invalid"?: boolean
+  /** Ids of the help text and errors. Placed on the focusable element. */
+  "aria-describedby"?: string
+  className?: string
+}
+
+/* -------------------------------------------------------------------------- */
+/* Form scaffolding                                                           */
+/* -------------------------------------------------------------------------- */
+
+export interface FormSlotProps extends React.ComponentProps<"form"> {
+  /** `true` while the form submits. */
+  processing?: boolean
+}
+
+export interface FieldSlotProps {
+  /** Id of the control, for the label's `htmlFor`. */
+  id?: string
+  name?: string
+  /** Label content (already includes the required marker when `required`). Nothing is rendered without it. */
+  label?: React.ReactNode
+  labelId?: string
+  /** Hide the label visually; keep it for screen readers (Blade's `show-label="false"`). */
+  hideLabel?: boolean
+  required?: boolean
+  disabled?: boolean
+  /** Label beside the control instead of above it. */
+  inline?: boolean
+  help?: React.ReactNode
+  helpId?: string
+  /** Error messages to show under the control. */
+  errors: string[]
+  errorId?: string
+  classNames?: { group?: string; label?: string; control?: string }
+  children: React.ReactNode
+}
+
+export interface LabelSlotProps extends React.ComponentProps<"label"> {
+  /** Show the required marker after the text. */
+  required?: boolean
+}
+
+export interface RequiredMarkerSlotProps {
+  /** The marker text, `*` by default (`forms::strings.required_text`). */
+  symbol: string
+  className?: string
+}
+
+export interface HelpTextSlotProps {
+  id?: string
+  className?: string
+  children?: React.ReactNode
+}
+
+export interface FieldErrorsSlotProps {
+  id?: string
+  errors: string[]
+  className?: string
+}
+
+export interface ErrorSummaryItem {
+  /** The field name, in dot notation. */
+  name: string
+  label?: React.ReactNode
+  messages: string[]
+}
+
+export interface ErrorSummarySlotProps {
+  id?: string
+  title: React.ReactNode
+  description?: React.ReactNode
+  items: ErrorSummaryItem[]
+  /** Move focus to the field. Call it from each item's link and prevent the default when it returns `true`. */
+  onSelect: (name: string) => boolean
+  className?: string
+}
+
+/* -------------------------------------------------------------------------- */
+/* Controls                                                                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * `<input>` for text-like types (`text`, `email`, `password`, `url`, `tel`, `search`, …).
+ * Spread the remaining props onto the `<input>`: they are native attributes
+ * with a controlled `value` and a composed `onChange`.
+ */
+export interface InputSlotProps extends Omit<React.ComponentProps<"input">, "value" | "onChange" | "prefix"> {
+  name: string
+  type: string
+  value: string
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  /** Content before the input (Blade's `prepend` slot). */
+  prepend?: React.ReactNode
+  /** Content after the input (Blade's `append` slot). */
+  append?: React.ReactNode
+  /** Type Thaana from a Latin keyboard (see `thaanaKeyDown`). */
+  thaana?: boolean
+  /** Show a Thaana / Latin toggle. */
+  thaanaToggle?: boolean
+}
+
+/** `<textarea>`. Spread the remaining props onto it. */
+export interface TextareaSlotProps extends Omit<React.ComponentProps<"textarea">, "value" | "onChange"> {
+  name: string
+  value: string
+  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+  /** Grow with the content. */
+  autoResize?: boolean
+  thaana?: boolean
+}
+
+export interface NumberSlotProps extends ControlProps {
+  value: number | null
+  onValueChange: (value: number | null) => void
+  min?: number
+  max?: number
+  step?: number
+  /** Most decimals shown and submitted. */
+  decimals?: number
+  placeholder?: string
+  prepend?: React.ReactNode
+  append?: React.ReactNode
+}
+
+export interface CheckboxSlotProps extends ControlProps {
+  /** Submitted under `name` when checked. */
+  value: string
+  checked: boolean | "indeterminate"
+  onCheckedChange: (checked: boolean) => void
+  /** Text beside the box. */
+  label?: React.ReactNode
+  "aria-label"?: string
+}
+
+export interface RadioSlotProps extends ControlProps {
+  value: string
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+  label?: React.ReactNode
+}
+
+/** Options searched on the server (`Select2 isAjax`). Adapters without their own fetching use `useRemoteOptions()`. */
+export interface RemoteOptions {
+  url: string
+  /** Query parameter of the search text. Default `filter[search]`. */
+  searchParam: string
+  /** Extra query parameters. */
+  params: Record<string, string>
+  valueKey: string
+  labelKey: string
+  minChars?: number
+  /** Changes when the URL's context changes; refetch then. */
+  dependsOn?: string
+}
+
+export interface SelectSlotProps extends ControlProps {
+  options: SelectOption[]
+  /** The selected values. One at most unless `multiple`. */
+  value: string[]
+  onValueChange: (value: string[]) => void
+  multiple: boolean
+  /** Show a search box (`Select2`). */
+  searchable: boolean
+  /** Show a clear button. */
+  clearable: boolean
+  /** Let users add values that are not in the list (`tags`). */
+  creatable: boolean
+  placeholder?: string
+  /** Options are loading (cascading selects). */
+  loading?: boolean
+  /** Search the options on the server. */
+  remote?: RemoteOptions
+}
+
+export type DateMode = "date" | "datetime" | "time"
+
+export interface DateSlotProps extends ControlProps {
+  mode: DateMode
+  /** `yyyy-MM-dd`, `yyyy-MM-dd HH:mm:ss` or `HH:mm`; `""` when empty. Submit it as is. */
+  value: string
+  onValueChange: (value: string) => void
+  min?: string
+  max?: string
+  placeholder?: string
+}
+
+export interface FileSlotProps extends ControlProps {
+  /** `""` when the file is uploaded on its own (`FileUpload`): don't submit it with the form. */
+  name: string
+  accept?: string
+  /** Largest file, in bytes. */
+  maxSize?: number
+  multiple?: boolean
+  onFilesChange: (files: File[]) => void
+  buttonLabel: string
+  placeholder: string
+  /** List the picked files. */
+  showList: boolean
+}
+
+export interface ImageSlotProps extends ControlProps {
+  name: string
+  accept?: string
+  maxSize?: number
+  /** The picked file, or the URL of the current image. */
+  value: File | string | null
+  onValueChange: (file: File | null) => void
+  alt: string
+  shape: "rectangle" | "circle"
+  /** Width ÷ height of the preview. */
+  aspectRatio: number
+  /** Let the image cover the preview. */
+  cover?: boolean
+  fullWidth?: boolean
+  placeholder: React.ReactNode
+}
+
+export interface WysiwygSlotProps extends ControlProps {
+  /** HTML. */
+  value: string
+  onValueChange: (html: string) => void
+  placeholder?: string
+}
+
+export interface LatLng {
+  lat: number
+  lng: number
+}
+
+export interface MapSlotProps {
+  id?: string
+  disabled?: boolean
+  mode: "point" | "radius" | "polygon"
+  point: LatLng | null
+  onPointChange: (point: LatLng | null) => void
+  /** Metres. */
+  radius: number | null
+  onRadiusChange: (radius: number | null) => void
+  maxRadius: number
+  /** Polygons as rings of `[lng, lat]` pairs (GeoJSON order). */
+  polygons: number[][][][]
+  onPolygonsChange: (polygons: number[][][][]) => void
+  center?: LatLng
+  className?: string
+}
+
+/* -------------------------------------------------------------------------- */
+/* Buttons and links                                                          */
+/* -------------------------------------------------------------------------- */
+
+export interface ButtonSlotProps extends React.ComponentProps<"button"> {
+  color: ButtonColor
+  size?: "sm" | "md" | "lg" | "icon"
+  /** Show a spinner and block clicks. */
+  loading?: boolean
+  startIcon?: IconName
+  endIcon?: IconName
+}
+
+export interface LinkSlotProps extends React.ComponentProps<"a"> {
+  href: string
+}
+
+export interface LinkButtonSlotProps extends LinkSlotProps {
+  color: ButtonColor
+  size?: "sm" | "md" | "lg" | "icon"
+  disabled?: boolean
+  startIcon?: IconName
+  endIcon?: IconName
+}
+
+export interface ButtonGroupSlotProps {
+  orientation: "horizontal" | "vertical"
+  className?: string
+  children?: React.ReactNode
+}
+
+export interface IconSlotProps {
+  name: IconName
+  size?: "sm" | "md"
+  className?: string
+}
+
+export interface ActionMenuSlotProps {
+  label: string
+  trigger: React.ReactElement
+  items: { label: React.ReactNode; onSelect: () => void }[]
+}
+
+/* -------------------------------------------------------------------------- */
+/* Display                                                                    */
+/* -------------------------------------------------------------------------- */
+
+export interface AlertSlotProps {
+  /** Bootstrap alert type: `primary`, `info`, `success`, `warning`, `danger`, … */
+  type: string
+  heading?: React.ReactNode
+  icon?: React.ReactNode
+  dismissible?: boolean
+  className?: string
+  children?: React.ReactNode
+}
+
+export interface CardSlotProps {
+  title?: React.ReactNode
+  subtitle?: React.ReactNode
+  footer?: React.ReactNode
+  /** Content before the header (Blade's `image_top`). */
+  imageTop?: React.ReactNode
+  className?: string
+  children?: React.ReactNode
+}
+
+export type CardPartSlotProps = React.ComponentProps<"div">
+
+export interface AccordionSlotItem {
+  value: string
+  title: React.ReactNode
+  content: React.ReactNode
+  disabled?: boolean
+  id?: string
+}
+
+export interface AccordionSlotProps {
+  id: string
+  items: AccordionSlotItem[]
+  /** Values of the open items. */
+  defaultValue: string[]
+  /** Allow several open items. */
+  multiple: boolean
+  className?: string
+}
+
+export interface TabsSlotItem {
+  value: string
+  label: React.ReactNode
+  content: React.ReactNode
+  disabled?: boolean
+}
+
+export interface TabsSlotProps {
+  items: TabsSlotItem[]
+  defaultValue: string
+  onValueChange: (value: string) => void
+  className?: string
+}
+
+export interface NavTabsSlotProps {
+  items: { label: React.ReactNode; href: string; active?: boolean; disabled?: boolean; icon?: React.ReactNode }[]
+  className?: string
+}
+
+export interface ModalSlotProps {
+  id?: string
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Element that opens the modal. */
+  trigger?: React.ReactElement
+  title?: React.ReactNode
+  description?: React.ReactNode
+  footer?: React.ReactNode
+  size: "sm" | "md" | "lg" | "xl" | "full"
+  className?: string
+  children?: React.ReactNode
+}
+
+export interface StatusSlotProps {
+  tone: StatusTone
+  className?: string
+  children?: React.ReactNode
+}
+
+export interface DescriptionListSlotProps {
+  layout: "auto" | "stacked" | "inline"
+  className?: string
+  children?: React.ReactNode
+}
+
+export interface DescriptionItemSlotProps {
+  label?: React.ReactNode
+  classNames?: { label?: string; value?: string }
+  className?: string
+  children?: React.ReactNode
+}
+
+/* -------------------------------------------------------------------------- */
+/* Listing                                                                    */
+/* -------------------------------------------------------------------------- */
+
+export interface EmptyStateSlotProps {
+  icon?: React.ReactNode
+  title: React.ReactNode
+  description?: React.ReactNode
+  action?: React.ReactNode
+  className?: string
+}
+
+export interface PaginationSlotProps {
+  currentPage: number
+  lastPage: number
+  /** Link of a page. Without it, pages are buttons that call `onPageChange`. */
+  hrefFor?: (page: number) => string
+  onPageChange?: (page: number) => void
+  className?: string
+}
+
+/* -------------------------------------------------------------------------- */
+/* The adapter                                                                */
+/* -------------------------------------------------------------------------- */
+
+/** Every slot an adapter can implement. Missing slots render with the HTML base adapter. */
+export interface FormsComponents {
+  Form: React.ComponentType<FormSlotProps>
+  Field: React.ComponentType<FieldSlotProps>
+  Label: React.ComponentType<LabelSlotProps>
+  RequiredMarker: React.ComponentType<RequiredMarkerSlotProps>
+  HelpText: React.ComponentType<HelpTextSlotProps>
+  FieldErrors: React.ComponentType<FieldErrorsSlotProps>
+  ErrorSummary: React.ComponentType<ErrorSummarySlotProps>
+
+  Input: React.ComponentType<InputSlotProps>
+  Textarea: React.ComponentType<TextareaSlotProps>
+  Number: React.ComponentType<NumberSlotProps>
+  Checkbox: React.ComponentType<CheckboxSlotProps>
+  Radio: React.ComponentType<RadioSlotProps>
+  Select: React.ComponentType<SelectSlotProps>
+  Date: React.ComponentType<DateSlotProps>
+  File: React.ComponentType<FileSlotProps>
+  Image: React.ComponentType<ImageSlotProps>
+  Wysiwyg: React.ComponentType<WysiwygSlotProps>
+  Map: React.ComponentType<MapSlotProps>
+
+  Button: React.ComponentType<ButtonSlotProps>
+  Link: React.ComponentType<LinkSlotProps>
+  LinkButton: React.ComponentType<LinkButtonSlotProps>
+  ButtonGroup: React.ComponentType<ButtonGroupSlotProps>
+  Icon: React.ComponentType<IconSlotProps>
+  ActionMenu: React.ComponentType<ActionMenuSlotProps>
+
+  Alert: React.ComponentType<AlertSlotProps>
+  Card: React.ComponentType<CardSlotProps>
+  CardHeader: React.ComponentType<CardPartSlotProps>
+  CardTitle: React.ComponentType<CardPartSlotProps>
+  CardSubtitle: React.ComponentType<CardPartSlotProps>
+  CardFooter: React.ComponentType<CardPartSlotProps>
+  Accordion: React.ComponentType<AccordionSlotProps>
+  Tabs: React.ComponentType<TabsSlotProps>
+  NavTabs: React.ComponentType<NavTabsSlotProps>
+  Modal: React.ComponentType<ModalSlotProps>
+  Status: React.ComponentType<StatusSlotProps>
+  DescriptionList: React.ComponentType<DescriptionListSlotProps>
+  DescriptionItem: React.ComponentType<DescriptionItemSlotProps>
+
+  Table: React.ComponentType<React.ComponentProps<"table">>
+  TableHeader: React.ComponentType<React.ComponentProps<"thead">>
+  TableBody: React.ComponentType<React.ComponentProps<"tbody">>
+  TableRow: React.ComponentType<React.ComponentProps<"tr">>
+  TableHead: React.ComponentType<React.ComponentProps<"th">>
+  TableCell: React.ComponentType<React.ComponentProps<"td">>
+  EmptyState: React.ComponentType<EmptyStateSlotProps>
+  Pagination: React.ComponentType<PaginationSlotProps>
+}
+
+export type SlotName = keyof FormsComponents
+
+export interface ConfirmOptions {
+  title: string
+  description?: string
+  confirmLabel: string
+  cancelLabel: string
+  destructive?: boolean
+}
+
+/** Imperative UI the components use: confirmation dialogs and notifications. */
+export interface FormsServices {
+  confirm: (options: ConfirmOptions) => Promise<boolean>
+  notify: (message: string, options?: { type?: "error" | "success" | "info" }) => void
+}
+
+export interface FormsAdapter extends Partial<FormsServices> {
+  /** For error messages and devtools: `"onu"`, `"shadcn"`, … */
+  name: string
+  components: Partial<FormsComponents>
+}
+
+/** Types an adapter. Returns it unchanged. */
+export function defineAdapter<A extends FormsAdapter>(adapter: A): A {
+  return adapter
+}
+
+/** Combines adapters; later ones win slot by slot (`mergeAdapters(onu, onuEditor, onuMaps)`). */
+export function mergeAdapters(...adapters: FormsAdapter[]): FormsAdapter {
+  return adapters.reduce<FormsAdapter>(
+    (merged, adapter) => ({
+      ...merged,
+      ...adapter,
+      name: merged.name ? `${merged.name}+${adapter.name}` : adapter.name,
+      components: { ...merged.components, ...adapter.components },
+    }),
+    { name: "", components: {} },
+  )
+}
diff --git a/src/context/binding.tsx b/src/core/binding.tsx
similarity index 98%
rename from src/context/binding.tsx
rename to src/core/binding.tsx
index 472fe2b..e00a0da 100644
--- a/src/context/binding.tsx
+++ b/src/core/binding.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 
 import { bracketsToDots } from "../support/str"
 import { dataGet, dataHas, isNil } from "../support/data"
-import { useFormsConfig } from "./forms-provider"
+import { useFormsConfig } from "./provider"
 
 /**
  * A field's `model` prop: an object to read values from, `false` to ignore the
diff --git a/src/core/errors.ts b/src/core/errors.ts
new file mode 100644
index 0000000..f3d75dd
--- /dev/null
+++ b/src/core/errors.ts
@@ -0,0 +1,228 @@
+/**
+ * Laravel validation errors: reading them from responses and thrown values,
+ * looking them up by field name, and moving focus to the first invalid field.
+ */
+
+/** Field errors keyed by field name in Laravel's dot notation (`items.0.name`). */
+export type FormErrors = Record<string, string[] | string | undefined>
+
+/** Laravel's 422 response body: `{ message, errors: { "items.0.name": ["…"] } }`. */
+export interface ValidationPayload {
+  message?: string
+  errors: FormErrors
+}
+
+/** Throw it from `onSubmit` to show field errors without an HTTP client. */
+export class ValidationError extends Error {
+  readonly errors: FormErrors
+  constructor(payload: ValidationPayload | FormErrors, message?: string) {
+    const body = isValidationPayload(payload) ? payload : { errors: payload as FormErrors }
+    super(message ?? body.message ?? "")
+    this.name = "ValidationError"
+    this.errors = body.errors
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null
+}
+
+function isMessages(value: unknown): boolean {
+  return (
+    value === undefined ||
+    typeof value === "string" ||
+    (Array.isArray(value) && value.every((m) => typeof m === "string"))
+  )
+}
+
+/** True for a flat error object: `{ field: string | string[] }`. */
+export function isFormErrors(value: unknown): value is FormErrors {
+  return isRecord(value) && !Array.isArray(value) && Object.values(value).every(isMessages)
+}
+
+/** True for `{ errors: { field: string | string[] } }`, Laravel's 422 shape. */
+export function isValidationPayload(value: unknown): value is ValidationPayload {
+  return isRecord(value) && isFormErrors(value.errors)
+}
+
+/** `items[0][name]` → `items.0.name`, the key format Laravel uses for errors. `tags[]` → `tags`. */
+export function toDotNotation(name: string): string {
+  return name.replace(/\[(\w*)\]/g, ".$1").replace(/\.+$/, "")
+}
+
+/**
+ * Finds a Laravel validation payload in a thrown value or a parsed response:
+ * the payload itself, a `ValidationError`, an axios-style error
+ * (`error.response.data`), `{ data }`, `{ body }` or `{ cause }`.
+ * Returns `null` when there is none. Use `readValidationErrors` for a fetch `Response`.
+ */
+export function getValidationErrors(value: unknown): ValidationPayload | null {
+  if (value instanceof ValidationError) return { message: value.message || undefined, errors: value.errors }
+  if (isValidationPayload(value)) return value
+  if (!isRecord(value)) return null
+  for (const key of ["response", "data", "body", "cause"] as const) {
+    const found: unknown = key === "response" && isRecord(value.response) ? value.response.data : value[key]
+    if (found !== undefined && found !== value) {
+      const nested = getValidationErrors(found)
+      if (nested) return nested
+    }
+  }
+  return null
+}
+
+/** Like `getValidationErrors`, and also reads the JSON body of a fetch `Response` (status 422). */
+export async function readValidationErrors(value: unknown): Promise<ValidationPayload | null> {
+  if (typeof Response !== "undefined" && value instanceof Response) {
+    if (value.status !== 422) return null
+    try {
+      return getValidationErrors(await value.clone().json())
+    } catch {
+      return null
+    }
+  }
+  return getValidationErrors(value)
+}
+
+function toArray(messages: string[] | string | undefined): string[] {
+  if (messages === undefined) return []
+  return (Array.isArray(messages) ? messages : [messages]).filter(Boolean)
+}
+
+/** Flattens errors to `[name, messages]` pairs, dropping empty entries. */
+export function errorEntries(errors: FormErrors | null | undefined): [string, string[]][] {
+  if (!errors) return []
+  return Object.entries(errors)
+    .map(([name, messages]) => [name, toArray(messages)] as [string, string[]])
+    .filter(([, messages]) => messages.length > 0)
+}
+
+/**
+ * Picks the errors of one error bag. Inertia shares `{ email: "…" }` normally and
+ * `{ createUser: { email: "…" } }` when a visit sets `errorBag`. Without a bag,
+ * nested bags are ignored.
+ */
+export function selectErrorBag(errors: unknown, bag?: string | null): FormErrors | null {
+  if (!isRecord(errors)) return null
+  if (bag) {
+    const bagged = errors[bag]
+    return isFormErrors(bagged) ? bagged : null
+  }
+  const flat: FormErrors = {}
+  for (const [key, value] of Object.entries(errors)) {
+    if (isMessages(value)) flat[key] = value as string[] | string | undefined
+  }
+  return flat
+}
+
+/**
+ * The errors of a field. `address[city]` and `address.city` match `address.city`.
+ * Array fields (`tags[]`) also collect their items' errors (`tags.0`, `tags.1`), as
+ * Laravel reports a rule on `tags.*` per item. `exact` turns that off.
+ */
+export function errorsFor(errors: FormErrors | null | undefined, name: string | undefined, exact = false): string[] {
+  if (!errors || !name) return []
+  const key = toDotNotation(name)
+  const own = toArray(errors[name] ?? errors[key])
+  if (exact || !name.endsWith("[]")) return own
+  const items = Object.keys(errors)
+    .filter((k) => k.startsWith(`${key}.`) && /^\d+$/.test(k.slice(key.length + 1)))
+    .flatMap((k) => toArray(errors[k]))
+  return [...own, ...items]
+}
+
+/** Removes the errors of a field (and its items) after the user edits it. Returns the same object when nothing changed. */
+export function withoutField(errors: FormErrors, name: string): FormErrors {
+  const key = toDotNotation(name)
+  const kept = Object.entries(errors).filter(([k]) => {
+    const dotted = toDotNotation(k)
+    return dotted !== key && !(name.endsWith("[]") && dotted.startsWith(`${key}.`))
+  })
+  return kept.length === Object.keys(errors).length ? errors : Object.fromEntries(kept)
+}
+
+type Focusable = HTMLElement & { name?: string; disabled?: boolean }
+
+/** Finds the control for an error key (`items.0.name`) inside `root`: by `name` (dot or bracket form), then by `id`. */
+export function findField(root: ParentNode | null | undefined, name: string): HTMLElement | null {
+  if (!root) return null
+  const target = toDotNotation(name)
+  const candidates = Array.from(root.querySelectorAll<Focusable>("[name]")).filter(
+    (el) => el.getAttribute("type") !== "hidden",
+  )
+  const named =
+    candidates.find((el) => toDotNotation(el.getAttribute("name") ?? "") === target) ??
+    // `tags.1` → the `tags[]` control.
+    candidates.find((el) => {
+      const own = el.getAttribute("name") ?? ""
+      return own.endsWith("[]") && target.startsWith(`${toDotNotation(own)}.`)
+    })
+  if (named) return named
+  const byId = Array.from(root.querySelectorAll<HTMLElement>("[id]")).find((el) => el.id === name)
+  return byId ?? null
+}
+
+/**
+ * Asks collapsed containers (a closed accordion item, an inactive tab…) to show
+ * `el`, so it can be focused. Containers listen for the `forms:reveal` event.
+ */
+export function revealField(el: HTMLElement) {
+  el.dispatchEvent(new CustomEvent("forms:reveal", { bubbles: true }))
+  // Onu's containers listen for their own event name.
+  el.dispatchEvent(new CustomEvent("onu:reveal", { bubbles: true }))
+}
+
+/** The element to focus for a control: a visually hidden native input hands over to its visible sibling. */
+function focusTarget(el: HTMLElement): HTMLElement {
+  const hidden =
+    el instanceof HTMLInputElement &&
+    (el.getAttribute("aria-hidden") === "true" || el.tabIndex < 0 || el.style.display === "none")
+  if (!hidden) return el
+  return (
+    el.parentElement?.querySelector<HTMLElement>("button, [tabindex]:not([tabindex='-1']), input:not([type=hidden])") ??
+    el
+  )
+}
+
+/**
+ * Reveals, scrolls to and focuses a control. When a container has to open
+ * first (it re-renders), focus follows on the next frames. Returns `true`
+ * when focus moved or is scheduled.
+ */
+export function focusField(el: HTMLElement | null | undefined): boolean {
+  if (!el) return false
+  revealField(el)
+  const target = focusTarget(el)
+  const focus = () => {
+    target.scrollIntoView?.({ block: "center", behavior: "smooth" })
+    target.focus({ preventScroll: true })
+  }
+  if (!target.closest("[hidden]")) {
+    focus()
+    return document.activeElement === target
+  }
+  let tries = 0
+  const retry = () => {
+    if (!target.isConnected) return
+    if (!target.closest("[hidden]")) focus()
+    else if (++tries < 10) setTimeout(retry, 16)
+  }
+  setTimeout(retry, 0)
+  return true
+}
+
+/** Focuses the first invalid control in `root`, in document order. */
+export function focusFirstInvalid(root: HTMLElement | null, errors?: FormErrors | null): boolean {
+  if (!root) return false
+  const keys = errorEntries(errors).map(([name]) => toDotNotation(name))
+  const controls = Array.from(root.querySelectorAll<Focusable>("input, select, textarea, button, [aria-invalid]"))
+  const first = controls.find((el) => {
+    const type = el.getAttribute("type")
+    if (type === "hidden" || type === "submit") return false
+    if (el.getAttribute("aria-invalid") === "true") return true
+    const name = el.getAttribute("name")
+    if (!name) return false
+    const dotted = toDotNotation(name)
+    return keys.some((key) => key === dotted || (name.endsWith("[]") && key.startsWith(`${dotted}.`)))
+  })
+  return focusField(first)
+}
diff --git a/src/core/form-context.tsx b/src/core/form-context.tsx
new file mode 100644
index 0000000..5c63456
--- /dev/null
+++ b/src/core/form-context.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+
+import { dataGet, dataHas } from "../support/data"
+import { errorsFor, selectErrorBag, toDotNotation, type FormErrors } from "./errors"
+import { useFormsConfig } from "./provider"
+
+export type FormStatus = "idle" | "submitting" | "success" | "error"
+
+export interface FormState {
+  /** `true` while the form submits. */
+  processing: boolean
+  status: FormStatus
+  /** Upload progress (0–100) of the current submit, or `null`. */
+  progress: number | null
+  /** Fields are disabled (the form's `disabled`, or while processing). */
+  disabled: boolean
+  /** Every error the form shows, in dot notation. */
+  errors: FormErrors
+  /** A general message (e.g. "The form could not be submitted."). */
+  message: string | null
+  /** Show errors, e.g. from your own request. Focuses the first invalid field. */
+  setErrors: (errors: FormErrors | null, message?: string | null) => void
+  /** Clears a field's errors; fields call it when edited. */
+  clearErrors: (name: string) => void
+  /** Goes up when the fields should return to their starting values (`reset`). */
+  resetVersion: number
+  /** Field names to reset, or `null` for all. */
+  resetNames: string[] | null
+  formRef: React.RefObject<HTMLFormElement | null>
+}
+
+const FormStateContext = React.createContext<FormState | null>(null)
+
+/** Provides a form's state to the fields inside. `Form` renders it. */
+export const FormStateProvider = FormStateContext.Provider
+
+/** The surrounding `Form`'s state (processing, status, progress, errors), or `null` outside one. */
+export function useFormState(): FormState | null {
+  return React.useContext(FormStateContext)
+}
+
+/**
+ * Where field values live when something outside the fields owns them, e.g.
+ * Inertia's `useForm()`. Fields read and write through it instead of their own state.
+ */
+export interface FormValuesStore {
+  has: (name: string) => boolean
+  get: (name: string) => unknown
+  set: (name: string, value: unknown) => void
+  /** Sets a value from the current one; for checkbox groups that share an array. */
+  update: (name: string, updater: (current: unknown) => unknown) => void
+}
+
+const FormValuesContext = React.createContext<FormValuesStore | null>(null)
+
+export const FormValuesProvider = FormValuesContext.Provider
+
+export function useFormValues(): FormValuesStore | null {
+  return React.useContext(FormValuesContext)
+}
+
+/** Sets `path` (dot notation) on a copy of `target`, creating objects / arrays on the way. */
+export function setIn<T>(target: T, path: string, value: unknown): T {
+  const [head, ...rest] = path.split(".")
+  if (head === undefined) return target
+  const source = (target ?? {}) as Record<string, unknown> | unknown[]
+  const copy: Record<string, unknown> | unknown[] = Array.isArray(source) ? [...source] : { ...source }
+  const next = rest.length ? setIn((source as Record<string, unknown>)[head], rest.join("."), value) : value
+  if (Array.isArray(copy) && /^\d+$/.test(head)) copy[Number(head)] = next
+  else (copy as Record<string, unknown>)[head] = next
+  return copy as T
+}
+
+/** A store over an Inertia-style `{ data, setData }` form. Bracket names (`address[city]`) map to nested data. */
+export function storeFor(form: {
+  data: unknown
+  setData: (updater: (data: never) => unknown) => void
+}): FormValuesStore {
+  const path = (name: string) => toDotNotation(name)
+  return {
+    has: (name) => dataHas(form.data, path(name)),
+    get: (name) => dataGet(form.data, path(name)),
+    set: (name, value) => form.setData(((data: unknown) => setIn(data, path(name), value)) as never),
+    update: (name, updater) =>
+      form.setData(((data: unknown) => setIn(data, path(name), updater(dataGet(data, path(name))))) as never),
+  }
+}
+
+const NO_ERRORS: string[] = []
+
+/**
+ * The errors of one field: from the surrounding `Form`, or, outside a form,
+ * from `FormsProvider errors` (the default bag).
+ */
+export function useFieldErrors(name: string | undefined): string[] {
+  const form = useFormState()
+  const { errors: provided } = useFormsConfig()
+  const errors = form ? form.errors : selectErrorBag(provided)
+  const list = errorsFor(errors, name)
+  return list.length ? list : NO_ERRORS
+}
diff --git a/src/core/locales/dv.ts b/src/core/locales/dv.ts
new file mode 100644
index 0000000..c4659fb
--- /dev/null
+++ b/src/core/locales/dv.ts
@@ -0,0 +1,75 @@
+import type { FormsMessages } from "./en"
+
+/** Dhivehi strings. The first group is javaabu/forms `lang/dv/strings.php`. */
+export const dv: FormsMessages = {
+  required_text: "*",
+  nothing_selected: "އެއްވެސް އެއްޗެއް ޙިޔާރުނުކޮށް",
+  blank: "-",
+  yes: "އާނ",
+  no: "ނޫން",
+  table_array_separator: "، ",
+  fileinput_select_file: "ފައިލް ސެލެކްޓްކޮށްލާ",
+  fileinput_upload_file: "ފައިލް އަޕްލޯޑްކުރޭ",
+  fileinput_change_file: "ބަދަލުކޮށްލާ",
+  fileinput_remove_file: "ފުހެލާ",
+  fileinput_nothing_selected: "އެއްވެސް ފައިލެއް ސެލްކްޓްނުކޮށް.",
+  imageinput_select_image: "އިމޭޖެއް ސެލެކްޓްކުރަން ފިތާލާ",
+  latitude: "ލެޓިޓިއުޑް",
+  longitude: "ލޯންޖިޓިއުޑް",
+  radius: "ރޭޑިއަސް",
+  meters_abbr: "m",
+  km_abbr: "km",
+  boundary: "ބައުންޑަރީ",
+  file_hint: "ހަމައެކަނި :types ވައްތަރުގެ :size އަށް ވުރެ ބޮޑު ނޫން ފައިލް.",
+  image_hint: "ރަނގަޅުވާނީ :widthpx x :heightpx.",
+  text_list_separator: "، ",
+  text_list_separator_last_glue: " އަދި ",
+  map_search_string: "ހޯދާ...",
+  search_form_placeholder: "ހޯދާ...",
+
+  kb: "KB",
+  mb: "MB",
+  gb: "GB",
+
+  bulk_action: "އެއްފަހަރާ ކުރާ ކަންކަން",
+  apply: "ހިންގާ",
+  filter: "ފިލްޓަރު ކުރޭ",
+  export: "އެކްސްޕޯޓްކުރޭ",
+  clear: "ފޮހެލާ",
+  select_all: "ހުރިހާ އެއްޗެއް ޚިޔާރުކުރޭ",
+  select_row: ":name ޚިޔާރުކުރޭ",
+  create_new: "އައު އެއްޗެއް ހަދާ",
+  no_items_title: "މިތާ އަދި އެއްވެސް އެއްޗެއް ނެތް.",
+  no_items_message: "އައު :model_type ހަދާލަމާ.",
+  items: "އެއްޗެހި",
+  pagination: "ސަފްހާތައް",
+  previous: "ކުރީގެ",
+  next: "ކުރިއަށް",
+  sort_by: ":label އިން ތަރުތީބުކުރޭ",
+
+  loading: "ލޯޑުވަނީ…",
+  error_loading_options: "އޮޕްޝަންތައް ލޯޑެއް ނުކުރެވުނު",
+  uploading: "އަޕްލޯޑްކުރަނީ…",
+  removing: "ފޮހެލަނީ…",
+  are_you_sure: "ކަށަވަރުތަ؟",
+  remove_file_confirm: "މި ފައިލް ފޮހެލުމަށްފަހު އަނބުރާ ނުގެނެވޭނެ!",
+  remove_file_confirm_button: "އާން، ފޮހެލާ!",
+  cancel: "ކެންސަލްކުރޭ",
+  upload_error: "ފައިލް އަޕްލޯޑްކުރުމުގައި މައްސަލައެއް ދިމާވެއްޖެ.",
+  remove_error: "ފައިލް ފޮހެލުމުގައި މައްސަލައެއް ދިމާވެއްޖެ.",
+  file_too_large: "ފައިލްގެ ސައިޒު :size MB އަށްވުރެ ބޮޑުވެގެން ނުވާނެ",
+  file_type_not_allowed: "ހަމައެކަނި :accept ފައިލް.",
+  confirm_text: "މިކަން ކުރަން ބޭނުންވާކަން ކަށަވަރުކޮށްލަން.",
+  confirm_button: "އާން، ކުރިއަށް!",
+  delete_confirm_text: "މި ފޮހެލުމަށްފަހު އަނބުރާ ބަދަލެއް ނުކުރެވޭނެ!",
+  delete_confirm_button: "އާން، ފޮހެލާ!",
+
+  // Form errors
+  error_summary_title: "ތިރީގައިވާ ގޯސްތައް ރަނގަޅުކުރައްވާ.",
+  submit_failed: "ފޯމު ހުށައެޅިއެއް ނުދިޔައެވެ. އަލުން މަސައްކަތްކުރައްވާ.",
+  close: "ބަންދުކުރޭ",
+  page: "ސަފްހާ :page",
+  search: "ހޯދާ",
+  add_option: '":value" އިތުރުކުރޭ',
+  thaana_toggle: "ތާނައިން ލިޔުއްވާ",
+}
diff --git a/src/core/locales/en.ts b/src/core/locales/en.ts
new file mode 100644
index 0000000..0513522
--- /dev/null
+++ b/src/core/locales/en.ts
@@ -0,0 +1,81 @@
+/**
+ * English strings. The first group mirrors javaabu/forms `lang/en/strings.php`;
+ * placeholders use Laravel's `:name` style so translations can be copied across.
+ */
+export const en = {
+  required_text: "*",
+  nothing_selected: "Nothing Selected",
+  blank: "-",
+  yes: "Yes",
+  no: "No",
+  table_array_separator: ", ",
+  fileinput_select_file: "Select file",
+  fileinput_upload_file: "Upload file",
+  fileinput_change_file: "Change",
+  fileinput_remove_file: "Remove",
+  fileinput_nothing_selected: "No file selected.",
+  imageinput_select_image: "Click to select an image",
+  latitude: "Latitude",
+  longitude: "Longitude",
+  radius: "Radius",
+  meters_abbr: "m",
+  km_abbr: "km",
+  boundary: "Boundary",
+  file_hint: "Only :types files of max :size allowed.",
+  image_hint: "Recommended :widthpx x :heightpx.",
+  text_list_separator: ", ",
+  text_list_separator_last_glue: " and ",
+  map_search_string: "Search...",
+  search_form_placeholder: "Search...",
+
+  // File sizes (format_file_size)
+  kb: "KB",
+  mb: "MB",
+  gb: "GB",
+
+  // Component text from the Blade views
+  bulk_action: "Bulk Action",
+  apply: "Apply",
+  filter: "Filter",
+  export: "Export",
+  clear: "Clear",
+  select_all: "Select All",
+  select_row: "Select :name",
+  create_new: "Create New",
+  no_items_title: "It's a bit lonely here.",
+  no_items_message: "Let's create some new :model_type.",
+  items: "items",
+  pagination: "Pagination",
+  previous: "Previous",
+  next: "Next",
+  sort_by: "Sort by :label",
+
+  // js-utilities messages
+  loading: "Loading...",
+  error_loading_options: "Error Loading Options",
+  uploading: "Uploading...",
+  removing: "Removing...",
+  are_you_sure: "Are you sure?",
+  remove_file_confirm: "You will not be able to undo deleting this file!",
+  remove_file_confirm_button: "Yes, remove it!",
+  cancel: "Cancel",
+  upload_error: "An error occurred while uploading the file.",
+  remove_error: "An error occurred while removing the file.",
+  file_too_large: "File size cannot be greater than :size MB",
+  file_type_not_allowed: "Only :accept files are allowed.",
+  confirm_text: "Just checking if you wanted to really do this.",
+  confirm_button: "Yes, continue!",
+  delete_confirm_text: "You will not be able to undo this delete operation!",
+  delete_confirm_button: "Yes, delete it!",
+
+  // Form errors
+  error_summary_title: "Please correct the errors below.",
+  submit_failed: "The form could not be submitted. Please try again.",
+  close: "Close",
+  page: "Page :page",
+  search: "Search",
+  add_option: 'Add ":value"',
+  thaana_toggle: "Type in Thaana",
+}
+
+export type FormsMessages = { [K in keyof typeof en]: string }
diff --git a/src/locales/index.ts b/src/core/locales/index.ts
similarity index 100%
rename from src/locales/index.ts
rename to src/core/locales/index.ts
diff --git a/src/core/provider.tsx b/src/core/provider.tsx
new file mode 100644
index 0000000..de507fc
--- /dev/null
+++ b/src/core/provider.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+
+import type { FormsAdapter, FormsComponents, FormsServices } from "./adapter"
+import type { FormErrors } from "./errors"
+import type { FormsRouter } from "./router"
+import { html } from "../adapters/html"
+
+/** Who may do what, for `can` props (`ConditionalLink`, `NoItems`). Like Laravel's `Gate::allows`. */
+export type Authorize = (ability: string, argument?: unknown, guard?: string | null) => boolean
+
+/**
+ * App settings the Blade components read with `get_setting()`: `per_page`,
+ * `max_upload_file_size` and `max_image_file_size` (in KB), `default_lat`, `default_lng`, …
+ */
+export type FormsSettings = Record<string, unknown>
+
+export interface FormsConfig {
+  /** The UI framework adapter: `onu` from `@javaabu/forms/onu`, `createShadcnAdapter(…)`, or your own. Default: plain HTML. */
+  ui?: FormsAdapter
+  /** Replace single components of the adapter: `{ Select: MySelect }`. */
+  components?: Partial<FormsComponents>
+  /**
+   * How forms submit when they have no `onSubmit`: `inertia` from `@javaabu/forms/inertia`,
+   * `fetchRouter`, or your own. Default: a native browser submit.
+   */
+  router?: FormsRouter | null
+  /**
+   * Translates labels and titles generated from field names, like Blade's `trans()`.
+   * Default: `__()` from `@javaabu/i18n`.
+   */
+  translate?: (text: string) => string
+  /** CSRF token for `_token` inputs and uploads. Default: the `csrf-token` meta tag. */
+  csrfToken?: string | null
+  /** Old input for every form (Laravel's `session()->getOldInput()`). A form's `old` prop wins. */
+  old?: Record<string, unknown> | null
+  /**
+   * Validation errors for every form, keyed by field (`{ email: ["…"] }`) or by error bag
+   * (`{ createUser: { email: "…" } }`). A form's `errors` prop wins. The Inertia router reads page props itself.
+   */
+  errors?: FormErrors | Record<string, FormErrors> | null
+  /** Resolves `can` / `arg` / `guard` props. Without it, `can` checks fail closed. */
+  authorize?: Authorize
+  /** Values for `get_setting()` lookups. */
+  settings?: FormsSettings
+}
+
+export interface FormsContextValue {
+  components: FormsComponents
+  services: FormsServices
+  adapter: string
+  router: FormsRouter | null
+  translate?: (text: string) => string
+  csrfToken?: string | null
+  old: Record<string, unknown> | null
+  errors: FormErrors | Record<string, FormErrors> | null
+  authorize?: Authorize
+  settings: FormsSettings
+}
+
+/** The `get_setting()` defaults javaabu projects ship with. */
+export const DEFAULT_SETTINGS: FormsSettings = {
+  per_page: 20,
+  max_upload_file_size: 1024 * 10,
+  max_image_file_size: 1024 * 2,
+}
+
+const browserServices: FormsServices = {
+  confirm: async ({ title, description }) =>
+    typeof window === "undefined" ? false : window.confirm([title, description].filter(Boolean).join("\n\n")),
+  notify: (message) => {
+    if (typeof window !== "undefined") window.alert(message)
+  },
+}
+
+function resolve(parent: FormsContextValue | null, config: FormsConfig): FormsContextValue {
+  const base = parent ?? {
+    components: html.components as FormsComponents,
+    services: browserServices,
+    adapter: html.name,
+    router: null,
+    old: null,
+    errors: null,
+    settings: DEFAULT_SETTINGS,
+  }
+  const ui = config.ui
+  return {
+    components: { ...base.components, ...ui?.components, ...config.components } as FormsComponents,
+    services: {
+      confirm: ui?.confirm ?? base.services.confirm,
+      notify: ui?.notify ?? base.services.notify,
+    },
+    adapter: ui?.name ?? base.adapter,
+    router: config.router !== undefined ? config.router : base.router,
+    translate: config.translate ?? base.translate,
+    csrfToken: config.csrfToken !== undefined ? config.csrfToken : base.csrfToken,
+    old: config.old !== undefined ? config.old : base.old,
+    errors: config.errors !== undefined ? config.errors : base.errors,
+    authorize: config.authorize ?? base.authorize,
+    settings: { ...base.settings, ...config.settings },
+  }
+}
+
+const FormsContext = React.createContext<FormsContextValue | null>(null)
+
+export interface FormsProviderProps extends FormsConfig {
+  children?: React.ReactNode
+}
+
+/**
+ * App-wide configuration, the counterpart of `config/forms.php` and `get_setting()`:
+ * the UI adapter, component overrides, the router, old input, errors, settings.
+ * Optional: without it, components render plain HTML. Nested providers override
+ * their parent's values, so a part of the page can use other components.
+ */
+export function FormsProvider({ children, ...config }: FormsProviderProps) {
+  const parent = React.useContext(FormsContext)
+  const value = React.useMemo(
+    () => resolve(parent, config),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      parent,
+      config.ui,
+      config.components,
+      config.router,
+      config.translate,
+      config.csrfToken,
+      config.old,
+      config.errors,
+      config.authorize,
+      config.settings,
+    ],
+  )
+  return <FormsContext.Provider value={value}>{children}</FormsContext.Provider>
+}
+
+// Resolved on first use: the HTML adapter imports this module, so it may not be evaluated yet at load time.
+let fallback: FormsContextValue | undefined
+
+/** The resolved configuration. */
+export function useFormsConfig(): FormsContextValue {
+  return React.useContext(FormsContext) ?? (fallback ??= resolve(null, {}))
+}
+
+/** The components of the active adapter, with overrides and HTML fallbacks applied. */
+export function useUi(): FormsComponents {
+  return useFormsConfig().components
+}
+
+/** `confirm()` and `notify()` of the active adapter. */
+export function useFormsServices(): FormsServices {
+  return useFormsConfig().services
+}
+
+/** `get_setting($key)`. */
+export function useSetting<T = unknown>(key: string): T | undefined {
+  return useFormsConfig().settings[key] as T | undefined
+}
+
+/** The CSRF token from the provider or the `<meta name="csrf-token">` tag. */
+export function useCsrfToken(): string | null {
+  const { csrfToken } = useFormsConfig()
+  if (csrfToken !== undefined) return csrfToken
+  if (typeof document === "undefined") return null
+  return document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')?.content ?? null
+}
diff --git a/src/context/registry.ts b/src/core/registry.ts
similarity index 93%
rename from src/context/registry.ts
rename to src/core/registry.ts
index 6ea3fd2..6c6e128 100644
--- a/src/context/registry.ts
+++ b/src/core/registry.ts
@@ -21,6 +21,8 @@ export interface FieldEntry {
   value: unknown
   checked?: boolean
   disabled?: boolean
+  /** The field's label text, for error summaries. */
+  label?: string
 }
 
 /** What a watcher sees: the effective value and, for a single checkbox, whether it is checked. */
@@ -132,10 +134,22 @@ function lookupDom(selector: string): WatchedField {
   return { value: first.value, checked: !!first.value, found: true }
 }
 
+/** The label of the field with this name (dot or bracket notation), for error summaries. */
+function labelOf(name: string): string | undefined {
+  const dotted = name.replace(/\[(\w*)\]/g, ".$1").replace(/\.+$/, "")
+  for (const entry of entries.values()) {
+    if (!entry.name || !entry.label) continue
+    const own = entry.name.replace(/\[(\w*)\]/g, ".$1").replace(/\.+$/, "")
+    if (own === dotted || (entry.name.endsWith("[]") && dotted.startsWith(`${own}.`))) return entry.label
+  }
+  return undefined
+}
+
 export const registry = {
   subscribe,
   getVersion,
   lookup,
+  labelOf,
   set(key: symbol, entry: FieldEntry) {
     entries.set(key, entry)
     emit()
@@ -176,15 +190,15 @@ export const registry = {
 /** Publishes a field to the registry while it is mounted. */
 export function usePublishField(entry: FieldEntry | null) {
   const key = React.useMemo(() => Symbol("field"), [])
-  const { id, name, kind, value, checked, disabled } = entry ?? { kind: "value" as const, value: undefined }
+  const { id, name, kind, value, checked, disabled, label } = entry ?? { kind: "value" as const, value: undefined }
   const active = entry !== null
   const serialized = Array.isArray(value) ? JSON.stringify(value) : value
 
   React.useEffect(() => {
     if (!active) return
-    registry.set(key, { id, name, kind, value, checked, disabled })
+    registry.set(key, { id, name, kind, value, checked, disabled, label })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key, active, id, name, kind, serialized, checked, disabled])
+  }, [key, active, id, name, kind, serialized, checked, disabled, label])
 
   React.useEffect(() => () => registry.delete(key), [key])
 }
diff --git a/src/core/remote.ts b/src/core/remote.ts
new file mode 100644
index 0000000..a6e8866
--- /dev/null
+++ b/src/core/remote.ts
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+
+import { withQuery } from "../components/select-cascade"
+import { normalizeOptions } from "../support/options"
+import type { RemoteOptions, SelectOption } from "./adapter"
+
+export interface RemoteOptionsState {
+  options: SelectOption[]
+  loading: boolean
+  error: boolean
+}
+
+/**
+ * Searches a `Select2 isAjax` endpoint, for adapters without their own async select:
+ * `GET url?filter[search]=<query>&fields=id,name` (debounced), reading a JSON list
+ * or a resource collection's `data`.
+ */
+export function useRemoteOptions(remote: RemoteOptions | undefined, query: string, delay = 250): RemoteOptionsState {
+  const [state, setState] = React.useState<RemoteOptionsState>({ options: [], loading: false, error: false })
+  const active = !!remote && query.length >= (remote.minChars ?? 0)
+  const key = remote ? JSON.stringify([remote.url, remote.searchParam, remote.params, remote.dependsOn, query]) : ""
+
+  React.useEffect(() => {
+    if (!remote || !active) return
+    const controller = new AbortController()
+    const timer = setTimeout(() => {
+      setState((s) => ({ ...s, loading: true, error: false }))
+      fetch(withQuery(remote.url, { ...remote.params, ...(query ? { [remote.searchParam]: query } : {}) }), {
+        headers: { Accept: "application/json", "X-Requested-With": "XMLHttpRequest" },
+        credentials: "same-origin",
+        signal: controller.signal,
+      })
+        .then((response) => {
+          if (!response.ok) throw new Error(`HTTP ${response.status}`)
+          return response.json() as Promise<unknown>
+        })
+        .then((body) => {
+          const items = Array.isArray(body) ? body : ((body as { data?: unknown[] })?.data ?? [])
+          setState({
+            options: normalizeOptions(items as Record<string, unknown>[], {
+              idField: remote.valueKey,
+              nameField: remote.labelKey,
+            }),
+            loading: false,
+            error: false,
+          })
+        })
+        .catch((error: unknown) => {
+          if ((error as Error).name === "AbortError") return
+          setState({ options: [], loading: false, error: true })
+        })
+    }, delay)
+    return () => {
+      clearTimeout(timer)
+      controller.abort()
+    }
+    // `key` stands for `remote` and `query`.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, active, delay])
+
+  return active ? state : { options: [], loading: false, error: false }
+}
diff --git a/src/core/router.ts b/src/core/router.ts
new file mode 100644
index 0000000..2c010a1
--- /dev/null
+++ b/src/core/router.ts
@@ -0,0 +1,202 @@
+import { getValidationErrors, type FormErrors } from "./errors"
+
+export type HttpMethod = "get" | "post" | "put" | "patch" | "delete"
+
+/** A Laravel Wayfinder route or action: `store()`, `update(user)`. */
+export interface RouteDefinition {
+  url: string
+  method: string
+}
+
+/** Wayfinder's form variant: `update.form(user)` → `{ action: "/users/1?_method=PATCH", method: "post" }`. */
+export interface RouteFormDefinition {
+  action: string
+  method: string
+}
+
+/**
+ * What `Form action` accepts: a URL, a Wayfinder route object, or a Wayfinder
+ * route function. A function is called with the form's model, so
+ * `<Form model={user} action={update}>` posts to `update(user)`.
+ */
+export type FormAction =
+  string | RouteDefinition | RouteFormDefinition | ((model?: never) => RouteDefinition | RouteFormDefinition)
+
+export interface ResolvedAction {
+  url: string | undefined
+  /** The route's method, when it has one. */
+  method: HttpMethod | undefined
+}
+
+const METHODS: HttpMethod[] = ["get", "post", "put", "patch", "delete"]
+
+function toMethod(value: unknown): HttpMethod | undefined {
+  const m = typeof value === "string" ? value.toLowerCase() : ""
+  if (m === "head") return "get"
+  return (METHODS as string[]).includes(m) ? (m as HttpMethod) : undefined
+}
+
+/** Moves a `_method` query parameter (Wayfinder's `.form()` spoofing) into the method. */
+function extractSpoofedMethod(url: string): { url: string; method?: HttpMethod } {
+  const index = url.indexOf("?")
+  if (index === -1) return { url }
+  const params = new URLSearchParams(url.slice(index + 1))
+  const spoofed = toMethod(params.get("_method"))
+  if (!spoofed) return { url }
+  params.delete("_method")
+  const query = params.toString()
+  return { url: url.slice(0, index) + (query ? `?${query}` : ""), method: spoofed }
+}
+
+/** Resolves `Form action` to a URL and method. */
+export function resolveAction(action: FormAction | null | undefined, model?: unknown): ResolvedAction {
+  if (action === null || action === undefined) return { url: undefined, method: undefined }
+  if (typeof action === "string") return { url: action, method: undefined }
+  if (typeof action === "function") {
+    const call = action as (model?: unknown) => RouteDefinition | RouteFormDefinition
+    return resolveAction(model === undefined || model === null ? call() : call(model))
+  }
+  if ("url" in action && typeof action.url === "string") return { url: action.url, method: toMethod(action.method) }
+  if ("action" in action && typeof action.action === "string") {
+    const { url, method } = extractSpoofedMethod(action.action)
+    return { url, method: method ?? toMethod(action.method) }
+  }
+  return { url: undefined, method: undefined }
+}
+
+/** `PUT`, `PATCH` and `DELETE` are sent as `POST` with `_method`, as Laravel expects from HTML forms. */
+export function isSpoofed(method: HttpMethod): boolean {
+  return method === "put" || method === "patch" || method === "delete"
+}
+
+/** Options of an Inertia-style visit. Routers ignore what they don't support. */
+export interface VisitOptions {
+  preserveScroll?: boolean | "errors"
+  preserveState?: boolean | "errors"
+  replace?: boolean
+  only?: string[]
+  except?: string[]
+  headers?: Record<string, string>
+  /** Reset the form's fields after a successful submit. `true` for all of them, or field names. */
+  reset?: boolean | string[]
+  [option: string]: unknown
+}
+
+export interface SubmitRequest {
+  url: string
+  /** The real method. For `put` / `patch` / `delete`, `data` also carries `_method`. */
+  method: HttpMethod
+  data: FormData
+  form: HTMLFormElement
+  errorBag?: string
+  options: VisitOptions
+}
+
+export interface SubmitCallbacks {
+  onStart: () => void
+  /** Upload progress, 0–100. */
+  onProgress: (percentage: number) => void
+  onSuccess: (result?: unknown) => void
+  /** Validation failed: show these errors. */
+  onError: (errors: FormErrors, message?: string | null) => void
+  /** Anything else went wrong (network, server error). */
+  onFailure: (error: unknown) => void
+  onFinish: () => void
+}
+
+/**
+ * How forms submit and where page-level errors come from. `inertia` from
+ * `@javaabu/forms/inertia` and `fetchRouter` implement it; so can your own.
+ */
+export interface FormsRouter {
+  name: string
+  submit: (request: SubmitRequest, callbacks: SubmitCallbacks) => void
+  /** A hook: the current page's errors, every bag (Inertia's `usePage().props.errors`). */
+  usePageErrors?: () => unknown
+  /** A hook: the current page's old input. */
+  useOldInput?: () => Record<string, unknown> | null | undefined
+}
+
+/** `FormData` as an object; repeated names (checkbox groups, `tags[]`) become arrays. */
+export type FormValues = Record<string, FormDataEntryValue | FormDataEntryValue[]>
+
+export function formDataToObject(data: FormData): FormValues {
+  const out: FormValues = {}
+  data.forEach((value, key) => {
+    const existing = out[key]
+    if (existing === undefined) out[key] = value
+    else out[key] = Array.isArray(existing) ? [...existing, value] : [existing, value]
+  })
+  return out
+}
+
+/** Appends `FormData` to a URL's query string, for GET submits. Files are skipped. */
+export function withFormData(url: string, data: FormData): string {
+  const params = new URLSearchParams()
+  data.forEach((value, key) => {
+    if (typeof value === "string") params.append(key, value)
+  })
+  const query = params.toString()
+  return query ? `${url}${url.includes("?") ? "&" : "?"}${query}` : url
+}
+
+function readCookie(name: string): string | undefined {
+  if (typeof document === "undefined") return undefined
+  const match = document.cookie.split("; ").find((c) => c.startsWith(`${name}=`))
+  return match ? decodeURIComponent(match.slice(name.length + 1)) : undefined
+}
+
+/**
+ * Submits with `XMLHttpRequest` (for upload progress) and reads Laravel's JSON
+ * responses: a 422 shows the validation errors, a 2xx calls `onSuccess` with
+ * the parsed body. Navigating afterwards is up to `Form onSuccess`.
+ */
+export const fetchRouter: FormsRouter = {
+  name: "fetch",
+  submit({ url, method, data, options }, callbacks) {
+    const xhr = new XMLHttpRequest()
+    const target = method === "get" ? withFormData(url, data) : url
+    xhr.open(method === "get" ? "GET" : "POST", target)
+    xhr.setRequestHeader("Accept", "application/json")
+    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
+    const token = data.get("_token")
+    if (typeof token === "string" && token) xhr.setRequestHeader("X-CSRF-TOKEN", token)
+    else {
+      const xsrf = readCookie("XSRF-TOKEN")
+      if (xsrf) xhr.setRequestHeader("X-XSRF-TOKEN", xsrf)
+    }
+    for (const [key, value] of Object.entries(options.headers ?? {})) xhr.setRequestHeader(key, value)
+    xhr.withCredentials = true
+    xhr.upload?.addEventListener("progress", (event) => {
+      if (event.lengthComputable) callbacks.onProgress(Math.round((event.loaded / event.total) * 100))
+    })
+
+    const body = (): unknown => {
+      const type = xhr.getResponseHeader("content-type") ?? ""
+      if (!type.includes("json")) return xhr.responseText
+      try {
+        return JSON.parse(xhr.responseText)
+      } catch {
+        return xhr.responseText
+      }
+    }
+
+    xhr.addEventListener("load", () => {
+      const parsed = body()
+      if (xhr.status >= 200 && xhr.status < 300) callbacks.onSuccess(parsed)
+      else {
+        const payload = xhr.status === 422 ? getValidationErrors(parsed) : null
+        if (payload) callbacks.onError(payload.errors, payload.message)
+        else callbacks.onFailure({ status: xhr.status, body: parsed })
+      }
+      callbacks.onFinish()
+    })
+    xhr.addEventListener("error", () => {
+      callbacks.onFailure(new Error("Network error"))
+      callbacks.onFinish()
+    })
+
+    callbacks.onStart()
+    xhr.send(method === "get" ? null : data)
+  },
+}
diff --git a/src/core/strings.ts b/src/core/strings.ts
new file mode 100644
index 0000000..452a7a4
--- /dev/null
+++ b/src/core/strings.ts
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { makeReplacements } from "@javaabu/i18n"
+import { useTranslation } from "@javaabu/i18n/react"
+
+import { locales, en, type FormsMessages } from "./locales"
+import { useFormsConfig } from "./provider"
+
+/** The namespace and group of the package lines, as in javaabu/forms: `forms::strings.nothing_selected`. */
+export const STRINGS_PREFIX = "forms::strings."
+
+export type FormsMessageKey = keyof FormsMessages
+export type Replace = Record<string, string | number>
+
+/** The bundled line for a locale (`dv`, `dv_MV`, `en-GB`), falling back to English. */
+export function bundledLine(key: FormsMessageKey, locale: string): string {
+  const code = locale.split(/[-_]/)[0]?.toLowerCase() ?? "en"
+  return (locales[code] ?? en)[key] ?? en[key]
+}
+
+/**
+ * The package strings and the label translator, through `@javaabu/i18n`.
+ *
+ * `t("nothing_selected")` looks up `forms::strings.nothing_selected`. Lines your app
+ * loads (e.g. `lang/vendor/forms/dv/strings.php` through js-localization) win; the
+ * bundled `en` / `dv` lines are the fallback. `translate("Company Name")` is `__()`,
+ * like Blade's `trans()` on generated labels, unless `FormsProvider translate` is set.
+ */
+export function useFormsTranslation() {
+  const { __, has, locale, direction } = useTranslation()
+  const { translate: custom } = useFormsConfig()
+
+  const t = React.useCallback(
+    (key: FormsMessageKey, replace: Replace = {}): string => {
+      const full = STRINGS_PREFIX + key
+      if (has(full)) return String(__(full, replace))
+      return makeReplacements(bundledLine(key, locale), replace)
+    },
+    [__, has, locale],
+  )
+
+  const translate = React.useCallback(
+    (text: string) => (!text ? text : custom ? custom(text) : String(__(text))),
+    [custom, __],
+  )
+
+  return { t, translate, locale, direction }
+}
diff --git a/src/core/thaana.ts b/src/core/thaana.ts
new file mode 100644
index 0000000..48e7d15
--- /dev/null
+++ b/src/core/thaana.ts
@@ -0,0 +1,53 @@
+import type * as React from "react"
+
+/**
+ * Typing Thaana from a Latin keyboard, for adapters whose inputs don't do it
+ * themselves. Phonetic layout from JTK (Javascript Thaana Keyboard) 4.2.2,
+ * Copyright (c) 2014 Jawish Hameed, MIT licence: https://github.com/jawish/jtk
+ */
+
+const FROM = "qwertyuiop[]\\asdfghjkl;'zxcvbnm,./QWERTYUIOP{}|ASDFGHJKL:\"ZXCVBNM<>?()"
+const PHONETIC = "ްއެރތޔުިޮޕ][\\ަސދފގހޖކލ؛'ޒ×ޗވބނމ،./ޤޢޭޜޓޠޫީޯ÷}{|ާށޑﷲޣޙޛޚޅ:\"ޡޘޝޥޞޏޟ><؟)("
+
+/** Latin key → Thaana character (phonetic layout). */
+export const THAANA_KEYMAP: Readonly<Record<string, string>> = (() => {
+  const keys = Array.from(FROM)
+  const chars = Array.from(PHONETIC)
+  const map: Record<string, string> = {}
+  keys.forEach((key, i) => {
+    if (key !== chars[i]) map[key] = chars[i]!
+  })
+  return Object.freeze(map)
+})()
+
+/** Converts Latin text typed on the phonetic layout to Thaana: `"dhivehi"` keys → `"ދިވެހި"`. */
+export function toThaana(text: string): string {
+  return Array.from(text, (char) => THAANA_KEYMAP[char] ?? char).join("")
+}
+
+type TextControl = HTMLInputElement | HTMLTextAreaElement
+
+/** Sets a control's value so React's `onChange` sees it, as if the user typed it. */
+function setNativeValue(el: TextControl, value: string) {
+  const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype
+  Object.getOwnPropertyDescriptor(proto, "value")?.set?.call(el, value)
+  el.dispatchEvent(new Event("input", { bubbles: true }))
+}
+
+/**
+ * A `keydown` handler that types the Thaana character for a Latin key, at the
+ * caret, and fires `onChange` as typing would. Spread it on inputs with `thaana`:
+ * `<input onKeyDown={thaana ? thaanaKeyDown : undefined} />`.
+ */
+export function thaanaKeyDown(event: React.KeyboardEvent<TextControl>): void {
+  if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) return
+  const char = THAANA_KEYMAP[event.key]
+  if (!char) return
+  const el = event.currentTarget
+  const start = el.selectionStart ?? el.value.length
+  const end = el.selectionEnd ?? start
+  event.preventDefault()
+  setNativeValue(el, el.value.slice(0, start) + char + el.value.slice(end))
+  const caret = start + char.length
+  el.setSelectionRange?.(caret, caret)
+}
diff --git a/src/editor/index.tsx b/src/editor/index.tsx
deleted file mode 100644
index 3d40f37..0000000
--- a/src/editor/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { WysiwygEditor, type WysiwygEditorProps } from "@javaabu/onu/editor"
-
-import { useFieldValue } from "../context/binding"
-import { usePublishField } from "../context/registry"
-import {
-  FieldWrapper,
-  splitFieldProps,
-  useFieldNames,
-  type FieldProps,
-  type PlaceholderProps,
-} from "../components/field"
-import { toFormString } from "../support/data"
-
-export interface WysiwygProps
-  extends
-    FieldProps,
-    PlaceholderProps,
-    Omit<WysiwygEditorProps, "name" | "id" | "value" | "defaultValue" | "placeholder" | "disabled" | "format"> {
-  /** Controlled HTML. */
-  value?: string | null
-}
-
-/**
- * `<x-forms::wysiwyg>` (and `<x-forms::textarea wysiwyg>`): a rich text editor
- * that submits HTML. Uses Onu's Tiptap editor instead of TinyMCE.
- */
-export function Wysiwyg(props: WysiwygProps) {
-  const { field, rest } = splitFieldProps(props)
-  const { value, placeholder, showPlaceholder, onChange, ...editorProps } = rest
-  const names = useFieldNames({ ...field, placeholder, showPlaceholder })
-  const initial = toFormString(useFieldValue(field.name, field.model, field.default))
-  const controlled = value !== undefined
-  const [current, setCurrent] = React.useState(initial)
-
-  usePublishField({
-    id: names.id,
-    name: field.name,
-    kind: "value",
-    value: controlled ? value : current,
-    disabled: field.disabled,
-  })
-
-  return (
-    <FieldWrapper {...field} id={names.id} label={names.label}>
-      <WysiwygEditor
-        {...editorProps}
-        key={controlled ? undefined : initial}
-        id={names.id}
-        name={field.name}
-        format="html"
-        placeholder={names.placeholder}
-        disabled={field.disabled}
-        {...(controlled ? { value: value ?? "" } : { defaultValue: initial })}
-        onChange={(next, editor) => {
-          setCurrent(typeof next === "string" ? next : "")
-          onChange?.(next, editor)
-        }}
-      />
-    </FieldWrapper>
-  )
-}
diff --git a/src/html.ts b/src/html.ts
new file mode 100644
index 0000000..268a1b5
--- /dev/null
+++ b/src/html.ts
@@ -0,0 +1,2 @@
+// `@javaabu/forms/html`: plain HTML elements. The default when no adapter is set.
+export { html, pageWindow } from "./adapters/html"
diff --git a/src/index.ts b/src/index.ts
index d5fe4fd..00cdb5d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,8 +2,27 @@
 //   import * as Forms from "@javaabu/forms"
 //   <Forms.Form model={user}><Forms.Text name="name" /></Forms.Form>
 
-// Configuration, binding and the field registry
-export * from "./context/forms-provider"
+// Configuration and adapters
+export {
+  FormsProvider,
+  useFormsConfig,
+  useUi,
+  useFormsServices,
+  useSetting,
+  useCsrfToken,
+  DEFAULT_SETTINGS,
+  type FormsProviderProps,
+  type FormsConfig,
+  type Authorize,
+  type FormsSettings,
+} from "./core/provider"
+export * from "./core/adapter"
+export { useFormsTranslation, STRINGS_PREFIX, type FormsMessageKey } from "./core/strings"
+export { en, dv, type FormsMessages } from "./core/locales"
+export { thaanaKeyDown, toThaana, THAANA_KEYMAP } from "./core/thaana"
+export { useRemoteOptions, type RemoteOptionsState } from "./core/remote"
+
+// Binding, errors, routing
 export {
   Model,
   OldInput,
@@ -13,25 +32,69 @@ export {
   getBoundValue,
   type ModelProps,
   type OldInputProps,
-} from "./context/binding"
-export { useWatchField, type WatchedField } from "./context/registry"
-export { en, dv, type FormsMessages } from "./locales"
+} from "./core/binding"
+export {
+  ValidationError,
+  getValidationErrors,
+  readValidationErrors,
+  errorsFor,
+  selectErrorBag,
+  toDotNotation,
+  focusFirstInvalid,
+  type FormErrors,
+  type ValidationPayload,
+} from "./core/errors"
+export { useFormState, useFieldErrors, type FormState, type FormStatus } from "./core/form-context"
+export {
+  fetchRouter,
+  resolveAction,
+  formDataToObject,
+  type FormsRouter,
+  type FormAction,
+  type RouteDefinition,
+  type RouteFormDefinition,
+  type SubmitRequest,
+  type SubmitCallbacks,
+  type VisitOptions,
+  type HttpMethod,
+  type FormValues,
+} from "./core/router"
+export { useWatchField, type WatchedField } from "./core/registry"
 
 // Form scaffolding
-export { Form, FormGroup, Label, LabelRequired, InputHelp, Errors } from "./components/form"
-export type { FormProps, FormGroupProps, LabelProps, ErrorsProps } from "./components/form"
-export { FieldWrapper, useFieldNames, type FieldProps, type PlaceholderProps } from "./components/field"
-export { Button, Submit, LinkButton, ButtonGroup, colorToVariant } from "./components/buttons"
-export type { ButtonProps, ButtonColor, LinkButtonProps, ButtonGroupProps } from "./components/buttons"
+export {
+  Form,
+  ErrorSummary,
+  FormGroup,
+  Label,
+  LabelRequired,
+  InputHelp,
+  Errors,
+  useFormStatus,
+} from "./components/form"
+export type {
+  FormProps,
+  InertiaFormLike,
+  FormSubmitHandler,
+  ErrorSummaryProps,
+  FormGroupProps,
+  LabelProps,
+  ErrorsProps,
+} from "./components/form"
+export { useField, useFieldNames, type FieldProps, type PlaceholderProps } from "./components/field"
+export { Button, Submit, LinkButton, ButtonGroup } from "./components/buttons"
+export type { ButtonProps, LinkButtonProps, ButtonGroupProps } from "./components/buttons"
 
 // Inputs
 export { Input, Text, Email, Password, Number, Tel, Url, Hidden, Latitude, Longitude } from "./components/inputs"
 export type { InputProps, NumberProps, HiddenProps } from "./components/inputs"
 export { Textarea, type TextareaProps } from "./components/textarea"
+export { Wysiwyg, type WysiwygProps } from "./components/wysiwyg"
 export { Checkbox, Radio, type CheckboxProps, type RadioProps } from "./components/checkbox"
 export { Date, Datetime, Time, type DateProps, type DatetimeProps, type TimeProps } from "./components/dates"
 export { Select, Select2, type SelectProps, type Select2Props } from "./components/select"
 export { File, FileUpload, Image, ImageUpload, type FileProps, type ImageProps } from "./components/files"
+export { MapInput, type MapInputProps } from "./components/map-input"
 
 // Display
 export {
@@ -72,7 +135,7 @@ export type {
   TextEntryProps,
   InfolistProps,
 } from "./components/display"
-export { FormattedValue, type FormattedValueProps } from "./components/format"
+export { FormattedValue, colorToTone, type FormattedValueProps } from "./components/format"
 
 // Listing pages
 export {
@@ -101,6 +164,8 @@ export type {
   SearchFormProps,
   NoItemsProps,
   PaginationProps,
+  LaravelPaginationMeta,
+  LaravelResourceCollection,
 } from "./components/listing"
 
 // Helpers
diff --git a/src/locales/dv.ts b/src/locales/dv.ts
deleted file mode 100644
index 19fb412..0000000
--- a/src/locales/dv.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { FormsMessages } from "./en"
-
-/** Dhivehi strings. The first group is javaabu/forms `lang/dv/strings.php`. */
-export const dv: FormsMessages = {
-  requiredText: "*",
-  nothingSelected: "އެއްވެސް އެއްޗެއް ޙިޔާރުނުކޮށް",
-  blank: "-",
-  yes: "އާނ",
-  no: "ނޫން",
-  tableArraySeparator: "، ",
-  fileinputSelectFile: "ފައިލް ސެލެކްޓްކޮށްލާ",
-  fileinputUploadFile: "ފައިލް އަޕްލޯޑްކުރޭ",
-  fileinputChangeFile: "ބަދަލުކޮށްލާ",
-  fileinputRemoveFile: "ފުހެލާ",
-  fileinputNothingSelected: "އެއްވެސް ފައިލެއް ސެލްކްޓްނުކޮށް.",
-  imageinputSelectImage: "އިމޭޖެއް ސެލެކްޓްކުރަން ފިތާލާ",
-  latitude: "ލެޓިޓިއުޑް",
-  longitude: "ލޯންޖިޓިއުޑް",
-  radius: "ރޭޑިއަސް",
-  metersAbbr: "m",
-  kmAbbr: "km",
-  boundary: "ބައުންޑަރީ",
-  fileHint: "ހަމައެކަނި :types ވައްތަރުގެ :size އަށް ވުރެ ބޮޑު ނޫން ފައިލް.",
-  imageHint: "ރަނގަޅުވާނީ :widthpx x :heightpx.",
-  textListSeparator: "، ",
-  textListSeparatorLastGlue: " އަދި ",
-  mapSearchString: "ހޯދާ...",
-  searchFormPlaceholder: "ހޯދާ...",
-
-  kb: "KB",
-  mb: "MB",
-  gb: "GB",
-
-  bulkAction: "އެއްފަހަރާ ކުރާ ކަންކަން",
-  apply: "ހިންގާ",
-  filter: "ފިލްޓަރު ކުރޭ",
-  export: "އެކްސްޕޯޓްކުރޭ",
-  clear: "ފޮހެލާ",
-  selectAll: "ހުރިހާ އެއްޗެއް ޚިޔާރުކުރޭ",
-  selectRow: ":name ޚިޔާރުކުރޭ",
-  createNew: "އައު އެއްޗެއް ހަދާ",
-  noItemsTitle: "މިތާ އަދި އެއްވެސް އެއްޗެއް ނެތް.",
-  noItemsMessage: "އައު :model_type ހަދާލަމާ.",
-  items: "އެއްޗެހި",
-  pagination: "ސަފްހާތައް",
-  previous: "ކުރީގެ",
-  next: "ކުރިއަށް",
-  sortBy: ":label އިން ތަރުތީބުކުރޭ",
-
-  loading: "ލޯޑުވަނީ…",
-  errorLoadingOptions: "އޮޕްޝަންތައް ލޯޑެއް ނުކުރެވުނު",
-  uploading: "އަޕްލޯޑްކުރަނީ…",
-  removing: "ފޮހެލަނީ…",
-  areYouSure: "ކަށަވަރުތަ؟",
-  removeFileConfirm: "މި ފައިލް ފޮހެލުމަށްފަހު އަނބުރާ ނުގެނެވޭނެ!",
-  removeFileConfirmButton: "އާން، ފޮހެލާ!",
-  cancel: "ކެންސަލްކުރޭ",
-  uploadError: "ފައިލް އަޕްލޯޑްކުރުމުގައި މައްސަލައެއް ދިމާވެއްޖެ.",
-  removeError: "ފައިލް ފޮހެލުމުގައި މައްސަލައެއް ދިމާވެއްޖެ.",
-  fileTooLarge: "ފައިލްގެ ސައިޒު :size MB އަށްވުރެ ބޮޑުވެގެން ނުވާނެ",
-  fileTypeNotAllowed: "ހަމައެކަނި :accept ފައިލް.",
-  confirmText: "މިކަން ކުރަން ބޭނުންވާކަން ކަށަވަރުކޮށްލަން.",
-  confirmButton: "އާން، ކުރިއަށް!",
-  deleteConfirmText: "މި ފޮހެލުމަށްފަހު އަނބުރާ ބަދަލެއް ނުކުރެވޭނެ!",
-  deleteConfirmButton: "އާން، ފޮހެލާ!",
-}
diff --git a/src/locales/en.ts b/src/locales/en.ts
deleted file mode 100644
index a458938..0000000
--- a/src/locales/en.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * English strings. The first group mirrors javaabu/forms `lang/en/strings.php`;
- * placeholders use Laravel's `:name` style so translations can be copied across.
- */
-export const en = {
-  requiredText: "*",
-  nothingSelected: "Nothing Selected",
-  blank: "-",
-  yes: "Yes",
-  no: "No",
-  tableArraySeparator: ", ",
-  fileinputSelectFile: "Select file",
-  fileinputUploadFile: "Upload file",
-  fileinputChangeFile: "Change",
-  fileinputRemoveFile: "Remove",
-  fileinputNothingSelected: "No file selected.",
-  imageinputSelectImage: "Click to select an image",
-  latitude: "Latitude",
-  longitude: "Longitude",
-  radius: "Radius",
-  metersAbbr: "m",
-  kmAbbr: "km",
-  boundary: "Boundary",
-  fileHint: "Only :types files of max :size allowed.",
-  imageHint: "Recommended :widthpx x :heightpx.",
-  textListSeparator: ", ",
-  textListSeparatorLastGlue: " and ",
-  mapSearchString: "Search...",
-  searchFormPlaceholder: "Search...",
-
-  // File sizes (format_file_size)
-  kb: "KB",
-  mb: "MB",
-  gb: "GB",
-
-  // Component text from the Blade views
-  bulkAction: "Bulk Action",
-  apply: "Apply",
-  filter: "Filter",
-  export: "Export",
-  clear: "Clear",
-  selectAll: "Select All",
-  selectRow: "Select :name",
-  createNew: "Create New",
-  noItemsTitle: "It's a bit lonely here.",
-  noItemsMessage: "Let's create some new :model_type.",
-  items: "items",
-  pagination: "Pagination",
-  previous: "Previous",
-  next: "Next",
-  sortBy: "Sort by :label",
-
-  // js-utilities messages
-  loading: "Loading...",
-  errorLoadingOptions: "Error Loading Options",
-  uploading: "Uploading...",
-  removing: "Removing...",
-  areYouSure: "Are you sure?",
-  removeFileConfirm: "You will not be able to undo deleting this file!",
-  removeFileConfirmButton: "Yes, remove it!",
-  cancel: "Cancel",
-  uploadError: "An error occurred while uploading the file.",
-  removeError: "An error occurred while removing the file.",
-  fileTooLarge: "File size cannot be greater than :size MB",
-  fileTypeNotAllowed: "Only :accept files are allowed.",
-  confirmText: "Just checking if you wanted to really do this.",
-  confirmButton: "Yes, continue!",
-  deleteConfirmText: "You will not be able to undo this delete operation!",
-  deleteConfirmButton: "Yes, delete it!",
-}
-
-export type FormsMessages = { [K in keyof typeof en]: string }
diff --git a/src/onu-editor.ts b/src/onu-editor.ts
new file mode 100644
index 0000000..67664c3
--- /dev/null
+++ b/src/onu-editor.ts
@@ -0,0 +1,2 @@
+// `@javaabu/forms/onu/editor`: Onu's rich text editor for `Wysiwyg`.
+export { onuEditor } from "./adapters/onu/editor"
diff --git a/src/onu-maps.ts b/src/onu-maps.ts
new file mode 100644
index 0000000..dcca6f3
--- /dev/null
+++ b/src/onu-maps.ts
@@ -0,0 +1,2 @@
+// `@javaabu/forms/onu/maps`: Onu's maps for `MapInput`.
+export { onuMaps } from "./adapters/onu/maps"
diff --git a/src/onu.ts b/src/onu.ts
new file mode 100644
index 0000000..8eb9231
--- /dev/null
+++ b/src/onu.ts
@@ -0,0 +1,2 @@
+// `@javaabu/forms/onu`: the Onu adapter. `<FormsProvider ui={onu}>`.
+export { onu, colorToVariant } from "./adapters/onu"
diff --git a/src/support/options.ts b/src/support/options.ts
index ba74d2e..20af34b 100644
--- a/src/support/options.ts
+++ b/src/support/options.ts
@@ -1,5 +1,5 @@
 import * as React from "react"
-import type { ChoiceOption } from "@javaabu/onu"
+import type { SelectOption as ChoiceOption } from "../core/adapter"
 
 import { dataGet, isNil, toFormString, wrap } from "./data"
 import { snake } from "./str"
@@ -10,7 +10,7 @@ import { snake } from "./str"
  * - `["a", "b"]`: a PHP list, so the values are the indexes `0`, `1` (as in Blade);
  * - `[[10, "Ten"], [5, "Five"]]`: ordered pairs, when key order matters (JS sorts numeric object keys);
  * - `[{ id: 1, name: "Malé" }]`: records (an Eloquent collection), read with `idField` / `nameField`;
- * - `[{ value: "1", label: "Malé" }]`: Onu `ChoiceOption`s.
+ * - `[{ value: "1", label: "Malé" }]`: `SelectOption`s.
  */
 export type OptionsInput =
   | Record<string, React.ReactNode>
@@ -38,7 +38,7 @@ function isChoiceOption(item: Record<string, unknown>) {
   return "value" in item && "label" in item
 }
 
-/** Normalizes any `OptionsInput` to Onu `ChoiceOption`s (string values). */
+/** Normalizes any `OptionsInput` to `SelectOption`s (string values). */
 export function normalizeOptions(options: OptionsInput | null | undefined, fields: OptionFields = {}): ChoiceOption[] {
   if (!options) return []
   const nameField = fields.nameField || "name"
diff --git a/vite.config.ts b/vite.config.ts
index 5700297..933aef8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,8 +14,10 @@ const isExternal = (id: string) =>
 /** Library entry points, mirrored by package.json `exports`. */
 export const entries: Record<string, string> = {
   index: "src/index.ts",
-  "editor/index": "src/editor/index.tsx",
-  "maps/index": "src/maps/index.tsx",
+  html: "src/html.ts",
+  onu: "src/onu.ts",
+  "onu-editor": "src/onu-editor.ts",
+  "onu-maps": "src/onu-maps.ts",
 }
 
 const output = {

From d134eb57fd72b32ce55b678df2d455aea58ade3d Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 13:08:18 +0500
Subject: [PATCH 03/18] Adapter contract, HTML base adapter and conformance
 test kit

@javaabu/forms/testing registers conformance tests for any adapter; the
HTML and Onu adapters pass them. Radios now sync their group on click so
controlled groups update together. Docs: docs/advanced-usage/adapters.md.

Closes #3, closes #4, closes #6

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/adapter-test-kit.md        |   5 +
 docs/advanced-usage/_category_.json   |  11 +
 docs/advanced-usage/adapters.md       | 140 +++++++++
 examples/html.html                    |  13 +
 examples/html/main.tsx                |  13 +
 examples/html/styles.css              |  90 ++++++
 examples/index.html                   |   4 +
 examples/vite.config.ts               |   2 +-
 package.json                          |  11 +-
 src/adapters/html/html.test.tsx       |   4 +
 src/adapters/onu/conformance.test.tsx |   6 +
 src/components/checkbox.tsx           |  16 +-
 src/examples.test.tsx                 |  26 ++
 src/testing.ts                        |   2 +
 src/testing/index.tsx                 | 416 ++++++++++++++++++++++++++
 vite.config.ts                        |   4 +-
 16 files changed, 754 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/adapter-test-kit.md
 create mode 100644 docs/advanced-usage/_category_.json
 create mode 100644 docs/advanced-usage/adapters.md
 create mode 100644 examples/html.html
 create mode 100644 examples/html/main.tsx
 create mode 100644 examples/html/styles.css
 create mode 100644 src/adapters/html/html.test.tsx
 create mode 100644 src/adapters/onu/conformance.test.tsx
 create mode 100644 src/examples.test.tsx
 create mode 100644 src/testing.ts
 create mode 100644 src/testing/index.tsx

diff --git a/.changeset/adapter-test-kit.md b/.changeset/adapter-test-kit.md
new file mode 100644
index 0000000..fed57ba
--- /dev/null
+++ b/.changeset/adapter-test-kit.md
@@ -0,0 +1,5 @@
+---
+"@javaabu/forms": minor
+---
+
+New `@javaabu/forms/testing`: `testAdapter(myAdapter)` runs conformance tests that render every component through an adapter and check labels, values, native submission, errors and ARIA. The adapter contract is typed (`defineAdapter`, `FormsComponents` and a `…SlotProps` type per slot) and documented in `docs/advanced-usage/adapters.md`. `@testing-library/react` is an optional peer dependency.
diff --git a/docs/advanced-usage/_category_.json b/docs/advanced-usage/_category_.json
new file mode 100644
index 0000000..88a4e51
--- /dev/null
+++ b/docs/advanced-usage/_category_.json
@@ -0,0 +1,11 @@
+{
+  "position": 1.4,
+  "label": "Advanced Usage",
+  "collapsible": true,
+  "collapsed": false,
+  "link": {
+    "type": "generated-index",
+    "slug": "/forms/_categories/advanced-usage",
+    "description": "Adapters for UI frameworks, Inertia, Wayfinder, routers and custom submission"
+  }
+}
diff --git a/docs/advanced-usage/adapters.md b/docs/advanced-usage/adapters.md
new file mode 100644
index 0000000..7cb03c5
--- /dev/null
+++ b/docs/advanced-usage/adapters.md
@@ -0,0 +1,140 @@
+---
+title: UI adapters
+sidebar_position: 1
+---
+
+The components don't draw anything themselves. Each one works out its name, id, label, value, errors and ARIA attributes, then renders a **slot** of the active **adapter**. An adapter maps slots to a UI framework's components.
+
+| Adapter         | Import                                      | Notes                                                       |
+| --------------- | ------------------------------------------- | ----------------------------------------------------------- |
+| HTML (default)  | `html` from `@javaabu/forms/html`           | Plain, unstyled elements with `data-slot` attributes        |
+| Onu             | `onu` from `@javaabu/forms/onu`             | Javaabu's React UI library                                  |
+| Onu editor      | `onuEditor` from `@javaabu/forms/onu/editor` | Onu's Tiptap editor for `Wysiwyg`                           |
+| Onu maps        | `onuMaps` from `@javaabu/forms/onu/maps`    | Onu's Google Maps pickers for `MapInput`                    |
+| shadcn/ui       | `createShadcnAdapter()` from `@javaabu/forms/shadcn` | Made from your app's own shadcn components ([shadcn/ui](./shadcn)) |
+
+# Choosing an adapter
+
+```tsx
+import { FormsProvider, mergeAdapters } from "@javaabu/forms"
+import { onu } from "@javaabu/forms/onu"
+import { onuEditor } from "@javaabu/forms/onu/editor"
+
+const ui = mergeAdapters(onu, onuEditor)
+
+export function App({ children }) {
+  return <FormsProvider ui={ui}>{children}</FormsProvider>
+}
+```
+
+`mergeAdapters()` combines adapters slot by slot; later ones win. Define the merged adapter once, outside your components, so it keeps its identity.
+
+Any slot an adapter leaves out renders with the HTML adapter, so an adapter can be partial.
+
+# Replacing single components
+
+Pass `components` to a `FormsProvider` (for the app or a part of the page), or to one `Form`:
+
+```tsx
+import { FormsProvider, type SelectSlotProps } from "@javaabu/forms"
+
+function CountrySelect(props: SelectSlotProps) {
+  // Your own select. It gets the resolved options, value, name, id and ARIA props.
+  return <MyFancySelect {...props} />
+}
+
+<FormsProvider ui={onu} components={{ Select: CountrySelect }}>…</FormsProvider>
+
+<Form action={store()} components={{ Select: CountrySelect }}>…</Form>
+```
+
+The order is: `components` of the nearest provider or form, then the `ui` adapter, then the HTML adapter.
+
+# Writing an adapter
+
+An adapter is a plain object. Type it with `defineAdapter()`:
+
+```tsx
+import { defineAdapter, type InputSlotProps, type FieldSlotProps } from "@javaabu/forms"
+import { Input } from "my-ui"
+
+function MyInput({ prepend, append, thaana, thaanaToggle, ...props }: InputSlotProps) {
+  // `props` are native <input> attributes: name, id, type, value, onChange, required, aria-*…
+  return <Input {...props} leading={prepend} trailing={append} />
+}
+
+function MyField({ id, label, hideLabel, help, helpId, errors, errorId, children }: FieldSlotProps) {
+  return (
+    <div className="field">
+      {label ? (
+        <label htmlFor={id} className={hideLabel ? "sr-only" : undefined}>
+          {label}
+        </label>
+      ) : null}
+      {children}
+      {help ? <p id={helpId}>{help}</p> : null}
+      {errors.length ? (
+        <div id={errorId} aria-live="polite">
+          {errors.map((e) => <p key={e}>{e}</p>)}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export const myUi = defineAdapter({
+  name: "my-ui",
+  components: { Input: MyInput, Field: MyField },
+  // Optional: dialogs and notifications for file uploads.
+  confirm: (options) => myConfirm(options),
+  notify: (message, { type } = {}) => myToast(message, type),
+})
+```
+
+The source of the HTML adapter (`src/adapters/html/index.tsx`) is the reference: every slot, in plain elements.
+
+## Rules
+
+1. **Controlled values.** Value slots get `value` (or `checked`) and report changes with `onValueChange` / `onCheckedChange`. `Input` and `Textarea` get native props with a controlled `value` and an `onChange`: spread them onto the element. Don't keep your own copy of the value.
+2. **Native submit works.** A control with a `name` puts its value into the form's `FormData` under that name, with a native input or a hidden one. A multiple `Select` gets a name that ends in `[]`; submit one entry per value. A `name` of `""` means "don't submit" (uploading file inputs).
+3. **ARIA on the focusable element.** Put `id`, `aria-invalid` and `aria-describedby` on the element that takes focus, so labels, errors and "focus the first invalid field" work.
+4. **The label is ready.** `Field`'s `label` already includes the required marker. Render it inside a `<label htmlFor={id}>`. With `hideLabel`, hide it visually but keep it for screen readers.
+5. **Logical CSS.** Use `ms-`/`pe-`/`start-`, not `left`/`right`, so the adapter works in Dhivehi (RTL).
+6. **Thaana.** When `Input` or `Textarea` gets `thaana`, let users type Thaana: use your kit's support, or `onKeyDown={thaanaKeyDown}` from `@javaabu/forms`.
+
+## Slots
+
+| Slot | Props type | Renders |
+| --- | --- | --- |
+| `Form` | `FormSlotProps` | The `<form>` (native props, plus `processing`) |
+| `Field` | `FieldSlotProps` | Label, control, help text and errors |
+| `Label`, `RequiredMarker`, `HelpText`, `FieldErrors` | `…SlotProps` | The parts of a field (the HTML `Field` uses these slots) |
+| `ErrorSummary` | `ErrorSummarySlotProps` | The error list at the top of a form. Call `onSelect(name)` from each entry |
+| `Input` | `InputSlotProps` | Text-like `<input>`s: `text`, `email`, `password`, `url`, `tel`, `search` |
+| `Textarea` | `TextareaSlotProps` | `<textarea>` |
+| `Number` | `NumberSlotProps` | A number input (`value: number \| null`) |
+| `Checkbox`, `Radio` | `CheckboxSlotProps`, `RadioSlotProps` | One box or radio with its label beside it. `checked` may be `"indeterminate"` |
+| `Select` | `SelectSlotProps` | Single, multiple, searchable, creatable (tags) and server-searched (`remote`) selects. Without your own async select, use `useRemoteOptions(remote, query)` |
+| `Date` | `DateSlotProps` | Date, date-time and time pickers. `value` is the submitted string (`yyyy-MM-dd`, `yyyy-MM-dd HH:mm:ss`, `HH:mm`) |
+| `File`, `Image` | `FileSlotProps`, `ImageSlotProps` | File input; image input with a preview |
+| `Wysiwyg` | `WysiwygSlotProps` | A rich text editor that reports HTML |
+| `Map` | `MapSlotProps` | A map to pick a point, a radius or polygons. `MapInput` renders the coordinate fields itself |
+| `Button`, `LinkButton`, `Link`, `ButtonGroup`, `Icon`, `ActionMenu` | `…SlotProps` | Buttons (`color` is a Blade colour: `primary`, `danger`, `outline-secondary`, …), links (an Inertia adapter can swap `Link`), icons by name |
+| `Alert`, `Card`, `CardHeader`, `CardTitle`, `CardSubtitle`, `CardFooter`, `Accordion`, `Tabs`, `NavTabs`, `Modal`, `Status`, `DescriptionList`, `DescriptionItem` | `…SlotProps` | Display components |
+| `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`, `EmptyState`, `Pagination` | native props, `EmptyStateSlotProps`, `PaginationSlotProps` | Listing pages |
+
+Every props type is exported from `@javaabu/forms`.
+
+# Testing an adapter
+
+`@javaabu/forms/testing` has conformance tests that render every component through your adapter and check the rules above (labels, values, `FormData`, errors and ARIA, display content). They need a DOM (jsdom or happy-dom) and `@testing-library/react`:
+
+```ts
+// my-adapter.test.tsx (Vitest with globals, or Jest)
+import { testAdapter } from "@javaabu/forms/testing"
+import { myUi } from "./my-adapter"
+
+testAdapter(myUi)
+```
+
+Without test globals, pass the functions: `testAdapter(myUi, { describe, it })`. Skip a case your kit can't render in jsdom with `skip: ["Date and Time submit Laravel's formats"]`, or wrap renders in your kit's provider with `wrapper`. For other runners, `adapterConformance(myUi)` returns the cases as `{ name, run }` objects.
diff --git a/examples/html.html b/examples/html.html
new file mode 100644
index 0000000..da78b9e
--- /dev/null
+++ b/examples/html.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="csrf-token" content="playground-token" />
+    <title>@javaabu/forms with plain HTML</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/html/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/html/main.tsx b/examples/html/main.tsx
new file mode 100644
index 0000000..dc2d83a
--- /dev/null
+++ b/examples/html/main.tsx
@@ -0,0 +1,13 @@
+import { createRoot } from "react-dom/client"
+
+import { FormsProvider } from "../../src"
+import { html } from "../../src/html"
+import { Demo } from "../shared/demo"
+import "./styles.css"
+
+// `html` is also the default; passing it here only makes the choice visible.
+createRoot(document.getElementById("root")!).render(
+  <FormsProvider ui={html}>
+    <Demo title="@javaabu/forms with plain HTML" />
+  </FormsProvider>,
+)
diff --git a/examples/html/styles.css b/examples/html/styles.css
new file mode 100644
index 0000000..4fbd664
--- /dev/null
+++ b/examples/html/styles.css
@@ -0,0 +1,90 @@
+/* A few rules for the HTML adapter's data-slot attributes. Logical properties only, so RTL works. */
+:root {
+  font-family: system-ui, "Noto Sans Thaana", sans-serif;
+  color-scheme: light dark;
+}
+main {
+  max-width: 48rem;
+  margin-inline: auto;
+  padding: 1.5rem;
+  display: grid;
+  gap: 2rem;
+}
+[data-slot="form"] {
+  display: grid;
+  gap: 1rem;
+}
+[data-slot="field"] {
+  display: grid;
+  gap: 0.25rem;
+}
+[data-slot="field"][data-inline] {
+  grid-template-columns: 12rem 1fr;
+}
+[data-slot="label"] {
+  font-weight: 600;
+}
+[data-slot="required-marker"],
+[data-slot="field-errors"] {
+  color: #b91c1c;
+}
+[data-slot="help-text"] {
+  color: GrayText;
+  font-size: 0.875rem;
+}
+[data-slot="input"],
+[data-slot="textarea"],
+[data-slot="number"],
+[data-slot="select"],
+[data-slot="date"],
+[data-slot="wysiwyg"] {
+  font: inherit;
+  padding: 0.375rem 0.5rem;
+  inline-size: 100%;
+  box-sizing: border-box;
+}
+[aria-invalid="true"] {
+  outline: 2px solid #b91c1c;
+}
+[data-slot="error-summary"],
+[data-slot="alert"],
+[data-slot="card"] {
+  border: 1px solid GrayText;
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+[data-slot="button"],
+[data-slot="link-button"] {
+  font: inherit;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.375rem;
+  border: 1px solid GrayText;
+  cursor: pointer;
+}
+[data-slot="button"][data-color="primary"] {
+  background: #2563eb;
+  color: white;
+  border-color: #2563eb;
+}
+[data-slot="status"] {
+  padding-inline: 0.5rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, GrayText 20%, transparent);
+}
+[data-slot="table"] {
+  border-collapse: collapse;
+  inline-size: 100%;
+}
+[data-slot="table"] th,
+[data-slot="table"] td {
+  text-align: start;
+  padding: 0.5rem;
+  border-block-end: 1px solid color-mix(in srgb, GrayText 30%, transparent);
+}
+.sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+}
diff --git a/examples/index.html b/examples/index.html
index b15d8e0..d35e434 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -19,6 +19,10 @@ <h1>@javaabu/forms examples</h1>
     <p>Each page renders the same forms through a different integration.</p>
     <ul id="pages">
       <li><a href="./onu.html">Onu</a> (<a href="./onu.html?dv">Dhivehi</a>): every component on the Onu adapter</li>
+      <li>
+        <a href="./html.html">Plain HTML</a> (<a href="./html.html?dv">Dhivehi</a>): the default adapter, styled by
+        data-slot attributes
+      </li>
     </ul>
   </body>
 </html>
diff --git a/examples/vite.config.ts b/examples/vite.config.ts
index ccd7a39..58b44fa 100644
--- a/examples/vite.config.ts
+++ b/examples/vite.config.ts
@@ -4,7 +4,7 @@ import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
 
 /** One page per integration, rendered against the source. `pnpm examples` serves them, `pnpm examples:build` builds them. */
-const pages = ["index", "onu"]
+const pages = ["index", "onu", "html"]
 
 export default defineConfig({
   root: import.meta.dirname,
diff --git a/package.json b/package.json
index 5cb98df..fadc934 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,11 @@
       "import": "./dist/onu-maps.js",
       "require": "./dist/onu-maps.cjs"
     },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "import": "./dist/testing.js",
+      "require": "./dist/testing.cjs"
+    },
     "./tailwind.css": "./src/styles/tailwind.css",
     "./package.json": "./package.json"
   },
@@ -90,7 +95,8 @@
   "peerDependencies": {
     "@javaabu/onu": "^0.2.1",
     "react": "^18.3.0 || ^19.0.0",
-    "react-dom": "^18.3.0 || ^19.0.0"
+    "react-dom": "^18.3.0 || ^19.0.0",
+    "@testing-library/react": "^16.0.0"
   },
   "devDependencies": {
     "@changesets/cli": "^3.0.3",
@@ -138,6 +144,9 @@
   "peerDependenciesMeta": {
     "@javaabu/onu": {
       "optional": true
+    },
+    "@testing-library/react": {
+      "optional": true
     }
   },
   "pnpm": {
diff --git a/src/adapters/html/html.test.tsx b/src/adapters/html/html.test.tsx
new file mode 100644
index 0000000..360c272
--- /dev/null
+++ b/src/adapters/html/html.test.tsx
@@ -0,0 +1,4 @@
+import { testAdapter } from "../../testing"
+import { html } from "."
+
+testAdapter(html)
diff --git a/src/adapters/onu/conformance.test.tsx b/src/adapters/onu/conformance.test.tsx
new file mode 100644
index 0000000..b7eda14
--- /dev/null
+++ b/src/adapters/onu/conformance.test.tsx
@@ -0,0 +1,6 @@
+import { mergeAdapters } from "../../core/adapter"
+import { testAdapter } from "../../testing"
+import { onu } from "."
+import { onuEditor } from "./editor"
+
+testAdapter(mergeAdapters(onu, onuEditor))
diff --git a/src/components/checkbox.tsx b/src/components/checkbox.tsx
index 1069304..1d4b448 100644
--- a/src/components/checkbox.tsx
+++ b/src/components/checkbox.tsx
@@ -181,17 +181,21 @@ export function Radio(props: RadioProps) {
     store?.set(on)
   }
 
-  // A radio only reports its own change; listen to the group to see it being unchecked.
+  // A radio only reports its own change; listen to the group to see it being unchecked. `click` (also
+  // fired for arrow keys) in the capture phase runs before React's handler, so both updates render together.
   React.useEffect(() => {
     if (typeof document === "undefined") return
     const sync = (event: Event) => {
-      const target = event.target as HTMLInputElement
-      if (target.type === "radio" && target.name === field.name && target.id !== id && target.checked) {
-        setCurrent(false)
-      }
+      const target = event.target
+      if (!(target instanceof HTMLInputElement) || target.type !== "radio") return
+      if (target.name === field.name && target.id !== id && target.checked && !target.disabled) setCurrent(false)
     }
+    document.addEventListener("click", sync, true)
     document.addEventListener("change", sync, true)
-    return () => document.removeEventListener("change", sync, true)
+    return () => {
+      document.removeEventListener("click", sync, true)
+      document.removeEventListener("change", sync, true)
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [field.name, id])
 
diff --git a/src/examples.test.tsx b/src/examples.test.tsx
new file mode 100644
index 0000000..f4532f5
--- /dev/null
+++ b/src/examples.test.tsx
@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react"
+
+import { Demo } from "../examples/shared/demo"
+import { FormsProvider, mergeAdapters } from "."
+import { html } from "./html"
+import { onu } from "./onu"
+import { onuEditor } from "./onu-editor"
+
+// The example pages render every component; they should render without errors on each adapter.
+describe.each([
+  ["html", html],
+  ["onu", mergeAdapters(onu, onuEditor)],
+])("the example page on %s", (_, ui) => {
+  it("renders every component", () => {
+    const errors = vi.spyOn(console, "error").mockImplementation(() => {})
+    render(
+      <FormsProvider ui={ui}>
+        <Demo title="Demo" />
+      </FormsProvider>,
+    )
+    expect(screen.getByRole("heading", { name: "Demo" })).toBeInTheDocument()
+    expect(screen.getAllByText("The slug has already been taken.").length).toBeGreaterThan(0)
+    expect(errors.mock.calls.map((c) => String(c[0]))).toEqual([])
+    errors.mockRestore()
+  })
+})
diff --git a/src/testing.ts b/src/testing.ts
new file mode 100644
index 0000000..0b50d83
--- /dev/null
+++ b/src/testing.ts
@@ -0,0 +1,2 @@
+// `@javaabu/forms/testing`: the adapter conformance kit. Needs `@testing-library/react` and a DOM.
+export { testAdapter, adapterConformance, type ConformanceCase, type TestAdapterOptions } from "./testing/index"
diff --git a/src/testing/index.tsx b/src/testing/index.tsx
new file mode 100644
index 0000000..a429ebd
--- /dev/null
+++ b/src/testing/index.tsx
@@ -0,0 +1,416 @@
+"use client"
+
+import * as React from "react"
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react"
+
+import type { FormsAdapter } from "../core/adapter"
+import { FormsProvider } from "../core/provider"
+import { Form } from "../components/form"
+import { Text, Number as NumberField, Hidden } from "../components/inputs"
+import { Textarea } from "../components/textarea"
+import { Checkbox, Radio } from "../components/checkbox"
+import { Select, Select2 } from "../components/select"
+import { Date as DateField, Time } from "../components/dates"
+import { File } from "../components/files"
+import { Wysiwyg } from "../components/wysiwyg"
+import { Submit, LinkButton } from "../components/buttons"
+import { Alert, Card, Status, Tabs, TabsPane, Accordion, TextEntry } from "../components/display"
+import { Table, TableRow, TableCell, TableHeading, NoItems, Pagination } from "../components/listing"
+
+/**
+ * The adapter conformance kit. Run it in your adapter's test suite:
+ *
+ * ```ts
+ * import { testAdapter } from "@javaabu/forms/testing"
+ * testAdapter(myAdapter)
+ * ```
+ *
+ * It renders every form component through the adapter (slots it leaves out
+ * fall back to the HTML adapter) and checks what the core relies on: labels,
+ * values, native submission (`FormData`), errors and their ARIA wiring, and
+ * that display components render their content. It needs a DOM (jsdom or
+ * happy-dom) and `@testing-library/react`.
+ */
+
+export interface ConformanceCase {
+  name: string
+  run: () => void | Promise<void>
+}
+
+export interface TestAdapterOptions {
+  /** Test registration functions. Default: the globals of Vitest or Jest. */
+  describe?: (name: string, body: () => void) => void
+  it?: (name: string, body: () => void | Promise<void>) => void
+  /** Case names to skip, e.g. a slot your UI kit can't render in jsdom. */
+  skip?: string[]
+  /** Wraps every render, e.g. your UI kit's provider. */
+  wrapper?: React.ComponentType<{ children: React.ReactNode }>
+}
+
+class ConformanceError extends Error {
+  override name = "ConformanceError"
+}
+
+function check(condition: unknown, message: string): asserts condition {
+  if (!condition) throw new ConformanceError(message)
+}
+
+function equal(actual: unknown, expected: unknown, message: string) {
+  const a = JSON.stringify(actual)
+  const e = JSON.stringify(expected)
+  check(a === e, `${message}: expected ${e}, got ${a}`)
+}
+
+function formData(container: HTMLElement) {
+  const form = container.querySelector("form")
+  check(form, "the Form slot must render a <form>")
+  return new FormData(form)
+}
+
+function describedByIds(el: Element) {
+  return (el.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean)
+}
+
+/** The conformance cases for an adapter, to run with any test runner. */
+export function adapterConformance(
+  adapter: FormsAdapter,
+  options: Pick<TestAdapterOptions, "wrapper"> = {},
+): ConformanceCase[] {
+  const Outer = options.wrapper ?? React.Fragment
+  const mount = (ui: React.ReactElement) =>
+    render(
+      <Outer>
+        <FormsProvider ui={adapter} csrfToken="test-token">
+          {ui}
+        </FormsProvider>
+      </Outer>,
+    )
+
+  const cases: ConformanceCase[] = [
+    {
+      name: "Form renders a <form> with the method, action, _method and _token",
+      run: () => {
+        const { container } = mount(<Form method="PATCH" action="/users/1" files />)
+        const form = container.querySelector("form")
+        check(form, "the Form slot must render a <form>")
+        equal(form.getAttribute("method")?.toUpperCase(), "POST", "method")
+        equal(form.getAttribute("action"), "/users/1", "action")
+        equal(form.getAttribute("enctype"), "multipart/form-data", "enctype")
+        equal(formData(container).get("_method"), "PATCH", "_method")
+        equal(formData(container).get("_token"), "test-token", "_token")
+      },
+    },
+    {
+      name: "Field labels the control, with help text and the required marker",
+      run: () => {
+        mount(
+          <Form>
+            <Text name="company_name" required help="As registered." />
+          </Form>,
+        )
+        const input = screen.getByLabelText(/Company Name/)
+        equal(input.getAttribute("id"), "company_name", "id")
+        equal(input.getAttribute("name"), "company_name", "name")
+        check((input as HTMLInputElement).required, "required controls need the required attribute")
+        const help = screen.getByText("As registered.")
+        const helpId = help.closest("[id]")?.id
+        check(helpId && describedByIds(input).includes(helpId), "aria-describedby must point at the help text")
+      },
+    },
+    {
+      name: "Field shows errors and marks the control invalid",
+      run: () => {
+        mount(
+          <Form errors={{ email: ["The email has already been taken."] }} summary={false}>
+            <Text name="email" />
+          </Form>,
+        )
+        const input = screen.getByLabelText(/Email/)
+        equal(input.getAttribute("aria-invalid"), "true", "aria-invalid")
+        const message = screen.getByText("The email has already been taken.")
+        const errorId = message.closest("[id]")?.id
+        check(errorId && describedByIds(input).includes(errorId), "aria-describedby must point at the errors")
+      },
+    },
+    {
+      name: "ErrorSummary lists the errors and focuses the field",
+      run: async () => {
+        mount(
+          <Form errors={{ title: "The title field is required." }} focusOnError={false}>
+            <Text name="title" />
+          </Form>,
+        )
+        const links = screen.getAllByText("The title field is required.")
+        check(links.length >= 2, "the summary and the field should both show the message")
+        const link = links.find((el) => el.closest("a, button"))?.closest("a, button") as HTMLElement | null
+        check(link, "summary entries must be links or buttons")
+        fireEvent.click(link)
+        await waitFor(() => equal(document.activeElement?.getAttribute("name"), "title", "focused field"))
+      },
+    },
+    {
+      name: "Input shows the bound value, reports typing and submits it",
+      run: () => {
+        const { container } = mount(
+          <Form model={{ title: "Bodu" }}>
+            <Text name="title" />
+          </Form>,
+        )
+        const input = screen.getByLabelText(/Title/) as HTMLInputElement
+        equal(input.value, "Bodu", "value from the model")
+        fireEvent.change(input, { target: { value: "ބޮޑު" } })
+        equal((screen.getByLabelText(/Title/) as HTMLInputElement).value, "ބޮޑު", "value after typing")
+        equal(formData(container).get("title"), "ބޮޑު", "submitted value")
+      },
+    },
+    {
+      name: "Textarea shows the bound value, reports typing and submits it",
+      run: () => {
+        const { container } = mount(
+          <Form model={{ body: "First" }}>
+            <Textarea name="body" />
+          </Form>,
+        )
+        const textarea = screen.getByLabelText(/Body/) as HTMLTextAreaElement
+        equal(textarea.value, "First", "value from the model")
+        fireEvent.change(textarea, { target: { value: "ދެވަނަ" } })
+        equal(formData(container).get("body"), "ދެވަނަ", "submitted value")
+      },
+    },
+    {
+      name: "Number submits the bound number",
+      run: () => {
+        const { container } = mount(
+          <Form model={{ views: 1250 }}>
+            <NumberField name="views" />
+          </Form>,
+        )
+        equal(formData(container).get("views"), "1250", "submitted value")
+      },
+    },
+    {
+      name: "Hidden submits its value",
+      run: () => {
+        const { container } = mount(
+          <Form>
+            <Hidden name="redirect" value="/users" />
+          </Form>,
+        )
+        equal(formData(container).get("redirect"), "/users", "submitted value")
+      },
+    },
+    {
+      name: "Checkbox is checked from the model, toggles and submits its value",
+      run: () => {
+        const { container } = mount(
+          <Form model={{ is_featured: true, channels: ["sms"] }}>
+            <Checkbox name="is_featured" />
+            <Checkbox name="channels[]" value="email" label="Email" />
+            <Checkbox name="channels[]" value="sms" label="SMS" />
+          </Form>,
+        )
+        equal(formData(container).get("is_featured"), "1", "checked single box")
+        equal(formData(container).getAll("channels[]"), ["sms"], "checked group")
+        fireEvent.click(screen.getByRole("checkbox", { name: /Email/ }))
+        equal(formData(container).getAll("channels[]").sort(), ["email", "sms"], "group after a click")
+        fireEvent.click(screen.getByRole("checkbox", { name: /Is Featured/ }))
+        equal(formData(container).get("is_featured"), null, "unchecked single box")
+      },
+    },
+    {
+      name: "Radio is selected from the model and submits the selection",
+      run: () => {
+        const { container } = mount(
+          <Form model={{ type: "video" }}>
+            <Radio name="type" value="quiz" label="Quiz" />
+            <Radio name="type" value="video" label="Video" />
+          </Form>,
+        )
+        equal(formData(container).get("type"), "video", "selected value")
+        fireEvent.click(screen.getByRole("radio", { name: /Quiz/ }))
+        equal(formData(container).get("type"), "quiz", "after a click")
+      },
+    },
+    {
+      name: "Select submits the bound value",
+      run: () => {
+        const { container } = mount(
+          <Form model={{ status: "published" }}>
+            <Select name="status" options={{ draft: "Draft", published: "Published" }} />
+          </Form>,
+        )
+        equal(formData(container).get("status"), "published", "submitted value")
+      },
+    },
+    {
+      name: "Select2 multiple submits name[] for every value",
+      run: () => {
+        const { container } = mount(
+          <Form model={{ tags: ["1", "3"] }}>
+            <Select2 name="tags" multiple options={{ 1: "Harbour", 2: "Weather", 3: "Transport" }} />
+          </Form>,
+        )
+        equal(formData(container).getAll("tags[]").sort(), ["1", "3"], "submitted values")
+      },
+    },
+    {
+      name: "Date and Time submit Laravel's formats",
+      run: () => {
+        const { container } = mount(
+          <Form model={{ published_on: "2026-11-04T09:30:00.000000Z", starts_at: "09:30" }}>
+            <DateField name="published_on" />
+            <Time name="starts_at" />
+          </Form>,
+        )
+        const date = String(formData(container).get("published_on"))
+        check(/^\d{4}-\d{2}-\d{2}$/.test(date), `published_on must be yyyy-MM-dd, got ${date}`)
+        equal(formData(container).get("starts_at"), "09:30", "time")
+      },
+    },
+    {
+      name: "File renders a file input with the name",
+      run: () => {
+        const { container } = mount(
+          <Form files>
+            <File name="attachment" />
+          </Form>,
+        )
+        const input = container.querySelector('input[type="file"]')
+        check(input, "File must render <input type=file>")
+        equal(input.getAttribute("name"), "attachment", "name")
+      },
+    },
+    {
+      name: "Wysiwyg submits HTML",
+      run: () => {
+        const { container } = mount(
+          <Form model={{ content: "<p>Hello</p>" }}>
+            <Wysiwyg name="content" />
+          </Form>,
+        )
+        equal(formData(container).get("content"), "<p>Hello</p>", "submitted HTML")
+      },
+    },
+    {
+      name: "Submit submits the form and shows the processing state",
+      run: async () => {
+        let resolve: () => void = () => {}
+        const pending = new Promise<void>((r) => (resolve = r))
+        let submitted = 0
+        mount(
+          <Form
+            onSubmit={() => {
+              submitted++
+              return pending
+            }}
+          >
+            <Submit>Save</Submit>
+          </Form>,
+        )
+        const button = screen.getByRole("button", { name: /Save/ })
+        equal(button.getAttribute("type"), "submit", "type")
+        fireEvent.click(button)
+        await waitFor(() => equal(submitted, 1, "submits"))
+        const busy = () => {
+          const b = screen.getByRole("button", { name: /Save/ }) as HTMLButtonElement
+          return b.disabled || b.getAttribute("aria-busy") === "true" || b.getAttribute("data-loading") !== null
+        }
+        await waitFor(() => check(busy(), "the button must be disabled or aria-busy while processing"))
+        await act(async () => resolve())
+      },
+    },
+    {
+      name: "Display components render their content",
+      run: () => {
+        mount(
+          <>
+            <Alert type="success" heading="Saved">
+              Changes saved.
+            </Alert>
+            <Card title="Article">Card body</Card>
+            <Status color="success">Active</Status>
+            <LinkButton url="/users/create">Create</LinkButton>
+            <TextEntry name="name" value="Aishath" />
+            <Tabs tabs={[{ name: "home" }, { name: "profile" }]}>
+              <TabsPane name="home">Home pane</TabsPane>
+            </Tabs>
+            <Accordion id="faq" items={[{ title: "Question", content: "Answer", show: true }]} />
+            <NoItems modelType="users" />
+          </>,
+        )
+        for (const text of [
+          "Saved",
+          "Changes saved.",
+          "Article",
+          "Card body",
+          "Active",
+          "Aishath",
+          "Home pane",
+          "Question",
+        ]) {
+          check(screen.queryAllByText(text).length > 0, `"${text}" should be rendered`)
+        }
+        const link = screen.getByText("Create").closest("a")
+        check(link && link.getAttribute("href") === "/users/create", "LinkButton must render a link with the URL")
+      },
+    },
+    {
+      name: "Table renders headings, rows with checkboxes and cells",
+      run: () => {
+        const { container } = mount(
+          <Form>
+            <Table model="users" headers={<TableHeading label="Name" />}>
+              <TableRow model={{ id: 7, name: "Ibrahim" }}>
+                <TableCell name="name" />
+              </TableRow>
+            </Table>
+          </Form>,
+        )
+        check(container.querySelector("table"), "Table must render a <table>")
+        check(screen.getByText("Ibrahim"), "cells show the bound value")
+        const row = container.querySelector('input[name="users[]"]') as HTMLInputElement | null
+        check(row && row.value === "7", "row checkboxes submit users[] with the id")
+      },
+    },
+    {
+      name: "Pagination links to pages",
+      run: () => {
+        const { container } = mount(
+          <Pagination
+            paginator={{ current_page: 2, last_page: 5, per_page: 20 }}
+            getPageHref={(p) => `/users?page=${p}`}
+          />,
+        )
+        check(container.querySelector('a[href="/users?page=3"]'), "Pagination must link to the other pages")
+      },
+    },
+  ]
+
+  return cases.map((c) => ({
+    name: c.name,
+    run: async () => {
+      try {
+        await c.run()
+      } finally {
+        cleanup()
+      }
+    },
+  }))
+}
+
+type Registrar = (name: string, body: () => void | Promise<void>) => void
+
+/** Registers the conformance cases as tests: `testAdapter(myAdapter)` inside a Vitest or Jest file. */
+export function testAdapter(adapter: FormsAdapter, options: TestAdapterOptions = {}) {
+  const g = globalThis as { describe?: TestAdapterOptions["describe"]; it?: Registrar }
+  const describe = options.describe ?? g.describe
+  const it = options.it ?? g.it
+  if (!describe || !it)
+    throw new Error("testAdapter needs describe() and it(): pass them in options, or enable globals.")
+  const skip = new Set(options.skip ?? [])
+  describe(`${adapter.name} adapter conformance`, () => {
+    for (const c of adapterConformance(adapter, options)) {
+      if (!skip.has(c.name)) it(c.name, c.run)
+    }
+  })
+}
diff --git a/vite.config.ts b/vite.config.ts
index 933aef8..0fec7a5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,7 +9,8 @@ const pkg = JSON.parse(readFileSync(new URL("./package.json", import.meta.url),
 }
 const externals = [...Object.keys(pkg.dependencies ?? {}), ...Object.keys(pkg.peerDependencies ?? {})]
 const isExternal = (id: string) =>
-  externals.some((dep) => id === dep || id.startsWith(`${dep}/`)) || /^(react|react-dom)(\/|$)/.test(id)
+  externals.some((dep) => id === dep || id.startsWith(`${dep}/`)) ||
+  /^(react|react-dom|@testing-library\/react)(\/|$)/.test(id)
 
 /** Library entry points, mirrored by package.json `exports`. */
 export const entries: Record<string, string> = {
@@ -18,6 +19,7 @@ export const entries: Record<string, string> = {
   onu: "src/onu.ts",
   "onu-editor": "src/onu-editor.ts",
   "onu-maps": "src/onu-maps.ts",
+  testing: "src/testing.ts",
 }
 
 const output = {

From a848bef0b02478de5ecc4d107605269c807e5027 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 13:10:51 +0500
Subject: [PATCH 04/18] Use @javaabu/i18n for every string

Package lines use the Blade keys (forms::strings.*); app lines for the
current locale win, then the bundled en/dv lines. Generated labels go
through __(). Keys shared with javaabu/forms v2 are aligned.

Closes #11

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/i18n-strings.md       |   5 +
 docs/basic-usage/translations.md | 166 +++++++++++++++++++++++++++++++
 src/adapters/html/index.tsx      |   6 +-
 src/components/listing.tsx       |   8 +-
 src/core/locales/dv.ts           |  17 ++--
 src/core/locales/en.ts           |   5 +-
 src/core/strings.test.tsx        |  85 ++++++++++++++++
 src/core/strings.ts              |  20 ++--
 8 files changed, 290 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/i18n-strings.md
 create mode 100644 docs/basic-usage/translations.md
 create mode 100644 src/core/strings.test.tsx

diff --git a/.changeset/i18n-strings.md b/.changeset/i18n-strings.md
new file mode 100644
index 0000000..caaf9c2
--- /dev/null
+++ b/.changeset/i18n-strings.md
@@ -0,0 +1,5 @@
+---
+"@javaabu/forms": minor
+---
+
+Strings now come from `@javaabu/i18n` under the Blade package's keys (`forms::strings.nothing_selected`), so apps change them in `lang/vendor/forms/{locale}/strings.php` as they do for the Blade components. Generated labels go through `__()` by default. The locale follows `@javaabu/i18n` (`<html lang>`, `setLocale()`) instead of Onu's. `FormsProvider messages` is gone, and the string keys are now snake_case like Blade's (`t("nothing_selected")`).
diff --git a/docs/basic-usage/translations.md b/docs/basic-usage/translations.md
new file mode 100644
index 0000000..ce77056
--- /dev/null
+++ b/docs/basic-usage/translations.md
@@ -0,0 +1,166 @@
+---
+title: Translations
+sidebar_position: 11
+---
+
+Every string the components show comes from [`@javaabu/i18n`](https://github.com/Javaabu/i18n), under the same keys as the Blade package: `forms::strings.nothing_selected`. The package ships English and Dhivehi lines, and components re-render when the locale changes.
+
+# The locale
+
+`@javaabu/i18n` reads the locale from `<html lang>`. Laravel's default layout already sets it:
+
+```blade
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'dv' ? 'rtl' : 'ltr' }}">
+```
+
+For a language switcher, call `setLocale()`:
+
+```tsx
+import { setLocale } from "@javaabu/i18n"
+
+<Forms.Button color="light" onClick={() => setLocale("dv")}>ދިވެހި</Forms.Button>
+```
+
+If you use the Onu adapter, Onu's own strings (date pickers, the file input) follow `OnuProvider locale`. Keep it in step with the page:
+
+```tsx
+import { useTranslation } from "@javaabu/i18n/react"
+import { OnuProvider } from "@javaabu/onu"
+import { dv } from "@javaabu/onu/locales/dv"
+
+function Providers({ children }) {
+  const { locale } = useTranslation()
+  return <OnuProvider locale={locale.startsWith("dv") ? dv : undefined}>{children}</OnuProvider>
+}
+```
+
+# Changing the package's lines
+
+The package looks up each line in this order:
+
+1. a line your app loaded for the current locale,
+2. the bundled line for the current locale (`en` or `dv`),
+3. your app's line for the fallback locale,
+4. the bundled English line.
+
+So you change a line the same way you would for the Blade components: in `lang/vendor/forms/{locale}/strings.php`.
+
+```php
+<?php
+
+// lang/vendor/forms/dv/strings.php
+
+return [
+    'nothing_selected' => 'ހޮވާފައެއް ނެތް',
+];
+```
+
+Then send your app's translations to the browser, as you do for your own lines. With [javaabu/js-localization](https://github.com/Javaabu/js-localization) or Laravel JS Localization, vendor lines arrive with their `forms::` namespace and `@javaabu/i18n` reads them. You can also add lines in JavaScript:
+
+```ts
+import { addLines } from "@javaabu/i18n"
+
+addLines({ "strings.nothing_selected": "ހޮވާފައެއް ނެތް" }, "dv", "forms")
+```
+
+# Generated labels
+
+A field without a `label` gets one from its name (`company_name` becomes "Company Name"), passed through `__()`, as Blade does with `trans()`. Translate it with a JSON line in `lang/dv.json`:
+
+```json
+{
+  "Company Name": "ކުންފުނީގެ ނަން"
+}
+```
+
+Or pass your own translator to `FormsProvider translate`:
+
+```tsx
+<FormsProvider translate={(text) => myTranslate(text)}>
+```
+
+# Using the strings in your components
+
+```tsx
+import { useFormsTranslation } from "@javaabu/forms"
+
+function UploadHint() {
+  const { t } = useFormsTranslation()
+  return <p>{t("file_hint", { types: ".pdf", size: "2 MB" })}</p>
+}
+```
+
+`useFormsTranslation()` also returns `translate` (the label translator), `locale` and `direction`.
+
+# Every line
+
+| Key | English | Dhivehi |
+| --- | --- | --- |
+| `required_text` | * | * |
+| `nothing_selected` | Nothing Selected | އެއްވެސް އެއްޗެއް ޙިޔާރުނުކޮށް |
+| `blank` | - | - |
+| `yes` | Yes | އާނ |
+| `no` | No | ނޫން |
+| `table_array_separator` | ,  | ،  |
+| `fileinput_select_file` | Select file | ފައިލް ސެލެކްޓްކޮށްލާ |
+| `fileinput_upload_file` | Upload file | ފައިލް އަޕްލޯޑްކުރޭ |
+| `fileinput_change_file` | Change | ބަދަލުކޮށްލާ |
+| `fileinput_remove_file` | Remove | ފުހެލާ |
+| `fileinput_nothing_selected` | No file selected. | އެއްވެސް ފައިލެއް ސެލްކްޓްނުކޮށް. |
+| `imageinput_select_image` | Click to select an image | އިމޭޖެއް ސެލެކްޓްކުރަން ފިތާލާ |
+| `latitude` | Latitude | ލެޓިޓިއުޑް |
+| `longitude` | Longitude | ލޯންޖިޓިއުޑް |
+| `radius` | Radius | ރޭޑިއަސް |
+| `meters_abbr` | m | m |
+| `km_abbr` | km | km |
+| `boundary` | Boundary | ބައުންޑަރީ |
+| `file_hint` | Only :types files of max :size allowed. | ހަމައެކަނި :types ވައްތަރުގެ :size އަށް ވުރެ ބޮޑު ނޫން ފައިލް. |
+| `image_hint` | Recommended :widthpx x :heightpx. | ރަނގަޅުވާނީ :widthpx x :heightpx. |
+| `text_list_separator` | ,  | ،  |
+| `text_list_separator_last_glue` |  and  |  އަދި  |
+| `map_search_string` | Search... | ހޯދާ... |
+| `search_form_placeholder` | Search... | ހޯދާ... |
+| `kb` | KB | KB |
+| `mb` | MB | MB |
+| `gb` | GB | GB |
+| `bulk_action` | Bulk Action | ބަލްކް އެކްޝަން |
+| `apply` | Apply | ހިންގާ |
+| `filter` | Filter | ފިލްޓަރ |
+| `export` | Export | އެކްސްޕޯޓް |
+| `clear` | Clear | ސާފުކުރޭ |
+| `select_all` | Select All | ހުރިހާ އެއްޗެއް ޚިޔާރުކުރޭ |
+| `select_row` | Select :name | :name ޚިޔާރުކުރޭ |
+| `create_new` | Create New | އާ އެއްޗެއް ހަދާ |
+| `no_items_title` | It's a bit lonely here. | މިތާ އަދި އެއްވެސް އެއްޗެއް ނެތް. |
+| `no_items_message` | Let's create some new :model_type. | އައު :model_type ހަދާލަމާ. |
+| `items` | items | އެއްޗެހި |
+| `pagination` | Pagination | ޞަފްޙާތައް |
+| `pagination_previous` | Previous | ކުރީގެ |
+| `pagination_next` | Next | ދެން |
+| `export_options` | More export options | އިތުރު އެކްސްޕޯޓް އޮޕްޝަންތައް |
+| `sort_by` | Sort by :label | :label އިން ތަރުތީބުކުރޭ |
+| `loading` | Loading... | ލޯޑުވަނީ… |
+| `error_loading_options` | Error Loading Options | އޮޕްޝަންތައް ލޯޑެއް ނުކުރެވުނު |
+| `uploading` | Uploading... | އަޕްލޯޑްކުރަނީ… |
+| `removing` | Removing... | ފޮހެލަނީ… |
+| `are_you_sure` | Are you sure? | ކަށަވަރުތަ؟ |
+| `remove_file_confirm` | You will not be able to undo deleting this file! | މި ފައިލް ފޮހެލުމަށްފަހު އަނބުރާ ނުގެނެވޭނެ! |
+| `remove_file_confirm_button` | Yes, remove it! | އާން، ފޮހެލާ! |
+| `cancel` | Cancel | ކެންސަލްކުރޭ |
+| `upload_error` | An error occurred while uploading the file. | ފައިލް އަޕްލޯޑްކުރުމުގައި މައްސަލައެއް ދިމާވެއްޖެ. |
+| `remove_error` | An error occurred while removing the file. | ފައިލް ފޮހެލުމުގައި މައްސަލައެއް ދިމާވެއްޖެ. |
+| `file_too_large` | File size cannot be greater than :size MB | ފައިލްގެ ސައިޒު :size MB އަށްވުރެ ބޮޑުވެގެން ނުވާނެ |
+| `file_type_not_allowed` | Only :accept files are allowed. | ހަމައެކަނި :accept ފައިލް. |
+| `confirm_text` | Just checking if you wanted to really do this. | މިކަން ކުރަން ބޭނުންވާކަން ކަށަވަރުކޮށްލަން. |
+| `confirm_button` | Yes, continue! | އާން، ކުރިއަށް! |
+| `delete_confirm_text` | You will not be able to undo this delete operation! | މި ފޮހެލުމަށްފަހު އަނބުރާ ބަދަލެއް ނުކުރެވޭނެ! |
+| `delete_confirm_button` | Yes, delete it! | އާން، ފޮހެލާ! |
+| `error_summary_title` | Please correct the errors below. | ތިރީގައިވާ ގޯސްތައް ރަނގަޅުކުރައްވާ. |
+| `submit_failed` | The form could not be submitted. Please try again. | ފޯމު ހުށައެޅިއެއް ނުދިޔައެވެ. އަލުން މަސައްކަތްކުރައްވާ. |
+| `close` | Close | ބަންދުކުރޭ |
+| `page` | Page :page | ސަފްހާ :page |
+| `search` | Search | ހޯދާ |
+| `add_option` | Add ":value" | ":value" އިތުރުކުރޭ |
+| `thaana_toggle` | Type in Thaana | ތާނައިން ލިޔުއްވާ |
+
+The Dhivehi lines marked for review are listed in [Dhivehi and RTL](../advanced-usage/dhivehi-and-rtl).
diff --git a/src/adapters/html/index.tsx b/src/adapters/html/index.tsx
index 09f20b5..61e2b64 100644
--- a/src/adapters/html/index.tsx
+++ b/src/adapters/html/index.tsx
@@ -1025,13 +1025,15 @@ function Pagination({ currentPage, lastPage, hrefFor, onPageChange, className }:
   return (
     <nav data-slot="pagination" aria-label={t("pagination")} className={className}>
       <ul>
-        <li>{item(currentPage - 1, <ui.Icon name="chevron-left" />, t("previous"), currentPage <= 1)}</li>
+        <li>{item(currentPage - 1, <ui.Icon name="chevron-left" />, t("pagination_previous"), currentPage <= 1)}</li>
         {pageWindow(currentPage, lastPage).map((page, i) => (
           <li key={page ?? `gap-${i}`}>
             {page === null ? "…" : item(page, page, t("page", { page }), false, page === currentPage)}
           </li>
         ))}
-        <li>{item(currentPage + 1, <ui.Icon name="chevron-right" />, t("next"), currentPage >= lastPage)}</li>
+        <li>
+          {item(currentPage + 1, <ui.Icon name="chevron-right" />, t("pagination_next"), currentPage >= lastPage)}
+        </li>
       </ul>
     </nav>
   )
diff --git a/src/components/listing.tsx b/src/components/listing.tsx
index ddf1bab..0fd656a 100644
--- a/src/components/listing.tsx
+++ b/src/components/listing.tsx
@@ -505,9 +505,9 @@ export function FilterSubmit({
           </ui.Button>
           {keys.length > 1 ? (
             <ui.ActionMenu
-              label={t("export")}
+              label={t("export_options")}
               trigger={
-                <ui.Button type="button" color="secondary" size="icon" aria-label={t("export")}>
+                <ui.Button type="button" color="secondary" size="icon" aria-label={t("export_options")}>
                   <ui.Icon name="chevron-down" />
                 </ui.Button>
               }
@@ -690,7 +690,7 @@ export function Pagination({ paginator, getPageHref, onPageChange, className }:
           disabled={!p.prev_page_url}
           startIcon="chevron-left"
         >
-          {t("previous")}
+          {t("pagination_previous")}
         </LinkButton>
         <LinkButton
           url={p.next_page_url ?? undefined}
@@ -698,7 +698,7 @@ export function Pagination({ paginator, getPageHref, onPageChange, className }:
           disabled={!p.next_page_url}
           endIcon="chevron-right"
         >
-          {t("next")}
+          {t("pagination_next")}
         </LinkButton>
       </nav>
     )
diff --git a/src/core/locales/dv.ts b/src/core/locales/dv.ts
index c4659fb..292d565 100644
--- a/src/core/locales/dv.ts
+++ b/src/core/locales/dv.ts
@@ -31,20 +31,21 @@ export const dv: FormsMessages = {
   mb: "MB",
   gb: "GB",
 
-  bulk_action: "އެއްފަހަރާ ކުރާ ކަންކަން",
+  bulk_action: "ބަލްކް އެކްޝަން",
   apply: "ހިންގާ",
-  filter: "ފިލްޓަރު ކުރޭ",
-  export: "އެކްސްޕޯޓްކުރޭ",
-  clear: "ފޮހެލާ",
+  filter: "ފިލްޓަރ",
+  export: "އެކްސްޕޯޓް",
+  clear: "ސާފުކުރޭ",
   select_all: "ހުރިހާ އެއްޗެއް ޚިޔާރުކުރޭ",
   select_row: ":name ޚިޔާރުކުރޭ",
-  create_new: "އައު އެއްޗެއް ހަދާ",
+  create_new: "އާ އެއްޗެއް ހަދާ",
   no_items_title: "މިތާ އަދި އެއްވެސް އެއްޗެއް ނެތް.",
   no_items_message: "އައު :model_type ހަދާލަމާ.",
   items: "އެއްޗެހި",
-  pagination: "ސަފްހާތައް",
-  previous: "ކުރީގެ",
-  next: "ކުރިއަށް",
+  pagination: "ޞަފްޙާތައް",
+  pagination_previous: "ކުރީގެ",
+  pagination_next: "ދެން",
+  export_options: "އިތުރު އެކްސްޕޯޓް އޮޕްޝަންތައް",
   sort_by: ":label އިން ތަރުތީބުކުރޭ",
 
   loading: "ލޯޑުވަނީ…",
diff --git a/src/core/locales/en.ts b/src/core/locales/en.ts
index 0513522..d858148 100644
--- a/src/core/locales/en.ts
+++ b/src/core/locales/en.ts
@@ -46,8 +46,9 @@ export const en = {
   no_items_message: "Let's create some new :model_type.",
   items: "items",
   pagination: "Pagination",
-  previous: "Previous",
-  next: "Next",
+  pagination_previous: "Previous",
+  pagination_next: "Next",
+  export_options: "More export options",
   sort_by: "Sort by :label",
 
   // js-utilities messages
diff --git a/src/core/strings.test.tsx b/src/core/strings.test.tsx
new file mode 100644
index 0000000..558f055
--- /dev/null
+++ b/src/core/strings.test.tsx
@@ -0,0 +1,85 @@
+import { act, render, screen } from "@testing-library/react"
+import { addLines, setLocale } from "@javaabu/i18n"
+
+import { Select2 } from "../components/select"
+import { Text } from "../components/inputs"
+import { FormsProvider } from "./provider"
+import { bundledLine, useFormsTranslation } from "./strings"
+import { dv, en } from "./locales"
+
+function Line({
+  k,
+  replace,
+}: {
+  k: Parameters<ReturnType<typeof useFormsTranslation>["t"]>[0]
+  replace?: Record<string, string | number>
+}) {
+  const { t } = useFormsTranslation()
+  return <span data-testid="line">{t(k, replace)}</span>
+}
+
+afterEach(() => act(() => setLocale("en")))
+
+describe("package strings", () => {
+  it("has a Dhivehi line for every English line", () => {
+    expect(Object.keys(dv).sort()).toEqual(Object.keys(en).sort())
+    for (const value of Object.values(dv)) expect(value).not.toBe("")
+  })
+
+  it("uses the bundled lines of the current locale", () => {
+    render(<Line k="nothing_selected" />)
+    expect(screen.getByTestId("line")).toHaveTextContent("Nothing Selected")
+    act(() => setLocale("dv"))
+    expect(screen.getByTestId("line")).toHaveTextContent(dv.nothing_selected)
+  })
+
+  it("replaces :placeholders", () => {
+    render(<Line k="file_hint" replace={{ types: ".pdf", size: "2 MB" }} />)
+    expect(screen.getByTestId("line")).toHaveTextContent("Only .pdf files of max 2 MB allowed.")
+  })
+
+  it("prefers lines the app loads from lang/vendor/forms", () => {
+    // The shared translator keeps lines between tests, so this uses a line no other test reads.
+    act(() => addLines({ "strings.apply": "ހިންގާ" }, "dv", "forms"))
+    act(() => setLocale("dv"))
+    render(<Line k="apply" />)
+    expect(screen.getByTestId("line")).toHaveTextContent("ހިންގާ")
+  })
+
+  it("keeps the bundled Dhivehi line over the app's English fallback", () => {
+    act(() => addLines({ "strings.blank": "(none)" }, "en", "forms"))
+    act(() => setLocale("dv"))
+    render(<Line k="blank" />)
+    expect(screen.getByTestId("line")).toHaveTextContent(dv.blank)
+  })
+
+  it("falls back to English for other locales", () => {
+    expect(bundledLine("yes", "fr")).toBe("Yes")
+    expect(bundledLine("yes", "dv_MV")).toBe(dv.yes)
+  })
+
+  it("re-renders components on a locale change", () => {
+    render(<Select2 name="city" options={{ 1: "Malé" }} />)
+    expect(screen.getByRole("option", { name: "Nothing Selected" })).toBeInTheDocument()
+    act(() => setLocale("dv"))
+    expect(screen.getByRole("option", { name: dv.nothing_selected })).toBeInTheDocument()
+  })
+})
+
+describe("generated labels", () => {
+  it("go through __(), like Blade's trans()", () => {
+    act(() => addLines({ "Company Name": "ކުންފުނީގެ ނަން" } as Record<string, string>, "dv"))
+    act(() => setLocale("dv"))
+    render(<Text name="company_name" />)
+    expect(screen.getByLabelText("ކުންފުނީގެ ނަން")).toBeInTheDocument()
+  })
+
+  it("use FormsProvider translate when it is set", () => {
+    render(
+      <FormsProvider translate={(text) => `t:${text}`}>
+        <Text name="title" />
+      </FormsProvider>,
+    )
+    expect(screen.getByLabelText("t:Title")).toBeInTheDocument()
+  })
+})
diff --git a/src/core/strings.ts b/src/core/strings.ts
index 452a7a4..25bd109 100644
--- a/src/core/strings.ts
+++ b/src/core/strings.ts
@@ -13,18 +13,23 @@ export const STRINGS_PREFIX = "forms::strings."
 export type FormsMessageKey = keyof FormsMessages
 export type Replace = Record<string, string | number>
 
+function languageOf(locale: string): string {
+  return locale.split(/[-_]/)[0]?.toLowerCase() ?? "en"
+}
+
 /** The bundled line for a locale (`dv`, `dv_MV`, `en-GB`), falling back to English. */
 export function bundledLine(key: FormsMessageKey, locale: string): string {
-  const code = locale.split(/[-_]/)[0]?.toLowerCase() ?? "en"
-  return (locales[code] ?? en)[key] ?? en[key]
+  return (locales[languageOf(locale)] ?? en)[key] ?? en[key]
 }
 
 /**
  * The package strings and the label translator, through `@javaabu/i18n`.
  *
- * `t("nothing_selected")` looks up `forms::strings.nothing_selected`. Lines your app
- * loads (e.g. `lang/vendor/forms/dv/strings.php` through js-localization) win; the
- * bundled `en` / `dv` lines are the fallback. `translate("Company Name")` is `__()`,
+ * `t("nothing_selected")` looks up `forms::strings.nothing_selected`, in this order:
+ * 1. a line your app loaded for the current locale (`lang/vendor/forms/dv/strings.php`);
+ * 2. the bundled line for the current locale (`en`, `dv`);
+ * 3. your app's line for the fallback locale;
+ * 4. the bundled English line. `translate("Company Name")` is `__()`,
  * like Blade's `trans()` on generated labels, unless `FormsProvider translate` is set.
  */
 export function useFormsTranslation() {
@@ -34,8 +39,11 @@ export function useFormsTranslation() {
   const t = React.useCallback(
     (key: FormsMessageKey, replace: Replace = {}): string => {
       const full = STRINGS_PREFIX + key
+      if (has(full, null, false)) return String(__(full, replace))
+      const bundled = locales[languageOf(locale)]
+      if (bundled) return makeReplacements(bundled[key], replace)
       if (has(full)) return String(__(full, replace))
-      return makeReplacements(bundledLine(key, locale), replace)
+      return makeReplacements(en[key], replace)
     },
     [__, has, locale],
   )

From c0bac9cfe2958c9b49bc0ff4f1eb2b9870a977d1 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 13:12:21 +0500
Subject: [PATCH 05/18] Verify model binding and old input against
 javaabu/forms

Tests for value precedence, null old input, nested/array names, Model,
provider vs form old input, checkbox groups, radios, Select default vs
bound value, relations and date formats. Docs updated.

Closes #9

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/binding-tests.md       |   5 +
 docs/basic-usage/model-binding.md |  13 +-
 src/core/binding.test.tsx         | 233 ++++++++++++++++++++++++++++++
 3 files changed, 249 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/binding-tests.md
 create mode 100644 src/core/binding.test.tsx

diff --git a/.changeset/binding-tests.md b/.changeset/binding-tests.md
new file mode 100644
index 0000000..9c12eab
--- /dev/null
+++ b/.changeset/binding-tests.md
@@ -0,0 +1,5 @@
+---
+"@javaabu/forms": patch
+---
+
+Fields are controlled by the core and still submit natively. Model binding, old input (including `null` old values), nested and array names, checkbox groups, radio groups, relations and date formats follow javaabu/forms. Radios in a group now update together when one is picked.
diff --git a/docs/basic-usage/model-binding.md b/docs/basic-usage/model-binding.md
index 164ec53..1124561 100644
--- a/docs/basic-usage/model-binding.md
+++ b/docs/basic-usage/model-binding.md
@@ -11,7 +11,7 @@ Fields read their starting value from the bound model, like the Blade components
 2. **Bound value**: the model's attribute (`data_get` with the name in dot notation).
 3. **`default`**: when the bound value is `null` or missing.
 
-A controlled `value` prop wins over all three. For `Select` / `Select2`, `default` wins over the bound value, as it does in Blade.
+A controlled `value` prop wins over all three. Old input wins even when its value is `null`: the key was submitted, so the user emptied the field. For `Select` / `Select2`, `default` wins over the bound value, as it does in Blade.
 
 ```tsx
 <Forms.Textarea name="motivation" default="I want to use this package because..." />
@@ -31,7 +31,16 @@ Bracket names read nested values: `name="address[city]"` reads `address.city` an
 
 ## Fields that change after the first render
 
-Fields are uncontrolled, so they submit natively like Blade forms. When the model, old input or `default` changes (for example, data that loads after the first render), the field resets to the new value. Pass `value` and `onChange` (or `onValueChange` / `onCheckedChange`) to control a field yourself.
+Each field keeps its own value, starting from the precedence above, and renders real inputs, so the form submits natively like a Blade form. When the model, old input or `default` changes (for example, data that loads after the first render), the field starts again from the new value. Pass `value` and `onChange` (or `onValueChange` / `onCheckedChange`) to control a field yourself.
+
+With Inertia's `useForm()`, pass it to the form (`<Form form={form}>`) and the fields read and write `form.data` instead. See [Inertia](../advanced-usage/inertia).
+
+## Checkboxes, radios and selects
+
+- **Checkboxes** follow Blade: once there is any old input, a box is checked only when the old input contains its `value`. An unchecked box isn't submitted, so its key is missing. Without old input, an array (`channels: ["sms"]`) checks the boxes whose value it contains, and a scalar checks by its truthiness. `default` applies when the bound value is `null`.
+- **Radios** are selected when the bound value equals their `value`.
+- **`Select` / `Select2`**: `default` wins over the bound value, as in Blade. With `relation`, a bound model becomes its key (`idField`, default `id`) and a collection becomes its keys. Multiple selects submit `name[]`, plus `sync_<name>` so Laravel can sync an emptied relation (`excludeSyncField` turns that off).
+- **Dates** accept what Laravel sends (`2026-11-04`, `2026-11-04 09:30:00`, ISO strings) and submit `yyyy-MM-dd`, `yyyy-MM-dd HH:mm:ss` or `HH:mm`.
 
 ## Old input with Inertia
 
diff --git a/src/core/binding.test.tsx b/src/core/binding.test.tsx
new file mode 100644
index 0000000..baefd28
--- /dev/null
+++ b/src/core/binding.test.tsx
@@ -0,0 +1,233 @@
+import { fireEvent, render, screen } from "@testing-library/react"
+
+import { Checkbox, Radio } from "../components/checkbox"
+import { Date as DateField, Datetime } from "../components/dates"
+import { Form } from "../components/form"
+import { Hidden, Number as NumberField, Text } from "../components/inputs"
+import { Select, Select2 } from "../components/select"
+import { Textarea } from "../components/textarea"
+import { Model, OldInput } from "./binding"
+import { FormsProvider } from "./provider"
+
+function values(container: HTMLElement) {
+  return new FormData(container.querySelector("form")!)
+}
+
+const value = (label: string | RegExp) => (screen.getByLabelText(label) as HTMLInputElement).value
+
+describe("value precedence: old input → bound value → default", () => {
+  it("reads each field from the right source", () => {
+    render(
+      <Form model={{ name: "From model", city: null }} old={{ email: "old@example.com" }}>
+        <Text name="name" default="Default" />
+        <Text name="city" default="Default city" />
+        <Text name="email" model={{ email: "model@example.com" }} />
+        <Text name="nested[value]" model={{ nested: { value: "deep" } }} />
+        <Text name="unbound" model={false} default="Fallback" />
+      </Form>,
+    )
+    expect(value("Name")).toBe("From model")
+    expect(value("City")).toBe("Default city")
+    expect(value("Email")).toBe("old@example.com")
+    expect(value("Nested Value")).toBe("deep")
+    expect(value("Unbound")).toBe("Fallback")
+  })
+
+  it("uses old input even when it is null (the key was submitted)", () => {
+    render(
+      <Form model={{ title: "ބޮޑު ސުރުޚީ" }} old={{ title: null }}>
+        <Text name="title" />
+      </Form>,
+    )
+    expect(value("Title")).toBe("")
+  })
+
+  it("reads bracket names as nested paths: address[city] → address.city", () => {
+    const { container } = render(
+      <Form model={{ address: { city: "މާލެ" }, items: [{ name: "ފޮތް" }] }}>
+        <Text name="address[city]" />
+        <Text name="items[0][name]" />
+      </Form>,
+    )
+    expect(value("Address City")).toBe("މާލެ")
+    expect(values(container).get("items[0][name]")).toBe("ފޮތް")
+    expect(screen.getByLabelText("Address City")).toHaveAttribute("id", "address-city")
+  })
+
+  it("lets old input from the provider apply to every form, and a form's old prop win", () => {
+    render(
+      <FormsProvider old={{ title: "From provider", body: "Provider body" }}>
+        <Form>
+          <Text name="title" />
+        </Form>
+        <Form old={{ body: "From form" }}>
+          <Textarea name="body" />
+        </Form>
+      </FormsProvider>,
+    )
+    expect(value("Title")).toBe("From provider")
+    expect(value("Body")).toBe("From form")
+  })
+
+  it("binds nested models with Model, and a field's model prop wins", () => {
+    render(
+      <Form model={{ name: "Ali", profile: { bio: "Hello" } }}>
+        <Model model={{ bio: "From profile" }}>
+          <Textarea name="bio" />
+        </Model>
+        <Text name="name" />
+        <OldInput old={{}}>
+          <Text name="role" model={{ role: "Editor" }} />
+        </OldInput>
+      </Form>,
+    )
+    expect(value("Bio")).toBe("From profile")
+    expect(value("Name")).toBe("Ali")
+    expect(value("Role")).toBe("Editor")
+  })
+
+  it("prints booleans and numbers like Blade's {{ }}", () => {
+    const { container } = render(
+      <Form model={{ active: true, archived: false, count: 0 }}>
+        <Hidden name="active" />
+        <Hidden name="archived" />
+        <NumberField name="count" />
+      </Form>,
+    )
+    expect(values(container).get("active")).toBe("1")
+    expect(values(container).get("archived")).toBe("")
+    expect(values(container).get("count")).toBe("0")
+  })
+
+  it("follows the model when it changes after the first render", () => {
+    const { rerender } = render(
+      <Form model={{ title: "" }}>
+        <Text name="title" />
+      </Form>,
+    )
+    rerender(
+      <Form model={{ title: "Loaded" }}>
+        <Text name="title" />
+      </Form>,
+    )
+    expect(value("Title")).toBe("Loaded")
+  })
+
+  it("keeps a controlled value over everything", () => {
+    render(
+      <Form model={{ title: "Model" }} old={{ title: "Old" }}>
+        <Text name="title" value="Controlled" onChange={() => {}} />
+      </Form>,
+    )
+    expect(value("Title")).toBe("Controlled")
+  })
+})
+
+describe("checkboxes and radios", () => {
+  it("are checked from a boolean, an array of values or the default", () => {
+    const { container } = render(
+      <Form model={{ is_featured: true, channels: ["sms"], notify: null }}>
+        <Checkbox name="is_featured" />
+        <Checkbox name="channels[]" value="email" label="Email" />
+        <Checkbox name="channels[]" value="sms" label="SMS" />
+        <Checkbox name="notify" default />
+        <Checkbox name="hidden_flag" model={false} />
+      </Form>,
+    )
+    const data = values(container)
+    expect(data.get("is_featured")).toBe("1")
+    expect(data.getAll("channels[]")).toEqual(["sms"])
+    expect(data.get("notify")).toBe("1")
+    expect(data.get("hidden_flag")).toBeNull()
+  })
+
+  it("follow old input only, once there is any (an unchecked box isn't submitted)", () => {
+    const { container } = render(
+      <Form model={{ is_featured: true, channels: ["sms"] }} old={{ title: "x", channels: ["email"] }}>
+        <Checkbox name="is_featured" />
+        <Checkbox name="channels[]" value="email" label="Email" />
+        <Checkbox name="channels[]" value="sms" label="SMS" />
+      </Form>,
+    )
+    const data = values(container)
+    expect(data.get("is_featured")).toBeNull()
+    expect(data.getAll("channels[]")).toEqual(["email"])
+  })
+
+  it("give grouped checkboxes unique ids", () => {
+    render(
+      <Form>
+        <Checkbox name="channels[]" value="email" label="Email" />
+        <Checkbox name="channels[]" value="sms" label="SMS" />
+      </Form>,
+    )
+    expect(screen.getByLabelText("Email")).toHaveAttribute("id", "channels-email")
+    expect(screen.getByLabelText("SMS")).toHaveAttribute("id", "channels-sms")
+  })
+
+  it("select the radio whose value is bound, and move the selection on click", () => {
+    const { container } = render(
+      <Form model={{ type: "video" }}>
+        <Radio name="type" value="quiz" label="Quiz" />
+        <Radio name="type" value="video" label="Video" />
+      </Form>,
+    )
+    expect(values(container).get("type")).toBe("video")
+    fireEvent.click(screen.getByLabelText("Quiz"))
+    expect(values(container).get("type")).toBe("quiz")
+    expect(screen.getByLabelText("Video")).not.toBeChecked()
+  })
+})
+
+describe("selects", () => {
+  it("prefer default over the bound value, as Blade's Select does", () => {
+    const { container } = render(
+      <Form model={{ status: "draft" }}>
+        <Select name="status" default="published" options={{ draft: "Draft", published: "Published" }} />
+      </Form>,
+    )
+    expect(values(container).get("status")).toBe("published")
+  })
+
+  it("read relations: a model becomes its key, a collection its keys", () => {
+    const { container } = render(
+      <Form model={{ category: { id: 2, name: "News" }, tags: [{ id: 1 }, { id: 3 }] }}>
+        <Select2
+          name="category"
+          relation
+          options={[
+            { id: 1, name: "Events" },
+            { id: 2, name: "News" },
+          ]}
+        />
+        <Select2 name="tags[]" relation multiple options={{ 1: "Harbour", 2: "Weather", 3: "Transport" }} />
+      </Form>,
+    )
+    const data = values(container)
+    expect(data.get("category")).toBe("2")
+    expect(data.getAll("tags[]")).toEqual(["1", "3"])
+    expect(data.get("sync_tags")).toBe("1")
+  })
+
+  it("use old input for multiple values", () => {
+    const { container } = render(
+      <Form model={{ tags: ["1"] }} old={{ tags: ["2", "3"] }}>
+        <Select2 name="tags[]" multiple options={{ 1: "Harbour", 2: "Weather", 3: "Transport" }} />
+      </Form>,
+    )
+    expect(values(container).getAll("tags[]")).toEqual(["2", "3"])
+  })
+})
+
+describe("dates", () => {
+  it("submit Laravel's formats whatever the bound value's format", () => {
+    const { container } = render(
+      <Form model={{ published_on: "2026-11-04", starts_at: "2026-11-04 09:30:00" }}>
+        <DateField name="published_on" />
+        <Datetime name="starts_at" />
+      </Form>,
+    )
+    expect(values(container).get("published_on")).toBe("2026-11-04")
+    expect(values(container).get("starts_at")).toBe("2026-11-04 09:30:00")
+  })
+})

From 450f7781517bd559c9c12c1246464a37c7fc05b9 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 13:13:43 +0500
Subject: [PATCH 06/18] Automatic error display

Errors from page props, error bags, useForm, 422 responses (onSubmit or
the fetch router) and props; dot/bracket/array keys; ErrorSummary;
aria-invalid/aria-describedby; focus the first invalid field.

Closes #10

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/automatic-errors.md |   5 +
 docs/basic-usage/errors.md     |  63 ++++++++
 src/core/errors.test.tsx       | 255 +++++++++++++++++++++++++++++++++
 3 files changed, 323 insertions(+)
 create mode 100644 .changeset/automatic-errors.md
 create mode 100644 docs/basic-usage/errors.md
 create mode 100644 src/core/errors.test.tsx

diff --git a/.changeset/automatic-errors.md b/.changeset/automatic-errors.md
new file mode 100644
index 0000000..bb94c4b
--- /dev/null
+++ b/.changeset/automatic-errors.md
@@ -0,0 +1,5 @@
+---
+"@javaabu/forms": minor
+---
+
+Validation errors are now handled by the core, for every adapter. Errors come from Inertia page props, `useForm()`, a JSON 422 response, the `errors` prop or `FormsProvider errors`. Fields match them in dot or bracket notation, and array fields (`tags[]`) also collect their items' errors (`tags.0`). Error bags work with `errorBag`. New: `ErrorSummary`, `ValidationError`, `errorsFor`, `selectErrorBag` and `useFormState()`. Invalid fields get `aria-invalid` and `aria-describedby`, and the first one is focused when errors arrive.
diff --git a/docs/basic-usage/errors.md b/docs/basic-usage/errors.md
new file mode 100644
index 0000000..87a1afc
--- /dev/null
+++ b/docs/basic-usage/errors.md
@@ -0,0 +1,63 @@
+---
+title: Validation errors
+sidebar_position: 10
+---
+
+Laravel's validation errors appear under their fields without any code. A field finds its errors by name, in dot or bracket notation, marks itself invalid and links the messages to the control for screen readers. A summary at the top of the form lists every error and links to the fields.
+
+# Where errors come from
+
+| Source | How |
+| --- | --- |
+| Inertia page props | Automatic with the [Inertia router](../advanced-usage/inertia): `usePage().props.errors`, and the form's `errorBag` |
+| Inertia `useForm()` | `<Form form={form}>` shows `form.errors` |
+| A JSON 422 response | `onSubmit` throws (or rejects with) the response, the axios error or the body; or the `fetchRouter` gets one |
+| Your own code | `<Form errors={{ email: "Taken." }}>`, `useFormState().setErrors(errors)`, or `throw new ValidationError(errors)` in `onSubmit` |
+| Server-rendered pages | `<FormsProvider errors={…}>` for every form |
+
+```tsx
+import { Form, Text, Submit, ValidationError } from "@javaabu/forms"
+
+<Form
+  action="/subscribe"
+  onSubmit={async (values) => {
+    const response = await fetch("/subscribe", { method: "POST", body: JSON.stringify(values) })
+    if (!response.ok) throw response // a 422 shows its errors
+  }}
+>
+  <Text name="email" type="email" />
+  <Submit>ސަބްސްކްރައިބް</Submit>
+</Form>
+```
+
+# Names and keys
+
+| Field name | Laravel error key |
+| --- | --- |
+| `email` | `email` |
+| `address[city]` | `address.city` |
+| `items[0][name]` | `items.0.name` |
+| `tags[]` | `tags`, and each item: `tags.0`, `tags.1` |
+
+# Error bags
+
+Laravel's named error bags (`$request->validateWithBag('createUser', …)`) arrive as `{ createUser: { email: […] } }`. Pick a bag with `errorBag`:
+
+```tsx
+<Form errorBag="createUser" action={store()}>…</Form>
+```
+
+Without `errorBag`, a form reads the default bag. With the Inertia router, `errorBag` is also sent with the visit.
+
+# Showing errors
+
+- Each field shows all its messages under the control. `showErrors={false}` hides them and the invalid state.
+- `<Errors name="terms" />` shows a field's first error anywhere in the form (`firstOnly={false}` for all of them), like Blade's `<x-forms::errors>`.
+- The form shows `<ErrorSummary>` at the top. `summary={false}` turns it off, and `summaryTitle` changes its heading. Render `<ErrorSummary />` yourself inside the form to place it elsewhere, or outside a form with `errors`.
+- When the user edits a field, its error goes away until the next submit.
+
+# Accessibility
+
+- Invalid controls get `aria-invalid="true"` and `aria-describedby` pointing at the help text and the errors, which are in a polite live region.
+- When errors arrive, the first invalid field is focused (and revealed, if it is in a closed tab or accordion). `focusOnError={false}` turns that off. With only a general message, the summary takes focus.
+- The summary links move focus to their fields.
diff --git a/src/core/errors.test.tsx b/src/core/errors.test.tsx
new file mode 100644
index 0000000..1f288cb
--- /dev/null
+++ b/src/core/errors.test.tsx
@@ -0,0 +1,255 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+import { Checkbox } from "../components/checkbox"
+import { ErrorSummary, Errors, Form } from "../components/form"
+import { Text } from "../components/inputs"
+import { Select2 } from "../components/select"
+import {
+  ValidationError,
+  errorsFor,
+  findField,
+  getValidationErrors,
+  readValidationErrors,
+  selectErrorBag,
+  toDotNotation,
+  withoutField,
+} from "./errors"
+import { FormsProvider } from "./provider"
+import { fetchRouter } from "./router"
+
+describe("error helpers", () => {
+  it("converts bracket names to Laravel's keys", () => {
+    expect(toDotNotation("items[0][name]")).toBe("items.0.name")
+    expect(toDotNotation("tags[]")).toBe("tags")
+    expect(toDotNotation("email")).toBe("email")
+  })
+
+  it("finds a field's errors, including the items of an array field", () => {
+    const errors = { "address.city": "Required.", tags: ["Pick one."], "tags.1": "Invalid tag.", "tags.x": "No." }
+    expect(errorsFor(errors, "address[city]")).toEqual(["Required."])
+    expect(errorsFor(errors, "tags[]")).toEqual(["Pick one.", "Invalid tag."])
+    expect(errorsFor(errors, "tags[]", true)).toEqual(["Pick one."])
+    expect(errorsFor(errors, "missing")).toEqual([])
+  })
+
+  it("picks an error bag, or the default bag's flat errors", () => {
+    const page = { email: "Taken.", createUser: { name: "Required." } }
+    expect(selectErrorBag(page)).toEqual({ email: "Taken." })
+    expect(selectErrorBag(page, "createUser")).toEqual({ name: "Required." })
+    expect(selectErrorBag(page, "missing")).toBeNull()
+    expect(selectErrorBag(null)).toBeNull()
+  })
+
+  it("removes a field's errors", () => {
+    const errors = { tags: "a", "tags.0": "b", title: "c" }
+    expect(withoutField(errors, "tags[]")).toEqual({ title: "c" })
+    expect(withoutField(errors, "other")).toBe(errors)
+  })
+
+  it("reads validation payloads from thrown values and responses", async () => {
+    const body = { message: "Invalid.", errors: { email: ["Taken."] } }
+    expect(getValidationErrors(body)).toEqual(body)
+    expect(getValidationErrors({ response: { data: body } })).toEqual(body)
+    expect(getValidationErrors(new ValidationError({ email: "Taken." }))).toEqual({ errors: { email: "Taken." } })
+    expect(getValidationErrors(new Error("nope"))).toBeNull()
+    const response = new Response(JSON.stringify(body), { status: 422 })
+    expect(await readValidationErrors(response)).toEqual(body)
+    expect(await readValidationErrors(new Response("{}", { status: 500 }))).toBeNull()
+  })
+
+  it("finds the control of an error key", () => {
+    document.body.innerHTML = '<input name="items[0][name]"><input name="tags[]">'
+    expect(findField(document, "items.0.name")).toBe(document.querySelector("[name='items[0][name]']"))
+    expect(findField(document, "tags.2")).toBe(document.querySelector("[name='tags[]']"))
+    document.body.innerHTML = ""
+  })
+})
+
+describe("errors under fields", () => {
+  it("show under the right field, with aria-invalid and aria-describedby", () => {
+    render(
+      <Form errors={{ "address.city": ["The city field is required."] }} summary={false}>
+        <Text name="address[city]" />
+      </Form>,
+    )
+    const input = screen.getByLabelText("Address City")
+    expect(input).toHaveAttribute("aria-invalid", "true")
+    const message = screen.getByText("The city field is required.")
+    expect(input.getAttribute("aria-describedby")).toContain(message.parentElement!.id)
+  })
+
+  it("collect the item errors of array fields (tags.0 → tags[])", () => {
+    render(
+      <Form errors={{ "tags.0": "The tag is invalid." }} summary={false}>
+        <Select2 name="tags[]" multiple options={{ 1: "Harbour" }} />
+      </Form>,
+    )
+    expect(screen.getByText("The tag is invalid.")).toBeInTheDocument()
+  })
+
+  it("come from FormsProvider errors and the form's error bag", () => {
+    render(
+      <FormsProvider errors={{ email: "Taken.", createUser: { name: "ނަން ލިޔުއްވާ." } }}>
+        <Form summary={false}>
+          <Text name="email" />
+        </Form>
+        <Form errorBag="createUser" summary={false}>
+          <Text name="name" />
+          <Text name="email" id="bag-email" />
+        </Form>
+      </FormsProvider>,
+    )
+    expect(screen.getAllByText("Taken.")).toHaveLength(1)
+    expect(screen.getByText("ނަން ލިޔުއްވާ.")).toBeInTheDocument()
+  })
+
+  it("are hidden with showErrors={false}", () => {
+    render(
+      <Form errors={{ slug: "Taken." }} summary={false}>
+        <Text name="slug" showErrors={false} />
+      </Form>,
+    )
+    expect(screen.queryByText("Taken.")).not.toBeInTheDocument()
+    expect(screen.getByLabelText("Slug")).not.toHaveAttribute("aria-invalid")
+  })
+
+  it("go away when the field is edited", async () => {
+    render(
+      <Form errors={{ title: "Required." }} summary={false}>
+        <Text name="title" />
+        <Checkbox name="agree" />
+      </Form>,
+    )
+    await userEvent.type(screen.getByLabelText("Title"), "ސުރުޚީ")
+    expect(screen.queryByText("Required.")).not.toBeInTheDocument()
+  })
+
+  it("show with Errors anywhere in the form, first message only by default", () => {
+    render(
+      <Form errors={{ terms: ["Accept the terms.", "Really."] }} summary={false}>
+        <Errors name="terms" />
+        <Errors name="terms" firstOnly={false} id="all" />
+      </Form>,
+    )
+    expect(screen.getAllByText("Accept the terms.")).toHaveLength(2)
+    expect(screen.getAllByText("Really.")).toHaveLength(1)
+  })
+})
+
+describe("error summary", () => {
+  it("lists every error with the field's label and focuses the field on click", async () => {
+    render(
+      <Form errors={{ title: "The title field is required.", "items.0.name": "Name the item." }} focusOnError={false}>
+        <Text name="title" label="ސުރުޚީ" />
+        <Text name="items[0][name]" />
+      </Form>,
+    )
+    const summary = document.querySelector("[data-slot=error-summary]")!
+    expect(summary).toHaveTextContent("Please correct the errors below.")
+    const link = summary.querySelector("a[href='#items.0.name']") as HTMLAnchorElement
+    fireEvent.click(link)
+    await waitFor(() => expect(document.querySelector("[name='items[0][name]']")).toHaveFocus())
+  })
+
+  it("renders standalone with its own errors", () => {
+    render(<ErrorSummary errors={{ email: "Taken." }} title="Fix these" />)
+    expect(screen.getByText("Fix these")).toBeInTheDocument()
+    expect(screen.getByText("Taken.")).toBeInTheDocument()
+  })
+
+  it("renders nothing without errors", () => {
+    const { container } = render(<ErrorSummary errors={{}} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+})
+
+describe("errors from submitting", () => {
+  it("focus the first invalid field when onSubmit throws a 422", async () => {
+    const onError = vi.fn()
+    render(
+      <Form
+        onError={onError}
+        onSubmit={() => {
+          throw new Response(JSON.stringify({ message: "Invalid.", errors: { email: ["Taken."] } }), { status: 422 })
+        }}
+      >
+        <Text name="title" />
+        <Text name="email" />
+        <button type="submit">Save</button>
+      </Form>,
+    )
+    fireEvent.click(screen.getByText("Save"))
+    await waitFor(() => expect(screen.getByLabelText("Email")).toHaveFocus())
+    expect(screen.getAllByText("Taken.").length).toBeGreaterThan(0)
+    expect(onError).toHaveBeenCalledWith(expect.any(Response), { message: "Invalid.", errors: { email: ["Taken."] } })
+  })
+
+  it("show a general message when the submit fails for another reason", async () => {
+    render(
+      <Form
+        onSubmit={() => {
+          throw new Error("offline")
+        }}
+      >
+        <button type="submit">Save</button>
+      </Form>,
+    )
+    fireEvent.click(screen.getByText("Save"))
+    expect(await screen.findByText("The form could not be submitted. Please try again.")).toBeInTheDocument()
+  })
+
+  it("read Laravel's JSON 422 with the fetch router", async () => {
+    class FakeXhr {
+      static last: FakeXhr
+      status = 0
+      responseText = ""
+      headers: Record<string, string> = {}
+      listeners: Record<string, () => void> = {}
+      upload = { addEventListener: () => {} }
+      withCredentials = false
+      method = ""
+      url = ""
+      body: unknown
+      constructor() {
+        FakeXhr.last = this
+      }
+      open(method: string, url: string) {
+        this.method = method
+        this.url = url
+      }
+      setRequestHeader(key: string, value: string) {
+        this.headers[key] = value
+      }
+      getResponseHeader() {
+        return "application/json"
+      }
+      addEventListener(type: string, listener: () => void) {
+        this.listeners[type] = listener
+      }
+      send(body: unknown) {
+        this.body = body
+        this.status = 422
+        this.responseText = JSON.stringify({ message: "Invalid.", errors: { "address.city": ["Pick a city."] } })
+        setTimeout(() => this.listeners.load?.(), 0)
+      }
+    }
+    vi.stubGlobal("XMLHttpRequest", FakeXhr)
+    render(
+      <FormsProvider router={fetchRouter} csrfToken="t0ken">
+        <Form method="PATCH" action="/users/1">
+          <Text name="address[city]" />
+          <button type="submit">Save</button>
+        </Form>
+      </FormsProvider>,
+    )
+    fireEvent.click(screen.getByText("Save"))
+    await waitFor(() => expect(screen.getByLabelText("Address City")).toHaveFocus())
+    expect(FakeXhr.last.method).toBe("POST")
+    expect(FakeXhr.last.url).toBe("/users/1")
+    expect(FakeXhr.last.headers["X-CSRF-TOKEN"]).toBe("t0ken")
+    expect((FakeXhr.last.body as FormData).get("_method")).toBe("PATCH")
+    expect(screen.getAllByText("Pick a city.").length).toBeGreaterThan(0)
+    vi.unstubAllGlobals()
+  })
+})

From 837d5a53de2de6a0e91055dab4bb93c23cf16429 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 13:14:22 +0500
Subject: [PATCH 07/18] Lint: match only Tailwind physical utilities, not words
 like "right"

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 eslint.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/eslint.config.js b/eslint.config.js
index b78020d..ba38cb7 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -5,7 +5,7 @@ import tseslint from "typescript-eslint"
 
 /** Physical (left/right) Tailwind utilities; RTL needs the logical ones (ms-, pe-, start-, text-start). */
 const physical =
-  /(^|[\s:"'`])-?(ml|mr|pl|pr|left|right|rounded-l|rounded-r|border-l|border-r|text-left|text-right)(-|\b)/
+  /(^|[\s:"'`])-?((ml|mr|pl|pr|left|right|rounded-l|rounded-r|border-l|border-r)-[\w[]|(text-left|text-right|rounded-l|rounded-r|border-l|border-r)(?![\w-]))/
 
 export default tseslint.config(
   { ignores: ["dist", "coverage", "node_modules", "examples/dist"] },

From 7a71aa216a692ad9d4817a696e2a0ddb4758029c Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 13:16:05 +0500
Subject: [PATCH 08/18] Fix the type of FormsProvider errors (flat errors and
 bags together); add pnpm check

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 AGENTS.md             | 2 +-
 package.json          | 3 ++-
 src/core/errors.ts    | 3 +++
 src/core/provider.tsx | 6 +++---
 src/index.ts          | 1 +
 5 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index d694cdf..509bdae 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -25,7 +25,7 @@
 
 ```bash
 pnpm install
-pnpm lint && pnpm format:check && pnpm typecheck
+pnpm check   # lint, format, typecheck, test, build, examples: run before every push
 pnpm test
 pnpm build
 pnpm examples
diff --git a/package.json b/package.json
index fadc934..9c0ea61 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,8 @@
     "changeset": "changeset",
     "release": "pnpm build && changeset publish",
     "examples": "vite --config examples/vite.config.ts",
-    "examples:build": "vite build --config examples/vite.config.ts"
+    "examples:build": "vite build --config examples/vite.config.ts",
+    "check": "pnpm lint && pnpm format:check && pnpm typecheck && pnpm test && pnpm build && pnpm examples:build"
   },
   "peerDependencies": {
     "@javaabu/onu": "^0.2.1",
diff --git a/src/core/errors.ts b/src/core/errors.ts
index f3d75dd..182ce59 100644
--- a/src/core/errors.ts
+++ b/src/core/errors.ts
@@ -6,6 +6,9 @@
 /** Field errors keyed by field name in Laravel's dot notation (`items.0.name`). */
 export type FormErrors = Record<string, string[] | string | undefined>
 
+/** Errors of a page: the default bag's fields, and named bags (`{ email: "…", createUser: { name: "…" } }`). */
+export type PageErrors = Record<string, string[] | string | FormErrors | undefined>
+
 /** Laravel's 422 response body: `{ message, errors: { "items.0.name": ["…"] } }`. */
 export interface ValidationPayload {
   message?: string
diff --git a/src/core/provider.tsx b/src/core/provider.tsx
index de507fc..d83dd6c 100644
--- a/src/core/provider.tsx
+++ b/src/core/provider.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 
 import type { FormsAdapter, FormsComponents, FormsServices } from "./adapter"
-import type { FormErrors } from "./errors"
+import type { PageErrors } from "./errors"
 import type { FormsRouter } from "./router"
 import { html } from "../adapters/html"
 
@@ -39,7 +39,7 @@ export interface FormsConfig {
    * Validation errors for every form, keyed by field (`{ email: ["…"] }`) or by error bag
    * (`{ createUser: { email: "…" } }`). A form's `errors` prop wins. The Inertia router reads page props itself.
    */
-  errors?: FormErrors | Record<string, FormErrors> | null
+  errors?: PageErrors | null
   /** Resolves `can` / `arg` / `guard` props. Without it, `can` checks fail closed. */
   authorize?: Authorize
   /** Values for `get_setting()` lookups. */
@@ -54,7 +54,7 @@ export interface FormsContextValue {
   translate?: (text: string) => string
   csrfToken?: string | null
   old: Record<string, unknown> | null
-  errors: FormErrors | Record<string, FormErrors> | null
+  errors: PageErrors | null
   authorize?: Authorize
   settings: FormsSettings
 }
diff --git a/src/index.ts b/src/index.ts
index 00cdb5d..82f3927 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -42,6 +42,7 @@ export {
   toDotNotation,
   focusFirstInvalid,
   type FormErrors,
+  type PageErrors,
   type ValidationPayload,
 } from "./core/errors"
 export { useFormState, useFieldErrors, type FormState, type FormStatus } from "./core/form-context"

From 19cd33f03e4ab631eade09b5028efdf27b4bcef3 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 13:18:38 +0500
Subject: [PATCH 09/18] Native Laravel Wayfinder support in Form action

Route objects, .form() variants (the _method query moves into the hidden
field) and route functions called with the bound model.

Closes #8

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/wayfinder.md          |   5 ++
 docs/advanced-usage/wayfinder.md |  62 ++++++++++++++++
 src/core/router.test.tsx         | 117 +++++++++++++++++++++++++++++++
 src/core/router.ts               |   2 +-
 4 files changed, 185 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/wayfinder.md
 create mode 100644 docs/advanced-usage/wayfinder.md
 create mode 100644 src/core/router.test.tsx

diff --git a/.changeset/wayfinder.md b/.changeset/wayfinder.md
new file mode 100644
index 0000000..3be37a6
--- /dev/null
+++ b/.changeset/wayfinder.md
@@ -0,0 +1,5 @@
+---
+"@javaabu/forms": minor
+---
+
+`Form action` accepts Laravel Wayfinder routes: route objects (`store()`), form variants (`update.form(user)`) and route functions (`update`, called with the form's `model`). The route's method is used unless `method` is set, with `_method` spoofing for `PUT`, `PATCH` and `DELETE`. Nothing extra is needed to install.
diff --git a/docs/advanced-usage/wayfinder.md b/docs/advanced-usage/wayfinder.md
new file mode 100644
index 0000000..13a4333
--- /dev/null
+++ b/docs/advanced-usage/wayfinder.md
@@ -0,0 +1,62 @@
+---
+title: Laravel Wayfinder
+sidebar_position: 3
+---
+
+[Laravel Wayfinder](https://github.com/laravel/wayfinder) generates TypeScript functions for your controllers and routes. `Form action` takes what they return, so URLs and methods come from your routes instead of strings.
+
+There's nothing to install or configure in this package: it reads the plain `{ url, method }` objects Wayfinder makes.
+
+# Route objects
+
+```tsx
+import { Form, Text, Submit } from "@javaabu/forms"
+import { store, update } from "@/actions/App/Http/Controllers/UserController"
+
+<Form action={store()}>                {/* POST /users */}
+  <Text name="name" />
+  <Submit />
+</Form>
+
+<Form action={update(user)} model={user}> {/* PUT /users/1, sent as POST with _method=PUT */}
+  <Text name="name" />
+  <Submit />
+</Form>
+```
+
+The route's method is used unless you pass `method`. `PUT`, `PATCH` and `DELETE` are sent as `POST` with a hidden `_method` field, and non-GET forms get `_token`, as in Blade. `GET` routes submit as `GET`, with neither field.
+
+# Route functions and the bound model
+
+Pass the function itself and the form calls it with its `model`:
+
+```tsx
+<Form model={user} action={update}>   {/* update(user) → /users/1 */}
+```
+
+Wayfinder accepts a model object for a route parameter (it reads `id`, or the key you bound), so this works for routes with one parameter. For routes with several parameters, call the function yourself: `action={update({ team: team.id, user: user.id })}`.
+
+# The `.form()` variant
+
+Wayfinder's form variant (`--with-form`) puts the spoofed method in the query string: `update.form(user)` returns `{ action: "/users/1?_method=PUT", method: "post" }`. `Form` accepts that too. It moves `_method` into the hidden field and keeps the other query parameters.
+
+# With Inertia
+
+Route objects work the same with the [Inertia router](./inertia) and with `useForm()`:
+
+```tsx
+const form = useForm({ name: "" })
+
+<Form form={form} action={store()}>…</Form>
+```
+
+# What `action` accepts
+
+| Value | Example | URL and method |
+| --- | --- | --- |
+| A URL | `"/users"` | That URL; `method` or `POST` |
+| A route object | `store()` → `{ url, method }` | `url` and `method` |
+| A form variant | `update.form(user)` → `{ action, method }` | `action` without `_method`; the spoofed method |
+| A route function | `update` | Called with the form's `model` |
+
+`resolveAction(action, model)` does this resolution, if you need it in your own components.
diff --git a/src/core/router.test.tsx b/src/core/router.test.tsx
new file mode 100644
index 0000000..7b0470d
--- /dev/null
+++ b/src/core/router.test.tsx
@@ -0,0 +1,117 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+
+import { Form } from "../components/form"
+import { Text } from "../components/inputs"
+import { FormsProvider } from "./provider"
+import { formDataToObject, resolveAction, withFormData, type FormsRouter, type SubmitRequest } from "./router"
+
+/** Wayfinder-generated route functions look like this: callable, with `.url()` and `.form()`. */
+const update = Object.assign(
+  (args: { id: number } | number) => ({
+    url: `/users/${typeof args === "number" ? args : args.id}`,
+    method: "put" as const,
+  }),
+  {
+    form: (args: { id: number }) => ({ action: `/users/${args.id}?_method=PUT`, method: "post" as const }),
+  },
+)
+const store = () => ({ url: "/users", method: "post" as const })
+const search = () => ({ url: "/users?sort=name", method: "get" as const })
+
+function form(container: HTMLElement) {
+  return container.querySelector("form")!
+}
+
+describe("resolveAction", () => {
+  it("accepts URLs, route objects, form variants and route functions", () => {
+    expect(resolveAction("/users")).toEqual({ url: "/users", method: undefined })
+    expect(resolveAction(store())).toEqual({ url: "/users", method: "post" })
+    expect(resolveAction(update.form({ id: 3 }))).toEqual({ url: "/users/3", method: "put" })
+    expect(resolveAction(update, { id: 7, name: "Aishath" })).toEqual({ url: "/users/7", method: "put" })
+    expect(resolveAction(store)).toEqual({ url: "/users", method: "post" })
+    expect(resolveAction({ url: "/x", method: "HEAD" })).toEqual({ url: "/x", method: "get" })
+    expect(resolveAction(undefined)).toEqual({ url: undefined, method: undefined })
+  })
+
+  it("keeps other query parameters of a form variant", () => {
+    expect(resolveAction({ action: "/users/1?_method=PATCH&tab=2", method: "post" })).toEqual({
+      url: "/users/1?tab=2",
+      method: "patch",
+    })
+  })
+})
+
+describe("Form with Wayfinder routes", () => {
+  it("posts to a route object with its method spoofed", () => {
+    const { container } = render(
+      <FormsProvider csrfToken="t0ken">
+        <Form action={update({ id: 5 })} />
+      </FormsProvider>,
+    )
+    expect(form(container)).toHaveAttribute("action", "/users/5")
+    expect(form(container)).toHaveAttribute("method", "POST")
+    const data = new FormData(form(container))
+    expect(data.get("_method")).toBe("PUT")
+    expect(data.get("_token")).toBe("t0ken")
+  })
+
+  it("calls a route function with the bound model", () => {
+    const { container } = render(<Form model={{ id: 9, name: "Ibrahim" }} action={update} />)
+    expect(form(container)).toHaveAttribute("action", "/users/9")
+    expect(new FormData(form(container)).get("_method")).toBe("PUT")
+  })
+
+  it("lets method win over the route's method", () => {
+    const { container } = render(<Form action={update({ id: 1 })} method="patch" />)
+    expect(new FormData(form(container)).get("_method")).toBe("PATCH")
+  })
+
+  it("submits GET routes without _token or _method", () => {
+    const { container } = render(
+      <FormsProvider csrfToken="t0ken">
+        <Form action={search()} />
+      </FormsProvider>,
+    )
+    expect(form(container)).toHaveAttribute("method", "GET")
+    expect(new FormData(form(container)).has("_token")).toBe(false)
+    expect(new FormData(form(container)).has("_method")).toBe(false)
+  })
+
+  it("passes the route's URL and real method to the router", async () => {
+    const submit = vi.fn<FormsRouter["submit"]>()
+    render(
+      <FormsProvider router={{ name: "test", submit }}>
+        <Form action={update({ id: 4 })} errorBag="editUser" preserveScroll>
+          <Text name="name" default="ޢާއިޝަތު" />
+          <button type="submit">Save</button>
+        </Form>
+      </FormsProvider>,
+    )
+    fireEvent.click(screen.getByText("Save"))
+    await waitFor(() => expect(submit).toHaveBeenCalled())
+    const request = submit.mock.calls[0]![0] as SubmitRequest
+    expect(request.url).toBe("/users/4")
+    expect(request.method).toBe("put")
+    expect(request.errorBag).toBe("editUser")
+    expect(request.options.preserveScroll).toBe(true)
+    expect(request.data.get("name")).toBe("ޢާއިޝަތު")
+    expect(request.data.get("_method")).toBe("PUT")
+  })
+})
+
+describe("FormData helpers", () => {
+  it("turn FormData into an object, repeated names into arrays", () => {
+    const data = new FormData()
+    data.append("name", "Ali")
+    data.append("tags[]", "1")
+    data.append("tags[]", "2")
+    expect(formDataToObject(data)).toEqual({ name: "Ali", "tags[]": ["1", "2"] })
+  })
+
+  it("append FormData to a URL for GET", () => {
+    const data = new FormData()
+    data.append("search", "މާލެ")
+    expect(withFormData("/users?page=2", data)).toBe(`/users?page=2&search=${encodeURIComponent("މާލެ")}`)
+    expect(withFormData("/users", new FormData())).toBe("/users")
+  })
+})
diff --git a/src/core/router.ts b/src/core/router.ts
index 2c010a1..0c9dd31 100644
--- a/src/core/router.ts
+++ b/src/core/router.ts
@@ -20,7 +20,7 @@ export interface RouteFormDefinition {
  * `<Form model={user} action={update}>` posts to `update(user)`.
  */
 export type FormAction =
-  string | RouteDefinition | RouteFormDefinition | ((model?: never) => RouteDefinition | RouteFormDefinition)
+  string | RouteDefinition | RouteFormDefinition | ((...args: never[]) => RouteDefinition | RouteFormDefinition)
 
 export interface ResolvedAction {
   url: string | undefined

From 50f7d8c2a38f0ae5bd9855638efbd410b197e523 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 13:25:12 +0500
Subject: [PATCH 10/18] Native Laravel Inertia support

@javaabu/forms/inertia: a router that submits forms as Inertia visits and
reads errors (every bag) and old input from page props, plus inertiaLinks
for the Link slot. <Form form={useForm()}> binds fields to its data.
Checkbox and radio stores are seeded once with functional updates.

Closes #7

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/inertia.md          |   5 +
 docs/advanced-usage/inertia.md | 105 +++++++++++++
 package.json                   |  12 +-
 pnpm-lock.yaml                 |  63 ++++++++
 src/components/checkbox.tsx    |  22 +--
 src/core/router.ts             |   2 -
 src/inertia.ts                 |   2 +
 src/inertia/index.tsx          |  68 +++++++++
 src/inertia/inertia.test.tsx   | 267 +++++++++++++++++++++++++++++++++
 vite.config.ts                 |   1 +
 10 files changed, 534 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/inertia.md
 create mode 100644 docs/advanced-usage/inertia.md
 create mode 100644 src/inertia.ts
 create mode 100644 src/inertia/index.tsx
 create mode 100644 src/inertia/inertia.test.tsx

diff --git a/.changeset/inertia.md b/.changeset/inertia.md
new file mode 100644
index 0000000..67669eb
--- /dev/null
+++ b/.changeset/inertia.md
@@ -0,0 +1,5 @@
+---
+"@javaabu/forms": minor
+---
+
+New `@javaabu/forms/inertia`. `<FormsProvider router={inertia}>` submits every form as an Inertia visit, with files, method spoofing, error bags, progress, `preserveScroll` / `preserveState` (default `"errors"`) and `resetOnSuccess`. Errors and old input come from the page props. `<Form form={useForm(…)}>` binds the fields to `useForm` data, nested names and checkbox groups included. `inertiaLinks` puts Inertia's `Link` in the `Link` slot. Without Inertia, `fetchRouter` submits JSON requests and shows 422 errors. `@inertiajs/react` (v2 or v3) is an optional peer dependency.
diff --git a/docs/advanced-usage/inertia.md b/docs/advanced-usage/inertia.md
new file mode 100644
index 0000000..15d0367
--- /dev/null
+++ b/docs/advanced-usage/inertia.md
@@ -0,0 +1,105 @@
+---
+title: Inertia
+sidebar_position: 2
+---
+
+Forms work with [Inertia](https://inertiajs.com) in two ways, with no glue code: through the **Inertia router**, which submits every form as an Inertia visit, or with **`useForm()`**, where the fields bind to the form's data. `@inertiajs/react` v2 or v3 is an optional peer dependency; only `@javaabu/forms/inertia` imports it.
+
+# The Inertia router
+
+Set it once, in your layout or `createInertiaApp`'s `setup`:
+
+```tsx
+import { FormsProvider, mergeAdapters } from "@javaabu/forms"
+import { inertia, inertiaLinks } from "@javaabu/forms/inertia"
+import { onu } from "@javaabu/forms/onu"
+
+const ui = mergeAdapters(onu, inertiaLinks)
+
+export default function Layout({ children }) {
+  return (
+    <FormsProvider ui={ui} router={inertia}>
+      {children}
+    </FormsProvider>
+  )
+}
+```
+
+Then forms are plain Blade-style forms:
+
+```tsx
+import { Form, Text, Email, Submit } from "@javaabu/forms"
+import { update } from "@/actions/App/Http/Controllers/UserController"
+
+export default function Edit({ user }) {
+  return (
+    <Form model={user} action={update} preserveScroll>
+      <Text name="name" required />
+      <Email name="email" required />
+      <Submit>ސޭވްކުރޭ</Submit>
+    </Form>
+  )
+}
+```
+
+What happens:
+
+- **Submitting** sends the form's `FormData` with `router.visit`, so files upload and `PUT` / `PATCH` / `DELETE` are spoofed with `_method`, as Laravel expects for multipart bodies. `GET` forms visit the URL with the fields in the query string.
+- **Errors** come from the page's `errors` prop and appear under their fields. `errorBag="createUser"` picks a named bag and is sent with the visit.
+- **State**: `preserveState` defaults to `"errors"`, so a failed submit keeps what the user typed. A successful one shows the new props: fields follow the updated model.
+- **Processing** disables the fields and shows the submit button's spinner. `onProgress` gets the upload percentage, and `useFormStatus().progress` has it too.
+- **Old input**: Inertia keeps the page state, so you rarely need it. If you share `old` (`'old' => fn () => $request->session()->getOldInput()`), forms use it.
+
+Every other visit option goes through `visitOptions`: `<Form visitOptions={{ only: ["users"], replace: true }}>`. `preserveScroll` and `preserveState` also have their own props, and `resetOnSuccess` (all fields, or a list of names) returns the fields to their starting values after a successful submit. `onSuccess(page)` and `onError(errors)` run after the visit.
+
+`inertiaLinks` puts Inertia's `<Link>` in the `Link` slot, so links inside components (tabs, pagination, link buttons) navigate without a full reload. External URLs, `target="_blank"` and downloads stay plain anchors. With the Onu adapter, also set `OnuProvider linkComponent` for Onu's own links.
+
+# `useForm()`
+
+Pass the result of `useForm()` to `form`. The fields read and write `form.data`; nested names (`address[city]`) map to nested data. The form shows `form.errors`, `form.processing` and `form.progress`, and submits with `form.submit()`:
+
+```tsx
+import { useForm } from "@inertiajs/react"
+import { Form, Text, Checkbox, File, Submit } from "@javaabu/forms"
+import { store } from "@/actions/App/Http/Controllers/PostController"
+
+export default function Create() {
+  const form = useForm({ title: "", channels: [], cover: null })
+
+  return (
+    <Form form={form} action={store()} files resetOnSuccess>
+      <Text name="title" thaana />
+      <Checkbox name="channels[]" value="email" label="Email" />
+      <Checkbox name="channels[]" value="sms" label="SMS" />
+      <File name="cover" />
+      <Submit />
+      {form.progress ? <progress value={form.progress.percentage} max={100} /> : null}
+    </Form>
+  )
+}
+```
+
+- A field that isn't in `form.data` yet starts from the model, old input or `default`, and is added to the data.
+- Checkbox groups (`channels[]`) hold an array of the checked values, a single checkbox its value or `false`, and radios the selected value.
+- Editing a field clears its error with `form.clearErrors()`.
+- With `files`, a `PUT` / `PATCH` / `DELETE` is sent as `POST` with `_method` (through `form.transform()`).
+
+Use `useForm()` when the page needs the data in code (live previews, computed fields). Otherwise the router is simpler.
+
+# Without Inertia
+
+Without a router, a form submits natively, like a Blade form. For JSON endpoints, use `fetchRouter` from `@javaabu/forms`: it posts the `FormData` with the CSRF token, shows a 422's errors and passes the response to `onSuccess`:
+
+```tsx
+import { FormsProvider, fetchRouter } from "@javaabu/forms"
+
+<FormsProvider router={fetchRouter}>
+  <Form action="/api/subscribers" onSuccess={(body) => toast(body.message)}>…</Form>
+</FormsProvider>
+```
+
+Or handle it yourself with `onSubmit`. See [Validation errors](../basic-usage/errors).
+
+# Writing a router
+
+A router is `{ name, submit(request, callbacks), usePageErrors?, useOldInput? }` (`FormsRouter`). `submit` gets the URL, the real method, the `FormData`, the form element, the error bag and the visit options, and calls `onStart`, `onProgress`, `onSuccess`, `onError(errors)`, `onFailure(error)` and `onFinish`. The two optional hooks return the current page's errors (every bag) and old input.
diff --git a/package.json b/package.json
index 9c0ea61..d0d90e3 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,11 @@
       "import": "./dist/onu-maps.js",
       "require": "./dist/onu-maps.cjs"
     },
+    "./inertia": {
+      "types": "./dist/inertia.d.ts",
+      "import": "./dist/inertia.js",
+      "require": "./dist/inertia.cjs"
+    },
     "./testing": {
       "types": "./dist/testing.d.ts",
       "import": "./dist/testing.js",
@@ -95,9 +100,10 @@
   },
   "peerDependencies": {
     "@javaabu/onu": "^0.2.1",
+    "@testing-library/react": "^16.0.0",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0",
-    "@testing-library/react": "^16.0.0"
+    "@inertiajs/react": "^2.0.0 || ^3.0.0"
   },
   "devDependencies": {
     "@changesets/cli": "^3.0.3",
@@ -105,6 +111,7 @@
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/noto-sans-thaana": "^5.3.0",
+    "@inertiajs/react": "^3.11.0",
     "@javaabu/onu": "^0.2.1",
     "@tailwindcss/vite": "^4.3.3",
     "@tanstack/react-query": "^5.104.5",
@@ -148,6 +155,9 @@
     },
     "@testing-library/react": {
       "optional": true
+    },
+    "@inertiajs/react": {
+      "optional": true
     }
   },
   "pnpm": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d25998f..53c9fe1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,6 +27,9 @@ importers:
       '@fontsource-variable/noto-sans-thaana':
         specifier: ^5.3.0
         version: 5.3.0
+      '@inertiajs/react':
+        specifier: ^3.11.0
+        version: 3.11.0(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
       '@javaabu/onu':
         specifier: ^0.2.1
         version: 0.2.1(57d55d6dbb0eaaaa1f7be11acef43371)
@@ -449,6 +452,30 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@inertiajs/core@3.11.0':
+    resolution: {integrity: sha512-YDqkKHsTiDUKofVzE3p6IduuU1u0ZwmheSpk2AZP6Eig3ZwhTlchDiLbUhFUCd138naqlhjRh2rTxIXeKrnmOQ==}
+    peerDependencies:
+      axios: ^1.15.2
+    peerDependenciesMeta:
+      axios:
+        optional: true
+
+  '@inertiajs/react@3.11.0':
+    resolution: {integrity: sha512-G5JZ5B27hPuwPEJ/vw3aW4eFJ4KmGvmcFkA+28IXXgOFQcse0GPCmv0/lLAw2vbbLMNqcsNzWNJH9XJmOZkejA==}
+    peerDependencies:
+      '@laravel/echo-react': ^2.0.0
+      '@types/react': ^19.0.0
+      '@types/react-dom': ^19.0.0
+      react: ^19.0.0
+      react-dom: ^19.0.0
+    peerDependenciesMeta:
+      '@laravel/echo-react':
+        optional: true
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@internationalized/date@3.12.4':
     resolution: {integrity: sha512-M1dEn4c1U1HsSlaVR8upZtSqvXrTkHDfv18H01uCSJyjVLDxnBR38v/fMxecmlwXKR4i9HeZcmgQAPE6A+aGJQ==}
 
@@ -2118,6 +2145,9 @@ packages:
   es-module-lexer@2.3.2:
     resolution: {integrity: sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==}
 
+  es-toolkit@1.53.1:
+    resolution: {integrity: sha512-VhMc6IXmexu8iYFfL2aaAww6IvJTdHlqBLruLoEUs33YD4IcP5DdZcLOybMsMmmLsiy1c8PsiLsrM0DdIuuRUA==}
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -2371,6 +2401,14 @@ packages:
   keyv@5.6.0:
     resolution: {integrity: sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==}
 
+  laravel-precognition@2.1.1:
+    resolution: {integrity: sha512-Wg05+puJ5qiNsE8rdO5JmSiqQ2xcEf7442AIZiDhZg1JyPOePv5SSCu0fO7z7LqmJcPMxNNuOIcZd6UatEmYug==}
+    peerDependencies:
+      axios: ^1.4.0
+    peerDependenciesMeta:
+      axios:
+        optional: true
+
   launch-editor@2.14.2:
     resolution: {integrity: sha512-NHJEb30MGBCkmZXLZwz25t37QR4aY03ZzPYUJXOJaOa92uWwExI9SBQUuIznBYc1xkD7cJNGX7oc3Nl3sq2kQQ==}
 
@@ -3531,6 +3569,25 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@inertiajs/core@3.11.0':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      es-toolkit: 1.53.1
+      laravel-precognition: 2.1.1
+
+  '@inertiajs/react@3.11.0(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)':
+    dependencies:
+      '@inertiajs/core': 3.11.0
+      es-toolkit: 1.53.1
+      laravel-precognition: 2.1.1
+      react: 19.3.1
+      react-dom: 19.3.1(react@19.3.1)
+    optionalDependencies:
+      '@types/react': 19.3.0
+      '@types/react-dom': 19.3.0(@types/react@19.3.0)
+    transitivePeerDependencies:
+      - axios
+
   '@internationalized/date@3.12.4':
     dependencies:
       '@swc/helpers': 0.5.23
@@ -5117,6 +5174,8 @@ snapshots:
 
   es-module-lexer@2.3.2: {}
 
+  es-toolkit@1.53.1: {}
+
   escalade@3.2.0: {}
 
   escape-string-regexp@4.0.0: {}
@@ -5361,6 +5420,10 @@ snapshots:
     dependencies:
       '@keyv/serialize': 1.1.1
 
+  laravel-precognition@2.1.1:
+    dependencies:
+      es-toolkit: 1.53.1
+
   launch-editor@2.14.2:
     dependencies:
       picocolors: 1.1.1
diff --git a/src/components/checkbox.tsx b/src/components/checkbox.tsx
index 1d4b448..76aa377 100644
--- a/src/components/checkbox.tsx
+++ b/src/components/checkbox.tsx
@@ -67,18 +67,20 @@ function useChoiceStore(name: string, value: string, kind: "checkbox" | "radio",
   const group = kind === "checkbox" && name.endsWith("[]")
   const key = group ? before(name, "[]") : name
 
+  // Seed the store once. Functional updates, so boxes of one group don't overwrite each other.
+  const seeded = React.useRef(false)
   React.useEffect(() => {
-    if (!store) return
-    if (group) {
-      store.update(key, (current) => {
+    if (!store || seeded.current) return
+    seeded.current = true
+    store.update(key, (current) => {
+      if (group) {
+        if (current === undefined || current === null) return initial ? [value] : []
         const list = wrap(current as unknown).map(toFormString)
-        return initial && !list.includes(value) ? [...list, value] : list
-      })
-    } else if (kind === "radio") {
-      if (initial || !store.has(key)) store.update(key, (current) => (initial ? value : (current ?? "")))
-    } else if (!store.has(key)) {
-      store.set(key, initial ? value : false)
-    }
+        return initial && !list.includes(value) ? [...list, value] : current
+      }
+      if (kind === "radio") return initial ? value : (current ?? "")
+      return current === undefined ? (initial ? value : false) : current
+    })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [store, key])
 
diff --git a/src/core/router.ts b/src/core/router.ts
index 0c9dd31..fb9496d 100644
--- a/src/core/router.ts
+++ b/src/core/router.ts
@@ -77,8 +77,6 @@ export interface VisitOptions {
   only?: string[]
   except?: string[]
   headers?: Record<string, string>
-  /** Reset the form's fields after a successful submit. `true` for all of them, or field names. */
-  reset?: boolean | string[]
   [option: string]: unknown
 }
 
diff --git a/src/inertia.ts b/src/inertia.ts
new file mode 100644
index 0000000..7d5e5bb
--- /dev/null
+++ b/src/inertia.ts
@@ -0,0 +1,2 @@
+// `@javaabu/forms/inertia`: submit through Inertia and read errors from page props.
+export { inertia, inertiaLinks } from "./inertia/index"
diff --git a/src/inertia/index.tsx b/src/inertia/index.tsx
new file mode 100644
index 0000000..fcda760
--- /dev/null
+++ b/src/inertia/index.tsx
@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import { Link as InertiaLink, router as inertiaRouter, usePage } from "@inertiajs/react"
+
+import { defineAdapter, type LinkSlotProps } from "../core/adapter"
+import type { FormErrors } from "../core/errors"
+import { withFormData, type FormsRouter } from "../core/router"
+
+/**
+ * Submits forms as Inertia visits, and reads validation errors (every error bag)
+ * and old input from the page props:
+ *
+ * ```tsx
+ * <FormsProvider ui={onu} router={inertia}>
+ * ```
+ *
+ * - The visit sends the form's `FormData`, so files upload and `_method` spoofing
+ *   works as with a native submit. `GET` forms visit the URL with the fields in the query.
+ * - `preserveState` defaults to `"errors"`: a failed submit keeps what the user typed.
+ * - Old input comes from an `old` shared prop, when you share one.
+ */
+export const inertia: FormsRouter = {
+  name: "inertia",
+  submit({ url, method, data, errorBag, options }, callbacks) {
+    const visit = {
+      preserveState: "errors" as const,
+      ...options,
+      errorBag: errorBag ?? null,
+      onStart: () => callbacks.onStart(),
+      onProgress: (progress?: { percentage?: number }) => {
+        if (progress?.percentage !== undefined) callbacks.onProgress(progress.percentage)
+      },
+      onSuccess: (page: unknown) => callbacks.onSuccess(page),
+      onError: (errors: FormErrors) => callbacks.onError(errors),
+      onHttpException: (response: unknown) => {
+        callbacks.onFailure(response)
+      },
+      onNetworkError: (error: Error) => {
+        callbacks.onFailure(error)
+      },
+      onFinish: () => callbacks.onFinish(),
+    }
+    if (method === "get") {
+      // Keep `name[]` keys as they are: build the query from the form, as a native GET would.
+      inertiaRouter.visit(withFormData(url, data), { ...visit, method: "get" } as never)
+    } else {
+      // `data` already has `_method` for PUT / PATCH / DELETE, which Laravel needs for multipart bodies.
+      inertiaRouter.visit(url, { ...visit, method: "post", data } as never)
+    }
+  },
+  usePageErrors: () => (usePage().props as { errors?: unknown }).errors,
+  useOldInput: () => (usePage().props as { old?: Record<string, unknown> | null }).old ?? undefined,
+}
+
+function Link({ href, ...props }: LinkSlotProps) {
+  // External links and downloads stay plain anchors.
+  const external = /^[a-z][a-z\d+.-]*:/i.test(href) || props.target === "_blank" || props.download !== undefined
+  if (external || !href || href.startsWith("#")) return <a href={href} {...props} />
+  return <InertiaLink href={href} {...(props as Omit<React.ComponentProps<typeof InertiaLink>, "href">)} />
+}
+
+/**
+ * Inertia's `<Link>` for the `Link` slot, so links inside components (tabs,
+ * pagination, link buttons of the HTML adapter) navigate without a full reload:
+ * `ui={mergeAdapters(onu, inertiaLinks)}`.
+ */
+export const inertiaLinks = defineAdapter({ name: "inertia-links", components: { Link } })
diff --git a/src/inertia/inertia.test.tsx b/src/inertia/inertia.test.tsx
new file mode 100644
index 0000000..d6b844f
--- /dev/null
+++ b/src/inertia/inertia.test.tsx
@@ -0,0 +1,267 @@
+import * as React from "react"
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
+
+import { Checkbox, Radio } from "../components/checkbox"
+import { Form, type InertiaFormLike } from "../components/form"
+import { File } from "../components/files"
+import { Text } from "../components/inputs"
+import { Select2 } from "../components/select"
+import { mergeAdapters } from "../core/adapter"
+import { FormsProvider } from "../core/provider"
+import { html } from "../adapters/html"
+import { LinkButton } from "../components/buttons"
+import { inertia, inertiaLinks } from "."
+
+type Callbacks = {
+  onStart?: () => void
+  onProgress?: (p?: { percentage?: number }) => void
+  onSuccess?: (page: unknown) => void
+  onError?: (errors: Record<string, string>) => void
+  onHttpException?: (response: unknown) => void
+  onFinish?: () => void
+  [key: string]: unknown
+}
+
+const page = { props: { errors: {} as Record<string, unknown>, old: undefined as Record<string, unknown> | undefined } }
+const visit = vi.fn<(url: string, options: Callbacks & { method: string; data?: FormData }) => void>()
+
+vi.mock("@inertiajs/react", () => ({
+  router: { visit: (url: string, options: never) => visit(url, options) },
+  usePage: () => page,
+  Link: ({ href, children, ...props }: { href: string; children?: React.ReactNode }) => (
+    <a href={href} data-inertia-link="" {...props}>
+      {children}
+    </a>
+  ),
+}))
+
+beforeEach(() => {
+  visit.mockReset()
+  page.props = { errors: {}, old: undefined }
+})
+
+function withInertia(ui: React.ReactElement) {
+  return render(<FormsProvider router={inertia}>{ui}</FormsProvider>)
+}
+
+describe("the Inertia router", () => {
+  it("visits the action with the form's data, spoofed method and error bag", async () => {
+    withInertia(
+      <Form action="/users/3" method="PATCH" errorBag="editUser" preserveScroll files>
+        <Text name="name" default="ޢަލީ" />
+        <File name="avatar" />
+        <button type="submit">Save</button>
+      </Form>,
+    )
+    fireEvent.click(screen.getByText("Save"))
+    await waitFor(() => expect(visit).toHaveBeenCalledTimes(1))
+    const [url, options] = visit.mock.calls[0]!
+    expect(url).toBe("/users/3")
+    expect(options.method).toBe("post")
+    expect(options.data!.get("_method")).toBe("PATCH")
+    expect(options.data!.get("name")).toBe("ޢަލީ")
+    expect(options.errorBag).toBe("editUser")
+    expect(options.preserveScroll).toBe(true)
+    expect(options.preserveState).toBe("errors")
+  })
+
+  it("visits GET forms with the fields in the query", async () => {
+    withInertia(
+      <Form action="/users" method="GET">
+        <Text name="search" default="މާލެ" />
+        <button type="submit">Search</button>
+      </Form>,
+    )
+    fireEvent.click(screen.getByRole("button", { name: "Search" }))
+    await waitFor(() => expect(visit).toHaveBeenCalled())
+    expect(visit.mock.calls[0]![0]).toBe(`/users?search=${encodeURIComponent("މާލެ")}`)
+    expect(visit.mock.calls[0]![1].method).toBe("get")
+  })
+
+  it("shows processing and progress, and validation errors from the visit", async () => {
+    const onProgress = vi.fn()
+    withInertia(
+      <Form action="/users" onProgress={onProgress}>
+        <Text name="email" />
+        <button type="submit">Save</button>
+      </Form>,
+    )
+    fireEvent.click(screen.getByText("Save"))
+    await waitFor(() => expect(visit).toHaveBeenCalled())
+    const options = visit.mock.calls[0]![1]
+    act(() => options.onStart!())
+    expect(document.querySelector("form")).toHaveAttribute("aria-busy", "true")
+    act(() => options.onProgress!({ percentage: 40 }))
+    expect(onProgress).toHaveBeenCalledWith(40)
+    act(() => {
+      options.onError!({ email: "The email has already been taken." })
+      options.onFinish!()
+    })
+    expect(document.querySelector("form")).not.toHaveAttribute("aria-busy")
+    expect(screen.getAllByText("The email has already been taken.").length).toBeGreaterThan(0)
+    await waitFor(() => expect(screen.getByLabelText("Email")).toHaveFocus())
+  })
+
+  it("calls onSuccess and resets the fields with resetOnSuccess", async () => {
+    const onSuccess = vi.fn()
+    withInertia(
+      <Form action="/messages" onSuccess={onSuccess} resetOnSuccess>
+        <Text name="message" />
+        <button type="submit">Send</button>
+      </Form>,
+    )
+    fireEvent.change(screen.getByLabelText("Message"), { target: { value: "ސަލާމް" } })
+    fireEvent.click(screen.getByText("Send"))
+    await waitFor(() => expect(visit).toHaveBeenCalled())
+    const options = visit.mock.calls[0]![1]
+    act(() => {
+      options.onSuccess!({ component: "Messages" })
+      options.onFinish!()
+    })
+    expect(onSuccess).toHaveBeenCalledWith({ component: "Messages" })
+    expect(screen.getByLabelText("Message")).toHaveValue("")
+  })
+
+  it("shows a general message on a server error", async () => {
+    withInertia(
+      <Form action="/users">
+        <button type="submit">Save</button>
+      </Form>,
+    )
+    fireEvent.click(screen.getByText("Save"))
+    await waitFor(() => expect(visit).toHaveBeenCalled())
+    act(() => visit.mock.calls[0]![1].onHttpException!({ status: 500 }))
+    expect(await screen.findByText("The form could not be submitted. Please try again.")).toBeInTheDocument()
+  })
+
+  it("reads errors (with bags) and old input from the page props", () => {
+    page.props = {
+      errors: { title: "Required.", createUser: { name: "ނަން ލިޔުއްވާ." } },
+      old: { title: "Old title" },
+    }
+    withInertia(
+      <>
+        <Form summary={false}>
+          <Text name="title" />
+        </Form>
+        <Form errorBag="createUser" summary={false}>
+          <Text name="name" />
+        </Form>
+      </>,
+    )
+    expect(screen.getByText("Required.")).toBeInTheDocument()
+    expect(screen.getByText("ނަން ލިޔުއްވާ.")).toBeInTheDocument()
+    expect(screen.getByLabelText("Title")).toHaveValue("Old title")
+  })
+})
+
+/** A stand-in for Inertia's `useForm()`, with the same shape. */
+function useFakeForm<T extends Record<string, unknown>>(initial: T, submit = vi.fn()) {
+  const [data, setDataState] = React.useState<T>(initial)
+  const [errors, setErrors] = React.useState<Record<string, string>>({})
+  const transform = React.useRef<(d: T) => unknown>((d) => d)
+  const form: InertiaFormLike & { data: T } = {
+    data,
+    errors,
+    processing: false,
+    progress: null,
+    setData: ((keyOrFn: unknown, value?: unknown) => {
+      if (typeof keyOrFn === "function") setDataState((d) => (keyOrFn as (d: T) => T)(d))
+      else setDataState((d) => ({ ...d, [keyOrFn as string]: value }))
+    }) as never,
+    submit: ((method: string, url: string, options: Callbacks) =>
+      submit(method, url, transform.current(data), options, setErrors)) as never,
+    clearErrors: (...fields: string[]) =>
+      setErrors((e) => Object.fromEntries(Object.entries(e).filter(([k]) => !fields.includes(k)))),
+    transform: ((fn: (d: T) => unknown) => (transform.current = fn)) as never,
+    reset: vi.fn(),
+  }
+  return form
+}
+
+describe("Inertia's useForm()", () => {
+  it("binds the fields to form.data and submits through form.submit", async () => {
+    const submit = vi.fn()
+    const latest: { data: Record<string, unknown> } = { data: {} }
+    function Page() {
+      const form = useFakeForm(
+        { name: "ޢާއިޝަތު", address: { city: "" }, channels: ["sms"], type: "", tags: [] as string[] },
+        submit,
+      )
+      React.useEffect(() => {
+        latest.data = form.data as Record<string, unknown>
+      })
+      return (
+        <Form form={form} action={{ url: "/users", method: "post" }}>
+          <Text name="name" />
+          <Text name="address[city]" />
+          <Checkbox name="channels[]" value="email" label="Email" />
+          <Checkbox name="channels[]" value="sms" label="SMS" />
+          <Checkbox name="agree" />
+          <Radio name="type" value="quiz" label="Quiz" />
+          <Radio name="type" value="video" label="Video" />
+          <Select2 name="tags" multiple options={{ 1: "Harbour", 2: "Weather" }} />
+          <button type="submit">Save</button>
+        </Form>
+      )
+    }
+    render(<Page />)
+    expect(screen.getByLabelText("Name")).toHaveValue("ޢާއިޝަތު")
+    fireEvent.change(screen.getByLabelText("Address City"), { target: { value: "މާލެ" } })
+    fireEvent.click(screen.getByLabelText("Email"))
+    fireEvent.click(screen.getByLabelText("Agree"))
+    fireEvent.click(screen.getByLabelText("Video"))
+    await waitFor(() => expect(latest.data.address).toEqual({ city: "މާލެ" }))
+    expect(latest.data.channels).toEqual(["sms", "email"])
+    expect(latest.data.agree).toBe("1")
+    expect(latest.data.type).toBe("video")
+    expect(screen.getByLabelText("SMS")).toBeChecked()
+
+    fireEvent.click(screen.getByText("Save"))
+    await waitFor(() => expect(submit).toHaveBeenCalled())
+    const [method, url, data] = submit.mock.calls[0]!
+    expect(method).toBe("post")
+    expect(url).toBe("/users")
+    expect(data).toMatchObject({ name: "ޢާއިޝަތު", address: { city: "މާލެ" }, agree: "1" })
+  })
+
+  it("shows form.errors, clears them on edit, and posts multipart PUTs with _method", async () => {
+    const submit = vi.fn()
+    function Page() {
+      const form = useFakeForm({ email: "" }, submit)
+      React.useEffect(() => {
+        submit.mockImplementation((_m, _u, _d, _o, setErrors: (e: Record<string, string>) => void) =>
+          setErrors({ email: "Taken." }),
+        )
+      }, [])
+      return (
+        <Form form={form} action={{ url: "/users/1", method: "put" }} files summary={false}>
+          <Text name="email" />
+          <button type="submit">Save</button>
+        </Form>
+      )
+    }
+    render(<Page />)
+    fireEvent.click(screen.getByText("Save"))
+    await waitFor(() => expect(screen.getByText("Taken.")).toBeInTheDocument())
+    const [method, , data, options] = submit.mock.calls[0]!
+    expect(method).toBe("post")
+    expect(data).toMatchObject({ _method: "put" })
+    expect(options.forceFormData).toBe(true)
+    fireEvent.change(screen.getByLabelText("Email"), { target: { value: "a@b.mv" } })
+    await waitFor(() => expect(screen.queryByText("Taken.")).not.toBeInTheDocument())
+  })
+})
+
+describe("inertiaLinks", () => {
+  it("renders Inertia's Link for app URLs and plain anchors for others", () => {
+    render(
+      <FormsProvider ui={mergeAdapters(html, inertiaLinks)}>
+        <LinkButton url="/users/create">Create</LinkButton>
+        <LinkButton url="https://javaabu.com">External</LinkButton>
+      </FormsProvider>,
+    )
+    expect(screen.getByText("Create").closest("a")).toHaveAttribute("data-inertia-link")
+    expect(screen.getByText("External").closest("a")).not.toHaveAttribute("data-inertia-link")
+  })
+})
diff --git a/vite.config.ts b/vite.config.ts
index 0fec7a5..e4b757e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,6 +20,7 @@ export const entries: Record<string, string> = {
   "onu-editor": "src/onu-editor.ts",
   "onu-maps": "src/onu-maps.ts",
   testing: "src/testing.ts",
+  inertia: "src/inertia.ts",
 }
 
 const output = {

From acd7d023390edab905f0d536e668a0b9fbb1ea40 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 13:31:29 +0500
Subject: [PATCH 11/18] Base shadcn/ui adapter

createShadcnAdapter() builds slots from the app's own shadcn components
(each slot only when its components are given), with the shadcn combobox
for searchable/multiple/tag/remote selects. Tested with the conformance
kit against vendored stock new-york-v4 components; example page added.
Radio groups now sync through a core registry, so Radix radios work.

Closes #5

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/shadcn.md                |   5 +
 .prettierignore                     |   1 +
 docs/advanced-usage/shadcn.md       |  94 +++
 eslint.config.js                    |   2 +-
 examples/shadcn.html                |  13 +
 examples/shadcn/main.tsx            |  16 +
 examples/shadcn/styles.css          |  65 ++
 examples/vite.config.ts             |   2 +-
 package.json                        |  15 +-
 pnpm-lock.yaml                      |  26 +-
 src/adapters/shadcn/index.tsx       | 932 ++++++++++++++++++++++++++++
 src/adapters/shadcn/shadcn.test.tsx |  52 ++
 src/components/checkbox.tsx         |  62 +-
 src/examples.test.tsx               |   3 +
 src/shadcn.ts                       |   7 +
 test/shadcn/index.ts                |  19 +
 test/shadcn/lib/utils.ts            |   7 +
 test/shadcn/ui/accordion.tsx        |  66 ++
 test/shadcn/ui/alert.tsx            |  66 ++
 test/shadcn/ui/badge.tsx            |  48 ++
 test/shadcn/ui/button.tsx           |  64 ++
 test/shadcn/ui/card.tsx             |  92 +++
 test/shadcn/ui/checkbox.tsx         |  32 +
 test/shadcn/ui/command.tsx          | 185 ++++++
 test/shadcn/ui/dialog.tsx           | 159 +++++
 test/shadcn/ui/dropdown-menu.tsx    | 257 ++++++++
 test/shadcn/ui/field.tsx            | 249 ++++++++
 test/shadcn/ui/input.tsx            |  21 +
 test/shadcn/ui/label.tsx            |  24 +
 test/shadcn/ui/popover.tsx          |  89 +++
 test/shadcn/ui/radio-group.tsx      |  45 ++
 test/shadcn/ui/select.tsx           | 190 ++++++
 test/shadcn/ui/separator.tsx        |  28 +
 test/shadcn/ui/table.tsx            | 116 ++++
 test/shadcn/ui/tabs.tsx             |  91 +++
 test/shadcn/ui/textarea.tsx         |  18 +
 vite.config.ts                      |   1 +
 37 files changed, 3135 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/shadcn.md
 create mode 100644 docs/advanced-usage/shadcn.md
 create mode 100644 examples/shadcn.html
 create mode 100644 examples/shadcn/main.tsx
 create mode 100644 examples/shadcn/styles.css
 create mode 100644 src/adapters/shadcn/index.tsx
 create mode 100644 src/adapters/shadcn/shadcn.test.tsx
 create mode 100644 src/shadcn.ts
 create mode 100644 test/shadcn/index.ts
 create mode 100644 test/shadcn/lib/utils.ts
 create mode 100644 test/shadcn/ui/accordion.tsx
 create mode 100644 test/shadcn/ui/alert.tsx
 create mode 100644 test/shadcn/ui/badge.tsx
 create mode 100644 test/shadcn/ui/button.tsx
 create mode 100644 test/shadcn/ui/card.tsx
 create mode 100644 test/shadcn/ui/checkbox.tsx
 create mode 100644 test/shadcn/ui/command.tsx
 create mode 100644 test/shadcn/ui/dialog.tsx
 create mode 100644 test/shadcn/ui/dropdown-menu.tsx
 create mode 100644 test/shadcn/ui/field.tsx
 create mode 100644 test/shadcn/ui/input.tsx
 create mode 100644 test/shadcn/ui/label.tsx
 create mode 100644 test/shadcn/ui/popover.tsx
 create mode 100644 test/shadcn/ui/radio-group.tsx
 create mode 100644 test/shadcn/ui/select.tsx
 create mode 100644 test/shadcn/ui/separator.tsx
 create mode 100644 test/shadcn/ui/table.tsx
 create mode 100644 test/shadcn/ui/tabs.tsx
 create mode 100644 test/shadcn/ui/textarea.tsx

diff --git a/.changeset/shadcn.md b/.changeset/shadcn.md
new file mode 100644
index 0000000..c7961d2
--- /dev/null
+++ b/.changeset/shadcn.md
@@ -0,0 +1,5 @@
+---
+"@javaabu/forms": minor
+---
+
+New `@javaabu/forms/shadcn`: `createShadcnAdapter({ Button, Input, Label, … })` makes an adapter from the app's own shadcn/ui components. Slots whose components are missing fall back to plain HTML. Searchable, multiple, tag and server-searched selects use the shadcn combobox (`Popover` + `Command`). Radios in a group now update together with any adapter, Radix's button radios included.
diff --git a/.prettierignore b/.prettierignore
index ba0ab70..50d58f9 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -4,3 +4,4 @@ pnpm-lock.yaml
 CHANGELOG.md
 docs
 examples/dist
+test/shadcn/ui
diff --git a/docs/advanced-usage/shadcn.md b/docs/advanced-usage/shadcn.md
new file mode 100644
index 0000000..3745309
--- /dev/null
+++ b/docs/advanced-usage/shadcn.md
@@ -0,0 +1,94 @@
+---
+title: shadcn/ui
+sidebar_position: 1.5
+---
+
+shadcn/ui components live in your app (`components/ui`), so the adapter is made from them: pass the components you have to `createShadcnAdapter()`. Slots whose components you haven't added render with the plain HTML adapter, so you can start with a few and add more later.
+
+# Setup
+
+Add the components (any subset works):
+
+```bash
+npx shadcn@latest add button input textarea label field checkbox radio-group select popover command card alert badge table tabs accordion dialog dropdown-menu
+```
+
+Make the adapter once:
+
+```tsx
+// resources/js/lib/forms.ts
+import { createShadcnAdapter } from "@javaabu/forms/shadcn"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Label } from "@/components/ui/label"
+import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field"
+import { Checkbox } from "@/components/ui/checkbox"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Badge } from "@/components/ui/badge"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+
+export const ui = createShadcnAdapter({
+  Button, Input, Textarea, Label, Field, FieldDescription, FieldError, FieldLabel, Checkbox, RadioGroup, RadioGroupItem,
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+  Popover, PopoverContent, PopoverTrigger, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList,
+  Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Alert, AlertDescription, AlertTitle, Badge,
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger,
+  Accordion, AccordionContent, AccordionItem, AccordionTrigger,
+  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger,
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
+})
+```
+
+And use it:
+
+```tsx
+import { FormsProvider } from "@javaabu/forms"
+import { ui } from "@/lib/forms"
+
+<FormsProvider ui={ui}>{children}</FormsProvider>
+```
+
+Tailwind must see the package's classes too: add `@source "../../node_modules/@javaabu/forms/dist";` (adjust the path) to your CSS.
+
+# Which components make which slots
+
+| shadcn components | Slots |
+| --- | --- |
+| `Button` | `Button`, `LinkButton` (with `asChild`) |
+| `Input` | `Input`, `Number`, `Date` (native date / time inputs), `File` |
+| `Textarea` | `Textarea` |
+| `Label` | `Label`, and the labels beside checkboxes and radios |
+| `Field`, `FieldLabel`, `FieldDescription`, `FieldError` | `Field`. With only `Label`, a simple layout is used |
+| `Checkbox` | `Checkbox` |
+| `RadioGroup`, `RadioGroupItem` | `Radio` |
+| `Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem` | `Select` without search |
+| `Popover`, `PopoverTrigger`, `PopoverContent`, `Command`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem` | `Select` with search, multiple values, tags or server search (the shadcn combobox) |
+| `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter` | `Card` and its parts |
+| `Alert`, `AlertTitle`, `AlertDescription` | `Alert`, `ErrorSummary` |
+| `Badge` | `Status` |
+| `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell` | Table slots |
+| `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` | `Tabs` |
+| `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` | `Accordion` |
+| `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter` | `Modal` |
+| `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem` | `ActionMenu` |
+
+Not covered by shadcn, so plain HTML (style them by `data-slot`): `Image`, `Wysiwyg`, `Map`, `EmptyState`, `Pagination`, `DescriptionList`, `NavTabs`, `ErrorSummary` without `Alert`. Replace any of them with your own components through `components` (see [UI adapters](./adapters)).
+
+# Notes
+
+- Blade colours map to shadcn variants: `primary` → `default`, `danger` → `destructive`, `secondary`/`dark` → `secondary`, `light` and `outline-*` → `outline`, `link` → `link`. `Status` tones map to `Badge` variants.
+- Radix's select can't hold an empty value, so the placeholder shows instead; a select without search can't be cleared once picked. Use `Select2` (the combobox) when the field is optional and must be clearable.
+- Each radio is its own Radix group, so arrow keys don't move between radios of a group; `Tab` and `Space` do.
+- Thaana typing works on `Input` and `Textarea` with `thaana`.
+- `confirm` and `notify` (for file uploads) use `window.confirm` / `alert` unless you pass yours: `createShadcnAdapter(components, { notify: (message) => toast(message) })`, e.g. with sonner.
+- The adapter is tested with the [conformance kit](./adapters#testing-an-adapter) against stock shadcn/ui (new-york-v4) components.
diff --git a/eslint.config.js b/eslint.config.js
index ba38cb7..8e85fbb 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -8,7 +8,7 @@ const physical =
   /(^|[\s:"'`])-?((ml|mr|pl|pr|left|right|rounded-l|rounded-r|border-l|border-r)-[\w[]|(text-left|text-right|rounded-l|rounded-r|border-l|border-r)(?![\w-]))/
 
 export default tseslint.config(
-  { ignores: ["dist", "coverage", "node_modules", "examples/dist"] },
+  { ignores: ["dist", "coverage", "node_modules", "examples/dist", "test/shadcn/ui"] },
   js.configs.recommended,
   ...tseslint.configs.recommended,
   {
diff --git a/examples/shadcn.html b/examples/shadcn.html
new file mode 100644
index 0000000..e65a660
--- /dev/null
+++ b/examples/shadcn.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="csrf-token" content="playground-token" />
+    <title>@javaabu/forms with shadcn/ui</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/shadcn/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/shadcn/main.tsx b/examples/shadcn/main.tsx
new file mode 100644
index 0000000..a020fae
--- /dev/null
+++ b/examples/shadcn/main.tsx
@@ -0,0 +1,16 @@
+import { createRoot } from "react-dom/client"
+
+import * as ui from "../../test/shadcn"
+import { FormsProvider } from "../../src"
+import { createShadcnAdapter } from "../../src/shadcn"
+import { Demo } from "../shared/demo"
+import "./styles.css"
+
+// In an app: import each component from "@/components/ui/…".
+const shadcn = createShadcnAdapter(ui)
+
+createRoot(document.getElementById("root")!).render(
+  <FormsProvider ui={shadcn}>
+    <Demo title="@javaabu/forms with shadcn/ui" />
+  </FormsProvider>,
+)
diff --git a/examples/shadcn/styles.css b/examples/shadcn/styles.css
new file mode 100644
index 0000000..bc8b650
--- /dev/null
+++ b/examples/shadcn/styles.css
@@ -0,0 +1,65 @@
+@import "tailwindcss";
+@import "@fontsource-variable/noto-sans-thaana";
+
+/* The stock shadcn/ui theme (neutral), as `npx shadcn init` writes it. */
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+}
+
+@theme inline {
+  --font-sans: system-ui, "Noto Sans Thaana Variable", sans-serif;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@source "../../src";
+@source "../../test/shadcn";
+@source "../shared";
diff --git a/examples/vite.config.ts b/examples/vite.config.ts
index 58b44fa..51cbe0c 100644
--- a/examples/vite.config.ts
+++ b/examples/vite.config.ts
@@ -4,7 +4,7 @@ import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
 
 /** One page per integration, rendered against the source. `pnpm examples` serves them, `pnpm examples:build` builds them. */
-const pages = ["index", "onu", "html"]
+const pages = ["index", "onu", "html", "shadcn"]
 
 export default defineConfig({
   root: import.meta.dirname,
diff --git a/package.json b/package.json
index d0d90e3..836135f 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,11 @@
       "import": "./dist/onu-maps.js",
       "require": "./dist/onu-maps.cjs"
     },
+    "./shadcn": {
+      "types": "./dist/shadcn.d.ts",
+      "import": "./dist/shadcn.js",
+      "require": "./dist/shadcn.cjs"
+    },
     "./inertia": {
       "types": "./dist/inertia.d.ts",
       "import": "./dist/inertia.js",
@@ -99,11 +104,11 @@
     "check": "pnpm lint && pnpm format:check && pnpm typecheck && pnpm test && pnpm build && pnpm examples:build"
   },
   "peerDependencies": {
+    "@inertiajs/react": "^2.0.0 || ^3.0.0",
     "@javaabu/onu": "^0.2.1",
     "@testing-library/react": "^16.0.0",
     "react": "^18.3.0 || ^19.0.0",
-    "react-dom": "^18.3.0 || ^19.0.0",
-    "@inertiajs/react": "^2.0.0 || ^3.0.0"
+    "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
     "@changesets/cli": "^3.0.3",
@@ -133,13 +138,19 @@
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.2",
     "@vitest/coverage-v8": "^5.0.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "eslint": "^10.12.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "globals": "^17.13.0",
     "jsdom": "^30.1.3",
+    "lucide-react": "^1.68.0",
     "prettier": "^3.9.10",
+    "radix-ui": "^1.8.1",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
+    "tailwind-merge": "^3.7.0",
     "tailwindcss": "^4.3.3",
     "typescript": "~6.0.3",
     "typescript-eslint": "^8.72.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 53c9fe1..21f56df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,6 +93,15 @@ importers:
       '@vitest/coverage-v8':
         specifier: ^5.0.5
         version: 5.0.5(vitest@5.0.5)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
       eslint:
         specifier: ^10.12.0
         version: 10.13.0(jiti@2.7.0)
@@ -105,15 +114,24 @@ importers:
       jsdom:
         specifier: ^30.1.3
         version: 30.1.3
+      lucide-react:
+        specifier: ^1.68.0
+        version: 1.68.0(@types/react@19.3.0)(react@19.3.1)
       prettier:
         specifier: ^3.9.10
         version: 3.9.10
+      radix-ui:
+        specifier: ^1.8.1
+        version: 1.8.1(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
       react:
         specifier: ^19.3.1
         version: 19.3.1
       react-dom:
         specifier: ^19.3.1
         version: 19.3.1(react@19.3.1)
+      tailwind-merge:
+        specifier: ^3.7.0
+        version: 3.7.0
       tailwindcss:
         specifier: ^4.3.3
         version: 4.3.3
@@ -2577,8 +2595,8 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  lucide-react@1.60.0:
-    resolution: {integrity: sha512-UqxOW0FgAfDyb9VmjKb6/BkOzW6yfhf/QNboKtS2NDsscnNRW2CDzlyhbMKBQ1ontmcxuIDqHJ2AVgFR3NI+GA==}
+  lucide-react@1.68.0:
+    resolution: {integrity: sha512-9i7NKWm2QlOprMhcwkhBOlIt9zB7cp2GIyFY+oMue0EsprolUFxva5rkdBbyfs4k1eejpa0JRnRgVOGiart+Xg==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -3620,7 +3638,7 @@ snapshots:
       date-fns: 4.4.0
       embla-carousel-react: 8.6.0(react@19.3.1)
       input-otp: 1.5.0(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
-      lucide-react: 1.60.0(@types/react@19.3.0)(react@19.3.1)
+      lucide-react: 1.68.0(@types/react@19.3.0)(react@19.3.1)
       radix-ui: 1.8.1(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
       react: 19.3.1
       react-aria-components: 1.22.1(react-dom@19.3.1(react@19.3.1))(react@19.3.1)
@@ -5550,7 +5568,7 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-react@1.60.0(@types/react@19.3.0)(react@19.3.1):
+  lucide-react@1.68.0(@types/react@19.3.0)(react@19.3.1):
     dependencies:
       react: 19.3.1
     optionalDependencies:
diff --git a/src/adapters/shadcn/index.tsx b/src/adapters/shadcn/index.tsx
new file mode 100644
index 0000000..2fb8dee
--- /dev/null
+++ b/src/adapters/shadcn/index.tsx
@@ -0,0 +1,932 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  defineAdapter,
+  type AccordionSlotProps,
+  type ActionMenuSlotProps,
+  type AlertSlotProps,
+  type ButtonColor,
+  type ButtonSlotProps,
+  type CardSlotProps,
+  type CheckboxSlotProps,
+  type DateSlotProps,
+  type ErrorSummarySlotProps,
+  type FieldSlotProps,
+  type FileSlotProps,
+  type FormsAdapter,
+  type FormsComponents,
+  type InputSlotProps,
+  type LabelSlotProps,
+  type LinkButtonSlotProps,
+  type ModalSlotProps,
+  type NumberSlotProps,
+  type RadioSlotProps,
+  type SelectOption,
+  type SelectSlotProps,
+  type StatusSlotProps,
+  type StatusTone,
+  type TabsSlotProps,
+  type TextareaSlotProps,
+} from "../../core/adapter"
+import { useUi } from "../../core/provider"
+import { useRemoteOptions } from "../../core/remote"
+import { useFormsTranslation } from "../../core/strings"
+import { thaanaKeyDown } from "../../core/thaana"
+import { html } from "../html"
+
+// shadcn components are the app's own, so their props aren't known here.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Component = React.ComponentType<any>
+
+/**
+ * The shadcn/ui components the adapter uses, by their shadcn names. Pass the ones
+ * your app has (`npx shadcn add …`); a slot whose components are missing renders
+ * with the HTML adapter.
+ *
+ * | Components | Slots |
+ * | --- | --- |
+ * | `Button` | `Button`, `LinkButton` |
+ * | `Input` | `Input`, `Number`, `Date`, `File` |
+ * | `Textarea` | `Textarea` |
+ * | `Label` | `Label`, and the labels of `Field`, `Checkbox`, `Radio` |
+ * | `Field`, `FieldLabel`, `FieldDescription`, `FieldError` | `Field` |
+ * | `Checkbox` | `Checkbox` |
+ * | `RadioGroup`, `RadioGroupItem` | `Radio` |
+ * | `Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem` | `Select` (single, without search) |
+ * | `Popover`, `PopoverTrigger`, `PopoverContent`, `Command`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem` | `Select` (searchable, multiple, tags, server search) |
+ * | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter` | `Card` and its parts |
+ * | `Alert`, `AlertTitle`, `AlertDescription` | `Alert`, `ErrorSummary` |
+ * | `Badge` | `Status` |
+ * | `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell` | the table slots |
+ * | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` | `Tabs` |
+ * | `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` | `Accordion` |
+ * | `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter` | `Modal` |
+ * | `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem` | `ActionMenu` |
+ */
+export interface ShadcnComponents {
+  Button?: Component
+  Input?: Component
+  Textarea?: Component
+  Label?: Component
+  Field?: Component
+  FieldLabel?: Component
+  FieldDescription?: Component
+  FieldError?: Component
+  Checkbox?: Component
+  RadioGroup?: Component
+  RadioGroupItem?: Component
+  Select?: Component
+  SelectTrigger?: Component
+  SelectValue?: Component
+  SelectContent?: Component
+  SelectItem?: Component
+  Popover?: Component
+  PopoverTrigger?: Component
+  PopoverContent?: Component
+  Command?: Component
+  CommandInput?: Component
+  CommandList?: Component
+  CommandEmpty?: Component
+  CommandGroup?: Component
+  CommandItem?: Component
+  Card?: Component
+  CardHeader?: Component
+  CardTitle?: Component
+  CardDescription?: Component
+  CardContent?: Component
+  CardFooter?: Component
+  Alert?: Component
+  AlertTitle?: Component
+  AlertDescription?: Component
+  Badge?: Component
+  Table?: Component
+  TableHeader?: Component
+  TableBody?: Component
+  TableRow?: Component
+  TableHead?: Component
+  TableCell?: Component
+  Tabs?: Component
+  TabsList?: Component
+  TabsTrigger?: Component
+  TabsContent?: Component
+  Accordion?: Component
+  AccordionItem?: Component
+  AccordionTrigger?: Component
+  AccordionContent?: Component
+  Dialog?: Component
+  DialogTrigger?: Component
+  DialogContent?: Component
+  DialogHeader?: Component
+  DialogTitle?: Component
+  DialogDescription?: Component
+  DialogFooter?: Component
+  DropdownMenu?: Component
+  DropdownMenuTrigger?: Component
+  DropdownMenuContent?: Component
+  DropdownMenuItem?: Component
+}
+
+export interface ShadcnAdapterOptions extends Partial<Pick<FormsAdapter, "confirm" | "notify">> {
+  /** Adapter name. Default `shadcn`. */
+  name?: string
+}
+
+type Required<K extends keyof ShadcnComponents> = { [P in K]-?: NonNullable<ShadcnComponents[P]> }
+
+function has<K extends keyof ShadcnComponents>(c: ShadcnComponents, keys: K[]): c is ShadcnComponents & Required<K> {
+  return keys.every((key) => !!c[key])
+}
+
+function cx(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(" ") || undefined
+}
+
+/** shadcn button variants for Blade colours. */
+export function colorToShadcnVariant(color: ButtonColor | string | undefined): string {
+  if (!color) return "default"
+  if (color.startsWith("outline-") || color === "light") return "outline"
+  if (color === "danger") return "destructive"
+  if (color === "secondary" || color === "dark") return "secondary"
+  if (color === "link") return "link"
+  return "default"
+}
+
+const SIZES = { sm: "sm", md: "default", lg: "lg", icon: "icon" } as const
+
+const BADGE_VARIANTS: Record<StatusTone, string> = {
+  success: "default",
+  info: "secondary",
+  warning: "outline",
+  danger: "destructive",
+  neutral: "secondary",
+}
+
+function Spinner() {
+  return (
+    <span
+      data-slot="spinner"
+      aria-hidden="true"
+      className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+    />
+  )
+}
+
+function Addons({
+  prepend,
+  append,
+  children,
+}: {
+  prepend?: React.ReactNode
+  append?: React.ReactNode
+  children: React.ReactNode
+}) {
+  if (!prepend && !append) return <>{children}</>
+  return (
+    <div data-slot="input-group" className="flex items-center gap-2">
+      {prepend ? <span className="shrink-0 text-sm text-muted-foreground">{prepend}</span> : null}
+      <div className="min-w-0 flex-1">{children}</div>
+      {append ? <span className="shrink-0 text-sm text-muted-foreground">{append}</span> : null}
+    </div>
+  )
+}
+
+/** Hidden inputs for a value list, for selects whose widget isn't a native control. */
+function HiddenValues({
+  name,
+  values,
+  multiple,
+  disabled,
+}: {
+  name: string
+  values: string[]
+  multiple: boolean
+  disabled?: boolean
+}) {
+  if (!name) return null
+  if (!multiple) return <input type="hidden" name={name} value={values[0] ?? ""} disabled={disabled} />
+  return (
+    <>
+      {values.map((v) => (
+        <input key={v} type="hidden" name={name} value={v} disabled={disabled} />
+      ))}
+    </>
+  )
+}
+
+/**
+ * Makes an adapter from your app's shadcn/ui components:
+ *
+ * ```tsx
+ * import { Button } from "@/components/ui/button"
+ * import { Input } from "@/components/ui/input"
+ * import { Label } from "@/components/ui/label"
+ * import { createShadcnAdapter } from "@javaabu/forms/shadcn"
+ *
+ * export const shadcn = createShadcnAdapter({ Button, Input, Label })
+ * ```
+ */
+export function createShadcnAdapter(c: ShadcnComponents, options: ShadcnAdapterOptions = {}): FormsAdapter {
+  const components: Partial<FormsComponents> = {}
+  const Fallback = html.components
+
+  if (c.Label) {
+    const L = c.Label
+    components.Label = function ShadcnLabel({ required: _required, ...props }: LabelSlotProps) {
+      return <L {...props} />
+    }
+  }
+
+  if (has(c, ["Field", "FieldLabel"]) || c.Label) {
+    components.Field = function ShadcnField({
+      id,
+      label,
+      labelId,
+      hideLabel,
+      inline,
+      help,
+      helpId,
+      errors,
+      errorId,
+      disabled,
+      classNames,
+      children,
+    }: FieldSlotProps) {
+      const FieldRoot = c.Field
+      const FieldLabel = c.FieldLabel ?? c.Label!
+      const labelNode = label ? (
+        <FieldLabel id={labelId} htmlFor={id} className={cx(hideLabel && "sr-only", classNames?.label)}>
+          {label}
+        </FieldLabel>
+      ) : null
+      const helpNode = help ? (
+        c.FieldDescription ? (
+          <c.FieldDescription id={helpId}>{help}</c.FieldDescription>
+        ) : (
+          <p id={helpId} className="text-sm text-muted-foreground">
+            {help}
+          </p>
+        )
+      ) : null
+      const errorNode = errors.length ? (
+        c.FieldError ? (
+          <c.FieldError id={errorId} errors={errors.map((message) => ({ message }))} />
+        ) : (
+          <div id={errorId} role="alert" className="text-sm text-destructive">
+            {errors.map((m) => (
+              <p key={m}>{m}</p>
+            ))}
+          </div>
+        )
+      ) : null
+      const body = (
+        <>
+          {labelNode}
+          <div className={cx("grid gap-2", classNames?.control)}>
+            {children}
+            {helpNode}
+            {errorNode}
+          </div>
+        </>
+      )
+      if (FieldRoot) {
+        return (
+          <FieldRoot
+            data-invalid={errors.length ? true : undefined}
+            data-disabled={disabled || undefined}
+            orientation={inline ? "responsive" : "vertical"}
+            className={classNames?.group}
+          >
+            {body}
+          </FieldRoot>
+        )
+      }
+      return (
+        <div
+          data-slot="field"
+          data-invalid={errors.length ? true : undefined}
+          className={cx("grid gap-2", classNames?.group)}
+        >
+          {body}
+        </div>
+      )
+    }
+  }
+
+  if (c.Input) {
+    const I = c.Input
+    components.Input = function ShadcnInput({
+      prepend,
+      append,
+      thaana,
+      thaanaToggle: _toggle,
+      onKeyDown,
+      ...props
+    }: InputSlotProps) {
+      return (
+        <Addons prepend={prepend} append={append}>
+          <I
+            {...props}
+            dir={props.dir ?? (thaana ? "rtl" : undefined)}
+            lang={props.lang ?? (thaana ? "dv" : undefined)}
+            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+              onKeyDown?.(event)
+              if (thaana && !event.defaultPrevented) thaanaKeyDown(event)
+            }}
+          />
+        </Addons>
+      )
+    }
+
+    components.Number = function ShadcnNumber({
+      value,
+      onValueChange,
+      decimals,
+      prepend,
+      append,
+      ...props
+    }: NumberSlotProps) {
+      const [state, setState] = React.useState({ text: value === null ? "" : String(value), value })
+      if (state.value !== value) setState({ text: value === null ? "" : String(value), value })
+      return (
+        <Addons prepend={prepend} append={append}>
+          <I
+            type="number"
+            inputMode="decimal"
+            dir="ltr"
+            {...props}
+            step={props.step ?? (decimals !== undefined ? 1 / 10 ** decimals : "any")}
+            value={state.text}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              const raw = event.target.value
+              const n = raw === "" ? null : Number(raw)
+              if (n !== null && !Number.isFinite(n)) return setState({ text: raw, value })
+              const next = n === null || decimals === undefined ? n : Number(n.toFixed(decimals))
+              setState({ text: raw, value: next })
+              onValueChange(next)
+            }}
+          />
+        </Addons>
+      )
+    }
+
+    const TYPES = { date: "date", datetime: "datetime-local", time: "time" } as const
+    components.Date = function ShadcnDate({ mode, value, onValueChange, name, min, max, ...props }: DateSlotProps) {
+      const toNative = (v: string) => (mode === "datetime" ? v.replace(" ", "T") : v)
+      const fromNative = (v: string) => {
+        if (mode !== "datetime" || !v) return v
+        const [date, time = "00:00"] = v.split("T")
+        return `${date} ${time.length === 5 ? `${time}:00` : time}`
+      }
+      return (
+        <>
+          <I
+            type={TYPES[mode]}
+            dir="ltr"
+            step={mode === "datetime" ? 1 : undefined}
+            {...props}
+            min={min === undefined ? undefined : toNative(min)}
+            max={max === undefined ? undefined : toNative(max)}
+            value={toNative(value)}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => onValueChange(fromNative(event.target.value))}
+          />
+          <input type="hidden" name={name} value={value} disabled={props.disabled} />
+        </>
+      )
+    }
+
+    components.File = function ShadcnFile({
+      onFilesChange,
+      buttonLabel,
+      placeholder: _placeholder,
+      showList: _showList,
+      maxSize: _maxSize,
+      name,
+      ...props
+    }: FileSlotProps) {
+      return (
+        <I
+          type="file"
+          {...props}
+          name={name || undefined}
+          aria-label={buttonLabel}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => onFilesChange(Array.from(event.target.files ?? []))}
+        />
+      )
+    }
+  }
+
+  if (c.Textarea) {
+    const T = c.Textarea
+    components.Textarea = function ShadcnTextarea({ autoResize, thaana, onKeyDown, ...props }: TextareaSlotProps) {
+      return (
+        <T
+          {...props}
+          // shadcn's textarea grows with its content (`field-sizing-content`) unless it has rows.
+          className={cx(!autoResize && "field-sizing-fixed", props.className)}
+          dir={props.dir ?? (thaana ? "rtl" : undefined)}
+          lang={props.lang ?? (thaana ? "dv" : undefined)}
+          onKeyDown={(event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+            onKeyDown?.(event)
+            if (thaana && !event.defaultPrevented) thaanaKeyDown(event)
+          }}
+        />
+      )
+    }
+  }
+
+  const BesideLabel = ({ htmlFor, children }: { htmlFor?: string; children: React.ReactNode }) =>
+    c.Label ? (
+      <c.Label htmlFor={htmlFor}>{children}</c.Label>
+    ) : (
+      <label htmlFor={htmlFor} className="text-sm font-medium">
+        {children}
+      </label>
+    )
+
+  if (c.Checkbox) {
+    const Box = c.Checkbox
+    components.Checkbox = function ShadcnCheckbox({
+      checked,
+      onCheckedChange,
+      label,
+      className,
+      ...props
+    }: CheckboxSlotProps) {
+      return (
+        <div data-slot="checkbox-field" className={cx("flex items-center gap-2", className)}>
+          <Box
+            {...props}
+            name={props.name || undefined}
+            checked={checked}
+            onCheckedChange={(state: boolean | "indeterminate") => onCheckedChange(state === true)}
+          />
+          {label ? <BesideLabel htmlFor={props.id}>{label}</BesideLabel> : null}
+        </div>
+      )
+    }
+  }
+
+  if (has(c, ["RadioGroup", "RadioGroupItem"])) {
+    const { RadioGroup, RadioGroupItem } = c
+    // Each radio has its own group (the core tracks the selection), named so the form submits it.
+    components.Radio = function ShadcnRadio({
+      checked,
+      onCheckedChange,
+      label,
+      className,
+      name,
+      value,
+      required,
+      disabled,
+      ...props
+    }: RadioSlotProps) {
+      return (
+        <RadioGroup
+          name={name}
+          value={checked ? value : ""}
+          required={required}
+          disabled={disabled}
+          onValueChange={(v: string) => onCheckedChange(v === value)}
+          className={cx("flex items-center gap-2", className)}
+        >
+          <RadioGroupItem {...props} value={value} />
+          {label ? <BesideLabel htmlFor={props.id}>{label}</BesideLabel> : null}
+        </RadioGroup>
+      )
+    }
+  }
+
+  const simpleSelect = has(c, ["Select", "SelectTrigger", "SelectValue", "SelectContent", "SelectItem"])
+  const combobox = has(c, [
+    "Popover",
+    "PopoverTrigger",
+    "PopoverContent",
+    "Command",
+    "CommandInput",
+    "CommandList",
+    "CommandEmpty",
+    "CommandGroup",
+    "CommandItem",
+  ])
+
+  if (simpleSelect || combobox) {
+    function Combobox(props: SelectSlotProps) {
+      const {
+        options,
+        value,
+        onValueChange,
+        multiple,
+        creatable,
+        placeholder,
+        loading,
+        remote,
+        name,
+        id,
+        disabled,
+        className,
+      } = props
+      const { t } = useFormsTranslation()
+      const [open, setOpen] = React.useState(false)
+      const [query, setQuery] = React.useState("")
+      const found = useRemoteOptions(remote, query)
+      const all: SelectOption[] = [...options]
+      for (const o of found.options) if (!all.some((x) => x.value === o.value)) all.push(o)
+      for (const v of value) if (!all.some((x) => x.value === v)) all.push({ value: v, label: v })
+      const labels = value.map((v) => all.find((o) => o.value === v)?.label ?? v)
+      const toggle = (v: string) => {
+        if (multiple) onValueChange(value.includes(v) ? value.filter((x) => x !== v) : [...value, v])
+        else {
+          onValueChange(value[0] === v && props.clearable ? [] : [v])
+          setOpen(false)
+        }
+        setQuery("")
+      }
+      const text = query.trim()
+      const canCreate = creatable && text && !all.some((o) => o.label.toLowerCase() === text.toLowerCase())
+      const trigger = (
+        <button
+          type="button"
+          role="combobox"
+          id={id}
+          aria-expanded={open}
+          aria-invalid={props["aria-invalid"]}
+          aria-describedby={props["aria-describedby"]}
+          aria-required={props.required}
+          disabled={disabled}
+          className={cx(
+            "flex h-9 w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 text-start text-sm shadow-xs aria-invalid:border-destructive",
+            className,
+          )}
+        >
+          <span className={cx("truncate", !labels.length && "text-muted-foreground")}>
+            {labels.length ? labels.join(", ") : (placeholder ?? "")}
+          </span>
+        </button>
+      )
+      const {
+        Popover,
+        PopoverTrigger,
+        PopoverContent,
+        Command,
+        CommandInput,
+        CommandList,
+        CommandEmpty,
+        CommandGroup,
+        CommandItem,
+      } = c as Required<
+        | "Popover"
+        | "PopoverTrigger"
+        | "PopoverContent"
+        | "Command"
+        | "CommandInput"
+        | "CommandList"
+        | "CommandEmpty"
+        | "CommandGroup"
+        | "CommandItem"
+      >
+      return (
+        <>
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+            <PopoverContent className="p-0" align="start">
+              <Command shouldFilter={!remote}>
+                <CommandInput placeholder={t("search")} value={query} onValueChange={setQuery} />
+                <CommandList>
+                  <CommandEmpty>{loading || found.loading ? t("loading") : t("blank")}</CommandEmpty>
+                  <CommandGroup>
+                    {all.map((o) => (
+                      <CommandItem
+                        key={o.value}
+                        value={`${o.label} ${o.value}`}
+                        disabled={o.disabled}
+                        data-checked={value.includes(o.value) || undefined}
+                        aria-selected={value.includes(o.value)}
+                        onSelect={() => toggle(o.value)}
+                      >
+                        {o.label}
+                      </CommandItem>
+                    ))}
+                    {canCreate ? (
+                      <CommandItem value={`create ${text}`} onSelect={() => toggle(text)}>
+                        {t("add_option", { value: text })}
+                      </CommandItem>
+                    ) : null}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+          <HiddenValues name={name} values={value} multiple={multiple} disabled={disabled} />
+        </>
+      )
+    }
+
+    components.Select = function ShadcnSelect(props: SelectSlotProps) {
+      const needsCombobox = props.multiple || props.searchable || props.creatable || !!props.remote
+      if (needsCombobox) return combobox ? <Combobox {...props} /> : <Fallback.Select {...props} />
+      if (!simpleSelect) return combobox ? <Combobox {...props} /> : <Fallback.Select {...props} />
+      const { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } = c as Required<
+        "Select" | "SelectTrigger" | "SelectValue" | "SelectContent" | "SelectItem"
+      >
+      const { options, value, onValueChange, placeholder, name, id, disabled, required, className } = props
+      return (
+        <Select
+          name={name}
+          value={value[0] ?? ""}
+          onValueChange={(v: string) => onValueChange(v ? [v] : [])}
+          disabled={disabled}
+          required={required}
+        >
+          <SelectTrigger
+            id={id}
+            className={cx("w-full", className)}
+            aria-invalid={props["aria-invalid"]}
+            aria-describedby={props["aria-describedby"]}
+          >
+            <SelectValue placeholder={placeholder} />
+          </SelectTrigger>
+          <SelectContent>
+            {/* Radix can't select an empty value. */}
+            {options
+              .filter((o) => o.value !== "")
+              .map((o) => (
+                <SelectItem key={o.value} value={o.value} disabled={o.disabled}>
+                  {o.label}
+                </SelectItem>
+              ))}
+          </SelectContent>
+        </Select>
+      )
+    }
+  }
+
+  if (c.Button) {
+    const B = c.Button
+    components.Button = function ShadcnButton({
+      color,
+      size,
+      loading,
+      startIcon,
+      endIcon,
+      children,
+      disabled,
+      ...props
+    }: ButtonSlotProps) {
+      const ui = useUi()
+      return (
+        <B
+          {...props}
+          variant={colorToShadcnVariant(color)}
+          size={size ? SIZES[size] : undefined}
+          disabled={disabled || loading}
+          aria-busy={loading || undefined}
+        >
+          {loading ? <Spinner /> : startIcon ? <ui.Icon name={startIcon} /> : null}
+          {children}
+          {endIcon ? <ui.Icon name={endIcon} /> : null}
+        </B>
+      )
+    }
+    components.LinkButton = function ShadcnLinkButton({
+      color,
+      size,
+      disabled,
+      startIcon,
+      endIcon,
+      children,
+      href,
+      ...props
+    }: LinkButtonSlotProps) {
+      const ui = useUi()
+      return (
+        <B asChild variant={colorToShadcnVariant(color)} size={size ? SIZES[size] : undefined}>
+          <ui.Link {...props} href={disabled ? undefined! : href} aria-disabled={disabled || undefined}>
+            {startIcon ? <ui.Icon name={startIcon} /> : null}
+            {children}
+            {endIcon ? <ui.Icon name={endIcon} /> : null}
+          </ui.Link>
+        </B>
+      )
+    }
+  }
+
+  if (has(c, ["Card", "CardHeader", "CardTitle", "CardContent"])) {
+    const { Card, CardHeader, CardTitle, CardContent } = c
+    const CardDescription = c.CardDescription ?? "p"
+    const CardFooter = c.CardFooter ?? "div"
+    components.Card = function ShadcnCard({ title, subtitle, footer, imageTop, className, children }: CardSlotProps) {
+      return (
+        <Card className={className}>
+          {imageTop}
+          {title || subtitle ? (
+            <CardHeader>
+              {title ? <CardTitle>{title}</CardTitle> : null}
+              {subtitle ? <CardDescription>{subtitle}</CardDescription> : null}
+            </CardHeader>
+          ) : null}
+          <CardContent>{children}</CardContent>
+          {footer !== undefined ? <CardFooter>{footer}</CardFooter> : null}
+        </Card>
+      )
+    }
+    components.CardHeader = CardHeader
+    components.CardTitle = CardTitle
+    if (c.CardDescription) components.CardSubtitle = c.CardDescription
+    if (c.CardFooter) components.CardFooter = c.CardFooter
+  }
+
+  if (c.Alert) {
+    const { Alert } = c
+    const AlertTitle = c.AlertTitle ?? "div"
+    const AlertDescription = c.AlertDescription ?? "div"
+    components.Alert = function ShadcnAlert({
+      type,
+      heading,
+      icon,
+      dismissible: _dismissible,
+      className,
+      children,
+    }: AlertSlotProps) {
+      return (
+        <Alert variant={type === "danger" ? "destructive" : "default"} className={className} data-type={type}>
+          {icon}
+          {heading ? <AlertTitle>{heading}</AlertTitle> : null}
+          {children ? <AlertDescription>{children}</AlertDescription> : null}
+        </Alert>
+      )
+    }
+    components.ErrorSummary = function ShadcnErrorSummary({
+      id,
+      title,
+      description,
+      items,
+      onSelect,
+      className,
+    }: ErrorSummarySlotProps) {
+      return (
+        <Alert variant="destructive" id={id} className={className} data-slot="error-summary">
+          <AlertTitle>{title}</AlertTitle>
+          <AlertDescription>
+            {description ? <p>{description}</p> : null}
+            {items.length ? (
+              <ul className="list-inside list-disc text-sm">
+                {items.flatMap((item) =>
+                  item.messages.map((message, i) => (
+                    <li key={`${item.name}-${i}`}>
+                      <a
+                        href={`#${item.name}`}
+                        className="underline underline-offset-4"
+                        onClick={(event) => {
+                          if (onSelect(item.name)) event.preventDefault()
+                        }}
+                      >
+                        {message}
+                      </a>
+                    </li>
+                  )),
+                )}
+              </ul>
+            ) : null}
+          </AlertDescription>
+        </Alert>
+      )
+    }
+  }
+
+  if (c.Badge) {
+    const Badge = c.Badge
+    components.Status = function ShadcnStatus({ tone, className, children }: StatusSlotProps) {
+      return (
+        <Badge variant={BADGE_VARIANTS[tone]} data-tone={tone} className={className}>
+          {children}
+        </Badge>
+      )
+    }
+  }
+
+  if (has(c, ["Table", "TableHeader", "TableBody", "TableRow", "TableHead", "TableCell"])) {
+    Object.assign(components, {
+      Table: c.Table,
+      TableHeader: c.TableHeader,
+      TableBody: c.TableBody,
+      TableRow: c.TableRow,
+      TableHead: c.TableHead,
+      TableCell: c.TableCell,
+    })
+  }
+
+  if (has(c, ["Tabs", "TabsList", "TabsTrigger", "TabsContent"])) {
+    const { Tabs, TabsList, TabsTrigger, TabsContent } = c
+    components.Tabs = function ShadcnTabs({ items, defaultValue, onValueChange, className }: TabsSlotProps) {
+      return (
+        <Tabs defaultValue={defaultValue} onValueChange={onValueChange} className={className}>
+          <TabsList>
+            {items.map((item) => (
+              <TabsTrigger key={item.value} value={item.value} disabled={item.disabled}>
+                {item.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {items.map((item) => (
+            <TabsContent key={item.value} value={item.value}>
+              {item.content}
+            </TabsContent>
+          ))}
+        </Tabs>
+      )
+    }
+  }
+
+  if (has(c, ["Accordion", "AccordionItem", "AccordionTrigger", "AccordionContent"])) {
+    const { Accordion, AccordionItem, AccordionTrigger, AccordionContent } = c
+    components.Accordion = function ShadcnAccordion({
+      id,
+      items,
+      defaultValue,
+      multiple,
+      className,
+    }: AccordionSlotProps) {
+      const content = items.map((item) => (
+        <AccordionItem key={item.value} value={item.value} id={item.id} disabled={item.disabled}>
+          <AccordionTrigger>{item.title}</AccordionTrigger>
+          <AccordionContent>{item.content}</AccordionContent>
+        </AccordionItem>
+      ))
+      return multiple ? (
+        <Accordion id={id} type="multiple" defaultValue={defaultValue} className={className}>
+          {content}
+        </Accordion>
+      ) : (
+        <Accordion id={id} type="single" collapsible defaultValue={defaultValue[0]} className={className}>
+          {content}
+        </Accordion>
+      )
+    }
+  }
+
+  if (has(c, ["Dialog", "DialogContent", "DialogTitle"])) {
+    const { Dialog, DialogContent, DialogTitle } = c
+    const DialogTrigger = c.DialogTrigger
+    const DialogHeader = c.DialogHeader ?? "div"
+    const DialogDescription = c.DialogDescription ?? "p"
+    const DialogFooter = c.DialogFooter ?? "div"
+    const WIDTHS = {
+      sm: "sm:max-w-sm",
+      md: "sm:max-w-lg",
+      lg: "sm:max-w-2xl",
+      xl: "sm:max-w-4xl",
+      full: "sm:max-w-[calc(100%-2rem)]",
+    }
+    components.Modal = function ShadcnModal({
+      id,
+      open,
+      defaultOpen,
+      onOpenChange,
+      trigger,
+      title,
+      description,
+      footer,
+      size,
+      className,
+      children,
+    }: ModalSlotProps) {
+      return (
+        <Dialog open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+          {trigger && DialogTrigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}
+          <DialogContent id={id} className={cx(WIDTHS[size], className)}>
+            <DialogHeader>
+              <DialogTitle className={title ? undefined : "sr-only"}>{title}</DialogTitle>
+              {description ? <DialogDescription>{description}</DialogDescription> : null}
+            </DialogHeader>
+            {children}
+            {footer ? <DialogFooter>{footer}</DialogFooter> : null}
+          </DialogContent>
+        </Dialog>
+      )
+    }
+  }
+
+  if (has(c, ["DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem"])) {
+    const { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } = c
+    components.ActionMenu = function ShadcnActionMenu({ label, trigger, items }: ActionMenuSlotProps) {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild aria-label={label}>
+            {trigger}
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {items.map((item, i) => (
+              <DropdownMenuItem key={i} onSelect={item.onSelect}>
+                {item.label}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    }
+  }
+
+  return defineAdapter({ name: options.name ?? "shadcn", components, confirm: options.confirm, notify: options.notify })
+}
diff --git a/src/adapters/shadcn/shadcn.test.tsx b/src/adapters/shadcn/shadcn.test.tsx
new file mode 100644
index 0000000..f5a7808
--- /dev/null
+++ b/src/adapters/shadcn/shadcn.test.tsx
@@ -0,0 +1,52 @@
+import { fireEvent, render, screen } from "@testing-library/react"
+
+import * as ui from "../../../test/shadcn"
+import { Form } from "../../components/form"
+import { Select, Select2 } from "../../components/select"
+import { Status } from "../../components/display"
+import { Submit } from "../../components/buttons"
+import { FormsProvider } from "../../core/provider"
+import { testAdapter } from "../../testing"
+import { createShadcnAdapter } from "."
+
+// Every stock component, as `import * as ui` from an app's components/ui would give.
+const shadcn = createShadcnAdapter(ui)
+
+testAdapter(shadcn)
+
+describe("the shadcn adapter", () => {
+  it("only fills the slots whose components are given", () => {
+    const partial = createShadcnAdapter({ Input: ui.Input })
+    expect(Object.keys(partial.components).sort()).toEqual(["Date", "File", "Input", "Number"])
+    expect(createShadcnAdapter({}).components).toEqual({})
+  })
+
+  it("renders shadcn's own markup", () => {
+    render(
+      <FormsProvider ui={shadcn}>
+        <Form errors={{ status: "Pick one." }} summary={false}>
+          <Select name="status" options={{ draft: "Draft", published: "Published" }} />
+          <Status color="danger">Rejected</Status>
+          <Submit color="danger">Delete</Submit>
+        </Form>
+      </FormsProvider>,
+    )
+    expect(document.querySelector("[data-slot=select-trigger]")).toHaveAttribute("aria-invalid", "true")
+    expect(document.querySelector("[data-slot=field-error]")).toHaveTextContent("Pick one.")
+    expect(screen.getByText("Rejected")).toHaveAttribute("data-slot", "badge")
+    expect(screen.getByRole("button", { name: "Delete" })).toHaveAttribute("data-variant", "destructive")
+  })
+
+  it("picks values in the combobox for searchable and multiple selects", () => {
+    const { container } = render(
+      <FormsProvider ui={shadcn}>
+        <Form>
+          <Select2 name="tags" multiple tags options={{ 1: "ބަނދަރު", 2: "މޫސުން" }} />
+        </Form>
+      </FormsProvider>,
+    )
+    fireEvent.click(screen.getByRole("combobox"))
+    fireEvent.click(screen.getByText("މޫސުން"))
+    expect(new FormData(container.querySelector("form")!).getAll("tags[]")).toEqual(["2"])
+  })
+})
diff --git a/src/components/checkbox.tsx b/src/components/checkbox.tsx
index 76aa377..a457f63 100644
--- a/src/components/checkbox.tsx
+++ b/src/components/checkbox.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { getBoundValue, useBindTarget, useOldInput, type ModelProp } from "../core/binding"
-import { useFormValues } from "../core/form-context"
+import { useFormState, useFormValues } from "../core/form-context"
 import { useUi } from "../core/provider"
 import { usePublishField } from "../core/registry"
 import { isEmpty, isNil, looseIncludes, toFormString, wrap } from "../support/data"
@@ -150,6 +150,42 @@ export function Checkbox(props: CheckboxProps) {
   )
 }
 
+type GroupListener = (selected: string) => void
+const radioGroups = new WeakMap<object, Map<string, Set<GroupListener>>>()
+const PAGE = {}
+
+/**
+ * Radio groups across any adapter (native radios, Radix buttons, …): `select()` tells the other
+ * radios of the same name in the same form that they are no longer selected.
+ */
+function useRadioGroup(name: string, value: string, onUnselect: () => void) {
+  const form = useFormState()
+  const scope = form?.formRef ?? PAGE
+  const unselect = React.useRef(onUnselect)
+  React.useEffect(() => {
+    unselect.current = onUnselect
+  })
+  const listener = React.useMemo<GroupListener>(
+    () => (selected) => {
+      if (selected !== value) unselect.current()
+    },
+    [value],
+  )
+  React.useEffect(() => {
+    let groups = radioGroups.get(scope)
+    if (!groups) radioGroups.set(scope, (groups = new Map()))
+    let group = groups.get(name)
+    if (!group) groups.set(name, (group = new Set()))
+    group.add(listener)
+    return () => {
+      group.delete(listener)
+    }
+  }, [scope, name, listener])
+  return () => {
+    for (const other of radioGroups.get(scope)?.get(name) ?? []) other(value)
+  }
+}
+
 export interface RadioProps extends Omit<FieldProps, "default"> {
   /** Value submitted when selected. Default `1`. */
   value?: string | number | boolean
@@ -183,23 +219,8 @@ export function Radio(props: RadioProps) {
     store?.set(on)
   }
 
-  // A radio only reports its own change; listen to the group to see it being unchecked. `click` (also
-  // fired for arrow keys) in the capture phase runs before React's handler, so both updates render together.
-  React.useEffect(() => {
-    if (typeof document === "undefined") return
-    const sync = (event: Event) => {
-      const target = event.target
-      if (!(target instanceof HTMLInputElement) || target.type !== "radio") return
-      if (target.name === field.name && target.id !== id && target.checked && !target.disabled) setCurrent(false)
-    }
-    document.addEventListener("click", sync, true)
-    document.addEventListener("change", sync, true)
-    return () => {
-      document.removeEventListener("click", sync, true)
-      document.removeEventListener("change", sync, true)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [field.name, id])
+  // A radio only reports its own selection; the others of its group (same name, same form) unselect themselves.
+  const selectInGroup = useRadioGroup(field.name, submitted, () => setCurrent(false))
 
   usePublishField({
     id,
@@ -224,7 +245,10 @@ export function Radio(props: RadioProps) {
       checked={current}
       label={radioLabel || undefined}
       onCheckedChange={(state) => {
-        if (state) setCurrent(true)
+        if (state) {
+          setCurrent(true)
+          selectInGroup()
+        }
         onCheckedChange?.(state)
       }}
     />,
diff --git a/src/examples.test.tsx b/src/examples.test.tsx
index f4532f5..e13442f 100644
--- a/src/examples.test.tsx
+++ b/src/examples.test.tsx
@@ -5,11 +5,14 @@ import { FormsProvider, mergeAdapters } from "."
 import { html } from "./html"
 import { onu } from "./onu"
 import { onuEditor } from "./onu-editor"
+import { createShadcnAdapter } from "./shadcn"
+import * as shadcnUi from "../test/shadcn"
 
 // The example pages render every component; they should render without errors on each adapter.
 describe.each([
   ["html", html],
   ["onu", mergeAdapters(onu, onuEditor)],
+  ["shadcn", createShadcnAdapter(shadcnUi)],
 ])("the example page on %s", (_, ui) => {
   it("renders every component", () => {
     const errors = vi.spyOn(console, "error").mockImplementation(() => {})
diff --git a/src/shadcn.ts b/src/shadcn.ts
new file mode 100644
index 0000000..bfd792d
--- /dev/null
+++ b/src/shadcn.ts
@@ -0,0 +1,7 @@
+// `@javaabu/forms/shadcn`: an adapter made from your app's shadcn/ui components.
+export {
+  createShadcnAdapter,
+  colorToShadcnVariant,
+  type ShadcnComponents,
+  type ShadcnAdapterOptions,
+} from "./adapters/shadcn"
diff --git a/test/shadcn/index.ts b/test/shadcn/index.ts
new file mode 100644
index 0000000..6a62ae7
--- /dev/null
+++ b/test/shadcn/index.ts
@@ -0,0 +1,19 @@
+// The stock shadcn/ui components, as an app would have them in components/ui.
+export * from "./ui/accordion"
+export * from "./ui/alert"
+export * from "./ui/badge"
+export * from "./ui/button"
+export * from "./ui/card"
+export * from "./ui/checkbox"
+export * from "./ui/command"
+export * from "./ui/dialog"
+export * from "./ui/dropdown-menu"
+export * from "./ui/field"
+export * from "./ui/input"
+export * from "./ui/label"
+export * from "./ui/popover"
+export * from "./ui/radio-group"
+export * from "./ui/select"
+export * from "./ui/table"
+export * from "./ui/tabs"
+export * from "./ui/textarea"
diff --git a/test/shadcn/lib/utils.ts b/test/shadcn/lib/utils.ts
new file mode 100644
index 0000000..4e27981
--- /dev/null
+++ b/test/shadcn/lib/utils.ts
@@ -0,0 +1,7 @@
+// shadcn/ui's `cn` helper, as `npx shadcn init` writes it.
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/test/shadcn/ui/accordion.tsx b/test/shadcn/ui/accordion.tsx
new file mode 100644
index 0000000..337474e
--- /dev/null
+++ b/test/shadcn/ui/accordion.tsx
@@ -0,0 +1,66 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/accordion.json, unchanged except imports.
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/test/shadcn/ui/alert.tsx b/test/shadcn/ui/alert.tsx
new file mode 100644
index 0000000..aeb62ba
--- /dev/null
+++ b/test/shadcn/ui/alert.tsx
@@ -0,0 +1,66 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/alert.json, unchanged except imports.
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/utils"
+
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/test/shadcn/ui/badge.tsx b/test/shadcn/ui/badge.tsx
new file mode 100644
index 0000000..29b5d6e
--- /dev/null
+++ b/test/shadcn/ui/badge.tsx
@@ -0,0 +1,48 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/badge.json, unchanged except imports.
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/utils"
+import { Slot } from "radix-ui"
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/test/shadcn/ui/button.tsx b/test/shadcn/ui/button.tsx
new file mode 100644
index 0000000..a7ac86f
--- /dev/null
+++ b/test/shadcn/ui/button.tsx
@@ -0,0 +1,64 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/button.json, unchanged except imports.
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/utils"
+import { Slot } from "radix-ui"
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/test/shadcn/ui/card.tsx b/test/shadcn/ui/card.tsx
new file mode 100644
index 0000000..0dd17ab
--- /dev/null
+++ b/test/shadcn/ui/card.tsx
@@ -0,0 +1,92 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/card.json, unchanged except imports.
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/test/shadcn/ui/checkbox.tsx b/test/shadcn/ui/checkbox.tsx
new file mode 100644
index 0000000..ff88b0e
--- /dev/null
+++ b/test/shadcn/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/checkbox.json, unchanged except imports.
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { CheckIcon } from "lucide-react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/test/shadcn/ui/command.tsx b/test/shadcn/ui/command.tsx
new file mode 100644
index 0000000..e3f454c
--- /dev/null
+++ b/test/shadcn/ui/command.tsx
@@ -0,0 +1,185 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/command.json, unchanged except imports.
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { cn } from "../lib/utils"
+import { SearchIcon } from "lucide-react"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/test/shadcn/ui/dialog.tsx b/test/shadcn/ui/dialog.tsx
new file mode 100644
index 0000000..4a66ee1
--- /dev/null
+++ b/test/shadcn/ui/dialog.tsx
@@ -0,0 +1,159 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/dialog.json, unchanged except imports.
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { Button } from "./button"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/test/shadcn/ui/dropdown-menu.tsx b/test/shadcn/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..c494b9b
--- /dev/null
+++ b/test/shadcn/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/dropdown-menu.json, unchanged except imports.
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/test/shadcn/ui/field.tsx b/test/shadcn/ui/field.tsx
new file mode 100644
index 0000000..308481c
--- /dev/null
+++ b/test/shadcn/ui/field.tsx
@@ -0,0 +1,249 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/field.json, unchanged except imports.
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/utils"
+
+import { Label } from "./label"
+import { Separator } from "./separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/test/shadcn/ui/input.tsx b/test/shadcn/ui/input.tsx
new file mode 100644
index 0000000..2443505
--- /dev/null
+++ b/test/shadcn/ui/input.tsx
@@ -0,0 +1,21 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/input.json, unchanged except imports.
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/test/shadcn/ui/label.tsx b/test/shadcn/ui/label.tsx
new file mode 100644
index 0000000..3a5901c
--- /dev/null
+++ b/test/shadcn/ui/label.tsx
@@ -0,0 +1,24 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/label.json, unchanged except imports.
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { Label as LabelPrimitive } from "radix-ui"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/test/shadcn/ui/popover.tsx b/test/shadcn/ui/popover.tsx
new file mode 100644
index 0000000..766cbf8
--- /dev/null
+++ b/test/shadcn/ui/popover.tsx
@@ -0,0 +1,89 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/popover.json, unchanged except imports.
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+}
diff --git a/test/shadcn/ui/radio-group.tsx b/test/shadcn/ui/radio-group.tsx
new file mode 100644
index 0000000..3fff355
--- /dev/null
+++ b/test/shadcn/ui/radio-group.tsx
@@ -0,0 +1,45 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/radio-group.json, unchanged except imports.
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { CircleIcon } from "lucide-react"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/test/shadcn/ui/select.tsx b/test/shadcn/ui/select.tsx
new file mode 100644
index 0000000..3df9af8
--- /dev/null
+++ b/test/shadcn/ui/select.tsx
@@ -0,0 +1,190 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/select.json, unchanged except imports.
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/test/shadcn/ui/separator.tsx b/test/shadcn/ui/separator.tsx
new file mode 100644
index 0000000..41c7492
--- /dev/null
+++ b/test/shadcn/ui/separator.tsx
@@ -0,0 +1,28 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/separator.json, unchanged except imports.
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/test/shadcn/ui/table.tsx b/test/shadcn/ui/table.tsx
new file mode 100644
index 0000000..03c653b
--- /dev/null
+++ b/test/shadcn/ui/table.tsx
@@ -0,0 +1,116 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/table.json, unchanged except imports.
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/test/shadcn/ui/tabs.tsx b/test/shadcn/ui/tabs.tsx
new file mode 100644
index 0000000..51019ff
--- /dev/null
+++ b/test/shadcn/ui/tabs.tsx
@@ -0,0 +1,91 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/tabs.json, unchanged except imports.
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/utils"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/test/shadcn/ui/textarea.tsx b/test/shadcn/ui/textarea.tsx
new file mode 100644
index 0000000..2399768
--- /dev/null
+++ b/test/shadcn/ui/textarea.tsx
@@ -0,0 +1,18 @@
+// Stock shadcn/ui (new-york-v4) from https://ui.shadcn.com/r/styles/new-york-v4/textarea.json, unchanged except imports.
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/vite.config.ts b/vite.config.ts
index e4b757e..f00b618 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -21,6 +21,7 @@ export const entries: Record<string, string> = {
   "onu-maps": "src/onu-maps.ts",
   testing: "src/testing.ts",
   inertia: "src/inertia.ts",
+  shadcn: "src/shadcn.ts",
 }
 
 const output = {

From e8802cb726a415be89e1cac0f308d748c4d11754 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 13:37:13 +0500
Subject: [PATCH 12/18] Parity with javaabu/forms v2: docs/parity.md and agreed
 defaults

Form summary defaults to false (general messages still show); Errors and
ErrorSummary take bag (page errors from the router too); Textarea
wysiwyg; per_page / export_title / export_options strings; previous/next
keys as in Blade v2.

Refs #12, #18

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/parity-v2.md     |   5 ++
 docs/basic-usage/errors.md  |   4 +-
 docs/parity.md              | 116 ++++++++++++++++++++++++++++++++++++
 src/adapters/html/index.tsx |   6 +-
 src/components/form.tsx     |  25 +++++---
 src/components/listing.tsx  |  16 +++--
 src/components/textarea.tsx |  15 ++++-
 src/core/binding.test.tsx   |  12 ++++
 src/core/errors.test.tsx    |  16 ++++-
 src/core/form-context.tsx   |  12 ++--
 src/core/locales/dv.ts      |   6 +-
 src/core/locales/en.ts      |   6 +-
 src/testing/index.tsx       |   2 +-
 13 files changed, 212 insertions(+), 29 deletions(-)
 create mode 100644 .changeset/parity-v2.md
 create mode 100644 docs/parity.md

diff --git a/.changeset/parity-v2.md b/.changeset/parity-v2.md
new file mode 100644
index 0000000..7adf44c
--- /dev/null
+++ b/.changeset/parity-v2.md
@@ -0,0 +1,5 @@
+---
+"@javaabu/forms": minor
+---
+
+Parity with javaabu/forms v2. `Form summary` now defaults to `false`, as in Blade; a general message (a failed submit) still shows at the top. `Errors` and `ErrorSummary` take `bag`. `Textarea wysiwyg` renders the rich text editor. New strings: `per_page` (the `PerPage` default label), `export_title` and `export_options`. The parity matrix is in `docs/parity.md`.
diff --git a/docs/basic-usage/errors.md b/docs/basic-usage/errors.md
index 87a1afc..bc0ea92 100644
--- a/docs/basic-usage/errors.md
+++ b/docs/basic-usage/errors.md
@@ -3,7 +3,7 @@ title: Validation errors
 sidebar_position: 10
 ---
 
-Laravel's validation errors appear under their fields without any code. A field finds its errors by name, in dot or bracket notation, marks itself invalid and links the messages to the control for screen readers. A summary at the top of the form lists every error and links to the fields.
+Laravel's validation errors appear under their fields without any code. A field finds its errors by name, in dot or bracket notation, marks itself invalid and links the messages to the control for screen readers. With `summary`, a list at the top of the form shows every error and links to the fields.
 
 # Where errors come from
 
@@ -53,7 +53,7 @@ Without `errorBag`, a form reads the default bag. With the Inertia router, `erro
 
 - Each field shows all its messages under the control. `showErrors={false}` hides them and the invalid state.
 - `<Errors name="terms" />` shows a field's first error anywhere in the form (`firstOnly={false}` for all of them), like Blade's `<x-forms::errors>`.
-- The form shows `<ErrorSummary>` at the top. `summary={false}` turns it off, and `summaryTitle` changes its heading. Render `<ErrorSummary />` yourself inside the form to place it elsewhere, or outside a form with `errors`.
+- `<Form summary>` shows `<ErrorSummary>` at the top (off by default, as in Blade), and `summaryTitle` changes its heading. A general message, like a failed submit, always shows at the top. Render `<ErrorSummary />` yourself inside the form to place it elsewhere, or outside a form with `errors`.
 - When the user edits a field, its error goes away until the next submit.
 
 # Accessibility
diff --git a/docs/parity.md b/docs/parity.md
new file mode 100644
index 0000000..7747999
--- /dev/null
+++ b/docs/parity.md
@@ -0,0 +1,116 @@
+---
+title: Parity with javaabu/forms
+sidebar_position: 90
+---
+
+`@javaabu/forms` (React) and [`javaabu/forms`](https://github.com/Javaabu/forms) v2 (Blade) have the same components, attributes, value precedence, ids, labels, errors and strings, so a form moves between a Blade view and an Inertia React page without being redesigned. This page is the React side of the matrix. The Blade side is [`docs/parity.md` in javaabu/forms](https://github.com/Javaabu/forms/blob/next-gen/docs/parity.md). Open questions go in [react-forms#18](https://github.com/Javaabu/react-forms/issues/18).
+
+**Naming.** Blade components are kebab-case and React components PascalCase (`<x-forms::link-button>` ↔ `<LinkButton>`). Blade attributes are kebab-case and React props camelCase (`show-label` ↔ `showLabel`). A Blade named slot is a React prop of the same name (`<x-slot:help>` ↔ `help`), and the default slot is `children`. Blade's attribute bag (`id`, `class`, `disabled`, `min`, …) is the matching React prop (`className` for `class`).
+
+**Status:** ✅ same in both · ≠ intentional difference · ⚛️ React only · 🅱️ Blade only
+
+# Components
+
+| React | Blade | Status | Notes |
+| --- | --- | --- | --- |
+| `Form` | `form` | ✅ | `model`, `method` (spoofed), `files`, `action`, `summary`, `summaryTitle`, `focusOnError`, `errorBag`. React's submission props are ⚛️ (below). |
+| — | `form-open`, `form-close` | 🅱️ | For forms split across partials. |
+| `Model` | `@model` / `@endmodel` | ✅ | |
+| `OldInput`, `FormsProvider` | — | ⚛️ | React context. Blade reads old input, errors and config from Laravel. |
+| `FormGroup`, `Label`, `LabelRequired`, `InputHelp`, `Errors` | `form-group`, `label`, `label-required`, `input-help`, `errors` | ✅ | `Errors` takes `firstOnly` (default `true`) and `bag`. |
+| `ErrorSummary` | `error-summary` | ✅ | New in v2. `errors`, `bag`, `title`, `labels`. |
+| `Input`, `Text`, `Email`, `Password`, `Number`, `Tel`, `Url`, `Hidden`, `Latitude`, `Longitude` | same names | ✅ | |
+| `Textarea` | `textarea` | ✅ | `wysiwyg`, `rows`, `autoResize`, `thaana`. |
+| `Wysiwyg` | `wysiwyg` | ✅ | React uses the adapter's editor (Onu: Tiptap), Blade TinyMCE. Both submit HTML. |
+| `Checkbox`, `Radio` | `checkbox`, `radio` | ✅ | |
+| `Date`, `Datetime`, `Time` | `date`, `datetime`, `time` | ✅ | |
+| `Select`, `Select2` | `select`, `select2` | ✅ | |
+| `File`, `FileUpload`, `Image`, `ImageUpload` | `file`, `file-upload`, `image`, `image-upload` | ✅ | |
+| `MapInput` | `map-input` | ✅ | |
+| `ConditionalWrapper`, `ConditionalLink` | `conditional-wrapper`, `conditional-link` | ✅ | |
+| `Button`, `Submit`, `LinkButton`, `ButtonGroup` | `button`, `submit`, `link-button`, `button-group` | ✅ | `color`, `size`, `startIcon`, `endIcon`, `loading`; `LinkButton` `disabled`. |
+| `Alert` | `alert` | ✅ | |
+| `Card`, `CardHeader`, `CardTitle`, `CardSubtitle`, `CardFooter` | `card`, `card.header`, `card.title`, `card.subtitle`, `card.footer` | ✅ | |
+| `Accordion`, `AccordionItem` | `accordion`, `accordion.item` | ✅ | Named slots of `accordion` are React's `slots` prop. |
+| — | `accordion.header`, `accordion.collapse` | 🅱️ | Parts for custom item markup. |
+| `Tabs`, `TabsPane`, `NavTabs` | `tabs`, `tabs.pane`, `nav-tabs` | ✅ | Named slots of `tabs` are React's `slots` prop. |
+| — | `tabs.nav-item` | 🅱️ | Part of `tabs`. |
+| `Modal` | `modal` | ✅ | `modalSizeClass`, `size`, `description`, `title`, `footer`. |
+| `Status` | `status` | ✅ | |
+| `TextEntry`, `BooleanEntry`, `Infolist` | `text-entry`, `boolean-entry`, `infolist` | ✅ | |
+| `FormattedValue` | `formatted-value` | ✅ | New in v2. |
+| `Table`, `TableRow`, `TableCell`, `TableHeading`, `TableEmptyRow` | `table`, `table.row`, `table.cell`, `table.heading`, `table.empty-row` | ✅ | `Table`'s named slots (`bulkForm`, `headers`, `beforeTable`, …) are props. |
+| `BulkActions`, `Filter`, `FilterSubmit`, `PerPage`, `SearchForm`, `NoItems` | `bulk-actions`, `filter`, `filter-submit`, `per-page`, `search-form`, `no-items` | ✅ | |
+| `Pagination` | `pagination` | ✅ | New in v2. Takes a paginator's JSON in React. |
+| — | `icon` | 🅱️ | React components get icons from the adapter's `Icon` slot. |
+| — | `js-errors` | 🅱️ | A placeholder for js-utilities' AJAX errors. React shows those errors itself. |
+
+# Attributes every field shares
+
+| React | Blade | Notes |
+| --- | --- | --- |
+| `name`, `label`, `id`, `model`, `default`, `required`, `disabled` | same | `model={false}` ignores the bound model in both. |
+| `showLabel`, `showErrors`, `inline`, `inlineLabelClass`, `inlineInputClass`, `formGroupClass` | `show-label`, `show-errors`, `inline`, `inline-label-class`, `inline-input-class`, `form-group-class` | |
+| `placeholder`, `showPlaceholder` | `placeholder`, `show-placeholder` | Text-like fields and selects. |
+| `help` | slot `help` | |
+| `prepend`, `append` | slots `prepend`, `append` | Text-like and number fields. |
+| `thaana` | `thaana` | Free-text fields: type Thaana from a Latin keyboard. Thaana fields are `dir="rtl" lang="dv"`. |
+| — | `floating`, `show-js-errors`, `framework` | 🅱️ Floating labels fail WCAG 2.2 as a label stand-in and Onu has none. `framework` is React's adapter (`FormsProvider ui`). |
+
+# Per-component differences
+
+Only what differs; everything else in a component's props is in both.
+
+| Component | React only ⚛️ | Blade only 🅱️ | Why |
+| --- | --- | --- | --- |
+| `Form` | `form` (Inertia `useForm`), `onSubmit`, `onSuccess`, `onError`, `onProgress`, `visitOptions`, `preserveScroll`, `preserveState`, `resetOnSuccess`, `processing`, `disableWhileProcessing`, `errors`, `old`, `csrf`, `components` | — | Client-side submission. Blade forms submit natively; `@csrf` is automatic in both. |
+| Value fields | `value` + `onChange` / `onValueChange` / `onCheckedChange`, `checked` | — | Controlled React props. |
+| `Text` etc. | `thaanaToggle` | — | A Thaana / Latin switch on the input. |
+| `Number`, `Latitude`, `Longitude` | `decimals`, `min`, `max`, `step` as props | (attribute bag) | Same names in both. |
+| `Password` | — | `default` | React never pre-fills passwords, so there's nothing to default. |
+| `Date`, `Datetime`, `Time` | `min`, `max` take dates | `date-format`, `icon`, `clear-icon`, `clear-btn-class`, `icon-wrapper-class` | React's pickers come from the adapter; values are submitted as `yyyy-MM-dd`, `yyyy-MM-dd HH:mm:ss`, `HH:mm` in both. |
+| `Select2` | — | `is-first`, `is-icon-select`, `icon-prefix`, `parent-modal` | js-utilities / select2 options. React's dropdowns portal, so `parent-modal` isn't needed; the icon picker stays Blade-only. |
+| `File`, `Image` | `onUploaded` | `upload-icon`, `clear-icon`, `download-icon`; `Image` `file-input-class` | Icons come from the adapter in React. |
+| `Wysiwyg` | — | `rows` | The React editor sizes itself. |
+| `ConditionalWrapper` | — | `json-encode` | How Blade writes the value into a `data-` attribute. |
+| `Label` | `children` for content | `blank-label`, `inline`, `inline-label-class` | React's `FormGroup blankLabel` covers the blank label. |
+| `TableHeading` | — | `colspan` | Plain `colSpan` in React. |
+| `TabsPane` | — | `active`, `labelled-by` | React sets the active tab on `Tabs`, and generates the ids. |
+| `AccordionItem` | `header` | `parent` | React items know their accordion. |
+| `Modal` | `open`, `defaultOpen`, `onOpenChange`, `trigger` | — | React state. Blade opens a modal by its `id`. |
+| `SearchForm` | `action` and every `Form` prop | `route`, `params`, `icon` | React passes the URL (or a Wayfinder route) as `action`. |
+| `FormattedValue` | `arrays`, `wysiwyg` | `name`, `model` | React takes the value itself. |
+| `Pagination` | `getPageHref`, `onPageChange` | — | Client-side page links. |
+| `Infolist` | `layout` | — | Sets every entry's layout; in Blade set `inline` on each entry. |
+| `Accordion`, `Tabs` | `slots` | (named slots) | A record of named slots. |
+
+# Behaviour
+
+| Behaviour | Both |
+| --- | --- |
+| Value precedence | Old input, then the bound value (`data_get`), then `default`. `Select`/`Select2`: old input, then `default`, then the bound value. Old input wins even when `null` (the key was submitted). |
+| Checkboxes | Once there is any old input, checked only when it contains the value. Otherwise an array binding contains the value, a scalar is truthy, or `default` when `null`. |
+| Radios | ≠ Selected when the bound value equals their `value` (Blade v1 checked every radio of a group on a truthy value; React and v2 compare values). |
+| Ids | From names: `address[city]` → `address-city`, `tags[]` → `tags`. Grouped checkboxes (`channels[]`) get the value appended: `channels-email`. |
+| Labels | From names: `first_name` → `First Name`, translated (`__()` / `trans()`). |
+| Multiple selects | Submit `name[]` and a `sync_<name>` hidden field (unless `excludeSyncField` or disabled). |
+| Relations | `relation`: a bound model becomes its key, a collection its keys. |
+| Errors | Bracket names map to dot keys (`items[0][name]` → `items.0.name`); array fields (`tags[]`) also show `tags.N` errors; the `default` bag unless `errorBag` / `bag`. |
+| Accessibility | Invalid controls get `aria-invalid="true"` and `aria-describedby` pointing at the help text and errors; the first invalid field is focused when errors arrive (`focusOnError`). |
+| Error summary | `Form summary` (default `false` in both, agreed in #18) lists every error at the top. React always shows a general message (a failed client-side submit) at the top. |
+| Method spoofing and CSRF | `PUT`/`PATCH`/`DELETE` are sent as `POST` with `_method`; non-GET forms get `_token`. |
+| Dates | Accept Laravel's formats; submit `yyyy-MM-dd`, `yyyy-MM-dd HH:mm:ss`, `HH:mm`. |
+| Formatted values | Enums (`{ value, label }`) show their label (a status badge with `color`), booleans Yes / No, empty values `-`, arrays a list (text entries) or joined with `table_array_separator` (table cells). |
+| Button colours | Bootstrap names (`primary`, `danger`, `outline-secondary`, …) in both; each React adapter maps them to its variants. |
+
+# Strings
+
+Both packages read the same keys, `forms::strings.<key>`, so an app's `lang/vendor/forms/{locale}/strings.php` changes Blade and React alike. See [Translations](./basic-usage/translations) for every key with its English and Dhivehi line.
+
+| Key | Status |
+| --- | --- |
+| Every key of Blade v1's `strings.php` | ✅ |
+| `clear`, `close`, `create_new`, `select_all`, `select_row` (with `:name`), `bulk_action`, `apply`, `filter`, `export`, `export_title`, `export_options`, `pagination`, `per_page`, `previous`, `next`, `error_summary_title`, `no_items_title`, `no_items_message`, `items` | ✅ (added in v2) |
+| `table_array_separator` | ≠ React `", "` / `"، "`; see #18 |
+| `pagination_showing`, `sections` | 🅱️ Blade's paginator and tabs views |
+| `sort_by`, `page`, `search`, `add_option`, `loading`, `error_loading_options`, `uploading`, `removing`, `are_you_sure`, `remove_file_confirm`, `remove_file_confirm_button`, `cancel`, `upload_error`, `remove_error`, `file_too_large`, `file_type_not_allowed`, `confirm_text`, `confirm_button`, `delete_confirm_text`, `delete_confirm_button`, `submit_failed`, `thaana_toggle`, `kb`, `mb`, `gb` | ⚛️ Client-side behaviour (js-utilities' messages and the React components' own text) |
diff --git a/src/adapters/html/index.tsx b/src/adapters/html/index.tsx
index 61e2b64..09f20b5 100644
--- a/src/adapters/html/index.tsx
+++ b/src/adapters/html/index.tsx
@@ -1025,15 +1025,13 @@ function Pagination({ currentPage, lastPage, hrefFor, onPageChange, className }:
   return (
     <nav data-slot="pagination" aria-label={t("pagination")} className={className}>
       <ul>
-        <li>{item(currentPage - 1, <ui.Icon name="chevron-left" />, t("pagination_previous"), currentPage <= 1)}</li>
+        <li>{item(currentPage - 1, <ui.Icon name="chevron-left" />, t("previous"), currentPage <= 1)}</li>
         {pageWindow(currentPage, lastPage).map((page, i) => (
           <li key={page ?? `gap-${i}`}>
             {page === null ? "…" : item(page, page, t("page", { page }), false, page === currentPage)}
           </li>
         ))}
-        <li>
-          {item(currentPage + 1, <ui.Icon name="chevron-right" />, t("pagination_next"), currentPage >= lastPage)}
-        </li>
+        <li>{item(currentPage + 1, <ui.Icon name="chevron-right" />, t("next"), currentPage >= lastPage)}</li>
       </ul>
     </nav>
   )
diff --git a/src/components/form.tsx b/src/components/form.tsx
index 3ed7c0f..6e7ea71 100644
--- a/src/components/form.tsx
+++ b/src/components/form.tsx
@@ -95,7 +95,10 @@ export interface FormProps<T = FormValues> extends Omit<
   disabled?: boolean
   /** Disable fields while processing. Default `true`. */
   disableWhileProcessing?: boolean
-  /** Show the error summary at the top. Default `true`. */
+  /**
+   * Show the error summary at the top. Default `false`, as in Blade: errors show under their
+   * fields. A general message (a failed submit) still shows at the top.
+   */
   summary?: boolean
   summaryTitle?: React.ReactNode
   /** Focus the first invalid field when errors arrive. Default `true`. */
@@ -141,7 +144,7 @@ export function Form<T = FormValues>(props: FormProps<T>) {
     processing: processingProp,
     disabled,
     disableWhileProcessing = true,
-    summary = true,
+    summary = false,
     summaryTitle,
     focusOnError = true,
     visitOptions,
@@ -424,7 +427,7 @@ export function Form<T = FormValues>(props: FormProps<T>) {
       >
         {csrf && !SAFE_METHODS.includes(method) && token ? <input type="hidden" name="_token" value={token} /> : null}
         {spoof ? <input type="hidden" name="_method" value={method.toUpperCase()} /> : null}
-        {summary ? <ErrorSummary title={summaryTitle} /> : null}
+        {summary ? <ErrorSummary title={summaryTitle} /> : <ErrorSummary errors={null} title={summaryTitle} />}
         {children}
       </ui.Form>
     </FormStateProvider>
@@ -441,6 +444,8 @@ export function Form<T = FormValues>(props: FormProps<T>) {
 export interface ErrorSummaryProps {
   /** Errors to list. Default: the surrounding form's. */
   errors?: FormErrors | null
+  /** List this error bag of `FormsProvider errors` (Blade's `bag`). */
+  bag?: string
   /** A general message. Default: the form's. */
   message?: React.ReactNode
   /** Heading. Default: "Please correct the errors below." */
@@ -452,11 +457,12 @@ export interface ErrorSummaryProps {
 
 /**
  * A summary of every error at the top of a form. Each entry links to its field
- * and focuses it. `Form` renders one unless `summary={false}`; render it yourself
+ * and focuses it. `Form summary` renders one at the top; or render it yourself
  * to place it elsewhere.
  */
 export function ErrorSummary({
   errors: errorsProp,
+  bag,
   message: messageProp,
   title,
   labels,
@@ -464,8 +470,11 @@ export function ErrorSummary({
 }: ErrorSummaryProps) {
   const ui = useUi()
   const form = useFormState()
+  const config = useFormsConfig()
+  const page = config.router?.usePageErrors?.()
   const { t } = useFormsTranslation()
-  const errors = errorsProp !== undefined ? errorsProp : (form?.errors ?? null)
+  const errors =
+    errorsProp !== undefined ? errorsProp : bag || !form ? selectErrorBag(page ?? config.errors, bag) : form.errors
   const message = messageProp !== undefined ? messageProp : form?.message
   const entries = errorEntries(errors)
   if (!entries.length && !message) return null
@@ -549,6 +558,8 @@ export function InputHelp(props: { id?: string; className?: string; children?: R
 export interface ErrorsProps {
   /** Field name (bracket or dot notation). */
   name: string
+  /** Read this error bag of `FormsProvider errors` instead of the form's errors. */
+  bag?: string
   /** Show only the first message, like Blade's `@error`. Default `true`. */
   firstOnly?: boolean
   id?: string
@@ -556,9 +567,9 @@ export interface ErrorsProps {
 }
 
 /** `<x-forms::errors>`: the validation errors of one field, from the surrounding `Form`. */
-export function Errors({ name, firstOnly = true, ...props }: ErrorsProps) {
+export function Errors({ name, bag, firstOnly = true, ...props }: ErrorsProps) {
   const ui = useUi()
-  const errors = useFieldErrors(name)
+  const errors = useFieldErrors(name, bag)
   if (!errors.length) return null
   return <ui.FieldErrors {...props} errors={firstOnly ? errors.slice(0, 1) : errors} />
 }
diff --git a/src/components/listing.tsx b/src/components/listing.tsx
index 0fd656a..2c4822f 100644
--- a/src/components/listing.tsx
+++ b/src/components/listing.tsx
@@ -500,7 +500,14 @@ export function FilterSubmit({
       </Button>
       {exports && keys.length ? (
         <ui.ButtonGroup orientation="horizontal">
-          <ui.Button type="submit" color="secondary" name="download" value={keys[0]} startIcon="download">
+          <ui.Button
+            type="submit"
+            color="secondary"
+            name="download"
+            value={keys[0]}
+            startIcon="download"
+            title={t("export_title")}
+          >
             {t("export")}
           </ui.Button>
           {keys.length > 1 ? (
@@ -544,6 +551,7 @@ export interface PerPageProps {
 
 /** `<x-forms::per-page>`: the `per_page` select of a filter form. */
 export function PerPage({ amounts = [10, 20, 50, 100, 500], perPage, label, showLabel, className }: PerPageProps) {
+  const { t } = useFormsTranslation()
   const setting = useSetting<number>("per_page")
   const selected = toFormString(perPage ?? currentQuery().get("per_page") ?? setting ?? "")
   const options: Array<[string, string]> = Array.isArray(amounts)
@@ -556,7 +564,7 @@ export function PerPage({ amounts = [10, 20, 50, 100, 500], perPage, label, show
       options={options}
       default={selected}
       model={false}
-      label={label}
+      label={label ?? t("per_page")}
       showLabel={showLabel}
       allowClear={false}
       hideSearch
@@ -690,7 +698,7 @@ export function Pagination({ paginator, getPageHref, onPageChange, className }:
           disabled={!p.prev_page_url}
           startIcon="chevron-left"
         >
-          {t("pagination_previous")}
+          {t("previous")}
         </LinkButton>
         <LinkButton
           url={p.next_page_url ?? undefined}
@@ -698,7 +706,7 @@ export function Pagination({ paginator, getPageHref, onPageChange, className }:
           disabled={!p.next_page_url}
           endIcon="chevron-right"
         >
-          {t("pagination_next")}
+          {t("next")}
         </LinkButton>
       </nav>
     )
diff --git a/src/components/textarea.tsx b/src/components/textarea.tsx
index 422b1fb..f11aa3b 100644
--- a/src/components/textarea.tsx
+++ b/src/components/textarea.tsx
@@ -6,6 +6,7 @@ import { useFieldValue } from "../core/binding"
 import { useUi } from "../core/provider"
 import { usePublishField } from "../core/registry"
 import { toFormString } from "../support/data"
+import { Wysiwyg } from "./wysiwyg"
 import { splitFieldProps, useField, useFieldState, type FieldProps, type PlaceholderProps } from "./field"
 
 type NativeTextareaProps = Omit<
@@ -22,10 +23,22 @@ export interface TextareaProps extends FieldProps, PlaceholderProps, NativeTexta
   autoResize?: boolean
   /** Type Thaana from a Latin keyboard. */
   thaana?: boolean
+  /** Render a rich text editor instead, like Blade's `<x-forms::textarea wysiwyg>` (see `Wysiwyg`). */
+  wysiwyg?: boolean
 }
 
 /** `<x-forms::textarea>`. For a rich text editor use `Wysiwyg` (Blade's `wysiwyg` attribute). */
-export function Textarea(props: TextareaProps) {
+export function Textarea({ wysiwyg, ...props }: TextareaProps) {
+  if (wysiwyg) {
+    const { field, rest } = splitFieldProps(props)
+    return (
+      <Wysiwyg {...field} value={rest.value} placeholder={rest.placeholder} showPlaceholder={rest.showPlaceholder} />
+    )
+  }
+  return <PlainTextarea {...props} />
+}
+
+function PlainTextarea(props: Omit<TextareaProps, "wysiwyg">) {
   const ui = useUi()
   const { field, rest } = splitFieldProps(props)
   const { value, placeholder, showPlaceholder, rows = 3, autoResize = false, thaana, onChange, ...textareaProps } = rest
diff --git a/src/core/binding.test.tsx b/src/core/binding.test.tsx
index baefd28..6d8e424 100644
--- a/src/core/binding.test.tsx
+++ b/src/core/binding.test.tsx
@@ -123,6 +123,18 @@ describe("value precedence: old input → bound value → default", () => {
   })
 })
 
+describe("textarea wysiwyg", () => {
+  it("renders the rich text editor, like Blade's textarea wysiwyg", () => {
+    const { container } = render(
+      <Form model={{ body: "<p>ހެލޯ</p>" }}>
+        <Textarea name="body" wysiwyg />
+      </Form>,
+    )
+    expect(container.querySelector("[data-slot=wysiwyg]")).toBeInTheDocument()
+    expect(values(container).get("body")).toBe("<p>ހެލޯ</p>")
+  })
+})
+
 describe("checkboxes and radios", () => {
   it("are checked from a boolean, an array of values or the default", () => {
     const { container } = render(
diff --git a/src/core/errors.test.tsx b/src/core/errors.test.tsx
index 1f288cb..4091d40 100644
--- a/src/core/errors.test.tsx
+++ b/src/core/errors.test.tsx
@@ -140,7 +140,11 @@ describe("errors under fields", () => {
 describe("error summary", () => {
   it("lists every error with the field's label and focuses the field on click", async () => {
     render(
-      <Form errors={{ title: "The title field is required.", "items.0.name": "Name the item." }} focusOnError={false}>
+      <Form
+        errors={{ title: "The title field is required.", "items.0.name": "Name the item." }}
+        focusOnError={false}
+        summary
+      >
         <Text name="title" label="ސުރުޚީ" />
         <Text name="items[0][name]" />
       </Form>,
@@ -158,6 +162,16 @@ describe("error summary", () => {
     expect(screen.getByText("Taken.")).toBeInTheDocument()
   })
 
+  it("reads a named bag outside a form", () => {
+    render(
+      <FormsProvider errors={{ login: { email: "ނުފެނުނު." } }}>
+        <ErrorSummary bag="login" />
+        <Errors name="email" bag="login" />
+      </FormsProvider>,
+    )
+    expect(screen.getAllByText("ނުފެނުނު.")).toHaveLength(2)
+  })
+
   it("renders nothing without errors", () => {
     const { container } = render(<ErrorSummary errors={{}} />)
     expect(container).toBeEmptyDOMElement()
diff --git a/src/core/form-context.tsx b/src/core/form-context.tsx
index 5c63456..a1bca50 100644
--- a/src/core/form-context.tsx
+++ b/src/core/form-context.tsx
@@ -91,13 +91,15 @@ export function storeFor(form: {
 const NO_ERRORS: string[] = []
 
 /**
- * The errors of one field: from the surrounding `Form`, or, outside a form,
- * from `FormsProvider errors` (the default bag).
+ * The errors of one field: from the surrounding `Form`, or, outside a form or
+ * with a `bag`, from `FormsProvider errors` (the default bag, or the named one).
  */
-export function useFieldErrors(name: string | undefined): string[] {
+export function useFieldErrors(name: string | undefined, bag?: string): string[] {
   const form = useFormState()
-  const { errors: provided } = useFormsConfig()
-  const errors = form ? form.errors : selectErrorBag(provided)
+  const { errors: provided, router } = useFormsConfig()
+  const page = router?.usePageErrors?.()
+  // A named bag reads the page's errors (router or provider); otherwise the form's.
+  const errors = form && !bag ? form.errors : selectErrorBag(page ?? provided, bag)
   const list = errorsFor(errors, name)
   return list.length ? list : NO_ERRORS
 }
diff --git a/src/core/locales/dv.ts b/src/core/locales/dv.ts
index 292d565..739a49b 100644
--- a/src/core/locales/dv.ts
+++ b/src/core/locales/dv.ts
@@ -43,8 +43,10 @@ export const dv: FormsMessages = {
   no_items_message: "އައު :model_type ހަދާލަމާ.",
   items: "އެއްޗެހި",
   pagination: "ޞަފްޙާތައް",
-  pagination_previous: "ކުރީގެ",
-  pagination_next: "ދެން",
+  previous: "ކުރީގެ",
+  next: "ދެން",
+  per_page: "ކޮންމެ ސަފްހާއެއްގައި",
+  export_title: "XLSX އަށް އެކްސްޕޯޓްކުރޭ",
   export_options: "އިތުރު އެކްސްޕޯޓް އޮޕްޝަންތައް",
   sort_by: ":label އިން ތަރުތީބުކުރޭ",
 
diff --git a/src/core/locales/en.ts b/src/core/locales/en.ts
index d858148..c07bab9 100644
--- a/src/core/locales/en.ts
+++ b/src/core/locales/en.ts
@@ -46,8 +46,10 @@ export const en = {
   no_items_message: "Let's create some new :model_type.",
   items: "items",
   pagination: "Pagination",
-  pagination_previous: "Previous",
-  pagination_next: "Next",
+  previous: "Previous",
+  next: "Next",
+  per_page: "Per page",
+  export_title: "Export to XLSX",
   export_options: "More export options",
   sort_by: "Sort by :label",
 
diff --git a/src/testing/index.tsx b/src/testing/index.tsx
index a429ebd..2ddefb0 100644
--- a/src/testing/index.tsx
+++ b/src/testing/index.tsx
@@ -136,7 +136,7 @@ export function adapterConformance(
       name: "ErrorSummary lists the errors and focuses the field",
       run: async () => {
         mount(
-          <Form errors={{ title: "The title field is required." }} focusOnError={false}>
+          <Form errors={{ title: "The title field is required." }} focusOnError={false} summary>
             <Text name="title" />
           </Form>,
         )

From c2a5fc14446450de14d77599665ad35582a8fa11 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 13:39:18 +0500
Subject: [PATCH 13/18] Dhivehi localization and RTL

Side arrows flip in RTL in the HTML adapter; Thaana typing and RTL are
tested with Thaana text; docs list the Dhivehi lines that need review.
The RTL lint rule matches only Tailwind values, not prose.

Closes #15

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/rtl.md                      |   5 ++
 docs/advanced-usage/dhivehi-and-rtl.md | 103 +++++++++++++++++++++++++
 docs/basic-usage/translations.md       |   2 +-
 eslint.config.js                       |   2 +-
 src/adapters/html/index.tsx            |   7 +-
 src/core/rtl.test.tsx                  |  88 +++++++++++++++++++++
 6 files changed, 203 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/rtl.md
 create mode 100644 docs/advanced-usage/dhivehi-and-rtl.md
 create mode 100644 src/core/rtl.test.tsx

diff --git a/.changeset/rtl.md b/.changeset/rtl.md
new file mode 100644
index 0000000..8d590eb
--- /dev/null
+++ b/.changeset/rtl.md
@@ -0,0 +1,5 @@
+---
+"@javaabu/forms": patch
+---
+
+The HTML adapter flips side-pointing arrows in right-to-left pages. Thaana typing (`thaana`) is documented and tested for every adapter. Dhivehi lines that need a native speaker's review are listed in `docs/advanced-usage/dhivehi-and-rtl.md`.
diff --git a/docs/advanced-usage/dhivehi-and-rtl.md b/docs/advanced-usage/dhivehi-and-rtl.md
new file mode 100644
index 0000000..f23c9dd
--- /dev/null
+++ b/docs/advanced-usage/dhivehi-and-rtl.md
@@ -0,0 +1,103 @@
+---
+title: Dhivehi and RTL
+sidebar_position: 5
+---
+
+The components work in Dhivehi and other right-to-left languages with no extra setup.
+
+# Direction
+
+Set `dir` on `<html>` (Laravel's layout does, from the locale). Everything is laid out with logical properties (`margin-inline-start`, Tailwind's `ms-` / `pe-` / `start-`), so it mirrors on its own. Arrows that point to a side (pagination's previous and next) flip in right-to-left pages.
+
+When the locale changes at runtime (`setLocale("dv")` from `@javaabu/i18n`), update `<html>` yourself and the components' strings follow:
+
+```tsx
+import { useTranslation } from "@javaabu/i18n/react"
+
+function Direction() {
+  const { locale, direction } = useTranslation()
+  React.useEffect(() => {
+    document.documentElement.lang = locale
+    document.documentElement.dir = direction
+  }, [locale, direction])
+  return null
+}
+```
+
+# Typing Thaana
+
+Give free-text fields `thaana` and people can type Thaana from a Latin keyboard (the common phonetic layout, from JTK). The field is marked `dir="rtl" lang="dv"`. `thaanaToggle` adds a button to switch between Thaana and Latin.
+
+```tsx
+<Text name="name_dv" label="ނަން" thaana />
+<Textarea name="address_dv" label="އެޑްރެސް" thaana thaanaToggle />
+```
+
+`Email`, `Url`, `Tel`, `Password` and `Number` are always left-to-right and ignore `thaana`.
+
+With the Onu adapter, Onu's own Thaana support does the typing. Other adapters use `thaanaKeyDown`, which you can also put on your own inputs:
+
+```tsx
+import { thaanaKeyDown, toThaana } from "@javaabu/forms"
+
+<input onKeyDown={thaanaKeyDown} dir="rtl" lang="dv" />
+toThaana("dhivehi") // "ދހިވެހި"
+```
+
+# Fonts
+
+Load a Thaana font, for example `@fontsource-variable/noto-sans-thaana`, and put it in your font stack. Onu's theme includes one.
+
+# Writing an adapter for RTL
+
+- Use logical CSS only. This repository's lint rule rejects `ml-`, `pr-`, `left-`, `text-right` and the like.
+- Flip icons that point to a side when `useFormsTranslation().direction === "rtl"`.
+- Don't set `dir` on controls unless you were given it (`Input` and `Textarea` get `dir` and `lang` with `thaana`).
+
+# Dhivehi lines to review
+
+Every string has a Dhivehi line. The ones in javaabu/forms v1's `lang/dv/strings.php` were written by people. The rest were written while building this package and need a native speaker's review. Change them in `src/core/locales/dv.ts`, and in javaabu/forms' `lang/dv/strings.php` for shared keys. Apps can override any of them without waiting (see [Translations](../basic-usage/translations)).
+
+| Key | English | Dhivehi |
+| --- | --- | --- |
+| `bulk_action` | Bulk Action | ބަލްކް އެކްޝަން |
+| `apply` | Apply | ހިންގާ |
+| `filter` | Filter | ފިލްޓަރ |
+| `export` | Export | އެކްސްޕޯޓް |
+| `clear` | Clear | ސާފުކުރޭ |
+| `select_all` | Select All | ހުރިހާ އެއްޗެއް ޚިޔާރުކުރޭ |
+| `select_row` | Select :name | :name ޚިޔާރުކުރޭ |
+| `create_new` | Create New | އާ އެއްޗެއް ހަދާ |
+| `no_items_title` | It's a bit lonely here. | މިތާ އަދި އެއްވެސް އެއްޗެއް ނެތް. |
+| `no_items_message` | Let's create some new :model_type. | އައު :model_type ހަދާލަމާ. |
+| `items` | items | އެއްޗެހި |
+| `pagination` | Pagination | ޞަފްޙާތައް |
+| `previous` | Previous | ކުރީގެ |
+| `next` | Next | ދެން |
+| `per_page` | Per page | ކޮންމެ ސަފްހާއެއްގައި |
+| `export_title` | Export to XLSX | XLSX އަށް އެކްސްޕޯޓްކުރޭ |
+| `export_options` | More export options | އިތުރު އެކްސްޕޯޓް އޮޕްޝަންތައް |
+| `sort_by` | Sort by :label | :label އިން ތަރުތީބުކުރޭ |
+| `loading` | Loading... | ލޯޑުވަނީ… |
+| `error_loading_options` | Error Loading Options | އޮޕްޝަންތައް ލޯޑެއް ނުކުރެވުނު |
+| `uploading` | Uploading... | އަޕްލޯޑްކުރަނީ… |
+| `removing` | Removing... | ފޮހެލަނީ… |
+| `are_you_sure` | Are you sure? | ކަށަވަރުތަ؟ |
+| `remove_file_confirm` | You will not be able to undo deleting this file! | މި ފައިލް ފޮހެލުމަށްފަހު އަނބުރާ ނުގެނެވޭނެ! |
+| `remove_file_confirm_button` | Yes, remove it! | އާން، ފޮހެލާ! |
+| `cancel` | Cancel | ކެންސަލްކުރޭ |
+| `upload_error` | An error occurred while uploading the file. | ފައިލް އަޕްލޯޑްކުރުމުގައި މައްސަލައެއް ދިމާވެއްޖެ. |
+| `remove_error` | An error occurred while removing the file. | ފައިލް ފޮހެލުމުގައި މައްސަލައެއް ދިމާވެއްޖެ. |
+| `file_too_large` | File size cannot be greater than :size MB | ފައިލްގެ ސައިޒު :size MB އަށްވުރެ ބޮޑުވެގެން ނުވާނެ |
+| `file_type_not_allowed` | Only :accept files are allowed. | ހަމައެކަނި :accept ފައިލް. |
+| `confirm_text` | Just checking if you wanted to really do this. | މިކަން ކުރަން ބޭނުންވާކަން ކަށަވަރުކޮށްލަން. |
+| `confirm_button` | Yes, continue! | އާން، ކުރިއަށް! |
+| `delete_confirm_text` | You will not be able to undo this delete operation! | މި ފޮހެލުމަށްފަހު އަނބުރާ ބަދަލެއް ނުކުރެވޭނެ! |
+| `delete_confirm_button` | Yes, delete it! | އާން، ފޮހެލާ! |
+| `error_summary_title` | Please correct the errors below. | ތިރީގައިވާ ގޯސްތައް ރަނގަޅުކުރައްވާ. |
+| `submit_failed` | The form could not be submitted. Please try again. | ފޯމު ހުށައެޅިއެއް ނުދިޔައެވެ. އަލުން މަސައްކަތްކުރައްވާ. |
+| `close` | Close | ބަންދުކުރޭ |
+| `page` | Page :page | ސަފްހާ :page |
+| `search` | Search | ހޯދާ |
+| `add_option` | Add ":value" | ":value" އިތުރުކުރޭ |
+| `thaana_toggle` | Type in Thaana | ތާނައިން ލިޔުއްވާ |
diff --git a/docs/basic-usage/translations.md b/docs/basic-usage/translations.md
index ce77056..f5a175e 100644
--- a/docs/basic-usage/translations.md
+++ b/docs/basic-usage/translations.md
@@ -163,4 +163,4 @@ function UploadHint() {
 | `add_option` | Add ":value" | ":value" އިތުރުކުރޭ |
 | `thaana_toggle` | Type in Thaana | ތާނައިން ލިޔުއްވާ |
 
-The Dhivehi lines marked for review are listed in [Dhivehi and RTL](../advanced-usage/dhivehi-and-rtl).
+The Dhivehi lines marked for review are listed in [Dhivehi and RTL](../advanced-usage/dhivehi-and-rtl#dhivehi-lines-to-review).
diff --git a/eslint.config.js b/eslint.config.js
index 8e85fbb..5e8acb6 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -5,7 +5,7 @@ import tseslint from "typescript-eslint"
 
 /** Physical (left/right) Tailwind utilities; RTL needs the logical ones (ms-, pe-, start-, text-start). */
 const physical =
-  /(^|[\s:"'`])-?((ml|mr|pl|pr|left|right|rounded-l|rounded-r|border-l|border-r)-[\w[]|(text-left|text-right|rounded-l|rounded-r|border-l|border-r)(?![\w-]))/
+  /(^|[\s:"'`])-?((ml|mr|pl|pr|left|right|rounded-l|rounded-r|border-l|border-r)-(\d|\[|px\b|full\b|auto\b)|(text-left|text-right|rounded-l|rounded-r|border-l|border-r)(?![\w-]))/
 
 export default tseslint.config(
   { ignores: ["dist", "coverage", "node_modules", "examples/dist", "test/shadcn/ui"] },
diff --git a/src/adapters/html/index.tsx b/src/adapters/html/index.tsx
index 09f20b5..f8367e5 100644
--- a/src/adapters/html/index.tsx
+++ b/src/adapters/html/index.tsx
@@ -585,9 +585,10 @@ const ICON_PATHS: Record<IconName, string> = {
 }
 
 function Icon({ name, size = "md", className }: IconSlotProps) {
+  const { direction } = useFormsTranslation()
   const px = size === "sm" ? 14 : 16
   // Arrows that point to a side follow the reading direction.
-  const flip = name === "chevron-left" || name === "chevron-right"
+  const flip = (name === "chevron-left" || name === "chevron-right") && direction === "rtl"
   return (
     <svg
       data-slot="icon"
@@ -601,7 +602,9 @@ function Icon({ name, size = "md", className }: IconSlotProps) {
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
-      className={cx(flip && "rtl:-scale-x-100", className)}
+      data-flipped={flip || undefined}
+      style={flip ? { transform: "scaleX(-1)" } : undefined}
+      className={className}
     >
       <path d={ICON_PATHS[name]} />
     </svg>
diff --git a/src/core/rtl.test.tsx b/src/core/rtl.test.tsx
new file mode 100644
index 0000000..2b7bd2b
--- /dev/null
+++ b/src/core/rtl.test.tsx
@@ -0,0 +1,88 @@
+import { act, fireEvent, render, screen } from "@testing-library/react"
+import { setLocale } from "@javaabu/i18n"
+
+import { Tel, Text } from "../components/inputs"
+import { Textarea } from "../components/textarea"
+import { Pagination } from "../components/listing"
+import { Form } from "../components/form"
+import { THAANA_KEYMAP, thaanaKeyDown, toThaana } from "./thaana"
+import { dv } from "./locales"
+
+afterEach(() => act(() => setLocale("en")))
+
+describe("Thaana typing", () => {
+  it("maps the phonetic layout", () => {
+    expect(toThaana("dhivehi")).toBe("ދހިވެހި")
+    expect(toThaana("rAjje")).toBe("ރާޖޖެ")
+    expect(THAANA_KEYMAP.a).toBe("ަ")
+    expect(THAANA_KEYMAP["?"]).toBe("؟")
+  })
+
+  it("types Thaana into thaana fields, at the caret, and reports the change", () => {
+    const { container } = render(
+      <Form>
+        <Text name="name_dv" thaana />
+        <Textarea name="note" thaana />
+        <Text name="email_ascii" />
+      </Form>,
+    )
+    const input = screen.getByLabelText("Name Dv") as HTMLInputElement
+    expect(input).toHaveAttribute("dir", "rtl")
+    expect(input).toHaveAttribute("lang", "dv")
+    for (const key of "mlk") fireEvent.keyDown(input, { key })
+    expect(input.value).toBe("މލކ")
+    expect(new FormData(container.querySelector("form")!).get("name_dv")).toBe("މލކ")
+
+    const note = screen.getByLabelText("Note") as HTMLTextAreaElement
+    fireEvent.keyDown(note, { key: "s" })
+    expect(note.value).toBe("ސ")
+
+    const plain = screen.getByLabelText("Email Ascii") as HTMLInputElement
+    fireEvent.keyDown(plain, { key: "s" })
+    expect(plain.value).toBe("")
+  })
+
+  it("leaves shortcuts alone", () => {
+    render(<Text name="title" thaana />)
+    const input = screen.getByLabelText("Title") as HTMLInputElement
+    fireEvent.keyDown(input, { key: "c", ctrlKey: true })
+    fireEvent.keyDown(input, { key: "Enter" })
+    expect(input.value).toBe("")
+  })
+
+  it("keeps email, URL and phone fields left-to-right without Thaana", () => {
+    render(<Tel name="phone" {...{ thaana: true }} />)
+    const input = screen.getByLabelText("Phone")
+    expect(input).toHaveAttribute("dir", "ltr")
+    fireEvent.keyDown(input, { key: "s" })
+    expect((input as HTMLInputElement).value).toBe("")
+  })
+
+  it("is a plain keydown handler adapters can use", () => {
+    const input = document.createElement("input")
+    document.body.appendChild(input)
+    const event = { key: "k", currentTarget: input, defaultPrevented: false, preventDefault: vi.fn() }
+    thaanaKeyDown(event as never)
+    expect(input.value).toBe("ކ")
+    expect(event.preventDefault).toHaveBeenCalled()
+    input.remove()
+  })
+})
+
+describe("RTL", () => {
+  it("flips side arrows and uses Dhivehi lines in Dhivehi", () => {
+    act(() => setLocale("dv"))
+    const { container } = render(
+      <Pagination paginator={{ current_page: 2, last_page: 3, per_page: 10 }} getPageHref={(p) => `?page=${p}`} />,
+    )
+    expect(screen.getByRole("navigation")).toHaveAccessibleName(dv.pagination)
+    expect(container.querySelector('[data-icon="chevron-left"]')).toHaveAttribute("data-flipped", "true")
+  })
+
+  it("doesn't flip in left-to-right locales", () => {
+    const { container } = render(
+      <Pagination paginator={{ current_page: 2, last_page: 3, per_page: 10 }} getPageHref={(p) => `?page=${p}`} />,
+    )
+    expect(container.querySelector('[data-icon="chevron-left"]')).not.toHaveAttribute("data-flipped")
+  })
+})

From 2f8f494adf33748763f8a876ff0f0912eb060c88 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 13:50:30 +0500
Subject: [PATCH 14/18] Docs for people and agents; Laravel Boost guideline and
 skill

Docusaurus docs rewritten for the adapter-based API (intro, requirements,
installation, every component page, adapters, shadcn, Inertia, Wayfinder,
Dhivehi/RTL, API reference, upgrading, migrating, parity), llms.txt with
rules and an index (kept in sync by src/docs.test.ts), AGENTS.md, README,
and resources/boost (guideline + javaabu-react-forms skill).

Tab panels stay mounted in every adapter (and accordion items in HTML and
shadcn), so fields in other tabs submit; invalid fields reveal their tab.

Closes #13, closes #14

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/docs-and-hidden-panels.md          |   5 +
 AGENTS.md                                     |  42 +++--
 README.md                                     |  69 +++++---
 docs/about-us.md                              |  10 ++
 docs/advanced-usage/adapters.md               |   3 +-
 docs/advanced-usage/inertia.md                |   4 +-
 docs/advanced-usage/wayfinder.md              |   2 +-
 docs/ai-assistants.md                         |  34 ++++
 docs/api-reference.md                         |  76 ++++++++
 docs/basic-usage/_category_.json              |   9 +-
 docs/basic-usage/checkbox-and-radio.md        |  68 +++++---
 docs/basic-usage/conditional-wrapper.md       |  68 +++++---
 docs/basic-usage/dates.md                     |  57 +++++-
 docs/basic-usage/display.md                   | 151 ++++++++++++----
 docs/basic-usage/file-inputs.md               | 110 +++++++++---
 docs/basic-usage/forms-and-buttons.md         | 133 ++++++++++++--
 docs/basic-usage/inputs-and-textarea.md       | 114 ++++++++----
 docs/basic-usage/listing.md                   | 125 +++++++++----
 docs/basic-usage/map-input.md                 |  71 ++++++--
 docs/basic-usage/select-elements.md           |  92 +++++++---
 docs/basic-usage/select2.md                   |  92 ++++++----
 docs/basic-usage/wysiwyg.md                   |  50 +++++-
 docs/changelog.md                             |   6 +
 docs/contributing-to-docs.md                  |  12 ++
 docs/installation-and-setup.md                | 164 ++++++++++++++----
 docs/intro.md                                 |  36 ++++
 docs/metadata.json                            |   5 +
 docs/migrating-from-blade.md                  |  81 +++++----
 docs/parity.md                                |   2 +-
 docs/questions-and-security.md                |   8 +
 docs/requirements.md                          |  22 +++
 docs/upgrading.md                             |  71 ++++++++
 llms.txt                                      |  55 ++++++
 resources/boost/guidelines/core.blade.php     |  10 ++
 .../boost/skills/javaabu-react-forms/SKILL.md | 110 ++++++++++++
 .../references/adapters.md                    |  24 +++
 .../references/components.md                  |  31 ++++
 .../javaabu-react-forms/references/listing.md |  69 ++++++++
 src/adapters/html/index.tsx                   |  56 +++---
 src/adapters/onu/conformance.test.tsx         |   5 +-
 src/adapters/onu/index.tsx                    |  26 ++-
 src/adapters/shadcn/index.tsx                 |  42 ++++-
 src/core/errors.ts                            |  13 +-
 src/core/reveal.tsx                           |  40 +++++
 src/docs.test.ts                              |  55 ++++++
 src/index.ts                                  |   1 +
 src/testing/index.tsx                         |  44 +++++
 47 files changed, 1930 insertions(+), 443 deletions(-)
 create mode 100644 .changeset/docs-and-hidden-panels.md
 create mode 100644 docs/about-us.md
 create mode 100644 docs/ai-assistants.md
 create mode 100644 docs/api-reference.md
 create mode 100644 docs/changelog.md
 create mode 100644 docs/contributing-to-docs.md
 create mode 100644 docs/intro.md
 create mode 100644 docs/metadata.json
 create mode 100644 docs/questions-and-security.md
 create mode 100644 docs/requirements.md
 create mode 100644 docs/upgrading.md
 create mode 100644 llms.txt
 create mode 100644 resources/boost/guidelines/core.blade.php
 create mode 100644 resources/boost/skills/javaabu-react-forms/SKILL.md
 create mode 100644 resources/boost/skills/javaabu-react-forms/references/adapters.md
 create mode 100644 resources/boost/skills/javaabu-react-forms/references/components.md
 create mode 100644 resources/boost/skills/javaabu-react-forms/references/listing.md
 create mode 100644 src/core/reveal.tsx
 create mode 100644 src/docs.test.ts

diff --git a/.changeset/docs-and-hidden-panels.md b/.changeset/docs-and-hidden-panels.md
new file mode 100644
index 0000000..2802ed4
--- /dev/null
+++ b/.changeset/docs-and-hidden-panels.md
@@ -0,0 +1,5 @@
+---
+"@javaabu/forms": patch
+---
+
+Tab panels stay mounted in every adapter (and accordion items in the HTML and shadcn adapters), so fields in other tabs keep their values and submit, as in Blade. The tab or item with an invalid field opens when errors arrive. New for adapters: `TabPanel` and `useReveal`. `Textarea wysiwyg` passes `className` and `onChange` on. The docs are rewritten for the adapter-based API, with `llms.txt`, an API reference, an upgrade guide from `@javaabu/react-forms`, and a Laravel Boost guideline and skill (`javaabu-react-forms`).
diff --git a/AGENTS.md b/AGENTS.md
index 509bdae..a5ea4cd 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,32 +1,40 @@
-# React Forms: notes for AI coding agents
+# Forms for React: notes for AI coding agents
 
-`@javaabu/forms` is the React port of the [`javaabu/forms`](https://github.com/Javaabu/forms) Blade components and the form behaviour of [`@javaabu/js-utilities`](https://github.com/Javaabu/js-utilities), built on [`@javaabu/onu`](https://github.com/Javaabu/onu).
+`@javaabu/forms` is the React version of the [`javaabu/forms`](https://github.com/Javaabu/forms) Blade components (repo `Javaabu/react-forms`). The core is UI-framework-agnostic: components render through adapter slots (Onu, shadcn/ui, plain HTML). Strings come from [`@javaabu/i18n`](https://github.com/Javaabu/i18n).
 
 ## Layout
 
-| Path                     | What                                                                                                                                      |
-| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| `src/components`         | Components, grouped as in Blade (`inputs`, `select`, `checkbox`, `files`, `display`, `listing`, …)                                        |
-| `src/context`            | `FormsProvider` (config, strings, settings), model binding / old input, and the field registry (stand-in for js-utilities' DOM selectors) |
-| `src/support`            | Ports of the Laravel / javaabu helpers (`Str`, `data_get`, `AllowedMimeTypes`, …)                                                         |
-| `src/locales`            | `en` / `dv` strings (from `lang/*/strings.php`)                                                                                           |
-| `src/editor`, `src/maps` | Separate entries for the heavy Onu editor and maps                                                                                        |
-| `examples`               | `pnpm examples`: one page per integration (`?dv` for Dhivehi)                                                                             |
-| `docs`                   | One page per Blade docs page, plus `migrating-from-blade.md`                                                                              |
+| Path                                      | What                                                                                                                                                                                       |
+| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `src/core`                                | No UI imports. `FormsProvider`, the adapter contract (`adapter.ts`), binding and old input, errors, form state, the field registry, routers (fetch, Wayfinder resolution), strings, Thaana |
+| `src/components`                          | The Blade components. They resolve names, ids, values and errors (`useField`, `useFieldState`), then render `useUi()` slots                                                                |
+| `src/adapters/html`                       | The default adapter and the reference implementation of every slot                                                                                                                         |
+| `src/adapters/onu`, `src/adapters/shadcn` | The Onu adapter (+ `editor`, `maps`) and `createShadcnAdapter()`                                                                                                                           |
+| `src/inertia`                             | The Inertia router and `inertiaLinks` (`@javaabu/forms/inertia`)                                                                                                                           |
+| `src/testing`                             | The adapter conformance kit (`@javaabu/forms/testing`)                                                                                                                                     |
+| `src/support`                             | Ports of the Laravel / javaabu helpers (`Str`, `data_get`, `AllowedMimeTypes`, …)                                                                                                          |
+| `src/core/locales`                        | `en` / `dv` lines, keyed like Blade's `lang/*/strings.php`                                                                                                                                 |
+| `src/*.ts`                                | Entry points, mirrored by `package.json` `exports` and `vite.config.ts`                                                                                                                    |
+| `test/shadcn`                             | Stock shadcn/ui components from the registry, for the adapter's tests. Don't edit them                                                                                                     |
+| `examples`                                | `pnpm examples`: one page per adapter (`?dv` for Dhivehi)                                                                                                                                  |
+| `docs`                                    | Docusaurus docs; `llms.txt` indexes every page; `docs/parity.md` is the Blade parity matrix                                                                                                |
+| `resources/boost`                         | Laravel Boost guideline and the `javaabu-react-forms` skill                                                                                                                                |
 
 ## Rules
 
-- Keep the Blade API: same component names (PascalCase) and attributes (camelCase), same value precedence, labels and ids. Note intentional differences in `docs/migrating-from-blade.md`.
-- Build on Onu components; don't add other UI kits. Logical Tailwind utilities only (`ms-`, `pe-`, `text-start`); theme tokens only.
-- No hard-coded English: strings live in `src/locales/{en,dv}.ts` and are read with `useFormsTranslation()`.
-- Every change needs tests (`*.test.ts(x)` next to the code), docs and a changeset (`pnpm changeset`).
+- Keep the Blade API: same component names (PascalCase), attributes (camelCase), value precedence, labels and ids. Record every component, attribute and behaviour change in `docs/parity.md`, and intentional differences in `docs/migrating-from-blade.md`.
+- `src/core` and `src/components` never import a UI kit. New UI needs a slot in `src/core/adapter.ts`, an HTML implementation, adapter implementations where they exist, and a conformance case in `src/testing`.
+- Slots are controlled, submit natively, and put `id` / `aria-*` on the focusable element (see `docs/advanced-usage/adapters.md`).
+- No hard-coded English: add the line to `src/core/locales/en.ts` and `dv.ts` (real Dhivehi; list uncertain lines in `docs/advanced-usage/dhivehi-and-rtl.md`), read it with `useFormsTranslation().t()`. Keys match Blade's `forms::strings.*`.
+- Logical CSS only (`ms-`, `pe-`, `start-`, `text-start`); ESLint rejects physical utilities.
+- Every change needs tests (`*.test.ts(x)` next to the code, Thaana in user-facing cases), docs (and `llms.txt` / `docs/api-reference.md` for new pages or exports; `src/docs.test.ts` checks them) and a changeset (`pnpm changeset`).
+- Work on the `next-gen` branch. Don't commit to `main`, tag or publish.
 
 ## Commands
 
 ```bash
 pnpm install
-pnpm check   # lint, format, typecheck, test, build, examples: run before every push
+pnpm check      # lint, format, typecheck, test, build, examples: run before every push
 pnpm test
-pnpm build
 pnpm examples
 ```
diff --git a/README.md b/README.md
index e706c31..0a3b29c 100644
--- a/README.md
+++ b/README.md
@@ -5,9 +5,7 @@
 [![npm](https://img.shields.io/npm/v/@javaabu/forms.svg)](https://www.npmjs.com/package/@javaabu/forms)
 [![License](https://img.shields.io/github/license/Javaabu/react-forms.svg)](LICENSE.md)
 
-`@javaabu/forms` is the React port of [`javaabu/forms`](https://github.com/Javaabu/forms), the Laravel Blade components. It also covers the form behaviour of [`@javaabu/js-utilities`](https://github.com/Javaabu/js-utilities). It is built on [Onu](https://www.npmjs.com/package/@javaabu/onu), Javaabu's React UI library, so it inherits RTL and Dhivehi support, Thaana typing, theming and WCAG 2.2 AA accessibility.
-
-The API follows the Blade components. Blade attributes become camelCase props, and slots become props or children.
+`@javaabu/forms` is the React version of [javaabu/forms](https://github.com/Javaabu/forms), the Laravel Blade form components. It has the same components and attributes, model binding, old input and validation errors, so a form looks and behaves the same in a Blade view and an Inertia React page. It renders with [Onu](https://github.com/Javaabu/onu), shadcn/ui, plain HTML or your own UI kit.
 
 ```blade
 <x-forms::form :model="$article" method="PATCH" :action="route('articles.update', $article)">
@@ -19,39 +17,58 @@ The API follows the Blade components. Blade attributes become camelCase props, a
 ```
 
 ```tsx
-import * as Forms from "@javaabu/forms"
-
-;<Forms.Form model={article} method="PATCH" action={route("articles.update", article.id)}>
-  <Forms.Text name="title" required />
-  <Forms.Select2 name="category" options={categories} relation />
-  <Forms.Checkbox name="is_featured" />
-  <Forms.Submit>Save</Forms.Submit>
-</Forms.Form>
+import { Checkbox, Form, Select2, Submit, Text } from "@javaabu/forms"
+import { update } from "@/actions/App/Http/Controllers/ArticlesController"
+
+;<Form model={article} action={update}>
+  <Text name="title" required thaana />
+  <Select2 name="category" options={categories} relation />
+  <Checkbox name="is_featured" />
+  <Submit>Save</Submit>
+</Form>
 ```
 
-## Documentation
+## Features
 
-- [Installation and setup](docs/installation-and-setup.md)
-- [Migrating from Blade](docs/migrating-from-blade.md): every component, prop mapping and difference
-- Basic usage: [model binding](docs/basic-usage/model-binding.md), [inputs and textarea](docs/basic-usage/inputs-and-textarea.md), [checkboxes and radios](docs/basic-usage/checkbox-and-radio.md), [selects](docs/basic-usage/select-elements.md), [Select2, ajax and cascading selects](docs/basic-usage/select2.md), [dates](docs/basic-usage/dates.md), [files and images](docs/basic-usage/file-inputs.md), [conditional wrapper](docs/basic-usage/conditional-wrapper.md), [forms, buttons and errors](docs/basic-usage/forms-and-buttons.md), [display components](docs/basic-usage/display.md), [listing pages](docs/basic-usage/listing.md), [WYSIWYG](docs/basic-usage/wysiwyg.md), [map input](docs/basic-usage/map-input.md)
+- **The Blade API.** The same component names, camelCase attributes, generated ids and translated labels.
+- **Laravel built in.** Model binding, old input, method spoofing, CSRF, relations, `sync_` fields, and validation errors under the right field, including error bags and `items.0.name` keys.
+- **Any UI.** Adapters for Onu, shadcn/ui and plain HTML, a typed adapter contract with a conformance test kit, and per-component overrides.
+- **Inertia and Wayfinder.** Forms submit as Inertia visits, or through `useForm()`, without glue code, and take Wayfinder routes as `action`. They also submit natively or with fetch.
+- **Dhivehi and RTL.** English and Dhivehi strings with [@javaabu/i18n](https://github.com/Javaabu/i18n), RTL layouts and Thaana typing.
+
+## Installation
+
+```bash
+npm install @javaabu/forms
+```
 
-## What carries over from Blade
+```tsx
+import { FormsProvider } from "@javaabu/forms"
+import { inertia } from "@javaabu/forms/inertia"
+import { onu } from "@javaabu/forms/onu"
+
+;<FormsProvider ui={onu} router={inertia}>
+  {children}
+</FormsProvider>
+```
+
+See [Installation and setup](docs/installation-and-setup.md).
 
-- **Model binding**: `Form model`, `<Model>` (Blade's `@model`), `model={false}`, nested models and relations.
-- **Value precedence**: old input, then the bound value, then `default`.
-- **Generated labels and ids**: `company_name` → "Company Name" / `company_name`, `address[city]` → `address-city`. Labels go through your translator.
-- **Laravel requests**: `_method` spoofing, the `_token` field, `multipart/form-data`, `sync_<name>` fields for multi-selects, `name[]` arrays. Validation errors appear under their fields: `Form` reads a 422 response, Inertia's `errors`, or your `errors` prop.
-- **js-utilities behaviour, in React**: `conditionalDisplay`, select2 ajax search, cascading selects with fallback inputs, `fileUploadInput`, `selectAllCheckbox`, `sortable` headings, `animate-submit`, `urlInput`.
-- **Strings**: the `en` and `dv` strings of `javaabu/forms`, following Onu's locale.
+## Documentation
+
+The full documentation is in [`docs/`](docs/intro.md), with an index for AI assistants in [`llms.txt`](llms.txt). Start with:
+
+- [Installation and setup](docs/installation-and-setup.md)
+- [Forms and buttons](docs/basic-usage/forms-and-buttons.md), [model binding](docs/basic-usage/model-binding.md), [validation errors](docs/basic-usage/errors.md)
+- [UI adapters](docs/advanced-usage/adapters.md), [shadcn/ui](docs/advanced-usage/shadcn.md), [Inertia](docs/advanced-usage/inertia.md), [Wayfinder](docs/advanced-usage/wayfinder.md)
+- [Migrating from Blade](docs/migrating-from-blade.md), [upgrading from @javaabu/react-forms](docs/upgrading.md), [parity with javaabu/forms](docs/parity.md)
 
 ## Development
 
 ```bash
 pnpm install
-pnpm examples     # one page per integration (add ?dv for Dhivehi)
-pnpm test
-pnpm lint && pnpm typecheck && pnpm format:check
-pnpm build
+pnpm examples   # one page per adapter (add ?dv for Dhivehi)
+pnpm check      # lint, format, typecheck, tests, build, examples
 ```
 
 ## License
diff --git a/docs/about-us.md b/docs/about-us.md
new file mode 100644
index 0000000..4731c86
--- /dev/null
+++ b/docs/about-us.md
@@ -0,0 +1,10 @@
+---
+title: About Us
+sidebar_position: 1.9
+---
+
+[Javaabu](https://javaabu.com) is a webdesign agency based in Male', Maldives.
+
+As we dive into creating top-notch projects for our clients, we stumble upon nifty solutions that make life easier for developers like us. When we realize we've cracked the code to common problems, we tidy it up and share the love.
+
+Catch our open-source projects on [Github](https://github.com/Javaabu).
diff --git a/docs/advanced-usage/adapters.md b/docs/advanced-usage/adapters.md
index 7cb03c5..7277c3d 100644
--- a/docs/advanced-usage/adapters.md
+++ b/docs/advanced-usage/adapters.md
@@ -100,7 +100,8 @@ The source of the HTML adapter (`src/adapters/html/index.tsx`) is the reference:
 3. **ARIA on the focusable element.** Put `id`, `aria-invalid` and `aria-describedby` on the element that takes focus, so labels, errors and "focus the first invalid field" work.
 4. **The label is ready.** `Field`'s `label` already includes the required marker. Render it inside a `<label htmlFor={id}>`. With `hideLabel`, hide it visually but keep it for screen readers.
 5. **Logical CSS.** Use `ms-`/`pe-`/`start-`, not `left`/`right`, so the adapter works in Dhivehi (RTL).
-6. **Thaana.** When `Input` or `Textarea` gets `thaana`, let users type Thaana: use your kit's support, or `onKeyDown={thaanaKeyDown}` from `@javaabu/forms`.
+6. **Keep hidden content mounted.** Inactive tab panels and closed accordion items stay mounted, so their fields keep their values and submit, as in Blade. Open them on the `forms:reveal` event (sent before an invalid field is focused): `TabPanel` and `useReveal` from `@javaabu/forms` do both.
+7. **Thaana.** When `Input` or `Textarea` gets `thaana`, let users type Thaana: use your kit's support, or `onKeyDown={thaanaKeyDown}` from `@javaabu/forms`.
 
 ## Slots
 
diff --git a/docs/advanced-usage/inertia.md b/docs/advanced-usage/inertia.md
index 15d0367..1d9346f 100644
--- a/docs/advanced-usage/inertia.md
+++ b/docs/advanced-usage/inertia.md
@@ -29,7 +29,7 @@ Then forms are plain Blade-style forms:
 
 ```tsx
 import { Form, Text, Email, Submit } from "@javaabu/forms"
-import { update } from "@/actions/App/Http/Controllers/UserController"
+import { update } from "@/actions/App/Http/Controllers/UsersController"
 
 export default function Edit({ user }) {
   return (
@@ -61,7 +61,7 @@ Pass the result of `useForm()` to `form`. The fields read and write `form.data`;
 ```tsx
 import { useForm } from "@inertiajs/react"
 import { Form, Text, Checkbox, File, Submit } from "@javaabu/forms"
-import { store } from "@/actions/App/Http/Controllers/PostController"
+import { store } from "@/actions/App/Http/Controllers/PostsController"
 
 export default function Create() {
   const form = useForm({ title: "", channels: [], cover: null })
diff --git a/docs/advanced-usage/wayfinder.md b/docs/advanced-usage/wayfinder.md
index 13a4333..8464fb7 100644
--- a/docs/advanced-usage/wayfinder.md
+++ b/docs/advanced-usage/wayfinder.md
@@ -11,7 +11,7 @@ There's nothing to install or configure in this package: it reads the plain `{ u
 
 ```tsx
 import { Form, Text, Submit } from "@javaabu/forms"
-import { store, update } from "@/actions/App/Http/Controllers/UserController"
+import { store, update } from "@/actions/App/Http/Controllers/UsersController"
 
 <Form action={store()}>                {/* POST /users */}
   <Text name="name" />
diff --git a/docs/ai-assistants.md b/docs/ai-assistants.md
new file mode 100644
index 0000000..2aca915
--- /dev/null
+++ b/docs/ai-assistants.md
@@ -0,0 +1,34 @@
+---
+title: AI assistants
+sidebar_position: 1.65
+---
+
+The docs are plain Markdown, written for people and AI coding assistants alike. The package ships them, so they always match the version you have installed.
+
+| File | What |
+| --- | --- |
+| `node_modules/@javaabu/forms/llms.txt` | The rules for using the package, and an index of every page |
+| `node_modules/@javaabu/forms/docs/` | The pages |
+| `node_modules/@javaabu/forms/resources/boost/` | The Laravel Boost guideline and skill |
+
+# Laravel Boost
+
+[Laravel Boost](https://github.com/laravel/boost) finds the guideline and skill by itself when `@javaabu/forms` is a direct dependency in your `package.json`. Run this after installing or updating the package:
+
+```bash
+php artisan boost:update
+```
+
+Choose `@javaabu/forms` if Boost asks which third-party packages to use.
+
+# Other assistants
+
+Point your assistant at the docs from the project's instructions file (`AGENTS.md`, `CLAUDE.md`, `.cursor/rules`, `.github/copilot-instructions.md`):
+
+```md
+## Forms
+
+React forms use @javaabu/forms. Before writing a form, read node_modules/@javaabu/forms/llms.txt.
+```
+
+Or copy `node_modules/@javaabu/forms/resources/boost/skills/javaabu-react-forms` into your assistant's skills folder, such as `.claude/skills/`.
diff --git a/docs/api-reference.md b/docs/api-reference.md
new file mode 100644
index 0000000..6a0058e
--- /dev/null
+++ b/docs/api-reference.md
@@ -0,0 +1,76 @@
+---
+title: API reference
+sidebar_position: 1.45
+---
+
+# Entry points
+
+| Import | Exports | Needs |
+| --- | --- | --- |
+| `@javaabu/forms` | Every component, `FormsProvider`, hooks, helpers, the adapter types, `fetchRouter` | React, `@javaabu/i18n` |
+| `@javaabu/forms/html` | `html` (the default adapter), `pageWindow` | |
+| `@javaabu/forms/onu` | `onu`, `colorToVariant` | `@javaabu/onu` |
+| `@javaabu/forms/onu/editor` | `onuEditor` (`Wysiwyg` slot) | Onu's Tiptap peers |
+| `@javaabu/forms/onu/maps` | `onuMaps` (`Map` slot) | Onu's map peers |
+| `@javaabu/forms/shadcn` | `createShadcnAdapter`, `colorToShadcnVariant`, `ShadcnComponents` | Your shadcn components |
+| `@javaabu/forms/inertia` | `inertia` (router), `inertiaLinks` (`Link` slot) | `@inertiajs/react` |
+| `@javaabu/forms/testing` | `testAdapter`, `adapterConformance` | `@testing-library/react`, a DOM |
+| `@javaabu/forms/tailwind.css` | `@source` for the package's classes | Tailwind CSS v4 |
+
+Every module is marked `"use client"`. Builds: ESM (`.js`), CommonJS (`.cjs`) and types (`.d.ts`).
+
+# Components
+
+| Group | Components | Page |
+| --- | --- | --- |
+| Forms | `Form`, `FormGroup`, `Label`, `LabelRequired`, `InputHelp`, `Errors`, `ErrorSummary`, `Model`, `OldInput` | [Forms and buttons](./basic-usage/forms-and-buttons), [Errors](./basic-usage/errors), [Model binding](./basic-usage/model-binding) |
+| Inputs | `Input`, `Text`, `Email`, `Password`, `Number`, `Tel`, `Url`, `Hidden`, `Latitude`, `Longitude`, `Textarea` | [Inputs and textarea](./basic-usage/inputs-and-textarea) |
+| Choices | `Checkbox`, `Radio`, `Select`, `Select2` | [Checkboxes and radios](./basic-usage/checkbox-and-radio), [Selects](./basic-usage/select-elements), [Select2](./basic-usage/select2) |
+| Dates, files, rich text, maps | `Date`, `Datetime`, `Time`, `File`, `FileUpload`, `Image`, `ImageUpload`, `Wysiwyg`, `MapInput` | [Dates](./basic-usage/dates), [Files](./basic-usage/file-inputs), [WYSIWYG](./basic-usage/wysiwyg), [Map input](./basic-usage/map-input) |
+| Buttons | `Button`, `Submit`, `LinkButton`, `ButtonGroup` | [Forms and buttons](./basic-usage/forms-and-buttons) |
+| Display | `Alert`, `Card`, `CardHeader`, `CardTitle`, `CardSubtitle`, `CardFooter`, `Accordion`, `AccordionItem`, `Tabs`, `TabsPane`, `NavTabs`, `Modal`, `Status`, `ConditionalLink`, `ConditionalWrapper`, `TextEntry`, `BooleanEntry`, `Infolist`, `FormattedValue` | [Display](./basic-usage/display), [Conditional wrapper](./basic-usage/conditional-wrapper) |
+| Listing | `Table`, `TableRow`, `TableCell`, `TableHeading`, `TableEmptyRow`, `BulkActions`, `Filter`, `FilterSubmit`, `PerPage`, `SearchForm`, `NoItems`, `Pagination` | [Listing pages](./basic-usage/listing) |
+
+# Hooks
+
+| Hook | Returns |
+| --- | --- |
+| `useFormsConfig()` | The resolved `FormsProvider` configuration |
+| `useUi()` | The resolved adapter components (overrides → adapter → HTML) |
+| `useFormsServices()` | `confirm()` and `notify()` of the adapter |
+| `useFormsTranslation()` | `t(key, replace)`, `translate(text)`, `locale`, `direction` |
+| `useFormState()` | The surrounding form's `processing`, `status`, `progress`, `errors`, `message`, `setErrors()`, `clearErrors()`, or `null` |
+| `useFormStatus()` | `processing`, `status`, `progress`, `errors` (safe outside a form) |
+| `useFieldErrors(name, bag?)` | A field's error messages |
+| `useField(options)` | Ids, label, errors, ARIA props and `wrap()`: build your own field component |
+| `useFieldNames(props)` | The id, label and placeholder generated from a name |
+| `useBoundModel()`, `useOldInput()`, `useFieldValue(name, model, default)` | Binding |
+| `useWatchField(selector)` | Another field's value and checked state, by `#id` or name |
+| `useSetting(key)`, `useCsrfToken()` | `get_setting()`, the CSRF token |
+| `useRemoteOptions(remote, query)` | Server-searched select options, for adapters |
+| `useReveal(ref, onReveal)` | Calls `onReveal` when an invalid field inside `ref` needs to be shown, for adapters' tabs and accordions |
+
+# Helpers
+
+| Function | What it does |
+| --- | --- |
+| `defineAdapter(adapter)`, `mergeAdapters(...adapters)` | Type and combine adapters |
+| `resolveAction(action, model?)` | A URL, Wayfinder route or route function → `{ url, method }` |
+| `fetchRouter` | A router that submits with XHR and reads JSON 422s |
+| `formDataToObject(data)` | `FormData` → object (repeated names become arrays) |
+| `ValidationError`, `getValidationErrors(value)`, `readValidationErrors(value)` | Laravel 422 payloads |
+| `errorsFor(errors, name)`, `selectErrorBag(errors, bag?)`, `toDotNotation(name)`, `focusFirstInvalid(root, errors)` | Error lookup and focus |
+| `thaanaKeyDown(event)`, `toThaana(text)`, `THAANA_KEYMAP` | Thaana typing |
+| `nameToId`, `nameToLabel`, `bracketsToDots`, `dataGet` | Laravel `Str` / `data_get` ports |
+| `normalizeOptions(options, fields?)` | Any option shape → `SelectOption[]` |
+| `parseDateValue(value)` | What Laravel sends for dates → `Date` |
+| `ALLOWED_MIME_TYPES`, `registerMimeTypes`, `registerMimeTypeExtensions`, `getAllowedMimeTypes`, `getExtensions`, `getMaxFileSize`, `formatFileSize` | javaabu/helpers' `AllowedMimeTypes` |
+| `TabPanel` | A tab panel for adapters: always mounted, hidden while inactive, opened for invalid fields |
+| `colorToTone(color)` | A Bootstrap colour → a status tone |
+| `getBoundValue(target, name)` | The value at a field name (bracket or dot notation) on a model |
+| `DEFAULT_SETTINGS` | The `get_setting()` defaults: `per_page`, `max_upload_file_size`, `max_image_file_size` |
+| `en`, `dv`, `STRINGS_PREFIX` | The bundled lines and their key prefix (`forms::strings.`) |
+
+# Types
+
+The adapter contract (`FormsAdapter`, `FormsComponents` and one `…SlotProps` per slot), the router contract (`FormsRouter`, `SubmitRequest`, `SubmitCallbacks`, `VisitOptions`, `FormAction`, `RouteDefinition`, `RouteFormDefinition`), errors (`FormErrors`, `PageErrors`, `ValidationPayload`), and every component's `…Props` are exported from `@javaabu/forms`.
diff --git a/docs/basic-usage/_category_.json b/docs/basic-usage/_category_.json
index 01c483e..252ee66 100644
--- a/docs/basic-usage/_category_.json
+++ b/docs/basic-usage/_category_.json
@@ -1,4 +1,11 @@
 {
+  "position": 1.3,
   "label": "Basic Usage",
-  "position": 2
+  "collapsible": true,
+  "collapsed": false,
+  "link": {
+    "type": "generated-index",
+    "slug": "/forms/_categories/basic-usage",
+    "description": "Forms, fields, binding, errors, display and listing components"
+  }
 }
diff --git a/docs/basic-usage/checkbox-and-radio.md b/docs/basic-usage/checkbox-and-radio.md
index 450c02d..1ae3c47 100644
--- a/docs/basic-usage/checkbox-and-radio.md
+++ b/docs/basic-usage/checkbox-and-radio.md
@@ -3,41 +3,61 @@ title: Checkboxes and radios
 sidebar_position: 2.5
 ---
 
+```blade
+<x-forms::checkbox name="send_notifications" />
+<x-forms::checkbox name="channels[]" value="email" label="Email" />
+<x-forms::radio name="type" value="quiz" label="Quiz" />
+```
+
 ```tsx
-<Forms.Checkbox name="send_notifications" />
-<Forms.Checkbox name="newsletter" value="yes" default />
-<Forms.Checkbox name="accept_terms" required>
-  I agree to the <a href="/terms">terms and conditions</a>.
-</Forms.Checkbox>
-
-<Forms.Form model={{ channels: ["email"] }}>
-  <Forms.Checkbox name="channels[]" value="email" label="Email" />
-  <Forms.Checkbox name="channels[]" value="sms" label="SMS" />
-</Forms.Form>
-
-<Forms.Radio name="type" value="quiz" label="Quiz" />
-<Forms.Radio name="type" value="video" label="Video" />
+import { Checkbox, Form, Radio, Submit } from "@javaabu/forms"
+
+export function NotificationsForm({ user }) {
+  return (
+    <Form model={user} action="/settings/notifications" method="PATCH">
+      <Checkbox name="send_notifications" label="ނޯޓިފިކޭޝަން ފޮނުވާ" />
+      <Checkbox name="newsletter" value="yes" default />
+      <Checkbox name="accept_terms" required>
+        I agree to the <a href="/terms">terms and conditions</a>.
+      </Checkbox>
+
+      <Checkbox name="channels[]" value="email" label="Email" />
+      <Checkbox name="channels[]" value="sms" label="SMS" />
+
+      <Radio name="type" value="quiz" label="Quiz" />
+      <Radio name="type" value="video" label="Video" />
+
+      <Submit />
+    </Form>
+  )
+}
 ```
 
-## Checked state
+# Checked state
 
-1. **Old input**: when there is old input, the box is checked only if it contains `value`.
-2. **Bound value**: an array is checked when it contains `value`. A scalar is checked by its truthiness (`"0"` and `0` are false). For radios, the scalar must equal `value`.
-3. **`default`**: when the bound value is `null`.
+1. **Old input.** Once there is any old input, a box is checked only when the old input contains its `value`. A box that was unchecked on the failed submit stays unchecked.
+2. **Bound value.** An array (`channels: ["email"]`) checks the boxes whose `value` it contains. A scalar checks the box by its truthiness (`"0"` and `0` are false). A radio is selected when the bound value equals its `value`.
+3. **`default`**, when the bound value is `null`.
 
-An unchecked checkbox submits nothing, as in HTML. Grouped checkboxes (`channels[]`) get unique ids such as `channels-email`.
+An unchecked checkbox submits nothing, as in HTML. Grouped checkboxes (`channels[]`) get unique ids such as `channels-email`, and their errors include the items' errors (`channels.0`). Radios with the same `name` in a form form a group: picking one unselects the others.
 
-## Options
+# Props
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `value` | `string \| number \| boolean` | `1` | Submitted when checked. |
 | `default` | `boolean` | `false` | Checked when the bound value is `null`. |
-| `checked` | `boolean` | | Controlled state (checkbox). |
-| `children` | `ReactNode` | | Label beside the box. With `inline`, the `label` goes in the label column. |
+| `checked` | `boolean` | | Controlled state. Pair it with `onCheckedChange`. |
+| `onCheckedChange` | `(checked: boolean) => void` | | |
+| `children` | `ReactNode` | | Label beside the box (Blade's default slot). Without it, `label` is used. With `inline`, `label` goes in the label column and `children` beside the box. |
+| `className` | `string` | | |
+
+They also take the common field props (`name`, `label`, `id`, `model`, `required`, `disabled`, `inline`, `help`, `showErrors`, …; see [Inputs](./inputs-and-textarea#props)).
+
+# How it renders
 
-They also take the common field props (`name`, `label`, `model`, `required`, `inline`, `help`, `showErrors`, …).
+The HTML adapter renders native checkboxes and radios inside their `<label>`. The Onu adapter uses Onu's `Checkbox` and a native radio. The shadcn adapter uses your `Checkbox`, and a `RadioGroup` with one `RadioGroupItem` per radio. With shadcn, arrow keys don't move between radios of a group; Tab does.
 
-## Accessibility
+# Accessibility
 
-The checkbox is Onu's `Checkbox`, and its label is clickable. Radios are native inputs, so arrow keys move within a group.
+Each box and radio is labelled by the text beside it, so clicking the text toggles it. With native radios, arrow keys move within a group.
diff --git a/docs/basic-usage/conditional-wrapper.md b/docs/basic-usage/conditional-wrapper.md
index d8617d0..c608f94 100644
--- a/docs/basic-usage/conditional-wrapper.md
+++ b/docs/basic-usage/conditional-wrapper.md
@@ -3,32 +3,60 @@ title: Conditional Wrapper
 sidebar_position: 6
 ---
 
-`ConditionalWrapper` brings js-utilities' `data-enable-section-value` and `data-enable-section-checkbox` to React. It enables, and optionally shows, its fields depending on another field.
+`ConditionalWrapper` enables, and optionally shows, a group of fields depending on another field. It is js-utilities' `data-enable-section-value` and `data-enable-section-checkbox` for React.
+
+```blade
+<x-forms::conditional-wrapper enable-elem="#type" enable-value="quiz" hide-fields>
+    <x-forms::datetime name="expires_at" />
+</x-forms::conditional-wrapper>
+```
 
 ```tsx
-<Forms.Select2 name="type" options={{ quiz: "Quiz", video: "Video" }} />
+import { Checkbox, ConditionalWrapper, Datetime, Form, Select2, Text } from "@javaabu/forms"
+
+export function QuestionForm() {
+  return (
+    <Form action="/questions">
+      <Select2 name="type" options={{ quiz: "Quiz", video: "Video" }} />
+
+      <ConditionalWrapper enableElem="#type" enableValue="quiz" hideFields>
+        <Datetime name="expires_at" />
+      </ConditionalWrapper>
+
+      <Checkbox name="online_interview" />
+      <ConditionalWrapper enableElem="#online_interview" enableCheckbox disable hideFields>
+        <Text name="venue" label="ތަން" />
+      </ConditionalWrapper>
+    </Form>
+  )
+}
+```
 
-<Forms.ConditionalWrapper enableElem="#type" enableValue="quiz" hideFields>
-  <Forms.Datetime name="expires_at" />
-</Forms.ConditionalWrapper>
+# How it matches
 
-<Forms.ConditionalWrapper enableElem="#online_interview" enableCheckbox hideFields disable>
-  This section is hidden when the checkbox is checked.
-</Forms.ConditionalWrapper>
-```
+- With `enableValue`, the section is enabled when the field's value is one of the values (compared as strings). A multi-select matches when any of its values does.
+- Without `enableValue`, any non-empty value enables it (`""`, `"0"`, `0`, `false` and `[]` are empty).
+- With `enableCheckbox`, the checkbox's checked state is followed.
+- `disable` inverts the match: the section is disabled when it matches.
+
+# Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `enableElem` | `string` | **Required** | The field to follow: `#id`, `[name=x]` or a name. |
+| `enableValue` | `unknown` | | Value, or list of values, that enable the section. |
+| `hideFields` | `boolean` | `false` | Also hide the section while it is disabled. |
+| `disable` | `boolean` | `false` | Disable the section when the value matches. |
+| `enableCheckbox` | `boolean` | `false` | Follow the checkbox's checked state. |
+
+Other `<fieldset>` attributes are passed through.
 
-| Prop | Default | Description |
-| --- | --- | --- |
-| `enableElem` | **Required** | The field to follow: `#id`, `[name=x]` or a name. |
-| `enableValue` | | Value(s) that enable the section (compared as strings). |
-| `hideFields` | `false` | Also hide the section while disabled. |
-| `disable` | `false` | Invert: disable when the value matches. |
-| `enableCheckbox` | `false` | Follow the checkbox's checked state. |
+`enableElem` finds this package's fields by id or name, anywhere on the page. It also finds plain `<input>`, `<select>` and `<textarea>` elements you wrote yourself, as jQuery did.
 
-`enableElem` finds this package's fields by id or name. It also finds plain inputs, selects and textareas in the page, by `#id` or name, as jQuery did.
+# What it renders
 
-A disabled section is a disabled `<fieldset>`, so its fields are not submitted.
+A `<fieldset>` without a border, whatever the adapter. While disabled, the fieldset is `disabled`, so the browser doesn't submit its fields; with `hideFields` it is also `hidden`. `data-state` is `enabled`, `disabled` or `hidden`, for styling.
 
-## Accessibility
+# Accessibility
 
-Hidden sections are removed from the accessibility tree, and disabled fields are announced as disabled.
+Disabled fields are announced as disabled, and hidden sections are removed from the accessibility tree.
diff --git a/docs/basic-usage/dates.md b/docs/basic-usage/dates.md
index 9909b38..205d58a 100644
--- a/docs/basic-usage/dates.md
+++ b/docs/basic-usage/dates.md
@@ -3,18 +3,59 @@ title: Date, datetime and time
 sidebar_position: 4.5
 ---
 
+```blade
+<x-forms::date name="expires_at" />
+<x-forms::datetime name="published_at" required />
+<x-forms::time name="opens_at" />
+```
+
 ```tsx
-<Forms.Date name="expires_at" />
-<Forms.Datetime name="published_at" required />
-<Forms.Time name="opens_at" placeholder="Opening time" />
+import { Date, Datetime, Form, Submit, Time } from "@javaabu/forms"
+
+export function EventForm({ event }) {
+  return (
+    <Form model={event} action={`/events/${event.id}`} method="PATCH">
+      <Date name="expires_at" min="2026-01-01" />
+      <Datetime name="published_at" required />
+      <Time name="opens_at" placeholder="ހުޅުވާ ގަޑި" />
+      <Submit />
+    </Form>
+  )
+}
 ```
 
-These use Onu's `DatePicker`, `DateTimePicker` and `TimePicker`. Bound values can be `2024-05-01`, `2024-05-01 10:30:00`, ISO strings (`…Z`), times (`10:30`) or `Date` objects. Strings without a time zone are read as local time.
+`Date` shadows the global `Date` in a module that imports it. Import it under another name if you need both: `import { Date as DateField } from "@javaabu/forms"`.
+
+# Values
+
+Bound values can be what Laravel sends: `2026-11-04`, `2026-11-04 09:30:00`, ISO strings (`2026-11-04T09:30:00.000000Z`), times (`09:30`), timestamps or `Date` objects. Strings without a time zone are read as local time.
+
+The fields submit:
+
+| Component | Submits |
+| --- | --- |
+| `Date` | `yyyy-MM-dd` |
+| `Datetime` | `yyyy-MM-dd HH:mm:ss` |
+| `Time` | `HH:mm` |
+
+Laravel's `date` rule and date casts accept all three.
+
+# Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `Date \| string \| null` | Controlled value. |
+| `onChange` | `(value: string, date: Date \| null) => void` | The new value, as submitted, and as a `Date`. |
+| `min`, `max` | `Date \| string` | Earliest and latest value. |
+| `placeholder`, `showPlaceholder` | `string`, `boolean` | |
+| `className` | `string` | |
+
+Plus the common field props ([Inputs](./inputs-and-textarea#props)).
 
-They submit `yyyy-MM-dd`, `yyyy-MM-ddTHH:mm:ss` and `HH:mm`, which Laravel's date validation and casts accept.
+# How it renders
 
-They take the common field props, plus Onu's picker props: `format` (date-fns display format), `min`, `max`, `clearable`, `hourCycle`, `minuteStep`, ….
+The adapter picks the control. The HTML adapter renders native `<input type="date">`, `datetime-local` and `time` inputs. The shadcn adapter renders the same native inputs with your `Input`. The Onu adapter uses Onu's `DatePicker`, `DateTimePicker` and `TimePicker`. Each one also renders a hidden input that submits the format above, whatever the picker shows.
 
-## Accessibility
+# Accessibility
 
-The picker is a button that opens a dialog with a keyboard-navigable calendar. Phones get a bottom sheet.
+Native inputs follow the browser's date picker. Onu's pickers open a dialog with a keyboard-navigable calendar, and a bottom sheet on phones.
diff --git a/docs/basic-usage/display.md b/docs/basic-usage/display.md
index 0ec62e4..d048d33 100644
--- a/docs/basic-usage/display.md
+++ b/docs/basic-usage/display.md
@@ -1,36 +1,90 @@
 ---
 title: Display components
-sidebar_position: 10
+sidebar_position: 9.5
 ---
 
-## Alert
+These show content rather than collect it. Each renders through the adapter's slot of the same name ([UI adapters](../advanced-usage/adapters)).
+
+# Alert
+
+```blade
+<x-forms::alert type="success" heading="Application submitted" dismissible>
+    We have received your application.
+</x-forms::alert>
+```
 
 ```tsx
-<Forms.Alert type="success" heading="Application submitted" dismissible>
+import { Alert } from "@javaabu/forms"
+
+<Alert type="success" heading="ހުށަހެޅިއްޖެ" dismissible>
   We have received your application.
-</Forms.Alert>
+</Alert>
 ```
 
-`type`: `primary`/`info`, `success`, `warning`, `danger`. `icon` takes a semantic icon name or CSS classes.
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `type` | `string` | `primary` | Bootstrap alert type: `primary`, `info`, `success`, `warning`, `danger`. |
+| `heading` | `ReactNode` | | Heading above the message. |
+| `icon` | `ReactNode` | | An icon. A string with spaces is used as CSS classes (`"fa-solid fa-circle-info"`), as in Blade. |
+| `dismissible` | `boolean` | `false` | A close button (HTML and Onu adapters). |
+| `className`, `children` | | | |
 
-## Card and Infolist
+# Card
 
 ```tsx
-<Forms.Card title="Details" subtitle="Last updated today" footer={<Forms.Submit>Save</Forms.Submit>}>…</Forms.Card>
+import { Card, CardFooter, CardHeader, CardSubtitle, CardTitle, Submit } from "@javaabu/forms"
+
+<Card title="Details" subtitle="Last updated today" footer={<Submit>ސޭވްކުރޭ</Submit>}>
+  …
+</Card>
+
+{/* Or build it from the parts, like Blade's card.header, card.title, … */}
+<Card>
+  <CardHeader>
+    <CardTitle>Details</CardTitle>
+    <CardSubtitle>Last updated today</CardSubtitle>
+  </CardHeader>
+  …
+  <CardFooter>…</CardFooter>
+</Card>
+```
+
+`Card` takes `title`, `subtitle`, `header` (used when there is no `title`), `footer`, `imageTop` (content before the header) and `className`.
 
-<Forms.Infolist title="User" model={user}>
-  <Forms.TextEntry name="name" />
-  <Forms.TextEntry name="bio" multiline />
-  <Forms.BooleanEntry name="active" />
-</Forms.Infolist>
+# Text entries and infolists
+
+```tsx
+import { BooleanEntry, Infolist, TextEntry } from "@javaabu/forms"
+
+<Infolist title="User" model={user}>
+  <TextEntry name="name" label="ނަން" />
+  <TextEntry name="bio" multiline />
+  <TextEntry name="role" />      {/* an enum { value, label, color } shows a status badge */}
+  <BooleanEntry name="active" /> {/* Yes / No, or "-" when null */}
+</Infolist>
 ```
 
-`TextEntry` formats values like `FormatsValues`: booleans become Yes / No and empty values "-". An enum `{ value, label, color? }` shows its label, or a status badge when it has a colour. Arrays become lists. `wysiwyg` renders trusted HTML. Children replace the value.
+Values are formatted like Blade's `FormatsValues`: booleans become Yes / No and empty values "-". An enum serialized as `{ value, label }` shows its label, or a status badge when it has a `color`. Arrays become lists. `wysiwyg` renders the value as HTML; only use it for trusted, sanitized HTML. Children replace the value.
 
-## Accordion
+| Prop | Description |
+| --- | --- |
+| `name` | Attribute to read from the bound model. Also generates the label. |
+| `label`, `showLabel` | The label, and `false` to hide it. |
+| `value` | The value to show instead of the bound one. |
+| `model` | Binding target, as for fields. |
+| `inline` | Label beside the value. |
+| `multiline` | Keep line breaks. |
+| `wysiwyg` | Render trusted HTML. |
+| `inlineEntryLabelClass`, `inlineEntryClass` | Classes for the label and value. |
+
+`Infolist` is a `Card` that binds `model` for its entries; `layout` (`auto`, `stacked`, `inline`) sets every entry's layout. `FormattedValue` formats a value on its own: `<FormattedValue value={user.role} />`.
+
+# Accordion
 
 ```tsx
-<Forms.Accordion
+import { Accordion, AccordionItem } from "@javaabu/forms"
+
+<Accordion
   id="application-faq"
   items={{
     applicationRequirements: { title: "What do I need to apply?", content: "Have your documents ready.", show: true },
@@ -38,33 +92,68 @@ sidebar_position: 10
   }}
   slots={{ applicationStatus: <p>Sign in and open <a href="/applications">Applications</a>.</p> }}
 >
-  <Forms.AccordionItem name="extra" title="Anything else?">Contact us.</Forms.AccordionItem>
-</Forms.Accordion>
+  <AccordionItem name="extra" title="Anything else?">
+    Contact us.
+  </AccordionItem>
+</Accordion>
 ```
 
-Panel ids follow Blade: the key for named items, `<id>-item-<n>-collapse` for list items.
+`items` is an object keyed by panel name, or a list. `slots` are Blade's named slots: `applicationStatus` (or `application-status`) for a panel's body, `applicationStatusHeader` for its header, and `item-0` for list items. Panel ids follow Blade: the key for named items, `<id>-item-<n>-collapse` for list items. `show` opens a panel; with several open, more than one can be open at a time. `AccordionItem` takes `name`, `title`, `header`, `content` or children, `show`, `disabled` and `id`.
+
+Fields inside a closed item keep their values and are submitted, and an item opens when a field inside has an error. That holds with the HTML and shadcn adapters. With the Onu adapter, closed items are unmounted until [Javaabu/onu#60](https://github.com/Javaabu/onu/issues/60) lands, so put fields in `Tabs` or a fieldset instead.
 
-## Tabs and NavTabs
+# Tabs and NavTabs
 
 ```tsx
-<Forms.Tabs tabs={[{ name: "home" }, { name: "profile", title: "Profile" }, { name: "contact", disabled: true }]} active="profile">
-  <Forms.TabsPane name="home">…</Forms.TabsPane>
-  <Forms.TabsPane name="profile">…</Forms.TabsPane>
-</Forms.Tabs>
+import { NavTabs, Tabs, TabsPane } from "@javaabu/forms"
 
-<Forms.NavTabs tabs={[{ title: "Details", url: "/users/1/edit", active: true, icon: "user" }]} />
+<Tabs tabs={[{ name: "home" }, { name: "profile", title: "ޕްރޮފައިލް" }, { name: "contact", disabled: true }]} active="profile">
+  <TabsPane name="home">…</TabsPane>
+  <TabsPane name="profile">…</TabsPane>
+</Tabs>
+
+<NavTabs tabs={[{ title: "Details", url: "/users/1/edit", active: true }, { title: "Roles", url: "/users/1/roles" }]} />
 ```
 
-## Modal, Status, ConditionalLink
+Every pane stays mounted, so a form split across tabs submits all its fields, as in Blade, and the tab with the first invalid field opens when errors arrive.
+
+`Tabs` takes `tabs` (`name`, `title`, `disabled`, `url`, `content`), `active` (default: the first), `slots` (pane content by slot name) and `onValueChange`. A tab with `url` navigates to it. When a field with errors is in a hidden tab, the tab opens so the field can take focus (HTML adapter). `NavTabs` are tabs that are links to pages (`title`, `url`, `active`, `disabled`, `icon`).
+
+# Modal
 
 ```tsx
-<Forms.Modal title="Edit user" modalSizeClass="modal-xl" trigger={<Forms.Button>Edit</Forms.Button>}>…</Forms.Modal>
-<Forms.Status color="success" label="Published" />
-<Forms.ConditionalLink url={`/organizations/${org.id}/users`} can="view" arg="users" name="users_count" model={org} />
+import { Button, Modal } from "@javaabu/forms"
+
+<Modal title="Edit user" modalSizeClass="modal-xl" trigger={<Button>Edit</Button>}>
+  …
+</Modal>
+```
+
+Open it with `trigger`, or control it with `open` and `onOpenChange` (`defaultOpen` for an uncontrolled start). `modalSizeClass` takes Bootstrap's size classes (`modal-sm`, `modal-lg`, `modal-xl`, `modal-fullscreen`; default `modal-lg`), or pass `size` (`sm`, `md`, `lg`, `xl`, `full`). It also takes `description`, `footer` and `id`.
+
+# Status
+
+```tsx
+<Status color="success" label="Published" />
+<Status color="danger">ބާތިލް</Status>
+```
+
+`color` is a Bootstrap colour (default `primary`), mapped to a tone: `success`, `danger`, `warning`, `info` (`info` and `primary`), or neutral.
+
+# Conditional link
+
+```tsx
+import { ConditionalLink } from "@javaabu/forms"
+
+<ConditionalLink url={`/organizations/${org.id}/users`} can="view" arg="users" name="users_count" model={org} />
 ```
 
-`ConditionalLink` links when `showLink` is true. Otherwise it links when `FormsProvider authorize(can, arg, guard)` allows it, and shows plain text when it doesn't.
+It links when `showLink` is true. Without `showLink`, it links when `FormsProvider authorize(can, arg, guard)` allows it, and shows plain text otherwise. The text is `children`, `value`, or the bound value of `name`.
+
+# How it renders
+
+The HTML adapter renders plain elements: `<details>` for accordions, a tab list with ARIA roles, a `<dialog>` for modals, and a `<dl>` for entries. The Onu adapter uses Onu's `Callout`, `Card`, `Accordion`, `Tabs`, `NavTabs`, `Modal`, `StatusBadge` and `DescriptionList`. The shadcn adapter uses your `Alert`, `Card`, `Accordion`, `Tabs`, `Dialog` and `Badge`, and plain HTML for the rest.
 
-## Accessibility
+# Accessibility
 
-These are Onu components: the accordion and tabs follow the WAI-ARIA patterns, and the modal traps focus and returns it when it closes.
+Tabs use the `tablist` / `tab` / `tabpanel` roles. Modals are labelled by their title, and Onu's and shadcn's dialogs trap focus and return it when they close.
diff --git a/docs/basic-usage/file-inputs.md b/docs/basic-usage/file-inputs.md
index fcf57f4..2eaa3b4 100644
--- a/docs/basic-usage/file-inputs.md
+++ b/docs/basic-usage/file-inputs.md
@@ -3,48 +3,102 @@ title: File Inputs and Image Inputs
 sidebar_position: 7
 ---
 
+```blade
+<x-forms::form :model="$article" files>
+    <x-forms::file name="attachment" type="document" />
+    <x-forms::image name="featured_image" conversion="preview" width="500" height="500" />
+</x-forms::form>
+```
+
 ```tsx
-<Forms.Form model={article} files>
-  <Forms.File name="attachment" type="document" />
-  <Forms.Image name="featured_image" conversion="preview" width={500} height={500} />
-</Forms.Form>
+import { File, Form, Image, Submit } from "@javaabu/forms"
+
+export function ArticleFiles({ article }) {
+  return (
+    <Form model={article} action={`/articles/${article.id}`} method="PATCH" files>
+      <File name="attachment" type="document" label="ލިޔުން" />
+      <Image name="featured_image" conversion="preview" width={500} height={500} />
+      <Submit />
+    </Form>
+  )
+}
 ```
 
-The current file comes from the bound attribute (a URL or a medialibrary `Media` object). Otherwise it comes from the model's `media` array, matched by `collection_name` (default: the `name`). `conversion` uses `media.conversions[name]`, or `preview_url` for `preview`.
+Give the form `files` so it is sent as `multipart/form-data`.
+
+# The current file
+
+The current file comes from the bound attribute: a URL, or a spatie/laravel-medialibrary `Media` object as JSON. Otherwise it comes from the model's `media` array, matched by `collection_name` (default: the field's `name`). `conversion` links to `media.conversions[conversion]`, or `preview_url` for `preview`. `ignoreAccessor` skips the attribute and reads only from `media`.
 
-The hint ("Only .pdf, .jpeg and .png files of max 10MB allowed.") comes from a port of javaabu/helpers `AllowedMimeTypes` and the `max_*_file_size` settings. Register your own types with `registerMimeTypes("paper", […])`.
+`File` shows the current file as a download link. `Image` shows it as the preview.
+
+# Allowed types and the hint
+
+The hint ("Only .pdf, .jpeg and .png files of max 10 MB allowed.") comes from a port of javaabu/helpers' `AllowedMimeTypes` and the `max_upload_file_size` / `max_image_file_size` settings (in KB, set with `FormsProvider settings`). Register your own types:
+
+```ts
+import { registerMimeTypes } from "@javaabu/forms"
+
+registerMimeTypes("paper", ["application/pdf", "application/msword"])
+```
 
-## File options
+# File props
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `type` | `string \| string[]` | `document` (`image` for images) | `AllowedMimeTypes` type(s). |
-| `mimetypes` | `string \| string[]` | from `type` | `accept`. |
+| `type` | `string \| string[]` | `document` (`image` for `Image`) | `AllowedMimeTypes` type(s). |
+| `mimetypes` | `string \| string[]` | from `type` | The `accept` list. |
 | `extensions` | `string \| string[]` | from the mime types | Shown in the hint. |
-| `maxSize` | `number` (KB) | from settings | Also enforced when picking. |
+| `maxSize` | `number` (KB) | from settings | Shown in the hint and passed to the adapter. |
+| `multiple` | `boolean` | `false` | Allow several files (`File`). |
 | `collection` | `string` | `name` | Media collection. |
 | `conversion` | `string` | | Media conversion to link to. |
-| `showHint` | `boolean` | `true` | A `help` prop replaces the hint. |
-| `ignoreAccessor` | `boolean` | `false` | Only read from `media`. |
-| `upload` | `boolean` | `false` | Upload as soon as a file is picked. |
-| `onUploaded` | `(response) => void` | reload | After an upload or removal. |
+| `showHint` | `boolean` | `true` | Show the hint. A `help` prop replaces it. |
+| `ignoreAccessor` | `boolean` | `false` | Read only from `media`. |
+| `fileInputClass` | `string` | | Classes for the file input (`File`). |
+| `upload` | `boolean` | `false` | Upload as soon as a file is picked (see below). |
+| `onUploaded` | `(response) => void` | reload the page | After an upload or removal. |
+| `onChange` | `(files: File[]) => void` | | The picked files (`File`). |
+| `className` | `string` | | |
 
-## Image options
+# Image props
+
+`Image` takes the file props above (except `multiple` and `fileInputClass`), plus:
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `width`, `height` | `number` | `400` | Recommended size, shown in the hint. |
+| `circle` | `boolean` | `false` | Round preview (ratio 1). |
+| `cover` | `boolean` | `false` | The image covers the preview. |
+| `fullwidth` | `boolean` | `false` | The preview takes the full width. |
+| `aspectRatio` | `number` | `height / width` | Blade's ratio: height ÷ width. |
+| `maintainAspectRatio` | `boolean` | `true` | `false` shows a square preview. |
+| `icon` | `ReactNode` | "Click to select an image" | Content of the empty preview. |
+| `onChange` | `(file: File \| null) => void` | | |
+
+# Uploading straight away
+
+`FileUpload` and `ImageUpload` (or `upload`) work like js-utilities' `fileUploadInput`. They post the file to the surrounding form's `action`, with its `_method` and `_token`. Then they reload the page, or call `onUploaded`. The file input itself has no name, so it isn't sent again with the form.
+
+```tsx
+import { router } from "@inertiajs/react"
+import { Form, ImageUpload } from "@javaabu/forms"
+
+export function Avatar({ user }) {
+  return (
+    <Form model={user} action={`/users/${user.id}/avatar`} method="PATCH" files>
+      <ImageUpload name="avatar" circle onUploaded={() => router.reload({ only: ["user"] })} />
+    </Form>
+  )
+}
+```
 
-| Prop | Default | Description |
-| --- | --- | --- |
-| `width` / `height` | `400` | Recommended size, shown in the hint. |
-| `circle` | `false` | Round preview (ratio 1). |
-| `cover` | `false` | Image covers the preview. |
-| `fullwidth` | `false` | Preview takes the full width. |
-| `aspectRatio` | `height / width` | Blade's ratio (height ÷ width). |
-| `maintainAspectRatio` | `true` | `false` shows a square preview. |
-| `icon` | | Content of the empty preview. |
+Removing an uploaded file asks for confirmation, then posts an empty value. A 422 response shows its errors on the form; other failures show a notification. The adapter provides the confirmation dialog and the notification (the HTML adapter uses `window.confirm` and `alert`).
 
-## Uploading straight away
+# How it renders
 
-`FileUpload` and `ImageUpload` (or `upload`) work like js-utilities' `fileUploadInput`. They post the file to the surrounding form's `action`, with its `_method` and `_token`, then reload the page (or call `onUploaded`). Removing a file asks for confirmation, then posts an empty value. A 422 shows its errors on the form.
+The HTML adapter renders a native `<input type="file">`; for images, a preview with a remove button. The Onu adapter uses Onu's `FileInput` (drag and drop, paste) and `ImageInput`. The shadcn adapter renders a file `Input`, and the HTML image input.
 
-## Accessibility
+# Accessibility
 
-The file input is a native `<input type="file">` styled by Onu, so it works with the keyboard and with drag and drop. The image preview uses the label as its alt text.
+The file input is a native `<input type="file">` in every adapter, so it works with the keyboard. The image preview uses the label as its alt text.
diff --git a/docs/basic-usage/forms-and-buttons.md b/docs/basic-usage/forms-and-buttons.md
index a611da3..d04c495 100644
--- a/docs/basic-usage/forms-and-buttons.md
+++ b/docs/basic-usage/forms-and-buttons.md
@@ -1,33 +1,130 @@
 ---
-title: Forms, buttons and errors
+title: Forms, buttons and labels
 sidebar_position: 1.1
 ---
 
+```blade
+<x-forms::form method="PATCH" :action="route('articles.update', $article)" :model="$article" files>
+    <x-forms::text name="title" />
+    <x-forms::submit>Save</x-forms::submit>
+</x-forms::form>
+```
+
 ```tsx
-<Forms.Form method="PATCH" action={`/articles/${article.id}`} model={article} files>
-  …
-  <Forms.Submit>Save</Forms.Submit>
-</Forms.Form>
+import { Form, Submit, Text } from "@javaabu/forms"
+import { update } from "@/actions/App/Http/Controllers/ArticlesController"
+
+export function EditArticle({ article }) {
+  return (
+    <Form model={article} action={update} files>
+      <Text name="title" />
+      <Submit>ސޭވްކުރޭ</Submit>
+    </Form>
+  )
+}
 ```
 
-`Form` is Onu's `Form`, with Laravel's conventions added:
+# Form
 
-- `PUT`, `PATCH` and `DELETE` are sent as `POST` with a `_method` field.
-- Non-GET forms get a `_token` field.
+`Form` follows Laravel's conventions:
+
+- `PUT`, `PATCH` and `DELETE` are sent as `POST` with a hidden `_method` field.
+- Non-GET forms get a `_token` field, from `FormsProvider csrfToken` or the `<meta name="csrf-token">` tag. `csrf={false}` leaves it out.
 - `files` sets `enctype="multipart/form-data"`.
-- `model` binds the fields inside, and `old` gives them old input.
+- `model` binds the fields inside, and `old` gives them old input ([Model binding](./model-binding)).
+- `action` takes a URL or a Laravel Wayfinder route: `store()`, `update.form(user)`, or the function itself, called with `model` ([Wayfinder](../advanced-usage/wayfinder)). The route's method is used unless you pass `method`.
 
-Without `onSubmit`, the form submits natively, like a Blade form. With `onSubmit`, return the request promise (axios, fetch or Inertia). A rejected 422 shows its errors under the fields, with an error summary at the top. With Inertia, pass `errors={form.errors}` and `processing={form.processing}`. All of Onu `Form`'s props (`labelLayout`, `summary`, `onSuccess`, …) work.
+## Submitting
 
-## Buttons
+In this order:
 
-| Component | Props |
+| You pass | The form |
 | --- | --- |
-| `Button` | `color` (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `link`, `outline-*`), `type`, `animate`, Onu `Button` props |
-| `Submit` | `color`. Shows a spinner on a valid submit (js-utilities' `animate-submit`) or while `onSubmit` runs |
-| `LinkButton` | `url`, `color` |
-| `ButtonGroup` | `inline` (default `true`; `false` stacks vertically) |
+| `onSubmit` | Calls it with the values (with `form`, its data). Return a promise to show the processing state; throw a 422 to show its errors. |
+| `form={useForm(…)}` | Binds the fields to Inertia's `useForm()` data and submits with `form.submit()` ([Inertia](../advanced-usage/inertia)). |
+| `FormsProvider router` | Submits through the router: `inertia` from `@javaabu/forms/inertia`, or `fetchRouter` for JSON endpoints. |
+| nothing | Submits natively, like a Blade form. |
+
+```tsx
+<Form
+  action="/subscribers"
+  onSubmit={async (_values, event) => {
+    const response = await fetch("/subscribers", {
+      method: "POST",
+      body: new FormData(event.currentTarget),
+      headers: { Accept: "application/json" },
+    })
+    if (!response.ok) throw response // a 422 shows its errors under the fields
+  }}
+  onSuccess={() => alert("ސަބްސްކްރައިބް ކުރެވިއްޖެ")}
+>
+  <Text name="email" type="email" />
+  <Submit />
+</Form>
+```
+
+While a client-side submit runs (`form`, `onSubmit` or a router), the form is `aria-busy`, its fields are disabled (`disableWhileProcessing={false}` keeps them enabled) and `Submit` shows a spinner. A second submit is ignored. Errors show under their fields; see [Validation errors](./errors).
+
+## Form props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `action` | `string \| RouteDefinition \| RouteFormDefinition \| route function` | | Where the form submits. |
+| `method` | `string` | the route's, else `POST` | HTTP method; spoofed for `PUT`, `PATCH`, `DELETE`. |
+| `model` | `object` | | Binds the fields inside. Also passed to an `action` route function. |
+| `files` | `boolean` | `false` | `multipart/form-data`. |
+| `old` | `object \| null` | `FormsProvider old` | Old input for the fields inside. |
+| `csrf` | `boolean` | `true` | Add `_token` to non-GET forms. |
+| `errors` | `FormErrors` | | Errors to show. Wins over page errors. |
+| `errorBag` | `string` | | The error bag to read (and to send with Inertia visits). |
+| `summary` | `boolean` | `false` | Show the error summary at the top. A general message (a failed submit) shows there either way. |
+| `summaryTitle` | `ReactNode` | "Please correct the errors below." | |
+| `focusOnError` | `boolean` | `true` | Focus the first invalid field when errors arrive. |
+| `disabled` | `boolean` | `false` | Disable every field. |
+| `disableWhileProcessing` | `boolean` | `true` | Disable the fields while submitting. |
+| `processing` | `boolean` | | Mark the form as processing yourself. |
+| `form` | Inertia `useForm()` result | | See [Inertia](../advanced-usage/inertia). |
+| `onSubmit` | `(values, event) => unknown` | | Submit with your own code. |
+| `onSuccess`, `onError`, `onProgress` | | | After a successful submit; after a failed one; upload progress (0–100). |
+| `visitOptions`, `preserveScroll`, `preserveState`, `resetOnSuccess` | | | Router options ([Inertia](../advanced-usage/inertia)). |
+| `components` | `Partial<FormsComponents>` | | Replace adapter components for this form ([UI adapters](../advanced-usage/adapters)). |
+
+Other `<form>` attributes (`id`, `className`, `noValidate`, …) are passed to the form. `useFormStatus()` gives a component inside the form `processing`, `status`, `progress` and `errors`.
+
+# Buttons
+
+```tsx
+import { Button, ButtonGroup, LinkButton, Submit } from "@javaabu/forms"
+
+<ButtonGroup>
+  <Submit>ސޭވްކުރޭ</Submit>
+  <Button color="light" onClick={() => history.back()}>ކެންސަލް</Button>
+  <LinkButton url="/articles/create" color="outline-primary" startIcon="plus">
+    Create New
+  </LinkButton>
+</ButtonGroup>
+```
+
+| Component | Blade | Props |
+| --- | --- | --- |
+| `Button` | `button` | `color` (default `primary`), `size` (`sm`, `md`, `lg`, `icon`), `type` (default `button`), `loading`, `startIcon`, `endIcon`, `animate`, and `<button>` attributes. |
+| `Submit` | `submit` | `Button` with `type="submit"` and `animate`: a spinner on a valid submit and while the form processes (js-utilities' `animate-submit`). |
+| `LinkButton` | `link-button` | `url`, `color`, `size`, `disabled`, `startIcon`, `endIcon`, and `<a>` attributes. |
+| `ButtonGroup` | `button-group` | `inline` (default `true`; `false` stacks the buttons). |
+
+`color` takes Blade's Bootstrap colours: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `link` and `outline-*`. Each adapter maps them to its own variants (Onu: `danger` is `destructive`, `light` is `outline`, …). Icons are names (`plus`, `download`, `close`, `chevron-left`, …) that the adapter draws.
+
+# Labels, help and errors
+
+| Component | Blade | Use |
+| --- | --- | --- |
+| `FormGroup` | `form-group` | Label, help and errors around any control: `<FormGroup name="color" label="ކުލަ"><MyColorPicker /></FormGroup>`. `blankLabel` keeps an empty label column; `wrap={false}` renders only the children. |
+| `Label` | `label` | A label with the required marker: `<Label htmlFor="title" label="Title" required />`. |
+| `LabelRequired` | `label-required` | The marker on its own (`text` defaults to `*`). |
+| `InputHelp` | `input-help` | Help text. |
+| `Errors` | `errors` | A field's errors anywhere in the form: `<Errors name="terms" />`. `firstOnly` (default `true`), and `bag` to read a named error bag. |
+| `ErrorSummary` | `error-summary` | Every error, with links to the fields. See [Validation errors](./errors). |
 
-## Labels and errors
+# Accessibility
 
-`FormGroup` wraps any control with a label, help and errors. `Label`, `LabelRequired`, `InputHelp` and `Errors name="title"` are the building blocks on their own.
+While loading, `Submit` is disabled and marked busy (`aria-busy` in the HTML and shadcn adapters). Labels are tied to their controls, and errors are linked with `aria-describedby`. When errors arrive, the first invalid field takes focus.
diff --git a/docs/basic-usage/inputs-and-textarea.md b/docs/basic-usage/inputs-and-textarea.md
index 62e40ee..27bb6ff 100644
--- a/docs/basic-usage/inputs-and-textarea.md
+++ b/docs/basic-usage/inputs-and-textarea.md
@@ -3,50 +3,98 @@ title: Input and textarea elements
 sidebar_position: 1
 ---
 
+Text fields render a label, the control, help text and errors. The id and label come from `name`, and the value comes from old input, the bound model or `default` (see [Model binding](./model-binding)).
+
+```blade
+<x-forms::text name="company_name" required />
+<x-forms::email name="email" />
+<x-forms::textarea name="address" rows="4" />
+```
+
+```tsx
+import { Email, Form, Submit, Text, Textarea } from "@javaabu/forms"
+
+export function CompanyForm({ company }) {
+  return (
+    <Form model={company} action="/companies" method="PATCH">
+      <Text name="company_name" required />
+      <Text name="name_dv" label="ނަން" thaana />
+      <Email name="email" />
+      <Textarea name="address" rows={4} />
+      <Submit>ސޭވްކުރޭ</Submit>
+    </Form>
+  )
+}
+```
+
+# Common patterns
+
 ```tsx
-<Forms.Input name="company_name" />
-<Forms.Input name="company_name" label="Company Name" />
-<Forms.Input name="company_name" label={t("Company Name")} />
-<Forms.Input name="company_name" inline />
-<Forms.Input name="search" placeholder="Search..." showLabel={false} />
-<Forms.Input name="email" required />
-<Forms.Input name="username" showErrors={false} />
-<Forms.Input name="price" prepend="MVR" append=".00" />
-<Forms.Text name="name" thaana />  {/* Thaana keyboard for Dhivehi */}
+<Text name="company_name" />                         {/* label "Company Name", id "company_name" */}
+<Text name="company_name" label="ކުންފުނީގެ ނަން" />
+<Text name="address[city]" />                        {/* id "address-city", reads address.city */}
+<Text name="company_name" inline />                  {/* label beside the input */}
+<Text name="search" placeholder="ހޯދާ..." showLabel={false} />
+<Text name="username" showErrors={false} />
+<Text name="price" prepend="MVR" append=".00" />
+<Text name="name_dv" thaana thaanaToggle />          {/* type Thaana from a Latin keyboard */}
+<Text name="title" help="Shown on the listing page." />
 ```
 
-## Available options
+# Components
+
+| Component | Blade | Notes |
+| --- | --- | --- |
+| `Input` | `input` | `type` picks the control: `number` renders `Number`, `hidden` renders `Hidden`, anything else a text-like input. Prefer the typed components. |
+| `Text` | `text` | |
+| `Email` | `email` | Always left-to-right, no Thaana. |
+| `Password` | `password` | Never pre-filled, and takes no `default`. |
+| `Tel` | `tel` | Left-to-right, `inputMode="tel"`. Submitted as typed. |
+| `Url` | `url` | Adds `https://` on blur when the scheme is missing, like js-utilities' `urlInput`. |
+| `Number` | `number` | Submits the raw number. Takes `min`, `max`, `step`, `decimals`, `prepend`, `append`, `value` / `onValueChange`. |
+| `Latitude`, `Longitude` | `latitude`, `longitude` | `Number` from -90 to 90 (or -180 to 180) with 6 decimals. |
+| `Hidden` | `hidden` | A hidden input with the same value precedence. An array value submits one `name[]` input per item. |
+| `Textarea` | `textarea` | `rows` (default `3`), `autoResize` (default `false`), `thaana`, `wysiwyg`. |
+
+`<Textarea wysiwyg>` renders the rich text editor, like Blade's `<x-forms::textarea wysiwyg>`. See [WYSIWYG](./wysiwyg).
+
+# Props
+
+Every field takes these:
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `name` | `string` | **Required** | Name, id, bound value, old input and error lookup. |
-| `label` | `ReactNode` | generated | A title-cased label from `name`, passed through `FormsProvider translate`. |
-| `id` | `string` | generated | `address[city]` → `address-city`. |
-| `model` | `object \| false` | bound model | Binding target; `false` ignores the bound model. |
-| `default` | `unknown` | | Value when there is no old input and no bound value. |
-| `value` | `string \| number` | | Controlled value. |
-| `type` | `string` | `"text"` | `email`, `password`, `number`, `url`, `hidden` and `tel` use the matching component. |
-| `placeholder` | `string` | | |
-| `showPlaceholder` | `boolean` | `false` | Use the label as the placeholder. |
-| `required` | `boolean` | `false` | `required` attribute and the `*` marker. |
-| `disabled` | `boolean` | from `Form` | |
-| `inline` | `boolean` | `false` | Label beside the input. |
-| `inlineLabelClass` / `inlineInputClass` | `string` | | Classes for the label and control columns. |
+| `label` | `ReactNode` | generated | A title-cased label from `name`, translated with `__()`. |
+| `id` | `string` | generated | `address[city]` becomes `address-city`. |
+| `model` | `object \| false` | bound model | Where the value comes from. `false` ignores the bound model. |
+| `default` | `unknown` | | Value when there is no old input and the bound value is `null`. |
+| `required` | `boolean` | `false` | The `required` attribute and the required marker. |
+| `disabled` | `boolean` | | Also disabled while the form submits. |
+| `showLabel` | `boolean` | `true` | `false` hides the label visually. Screen readers still read it. |
+| `showErrors` | `boolean` | `true` | `false` hides this field's errors and invalid state. |
+| `inline` | `boolean` | `false` | Label beside the control. |
+| `inlineLabelClass`, `inlineInputClass` | `string` | | Classes for the label and control columns. |
 | `formGroupClass` | `string` | | Classes for the field wrapper. |
-| `showLabel` | `boolean` | `true` | `false` hides the label visually (kept for screen readers). |
-| `showErrors` | `boolean` | `true` | `false` hides this field's errors. |
-| `help` | `ReactNode` | | Help text (Blade's `help` slot). |
-| `prepend` / `append` | `ReactNode` | | Addons (Blade's slots). |
-| `thaana`, `thaanaToggle` | | | Onu's Thaana keyboard, for free-text fields. |
+| `help` | `ReactNode` | | Help text under the control (Blade's `help` slot). |
+
+Text-like fields (`Text`, `Email`, `Password`, `Tel`, `Url`, `Input`) also take:
 
-Other `<input>` props are passed through.
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `string \| number \| null` | | Controlled value. Pair it with `onChange`. |
+| `placeholder` | `string` | | |
+| `showPlaceholder` | `boolean` | `false` | Use the label as the placeholder. |
+| `prepend`, `append` | `ReactNode` | | Content before and after the input (Blade's slots). |
+| `thaana` | `boolean` | `false` | Type Thaana from a Latin keyboard. The input gets `dir="rtl" lang="dv"`. `Text` and `Input` only. |
+| `thaanaToggle` | `boolean` | `false` | A button that switches between Thaana and Latin. |
 
-## Components
+Other `<input>` attributes (`autoComplete`, `maxLength`, `onBlur`, …) are passed to the input.
 
-`Text`, `Email`, `Password` (never pre-filled), `Number` (submits the raw number), `Tel`, `Url` (adds `https://` when it is missing), `Hidden`, `Latitude` (-90 to 90) and `Longitude` (-180 to 180), each with the props above.
+# How it renders
 
-`Textarea` adds `rows` (default `3`) and `autoResize` (default `false`).
+The adapter draws the control. The HTML adapter renders a native `<input>` or `<textarea>`. The Onu adapter uses Onu's `TextInput`, `PasswordInput` (with a show / hide button), `NumberInput` (locale-aware) and `Textarea`. The shadcn adapter uses your `Input` and `Textarea`. See [UI adapters](../advanced-usage/adapters).
 
-## Accessibility
+# Accessibility
 
-Every field uses Onu's `FormField`: the label is tied to the control, and the help text and errors are wired with `aria-describedby` and `aria-invalid`. `showLabel={false}` keeps the label for screen readers.
+The label is tied to the control. Help text and errors are linked with `aria-describedby`, and an invalid field gets `aria-invalid="true"`. `showLabel={false}` keeps the label for screen readers.
diff --git a/docs/basic-usage/listing.md b/docs/basic-usage/listing.md
index aa0d92a..972fd66 100644
--- a/docs/basic-usage/listing.md
+++ b/docs/basic-usage/listing.md
@@ -3,48 +3,97 @@ title: Listing pages
 sidebar_position: 9
 ---
 
+The listing components build an index page: a filter form, a table with row selection, sorting and bulk actions, an empty state and pagination.
+
 ```tsx
-<Forms.Form method="GET" id="filter" model={query}>
-  <Forms.Filter>
-    <Forms.Text name="search" />
-    <Forms.PerPage />
-    <Forms.FilterSubmit cancelUrl="/users" export={{ xlsx: "Excel", csv: "CSV" }} />
-  </Forms.Filter>
-</Forms.Form>
-
-<Forms.Table
-  model="users"
-  bulkFormAction="/users/bulk"
-  bulkForm={<Forms.BulkActions actions={{ delete: "Delete", activate: "Activate" }} />}
-  headers={
+import {
+  BulkActions,
+  Filter,
+  FilterSubmit,
+  Form,
+  NoItems,
+  Pagination,
+  PerPage,
+  Table,
+  TableCell,
+  TableEmptyRow,
+  TableHeading,
+  TableRow,
+  Text,
+} from "@javaabu/forms"
+
+export default function Index({ users, query }) {
+  return (
     <>
-      <Forms.TableHeading label="Name" sortable="name" />
-      <Forms.TableHeading label="Status" />
+      <Form method="GET" id="filter" action="/users" model={query}>
+        <Filter>
+          <Text name="search" label="ހޯދާ" />
+          <PerPage />
+          <FilterSubmit cancelUrl="/users" export={{ xlsx: "Excel", csv: "CSV" }} />
+        </Filter>
+      </Form>
+
+      <Table
+        model="users"
+        bulkFormAction="/users/bulk"
+        bulkForm={<BulkActions actions={{ delete: "Delete", activate: "Activate" }} />}
+        headers={
+          <>
+            <TableHeading label="Name" sortable="name" />
+            <TableHeading label="Status" />
+          </>
+        }
+        pagination={<Pagination paginator={users} />}
+      >
+        {users.data.length ? (
+          users.data.map((user) => (
+            <TableRow key={user.id} model={user}>
+              <TableCell name="name" />
+              <TableCell name="status" />
+            </TableRow>
+          ))
+        ) : (
+          <TableEmptyRow columns={2}>
+            <NoItems modelType="users" createAction="/users/create" model="user" />
+          </TableEmptyRow>
+        )}
+      </Table>
     </>
-  }
-  pagination={<Forms.Pagination paginator={users} />}
->
-  {users.data.length ? (
-    users.data.map((user) => (
-      <Forms.TableRow key={user.id} model={user}>
-        <Forms.TableCell name="name" />
-        <Forms.TableCell name="status" />
-      </Forms.TableRow>
-    ))
-  ) : (
-    <Forms.TableEmptyRow columns={2}>
-      <Forms.NoItems modelType="users" createAction="/users/create" model="user" />
-    </Forms.TableEmptyRow>
-  )}
-</Forms.Table>
+  )
+}
 ```
 
-- **Selection** (js-utilities' `selectAllCheckbox`): row checkboxes submit `<model>[]` with the row's `id`. The header checkbox selects every row and shows a mixed state for a partial selection.
-- **Sorting** (`sortable`): a sortable heading sets `orderby` / `order` on the form with id `filterId` (default `filter`) and submits it. Without that form, it updates the URL. The current sort comes from the URL.
-- **Bulk actions**: with `bulkForm`, the table sits inside a form posting to `bulkFormAction`, with `action` and `redirect` fields.
-- **Export**: `FilterSubmit export` submits `download=<key>`.
-- **Pagination**: pass a Laravel paginator, API resource collection or cursor paginator as JSON. Pages are links that keep the query string, or use `onPageChange`.
+# What each part does
+
+- **Selection** (js-utilities' `selectAllCheckbox`). Row checkboxes submit `<model>[]` with the row's `id` (or `modelId`). The header checkbox selects every row, and shows a mixed state for a partial selection.
+- **Sorting** (`sortable` on a heading, or `name`). A sortable heading sets `orderby` and `order` on the form with id `filterId` (default `filter`) and submits it. Without that form, it changes the URL. The current sort comes from the URL. `Filter` adds the hidden `orderby` and `order` fields.
+- **Bulk actions.** With `bulkForm`, the table sits inside a form that posts to `bulkFormAction`. `BulkActions` adds the `action` select, an Apply button and a `redirect` field with the current URL.
+- **Export.** `FilterSubmit export` adds an Export button that submits `download=<key>`: `true` (value `1`), a format, a list, or a format → label object for a menu.
+- **Per page.** `PerPage` is a `per_page` select. Its value comes from `perPage`, the URL, or the `per_page` setting (`FormsProvider settings`).
+- **Search.** `SearchForm` is a GET form with one search field (`name`, default `search`); its value comes from the URL.
+- **Empty state.** `NoItems` shows "It's a bit lonely here." and a Create New button. The button shows when `showCreate` is true, or when `FormsProvider authorize("create", model)` allows it.
+- **Pagination.** Pass a Laravel paginator, an API resource collection or a cursor paginator, as JSON. Pages are links that keep the rest of the query string. Pass `getPageHref` to build the links yourself, or `onPageChange` for buttons.
+
+# Table props
+
+| Prop | Default | Description |
+| --- | --- | --- |
+| `model` | | Name of the row checkboxes (`<model>[]`). |
+| `noCheckbox` | `false` | No row checkboxes. |
+| `noBulk` | `false` | No bulk actions form. |
+| `noPagination` | `false` | Don't render `pagination`. |
+| `striped` | `false` | Striped rows. |
+| `tableClass` | | Classes for the `<table>`. |
+| `filterId` | `filter` | Id of the filter form that sortable headings submit. |
+| `bulkForm`, `bulkFormAction`, `bulkFormProps` | | The bulk actions form's content, action and other `Form` props. |
+| `headers`, `beforeTable`, `beforeHeaders`, `afterHeaders`, `rows`, `afterTbody`, `pagination` | | Blade's named slots. `rows` or `children` are the rows. |
+
+`TableRow` takes `model`, `modelId`, `name` (the checkbox name), `rowId`, `noCheckbox` and `disableCheckbox`. `TableCell` takes `name` (an attribute of the row's model), `value`, `label` (shown on small screens via `data-col`), `showLabel` and `multiline`; arrays are joined with `table_array_separator`. `TableEmptyRow` takes `columns` (the checkbox column is added).
+
+# How it renders
+
+The table parts render through the adapter's `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead` and `TableCell` slots: plain table elements in the HTML adapter, Onu's table in the Onu adapter, and your shadcn `Table` components with shadcn. The empty state and pagination use the adapter's `EmptyState` and `Pagination` slots.
 
-## Accessibility
+# Accessibility
 
-Sortable headings are buttons and set `aria-sort` on the column. Row checkboxes are labelled with the row's id. The pagination is a navigation landmark.
+Sortable headings are buttons, and the column gets `aria-sort`. The header checkbox is labelled "Select All", and each row checkbox "Select <id>". The pagination is a navigation landmark, and the current page has `aria-current="page"`.
diff --git a/docs/basic-usage/map-input.md b/docs/basic-usage/map-input.md
index 7487f1f..9277e8e 100644
--- a/docs/basic-usage/map-input.md
+++ b/docs/basic-usage/map-input.md
@@ -3,25 +3,66 @@ title: Map input
 sidebar_position: 8.5
 ---
 
+`MapInput` picks a point, a centre and radius, or a boundary. Like the Blade component, it submits separate `lat`, `lng`, `radius` and `boundary` (WKT `POLYGON`) fields.
+
+```blade
+<x-forms::map-input name="location" :model="$venue" />
+```
+
+```tsx
+import { Form, MapInput, Submit } from "@javaabu/forms"
+
+export function VenueForm({ venue }) {
+  return (
+    <Form model={venue} action={`/venues/${venue.id}`} method="PATCH">
+      <MapInput name="location" label="ތަން" />
+      <MapInput name="area" enableRadius radiusUnit="km" />
+      <MapInput name="zone" enablePolygon polygonName="boundary" />
+      <Submit />
+    </Form>
+  )
+}
+```
+
+# The map
+
+The map itself comes from the adapter's `Map` slot. For Onu's maps, add `onuMaps` and set up Onu's map provider (a Google Maps API key) as Onu's map docs describe:
+
 ```tsx
-import { MapInput } from "@javaabu/forms/maps"
+import { FormsProvider, mergeAdapters } from "@javaabu/forms"
+import { onu } from "@javaabu/forms/onu"
+import { onuMaps } from "@javaabu/forms/onu/maps"
 
-<MapInput name="location" model={venue} />
-<MapInput name="area" enableRadius radiusUnit="km" />
-<MapInput name="zone" enablePolygon polygonName="boundary" />
+const ui = mergeAdapters(onu, onuMaps)
+
+<FormsProvider ui={ui}>…</FormsProvider>
 ```
 
-This uses Onu's `MapPicker`, `MapRadius` and `MapPolygon` (set up `MapProvider` as Onu's map docs describe). Like the Blade component, it submits separate `lat`, `lng`, `radius` and `boundary` (WKT `POLYGON`) fields.
+Without a map (the HTML and shadcn adapters, or Onu without `onuMaps`), `MapInput` shows only its latitude, longitude and radius fields, so people can still type coordinates. A boundary (`enablePolygon`) needs a map to draw; without one, only the bound value is submitted.
+
+# Values
+
+The point is read from `lat` / `lng` (or `latName` / `lngName`) on the bound model, or from a point at `name` (`{ lat, lng }`, `{ latitude, longitude }` or a GeoJSON `Point`). The radius is read from `radius`, and the boundary from `boundary` as WKT. Props (`lat`, `lng`, `radius`, `polygon`) win over the model, and `defaultLat`, `defaultLng`, `defaultRadius`, `defaultPolygon` apply when the model has no value.
+
+# Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `latName`, `lngName`, `radiusName`, `polygonName` | `string` | `lat`, `lng`, `radius`, `boundary` | Names of the submitted fields. |
+| `enableCoordinates` | `boolean` | `true` | Show the latitude and longitude fields (not with `enablePolygon`). |
+| `enableRadius` | `boolean` | `false` | Pick a centre and a radius. |
+| `enablePolygon` | `boolean` | `false` | Draw a boundary, submitted as WKT. |
+| `hideInputs` | `boolean` | `false` | Hide the coordinate and radius fields; they are submitted as hidden inputs. |
+| `radiusPrecision` | `number` | `0` | Decimals of the radius. |
+| `maxRadius` | `number` (m) | `6371000` | Largest radius. |
+| `radiusUnit` | `"m" \| "km"` | `m` | Unit the radius is shown and submitted in. |
+| `lat`, `lng`, `radius`, `polygon` | | | Values that win over the model. |
+| `defaultLat`, `defaultLng`, `defaultRadius`, `defaultPolygon` | | | Values when the model has none. |
+| `defaultMapCenterLat`, `defaultMapCenterLng` | `number` | the `default_lat` / `default_lng` settings | Where the map opens when empty. |
+| `className` | `string` | | Classes for the map. |
 
-| Prop | Default | Description |
-| --- | --- | --- |
-| `latName` / `lngName` / `radiusName` / `polygonName` | `lat` / `lng` / `radius` / `boundary` | Field names. |
-| `enableRadius` / `enablePolygon` | `false` | Radius or boundary instead of a point. |
-| `hideInputs` | `false` | Hide the coordinate fields. |
-| `radiusPrecision`, `maxRadius`, `radiusUnit` | `0`, `6371000`, `m` | Radius settings. |
-| `lat`, `lng`, `radius`, `polygon`, `default*` | | Values; otherwise bound from the model (`lat`/`lng` or a point at `name`). |
-| `defaultMapCenterLat` / `Lng` | `default_lat` / `default_lng` settings | Where the map opens. |
+Plus the common field props except `default` ([Inputs](./inputs-and-textarea#props)).
 
-## Accessibility
+# Accessibility
 
-Onu's map inputs have typed coordinate fields as a text alternative to the map.
+The latitude, longitude and radius fields are a text alternative to the map, and each has its own label and errors.
diff --git a/docs/basic-usage/select-elements.md b/docs/basic-usage/select-elements.md
index c577f3f..449fa0e 100644
--- a/docs/basic-usage/select-elements.md
+++ b/docs/basic-usage/select-elements.md
@@ -3,54 +3,90 @@ title: Select elements
 sidebar_position: 4
 ---
 
+```blade
+<x-forms::select name="country_code" :options="$countries" />
+<x-forms::select name="tags[]" :options="$tags" multiple relation />
+```
+
 ```tsx
-<Forms.Select name="country_code" options={{ be: "Belgium", nl: "The Netherlands" }} />
-<Forms.Select name="country_code" options={countries} nameField="formatted_name" idField="code" />
-<Forms.Select name="country_code">
-  <option value="be">Belgium</option>
-  <option value="nl">The Netherlands</option>
-</Forms.Select>
-<Forms.Select name="country_code[]" options={countries} multiple default={["be", "nl"]} />
-<Forms.Select name="country_code" options={countries} placeholder="Choose..." />
+import { Form, Select, Submit } from "@javaabu/forms"
+
+export function ArticleForm({ article, countries, tags }) {
+  return (
+    <Form model={article} action={`/articles/${article.id}`} method="PATCH">
+      <Select name="country_code" options={countries} />
+      <Select name="atoll" options={{ K: "ކ. އަތޮޅު", S: "ސ. އަތޮޅު" }} placeholder="Choose..." />
+      <Select name="tags[]" options={tags} multiple relation />
+      <Submit />
+    </Form>
+  )
+}
 ```
 
-## Options
+# Options
 
-`options` accepts the shapes Laravel sends:
+`options` takes the shapes Laravel sends:
 
 | Shape | Example | Values |
 | --- | --- | --- |
-| key → label | `{ be: "Belgium" }` | the keys |
-| PHP list | `["a", "b"]` | `0`, `1` (as Blade) |
+| key → label | `{ be: "Belgium", nl: "The Netherlands" }` | the keys |
+| PHP list | `["a", "b"]` | `0`, `1` (as in Blade) |
 | ordered pairs | `[[10, "Ten"], [5, "Five"]]` | the first items, in order |
 | records (an Eloquent collection) | `[{ id: 1, name: "Malé" }]` | `idField` / `nameField` (default `id` / `name`) |
-| Onu options | `[{ value: "1", label: "Malé" }]` | `value` |
+| options | `[{ value: "1", label: "Malé" }]` | `value` |
+| a `Map` | `new Map([[1, "Malé"]])` | the keys |
 
-## Selected value
+JavaScript objects put integer keys first, in ascending order. Use pairs when the order of numeric keys matters.
 
-A bound model object selects its key (`idField` or `id`), a collection its keys, and an enum `{ value }` its value. With `relation`, a `BelongsTo` reads the foreign key (`country` → `country_id`) and a many relation reads the loaded models' keys:
+You can also write `<option>` children, as in Blade's slot:
 
 ```tsx
-<Forms.Form model={video}>
-  <Forms.Select name="tags[]" options={tags} multiple relation />
-</Forms.Form>
+<Select name="country_code">
+  <option value="be">Belgium</option>
+  <option value="nl">The Netherlands</option>
+</Select>
 ```
 
-Multi-selects add a `sync_<name>` hidden input (value `1`) so Laravel can tell "none selected" from "not submitted". `excludeSyncField` removes it, `syncFieldName` renames it.
+# Selected value
 
-## Available options
+The order is old input, then `default`, then the bound value. Note that `default` wins over the bound value here, as in Blade's `Select`.
+
+A bound model object selects its key (`idField` or `id`), a collection its keys, and an enum `{ value }` its value. With `relation`, a `BelongsTo` reads the foreign key (`country` reads `country_id`), or the loaded model's key when there is no foreign key. A many relation reads the loaded models' keys:
+
+```tsx
+<Form model={video}>
+  <Select name="category" options={categories} relation />
+  <Select name="tags[]" options={tags} multiple relation />
+</Form>
+```
+
+# Multiple values
+
+`multiple` submits `name[]`, adding the brackets when the name doesn't have them. It also adds a `sync_<name>` hidden input (value `1`), so Laravel can tell "none selected" from "not submitted". `excludeSyncField` removes it and `syncFieldName` renames it. A disabled select has no sync input.
+
+# Props
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `options` | see above | | |
-| `multiple` | `boolean` | `false` | Submits `name[]`. |
+| `children` | `<option>` elements | | Used when `options` is empty. |
+| `multiple` | `boolean` | `false` | Several values; submits `name[]`. |
 | `relation` | `boolean` | `false` | Read the value from a relation. |
-| `nameField` / `idField` | `string` | `name` / `id` | Record keys. |
-| `placeholder` | `string` | | Shown when empty; the field can be cleared when optional. |
-| `tags` | `boolean` | `false` | Let users add values. |
-| `excludeSyncField`, `syncFieldName` | | | The sync input. |
-| `value` / `onValueChange` | | | Controlled value. |
+| `nameField`, `idField` | `string` | `name`, `id` | Keys of record options. |
+| `placeholder` | `string` | | Shown when nothing is selected. |
+| `showPlaceholder` | `boolean` | `false` | Use the label as the placeholder. |
+| `clearable` | `boolean` | with a `placeholder` | Let users clear the value. A required single select can't be cleared. |
+| `tags` | `boolean` | `false` | Let users add values that are not in the list. |
+| `excludeSyncField`, `syncFieldName` | `boolean`, `string` | | The `sync_<name>` input. |
+| `value`, `onValueChange` | `string \| string[] \| null`, `(value) => void` | | Controlled value. |
+| `className` | `string` | | |
+
+Plus the common field props ([Inputs](./inputs-and-textarea#props)). For search, server search and cascading selects, use [Select2](./select2).
+
+# How it renders
+
+The HTML adapter renders a native `<select>` (`multiple` for several values). The Onu adapter uses Onu's `Select`, and its `SearchableSelect` for multiple values and tags. The shadcn adapter uses your `Select`, and the combobox (`Popover` + `Command`) for multiple values and tags.
 
-## Accessibility
+# Accessibility
 
-`Select` is Onu's `Select` (a listbox with type-ahead), and multi-selects are Onu's `MultiSelect` (a combobox with removable chips). Both are labelled by the field's label.
+The select is labelled by the field's label, and its errors are linked with `aria-describedby`.
diff --git a/docs/basic-usage/select2.md b/docs/basic-usage/select2.md
index 1b603aa..9b2fdbe 100644
--- a/docs/basic-usage/select2.md
+++ b/docs/basic-usage/select2.md
@@ -3,70 +3,90 @@ title: Select2
 sidebar_position: 3
 ---
 
-`Select2` is a searchable select (Onu `SearchableSelect`). It brings js-utilities' `select2Custom` behaviour: ajax search, cascades and fallbacks.
+`Select2` is a searchable select with js-utilities' `select2Custom` behaviour: server search, cascading selects, dynamic URLs and fallback inputs. It takes every [`Select`](./select-elements) prop.
+
+```blade
+<x-forms::select2 name="country" :options="$countries" />
+<x-forms::select2 name="roles[]" :options="$roles" multiple />
+```
 
 ```tsx
-<Forms.Select2 name="country" options={countries} />
-<Forms.Select2 name="roles" options={roles} multiple />
-<Forms.Select2 name="skills" options={skills} multiple tags />
-<Forms.Select2 name="status" options={statuses} hideSearch allowClear={false} />
+import { Form, Select2, Submit } from "@javaabu/forms"
+
+export function UserForm({ user, countries, roles, skills, statuses }) {
+  return (
+    <Form model={user} action={`/users/${user.id}`} method="PATCH">
+      <Select2 name="country" options={countries} />
+      <Select2 name="roles" options={roles} multiple />
+      <Select2 name="skills" options={skills} multiple tags />
+      <Select2 name="status" options={statuses} hideSearch allowClear={false} />
+      <Submit />
+    </Form>
+  )
+}
 ```
 
-With `allowClear` (the default), the placeholder defaults to "Nothing Selected".
+With `allowClear` (the default), the placeholder defaults to "Nothing Selected" (`forms::strings.nothing_selected`).
 
-## Ajax search
+# Server search
 
 ```tsx
-<Forms.Select2 name="user_id" isAjax ajaxUrl={route("api.users.index")} options={selectedUser ? [selectedUser] : []} />
+<Select2 name="user_id" isAjax ajaxUrl="/api/users" options={selectedUser ? [selectedUser] : []} />
 ```
 
-This searches with `?filter[search]=…&fields=id,name&page=…` and reads Laravel's paginated JSON. Pass the current option in `options` so it has a label. `minChars` sets the minimum search length.
+This requests `ajaxUrl?filter[search]=<text>&fields=id,name` and reads a JSON list or a resource collection's `data`. Pass the current option in `options`, so it has a label before the first search. `minChars` sets the shortest search. `idField` and `nameField` change the keys read from the response.
 
-## Cascading selects
+# Cascading selects
 
-The parent names its children with `child`, or the child names its parent with `parent`. The child loads `ajaxUrl?filter[<filterField>]=<value>&per_page=-1&fields=id,name` whenever the parent changes. `:value` in the URL is replaced with the parent's value.
+The parent names its children with `child`, or the child names its parent with `parent`. Whenever the parent changes, the child loads `ajaxUrl?filter[<filterField>]=<value>&per_page=-1&fields=id,name`. `:value` in the URL is replaced with the parent's value.
 
 ```tsx
-<Forms.Form model={address}>
-  <Forms.Select2 name="country" options={countries} child="#state" />
-  <Forms.Select2 name="state" id="state" options={states} ajaxUrl={route("api.states.index")} child="#city" filterField="country" />
-  <Forms.Select2 name="city" id="city" options={cities} ajaxUrl={route("api.cities.index")} filterField="state" fallback="#city-name" />
-  <Forms.Text name="city" id="city-name" placeholder="Write your own city name..." />
-</Forms.Form>
+<Form model={address}>
+  <Select2 name="country" options={countries} child="#state" />
+  <Select2 name="state" id="state" options={states} ajaxUrl="/api/states" child="#city" filterField="country" />
+  <Select2 name="city" id="city" options={cities} ajaxUrl="/api/cities" filterField="state" fallback="#city-name" />
+  <Text name="city_name" id="city-name" placeholder="ރަށުގެ ނަން ލިޔުއްވާ" />
+</Form>
 ```
 
-While loading, the child is disabled and shows "Loading...". It keeps its value when the value is still in the new list.
+The child is disabled until its parent has a value. While loading, it is disabled and shows "Loading...". It keeps its value when the value is still in the new list.
 
-**Fallback**: when the parent's value has no options, the select is hidden and disabled, and the `fallback` input (any of this package's text inputs, by `#id` or name) is shown and enabled. When the parent is empty, the fallback is enabled only if the parent itself fell back.
+**Fallback.** When the parent's value has no options, the select is hidden and disabled, and the `fallback` input (by `#id` or name) is shown and enabled. When the parent is empty, the fallback is enabled only if the parent itself fell back.
 
-## Dynamic URLs
+# Dynamic URLs
 
 The parent's value picks the child's URL from an object (or its JSON):
 
 ```tsx
-<Forms.Select2 name="type" ajaxChild="#entity" options={{ users: "Users", posts: "Posts" }} />
-<Forms.Select2 name="entity_id" id="entity" isAjax ajaxUrl={{ users: "/api/users", posts: "/api/posts" }} />
+<Select2 name="type" ajaxChild="#entity" options={{ users: "Users", posts: "Posts" }} />
+<Select2 name="entity_id" id="entity" isAjax ajaxUrl={{ users: "/api/users", posts: "/api/posts" }} />
 ```
 
-A new URL clears the child, and the child is disabled until the parent has a value.
+A new URL clears the child, and the child is disabled until the parent has a value. `selectedUrl` picks the key to use before the parent has one.
 
-## Available options
+# Props
 
-All `Select` options, plus:
+All `Select` props, plus:
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `allowClear` | `boolean` | `true` | Clear button. |
-| `hideSearch` | `boolean` | `false` | A plain select, without the search box. |
-| `isAjax` | `boolean` | `false` | Search on the server. |
-| `ajaxUrl` | `string \| Record<string,string>` | | Endpoint, or endpoints by parent value. |
-| `selectedUrl` | `string` | | Initial key of `ajaxUrl`. |
-| `child` / `ajaxChild` | `string` | | Dependent fields (`#id` or name). |
+| `allowClear` | `boolean` | `true` | Show a clear button. |
+| `hideSearch` | `boolean` | `false` | No search box. |
+| `isAjax` | `boolean` | `false` | Search on the server. Needs `ajaxUrl`. |
+| `ajaxUrl` | `string \| Record<string, string>` | | The endpoint, or endpoints by the `ajaxChild` parent's value. |
+| `selectedUrl` | `string` | | Key of `ajaxUrl` to use before a parent picks one. |
+| `child`, `ajaxChild` | `string` | | Fields that depend on this one (`#id` or name). |
 | `parent` | `string` | | The field this one depends on. |
-| `filterField` | `string` | | Filter param for the parent's value. |
-| `fallback` | `string` | | Input shown when there are no options. |
-| `minChars` | `number` | `0` | Minimum search length with `isAjax`. |
+| `filterField` | `string` | | Sends the parent's value as `filter[<filterField>]`. |
+| `fallback` | `string` | | An input shown when the parent's value has no options. |
+| `minChars` | `number` | | Shortest search with `isAjax`. |
+
+Fields are found by `#id` or name anywhere on the page, including plain inputs you wrote yourself.
+
+# How it renders
+
+The HTML adapter renders a native `<select>` with a search box above it (Enter picks the first match, or adds the text with `tags`). The Onu adapter uses Onu's `SearchableSelect`, and `ApiSelect` for server search. The shadcn adapter uses the shadcn combobox (`Popover` + `Command`), and plain `Select` for `hideSearch`.
 
-## Accessibility
+# Accessibility
 
-The select is an Onu combobox: you can type to search, use the arrow keys to move through the list, and the selected values are announced.
+You can type to search and use the arrow keys to move through the list. The select is labelled by the field's label.
diff --git a/docs/basic-usage/wysiwyg.md b/docs/basic-usage/wysiwyg.md
index a378732..3b679ad 100644
--- a/docs/basic-usage/wysiwyg.md
+++ b/docs/basic-usage/wysiwyg.md
@@ -3,15 +3,53 @@ title: WYSIWYG
 sidebar_position: 8
 ---
 
+`Wysiwyg` is a rich text editor that submits HTML under its `name`. It replaces Blade's `wysiwyg` component and the `textarea wysiwyg` attribute (`<Textarea wysiwyg>` works too).
+
+```blade
+<x-forms::wysiwyg name="body" />
+<x-forms::textarea name="body" wysiwyg />
+```
+
 ```tsx
-import { Wysiwyg } from "@javaabu/forms/editor"
+import { Form, Submit, Wysiwyg } from "@javaabu/forms"
 
-<Wysiwyg name="message" />
-<Wysiwyg name="body" model={article} thaana />
+export function ArticleBody({ article }) {
+  return (
+    <Form model={article} action={`/articles/${article.id}`} method="PATCH">
+      <Wysiwyg name="body" label="ލިޔުން" />
+      <Submit />
+    </Form>
+  )
+}
 ```
 
-This replaces Blade's `wysiwyg` component and the `textarea wysiwyg` attribute. It uses Onu's Tiptap editor (`@javaabu/onu/editor`); install the Tiptap packages listed in Onu's editor docs. The HTML is submitted under `name`.
+# The editor
+
+The editor comes from the adapter's `Wysiwyg` slot. For Onu's Tiptap editor, add `onuEditor` and install the Tiptap packages listed in Onu's editor docs:
+
+```tsx
+import { FormsProvider, mergeAdapters } from "@javaabu/forms"
+import { onu } from "@javaabu/forms/onu"
+import { onuEditor } from "@javaabu/forms/onu/editor"
+
+const ui = mergeAdapters(onu, onuEditor)
+
+<FormsProvider ui={ui}>…</FormsProvider>
+```
+
+Without an editor (the HTML and shadcn adapters, or Onu without `onuEditor`), `Wysiwyg` is a plain textarea that submits what you type. To use another editor, put it in the `Wysiwyg` slot: `components={{ Wysiwyg: MyEditor }}`, where `MyEditor` takes `WysiwygSlotProps` (`value`, `onValueChange(html)`, `name`, `id`, …) and submits the HTML under `name`. See [UI adapters](../advanced-usage/adapters).
+
+# Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `string \| null` | Controlled HTML. |
+| `onChange` | `(html: string) => void` | |
+| `placeholder`, `showPlaceholder` | `string`, `boolean` | |
+| `className` | `string` | |
+
+Plus the common field props ([Inputs](./inputs-and-textarea#props)).
 
-## Accessibility
+# Accessibility
 
-The editor's toolbar is keyboard accessible, and the editing area is labelled by the field's label.
+The editing area is labelled by the field's label. Onu's editor has a keyboard-accessible toolbar.
diff --git a/docs/changelog.md b/docs/changelog.md
new file mode 100644
index 0000000..1d9fcfb
--- /dev/null
+++ b/docs/changelog.md
@@ -0,0 +1,6 @@
+---
+title: Changelog
+sidebar_position: 1.8
+---
+
+All notable changes to `@javaabu/forms` are documented on [GitHub](https://github.com/Javaabu/react-forms/blob/main/CHANGELOG.md).
diff --git a/docs/contributing-to-docs.md b/docs/contributing-to-docs.md
new file mode 100644
index 0000000..0e509f5
--- /dev/null
+++ b/docs/contributing-to-docs.md
@@ -0,0 +1,12 @@
+---
+title: Contributing to the docs
+sidebar_position: 99
+---
+
+Should you come across any glitches in our documentation, your discerning eye is much appreciated. If you've got a solution itching to be implemented, feel free to submit a PR – we welcome your contribution.
+
+For your reference, each project's documentation resides snugly in the /docs folder. That's the hub where everything documentation-related unfolds. Just so you're in the loop, we employ [Docusaurus](https://docusaurus.io) to transform those markdown files into the HTML served to the public. And since we are using Docusaurus, there's a lot of special magic that you can use to make the docs even better. Here are a few resources that will be useful:
+
+- [Markdown Front Matter](https://docusaurus.io/docs/markdown-features#front-matter)
+- [Admonitions](https://docusaurus.io/docs/markdown-features/admonitions)
+- [Sidebar Metadata](https://docusaurus.io/docs/sidebar/autogenerated#autogenerated-sidebar-metadata)
diff --git a/docs/installation-and-setup.md b/docs/installation-and-setup.md
index 5f30e89..c1a9078 100644
--- a/docs/installation-and-setup.md
+++ b/docs/installation-and-setup.md
@@ -1,61 +1,167 @@
 ---
-title: Installation & Setup
+title: Installation and setup
 sidebar_position: 1.2
 ---
 
+# Install
+
+```bash
+npm install @javaabu/forms
+```
+
+Until it is on npm, install it from GitHub. It builds itself when installed:
+
 ```bash
-npm install @javaabu/forms @javaabu/onu
+pnpm add "@javaabu/forms@github:Javaabu/react-forms#next-gen"
 ```
 
-`@javaabu/onu` is a peer dependency. Set Onu up first (see its installation guide), then let Tailwind CSS v4 see this package's classes too:
+With pnpm 10, allow the build scripts of the package and of `@javaabu/i18n` in your `package.json`:
+
+```json
+{
+  "pnpm": { "onlyBuiltDependencies": ["@javaabu/forms", "@javaabu/i18n"] }
+}
+```
+
+# Choose a UI adapter
+
+Without an adapter, the components render plain HTML. Pick the adapter for your UI kit once, at the root of your app.
+
+## Onu
+
+```bash
+npm install @javaabu/onu
+```
 
 ```css
+/* resources/css/app.css */
 @import "tailwindcss";
 @import "@javaabu/onu/tailwind.css";
 @import "@javaabu/forms/tailwind.css";
 ```
 
-Wrap the app once:
-
 ```tsx
 import { OnuProvider, ThemeProvider } from "@javaabu/onu"
-import { FormsProvider } from "@javaabu/forms"
+import { FormsProvider, mergeAdapters } from "@javaabu/forms"
+import { onu } from "@javaabu/forms/onu"
+import { onuEditor } from "@javaabu/forms/onu/editor" // only if you use Wysiwyg
 
-<ThemeProvider>
-  <OnuProvider locale={dv}>
-    <FormsProvider translate={t} settings={{ per_page: 20, max_upload_file_size: 10240, max_image_file_size: 2048 }}>
-      <App />
-    </FormsProvider>
-  </OnuProvider>
-</ThemeProvider>
+const ui = mergeAdapters(onu, onuEditor)
+
+export function Providers({ children }) {
+  return (
+    <ThemeProvider>
+      <OnuProvider>
+        <FormsProvider ui={ui}>{children}</FormsProvider>
+      </OnuProvider>
+    </ThemeProvider>
+  )
+}
 ```
 
-`FormsProvider` is optional. It plays the part of `config/forms.php`, the package translations and `get_setting()`:
+## shadcn/ui
+
+See [shadcn/ui](./advanced-usage/shadcn): you make the adapter from your own components with `createShadcnAdapter()`.
+
+## Anything else
+
+Write an adapter for your UI kit, or replace a few components of the HTML adapter. See [UI adapters](./advanced-usage/adapters).
 
-| Prop | Type | Default | Description |
+# FormsProvider
+
+`FormsProvider` is the counterpart of `config/forms.php`. Every prop is optional, and nested providers override their parent's.
+
+| Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
-| `translate` | `(text) => string` | unchanged | Translates labels and titles generated from names, like Blade's `trans()`. |
-| `messages` | `Partial<FormsMessages>` | | Overrides package strings (e.g. `requiredText`, `nothingSelected`). |
-| `settings` | `Record<string, unknown>` | `per_page: 20`, `max_upload_file_size: 10240`, `max_image_file_size: 2048` | `get_setting()` values: page size, max file sizes in KB, `default_lat` / `default_lng`. |
-| `csrfToken` | `string \| null` | `<meta name="csrf-token">` | Token for `_token` fields and uploads. |
-| `old` | `object` | | Old input for every form, e.g. an Inertia shared prop. A form's `old` prop wins. |
-| `authorize` | `(ability, arg, guard) => boolean` | | Resolves `can` props (`ConditionalLink`, `NoItems`). Without it, `can` checks fail. |
+| `ui` | `FormsAdapter` | HTML | The UI adapter |
+| `components` | `Partial<FormsComponents>` | | Replaces single components: `{ Select: MySelect }` |
+| `router` | `FormsRouter \| null` | native submit | How forms without `onSubmit` submit: `inertia`, `fetchRouter` or your own |
+| `translate` | `(text) => string` | `__()` | Translates generated labels and titles |
+| `csrfToken` | `string \| null` | `<meta name="csrf-token">` | The `_token` field of non-GET forms |
+| `old` | `object \| null` | | Old input for every form |
+| `errors` | `PageErrors \| null` | | Validation errors for every form, flat or by error bag |
+| `authorize` | `(ability, argument?, guard?) => boolean` | fail closed | Resolves the `can` props of `ConditionalLink` and `NoItems` |
+| `settings` | `Record<string, unknown>` | `per_page: 20`, `max_upload_file_size: 10240`, `max_image_file_size: 2048` | `get_setting()` values: upload limits (KB), `per_page`, `default_lat`, `default_lng` |
 
-The package strings follow Onu's locale. English and Dhivehi are built in.
+# Laravel apps
 
-## Importing
+## Blade layout with Inertia
 
-A namespace import reads like Blade's `x-forms::` prefix and avoids clashes with the globals `Date`, `Number`, `File` and `Image`:
+```blade
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'dv' ? 'rtl' : 'ltr' }}">
+<head>
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    @viteReactRefresh
+    @vite(['resources/css/app.css', 'resources/js/app.tsx'])
+    @inertiaHead
+</head>
+```
+
+## Inertia setup
 
 ```tsx
-import * as Forms from "@javaabu/forms"
+// resources/js/app.tsx
+import { createInertiaApp } from "@inertiajs/react"
+import { createRoot } from "react-dom/client"
+import { FormsProvider, mergeAdapters } from "@javaabu/forms"
+import { inertia, inertiaLinks } from "@javaabu/forms/inertia"
+import { onu } from "@javaabu/forms/onu"
+
+const ui = mergeAdapters(onu, inertiaLinks)
 
-<Forms.Date name="published_at" />
+createInertiaApp({
+  resolve: (name) => import(`./pages/${name}.tsx`),
+  setup({ el, App, props }) {
+    createRoot(el).render(
+      <FormsProvider ui={ui} router={inertia}>
+        <App {...props} />
+      </FormsProvider>,
+    )
+  },
+})
 ```
 
-The rich text editor and the map input have their own entries, so their heavy dependencies only load when you use them:
+Errors come from the page props by themselves. See [Inertia](./advanced-usage/inertia) for `useForm()`, error bags and visit options.
+
+## Sharing settings, permissions and old input
+
+```php
+// app/Http/Middleware/HandleInertiaRequests.php
+public function share(Request $request): array
+{
+    return [
+        ...parent::share($request),
+        'forms' => [
+            'settings' => [
+                'per_page' => get_setting('per_page'),
+                'max_upload_file_size' => get_setting('max_upload_file_size'),
+            ],
+            'can' => [
+                'create_users' => $request->user()?->can('create', User::class),
+            ],
+        ],
+        'old' => fn () => $request->session()->getOldInput(),
+    ];
+}
+```
 
 ```tsx
-import { Wysiwyg } from "@javaabu/forms/editor"
-import { MapInput } from "@javaabu/forms/maps"
+const { forms } = usePage().props
+
+<FormsProvider settings={forms.settings} authorize={(ability) => !!forms.can[ability]}>
+```
+
+The Inertia router reads the `old` prop itself. Without Inertia, pass `old` and `errors` to `FormsProvider` from wherever your page gets them.
+
+# Translations
+
+Strings come from [`@javaabu/i18n`](https://github.com/Javaabu/i18n) and follow `<html lang>`. English and Dhivehi are built in, and you change them in `lang/vendor/forms/{locale}/strings.php`. See [Translations](./basic-usage/translations).
+
+# Examples
+
+The repository has a page per adapter in `examples/` (Onu, shadcn/ui and plain HTML), each with a Dhivehi version (`?dv`):
+
+```bash
+git clone https://github.com/Javaabu/react-forms && cd react-forms
+pnpm install && pnpm examples
 ```
diff --git a/docs/intro.md b/docs/intro.md
new file mode 100644
index 0000000..ae372a2
--- /dev/null
+++ b/docs/intro.md
@@ -0,0 +1,36 @@
+---
+title: Introduction
+sidebar_position: 1.0
+---
+
+# Forms
+
+[`@javaabu/forms`](https://github.com/Javaabu/react-forms) is the React version of [javaabu/forms](https://github.com/Javaabu/forms), the Laravel Blade form components. The components, attributes, model binding, old input and validation errors are the same, so a form looks and behaves the same in a Blade view and an Inertia React page.
+
+```blade
+<x-forms::form :model="$user" method="PATCH" :action="route('users.update', $user)">
+    <x-forms::text name="name" required />
+    <x-forms::select2 name="country" :options="$countries" relation />
+    <x-forms::submit>Save</x-forms::submit>
+</x-forms::form>
+```
+
+```tsx
+import { Form, Select2, Submit, Text } from "@javaabu/forms"
+import { update } from "@/actions/App/Http/Controllers/UsersController"
+
+<Form model={user} action={update}>
+  <Text name="name" required />
+  <Select2 name="country" options={countries} relation />
+  <Submit>Save</Submit>
+</Form>
+```
+
+- **The Blade API in React.** The same component names, attributes as camelCase props, and named slots as props. Ids and labels are generated from names (`address[city]` becomes `address-city` and "Address City").
+- **Laravel built in.** Model binding, old input, `_method` spoofing, CSRF tokens, `sync_` fields for multi-selects, relations, and validation errors under the right field. That includes error bags and array keys like `items.0.name`.
+- **Any UI framework.** The components render through an adapter: [Onu](https://github.com/Javaabu/onu), [shadcn/ui](./advanced-usage/shadcn), plain HTML, or [your own](./advanced-usage/adapters). Replace a single component for the whole app or for one form.
+- **Inertia and Wayfinder.** Forms submit as [Inertia](./advanced-usage/inertia) visits or through `useForm()`, without glue code, and take [Wayfinder](./advanced-usage/wayfinder) routes as their `action`. They also work without either: natively, or with fetch.
+- **Dhivehi and RTL.** English and Dhivehi strings through [@javaabu/i18n](https://github.com/Javaabu/i18n), right-to-left layout, and Thaana typing on free-text fields.
+- **Accessible.** Labels are tied to their controls, errors are announced and linked with `aria-describedby`, and the first invalid field is focused when errors arrive.
+
+New here? Start with [Installation and setup](./installation-and-setup). Coming from Blade? Read [Migrating from Blade](./migrating-from-blade). Using an AI coding assistant? See [AI assistants](./ai-assistants).
diff --git a/docs/metadata.json b/docs/metadata.json
new file mode 100644
index 0000000..6827a4a
--- /dev/null
+++ b/docs/metadata.json
@@ -0,0 +1,5 @@
+{
+  "name": "forms",
+  "description": "React version of the javaabu/forms Blade components, with adapters for Onu, shadcn/ui or any UI framework, and Inertia and Wayfinder support",
+  "version": "1"
+}
diff --git a/docs/migrating-from-blade.md b/docs/migrating-from-blade.md
index 04f39db..98f8859 100644
--- a/docs/migrating-from-blade.md
+++ b/docs/migrating-from-blade.md
@@ -7,57 +7,64 @@ Attributes become camelCase props (`show-label` → `showLabel`, `:options="$x"`
 
 ## Components
 
-| Blade | React | Built on (Onu) |
-| --- | --- | --- |
-| `x-forms::form` | `Form` | `Form` |
-| `@model … @endmodel` | `Model` | |
-| `x-forms::form-group`, `label`, `label-required`, `input-help`, `errors` | `FormGroup`, `Label`, `LabelRequired`, `InputHelp`, `Errors` | `FormField`, `Label`, `RequiredMarker`, `HelpText`, `FieldErrors` |
-| `x-forms::input`, `text`, `email`, `password`, `number`, `tel`, `url`, `hidden`, `latitude`, `longitude` | `Input`, `Text`, `Email`, `Password`, `Number`, `Tel`, `Url`, `Hidden`, `Latitude`, `Longitude` | `TextInput`, `EmailInput`, `PasswordInput`, `NumberInput`, `UrlInput`, `HiddenInput` |
-| `x-forms::textarea` | `Textarea` | `Textarea` |
-| `x-forms::wysiwyg`, `textarea wysiwyg` | `Wysiwyg` (`@javaabu/forms/editor`) | `WysiwygEditor` |
-| `x-forms::checkbox`, `radio` | `Checkbox`, `Radio` | `Checkbox`, native radio |
-| `x-forms::date`, `datetime`, `time` | `Date`, `Datetime`, `Time` | `DatePicker`, `DateTimePicker`, `TimePicker` |
-| `x-forms::select`, `select2` | `Select`, `Select2` | `Select`, `SearchableSelect`, `MultiSelect`, `ApiSelect`, `QuickCreateSelect` |
-| `x-forms::file`, `file-upload`, `image`, `image-upload` | `File`, `FileUpload`, `Image`, `ImageUpload` | `FileInput`, `ImageInput` |
-| `x-forms::map-input` | `MapInput` (`@javaabu/forms/maps`) | `MapPicker`, `MapRadius`, `MapPolygon` |
-| `x-forms::conditional-wrapper` | `ConditionalWrapper` | `ConditionalDisplay` |
-| `x-forms::button`, `submit`, `link-button`, `button-group` | `Button`, `Submit`, `LinkButton`, `ButtonGroup` | `Button`, `LinkButton`, `ButtonGroup` |
-| `x-forms::alert` | `Alert` | `Callout` |
-| `x-forms::card` (+ `.header`, `.title`, `.subtitle`, `.footer`) | `Card`, `CardHeader`, `CardTitle`, `CardSubtitle`, `CardFooter` | `Card` |
-| `x-forms::accordion`, `accordion.item` | `Accordion`, `AccordionItem` | `Accordion` |
-| `x-forms::tabs`, `tabs.pane`, `nav-tabs` | `Tabs`, `TabsPane`, `NavTabs` | `Tabs`, `NavTabs` |
-| `x-forms::modal` | `Modal` | `Modal` |
-| `x-forms::status` | `Status` | `StatusBadge` |
-| `x-forms::conditional-link` | `ConditionalLink` | `ConditionalLink` |
-| `x-forms::text-entry`, `boolean-entry`, `infolist` | `TextEntry`, `BooleanEntry`, `Infolist` | `DescriptionList` |
-| `x-forms::table` (+ `.row`, `.cell`, `.heading`, `.empty-row`) | `Table`, `TableRow`, `TableCell`, `TableHeading`, `TableEmptyRow` | table primitives, `Checkbox` |
-| `x-forms::bulk-actions`, `filter`, `filter-submit`, `per-page`, `search-form`, `no-items` | `BulkActions`, `Filter`, `FilterSubmit`, `PerPage`, `SearchForm`, `NoItems` | `Select`, `Button`, `ActionMenu`, `EmptyState` |
-| pagination partials | `Pagination` | `Pagination` |
+| Blade | React |
+| --- | --- |
+| `x-forms::form` | `Form` |
+| `@model … @endmodel` | `Model` |
+| `x-forms::form-group`, `label`, `label-required`, `input-help`, `errors` | `FormGroup`, `Label`, `LabelRequired`, `InputHelp`, `Errors` |
+| `x-forms::error-summary` | `ErrorSummary` |
+| `x-forms::formatted-value` | `FormattedValue` |
+| `x-forms::input`, `text`, `email`, `password`, `number`, `tel`, `url`, `hidden`, `latitude`, `longitude` | `Input`, `Text`, `Email`, `Password`, `Number`, `Tel`, `Url`, `Hidden`, `Latitude`, `Longitude` |
+| `x-forms::textarea` | `Textarea` |
+| `x-forms::wysiwyg`, `textarea wysiwyg` | `Wysiwyg`, `Textarea wysiwyg` |
+| `x-forms::checkbox`, `radio` | `Checkbox`, `Radio` |
+| `x-forms::date`, `datetime`, `time` | `Date`, `Datetime`, `Time` |
+| `x-forms::select`, `select2` | `Select`, `Select2` |
+| `x-forms::file`, `file-upload`, `image`, `image-upload` | `File`, `FileUpload`, `Image`, `ImageUpload` |
+| `x-forms::map-input` | `MapInput` |
+| `x-forms::conditional-wrapper` | `ConditionalWrapper` |
+| `x-forms::button`, `submit`, `link-button`, `button-group` | `Button`, `Submit`, `LinkButton`, `ButtonGroup` |
+| `x-forms::alert` | `Alert` |
+| `x-forms::card` (+ `.header`, `.title`, `.subtitle`, `.footer`) | `Card`, `CardHeader`, `CardTitle`, `CardSubtitle`, `CardFooter` |
+| `x-forms::accordion`, `accordion.item` | `Accordion`, `AccordionItem` |
+| `x-forms::tabs`, `tabs.pane`, `nav-tabs` | `Tabs`, `TabsPane`, `NavTabs` |
+| `x-forms::modal` | `Modal` |
+| `x-forms::status` | `Status` |
+| `x-forms::conditional-link` | `ConditionalLink` |
+| `x-forms::text-entry`, `boolean-entry`, `infolist` | `TextEntry`, `BooleanEntry`, `Infolist` |
+| `x-forms::table` (+ `.row`, `.cell`, `.heading`, `.empty-row`) | `Table`, `TableRow`, `TableCell`, `TableHeading`, `TableEmptyRow` |
+| `x-forms::bulk-actions`, `filter`, `filter-submit`, `per-page`, `search-form`, `no-items` | `BulkActions`, `Filter`, `FilterSubmit`, `PerPage`, `SearchForm`, `NoItems` |
+| pagination partials | `Pagination` |
 
 ## Laravel-side values in React
 
 | Blade | React |
 | --- | --- |
 | `old()` | `Form old={…}` or `FormsProvider old={…}` (e.g. an Inertia shared prop of `session()->getOldInput()`) |
-| `$errors` | `Form errors={…}` (Inertia's `errors`), or a 422 thrown from `onSubmit` |
+| `$errors` | Automatic with the Inertia router (page props, `errorBag`); otherwise `Form errors`, `FormsProvider errors`, or a 422 from `onSubmit` / `fetchRouter` |
 | `@csrf` | added for you from `FormsProvider csrfToken` or the `csrf-token` meta tag |
 | `get_setting()` | `FormsProvider settings` |
 | `can` / `@can` | `FormsProvider authorize` |
-| `trans()` on generated labels | `FormsProvider translate` |
-| `route()` | build URLs yourself (e.g. Ziggy's `route()`) and pass `action` / `url` |
+| `trans()` on generated labels | `__()` from `@javaabu/i18n`, or `FormsProvider translate` |
+| `route()` | Wayfinder routes as `Form action` (`store()`, `update.form(user)`, or `update` with the model), or any URL |
 | Eloquent models | their JSON: plain objects. Relations: `country_id` or loaded `tags`; media: spatie `Media` JSON in `media` |
 
 ## Differences
 
-- **No `framework` prop.** Onu replaces the Bootstrap 5 and Material Admin 2.6 views, so the framework settings (`inline-label-class` defaults, icon classes) don't apply. `inlineLabelClass` / `inlineInputClass` still take classes.
-- **No `floating` labels.** Onu has no floating-label layout, and a label shown as a placeholder fails WCAG 2.2. Use the default or `inline` layout.
+- **`framework` is the adapter.** Blade's `framework` setting (Bootstrap, Material Admin, Onu) is React's `FormsProvider ui` (Onu, shadcn/ui, plain HTML, or your own). See [UI adapters](./advanced-usage/adapters).
+- **No `floating` labels.** A label shown as a placeholder fails WCAG 2.2, and Onu has none. Use the default or `inline` layout.
 - **`showLabel={false}` hides the label visually** but keeps it as the accessible name. The field still shows help and errors.
-- **No `show-js-errors` / `JsErrors`.** Client-side errors from `Form`'s `onSubmit` (or `useOnuForm().setErrors`) appear under the fields themselves.
-- **`Select2`**: `isFirst` and `parentModal` aren't needed. The cascade reacts to the parent, and Onu's popovers sit above modals. `isIconSelect` is not supported. A child can name its parent with `parent="country"` instead of the parent's `child="#state"`. Both work.
+- **No `show-js-errors` / `JsErrors`.** Errors from a client-side submit appear under the fields themselves.
+- **`Select2`**: `isFirst`, `isIconSelect`, `iconPrefix` and `parentModal` aren't supported or needed. A child can name its parent with `parent="country"` instead of the parent's `child="#state"`; both work.
+- **Multiple selects always submit `name[]`**, even when the name has no `[]`, so Laravel gets an array.
 - **List options** (`['a', 'b']`) keep PHP's meaning: the values are `0` and `1`, as when Laravel sends a PHP list as JSON. Use `{ a: "A" }`, pairs or `{ value, label }` objects for other values. JS objects sort integer keys, so pass ordered pairs (`[[10, "10"], [5, "5"]]`) when the order matters.
-- **Radios** are selected when the bound value equals their `value`. Blade checks every radio of a group for a truthy scalar, so the last one wins.
+- **Radios** are selected when the bound value equals their `value`. Blade v1 checked every radio of a group for a truthy scalar, so the last one won.
 - **Grouped checkboxes** (`name="channels[]"`) get unique ids (`channels-email`) without an explicit `id`.
-- **Dates** are submitted as `yyyy-MM-dd`, `yyyy-MM-ddTHH:mm:ss` and `HH:mm`; `dateFormat`, `icon`, `clearIcon` and `clearBtnClass` are replaced by Onu's picker (`format` is the date-fns display format).
-- **`Tabs` with `url`** navigate with `window.location`. For router links use `NavTabs` with `OnuProvider linkComponent`.
+- **Dates** are submitted as `yyyy-MM-dd`, `yyyy-MM-dd HH:mm:ss` and `HH:mm`. The picker comes from the adapter, so `dateFormat`, `icon`, `clearIcon` and `clearBtnClass` don't apply.
+- **Passwords** never take a `default`: they are never pre-filled.
+- **`Tabs` with `url`** navigate with `window.location`. For router links use `NavTabs` with the `inertiaLinks` adapter.
 - **Text entries** render enums serialized as `{ value, label }` (with `color`, a status badge), booleans as Yes / No, arrays as lists. HTML in `admin_link` is not rendered; pass children instead.
-- **`Wysiwyg`** uses Onu's Tiptap editor, not TinyMCE. It still submits HTML.
+- **`Wysiwyg`** uses the adapter's editor (Onu: Tiptap via `@javaabu/forms/onu/editor`), not TinyMCE. It still submits HTML.
+- **`Form summary`** defaults to `false`, as in Blade. A failed client-side submit (not a validation error) always shows its message at the top.
+
+Every component and attribute, with its Blade counterpart, is in [Parity with javaabu/forms](./parity).
diff --git a/docs/parity.md b/docs/parity.md
index 7747999..f3972f9 100644
--- a/docs/parity.md
+++ b/docs/parity.md
@@ -1,6 +1,6 @@
 ---
 title: Parity with javaabu/forms
-sidebar_position: 90
+sidebar_position: 1.6
 ---
 
 `@javaabu/forms` (React) and [`javaabu/forms`](https://github.com/Javaabu/forms) v2 (Blade) have the same components, attributes, value precedence, ids, labels, errors and strings, so a form moves between a Blade view and an Inertia React page without being redesigned. This page is the React side of the matrix. The Blade side is [`docs/parity.md` in javaabu/forms](https://github.com/Javaabu/forms/blob/next-gen/docs/parity.md). Open questions go in [react-forms#18](https://github.com/Javaabu/react-forms/issues/18).
diff --git a/docs/questions-and-security.md b/docs/questions-and-security.md
new file mode 100644
index 0000000..494f557
--- /dev/null
+++ b/docs/questions-and-security.md
@@ -0,0 +1,8 @@
+---
+title: Questions and Security
+sidebar_position: 1.7
+---
+
+Find yourself stuck using the package? Found a bug? Do you have general questions or suggestions for improving the health of the library? Feel free to create an issue on [GitHub](https://github.com/Javaabu/react-forms/issues), we'll try to address it as soon as possible.
+
+If you've found a bug regarding security please mail info@javaabu.com instead of using the issue tracker.
diff --git a/docs/requirements.md b/docs/requirements.md
new file mode 100644
index 0000000..83f0f23
--- /dev/null
+++ b/docs/requirements.md
@@ -0,0 +1,22 @@
+---
+title: Requirements
+sidebar_position: 1.1
+---
+
+- React 18.3 or 19
+- [`@javaabu/i18n`](https://github.com/Javaabu/i18n), installed with the package
+- A bundler that reads `package.json` `exports` (Vite, webpack 5, Rspack, Next.js)
+
+Everything else is optional, and only needed for the entry point that uses it:
+
+| You use | Install |
+| --- | --- |
+| `@javaabu/forms/onu` | `@javaabu/onu` 0.2.1 or later, and Tailwind CSS v4 |
+| `@javaabu/forms/onu/editor` | Onu's editor peers: `@tiptap/react`, `@tiptap/pm`, `@tiptap/starter-kit` and the extensions Onu lists |
+| `@javaabu/forms/onu/maps` | Onu's map peers (`@vis.gl/react-google-maps`, `terra-draw`, …) |
+| `@javaabu/forms/shadcn` | Your app's shadcn/ui components |
+| `@javaabu/forms/inertia` | `@inertiajs/react` 2 or 3 |
+| Wayfinder routes | [Laravel Wayfinder](https://github.com/laravel/wayfinder). Nothing to install in JavaScript |
+| `@javaabu/forms/testing` | `@testing-library/react` 16, and jsdom or happy-dom |
+
+On the Laravel side nothing is required. The [Laravel apps section](./installation-and-setup#laravel-apps) shows how to share CSRF tokens, old input and errors.
diff --git a/docs/upgrading.md b/docs/upgrading.md
new file mode 100644
index 0000000..f26ba46
--- /dev/null
+++ b/docs/upgrading.md
@@ -0,0 +1,71 @@
+---
+title: Upgrading from @javaabu/react-forms
+sidebar_position: 1.55
+---
+
+`@javaabu/forms` 1.0 replaces `@javaabu/react-forms` 0.x. The components and their props are the same; what changed is the package name, how the UI is chosen, strings, and a few defaults.
+
+# 1. Change the package
+
+```bash
+npm uninstall @javaabu/react-forms
+npm install @javaabu/forms
+```
+
+Replace the imports: `@javaabu/react-forms` → `@javaabu/forms`, and update the Tailwind source line in your CSS to `@import "@javaabu/forms/tailwind.css";`.
+
+# 2. Choose the Onu adapter
+
+0.x always rendered with Onu. 1.0 renders plain HTML unless you pass an adapter, so add it to your `FormsProvider` (or add a provider, which 0.x didn't require):
+
+```tsx
+import { FormsProvider, mergeAdapters } from "@javaabu/forms"
+import { onu } from "@javaabu/forms/onu"
+import { onuEditor } from "@javaabu/forms/onu/editor"
+import { onuMaps } from "@javaabu/forms/onu/maps"
+
+const ui = mergeAdapters(onu, onuEditor, onuMaps) // editor and maps only if you use them
+
+<FormsProvider ui={ui}>…</FormsProvider>
+```
+
+Onu 0.2.1 or later is needed.
+
+# 3. Wysiwyg and MapInput imports
+
+```diff
+- import { Wysiwyg } from "@javaabu/react-forms/editor"
+- import { MapInput } from "@javaabu/react-forms/maps"
++ import { Wysiwyg, MapInput } from "@javaabu/forms"
+```
+
+The editor and maps themselves come from `onuEditor` and `onuMaps` (step 2).
+
+# 4. Strings
+
+- Strings come from `@javaabu/i18n` and follow `<html lang>` and `setLocale()`, not `OnuProvider locale`. Keep both in step if you switch languages at runtime (see [Translations](./basic-usage/translations)).
+- `FormsProvider messages` is gone. Change lines in `lang/vendor/forms/{locale}/strings.php`, or with `addLines({ "strings.nothing_selected": "…" }, "dv", "forms")`.
+- `useFormsTranslation().t()` keys are snake_case, as in Blade: `t("nothingSelected")` → `t("nothing_selected")`.
+- Generated labels go through `__()`, so JSON lines (`lang/dv.json`) translate them. `FormsProvider translate` still overrides that.
+
+# 5. Forms
+
+- **`summary` defaults to `false`**, as in Blade. Add `summary` to forms that should list every error at the top.
+- **`form` is Inertia's `useForm()`.** 0.x passed `form` (react-hook-form) through to Onu's form. With react-hook-form, submit with `onSubmit` instead.
+- `useOnuForm()` → `useFormStatus()` (processing, status, progress, errors) or `useFormState()` (also `setErrors`).
+- Errors from Inertia page props are automatic with `router={inertia}` (see [Inertia](./advanced-usage/inertia)).
+- `action` also takes Wayfinder routes.
+
+# 6. Props that changed
+
+| Component | 0.x | 1.0 |
+| --- | --- | --- |
+| `Date`, `Datetime`, `Time` | Onu picker props, `onChange(date)` | `value`, `onChange(value, date)`, `min`, `max`, `placeholder`, `className` |
+| `File` | Onu `FileInput` props | `multiple`, `onChange(files)`, `className`, `fileInputClass` |
+| `Image` | Onu `ImageInput` props | the documented props, `onChange(file)` |
+| `Number` | Onu `NumberInput` props (`formatOptions`) | `min`, `max`, `step`, `decimals`, `onValueChange` |
+| `Button`, `LinkButton` | `variant` (Onu) | `color` (Blade colours) and `size`, `startIcon`, `endIcon`, `loading` |
+| `Alert`, `Card`, `Modal`, `Tabs`, `NavTabs`, `Status`, `NoItems`, `Pagination` | Onu props passed through | the documented props only |
+| `colorToVariant` | from the main entry | from `@javaabu/forms/onu` |
+
+If you need an Onu prop the components don't pass, replace that slot with your own component: `<FormsProvider components={{ Date: MyDatePicker }}>`. See [UI adapters](./advanced-usage/adapters).
diff --git a/llms.txt b/llms.txt
new file mode 100644
index 0000000..8f14591
--- /dev/null
+++ b/llms.txt
@@ -0,0 +1,55 @@
+# @javaabu/forms
+
+> The React version of the javaabu/forms Laravel Blade components: the same components and attributes, model binding, old input, Laravel validation errors, Inertia and Wayfinder support, English and Dhivehi strings, and RTL. Components render through a UI adapter: Onu, shadcn/ui, plain HTML, or your own.
+
+Paths are relative to this file. In a project, that's node_modules/@javaabu/forms/.
+
+## Rules
+
+- Import components from `@javaabu/forms`. Set the UI adapter once, at the root: `<FormsProvider ui={onu}>` (`onu` from `@javaabu/forms/onu`), `createShadcnAdapter({...})` from `@javaabu/forms/shadcn`, or nothing for plain HTML.
+- Use the Blade component names and attributes: `<x-forms::select2 name="country" relation />` is `<Select2 name="country" relation />`. Attributes are camelCase props, named slots are props (`help`, `prepend`), the default slot is `children`.
+- Let names do the work. Don't pass `id` or `label` unless they differ from what the name gives (`address[city]` → id `address-city`, label "Address City", translated with `__()`).
+- Bind data with `<Form model={user}>` (or `<Model>`), not `value`. Values come from old input, then the model, then `default`. Pass `value` only for a controlled field, with its change handler.
+- Use bracket names for nested and array fields, as in Blade: `address[city]`, `items[0][name]`, `channels[]` for checkbox groups, `tags[]` (or `multiple`) for multi-selects.
+- Don't render validation errors yourself. Fields show their own errors, from Inertia page props, `useForm()`, a 422 response, `Form errors` or `FormsProvider errors`. Use `errorBag` for named bags and `<Errors name>` or `<ErrorSummary>` only for extra placements.
+- With Inertia, set `router={inertia}` (from `@javaabu/forms/inertia`) on the root `FormsProvider`, then use plain forms: `<Form model={user} action={update}>`. Or pass `useForm()` to `<Form form={form}>`. Don't wire `onSubmit`, `errors` or `processing` by hand for Inertia.
+- Use Wayfinder routes as `action`: `action={store()}`, or the route function itself, `action={update}`, which is called with the form's `model`. The method comes from the route; `PUT`/`PATCH`/`DELETE` are spoofed with `_method`.
+- File inputs need `<Form files>`. Don't nest forms.
+- Add `thaana` to free-text fields that take Dhivehi. Never hard-code user-facing English: use `__()` from `@javaabu/i18n` for your labels. Package strings are `forms::strings.*`, changed in `lang/vendor/forms/{locale}/strings.php`.
+- Use logical CSS (`ms-`, `pe-`, `start-`, `text-start`), never `left`/`right`, so pages work in RTL.
+- To change how one component looks, replace its slot (`<FormsProvider components={{ Select: MySelect }}>`) instead of wrapping or forking the component. To support a new UI kit, write an adapter and run `testAdapter()` from `@javaabu/forms/testing`.
+
+## Docs
+
+- [Introduction](docs/intro.md): what the package does
+- [Requirements](docs/requirements.md): versions and optional peers
+- [Installation and setup](docs/installation-and-setup.md): installing, adapters, FormsProvider, Laravel and Inertia setup
+- [Forms and buttons](docs/basic-usage/forms-and-buttons.md): Form, method spoofing, CSRF, submit modes, buttons
+- [Model binding](docs/basic-usage/model-binding.md): value precedence, Model, old input, checkboxes, selects, dates
+- [Inputs and textarea](docs/basic-usage/inputs-and-textarea.md): Text, Email, Password, Number, Tel, Url, Hidden, Textarea, shared field props
+- [Checkboxes and radios](docs/basic-usage/checkbox-and-radio.md): single boxes, groups, radios
+- [Selects](docs/basic-usage/select-elements.md): Select, options shapes, relations, multiple, sync fields
+- [Select2](docs/basic-usage/select2.md): search, ajax, cascading selects, fallbacks, tags
+- [Dates](docs/basic-usage/dates.md): Date, Datetime, Time and their formats
+- [Files and images](docs/basic-usage/file-inputs.md): File, FileUpload, Image, ImageUpload, media binding, upload rules
+- [WYSIWYG](docs/basic-usage/wysiwyg.md): the rich text editor
+- [Map input](docs/basic-usage/map-input.md): points, radius, polygons
+- [Conditional wrapper](docs/basic-usage/conditional-wrapper.md): enabling and showing sections from another field
+- [Display](docs/basic-usage/display.md): Alert, Card, Accordion, Tabs, Modal, Status, text entries, Infolist
+- [Listing pages](docs/basic-usage/listing.md): Table, bulk actions, filters, per page, search, no items, pagination
+- [Validation errors](docs/basic-usage/errors.md): sources, keys, bags, the summary, accessibility
+- [Translations](docs/basic-usage/translations.md): @javaabu/i18n, overriding lines, generated labels, every key
+- [UI adapters](docs/advanced-usage/adapters.md): choosing, replacing components, writing and testing an adapter, every slot
+- [shadcn/ui](docs/advanced-usage/shadcn.md): createShadcnAdapter and the components it needs
+- [Inertia](docs/advanced-usage/inertia.md): the Inertia router, useForm(), links, fetchRouter, custom routers
+- [Laravel Wayfinder](docs/advanced-usage/wayfinder.md): routes as Form action
+- [Dhivehi and RTL](docs/advanced-usage/dhivehi-and-rtl.md): direction, Thaana typing, fonts, lines to review
+- [API reference](docs/api-reference.md): entry points, components, hooks, helpers, types
+- [Migrating from Blade](docs/migrating-from-blade.md): component mapping, Laravel values in React, differences
+- [Upgrading from @javaabu/react-forms](docs/upgrading.md): 0.x to 1.0
+- [Parity with javaabu/forms](docs/parity.md): every component and attribute against Blade v2
+- [AI assistants](docs/ai-assistants.md): Laravel Boost and other assistants
+- [Questions and Security](docs/questions-and-security.md): where to get help
+- [Changelog](docs/changelog.md): where changes are listed
+- [About Us](docs/about-us.md): Javaabu
+- [Contributing to the docs](docs/contributing-to-docs.md): how the docs are built
diff --git a/resources/boost/guidelines/core.blade.php b/resources/boost/guidelines/core.blade.php
new file mode 100644
index 0000000..d340580
--- /dev/null
+++ b/resources/boost/guidelines/core.blade.php
@@ -0,0 +1,10 @@
+{{--
+    @javaabu/forms guidelines for AI code assistants
+
+    Maintained by: Javaabu (https://javaabu.com)
+--}}
+
+## @javaabu/forms
+
+- This project builds React forms with `@javaabu/forms`, the React version of the javaabu/forms Blade components: the same component names and attributes (camelCase), model binding, old input and Laravel validation errors. Don't hand-roll form fields, error lists or `_method` / `_token` inputs, and don't add react-hook-form or another form library for Laravel forms.
+- Always activate the `javaabu-react-forms` skill when writing or changing a React form, a listing page or an Inertia page with fields.
diff --git a/resources/boost/skills/javaabu-react-forms/SKILL.md b/resources/boost/skills/javaabu-react-forms/SKILL.md
new file mode 100644
index 0000000..c18a0b7
--- /dev/null
+++ b/resources/boost/skills/javaabu-react-forms/SKILL.md
@@ -0,0 +1,110 @@
+---
+name: javaabu-react-forms
+description: Build React forms, listing pages and record views with @javaabu/forms, the React version of the javaabu/forms Blade components, with model binding, old input, Laravel validation errors, Inertia and Wayfinder support, Dhivehi and RTL. Use whenever the project depends on @javaabu/forms and the task adds or changes a form, a field, a filter or table on a listing page, an Inertia page that submits data, or moves a Blade form (`<x-forms::…>`) to React.
+license: MIT
+metadata:
+  author: Javaabu
+---
+
+# Building forms with @javaabu/forms
+
+The components are javaabu/forms' Blade components in React. If you know `<x-forms::text name="title" required />`, you know `<Text name="title" required />`. The docs ship with the package: `node_modules/@javaabu/forms/llms.txt` lists every page in `node_modules/@javaabu/forms/docs/`.
+
+## Setup is done once
+
+The root of the app has a `FormsProvider` with the UI adapter, and, with Inertia, the router. Check it exists before adding forms. Don't add another in a page.
+
+```tsx
+import { FormsProvider, mergeAdapters } from "@javaabu/forms"
+import { inertia, inertiaLinks } from "@javaabu/forms/inertia"
+import { onu } from "@javaabu/forms/onu"
+
+const ui = mergeAdapters(onu, inertiaLinks)
+
+<FormsProvider ui={ui} router={inertia}>
+  <App {...props} />
+</FormsProvider>
+```
+
+## A typical create / edit page
+
+```php
+// app/Http/Controllers/ProductsController.php (Illuminate\Http\RedirectResponse, Inertia\Response)
+public function edit(Product $product): Response
+{
+    $this->authorize('update', $product);
+
+    return Inertia::render('products/edit', [
+        'product' => $product->load('category', 'tags'),
+        'categories' => Category::query()->pluck('name', 'id'),
+        'tags' => Tag::query()->pluck('name', 'id'),
+    ]);
+}
+
+public function update(ProductsRequest $request, Product $product): RedirectResponse
+{
+    $this->authorize('update', $product);
+
+    $product->fill($request->validated());
+    $product->category()->associate($request->input('category'));
+    $product->save();
+
+    if ($request->has('sync_tags')) {
+        $product->tags()->sync($request->input('tags', []));
+    }
+
+    return to_route('products.edit', $product);
+}
+```
+
+```tsx
+import { __ } from "@javaabu/i18n"
+import { Card, Checkbox, Form, Number, Select2, Submit, Text, Textarea } from "@javaabu/forms"
+import { update } from "@/actions/App/Http/Controllers/ProductsController"
+
+export default function Edit({ product, categories, tags }) {
+  return (
+    <Card title={__("Edit product")}>
+      <Form model={product} action={update} files>
+        <Text name="name" required />
+        <Text name="name_dv" label={__("Name in Dhivehi")} thaana />
+        <Textarea name="description" thaana />
+        <Number name="price" decimals={2} prepend="MVR" />
+        <Select2 name="category" options={categories} relation required />
+        <Select2 name="tags" options={tags} relation multiple />
+        <Checkbox name="is_published" />
+        <Submit>{__("Save")}</Submit>
+      </Form>
+    </Card>
+  )
+}
+```
+
+What this gets you, with no extra code: values from `product`, ids and translated labels from the names, the `PUT` sent as `POST` with `_method`, `_token`, `sync_tags`, errors under each field from the Inertia response, the first invalid field focused, and a spinner on the submit button.
+
+## Rules
+
+- Use the Blade names: `Text`, `Email`, `Select2`, `FileUpload`, `TextEntry`, `Table`, … Blade attributes become camelCase props (`show-label` → `showLabel`), named slots become props (`help`, `prepend`, `append`), the default slot is `children`.
+- Don't pass `id` or `label` that the name already gives. `company_name` → "Company Name" (translated with `__()`), `address[city]` → id `address-city`.
+- Bind with `<Form model={…}>` or `<Model>`. Don't copy model values into `value` props. Precedence is old input → model → `default` (selects: old input → `default` → model).
+- Name nested and array fields as in Blade: `address[city]`, `items[0][name]`, `channels[]` for checkbox groups. Multi-selects submit `name[]` and `sync_<name>`.
+- Never render validation errors by hand, never add hidden `_method` / `_token` inputs, and never write `onSubmit` + `router.post` for an ordinary Inertia form. Use `errorBag` when the controller uses `validateWithBag`.
+- `action` takes Wayfinder routes (`store()`), or the route function (`update`), which is called with the form's `model`. Without Wayfinder, a URL string.
+- Use `useForm()` only when the page needs the data in code, and then pass it: `<Form form={form} action={store()}>`.
+- Add `thaana` to free-text fields that take Dhivehi. Labels you write go through `__()` from `@javaabu/i18n`; add the Dhivehi line to `lang/dv.json`.
+- Logical CSS only (`ms-`, `pe-`, `start-`, `text-start`).
+- To change one component's look, replace its slot: `<FormsProvider components={{ Select: MySelect }}>`. Don't wrap or copy the component.
+
+## Things that differ from what you might assume
+
+- `summary` is off by default, as in Blade: errors show under their fields. Add `<Form summary>` for a list at the top.
+- `Form` disables its fields while processing and focuses the first invalid field when errors arrive (`focusOnError={false}` turns that off).
+- Radios are selected when the bound value equals their `value`. Checkboxes follow only old input once there is any (an unchecked box isn't submitted).
+- `List` options (`["a", "b"]`) mean values `0` and `1`, as a PHP list. Use `{ a: "A" }` or `[[10, "Ten"]]` pairs for other values.
+- Without an adapter the components render plain HTML. If the page looks unstyled, the `FormsProvider ui` is missing.
+
+## References
+
+- [Components and props](references/components.md): every component with its props and Blade counterpart
+- [Listing pages](references/listing.md): tables, filters, bulk actions, pagination
+- [Adapters](references/adapters.md): replacing slots, shadcn/ui, writing an adapter
diff --git a/resources/boost/skills/javaabu-react-forms/references/adapters.md b/resources/boost/skills/javaabu-react-forms/references/adapters.md
new file mode 100644
index 0000000..2e680ce
--- /dev/null
+++ b/resources/boost/skills/javaabu-react-forms/references/adapters.md
@@ -0,0 +1,24 @@
+# Adapters
+
+Components render through the slots of the `FormsProvider ui` adapter. Missing slots render plain HTML.
+
+- Onu: `onu` from `@javaabu/forms/onu`, plus `onuEditor` (`/onu/editor`) and `onuMaps` (`/onu/maps`), combined with `mergeAdapters()`.
+- shadcn/ui: `createShadcnAdapter({ Button, Input, Label, … })` from `@javaabu/forms/shadcn` with the app's own `@/components/ui/*` components. Searchable and multiple selects need `Popover` and `Command`.
+- Inertia links: `inertiaLinks` from `@javaabu/forms/inertia`, merged into the adapter.
+
+Replace a slot for the app, part of the page or one form:
+
+```tsx
+import type { SelectSlotProps } from "@javaabu/forms"
+
+function CountrySelect({ options, value, onValueChange, name, multiple, ...props }: SelectSlotProps) {
+  // Render `value`, report changes with onValueChange, and keep `name` in the form's FormData.
+}
+
+<FormsProvider components={{ Select: CountrySelect }}>…</FormsProvider>
+<Form components={{ Select: CountrySelect }}>…</Form>
+```
+
+Slot rules: controlled values (`value` + `onValueChange`, or spread the native props of `Input` / `Textarea`); a named control must submit natively (a native or hidden input); `id`, `aria-invalid` and `aria-describedby` go on the focusable element; the `Field` label already contains the required marker; logical CSS only.
+
+Test an adapter with `testAdapter(myAdapter)` from `@javaabu/forms/testing` (Vitest or Jest, jsdom, `@testing-library/react`). Every slot's props type is exported as `…SlotProps`.
diff --git a/resources/boost/skills/javaabu-react-forms/references/components.md b/resources/boost/skills/javaabu-react-forms/references/components.md
new file mode 100644
index 0000000..ddb4fa7
--- /dev/null
+++ b/resources/boost/skills/javaabu-react-forms/references/components.md
@@ -0,0 +1,31 @@
+# Components and props
+
+Every field takes: `name`, `label`, `id`, `model` (`false` ignores the bound model), `default`, `required`, `disabled`, `showLabel`, `showErrors`, `inline`, `inlineLabelClass`, `inlineInputClass`, `formGroupClass`, `help`. Text-like fields also take `placeholder`, `showPlaceholder`, `prepend`, `append`, `thaana`, `thaanaToggle`. Controlled use: `value` with `onChange` (inputs), `onValueChange` (number, select) or `onCheckedChange` (checkbox, radio).
+
+| Blade                                                          | React                                                       | Key props                                                                                                                                                     |
+| -------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `form`                                                         | `Form`                                                      | `model`, `action` (URL or Wayfinder), `method`, `files`, `errorBag`, `summary`, `form` (useForm), `onSubmit`, `onSuccess`, `preserveScroll`, `resetOnSuccess` |
+| `@model`                                                       | `Model`                                                     | `model`                                                                                                                                                       |
+| `text`, `email`, `password`, `url`, `tel`                      | `Text`, `Email`, `Password`, `Url`, `Tel`                   | `Url` adds `https://`; `Password` is never pre-filled                                                                                                         |
+| `input`                                                        | `Input`                                                     | `type`                                                                                                                                                        |
+| `number`, `latitude`, `longitude`                              | `Number`, `Latitude`, `Longitude`                           | `min`, `max`, `step`, `decimals`                                                                                                                              |
+| `hidden`                                                       | `Hidden`                                                    | `value` (an array submits `name[]` per item)                                                                                                                  |
+| `textarea`                                                     | `Textarea`                                                  | `rows` (3), `autoResize`, `wysiwyg`                                                                                                                           |
+| `wysiwyg`                                                      | `Wysiwyg`                                                   | submits HTML; the editor comes from the adapter (`onuEditor`)                                                                                                 |
+| `checkbox`                                                     | `Checkbox`                                                  | `value` (`1`), `children` (label beside the box), groups: `name="channels[]"`                                                                                 |
+| `radio`                                                        | `Radio`                                                     | `value`, `children`                                                                                                                                           |
+| `select`                                                       | `Select`                                                    | `options`, `relation`, `multiple`, `nameField`, `idField`, `excludeSyncField`, `syncFieldName`, `children` (`<option>`s)                                      |
+| `select2`                                                      | `Select2`                                                   | `Select`'s props, `tags`, `allowClear`, `hideSearch`, `isAjax` + `ajaxUrl`, `child` / `parent` + `filterField`, `ajaxChild`, `fallback`, `minChars`           |
+| `date`, `datetime`, `time`                                     | `Date`, `Datetime`, `Time`                                  | `min`, `max`; submit `yyyy-MM-dd`, `yyyy-MM-dd HH:mm:ss`, `HH:mm`                                                                                             |
+| `file`, `file-upload`                                          | `File`, `FileUpload`                                        | `type` (`document`, `image`, …), `mimetypes`, `maxSize` (KB), `collection`, `conversion`, `multiple`, `onUploaded`                                            |
+| `image`, `image-upload`                                        | `Image`, `ImageUpload`                                      | `width`, `height`, `circle`, `cover`, `aspectRatio`                                                                                                           |
+| `map-input`                                                    | `MapInput`                                                  | `latName`, `lngName`, `enableRadius`, `enablePolygon`, `radiusUnit`                                                                                           |
+| `conditional-wrapper`                                          | `ConditionalWrapper`                                        | `enableElem` (`#id` or name), `enableValue`, `hideFields`, `disable`, `enableCheckbox`                                                                        |
+| `form-group`, `label`, `input-help`, `errors`, `error-summary` | `FormGroup`, `Label`, `InputHelp`, `Errors`, `ErrorSummary` | `Errors name firstOnly bag`                                                                                                                                   |
+| `button`, `submit`, `link-button`, `button-group`              | `Button`, `Submit`, `LinkButton`, `ButtonGroup`             | `color` (`primary`, `danger`, `outline-secondary`, …), `size`, `startIcon`, `loading`; `LinkButton url`                                                       |
+| `alert`, `card`, `modal`, `status`                             | `Alert`, `Card`, `Modal`, `Status`                          | `Alert type heading dismissible`; `Card title subtitle footer`; `Modal title trigger size`; `Status color label`                                              |
+| `accordion`, `tabs`, `nav-tabs`                                | `Accordion`, `Tabs`, `NavTabs`                              | `Accordion id items`; `Tabs tabs active` + `TabsPane name`; `NavTabs tabs`                                                                                    |
+| `text-entry`, `boolean-entry`, `infolist`                      | `TextEntry`, `BooleanEntry`, `Infolist`                     | `name` reads the bound model; `Infolist model title`                                                                                                          |
+| `conditional-link`                                             | `ConditionalLink`                                           | `url`, `can` (with `FormsProvider authorize`), `showLink`                                                                                                     |
+
+Options take Laravel's shapes: `{ id: "Label" }` (`pluck('name', 'id')`), a PHP list (values are indexes), ordered pairs `[[10, "Ten"]]`, records `[{ id, name }]` (`nameField`, `idField`), or `{ value, label }`.
diff --git a/resources/boost/skills/javaabu-react-forms/references/listing.md b/resources/boost/skills/javaabu-react-forms/references/listing.md
new file mode 100644
index 0000000..9ccc561
--- /dev/null
+++ b/resources/boost/skills/javaabu-react-forms/references/listing.md
@@ -0,0 +1,69 @@
+# Listing pages
+
+```tsx
+import {
+  BulkActions,
+  Filter,
+  FilterSubmit,
+  Form,
+  NoItems,
+  Pagination,
+  PerPage,
+  Select2,
+  Table,
+  TableCell,
+  TableEmptyRow,
+  TableHeading,
+  TableRow,
+  Text,
+} from "@javaabu/forms"
+import { bulk, index, create } from "@/actions/App/Http/Controllers/ProductsController"
+
+export default function Index({ products, filters }) {
+  return (
+    <>
+      <Form id="filter" action={index()} model={filters}>
+        <Filter>
+          <Text name="search" />
+          <Select2 name="status" options={{ draft: "Draft", published: "Published" }} />
+          <PerPage />
+          <FilterSubmit cancelUrl={index().url} export />
+        </Filter>
+      </Form>
+
+      <Table
+        model="products"
+        bulkForm={<BulkActions actions={{ delete: "Delete", publish: "Publish" }} />}
+        bulkFormAction={bulk().url}
+        headers={
+          <>
+            <TableHeading label="Name" sortable="name" />
+            <TableHeading label="Status" />
+          </>
+        }
+        pagination={<Pagination paginator={products} />}
+      >
+        {products.data.length ? (
+          products.data.map((product) => (
+            <TableRow key={product.id} model={product}>
+              <TableCell name="name" />
+              <TableCell name="status" />
+            </TableRow>
+          ))
+        ) : (
+          <TableEmptyRow columns={2}>
+            <NoItems modelType="products" createAction={create().url} />
+          </TableEmptyRow>
+        )}
+      </Table>
+    </>
+  )
+}
+```
+
+- The filter form's `id` must match `Table filterId` (default `filter`): sortable headings set its `orderby` / `order` fields and submit it.
+- Row checkboxes submit `<model>[]` with each row's `id`; the select-all box toggles them.
+- `BulkActions` adds the `action` select, the Apply button and a `redirect` field.
+- `Pagination` takes a paginator or API resource collection as JSON, or a cursor paginator, and keeps the query string.
+- Cells format values: enums `{ value, label, color }` as badges, booleans as Yes / No, empty as `-`, arrays joined.
+- `NoItems` shows its create button when `FormsProvider authorize("create", model)` allows it, or with `showCreate`.
diff --git a/src/adapters/html/index.tsx b/src/adapters/html/index.tsx
index f8367e5..915c567 100644
--- a/src/adapters/html/index.tsx
+++ b/src/adapters/html/index.tsx
@@ -43,6 +43,7 @@ import {
 } from "../../core/adapter"
 import { useUi } from "../../core/provider"
 import { useRemoteOptions } from "../../core/remote"
+import { TabPanel, useReveal } from "../../core/reveal"
 import { useFormsTranslation } from "../../core/strings"
 import { thaanaKeyDown } from "../../core/thaana"
 
@@ -754,6 +755,16 @@ const cardPart = (slot: string) =>
     return <div data-slot={slot} {...props} />
   }
 
+function AccordionBody({ id, onReveal, children }: { id: string; onReveal: () => void; children: React.ReactNode }) {
+  const ref = React.useRef<HTMLDivElement>(null)
+  useReveal(ref, onReveal)
+  return (
+    <div ref={ref} id={id}>
+      {children}
+    </div>
+  )
+}
+
 function Accordion({ id, items, defaultValue, multiple, className }: AccordionSlotProps) {
   const [open, setOpen] = React.useState<string[]>(defaultValue)
   return (
@@ -773,7 +784,16 @@ function Accordion({ id, items, defaultValue, multiple, className }: AccordionSl
           }}
         >
           <summary aria-disabled={item.disabled || undefined}>{item.title}</summary>
-          <div id={item.value}>{item.content}</div>
+          <AccordionBody
+            id={item.value}
+            onReveal={() =>
+              setOpen((current) =>
+                current.includes(item.value) ? current : multiple ? [...current, item.value] : [item.value],
+              )
+            }
+          >
+            {item.content}
+          </AccordionBody>
         </details>
       ))}
     </div>
@@ -809,7 +829,8 @@ function Tabs({ items, defaultValue, onValueChange, className }: TabsSlotProps)
         <TabPanel
           key={item.value}
           id={`${baseId}-${item.value}`}
-          hidden={active !== item.value}
+          aria-labelledby={`${baseId}-${item.value}-tab`}
+          active={active === item.value}
           onReveal={() => select(item.value)}
         >
           {item.content}
@@ -819,37 +840,6 @@ function Tabs({ items, defaultValue, onValueChange, className }: TabsSlotProps)
   )
 }
 
-/** A tab panel that opens when a field inside asks to be revealed (errors focus it). */
-function TabPanel({
-  id,
-  hidden,
-  onReveal,
-  children,
-}: {
-  id: string
-  hidden: boolean
-  onReveal: () => void
-  children: React.ReactNode
-}) {
-  const ref = React.useRef<HTMLDivElement>(null)
-  const reveal = React.useRef(onReveal)
-  React.useEffect(() => {
-    reveal.current = onReveal
-  })
-  React.useEffect(() => {
-    const node = ref.current
-    if (!node) return
-    const listener = () => reveal.current()
-    node.addEventListener("forms:reveal", listener)
-    return () => node.removeEventListener("forms:reveal", listener)
-  }, [])
-  return (
-    <div ref={ref} role="tabpanel" id={id} aria-labelledby={`${id}-tab`} hidden={hidden}>
-      {children}
-    </div>
-  )
-}
-
 function NavTabs({ items, className }: NavTabsSlotProps) {
   const ui = useUi()
   return (
diff --git a/src/adapters/onu/conformance.test.tsx b/src/adapters/onu/conformance.test.tsx
index b7eda14..402927f 100644
--- a/src/adapters/onu/conformance.test.tsx
+++ b/src/adapters/onu/conformance.test.tsx
@@ -3,4 +3,7 @@ import { testAdapter } from "../../testing"
 import { onu } from "."
 import { onuEditor } from "./editor"
 
-testAdapter(mergeAdapters(onu, onuEditor))
+// Onu's Accordion unmounts closed items and has no forceMount yet: https://github.com/Javaabu/onu/issues/60
+testAdapter(mergeAdapters(onu, onuEditor), {
+  skip: ["Accordions keep closed items mounted and open the item of an invalid field"],
+})
diff --git a/src/adapters/onu/index.tsx b/src/adapters/onu/index.tsx
index b8b158f..4b4ad54 100644
--- a/src/adapters/onu/index.tsx
+++ b/src/adapters/onu/index.tsx
@@ -89,6 +89,7 @@ import {
   type TabsSlotProps,
   type TextareaSlotProps,
 } from "../../core/adapter"
+import { TabPanel } from "../../core/reveal"
 import { parseDateValue, toDateString, toDateTimeString, toTimeString } from "../../support/dates"
 
 /** Bootstrap colours (Blade's `color`) and the Onu button variants they map to. */
@@ -419,7 +420,30 @@ function OnuAccordion({ id, items, defaultValue, multiple, className }: Accordio
 }
 
 function OnuTabs({ items, defaultValue, onValueChange, className }: TabsSlotProps) {
-  return <Tabs className={className} defaultValue={defaultValue} onValueChange={onValueChange} items={items} />
+  const [active, setActive] = React.useState(defaultValue)
+  const id = React.useId()
+  const select = (value: string) => {
+    setActive(value)
+    onValueChange(value)
+  }
+  // Onu's panels unmount when inactive; render the list with Onu and keep every panel mounted, so fields submit.
+  return (
+    <div className={className}>
+      <Tabs
+        value={active}
+        onValueChange={select}
+        controls={`${id}-panels`}
+        items={items.map(({ value, label, disabled }) => ({ value, label, disabled }))}
+      />
+      <div id={`${id}-panels`} className="pt-4">
+        {items.map((item) => (
+          <TabPanel key={item.value} active={active === item.value} onReveal={() => select(item.value)}>
+            {item.content}
+          </TabPanel>
+        ))}
+      </div>
+    </div>
+  )
 }
 
 function OnuNavTabs({ items, className }: NavTabsSlotProps) {
diff --git a/src/adapters/shadcn/index.tsx b/src/adapters/shadcn/index.tsx
index 2fb8dee..07290d2 100644
--- a/src/adapters/shadcn/index.tsx
+++ b/src/adapters/shadcn/index.tsx
@@ -33,6 +33,7 @@ import {
 import { useUi } from "../../core/provider"
 import { useRemoteOptions } from "../../core/remote"
 import { useFormsTranslation } from "../../core/strings"
+import { useReveal } from "../../core/reveal"
 import { thaanaKeyDown } from "../../core/thaana"
 import { html } from "../html"
 
@@ -192,6 +193,16 @@ function Addons({
   )
 }
 
+function RevealArea({ onReveal, children }: { onReveal: () => void; children: React.ReactNode }) {
+  const ref = React.useRef<HTMLDivElement>(null)
+  useReveal(ref, onReveal)
+  return (
+    <div ref={ref} className="contents">
+      {children}
+    </div>
+  )
+}
+
 /** Hidden inputs for a value list, for selects whose widget isn't a native control. */
 function HiddenValues({
   name,
@@ -820,8 +831,13 @@ export function createShadcnAdapter(c: ShadcnComponents, options: ShadcnAdapterO
   if (has(c, ["Tabs", "TabsList", "TabsTrigger", "TabsContent"])) {
     const { Tabs, TabsList, TabsTrigger, TabsContent } = c
     components.Tabs = function ShadcnTabs({ items, defaultValue, onValueChange, className }: TabsSlotProps) {
+      const [active, setActive] = React.useState(defaultValue)
+      const select = (value: string) => {
+        setActive(value)
+        onValueChange(value)
+      }
       return (
-        <Tabs defaultValue={defaultValue} onValueChange={onValueChange} className={className}>
+        <Tabs value={active} onValueChange={select} className={className}>
           <TabsList>
             {items.map((item) => (
               <TabsTrigger key={item.value} value={item.value} disabled={item.disabled}>
@@ -830,8 +846,9 @@ export function createShadcnAdapter(c: ShadcnComponents, options: ShadcnAdapterO
             ))}
           </TabsList>
           {items.map((item) => (
-            <TabsContent key={item.value} value={item.value}>
-              {item.content}
+            // Mounted while inactive, so fields in other tabs keep their values and submit.
+            <TabsContent key={item.value} value={item.value} forceMount className="data-[state=inactive]:hidden">
+              <RevealArea onReveal={() => select(item.value)}>{item.content}</RevealArea>
             </TabsContent>
           ))}
         </Tabs>
@@ -848,18 +865,31 @@ export function createShadcnAdapter(c: ShadcnComponents, options: ShadcnAdapterO
       multiple,
       className,
     }: AccordionSlotProps) {
+      const [open, setOpen] = React.useState<string[]>(defaultValue)
+      const reveal = (value: string) =>
+        setOpen((current) => (current.includes(value) ? current : multiple ? [...current, value] : [value]))
       const content = items.map((item) => (
         <AccordionItem key={item.value} value={item.value} id={item.id} disabled={item.disabled}>
           <AccordionTrigger>{item.title}</AccordionTrigger>
-          <AccordionContent>{item.content}</AccordionContent>
+          {/* Mounted while closed, so fields inside keep their values and submit. */}
+          <AccordionContent forceMount className="data-[state=closed]:hidden">
+            <RevealArea onReveal={() => reveal(item.value)}>{item.content}</RevealArea>
+          </AccordionContent>
         </AccordionItem>
       ))
       return multiple ? (
-        <Accordion id={id} type="multiple" defaultValue={defaultValue} className={className}>
+        <Accordion id={id} type="multiple" value={open} onValueChange={setOpen} className={className}>
           {content}
         </Accordion>
       ) : (
-        <Accordion id={id} type="single" collapsible defaultValue={defaultValue[0]} className={className}>
+        <Accordion
+          id={id}
+          type="single"
+          collapsible
+          value={open[0] ?? ""}
+          onValueChange={(v: string) => setOpen(v ? [v] : [])}
+          className={className}
+        >
           {content}
         </Accordion>
       )
diff --git a/src/core/errors.ts b/src/core/errors.ts
index 182ce59..f048ab5 100644
--- a/src/core/errors.ts
+++ b/src/core/errors.ts
@@ -191,6 +191,15 @@ function focusTarget(el: HTMLElement): HTMLElement {
  * first (it re-renders), focus follows on the next frames. Returns `true`
  * when focus moved or is scheduled.
  */
+/** Inside something that hides it: `[hidden]`, a closed `<details>`, or a closed / inactive panel. */
+function concealed(el: HTMLElement): boolean {
+  if (el.hidden) return true
+  // From the parent up: a closed select trigger has `data-state="closed"` itself.
+  return !!el.parentElement?.closest(
+    '[hidden], details:not([open]) > :not(summary), [data-state="closed"], [data-state="inactive"]',
+  )
+}
+
 export function focusField(el: HTMLElement | null | undefined): boolean {
   if (!el) return false
   revealField(el)
@@ -199,14 +208,14 @@ export function focusField(el: HTMLElement | null | undefined): boolean {
     target.scrollIntoView?.({ block: "center", behavior: "smooth" })
     target.focus({ preventScroll: true })
   }
-  if (!target.closest("[hidden]")) {
+  if (!concealed(target)) {
     focus()
     return document.activeElement === target
   }
   let tries = 0
   const retry = () => {
     if (!target.isConnected) return
-    if (!target.closest("[hidden]")) focus()
+    if (!concealed(target)) focus()
     else if (++tries < 10) setTimeout(retry, 16)
   }
   setTimeout(retry, 0)
diff --git a/src/core/reveal.tsx b/src/core/reveal.tsx
new file mode 100644
index 0000000..d2b8827
--- /dev/null
+++ b/src/core/reveal.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+
+/** Calls `onReveal` when a field inside `ref` asks to be shown (`forms:reveal`, sent before it is focused). */
+export function useReveal(ref: React.RefObject<HTMLElement | null>, onReveal: () => void) {
+  const callback = React.useRef(onReveal)
+  React.useEffect(() => {
+    callback.current = onReveal
+  })
+  React.useEffect(() => {
+    const node = ref.current
+    if (!node) return
+    const listener = () => callback.current()
+    node.addEventListener("forms:reveal", listener)
+    return () => node.removeEventListener("forms:reveal", listener)
+  }, [ref])
+}
+
+export interface TabPanelProps extends React.ComponentProps<"div"> {
+  /** Whether the panel's tab is selected. Inactive panels stay mounted (their fields still submit) but hidden. */
+  active: boolean
+  /** Select the panel's tab, when a field inside has an error to show. */
+  onReveal: () => void
+}
+
+/**
+ * A tab panel for adapters: always mounted, so fields in other tabs keep their
+ * values and submit, hidden while inactive, and opened when a field inside is
+ * invalid. Use it for the `Tabs` slot if your tab component unmounts inactive panels.
+ */
+export function TabPanel({ active, onReveal, children, ...props }: TabPanelProps) {
+  const ref = React.useRef<HTMLDivElement>(null)
+  useReveal(ref, onReveal)
+  return (
+    <div ref={ref} role="tabpanel" data-state={active ? "active" : "inactive"} hidden={!active} {...props}>
+      {children}
+    </div>
+  )
+}
diff --git a/src/docs.test.ts b/src/docs.test.ts
new file mode 100644
index 0000000..a0eb535
--- /dev/null
+++ b/src/docs.test.ts
@@ -0,0 +1,55 @@
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs"
+import { join, relative } from "node:path"
+
+const root = join(import.meta.dirname, "..")
+const read = (path: string) => readFileSync(join(root, path), "utf8")
+
+function pages(dir: string): string[] {
+  return readdirSync(join(root, dir)).flatMap((name) => {
+    const path = join(dir, name)
+    if (statSync(join(root, path)).isDirectory()) return pages(path)
+    return name.endsWith(".md") ? [path] : []
+  })
+}
+
+describe("docs", () => {
+  it("lists every page in llms.txt, and only pages that exist", () => {
+    const linked = [...read("llms.txt").matchAll(/\]\((docs\/[^)]+)\)/g)].map((match) => match[1] as string)
+    expect([...linked].sort()).toEqual(pages("docs").sort())
+  })
+
+  it("has working relative links", () => {
+    for (const page of pages("docs")) {
+      for (const [, link] of read(page).matchAll(/\]\((\.{1,2}\/[^)#]+)(?:#[^)]*)?\)/g)) {
+        const target = relative(root, join(root, page, "..", link as string))
+        expect({
+          page,
+          link,
+          exists: existsSync(join(root, `${target}.md`)) || existsSync(join(root, target)),
+        }).toEqual({
+          page,
+          link,
+          exists: true,
+        })
+      }
+    }
+  })
+
+  it("gives every page a title and sidebar position", () => {
+    for (const page of pages("docs")) {
+      expect(read(page), page).toMatch(/^---\ntitle: .+\nsidebar_position: [\d.]+\n---/)
+    }
+  })
+
+  it("ships the docs, the skill and the guideline", () => {
+    const { files } = JSON.parse(read("package.json")) as { files: string[] }
+    expect(files).toEqual(expect.arrayContaining(["dist", "docs", "llms.txt", "resources"]))
+    expect(read("resources/boost/skills/javaabu-react-forms/SKILL.md")).toMatch(/^---\nname: javaabu-react-forms\n/)
+    expect(read("resources/boost/guidelines/core.blade.php")).toContain("javaabu-react-forms")
+  })
+
+  it("documents everything the package exports", async () => {
+    const reference = read("docs/api-reference.md")
+    for (const name of Object.keys(await import("./index"))) expect(reference, name).toContain(name)
+  })
+})
diff --git a/src/index.ts b/src/index.ts
index 82f3927..e24a8d4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -21,6 +21,7 @@ export { useFormsTranslation, STRINGS_PREFIX, type FormsMessageKey } from "./cor
 export { en, dv, type FormsMessages } from "./core/locales"
 export { thaanaKeyDown, toThaana, THAANA_KEYMAP } from "./core/thaana"
 export { useRemoteOptions, type RemoteOptionsState } from "./core/remote"
+export { TabPanel, useReveal, type TabPanelProps } from "./core/reveal"
 
 // Binding, errors, routing
 export {
diff --git a/src/testing/index.tsx b/src/testing/index.tsx
index 2ddefb0..c6b1ac2 100644
--- a/src/testing/index.tsx
+++ b/src/testing/index.tsx
@@ -354,6 +354,50 @@ export function adapterConformance(
         check(link && link.getAttribute("href") === "/users/create", "LinkButton must render a link with the URL")
       },
     },
+    {
+      name: "Tabs keep inactive panels mounted and open the tab of an invalid field",
+      run: async () => {
+        const { container } = mount(
+          <Form errors={{ phone: "The phone field is required." }} summary={false}>
+            <Tabs tabs={[{ name: "general" }, { name: "contact" }]}>
+              <TabsPane name="general">
+                <Text name="name" default="ޢަލީ" />
+              </TabsPane>
+              <TabsPane name="contact">
+                <Text name="phone" />
+              </TabsPane>
+            </Tabs>
+          </Form>,
+        )
+        equal(formData(container).get("name"), "ޢަލީ", "a field in the active tab")
+        const phone = container.querySelector('[name="phone"]')
+        check(phone, "fields in inactive tabs must stay mounted, so they submit")
+        await waitFor(() => {
+          const panel = phone.closest('[role="tabpanel"]')
+          const shown = !phone.closest("[hidden]") && panel?.getAttribute("data-state") !== "inactive"
+          check(shown, "the tab with the invalid field must open (listen for forms:reveal)")
+        })
+      },
+    },
+    {
+      name: "Accordions keep closed items mounted and open the item of an invalid field",
+      run: async () => {
+        const { container } = mount(
+          <Form errors={{ notes: "Add a note." }} summary={false}>
+            <Accordion id="more" items={[{ title: "More", content: <Textarea name="notes" /> }]} />
+          </Form>,
+        )
+        const notes = container.querySelector('[name="notes"]')
+        check(notes, "fields in closed accordion items must stay mounted, so they submit")
+        await waitFor(() => {
+          const shown =
+            !notes.closest("[hidden]") &&
+            !notes.closest('[data-state="closed"]') &&
+            !notes.closest("details:not([open])")
+          check(shown, "the item with the invalid field must open (listen for forms:reveal)")
+        })
+      },
+    },
     {
       name: "Table renders headings, rows with checkboxes and cells",
       run: () => {

From 6a24455c5d2ba703908bfca38ef54a275f4ba671 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 13:57:49 +0500
Subject: [PATCH 15/18] Foundations: Inertia and fetch examples,
 browser-verified submits, coverage thresholds

- examples/: Inertia and fetch pages against a mock Laravel endpoint
  (Vite middleware), so every integration has a runnable page
- Loading buttons in the HTML and shadcn adapters use aria-disabled: a
  submit button disabled during its own click doesn't submit (found by
  loading the examples in Chromium)
- shadcn adapter styles Form, DescriptionList/Item and EmptyState
- Tests for listing pages, HTML adapter widgets, MapInput and uploads;
  coverage thresholds at lines 85%

Closes #1

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/loading-buttons.md           |   5 +
 docs/advanced-usage/adapters.md         |   3 +-
 docs/advanced-usage/shadcn.md           |   2 +-
 docs/installation-and-setup.md          |   2 +-
 examples/fetch.html                     |  13 ++
 examples/fetch/main.tsx                 |  43 +++++
 examples/inertia.html                   |  13 ++
 examples/inertia/main.tsx               |  54 ++++++
 examples/mock-laravel.ts                |  82 ++++++++
 examples/shared/demo.tsx                |   2 +-
 examples/vite.config.ts                 |   6 +-
 src/adapters/html/index.tsx             |  10 +-
 src/adapters/html/interactions.test.tsx | 243 ++++++++++++++++++++++++
 src/adapters/shadcn/index.tsx           |  66 ++++++-
 src/adapters/shadcn/shadcn.test.tsx     |   5 +-
 src/components/listing.test.tsx         | 186 ++++++++++++++++++
 src/testing/index.tsx                   |   4 +-
 vitest.config.ts                        |   2 +
 18 files changed, 726 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/loading-buttons.md
 create mode 100644 examples/fetch.html
 create mode 100644 examples/fetch/main.tsx
 create mode 100644 examples/inertia.html
 create mode 100644 examples/inertia/main.tsx
 create mode 100644 examples/mock-laravel.ts
 create mode 100644 src/adapters/html/interactions.test.tsx
 create mode 100644 src/components/listing.test.tsx

diff --git a/.changeset/loading-buttons.md b/.changeset/loading-buttons.md
new file mode 100644
index 0000000..55c440a
--- /dev/null
+++ b/.changeset/loading-buttons.md
@@ -0,0 +1,5 @@
+---
+"@javaabu/forms": patch
+---
+
+Submit buttons of the HTML and shadcn adapters submit again with `animate`. While loading, they use `aria-disabled` and ignore clicks instead of `disabled`, because a button disabled during its own click doesn't submit the form. The shadcn adapter now styles `Form`, `DescriptionList`, `DescriptionItem` and `EmptyState`, and lays out `inline` fields side by side. New example pages for Inertia and fetch, with a mock Laravel endpoint.
diff --git a/docs/advanced-usage/adapters.md b/docs/advanced-usage/adapters.md
index 7277c3d..7862471 100644
--- a/docs/advanced-usage/adapters.md
+++ b/docs/advanced-usage/adapters.md
@@ -101,7 +101,8 @@ The source of the HTML adapter (`src/adapters/html/index.tsx`) is the reference:
 4. **The label is ready.** `Field`'s `label` already includes the required marker. Render it inside a `<label htmlFor={id}>`. With `hideLabel`, hide it visually but keep it for screen readers.
 5. **Logical CSS.** Use `ms-`/`pe-`/`start-`, not `left`/`right`, so the adapter works in Dhivehi (RTL).
 6. **Keep hidden content mounted.** Inactive tab panels and closed accordion items stay mounted, so their fields keep their values and submit, as in Blade. Open them on the `forms:reveal` event (sent before an invalid field is focused): `TabPanel` and `useReveal` from `@javaabu/forms` do both.
-7. **Thaana.** When `Input` or `Textarea` gets `thaana`, let users type Thaana: use your kit's support, or `onKeyDown={thaanaKeyDown}` from `@javaabu/forms`.
+7. **Loading buttons stay enabled.** Show `loading` with `aria-busy` and ignore clicks, but don't set `disabled`: the submit button starts loading during its own click, and a button that becomes disabled then doesn't submit the form.
+8. **Thaana.** When `Input` or `Textarea` gets `thaana`, let users type Thaana: use your kit's support, or `onKeyDown={thaanaKeyDown}` from `@javaabu/forms`.
 
 ## Slots
 
diff --git a/docs/advanced-usage/shadcn.md b/docs/advanced-usage/shadcn.md
index 3745309..46172d0 100644
--- a/docs/advanced-usage/shadcn.md
+++ b/docs/advanced-usage/shadcn.md
@@ -82,7 +82,7 @@ Tailwind must see the package's classes too: add `@source "../../node_modules/@j
 | `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter` | `Modal` |
 | `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem` | `ActionMenu` |
 
-Not covered by shadcn, so plain HTML (style them by `data-slot`): `Image`, `Wysiwyg`, `Map`, `EmptyState`, `Pagination`, `DescriptionList`, `NavTabs`, `ErrorSummary` without `Alert`. Replace any of them with your own components through `components` (see [UI adapters](./adapters)).
+`Form`, `DescriptionList`, `DescriptionItem` and `EmptyState` are always included, built from Tailwind utilities and shadcn's theme tokens. Not covered by shadcn, so plain HTML (style them by `data-slot`): `Image`, `Wysiwyg`, `Map`, `Pagination`, `NavTabs`, `ErrorSummary` without `Alert`. Replace any of them with your own components through `components` (see [UI adapters](./adapters)).
 
 # Notes
 
diff --git a/docs/installation-and-setup.md b/docs/installation-and-setup.md
index c1a9078..bd2ac84 100644
--- a/docs/installation-and-setup.md
+++ b/docs/installation-and-setup.md
@@ -159,7 +159,7 @@ Strings come from [`@javaabu/i18n`](https://github.com/Javaabu/i18n) and follow
 
 # Examples
 
-The repository has a page per adapter in `examples/` (Onu, shadcn/ui and plain HTML), each with a Dhivehi version (`?dv`):
+The repository has a page per integration in `examples/` (Onu, shadcn/ui, plain HTML, Inertia and fetch, the last two against a mock Laravel endpoint), each with a Dhivehi version (`?dv`):
 
 ```bash
 git clone https://github.com/Javaabu/react-forms && cd react-forms
diff --git a/examples/fetch.html b/examples/fetch.html
new file mode 100644
index 0000000..f8c9ea6
--- /dev/null
+++ b/examples/fetch.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="csrf-token" content="playground-token" />
+    <title>@javaabu/forms with fetch</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/fetch/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/fetch/main.tsx b/examples/fetch/main.tsx
new file mode 100644
index 0000000..2789342
--- /dev/null
+++ b/examples/fetch/main.tsx
@@ -0,0 +1,43 @@
+import * as React from "react"
+import { createRoot } from "react-dom/client"
+
+import * as Forms from "../../src"
+import { html } from "../../src/html"
+import { user } from "../mock-laravel"
+import { useDemoLocale } from "../shared/demo"
+import "../html/styles.css"
+
+function Page() {
+  const { rtl, toggle } = useDemoLocale()
+  const [message, setMessage] = React.useState<string | null>(null)
+  return (
+    <main>
+      <h1>@javaabu/forms with fetch</h1>
+      <Forms.Button color="light" onClick={toggle}>
+        {rtl ? "English" : "ދިވެހި"}
+      </Forms.Button>
+      {message ? <Forms.Alert type="success">{message}</Forms.Alert> : null}
+      <p>
+        No Inertia: the fetch router posts the form. Clear the island and save: the 422 shows its errors under the
+        fields.
+      </p>
+      <Forms.Form
+        model={user}
+        action="/demo/users/1"
+        method="PATCH"
+        onSuccess={(body) => setMessage((body as { message: string }).message)}
+      >
+        <Forms.Text name="name" label="ނަން" required thaana />
+        <Forms.Email name="email" required />
+        <Forms.Text name="address[city]" label="ރަށް" thaana />
+        <Forms.Submit>ސޭވްކުރޭ</Forms.Submit>
+      </Forms.Form>
+    </main>
+  )
+}
+
+createRoot(document.getElementById("root")!).render(
+  <Forms.FormsProvider ui={html} router={Forms.fetchRouter} csrfToken="example-token">
+    <Page />
+  </Forms.FormsProvider>,
+)
diff --git a/examples/inertia.html b/examples/inertia.html
new file mode 100644
index 0000000..7fc6153
--- /dev/null
+++ b/examples/inertia.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="csrf-token" content="playground-token" />
+    <title>@javaabu/forms with Inertia</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/inertia/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/inertia/main.tsx b/examples/inertia/main.tsx
new file mode 100644
index 0000000..f013e3b
--- /dev/null
+++ b/examples/inertia/main.tsx
@@ -0,0 +1,54 @@
+import { createInertiaApp, usePage } from "@inertiajs/react"
+import { createRoot } from "react-dom/client"
+
+import * as Forms from "../../src"
+import { inertia, inertiaLinks } from "../../src/inertia"
+import { html } from "../../src/html"
+import { user as initialUser } from "../mock-laravel"
+import { useDemoLocale } from "../shared/demo"
+import "../html/styles.css"
+
+const ui = Forms.mergeAdapters(html, inertiaLinks)
+
+// Wayfinder would generate this: `update(user)` → { url, method }.
+const update = (args: { id: number }) => ({ url: `/demo/users/${args.id}`, method: "put" as const })
+
+function Edit() {
+  const { user, flash } = usePage<{ user: typeof initialUser; flash: string | null }>().props
+  const { rtl, toggle } = useDemoLocale()
+  return (
+    <main>
+      <h1>@javaabu/forms with Inertia</h1>
+      <Forms.Button color="light" onClick={toggle}>
+        {rtl ? "English" : "ދިވެހި"}
+      </Forms.Button>
+      {flash ? <Forms.Alert type="success">{flash}</Forms.Alert> : null}
+      <p>Clear the island and save: the mock server validates like Laravel, and its errors appear under the fields.</p>
+      <Forms.Form model={user} action={update} preserveScroll summary>
+        <Forms.Text name="name" label="ނަން" required thaana />
+        <Forms.Email name="email" required />
+        <Forms.Text name="address[city]" label="ރަށް" thaana />
+        <Forms.Checkbox name="channels[]" value="email" label="Email" />
+        <Forms.Checkbox name="channels[]" value="sms" label="SMS" />
+        <Forms.Submit>ސޭވްކުރޭ</Forms.Submit>
+      </Forms.Form>
+    </main>
+  )
+}
+
+void createInertiaApp({
+  page: {
+    component: "Users/Edit",
+    props: { errors: {}, user: initialUser, flash: null },
+    url: "/inertia.html",
+    version: null,
+  } as never,
+  resolve: () => Edit,
+  setup({ el, App, props }) {
+    createRoot(el!).render(
+      <Forms.FormsProvider ui={ui} router={inertia}>
+        <App {...props} />
+      </Forms.FormsProvider>,
+    )
+  },
+})
diff --git a/examples/mock-laravel.ts b/examples/mock-laravel.ts
new file mode 100644
index 0000000..f25984b
--- /dev/null
+++ b/examples/mock-laravel.ts
@@ -0,0 +1,82 @@
+import type { IncomingMessage, ServerResponse } from "node:http"
+import type { Plugin } from "vite"
+
+/**
+ * A stand-in for a Laravel app, so the Inertia and fetch examples can submit:
+ * `POST /demo/users/1` validates like a FormRequest and answers with Inertia pages
+ * (`X-Inertia`) or JSON (422 with `{ message, errors }`).
+ */
+async function formData(req: IncomingMessage): Promise<FormData> {
+  const chunks: Buffer[] = []
+  for await (const chunk of req) chunks.push(chunk as Buffer)
+  const body = Buffer.concat(chunks)
+  const type = req.headers["content-type"] ?? ""
+  if (type.includes("application/json")) {
+    const data = new FormData()
+    for (const [k, v] of Object.entries(JSON.parse(body.toString() || "{}") as Record<string, unknown>)) {
+      if (Array.isArray(v)) v.forEach((item) => data.append(`${k}[]`, String(item)))
+      else if (v !== null && typeof v === "object")
+        for (const [k2, v2] of Object.entries(v)) data.append(`${k}[${k2}]`, String(v2))
+      else data.append(k, v === null || v === undefined ? "" : String(v))
+    }
+    return data
+  }
+  return new Response(body, { headers: { "content-type": type } }).formData()
+}
+
+export const user = {
+  id: 1,
+  name: "ޢާއިޝަތު ޢަލީ",
+  email: "aishath@example.com",
+  address: { city: "މާލެ" },
+  channels: ["email"],
+}
+
+function validate(data: FormData): Record<string, string[]> {
+  const errors: Record<string, string[]> = {}
+  if (!String(data.get("name") ?? "").trim()) errors.name = ["ނަން ލިޔުއްވާ. (The name field is required.)"]
+  const email = String(data.get("email") ?? "")
+  if (!email.includes("@")) errors.email = ["The email field must be a valid email address."]
+  if (!String(data.get("address[city]") ?? data.get("address.city") ?? "").trim())
+    errors["address.city"] = ["The city field is required."]
+  return errors
+}
+
+function send(res: ServerResponse, status: number, body: unknown, headers: Record<string, string> = {}) {
+  res.writeHead(status, { "content-type": "application/json", ...headers })
+  res.end(JSON.stringify(body))
+}
+
+export function mockLaravel(): Plugin {
+  const handle = async (req: IncomingMessage, res: ServerResponse, next: () => void) => {
+    if (!req.url?.startsWith("/demo/users/1") || req.method !== "POST") return next()
+    const data = await formData(req)
+    const errors = validate(data)
+    const saved = Object.keys(errors).length === 0
+    if (req.headers["x-inertia"]) {
+      // Laravel redirects back; the page comes back with errors, or with the saved user.
+      const props = {
+        errors,
+        flash: saved ? "ސޭވްކުރެވިއްޖެ. (Saved.)" : null,
+        user: saved ? { ...user, name: data.get("name"), email: data.get("email") } : user,
+      }
+      return send(
+        res,
+        200,
+        { component: "Users/Edit", props, url: "/inertia.html", version: null },
+        { "x-inertia": "true", vary: "X-Inertia" },
+      )
+    }
+    if (!saved) return send(res, 422, { message: "The given data was invalid.", errors })
+    return send(res, 200, { message: "ސޭވްކުރެވިއްޖެ. (Saved.)" })
+  }
+  return {
+    name: "mock-laravel",
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => void handle(req, res, next))
+    },
+    configurePreviewServer(server) {
+      server.middlewares.use((req, res, next) => void handle(req, res, next))
+    },
+  }
+}
diff --git a/examples/shared/demo.tsx b/examples/shared/demo.tsx
index e81d02a..488f5ac 100644
--- a/examples/shared/demo.tsx
+++ b/examples/shared/demo.tsx
@@ -74,7 +74,7 @@ export function Demo({ title }: { title: string }) {
           errors={{ slug: "The slug has already been taken." }}
           onSubmit={(values) => new Promise((resolve) => setTimeout(() => resolve(values), 800))}
         >
-          <Forms.Text name="title" required thaana />
+          <Forms.Text name="title" required />
           <Forms.Text name="title_dv" label="ސުރުޚީ" thaana />
           <Forms.Text name="slug" help="Used in the article's URL." />
           <Forms.Textarea name="body" rows={3} />
diff --git a/examples/vite.config.ts b/examples/vite.config.ts
index 51cbe0c..e0a2b20 100644
--- a/examples/vite.config.ts
+++ b/examples/vite.config.ts
@@ -3,12 +3,14 @@ import tailwindcss from "@tailwindcss/vite"
 import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
 
+import { mockLaravel } from "./mock-laravel"
+
 /** One page per integration, rendered against the source. `pnpm examples` serves them, `pnpm examples:build` builds them. */
-const pages = ["index", "onu", "html", "shadcn"]
+const pages = ["index", "onu", "html", "shadcn", "inertia", "fetch"]
 
 export default defineConfig({
   root: import.meta.dirname,
-  plugins: [react(), tailwindcss()],
+  plugins: [react(), tailwindcss(), mockLaravel()],
   build: {
     outDir: "dist",
     emptyOutDir: true,
diff --git a/src/adapters/html/index.tsx b/src/adapters/html/index.tsx
index 915c567..ab9f28d 100644
--- a/src/adapters/html/index.tsx
+++ b/src/adapters/html/index.tsx
@@ -628,15 +628,21 @@ function ButtonContent({
   )
 }
 
-function Button({ color, size, loading, startIcon, endIcon, children, disabled, ...props }: ButtonSlotProps) {
+function Button({ color, size, loading, startIcon, endIcon, children, disabled, onClick, ...props }: ButtonSlotProps) {
   return (
     <button
       data-slot="button"
       data-color={color}
       data-size={size}
       aria-busy={loading || undefined}
-      disabled={disabled || loading}
+      // Not `disabled`: a submit button disabled during its own click doesn't submit the form.
+      aria-disabled={loading || undefined}
+      disabled={disabled}
       {...props}
+      onClick={(event) => {
+        if (loading) event.preventDefault()
+        else onClick?.(event)
+      }}
     >
       <ButtonContent startIcon={startIcon} endIcon={endIcon} loading={loading}>
         {children}
diff --git a/src/adapters/html/interactions.test.tsx b/src/adapters/html/interactions.test.tsx
new file mode 100644
index 0000000..40e4ac2
--- /dev/null
+++ b/src/adapters/html/interactions.test.tsx
@@ -0,0 +1,243 @@
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
+
+import { Accordion, Alert, Card, Modal, NavTabs, Status, Tabs, TabsPane, TextEntry } from "../../components/display"
+import { Form } from "../../components/form"
+import { FileUpload, Image } from "../../components/files"
+import { Number as NumberField, Text, Url } from "../../components/inputs"
+import { MapInput } from "../../components/map-input"
+import { Select2 } from "../../components/select"
+import { Time } from "../../components/dates"
+import { Wysiwyg } from "../../components/wysiwyg"
+import { FormsProvider } from "../../core/provider"
+import { pageWindow } from "."
+
+function data(container: HTMLElement) {
+  return new FormData(container.querySelector("form")!)
+}
+
+afterEach(() => vi.unstubAllGlobals())
+
+describe("HTML adapter widgets", () => {
+  it("dismisses alerts and shows cards, statuses and entries", () => {
+    render(
+      <>
+        <Alert type="danger" heading="ގޯސް" dismissible icon="fa-solid fa-xmark">
+          Something failed.
+        </Alert>
+        <Card title="ކާޑު" subtitle="Sub" footer="Foot" imageTop={<img alt="top" />}>
+          Body
+        </Card>
+        <Status color="warning">Pending</Status>
+        <TextEntry name="bio" value={"Line one\nLine two"} multiline inline />
+      </>,
+    )
+    expect(screen.getByRole("alert")).toHaveTextContent("Something failed.")
+    fireEvent.click(screen.getByLabelText("Close"))
+    expect(screen.queryByText("Something failed.")).not.toBeInTheDocument()
+    expect(screen.getByText("Foot")).toHaveAttribute("data-slot", "card-footer")
+    expect(screen.getByText("Pending")).toHaveAttribute("data-tone", "warning")
+    expect(screen.getByText("Bio")).toBeInTheDocument()
+  })
+
+  it("switches tabs and opens accordion items", () => {
+    const onValueChange = vi.fn()
+    render(
+      <>
+        <Tabs tabs={[{ name: "home" }, { name: "profile", title: "ޕްރޮފައިލް" }]} onValueChange={onValueChange}>
+          <TabsPane name="home">Home pane</TabsPane>
+          <TabsPane name="profile">Profile pane</TabsPane>
+        </Tabs>
+        <Accordion
+          id="faq"
+          items={[
+            { title: "One", content: "First" },
+            { title: "Two", content: "Second", show: true },
+          ]}
+        />
+        <NavTabs
+          tabs={[
+            { title: "Details", url: "/a", active: true },
+            { title: "Roles", url: "/b", disabled: true },
+          ]}
+        />
+      </>,
+    )
+    expect(screen.getByText("Profile pane").closest("[role=tabpanel]")).toHaveAttribute("hidden")
+    fireEvent.click(screen.getByRole("tab", { name: "ޕްރޮފައިލް" }))
+    expect(onValueChange).toHaveBeenCalledWith("profile")
+    expect(screen.getByText("Profile pane").closest("[role=tabpanel]")).not.toHaveAttribute("hidden")
+    const one = screen.getByText("One").closest("details")!
+    one.open = true
+    fireEvent(one, new Event("toggle"))
+    expect(screen.getByText("Second").closest("details")).not.toHaveAttribute("open")
+    expect(screen.getByText("Details")).toHaveAttribute("aria-current", "page")
+    expect(screen.getByText("Roles")).toHaveAttribute("aria-disabled", "true")
+  })
+
+  it("opens a modal from its trigger and closes it", () => {
+    const onOpenChange = vi.fn()
+    render(
+      <Modal
+        title="ސުރުޚީ"
+        trigger={<button type="button">Open</button>}
+        onOpenChange={onOpenChange}
+        modalSizeClass="modal-xl"
+      >
+        Modal body
+      </Modal>,
+    )
+    fireEvent.click(screen.getByText("Open"))
+    expect(onOpenChange).toHaveBeenCalledWith(true)
+    expect(document.querySelector("dialog")).toHaveAttribute("data-size", "xl")
+    fireEvent.click(screen.getByLabelText("Close"))
+    expect(onOpenChange).toHaveBeenLastCalledWith(false)
+  })
+
+  it("types numbers, times, URLs and HTML", () => {
+    const { container } = render(
+      <Form>
+        <NumberField name="price" decimals={2} />
+        <Time name="opens_at" />
+        <Url name="website" />
+        <Wysiwyg name="content" />
+        <Text name="code" prepend="MV" append=".mv" />
+      </Form>,
+    )
+    fireEvent.change(screen.getByLabelText("Price"), { target: { value: "12.345" } })
+    fireEvent.change(screen.getByLabelText("Opens At"), { target: { value: "08:30" } })
+    fireEvent.change(screen.getByLabelText("Website"), { target: { value: "javaabu.com" } })
+    fireEvent.blur(screen.getByLabelText("Website"))
+    fireEvent.change(screen.getByLabelText("Content"), { target: { value: "<p>ހެލޯ</p>" } })
+    const form = data(container)
+    expect(form.get("price")).toBe("12.345")
+    expect(form.get("opens_at")).toBe("08:30")
+    expect(form.get("website")).toBe("https://javaabu.com")
+    expect(form.get("content")).toBe("<p>ހެލޯ</p>")
+    expect(screen.getByText("MV")).toHaveAttribute("data-slot", "input-prepend")
+  })
+
+  it("searches, creates tags and searches the server", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (url: string) => {
+        expect(url).toContain("filter%5Bsearch%5D=ma")
+        return new Response(JSON.stringify({ data: [{ id: 7, name: "މާލެ" }] }), {
+          headers: { "content-type": "application/json" },
+        })
+      }),
+    )
+    const { container } = render(
+      <Form>
+        <Select2 name="tags" multiple tags options={{ 1: "Harbour" }} />
+        <Select2 name="city" isAjax ajaxUrl="/api/cities" />
+      </Form>,
+    )
+    const [tagSearch, citySearch] = screen.getAllByLabelText("Search")
+    fireEvent.change(tagSearch!, { target: { value: "ބަނދަރު" } })
+    fireEvent.keyDown(tagSearch!, { key: "Enter" })
+    expect(data(container).getAll("tags[]")).toEqual(["ބަނދަރު"])
+    fireEvent.change(citySearch!, { target: { value: "ma" } })
+    expect(await screen.findByRole("option", { name: "މާލެ" }, { timeout: 2000 })).toBeInTheDocument()
+  })
+
+  it("windows long page lists", () => {
+    expect(pageWindow(5, 10)).toEqual([1, null, 4, 5, 6, null, 10])
+    expect(pageWindow(1, 3)).toEqual([1, 2, 3])
+  })
+})
+
+describe("MapInput", () => {
+  it("submits the bound point and lets the coordinates be typed", () => {
+    const { container } = render(
+      <FormsProvider settings={{ default_lat: 4.17, default_lng: 73.5 }}>
+        <Form model={{ lat: 4.1755, lng: 73.5093 }}>
+          <MapInput name="location" />
+        </Form>
+      </FormsProvider>,
+    )
+    expect(data(container).get("lat")).toBe("4.1755")
+    fireEvent.change(screen.getByLabelText("Longitude"), { target: { value: "73.51" } })
+    expect(data(container).get("lng")).toBe("73.51")
+  })
+
+  it("submits a radius in its unit and a polygon as WKT", () => {
+    const { container } = render(
+      <Form
+        model={{
+          lat: 4.17,
+          lng: 73.5,
+          radius: 2,
+          boundary: "POLYGON((73.5 4.17, 73.6 4.17, 73.6 4.2, 73.5 4.17))",
+        }}
+      >
+        <MapInput name="area" enableRadius radiusUnit="km" hideInputs />
+        <MapInput name="zone" enablePolygon latName="zone_lat" lngName="zone_lng" />
+      </Form>,
+    )
+    const form = data(container)
+    expect(form.get("radius")).toBe("2")
+    expect(form.get("lat")).toBe("4.17")
+    expect(String(form.get("boundary"))).toMatch(/^POLYGON\(\(73\.5 4\.17/)
+  })
+})
+
+describe("file uploads", () => {
+  it("uploads a picked file to the form's action and reports the response", async () => {
+    const fetchMock = vi.fn(
+      async () => new Response(JSON.stringify({ ok: true }), { headers: { "content-type": "application/json" } }),
+    )
+    vi.stubGlobal("fetch", fetchMock)
+    const onUploaded = vi.fn()
+    render(
+      <FormsProvider csrfToken="t0ken">
+        <Form action="/users/1/avatar" method="PATCH" files>
+          <FileUpload name="avatar" type="image" onUploaded={onUploaded} />
+        </Form>
+      </FormsProvider>,
+    )
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    expect(input).not.toHaveAttribute("name")
+    const file = new File(["x"], "ފޮޓޯ.png", { type: "image/png" })
+    fireEvent.change(input, { target: { files: [file] } })
+    await waitFor(() => expect(onUploaded).toHaveBeenCalledWith({ ok: true }))
+    const [url, init] = fetchMock.mock.calls[0] as unknown as [string, RequestInit]
+    expect(url).toBe("/users/1/avatar")
+    const body = init.body as FormData
+    expect(body.get("_method")).toBe("PATCH")
+    expect(body.get("_token")).toBe("t0ken")
+    expect((body.get("avatar") as File).name).toBe("ފޮޓޯ.png")
+  })
+
+  it("shows upload validation errors under the field", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(
+        async () => new Response(JSON.stringify({ message: "x", errors: { avatar: ["Too big."] } }), { status: 422 }),
+      ),
+    )
+    render(
+      <Form action="/users/1/avatar" files>
+        <FileUpload name="avatar" onUploaded={() => {}} />
+      </Form>,
+    )
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    fireEvent.change(input, { target: { files: [new File(["x"], "a.pdf")] } })
+    expect(await screen.findByText("Too big.")).toBeInTheDocument()
+  })
+
+  it("previews and removes a picked image", () => {
+    vi.stubGlobal("URL", Object.assign(URL, { createObjectURL: () => "blob:preview", revokeObjectURL: () => {} }))
+    render(
+      <Form files>
+        <Image name="cover" circle />
+      </Form>,
+    )
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement
+    act(() => {
+      fireEvent.change(input, { target: { files: [new File(["x"], "c.png", { type: "image/png" })] } })
+    })
+    expect(screen.getByRole("img")).toHaveAttribute("src", "blob:preview")
+    fireEvent.click(screen.getByText("Remove"))
+    expect(screen.queryByRole("img")).not.toBeInTheDocument()
+  })
+})
diff --git a/src/adapters/shadcn/index.tsx b/src/adapters/shadcn/index.tsx
index 07290d2..cd94bc5 100644
--- a/src/adapters/shadcn/index.tsx
+++ b/src/adapters/shadcn/index.tsx
@@ -12,6 +12,10 @@ import {
   type CardSlotProps,
   type CheckboxSlotProps,
   type DateSlotProps,
+  type DescriptionItemSlotProps,
+  type DescriptionListSlotProps,
+  type EmptyStateSlotProps,
+  type FormSlotProps,
   type ErrorSummarySlotProps,
   type FieldSlotProps,
   type FileSlotProps,
@@ -294,7 +298,7 @@ export function createShadcnAdapter(c: ShadcnComponents, options: ShadcnAdapterO
       const body = (
         <>
           {labelNode}
-          <div className={cx("grid gap-2", classNames?.control)}>
+          <div className={cx("grid gap-2", inline && "min-w-0 flex-1", classNames?.control)}>
             {children}
             {helpNode}
             {errorNode}
@@ -306,7 +310,7 @@ export function createShadcnAdapter(c: ShadcnComponents, options: ShadcnAdapterO
           <FieldRoot
             data-invalid={errors.length ? true : undefined}
             data-disabled={disabled || undefined}
-            orientation={inline ? "responsive" : "vertical"}
+            orientation={inline ? "horizontal" : "vertical"}
             className={classNames?.group}
           >
             {body}
@@ -691,8 +695,14 @@ export function createShadcnAdapter(c: ShadcnComponents, options: ShadcnAdapterO
           {...props}
           variant={colorToShadcnVariant(color)}
           size={size ? SIZES[size] : undefined}
-          disabled={disabled || loading}
+          // Not `disabled`: a submit button disabled during its own click doesn't submit the form.
+          disabled={disabled}
           aria-busy={loading || undefined}
+          aria-disabled={loading || undefined}
+          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+            if (loading) event.preventDefault()
+            else props.onClick?.(event)
+          }}
         >
           {loading ? <Spinner /> : startIcon ? <ui.Icon name={startIcon} /> : null}
           {children}
@@ -958,5 +968,55 @@ export function createShadcnAdapter(c: ShadcnComponents, options: ShadcnAdapterO
     }
   }
 
+  // Layout slots shadcn has no component for, in shadcn's tokens.
+  components.Form = function ShadcnForm({ processing: _processing, className, ...props }: FormSlotProps) {
+    return <form data-slot="form" className={cx("flex flex-col gap-6", className)} {...props} />
+  }
+  components.DescriptionList = function ShadcnDescriptionList({
+    layout,
+    className,
+    children,
+  }: DescriptionListSlotProps) {
+    return (
+      <dl data-slot="description-list" data-layout={layout} className={cx("grid gap-4 text-sm", className)}>
+        {children}
+      </dl>
+    )
+  }
+  components.DescriptionItem = function ShadcnDescriptionItem({
+    label,
+    classNames,
+    className,
+    children,
+  }: DescriptionItemSlotProps) {
+    return (
+      <div
+        data-slot="description-item"
+        className={cx("grid gap-1 sm:grid-cols-[12rem_minmax(0,1fr)] sm:gap-4", className)}
+      >
+        {label !== null && label !== undefined && label !== "" ? (
+          <dt className={cx("text-muted-foreground", classNames?.label)}>{label}</dt>
+        ) : null}
+        <dd className={cx("font-medium", classNames?.value)}>{children}</dd>
+      </div>
+    )
+  }
+  components.EmptyState = function ShadcnEmptyState({
+    icon,
+    title,
+    description,
+    action,
+    className,
+  }: EmptyStateSlotProps) {
+    return (
+      <div data-slot="empty-state" className={cx("flex flex-col items-center gap-2 py-10 text-center", className)}>
+        {icon ? <div className="text-muted-foreground">{icon}</div> : null}
+        <p className="font-medium">{title}</p>
+        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+        {action ? <div className="pt-2">{action}</div> : null}
+      </div>
+    )
+  }
+
   return defineAdapter({ name: options.name ?? "shadcn", components, confirm: options.confirm, notify: options.notify })
 }
diff --git a/src/adapters/shadcn/shadcn.test.tsx b/src/adapters/shadcn/shadcn.test.tsx
index f5a7808..444d064 100644
--- a/src/adapters/shadcn/shadcn.test.tsx
+++ b/src/adapters/shadcn/shadcn.test.tsx
@@ -17,8 +17,9 @@ testAdapter(shadcn)
 describe("the shadcn adapter", () => {
   it("only fills the slots whose components are given", () => {
     const partial = createShadcnAdapter({ Input: ui.Input })
-    expect(Object.keys(partial.components).sort()).toEqual(["Date", "File", "Input", "Number"])
-    expect(createShadcnAdapter({}).components).toEqual({})
+    const layout = ["DescriptionItem", "DescriptionList", "EmptyState", "Form"]
+    expect(Object.keys(partial.components).sort()).toEqual(["Date", "File", "Input", "Number", ...layout].sort())
+    expect(Object.keys(createShadcnAdapter({}).components).sort()).toEqual(layout)
   })
 
   it("renders shadcn's own markup", () => {
diff --git a/src/components/listing.test.tsx b/src/components/listing.test.tsx
new file mode 100644
index 0000000..ba30445
--- /dev/null
+++ b/src/components/listing.test.tsx
@@ -0,0 +1,186 @@
+import { fireEvent, render, screen, within } from "@testing-library/react"
+
+import { FormsProvider } from "../core/provider"
+import { Form } from "./form"
+import {
+  BulkActions,
+  Filter,
+  FilterSubmit,
+  NoItems,
+  Pagination,
+  PerPage,
+  SearchForm,
+  Table,
+  TableCell,
+  TableEmptyRow,
+  TableHeading,
+  TableRow,
+} from "./listing"
+
+const users = [
+  {
+    id: 1,
+    name: "ޢާއިޝަތު",
+    active: true,
+    role: { value: "admin", label: "Admin", color: "success" },
+    tags: ["a", "b"],
+  },
+  { id: 2, name: "އިބްރާހީމް", active: false, role: null, tags: [] },
+]
+
+function values(form: HTMLFormElement) {
+  return new FormData(form)
+}
+
+describe("Table", () => {
+  it("selects rows, selects all, and formats cells", () => {
+    const { container } = render(
+      <Form>
+        <Table model="users" headers={<TableHeading label="Name" />} striped>
+          {users.map((user) => (
+            <TableRow key={user.id} model={user}>
+              <TableCell name="name" />
+              <TableCell name="active" />
+              <TableCell name="role" />
+              <TableCell name="tags" />
+            </TableRow>
+          ))}
+        </Table>
+      </Form>,
+    )
+    const form = container.querySelector("form")!
+    expect(screen.getByText("ޢާއިޝަތު")).toBeInTheDocument()
+    expect(screen.getByText("Yes")).toBeInTheDocument()
+    expect(screen.getByText("Admin")).toHaveAttribute("data-tone", "success")
+    expect(screen.getByText("a, b")).toBeInTheDocument()
+    fireEvent.click(screen.getByLabelText("Select 1"))
+    expect(values(form).getAll("users[]")).toEqual(["1"])
+    const all = screen.getByLabelText("Select All") as HTMLInputElement
+    expect(all.indeterminate).toBe(true)
+    fireEvent.click(all)
+    expect(values(form).getAll("users[]")).toEqual(["1", "2"])
+    fireEvent.click(all)
+    expect(values(form).getAll("users[]")).toEqual([])
+  })
+
+  it("wraps the table in a bulk actions form", () => {
+    const { container } = render(
+      <Table
+        model="users"
+        bulkForm={<BulkActions actions={{ delete: "Delete" }} />}
+        bulkFormAction="/users/bulk"
+        noCheckbox
+      >
+        <TableRow model={users[0]}>
+          <TableCell name="name" />
+        </TableRow>
+        <TableEmptyRow columns={3}>Nothing</TableEmptyRow>
+      </Table>,
+    )
+    const form = container.querySelector("form")!
+    expect(form).toHaveAttribute("action", "/users/bulk")
+    expect(within(form).getByRole("option", { name: "Delete" })).toBeInTheDocument()
+    expect(values(form).get("redirect")).toBe(window.location.href)
+    expect(screen.getByText("Nothing")).toHaveAttribute("colspan", "3")
+    expect(container.querySelector('input[name="users[]"]')).toBeNull()
+  })
+
+  it("sorts by submitting the filter form", () => {
+    const submit = vi.fn((event: Event) => event.preventDefault())
+    render(
+      <>
+        <Form id="filter" method="GET" action="/users">
+          <Filter>
+            <span />
+          </Filter>
+        </Form>
+        <Table model="users" headers={<TableHeading label="Name" sortable="name" />} />
+      </>,
+    )
+    const form = document.getElementById("filter") as HTMLFormElement
+    form.addEventListener("submit", submit)
+    fireEvent.click(screen.getByRole("button", { name: "Sort by Name" }))
+    expect(submit).toHaveBeenCalled()
+    expect(values(form).get("orderby")).toBe("name")
+    expect(values(form).get("order")).toBe("ASC")
+    expect(document.querySelector("[data-sort-field=name]")).toHaveAttribute("aria-sort", "none")
+  })
+})
+
+describe("filters", () => {
+  it("renders the filter, export and clear buttons", () => {
+    render(
+      <Form>
+        <FilterSubmit cancelUrl="/users" export={{ xlsx: "Excel", csv: "CSV" }} />
+        <PerPage amounts={[10, 25]} perPage={50} />
+      </Form>,
+    )
+    expect(screen.getByRole("button", { name: "Filter" })).toHaveAttribute("type", "submit")
+    expect(screen.getByRole("button", { name: "Export" })).toHaveAttribute("value", "xlsx")
+    expect(screen.getByText("Clear").closest("a")).toHaveAttribute("href", "/users")
+    expect(screen.getByRole("menuitem", { name: "CSV" })).toBeInTheDocument()
+    // The current page size is kept even when it isn't one of the amounts.
+    expect(screen.getByRole("option", { name: "50" })).toBeInTheDocument()
+    expect(screen.getByLabelText("Per page")).toHaveValue("50")
+  })
+
+  it("renders a single export button and a search form", () => {
+    render(
+      <>
+        <Form>
+          <FilterSubmit cancelUrl="/users" export />
+        </Form>
+        <SearchForm action="/users" />
+      </>,
+    )
+    expect(screen.getByRole("button", { name: "Export" })).toHaveAttribute("value", "1")
+    const search = screen.getByPlaceholderText("Search...")
+    expect(search).toHaveAttribute("name", "search")
+    expect(search.closest("form")).toHaveAttribute("method", "GET")
+  })
+})
+
+describe("NoItems", () => {
+  it("shows the create button when allowed", () => {
+    render(
+      <FormsProvider authorize={(ability) => ability === "create"}>
+        <NoItems model="App\\Models\\User" modelType="users" createAction="/users/create" icon="fa-solid fa-users" />
+      </FormsProvider>,
+    )
+    expect(screen.getByText("Let's create some new users.")).toBeInTheDocument()
+    expect(screen.getByText("Create New").closest("a")).toHaveAttribute("href", "/users/create")
+  })
+
+  it("hides it without permission", () => {
+    render(<NoItems model="App\\Models\\User" title="ހުސް" message="އެއްވެސް އެއްޗެއް ނެތް" />)
+    expect(screen.getByText("ހުސް")).toBeInTheDocument()
+    expect(screen.queryByText("Create New")).not.toBeInTheDocument()
+  })
+})
+
+describe("Pagination", () => {
+  it("links to pages of a resource collection, keeping the query", () => {
+    const { container } = render(<Pagination paginator={{ meta: { current_page: 3, last_page: 9, per_page: 10 } }} />)
+    expect(container.querySelector('a[href="?page=4"]')).toBeInTheDocument()
+    expect(screen.getByText("…", { exact: false })).toBeInTheDocument()
+    expect(screen.getByLabelText("Page 3")).toHaveAttribute("aria-current", "page")
+  })
+
+  it("calls onPageChange with buttons", () => {
+    const onPageChange = vi.fn()
+    render(<Pagination paginator={{ current_page: 1, last_page: 2, per_page: 10 }} onPageChange={onPageChange} />)
+    fireEvent.click(screen.getByLabelText("Next"))
+    expect(onPageChange).toHaveBeenCalledWith(2)
+  })
+
+  it("shows previous / next for cursor paginators", () => {
+    render(<Pagination paginator={{ next_cursor: "abc", next_page_url: "/users?cursor=abc", prev_page_url: null }} />)
+    expect(screen.getByText("Next").closest("a")).toHaveAttribute("href", "/users?cursor=abc")
+    expect(screen.getByText("Previous").closest("a")).toHaveAttribute("aria-disabled", "true")
+  })
+
+  it("renders nothing for one page", () => {
+    const { container } = render(<Pagination paginator={{ current_page: 1, last_page: 1, per_page: 10 }} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+})
diff --git a/src/testing/index.tsx b/src/testing/index.tsx
index c6b1ac2..23bd1bf 100644
--- a/src/testing/index.tsx
+++ b/src/testing/index.tsx
@@ -313,9 +313,9 @@ export function adapterConformance(
         await waitFor(() => equal(submitted, 1, "submits"))
         const busy = () => {
           const b = screen.getByRole("button", { name: /Save/ }) as HTMLButtonElement
-          return b.disabled || b.getAttribute("aria-busy") === "true" || b.getAttribute("data-loading") !== null
+          return b.getAttribute("aria-busy") === "true" || b.getAttribute("data-loading") !== null
         }
-        await waitFor(() => check(busy(), "the button must be disabled or aria-busy while processing"))
+        await waitFor(() => check(busy(), "the button must show aria-busy (or data-loading) while processing"))
         await act(async () => resolve())
       },
     },
diff --git a/vitest.config.ts b/vitest.config.ts
index e97a7e5..f9efeb5 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -16,6 +16,8 @@ export default defineConfig({
       include: ["src/**/*.{ts,tsx}"],
       exclude: ["src/**/*.test.{ts,tsx}", "src/**/types.ts"],
       reporter: ["text-summary", "lcov", "json-summary"],
+      // Onu's maps adapter needs Google Maps, so it is only typechecked.
+      thresholds: { lines: 85, statements: 82, functions: 82, branches: 68 },
     },
   },
 })

From 41eb14a07158a6dedb62bcc4b022507d3910c3e0 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 14:01:06 +0500
Subject: [PATCH 16/18] Docs: pnpm 10.34 Git build approval;
 table_array_separator agreed with Blade v2

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/installation-and-setup.md | 2 ++
 docs/parity.md                 | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/installation-and-setup.md b/docs/installation-and-setup.md
index bd2ac84..0321970 100644
--- a/docs/installation-and-setup.md
+++ b/docs/installation-and-setup.md
@@ -23,6 +23,8 @@ With pnpm 10, allow the build scripts of the package and of `@javaabu/i18n` in y
 }
 ```
 
+From pnpm 10.34, packages installed from Git must be allowed by their exact source: pnpm prints the line to add (`"@javaabu/forms@https://codeload.github.com/Javaabu/react-forms/tar.gz/<commit>"`), or run `pnpm approve-builds`. This goes away once the package is on npm.
+
 # Choose a UI adapter
 
 Without an adapter, the components render plain HTML. Pick the adapter for your UI kit once, at the root of your app.
diff --git a/docs/parity.md b/docs/parity.md
index f3972f9..14202e5 100644
--- a/docs/parity.md
+++ b/docs/parity.md
@@ -3,7 +3,7 @@ title: Parity with javaabu/forms
 sidebar_position: 1.6
 ---
 
-`@javaabu/forms` (React) and [`javaabu/forms`](https://github.com/Javaabu/forms) v2 (Blade) have the same components, attributes, value precedence, ids, labels, errors and strings, so a form moves between a Blade view and an Inertia React page without being redesigned. This page is the React side of the matrix. The Blade side is [`docs/parity.md` in javaabu/forms](https://github.com/Javaabu/forms/blob/next-gen/docs/parity.md). Open questions go in [react-forms#18](https://github.com/Javaabu/react-forms/issues/18).
+`@javaabu/forms` (React) and [`javaabu/forms`](https://github.com/Javaabu/forms) v2 (Blade) have the same components, attributes, value precedence, ids, labels, errors and strings, so a form moves between a Blade view and an Inertia React page without being redesigned. This page is the React side of the matrix. The Blade side is [`docs/parity.md` in javaabu/forms](https://github.com/Javaabu/forms/blob/next-gen/docs/parity.md). Decisions were settled in [react-forms#18](https://github.com/Javaabu/react-forms/issues/18).
 
 **Naming.** Blade components are kebab-case and React components PascalCase (`<x-forms::link-button>` ↔ `<LinkButton>`). Blade attributes are kebab-case and React props camelCase (`show-label` ↔ `showLabel`). A Blade named slot is a React prop of the same name (`<x-slot:help>` ↔ `help`), and the default slot is `children`. Blade's attribute bag (`id`, `class`, `disabled`, `min`, …) is the matching React prop (`className` for `class`).
 
@@ -111,6 +111,6 @@ Both packages read the same keys, `forms::strings.<key>`, so an app's `lang/vend
 | --- | --- |
 | Every key of Blade v1's `strings.php` | ✅ |
 | `clear`, `close`, `create_new`, `select_all`, `select_row` (with `:name`), `bulk_action`, `apply`, `filter`, `export`, `export_title`, `export_options`, `pagination`, `per_page`, `previous`, `next`, `error_summary_title`, `no_items_title`, `no_items_message`, `items` | ✅ (added in v2) |
-| `table_array_separator` | ≠ React `", "` / `"، "`; see #18 |
+| `table_array_separator` | ✅ `", "` (en) / `"، "` (dv) in both, agreed in #18 (Blade v1 was `","`) |
 | `pagination_showing`, `sections` | 🅱️ Blade's paginator and tabs views |
 | `sort_by`, `page`, `search`, `add_option`, `loading`, `error_loading_options`, `uploading`, `removing`, `are_you_sure`, `remove_file_confirm`, `remove_file_confirm_button`, `cancel`, `upload_error`, `remove_error`, `file_too_large`, `file_type_not_allowed`, `confirm_text`, `confirm_button`, `delete_confirm_text`, `delete_confirm_button`, `submit_failed`, `thaana_toggle`, `kb`, `mb`, `gb` | ⚛️ Client-side behaviour (js-utilities' messages and the React components' own text) |

From 70cbc11f805f3bc2b4af93c99fefff6ace0d6ccb Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 15:19:49 +0500
Subject: [PATCH 17/18] Portable declarations when built from Git inside a pnpm
 store

Wysiwyg, OnuWysiwyg and OnuMap get explicit return types and a React type
import, so declaration emit no longer reaches into node_modules/@types/react
(TS2883 when the store is under node_modules, as on GitHub Actions). A unit
test requires a React import in every .tsx module.

Refs #20

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/portable-declarations.md |  5 +++++
 AGENTS.md                           |  1 +
 src/adapters/onu/editor.tsx         |  3 ++-
 src/adapters/onu/maps.tsx           |  3 ++-
 src/components/wysiwyg.tsx          |  3 ++-
 src/portability.test.ts             | 19 +++++++++++++++++++
 6 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/portable-declarations.md
 create mode 100644 src/portability.test.ts

diff --git a/.changeset/portable-declarations.md b/.changeset/portable-declarations.md
new file mode 100644
index 0000000..1b54e8a
--- /dev/null
+++ b/.changeset/portable-declarations.md
@@ -0,0 +1,5 @@
+---
+"@javaabu/forms": patch
+---
+
+Installing from Git no longer fails in CI when pnpm's store is inside `node_modules` (TS2883 during the `prepare` build). `Wysiwyg`, and the Onu editor and maps slots, have explicit return types.
diff --git a/AGENTS.md b/AGENTS.md
index a5ea4cd..b826806 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -26,6 +26,7 @@
 - `src/core` and `src/components` never import a UI kit. New UI needs a slot in `src/core/adapter.ts`, an HTML implementation, adapter implementations where they exist, and a conformance case in `src/testing`.
 - Slots are controlled, submit natively, and put `id` / `aria-*` on the focusable element (see `docs/advanced-usage/adapters.md`).
 - No hard-coded English: add the line to `src/core/locales/en.ts` and `dv.ts` (real Dhivehi; list uncertain lines in `docs/advanced-usage/dhivehi-and-rtl.md`), read it with `useFormsTranslation().t()`. Keys match Blade's `forms::strings.*`.
+- Every `.tsx` module that exports a component imports React (`import type * as React from "react"` at least), or its declarations can't be emitted portably when built inside a `node_modules` folder (#20; the `git-install` CI job checks it).
 - Logical CSS only (`ms-`, `pe-`, `start-`, `text-start`); ESLint rejects physical utilities.
 - Every change needs tests (`*.test.ts(x)` next to the code, Thaana in user-facing cases), docs (and `llms.txt` / `docs/api-reference.md` for new pages or exports; `src/docs.test.ts` checks them) and a changeset (`pnpm changeset`).
 - Work on the `next-gen` branch. Don't commit to `main`, tag or publish.
diff --git a/src/adapters/onu/editor.tsx b/src/adapters/onu/editor.tsx
index b048eac..63e33a3 100644
--- a/src/adapters/onu/editor.tsx
+++ b/src/adapters/onu/editor.tsx
@@ -1,10 +1,11 @@
 "use client"
 
+import type * as React from "react"
 import { WysiwygEditor } from "@javaabu/onu/editor"
 
 import { defineAdapter, type WysiwygSlotProps } from "../../core/adapter"
 
-function OnuWysiwyg({ value, onValueChange, ...props }: WysiwygSlotProps) {
+function OnuWysiwyg({ value, onValueChange, ...props }: WysiwygSlotProps): React.JSX.Element {
   return (
     <WysiwygEditor
       {...props}
diff --git a/src/adapters/onu/maps.tsx b/src/adapters/onu/maps.tsx
index 6adf275..55ab818 100644
--- a/src/adapters/onu/maps.tsx
+++ b/src/adapters/onu/maps.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import type * as React from "react"
 import { MapPicker, MapPolygon, MapRadius, type PolygonCollection } from "@javaabu/onu/maps"
 
 import { defineAdapter, type MapSlotProps } from "../../core/adapter"
@@ -26,7 +27,7 @@ function OnuMap({
   polygons,
   onPolygonsChange,
   ...props
-}: MapSlotProps) {
+}: MapSlotProps): React.JSX.Element {
   if (mode === "polygon") {
     return (
       <MapPolygon
diff --git a/src/components/wysiwyg.tsx b/src/components/wysiwyg.tsx
index 286a733..26de005 100644
--- a/src/components/wysiwyg.tsx
+++ b/src/components/wysiwyg.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import type * as React from "react"
 import { useFieldValue } from "../core/binding"
 import { useUi } from "../core/provider"
 import { usePublishField } from "../core/registry"
@@ -18,7 +19,7 @@ export interface WysiwygProps extends FieldProps, PlaceholderProps {
  * that submits HTML. The editor comes from the adapter (`@javaabu/forms/onu/editor`
  * for Onu's Tiptap editor); without one it is a plain textarea.
  */
-export function Wysiwyg(props: WysiwygProps) {
+export function Wysiwyg(props: WysiwygProps): React.JSX.Element {
   const ui = useUi()
   const { field, rest } = splitFieldProps(props)
   const { value, placeholder, showPlaceholder, onChange, className } = rest
diff --git a/src/portability.test.ts b/src/portability.test.ts
new file mode 100644
index 0000000..d518e77
--- /dev/null
+++ b/src/portability.test.ts
@@ -0,0 +1,19 @@
+import { readdirSync, readFileSync, statSync } from "node:fs"
+import { join, relative } from "node:path"
+
+const src = import.meta.dirname
+
+function modules(dir: string): string[] {
+  return readdirSync(dir).flatMap((name) => {
+    const path = join(dir, name)
+    if (statSync(path).isDirectory()) return modules(path)
+    return name.endsWith(".tsx") && !name.endsWith(".test.tsx") ? [path] : []
+  })
+}
+
+// Declarations must name React's types through the module's own import. Without one, TypeScript reaches into
+// node_modules/@types/react, which fails (TS2883) when the package is built inside a pnpm store (#20).
+it("imports React in every .tsx module, so declarations are portable", () => {
+  const missing = modules(src).filter((path) => !/from "react"/.test(readFileSync(path, "utf8")))
+  expect(missing.map((path) => relative(src, path))).toEqual([])
+})

From 9ba003a130a02bc5411a1e257c66a6c504a77d21 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Wed, 4 Nov 2026 15:19:49 +0500
Subject: [PATCH 18/18] CI: install this commit from GitHub with the pnpm store
 under node_modules

Reproduces the setup of #20 so it can't regress.

Closes #20

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .github/workflows/ci.yml | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index bba850e..ba01824 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -38,3 +38,40 @@ jobs:
       - run: pnpm build
       - name: Examples
         run: pnpm examples:build
+
+  git-install:
+    name: Install from Git (store under node_modules)
+    # Apps install `github:Javaabu/react-forms#next-gen`, so pnpm builds the package (`prepare`) in a temp
+    # folder inside its store. On GitHub Actions that store is under `node_modules`, which once broke
+    # declaration emit (TS2883, #20). Install this commit the same way, into a fresh app.
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name == github.repository
+    steps:
+      - uses: actions/checkout@v5
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 22
+      - name: Install @javaabu/forms from Git into a new app
+        env:
+          SHA: ${{ github.event.pull_request.head.sha || github.sha }}
+        run: |
+          app="$RUNNER_TEMP/app"
+          mkdir -p "$app" && cd "$app"
+          cat > package.json <<JSON
+          {
+            "name": "git-install-check",
+            "private": true,
+            "type": "module",
+            "dependencies": {
+              "@javaabu/forms": "github:${{ github.repository }}#$SHA",
+              "react": "^19.0.0",
+              "react-dom": "^19.0.0"
+            },
+            "pnpm": { "onlyBuiltDependencies": ["@javaabu/forms", "@javaabu/i18n"] }
+          }
+          JSON
+          pnpm install --store-dir "$RUNNER_TEMP/store/node_modules/.pnpm-store"
+          test -f node_modules/@javaabu/forms/dist/index.d.ts
+          node -e 'const f = require("@javaabu/forms"); if (typeof f.Form !== "function") process.exit(1)'
+          node --input-type=module -e 'import { Form } from "@javaabu/forms"; import { html } from "@javaabu/forms/html"; if (typeof Form !== "function" || html.name !== "html") process.exit(1)'