@imfusion/web-ui 0.11.1-dev.53.g43897e72 → 0.11.1-dev.54.ge4c44972

package/CHANGELOG.md

@@ -99,6 +99,9 @@
     page, `Button` for actions, and `Link` for destinations.
   - The `imf-web-ui-conventions` `library-boundary` topic reports a native element or local function that duplicates a Web
     UI component, part, or helper such as `initialsFromName`.
+  - Forms use TanStack Form: `imf-web-ui-ux` names it for every form, the `imf-web-ui-conventions` `validation` topic
+    validates user input in the form's validators with the Zod schema, and `imf-web-ui-audit` reports a form whose state and
+    validation are written by hand.
   - `web-ui-dev-new-component`, `web-ui-dev-update-component`, and `web-ui-dev-design-component` draft on the shared
     Web UI Component Drafts canvas: a block per component on its Storybook group's page, one row per fidelity rung.
   - `web-ui-dev-new-component` and `web-ui-dev-update-component` wait for the user to approve the design on the canvas

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.11.1-dev.53.g43897e72",
+  "version": "0.11.1-dev.54.ge4c44972",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",

package/src/llms/skills/imf-web-ui-audit/SKILL.md

@@ -67,7 +67,9 @@ next action is the add from that topic. A Vite config that reads tsconfig `paths
 to drop it and give the `#/` alias through `imports` in `package.json`. A major or minor mismatch between the project and Web
 UI on a package listed under Aligned runtime packages in the `tooling` topic is a Deviation. Report both versions, with
 `npm install <package>@<Web UI's version>` as the fix. A route file that holds several views inline is a Deviation, and so is
-a route whose only view sits alone in its `-` folder. Name the views, with the move as the fix.
+a route whose only view sits alone in its `-` folder. Name the views, with the move as the fix. A form whose state and
+validation are written by hand instead of TanStack Form is a Deviation, however many forms share the pattern. Name each form,
+with TanStack Form and its existing schema as the fix.
 
 ## Topics
 

package/src/llms/skills/imf-web-ui-conventions/SKILL.md

@@ -25,11 +25,11 @@ a gap or to make a deliberate deviation visible; do not refactor a project just
 | [styling](topics/styling.md)                     | Writing CSS or customizing Web UI.                              |
 | [tokens](topics/tokens.md)                       | Choosing an exact token name.                                   |
 | [class-names](topics/class-names.md)             | Mapping variants and `className` to CSS.                        |
-| [validation](topics/validation.md)               | Accepting data from outside the frontend.                       |
+| [validation](topics/validation.md)               | Accepting data from outside the frontend, or building a form.   |
 | [data](topics/data.md)                           | Adding API queries, mutations, or invalidation.                 |
 | [project-structure](topics/project-structure.md) | Adding files or routes.                                         |
 | [testing](topics/testing.md)                     | Deciding what to test.                                          |
-| [tooling](topics/tooling.md)                     | Adding a dependency or configuring a tool.                      |
+| [tooling](topics/tooling.md)                     | Adding a dependency, configuring a tool, or building a form.    |
 | [npm-project](topics/npm-project.md)             | Changing `package.json`, scripts, pins, or Node.                |
 | [git](topics/git.md)                             | Configuring hooks or choosing verification scope.               |
 | [agent-tooling](topics/agent-tooling.md)         | Installing skills or lifecycle hooks.                           |

package/src/llms/skills/imf-web-ui-conventions/templates/AUDIT_CHECKLIST.md

@@ -81,6 +81,7 @@ sections one to one — change a topic's sections and this file follows in the s
 - [ ] Schema first, type derived
 - [ ] TanStack Router search params
 - [ ] Failure handling
+- [ ] Forms
 
 ## Data — `data`
 

package/src/llms/skills/imf-web-ui-conventions/topics/tooling.md

@@ -25,7 +25,8 @@ Use the tool's current documentation rather than memory.
 
 Use the library that already owns the problem. Adopt Form for form rules, Query for caching and refetching, Router for URL
 state, Table for sorting and pagination, and Hotkeys for keyboard shortcuts instead of rebuilding those layers. Web UI only
-shows a key; the app binds it. Keep an existing project choice when it works.
+shows a key; the app binds it. Keep an existing project choice when it works. A layer rebuilt by hand, such as form state in
+`useState`, is not a choice to keep.
 
 ## Devtools
 

package/src/llms/skills/imf-web-ui-conventions/topics/validation.md

@@ -54,3 +54,9 @@ Use `.catch()` for malformed values that can safely fall back. Use `.default()`
 - Use `parse` when invalid data is a contract failure that should reach the normal error boundary.
 - Use `safeParse` when failure is expected and the caller can show a validation message.
 - Keep trimming, coercion, transforms, and defaults in the boundary schema.
+
+## Forms
+
+Build forms with TanStack Form and validate user input in the form's validators with the Zod schema, so a field error and the
+submitted value's type come from one schema. Field values held in `useState` and checked by hand with `safeParse` are a gap,
+even when the project's other forms do the same.

package/src/llms/skills/imf-web-ui-ux/references/forms.md

@@ -1,7 +1,8 @@
 # Form UX
 
-Read this before building a form with more than two fields. The library supplies controls; the form library owns state and
-validation. These rules cover structure and feedback.
+Read this before building a form with more than two fields. Build it with TanStack Form, the form library the
+`imf-web-ui-conventions` tooling topic names: it owns state and validation, and Web UI supplies the controls. These rules
+cover structure and feedback.
 
 ## Structure