@exxatdesignux/ui 0.2.15 → 0.2.17

package/src/theme.css

@@ -219,7 +219,8 @@
   --sidebar-ring:               oklch(0.25 0 0);
   /* Nav section titles — ≥4.5:1 vs --sidebar (not vs page white) */
   --sidebar-section-label-foreground: color-mix(in oklch, var(--sidebar-foreground) 58%, var(--sidebar));
-  --secondary-panel-bg:         oklch(0.99 0.008 286.1);
+  /* Nested secondary rail — soft brand wash on canvas (not pure `--background`, not full `--sidebar`). */
+  --secondary-panel-bg:         color-mix(in oklch, var(--brand-tint) 34%, var(--background));
 
   /* Browser UI (meta theme-color) — aligned with --brand-tint */
   --theme-color-chrome: #f3f2f8;
@@ -345,7 +346,8 @@
   --sidebar-border:             oklch(0.38 0.010 270);
   --sidebar-ring:               oklch(0.85 0 0);
   --sidebar-section-label-foreground: color-mix(in oklch, var(--sidebar-foreground) 48%, var(--sidebar));
-  --secondary-panel-bg:         oklch(0.23 0.02 270);
+  /* Nested secondary rail — dark: subtle brand lift on canvas (not flat `--background` only). */
+  --secondary-panel-bg:         color-mix(in oklch, var(--background) 82%, var(--brand-color) 18%);
   --theme-color-chrome:         #2f2d36;
 
   /* Lifted scrim on dark — white-tinted veil, not heavy black */

package/template/.claude/skills/exxat-ds-skill/SKILL.md

@@ -21,7 +21,7 @@ description: >
 - **Stack:** Next.js 16 (App Router), React, TypeScript, Tailwind CSS, shadcn/ui primitives, Font Awesome icons
 - **App root:** `exxat-ds/app/(app)/` — route group that wraps all authenticated pages
 - **Single source of truth:** `exxat-ds/AGENTS.md` for full prose explanations; this skill is the actionable summary
-- **Companion skills (narrow topics):** `exxat-fontawesome-icons`, `exxat-primary-nav-secondary-panel`, `exxat-centralized-list-dataset`, `exxat-list-page-view-shells`, `exxat-dedicated-search-surfaces`, `exxat-accessibility`, `exxat-board-cards`, `exxat-collaboration-access` — live under `.cursor/skills/`; vetted copies ship with **`@exxatdesignux/ui`** in `consumer-extras/cursor-skills/` after **`pnpm --filter @exxatdesignux/ui vendor:consumer-extras`**.
+- **Companion skills (narrow topics):** `exxat-fontawesome-icons`, `exxat-mono-ids`, `exxat-primary-nav-secondary-panel`, `exxat-centralized-list-dataset`, `exxat-list-page-view-shells`, `exxat-dedicated-search-surfaces`, `exxat-accessibility`, `exxat-board-cards`, `exxat-collaboration-access` — live under `.cursor/skills/`; vetted copies ship with **`@exxatdesignux/ui`** in `consumer-extras/cursor-skills/` after **`pnpm --filter @exxatdesignux/ui vendor:consumer-extras`**.
 
 ---
 

package/template/.cursor/rules/exxat-mono-ids.mdc

@@ -0,0 +1,30 @@
+---
+description: Exxat DS — monospace typography for record IDs, question IDs, and other system identifiers
+globs: apps/web/**/*.tsx
+alwaysApply: false
+---
+
+# Exxat DS — monospace IDs
+
+Use this when rendering **system identifiers** — values a user copies, searches, or matches in APIs and tables (not human-readable names or prose).
+
+## MUST
+
+1. **Class** — Wrap identifier text in **`font-mono tabular-nums`**. Add size/color from context: typically **`text-xs text-muted-foreground`** (secondary line, table meta) or **`text-sm`** when the ID is the primary label in a narrow cell.
+2. **What counts as an ID** — Question IDs (`questionId`, `Q-YYMM-XXXX`), record/entity keys shown in UI, folder/surface technical keys when displayed as identifiers, hex tokens in pickers, audit/log principals, site/row **`id`** columns meant for lookup.
+3. **Mixed lines** — When an ID sits beside prose (e.g. page subtitle), only the ID segment is mono; keep separators and labels in the default sans stack.
+
+## SHOULD
+
+- Match existing hubs: **`question-bank-table.tsx`**, **`question-bank-list-view.tsx`**, **`new-question-composer.tsx`** (header subtitle), **`sites-table.tsx`** (`row.id`).
+- Prefer **`truncate`** / **`min-w-0`** on mono IDs in tight layouts so long tokens do not blow out columns.
+
+## MUST NOT
+
+- Apply **`font-mono`** to **person names**, **folder display names**, **status labels**, **dates**, **counts**, **currency**, or **body copy** — only the identifier token.
+- Use mono for **option letters** (A/B/C) or **step numbers** unless they are literal system IDs.
+
+## See also
+
+- **`.cursor/skills/exxat-mono-ids/SKILL.md`**
+- **`apps/web/AGENTS.md`** — §1 item on IDs, §13 checklist

