Resizable Columns

The component is self-contained: one file, no dependencies, the palette in --vibeui-datagrid-009-*. A client component: the widths live in state and the drag draft in a ref, so that pointer movement does not drive extra renders. The separator is a button with role=separator, aria-orientation, aria-valuenow, aria-valuemin and aria-valuemax; the left and right arrows change the width in steps of 16 px, so a column can be set up without a mouse. The pointer is captured through setPointerCapture: without it the drag breaks the moment the cursor leaves the header. The widths are applied to the colgroup under table-layout:fixed, otherwise the browser recomputes them from the content. The cell content is truncated with an ellipsis, and the full value stays in title. The theme comes from the surrounding color-scheme through light-dark(): by default the grid lays no panel under itself, it sits on the page background, while the background prop switches on a panel of its own.