@exxatdesignux/ui 0.2.18 → 0.3.0

package/src/lib/table-properties-types.ts

@@ -0,0 +1,98 @@
+/**
+ * Shared types + design-system constants for the Table Properties drawer
+ * and related data-table primitives (filter chips, sort cards,
+ * conditional formatting rules).
+ *
+ * Product-specific seed data (`FILTER_FIELDS` and `COLUMNS` arrays
+ * tailored to the Placements hub) intentionally stays in
+ * `apps/web/components/table-properties/types.ts` — those values are
+ * **product data**, not design-system primitives, and the package must
+ * not know about Placement specializations, supervisor labels, etc.
+ *
+ * Consumers compose their own `FilterFieldDef[]` / `ColDef[]` arrays
+ * tailored to their entity (Team members, Compliance items, Question
+ * bank rows, …) and pass them into the drawer through props.
+ */
+
+/** Comparison operator vocabulary used by every filter row + conditional rule. */
+export type FilterOperator = "is" | "is_not" | "contains" | "not_contains"
+
+/**
+ * Input mask for `type: "text"` filters. Maps to a
+ * [Shadcn Studio input-mask](https://shadcnstudio.com/docs/components/input-mask)
+ * pattern key. Add new keys here (and in your concrete `exxatMaskPatterns`
+ * map) when a new column needs a structured text format.
+ */
+export type FilterTextMask = "phone" | "zip" | "dateMDY"
+
+export interface FilterFieldDef {
+  key: string
+  label: string
+  icon: string
+  type: "select" | "text" | "date"
+  operators: FilterOperator[]
+  /** Select options, or for `date` fields used by conditional rules (exact row strings). */
+  options?: { value: string; label: string }[]
+  /** When `type` is `text`, optional `use-mask-input` pattern for the value field. */
+  textMask?: FilterTextMask
+}
+
+export interface ActiveFilter {
+  id: string
+  fieldKey: string
+  operator: FilterOperator
+  values: string[]
+}
+
+export interface SortRule {
+  id: string
+  fieldKey: string
+  direction: "asc" | "desc"
+}
+
+/** Operator → human-readable label map (centralized so chips, drawer, and CSV exports stay aligned). */
+export const OPERATOR_LABELS: Record<FilterOperator, string> = {
+  is: "is",
+  is_not: "is not",
+  contains: "contains",
+  not_contains: "does not contain",
+}
+
+/** Column descriptor for `TableProperties` views (Columns / Sort / Group panels). */
+export interface ColDef {
+  key: string
+  label: string
+  sortable: boolean
+  sortKey?: string
+  minWidth: number
+}
+
+/* ─── Conditional formatting ──────────────────────────────────────────── */
+
+export interface ConditionalRule {
+  id: string
+  /** Column key to evaluate */
+  fieldKey: string
+  operator: FilterOperator
+  /** Selected option values (select) or text (single entry) when operator needs values */
+  values: string[]
+  /** Resolved CSS background color string */
+  bgColor: string
+}
+
+/**
+ * Predefined palette for conditional rule backgrounds.
+ *
+ * Backgrounds are exposed as CSS custom properties so theming swaps the
+ * palette per brand without code edits (`--conditional-rule-green`,
+ * `--conditional-rule-yellow`, etc., declared in
+ * `packages/ui/src/globals.css`).
+ */
+export const RULE_COLORS: { name: string; bg: string }[] = [
+  { name: "Green",  bg: "var(--conditional-rule-green)"  },
+  { name: "Yellow", bg: "var(--conditional-rule-yellow)" },
+  { name: "Blue",   bg: "var(--conditional-rule-blue)"   },
+  { name: "Red",    bg: "var(--conditional-rule-red)"    },
+  { name: "Purple", bg: "var(--conditional-rule-purple)" },
+  { name: "Orange", bg: "var(--conditional-rule-orange)" },
+]

package/template/.cursor/rules/exxat-command-menu.mdc

@@ -19,5 +19,5 @@ alwaysApply: true
 
 ## See also
 
-- **`exxat-ds/AGENTS.md` §7.1**
+- **`apps/web/AGENTS.md` §7.1**
 - **`.cursor/rules/exxat-kbd-shortcuts.mdc`** (⌘K vs ⌘⌥K)

package/template/.cursor/rules/exxat-dashboard-view-charts.mdc

@@ -5,14 +5,14 @@ alwaysApply: true
 
 # Exxat DS — Data view dashboard (list hubs)
 
-**Authoritative detail:** **`exxat-ds/AGENTS.md` §4.3** and **`exxat-dashboard-view-charts`** (this rule).
+**Authoritative detail:** **`apps/web/AGENTS.md` §4.3** and **`exxat-dashboard-view-charts`** (this rule).
 
 ## Two dashboard surfaces (do not fork chart engines)
 
 | Surface | Entry | Shared building blocks |
 |--------|--------|-------------------------|
 | **Full-page dashboard** | `app/(app)/dashboard/page.tsx` | `DashboardTabs`, `ChartsOverview` / gallery demos in `charts-overview.tsx` |
-| **Data tab** on Placements / Team / Compliance | `DataListTable`, `TeamTable`, `ComplianceTable` → `*DashboardChartsSection` | `ChartFigure`, `ChartCard`, `useChartVariant()`, `data-view-dashboard-charts*.tsx` |
+| **Data tab** on Placements / Team / Compliance | `PlacementsTable`, `TeamTable`, `ComplianceTable` → `*DashboardChartsSection` | `ChartFigure`, `ChartCard`, `useChartVariant()`, `data-view-dashboard-charts*.tsx` |
 
 **MUST NOT** duplicate “another” chart system for Data view — extend **`charts-overview`** patterns and **`lib/chart-keyboard-selection`**.
 
@@ -49,5 +49,5 @@ alwaysApply: true
 
 - `components/data-view-dashboard-charts.tsx` (Placements)
 - `components/data-view-dashboard-charts-team.tsx`, `data-view-dashboard-charts-compliance.tsx`
-- `components/data-list-table.tsx` — `DataListDashboardShell`
+- `components/placements-table.tsx` — dashboard tab body wires `PlacementsDashboardChartsSection` + layout-edit toolbar inline (no separate `DashboardShell` component)
 - `lib/chart-keyboard-selection.ts`, `lib/data-view-dashboard-storage.ts`, `lib/dashboard-customize-coach-mark.ts`

package/template/.cursor/rules/exxat-data-tables.mdc