package/template/AGENTS.md

@@ -18,21 +18,22 @@ Cross-cutting Cursor rules also live in the repo root `.cursor/rules/` (data tab
 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>`**).
-9. **Before** adding a **primary nav row** that opens a **nested secondary nav panel** (Question bank style), read **§4.6** and **`.cursor/rules/exxat-primary-nav-secondary-panel.mdc`**.
-10. **Before** adding **shared access / invite collaborators** on a hub (face stack + invite sheet), read **§4.7** and **`.cursor/rules/exxat-collaboration-access.mdc`** / **`.cursor/skills/exxat-collaboration-access/SKILL.md`**.
-11. **Before** adding **onboarding tours, feature walkthroughs, or coach marks**, read **§11** and `references/coach-marks.md`.
-12. **Before** changing the **global command palette (⌘K)** or search/AI entry UX, read **§7.1** and **`docs/command-menu-pattern.md`**.
-13. **Before** choosing **drawer vs dialog vs new page** for a task flow, read **§6.4**, **`docs/data-views-pattern.md`** (Page vs drawer), and **`docs/drawer-vs-dialog-pattern.md`** (modal vs side panel on the same route).
-14. **Before** adding **success/error/confirmation feedback**, read **§6.5** and **`.cursor/rules/exxat-no-toast.mdc`** (no toast or snackbars).
-15. Prefer **composing existing components** over new one-off UI. If something is missing, **extend** shared components under `components/`, not a single page file.
+9. **Before** rendering **record IDs, question IDs, or other system identifiers**, read **`.cursor/rules/exxat-mono-ids.mdc`** and **`.cursor/skills/exxat-mono-ids/SKILL.md`** (**`font-mono tabular-nums`**).
+10. **Before** adding a **primary nav row** that opens a **nested secondary nav panel** (Question bank style), read **§4.6** and **`.cursor/rules/exxat-primary-nav-secondary-panel.mdc`**.
+11. **Before** adding **shared access / invite collaborators** on a hub (face stack + invite sheet), read **§4.7** and **`.cursor/rules/exxat-collaboration-access.mdc`** / **`.cursor/skills/exxat-collaboration-access/SKILL.md`**.
+12. **Before** adding **onboarding tours, feature walkthroughs, or coach marks**, read **§11** and `references/coach-marks.md`.
+13. **Before** changing the **global command palette (⌘K)** or search/AI entry UX, read **§7.1** and **`docs/command-menu-pattern.md`**.
+14. **Before** choosing **drawer vs dialog vs new page** for a task flow, read **§6.4**, **`docs/data-views-pattern.md`** (Page vs drawer), and **`docs/drawer-vs-dialog-pattern.md`** (modal vs side panel on the same route).
+15. **Before** adding **success/error/confirmation feedback**, read **§6.5** and **`.cursor/rules/exxat-no-toast.mdc`** (no toast or snackbars).
+16. Prefer **composing existing components** over new one-off UI. If something is missing, **extend** shared components under `components/`, not a single page file.
     - **MUST** scan `components/` (especially `components/ui/`, `components/data-views/`, `components/templates/`, `components/key-metrics.tsx`, `components/page-header.tsx`, and the charts/banner/dot-pattern surfaces) **before** writing any new UI. If a primitive or composition already exists, **use it** — don't build a parallel one.
     - **Examples of existing surfaces to reuse:** card grid → `ListPageBoardCard` + `BoardCardIconRow` / `BoardCardTwoLineBlock`; AI / dot animation → `AiThinkingOverlay` + `DotPattern`; search input → `InputGroup` + `InputGroupAddon` + `InputGroupInput`; page title → `PageHeader` (serif via `font-heading`); list hub shell → `ListPageTemplate` (`metrics`, `defaultTabs`, `renderContent`); metrics strip → `KeyMetrics`; **view body gutter + centered max-width** → **`ListPageViewFrame`** (**§4.5**); **shared access / invite** → **`PageHeader` `variant="collaboration"`** + **`InviteCollaboratorsDrawer`** (**§4.7**).
     - **If** nothing fits and you would add a **new shared primitive or large bespoke widget**: **ask the user** for direction first — **`.cursor/rules/exxat-reuse-before-custom.mdc`** (unless the task already explicitly approved a greenfield build).
-16. **Match** naming, imports, and patterns of the nearest reference implementation (usually Placements).
-17. **Before** adding entity **mock data**, a **new view tab**, or **detail/inspector** panels on a list hub, read **`.cursor/rules/exxat-centralized-list-dataset.mdc`** and **`.cursor/skills/exxat-centralized-list-dataset/SKILL.md`** (single **`useTableState`** row bag for every view; **no** parallel mock arrays per view).
-18. **Before** choosing **cards vs table rows vs simple lists** for a hub, read **`docs/card-vs-rows-pattern.md`** and **`.cursor/rules/exxat-card-vs-list-rows.mdc`**.
-19. **Before** adding **`KeyMetrics`** strips on list hubs or dashboard key-metrics cards, read **`docs/kpi-strip-max-four-pattern.md`** and **`.cursor/rules/exxat-kpi-max-four.mdc`** (at most **four** tiles).
-20. **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.
+17. **Match** naming, imports, and patterns of the nearest reference implementation (usually Placements).
+18. **Before** adding entity **mock data**, a **new view tab**, or **detail/inspector** panels on a list hub, read **`.cursor/rules/exxat-centralized-list-dataset.mdc`** and **`.cursor/skills/exxat-centralized-list-dataset/SKILL.md`** (single **`useTableState`** row bag for every view; **no** parallel mock arrays per view).
+19. **Before** choosing **cards vs table rows vs simple lists** for a hub, read **`docs/card-vs-rows-pattern.md`** and **`.cursor/rules/exxat-card-vs-list-rows.mdc`**.
+20. **Before** adding **`KeyMetrics`** strips on list hubs or dashboard key-metrics cards, read **`docs/kpi-strip-max-four-pattern.md`** and **`.cursor/rules/exxat-kpi-max-four.mdc`** (at most **four** tiles).
+21. **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.
 
 **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/command-menu-pattern.md`, `docs/collaboration-access-pattern.md` (keep in sync with this handbook for big refactors).
 
@@ -42,8 +43,8 @@ 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-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).
-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**.
+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).
+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`.
 
@@ -162,7 +163,9 @@ Thread **`view`** and **`onViewChange`** from the **client** → **table / toolb
 
 **MUST NOT:** Set **`secondaryPanel`** without **`PANELS[id]`** and **`useAutoPanel`** — users see **collapsed** main nav with **no** panel body.
 
-**Cursor rule:** **`.cursor/rules/exxat-primary-nav-secondary-panel.mdc`**. **Icons in panel:** **`.cursor/rules/exxat-fontawesome-icons.mdc`**.
+**Folder-scoped library (Question bank):** When the URL is scoped to a folder (**`scope === "folder"`** + **`folderId`** via **`lib/question-bank-nav.ts`**), the hub **`QuestionBankPageHeader`** **⋯ More** menu **MUST** include **Customize folder** and open **`QuestionBankNewFolderSheet`** from the **hub client** so the action works on **every** **`ListPageTemplate`** view tab — not only inside **`QuestionBankTable`** branches that mount their own sheet. **Pattern:** **`docs/question-bank-hub-header-pattern.md`**. **Cursor rule:** **`.cursor/rules/exxat-question-bank-hub-header.mdc`**.
+
+**Cursor rule (panel wiring):** **`.cursor/rules/exxat-primary-nav-secondary-panel.mdc`**. **Icons in panel:** **`.cursor/rules/exxat-fontawesome-icons.mdc`**.
 
 ### 4.7 Collaboration & access (shared hubs)
 
@@ -534,10 +537,11 @@ New pages **SHOULD** namespace keys and version JSON (`v: 1`) for future migrati
 | Data view charts: **`ChartFigure`** + **`ChartDataTable`**; keyboard highlight via **`chart-keyboard-selection`** (§4.3); layout via **`data-view-dashboard-storage`** | Ad-hoc `localStorage` keys for dashboard layout; opacity-only “selection” without `activeBar`/`activeShape` |
 | Board cards: **`ListPageBoardCard`** shell; status via **`ListHubStatusBadge`** + **`lib/list-status-badges`**; no **`uppercase`** on status chips (§4.4) | One-off board card markup; status as plain body text; duplicated status maps outside **`list-status-badges`**; **empty placeholder** primary hubs (§4.1) |
 | **§4.5** — Non-table view bodies use **`ListPageViewFrame`** (+ **`data-views/`** shells); new grids are generic components, not route-only markup | Duplicated `mx-4` / `max-w-*` per hub; wrapping **`DataTable`** so inset **doubles** (**§5**) |
-| **§4.6** — **`secondaryPanel`** + **`PANELS`** + **`useAutoPanel`** together for nested scope nav | **`secondaryPanel`** id with no panel component or activator |
+| **§4.6** — **`secondaryPanel`** + **`PANELS`** + **`useAutoPanel`** together for nested scope nav; **folder URL scope** → header **⋯** **Customize folder** + client-mounted **`QuestionBankNewFolderSheet`** (**`exxat-question-bank-hub-header.mdc`**) | **`secondaryPanel`** id with no panel component or activator; folder scope with customize **only** inside a single view tab’s subtree |
 | **§4.7** — **`PageHeader` `variant="collaboration"`** + **`CollaborationAccessFlow`** / **`InviteCollaboratorsDrawer`**; empty **Add collaborator** + non-empty face rail; roster + invite from **`collaborator-access.ts`** | Extra invite beside a populated face rail; per-person roster cards; forked access enums; toast on invite |
 | **§4.8** — **`DedicatedSearch*`** templates + composer + recents; **no** `localStorage` in **`useState`** initial paint; hub-specific **`patchSearchParams`** only | Forked `*QuestionBank*SearchLanding*` shells for another entity; hydration mismatch on recents |
 | **Font Awesome** — Kit in **`app/layout.tsx`**; **`fa-light` / `fa-solid`** conventions; **`aria-hidden`** on decorative **`<i>`**; run **`fa:subset-audit`** when adding glyphs (**`exxat-fontawesome-icons.mdc`**) | Parallel icon libraries for the same product chrome |
+| **System IDs** — **`font-mono tabular-nums`** on question/record keys; mono **only** the ID token in mixed subtitles (**`exxat-mono-ids.mdc`**) | Mono on names, statuses, dates, or whole subtitle lines |
 
 ---
 
@@ -570,12 +574,13 @@ Copy and complete when implementing or reviewing:
 - [ ] **Accessibility:** §8 — tablist/toolbar patterns, **≥24px** targets for icon-only controls, contrast on tinted surfaces, dialog/sheet/drawer **titles**; **every icon that communicates info has a text alternative** — adjacent label (preferred) OR `aria-label` + `Tooltip` (§8.6 Case A/B/C, covers informational icons like calendar-for-date, status dots, AND icon-only buttons); **kbd inside a button uses `<Kbd variant="bare">`** (§8.7); re-run **axe** on Placements when changing views toolbar.
 - [ ] **Coach marks (§11):** `CoachMark` + `useCoachMark`; register in **`coach-mark-registry`**; use **`enabled`** / **`dependsOnDismissedFlowId`** when a tour must wait for another flow or a specific view (e.g. **dashboard**); customize-dashboard flows use **`lib/dashboard-customize-coach-mark.ts`**.
 - [ ] **Application sidebar (§9.1):** **`ExxatProductLogo`** for product; **`logoDevUrl`** for schools; team switcher **`DropdownMenuContent`** keeps the explicit wide school/program surface (**`!w-max`** + min/max width); expanded switcher **`h-auto min-h-12`**; no **`CollapsibleTrigger` → `SidebarMenuButton` with `tooltip` prop**; child links **popover** on icon rail; profile **`stockPortraitUrl`** + **`referrerPolicy="no-referrer"`** on **`AvatarImage`**.
-- [ ] **Secondary panel (§4.6):** If **`NavLinkItem.secondaryPanel`** is set — **`PANELS[id]`** in **`secondary-panel.tsx`**, hub mounts **`useAutoPanel(id)`**, scope syncs to URL + **`tableState.rows`** — **`.cursor/rules/exxat-primary-nav-secondary-panel.mdc`**.
+- [ ] **Secondary panel (§4.6):** If **`NavLinkItem.secondaryPanel`** is set — **`PANELS[id]`** in **`secondary-panel.tsx`**, hub mounts **`useAutoPanel(id)`**, scope syncs to URL + **`tableState.rows`** — **`.cursor/rules/exxat-primary-nav-secondary-panel.mdc`**. **Question bank folder scope:** header **⋯** → **Customize folder** + **`QuestionBankNewFolderSheet`** on **`QuestionBankClient`** — **`docs/question-bank-hub-header-pattern.md`**, **`.cursor/rules/exxat-question-bank-hub-header.mdc`**.
 - [ ] **Collaboration & access (§4.7):** Shared hubs use **`variant="collaboration"`**, empty **Add collaborator** / non-empty face rail, **⋯ → Invite people**, **`CollaborationAccessFlow`** or **`InviteCollaboratorsDrawer`**, **`lib/collaborator-access.ts`**, roster **name → email → role tags** — **`.cursor/rules/exxat-collaboration-access.mdc`**.
 - [ ] **Dedicated search (§4.8):** Landing uses **`DedicatedSearchLandingTemplate`**; results use **`DedicatedSearchResultsHeaderChrome`** + outer **`DEDICATED_SEARCH_RESULTS_OUTER_CONTENT_CLASSNAME`**; **`DedicatedSearchUrlComposer`** + **`DedicatedSearchRecents`** with **`createDedicatedSearchRecentsController`** — **`.cursor/rules/exxat-dedicated-search-surfaces.mdc`**.
 - [ ] **KPI trends:** **`MetricItem.trend`** matches the delta direction; **`trendPolarity`** set for “more is worse” metrics (flags, defects, overdue) — **`docs/kpi-trend-pattern.md`**, **`.cursor/rules/exxat-kpi-trends.mdc`**.
 - [ ] **Font Awesome:** New glyphs covered by **`fa:subset-audit`** / Kit subset; decorative **`<i>`** has **`aria-hidden`**; icon-only controls follow **§8.6** — **`.cursor/rules/exxat-fontawesome-icons.mdc`**.
+- [ ] **System IDs:** Visible **`questionId`**, record keys, and copy-pasteable identifiers use **`font-mono tabular-nums`**; mixed lines mono-wrap **only** the ID — **`.cursor/rules/exxat-mono-ids.mdc`**, **`.cursor/skills/exxat-mono-ids/SKILL.md`**.
 
 ---
 
-*Last updated: drawer vs dialog / card vs rows / KPI max-four pattern docs + rules + skills; §6.4 table; §4.8 dedicated search templates; §4.7 collaboration & access; §4.1 centralized dataset + presentation; §4.5–§4.6 view shells + secondary panel; Font Awesome rule; §9.1 application sidebar shell; §4.4 board cards; §6.5 no toast; §7.1 command palette; §13 checklist.*
+*Last updated: monospace system IDs rule/skill; question bank folder-scoped header Customize + rule/skill; drawer vs dialog / card vs rows / KPI max-four pattern docs + rules + skills; §6.4 table; §4.8 dedicated search templates; §4.7 collaboration & access; §4.1 centralized dataset + presentation; §4.5–§4.6 view shells + secondary panel; Font Awesome rule; §9.1 application sidebar shell; §4.4 board cards; §6.5 no toast; §7.1 command palette; §13 checklist.*

package/template/app/(app)/data-list/page.tsx

@@ -1,10 +1,10 @@
-import { DataListClient } from "@/components/data-list-client"
+import { PlacementsClient } from "@/components/placements-client"
 import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
 
 export default function DataListPage() {
   return (
     <PrimaryPageTemplate siteHeader={{ title: "List hub" }}>
-      <DataListClient />
+      <PlacementsClient />
     </PrimaryPageTemplate>
   )
 }

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

@@ -4,19 +4,37 @@ import * as React from "react"
 import { usePathname } from "next/navigation"
 
 import { useSecondaryPanel } from "@/components/secondary-panel"
-import { QUESTION_BANK_ENTRY_PATH } from "@/lib/question-bank-nav"
+import {
+  QUESTION_BANK_ENTRY_PATH,
+  QUESTION_BANK_HUB_FIND_PATH,
+  QUESTION_BANK_LIST_PATH,
+} from "@/lib/question-bank-nav"
+
+/** Full-page focused flows under `/question-bank/*` that suppress the secondary panel. */
+const QUESTION_BANK_FOCUSED_FLOW_PATHS: readonly string[] = ["/question-bank/new"]
+
+function isQuestionBankFocusedFlow(pathname: string): boolean {
+  return QUESTION_BANK_FOCUSED_FLOW_PATHS.some(p => pathname === p || pathname.startsWith(`${p}/`))
+}
 
 /**
- * Keeps the nested secondary panel open across library / list / find navigations.
- * The discovery hub (`/question-bank`) is full-width — no secondary bar there.
+ * Keeps the nested secondary panel open across library navigations.
+ * **Question hub** (`/question-bank`), **Search** (`/find`, `/list`), and
+ * focused authoring routes (`/new`) stay full-width — no secondary rail.
  */
 export default function QuestionBankLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname()
   const { openPanel, closePanel, activePanel } = useSecondaryPanel()
   const closePanelRef = React.useRef(closePanel)
   const openPanelRef = React.useRef(openPanel)
