@exxatdesignux/ui 0.3.0 → 0.4.1

package/template/components/{question-bank-hub-client.tsx → library-hub-client.tsx}

@@ -12,38 +12,38 @@ import { Shortcut } from "@/components/ui/dropdown-menu"
 import { useSidebar } from "@/components/ui/sidebar"
 import { useAltKeyLabel, useModKeyLabel } from "@/hooks/use-mod-key-label"
 import {
-  DEFAULT_QUESTION_BANK_FOLDERS,
-  type QuestionBankFolder,
-  type QuestionBankFolderColorKey,
-} from "@/lib/mock/question-bank-folders"
-import { QUESTION_BANK_ITEMS, type QuestionBankItem } from "@/lib/mock/question-bank"
-import { QUESTION_BANK_HUB_ASK_LEO_PROMPTS } from "@/lib/question-bank-hub-search"
+  DEFAULT_LIBRARY_FOLDERS,
+  type LibraryFolder,
+  type LibraryFolderColorKey,
+} from "@/lib/mock/library-folders"
+import { LIBRARY_ITEMS, type LibraryItem } from "@/lib/mock/library"
+import { LIBRARY_HUB_ASK_LEO_PROMPTS } from "@/lib/library-hub-search"
 import {
-  QUESTION_BANK_LIBRARY_PATH,
-  QUESTION_BANK_NAV_MY_AUTHOR,
-  questionBankNavHref,
-} from "@/lib/question-bank-nav"
+  LIBRARY_ALL_PATH,
+  LIBRARY_NAV_MY_AUTHOR,
+  libraryNavHref,
+} from "@/lib/library-nav"
 import { cn } from "@/lib/utils"
 
-const NEW_QUESTION_AUTHORING_PATH = "/question-bank/new"
+const NEW_QUESTION_AUTHORING_PATH = "/library/new"
 
 const DRAFT_WITH_LEO_PROMPT =
-  "Help me draft a new assessment question. Ask me for the topic, item type (NBME single best answer / NCLEX SATA / vignette / EMQ / T/F / short answer), Bloom level, and discipline, then propose stem, lead-in, answer options, and rationale I can paste into the authoring composer."
+  "Help me draft a new library item. Ask me for the category, item type (single choice / multi-select / true-false / short answer), tier, and track, then propose name, prompt, answer options, and notes I can paste into the composer."
 
 const TEMPLATE_PROMPT =
