@exxatdesignux/ui 0.2.19 → 0.3.0

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

@@ -1,86 +1 @@
-"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 "@/components/data-views/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>
-  )
-}
+export * from "@exxatdesignux/ui/components/data-views/folder-grid-view"

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

@@ -0,0 +1 @@
+export * from "@exxatdesignux/ui/components/data-views/hub-table"

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

@@ -1,15 +1,59 @@
 /**
  * Central exports for list-page data surfaces and shared view chrome.
  *
- * **Pattern:** `ListPageTemplate` + hub `*-table.tsx` — one `useTableState`, one toolbar,
+ * **Pattern:** `ListPageTemplate` + `PlacementsTable` (or any hub-specific `*-table.tsx`) — one `useTableState`, one toolbar,
  * table | list | board | dashboard from the same component (`AGENTS.md` §4, `docs/data-views-pattern.md`).
  *
  * **View UI:** `ViewSegmentedControl` matches the template’s views toolbar (`bg-muted/60` pills).
  */
 
+export { PlacementsTable } from "@/components/placements-table"
+export type { PlacementsTableProps, PlacementsTableHandle } from "@/components/placements-table"
 export type { DataListViewType } from "@/lib/data-list-view"
 export { DATA_LIST_VIEW_TILES, dataListViewIcon, dataListViewLabel } from "@/lib/data-list-view"
 
