@exxatdesignux/ui 0.2.17 → 0.2.18

package/template/components/placements-table.tsx

@@ -4,7 +4,7 @@
  * PlacementsTable — placements hub composition on top of the generic
  * `DataTable`. Owns: placement-specific column defs, board column grouping,
  * KPI dashboards, the "open table properties" imperative handle, and the
- * lifecycle persistence wiring (via `useTableStateLifecycle`).
+ * Properties drawer + multi-view composition (table / list / board / …).
  *
  * NOTE: this is hub composition, NOT a parallel table primitive. Every hub
  * has its own `*-table.tsx` of the same shape (`team-table.tsx`,
@@ -57,12 +57,6 @@ import {
   DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
   type DataListDisplayOptions,
 } from "@/lib/data-list-display-options"
-import { useTableStateLifecycle } from "@/lib/table-state-lifecycle"
-import type { PlacementsLifecycleExtras } from "@/lib/data-list-persistence"
-
-/** Storage namespace for the placements hub. Keep `"data-list"` so existing
- *  user payloads in localStorage remain readable. */
-const PLACEMENTS_LIFECYCLE_NAMESPACE = "data-list"
 import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
 import { StatusBadge } from "@/components/placements-table-cells"
 import { columnsToFilterFields } from "@/components/placements-table-columns"
@@ -543,7 +537,7 @@ function PlacementFolderTile({
   conditionalRules?: ConditionalRule[]
   onClick: () => void
 }) {
-  const ruleBg = getConditionalRowBackground(row, conditionalRules)
+  const ruleBg = getConditionalRowBackground(row, conditionalRules, boardColumns)
   const showStudent = isBoardFieldActive("student", tab, hiddenColKeys, boardColumns)
   const showStatus = isBoardFieldActive("status", tab, hiddenColKeys, boardColumns)
   const showSite = isBoardFieldActive("site", tab, hiddenColKeys, boardColumns)
@@ -882,7 +876,7 @@ function PlacementFinderListRow({
   boardColumns: ColumnDef<Placement>[]
   conditionalRules?: ConditionalRule[]
 }) {
-  const ruleBg = getConditionalRowBackground(row, conditionalRules)
+  const ruleBg = getConditionalRowBackground(row, conditionalRules, boardColumns)
   const showStudent = isBoardFieldActive("student", tab, hiddenColKeys, boardColumns)
   const showSite = isBoardFieldActive("site", tab, hiddenColKeys, boardColumns)
   const name = showStudent ? row.student : `Placement ${row.id}`
@@ -1341,39 +1335,12 @@ export const PlacementsTable = React.forwardRef<PlacementsTableHandle, Placement
 
   const tableState = useTableState(tableData, columns, { key: "student", dir: "asc" }, paginationOverride)
 
-  const columnKeys = React.useMemo(() => new Set(columns.map(c => c.key)), [columns])
-
   // Stable "open properties drawer" callback ref — see top of this file.
   React.useEffect(() => {
     openDrawerRef.current = () => tableState.setSheetOpen(true)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [openDrawerRef, tableState.setSheetOpen])
 
-  // ── Lifecycle persistence ─────────────────────────────────────────────
-  // Centralised in `lib/table-state-lifecycle` — one hook wires both the
-  // load (layout effect) and the debounced save (effect) including all the
-  // table slices plus placements-specific extras. Hubs that don't want
-  // localStorage persistence simply don't call this hook.
-  useTableStateLifecycle<PlacementsLifecycleExtras>({
-    namespace: PLACEMENTS_LIFECYCLE_NAMESPACE,
-    tabId: lifecycleTabId,
-    tableState,
-    columnKeys,
-    extras: {
-      conditionalRules,
-      pagination,
-      paginationPage: safePage,
-      paginationPageSize,
-    },
-    onLoadExtras: e => {
-      if (!e) return
-      if (Array.isArray(e.conditionalRules)) setConditionalRules(e.conditionalRules as ConditionalRule[])
-      if (typeof e.pagination === "boolean") setPagination(e.pagination)
-      if (typeof e.paginationPage === "number") setPaginationPage(e.paginationPage)
-      if (typeof e.paginationPageSize === "number") setPaginationPageSize(e.paginationPageSize)
-    },
-  })
-
   function buildToolbarSlot(
     s: ReturnType<typeof useTableState<Placement>>,
   ): React.ReactNode {

package/template/components/product-switcher.tsx

@@ -64,10 +64,9 @@ export function ProductSwitcher() {
               suppressHydrationWarning
             >
               {iconRail ? (
-                // Collapsed icon-rail product mark must read as a peer of the
-                // school selector, without a white cutout patch on the rail.
+                // Collapsed icon-rail product mark — same frame as school avatar.
                 <span className="flex size-8 shrink-0 items-center justify-center">
-                  <ExxatProductMark product={current.id} className="size-8" cutoutColor="var(--sidebar)" />
+                  <ExxatProductMark product={current.id} className="size-7" />
                 </span>
               ) : (
                 <>

package/template/components/product-wordmark.tsx

@@ -16,9 +16,8 @@
  *   recolored with the brand's gradient / fill. The SVG geometry stays
  *   constant so existing layouts keep working.
  *
- * `variant="mutedSuffix"` (used by the product switcher / sidebar): in **dark**
- * mode only, the suffix tints to `--muted-foreground` so the wordmark recedes
- * into the rail. Light mode keeps the brand color for recognition.
+ * `variant="mutedSuffix"` (sidebar / switcher): prefix recedes in dark mode;
+ * suffix always uses `wordmarkColor` (Exxat pink) for brand recognition.
  */
 
 import * as React from "react"
@@ -50,7 +49,6 @@ export function ProductWordmark({
 }: ProductWordmarkProps) {
   const prefix = config.prefix ?? "Exxat"
   const { suffix, brandColor, wordmarkColor } = config
-  const mutedSuffix = variant === "mutedSuffix"
   const suffixColor = wordmarkColor ?? brandColor
 
   return (
@@ -100,14 +98,13 @@ export function ProductWordmark({
           // that read as a logo; pushing to 700/800 makes the letterforms
           // visually heavier than the brand asset.
           "ms-[0.18em] font-semibold tracking-[-0.03em]",
-          // mutedSuffix: dark mode recedes to muted; light mode keeps brand.
-          mutedSuffix && "dark:!text-[var(--muted-foreground)]",
         )}
         style={{
           // Ivy Presto Text from Adobe Fonts. Upright (NOT italic) — matches
           // the official Exxat wordmark. Fallback chain ends in `serif` so
           // FOUT still renders a serif that reads as a logo rather than Inter.
           fontFamily: "var(--font-heading), 'ivypresto-text', Georgia, serif",
+          // `wordmarkColor` (Exxat pink) in light and dark — never muted to grey.
           color: suffixColor,
         }}
       >
@@ -155,7 +152,7 @@ function useBrowserPaintReady() {
  * Fills:
  *  - Outer circle: `markGradient` if provided, else flat `brandColor`.
  *  - Inner shadow plate: `markShadow` (defaults to `brandColor`).
- *  - Cut-out "E" strokes: white by default; callers can override on tinted rails.
+ *  - Cut-out "E" strokes: always white in product chrome (sidebar / switcher).
  */
 export function ProductMark({ config, className, cutoutColor = "white" }: ProductMarkProps) {
   const ready = useBrowserPaintReady()

package/template/components/question-bank-hub-client.tsx

@@ -254,11 +254,8 @@ export function QuestionBankHubClient() {
           aria-label="Search and create questions"
           className="-mx-4 overflow-hidden px-4 py-6 md:-mx-6 md:px-6"
           style={{
-            background: [
-              "radial-gradient(ellipse 118% 70% at 50% 100%, oklch(from var(--brand-color) l c h / 0.11) 0%, transparent 60%)",
-              "linear-gradient(180deg, var(--key-metrics-flat-grad-top) 0%, var(--key-metrics-flat-grad-mid) 48%, var(--background) 100%)",
-            ].join(", "),
-            boxShadow: "0 18px 42px -26px color-mix(in oklch, var(--brand-color) 10%, transparent)",
+            background: "var(--key-metrics-flat-band-radial)",
+            boxShadow: "var(--key-metrics-flat-band-shadow)",
           }}
         >
           <div className="mx-auto flex w-full max-w-5xl flex-col gap-8 px-4 md:px-6">

package/template/components/question-bank-table.tsx

@@ -12,7 +12,6 @@ import type { DataListViewType } from "@/lib/data-list-view"
 import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
 import type { ColumnDef } from "@/components/data-table/types"
 import { useTableState } from "@/components/data-table/use-table-state"
-import { useTableStateLifecycle } from "@/lib/table-state-lifecycle"
 import { TablePropertiesDrawerButton } from "@/components/table-properties"
 import type { ConditionalRule, FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
 import { Button } from "@/components/ui/button"
@@ -656,7 +655,18 @@ export const QuestionBankTable = React.forwardRef<
     onItemsChange: React.Dispatch<React.SetStateAction<QuestionBankItem[]>>
   }
 >(function QuestionBankTable(
-  { items, navState, urlListSearch, searchLanding, landingFilters, view = "table", onViewChange, folders, onFoldersChange, onItemsChange },
+  {
+    items,
+    navState,
+    urlListSearch,
+    searchLanding,
+    landingFilters,
+    view = "table",
+    onViewChange,
+    folders,
+    onFoldersChange,
+    onItemsChange,
+  },
   ref,
 ) {
   const tableSourceItems = React.useMemo(() => {
@@ -718,28 +728,6 @@ export const QuestionBankTable = React.forwardRef<
     searchLanding ? undefined : urlListSearch,
   )
 
-  // Persist this hub's table lifecycle (sort / search / filters / column
-  // visibility / etc.) to localStorage. See `lib/table-state-lifecycle`.
-  // NOTE: tabId is `"main"` here — the question-bank folder scope is
-  // already URL-driven (`?scope=`, `?folderId=`), so we only persist
-  // table chrome, not navigation.
-  const lifecycleColumnKeys = React.useMemo(
-    () => new Set(columns.map(c => c.key)),
-    [columns],
-  )
-  useTableStateLifecycle({
-    namespace: "question-bank",
-    tabId: "main",
-    tableState,
-    columnKeys: lifecycleColumnKeys,
-    extras: { conditionalRules },
-    onLoadExtras: e => {
-      if (e && Array.isArray(e.conditionalRules)) {
-        setConditionalRules(e.conditionalRules as ConditionalRule[])
-      }
-    },
-  })
-
   const openNewFolderForColumn = React.useCallback((parentId: string | null) => {
     setNewFolderParentId(parentId)
     setCustomizingFolder(null)

package/template/components/sidebar-shell.tsx

@@ -3,7 +3,8 @@
 /**
  * SidebarShell — SidebarProvider with layout-aware widths.
  * Desktop expanded/collapsed is persisted in the `sidebar_state` cookie by `@exxatdesignux/ui`
- * `SidebarProvider` (read on mount + write on toggle).
+ * `SidebarProvider` (read on mount + write on toggle). `(app)/layout` passes
+ * `defaultOpen` from the same cookie on the server so SSR matches the first client paint.
  */
 
 import * as React from "react"

package/template/components/sites-table.tsx

@@ -10,7 +10,6 @@ import Link from "next/link"
 import type { SiteDirectoryRow } from "@/lib/mock/sites-directory"
 import { DataTable, DataTableToolbar } from "@/components/data-table"
 import { useTableState } from "@/components/data-table/use-table-state"
-import { useTableStateLifecycle } from "@/lib/table-state-lifecycle"
 import type { ColumnDef } from "@/components/data-table/types"
 import type { DataListViewType } from "@/lib/data-list-view"
 import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
@@ -194,25 +193,6 @@ export const SitesTable = React.forwardRef<
 
   const tableState = useTableState<SiteDirectoryRow>(sites, columns, { key: "name", dir: "asc" })
 
-  // Persist this hub's table lifecycle (sort / search / filters / column
-  // visibility / etc.) to localStorage. See `lib/table-state-lifecycle`.
-  const lifecycleColumnKeys = React.useMemo(
-    () => new Set(columns.map(c => c.key)),
-    [columns],
-  )
-  useTableStateLifecycle({
-    namespace: "sites",
-    tabId: "main",
-    tableState,
-    columnKeys: lifecycleColumnKeys,
-    extras: { conditionalRules },
-    onLoadExtras: e => {
-      if (e && Array.isArray(e.conditionalRules)) {
-        setConditionalRules(e.conditionalRules as ConditionalRule[])
-      }
-    },
-  })
-
   React.useImperativeHandle(
     ref,
     () => ({

package/template/components/table-properties/drawer-button.tsx

@@ -151,6 +151,24 @@ export function TablePropertiesDrawerButton({
     sortKey,
   } = state
 
+  // Sheet is portaled; keep latest handlers so sort/filter/conditional edits are not lost.
+  const stateRef = React.useRef(state)
+  stateRef.current = state
+  const ruleHandlersRef = React.useRef({
+    onAddConditionalRule,
+    onRemoveConditionalRule,
+    onUpdateConditionalRule,
+    onDisplayOptionsChange,
+    onPaginationChange,
+  })
+  ruleHandlersRef.current = {
+    onAddConditionalRule,
+    onRemoveConditionalRule,
+    onUpdateConditionalRule,
+    onDisplayOptionsChange,
+    onPaginationChange,
+  }
+
   return (
     <>
       {extraActions}
@@ -185,42 +203,42 @@ export function TablePropertiesDrawerButton({
         rowHeight={rowHeight}
         onRowHeightChange={setRowHeight}
         pagination={pagination}
-        onPaginationChange={onPaginationChange ?? (() => {})}
+        onPaginationChange={v => ruleHandlersRef.current.onPaginationChange?.(v)}
         activeFilters={activeFilters}
-        onAddFilter={fieldKey => addFilter(fieldKey, true)}
-        onUpdateFilter={updateFilter}
-        onRemoveFilter={removeFilter}
-        getFilterConnector={getConnector}
-        onToggleFilterConnector={toggleConnector}
+        onAddFilter={fieldKey => stateRef.current.addFilter(fieldKey, true)}
+        onUpdateFilter={(id, patch) => stateRef.current.updateFilter(id, patch)}
+        onRemoveFilter={id => stateRef.current.removeFilter(id)}
+        getFilterConnector={leftId => stateRef.current.getConnector(leftId)}
+        onToggleFilterConnector={leftId => stateRef.current.toggleConnector(leftId)}
         filterBarVisible={filterBarVisible}
-        onFilterBarVisibleChange={setFilterBarVisible}
+        onFilterBarVisibleChange={v => stateRef.current.setFilterBarVisible(v)}
         drawerExpandedFilters={drawerExpandedFilters}
-        onDrawerExpandedFiltersChange={setDrawerExpandedFilters}
+        onDrawerExpandedFiltersChange={stateRef.current.setDrawerExpandedFilters}
         totalRows={totalRows}
         filteredRows={rows.length}
         sortRules={sortRules}
-        onSortRulesChange={setSortRules}
-        onAddSortRule={addSortRule}
-        onRemoveSortRule={removeSortRule}
-        onToggleSortDir={toggleSortDir}
+        onSortRulesChange={rules => stateRef.current.setSortRules(rules)}
+        onAddSortRule={fieldKey => stateRef.current.addSortRule(fieldKey)}
+        onRemoveSortRule={id => stateRef.current.removeSortRule(id)}
+        onToggleSortDir={id => stateRef.current.toggleSortDir(id)}
         colOrder={colOrder}
-        onColOrderChange={setColOrder}
+        onColOrderChange={order => stateRef.current.setColOrder(order)}
         hiddenCols={hiddenCols}
-        onToggleColVisibility={toggleColVisibility}
-        onMoveCol={moveCol}
+        onToggleColVisibility={key => stateRef.current.toggleColVisibility(key)}
+        onMoveCol={(key, dir) => stateRef.current.moveCol(key, dir)}
         groupBy={groupBy}
-        onGroupByChange={setGroupBy}
+        onGroupByChange={key => stateRef.current.setGroupBy(key)}
         primarySortKey={sortKey}
         conditionalRules={conditionalRules}
-        onAddConditionalRule={onAddConditionalRule}
-        onRemoveConditionalRule={onRemoveConditionalRule}
-        onUpdateConditionalRule={onUpdateConditionalRule}
+        onAddConditionalRule={rule => ruleHandlersRef.current.onAddConditionalRule(rule)}
+        onRemoveConditionalRule={id => ruleHandlersRef.current.onRemoveConditionalRule(id)}
+        onUpdateConditionalRule={(id, patch) => ruleHandlersRef.current.onUpdateConditionalRule(id, patch)}
         filterFields={filterFields}
         lifecycleTabLabel={lifecycleTabLabel}
         fieldDefinitions={fieldDefinitions}
         resolveColumnLabel={resolveColumnLabel}
         displayOptions={displayOptions}
-        onDisplayOptionsChange={onDisplayOptionsChange}
+        onDisplayOptionsChange={patch => ruleHandlersRef.current.onDisplayOptionsChange(patch)}
         currentView={currentView}
         onViewChange={onViewChange}
         boardGroupByColumnOptions={boardGroupByColumnOptions}

package/template/components/table-properties/drawer.tsx

@@ -117,6 +117,9 @@ export interface TablePropertiesDrawerProps {
 
 type SheetPanel = "main" | "table-display" | "filter" | "sort" | "group" | "columns" | "conditional-rules"
 
+/** Properties sheet uses `z-[80]`; default portaled menus are `z-50` and sit underneath. */
+const PROPERTIES_SHEET_PORTAL_Z = "z-[90]"
+
 export function TablePropertiesDrawer({
   open,
   onOpenChange,
@@ -243,7 +246,7 @@ export function TablePropertiesDrawer({
       : "—"
 
   return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
+    <Sheet open={open} onOpenChange={onOpenChange} modal={false}>
       <SheetContent
         side="right"
         showCloseButton={false}
@@ -462,7 +465,7 @@ export function TablePropertiesDrawer({
                         >
                           <SelectValue />
                         </SelectTrigger>
-                        <SelectContent align="end">
+                        <SelectContent align="end" className={PROPERTIES_SHEET_PORTAL_Z}>
                           {boardGroupByColumnOptions.map(o => (
                             <SelectItem key={o.key} value={o.key}>
                               {o.label}
@@ -533,7 +536,7 @@ export function TablePropertiesDrawer({
                             <SelectTrigger size="sm" className="w-[6.5rem] shrink-0" id="board-line-count" aria-label="Line count">
                               <SelectValue />
                             </SelectTrigger>
-                            <SelectContent align="end">
+                            <SelectContent align="end" className={PROPERTIES_SHEET_PORTAL_Z}>
                               <SelectItem value="1">1 line</SelectItem>
                               <SelectItem value="2">2 lines</SelectItem>
                               <SelectItem value="3">3 lines</SelectItem>
@@ -659,7 +662,7 @@ export function TablePropertiesDrawer({
                         {[
                           { icon: "fa-circle-1", text: "Click \"Add filter\" below" },
                           { icon: "fa-circle-2", text: "Choose a field to filter by" },
-                          { icon: "fa-circle-3", text: "Pick a condition and value" },
+                          { icon: "fa-circle-3", text: "Pick at least one value — the grid updates immediately" },
                         ].map(step => (
                           <div key={step.icon} className="flex items-center gap-2 text-xs text-muted-foreground">
                             <i className={`fa-light ${step.icon} text-muted-foreground text-xs shrink-0`} aria-hidden="true" />
@@ -726,7 +729,7 @@ export function TablePropertiesDrawer({
 
                   {/* Add filter + Remove all */}
                   <div className="flex items-center gap-2 pt-2">
-                    <DropdownMenu>
+                    <DropdownMenu modal={false}>
                       <DropdownMenuTrigger asChild>
                         <Button
                           type="button"
@@ -737,11 +740,11 @@ export function TablePropertiesDrawer({
                           Add filter
                         </Button>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start">
+                      <DropdownMenuContent align="start" className={PROPERTIES_SHEET_PORTAL_Z}>
                         <DropdownMenuLabel className="text-xs">Filter by field</DropdownMenuLabel>
                         <DropdownMenuSeparator />
                         {filterFields.map(f => (
-                          <DropdownMenuItem key={f.key} onClick={() => onAddFilter(f.key)}>
+                          <DropdownMenuItem key={f.key} onSelect={() => onAddFilter(f.key)}>
                             <i className={`fa-light ${f.icon}`} aria-hidden="true" />
                             {f.label}
                           </DropdownMenuItem>
@@ -833,7 +836,7 @@ export function TablePropertiesDrawer({
 
                   {/* Add sort + Remove all */}
                   <div className="flex items-center gap-2 pt-2">
-                    <DropdownMenu>
+                    <DropdownMenu modal={false}>
                       <DropdownMenuTrigger asChild>
                         <Button
                           type="button"
@@ -844,11 +847,11 @@ export function TablePropertiesDrawer({
                           Add sort
                         </Button>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start">
+                      <DropdownMenuContent align="start" className={PROPERTIES_SHEET_PORTAL_Z}>
                         <DropdownMenuLabel className="text-xs">Sort by field</DropdownMenuLabel>
                         <DropdownMenuSeparator />
                         {sortFieldList.filter(f => !sortRules.some(r => r.fieldKey === f.key)).map(col => (
-                          <DropdownMenuItem key={col.key} onClick={() => onAddSortRule(col.key)}>
+                          <DropdownMenuItem key={col.key} onSelect={() => onAddSortRule(col.key)}>
                             <i className="fa-light fa-arrow-up-arrow-down text-xs" aria-hidden="true" />
                             {col.label}
                           </DropdownMenuItem>
@@ -1052,7 +1055,7 @@ function ConditionalRulesPanel({
       )}
 
       <div className="flex items-center gap-2 pt-2">
-        <DropdownMenu>
+        <DropdownMenu modal={false}>
           <DropdownMenuTrigger asChild>
             <Button
               type="button"
@@ -1063,13 +1066,13 @@ function ConditionalRulesPanel({
               Add rule
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
+          <DropdownMenuContent align="start" className={PROPERTIES_SHEET_PORTAL_Z}>
             <DropdownMenuLabel className="text-xs">Rule for column</DropdownMenuLabel>
             <DropdownMenuSeparator />
             {filterFields.map(f => (
               <DropdownMenuItem
                 key={f.key}
-                onClick={() => onAdd({
+                onSelect={() => onAdd({
                   fieldKey: f.key,
                   operator: f.operators[0],
                   values: [],

package/template/components/team-table.tsx

@@ -38,7 +38,6 @@ import type { DataListViewType } from "@/lib/data-list-view"
 import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
 import type { ColumnDef } from "@/components/data-table/types"
 import { useTableState } from "@/components/data-table/use-table-state"
-import { useTableStateLifecycle } from "@/lib/table-state-lifecycle"
 import { TablePropertiesDrawerButton } from "@/components/table-properties"
 import type { ConditionalRule, FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
 import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
@@ -402,26 +401,6 @@ export const TeamTable = React.forwardRef<
 
   const tableState = useTableState(members, columns, { key: "name", dir: "asc" })
 
-  // Persist this hub's table lifecycle (sort / search / filters / column
-  // visibility / etc.) to localStorage. See `lib/table-state-lifecycle` for
-  // the centralised hook; pass `extras` for any non-table state.
-  const lifecycleColumnKeys = React.useMemo(
-    () => new Set(columns.map(c => c.key)),
-    [columns],
-  )
-  useTableStateLifecycle({
-    namespace: "team",
-    tabId: "main",
-    tableState,
-    columnKeys: lifecycleColumnKeys,
-    extras: { conditionalRules },
-    onLoadExtras: e => {
-      if (e && Array.isArray(e.conditionalRules)) {
-        setConditionalRules(e.conditionalRules as ConditionalRule[])
-      }
-    },
-  })
-
   const dashboardKpi = React.useMemo(
     () => ({
       metrics: teamKpiMetrics(tableState.rows),

package/template/components/templates/list-page.tsx

@@ -47,7 +47,7 @@ import {
   Shortcut,
 } from "@/components/ui/dropdown-menu"
 import type { DataListViewType } from "@/lib/data-list-view"
-import { DATA_LIST_VIEW_TILES } from "@/lib/data-list-view"
+import { DATA_LIST_VIEW_TILES, dataListViewAddShortcut } from "@/lib/data-list-view"
 import {
   createListPageEditViewHandler,
   type OpenTablePropertiesHandle,
@@ -273,13 +273,16 @@ export function ListPageTemplate({
 
   return (
     <>
-      {!hideViewsToolbar && VIEW_TYPES.slice(0, 9).map((v, i) => (
-        <Shortcut
-          key={v.type}
-          keys={`⌘⇧${i + 1}`}
-          onInvoke={() => addView(v.type)}
-        />
-      ))}
+      {!hideViewsToolbar && VIEW_TYPES.slice(0, 9).map((v, i) => {
+        const keys = dataListViewAddShortcut(i)
+        return keys ? (
+          <Shortcut
+            key={v.type}
+            keys={keys}
+            onInvoke={() => addView(v.type)}
+          />
+        ) : null
+      })}
       {activeTab && !hideViewsToolbar && (
         <>
           <Shortcut keys="F2" onInvoke={() => openRename(activeTab)} />
@@ -480,7 +483,7 @@ export function ListPageTemplate({
               {VIEW_TYPES.map((v, i) => (
                 <DropdownMenuItem
                   key={v.type}
-                  shortcut={i < 9 ? `⌘⇧${i + 1}` : undefined}
+                  shortcut={dataListViewAddShortcut(i)}
                   onSelect={() => addView(v.type)}
                 >
                   <i className={`fa-light ${v.icon}`} aria-hidden="true" />

package/template/components/templates/nested-secondary-panel-shell.tsx

@@ -15,7 +15,7 @@ export interface NestedSecondaryPanelShellProps {
 
 /**
  * Shared chrome for a nested hub rail — full width vs icon rail.
- * Fill uses `--secondary-panel-bg` (soft brand wash on `--background`).
+ * Fill uses `--secondary-panel-bg` — one step lighter than `--sidebar` (elevation 1).
  */
 export function NestedSecondaryPanelShell({
   open,
@@ -40,7 +40,7 @@ export function NestedSecondaryPanelShell({
               // 2rem on mobile where the panel scrolls inline and we leave
               // a little more breathing room). No upper cap so tall screens
               // get a fully-extended rail.
-              "shrink-0 m-2 mx-2 rounded-xl ring-1 ring-border shadow-sm relative md:sticky md:top-2 bg-[var(--secondary-panel-bg)]",
+              "shrink-0 m-2 mx-2 rounded-xl ring-1 ring-sidebar-border shadow-sm relative md:sticky md:top-2 bg-[var(--secondary-panel-bg)]",
               compact
                 ? "w-12 min-w-12 max-w-12 h-[calc(100svh-2rem)] md:h-[calc(100svh-1rem)]"
                 : "w-64 min-w-64 max-w-64 h-[calc(100svh-2rem)] md:h-[calc(100svh-1rem)]",

package/template/contexts/product-context.tsx

@@ -10,7 +10,26 @@
 
 import * as React from "react"
 import { useAppStore, type Product } from "@/stores/app-store"
-import { brandForProduct } from "@/lib/product-brand"
+import {
+  brandForProduct,
+  EXXAT_ASSESSMENT_BRAND,
+  EXXAT_ONE_BRAND,
+  EXXAT_PRISM_BRAND,
+} from "@/lib/product-brand"
+
+const DEFAULT_PRODUCT_ACCENT: Record<Product, string> = {
+  "exxat-one": EXXAT_ONE_BRAND.brandColor,
+  "exxat-prism": EXXAT_PRISM_BRAND.brandColor,
+  "exxat-assessment": EXXAT_ASSESSMENT_BRAND.brandColor,
+  "exxat-custom": "",
+}
+
+function accentOverrideActive(product: Product, override: string | undefined): boolean {
+  if (!override?.trim()) return false
+  const defaultAccent = DEFAULT_PRODUCT_ACCENT[product]?.trim()
+  if (!defaultAccent) return true
+  return override.trim().toLowerCase() !== defaultAccent.toLowerCase()
+}
 
 export type { Product }
 
@@ -62,7 +81,7 @@ export function ProductProvider({ children }: { children: React.ReactNode }) {
     // / theme-assessment` classes (with bespoke hue formulas in
     // `globals.css`) are still used for the **default** look of each
     // built-in.
-    const hasAccentOverride = Boolean(productBrandColors[product])
+    const hasAccentOverride = accentOverrideActive(product, productBrandColors[product])
     let themeClass: "theme-one" | "theme-prism" | "theme-assessment" | "theme-custom"
     if (hasAccentOverride) {
       themeClass = "theme-custom"

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

@@ -18,6 +18,8 @@ This document describes how list pages combine **views**, **toolbar** behavior,
 | **Team page (primary template)** | `TeamClient` = `ListPageTemplate` + `KeyMetrics` + `TeamPageHeader` + `TeamTable` (same composition as `DataListClient`) | `components/team-client.tsx`, `lib/mock/team-kpi.ts` |
 | **Team roster** | `TeamTable` — `DataTable` + `useTableState` + `TablePropertiesDrawer`; list/board/dashboard read **`tableState.rows`** | `components/team-table.tsx` |
 | **Dashboard view (list tab)** | **`KeyMetrics`** (`variant="flat"` or `"card"`) — same KPI system as the template metrics strip; **do not** add ad-hoc `Card` grids for entity summaries | `TeamTable` dashboard branch, `lib/mock/team-kpi.ts` |
+| **List hub metrics strip** | **`KeyMetrics variant="flat"`** — transparent cells, OKLCH brand glow only, border hairlines (**no** grey panel) | **`docs/kpi-flat-band-pattern.md`**, Placements / Team / Question bank clients |
+| **Secondary panel chrome** | **`--secondary-panel-bg`** on **`NestedSecondaryPanelShell`** (lighter than sidebar, follows active product) | **`docs/shell-surface-elevation-pattern.md`**, Question bank |
 | **Export** | `ExportDrawer` | `ListPageTemplate` export props; `DataListClient` |
 | **View body layout** (gutter + centered max-width for folder / icon / panel-style content) | **`ListPageViewFrame`** (`components/data-views/list-page-view-frame.tsx`, re-exported from `components/data-views`) | **`FolderGridView`** (uses the frame); **`QuestionBankOsFolderView`** — see **`AGENTS.md` §4.5** |