Cell Validation

A composite block: imports from @/components/vibeui/ — the install command brings them along with the block. The block owns the layout and its own text, passes the parts props only and leaves their --vibeui-<name>-* palettes alone. The component is self-contained: one file, no npm dependencies, the palette in --vibeui-datagrid-022-*. A client component: the values live in state, the validation is computed on every render, and useId gives stable identifiers for aria-describedby. A field with an error gets aria-invalid and a link to the error text — a red border alone tells a screen reader nothing. Under every cell a line the height of the message is reserved, so the appearance of an error does not move the neighbouring rows. The save button is switched off while errors remain, and their number is declared role=status. The cells are aligned to the top edge: otherwise a row with an error skews its neighbours. The theme comes from the surrounding color-scheme through light-dark(): by default the grid lays no panel under itself, it sits directly on the page background and darkens along with it. The rows prop keeps acting after mounting: the reader's edits are stored alongside it rather than instead of it.