@@ -16,7 +16,7 @@ For **any app screen that shows a browsable, filterable grid of records** (lists
 5. **Active view:** On **`ListPageTemplate`** pages with **table / list / board / dashboard** tabs, **`TablePropertiesDrawer`** **MUST** receive **`currentView`** and **`onViewChange`** (see **`./AGENTS.md` §4.2** and **`.cursor/rules/exxat-table-properties-drawer.mdc`**) so Properties matches the selected view (not table-only copy on Board).
 6. **Dropdown menus:** **`DropdownMenuContent`** uses the shared **`@exxatdesignux/ui`** default (**intrinsic `w-max`**, **`min-w-52`**, capped **`max-w`**) for view settings, row ⋯, column menus, and filter pickers — **pure CSS**, no **`ResizeObserver`**. Override only for deliberate narrow/wide rails (e.g. pagination **`w-20`**, account trigger-width, school switcher **`!w-max min-w-72 …`**). See **`docs/data-views-pattern.md`** (“Dropdown menus”).
 
-**Reference implementation:** `components/data-list-table.tsx` (placements) shows how `DataTable`, filters, and `TablePropertiesDrawer` compose together.
+**Reference implementation:** `components/placements-table.tsx` (placements) shows how `DataTable`, filters, and `TablePropertiesDrawer` compose together.
 
 ## Do not
 

package/template/.cursor/rules/exxat-ds-agents.mdc

@@ -10,9 +10,9 @@ alwaysApply: true
 ## Non‑negotiables (if anything conflicts, open AGENTS.md §12–§13)
 
 1. **Product data lists** → `DataTable` + search + shared filters + `TablePropertiesDrawer` — not raw `<table>` / ui `Table` alone / ad-hoc grids. With **`ListPageTemplate`** view tabs, pass **`currentView`** + **`onViewChange`** into **`TablePropertiesDrawer`** (**`AGENTS.md` §4.2**, **`.cursor/rules/exxat-table-properties-drawer.mdc`**).
-2. **Main `DataTable` surface** → wrapped in **`ListPageTemplate`** (view tabs). All tab view types share **`useTableState`**; list/board/dashboard read **`tableState.rows`**. Reference: `DataListClient`, `TeamClient`, `TeamTable`.
+2. **Main `DataTable` surface** → wrapped in **`ListPageTemplate`** (view tabs). All tab view types share **`useTableState`**; list/board/dashboard read **`tableState.rows`**. Reference: `PlacementsClient`, `TeamClient`, `TeamTable`.
 3. **Do not double-indent** the toolbar/table — avoid extra `px`/`mx` wrappers around `DataTable` when it already applies horizontal inset.
-4. **Primary hub + large/complex data** → same composition as Placements/Team: `ListPageTemplate` + metrics/export pattern as in `DataListClient` / `TeamClient`, not `PageHeader`-only.
+4. **Primary hub + large/complex data** → same composition as Placements/Team: `ListPageTemplate` + metrics/export pattern as in `PlacementsClient` / `TeamClient`, not `PageHeader`-only.
 5. **Exportable pages** → filled primary CTA; **⋯** menu with Export → `ExportDrawer` pattern (see `PlacementsPageHeader`).
 6. **Keyboard hints** → `.cursor/rules/exxat-kbd-shortcuts.mdc`; pair hints with behavior.
 7. **Accessibility** → `.cursor/rules/exxat-accessibility.mdc` + **`AGENTS.md` §8** + `.cursor/skills/exxat-accessibility/SKILL.md` when present in your workspace.

package/template/.cursor/rules/exxat-kbd-shortcuts.mdc

@@ -96,5 +96,5 @@ Adjust this table when adding new global shortcuts.
 
 ## See also
 
-- **`exxat-ds/AGENTS.md`** §7 — keyboard rules in project context.
-- **`exxat-ds/AGENTS.md`** §7.1 — global command palette (⌘K) vs **Ask Leo** (**⌘⌥K**); **`exxat-ds/docs/command-menu-pattern.md`**.
+- **`apps/web/AGENTS.md`** §7 — keyboard rules in project context.
+- **`apps/web/AGENTS.md`** §7.1 — global command palette (⌘K) vs **Ask Leo** (**⌘⌥K**); **`apps/web/docs/command-menu-pattern.md`**.

package/template/.cursor/rules/exxat-table-properties-drawer.mdc

@@ -28,7 +28,7 @@ When **`ListPageTemplate`** drives **`tab.viewType`** and the page renders **`Ta
 
 3. Thread **`view`** and **`onViewChange`** through: **client → table component → drawer toolbar → `TablePropertiesDrawer`**.
 
-**Reference implementations:** `components/data-list-table.tsx` (`DataListTable`), `components/team-client.tsx` + `team-table.tsx`, `components/compliance-client.tsx` + `compliance-table.tsx`.
+**Reference implementations:** `components/placements-table.tsx` (`PlacementsTable`), `components/team-client.tsx` + `team-table.tsx`, `components/compliance-client.tsx` + `compliance-table.tsx`.
 
 ## MUST NOT
 

package/template/AGENTS.md

@@ -2,7 +2,7 @@
 
 **Purpose:** One place for product patterns so tools (Cursor, Codex, etc.) and contributors apply the same rules. **Imperative sections** use MUST / MUST NOT / SHOULD so they are easy to parse.
 
-**Scope:** The Next.js app in this directory. **Path:** If your workspace root is only this folder, use **`./AGENTS.md`**. If the workspace is the parent repo, use **`exxat-ds/AGENTS.md`**.
+**Scope:** The Next.js app in this directory. **Path:** If your workspace root is only this folder, use **`./AGENTS.md`**. If the workspace is the parent monorepo, use **`apps/web/AGENTS.md`** (this file).
 
 Cross-cutting Cursor rules also live in the repo root `.cursor/rules/` (data tables, keyboard hints, accessibility) when the parent repo is open.
 
@@ -14,7 +14,7 @@ Cross-cutting Cursor rules also live in the repo root `.cursor/rules/` (data tab
 2. **Before** changing **keyboard hints or shortcuts**, read **§7** and root `.cursor/rules/exxat-kbd-shortcuts.mdc`.
 3. **Before** changing **table behavior**, read **§3** and root `.cursor/rules/exxat-data-tables.mdc`. **Before** wiring **`TablePropertiesDrawer`** on **`ListPageTemplate`** (view tabs), read **§4.2** and **`.cursor/rules/exxat-table-properties-drawer.mdc`**.
 4. **Before** building or changing **tabs, nav, dialogs, icon-only controls, or color/contrast**, read **§8** and **`.cursor/skills/exxat-accessibility/SKILL.md`** (from monorepo root when the parent repo is open).
-5. **Before** adding or changing **Data view charts** (dashboard tab on list hubs) or **graph keyboard styling**, read **§4.3** and **`exxat-ds/.cursor/rules/exxat-dashboard-view-charts.mdc`**.
+5. **Before** adding or changing **Data view charts** (dashboard tab on list hubs) or **graph keyboard styling**, read **§4.3** and **`apps/web/.cursor/rules/exxat-dashboard-view-charts.mdc`**.
 6. **Before** adding or changing **board (kanban) cards** on list hubs, read **§4.4** and the **`exxat-board-cards`** skill (**`.cursor/skills/`** or **`.claude/skills/`** at repo root — same content).
 7. **Before** adding **folder, panel, or other non-table view bodies** (centered grids, reusable shells), read **§4.5** and **`.cursor/rules/exxat-list-page-view-shells.mdc`** / **`.cursor/skills/exxat-list-page-view-shells/SKILL.md`**.
 8. **Before** adding or changing **Font Awesome** icons in app UI, read **`.cursor/rules/exxat-fontawesome-icons.mdc`** (Kit subsetting, weights, **`aria-hidden`** on **`<i>`**).
@@ -36,6 +36,8 @@ Cross-cutting Cursor rules also live in the repo root `.cursor/rules/` (data tab
 21. **Before** styling **`KeyMetrics variant="flat"`** (list hub metrics strip, dashboard mix KPI band), read **`docs/kpi-flat-band-pattern.md`** and **`.cursor/rules/exxat-kpi-flat-band.mdc`** / **`.cursor/skills/exxat-kpi-flat-band/SKILL.md`** (transparent band, OKLCH glow, border hairlines only).
 22. **Before** changing **secondary panel** or **sidebar** brand chrome, read **`docs/shell-surface-elevation-pattern.md`** and **§4.6** ( **`--secondary-panel-bg`**, active product theme).
 23. **Before** adding **new shared UI primitives** or bespoke widgets when nothing in **`components/`** fits after scanning, follow **`.cursor/rules/exxat-reuse-before-custom.mdc`** — **ask the user** for direction unless the task already approved a greenfield build.
+24. **Before** introducing a **color, spacing, radius, or shadow value** in JSX `className`, inline `style`, CSS, or a `cn()` / `clsx()` argument, read **`docs/token-taxonomy.md`** and **`.cursor/rules/exxat-token-discipline.mdc`**. **New code SHOULD reach for the L0 Exxat namespace first** (`var(--exxat-color-surface-1)`, `bg-surface-1`, `bg-brand-1`, `rounded-2`, …) — the older shadcn-style names (`--background`, `bg-brand`, `rounded-md`, …) remain as L1 aliases and continue to work. No hex literals in app code; check `packages/ui/tokens/hooks-index.json` for available tokens + deprecations (163 tokens · 36 namespaces). ESLint catches violations via `exxat-ds/no-hex-color` + `exxat-ds/no-deprecated-tokens` (plugin: **`@exxatdesignux/eslint-plugin`**).
+25. **Before** adopting any pattern from a **sibling Salesforce / SLDS / LWC** repo (e.g. `design-system-2-starter-kit`), read **`.cursor/rules/exxat-no-slds-leakage.mdc`**. **No** `slds-*` classes, **no** `<lightning-*>` markup, **no** synthetic-shadow assumptions, **no** SLDS token names (`--slds-g-color-*`). Document architectural ideas as Exxat blueprints (`docs/blueprints/`) instead of copying SLDS code.
 
 **Longer narrative and architecture:** `docs/data-views-pattern.md`, `docs/drawer-vs-dialog-pattern.md`, `docs/card-vs-rows-pattern.md`, `docs/kpi-strip-max-four-pattern.md`, **`docs/kpi-flat-band-pattern.md`**, **`docs/shell-surface-elevation-pattern.md`**, `docs/command-menu-pattern.md`, `docs/collaboration-access-pattern.md` (keep in sync with this handbook for big refactors).
 
@@ -45,7 +47,7 @@ Cross-cutting Cursor rules also live in the repo root `.cursor/rules/` (data tab
 
 1. **User / task instructions** in the current session (highest).
 2. This **`AGENTS.md`** for Exxat DS product patterns.
-3. **`.cursor/rules/*.mdc`** at repo root (`exxat-data-tables`, `exxat-list-page-connected-views`, `exxat-centralized-list-dataset`, `exxat-list-page-view-shells`, `exxat-table-properties-drawer`, `exxat-board-cards`, `exxat-page-vs-drawer`, `exxat-drawer-vs-dialog`, `exxat-card-vs-list-rows`, `exxat-kpi-max-four`, `exxat-reuse-before-custom`, `exxat-no-toast`, `exxat-kbd-shortcuts`, `exxat-accessibility`, `exxat-fontawesome-icons`, **`exxat-mono-ids`**, `exxat-primary-nav-secondary-panel`, `exxat-collaboration-access`, `exxat-ds-agents`) and any rules under **`exxat-ds/.cursor/rules/`** (including **`exxat-dashboard-view-charts`** for Data view charts).
+3. **`.cursor/rules/*.mdc`** at repo root (`exxat-data-tables`, `exxat-list-page-connected-views`, `exxat-centralized-list-dataset`, `exxat-list-page-view-shells`, `exxat-table-properties-drawer`, `exxat-board-cards`, `exxat-page-vs-drawer`, `exxat-drawer-vs-dialog`, `exxat-card-vs-list-rows`, `exxat-kpi-max-four`, `exxat-reuse-before-custom`, `exxat-no-toast`, `exxat-kbd-shortcuts`, `exxat-accessibility`, `exxat-fontawesome-icons`, **`exxat-mono-ids`**, `exxat-primary-nav-secondary-panel`, `exxat-collaboration-access`, `exxat-ds-agents`) and any rules under **`apps/web/.cursor/rules/`** (including **`exxat-dashboard-view-charts`** for Data view charts).
 4. Project **skills** under `.cursor/skills/` when relevant — e.g. **shadcn**, **exxat-accessibility** (WCAG / ARIA / touch / contrast), **exxat-board-cards** (kanban card shell, status badges, primitives), **exxat-list-page-view-shells** (centered view bodies, **`ListPageViewFrame`**), **exxat-centralized-list-dataset** (one **`useTableState`** row bag + shared maps across all list-hub views and **`TablePropertiesDrawer`**), **exxat-collaboration-access** (face rail + invite sheet + library access), **exxat-dedicated-search-surfaces** (landing vs results split, **`DedicatedSearch*`** templates + recents without hydration drift), **exxat-drawer-vs-dialog**, **exxat-card-vs-list-rows**, **exxat-kpi-max-four**, **`exxat-mono-ids`** (monospace system identifiers).
 
 If two documents conflict, prefer the **more specific** rule for the file type, then **newer** team decisions captured in `AGENTS.md`.
@@ -63,7 +65,7 @@ If two documents conflict, prefer the **more specific** rule for the file type,
 | Filters | Use the **shared filter model** (`FilterFieldDef`, operators, chips) consistent with existing list pages. |
 | Table properties | Expose **Table properties** via **`TablePropertiesDrawer`** (`@/components/table-properties`) — columns, density, related options — same pattern as Placements / data list. |
 
-**Reference:** `components/data-list-table.tsx`, `components/data-table/`.
+**Reference:** `components/placements-table.tsx`, `components/data-table/`.
 
 **MUST NOT:** Build product list pages with only `@/components/ui/table`, raw `<table>`, or a third-party grid that bypasses this stack.
 
@@ -75,7 +77,7 @@ If two documents conflict, prefer the **more specific** rule for the file type,
 
 **MUST:** If the main surface is a **`DataTable`** (or equivalent data grid), wrap it in **`ListPageTemplate`** so the **views toolbar** exists (tabs, add view, per-tab settings). Do **not** place `DataTable` only under `PageHeader` without the tab shell.
 
-**Reference implementations:** `components/data-list-client.tsx` (Placements), `components/team-client.tsx` (Team).
+**Reference implementations:** `components/placements-client.tsx` (Placements), `components/team-client.tsx` (Team).
 
 **Rationale:** Consistent navigation, saved views, per-tab view type (table / list / board / dashboard), export at template level.
 
@@ -104,7 +106,38 @@ If two documents conflict, prefer the **more specific** rule for the file type,
 
 Thread **`view`** and **`onViewChange`** from the **client** → **table / toolbar wrapper** → **`TablePropertiesDrawer`**. If **`currentView`** is omitted, the drawer defaults to **table** labels and controls even on **Board**, which is incorrect.
 
-**Reference:** `components/data-list-table.tsx`, `components/team-table.tsx`, `components/compliance-table.tsx`. Root **`.cursor/rules/exxat-table-properties-drawer.mdc`**.
+**Reference:** `components/placements-table.tsx`, `components/team-table.tsx`, `components/compliance-table.tsx`. Root **`.cursor/rules/exxat-table-properties-drawer.mdc`**.
+
+#### Deep-linking the drawer to a specific panel
+
+`TablePropertiesDrawer` accepts an optional **`initialPanel`** prop so callsites can open the drawer focused on a named panel — `"main"` (default), `"table-display"`, `"filter"`, `"sort"`, `"group"`, `"columns"`, or `"conditional-rules"`. The current built-in use is the **Add Conditional Rule** item in every column header menu, which deep-links to the **Conditional rules** panel.
+
+**MUST**:
+
+1. `useTableState` exposes **`sheetInitialPanel`** + **`setSheetInitialPanel`** alongside `sheetOpen` / `setSheetOpen`. Pass **`initialPanel={sheetInitialPanel}`** to `TablePropertiesDrawer` from the toolbar / button wrapper. Reference: `packages/ui/src/components/table-properties/drawer-button.tsx`.
+2. The toolbar **Properties** button MUST clear the deep-link before opening so a plain "open Properties" click always lands on the main index panel:
+
+   ```tsx
+   onClick={() => {
+     setSheetInitialPanel?.(null)
+     setSheetOpen(true)
+   }}
+   ```
+
+3. Deep-link callsites MUST set panel + open in **the same batched setState call** so the drawer mounts with the right panel in one render:
+
+   ```tsx
+   setSheetInitialPanel("conditional-rules")
+   setSheetOpen(true)
+   ```
+
+4. From inside a Radix `DropdownMenu`, queue the work into `onCloseAutoFocus` (see `columnMenuPendingActionRef` in `packages/ui/src/components/data-table/index.tsx`) — opening the non-modal Sheet synchronously from `onSelect` races with the menu close cycle.
+
+**MUST NOT**: introduce a second source of truth for "which panel" — `sheetInitialPanel` is the only deep-link channel; the drawer's internal `sheetPanel` stays internal.
+
+#### View-type tile grid
+
+The drawer's "View type" tile grid (and the Export drawer's "File format" grid) renders through `SelectionTileGrid` with `interaction="button"` + `labelPlacement="inside"`. The shared `selectionTileClassNames` utility applies **`aspect-square`** + `leading-tight` so every tile is the same uniform square regardless of how many tiles populate the last row of the `grid-cols-N` track. **Prefer** the shared `SelectionTileGrid` (or `selectionTileClassNames` directly) instead of inventing flex/grid wrappers for tile-style pickers — that's the only way to keep the squares uniform across the system.
 
 ### 4.3 Data view dashboard — charts, customisation, and parity with the gallery
 
@@ -115,13 +148,13 @@ Thread **`view`** and **`onViewChange`** from the **client** → **table / toolb
 | **Accessibility** | Each chart uses **`ChartFigure`** (keyboard + live region) and **`ChartDataTable`** (`sr-only` table fallback), inside **`ChartCard`** — same stack as **`charts-overview.tsx`**. **MUST NOT** ship bare Recharts-only charts on these surfaces. |
 | **Two “dashboard” surfaces** | The **`/dashboard`** route uses **`DashboardTabs`** + **`ChartsOverview`** (gallery / demos). The **Data** tab on list hubs uses **`*DashboardChartsSection`** (`PlacementsDashboardChartsSection`, Team, Compliance) and **`data-view-dashboard-charts*.tsx`**. Both share **`ChartFigure`**, **`ChartCard`**, and **`useChartVariant()`**; they are **not** duplicate chart engines — product charts belong in the shared components above. |
 | **Keyboard selection (bars & pies)** | Match the **`/dashboard` gallery**: use **`CHART_KBD_ACTIVE_BAR`** and **`CHART_KBD_ACTIVE_PIE_SHAPE`** from **`@/lib/chart-keyboard-selection`** with Recharts **`activeBar` + `activeIndex`** on **`Bar`** and **`activeShape` + `activeIndex`** on **`Pie`**. **MUST NOT** rely on **`fillOpacity` dimming alone** on **`Cell`** as the only keyboard-selected state — it diverges from the gallery and from WCAG-aligned focus feedback. |
-| **Customise UI** | Toggle **Edit layout** on the hub dashboard toolbar (`DataListDashboardShell` / Team / Compliance). **`layoutEditMode`** shows on-canvas drag reorder, remove, width (half / full width), chart type, add chart, reset — **no** separate Sheet for layout. Target for coach marks: **`[aria-label='Edit dashboard layout']`**. |
+| **Customise UI** | Toggle **Edit layout** on the hub dashboard toolbar inside **`PlacementsTable`** / **`TeamTable`** / **`ComplianceTable`** (the dashboard tab body renders `*DashboardChartsSection` directly — there is no shared `DashboardShell` wrapper). **`layoutEditMode`** shows on-canvas drag reorder, remove, width (half / full width), chart type, add chart, reset — **no** separate Sheet for layout. Target for coach marks: **`[aria-label='Edit dashboard layout']`**. |
 | **Toolbar in edit mode** | Do **not** render **`DataTableToolbar`** while **`layoutEditMode`** — hides search, filters, **Properties**, and the edit affordance in one row. Canvas **Done** / **Cancel** / **Reset** stay on the charts section. |
 | **Key metrics card** | Dashboard **`key-metrics`** uses **`KeyMetrics`** **`variant="card"`** (not **`flat`**). Users choose how many KPIs to show (**1–4**) via the canvas control in edit mode; persist **`keyMetricsKpiCount`** in the same layout object. Half-width (**span 1**) sets **`metricsHalfWidthLayout`**. |
 | **Data wiring** | **`PlacementsDashboardChartsSection`** (and Team / Compliance equivalents) **MUST** receive **`cardSpans`** and **`cardChartTypes`** (or rely on defaults **inside** the component). **MUST NOT** omit them without defaults — runtime crash (`undefined[id]`). |
 | **Persistence (centralized)** | Layout for all three hubs is stored in one bundle: **`lib/data-view-dashboard-storage.ts`** (`exxat-ds:data-view-dashboards:v1`, scopes **`placements` \| `team` \| `compliance`**). Placements wrappers: **`loadDashboardLayout`** / **`saveDashboardLayout`**; generic API: **`loadDataViewLayout`** / **`saveDataViewLayout`**. Legacy per-hub keys are migrated when a scope is missing. **MUST NOT** add a fourth localStorage key pattern for the same layout shape without extending this module. |
 
-**Reference:** `components/data-view-dashboard-charts.tsx`, `data-view-dashboard-charts-team.tsx`, `data-view-dashboard-charts-compliance.tsx`, `components/data-list-table.tsx` (`DataListDashboardShell`), `lib/chart-keyboard-selection.ts`, `lib/data-view-dashboard-storage.ts`, **`exxat-ds/.cursor/rules/exxat-dashboard-view-charts.mdc`**.
+**Reference:** `components/data-view-dashboard-charts.tsx` (`PlacementsDashboardChartsSection`), `data-view-dashboard-charts-team.tsx`, `data-view-dashboard-charts-compliance.tsx`, `components/placements-table.tsx` (dashboard tab body wires the section + edit toolbar inline), `lib/chart-keyboard-selection.ts`, `lib/data-view-dashboard-storage.ts`, **`apps/web/.cursor/rules/exxat-dashboard-view-charts.mdc`**.
 
 ### 4.4 Board cards (kanban)
 
@@ -133,8 +166,8 @@ Thread **`view`** and **`onViewChange`** from the **client** → **table / toolb
 | **Information hierarchy** | **(1)** **`ListPageBoardCardTitleRow`** — title + optional **`ListPageBoardCardAvatar`** (`trailing`). **(2)** **`ListPageBoardCardBadgeRow`** — status / tags as **`Badge`** chips when the entity has a status (not raw body text for status). **(3)** **`ListPageBoardCardBody`** — facts via **`BoardCardTwoLineBlock`** and/or **`BoardCardIconRow`** from **`board-card-primitives.tsx`**. **(4)** Optional **`ListPageBoardCardSecondary`** for empty-state hints. |
 | **Facts rows** | Prefer **`BoardCardTwoLineBlock`** (icon + primary line + optional secondary line) so rows match Placements. **`line2`** may be omitted for a single-line fact. Use **`BoardCardIconRow`** when the cell mirrors **`ColumnDef` cell renderers** (e.g. Placements). |
 | **Avatar** | Use **`ListPageBoardCardAvatar`** with entity **`initials`** when present; otherwise derive with **`initialsFromDisplayName`** from **`lib/initials-from-name.ts`** (e.g. compliance owner name). |
-| **Status labels + colors** | **All list hubs** (**Placements**, **Team**, **Compliance**, **Question bank**, …) **MUST** define status **labels**, **tint classes**, and **icons** in **`lib/list-status-badges.ts`**. Render with **`ListHubStatusBadge`**, or **`StatusBadge`** from **`components/data-list-table-cells.tsx`** for Placements (wrapper over **`ListHubStatusBadge`** + **`PLACEMENT_STATUS_*`**). **`surface="table"`** for **`DataTable`** / **list** rows; **`surface="board"`** in **`ListPageBoardCardBadgeRow`**. **SHOULD** map values onto **`LIST_HUB_STATUS_TINT_*`** (success / warning / neutral / danger / **info**) before inventing new palettes. **MUST NOT** duplicate maps in feature files or add **`uppercase`** / **`tracking-wide`**. |
-| **Placements-specific** | **`BoardPlacementCard`** may keep domain logic (lifecycle tabs, conditional row background, **`TablePropertiesDrawer`** column wiring); it still composes **`ListPageBoardCard`** parts and primitives. **Placements** status uses **`StatusBadge`** in **`components/data-list-table-cells.tsx`**, which wraps **`ListHubStatusBadge`** with **`PLACEMENT_STATUS_*`** maps in **`lib/list-status-badges.ts`** (same system as other hubs). |
+| **Status labels + colors** | **All list hubs** (**Placements**, **Team**, **Compliance**, **Question bank**, …) **MUST** define status **labels**, **tint classes**, and **icons** in **`lib/list-status-badges.ts`**. Render with **`ListHubStatusBadge`**, or **`StatusBadge`** from **`components/placements-table-cells.tsx`** for Placements (wrapper over **`ListHubStatusBadge`** + **`PLACEMENT_STATUS_*`**). **`surface="table"`** for **`DataTable`** / **list** rows; **`surface="board"`** in **`ListPageBoardCardBadgeRow`**. **SHOULD** map values onto **`LIST_HUB_STATUS_TINT_*`** (success / warning / neutral / danger / **info**) before inventing new palettes. **MUST NOT** duplicate maps in feature files or add **`uppercase`** / **`tracking-wide`**. |
+| **Placements-specific** | **`BoardPlacementCard`** may keep domain logic (lifecycle tabs, conditional row background, **`TablePropertiesDrawer`** column wiring); it still composes **`ListPageBoardCard`** parts and primitives. **Placements** status uses **`StatusBadge`** in **`components/placements-table-cells.tsx`**, which wraps **`ListHubStatusBadge`** with **`PLACEMENT_STATUS_*`** maps in **`lib/list-status-badges.ts`** (same system as other hubs). |
 
 **Reference:** **`components/data-views/placement-board-card.tsx`**, **`components/team-board-view.tsx`**, **`components/compliance-board-view.tsx`**, **`components/question-bank-board-view.tsx`**, **`components/list-hub-status-badge.tsx`**, **`lib/list-status-badges.ts`**, **`components/data-views/list-page-board-template.tsx`**. **Skill (Cursor + Claude):** **`.cursor/skills/exxat-board-cards/SKILL.md`** and **`.claude/skills/exxat-board-cards/SKILL.md`** (duplicate for Claude Code).
 
@@ -236,7 +269,7 @@ Match **Placements**:
 
 **Primary nav destinations** that show **large or highly interactive** datasets **MUST** use the **primary page template**:
 
-- **`ListPageTemplate`** + **`KeyMetrics`** (when metrics apply) + export wiring + the same **client composition** as **`DataListClient`** / **`TeamClient`** — not a minimal `PageHeader`-only layout for that hub.
+- **`ListPageTemplate`** + **`KeyMetrics`** (when metrics apply) + export wiring + the same **client composition** as **`PlacementsClient`** / **`TeamClient`** — not a minimal `PageHeader`-only layout for that hub.
 
 **MUST NOT** treat a main hub table page as a “light” sub-section: use the same shell as Placements (tabs, optional metrics strip, template-level export).
 
@@ -428,18 +461,18 @@ Reference: `components/new-placement-form.tsx` (Next/Back buttons); full shortcu
 | View tabs + shell | `ListPageTemplate` | `components/templates/list-page.tsx` |
 | Table + toolbar | `DataTable`, `DataTableToolbar`, `useTableState` | `components/data-table/` |
 | Properties | `TablePropertiesDrawer` (+ **`currentView`** / **`onViewChange`** when using view tabs — §4.2) | `@/components/table-properties` |
-| Placements flow | `DataListClient`, `DataListTable` | `components/data-list-client.tsx`, `components/data-list-table.tsx` |
+| Placements flow | `PlacementsClient`, `PlacementsTable` | `components/placements-client.tsx`, `components/placements-table.tsx` |
 | Team flow | `TeamClient`, `TeamTable`, `TeamPageHeader` | `components/team-client.tsx`, etc. |
-| Dashboard view tab (KPIs + charts) | **`DashboardReportCharts`**; default **`ChartsOverview`** (placement demo). **Team** passes **`chartsSection`** (`TeamDashboardChartsSection`) so graphs match roster rows. KPIs from **`tableState.rows`** | `components/dashboard-report-charts.tsx`, `data-view-dashboard-charts-team.tsx`, `data-list-table.tsx` |
+| Dashboard view tab (KPIs + charts) | **`DashboardReportCharts`**; default **`ChartsOverview`** (placement demo). **Team** passes **`chartsSection`** (`TeamDashboardChartsSection`) so graphs match roster rows. KPIs from **`tableState.rows`** | `components/dashboard-report-charts.tsx`, `data-view-dashboard-charts-team.tsx`, `placements-table.tsx` |
 | Data view layout + graph keyboard tokens | **`loadDataViewLayout` / `saveDataViewLayout`**, **`CHART_KBD_ACTIVE_BAR`**, **`CHART_KBD_ACTIVE_PIE_SHAPE`** | `lib/data-view-dashboard-storage.ts`, `lib/chart-keyboard-selection.ts` |
-| Customize dashboard coach marks | Shared steps in **`lib/dashboard-customize-coach-mark.ts`**; flows **`placements-dashboard-customize`**, **`team-dashboard-customize`**, **`compliance-dashboard-customize`** | `hooks/use-coach-mark.ts` (`enabled`, `dependsOnDismissedFlowId`), `data-list-table.tsx`, `team-table.tsx`, `compliance-table.tsx` |
+| Customize dashboard coach marks | Shared steps in **`lib/dashboard-customize-coach-mark.ts`**; flows **`placements-dashboard-customize`**, **`team-dashboard-customize`**, **`compliance-dashboard-customize`** | `hooks/use-coach-mark.ts` (`enabled`, `dependsOnDismissedFlowId`), `placements-table.tsx`, `team-table.tsx`, `compliance-table.tsx` |
 | Board columns (simple hubs) | **`ListPageBoardTemplate`** + **`ListPageBoardCard`** + primitives + **`lib/list-status-badges`** + **`ListHubStatusBadge`** (when applicable) | `components/data-views/list-page-board-template.tsx`, `list-hub-status-badge.tsx`, `team-board-view.tsx`, **`§4.4`** |
 | Full dashboard route | `DashboardTabs`, `KeyMetrics`, `ChartsOverview` | `app/(app)/dashboard/page.tsx`, `components/dashboard-tabs.tsx` |
 | Board cards | **`ListPageBoardCard`** + primitives + entity card (**§4.4**) | `components/data-views/list-page-board-card.tsx`, `board-card-primitives.tsx`, `placement-board-card.tsx` |
 | **Application sidebar** (school/program, product, profile, child nav) | **`AppSidebar`**, **`TeamSwitcher`**, **`NavUser`**, collapsible + **popover** (icon rail) | `components/app-sidebar.tsx`, `nav-user.tsx`, `product-switcher.tsx`, `lib/mock/navigation.tsx`, `lib/logo-dev.ts`, `lib/stock-portrait.ts` — patterns in **exxat-ds-skill §3.1** |
 | **Collaboration & access** (face rail + invite sheet) | **`PageHeader` `variant="collaboration"`**, **`InviteCollaboratorsDrawer`**, **`lib/collaborator-access.ts`** | `components/page-header.tsx`, `components/invite-collaborators-drawer.tsx`, `components/question-bank-page-header.tsx`, `components/question-bank-client.tsx`, **`§4.7`**, **`docs/collaboration-access-pattern.md`** |
 | **Dedicated search** (empty `?q=` landing vs results) | **`DedicatedSearchLandingTemplate`**, **`DedicatedSearchUrlComposer`**, **`DedicatedSearchRecents`**, **`DedicatedSearchResultsHeaderChrome`**, **`lib/dedicated-search-recents.ts`** | **`§4.8`**, **`components/templates/dedicated-search-*`**, **`components/dedicated-search-*.tsx`** |
-| Persistence (example) | Page + lifecycle keys | `lib/data-list-persistence.ts`, `DataListClient` / `DataListTable` |
+| Persistence (example) | Page + lifecycle keys | `lib/data-list-persistence.ts`, `PlacementsClient` / `PlacementsTable` |
 | Coach marks / tours | `CoachMark`, `useCoachMark`, coach mark registry | `components/ui/coach-mark.tsx`, `hooks/use-coach-mark.ts`, `lib/coach-mark-registry.ts` |
 | Settings page | Coach mark management | `app/(app)/settings/page.tsx`, `components/settings-client.tsx` |
 
@@ -464,8 +497,8 @@ Reference: `components/new-placement-form.tsx` (Next/Back buttons); full shortcu
 
 ## 10. Persistence (when copying Placements behavior)
 
-- **Page-level:** tabs, `showMetrics`, `displayOptions`, `activeTabId` — see `lib/data-list-persistence.ts` and `DataListClient`.
-- **Per-lifecycle / tab:** sort, filters, columns, etc. — see `DataListTable` and `scheduleLifecycleSave`.
+- **Page-level:** tabs, `showMetrics`, `displayOptions`, `activeTabId` — see `lib/data-list-persistence.ts` and `PlacementsClient`.
+- **Per-lifecycle / tab:** sort, filters, columns, etc. — see `PlacementsTable` and `scheduleLifecycleSave`.
 
 New pages **SHOULD** namespace keys and version JSON (`v: 1`) for future migrations.
 
@@ -504,7 +537,7 @@ New pages **SHOULD** namespace keys and version JSON (`v: 1`) for future migrati
 - **With image** — set `image` + `imageAlt` on the step
 - **Without image** — text-only
 
-**Reference:** `references/coach-marks.md` in the skill, `components/dashboard-tabs.tsx` (dashboard tour), `components/data-list-client.tsx` (views tour).
+**Reference:** `references/coach-marks.md` in the skill, `components/dashboard-tabs.tsx` (dashboard tour), `components/placements-client.tsx` (views tour).
 
 ---
 
@@ -519,7 +552,38 @@ New pages **SHOULD** namespace keys and version JSON (`v: 1`) for future migrati
 - **KPI deltas & trend arrows:** `docs/kpi-trend-pattern.md` (`MetricItem.trendPolarity`, `KeyMetrics`, chart mini-metrics)
 - **Global command palette (⌘K):** `docs/command-menu-pattern.md`
 - **No toast / snackbars:** **§6.5**, root **`.cursor/rules/exxat-no-toast.mdc`**
-- **This handbook:** `exxat-ds/AGENTS.md` (keep checklist sections updated when patterns change)
+- **Token taxonomy:** `docs/token-taxonomy.md` — namespaces, layering (L0 / L1 / L2 / L3), naming, deprecation policy. Machine-readable index at `packages/ui/tokens/hooks-index.json` (163 tokens · 36 namespaces · regenerate via `pnpm --filter @exxatdesignux/ui tokens:index`).
+- **Exxat L0 canonical namespace:** `--exxat-color-surface-*`, `--exxat-color-ink-*`, `--exxat-color-brand-*`, `--exxat-radius-*`, `--exxat-spacing-*`, … (taxonomy §2.0; rollout: `docs/migrations/0002-exxat-token-namespace.md`).
+- **Component selection guide:** `docs/component-selection-guide.md` — decision tree across the whole DS.
+- **Blueprints:** `docs/blueprints/` — framework-agnostic specs. Start with `page-header.md` and `data-table.md`; add new ones via `_template.md`.
+- **Migrations:** `docs/migrations/` — token rename + removal history. Open a new entry alongside every breaking change.
+- **Components audit:** `docs/components-audit-2026-05.md` — observation log; §2.1 (form-layout / section-cards) and §2.2 (onboarding consolidation) both resolved 2026-05-19.
+- **This handbook:** `apps/web/AGENTS.md` (keep checklist sections updated when patterns change)
+
+### 12.1 Design-system meta-rules
+
+| Concern | Rule | Enforcement |
+|---|---|---|
+| Salesforce / SLDS / LWC cross-contamination | **`.cursor/rules/exxat-no-slds-leakage.mdc`** | ESLint: `exxat-ds/no-slds-classes`, `exxat-ds/no-lightning-elements` |
+| Hex literals, deprecated tokens, wrong token family | **`.cursor/rules/exxat-token-discipline.mdc`** | ESLint: `exxat-ds/no-hex-color`, `exxat-ds/no-deprecated-tokens` |
+| No-toast feedback policy | **`.cursor/rules/exxat-no-toast.mdc`** (§6.5) | ESLint: `exxat-ds/no-sonner-toast` |
+
+The ESLint rules ship as a **workspace package**:
+**`packages/eslint-plugin-exxat-ds/`** (published as `@exxatdesignux/eslint-plugin`).
+`apps/web/eslint.config.mjs` imports it via `import exxatDs from "@exxatdesignux/eslint-plugin"`
+and consumers of `@exxatdesignux/ui` can install the plugin from npm with the
+same wiring. See [`packages/eslint-plugin-exxat-ds/README.md`](../../packages/eslint-plugin-exxat-ds/README.md)
+for rule docs and authoring guidance.
+
+When you **introduce** a new token in `packages/ui/src/globals.css` (the canonical CSS — app/template `globals.css` are thin `@import` shells):
+
+1. **Prefer L0** — declare the canonical name in the `Exxat L0 — canonical namespace`
+   block (`--exxat-color-<bucket>-<slot>` / `--exxat-radius-N` / `--exxat-spacing-N`).
+2. Add a row to `docs/token-taxonomy.md` in the right § (§2.0 if L0; §2.1–§2.17 for legacy L1 surfaces).
+3. Run `pnpm --filter @exxatdesignux/ui tokens:index` and commit the
+   regenerated `packages/ui/tokens/hooks-index.json`.
+4. If you are **deprecating** a token, also open a numbered entry under
+   `docs/migrations/` (see `docs/migrations/README.md` template).
 
 ---
 
@@ -562,7 +626,7 @@ Copy and complete when implementing or reviewing:
 - [ ] **§4.5 View shells:** Folder / panel / icon views use **`ListPageViewFrame`** (or a **`data-views/`** component that uses it); no page-tied-only grid wrappers; **`DataTable`** not double-wrapped (**§5**).
 - [ ] **> ~10 items:** Search, filter, sort, properties (per surface type in §6.1).
 - [ ] **Exportable data:** Filled primary CTA; **⋯** menu with Export → `ExportDrawer`.
-- [ ] **Primary hub + large data:** Same composition as `DataListClient` / `TeamClient` (template + metrics when applicable).
+- [ ] **Primary hub + large data:** Same composition as `PlacementsClient` / `TeamClient` (template + metrics when applicable).
 - [ ] **All view tabs:** List/board/dashboard use **`tableState.rows`**; dashboard view uses **`KeyMetrics`** + shared KPI helpers — no “not wired” placeholders or duplicate metric cards.
 - [ ] **Properties drawer:** **`TablePropertiesDrawer`** receives **`currentView`** and **`onViewChange`** from **`renderContent`** / **`updateTab`** + **`dataListViewIcon`** (§4.2) — not table-only copy on Board/List/Dashboard.
 - [ ] **Data view dashboard (Placements / Team / Compliance):** Charts use **`ChartFigure`** + **`ChartDataTable`**; **Edit layout** on toolbar; **`activeBar` / `activeShape`** keyboard styling from **`lib/chart-keyboard-selection`** — not opacity-only **`Cell`** hacks (§4.3).

package/template/app/(app)/examples/page.tsx

@@ -4,7 +4,6 @@ import { Button } from "@/components/ui/button"
 
 const LINKS = [
   { href: "/dashboard", label: "Dashboard", description: "Metrics, charts, and layout patterns." },
-  { href: "/data-list", label: "List hub", description: "Table, list, board, and dashboard views on shared state." },
   { href: "/question-bank", label: "Question bank", description: "Discovery hub for browsing folders, recents, and AI-assisted create/import flows." },
   { href: "/question-bank/library", label: "Question library", description: "Folders, OS folder view, panel, and tree demos on mock items." },
   { href: "/settings", label: "Settings", description: "Appearance, tours, and shell preferences." },

package/template/app/(app)/layout.tsx

@@ -1,6 +1,10 @@
 import { cookies } from "next/headers"
-import { AppSidebar }   from "@/components/app-sidebar"
-import { SidebarShell } from "@/components/sidebar-shell"
+import {
+  AppSidebar,
+  SidebarShell,
+  SecondaryPanelProvider,
+  SecondaryPanel,
+} from "@/components/sidebar"
 import {
   SIDEBAR_STATE_COOKIE_NAME,
   sidebarDefaultOpenFromCookie,
@@ -8,7 +12,7 @@ import {
 import { DashboardViewProvider } from "@/contexts/dashboard-view-context"
 import { ChartVariantProvider }  from "@/contexts/chart-variant-context"
 import { AskLeoProvider, AskLeoSidebar } from "@/components/ask-leo-sidebar"
-import { SecondaryPanelProvider, SecondaryPanel } from "@/components/secondary-panel"
+import { KeyMetricsAskLeoBridge } from "@/components/key-metrics-ask-leo-bridge"
 import { SystemBannerProvider } from "@/contexts/system-banner-context"
 import { SystemBannerSlot } from "@/components/system-banner-slot"
 import { CommandMenu } from "@/components/command-menu"
@@ -37,6 +41,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
     <DashboardViewProvider>
     <ChartVariantProvider>
     <AskLeoProvider>
+    <KeyMetricsAskLeoBridge>
     <SystemBannerProvider>
     <CommandMenuProvider value={commandMenuConfig}>
 
@@ -46,7 +51,14 @@ export default async function AppLayout({ children }: { children: React.ReactNod
       <SystemBannerSlot />
 
       {/* Sidebar + content row — flex-1 min-h-0 below min-h-svh shell; SidebarInset self-stretch + PrimaryPageTemplate flex-1 fills viewport when page body is short. */}
