@exxatdesignux/ui 0.2.19 → 0.3.0

package/src/components/data-views/folder-grid-view.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+/**
+ * FolderGridView — generic icon-grid layout for any list-page hub.
+ *
+ * Handles the responsive CSS grid shell, empty state, and accessibility list role.
+ * Pass a `renderTile` render-prop for domain-specific tile content
+ * (Placements, Team, Rotations, etc.).
+ *
+ * Usage:
+ * ```tsx
+ * <FolderGridView
+ *   rows={placements}
+ *   getRowId={r => r.id}
+ *   renderTile={row => <PlacementFolderTile row={row} onClick={…} />}
+ *   ariaLabel="Placements folder view"
+ * />
+ * ```
+ */
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import {
+  ListPageViewFrame,
+  LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID,
+} from "../ui/list-page-view-frame"
+
+export interface FolderGridViewProps<T> {
+  rows: T[]
+  getRowId: (row: T) => string | number
+  /** Render one tile — receives the row, returns a React node (typically a `<button>`). */
+  renderTile: (row: T) => React.ReactNode
+  /** Shown when `rows` is empty. */
+  emptyContent?: React.ReactNode
+  /** `aria-label` on the grid list. */
+  ariaLabel?: string
+  className?: string
+  /**
+   * When true, constrains the grid to a centered max width so folder tiles don’t stretch
+   * edge-to-edge on very wide viewports.
+   */
+  constrainWidth?: boolean
+}
+
+export function FolderGridView<T>({
+  rows,
+  getRowId,
+  renderTile,
+  emptyContent,
+  ariaLabel = "Folder view",
+  className,
+  constrainWidth = false,
+}: FolderGridViewProps<T>) {
+  if (rows.length === 0) {
+    return (
+      <ListPageViewFrame
+        maxWidthClassName={constrainWidth ? LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID : undefined}
+        className={cn(className)}
+      >
+        <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-border py-16 text-sm text-muted-foreground">
+          <i className="fa-solid fa-grid-2 mb-3 text-3xl opacity-40" aria-hidden="true" />
+          {emptyContent ?? <p>No records found.</p>}
+        </div>
+      </ListPageViewFrame>
+    )
+  }
+
+  return (
+    <ListPageViewFrame className={cn(className)}>
+      <div
+        className={cn(
+          "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8",
+          constrainWidth && "mx-auto max-w-6xl",
+        )}
+        role="list"
+        aria-label={ariaLabel}
+      >
+        {rows.map(row => (
+          <div key={getRowId(row)} role="listitem">
+            {renderTile(row)}
+          </div>
+        ))}
+      </div>
+    </ListPageViewFrame>
+  )
+}

package/src/components/data-views/hub-table.tsx

