@lovett/ui 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lovett/ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "private": false,
   "publishConfig": {
     "access": "restricted"

package/src/badge.tsx

@@ -17,6 +17,8 @@
 
 import type { ReactNode } from 'react'
 
+import { cn } from './lib/utils'
+
 export type BadgeTone =
   | 'neutral'
   | 'accent'
@@ -57,33 +59,51 @@ export interface BadgeProps {
   children: ReactNode
   /** Optional leading icon — sized 12-14px expected. */
   icon?: ReactNode
-  /** Size variant. `sm` = compact (10px text), `md` = default (11px). */
-  size?: 'sm' | 'md'
-  /** Optional className override on the outer span. */
+  /** Leading status dot in the tone color (gray-ui chip style). Ignored
+   * when `icon` is provided. */
+  dot?: boolean
+  /** Size variant. `sm` = compact (10px), `md` = default (11px),
+   * `lg` = roomier category-chip (12px, taller). */
+  size?: 'sm' | 'md' | 'lg'
+  /** Extra classes merged onto the outer span (no longer replaces base). */
   className?: string
 }
 
+const SIZE_CLASS: Record<NonNullable<BadgeProps['size']>, string> = {
+  sm: 'text-[10px] px-1.5 py-0.5',
+  md: 'text-[11px] px-2 py-0.5',
+  lg: 'text-xs px-2.5 py-1',
+}
+
 export function Badge({
   tone,
   children,
   icon,
+  dot = false,
   size = 'md',
   className,
 }: BadgeProps) {
   const { bg, color } = TONE_STYLE[tone]
-  const sizeClass = size === 'sm' ? 'text-[10px] px-1.5 py-0.5' : 'text-[11px] px-2 py-0.5'
   return (
     <span
-      className={
-        className ??
-        `inline-flex items-center gap-1 font-medium ${sizeClass}`
-      }
+      className={cn(
+        'inline-flex w-fit items-center gap-1.5 font-medium whitespace-nowrap',
+        SIZE_CLASS[size],
+        className,
+      )}
       style={{
         background: bg,
         color,
         borderRadius: 'var(--radius-full)',
       }}
     >
+      {dot && !icon ? (
+        <span
+          aria-hidden
+          className="size-1.5 shrink-0 rounded-full"
+          style={{ background: 'currentColor' }}
+        />
+      ) : null}
       {icon && <span className="flex-shrink-0">{icon}</span>}
       {children}
     </span>

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

@@ -415,6 +415,7 @@ export function DataGrid<Row extends DataGridRowBase, ColumnId extends string>({
             stickySummaryFooter={stickySummaryFooter}
             stickyHeader={stickyHeader}
             fillWidth={fillWidth}
+            fillHeight={fillAvailableHeight}
             scrollEdges={scrollEdges}
             tableContainerClassName={tableContainerClassName}
             isEmptyValue={isEmptyValue}

package/src/data-grid/index.ts

@@ -10,6 +10,7 @@
  */
 
 export { DataGrid } from './data-grid'
+export { DataGridToolbar, type DataGridToolbarProps } from './toolbar'
 export { DataGridColumnOptionsMenu } from './column-options-menu'
 export { DrawerPanel } from './drawer-panel'
 export {

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

@@ -15,6 +15,7 @@
  *    local table-elements (inlined per DEV-1)
  */
 
+import { useRef } from 'react'
 import type {
   CSSProperties,
   KeyboardEvent as ReactKeyboardEvent,
@@ -138,6 +139,10 @@ export function SortableHeaderCell<ColumnId extends string>({
 }: SortableHeaderCellProps<ColumnId>) {
   // ADR-027 — column sortability: explicit `sortable: false` opts out;
   // missing `onSortChange` also disables (no parent handler).
+  // Suppress the sort click that the browser fires after a resize
+  // interaction (drag OR a stray click on the resize handle), so resizing
+  // never accidentally toggles the sort.
+  const justResizedRef = useRef(false)
   const isSortable =
     column.sortable !== false && typeof onSortChange === 'function'
   const ariaSort: 'ascending' | 'descending' | 'none' = !isSortable
@@ -150,9 +155,28 @@ export function SortableHeaderCell<ColumnId extends string>({
 
   function handleSortClick() {
     if (!isSortable) return
+    if (justResizedRef.current) return
     onSortChange!(column.id)
   }
 
+  function handleResizePointerDown(event: ReactPointerEvent<HTMLButtonElement>) {
+    // Don't bubble the resize-pointer-down up to the th's onClick sort
+    // handler — resize is its own interaction.
+    event.stopPropagation()
+    onResize(event, column.id)
+    const onUp = () => {
+      window.removeEventListener('pointerup', onUp)
+      justResizedRef.current = true
+      // Clear after the click that fires on this same pointerup has been
+      // dispatched (a later macrotask), so that click is swallowed but
+      // genuine subsequent clicks still sort.
+      window.setTimeout(() => {
+        justResizedRef.current = false
+      }, 0)
+    }
+    window.addEventListener('pointerup', onUp)
+  }
+
   function handleSortKey(event: ReactKeyboardEvent<HTMLDivElement>) {
     if (!isSortable) return
     if (event.key === 'Enter' || event.key === ' ') {
@@ -209,12 +233,8 @@ export function SortableHeaderCell<ColumnId extends string>({
         aria-label={`Resize ${column.label} column`}
         className="absolute top-0 right-0 flex h-full w-3 cursor-col-resize items-center justify-center transition-colors"
         style={{ color: 'rgb(var(--text-muted))' }}
-        onPointerDown={(event) => {
-          // Don't bubble the resize-pointer-down up to the th's onClick
-          // sort handler — resize is its own interaction.
-          event.stopPropagation()
-          onResize(event, column.id)
-        }}
+        onPointerDown={handleResizePointerDown}
+        onClick={(event) => event.stopPropagation()}
       />
     </TableHead>
   )

package/src/data-grid/sticky.ts

@@ -98,10 +98,11 @@ export function splitAtRightPinned<ColumnId extends string>(
 
 type Role = 'header' | 'body' | 'footer'
 
-/** Opaque background. Header composites its translucent tint over an
- * opaque base so it still reads tinted but never lets content through. */
+/** Opaque background. Header + footer composite their translucent tint
+ * over an opaque base so they read as a light-gray band but never let
+ * content through. Body pinned cells stay plain card-colored. */
 function opaqueBg(role: Role): CSSProperties {
-  if (role === 'header') {
+  if (role === 'header' || role === 'footer') {
     return {
       backgroundColor: 'rgb(var(--bg-card))',
       backgroundImage:

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

@@ -79,6 +79,7 @@ type DataGridTableBodyProps<
   pinOffsets: Map<ColumnId, PinInfo>
   scrollEdges: ScrollEdges
   fillWidth: boolean
+  fillHeight: boolean
 }
 
 export function DataGridTableBody<
@@ -107,6 +108,7 @@ export function DataGridTableBody<
   pinOffsets,
   scrollEdges,
   fillWidth,
+  fillHeight,
 }: DataGridTableBodyProps<Row, ColumnId>) {
   const { leading, rightPinned } = splitAtRightPinned(visibleColumns)
 
@@ -123,6 +125,7 @@ export function DataGridTableBody<
     rowIndex: number,
     column: DataGridColumn<ColumnId>,
     colIndex: number,
+    noRightBorder = false,
   ) => {
     const isEditing =
       editingCell?.rowId === row.id && editingCell.columnId === column.id
@@ -151,7 +154,9 @@ export function DataGridTableBody<
         style={{
           width: columnWidths[column.id],
           minWidth: columnWidths[column.id],
-          borderRight: '1px solid rgb(var(--border))',
+          // The rightmost pinned cell drops its right border — the table
+          // container's own border already draws that edge (no double line).
+          borderRight: noRightBorder ? undefined : '1px solid rgb(var(--border))',
           ...sticky,
           ...(isDraggingThisColumn
             ? { background: 'rgb(var(--surface-overlay-soft))' }
@@ -276,10 +281,23 @@ export function DataGridTableBody<
             <td aria-hidden style={{ width: 'auto', padding: 0 }} />
           ) : null}
           {rightPinned.map((column, i) =>
-            renderDataCell(row, rowIndex, column, leading.length + i),
+            renderDataCell(
+              row,
+              rowIndex,
+              column,
+              leading.length + i,
+              i === rightPinned.length - 1,
+            ),
           )}
         </TableRow>
       ))}
+      {fillHeight ? (
+        // Filler row absorbs the leftover height (table is height:100%) so
+        // the summary footer stays pinned to the bottom even with few rows.
+        <tr aria-hidden style={{ height: '100%' }}>
+          <td style={{ padding: 0, border: 0 }} colSpan={visibleColumns.length + 2} />
+        </tr>
+      ) : null}
     </TableBody>
   )
 }

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

@@ -34,6 +34,12 @@ export const Table = forwardRef<
       style={{
         border: '1px solid rgb(var(--border))',
         borderRadius: 'var(--radius-lg)',
+        // NOTE: intentionally NOT setting scrollbar-width / scrollbar-color.
+        // On macOS, any custom scrollbar property opts the element out of the
+        // platform's auto-hiding *overlay* scrollbars into *classic*
+        // always-visible ones — which left the vertical bar permanently
+        // covering the pinned action column. Native overlay bars are already
+        // thin + light AND auto-hide, so we leave them untouched.
       }}
     >
       <table

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

@@ -89,7 +89,10 @@ export function DataGridTableHeader<ColumnId extends string>({
     stickyFooter: false,
   })
 
-  const renderHeadCell = (column: DataGridColumn<ColumnId>) => (
+  const renderHeadCell = (
+    column: DataGridColumn<ColumnId>,
+    noRightBorder = false,
+  ) => (
     <SortableHeaderCell
       key={column.id}
       column={column}
@@ -97,7 +100,10 @@ export function DataGridTableHeader<ColumnId extends string>({
       onResize={onResizeStart}
       sortDir={sort?.columnId === column.id ? sort.dir : null}
       onSortChange={onSortChange}
-      cellStyle={styleFor(column)}
+      cellStyle={{
+        ...styleFor(column),
+        ...(noRightBorder ? { borderRight: 'none' } : null),
+      }}
     />
   )
 
@@ -132,11 +138,13 @@ export function DataGridTableHeader<ColumnId extends string>({
               className="mx-auto"
             />
           </TableHead>
-          {leading.map(renderHeadCell)}
+          {leading.map((column) => renderHeadCell(column))}
           {fillWidth ? (
             <th aria-hidden style={{ width: 'auto', padding: 0, ...spacerStyle }} />
           ) : null}
-          {rightPinned.map(renderHeadCell)}
+          {rightPinned.map((column, i) =>
+            renderHeadCell(column, i === rightPinned.length - 1),
+          )}
         </TableRow>
       </TableHeader>
     </>

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

@@ -74,7 +74,10 @@ export function DataGridSummaryFooter<
       stickyFooter: stickySummaryFooter,
     })
 
-  const renderSummaryCell = (column: DataGridColumn<ColumnId>) => {
+  const renderSummaryCell = (
+    column: DataGridColumn<ColumnId>,
+    noRightBorder = false,
+  ) => {
     const summaryContent = renderSummary(column, visibleRows)
     const isDraggingThisColumn = draggingColumnId === column.id
 
@@ -86,7 +89,7 @@ export function DataGridSummaryFooter<
           width: columnWidths[column.id],
           minWidth: columnWidths[column.id],
           color: 'rgb(var(--text-muted))',
-          borderRight: '1px solid rgb(var(--border))',
+          borderRight: noRightBorder ? undefined : '1px solid rgb(var(--border))',
           ...footerStyle(pinOffsets.get(column.id) ?? null),
           ...(isDraggingThisColumn
             ? { background: 'rgb(var(--surface-overlay-soft))' }
@@ -110,14 +113,16 @@ export function DataGridSummaryFooter<
             ...footerStyle({ side: 'left', offset: 0 }),
           }}
         />
-        {leading.map(renderSummaryCell)}
+        {leading.map((column) => renderSummaryCell(column))}
         {fillWidth ? (
           <td
             aria-hidden
             style={{ width: 'auto', padding: 0, ...footerStyle(null) }}
           />
         ) : null}
-        {rightPinned.map(renderSummaryCell)}
+        {rightPinned.map((column, i) =>
+          renderSummaryCell(column, i === rightPinned.length - 1),
+        )}
       </TableRow>
     </TableFooter>
   )

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

@@ -76,6 +76,7 @@ type DataGridTableViewProps<
   stickySummaryFooter: boolean
   stickyHeader: boolean
   fillWidth: boolean
+  fillHeight: boolean
   scrollEdges: ScrollEdges
   tableContainerClassName: string | undefined
   isEmptyValue: (value: ReactNode) => boolean
@@ -120,6 +121,7 @@ export function DataGridTableView<
   stickySummaryFooter,
   stickyHeader,
   fillWidth,
+  fillHeight,
   scrollEdges,
   tableContainerClassName,
   isEmptyValue,
@@ -134,7 +136,13 @@ export function DataGridTableView<
       ref={tableRef}
       className="table-fixed"
       containerClassName={tableContainerClassName}
-      style={{ width: `max(100%, ${gridMinWidth}px)` }}
+      style={{
+        width: `max(100%, ${gridMinWidth}px)`,
+        // When the grid fills its height, stretch the table to the full
+        // viewport so the spacer body row can push the summary footer to
+        // the bottom even with few rows.
+        ...(fillHeight ? { height: '100%' } : null),
+      }}
     >
       <DataGridTableHeader
         visibleColumns={visibleColumns}
@@ -174,6 +182,7 @@ export function DataGridTableView<
         pinOffsets={pinOffsets}
         scrollEdges={scrollEdges}
         fillWidth={fillWidth}
+        fillHeight={fillHeight}
       />
 
       <DataGridSummaryFooter

package/src/data-grid/toolbar.tsx

@@ -0,0 +1,44 @@
+/**
+ * DataGridToolbar — the standard layout band that sits directly above a
+ * DataGrid: a search field on the left and filter / column / view
+ * controls on the right (gray-ui "table toolbar" pattern). Collapses to
+ * a stacked column on narrow viewports.
+ *
+ * Purely a layout primitive — pass whatever search input + action
+ * buttons you like into the slots.
+ */
+
+import type { ReactNode } from 'react'
+
+import { cn } from '../lib/utils'
+
+export interface DataGridToolbarProps {
+  /** Left slot — typically a <SearchBar>. Stretches up to a comfortable
+   * reading width, full-width when stacked. */
+  search?: ReactNode
+  /** Right slot — filter / columns / view-toggle controls. */
+  children?: ReactNode
+  className?: string
+}
+
+export function DataGridToolbar({
+  search,
+  children,
+  className,
+}: DataGridToolbarProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between',
+        className,
+      )}
+    >
+      {search ? <div className="w-full sm:max-w-sm">{search}</div> : <span />}
+      {children ? (
+        <div className="flex flex-wrap items-center gap-2 sm:justify-end">
+          {children}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/data-grid/use-grid-columns.ts

@@ -101,7 +101,29 @@ export function useGridColumns<ColumnId extends string>({
     setVisibleColumnIds((current) => {
       const kept = current.filter((id) => allowedIds.has(id))
       const missing = columnOrder.filter((id) => !kept.includes(id))
-      return [...kept, ...missing]
+      if (missing.length === 0) {
+        return kept.length === current.length ? current : kept
+      }
+      // Insert newly-visible columns at their natural position (per the
+      // `columns` prop order) instead of appending them at the very end.
+      // Appending broke pinned trailing columns (e.g. an actions column
+      // pinned right would stop being last once another column was toggled
+      // on). Existing columns keep their (possibly drag-reordered) order.
+      const orderIndex = (id: ColumnId) => columnOrder.indexOf(id)
+      const next = [...kept]
+      for (const id of missing) {
+        const target = orderIndex(id)
+        let insertAt = next.length
+        for (let i = 0; i < next.length; i += 1) {
+          const cur = next[i]
+          if (cur !== undefined && orderIndex(cur) > target) {
+            insertAt = i
+            break
+          }
+        }
+        next.splice(insertAt, 0, id)
+      }
+      return next
     })
 
     orderBeforeDragRef.current = columnOrder

package/src/index.ts

@@ -109,6 +109,7 @@ export {
 } from './dropdown-menu'
 export {
   DataGrid,
+  DataGridToolbar,
   DataGridColumnOptionsMenu,
   DataGridDragOverlay,
   DataGridDropIndicator,
@@ -117,6 +118,7 @@ export {
   type DataGridProps,
   type DataGridRowBase,
   type DataGridSortState,
+  type DataGridToolbarProps,
   type DataGridToolbarRenderProps,
   type DataGridIcon,
   type EditingCell,