-  "Walk me through choosing a question template (MCQ, OSCE, short answer, true/false) and produce a starter item with stem, options, rationale, and tags."
+  "Walk me through choosing an item template (single choice, multi-select, short answer, true / false) and produce a starter item with name, options, notes, and tags."
 
 const IMPORT_PROMPT =
   "Guide me through importing assessment questions in bulk. Ask about source format (CSV, QTI, copy/paste), then outline what columns and mappings I need."
 
 /** Rotating example queries — read like something a user would actually type into search. */
 const HUB_COMPOSER_PLACEHOLDERS = [
-  "all the questions I used in last year's assessment",
-  "what did we run for the spring OSCE checkout?",
-  "Clinical folder, cardiology tagged, for third-year summative",
-  "find QB-2024-0012 and anything like it",
-  "that anemia vignette from the shelf-style block",
-  "MCQs I still need before next week's diabetes station",
+  "items tagged with Tag 1 and Category 2",
+  "everything Owner A edited this month",
+  "Folder 1 entries marked High",
+  "find LIB-2026-001 and anything like it",
+  "drafts from the most recent reference set",
+  "Type 1 items I still need for the demo block",
 ] as const
 
 interface ScopeChip {
@@ -52,7 +52,7 @@ interface ScopeChip {
   href: string
   count: number
   folderGlyph: {
-    colorKey: QuestionBankFolderColorKey
+    colorKey: LibraryFolderColorKey
     icon: string
     variant?: "solid" | "outline"
   }
@@ -69,33 +69,33 @@ interface CreateTile {
   shortcutKeys?: string
 }
 
-interface FolderTile extends QuestionBankFolder {
+interface FolderTile extends LibraryFolder {
   count: number
 }
 
-function buildScopeChips(items: QuestionBankItem[]): ScopeChip[] {
+function buildScopeChips(items: LibraryItem[]): ScopeChip[] {
   const mine = items.filter(
-    i => i.author === QUESTION_BANK_NAV_MY_AUTHOR || i.createdBy === QUESTION_BANK_NAV_MY_AUTHOR,
+    i => i.author === LIBRARY_NAV_MY_AUTHOR || i.createdBy === LIBRARY_NAV_MY_AUTHOR,
   ).length
   return [
     {
       id: "all",
       label: "All",
       count: items.length,
-      href: QUESTION_BANK_LIBRARY_PATH,
+      href: LIBRARY_ALL_PATH,
       folderGlyph: { colorKey: "muted", icon: "fa-layer-group", variant: "outline" },
     },
     {
       id: "my",
       label: "Mine",
       count: mine,
-      href: questionBankNavHref({ scope: "my" }),
+      href: libraryNavHref({ scope: "my" }),
       folderGlyph: { colorKey: "brand", icon: "fa-user" },
     },
   ]
 }
 
-function buildFolderTiles(items: QuestionBankItem[], folders: QuestionBankFolder[]): FolderTile[] {
+function buildFolderTiles(items: LibraryItem[], folders: LibraryFolder[]): FolderTile[] {
   const byFolder = new Map<string, number>()
   for (const i of items) byFolder.set(i.folderId, (byFolder.get(i.folderId) ?? 0) + 1)
   return folders
@@ -105,24 +105,24 @@ function buildFolderTiles(items: QuestionBankItem[], folders: QuestionBankFolder
 
 // Static derivations of immutable mock data — computed once at module load,
 // not per render of the hub. Re-derive only if the underlying mock arrays change.
-const HUB_SCOPES = buildScopeChips(QUESTION_BANK_ITEMS)
-const HUB_FOLDER_TILES = buildFolderTiles(QUESTION_BANK_ITEMS, DEFAULT_QUESTION_BANK_FOLDERS)
+const HUB_SCOPES = buildScopeChips(LIBRARY_ITEMS)
+const HUB_FOLDER_TILES = buildFolderTiles(LIBRARY_ITEMS, DEFAULT_LIBRARY_FOLDERS)
 
-function isMineQuestionBankItem(i: QuestionBankItem): boolean {
-  return i.author === QUESTION_BANK_NAV_MY_AUTHOR || i.createdBy === QUESTION_BANK_NAV_MY_AUTHOR
+function isMineLibraryItem(i: LibraryItem): boolean {
+  return i.author === LIBRARY_NAV_MY_AUTHOR || i.createdBy === LIBRARY_NAV_MY_AUTHOR
 }
 
-const HUB_MINE_RECENTS = [...QUESTION_BANK_ITEMS]
-  .filter(isMineQuestionBankItem)
+const HUB_MINE_RECENTS = [...LIBRARY_ITEMS]
+  .filter(isMineLibraryItem)
   .sort((a, b) => (a.updatedAt < b.updatedAt ? 1 : -1))
   .slice(0, 3)
 
 const HUB_ASK_LEO_PAGE_CONTEXT = {
   title: "Question hub",
   description:
-    "Browse and organize assessment items with AI-assisted workflows. The hub search field opens discovery results on `/question-bank/find` with your wording applied to the list; use the library’s Search in the sidebar for `/question-bank/list`. Pick a suggestion below when you want a full Ask Leo thread.",
-  suggestions: [...QUESTION_BANK_HUB_ASK_LEO_PROMPTS],
-  data: { surface: "question-bank-discovery-hub" as const },
+    "Browse and organize assessment items with AI-assisted workflows. The hub search field opens discovery results on `/library/find` with your wording applied to the list; use the library’s Search in the sidebar for `/library/list`. Pick a suggestion below when you want a full Ask Leo thread.",
+  suggestions: [...LIBRARY_HUB_ASK_LEO_PROMPTS],
+  data: { surface: "library-discovery-hub" as const },
 }
 
 function formatRelativeDate(iso: string): string {
@@ -138,7 +138,7 @@ function formatRelativeDate(iso: string): string {
   return `${Math.round(diffDays / 365)}y ago`
 }
 
-export function QuestionBankHubClient() {
+export function LibraryHubClient() {
   const router = useRouter()
   const { openWithPrompt } = useAskLeo()
   const { setOpen: setMainSidebarOpen } = useSidebar()
@@ -162,7 +162,7 @@ export function QuestionBankHubClient() {
   )
 
   /**
-   * Navigate to the full-page authoring composer (`/question-bank/new`).
+   * Navigate to the full-page authoring composer (`/library/new`).
    * Mirrors the Placements "New placement" pre-collapse: animates the sidebar
    * closed first so the user sees one smooth transition into the focused flow
    * (the route also mounts `SidebarAutoCollapse` to lock it shut while there).
@@ -178,7 +178,7 @@ export function QuestionBankHubClient() {
 
   const onHubComposerSubmit = React.useCallback(
     (message: string) => {
-      router.push(questionBankNavHref({ scope: "all", q: message.trim(), hubFind: true }))
+      router.push(libraryNavHref({ scope: "all", q: message.trim(), hubFind: true }))
     },
     [router],
   )
@@ -214,7 +214,7 @@ export function QuestionBankHubClient() {
       {
         id: "template",
         label: "From template",
-        description: "Pick MCQ, OSCE, short answer or true/false — Leo fills the scaffold.",
+        description: "Pick choice-style, multi-select, short answer or true / false — Leo fills the scaffold.",
         icon: "fa-clone",
         iconTint: "bg-sky-500/15 text-sky-700 dark:text-sky-300",
         onClick: () => sendLeoSuggestion(TEMPLATE_PROMPT),
@@ -334,7 +334,7 @@ export function QuestionBankHubClient() {
                 Continue where you left off
               </h2>
               <Link
-                href={questionBankNavHref({ scope: "my" })}
+                href={libraryNavHref({ scope: "my" })}
                 className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
               >
                 View all
@@ -345,7 +345,7 @@ export function QuestionBankHubClient() {
               {recents.map(item => (
                 <li key={item.id}>
                   <Link
-                    href={questionBankNavHref({ scope: "my" })}
+                    href={libraryNavHref({ scope: "my" })}
                     className="group flex h-full flex-col gap-3 rounded-xl border border-border bg-card p-4 transition hover:border-interactive-hover hover:bg-interactive-hover/30 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                   >
                     <div className="flex items-center gap-2">
@@ -371,7 +371,7 @@ export function QuestionBankHubClient() {
               Browse the library
             </h2>
             <Link
-              href={QUESTION_BANK_LIBRARY_PATH}
+              href={LIBRARY_ALL_PATH}
               className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
             >
               Open full library
@@ -406,7 +406,7 @@ export function QuestionBankHubClient() {
             {folderTiles.map(f => (
               <div key={f.id} role="listitem" className="min-w-0">
                 <Link
-                  href={questionBankNavHref({ scope: "folder", folderId: f.id })}
+                  href={libraryNavHref({ scope: "folder", folderId: f.id })}
                   className={hubFolderBrowserTileClass}
                 >
                   <OsFolderGlyph colorKey={f.colorKey} icon={f.icon} size="md" />

package/template/components/{question-bank-new-folder-sheet.tsx → library-new-folder-sheet.tsx}

@@ -14,13 +14,13 @@ import { Tip } from "@/components/ui/tip"
 import { Kbd, KbdGroup } from "@/components/ui/kbd"
 import { cn } from "@/lib/utils"
 import {
-  QUESTION_BANK_FOLDER_COLOR_STYLES,
-  QUESTION_BANK_FOLDER_ICON_OPTIONS,
-  type QuestionBankFolderColorKey,
-} from "@/lib/mock/question-bank-folders"
+  LIBRARY_FOLDER_COLOR_STYLES,
+  LIBRARY_FOLDER_ICON_OPTIONS,
+  type LibraryFolderColorKey,
+} from "@/lib/mock/library-folders"
 import { OsFolderGlyph } from "@/components/data-views/os-folder-glyph"
 
-const COLOR_OPTIONS: QuestionBankFolderColorKey[] = [
+const COLOR_OPTIONS: LibraryFolderColorKey[] = [
   "brand",
   "success",
   "warning",
@@ -38,7 +38,7 @@ function FolderTilePreview({
   className,
 }: {
   name: string
-  colorKey: QuestionBankFolderColorKey
+  colorKey: LibraryFolderColorKey
   icon: string
   className?: string
 }) {
@@ -64,7 +64,7 @@ function FolderTilePreview({
   )
 }
 
-export interface QuestionBankNewFolderSheetProps {
+export interface LibraryNewFolderSheetProps {
   open: boolean
   onOpenChange: (open: boolean) => void
   /** Parent folder id for the new folder (`null` = top level). */
@@ -75,28 +75,28 @@ export interface QuestionBankNewFolderSheetProps {
   customizingFolder?: {
     name: string
     icon: string
-    colorKey: QuestionBankFolderColorKey
+    colorKey: LibraryFolderColorKey
     parentId: string | null
   } | null
   onCreated: (folder: {
     name: string
     icon: string
-    colorKey: QuestionBankFolderColorKey
+    colorKey: LibraryFolderColorKey
     parentId: string | null
   }) => void
 }
 
-export function QuestionBankNewFolderSheet({
+export function LibraryNewFolderSheet({
   open,
   onOpenChange,
   parentFolderId,
   customizingFolder,
   descriptionText = "Name, color, and icon update the preview. The folder is created in the location shown in the breadcrumb above the grid.",
   onCreated,
-}: QuestionBankNewFolderSheetProps) {
+}: LibraryNewFolderSheetProps) {
   const [draft, setDraft] = React.useState<{
     name: string
-    colorKey: QuestionBankFolderColorKey
+    colorKey: LibraryFolderColorKey
     icon: string
   }>({ name: "Untitled", colorKey: "brand", icon: "fa-folder" })
 
@@ -200,7 +200,7 @@ export function QuestionBankNewFolderSheet({
                       aria-pressed={draft.colorKey === c}
                       className={cn(
                         "size-10 rounded-xl border-2 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                        QUESTION_BANK_FOLDER_COLOR_STYLES[c].tile,
+                        LIBRARY_FOLDER_COLOR_STYLES[c].tile,
                         draft.colorKey === c
                           ? "ring-2 ring-ring"
                           : "border-transparent opacity-85 hover:opacity-100",
@@ -214,7 +214,7 @@ export function QuestionBankNewFolderSheet({
               <div>
                 <p className="mb-2 text-xs font-medium text-muted-foreground">Icon</p>
                 <div className="grid max-h-48 grid-cols-5 gap-2 overflow-y-auto rounded-xl border border-border p-3">
-                  {QUESTION_BANK_FOLDER_ICON_OPTIONS.map(ic => (
+                  {LIBRARY_FOLDER_ICON_OPTIONS.map(ic => (
                     <button
                       key={ic}
                       type="button"

package/template/components/{question-bank-os-folder-view.tsx → library-os-folder-view.tsx}

@@ -1,7 +1,7 @@
 "use client"
 
 /**
- * OS-style icon folder view for Question bank — hierarchy, appearance (color + icon),
+ * OS-style icon folder view for Library — hierarchy, appearance (color + icon),
  * create (floating sheet drawer like `ExportDrawer` + preview), inline rename, move / delete, and move questions between folders.
  */
 
@@ -29,24 +29,24 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Tip } from "@/components/ui/tip"
 import { cn } from "@/lib/utils"
-import type { QuestionBankItem } from "@/lib/mock/question-bank"
+import type { LibraryItem } from "@/lib/mock/library"
 import {
   collectFolderDescendantIds,
   isValidFolderMove,
   newFolderId,
-  QUESTION_BANK_FOLDER_COLOR_STYLES,
-  QUESTION_BANK_FOLDER_ICON_OPTIONS,
-  type QuestionBankFolder,
-  type QuestionBankFolderColorKey,
-} from "@/lib/mock/question-bank-folders"
+  LIBRARY_FOLDER_COLOR_STYLES,
+  LIBRARY_FOLDER_ICON_OPTIONS,
+  type LibraryFolder,
+  type LibraryFolderColorKey,
+} from "@/lib/mock/library-folders"
 import {
   ListPageViewFrame,
   LIST_PAGE_VIEW_FRAME_MAX_WIDE,
 } from "@/components/data-views/list-page-view-frame"
 import { OsFolderGlyph } from "@/components/data-views/os-folder-glyph"
-import { QuestionBankNewFolderSheet } from "@/components/question-bank-new-folder-sheet"
+import { LibraryNewFolderSheet } from "@/components/library-new-folder-sheet"
 
-const COLOR_OPTIONS: QuestionBankFolderColorKey[] = [
+const COLOR_OPTIONS: LibraryFolderColorKey[] = [
   "brand",
   "success",
   "warning",
@@ -57,17 +57,17 @@ const COLOR_OPTIONS: QuestionBankFolderColorKey[] = [
   "chart3",
 ]
 
-export interface QuestionBankOsFolderViewProps {
-  folders: QuestionBankFolder[]
-  onFoldersChange: React.Dispatch<React.SetStateAction<QuestionBankFolder[]>>
-  questions: QuestionBankItem[]
-  onQuestionsChange: React.Dispatch<React.SetStateAction<QuestionBankItem[]>>
+export interface LibraryOsFolderViewProps {
+  folders: LibraryFolder[]
+  onFoldersChange: React.Dispatch<React.SetStateAction<LibraryFolder[]>>
+  questions: LibraryItem[]
+  onQuestionsChange: React.Dispatch<React.SetStateAction<LibraryItem[]>>
 }
 
-function folderTrail(folders: QuestionBankFolder[], folderId: string | null): QuestionBankFolder[] {
+function folderTrail(folders: LibraryFolder[], folderId: string | null): LibraryFolder[] {
   if (!folderId) return []
   const byId = new Map(folders.map(f => [f.id, f]))
-  const trail: QuestionBankFolder[] = []
+  const trail: LibraryFolder[] = []
   let cur: string | null = folderId
   while (cur) {
     const f = byId.get(cur)
@@ -79,9 +79,9 @@ function folderTrail(folders: QuestionBankFolder[], folderId: string | null): Qu
 }
 
 function folderHoverCounts(
-  folder: QuestionBankFolder,
-  folders: QuestionBankFolder[],
-  questions: QuestionBankItem[],
+  folder: LibraryFolder,
+  folders: LibraryFolder[],
+  questions: LibraryItem[],
 ) {
   const subfolders = folders.filter(f => f.parentId === folder.id).length
   const questionsInFolder = questions.filter(q => q.folderId === folder.id).length
@@ -89,10 +89,10 @@ function folderHoverCounts(
 }
 
 function validMoveTargets(
-  folders: QuestionBankFolder[],
+  folders: LibraryFolder[],
   movingId: string,
 ): Array<{ id: string | null; label: string }> {
-  const out: Array<{ id: string | null; label: string }> = [{ id: null, label: "Question bank (root)" }]
+  const out: Array<{ id: string | null; label: string }> = [{ id: null, label: "Library (root)" }]
   for (const f of folders) {
     if (f.id === movingId) continue
     if (!isValidFolderMove(folders, movingId, f.id)) continue
@@ -101,12 +101,12 @@ function validMoveTargets(
   return out
 }
 
-export function QuestionBankOsFolderView({
+export function LibraryOsFolderView({
   folders,
   onFoldersChange,
   questions,
   onQuestionsChange,
-}: QuestionBankOsFolderViewProps) {
+}: LibraryOsFolderViewProps) {
   const [currentId, setCurrentId] = React.useState<string | null>(null)
 
   const childFolders = React.useMemo(
@@ -123,13 +123,13 @@ export function QuestionBankOsFolderView({
 
   const [createFolderOpen, setCreateFolderOpen] = React.useState(false)
   const [customizeFolderOpen, setCustomizeFolderOpen] = React.useState(false)
-  const [customizingFolder, setCustomizingFolder] = React.useState<QuestionBankFolder | null>(null)
+  const [customizingFolder, setCustomizingFolder] = React.useState<LibraryFolder | null>(null)
 
   const [renamingFolderId, setRenamingFolderId] = React.useState<string | null>(null)
   const [renameValue, setRenameValue] = React.useState("")
   const renameInputRef = React.useRef<HTMLInputElement>(null)
 
-  const [appearanceDialog, setAppearanceDialog] = React.useState<QuestionBankFolder | null>(null)
+  const [appearanceDialog, setAppearanceDialog] = React.useState<LibraryFolder | null>(null)
   const [moveFolderId, setMoveFolderId] = React.useState<string | null>(null)
   const [deleteFolderId, setDeleteFolderId] = React.useState<string | null>(null)
 
@@ -144,7 +144,7 @@ export function QuestionBankOsFolderView({
     setCreateFolderOpen(true)
   }
 
-  function startRename(folder: QuestionBankFolder) {
+  function startRename(folder: LibraryFolder) {
     setRenamingFolderId(folder.id)
     setRenameValue(folder.name)
   }
@@ -223,7 +223,7 @@ export function QuestionBankOsFolderView({
             onClick={() => setCurrentId(null)}
             className="font-sans text-sm text-muted-foreground hover:text-interactive-hover-foreground transition-colors tracking-normal"
           >
-            Question bank
+            Library
           </button>
           {trail.length > 0 && (
             <i className="fa-light fa-chevron-right text-xs text-muted-foreground/50" aria-hidden="true" />
@@ -474,7 +474,7 @@ export function QuestionBankOsFolderView({
         </p>
       )}
 
-      <QuestionBankNewFolderSheet
+      <LibraryNewFolderSheet
         open={createFolderOpen}
         onOpenChange={setCreateFolderOpen}
         parentFolderId={currentId}
@@ -484,7 +484,7 @@ export function QuestionBankOsFolderView({
       />
 
       {/* Customize folder */}
-      <QuestionBankNewFolderSheet
+      <LibraryNewFolderSheet
         open={customizeFolderOpen}
         onOpenChange={setCustomizeFolderOpen}
         parentFolderId={customizingFolder?.parentId ?? null}
@@ -531,7 +531,7 @@ export function QuestionBankOsFolderView({
                       aria-pressed={appearanceDialog.colorKey === c}
                       className={cn(
                         "size-9 rounded-lg border-2 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                        QUESTION_BANK_FOLDER_COLOR_STYLES[c].tile,
+                        LIBRARY_FOLDER_COLOR_STYLES[c].tile,
                         appearanceDialog.colorKey === c ? "ring-2 ring-ring" : "border-transparent opacity-80 hover:opacity-100",
                       )}
                       onClick={() =>
@@ -548,7 +548,7 @@ export function QuestionBankOsFolderView({
               <div>
                 <p className="mb-2 text-xs font-medium text-muted-foreground">Icon</p>
                 <div className="grid max-h-40 grid-cols-5 gap-2 overflow-y-auto rounded-md border border-border p-2">
-                  {QUESTION_BANK_FOLDER_ICON_OPTIONS.map(ic => (
+                  {LIBRARY_FOLDER_ICON_OPTIONS.map(ic => (
                     <button
                       key={ic}
                       type="button"

package/template/components/{question-bank-page-header.tsx → library-page-header.tsx}

@@ -15,9 +15,9 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Tip } from "@/components/ui/tip"
 import { COLLABORATION_HEADER_ADD_LABEL } from "@/lib/collaborator-access"
-import { QUESTION_BANK_HEADER_COLLABORATORS } from "@/lib/mock/question-bank-header-collaborators"
+import { LIBRARY_HEADER_COLLABORATORS } from "@/lib/mock/library-header-collaborators"
 
-export interface QuestionBankPageHeaderProps {
+export interface LibraryPageHeaderProps {
   /** Scoped hub title (All / My / folder name) — keep in sync with `SiteHeader`. */
   title: string
   questionCount: number
@@ -51,7 +51,7 @@ export interface QuestionBankPageHeaderProps {
   onCustomizeFolder?: () => void
 }
 
-export function QuestionBankPageHeader({
+export function LibraryPageHeader({
   title,
   questionCount,
   onNewQuestion,
@@ -61,7 +61,7 @@ export function QuestionBankPageHeader({
   showTitleBlock = true,
   variant = "default",
   accessInfo,
-  collaborators = QUESTION_BANK_HEADER_COLLABORATORS,
+  collaborators = LIBRARY_HEADER_COLLABORATORS,
   collaboratorDisplayLimit = 3,
   onAddCollaborator = () => {},
   onCollaboratorsOpen,
@@ -71,7 +71,7 @@ export function QuestionBankPageHeader({
   subtitleOverride,
   hideActions = false,
   onCustomizeFolder,
-}: QuestionBankPageHeaderProps) {
+}: LibraryPageHeaderProps) {
   const [moreOpen, setMoreOpen] = React.useState(false)
   const countLine =
     subtitleOverride ??
@@ -91,7 +91,7 @@ export function QuestionBankPageHeader({
       showTitleBlock={showTitleBlock}
       actions={
         hideActions ? undefined : (
-          <div className="flex items-center gap-2" role="group" aria-label="Question bank actions">
+          <div className="flex items-center gap-2" role="group" aria-label="Library actions">
             {!hideNewQuestion ? (
               <Tip side="bottom" label="Create a new question (demo)">
                 <Button type="button" size="lg" onClick={onNewQuestion}>

package/template/components/library-panel-activator.tsx

@@ -0,0 +1,8 @@
+"use client"
+
+import { SecondaryPanelHubActivator } from "@/components/templates/secondary-panel-hub-template"
+
+/** Opens the Library secondary panel while this route is mounted. */
+export function LibraryPanelActivator() {
+  return <SecondaryPanelHubActivator panelId="library" />
+}