@@ -0,0 +1,498 @@
+"use client"
+
+/**
+ * `<HubTable<TRow>>` — single centralized table surface used by every list-page hub.
+ *
+ * Owns all the per-hub scaffolding that was previously duplicated in `placements-table.tsx`,
+ * `team-table.tsx`, `compliance-table.tsx`, `question-bank-table.tsx`, and `sites-table.tsx`:
+ *
+ *  • `useTableState` setup tied to the centralized row dataset
+ *  • `displayOptions` state + `patchDisplay`
+ *  • `conditionalRules` state + add/remove/update handlers
+ *  • `filterFields` derived from column `filter` defs
+ *  • `fieldDefinitions` + `resolveColumnLabel` for the Properties drawer
+ *  • `TablePropertiesDrawerButton` wiring with `currentView` + `supportedViewTypes`
+ *  • `DataTable` for `view === "table"`; `ListPageConnectedViewBody` for every other view
+ *  • Imperative `openPropertiesDrawer()` exposed via `handleRef`
+ *
+ * Each hub now only declares **what's actually different**: its column defs and a typed
+ * `renderers` map for the views it implements. The renderers receive `state`, `toolbar`,
+ * `toolbarShell`, `drawerToolbarProps`, `displayOptions`, and `patchDisplay` so they can
+ * either reuse the pre-composed toolbar (`toolbarShell(<MyView rows={state.rows} />)`) or
+ * build their own (e.g. dashboard view with extra layout-edit actions).
+ *
+ * **Single dataset rule:** rows flow through `useTableState`; `tableState.rows` is the
+ * filtered/sorted row bag every non-table renderer reads. There is **no** parallel mock
+ * array per view. See `.cursor/rules/exxat-centralized-list-dataset.mdc`.
+ */
+
+import * as React from "react"
+import { DataTable, DataTableToolbar } from "../data-table"
+import type { ColumnDef } from "../data-table/types"
+import { useTableState } from "../data-table/use-table-state"
+import type { DataListViewType } from "../../lib/data-list-view"
+import {
+  getDataListViewRenderKind,
+  type DataListViewRenderKind,
+} from "../../lib/data-list-view-registry"
+import {
+  DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
+  type DataListDisplayOptions,
+} from "../../lib/data-list-display-options"
+import { TablePropertiesDrawerButton } from "../table-properties"
+import type {
+  ConditionalRule,
+  FilterFieldDef,
+  FilterOperator,
+} from "../../lib/table-properties-types"
+import {
+  ListPageConnectedViewBody,
+  type ListPageConnectedViewRenderers,
+} from "./list-page-connected-view-body"
+import { DataRowList } from "./data-row-list"
+import {
+  ListPageBoardTemplate,
+  type ListPageBoardColumnDef,
+} from "./list-page-board-template"
+import type { OpenTablePropertiesHandle } from "../../lib/list-page-table-properties"
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ──────────────────────────────────────────────────────────────────────────────
+
+function columnToFilterFieldDef<TRow>(c: ColumnDef<TRow>): FilterFieldDef | null {
+  if (!c.filter) return null
+  const f = c.filter
+  const defaultOps: FilterOperator[] =
+    f.type === "select" || f.type === "date" ? ["is", "is_not"] : ["contains", "not_contains"]
+  return {
+    key: c.key,
+    label: c.label,
+    icon: f.icon ?? "fa-filter",
+    type: f.type,
+    operators: (f.operators ?? defaultOps) as FilterOperator[],
+    options: f.options,
+    ...(f.textMask ? { textMask: f.textMask } : {}),
+  }
+}
+
+/** Derive `FilterFieldDef[]` from a hub's column defs — preferred to hand-writing both. */
+export function columnsToFilterFields<TRow>(cols: ColumnDef<TRow>[]): FilterFieldDef[] {
+  return cols
+    .map(c => columnToFilterFieldDef<TRow>(c))
+    .filter((x): x is FilterFieldDef => x !== null)
+}
+
+/** Field definitions for the drawer's Sort / Group / Columns panels — excludes utility columns. */
+export function columnsToFieldDefinitions<TRow>(
+  cols: ColumnDef<TRow>[],
+): { key: string; label: string; sortable: boolean }[] {
+  return cols
+    .filter(c => c.key !== "select" && c.key !== "actions")
+    .map(c => ({
+      key: c.key,
+      label: c.label,
+      sortable: !!(c.sortable && (c.sortKey ?? c.key)),
+    }))
+}
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Public types
+// ──────────────────────────────────────────────────────────────────────────────
+
+/** Subset of `TablePropertiesDrawerButton` props that `HubTable` owns. Exposed so renderers
+ * that build a custom toolbar (e.g. dashboard with an extra Edit-layout button) can splat
+ * this back into their own `<TablePropertiesDrawerButton {...drawerToolbarProps} state={s} extraActions={…} />`. */
+export interface HubDrawerToolbarProps {
+  totalRows: number
+  filterFields: FilterFieldDef[]
+  fieldDefinitions: { key: string; label: string; sortable: boolean }[]
+  resolveColumnLabel: (key: string) => string
+  displayOptions: DataListDisplayOptions
+  onDisplayOptionsChange: (patch: Partial<DataListDisplayOptions>) => void
+  conditionalRules: ConditionalRule[]
+  onAddConditionalRule: (rule: Omit<ConditionalRule, "id">) => void
+  onRemoveConditionalRule: (id: string) => void
+  onUpdateConditionalRule: (id: string, patch: Partial<ConditionalRule>) => void
+  currentView: DataListViewType
+  onViewChange?: (v: DataListViewType) => void
+  supportedViewTypes: readonly DataListViewType[]
+  lifecycleTabLabel: string
+  boardGroupByColumnOptions?: { key: string; label: string }[]
+  renderFilterOptionValue?: (fieldKey: string, value: string) => React.ReactNode
+  pagination?: boolean
+  onPaginationChange?: (v: boolean) => void
+}
+
+/** Everything a non-table renderer needs. The pre-composed `toolbar` includes search +
+ * filter chips + the Properties button; the renderer just wraps it around its body with
+ * `toolbarShell`. For dashboards or other layouts that own their own toolbar, use
+ * `drawerToolbarProps` to assemble a custom `<TablePropertiesDrawerButton>`. */
+export interface HubTableRendererArgs<TRow extends Record<string, unknown>> {
+  state: ReturnType<typeof useTableState<TRow>>
+  toolbar: React.ReactNode
+  toolbarShell: (body: React.ReactNode) => React.ReactNode
+  drawerToolbarProps: HubDrawerToolbarProps
+  displayOptions: DataListDisplayOptions
+  patchDisplay: (patch: Partial<DataListDisplayOptions>) => void
+}
+
+/** Hubs provide one renderer per `DataListViewRenderKind` they implement. The `data-table`
+ * kind is handled internally by `HubTable` (do not override unless you genuinely need a
+ * different table surface). Missing kinds render `<ListPageViewNotConfigured>` — clear empty
+ * state, never a silent dashboard fallback. */
+export type HubTableRenderers<TRow extends Record<string, unknown>> = Partial<
+  Record<DataListViewRenderKind, (args: HubTableRendererArgs<TRow>) => React.ReactNode>
+>
+
+export type HubTableHandle = OpenTablePropertiesHandle
+
+export interface HubTableProps<TRow extends Record<string, unknown>> {
+  /** Full row dataset (already scoped/filtered by the hub client, e.g. by URL nav). */
+  rows: TRow[]
+  /** Column defs — `filter` blocks here become Properties drawer filter fields automatically. */
+  columns: ColumnDef<TRow>[]
+  /** Active view from the `ListPageTemplate` tab. */
+  view: DataListViewType
+  onViewChange?: (v: DataListViewType) => void
+  /** Allowlist passed to `TablePropertiesDrawerButton` so Properties cannot offer unsupported views. */
+  supportedViewTypes: readonly DataListViewType[]
+  /** Used by `ListPageViewNotConfigured` when a supported view has no renderer. */
+  hubLabel: string
+  /** Shown below "Properties" in the drawer header. */
+  lifecycleTabLabel: string
+  /** Toolbar search input aria-label. */
+  searchAriaLabel: string
+  getRowId: (row: TRow) => string | number
+  getRowSelectionLabel: (row: TRow) => string
+  defaultSort: { key: string; dir: "asc" | "desc" }
+  /** DataTable empty state. Defaults to a muted "No records match your filters." */
+  emptyState?: React.ReactNode
+  /** Per-view renderers (everything other than `view === "table"`). */
+  renderers: HubTableRenderers<TRow>
+  /** Bulk-actions slot rendered when one or more rows are selected. */
+  bulkActionsSlot?: (selected: Set<string | number>) => React.ReactNode
+  /** Board-view group-by column options for the Properties drawer. */
+  boardGroupByColumnOptions?: { key: string; label: string }[]
+  /** Initial display options (toolbar search visibility, calendar panel, etc.). */
+  displayOptionsInit?: DataListDisplayOptions
+  /** Custom renderer for filter option values (e.g. status chips). */
+  renderFilterOptionValue?: (fieldKey: string, value: string) => React.ReactNode
+  /** DataTable: enable "Group by" feature. Default `true`. */
+  groupable?: boolean
+  /** DataTable: enable row selection checkboxes. Default `true`. */
+  selectable?: boolean
+  /** DataTable: row click handler (e.g. navigate to detail route). */
+  onRowClick?: (row: TRow) => void
+  /**
+   * Controlled `displayOptions` — when provided (with `onDisplayOptionsChange`), the hub client
+   * owns persistence (e.g. Placements page persists across tab switches). Otherwise `HubTable`
+   * owns internal state from `displayOptionsInit`.
+   */
+  displayOptions?: DataListDisplayOptions
+  onDisplayOptionsChange?: (patch: Partial<DataListDisplayOptions>) => void
+  /**
+   * Pagination toggle forwarded to `TablePropertiesDrawerButton` so the drawer can offer
+   * "Show pagination" on the Display panel. The hub still implements its own pagination chrome
+   * around the table body via `tableRenderer`. Defaults to `false` / no toggle.
+   */
+  pagination?: boolean
+  onPaginationChange?: (v: boolean) => void
+  /** Imperative handle (`openPropertiesDrawer`) for hub clients that pass `tablePropertiesRef`. */
+  handleRef?: React.Ref<HubTableHandle>
+  /** Optional override for the `data-table` view. Default mounts `<DataTable {…}>`. */
+  tableRenderer?: (args: HubTableRendererArgs<TRow>) => React.ReactNode
+  /**
+   * Forwarded to `useTableState` so the hub can switch on server-style pagination
+   * (e.g. Placements toggles between paged and unpaged tables).
+   */
+  paginationOverride?: { page: number; pageSize: number }
+  /**
+   * Forwarded to `useTableState` to sync toolbar search from `?q=` (Question bank search routes).
+   * Defining as `""` enables sync without an initial query.
+   */
+  syncedSearchFromUrl?: string
+
+  // ─── Centralized "list" and "board" defaults ───────────────────────────────
+  // When a hub does NOT provide a renderer for `list-with-toolbar`, but DOES provide
+  // `renderListRow`, `HubTable` synthesises a default that wires `DataRowList` through
+  // the shared toolbar. Same for `board-with-toolbar` + `renderBoardCard`. This is the
+  // happy path for most hubs; the explicit renderer escape hatch is only needed for
+  // exotic surfaces (e.g. Placements board with per-phase column search).
+
+  /** Default `list-with-toolbar` renderer body — `HubTable` wraps with toolbar + `DataRowList`. */
+  renderListRow?: (row: TRow) => React.ReactNode
+  /** Override the `aria-label` on the `<ul>` from `renderListRow`. Defaults to `hubLabel`. */
+  listAriaLabel?: string
+  /** Empty-state for the default list renderer. Defaults to "No records match your filters." */
+  listEmptyState?: React.ReactNode
+  /** Virtualise after N rows in the default list renderer. Default 100; pass `0` to disable. */
+  listVirtualizeThreshold?: number
+  /** Estimated row height (px) for the default list virtualiser. Default 96. */
+  listEstimatedRowHeight?: number
+
+  /** Default `board-with-toolbar` renderer body — `HubTable` wraps with toolbar + `ListPageBoardTemplate`. */
+  renderBoardCard?: (row: TRow) => React.ReactNode
+  /** Required if `renderBoardCard` is set: how rows group into columns. */
+  boardGroups?: ListPageBoardColumnDef<TRow>[]
+  /** Per-column count badge tint classes for the default board renderer. */
+  boardColumnCountBadgeClassName?: Record<string, string>
+  /** Empty column copy for the default board renderer. Defaults to "No items". */
+  boardEmptyColumnLabel?: string
+}
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Component
+// ──────────────────────────────────────────────────────────────────────────────
+
+export function HubTable<TRow extends Record<string, unknown>>({
+  rows,
+  columns,
+  view,
+  onViewChange,
+  supportedViewTypes,
+  hubLabel,
+  lifecycleTabLabel,
+  searchAriaLabel,
+  getRowId,
+  getRowSelectionLabel,
+  defaultSort,
+  emptyState,
+  renderers,
+  bulkActionsSlot,
+  boardGroupByColumnOptions,
+  displayOptionsInit,
+  renderFilterOptionValue,
+  groupable = true,
+  selectable = true,
+  onRowClick,
+  displayOptions: displayOptionsControlled,
+  onDisplayOptionsChange: onDisplayOptionsChangeControlled,
+  pagination,
+  onPaginationChange,
+  handleRef,
+  tableRenderer,
+  paginationOverride,
+  syncedSearchFromUrl,
+  renderListRow,
+  listAriaLabel,
+  listEmptyState,
+  listVirtualizeThreshold,
+  listEstimatedRowHeight,
+  renderBoardCard,
+  boardGroups,
+  boardColumnCountBadgeClassName,
+  boardEmptyColumnLabel,
+}: HubTableProps<TRow>) {
+  const filterFields = React.useMemo(() => columnsToFilterFields(columns), [columns])
+  const fieldDefinitions = React.useMemo(() => columnsToFieldDefinitions(columns), [columns])
+  const resolveColumnLabel = React.useCallback(
+    (key: string) => columns.find(c => c.key === key)?.label ?? key,
+    [columns],
+  )
+
+  // displayOptions: controlled (parent owns state via prop pair) OR uncontrolled (HubTable owns it).
+  // Most hubs keep display options ephemeral; Placements persists them across tabs at the page level.
+  const [internalDisplayOptions, setInternalDisplayOptions] = React.useState<DataListDisplayOptions>(
+    displayOptionsInit ?? DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
+  )
+  const isControlled =
+    displayOptionsControlled !== undefined && onDisplayOptionsChangeControlled !== undefined
+  const displayOptions = isControlled ? displayOptionsControlled : internalDisplayOptions
+  const patchDisplay = React.useCallback(
+    (patch: Partial<DataListDisplayOptions>) => {
+      if (isControlled) {
+        onDisplayOptionsChangeControlled!(patch)
+      } else {
+        setInternalDisplayOptions(prev => ({ ...prev, ...patch }))
+      }
+    },
+    [isControlled, onDisplayOptionsChangeControlled],
+  )
+
+  const [conditionalRules, setConditionalRules] = React.useState<ConditionalRule[]>([])
+  const addConditionalRule = React.useCallback((rule: Omit<ConditionalRule, "id">) => {
+    setConditionalRules(prev => [...prev, { ...rule, id: `cr-${Date.now()}` }])
+  }, [])
+  const removeConditionalRule = React.useCallback((id: string) => {
+    setConditionalRules(prev => prev.filter(r => r.id !== id))
+  }, [])
+  const updateConditionalRule = React.useCallback(
+    (id: string, patch: Partial<ConditionalRule>) => {
+      setConditionalRules(prev => prev.map(r => (r.id === id ? { ...r, ...patch } : r)))
+    },
+    [],
+  )
+
+  const tableState = useTableState<TRow>(
+    rows,
+    columns,
+    defaultSort,
+    paginationOverride,
+    syncedSearchFromUrl,
+  )
+
+  // Extract the stable setter from `useTableState` first so the
+  // `useImperativeHandle` deps array sees the exact value the hook reads.
+  // `setSheetOpen` is referentially stable, so the handle is created once.
+  const { setSheetOpen: openPropertiesSheet } = tableState
+  React.useImperativeHandle(
+    handleRef ?? null,
+    () => ({ openPropertiesDrawer: () => openPropertiesSheet(true) }),
+    [openPropertiesSheet],
+  )
+
+  const drawerToolbarProps: HubDrawerToolbarProps = {
+    totalRows: rows.length,
+    filterFields,
+    fieldDefinitions,
+    resolveColumnLabel,
+    displayOptions,
+    onDisplayOptionsChange: patchDisplay,
+    conditionalRules,
+    onAddConditionalRule: addConditionalRule,
+    onRemoveConditionalRule: removeConditionalRule,
+    onUpdateConditionalRule: updateConditionalRule,
+    currentView: view,
+    onViewChange,
+    supportedViewTypes,
+    lifecycleTabLabel,
+    boardGroupByColumnOptions,
+    renderFilterOptionValue,
+    ...(pagination !== undefined ? { pagination } : {}),
+    ...(onPaginationChange !== undefined ? { onPaginationChange } : {}),
+  }
+
+  const toolbar = (
+    <DataTableToolbar
+      state={tableState}
+      columns={columns}
+      searchable={displayOptions.showToolbarSearch}
+      searchAriaLabel={searchAriaLabel}
+      renderFilterOptionValue={renderFilterOptionValue}
+      toolbarSlot={s => <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />}
+    />
+  )
+
+  const toolbarShell = React.useCallback(
+    (body: React.ReactNode) => (
+      <div className="flex min-h-0 flex-1 flex-col">
+        {toolbar}
+        {body}
+      </div>
+    ),
+    // `toolbar` is recreated each render; including it would defeat memoization but
+    // also gives renderers a fresh closure — acceptable because renderers are called
+    // on render anyway. Keep deps stable so the function identity is stable.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      tableState,
+      columns,
+      displayOptions.showToolbarSearch,
+      searchAriaLabel,
+      renderFilterOptionValue,
+      drawerToolbarProps,
+    ],
+  )
+
+  // Default `data-table` renderer — full DataTable with toolbar + bulk actions. Hubs can
+  // override via `tableRenderer` for pagination chrome (CountSyncer + PaginationBar) or
+  // any other table-view-specific wrapping.
+  const defaultTableRenderer = (args: HubTableRendererArgs<TRow>) => (
+    <div className="pb-6">
+      <DataTable<TRow>
+        data={rows}
+        columns={columns}
+        getRowId={getRowId}
+        getRowSelectionLabel={getRowSelectionLabel}
+        selectable={selectable}
+        searchable={displayOptions.showToolbarSearch}
+        showColumnHeaders={displayOptions.showColumnLabels}
+        groupable={groupable}
+        defaultSort={defaultSort}
+        emptyState={emptyState ?? <p className="text-sm text-muted-foreground">No records match your filters.</p>}
+        conditionalRules={conditionalRules}
+        state={args.state}
+        renderFilterOptionValue={renderFilterOptionValue}
+        toolbarSlot={s => <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />}
+        bulkActionsSlot={bulkActionsSlot}
+        onRowClick={onRowClick}
+      />
+    </div>
+  )
+
+  const args: HubTableRendererArgs<TRow> = {
+    state: tableState,
+    toolbar,
+    toolbarShell,
+    drawerToolbarProps,
+    displayOptions,
+    patchDisplay,
+  }
+
+  // Dev-time warning when a `supportedViewType` has no renderer (other than `table`,
+  // which has the built-in default). Mirrors `defineHubViewRenderers` from
+  // `lib/hub-connected-view-renderers.ts` but inline so we don't double-wrap.
+  if (process.env.NODE_ENV !== "production") {
+    for (const v of supportedViewTypes) {
+      const kind = getDataListViewRenderKind(v)
+      if (kind === "data-table") continue
+      if (renderers[kind] == null) {
+        console.warn(
+          `[Exxat DS][HubTable: ${hubLabel}] Missing renderer for supported view "${v}" (${kind}). ` +
+            "Add a renderer entry, or remove the view from supportedViewTypes.",
+        )
+      }
+    }
+  }
+
+  // Compose `ListPageConnectedViewBody` renderers: the built-in `data-table` (or hub override)
+  // plus each hub-provided non-table renderer. Wrapping in `() => …` defers execution until
+  // the active view actually selects that kind — so heavy bodies (dashboard charts) don't
+  // pay render cost on a table tab.
+  const composed: ListPageConnectedViewRenderers = {
+    "data-table": () => (tableRenderer ?? defaultTableRenderer)(args),
+  }
+
+  // Default centralized list renderer: same DataRowList shell every hub used to roll
+  // by hand. Hub provides only the per-row body via `renderListRow`.
+  if (renderers["list-with-toolbar"] == null && renderListRow != null) {
+    composed["list-with-toolbar"] = () =>
+      args.toolbarShell(
+        <DataRowList<TRow>
+          rows={args.state.rows as TRow[]}
+          getRowId={row => getRowId(row)}
+          ariaLabel={listAriaLabel ?? hubLabel}
+          emptyState={listEmptyState ?? "No records match your filters."}
+          {...(listVirtualizeThreshold !== undefined ? { virtualizeThreshold: listVirtualizeThreshold } : {})}
+          {...(listEstimatedRowHeight !== undefined ? { estimatedRowHeight: listEstimatedRowHeight } : {})}
+          renderRow={renderListRow}
+        />,
+      )
+  }
+
+  // Default centralized board renderer: same ListPageBoardTemplate every hub used to wrap.
+  // Hub provides only the per-card body via `renderBoardCard` and the column predicate set.
+  if (renderers["board-with-toolbar"] == null && renderBoardCard != null && boardGroups != null) {
+    composed["board-with-toolbar"] = () =>
+      args.toolbarShell(
+        <ListPageBoardTemplate<TRow>
+          columns={boardGroups}
+          rows={args.state.rows as TRow[]}
+          getRowKey={getRowId}
+          renderCard={renderBoardCard}
+          columnCountBadgeClassName={boardColumnCountBadgeClassName ?? {}}
+          emptyColumnLabel={boardEmptyColumnLabel ?? "No items"}
+        />,
+      )
+  }
+
+  for (const kind of Object.keys(renderers) as DataListViewRenderKind[]) {
+    const r = renderers[kind]
+    if (r) composed[kind] = () => r(args)
+  }
+
+  return <ListPageConnectedViewBody view={view} hubLabel={hubLabel} renderers={composed} />
+}
+
+HubTable.displayName = "HubTable"

package/src/components/data-views/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Data-views — view-body primitives for list-page hubs.
+ *
+ * Composes `DataTable`, `useTableState`, `TablePropertiesDrawerButton`, the
+ * `DataListViewType` registry, and the various non-table view bodies
+ * (DataRowList, ListPageBoardTemplate, ListPageBoardCard, split-view
+ * shells) into a single import surface.
+ *
+ * `HubTable<TRow>` is the binding layer: pass it columns, rows, and a
+ * `renderers` map of view-render-kinds and it produces a complete
+ * list-page hub body for every supported view tab.
+ */
+
+export * from "./hub-table"
+export * from "./data-row-list"
+export * from "./list-page-connected-view-body"
+export * from "./list-page-board-template"
+export * from "./list-page-board-card"
+export * from "./board-card-primitives"
+export * from "./list-page-tree-column-header"
+export * from "./list-page-split-details-placeholder"
+export * from "./list-page-split-hub-chrome"
+export * from "./list-page-split-hub-tokens"
+export * from "./list-page-tree-panel-shell"
+export * from "./finder-panel-view"
+export * from "./folder-grid-view"
+export * from "./outline-tree-menu"
+export * from "./os-folder-glyph"