@lovett/ui 0.0.1

package/src/data-grid/table-overlays.tsx

@@ -0,0 +1,78 @@
+/**
+ * DataGridDragOverlay + DataGridDropIndicator — visual chrome that
+ * renders during column drag-reorder.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/table-overlays.tsx
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_WITH_REFACTOR: token reskin to workspace vocabulary per
+ * ADR-025 D7.
+ */
+
+import type { DataGridColumn } from './types'
+
+type DataGridDragOverlayProps<ColumnId extends string> = {
+  dragOverlayColumn: DataGridColumn<ColumnId> | null
+  columnWidths: Record<ColumnId, number>
+  dragOverlayHeight: number
+}
+
+export function DataGridDragOverlay<ColumnId extends string>({
+  dragOverlayColumn,
+  columnWidths,
+  dragOverlayHeight,
+}: DataGridDragOverlayProps<ColumnId>) {
+  if (!dragOverlayColumn) return null
+
+  const Icon = dragOverlayColumn.icon
+
+  return (
+    <div
+      className="pointer-events-none rounded-[var(--radius-md)]"
+      style={{
+        width: columnWidths[dragOverlayColumn.id],
+        height: dragOverlayHeight,
+        border: '1px solid rgb(var(--border))',
+        background: 'rgb(var(--bg-card))',
+        boxShadow: 'var(--shadow-lg, 0 10px 32px rgba(0,0,0,0.18))',
+      }}
+    >
+      <div
+        className="flex h-8 items-center gap-1.5 px-2 text-xs font-medium"
+        style={{
+          borderBottom: '1px solid rgb(var(--border))',
+          color: 'rgb(var(--foreground))',
+        }}
+      >
+        <Icon className="h-3.5 w-3.5 shrink-0" />
+        <span className="truncate">{dragOverlayColumn.label}</span>
+      </div>
+    </div>
+  )
+}
+
+type DataGridDropIndicatorProps = {
+  dropIndicatorLeft: number | null
+  dragTableRect: { top: number; height: number } | null
+}
+
+export function DataGridDropIndicator({
+  dropIndicatorLeft,
+  dragTableRect,
+}: DataGridDropIndicatorProps) {
+  if (dropIndicatorLeft === null || !dragTableRect) return null
+
+  return (
+    <div
+      className="pointer-events-none fixed z-50 w-0.5"
+      style={{
+        left: dropIndicatorLeft - 1,
+        top: dragTableRect.top,
+        height: dragTableRect.height,
+        background: 'rgb(var(--accent))',
+      }}
+    />
+  )
+}

package/src/data-grid/table-parts.tsx

@@ -0,0 +1,15 @@
+/**
+ * Re-export aggregator for the DataGrid's table sub-components.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/table-parts.tsx
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_AS_IS: re-exports only — relative-path adjustments only.
+ */
+
+export { DataGridTableHeader } from './table-header'
+export { DataGridTableBody } from './table-body'
+export { DataGridSummaryFooter } from './table-summary-footer'
+export { DataGridDragOverlay, DataGridDropIndicator } from './table-overlays'

package/src/data-grid/table-summary-footer.tsx

