@imfusion/web-ui 0.5.1-dev.21.g2accd17d → 0.5.1-dev.23.g913f03e6

package/dist/{tabs-DqBFSqq6.js → tabs-CVp_SgBl.js}

@@ -3786,4 +3786,4 @@ function Mo({ className: e, ...t }) {
 }
 Mo.displayName = "Tabs.Panel";
 //#endregion
-export { Hn as $, M as $n, Vt as $t, Kr as A, Ue as An, xn as At, Tr as B, J as Bn, pn as Bt, ha as C, st as Cn, Tn as Ct, gi as D, Je as Dn, kn as Dt, hi as E, $e as En, wn as Et, Fr as F, X as Fn, vn as Ft, mr as G, F as Gn, en as Gt, Sr as H, V as Hn, fn as Ht, Nr as I, ke as In, yn as It, fr as J, T as Jn, Jt, pr as K, N as Kn, $t as Kt, Mr as L, Ee as Ln, hn as Lt, zr as M, Pe as Mn, Cn as Mt, Ir as N, Ae as Nn, bn as Nt, mi as O, Ke as On, Dn as Ot, Pr as P, je as Pn, _n as Pt, Kn as Q, k as Qn, Kt as Qt, kr as R, be as Rn, mn as Rt, _a as S, ct as Sn, jn as St, ra as T, rt as Tn, En as Tt, br as U, B as Un, sn as Ut, Cr as V, U as Vn, ln as Vt, hr as W, L as Wn, tn as Wt, Gn as X, ee as Xn, qt as Xt, gr as Y, f as Yn, Zt as Yt, Un as Z, u as Zn, Gt as Zt, Ta as _, _t as _n, In as _t, Do as a, jt as an, D as ar, Yn as at, fa as b, ft as bn, Fn as bt, to as c, Pt as cn, g as cr, ur as ct, Xa as d, Ot as dn, E as dr, Bn as dt, zt as en, A as er, Jn as et, Ua as f, gt as fn, zn as ft, ka as g, vt as gn, Ln as gt, Oa as h, yt as hn, Rn as ht, jo as i, Dt as in, h as ir, er as it, Wr as j, Z as jn, Sn as jt, ai as k, qe as kn, An as kt, $a as l, xt as ln, v as lr, qn as lt, Na as m, Ft as mn, Vn as mt, Oo as n, At as nn, w as nr, $n as nt, ko as o, Et as on, p as or, sr as ot, Ra as p, bt as pn, dr as pt, vr as q, O as qn, Qt as qt, Mo as r, St as rn, m as rr, Xn as rt, bo as s, Tt as sn, _ as sr, cr as st, Ao as t, Lt as tn, d as tr, Qn as tt, Za as u, Ct as un, y as ur, Zn as ut, ma as v, It as vn, Nn as vt, pa as w, it as wn, On as wt, da as x, ut as xn, Mn as xt, ga as y, pt as yn, Pn as yt, Or as z, _e as zn, dn as zt };
+export { Hn as $, ee as $n, Vt as $t, Kr as A, Je as An, xn as At, Tr as B, Ee as Bn, pn as Bt, ha as C, ct as Cn, Tn as Ct, gi as D, rt as Dn, kn as Dt, hi as E, it as En, wn as Et, Fr as F, Pe as Fn, vn as Ft, mr as G, V as Gn, en as Gt, Sr as H, _e as Hn, fn as Ht, Nr as I, Ae as In, yn as It, fr as J, F as Jn, Jt, pr as K, B as Kn, $t as Kt, Mr as L, je as Ln, hn as Lt, zr as M, qe as Mn, Cn as Mt, Ir as N, Ue as Nn, bn as Nt, mi as O, Xe as On, Dn as Ot, Pr as P, Z as Pn, _n as Pt, Kn as Q, f as Qn, Kt as Qt, kr as R, X as Rn, mn as Rt, _a as S, ut as Sn, jn as St, ra as T, st as Tn, En as Tt, br as U, J as Un, sn as Ut, Cr as V, be as Vn, ln as Vt, hr as W, U as Wn, tn as Wt, Gn as X, O as Xn, qt as Xt, gr as Y, N as Yn, Zt as Yt, Un as Z, T as Zn, Gt as Zt, Ta as _, _t as _n, In as _t, Do as a, jt as an, w as ar, Yn as at, fa as b, dt as bn, Fn as bt, to as c, Pt as cn, D as cr, ur as ct, Xa as d, Ot as dn, g as dr, Bn as dt, zt as en, u as er, Jn as et, Ua as f, gt as fn, v as fr, zn as ft, ka as g, vt as gn, Ln as gt, Oa as h, yt as hn, Rn as ht, jo as i, Dt as in, d as ir, er as it, Wr as j, Ke as jn, Sn as jt, ai as k, $e as kn, An as kt, $a as l, xt as ln, p as lr, qn as lt, Na as m, Ft as mn, E as mr, Vn as mt, Oo as n, At as nn, M as nr, $n as nt, ko as o, Et as on, m as or, sr as ot, Ra as p, bt as pn, y as pr, dr as pt, vr as q, L as qn, Qt as qt, Mo as r, St as rn, A as rr, Xn as rt, bo as s, Tt as sn, h as sr, cr as st, Ao as t, Lt as tn, k as tr, Qn as tt, Za as u, Ct as un, _ as ur, Zn as ut, ma as v, It as vn, Nn as vt, pa as w, ot as wn, On as wt, da as x, ft as xn, Mn as xt, ga as y, pt as yn, Pn as yt, Or as z, ke as zn, dn as zt };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.5.1-dev.21.g2accd17d",
+  "version": "0.5.1-dev.23.g913f03e6",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "license": "UNLICENSED",