+/** View registry — single source for view labels/icons/render kinds + per-hub allowlist filtering. */
+export {
+  DATA_LIST_VIEW_REGISTRY,
+  dataListViewDefinition,
+  dataListViewTilesForHub,
+  dataListViewSelectionTilesForHub,
+  showsListPageHubMetricsStrip,
+  isDataListSurfaceViewType,
+  isDataListViewTypeSupported,
+  type DataListViewDefinition,
+  type DataListViewRenderKind,
+} from "@/lib/data-list-view-registry"
+
+/** Per-hub view router — switches the active view body by render kind, with a clear empty state for unsupported views (never silent dashboard fallback). */
+export {
+  ListPageConnectedViewBody,
+  ListPageViewNotConfigured,
+  type ListPageConnectedViewBodyProps,
+  type ListPageConnectedViewRenderers,
+} from "@/components/data-views/list-page-connected-view-body"
+
+/** Single centralized hub table — owns `useTableState`, drawer wiring, and view-body routing.
+ *  Every list-page hub composes this with its own columns + renderer map. */
+export {
+  HubTable,
+  columnsToFilterFields,
+  columnsToFieldDefinitions,
+  type HubTableProps,
+  type HubTableHandle,
+  type HubTableRendererArgs,
+  type HubTableRenderers,
+  type HubDrawerToolbarProps,
+} from "@/components/data-views/hub-table"
+
+/** Typed renderer builder for hubs declaring `supportedViewTypes` — dev-time warning when a supported view has no body. */
+export {
+  defineHubViewRenderers,
+  hubRenderKindsForSupported,
+  type HubConnectedViewRenderers,
+  type HubRenderKindForViews,
+} from "@/lib/hub-connected-view-renderers"
+
 export {
   ListPageTemplate,
   type ViewTab,
@@ -36,7 +80,6 @@ export {
 export {
   ListPageSplitHubChrome,
   LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE,
-  LIST_PAGE_CALENDAR_HEIGHT_STYLE,
   type ListPageSplitHubChromeProps,
 } from "@/components/data-views/list-page-split-hub-chrome"
 
@@ -61,7 +104,8 @@ export {
   type OutlineTreeSurface,
 } from "@/components/data-views/outline-tree-menu"
 
-/** Question-bank nav only — import from `@/components/data-views/question-bank-folder-tree-branch`. */
+export { QuestionBankFolderTreeBranch } from "@/components/data-views/question-bank-folder-tree-branch"
+export type { QuestionBankFolderTreeBranchProps } from "@/components/data-views/question-bank-folder-tree-branch"
 
 export {
   LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,
@@ -80,12 +124,10 @@ export {
   type FolderDetailsShellProps,
 } from "@/components/folder-details-shell"
 
-/** Hub-specific tree+inspector — import from `@/components/hub-tree-panel-view` (not generic DS). */
-
 export {
-  ListPageFolderColumnsPanel,
-  type ListPageFolderColumnsPanelProps,
-} from "@/components/data-views/list-page-folder-columns-panel"
+  HubTreePanelView,
+  type HubTreePanelViewProps,
+} from "@/components/hub-tree-panel-view"
 
 export {
   ListPageTreePanelShell,
@@ -102,35 +144,6 @@ export {
 /** Generic folder icon-grid — reusable across all list hubs. */
 export { FolderGridView, type FolderGridViewProps } from "@/components/data-views/folder-grid-view"
 
-/** Month calendar — same `tableState.rows` as table / list / board. */
-export {
-  ListPageCalendarView,
-  type ListPageCalendarViewProps,
-} from "@/components/data-views/list-page-calendar-view"
-
-/** Hub view router — switch on `DataListViewRenderKind`; missing renderer = explicit empty state. */
-export {
-  ListPageConnectedViewBody,
-  ListPageViewNotConfigured,
-  type ListPageConnectedViewBodyProps,
-  type ListPageConnectedViewRenderers,
-} from "@/components/data-views/list-page-connected-view-body"
-
-export {
-  DATA_LIST_VIEW_REGISTRY,
-  dataListViewDefinition,
-  dataListViewTilesForHub,
-  showsListPageHubMetricsStrip,
-  isDataListViewTypeSupported,
-} from "@/lib/data-list-view-registry"
-
-export {
-  defineHubViewRenderers,
-  hubRenderKindsForSupported,
-  type HubConnectedViewRenderers,
-  type HubRenderKindForViews,
-} from "@/lib/hub-connected-view-renderers"
-
 /** Generic vertical row list — used by every hub's "list" tab. Composes
  *  `ListPageBoardCard layout="row"` via a `renderRow` prop. */
 export { DataRowList, type DataRowListProps } from "@/components/data-views/data-row-list"

package/template/components/data-views/list-page-board-card.tsx

@@ -1,192 +1 @@
-"use client"
-
-/**
- * ListPageBoardCard — single board-card shell for all list hubs (Placements, Team, Compliance, …).
- *
- * Information hierarchy (top → bottom):
- * 1. **Title row** — `ListPageBoardCardTitleRow` — primary label (`text-sm font-semibold`), optional `trailing` (`ListPageBoardCardAvatar` initials chip, same as Placements).
- * 2. **Badge row** — `ListPageBoardCardBadgeRow` — optional status / tags (`flex-wrap`).
- * 3. **Body** — `ListPageBoardCardBody` — primary facts: icon rows, two-line blocks (`BoardCardIconRow` / `BoardCardTwoLineBlock` from board-card-primitives).
- * 4. **Secondary** — `ListPageBoardCardSecondary` — optional muted supporting line (`text-xs text-muted-foreground`).
- *
- * Styling matches **`BoardPlacementCard`**: `Card` `size="sm"`, ring, hover shadow, optional **new** ring accent.
- *
- * **Interaction:** Pass **`onClick`** (e.g. `BoardPlacementCard`) or **`interactive`** when the card is
- * wrapped in `<Link>` / router navigation so hover/cursor match placement board tiles.
- *
- * **Layouts:**
- * - **`stack`** (default) — kanban / grid tile: compose with `ListPageBoardCardHeader`, title row, body.
- * - **`row`** — full-width list row: optional **`leading`**, **`children`** as main column, optional **`rowEnd`**.
- *   Use **`rowContainerClassName`** for responsive shells (e.g. `flex-col sm:flex-row`).
- */
-
-import * as React from "react"
-import { AvatarInitials } from "@/components/ui/avatar"
-import { cn } from "@/lib/utils"
-import { Card, CardHeader, CardTitle } from "@/components/ui/card"
-
-export type ListPageBoardCardLayout = "stack" | "row"
-
-export type ListPageBoardCardProps = {
-  layout?: ListPageBoardCardLayout
-  /** `row` only — avatar / icon column. */
-  leading?: React.ReactNode
-  /** `row` only — status + chevron, etc. */
-  rowEnd?: React.ReactNode
-  /**
-   * `row` only — flex shell for the card (default `flex flex-row items-start gap-3`).
-   * Use e.g. `flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-4` for compliance-style rows.
-   */
-  rowContainerClassName?: string
-  /** Entire card is clickable (e.g. open detail) — enables pointer + hover shadow. */
-  onClick?: () => void
-  /**
-   * Same hover/cursor as `onClick` when the parent uses `<Link>` or `button` instead of Card click
-   * (avoids nested interactive targets and keeps keyboard focus on the link).
-   */
-  interactive?: boolean
-  className?: string
-  style?: React.CSSProperties
-  /** Subtle brand ring — e.g. newly created row. */
-  isNew?: boolean
-  children: React.ReactNode
-}
-
-export function ListPageBoardCard({
-  layout = "stack",
-  leading,
-  rowEnd,
-  rowContainerClassName,
-  onClick,
-  interactive = false,
-  className,
-  style,
-  isNew,
-  children,
-}: ListPageBoardCardProps) {
-  const isRow = layout === "row"
-  const isInteractive = Boolean(onClick) || interactive
-  const rowShell = rowContainerClassName ?? "flex flex-row items-start gap-3"
-
-  return (
-    <Card
-      size="sm"
-      className={cn(
-        "w-full min-w-0 transition-shadow",
-        !isRow && "gap-1",
-        isRow && cn("!gap-0", rowShell, "px-4 py-3"),
-        isInteractive && "cursor-pointer hover:shadow-md",
-        isNew && "ring-brand/30",
-        className,
-      )}
-      style={style}
-      onClick={onClick}
-    >
-      {isRow ? (
-        <>
-          {leading}
-          <div className="min-w-0 flex-1">{children}</div>
-          {rowEnd}
-        </>
-      ) : (
-        children
-      )}
-    </Card>
-  )
-}
-
-/** Preferred public name — same component as `ListPageBoardCard`. */
-export const HubRecordCard = ListPageBoardCard
-
-export function ListPageBoardCardHeader({
-  className,
-  children,
-}: {
-  className?: string
-  children: React.ReactNode
-}) {
-  return <CardHeader className={cn("gap-2 pb-2", className)}>{children}</CardHeader>
-}
-
-/**
- * Level 1 — Primary title (dominant text on the card).
- */
-export function ListPageBoardCardTitleRow({
-  title,
-  titleClassName,
-  trailing,
-}: {
-  title: React.ReactNode
-  /** Extra classes on the title (e.g. line-clamp from `lineClampClass`). */
-  titleClassName?: string
-  /** End-aligned: avatar, icon, etc. */
-  trailing?: React.ReactNode
-}) {
-  return (
-    <div className="flex min-w-0 items-start justify-between gap-2">
-      <div className="min-w-0 flex-1">
-        <CardTitle
-          className={cn(
-            "break-words text-sm font-semibold leading-snug text-foreground",
-            titleClassName,
-          )}
-        >
-          {title}
-        </CardTitle>
-      </div>
-      {trailing}
-    </div>
-  )
-}
-
-/** Initials avatar — Radix `Avatar` + `--avatar-initials-*` tokens (same as tables / placement board). */
-export function ListPageBoardCardAvatar({
-  initials,
-  className,
-}: {
-  initials: string
-  className?: string
-}) {
-  return (
-    <AvatarInitials
-      initials={initials}
-      className={cn("size-7 shrink-0 text-xs", className)}
-      fallbackClassName="text-xs"
-    />
-  )
-}
-
-/**
- * Level 2 — Status / metadata chips (below title, above primary body).
- */
-export function ListPageBoardCardBadgeRow({ children }: { children: React.ReactNode }) {
-  return <div className="flex min-w-0 flex-wrap items-center gap-1.5">{children}</div>
-}
-
-/**
- * Level 3 — Main facts: compose with `BoardCardIconRow`, `BoardCardTwoLineBlock`, etc.
- */
-export function ListPageBoardCardBody({
-  className,
-  children,
-}: {
-  className?: string
-  children: React.ReactNode
-}) {
-  return <div className={cn("flex flex-col gap-2", className)}>{children}</div>
-}
-
-/**
- * Level 4 — Optional muted supporting line (caption, hint, extra context).
- */
-export function ListPageBoardCardSecondary({
-  className,
-  children,
-}: {
-  className?: string
-  children: React.ReactNode
-}) {
-  return (
-    <p className={cn("text-xs text-muted-foreground leading-snug", className)}>{children}</p>
-  )
-}
+export * from "@exxatdesignux/ui/components/data-views/list-page-board-card"

package/template/components/data-views/list-page-board-template.tsx

@@ -1,122 +1 @@
-"use client"
-
-/**
- * ListPageBoardTemplate — reusable kanban shell for list pages (Team, custom hubs).
- *
- * - Columns are defined with predicates; each row is placed in the **first** matching column.
- * - Cards are rendered by the caller (`renderCard`) — compose **`ListPageBoardCard`** + primitives (`BoardCardTwoLineBlock`, etc.).
- * - Placements keeps richer column headers (search, menus); this template is for simpler hubs.
- *
- * @see `docs/data-views-pattern.md` — board primitives
- */
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { Badge } from "@/components/ui/badge"
-import { BoardNewCardPlaceholder } from "@/components/data-views/board-card-primitives"
-
-export type ListPageBoardColumnDef<T> = {
-  id: string
-  label: string
-  /** Shown beside the title on larger breakpoints */
-  description?: string
-  /** First matching column wins; columns should be mutually exclusive for most domains. */
-  filter: (row: T) => boolean
-}
-
-export type ListPageBoardTemplateProps<T> = {
-  columns: ListPageBoardColumnDef<T>[]
-  rows: T[]
-  getRowKey: (row: T) => string | number
-  renderCard: (row: T) => React.ReactNode
-  /** Tailwind classes for the count pill, keyed by column `id` */
-  columnCountBadgeClassName?: Record<string, string>
-  /** Copy when a column has no rows */
-  emptyColumnLabel?: string
-}
-
-function ListPageBoardColumnHeader({
-  label,
-  description,
-  count,
-  badgeClassName,
-}: {
-  label: string
-  description?: string
-  count: number
-  badgeClassName?: string
-}) {
-  return (
-    <div className="flex items-center justify-between border-b border-border px-3 py-2.5">
-      <div className="flex min-w-0 items-center gap-2">
-        <span className="truncate text-sm font-semibold text-foreground">{label}</span>
-        {description ? (
-          <span className="hidden text-xs text-muted-foreground sm:inline">{description}</span>
-        ) : null}
-      </div>
-      <Badge
-        variant="outline"
-        className={cn(
-          "inline-flex h-6 min-w-6 shrink-0 items-center justify-center border-0 bg-muted/70 px-2 text-xs font-semibold tabular-nums text-foreground",
-          badgeClassName,
-        )}
-        aria-label={`${count} ${count === 1 ? "item" : "items"}`}
-      >
-        {count}
-      </Badge>
-    </div>
-  )
-}
-
-export function ListPageBoardTemplate<T>({
-  columns,
-  rows,
-  getRowKey,
-  renderCard,
-  columnCountBadgeClassName = {},
-  emptyColumnLabel = "No items",
-}: ListPageBoardTemplateProps<T>) {
-  const grouped = React.useMemo(() => {
-    const map: Record<string, T[]> = {}
-    for (const col of columns) map[col.id] = []
-    for (const row of rows) {
-      for (const col of columns) {
-        if (col.filter(row)) {
-          map[col.id].push(row)
-          break
-        }
-      }
-    }
-    return map
-  }, [columns, rows])
-
-  return (
-    <div className="flex min-h-0 flex-1 gap-3 overflow-x-auto px-4 pb-6 pt-2 lg:px-6">
-      {columns.map(col => (
-        <div
-          key={col.id}
-          className="flex w-72 shrink-0 flex-col overflow-hidden rounded-xl border border-border bg-muted/30"
-        >
-          <ListPageBoardColumnHeader
-            label={col.label}
-            description={col.description}
-            count={grouped[col.id]?.length ?? 0}
-            badgeClassName={columnCountBadgeClassName[col.id]}
-          />
-
-          <div className="flex flex-1 flex-col gap-2 overflow-y-auto p-2">
-            <BoardNewCardPlaceholder position="above" />
-
-            {(grouped[col.id]?.length ?? 0) === 0 ? (
-              <p className="py-6 text-center text-xs text-muted-foreground">{emptyColumnLabel}</p>
-            ) : (
-              grouped[col.id]!.map(row => <React.Fragment key={String(getRowKey(row))}>{renderCard(row)}</React.Fragment>)
-            )}
-
-            <BoardNewCardPlaceholder position="below" />
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/data-views/list-page-board-template"

package/template/components/data-views/list-page-connected-view-body.tsx

@@ -1,66 +1 @@
-"use client"
-
-/**
- * Switches list-hub view bodies by `DataListViewRenderKind`.
- * Hubs pass one renderer per kind they support; missing kinds show a clear empty state
- * (never silently fall through to dashboard).
- */
-
-import * as React from "react"
-import type { DataListViewType } from "@/lib/data-list-view"
-import {
-  dataListViewDefinition,
-  dataListViewLabel,
-  getDataListViewRenderKind,
-  type DataListViewRenderKind,
-} from "@/lib/data-list-view-registry"
-
-export type ListPageConnectedViewRenderers = Partial<
-  Record<DataListViewRenderKind, React.ReactNode | (() => React.ReactNode)>
->
-
-export interface ListPageConnectedViewBodyProps {
-  view: DataListViewType
-  /** Human-readable hub name for the not-configured state. */
-  hubLabel?: string
-  renderers: ListPageConnectedViewRenderers
-}
-
-function resolveRenderer(node: React.ReactNode | (() => React.ReactNode) | undefined) {
-  if (node == null) return null
-  return typeof node === "function" ? node() : node
-}
-
-export function ListPageViewNotConfigured({
-  view,
-  hubLabel = "This hub",
-}: {
-  view: DataListViewType
-  hubLabel?: string
-}) {
-  const label = dataListViewLabel(view)
-  return (
-    <div
-      className="flex flex-1 items-center justify-center px-4 py-12 text-center text-sm text-muted-foreground"
-      role="status"
-    >
-      {hubLabel} does not implement {label}. Add a renderer for{" "}
-      <span className="font-medium text-foreground">{dataListViewDefinition(view).renderKind}</span>{" "}
-      in this hub&apos;s table component, or remove the view from{" "}
-      <code className="rounded bg-muted px-1 py-0.5 text-xs">supportedViewTypes</code>.
-    </div>
-  )
-}
-
-export function ListPageConnectedViewBody({
-  view,
-  hubLabel,
-  renderers,
-}: ListPageConnectedViewBodyProps) {
-  const kind = getDataListViewRenderKind(view)
-  const body = resolveRenderer(renderers[kind])
-  if (body == null) {
-    return <ListPageViewNotConfigured view={view} hubLabel={hubLabel} />
-  }
-  return <>{body}</>
-}
+export * from "@exxatdesignux/ui/components/data-views/list-page-connected-view-body"

package/template/components/data-views/list-page-split-details-placeholder.tsx

@@ -1,39 +1 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-export interface ListPageSplitDetailsPlaceholderProps {
-  title?: string
-  description?: React.ReactNode
-  className?: string
-}
-
-/**
- * Empty right pane for split hubs — flat `bg-card` to match Miller / tree columns.
- */
-export function ListPageSplitDetailsPlaceholder({
-  title = "Nothing selected",
-  description,
-  className,
-}: ListPageSplitDetailsPlaceholderProps) {
-  return (
-    <div
-      className={cn(
-        "flex h-full min-h-0 flex-col items-center justify-center bg-card px-6 py-10 text-center",
-        className,
-      )}
-    >
-      <div className="mb-4 flex size-14 items-center justify-center rounded-2xl border border-dashed border-border/70 bg-card">
-        <i
-          className="fa-light fa-sidebar text-[1.65rem] leading-none text-muted-foreground/70"
-          aria-hidden="true"
-        />
-      </div>
-      <p className="text-sm font-medium text-foreground">{title}</p>
-      {description ? (
-        <div className="mt-1.5 max-w-[16rem] text-xs leading-relaxed text-muted-foreground">{description}</div>
-      ) : null}
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/data-views/list-page-split-details-placeholder"