@@ -0,0 +1,101 @@
+/**
+ * DataGridSummaryFooter — optional sum-style row beneath the body.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/table-summary-footer.tsx
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_WITH_REFACTOR: token reskin per ADR-025 D7.
+ */
+
+import type { CSSProperties, ReactNode } from 'react'
+
+import { cn } from '../lib/utils'
+import { TableCell, TableFooter, TableRow } from './table-elements'
+
+import type { DataGridColumn, DataGridRowBase } from './types'
+
+type DataGridSummaryFooterProps<
+  Row extends DataGridRowBase,
+  ColumnId extends string,
+> = {
+  showSummaries: boolean
+  stickySummaryFooter: boolean
+  renderSummary:
+    | ((
+        column: DataGridColumn<ColumnId>,
+        visibleRows: Row[],
+      ) => ReactNode)
+    | undefined
+  visibleColumns: DataGridColumn<ColumnId>[]
+  visibleRows: Row[]
+  columnWidths: Record<ColumnId, number>
+  draggingColumnId: ColumnId | null
+  isEmptyValue: (value: ReactNode) => boolean
+}
+
+export function DataGridSummaryFooter<
+  Row extends DataGridRowBase,
+  ColumnId extends string,
+>({
+  showSummaries,
+  stickySummaryFooter,
+  renderSummary,
+  visibleColumns,
+  visibleRows,
+  columnWidths,
+  draggingColumnId,
+  isEmptyValue,
+}: DataGridSummaryFooterProps<Row, ColumnId>) {
+  if (!showSummaries || !renderSummary) return null
+
+  const stickyCellStyle: CSSProperties | undefined = stickySummaryFooter
+    ? {
+        position: 'sticky',
+        bottom: 0,
+        zIndex: 10,
+        background: 'rgb(var(--bg-card))',
+        borderTop: '1px solid rgb(var(--border))',
+      }
+    : undefined
+
+  return (
+    <TableFooter>
+      <TableRow className="hover:bg-transparent">
+        <TableCell
+          className={cn('h-10 px-2 py-1')}
+          style={{
+            borderRight: '1px solid rgb(var(--border))',
+            ...stickyCellStyle,
+          }}
+        />
+        {visibleColumns.map((column) => {
+          const summaryContent = renderSummary(column, visibleRows)
+          const isDraggingThisColumn = draggingColumnId === column.id
+
+          return (
+            <TableCell
+              key={`summary-${column.id}`}
+              className={cn('h-10 px-2 py-1 text-left text-xs whitespace-nowrap')}
+              style={{
+                width: columnWidths[column.id],
+                minWidth: columnWidths[column.id],
+                color: 'rgb(var(--text-muted))',
+                borderRight: '1px solid rgb(var(--border))',
+                background: isDraggingThisColumn
+                  ? 'rgb(var(--surface-overlay-soft))'
+                  : stickyCellStyle?.background,
+                ...stickyCellStyle,
+              }}
+            >
+              {!isEmptyValue(summaryContent) ? (
+                <span className="inline-block">{summaryContent}</span>
+              ) : null}
+            </TableCell>
+          )
+        })}
+      </TableRow>
+    </TableFooter>
+  )
+}

package/src/data-grid/table-view.tsx