-      <div className="flex min-h-0 w-full flex-1 items-stretch has-data-[variant=inset]:bg-sidebar">
+      {/* suppressHydrationWarning: the Cursor IDE browser preview injects a
+          `data-cursor-ref` attribute on this layout root before React hydrates.
+          Scoped to this element's own attributes only. See companion comment
+          in components/templates/nested-secondary-panel-shell.tsx. */}
+      <div
+        className="flex min-h-0 w-full flex-1 items-stretch has-data-[variant=inset]:bg-sidebar"
+        suppressHydrationWarning
+      >
         <SecondaryPanelProvider>
           <AppSidebar variant="inset" />
           <SecondaryPanel />
@@ -57,6 +69,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
     </SidebarShell>
     </CommandMenuProvider>
     </SystemBannerProvider>
+    </KeyMetricsAskLeoBridge>
     </AskLeoProvider>
     </ChartVariantProvider>
     </DashboardViewProvider>

package/template/app/(app)/question-bank/layout.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { usePathname } from "next/navigation"
 
-import { useSecondaryPanel } from "@/components/secondary-panel"
+import { useSecondaryPanel } from "@/components/sidebar"
 import {
   QUESTION_BANK_ENTRY_PATH,
   QUESTION_BANK_HUB_FIND_PATH,

package/template/app/(app)/question-bank/new/page.tsx

@@ -1,13 +1,9 @@
 /**
- * `/question-bank/new` — full-page authoring composer.
+ * `/question-bank/new` — focused authoring page for a new question.
  *
- * Mirrors focused flows: `SiteHeader` back nav (← Question hub) + `PageHeader` title
- *   • `SidebarAutoCollapse` mounted in `beforeSiteHeader` so the main sidebar
- *     collapses on enter and restores to its prior state on leave
- *   • A wider max-width than the placement form (the composer carries a
- *     two-column document + metadata-rail layout)
- *
- * The body is `NewQuestionComposer` — see `components/new-question-composer.tsx`.
+ * The composer (`NewQuestionComposer`) owns the `NewFocusTemplate` (form-inspector
+ * variant) underneath. This route file is intentionally thin so the same composer
+ * can be mounted from other entry points (deep-link, command palette).
  *
  * Folder pre-selection: callers may pass `?folderId=<id>` so users dropped into
  * the composer from a folder-scoped library land with that folder pre-selected
@@ -15,8 +11,6 @@
  */
 
 import { NewQuestionComposer } from "@/components/new-question-composer"
-import { SidebarAutoCollapse } from "@/components/sidebar-auto-collapse"
-import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
 import {
   DEFAULT_QUESTION_BANK_FOLDERS,
   type QuestionBankFolder,
@@ -40,19 +34,12 @@ export default async function NewQuestionPage({ searchParams }: NewQuestionPageP
   const draftQuestionId = generateDraftQuestionId()
 
   return (
-    <PrimaryPageTemplate
-      beforeSiteHeader={<SidebarAutoCollapse />}
-      siteHeader={{ back }}
-      bodyClassName="min-h-0 flex-1 overflow-y-auto overscroll-y-contain"
-      maxWidthClassName="mx-auto w-full max-w-[1100px]"
-      contentClassName="px-8 py-4 pb-16"
-    >
-      <NewQuestionComposer
-        draftQuestionId={draftQuestionId}
-        defaultFolderId={defaultFolderId}
-        backHref={back.href}
-        folders={folders}
-      />
-    </PrimaryPageTemplate>
+    <NewQuestionComposer
+      draftQuestionId={draftQuestionId}
+      defaultFolderId={defaultFolderId}
+      backHref={back.href}
+      backLabel={back.label}
+      folders={folders}
+    />
   )
 }