@exxatdesignux/ui 0.5.10 → 0.5.12

package/template/docs/data-views-pattern.md

@@ -1,185 +0,0 @@
-# Data views pattern (table, list, board)
-
-> **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.
-
-## Add view parity (seven views)
-
-**Binding:** `.cursor/rules/exxat-hub-supported-views.mdc`. **Detail:** `docs/hub-supported-views-pattern.md`.
-
-Every list hub **should** use **`FULL_HUB_SUPPORTED_VIEWS`** (table, list, board, dashboard, folder, panel, tree-panel) on both **`ListPageTemplate`** and **`HubTable`**, with a working renderer per view. **Library** (`library-table.tsx`) is the reference. Do not ship table-only or four-view allowlists on showcase/catalog hubs unless product documents an exception.
-
-## Reuse existing components (required)
-
-**Prefer composing what already exists** over rebuilding one-off tabs, search, filters, or property panels. The **Placements** flow is the reference implementation; new list/table/board pages should wire the same building blocks with new data and column definitions.
-
-| Need | Reuse | Where Placements uses it |
-| --- | --- | --- |
-| **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) | 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); **`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).
-
-### Table pages must use view tabs
-
-If the page uses a **`DataTable`** (or equivalent data grid) as the main surface, it **must** sit under **`ListPageTemplate`** so users get the **views toolbar** (tabs, add view, per-tab settings). The default `ViewTab` entries should include at least one tab whose `viewType` is **`table`** when the primary experience is tabular data. **Do not** render a `DataTable` alone under only `PageHeader` + body.
-
-- **Reference:** `PlacementsClient` (Placements) and `TeamClient` (Team).
-- **Rationale:** Consistent navigation, saved views, per-tab view type (table / list / board), and export at the template level.
-
-## View layout frame (centered, reusable)
-
-Non-table view branches (e.g. **folder** icon grid, **panel** finder, OS-style folder explorer) **should** use **`ListPageViewFrame`** for the same horizontal gutter and optional **`max-w-*`** centering as other hubs — **not** hand-copied `mx-4 lg:mx-6` + `mx-auto max-w-6xl` in each `*-table.tsx`. New view types belong in **`components/data-views/`** as **generic** components with render props; hub tables only wire **`tableState.rows`** and callbacks.
-
-**Handbook:** **`AGENTS.md` §4.5**. **Cursor:** **`.cursor/rules/exxat-list-page-view-shells.mdc`**. **Skill:** **`.cursor/skills/exxat-list-page-view-shells/SKILL.md`**. **Do not** wrap **`DataTable`** in the frame if that stacks padding with the table toolbar (**`AGENTS.md` §5**).
-
-## Architecture
-
-- **Page shell** — `ListPageTemplate` owns the views toolbar (tabs), optional metrics, and export drawer. Content for the active tab is rendered via `renderContent`.
-- **Per–lifecycle (or category) data** — `PlacementsTable` swaps **columns** and **row sets** based on `lifecycleTabId` (e.g. All / Upcoming / Ongoing / Completed). Each lifecycle tab gets its **own** `PlacementsTable` instance (`key={tab.filterId}`) so `useTableState` resets correctly when columns change.
-- **Shared table state** — `useTableState` holds sort, search, filters, grouping, column order/visibility/pins/widths, row height, gridlines, and pagination flags. **Table**, **list**, **board**, and **dashboard** all read the same state so switching view type keeps behavior aligned.
-
-## Mock data and connected views
-
-1. **Put entity rows in `lib/mock/<entity>.ts`** — Export a typed array (e.g. `TeamMember[]`, `Placement[]`) and reuse it from the page client and from KPI helpers.
-2. **KPI / summary helpers** — Add `lib/mock/<entity>-kpi.ts` (or next to the mock file) with pure functions **`entityKpiMetrics(rows: T[])`** and **`entityKpiInsight(rows: T[])`** returning `MetricItem[]` and `MetricInsight` from `@/components/key-metrics`. Set **`MetricItem.trendPolarity`** when an increase is **not** favorable (see **`docs/kpi-trend-pattern.md`**). Drive **both** the template **`metrics`** slot and the **dashboard view** from the **same helpers**, passing **`tableState.rows`** in the table component so filters/search apply everywhere.
-3. **Single table component** — One component (e.g. `TeamTable`) receives **`members`** (full mock) + **`view`**. It calls **`useTableState(members, columns, …)`** once. Branch on `view`:
-   - **`table`** → `DataTable` with that state.
-   - **`list` / `board`** → `DataTableToolbar` + list/board UI with **`tableState.rows`**.
-   - **`dashboard`** → `DataTableToolbar` + **`KeyMetrics`** (and/or other **existing** dashboard building blocks — `ChartsOverview` only when charts are product-appropriate) fed by **`teamKpiMetrics(tableState.rows)`** / **`teamKpiInsight(tableState.rows)`** — **not** bespoke `Card` grids duplicating KPIs.
-4. **Client wiring** — `renderContent` always renders the table component with **`view={tab.viewType}`** and **`key={tab.id}`** (not `viewType`) so switching views does not remount state. **Do not** show “not wired” placeholders for list/board/dashboard when the table stack supports those views.
-5. **Full-route dashboards** — The **`/dashboard`** page uses **`DashboardTabs`**, **`KeyMetrics`**, and **`ChartsOverview`** with `lib/mock/dashboard.ts`. List-page **dashboard view** is a **narrower** slice: reuse **`KeyMetrics`** (+ entity KPI helpers) first; add charts only when they match the entity and reuse **`ChartsOverview`** patterns from `components/charts-overview.tsx`.
-
-## Table vs list vs board vs dashboard
-
-| Concern | Table | List | Board | Dashboard (view tab) |
-| --- | --- | --- | --- | --- |
-| Primary surface | `DataTable` | `DataRowList` + entity row body (e.g. `PlacementListRowContent`) wired via `HubTable.renderListRow` | `PlacementsBoardView` / entity board | **`KeyMetrics`** (+ optional charts via shared dashboard components) |
-| Data source | `useTableState` | **`tableState.rows`** | **`tableState.rows`** | **`tableState.rows`** via KPI helpers |
-| Column headers / labels | `showColumnLabels` | Same source columns, list layout | Phase columns + optional board column menu | N/A (metrics from same columns/filters) |
-| Row click / navigation | From `PlacementsTable` | From list shell | Card `onOpen` | N/A |
-| Pagination | Optional `PaginationBar` + `CountSyncer` | Same pattern | N/A (board uses phase columns) | N/A |
-
-## Toolbar and properties
-
-- **Search** — Global quick search lives in table state (`search` / `showToolbarSearch` from display options). Board phase columns can add local search in the board column header.
-- **Filters** — Built from `ColumnDef.filter` and `filterFields` passed to `TablePropertiesDrawer`. Connectors between filters (`and` / `or`) are part of table state.
-- **Sort / group** — Sort rules and `groupBy` are in table state; board menu proxies the same actions when `boardColumnMenu` is wired.
-- **Properties drawer** — `TablePropertiesDrawer` is **generic**: supply `filterFields`, `fieldDefinitionsForDrawer`, `resolveColumnLabel`, `activeFilters`, sort/column handlers, `displayOptions`, and optional view-type tiles. Domain-specific defaults (e.g. `FILTER_FIELDS` in `types.ts`) are optional; new pages can pass their own definitions.
-
-**Import:** `@/components/table-properties` re-exports the drawer and types.
-
-## Dropdown menus (view settings, row actions)
-
-**`DropdownMenuContent`** in **`@exxatdesignux/ui`** merges a **default surface** (**`DROPDOWN_MENU_CONTENT_SURFACE_CLASS`**: **`min-w-52 w-max max-w-[min(24rem,calc(100vw-2rem))]`**) so **ListPageTemplate** view settings / Add view, **`DataTable`** filter and column menus, and hub **row ⋯** menus size to their labels (including shortcut hints) without fixed **`w-40` / `w-48`** rails. Sizing is **pure CSS** — do **not** add **`ResizeObserver`** or per-open measurement for standard menus.
-
-**Override** when product intent needs a fixed width (e.g. pagination **page size** **`w-20`**, **`NavUser`** trigger-width + **`min-w-60`**, school switcher **`!w-max min-w-72 …`**).
-
-## Board UI reuse
-
-**Handbook:** **`AGENTS.md` §4.4** — board card shell, badge row, shared status maps, and MUST/MUST NOT. **Cursor:** **`.cursor/rules/exxat-board-cards.mdc`**, skill **`.cursor/skills/exxat-board-cards/SKILL.md`**.
-
-- **Card shell** — `components/data-views/list-page-board-card.tsx` — **`ListPageBoardCard`**, **`ListPageBoardCardHeader`**, **`ListPageBoardCardTitleRow`**, **`ListPageBoardCardAvatar`**, **`ListPageBoardCardBadgeRow`**, **`ListPageBoardCardBody`**, **`ListPageBoardCardSecondary`**. All product board cards on list hubs **should** use this shell (same **`Card` `size="sm"`** pattern as Placements).
-- **Primitives** — `components/data-views/board-card-primitives.tsx` — `BoardCardIconRow`, `BoardCardTwoLineBlock` (optional `line2`), `BoardNewCardPlaceholder`, `lineClampClass`.
-- **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.
-- **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`** 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
-
-- **Page-level** (`lib/data-list-persistence.ts`, key `exxat-ds:data-list:page:v1`): `displayOptions`, `showMetrics`, `tabs`, `activeTabId`. Loaded in `PlacementsClient` with `useLayoutEffect`, saved debounced on change. `ListPageTemplate` runs in **controlled** mode when `tabs` / `onTabsChange` / `activeTabId` / `onActiveTabChange` are passed.
-- **Per–lifecycle tab** (key `exxat-ds:data-list:lifecycle:v1:<filterId>`): sort, search, filters, group by, column order/hidden/widths/pins/wrap, column menu search map, row height, gridlines, filter bar visibility, search popover, conditional rules, pagination toggle and page/size. Hydrated in `PlacementsTable` with `useLayoutEffect`; saved debounced when those fields change.
-
-To add a new page: copy the `PlacementsClient` pattern (controlled `ListPageTemplate` + storage key namespace) or call `schedulePageSave` / `scheduleLifecycleSave` with your own keys.
-
-## Rules of thumb
-
-1. **One `useTableState` per logical table** — Remount with `key` when the column set or entity context changes.
-2. **Don’t fork filter/sort UX** — Reuse `TablePropertiesDrawer` and `DataTableToolbar` patterns so accessibility and behavior stay consistent.
-3. **Boards derive from the same columns** — `boardColumns` / `hiddenColKeys` should reflect table `displayCols` so “hide column” and “properties” stay in sync.
-4. **Persist stable JSON** — Version objects with `v: 1` and keep keys namespaced to allow migrations later.
-
----
-
-## Required UX for dense lists (10+ items)
-
-When a page shows a **list**, **table**, or **card grid** with **more than 10 items**, it must expose:
-
-| Capability | Table / list / board | Card-only pages (no `DataTable`) |
-| --- | --- | --- |
-| **Search** | Toolbar search + column quick-search where applicable | At least one search control filtering the visible set |
-| **Filter** | Filter bar + `TablePropertiesDrawer` filters | Filters in toolbar or in Properties, as appropriate to the content |
-| **Sorting** | Column sort / sort rules in drawer | User-visible sort (e.g. name, date, role) |
-| **Properties** | `TablePropertiesDrawer` (columns, display, filters, sort) | A **Properties** entry point (sheet or drawer) for view options — same *role* as table properties, even if the UI is simpler |
-
-Below the threshold, these may be omitted unless the page is a primary data hub (see below).
-
----
-
-## Data pages: primary CTA + More + Export
-
-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 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/library-page-header.tsx`, `components/library-hub-client.tsx`.
-
----
-
-## Page vs drawer (actions and auxiliary views)
-
-**When to use a drawer or sheet:** The user needs **the surrounding page** (list, hub, or parent task) to stay **visible for context** *and* they need a **quick view**, **quick actions**, or a **short auxiliary step** — e.g. table properties, export, a brief row summary, or “change one setting and dismiss.”
-
-**When to use a new page (route):** The flow is **primary**, **long-form**, **multi-step**, or should have its **own URL** / bookmark / history **without** the parent page behind it — e.g. full create/edit, wizards, or detail that *is* the task.
-
-**Rule of thumb:** **Context + quick** → **drawer**; **blocking short choice** → **dialog**; **otherwise** → **new page**.
-
-**Modal vs side panel (same route):** When the overlay stays on the same URL, prefer **`docs/drawer-vs-dialog-pattern.md`** and **`.cursor/rules/exxat-drawer-vs-dialog.mdc`** — drawers keep the hub visible; dialogs trap focus for confirms.
-
-Canonical rules: **`AGENTS.md` §6.4**, root **`.cursor/rules/exxat-page-vs-drawer.mdc`**, **`.cursor/rules/exxat-drawer-vs-dialog.mdc`**.
-
----
-
-## Primary pages with large datasets
-
-When a route is a **primary** destination in nav (main hub for an entity) **and** the dataset is **large** or **highly interactive**:
-
-- Use the **primary page template**: `ListPageTemplate` (tabs, metrics strip, export drawer at template level) + data client pattern as in **`PlacementsClient`** / **`PlacementsTable`** — not a minimal `PageHeader`-only layout.
-- Smaller satellite pages may use **`PageHeader` + section content**; once the dataset grows past the dense-list threshold, add the toolbar rules above and consider promoting to the full template if the page becomes a main hub.
-
----
-
-## Summary checklist
-
-- [ ] **Reuse** — Tabs, search, filters, and property UI come from **`ListPageTemplate`**, **`DataTable` / `useTableState`**, **`TablePropertiesDrawer`**, and related Placements modules—not ad-hoc duplicates.
-- [ ] **Table + tabs** — Any **`DataTable`** is wrapped in **`ListPageTemplate`** (view tabs), not only `PageHeader` + body.
-- [ ] **>10 items** → search, filter, sort, properties (per surface type above).
-- [ ] **Has data to export** → **More** menu with **Export** + shared `ExportDrawer` pattern.
-- [ ] **Primary + large / main hub** → `ListPageTemplate`-style shell where applicable.
-- [ ] **Page vs drawer vs dialog (§6.4)** — Quick with parent **context** → drawer/sheet; **blocking** confirm → **dialog**; primary or long flows → **new route** (`docs/drawer-vs-dialog-pattern.md`).
-- [ ] **Primary button** → `Button` default variant (`size="lg"` for parity with Placements), not outline.
-- [ ] **Dashboard view tab** → `KeyMetrics` + shared KPI helpers from **`tableState.rows`**; no duplicate one-off metric cards.
-- [ ] **Data view charts** → `ChartFigure` + `chart-keyboard-selection`; layout persistence via **`data-view-dashboard-storage`** (see `AGENTS.md` §4.3).
-- [ ] **Mock + KPIs** → Entity rows in **`lib/mock/`**; **`entityKpiMetrics` / `entityKpiInsight`** consumed by template metrics and dashboard view.

package/template/docs/drawer-vs-dialog-pattern.md

@@ -1,50 +0,0 @@
-# Sheet panel vs dialog vs route
-
-> **Related:** `docs/data-views-pattern.md` (Page vs drawer), **`AGENTS.md` §6.4**, **`.cursor/rules/exxat-page-vs-drawer.mdc`**. **This doc** splits **floating `Sheet` panels** vs **modal dialog** when both stay on the same route.
-
-## Sheet (side panel — product “drawers”)
-
-**Use when:**
-
-- The **list or hub behind the panel** still matters (user compares, copies, or dismisses and continues browsing).
-- The flow is **medium length** — export options, table/column properties, invite collaborators, filters that mirror the grid.
-- **Width** helps — tables of options, multi-field forms that would feel cramped in a narrow dialog.
-
-**Implementation:** **`Sheet`** from `@exxatdesignux/ui/components/sheet` with the floating inset pattern (`showOverlay={false}`, `getFloatingSheetInsetProps`) — see `ExportDrawer`, `TablePropertiesDrawer`, `InviteCollaboratorsDrawer`, `LibraryNewFolderSheet`.
-
-**Avoid when:** The task is the **only** thing the user should focus on and the parent would distract (prefer **dialog** for a sharp confirm, or **route** for a full wizard).
-
-## Dialog (modal)
-
-**Use when:**
-
-- You need a **hard stop** — user must answer or dismiss before interacting with the page again (confirm delete, acknowledge legal, pick a single blocking choice).
-- The content is **short and focused** — one decision, one form step, or a compact message with primary/secondary actions.
-- **Destructive or irreversible** actions — pair with clear copy; **Esc** / Cancel returns safely.
-
-**Examples:** `AlertDialog`, confirm-before-remove, “Save changes?” when navigating away.
-
-**Avoid when:** Users need to **reference** the grid or copy values from the page while the panel is open — use a **sheet panel** or **inline** pattern instead.
-
-## Route (new page)
-
-Use when the work is **primary**, **long**, **multi-step**, or deserves its **own URL** — see **`exxat-page-vs-drawer.mdc`** and **`AGENTS.md` §6.4**.
-
-## Quick matrix
-
-| Need | Sheet panel | Dialog | Route |
-| --- | --- | --- | --- |
-| Keep hub visible | Yes | No (blocks) | No |
-| Short confirm / alert | Rare | Yes | Overkill |
-| Long form / wizard | Cramped | No | Yes |
-| Properties tied to a table | Yes | Too small | Optional |
-
-## Accessibility
-
-- **Dialog / sheet:** Must expose a **title** (`DialogTitle`, `SheetTitle`) — use `sr-only` if visually hidden.
-- **Focus trap** is expected in dialogs; sheet panels should still **restore focus** on close to the invoking control.
-
-## See also
-
-- **`.cursor/rules/exxat-drawer-vs-dialog.mdc`**, **`.cursor/skills/exxat-drawer-vs-dialog/SKILL.md`**
-- **`exxat-no-toast.mdc`** — use dialog/banner/inline, not toasts, for outcomes that need acknowledgment.

package/template/docs/glossary.md

@@ -1,59 +0,0 @@
-# Exxat DS — Glossary
-
-> Shared vocabulary. When a rule or pattern uses a term in **bold**, it's defined here. Add a term when you find yourself explaining the same word twice in PR review.
-
-| Term | Definition | See also |
-|---|---|---|
-| **Active view** | The currently selected view tab on a hub (table, list, board, dashboard, …). Drives which `HubTableRenderers` entry mounts and what the **Properties drawer** shows in its view-type tile grid. | `exxat-table-properties-drawer.mdc` |
-| **Bare Kbd** | The `<Kbd variant="bare">` rendering — no background, no border, inherits `currentColor` at 70 %. Used inline **inside** a button so the chord doesn't look pasted on. The default `tile` variant is reserved for tooltips and menu shortcut slots. | `exxat-kbd-shortcuts.mdc` |
-| **Blueprint** | Framework-agnostic spec for one UI pattern. Says *what* the pattern is and *what* it must do without committing to React. See `docs/blueprints/`. | `docs/blueprints/README.md` |
-| **Board card** | The kanban-style card surface on a board view. Composed of `ListPageBoardCard` (shell), `ListPageBoardCardTitleRow`, optional `ListPageBoardCardAvatar`, optional badge row with `ListHubStatusBadge` (`surface="board"`), and a body using `BoardCardTwoLineBlock` / `BoardCardIconRow`. | `exxat-board-cards.mdc` |
-| **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` |
-| **Column def (`ColumnDef`)** | The typed column shape consumed by `DataTable` / `HubTable`. Adding `filter:` to a column auto-generates a filter chip and toolbar dropdown entry. | `packages/ui/src/components/data-table/types.ts` |
-| **Conditional rule** | A `ColumnDef`-level rule that applies a background tint to a cell when its value matches an operator + value (e.g. "score < 60 → red"). Authored in the **Properties drawer**. | `packages/ui/src/components/table-properties/` |
-| **Content rail** | The centered, max-width column the `PrimaryPageTemplate` reserves for primary content. Width comes from the template, not the page; don't override per-page. | `apps/web/components/templates/primary-page-template.tsx` |
-| **DataTable** | The low-level table primitive in `packages/ui`. Mount this **only** outside a hub (drawer-body mini-grids, modal sub-tables). Inside `ListPageTemplate`, use `HubTable`. | `exxat-data-tables.mdc` |
-| **`delta`** | The KPI **count** of change (e.g. `"+5"`, `-3`, `"+12 %"`) on a `MetricItem`. Pass `""` or `0` to suppress the trend chip. Never prose. | `exxat-kpi-trends.mdc` |
-| **`description`** | The KPI **caption** beneath the value and trend row on a `MetricItem`. Use this for prose like `"left + right"` or `"vs last week"`. Never a delta count. | `exxat-kpi-trends.mdc` |
-| **Display options** | Per-table preferences (toolbar search visibility, density, gridlines, pagination toggle, …) that flow through `DataListDisplayOptions`. `HubTable` owns the state by default; the hub client can take it over with `displayOptions` + `onDisplayOptionsChange`. | `packages/ui/src/components/table-properties/` |
-| **Empty state** | The text + icon + (optional) action shown when a view body has zero rows after filters. Distinct from "no data ever" (use `EmptyTableState`) vs "no matches" (filter-aware copy). | `docs/voice-and-tone.md` |
-| **Face rail** | The small overlapping-faces row on a `PageHeader` (collaboration variant) showing collaborators. Click to open the invite drawer. | `exxat-collaboration-access.mdc` |
-| **Filter chip** | The dismissible chip rendered above a `HubTable` body for each active filter. Auto-generated from `ColumnDef.filter`. | `exxat-data-tables.mdc` |
-| **Flat band (KPI)** | `KeyMetrics variant="flat"` — transparent cell, brand glow only, hairline cell borders. The shape used on every primary hub metrics strip. | `exxat-kpi-flat-band.mdc` |
-| **Hairline** | A 1 px border at exactly `--border` color used to separate KPI cells, table cells, surface divisions. Never thicker for hierarchy — use spacing or color instead. | `docs/kpi-flat-band-pattern.md` |
-| **HubTable** | The canonical hub view body. Wraps `useTableState`, the toolbar (search + filter chips + filter dropdown + sort), `TablePropertiesDrawerButton`, view-type tiles, bulk-actions, and conditional rules. Always use this inside `ListPageTemplate.renderContent`. | `exxat-data-tables.mdc` |
-| **Hub primitive** | Synonym for `HubTable` — the single primitive that produces a "hub-shaped" view body. | same |
-| **Inspector** | A side-anchored drawer that shows a single record's details without leaving the hub. Resolved against the same `tableState.rows` as the grid. | `exxat-centralized-list-dataset.mdc` |
-| **`KeyMetrics`** | The KPI strip / band component. Accepts `MetricItem[]` (≤ 4) and a single `MetricInsight`. Use `variant="flat"` on hubs; `variant="card"` for embedded analytics cards. | `exxat-kpi-flat-band.mdc`, `exxat-kpi-max-four.mdc` |
-| **KPI strip** | The horizontal KPI row at the top of a hub. ≤ 4 tiles. | `exxat-kpi-max-four.mdc` |
-| **Lifecycle tab label** | The string shown under "Properties" in the drawer header (e.g. "Library", "Tokens & themes", "Columns"). Set on `HubTable.lifecycleTabLabel`. | `packages/ui/src/components/table-properties/drawer-button.tsx` |
-| **List hub status badge** | The shared status chip + icon used everywhere status appears (table rows, board cards, list rows). Colors and icons live in `lib/list-status-badges.ts`. `surface="table"` for grid; `surface="board"` for cards. | `exxat-board-cards.mdc` |
-| **List page template** | The hub frame component. Owns the page header slot, metrics strip slot, view-tabs row, and the `renderContent(tab, updateTab)` body callback. | `packages/ui/src/components/templates/list-page.tsx` |
-| **Mono ID** | A system-generated identifier shown in `font-mono tabular-nums` so digits align and the ID is visibly distinct from prose. Mono **only** the ID token in a mixed line. | `exxat-mono-ids.mdc` |
-| **OKLCH** | The perceptually uniform color space used by the brand-tint mix and the glow tokens. Surfaces stack: page → secondary panel → sidebar. | `docs/shell-surface-elevation-pattern.md` |
-| **Pattern** | Long-form narrative that explains a UI behavior in prose: when to use it, how it composes, anti-patterns, references. Lives in `docs/*-pattern.md`. Complements (but doesn't replace) a blueprint or rule. | `docs/HANDBOOK.md` |
-| **`PrimaryPageTemplate`** | The page chrome: breadcrumbs, site header, content rail with the project's standard max-width. Wrap every primary route in this. | `apps/web/components/templates/primary-page-template.tsx` |
-| **Progressive disclosure** | The principle that complexity is exposed only when the user opts into it. KPIs default visible, filters default folded into the toolbar, conditional rules live in the Properties drawer, etc. | `docs/HANDBOOK.md` §1 |
-| **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/*.tsx` (e.g. `columns-showcase.tsx`, `tokens-themes-client.tsx`, `library-table.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. "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. Default **`FULL_HUB_SUPPORTED_VIEWS`** (seven views, same Add view as Library). Must match on **`ListPageTemplate`** + **`HubTable`**; every entry needs a renderer. | `packages/ui/src/lib/data-list-view-registry.ts`, `docs/hub-supported-views-pattern.md` |
-| **`FULL_HUB_SUPPORTED_VIEWS`** | table · list · board · dashboard · folder · panel · tree-panel — canonical list-hub allowlist. | `data-list-view-registry.ts` |
-| **Trend polarity** | `MetricItem.trendPolarity` says whether "up" is good (`higher_is_better`, default), bad (`lower_is_better`), or value-neutral (`informational`). The arrow's tint follows the polarity, not the sign. | `exxat-kpi-trends.mdc` |
-| **`useTableState`** | The state hook that owns rows, filters, search, sort, pagination, group-by, and column visibility. Always one instance per hub. | `exxat-centralized-list-dataset.mdc` |
-| **View tab** | A tab on `ListPageTemplate` representing one view of the same dataset (table, list, board, dashboard, folder, panel, tree, …). Each tab carries a `viewType` and the `renderContent` callback receives it. | `exxat-list-page-connected-views.mdc` |
-| **View type (`DataListViewType`)** | The enum of view shapes the design system supports — `"table" \| "list" \| "board" \| "dashboard" \| "folder" \| "panel" \| "tree"`. Each tab declares one. | `apps/web/lib/data-list-view.ts` |
-| **Voice & tone** | The microcopy rules for the product: empty states, errors, banners, buttons, validation. See `docs/voice-and-tone.md`. | `docs/voice-and-tone.md` |
-
----
-
-*Missing a term? Add it. Glossary entries are short — link to the rule or pattern for depth, don't restate it here.*

package/template/docs/hub-supported-views-pattern.md

@@ -1,53 +0,0 @@
-# Hub supported views pattern (Add view parity)
-
-> **Agents:** `.cursor/rules/exxat-hub-supported-views.mdc` (binding). **Reference hub:** Library / All questions (`library-table.tsx`, `library-client.tsx`).
-
-## Problem this solves
-
-`ListPageTemplate` filters **Add view** and Properties view tiles from `supportedViewTypes`. If Column types passes four views but Library passes seven, users see inconsistent menus. If a hub allows Board but has no `board-with-toolbar` renderer, users see **“does not implement Board view”**.
-
-## Canonical allowlist
-
-Import from the registry (single source of truth):
-
-```ts
-import { FULL_HUB_SUPPORTED_VIEWS } from "@/lib/data-list-view-registry"
-// or
-import { LIBRARY_SUPPORTED_VIEWS } from "@/lib/library-supported-views" // alias of FULL
-```
-
-Seven views: **table**, **list**, **board**, **dashboard**, **folder**, **panel**, **tree-panel**.
-
-`HubTable` and `ListPageTemplate` use this list when `supportedViewTypes` is omitted.
-
-`PRIMARY_HUB_SUPPORTED_VIEWS` (four views) remains for hubs that intentionally omit folder/panel/tree — document that in `lib/<entity>-supported-views.ts`.
-
-## Wiring checklist
-
-1. **`ListPageTemplate`** — `supportedViewTypes={FULL_HUB_SUPPORTED_VIEWS}` (or entity alias).
-2. **`HubTable`** — same allowlist (or omit on both).
-3. **List** — `renderListRow` returning **`ListPageBoardCard`** `layout="row"` (copy from `library-table.tsx`).
-4. **Board** — `renderBoardCard` + `boardGroups` and/or `renderers["board-with-toolbar"]`.
-5. **Dashboard** — `renderers["dashboard-with-toolbar"]` with **`KeyMetrics`** on filtered rows.
-6. **Folder / panel / tree** — explicit `renderers` entries (Library reference) or **`LibraryTable`** for `LibraryItem` rows.
-
-## Special cases in this app
-
-| Hub | Pattern |
-|-----|---------|
-| **Library / All questions** | `LibraryTable` + `LIBRARY_SUPPORTED_VIEWS` — reference |
-| **Column types** | `LibraryTable` with `columnDefs` + `hubLabels` + `DEFAULT_LIBRARY_FOLDERS` — custom table, shared other views |
-| **Tokens & themes** | `FULL_HUB_SUPPORTED_VIEWS` + `tokens-hub-auxiliary-views.tsx` |
-| **New entity hub** | Start from `library-table.tsx` or token/columns references; never table-only unless approved |
-
-## Anti-patterns
-
-- `supportedViewTypes={["table"]}` on a `ListPageTemplate` hub.
-- `COLUMNS_SUPPORTED_VIEWS = PRIMARY_HUB_SUPPORTED_VIEWS` without board/folder/panel/tree renderers.
-- Minimal `renderListRow` with only stem + `questionId` (not product list UI).
-
-## See also
-
-- `packages/ui/src/lib/data-list-view-registry.ts`
-- `apps/web/docs/data-views-pattern.md`
-- `apps/web/lib/hub-connected-view-renderers.ts` — `defineHubViewRenderers` dev warnings

package/template/docs/jobs/README.md

@@ -1,59 +0,0 @@
-# Exxat DS — Jobs library
-
-> **What:** Canonical reference per **job-to-be-done**, not per component.
-> **Why:** Components answer "how to render". Jobs answer "what to build".
-> **Who:** Humans + AI agents writing design briefs
-> ([`exxat-ux-discovery-protocol.mdc`](../../../.cursor/rules/exxat-ux-discovery-protocol.mdc)).
-
-A **job** is what the user is trying to accomplish — not the screen they end
-up on. Two products with the same component stack can ship different jobs;
-two products with different stacks can ship the same job. **The job is the
-contract.**
-
-## When to use this library
-
-- The user prompt names a screen ("student detail", "settings page", "compose
-  form"). Map it to a **job** first, then pick the reference.
-- Before building, the design brief MUST cite the relevant job doc as a
-  reference.
-- If no job doc matches, **write one** (even short) as part of the work.
-
-## Job → screen mapping
-
-| Job | Doc | Canonical references |
-|-----|-----|----------------------|
-| **Review a record's full state** | [`record-detail.md`](./record-detail.md) | Students / Placements / Library detail |
-| **Triage a list of records** (find at-risk / actionable) | *future* | `PlacementsClient`, `ComplianceClient` |
-| **Compose / create a new record** | *future* | `new-library-item-form.tsx` |
-| **Configure preferences or workspace settings** | *future* | `app/(app)/settings/page.tsx` |
-| **Scan many metrics for anomalies** | *future* | Dashboard route, `DashboardTabs` |
-| **Search / find anything** | *future* | `CommandMenu`, `DedicatedSearch*` |
-| **Onboarding / first-run setup** | *future* | `getting-started.tsx`, `CoachMark` |
-| **Approve / review submitted work** | *future* | (TBD) |
-
-## How a job doc is structured
-
-Every job doc must include:
-
-1. **The job** — one paragraph; user pain, decision, action.
-2. **When this job applies** — triggers, scale, frequency.
-3. **Pattern: route vs sheet vs inline** — with a decision table.
-4. **Information architecture** — ASCII diagram of the IA.
-5. **Layers, in priority order** — identity → status → groups → activity →
-   related.
-6. **When to use tabs / subsections.**
-7. **Navigation — the way back** (P1 enforcement).
-8. **Actions** — primary, overflow, inline.
-9. **States** — loading, empty, error, stale.
-10. **Accessibility** — A11y concerns specific to the job.
-11. **Modern SaaS analogues** — cite by product + Mx codes.
-12. **Anti-patterns** — what NOT to do.
-13. **Quick checklist** for the post-build audit.
-
-## See also
-
-- [`../modern-saas-patterns.md`](../modern-saas-patterns.md) — the canon
-- [`../component-selection-guide.md`](../component-selection-guide.md) —
-  decision tree from job → composition
-- [`../blueprints/`](../blueprints/) — framework-agnostic specs
-- [`../../../.cursor/skills/exxat-senior-ux/SKILL.md`](../../../.cursor/skills/exxat-senior-ux/SKILL.md)

package/template/docs/jobs/record-detail.md

@@ -1,177 +0,0 @@
-# Job: Review a record's full state
-
-> **Surface type:** Standalone route OR side-panel sheet.
-> **Examples in product:** Student profile, Placement record, Library item,
-> Site profile, Team member profile.
-
-## 1. The job
-
-The user lands on a single record and needs to **understand its current
-state** in order to **decide what to do next**. Decisions can include:
-contact someone, edit a field, change status, place / unplace, archive,
-follow up later, or simply confirm correctness before another action.
-
-This job is **not**: edit (separate flow), bulk action (lives on the list),
-configure workspace settings.
-
-## 2. When this job applies
-
-- The record has > ~5 displayable fields.
-- The user reaches it from a list, search, deep link, or notification.
-- The user's next action depends on the record's state (status, ownership,
-  data freshness).
-- The record may have children (placements, attachments, comments) that
-  matter to the decision.
-
-## 3. Pattern: route vs sheet vs inline
-
-| Pattern | When | DS comp |
-|---------|------|---------|
-| **Standalone route** (`/students/[id]`) | Deep link from email / notifications / reports; user may keep tab open; record has > 10 fields | `PrimaryPageTemplate` + `PageHeader` |
-| **Sheet over hub** | User is triaging from a list and may open many records in sequence | `Sheet` over `ListPageTemplate` |
-| **Inline expansion** (`HoverCard`) | Read-only quick preview; < 5 fields | `HoverCard` on row hover |
-
-Pick **route** by default. Pick **sheet** if the user's primary path is
-triaging from a list and they typically open many in a single session.
-
-## 4. Information architecture
-
-```
-┌─ SiteHeader (breadcrumb only) ──────────────────────────────────┐
-│  Dashboard › Students › Jordan Lee                              │  ← ancestors + title (P1, P2)
-└──────────────────────────────────────────────────────────────────┘
-┌─ Identity row ──────────────────────────────────────────────────┐
-│  [Avatar] Jordan Lee                              [Edit] [⋯]    │  ← name, ID, primary action + overflow
-│          STU-2026-1042 · jordan.lee@example.edu                 │
-└──────────────────────────────────────────────────────────────────┘
-┌─ Status row (above the fold, P13) ──────────────────────────────┐
-│  ● Active   ✓ Compliant   ⊕ Placed at Sinai                     │
-└──────────────────────────────────────────────────────────────────┘
-┌─ Field groups (2-col card grid) ────────────────────────────────┐
-│  Program     │  Academic                                         │
-│  Placement   │  Compliance                                       │
-└──────────────────────────────────────────────────────────────────┘
-┌─ Activity timeline (M7, optional) ──────────────────────────────┐
-│  Today · Compliance status updated by Maria                      │
-│  Tue · Placement assigned · Sinai Hospital                       │
-└──────────────────────────────────────────────────────────────────┘
-```
-
-### Layers, in priority order
-
-1. **Identity** — name, system ID (mono), avatar, primary contact link.
-2. **Status** — every status badge that drives a decision; visible without
-   scrolling (P13).
-3. **Field groups** — 2-column card grid by default. Group by **conceptual
-   coherence** (Program / Academic / Placement / Compliance), not by table
-   structure.
-4. **Activity timeline** — if the record changes over time and the history
-   matters (M7).
-5. **Related lists** — placements, comments, attachments — if they exist for
-   this entity.
-
-### When to use section tabs
-
-- **Don't tab** if total field count is ≤ ~20 and groups are ≤ 4. Single
-  scroll is faster.
-- **Do tab** if the record has rich children (placements history,
-  supervisors, contracts, conversation threads) and the user typically
-  deep-dives into one section.
-- Tabs use `Tabs` + `TabsList` `w-fit` `variant="line"` — never full-width
-  (`exxat-tabs-chrome.mdc`).
-
-## 5. Navigation — the way back
-
-**Exactly one path back** (P1).
-
-| Reached from | Way back |
-|--------------|----------|
-| List route | `SiteHeader` breadcrumb (`Students`) |
-| Deep link / email | `SiteHeader` breadcrumb to the canonical parent |
-| Sheet from hub | `Sheet` close (X / Esc) |
-| Notification | Breadcrumb to canonical parent (not "Back to notification") |
-
-**Never** add a body-level "Back to <parent>" button when the breadcrumb is
-present (`exxat-breadcrumbs-no-back.mdc`).
-
-## 6. Actions
-
-| Slot | Component | What goes here |
-|------|-----------|----------------|
-| Primary | `PageHeader.primaryAction` (`Button variant="default" size="lg"`) | The single most common next action — "Edit", "Place", "Approve" |
-| Overflow | `Button variant="outline" size="icon-lg"` → `DropdownMenu` | Export, Archive, Duplicate, Share, dangerous-but-rare actions |
-| Inline | Icon-only buttons with tooltip | Copy email, dial phone, open site |
-| Status flip | `Sheet` or inline `Select` | Status changes that are audited (multi-step) |
-
-Exactly **one** filled CTA per surface (P3).
-
-## 7. States
-
-| State | What to show |
-|-------|--------------|
-| **Loading** | `Skeleton` matching the IA shape (identity → status → cards) — M9 |
-| **Empty / not found** | `EmptyState` + "Return to <list>" outline button |
-| **Error** | `LocalBanner` inside the body; identity row still renders if available |
-| **Stale data** | Subtle "Updated <relative>" in identity meta |
-
-## 8. Accessibility
-
-- One `<h1>` (P2) — typically `PageHeader.title`.
-- Status row is a `role="list"`; each badge is `role="listitem"` (already in
-  `ListHubStatusBadge`).
-- Inline mailto / tel links are real `<a>`s, not buttons.
-- Tab order: breadcrumb → identity → primary action → overflow → status →
-  fields → activity → related.
-- Icon-only actions carry `aria-label` + a tooltip with the same text.
-
-## 9. Modern SaaS analogues
-
-| Product | What to study |
-|---------|---------------|
-| **Linear** issue detail | Identity + status + properties + activity; sheet variant for triage |
-| **Stripe Dashboard** customer / charge | Identity + status badges + grouped data + audit log |
-| **Notion** page-as-database row | Inline editing (M5), property panel |
-| **Plain / Pylon** ticket | Conversation-as-document for support records |
-
-Cite these in the design brief by name + Mx codes:
-`Linear issue detail (M1, M4, M7)`.
-
-## 10. Anti-patterns
-
-| Anti-pattern | Use instead |
-|--------------|-------------|
-| `<h1>` + `PageHeader title` + breadcrumb leaf all repeating the name | One carrier: `PageHeader title` + ancestors-only breadcrumb (P2) |
-| "Back to <parent>" button alongside the breadcrumb | Breadcrumb only (P1) |
-| Two filled CTAs in the header ("Save" + "Submit") | One filled, others outline (P3) |
-| Status only in detail (hidden on list / breadcrumb count) | Status visible everywhere the record appears (M4) |
-| Status communicated by color only | Color + icon + label (`ListHubStatusBadge`) |
-| Full-width section tab bar | `Tabs` `w-fit` (`exxat-tabs-chrome.mdc`) |
-| Centered modal for "Edit name" | Inline edit (M5) or `Sheet` (M3) |
-| Spinner overlay for initial load | `Skeleton` matched to IA (M9) |
-| Activity timeline buried in a tab nobody opens | Show inline below cards, or remove it |
-| New shared "ProfileHero" component invented per entity | Compose: `PageHeader` + identity-row primitives (P8) |
-| `toast()` on save | Inline button label change + `LocalBanner` if persistent |
-
-## 11. Quick checklist (post-build audit)
-
-- [ ] Breadcrumb shows ancestors + title; no duplicate name.
-- [ ] No body "Back to <parent>" button.
-- [ ] One H1.
-- [ ] Status row visible without scrolling.
-- [ ] One filled primary action; overflow has the rest.
-- [ ] 2-col card grid for fields (or tabs if ≥ 4 sections / 20+ fields).
-- [ ] `Skeleton` matches the IA on load; empty state designed for "not found".
-- [ ] Tab order: breadcrumb → identity → primary → overflow → fields.
-- [ ] All status chips use `ListHubStatusBadge` + `lib/list-status-badges.ts`.
-- [ ] No `toast()`, no Vaul, no pixel-copy of legacy.
-
-## 12. Reference
-
-- [`../../../.cursor/skills/exxat-senior-ux/SKILL.md`](../../../.cursor/skills/exxat-senior-ux/SKILL.md)
-- [`../../../.cursor/rules/exxat-ux-discovery-protocol.mdc`](../../../.cursor/rules/exxat-ux-discovery-protocol.mdc)
-- [`../../../.cursor/rules/exxat-ux-principles.mdc`](../../../.cursor/rules/exxat-ux-principles.mdc)
-- [`../../../.cursor/rules/exxat-breadcrumbs-no-back.mdc`](../../../.cursor/rules/exxat-breadcrumbs-no-back.mdc)
-- [`../../../.cursor/rules/exxat-tabs-chrome.mdc`](../../../.cursor/rules/exxat-tabs-chrome.mdc)
-- [`../modern-saas-patterns.md`](../modern-saas-patterns.md)
-- [`../blueprints/page-header.md`](../blueprints/page-header.md)
-- [`../component-selection-guide.md`](../component-selection-guide.md) §1