@exxatdesignux/ui 0.3.0 → 0.4.0

package/consumer-extras/cursor-skills/exxat-token-economy/SKILL.md

@@ -0,0 +1,277 @@
+---
+name: exxat-token-economy
+description: >-
+  Cut AI token usage by ~50% on Exxat DS work — task → minimum-file-set table,
+  five-question pre-flight that catches the top rule violations before
+  generation, canonical primitive aliases (no grep needed), tiny scaffolds
+  for hub client / column def / KPI item, and a deny-list of files the
+  assistant should NOT open. Read this BEFORE opening any other DS doc.
+user-invocable: true
+---
+
+# Exxat DS — token economy (read this first)
+
+**Why this exists.** Every other DS skill / rule / pattern doc is a deep dive on
+one concern. When the user just wants to build a screen, the assistant tends to:
+
+1. Re-read `AGENTS.md` (~80 KB) on every turn.
+2. `grep` to "find the Button" when the import path is already known.
+3. Regenerate hub scaffolding it could copy from a reference page.
+4. Read 6 rule files speculatively when only 2 apply.
+5. Re-explain "we use HubTable because…" in 200 tokens.
+
+This skill is the **pre-flight** for any DS work. Read it first; load other docs
+only when this skill explicitly points to one. **Target: ≥ 50% fewer input
+tokens per design turn vs. the naive "open AGENTS.md and grep" loop.**
+
+## When to use this skill
+
+- **First** turn of any new DS feature, hub, or design change.
+- Any time the assistant is about to open `AGENTS.md` or a `*-pattern.md` doc — read this skill instead and follow §1's file-set table.
+- Whenever the user complains about cost, latency, or "you keep re-reading the same files".
+
+---
+
+## §1 — Task → minimum file set
+
+Open **only** these files. Skip everything else unless one of these files cites it.
+
+| Task | Read (minimum) | Skip (do not open) |
+|------|----------------|--------------------|
+| **Build a new hub page** (table + KPIs + view tabs) | `apps/web/components/columns-showcase.tsx` (or any reference hub), `docs/exxat-ds/handbook/HANDBOOK.md` §"How to build a hub" | `AGENTS.md`, `hub-table.tsx` source, all `*-pattern.md` |
+| **Add a column / cell pattern** | `apps/web/components/columns-showcase.tsx` (the live catalog) | `data-table/index.tsx`, the whole `types.ts` |
+| **Add a board / kanban view** | `apps/web/components/placements-board-card.tsx`, `exxat-board-cards.mdc` only | All other rules |
+| **Add a KPI strip** | `docs/exxat-ds/handbook/reference-implementations.md` § KPI flat band, `exxat-kpi-max-four.mdc`, `exxat-kpi-trends.mdc` | `key-metrics.tsx` source |
+| **Write empty-state / error / button copy** | `docs/exxat-ds/handbook/voice-and-tone.md` | All rules |
+| **Theme / token tweak** | `apps/web/app/globals.css`, `packages/ui/tokens/hooks-index.json` | All pattern docs |
+| **Status chip color/icon** | `apps/web/lib/list-status-badges.ts` | Accessibility rule (already covered by the map) |
+| **Bug fix** | `rg` for the symbol, read only the matching file | Everything else |
+| **Architectural change** (only when the user explicitly says so) | `AGENTS.md`, `HANDBOOK.md` | — |
+
+**Heuristic.** If a file is over 25 KB and you're not modifying that exact file,
+don't read it. Use this skill body + the reference page in `columns-showcase.tsx`
+instead.
+
+---
+
+## §2 — Five-question pre-flight (before you generate code)
+
+Answer **yes / no / N/A** to each. A **no** means re-plan; you'll save a regeneration cycle.
+
+1. **`HubTable`, not raw `<table>`?** — every hub-style grid in `ListPageTemplate.renderContent` uses `HubTable<TRow>` from `@/components/data-views`. Filters + Properties drawer + view-type tiles + bulk actions come free.
+2. **`view` + `onViewChange` plumbed?** — if the page has view tabs, pass both through `client → table → drawer toolbar → TablePropertiesDrawer`. Otherwise the drawer ships table-only copy on a Board tab.
+3. **Color + icon on every status chip?** — `ListHubStatusBadge` + a tint from `lib/list-status-badges.ts` + an FA icon. Color alone fails WCAG 1.4.1.
+4. **≤ 4 KPIs on the primary strip?** — `KEY_METRICS_KPI_COUNT_MAX = 4`. A fifth becomes a `MetricInsight` or a chart.
+5. **No toasts for product feedback?** — use `LocalBanner` / `SystemBanner` / inline status. Toasts are reserved for build-tool messages.
+
+If all five are **yes**, generate. If any is **no**, either narrow the requirements
+with **one** clarifying question or fix the gap silently and note it in your response.
+
+---
+
+## §3 — Canonical primitive aliases (no grep needed)
+
+When the user says "X", reach for "Y". Save the search.
+
+### Page chrome & overlays
+
+| User says | Use | Path |
+|----------|-----|------|
+| button, action, CTA | `Button` | `@/components/ui/button` |
+| input, text field, form field | `Input`, `FormField` | `@/components/ui/{input,form}` |
+| avatar | `AvatarInitials` | `@/components/ui/avatar` |
+| chip, badge, status, tag | `Badge`, `ListHubStatusBadge`, `StatusBadge` | `@/components/{ui/badge,list-hub-status-badge}` |
+| dropdown, menu, ⋯ | `DropdownMenu` family | `@/components/ui/dropdown-menu` |
+| tooltip, hint | `Tip` (or `Tooltip`) | `@/components/ui/tip` |
+| sheet, drawer | `Sheet` family, `ExportDrawer`, `TablePropertiesDrawer` | `@/components/ui/sheet` |
+| dialog, modal, confirm | `Dialog` family | `@/components/ui/dialog` |
+| table, list, grid (product data) | `HubTable` inside `ListPageTemplate` | `@/components/data-views` |
+| KPI, metric, stat | `KeyMetrics` + `MetricItem` | `@/components/key-metrics` |
+| board, kanban | `ListPageBoardCard`, `ListPageBoardTemplate` | `@/components/data-views/list-page-board-card` |
+| icon | FA `<i class="fa-light fa-{name}" aria-hidden />` | (Kit script in `app/layout.tsx`) |
+| keyboard shortcut hint | `Kbd variant="bare"` inside buttons; `tile` in tooltips | `@/components/ui/kbd` |
+| toggle, switch | `ToggleSwitch` | `@/components/ui/toggle-switch` |
+
+### Table cell renderers (ALL importable — do NOT re-implement)
+
+Every cell renderer below is exported from **`@/components/data-views`** (re-exported from `apps/web/components/data-views/table-cells.tsx`). Live catalog: `apps/web/components/columns-showcase.tsx` at route `/columns`.
+
+| User says | Use | Notes |
+|----------|-----|-------|
+| progress bar, % complete, weeks done | `ProgressCell` | `value`, `max?`, `tone?: "auto" \| "success" \| "warning" \| "danger" \| "info"`, `label?` |
+| currency, money, price, cost | `CurrencyCell` | `value`, `currency?` (default USD), `locale?`, right-aligned `tabular-nums` |
+| numeric count, attempts, downloads | `NumericCell` | `value`, `fractionDigits?`, right-aligned |
+| rating, stars, score | `RatingCell` | `value`, `max?` (5), `showValue?` — color **and** glyph (WCAG 1.4.1) |
+| signal bars, low/med/high, difficulty | `SignalBarsCell` | `level`, `max?` (3), `tone?`, `label` (required, accessible) |
+| toggle, published/draft, enabled/disabled | `BooleanToggleCell` | `checked`, `onChange(next)`, `labelOn?`, `labelOff?`; stops row click propagation |
+| attachments, files count, paperclip | `AttachmentCountCell` | `count` — muted dash on `0` |
+| external link, source, view in new tab | `ExternalLinkCell` | `url`, `label?` — host extracted; `Tip` shows full URL |
+| relative time, "3 hours ago", recency | `RelativeTimeCell` | `iso`, `now?` (override for deterministic snapshots) |
+| face rail, reviewers, assignees +N | `PeopleAvatarRailCell` | `people: PersonStub[]`, `visibleMax?` (3), `size?: "sm" \| "md"`; **non-overlapping** avatars |
+| type pill, category, kind with icon | `PillCell` | `label`, `icon?: "fa-..."` — outlined, single-line |
+| tag list +N, keywords, labels | `TagListCell` | `tags: string[]`, `visibleMax?` (2), `formatLabel?` (default `#${tag}`) |
+| row actions, ⋯, overflow menu | `RowActionsCell<TRow>` | `row`, `actions: RowActionDef<TRow>[]` (`label`, `icon`, `onSelect`, `variant?`, `shortcut?`, `disabled?`) |
+
+### Out of band — only when none of the above fits
+
+If the user asks for **anything outside this list**: first scan `columns-showcase.tsx`
++ the `reference-implementations.md` index — both name every existing primitive.
+Only propose a new shared component if neither covers it AND the user has approved
+bespoke work (`exxat-reuse-before-custom.mdc`).
+
+**Hard rule.** Do NOT inline-implement a progress bar, currency formatter, rating,
+relative-time, attachment chip, external link, face rail, type pill, tag list, or
+row-actions menu inside a `ColumnDef['cell']`. Import the named cell. If you find
+yourself writing `Intl.NumberFormat`, `<a target="_blank">`, or a `[1,2,3,4,5].map(…)` star
+loop inside a `cell:`, stop — you're re-deriving a shipped primitive.
+
+---
+
+## §4 — Tiny scaffolds (copy verbatim, don't re-derive)
+
+The boilerplate shapes you'd otherwise regenerate.
+
+### Hub client (replace `Entity`, KPIs, columns)
+
+```tsx
+"use client"
+import * as React from "react"
+import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
+import { PageHeader } from "@/components/page-header"
+import { KeyMetrics, type MetricItem } from "@/components/key-metrics"
+import { ListPageTemplate, type ViewTab, HubTable } from "@/components/data-views"
+
+const ENTITY_TABS: ViewTab[] = [{ id: "all", label: "All", viewType: "table", icon: "fa-table", filterId: "all" }]
+const ENTITY_SUPPORTED_VIEWS = ["table", "list", "board"] as const
+
+export function EntityClient({ rows }) {
+  const [tabs, setTabs] = React.useState<ViewTab[]>(ENTITY_TABS)
+  const [activeTabId, setActiveTabId] = React.useState(ENTITY_TABS[0].id)
+  return (
+    <PrimaryPageTemplate siteHeader={{ title: "Entity" }}>
+      <ListPageTemplate
+        defaultTabs={ENTITY_TABS} tabs={tabs} onTabsChange={setTabs}
+        activeTabId={activeTabId} onActiveTabChange={setActiveTabId}
+        supportedViewTypes={ENTITY_SUPPORTED_VIEWS}
+        getTabCount={() => rows.length}
+        header={<PageHeader title="Entity" subtitle="…" />}
+        metrics={<KeyMetrics variant="flat" metrics={ENTITY_KPIS} showHeader={false} metricsSingleRow />}
+        renderContent={(tab, updateTab) => (
+          <HubTable rows={rows} columns={useColumns()}
+            view={tab.viewType} onViewChange={v => updateTab({ viewType: v })}
+            supportedViewTypes={ENTITY_SUPPORTED_VIEWS}
+            hubLabel="Entity" lifecycleTabLabel="Entity"
+            getRowId={r => r.id} getRowSelectionLabel={r => r.name}
+            defaultSort={{ key: "name", dir: "asc" }}
+            renderers={{}}
+          />
+        )}
+      />
+    </PrimaryPageTemplate>
+  )
+}
+```
+
+### `MetricItem` shape (KPI strip cell)
+
+```ts
+{ id: "active", label: "Active", value: 142, delta: "+8 vs last week",
+  trend: "up", trendPolarity: "higher_is_better",
+  metricVariant: "hero", description: "currently in placement" }
+```
+
+- `trend: "neutral"` + empty `delta` → no trend chip renders. Don't fake a `+0`.
+- `trendPolarity: "lower_is_better"` for error counts, defects, overdue.
+- `metricVariant: "hero"` for **one** cell per strip — the headline number.
+- Max **4 cells**.
+
+### `ColumnDef<TRow>` shape
+
+```ts
+{ key: "name", label: "Name", width: 240, minWidth: 180,
+  defaultPin: "left", sortable: true, sortKey: "name",
+  filter: { type: "text", icon: "fa-user", operators: ["contains"] },
+  cell: row => <span className="truncate">{row.name}</span> }
+```
+
+- `key: "select"` + `defaultPin: "left"` + `lockPin: true` → checkbox column.
+- `key: "actions"` + `defaultPin: "right"` + `lockPin: true` → ⋯ overflow column.
+- `filter: { type: "select", options }` for categorical columns.
+
+### Default `cell:` should call a named primitive
+
+The right `cell:` body for the common patterns is **one import + one component**, not an inline JSX block:
+
+```ts
+import { ProgressCell, CurrencyCell, RatingCell, BooleanToggleCell,
+         RelativeTimeCell, AttachmentCountCell, ExternalLinkCell,
+         PeopleAvatarRailCell, PillCell, TagListCell, NumericCell,
+         RowActionsCell, type RowActionDef } from "@/components/data-views"
+
+// Examples — cell:'s body is one call.
+cell: row => <ProgressCell value={row.completion} />
+cell: row => <CurrencyCell value={row.cost} />
+cell: row => <RatingCell value={row.rating} />
+cell: row => <BooleanToggleCell checked={row.published} onChange={next => onTogglePublished(row, next)} />
+cell: row => <RelativeTimeCell iso={row.lastActivityAt} />
+cell: row => <AttachmentCountCell count={row.attachmentCount} />
+cell: row => <ExternalLinkCell url={row.sourceUrl} />
+cell: row => <PeopleAvatarRailCell people={row.reviewers} />
+cell: row => <PillCell label={TYPE_LABEL[row.type]} icon={TYPE_ICON[row.type]} />
+cell: row => <TagListCell tags={row.tags} />
+cell: row => <NumericCell value={row.attempts} />
+cell: row => <RowActionsCell row={row} actions={ROW_ACTIONS} />
+```
+
+If `cell:` exceeds **one line** for any pattern above, you're re-deriving — go back and import.
+
+---
+
+## §5 — Deny list (do NOT open unless asked)
+
+Treat these as expensive — skip unless the user explicitly names them or this skill points to them:
+
+- `AGENTS.md` — only when the task is "change the architecture or the rules themselves".
+- `packages/ui/src/components/data-views/hub-table.tsx` — the API is documented; don't read the implementation.
+- `apps/web/.next/`, `.turbo/`, `node_modules/` — never.
+- All 29 `.cursor/rules/exxat-*.mdc` at once — §1 already points to the 1-2 that apply.
+- Test files (`*.test.*`, `__tests__/`) — irrelevant for design.
+- Build configs (`tsup.config.ts`, `next.config.ts`, `turbo.json`) — irrelevant for design.
+- `packages/ui/tokens/hooks-index.json` (~163 KB) — only when the task is a token rename / audit.
+
+---
+
+## §6 — When to ask vs. when to assume
+
+One clarifying question costs ~50 tokens. A wrong implementation costs hundreds (read, generate, user feedback, regenerate). Ask when:
+
+1. The task name is ambiguous between two patterns (e.g. "add a panel" → drawer or split panel?).
+2. Two existing reference hubs handle the same concern differently (use the user's existing precedent if they have one).
+3. The user mentions a screen that doesn't have a clear primitive in §3.
+
+Don't ask when:
+
+- The user has cited a specific file or component — go.
+- The pre-flight (§2) all answers yes — go.
+- The task fits exactly one row in §1's task map — go.
+
+---
+
+## §7 — Output discipline (your turn budget)
+
+Your **response** also costs tokens. Keep it lean:
+
+- **No "let me explain the design system" preambles.** The user has the package installed; they know.
+- **No reading-aloud of file paths.** Cite with `code` ticks; don't re-narrate.
+- **No restating the prompt.** Jump straight to the action.
+- **Group tool calls in parallel** when independent (reading 3 files = 1 message, not 3).
+- **Stop generating** as soon as the pre-flight (§2) says you have what you need. Don't gold-plate.
+
+---
+
+## See also
+
+- **Handbook** — `docs/exxat-ds/handbook/HANDBOOK.md` (5 principles + how-to-build-a-hub)
+- **Reference implementations** — `docs/exxat-ds/handbook/reference-implementations.md` (find the file to copy)
+- **Voice & tone** — `docs/exxat-ds/handbook/voice-and-tone.md` (user-facing copy)
+- **Cell patterns catalog** — `apps/web/components/columns-showcase.tsx` (live at `/columns`)

package/consumer-extras/handbook/HANDBOOK.md

@@ -3,6 +3,8 @@
 > **Start here.** One page. Read in 10 minutes. Links out to everything else.
 >
 > **Audience:** designers, engineers, contributors, AI agents — anyone shipping UI in the Exxat product.
+>
+> **Working with an AI assistant?** Read [`.cursor/skills/exxat-token-economy/SKILL.md`](../../../.cursor/skills/exxat-token-economy/SKILL.md) **first** (or `.claude/skills/exxat-token-economy/SKILL.md` for Claude Code). It's a one-page pre-flight that cuts token usage by ~50%: a task → minimum-file-set table, the five-question rule check, and tiny scaffolds that mean the assistant never has to re-read this handbook for the common case.
 
 ---
 

package/consumer-extras/handbook/glossary.md

@@ -11,6 +11,7 @@
 | **Brand glow** | The OKLCH-mixed brand tint applied as a soft halo behind a surface (KPI flat band, secondary panel). Not a hard background — the tint **adds**, the underlying surface still reads. | `docs/kpi-flat-band-pattern.md`, `docs/shell-surface-elevation-pattern.md` |
 | **Bulk-actions slot** | The floating action bar that appears when one or more rows are selected in a `HubTable`. Wired via `bulkActionsSlot={(selected) => …}`. | `packages/ui/src/components/data-views/hub-table.tsx` |
 | **Cell pattern** | One column's rendering recipe — built by composing existing primitives (`Badge`, `AvatarInitials`, `ListHubStatusBadge`, `ToggleSwitch`, FA glyphs, `Tip`, `Tooltip`, `DropdownMenu`). The canonical catalog of patterns lives in `apps/web/components/columns-showcase.tsx`; the live demo is at `/columns`. | `docs/reference-implementations.md` |
+| **Cell primitive** | One of the named, importable `ColumnDef['cell']` renderers exported from `@/components/data-views` (re-exported from `apps/web/components/data-views/table-cells.tsx`): `ProgressCell`, `CurrencyCell`, `NumericCell`, `RatingCell`, `SignalBarsCell`, `BooleanToggleCell`, `AttachmentCountCell`, `ExternalLinkCell`, `RelativeTimeCell`, `PeopleAvatarRailCell`, `PillCell`, `TagListCell`, `RowActionsCell`. Every cell renderer in the showcase comes from this module; new hubs **must** import these instead of inlining the same JSX. | `.cursor/skills/exxat-token-economy/SKILL.md` §3, `exxat-data-tables.mdc` |
 | **Centralized list dataset** | The rule that **one** `useTableState` row bag drives **every** view (table, list, board, dashboard, panel, tree, …) on a given hub. No parallel mock arrays per view. | `exxat-centralized-list-dataset.mdc` |
 | **Coach mark** | The onboarding overlay that highlights a UI element and explains it. State managed by `useCoachMark`. Dismissals stick per flow id. | `apps/web/lib/coach-mark-registry.ts` |
 | **Collaboration variant** | The `PageHeader` flavor that exposes the face rail + Invite-people overflow item for shared hubs. | `exxat-collaboration-access.mdc` |
@@ -42,7 +43,7 @@
 | **Properties drawer** | The right-side `Sheet` opened from the table toolbar, hosting view-type tiles, column visibility, density, sort, group-by, filters, conditional rules, and pagination toggle. Mounted automatically by `HubTable`. | `exxat-table-properties-drawer.mdc` |
 | **Reference page** | A canonical full implementation of a hub or pattern in `apps/web/components/<entity>-*.tsx`. Listed in `docs/reference-implementations.md`. Copy from these before inventing. | `docs/reference-implementations.md` |
 | **Rule (binding)** | A `.cursor/rules/*.mdc` doc with MUST / MUST NOT. Binds the AI agent and the human reviewer. Wins over patterns and narratives. | `docs/HANDBOOK.md` §4 |
-| **Secondary panel** | A scoped navigation rail (e.g. "Question bank → All / Mine / Tree", "Tokens & themes → Colors / Radius / Motion / …") that sits between the main sidebar and the page. Opening one collapses the main sidebar; closing one restores the previous sidebar state. | `exxat-primary-nav-secondary-panel.mdc` |
+| **Secondary panel** | A scoped navigation rail (e.g. "Library → All / Mine / Tree", "Tokens & themes → Colors / Radius / Motion / …") that sits between the main sidebar and the page. Opening one collapses the main sidebar; closing one restores the previous sidebar state. | `exxat-primary-nav-secondary-panel.mdc` |
 | **Site header** | The top bar on a primary route (org/product switcher + breadcrumbs + actions). Owned by `PrimaryPageTemplate`. | `apps/web/components/templates/primary-page-template.tsx` |
 | **Skill** | A `.cursor/skills/<name>/SKILL.md` (mirrored in `.claude/skills/`) workflow + checklist for a recurring agent task. Use a skill when the same checklist would be repeated across many sessions. | `apps/web/AGENTS.md` |
 | **`supportedViewTypes`** | The allowlist of `DataListViewType` values a hub implements. Passed to `HubTable.supportedViewTypes` so the Properties drawer never offers a view the hub can't render. | `packages/ui/src/components/data-views/hub-table.tsx` |

package/consumer-extras/handbook/reference-implementations.md

@@ -25,20 +25,47 @@ If you find yourself diverging from the reference page, ask **why** before shipp
 | Full hub: table + board + dashboard + list + paginated + conditional rules + dashboard customize | `apps/web/components/placements-table.tsx` + `placements-client.tsx` | [`list-page-template`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/list-page-template.md), [`data-table`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/data-table.md), [`board-card`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/board-card.md), [`key-metrics`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/key-metrics.md) | [`exxat-data-tables`](../../../.cursor/rules/exxat-data-tables.mdc), [`exxat-list-page-connected-views`](../../../.cursor/rules/exxat-list-page-connected-views.mdc), [`exxat-centralized-list-dataset`](../../../.cursor/rules/exxat-centralized-list-dataset.mdc) | [`data-views-pattern`](../data-views-pattern.md) |
 | Hub with dashboard customize (canvas layout edit) | `apps/web/components/team-table.tsx` + `team-client.tsx` | [`list-page-template`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/list-page-template.md), [`key-metrics`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/key-metrics.md) | [`exxat-list-page-connected-views`](../../../.cursor/rules/exxat-list-page-connected-views.mdc) | [`data-views-pattern`](../data-views-pattern.md) |
 | Hub with finder / split-panel view | `apps/web/components/sites-table.tsx` + `sites-client.tsx` | [`list-page-template`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/list-page-template.md) | [`exxat-list-page-view-shells`](../../../.cursor/rules/exxat-list-page-view-shells.mdc) | [`data-views-pattern`](../data-views-pattern.md) |
-| Hub with secondary panel scope (folder rail) | `apps/web/components/question-bank-table.tsx` + `question-bank-client.tsx` | [`list-page-template`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/list-page-template.md) | [`exxat-primary-nav-secondary-panel`](../../../.cursor/rules/exxat-primary-nav-secondary-panel.mdc), [`exxat-question-bank-hub-header`](../../../.cursor/rules/exxat-question-bank-hub-header.mdc) | [`question-bank-hub-header-pattern`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/question-bank-hub-header-pattern.md) |
+| Hub with secondary panel scope (folder rail) | `apps/web/components/library-table.tsx` + `library-client.tsx` | [`list-page-template`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/list-page-template.md) | [`exxat-primary-nav-secondary-panel`](../../../.cursor/rules/exxat-primary-nav-secondary-panel.mdc), [`exxat-library-hub-header`](../../../.cursor/rules/exxat-library-hub-header.mdc) | [`library-hub-header-pattern`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/library-hub-header-pattern.md) |
 | Hub with secondary panel scope (token categories) — **smallest** secondary-panel reference | `apps/web/components/tokens-themes-client.tsx` + `tokens-secondary-nav.tsx` | [`list-page-template`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/list-page-template.md) | [`exxat-primary-nav-secondary-panel`](../../../.cursor/rules/exxat-primary-nav-secondary-panel.mdc) | [`shell-surface-elevation-pattern`](../shell-surface-elevation-pattern.md) |
-| Single-view showcase hub (table only) — **18 SaaS cell patterns**: select, primary identity + ID + favorite, avatar + name + email, avatar group with +N, type pill, difficulty signal, status chip, inline toggle, tag list, rating stars, progress bar, currency, plain numeric, attachment count, external link, relative time, absolute date, row actions overflow | `apps/web/components/columns-showcase.tsx` + `columns-client.tsx` | [`list-page-template`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/list-page-template.md), [`data-table`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/data-table.md) | [`exxat-data-tables`](../../../.cursor/rules/exxat-data-tables.mdc) | — |
+| Single-view showcase hub (table only) — **18 SaaS cell patterns**, each rendered by an **importable named cell** from `@/components/data-views` (see "Cell primitives" table below). Categories: select, primary identity + ID + favorite, avatar + name + email, avatar group +N, type pill, difficulty signal, status chip, inline toggle, tag list, rating stars, progress bar, currency, numeric, attachment count, external link, relative time, absolute date, row actions overflow. | `apps/web/components/columns-showcase.tsx` + `columns-client.tsx` | [`list-page-template`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/list-page-template.md), [`data-table`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/data-table.md) | [`exxat-data-tables`](../../../.cursor/rules/exxat-data-tables.mdc) | — |
 
 > **First-time hub builder:** start with `sites-table.tsx` (smallest complete hub) or `columns-showcase.tsx` (single-view, easiest).
 
 ---
 
+## Cell primitives (importable)
+
+Every cell renderer below is exported from `@/components/data-views` (re-exported from `apps/web/components/data-views/table-cells.tsx`). The live catalog page is `/columns`. **Do not re-implement these inside a `ColumnDef['cell']`** — import the name.
+
+| Cell | Renders | Import |
+|------|---------|--------|
+| `ProgressCell` | Track + filled bar with auto-tone in thirds; `value`, `max`, `tone`, `label` | `@/components/data-views` |
+| `CurrencyCell` | Right-aligned `tabular-nums`; `value`, `currency` (USD), `locale`, `maximumFractionDigits` | same |
+| `NumericCell` | Right-aligned plain count; `value`, `fractionDigits` | same |
+| `RatingCell` | N of `max` FA stars + value; color + glyph paired (WCAG 1.4.1) | same |
+| `SignalBarsCell` | Wi-Fi-style ordinal bars; `level`, `max`, `tone`, `label` (required) | same |
+| `BooleanToggleCell` | Inline `ToggleSwitch` with `checked` + `onChange(next)`; stops row click propagation | same |
+| `AttachmentCountCell` | Paperclip + count chip; muted dash on `0` | same |
+| `ExternalLinkCell` | Truncated host + new-tab icon; `url`, `label?`; `Tip` shows full URL | same |
+| `RelativeTimeCell` | "3 hours ago" with `Tip(absolute)`; `iso`, `now?` (deterministic snapshots) | same |
+| `PeopleAvatarRailCell` | Face rail with `+N` overflow; `people: PersonStub[]`, **non-overlapping** | same |
+| `PillCell` | Outlined badge + leading FA icon; `label`, `icon?` | same |
+| `TagListCell` | Soft badges with `+N` overflow; `tags`, `visibleMax?`, `formatLabel?` | same |
+| `RowActionsCell<TRow>` | `⋯` overflow dropdown; `row`, `actions: RowActionDef<TRow>[]` (label, icon, onSelect, variant, shortcut, disabled) | same |
+| `EMPTY_DASH` | Aria-hidden `—` placeholder for null/undefined cells | same |
+
+**Anti-references** (do NOT copy):
+- ❌ Inlining `Intl.NumberFormat`, `[1,2,3,4,5].map(s => …)` star loops, raw `<a target="_blank">`, `new URL(…).hostname`, or `Intl.RelativeTimeFormat` inside a `cell:`. Import the named cell.
+- ❌ Re-implementing `RowActionsCell` per hub with a custom `DropdownMenu`. The generic `RowActionsCell<TRow>` covers `Open / Edit / Duplicate / Archive`-style menus.
+
+---
+
 ## Hub chrome
 
 | Pattern | Reference page | Blueprint | Rule(s) |
 |---|---|---|---|
 | Page header — primary hub | `apps/web/components/placements-page-header.tsx` | [`page-header`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/page-header.md) | [`exxat-collaboration-access`](../../../.cursor/rules/exxat-collaboration-access.mdc), [`exxat-mono-ids`](../../../.cursor/rules/exxat-mono-ids.mdc) |
-| Page header — collaboration variant (face rail + invite) | `apps/web/components/question-bank-page-header.tsx` | [`page-header`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/page-header.md) | [`exxat-collaboration-access`](../../../.cursor/rules/exxat-collaboration-access.mdc) |
+| Page header — collaboration variant (face rail + invite) | `apps/web/components/library-page-header.tsx` | [`page-header`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/page-header.md) | [`exxat-collaboration-access`](../../../.cursor/rules/exxat-collaboration-access.mdc) |
 | Page header — entity / record (no view tabs) | `apps/web/components/page-header.tsx` (variants) | [`page-header`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/page-header.md) | — |
 | KPI flat band on a hub | `apps/web/components/placements-client.tsx` | [`key-metrics`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/key-metrics.md) | [`exxat-kpi-flat-band`](../../../.cursor/rules/exxat-kpi-flat-band.mdc), [`exxat-kpi-max-four`](../../../.cursor/rules/exxat-kpi-max-four.mdc), [`exxat-kpi-trends`](../../../.cursor/rules/exxat-kpi-trends.mdc) |
 | Properties drawer wiring | `apps/web/components/placements-table.tsx` | — | [`exxat-table-properties-drawer`](../../../.cursor/rules/exxat-table-properties-drawer.mdc) |
@@ -52,7 +79,7 @@ If you find yourself diverging from the reference page, ask **why** before shipp
 |---|---|---|---|
 | Board card (kanban) | `apps/web/components/placements-board-view.tsx`, `team-table.tsx` (`renderListRow`) | [`board-card`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/board-card.md) | [`exxat-board-cards`](../../../.cursor/rules/exxat-board-cards.mdc), [`exxat-card-vs-list-rows`](../../../.cursor/rules/exxat-card-vs-list-rows.mdc) |
 | List row (single-column) | `apps/web/components/team-table.tsx` `renderListRow` | [`board-card`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/board-card.md) (row layout) | [`exxat-card-vs-list-rows`](../../../.cursor/rules/exxat-card-vs-list-rows.mdc) |
-| Dashboard view with charts + KPI band | `apps/web/components/placements-dashboard-charts-section.tsx` | [`key-metrics`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/key-metrics.md) | [`exxat-dashboard-view-charts`](../.cursor/rules/exxat-dashboard-view-charts.mdc) |
+| Dashboard view with charts + KPI band | `apps/web/components/placements-dashboard-charts-section.tsx` | [`key-metrics`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/docs/blueprints/key-metrics.md) | [`exxat-dashboard-view-charts`](../../../.cursor/rules/exxat-dashboard-view-charts.mdc) |
 | Folder / finder split view | `apps/web/components/data-views/finder-panel-view.tsx` (used in `sites-table.tsx`) | — | [`exxat-list-page-view-shells`](../../../.cursor/rules/exxat-list-page-view-shells.mdc) |
 
 ---

package/consumer-extras/patterns/collaboration-access-pattern.md

@@ -1,8 +1,8 @@
 # Collaboration & access pattern
 
-Shared UI for **who can access a hub** (face stack in the header) and **inviting people** (floating sheet). **Reference:** Question bank — `QuestionBankPageHeader`, `QuestionBankClient`, `InviteCollaboratorsDrawer`.
+Shared UI for **who can access a hub** (face stack in the header) and **inviting people** (floating sheet). **Reference:** Library — `LibraryPageHeader`, `LibraryClient`, `InviteCollaboratorsDrawer`.
 
-**Folder-scoped question bank:** When the library URL selects a folder (`?scope=folder&folderId=`), the same header **⋯ More** menu also exposes **Customize folder** (name / color / icon) via **`QuestionBankNewFolderSheet`** mounted on **`QuestionBankClient`** so it works on every view tab. See **`docs/question-bank-hub-header-pattern.md`** and **`.cursor/rules/exxat-question-bank-hub-header.mdc`**.
+**Folder-scoped library:** When the library URL selects a folder (`?scope=folder&folderId=`), the same header **⋯ More** menu also exposes **Customize folder** (name / color / icon) via **`LibraryNewFolderSheet`** mounted on **`LibraryClient`** so it works on every view tab. See **`docs/library-hub-header-pattern.md`** and **`.cursor/rules/exxat-library-hub-header.mdc`**.
 
 ## When to use
 
@@ -33,11 +33,11 @@ Shared UI for **who can access a hub** (face stack in the header) and **inviting
 
 ```tsx
 <CollaborationAccessFlow
-  initialCollaborators={QUESTION_BANK_HEADER_COLLABORATORS}
+  initialCollaborators={LIBRARY_HEADER_COLLABORATORS}
   resourceLabel={hubHeader.title}
 >
   {({ collaborators, openInvite }) => (
-    <QuestionBankPageHeader
+    <LibraryPageHeader
       variant="collaboration"
       title={hubHeader.title}
       questionCount={count}
@@ -100,9 +100,9 @@ Row order:
 | Hub flow | `components/collaboration-access-flow.tsx` |
 | Collaborator type | `components/page-header.tsx` (`PageHeaderCollaborator`) |
 | Invite sheet | `components/invite-collaborators-drawer.tsx` |
-| Entity header | `components/question-bank-page-header.tsx` |
-| Hub wiring | `components/question-bank-client.tsx` |
-| Demo roster | `lib/mock/question-bank-header-collaborators.ts` |
+| Entity header | `components/library-page-header.tsx` |
+| Hub wiring | `components/library-client.tsx` |
+| Demo roster | `lib/mock/library-header-collaborators.ts` |
 
 ## Checklist (new hub)
 

package/consumer-extras/patterns/data-views-pattern.md

@@ -2,6 +2,8 @@
 
 > **Canonical rules for agents (MUST/MUST NOT, checklists):** [`AGENTS.md`](../AGENTS.md) in this package (including **§8 Accessibility**). This file is the long-form narrative; keep both aligned when patterns change.
 
+> **Scaling past ~2K rows:** see [`large-dataset-strategy.md`](./large-dataset-strategy.md) for pagination, server-mode upgrade path, and the virtualization follow-up.
+
 This document describes how list pages combine **views**, **toolbar** behavior, **filters**, **properties**, and **persistence** in this codebase.
 
 ## Reuse existing components (required)
@@ -10,18 +12,18 @@ This document describes how list pages combine **views**, **toolbar** behavior,
 
 | Need | Reuse | Where Placements uses it |
 | --- | --- | --- |
-| **View tabs** (table / list / board, lifecycle filters) | `ListPageTemplate` (`ViewTab`, `renderContent`, optional metrics + export) | `components/placements-client.tsx` + `components/templates/list-page.tsx` |
-| **Table shell** (search, filter bar, sort, grouping, columns, pagination) | `DataTable`, `DataTableToolbar`, `useTableState` | `components/data-table/`, `components/placements-table.tsx` |
-| **Properties drawer** (display, columns, filters, sort, view type tiles) | `TablePropertiesDrawer` from `@/components/table-properties` | `DrawerToolbar` / list–board shells in `placements-table.tsx` |
+| **View tabs** (table / list / board, lifecycle filters) | `ListPageTemplate` (`ViewTab`, `renderContent`, optional metrics + export) | `components/library-hub-client.tsx` + `components/templates/list-page.tsx` |
+| **Table shell** (search, filter bar, sort, grouping, columns, pagination) | `HubTable` → `DataTable`, `DataTableToolbar`, `useTableState` | `components/data-table/`, `components/data-views/hub-table.tsx`, `components/columns-showcase.tsx` |
+| **Properties drawer** (display, columns, filters, sort, view type tiles) | `TablePropertiesDrawer` from `@/components/table-properties` (auto-wired by `HubTable`) | `DrawerToolbar` / list–board shells in `library-table.tsx` |
 | **Board / list** | `PlacementsBoardView`, `PlacementListRowContent` (wrapped by `HubTable.renderListRow` → `DataRowList`) + same `useTableState` | `PlacementsTable` |
-| **Page header** (primary CTA + More ⋯ + export) | `PlacementsPageHeader` or `TeamPageHeader` | `components/placements-page-header.tsx`, `components/team-page-header.tsx` |
-| **Team page (primary template)** | `TeamClient` = `ListPageTemplate` + `KeyMetrics` + `TeamPageHeader` + `TeamTable` (same composition as `PlacementsClient`) | `components/team-client.tsx`, `lib/mock/team-kpi.ts` |
-| **Team roster** | `TeamTable` — `DataTable` + `useTableState` + `TablePropertiesDrawer`; list/board/dashboard read **`tableState.rows`** | `components/team-table.tsx` |
-| **Dashboard view (list tab)** | **`KeyMetrics`** (`variant="flat"` or `"card"`) — same KPI system as the template metrics strip; **do not** add ad-hoc `Card` grids for entity summaries | `TeamTable` dashboard branch, `lib/mock/team-kpi.ts` |
-| **List hub metrics strip** | **`KeyMetrics variant="flat"`** — transparent cells, OKLCH brand glow only, border hairlines (**no** grey panel) | **`docs/kpi-flat-band-pattern.md`**, Placements / Team / Question bank clients |
-| **Secondary panel chrome** | **`--secondary-panel-bg`** on **`NestedSecondaryPanelShell`** (lighter than sidebar, follows active product) | **`docs/shell-surface-elevation-pattern.md`**, Question bank |
+| **Page header** (primary CTA + More ⋯ + export) | Per-hub page header composing `PageHeader` + `ExportDrawer` button | `components/library-page-header.tsx` |
+| **Primary hub composition** | `*Client` = `ListPageTemplate` + `KeyMetrics` + `*PageHeader` + `*Table`. Reference: `LibraryHubClient`. | `components/library-hub-client.tsx`, `components/columns-client.tsx`, `components/tokens-themes-client.tsx` |
+| **Hub table body** | `HubTable` — wraps `DataTable` + `useTableState` + `TablePropertiesDrawer`; list / board / dashboard read **`tableState.rows`**. Pagination chrome is auto-mounted when the hub passes `pagination` + `onPaginationChange`. | `components/data-views/hub-table.tsx`, `components/library-table.tsx`, `components/columns-showcase.tsx` |
+| **Dashboard view (list tab)** | **`KeyMetrics`** (`variant="flat"` or `"card"`) — same KPI system as the template metrics strip; **do not** add ad-hoc `Card` grids for entity summaries. | `LibraryTable` dashboard branch, `components/library-dashboard-charts.tsx` |
+| **List hub metrics strip** | **`KeyMetrics variant="flat"`** — transparent cells, OKLCH brand glow only, border hairlines (**no** grey panel) | **`docs/kpi-flat-band-pattern.md`**, Placements / Team / Library clients |
+| **Secondary panel chrome** | **`--secondary-panel-bg`** on **`NestedSecondaryPanelShell`** (lighter than sidebar, follows active product) | **`docs/shell-surface-elevation-pattern.md`**, Library |
 | **Export** | `ExportDrawer` | `ListPageTemplate` export props; `PlacementsClient` |
-| **View body layout** (gutter + centered max-width for folder / icon / panel-style content) | **`ListPageViewFrame`** (`components/data-views/list-page-view-frame.tsx`, re-exported from `components/data-views`) | **`FolderGridView`** (uses the frame); **`QuestionBankOsFolderView`** — see **`AGENTS.md` §4.5** |
+| **View body layout** (gutter + centered max-width for folder / icon / panel-style content) | **`ListPageViewFrame`** (`components/data-views/list-page-view-frame.tsx`, re-exported from `components/data-views`) | **`FolderGridView`** (uses the frame); **`LibraryOsFolderView`** — see **`AGENTS.md` §4.5** |
 
 **Rules:** (1) Import and compose these components; pass **props** and **column defs** for your entity. (2) If something is missing, **extend the shared component** under `components/` (e.g. a new optional slot on `DataTableToolbar`) rather than copying markup into a single page. (3) Card-only or lightweight pages may use a smaller **Properties** sheet only when there is **no** table—otherwise use `TablePropertiesDrawer` with `DataTable` (see Team).
 
@@ -89,13 +91,13 @@ Non-table view branches (e.g. **folder** icon grid, **panel** finder, OS-style f
 - **Status (Team & Compliance)** — `lib/list-status-badges.ts` — single source for label strings + badge `className` tails for **table, list, and board**. Do **not** pair with `uppercase` on the Badge (labels are sentence case, aligned with Placements `BoardStatusBadge`).
 - **Owner initials** — `lib/initials-from-name.ts` when mock rows have a display name but no `initials` field.
 - **Shared column shell** — `components/data-views/list-page-board-template.tsx` — `ListPageBoardTemplate` + `ListPageBoardColumnDef<T>`: define columns with `filter` predicates, `renderCard`, `getRowKey`. Used by **Team** and **Compliance** boards; new hubs should start here before custom chrome.
-- **Placement card** — `components/data-views/placement-board-card.tsx` — `BoardPlacementCard` composes **`ListPageBoardCard`** parts with `ColumnDef<Placement>` and lifecycle layout helpers from `lib/placement-board-card-layout.ts`. Placements keeps richer column headers (search, menus); still uses the same primitives.
+- **Library board** — `components/library-board-view.tsx` — composes **`ListPageBoardCard`** parts with `BoardCardTwoLineBlock` for the body and `ListHubStatusBadge` for the status row. Use this as the reference for any new domain board card.
 - New entities should add their own card component that composes **`ListPageBoardCard`** + primitives rather than duplicating column scroll/layout or ad-hoc card chrome.
 
 ## Dashboard view (list pages)
 
-- **Reuse the dashboard chart bundle** — `components/dashboard-report-charts.tsx` — `DashboardReportCharts`: flat `KeyMetrics` + middle chart section + period comparison `KeyMetrics` card. **`ChartsOverview`** (placement-themed demo gallery) is the default middle section for `/dashboard` and **Placements**. **Team** passes **`chartsSection={<TeamDashboardChartsSection members={tableState.rows} />}`** so charts reflect roster data, not placements. List hubs use `ListPageDashboardCharts` (`metricsSingleRow`). Chart **style** can follow `ChartVariantProvider` when using `ChartsOverview`.
-- **Data tab canvas charts** (`data-view-dashboard-charts*.tsx`) share **`ChartFigure`**, **`ChartCard`**, and **`ChartDataTable`** with `charts-overview.tsx`. **Layout** for Placements / Team / Compliance is stored in one place: **`lib/data-view-dashboard-storage.ts`** (see `AGENTS.md` §4.3). **Keyboard-selected bars/slices** must use **`lib/chart-keyboard-selection.ts`** (`activeBar` / `activeShape`) so behavior matches the gallery — not opacity-only `Cell` dimming.
+- **Reuse the dashboard chart bundle** — `components/dashboard-report-charts.tsx` — `DashboardReportCharts`: flat `KeyMetrics` + middle chart section + period comparison `KeyMetrics` card. **`ChartsOverview`** is the default middle section for `/dashboard`. Hubs pass **`chartsSection={<MyDashboardChartsSection rows={tableState.rows} />}`** so charts reflect the hub's own row set. Reference: **`LibraryDashboardChartsSection`** in `components/library-dashboard-charts.tsx`. Chart **style** can follow `ChartVariantProvider` when using `ChartsOverview`.
+- **Data tab canvas charts** share **`ChartFigure`**, **`ChartCard`**, and **`ChartDataTable`** with `charts-overview.tsx`. **Layout** is stored in one place: **`lib/data-view-dashboard-storage.ts`** under a per-hub scope (see `AGENTS.md` §4.3). **Keyboard-selected bars/slices** must use **`lib/chart-keyboard-selection.ts`** (`activeBar` / `activeShape`) so behavior matches the gallery — not opacity-only `Cell` dimming.
 
 ## Persistence
 
@@ -130,13 +132,13 @@ Below the threshold, these may be omitted unless the page is a primary data hub
 
 ## Data pages: primary CTA + More + Export
 
-If the page **has exportable data** (rows, members, placements, etc.), follow the **Placements** header pattern:
+If the page **has exportable data** (rows, members, library items, etc.), follow the **Library** header pattern:
 
-1. **Primary action** — One default (filled) button for the main task (e.g. **New placement**, **Invite member**). Do **not** use `variant="outline"` for that primary action.
+1. **Primary action** — One default (filled) button for the main task (e.g. **New question**, **Invite collaborator**, **Add token**). Do **not** use `variant="outline"` for that primary action.
 2. **More (⋯)** — An outline **icon** button opening a menu that includes **Export** (and other overflow actions). Wire **Export** to `ExportDrawer` (or equivalent).
 3. **Subtitle** — Prefer a short line with **count + freshness** (e.g. `24 records · Last updated now`), matching `PlacementsPageHeader`.
 
-Reference: `components/placements-page-header.tsx`, `components/team-page-header.tsx`, `components/team-client.tsx`.
+Reference: `components/library-page-header.tsx`, `components/library-hub-client.tsx`.
 
 ---
 

package/consumer-extras/patterns/kpi-flat-band-pattern.md

@@ -24,7 +24,7 @@ List hubs and the main dashboard mix view use **`KeyMetrics variant="flat"`** as
 
 ## MUST NOT
 
-- Add **`--key-metrics-flat-band-linear`** back into `flatBandStyle` or hub inline styles (e.g. question-bank hub hero).
+- Add **`--key-metrics-flat-band-linear`** back into `flatBandStyle` or hub inline styles (e.g. library hub hero).
 - Use **`variant="card"`** on **`ListPageTemplate`** metrics when the design calls for a **flat strip** on the page background.
 - Duplicate KPI numbers in ad-hoc **`Card`** grids on the same hub.
 - Set **`variant="mutedSuffix"`** on product wordmarks to grey out the **suffix** in dark mode — suffix stays **Exxat pink** (`wordmarkColor`); see **`lib/product-brand.ts`**.
@@ -42,7 +42,7 @@ Dark mode (`.dark`): same rules — transparent cells, radial glow only, no line
 
 ## Reference implementations
 
-- `components/question-bank-client.tsx` — `KeyMetrics variant="flat" metricsSingleRow`
+- `components/library-client.tsx` — `KeyMetrics variant="flat" metricsSingleRow`
 - `components/dashboard-tabs.tsx` — mix view flat band + insight
 - `components/placements-client.tsx`, `team-client.tsx`, `compliance-client.tsx` — list hub metrics slot
 

package/dist/components/data-table/index.js

@@ -2579,8 +2579,8 @@ function DataTableInner({
           setHeaderScrollLeft(e.currentTarget.scrollLeft);
         },
         className: cn(
-          "mx-4 lg:mx-6 overflow-x-auto border border-border",
-          hasFooter ? "rounded-t-lg" : "rounded-lg"
+          "mx-4 lg:mx-6 overflow-x-auto border-t border-x border-border",
+          hasFooter ? "rounded-t-lg" : "border-b rounded-lg"
         ),
         children: /* @__PURE__ */ jsxs(
           "table",