@exxatdesignux/ui 0.3.0 → 0.4.1

package/template/components/folder-details-shell.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 /**
- * Folder details panel — OsFolderGlyph header + aggregates (`question-bank-inspector` helpers today).
- * Reusable across list hubs that share `QuestionBankFolder` / `QuestionBankItem` shapes or adapters.
+ * Folder details panel — OsFolderGlyph header + aggregates (`library-inspector` helpers today).
+ * Reusable across list hubs that share `LibraryFolder` / `LibraryItem` shapes or adapters.
  */
 
 import * as React from "react"
@@ -12,13 +12,13 @@ import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
 import { Tip } from "@/components/ui/tip"
 import { cn } from "@/lib/utils"
-import type { QuestionBankItem } from "@/lib/mock/question-bank"
-import type { QuestionBankFolder } from "@/lib/mock/question-bank-folders"
+import type { LibraryItem } from "@/lib/mock/library"
+import type { LibraryFolder } from "@/lib/mock/library-folders"
 import {
   aggregateFolderQuestions,
   BLOOM_LEVEL_ORDER,
   questionsInFolderSubtree,
-} from "@/lib/mock/question-bank-inspector"
+} from "@/lib/mock/library-inspector"
 
 function DetailBreadcrumbNav({ segments }: { segments: { id: string; label: string }[] }) {
   if (segments.length === 0) return null
@@ -70,9 +70,9 @@ function InspectorSectionTitle({ children, id }: { children: React.ReactNode; id
 }
 
 export interface FolderDetailsShellProps {
-  folder: QuestionBankFolder
-  folders: QuestionBankFolder[]
-  questions: QuestionBankItem[]
+  folder: LibraryFolder
+  folders: LibraryFolder[]
+  questions: LibraryItem[]
   /** Clears selection (tree inspector dismiss). */
   onClearSelection?: () => void
 }
@@ -89,8 +89,8 @@ export function FolderDetailsShell({
   const diffSum = diffAgg.easy + diffAgg.medium + diffAgg.hard
   const maxBloomCount = Math.max(1, ...BLOOM_LEVEL_ORDER.map(level => bloom[level] ?? 0))
 
-  const breadcrumbs: QuestionBankFolder[] = []
-  let cur: QuestionBankFolder | undefined = folder
+  const breadcrumbs: LibraryFolder[] = []
+  let cur: LibraryFolder | undefined = folder
   while (cur) {
     breadcrumbs.unshift(cur)
     cur = folders.find(f => f.id === cur?.parentId)
@@ -114,7 +114,7 @@ export function FolderDetailsShell({
             <div className="min-w-0 flex-1">
               <h2 className="text-base font-semibold leading-tight tracking-tight text-foreground">
                 <span className="truncate">{folder.name}</span>
-                <span className="font-normal text-muted-foreground"> · Question Bank</span>
+                <span className="font-normal text-muted-foreground"> · Library</span>
               </h2>
               <p className="mt-1 text-sm font-semibold tabular-nums text-foreground">
                 {totalQuestions} question{totalQuestions !== 1 ? "s" : ""}

package/template/components/hub-tree-panel-view.tsx

@@ -2,7 +2,7 @@
 
 /**
  * **Tree view** — `ListPageTreePanelShell` + outline tree + read-only details (`FolderDetailsShell`).
- * Hub wiring (folders, mock sheet) stays in the caller; this module hosts question-bank demo wiring only.
+ * Hub wiring (folders, mock sheet) stays in the caller; this module hosts library demo wiring only.
  */
 
 import * as React from "react"
@@ -39,12 +39,12 @@ import {
 import { ListPageTreePanelShell } from "@/components/data-views/list-page-tree-panel-shell"
 import { ListPageSplitDetailsPlaceholder } from "@/components/data-views/list-page-split-details-placeholder"
 import { ListPageTreeColumnHeader } from "@/components/data-views/list-page-tree-column-header"
-import { QuestionBankNewFolderSheet } from "@/components/question-bank-new-folder-sheet"
+import { LibraryNewFolderSheet } from "@/components/library-new-folder-sheet"
 import type {
-  QuestionBankItem,
-  QuestionBankDifficulty,
-} from "@/lib/mock/question-bank"
-import type { QuestionBankFolder, QuestionBankFolderColorKey } from "@/lib/mock/question-bank-folders"
+  LibraryItem,
+  LibraryLevel,
+} from "@/lib/mock/library"
+import type { LibraryFolder, LibraryFolderColorKey } from "@/lib/mock/library-folders"
 import { formatDateUS } from "@/lib/date-filter"
 import {
   deriveBloomLevel,
@@ -52,14 +52,14 @@ import {
   deriveQuestionItemCode,
   deriveTags,
   QUESTION_TYPE_ABBREV,
-} from "@/lib/mock/question-bank-inspector"
+} from "@/lib/mock/library-inspector"
 import { FolderDetailsShell } from "@/components/folder-details-shell"
 import { initialsFromDisplayName } from "@/lib/initials-from-name"
 
-const DIFFICULTY_LABEL: Record<QuestionBankDifficulty, string> = {
-  easy: "Easy",
-  medium: "Medium",
-  hard: "Hard",
+const DIFFICULTY_LABEL: Record<LibraryLevel, string> = {
+  easy: "Low",
+  medium: "Normal",
+  hard: "High",
 }
 
 // ============================================================================
@@ -67,9 +67,9 @@ const DIFFICULTY_LABEL: Record<QuestionBankDifficulty, string> = {
 // ============================================================================
 
 interface TreeItemProps {
-  folder: QuestionBankFolder
-  folders: QuestionBankFolder[]
-  questions: QuestionBankItem[]
+  folder: LibraryFolder
+  folders: LibraryFolder[]
+  questions: LibraryItem[]
   selectedItemId: string | null
   onSelectItem: (itemId: string) => void
 }
@@ -226,8 +226,8 @@ function InspectorSectionTitle({ children, id }: { children: React.ReactNode; id
 
 interface DetailsPanelProps {
   selectedItemId: string | null
-  folders: QuestionBankFolder[]
-  questions: QuestionBankItem[]
+  folders: LibraryFolder[]
+  questions: LibraryItem[]
   /** Clears tree selection (header dismiss). */
   onClearSelection?: () => void
 }
@@ -534,14 +534,14 @@ function DetailsPanel({ selectedItemId, folders, questions, onClearSelection }:
 }
 
 // ============================================================================
-// HubTreePanelView — tree + details wiring (question bank demo; reusable shell above)
+// HubTreePanelView — tree + details wiring (library demo; reusable shell above)
 // ============================================================================
 
 export interface HubTreePanelViewProps {
-  items: QuestionBankItem[]
-  folders: QuestionBankFolder[]
-  onItemsChange: (items: QuestionBankItem[]) => void
-  onFoldersChange: (folders: QuestionBankFolder[]) => void
+  items: LibraryItem[]
+  folders: LibraryFolder[]
+  onItemsChange: (items: LibraryItem[]) => void
+  onFoldersChange: (folders: LibraryFolder[]) => void
 }
 
 export function HubTreePanelView({
@@ -552,7 +552,7 @@ export function HubTreePanelView({
   const [selectedItemId, setSelectedItemId] = React.useState<string | null>(null)
   const [newFolderOpen, setNewFolderOpen] = React.useState(false)
   const [newFolderParentId, setNewFolderParentId] = React.useState<string | null>(null)
-  const [customizingFolder, setCustomizingFolder] = React.useState<QuestionBankFolder | null>(null)
+  const [customizingFolder, setCustomizingFolder] = React.useState<LibraryFolder | null>(null)
 
   const rootFolders = React.useMemo(
     () => folders.filter(f => f.parentId === null).sort((a, b) => a.name.localeCompare(b.name)),
@@ -560,7 +560,7 @@ export function HubTreePanelView({
   )
 
   const handleNewFolderCreated = React.useCallback(
-    (newFolder: { name: string; icon: string; colorKey: QuestionBankFolderColorKey; parentId: string | null }) => {
+    (newFolder: { name: string; icon: string; colorKey: LibraryFolderColorKey; parentId: string | null }) => {
       if (customizingFolder) {
         onFoldersChange(
           folders.map(f =>
@@ -652,7 +652,7 @@ export function HubTreePanelView({
         }
       />
 
-      <QuestionBankNewFolderSheet
+      <LibraryNewFolderSheet
         open={newFolderOpen}
         onOpenChange={setNewFolderOpen}
         parentFolderId={customizingFolder?.parentId ?? newFolderParentId}

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

@@ -3,10 +3,10 @@
 import * as React from "react"
 import { initialsFromDisplayName } from "@/lib/initials-from-name"
 import type {
-  QuestionBankDifficulty,
-  QuestionBankItem,
-  QuestionBankType,
-} from "@/lib/mock/question-bank"
+  LibraryLevel,
+  LibraryItem,
+  LibraryItemType,
+} from "@/lib/mock/library"
 import {
   LIST_HUB_STATUS_TINT_DANGER,
   LIST_HUB_STATUS_TINT_INFO,
@@ -28,81 +28,81 @@ import {
   type ListPageBoardColumnDef,
 } from "@/components/data-views/list-page-board-template"
 import {
-  QuestionBankFavoriteButton,
-  QUESTION_BANK_FAVORITE_HOVER_GROUP,
-} from "@/components/question-bank-favorite-button"
+  LibraryFavoriteButton,
+  LIBRARY_FAVORITE_HOVER_GROUP,
+} from "@/components/library-favorite-button"
 import { cn } from "@/lib/utils"
 
 const NEUTRAL_COUNT_BADGE = "bg-muted/90 text-foreground"
 
-const TYPE_LABEL: Record<QuestionBankType, string> = {
-  multiple_choice: "Multiple choice",
-  true_false: "True / false",
-  short_answer: "Short answer",
+const TYPE_LABEL: Record<LibraryItemType, string> = {
+  multiple_choice: "Type 1",
+  true_false: "Type 2",
+  short_answer: "Type 3",
 }
 
-const DIFF_LABEL: Record<QuestionBankDifficulty, string> = {
-  easy: "Easy",
-  medium: "Medium",
-  hard: "Hard",
+const DIFF_LABEL: Record<LibraryLevel, string> = {
+  easy: "Low",
+  medium: "Normal",
+  hard: "High",
 }
 
-const DIFF_BADGE: Record<QuestionBankDifficulty, string> = {
+const DIFF_BADGE: Record<LibraryLevel, string> = {
   easy: LIST_HUB_STATUS_TINT_SUCCESS,
   medium: LIST_HUB_STATUS_TINT_WARNING,
   hard: LIST_HUB_STATUS_TINT_DANGER,
 }
 
-const TYPE_BADGE: Record<QuestionBankType, string> = {
+const TYPE_BADGE: Record<LibraryItemType, string> = {
   multiple_choice: LIST_HUB_STATUS_TINT_NEUTRAL,
   true_false: LIST_HUB_STATUS_TINT_INFO,
   short_answer: LIST_HUB_STATUS_TINT_WARNING,
 }
 
-const DIFF_ORDER: QuestionBankDifficulty[] = ["easy", "medium", "hard"]
-const TYPE_ORDER: QuestionBankType[] = ["multiple_choice", "true_false", "short_answer"]
+const DIFF_ORDER: LibraryLevel[] = ["easy", "medium", "hard"]
+const TYPE_ORDER: LibraryItemType[] = ["multiple_choice", "true_false", "short_answer"]
 
-function topicBoardColumns(rows: QuestionBankItem[]): {
-  columns: ListPageBoardColumnDef<QuestionBankItem>[]
+function topicBoardColumns(rows: LibraryItem[]): {
+  columns: ListPageBoardColumnDef<LibraryItem>[]
   badgeMap: Record<string, string>
 } {
   const topics = [...new Set(rows.map(r => r.topic))].sort((a, b) => a.localeCompare(b))
-  const columns: ListPageBoardColumnDef<QuestionBankItem>[] = topics.map(topic => ({
+  const columns: ListPageBoardColumnDef<LibraryItem>[] = topics.map(topic => ({
     id: `topic:${topic}`,
     label: topic,
-    filter: (r: QuestionBankItem) => r.topic === topic,
+    filter: (r: LibraryItem) => r.topic === topic,
   }))
   const badgeMap = Object.fromEntries(topics.map(t => [`topic:${t}`, NEUTRAL_COUNT_BADGE]))
   return { columns, badgeMap }
 }
 
 function difficultyBoardColumns(): {
-  columns: ListPageBoardColumnDef<QuestionBankItem>[]
+  columns: ListPageBoardColumnDef<LibraryItem>[]
   badgeMap: Record<string, string>
 } {
-  const columns: ListPageBoardColumnDef<QuestionBankItem>[] = DIFF_ORDER.map(d => ({
+  const columns: ListPageBoardColumnDef<LibraryItem>[] = DIFF_ORDER.map(d => ({
     id: d,
     label: DIFF_LABEL[d],
-    filter: (r: QuestionBankItem) => r.difficulty === d,
+    filter: (r: LibraryItem) => r.difficulty === d,
   }))
   const badgeMap = Object.fromEntries(DIFF_ORDER.map(d => [d, DIFF_BADGE[d]]))
   return { columns, badgeMap }
 }
 
 function typeBoardColumns(): {
-  columns: ListPageBoardColumnDef<QuestionBankItem>[]
+  columns: ListPageBoardColumnDef<LibraryItem>[]
   badgeMap: Record<string, string>
 } {
-  const columns: ListPageBoardColumnDef<QuestionBankItem>[] = TYPE_ORDER.map(t => ({
+  const columns: ListPageBoardColumnDef<LibraryItem>[] = TYPE_ORDER.map(t => ({
     id: t,
     label: TYPE_LABEL[t],
-    filter: (r: QuestionBankItem) => r.type === t,
+    filter: (r: LibraryItem) => r.type === t,
   }))
   const badgeMap = Object.fromEntries(TYPE_ORDER.map(t => [t, TYPE_BADGE[t]]))
   return { columns, badgeMap }
 }
 
-function useQuestionBankBoardModel(rows: QuestionBankItem[], groupByColumnKey: string) {
+function useLibraryBoardModel(rows: LibraryItem[], groupByColumnKey: string) {
   return React.useMemo(() => {
     if (groupByColumnKey === "topic") {
       const { columns, badgeMap } = topicBoardColumns(rows)
@@ -121,19 +121,19 @@ function useQuestionBankBoardModel(rows: QuestionBankItem[], groupByColumnKey: s
   }, [rows, groupByColumnKey])
 }
 
-function QuestionBankBoardCard({
+function LibraryBoardCard({
   row,
   onToggleFavorite,
   onRowActivate,
 }: {
-  row: QuestionBankItem
-  onToggleFavorite: (row: QuestionBankItem) => void
-  onRowActivate?: (row: QuestionBankItem) => void
+  row: LibraryItem
+  onToggleFavorite: (row: LibraryItem) => void
+  onRowActivate?: (row: LibraryItem) => void
 }) {
   const initials = initialsFromDisplayName(row.author)
   return (
     <ListPageBoardCard
-      className={cn(QUESTION_BANK_FAVORITE_HOVER_GROUP, "w-full")}
+      className={cn(LIBRARY_FAVORITE_HOVER_GROUP, "w-full")}
       onClick={onRowActivate ? () => onRowActivate(row) : undefined}
     >
       <ListPageBoardCardHeader>
@@ -148,7 +148,7 @@ function QuestionBankBoardCard({
           )}
           trailing={(
             <div className="flex shrink-0 items-start gap-1">
-              <QuestionBankFavoriteButton row={row} onToggleFavorite={onToggleFavorite} />
+              <LibraryFavoriteButton row={row} onToggleFavorite={onToggleFavorite} />
               <ListPageBoardCardAvatar initials={initials} />
             </div>
           )}
@@ -166,26 +166,26 @@ function QuestionBankBoardCard({
   )
 }
 
-export const QUESTION_BANK_BOARD_GROUP_OPTIONS = [
+export const LIBRARY_BOARD_GROUP_OPTIONS = [
   { key: "topic", label: "Topic" },
   { key: "difficulty", label: "Difficulty" },
   { key: "type", label: "Type" },
 ] as const
 
-export function QuestionBankBoardView({
+export function LibraryBoardView({
   rows,
   groupByColumnKey,
   onToggleFavorite,
   onRowActivate,
 }: {
-  rows: QuestionBankItem[]
+  rows: LibraryItem[]
   groupByColumnKey: string
-  onToggleFavorite: (row: QuestionBankItem) => void
-  onRowActivate?: (row: QuestionBankItem) => void
+  onToggleFavorite: (row: LibraryItem) => void
+  onRowActivate?: (row: LibraryItem) => void
 }) {
-  const allowed = QUESTION_BANK_BOARD_GROUP_OPTIONS.some(o => o.key === groupByColumnKey)
+  const allowed = LIBRARY_BOARD_GROUP_OPTIONS.some(o => o.key === groupByColumnKey)
   const key = allowed ? groupByColumnKey : "topic"
-  const { columns, badgeMap } = useQuestionBankBoardModel(rows, key)
+  const { columns, badgeMap } = useLibraryBoardModel(rows, key)
 
   return (
     <ListPageBoardTemplate
@@ -195,7 +195,7 @@ export function QuestionBankBoardView({
       columnCountBadgeClassName={badgeMap}
       emptyColumnLabel="No questions"
       renderCard={row => (
-        <QuestionBankBoardCard row={row} onToggleFavorite={onToggleFavorite} onRowActivate={onRowActivate} />
+        <LibraryBoardCard row={row} onToggleFavorite={onToggleFavorite} onRowActivate={onRowActivate} />
       )}
     />
   )