@lovett/ui 0.0.1

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

@@ -0,0 +1,391 @@
+/**
+ * DataGrid — top-level orchestrator that composes the table view +
+ * drawer panel and threads state through the editing + columns hooks.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/data-grid.tsx
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_WITH_REFACTOR per ADR-025 D5:
+ *  • Source wraps everything in `<DialogPrimitive.Root open={...}>`
+ *    and lets DrawerPanel discover open + close via Dialog context.
+ *    CLAUDE.md §1 forbids `@base-ui/react`. The workspace port hoists
+ *    open state into this component (already present here as
+ *    `drawerCell`) and threads `isOpen` + `closeDrawer` explicitly
+ *    into the default <DrawerPanel> (which renders a workspace
+ *    <FloatingDrawer side="right">).
+ *  • `drawerModal` + new `drawerSize` props pass through to
+ *    FloatingDrawer.
+ *  • `disablePointerDismissal` is dropped — FloatingDrawer's modal
+ *    mode handles pointer-dismissal via its backdrop click handler
+ *    only when `modal=true`. Non-modal mode never dismisses on
+ *    pointer events. This matches the source's `disablePointerDismissal`
+ *    default-true behavior when used in non-modal mode (the source's
+ *    primary mode). DEVIATION-5 in the completion report.
+ *
+ * Token reskin per ADR-025 D7. No tabler icons used here.
+ */
+
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react'
+
+import { PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
+
+import { cn } from '../lib/utils'
+import { DrawerPanel } from './drawer-panel'
+import { DataGridTableView } from './table-view'
+import { useGridColumns } from './use-grid-columns'
+import { useGridEditing } from './use-grid-editing'
+import type {
+  DataGridDrawerPanelProps,
+  DataGridProps,
+  DataGridRowBase,
+  EditingCell,
+} from './types'
+
+export type {
+  DataGridColumn,
+  DataGridDrawerPanelProps,
+  DataGridProps,
+  DataGridRowBase,
+  DataGridToolbarRenderProps,
+} from './types'
+
+const MIN_COLUMN_WIDTH = 96
+const CONTROL_COLUMN_WIDTH = 40
+
+function isEmptyValue(value: ReactNode) {
+  if (value === null || value === undefined) return true
+  if (typeof value === 'string') return value.trim().length === 0
+  return false
+}
+
+export function DataGrid<Row extends DataGridRowBase, ColumnId extends string>({
+  rows,
+  columns,
+  getRowLabel,
+  renderCell,
+  isEditableColumn,
+  getCellEditValue,
+  applyCellEdit,
+  getDrawerCellValue,
+  canOpenDrawer = () => true,
+  renderSummary,
+  renderDrawerPanel,
+  renderToolbar,
+  onToolbarPropsChange,
+  onOpenDrawerCell,
+  drawerModal = false,
+  drawerSize,
+  stickySummaryFooter = false,
+  fillAvailableHeight = false,
+  tableContainerClassName,
+  onRowsChange,
+  sort,
+  onSortChange,
+}: DataGridProps<Row, ColumnId>) {
+  const [showSummaries, setShowSummaries] = useState(true)
+  const [drawerCell, setDrawerCell] =
+    useState<EditingCell<ColumnId> | null>(null)
+  const [selectedRowIds, setSelectedRowIds] = useState<string[]>([])
+  const reactInstanceId = useId()
+  const instanceId = useMemo(
+    () => reactInstanceId.replace(/:/g, ''),
+    [reactInstanceId],
+  )
+
+  const gridRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const tableRef = useRef<HTMLTableElement>(null)
+
+  const {
+    columnWidths,
+    visibleColumnIds,
+    draggingColumnId,
+    visibleColumns,
+    gridMinWidth,
+    hiddenColumns,
+    toggleColumnVisibility,
+    handleOptionColumnDragEnd,
+    beginResize,
+  } = useGridColumns({
+    columns,
+    tableRef,
+    minColumnWidth: MIN_COLUMN_WIDTH,
+    controlColumnWidth: CONTROL_COLUMN_WIDTH,
+  })
+
+  const optionsPointerSensorOptions = useMemo(
+    () => ({
+      activationConstraint: {
+        distance: 6,
+      },
+    }),
+    [],
+  )
+  const optionsSensors = useSensors(
+    useSensor(PointerSensor, optionsPointerSensorOptions),
+  )
+
+  const drawerRow = useMemo(() => {
+    if (!drawerCell) return null
+    return rows.find((row) => row.id === drawerCell.rowId) ?? null
+  }, [drawerCell, rows])
+
+  const drawerRowIndex = useMemo(() => {
+    if (!drawerRow) return -1
+    return rows.findIndex((row) => row.id === drawerRow.id)
+  }, [drawerRow, rows])
+
+  const drawerColumn = useMemo(() => {
+    if (!drawerCell) return null
+    return columns.find((column) => column.id === drawerCell.columnId) ?? null
+  }, [columns, drawerCell])
+
+  const drawerCellValue = useMemo(() => {
+    if (!drawerCell || !drawerRow) return null
+    return getDrawerCellValue(drawerRow, drawerCell.columnId)
+  }, [drawerCell, drawerRow, getDrawerCellValue])
+
+  const commitRows = useCallback(
+    (updater: (currentRows: Row[]) => Row[]) => {
+      const nextRows = updater(rows)
+      onRowsChange?.(nextRows)
+    },
+    [onRowsChange, rows],
+  )
+
+  const {
+    editingCell,
+    draftValue,
+    setDraftValue,
+    startEditing,
+    commitEdit,
+    cancelEdit,
+    handleCellKeyDown,
+  } = useGridEditing<Row, ColumnId>({
+    gridRef,
+    inputRef,
+    visibleRowCount: rows.length,
+    visibleColumnCount: visibleColumns.length,
+    isEditableColumn,
+    getCellEditValue,
+    applyCellEdit,
+    commitRows,
+  })
+
+  const closeDrawer = useCallback(() => {
+    setDrawerCell(null)
+  }, [])
+
+  useEffect(() => {
+    setSelectedRowIds((current) => {
+      if (current.length === 0) return current
+      const visibleRowIds = new Set(rows.map((row) => row.id))
+      const filtered = current.filter((rowId) => visibleRowIds.has(rowId))
+      return filtered.length === current.length ? current : filtered
+    })
+  }, [rows])
+
+  const toggleRowSelection = useCallback(
+    (rowId: string, checked: boolean) => {
+      setSelectedRowIds((current) => {
+        if (checked) {
+          return current.includes(rowId) ? current : [...current, rowId]
+        }
+
+        return current.filter((currentRowId) => currentRowId !== rowId)
+      })
+    },
+    [],
+  )
+
+  const toggleAllRows = useCallback(
+    (checked: boolean) => {
+      setSelectedRowIds(checked ? rows.map((row) => row.id) : [])
+    },
+    [rows],
+  )
+
+  const clearSelection = useCallback(() => {
+    setSelectedRowIds([])
+  }, [])
+
+  const selectedRowCount = selectedRowIds.length
+  const allVisibleRowsSelected =
+    rows.length > 0 && selectedRowCount === rows.length
+  const someVisibleRowsSelected =
+    selectedRowCount > 0 && !allVisibleRowsSelected
+
+  const updateRow = useCallback(
+    (rowId: string, updater: (row: Row) => Row) => {
+      commitRows((currentRows) =>
+        currentRows.map((row) => (row.id === rowId ? updater(row) : row)),
+      )
+    },
+    [commitRows],
+  )
+
+  const openDrawerRowAt = useCallback(
+    (rowIndex: number) => {
+      if (!drawerCell) return
+
+      const nextRow = rows[rowIndex]
+      if (!nextRow) return
+
+      setDrawerCell({
+        rowId: nextRow.id,
+        columnId: drawerCell.columnId,
+      })
+    },
+    [drawerCell, rows],
+  )
+
+  const openPreviousRow = useCallback(() => {
+    openDrawerRowAt(drawerRowIndex - 1)
+  }, [drawerRowIndex, openDrawerRowAt])
+
+  const openNextRow = useCallback(() => {
+    openDrawerRowAt(drawerRowIndex + 1)
+  }, [drawerRowIndex, openDrawerRowAt])
+
+  const drawerIsOpen = drawerCell !== null
+
+  const drawerPanelProps: DataGridDrawerPanelProps<Row, ColumnId> = {
+    drawerRow,
+    drawerRowIndex,
+    drawerRowCount: rows.length,
+    drawerColumn,
+    drawerCellValue,
+    getRowLabel,
+    isEditableColumn,
+    isEmptyValue,
+    updateRow,
+    openPreviousRow,
+    openNextRow,
+    closeDrawer,
+    isOpen: drawerIsOpen,
+  }
+
+  const toolbarProps = useMemo(
+    () => ({
+      visibleRowCount: rows.length,
+      selectedRowIds,
+      selectedRowCount,
+      allVisibleRowsSelected,
+      someVisibleRowsSelected,
+      onToggleAllRows: toggleAllRows,
+      clearSelection,
+      showSummaries,
+      onShowSummariesChange: setShowSummaries,
+      visibleColumns,
+      visibleColumnIds,
+      hiddenColumns,
+      toggleColumnVisibility,
+      optionsSensors,
+      onOptionColumnDragEnd: handleOptionColumnDragEnd,
+      optionsDndContextId: `data-grid-options-${instanceId}`,
+    }),
+    [
+      rows.length,
+      selectedRowIds,
+      selectedRowCount,
+      allVisibleRowsSelected,
+      someVisibleRowsSelected,
+      toggleAllRows,
+      clearSelection,
+      showSummaries,
+      visibleColumns,
+      visibleColumnIds,
+      hiddenColumns,
+      toggleColumnVisibility,
+      optionsSensors,
+      handleOptionColumnDragEnd,
+      instanceId,
+    ],
+  )
+
+  useEffect(() => {
+    onToolbarPropsChange?.(toolbarProps)
+  }, [onToolbarPropsChange, toolbarProps])
+
+  return (
+    <>
+      <div
+        className={cn('min-h-0', fillAvailableHeight && 'flex h-full flex-col')}
+        ref={gridRef}
+      >
+        {renderToolbar?.(toolbarProps)}
+
+        <div className={cn(fillAvailableHeight && 'min-h-0 flex-1')}>
+          <DataGridTableView
+            tableRef={tableRef}
+            gridMinWidth={gridMinWidth}
+            visibleColumns={visibleColumns}
+            columnWidths={columnWidths}
+            draggingColumnId={draggingColumnId}
+            visibleRows={rows}
+            getRowLabel={getRowLabel}
+            editingCell={editingCell}
+            isEditableColumn={isEditableColumn}
+            startEditing={startEditing}
+            onCellKeyDown={handleCellKeyDown}
+            inputRef={inputRef}
+            draftValue={draftValue}
+            setDraftValue={setDraftValue}
+            commitEdit={commitEdit}
+            cancelEdit={cancelEdit}
+            canOpenDrawer={canOpenDrawer}
+            renderCell={renderCell}
+            onOpenDrawer={(cell) => {
+              if (onOpenDrawerCell) {
+                onOpenDrawerCell(cell)
+                return
+              }
+
+              setDrawerCell(cell)
+            }}
+            selectedRowIds={selectedRowIds}
+            allVisibleRowsSelected={allVisibleRowsSelected}
+            someVisibleRowsSelected={someVisibleRowsSelected}
+            onToggleRowSelection={toggleRowSelection}
+            onToggleAllRows={toggleAllRows}
+            showSummaries={showSummaries}
+            renderSummary={renderSummary}
+            stickySummaryFooter={stickySummaryFooter}
+            tableContainerClassName={tableContainerClassName}
+            isEmptyValue={isEmptyValue}
+            onResizeStart={beginResize}
+            sort={sort ?? null}
+            onSortChange={onSortChange}
+          />
+        </div>
+      </div>
+
+      {renderDrawerPanel ? (
+        renderDrawerPanel(drawerPanelProps)
+      ) : (
+        <DrawerPanel
+          isOpen={drawerIsOpen}
+          onClose={closeDrawer}
+          drawerRow={drawerRow}
+          drawerColumn={drawerColumn}
+          drawerCellValue={drawerCellValue}
+          getRowLabel={getRowLabel}
+          isEditableColumn={isEditableColumn}
+          isEmptyValue={isEmptyValue}
+          modal={drawerModal}
+          size={drawerSize ?? undefined}
+        />
+      )}
+    </>
+  )
+}

package/src/data-grid/drawer-panel.tsx

@@ -0,0 +1,146 @@
+/**
+ * DrawerPanel — cell-detail side drawer for the DataGrid.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/drawer-panel.tsx
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_WITH_REFACTOR (load-bearing) per ADR-025 D5:
+ *  • Source mounts inside a `@base-ui/react/dialog` Root, reading
+ *    open + close through Dialog context. CLAUDE.md §1 forbids
+ *    `@base-ui/react`. This port rewires to the workspace
+ *    <FloatingDrawer side="right">, which the orchestrator drives
+ *    via explicit `isOpen` + `onClose` props (see data-grid.tsx).
+ *  • The header title/description, body content (cell value tile +
+ *    metadata <dl>), and footer Close button all carry over —
+ *    chrome is supplied by FloatingDrawer's title + children +
+ *    footer slots.
+ *  • `modal` / `size` pass through to FloatingDrawer.
+ *
+ * Token reskin per ADR-025 D7. Icons replaced by Lucide imports
+ * (workspace doesn't ship the source's tabler set; CLAUDE.md §6).
+ */
+
+import type { ReactNode } from 'react'
+
+import { Button } from '../button'
+import { FloatingDrawer } from '../floating-drawer'
+
+import type { DataGridColumn } from './types'
+
+type DrawerPanelProps<Row, ColumnId extends string> = {
+  isOpen: boolean
+  onClose: () => void
+  drawerRow: Row | null
+  drawerColumn: DataGridColumn<ColumnId> | null
+  drawerCellValue: ReactNode
+  getRowLabel: (row: Row) => string
+  isEditableColumn: (columnId: ColumnId) => boolean
+  isEmptyValue: (value: ReactNode) => boolean
+  /** Optional — controls FloatingDrawer modal mode. Defaults to false
+   * (matches the source's `modal={drawerModal}` default). */
+  modal?: boolean
+  /** Pixel width of the drawer panel. Defaults to FloatingDrawer's
+   * 520 for `side="right"`. */
+  size: number | undefined
+}
+
+export function DrawerPanel<Row, ColumnId extends string>({
+  isOpen,
+  onClose,
+  drawerRow,
+  drawerColumn,
+  drawerCellValue,
+  getRowLabel,
+  isEditableColumn,
+  isEmptyValue,
+  modal = false,
+  size,
+}: DrawerPanelProps<Row, ColumnId>) {
+  const title = (
+    <div className="min-w-0">
+      <div className="truncate text-sm font-medium">
+        {drawerRow ? getRowLabel(drawerRow) : 'Record'} ·{' '}
+        {drawerColumn?.label ?? 'Details'}
+      </div>
+      <div
+        className="text-xs"
+        style={{ color: 'rgb(var(--text-muted))' }}
+      >
+        Context panel for the selected cell.
+      </div>
+    </div>
+  )
+
+  const footer = (
+    <Button variant="outline" onClick={onClose}>
+      Close
+    </Button>
+  )
+
+  return (
+    <FloatingDrawer
+      isOpen={isOpen}
+      onClose={onClose}
+      side="right"
+      modal={modal}
+      {...(size !== undefined ? { size } : {})}
+      title={title}
+      footer={footer}
+    >
+      <div className="space-y-4">
+        <div
+          className="rounded-[var(--radius-md)] p-3"
+          style={{
+            background: 'rgb(var(--surface-overlay-soft))',
+            border: '1px solid rgb(var(--border))',
+          }}
+        >
+          <div
+            className="text-xs"
+            style={{ color: 'rgb(var(--text-muted))' }}
+          >
+            Cell value
+          </div>
+          <div
+            className="mt-1 break-words text-sm"
+            style={{ color: 'rgb(var(--foreground))' }}
+          >
+            {!isEmptyValue(drawerCellValue) ? drawerCellValue : 'Empty'}
+          </div>
+        </div>
+
+        <dl className="grid gap-3 text-sm">
+          <div className="flex items-center justify-between gap-3">
+            <dt style={{ color: 'rgb(var(--text-muted))' }}>Record</dt>
+            <dd
+              className="text-right font-medium"
+              style={{ color: 'rgb(var(--foreground))' }}
+            >
+              {drawerRow ? getRowLabel(drawerRow) : '-'}
+            </dd>
+          </div>
+          <div className="flex items-center justify-between gap-3">
+            <dt style={{ color: 'rgb(var(--text-muted))' }}>Field</dt>
+            <dd
+              className="text-right font-medium"
+              style={{ color: 'rgb(var(--foreground))' }}
+            >
+              {drawerColumn?.label ?? '-'}
+            </dd>
+          </div>
+          <div className="flex items-center justify-between gap-3">
+            <dt style={{ color: 'rgb(var(--text-muted))' }}>Editable</dt>
+            <dd
+              className="text-right font-medium"
+              style={{ color: 'rgb(var(--foreground))' }}
+            >
+              {drawerColumn && isEditableColumn(drawerColumn.id) ? 'Yes' : 'No'}
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </FloatingDrawer>
+  )
+}

package/src/data-grid/index.ts

@@ -0,0 +1,29 @@
+/**
+ * Public surface of the @lovett/ui DataGrid primitive.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/index.ts
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_AS_IS: re-exports + relative-path adjustments only.
+ */
+
+export { DataGrid } from './data-grid'
+export { DataGridColumnOptionsMenu } from './column-options-menu'
+export { DrawerPanel } from './drawer-panel'
+export {
+  DataGridDragOverlay,
+  DataGridDropIndicator,
+} from './table-overlays'
+
+export type {
+  DataGridColumn,
+  DataGridDrawerPanelProps,
+  DataGridProps,
+  DataGridRowBase,
+  DataGridSortState,
+  DataGridToolbarRenderProps,
+  DataGridIcon,
+  EditingCell,
+} from './types'