@exxatdesignux/ui 0.5.2 → 0.5.4

package/src/index.ts

@@ -46,6 +46,7 @@ export {
 export * from "./lib/list-page-table-properties"
 export * from "./lib/data-list-view"
 export * from "./lib/data-list-view-registry"
+export * from "./lib/nav-active"
 export * from "./lib/data-list-view-surface"
 export * from "./lib/data-list-display-options"
 
@@ -68,7 +69,6 @@ export * from "./components/ui/context-menu"
 export * from "./components/ui/date-picker-field"
 export * from "./components/ui/dialog"
 export * from "./components/ui/drag-handle-grip"
-export * from "./components/ui/drawer"
 export * from "./components/ui/dropdown-menu"
 export * from "./components/ui/export-drawer"
 export * from "./components/ui/hover-card"

package/src/lib/data-list-view-registry.ts

@@ -6,6 +6,7 @@
  * `getDataListViewRenderKind` + `ListPageConnectedViewBody` (never a dashboard fallback).
  *
  * @see `docs/data-views-pattern.md` — "View registry and connected bodies"
+ * @see `.cursor/rules/exxat-hub-supported-views.mdc` — default hubs use **`FULL_HUB_SUPPORTED_VIEWS`** (seven views)
  */
 
 import {
@@ -47,6 +48,36 @@ const BY_VALUE = new Map<DataListViewType, DataListViewDefinition>(
 
 export const DATA_LIST_VIEW_REGISTRY: readonly DataListViewDefinition[] = DEFINITIONS
 
+/**
+ * Default view allowlist for **primary list hubs** (Placements / Team / Students-style pages).
+ * Pair with `ListPageTemplate` + `HubTable` when the hub implements table, list, board,
+ * and dashboard renderers. Omit `supportedViewTypes` on both components to use this default.
+ */
+export const PRIMARY_HUB_SUPPORTED_VIEWS = [
+  "table",
+  "list",
+  "board",
+  "dashboard",
+] as const satisfies readonly DataListViewType[]
+
+/**
+ * Default allowlist for **list-page hubs** in this design system (Library / Column types /
+ * Tokens, etc.). Matches the All questions hub: table, list, board, dashboard, folder,
+ * panel, and tree-panel. Pair with renderers for each kind on `HubTable` + `ListPageTemplate`.
+ */
+export const FULL_HUB_SUPPORTED_VIEWS = [
+  "table",
+  "list",
+  "board",
+  "dashboard",
+  "folder",
+  "panel",
+  "tree-panel",
+] as const satisfies readonly DataListViewType[]
+
+/** Every registered view type (includes folder, panel, calendar, tree-panel). */
+export const ALL_DATA_LIST_VIEW_TYPES = DATA_LIST_VIEW_REGISTRY.map(d => d.value)
+
 export function dataListViewDefinition(view: DataListViewType): DataListViewDefinition {
   const def = BY_VALUE.get(view)
   if (!def) {

package/src/lib/nav-active.ts

@@ -0,0 +1,162 @@
+/**
+ * Sidebar / secondary-nav active-state helpers.
+ *
+ * Only one nav target should be "selected" at a time. Prefix matching
+ * (`/dashboard` active on `/dashboard/students`) is correct only when no
+ * more-specific nav href also matches the current pathname.
+ */
+
+export function normalizePathname(pathname: string): string {
+  if (pathname.length > 1 && pathname.endsWith("/")) return pathname.slice(0, -1)
+  return pathname
+}
+
+/** Path segment before `#` (if any). */
+export function navUrlPath(url: string): string {
+  const hash = url.indexOf("#")
+  return hash >= 0 ? url.slice(0, hash) : url
+}
+
+/** Hash fragment after `#`, or `null` when the href has no fragment. */
+export function navUrlFragment(url: string): string | null {
+  const i = url.indexOf("#")
+  return i >= 0 ? url.slice(i + 1) : null
+}
+
+export function normalizedLocationHash(locationHash: string): string {
+  if (!locationHash) return ""
+  return locationHash.startsWith("#") ? locationHash.slice(1) : locationHash
+}
+
+/** Path → hash fragments claimed by *another* nav item at the same path. */
+export function buildNavHashClaims(
+  urls: readonly string[],
+): ReadonlyMap<string, ReadonlySet<string>> {
+  const map = new Map<string, Set<string>>()
+  for (const url of urls) {
+    const p = navUrlPath(url)
+    const f = navUrlFragment(url)
+    if (!p || f === null) continue
+    let set = map.get(p)
+    if (!set) {
+      set = new Set<string>()
+      map.set(p, set)
+    }
+    set.add(f)
+  }
+  return map
+}
+
+function navHasMoreSpecificHashMatch(
+  pathname: string,
+  locationHash: string,
+  hashClaimsByPath: ReadonlyMap<string, ReadonlySet<string>>,
+): boolean {
+  const claims = hashClaimsByPath.get(pathname)
+  if (!claims) return false
+  const h = normalizedLocationHash(locationHash)
+  if (h === "") return false
+  return claims.has(h)
+}
+
+function pathnameMatchesNavPath(
+  pathname: string,
+  pathOnly: string,
+  locationHash: string,
+  hashClaimsByPath: ReadonlyMap<string, ReadonlySet<string>>,
+): boolean {
+  const norm = normalizePathname(pathname)
+  const h = normalizedLocationHash(locationHash)
+
+  if (pathOnly === "/") {
+    if (norm !== "/" || h !== "") return false
+    return !navHasMoreSpecificHashMatch("/", locationHash, hashClaimsByPath)
+  }
+
+  if (norm === pathOnly) {
+    return !navHasMoreSpecificHashMatch(pathOnly, locationHash, hashClaimsByPath)
+  }
+
+  if (pathOnly === "/library") {
+    return norm.startsWith("/library/")
+  }
+  if (pathOnly.startsWith("/library/")) {
+    return norm === pathOnly
+  }
+
+  return norm.startsWith(`${pathOnly}/`)
+}
+
+/**
+ * Longest matching nav path for `pathname` among `candidateUrls` (path + prefix rules).
+ * Returns the winning href string, or `null`.
+ */
+export function resolveActiveNavHref(
+  pathname: string,
+  candidateUrls: readonly string[],
+  options?: {
+    locationHash?: string
+    hashClaimsByPath?: ReadonlyMap<string, ReadonlySet<string>>
+  },
+): string | null {
+  const norm = normalizePathname(pathname)
+  const hashClaims = options?.hashClaimsByPath ?? buildNavHashClaims(candidateUrls)
+  const locationHash = options?.locationHash ?? ""
+
+  let bestHref: string | null = null
+  let bestLen = -1
+
+  for (const url of candidateUrls) {
+    const pathOnly = navUrlPath(url)
+    const frag = navUrlFragment(url)
+    if (!pathOnly || pathOnly === "#") continue
+
+    let matches = false
+    if (frag !== null) {
+      const h = normalizedLocationHash(locationHash)
+      if (pathOnly === "/") matches = norm === "/" && h === frag
+      else if (pathOnly === "/library") matches = norm.startsWith("/library/") && h === frag
+      else if (pathOnly.startsWith("/library/")) matches = norm === pathOnly && h === frag
+      else matches = norm === pathOnly && h === frag
+    } else {
+      matches = pathnameMatchesNavPath(norm, pathOnly, locationHash, hashClaims)
+    }
+
+    if (matches && pathOnly.length > bestLen) {
+      bestHref = url
+      bestLen = pathOnly.length
+    }
+  }
+
+  return bestHref
+}
+
+/** True when `url` is the single best match for `pathname` among all nav hrefs. */
+export function isNavHrefActive(
+  pathname: string,
+  url: string,
+  allNavUrls: readonly string[],
+  options?: {
+    locationHash?: string
+    hashClaimsByPath?: ReadonlyMap<string, ReadonlySet<string>>
+  },
+): boolean {
+  const active = resolveActiveNavHref(pathname, allNavUrls, options)
+  if (!active) return false
+  return navUrlPath(active) === navUrlPath(url) && navUrlFragment(active) === navUrlFragment(url)
+}
+
+/** Collect every `url` from a nav tree (primary rows + children). */
+export function collectNavUrls(
+  items: ReadonlyArray<{ url?: string; children?: ReadonlyArray<{ url?: string; children?: unknown }> }>,
+): string[] {
+  const out: string[] = []
+  const walk = (list: ReadonlyArray<{ url?: string; children?: ReadonlyArray<{ url?: string; children?: unknown }> }>) => {
+    for (const it of list) {
+      if (typeof it.url === "string" && it.url.length > 0 && it.url !== "#") out.push(it.url)
+      if (Array.isArray(it.children)) walk(it.children)
+    }
+  }
+  walk(items)
+  return out
+}

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

@@ -112,7 +112,8 @@ ListPageTemplate
 ```
 
 **Reference implementations:**
-- `components/columns-showcase.tsx` + `components/columns-client.tsx` — smallest single-view hub (start here)
+- `components/library-table.tsx` + `library-client.tsx` — canonical seven-view hub (start here)
+- `components/columns-showcase.tsx` — cell catalog via `LibraryTable` (custom `columnDefs`, same Add view as Library)
 - `components/tokens-themes-client.tsx` + `components/tokens-secondary-nav.tsx` — hub with secondary panel + URL-driven scope + built-in pagination chrome
 - `components/library-table.tsx` + `components/library-hub-client.tsx` — full multi-view hub (table, board, dashboard)
 

package/template/.cursor/rules/exxat-accessibility.mdc

@@ -17,7 +17,7 @@ alwaysApply: true
 4. **Touch targets (2.5.8):** **≥ 24×24 CSS px** or **24px** spacing — **`min-h-6 min-w-6` / `size-6`** for icon-only; avoid **`size-4`** as sole target.
 5. **Contrast:** normal text **≥ 4.5:1**; UI / focus **≥ 3:1** where required; muted on tinted surfaces use correct surface tokens.
 6. **Minimum text size:** visible product copy **≥ 11px** — **`text-xs`** or larger (**`AGENTS.md` §8.3**, **`app/globals.css`** `--text-xs`).
-7. **Dialogs / sheets / drawers:** must have a **Title** (`DialogTitle` / `SheetTitle` / `DrawerTitle`); **`sr-only`** if hidden.
+7. **Dialogs / sheets:** must have a **Title** (`DialogTitle` / `SheetTitle`); **`sr-only`** if hidden.
 8. **Format hints persistent, not placeholders (SC 3.3.2, 1.3.1).** Fields with required formats — **date, time, phone, currency, GPA, IDs, URLs, unit-bearing numbers** — MUST render the format via **`FormDescription`** (or equivalent `aria-describedby` helper text). Placeholders disappear on focus and **MUST NOT** be the sole carrier. Prefer picker primitives (e.g. `DatePickerField`) over free-text where available.
 9. **Every icon that communicates information MUST have a text alternative** — not just icon-only buttons. Three cases (SC 1.1.1, 3.3.2, 2.4.6):
 

package/template/AGENTS.md

@@ -81,7 +81,7 @@ If two documents conflict, prefer the **more specific** rule for the file type,
 
 **MUST:** If the main surface is a **`DataTable`** (or equivalent data grid), wrap it in **`ListPageTemplate`** so the **views toolbar** exists (tabs, add view, per-tab settings). Do **not** place `DataTable` only under `PageHeader` without the tab shell.
 
-**Reference implementations:** `components/library-hub-client.tsx` (full hub), `components/columns-showcase.tsx` (single-view catalog), `components/tokens-themes-client.tsx` (hub + secondary panel).
+**Reference implementations:** `components/library-client.tsx` + `components/library-table.tsx` (canonical seven-view hub), `components/columns-showcase.tsx` (cell catalog via `LibraryTable`), `components/tokens-themes-client.tsx` + `components/tokens-hub-auxiliary-views.tsx`.
 
 **Rationale:** Consistent navigation, saved views, per-tab view type (table / list / board / dashboard), export at template level.
 
@@ -99,6 +99,20 @@ If two documents conflict, prefer the **more specific** rule for the file type,
 
 **Details:** `docs/data-views-pattern.md` (mock data, connected views, dashboard view).
 
+### 4.1.1 Add view parity (`supportedViewTypes`)
+
+**MUST:** Every **`ListPageTemplate`** hub that mounts **`HubTable`** uses the same **seven** Add view options as Library (All questions) unless a narrower list is **documented** in `lib/<entity>-supported-views.ts`:
+
+- Registry constant: **`FULL_HUB_SUPPORTED_VIEWS`** (`@/lib/data-list-view-registry` or `@/lib/full-hub-supported-views.ts`).
+- Pass the **same** allowlist to **`ListPageTemplate`** and **`HubTable`** (or omit on both for the default).
+- Implement a **real renderer** for each allowed view (list = **`ListPageBoardCard`** via `renderListRow` — copy **`library-table.tsx`**).
+- **`LibraryItem`** catalogs (Column types): use **`LibraryTable`** with `columnDefs` + `folders` — do not trim to four views or placeholder list rows.
+- **Tokens:** **`tokens-hub-auxiliary-views.tsx`** + **`FULL_HUB_SUPPORTED_VIEWS`**.
+
+**MUST NOT:** `supportedViewTypes={["table"]}`, bare two-line `renderListRow`, or `PRIMARY_HUB_SUPPORTED_VIEWS` without documented product exception.
+
+**Binding rule:** `.cursor/rules/exxat-hub-supported-views.mdc`. **Pattern doc:** `docs/hub-supported-views-pattern.md`.
+
 ### 4.2 `TablePropertiesDrawer` and the active view
 
 **MUST:** Any page that uses **`ListPageTemplate`** with **`tab.viewType`** (table / list / board / dashboard) and renders **`TablePropertiesDrawer`** **MUST** pass:
@@ -352,9 +366,9 @@ Follow root **`.cursor/rules/exxat-kbd-shortcuts.mdc`**. Summary:
 - **UI components** (borders, focus rings where required): **≥ 3:1**.
 - **Muted text on tinted surfaces** (e.g. sidebar): use tokens mixed against the **correct surface** (e.g. **`--sidebar`** / `--sidebar-section-label-foreground`), not only `--background`.
 
-### 8.4 Overlays (Dialog / Sheet / Drawer)
+### 8.4 Overlays (Dialog / Sheet)
 
-**MUST:** Provide an accessible **title** — `DialogTitle` / `SheetTitle` / `DrawerTitle`; use **`className="sr-only"`** when the title is visually hidden (align with shadcn patterns in this repo).
+**MUST:** Provide an accessible **title** — `DialogTitle` / `SheetTitle`; use **`className="sr-only"`** when the title is visually hidden (align with shadcn patterns in this repo). Product side panels use **`Sheet`** only (Export, Properties, invite — not a separate Vaul drawer primitive).
 
 ### 8.5 Verification
 
@@ -634,6 +648,7 @@ Copy and complete when implementing or reviewing:
 - [ ] **Primary hub + large data:** Same composition as `PlacementsClient` / `TeamClient` (template + metrics when applicable).
 - [ ] **All view tabs:** List/board/dashboard use **`tableState.rows`**; dashboard view uses **`KeyMetrics`** + shared KPI helpers — no “not wired” placeholders or duplicate metric cards.
 - [ ] **Properties drawer:** **`TablePropertiesDrawer`** receives **`currentView`** and **`onViewChange`** from **`renderContent`** / **`updateTab`** + **`dataListViewIcon`** (§4.2) — not table-only copy on Board/List/Dashboard.
+- [ ] **Add view parity:** **`FULL_HUB_SUPPORTED_VIEWS`** on **`ListPageTemplate`** + **`HubTable`** (in sync); every allowed view has a renderer; list uses **`ListPageBoardCard`** — **`.cursor/rules/exxat-hub-supported-views.mdc`**, **`docs/hub-supported-views-pattern.md`**.
 - [ ] **Data view dashboard (Placements / Team / Compliance):** Charts use **`ChartFigure`** + **`ChartDataTable`**; **Edit layout** on toolbar; **`activeBar` / `activeShape`** keyboard styling from **`lib/chart-keyboard-selection`** — not opacity-only **`Cell`** hacks (§4.3).
 - [ ] **Dashboard layout persistence:** **`lib/data-view-dashboard-storage`** (or **`saveDashboardLayout`** / **`loadDashboardLayout`** on Placements); **`mergeDashboardLayout`** on load — no new ad-hoc storage keys for the same layout (§4.3).
 - [ ] **⌘K palette (§7.1):** If adding or changing **`dataGroups`**, map rows in **`lib/command-menu-search-data.ts`** (not `command-menu.tsx`); use **`searchOnly`** on bulky groups; keep **`docs/command-menu-pattern.md`** aligned.

package/template/components/columns-client.tsx

@@ -7,7 +7,7 @@
  * (`PrimaryPageTemplate` + `ListPageTemplate`):
  *   - `header`  : `PageHeader` with title + one-line subtitle describing the demo.
  *   - `metrics` : `KeyMetrics` `variant="flat"` — patterns, pinned, sortable, demo rows.
- *   - tabs      : single `table` view tab (one demo table — no list / board variants).
+ *   - tabs      : default `table` tab; Add view offers list / board / dashboard (same as Library).
  *   - `renderContent` : the `<ColumnsShowcase />` DataTable surface.
  *
  * Cell patterns are exercised inside `columns-showcase.tsx` so the rendered
@@ -33,6 +33,7 @@ import {
   COLUMNS_SHOWCASE_PATTERN_COUNT,
   COLUMNS_SHOWCASE_PINNED_COUNT,
   COLUMNS_SHOWCASE_SORTABLE_COUNT,
+  COLUMNS_SUPPORTED_VIEWS,
 } from "@/components/columns-showcase"
 
 const COLUMNS_DEFAULT_TABS: ViewTab[] = [
@@ -127,8 +128,8 @@ export function ColumnsClient() {
         onTabsChange={setTabs}
         activeTabId={activeTabId}
         onActiveTabChange={setActiveTabId}
-        supportedViewTypes={["table"]}
         getTabCount={getTabCount}
+        supportedViewTypes={COLUMNS_SUPPORTED_VIEWS}
         header={
           <PageHeader
             title="Column types"

package/template/components/columns-showcase.tsx

@@ -48,7 +48,6 @@
 
 import * as React from "react"
 import {
-  HubTable,
   AttachmentCountCell,
   BooleanToggleCell,
   CurrencyCell,
@@ -66,6 +65,9 @@ import {
   type RowActionDef,
 } from "@/components/data-views"
 import type { DataListViewType } from "@/lib/data-list-view"
+import { FULL_HUB_SUPPORTED_VIEWS } from "@/lib/data-list-view-registry"
+import { LibraryTable } from "@/components/library-table"
+import { DEFAULT_LIBRARY_FOLDERS, type LibraryFolder } from "@/lib/mock/library-folders"
 import { AvatarInitials } from "@/components/ui/avatar"
 import { cn } from "@/lib/utils"
 import {
@@ -477,7 +479,8 @@ export const COLUMNS_SHOWCASE_PATTERN_COUNT  = 18
 export const COLUMNS_SHOWCASE_PINNED_COUNT   = 3  // select + name + actions
 export const COLUMNS_SHOWCASE_SORTABLE_COUNT = 11 // name, owner, type, level, rating, progress, cost, count, files, lastActivityAt, updatedAt
 
-const COLUMNS_SUPPORTED_VIEWS: readonly DataListViewType[] = ["table"] as const
+/** Same seven views as Library / All questions (Add view + Properties). */
+export const COLUMNS_SUPPORTED_VIEWS = FULL_HUB_SUPPORTED_VIEWS
 
 export interface ColumnsShowcaseProps {
   /** Active view from `ListPageTemplate.renderContent`. */
@@ -493,6 +496,9 @@ export interface ColumnsShowcaseProps {
  */
 export function ColumnsShowcase({ view, onViewChange }: ColumnsShowcaseProps) {
   const [rows, setRows] = React.useState<LibraryItem[]>(() => buildRows())
+  const [folders, setFolders] = React.useState<LibraryFolder[]>(() =>
+    DEFAULT_LIBRARY_FOLDERS.map(f => ({ ...f })),
+  )
   const [pagination, setPagination] = React.useState(false)
 
   const toggleFavorite = React.useCallback((row: LibraryItem) => {
@@ -514,28 +520,26 @@ export function ColumnsShowcase({ view, onViewChange }: ColumnsShowcaseProps) {
   const columns = useColumns(toggleFavorite, togglePublished)
 
   return (
-    <HubTable<LibraryItem>
-      rows={rows}
-      columns={columns}
+    <LibraryTable
+      items={rows}
+      onItemsChange={setRows}
+      folders={folders}
+      onFoldersChange={setFolders}
       view={view}
       onViewChange={onViewChange}
-      supportedViewTypes={COLUMNS_SUPPORTED_VIEWS}
-      hubLabel="Column types"
-      lifecycleTabLabel="Column types"
-      searchAriaLabel="Search columns showcase"
-      getRowId={(r) => r.id}
-      getRowSelectionLabel={(r) => r.stem}
-      defaultSort={{ key: "stem", dir: "asc" }}
+      columnDefs={columns}
+      hubLabels={{
+        hubLabel: "Column types",
+        lifecycleTabLabel: "Column types",
+        searchAriaLabel: "Search columns showcase",
+        listAriaLabel: "Column types",
+        defaultSort: { key: "stem", dir: "asc" },
+      }}
       pagination={pagination}
       onPaginationChange={setPagination}
       paginationInitialPageSize={5}
       paginationPageSizeOptions={[5, 10, 25]}
-      emptyState={
-        <p className="text-sm text-muted-foreground">
-          No rows match your filters.
-        </p>
-      }
-      renderers={{}}
+      showBulkActions={false}
     />
   )
 }

package/template/components/exxat-product-logo.tsx

@@ -186,7 +186,7 @@ function ExxatLogoBase({
 export function ExxatProductLogo({
   product,
   className,
-  variant = "default",
+  variant: _variant = "default",
 }: ExxatProductLogoProps) {
   const customProductBrand = useAppStore(s => s.customProductBrand)
   const productBrandColors = useAppStore(s => s.productBrandColors)

package/template/components/library-table.tsx

@@ -19,8 +19,8 @@ import {
   HubTable,
   type HubTableHandle,
   type HubTableRenderers,
-  type HubTableRendererArgs,
 } from "@/components/data-views"
+import { Skeleton } from "@/components/ui/skeleton"
 import { LIBRARY_SUPPORTED_VIEWS } from "@/lib/library-supported-views"
 import { Button } from "@/components/ui/button"
 import {
@@ -30,7 +30,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Tip } from "@/components/ui/tip"
-import { Skeleton } from "@/components/ui/skeleton"
 import {
   ResizableHandle,
   ResizablePanel,
@@ -581,6 +580,14 @@ function libraryPanelDetail(row: LibraryItem) {
 
 export type LibraryTableHandle = HubTableHandle
 
+export interface LibraryTableHubLabels {
+  hubLabel: string
+  lifecycleTabLabel: string
+  searchAriaLabel: string
+  listAriaLabel?: string
+  defaultSort?: { key: string; dir: "asc" | "desc" }
+}
+
 export interface LibraryTableProps {
   items: LibraryItem[]
   /** When set, table / board / tree rows are limited to this nav scope (secondary sidebar). */
@@ -596,6 +603,15 @@ export interface LibraryTableProps {
   folders: LibraryFolder[]
   onFoldersChange: React.Dispatch<React.SetStateAction<LibraryFolder[]>>
   onItemsChange: React.Dispatch<React.SetStateAction<LibraryItem[]>>
+  /** e.g. Column types showcase — custom `ColumnDef`s while reusing list/board/folder renderers. */
+  columnDefs?: ColumnDef<LibraryItem>[]
+  /** Override default Library copy when {@link columnDefs} is set. */
+  hubLabels?: LibraryTableHubLabels
+  pagination?: boolean
+  onPaginationChange?: (v: boolean) => void
+  paginationInitialPageSize?: number
+  paginationPageSizeOptions?: number[]
+  showBulkActions?: boolean
 }
 
 export const LibraryTable = React.forwardRef<LibraryTableHandle, LibraryTableProps>(
@@ -611,6 +627,13 @@ export const LibraryTable = React.forwardRef<LibraryTableHandle, LibraryTablePro
       folders,
       onFoldersChange,
       onItemsChange,
+      columnDefs,
+      hubLabels,
+      pagination,
+      onPaginationChange,
+      paginationInitialPageSize,
+      paginationPageSizeOptions,
+      showBulkActions = true,
     },
     ref,
   ) {
@@ -628,10 +651,18 @@ export const LibraryTable = React.forwardRef<LibraryTableHandle, LibraryTablePro
     )
 
     const columns = React.useMemo(
-      () => buildLibraryColumns(tableSourceItems, { onToggleFavorite: toggleFavorite }),
-      [tableSourceItems, toggleFavorite],
+      () =>
+        columnDefs ??
+        buildLibraryColumns(tableSourceItems, { onToggleFavorite: toggleFavorite }),
+      [columnDefs, tableSourceItems, toggleFavorite],
     )
 
+    const hubLabel = hubLabels?.hubLabel ?? "Library"
+    const lifecycleTabLabel = hubLabels?.lifecycleTabLabel ?? "Library"
+    const searchAriaLabel = hubLabels?.searchAriaLabel ?? "Search questions"
+    const listAriaLabel = hubLabels?.listAriaLabel ?? "Questions"
+    const defaultSort = hubLabels?.defaultSort ?? { key: "updatedAt", dir: "desc" as const }
+
     // ─ New-folder / customize-folder modal state (shared by panel + tree-panel) ────
     const [newFolderOpen, setNewFolderOpen] = React.useState(false)
     const [newFolderParentId, setNewFolderParentId] = React.useState<string | null>(null)
@@ -750,18 +781,22 @@ export const LibraryTable = React.forwardRef<LibraryTableHandle, LibraryTablePro
           view={view}
           onViewChange={onViewChange}
           supportedViewTypes={LIBRARY_SUPPORTED_VIEWS}
-          hubLabel="Library"
-          lifecycleTabLabel="Library"
-          searchAriaLabel="Search questions"
+          hubLabel={hubLabel}
+          lifecycleTabLabel={lifecycleTabLabel}
+          searchAriaLabel={searchAriaLabel}
           getRowId={row => row.id}
           getRowSelectionLabel={row => row.stem}
-          defaultSort={{ key: "updatedAt", dir: "desc" }}
+          defaultSort={defaultSort}
           emptyState={<p className="text-sm text-muted-foreground">No questions in the bank.</p>}
           boardGroupByColumnOptions={[...LIBRARY_BOARD_GROUP_OPTIONS]}
           renderFilterOptionValue={renderFilterOptionValue}
           syncedSearchFromUrl={searchLanding ? undefined : urlListSearch}
-          listAriaLabel="Questions"
+          listAriaLabel={listAriaLabel}
           listEmptyState="No questions match your filters."
+          pagination={pagination}
+          onPaginationChange={onPaginationChange}
+          paginationInitialPageSize={paginationInitialPageSize}
+          paginationPageSizeOptions={paginationPageSizeOptions}
           renderListRow={row => (
             <ListPageBoardCard
               className={LIBRARY_FAVORITE_HOVER_GROUP}
@@ -784,20 +819,24 @@ export const LibraryTable = React.forwardRef<LibraryTableHandle, LibraryTablePro
               </div>
             </ListPageBoardCard>
           )}
-          bulkActionsSlot={selected => {
-            if (selected.size === 0) return null
-            return (
-              <>
-                <span className="sr-only">{selected.size} selected</span>
-                <Tip label="Export selection (demo)">
-                  <Button size="sm" variant="outline" type="button">
-                    <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
-                    Export
-                  </Button>
-                </Tip>
-              </>
-            )
-          }}
+          bulkActionsSlot={
+            showBulkActions
+              ? selected => {
+                  if (selected.size === 0) return null
+                  return (
+                    <>
+                      <span className="sr-only">{selected.size} selected</span>
+                      <Tip label="Export selection (demo)">
+                        <Button size="sm" variant="outline" type="button">
+                          <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
+                          Export
+                        </Button>
+                      </Tip>
+                    </>
+                  )
+                }
+              : undefined
+          }
           renderers={renderers}
           handleRef={ref}
         />

package/template/components/new-library-item-form.tsx

@@ -338,13 +338,6 @@ function folderBreadcrumb(folderId: string, folders: LibraryFolder[]): string {
   return parent ? `${parent.name} / ${f.name}` : f.name
 }
 
-/** 0–100 percentage of the difficulty meter for the given level. */
-function difficultyToPercent(value: "easy" | "medium" | "hard"): number {
-  if (value === "easy") return 18
-  if (value === "hard") return 82
-  return 50
-}
-
 /**
  * Folder-aware difficulty insight — derived deterministically from the
  * folder id so the same folder always returns the same numbers. In a real

package/template/components/product-wordmark.tsx

@@ -44,7 +44,7 @@ export interface ProductWordmarkProps {
  */
 export function ProductWordmark({
   config,
-  variant = "default",
+  variant: _variant = "default",
   className,
 }: ProductWordmarkProps) {
   const prefix = config.prefix ?? "Exxat"