@exxatdesignux/ui 0.3.0 → 0.4.1

package/template/components/{new-question-composer.tsx → new-library-item-form.tsx}

@@ -1,9 +1,9 @@
 "use client"
 
 /**
- * NewQuestionComposer — single-page authoring for the question bank.
+ * NewLibraryItemForm — single-page authoring for the library.
  *
- * IA (matches the rest of the question bank surfaces):
+ * IA (matches the rest of the library surfaces):
  *
  *   ├─ PageHeader (title + actions; parent trail is in `SiteHeader`)
  *   │     · "New question" + "V1 · Last updated …" subtitle
@@ -18,7 +18,7 @@
  *   │     └─ Inspector (right, bg-card panel)
  *   │           · Question format        (SelectionTileGrid → compact)
  *   │           · Location               (folder SelectionTileGrid)
- *   │           · Difficulty / Bloom / NBME (chips)
+ *   │           · Level / Tier / Cognitive (chips)
  *   │           · Tags                   (Input + Badge list)
  *   │       Sidebar-style collapse (⌘⌥]) — collapsed rail mimics
  *   │       `NestedSecondaryPanelShell` icon mode.
@@ -88,7 +88,7 @@ import {
   CommandList,
   CommandSeparator,
 } from "@/components/ui/command"
-import { QuestionBankNewFolderSheet } from "@/components/question-bank-new-folder-sheet"
+import { LibraryNewFolderSheet } from "@/components/library-new-folder-sheet"
 
 import {
   AUTHORING_QUESTION_TYPES,
@@ -103,13 +103,13 @@ import {
   AUTHORING_RATIONALE_PLACEHOLDER,
   authoringQuestionType,
   type AuthoringQuestionType,
-} from "@/lib/question-bank-authoring"
+} from "@/lib/library-authoring"
 import {
-  DEFAULT_QUESTION_BANK_FOLDERS,
+  DEFAULT_LIBRARY_FOLDERS,
   newFolderId,
-  type QuestionBankFolder,
-  type QuestionBankFolderColorKey,
-} from "@/lib/mock/question-bank-folders"
+  type LibraryFolder,
+  type LibraryFolderColorKey,
+} from "@/lib/mock/library-folders"
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Schema
@@ -330,7 +330,7 @@ function buildInitialFillBlankAnswers(): QuestionFormValues["fillBlankAnswers"]
   return [{ id: "blk-init-1", accepted: "" }]
 }
 
-function folderBreadcrumb(folderId: string, folders: QuestionBankFolder[]): string {
+function folderBreadcrumb(folderId: string, folders: LibraryFolder[]): string {
   const f = folders.find(x => x.id === folderId)
   if (!f) return ""
   if (f.parentId == null) return f.name
@@ -351,7 +351,7 @@ function difficultyToPercent(value: "easy" | "medium" | "hard"): number {
  * build this comes from analytics; for the mock it is a stable seed so
  * the inspector reads as if the AI had crunched historical data.
  */
