open-ds 0.0.0-stage → 0.1.0

package/assets/ui/components/command.tsx

@@ -0,0 +1,145 @@
+/**
+ * Command. A search-first menu of actions, opened from the keyboard.
+ *
+ * From shadcn/ui (new-york-v4, MIT), carried by the schemes whose inventory names it.
+ * Reads the shadcn variables, which theme.css maps onto the scheme's semantic tokens, and the
+ * radius, shadow and text scale that shadcn.css maps onto the scheme's tokens. Dark mode comes
+ * from the tokens, so no dark: classes.
+ */
+"use client";
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn } from "../lib/utils";
+import { SearchIcon } from "lucide-react";
+
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog";
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className={cn("overflow-hidden p-0", className)}>
+        <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />;
+}
+
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

package/assets/ui/components/context-menu.tsx

@@ -0,0 +1,218 @@
+/**
+ * Context menu. A menu on right-click.
+ *
+ * From shadcn/ui (new-york-v4, MIT), carried by the schemes whose inventory names it.
+ * Reads the shadcn variables, which theme.css maps onto the scheme's semantic tokens, and the
+ * radius, shadow and text scale that shadcn.css maps onto the scheme's tokens. Dark mode comes
+ * from the tokens, so no dark: classes.
+ */
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+
+function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;
+}
+
+function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
+}
+
+function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
+}
+
+function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn("px-2 py-1.5 text-sm font-medium text-foreground data-[inset]:pl-8", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

package/assets/ui/components/data-table.tsx

@@ -0,0 +1,307 @@
+/**
+ * Data table. A pattern for many records: search, faceted filters, sorting, column choice, row
+ * selection with bulk actions, pagination and a density switch.
+ *
+ * Built from the system's own components (table, input, button, checkbox, popover, toggle group)
+ * on TanStack Table, following shadcn/ui's Data Table guide (MIT). Reads only component keys and the
+ * shadcn variables that theme.css maps onto the scheme's semantics. Every label is a prop, so the
+ * words come from the scheme's voice.
+ */
+"use client";
+
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  type Row,
+  type SortingState,
+  type VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown, Columns3, ListFilter } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { Checkbox } from "./checkbox";
+import { Input } from "./input";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+
+/** Column options read by the table: numbers align right in the data font. */
+declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData, TValue> {
+    numeric?: boolean;
+    label?: string;
+  }
+}
+
+export interface DataTableFacet {
+  /** The column id to filter by. */
+  column: string;
+  /** The filter's button label. */
+  title: string;
+}
+
+export interface DataTableLabels {
+  search: string;
+  columns: string;
+  density: string;
+  compact: string;
+  comfortable: string;
+  selected: (count: number) => string;
+  noResults: string;
+  previous: string;
+  next: string;
+  page: (index: number, count: number) => string;
+  selectAll: string;
+  selectRow: string;
+}
+
+const LABELS: DataTableLabels = {
+  search: "Search",
+  columns: "Columns",
+  density: "Row density",
+  compact: "Compact",
+  comfortable: "Comfortable",
+  selected: (n) => `${n} selected`,
+  noResults: "No results.",
+  previous: "Previous",
+  next: "Next",
+  page: (i, n) => `Page ${i} of ${n}`,
+  selectAll: "Select all rows on this page",
+  selectRow: "Select row",
+};
+
+export interface DataTableProps<TData> {
+  columns: ColumnDef<TData, unknown>[];
+  data: TData[];
+  facets?: DataTableFacet[];
+  pageSize?: number;
+  /** Actions for the selected rows, shown when at least one row is selected. */
+  bulkActions?: (rows: TData[]) => React.ReactNode;
+  labels?: Partial<DataTableLabels>;
+  className?: string;
+}
+
+/** A checkbox column for row selection. Put it first. */
+export function dataTableSelectColumn<TData>(labels: Partial<DataTableLabels> = {}): ColumnDef<TData, unknown> {
+  const l = { ...LABELS, ...labels };
+  return {
+    id: "select",
+    enableSorting: false,
+    enableHiding: false,
+    header: ({ table }) => (
+      <Checkbox
+        aria-label={l.selectAll}
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")}
+        onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)}
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox aria-label={l.selectRow} checked={row.getIsSelected()} onCheckedChange={(v) => row.toggleSelected(!!v)} />
+    ),
+  };
+}
+
+/** A header that sorts its column on click and shows the direction. */
+export function DataTableSortHeader({ label, sorted, onSort }: { label: string; sorted: false | "asc" | "desc"; onSort: () => void }) {
+  const Icon = sorted === "asc" ? ArrowUp : sorted === "desc" ? ArrowDown : ChevronsUpDown;
+  return (
+    <button type="button" onClick={onSort} className="inline-flex items-center gap-1 font-[inherit] hover:text-foreground">
+      {label}
+      <Icon className="size-3.5" aria-hidden />
+    </button>
+  );
+}
+
+function FacetFilter<TData>({ facet, table }: { facet: DataTableFacet; table: ReturnType<typeof useReactTable<TData>> }) {
+  const column = table.getColumn(facet.column);
+  if (!column) return null;
+  const counts = column.getFacetedUniqueValues();
+  const chosen = new Set((column.getFilterValue() as string[] | undefined) ?? []);
+  const toggle = (value: string) => {
+    const next = new Set(chosen);
+    if (next.has(value)) next.delete(value);
+    else next.add(value);
+    column.setFilterValue(next.size ? [...next] : undefined);
+  };
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="secondary" size="compact">
+          <ListFilter /> {facet.title}
+          {chosen.size > 0 && <span className="tabular-nums">· {chosen.size}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-56 p-2">
+        <ul className="flex flex-col">
+          {[...counts.entries()]
+            .sort(([a], [b]) => String(a).localeCompare(String(b)))
+            .map(([value, count]) => (
+              <li key={String(value)}>
+                <label className="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1 hover:bg-accent">
+                  <Checkbox checked={chosen.has(String(value))} onCheckedChange={() => toggle(String(value))} />
+                  <span className="flex-1">{String(value)}</span>
+                  <span className="text-muted-foreground tabular-nums">{count}</span>
+                </label>
+              </li>
+            ))}
+        </ul>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const inFacet = <TData,>(row: Row<TData>, id: string, value: string[]) => value.includes(String(row.getValue(id)));
+
+export function DataTable<TData>({ columns, data, facets = [], pageSize = 10, bulkActions, labels = {}, className }: DataTableProps<TData>) {
+  const l = { ...LABELS, ...labels };
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [filters, setFilters] = React.useState<ColumnFiltersState>([]);
+  const [visibility, setVisibility] = React.useState<VisibilityState>({});
+  const [selection, setSelection] = React.useState({});
+  const [search, setSearch] = React.useState("");
+  const [density, setDensity] = React.useState<"compact" | "comfortable">("compact");
+
+  const facetIds = new Set(facets.map((f) => f.column));
+  const table = useReactTable({
+    data,
+    columns: columns.map((c) => (c.id && facetIds.has(c.id)) || ("accessorKey" in c && facetIds.has(String(c.accessorKey))) ? { ...c, filterFn: inFacet } : c),
+    state: { sorting, columnFilters: filters, columnVisibility: visibility, rowSelection: selection, globalFilter: search },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setFilters,
+    onColumnVisibilityChange: setVisibility,
+    onRowSelectionChange: setSelection,
+    onGlobalFilterChange: setSearch,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: { pagination: { pageSize } },
+  });
+  const selected = table.getFilteredSelectedRowModel().rows.map((r) => r.original);
+  const pages = Math.max(table.getPageCount(), 1);
+
+  return (
+    <div data-slot="data-table" className={cn("flex flex-col gap-[var(--space-gap-default)]", className)}>
+      <div className="flex flex-wrap items-center gap-[var(--space-gap-default)]">
+        <Input
+          aria-label={l.search}
+          placeholder={l.search}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="w-56"
+        />
+        {facets.map((f) => (
+          <FacetFilter key={f.column} facet={f} table={table} />
+        ))}
+        {selected.length > 0 && bulkActions && (
+          <div className="flex items-center gap-[var(--space-gap-default)]">
+            <span className="text-muted-foreground tabular-nums">{l.selected(selected.length)}</span>
+            {bulkActions(selected)}
+          </div>
+        )}
+        <div className="ml-auto flex items-center gap-[var(--space-gap-default)]">
+          <ToggleGroup
+            type="single"
+            variant="outline"
+            size="sm"
+            aria-label={l.density}
+            value={density}
+            onValueChange={(v) => v && setDensity(v as "compact" | "comfortable")}
+          >
+            <ToggleGroupItem value="compact">{l.compact}</ToggleGroupItem>
+            <ToggleGroupItem value="comfortable">{l.comfortable}</ToggleGroupItem>
+          </ToggleGroup>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="secondary" size="compact">
+                <Columns3 /> {l.columns}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-52 p-2">
+              <ul className="flex flex-col">
+                {table
+                  .getAllLeafColumns()
+                  .filter((c) => c.getCanHide())
+                  .map((c) => (
+                    <li key={c.id}>
+                      <label className="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1 hover:bg-accent">
+                        <Checkbox checked={c.getIsVisible()} onCheckedChange={(v) => c.toggleVisibility(!!v)} />
+                        {c.columnDef.meta?.label ?? c.id}
+                      </label>
+                    </li>
+                  ))}
+              </ul>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+
+      <div className="max-h-[32rem] overflow-auto rounded-[var(--card-radius)] border border-[var(--table-row-border)]">
+        <Table>
+          <TableHeader className="sticky top-0 z-10">
+            {table.getHeaderGroups().map((group) => (
+              <TableRow key={group.id}>
+                {group.headers.map((h) => (
+                  <TableHead key={h.id} className={cn(h.column.columnDef.meta?.numeric && "text-right")}>
+                    {h.isPlaceholder ? null : h.column.getCanSort() ? (
+                      <DataTableSortHeader
+                        label={h.column.columnDef.meta?.label ?? String(h.column.columnDef.header ?? h.id)}
+                        sorted={h.column.getIsSorted()}
+                        onSort={h.column.getToggleSortingHandler() as () => void}
+                      />
+                    ) : (
+                      flexRender(h.column.columnDef.header, h.getContext())
+                    )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() ? "selected" : undefined}
+                  className={density === "comfortable" ? "h-[calc(var(--table-row-height)*1.5)]" : undefined}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id} numeric={cell.column.columnDef.meta?.numeric}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={table.getVisibleLeafColumns().length} className="text-center text-muted-foreground">
+                  {l.noResults}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex items-center justify-end gap-[var(--space-gap-default)]">
+        <span className="text-muted-foreground tabular-nums">{l.page(table.getState().pagination.pageIndex + 1, pages)}</span>
+        <Button variant="secondary" size="compact" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+          {l.previous}
+        </Button>
+        <Button variant="secondary" size="compact" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+          {l.next}
+        </Button>
+      </div>
+    </div>
+  );
+}