@@ -0,0 +1,176 @@
+/**
+ * DataGridTableView — composes Header + Body + SummaryFooter inside
+ * a single <Table>.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/table-view.tsx
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_WITH_REFACTOR:
+ *  • Table sub-component imported from local table-elements (DEV-1)
+ *  • No additional styling beyond what the sub-components carry
+ */
+
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  PointerEvent as ReactPointerEvent,
+  ReactNode,
+  RefObject,
+} from 'react'
+
+import { Table } from './table-elements'
+import {
+  DataGridSummaryFooter,
+  DataGridTableBody,
+  DataGridTableHeader,
+} from './table-parts'
+import type {
+  DataGridColumn,
+  DataGridRowBase,
+  DataGridSortState,
+  EditingCell,
+} from './types'
+
+type DataGridTableViewProps<
+  Row extends DataGridRowBase,
+  ColumnId extends string,
+> = {
+  tableRef: RefObject<HTMLTableElement | null>
+  gridMinWidth: number
+  visibleColumns: DataGridColumn<ColumnId>[]
+  columnWidths: Record<ColumnId, number>
+  visibleRows: Row[]
+  getRowLabel: (row: Row) => string
+  editingCell: EditingCell<ColumnId> | null
+  isEditableColumn: (columnId: ColumnId) => boolean
+  startEditing: (row: Row, columnId: ColumnId) => void
+  onCellKeyDown: (
+    event: ReactKeyboardEvent<HTMLTableCellElement>,
+    row: Row,
+    rowIndex: number,
+    column: DataGridColumn<ColumnId>,
+    colIndex: number,
+  ) => void
+  inputRef: RefObject<HTMLInputElement | null>
+  draftValue: string
+  setDraftValue: (value: string) => void
+  commitEdit: () => void
+  cancelEdit: () => void
+  canOpenDrawer: (columnId: ColumnId) => boolean
+  renderCell: (row: Row, column: DataGridColumn<ColumnId>) => ReactNode
+  onOpenDrawer: (cell: EditingCell<ColumnId>) => void
+  selectedRowIds: string[]
+  allVisibleRowsSelected: boolean
+  someVisibleRowsSelected: boolean
+  onToggleRowSelection: (rowId: string, checked: boolean) => void
+  onToggleAllRows: (checked: boolean) => void
+  showSummaries: boolean
+  renderSummary:
+    | ((
+        column: DataGridColumn<ColumnId>,
+        visibleRows: Row[],
+      ) => ReactNode)
+    | undefined
+  stickySummaryFooter: boolean
+  tableContainerClassName: string | undefined
+  isEmptyValue: (value: ReactNode) => boolean
+  onResizeStart: (
+    event: ReactPointerEvent<HTMLButtonElement>,
+    columnId: ColumnId,
+  ) => void
+  draggingColumnId: ColumnId | null
+  sort: DataGridSortState<ColumnId> | null
+  onSortChange: ((columnId: ColumnId) => void) | undefined
+}
+
+export function DataGridTableView<
+  Row extends DataGridRowBase,
+  ColumnId extends string,
+>({
+  tableRef,
+  gridMinWidth,
+  visibleColumns,
+  columnWidths,
+  visibleRows,
+  getRowLabel,
+  editingCell,
+  isEditableColumn,
+  startEditing,
+  onCellKeyDown,
+  inputRef,
+  draftValue,
+  setDraftValue,
+  commitEdit,
+  cancelEdit,
+  canOpenDrawer,
+  renderCell,
+  onOpenDrawer,
+  selectedRowIds,
+  allVisibleRowsSelected,
+  someVisibleRowsSelected,
+  onToggleRowSelection,
+  onToggleAllRows,
+  showSummaries,
+  renderSummary,
+  stickySummaryFooter,
+  tableContainerClassName,
+  isEmptyValue,
+  onResizeStart,
+  draggingColumnId,
+  sort,
+  onSortChange,
+}: DataGridTableViewProps<Row, ColumnId>) {
+  return (
+    <Table
+      ref={tableRef}
+      className="table-fixed"
+      containerClassName={tableContainerClassName}
+      style={{ width: `max(100%, ${gridMinWidth}px)` }}
+    >
+      <DataGridTableHeader
+        visibleColumns={visibleColumns}
+        columnWidths={columnWidths}
+        allVisibleRowsSelected={allVisibleRowsSelected}
+        someVisibleRowsSelected={someVisibleRowsSelected}
+        onToggleAllRows={onToggleAllRows}
+        onResizeStart={onResizeStart}
+        sort={sort}
+        onSortChange={onSortChange}
+      />
+
+      <DataGridTableBody
+        visibleRows={visibleRows}
+        getRowLabel={getRowLabel}
+        visibleColumns={visibleColumns}
+        editingCell={editingCell}
+        isEditableColumn={isEditableColumn}
+        startEditing={startEditing}
+        onCellKeyDown={onCellKeyDown}
+        inputRef={inputRef}
+        draftValue={draftValue}
+        setDraftValue={setDraftValue}
+        commitEdit={commitEdit}
+        cancelEdit={cancelEdit}
+        canOpenDrawer={canOpenDrawer}
+        renderCell={renderCell}
+        onOpenDrawer={onOpenDrawer}
+        selectedRowIds={selectedRowIds}
+        onToggleRowSelection={onToggleRowSelection}
+        columnWidths={columnWidths}
+        draggingColumnId={draggingColumnId}
+      />
+
+      <DataGridSummaryFooter
+        showSummaries={showSummaries}
+        renderSummary={renderSummary}
+        stickySummaryFooter={stickySummaryFooter}
+        visibleColumns={visibleColumns}
+        visibleRows={visibleRows}
+        columnWidths={columnWidths}
+        draggingColumnId={draggingColumnId}
+        isEmptyValue={isEmptyValue}
+      />
+    </Table>
+  )
+}

package/src/data-grid/types.ts