-  closePanelRef.current = closePanel
-  openPanelRef.current = openPanel
+  // "Latest ref" pattern — keep callbacks current without re-running the
+  // route effect below on every render. `useEffect` (no deps) updates the
+  // refs after each render; React's `refs` rule disallows direct ref writes
+  // during render so the assignment lives here instead.
+  React.useEffect(() => {
+    closePanelRef.current = closePanel
+    openPanelRef.current = openPanel
+  })
 
   /** Leaving `/question-bank/*` entirely — close nested panel without forcing primary sidebar open (⌘B / cookie). */
   React.useEffect(() => {
@@ -30,7 +48,10 @@ export default function QuestionBankLayout({ children }: { children: React.React
     const isDiscoveryHubRoot =
       pathname === QUESTION_BANK_ENTRY_PATH || pathname === `${QUESTION_BANK_ENTRY_PATH}/`
 
-    if (isDiscoveryHubRoot) {
+    const isDedicatedSearchSurface =
+      pathname === QUESTION_BANK_HUB_FIND_PATH || pathname === QUESTION_BANK_LIST_PATH
+
+    if (isDiscoveryHubRoot || isDedicatedSearchSurface || isQuestionBankFocusedFlow(pathname)) {
       closePanelRef.current({ mainSidebar: "leave" })
       return undefined
     }
@@ -39,7 +60,6 @@ export default function QuestionBankLayout({ children }: { children: React.React
       openPanelRef.current("question-bank")
     }
     return undefined
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- pathname + activePanel drive when to ensure panel id
   }, [pathname, activePanel])
 
   return children

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

@@ -0,0 +1,58 @@
+/**
+ * `/question-bank/new` — full-page authoring composer.
+ *
+ * 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`.
+ *
+ * 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
+ * in the metadata rail.
+ */
+
+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,
+} from "@/lib/mock/question-bank-folders"
+import { generateDraftQuestionId } from "@/lib/question-bank-authoring"
+import { newQuestionBackNav } from "@/lib/question-bank-nav"
+
+interface NewQuestionPageProps {
+  searchParams: Promise<{ folderId?: string }>
+}
+
+export default async function NewQuestionPage({ searchParams }: NewQuestionPageProps) {
+  const params = await searchParams
+  const folders: QuestionBankFolder[] = DEFAULT_QUESTION_BANK_FOLDERS
+
+  const requested = typeof params.folderId === "string" ? params.folderId : undefined
+  const matched = requested ? folders.find(f => f.id === requested) : undefined
+  const defaultFolderId = matched?.id
+
+  const back = newQuestionBackNav(folders, defaultFolderId)
+  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>
+  )
+}

package/template/app/globals.css

@@ -151,6 +151,14 @@ html[data-text-size="large"] {
      via a scoped class, not globally on :root. */
   /* Minimum readable UI copy: 11px (`text-xs` / --text-xs). Do not use smaller arbitrary sizes. */
 
+  /* ── Layout ─────────────────────────────────────────────────── */
+  /* SiteHeader / breadcrumb height. Mirrored on the SidebarProvider for
+     descendants; declared here too so JS that reads from documentElement
+     (e.g. DataTable sticky-head offset) can resolve it. Plain px so
+     `parseFloat` can read it as a number. Keep in sync with `headerHeight`
+     in components/sidebar-shell.tsx (currently `calc(var(--spacing) * 12)` = 48px). */
+  --header-height: 48px;
+
   /* ── Typography ─────────────────────────────────────────────── */
   /* Ivy Presto loaded via Adobe Fonts Kit wuk5wqn (use.typekit.net) */
   --font-heading: "ivypresto-text";
@@ -171,6 +179,19 @@ html[data-text-size="large"] {
   --brand-preview-one:   var(--brand-tint);
   --brand-preview-prism: oklch(0.57 0.24 342);
 
+  /**
+   * Ask Leo panel tints (same mixes as the vertical wash). Use for blobs, cards, etc.
+   * `--leo-surface-gradient` is the full linear wash on `AskLeoSidebar`.
+   */
+  --leo-surface-tint-a: color-mix(in oklch, var(--brand-color) 4%, var(--background));
+  --leo-surface-tint-b: color-mix(in oklch, var(--brand-color) 8%, var(--background));
+  --leo-surface-gradient: linear-gradient(180deg, var(--leo-surface-tint-a) 0%, var(--leo-surface-tint-b) 100%);
+
+  /* KeyMetrics `variant="flat"` — soft KPI band (lavender wash → canvas) */
+  --key-metrics-flat-grad-top: color-mix(in oklch, var(--brand-tint-light) 90%, var(--background));
+  --key-metrics-flat-grad-mid: color-mix(in oklch, var(--brand-tint) 34%, var(--background));
+  --key-metrics-flat-cell-bg: color-mix(in oklch, var(--background) 80%, var(--brand-tint-light));
+
   /* ── Surfaces ────────────────────────────────────────────────── */
   --background:         oklch(1 0 0);
   --foreground:         oklch(0.145 0 0);           /* ≈ #1A1A1A — 17:1 on white ✓ */
@@ -249,7 +270,8 @@ html[data-text-size="large"] {
   --sidebar-ring:               oklch(0.25 0 0);
   /* Nav section titles — ≥4.5:1 vs --sidebar (not vs page white) */
   --sidebar-section-label-foreground: color-mix(in oklch, var(--sidebar-foreground) 58%, var(--sidebar));
-  --secondary-panel-bg:         oklch(0.99 0.008 286.1);
+  /* Nested secondary rail — soft brand wash on canvas (not pure `--background`, not full `--sidebar`). */
+  --secondary-panel-bg:         color-mix(in oklch, var(--brand-tint) 34%, var(--background));
 
   /* Browser UI (meta theme-color) — aligned with --brand-tint */
   --theme-color-chrome: #f3f2f8;
@@ -357,6 +379,10 @@ html[data-text-size="large"] {
   --destructive:        oklch(0.65 0.20 25);      /* brighter for dark bg */
   --destructive-foreground: oklch(0.10 0 0);
 
+  --key-metrics-flat-grad-top: color-mix(in oklch, var(--brand-color) 14%, var(--background));
+  --key-metrics-flat-grad-mid: color-mix(in oklch, var(--muted) 42%, var(--background));
+  --key-metrics-flat-cell-bg: color-mix(in oklch, var(--background) 88%, var(--brand-color));
+
   /* Borders — visible but not washed out on dark surfaces */
   --border:            oklch(0.38 0.008 270);
   --border-control:    oklch(0.72 0.012 270);
@@ -405,7 +431,8 @@ html[data-text-size="large"] {
   --sidebar-border:             oklch(0.38 0.010 270);
   --sidebar-ring:               oklch(0.85 0 0);
   --sidebar-section-label-foreground: color-mix(in oklch, var(--sidebar-foreground) 48%, var(--sidebar));
-  --secondary-panel-bg:         oklch(0.23 0.02 270);
+  /* Nested secondary rail — dark: subtle brand lift on canvas (not flat `--background` only). */
+  --secondary-panel-bg:         color-mix(in oklch, var(--background) 82%, var(--brand-color) 18%);
   --theme-color-chrome:         #2f2d36;
 
   /* Lifted scrim on dark — white-tinted veil, not heavy black */
@@ -506,6 +533,99 @@ html[data-text-size="large"] {
   --theme-color-chrome: #2a2428;
 }
 
+/* ==========================================================================
+   Theme: Exxat Assessment · Green · hue 159.88
+   Usage: <html class="theme-assessment">
+   ========================================================================== */
+.theme-assessment {
+  --brand-tint:         oklch(0.965 0.018 159.88);
+  --brand-tint-light:   oklch(0.992 0.008 159.88);
+  --brand-tint-subtle:  oklch(0.93 0.028 159.88);
+  --brand-color:        oklch(0.7 0.0913 159.88);
+  --brand-color-light:  oklch(0.82 0.072 159.88);
+  --brand-color-dark:   oklch(0.48 0.0913 159.88);
+  --brand-color-deep:   oklch(0.34 0.075 159.88);
+  --ring:               var(--brand-color-dark);
+}
+
+.theme-assessment:not(.dark) {
+  --sidebar:            var(--brand-tint);
+  --sidebar-accent:     oklch(0.945 0.026 159.88);
+  --sidebar-border:     oklch(0.90 0.026 159.88);
+  --secondary:          oklch(0.95 0.012 159.88);
+  --accent:             oklch(0.925 0.016 159.88);
+  --muted:              oklch(0.945 0.008 159.88);
+  --theme-color-chrome: #f1faf5;
+}
+
+.theme-assessment.dark,
+.dark.theme-assessment {
+  --ring:               var(--brand-color);
+  --background:         oklch(0.20 0.008 159.88);
+  --sidebar:            oklch(0.245 0.015 159.88);
+  --sidebar-accent:     oklch(0.30 0.012 159.88);
+  --sidebar-border:     oklch(0.38 0.010 159.88);
+  --secondary:          oklch(0.31 0.04 159.88);
+  --muted:              oklch(0.31 0.04 159.88);
+  --accent:             oklch(0.33 0.06 159.88);
+  --theme-color-chrome: #242a27;
+}
+
+/* ==========================================================================
+   Theme: Custom product · user-selected hue
+   Usage: <html class="theme-custom" style="--custom-product-brand-color: …">
+   ========================================================================== */
+/*
+ * Tint chroma is **derived from the source's chroma** so neighbouring hues
+ * (e.g. Blue h=252 vs Indigo h=280 vs Purple h=286) read as distinct pale
+ * tints instead of collapsing to the same near-white. The earlier formula
+ * pinned chroma to a fixed `0.018`, which is below the hue-discrimination
+ * threshold at L≈0.96 for closely-spaced hues — that's why Blue / Indigo /
+ * Purple looked identical in the sidebar.
+ *
+ * `max(<floor>, calc(c * <fraction>))` rules:
+ *   - vibrant brand colours (c ≈ 0.10–0.23) get a meaningfully tinted
+ *     sidebar / accent / muted scale → product chrome visibly changes per
+ *     pick
+ *   - low-chroma custom-hex picks (greys) fall back to the floor so they
+ *     don't render as pure white
+ *   - lightness + hue stay pinned to the original mock-up values, so the
+ *     overall "very pale background" feel is unchanged
+ */
+.theme-custom {
+  --brand-tint:         oklch(from var(--custom-product-brand-color) 0.965 max(0.018, calc(c * 0.20)) h);
+  --brand-tint-light:   oklch(from var(--custom-product-brand-color) 0.992 max(0.008, calc(c * 0.08)) h);
+  --brand-tint-subtle:  oklch(from var(--custom-product-brand-color) 0.93  max(0.028, calc(c * 0.30)) h);
+  --brand-color:        var(--custom-product-brand-color);
+  --brand-color-light:  oklch(from var(--custom-product-brand-color) 0.82 c h);
+  --brand-color-dark:   oklch(from var(--custom-product-brand-color) 0.48 c h);
+  --brand-color-deep:   oklch(from var(--custom-product-brand-color) 0.34 c h);
+  --ring:               var(--brand-color-dark);
+}
+
+.theme-custom:not(.dark) {
+  --sidebar:            var(--brand-tint);
+  --sidebar-accent:     oklch(from var(--custom-product-brand-color) 0.945 max(0.026, calc(c * 0.28)) h);
+  --sidebar-border:     oklch(from var(--custom-product-brand-color) 0.90  max(0.026, calc(c * 0.28)) h);
+  --secondary:          oklch(from var(--custom-product-brand-color) 0.95  max(0.012, calc(c * 0.14)) h);
+  --accent:             oklch(from var(--custom-product-brand-color) 0.925 max(0.016, calc(c * 0.18)) h);
+  --muted:              oklch(from var(--custom-product-brand-color) 0.945 max(0.008, calc(c * 0.10)) h);
+  --theme-color-chrome: color-mix(in oklch, var(--custom-product-brand-color) 10%, white);
+}
+
+.theme-custom.dark,
+.dark.theme-custom {
+  --ring:               var(--brand-color);
+  --background:         oklch(from var(--custom-product-brand-color) 0.20  max(0.008, calc(c * 0.10)) h);
+  --sidebar:            oklch(from var(--custom-product-brand-color) 0.245 max(0.015, calc(c * 0.18)) h);
+  --sidebar-accent:     oklch(from var(--custom-product-brand-color) 0.30  max(0.012, calc(c * 0.14)) h);
+  --sidebar-border:     oklch(from var(--custom-product-brand-color) 0.38  max(0.010, calc(c * 0.12)) h);
+  --secondary:          oklch(from var(--custom-product-brand-color) 0.31  max(0.04,  calc(c * 0.40)) h);
+  --muted:              oklch(from var(--custom-product-brand-color) 0.31  max(0.04,  calc(c * 0.40)) h);
+  --accent:             oklch(from var(--custom-product-brand-color) 0.33  max(0.06,  calc(c * 0.50)) h);
+  --theme-color-chrome: color-mix(in oklch, var(--custom-product-brand-color) 12%, black);
+}
+
 /* ==========================================================================
    HIGH CONTRAST MODE
    ──────────────────────────────────────────────────────────────────────────
@@ -1777,6 +1897,20 @@ html:is([data-contrast="high"], [data-contrast="windows"]) [data-slot="coach-mar
     100% { opacity: 1;   transform: scale(1)    rotate(0); }
   }
 
+  /* Radix Collapsible / Accordion — slide the children open/closed using the
+     `--radix-collapsible-content-height` CSS var that Radix sets on the
+     content element. Mirrors the shadcn accordion pattern (Tailwind v3
+     "accordion-down" / "accordion-up"); we keep our own name so it can be
+     reused by both Collapsible and Accordion primitives. */
+  @keyframes collapsible-down {
+    from { height: 0; }
+    to   { height: var(--radix-collapsible-content-height); }
+  }
+  @keyframes collapsible-up {
+    from { height: var(--radix-collapsible-content-height); }
+    to   { height: 0; }
+  }
+
   /* Ask Leo suggestion chips — staggered fade-in + lift on first render. */
   @keyframes leo-chip-in {
     0%   { opacity: 0; transform: translateY(8px) scale(0.96); }

package/template/app/layout.tsx

@@ -59,14 +59,50 @@ export default function RootLayout({
       <head>
         {/* Default until ThemeColorSync hydrates (brand + mode override client-side) */}
         <meta name="theme-color" content="#f6f3ff" />
-        {/* Adobe Fonts — preconnect + preload Ivy Presto · Kit ID: wuk5wqn */}
-        <link rel="preconnect" href="https://use.typekit.net" />
+        {/*
+         * Adobe Fonts — preconnect + preload Ivy Presto · Kit ID: wuk5wqn.
+         *
+         * Trust model & Subresource Integrity (SRI):
+         *  - Adobe Typekit serves *dynamically subsetted* CSS that hashes
+         *    differently per response, so SRI cannot be applied — the kit URL
+         *    is locked to a single Adobe-owned origin instead.
+         *  - `crossOrigin=""` (anonymous CORS) is set on both the preconnect
+         *    and the stylesheet so the browser uses one CORS-correct
+         *    connection for preconnect + preload + fetch, and so styles
+         *    cannot read first-party cookies or credentials.
+         *  - The same origins are pinned in `style-src` / `font-src` /
+         *    `connect-src` of the Content-Security-Policy declared in
+         *    `next.config.mjs`, which is what actually prevents arbitrary
+         *    third-party CSS/fonts from loading.
+         */}
+        <link rel="preconnect" href="https://use.typekit.net" crossOrigin="" />
         <link rel="preconnect" href="https://p.typekit.net" crossOrigin="" />
-        <link rel="preload" href="https://use.typekit.net/wuk5wqn.css" as="style" />
-        <link rel="stylesheet" href="https://use.typekit.net/wuk5wqn.css" />
+        <link
+          rel="preload"
+          href="https://use.typekit.net/wuk5wqn.css"
+          as="style"
+          crossOrigin=""
+        />
+        <link
+          rel="stylesheet"
+          href="https://use.typekit.net/wuk5wqn.css"
+          crossOrigin=""
+        />
       </head>
       <body className="bg-sidebar text-foreground font-sans">
-        {/* Font Awesome Pro Kit — subset via fontawesome-subset.manifest.json + fontawesome.com/kits (Icon Selection). */}
+        {/*
+         * Font Awesome Pro Kit — subset via fontawesome-subset.manifest.json +
+         * fontawesome.com/kits (Icon Selection).
+         *
+         * Trust model & SRI: the kit loader URL is content-versioned by
+         * fontawesome.com and rotates whenever the subset changes, so SRI
+         * cannot be pinned. We instead:
+         *  - Restrict the script to kit.fontawesome.com (and font/data fetch
+         *    to ka-f.fontawesome.com) via CSP `script-src` / `font-src` /
+         *    `connect-src` in `next.config.mjs`.
+         *  - Load with `crossOrigin="anonymous"` so the script runs with
+         *    CORS semantics and no credentials.
+         */}
         <Script
           src="https://kit.fontawesome.com/d9bd5774e0.js"
           crossOrigin="anonymous"