package/src/docgen/doc.gen.json

@@ -1194,6 +1194,333 @@
       }
     ]
   },
+  "field": {
+    "root": {
+      "name": "Field.Root",
+      "description": "Field.Root — groups a label, control, validation state, and supporting copy.",
+      "props": [
+        {
+          "name": "actionsRef",
+          "required": false,
+          "type": "RefObject<FieldRootActions | null>",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "className",
+          "required": false,
+          "type": "string | ((state: FieldRootState) => string)",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "dirty",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": ""
+        },
+        {
+          "name": "invalid",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "name",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "render",
+          "required": false,
+          "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldRootState>",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "style",
+          "required": false,
+          "type": "| CSSProperties\n| ((state: FieldRootState) => CSSProperties)",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "touched",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "validate",
+          "required": false,
+          "type": "(\n  value: unknown,\n  formValues: Record<string, any>\n) =>\n  | string\n  | string[]\n  | Promise<string | string[] | null>\n  | null",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "validationDebounceTime",
+          "required": false,
+          "type": "number",
+          "defaultValue": "0",
+          "description": ""
+        },
+        {
+          "name": "validationMode",
+          "required": false,
+          "type": "FormValidationMode",
+          "defaultValue": "onSubmit",
+          "description": ""
+        }
+      ]
+    },
+    "subComponents": [
+      {
+        "name": "Field.Control",
+        "description": "Field.Control — a native input control with Field labeling and validation.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: FieldControlState) => string)",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "defaultValue",
+            "required": false,
+            "type": "string | number | readonly string[]",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "onValueChange",
+            "required": false,
+            "type": "(\n  value: string,\n  eventDetails: {\n    reason: \"none\";\n    event: Event;\n    cancel: () => void;\n    allowPropagation: () => void;\n    isCanceled: boolean;\n    isPropagationAllowed: boolean;\n    trigger: Element;\n  }\n) => void",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldControlState>",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: FieldControlState) => CSSProperties)",
+            "defaultValue": null,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "name": "Field.Description",
+        "description": "Field.Description — supporting information for a field.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: FieldDescriptionState) => string)",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldDescriptionState>",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: FieldDescriptionState) => CSSProperties)",
+            "defaultValue": null,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "name": "Field.Error",
+        "description": "Field.Error — an inline validation message shown when its match condition fails.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: FieldErrorState) => string)",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "match",
+            "required": false,
+            "type": "boolean | keyof ValidityState",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldErrorState>",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: FieldErrorState) => CSSProperties)",
+            "defaultValue": null,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "name": "Field.Item",
+        "description": "Field.Item — groups one checkable option with its label and description.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: FieldItemState) => string)",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "disabled",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": ""
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldItemState>",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: FieldItemState) => CSSProperties)",
+            "defaultValue": null,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "name": "Field.Label",
+        "description": "Field.Label — an accessible label automatically associated with the control.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: FieldLabelState) => string)",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "nativeLabel",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "true",
+            "description": ""
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldLabelState>",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: FieldLabelState) => CSSProperties)",
+            "defaultValue": null,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "name": "Field.Validity",
+        "description": "Field.Validity — renderless access to the field validity data for custom messages.\nIts function child owns the rendered element and therefore its identity and styling.",
+        "props": []
+      }
+    ]
+  },
+  "fieldset": {
+    "root": {
+      "name": "Fieldset.Root",
+      "description": "Fieldset.Root — semantic grouping for related form controls and a shared legend.",
+      "props": [
+        {
+          "name": "className",
+          "required": false,
+          "type": "string | ((state: FieldsetRootState) => string)",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "render",
+          "required": false,
+          "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldsetRootState>",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "style",
+          "required": false,
+          "type": "| CSSProperties\n| ((state: FieldsetRootState) => CSSProperties)",
+          "defaultValue": null,
+          "description": ""
+        }
+      ]
+    },
+    "subComponents": [
+      {
+        "name": "Fieldset.Legend",
+        "description": "Fieldset.Legend — the accessible label for its related controls.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: FieldsetLegendState) => string)",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldsetLegendState>",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: FieldsetLegendState) => CSSProperties)",
+            "defaultValue": null,
+            "description": ""
+          }
+        ]
+      }
+    ]
+  },
   "input": {
     "root": {
       "name": "Input",

package/src/llms/llms.gen.txt

@@ -73,6 +73,18 @@ Off-canvas panel that slides in from a screen edge. Use for mobile navigation, s
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .drawer (jq: jq '.drawer' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/drawer.md
 
+## Field
+- category: Inputs, status: stable
+Accessible field composition for a label, form control, supporting description, and inline validation message. Use it to associate a control such as Input, Checkbox, or Select with field state including valid, invalid, dirty, touched, filled, and focused.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .field (jq: jq '.field' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://base-ui.com/react/components/field.md
+
+## Fieldset
+- category: Inputs, status: stable
+Semantic grouping for related form controls with a shared legend. Also called a form group; use it to communicate a common topic and propagate disabled state without introducing a decorative container.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .fieldset (jq: jq '.fieldset' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://base-ui.com/react/components/fieldset.md
+
 ## ImageDisplayOptions
 - category: Inputs, status: experimental
 A panel or toolbar of controls bound to an image dataset's display options.

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

@@ -2,14 +2,16 @@
 name: imf-web-ui-update
 description:
   "Update @imfusion/web-ui in a consumer repository: refresh the package and vendored skills, audit and optionally install
-  lifecycle hooks, handle conflicts, verify the result, and obtain explicit approval before committing."
+  lifecycle hooks, verify the base update, then audit and optionally migrate affected or custom consumer components in a
+  separate approved commit."
 argument-hint: "[--dry-run] [optional version or reason]"
 ---
 
 # imf-web-ui-update
 
-Update a repository that consumes `@imfusion/web-ui`. Preserve existing project choices and user work. Never commit without a
-fresh explicit approval.
+Update a repository that consumes `@imfusion/web-ui`. Preserve existing project choices and user work. The workflow has two
+commits: the dependency/tooling update first, then an optional consumer migration. Never commit without a fresh explicit
+approval.
 
 ## Rules
 
@@ -23,6 +25,12 @@ fresh explicit approval.
 - A dirty file that the workflow needs to modify is a conflict. Stop and report it. This includes package files, installed
   skill directories, the `AGENTS.md` installer fence, hook files, and hook settings.
 - Do not hand-edit installer-owned skills, the `AGENTS.md` fenced block, or installer-owned hook files.
+- Keep the base update and consumer migration in separate commits. Do not begin the migration audit until the base update
+  commit is complete.
+- Treat the installed package version before the update as the comparison baseline. There is no assumed changelog.
+- A migration candidate is a custom consumer implementation whose behavior overlaps with a current web-ui component, or an
+  existing web-ui usage affected by changed types or documented API. Do not infer a replacement from a name alone; inspect
+  the implementation and the current component documentation/types.
 
 ## Preflight
 
@@ -32,7 +40,7 @@ fresh explicit approval.
 4. Inspect `.agents/skills/`, `.claude/skills/`, the `AGENTS.md` fence, `.claude/settings.json`, and `.agents/hooks/`.
 5. Check for another package-manager process. Stop on any conflict or ambiguous target.
 
-## Update
+## Base update
 
 In a non-dry run, update the dependency with the detected manager:
 
@@ -71,7 +79,7 @@ Audit these responsibilities separately: session start, prompt submit, and post-
 
 A declined hook offer is valid. Report `hooks: skipped by user` and continue.
 
-## Conflict and verification
+## Verification
 
 After each mutating command, compare `git status --short` with the preflight snapshot.
 
@@ -83,12 +91,18 @@ Classify paths as:
 
 On conflict, stop. Never use `git restore`, `git reset`, `git clean`, or broad staging to hide it.
 
-Run only scripts documented by the frontend's `package.json`. Verify the dependency/lockfile, current skill markers, the
-`AGENTS.md` fence, hook coverage, and the final path list. In dry-run mode, say that mutation-dependent checks were skipped.
+Run the frontend package's documented full verification after the base update. Read its `package.json` scripts and choose
+commands that cover typechecking, linting, tests, and building. Prefer one documented aggregate `verify`/`check` script when
+it covers those responsibilities; otherwise run the documented non-watch scripts for the responsibilities that exist. Do not
+invent script names or run watch/dev scripts. A type or build failure is a base-update conflict to resolve before the base
+commit, not a migration finding to defer.
 
-## Report and approval
+Verify the dependency/lockfile, current skill markers, the `AGENTS.md` fence, hook coverage, and the final path list. In
+dry-run mode, say that mutation-dependent checks were skipped.
 
-Before any commit, show this concise report:
+## Base update report and approval
+
+Before the base commit, show this concise report:
 
 ```text
 @imfusion/web-ui update report
@@ -107,13 +121,45 @@ answer. If denied, leave the changes uncommitted.
 
 Dry-run mode: state **“Dry run complete; no changes or commit were made.”** Do not mutate or ask for commit approval.
 
+## Consumer migration audit
+
+Begin this phase only after the approved base update has been committed. Record the old and new package versions from the
+pre-update and current manifests/lockfile. Use the current package's exported types, generated documentation, and component
+examples as the source of truth. Use the old version's package metadata or repository history when available to identify what
+changed; do not pretend a changelog exists.
+
+Run the same documented full verification again after the base commit. Separate findings into:
+
+- **Compatibility fixes:** existing web-ui imports, props, or usage patterns that no longer typecheck, build, lint, or pass
+  tests.
+- **Changed component usages:** existing components whose current API, behavior, or documented contract changed between the
+  two versions and may need a consumer update, even when the typecheck passes.
+- **Replacement candidates:** custom consumer components, wrappers, or field implementations that overlap with a component
+  now exported by `@imfusion/web-ui`. Inspect their code, styles, and call sites before suggesting a replacement. Include the
+  current custom implementation, the proposed web-ui component, the relevant API/type evidence, and any behavior or styling
+  that still needs to be preserved.
+
+Report these findings separately from the base update. Ask whether to apply the proposed migration. If the user declines,
+leave the consumer code unchanged. If accepted, make only the approved migration changes, run the documented full
+verification again, and show a second report with the migration paths, held-back paths, conflicts, and verification result.
+
+If no findings exist, report that the installed update has no detected compatibility fixes, changed usages, or replacement
+candidates. Do not create an empty migration commit.
+
+## Migration approval
+
+Ask exactly, **“Approve these consumer migration changes and commit them separately?”** Do not commit without an affirmative
+answer. The migration approval is not implied by approval of the base update.
+
 ## Commit
 
-After approval:
+For the base update, after approval:
 
 1. Recheck status and exclude held-back paths.
-2. Stage update-owned paths selectively. Never use `git add .` or `git add -A`.
+2. Stage base update-owned paths selectively. Never use `git add .` or `git add -A`.
 3. Run the repository's commit workflow if it has one, including its required verification and documentation audit. Otherwise
    run documented verification and follow the repository's commit convention.
-4. Commit with a concise imperative message and confirm the commit and final status. Never bypass hooks or amend an unrelated
-   commit after a hook failure.
+4. Commit with a concise imperative message and confirm the commit and final status.
+
+For an approved migration, repeat the same selective staging and documented commit workflow with a separate imperative
+message. Never bypass hooks or amend an unrelated commit after a hook failure.