@@ -0,0 +1,141 @@
+/**
+ * DataGrid public types.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/types.ts
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_AS_IS per ADR-025 bucket table — surface API unchanged from
+ * source so the source repo's docs still apply.
+ */
+
+import type { ComponentProps, ComponentType, ReactNode } from 'react'
+import type { DndContext, DragEndEvent } from '@dnd-kit/core'
+
+export type DataGridIcon = ComponentType<{
+  className?: string
+}>
+
+export type DataGridRowBase = {
+  id: string
+}
+
+export type DataGridColumn<ColumnId extends string> = {
+  id: ColumnId
+  label: string
+  icon: DataGridIcon
+  defaultWidth: number
+  minWidth?: number
+  /** Per-column sort opt-out (ADR-027). Defaults to true when DataGrid's
+   * `onSortChange` is provided; false when not. Set explicitly to disable
+   * sorting for columns that don't have a meaningful comparator. */
+  sortable?: boolean
+}
+
+/** Row-sort state (ADR-027). DataGrid renders the chevron + ARIA per
+ * this state but does NOT sort rows itself — parent passes pre-sorted
+ * `rows`. */
+export type DataGridSortState<ColumnId extends string> = {
+  columnId: ColumnId
+  dir: 'asc' | 'desc'
+}
+
+export type DataGridDrawerPanelProps<Row, ColumnId extends string> = {
+  drawerRow: Row | null
+  drawerRowIndex: number
+  drawerRowCount: number
+  drawerColumn: DataGridColumn<ColumnId> | null
+  drawerCellValue: ReactNode
+  getRowLabel: (row: Row) => string
+  isEditableColumn: (columnId: ColumnId) => boolean
+  isEmptyValue: (value: ReactNode) => boolean
+  updateRow: (rowId: string, updater: (row: Row) => Row) => void
+  openPreviousRow: () => void
+  openNextRow: () => void
+  closeDrawer: () => void
+  /** Whether the drawer should be visible. The default <DrawerPanel>
+   * reads this to drive its <FloatingDrawer isOpen> binding; consumer
+   * render-overrides may use it the same way. Added in the workspace
+   * port (DEVIATION-5) to remove the `@base-ui/react` context coupling
+   * the source relied on. */
+  isOpen: boolean
+}
+
+export type DataGridToolbarRenderProps<ColumnId extends string> = {
+  visibleRowCount: number
+  selectedRowIds: string[]
+  selectedRowCount: number
+  allVisibleRowsSelected: boolean
+  someVisibleRowsSelected: boolean
+  onToggleAllRows: (checked: boolean) => void
+  clearSelection: () => void
+  showSummaries: boolean
+  onShowSummariesChange: (next: boolean) => void
+  visibleColumns: DataGridColumn<ColumnId>[]
+  visibleColumnIds: ColumnId[]
+  hiddenColumns: DataGridColumn<ColumnId>[]
+  toggleColumnVisibility: (columnId: ColumnId, visible: boolean) => void
+  optionsSensors: NonNullable<
+    ComponentProps<typeof DndContext>['sensors']
+  >
+  onOptionColumnDragEnd: (event: DragEndEvent) => void
+  optionsDndContextId: string
+}
+
+export type DataGridProps<
+  Row extends DataGridRowBase,
+  ColumnId extends string,
+> = {
+  rows: Row[]
+  columns: DataGridColumn<ColumnId>[]
+  getRowLabel: (row: Row) => string
+  renderCell: (row: Row, column: DataGridColumn<ColumnId>) => ReactNode
+  isEditableColumn: (columnId: ColumnId) => boolean
+  getCellEditValue: (row: Row, columnId: ColumnId) => string
+  applyCellEdit: (row: Row, columnId: ColumnId, nextValue: string) => Row
+  getDrawerCellValue: (row: Row, columnId: ColumnId) => ReactNode
+  canOpenDrawer?: (columnId: ColumnId) => boolean
+  renderSummary?: (
+    column: DataGridColumn<ColumnId>,
+    visibleRows: Row[],
+  ) => ReactNode
+  renderDrawerPanel?: (
+    props: DataGridDrawerPanelProps<Row, ColumnId>,
+  ) => ReactNode
+  renderToolbar?: (
+    props: DataGridToolbarRenderProps<ColumnId>,
+  ) => ReactNode
+  onToolbarPropsChange?: (props: DataGridToolbarRenderProps<ColumnId>) => void
+  onOpenDrawerCell?: (cell: EditingCell<ColumnId>) => void
+  /** Drawer renders in modal mode (backdrop + Esc + scroll lock).
+   * Defaults to `false` per the source's contextless API. */
+  drawerModal?: boolean
+  /** Pixel width of the drawer panel; passed through to FloatingDrawer.
+   * Defaults to 520 (the FloatingDrawer side="right" default). */
+  drawerSize?: number
+  stickySummaryFooter?: boolean
+  fillAvailableHeight?: boolean
+  tableContainerClassName?: string
+  onRowsChange?: (rows: Row[]) => void
+  /** Currently-sorted column + direction (ADR-027). Parent owns the
+   * state and passes pre-sorted `rows`. When `null` or omitted, no
+   * chevron renders (all columns show the unsorted indicator). */
+  sort?: DataGridSortState<ColumnId> | null
+  /** Header click handler (ADR-027). Receives the clicked column id;
+   * parent decides next direction (typical: toggle if same column,
+   * else default to 'asc'). When omitted, headers are non-interactive
+   * for sort purposes. Drag-to-reorder still works. */
+  onSortChange?: (columnId: ColumnId) => void
+}
+
+export type EditingCell<ColumnId extends string> = {
+  rowId: string
+  columnId: ColumnId
+  originRect?: {
+    x: number
+    y: number
+    width: number
+    height: number
+  }
+}