Priority Sort

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 the local --vibeui-datagrid-001-* variables. A client component: useState holds the ordered list of sort keys, and a third click on a column removes its key. The header is a button filling the whole cell, the direction is declared through aria-sort on th and duplicated by a textual arrow in the markup: it is read aloud together with the name of the column. The priority is shown as a number in a circle and repeated by chips in the toolbar — without it the row order looks random; every chip removes its own key and carries an explicit aria-label. The scrolling is moved into a container with role=region, aria-label and tabindex=0, so the table can be panned from the keyboard too. The row density is switched by the data-density attribute, which changes a single padding variable. 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 and darkens along with it, while the background prop switches on a panel of its own.