-function difficultyInsightForFolder(folder: QuestionBankFolder | undefined): {
+function difficultyInsightForFolder(folder: LibraryFolder | undefined): {
   /** Predicted level based on the content the author is writing. */
   recommendation: "easy" | "medium" | "hard"
   /** Contextual note shown under the meter (e.g. folder distribution). */
@@ -452,11 +452,11 @@ function BuilderSection({
 // Compact selected tile — same visual rhythm as the collapsed
 // "Question format" card. Clicking the tile opens a Command popover with
 // search, full folder list, and an "Add new folder" footer that bridges to
-// `QuestionBankNewFolderSheet`. Visuals reuse the folder-color tokens from
-// `lib/mock/question-bank-folders.ts` so the inspector reads the same as
-// the rest of the question bank.
+// `LibraryNewFolderSheet`. Visuals reuse the folder-color tokens from
+// `lib/mock/library-folders.ts` so the inspector reads the same as
+// the rest of the library.
 
-const FOLDER_TINT_BG: Record<QuestionBankFolderColorKey, string> = {
+const FOLDER_TINT_BG: Record<LibraryFolderColorKey, string> = {
   brand: "bg-[var(--icon-disc-brand-bg)] text-[var(--icon-disc-brand-fg)]",
   success: "bg-[var(--icon-disc-chart-2-bg)] text-[var(--icon-disc-chart-2-fg)]",
   warning: "bg-[var(--icon-disc-chart-4-bg)] text-[var(--icon-disc-chart-4-fg)]",
@@ -468,7 +468,7 @@ const FOLDER_TINT_BG: Record<QuestionBankFolderColorKey, string> = {
 }
 
 interface FolderPickerControlProps {
-  folders: QuestionBankFolder[]
+  folders: LibraryFolder[]
   value: string
   onChange: (id: string) => void
   open: boolean
@@ -479,14 +479,14 @@ interface FolderPickerControlProps {
 /** Build a tree-ordered array: parents first, then their children
     indented beneath. Each entry carries a `depth` for left-padding. */
 function buildFolderTree(
-  folders: QuestionBankFolder[],
-): Array<{ folder: QuestionBankFolder; depth: number }> {
+  folders: LibraryFolder[],
+): Array<{ folder: LibraryFolder; depth: number }> {
   const roots = folders.filter(f => f.parentId == null)
   const childrenOf = (parentId: string) =>
     folders.filter(f => f.parentId === parentId)
 
-  const out: Array<{ folder: QuestionBankFolder; depth: number }> = []
-  function walk(parent: QuestionBankFolder, depth: number) {
+  const out: Array<{ folder: LibraryFolder; depth: number }> = []
+  function walk(parent: LibraryFolder, depth: number) {
     out.push({ folder: parent, depth })
     for (const child of childrenOf(parent.id)) {
       walk(child, depth + 1)
@@ -655,7 +655,7 @@ function DifficultyMeter({
         : "bg-destructive"
 
   const levelLabel =
-    value === "easy" ? "Easy" : value === "hard" ? "Hard" : "Medium"
+    value === "easy" ? "Low" : value === "hard" ? "High" : "Normal"
 
   return (
     <section className="flex flex-col gap-3">
@@ -782,15 +782,15 @@ interface NewQuestionComposerProps {
   backHref: string
   /** Label displayed in the `SiteHeader` back-icon (e.g. "Back to Favorites"). */
   backLabel?: string
-  folders?: QuestionBankFolder[]
+  folders?: LibraryFolder[]
 }
 
-export function NewQuestionComposer({
+export function NewLibraryItemForm({
   draftQuestionId,
   defaultFolderId,
   backHref,
   backLabel = "Back",
-  folders = DEFAULT_QUESTION_BANK_FOLDERS,
+  folders = DEFAULT_LIBRARY_FOLDERS,
 }: NewQuestionComposerProps) {
   const router = useRouter()
   const [submitting, setSubmitting] = React.useState(false)
@@ -804,7 +804,7 @@ export function NewQuestionComposer({
   /** Local folder list — extended in-place when the author adds one
       from the location picker so the new entry is selectable without
       a page navigation. */
-  const [localFolders, setLocalFolders] = React.useState<QuestionBankFolder[]>(folders)
+  const [localFolders, setLocalFolders] = React.useState<LibraryFolder[]>(folders)
   React.useEffect(() => {
     setLocalFolders(prev =>
       prev.length === folders.length && prev.every((f, i) => f.id === folders[i]?.id)
@@ -1243,7 +1243,7 @@ export function NewQuestionComposer({
           {/* Location — compact selected tile (mirrors the
               collapsed question-format card). Click opens a Command
               popover with search and an "Add new folder" footer
-              that bridges into `QuestionBankNewFolderSheet`. */}
+              that bridges into `LibraryNewFolderSheet`. */}
           <FormField
             control={form.control}
             name="folderId"
@@ -1324,8 +1324,8 @@ export function NewQuestionComposer({
             name="cogLevel"
             render={({ field }) => (
               <InspectorSection
-                title="NBME cognitive level"
-                description="Distinct from Bloom — broader buckets used by NBME item writers."
+                title="Cognitive level"
+                description="Broader bucket used for analytics — separate from the tier above."
               >
                 <ToggleGroup
                   type="single"
@@ -1594,7 +1594,7 @@ export function NewQuestionComposer({
               )}
             />
 
-            {/* MCQ family + True/False — bordered OptionRows. */}
+            {/* Choice family + True/False — bordered OptionRows. */}
             {showOptionsBlock ? (
               <FormField
                 control={form.control}
@@ -1607,7 +1607,7 @@ export function NewQuestionComposer({
                     >
                       <p className="text-xs text-muted-foreground">
                         {isMulti
-                          ? "NCLEX-style — mark every correct response."
+                          ? "Mark every correct response."
                           : isTrueFalse
                             ? "Mark whether the statement is True or False."
                             : "Mark the single best answer. Distractors should be plausible — same length and grammar as the correct option."}
@@ -1942,10 +1942,10 @@ export function NewQuestionComposer({
                       Image hotspot authoring
                     </p>
                     <p className="mt-1 text-xs text-muted-foreground">
-                      Upload an anatomy diagram, x-ray, or ECG, then draw the correct
-                      region(s). Image upload + region drawing tools arrive in the
-                      next phase — for now, describe the expected target in the
-                      explanation below.
+                      Upload an image, then draw the correct region(s). Image
+                      upload + region drawing tools arrive in the next phase —
+                      for now, describe the expected target in the explanation
+                      below.
                     </p>
                   </div>
                   <Button type="button" variant="outline" size="sm" disabled>
@@ -2082,17 +2082,17 @@ export function NewQuestionComposer({
       </form>
 
       {/* New folder — invoked from the location picker. Re-uses the
-          shared `QuestionBankNewFolderSheet` (same shell as the folder
+          shared `LibraryNewFolderSheet` (same shell as the folder
           hub) so the surface stays consistent. The created folder is
           appended to `localFolders` and immediately selected. */}
-      <QuestionBankNewFolderSheet
+      <LibraryNewFolderSheet
         open={newFolderOpen}
         onOpenChange={setNewFolderOpen}
         parentFolderId={null}
         descriptionText="Drafts created from this composer can land in the new folder right away."
         onCreated={f => {
           const id = newFolderId()
-          const created: QuestionBankFolder = { id, ...f }
+          const created: LibraryFolder = { id, ...f }
           setLocalFolders(prev => [...prev, created])
           form.setValue("folderId", id, { shouldDirty: true, shouldValidate: false })
         }}

package/template/components/sidebar/app-sidebar.tsx

@@ -105,6 +105,53 @@ function normalizedLocationHash(locationHash: string): string {
   return locationHash.startsWith("#") ? locationHash.slice(1) : locationHash
 }
 
+/**
+ * Path → set of hash fragments claimed by *another* nav item at the same path.
+ *
+ * Why: several rows deliberately share a route and disambiguate via `#fragment`.
+ * Example: `Tokens & themes → /settings#appearance` and `Settings → /settings`
+ * both render under the same page. Without a registry, when the user is on
+ * `/settings#appearance` the no-fragment "Settings" row matches by path-equality
+ * (line below: `pathname === pathOnly`) and lights up too — so *both* rows
+ * appear active.
+ *
+ * The registry is computed once from the static nav config and consulted by
+ * `isNavActive` to make the no-fragment item defer when a hash-bearing sibling
+ * claims the current `location.hash`.
+ */
+const NAV_HASH_CLAIMS: ReadonlyMap<string, ReadonlySet<string>> = (() => {
+  const map = new Map<string, Set<string>>()
+  const record = (url: string) => {
+    const p = navUrlPath(url)
+    const f = navUrlFragment(url)
+    if (!p || f === null) return
+    let set = map.get(p)
+    if (!set) { set = new Set<string>(); map.set(p, set) }
+    set.add(f)
+  }
+  const walk = (items: ReadonlyArray<{ url?: string; children?: ReadonlyArray<{ url?: string; children?: unknown }> }>) => {
+    for (const it of items) {
+      if (typeof it.url === "string") record(it.url)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      if (Array.isArray((it as any).children)) walk((it as any).children)
+    }
+  }
+  walk(NAV_PRIMARY)
+  walk(NAV_DOCUMENTS)
+  walk(NAV_QUICK_ACTIONS)
+  walk(NAV_SECONDARY)
+  return map
+})()
+
+/** True when another nav item at the same path claims the current location hash. */
+function navHasMoreSpecificMatch(pathname: string, locationHash: string): boolean {
+  const claims = NAV_HASH_CLAIMS.get(pathname)
+  if (!claims) return false
+  const h = normalizedLocationHash(locationHash)
+  if (h === "") return false
+  return claims.has(h)
+}
+
 /**
  * Whether `pathname` (+ optional `location.hash`) matches a sidebar `href`.
  * When several links share the same path (e.g. `/settings`), disambiguate with `#fragment`
@@ -129,9 +176,18 @@ function isNavActive(pathname: string, url: string, locationHash = ""): boolean
     return pathname === pathOnly && h === frag
   }
 
-  if (pathOnly === "/") return pathname === "/" && h === ""
-  /** Exact path match — ignore `location.hash` when the nav `href` has no `#…` fragment (QB view tabs use hash). */
-  if (pathname === pathOnly) return true
+  if (pathOnly === "/") {
+    if (pathname !== "/" || h !== "") return false
+    return !navHasMoreSpecificMatch(pathname, locationHash)
+  }
+  /**
+   * Exact path match — ignore `location.hash` when the nav `href` has no `#…` fragment (QB view tabs use hash).
+   * EXCEPTION: when another nav item at the same path claims the current hash
+   * (e.g. `Tokens & themes → /settings#appearance` while we're evaluating
+   * `Settings → /settings`), defer to that more-specific row — otherwise both
+   * would light up. See `NAV_HASH_CLAIMS`.
+   */
+  if (pathname === pathOnly) return !navHasMoreSpecificMatch(pathname, locationHash)
   // Design system library — active on hub and detail routes.
   if (pathOnly === "/library") {
     return pathname.startsWith("/library/")
@@ -167,7 +223,7 @@ function isCollapsibleChildActive(
 
   if (!isNavActive(pathname, child.url, locationHash)) return false
 
-  /** Hub entry (`/question-bank`) must not stay “active” on `/question-bank/library` etc. */
+  /** Hub entry (`/library`) must not stay “active” on `/library/all` etc. */
   if (parent.primaryHubChildKey && child.key === parent.primaryHubChildKey) {
     const hubPath = navUrlPath(parent.url)
     if (hubPath) {
@@ -298,7 +354,7 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
   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`),
+  // section" by lighting up on any descendant route (e.g. `/library/all`),
   // 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`).

package/template/components/sidebar/secondary-panel.tsx

@@ -4,28 +4,29 @@
  * SecondaryPanel — nested rail between the primary icon sidebar and content.
  * Full width shows hub scope nav; **compact** matches the primary sidebar icon rail (`w-12`).
  *
- * Chrome uses {@link NestedSecondaryPanelShell}. Question bank body stays in
- * `question-bank-secondary-nav.tsx` (domain-specific), not duplicated here.
+ * Chrome uses {@link NestedSecondaryPanelShell}. Library body stays in
+ * `library-secondary-nav.tsx` (domain-specific), not duplicated here.
  */
 
 import * as React from "react"
 import { useSidebar } from "@/components/ui/sidebar"
 import { Tip } from "@/components/ui/tip"
 import { Button } from "@/components/ui/button"
-import { QuestionBankSecondaryNav } from "@/components/question-bank-secondary-nav"
+import { LibrarySecondaryNav } from "@/components/library-secondary-nav"
+import { TokensSecondaryNav } from "@/components/tokens-secondary-nav"
 import { NestedSecondaryPanelShell } from "@/components/templates/nested-secondary-panel-shell"
 import { useSidebarReflowZoom } from "@/hooks/use-sidebar-reflow-zoom"
-import type { QuestionBankItem } from "@/lib/mock/question-bank"
-import type { QuestionBankFolder } from "@/lib/mock/question-bank-folders"
-
-export type QuestionBankFolderBridge = {
-  folders: QuestionBankFolder[]
-  onFoldersChange: React.Dispatch<React.SetStateAction<QuestionBankFolder[]>>
-  items: QuestionBankItem[]
-  onItemsChange: React.Dispatch<React.SetStateAction<QuestionBankItem[]>>
+import type { LibraryItem } from "@/lib/mock/library"
+import type { LibraryFolder } from "@/lib/mock/library-folders"
+
+export type LibraryFolderBridge = {
+  folders: LibraryFolder[]
+  onFoldersChange: React.Dispatch<React.SetStateAction<LibraryFolder[]>>
+  items: LibraryItem[]
+  onItemsChange: React.Dispatch<React.SetStateAction<LibraryItem[]>>
 }
 
-export type QuestionBankAccessBridge = {
+export type LibraryAccessBridge = {
   openManageAccess: () => void
 }
 
@@ -36,11 +37,18 @@ export type QuestionBankAccessBridge = {
 export type ClosePanelOptions = {
   /**
    * Main app sidebar after the secondary panel closes.
-   * - `leave` (default): only clear the active panel — preserves expanded/collapsed primary rail (⌘B, cookie).
-   * - `expand`: full primary rail — use only when product explicitly restores the wide rail after dismiss.
-   * - `collapse`: icon rail — matches routes that keep the primary rail compact with the panel closed.
+   * - `restore` (default): snap back to the user's saved preference
+   *   (`sidebar_state_v2` cookie, or `defaultOpen` if unset). Use this when
+   *   leaving a page whose secondary panel caused an incidental collapse — the
+   *   rail returns to the state the user explicitly set elsewhere via ⌘B / the
+   *   sidebar button.
+   * - `leave`: only clear the active panel — keep the rail in whatever state it
+   *   was in (rare; prefer `restore`).
+   * - `expand`: force the full primary rail open. Use only when the product
+   *   explicitly wants the wide rail after dismiss.
+   * - `collapse`: keep the icon rail. Use when the next route also wants compact.
    */
-  mainSidebar?: "expand" | "collapse" | "leave"
+  mainSidebar?: "restore" | "expand" | "collapse" | "leave"
 }
 
 interface SecondaryPanelContextValue {
@@ -54,12 +62,12 @@ interface SecondaryPanelContextValue {
   secondaryPanelCompact: boolean
   /** Narrow icon rail (primary-sidebar-style); keeps {@link activePanel} mounted. */
   collapseActiveSecondaryPanel: () => void
-  /** Question bank folder tree shared with the secondary nav while the hub is mounted. */
-  questionBankFolderBridge: QuestionBankFolderBridge | null
-  setQuestionBankFolderBridge: (bridge: QuestionBankFolderBridge | null) => void
+  /** Library folder tree shared with the secondary nav while the hub is mounted. */
+  libraryFolderBridge: LibraryFolderBridge | null
+  setLibraryFolderBridge: (bridge: LibraryFolderBridge | null) => void
   /** Opens the hub collaborators sheet from the secondary nav. */
-  questionBankAccessBridge: QuestionBankAccessBridge | null
-  setQuestionBankAccessBridge: (bridge: QuestionBankAccessBridge | null) => void
+  libraryAccessBridge: LibraryAccessBridge | null
+  setLibraryAccessBridge: (bridge: LibraryAccessBridge | null) => void
 }
 
 const SecondaryPanelContext = React.createContext<SecondaryPanelContextValue>({
@@ -68,10 +76,10 @@ const SecondaryPanelContext = React.createContext<SecondaryPanelContextValue>({
   closePanel: () => {},
   secondaryPanelCompact: false,
   collapseActiveSecondaryPanel: () => {},
-  questionBankFolderBridge: null,
-  setQuestionBankFolderBridge: () => {},
-  questionBankAccessBridge: null,
-  setQuestionBankAccessBridge: () => {},
+  libraryFolderBridge: null,
+  setLibraryFolderBridge: () => {},
+  libraryAccessBridge: null,
+  setLibraryAccessBridge: () => {},
 })
 
 export function useSecondaryPanel() {
@@ -81,11 +89,11 @@ export function useSecondaryPanel() {
 export function SecondaryPanelProvider({ children }: { children: React.ReactNode }) {
   const [activePanel, setActivePanel] = React.useState<string | null>(null)
   const [secondaryPanelCompact, setSecondaryPanelCompact] = React.useState(false)
-  const [questionBankFolderBridge, setQuestionBankFolderBridge] =
-    React.useState<QuestionBankFolderBridge | null>(null)
-  const [questionBankAccessBridge, setQuestionBankAccessBridge] =
-    React.useState<QuestionBankAccessBridge | null>(null)
-  const { setOpen } = useSidebar()
+  const [libraryFolderBridge, setLibraryFolderBridge] =
+    React.useState<LibraryFolderBridge | null>(null)
+  const [libraryAccessBridge, setLibraryAccessBridge] =
+    React.useState<LibraryAccessBridge | null>(null)
+  const { setOpen, restoreSavedOpen } = useSidebar()
 
   /**
    * Browser zoom ≥ 200% (or very short viewport) — same `useSidebarReflowZoom`
@@ -122,14 +130,25 @@ export function SecondaryPanelProvider({ children }: { children: React.ReactNode
   const closePanel = React.useCallback((opts?: ClosePanelOptions) => {
     setSecondaryPanelCompact(false)
     setActivePanel(null)
-    const mainSidebar = opts?.mainSidebar ?? "leave"
+    /**
+     * Default = `restore`. `openPanel` collapsed the rail with `persist: false`
+     * (the saved cookie is untouched), so on close we ask the sidebar context
+     * to re-apply whatever the user truly saved. This makes the visual collapse
+     * scoped to the page that needed it — leave the page → rail comes back to
+     * the user's preference.
+     */
+    const mainSidebar = opts?.mainSidebar ?? "restore"
     if (mainSidebar === "leave") return
+    if (mainSidebar === "restore") {
+      restoreSavedOpen()
+      return
+    }
     if (mainSidebar === "collapse") {
       setOpen(false, { persist: false })
-    } else {
-      setOpen(true, { persist: false }) // expand main sidebar back
+      return
     }
-  }, [setOpen])
+    setOpen(true, { persist: false }) // mainSidebar === "expand"
+  }, [restoreSavedOpen, setOpen])
 
   const collapseActiveSecondaryPanel = React.useCallback(() => {
     setSecondaryPanelCompact(true)
@@ -142,10 +161,10 @@ export function SecondaryPanelProvider({ children }: { children: React.ReactNode
       closePanel,
       secondaryPanelCompact,
       collapseActiveSecondaryPanel,
-      questionBankFolderBridge,
-      setQuestionBankFolderBridge,
-      questionBankAccessBridge,
-      setQuestionBankAccessBridge,
+      libraryFolderBridge,
+      setLibraryFolderBridge,
+      libraryAccessBridge,
+      setLibraryAccessBridge,
     }),
     [
       activePanel,
@@ -153,8 +172,8 @@ export function SecondaryPanelProvider({ children }: { children: React.ReactNode
       closePanel,
       secondaryPanelCompact,
       collapseActiveSecondaryPanel,
-      questionBankFolderBridge,
-      questionBankAccessBridge,
+      libraryFolderBridge,
+      libraryAccessBridge,
     ],
   )
 
@@ -169,11 +188,11 @@ export function SecondaryPanelProvider({ children }: { children: React.ReactNode
 // SecondaryPanel — the actual rendered panel
 // ─────────────────────────────────────────────────────────────────────────────
 
-function QuestionBankPanel() {
+function LibraryPanel() {
   const { collapseActiveSecondaryPanel, secondaryPanelCompact } = useSecondaryPanel()
 
   if (secondaryPanelCompact) {
-    return <QuestionBankSecondaryNav />
+    return <LibrarySecondaryNav />
   }
 
   return (
@@ -197,14 +216,48 @@ function QuestionBankPanel() {
           </Button>
         </Tip>
       </div>
-      <QuestionBankSecondaryNav />
+      <LibrarySecondaryNav />
+    </>
+  )
+}
+
+function TokensPanel() {
+  const { collapseActiveSecondaryPanel, secondaryPanelCompact } = useSecondaryPanel()
+
+  if (secondaryPanelCompact) {
+    return <TokensSecondaryNav />
+  }
+
+  return (
+    <>
+      <div className="flex items-center justify-between gap-2 px-4 pt-4 pb-2">
+        <h2
+          className="text-xl font-semibold leading-tight text-sidebar-foreground"
+          style={{ fontFamily: "var(--font-heading)" }}
+        >
+          Tokens
+        </h2>
+        <Tip label="Collapse to icons" side="bottom">
+          <Button
+            type="button"
+            size="icon"
+            variant="ghost"
+            onClick={() => collapseActiveSecondaryPanel()}
+            aria-label="Collapse to icons"
+          >
+            <i className="fa-light fa-angles-left" aria-hidden="true" />
+          </Button>
+        </Tip>
+      </div>
+      <TokensSecondaryNav />
     </>
   )
 }
 
 /** Register panel components by id when a route opts into `secondaryPanel` in nav. */
 const PANELS: Record<string, React.FC> = {
-  "question-bank": QuestionBankPanel,
+  "library": LibraryPanel,
+  tokens: TokensPanel,
 }
 
 export function SecondaryPanel() {
@@ -234,30 +287,30 @@ export function useAutoPanel(panelId: string) {
   }, [panelId])
 }
 
-/** Sync hub folder state into the question bank secondary nav while the route is mounted. */
-export function QuestionBankFolderBridge({
+/** Sync hub folder state into the library secondary nav while the route is mounted. */
+export function LibraryFolderBridge({
   folders,
   onFoldersChange,
   items,
   onItemsChange,
-}: QuestionBankFolderBridge) {
-  const { setQuestionBankFolderBridge } = useSecondaryPanel()
+}: LibraryFolderBridge) {
+  const { setLibraryFolderBridge } = useSecondaryPanel()
 
   React.useEffect(() => {
-    setQuestionBankFolderBridge({ folders, onFoldersChange, items, onItemsChange })
-    return () => setQuestionBankFolderBridge(null)
-  }, [folders, onFoldersChange, items, onItemsChange, setQuestionBankFolderBridge])
+    setLibraryFolderBridge({ folders, onFoldersChange, items, onItemsChange })
+    return () => setLibraryFolderBridge(null)
+  }, [folders, onFoldersChange, items, onItemsChange, setLibraryFolderBridge])
 
   return null
 }
 
-export function QuestionBankAccessBridge({ openManageAccess }: QuestionBankAccessBridge) {
-  const { setQuestionBankAccessBridge } = useSecondaryPanel()
+export function LibraryAccessBridge({ openManageAccess }: LibraryAccessBridge) {
+  const { setLibraryAccessBridge } = useSecondaryPanel()
 
   React.useEffect(() => {
-    setQuestionBankAccessBridge({ openManageAccess })
-    return () => setQuestionBankAccessBridge(null)
-  }, [openManageAccess, setQuestionBankAccessBridge])
+    setLibraryAccessBridge({ openManageAccess })
+    return () => setLibraryAccessBridge(null)
+  }, [openManageAccess, setLibraryAccessBridge])
 
   return null
 }

package/template/components/sidebar/sidebar-auto-collapse.tsx

@@ -5,8 +5,8 @@ import { useSidebar } from "@/components/ui/sidebar"
 
 /**
  * Collapses the sidebar on mount. Restores previous state on unmount.
- * Used on the new-placement page so the sidebar collapses when entering
- * and reverts to whatever it was when leaving.
+ * Use on focused full-page forms / wizards so the sidebar collapses when
+ * entering and reverts to whatever it was when leaving.
  *
  * Both transitions pass `{ persist: false }` so the visual collapse never
  * overwrites the user's saved sidebar preference (the `sidebar_state_v2`

package/template/components/sidebar/sidebar-auto-open.tsx

@@ -3,7 +3,8 @@
 import { useEffect, useRef } from "react"
 import { useSidebar } from "@/components/ui/sidebar"
 
-/** Reopens the sidebar once when the data-list page mounts (after returning from new-placement). */
+/** Reopens the sidebar once on mount — pair with `SidebarAutoCollapse` on focused
+ *  full-page forms / wizards so leaving the form restores the sidebar. */
 export function SidebarAutoOpen() {
   const { setOpen } = useSidebar()
   const ran = useRef(false)

package/template/components/table-properties/types.ts

@@ -8,7 +8,7 @@
  *
  * `FILTER_FIELDS` and `COLUMNS` below are **product data**, not
  * design-system primitives — they encode the columns + filter operators
- * of the Placements hub. Other hubs (Team, Compliance, Question bank)
+ * of the Placements hub. Other hubs (Team, Compliance, Library)
  * compose their own arrays and pass them into the drawer.
  */
 

package/template/components/templates/discovery-hub-template.tsx

@@ -78,7 +78,7 @@ const DiscoveryHubSearchRow = React.memo(function DiscoveryHubSearchRow({
 
 /**
  * Discovery hub — centered command-style natural language search, create CTA, and Ask Leo promo.
- * Hubs can pass `groups` from a domain module (e.g. Ask Leo prompt suggestions from `lib/question-bank-hub-search.ts`).
+ * Hubs can pass `groups` from a domain module (e.g. Ask Leo prompt suggestions from `lib/library-hub-search.ts`).
  */
 export function DiscoveryHubTemplate({
   title,

package/template/components/templates/new-focus-template.tsx

@@ -39,7 +39,7 @@
  * </form>
  * ```
  *
- * See `new-placement-form.tsx` and `new-question-composer.tsx` for canonical usage.
+ * See `new-placement-form.tsx` and `new-library-item-form.tsx` for canonical usage.
  *
  * The template owns:
  *   • Page chrome (`PrimaryPageTemplate` underneath: `SidebarInset`, `SiteHeader`).
@@ -49,7 +49,7 @@
  *     ⌘⌥← back, plain Enter submit on final step).
  *   • For `form-inspector`: 2-column scaffold with sticky inspector rail.
  *
- * WCAG 2.1 AA — same rules as `new-placement-form` / `new-question-composer`:
+ * WCAG 2.1 AA — same rules as `new-placement-form` / `new-library-item-form`:
  *  ✓ Hero `<h1>` carries the page title (only one h1 per route).
  *  ✓ Step indicator uses `aria-current="step"` and visible labels (1.3.1).
  *  ✓ Focus moves to step content when step changes (2.4.3).

package/template/components/templates/secondary-panel-hub-template.tsx

@@ -24,7 +24,7 @@ export interface SecondaryPanelHubTemplateProps
 /**
  * Primary hub shell with optional bridges + `PrimaryPageTemplate` body.
  * Mount `useAutoPanel` / `SecondaryPanelHubActivator` on a parent layout that stays mounted across
- * hub child routes (see `app/(app)/question-bank/layout.tsx`) so the panel does not close between navigations.
+ * hub child routes (see `app/(app)/library/layout.tsx`) so the panel does not close between navigations.
  *
  * Pair with `useSecondaryPanelHubNav` and hub-specific `lib/*-nav.ts` helpers for URL scope.
  */