@exxatdesignux/ui 0.2.16 → 0.2.17

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`.
 
@@ -540,6 +541,7 @@ New pages **SHOULD** namespace keys and version JSON (`v: 1`) for future migrati
 | **§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 |
 
 ---
 
@@ -577,7 +579,8 @@ Copy and complete when implementing or reviewing:
 - [ ] **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: 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.*
+*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

@@ -10,17 +10,31 @@ import {
   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 navigations.
- * **Question hub** (`/question-bank`) and **Search** (`/find`, `/list`) stay full-width — no secondary rail.
+ * **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(() => {
@@ -37,7 +51,7 @@ export default function QuestionBankLayout({ children }: { children: React.React
     const isDedicatedSearchSurface =
       pathname === QUESTION_BANK_HUB_FIND_PATH || pathname === QUESTION_BANK_LIST_PATH
 
-    if (isDiscoveryHubRoot || isDedicatedSearchSurface) {
+    if (isDiscoveryHubRoot || isDedicatedSearchSurface || isQuestionBankFocusedFlow(pathname)) {
       closePanelRef.current({ mainSidebar: "leave" })
       return undefined
     }
@@ -46,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

@@ -187,7 +187,7 @@ html[data-text-size="large"] {
   --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; dark: subtle brand lift) */
+  /* 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));
@@ -533,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
    ──────────────────────────────────────────────────────────────────────────
@@ -1804,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"

package/template/components/app-sidebar.tsx

@@ -71,6 +71,7 @@ import { NavUser } from "@/components/nav-user"
 import { useSecondaryPanel } from "@/components/secondary-panel"
 import { ExxatProductLogo, ExxatProductMark } from "@/components/exxat-product-logo"
 import { motionHeaderEnter } from "@/lib/motion-ui"
+import { customProductBrandConfig, productBrandLabel } from "@/lib/product-brand"
 import {
   NAV_DOCUMENTS,
   NAV_DOCUMENTS_LABEL,
@@ -86,8 +87,6 @@ import {
   type NavSchool,
   type NavProgram,
 } from "@/lib/mock/navigation"
-import { QUESTION_BANK_ENTRY_PATH } from "@/lib/question-bank-nav"
-
 /** Path segment of a nav URL (strip `#fragment` for matching). */
 function navUrlPath(url: string): string {
   if (!url || url === "#") return ""
@@ -190,11 +189,16 @@ function isCollapsibleChildActive(
 }
 
 /**
- * “Selected” styling on a collapsible **parent** row — not the same as “a descendant route is open”.
- * When a child row is the current destination (e.g. Library on `/question-bank/library`), the parent
- * should stay visually neutral while the child carries `data-active`. Only highlight the parent when
- * the active child is the hub row whose `href` matches the parent (e.g. Question hub on `/question-bank`),
- * or when no child matches but the parent URL still matches (edge routes).
+ * “Selected” styling on a collapsible **parent** row in the **expanded** sidebar.
+ *
+ * Rule: when any descendant child is the current destination, the parent stays
+ * visually NEUTRAL — the active child carries `data-active` on its own. The
+ * parent is only highlighted when no child matches but the parent URL still
+ * matches (edge case: route that isn't represented in the sub-list).
+ *
+ * Note: this is for the expanded view only. The collapsed icon rail uses
+ * `iconRailActive = isAnyChildActive` because the parent icon is the only
+ * visible affordance there (see `CollapsibleNavItem`).
  */
 function isCollapsibleParentMenuButtonActive(
   pathname: string,
@@ -204,15 +208,11 @@ function isCollapsibleParentMenuButtonActive(
   const children = item.children
   if (!children?.length) return isNavActive(pathname, item.url, locationHash)
 
-  const activeChildren = children.filter(c =>
+  const anyChildActive = children.some(c =>
     isCollapsibleChildActive(pathname, item, c, locationHash),
   )
-  if (activeChildren.length === 0) {
-    return isNavActive(pathname, item.url, locationHash)
-  }
-  if (activeChildren.length !== 1) return false
-  const [child] = activeChildren
-  return navUrlPath(child.url) === navUrlPath(item.url)
+  if (anyChildActive) return false
+  return isNavActive(pathname, item.url, locationHash)
 }
 
 /** Accessible suffix for sidebar badges (badge is rendered outside the link node). */
@@ -296,8 +296,17 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
   const [flyoutOpen, setFlyoutOpen] = React.useState(false)
   const flyoutTitleId = React.useId()
   const iconRailCollapsed = state === "collapsed" && !isMobile
+  // In the icon rail the parent icon is the ONLY visible thing for this item
+  // (no sub-list, no labels) — so it must reflect "I'm somewhere inside this
+  // section" by lighting up on any descendant route (e.g. `/question-bank/library`),
+  // not only on the parent URL itself. In the expanded view we keep the
+  // parent neutral and let the active child row carry `data-active` (see
+  // `isCollapsibleParentMenuButtonActive`).
+  const iconRailActive = isAnyChildActive
   const triggerIcon =
-    parentMenuButtonActive && item.iconActive ? item.iconActive : item.icon
+    (iconRailCollapsed ? iconRailActive : parentMenuButtonActive) && item.iconActive
+      ? item.iconActive
+      : item.icon
 
   React.useEffect(() => {
     setOpen(isAnyChildActive)
@@ -323,14 +332,16 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
             <TooltipTrigger asChild>
               <PopoverTrigger asChild>
                 <SidebarMenuButton
-                  isActive={parentMenuButtonActive}
+                  isActive={iconRailActive}
+                  aria-current={iconRailActive ? "page" : undefined}
                   aria-haspopup="dialog"
                   aria-label={`${item.title} — open subpages`}
                 >
                   <span
+                    key={iconRailActive ? "active" : "idle"}
                     className={cn(
                       "size-4 shrink-0 flex items-center justify-center",
-                      parentMenuButtonActive &&
+                      iconRailActive &&
                         "[animation:sidebar-icon-pop_380ms_cubic-bezier(0.34,1.56,0.64,1)_both]",
                     )}
                     aria-hidden="true"
@@ -391,7 +402,10 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
       }}
       asChild
     >
-      <SidebarMenuItem>
+      {/* `group/collapsible` lets descendant utilities react to the
+          Radix `data-state` (e.g. chevron rotate, content slide). Radix's
+          asChild merges the data-state onto this `<SidebarMenuItem>`. */}
+      <SidebarMenuItem className="group/collapsible">
         <Tooltip>
           <TooltipTrigger asChild>
             <CollapsibleTrigger asChild>
@@ -409,7 +423,7 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
                 </span>
                 <span>{item.title}</span>
                 <i
-                  className="fa-light fa-chevron-right ml-auto text-xs text-current transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+                  className="fa-light fa-chevron-right ml-auto text-xs text-current transition-transform duration-200 ease-out group-data-[state=open]/collapsible:rotate-90 motion-reduce:transition-none"
                   aria-hidden="true"
                 />
               </SidebarMenuButton>
@@ -419,7 +433,11 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
             {item.title}
           </TooltipContent>
         </Tooltip>
-        <CollapsibleContent className="group-data-[collapsible=icon]:hidden">
+        {/* Slide the children open/closed using Radix's
+            `--radix-collapsible-content-height` CSS variable. `overflow-hidden`
+            is required so the height clip is visible during the animation.
+            Keyframes defined in `app/globals.css` (`collapsible-down/up`). */}
+        <CollapsibleContent className="overflow-hidden group-data-[collapsible=icon]:hidden data-[state=open]:[animation:collapsible-down_200ms_ease-out] data-[state=closed]:[animation:collapsible-up_200ms_ease-out] motion-reduce:animate-none">
           <SidebarMenuSub>
             {item.children.map(child => {
               const childActive = isCollapsibleChildActive(pathname, item, child, locationHash)
@@ -444,7 +462,7 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
 }
 
 function NavLinkItems({ items, pathname }: { items: NavLinkItem[]; pathname: string }) {
-  const { openPanel, closePanel } = useSecondaryPanel()
+  const { openPanel } = useSecondaryPanel()
   const locationHash = useLocationHash()
   return (
     <>
@@ -470,6 +488,12 @@ function NavLinkItems({ items, pathname }: { items: NavLinkItem[]; pathname: str
                     : undefined
                 }
                 onClick={e => {
+                  // Reopen the panel when the user clicks a panel-driving row
+                  // while ALREADY on its route — Next.js `<Link>` does not
+                  // navigate to the same URL, so without this the panel could
+                  // stay closed (e.g. after the user collapsed it manually).
+                  // On first click (different route), default navigation runs
+                  // and the route's `useAutoPanel` opens the panel itself.
                   if (
                     item.secondaryPanel &&
                     itemPath &&
@@ -477,11 +501,7 @@ function NavLinkItems({ items, pathname }: { items: NavLinkItem[]; pathname: str
                     !item.url.includes("#")
                   ) {
                     e.preventDefault()
-                    if (itemPath === QUESTION_BANK_ENTRY_PATH) {
-                      closePanel({ mainSidebar: "leave" })
-                    } else {
-                      openPanel(item.secondaryPanel)
-                    }
+                    openPanel(item.secondaryPanel)
                   }
                 }}
               >
@@ -782,14 +802,26 @@ function TeamSwitcher() {
 // ─────────────────────────────────────────────────────────────────────────────
 
 const PRODUCTS: { id: Product; label: string }[] = [
-  { id: "exxat-one",   label: "Exxat One"   },
-  { id: "exxat-prism", label: "Exxat Prism" },
+  { id: "exxat-one",        label: "Exxat One"        },
+  { id: "exxat-prism",      label: "Exxat Prism"      },
+  { id: "exxat-assessment", label: "Exxat Assessment" },
+  { id: "exxat-custom",     label: "Custom product"   },
 ]
 
 function ProductLogoButton() {
-  const { product, setProduct } = useProduct()
+  const { product, setProduct, customProductBrand, hiddenProductIds } = useProduct()
   const { state, isMobile } = useSidebar()
-  const current = PRODUCTS.find(p => p.id === product) ?? PRODUCTS[0]
+  const products = React.useMemo(
+    () => PRODUCTS.flatMap(p => {
+      if (hiddenProductIds.includes(p.id)) return []
+      if (p.id !== "exxat-custom") return [p]
+      return customProductBrand
+        ? [{ ...p, label: productBrandLabel(customProductBrandConfig(customProductBrand)) }]
+        : []
+    }),
+    [customProductBrand, hiddenProductIds],
+  )
+  const current = products.find(p => p.id === product) ?? products[0]
   const iconRail = state === "collapsed" && !isMobile
   const expandedOrMobile = state === "expanded" || isMobile
 
@@ -812,8 +844,10 @@ function ProductLogoButton() {
               suppressHydrationWarning
             >
               {iconRail ? (
+                // Match the school selector footprint in the icon rail; the
+                // inner mark cutout uses the rail surface instead of a white fill.
                 <span className="flex size-8 shrink-0 items-center justify-center">
-                  <ExxatProductMark product={current.id} className="size-7" />
+                  <ExxatProductMark product={current.id} className="size-8" cutoutColor="var(--sidebar)" />
                 </span>
               ) : (
                 <span className="flex min-h-0 min-w-0 flex-1 items-stretch gap-2">
@@ -824,7 +858,7 @@ function ProductLogoButton() {
                     <ExxatProductLogo
                       product={current.id}
                       variant="mutedSuffix"
-                      className="h-7 w-auto max-w-[min(100%,260px)] object-left object-contain"
+                      className="w-auto max-w-[min(100%,280px)] object-left object-contain"
                     />
                   </span>
                   <span
@@ -851,7 +885,7 @@ function ProductLogoButton() {
           Switch product
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        {PRODUCTS.map(p => (
+        {products.map(p => (
           <DropdownMenuItem
             key={p.id}
             onClick={() => setProduct(p.id)}
@@ -861,7 +895,7 @@ function ProductLogoButton() {
             <ExxatProductLogo
               product={p.id}
               variant="mutedSuffix"
-              className="h-7 w-auto shrink-0 max-w-[min(100%,200px)]"
+              className="w-auto shrink-0 max-w-[min(100%,260px)]"
             />
             {p.id === product && (
               <i className="fa-solid fa-check ml-auto text-brand text-xs" aria-hidden="true" />

package/template/components/ask-leo-sidebar.tsx

@@ -188,8 +188,6 @@ export function AskLeoSidebar() {
   const routeContext = React.useMemo(() => getAskLeoRouteContext(pathname), [pathname])
   const isThinking = threadMessages.some((m) => m.pending)
 
-  const pageTitle = pageContext?.title ?? routeContext.title
-  const pageDescription = pageContext?.description ?? routeContext.description
   const suggestions =
     pageContext?.suggestions && pageContext.suggestions.length > 0
       ? pageContext.suggestions